fix(Datagrid): select all row count updated to exclude disabled rows (#…

…6085) * fix(Datagrid): select all row count updates to exclude disabled rows * fix(datagrid): test fail fix --------- Co-authored-by: Anamika T S <[email protected]>
carbon-design-system · Sep 24, 2024 · c7064de · c7064de
1 parent ef4bfa8
commit c7064de
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 6 deletions.
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.test.js b/packages/ibm-products/src/components/Datagrid/Datagrid.test.js
@@ -1738,8 +1738,7 @@ describe(componentName, () => {
         .getElementsByTagName('div')[0]
         .getElementsByTagName('div')[0]
         .getElementsByTagName('button')[0].textContent
-    ).toEqual('Select all (100)');
-    // ).toEqual('Select all (93)'); (7 rows are disabled in entire table) switch to this after #5937 issue fixes
+    ).toEqual('Select all (93)');
 
     // click select all button in toolbar
     fireEvent.click(

diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridToolbar.tsx b/packages/ibm-products/src/components/Datagrid/Datagrid/DatagridToolbar.tsx
@@ -18,7 +18,7 @@ import { useResizeObserver } from '../../../global/js/hooks/useResizeObserver';
 import { pkg, carbon } from '../../../settings';
 import cx from 'classnames';
 import { handleSelectAllRowData } from './addons/stateReducer';
-import { DataGridState } from '../types';
+import { DataGridState, DatagridRowProps } from '../types';
 
 const blockClass = `${pkg.prefix}--datagrid__table-toolbar`;
 
@@ -47,10 +47,19 @@ const DatagridBatchActionsToolbar = (
     batchActionMenuButtonLabel,
     translateWithIdBatchActions,
   } = datagridState;
+  const [availableRowsCount, setAvailableRowsCount] = useState(rows.length);
+
   const batchActionMenuButtonLabelText = batchActionMenuButtonLabel ?? 'More';
   const selectedKeys = Object.keys(selectedRowIds || {});
   const totalSelected = selectedKeys.length;
 
+  useEffect(() => {
+    const countDisabledRows =
+      (rows.find((row) => row.getRowProps)?.getRowProps?.() as DatagridRowProps)
+        ?.nonselectablerows?.length || 0;
+    rows && setAvailableRowsCount(rows.length - countDisabledRows);
+  }, [rows]);
+
   // Get initial width of batch actions container,
   // used to measure when all items are put inside
   // the ButtonMenu
@@ -183,7 +192,7 @@ const DatagridBatchActionsToolbar = (
       totalSelected={totalSelected}
       onCancel={onCancelHandler}
       onSelectAll={onSelectAllHandler}
-      totalCount={rows && rows.length}
+      totalCount={availableRowsCount}
       translateWithId={translateWithIdBatchActions}
     >
       {!displayAllInMenu &&

diff --git a/packages/ibm-products/src/components/Datagrid/types/index.ts b/packages/ibm-products/src/components/Datagrid/types/index.ts
@@ -11,6 +11,7 @@ import { RadioButtonProps } from '@carbon/react/lib/components/RadioButton/Radio
 import { RadioButtonGroupProps } from '@carbon/react/lib/components/RadioButtonGroup/RadioButtonGroup';
 import { CheckboxProps } from '@carbon/react/lib/components/Checkbox';
 import { NumberInputProps } from '@carbon/react/lib/components/NumberInput/NumberInput';
+import { TableRowProps } from 'react-table';
 
 import React, {
   CSSProperties,
@@ -373,3 +374,7 @@ export interface PropGetterMeta {
   instance?: DataGridTableInstance;
   row?: Partial<Row<any> & DatagridRow<any>>;
 }
+
+export interface DatagridRowProps extends TableRowProps {
+  nonselectablerows: Array<number>;
+}
diff --git a/packages/ibm-products/src/components/Datagrid/useDisableSelectRows.ts b/packages/ibm-products/src/components/Datagrid/useDisableSelectRows.ts
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { Hooks, Row, RowPropGetter, TableRowProps } from 'react-table';
-import { DatagridRow, PropGetterMeta } from './types';
+import { DatagridRow, PropGetterMeta, DatagridRowProps } from './types';
 
 const nonselectablerowsList = (instance) => {
   const nonselectablerows: number[] =
@@ -39,7 +39,7 @@ const useDisableSelectRows = (hooks: Hooks) => {
         disabled: instance?.shouldDisableSelectRow?.(row),
         nonselectablerows,
       },
-    ] as Partial<TableRowProps>[];
+    ] as Partial<DatagridRowProps>[];
   };
   hooks.getRowProps.push(getRowProps);
 };