Fixed console error, which appears when saving changes in Edit Alert flyout

Author: YulNaumenko

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/alert_details.tsx

@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useState, Fragment, useEffect } from 'react';
+import React, { useState, Fragment, useEffect, useReducer } from 'react';
 import { keyBy } from 'lodash';
 import { useHistory } from 'react-router-dom';
 import {
@@ -41,6 +41,7 @@ import { AlertEdit } from '../../alert_form';
 import { AlertsContextProvider } from '../../../context/alerts_context';
 import { routeToAlertDetails } from '../../../constants';
 import { alertsErrorReasonTranslationsMapping } from '../../alerts_list/translations';
+import { alertReducer } from '../../alert_form/alert_reducer';
 
 type AlertDetailsProps = {
   alert: Alert;
@@ -73,6 +74,10 @@ export const AlertDetails: React.FunctionComponent<AlertDetailsProps> = ({
     setBreadcrumbs,
     chrome,
   } = useAppDependencies();
+  const [{}, dispatch] = useReducer(alertReducer, { alert });
+  const setInitialAlert = (key: string, value: any) => {
+    dispatch({ command: { type: 'setAlert' }, payload: { key, value } });
+  };
 
   // Set breadcrumb and page title
   useEffect(() => {
@@ -166,7 +171,10 @@ export const AlertDetails: React.FunctionComponent<AlertDetailsProps> = ({
                         >
                           <AlertEdit
                             initialAlert={alert}
-                            onClose={() => setEditFlyoutVisibility(false)}
+                            onClose={() => {
+                              setInitialAlert('alert', alert);
+                              setEditFlyoutVisibility(false);
+                            }}
                           />
                         </AlertsContextProvider>
                       )}

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_edit.tsx

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { Fragment, useCallback, useReducer, useState } from 'react';
+import React, { Fragment, useReducer, useState } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiTitle,
@@ -40,9 +40,6 @@ export const AlertEdit = ({ initialAlert, onClose }: AlertEditProps) => {
   const [hasActionsWithBrokenConnector, setHasActionsWithBrokenConnector] = useState<boolean>(
     false
   );
-  const setAlert = (key: string, value: any) => {
-    dispatch({ command: { type: 'setAlert' }, payload: { key, value } });
-  };
 
   const {
     reloadAlerts,
@@ -53,12 +50,6 @@ export const AlertEdit = ({ initialAlert, onClose }: AlertEditProps) => {
     docLinks,
   } = useAlertsContext();
 
-  const closeFlyout = useCallback(() => {
-    onClose();
-    setAlert('alert', initialAlert);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [onClose]);
-
   const alertType = alertTypeRegistry.get(alert.alertTypeId);
 
   const errors = {
@@ -105,7 +96,7 @@ export const AlertEdit = ({ initialAlert, onClose }: AlertEditProps) => {
   return (
     <EuiPortal>
       <EuiFlyout
-        onClose={closeFlyout}
+        onClose={() => onClose()}
         aria-labelledby="flyoutAlertEditTitle"
         size="m"
         maxWidth={620}
@@ -155,7 +146,7 @@ export const AlertEdit = ({ initialAlert, onClose }: AlertEditProps) => {
                 <EuiFlexItem grow={false}>
                   <EuiButtonEmpty
                     data-test-subj="cancelSaveEditedAlertButton"
-                    onClick={closeFlyout}
+                    onClick={() => onClose()}
                   >
                     {i18n.translate(
                       'xpack.triggersActionsUI.sections.alertEdit.cancelButtonLabel',
@@ -179,7 +170,7 @@ export const AlertEdit = ({ initialAlert, onClose }: AlertEditProps) => {
                       const savedAlert = await onSaveAlert();
                       setIsSaving(false);
                       if (savedAlert) {
-                        closeFlyout();
+                        onClose();
                         if (reloadAlerts) {
                           reloadAlerts();
                         }