Gray out filters label when all filters are selected (default behaviour)

Feature #14971

Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski@contractors.roche.com>

diff --git a/src/components/data-table-filters/data-table-filters-popover.tsx b/src/components/data-table-filters/data-table-filters-popover.tsx
index 4015126a554ac8b5c80b0a5a09732c9f3567e8c2..9da3c20c2b91df301c3365c279df037ee1d9bbb0 100644 (file)
--- a/src/components/data-table-filters/data-table-filters-popover.tsx
+++ b/src/components/data-table-filters/data-table-filters-popover.tsx
@@ -58,10 +58,21 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
     }
 });
 
+enum SelectionMode {
+    ALL = 'all',
+    NONE = 'none'
+}
+
 export interface DataTableFilterProps {
     name: string;
     filters: DataTableFilters;
     onChange?: (filters: DataTableFilters) => void;
+
+    /**
+     * By default `all` filters selection means that label should be grayed out.
+     * Use `none` when label is supposed to be grayed out when no filter is selected.
+     */
+    defaultSelection?: SelectionMode;
 }
 
 interface DataTableFilterState {
@@ -80,8 +91,12 @@ export const DataTableFiltersPopover = withStyles(styles)(
         icon = React.createRef<HTMLElement>();
 
         render() {
-            const { name, classes, children } = this.props;
-            const isActive = getNodeDescendants('')(this.state.filters).some(f => f.selected);
+            const { name, classes, defaultSelection = SelectionMode.ALL, children } = this.props;
+            const isActive = getNodeDescendants('')(this.state.filters)
+                .some(f => defaultSelection === SelectionMode.ALL
+                    ? !f.selected
+                    : f.selected
+                );
             return <>
                 <Tooltip title='Filters'>
                     <ButtonBase