[8.7] [DOCS] Refresh and automate screenshots for connector logs (#153510) (#153588)

# Backport

This will backport the following commits from `main` to `8.7`:
- [[DOCS] Refresh and automate screenshots for connector logs
(#153510)](https://github.com/elastic/kibana/pull/153510)

<!--- 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-03-23T18:27:00Z","message":"[DOCS]
Refresh and automate screenshots for connector logs
(#153510)","sha":"552e47280da717c97a958050c9ca06c43b68112f","branchLabelMapping":{"^v8.8.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:ResponseOps","docs","Feature:Actions/ConnectorsManagement","v8.7.0","v8.8.0"],"number":153510,"url":"https://github.com/elastic/kibana/pull/153510","mergeCommit":{"message":"[DOCS]
Refresh and automate screenshots for connector logs
(#153510)","sha":"552e47280da717c97a958050c9ca06c43b68112f"}},"sourceBranch":"main","suggestedTargetBranches":["8.7"],"targetPullRequestStates":[{"branch":"8.7","label":"v8.7.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.8.0","labelRegex":"^v8.8.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/153510","number":153510,"mergeCommit":{"message":"[DOCS]
Refresh and automate screenshots for connector logs
(#153510)","sha":"552e47280da717c97a958050c9ca06c43b68112f"}}]}]
BACKPORT-->

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

docs/management/action-types.asciidoc

@@ -119,12 +119,14 @@ connector types.
 
 [role="screenshot"]
 image::images/connector-filter-by-type.png[Filtering the connector list by types of connectors]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
 You can delete individual connectors using the trash icon. Alternatively, select
 multiple connectors and delete them in bulk using the *Delete* button. 
 
 [role="screenshot"]
 image::images/connector-delete.png[Deleting connectors individually or in bulk]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
 [NOTE]
 ============================================================================
@@ -165,7 +167,7 @@ button appears in *{connectors-ui}*.
 image::images/connectors-with-missing-secrets.png[Connectors with missing secrets]
 
 [float]
-[[montoring-connectors]]
+[[monitoring-connectors]]
 === Monitoring connectors
 
 The <<task-manager-health-monitoring,Task Manager health API>> helps you understand the performance of all tasks in your environment.

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

@@ -41,6 +41,7 @@ export default function ({ getPageObject, getService, loadTestFile }: FtrProvide
 
     loadTestFile(require.resolve('./stack_alerting'));
     loadTestFile(require.resolve('./stack_cases'));
+    loadTestFile(require.resolve('./stack_connectors'));
     loadTestFile(require.resolve('./observability_cases'));
   });
 }

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

@@ -29,7 +29,6 @@ export default function ({ loadTestFile, getService }: FtrProviderContext) {
     });
 
     loadTestFile(require.resolve('./list_view'));
-    loadTestFile(require.resolve('./connector_types'));
     loadTestFile(require.resolve('./index_threshold_rule'));
     loadTestFile(require.resolve('./tracking_containment_rule'));
   });

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

@@ -44,17 +44,6 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await rules.api.deleteRule(ruleId);
     });
 
-    it('connectors list screenshot', async () => {
-      await pageObjects.common.navigateToApp('connectors');
-      await pageObjects.header.waitUntilLoadingHasFinished();
-      await commonScreenshots.takeScreenshot(
-        'connector-listing',
-        screenshotDirectories,
-        1400,
-        1024
-      );
-    });
-
     it('rules list screenshot', async () => {
       await pageObjects.common.navigateToApp('triggersActions');
       await pageObjects.header.waitUntilLoadingHasFinished();

x-pack/test/screenshot_creation/apps/response_ops_docs/stack_connectors/connector_types.ts

@@ -9,7 +9,7 @@ import { FtrProviderContext } from '../../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const commonScreenshots = getService('commonScreenshots');
-  const screenshotDirectories = ['response_ops_docs', 'stack_alerting'];
+  const screenshotDirectories = ['response_ops_docs', 'stack_connectors'];
   const pageObjects = getPageObjects(['common', 'header']);
   const actions = getService('actions');
   const testSubjects = getService('testSubjects');

x-pack/test/screenshot_creation/apps/response_ops_docs/stack_connectors/connectors.ts

@@ -0,0 +1,52 @@
+/*
+ * 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 browser = getService('browser');
+  const find = getService('find');
+  const testSubjects = getService('testSubjects');
+  const screenshotDirectories = ['response_ops_docs', 'stack_connectors'];
+  const pageObjects = getPageObjects(['common', 'header']);
+
+  describe('connectors', function () {
+    it('connectors list screenshot', async () => {
+      await pageObjects.common.navigateToApp('connectors');
+      await pageObjects.header.waitUntilLoadingHasFinished();
+      await commonScreenshots.takeScreenshot(
+        'connector-listing',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+
+      const searchBox = await find.byCssSelector('[data-test-subj="actionsList"] .euiFieldSearch');
+      await searchBox.click();
+      await searchBox.clearValue();
+      await searchBox.type('my actionTypeId:(.index)');
+      await searchBox.pressKeys(browser.keys.ENTER);
+      const typeFilter = await find.byCssSelector(
+        '[data-test-subj="actionsList"] .euiFilterButton'
+      );
+      await typeFilter.click();
+      await commonScreenshots.takeScreenshot(
+        'connector-filter-by-type',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+
+      const clearSearchButton = await testSubjects.find('clearSearchButton');
+      await clearSearchButton.click();
+      const checkAllButton = await testSubjects.find('checkboxSelectAll');
+      await checkAllButton.click();
+      await commonScreenshots.takeScreenshot('connector-delete', screenshotDirectories, 1400, 1024);
+    });
+  });
+}

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

@@ -0,0 +1,59 @@
+/*
+ * 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 ({ loadTestFile, getService }: FtrProviderContext) {
+  const actions = getService('actions');
+  const browser = getService('browser');
+  const es = getService('es');
+  const rules = getService('rules');
+  const testIndex = `test-index`;
+
+  describe('stack connectors', function () {
+    before(async () => {
+      await browser.setWindowSize(1920, 1080);
+      await actions.api.createConnector({
+        name: 'server-log-connector',
+        config: {},
+        secrets: {},
+        connectorTypeId: '.server-log',
+      });
+
+      await es.indices.create({
+        index: testIndex,
+        body: {
+          mappings: {
+            properties: {
+              date_updated: {
+                type: 'date',
+                format: 'epoch_millis',
+              },
+            },
+          },
+        },
+      });
+      await actions.api.createConnector({
+        name: 'my-index-connector',
+        config: {
+          index: testIndex,
+        },
+        secrets: {},
+        connectorTypeId: '.index',
+      });
+    });
+
+    after(async () => {
+      await rules.api.deleteAllRules();
+      await actions.api.deleteAllConnectors();
+      await es.indices.delete({ index: testIndex });
+    });
+
+    loadTestFile(require.resolve('./connectors'));
+    loadTestFile(require.resolve('./connector_types'));
+  });
+}