From 46c8a999de788715efe2f124ad767d4e0ab86c04 Mon Sep 17 00:00:00 2001
From: Umberto Pepato <umbopepato@users.noreply.github.com>
Date: Tue, 21 May 2024 17:20:29 +0200
Subject: [PATCH] [ResponseOps][Rules] Fix rules list item enabled state
 updates causing test flakyness (#183805)

## Summary

Removes optimistic updates from rules list item when enabling/disabling
rules to avoid out-of-sync states (the likely cause of
[this](https://github.com/elastic/kibana/issues/157623) flaky test).

Fixes #157623
---
 .../components/rule_status_dropdown.tsx       | 23 +++++--------------
 .../rules_list/rules_list.ts                  |  3 +--
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_dropdown.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_dropdown.tsx
index 624e6e5f276e7..ddd836a4f0993 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_dropdown.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_dropdown.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useCallback } from 'react';
 import moment from 'moment';
 import { i18n } from '@kbn/i18n';
 import type { RuleSnooze } from '@kbn/alerting-plugin/common';
@@ -29,7 +29,6 @@ import { Rule, SnoozeSchedule, BulkOperationResponse } from '../../../../types';
 import { ToastWithCircuitBreakerContent } from '../../../components/toast_with_circuit_breaker_content';
 import { UntrackAlertsModal } from '../../common/components/untrack_alerts_modal';
 
-export type SnoozeUnit = 'm' | 'h' | 'd' | 'w' | 'M';
 const SNOOZE_END_TIME_FORMAT = 'LL @ LT';
 
 type DropdownRuleRecord = Pick<
@@ -60,24 +59,16 @@ export const RuleStatusDropdown: React.FunctionComponent<ComponentOpts> = ({
   hideSnoozeOption = false,
   direction = 'column',
 }: ComponentOpts) => {
-  const [isEnabled, setIsEnabled] = useState<boolean>(rule.enabled);
-  const [isSnoozed, setIsSnoozed] = useState<boolean>(!hideSnoozeOption && isRuleSnoozed(rule));
-
   const {
     notifications: { toasts },
     i18n: i18nStart,
     theme,
   } = useKibana().services;
 
-  useEffect(() => {
-    setIsEnabled(rule.enabled);
-  }, [rule.enabled]);
-  useEffect(() => {
-    if (!hideSnoozeOption) setIsSnoozed(isRuleSnoozed(rule));
-  }, [rule, hideSnoozeOption]);
   const [isUpdating, setIsUpdating] = useState<boolean>(false);
   const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
   const [isUntrackAlertsModalOpen, setIsUntrackAlertsModalOpen] = useState<boolean>(false);
+  const isSnoozed = !hideSnoozeOption && isRuleSnoozed(rule);
 
   const onClickBadge = useCallback(() => setIsPopoverOpen((isOpen) => !isOpen), [setIsPopoverOpen]);
   const onClosePopover = useCallback(() => setIsPopoverOpen(false), [setIsPopoverOpen]);
@@ -106,7 +97,6 @@ export const RuleStatusDropdown: React.FunctionComponent<ComponentOpts> = ({
     setIsUpdating(true);
     try {
       await enableRuleInternal();
-      setIsEnabled(true);
       onRuleChanged();
     } finally {
       setIsUpdating(false);
@@ -118,7 +108,6 @@ export const RuleStatusDropdown: React.FunctionComponent<ComponentOpts> = ({
       setIsUpdating(true);
       try {
         await disableRule(untrack);
-        setIsEnabled(false);
         onRuleChanged();
       } finally {
         setIsUpdating(false);
@@ -181,11 +170,11 @@ export const RuleStatusDropdown: React.FunctionComponent<ComponentOpts> = ({
     [unsnoozeRule, onRuleChanged, onClosePopover]
   );
 
-  const badgeColor = !isEnabled ? 'default' : isSnoozed ? 'warning' : 'primary';
-  const badgeMessage = !isEnabled ? DISABLED : isSnoozed ? SNOOZED : ENABLED;
+  const badgeColor = !rule.enabled ? 'default' : isSnoozed ? 'warning' : 'primary';
+  const badgeMessage = !rule.enabled ? DISABLED : isSnoozed ? SNOOZED : ENABLED;
 
   const remainingSnoozeTime =
-    isEnabled && isSnoozed ? (
+    rule.enabled && isSnoozed ? (
       <EuiToolTip
         content={
           rule.muteAll
@@ -246,7 +235,7 @@ export const RuleStatusDropdown: React.FunctionComponent<ComponentOpts> = ({
               <RuleStatusMenu
                 onClosePopover={onClosePopover}
                 onChangeEnabledStatus={onChangeEnabledStatus}
-                isEnabled={isEnabled}
+                isEnabled={rule.enabled}
                 isSnoozed={isSnoozed}
                 snoozeEndTime={rule.isSnoozedUntil}
                 hideSnoozeOption={hideSnoozeOption}
diff --git a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/rules_list/rules_list.ts b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/rules_list/rules_list.ts
index 06ccb3990b69f..e3324ccbc000a 100644
--- a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/rules_list/rules_list.ts
+++ b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/rules_list/rules_list.ts
@@ -49,8 +49,7 @@ export default ({ getPageObjects, getPageObject, getService }: FtrProviderContex
     return summary;
   };
 
-  // FLAKY: https://github.com/elastic/kibana/issues/157623
-  describe.skip('rules list', function () {
+  describe('rules list', function () {
     const assertRulesLength = async (length: number) => {
       return await retry.try(async () => {
         const rules = await pageObjects.triggersActionsUI.getAlertsList();