[Cases] Deleting file attachments from a case

x-pack/plugins/cases/public/components/files/add_file.test.tsx

@@ -209,7 +209,10 @@ describe('AddFile', () => {
     userEvent.click(await screen.findByTestId('testMetadata'));
 
     await waitFor(() =>
-      expect(validateMetadata).toHaveBeenCalledWith({ caseId, owner: mockedTestProvidersOwner[0] })
+      expect(validateMetadata).toHaveBeenCalledWith({
+        caseIds: [caseId],
+        owner: mockedTestProvidersOwner[0],
+      })
     );
   });
 

x-pack/plugins/cases/public/components/files/add_file.tsx

@@ -138,7 +138,7 @@ const AddFileComponent: React.FC<AddFileProps> = ({ caseId }) => {
               kind={constructFileKindIdByOwner(owner[0] as Owner)}
               onDone={onUploadDone}
               onError={onError}
-              meta={{ caseId, owner: owner[0] }}
+              meta={{ caseIds: [caseId], owner: owner[0] }}
             />
           </EuiModalBody>
         </EuiModal>

x-pack/plugins/cases/public/components/files/file_delete_button_icon.test.tsx

@@ -0,0 +1,76 @@
+/*
+ * 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 React from 'react';
+
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import type { AppMockRenderer } from '../../common/mock';
+
+import { createAppMockRenderer } from '../../common/mock';
+import { basicCaseId, basicFileMock } from '../../containers/mock';
+import { useDeleteFileAttachment } from '../../containers/use_delete_file_attachment';
+import { FileDeleteButtonIcon } from './file_delete_button_icon';
+
+jest.mock('../../containers/use_delete_file_attachment');
+
+const useDeleteFileAttachmentMock = useDeleteFileAttachment as jest.Mock;
+
+describe('FileDeleteButtonIcon', () => {
+  let appMockRender: AppMockRenderer;
+  const mutate = jest.fn();
+
+  useDeleteFileAttachmentMock.mockReturnValue({ isLoading: false, mutate });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    appMockRender = createAppMockRenderer();
+  });
+
+  it('renders delete button correctly', async () => {
+    appMockRender.render(<FileDeleteButtonIcon caseId={basicCaseId} fileId={basicFileMock.id} />);
+
+    expect(await screen.findByTestId('cases-files-delete-button')).toBeInTheDocument();
+
+    expect(useDeleteFileAttachmentMock).toBeCalledTimes(1);
+  });
+
+  it('clicking delete button opens the confirmation modal', async () => {
+    appMockRender.render(<FileDeleteButtonIcon caseId={basicCaseId} fileId={basicFileMock.id} />);
+
+    const deleteButton = await screen.findByTestId('cases-files-delete-button');
+
+    expect(deleteButton).toBeInTheDocument();
+
+    userEvent.click(deleteButton);
+
+    expect(await screen.findByTestId('property-actions-confirm-modal')).toBeInTheDocument();
+  });
+
+  it('clicking delete button in the confirmation modal calls deleteFileAttachment with proper params', async () => {
+    appMockRender.render(<FileDeleteButtonIcon caseId={basicCaseId} fileId={basicFileMock.id} />);
+
+    const deleteButton = await screen.findByTestId('cases-files-delete-button');
+
+    expect(deleteButton).toBeInTheDocument();
+
+    userEvent.click(deleteButton);
+
+    expect(await screen.findByTestId('property-actions-confirm-modal')).toBeInTheDocument();
+
+    userEvent.click(await screen.findByTestId('confirmModalConfirmButton'));
+
+    await waitFor(() => {
+      expect(mutate).toHaveBeenCalledTimes(1);
+      expect(mutate).toHaveBeenCalledWith({
+        caseId: basicCaseId,
+        fileId: basicFileMock.id,
+      });
+    });
+  });
+});

x-pack/plugins/cases/public/components/files/file_delete_button_icon.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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 React from 'react';
+
+import { EuiButtonIcon } from '@elastic/eui';
+import * as i18n from './translations';
+import { useDeleteFileAttachment } from '../../containers/use_delete_file_attachment';
+import { useDeletePropertyAction } from '../user_actions/property_actions/use_delete_property_action';
+import { DeleteAttachmentConfirmationModal } from '../user_actions/delete_attachment_confirmation_modal';
+
+interface FileDeleteButtonIconProps {
+  caseId: string;
+  fileId: string;
+}
+
+const FileDeleteButtonIconComponent: React.FC<FileDeleteButtonIconProps> = ({ caseId, fileId }) => {
+  const { isLoading, mutate: deleteFileAttachment } = useDeleteFileAttachment();
+
+  const { showDeletionModal, onModalOpen, onConfirm, onCancel } = useDeletePropertyAction({
+    onDelete: () => deleteFileAttachment({ caseId, fileId }),
+  });
+
+  return (
+    <>
+      <EuiButtonIcon
+        iconType={'trash'}
+        aria-label={i18n.DELETE_FILE}
+        color={'danger'}
+        isDisabled={isLoading}
+        onClick={onModalOpen}
+        data-test-subj={'cases-files-delete-button'}
+      />
+      {showDeletionModal ? (
+        <DeleteAttachmentConfirmationModal
+          title={i18n.DELETE_FILE_TITLE}
+          confirmButtonText={i18n.DELETE}
+          onCancel={onCancel}
+          onConfirm={onConfirm}
+        />
+      ) : null}
+    </>
+  );
+};
+FileDeleteButtonIconComponent.displayName = 'FileDeleteButtonIcon';
+
+export const FileDeleteButtonIcon = React.memo(FileDeleteButtonIconComponent);

x-pack/plugins/cases/public/components/files/file_type.test.tsx

@@ -15,6 +15,7 @@ import { FILE_ATTACHMENT_TYPE } from '../../../common/api';
 import { createAppMockRenderer } from '../../common/mock';
 import { basicCase, basicFileMock } from '../../containers/mock';
 import { getFileType } from './file_type';
+import userEvent from '@testing-library/user-event';
 
 describe('getFileType', () => {
   const fileType = getFileType();
@@ -62,6 +63,30 @@ describe('getFileType', () => {
       expect(await screen.findByTestId('cases-files-download-button')).toBeInTheDocument();
     });
 
+    it('actions renders a delete button', async () => {
+      appMockRender = createAppMockRenderer();
+
+      // @ts-ignore
+      appMockRender.render(fileType.getAttachmentViewObject({ ...attachmentViewProps }).actions);
+
+      expect(await screen.findByTestId('cases-files-delete-button')).toBeInTheDocument();
+    });
+
+    it('clicking the delete button in actions opens deletion modal', async () => {
+      appMockRender = createAppMockRenderer();
+
+      // @ts-ignore
+      appMockRender.render(fileType.getAttachmentViewObject({ ...attachmentViewProps }).actions);
+
+      const deleteButton = await screen.findByTestId('cases-files-delete-button');
+
+      expect(deleteButton).toBeInTheDocument();
+
+      userEvent.click(deleteButton);
+
+      expect(await screen.findByTestId('property-actions-confirm-modal')).toBeInTheDocument();
+    });
+
     it('empty externalReferenceMetadata returns blank FileAttachmentViewObject', () => {
       expect(
         fileType.getAttachmentViewObject({ ...attachmentViewProps, externalReferenceMetadata: {} })

x-pack/plugins/cases/public/components/files/file_type.tsx

@@ -20,6 +20,7 @@ import { FilePreview } from './file_preview';
 import * as i18n from './translations';
 import { isImage, isValidFileExternalReferenceMetadata } from './utils';
 import { useFilePreview } from './use_file_preview';
+import { FileDeleteButtonIcon } from './file_delete_button_icon';
 
 interface FileAttachmentEventProps {
   file: FileJSON;
@@ -39,6 +40,15 @@ const FileAttachmentEvent = ({ file }: FileAttachmentEventProps) => {
 
 FileAttachmentEvent.displayName = 'FileAttachmentEvent';
 
+const FileAttachmentActions = ({ caseId, fileId }: { caseId: string; fileId: string }) => (
+  <>
+    <FileDownloadButtonIcon fileId={fileId} />
+    <FileDeleteButtonIcon caseId={caseId} fileId={fileId} />
+  </>
+);
+
+FileAttachmentActions.displayName = 'FileAttachmentActions';
+
 const getFileAttachmentViewObject = (props: ExternalReferenceAttachmentViewProps) => {
   if (!isValidFileExternalReferenceMetadata(props.externalReferenceMetadata)) {
     return {
@@ -50,6 +60,7 @@ const getFileAttachmentViewObject = (props: ExternalReferenceAttachmentViewProps
   }
 
   const fileId = props.externalReferenceId;
+  const caseId = props.caseData.id;
 
   // @ts-ignore
   const partialFileJSON = props.externalReferenceMetadata?.files[0] as Partial<FileJSON>;
@@ -62,7 +73,7 @@ const getFileAttachmentViewObject = (props: ExternalReferenceAttachmentViewProps
   return {
     event: <FileAttachmentEvent file={file} />,
     timelineAvatar: isImage(file) ? 'image' : 'document',
-    actions: <FileDownloadButtonIcon fileId={fileId} />,
+    actions: <FileAttachmentActions caseId={caseId} fileId={fileId} />,
     hideDefaultActions: true,
   };
 };

x-pack/plugins/cases/public/components/files/files_table.test.tsx

@@ -45,7 +45,7 @@ describe('FilesTable', () => {
     expect(await screen.findByTestId('cases-files-table-filetype')).toBeInTheDocument();
     expect(await screen.findByTestId('cases-files-table-date-added')).toBeInTheDocument();
     expect(await screen.findByTestId('cases-files-download-button')).toBeInTheDocument();
-    expect(await screen.findByTestId('cases-files-table-action-delete')).toBeInTheDocument();
+    expect(await screen.findByTestId('cases-files-delete-button')).toBeInTheDocument();
   });
 
   it('renders loading state', async () => {
@@ -131,6 +131,36 @@ describe('FilesTable', () => {
     expect(await screen.findByTestId('cases-files-download-button')).toBeInTheDocument();
   });
 
+  it('delete button renders correctly', async () => {
+    appMockRender.render(<FilesTable {...defaultProps} />);
+
+    expect(mockedFilesClient.getDownloadHref).toBeCalledTimes(1);
+    expect(mockedFilesClient.getDownloadHref).toHaveBeenCalledWith({
+      fileKind: constructFileKindIdByOwner(mockedTestProvidersOwner[0]),
+      id: basicFileMock.id,
+    });
+
+    expect(await screen.findByTestId('cases-files-delete-button')).toBeInTheDocument();
+  });
+
+  it('clicking delete button opens deletion modal', async () => {
+    appMockRender.render(<FilesTable {...defaultProps} />);
+
+    expect(mockedFilesClient.getDownloadHref).toBeCalledTimes(1);
+    expect(mockedFilesClient.getDownloadHref).toHaveBeenCalledWith({
+      fileKind: constructFileKindIdByOwner(mockedTestProvidersOwner[0]),
+      id: basicFileMock.id,
+    });
+
+    const deleteButton = await screen.findByTestId('cases-files-delete-button');
+
+    expect(deleteButton).toBeInTheDocument();
+
+    userEvent.click(deleteButton);
+
+    expect(await screen.findByTestId('property-actions-confirm-modal')).toBeInTheDocument();
+  });
+
   it('go to next page calls onTableChange with correct values', async () => {
     const mockPagination = { pageIndex: 0, pageSize: 1, totalItemCount: 2 };
 

x-pack/plugins/cases/public/components/files/files_table.tsx

@@ -46,7 +46,7 @@ export const FilesTable = ({ caseId, items, pagination, onChange, isLoading }: F
     showPreview();
   };
 
-  const columns = useFilesTableColumns({ showPreview: displayPreview });
+  const columns = useFilesTableColumns({ caseId, showPreview: displayPreview });
 
   return isLoading ? (
     <>

x-pack/plugins/cases/public/components/files/translations.tsx

@@ -90,3 +90,11 @@ export const ADDED_UNKNOWN_FILE = i18n.translate('xpack.cases.caseView.files.add
 export const DOWNLOAD = i18n.translate('xpack.cases.caseView.files.download', {
   defaultMessage: 'download',
 });
+
+export const DELETE = i18n.translate('xpack.cases.caseView.files.delete', {
+  defaultMessage: 'Delete',
+});
+
+export const DELETE_FILE_TITLE = i18n.translate('xpack.cases.caseView.files.deleteThisFile', {
+  defaultMessage: 'Delete this file?',
+});

x-pack/plugins/cases/public/components/files/use_files_table_columns.test.tsx

@@ -10,11 +10,13 @@ import { useFilesTableColumns } from './use_files_table_columns';
 import type { AppMockRenderer } from '../../common/mock';
 import { createAppMockRenderer } from '../../common/mock';
 import { renderHook } from '@testing-library/react-hooks';
+import { basicCase } from '../../containers/mock';
 
-describe('useCasesColumns ', () => {
+describe('useFilesTableColumns', () => {
   let appMockRender: AppMockRenderer;
 
-  const useCasesColumnsProps: FilesTableColumnsProps = {
+  const useFilesTableColumnsProps: FilesTableColumnsProps = {
+    caseId: basicCase.id,
     showPreview: () => {},
   };
 
@@ -24,7 +26,7 @@ describe('useCasesColumns ', () => {
   });
 
   it('return all files table columns correctly', async () => {
-    const { result } = renderHook(() => useFilesTableColumns(useCasesColumnsProps), {
+    const { result } = renderHook(() => useFilesTableColumns(useFilesTableColumnsProps), {
       wrapper: appMockRender.AppWrapper,
     });
 
@@ -56,14 +58,10 @@ describe('useCasesColumns ', () => {
               "render": [Function],
             },
             Object {
-              "color": "danger",
-              "data-test-subj": "cases-files-table-action-delete",
               "description": "Delete File",
-              "icon": "trash",
               "isPrimary": true,
               "name": "Delete",
-              "onClick": [Function],
-              "type": "icon",
+              "render": [Function],
             },
           ],
           "name": "Actions",

x-pack/plugins/cases/public/components/files/use_files_table_columns.tsx

@@ -14,12 +14,15 @@ import * as i18n from './translations';
 import { parseMimeType } from './utils';
 import { FileNameLink } from './file_name_link';
 import { FileDownloadButtonIcon } from './file_download_button_icon';
+import { FileDeleteButtonIcon } from './file_delete_button_icon';
 
 export interface FilesTableColumnsProps {
+  caseId: string;
   showPreview: (file: FileJSON) => void;
 }
 
 export const useFilesTableColumns = ({
+  caseId,
   showPreview,
 }: FilesTableColumnsProps): Array<EuiBasicTableColumn<FileJSON>> => {
   return [
@@ -58,11 +61,7 @@ export const useFilesTableColumns = ({
           name: 'Delete',
           isPrimary: true,
           description: i18n.DELETE_FILE,
-          color: 'danger',
-          icon: 'trash',
-          type: 'icon',
-          onClick: () => {},
-          'data-test-subj': 'cases-files-table-action-delete',
+          render: (file: FileJSON) => <FileDeleteButtonIcon caseId={caseId} fileId={file.id} />,
         },
       ],
     },

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

@@ -21,7 +21,7 @@ const UserActionContentToolbarComponent: React.FC<UserActionContentToolbarProps>
   withCopyLinkAction = true,
   children,
 }) => (
-  <EuiFlexGroup responsive={false} alignItems="center">
+  <EuiFlexGroup responsive={false} alignItems="center" gutterSize="m">
     {withCopyLinkAction ? (
       <EuiFlexItem grow={false}>
         <UserActionCopyLink id={id} />

x-pack/plugins/cases/public/containers/__mocks__/api.ts

@@ -162,3 +162,13 @@ export const getCaseConnectors = async (
 
 export const getCaseUsers = async (caseId: string, signal: AbortSignal): Promise<CaseUsers> =>
   Promise.resolve(getCaseUsersMockResponse());
+
+export const deleteFileAttachments = async ({
+  caseId,
+  fileIds,
+  signal,
+}: {
+  caseId: string;
+  fileIds: string[];
+  signal: AbortSignal;
+}): Promise<void> => Promise.resolve(undefined);