[DOCS] Case file attachments

docs/management/cases/manage-cases.asciidoc

@@ -24,14 +24,34 @@ information, refer to <<add-case-connectors>>.
 
 . After you've completed all of the required fields, click *Create case*.
 
+[[add-case-files]]
+=== Add files
+
+After you create a case, you can upload and manage files on the *Files* tab:
+
+[role="screenshot"]
+image::images/cases-files.png[A list of files attached to a case]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
+
+The acceptable file types and sizes are affected by your <<cases-settings,case settings>>.
+
+When you upload a file, a comment is added to the case activity log.
+To view images, click their name in the activity or file list.
+
+[NOTE]
+============================================================================
+Uploaded files are also accessible in *{stack-manage-app} > Files*.
+When you export cases as <<managing-saved-objects,saved objects>>, the case files are not exported.
+============================================================================
+
 [[add-case-visualization]]
 === Add a visualization
 
-After you create a case, you can optionally add a visualization. For
-example, you can portray event and alert data through charts and graphs.
+You can also optionally add visualizations.
+For example, you can portray event and alert data through charts and graphs.
 
 [role="screenshot"]
-image::images/cases-visualization.png[Cases page]
+image::images/cases-visualization.png[Adding a visualization as a comment within a case]
 // NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
 To add a visualization to a comment within your case:

x-pack/test/screenshot_creation/apps/response_ops_docs/stack_cases/details_view.ts

@@ -6,28 +6,56 @@
  */
 
 import { FtrProviderContext } from '../../../ftr_provider_context';
+import { createAndUploadFile } from '../../../../cases_api_integration/common/lib/api';
+import { CASES_FILE_KIND } from '../../../../cases_api_integration/common/lib/constants';
 
 export default function ({ getService }: FtrProviderContext) {
   const cases = getService('cases');
   const commonScreenshots = getService('commonScreenshots');
+  const testSubjects = getService('testSubjects');
 
   const screenshotDirectories = ['response_ops_docs', 'stack_cases'];
+  const supertest = getService('supertest');
   let CASE_ID: string;
+  let CASE_OWNER: string;
 
   describe('details view', function () {
     before(async () => {
-      const { id: caseId } = await cases.api.createCase({
+      const testCase = await cases.api.createCase({
         title: 'Web transactions',
         tags: ['e-commerce'],
         description: 'Investigate e-commerce sample data.',
       });
-      CASE_ID = caseId;
+      CASE_ID = testCase.id;
+      CASE_OWNER = testCase.owner;
+
+      await createAndUploadFile({
+        supertest,
+        createFileParams: {
+          name: 'testfile',
+          kind: CASES_FILE_KIND,
+          mimeType: 'image/png',
+          meta: {
+            caseIds: [CASE_ID],
+            owner: [CASE_OWNER],
+          },
+        },
+        data: 'abc',
+      });
     });
 
     after(async () => {
       await cases.api.deleteAllCases();
     });
 
+    it('case files screenshot', async () => {
+      await cases.navigation.navigateToApp();
+      await cases.navigation.navigateToSingleCase('cases', CASE_ID);
+      const filesTab = await testSubjects.find('case-view-tab-title-files');
+      await filesTab.click();
+      await commonScreenshots.takeScreenshot('cases-files', screenshotDirectories, 1400, 1024);
+    });
+
     it('cases visualization screenshot', async () => {
       await cases.navigation.navigateToApp();
       await cases.navigation.navigateToSingleCase('cases', CASE_ID);