refactor: simplify TableControlBar layout and restore Clear filters button functionality

Author: bra-i-am

src/authz-module/libraries-manager/components/TableControlBar.tsx

@@ -1,11 +1,10 @@
 import { useContext } from 'react';
 import {
-  breakpoints,
   DataTable, DataTableContext,
   CheckboxFilter,
   Stack,
   TextFilter,
-  useWindowSize,
+  Button,
 } from '@openedx/paragon';
 
 import MultipleChoiceFilter from './MultipleChoiceFilter';
@@ -15,6 +14,8 @@ import SearchFilter from './SearchFilter';
 const TableControlBar = () => {
   const {
     columns,
+    setAllFilters,
+    state,
   } = useContext<DataTableContext>(DataTableContext);
 
   const availableFilters = columns.filter((column) => column.canFilter);
@@ -23,36 +24,40 @@ const TableControlBar = () => {
     .filter((column) => column.Filter === TextFilter)
     .map((column) => column.Header);
 
-  const isSmallScreen = useWindowSize().width! < breakpoints.medium.minWidth!;
-
   return (
-    <div className="pgn__data-table-status-bar">
-      <Stack className="mb-3" direction={isSmallScreen ? 'vertical' : 'horizontal'} gap={3}>
-
-        {availableFilters.map((column) => {
-          if (column.Filter === CheckboxFilter) {
-            return <MultipleChoiceFilter {...column} />;
-          }
-
-          if (column.Filter === TextFilter) {
-            return (
-              <SearchFilter
-                filterValue={column.filterValue}
-                setFilter={column.setFilter}
-                placeholder={`Search by ${columnTextFilterHeaders.map((header) => header).join(' or ')}`}
-              />
-            );
-          }
-
-          return null;
-        })}
-
-        <SortDropdown />
-      </Stack>
-
-      <DataTable.RowStatus />
-      <DataTable.BulkActions />
-    </div>
+    <Stack className="pgn__data-table-status-bar mb-3 flex-wrap" gap={2} direction="horizontal">
+
+      {availableFilters.map((column) => {
+        if (column.Filter === CheckboxFilter) {
+          return <MultipleChoiceFilter {...column} />;
+        }
+
+        if (column.Filter === TextFilter) {
+          return (
+            <SearchFilter
+              filterValue={column.filterValue}
+              setFilter={column.setFilter}
+              placeholder={`Search by ${columnTextFilterHeaders.map((header) => header).join(' or ')}`}
+            />
+          );
+        }
+
+        return null;
+      })}
+
+      <SortDropdown />
+
+      {state.filters.length > 0 && (
+      <Button
+        variant="link"
+        onClick={() => setAllFilters([])}
+      >
+        Clear filters
+      </Button>
+      )}
+
+      <DataTable.RowStatus className="ml-auto" />
+    </Stack>
   );
 };