[Actions UI] Fixed Connectors edit flyout retains state after being closed (#71911)

* [Actions UI] Fixed Connectors edit flyout retains state after being closed

* Fixed failing test

Author: YulNaumenko

x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.tsx

@@ -51,11 +51,20 @@ export const ConnectorEditFlyout = ({
     consumer,
   } = useActionsConnectorsContext();
   const canSave = hasSaveActionsCapability(capabilities);
-  const closeFlyout = useCallback(() => setEditFlyoutVisibility(false), [setEditFlyoutVisibility]);
+
   const [{ connector }, dispatch] = useReducer(connectorReducer, {
     connector: { ...initialConnector, secrets: {} },
   });
   const [isSaving, setIsSaving] = useState<boolean>(false);
+  const setConnector = (key: string, value: any) => {
+    dispatch({ command: { type: 'setConnector' }, payload: { key, value } });
+  };
+
+  const closeFlyout = useCallback(() => {
+    setEditFlyoutVisibility(false);
+    setConnector('connector', { ...initialConnector, secrets: {} });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [setEditFlyoutVisibility]);
 
   if (!editFlyoutVisible) {
     return null;
@@ -213,7 +222,7 @@ export const ConnectorEditFlyout = ({
       <EuiFlyoutFooter>
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty onClick={closeFlyout}>
+            <EuiButtonEmpty onClick={closeFlyout} data-test-subj="cancelSaveEditedConnectorButton">
               {i18n.translate(
                 'xpack.triggersActionsUI.sections.editConnectorForm.cancelButtonLabel',
                 {

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

@@ -63,18 +63,7 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
     it('should edit a connector', async () => {
       const connectorName = generateUniqueKey();
       const updatedConnectorName = `${connectorName}updated`;
-
-      await pageObjects.triggersActionsUI.clickCreateConnectorButton();
-
-      await testSubjects.click('.slack-card');
-
-      await testSubjects.setValue('nameInput', connectorName);
-
-      await testSubjects.setValue('slackWebhookUrlInput', 'https://test');
-
-      await find.clickByCssSelector('[data-test-subj="saveNewActionButton"]:not(disabled)');
-
-      await pageObjects.common.closeToast();
+      await createConnector(connectorName);
 
       await pageObjects.triggersActionsUI.searchConnectors(connectorName);
 
@@ -103,19 +92,31 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       ]);
     });
 
-    it('should delete a connector', async () => {
-      async function createConnector(connectorName: string) {
-        await pageObjects.triggersActionsUI.clickCreateConnectorButton();
+    it('should reset connector when canceling an edit', async () => {
+      const connectorName = generateUniqueKey();
+      await createConnector(connectorName);
+      await pageObjects.triggersActionsUI.searchConnectors(connectorName);
+
+      const searchResultsBeforeEdit = await pageObjects.triggersActionsUI.getConnectorsList();
+      expect(searchResultsBeforeEdit.length).to.eql(1);
 
-        await testSubjects.click('.slack-card');
+      await find.clickByCssSelector('[data-test-subj="connectorsTableCell-name"] button');
 
-        await testSubjects.setValue('nameInput', connectorName);
+      await testSubjects.setValue('nameInput', 'some test name to cancel');
+      await testSubjects.click('cancelSaveEditedConnectorButton');
 
-        await testSubjects.setValue('slackWebhookUrlInput', 'https://test');
+      await find.waitForDeletedByCssSelector('[data-test-subj="cancelSaveEditedConnectorButton"]');
 
-        await find.clickByCssSelector('[data-test-subj="saveNewActionButton"]:not(disabled)');
-        await pageObjects.common.closeToast();
-      }
+      await pageObjects.triggersActionsUI.searchConnectors(connectorName);
+
+      await find.clickByCssSelector('[data-test-subj="connectorsTableCell-name"] button');
+      const nameInputAfterCancel = await testSubjects.find('nameInput');
+      const textAfterCancel = await nameInputAfterCancel.getAttribute('value');
+      expect(textAfterCancel).to.eql(connectorName);
+      await testSubjects.click('euiFlyoutCloseButton');
+    });
+
+    it('should delete a connector', async () => {
       const connectorName = generateUniqueKey();
       await createConnector(connectorName);
 
@@ -141,19 +142,6 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
     });
 
     it('should bulk delete connectors', async () => {
-      async function createConnector(connectorName: string) {
-        await pageObjects.triggersActionsUI.clickCreateConnectorButton();
-
-        await testSubjects.click('.slack-card');
-
-        await testSubjects.setValue('nameInput', connectorName);
-
-        await testSubjects.setValue('slackWebhookUrlInput', 'https://test');
-
-        await find.clickByCssSelector('[data-test-subj="saveNewActionButton"]:not(disabled)');
-        await pageObjects.common.closeToast();
-      }
-
       const connectorName = generateUniqueKey();
       await createConnector(connectorName);
 
@@ -208,4 +196,17 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
       expect(await testSubjects.exists('saveEditedActionButton')).to.be(false);
     });
   });
+
+  async function createConnector(connectorName: string) {
+    await pageObjects.triggersActionsUI.clickCreateConnectorButton();
+
+    await testSubjects.click('.slack-card');
+
+    await testSubjects.setValue('nameInput', connectorName);
+
+    await testSubjects.setValue('slackWebhookUrlInput', 'https://test');
+
+    await find.clickByCssSelector('[data-test-subj="saveNewActionButton"]:not(disabled)');
+    await pageObjects.common.closeToast();
+  }
 };