Merge rule details page lazy loading in same Suspense

elastic · May 22, 2024 · 135f62b · 135f62b
1 parent e6614fa
commit 135f62b
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}`;