Fix edit alert flyout to update initialAlert after edit (#65359) (#65951

)
elastic · May 9, 2020 · 02fd86c · 02fd86c
1 parent 343dc95
commit 02fd86c
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 38 deletions.
diff --git a/...riggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx b/...riggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx
@@ -127,26 +127,27 @@ export const AlertDetails: React.FunctionComponent<AlertDetailsProps> = ({
                           defaultMessage="Edit"
                         />
                       </EuiButtonEmpty>
-                      <AlertsContextProvider
-                        value={{
-                          http,
-                          actionTypeRegistry,
-                          alertTypeRegistry,
-                          toastNotifications,
-                          uiSettings,
-                          docLinks,
-                          charts,
-                          dataFieldsFormats: dataPlugin.fieldFormats,
-                          reloadAlerts: setAlert,
-                          capabilities,
-                        }}
-                      >
-                        <AlertEdit
-                          initialAlert={alert}
-                          editFlyoutVisible={editFlyoutVisible}
-                          setEditFlyoutVisibility={setEditFlyoutVisibility}
-                        />
-                      </AlertsContextProvider>
+                      {editFlyoutVisible && (
+                        <AlertsContextProvider
+                          value={{
+                            http,
+                            actionTypeRegistry,
+                            alertTypeRegistry,
+                            toastNotifications,
+                            uiSettings,
+                            docLinks,
+                            charts,
+                            dataFieldsFormats: dataPlugin.fieldFormats,
+                            reloadAlerts: setAlert,
+                            capabilities,
+                          }}
+                        >
+                          <AlertEdit
+                            initialAlert={alert}
+                            onClose={() => setEditFlyoutVisibility(false)}
+                          />
+                        </AlertsContextProvider>
+                      )}
                     </Fragment>
                   </EuiFlexItem>
                 ) : null}

diff --git a/...ck/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.test.tsx b/...ck/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.test.tsx
@@ -131,11 +131,7 @@ describe('alert_edit', () => {
             capabilities: deps!.capabilities,
           }}
         >
-          <AlertEdit
-            editFlyoutVisible={true}
-            setEditFlyoutVisibility={() => {}}
-            initialAlert={alert}
-          />
+          <AlertEdit onClose={() => {}} initialAlert={alert} />
         </AlertsContextProvider>
       </AppContextProvider>
     );

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx
@@ -31,15 +31,10 @@ import { PLUGIN } from '../../constants/plugin';
 
 interface AlertEditProps {
   initialAlert: Alert;
-  editFlyoutVisible: boolean;
-  setEditFlyoutVisibility: React.Dispatch<React.SetStateAction<boolean>>;
+  onClose(): void;
 }
 
-export const AlertEdit = ({
-  initialAlert,
-  editFlyoutVisible,
-  setEditFlyoutVisibility,
-}: AlertEditProps) => {
+export const AlertEdit = ({ initialAlert, onClose }: AlertEditProps) => {
   const [{ alert }, dispatch] = useReducer(alertReducer, { alert: initialAlert });
   const [isSaving, setIsSaving] = useState<boolean>(false);
   const [hasActionsDisabled, setHasActionsDisabled] = useState<boolean>(false);
@@ -57,14 +52,10 @@ export const AlertEdit = ({
   } = useAlertsContext();
 
   const closeFlyout = useCallback(() => {
-    setEditFlyoutVisibility(false);
+    onClose();
     setAlert('alert', initialAlert);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [setEditFlyoutVisibility]);
-
-  if (!editFlyoutVisible) {
-    return null;
-  }
+  }, [onClose]);
 
   const alertType = alertTypeRegistry.get(alert.alertTypeId);