Fixed AddAlert flyout does not immediately update state to reflect new props (#64927)

* Fixed `AddAlert` flyout does not immediately update state to reflect new props

* fixed add form

* Fixed type check

Author: YulNaumenko

x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index.tsx

@@ -86,7 +86,9 @@ const IndexActionConnectorFields: React.FunctionComponent<ActionConnectorFieldsP
 
   const [indexPatterns, setIndexPatterns] = useState([]);
   const [indexOptions, setIndexOptions] = useState<EuiComboBoxOptionOption[]>([]);
-  const [timeFieldOptions, setTimeFieldOptions] = useState([firstFieldOption]);
+  const [timeFieldOptions, setTimeFieldOptions] = useState<Array<{ value: string; text: string }>>([
+    firstFieldOption,
+  ]);
   const [isIndiciesLoading, setIsIndiciesLoading] = useState<boolean>(false);
 
   useEffect(() => {

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_form/alert_add.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, { useCallback, useReducer, useState } from 'react';
+import React, { useCallback, useReducer, useState, useEffect } from 'react';
 import { isObject } from 'lodash';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
@@ -60,6 +60,9 @@ export const AlertAdd = ({
   const setAlert = (value: any) => {
     dispatch({ command: { type: 'setAlert' }, payload: { key: 'alert', value } });
   };
+  const setAlertProperty = (key: string, value: any) => {
+    dispatch({ command: { type: 'setProperty' }, payload: { key, value } });
+  };
 
   const {
     reloadAlerts,
@@ -70,6 +73,10 @@ export const AlertAdd = ({
     docLinks,
   } = useAlertsContext();
 
+  useEffect(() => {
+    setAlertProperty('alertTypeId', alertTypeId);
+  }, [alertTypeId]);
+
   const closeFlyout = useCallback(() => {
     setAddFlyoutVisibility(false);
     setAlert(initialAlert);

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

@@ -43,6 +43,9 @@ export const AlertEdit = ({
   const [{ alert }, dispatch] = useReducer(alertReducer, { alert: initialAlert });
   const [isSaving, setIsSaving] = useState<boolean>(false);
   const [hasActionsDisabled, setHasActionsDisabled] = useState<boolean>(false);
+  const setAlert = (key: string, value: any) => {
+    dispatch({ command: { type: 'setAlert' }, payload: { key, value } });
+  };
 
   const {
     reloadAlerts,
@@ -55,6 +58,8 @@ export const AlertEdit = ({
 
   const closeFlyout = useCallback(() => {
     setEditFlyoutVisibility(false);
+    setAlert('alert', initialAlert);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [setEditFlyoutVisibility]);
 
   if (!editFlyoutVisible) {

x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/details.ts

@@ -197,6 +197,53 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
         const headingText = await pageObjects.alertDetailsUI.getHeadingText();
         expect(headingText).to.be(updatedAlertName);
       });
+
+      it('should reset alert when canceling an edit', async () => {
+        await pageObjects.common.navigateToApp('triggersActions');
+        const params = {
+          aggType: 'count',
+          termSize: 5,
+          thresholdComparator: '>',
+          timeWindowSize: 5,
+          timeWindowUnit: 'm',
+          groupBy: 'all',
+          threshold: [1000, 5000],
+          index: ['.kibana_1'],
+          timeField: 'alert',
+        };
+        const alert = await alerting.alerts.createAlertWithActions(
+          testRunUuid,
+          '.index-threshold',
+          params
+        );
+        // refresh to see alert
+        await browser.refresh();
+
+        await pageObjects.header.waitUntilLoadingHasFinished();
+
+        // Verify content
+        await testSubjects.existOrFail('alertsList');
+
+        // click on first alert
+        await pageObjects.triggersActionsUI.clickOnAlertInAlertsList(alert.name);
+
+        const editButton = await testSubjects.find('openEditAlertFlyoutButton');
+        await editButton.click();
+
+        const updatedAlertName = `Changed Alert Name ${uuid.v4()}`;
+        await testSubjects.setValue('alertNameInput', updatedAlertName, {
+          clearWithKeyboard: true,
+        });
+
+        await testSubjects.click('cancelSaveEditedAlertButton');
+        await find.waitForDeletedByCssSelector('[data-test-subj="cancelSaveEditedAlertButton"]');
+
+        await editButton.click();
+
+        const nameInputAfterCancel = await testSubjects.find('alertNameInput');
+        const textAfterCancel = await nameInputAfterCancel.getAttribute('value');
+        expect(textAfterCancel).to.eql(alert.name);
+      });
     });
 
     describe('View In App', function() {