Merge pull request #2207 from openedx/master

sync: master to alpha

src/DataTable/selection/BaseSelectionStatus.jsx

@@ -20,9 +20,13 @@ function BaseSelectionStatus({
   allSelectedText,
   selectedText,
 }) {
-  const { itemCount, isPaginated, state } = useContext(DataTableContext);
+  const {
+    itemCount, filteredRows, isPaginated, state,
+  } = useContext(DataTableContext);
   const hasAppliedFilters = state?.filters?.length > 0;
   const isAllRowsSelected = numSelectedRows === itemCount;
+  const filteredItems = filteredRows?.length || itemCount;
+
   const intlAllSelectedText = allSelectedText || (
     <FormattedMessage
       id="pgn.DataTable.BaseSelectionStatus.allSelectedText"
@@ -65,7 +69,7 @@ function BaseSelectionStatus({
               id="pgn.DataTable.BaseSelectionStatus.selectAllText"
               defaultMessage="Select all {itemCount}"
               description="A label for select all button."
-              values={{ itemCount }}
+              values={{ itemCount: filteredItems }}
             />
           )}
         </Button>

src/DataTable/selection/tests/SelectionStatus.test.jsx

@@ -15,6 +15,7 @@ const instance = {
   page: [1, 2, 3, 4],
   toggleAllRowsSelected: () => {},
   itemCount: 101,
+  filteredRows: [...new Array(27)],
   state: {
     selectedRowIds: {
       1: true,
@@ -70,6 +71,16 @@ describe('<SelectionStatus />', () => {
     expect(toggleAllRowsSpy).toHaveBeenCalledTimes(1);
     expect(toggleAllRowsSpy).toHaveBeenCalledWith(true);
   });
+  it('updates select all button text after applying filters', () => {
+    const wrapper = mount(<SelectionStatusWrapper value={{ ...instance }} />);
+    const button = wrapper.find(`button.${SELECT_ALL_TEST_ID}`);
+    expect(button.text()).toContain('Select all 27');
+  });
+  it('updates select all text if filters value is empty', () => {
+    const wrapper = mount(<SelectionStatusWrapper value={{ ...instance, filteredRows: 0 }} />);
+    const button = wrapper.find(`button.${SELECT_ALL_TEST_ID}`);
+    expect(button.text()).toContain('Select all 101');
+  });
   it('does not render the clear selection button if there are no selected rows', () => {
     const value = {
       ...instance,