maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Cases] Fix action type naming on field mapping (#106695) (#106731)

Browse source
This commit is contained in:
Christos Nasikas 2021-07-26 20:06:32 +03:00 committed by GitHub
parent b5c3d85982
commit c49c4199b8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 54 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
x-pack/plugins/cases/public/components/configure_cases/__mock__/index.tsx
View file

@ -5,14 +5,16 @@
* 2.0.
*/
import { ConnectorTypes } from '../../../../common';
import { ActionTypeConnector, ConnectorTypes } from '../../../../common';
import { ActionConnector } from '../../../containers/configure/types';
import { UseConnectorsResponse } from '../../../containers/configure/use_connectors';
import { ReturnUseCaseConfigure } from '../../../containers/configure/use_configure';
import { UseActionTypesResponse } from '../../../containers/configure/use_action_types';
import { connectorsMock, actionTypesMock } from '../../../containers/configure/mock';
export { mappings } from '../../../containers/configure/mock';
export const connectors: ActionConnector[] = connectorsMock;
export const actionTypes: ActionTypeConnector[] = actionTypesMock;
export const searchURL =
'?timerange=(global:(linkTo:!(),timerange:(from:1585487656371,fromStr:now-24h,kind:relative,to:1585574056371,toStr:now)),timeline:(linkTo:!(),timerange:(from:1585227005527,kind:absolute,to:1585313405527)))';

3
x-pack/plugins/cases/public/components/configure_cases/connectors.test.tsx
View file

@ -11,7 +11,7 @@ import { mount, ReactWrapper } from 'enzyme';
import { Connectors, Props } from './connectors';
import { TestProviders } from '../../common/mock';
import { ConnectorsDropdown } from './connectors_dropdown';
import { connectors } from './__mock__';
import { connectors, actionTypes } from './__mock__';
import { ConnectorTypes } from '../../../common';
import { useKibana } from '../../common/lib/kibana';
@ -24,6 +24,7 @@ describe('Connectors', () => {
const handleShowEditFlyout = jest.fn();
const props: Props = {
actionTypes,
connectors,
disabled: false,
handleShowEditFlyout,

11
x-pack/plugins/cases/public/components/configure_cases/connectors.tsx
View file

@ -21,7 +21,7 @@ import * as i18n from './translations';
import { ActionConnector, CaseConnectorMapping } from '../../containers/configure/types';
import { Mapping } from './mapping';
import { ConnectorTypes } from '../../../common';
import { ActionTypeConnector, ConnectorTypes } from '../../../common';
const EuiFormRowExtended = styled(EuiFormRow)`
.euiFormRow__labelWrapper {
@ -32,6 +32,7 @@ const EuiFormRowExtended = styled(EuiFormRow)`
`;
export interface Props {
actionTypes: ActionTypeConnector[];
connectors: ActionConnector[];
disabled: boolean;
handleShowEditFlyout: () => void;
@ -42,6 +43,7 @@ export interface Props {
updateConnectorDisabled: boolean;
}
const ConnectorsComponent: React.FC<Props> = ({
actionTypes,
connectors,
disabled,
handleShowEditFlyout,
@ -56,6 +58,11 @@ const ConnectorsComponent: React.FC<Props> = ({
[connectors, selectedConnector.id]
);
const actionTypeName = useMemo(
() => actionTypes.find((c) => c.id === selectedConnector.type)?.name ?? 'Unknown',
[actionTypes, selectedConnector.type]
);
const dropDownLabel = useMemo(
() => (
<EuiFlexGroup justifyContent="spaceBetween">
@ -103,7 +110,7 @@ const ConnectorsComponent: React.FC<Props> = ({
{selectedConnector.type !== ConnectorTypes.none ? (
<EuiFlexItem grow={false}>
<Mapping
connectorActionTypeId={selectedConnector.type}
actionTypeName={actionTypeName}
isLoading={isLoading}
mappings={mappings}
/>

19
x-pack/plugins/cases/public/components/configure_cases/field_mapping.test.tsx
View file

@ -12,24 +12,16 @@ import { FieldMapping, FieldMappingProps } from './field_mapping';
import { mappings } from './__mock__';
import { TestProviders } from '../../common/mock';
import { FieldMappingRowStatic } from './field_mapping_row_static';
import { useKibana } from '../../common/lib/kibana';
jest.mock('../../common/lib/kibana');
const useKibanaMock = useKibana as jest.Mocked<typeof useKibana>;
describe('FieldMappingRow', () => {
let wrapper: ReactWrapper;
const props: FieldMappingProps = {
actionTypeName: 'ServiceNow ITSM',
isLoading: false,
mappings,
connectorActionTypeId: '.servicenow',
};
beforeAll(() => {
useKibanaMock().services.triggersActionsUi.actionTypeRegistry.get = jest.fn().mockReturnValue({
actionTypeTitle: '.servicenow',
iconClass: 'logoSecurity',
});
wrapper = mount(<FieldMapping {...props} />, { wrappingComponent: TestProviders });
});
@ -61,4 +53,13 @@ describe('FieldMappingRow', () => {
expect(row.prop('selectedThirdParty')).toEqual(mappings[index].target);
});
});
test('displays the label of the second column correctly', () => {
expect(
wrapper
.find('[data-test-subj="case-configure-field-mappings-second-col-label"]')
.first()
.text()
).toBe('ServiceNow ITSM field');
});
});

19
x-pack/plugins/cases/public/components/configure_cases/field_mapping.tsx
View file

@ -5,7 +5,7 @@
* 2.0.
*/
import React, { useMemo } from 'react';
import React from 'react';
import { EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
import styled from 'styled-components';
@ -13,7 +13,6 @@ import { FieldMappingRowStatic } from './field_mapping_row_static';
import * as i18n from './translations';
import { CaseConnectorMapping } from '../../containers/configure/types';
import { useKibana } from '../../common/lib/kibana';
const FieldRowWrapper = styled.div`
margin: 10px 0;
@ -21,22 +20,16 @@ const FieldRowWrapper = styled.div`
`;
export interface FieldMappingProps {
connectorActionTypeId: string;
actionTypeName: string;
isLoading: boolean;
mappings: CaseConnectorMapping[];
}
const FieldMappingComponent: React.FC<FieldMappingProps> = ({
connectorActionTypeId,
actionTypeName,
isLoading,
mappings,
}) => {
const { triggersActionsUi } = useKibana().services;
const selectedConnector = useMemo(
() => triggersActionsUi.actionTypeRegistry.get(connectorActionTypeId) ?? { fields: {} },
// eslint-disable-next-line react-hooks/exhaustive-deps
[connectorActionTypeId]
);
return mappings.length ? (
<EuiFlexGroup direction="column" gutterSize="none">
<EuiFlexItem>
@ -45,10 +38,8 @@ const FieldMappingComponent: React.FC<FieldMappingProps> = ({
<EuiFlexItem>
<span className="euiFormLabel">{i18n.FIELD_MAPPING_FIRST_COL}</span>
</EuiFlexItem>
<EuiFlexItem>
<span className="euiFormLabel">
{i18n.FIELD_MAPPING_SECOND_COL(selectedConnector.actionTypeTitle ?? '')}
</span>
<EuiFlexItem data-test-subj="case-configure-field-mappings-second-col-label">
<span className="euiFormLabel">{i18n.FIELD_MAPPING_SECOND_COL(actionTypeName)}</span>
</EuiFlexItem>
<EuiFlexItem>
<span className="euiFormLabel">{i18n.FIELD_MAPPING_THIRD_COL}</span>

1
x-pack/plugins/cases/public/components/configure_cases/index.tsx
View file

@ -205,6 +205,7 @@ const ConfigureCasesComponent: React.FC<Omit<ConfigureCasesProps, 'owner'>> = ({
</SectionWrapper>
<SectionWrapper>
<Connectors
actionTypes={actionTypes}
connectors={connectors ?? []}
disabled={persistLoading || isLoadingConnectors || !userCanCrud}
handleShowEditFlyout={onClickUpdateConnector}

29
x-pack/plugins/cases/public/components/configure_cases/mapping.test.tsx
View file

@ -11,26 +11,14 @@ import { mount } from 'enzyme';
import { TestProviders } from '../../common/mock';
import { Mapping, MappingProps } from './mapping';
import { mappings } from './__mock__';
import { useKibana } from '../../common/lib/kibana';
jest.mock('../../common/lib/kibana');
const useKibanaMock = useKibana as jest.Mocked<typeof useKibana>;
describe('Mapping', () => {
const props: MappingProps = {
connectorActionTypeId: '.servicenow',
actionTypeName: 'ServiceNow ITSM',
isLoading: false,
mappings,
};
beforeEach(() => {
jest.clearAllMocks();
useKibanaMock().services.triggersActionsUi.actionTypeRegistry.get = jest.fn().mockReturnValue({
actionTypeTitle: 'ServiceNow ITSM',
iconClass: 'logoSecurity',
});
});
test('it shows mapping form group', () => {
const wrapper = mount(<Mapping {...props} />, { wrappingComponent: TestProviders });
expect(wrapper.find('[data-test-subj="static-mappings"]').first().exists()).toBe(true);
@ -45,6 +33,21 @@ describe('Mapping', () => {
'short_description'
);
});
test('displays the title correctly', () => {
const wrapper = mount(<Mapping {...props} />, { wrappingComponent: TestProviders });
expect(wrapper.find('[data-test-subj="field-mapping-text"] h4').first().text()).toBe(
'ServiceNow ITSM field mappings'
);
});
test('displays the description correctly', () => {
const wrapper = mount(<Mapping {...props} />, { wrappingComponent: TestProviders });
expect(wrapper.find('[data-test-subj="field-mapping-desc"]').first().text()).toBe(
'Map Case fields to ServiceNow ITSM fields when pushing data to ServiceNow ITSM. Field mappings require an established connection to ServiceNow ITSM.'
);
});
test('displays connection warning when isLoading: false and mappings: []', () => {
const wrapper = mount(<Mapping {...{ ...props, mappings: [] }} />, {
wrappingComponent: TestProviders,

26
x-pack/plugins/cases/public/components/configure_cases/mapping.tsx
View file

@ -14,42 +14,32 @@ import * as i18n from './translations';
import { FieldMapping } from './field_mapping';
import { CaseConnectorMapping } from '../../containers/configure/types';
import { useKibana } from '../../common/lib/kibana';
export interface MappingProps {
connectorActionTypeId: string;
actionTypeName: string;
isLoading: boolean;
mappings: CaseConnectorMapping[];
}
const MappingComponent: React.FC<MappingProps> = ({
connectorActionTypeId,
isLoading,
mappings,
}) => {
const { triggersActionsUi } = useKibana().services;
const selectedConnector = useMemo(
() => triggersActionsUi.actionTypeRegistry.get(connectorActionTypeId),
[connectorActionTypeId, triggersActionsUi]
);
const MappingComponent: React.FC<MappingProps> = ({ actionTypeName, isLoading, mappings }) => {
const fieldMappingDesc: { desc: string; color: TextColor } = useMemo(
() =>
mappings.length > 0 || isLoading
? {
desc: i18n.FIELD_MAPPING_DESC(selectedConnector.actionTypeTitle ?? ''),
desc: i18n.FIELD_MAPPING_DESC(actionTypeName),
color: 'subdued',
}
: {
desc: i18n.FIELD_MAPPING_DESC_ERR(selectedConnector.actionTypeTitle ?? ''),
desc: i18n.FIELD_MAPPING_DESC_ERR(actionTypeName),
color: 'danger',
},
[isLoading, mappings.length, selectedConnector.actionTypeTitle]
[isLoading, mappings.length, actionTypeName]
);
return (
<EuiFlexGroup direction="column" gutterSize="none">
<EuiFlexItem grow={false}>
<EuiText size="xs">
<h4>{i18n.FIELD_MAPPING_TITLE(selectedConnector.actionTypeTitle ?? '')}</h4>
<EuiText size="xs" data-test-subj="field-mapping-text">
<h4>{i18n.FIELD_MAPPING_TITLE(actionTypeName)}</h4>
<EuiTextColor data-test-subj="field-mapping-desc" color={fieldMappingDesc.color}>
{fieldMappingDesc.desc}
</EuiTextColor>
@ -57,7 +47,7 @@ const MappingComponent: React.FC<MappingProps> = ({
</EuiFlexItem>
<EuiFlexItem grow={false}>
<FieldMapping
connectorActionTypeId={connectorActionTypeId}
actionTypeName={actionTypeName}
data-test-subj="case-mappings-field"
isLoading={isLoading}
mappings={mappings}