Disable delete button if user has no permissions.

Tests.
elastic · Apr 6, 2023 · 8941664 · 8941664
1 parent 9009f41
commit 8941664
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/x-pack/plugins/cases/public/components/files/file_delete_button_icon.test.tsx b/x-pack/plugins/cases/public/components/files/file_delete_button_icon.test.tsx
@@ -12,7 +12,7 @@ import userEvent from '@testing-library/user-event';
 
 import type { AppMockRenderer } from '../../common/mock';
 
-import { createAppMockRenderer } from '../../common/mock';
+import { buildCasesPermissions, 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';
@@ -73,4 +73,14 @@ describe('FileDeleteButtonIcon', () => {
       });
     });
   });
+
+  it('delete button is disabled if user has no delete permission', async () => {
+    appMockRender = createAppMockRenderer({
+      permissions: buildCasesPermissions({ delete: false }),
+    });
+
+    appMockRender.render(<FileDeleteButtonIcon caseId={basicCaseId} fileId={basicFileMock.id} />);
+
+    expect(await screen.findByTestId('cases-files-delete-button')).toBeDisabled();
+  });
 });
diff --git a/x-pack/plugins/cases/public/components/files/file_delete_button_icon.tsx b/x-pack/plugins/cases/public/components/files/file_delete_button_icon.tsx
@@ -12,13 +12,15 @@ 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';
+import { useCasesContext } from '../cases_context/use_cases_context';
 
 interface FileDeleteButtonIconProps {
   caseId: string;
   fileId: string;
 }
 
 const FileDeleteButtonIconComponent: React.FC<FileDeleteButtonIconProps> = ({ caseId, fileId }) => {
+  const { permissions } = useCasesContext();
   const { isLoading, mutate: deleteFileAttachment } = useDeleteFileAttachment();
 
   const { showDeletionModal, onModalOpen, onConfirm, onCancel } = useDeletePropertyAction({
@@ -31,7 +33,7 @@ const FileDeleteButtonIconComponent: React.FC<FileDeleteButtonIconProps> = ({ ca
         iconType={'trash'}
         aria-label={i18n.DELETE_FILE}
         color={'danger'}
-        isDisabled={isLoading}
+        isDisabled={isLoading || !permissions.delete}
         onClick={onModalOpen}
         data-test-subj={'cases-files-delete-button'}
       />