fix: allow DataTable breakout filters count to be zero (#3986)

Author: PKulkoRaccoonGang

src/DataTable/DropdownFilters.jsx

@@ -23,7 +23,7 @@ function DropdownFilters() {
       return [[], availableFilters];
     }
 
-    const numberOfBreakoutFilters = numBreakoutFilters || 1;
+    const numberOfBreakoutFilters = numBreakoutFilters ?? 1;
     const boFilters = availableFilters.slice(0, numberOfBreakoutFilters);
     const dropdownFilters = availableFilters.slice(numberOfBreakoutFilters);
 

src/DataTable/index.jsx

@@ -416,8 +416,8 @@ DataTable.propTypes = {
     /** A custom component representing an action */
     PropTypes.element,
   ]),
-  /** Number between one and four filters that can be shown on the top row. */
-  numBreakoutFilters: PropTypes.oneOf([1, 2, 3, 4]),
+  /** Number between zero and four filters that can be shown on the top row. */
+  numBreakoutFilters: PropTypes.oneOf([0, 1, 2, 3, 4]),
   /** Component to be displayed when the table is empty */
   EmptyTableComponent: PropTypes.elementType,
   /** Component to be displayed for row status, ie, 10 of 20 rows. Displayed by default in the TableControlBar */

src/DataTable/tests/DataTable.test.jsx

@@ -162,6 +162,44 @@ describe('<DataTable />', () => {
     expect(screen.getByText('More')).toBeInTheDocument();
   });
 
+  it('places all filters in the dropdown if numBreakoutFilters is 0', async () => {
+    render(
+      <DataTableWrapper
+        {...props}
+        isFilterable
+        defaultColumnValues={{ Filter: TextFilter }}
+        numBreakoutFilters={0}
+      />,
+    );
+
+    expect(screen.queryByPlaceholderText('Search name')).toBeNull();
+
+    const filtersButton = screen.getByRole('button', { name: messages.filtersDropdownTitle.defaultMessage });
+    await userEvent.click(filtersButton);
+
+    expect(screen.getByPlaceholderText('Search name')).toBeInTheDocument();
+  });
+
+  it('displays two breakout filters if numBreakoutFilters is 2', async () => {
+    render(
+      <DataTableWrapper
+        {...props}
+        isFilterable
+        defaultColumnValues={{ Filter: TextFilter }}
+        numBreakoutFilters={2}
+      />,
+    );
+
+    expect(screen.getByPlaceholderText('Search name')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Search famous for')).toBeInTheDocument();
+    expect(screen.queryByPlaceholderText('Search coat color')).toBeNull();
+
+    const filtersButton = screen.getByRole('button', { name: messages.filtersDropdownTitle.defaultMessage });
+    await userEvent.click(filtersButton);
+
+    expect(screen.getByPlaceholderText('Search coat color')).toBeInTheDocument();
+  });
+
   it('displays the custom filters title in the sidebar', () => {
     render(
       <DataTableWrapper