[SIEM][CASE] Configuration pages UI redesign

x-pack/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx

@@ -16,13 +16,17 @@ describe('Connectors', () => {
   let wrapper: ReactWrapper;
   const onChangeConnector = jest.fn();
   const handleShowAddFlyout = jest.fn();
+  const handleShowEditFlyout = jest.fn();
+
   const props: Props = {
     disabled: false,
+    updateConnectorDisabled: false,
     connectors,
     selectedConnector: 'none',
     isLoading: false,
     onChangeConnector,
     handleShowAddFlyout,
+    handleShowEditFlyout,
   };
 
   beforeAll(() => {
@@ -87,4 +91,16 @@ describe('Connectors', () => {
     expect(onChangeConnector).toHaveBeenCalled();
     expect(onChangeConnector).toHaveBeenCalledWith('none');
   });
+
+  test('the text of the update button is shown correctly', () => {
+    const newWrapper = mount(<Connectors {...props} selectedConnector={'servicenow-1'} />, {
+      wrappingComponent: TestProviders,
+    });
+
+    expect(
+      newWrapper
+        .find('button[data-test-subj="case-configure-update-selected-connector-button"]')
+        .text()
+    ).toBe('Update My Connector');
+  });
 });

x-pack/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx

@@ -4,13 +4,14 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   EuiDescribedFormGroup,
   EuiFormRow,
   EuiFlexGroup,
   EuiFlexItem,
   EuiLink,
+  EuiButton,
 } from '@elastic/eui';
 
 import styled from 'styled-components';
@@ -28,35 +29,55 @@ const EuiFormRowExtended = styled(EuiFormRow)`
   }
 `;
 
+const AddConnectorEuiFormRow = styled(EuiFormRow)`
+  width: 100%;
+  max-width: 100%;
+  text-align: right;
+`;
+
 export interface Props {
   connectors: Connector[];
   disabled: boolean;
   isLoading: boolean;
+  updateConnectorDisabled: boolean;
   onChangeConnector: (id: string) => void;
   selectedConnector: string;
   handleShowAddFlyout: () => void;
+  handleShowEditFlyout: () => void;
 }
 const ConnectorsComponent: React.FC<Props> = ({
   connectors,
-  disabled,
   isLoading,
+  disabled,
+  updateConnectorDisabled,
   onChangeConnector,
   selectedConnector,
   handleShowAddFlyout,
+  handleShowEditFlyout,
 }) => {
-  const dropDownLabel = (
-    <EuiFlexGroup justifyContent="spaceBetween">
-      <EuiFlexItem grow={false}>{i18n.INCIDENT_MANAGEMENT_SYSTEM_LABEL}</EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiLink
-          disabled={disabled}
-          onClick={handleShowAddFlyout}
-          data-test-subj="case-configure-add-connector-button"
-        >
-          {i18n.ADD_NEW_CONNECTOR}
-        </EuiLink>
-      </EuiFlexItem>
-    </EuiFlexGroup>
+  const connectorsName = useMemo(
+    () => connectors.find(c => c.id === selectedConnector)?.name ?? 'none',
+    [connectors, selectedConnector]
+  );
+
+  const dropDownLabel = useMemo(
+    () => (
+      <EuiFlexGroup justifyContent="spaceBetween">
+        <EuiFlexItem grow={false}>{i18n.INCIDENT_MANAGEMENT_SYSTEM_LABEL}</EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          {connectorsName !== 'none' && (
+            <EuiLink
+              disabled={updateConnectorDisabled}
+              onClick={handleShowEditFlyout}
+              data-test-subj="case-configure-update-selected-connector-button"
+            >
+              {i18n.UPDATE_SELECTED_CONNECTOR(connectorsName)}
+            </EuiLink>
+          )}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    ),
+    [connectorsName]
   );
 
   return (
@@ -81,6 +102,16 @@ const ConnectorsComponent: React.FC<Props> = ({
             data-test-subj="case-connectors-dropdown"
           />
         </EuiFormRowExtended>
+        <AddConnectorEuiFormRow>
+          <EuiButton
+            fill
+            disabled={disabled}
+            onClick={handleShowAddFlyout}
+            data-test-subj="case-configure-add-connector-button"
+          >
+            {i18n.ADD_NEW_CONNECTOR}
+          </EuiButton>
+        </AddConnectorEuiFormRow>
       </EuiDescribedFormGroup>
     </>
   );