Skip to content

Commit

Permalink
[SECURITY SOLUTIONS] Bug case connector (#93104) (#93299)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
XavierM authored Mar 2, 2021
1 parent ed0f8eb commit a09a8ad
Show file tree
Hide file tree
Showing 22 changed files with 567 additions and 218 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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();
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -20,6 +21,7 @@ export interface Props {
onChange: (id: string) => void;
selectedConnector: string;
appendAddConnectorButton?: boolean;
hideConnectorServiceNowSir?: boolean;
}

const ICON_SIZE = 'm';
Expand Down Expand Up @@ -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]
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ interface ConnectorSelectorProps {
isEdit: boolean;
isLoading: boolean;
handleChange?: (newValue: string) => void;
hideConnectorServiceNowSir?: boolean;
}
export const ConnectorSelector = ({
connectors,
Expand All @@ -32,6 +33,7 @@ export const ConnectorSelector = ({
isEdit = true,
isLoading = false,
handleChange,
hideConnectorServiceNowSir = false,
}: ConnectorSelectorProps) => {
const { isInvalid, errorMessage } = getFieldValidityAndErrorMessage(field);
const onChange = useCallback(
Expand All @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>> = ({
Expand Down Expand Up @@ -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>
);
};

Expand Down
Loading

0 comments on commit a09a8ad

Please sign in to comment.