Merge branch '7.8' into backport/7.8/pr-70672

docs/apm/api.asciidoc

@@ -355,6 +355,7 @@ allowing you to easily see how these events are impacting the performance of you
 
 By default, annotations are stored in a newly created `observability-annotations` index.
 The name of this index can be changed in your `config.yml` by editing `xpack.observability.annotations.index`.
+If you change the default index name, you'll also need to <<apm-app-annotation-user-create,update your user privileges>> accordingly.
 
 The following APIs are available:
 

docs/apm/apm-app-users.asciidoc

@@ -4,7 +4,7 @@
 
 :beat_default_index_prefix: apm
 :beat_kib_app: APM app
-:annotation_index: `observability-annotations`
+:annotation_index: observability-annotations
 
 ++++
 <titleabbrev>Users and privileges</titleabbrev>
@@ -102,6 +102,54 @@ Here are two examples:
 ***********************************  ***********************************
 ////
 
+[role="xpack"]
+[[apm-app-annotation-user-create]]
+=== APM app annotation user
+
+++++
+<titleabbrev>Create an annotation user</titleabbrev>
+++++
+
+NOTE: By default, the `apm_user` built-in role provides access to Observability annotations.
+You only need to create an annotation user if the default annotation index
+defined in <<apm-settings-kb,`xpack.observability.annotations.index`>> has been customized.
+
+[[apm-app-annotation-user]]
+==== Annotation user
+
+View deployment annotations in the APM app.
+
+. Create a new role, named something like `annotation_user`,
+and assign the following privileges:
++
+[options="header"]
+|====
+|Type | Privilege | Purpose
+
+|Index
+|`read` on +\{ANNOTATION_INDEX\}+^1^
+|Read-only access to the observability annotation index
+
+|Index
+|`view_index_metadata` on +\{ANNOTATION_INDEX\}+^1^
+|Read-only access to observability annotation index metadata
+|====
++
+^1^ +\{ANNOTATION_INDEX\}+ should be the index name you've defined in
+<<apm-settings-kb,`xpack.observability.annotations.index`>>.
+
+. Assign the `annotation_user` created previously, and the built-in roles necessary to create
+a <<apm-app-reader-full,full>> or <<apm-app-reader-partial,partial>> APM reader to any users that need to view annotations in the APM app
+
+[[apm-app-annotation-api]]
+==== Annotation API
+
+See <<apm-app-api-user>>.
+
+////
+***********************************  ***********************************
+////
+
 [role="xpack"]
 [[apm-app-central-config-user]]
 === APM app central config user

x-pack/plugins/ml/public/application/services/ml_server_info.test.ts

@@ -10,6 +10,7 @@ import {
   isCloud,
   getNewJobDefaults,
   getNewJobLimits,
+  extractDeploymentId,
 } from './ml_server_info';
 import mockMlInfoResponse from './__mocks__/ml_info_response.json';
 
@@ -20,7 +21,7 @@ jest.mock('./ml_api_service', () => ({
 }));
 
 describe('ml_server_info initial state', () => {
-  it('server info not loaded ', () => {
+  it('should fail to get server info ', () => {
     expect(isCloud()).toBe(false);
     expect(getCloudDeploymentId()).toBe(null);
   });
@@ -33,14 +34,14 @@ describe('ml_server_info', () => {
   });
 
   describe('cloud information', () => {
-    it('can get could deployment id', () => {
+    it('should get could deployment id', () => {
       expect(isCloud()).toBe(true);
       expect(getCloudDeploymentId()).toBe('85d666f3350c469e8c3242d76a7f459c');
     });
   });
 
   describe('defaults', () => {
-    it('can get defaults', async (done) => {
+    it('should get defaults', async (done) => {
       const defaults = getNewJobDefaults();
 
       expect(defaults.anomaly_detectors.model_memory_limit).toBe('128mb');
@@ -52,11 +53,37 @@ describe('ml_server_info', () => {
   });
 
   describe('limits', () => {
-    it('can get limits', async (done) => {
+    it('should get limits', async (done) => {
       const limits = getNewJobLimits();
 
       expect(limits.max_model_memory_limit).toBe('128mb');
       done();
     });
   });
+
+  describe('cloud extract deployment ID', () => {
+    const cloudIdWithDeploymentName =
+      'cloud_message_test:ZXUtd2VzdC0yLmF3cy5jbG91ZC5lcy5pbyQ4NWQ2NjZmMzM1MGM0NjllOGMzMjQyZDc2YTdmNDU5YyQxNmI1ZDM2ZGE1Mzk0YjlkYjIyZWJlNDk1OWY1OGQzMg==';
+
+    const cloudIdWithOutDeploymentName =
+      ':ZXUtd2VzdC0yLmF3cy5jbG91ZC5lcy5pbyQ4NWQ2NjZmMzM1MGM0NjllOGMzMjQyZDc2YTdmNDU5YyQxNmI1ZDM2ZGE1Mzk0YjlkYjIyZWJlNDk1OWY1OGQzMg==';
+
+    const badCloudId = 'cloud_message_test:this_is_not_a_base64_string';
+
+    it('should extract cloud ID when deployment name is present', () => {
+      expect(extractDeploymentId(cloudIdWithDeploymentName)).toBe(
+        '85d666f3350c469e8c3242d76a7f459c'
+      );
+    });
+
+    it('should extract cloud ID when deployment name is not present', () => {
+      expect(extractDeploymentId(cloudIdWithOutDeploymentName)).toBe(
+        '85d666f3350c469e8c3242d76a7f459c'
+      );
+    });
+
+    it('should fail to extract cloud ID', () => {
+      expect(extractDeploymentId(badCloudId)).toBe(null);
+    });
+  });
 });

x-pack/plugins/ml/public/application/services/ml_server_info.ts

@@ -53,10 +53,11 @@ export function isCloud(): boolean {
 }
 
 export function getCloudDeploymentId(): string | null {
-  if (cloudInfo.cloudId === null) {
-    return null;
-  }
-  const tempCloudId = cloudInfo.cloudId.replace(/^.+:/, '');
+  return cloudInfo.cloudId === null ? null : extractDeploymentId(cloudInfo.cloudId);
+}
+
+export function extractDeploymentId(cloudId: string) {
+  const tempCloudId = cloudId.replace(/^(.+)?:/, '');
   try {
     const matches = atob(tempCloudId).match(/^.+\$(.+)(?=\$)/);
     return matches !== null && matches.length === 2 ? matches[1] : null;

x-pack/plugins/triggers_actions_ui/public/application/components/add_message_variables.tsx

@@ -47,6 +47,7 @@ export const AddMessageVariables: React.FunctionComponent<Props> = ({
     <EuiPopover
       button={
         <EuiButtonIcon
+          id={`${paramsProperty}AddVariableButton`}
           data-test-subj={`${paramsProperty}AddVariableButton`}
           title={addVariableButtonTitle}
           onClick={() => setIsVariablesPopoverOpen(true)}

x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email.test.tsx

@@ -273,7 +273,7 @@ describe('EmailParamsFields renders', () => {
     expect(
       wrapper.find('[data-test-subj="toEmailAddressInput"]').first().prop('selectedOptions')
     ).toStrictEqual([{ label: 'test@test.com' }]);
-    expect(wrapper.find('[data-test-subj="emailSubjectInput"]').length > 0).toBeTruthy();
-    expect(wrapper.find('[data-test-subj="emailMessageInput"]').length > 0).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="subjectInput"]').length > 0).toBeTruthy();
+    expect(wrapper.find('[data-test-subj="messageTextArea"]').length > 0).toBeTruthy();
   });
 });

x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/email.tsx

@@ -12,7 +12,6 @@ import {
   EuiFieldNumber,
   EuiFieldPassword,
   EuiComboBox,
-  EuiTextArea,
   EuiButtonEmpty,
   EuiSwitch,
   EuiFormRow,
@@ -25,7 +24,8 @@ import {
   ActionParamsProps,
 } from '../../../types';
 import { EmailActionParams, EmailActionConnector } from './types';
-import { AddMessageVariables } from '../add_message_variables';
+import { TextFieldWithMessageVariables } from '../text_field_with_message_variables';
+import { TextAreaWithMessageVariables } from '../text_area_with_message_variables';
 
 export function getActionType(): ActionTypeModel {
   const mailformat = /^[^@\s]+@[^@\s]+$/;
@@ -372,14 +372,6 @@ const EmailParamsFields: React.FunctionComponent<ActionParamsProps<EmailActionPa
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const onSelectMessageVariable = (paramsProperty: string, variable: string) => {
-    editAction(
-      paramsProperty,
-      ((actionParams as any)[paramsProperty] ?? '').concat(` {{${variable}}}`),
-      index
-    );
-  };
-
   return (
     <Fragment>
       <EuiFormRow
@@ -536,68 +528,30 @@ const EmailParamsFields: React.FunctionComponent<ActionParamsProps<EmailActionPa
             defaultMessage: 'Subject',
           }
         )}
-        labelAppend={
-          <AddMessageVariables
-            messageVariables={messageVariables}
-            onSelectEventHandler={(variable: string) =>
-              onSelectMessageVariable('subject', variable)
-            }
-            paramsProperty="subject"
-          />
-        }
       >
-        <EuiFieldText
-          fullWidth
-          isInvalid={errors.subject.length > 0 && subject !== undefined}
-          name="subject"
-          data-test-subj="emailSubjectInput"
-          value={subject || ''}
-          onChange={(e) => {
-            editAction('subject', e.target.value, index);
-          }}
-          onBlur={() => {
-            if (!subject) {
-              editAction('subject', '', index);
-            }
-          }}
+        <TextFieldWithMessageVariables
+          index={index}
+          editAction={editAction}
+          messageVariables={messageVariables}
+          paramsProperty={'subject'}
+          inputTargetValue={subject}
+          errors={errors.subject as string[]}
         />
       </EuiFormRow>
-      <EuiFormRow
-        fullWidth
-        error={errors.message}
-        isInvalid={errors.message.length > 0 && message !== undefined}
+      <TextAreaWithMessageVariables
+        index={index}
+        editAction={editAction}
+        messageVariables={messageVariables}
+        paramsProperty={'message'}
+        inputTargetValue={message}
         label={i18n.translate(
           'xpack.triggersActionsUI.sections.builtinActionTypes.emailAction.messageTextAreaFieldLabel',
           {
             defaultMessage: 'Message',
           }
         )}
-        labelAppend={
-          <AddMessageVariables
-            messageVariables={messageVariables}
-            onSelectEventHandler={(variable: string) =>
-              onSelectMessageVariable('message', variable)
-            }
-            paramsProperty="message"
-          />
-        }
-      >
-        <EuiTextArea
-          fullWidth
-          isInvalid={errors.message.length > 0 && message !== undefined}
-          value={message || ''}
-          name="message"
-          data-test-subj="emailMessageInput"
-          onChange={(e) => {
-            editAction('message', e.target.value, index);
-          }}
-          onBlur={() => {
-            if (!message) {
-              editAction('message', '', index);
-            }
-          }}
-        />
-      </EuiFormRow>
+        errors={errors.message as string[]}
+      />
     </Fragment>
   );
 };

x-pack/plugins/triggers_actions_ui/public/application/components/builtin_action_types/es_index.test.tsx

@@ -224,7 +224,7 @@ describe('IndexParamsFields renders', () => {
         index={0}
       />
     );
-    expect(wrapper.find('[data-test-subj="actionIndexDoc"]').first().prop('value')).toBe(`{
+    expect(wrapper.find('[data-test-subj="documentsJsonEditor"]').first().prop('value')).toBe(`{
   "test": 123
 }`);
     expect(wrapper.find('[data-test-subj="documentsAddVariableButton"]').length > 0).toBeTruthy();