[8.11] [DOCS] Automate Observability and Security case setting screen…

…shots (#168774) (#169509)

# Backport

This will backport the following commits from `main` to `8.11`:
- [[DOCS] Automate Observability and Security case setting screenshots
(#168774)](#168774)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Lisa
Cawley","email":"[email protected]"},"sourceCommit":{"committedDate":"2023-10-23T11:27:16Z","message":"[DOCS]
Automate Observability and Security case setting screenshots
(#168774)","sha":"6adb8bde2b969671abddb66a019b0253bc511cfd","branchLabelMapping":{"^v8.12.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:ResponseOps","docs","Feature:Cases","backport:prev-minor","v8.11.0","v8.12.0"],"number":168774,"url":"https://github.com/elastic/kibana/pull/168774","mergeCommit":{"message":"[DOCS]
Automate Observability and Security case setting screenshots
(#168774)","sha":"6adb8bde2b969671abddb66a019b0253bc511cfd"}},"sourceBranch":"main","suggestedTargetBranches":["8.11"],"targetPullRequestStates":[{"branch":"8.11","label":"v8.11.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.12.0","labelRegex":"^v8.12.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/168774","number":168774,"mergeCommit":{"message":"[DOCS]
Automate Observability and Security case setting screenshots
(#168774)","sha":"6adb8bde2b969671abddb66a019b0253bc511cfd"}}]}]
BACKPORT-->

Co-authored-by: Lisa Cawley <[email protected]>

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

@@ -0,0 +1,40 @@
+/*
+ * 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 ({ getPageObjects, getService }: FtrProviderContext) {
+  const cases = getService('cases');
+  const commonScreenshots = getService('commonScreenshots');
+  const pageObjects = getPageObjects(['common', 'header']);
+  const screenshotDirectories = ['response_ops_docs', 'observability_cases'];
+  const testSubjects = getService('testSubjects');
+
+  describe('Observability case settings and custom fields', function () {
+    it('case settings screenshots', async () => {
+      await cases.navigation.navigateToApp('observability/cases', 'cases-all-title');
+      await pageObjects.header.waitUntilLoadingHasFinished();
+      await testSubjects.click('configure-case-button');
+      await commonScreenshots.takeScreenshot('cases-settings', screenshotDirectories);
+      await testSubjects.click('add-custom-field');
+      await commonScreenshots.takeScreenshot(
+        'cases-add-custom-field',
+        screenshotDirectories,
+        1400,
+        600
+      );
+      await testSubjects.setValue('custom-field-label-input', 'my-field');
+      await testSubjects.click('custom-field-flyout-save');
+      await commonScreenshots.takeScreenshot(
+        'cases-custom-field-settings',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+    });
+  });
+}

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

@@ -10,5 +10,6 @@ import { FtrProviderContext } from '../../../ftr_provider_context';
 export default function ({ loadTestFile }: FtrProviderContext) {
   describe('observability cases', function () {
     loadTestFile(require.resolve('./list_view'));
+    loadTestFile(require.resolve('./custom_fields'));
   });
 }

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

@@ -96,5 +96,11 @@ export default function ({ getPageObject, getService }: FtrProviderContext) {
         1024
       );
     });
+
+    it('case settings screenshot', async () => {
+      await cases.navigation.navigateToApp('observability/cases', 'cases-all-title');
+      await testSubjects.click('configure-case-button');
+      await commonScreenshots.takeScreenshot('add-case-connector', screenshotDirectories);
+    });
   });
 }

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

@@ -0,0 +1,39 @@
+/*
+ * 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 ({ getService, getPageObjects }: FtrProviderContext) {
+  const commonScreenshots = getService('commonScreenshots');
+  const pageObjects = getPageObjects(['common', 'header']);
+  const screenshotDirectories = ['response_ops_docs', 'security_cases'];
+  const testSubjects = getService('testSubjects');
+
+  describe('Security case settings and custom fields', function () {
+    it('case settings screenshots', async () => {
+      await pageObjects.common.navigateToApp('security', { path: 'cases' });
+      await pageObjects.header.waitUntilLoadingHasFinished();
+      await testSubjects.click('configure-case-button');
+      await commonScreenshots.takeScreenshot('cases-settings', screenshotDirectories);
+      await testSubjects.click('add-custom-field');
+      await commonScreenshots.takeScreenshot(
+        'cases-add-custom-field',
+        screenshotDirectories,
+        1400,
+        600
+      );
+      await testSubjects.setValue('custom-field-label-input', 'my-field');
+      await testSubjects.click('custom-field-flyout-save');
+      await commonScreenshots.takeScreenshot(
+        'cases-custom-field-settings',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+    });
+  });
+}

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

@@ -10,5 +10,6 @@ import { FtrProviderContext } from '../../../ftr_provider_context';
 export default function ({ loadTestFile }: FtrProviderContext) {
   describe('security cases', function () {
     loadTestFile(require.resolve('./list_view'));
+    loadTestFile(require.resolve('./custom_fields'));
   });
 }