diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid.test.js b/packages/ibm-products/src/components/Datagrid/Datagrid.test.js index 7442e83fa5..141b610b6d 100644 --- 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( + + ); + + 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(); diff --git a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js b/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js index 1bdd81c3f7..bf554b004b 100644 --- a/packages/ibm-products/src/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +++ b/packages/ibm-products/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}