[Security Solution] [Detections] useMemo for conditional rendering of…

… actions step and bug fix (#80361) * useMemo for conditional rendering of actions components * fixes bug where state of form was being updated before components were mounted when switching between tabs on edit rule
elastic · Oct 14, 2020 · dc827c7 · dc827c7
1 parent 52a7887
commit dc827c7
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 46 deletions.
diff --git a/...ck/plugins/security_solution/public/detections/components/rules/step_about_rule/index.tsx b/...ck/plugins/security_solution/public/detections/components/rules/step_about_rule/index.tsx
@@ -122,9 +122,13 @@ const StepAboutRuleComponent: FC<StepAboutRuleProps> = ({
   }, [onSubmit]);
 
   useEffect(() => {
-    if (setForm) {
+    let didCancel = false;
+    if (setForm && !didCancel) {
       setForm(RuleStep.aboutRule, getData);
     }
+    return () => {
+      didCancel = true;
+    };
   }, [getData, setForm]);
 
   return isReadOnlyView ? (

diff --git a/...k/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx b/...k/plugins/security_solution/public/detections/components/rules/step_define_rule/index.tsx
@@ -190,9 +190,13 @@ const StepDefineRuleComponent: FC<StepDefineRuleProps> = ({
   }, [getFormData, submit]);
 
   useEffect(() => {
-    if (setForm) {
+    let didCancel = false;
+    if (setForm && !didCancel) {
       setForm(RuleStep.defineRule, getData);
     }
+    return () => {
+      didCancel = true;
+    };
   }, [getData, setForm]);
 
   const handleResetIndices = useCallback(() => {

diff --git a/.../plugins/security_solution/public/detections/components/rules/step_rule_actions/index.tsx b/.../plugins/security_solution/public/detections/components/rules/step_rule_actions/index.tsx
@@ -120,9 +120,13 @@ const StepRuleActionsComponent: FC<StepRuleActionsProps> = ({
   }, [getFormData, submit]);
 
   useEffect(() => {
-    if (setForm) {
+    let didCancel = false;
+    if (setForm && !didCancel) {
       setForm(RuleStep.ruleActions, getData);
     }
+    return () => {
+      didCancel = true;
+    };
   }, [getData, setForm]);
 
   const throttleOptions = useMemo(() => {
@@ -142,55 +146,59 @@ const StepRuleActionsComponent: FC<StepRuleActionsProps> = ({
     [isLoading, throttleOptions]
   );
 
-  if (isReadOnlyView) {
-    return (
-      <StepContentWrapper addPadding={addPadding}>
-        <StepRuleDescription schema={schema} data={initialState} columns="single" />
-      </StepContentWrapper>
-    );
-  }
-
-  const displayActionsOptions =
-    throttle !== stepActionsDefaultValue.throttle ? (
+  const displayActionsOptions = useMemo(
+    () =>
+      throttle !== stepActionsDefaultValue.throttle ? (
+        <>
+          <EuiSpacer />
+          <UseField
+            path="actions"
+            component={RuleActionsField}
+            componentProps={{
+              messageVariables: actionMessageParams,
+            }}
+          />
+        </>
+      ) : (
+        <UseField path="actions" component={GhostFormField} />
+      ),
+    [throttle, actionMessageParams]
+  );
+  // only display the actions dropdown if the user has "read" privileges for actions
+  const displayActionsDropDown = useMemo(() => {
+    return application.capabilities.actions.show ? (
       <>
-        <EuiSpacer />
         <UseField
-          path="actions"
-          component={RuleActionsField}
-          componentProps={{
-            messageVariables: actionMessageParams,
-          }}
+          path="throttle"
+          component={ThrottleSelectField}
+          componentProps={throttleFieldComponentProps}
         />
+        {displayActionsOptions}
+        <UseField path="kibanaSiemAppUrl" component={GhostFormField} />
+        <UseField path="enabled" component={GhostFormField} />
       </>
     ) : (
-      <UseField path="actions" component={GhostFormField} />
+      <>
+        <EuiText>{I18n.NO_ACTIONS_READ_PERMISSIONS}</EuiText>
+        <UseField
+          path="throttle"
+          componentProps={throttleFieldComponentProps}
+          component={GhostFormField}
+        />
+        <UseField path="actions" component={GhostFormField} />
+        <UseField path="kibanaSiemAppUrl" component={GhostFormField} />
+        <UseField path="enabled" component={GhostFormField} />
+      </>
     );
+  }, [application.capabilities.actions.show, displayActionsOptions, throttleFieldComponentProps]);
 
-  // only display the actions dropdown if the user has "read" privileges for actions
-  const displayActionsDropDown = application.capabilities.actions.show ? (
-    <>
-      <UseField
-        path="throttle"
-        component={ThrottleSelectField}
-        componentProps={throttleFieldComponentProps}
-      />
-      {displayActionsOptions}
-      <UseField path="kibanaSiemAppUrl" component={GhostFormField} />
-      <UseField path="enabled" component={GhostFormField} />
-    </>
-  ) : (
-    <>
-      <EuiText>{I18n.NO_ACTIONS_READ_PERMISSIONS}</EuiText>
-      <UseField
-        path="throttle"
-        componentProps={throttleFieldComponentProps}
-        component={GhostFormField}
-      />
-      <UseField path="actions" component={GhostFormField} />
-      <UseField path="kibanaSiemAppUrl" component={GhostFormField} />
-      <UseField path="enabled" component={GhostFormField} />
-    </>
-  );
+  if (isReadOnlyView) {
+    return (
+      <StepContentWrapper addPadding={addPadding}>
+        <StepRuleDescription schema={schema} data={initialState} columns="single" />
+      </StepContentWrapper>
+    );
+  }
 
   return (
     <>

diff --git a/...plugins/security_solution/public/detections/components/rules/step_schedule_rule/index.tsx b/...plugins/security_solution/public/detections/components/rules/step_schedule_rule/index.tsx
@@ -64,9 +64,13 @@ const StepScheduleRuleComponent: FC<StepScheduleRuleProps> = ({
   }, [getFormData, submit]);
 
   useEffect(() => {
-    if (setForm) {
+    let didCancel = false;
+    if (setForm && !didCancel) {
       setForm(RuleStep.scheduleRule, getData);
     }
+    return () => {
+      didCancel = true;
+    };
   }, [getData, setForm]);
 
   return isReadOnlyView ? (