diff --git a/x-pack/plugins/cases/public/components/configure_cases/__mock__/index.tsx b/x-pack/plugins/cases/public/components/configure_cases/__mock__/index.tsx index 6f02a209f22d..983e32ba508f 100644 --- a/x-pack/plugins/cases/public/components/configure_cases/__mock__/index.tsx +++ b/x-pack/plugins/cases/public/components/configure_cases/__mock__/index.tsx @@ -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)))'; diff --git a/x-pack/plugins/cases/public/components/configure_cases/connectors.test.tsx b/x-pack/plugins/cases/public/components/configure_cases/connectors.test.tsx index e5b1c66d01e1..0bda6fe18509 100644 --- a/x-pack/plugins/cases/public/components/configure_cases/connectors.test.tsx +++ b/x-pack/plugins/cases/public/components/configure_cases/connectors.test.tsx @@ -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, diff --git a/x-pack/plugins/cases/public/components/configure_cases/connectors.tsx b/x-pack/plugins/cases/public/components/configure_cases/connectors.tsx index 45be02e05e1f..40f314a65388 100644 --- a/x-pack/plugins/cases/public/components/configure_cases/connectors.tsx +++ b/x-pack/plugins/cases/public/components/configure_cases/connectors.tsx @@ -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 = ({ + actionTypes, connectors, disabled, handleShowEditFlyout, @@ -56,6 +58,11 @@ const ConnectorsComponent: React.FC = ({ [connectors, selectedConnector.id] ); + const actionTypeName = useMemo( + () => actionTypes.find((c) => c.id === selectedConnector.type)?.name ?? 'Unknown', + [actionTypes, selectedConnector.type] + ); + const dropDownLabel = useMemo( () => ( @@ -103,7 +110,7 @@ const ConnectorsComponent: React.FC = ({ {selectedConnector.type !== ConnectorTypes.none ? ( diff --git a/x-pack/plugins/cases/public/components/configure_cases/field_mapping.test.tsx b/x-pack/plugins/cases/public/components/configure_cases/field_mapping.test.tsx index 73f48654b229..8d235f31277f 100644 --- a/x-pack/plugins/cases/public/components/configure_cases/field_mapping.test.tsx +++ b/x-pack/plugins/cases/public/components/configure_cases/field_mapping.test.tsx @@ -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; 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(, { 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'); + }); }); diff --git a/x-pack/plugins/cases/public/components/configure_cases/field_mapping.tsx b/x-pack/plugins/cases/public/components/configure_cases/field_mapping.tsx index b5ce978a1b48..fe99f718c140 100644 --- a/x-pack/plugins/cases/public/components/configure_cases/field_mapping.tsx +++ b/x-pack/plugins/cases/public/components/configure_cases/field_mapping.tsx @@ -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 = ({ - 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 ? ( @@ -45,10 +38,8 @@ const FieldMappingComponent: React.FC = ({ {i18n.FIELD_MAPPING_FIRST_COL} - - - {i18n.FIELD_MAPPING_SECOND_COL(selectedConnector.actionTypeTitle ?? '')} - + + {i18n.FIELD_MAPPING_SECOND_COL(actionTypeName)} {i18n.FIELD_MAPPING_THIRD_COL} diff --git a/x-pack/plugins/cases/public/components/configure_cases/index.tsx b/x-pack/plugins/cases/public/components/configure_cases/index.tsx index ac43ec05319a..d4e2ad36d495 100644 --- a/x-pack/plugins/cases/public/components/configure_cases/index.tsx +++ b/x-pack/plugins/cases/public/components/configure_cases/index.tsx @@ -205,6 +205,7 @@ const ConfigureCasesComponent: React.FC> = ({ ; 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(, { 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(, { 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(, { 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(, { wrappingComponent: TestProviders, diff --git a/x-pack/plugins/cases/public/components/configure_cases/mapping.tsx b/x-pack/plugins/cases/public/components/configure_cases/mapping.tsx index 16c02606ae90..eb14c22b900c 100644 --- a/x-pack/plugins/cases/public/components/configure_cases/mapping.tsx +++ b/x-pack/plugins/cases/public/components/configure_cases/mapping.tsx @@ -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 = ({ - connectorActionTypeId, - isLoading, - mappings, -}) => { - const { triggersActionsUi } = useKibana().services; - const selectedConnector = useMemo( - () => triggersActionsUi.actionTypeRegistry.get(connectorActionTypeId), - [connectorActionTypeId, triggersActionsUi] - ); +const MappingComponent: React.FC = ({ 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 ( - -

{i18n.FIELD_MAPPING_TITLE(selectedConnector.actionTypeTitle ?? '')}

+ +

{i18n.FIELD_MAPPING_TITLE(actionTypeName)}

{fieldMappingDesc.desc} @@ -57,7 +47,7 @@ const MappingComponent: React.FC = ({