[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.findAllByTestId('property-actions-confirm-modal'));
+  });
+
+  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.findAllByTestId('property-actions-confirm-modal'));
+
+    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.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 () => {

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

x-pack/plugins/cases/public/containers/api.test.tsx

@@ -16,6 +16,7 @@ import {
   INTERNAL_BULK_CREATE_ATTACHMENTS_URL,
   SECURITY_SOLUTION_OWNER,
   INTERNAL_GET_CASE_USER_ACTIONS_STATS_URL,
+  INTERNAL_DELETE_FILE_ATTACHMENTS_URL,
 } from '../../common/constants';
 
 import {
@@ -37,6 +38,7 @@ import {
   postComment,
   getCaseConnectors,
   getCaseUserActionsStats,
+  deleteFileAttachments,
 } from './api';
 
 import {
@@ -59,6 +61,7 @@ import {
   caseUserActionsWithRegisteredAttachmentsSnake,
   basicPushSnake,
   getCaseUserActionsStatsResponse,
+  basicFileMock,
 } from './mock';
 
 import { DEFAULT_FILTER_OPTIONS, DEFAULT_QUERY_PARAMS } from './use_get_cases';
@@ -820,6 +823,30 @@ describe('Cases API', () => {
     });
   });
 
+  describe('deleteFileAttachments', () => {
+    beforeEach(() => {
+      fetchMock.mockClear();
+      fetchMock.mockResolvedValue(null);
+    });
+
+    it('should be called with correct url, method, signal and body', async () => {
+      const resp = await deleteFileAttachments({
+        caseId: basicCaseId,
+        fileIds: [basicFileMock.id],
+        signal: abortCtrl.signal,
+      });
+      expect(fetchMock).toHaveBeenCalledWith(
+        INTERNAL_DELETE_FILE_ATTACHMENTS_URL.replace('{case_id}', basicCaseId),
+        {
+          method: 'POST',
+          body: JSON.stringify({ ids: [basicFileMock.id] }),
+          signal: abortCtrl.signal,
+        }
+      );
+      expect(resp).toBe(undefined);
+    });
+  });
+
   describe('pushCase', () => {
     const connectorId = 'connectorId';