[ResponseOps][Alerts] Fix Stack Alerts page filter controls error (el…

…astic#194785)

## Summary

elastic#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 elastic#193565

(cherry picked from commit ef3bc96)

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[]>();

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;
 }

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,