[DOCS] Custom fields in cases (#169057)

docs/management/cases/add-connectors.asciidoc

@@ -1,10 +1,12 @@
 [[add-case-connectors]]
-== Add connectors
-
+== Add connectors to cases
 :frontmatter-description: Configure connectors to push case details to external incident management systems.
 :frontmatter-tags-products: [kibana]
 :frontmatter-tags-content-type: [how-to] 
 :frontmatter-tags-user-goals: [configure]
+++++
+<titleabbrev>Add connectors</titleabbrev>
+++++
 
 You can add connectors to cases to push information to these external incident
 management systems:
@@ -23,6 +25,11 @@ appropriate {kib} feature privileges. Refer to <<setup-cases>>.
 [[create-case-connectors]]
 == Create connectors
 
+:frontmatter-description: Open and track issues in {kib} cases. 
+:frontmatter-tags-products: [kibana]
+:frontmatter-tags-content-type: [overview] 
+:frontmatter-tags-user-goals: [analyze]
+
 You can create connectors in *{stack-manage-app} > {connectors-ui}*,
 as described in <<action-types>>. Alternatively, you can create them in
 *{stack-manage-app} > Cases*:
@@ -31,7 +38,7 @@ as described in <<action-types>>. Alternatively, you can create them in
 +
 --
 [role="screenshot"]
-image::images/cases-connectors.png[]
+image::images/cases-settings.png[View case settings]
 // NOTE: This is an autogenerated screenshot. Do not edit it directly.
 --
 

docs/management/cases/index.asciidoc

@@ -1,4 +1,4 @@
 include::cases.asciidoc[]
 include::setup-cases.asciidoc[leveloffset=+1]
 include::manage-cases.asciidoc[leveloffset=+1]
-include::add-connectors.asciidoc[leveloffset=+1]
+include::add-connectors.asciidoc[leveloffset=+1]

docs/management/cases/manage-cases.asciidoc

@@ -12,6 +12,12 @@
 Open a new case to keep track of issues and share their details with colleagues.
 
 . Go to *Management > {stack-manage-app} > Cases*, then click *Create case*.
++
+--
+[role="screenshot"]
+image::images/cases-create.png[Create a case in {stack-manage-app}]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
+--
 
 . Give the case a name, severity, and description.
 +
@@ -22,11 +28,90 @@ text.
 . Optionally, add a category, assignees, and tags.
 You can add users only if they meet the necessary <<setup-cases,prerequisites>>.
 
-. For *External incident management system*, select a connector. For more
+. preview:[] If you defined any custom fields, they appear in the *Additional fields* section.
+Check out <<case-custom-fields>>.
+
+. For the *External incident management system*, select a connector. For more
 information, refer to <<add-case-connectors>>.
 
 . After you've completed all of the required fields, click *Create case*.
 
+[[case-custom-fields]]
+=== Add custom fields
+
+preview::[]
+
+You can add optional and required fields for customized case collaboration.
+
+. Go to *{stack-manage-app} > Cases* and click *Settings*.
++
+--
+[role="screenshot"]
+image::images/cases-custom-fields-view.png[View custom fields in case settings]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
+
+NOTE: To view and change case settings, you must have the appropriate {kib} feature privileges. Refer to <<setup-cases>>.
+--
+
+. In the *Custom fields* section, click *Add field*.
++
+--
+[role="screenshot"]
+image::images/cases-custom-fields-add.png[Add a custom field in case settings]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
+--
+
+. Enter a field label.
+
+. Choose a field type: text or toggle.
+
+. If you want the text field to be mandatory in all cases, select *Make this field required*.
+
+. Click *Save field*.
+
+You can subsequently remove or edit custom fields on the *Settings* page.
+
+After you create custom fields, they're added to all new and existing cases.
+
+Existing cases have null values for the new text fields until you set them in each case.
+For example, you must click the pencil icon next to `my-field` to set it:
+
+[role="screenshot"]
+image::images/cases-custom-fields.png[A case that has an unset custom field]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
+
+[[add-case-notifications]]
+=== Add email notifications
+
+You can configure email notifications that occur when users are assigned to
+cases.
+
+For hosted {kib} on {ess}:
+
+. Add the email domains to the {cloud}/ec-organizations-notifications-domain-allowlist.html[notifications domain allowlist].
++
+--
+You do not need to take any more steps to configure an email connector or update
+{kib} user settings, since the preconfigured Elastic-Cloud-SMTP connector is
+used by default.
+--
+
+For self-managed {kib}:
+
+. Create a preconfigured email connector.
++
+--
+NOTE: At this time, email notifications support only preconfigured connectors,
+which are defined in the `kibana.yml` file.
+For examples, refer to <<preconfigured-email-configuration>> and <<configuring-email>>.
+--
+. Set the `notifications.connectors.default.email` {kib} setting to the name of
+your email connector.
+. If you want the email notifications to contain links back to the case, you
+must configure the <<server-publicBaseUrl,server.publicBaseUrl>> setting.
+
+When you subsequently add assignees to cases, they receive an email.
+
 [[add-case-files]]
 === Add files
 
@@ -48,7 +133,7 @@ When you export cases as <<managing-saved-objects,saved objects>>, the case file
 ============================================================================
 
 [[add-case-visualization]]
-=== Add a visualization
+=== Add visualizations
 
 You can also optionally add visualizations.
 For example, you can portray event and alert data through charts and graphs.
@@ -79,40 +164,6 @@ Alternatively, while viewing a <<dashboard,dashboard>> you can open a panel's me
 
 After a visualization has been added to a case, you can modify or interact with it by clicking the *Open Visualization* option in the case's comment menu.
 
-[[add-case-notifications]]
-=== Add email notifications
-
-// tag::case-notifications[]
-You can configure email notifications that occur when users are assigned to
-cases.
-
-For hosted {kib} on {ess}:
-
-. Add the email domains to the {cloud}/ec-organizations-notifications-domain-allowlist.html[notifications domain allowlist].
-+
---
-You do not need to take any more steps to configure an email connector or update
-{kib} user settings, since the preconfigured Elastic-Cloud-SMTP connector is
-used by default.
---
-
-For self-managed {kib}:
-
-. Create a preconfigured email connector.
-+
---
-NOTE: At this time, email notifications support only preconfigured connectors,
-which are defined in the `kibana.yml` file.
-For examples, refer to <<preconfigured-email-configuration>> and <<configuring-email>>.
---
-. Set the `notifications.connectors.default.email` {kib} setting to the name of
-your email connector.
-. If you want the email notifications to contain links back to the case, you
-must configure the <<server-publicBaseUrl,server.publicBaseUrl>> setting.
-
-When you subsequently add assignees to cases, they receive an email.
-// end::case-notifications[]
-
 [[manage-case]]
 === Manage cases
 

docs/management/cases/setup-cases.asciidoc

@@ -13,7 +13,7 @@ privileges:
 |=== 
 
 | Action | {kib} privileges
-| Give full access to manage cases 
+| Give full access to manage cases and settings
 a|
 * `All` for the *Cases* feature under *Management*.
 * `All` for the *{connectors-feature}* feature under *Management*.

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

@@ -0,0 +1,53 @@
+/*
+ * 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 { FtrProviderContext } from '../../../ftr_provider_context';
+export default function ({ getPageObject, getService }: FtrProviderContext) {
+  const cases = getService('cases');
+  const commonScreenshots = getService('commonScreenshots');
+  const find = getService('find');
+  const header = getPageObject('header');
+  const testSubjects = getService('testSubjects');
+  const screenshotDirectories = ['response_ops_docs', 'stack_cases'];
+
+  describe('add custom fields', function () {
+    it('case settings screenshot', async () => {
+      await cases.navigation.navigateToApp();
+      await cases.navigation.navigateToConfigurationPage();
+      await testSubjects.click('add-custom-field');
+      await commonScreenshots.takeScreenshot(
+        'cases-custom-fields-add',
+        screenshotDirectories,
+        1400,
+        600
+      );
+      await testSubjects.setValue('custom-field-label-input', 'my-field');
+      await testSubjects.click('custom-field-flyout-save');
+      await commonScreenshots.takeScreenshot(
+        'cases-custom-fields-view',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+      await cases.navigation.navigateToApp();
+      await cases.casesTable.waitForCasesToBeListed();
+      await cases.casesTable.goToFirstListedCase();
+      await header.waitUntilLoadingHasFinished();
+      await find.byCssSelector('[data-test-subj="no-custom-field-value"]');
+      await commonScreenshots.takeScreenshot(
+        'cases-custom-fields',
+        screenshotDirectories,
+        1400,
+        1400
+      );
+      await cases.navigation.navigateToApp();
+      await testSubjects.click('createNewCaseBtn');
+      await commonScreenshots.takeScreenshot('cases-create', screenshotDirectories, 1400, 1900);
+      await testSubjects.click('create-case-cancel');
+    });
+  });
+}

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

@@ -6,61 +6,24 @@
  */
 
 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';
+import { caseTitle } from '.';
 
 export default function ({ getService }: FtrProviderContext) {
+  const browser = getService('browser');
   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 testCase = await cases.api.createCase({
-        title: 'Web transactions',
-        tags: ['e-commerce'],
-        description: 'Investigate e-commerce sample data.',
-      });
-      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 () => {
+    it('case details screenshots', 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);
+      await testSubjects.setValue('search-cases', caseTitle);
+      await browser.pressKeys(browser.keys.ENTER);
+      const caseLink = await testSubjects.find('case-details-link');
+      await caseLink.click();
       await cases.singleCase.addVisualizationToNewComment('[Logs] Bytes distribution');
-
       await cases.singleCase.openVisualizationButtonTooltip();
       await commonScreenshots.takeScreenshot(
         'cases-visualization',
@@ -68,6 +31,9 @@ export default function ({ getService }: FtrProviderContext) {
         1400,
         1024
       );
+      const filesTab = await testSubjects.find('case-view-tab-title-files');
+      await filesTab.click();
+      await commonScreenshots.takeScreenshot('cases-files', screenshotDirectories, 1400, 1024);
     });
   });
 }

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

@@ -17,7 +17,7 @@ export default function ({ getService }: FtrProviderContext) {
     it('cases configure screenshot', async () => {
       await cases.navigation.navigateToApp();
       await cases.navigation.navigateToConfigurationPage();
-      await commonScreenshots.takeScreenshot('cases-connectors', screenshotDirectories, 1400, 1024);
+      await commonScreenshots.takeScreenshot('cases-settings', screenshotDirectories, 1400, 1024);
     });
   });
 }

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

@@ -5,12 +5,50 @@
  * 2.0.
  */
 
+import { AttachmentType } from '@kbn/cases-plugin/common/types/domain';
+import { createAndUploadFile } from '../../../../cases_api_integration/common/lib/api';
+import { CASES_FILE_KIND } from '../../../../cases_api_integration/common/lib/constants';
 import { FtrProviderContext } from '../../../ftr_provider_context';
 
-export default function ({ loadTestFile }: FtrProviderContext) {
+export const caseTitle = 'Web transactions';
+
+export default function ({ getService, loadTestFile }: FtrProviderContext) {
+  const cases = getService('cases');
+  const supertest = getService('supertest');
+
   describe('stack cases', function () {
+    before(async () => {
+      const { id: caseId, owner: caseOwner } = await cases.api.createCase({
+        title: caseTitle,
+        tags: ['e-commerce'],
+        description: 'Investigate e-commerce sample data.',
+      });
+      await cases.api.createAttachment({
+        caseId,
+        params: { comment: 'test comment', type: AttachmentType.user, owner: caseOwner },
+      });
+      await createAndUploadFile({
+        supertest,
+        createFileParams: {
+          name: 'testfile',
+          kind: CASES_FILE_KIND,
+          mimeType: 'image/png',
+          meta: {
+            caseIds: [caseId],
+            owner: [caseOwner],
+          },
+        },
+        data: 'abc',
+      });
+    });
+
+    after(async () => {
+      await cases.api.deleteAllCases();
+    });
+
     loadTestFile(require.resolve('./list_view'));
     loadTestFile(require.resolve('./details_view'));
     loadTestFile(require.resolve('./external_connections'));
+    loadTestFile(require.resolve('./custom_fields'));
   });
 }

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

@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { AttachmentType } from '@kbn/cases-plugin/common/types/domain';
 import { FtrProviderContext } from '../../../ftr_provider_context';
 
 export default function ({ getService }: FtrProviderContext) {
@@ -15,22 +14,6 @@ export default function ({ getService }: FtrProviderContext) {
   const screenshotDirectories = ['response_ops_docs', 'stack_cases'];
 
   describe('list view', function () {
-    before(async () => {
-      const { id: caseId } = await cases.api.createCase({
-        title: 'Web transactions',
-        tags: ['e-commerce'],
-        description: 'Investigate e-commerce sample data.',
-      });
-      await cases.api.createAttachment({
-        caseId,
-        params: { comment: 'test comment', type: AttachmentType.user, owner: 'cases' },
-      });
-    });
-
-    after(async () => {
-      await cases.api.deleteAllCases();
-    });
-
     it('cases list screenshot', async () => {
       await cases.navigation.navigateToApp();
       await commonScreenshots.takeScreenshot('cases', screenshotDirectories, 1400, 1024);