Simple filters change between panel and drilldown panel

CHANGELOG.md

@@ -44,6 +44,7 @@ All notable changes to the Wazuh app project will be documented in this file.
 - Added base Module Panel view with Office365 setup [#3518](https://github.com/wazuh/wazuh-kibana-app/pull/3518)
 - Added specifics and custom filters for Office365 search bar [#3533](https://github.com/wazuh/wazuh-kibana-app/pull/3533)
 - Adding Pagination and filter to drilldown tables at Office pannel [#3544](https://github.com/wazuh/wazuh-kibana-app/issues/3544).
+- Simple filters change between panel and drilldown panel [#3568](https://github.com/wazuh/wazuh-kibana-app/issues/3568).
 
 ### Changed
 

public/components/common/custom-search-bar/components/multi-select.tsx

@@ -28,11 +28,12 @@ import { IValueSuggestion, useValueSuggestion } from '../../hooks';
 const ON = 'on';
 const OFF = 'off';
 
-export const MultiSelect = ({ item, onChange, selectedOptions, onRemove, isDisabled }) => {
+export const MultiSelect = ({ item, onChange, selectedOptions, onRemove, isDisabled, filterDrillDownValue }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
   const { suggestedValues, isLoading, setQuery }: IValueSuggestion = useValueSuggestion(
     item.key,
-    item?.options
+    filterDrillDownValue,
+    item?.options,
   );
   const [items, setItems] = useState<
     { key: any; label: any; value: any; checked: FilterChecked }[]
@@ -48,9 +49,8 @@ export const MultiSelect = ({ item, onChange, selectedOptions, onRemove, isDisab
             label: value,
             value: item.key,
             filterByKey: item.filterByKey,
-            checked: OFF as FilterChecked,
-          }))
-          .sort((a, b) => a.label - b.label)
+            checked: selectedOptions.find((element) => element.label === value) ? ON as FilterChecked: OFF as FilterChecked,
+          })).sort((a, b) => (a.label < b.label ? 1 : -1)).sort((a, b) => (a.checked < b.checked ? 1 : -1))
       );
     }
   }, [suggestedValues, isLoading]);
@@ -59,8 +59,8 @@ export const MultiSelect = ({ item, onChange, selectedOptions, onRemove, isDisab
     setItems(
       items.map((item) => ({
         ...item,
-        checked: selectedOptions.find((element) => element.label === item.label) ? ON : OFF,
-      }))
+        checked: selectedOptions.find((element) => element.label === item.label) ? ON as FilterChecked: OFF as FilterChecked,
+      })).sort((a, b) => (a.label < b.label ? 1 : -1)).sort((a, b) => (a.checked < b.checked ? 1 : -1))
     );
     setActiveFilters(selectedOptions.length);
   }, [selectedOptions]);

public/components/common/custom-search-bar/custom-search-bar.tsx

@@ -149,6 +149,7 @@ export const CustomSearchBar = ({ filtersValues, filterDrillDownValue = { field:
           onChange={onChange}
           onRemove={onRemove}
           isDisabled={checkSelectDrillDownValue(item.key)}
+          filterDrillDownValue={filterDrillDownValue}
         />
       ),
     };

public/components/common/hooks/use-value-suggestion.ts

@@ -29,8 +29,17 @@ export interface IValueSuggestion {
   setQuery: React.Dispatch<React.SetStateAction<string>>;
 }
 
+interface BoolFilter {
+  field: string;
+  value: string;
+}
+
 export const useValueSuggestion = (
   filterField: string,
+  boolFilterValue: BoolFilter = {
+    field: '',
+    value: '',
+  },
   options?: string[],
   type: 'string' | 'boolean' = 'string'
 ): IValueSuggestion => {
@@ -39,19 +48,29 @@ export const useValueSuggestion = (
   const [isLoading, setIsLoading] = useState(true);
   const data = getDataPlugin();
   const indexPattern = useIndexPattern();
-  //const { filters } = useFilterManager();
 
   const getOptions = (): string[] => {
     return options?.filter((element) => element.toLowerCase().includes(query.toLowerCase())) || [];
   };
 
   const getValueSuggestions = async (field) => {
+    const boolFilter =
+      boolFilterValue.value !== ''
+        ? [
+            {
+              term: {
+                [boolFilterValue.field]: `${boolFilterValue.value}`,
+              },
+            },
+          ]
+        : [];
     return options
       ? getOptions()
       : await data.autocomplete.getValueSuggestions({
           query,
           indexPattern: indexPattern as IIndexPattern,
           field,
+          boolFilter: boolFilter,
         });
   };
 
@@ -83,7 +102,7 @@ export const useValueSuggestion = (
         }
       })();
     }
-  }, [indexPattern, query, filterField, type]);
+  }, [indexPattern, query, filterField, type, boolFilterValue]);
 
   return { suggestedValues, isLoading, setQuery };
 };

public/components/overview/github-panel/github-panel.tsx

@@ -11,18 +11,23 @@
  * Find more information about this on the LICENSE file.
  */
 
-import React from 'react';
+import React, {useState} from 'react';
 import { MainPanel } from '../../common/modules/panel';
 import { withErrorBoundary } from '../../common/hocs';
 import { CustomSearchBar } from '../../common/custom-search-bar';
 import { ModuleConfiguration } from './views';
 import { ModuleConfig, filtersValues } from './config';
 
 export const GitHubPanel = withErrorBoundary(() => {
+  const [drillDownValue, setDrillDownValue] = useState({ field: '', value: '' });
+  const filterDrillDownValue = (value) => {
+    setDrillDownValue(value)
+  }
   return (
     <>
-      <CustomSearchBar filtersValues={filtersValues} />
+      <CustomSearchBar filtersValues={filtersValues} filterDrillDownValue={drillDownValue}/>
       <MainPanel moduleConfig={ModuleConfig} tab={'github'}
+        filterDrillDownValue={filterDrillDownValue}
         sidePanelChildren={<ModuleConfiguration />} />
     </>
   )