[Cases] Detail View Attachments Table #152941

adcoelho · 2023-03-08T17:26:10Z

Fixes #151723

I am merging this into a feature branch.

Summary

This PR adds a way for users to:

View a list of all files attached to a case(with pagination)

Attach files to a case

Preview specific image files attached to a case

Search for files attached to a case by file name.

Download files attached to a case

TODO

I need to work on the tests, I already added some for the new components but need to write more. Off the top of my head, I still need to create tests for the new hooks and to make sure the changes to the Cases Context are working properly everywhere.

I created new issues for missing functionality that was not described in #151595 yet. This includes the deletion action and the files total next to the tab name on the case detail page.

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

x-pack/plugins/cases/public/application.tsx

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

x-pack/plugins/cases/public/containers/constants.ts

x-pack/plugins/cases/public/containers/use_get_case_attachments.tsx

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

x-pack/plugins/cases/public/components/attachments/attachments_table.test.tsx

x-pack/plugins/cases/public/components/attachments/attachments_table.tsx

x-pack/plugins/cases/public/components/case_view/components/case_view_attachments.tsx

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

x-pack/plugins/cases/public/components/attachments/attachments_table.tsx

x-pack/plugins/cases/public/containers/use_get_case_attachments.tsx

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

FilePreview is no longer a modal.

…fix'

cnasikas

Very good job! I left some comments.

x-pack/plugins/cases/public/components/case_view/components/case_view_files.tsx

x-pack/plugins/cases/public/containers/use_get_case_files.tsx

x-pack/plugins/cases/public/components/case_view/components/case_view_files.tsx

x-pack/plugins/cases/public/plugin.ts

sixstringcode · 2023-03-22T19:04:25Z

This is looking great. So cool to see the file service getting used outside of the image embeddable already.

Cleanup case_view_files tests. Move caseId out of filteringOptions. Add type guard for owner in cases context. Use useCasesToast in add_file component.

Add spacer for loading FilesTable. Use file name as "alt" in FilePreview. Remove HiddenButtonGroup from utility bar. Improve query keys for caseFiles. Remove owner from useGetCaseFiles.

Pass correct owner to definitions of the file kind.

…nto cases-detail-attachments-table

Change file name and mime type in files table.

Improve FilesTable tests. Add FilesUtilityBar tests. Add UseGetCaseFiles tests.

cnasikas · 2023-03-27T09:21:39Z

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

+      name: i18n.TYPE,
+      'data-test-subj': 'cases-files-table-filetype',
+      render: (attachment: FileJSON) => {
+        return <span>{`${attachment.mimeType?.split('/')[0]}` || ''}</span>;


As the is inside the ticks anything undefined will render to "undefined" (a string) and || will not work except an empty string. What about moving to a function, taking care of edge cases, and returning "Unknown" if there is no mimeType or attachment.mimeType?.split('/') is an empty array or attachment.mimeType?.split('/') contains an empty string, etc. Maybe we can also capitalize the first letter. Not for this PR but about application files, I see that we show the word "application". Do we want that or it is better to say "Zip", "PDF", etc?

Not for this PR but about application files, I see that we show the word "application". Do we want that or it is better to say "Zip", "PDF", etc?

I guess that would be not much different than the file type which is what we had before and was changed due to a previous conversation with @jonathan-buttner and @mdefazio 😅

It is not the same 🙂 . For the "image" is fine. It's an image. For applications/* though the file is not an application, is a ZIP, PDF, Text, etc. Also. it does not mean that the second part of the mime type describes correctly the type. We may need our own mapping for that. I think it is fine as it is now. Let's discuss it offline if we should improve it.

I think application for me means an executable so I don't think we should show that. I think it'd be better to show Compressed if we want to group zip, gzip, 7z etc into one. I think PDF, Plain Text, and JSON probably make sense for the others.

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

cnasikas · 2023-03-27T09:27:26Z

x-pack/plugins/cases/public/files/index.ts

@@ -20,10 +20,13 @@ const buildFileKind = (owner: Owner): FileKindBrowser => {
  };
 };

+export const isRegisteredOwner = (ownerToCheck: string): ownerToCheck is Owner =>
+  ownerToCheck in CASES_FILE_KINDS;


For security reasons, it is better if we use Object.hasOwn(CASES_FILE_KINDS, ownerToCheck)

Another option would be to compare against the OWNERS array directly: https://github.com/elastic/kibana/blob/main/x-pack/plugins/cases/common/constants/owners.ts#L18

I also need something similar:

const isValidOwner = (ownerToValidate: string): ownerToValidate is Owner => { const foundOwner = OWNERS.find((validOwner) => validOwner === ownerToValidate); return foundOwner !== undefined; };

That doesn't guarantee that it is registered though, so if you'd prefer to keep what you have that's fine 👍

Created tests for AddFile component. Added more tests for FilesTable component. Created parseMimeType util. Added a test for showDangerToast.

cnasikas

Thank you for your patience with all of my comments. I tested and LGTM.

js-jankisalvi

Verified locally, looks amazing 😻 Awesome work!! 🎉

js-jankisalvi · 2023-03-27T14:14:24Z

x-pack/plugins/cases/public/client/ui/get_all_cases_selector_modal.tsx

@@ -23,6 +25,7 @@ const AllCasesSelectorModalLazy: React.FC<AllCasesSelectorModalProps> = lazy(
 export const getAllCasesSelectorModalLazy = ({
  externalReferenceAttachmentTypeRegistry,
  persistableStateAttachmentTypeRegistry,
+  getFilesClient,


I might be missing the picture here, Why do we need getFilesClient separately in selector modal?

Even if sometimes it isn't used (like in the selector modal that doesn't show the case detail view where the files tab is)
the CasesContext wraps its children in the FilesContextProvider that unfortunately needs the files client.

Ahh okay 👍

js-jankisalvi · 2023-03-27T14:59:07Z

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

+
+    appMockRender.render(
+      <>
+        <div data-test-subj="outsideClickDummy" />


Not 100% sure but maybe you can add onClick event and role to the div.

also doesn't work 😞

js-jankisalvi · 2023-03-27T15:09:11Z

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

+          color: 'danger',
+          icon: 'trash',
+          type: 'icon',
+          onClick: () => {},


Should this column be removed, if delete functionality will not be added in this PR?

I could but I am going to work on this tomorrow so I am not sure it is worth it 😅

Also, it is not being sent to main, it is just the feature branch.

Forgot this goes to feature branch, doesn't make sense to remove it 😄

Add tests for file utils.

kibana-ci · 2023-03-27T17:10:43Z

💔 Build Failed

Failed CI Steps

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`cases`	565	597	+32

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`cases`	363.7KB	385.5KB	+21.8KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`cases`	133.3KB	134.9KB	+1.6KB

Unknown metric groups

async chunk count

id	before	after	diff
`cases`	16	17	+1

ESLint disabled line counts

id	before	after	diff
`cases`	56	57	+1
`securitySolution`	433	436	+3
total			+4

Total ESLint disabled count

id	before	after	diff
`cases`	74	75	+1
`securitySolution`	513	516	+3
total			+4

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

cc @adcoelho

Fixes #151723 This PR adds a way for users to: View a list of all files attached to a case(with pagination). Attach files to a case. Preview image files attached to a case. Search for files attached to a case by file name. Download files attached to a case.

Fixes #151595 ## Summary In this PR we will be merging a feature branch into `main`. This feature branch is a collection of several different PRs with file functionality for cases. - #152941 - #153957 - #154432 - #153853 Most of the code was already reviewed so this will mainly be used for testing. - Files tab in the case detail view. - Attach files to a case. - View a list of all files attached to a case (with pagination). - Preview image files attached to a case. - Search for files attached to a case by file name. - Download files attached to a case. - Users are now able to see file activity in the case detail view. - Image files have a different icon and a clickable file name to preview. - Other files have a standard "document" icon and the name is not clickable. - The file can be downloaded by clicking the download icon. ## Release notes Support file attachments in Cases. --------- Co-authored-by: kibanamachine <[email protected]>

adcoelho added enhancement New value added to drive a business result Team:ResponseOps Label for the ResponseOps team (formerly the Cases and Alerting teams) Feature:Cases Cases feature v8.8.0 labels Mar 8, 2023

adcoelho self-assigned this Mar 8, 2023