NETOBSERV-698 add ability to show/hide filter chips (#243)

* NETOBSERV-698 add ability to hide filter chips

* Fix, do not show show/hide link when no active filters and no default

Author: jotak

web/locales/en/plugin__netobserv-plugin.json

@@ -94,6 +94,10 @@
   "group filter": "group filter",
   "filter": "filter",
   "Edit filters": "Edit filters",
+  "Hide filters": "Hide filters",
+  "Show {{count}} filters": "Show {{count}} filters",
+  "Show {{count}} filters_plural": "Show {{count}} filters",
+  "Show filters": "Show filters",
   "Quick filters": "Quick filters",
   "Build info": "Build info",
   "Configuration limits": "Configuration limits",

web/src/components/filters/filters-toolbar.tsx

@@ -40,6 +40,7 @@ import { FilterHints } from './filter-hints';
 import FiltersDropdown from './filters-dropdown';
 import { getFilterFullName, Indicator } from './filters-helper';
 import TextFilter from './text-filter';
+import { LOCAL_STORAGE_SHOW_FILTERS_KEY, useLocalStorage } from '../../utils/local-storage-hook';
 import './filters-toolbar.css';
 
 export interface FiltersToolbarProps {
@@ -72,6 +73,7 @@ export const FiltersToolbar: React.FC<FiltersToolbarProps> = ({
   const [indicator, setIndicator] = React.useState<Indicator>(ValidatedOptions.default);
   const [message, setMessage] = React.useState<string | undefined>();
   const [selectedFilter, setSelectedFilter] = React.useState<FilterDefinition>(findFilter(t, 'namespace')!);
+  const [showFilters, setShowFilters] = useLocalStorage<boolean>(LOCAL_STORAGE_SHOW_FILTERS_KEY, true);
 
   // reset and delay message state to trigger tooltip properly
   const setMessageWithDelay = React.useCallback(
@@ -125,10 +127,10 @@ export const FiltersToolbar: React.FC<FiltersToolbarProps> = ({
     }
   }, [selectedFilter, addFilter, indicator, setIndicator, setMessageWithDelay]);
 
+  const defaultFilters = quickFilters.filter(qf => qf.default).flatMap(qf => qf.filters);
   const getFiltersChips = React.useCallback(() => {
     const isForced = !_.isEmpty(forcedFilters);
     const chipFilters = isForced ? forcedFilters : filters;
-    const defaultFilters = quickFilters.filter(qf => qf.default).flatMap(qf => qf.filters);
 
     if (_.isEmpty(chipFilters) && _.isEmpty(defaultFilters)) {
       return null;
@@ -240,7 +242,15 @@ export const FiltersToolbar: React.FC<FiltersToolbarProps> = ({
         )}
       </ToolbarGroup>
     );
-  }, [clearFilters, filters, forcedFilters, quickFilters, push, setFilters, resetFilters, t]);
+  }, [clearFilters, filters, forcedFilters, defaultFilters, push, setFilters, resetFilters, t]);
+
+  const countActiveFilters = (forcedFilters || filters || []).reduce((prev, cur) => prev + cur.values.length, 0);
+  let showHideText: string | undefined;
+  if (countActiveFilters > 0) {
+    showHideText = showFilters ? t('Hide filters') : t('Show {{count}} filters', { count: countActiveFilters });
+  } else if (defaultFilters.length > 0) {
+    showHideText = showFilters ? t('Hide filters') : t('Show filters');
+  }
 
   return (
     <Toolbar data-test={id} id={id}>
@@ -274,6 +284,19 @@ export const FiltersToolbar: React.FC<FiltersToolbarProps> = ({
             </Tooltip>
           </ToolbarItem>
         )}
+        {showHideText && (
+          <ToolbarItem className="flex-start">
+            <Button
+              data-test="show-filters-button"
+              id="show-filters-button"
+              variant="link"
+              className="overflow-button"
+              onClick={() => setShowFilters(!showFilters)}
+            >
+              {showHideText}
+            </Button>
+          </ToolbarItem>
+        )}
         {!_.isEmpty(props.menuContent) && (
           <ToolbarItem className="flex-start">
             <OverflowMenu breakpoint="2xl">
@@ -288,7 +311,7 @@ export const FiltersToolbar: React.FC<FiltersToolbarProps> = ({
             </OverflowMenu>
           </ToolbarItem>
         )}
-        {getFiltersChips()}
+        {showFilters && getFiltersChips()}
       </ToolbarContent>
     </Toolbar>
   );

web/src/utils/local-storage-hook.ts

@@ -20,6 +20,7 @@ export const LOCAL_STORAGE_METRIC_SCOPE_KEY = 'netflow-traffic-metric-scope';
 export const LOCAL_STORAGE_METRIC_FUNCTION_KEY = 'netflow-traffic-metric-function';
 export const LOCAL_STORAGE_METRIC_TYPE_KEY = 'netflow-traffic-metric-type';
 export const LOCAL_STORAGE_SHOW_OPTIONS_KEY = 'netflow-traffic-show-options';
+export const LOCAL_STORAGE_SHOW_FILTERS_KEY = 'netflow-traffic-show-filters';
 
 export interface ArraySelectionOptions {
   id: string;