design changes

Author: gmmorris

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

@@ -0,0 +1,3 @@
+.connectorEditFlyoutTabs {
+  margin-bottom: '-25px';
+}

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

@@ -20,7 +20,6 @@ import {
   EuiText,
   EuiLink,
   EuiTabs,
-  EuiSpacer,
   EuiTab,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -34,6 +33,7 @@ import { hasSaveActionsCapability } from '../../lib/capabilities';
 import { useActionsConnectorsContext } from '../../context/actions_connectors_context';
 import { PLUGIN } from '../../constants/plugin';
 import { ActionTypeExecutorResult } from '../../../../../actions/common';
+import './connector_edit_flyout.scss';
 
 export interface ConnectorEditProps {
   initialConnector: ActionConnectorTableItem;
@@ -230,16 +230,14 @@ export const ConnectorEditFlyout = ({
           ) : null}
           <EuiFlexItem>{flyoutTitle}</EuiFlexItem>
         </EuiFlexGroup>
-      </EuiFlyoutHeader>
-      <EuiFlyoutBody>
-        <EuiTabs>
+        <EuiTabs className="connectorEditFlyoutTabs">
           <EuiTab
             onClick={() => setTab('config')}
             data-test-subj="configureConnectorTab"
             isSelected={'config' === selectedTab}
           >
             {i18n.translate('xpack.triggersActionsUI.sections.editConnectorForm.tabText', {
-              defaultMessage: 'configuration',
+              defaultMessage: 'Configuration',
             })}
           </EuiTab>
           <EuiTab
@@ -248,11 +246,12 @@ export const ConnectorEditFlyout = ({
             isSelected={'test' === selectedTab}
           >
             {i18n.translate('xpack.triggersActionsUI.sections.testConnectorForm.tabText', {
-              defaultMessage: 'test',
+              defaultMessage: 'Test',
             })}
           </EuiTab>
         </EuiTabs>
-        <EuiSpacer size="l" />
+      </EuiFlyoutHeader>
+      <EuiFlyoutBody>
         {selectedTab === 'config' ? (
           !connector.isPreconfigured ? (
             <ActionConnectorForm
@@ -325,7 +324,6 @@ export const ConnectorEditFlyout = ({
                     <EuiButton
                       color="secondary"
                       data-test-subj="saveEditedActionButton"
-                      iconType="check"
                       isDisabled={hasErrorsInConnectorConfig || !hasChanges}
                       isLoading={isSaving || isExecutingAction}
                       onClick={async () => {
@@ -344,7 +342,6 @@ export const ConnectorEditFlyout = ({
                       color="secondary"
                       data-test-subj="saveAndCloseEditedActionButton"
                       type="submit"
-                      iconType="check"
                       isDisabled={hasErrorsInConnectorConfig || !hasChanges}
                       isLoading={isSaving || isExecutingAction}
                       onClick={async () => {

x-pack/plugins/triggers_actions_ui/public/application/sections/action_connector_form/test_connector_form.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, { Suspense } from 'react';
+import React, { Fragment, Suspense } from 'react';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -13,6 +13,7 @@ import {
   EuiLoadingSpinner,
   EuiDescriptionList,
   EuiCallOut,
+  EuiSpacer,
 } from '@elastic/eui';
 import { Option, map, getOrElse } from 'fp-ts/lib/Option';
 import { pipe } from 'fp-ts/lib/pipeable';
@@ -85,36 +86,35 @@ export const TestConnectorForm = ({
     {
       title: 'Execute the example action',
       children: (
-        <EuiFlexGroup justifyContent="spaceBetween">
-          <EuiFlexItem grow={false}>
-            <EuiText>
-              <EuiButton
-                iconType={'play'}
-                isLoading={isExecutingAction}
-                isDisabled={!executeEnabled || hasErrors || isExecutingAction}
-                data-test-subj="executeActionButton"
-                onClick={onExecutAction}
-              >
-                <FormattedMessage
-                  defaultMessage="Execute"
-                  id="xpack.triggersActionsUI.sections.testConnectorForm.executeTestButton"
-                />
-              </EuiButton>
-            </EuiText>
-          </EuiFlexItem>
+        <Fragment>
           {executeEnabled ? null : (
-            <EuiFlexItem>
-              <EuiCallOut iconType="alert" size="s" color="warning">
+            <Fragment>
+              <EuiCallOut iconType="alert" color="warning">
                 <p>
                   <FormattedMessage
                     defaultMessage="Unsaved changes must be saved before the connector can be tested"
                     id="xpack.triggersActionsUI.sections.testConnectorForm.executeTestDisabled"
                   />
                 </p>
               </EuiCallOut>
-            </EuiFlexItem>
+              <EuiSpacer size="s" />
+            </Fragment>
           )}
-        </EuiFlexGroup>
+          <EuiText>
+            <EuiButton
+              iconType={'play'}
+              isLoading={isExecutingAction}
+              isDisabled={!executeEnabled || hasErrors || isExecutingAction}
+              data-test-subj="executeActionButton"
+              onClick={onExecutAction}
+            >
+              <FormattedMessage
+                defaultMessage="Execute"
+                id="xpack.triggersActionsUI.sections.testConnectorForm.executeTestButton"
+              />
+            </EuiButton>
+          </EuiText>
+        </Fragment>
       ),
     },
     {
@@ -146,7 +146,7 @@ const AwaitingExecution = () => (
       }
     )}
     data-test-subj="executionAwaiting"
-    iconType="search"
+    iconType="iInCircle"
   >
     <p>
       <FormattedMessage
@@ -168,7 +168,7 @@ const SuccessfulExecution = () => (
     )}
     color="success"
     data-test-subj="executionSuccessfulResult"
-    iconType="play"
+    iconType="check"
   >
     <p>
       <FormattedMessage