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

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)))';

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,

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<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}
                 />

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<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');
+  });
 });

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<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>

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

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

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

@@ -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,

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<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}