fix: datagrid actions review fixes (#3579)

packages/ibm-products/src/components/Datagrid/Datagrid.test.js

@@ -2239,6 +2239,10 @@ describe('batch action testing', () => {
       screen.getByLabelText(getBatchActions()[0].label);
       screen.getByLabelText(getBatchActions()[1].label);
       const menuButton = screen.getByRole('button', { name: /More/i });
+      const cancelButton = screen.getByRole('button', { name: /Cancel/i });
+      const selectAllButton = screen.getByRole('button', {
+        name: /Select all/i,
+      });
       expect(menuButton).toBeInTheDocument();
       await act(() => click(menuButton));
       const options = Array.from(
@@ -2254,6 +2258,11 @@ describe('batch action testing', () => {
       remainingBatchActions.forEach((batchAction, index) => {
         expect(batchAction.label).toEqual(optionsText[index]);
       });
+
+      //coverage
+      fireEvent.click(options[0]);
+      fireEvent.click(cancelButton);
+      fireEvent.click(selectAllButton);
     });
   });
 });

packages/ibm-products/src/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022, 2023
+ * Copyright IBM Corp. 2021, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -80,9 +80,17 @@ const DatagridBatchActionsToolbar = (datagridState, width, ref) => {
     // Do not render ButtonMenu when there are 3 or less items
     // and if there is enough available space to render all the items
     if (toolbarBatchActions?.length <= 3 && !displayAllInMenu) {
-      return null;
+      return;
     }
 
+    const renderItem = (batchAction, index) => (
+      <MenuItem
+        key={`${batchAction.label}-${index}`}
+        label={batchAction.label}
+        onClick={(event) => onClickHandler(event, batchAction)}
+      />
+    );
+
     return (
       <MenuButton
         label="More"
@@ -93,55 +101,41 @@ const DatagridBatchActionsToolbar = (datagridState, width, ref) => {
       >
         {toolbarBatchActions &&
           toolbarBatchActions.map((batchAction, index) => {
-            if (index < 2) {
-              if (displayAllInMenu) {
-                return (
-                  <MenuItem
-                    key={`${batchAction.label}-${index}`}
-                    label={batchAction.label}
-                    onClick={(event) => {
-                      batchAction.onClick(getSelectedRowData(), event);
-                      if (batchAction.type === 'select_all') {
-                        toggleAllRowsSelected(true);
-                      }
-                    }}
-                  />
-                );
-              }
-              return null;
+            if (index < 2 && !displayAllInMenu) {
+              return;
             }
-            return (
-              <MenuItem
-                key={`${batchAction.label}-${index}`}
-                label={batchAction.label}
-                onClick={(event) => {
-                  batchAction.onClick(getSelectedRowData(), event);
-                  if (batchAction.type === 'select_all') {
-                    toggleAllRowsSelected(true);
-                  }
-                }}
-              />
-            );
+            return renderItem(batchAction, index);
           })}
       </MenuButton>
     );
   };
 
+  const onClickHandler = (event, batchAction) => {
+    batchAction.onClick(getSelectedRowData(), event);
+    if (batchAction.type === 'select_all') {
+      toggleAllRowsSelected(true);
+    }
+  };
+
+  const onCancelHandler = () => {
+    toggleAllRowsSelected(false);
+    setGlobalFilter(null);
+  };
+
+  const onSelectAllHandler = () => {
+    toggleAllRowsSelected(true);
+    onSelectAllRows?.(true);
+  };
+
   // Only display the first two batch actions, the rest are
   // displayed inside of the ButtonMenu if there are more than
   // 3 batch actions
   return (
     <TableBatchActions
       shouldShowBatchActions={totalSelected > 0}
       totalSelected={totalSelected}
-      onCancel={() => {
-        toggleAllRowsSelected(false);
-        setGlobalFilter(null);
-      }}
-      onSelectAll={() => {
-        toggleAllRowsSelected(true);
-        onSelectAllRows?.(true);
-      }}
+      onCancel={onCancelHandler}
+      onSelectAll={onSelectAllHandler}
       totalCount={rows && rows.length}
     >
       {!displayAllInMenu &&
@@ -155,12 +149,7 @@ const DatagridBatchActionsToolbar = (datagridState, width, ref) => {
               <TableBatchAction
                 key={`${batchAction.label}-${index}`}
                 renderIcon={batchAction.renderIcon}
-                onClick={(event) => {
-                  batchAction.onClick(getSelectedRowData(), event);
-                  if (batchAction.type === 'select_all') {
-                    toggleAllRowsSelected(true);
-                  }
-                }}
+                onClick={(event) => onClickHandler(batchAction, event)}
                 iconDescription={batchAction.label}
               >
                 {batchAction.label}

packages/ibm-products/src/components/Datagrid/_datagrid.scss

@@ -31,6 +31,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
 .#{$block-class}__datagridWrap {
   display: block;
   width: 100%;
+
   :global(.#{c4p-settings.$carbon-prefix}--checkbox) {
     display: none;
   }
@@ -70,3 +71,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
     }
   }
 }
+
+// firefox fix for issue mentioned in 3442
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--menu-button__trigger:not(
+    .#{c4p-settings.$carbon-prefix}--btn--ghost
+  ) {
+  min-width: auto;
+}

packages/ibm-products/src/components/Datagrid/utils/DatagridActions.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.