From 73dcb07e3ee37b76f4ab582d247d63c6cba02573 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Sat, 5 Oct 2024 00:29:00 +1000
Subject: [PATCH] [8.15] [ResponseOps][Alerts] Fix Stack Alerts page filter
 controls error (#194785) (#194942)

# Backport

This will backport the following commits from `main` to `8.15`:
- [[ResponseOps][Alerts] Fix Stack Alerts page filter controls error
(#194785)](https://github.com/elastic/kibana/pull/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":"umbopepato@users.noreply.github.com"},"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/elastic/kibana/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/elastic/kibana/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/elastic/kibana/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 <umbopepato@users.noreply.github.com>
---
 .../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 cc474ddf853e5..5f38b7394c9bb 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
@@ -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[]>();
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 75dcad2acb5c2..71e8e552eeeb1 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
@@ -70,4 +70,5 @@ export interface FilterGroupProps
    */
   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,