[8.7] [DOCS] Automate email-params-test.png, add title in connector table rows (#155469) (#155563)

# Backport

This will backport the following commits from `main` to `8.7`:
- [[DOCS] Automate email-params-test.png, add title in connector table
rows (#155469)](https://github.com/elastic/kibana/pull/155469)

<!--- 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-04-21T19:19:33Z","message":"[DOCS]
Automate email-params-test.png, add title in connector table rows
(#155469)","sha":"e1b3bc259aecec5aff8e69b837b5723ba215a244","branchLabelMapping":{"^v8.8.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","Team:ResponseOps","docs","Feature:Actions/ConnectorTypes","backport:prev-minor","v8.8.0"],"number":155469,"url":"https://github.com/elastic/kibana/pull/155469","mergeCommit":{"message":"[DOCS]
Automate email-params-test.png, add title in connector table rows
(#155469)","sha":"e1b3bc259aecec5aff8e69b837b5723ba215a244"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v8.8.0","labelRegex":"^v8.8.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/155469","number":155469,"mergeCommit":{"message":"[DOCS]
Automate email-params-test.png, add title in connector table rows
(#155469)","sha":"e1b3bc259aecec5aff8e69b837b5723ba215a244"}}]}]
BACKPORT-->

docs/management/connectors/action-types/email.asciidoc

@@ -183,6 +183,7 @@ as you're creating or editing the connector in {kib}. For example:
 
 [role="screenshot"]
 image::management/connectors/images/email-params-test.png[Email params test]
+// NOTE: This is an autogenerated screenshot. Do not edit it directly.
 
 Email actions have the following configuration properties.
 

x-pack/plugins/triggers_actions_ui/public/application/sections/actions_connectors_list/components/actions_connectors_list.tsx

@@ -234,6 +234,7 @@ const ActionsConnectorsList: React.FunctionComponent = () => {
           <>
             <EuiLink
               data-test-subj={`edit${item.id}`}
+              title={name}
               onClick={() => editItem(item, EditConnectorTabs.Configuration)}
               key={item.id}
               disabled={actionTypesIndex ? !actionTypesIndex[item.actionTypeId]?.enabled : true}

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

@@ -12,8 +12,10 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const screenshotDirectories = ['response_ops_docs', 'stack_connectors'];
   const pageObjects = getPageObjects(['common', 'header']);
   const actions = getService('actions');
-  const testSubjects = getService('testSubjects');
+  const browser = getService('browser');
   const comboBox = getService('comboBox');
+  const find = getService('find');
+  const testSubjects = getService('testSubjects');
   const testIndex = `test-index`;
   const indexDocument =
     `{\n` +
@@ -21,13 +23,36 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
     `"rule_name": "{{rule.name}}",\n` +
     `"alert_id": "{{alert.id}}",\n` +
     `"context_message": "{{context.message}}"\n`;
+  const emailConnectorName = 'my-email-connector';
 
   describe('connector types', function () {
+    let emailConnectorId: string;
+    before(async () => {
+      ({ id: emailConnectorId } = await actions.api.createConnector({
+        name: emailConnectorName,
+        config: {
+          service: 'other',
+          from: 'bob@example.com',
+          host: 'some.non.existent.com',
+          port: 25,
+        },
+        secrets: {
+          user: 'bob',
+          password: 'supersecret',
+        },
+        connectorTypeId: '.email',
+      }));
+    });
+
     beforeEach(async () => {
       await pageObjects.common.navigateToApp('connectors');
       await pageObjects.header.waitUntilLoadingHasFinished();
     });
 
+    after(async () => {
+      await actions.api.deleteConnector(emailConnectorId);
+    });
+
     it('server log connector screenshots', async () => {
       await pageObjects.common.navigateToApp('connectors');
       await pageObjects.header.waitUntilLoadingHasFinished();
@@ -69,5 +94,31 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       const flyOutCancelButton = await testSubjects.find('euiFlyoutCloseButton');
       await flyOutCancelButton.click();
     });
+
+    it('test email connector screenshots', async () => {
+      const searchBox = await find.byCssSelector('[data-test-subj="actionsList"] .euiFieldSearch');
+      await searchBox.click();
+      await searchBox.clearValue();
+      await searchBox.type('my actionTypeId:(.email)');
+      await searchBox.pressKeys(browser.keys.ENTER);
+      const connectorList = await testSubjects.find('actionsTable');
+      const emailConnector = await connectorList.findByCssSelector(
+        `[title="${emailConnectorName}"]`
+      );
+      await emailConnector.click();
+      const testButton = await testSubjects.find('testConnectorTab');
+      await testButton.click();
+      await testSubjects.setValue('comboBoxSearchInput', 'elastic@gmail.com');
+      await testSubjects.setValue('subjectInput', 'Test subject');
+      await testSubjects.setValue('messageTextArea', 'Enter message text');
+      /* timing issue sometimes happens with the combobox so we just try to set the subjectInput again */
+      await testSubjects.setValue('subjectInput', 'Test subject');
+      await commonScreenshots.takeScreenshot(
+        'email-params-test',
+        screenshotDirectories,
+        1400,
+        1024
+      );
+    });
   });
 }