Make alert filter controls storage key customizable

umbopepato · umbopepato · commit e488db749cff · 2024-10-03T09:08:34.000+02:00
diff --git a/packages/kbn-alerts-ui-shared/src/alert_filter_controls/filter_group.tsx b/packages/kbn-alerts-ui-shared/src/alert_filter_controls/filter_group.tsx
@@ -44,6 +44,7 @@ import { URL_PARAM_ARRAY_EXCEPTION_MSG } from './translations';
 
 export const FilterGroup = (props: PropsWithChildren<FilterGroupProps>) => {
   const {
+    featureIds,
     dataViewId,
     onFiltersChange,
     timeRange,
@@ -58,7 +59,7 @@ export const FilterGroup = (props: PropsWithChildren<FilterGroupProps>) => {
     maxControls = Infinity,
     ControlGroupRenderer,
     Storage,
-    featureIds,
+    storageKey,
   } = props;
 
   const filterChangedSubscription = useRef<Subscription>();
@@ -79,8 +80,8 @@ export const FilterGroup = (props: PropsWithChildren<FilterGroupProps>) => {
   const [controlGroup, setControlGroup] = useState<ControlGroupRendererApi>();
 
   const localStoragePageFilterKey = useMemo(
-    () => `${featureIds.join(',')}.${spaceId}.${URL_PARAM_KEY}`,
-    [featureIds, spaceId]
+    () => storageKey ?? `${featureIds.join(',')}.${spaceId}.${URL_PARAM_KEY}`,
+    [featureIds, spaceId, storageKey]
   );
 
   const currentFiltersRef = useRef<Filter[]>();
diff --git a/packages/kbn-alerts-ui-shared/src/alert_filter_controls/types.ts b/packages/kbn-alerts-ui-shared/src/alert_filter_controls/types.ts
@@ -74,4 +74,5 @@ export interface FilterGroupProps extends Pick<ControlGroupRuntimeState, 'chaini
    */
   ControlGroupRenderer: typeof ControlGroupRenderer;
   Storage: typeof Storage;
+  storageKey?: string;
 }
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/url_synced_alerts_search_bar.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/url_synced_alerts_search_bar.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { BoolQuery } from '@kbn/es-query';
 import { AlertConsumers } from '@kbn/rule-data-utils';
 import { i18n } from '@kbn/i18n';
@@ -61,17 +61,23 @@ export const UrlSyncedAlertsSearchBar = ({
   const [spaceId, setSpaceId] = useState<string>();
 
   const {
+    // KQL bar query
     kuery,
     onKueryChange,
+    // KQL bar filters
     filters,
     onFiltersChange,
+    // Controls bar filters
     controlFilters,
     onControlFiltersChange,
+    // Time range
     rangeFrom,
     onRangeFromChange,
     rangeTo,
     onRangeToChange,
+    // Controls bar configuration
     filterControls,
+    // Saved KQL query
     savedQuery,
     setSavedQuery,
     clearSavedQuery,
@@ -131,6 +137,11 @@ export const UrlSyncedAlertsSearchBar = ({
     [onKueryChange, onRangeFromChange, onRangeToChange, setSavedQuery, timeFilterService]
   );
 
+  const filterControlsStorageKey = useMemo(
+    () => ['alertsSearchBar', spaceId, 'filterControls'].filter(Boolean).join('.'),
+    [spaceId]
+  );
+
   return (
     <>
       <AlertsSearchBar
@@ -156,6 +167,7 @@ export const UrlSyncedAlertsSearchBar = ({
           controlsUrlState={filterControls}
           filters={controlFilters}
           onFiltersChange={onControlFiltersChange}
+          storageKey={filterControlsStorageKey}
           services={{
             http,
             notifications,

Original file line number	Diff line number	Diff line change
`@@ -74,4 +74,5 @@ export interface FilterGroupProps extends Pick<ControlGroupRuntimeState, 'chaini`
`74`	`74`	`*/`
`75`	`75`	`ControlGroupRenderer: typeof ControlGroupRenderer;`
`76`	`76`	`Storage: typeof Storage;`
	`77`	`+ storageKey?: string;`
`77`	`78`	`}`