[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 <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Oct 16, 2020 · 4af7553 · 4af7553
1 parent d25c84f
commit 4af7553
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 8 deletions.
diff --git a/...ctions_ui/public/application/sections/action_connector_form/connector_add_flyout.test.tsx b/...ctions_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 ', () => {

diff --git a/...ers_actions_ui/public/application/sections/action_connector_form/connector_add_flyout.tsx b/...ers_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">

diff --git a/x-pack/test/functional_with_es_ssl/apps/triggers_actions_ui/connectors.ts b/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);