added Run button in connector list and Save & test button in creation

elastic · Sep 16, 2020 · e86c660 · e86c660
1 parent 45a2dd5
commit e86c660
Show file tree

Hide file tree

Showing 5 changed files with 168 additions and 86 deletions.
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/context/actions_connectors_context.tsx b/x-pack/plugins/triggers_actions_ui/public/application/context/actions_connectors_context.tsx
@@ -6,7 +6,7 @@
 
 import React, { createContext, useContext } from 'react';
 import { HttpSetup, ToastsApi, ApplicationStart, DocLinksStart } from 'kibana/public';
-import { ActionTypeModel } from '../../types';
+import { ActionTypeModel, ActionConnector } from '../../types';
 import { TypeRegistry } from '../type_registry';
 
 export interface ActionsConnectorsContextValue {
@@ -17,7 +17,7 @@ export interface ActionsConnectorsContextValue {
     'get$' | 'add' | 'remove' | 'addSuccess' | 'addWarning' | 'addDanger' | 'addError'
   >;
   capabilities: ApplicationStart['capabilities'];
-  reloadConnectors?: () => Promise<void>;
+  reloadConnectors?: () => Promise<ActionConnector[] | void>;
   docLinks: DocLinksStart;
   consumer?: string;
 }

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
@@ -37,12 +37,14 @@ export interface ConnectorAddFlyoutProps {
   addFlyoutVisible: boolean;
   setAddFlyoutVisibility: React.Dispatch<React.SetStateAction<boolean>>;
   actionTypes?: ActionType[];
+  onTestConnector: (connector: ActionConnector) => void;
 }
 
 export const ConnectorAddFlyout = ({
   addFlyoutVisible,
   setAddFlyoutVisibility,
   actionTypes,
+  onTestConnector,
 }: ConnectorAddFlyoutProps) => {
   let hasErrors = false;
   const {
@@ -153,6 +155,19 @@ export const ConnectorAddFlyout = ({
         return undefined;
       });
 
+  const onSaveClicked = async () => {
+    setIsSaving(true);
+    const savedAction = await onActionConnectorSave();
+    setIsSaving(false);
+    if (savedAction) {
+      closeFlyout();
+      if (reloadConnectors) {
+        await reloadConnectors();
+      }
+    }
+    return savedAction;
+  };
+
   return (
     <EuiFlyout onClose={closeFlyout} aria-labelledby="flyoutActionAddTitle" size="m">
       <EuiFlyoutHeader hasBorder>
@@ -245,35 +260,50 @@ export const ConnectorAddFlyout = ({
               )}
             </EuiButtonEmpty>
           </EuiFlexItem>
-          {canSave && actionTypeModel && actionType ? (
-            <EuiFlexItem grow={false}>
-              <EuiButton
-                fill
-                color="secondary"
-                data-test-subj="saveNewActionButton"
-                type="submit"
-                iconType="check"
-                isDisabled={hasErrors}
-                isLoading={isSaving}
-                onClick={async () => {
-                  setIsSaving(true);
-                  const savedAction = await onActionConnectorSave();
-                  setIsSaving(false);
-                  if (savedAction) {
-                    closeFlyout();
-                    if (reloadConnectors) {
-                      reloadConnectors();
-                    }
-                  }
-                }}
-              >
-                <FormattedMessage
-                  id="xpack.triggersActionsUI.sections.actionConnectorAdd.saveButtonLabel"
-                  defaultMessage="Save"
-                />
-              </EuiButton>
-            </EuiFlexItem>
-          ) : null}
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup justifyContent="spaceBetween">
+              {canSave && actionTypeModel && actionType ? (
+                <Fragment>
+                  <EuiFlexItem grow={false}>
+                    <EuiButton
+                      color="secondary"
+                      data-test-subj="saveAndTestNewActionButton"
+                      type="submit"
+                      isDisabled={hasErrors}
+                      isLoading={isSaving}
+                      onClick={async () => {
+                        const savedConnector = await onSaveClicked();
+                        if (savedConnector) {
+                          onTestConnector(savedConnector);
+                        }
+                      }}
+                    >
+                      <FormattedMessage
+                        id="xpack.triggersActionsUI.sections.actionConnectorAdd.saveAndTestButtonLabel"
+                        defaultMessage="Save & Test"
+                      />
+                    </EuiButton>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiButton
+                      fill
+                      color="secondary"
+                      data-test-subj="saveNewActionButton"
+                      type="submit"
+                      isDisabled={hasErrors}
+                      isLoading={isSaving}
+                      onClick={onSaveClicked}
+                    >
+                      <FormattedMessage
+                        id="xpack.triggersActionsUI.sections.actionConnectorAdd.saveButtonLabel"
+                        defaultMessage="Save"
+                      />
+                    </EuiButton>
+                  </EuiFlexItem>
+                </Fragment>
+              ) : null}
+            </EuiFlexGroup>
+          </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlyoutFooter>
     </EuiFlyout>

diff --git a/...s_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.scss b/...s_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.scss
@@ -1,3 +1,3 @@
 .connectorEditFlyoutTabs {
-  margin-bottom: '-25px';
+  margin-bottom: -25px;
 }
diff --git a/...rs_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.tsx b/...rs_actions_ui/public/application/sections/action_connector_form/connector_edit_flyout.tsx
@@ -26,7 +26,7 @@ import { i18n } from '@kbn/i18n';
 import { Option, none, some } from 'fp-ts/lib/Option';
 import { ActionConnectorForm, validateBaseProperties } from './action_connector_form';
 import { TestConnectorForm } from './test_connector_form';
-import { ActionConnectorTableItem, ActionConnector, IErrorObject } from '../../../types';
+import { ActionConnector, IErrorObject } from '../../../types';
 import { connectorReducer } from './connector_reducer';
 import { updateActionConnector, executeAction } from '../../lib/action_connector_api';
 import { hasSaveActionsCapability } from '../../lib/capabilities';
@@ -36,15 +36,22 @@ import { ActionTypeExecutorResult } from '../../../../../actions/common';
 import './connector_edit_flyout.scss';
 
 export interface ConnectorEditProps {
-  initialConnector: ActionConnectorTableItem;
+  initialConnector: ActionConnector;
   editFlyoutVisible: boolean;
   setEditFlyoutVisibility: React.Dispatch<React.SetStateAction<boolean>>;
+  tab?: EditConectorTabs;
+}
+
+export enum EditConectorTabs {
+  Configuration = 'configuration',
+  Test = 'test',
 }
 
 export const ConnectorEditFlyout = ({
   initialConnector,
   editFlyoutVisible,
   setEditFlyoutVisibility,
+  tab = EditConectorTabs.Configuration,
 }: ConnectorEditProps) => {
   const {
     http,
@@ -61,7 +68,7 @@ export const ConnectorEditFlyout = ({
     connector: { ...initialConnector, secrets: {} },
   });
   const [isSaving, setIsSaving] = useState<boolean>(false);
-  const [selectedTab, setTab] = useState<'config' | 'test'>('config');
+  const [selectedTab, setTab] = useState<EditConectorTabs>(tab);
 
   const [hasChanges, setHasChanges] = useState<boolean>(false);
   const setConnector = (key: string, value: any) => {
@@ -232,18 +239,18 @@ export const ConnectorEditFlyout = ({
         </EuiFlexGroup>
         <EuiTabs className="connectorEditFlyoutTabs">
           <EuiTab
-            onClick={() => setTab('config')}
+            onClick={() => setTab(EditConectorTabs.Configuration)}
             data-test-subj="configureConnectorTab"
-            isSelected={'config' === selectedTab}
+            isSelected={EditConectorTabs.Configuration === selectedTab}
           >
             {i18n.translate('xpack.triggersActionsUI.sections.editConnectorForm.tabText', {
               defaultMessage: 'Configuration',
             })}
           </EuiTab>
           <EuiTab
-            onClick={() => setTab('test')}
+            onClick={() => setTab(EditConectorTabs.Test)}
             data-test-subj="testConnectorTab"
-            isSelected={'test' === selectedTab}
+            isSelected={EditConectorTabs.Test === selectedTab}
           >
             {i18n.translate('xpack.triggersActionsUI.sections.testConnectorForm.tabText', {
               defaultMessage: 'Test',
@@ -252,7 +259,7 @@ export const ConnectorEditFlyout = ({
         </EuiTabs>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
-        {selectedTab === 'config' ? (
+        {selectedTab === EditConectorTabs.Configuration ? (
           !connector.isPreconfigured ? (
             <ActionConnectorForm
               connector={connector}