fix(DataGrid): disable save button on customise column (#6026)

* fix(DataGrid): disable save button on customise column * fix(DataGrid): disable save button on customise column2 * fix: review comments * fix: adding test case
carbon-design-system · Sep 23, 2024 · 2b32f0f · 2b32f0f
1 parent fa31ebb
commit 2b32f0f
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 10 deletions.
diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.test.js b/packages/ibm-products/src/components/Datagrid/Datagrid.test.js
@@ -528,7 +528,10 @@ const RowSizeDropdown = ({ ...rest } = {}) => {
 };
 
 const CustomizingColumns = ({ ...rest } = {}) => {
-  const columns = React.useMemo(() => defaultHeader, []);
+  const columns = React.useMemo(
+    () => (rest.columns ? rest.columns : defaultHeader),
+    [rest.columns]
+  );
   const [data] = useState(makeData(10));
   const datagridState = useDatagrid(
     {
@@ -2021,6 +2024,41 @@ describe(componentName, () => {
       );
     });
   });
+  it('Customizing Columns disable save button when un-select all columns', async () => {
+    const columnsWithoutSticky = [
+      {
+        Header: 'Row Index',
+        accessor: (row, i) => i,
+        id: 'rowIndex', // id is required when accessor is a function.
+      },
+      {
+        Header: 'First Name',
+        accessor: 'firstName',
+      },
+    ];
+    const columns = [...columnsWithoutSticky, ...defaultHeader.slice(2)];
+    render(
+      <CustomizingColumns
+        data-testid={dataTestId}
+        columns={columns}
+      ></CustomizingColumns>
+    );
+
+    const customizeColumnsButton = screen.getByLabelText('Customize columns');
+    fireEvent.click(customizeColumnsButton);
+    screen.getByRole('heading', { name: /Customize columns/ });
+
+    const selectAllCheckBox = screen.getByRole('checkbox', {
+      name: 'Column name',
+    });
+    fireEvent.click(selectAllCheckBox);
+    expect(selectAllCheckBox.checked).toEqual(true);
+    expect(screen.getByRole('button', { name: 'Save' })).toBeEnabled();
+
+    fireEvent.click(selectAllCheckBox);
+    expect(selectAllCheckBox.checked).toEqual(false);
+    expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled();
+  });
 
   it('Customizing Columns', async () => {
     render(<CustomizingColumns data-testid={dataTestId}></CustomizingColumns>);

diff --git a/...cts/src/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js b/...cts/src/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js
@@ -91,13 +91,7 @@ const CustomizeColumnsTearsheet = ({
     });
 
     setColumnObjects(finalDefinitions);
-    setDirty();
-  };
-
-  const setDirty = () => {
-    if (!isDirty) {
-      setIsDirty(true);
-    }
+    setIsDirty(selectedColumnsCount !== 0);
   };
 
   const getVisibleColumnsCount = useCallback(() => {
@@ -154,7 +148,7 @@ const CustomizeColumnsTearsheet = ({
         searchText={searchText}
         setColumnsObject={(cols) => {
           setColumnObjects(cols);
-          setDirty();
+          setIsDirty(true);
         }}
         setSearchText={setSearchText}
         findColumnPlaceholderLabel={findColumnPlaceholderLabel}
@@ -172,7 +166,7 @@ const CustomizeColumnsTearsheet = ({
           onSelectColumn={onCheckboxCheck}
           setColumnsObject={(cols) => {
             setColumnObjects(cols);
-            setDirty();
+            setIsDirty(getVisibleColumnsCount() !== 0);
           }}
           selectAllLabel={selectAllLabel}
           customizeTearsheetHeadingLabel={customizeTearsheetHeadingLabel}