feat(DataTable): add batch actions select all button addition (#14476)

* feat(DataTable): render select all button is onSelectAll is provided * fix(DataTable): update onSelectAll type * chore: update test snapshot --------- Co-authored-by: Guilherme Datilio Ribeiro <[email protected]>
carbon-design-system · Aug 24, 2023 · db61c68 · db61c68
1 parent d9a3ae9
commit db61c68
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 41 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -1888,9 +1888,15 @@ Map {
           "isRequired": true,
           "type": "func",
         },
+        "onSelectAll": Object {
+          "type": "func",
+        },
         "shouldShowBatchActions": Object {
           "type": "bool",
         },
+        "totalCount": Object {
+          "type": "number",
+        },
         "totalSelected": Object {
           "isRequired": true,
           "type": "number",
@@ -1903,6 +1909,7 @@ Map {
         "carbon.table.batch.cancel",
         "carbon.table.batch.items.selected",
         "carbon.table.batch.item.selected",
+        "carbon.table.batch.selectAll",
       ],
     },
     "TableBody": Object {
@@ -7748,9 +7755,15 @@ Map {
         "isRequired": true,
         "type": "func",
       },
+      "onSelectAll": Object {
+        "type": "func",
+      },
       "shouldShowBatchActions": Object {
         "type": "bool",
       },
+      "totalCount": Object {
+        "type": "number",
+      },
       "totalSelected": Object {
         "isRequired": true,
         "type": "number",
@@ -7763,6 +7776,7 @@ Map {
       "carbon.table.batch.cancel",
       "carbon.table.batch.items.selected",
       "carbon.table.batch.item.selected",
+      "carbon.table.batch.selectAll",
     ],
   },
   "TableBody" => Object {

diff --git a/packages/react/src/components/DataTable/DataTable.tsx b/packages/react/src/components/DataTable/DataTable.tsx
@@ -179,7 +179,9 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
     [key: string]: unknown;
   }) => {
     onCancel: () => void;
+    onSelectAll?: () => void | undefined;
     shouldShowBatchActions: boolean;
+    totalCount: number;
     totalSelected: number;
     [key: string]: unknown;
   };
@@ -678,6 +680,8 @@ class DataTable<RowType, ColTypes extends any[]> extends React.Component<
     const { shouldShowBatchActions } = this.state;
     const totalSelected = this.getSelectedRows().length;
     return {
+      onSelectAll: undefined,
+      totalCount: this.state.rowIds.length || 0,
       ...props,
       shouldShowBatchActions: shouldShowBatchActions && totalSelected > 0,
       totalSelected,

diff --git a/packages/react/src/components/DataTable/TableBatchActions.js b/packages/react/src/components/DataTable/TableBatchActions.js
@@ -17,12 +17,16 @@ const translationKeys = {
   'carbon.table.batch.cancel': 'Cancel',
   'carbon.table.batch.items.selected': 'items selected',
   'carbon.table.batch.item.selected': 'item selected',
+  'carbon.table.batch.selectAll': 'Select all',
 };
 
 const translateWithId = (id, state) => {
   if (id === 'carbon.table.batch.cancel') {
     return translationKeys[id];
   }
+  if (id === 'carbon.table.batch.selectAll') {
+    return `${translationKeys[id]} (${state.totalCount})`;
+  }
   return `${state.totalSelected} ${translationKeys[id]}`;
 };
 
@@ -31,7 +35,9 @@ const TableBatchActions = ({
   children,
   shouldShowBatchActions,
   totalSelected,
+  totalCount,
   onCancel,
+  onSelectAll,
   translateWithId: t,
   ...rest
 }) => {
@@ -65,6 +71,16 @@ const TableBatchActions = ({
               : t('carbon.table.batch.item.selected', { totalSelected })}
           </Text>
         </p>
+        {onSelectAll && (
+          <>
+            <span className={`${prefix}--batch-summary__divider`}>&#x7c;</span>
+            <Button
+              onClick={onSelectAll}
+              tabIndex={shouldShowBatchActions ? 0 : -1}>
+              {t('carbon.table.batch.selectAll', { totalCount })}
+            </Button>
+          </>
+        )}
       </div>
       <TableActionList>
         {children}
@@ -91,12 +107,25 @@ TableBatchActions.propTypes = {
    */
   onCancel: PropTypes.func.isRequired,
 
+  /**
+   * Hook required to listen for when the user initiates a select all
+   * request through this component. This _only_ controls the rendering
+   * of the `Select All` button and does not include built in functionality
+   */
+  onSelectAll: PropTypes.func,
+
   /**
    * Boolean specifier for whether or not the batch action bar should be
    * displayed
    */
   shouldShowBatchActions: PropTypes.bool,
 
+  /**
+   * Numeric representation of the total number of items in a table.
+   * This number is used in the select all button text
+   */
+  totalCount: PropTypes.number,
+
   /**
    * Numeric representation of the total number of items selected in a table.
    * This number is used to derive the selection message

diff --git a/packages/react/src/components/DataTable/__tests__/DataTable-test.js b/packages/react/src/components/DataTable/__tests__/DataTable-test.js
@@ -35,28 +35,32 @@ import { render, screen, within } from '@testing-library/react';
 const getLastCallFor = (mocker) =>
   mocker.mock.calls[mocker.mock.calls.length - 1];
 
+const onSelectAllFn = jest.fn();
+
+const rows = [
+  {
+    id: 'b',
+    fieldA: 'Field 2:A',
+    fieldB: 'Field 2:B',
+  },
+  {
+    id: 'a',
+    fieldA: 'Field 1:A',
+    fieldB: 'Field 1:B',
+  },
+  {
+    id: 'c',
+    fieldA: 'Field 3:A',
+    fieldB: 'Field 3:B',
+  },
+];
+
 describe('DataTable', () => {
   let mockProps;
 
   beforeEach(() => {
     mockProps = {
-      rows: [
-        {
-          id: 'b',
-          fieldA: 'Field 2:A',
-          fieldB: 'Field 2:B',
-        },
-        {
-          id: 'a',
-          fieldA: 'Field 1:A',
-          fieldB: 'Field 1:B',
-        },
-        {
-          id: 'c',
-          fieldA: 'Field 3:A',
-          fieldB: 'Field 3:B',
-        },
-      ],
+      rows,
       headers: [
         {
           key: 'fieldA',
@@ -334,7 +338,10 @@ describe('DataTable', () => {
             }) => (
               <TableContainer title="DataTable with selection">
                 <TableToolbar>
-                  <TableBatchActions {...getBatchActionProps()}>
+                  <TableBatchActions
+                    {...getBatchActionProps({
+                      onSelectAll: onSelectAllFn,
+                    })}>
                     <TableBatchAction onClick={jest.fn()}>
                       Ghost
                     </TableBatchAction>
@@ -452,6 +459,18 @@ describe('DataTable', () => {
         const { selectedRows } = getLastCallFor(mockProps.render)[0];
         expect(selectedRows.length).toBe(0);
       });
+
+      it('should call the onSelectAll prop if supplied to TableBatchAction component', async () => {
+        render(<DataTable {...mockProps} />);
+        const selectAllCheckbox = screen.getAllByRole('checkbox')[0];
+
+        await userEvent.click(selectAllCheckbox);
+        expect(selectAllCheckbox).toBeChecked();
+
+        const selectAllButton = screen.getByText(`Select all (${rows.length})`);
+        await userEvent.click(selectAllButton);
+        expect(onSelectAllFn).toHaveBeenCalledTimes(1);
+      });
     });
 
     describe('selection with filtering', () => {