[8.x] [Security Solution] Fix hanging rule creation page (elastic#201629

) (elastic#201852)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Security Solution] Fix hanging rule creation page
(elastic#201629)](elastic#201629)

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

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

<!--BACKPORT [{"author":{"name":"Maxim
Palenov","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-26T18:10:46Z","message":"[Security
Solution] Fix hanging rule creation page (elastic#201629)\n\n**Closes:**
https://github.com/elastic/kibana/issues/201606\r\n\r\n##
Summary\r\n\r\nThis PR fixes a bug introduced in
elastic@06986e4
leading to hanging rule creation page after manipulation with EQL rule's
query and alert suppression fields.\r\n\r\n##
Details\r\n\r\nhttps://github.com/elastic/kibana/commit/06986e4a86a0fa3c3951fcb6b2ba34ebe2769820
add `usePersistentAlertSuppressionState()` hook to persist alert
suppression state upon rule type change. It didn't take into account
rule type change is a tricky process leading to multiple re-renders. In
that case it easily can lead to a hanging page due to repeating updating
form values leading to re-rendering.\r\n\r\nThe fix checks for the
current and previous rule types to reset alert suppression form data
only once upon rule type
change.","sha":"9ddb459c7b6e9272b55b1a5b27b49108064ed5af","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","impact:high","v9.0.0","Team:Detections
and Resp","Team: SecuritySolution","Team:Detection Rule
Management","Feature:Rule Creation","Team:Detection
Engine","backport:version","v8.17.0","v8.18.0"],"title":"[Security
Solution] Fix hanging rule creation
page","number":201629,"url":"https://github.com/elastic/kibana/pull/201629","mergeCommit":{"message":"[Security
Solution] Fix hanging rule creation page (elastic#201629)\n\n**Closes:**
https://github.com/elastic/kibana/issues/201606\r\n\r\n##
Summary\r\n\r\nThis PR fixes a bug introduced in
elastic@06986e4
leading to hanging rule creation page after manipulation with EQL rule's
query and alert suppression fields.\r\n\r\n##
Details\r\n\r\nhttps://github.com/elastic/kibana/commit/06986e4a86a0fa3c3951fcb6b2ba34ebe2769820
add `usePersistentAlertSuppressionState()` hook to persist alert
suppression state upon rule type change. It didn't take into account
rule type change is a tricky process leading to multiple re-renders. In
that case it easily can lead to a hanging page due to repeating updating
form values leading to re-rendering.\r\n\r\nThe fix checks for the
current and previous rule types to reset alert suppression form data
only once upon rule type
change.","sha":"9ddb459c7b6e9272b55b1a5b27b49108064ed5af"}},"sourceBranch":"main","suggestedTargetBranches":["8.17","8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/201629","number":201629,"mergeCommit":{"message":"[Security
Solution] Fix hanging rule creation page (elastic#201629)\n\n**Closes:**
https://github.com/elastic/kibana/issues/201606\r\n\r\n##
Summary\r\n\r\nThis PR fixes a bug introduced in
elastic@06986e4
leading to hanging rule creation page after manipulation with EQL rule's
query and alert suppression fields.\r\n\r\n##
Details\r\n\r\nhttps://github.com/elastic/kibana/commit/06986e4a86a0fa3c3951fcb6b2ba34ebe2769820
add `usePersistentAlertSuppressionState()` hook to persist alert
suppression state upon rule type change. It didn't take into account
rule type change is a tricky process leading to multiple re-renders. In
that case it easily can lead to a hanging page due to repeating updating
form values leading to re-rendering.\r\n\r\nThe fix checks for the
current and previous rule types to reset alert suppression form data
only once upon rule type
change.","sha":"9ddb459c7b6e9272b55b1a5b27b49108064ed5af"}},{"branch":"8.17","label":"v8.17.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.x","label":"v8.18.0","branchLabelMappingKey":"^v8.18.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Maxim Palenov <[email protected]>

x-pack/plugins/security_solution/public/detection_engine/rule_creation/components/alert_suppression_edit/components/alert_suppression_edit.tsx

@@ -54,11 +54,9 @@ export const AlertSuppressionEdit = memo(function AlertSuppressionEdit({
     </>
   );
 
-  return disabled && disabledText ? (
-    <EuiToolTip position="right" content={disabledText}>
+  return (
+    <EuiToolTip position="right" content={disabled && disabledText}>
       {content}
     </EuiToolTip>
-  ) : (
-    content
   );
 });

x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/components/multi_select_fields/index.tsx

@@ -5,8 +5,9 @@
  * 2.0.
  */
 
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import type { DataViewFieldBase } from '@kbn/es-query';
+import type { EuiComboBox } from '@elastic/eui';
 import { ComboBoxField } from '@kbn/es-ui-shared-plugin/static/forms/components';
 import type { FieldHook } from '../../../../shared_imports';
 import { FIELD_PLACEHOLDER } from './translations';
@@ -30,6 +31,7 @@ export const MultiSelectAutocompleteComponent: React.FC<MultiSelectAutocompleteP
   fullWidth = false,
   dataTestSubj,
 }: MultiSelectAutocompleteProps) => {
+  const comboBoxRef = useRef<EuiComboBox<unknown>>();
   const fieldEuiFieldProps = useMemo(
     () => ({
       fullWidth: true,
@@ -39,10 +41,24 @@ export const MultiSelectAutocompleteComponent: React.FC<MultiSelectAutocompleteP
       onCreateOption: undefined,
       ...(fullWidth ? {} : { style: { width: `${FIELD_COMBO_BOX_WIDTH}px` } }),
       isDisabled,
+      ref: comboBoxRef,
     }),
-    [browserFields, isDisabled, fullWidth]
+    [browserFields, isDisabled, fullWidth, comboBoxRef]
   );
 
+  /**
+   * ComboBox's options list might stay open after disabling the control.
+   *
+   * It happens for example when disabled state condition depends on the number of selected items.
+   * When removing the last item the control switches to disabled state but doesn't close the
+   * options lits.
+   */
+  useEffect(() => {
+    if (isDisabled) {
+      comboBoxRef.current?.closeList();
+    }
+  }, [isDisabled]);
+
   return (
     <ComboBoxField
       field={field}

x-pack/plugins/security_solution/public/detection_engine/rule_creation_ui/components/step_define_rule/use_persistent_alert_suppression_state.ts

@@ -6,6 +6,7 @@
  */
 
 import { useEffect } from 'react';
+import usePrevious from 'react-use/lib/usePrevious';
 import { isThresholdRule } from '../../../../../common/detection_engine/utils';
 import type { FormHook } from '../../../../shared_imports';
 import { useFormData } from '../../../../shared_imports';
@@ -51,8 +52,13 @@ export function usePersistentAlertSuppressionState({
       ALERT_SUPPRESSION_MISSING_FIELDS_FIELD_NAME,
     ],
   });
+  const previousRuleType = usePrevious(ruleType);
 
   useEffect(() => {
+    if (!ruleType || ruleType === previousRuleType) {
+      return;
+    }
+
     form.updateFieldValues({
       [THRESHOLD_ALERT_SUPPRESSION_ENABLED]: thresholdAlertSuppressionEnabled,
       [ALERT_SUPPRESSION_FIELDS_FIELD_NAME]: suppressionFields,
@@ -68,6 +74,7 @@ export function usePersistentAlertSuppressionState({
   }, [
     form,
     ruleType,
+    previousRuleType,
     thresholdAlertSuppressionEnabled,
     suppressionFields,
     suppressionDurationType,