[7.8] [SIEM][CASE] Fix configuration's page user experience (#66029) (#…

…66972)
elastic · May 19, 2020 · 3bdbbc8 · 3bdbbc8
1 parent 12a8769
commit 3bdbbc8
Show file tree

Hide file tree

Showing 16 changed files with 314 additions and 736 deletions.
diff --git a/x-pack/plugins/siem/cypress/integration/cases_connectors.spec.ts b/x-pack/plugins/siem/cypress/integration/cases_connectors.spec.ts
@@ -11,7 +11,6 @@ import { goToEditExternalConnection } from '../tasks/all_cases';
 import {
   addServiceNowConnector,
   openAddNewConnectorOption,
-  saveChanges,
   selectLastConnectorCreated,
 } from '../tasks/configure_cases';
 import { loginAndWaitForPageWithoutDateRange } from '../tasks/login';
@@ -37,7 +36,6 @@ describe('Cases connectors', () => {
     cy.get(TOASTER).should('have.text', "Created 'New connector'");
 
     selectLastConnectorCreated();
-    saveChanges();
 
     cy.wait('@saveConnector', { timeout: 10000 })
       .its('status')

diff --git a/x-pack/plugins/siem/cypress/screens/configure_cases.ts b/x-pack/plugins/siem/cypress/screens/configure_cases.ts
@@ -4,8 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export const ADD_NEW_CONNECTOR_OPTION_LINK =
-  '[data-test-subj="case-configure-add-connector-button"]';
+export const ADD_NEW_CONNECTOR_DROPDOWN_BUTTON =
+  '[data-test-subj="dropdown-connector-add-connector"]';
 
 export const CONNECTOR = (id: string) => {
   return `[data-test-subj='dropdown-connector-${id}']`;

diff --git a/x-pack/plugins/siem/cypress/tasks/configure_cases.ts b/x-pack/plugins/siem/cypress/tasks/configure_cases.ts
@@ -5,13 +5,12 @@
  */
 
 import {
-  ADD_NEW_CONNECTOR_OPTION_LINK,
+  ADD_NEW_CONNECTOR_DROPDOWN_BUTTON,
   CONNECTOR,
   CONNECTOR_NAME,
   CONNECTORS_DROPDOWN,
   PASSWORD,
   SAVE_BTN,
-  SAVE_CHANGES_BTN,
   SERVICE_NOW_CONNECTOR_CARD,
   URL,
   USERNAME,
@@ -33,15 +32,12 @@ export const openAddNewConnectorOption = () => {
   cy.get(MAIN_PAGE).then($page => {
     if ($page.find(SERVICE_NOW_CONNECTOR_CARD).length !== 1) {
       cy.wait(1000);
-      cy.get(ADD_NEW_CONNECTOR_OPTION_LINK).click({ force: true });
+      cy.get(CONNECTORS_DROPDOWN).click({ force: true });
+      cy.get(ADD_NEW_CONNECTOR_DROPDOWN_BUTTON).click();
     }
   });
 };
 
-export const saveChanges = () => {
-  cy.get(SAVE_CHANGES_BTN).click();
-};
-
 export const selectLastConnectorCreated = () => {
   cy.get(CONNECTORS_DROPDOWN).click({ force: true });
   cy.get('@createConnector')

diff --git a/x-pack/plugins/siem/public/pages/case/components/callout/index.test.tsx b/x-pack/plugins/siem/public/pages/case/components/callout/index.test.tsx
@@ -19,53 +19,79 @@ describe('CaseCallOut ', () => {
       ...defaultProps,
       message: 'we have one message',
     };
+
     const wrapper = mount(<CaseCallOut {...props} />);
+
     expect(
       wrapper
-        .find(`[data-test-subj="callout-message"]`)
+        .find(`[data-test-subj="callout-message-primary"]`)
         .last()
         .exists()
     ).toBeTruthy();
+  });
+
+  it('Renders multi message callout', () => {
+    const props = {
+      ...defaultProps,
+      messages: [
+        { ...defaultProps, description: <p>{'we have two messages'}</p> },
+        { ...defaultProps, description: <p>{'for real'}</p> },
+      ],
+    };
+    const wrapper = mount(<CaseCallOut {...props} />);
     expect(
       wrapper
-        .find(`[data-test-subj="callout-messages"]`)
+        .find(`[data-test-subj="callout-message-primary"]`)
         .last()
         .exists()
     ).toBeFalsy();
+    expect(
+      wrapper
+        .find(`[data-test-subj="callout-messages-primary"]`)
+        .last()
+        .exists()
+    ).toBeTruthy();
   });
-  it('Renders multi message callout', () => {
+
+  it('it shows the correct type of callouts', () => {
     const props = {
       ...defaultProps,
       messages: [
-        { ...defaultProps, description: <p>{'we have two messages'}</p> },
+        {
+          ...defaultProps,
+          description: <p>{'we have two messages'}</p>,
+          errorType: 'danger' as 'primary' | 'success' | 'warning' | 'danger',
+        },
         { ...defaultProps, description: <p>{'for real'}</p> },
       ],
     };
     const wrapper = mount(<CaseCallOut {...props} />);
     expect(
       wrapper
-        .find(`[data-test-subj="callout-message"]`)
+        .find(`[data-test-subj="callout-messages-danger"]`)
         .last()
         .exists()
-    ).toBeFalsy();
+    ).toBeTruthy();
+
     expect(
       wrapper
-        .find(`[data-test-subj="callout-messages"]`)
+        .find(`[data-test-subj="callout-messages-primary"]`)
         .last()
         .exists()
     ).toBeTruthy();
   });
+
   it('Dismisses callout', () => {
     const props = {
       ...defaultProps,
       message: 'we have one message',
     };
     const wrapper = mount(<CaseCallOut {...props} />);
-    expect(wrapper.find(`[data-test-subj="case-call-out"]`).exists()).toBeTruthy();
+    expect(wrapper.find(`[data-test-subj="case-call-out-primary"]`).exists()).toBeTruthy();
     wrapper
-      .find(`[data-test-subj="callout-dismiss"]`)
+      .find(`[data-test-subj="callout-dismiss-primary"]`)
       .last()
       .simulate('click');
-    expect(wrapper.find(`[data-test-subj="case-call-out"]`).exists()).toBeFalsy();
+    expect(wrapper.find(`[data-test-subj="case-call-out-primary"]`).exists()).toBeFalsy();
   });
 });
diff --git a/x-pack/plugins/siem/public/pages/case/components/callout/index.tsx b/x-pack/plugins/siem/public/pages/case/components/callout/index.tsx
@@ -12,28 +12,69 @@ import * as i18n from './translations';
 
 export * from './helpers';
 
+interface ErrorMessage {
+  title: string;
+  description: JSX.Element;
+  errorType?: 'primary' | 'success' | 'warning' | 'danger';
+}
+
 interface CaseCallOutProps {
   title: string;
   message?: string;
-  messages?: Array<{ title: string; description: JSX.Element }>;
+  messages?: ErrorMessage[];
 }
 
 const CaseCallOutComponent = ({ title, message, messages }: CaseCallOutProps) => {
   const [showCallOut, setShowCallOut] = useState(true);
   const handleCallOut = useCallback(() => setShowCallOut(false), [setShowCallOut]);
+  let callOutMessages = messages ?? [];
+
+  if (message) {
+    callOutMessages = [
+      ...callOutMessages,
+      {
+        title: '',
+        description: <p data-test-subj="callout-message-primary">{message}</p>,
+        errorType: 'primary',
+      },
+    ];
+  }
+
+  const groupedErrorMessages = callOutMessages.reduce((acc, currentMessage: ErrorMessage) => {
+    const key = currentMessage.errorType == null ? 'primary' : currentMessage.errorType;
+    return {
+      ...acc,
+      [key]: [...(acc[key] || []), currentMessage],
+    };
+  }, {} as { [key in NonNullable<ErrorMessage['errorType']>]: ErrorMessage[] });
 
   return showCallOut ? (
     <>
-      <EuiCallOut title={title} color="primary" iconType="gear" data-test-subj="case-call-out">
-        {!isEmpty(messages) && (
-          <EuiDescriptionList data-test-subj="callout-messages" listItems={messages} />
-        )}
-        {!isEmpty(message) && <p data-test-subj="callout-message">{message}</p>}
-        <EuiButton data-test-subj="callout-dismiss" color="primary" onClick={handleCallOut}>
-          {i18n.DISMISS_CALLOUT}
-        </EuiButton>
-      </EuiCallOut>
-      <EuiSpacer />
+      {(Object.keys(groupedErrorMessages) as Array<keyof ErrorMessage['errorType']>).map(key => (
+        <React.Fragment key={key}>
+          <EuiCallOut
+            title={title}
+            color={key}
+            iconType="gear"
+            data-test-subj={`case-call-out-${key}`}
+          >
+            {!isEmpty(groupedErrorMessages[key]) && (
+              <EuiDescriptionList
+                data-test-subj={`callout-messages-${key}`}
+                listItems={groupedErrorMessages[key]}
+              />
+            )}
+            <EuiButton
+              data-test-subj={`callout-dismiss-${key}`}
+              color="primary"
+              onClick={handleCallOut}
+            >
+              {i18n.DISMISS_CALLOUT}
+            </EuiButton>
+          </EuiCallOut>
+          <EuiSpacer />
+        </React.Fragment>
+      ))}
     </>
   ) : null;
 };

diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx b/x-pack/plugins/siem/public/pages/case/components/configure_cases/connectors.test.tsx
@@ -15,7 +15,6 @@ import { connectors } from './__mock__';
 describe('Connectors', () => {
   let wrapper: ReactWrapper;
   const onChangeConnector = jest.fn();
-  const handleShowAddFlyout = jest.fn();
   const handleShowEditFlyout = jest.fn();
 
   const props: Props = {
@@ -25,7 +24,6 @@ describe('Connectors', () => {
     selectedConnector: 'none',
     isLoading: false,
     onChangeConnector,
-    handleShowAddFlyout,
     handleShowEditFlyout,
   };
 
@@ -92,6 +90,15 @@ describe('Connectors', () => {
     expect(onChangeConnector).toHaveBeenCalledWith('none');
   });
 
+  test('it shows the add connector button', () => {
+    wrapper.find('button[data-test-subj="dropdown-connectors"]').simulate('click');
+    wrapper.update();
+
+    expect(
+      wrapper.find('button[data-test-subj="dropdown-connector-add-connector"]').exists()
+    ).toBeTruthy();
+  });
+
   test('the text of the update button is shown correctly', () => {
     const newWrapper = mount(<Connectors {...props} selectedConnector={'servicenow-1'} />, {
       wrappingComponent: TestProviders,

diff --git a/x-pack/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx b/x-pack/plugins/siem/public/pages/case/components/configure_cases/connectors.tsx
@@ -11,7 +11,6 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiLink,
-  EuiButton,
 } from '@elastic/eui';
 
 import styled from 'styled-components';
@@ -29,20 +28,13 @@ 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> = ({
@@ -52,7 +44,6 @@ const ConnectorsComponent: React.FC<Props> = ({
   updateConnectorDisabled,
   onChangeConnector,
   selectedConnector,
-  handleShowAddFlyout,
   handleShowEditFlyout,
 }) => {
   const connectorsName = useMemo(
@@ -77,7 +68,7 @@ const ConnectorsComponent: React.FC<Props> = ({
         </EuiFlexItem>
       </EuiFlexGroup>
     ),
-    [connectorsName]
+    [connectorsName, updateConnectorDisabled]
   );
 
   return (
@@ -100,18 +91,9 @@ const ConnectorsComponent: React.FC<Props> = ({
             isLoading={isLoading}
             onChange={onChangeConnector}
             data-test-subj="case-connectors-dropdown"
+            appendAddConnectorButton={true}
           />
         </EuiFormRowExtended>
-        <AddConnectorEuiFormRow>
-          <EuiButton
-            fill
-            disabled={disabled}
-            onClick={handleShowAddFlyout}
-            data-test-subj="case-configure-add-connector-button"
-          >
-            {i18n.ADD_NEW_CONNECTOR}
-          </EuiButton>
-        </AddConnectorEuiFormRow>
       </EuiDescribedFormGroup>
     </>
   );