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}