[Actions] Back Button on Add Connector Flyout (#80160) (#80878)

* Adding back button to add connector flyout

* Adding tests

* Adding tests

Co-authored-by: Kibana Machine <[email protected]>

Co-authored-by: Kibana Machine <[email protected]>

Author: ymao1

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

@@ -75,6 +75,8 @@ describe('connector_add_flyout', () => {
     );
     expect(wrapper.find('ActionTypeMenu')).toHaveLength(1);
     expect(wrapper.find(`[data-test-subj="${actionType.id}-card"]`).exists()).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="cancelButton"]').exists()).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="backButton"]').exists()).toBeFalsy();
   });
 
   it('renders banner with subscription links when gold features are disabled due to licensing ', () => {

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

@@ -251,14 +251,31 @@ export const ConnectorAddFlyout = ({
       <EuiFlyoutFooter>
         <EuiFlexGroup justifyContent="spaceBetween">
           <EuiFlexItem grow={false}>
-            <EuiButtonEmpty onClick={closeFlyout}>
-              {i18n.translate(
-                'xpack.triggersActionsUI.sections.actionConnectorAdd.cancelButtonLabel',
-                {
-                  defaultMessage: 'Cancel',
-                }
-              )}
-            </EuiButtonEmpty>
+            {!actionType ? (
+              <EuiButtonEmpty data-test-subj="cancelButton" onClick={closeFlyout}>
+                {i18n.translate(
+                  'xpack.triggersActionsUI.sections.actionConnectorAdd.cancelButtonLabel',
+                  {
+                    defaultMessage: 'Cancel',
+                  }
+                )}
+              </EuiButtonEmpty>
+            ) : (
+              <EuiButtonEmpty
+                data-test-subj="backButton"
+                onClick={() => {
+                  setActionType(undefined);
+                  setConnector(initialConnector);
+                }}
+              >
+                {i18n.translate(
+                  'xpack.triggersActionsUI.sections.actionConnectorAdd.backButtonLabel',
+                  {
+                    defaultMessage: 'Back',
+                  }
+                )}
+              </EuiButtonEmpty>
+            )}
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
             <EuiFlexGroup justifyContent="spaceBetween">

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

@@ -40,6 +40,10 @@ export default ({ getPageObjects, getService }: FtrProviderContext) => {
 
       await pageObjects.triggersActionsUI.clickCreateConnectorButton();
 
+      await testSubjects.click('.index-card');
+
+      await find.clickByCssSelector('[data-test-subj="backButton"]');
+
       await testSubjects.click('.slack-card');
 
       await testSubjects.setValue('nameInput', connectorName);