[ResponseOps][Rules] Fix flaky rule details page tests (#183888)

## 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
elastic · May 24, 2024 · e7e0c86 · e7e0c86
1 parent ce0f087
commit e7e0c86
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 29 deletions.
diff --git a/...ers_actions_ui/public/application/sections/rule_details/components/rule_details_route.tsx b/...ers_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/...ns/triggers_actions_ui/public/application/sections/rule_details/components/rule_route.tsx b/...ns/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
@@ -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}`;