[7.x] [Cases] Get connector's information from actionsTypeRegistry (#101279)

x-pack/plugins/cases/public/common/lib/kibana/kibana_react.mock.ts

@@ -12,9 +12,15 @@ import { coreMock } from '../../../../../../../src/core/public/mocks';
 import { KibanaContextProvider } from '../../../../../../../src/plugins/kibana_react/public';
 import { StartServices } from '../../../types';
 import { EuiTheme } from '../../../../../../../src/plugins/kibana_react/common';
+import { securityMock } from '../../../../../security/public/mocks';
+import { triggersActionsUiMock } from '../../../../../triggers_actions_ui/public/mocks';
 
 export const createStartServicesMock = (): StartServices =>
-  (coreMock.createStart() as unknown) as StartServices;
+  (({
+    ...coreMock.createStart(),
+    security: securityMock.createStart(),
+    triggersActionsUi: triggersActionsUiMock.createStart(),
+  } as unknown) as StartServices);
 
 export const createWithKibanaMock = () => {
   const services = createStartServicesMock();

x-pack/plugins/cases/public/components/case_view/index.test.tsx

@@ -28,18 +28,21 @@ import { useConnectors } from '../../containers/configure/use_connectors';
 import { connectorsMock } from '../../containers/configure/mock';
 import { usePostPushToService } from '../../containers/use_post_push_to_service';
 import { CaseType, ConnectorTypes } from '../../../common';
+import { useKibana } from '../../common/lib/kibana';
 
 jest.mock('../../containers/use_update_case');
 jest.mock('../../containers/use_get_case_user_actions');
 jest.mock('../../containers/use_get_case');
 jest.mock('../../containers/configure/use_connectors');
 jest.mock('../../containers/use_post_push_to_service');
 jest.mock('../user_action_tree/user_action_timestamp');
+jest.mock('../../common/lib/kibana');
 
 const useUpdateCaseMock = useUpdateCase as jest.Mock;
 const useGetCaseUserActionsMock = useGetCaseUserActions as jest.Mock;
 const useConnectorsMock = useConnectors as jest.Mock;
 const usePostPushToServiceMock = usePostPushToService as jest.Mock;
+const useKibanaMock = useKibana as jest.Mocked<typeof useKibana>;
 
 const alertsHit = [
   {
@@ -160,6 +163,10 @@ describe('CaseView ', () => {
       pushCaseToExternalService,
     }));
     useConnectorsMock.mockImplementation(() => ({ connectors: connectorsMock, loading: false }));
+    useKibanaMock().services.triggersActionsUi.actionTypeRegistry.get = jest.fn().mockReturnValue({
+      actionTypeTitle: '.servicenow',
+      iconClass: 'logoSecurity',
+    });
   });
 
   it('should render CaseComponent', async () => {

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

@@ -13,6 +13,10 @@ import { TestProviders } from '../../common/mock';
 import { ConnectorsDropdown } from './connectors_dropdown';
 import { connectors } from './__mock__';
 import { ConnectorTypes } from '../../../common';
+import { useKibana } from '../../common/lib/kibana';
+
+jest.mock('../../common/lib/kibana');
+const useKibanaMock = useKibana as jest.Mocked<typeof useKibana>;
 
 describe('Connectors', () => {
   let wrapper: ReactWrapper;
@@ -31,6 +35,10 @@ describe('Connectors', () => {
   };
 
   beforeAll(() => {
+    useKibanaMock().services.triggersActionsUi.actionTypeRegistry.get = jest.fn().mockReturnValue({
+      actionTypeTitle: 'test',
+      iconClass: 'logoSecurity',
+    });
     wrapper = mount(<Connectors {...props} />, { wrappingComponent: TestProviders });
   });
 

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

@@ -12,6 +12,10 @@ import { EuiSuperSelect } from '@elastic/eui';
 import { ConnectorsDropdown, Props } from './connectors_dropdown';
 import { TestProviders } from '../../common/mock';
 import { connectors } from './__mock__';
+import { useKibana } from '../../common/lib/kibana';
+
+jest.mock('../../common/lib/kibana');
+const useKibanaMock = useKibana as jest.Mocked<typeof useKibana>;
 
 describe('ConnectorsDropdown', () => {
   let wrapper: ReactWrapper;
@@ -24,6 +28,10 @@ describe('ConnectorsDropdown', () => {
   };
 
   beforeAll(() => {
+    useKibanaMock().services.triggersActionsUi.actionTypeRegistry.get = jest.fn().mockReturnValue({
+      actionTypeTitle: '.servicenow',
+      iconClass: 'logoSecurity',
+    });
     wrapper = mount(<ConnectorsDropdown {...props} />, { wrappingComponent: TestProviders });
   });
 
@@ -73,14 +81,7 @@ describe('ConnectorsDropdown', () => {
             >
               <Styled(EuiIcon)
                 size="m"
-                type={
-                  Object {
-                    "$$typeof": Symbol(react.lazy),
-                    "_ctor": [Function],
-                    "_result": null,
-                    "_status": -1,
-                  }
-                }
+                type="logoSecurity"
               />
             </EuiFlexItem>
             <EuiFlexItem>
@@ -103,14 +104,7 @@ describe('ConnectorsDropdown', () => {
             >
               <Styled(EuiIcon)
                 size="m"
-                type={
-                  Object {
-                    "$$typeof": Symbol(react.lazy),
-                    "_ctor": [Function],
-                    "_result": null,
-                    "_status": -1,
-                  }
-                }
+                type="logoSecurity"
               />
             </EuiFlexItem>
             <EuiFlexItem>
@@ -133,14 +127,7 @@ describe('ConnectorsDropdown', () => {
             >
               <Styled(EuiIcon)
                 size="m"
-                type={
-                  Object {
-                    "$$typeof": Symbol(react.lazy),
-                    "_ctor": [Function],
-                    "_result": null,
-                    "_status": -1,
-                  }
-                }
+                type="logoSecurity"
               />
             </EuiFlexItem>
             <EuiFlexItem>
@@ -163,14 +150,7 @@ describe('ConnectorsDropdown', () => {
             >
               <Styled(EuiIcon)
                 size="m"
-                type={
-                  Object {
-                    "$$typeof": Symbol(react.lazy),
-                    "_ctor": [Function],
-                    "_result": null,
-                    "_status": -1,
-                  }
-                }
+                type="logoSecurity"
               />
             </EuiFlexItem>
             <EuiFlexItem>
@@ -210,9 +190,13 @@ describe('ConnectorsDropdown', () => {
       wrappingComponent: TestProviders,
     });
 
-    expect(newWrapper.find('button span:not([data-euiicon-type])').at(1).text()).toBe(
-      'My Connector'
-    );
+    expect(
+      newWrapper
+        .find('[data-test-subj="dropdown-connectors"]')
+        .first()
+        .text()
+        .includes('My Connector, is selected')
+    ).toBeTruthy();
   });
 
   test('if the props hideConnectorServiceNowSir is true, the connector should not be part of the list of options  ', () => {

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

@@ -11,8 +11,8 @@ import styled from 'styled-components';
 
 import { ConnectorTypes } from '../../../common';
 import { ActionConnector } from '../../containers/configure/types';
-import { connectorsConfiguration } from '../connectors';
 import * as i18n from './translations';
+import { useKibana } from '../../common/lib/kibana';
 
 export interface Props {
   connectors: ActionConnector[];
@@ -65,6 +65,7 @@ const ConnectorsDropdownComponent: React.FC<Props> = ({
   appendAddConnectorButton = false,
   hideConnectorServiceNowSir = false,
 }) => {
+  const { triggersActionsUi } = useKibana().services;
   const connectorsAsOptions = useMemo(() => {
     const connectorsFormatted = connectors.reduce(
       (acc, connector) => {
@@ -80,7 +81,10 @@ const ConnectorsDropdownComponent: React.FC<Props> = ({
               <EuiFlexGroup gutterSize="none" alignItems="center" responsive={false}>
                 <EuiFlexItem grow={false}>
                   <EuiIconExtended
-                    type={connectorsConfiguration[connector.actionTypeId]?.logo ?? ''}
+                    type={
+                      triggersActionsUi.actionTypeRegistry.get(connector.actionTypeId)?.iconClass ??
+                      ''
+                    }
                     size={ICON_SIZE}
                   />
                 </EuiFlexItem>

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

@@ -12,6 +12,10 @@ 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;
@@ -22,8 +26,13 @@ describe('FieldMappingRow', () => {
   };
 
   beforeAll(() => {
+    useKibanaMock().services.triggersActionsUi.actionTypeRegistry.get = jest.fn().mockReturnValue({
+      actionTypeTitle: '.servicenow',
+      iconClass: 'logoSecurity',
+    });
     wrapper = mount(<FieldMapping {...props} />, { wrappingComponent: TestProviders });
   });
+
   test('it renders', () => {
     expect(
       wrapper.find('[data-test-subj="case-configure-field-mappings-row-wrapper"]').first().exists()

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

@@ -13,7 +13,7 @@ import { FieldMappingRowStatic } from './field_mapping_row_static';
 import * as i18n from './translations';
 
 import { CaseConnectorMapping } from '../../containers/configure/types';
-import { connectorsConfiguration } from '../connectors';
+import { useKibana } from '../../common/lib/kibana';
 
 const FieldRowWrapper = styled.div`
   margin: 10px 0;
@@ -31,8 +31,10 @@ const FieldMappingComponent: React.FC<FieldMappingProps> = ({
   isLoading,
   mappings,
 }) => {
+  const { triggersActionsUi } = useKibana().services;
   const selectedConnector = useMemo(
-    () => connectorsConfiguration[connectorActionTypeId] ?? { fields: {} },
+    () => triggersActionsUi.actionTypeRegistry.get(connectorActionTypeId) ?? { fields: {} },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [connectorActionTypeId]
   );
   return mappings.length ? (
@@ -45,7 +47,7 @@ const FieldMappingComponent: React.FC<FieldMappingProps> = ({
           </EuiFlexItem>
           <EuiFlexItem>
             <span className="euiFormLabel">
-              {i18n.FIELD_MAPPING_SECOND_COL(selectedConnector.name)}
+              {i18n.FIELD_MAPPING_SECOND_COL(selectedConnector.actionTypeTitle ?? '')}
             </span>
           </EuiFlexItem>
           <EuiFlexItem>