Improvements

x-pack/plugins/cases/common/ui/types.ts

@@ -21,6 +21,7 @@ import {
   CasesStatusResponse,
   CasesMetricsResponse,
   CaseSeverity,
+  CommentResponseExternalReferenceType,
 } from '../api';
 import { SnakeToCamelCase } from '../types';
 
@@ -65,6 +66,7 @@ export type CaseViewRefreshPropInterface = null | {
 
 export type Comment = SnakeToCamelCase<CommentResponse>;
 export type AlertComment = SnakeToCamelCase<CommentResponseAlertsType>;
+export type ExternalReferenceComment = SnakeToCamelCase<CommentResponseExternalReferenceType>;
 export type CaseUserActions = SnakeToCamelCase<CaseUserActionResponse>;
 export type CaseExternalService = SnakeToCamelCase<CaseExternalServiceBasic>;
 export type Case = Omit<SnakeToCamelCase<CaseResponse>, 'comments'> & { comments: Comment[] };

x-pack/plugins/cases/public/client/attachment_framework/external_reference_registry.ts

@@ -0,0 +1,11 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { AttachmentTypeRegistry } from './registry';
+import { ExternalReferenceAttachmentType } from './types';
+
+export class ExternalReferenceAttachmentTypeRegistry extends AttachmentTypeRegistry<ExternalReferenceAttachmentType> {}

x-pack/plugins/cases/public/client/attachment_framework/types.ts

@@ -9,7 +9,6 @@ import type React from 'react';
 import { EuiCommentProps, IconType } from '@elastic/eui';
 import { CommentRequestExternalReferenceType } from '../../../common/api';
 import { Case } from '../../containers/types';
-import { AttachmentTypeRegistry } from './registry';
 
 export interface ExternalReferenceAttachmentViewObject {
   type?: EuiCommentProps['type'];
@@ -28,6 +27,7 @@ export interface ExternalReferenceAttachmentViewProps {
 export interface ExternalReferenceAttachmentType {
   id: string;
   icon: IconType;
+  displayName: string;
   getAttachmentViewObject: (
     props: ExternalReferenceAttachmentViewProps
   ) => ExternalReferenceAttachmentViewObject;
@@ -38,6 +38,3 @@ export interface AttachmentFramework {
     externalReferenceAttachmentType: ExternalReferenceAttachmentType
   ) => void;
 }
-
-export type ExternalReferenceAttachmentTypeRegistry =
-  AttachmentTypeRegistry<ExternalReferenceAttachmentType>;

x-pack/plugins/cases/public/common/mock/test_providers.tsx

@@ -24,17 +24,16 @@ import { FieldHook } from '../shared_imports';
 import { StartServices } from '../../types';
 import { ReleasePhase } from '../../components/types';
 import { AttachmentTypeRegistry } from '../../client/attachment_framework/registry';
-import {
-  ExternalReferenceAttachmentType,
-  ExternalReferenceAttachmentTypeRegistry,
-} from '../../client/attachment_framework/types';
+import { ExternalReferenceAttachmentType } from '../../client/attachment_framework/types';
+import { ExternalReferenceAttachmentTypeRegistry } from '../../client/attachment_framework/external_reference_registry';
 
 interface TestProviderProps {
   children: React.ReactNode;
   userCanCrud?: boolean;
   features?: CasesFeatures;
   owner?: string[];
   releasePhase?: ReleasePhase;
+  externalReferenceAttachmentTypeRegistry?: AttachmentTypeRegistry<ExternalReferenceAttachmentType>;
 }
 type UiRender = (ui: React.ReactElement, options?: RenderOptions) => RenderResult;
 
@@ -48,6 +47,7 @@ const TestProvidersComponent: React.FC<TestProviderProps> = ({
   owner = [SECURITY_SOLUTION_OWNER],
   userCanCrud = true,
   releasePhase = 'ga',
+  externalReferenceAttachmentTypeRegistry = new ExternalReferenceAttachmentTypeRegistry(),
 }) => {
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -57,9 +57,6 @@ const TestProvidersComponent: React.FC<TestProviderProps> = ({
     },
   });
 
-  const externalReferenceAttachmentTypeRegistry =
-    new AttachmentTypeRegistry<ExternalReferenceAttachmentType>();
-
   return (
     <I18nProvider>
       <MockKibanaContextProvider>
@@ -100,6 +97,7 @@ export const createAppMockRenderer = ({
   owner = [SECURITY_SOLUTION_OWNER],
   userCanCrud = true,
   releasePhase = 'ga',
+  externalReferenceAttachmentTypeRegistry = new ExternalReferenceAttachmentTypeRegistry(),
 }: Omit<TestProviderProps, 'children'> = {}): AppMockRenderer => {
   const services = createStartServicesMock();
   const queryClient = new QueryClient({
@@ -110,9 +108,6 @@ export const createAppMockRenderer = ({
     },
   });
 
-  const externalReferenceAttachmentTypeRegistry =
-    new AttachmentTypeRegistry<ExternalReferenceAttachmentType>();
-
   const AppWrapper: React.FC<{ children: React.ReactElement }> = ({ children }) => (
     <I18nProvider>
       <KibanaContextProvider services={services}>
@@ -134,13 +129,16 @@ export const createAppMockRenderer = ({
       </KibanaContextProvider>
     </I18nProvider>
   );
+
   AppWrapper.displayName = 'AppWrapper';
+
   const render: UiRender = (ui, options) => {
     return reactRender(ui, {
       wrapper: AppWrapper,
       ...options,
     });
   };
+
   return {
     coreStart: services,
     queryClient,

x-pack/plugins/cases/public/components/all_cases/selector_modal/use_cases_add_to_existing_case_modal.test.tsx

@@ -5,8 +5,6 @@
  * 2.0.
  */
 
-import { AttachmentTypeRegistry } from '../../../client/attachment_framework/registry';
-import { ExternalReferenceAttachmentType } from '../../../client/attachment_framework/types';
 import { waitFor } from '@testing-library/dom';
 import { act, renderHook } from '@testing-library/react-hooks';
 import userEvent from '@testing-library/user-event';
@@ -19,6 +17,7 @@ import { alertComment } from '../../../containers/mock';
 import { useCreateAttachments } from '../../../containers/use_create_attachments';
 import { CasesContext } from '../../cases_context';
 import { CasesContextStoreActionsList } from '../../cases_context/cases_context_reducer';
+import { ExternalReferenceAttachmentTypeRegistry } from '../../../client/attachment_framework/external_reference_registry';
 import { useCasesAddToExistingCaseModal } from './use_cases_add_to_existing_case_modal';
 
 jest.mock('../../../common/use_cases_toast');
@@ -47,8 +46,7 @@ const TestComponent: React.FC = () => {
 
 const useCreateAttachmentsMock = useCreateAttachments as jest.Mock;
 
-const externalReferenceAttachmentTypeRegistry =
-  new AttachmentTypeRegistry<ExternalReferenceAttachmentType>();
+const externalReferenceAttachmentTypeRegistry = new ExternalReferenceAttachmentTypeRegistry();
 
 describe('use cases add to existing case modal hook', () => {
   useCreateAttachmentsMock.mockReturnValue({

x-pack/plugins/cases/public/components/create/flyout/use_cases_add_to_new_case_flyout.test.tsx

@@ -13,12 +13,11 @@ import React from 'react';
 import { CasesContext } from '../../cases_context';
 import { CasesContextStoreActionsList } from '../../cases_context/cases_context_reducer';
 import { useCasesAddToNewCaseFlyout } from './use_cases_add_to_new_case_flyout';
-import { AttachmentTypeRegistry } from '../../../client/attachment_framework/registry';
-import { ExternalReferenceAttachmentType } from '../../../client/attachment_framework/types';
+import { ExternalReferenceAttachmentTypeRegistry } from '../../../client/attachment_framework/external_reference_registry';
+
 jest.mock('../../../common/use_cases_toast');
 
-const externalReferenceAttachmentTypeRegistry =
-  new AttachmentTypeRegistry<ExternalReferenceAttachmentType>();
+const externalReferenceAttachmentTypeRegistry = new ExternalReferenceAttachmentTypeRegistry();
 
 describe('use cases add to new case flyout hook', () => {
   const dispatch = jest.fn();

x-pack/plugins/cases/public/components/user_actions/comment/comment.test.tsx

@@ -13,15 +13,19 @@ import { Actions } from '../../../../common/api';
 import {
   alertComment,
   basicCase,
+  externalReferenceAttachment,
   getAlertUserAction,
+  getExternalReferenceAttachment,
+  getExternalReferenceUserAction,
   getHostIsolationUserAction,
   getUserAction,
   hostIsolationComment,
 } from '../../../containers/mock';
-import { TestProviders } from '../../../common/mock';
+import { AppMockRenderer, createAppMockRenderer, TestProviders } from '../../../common/mock';
 import { createCommentUserActionBuilder } from './comment';
 import { getMockBuilderArgs } from '../mock';
 import { useCaseViewParams } from '../../../common/navigation';
+import { ExternalReferenceAttachmentTypeRegistry } from '../../../client/attachment_framework/external_reference_registry';
 
 jest.mock('../../../common/lib/kibana');
 jest.mock('../../../common/navigation/hooks');
@@ -172,4 +176,91 @@ describe('createCommentUserActionBuilder', () => {
     expect(screen.getByText('host1')).toBeInTheDocument();
     expect(screen.getByText('I just isolated the host!')).toBeInTheDocument();
   });
+
+  describe('External references', () => {
+    let appMockRender: AppMockRenderer;
+
+    beforeEach(() => {
+      appMockRender = createAppMockRenderer();
+    });
+
+    it('renders correctly an external reference', async () => {
+      const externalReferenceAttachmentTypeRegistry = new ExternalReferenceAttachmentTypeRegistry();
+      externalReferenceAttachmentTypeRegistry.register(
+        getExternalReferenceAttachment({ type: 'regular' })
+      );
+
+      const userAction = getExternalReferenceUserAction();
+      const builder = createCommentUserActionBuilder({
+        ...builderArgs,
+        externalReferenceAttachmentTypeRegistry,
+        caseData: {
+          ...builderArgs.caseData,
+          comments: [externalReferenceAttachment],
+        },
+        userAction,
+      });
+
+      const createdUserAction = builder.build();
+      const result = appMockRender.render(<EuiCommentList comments={createdUserAction} />);
+
+      expect(result.getByTestId('comment-external-reference-.test')).toBeInTheDocument();
+      expect(result.getByTestId('copy-link-external-reference-comment-id')).toBeInTheDocument();
+      expect(result.getByTestId('user-action-username-with-avatar')).toBeInTheDocument();
+      expect(screen.getByText('added a chart')).toBeInTheDocument();
+    });
+
+    it('renders correctly if the reference is not registered', async () => {
+      const externalReferenceAttachmentTypeRegistry = new ExternalReferenceAttachmentTypeRegistry();
+
+      const userAction = getExternalReferenceUserAction();
+      const builder = createCommentUserActionBuilder({
+        ...builderArgs,
+        externalReferenceAttachmentTypeRegistry,
+        caseData: {
+          ...builderArgs.caseData,
+          comments: [externalReferenceAttachment],
+        },
+        userAction,
+      });
+
+      const createdUserAction = builder.build();
+      const result = appMockRender.render(<EuiCommentList comments={createdUserAction} />);
+
+      expect(result.getByTestId('comment-external-reference-not-found')).toBeInTheDocument();
+      expect(screen.getByText('added an attachment of type')).toBeInTheDocument();
+      expect(screen.getByText('Attachment type is not registered')).toBeInTheDocument();
+    });
+
+    it('renders correctly an external reference with actions', async () => {
+      const ActionsView = () => {
+        return <>{'Attachment actions'}</>;
+      };
+
+      const attachment = getExternalReferenceAttachment({
+        type: 'regular',
+        actions: <ActionsView />,
+      });
+
+      const externalReferenceAttachmentTypeRegistry = new ExternalReferenceAttachmentTypeRegistry();
+      externalReferenceAttachmentTypeRegistry.register(attachment);
+
+      const userAction = getExternalReferenceUserAction();
+      const builder = createCommentUserActionBuilder({
+        ...builderArgs,
+        externalReferenceAttachmentTypeRegistry,
+        caseData: {
+          ...builderArgs.caseData,
+          comments: [externalReferenceAttachment],
+        },
+        userAction,
+      });
+
+      const createdUserAction = builder.build();
+      const result = appMockRender.render(<EuiCommentList comments={createdUserAction} />);
+
+      expect(result.getByTestId('comment-external-reference-.test')).toBeInTheDocument();
+      expect(screen.getByText('Attachment actions')).toBeInTheDocument();
+    });
+  });
 });

x-pack/plugins/cases/public/components/user_actions/comment/comment.tsx

@@ -141,6 +141,7 @@ export const createCommentUserActionBuilder: UserActionBuilder = ({
     }
 
     const comment = caseData.comments.find((c) => c.id === commentUserAction.commentId);
+
     if (comment == null) {
       return [];
     }

x-pack/plugins/cases/public/components/user_actions/comment/external_reference.tsx

@@ -14,7 +14,7 @@ import { UserActionTimestamp } from '../timestamp';
 import { SnakeToCamelCase } from '../../../../common/types';
 import { UserActionUsernameWithAvatar } from '../avatar_username';
 import { UserActionCopyLink } from '../copy_link';
-import { ATTACHMENT_NOT_REGISTERED_ERROR } from './translations';
+import { ATTACHMENT_NOT_REGISTERED_ERROR, DEFAULT_EVENT_ATTACHMENT_TITLE } from './translations';
 
 type BuilderArgs = Pick<
   UserActionBuilderArgs,
@@ -47,7 +47,7 @@ export const createExternalReferenceAttachmentUserActionBuilder = ({
           ),
           event: (
             <>
-              {'added an attachment of type '}
+              {`${DEFAULT_EVENT_ATTACHMENT_TITLE} `}
               <EuiCode>{comment.externalReferenceAttachmentTypeId}</EuiCode>
             </>
           ),
@@ -66,7 +66,7 @@ export const createExternalReferenceAttachmentUserActionBuilder = ({
     );
 
     const externalReferenceViewObject = externalReferenceType.getAttachmentViewObject({
-      externalReferenceId: externalReferenceType.id,
+      externalReferenceId: comment.externalReferenceId,
       externalReferenceMetadata: comment.externalReferenceMetadata,
       caseData: { id: caseData.id, title: caseData.title },
     });

x-pack/plugins/cases/public/components/user_actions/comment/translations.tsx

@@ -13,3 +13,10 @@ export const ATTACHMENT_NOT_REGISTERED_ERROR = i18n.translate(
     defaultMessage: 'Attachment type is not registered',
   }
 );
+
+export const DEFAULT_EVENT_ATTACHMENT_TITLE = i18n.translate(
+  'xpack.cases.userActions.defaultEventAttachmentTitle',
+  {
+    defaultMessage: 'added an attachment of type',
+  }
+);

x-pack/plugins/cases/public/components/user_actions/mock.ts

@@ -7,8 +7,7 @@
 
 import { Actions } from '../../../common/api';
 import { SECURITY_SOLUTION_OWNER } from '../../../common/constants';
-import { AttachmentTypeRegistry } from '../../client/attachment_framework/registry';
-import { ExternalReferenceAttachmentType } from '../../client/attachment_framework/types';
+import { ExternalReferenceAttachmentTypeRegistry } from '../../client/attachment_framework/external_reference_registry';
 import { basicCase, basicPush, getUserAction } from '../../containers/mock';
 import { UserActionBuilderArgs } from './types';
 
@@ -58,8 +57,7 @@ export const getMockBuilderArgs = (): UserActionBuilderArgs => {
   const handleDeleteComment = jest.fn();
   const handleManageQuote = jest.fn();
   const handleOutlineComment = jest.fn();
-  const externalReferenceAttachmentTypeRegistry =
-    new AttachmentTypeRegistry<ExternalReferenceAttachmentType>();
+  const externalReferenceAttachmentTypeRegistry = new ExternalReferenceAttachmentTypeRegistry();
 
   return {
     userAction,