From 765d95d3e23c2ffe00f3329234fcf11ace92d3a0 Mon Sep 17 00:00:00 2001
From: Umberto Pepato <umbopepato@users.noreply.github.com>
Date: Fri, 4 Oct 2024 14:44:11 +0200
Subject: [PATCH] [ResponseOps][Alerts] Fix Stack Alerts page filter controls
 error (#194785)

## Summary

https://github.com/elastic/kibana/pull/190561 introduced a breaking
change in the format of the controls embeddable configuration object
that caused usages in the Security and Stack alerts pages to break if
there was an old value saved in localStorage.

This PR makes the storage key for the alert filter controls configurable
and uses a new value for the usage in `<UrlSyncedAlertsSearchBar>`,
fixing the error in the Stack Alerts page.

## To verify

1. Checkout a revision prior to this PR
2. Create Stack rules that fire alerts
3. Visit the Stack Alerts page (should show a full-page error message,
if it doesn't see [If the page works correctly](#how-to-break))
4. Checkout this PR
5. Reload the Stack Alerts page
6. Verify that the page loads correctly

<details id="how-to-break">

<summary>If the page works correctly</summary>

You likely didn't have an old saved configuration for the controls bar
in the localStorage. In this case, create a localStorage item named
`stackAlerts.default.pageFilters` with the following content:

```json
{
  "panels": {
    "0": {
      "type": "optionsListControl",
      "order": 0,
      "grow": true,
      "width": "small",
      "explicitInput": {
        "id": "0",
        "dataViewId": "unified-alerts-dv",
        "fieldName": "kibana.alert.status",
        "title": "Status",
        "hideExclude": true,
        "hideSort": true,
        "hidePanelTitles": true,
        "placeholder": "",
        "ignoreParentSettings": {
          "ignoreValidations": true
        },
        "selectedOptions": [
          "active"
        ],
        "hideActionBar": true,
        "persist": true,
        "hideExists": true
      }
    },
    "1": {
      "type": "optionsListControl",
      "order": 1,
      "grow": true,
      "width": "small",
      "explicitInput": {
        "id": "1",
        "dataViewId": "unified-alerts-dv",
        "fieldName": "kibana.alert.rule.name",
        "title": "Rule",
        "hideExclude": true,
        "hideSort": true,
        "hidePanelTitles": true,
        "placeholder": "",
        "ignoreParentSettings": {
          "ignoreValidations": true
        },
        "hideExists": true
      }
    },
    "2": {
      "type": "optionsListControl",
      "order": 2,
      "grow": true,
      "width": "small",
      "explicitInput": {
        "id": "2",
        "dataViewId": "unified-alerts-dv",
        "fieldName": "kibana.alert.group.value",
        "title": "Group",
        "hideExclude": true,
        "hideSort": true,
        "hidePanelTitles": true,
        "placeholder": "",
        "ignoreParentSettings": {
          "ignoreValidations": true
        }
      }
    },
    "3": {
      "type": "optionsListControl",
      "order": 3,
      "grow": true,
      "width": "small",
      "explicitInput": {
        "id": "3",
        "dataViewId": "unified-alerts-dv",
        "fieldName": "tags",
        "title": "Tags",
        "hideExclude": true,
        "hideSort": true,
        "hidePanelTitles": true,
        "placeholder": "",
        "ignoreParentSettings": {
          "ignoreValidations": true
        }
      }
    }
  },
  "labelPosition": "oneLine",
  "chainingSystem": "HIERARCHICAL",
  "autoApplySelections": true,
  "ignoreParentSettings": {
    "ignoreValidations": true
  },
  "editorConfig": {
    "hideWidthSettings": true,
    "hideDataViewSelector": true,
    "hideAdditionalSettings": true
  }
}
```
</details>

## References

Fixes #193565
---
 .../src/alert_filter_controls/filter_group.tsx     |  7 ++++---
 .../src/alert_filter_controls/types.ts             |  1 +
 .../url_synced_alerts_search_bar.tsx               | 14 +++++++++++++-
 3 files changed, 18 insertions(+), 4 deletions(-)

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
index 01a1524c4abc4..b97c0940f41d6 100644
--- 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
index 5fb7bdd1a6a0f..19a76c76ff6f8 100644
--- 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
index 71594e3206ffd..de89eb9715733 100644
--- 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,