From e7e0c864e70842968c6b8b1c09737fb8478a6d4e Mon Sep 17 00:00:00 2001
From: Umberto Pepato <umbopepato@users.noreply.github.com>
Date: Fri, 24 May 2024 14:24:28 +0200
Subject: [PATCH] [ResponseOps][Rules] Fix flaky rule details page tests
 (#183888)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Prevents the rule details page's lazyly loaded components from
re-triggering the fallback state of the top-level `<Suspense>` that was
causing a _Flash of Content_, the likely cause of #172941 and #173008.

## Details

<details>
<summary>
Slowed down screen capture of the loading flash
</summary>


https://github.com/elastic/kibana/assets/18363145/8ab0bd7c-bcef-417f-9930-ef03aeec6e8b
</details>

My guess is that in the flaky test runs the `Edit` button was pressed
just before the component was temporarily removed from the render tree
and therefore the flyout couldn't render correctly.

## To verify

1. Create any type of rule from `Stack Management`
2. Navigate to that rule's detail page (`Stack Management` > `Rules` >
Click on rule in list)
3. Verify that the page header only loads once without going back to the
loading indicator (throttling the network from the DevTools or capturing
the screen and playing back the video slowed down might help).

Fixes #172941
Fixes #173008
---
 .../components/rule_details_route.tsx         | 30 ++++++++++---------
 .../rule_details/components/rule_route.tsx    | 26 ++++++++--------
 .../apps/triggers_actions_ui/details.ts       |  4 +--
 3 files changed, 31 insertions(+), 29 deletions(-)

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_details_route.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_details_route.tsx
index 116c97ef905d7d..e195b12eea9e66 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_details_route.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_details_route.tsx
@@ -130,20 +130,22 @@ export const RuleDetailsRoute: React.FunctionComponent<RuleDetailsRouteProps> =
     return null;
   };
 
-  return rule && ruleType && actionTypes ? (
-    <>
-      {getLegacyUrlConflictCallout()}
-      <RuleDetails
-        rule={rule}
-        ruleType={ruleType}
-        actionTypes={actionTypes}
-        requestRefresh={requestRefresh}
-        refreshToken={refreshToken}
-      />
-    </>
-  ) : (
-    <CenterJustifiedSpinner />
-  );
+  if (rule && ruleType && actionTypes) {
+    return (
+      <>
+        {getLegacyUrlConflictCallout()}
+        <RuleDetails
+          rule={rule}
+          ruleType={ruleType}
+          actionTypes={actionTypes}
+          requestRefresh={requestRefresh}
+          refreshToken={refreshToken}
+        />
+      </>
+    );
+  }
+
+  return <CenterJustifiedSpinner />;
 };
 
 export async function getRuleData(
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_route.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_route.tsx
index f1df6af2775497..2c7c5a7ac92673 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_route.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/rule_route.tsx
@@ -7,7 +7,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { ToastsApi } from '@kbn/core/public';
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useCallback, Suspense } from 'react';
 import { Rule, RuleSummary, RuleType } from '../../../../types';
 import {
   ComponentOpts as RuleApis,
@@ -76,17 +76,19 @@ export const RuleRoute: React.FunctionComponent<WithRuleSummaryProps> = ({
   );
 
   return ruleSummary ? (
-    <Rules
-      requestRefresh={requestRefresh}
-      refreshToken={refreshToken}
-      rule={rule}
-      ruleType={ruleType}
-      readOnly={readOnly}
-      ruleSummary={ruleSummary}
-      numberOfExecutions={numberOfExecutions}
-      isLoadingChart={isLoadingChart}
-      onChangeDuration={onChangeDuration}
-    />
+    <Suspense fallback={<CenterJustifiedSpinner />}>
+      <Rules
+        requestRefresh={requestRefresh}
+        refreshToken={refreshToken}
+        rule={rule}
+        ruleType={ruleType}
+        readOnly={readOnly}
+        ruleSummary={ruleSummary}
+        numberOfExecutions={numberOfExecutions}
+        isLoadingChart={isLoadingChart}
+        onChangeDuration={onChangeDuration}
+      />
+    </Suspense>
   ) : (
     <CenterJustifiedSpinner />
   );
diff --git a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/details.ts b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/details.ts
index b71f659b10baad..546ee11fd4ea81 100644
--- a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/details.ts
+++ b/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/details.ts
@@ -319,9 +319,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       });
     });
 
-    // FLAKY: https://github.com/elastic/kibana/issues/172941
-    // FLAKY: https://github.com/elastic/kibana/issues/173008
-    describe.skip('Edit rule button', function () {
+    describe('Edit rule button', function () {
       const ruleName = uuidv4();
       const updatedRuleName = `Changed Rule Name ${ruleName}`;