[8.6] [DOCS] Automate screenshot for case connectors (#149178) (#149265)

# Backport

This will backport the following commits from `main` to `8.6`:
- [[DOCS] Automate screenshot for case connectors
(#149178)](https://github.com/elastic/kibana/pull/149178)

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

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

<!--BACKPORT [{"author":{"name":"Lisa
Cawley","email":"lcawley@elastic.co"},"sourceCommit":{"committedDate":"2023-01-19T20:55:41Z","message":"[DOCS]
Automate screenshot for case connectors
(#149178)","sha":"7e4f21c73f58146b9216bf69105d8620bdf8eab1","branchLabelMapping":{"^v8.7.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:ResponseOps","docs","Feature:Cases","backport:prev-minor","v8.7.0"],"number":149178,"url":"https://github.com/elastic/kibana/pull/149178","mergeCommit":{"message":"[DOCS]
Automate screenshot for case connectors
(#149178)","sha":"7e4f21c73f58146b9216bf69105d8620bdf8eab1"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.7.0","labelRegex":"^v8.7.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/149178","number":149178,"mergeCommit":{"message":"[DOCS]
Automate screenshot for case connectors
(#149178)","sha":"7e4f21c73f58146b9216bf69105d8620bdf8eab1"}}]}]
BACKPORT-->

Co-authored-by: Lisa Cawley <lcawley@elastic.co>

docs/management/cases/add-connectors.asciidoc

@@ -26,8 +26,11 @@ as described in <<action-types>>. Alternatively, you can create them in
 
 . Click *Edit external connection*.
 +
+--
 [role="screenshot"]
 image::images/cases-connectors.png[]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
+--
 
 . From the *Incident management system* list, select *Add new connector*.
 

docs/management/cases/cases.asciidoc

@@ -10,6 +10,7 @@ management systems by configuring connectors.
 
 [role="screenshot"]
 image::images/cases.png[Cases page]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
 NOTE: If you create cases in the {observability} or {security-app}, they are not
 visible in *{stack-manage-app}*. Likewise, the cases you create in

docs/management/cases/manage-cases.asciidoc

@@ -32,6 +32,7 @@ example, you can portray event and alert data through charts and graphs.
 
 [role="screenshot"]
 image::images/cases-visualization.png[Cases page]
+// 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

@@ -14,7 +14,7 @@ export default function ({ getService }: FtrProviderContext) {
   const screenshotDirectories = ['response_ops_docs', 'stack_cases'];
   let CASE_ID: string;
 
-  describe('deatils view', function () {
+  describe('details view', function () {
     before(async () => {
       const { id: caseId } = await cases.api.createCase({
         title: 'Web transactions',

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

@@ -0,0 +1,23 @@
+/*
+ * 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 }: FtrProviderContext) {
+  const cases = getService('cases');
+  const commonScreenshots = getService('commonScreenshots');
+
+  const screenshotDirectories = ['response_ops_docs', 'stack_cases'];
+
+  describe('edit external connections', function () {
+    it('cases configure screenshot', async () => {
+      await cases.navigation.navigateToApp();
+      await cases.navigation.navigateToConfigurationPage();
+      await commonScreenshots.takeScreenshot('cases-connectors', screenshotDirectories, 1400, 1024);
+    });
+  });
+}

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

@@ -11,5 +11,6 @@ export default function ({ loadTestFile }: FtrProviderContext) {
   describe('stack cases', function () {
     loadTestFile(require.resolve('./list_view'));
     loadTestFile(require.resolve('./details_view'));
+    loadTestFile(require.resolve('./external_connections'));
   });
 }