[8.15] [ResponseOps][Alerts] Fix Stack Alerts page filter controls er…

…ror (#194785) (#194942)

# Backport

This will backport the following commits from `main` to `8.15`:
- [[ResponseOps][Alerts] Fix Stack Alerts page filter controls error
(#194785)](#194785)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Umberto
Pepato","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-10-04T12:44:11Z","message":"[ResponseOps][Alerts]
Fix Stack Alerts page filter controls error (#194785)\n\n##
Summary\r\n\r\nhttps://github.com//pull/190561 introduced
a breaking\r\nchange in the format of the controls embeddable
configuration object\r\nthat caused usages in the Security and Stack
alerts pages to break if\r\nthere was an old value saved in
localStorage.\r\n\r\nThis PR makes the storage key for the alert filter
controls configurable\r\nand uses a new value for the usage in
`<UrlSyncedAlertsSearchBar>`,\r\nfixing the error in the Stack Alerts
page.\r\n\r\n## To verify\r\n\r\n1. Checkout a revision prior to this
PR\r\n2. Create Stack rules that fire alerts\r\n3. Visit the Stack
Alerts page (should show a full-page error message,\r\nif it doesn't see
[If the page works correctly](#how-to-break))\r\n4. Checkout this
PR\r\n5. Reload the Stack Alerts page\r\n6. Verify that the page loads
correctly\r\n\r\n<details id=\"how-to-break\">\r\n\r\n<summary>If the
page works correctly</summary>\r\n\r\nYou likely didn't have an old
saved configuration for the controls bar\r\nin the localStorage. In this
case, create a localStorage item
named\r\n`stackAlerts.default.pageFilters` with the following
content:\r\n\r\n```json\r\n{\r\n \"panels\": {\r\n \"0\": {\r\n
\"type\": \"optionsListControl\",\r\n \"order\": 0,\r\n \"grow\":
true,\r\n \"width\": \"small\",\r\n \"explicitInput\": {\r\n \"id\":
\"0\",\r\n \"dataViewId\": \"unified-alerts-dv\",\r\n \"fieldName\":
\"kibana.alert.status\",\r\n \"title\": \"Status\",\r\n \"hideExclude\":
true,\r\n \"hideSort\": true,\r\n \"hidePanelTitles\": true,\r\n
\"placeholder\": \"\",\r\n \"ignoreParentSettings\": {\r\n
\"ignoreValidations\": true\r\n },\r\n \"selectedOptions\": [\r\n
\"active\"\r\n ],\r\n \"hideActionBar\": true,\r\n \"persist\":
true,\r\n \"hideExists\": true\r\n }\r\n },\r\n \"1\": {\r\n \"type\":
\"optionsListControl\",\r\n \"order\": 1,\r\n \"grow\": true,\r\n
\"width\": \"small\",\r\n \"explicitInput\": {\r\n \"id\": \"1\",\r\n
\"dataViewId\": \"unified-alerts-dv\",\r\n \"fieldName\":
\"kibana.alert.rule.name\",\r\n \"title\": \"Rule\",\r\n
\"hideExclude\": true,\r\n \"hideSort\": true,\r\n \"hidePanelTitles\":
true,\r\n \"placeholder\": \"\",\r\n \"ignoreParentSettings\": {\r\n
\"ignoreValidations\": true\r\n },\r\n \"hideExists\": true\r\n }\r\n
},\r\n \"2\": {\r\n \"type\": \"optionsListControl\",\r\n \"order\":
2,\r\n \"grow\": true,\r\n \"width\": \"small\",\r\n \"explicitInput\":
{\r\n \"id\": \"2\",\r\n \"dataViewId\": \"unified-alerts-dv\",\r\n
\"fieldName\": \"kibana.alert.group.value\",\r\n \"title\":
\"Group\",\r\n \"hideExclude\": true,\r\n \"hideSort\": true,\r\n
\"hidePanelTitles\": true,\r\n \"placeholder\": \"\",\r\n
\"ignoreParentSettings\": {\r\n \"ignoreValidations\": true\r\n }\r\n
}\r\n },\r\n \"3\": {\r\n \"type\": \"optionsListControl\",\r\n
\"order\": 3,\r\n \"grow\": true,\r\n \"width\": \"small\",\r\n
\"explicitInput\": {\r\n \"id\": \"3\",\r\n \"dataViewId\":
\"unified-alerts-dv\",\r\n \"fieldName\": \"tags\",\r\n \"title\":
\"Tags\",\r\n \"hideExclude\": true,\r\n \"hideSort\": true,\r\n
\"hidePanelTitles\": true,\r\n \"placeholder\": \"\",\r\n
\"ignoreParentSettings\": {\r\n \"ignoreValidations\": true\r\n }\r\n
}\r\n }\r\n },\r\n \"labelPosition\": \"oneLine\",\r\n
\"chainingSystem\": \"HIERARCHICAL\",\r\n \"autoApplySelections\":
true,\r\n \"ignoreParentSettings\": {\r\n \"ignoreValidations\":
true\r\n },\r\n \"editorConfig\": {\r\n \"hideWidthSettings\": true,\r\n
\"hideDataViewSelector\": true,\r\n \"hideAdditionalSettings\": true\r\n
}\r\n}\r\n```\r\n</details>\r\n\r\n## References\r\n\r\nFixes
#193565","sha":"ef3bc96e52f6c21bd1543d2cb48acef31f56022e","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:ResponseOps","v9.0.0","backport:prev-major"],"title":"[ResponseOps][Alerts]
Fix Stack Alerts page filter controls
error","number":194785,"url":"https://github.com/elastic/kibana/pull/194785","mergeCommit":{"message":"[ResponseOps][Alerts]
Fix Stack Alerts page filter controls error (#194785)\n\n##
Summary\r\n\r\nhttps://github.com//pull/190561 introduced
a breaking\r\nchange in the format of the controls embeddable
configuration object\r\nthat caused usages in the Security and Stack
alerts pages to break if\r\nthere was an old value saved in
localStorage.\r\n\r\nThis PR makes the storage key for the alert filter
controls configurable\r\nand uses a new value for the usage in
`<UrlSyncedAlertsSearchBar>`,\r\nfixing the error in the Stack Alerts
page.\r\n\r\n## To verify\r\n\r\n1. Checkout a revision prior to this
PR\r\n2. Create Stack rules that fire alerts\r\n3. Visit the Stack
Alerts page (should show a full-page error message,\r\nif it doesn't see
[If the page works correctly](#how-to-break))\r\n4. Checkout this
PR\r\n5. Reload the Stack Alerts page\r\n6. Verify that the page loads
correctly\r\n\r\n<details id=\"how-to-break\">\r\n\r\n<summary>If the
page works correctly</summary>\r\n\r\nYou likely didn't have an old
saved configuration for the controls bar\r\nin the localStorage. In this
case, create a localStorage item
named\r\n`stackAlerts.default.pageFilters` with the following
content:\r\n\r\n```json\r\n{\r\n \"panels\": {\r\n \"0\": {\r\n
\"type\": \"optionsListControl\",\r\n \"order\": 0,\r\n \"grow\":
true,\r\n \"width\": \"small\",\r\n \"explicitInput\": {\r\n \"id\":
\"0\",\r\n \"dataViewId\": \"unified-alerts-dv\",\r\n \"fieldName\":
\"kibana.alert.status\",\r\n \"title\": \"Status\",\r\n \"hideExclude\":
true,\r\n \"hideSort\": true,\r\n \"hidePanelTitles\": true,\r\n
\"placeholder\": \"\",\r\n \"ignoreParentSettings\": {\r\n
\"ignoreValidations\": true\r\n },\r\n \"selectedOptions\": [\r\n
\"active\"\r\n ],\r\n \"hideActionBar\": true,\r\n \"persist\":
true,\r\n \"hideExists\": true\r\n }\r\n },\r\n \"1\": {\r\n \"type\":
\"optionsListControl\",\r\n \"order\": 1,\r\n \"grow\": true,\r\n
\"width\": \"small\",\r\n \"explicitInput\": {\r\n \"id\": \"1\",\r\n
\"dataViewId\": \"unified-alerts-dv\",\r\n \"fieldName\":
\"kibana.alert.rule.name\",\r\n \"title\": \"Rule\",\r\n
\"hideExclude\": true,\r\n \"hideSort\": true,\r\n \"hidePanelTitles\":
true,\r\n \"placeholder\": \"\",\r\n \"ignoreParentSettings\": {\r\n
\"ignoreValidations\": true\r\n },\r\n \"hideExists\": true\r\n }\r\n
},\r\n \"2\": {\r\n \"type\": \"optionsListControl\",\r\n \"order\":
2,\r\n \"grow\": true,\r\n \"width\": \"small\",\r\n \"explicitInput\":
{\r\n \"id\": \"2\",\r\n \"dataViewId\": \"unified-alerts-dv\",\r\n
\"fieldName\": \"kibana.alert.group.value\",\r\n \"title\":
\"Group\",\r\n \"hideExclude\": true,\r\n \"hideSort\": true,\r\n
\"hidePanelTitles\": true,\r\n \"placeholder\": \"\",\r\n
\"ignoreParentSettings\": {\r\n \"ignoreValidations\": true\r\n }\r\n
}\r\n },\r\n \"3\": {\r\n \"type\": \"optionsListControl\",\r\n
\"order\": 3,\r\n \"grow\": true,\r\n \"width\": \"small\",\r\n
\"explicitInput\": {\r\n \"id\": \"3\",\r\n \"dataViewId\":
\"unified-alerts-dv\",\r\n \"fieldName\": \"tags\",\r\n \"title\":
\"Tags\",\r\n \"hideExclude\": true,\r\n \"hideSort\": true,\r\n
\"hidePanelTitles\": true,\r\n \"placeholder\": \"\",\r\n
\"ignoreParentSettings\": {\r\n \"ignoreValidations\": true\r\n }\r\n
}\r\n }\r\n },\r\n \"labelPosition\": \"oneLine\",\r\n
\"chainingSystem\": \"HIERARCHICAL\",\r\n \"autoApplySelections\":
true,\r\n \"ignoreParentSettings\": {\r\n \"ignoreValidations\":
true\r\n },\r\n \"editorConfig\": {\r\n \"hideWidthSettings\": true,\r\n
\"hideDataViewSelector\": true,\r\n \"hideAdditionalSettings\": true\r\n
}\r\n}\r\n```\r\n</details>\r\n\r\n## References\r\n\r\nFixes
#193565","sha":"ef3bc96e52f6c21bd1543d2cb48acef31f56022e"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/194785","number":194785,"mergeCommit":{"message":"[ResponseOps][Alerts]
Fix Stack Alerts page filter controls error (#194785)\n\n##
Summary\r\n\r\nhttps://github.com//pull/190561 introduced
a breaking\r\nchange in the format of the controls embeddable
configuration object\r\nthat caused usages in the Security and Stack
alerts pages to break if\r\nthere was an old value saved in
localStorage.\r\n\r\nThis PR makes the storage key for the alert filter
controls configurable\r\nand uses a new value for the usage in
`<UrlSyncedAlertsSearchBar>`,\r\nfixing the error in the Stack Alerts
page.\r\n\r\n## To verify\r\n\r\n1. Checkout a revision prior to this
PR\r\n2. Create Stack rules that fire alerts\r\n3. Visit the Stack
Alerts page (should show a full-page error message,\r\nif it doesn't see
[If the page works correctly](#how-to-break))\r\n4. Checkout this
PR\r\n5. Reload the Stack Alerts page\r\n6. Verify that the page loads
correctly\r\n\r\n<details id=\"how-to-break\">\r\n\r\n<summary>If the
page works correctly</summary>\r\n\r\nYou likely didn't have an old
saved configuration for the controls bar\r\nin the localStorage. In this
case, create a localStorage item
named\r\n`stackAlerts.default.pageFilters` with the following
content:\r\n\r\n```json\r\n{\r\n \"panels\": {\r\n \"0\": {\r\n
\"type\": \"optionsListControl\",\r\n \"order\": 0,\r\n \"grow\":
true,\r\n \"width\": \"small\",\r\n \"explicitInput\": {\r\n \"id\":
\"0\",\r\n \"dataViewId\": \"unified-alerts-dv\",\r\n \"fieldName\":
\"kibana.alert.status\",\r\n \"title\": \"Status\",\r\n \"hideExclude\":
true,\r\n \"hideSort\": true,\r\n \"hidePanelTitles\": true,\r\n
\"placeholder\": \"\",\r\n \"ignoreParentSettings\": {\r\n
\"ignoreValidations\": true\r\n },\r\n \"selectedOptions\": [\r\n
\"active\"\r\n ],\r\n \"hideActionBar\": true,\r\n \"persist\":
true,\r\n \"hideExists\": true\r\n }\r\n },\r\n \"1\": {\r\n \"type\":
\"optionsListControl\",\r\n \"order\": 1,\r\n \"grow\": true,\r\n
\"width\": \"small\",\r\n \"explicitInput\": {\r\n \"id\": \"1\",\r\n
\"dataViewId\": \"unified-alerts-dv\",\r\n \"fieldName\":
\"kibana.alert.rule.name\",\r\n \"title\": \"Rule\",\r\n
\"hideExclude\": true,\r\n \"hideSort\": true,\r\n \"hidePanelTitles\":
true,\r\n \"placeholder\": \"\",\r\n \"ignoreParentSettings\": {\r\n
\"ignoreValidations\": true\r\n },\r\n \"hideExists\": true\r\n }\r\n
},\r\n \"2\": {\r\n \"type\": \"optionsListControl\",\r\n \"order\":
2,\r\n \"grow\": true,\r\n \"width\": \"small\",\r\n \"explicitInput\":
{\r\n \"id\": \"2\",\r\n \"dataViewId\": \"unified-alerts-dv\",\r\n
\"fieldName\": \"kibana.alert.group.value\",\r\n \"title\":
\"Group\",\r\n \"hideExclude\": true,\r\n \"hideSort\": true,\r\n
\"hidePanelTitles\": true,\r\n \"placeholder\": \"\",\r\n
\"ignoreParentSettings\": {\r\n \"ignoreValidations\": true\r\n }\r\n
}\r\n },\r\n \"3\": {\r\n \"type\": \"optionsListControl\",\r\n
\"order\": 3,\r\n \"grow\": true,\r\n \"width\": \"small\",\r\n
\"explicitInput\": {\r\n \"id\": \"3\",\r\n \"dataViewId\":
\"unified-alerts-dv\",\r\n \"fieldName\": \"tags\",\r\n \"title\":
\"Tags\",\r\n \"hideExclude\": true,\r\n \"hideSort\": true,\r\n
\"hidePanelTitles\": true,\r\n \"placeholder\": \"\",\r\n
\"ignoreParentSettings\": {\r\n \"ignoreValidations\": true\r\n }\r\n
}\r\n }\r\n },\r\n \"labelPosition\": \"oneLine\",\r\n
\"chainingSystem\": \"HIERARCHICAL\",\r\n \"autoApplySelections\":
true,\r\n \"ignoreParentSettings\": {\r\n \"ignoreValidations\":
true\r\n },\r\n \"editorConfig\": {\r\n \"hideWidthSettings\": true,\r\n
\"hideDataViewSelector\": true,\r\n \"hideAdditionalSettings\": true\r\n
}\r\n}\r\n```\r\n</details>\r\n\r\n## References\r\n\r\nFixes
#193565","sha":"ef3bc96e52f6c21bd1543d2cb48acef31f56022e"}}]}]
BACKPORT-->

Co-authored-by: Umberto Pepato <[email protected]>

packages/kbn-alerts-ui-shared/src/alert_filter_controls/filter_group.tsx

@@ -47,6 +47,7 @@ import { URL_PARAM_ARRAY_EXCEPTION_MSG } from './translations';
 
 export const FilterGroup = (props: PropsWithChildren<FilterGroupProps>) => {
   const {
+    featureIds,
     dataViewId,
     onFiltersChange,
     timeRange,
@@ -61,7 +62,7 @@ export const FilterGroup = (props: PropsWithChildren<FilterGroupProps>) => {
     maxControls = Infinity,
     ControlGroupRenderer,
     Storage,
-    featureIds,
+    storageKey,
   } = props;
 
   const filterChangedSubscription = useRef<Subscription>();
@@ -82,8 +83,8 @@ export const FilterGroup = (props: PropsWithChildren<FilterGroupProps>) => {
   const [controlGroup, setControlGroup] = useState<ControlGroupContainer>();
 
   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

@@ -70,4 +70,5 @@ export interface FilterGroupProps
    */
   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,