[SECURITY SOLUTIONS] Bug case connector (#93104) (#93299)

* bring back case connector to design * disable connector sir in collection * missing to only create collection type * fix fields connector when you need to hide service-now sir
elastic · Mar 2, 2021 · a09a8ad · a09a8ad
1 parent ed0f8eb
commit a09a8ad
Show file tree

Hide file tree

Showing 22 changed files with 567 additions and 218 deletions.
diff --git a/x-pack/plugins/security_solution/public/cases/components/case_view/index.tsx b/x-pack/plugins/security_solution/public/cases/components/case_view/index.tsx
@@ -447,6 +447,9 @@ export const CaseComponent = React.memo<CaseProps>(
                   caseFields={caseData.connector.fields}
                   connectors={connectors}
                   disabled={!userCanCrud}
+                  hideConnectorServiceNowSir={
+                    subCaseId != null || caseData.type === CaseType.collection
+                  }
                   isLoading={isLoadingConnectors || (isLoading && updateKey === 'connector')}
                   onSubmit={onSubmitConnector}
                   selectedConnector={caseData.connector.id}

diff --git a/...ns/security_solution/public/cases/components/configure_cases/connectors_dropdown.test.tsx b/...ns/security_solution/public/cases/components/configure_cases/connectors_dropdown.test.tsx
@@ -34,22 +34,122 @@ describe('ConnectorsDropdown', () => {
   test('it formats the connectors correctly', () => {
     const selectProps = wrapper.find(EuiSuperSelect).props();
 
-    expect(selectProps.options).toEqual(
-      expect.arrayContaining([
-        expect.objectContaining({
-          value: 'none',
-          'data-test-subj': 'dropdown-connector-no-connector',
-        }),
-        expect.objectContaining({
-          value: 'servicenow-1',
-          'data-test-subj': 'dropdown-connector-servicenow-1',
-        }),
-        expect.objectContaining({
-          value: 'resilient-2',
-          'data-test-subj': 'dropdown-connector-resilient-2',
-        }),
-      ])
-    );
+    expect(selectProps.options).toMatchInlineSnapshot(`
+      Array [
+        Object {
+          "data-test-subj": "dropdown-connector-no-connector",
+          "inputDisplay": <EuiFlexGroup
+            alignItems="center"
+            gutterSize="none"
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <Styled(EuiIcon)
+                size="m"
+                type="minusInCircle"
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <span
+                data-test-subj="dropdown-connector-no-connector"
+              >
+                No connector selected
+              </span>
+            </EuiFlexItem>
+          </EuiFlexGroup>,
+          "value": "none",
+        },
+        Object {
+          "data-test-subj": "dropdown-connector-servicenow-1",
+          "inputDisplay": <EuiFlexGroup
+            alignItems="center"
+            gutterSize="none"
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <Styled(EuiIcon)
+                size="m"
+                type="test-file-stub"
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <span>
+                My Connector
+              </span>
+            </EuiFlexItem>
+          </EuiFlexGroup>,
+          "value": "servicenow-1",
+        },
+        Object {
+          "data-test-subj": "dropdown-connector-resilient-2",
+          "inputDisplay": <EuiFlexGroup
+            alignItems="center"
+            gutterSize="none"
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <Styled(EuiIcon)
+                size="m"
+                type="test-file-stub"
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <span>
+                My Connector 2
+              </span>
+            </EuiFlexItem>
+          </EuiFlexGroup>,
+          "value": "resilient-2",
+        },
+        Object {
+          "data-test-subj": "dropdown-connector-jira-1",
+          "inputDisplay": <EuiFlexGroup
+            alignItems="center"
+            gutterSize="none"
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <Styled(EuiIcon)
+                size="m"
+                type="test-file-stub"
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <span>
+                Jira
+              </span>
+            </EuiFlexItem>
+          </EuiFlexGroup>,
+          "value": "jira-1",
+        },
+        Object {
+          "data-test-subj": "dropdown-connector-servicenow-sir",
+          "inputDisplay": <EuiFlexGroup
+            alignItems="center"
+            gutterSize="none"
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <Styled(EuiIcon)
+                size="m"
+                type="test-file-stub"
+              />
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <span>
+                My Connector SIR
+              </span>
+            </EuiFlexItem>
+          </EuiFlexGroup>,
+          "value": "servicenow-sir",
+        },
+      ]
+    `);
   });
 
   test('it disables the dropdown', () => {
@@ -79,4 +179,25 @@ describe('ConnectorsDropdown', () => {
 
     expect(newWrapper.find('button span:not([data-euiicon-type])').text()).toEqual('My Connector');
   });
+
+  test('if the props hideConnectorServiceNowSir is true, the connector should not be part of the list of options  ', () => {
+    const newWrapper = mount(
+      <ConnectorsDropdown
+        {...props}
+        selectedConnector={'servicenow-1'}
+        hideConnectorServiceNowSir={true}
+      />,
+      {
+        wrappingComponent: TestProviders,
+      }
+    );
+    const selectProps = newWrapper.find(EuiSuperSelect).props();
+    const options = selectProps.options as Array<{ 'data-test-subj': string }>;
+    expect(
+      options.some((o) => o['data-test-subj'] === 'dropdown-connector-servicenow-1')
+    ).toBeTruthy();
+    expect(
+      options.some((o) => o['data-test-subj'] === 'dropdown-connector-servicenow-sir')
+    ).toBeFalsy();
+  });
 });
diff --git a/...plugins/security_solution/public/cases/components/configure_cases/connectors_dropdown.tsx b/...plugins/security_solution/public/cases/components/configure_cases/connectors_dropdown.tsx
@@ -9,6 +9,7 @@ import React, { useMemo } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSuperSelect } from '@elastic/eui';
 import styled from 'styled-components';
 
+import { ConnectorTypes } from '../../../../../case/common/api';
 import { ActionConnector } from '../../containers/configure/types';
 import { connectorsConfiguration } from '../connectors';
 import * as i18n from './translations';
@@ -20,6 +21,7 @@ export interface Props {
   onChange: (id: string) => void;
   selectedConnector: string;
   appendAddConnectorButton?: boolean;
+  hideConnectorServiceNowSir?: boolean;
 }
 
 const ICON_SIZE = 'm';
@@ -61,29 +63,36 @@ const ConnectorsDropdownComponent: React.FC<Props> = ({
   onChange,
   selectedConnector,
   appendAddConnectorButton = false,
+  hideConnectorServiceNowSir = false,
 }) => {
   const connectorsAsOptions = useMemo(() => {
     const connectorsFormatted = connectors.reduce(
-      (acc, connector) => [
-        ...acc,
-        {
-          value: connector.id,
-          inputDisplay: (
-            <EuiFlexGroup gutterSize="none" alignItems="center">
-              <EuiFlexItem grow={false}>
-                <EuiIconExtended
-                  type={connectorsConfiguration[connector.actionTypeId]?.logo ?? ''}
-                  size={ICON_SIZE}
-                />
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <span>{connector.name}</span>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          ),
-          'data-test-subj': `dropdown-connector-${connector.id}`,
-        },
-      ],
+      (acc, connector) => {
+        if (hideConnectorServiceNowSir && connector.actionTypeId === ConnectorTypes.serviceNowSIR) {
+          return acc;
+        }
+
+        return [
+          ...acc,
+          {
+            value: connector.id,
+            inputDisplay: (
+              <EuiFlexGroup gutterSize="none" alignItems="center">
+                <EuiFlexItem grow={false}>
+                  <EuiIconExtended
+                    type={connectorsConfiguration[connector.actionTypeId]?.logo ?? ''}
+                    size={ICON_SIZE}
+                  />
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <span>{connector.name}</span>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            ),
+            'data-test-subj': `dropdown-connector-${connector.id}`,
+          },
+        ];
+      },
       [noConnectorOption]
     );
 

diff --git a/x-pack/plugins/security_solution/public/cases/components/connector_selector/form.tsx b/x-pack/plugins/security_solution/public/cases/components/connector_selector/form.tsx
@@ -22,6 +22,7 @@ interface ConnectorSelectorProps {
   isEdit: boolean;
   isLoading: boolean;
   handleChange?: (newValue: string) => void;
+  hideConnectorServiceNowSir?: boolean;
 }
 export const ConnectorSelector = ({
   connectors,
@@ -32,6 +33,7 @@ export const ConnectorSelector = ({
   isEdit = true,
   isLoading = false,
   handleChange,
+  hideConnectorServiceNowSir = false,
 }: ConnectorSelectorProps) => {
   const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
   const onChange = useCallback(
@@ -58,6 +60,7 @@ export const ConnectorSelector = ({
       <ConnectorsDropdown
         connectors={connectors}
         disabled={disabled}
+        hideConnectorServiceNowSir={hideConnectorServiceNowSir}
         isLoading={isLoading}
         onChange={onChange}
         selectedConnector={isEmpty(field.value) ? 'none' : field.value}

diff --git a/x-pack/plugins/security_solution/public/cases/components/connectors/case/alert_fields.tsx b/x-pack/plugins/security_solution/public/cases/components/connectors/case/alert_fields.tsx
@@ -9,7 +9,7 @@
 
 import React, { useCallback, useEffect, useState } from 'react';
 import styled from 'styled-components';
-import { EuiCallOut } from '@elastic/eui';
+import { EuiCallOut, EuiSpacer } from '@elastic/eui';
 
 import { ActionParamsProps } from '../../../../../../triggers_actions_ui/public/types';
 import { CommentType } from '../../../../../../case/common/api';
@@ -21,13 +21,15 @@ import * as i18n from './translations';
 
 const Container = styled.div`
   ${({ theme }) => `
-    margin-top: ${theme.eui?.euiSize ?? '16px'};
+    padding:  ${theme.eui?.euiSizeS ?? '8px'} ${theme.eui?.euiSizeL ?? '24px'} ${
+    theme.eui?.euiSizeL ?? '24px'
+  } ${theme.eui?.euiSizeL ?? '24px'};
   `}
 `;
 
 const defaultAlertComment = {
   type: CommentType.generatedAlert,
-  alerts: `[{{#context.alerts}}{"_id": "{{_id}}", "_index": "{{_index}}", "ruleId": "{{rule.id}}", "ruleName": "{{rule.name}}"}__SEPARATOR__{{/context.alerts}}]`,
+  alerts: `[{{#context.alerts}}{"_id": "{{_id}}", "_index": "{{_index}}", "ruleId": "{{signal.rule.id}}", "ruleName": "{{signal.rule.name}}"}__SEPARATOR__{{/context.alerts}}]`,
 };
 
 const CaseParamsFields: React.FunctionComponent<ActionParamsProps<CaseActionParams>> = ({
@@ -90,12 +92,13 @@ const CaseParamsFields: React.FunctionComponent<ActionParamsProps<CaseActionPara
   ]);
 
   return (
-    <>
-      <EuiCallOut size="s" title={i18n.CASE_CONNECTOR_CALL_OUT_INFO} iconType="iInCircle" />
-      <Container>
-        <ExistingCase onCaseChanged={onCaseChanged} selectedCase={selectedCase} />
-      </Container>
-    </>
+    <Container>
+      <ExistingCase onCaseChanged={onCaseChanged} selectedCase={selectedCase} />
+      <EuiSpacer size="m" />
+      <EuiCallOut size="s" title={i18n.CASE_CONNECTOR_CALL_OUT_TITLE} iconType="iInCircle">
+        <p>{i18n.CASE_CONNECTOR_CALL_OUT_MSG}</p>
+      </EuiCallOut>
+    </Container>
   );
 };