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

Co-authored-by: Yuliia Naumenko <[email protected]>

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>