diff --git a/docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md b/docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md
index bc6075176cd22..0a1f2d1bf8b4e 100644
--- a/docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md
+++ b/docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md
@@ -12,6 +12,9 @@ readonly links: {
         readonly apm: {
             readonly kibanaSettings: string;
             readonly supportedServiceMaps: string;
+            readonly droppedTransactionSpans: string;
+            readonly upgrading: string;
+            readonly metaData: string;
         };
         readonly canvas: {
             readonly guide: string;
diff --git a/docs/development/core/public/kibana-plugin-core-public.doclinksstart.md b/docs/development/core/public/kibana-plugin-core-public.doclinksstart.md
index aa3f958018041..4b6e1ad2631b4 100644
--- a/docs/development/core/public/kibana-plugin-core-public.doclinksstart.md
+++ b/docs/development/core/public/kibana-plugin-core-public.doclinksstart.md
@@ -17,5 +17,6 @@ export interface DocLinksStart
 |  --- | --- | --- |
 |  [DOC\_LINK\_VERSION](./kibana-plugin-core-public.doclinksstart.doc_link_version.md) | <code>string</code> |  |
 |  [ELASTIC\_WEBSITE\_URL](./kibana-plugin-core-public.doclinksstart.elastic_website_url.md) | <code>string</code> |  |
-|  [links](./kibana-plugin-core-public.doclinksstart.links.md) | <code>{</code><br/><code>        readonly settings: string;</code><br/><code>        readonly canvas: {</code><br/><code>            readonly guide: string;</code><br/><code>        };</code><br/><code>        readonly dashboard: {</code><br/><code>            readonly guide: string;</code><br/><code>            readonly drilldowns: string;</code><br/><code>            readonly drilldownsTriggerPicker: string;</code><br/><code>            readonly urlDrilldownTemplateSyntax: string;</code><br/><code>            readonly urlDrilldownVariables: string;</code><br/><code>        };</code><br/><code>        readonly discover: Record&lt;string, string&gt;;</code><br/><code>        readonly filebeat: {</code><br/><code>            readonly base: string;</code><br/><code>            readonly installation: string;</code><br/><code>            readonly configuration: string;</code><br/><code>            readonly elasticsearchOutput: string;</code><br/><code>            readonly elasticsearchModule: string;</code><br/><code>            readonly startup: string;</code><br/><code>            readonly exportedFields: string;</code><br/><code>            readonly suricataModule: string;</code><br/><code>            readonly zeekModule: string;</code><br/><code>        };</code><br/><code>        readonly auditbeat: {</code><br/><code>            readonly base: string;</code><br/><code>            readonly auditdModule: string;</code><br/><code>            readonly systemModule: string;</code><br/><code>        };</code><br/><code>        readonly metricbeat: {</code><br/><code>            readonly base: string;</code><br/><code>            readonly configure: string;</code><br/><code>            readonly httpEndpoint: string;</code><br/><code>            readonly install: string;</code><br/><code>            readonly start: string;</code><br/><code>        };</code><br/><code>        readonly enterpriseSearch: {</code><br/><code>            readonly base: string;</code><br/><code>            readonly appSearchBase: string;</code><br/><code>            readonly workplaceSearchBase: string;</code><br/><code>        };</code><br/><code>        readonly heartbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly libbeat: {</code><br/><code>            readonly getStarted: string;</code><br/><code>        };</code><br/><code>        readonly logstash: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly functionbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly winlogbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly aggs: {</code><br/><code>            readonly composite: string;</code><br/><code>            readonly composite_missing_bucket: string;</code><br/><code>            readonly date_histogram: string;</code><br/><code>            readonly date_range: string;</code><br/><code>            readonly date_format_pattern: string;</code><br/><code>            readonly filter: string;</code><br/><code>            readonly filters: string;</code><br/><code>            readonly geohash_grid: string;</code><br/><code>            readonly histogram: string;</code><br/><code>            readonly ip_range: string;</code><br/><code>            readonly range: string;</code><br/><code>            readonly significant_terms: string;</code><br/><code>            readonly terms: string;</code><br/><code>            readonly avg: string;</code><br/><code>            readonly avg_bucket: string;</code><br/><code>            readonly max_bucket: string;</code><br/><code>            readonly min_bucket: string;</code><br/><code>            readonly sum_bucket: string;</code><br/><code>            readonly cardinality: string;</code><br/><code>            readonly count: string;</code><br/><code>            readonly cumulative_sum: string;</code><br/><code>            readonly derivative: string;</code><br/><code>            readonly geo_bounds: string;</code><br/><code>            readonly geo_centroid: string;</code><br/><code>            readonly max: string;</code><br/><code>            readonly median: string;</code><br/><code>            readonly min: string;</code><br/><code>            readonly moving_avg: string;</code><br/><code>            readonly percentile_ranks: string;</code><br/><code>            readonly serial_diff: string;</code><br/><code>            readonly std_dev: string;</code><br/><code>            readonly sum: string;</code><br/><code>            readonly top_hits: string;</code><br/><code>        };</code><br/><code>        readonly runtimeFields: {</code><br/><code>            readonly overview: string;</code><br/><code>            readonly mapping: string;</code><br/><code>        };</code><br/><code>        readonly scriptedFields: {</code><br/><code>            readonly scriptFields: string;</code><br/><code>            readonly scriptAggs: string;</code><br/><code>            readonly painless: string;</code><br/><code>            readonly painlessApi: string;</code><br/><code>            readonly painlessLangSpec: string;</code><br/><code>            readonly painlessSyntax: string;</code><br/><code>            readonly painlessWalkthrough: string;</code><br/><code>            readonly luceneExpressions: string;</code><br/><code>        };</code><br/><code>        readonly search: {</code><br/><code>            readonly sessions: string;</code><br/><code>            readonly sessionLimits: string;</code><br/><code>        };</code><br/><code>        readonly indexPatterns: {</code><br/><code>            readonly introduction: string;</code><br/><code>            readonly fieldFormattersNumber: string;</code><br/><code>            readonly fieldFormattersString: string;</code><br/><code>            readonly runtimeFields: string;</code><br/><code>        };</code><br/><code>        readonly addData: string;</code><br/><code>        readonly kibana: string;</code><br/><code>        readonly upgradeAssistant: string;</code><br/><code>        readonly rollupJobs: string;</code><br/><code>        readonly elasticsearch: Record&lt;string, string&gt;;</code><br/><code>        readonly siem: {</code><br/><code>            readonly privileges: string;</code><br/><code>            readonly guide: string;</code><br/><code>            readonly gettingStarted: string;</code><br/><code>            readonly ml: string;</code><br/><code>            readonly ruleChangeLog: string;</code><br/><code>            readonly detectionsReq: string;</code><br/><code>            readonly networkMap: string;</code><br/><code>        };</code><br/><code>        readonly query: {</code><br/><code>            readonly eql: string;</code><br/><code>            readonly kueryQuerySyntax: string;</code><br/><code>            readonly luceneQuerySyntax: string;</code><br/><code>            readonly percolate: string;</code><br/><code>            readonly queryDsl: string;</code><br/><code>            readonly autocompleteChanges: string;</code><br/><code>        };</code><br/><code>        readonly date: {</code><br/><code>            readonly dateMath: string;</code><br/><code>            readonly dateMathIndexNames: string;</code><br/><code>        };</code><br/><code>        readonly management: Record&lt;string, string&gt;;</code><br/><code>        readonly ml: Record&lt;string, string&gt;;</code><br/><code>        readonly transforms: Record&lt;string, string&gt;;</code><br/><code>        readonly visualize: Record&lt;string, string&gt;;</code><br/><code>        readonly apis: Readonly&lt;{</code><br/><code>            bulkIndexAlias: string;</code><br/><code>            byteSizeUnits: string;</code><br/><code>            createAutoFollowPattern: string;</code><br/><code>            createFollower: string;</code><br/><code>            createIndex: string;</code><br/><code>            createSnapshotLifecyclePolicy: string;</code><br/><code>            createRoleMapping: string;</code><br/><code>            createRoleMappingTemplates: string;</code><br/><code>            createRollupJobsRequest: string;</code><br/><code>            createApiKey: string;</code><br/><code>            createPipeline: string;</code><br/><code>            createTransformRequest: string;</code><br/><code>            cronExpressions: string;</code><br/><code>            executeWatchActionModes: string;</code><br/><code>            indexExists: string;</code><br/><code>            openIndex: string;</code><br/><code>            putComponentTemplate: string;</code><br/><code>            painlessExecute: string;</code><br/><code>            painlessExecuteAPIContexts: string;</code><br/><code>            putComponentTemplateMetadata: string;</code><br/><code>            putSnapshotLifecyclePolicy: string;</code><br/><code>            putIndexTemplateV1: string;</code><br/><code>            putWatch: string;</code><br/><code>            simulatePipeline: string;</code><br/><code>            timeUnits: string;</code><br/><code>            updateTransform: string;</code><br/><code>        }&gt;;</code><br/><code>        readonly observability: Record&lt;string, string&gt;;</code><br/><code>        readonly alerting: Record&lt;string, string&gt;;</code><br/><code>        readonly maps: Record&lt;string, string&gt;;</code><br/><code>        readonly monitoring: Record&lt;string, string&gt;;</code><br/><code>        readonly security: Readonly&lt;{</code><br/><code>            apiKeyServiceSettings: string;</code><br/><code>            clusterPrivileges: string;</code><br/><code>            elasticsearchSettings: string;</code><br/><code>            elasticsearchEnableSecurity: string;</code><br/><code>            indicesPrivileges: string;</code><br/><code>            kibanaTLS: string;</code><br/><code>            kibanaPrivileges: string;</code><br/><code>            mappingRoles: string;</code><br/><code>            mappingRolesFieldRules: string;</code><br/><code>            runAsPrivilege: string;</code><br/><code>        }&gt;;</code><br/><code>        readonly watcher: Record&lt;string, string&gt;;</code><br/><code>        readonly ccs: Record&lt;string, string&gt;;</code><br/><code>        readonly plugins: Record&lt;string, string&gt;;</code><br/><code>        readonly snapshotRestore: Record&lt;string, string&gt;;</code><br/><code>        readonly ingest: Record&lt;string, string&gt;;</code><br/><code>        readonly fleet: Readonly&lt;{</code><br/><code>            guide: string;</code><br/><code>            fleetServer: string;</code><br/><code>            fleetServerAddFleetServer: string;</code><br/><code>            settings: string;</code><br/><code>            settingsFleetServerHostSettings: string;</code><br/><code>            troubleshooting: string;</code><br/><code>            elasticAgent: string;</code><br/><code>            datastreams: string;</code><br/><code>            datastreamsNamingScheme: string;</code><br/><code>            upgradeElasticAgent: string;</code><br/><code>            upgradeElasticAgent712lower: string;</code><br/><code>        }&gt;;</code><br/><code>        readonly ecs: {</code><br/><code>            readonly guide: string;</code><br/><code>        };</code><br/><code>    }</code> |  |
+|  [links](./kibana-plugin-core-public.doclinksstart.links.md) | <code>{</code><br/><code>        readonly settings: string;</code><br/><code>        readonly apm: {</code><br/><code>            readonly kibanaSettings: string;</code><br/><code>            readonly supportedServiceMaps: string;</code><br/><code>            readonly upgrading: string;</code><br/><code>        };</code><br/><code>        readonly canvas: {</code><br/><code>            readonly guide: string;</code><br/><code>        };</code><br/><code>        readonly dashboard: {</code><br/><code>            readonly guide: string;</code><br/><code>            readonly drilldowns: string;</code><br/><code>            readonly drilldownsTriggerPicker: string;</code><br/><code>            readonly urlDrilldownTemplateSyntax: string;</code><br/><code>            readonly urlDrilldownVariables: string;</code><br/><code>        };</code><br/><code>        readonly discover: Record&lt;string, string&gt;;</code><br/><code>        readonly filebeat: {</code><br/><code>            readonly base: string;</code><br/><code>            readonly installation: string;</code><br/><code>            readonly configuration: string;</code><br/><code>            readonly elasticsearchOutput: string;</code><br/><code>            readonly elasticsearchModule: string;</code><br/><code>            readonly startup: string;</code><br/><code>            readonly exportedFields: string;</code><br/><code>            readonly suricataModule: string;</code><br/><code>            readonly zeekModule: string;</code><br/><code>        };</code><br/><code>        readonly auditbeat: {</code><br/><code>            readonly base: string;</code><br/><code>            readonly auditdModule: string;</code><br/><code>            readonly systemModule: string;</code><br/><code>        };</code><br/><code>        readonly metricbeat: {</code><br/><code>            readonly base: string;</code><br/><code>            readonly configure: string;</code><br/><code>            readonly httpEndpoint: string;</code><br/><code>            readonly install: string;</code><br/><code>            readonly start: string;</code><br/><code>        };</code><br/><code>        readonly enterpriseSearch: {</code><br/><code>            readonly base: string;</code><br/><code>            readonly appSearchBase: string;</code><br/><code>            readonly workplaceSearchBase: string;</code><br/><code>        };</code><br/><code>        readonly heartbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly libbeat: {</code><br/><code>            readonly getStarted: string;</code><br/><code>        };</code><br/><code>        readonly logstash: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly functionbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly winlogbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly aggs: {</code><br/><code>            readonly composite: string;</code><br/><code>            readonly composite_missing_bucket: string;</code><br/><code>            readonly date_histogram: string;</code><br/><code>            readonly date_range: string;</code><br/><code>            readonly date_format_pattern: string;</code><br/><code>            readonly filter: string;</code><br/><code>            readonly filters: string;</code><br/><code>            readonly geohash_grid: string;</code><br/><code>            readonly histogram: string;</code><br/><code>            readonly ip_range: string;</code><br/><code>            readonly range: string;</code><br/><code>            readonly significant_terms: string;</code><br/><code>            readonly terms: string;</code><br/><code>            readonly avg: string;</code><br/><code>            readonly avg_bucket: string;</code><br/><code>            readonly max_bucket: string;</code><br/><code>            readonly min_bucket: string;</code><br/><code>            readonly sum_bucket: string;</code><br/><code>            readonly cardinality: string;</code><br/><code>            readonly count: string;</code><br/><code>            readonly cumulative_sum: string;</code><br/><code>            readonly derivative: string;</code><br/><code>            readonly geo_bounds: string;</code><br/><code>            readonly geo_centroid: string;</code><br/><code>            readonly max: string;</code><br/><code>            readonly median: string;</code><br/><code>            readonly min: string;</code><br/><code>            readonly moving_avg: string;</code><br/><code>            readonly percentile_ranks: string;</code><br/><code>            readonly serial_diff: string;</code><br/><code>            readonly std_dev: string;</code><br/><code>            readonly sum: string;</code><br/><code>            readonly top_hits: string;</code><br/><code>        };</code><br/><code>        readonly runtimeFields: {</code><br/><code>            readonly overview: string;</code><br/><code>            readonly mapping: string;</code><br/><code>        };</code><br/><code>        readonly scriptedFields: {</code><br/><code>            readonly scriptFields: string;</code><br/><code>            readonly scriptAggs: string;</code><br/><code>            readonly painless: string;</code><br/><code>            readonly painlessApi: string;</code><br/><code>            readonly painlessLangSpec: string;</code><br/><code>            readonly painlessSyntax: string;</code><br/><code>            readonly painlessWalkthrough: string;</code><br/><code>            readonly luceneExpressions: string;</code><br/><code>        };</code><br/><code>        readonly search: {</code><br/><code>            readonly sessions: string;</code><br/><code>            readonly sessionLimits: string;</code><br/><code>        };</code><br/><code>        readonly indexPatterns: {</code><br/><code>            readonly introduction: string;</code><br/><code>            readonly fieldFormattersNumber: string;</code><br/><code>            readonly fieldFormattersString: string;</code><br/><code>            readonly runtimeFields: string;</code><br/><code>        };</code><br/><code>        readonly addData: string;</code><br/><code>        readonly kibana: string;</code><br/><code>        readonly upgradeAssistant: string;</code><br/><code>        readonly rollupJobs: string;</code><br/><code>        readonly elasticsearch: Record&lt;string, string&gt;;</code><br/><code>        readonly siem: {</code><br/><code>            readonly privileges: string;</code><br/><code>            readonly guide: string;</code><br/><code>            readonly gettingStarted: string;</code><br/><code>            readonly ml: string;</code><br/><code>            readonly ruleChangeLog: string;</code><br/><code>            readonly detectionsReq: string;</code><br/><code>            readonly networkMap: string;</code><br/><code>        };</code><br/><code>        readonly query: {</code><br/><code>            readonly eql: string;</code><br/><code>            readonly kueryQuerySyntax: string;</code><br/><code>            readonly luceneQuerySyntax: string;</code><br/><code>            readonly percolate: string;</code><br/><code>            readonly queryDsl: string;</code><br/><code>            readonly autocompleteChanges: string;</code><br/><code>        };</code><br/><code>        readonly date: {</code><br/><code>            readonly dateMath: string;</code><br/><code>            readonly dateMathIndexNames: string;</code><br/><code>        };</code><br/><code>        readonly management: Record&lt;string, string&gt;;</code><br/><code>        readonly ml: Record&lt;string, string&gt;;</code><br/><code>        readonly transforms: Record&lt;string, string&gt;;</code><br/><code>        readonly visualize: Record&lt;string, string&gt;;</code><br/><code>        readonly apis: Readonly&lt;{</code><br/><code>            bulkIndexAlias: string;</code><br/><code>            byteSizeUnits: string;</code><br/><code>            createAutoFollowPattern: string;</code><br/><code>            createFollower: string;</code><br/><code>            createIndex: string;</code><br/><code>            createSnapshotLifecyclePolicy: string;</code><br/><code>            createRoleMapping: string;</code><br/><code>            createRoleMappingTemplates: string;</code><br/><code>            createRollupJobsRequest: string;</code><br/><code>            createApiKey: string;</code><br/><code>            createPipeline: string;</code><br/><code>            createTransformRequest: string;</code><br/><code>            cronExpressions: string;</code><br/><code>            executeWatchActionModes: string;</code><br/><code>            indexExists: string;</code><br/><code>            openIndex: string;</code><br/><code>            putComponentTemplate: string;</code><br/><code>            painlessExecute: string;</code><br/><code>            painlessExecuteAPIContexts: string;</code><br/><code>            putComponentTemplateMetadata: string;</code><br/><code>            putSnapshotLifecyclePolicy: string;</code><br/><code>            putIndexTemplateV1: string;</code><br/><code>            putWatch: string;</code><br/><code>            simulatePipeline: string;</code><br/><code>            timeUnits: string;</code><br/><code>            updateTransform: string;</code><br/><code>        }&gt;;</code><br/><code>        readonly observability: Record&lt;string, string&gt;;</code><br/><code>        readonly alerting: Record&lt;string, string&gt;;</code><br/><code>        readonly maps: Record&lt;string, string&gt;;</code><br/><code>        readonly monitoring: Record&lt;string, string&gt;;</code><br/><code>        readonly security: Readonly&lt;{</code><br/><code>            apiKeyServiceSettings: string;</code><br/><code>            clusterPrivileges: string;</code><br/><code>            elasticsearchSettings: string;</code><br/><code>            elasticsearchEnableSecurity: string;</code><br/><code>            indicesPrivileges: string;</code><br/><code>            kibanaTLS: string;</code><br/><code>            kibanaPrivileges: string;</code><br/><code>            mappingRoles: string;</code><br/><code>            mappingRolesFieldRules: string;</code><br/><code>            runAsPrivilege: string;</code><br/><code>        }&gt;;</code><br/><code>        readonly watcher: Record&lt;string, string&gt;;</code><br/><code>        readonly ccs: Record&lt;string, string&gt;;</code><br/><code>        readonly plugins: Record&lt;string, string&gt;;</code><br/><code>        readonly snapshotRestore: Record&lt;string, string&gt;;</code><br/><code>        readonly ingest: Record&lt;string, string&gt;;</code><br/><code>        readonly fleet: Readonly&lt;{</code><br/><code>            guide: string;</code><br/><code>            fleetServer: string;</code><br/><code>            fleetServerAddFleetServer: string;</code><br/><code>            settings: string;</code><br/><code>            settingsFleetServerHostSettings: string;</code><br/><code>            troubleshooting: string;</code><br/><code>            elasticAgent: string;</code><br/><code>            datastreams: string;</code><br/><code>            datastreamsNamingScheme: string;</code><br/><code>            upgradeElasticAgent: string;</code><br/><code>            upgradeElasticAgent712lower: string;</code><br/><code>        }&gt;;</code><br/><code>        readonly ecs: {</code><br/><code>            readonly guide: string;</code><br/><code>        };</code><br/><code>    }</code> |  |
+|  [links](./kibana-plugin-core-public.doclinksstart.links.md) | <code>{</code><br/><code>        readonly settings: string;</code><br/><code>        readonly apm: {</code><br/><code>            readonly kibanaSettings: string;</code><br/><code>            readonly supportedServiceMaps: string;</code><br/><code>            readonly metaData: string;</code><br/><code>        };</code><br/><code>        readonly canvas: {</code><br/><code>            readonly guide: string;</code><br/><code>        };</code><br/><code>        readonly dashboard: {</code><br/><code>            readonly guide: string;</code><br/><code>            readonly drilldowns: string;</code><br/><code>            readonly drilldownsTriggerPicker: string;</code><br/><code>            readonly urlDrilldownTemplateSyntax: string;</code><br/><code>            readonly urlDrilldownVariables: string;</code><br/><code>        };</code><br/><code>        readonly discover: Record&lt;string, string&gt;;</code><br/><code>        readonly filebeat: {</code><br/><code>            readonly base: string;</code><br/><code>            readonly installation: string;</code><br/><code>            readonly configuration: string;</code><br/><code>            readonly elasticsearchOutput: string;</code><br/><code>            readonly elasticsearchModule: string;</code><br/><code>            readonly startup: string;</code><br/><code>            readonly exportedFields: string;</code><br/><code>            readonly suricataModule: string;</code><br/><code>            readonly zeekModule: string;</code><br/><code>        };</code><br/><code>        readonly auditbeat: {</code><br/><code>            readonly base: string;</code><br/><code>            readonly auditdModule: string;</code><br/><code>            readonly systemModule: string;</code><br/><code>        };</code><br/><code>        readonly metricbeat: {</code><br/><code>            readonly base: string;</code><br/><code>            readonly configure: string;</code><br/><code>            readonly httpEndpoint: string;</code><br/><code>            readonly install: string;</code><br/><code>            readonly start: string;</code><br/><code>        };</code><br/><code>        readonly enterpriseSearch: {</code><br/><code>            readonly base: string;</code><br/><code>            readonly appSearchBase: string;</code><br/><code>            readonly workplaceSearchBase: string;</code><br/><code>        };</code><br/><code>        readonly heartbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly libbeat: {</code><br/><code>            readonly getStarted: string;</code><br/><code>        };</code><br/><code>        readonly logstash: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly functionbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly winlogbeat: {</code><br/><code>            readonly base: string;</code><br/><code>        };</code><br/><code>        readonly aggs: {</code><br/><code>            readonly composite: string;</code><br/><code>            readonly composite_missing_bucket: string;</code><br/><code>            readonly date_histogram: string;</code><br/><code>            readonly date_range: string;</code><br/><code>            readonly date_format_pattern: string;</code><br/><code>            readonly filter: string;</code><br/><code>            readonly filters: string;</code><br/><code>            readonly geohash_grid: string;</code><br/><code>            readonly histogram: string;</code><br/><code>            readonly ip_range: string;</code><br/><code>            readonly range: string;</code><br/><code>            readonly significant_terms: string;</code><br/><code>            readonly terms: string;</code><br/><code>            readonly avg: string;</code><br/><code>            readonly avg_bucket: string;</code><br/><code>            readonly max_bucket: string;</code><br/><code>            readonly min_bucket: string;</code><br/><code>            readonly sum_bucket: string;</code><br/><code>            readonly cardinality: string;</code><br/><code>            readonly count: string;</code><br/><code>            readonly cumulative_sum: string;</code><br/><code>            readonly derivative: string;</code><br/><code>            readonly geo_bounds: string;</code><br/><code>            readonly geo_centroid: string;</code><br/><code>            readonly max: string;</code><br/><code>            readonly median: string;</code><br/><code>            readonly min: string;</code><br/><code>            readonly moving_avg: string;</code><br/><code>            readonly percentile_ranks: string;</code><br/><code>            readonly serial_diff: string;</code><br/><code>            readonly std_dev: string;</code><br/><code>            readonly sum: string;</code><br/><code>            readonly top_hits: string;</code><br/><code>        };</code><br/><code>        readonly runtimeFields: {</code><br/><code>            readonly overview: string;</code><br/><code>            readonly mapping: string;</code><br/><code>        };</code><br/><code>        readonly scriptedFields: {</code><br/><code>            readonly scriptFields: string;</code><br/><code>            readonly scriptAggs: string;</code><br/><code>            readonly painless: string;</code><br/><code>            readonly painlessApi: string;</code><br/><code>            readonly painlessLangSpec: string;</code><br/><code>            readonly painlessSyntax: string;</code><br/><code>            readonly painlessWalkthrough: string;</code><br/><code>            readonly luceneExpressions: string;</code><br/><code>        };</code><br/><code>        readonly search: {</code><br/><code>            readonly sessions: string;</code><br/><code>            readonly sessionLimits: string;</code><br/><code>        };</code><br/><code>        readonly indexPatterns: {</code><br/><code>            readonly introduction: string;</code><br/><code>            readonly fieldFormattersNumber: string;</code><br/><code>            readonly fieldFormattersString: string;</code><br/><code>            readonly runtimeFields: string;</code><br/><code>        };</code><br/><code>        readonly addData: string;</code><br/><code>        readonly kibana: string;</code><br/><code>        readonly upgradeAssistant: string;</code><br/><code>        readonly rollupJobs: string;</code><br/><code>        readonly elasticsearch: Record&lt;string, string&gt;;</code><br/><code>        readonly siem: {</code><br/><code>            readonly privileges: string;</code><br/><code>            readonly guide: string;</code><br/><code>            readonly gettingStarted: string;</code><br/><code>            readonly ml: string;</code><br/><code>            readonly ruleChangeLog: string;</code><br/><code>            readonly detectionsReq: string;</code><br/><code>            readonly networkMap: string;</code><br/><code>        };</code><br/><code>        readonly query: {</code><br/><code>            readonly eql: string;</code><br/><code>            readonly kueryQuerySyntax: string;</code><br/><code>            readonly luceneQuerySyntax: string;</code><br/><code>            readonly percolate: string;</code><br/><code>            readonly queryDsl: string;</code><br/><code>            readonly autocompleteChanges: string;</code><br/><code>        };</code><br/><code>        readonly date: {</code><br/><code>            readonly dateMath: string;</code><br/><code>            readonly dateMathIndexNames: string;</code><br/><code>        };</code><br/><code>        readonly management: Record&lt;string, string&gt;;</code><br/><code>        readonly ml: Record&lt;string, string&gt;;</code><br/><code>        readonly transforms: Record&lt;string, string&gt;;</code><br/><code>        readonly visualize: Record&lt;string, string&gt;;</code><br/><code>        readonly apis: Readonly&lt;{</code><br/><code>            bulkIndexAlias: string;</code><br/><code>            byteSizeUnits: string;</code><br/><code>            createAutoFollowPattern: string;</code><br/><code>            createFollower: string;</code><br/><code>            createIndex: string;</code><br/><code>            createSnapshotLifecyclePolicy: string;</code><br/><code>            createRoleMapping: string;</code><br/><code>            createRoleMappingTemplates: string;</code><br/><code>            createRollupJobsRequest: string;</code><br/><code>            createApiKey: string;</code><br/><code>            createPipeline: string;</code><br/><code>            createTransformRequest: string;</code><br/><code>            cronExpressions: string;</code><br/><code>            executeWatchActionModes: string;</code><br/><code>            indexExists: string;</code><br/><code>            openIndex: string;</code><br/><code>            putComponentTemplate: string;</code><br/><code>            painlessExecute: string;</code><br/><code>            painlessExecuteAPIContexts: string;</code><br/><code>            putComponentTemplateMetadata: string;</code><br/><code>            putSnapshotLifecyclePolicy: string;</code><br/><code>            putIndexTemplateV1: string;</code><br/><code>            putWatch: string;</code><br/><code>            simulatePipeline: string;</code><br/><code>            timeUnits: string;</code><br/><code>            updateTransform: string;</code><br/><code>        }&gt;;</code><br/><code>        readonly observability: Record&lt;string, string&gt;;</code><br/><code>        readonly alerting: Record&lt;string, string&gt;;</code><br/><code>        readonly maps: Record&lt;string, string&gt;;</code><br/><code>        readonly monitoring: Record&lt;string, string&gt;;</code><br/><code>        readonly security: Readonly&lt;{</code><br/><code>            apiKeyServiceSettings: string;</code><br/><code>            clusterPrivileges: string;</code><br/><code>            elasticsearchSettings: string;</code><br/><code>            elasticsearchEnableSecurity: string;</code><br/><code>            indicesPrivileges: string;</code><br/><code>            kibanaTLS: string;</code><br/><code>            kibanaPrivileges: string;</code><br/><code>            mappingRoles: string;</code><br/><code>            mappingRolesFieldRules: string;</code><br/><code>            runAsPrivilege: string;</code><br/><code>        }&gt;;</code><br/><code>        readonly watcher: Record&lt;string, string&gt;;</code><br/><code>        readonly ccs: Record&lt;string, string&gt;;</code><br/><code>        readonly plugins: Record&lt;string, string&gt;;</code><br/><code>        readonly snapshotRestore: Record&lt;string, string&gt;;</code><br/><code>        readonly ingest: Record&lt;string, string&gt;;</code><br/><code>        readonly fleet: Readonly&lt;{</code><br/><code>            guide: string;</code><br/><code>            fleetServer: string;</code><br/><code>            fleetServerAddFleetServer: string;</code><br/><code>            settings: string;</code><br/><code>            settingsFleetServerHostSettings: string;</code><br/><code>            troubleshooting: string;</code><br/><code>            elasticAgent: string;</code><br/><code>            datastreams: string;</code><br/><code>            datastreamsNamingScheme: string;</code><br/><code>            upgradeElasticAgent: string;</code><br/><code>            upgradeElasticAgent712lower: string;</code><br/><code>        }&gt;;</code><br/><code>        readonly ecs: {</code><br/><code>            readonly guide: string;</code><br/><code>        };</code><br/><code>    }</code> |  |
 
diff --git a/package.json b/package.json
index e603190c72698..5aabfc66e4637 100644
--- a/package.json
+++ b/package.json
@@ -348,7 +348,7 @@
     "react-moment-proptypes": "^1.7.0",
     "react-monaco-editor": "^0.41.2",
     "react-popper-tooltip": "^2.10.1",
-    "react-query": "^3.21.0",
+    "react-query": "^3.21.1",
     "react-redux": "^7.2.0",
     "react-resizable": "^1.7.5",
     "react-resize-detector": "^4.2.0",
diff --git a/packages/kbn-optimizer/limits.yml b/packages/kbn-optimizer/limits.yml
index 77bbeabb7f73b..7e6a1a9350d81 100644
--- a/packages/kbn-optimizer/limits.yml
+++ b/packages/kbn-optimizer/limits.yml
@@ -112,7 +112,7 @@ pageLoadAssetSize:
   expressionImage: 19288
   expressionMetric: 22238
   expressionShape: 34008
-  interactiveSetup: 70000
+  interactiveSetup: 80000
   expressionTagcloud: 27505
   expressions: 239290
   securitySolution: 231753
diff --git a/src/core/public/doc_links/doc_links_service.ts b/src/core/public/doc_links/doc_links_service.ts
index f3ef7c550e57d..94a568b380e64 100644
--- a/src/core/public/doc_links/doc_links_service.ts
+++ b/src/core/public/doc_links/doc_links_service.ts
@@ -24,6 +24,7 @@ export class DocLinksService {
     const KIBANA_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/`;
     const FLEET_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/fleet/${DOC_LINK_VERSION}/`;
     const PLUGIN_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/plugins/${DOC_LINK_VERSION}/`;
+    const APM_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/apm/`;
 
     return deepFreeze({
       DOC_LINK_VERSION,
@@ -33,6 +34,9 @@ export class DocLinksService {
         apm: {
           kibanaSettings: `${KIBANA_DOCS}apm-settings-in-kibana.html`,
           supportedServiceMaps: `${KIBANA_DOCS}service-maps.html#service-maps-supported`,
+          droppedTransactionSpans: `${APM_DOCS}get-started/${DOC_LINK_VERSION}/transaction-spans.html#dropped-spans`,
+          upgrading: `${APM_DOCS}server/${DOC_LINK_VERSION}/upgrading.html`,
+          metaData: `${APM_DOCS}get-started/${DOC_LINK_VERSION}/metadata.html`,
         },
         canvas: {
           guide: `${KIBANA_DOCS}canvas.html`,
@@ -458,6 +462,9 @@ export interface DocLinksStart {
     readonly apm: {
       readonly kibanaSettings: string;
       readonly supportedServiceMaps: string;
+      readonly droppedTransactionSpans: string;
+      readonly upgrading: string;
+      readonly metaData: string;
     };
     readonly canvas: {
       readonly guide: string;
diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md
index f18e1dc26bd87..7512bd723cfa0 100644
--- a/src/core/public/public.api.md
+++ b/src/core/public/public.api.md
@@ -476,6 +476,9 @@ export interface DocLinksStart {
         readonly apm: {
             readonly kibanaSettings: string;
             readonly supportedServiceMaps: string;
+            readonly droppedTransactionSpans: string;
+            readonly upgrading: string;
+            readonly metaData: string;
         };
         readonly canvas: {
             readonly guide: string;
diff --git a/src/dev/storybook/aliases.ts b/src/dev/storybook/aliases.ts
index 965a716098f33..9395c5fdf8834 100644
--- a/src/dev/storybook/aliases.ts
+++ b/src/dev/storybook/aliases.ts
@@ -23,6 +23,7 @@ export const storybookAliases = {
   expression_repeat_image: 'src/plugins/expression_repeat_image/.storybook',
   expression_reveal_image: 'src/plugins/expression_reveal_image/.storybook',
   expression_shape: 'src/plugins/expression_shape/.storybook',
+  expression_tagcloud: 'src/plugins/chart_expressions/expression_tagcloud/.storybook',
   infra: 'x-pack/plugins/infra/.storybook',
   security_solution: 'x-pack/plugins/security_solution/.storybook',
   ui_actions_enhanced: 'x-pack/plugins/ui_actions_enhanced/.storybook',
diff --git a/src/plugins/chart_expressions/expression_tagcloud/.storybook/main.js b/src/plugins/chart_expressions/expression_tagcloud/.storybook/main.js
new file mode 100644
index 0000000000000..cb483d5394285
--- /dev/null
+++ b/src/plugins/chart_expressions/expression_tagcloud/.storybook/main.js
@@ -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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { defaultConfig } from '@kbn/storybook';
+import webpackMerge from 'webpack-merge';
+import { resolve } from 'path';
+
+const mockConfig = {
+  resolve: {
+    alias: {
+      '../format_service': resolve(__dirname, '../public/__mocks__/format_service.ts'),
+    },
+  },
+};
+
+module.exports = {
+  ...defaultConfig,
+  webpackFinal: (config) => webpackMerge(config, mockConfig),
+};
diff --git a/src/plugins/chart_expressions/expression_tagcloud/common/expression_functions/__snapshots__/tagcloud_function.test.ts.snap b/src/plugins/chart_expressions/expression_tagcloud/common/expression_functions/__snapshots__/tagcloud_function.test.ts.snap
index 56b24f0ae004f..da116bc50f370 100644
--- a/src/plugins/chart_expressions/expression_tagcloud/common/expression_functions/__snapshots__/tagcloud_function.test.ts.snap
+++ b/src/plugins/chart_expressions/expression_tagcloud/common/expression_functions/__snapshots__/tagcloud_function.test.ts.snap
@@ -4,23 +4,35 @@ exports[`interpreter/functions#tagcloud logs correct datatable to inspector 1`]
 Object {
   "columns": Array [
     Object {
-      "id": "col-0-1",
+      "id": "Count",
       "meta": Object {
         "dimensionName": "Tag size",
       },
       "name": "Count",
     },
+    Object {
+      "id": "country",
+      "meta": Object {
+        "dimensionName": "Tags",
+      },
+      "name": "country",
+    },
   ],
   "rows": Array [
     Object {
-      "col-0-1": 0,
+      "Count": 0,
+      "country": "US",
+    },
+    Object {
+      "Count": 10,
+      "country": "UK",
     },
   ],
   "type": "datatable",
 }
 `;
 
-exports[`interpreter/functions#tagcloud returns an object with the correct structure 1`] = `
+exports[`interpreter/functions#tagcloud returns an object with the correct structure for number accessors 1`] = `
 Object {
   "as": "tagcloud",
   "type": "render",
@@ -29,13 +41,22 @@ Object {
     "visData": Object {
       "columns": Array [
         Object {
-          "id": "col-0-1",
+          "id": "Count",
           "name": "Count",
         },
+        Object {
+          "id": "country",
+          "name": "country",
+        },
       ],
       "rows": Array [
         Object {
-          "col-0-1": 0,
+          "Count": 0,
+          "country": "US",
+        },
+        Object {
+          "Count": 10,
+          "country": "UK",
         },
       ],
       "type": "datatable",
@@ -43,16 +64,81 @@ Object {
     "visParams": Object {
       "bucket": Object {
         "accessor": 1,
+      },
+      "maxFontSize": 72,
+      "metric": Object {
+        "accessor": 0,
+      },
+      "minFontSize": 18,
+      "orientation": "single",
+      "palette": Object {
+        "name": "default",
+        "type": "palette",
+      },
+      "scale": "linear",
+      "showLabel": true,
+    },
+    "visType": "tagcloud",
+  },
+}
+`;
+
+exports[`interpreter/functions#tagcloud returns an object with the correct structure for string accessors 1`] = `
+Object {
+  "as": "tagcloud",
+  "type": "render",
+  "value": Object {
+    "syncColors": false,
+    "visData": Object {
+      "columns": Array [
+        Object {
+          "id": "Count",
+          "name": "Count",
+        },
+        Object {
+          "id": "country",
+          "name": "country",
+        },
+      ],
+      "rows": Array [
+        Object {
+          "Count": 0,
+          "country": "US",
+        },
+        Object {
+          "Count": 10,
+          "country": "UK",
+        },
+      ],
+      "type": "datatable",
+    },
+    "visParams": Object {
+      "bucket": Object {
+        "accessor": Object {
+          "id": "country",
+          "meta": Object {
+            "type": "string",
+          },
+          "name": "country",
+        },
         "format": Object {
-          "id": "number",
+          "params": Object {},
         },
+        "type": "vis_dimension",
       },
       "maxFontSize": 72,
       "metric": Object {
-        "accessor": 0,
+        "accessor": Object {
+          "id": "Count",
+          "meta": Object {
+            "type": "number",
+          },
+          "name": "Count",
+        },
         "format": Object {
-          "id": "number",
+          "params": Object {},
         },
+        "type": "vis_dimension",
       },
       "minFontSize": 18,
       "orientation": "single",
diff --git a/src/plugins/chart_expressions/expression_tagcloud/common/expression_functions/tagcloud_function.test.ts b/src/plugins/chart_expressions/expression_tagcloud/common/expression_functions/tagcloud_function.test.ts
index 2c6e021b5107a..8abdc36704b45 100644
--- a/src/plugins/chart_expressions/expression_tagcloud/common/expression_functions/tagcloud_function.test.ts
+++ b/src/plugins/chart_expressions/expression_tagcloud/common/expression_functions/tagcloud_function.test.ts
@@ -9,14 +9,23 @@
 import { tagcloudFunction } from './tagcloud_function';
 
 import { functionWrapper } from '../../../../expressions/common/expression_functions/specs/tests/utils';
+import { ExpressionValueVisDimension } from '../../../../visualizations/public';
 import { Datatable } from '../../../../expressions/common/expression_types/specs';
 
 describe('interpreter/functions#tagcloud', () => {
   const fn = functionWrapper(tagcloudFunction());
+  const column1 = 'Count';
+  const column2 = 'country';
   const context = {
     type: 'datatable',
-    rows: [{ 'col-0-1': 0 }],
-    columns: [{ id: 'col-0-1', name: 'Count' }],
+    columns: [
+      { id: column1, name: column1 },
+      { id: column2, name: column2 },
+    ],
+    rows: [
+      { [column1]: 0, [column2]: 'US' },
+      { [column1]: 10, [column2]: 'UK' },
+    ],
   };
   const visConfig = {
     scale: 'linear',
@@ -24,12 +33,52 @@ describe('interpreter/functions#tagcloud', () => {
     minFontSize: 18,
     maxFontSize: 72,
     showLabel: true,
-    metric: { accessor: 0, format: { id: 'number' } },
-    bucket: { accessor: 1, format: { id: 'number' } },
   };
 
-  it('returns an object with the correct structure', () => {
-    const actual = fn(context, visConfig, undefined);
+  const numberAccessors = {
+    metric: { accessor: 0 },
+    bucket: { accessor: 1 },
+  };
+
+  const stringAccessors: {
+    metric: ExpressionValueVisDimension;
+    bucket: ExpressionValueVisDimension;
+  } = {
+    metric: {
+      type: 'vis_dimension',
+      accessor: {
+        id: column1,
+        name: column1,
+        meta: {
+          type: 'number',
+        },
+      },
+      format: {
+        params: {},
+      },
+    },
+    bucket: {
+      type: 'vis_dimension',
+      accessor: {
+        id: column2,
+        name: column2,
+        meta: {
+          type: 'string',
+        },
+      },
+      format: {
+        params: {},
+      },
+    },
+  };
+
+  it('returns an object with the correct structure for number accessors', () => {
+    const actual = fn(context, { ...visConfig, ...numberAccessors }, undefined);
+    expect(actual).toMatchSnapshot();
+  });
+
+  it('returns an object with the correct structure for string accessors', () => {
+    const actual = fn(context, { ...visConfig, ...stringAccessors }, undefined);
     expect(actual).toMatchSnapshot();
   });
 
@@ -44,7 +93,7 @@ describe('interpreter/functions#tagcloud', () => {
         },
       },
     };
-    await fn(context, visConfig, handlers as any);
+    await fn(context, { ...visConfig, ...numberAccessors }, handlers as any);
 
     expect(loggedTable!).toMatchSnapshot();
   });
diff --git a/src/plugins/chart_expressions/expression_tagcloud/common/expression_functions/tagcloud_function.ts b/src/plugins/chart_expressions/expression_tagcloud/common/expression_functions/tagcloud_function.ts
index c3553c4660ce9..2ce50e94aeda3 100644
--- a/src/plugins/chart_expressions/expression_tagcloud/common/expression_functions/tagcloud_function.ts
+++ b/src/plugins/chart_expressions/expression_tagcloud/common/expression_functions/tagcloud_function.ts
@@ -8,7 +8,7 @@
 import { i18n } from '@kbn/i18n';
 
 import { prepareLogTable, Dimension } from '../../../../visualizations/common/prepare_log_table';
-import { TagCloudVisParams } from '../types';
+import { TagCloudRendererParams } from '../types';
 import { ExpressionTagcloudFunction } from '../types';
 import { EXPRESSION_NAME } from '../constants';
 
@@ -125,7 +125,7 @@ export const tagcloudFunction: ExpressionTagcloudFunction = () => {
       },
     },
     fn(input, args, handlers) {
-      const visParams = {
+      const visParams: TagCloudRendererParams = {
         scale: args.scale,
         orientation: args.orientation,
         minFontSize: args.minFontSize,
@@ -139,7 +139,7 @@ export const tagcloudFunction: ExpressionTagcloudFunction = () => {
           type: 'palette',
           name: args.palette,
         },
-      } as TagCloudVisParams;
+      };
 
       if (handlers?.inspectorAdapters?.tables) {
         const argsTable: Dimension[] = [[[args.metric], dimension.tagSize]];
diff --git a/src/plugins/chart_expressions/expression_tagcloud/common/types/expression_functions.ts b/src/plugins/chart_expressions/expression_tagcloud/common/types/expression_functions.ts
index b1aba30380b59..1ee0434e1603e 100644
--- a/src/plugins/chart_expressions/expression_tagcloud/common/types/expression_functions.ts
+++ b/src/plugins/chart_expressions/expression_tagcloud/common/types/expression_functions.ts
@@ -10,19 +10,10 @@ import {
   Datatable,
   ExpressionFunctionDefinition,
   ExpressionValueRender,
-  SerializedFieldFormat,
 } from '../../../../expressions';
 import { ExpressionValueVisDimension } from '../../../../visualizations/common';
 import { EXPRESSION_NAME } from '../constants';
 
-interface Dimension {
-  accessor: number;
-  format: {
-    id?: string;
-    params?: SerializedFieldFormat<object>;
-  };
-}
-
 interface TagCloudCommonParams {
   scale: 'linear' | 'log' | 'square root';
   orientation: 'single' | 'right angled' | 'multiple';
@@ -36,16 +27,16 @@ export interface TagCloudVisConfig extends TagCloudCommonParams {
   bucket?: ExpressionValueVisDimension;
 }
 
-export interface TagCloudVisParams extends TagCloudCommonParams {
+export interface TagCloudRendererParams extends TagCloudCommonParams {
   palette: PaletteOutput;
-  metric: Dimension;
-  bucket?: Dimension;
+  metric: ExpressionValueVisDimension;
+  bucket?: ExpressionValueVisDimension;
 }
 
 export interface TagcloudRendererConfig {
   visType: typeof EXPRESSION_NAME;
   visData: Datatable;
-  visParams: TagCloudVisParams;
+  visParams: TagCloudRendererParams;
   syncColors: boolean;
 }
 
diff --git a/src/plugins/chart_expressions/expression_tagcloud/public/__mocks__/format_service.ts b/src/plugins/chart_expressions/expression_tagcloud/public/__mocks__/format_service.ts
new file mode 100644
index 0000000000000..77f6d8eb0bf37
--- /dev/null
+++ b/src/plugins/chart_expressions/expression_tagcloud/public/__mocks__/format_service.ts
@@ -0,0 +1,13 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const getFormatService = () => ({
+  deserialize: (target: any) => ({
+    convert: (text: string, format: string) => text,
+  }),
+});
diff --git a/src/plugins/chart_expressions/expression_tagcloud/public/__mocks__/palettes.ts b/src/plugins/chart_expressions/expression_tagcloud/public/__mocks__/palettes.ts
new file mode 100644
index 0000000000000..7ca00b58f5624
--- /dev/null
+++ b/src/plugins/chart_expressions/expression_tagcloud/public/__mocks__/palettes.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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { PaletteDefinition, SeriesLayer } from '../../../../charts/public';
+import { random } from 'lodash';
+
+export const getPaletteRegistry = () => {
+  const colors = [
+    '#54B399',
+    '#6092C0',
+    '#D36086',
+    '#9170B8',
+    '#CA8EAE',
+    '#D6BF57',
+    '#B9A888',
+    '#DA8B45',
+    '#AA6556',
+    '#E7664C',
+  ];
+  const mockPalette: PaletteDefinition = {
+    id: 'default',
+    title: 'My Palette',
+    getCategoricalColor: (_: SeriesLayer[]) => colors[random(0, colors.length - 1)],
+    getCategoricalColors: (num: number) => colors,
+    toExpression: () => ({
+      type: 'expression',
+      chain: [
+        {
+          type: 'function',
+          function: 'system_palette',
+          arguments: {
+            name: ['default'],
+          },
+        },
+      ],
+    }),
+  };
+
+  return {
+    get: (name: string) => mockPalette,
+    getAll: () => [mockPalette],
+  };
+};
+
+export const palettes = {
+  getPalettes: async () => getPaletteRegistry(),
+};
diff --git a/src/plugins/chart_expressions/expression_tagcloud/public/__stories__/tagcloud_renderer.stories.tsx b/src/plugins/chart_expressions/expression_tagcloud/public/__stories__/tagcloud_renderer.stories.tsx
new file mode 100644
index 0000000000000..1e0dc2600d1a1
--- /dev/null
+++ b/src/plugins/chart_expressions/expression_tagcloud/public/__stories__/tagcloud_renderer.stories.tsx
@@ -0,0 +1,125 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { tagcloudRenderer } from '../expression_renderers';
+import { Render } from '../../../../presentation_util/public/__stories__';
+import { TagcloudRendererConfig } from '../../common/types';
+import { palettes } from '../__mocks__/palettes';
+
+const config: TagcloudRendererConfig = {
+  visType: 'tagcloud',
+  visData: {
+    type: 'datatable',
+    rows: [
+      { country: 'US', Count: 14 },
+      { country: 'JP', Count: 13 },
+      { country: 'UK', Count: 13 },
+      { country: 'CN', Count: 8 },
+      { country: 'TZ', Count: 14 },
+      { country: 'NL', Count: 11 },
+      { country: 'AZ', Count: 14 },
+      { country: 'BR', Count: 11 },
+      { country: 'DE', Count: 16 },
+      { country: 'SA', Count: 11 },
+      { country: 'RU', Count: 9 },
+      { country: 'IN', Count: 9 },
+      { country: 'PH', Count: 7 },
+    ],
+    columns: [
+      { id: 'country', name: 'country', meta: { type: 'string' } },
+      { id: 'Count', name: 'Count', meta: { type: 'number' } },
+    ],
+  },
+  visParams: {
+    scale: 'linear',
+    orientation: 'single',
+    minFontSize: 18,
+    maxFontSize: 72,
+    showLabel: true,
+    metric: {
+      type: 'vis_dimension',
+      accessor: { id: 'Count', name: 'Count', meta: { type: 'number' } },
+      format: { id: 'string', params: {} },
+    },
+    bucket: {
+      type: 'vis_dimension',
+      accessor: { id: 'country', name: 'country', meta: { type: 'string' } },
+      format: { id: 'string', params: {} },
+    },
+    palette: { type: 'palette', name: 'default' },
+  },
+  syncColors: false,
+};
+
+const containerSize = {
+  width: '700px',
+  height: '700px',
+};
+
+storiesOf('renderers/tag_cloud_vis', module)
+  .add('Default', () => {
+    return (
+      <Render renderer={() => tagcloudRenderer({ palettes })} config={config} {...containerSize} />
+    );
+  })
+  .add('With log scale', () => {
+    return (
+      <Render
+        renderer={() => tagcloudRenderer({ palettes })}
+        config={{ ...config, visParams: { ...config.visParams, scale: 'log' } }}
+        {...containerSize}
+      />
+    );
+  })
+  .add('With square root scale', () => {
+    return (
+      <Render
+        renderer={() => tagcloudRenderer({ palettes })}
+        config={{ ...config, visParams: { ...config.visParams, scale: 'square root' } }}
+        {...containerSize}
+      />
+    );
+  })
+  .add('With right angled orientation', () => {
+    return (
+      <Render
+        renderer={() => tagcloudRenderer({ palettes })}
+        config={{ ...config, visParams: { ...config.visParams, orientation: 'right angled' } }}
+        {...containerSize}
+      />
+    );
+  })
+  .add('With multiple orientations', () => {
+    return (
+      <Render
+        renderer={() => tagcloudRenderer({ palettes })}
+        config={{ ...config, visParams: { ...config.visParams, orientation: 'multiple' } }}
+        {...containerSize}
+      />
+    );
+  })
+  .add('With hidden label', () => {
+    return (
+      <Render
+        renderer={() => tagcloudRenderer({ palettes })}
+        config={{ ...config, visParams: { ...config.visParams, showLabel: false } }}
+        {...containerSize}
+      />
+    );
+  })
+  .add('With empty results', () => {
+    return (
+      <Render
+        renderer={() => tagcloudRenderer({ palettes })}
+        config={{ ...config, visData: { ...config.visData, rows: [] } }}
+        {...containerSize}
+      />
+    );
+  });
diff --git a/src/plugins/chart_expressions/expression_tagcloud/public/components/tag_cloud.scss b/src/plugins/chart_expressions/expression_tagcloud/public/components/tag_cloud.scss
index 51b5e9dedd844..8a017150fe195 100644
--- a/src/plugins/chart_expressions/expression_tagcloud/public/components/tag_cloud.scss
+++ b/src/plugins/chart_expressions/expression_tagcloud/public/components/tag_cloud.scss
@@ -9,6 +9,8 @@
   flex: 1 1 0;
   display: flex;
   flex-direction: column;
+  // it is used for rendering at `Canvas`.
+  height: 100%;
 }
 
 .tgcChart__wrapper text {
diff --git a/src/plugins/chart_expressions/expression_tagcloud/public/components/tagcloud_component.test.tsx b/src/plugins/chart_expressions/expression_tagcloud/public/components/tagcloud_component.test.tsx
index 542a9c1cd9bf7..f65630e422cce 100644
--- a/src/plugins/chart_expressions/expression_tagcloud/public/components/tagcloud_component.test.tsx
+++ b/src/plugins/chart_expressions/expression_tagcloud/public/components/tagcloud_component.test.tsx
@@ -6,15 +6,15 @@
  * Side Public License, v 1.
  */
 import React from 'react';
-import { Wordcloud, Settings } from '@elastic/charts';
+import { Wordcloud, Settings, WordcloudSpec } from '@elastic/charts';
 import { chartPluginMock } from '../../../../charts/public/mocks';
 import type { Datatable } from '../../../../expressions/public';
 import { mount } from 'enzyme';
 import { findTestSubject } from '@elastic/eui/lib/test';
 import TagCloudChart, { TagCloudChartProps } from './tagcloud_component';
-import { TagCloudVisParams } from '../../common/types';
+import { TagCloudRendererParams } from '../../common/types';
 
-jest.mock('../services', () => ({
+jest.mock('../format_service', () => ({
   getFormatService: jest.fn(() => {
     return {
       deserialize: jest.fn(),
@@ -23,29 +23,34 @@ jest.mock('../services', () => ({
 }));
 
 const palettesRegistry = chartPluginMock.createPaletteRegistry();
-const visData = ({
+const geoDestId = 'geo.dest';
+const countId = 'Count';
+const visData: Datatable = {
+  type: 'datatable',
   columns: [
     {
-      id: 'col-0',
-      name: 'geo.dest: Descending',
+      id: geoDestId,
+      name: `${geoDestId}: Descending`,
+      meta: { type: 'string' },
     },
     {
-      id: 'col-1',
+      id: countId,
       name: 'Count',
+      meta: { type: 'number' },
     },
   ],
   rows: [
-    { 'col-0': 'CN', 'col-1': 26 },
-    { 'col-0': 'IN', 'col-1': 17 },
-    { 'col-0': 'US', 'col-1': 6 },
-    { 'col-0': 'DE', 'col-1': 4 },
-    { 'col-0': 'BR', 'col-1': 3 },
+    { [geoDestId]: 'CN', [countId]: 26 },
+    { [geoDestId]: 'IN', [countId]: 17 },
+    { [geoDestId]: 'US', [countId]: 6 },
+    { [geoDestId]: 'DE', [countId]: 4 },
+    { [geoDestId]: 'BR', [countId]: 3 },
   ],
-} as unknown) as Datatable;
+};
 
-const visParams = {
-  bucket: { accessor: 0, format: {} },
-  metric: { accessor: 1, format: {} },
+const visParams: TagCloudRendererParams = {
+  bucket: { type: 'vis_dimension', accessor: 0, format: { params: {} } },
+  metric: { type: 'vis_dimension', accessor: 1, format: { params: {} } },
   scale: 'linear',
   orientation: 'single',
   palette: {
@@ -55,13 +60,42 @@ const visParams = {
   minFontSize: 12,
   maxFontSize: 70,
   showLabel: true,
-} as TagCloudVisParams;
+};
+
+const formattedData: WordcloudSpec['data'] = [
+  {
+    color: 'black',
+    text: 'CN',
+    weight: 1,
+  },
+  {
+    color: 'black',
+    text: 'IN',
+    weight: 0.6086956521739131,
+  },
+  {
+    color: 'black',
+    text: 'US',
+    weight: 0.13043478260869565,
+  },
+  {
+    color: 'black',
+    text: 'DE',
+    weight: 0.043478260869565216,
+  },
+  {
+    color: 'black',
+    text: 'BR',
+    weight: 0,
+  },
+];
 
 describe('TagCloudChart', function () {
-  let wrapperProps: TagCloudChartProps;
+  let wrapperPropsWithIndexes: TagCloudChartProps;
+  let wrapperPropsWithColumnNames: TagCloudChartProps;
 
   beforeAll(() => {
-    wrapperProps = {
+    wrapperPropsWithIndexes = {
       visData,
       visParams,
       palettesRegistry,
@@ -70,68 +104,77 @@ describe('TagCloudChart', function () {
       syncColors: false,
       visType: 'tagcloud',
     };
+
+    wrapperPropsWithColumnNames = {
+      visData,
+      visParams: {
+        ...visParams,
+        bucket: {
+          type: 'vis_dimension',
+          accessor: {
+            id: geoDestId,
+            name: geoDestId,
+            meta: { type: 'string' },
+          },
+          format: { id: 'string', params: {} },
+        },
+        metric: {
+          type: 'vis_dimension',
+          accessor: {
+            id: countId,
+            name: countId,
+            meta: { type: 'number' },
+          },
+          format: { id: 'number', params: {} },
+        },
+      },
+      palettesRegistry,
+      fireEvent: jest.fn(),
+      renderComplete: jest.fn(),
+      syncColors: false,
+      visType: 'tagcloud',
+    };
   });
 
-  it('renders the Wordcloud component', async () => {
-    const component = mount(<TagCloudChart {...wrapperProps} />);
+  it('renders the Wordcloud component with', async () => {
+    const component = mount(<TagCloudChart {...wrapperPropsWithIndexes} />);
     expect(component.find(Wordcloud).length).toBe(1);
   });
 
   it('renders the label correctly', async () => {
-    const component = mount(<TagCloudChart {...wrapperProps} />);
+    const component = mount(<TagCloudChart {...wrapperPropsWithIndexes} />);
     const label = findTestSubject(component, 'tagCloudLabel');
     expect(label.text()).toEqual('geo.dest: Descending - Count');
   });
 
   it('not renders the label if showLabel setting is off', async () => {
     const newVisParams = { ...visParams, showLabel: false };
-    const newProps = { ...wrapperProps, visParams: newVisParams };
+    const newProps = { ...wrapperPropsWithIndexes, visParams: newVisParams };
     const component = mount(<TagCloudChart {...newProps} />);
     const label = findTestSubject(component, 'tagCloudLabel');
     expect(label.length).toBe(0);
   });
 
-  it('receives the data on the correct format', () => {
-    const component = mount(<TagCloudChart {...wrapperProps} />);
-    expect(component.find(Wordcloud).prop('data')).toStrictEqual([
-      {
-        color: 'black',
-        text: 'CN',
-        weight: 1,
-      },
-      {
-        color: 'black',
-        text: 'IN',
-        weight: 0.6086956521739131,
-      },
-      {
-        color: 'black',
-        text: 'US',
-        weight: 0.13043478260869565,
-      },
-      {
-        color: 'black',
-        text: 'DE',
-        weight: 0.043478260869565216,
-      },
-      {
-        color: 'black',
-        text: 'BR',
-        weight: 0,
-      },
-    ]);
+  it('receives the data in the correct format for bucket and metric accessors of type number', () => {
+    const component = mount(<TagCloudChart {...wrapperPropsWithIndexes} />);
+    expect(component.find(Wordcloud).prop('data')).toStrictEqual(formattedData);
+  });
+
+  it('receives the data in the correct format for bucket and metric accessors of type DatatableColumn', () => {
+    const component = mount(<TagCloudChart {...wrapperPropsWithColumnNames} />);
+    expect(component.find(Wordcloud).prop('data')).toStrictEqual(formattedData);
   });
 
   it('sets the angles correctly', async () => {
-    const newVisParams = { ...visParams, orientation: 'right angled' } as TagCloudVisParams;
-    const newProps = { ...wrapperProps, visParams: newVisParams };
+    const newVisParams: TagCloudRendererParams = { ...visParams, orientation: 'right angled' };
+    const newProps = { ...wrapperPropsWithIndexes, visParams: newVisParams };
     const component = mount(<TagCloudChart {...newProps} />);
     expect(component.find(Wordcloud).prop('endAngle')).toBe(90);
     expect(component.find(Wordcloud).prop('angleCount')).toBe(2);
   });
 
   it('calls filter callback', () => {
-    const component = mount(<TagCloudChart {...wrapperProps} />);
+    const component = mount(<TagCloudChart {...wrapperPropsWithIndexes} />);
     component.find(Settings).prop('onElementClick')!([
       [
         {
@@ -145,6 +188,6 @@ describe('TagCloudChart', function () {
         },
       ],
     ]);
-    expect(wrapperProps.fireEvent).toHaveBeenCalled();
+    expect(wrapperPropsWithIndexes.fireEvent).toHaveBeenCalled();
   });
 });
diff --git a/src/plugins/chart_expressions/expression_tagcloud/public/components/tagcloud_component.tsx b/src/plugins/chart_expressions/expression_tagcloud/public/components/tagcloud_component.tsx
index 163a2e8ce38ac..b7d38c71f5867 100644
--- a/src/plugins/chart_expressions/expression_tagcloud/public/components/tagcloud_component.tsx
+++ b/src/plugins/chart_expressions/expression_tagcloud/public/components/tagcloud_component.tsx
@@ -12,8 +12,13 @@ import { throttle } from 'lodash';
 import { EuiIconTip, EuiResizeObserver } from '@elastic/eui';
 import { Chart, Settings, Wordcloud, RenderChangeListener } from '@elastic/charts';
 import type { PaletteRegistry } from '../../../../charts/public';
-import type { IInterpreterRenderHandlers } from '../../../../expressions/public';
-import { getFormatService } from '../services';
+import {
+  Datatable,
+  DatatableColumn,
+  IInterpreterRenderHandlers,
+} from '../../../../expressions/public';
+import { getFormatService } from '../format_service';
+import { ExpressionValueVisDimension } from '../../../../visualizations/public';
 import { TagcloudRendererConfig } from '../../common/types';
 
 import './tag_cloud.scss';
@@ -68,6 +73,17 @@ const ORIENTATIONS = {
   },
 };
 
+const getColumn = (
+  accessor: ExpressionValueVisDimension['accessor'],
+  columns: Datatable['columns']
+): DatatableColumn => {
+  if (typeof accessor === 'number') {
+    return columns[accessor];
+  }
+
+  return columns.filter(({ id }) => id === accessor.id)[0];
+};
+
 export const TagCloudChart = ({
   visData,
   visParams,
@@ -81,18 +97,18 @@ export const TagCloudChart = ({
   const bucketFormatter = bucket ? getFormatService().deserialize(bucket.format) : null;
 
   const tagCloudData = useMemo(() => {
-    const tagColumn = bucket ? visData.columns[bucket.accessor].id : -1;
-    const metricColumn = visData.columns[metric.accessor]?.id;
+    const tagColumn = bucket ? getColumn(bucket.accessor, visData.columns).id : null;
+    const metricColumn = getColumn(metric.accessor, visData.columns).id;
 
     const metrics = visData.rows.map((row) => row[metricColumn]);
-    const values = bucket ? visData.rows.map((row) => row[tagColumn]) : [];
+    const values = bucket && tagColumn !== null ? visData.rows.map((row) => row[tagColumn]) : [];
     const maxValue = Math.max(...metrics);
     const minValue = Math.min(...metrics);
 
     return visData.rows.map((row) => {
-      const tag = row[tagColumn] === undefined ? 'all' : row[tagColumn];
+      const tag = tagColumn === null ? 'all' : row[tagColumn];
       return {
-        text: (bucketFormatter ? bucketFormatter.convert(tag, 'text') : tag) as string,
+        text: bucketFormatter ? bucketFormatter.convert(tag, 'text') : tag,
         weight:
           tag === 'all' || visData.rows.length <= 1
             ? 1
@@ -112,7 +128,9 @@ export const TagCloudChart = ({
   ]);
 
   const label = bucket
-    ? `${visData.columns[bucket.accessor].name} - ${visData.columns[metric.accessor].name}`
+    ? `${getColumn(bucket.accessor, visData.columns).name} - ${
+        getColumn(metric.accessor, visData.columns).name
+      }`
     : '';
 
   const onRenderChange = useCallback<RenderChangeListener>(
@@ -133,17 +151,17 @@ export const TagCloudChart = ({
   );
 
   const handleWordClick = useCallback(
-    (d) => {
+    (elements) => {
       if (!bucket) {
         return;
       }
-      const termsBucket = visData.columns[bucket.accessor];
-      const clickedValue = d[0][0].text;
+      const termsBucketId = getColumn(bucket.accessor, visData.columns).id;
+      const clickedValue = elements[0][0].text;
 
       const rowIndex = visData.rows.findIndex((row) => {
         const formattedValue = bucketFormatter
-          ? bucketFormatter.convert(row[termsBucket.id], 'text')
-          : row[termsBucket.id];
+          ? bucketFormatter.convert(row[termsBucketId], 'text')
+          : row[termsBucketId];
         return formattedValue === clickedValue;
       });
 
diff --git a/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx b/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx
index 58e177dac6775..294371b3a5703 100644
--- a/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx
+++ b/src/plugins/chart_expressions/expression_tagcloud/public/expression_renderers/tagcloud_renderer.tsx
@@ -5,15 +5,16 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+
 import React, { lazy } from 'react';
 import { render, unmountComponentAtNode } from 'react-dom';
 import { I18nProvider } from '@kbn/i18n/react';
+import { ClassNames } from '@emotion/react';
 import { i18n } from '@kbn/i18n';
-import { ExpressionRenderDefinition } from '../../../../expressions/common';
 import { VisualizationContainer } from '../../../../visualizations/public';
-import { withSuspense } from '../../../../presentation_util/public';
-import { TagcloudRendererConfig } from '../../common/types';
+import { ExpressionRenderDefinition } from '../../../../expressions/common/expression_renderers';
 import { ExpressioTagcloudRendererDependencies } from '../plugin';
+import { TagcloudRendererConfig } from '../../common/types';
 import { EXPRESSION_NAME } from '../../common';
 
 export const strings = {
@@ -27,8 +28,11 @@ export const strings = {
     }),
 };
 
-const LazyTagcloudComponent = lazy(() => import('../components/tagcloud_component'));
-const TagcloudComponent = withSuspense(LazyTagcloudComponent);
+const tagCloudVisClass = {
+  height: '100%',
+};
+
+const TagCloudChart = lazy(() => import('../components/tagcloud_component'));
 
 export const tagcloudRenderer: (
   deps: ExpressioTagcloudRendererDependencies
@@ -43,17 +47,29 @@ export const tagcloudRenderer: (
     });
     const palettesRegistry = await palettes.getPalettes();
 
+    const showNoResult = config.visData.rows.length === 0;
+
     render(
       <I18nProvider>
-        <VisualizationContainer handlers={handlers}>
-          <TagcloudComponent
-            {...config}
-            palettesRegistry={palettesRegistry}
-            renderComplete={handlers.done}
-            fireEvent={handlers.event}
-            syncColors={config.syncColors}
-          />
-        </VisualizationContainer>
+        <ClassNames>
+          {({ css, cx }) => (
+            <VisualizationContainer
+              handlers={handlers}
+              // Class `tagCloudContainer` is generated by `@emotion/react` and passed as a defined class to `VisualizationContainer`.
+              // It is used for rendering at `Canvas`.
+              className={cx('tagCloudContainer', css(tagCloudVisClass))}
+              showNoResult={showNoResult}
+            >
+              <TagCloudChart
+                {...config}
+                palettesRegistry={palettesRegistry}
+                renderComplete={handlers.done}
+                fireEvent={handlers.event}
+                syncColors={config.syncColors}
+              />
+            </VisualizationContainer>
+          )}
+        </ClassNames>
       </I18nProvider>,
       domNode
     );
diff --git a/src/plugins/chart_expressions/expression_tagcloud/public/services.ts b/src/plugins/chart_expressions/expression_tagcloud/public/format_service.ts
similarity index 100%
rename from src/plugins/chart_expressions/expression_tagcloud/public/services.ts
rename to src/plugins/chart_expressions/expression_tagcloud/public/format_service.ts
diff --git a/src/plugins/chart_expressions/expression_tagcloud/public/plugin.ts b/src/plugins/chart_expressions/expression_tagcloud/public/plugin.ts
index 7cbc9ac7c6706..9ffb910bde213 100644
--- a/src/plugins/chart_expressions/expression_tagcloud/public/plugin.ts
+++ b/src/plugins/chart_expressions/expression_tagcloud/public/plugin.ts
@@ -12,7 +12,7 @@ import { ChartsPluginSetup } from '../../../charts/public';
 import { tagcloudRenderer } from './expression_renderers';
 import { tagcloudFunction } from '../common/expression_functions';
 import { FieldFormatsStart } from '../../../field_formats/public';
-import { setFormatService } from './services';
+import { setFormatService } from './format_service';
 
 interface SetupDeps {
   expressions: ExpressionsSetup;
diff --git a/src/plugins/interactive_setup/common/constants.ts b/src/plugins/interactive_setup/common/constants.ts
new file mode 100644
index 0000000000000..00a3efc316cd9
--- /dev/null
+++ b/src/plugins/interactive_setup/common/constants.ts
@@ -0,0 +1,9 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export const VERIFICATION_CODE_LENGTH = 6;
diff --git a/src/plugins/interactive_setup/common/index.ts b/src/plugins/interactive_setup/common/index.ts
index ab8c00cfa5a8e..3833873eb2a18 100644
--- a/src/plugins/interactive_setup/common/index.ts
+++ b/src/plugins/interactive_setup/common/index.ts
@@ -8,3 +8,4 @@
 
 export type { InteractiveSetupViewState, EnrollmentToken, Certificate, PingResult } from './types';
 export { ElasticsearchConnectionStatus } from './elasticsearch_connection_status';
+export { VERIFICATION_CODE_LENGTH } from './constants';
diff --git a/src/plugins/interactive_setup/public/app.tsx b/src/plugins/interactive_setup/public/app.tsx
index 0c206cb4fa215..da1318d84cf03 100644
--- a/src/plugins/interactive_setup/public/app.tsx
+++ b/src/plugins/interactive_setup/public/app.tsx
@@ -20,7 +20,11 @@ import { ClusterConfigurationForm } from './cluster_configuration_form';
 import { EnrollmentTokenForm } from './enrollment_token_form';
 import { ProgressIndicator } from './progress_indicator';
 
-export const App: FunctionComponent = () => {
+export interface AppProps {
+  onSuccess?(): void;
+}
+
+export const App: FunctionComponent<AppProps> = ({ onSuccess }) => {
   const [page, setPage] = useState<'token' | 'manual' | 'success'>('token');
   const [cluster, setCluster] = useState<
     Omit<ClusterConfigurationFormProps, 'onCancel' | 'onSuccess'>
@@ -71,9 +75,7 @@ export const App: FunctionComponent = () => {
               />
             )}
           </div>
-          {page === 'success' && (
-            <ProgressIndicator onSuccess={() => window.location.replace(window.location.href)} />
-          )}
+          {page === 'success' && <ProgressIndicator onSuccess={onSuccess} />}
         </EuiPanel>
       </div>
     </div>
diff --git a/src/plugins/interactive_setup/public/cluster_address_form.tsx b/src/plugins/interactive_setup/public/cluster_address_form.tsx
index ba7b1d46182a1..6f97680066373 100644
--- a/src/plugins/interactive_setup/public/cluster_address_form.tsx
+++ b/src/plugins/interactive_setup/public/cluster_address_form.tsx
@@ -51,7 +51,7 @@ export const ClusterAddressForm: FunctionComponent<ClusterAddressFormProps> = ({
   const [form, eventHandlers] = useForm({
     defaultValues,
     validate: async (values) => {
-      const errors: ValidationErrors<typeof values> = {};
+      const errors: ValidationErrors<ClusterAddressFormValues> = {};
 
       if (!values.host) {
         errors.host = i18n.translate('interactiveSetup.clusterAddressForm.hostRequiredError', {
diff --git a/src/plugins/interactive_setup/public/cluster_configuration_form.tsx b/src/plugins/interactive_setup/public/cluster_configuration_form.tsx
index cd3541fe0318f..dfb5148ddb288 100644
--- a/src/plugins/interactive_setup/public/cluster_configuration_form.tsx
+++ b/src/plugins/interactive_setup/public/cluster_configuration_form.tsx
@@ -26,6 +26,7 @@ import {
 } from '@elastic/eui';
 import type { FunctionComponent } from 'react';
 import React from 'react';
+import useUpdateEffect from 'react-use/lib/useUpdateEffect';
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -37,6 +38,8 @@ import type { ValidationErrors } from './use_form';
 import { useForm } from './use_form';
 import { useHtmlId } from './use_html_id';
 import { useHttp } from './use_http';
+import { useVerification } from './use_verification';
+import { useVisibility } from './use_visibility';
 
 export interface ClusterConfigurationFormValues {
   username: string;
@@ -66,10 +69,10 @@ export const ClusterConfigurationForm: FunctionComponent<ClusterConfigurationFor
   onSuccess,
 }) => {
   const http = useHttp();
-
+  const { status, getCode } = useVerification();
   const [form, eventHandlers] = useForm({
     defaultValues,
-    validate: async (values) => {
+    validate: (values) => {
       const errors: ValidationErrors<ClusterConfigurationFormValues> = {};
 
       if (authRequired) {
@@ -93,7 +96,7 @@ export const ClusterConfigurationForm: FunctionComponent<ClusterConfigurationFor
           errors.password = i18n.translate(
             'interactiveSetup.clusterConfigurationForm.passwordRequiredError',
             {
-              defaultMessage: `Enter a password.`,
+              defaultMessage: 'Enter a password.',
             }
           );
         }
@@ -117,17 +120,24 @@ export const ClusterConfigurationForm: FunctionComponent<ClusterConfigurationFor
           username: values.username,
           password: values.password,
           caCert: values.caCert,
+          code: getCode(),
         }),
       });
       onSuccess?.();
     },
   });
-
+  const [isVisible, buttonRef] = useVisibility<HTMLButtonElement>();
   const trustCaCertId = useHtmlId('clusterConfigurationForm', 'trustCaCert');
 
+  useUpdateEffect(() => {
+    if (status === 'verified' && isVisible) {
+      form.submit();
+    }
+  }, [status]);
+
   return (
     <EuiForm component="form" noValidate {...eventHandlers}>
-      {form.submitError && (
+      {status !== 'unverified' && !form.isSubmitting && !form.isValidating && form.submitError && (
         <>
           <EuiCallOut
             color="danger"
@@ -140,7 +150,6 @@ export const ClusterConfigurationForm: FunctionComponent<ClusterConfigurationFor
           <EuiSpacer />
         </>
       )}
-
       <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s">
         <EuiFlexItem grow={false} className="eui-textNoWrap">
           <FormattedMessage
@@ -155,7 +164,6 @@ export const ClusterConfigurationForm: FunctionComponent<ClusterConfigurationFor
         </EuiFlexItem>
       </EuiFlexGroup>
       <EuiSpacer />
-
       {authRequired ? (
         <>
           <EuiFormRow
@@ -221,7 +229,6 @@ export const ClusterConfigurationForm: FunctionComponent<ClusterConfigurationFor
           <EuiSpacer />
         </>
       )}
-
       {certificateChain && certificateChain.length > 0 && (
         <>
           <EuiFormRow
@@ -242,8 +249,8 @@ export const ClusterConfigurationForm: FunctionComponent<ClusterConfigurationFor
               checked={!!form.values.caCert}
               onChange={() => {
                 const intermediateCa = certificateChain[Math.min(1, certificateChain.length - 1)];
-                form.setValue('caCert', form.values.caCert ? '' : intermediateCa.raw);
                 form.setTouched('caCert');
+                form.setValue('caCert', form.values.caCert ? '' : intermediateCa.raw);
               }}
             >
               <CertificatePanel certificate={certificateChain[0]} />
@@ -252,7 +259,6 @@ export const ClusterConfigurationForm: FunctionComponent<ClusterConfigurationFor
           <EuiSpacer />
         </>
       )}
-
       <EuiFlexGroup responsive={false} justifyContent="flexEnd">
         <EuiFlexItem grow={false}>
           <EuiButtonEmpty flush="right" iconType="arrowLeft" onClick={onCancel}>
@@ -264,6 +270,7 @@ export const ClusterConfigurationForm: FunctionComponent<ClusterConfigurationFor
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiButton
+            buttonRef={buttonRef}
             type="submit"
             isLoading={form.isSubmitting}
             isDisabled={form.isSubmitted && form.isInvalid}
diff --git a/src/plugins/interactive_setup/public/enrollment_token_form.tsx b/src/plugins/interactive_setup/public/enrollment_token_form.tsx
index 3b5c751874a10..9e6774cb2a6fe 100644
--- a/src/plugins/interactive_setup/public/enrollment_token_form.tsx
+++ b/src/plugins/interactive_setup/public/enrollment_token_form.tsx
@@ -14,13 +14,13 @@ import {
   EuiFlexItem,
   EuiForm,
   EuiFormRow,
-  EuiIcon,
   EuiSpacer,
   EuiText,
   EuiTextArea,
 } from '@elastic/eui';
 import type { FunctionComponent } from 'react';
 import React from 'react';
+import useUpdateEffect from 'react-use/lib/useUpdateEffect';
 
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
@@ -31,6 +31,8 @@ import { TextTruncate } from './text_truncate';
 import type { ValidationErrors } from './use_form';
 import { useForm } from './use_form';
 import { useHttp } from './use_http';
+import { useVerification } from './use_verification';
+import { useVisibility } from './use_visibility';
 
 export interface EnrollmentTokenFormValues {
   token: string;
@@ -50,6 +52,7 @@ export const EnrollmentTokenForm: FunctionComponent<EnrollmentTokenFormProps> =
   onSuccess,
 }) => {
   const http = useHttp();
+  const { status, getCode } = useVerification();
   const [form, eventHandlers] = useForm({
     defaultValues,
     validate: (values) => {
@@ -77,17 +80,25 @@ export const EnrollmentTokenForm: FunctionComponent<EnrollmentTokenFormProps> =
           hosts: decoded.adr,
           apiKey: decoded.key,
           caFingerprint: decoded.fgr,
+          code: getCode(),
         }),
       });
       onSuccess?.();
     },
   });
+  const [isVisible, buttonRef] = useVisibility<HTMLButtonElement>();
+
+  useUpdateEffect(() => {
+    if (status === 'verified' && isVisible) {
+      form.submit();
+    }
+  }, [status]);
 
   const enrollmentToken = decodeEnrollmentToken(form.values.token);
 
   return (
     <EuiForm component="form" noValidate {...eventHandlers}>
-      {form.submitError && (
+      {status !== 'unverified' && !form.isSubmitting && !form.isValidating && form.submitError && (
         <>
           <EuiCallOut
             color="danger"
@@ -133,6 +144,7 @@ export const EnrollmentTokenForm: FunctionComponent<EnrollmentTokenFormProps> =
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiButton
+            buttonRef={buttonRef}
             type="submit"
             isLoading={form.isSubmitting}
             isDisabled={form.isSubmitted && form.isInvalid}
@@ -163,21 +175,10 @@ const EnrollmentTokenDetails: FunctionComponent<EnrollmentTokenDetailsProps> = (
           defaultMessage="Connect to"
         />
       </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiIcon type="lock" />
-      </EuiFlexItem>
       <EuiFlexItem grow={false} style={{ overflow: 'hidden' }}>
-        <TextTruncate>{token.adr[0]}</TextTruncate>
-      </EuiFlexItem>
-      <EuiFlexItem grow={false}>
-        <EuiIcon type="logoElasticsearch" />
-      </EuiFlexItem>
-      <EuiFlexItem grow={false} className="eui-textNoWrap">
-        <FormattedMessage
-          id="interactiveSetup.enrollmentTokenDetails.elasticsearchVersion"
-          defaultMessage="Elasticsearch (v{version})"
-          values={{ version: token.ver }}
-        />
+        <TextTruncate>
+          <strong>{token.adr[0]}</strong>
+        </TextTruncate>
       </EuiFlexItem>
     </EuiFlexGroup>
   </EuiText>
diff --git a/src/plugins/interactive_setup/public/plugin.tsx b/src/plugins/interactive_setup/public/plugin.tsx
index 00fd38d3e78a4..9d58479081234 100644
--- a/src/plugins/interactive_setup/public/plugin.tsx
+++ b/src/plugins/interactive_setup/public/plugin.tsx
@@ -15,6 +15,7 @@ import type { CoreSetup, CoreStart, HttpSetup, Plugin } from 'src/core/public';
 
 import { App } from './app';
 import { HttpProvider } from './use_http';
+import { VerificationProvider } from './use_verification';
 
 export class InteractiveSetupPlugin implements Plugin<void, void, {}, {}> {
   public setup(core: CoreSetup) {
@@ -24,9 +25,16 @@ export class InteractiveSetupPlugin implements Plugin<void, void, {}, {}> {
       appRoute: '/',
       chromeless: true,
       mount: (params) => {
+        const url = new URL(window.location.href);
+        const defaultCode = url.searchParams.get('code') || undefined;
+        const onSuccess = () => {
+          url.searchParams.delete('code');
+          window.location.replace(url.href);
+        };
+
         ReactDOM.render(
-          <Providers http={core.http}>
-            <App />
+          <Providers defaultCode={defaultCode} http={core.http}>
+            <App onSuccess={onSuccess} />
           </Providers>,
           params.element
         );
@@ -40,10 +48,13 @@ export class InteractiveSetupPlugin implements Plugin<void, void, {}, {}> {
 
 export interface ProvidersProps {
   http: HttpSetup;
+  defaultCode?: string;
 }
 
-export const Providers: FunctionComponent<ProvidersProps> = ({ http, children }) => (
+export const Providers: FunctionComponent<ProvidersProps> = ({ defaultCode, http, children }) => (
   <I18nProvider>
-    <HttpProvider http={http}>{children}</HttpProvider>
+    <HttpProvider http={http}>
+      <VerificationProvider defaultCode={defaultCode}>{children}</VerificationProvider>
+    </HttpProvider>
   </I18nProvider>
 );
diff --git a/src/plugins/interactive_setup/public/single_chars_field.tsx b/src/plugins/interactive_setup/public/single_chars_field.tsx
new file mode 100644
index 0000000000000..8d5cd2854c0aa
--- /dev/null
+++ b/src/plugins/interactive_setup/public/single_chars_field.tsx
@@ -0,0 +1,137 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { EuiFieldText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import type { FunctionComponent, ReactNode } from 'react';
+import React, { useEffect, useRef } from 'react';
+import useList from 'react-use/lib/useList';
+import useUpdateEffect from 'react-use/lib/useUpdateEffect';
+
+import { euiThemeVars } from '@kbn/ui-shared-deps/theme';
+
+export interface SingleCharsFieldProps {
+  defaultValue: string;
+  length: number;
+  separator?: number;
+  pattern?: RegExp;
+  onChange(value: string): void;
+  isInvalid?: boolean;
+  autoFocus?: boolean;
+}
+
+export const SingleCharsField: FunctionComponent<SingleCharsFieldProps> = ({
+  defaultValue,
+  length,
+  separator,
+  pattern = /^[0-9]$/,
+  onChange,
+  isInvalid,
+  autoFocus = false,
+}) => {
+  // Strip any invalid characters from input or clipboard and restrict length.
+  const sanitize = (str: string) => {
+    return str
+      .split('')
+      .filter((char) => char.match(pattern))
+      .join('')
+      .substr(0, length);
+  };
+
+  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);
+  const [chars, { set, updateAt }] = useList(sanitize(defaultValue).split(''));
+
+  const focusField = (i: number) => {
+    const input = inputRefs.current[i];
+    if (input) {
+      input.focus();
+    }
+  };
+
+  // Trigger `onChange` callback when characters change
+  useUpdateEffect(() => {
+    onChange(chars.join(''));
+  }, [chars]);
+
+  // Focus first field on initial render
+  useEffect(() => {
+    if (autoFocus) {
+      focusField(0);
+    }
+  }, [autoFocus]);
+
+  const children: ReactNode[] = [];
+  for (let i = 0; i < length; i++) {
+    if (separator && i !== 0 && i % separator === 0) {
+      children.push(
+        <EuiFlexItem
+          key={`${i}separator`}
+          grow={false}
+          style={{ width: parseInt(euiThemeVars.euiFormControlHeight, 10) / 8 }}
+        />
+      );
+    }
+
+    children.push(
+      <EuiFlexItem key={i} grow={false} style={{ width: euiThemeVars.euiFormControlHeight }}>
+        <EuiFieldText
+          inputRef={(el) => {
+            inputRefs.current[i] = el;
+          }}
+          value={chars[i] ?? ''}
+          onChange={(event) => {
+            // Ensure event doesn't bubble up since we manage our own `onChange` event
+            event.stopPropagation();
+          }}
+          onInput={(event) => {
+            // Ignore input if invalid character was entered (unless empty)
+            if (event.currentTarget.value !== '' && sanitize(event.currentTarget.value) === '') {
+              return event.preventDefault();
+            }
+            updateAt(i, event.currentTarget.value);
+            // Do not focus the next field if value is empty (e.g. when hitting backspace)
+            if (event.currentTarget.value) {
+              focusField(i + 1);
+            }
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Backspace') {
+              // Clear previous field if current field is already empty
+              if (event.currentTarget.value === '') {
+                updateAt(i - 1, event.currentTarget.value);
+                focusField(i - 1);
+              }
+            } else if (event.key === 'ArrowLeft') {
+              focusField(i - 1);
+            } else if (event.key === 'ArrowRight') {
+              focusField(i + 1);
+            }
+          }}
+          onPaste={(event) => {
+            const text = sanitize(event.clipboardData.getData('text'));
+            set(text.split(''));
+            focusField(Math.min(text.length, length - 1));
+            event.preventDefault();
+          }}
+          onFocus={(event) => {
+            const input = event.currentTarget;
+            setTimeout(() => input.select(), 0);
+          }}
+          maxLength={1}
+          isInvalid={isInvalid}
+          style={{ textAlign: 'center' }}
+        />
+      </EuiFlexItem>
+    );
+  }
+
+  return (
+    <EuiFlexGroup responsive={false} alignItems="center" justifyContent="center" gutterSize="s">
+      {children}
+    </EuiFlexGroup>
+  );
+};
diff --git a/src/plugins/interactive_setup/public/use_form.ts b/src/plugins/interactive_setup/public/use_form.ts
index 8ed1d89ea087e..abd00edee6750 100644
--- a/src/plugins/interactive_setup/public/use_form.ts
+++ b/src/plugins/interactive_setup/public/use_form.ts
@@ -9,7 +9,7 @@
 import { set } from '@elastic/safer-lodash-set';
 import { cloneDeep, cloneDeepWith, get } from 'lodash';
 import type { ChangeEventHandler, FocusEventHandler, ReactEventHandler } from 'react';
-import { useRef } from 'react';
+import { useState } from 'react';
 import useAsyncFn from 'react-use/lib/useAsyncFn';
 
 export type FormReturnTuple<Values, Result> = [FormState<Values, Result>, FormProps];
@@ -81,12 +81,11 @@ export type ValidationErrors<Values> = DeepMap<Values, string>;
 export type TouchedFields<Values> = DeepMap<Values, boolean>;
 
 export interface FormState<Values, Result> {
-  setValue(name: string, value: any, revalidate?: boolean): Promise<void>;
+  setValue(name: string, value: any): Promise<void>;
   setError(name: string, message: string): void;
-  setTouched(name: string, touched?: boolean, revalidate?: boolean): Promise<void>;
-  reset(values: Values): void;
+  setTouched(name: string): Promise<void>;
+  reset(values?: Values): void;
   submit(): Promise<Result | undefined>;
-  validate(): Promise<ValidationErrors<Values>>;
   values: Values;
   errors: ValidationErrors<Values>;
   touched: TouchedFields<Values>;
@@ -123,63 +122,75 @@ export function useFormState<Values extends FormValues, Result>({
   validate,
   defaultValues,
 }: FormOptions<Values, Result>): FormState<Values, Result> {
-  const valuesRef = useRef<Values>(defaultValues);
-  const errorsRef = useRef<ValidationErrors<Values>>({});
-  const touchedRef = useRef<TouchedFields<Values>>({});
-  const submitCountRef = useRef(0);
-
-  const [validationState, validateForm] = useAsyncFn(async (formValues: Values) => {
+  const [values, setValues] = useState<Values>(defaultValues);
+  const [errors, setErrors] = useState<ValidationErrors<Values>>({});
+  const [touched, setTouched] = useState<TouchedFields<Values>>({});
+  const [submitCount, setSubmitCount] = useState(0);
+
+  async function validateFormFn(formValues: Values): Promise<Result>;
+  async function validateFormFn(formValues: undefined): Promise<undefined>;
+  async function validateFormFn(formValues: Values | undefined) {
+    // Allows resetting `useAsyncFn` state
+    if (!formValues) {
+      return Promise.resolve(undefined);
+    }
     const nextErrors = await validate(formValues);
-    errorsRef.current = nextErrors;
+    setErrors(nextErrors);
     if (Object.keys(nextErrors).length === 0) {
-      submitCountRef.current = 0;
+      setSubmitCount(0);
     }
     return nextErrors;
-  }, []);
+  }
 
-  const [submitState, submitForm] = useAsyncFn(async (formValues: Values) => {
+  async function submitFormFn(formValues: Values): Promise<Result>;
+  async function submitFormFn(formValues: undefined): Promise<undefined>;
+  async function submitFormFn(formValues: Values | undefined) {
+    // Allows resetting `useAsyncFn` state
+    if (!formValues) {
+      return Promise.resolve(undefined);
+    }
     const nextErrors = await validateForm(formValues);
-    touchedRef.current = mapDeep(formValues, true);
-    submitCountRef.current += 1;
+    setTouched(mapDeep(formValues, true));
+    setSubmitCount(submitCount + 1);
     if (Object.keys(nextErrors).length === 0) {
       return onSubmit(formValues);
     }
-  }, []);
+  }
+
+  const [validationState, validateForm] = useAsyncFn(validateFormFn, [validate]);
+  const [submitState, submitForm] = useAsyncFn(submitFormFn, [validateForm, onSubmit]);
 
   return {
-    setValue: async (name, value, revalidate = true) => {
-      const nextValues = setDeep(valuesRef.current, name, value);
-      valuesRef.current = nextValues;
-      if (revalidate) {
-        await validateForm(nextValues);
-      }
+    setValue: async (name, value) => {
+      const nextValues = setDeep(values, name, value);
+      setValues(nextValues);
+      await validateForm(nextValues);
     },
-    setTouched: async (name, touched = true, revalidate = true) => {
-      touchedRef.current = setDeep(touchedRef.current, name, touched);
-      if (revalidate) {
-        await validateForm(valuesRef.current);
-      }
+    setTouched: async (name, value = true) => {
+      setTouched(setDeep(touched, name, value));
+      await validateForm(values);
     },
     setError: (name, message) => {
-      errorsRef.current = setDeep(errorsRef.current, name, message);
-      touchedRef.current = setDeep(touchedRef.current, name, true);
+      setErrors(setDeep(errors, name, message));
+      setTouched(setDeep(touched, name, true));
     },
-    reset: (nextValues) => {
-      valuesRef.current = nextValues;
-      errorsRef.current = {};
-      touchedRef.current = {};
-      submitCountRef.current = 0;
+    reset: (nextValues = defaultValues) => {
+      setValues(nextValues);
+      setErrors({});
+      setTouched({});
+      setSubmitCount(0);
+      validateForm(undefined); // Resets `validationState`
+      submitForm(undefined); // Resets `submitState`
     },
-    submit: () => submitForm(valuesRef.current),
-    validate: () => validateForm(valuesRef.current),
-    values: valuesRef.current,
-    errors: errorsRef.current,
-    touched: touchedRef.current,
+    submit: () => submitForm(values),
+    values,
+    errors,
+    touched,
     isValidating: validationState.loading,
     isSubmitting: submitState.loading,
     submitError: submitState.error,
-    isInvalid: Object.keys(errorsRef.current).length > 0,
-    isSubmitted: submitCountRef.current > 0,
+    isInvalid: Object.keys(errors).length > 0,
+    isSubmitted: submitCount > 0,
   };
 }
 
diff --git a/src/plugins/interactive_setup/public/use_verification.tsx b/src/plugins/interactive_setup/public/use_verification.tsx
new file mode 100644
index 0000000000000..62483ba9cb62e
--- /dev/null
+++ b/src/plugins/interactive_setup/public/use_verification.tsx
@@ -0,0 +1,84 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { EuiModal, EuiModalHeader } from '@elastic/eui';
+import constate from 'constate';
+import type { FunctionComponent } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
+
+import { useHttp } from './use_http';
+import { VerificationCodeForm } from './verification_code_form';
+
+export interface VerificationProps {
+  defaultCode?: string;
+}
+
+const [OuterVerificationProvider, useVerification] = constate(
+  ({ defaultCode }: VerificationProps) => {
+    const codeRef = useRef(defaultCode);
+    const [status, setStatus] = useState<'unknown' | 'unverified' | 'verified'>('unknown');
+
+    return {
+      status,
+      setStatus,
+      getCode() {
+        return codeRef.current;
+      },
+      setCode(code: string | undefined) {
+        codeRef.current = code;
+      },
+    };
+  }
+);
+
+const InnerVerificationProvider: FunctionComponent = ({ children }) => {
+  const http = useHttp();
+  const { status, setStatus, setCode } = useVerification();
+
+  useEffect(() => {
+    return http.intercept({
+      responseError: (error) => {
+        if (error.response?.status === 403) {
+          setStatus('unverified');
+          setCode(undefined);
+        }
+      },
+    });
+  }, [http]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <>
+      {status === 'unverified' && (
+        <EuiModal onClose={() => setStatus('unknown')}>
+          <EuiModalHeader>
+            <VerificationCodeForm
+              onSuccess={(values) => {
+                setStatus('verified');
+                setCode(values.code);
+              }}
+            />
+          </EuiModalHeader>
+        </EuiModal>
+      )}
+      {children}
+    </>
+  );
+};
+
+export const VerificationProvider: FunctionComponent<VerificationProps> = ({
+  defaultCode,
+  children,
+}) => {
+  return (
+    <OuterVerificationProvider defaultCode={defaultCode}>
+      <InnerVerificationProvider>{children}</InnerVerificationProvider>
+    </OuterVerificationProvider>
+  );
+};
+
+export { useVerification };
diff --git a/src/plugins/interactive_setup/public/use_visibility.ts b/src/plugins/interactive_setup/public/use_visibility.ts
new file mode 100644
index 0000000000000..f21b5669a36aa
--- /dev/null
+++ b/src/plugins/interactive_setup/public/use_visibility.ts
@@ -0,0 +1,19 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { RefObject } from 'react';
+import { useRef } from 'react';
+
+export type VisibilityReturnTuple<T> = [boolean, RefObject<T>];
+
+export function useVisibility<T extends HTMLElement>(): VisibilityReturnTuple<T> {
+  const elementRef = useRef<T>(null);
+
+  // When an element is hidden using `display: none` or `hidden` attribute it has no offset parent.
+  return [!!elementRef.current?.offsetParent, elementRef];
+}
diff --git a/src/plugins/interactive_setup/public/verification_code_form.tsx b/src/plugins/interactive_setup/public/verification_code_form.tsx
new file mode 100644
index 0000000000000..8f4a9ea8c5d01
--- /dev/null
+++ b/src/plugins/interactive_setup/public/verification_code_form.tsx
@@ -0,0 +1,153 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import {
+  EuiButton,
+  EuiCallOut,
+  EuiEmptyPrompt,
+  EuiForm,
+  EuiFormRow,
+  EuiSpacer,
+  EuiText,
+} from '@elastic/eui';
+import type { FunctionComponent } from 'react';
+import React from 'react';
+
+import { i18n } from '@kbn/i18n';
+import { FormattedMessage } from '@kbn/i18n/react';
+import type { IHttpFetchError } from 'kibana/public';
+
+import { VERIFICATION_CODE_LENGTH } from '../common';
+import { SingleCharsField } from './single_chars_field';
+import type { ValidationErrors } from './use_form';
+import { useForm } from './use_form';
+import { useHttp } from './use_http';
+
+export interface VerificationCodeFormValues {
+  code: string;
+}
+
+export interface VerificationCodeFormProps {
+  defaultValues?: VerificationCodeFormValues;
+  onSuccess?(values: VerificationCodeFormValues): void;
+}
+
+export const VerificationCodeForm: FunctionComponent<VerificationCodeFormProps> = ({
+  defaultValues = {
+    code: '',
+  },
+  onSuccess,
+}) => {
+  const http = useHttp();
+  const [form, eventHandlers] = useForm({
+    defaultValues,
+    validate: async (values) => {
+      const errors: ValidationErrors<VerificationCodeFormValues> = {};
+
+      if (!values.code) {
+        errors.code = i18n.translate('interactiveSetup.verificationCodeForm.codeRequiredError', {
+          defaultMessage: 'Enter a verification code.',
+        });
+      } else if (values.code.length !== VERIFICATION_CODE_LENGTH) {
+        errors.code = i18n.translate('interactiveSetup.verificationCodeForm.codeMinLengthError', {
+          defaultMessage: 'Enter all six digits.',
+        });
+      }
+
+      return errors;
+    },
+    onSubmit: async (values) => {
+      try {
+        await http.post('/internal/interactive_setup/verify', {
+          body: JSON.stringify({
+            code: values.code,
+          }),
+        });
+      } catch (error) {
+        if (error.response?.status === 403) {
+          form.setError('code', error.body?.message);
+          return;
+        } else {
+          throw error;
+        }
+      }
+      onSuccess?.(values);
+    },
+  });
+
+  return (
+    <EuiForm component="form" noValidate onSubmit={eventHandlers.onSubmit}>
+      <EuiEmptyPrompt
+        iconType="lock"
+        title={
+          <h3>
+            <FormattedMessage
+              id="interactiveSetup.verificationCodeForm.title"
+              defaultMessage="Verification required"
+            />
+          </h3>
+        }
+        body={
+          <>
+            {form.submitError && (
+              <>
+                <EuiCallOut
+                  color="danger"
+                  title={i18n.translate('interactiveSetup.verificationCodeForm.submitErrorTitle', {
+                    defaultMessage: "Couldn't verify code",
+                  })}
+                >
+                  {(form.submitError as IHttpFetchError).body?.message}
+                </EuiCallOut>
+                <EuiSpacer />
+              </>
+            )}
+            <EuiText>
+              <p>
+                <FormattedMessage
+                  id="interactiveSetup.verificationCodeForm.codeDescription"
+                  defaultMessage="Copy the verification code from Kibana server."
+                />
+              </p>
+            </EuiText>
+            <EuiSpacer />
+
+            <EuiFormRow
+              error={form.errors.code}
+              isInvalid={form.touched.code && !!form.errors.code}
+              fullWidth
+            >
+              <SingleCharsField
+                defaultValue={form.values.code}
+                length={VERIFICATION_CODE_LENGTH}
+                separator={VERIFICATION_CODE_LENGTH / 2}
+                onChange={(value) => form.setValue('code', value)}
+                isInvalid={form.touched.code && !!form.errors.code}
+                autoFocus
+              />
+            </EuiFormRow>
+          </>
+        }
+        actions={
+          <EuiButton
+            type="submit"
+            isLoading={form.isSubmitting}
+            isDisabled={form.isSubmitted && form.isInvalid}
+            fill
+          >
+            <FormattedMessage
+              id="interactiveSetup.verificationCodeForm.submitButton"
+              defaultMessage="{isSubmitting, select, true{Verifying…} other{Verify}}"
+              values={{ isSubmitting: form.isSubmitting }}
+            />
+          </EuiButton>
+        }
+      />
+    </EuiForm>
+  );
+};
diff --git a/src/plugins/interactive_setup/server/kibana_config_writer.ts b/src/plugins/interactive_setup/server/kibana_config_writer.ts
index a59aa7640caa6..6271e2d78471f 100644
--- a/src/plugins/interactive_setup/server/kibana_config_writer.ts
+++ b/src/plugins/interactive_setup/server/kibana_config_writer.ts
@@ -75,7 +75,7 @@ export class KibanaConfigWriter {
       }
     }
 
-    const config: Record<string, any> = { 'elasticsearch.hosts': [params.host] };
+    const config: Record<string, string | string[]> = { 'elasticsearch.hosts': [params.host] };
     if ('serviceAccountToken' in params) {
       config['elasticsearch.serviceAccountToken'] = params.serviceAccountToken.value;
     } else if ('username' in params) {
diff --git a/src/plugins/interactive_setup/server/plugin.ts b/src/plugins/interactive_setup/server/plugin.ts
index 91a151e17b697..7f4d36385b28c 100644
--- a/src/plugins/interactive_setup/server/plugin.ts
+++ b/src/plugins/interactive_setup/server/plugin.ts
@@ -17,10 +17,12 @@ import type { ConfigSchema, ConfigType } from './config';
 import { ElasticsearchService } from './elasticsearch_service';
 import { KibanaConfigWriter } from './kibana_config_writer';
 import { defineRoutes } from './routes';
+import { VerificationCode } from './verification_code';
 
 export class InteractiveSetupPlugin implements PrebootPlugin {
   readonly #logger: Logger;
   readonly #elasticsearch: ElasticsearchService;
+  readonly #verificationCode: VerificationCode;
 
   #elasticsearchConnectionStatusSubscription?: Subscription;
 
@@ -38,6 +40,9 @@ export class InteractiveSetupPlugin implements PrebootPlugin {
     this.#elasticsearch = new ElasticsearchService(
       this.initializerContext.logger.get('elasticsearch')
     );
+    this.#verificationCode = new VerificationCode(
+      this.initializerContext.logger.get('verification')
+    );
   }
 
   public setup(core: CorePreboot) {
@@ -92,13 +97,18 @@ export class InteractiveSetupPlugin implements PrebootPlugin {
           this.#logger.debug(
             'Starting interactive setup mode since Kibana cannot to connect to Elasticsearch at http://localhost:9200.'
           );
-          const serverInfo = core.http.getServerInfo();
-          const url = `${serverInfo.protocol}://${serverInfo.hostname}:${serverInfo.port}`;
-          this.#logger.info(`
+          const { code } = this.#verificationCode;
+          const pathname = core.http.basePath.prepend('/');
+          const { protocol, hostname, port } = core.http.getServerInfo();
+          const url = `${protocol}://${hostname}:${port}${pathname}?code=${code}`;
+
+          // eslint-disable-next-line no-console
+          console.log(`
 
 ${chalk.whiteBright.bold(`${chalk.cyanBright('i')} Kibana has not been configured.`)}
 
 Go to ${chalk.cyanBright.underline(url)} to get started.
+
 `);
         }
       }
@@ -118,6 +128,7 @@ Go to ${chalk.cyanBright.underline(url)} to get started.
         preboot: { ...core.preboot, completeSetup },
         kibanaConfigWriter: new KibanaConfigWriter(configPath, this.#logger.get('kibana-config')),
         elasticsearch,
+        verificationCode: this.#verificationCode,
         getConfig: this.#getConfig.bind(this),
       });
     });
diff --git a/src/plugins/interactive_setup/server/routes/configure.test.ts b/src/plugins/interactive_setup/server/routes/configure.test.ts
index d6b7404fce516..ac4507331db4b 100644
--- a/src/plugins/interactive_setup/server/routes/configure.test.ts
+++ b/src/plugins/interactive_setup/server/routes/configure.test.ts
@@ -57,7 +57,11 @@ describe('Configure routes', () => {
       expect(() =>
         bodySchema.validate({ host: 'localhost:9200' })
       ).toThrowErrorMatchingInlineSnapshot(`"[host]: expected URI with scheme [http|https]."`);
-      expect(() => bodySchema.validate({ host: 'http://localhost:9200' })).not.toThrowError();
+      expect(bodySchema.validate({ host: 'http://localhost:9200' })).toMatchInlineSnapshot(`
+        Object {
+          "host": "http://localhost:9200",
+        }
+      `);
       expect(() =>
         bodySchema.validate({ host: 'http://localhost:9200', username: 'elastic' })
       ).toThrowErrorMatchingInlineSnapshot(
@@ -71,21 +75,57 @@ describe('Configure routes', () => {
       expect(() =>
         bodySchema.validate({ host: 'http://localhost:9200', password: 'password' })
       ).toThrowErrorMatchingInlineSnapshot(`"[password]: a value wasn't expected to be present"`);
-      expect(() =>
+      expect(
         bodySchema.validate({
           host: 'http://localhost:9200',
           username: 'kibana_system',
           password: '',
         })
-      ).not.toThrowError();
+      ).toMatchInlineSnapshot(`
+        Object {
+          "host": "http://localhost:9200",
+          "password": "",
+          "username": "kibana_system",
+        }
+      `);
       expect(() =>
         bodySchema.validate({ host: 'https://localhost:9200' })
       ).toThrowErrorMatchingInlineSnapshot(
         `"[caCert]: expected value of type [string] but got [undefined]"`
       );
-      expect(() =>
-        bodySchema.validate({ host: 'https://localhost:9200', caCert: 'der' })
-      ).not.toThrowError();
+      expect(bodySchema.validate({ host: 'https://localhost:9200', caCert: 'der' }))
+        .toMatchInlineSnapshot(`
+        Object {
+          "caCert": "der",
+          "host": "https://localhost:9200",
+        }
+      `);
+      expect(bodySchema.validate({ host: 'https://localhost:9200', caCert: 'der', code: '123456' }))
+        .toMatchInlineSnapshot(`
+        Object {
+          "caCert": "der",
+          "code": "123456",
+          "host": "https://localhost:9200",
+        }
+      `);
+    });
+
+    it('fails if verification code is invalid.', async () => {
+      mockRouteParams.verificationCode.verify.mockReturnValue(false);
+
+      const mockRequest = httpServerMock.createKibanaRequest({
+        body: { host: 'host1' },
+      });
+
+      await expect(routeHandler(mockContext, mockRequest, kibanaResponseFactory)).resolves.toEqual(
+        expect.objectContaining({
+          status: 403,
+        })
+      );
+
+      expect(mockRouteParams.elasticsearch.authenticate).not.toHaveBeenCalled();
+      expect(mockRouteParams.kibanaConfigWriter.writeConfig).not.toHaveBeenCalled();
+      expect(mockRouteParams.preboot.completeSetup).not.toHaveBeenCalled();
     });
 
     it('fails if setup is not on hold.', async () => {
diff --git a/src/plugins/interactive_setup/server/routes/configure.ts b/src/plugins/interactive_setup/server/routes/configure.ts
index a34af0296ea04..75499d048cf93 100644
--- a/src/plugins/interactive_setup/server/routes/configure.ts
+++ b/src/plugins/interactive_setup/server/routes/configure.ts
@@ -21,15 +21,13 @@ export function defineConfigureRoute({
   logger,
   kibanaConfigWriter,
   elasticsearch,
+  verificationCode,
   preboot,
 }: RouteDefinitionParams) {
   router.post(
     {
       path: '/internal/interactive_setup/configure',
       validate: {
-        query: schema.object({
-          code: schema.maybe(schema.string()),
-        }),
         body: schema.object({
           host: schema.uri({ scheme: ['http', 'https'] }),
           username: schema.maybe(
@@ -56,11 +54,16 @@ export function defineConfigureRoute({
             schema.string(),
             schema.never()
           ),
+          code: schema.maybe(schema.string()),
         }),
       },
       options: { authRequired: false },
     },
     async (context, request, response) => {
+      if (!verificationCode.verify(request.body.code)) {
+        return response.forbidden();
+      }
+
       if (!preboot.isSetupOnHold()) {
         logger.error(`Invalid request to [path=${request.url.pathname}] outside of preboot stage`);
         return response.badRequest({ body: 'Cannot process request outside of preboot stage.' });
diff --git a/src/plugins/interactive_setup/server/routes/enroll.test.ts b/src/plugins/interactive_setup/server/routes/enroll.test.ts
index e42248704134a..859c3fb70ce83 100644
--- a/src/plugins/interactive_setup/server/routes/enroll.test.ts
+++ b/src/plugins/interactive_setup/server/routes/enroll.test.ts
@@ -95,18 +95,55 @@ describe('Enroll routes', () => {
       );
 
       expect(
-        bodySchema.validate(
-          bodySchema.validate({
-            apiKey: 'some-key',
-            hosts: ['https://localhost:9200'],
-            caFingerprint: 'a'.repeat(64),
-          })
-        )
-      ).toEqual({
-        apiKey: 'some-key',
-        hosts: ['https://localhost:9200'],
-        caFingerprint: 'a'.repeat(64),
+        bodySchema.validate({
+          apiKey: 'some-key',
+          hosts: ['https://localhost:9200'],
+          caFingerprint: 'a'.repeat(64),
+        })
+      ).toMatchInlineSnapshot(`
+        Object {
+          "apiKey": "some-key",
+          "caFingerprint": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
+          "hosts": Array [
+            "https://localhost:9200",
+          ],
+        }
+      `);
+      expect(
+        bodySchema.validate({
+          apiKey: 'some-key',
+          hosts: ['https://localhost:9200'],
+          caFingerprint: 'a'.repeat(64),
+          code: '123456',
+        })
+      ).toMatchInlineSnapshot(`
+        Object {
+          "apiKey": "some-key",
+          "caFingerprint": "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
+          "code": "123456",
+          "hosts": Array [
+            "https://localhost:9200",
+          ],
+        }
+      `);
+    });
+
+    it('fails if verification code is invalid.', async () => {
+      mockRouteParams.verificationCode.verify.mockReturnValue(false);
+
+      const mockRequest = httpServerMock.createKibanaRequest({
+        body: { apiKey: 'some-key', hosts: ['host1', 'host2'], caFingerprint: 'deadbeef' },
       });
+
+      await expect(routeHandler(mockContext, mockRequest, kibanaResponseFactory)).resolves.toEqual(
+        expect.objectContaining({
+          status: 403,
+        })
+      );
+
+      expect(mockRouteParams.elasticsearch.enroll).not.toHaveBeenCalled();
+      expect(mockRouteParams.kibanaConfigWriter.writeConfig).not.toHaveBeenCalled();
+      expect(mockRouteParams.preboot.completeSetup).not.toHaveBeenCalled();
     });
 
     it('fails if setup is not on hold.', async () => {
diff --git a/src/plugins/interactive_setup/server/routes/enroll.ts b/src/plugins/interactive_setup/server/routes/enroll.ts
index 41291246802e6..769d763a7d45d 100644
--- a/src/plugins/interactive_setup/server/routes/enroll.ts
+++ b/src/plugins/interactive_setup/server/routes/enroll.ts
@@ -23,6 +23,7 @@ export function defineEnrollRoutes({
   logger,
   kibanaConfigWriter,
   elasticsearch,
+  verificationCode,
   preboot,
 }: RouteDefinitionParams) {
   router.post(
@@ -35,11 +36,16 @@ export function defineEnrollRoutes({
           }),
           apiKey: schema.string({ minLength: 1 }),
           caFingerprint: schema.string({ maxLength: 64, minLength: 64 }),
+          code: schema.maybe(schema.string()),
         }),
       },
       options: { authRequired: false },
     },
     async (context, request, response) => {
+      if (!verificationCode.verify(request.body.code)) {
+        return response.forbidden();
+      }
+
       if (!preboot.isSetupOnHold()) {
         logger.error(`Invalid request to [path=${request.url.pathname}] outside of preboot stage`);
         return response.badRequest({ body: 'Cannot process request outside of preboot stage.' });
diff --git a/src/plugins/interactive_setup/server/routes/index.mock.ts b/src/plugins/interactive_setup/server/routes/index.mock.ts
index 249d1277269e7..15ec86031b6f2 100644
--- a/src/plugins/interactive_setup/server/routes/index.mock.ts
+++ b/src/plugins/interactive_setup/server/routes/index.mock.ts
@@ -11,6 +11,7 @@ import { coreMock, httpServiceMock, loggingSystemMock } from 'src/core/server/mo
 import { ConfigSchema } from '../config';
 import { elasticsearchServiceMock } from '../elasticsearch_service.mock';
 import { kibanaConfigWriterMock } from '../kibana_config_writer.mock';
+import { verificationCodeMock } from '../verification_code.mock';
 
 export const routeDefinitionParamsMock = {
   create: (config: Record<string, unknown> = {}) => ({
@@ -21,6 +22,7 @@ export const routeDefinitionParamsMock = {
     preboot: { ...coreMock.createPreboot().preboot, completeSetup: jest.fn() },
     getConfig: jest.fn().mockReturnValue(ConfigSchema.validate(config)),
     elasticsearch: elasticsearchServiceMock.createSetup(),
+    verificationCode: verificationCodeMock.create(),
     kibanaConfigWriter: kibanaConfigWriterMock.create(),
   }),
 };
diff --git a/src/plugins/interactive_setup/server/routes/index.ts b/src/plugins/interactive_setup/server/routes/index.ts
index 75c383176e7e9..fb9e06c4c2a18 100644
--- a/src/plugins/interactive_setup/server/routes/index.ts
+++ b/src/plugins/interactive_setup/server/routes/index.ts
@@ -6,15 +6,17 @@
  * Side Public License, v 1.
  */
 
-import type { PublicMethodsOf } from '@kbn/utility-types';
+import type { PublicContract, PublicMethodsOf } from '@kbn/utility-types';
 import type { IBasePath, IRouter, Logger, PrebootServicePreboot } from 'src/core/server';
 
 import type { ConfigType } from '../config';
 import type { ElasticsearchServiceSetup } from '../elasticsearch_service';
 import type { KibanaConfigWriter } from '../kibana_config_writer';
+import type { VerificationCode } from '../verification_code';
 import { defineConfigureRoute } from './configure';
 import { defineEnrollRoutes } from './enroll';
 import { definePingRoute } from './ping';
+import { defineVerifyRoute } from './verify';
 
 /**
  * Describes parameters used to define HTTP routes.
@@ -28,11 +30,13 @@ export interface RouteDefinitionParams {
   };
   readonly kibanaConfigWriter: PublicMethodsOf<KibanaConfigWriter>;
   readonly elasticsearch: ElasticsearchServiceSetup;
+  readonly verificationCode: PublicContract<VerificationCode>;
   readonly getConfig: () => ConfigType;
 }
 
 export function defineRoutes(params: RouteDefinitionParams) {
-  defineEnrollRoutes(params);
   defineConfigureRoute(params);
+  defineEnrollRoutes(params);
   definePingRoute(params);
+  defineVerifyRoute(params);
 }
diff --git a/src/plugins/interactive_setup/server/routes/verify.test.ts b/src/plugins/interactive_setup/server/routes/verify.test.ts
new file mode 100644
index 0000000000000..ff8a7753320c2
--- /dev/null
+++ b/src/plugins/interactive_setup/server/routes/verify.test.ts
@@ -0,0 +1,85 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { ObjectType } from '@kbn/config-schema';
+import type { IRouter, RequestHandler, RequestHandlerContext, RouteConfig } from 'src/core/server';
+import { kibanaResponseFactory } from 'src/core/server';
+import { httpServerMock } from 'src/core/server/mocks';
+
+import { routeDefinitionParamsMock } from './index.mock';
+import { defineVerifyRoute } from './verify';
+
+describe('Configure routes', () => {
+  let router: jest.Mocked<IRouter>;
+  let mockRouteParams: ReturnType<typeof routeDefinitionParamsMock.create>;
+  let mockContext: RequestHandlerContext;
+  beforeEach(() => {
+    mockRouteParams = routeDefinitionParamsMock.create();
+    router = mockRouteParams.router;
+
+    mockContext = ({} as unknown) as RequestHandlerContext;
+
+    defineVerifyRoute(mockRouteParams);
+  });
+
+  describe('#verify', () => {
+    let routeHandler: RequestHandler<any, any, any>;
+    let routeConfig: RouteConfig<any, any, any, any>;
+
+    beforeEach(() => {
+      const [verifyRouteConfig, verifyRouteHandler] = router.post.mock.calls.find(
+        ([{ path }]) => path === '/internal/interactive_setup/verify'
+      )!;
+
+      routeConfig = verifyRouteConfig;
+      routeHandler = verifyRouteHandler;
+    });
+
+    it('correctly defines route.', () => {
+      expect(routeConfig.options).toEqual({ authRequired: false });
+
+      const bodySchema = (routeConfig.validate as any).body as ObjectType;
+      expect(() => bodySchema.validate({})).toThrowErrorMatchingInlineSnapshot(
+        `"[code]: expected value of type [string] but got [undefined]"`
+      );
+      expect(bodySchema.validate({ code: '123456' })).toMatchInlineSnapshot(`
+        Object {
+          "code": "123456",
+        }
+      `);
+    });
+
+    it('fails if verification code is invalid.', async () => {
+      mockRouteParams.verificationCode.verify.mockReturnValue(false);
+
+      const mockRequest = httpServerMock.createKibanaRequest({
+        body: { code: '123456' },
+      });
+
+      await expect(routeHandler(mockContext, mockRequest, kibanaResponseFactory)).resolves.toEqual(
+        expect.objectContaining({
+          status: 403,
+        })
+      );
+    });
+
+    it('succeeds if verification code is valid.', async () => {
+      mockRouteParams.verificationCode.verify.mockReturnValue(true);
+
+      const mockRequest = httpServerMock.createKibanaRequest({
+        body: { code: '123456' },
+      });
+
+      await expect(routeHandler(mockContext, mockRequest, kibanaResponseFactory)).resolves.toEqual(
+        expect.objectContaining({
+          status: 204,
+        })
+      );
+    });
+  });
+});
diff --git a/src/plugins/interactive_setup/server/routes/verify.ts b/src/plugins/interactive_setup/server/routes/verify.ts
new file mode 100644
index 0000000000000..ebdbb58ed9530
--- /dev/null
+++ b/src/plugins/interactive_setup/server/routes/verify.ts
@@ -0,0 +1,41 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { schema } from '@kbn/config-schema';
+
+import type { RouteDefinitionParams } from '.';
+
+export function defineVerifyRoute({ router, verificationCode }: RouteDefinitionParams) {
+  router.post(
+    {
+      path: '/internal/interactive_setup/verify',
+      validate: {
+        body: schema.object({
+          code: schema.string(),
+        }),
+      },
+      options: { authRequired: false },
+    },
+    async (context, request, response) => {
+      if (!verificationCode.verify(request.body.code)) {
+        return response.forbidden({
+          body: {
+            message: verificationCode.remainingAttempts
+              ? 'Invalid verification code.'
+              : 'Maximum number of attempts exceeded. Restart Kibana to generate a new code and retry.',
+            attributes: {
+              remainingAttempts: verificationCode.remainingAttempts,
+            },
+          },
+        });
+      }
+
+      return response.noContent();
+    }
+  );
+}
diff --git a/src/plugins/interactive_setup/server/verification_code.mock.ts b/src/plugins/interactive_setup/server/verification_code.mock.ts
new file mode 100644
index 0000000000000..d4e9fc2028590
--- /dev/null
+++ b/src/plugins/interactive_setup/server/verification_code.mock.ts
@@ -0,0 +1,19 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { PublicContract } from '@kbn/utility-types';
+
+import type { VerificationCode } from './verification_code';
+
+export const verificationCodeMock = {
+  create: (): jest.Mocked<PublicContract<VerificationCode>> => ({
+    code: '123456',
+    remainingAttempts: 5,
+    verify: jest.fn().mockReturnValue(true),
+  }),
+};
diff --git a/src/plugins/interactive_setup/server/verification_code.test.ts b/src/plugins/interactive_setup/server/verification_code.test.ts
new file mode 100644
index 0000000000000..7387f285a2f62
--- /dev/null
+++ b/src/plugins/interactive_setup/server/verification_code.test.ts
@@ -0,0 +1,71 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { loggingSystemMock } from 'src/core/server/mocks';
+
+import { VERIFICATION_CODE_LENGTH } from '../common';
+import { VerificationCode } from './verification_code';
+
+const loggerMock = loggingSystemMock.createLogger();
+
+describe('VerificationCode', () => {
+  it('should generate a 6 digit code', () => {
+    for (let i = 0; i < 10; i++) {
+      const { code } = new VerificationCode(loggerMock);
+      expect(code).toHaveLength(VERIFICATION_CODE_LENGTH);
+      expect(code).toEqual(expect.stringMatching(/^[0-9]+$/));
+    }
+  });
+
+  it('should verify code correctly', () => {
+    const verificationCode = new VerificationCode(loggerMock);
+
+    expect(verificationCode.verify(undefined)).toBe(false);
+    expect(verificationCode.verify('')).toBe(false);
+    expect(verificationCode.verify('invalid')).toBe(false);
+    expect(verificationCode.verify(verificationCode.code)).toBe(true);
+  });
+
+  it('should track number of failed attempts', () => {
+    const verificationCode = new VerificationCode(loggerMock);
+
+    verificationCode.verify('invalid');
+    verificationCode.verify('invalid');
+    verificationCode.verify('invalid');
+    expect(verificationCode['failedAttempts']).toBe(3); // eslint-disable-line dot-notation
+  });
+
+  it('should reset number of failed attempts if valid code is entered', () => {
+    const verificationCode = new VerificationCode(loggerMock);
+
+    verificationCode.verify('invalid');
+    verificationCode.verify('invalid');
+    verificationCode.verify('invalid');
+    expect(verificationCode.verify(verificationCode.code)).toBe(true);
+    expect(verificationCode['failedAttempts']).toBe(0); // eslint-disable-line dot-notation
+  });
+
+  it('should permanently fail once maximum number of failed attempts has been reached', () => {
+    const verificationCode = new VerificationCode(loggerMock);
+
+    // eslint-disable-next-line dot-notation
+    for (let i = 0; i < verificationCode['maxFailedAttempts']; i++) {
+      verificationCode.verify('invalid');
+    }
+    expect(verificationCode.verify(verificationCode.code)).toBe(false);
+  });
+
+  it('should ignore empty calls in number of failed attempts', () => {
+    const verificationCode = new VerificationCode(loggerMock);
+
+    verificationCode.verify(undefined);
+    verificationCode.verify(undefined);
+    verificationCode.verify(undefined);
+    expect(verificationCode['failedAttempts']).toBe(0); // eslint-disable-line dot-notation
+  });
+});
diff --git a/src/plugins/interactive_setup/server/verification_code.ts b/src/plugins/interactive_setup/server/verification_code.ts
new file mode 100644
index 0000000000000..849ece5f4e0b0
--- /dev/null
+++ b/src/plugins/interactive_setup/server/verification_code.ts
@@ -0,0 +1,87 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import chalk from 'chalk';
+import crypto from 'crypto';
+
+import type { Logger } from 'src/core/server';
+
+import { VERIFICATION_CODE_LENGTH } from '../common';
+
+export class VerificationCode {
+  public readonly code = VerificationCode.generate(VERIFICATION_CODE_LENGTH);
+  private failedAttempts = 0;
+  private readonly maxFailedAttempts = 5;
+
+  constructor(private readonly logger: Logger) {}
+
+  public get remainingAttempts() {
+    return this.maxFailedAttempts - this.failedAttempts;
+  }
+
+  public verify(code: string | undefined) {
+    if (this.failedAttempts >= this.maxFailedAttempts) {
+      this.logger.error(
+        'Maximum number of attempts exceeded. Restart Kibana to generate a new code and retry.'
+      );
+      return false;
+    }
+
+    const highlightedCode = chalk.black.bgCyanBright(
+      ` ${this.code.substr(0, 3)} ${this.code.substr(3)} `
+    );
+
+    if (code === undefined) {
+      // eslint-disable-next-line no-console
+      console.log(`
+
+Your verification code is: ${highlightedCode}
+
+`);
+      return false;
+    }
+
+    if (code !== this.code) {
+      this.failedAttempts++;
+      this.logger.error(
+        `Invalid verification code '${code}' provided. ${this.remainingAttempts} attempts left.`
+      );
+      // eslint-disable-next-line no-console
+      console.log(`
+
+Your verification code is: ${highlightedCode}
+
+`);
+      return false;
+    }
+
+    this.logger.debug(`Code '${code}' verified successfully`);
+
+    this.failedAttempts = 0;
+    return true;
+  }
+
+  /**
+   * Returns a cryptographically secure and random 6-digit code.
+   *
+   * Implementation notes: `secureRandomNumber` returns a random number like `0.05505769583xxxx`. To
+   * turn that into a 6 digit code we multiply it by `10^6` and result is `055057`.
+   */
+  private static generate(length: number) {
+    return Math.floor(secureRandomNumber() * Math.pow(10, length))
+      .toString()
+      .padStart(length, '0');
+  }
+}
+
+/**
+ * Cryptographically secure equivalent of `Math.random()`.
+ */
+function secureRandomNumber() {
+  return crypto.randomBytes(4).readUInt32LE() / 0x100000000;
+}
diff --git a/src/plugins/share/public/index.ts b/src/plugins/share/public/index.ts
index 1f999b59ddb61..74e849948d418 100644
--- a/src/plugins/share/public/index.ts
+++ b/src/plugins/share/public/index.ts
@@ -31,6 +31,7 @@ export {
   UrlGeneratorsService,
 } from './url_generators';
 
+export { RedirectOptions } from './url_service';
 export { useLocatorUrl } from '../common/url_service/locators/use_locator_url';
 
 import { SharePlugin } from './plugin';
diff --git a/src/plugins/share/public/url_service/redirect/redirect_manager.ts b/src/plugins/share/public/url_service/redirect/redirect_manager.ts
index cc45e0d3126af..a5d895c7cbcf0 100644
--- a/src/plugins/share/public/url_service/redirect/redirect_manager.ts
+++ b/src/plugins/share/public/url_service/redirect/redirect_manager.ts
@@ -15,7 +15,15 @@ import type { UrlService } from '../../../common/url_service';
 import { render } from './render';
 import { parseSearchParams } from './util/parse_search_params';
 
-export interface RedirectOptions {
+/**
+ * @public
+ * Serializable locator parameters that can be used by the redirect service to navigate to a location
+ * in Kibana.
+ *
+ * When passed to the public {@link SharePluginSetup['navigate']} function, locator params will also be
+ * migrated.
+ */
+export interface RedirectOptions<P extends SerializableRecord = unknown & SerializableRecord> {
   /** Locator ID. */
   id: string;
 
@@ -23,7 +31,7 @@ export interface RedirectOptions {
   version: string;
 
   /** Locator params. */
-  params: unknown & SerializableRecord;
+  params: P;
 }
 
 export interface RedirectManagerDependencies {
diff --git a/src/plugins/vis_types/metric/public/components/metric_vis_component.tsx b/src/plugins/vis_types/metric/public/components/metric_vis_component.tsx
index c3735bdc0d79a..837ec5ff60dc5 100644
--- a/src/plugins/vis_types/metric/public/components/metric_vis_component.tsx
+++ b/src/plugins/vis_types/metric/public/components/metric_vis_component.tsx
@@ -16,7 +16,7 @@ import { Datatable } from '../../../../expressions/public';
 import { getHeatmapColors } from '../../../../charts/public';
 import { VisParams, MetricVisMetric } from '../types';
 import { getFormatService } from '../services';
-import { SchemaConfig } from '../../../../visualizations/public';
+import { ExpressionValueVisDimension } from '../../../../visualizations/public';
 import { Range } from '../../../../expressions/public';
 
 import './metric_vis.scss';
@@ -98,6 +98,16 @@ class MetricVisComponent extends Component<MetricVisComponentProps> {
     return fieldFormatter.convert(value, format);
   };
 
+  private getColumn(
+    accessor: ExpressionValueVisDimension['accessor'],
+    columns: Datatable['columns'] = []
+  ) {
+    if (typeof accessor === 'number') {
+      return columns[accessor];
+    }
+    return columns.filter(({ id }) => accessor.id === id)[0];
+  }
+
   private processTableGroups(table: Datatable) {
     const config = this.props.visParams.metric;
     const dimensions = this.props.visParams.dimensions;
@@ -112,13 +122,12 @@ class MetricVisComponent extends Component<MetricVisComponentProps> {
     let bucketFormatter: IFieldFormat;
 
     if (dimensions.bucket) {
-      bucketColumnId = table.columns[dimensions.bucket.accessor].id;
+      bucketColumnId = this.getColumn(dimensions.bucket.accessor, table.columns).id;
       bucketFormatter = getFormatService().deserialize(dimensions.bucket.format);
     }
 
-    dimensions.metrics.forEach((metric: SchemaConfig) => {
-      const columnIndex = metric.accessor;
-      const column = table?.columns[columnIndex];
+    dimensions.metrics.forEach((metric: ExpressionValueVisDimension) => {
+      const column = this.getColumn(metric.accessor, table?.columns);
       const formatter = getFormatService().deserialize(metric.format);
       table.rows.forEach((row, rowIndex) => {
         let title = column.name;
diff --git a/src/plugins/vis_types/metric/public/metric_vis_fn.ts b/src/plugins/vis_types/metric/public/metric_vis_fn.ts
index 9a144defed4e7..210552732bc0a 100644
--- a/src/plugins/vis_types/metric/public/metric_vis_fn.ts
+++ b/src/plugins/vis_types/metric/public/metric_vis_fn.ts
@@ -15,9 +15,10 @@ import {
   Render,
   Style,
 } from '../../../expressions/public';
-import { visType, DimensionsVisParam, VisParams } from './types';
+import { visType, VisParams } from './types';
 import { prepareLogTable, Dimension } from '../../../visualizations/public';
 import { ColorSchemas, vislibColorMaps, ColorMode } from '../../../charts/public';
+import { ExpressionValueVisDimension } from '../../../visualizations/public';
 
 export type Input = Datatable;
 
@@ -32,8 +33,8 @@ interface Arguments {
   subText: string;
   colorRange: Range[];
   font: Style;
-  metric: any[]; // these aren't typed yet
-  bucket: any; // these aren't typed yet
+  metric: ExpressionValueVisDimension[];
+  bucket: ExpressionValueVisDimension;
 }
 
 export interface MetricVisRenderValue {
@@ -150,14 +151,6 @@ export const createMetricVisFn = (): MetricVisExpressionFunctionDefinition => ({
     },
   },
   fn(input, args, handlers) {
-    const dimensions: DimensionsVisParam = {
-      metrics: args.metric,
-    };
-
-    if (args.bucket) {
-      dimensions.bucket = args.bucket;
-    }
-
     if (args.percentageMode && (!args.colorRange || args.colorRange.length === 0)) {
       throw new Error('colorRange must be provided when using percentageMode');
     }
@@ -184,6 +177,7 @@ export const createMetricVisFn = (): MetricVisExpressionFunctionDefinition => ({
       const logTable = prepareLogTable(input, argsTable);
       handlers.inspectorAdapters.tables.logDatatable('default', logTable);
     }
+
     return {
       type: 'render',
       as: 'metric_vis',
@@ -209,7 +203,10 @@ export const createMetricVisFn = (): MetricVisExpressionFunctionDefinition => ({
               fontSize,
             },
           },
-          dimensions,
+          dimensions: {
+            metrics: args.metric,
+            ...(args.bucket ? { bucket: args.bucket } : {}),
+          },
         },
       },
     };
diff --git a/src/plugins/vis_types/metric/public/types.ts b/src/plugins/vis_types/metric/public/types.ts
index 1baaa25959f31..8e86c0217bba6 100644
--- a/src/plugins/vis_types/metric/public/types.ts
+++ b/src/plugins/vis_types/metric/public/types.ts
@@ -7,14 +7,14 @@
  */
 
 import { Range } from '../../../expressions/public';
-import { SchemaConfig } from '../../../visualizations/public';
+import { ExpressionValueVisDimension } from '../../../visualizations/public';
 import { ColorMode, Labels, Style, ColorSchemas } from '../../../charts/public';
 
 export const visType = 'metric';
 
 export interface DimensionsVisParam {
-  metrics: SchemaConfig[];
-  bucket?: SchemaConfig;
+  metrics: ExpressionValueVisDimension[];
+  bucket?: ExpressionValueVisDimension;
 }
 
 export interface MetricVisParam {
diff --git a/src/plugins/vis_types/tagcloud/public/__snapshots__/to_ast.test.ts.snap b/src/plugins/vis_types/tagcloud/public/__snapshots__/to_ast.test.ts.snap
index fed6fb54288f2..9e4c3071db8d6 100644
--- a/src/plugins/vis_types/tagcloud/public/__snapshots__/to_ast.test.ts.snap
+++ b/src/plugins/vis_types/tagcloud/public/__snapshots__/to_ast.test.ts.snap
@@ -1,6 +1,108 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`tagcloud vis toExpressionAst function should match snapshot params fulfilled 1`] = `
+exports[`tagcloud vis toExpressionAst function should match snapshot params fulfilled with DatatableColumn vis_dimension.accessor at metric 1`] = `
+Object {
+  "chain": Array [
+    Object {
+      "arguments": Object {
+        "aggs": Array [],
+        "index": Array [
+          Object {
+            "chain": Array [
+              Object {
+                "arguments": Object {
+                  "id": Array [
+                    "123",
+                  ],
+                },
+                "function": "indexPatternLoad",
+                "type": "function",
+              },
+            ],
+            "type": "expression",
+          },
+        ],
+        "metricsAtAllLevels": Array [
+          false,
+        ],
+        "partialRows": Array [
+          false,
+        ],
+      },
+      "function": "esaggs",
+      "type": "function",
+    },
+    Object {
+      "arguments": Object {
+        "bucket": Array [
+          Object {
+            "chain": Array [
+              Object {
+                "arguments": Object {
+                  "accessor": Array [
+                    0,
+                  ],
+                  "format": Array [
+                    "terms",
+                  ],
+                  "formatParams": Array [
+                    "{\\"id\\":\\"string\\",\\"otherBucketLabel\\":\\"Other\\",\\"missingBucketLabel\\":\\"Missing\\"}",
+                  ],
+                },
+                "function": "visdimension",
+                "type": "function",
+              },
+            ],
+            "type": "expression",
+          },
+        ],
+        "maxFontSize": Array [
+          15,
+        ],
+        "metric": Array [
+          Object {
+            "chain": Array [
+              Object {
+                "arguments": Object {
+                  "accessor": Array [
+                    1,
+                  ],
+                  "format": Array [
+                    "number",
+                  ],
+                },
+                "function": "visdimension",
+                "type": "function",
+              },
+            ],
+            "type": "expression",
+          },
+        ],
+        "minFontSize": Array [
+          5,
+        ],
+        "orientation": Array [
+          "single",
+        ],
+        "palette": Array [
+          "default",
+        ],
+        "scale": Array [
+          "linear",
+        ],
+        "showLabel": Array [
+          true,
+        ],
+      },
+      "function": "tagcloud",
+      "type": "function",
+    },
+  ],
+  "type": "expression",
+}
+`;
+
+exports[`tagcloud vis toExpressionAst function should match snapshot params fulfilled with number vis_dimension.accessor at metric 1`] = `
 Object {
   "chain": Array [
     Object {
diff --git a/src/plugins/vis_types/tagcloud/public/to_ast.test.ts b/src/plugins/vis_types/tagcloud/public/to_ast.test.ts
index c70448ab113cb..6de1d4fb3e75d 100644
--- a/src/plugins/vis_types/tagcloud/public/to_ast.test.ts
+++ b/src/plugins/vis_types/tagcloud/public/to_ast.test.ts
@@ -6,11 +6,11 @@
  * Side Public License, v 1.
  */
 
-import { Vis } from 'src/plugins/visualizations/public';
+import { Vis, VisToExpressionAstParams } from '../../../visualizations/public';
 import { toExpressionAst } from './to_ast';
 import { TagCloudVisParams } from './types';
 
-const mockSchemas = {
+const mockedSchemas = {
   metric: [{ accessor: 1, format: { id: 'number' }, params: {}, label: 'Count', aggType: 'count' }],
   segment: [
     {
@@ -31,14 +31,14 @@ const mockSchemas = {
 };
 
 jest.mock('../../../visualizations/public', () => ({
-  getVisSchemas: () => mockSchemas,
+  getVisSchemas: () => mockedSchemas,
 }));
 
 describe('tagcloud vis toExpressionAst function', () => {
   let vis: Vis<TagCloudVisParams>;
 
   beforeEach(() => {
-    vis = {
+    vis = ({
       isHierarchical: () => false,
       type: {},
       params: {
@@ -51,15 +51,15 @@ describe('tagcloud vis toExpressionAst function', () => {
           aggs: [],
         },
       },
-    } as any;
+    } as unknown) as Vis<TagCloudVisParams>;
   });
 
   it('should match snapshot without params', () => {
-    const actual = toExpressionAst(vis, {} as any);
+    const actual = toExpressionAst(vis, {} as VisToExpressionAstParams);
     expect(actual).toMatchSnapshot();
   });
 
-  it('should match snapshot params fulfilled', () => {
+  it('should match snapshot params fulfilled with number vis_dimension.accessor at metric', () => {
     vis.params = {
       scale: 'linear',
       orientation: 'single',
@@ -70,9 +70,48 @@ describe('tagcloud vis toExpressionAst function', () => {
         type: 'palette',
         name: 'default',
       },
-      metric: { accessor: 0, format: { id: 'number' } },
+      metric: {
+        type: 'vis_dimension',
+        accessor: 0,
+        format: {
+          id: 'number',
+          params: {
+            id: 'number',
+          },
+        },
+      },
+    };
+    const actual = toExpressionAst(vis, {} as VisToExpressionAstParams);
+    expect(actual).toMatchSnapshot();
+  });
+
+  it('should match snapshot params fulfilled with DatatableColumn vis_dimension.accessor at metric', () => {
+    vis.params = {
+      scale: 'linear',
+      orientation: 'single',
+      minFontSize: 5,
+      maxFontSize: 15,
+      showLabel: true,
+      palette: {
+        type: 'palette',
+        name: 'default',
+      },
+      metric: {
+        type: 'vis_dimension',
+        accessor: {
+          id: 'count',
+          name: 'count',
+          meta: { type: 'number' },
+        },
+        format: {
+          id: 'number',
+          params: {
+            id: 'number',
+          },
+        },
+      },
     };
-    const actual = toExpressionAst(vis, {} as any);
+    const actual = toExpressionAst(vis, {} as VisToExpressionAstParams);
     expect(actual).toMatchSnapshot();
   });
 });
diff --git a/src/plugins/vis_types/tagcloud/public/types.ts b/src/plugins/vis_types/tagcloud/public/types.ts
index 28a7c6506eb31..996555ae99f83 100644
--- a/src/plugins/vis_types/tagcloud/public/types.ts
+++ b/src/plugins/vis_types/tagcloud/public/types.ts
@@ -6,15 +6,7 @@
  * Side Public License, v 1.
  */
 import type { ChartsPluginSetup, PaletteOutput } from '../../../charts/public';
-import type { SerializedFieldFormat } from '../../../expressions/public';
-
-interface Dimension {
-  accessor: number;
-  format: {
-    id?: string;
-    params?: SerializedFieldFormat<object>;
-  };
-}
+import { ExpressionValueVisDimension } from '../../../visualizations/public';
 
 interface TagCloudCommonParams {
   scale: 'linear' | 'log' | 'square root';
@@ -26,8 +18,8 @@ interface TagCloudCommonParams {
 
 export interface TagCloudVisParams extends TagCloudCommonParams {
   palette: PaletteOutput;
-  metric: Dimension;
-  bucket?: Dimension;
+  metric: ExpressionValueVisDimension;
+  bucket?: ExpressionValueVisDimension;
 }
 
 export interface TagCloudTypeProps {
diff --git a/src/plugins/visualizations/common/expression_functions/vis_dimension.test.ts b/src/plugins/visualizations/common/expression_functions/vis_dimension.test.ts
new file mode 100644
index 0000000000000..249c796afeac3
--- /dev/null
+++ b/src/plugins/visualizations/common/expression_functions/vis_dimension.test.ts
@@ -0,0 +1,70 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { Arguments, visDimension } from './vis_dimension';
+import { functionWrapper } from '../../../expressions/common/expression_functions/specs/tests/utils';
+import { Datatable } from '../../../expressions/common';
+import moment from 'moment';
+
+describe('interpreter/functions#vis_dimension', () => {
+  const fn = functionWrapper(visDimension());
+  const column1 = 'username';
+  const column2 = '@timestamp';
+
+  const input: Datatable = {
+    type: 'datatable',
+    columns: [
+      { id: column1, name: column1, meta: { type: 'string' } },
+      { id: column2, name: column2, meta: { type: 'date' } },
+    ],
+    rows: [
+      { [column1]: 'user1', [column2]: moment().toISOString() },
+      { [column1]: 'user2', [column2]: moment().toISOString() },
+    ],
+  };
+
+  it('should return vis_dimension accessor in number format when type of the passed accessor is number', () => {
+    const accessor = 0;
+    const args: Arguments = { accessor };
+
+    const result = fn(input, args);
+    expect(result).toHaveProperty('type', 'vis_dimension');
+    expect(result).toHaveProperty('accessor', accessor);
+    expect(result).toHaveProperty('format');
+    expect(result.format).toBeDefined();
+    expect(typeof result.format === 'object').toBeTruthy();
+  });
+
+  it('should return vis_dimension accessor in DatatableColumn format when type of the passed accessor is string', () => {
+    const accessor = column2;
+    const args: Arguments = { accessor };
+    const searchingObject = input.columns.filter(({ id }) => id === accessor)[0];
+
+    const result = fn(input, args);
+    expect(result).toHaveProperty('type', 'vis_dimension');
+    expect(result).toHaveProperty('accessor');
+    expect(result.accessor).toMatchObject(searchingObject);
+    expect(result).toHaveProperty('format');
+    expect(result.format).toBeDefined();
+    expect(typeof result.format === 'object').toBeTruthy();
+  });
+
+  it('should throw error when the passed number accessor is out of columns array boundary', () => {
+    const accessor = input.columns.length;
+    const args: Arguments = { accessor };
+
+    expect(() => fn(input, args)).toThrowError('Column name or index provided is invalid');
+  });
+
+  it("should throw error when the passed column doesn't exist in columns", () => {
+    const accessor = column1 + '_modified';
+    const args: Arguments = { accessor };
+
+    expect(() => fn(input, args)).toThrowError('Column name or index provided is invalid');
+  });
+});
diff --git a/src/plugins/visualizations/common/expression_functions/vis_dimension.ts b/src/plugins/visualizations/common/expression_functions/vis_dimension.ts
index 6886fa94f878e..60d3fc78ac553 100644
--- a/src/plugins/visualizations/common/expression_functions/vis_dimension.ts
+++ b/src/plugins/visualizations/common/expression_functions/vis_dimension.ts
@@ -14,7 +14,7 @@ import {
   DatatableColumn,
 } from '../../../expressions/common';
 
-interface Arguments {
+export interface Arguments {
   accessor: string | number;
   format?: string;
   formatParams?: string;
@@ -31,6 +31,12 @@ export type ExpressionValueVisDimension = ExpressionValueBoxed<
   }
 >;
 
+const getAccessorByIndex = (accessor: number, columns: Datatable['columns']) =>
+  columns.length > accessor ? accessor : undefined;
+
+const getAccessorById = (accessor: DatatableColumn['id'], columns: Datatable['columns']) =>
+  columns.find((c) => c.id === accessor);
+
 export const visDimension = (): ExpressionFunctionDefinition<
   'visdimension',
   Datatable,
@@ -69,13 +75,13 @@ export const visDimension = (): ExpressionFunctionDefinition<
   fn: (input, args) => {
     const accessor =
       typeof args.accessor === 'number'
-        ? args.accessor
-        : input.columns.find((c) => c.id === args.accessor);
+        ? getAccessorByIndex(args.accessor, input.columns)
+        : getAccessorById(args.accessor, input.columns);
 
     if (accessor === undefined) {
       throw new Error(
         i18n.translate('visualizations.function.visDimension.error.accessor', {
-          defaultMessage: 'Column name provided is invalid',
+          defaultMessage: 'Column name or index provided is invalid',
         })
       );
     }
diff --git a/src/plugins/visualizations/common/prepare_log_table.test.ts b/src/plugins/visualizations/common/prepare_log_table.test.ts
index dc02adbd458ee..7176ba46c40ec 100644
--- a/src/plugins/visualizations/common/prepare_log_table.test.ts
+++ b/src/plugins/visualizations/common/prepare_log_table.test.ts
@@ -19,13 +19,14 @@ describe('prepareLogTable', () => {
           meta: {},
         },
         {
+          id: 'd3',
           meta: {},
         },
       ],
     };
     const logTable = prepareLogTable(datatable as any, [
       [[{ accessor: 0 } as any], 'dimension1'],
-      [[{ accessor: 2 } as any], 'dimension3'],
+      [[{ accessor: { id: 'd3' } } as any], 'dimension3'],
       [[{ accessor: 1 } as any], 'dimension2'],
     ]);
     expect(logTable).toMatchInlineSnapshot(
@@ -42,6 +43,7 @@ describe('prepareLogTable', () => {
             },
           },
           {
+            id: 'd3',
             meta: {
               dimensionName: 'dimension3',
             },
@@ -62,6 +64,7 @@ describe('prepareLogTable', () => {
             },
           },
           Object {
+            "id": "d3",
             "meta": Object {
               "dimensionName": "dimension3",
             },
diff --git a/src/plugins/visualizations/common/prepare_log_table.ts b/src/plugins/visualizations/common/prepare_log_table.ts
index 0018a18ce7f10..b3f74c8611af5 100644
--- a/src/plugins/visualizations/common/prepare_log_table.ts
+++ b/src/plugins/visualizations/common/prepare_log_table.ts
@@ -8,16 +8,31 @@
 
 import { ExpressionValueVisDimension } from './expression_functions/vis_dimension';
 import { ExpressionValueXYDimension } from './expression_functions/xy_dimension';
-import { Datatable } from '../../expressions/common/expression_types/specs';
+import { Datatable, DatatableColumn } from '../../expressions/common/expression_types/specs';
 
 export type Dimension = [
   Array<ExpressionValueVisDimension | ExpressionValueXYDimension> | undefined,
   string
 ];
 
-const getDimensionName = (columnIndex: number, dimensions: Dimension[]) => {
+const isColumnEqualToAccessor = (
+  column: DatatableColumn,
+  columnIndex: number,
+  accessor: ExpressionValueVisDimension['accessor'] | ExpressionValueXYDimension['accessor']
+) => {
+  if (typeof accessor === 'number') {
+    return accessor === columnIndex;
+  }
+  return accessor.id === column.id;
+};
+
+const getDimensionName = (
+  column: DatatableColumn,
+  columnIndex: number,
+  dimensions: Dimension[]
+) => {
   for (const dimension of dimensions) {
-    if (dimension[0]?.find((d) => d.accessor === columnIndex)) {
+    if (dimension[0]?.find((d) => isColumnEqualToAccessor(column, columnIndex, d.accessor))) {
       return dimension[1];
     }
   }
@@ -31,7 +46,7 @@ export const prepareLogTable = (datatable: Datatable, dimensions: Dimension[]) =
         ...column,
         meta: {
           ...column.meta,
-          dimensionName: getDimensionName(columnIndex, dimensions),
+          dimensionName: getDimensionName(column, columnIndex, dimensions),
         },
       };
     }),
diff --git a/test/functional/apps/context/_size.ts b/test/functional/apps/context/_size.ts
index b11af7cd5c72f..52b16d2b9abe5 100644
--- a/test/functional/apps/context/_size.ts
+++ b/test/functional/apps/context/_size.ts
@@ -15,6 +15,7 @@ const TEST_STEP_SIZE = 2;
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const kibanaServer = getService('kibanaServer');
+  const security = getService('security');
   const retry = getService('retry');
   const docTable = getService('docTable');
   const browser = getService('browser');
@@ -23,6 +24,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
   describe('context size', function contextSize() {
     before(async function () {
+      await security.testUser.setRoles(['kibana_admin', 'test_logstash_reader']);
       await kibanaServer.uiSettings.update({
         'context:defaultSize': `${TEST_DEFAULT_CONTEXT_SIZE}`,
         'context:step': `${TEST_STEP_SIZE}`,
diff --git a/test/interpreter_functional/screenshots/baseline/metric_all_data.png b/test/interpreter_functional/screenshots/baseline/metric_all_data.png
index 54ee1f4da6684..66357a371a5be 100644
Binary files a/test/interpreter_functional/screenshots/baseline/metric_all_data.png and b/test/interpreter_functional/screenshots/baseline/metric_all_data.png differ
diff --git a/test/interpreter_functional/screenshots/baseline/metric_empty_data.png b/test/interpreter_functional/screenshots/baseline/metric_empty_data.png
new file mode 100644
index 0000000000000..06cd781415ab0
Binary files /dev/null and b/test/interpreter_functional/screenshots/baseline/metric_empty_data.png differ
diff --git a/test/interpreter_functional/screenshots/baseline/metric_invalid_data.png b/test/interpreter_functional/screenshots/baseline/metric_invalid_data.png
index b1448cd7cb2ef..b8ffa6e8576fe 100644
Binary files a/test/interpreter_functional/screenshots/baseline/metric_invalid_data.png and b/test/interpreter_functional/screenshots/baseline/metric_invalid_data.png differ
diff --git a/test/interpreter_functional/screenshots/baseline/tagcloud_empty_data.png b/test/interpreter_functional/screenshots/baseline/tagcloud_empty_data.png
new file mode 100644
index 0000000000000..fa4fc01398218
Binary files /dev/null and b/test/interpreter_functional/screenshots/baseline/tagcloud_empty_data.png differ
diff --git a/test/interpreter_functional/snapshots/session/metric_single_metric_data.json b/test/interpreter_functional/snapshots/baseline/metric_empty_data.json
similarity index 89%
rename from test/interpreter_functional/snapshots/session/metric_single_metric_data.json
rename to test/interpreter_functional/snapshots/baseline/metric_empty_data.json
index f4a8cd1f14e18..c318121535c8f 100644
--- a/test/interpreter_functional/snapshots/session/metric_single_metric_data.json
+++ b/test/interpreter_functional/snapshots/baseline/metric_empty_data.json
@@ -1 +1 @@
-{"as":"metric_vis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"rows":[{"col-0-2":"200","col-1-1":12891,"col-2-1":19986},{"col-0-2":"404","col-1-1":696,"col-2-1":19881},{"col-0-2":"503","col-1-1":417,"col-2-1":0}],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file
+{"as":"metric_vis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"},{"id":"col-2-1","meta":{"field":"bytes","index":"logstash-*","params":{"id":"bytes","params":null},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"id":"1","indexPatternId":"logstash-*","params":{"field":"bytes"},"schema":"metric","type":"max"},"type":"number"},"name":"Max bytes"}],"rows":[],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file
diff --git a/test/interpreter_functional/snapshots/baseline/metric_invalid_data.json b/test/interpreter_functional/snapshots/baseline/metric_invalid_data.json
index c7b4a0325dc91..f23b9b0915774 100644
--- a/test/interpreter_functional/snapshots/baseline/metric_invalid_data.json
+++ b/test/interpreter_functional/snapshots/baseline/metric_invalid_data.json
@@ -1 +1 @@
-{"as":"metric_vis","type":"render","value":{"visConfig":{"dimensions":{"metrics":[{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"}]},"metric":{"colorSchema":"Green to Red","colorsRange":[{"from":0,"to":10000,"type":"range"}],"invertColors":false,"labels":{"show":true},"metricColorMode":"None","percentageMode":false,"style":{"bgColor":false,"bgFill":"#000","fontSize":60,"labelColor":false,"subText":""},"useRanges":false}},"visData":{"columns":[],"meta":{},"rows":[],"type":"datatable"},"visType":"metric"}}
\ No newline at end of file
+"[metricVis] > [visdimension] > Column name or index provided is invalid"
\ No newline at end of file
diff --git a/test/interpreter_functional/snapshots/session/partial_test_1.json b/test/interpreter_functional/snapshots/baseline/tagcloud_empty_data.json
similarity index 65%
rename from test/interpreter_functional/snapshots/session/partial_test_1.json
rename to test/interpreter_functional/snapshots/baseline/tagcloud_empty_data.json
index 082c7b934c17c..6dd90a4a6ca03 100644
--- a/test/interpreter_functional/snapshots/session/partial_test_1.json
+++ b/test/interpreter_functional/snapshots/baseline/tagcloud_empty_data.json
@@ -1 +1 @@
-{"as":"tagcloud","type":"render","value":{"syncColors":false,"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[{"col-0-2":"200","col-1-1":12891},{"col-0-2":"404","col-1-1":696},{"col-0-2":"503","col-1-1":417}],"type":"datatable"},"visParams":{"bucket":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"maxFontSize":72,"metric":{"accessor":1,"format":{"id":"number","params":{}},"type":"vis_dimension"},"minFontSize":18,"orientation":"single","palette":{"name":"default","type":"palette"},"scale":"linear","showLabel":true},"visType":"tagcloud"}}
\ No newline at end of file
+{"as":"tagcloud","type":"render","value":{"syncColors":false,"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[],"type":"datatable"},"visParams":{"maxFontSize":72,"metric":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"minFontSize":18,"orientation":"single","palette":{"name":"default","type":"palette"},"scale":"linear","showLabel":true},"visType":"tagcloud"}}
\ No newline at end of file
diff --git a/test/interpreter_functional/snapshots/baseline/tagcloud_invalid_data.json b/test/interpreter_functional/snapshots/baseline/tagcloud_invalid_data.json
index 3e594380588dc..b5ae1a2cb59fc 100644
--- a/test/interpreter_functional/snapshots/baseline/tagcloud_invalid_data.json
+++ b/test/interpreter_functional/snapshots/baseline/tagcloud_invalid_data.json
@@ -1 +1 @@
-{"as":"tagcloud","type":"render","value":{"syncColors":false,"visData":{"columns":[],"meta":{},"rows":[],"type":"datatable"},"visParams":{"maxFontSize":72,"metric":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"minFontSize":18,"orientation":"single","palette":{"name":"default","type":"palette"},"scale":"linear","showLabel":true},"visType":"tagcloud"}}
\ No newline at end of file
+"[tagcloud] > [visdimension] > Column name or index provided is invalid"
\ No newline at end of file
diff --git a/test/interpreter_functional/snapshots/session/tagcloud_empty_data.json b/test/interpreter_functional/snapshots/session/tagcloud_empty_data.json
new file mode 100644
index 0000000000000..6dd90a4a6ca03
--- /dev/null
+++ b/test/interpreter_functional/snapshots/session/tagcloud_empty_data.json
@@ -0,0 +1 @@
+{"as":"tagcloud","type":"render","value":{"syncColors":false,"visData":{"columns":[{"id":"col-0-2","meta":{"field":"response.raw","index":"logstash-*","params":{"id":"terms","params":{"id":"string","missingBucketLabel":"Missing","otherBucketLabel":"Other"}},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"id":"2","indexPatternId":"logstash-*","params":{"field":"response.raw","missingBucket":false,"missingBucketLabel":"Missing","order":"desc","orderBy":"1","otherBucket":false,"otherBucketLabel":"Other","size":4},"schema":"segment","type":"terms"},"type":"string"},"name":"response.raw: Descending"},{"id":"col-1-1","meta":{"field":null,"index":"logstash-*","params":{"id":"number"},"source":"esaggs","sourceParams":{"appliedTimeRange":null,"enabled":true,"id":"1","indexPatternId":"logstash-*","params":{},"schema":"metric","type":"count"},"type":"number"},"name":"Count"}],"rows":[],"type":"datatable"},"visParams":{"maxFontSize":72,"metric":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"minFontSize":18,"orientation":"single","palette":{"name":"default","type":"palette"},"scale":"linear","showLabel":true},"visType":"tagcloud"}}
\ No newline at end of file
diff --git a/test/interpreter_functional/snapshots/session/tagcloud_invalid_data.json b/test/interpreter_functional/snapshots/session/tagcloud_invalid_data.json
index 3e594380588dc..b5ae1a2cb59fc 100644
--- a/test/interpreter_functional/snapshots/session/tagcloud_invalid_data.json
+++ b/test/interpreter_functional/snapshots/session/tagcloud_invalid_data.json
@@ -1 +1 @@
-{"as":"tagcloud","type":"render","value":{"syncColors":false,"visData":{"columns":[],"meta":{},"rows":[],"type":"datatable"},"visParams":{"maxFontSize":72,"metric":{"accessor":0,"format":{"id":"string","params":{}},"type":"vis_dimension"},"minFontSize":18,"orientation":"single","palette":{"name":"default","type":"palette"},"scale":"linear","showLabel":true},"visType":"tagcloud"}}
\ No newline at end of file
+"[tagcloud] > [visdimension] > Column name or index provided is invalid"
\ No newline at end of file
diff --git a/test/interpreter_functional/test_suites/run_pipeline/metric.ts b/test/interpreter_functional/test_suites/run_pipeline/metric.ts
index bbaf0486f4fbb..5483e09d6671b 100644
--- a/test/interpreter_functional/test_suites/run_pipeline/metric.ts
+++ b/test/interpreter_functional/test_suites/run_pipeline/metric.ts
@@ -30,10 +30,13 @@ export default function ({
         dataContext = await expectExpression('partial_metric_test', expression).getResponse();
       });
 
-      it('with invalid data', async () => {
+      it('with empty data', async () => {
         const expression = 'metricVis metric={visdimension 0}';
         await (
-          await expectExpression('metric_invalid_data', expression).toMatchSnapshot()
+          await expectExpression('metric_empty_data', expression, {
+            ...dataContext,
+            rows: [],
+          }).toMatchSnapshot()
         ).toMatchScreenshot();
       });
 
@@ -78,5 +81,14 @@ export default function ({
         ).toMatchScreenshot();
       });
     });
+
+    describe('throws error at metric', () => {
+      it('with invalid data', async () => {
+        const expression = 'metricVis metric={visdimension 0}';
+        await (
+          await expectExpression('metric_invalid_data', expression).toMatchSnapshot()
+        ).toMatchScreenshot();
+      });
+    });
   });
 }
diff --git a/test/interpreter_functional/test_suites/run_pipeline/tag_cloud.ts b/test/interpreter_functional/test_suites/run_pipeline/tag_cloud.ts
index 05bbd33fedad7..3358e45dc02d4 100644
--- a/test/interpreter_functional/test_suites/run_pipeline/tag_cloud.ts
+++ b/test/interpreter_functional/test_suites/run_pipeline/tag_cloud.ts
@@ -15,24 +15,25 @@ export default function ({
 }: FtrProviderContext & { updateBaselines: boolean }) {
   let expectExpression: ExpectExpression;
   describe('tag cloud pipeline expression tests', () => {
-    before(() => {
+    let dataContext: ExpressionResult;
+    before(async () => {
       expectExpression = expectExpressionProvider({ getService, updateBaselines });
+
+      const expression = `kibana | kibana_context | esaggs index={indexPatternLoad id='logstash-*'}
+        aggs={aggCount id="1" enabled=true schema="metric"}
+        aggs={aggTerms id="2" enabled=true schema="segment" field="response.raw" size=4 order="desc" orderBy="1"}`;
+      // we execute the part of expression that fetches the data and store its response
+      dataContext = await expectExpression('partial_tagcloud_test', expression).getResponse();
     });
 
     describe('correctly renders tagcloud', () => {
-      let dataContext: ExpressionResult;
-      before(async () => {
-        const expression = `kibana | kibana_context | esaggs index={indexPatternLoad id='logstash-*'}
-          aggs={aggCount id="1" enabled=true schema="metric"}
-          aggs={aggTerms id="2" enabled=true schema="segment" field="response.raw" size=4 order="desc" orderBy="1"}`;
-        // we execute the part of expression that fetches the data and store its response
-        dataContext = await expectExpression('partial_tagcloud_test', expression).getResponse();
-      });
-
-      it('with invalid data', async () => {
+      it('with empty data', async () => {
         const expression = 'tagcloud metric={visdimension 0}';
         await (
-          await expectExpression('tagcloud_invalid_data', expression).toMatchSnapshot()
+          await expectExpression('tagcloud_empty_data', expression, {
+            ...dataContext,
+            rows: [],
+          }).toMatchSnapshot()
         ).toMatchScreenshot();
       });
 
@@ -66,5 +67,14 @@ export default function ({
         ).toMatchScreenshot();
       });
     });
+
+    describe('throws error at tagcloud', () => {
+      it('with invalid data', async () => {
+        const expression = 'tagcloud metric={visdimension 0}';
+        await (
+          await expectExpression('tagcloud_invalid_data', expression).toMatchSnapshot()
+        ).toMatchScreenshot();
+      });
+    });
   });
 }
diff --git a/x-pack/plugins/apm/public/components/alerting/alerting_flyout/index.tsx b/x-pack/plugins/apm/public/components/alerting/alerting_flyout/index.tsx
index 7cf3100046d57..fa56c44d8d374 100644
--- a/x-pack/plugins/apm/public/components/alerting/alerting_flyout/index.tsx
+++ b/x-pack/plugins/apm/public/components/alerting/alerting_flyout/index.tsx
@@ -60,7 +60,7 @@ export function AlertingFlyout(props: Props) {
         metadata: {
           environment,
           serviceName,
-          transactionType,
+          ...(alertType === AlertType.ErrorCount ? {} : { transactionType }),
           start,
           end,
         } as AlertMetadata,
diff --git a/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx
index 8732084e6331e..a3820622f8c9d 100644
--- a/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_inventory/service_list/index.tsx
@@ -99,14 +99,14 @@ export function getServiceColumns({
       }),
       width: '40%',
       sortable: true,
-      render: (_, { serviceName, agentName }) => (
+      render: (_, { serviceName, agentName, transactionType }) => (
         <TruncateWithTooltip
           data-test-subj="apmServiceListAppLink"
           text={formatString(serviceName)}
           content={
             <ServiceLink
               agentName={agentName}
-              query={query}
+              query={{ ...query, transactionType }}
               serviceName={serviceName}
             />
           }
diff --git a/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx b/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx
index c0578514ff9ad..29bc639ee9832 100644
--- a/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_node_metrics/index.tsx
@@ -10,6 +10,7 @@ import {
   EuiFlexGrid,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiLink,
   EuiPanel,
   EuiSpacer,
   EuiStat,
@@ -24,6 +25,7 @@ import {
   SERVICE_NODE_NAME_MISSING,
 } from '../../../../common/service_nodes';
 import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
+import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 import { useBreadcrumb } from '../../../context/breadcrumbs/use_breadcrumb';
 import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context';
 import { useApmParams } from '../../../hooks/use_apm_params';
@@ -33,7 +35,6 @@ import { useServiceMetricChartsFetcher } from '../../../hooks/use_service_metric
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { truncate, unit } from '../../../utils/style';
 import { MetricsChart } from '../../shared/charts/metrics_chart';
-import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
 
 const INITIAL_DATA = {
   host: '',
@@ -99,6 +100,7 @@ export function ServiceNodeMetrics() {
     [kuery, serviceName, serviceNodeName, start, end]
   );
 
+  const { docLinks } = useApmPluginContext().core;
   const isLoading = status === FETCH_STATUS.LOADING;
   const isAggregatedData = serviceNodeName === SERVICE_NODE_NAME_MISSING;
 
@@ -120,16 +122,12 @@ export function ServiceNodeMetrics() {
             defaultMessage="We could not identify which JVMs these metrics belong to. This is likely caused by running a version of APM Server that is older than 7.5. Upgrading to APM Server 7.5 or higher should resolve this issue. For more information on upgrading, see the {link}. As an alternative, you can use the Kibana Query bar to filter by hostname, container ID or other fields."
             values={{
               link: (
-                <ElasticDocsLink
-                  target="_blank"
-                  section="/apm/server"
-                  path="/upgrading.html"
-                >
+                <EuiLink href={docLinks.links.apm.upgrading}>
                   {i18n.translate(
                     'xpack.apm.serviceNodeMetrics.unidentifiedServiceNodesWarningDocumentationLink',
                     { defaultMessage: 'documentation of APM Server' }
                   )}
-                </ElasticDocsLink>
+                </EuiLink>
               ),
             }}
           />
diff --git a/x-pack/plugins/apm/public/components/app/service_overview/index.tsx b/x-pack/plugins/apm/public/components/app/service_overview/index.tsx
index 9af296e8a20b4..45372188994c7 100644
--- a/x-pack/plugins/apm/public/components/app/service_overview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/service_overview/index.tsx
@@ -8,6 +8,7 @@
 import { EuiFlexGroup, EuiFlexItem, EuiLink, EuiPanel } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
+import { useHistory } from 'react-router-dom';
 import { isRumAgentName, isIosAgentName } from '../../../../common/agent_name';
 import { AnnotationsContextProvider } from '../../../context/annotations/annotations_context';
 import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
@@ -26,6 +27,7 @@ import { useFallbackToTransactionsFetcher } from '../../../hooks/use_fallback_to
 import { AggregatedTransactionsBadge } from '../../shared/aggregated_transactions_badge';
 import { useApmRouter } from '../../../hooks/use_apm_router';
 import { useTimeRange } from '../../../hooks/use_time_range';
+import { replace } from '../../shared/Links/url_helpers';
 
 /**
  * The height a chart should be if it's next to a table with 5 rows and a title.
@@ -34,17 +36,29 @@ import { useTimeRange } from '../../../hooks/use_time_range';
 export const chartHeight = 288;
 
 export function ServiceOverview() {
-  const { agentName, serviceName } = useApmServiceContext();
+  const { agentName, serviceName, transactionType } = useApmServiceContext();
   const {
     query,
-    query: { environment, kuery, rangeFrom, rangeTo },
+    query: {
+      environment,
+      kuery,
+      rangeFrom,
+      rangeTo,
+      transactionType: transactionTypeFromUrl,
+    },
   } = useApmParams('/services/:serviceName/overview');
   const { fallbackToTransactions } = useFallbackToTransactionsFetcher({
     kuery,
   });
-
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
 
+  const history = useHistory();
+
+  // redirect to first transaction type
+  if (!transactionTypeFromUrl && transactionType) {
+    replace(history, { query: { transactionType } });
+  }
+
   // The default EuiFlexGroup breaks at 768, but we want to break at 992, so we
   // observe the window width and set the flex directions of rows accordingly
   const { isMedium } = useBreakPoints();
diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx
index 06acaeeb5dd3b..ab59b60333e38 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/transaction_details/index.tsx
@@ -7,6 +7,8 @@
 
 import { EuiSpacer, EuiTitle } from '@elastic/eui';
 import React from 'react';
+import { useHistory } from 'react-router-dom';
+import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
 import { useBreadcrumb } from '../../../context/breadcrumbs/use_breadcrumb';
 import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context';
 import { useApmParams } from '../../../hooks/use_apm_params';
@@ -15,18 +17,29 @@ import { useTimeRange } from '../../../hooks/use_time_range';
 import { useFallbackToTransactionsFetcher } from '../../../hooks/use_fallback_to_transactions_fetcher';
 import { AggregatedTransactionsBadge } from '../../shared/aggregated_transactions_badge';
 import { TransactionCharts } from '../../shared/charts/transaction_charts';
-
+import { replace } from '../../shared/Links/url_helpers';
 import { TransactionDetailsTabs } from './transaction_details_tabs';
 
 export function TransactionDetails() {
   const { path, query } = useApmParams(
     '/services/:serviceName/transactions/view'
   );
-  const { transactionName, rangeFrom, rangeTo } = query;
-
+  const {
+    transactionName,
+    rangeFrom,
+    rangeTo,
+    transactionType: transactionTypeFromUrl,
+  } = query;
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
-
   const apmRouter = useApmRouter();
+  const { transactionType } = useApmServiceContext();
+
+  const history = useHistory();
+
+  // redirect to first transaction type
+  if (!transactionTypeFromUrl && transactionType) {
+    replace(history, { query: { transactionType } });
+  }
 
   useBreadcrumb({
     title: transactionName,
diff --git a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/transaction_flyout/DroppedSpansWarning.tsx b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/transaction_flyout/DroppedSpansWarning.tsx
index 6fb1cdc45805e..2c6dbe99b6061 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/transaction_flyout/DroppedSpansWarning.tsx
+++ b/x-pack/plugins/apm/public/components/app/transaction_details/waterfall_with_summary/waterfall_container/Waterfall/transaction_flyout/DroppedSpansWarning.tsx
@@ -5,17 +5,18 @@
  * 2.0.
  */
 
-import { EuiCallOut, EuiHorizontalRule } from '@elastic/eui';
+import { EuiCallOut, EuiHorizontalRule, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { Transaction } from '../../../../../../../../typings/es_schemas/ui/transaction';
-import { ElasticDocsLink } from '../../../../../../shared/Links/ElasticDocsLink';
+import { useApmPluginContext } from '../../../../../../../context/apm_plugin/use_apm_plugin_context';
 
 export function DroppedSpansWarning({
   transactionDoc,
 }: {
   transactionDoc: Transaction;
 }) {
+  const { docLinks } = useApmPluginContext().core;
   const dropped = transactionDoc.transaction.span_count?.dropped;
   if (!dropped) {
     return null;
@@ -32,18 +33,14 @@ export function DroppedSpansWarning({
             values: { dropped },
           }
         )}{' '}
-        <ElasticDocsLink
-          section="/apm/get-started"
-          path="/transaction-spans.html#dropped-spans"
-          target="_blank"
-        >
+        <EuiLink href={docLinks.links.apm.droppedTransactionSpans}>
           {i18n.translate(
             'xpack.apm.transactionDetails.transFlyout.callout.learnMoreAboutDroppedSpansLinkText',
             {
               defaultMessage: 'Learn more about dropped spans.',
             }
           )}
-        </ElasticDocsLink>
+        </EuiLink>
       </EuiCallOut>
       <EuiHorizontalRule />
     </React.Fragment>
diff --git a/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx b/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx
index be12522920740..571ba99d9bf08 100644
--- a/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx
@@ -5,48 +5,27 @@
  * 2.0.
  */
 
-import { EuiPanel, EuiSpacer, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
-import { Location } from 'history';
+import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiSpacer } from '@elastic/eui';
 import React from 'react';
-import { useLocation } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
-import type { ApmUrlParams } from '../../../context/url_params_context/types';
-import { useUrlParams } from '../../../context/url_params_context/use_url_params';
 import { useApmParams } from '../../../hooks/use_apm_params';
 import { useFallbackToTransactionsFetcher } from '../../../hooks/use_fallback_to_transactions_fetcher';
 import { useTimeRange } from '../../../hooks/use_time_range';
 import { AggregatedTransactionsBadge } from '../../shared/aggregated_transactions_badge';
 import { TransactionCharts } from '../../shared/charts/transaction_charts';
-import { fromQuery, toQuery } from '../../shared/Links/url_helpers';
+import { replace } from '../../shared/Links/url_helpers';
 import { TransactionsTable } from '../../shared/transactions_table';
 
-import { useRedirect } from './useRedirect';
-
-function getRedirectLocation({
-  location,
-  transactionType,
-  urlParams,
-}: {
-  location: Location;
-  transactionType?: string;
-  urlParams: ApmUrlParams;
-}): Location | undefined {
-  const transactionTypeFromUrlParams = urlParams.transactionType;
-
-  if (!transactionTypeFromUrlParams && transactionType) {
-    return {
-      ...location,
-      search: fromQuery({
-        ...toQuery(location.search),
-        transactionType,
-      }),
-    };
-  }
-}
-
 export function TransactionOverview() {
   const {
-    query: { environment, kuery, rangeFrom, rangeTo },
+    query: {
+      environment,
+      kuery,
+      rangeFrom,
+      rangeTo,
+      transactionType: transactionTypeFromUrl,
+    },
   } = useApmParams('/services/:serviceName/transactions');
 
   const { start, end } = useTimeRange({ rangeFrom, rangeTo });
@@ -54,12 +33,14 @@ export function TransactionOverview() {
   const { fallbackToTransactions } = useFallbackToTransactionsFetcher({
     kuery,
   });
-  const location = useLocation();
-  const { urlParams } = useUrlParams();
   const { transactionType, serviceName } = useApmServiceContext();
 
+  const history = useHistory();
+
   // redirect to first transaction type
-  useRedirect(getRedirectLocation({ location, transactionType, urlParams }));
+  if (!transactionTypeFromUrl && transactionType) {
+    replace(history, { query: { transactionType } });
+  }
 
   // TODO: improve urlParams typings.
   // `serviceName` or `transactionType` will never be undefined here, and this check should not be needed
diff --git a/x-pack/plugins/apm/public/components/app/transaction_overview/useRedirect.ts b/x-pack/plugins/apm/public/components/app/transaction_overview/useRedirect.ts
deleted file mode 100644
index fae80eec42f9b..0000000000000
--- a/x-pack/plugins/apm/public/components/app/transaction_overview/useRedirect.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/*
- * 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 { Location } from 'history';
-import { useEffect } from 'react';
-import { useHistory } from 'react-router-dom';
-
-export function useRedirect(redirectLocation?: Location) {
-  const history = useHistory();
-
-  useEffect(() => {
-    if (redirectLocation) {
-      history.replace(redirectLocation);
-    }
-  }, [history, redirectLocation]);
-}
diff --git a/x-pack/plugins/apm/public/components/shared/MetadataTable/index.tsx b/x-pack/plugins/apm/public/components/shared/MetadataTable/index.tsx
index 938d5f4519431..45be525512d0a 100644
--- a/x-pack/plugins/apm/public/components/shared/MetadataTable/index.tsx
+++ b/x-pack/plugins/apm/public/components/shared/MetadataTable/index.tsx
@@ -10,6 +10,7 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
+  EuiLink,
   EuiSpacer,
   EuiText,
   EuiTitle,
@@ -19,11 +20,11 @@ import { isEmpty } from 'lodash';
 import React, { useCallback } from 'react';
 import { useHistory, useLocation } from 'react-router-dom';
 import { useUrlParams } from '../../../context/url_params_context/use_url_params';
-import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
 import { HeightRetainer } from '../HeightRetainer';
 import { fromQuery, toQuery } from '../Links/url_helpers';
 import { filterSectionsByTerm, SectionsWithRows } from './helper';
 import { Section } from './Section';
+import { useApmPluginContext } from '../../../context/apm_plugin/use_apm_plugin_context';
 
 interface Props {
   sections: SectionsWithRows;
@@ -34,6 +35,7 @@ export function MetadataTable({ sections }: Props) {
   const location = useLocation();
   const { urlParams } = useUrlParams();
   const { searchTerm = '' } = urlParams;
+  const { docLinks } = useApmPluginContext().core;
 
   const filteredSections = filterSectionsByTerm(sections, searchTerm);
 
@@ -55,11 +57,11 @@ export function MetadataTable({ sections }: Props) {
     <React.Fragment>
       <EuiFlexGroup justifyContent="flexEnd" alignItems="center">
         <EuiFlexItem grow={false}>
-          <ElasticDocsLink section="/apm/get-started" path="/metadata.html">
+          <EuiLink href={docLinks.links.apm.metaData}>
             <EuiText size="s">
               <EuiIcon type="help" /> How to add labels and other data
             </EuiText>
-          </ElasticDocsLink>
+          </EuiLink>
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiFieldSearch
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/elements/index.ts b/x-pack/plugins/canvas/canvas_plugin_src/elements/index.ts
index 4925849045216..667854bf3e7e2 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/elements/index.ts
+++ b/x-pack/plugins/canvas/canvas_plugin_src/elements/index.ts
@@ -31,6 +31,7 @@ import { timeFilter } from './time_filter';
 import { verticalBarChart } from './vert_bar_chart';
 import { verticalProgressBar } from './vertical_progress_bar';
 import { verticalProgressPill } from './vertical_progress_pill';
+import { tagCloud } from './tag_cloud';
 
 import { SetupInitializer } from '../plugin';
 import { ElementFactory } from '../../types';
@@ -60,6 +61,7 @@ const elementSpecs = [
   verticalBarChart,
   verticalProgressBar,
   verticalProgressPill,
+  tagCloud,
 ];
 
 const initializeElementFactories = [metricElementInitializer];
@@ -69,6 +71,5 @@ export const initializeElements: SetupInitializer<ElementFactory[]> = (core, plu
     ...elementSpecs,
     ...initializeElementFactories.map((factory) => factory(core, plugins)),
   ];
-
   return applyElementStrings(specs);
 };
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/elements/tag_cloud/index.ts b/x-pack/plugins/canvas/canvas_plugin_src/elements/tag_cloud/index.ts
new file mode 100644
index 0000000000000..a0b464390fa22
--- /dev/null
+++ b/x-pack/plugins/canvas/canvas_plugin_src/elements/tag_cloud/index.ts
@@ -0,0 +1,21 @@
+/*
+ * 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 { ElementFactory } from '../../../types';
+
+export const tagCloud: ElementFactory = () => ({
+  name: 'tagCloud',
+  displayName: 'Tag Cloud',
+  type: 'chart',
+  help: 'Tagcloud visualization',
+  icon: 'visTagCloud',
+  expression: `filters
+  | demodata 
+  | head 150
+  | ply by="country" expression={math "count(country)" | as "Count"}
+  | tagcloud metric={visdimension "Count"} bucket={visdimension "country"}
+  | render`,
+});
diff --git a/x-pack/plugins/canvas/common/index.ts b/x-pack/plugins/canvas/common/index.ts
index 51a53586dee3c..5bae69e8601b2 100644
--- a/x-pack/plugins/canvas/common/index.ts
+++ b/x-pack/plugins/canvas/common/index.ts
@@ -8,3 +8,5 @@
 export const UI_SETTINGS = {
   ENABLE_LABS_UI: 'labs:canvas:enable_ui',
 };
+
+export { CANVAS_APP_LOCATOR, CanvasAppLocator, CanvasAppLocatorParams } from './locator';
diff --git a/x-pack/plugins/canvas/common/locator.ts b/x-pack/plugins/canvas/common/locator.ts
new file mode 100644
index 0000000000000..147e4fd860982
--- /dev/null
+++ b/x-pack/plugins/canvas/common/locator.ts
@@ -0,0 +1,45 @@
+/*
+ * 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 type { LocatorDefinition, LocatorPublic } from 'src/plugins/share/common';
+
+import { CANVAS_APP } from './lib/constants';
+
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type CanvasAppLocatorParams = {
+  view: 'workpadPDF';
+  id: string;
+  page: number;
+};
+
+export type CanvasAppLocator = LocatorPublic<CanvasAppLocatorParams>;
+
+export const CANVAS_APP_LOCATOR = 'CANVAS_APP_LOCATOR';
+
+export class CanvasAppLocatorDefinition implements LocatorDefinition<CanvasAppLocatorParams> {
+  id = CANVAS_APP_LOCATOR;
+
+  public async getLocation(params: CanvasAppLocatorParams) {
+    const app = CANVAS_APP;
+
+    if (params.view === 'workpadPDF') {
+      const { id, page } = params;
+
+      return {
+        app,
+        path: `#/export/workpad/pdf/${id}/page/${page}`,
+        state: {},
+      };
+    }
+
+    return {
+      app,
+      path: '#/',
+      state: {},
+    };
+  }
+}
diff --git a/x-pack/plugins/canvas/i18n/elements/element_strings.ts b/x-pack/plugins/canvas/i18n/elements/element_strings.ts
index 87879c4c753c9..e1540572f4af6 100644
--- a/x-pack/plugins/canvas/i18n/elements/element_strings.ts
+++ b/x-pack/plugins/canvas/i18n/elements/element_strings.ts
@@ -222,4 +222,12 @@ export const getElementStrings = (): ElementStringDict => ({
       defaultMessage: 'Displays progress as a portion of a vertical pill',
     }),
   },
+  tagCloud: {
+    displayName: i18n.translate('xpack.canvas.elements.tagCloudDisplayName', {
+      defaultMessage: 'Tag Cloud',
+    }),
+    help: i18n.translate('xpack.canvas.elements.tagCloudHelpText', {
+      defaultMessage: 'Tagcloud visualization',
+    }),
+  },
 });
diff --git a/x-pack/plugins/canvas/kibana.json b/x-pack/plugins/canvas/kibana.json
index 201fb5ab8f78f..772c030e11539 100644
--- a/x-pack/plugins/canvas/kibana.json
+++ b/x-pack/plugins/canvas/kibana.json
@@ -25,7 +25,8 @@
     "features",
     "inspector",
     "presentationUtil",
-    "uiActions"
+    "uiActions",
+    "share"
   ],
   "optionalPlugins": ["home", "reporting", "usageCollection"],
   "requiredBundles": [
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.tsx b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.tsx
index ca8f5fd4e3e45..50a3890673ffa 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.tsx
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/share_menu.tsx
@@ -46,9 +46,7 @@ export const ShareMenu = () => {
     ReportingPanelPDFComponent !== null
       ? ({ onClose }: { onClose: () => void }) => (
           <ReportingPanelPDFComponent
-            getJobParams={() =>
-              getPdfJobParams(sharingData, platformService.getBasePathInterface())
-            }
+            getJobParams={() => getPdfJobParams(sharingData, platformService.getKibanaVersion())}
             layoutOption="canvas"
             onClose={onClose}
           />
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/utils.test.ts b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/utils.test.ts
index 51d1b9abc5664..18c348aec18ea 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/utils.test.ts
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/utils.test.ts
@@ -9,17 +9,11 @@ jest.mock('../../../../common/lib/fetch');
 
 import { getPdfJobParams } from './utils';
 import { workpads } from '../../../../__fixtures__/workpads';
-import { IBasePath } from 'kibana/public';
 
-const basePath = ({
-  prepend: jest.fn().mockImplementation((s) => `basepath/s/spacey/${s}`),
-  get: () => 'basepath/s/spacey',
-  serverBasePath: `basepath`,
-} as unknown) as IBasePath;
 const workpadSharingData = { workpad: workpads[0], pageCount: 12 };
 
 test('getPdfJobParams returns the correct job params for canvas layout', () => {
-  const jobParams = getPdfJobParams(workpadSharingData, basePath);
+  const jobParams = getPdfJobParams(workpadSharingData, 'v99.99.99');
   expect(jobParams).toMatchInlineSnapshot(`
     Object {
       "layout": Object {
@@ -29,21 +23,117 @@ test('getPdfJobParams returns the correct job params for canvas layout', () => {
         },
         "id": "canvas",
       },
-      "objectType": "canvas workpad",
-      "relativeUrls": Array [
-        "/s/spacey/app/canvas#/export/workpad/pdf/base-workpad/page/1",
-        "/s/spacey/app/canvas#/export/workpad/pdf/base-workpad/page/2",
-        "/s/spacey/app/canvas#/export/workpad/pdf/base-workpad/page/3",
-        "/s/spacey/app/canvas#/export/workpad/pdf/base-workpad/page/4",
-        "/s/spacey/app/canvas#/export/workpad/pdf/base-workpad/page/5",
-        "/s/spacey/app/canvas#/export/workpad/pdf/base-workpad/page/6",
-        "/s/spacey/app/canvas#/export/workpad/pdf/base-workpad/page/7",
-        "/s/spacey/app/canvas#/export/workpad/pdf/base-workpad/page/8",
-        "/s/spacey/app/canvas#/export/workpad/pdf/base-workpad/page/9",
-        "/s/spacey/app/canvas#/export/workpad/pdf/base-workpad/page/10",
-        "/s/spacey/app/canvas#/export/workpad/pdf/base-workpad/page/11",
-        "/s/spacey/app/canvas#/export/workpad/pdf/base-workpad/page/12",
+      "locatorParams": Array [
+        Object {
+          "id": "CANVAS_APP_LOCATOR",
+          "params": Object {
+            "id": "base-workpad",
+            "page": 1,
+            "view": "workpadPDF",
+          },
+          "version": "v99.99.99",
+        },
+        Object {
+          "id": "CANVAS_APP_LOCATOR",
+          "params": Object {
+            "id": "base-workpad",
+            "page": 2,
+            "view": "workpadPDF",
+          },
+          "version": "v99.99.99",
+        },
+        Object {
+          "id": "CANVAS_APP_LOCATOR",
+          "params": Object {
+            "id": "base-workpad",
+            "page": 3,
+            "view": "workpadPDF",
+          },
+          "version": "v99.99.99",
+        },
+        Object {
+          "id": "CANVAS_APP_LOCATOR",
+          "params": Object {
+            "id": "base-workpad",
+            "page": 4,
+            "view": "workpadPDF",
+          },
+          "version": "v99.99.99",
+        },
+        Object {
+          "id": "CANVAS_APP_LOCATOR",
+          "params": Object {
+            "id": "base-workpad",
+            "page": 5,
+            "view": "workpadPDF",
+          },
+          "version": "v99.99.99",
+        },
+        Object {
+          "id": "CANVAS_APP_LOCATOR",
+          "params": Object {
+            "id": "base-workpad",
+            "page": 6,
+            "view": "workpadPDF",
+          },
+          "version": "v99.99.99",
+        },
+        Object {
+          "id": "CANVAS_APP_LOCATOR",
+          "params": Object {
+            "id": "base-workpad",
+            "page": 7,
+            "view": "workpadPDF",
+          },
+          "version": "v99.99.99",
+        },
+        Object {
+          "id": "CANVAS_APP_LOCATOR",
+          "params": Object {
+            "id": "base-workpad",
+            "page": 8,
+            "view": "workpadPDF",
+          },
+          "version": "v99.99.99",
+        },
+        Object {
+          "id": "CANVAS_APP_LOCATOR",
+          "params": Object {
+            "id": "base-workpad",
+            "page": 9,
+            "view": "workpadPDF",
+          },
+          "version": "v99.99.99",
+        },
+        Object {
+          "id": "CANVAS_APP_LOCATOR",
+          "params": Object {
+            "id": "base-workpad",
+            "page": 10,
+            "view": "workpadPDF",
+          },
+          "version": "v99.99.99",
+        },
+        Object {
+          "id": "CANVAS_APP_LOCATOR",
+          "params": Object {
+            "id": "base-workpad",
+            "page": 11,
+            "view": "workpadPDF",
+          },
+          "version": "v99.99.99",
+        },
+        Object {
+          "id": "CANVAS_APP_LOCATOR",
+          "params": Object {
+            "id": "base-workpad",
+            "page": 12,
+            "view": "workpadPDF",
+          },
+          "version": "v99.99.99",
+        },
       ],
+      "objectType": "canvas workpad",
       "title": "base workpad",
     }
   `);
diff --git a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/utils.ts b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/utils.ts
index bbd6b42a38333..311ef73e1c973 100644
--- a/x-pack/plugins/canvas/public/components/workpad_header/share_menu/utils.ts
+++ b/x-pack/plugins/canvas/public/components/workpad_header/share_menu/utils.ts
@@ -5,8 +5,9 @@
  * 2.0.
  */
 
-import { IBasePath } from 'kibana/public';
-import rison from 'rison-node';
+import type { RedirectOptions } from 'src/plugins/share/public';
+import { CANVAS_APP_LOCATOR } from '../../../../common/locator';
+import { CanvasAppLocatorParams } from '../../../../common/locator';
 import { CanvasWorkpad } from '../../../../types';
 
 export interface CanvasWorkpadSharingData {
@@ -16,11 +17,8 @@ export interface CanvasWorkpadSharingData {
 
 export function getPdfJobParams(
   { workpad: { id, name: title, width, height }, pageCount }: CanvasWorkpadSharingData,
-  basePath: IBasePath
+  version: string
 ) {
-  const urlPrefix = basePath.get().replace(basePath.serverBasePath, ''); // for Spaces prefix, which is included in basePath.get()
-  const canvasEntry = `${urlPrefix}/app/canvas#`;
-
   // The viewport in Reporting by specifying the dimensions. In order for things to work,
   // we need a viewport that will include all of the pages in the workpad. The viewport
   // also needs to include any offset values from the 0,0 position, otherwise the cropped
@@ -32,9 +30,18 @@ export function getPdfJobParams(
   // viewport size.
 
   // build a list of all page urls for exporting, they are captured one at a time
-  const workpadUrls = [];
+
+  const locatorParams: Array<RedirectOptions<CanvasAppLocatorParams>> = [];
   for (let i = 1; i <= pageCount; i++) {
-    workpadUrls.push(rison.encode(`${canvasEntry}/export/workpad/pdf/${id}/page/${i}`));
+    locatorParams.push({
+      id: CANVAS_APP_LOCATOR,
+      version,
+      params: {
+        view: 'workpadPDF',
+        id,
+        page: i,
+      },
+    });
   }
 
   return {
@@ -43,7 +50,7 @@ export function getPdfJobParams(
       id: 'canvas',
     },
     objectType: 'canvas workpad',
-    relativeUrls: workpadUrls,
+    locatorParams,
     title,
   };
 }
diff --git a/x-pack/plugins/canvas/public/plugin.tsx b/x-pack/plugins/canvas/public/plugin.tsx
index c149c67544865..3b4a6b6f1ee4b 100644
--- a/x-pack/plugins/canvas/public/plugin.tsx
+++ b/x-pack/plugins/canvas/public/plugin.tsx
@@ -6,6 +6,7 @@
  */
 
 import { BehaviorSubject } from 'rxjs';
+import type { SharePluginSetup } from 'src/plugins/share/public';
 import { ChartsPluginSetup, ChartsPluginStart } from 'src/plugins/charts/public';
 import { ReportingStart } from '../../reporting/public';
 import {
@@ -20,7 +21,8 @@ import {
 import { HomePublicPluginSetup } from '../../../../src/plugins/home/public';
 import { initLoadingIndicator } from './lib/loading_indicator';
 import { getSessionStorage } from './lib/storage';
-import { SESSIONSTORAGE_LASTPATH } from '../common/lib/constants';
+import { SESSIONSTORAGE_LASTPATH, CANVAS_APP } from '../common/lib/constants';
+import { CanvasAppLocatorDefinition } from '../common/locator';
 import { featureCatalogueEntry } from './feature_catalogue_entry';
 import { ExpressionsSetup, ExpressionsStart } from '../../../../src/plugins/expressions/public';
 import { DataPublicPluginSetup, DataPublicPluginStart } from '../../../../src/plugins/data/public';
@@ -43,6 +45,7 @@ export { CoreStart, CoreSetup };
 // This interface will be built out as we require other plugins for setup
 export interface CanvasSetupDeps {
   data: DataPublicPluginSetup;
+  share: SharePluginSetup;
   expressions: ExpressionsSetup;
   home?: HomePublicPluginSetup;
   usageCollection?: UsageCollectionSetup;
@@ -97,7 +100,7 @@ export class CanvasPlugin
 
     coreSetup.application.register({
       category: DEFAULT_APP_CATEGORIES.kibana,
-      id: 'canvas',
+      id: CANVAS_APP,
       title: 'Canvas',
       euiIconType: 'logoKibana',
       order: 3000,
@@ -105,6 +108,7 @@ export class CanvasPlugin
       mount: async (params: AppMountParameters) => {
         const { CanvasSrcPlugin } = await import('../canvas_plugin_src/plugin');
         const srcPlugin = new CanvasSrcPlugin();
+
         srcPlugin.setup(coreSetup, { canvas: canvasApi });
         setupExpressions({ coreSetup, setupPlugins });
 
@@ -144,6 +148,10 @@ export class CanvasPlugin
       setupPlugins.home.featureCatalogue.register(featureCatalogueEntry);
     }
 
+    if (setupPlugins.share) {
+      setupPlugins.share.url.locators.create(new CanvasAppLocatorDefinition());
+    }
+
     canvasApi.addArgumentUIs(async () => {
       // @ts-expect-error
       const { argTypeSpecs } = await import('./expression_types/arg_types');
diff --git a/x-pack/plugins/canvas/public/services/kibana/reporting.ts b/x-pack/plugins/canvas/public/services/kibana/reporting.ts
index 432fe5675b22f..02611acdea4da 100644
--- a/x-pack/plugins/canvas/public/services/kibana/reporting.ts
+++ b/x-pack/plugins/canvas/public/services/kibana/reporting.ts
@@ -22,7 +22,7 @@ export const reportingServiceFactory: CanvasReportingServiceFactory = ({
   const { reporting } = startPlugins;
 
   const reportingEnabled = () => ({
-    getReportingPanelPDFComponent: () => reporting?.components.ReportingPanelPDF || null,
+    getReportingPanelPDFComponent: () => reporting?.components.ReportingPanelPDFV2 || null,
   });
   const reportingDisabled = () => ({ getReportingPanelPDFComponent: () => null });
 
diff --git a/x-pack/plugins/canvas/public/services/reporting.ts b/x-pack/plugins/canvas/public/services/reporting.ts
index 5369dab32bf68..9ec5bd6a06a4c 100644
--- a/x-pack/plugins/canvas/public/services/reporting.ts
+++ b/x-pack/plugins/canvas/public/services/reporting.ts
@@ -7,7 +7,7 @@
 
 import { ReportingStart } from '../../../reporting/public';
 
-type ReportingPanelPDFComponent = ReportingStart['components']['ReportingPanelPDF'];
+type ReportingPanelPDFComponent = ReportingStart['components']['ReportingPanelPDFV2'];
 export interface CanvasReportingService {
   getReportingPanelPDFComponent: () => ReportingPanelPDFComponent | null;
 }
diff --git a/x-pack/plugins/canvas/tsconfig.json b/x-pack/plugins/canvas/tsconfig.json
index 87fabe2730c16..5a5a1883240b7 100644
--- a/x-pack/plugins/canvas/tsconfig.json
+++ b/x-pack/plugins/canvas/tsconfig.json
@@ -7,7 +7,7 @@
     "declarationMap": true,
 
     // the plugin contains some heavy json files
-    "resolveJsonModule": false,
+    "resolveJsonModule": false
   },
   "include": [
     "../../../typings/**/*",
@@ -20,13 +20,14 @@
     "shareable_runtime/**/*",
     "storybook/**/*",
     "tasks/mocks/*",
-    "types/**/*",
+    "types/**/*"
   ],
   "references": [
     { "path": "../../../src/core/tsconfig.json" },
-    { "path": "../../../src/plugins/bfetch/tsconfig.json"},
+    { "path": "../../../src/plugins/bfetch/tsconfig.json" },
     { "path": "../../../src/plugins/charts/tsconfig.json" },
-    { "path": "../../../src/plugins/data/tsconfig.json"},
+    { "path": "../../../src/plugins/data/tsconfig.json" },
+    { "path": "../../../src/plugins/share/tsconfig.json" },
     { "path": "../../../src/plugins/discover/tsconfig.json" },
     { "path": "../../../src/plugins/embeddable/tsconfig.json" },
     { "path": "../../../src/plugins/expressions/tsconfig.json" },
@@ -48,6 +49,6 @@
     { "path": "../features/tsconfig.json" },
     { "path": "../lens/tsconfig.json" },
     { "path": "../maps/tsconfig.json" },
-    { "path": "../reporting/tsconfig.json" },
+    { "path": "../reporting/tsconfig.json" }
   ]
 }
diff --git a/x-pack/plugins/lens/public/shared_components/coloring/palette_configuration.test.tsx b/x-pack/plugins/lens/public/shared_components/coloring/palette_configuration.test.tsx
index cda891871168e..33f6ac379cd80 100644
--- a/x-pack/plugins/lens/public/shared_components/coloring/palette_configuration.test.tsx
+++ b/x-pack/plugins/lens/public/shared_components/coloring/palette_configuration.test.tsx
@@ -14,6 +14,7 @@ import { ReactWrapper } from 'enzyme';
 import type { CustomPaletteParams } from '../../../common';
 import { applyPaletteParams } from './utils';
 import { CustomizablePalette } from './palette_configuration';
+import { CUSTOM_PALETTE } from './constants';
 import { act } from 'react-dom/test-utils';
 
 // mocking random id generator function
@@ -129,6 +130,21 @@ describe('palette panel', () => {
       });
     });
 
+    it('should restore the reverse initial state on transitioning', () => {
+      const instance = mountWithIntl(<CustomizablePalette {...props} />);
+
+      changePaletteIn(instance, 'negative');
+
+      expect(props.setPalette).toHaveBeenCalledWith({
+        type: 'palette',
+        name: 'negative',
+        params: expect.objectContaining({
+          name: 'negative',
+          reverse: false,
+        }),
+      });
+    });
+
     it('should rewrite the min/max range values on palette change', () => {
       const instance = mountWithIntl(<CustomizablePalette {...props} />);
 
@@ -175,6 +191,20 @@ describe('palette panel', () => {
         })
       );
     });
+
+    it('should transition a predefined palette to a custom one on reverse click', () => {
+      const instance = mountWithIntl(<CustomizablePalette {...props} />);
+
+      toggleReverse(instance, true);
+
+      expect(props.setPalette).toHaveBeenCalledWith(
+        expect.objectContaining({
+          params: expect.objectContaining({
+            name: CUSTOM_PALETTE,
+          }),
+        })
+      );
+    });
   });
 
   describe('percentage / number modes', () => {
diff --git a/x-pack/plugins/lens/public/shared_components/coloring/palette_configuration.tsx b/x-pack/plugins/lens/public/shared_components/coloring/palette_configuration.tsx
index 1d1e212b87c0c..019e83fb0aa59 100644
--- a/x-pack/plugins/lens/public/shared_components/coloring/palette_configuration.tsx
+++ b/x-pack/plugins/lens/public/shared_components/coloring/palette_configuration.tsx
@@ -106,6 +106,7 @@ export function CustomizablePalette({
                 ...activePalette.params,
                 name: newPalette.name,
                 colorStops: undefined,
+                reverse: false, // restore the reverse flag
               };
 
               const newColorStops = getColorStops(palettes, [], activePalette, dataBounds);
@@ -317,28 +318,20 @@ export function CustomizablePalette({
                 className="lnsPalettePanel__reverseButton"
                 data-test-subj="lnsPalettePanel_dynamicColoring_reverse"
                 onClick={() => {
-                  const params: CustomPaletteParams = { reverse: !activePalette.params?.reverse };
-                  if (isCurrentPaletteCustom) {
-                    params.colorStops = reversePalette(colorStopsToShow);
-                    params.stops = getPaletteStops(
-                      palettes,
-                      {
-                        ...(activePalette?.params || {}),
-                        colorStops: params.colorStops,
-                      },
-                      { dataBounds }
-                    );
-                  } else {
-                    params.stops = reversePalette(
-                      activePalette?.params?.stops ||
-                        getPaletteStops(
-                          palettes,
-                          { ...activePalette.params, ...params },
-                          { prevPalette: activePalette.name, dataBounds }
-                        )
-                    );
-                  }
-                  setPalette(mergePaletteParams(activePalette, params));
+                  // when reversing a palette, the palette is automatically transitioned to a custom palette
+                  const newParams = getSwitchToCustomParams(
+                    palettes,
+                    activePalette,
+                    {
+                      colorStops: reversePalette(colorStopsToShow),
+                      steps: activePalette.params?.steps || DEFAULT_COLOR_STEPS,
+                      reverse: !activePalette.params?.reverse, // Store the reverse state
+                      rangeMin: colorStopsToShow[0]?.stop,
+                      rangeMax: colorStopsToShow[colorStopsToShow.length - 1]?.stop,
+                    },
+                    dataBounds
+                  );
+                  setPalette(newParams);
                 }}
               >
                 <EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
diff --git a/x-pack/plugins/lens/public/shared_components/coloring/palette_picker.tsx b/x-pack/plugins/lens/public/shared_components/coloring/palette_picker.tsx
index 2a415cd178925..b21b732820eaa 100644
--- a/x-pack/plugins/lens/public/shared_components/coloring/palette_picker.tsx
+++ b/x-pack/plugins/lens/public/shared_components/coloring/palette_picker.tsx
@@ -83,7 +83,7 @@ export function PalettePicker({
         value: id,
         title,
         type: FIXED_PROGRESSION,
-        palette: activePalette?.params?.reverse ? colors.reverse() : colors,
+        palette: colors,
         'data-test-subj': `${id}-palette`,
       };
     });
diff --git a/x-pack/plugins/lens/server/embeddable/lens_embeddable_factory.ts b/x-pack/plugins/lens/server/embeddable/lens_embeddable_factory.ts
index 86a3a600b58ab..4423d9e659119 100644
--- a/x-pack/plugins/lens/server/embeddable/lens_embeddable_factory.ts
+++ b/x-pack/plugins/lens/server/embeddable/lens_embeddable_factory.ts
@@ -9,6 +9,7 @@ import { EmbeddableRegistryDefinition } from 'src/plugins/embeddable/server';
 import type { SerializableRecord } from '@kbn/utility-types';
 import { DOC_TYPE } from '../../common';
 import {
+  commonMakeReversePaletteAsCustom,
   commonRemoveTimezoneDateHistogramParam,
   commonRenameOperationsForFormula,
   commonUpdateVisLayerType,
@@ -17,6 +18,7 @@ import {
   LensDocShape713,
   LensDocShape715,
   LensDocShapePre712,
+  VisState716,
   VisStatePre715,
 } from '../migrations/types';
 import { extract, inject } from '../../common/embeddable_factory';
@@ -50,6 +52,14 @@ export const lensEmbeddableFactory = (): EmbeddableRegistryDefinition => {
           attributes: migratedLensState,
         } as unknown) as SerializableRecord;
       },
+      '7.16.0': (state) => {
+        const lensState = (state as unknown) as { attributes: LensDocShape715<VisState716> };
+        const migratedLensState = commonMakeReversePaletteAsCustom(lensState.attributes);
+        return ({
+          ...lensState,
+          attributes: migratedLensState,
+        } as unknown) as SerializableRecord;
+      },
     },
     extract,
     inject,
diff --git a/x-pack/plugins/lens/server/migrations/common_migrations.ts b/x-pack/plugins/lens/server/migrations/common_migrations.ts
index fda4300e03ea9..5755416957440 100644
--- a/x-pack/plugins/lens/server/migrations/common_migrations.ts
+++ b/x-pack/plugins/lens/server/migrations/common_migrations.ts
@@ -6,6 +6,7 @@
  */
 
 import { cloneDeep } from 'lodash';
+import { PaletteOutput } from 'src/plugins/charts/common';
 import {
   LensDocShapePre712,
   OperationTypePre712,
@@ -15,8 +16,9 @@ import {
   LensDocShape715,
   VisStatePost715,
   VisStatePre715,
+  VisState716,
 } from './types';
-import { layerTypes } from '../../common';
+import { CustomPaletteParams, layerTypes } from '../../common';
 
 export const commonRenameOperationsForFormula = (
   attributes: LensDocShapePre712
@@ -98,3 +100,56 @@ export const commonUpdateVisLayerType = (
   }
   return newAttributes as LensDocShape715<VisStatePost715>;
 };
+
+function moveDefaultPaletteToPercentCustomInPlace(palette?: PaletteOutput<CustomPaletteParams>) {
+  if (palette?.params?.reverse && palette.params.name !== 'custom' && palette.params.stops) {
+    // change to palette type to custom and migrate to a percentage type of mode
+    palette.name = 'custom';
+    palette.params.name = 'custom';
+    // we can make strong assumptions here:
+    // because it was a default palette reversed it means that stops were the default ones
+    // so when migrating, because there's no access to active data, we could leverage the
+    // percent rangeType to define colorStops in percent.
+    //
+    // Stops should be defined, but reversed, as the previous code was rewriting them on reverse.
+    //
+    // The only change the user should notice should be the mode changing from number to percent
+    // but the final result *must* be identical
+    palette.params.rangeType = 'percent';
+    const steps = palette.params.stops.length;
+    palette.params.rangeMin = 0;
+    palette.params.rangeMax = 80;
+    palette.params.steps = steps;
+    palette.params.colorStops = palette.params.stops.map(({ color }, index) => ({
+      color,
+      stop: (index * 100) / steps,
+    }));
+    palette.params.stops = palette.params.stops.map(({ color }, index) => ({
+      color,
+      stop: ((1 + index) * 100) / steps,
+    }));
+  }
+}
+
+export const commonMakeReversePaletteAsCustom = (
+  attributes: LensDocShape715<VisState716>
+): LensDocShape715<VisState716> => {
+  const newAttributes = cloneDeep(attributes);
+  const vizState = (newAttributes as LensDocShape715<VisState716>).state.visualization;
+  if (
+    attributes.visualizationType !== 'lnsDatatable' &&
+    attributes.visualizationType !== 'lnsHeatmap'
+  ) {
+    return newAttributes;
+  }
+  if ('columns' in vizState) {
+    for (const column of vizState.columns) {
+      if (column.colorMode && column.colorMode !== 'none') {
+        moveDefaultPaletteToPercentCustomInPlace(column.palette);
+      }
+    }
+  } else {
+    moveDefaultPaletteToPercentCustomInPlace(vizState.palette);
+  }
+  return newAttributes;
+};
diff --git a/x-pack/plugins/lens/server/migrations/saved_object_migrations.test.ts b/x-pack/plugins/lens/server/migrations/saved_object_migrations.test.ts
index afc6e6c6a590c..c16c5b5169ac5 100644
--- a/x-pack/plugins/lens/server/migrations/saved_object_migrations.test.ts
+++ b/x-pack/plugins/lens/server/migrations/saved_object_migrations.test.ts
@@ -12,8 +12,9 @@ import {
   SavedObjectMigrationFn,
   SavedObjectUnsanitizedDoc,
 } from 'src/core/server';
-import { LensDocShape715, VisStatePost715, VisStatePre715 } from './types';
-import { layerTypes } from '../../common';
+import { LensDocShape715, VisState716, VisStatePost715, VisStatePre715 } from './types';
+import { CustomPaletteParams, layerTypes } from '../../common';
+import { PaletteOutput } from 'src/plugins/charts/common';
 
 describe('Lens migrations', () => {
   describe('7.7.0 missing dimensions in XY', () => {
@@ -1129,4 +1130,276 @@ describe('Lens migrations', () => {
       }
     });
   });
+
+  describe('7.16.0 move reversed default palette to custom palette', () => {
+    const context = ({ log: { warning: () => {} } } as unknown) as SavedObjectMigrationContext;
+    const example = ({
+      type: 'lens',
+      id: 'mocked-saved-object-id',
+      attributes: {
+        savedObjectId: '1',
+        title: 'MyRenamedOps',
+        description: '',
+        visualizationType: null,
+        state: {
+          datasourceMetaData: {
+            filterableIndexPatterns: [],
+          },
+          datasourceStates: {
+            indexpattern: {
+              currentIndexPatternId: 'logstash-*',
+              layers: {
+                '2': {
+                  columns: {
+                    '3': {
+                      label: '@timestamp',
+                      dataType: 'date',
+                      operationType: 'date_histogram',
+                      sourceField: '@timestamp',
+                      isBucketed: true,
+                      scale: 'interval',
+                      params: { interval: 'auto', timeZone: 'Europe/Berlin' },
+                    },
+                    '4': {
+                      label: '@timestamp',
+                      dataType: 'date',
+                      operationType: 'date_histogram',
+                      sourceField: '@timestamp',
+                      isBucketed: true,
+                      scale: 'interval',
+                      params: { interval: 'auto' },
+                    },
+                    '5': {
+                      label: '@timestamp',
+                      dataType: 'date',
+                      operationType: 'my_unexpected_operation',
+                      isBucketed: true,
+                      scale: 'interval',
+                      params: { timeZone: 'do not delete' },
+                    },
+                  },
+                  columnOrder: ['3', '4', '5'],
+                },
+              },
+            },
+          },
+          visualization: {},
+          query: { query: '', language: 'kuery' },
+          filters: [],
+        },
+      },
+    } as unknown) as SavedObjectUnsanitizedDoc<LensDocShape715<unknown>>;
+
+    it('should just return the same document for XY, partition and metric visualization types', () => {
+      for (const vizType of ['lnsXY', 'lnsPie', 'lnsMetric']) {
+        const exampleCopy = cloneDeep(example);
+        exampleCopy.attributes.visualizationType = vizType;
+        // add datatable state here, even with another viz (manual change?)
+        (exampleCopy.attributes as LensDocShape715<VisState716>).state.visualization = ({
+          columns: [
+            { palette: { type: 'palette', name: 'temperature' }, colorMode: 'cell' },
+            { palette: { type: 'palette', name: 'temperature' }, colorMode: 'text' },
+            {
+              palette: { type: 'palette', name: 'temperature', params: { reverse: false } },
+              colorMode: 'cell',
+            },
+          ],
+        } as unknown) as VisState716;
+        const result = migrations['7.16.0'](exampleCopy, context) as ReturnType<
+          SavedObjectMigrationFn<LensDocShape, LensDocShape>
+        >;
+        expect(result).toEqual(exampleCopy);
+      }
+    });
+
+    it('should not change non reversed default palettes in datatable', () => {
+      const datatableExample = cloneDeep(example);
+      datatableExample.attributes.visualizationType = 'lnsDatatable';
+      (datatableExample.attributes as LensDocShape715<VisState716>).state.visualization = ({
+        columns: [
+          { palette: { type: 'palette', name: 'temperature' }, colorMode: 'cell' },
+          { palette: { type: 'palette', name: 'temperature' }, colorMode: 'text' },
+          {
+            palette: { type: 'palette', name: 'temperature', params: { reverse: false } },
+            colorMode: 'cell',
+          },
+        ],
+      } as unknown) as VisState716;
+      const result = migrations['7.16.0'](datatableExample, context) as ReturnType<
+        SavedObjectMigrationFn<LensDocShape, LensDocShape>
+      >;
+      expect(result).toEqual(datatableExample);
+    });
+
+    it('should not change custom palettes in datatable', () => {
+      const datatableExample = cloneDeep(example);
+      datatableExample.attributes.visualizationType = 'lnsDatatable';
+      (datatableExample.attributes as LensDocShape715<VisState716>).state.visualization = ({
+        columns: [
+          { palette: { type: 'palette', name: 'custom' }, colorMode: 'cell' },
+          { palette: { type: 'palette', name: 'custom' }, colorMode: 'text' },
+          {
+            palette: { type: 'palette', name: 'custom', params: { reverse: true } },
+            colorMode: 'cell',
+          },
+        ],
+      } as unknown) as VisState716;
+      const result = migrations['7.16.0'](datatableExample, context) as ReturnType<
+        SavedObjectMigrationFn<LensDocShape, LensDocShape>
+      >;
+      expect(result).toEqual(datatableExample);
+    });
+
+    it('should not change a datatable with no conditional coloring', () => {
+      const datatableExample = cloneDeep(example);
+      datatableExample.attributes.visualizationType = 'lnsDatatable';
+      (datatableExample.attributes as LensDocShape715<VisState716>).state.visualization = ({
+        columns: [{ colorMode: 'none' }, {}],
+      } as unknown) as VisState716;
+      const result = migrations['7.16.0'](datatableExample, context) as ReturnType<
+        SavedObjectMigrationFn<LensDocShape, LensDocShape>
+      >;
+      expect(result).toEqual(datatableExample);
+    });
+
+    it('should not change default palette if the colorMode is set to "none" in datatable', () => {
+      const datatableExample = cloneDeep(example);
+      datatableExample.attributes.visualizationType = 'lnsDatatable';
+      (datatableExample.attributes as LensDocShape715<VisState716>).state.visualization = ({
+        columns: [
+          { palette: { type: 'palette', name: 'temperature' }, colorMode: 'none' },
+          { palette: { type: 'palette', name: 'temperature' }, colorMode: 'none' },
+          {
+            palette: { type: 'palette', name: 'temperature', params: { reverse: true } },
+            colorMode: 'cell',
+          },
+        ],
+      } as unknown) as VisState716;
+      const result = migrations['7.16.0'](datatableExample, context) as ReturnType<
+        SavedObjectMigrationFn<LensDocShape, LensDocShape>
+      >;
+      expect(result).toEqual(datatableExample);
+    });
+
+    it('should change a default palette reversed in datatable', () => {
+      const datatableExample = cloneDeep(example);
+      datatableExample.attributes.visualizationType = 'lnsDatatable';
+      (datatableExample.attributes as LensDocShape715<VisState716>).state.visualization = ({
+        columns: [
+          {
+            colorMode: 'cell',
+            palette: {
+              type: 'palette',
+              name: 'temperature1',
+              params: {
+                reverse: true,
+                rangeType: 'number',
+                stops: [
+                  { color: 'red', stop: 10 },
+                  { color: 'blue', stop: 20 },
+                  { color: 'pink', stop: 50 },
+                  { color: 'green', stop: 60 },
+                  { color: 'yellow', stop: 70 },
+                ],
+              },
+            },
+          },
+          {
+            colorMode: 'text',
+            palette: {
+              type: 'palette',
+              name: 'temperature2',
+              params: {
+                reverse: true,
+                rangeType: 'number',
+                stops: [
+                  { color: 'red', stop: 10 },
+                  { color: 'blue', stop: 20 },
+                  { color: 'pink', stop: 50 },
+                  { color: 'green', stop: 60 },
+                  { color: 'yellow', stop: 70 },
+                ],
+              },
+            },
+          },
+        ],
+      } as unknown) as VisState716;
+      const result = migrations['7.16.0'](datatableExample, context) as ReturnType<
+        SavedObjectMigrationFn<LensDocShape, LensDocShape>
+      >;
+      const state = (result.attributes as LensDocShape715<
+        Extract<VisState716, { columns: unknown[] }>
+      >).state.visualization;
+      for (const column of state.columns) {
+        expect(column.palette!.name).toBe('custom');
+        expect(column.palette!.params!.name).toBe('custom');
+        expect(column.palette!.params!.rangeMin).toBe(0);
+        expect(column.palette!.params!.rangeMax).toBe(80);
+        expect(column.palette!.params!.reverse).toBeTruthy(); // still true
+        expect(column.palette!.params!.rangeType).toBe('percent');
+        expect(column.palette!.params!.stops).toEqual([
+          { color: 'red', stop: 20 },
+          { color: 'blue', stop: 40 },
+          { color: 'pink', stop: 60 },
+          { color: 'green', stop: 80 },
+          { color: 'yellow', stop: 100 },
+        ]);
+        expect(column.palette!.params!.colorStops).toEqual([
+          { color: 'red', stop: 0 },
+          { color: 'blue', stop: 20 },
+          { color: 'pink', stop: 40 },
+          { color: 'green', stop: 60 },
+          { color: 'yellow', stop: 80 },
+        ]);
+      }
+    });
+
+    it('should change a default palette reversed in heatmap', () => {
+      const datatableExample = cloneDeep(example);
+      datatableExample.attributes.visualizationType = 'lnsHeatmap';
+      (datatableExample.attributes as LensDocShape715<VisState716>).state.visualization = ({
+        palette: {
+          type: 'palette',
+          name: 'temperature1',
+          params: {
+            reverse: true,
+            rangeType: 'number',
+            stops: [
+              { color: 'red', stop: 10 },
+              { color: 'blue', stop: 20 },
+              { color: 'pink', stop: 50 },
+              { color: 'green', stop: 60 },
+              { color: 'yellow', stop: 70 },
+            ],
+          },
+        },
+      } as unknown) as VisState716;
+      const result = migrations['7.16.0'](datatableExample, context) as ReturnType<
+        SavedObjectMigrationFn<LensDocShape, LensDocShape>
+      >;
+      const state = (result.attributes as LensDocShape715<
+        Extract<VisState716, { palette?: PaletteOutput<CustomPaletteParams> }>
+      >).state.visualization;
+      expect(state.palette!.name).toBe('custom');
+      expect(state.palette!.params!.name).toBe('custom');
+      expect(state.palette!.params!.rangeMin).toBe(0);
+      expect(state.palette!.params!.rangeMax).toBe(80);
+      expect(state.palette!.params!.reverse).toBeTruthy(); // still true
+      expect(state.palette!.params!.rangeType).toBe('percent');
+      expect(state.palette!.params!.stops).toEqual([
+        { color: 'red', stop: 20 },
+        { color: 'blue', stop: 40 },
+        { color: 'pink', stop: 60 },
+        { color: 'green', stop: 80 },
+        { color: 'yellow', stop: 100 },
+      ]);
+      expect(state.palette!.params!.colorStops).toEqual([
+        { color: 'red', stop: 0 },
+        { color: 'blue', stop: 20 },
+        { color: 'pink', stop: 40 },
+        { color: 'green', stop: 60 },
+        { color: 'yellow', stop: 80 },
+      ]);
+    });
+  });
 });
diff --git a/x-pack/plugins/lens/server/migrations/saved_object_migrations.ts b/x-pack/plugins/lens/server/migrations/saved_object_migrations.ts
index 7d08e76841cf5..901f0b5d6e684 100644
--- a/x-pack/plugins/lens/server/migrations/saved_object_migrations.ts
+++ b/x-pack/plugins/lens/server/migrations/saved_object_migrations.ts
@@ -23,11 +23,13 @@ import {
   LensDocShape715,
   VisStatePost715,
   VisStatePre715,
+  VisState716,
 } from './types';
 import {
   commonRenameOperationsForFormula,
   commonRemoveTimezoneDateHistogramParam,
   commonUpdateVisLayerType,
+  commonMakeReversePaletteAsCustom,
 } from './common_migrations';
 
 interface LensDocShapePre710<VisualizationState = unknown> {
@@ -430,6 +432,14 @@ const addLayerTypeToVisualization: SavedObjectMigrationFn<
   return { ...newDoc, attributes: commonUpdateVisLayerType(newDoc.attributes) };
 };
 
+const moveDefaultReversedPaletteToCustom: SavedObjectMigrationFn<
+  LensDocShape715<VisState716>,
+  LensDocShape715<VisState716>
+> = (doc) => {
+  const newDoc = cloneDeep(doc);
+  return { ...newDoc, attributes: commonMakeReversePaletteAsCustom(newDoc.attributes) };
+};
+
 export const migrations: SavedObjectMigrationMap = {
   '7.7.0': removeInvalidAccessors,
   // The order of these migrations matter, since the timefield migration relies on the aggConfigs
@@ -442,4 +452,5 @@ export const migrations: SavedObjectMigrationMap = {
   '7.13.1': renameOperationsForFormula, // duplicate this migration in case a broken by value panel is added to the library
   '7.14.0': removeTimezoneDateHistogramParam,
   '7.15.0': addLayerTypeToVisualization,
+  '7.16.0': moveDefaultReversedPaletteToCustom,
 };
diff --git a/x-pack/plugins/lens/server/migrations/types.ts b/x-pack/plugins/lens/server/migrations/types.ts
index 09b460ff8b8cd..2e6e66aed9949 100644
--- a/x-pack/plugins/lens/server/migrations/types.ts
+++ b/x-pack/plugins/lens/server/migrations/types.ts
@@ -5,8 +5,9 @@
  * 2.0.
  */
 
+import type { PaletteOutput } from 'src/plugins/charts/common';
 import { Query, Filter } from 'src/plugins/data/public';
-import type { LayerType } from '../../common';
+import type { CustomPaletteParams, LayerType } from '../../common';
 
 export type OperationTypePre712 =
   | 'avg'
@@ -192,3 +193,16 @@ export interface LensDocShape715<VisualizationState = unknown> {
     filters: Filter[];
   };
 }
+
+export type VisState716 =
+  // Datatable
+  | {
+      columns: Array<{
+        palette?: PaletteOutput<CustomPaletteParams>;
+        colorMode?: 'none' | 'cell' | 'text';
+      }>;
+    }
+  // Heatmap
+  | {
+      palette?: PaletteOutput<CustomPaletteParams>;
+    };
diff --git a/x-pack/plugins/ml/server/routes/anomaly_detectors.ts b/x-pack/plugins/ml/server/routes/anomaly_detectors.ts
index 1403ce2a7b4db..30aae3c0fb550 100644
--- a/x-pack/plugins/ml/server/routes/anomaly_detectors.ts
+++ b/x-pack/plugins/ml/server/routes/anomaly_detectors.ts
@@ -680,7 +680,7 @@ export function jobRoutes({ router, routeGuard }: RouteInitialization) {
   /**
    * @apiGroup AnomalyDetectors
    *
-   * @api {post} /api/ml/anomaly_detectors/:jobId/model_snapshots/:snapshotId/_update update model snapshot by snapshot ID
+   * @api {post} /api/ml/anomaly_detectors/:jobId/model_snapshots/:snapshotId/_update Update model snapshot by snapshot ID
    * @apiName UpdateModelSnapshotsById
    * @apiDescription Updates the model snapshot for the specified snapshot ID
    *
diff --git a/x-pack/plugins/ml/server/routes/filters.ts b/x-pack/plugins/ml/server/routes/filters.ts
index 1535b12f335a6..b4c7d5bf5b109 100644
--- a/x-pack/plugins/ml/server/routes/filters.ts
+++ b/x-pack/plugins/ml/server/routes/filters.ts
@@ -47,9 +47,9 @@ export function filtersRoutes({ router, routeGuard }: RouteInitialization) {
   /**
    * @apiGroup Filters
    *
-   * @api {get} /api/ml/filters Gets filters - size limit has been explicitly set to 1000
+   * @api {get} /api/ml/filters Get filters
    * @apiName GetFilters
-   * @apiDescription Retrieves the list of filters which are used for custom rules in anomaly detection.
+   * @apiDescription Retrieves the list of filters which are used for custom rules in anomaly detection. Sets the size limit explicitly to return a maximum of 1000.
    *
    * @apiSuccess {Boolean} success
    * @apiSuccess {Object[]} filters list of filters
diff --git a/x-pack/plugins/ml/server/routes/job_audit_messages.ts b/x-pack/plugins/ml/server/routes/job_audit_messages.ts
index cdef5a9c20dae..d28effae5ca2b 100644
--- a/x-pack/plugins/ml/server/routes/job_audit_messages.ts
+++ b/x-pack/plugins/ml/server/routes/job_audit_messages.ts
@@ -101,7 +101,7 @@ export function jobAuditMessagesRoutes({ router, routeGuard }: RouteInitializati
   /**
    * @apiGroup JobAuditMessages
    *
-   * @api {put} /api/ml/job_audit_messages/clear_messages Index annotation
+   * @api {put} /api/ml/job_audit_messages/clear_messages Clear messages
    * @apiName ClearJobAuditMessages
    * @apiDescription Clear the job audit messages.
    *
diff --git a/x-pack/plugins/ml/server/routes/modules.ts b/x-pack/plugins/ml/server/routes/modules.ts
index e327d601555ab..097f3f8d67652 100644
--- a/x-pack/plugins/ml/server/routes/modules.ts
+++ b/x-pack/plugins/ml/server/routes/modules.ts
@@ -533,7 +533,7 @@ export function dataRecognizer({ router, routeGuard }: RouteInitialization) {
   /**
    * @apiGroup Modules
    *
-   * @api {post} /api/ml/modules/jobs_exist/:moduleId Check if module jobs exist
+   * @api {get} /api/ml/modules/jobs_exist/:moduleId Check if module jobs exist
    * @apiName CheckExistingModuleJobs
    * @apiDescription Check whether the jobs in the module with the specified ID exist in the
    *      current list of jobs. The check runs a test to see if any of the jobs in existence
diff --git a/x-pack/plugins/ml/server/routes/results_service.ts b/x-pack/plugins/ml/server/routes/results_service.ts
index 2cb34ce357fea..fe1a759caf8e6 100644
--- a/x-pack/plugins/ml/server/routes/results_service.ts
+++ b/x-pack/plugins/ml/server/routes/results_service.ts
@@ -106,9 +106,9 @@ export function resultsServiceRoutes({ router, routeGuard }: RouteInitialization
   /**
    * @apiGroup ResultsService
    *
-   * @api {post} /api/ml/results/anomalies_table_data Prepare anomalies records for table display
+   * @api {post} /api/ml/results/anomalies_table_data Get anomalies records for table display
    * @apiName GetAnomaliesTableData
-   * @apiDescription Retrieves anomaly records for an anomaly detection job and formats them for anomalies table display
+   * @apiDescription Retrieves anomaly records for an anomaly detection job and formats them for anomalies table display.
    *
    * @apiSchema (body) anomaliesTableDataSchema
    */
@@ -138,7 +138,7 @@ export function resultsServiceRoutes({ router, routeGuard }: RouteInitialization
   /**
    * @apiGroup ResultsService
    *
-   * @api {post} /api/ml/results/category_definition Returns category definition
+   * @api {post} /api/ml/results/category_definition Get category definition
    * @apiName GetCategoryDefinition
    * @apiDescription Returns the definition of the category with the specified ID and job ID
    *
@@ -170,7 +170,7 @@ export function resultsServiceRoutes({ router, routeGuard }: RouteInitialization
   /**
    * @apiGroup ResultsService
    *
-   * @api {post} /api/ml/results/max_anomaly_score Returns the maximum anomaly_score
+   * @api {post} /api/ml/results/max_anomaly_score Get the maximum anomaly_score
    * @apiName GetMaxAnomalyScore
    * @apiDescription Returns the maximum anomaly score of the bucket results for the request job ID(s) and time range
    *
@@ -202,7 +202,7 @@ export function resultsServiceRoutes({ router, routeGuard }: RouteInitialization
   /**
    * @apiGroup ResultsService
    *
-   * @api {post} /api/ml/results/category_examples Returns category examples
+   * @api {post} /api/ml/results/category_examples Get category examples
    * @apiName GetCategoryExamples
    * @apiDescription Returns examples for the categories with the specified IDs from the job with the supplied ID
    *
@@ -266,8 +266,10 @@ export function resultsServiceRoutes({ router, routeGuard }: RouteInitialization
   /**
    * @apiGroup ResultsService
    *
-   * @api {post} /api/ml/results/anomaly_search Performs a search on the anomaly results index
+   * @api {post} /api/ml/results/anomaly_search Run a search on the anomaly results index
    * @apiName AnomalySearch
+   * @apiDescription Runs the supplied query against the anomaly results index for the specified job IDs.
+   * @apiSchema (body) anomalySearchSchema
    */
   router.post(
     {
@@ -295,7 +297,7 @@ export function resultsServiceRoutes({ router, routeGuard }: RouteInitialization
   /**
    * @apiGroup ResultsService
    *
-   * @api {get} /api/ml/results/:jobId/categorizer_stats
+   * @api {get} /api/ml/results/:jobId/categorizer_stats Return categorizer statistics
    * @apiName GetCategorizerStats
    * @apiDescription Returns the categorizer stats for the specified job ID
    * @apiSchema (params) jobIdSchema
@@ -327,7 +329,7 @@ export function resultsServiceRoutes({ router, routeGuard }: RouteInitialization
   /**
    * @apiGroup ResultsService
    *
-   * @api {get} /api/ml/results/category_stopped_partitions
+   * @api {post} /api/ml/results/category_stopped_partitions Get partitions that have stopped being categorized
    * @apiName GetCategoryStoppedPartitions
    * @apiDescription Returns information on the partitions that have stopped being categorized due to the categorization status changing from ok to warn. Can return either the list of stopped partitions for each job, or just the list of job IDs.
    * @apiSchema (body) getCategorizerStoppedPartitionsSchema
diff --git a/x-pack/plugins/ml/server/routes/saved_objects.ts b/x-pack/plugins/ml/server/routes/saved_objects.ts
index e9fb748a4c7f8..24140c9253cda 100644
--- a/x-pack/plugins/ml/server/routes/saved_objects.ts
+++ b/x-pack/plugins/ml/server/routes/saved_objects.ts
@@ -59,10 +59,10 @@ export function savedObjectsRoutes(
    *
    * @api {get} /api/ml/saved_objects/sync Sync job saved objects
    * @apiName SyncJobSavedObjects
-   * @apiDescription Create saved objects for jobs which are missing them.
-   *                 Delete saved objects for jobs which no longer exist.
-   *                 Update missing datafeed ids in saved objects for datafeeds which exist.
-   *                 Remove datafeed ids for datafeeds which no longer exist.
+   * @apiDescription Synchronizes saved objects for jobs. Saved objects will be created for jobs which are missing them,
+   *                 and saved objects will be deleted for jobs which no longer exist.
+   *                 Updates missing datafeed IDs in saved objects for datafeeds which exist, and
+   *                 removes datafeed IDs for datafeeds which no longer exist.
    *
    */
   router.get(
@@ -217,9 +217,9 @@ export function savedObjectsRoutes(
   /**
    * @apiGroup JobSavedObjects
    *
-   * @api {get} /api/ml/saved_objects/jobs_spaces All spaces in all jobs
+   * @api {get} /api/ml/saved_objects/jobs_spaces Get all jobs and their spaces
    * @apiName JobsSpaces
-   * @apiDescription List all jobs and their spaces
+   * @apiDescription List all jobs and their spaces.
    *
    */
   router.get(
diff --git a/x-pack/plugins/osquery/public/action_results/use_action_privileges.tsx b/x-pack/plugins/osquery/public/action_results/use_action_privileges.tsx
index 2c80c874e89fa..6d0477b22edee 100644
--- a/x-pack/plugins/osquery/public/action_results/use_action_privileges.tsx
+++ b/x-pack/plugins/osquery/public/action_results/use_action_privileges.tsx
@@ -6,28 +6,16 @@
  */
 
 import { useQuery } from 'react-query';
-
-import { i18n } from '@kbn/i18n';
 import { useKibana } from '../common/lib/kibana';
-import { useErrorToast } from '../common/hooks/use_error_toast';
 
 export const useActionResultsPrivileges = () => {
   const { http } = useKibana().services;
-  const setErrorToast = useErrorToast();
 
   return useQuery(
     ['actionResultsPrivileges'],
     () => http.get('/internal/osquery/privileges_check'),
     {
       keepPreviousData: true,
-      select: (response) => response?.has_all_requested ?? false,
-      onSuccess: () => setErrorToast(),
-      onError: (error: Error) =>
-        setErrorToast(error, {
-          title: i18n.translate('xpack.osquery.action_results_privileges.fetchError', {
-            defaultMessage: 'Error while fetching action results privileges',
-          }),
-        }),
     }
   );
 };
diff --git a/x-pack/plugins/osquery/public/common/page_paths.ts b/x-pack/plugins/osquery/public/common/page_paths.ts
index 0e0d8310ae8be..8df1006da181a 100644
--- a/x-pack/plugins/osquery/public/common/page_paths.ts
+++ b/x-pack/plugins/osquery/public/common/page_paths.ts
@@ -27,8 +27,6 @@ export interface DynamicPagePathValues {
   [key: string]: string;
 }
 
-export const BASE_PATH = '/app/fleet';
-
 // If routing paths are changed here, please also check to see if
 // `pagePathGetters()`, below, needs any modifications
 export const PAGE_ROUTING_PATHS = {
diff --git a/x-pack/plugins/osquery/public/components/app.tsx b/x-pack/plugins/osquery/public/components/app.tsx
index 44407139ab492..33fb6ac6a2adf 100644
--- a/x-pack/plugins/osquery/public/components/app.tsx
+++ b/x-pack/plugins/osquery/public/components/app.tsx
@@ -5,6 +5,8 @@
  * 2.0.
  */
 
+/* eslint-disable react-hooks/rules-of-hooks */
+
 import React, { useMemo } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiTabs, EuiTab } from '@elastic/eui';
@@ -14,10 +16,17 @@ import { Container, Nav, Wrapper } from './layouts';
 import { OsqueryAppRoutes } from '../routes';
 import { useRouterNavigate } from '../common/lib/kibana';
 import { ManageIntegrationLink } from './manage_integration_link';
+import { useOsqueryIntegrationStatus } from '../common/hooks';
+import { OsqueryAppEmptyState } from './empty_state';
 
 const OsqueryAppComponent = () => {
   const location = useLocation();
   const section = useMemo(() => location.pathname.split('/')[1] ?? 'overview', [location.pathname]);
+  const { data: osqueryIntegration, isFetched } = useOsqueryIntegrationStatus();
+
+  if (isFetched && osqueryIntegration.install_status !== 'installed') {
+    return <OsqueryAppEmptyState />;
+  }
 
   return (
     <Container>
diff --git a/x-pack/plugins/osquery/public/components/empty_state.tsx b/x-pack/plugins/osquery/public/components/empty_state.tsx
new file mode 100644
index 0000000000000..1ee0d496c0ddc
--- /dev/null
+++ b/x-pack/plugins/osquery/public/components/empty_state.tsx
@@ -0,0 +1,86 @@
+/*
+ * 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 React, { useCallback, useMemo } from 'react';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { EuiButton } from '@elastic/eui';
+
+import { KibanaPageTemplate } from '../../../../../src/plugins/kibana_react/public';
+import { INTEGRATIONS_PLUGIN_ID } from '../../../fleet/common';
+import { pagePathGetters } from '../../../fleet/public';
+import { isModifiedEvent, isLeftClickEvent, useKibana } from '../common/lib/kibana';
+import { OsqueryIcon } from './osquery_icon';
+import { useBreadcrumbs } from '../common/hooks/use_breadcrumbs';
+import { OSQUERY_INTEGRATION_NAME } from '../../common';
+
+const OsqueryAppEmptyStateComponent = () => {
+  useBreadcrumbs('base');
+
+  const {
+    application: { getUrlForApp, navigateToApp },
+  } = useKibana().services;
+
+  const integrationHref = useMemo(() => {
+    return getUrlForApp(INTEGRATIONS_PLUGIN_ID, {
+      path: pagePathGetters.integration_details_overview({
+        pkgkey: OSQUERY_INTEGRATION_NAME,
+      })[1],
+    });
+  }, [getUrlForApp]);
+
+  const integrationClick = useCallback(
+    (event) => {
+      if (!isModifiedEvent(event) && isLeftClickEvent(event)) {
+        event.preventDefault();
+        return navigateToApp(INTEGRATIONS_PLUGIN_ID, {
+          path: pagePathGetters.integration_details_overview({
+            pkgkey: OSQUERY_INTEGRATION_NAME,
+          })[1],
+        });
+      }
+    },
+    [navigateToApp]
+  );
+
+  const pageHeader = useMemo(
+    () => ({
+      iconType: OsqueryIcon,
+      pageTitle: (
+        <FormattedMessage
+          id="xpack.osquery.emptyState.pageTitle"
+          defaultMessage="Add Osquery Manager"
+        />
+      ),
+      description: (
+        <FormattedMessage
+          id="xpack.osquery.emptyState.pageDescription"
+          defaultMessage="Add this integration to run and schedule queries for Elastic Agent."
+        />
+      ),
+      rightSideItems: [
+        // eslint-disable-next-line @elastic/eui/href-or-on-click
+        <EuiButton
+          key="button"
+          fill
+          href={integrationHref}
+          onClick={integrationClick}
+          iconType="plusInCircleFilled"
+        >
+          <FormattedMessage
+            id="xpack.osquery.emptyState.addOsqueryManagerButton"
+            defaultMessage="Add Osquery Manager"
+          />
+        </EuiButton>,
+      ],
+    }),
+    [integrationClick, integrationHref]
+  );
+
+  return <KibanaPageTemplate isEmptyState={true} pageHeader={pageHeader} />;
+};
+
+export const OsqueryAppEmptyState = React.memo(OsqueryAppEmptyStateComponent);
diff --git a/x-pack/plugins/osquery/public/components/manage_integration_link.tsx b/x-pack/plugins/osquery/public/components/manage_integration_link.tsx
index 44b923860e1a8..32779ded46c50 100644
--- a/x-pack/plugins/osquery/public/components/manage_integration_link.tsx
+++ b/x-pack/plugins/osquery/public/components/manage_integration_link.tsx
@@ -24,11 +24,9 @@ const ManageIntegrationLinkComponent = () => {
   const integrationHref = useMemo(() => {
     if (osqueryIntegration) {
       return getUrlForApp(INTEGRATIONS_PLUGIN_ID, {
-        path:
-          '#' +
-          pagePathGetters.integration_details_policies({
-            pkgkey: `${osqueryIntegration.name}-${osqueryIntegration.version}`,
-          })[1],
+        path: pagePathGetters.integration_details_policies({
+          pkgkey: `${osqueryIntegration.name}-${osqueryIntegration.version}`,
+        })[1],
       });
     }
   }, [getUrlForApp, osqueryIntegration]);
@@ -39,11 +37,9 @@ const ManageIntegrationLinkComponent = () => {
         event.preventDefault();
         if (osqueryIntegration) {
           return navigateToApp(INTEGRATIONS_PLUGIN_ID, {
-            path:
-              '#' +
-              pagePathGetters.integration_details_policies({
-                pkgkey: `${osqueryIntegration.name}-${osqueryIntegration.version}`,
-              })[1],
+            path: pagePathGetters.integration_details_policies({
+              pkgkey: `${osqueryIntegration.name}-${osqueryIntegration.version}`,
+            })[1],
           });
         }
       }
diff --git a/x-pack/plugins/osquery/public/live_queries/form/index.tsx b/x-pack/plugins/osquery/public/live_queries/form/index.tsx
index 987be904c87e6..69b02dee8b9f7 100644
--- a/x-pack/plugins/osquery/public/live_queries/form/index.tsx
+++ b/x-pack/plugins/osquery/public/live_queries/form/index.tsx
@@ -114,7 +114,7 @@ const LiveQueryFormComponent: React.FC<LiveQueryFormProps> = ({
     ),
   });
 
-  const { setFieldValue, submit } = form;
+  const { setFieldValue, submit, isSubmitting } = form;
 
   const actionId = useMemo(() => data?.actions[0].action_id, [data?.actions]);
   const agentIds = useMemo(() => data?.actions[0].agents, [data?.actions]);
@@ -185,7 +185,10 @@ const LiveQueryFormComponent: React.FC<LiveQueryFormProps> = ({
             </EuiFlexItem>
           )}
           <EuiFlexItem grow={false}>
-            <EuiButton disabled={!agentSelected || !queryValueProvided} onClick={submit}>
+            <EuiButton
+              disabled={!agentSelected || !queryValueProvided || isSubmitting}
+              onClick={submit}
+            >
               <FormattedMessage
                 id="xpack.osquery.liveQueryForm.form.submitButtonLabel"
                 defaultMessage="Submit"
@@ -196,13 +199,14 @@ const LiveQueryFormComponent: React.FC<LiveQueryFormProps> = ({
       </>
     ),
     [
-      agentSelected,
-      permissions.writeSavedQueries,
-      handleShowSaveQueryFlout,
       queryComponentProps,
+      singleAgentMode,
+      permissions.writeSavedQueries,
+      agentSelected,
       queryValueProvided,
       resultsStatus,
-      singleAgentMode,
+      handleShowSaveQueryFlout,
+      isSubmitting,
       submit,
     ]
   );
diff --git a/x-pack/plugins/osquery/public/packs/common/add_pack_query.tsx b/x-pack/plugins/osquery/public/packs/common/add_pack_query.tsx
index 2d58e2dfe9522..d1115898b4e40 100644
--- a/x-pack/plugins/osquery/public/packs/common/add_pack_query.tsx
+++ b/x-pack/plugins/osquery/public/packs/common/add_pack_query.tsx
@@ -51,7 +51,7 @@ const AddPackQueryFormComponent = ({ handleSubmit }) => {
       },
     },
   });
-  const { submit } = form;
+  const { submit, isSubmitting } = form;
 
   const createSavedQueryMutation = useMutation(
     (payload) => http.post(`/internal/osquery/saved_query`, { body: JSON.stringify(payload) }),
@@ -108,7 +108,7 @@ const AddPackQueryFormComponent = ({ handleSubmit }) => {
         <EuiSpacer />
         <CommonUseField path="interval" />
         <EuiSpacer />
-        <EuiButton fill onClick={submit}>
+        <EuiButton isLoading={isSubmitting} fill onClick={submit}>
           {'Add query'}
         </EuiButton>
       </Form>
diff --git a/x-pack/plugins/osquery/public/packs/common/pack_form.tsx b/x-pack/plugins/osquery/public/packs/common/pack_form.tsx
index 86d4d8dff6ba6..ab0984e808943 100644
--- a/x-pack/plugins/osquery/public/packs/common/pack_form.tsx
+++ b/x-pack/plugins/osquery/public/packs/common/pack_form.tsx
@@ -40,7 +40,7 @@ const PackFormComponent = ({ data, handleSubmit }) => {
       },
     },
   });
-  const { submit } = form;
+  const { submit, isSubmitting } = form;
 
   return (
     <Form form={form}>
@@ -50,7 +50,7 @@ const PackFormComponent = ({ data, handleSubmit }) => {
       <EuiSpacer />
       <CommonUseField path="queries" component={PackQueriesField} />
       <EuiSpacer />
-      <EuiButton fill onClick={submit}>
+      <EuiButton isLoading={isSubmitting} fill onClick={submit}>
         {'Save pack'}
       </EuiButton>
     </Form>
diff --git a/x-pack/plugins/osquery/public/routes/saved_queries/edit/form.tsx b/x-pack/plugins/osquery/public/routes/saved_queries/edit/form.tsx
index a7596575b90c4..617d83821d08d 100644
--- a/x-pack/plugins/osquery/public/routes/saved_queries/edit/form.tsx
+++ b/x-pack/plugins/osquery/public/routes/saved_queries/edit/form.tsx
@@ -38,6 +38,7 @@ const EditSavedQueryFormComponent: React.FC<EditSavedQueryFormProps> = ({
     defaultValue,
     handleSubmit,
   });
+  const { submit, isSubmitting } = form;
 
   return (
     <Form form={form}>
@@ -58,12 +59,12 @@ const EditSavedQueryFormComponent: React.FC<EditSavedQueryFormProps> = ({
                   </EuiFlexItem>
                   <EuiFlexItem grow={false}>
                     <EuiButton
-                      // isLoading={isLoading}
+                      isLoading={isSubmitting}
                       color="primary"
                       fill
                       size="m"
                       iconType="save"
-                      onClick={form.submit}
+                      onClick={submit}
                     >
                       <FormattedMessage
                         id="xpack.osquery.editSavedQuery.form.updateQueryButtonLabel"
diff --git a/x-pack/plugins/osquery/public/routes/saved_queries/new/form.tsx b/x-pack/plugins/osquery/public/routes/saved_queries/new/form.tsx
index 31d0c5637cc3e..ec524086d586b 100644
--- a/x-pack/plugins/osquery/public/routes/saved_queries/new/form.tsx
+++ b/x-pack/plugins/osquery/public/routes/saved_queries/new/form.tsx
@@ -36,6 +36,7 @@ const NewSavedQueryFormComponent: React.FC<NewSavedQueryFormProps> = ({
     defaultValue,
     handleSubmit,
   });
+  const { submit, isSubmitting } = form;
 
   return (
     <Form form={form}>
@@ -54,12 +55,12 @@ const NewSavedQueryFormComponent: React.FC<NewSavedQueryFormProps> = ({
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiButton
-                  // isLoading={isLoading}
+                  isLoading={isSubmitting}
                   color="primary"
                   fill
                   size="m"
                   iconType="save"
-                  onClick={form.submit}
+                  onClick={submit}
                 >
                   <FormattedMessage
                     id="xpack.osquery.addSavedQuery.form.saveQueryButtonLabel"
diff --git a/x-pack/plugins/osquery/public/routes/scheduled_query_groups/edit/index.tsx b/x-pack/plugins/osquery/public/routes/scheduled_query_groups/edit/index.tsx
index 0d63dba2fd1e6..7d816d3c4f7d4 100644
--- a/x-pack/plugins/osquery/public/routes/scheduled_query_groups/edit/index.tsx
+++ b/x-pack/plugins/osquery/public/routes/scheduled_query_groups/edit/index.tsx
@@ -25,7 +25,10 @@ const EditScheduledQueryGroupPageComponent = () => {
 
   const { data } = useScheduledQueryGroup({ scheduledQueryGroupId });
 
-  useBreadcrumbs('scheduled_query_group_edit', { scheduledQueryGroupName: data?.name ?? '' });
+  useBreadcrumbs('scheduled_query_group_edit', {
+    scheduledQueryGroupId: data?.id ?? '',
+    scheduledQueryGroupName: data?.name ?? '',
+  });
 
   const LeftColumn = useMemo(
     () => (
diff --git a/x-pack/plugins/osquery/public/saved_queries/constants.ts b/x-pack/plugins/osquery/public/saved_queries/constants.ts
index 69ca805e3e8fa..8edcfd00d1788 100644
--- a/x-pack/plugins/osquery/public/saved_queries/constants.ts
+++ b/x-pack/plugins/osquery/public/saved_queries/constants.ts
@@ -6,3 +6,4 @@
  */
 
 export const SAVED_QUERIES_ID = 'savedQueryList';
+export const SAVED_QUERY_ID = 'savedQuery';
diff --git a/x-pack/plugins/osquery/public/saved_queries/saved_query_flyout.tsx b/x-pack/plugins/osquery/public/saved_queries/saved_query_flyout.tsx
index 6d14943a6bc84..8c35a359a9baf 100644
--- a/x-pack/plugins/osquery/public/saved_queries/saved_query_flyout.tsx
+++ b/x-pack/plugins/osquery/public/saved_queries/saved_query_flyout.tsx
@@ -42,6 +42,7 @@ const SavedQueryFlyoutComponent: React.FC<AddQueryFlyoutProps> = ({ defaultValue
     defaultValue,
     handleSubmit,
   });
+  const { submit, isSubmitting } = form;
 
   return (
     <EuiPortal>
@@ -72,7 +73,7 @@ const SavedQueryFlyoutComponent: React.FC<AddQueryFlyoutProps> = ({ defaultValue
               </EuiButtonEmpty>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <EuiButton onClick={form.submit} fill>
+              <EuiButton isLoading={isSubmitting} onClick={submit} fill>
                 <FormattedMessage
                   id="xpack.osquery.scheduledQueryGroup.queryFlyoutForm.saveButtonLabel"
                   defaultMessage="Save"
diff --git a/x-pack/plugins/osquery/public/saved_queries/use_saved_query.ts b/x-pack/plugins/osquery/public/saved_queries/use_saved_query.ts
index 92662cd24fd20..5b736c2cb3217 100644
--- a/x-pack/plugins/osquery/public/saved_queries/use_saved_query.ts
+++ b/x-pack/plugins/osquery/public/saved_queries/use_saved_query.ts
@@ -12,8 +12,7 @@ import { useKibana } from '../common/lib/kibana';
 import { savedQuerySavedObjectType } from '../../common/types';
 import { pagePathGetters } from '../common/page_paths';
 import { useErrorToast } from '../common/hooks/use_error_toast';
-
-export const SAVED_QUERY_ID = 'savedQuery';
+import { SAVED_QUERY_ID } from './constants';
 
 interface UseSavedQueryProps {
   savedQueryId: string;
diff --git a/x-pack/plugins/osquery/public/saved_queries/use_update_saved_query.ts b/x-pack/plugins/osquery/public/saved_queries/use_update_saved_query.ts
index 45b7a4c2d6b9a..954b984d0c312 100644
--- a/x-pack/plugins/osquery/public/saved_queries/use_update_saved_query.ts
+++ b/x-pack/plugins/osquery/public/saved_queries/use_update_saved_query.ts
@@ -12,7 +12,7 @@ import { useKibana } from '../common/lib/kibana';
 import { savedQuerySavedObjectType } from '../../common/types';
 import { PLUGIN_ID } from '../../common';
 import { pagePathGetters } from '../common/page_paths';
-import { SAVED_QUERIES_ID } from './constants';
+import { SAVED_QUERIES_ID, SAVED_QUERY_ID } from './constants';
 import { useErrorToast } from '../common/hooks/use_error_toast';
 
 interface UseUpdateSavedQueryProps {
@@ -74,6 +74,7 @@ export const useUpdateSavedQuery = ({ savedQueryId }: UseUpdateSavedQueryProps)
       },
       onSuccess: (payload) => {
         queryClient.invalidateQueries(SAVED_QUERIES_ID);
+        queryClient.invalidateQueries([SAVED_QUERY_ID, { savedQueryId }]);
         navigateToApp(PLUGIN_ID, { path: pagePathGetters.saved_queries() });
         toasts.addSuccess(
           i18n.translate('xpack.osquery.editSavedQuery.successToastMessageText', {
diff --git a/x-pack/plugins/osquery/public/scheduled_query_groups/form/index.tsx b/x-pack/plugins/osquery/public/scheduled_query_groups/form/index.tsx
index 685960ecd202e..3598a9fd2e44c 100644
--- a/x-pack/plugins/osquery/public/scheduled_query_groups/form/index.tsx
+++ b/x-pack/plugins/osquery/public/scheduled_query_groups/form/index.tsx
@@ -88,7 +88,7 @@ const ScheduledQueryGroupFormComponent: React.FC<ScheduledQueryGroupFormProps> =
     `scheduled_query_groups/${editMode ? defaultValue?.id : ''}`
   );
 
-  const { isLoading, mutateAsync } = useMutation(
+  const { mutateAsync } = useMutation(
     (payload: Record<string, unknown>) =>
       editMode && defaultValue?.id
         ? http.put(packagePolicyRouteService.getUpdatePath(defaultValue.id), {
@@ -248,7 +248,7 @@ const ScheduledQueryGroupFormComponent: React.FC<ScheduledQueryGroupFormProps> =
     ),
   });
 
-  const { setFieldValue, submit } = form;
+  const { setFieldValue, submit, isSubmitting } = form;
 
   const policyIdEuiFieldProps = useMemo(
     () => ({ isDisabled: !!defaultValue, options: agentPolicyOptions }),
@@ -368,7 +368,7 @@ const ScheduledQueryGroupFormComponent: React.FC<ScheduledQueryGroupFormProps> =
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
                 <EuiButton
-                  isLoading={isLoading}
+                  isLoading={isSubmitting}
                   color="primary"
                   fill
                   size="m"
diff --git a/x-pack/plugins/osquery/public/scheduled_query_groups/queries/ecs_mapping_editor_field.tsx b/x-pack/plugins/osquery/public/scheduled_query_groups/queries/ecs_mapping_editor_field.tsx
index bc0cca85f6d87..3b19176d0f581 100644
--- a/x-pack/plugins/osquery/public/scheduled_query_groups/queries/ecs_mapping_editor_field.tsx
+++ b/x-pack/plugins/osquery/public/scheduled_query_groups/queries/ecs_mapping_editor_field.tsx
@@ -342,7 +342,8 @@ const getEcsFieldValidator = (editForm: boolean) => (
     )
   )(args);
 
-  if (fieldRequiredError && (!!(!editForm && args.formData.value?.field.length) || editForm)) {
+  // @ts-expect-error update types
+  if (fieldRequiredError && ((!editForm && args.formData['value.field'].length) || editForm)) {
     return fieldRequiredError;
   }
 
diff --git a/x-pack/plugins/osquery/public/scheduled_query_groups/queries/query_flyout.tsx b/x-pack/plugins/osquery/public/scheduled_query_groups/queries/query_flyout.tsx
index cae9711694f29..d38c1b2118f24 100644
--- a/x-pack/plugins/osquery/public/scheduled_query_groups/queries/query_flyout.tsx
+++ b/x-pack/plugins/osquery/public/scheduled_query_groups/queries/query_flyout.tsx
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { isEmpty } from 'lodash';
 import {
   EuiCallOut,
   EuiFlyout,
@@ -66,7 +67,7 @@ const QueryFlyoutComponent: React.FC<QueryFlyoutProps> = ({
         if (isValid && ecsFieldValue) {
           onSave({
             ...payload,
-            ecs_mapping: ecsFieldValue,
+            ...(isEmpty(ecsFieldValue) ? {} : { ecs_mapping: ecsFieldValue }),
           });
           onClose();
         }
@@ -81,7 +82,7 @@ const QueryFlyoutComponent: React.FC<QueryFlyoutProps> = ({
     [integrationPackageVersion]
   );
 
-  const { submit, setFieldValue, reset } = form;
+  const { submit, setFieldValue, reset, isSubmitting } = form;
 
   const [{ query }] = useFormData({
     form,
@@ -245,7 +246,7 @@ const QueryFlyoutComponent: React.FC<QueryFlyoutProps> = ({
             </EuiButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton onClick={submit} fill>
+            <EuiButton isLoading={isSubmitting} onClick={submit} fill>
               <FormattedMessage
                 id="xpack.osquery.scheduledQueryGroup.queryFlyoutForm.saveButtonLabel"
                 defaultMessage="Save"
diff --git a/x-pack/plugins/osquery/public/scheduled_query_groups/scheduled_query_group_queries_status_table.tsx b/x-pack/plugins/osquery/public/scheduled_query_groups/scheduled_query_group_queries_status_table.tsx
index 35344f2503eb5..f94b4ba1f8592 100644
--- a/x-pack/plugins/osquery/public/scheduled_query_groups/scheduled_query_group_queries_status_table.tsx
+++ b/x-pack/plugins/osquery/public/scheduled_query_groups/scheduled_query_group_queries_status_table.tsx
@@ -21,14 +21,14 @@ import {
   EuiPanel,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
+import { FormattedMessage, FormattedDate, FormattedTime, FormattedRelative } from '@kbn/i18n/react';
 
-import moment from 'moment-timezone';
 import {
   TypedLensByValueInput,
   PersistedIndexPatternLayer,
   PieVisualizationState,
 } from '../../../lens/public';
-import { FilterStateStore } from '../../../../../src/plugins/data/common';
+import { FilterStateStore, IndexPattern } from '../../../../../src/plugins/data/common';
 import { useKibana, isModifiedEvent, isLeftClickEvent } from '../common/lib/kibana';
 import { OsqueryManagerPackagePolicyInputStream } from '../../common/types';
 import { ScheduledQueryErrorsTable } from './scheduled_query_errors_table';
@@ -391,16 +391,21 @@ const ScheduledQueryLastResults: React.FC<ScheduledQueryLastResultsProps> = ({
   toggleErrors,
   expanded,
 }) => {
+  const data = useKibana().services.data;
+  const [logsIndexPattern, setLogsIndexPattern] = useState<IndexPattern | undefined>(undefined);
+
   const { data: lastResultsData, isFetched } = useScheduledQueryGroupQueryLastResults({
     actionId,
     agentIds,
     interval,
+    logsIndexPattern,
   });
 
   const { data: errorsData, isFetched: errorsFetched } = useScheduledQueryGroupQueryErrors({
     actionId,
     agentIds,
     interval,
+    logsIndexPattern,
   });
 
   const handleErrorsToggle = useCallback(() => toggleErrors({ queryId, interval }), [
@@ -409,20 +414,41 @@ const ScheduledQueryLastResults: React.FC<ScheduledQueryLastResultsProps> = ({
     toggleErrors,
   ]);
 
+  useEffect(() => {
+    const fetchLogsIndexPattern = async () => {
+      const indexPattern = await data.indexPatterns.find('logs-*');
+
+      setLogsIndexPattern(indexPattern[0]);
+    };
+    fetchLogsIndexPattern();
+  }, [data.indexPatterns]);
+
   if (!isFetched || !errorsFetched) {
     return <EuiLoadingSpinner />;
   }
 
-  if (!lastResultsData) {
+  if (!lastResultsData && !errorsData?.total) {
     return <>{'-'}</>;
   }
 
   return (
     <EuiFlexGroup gutterSize="s" alignItems="center">
       <EuiFlexItem grow={4}>
-        {lastResultsData.first_event_ingested_time?.value ? (
-          <EuiToolTip content={lastResultsData.first_event_ingested_time?.value}>
-            <>{moment(lastResultsData.first_event_ingested_time?.value).fromNow()}</>
+        {lastResultsData?.['@timestamp'] ? (
+          <EuiToolTip
+            content={
+              <>
+                <FormattedDate
+                  value={lastResultsData['@timestamp']}
+                  year="numeric"
+                  month="short"
+                  day="2-digit"
+                />{' '}
+                <FormattedTime value={lastResultsData['@timestamp']} timeZoneName="short" />
+              </>
+            }
+          >
+            <FormattedRelative value={lastResultsData['@timestamp']} />
           </EuiToolTip>
         ) : (
           '-'
@@ -432,10 +458,17 @@ const ScheduledQueryLastResults: React.FC<ScheduledQueryLastResultsProps> = ({
         <EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="flexEnd">
           <EuiFlexItem grow={false}>
             <EuiNotificationBadge color="subdued">
-              {lastResultsData?.doc_count ?? 0}
+              {lastResultsData?.docCount ?? 0}
             </EuiNotificationBadge>
           </EuiFlexItem>
-          <EuiFlexItem grow={false}>{'Documents'}</EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <FormattedMessage
+              id="xpack.osquery.queriesStatusTable.documentLabelText"
+              defaultMessage="{count, plural, one {Document} other {Documents}}"
+              // eslint-disable-next-line react-perf/jsx-no-new-object-as-prop
+              values={{ count: lastResultsData?.docCount as number }}
+            />
+          </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
 
@@ -443,10 +476,17 @@ const ScheduledQueryLastResults: React.FC<ScheduledQueryLastResultsProps> = ({
         <EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="flexEnd">
           <EuiFlexItem grow={false}>
             <EuiNotificationBadge color="subdued">
-              {lastResultsData?.unique_agents?.value ?? 0}
+              {lastResultsData?.uniqueAgentsCount ?? 0}
             </EuiNotificationBadge>
           </EuiFlexItem>
-          <EuiFlexItem grow={false}>{'Agents'}</EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <FormattedMessage
+              id="xpack.osquery.queriesStatusTable.agentsLabelText"
+              defaultMessage="{count, plural, one {Agent} other {Agents}}"
+              // eslint-disable-next-line react-perf/jsx-no-new-object-as-prop
+              values={{ count: agentIds?.length }}
+            />
+          </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlexItem>
 
@@ -458,7 +498,15 @@ const ScheduledQueryLastResults: React.FC<ScheduledQueryLastResultsProps> = ({
             </EuiNotificationBadge>
           </EuiFlexItem>
 
-          <EuiFlexItem grow={false}>{'Errors'}</EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            {' '}
+            <FormattedMessage
+              id="xpack.osquery.queriesStatusTable.errorsLabelText"
+              defaultMessage="{count, plural, one {Error} other {Errors}}"
+              // eslint-disable-next-line react-perf/jsx-no-new-object-as-prop
+              values={{ count: errorsData?.total as number }}
+            />
+          </EuiFlexItem>
 
           <EuiFlexItem grow={false}>
             <EuiButtonIcon
diff --git a/x-pack/plugins/osquery/public/scheduled_query_groups/use_scheduled_query_group_query_errors.ts b/x-pack/plugins/osquery/public/scheduled_query_groups/use_scheduled_query_group_query_errors.ts
index 64e5a20de68c4..338d97f8801c8 100644
--- a/x-pack/plugins/osquery/public/scheduled_query_groups/use_scheduled_query_group_query_errors.ts
+++ b/x-pack/plugins/osquery/public/scheduled_query_groups/use_scheduled_query_group_query_errors.ts
@@ -6,7 +6,7 @@
  */
 
 import { useQuery } from 'react-query';
-import { SortDirection } from '../../../../../src/plugins/data/common';
+import { IndexPattern, SortDirection } from '../../../../../src/plugins/data/common';
 
 import { useKibana } from '../common/lib/kibana';
 
@@ -14,6 +14,7 @@ interface UseScheduledQueryGroupQueryErrorsProps {
   actionId: string;
   agentIds?: string[];
   interval: number;
+  logsIndexPattern?: IndexPattern;
   skip?: boolean;
 }
 
@@ -21,6 +22,7 @@ export const useScheduledQueryGroupQueryErrors = ({
   actionId,
   agentIds,
   interval,
+  logsIndexPattern,
   skip = false,
 }: UseScheduledQueryGroupQueryErrorsProps) => {
   const data = useKibana().services.data;
@@ -28,9 +30,8 @@ export const useScheduledQueryGroupQueryErrors = ({
   return useQuery(
     ['scheduledQueryErrors', { actionId, interval }],
     async () => {
-      const indexPattern = await data.indexPatterns.find('logs-*');
       const searchSource = await data.search.searchSource.create({
-        index: indexPattern[0],
+        index: logsIndexPattern,
         fields: ['*'],
         sort: [
           {
@@ -80,7 +81,7 @@ export const useScheduledQueryGroupQueryErrors = ({
     },
     {
       keepPreviousData: true,
-      enabled: !!(!skip && actionId && interval && agentIds?.length),
+      enabled: !!(!skip && actionId && interval && agentIds?.length && logsIndexPattern),
       select: (response) => response.rawResponse.hits ?? [],
       refetchOnReconnect: false,
       refetchOnWindowFocus: false,
diff --git a/x-pack/plugins/osquery/public/scheduled_query_groups/use_scheduled_query_group_query_last_results.ts b/x-pack/plugins/osquery/public/scheduled_query_groups/use_scheduled_query_group_query_last_results.ts
index f972640e25986..7cfd6be461e05 100644
--- a/x-pack/plugins/osquery/public/scheduled_query_groups/use_scheduled_query_group_query_last_results.ts
+++ b/x-pack/plugins/osquery/public/scheduled_query_groups/use_scheduled_query_group_query_last_results.ts
@@ -6,13 +6,14 @@
  */
 
 import { useQuery } from 'react-query';
-
+import { IndexPattern } from '../../../../../src/plugins/data/common';
 import { useKibana } from '../common/lib/kibana';
 
 interface UseScheduledQueryGroupQueryLastResultsProps {
   actionId: string;
   agentIds?: string[];
   interval: number;
+  logsIndexPattern?: IndexPattern;
   skip?: boolean;
 }
 
@@ -20,6 +21,7 @@ export const useScheduledQueryGroupQueryLastResults = ({
   actionId,
   agentIds,
   interval,
+  logsIndexPattern,
   skip = false,
 }: UseScheduledQueryGroupQueryLastResultsProps) => {
   const data = useKibana().services.data;
@@ -27,23 +29,9 @@ export const useScheduledQueryGroupQueryLastResults = ({
   return useQuery(
     ['scheduledQueryLastResults', { actionId }],
     async () => {
-      const indexPattern = await data.indexPatterns.find('logs-*');
-      const searchSource = await data.search.searchSource.create({
-        index: indexPattern[0],
-        size: 0,
-        aggs: {
-          runs: {
-            terms: {
-              field: 'response_id',
-              order: { first_event_ingested_time: 'desc' },
-              size: 1,
-            },
-            aggs: {
-              first_event_ingested_time: { min: { field: '@timestamp' } },
-              unique_agents: { cardinality: { field: 'agent.id' } },
-            },
-          },
-        },
+      const lastResultsSearchSource = await data.search.searchSource.create({
+        index: logsIndexPattern,
+        size: 1,
         query: {
           // @ts-expect-error update types
           bool: {
@@ -59,26 +47,62 @@ export const useScheduledQueryGroupQueryLastResults = ({
                   action_id: actionId,
                 },
               },
-              {
-                range: {
-                  '@timestamp': {
-                    gte: `now-${interval * 2}s`,
-                    lte: 'now',
-                  },
-                },
-              },
             ],
           },
         },
       });
 
-      return searchSource.fetch$().toPromise();
+      const lastResultsResponse = await lastResultsSearchSource.fetch$().toPromise();
+
+      const responseId = lastResultsResponse.rawResponse?.hits?.hits[0]?._source?.response_id;
+
+      if (responseId) {
+        const aggsSearchSource = await data.search.searchSource.create({
+          index: logsIndexPattern,
+          size: 0,
+          aggs: {
+            unique_agents: { cardinality: { field: 'agent.id' } },
+          },
+          query: {
+            // @ts-expect-error update types
+            bool: {
+              should: agentIds?.map((agentId) => ({
+                match_phrase: {
+                  'agent.id': agentId,
+                },
+              })),
+              minimum_should_match: 1,
+              filter: [
+                {
+                  match_phrase: {
+                    action_id: actionId,
+                  },
+                },
+                {
+                  match_phrase: {
+                    response_id: responseId,
+                  },
+                },
+              ],
+            },
+          },
+        });
+
+        const aggsResponse = await aggsSearchSource.fetch$().toPromise();
+
+        return {
+          '@timestamp': lastResultsResponse.rawResponse?.hits?.hits[0]?.fields?.['@timestamp'],
+          // @ts-expect-error update types
+          uniqueAgentsCount: aggsResponse.rawResponse.aggregations?.unique_agents?.value,
+          docCount: aggsResponse.rawResponse?.hits?.total,
+        };
+      }
+
+      return null;
     },
     {
       keepPreviousData: true,
-      enabled: !!(!skip && actionId && interval && agentIds?.length),
-      // @ts-expect-error update types
-      select: (response) => response.rawResponse.aggregations?.runs?.buckets[0] ?? [],
+      enabled: !!(!skip && actionId && interval && agentIds?.length && logsIndexPattern),
       refetchOnReconnect: false,
       refetchOnWindowFocus: false,
     }
diff --git a/x-pack/plugins/osquery/server/routes/privileges_check/privileges_check_route.ts b/x-pack/plugins/osquery/server/routes/privileges_check/privileges_check_route.ts
index 80c335c1c46d3..d9683d23deb13 100644
--- a/x-pack/plugins/osquery/server/routes/privileges_check/privileges_check_route.ts
+++ b/x-pack/plugins/osquery/server/routes/privileges_check/privileges_check_route.ts
@@ -9,7 +9,6 @@ import { OSQUERY_INTEGRATION_NAME, PLUGIN_ID } from '../../../common';
 import { IRouter } from '../../../../../../src/core/server';
 import { OsqueryAppContext } from '../../lib/osquery_app_context_services';
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const privilegesCheckRoute = (router: IRouter, osqueryContext: OsqueryAppContext) => {
   router.get(
     {
@@ -20,23 +19,26 @@ export const privilegesCheckRoute = (router: IRouter, osqueryContext: OsqueryApp
       },
     },
     async (context, request, response) => {
-      const esClient = context.core.elasticsearch.client.asCurrentUser;
-
-      const privileges = (
-        await esClient.security.hasPrivileges({
-          body: {
-            index: [
-              {
-                names: [`logs-${OSQUERY_INTEGRATION_NAME}.result*`],
-                privileges: ['read'],
-              },
-            ],
+      if (osqueryContext.security.authz.mode.useRbacForRequest(request)) {
+        const checkPrivileges = osqueryContext.security.authz.checkPrivilegesDynamicallyWithRequest(
+          request
+        );
+        const { hasAllRequested } = await checkPrivileges({
+          elasticsearch: {
+            cluster: [],
+            index: {
+              [`logs-${OSQUERY_INTEGRATION_NAME}.result*`]: ['read'],
+            },
           },
-        })
-      ).body;
+        });
+
+        return response.ok({
+          body: `${hasAllRequested}`,
+        });
+      }
 
       return response.ok({
-        body: privileges,
+        body: 'true',
       });
     }
   );
diff --git a/x-pack/plugins/reporting/common/build_kibana_path.ts b/x-pack/plugins/reporting/common/build_kibana_path.ts
new file mode 100644
index 0000000000000..2cb37013300ca
--- /dev/null
+++ b/x-pack/plugins/reporting/common/build_kibana_path.ts
@@ -0,0 +1,18 @@
+/*
+ * 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.
+ */
+
+interface Args {
+  basePath: string;
+  appPath: string;
+  spaceId?: string;
+}
+
+export const buildKibanaPath = ({ basePath, appPath, spaceId }: Args) => {
+  return spaceId === undefined || spaceId.toLowerCase() === 'default'
+    ? `${basePath}${appPath}`
+    : `${basePath}/s/${spaceId}${appPath}`;
+};
diff --git a/x-pack/plugins/reporting/common/constants.ts b/x-pack/plugins/reporting/common/constants.ts
index 0e7d8f1ffe9ca..9224a23fcb33f 100644
--- a/x-pack/plugins/reporting/common/constants.ts
+++ b/x-pack/plugins/reporting/common/constants.ts
@@ -110,12 +110,10 @@ export const REPORTING_REDIRECT_LOCATOR_STORE_KEY = '__REPORTING_REDIRECT_LOCATO
 /**
  * A way to get the client side route for the reporting redirect app.
  *
- * This route currently expects a job ID and a locator that to use from that job so that it can redirect to the
- * correct page.
- *
- * TODO: Accommodate 'forceNow' value that some visualizations may rely on
+ * TODO: Add a job ID and a locator to use so that we can redirect without expecting state to
+ * be injected to the page
  */
-export const getRedirectAppPathHome = () => {
+export const getRedirectAppPath = () => {
   return '/app/management/insightsAndAlerting/reporting/r';
 };
 
diff --git a/x-pack/plugins/reporting/public/redirect/redirect_app.tsx b/x-pack/plugins/reporting/public/redirect/redirect_app.tsx
index 60b51c0f07895..3024404dc07bf 100644
--- a/x-pack/plugins/reporting/public/redirect/redirect_app.tsx
+++ b/x-pack/plugins/reporting/public/redirect/redirect_app.tsx
@@ -49,7 +49,7 @@ export const RedirectApp: FunctionComponent<Props> = ({ share }) => {
       ];
 
       if (!locatorParams) {
-        throw new Error('Could not find locator for report');
+        throw new Error('Could not find locator params for report');
       }
 
       share.navigate(locatorParams);
diff --git a/x-pack/plugins/reporting/server/browsers/chromium/driver/chromium_driver.ts b/x-pack/plugins/reporting/server/browsers/chromium/driver/chromium_driver.ts
index f14bb249524e2..df91b6fe0ba47 100644
--- a/x-pack/plugins/reporting/server/browsers/chromium/driver/chromium_driver.ts
+++ b/x-pack/plugins/reporting/server/browsers/chromium/driver/chromium_driver.ts
@@ -121,7 +121,7 @@ export class HeadlessChromiumDriver {
         (key: string, value: unknown) => {
           Object.defineProperty(window, key, {
             configurable: false,
-            writable: false,
+            writable: true,
             enumerable: true,
             value,
           });
diff --git a/x-pack/plugins/reporting/server/export_types/common/v2/get_full_redirect_app_url.ts b/x-pack/plugins/reporting/server/export_types/common/v2/get_full_redirect_app_url.ts
new file mode 100644
index 0000000000000..bb640eff667e9
--- /dev/null
+++ b/x-pack/plugins/reporting/server/export_types/common/v2/get_full_redirect_app_url.ts
@@ -0,0 +1,33 @@
+/*
+ * 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 { format } from 'url';
+import { ReportingConfig } from '../../..';
+import { getRedirectAppPath } from '../../../../common/constants';
+import { buildKibanaPath } from '../../../../common/build_kibana_path';
+
+export function getFullRedirectAppUrl(config: ReportingConfig, spaceId?: string) {
+  const [basePath, protocol, hostname, port] = [
+    config.kbnConfig.get('server', 'basePath'),
+    config.get('kibanaServer', 'protocol'),
+    config.get('kibanaServer', 'hostname'),
+    config.get('kibanaServer', 'port'),
+  ] as string[];
+
+  const path = buildKibanaPath({
+    basePath,
+    spaceId,
+    appPath: getRedirectAppPath(),
+  });
+
+  return format({
+    protocol,
+    hostname,
+    port,
+    pathname: path,
+  });
+}
diff --git a/x-pack/plugins/reporting/server/export_types/common/v2/get_full_urls.ts b/x-pack/plugins/reporting/server/export_types/common/v2/get_full_urls.ts
deleted file mode 100644
index bcfb06784a6dc..0000000000000
--- a/x-pack/plugins/reporting/server/export_types/common/v2/get_full_urls.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/*
- * 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 { parse as urlParse, UrlWithStringQuery } from 'url';
-import { ReportingConfig } from '../../../';
-import { getAbsoluteUrlFactory } from '../get_absolute_url';
-import { validateUrls } from '../validate_urls';
-
-export function getFullUrls(config: ReportingConfig, relativeUrls: string[]) {
-  const [basePath, protocol, hostname, port] = [
-    config.kbnConfig.get('server', 'basePath'),
-    config.get('kibanaServer', 'protocol'),
-    config.get('kibanaServer', 'hostname'),
-    config.get('kibanaServer', 'port'),
-  ] as string[];
-  const getAbsoluteUrl = getAbsoluteUrlFactory({ basePath, protocol, hostname, port });
-
-  validateUrls(relativeUrls);
-
-  const urls = relativeUrls.map((relativeUrl) => {
-    const parsedRelative: UrlWithStringQuery = urlParse(relativeUrl);
-    return getAbsoluteUrl({
-      path: parsedRelative.pathname === null ? undefined : parsedRelative.pathname,
-      hash: parsedRelative.hash === null ? undefined : parsedRelative.hash,
-      search: parsedRelative.search === null ? undefined : parsedRelative.search,
-    });
-  });
-
-  return urls;
-}
diff --git a/x-pack/plugins/reporting/server/export_types/png_v2/execute_job.ts b/x-pack/plugins/reporting/server/export_types/png_v2/execute_job.ts
index 06fdcd93e497c..5e3b3117f4bb5 100644
--- a/x-pack/plugins/reporting/server/export_types/png_v2/execute_job.ts
+++ b/x-pack/plugins/reporting/server/export_types/png_v2/execute_job.ts
@@ -8,7 +8,7 @@
 import apm from 'elastic-apm-node';
 import * as Rx from 'rxjs';
 import { catchError, finalize, map, mergeMap, takeUntil, tap } from 'rxjs/operators';
-import { PNG_JOB_TYPE_V2, getRedirectAppPathHome } from '../../../common/constants';
+import { PNG_JOB_TYPE_V2 } from '../../../common/constants';
 import { TaskRunResult } from '../../lib/tasks';
 import { RunTaskFn, RunTaskFnFactory } from '../../types';
 import {
@@ -18,7 +18,7 @@ import {
   generatePngObservableFactory,
   setForceNow,
 } from '../common';
-import { getFullUrls } from '../common/v2/get_full_urls';
+import { getFullRedirectAppUrl } from '../common/v2/get_full_redirect_app_url';
 import { TaskPayloadPNGV2 } from './types';
 
 export const runTaskFnFactory: RunTaskFnFactory<
@@ -39,8 +39,7 @@ export const runTaskFnFactory: RunTaskFnFactory<
       map((decryptedHeaders) => omitBlockedHeaders(decryptedHeaders)),
       map((filteredHeaders) => getConditionalHeaders(config, filteredHeaders)),
       mergeMap((conditionalHeaders) => {
-        const relativeUrl = getRedirectAppPathHome();
-        const [url] = getFullUrls(config, [relativeUrl]);
+        const url = getFullRedirectAppUrl(config, job.spaceId);
         const [locatorParams] = job.locatorParams.map(setForceNow(job.forceNow));
 
         apmGetAssets?.end();
diff --git a/x-pack/plugins/reporting/server/export_types/printable_pdf_v2/execute_job.ts b/x-pack/plugins/reporting/server/export_types/printable_pdf_v2/execute_job.ts
index 2211e7df08770..f2cf8026c901e 100644
--- a/x-pack/plugins/reporting/server/export_types/printable_pdf_v2/execute_job.ts
+++ b/x-pack/plugins/reporting/server/export_types/printable_pdf_v2/execute_job.ts
@@ -49,7 +49,7 @@ export const runTaskFnFactory: RunTaskFnFactory<
         apmGeneratePdf = apmTrans?.startSpan('generate_pdf_pipeline', 'execute');
         return generatePdfObservable(
           jobLogger,
-          jobId,
+          job,
           title,
           locatorParams.map(setForceNow(job.forceNow)),
           browserTimezone,
diff --git a/x-pack/plugins/reporting/server/export_types/printable_pdf_v2/lib/generate_pdf.ts b/x-pack/plugins/reporting/server/export_types/printable_pdf_v2/lib/generate_pdf.ts
index 9be95223a8864..424a347876a1d 100644
--- a/x-pack/plugins/reporting/server/export_types/printable_pdf_v2/lib/generate_pdf.ts
+++ b/x-pack/plugins/reporting/server/export_types/printable_pdf_v2/lib/generate_pdf.ts
@@ -9,14 +9,14 @@ import { groupBy, zip } from 'lodash';
 import * as Rx from 'rxjs';
 import { mergeMap } from 'rxjs/operators';
 import { ReportingCore } from '../../../';
-import { getRedirectAppPathHome } from '../../../../common/constants';
 import { LocatorParams, UrlOrUrlLocatorTuple } from '../../../../common/types';
 import { LevelLogger } from '../../../lib';
 import { createLayout, LayoutParams } from '../../../lib/layouts';
 import { getScreenshots$, ScreenshotResults } from '../../../lib/screenshots';
 import { ConditionalHeaders } from '../../common';
 import { PdfMaker } from '../../common/pdf';
-import { getFullUrls } from '../../common/v2/get_full_urls';
+import { getFullRedirectAppUrl } from '../../common/v2/get_full_redirect_app_url';
+import type { TaskPayloadPDFV2 } from '../types';
 import { getTracker } from './tracker';
 
 const getTimeRange = (urlScreenshots: ScreenshotResults[]) => {
@@ -36,7 +36,7 @@ export async function generatePdfObservableFactory(reporting: ReportingCore) {
 
   return function generatePdfObservable(
     logger: LevelLogger,
-    jobId: string,
+    job: TaskPayloadPDFV2,
     title: string,
     locatorParams: LocatorParams[],
     browserTimezone: string | undefined,
@@ -56,9 +56,7 @@ export async function generatePdfObservableFactory(reporting: ReportingCore) {
     /**
      * For each locator we get the relative URL to the redirect app
      */
-    const relativeUrls = locatorParams.map(() => getRedirectAppPathHome());
-    const urls = getFullUrls(reporting.getConfig(), relativeUrls);
-
+    const urls = locatorParams.map(() => getFullRedirectAppUrl(reporting.getConfig(), job.spaceId));
     const screenshots$ = getScreenshots$(captureConfig, browserDriverFactory, {
       logger,
       urlsOrUrlLocatorTuples: zip(urls, locatorParams) as UrlOrUrlLocatorTuple[],
diff --git a/x-pack/plugins/security_solution/cypress/objects/connector.ts b/x-pack/plugins/security_solution/cypress/objects/connector.ts
index a5244583bf494..5c2abeab06026 100644
--- a/x-pack/plugins/security_solution/cypress/objects/connector.ts
+++ b/x-pack/plugins/security_solution/cypress/objects/connector.ts
@@ -12,6 +12,7 @@ export interface EmailConnector {
   port: string;
   user: string;
   password: string;
+  service: string;
 }
 
 export const getEmailConnector = (): EmailConnector => ({
@@ -21,4 +22,5 @@ export const getEmailConnector = (): EmailConnector => ({
   port: '80',
   user: 'username',
   password: 'password',
+  service: 'Other',
 });
diff --git a/x-pack/plugins/security_solution/cypress/screens/create_new_rule.ts b/x-pack/plugins/security_solution/cypress/screens/create_new_rule.ts
index 551857ca3bfca..4748a48dbeb11 100644
--- a/x-pack/plugins/security_solution/cypress/screens/create_new_rule.ts
+++ b/x-pack/plugins/security_solution/cypress/screens/create_new_rule.ts
@@ -40,6 +40,8 @@ export const EMAIL_CONNECTOR_USER_INPUT = '[data-test-subj="emailUserInput"]';
 
 export const EMAIL_CONNECTOR_PASSWORD_INPUT = '[data-test-subj="emailPasswordInput"]';
 
+export const EMAIL_CONNECTOR_SERVICE_SELECTOR = '[data-test-subj="emailServiceSelectInput"]';
+
 export const ADD_FALSE_POSITIVE_BTN =
   '[data-test-subj="detectionEngineStepAboutRuleFalsePositives"] .euiButtonEmpty__text';
 
diff --git a/x-pack/plugins/security_solution/cypress/tasks/create_new_rule.ts b/x-pack/plugins/security_solution/cypress/tasks/create_new_rule.ts
index e2d27a11ed717..c1210bf457b69 100644
--- a/x-pack/plugins/security_solution/cypress/tasks/create_new_rule.ts
+++ b/x-pack/plugins/security_solution/cypress/tasks/create_new_rule.ts
@@ -92,6 +92,7 @@ import {
   EMAIL_CONNECTOR_PORT_INPUT,
   EMAIL_CONNECTOR_USER_INPUT,
   EMAIL_CONNECTOR_PASSWORD_INPUT,
+  EMAIL_CONNECTOR_SERVICE_SELECTOR,
 } from '../screens/create_new_rule';
 import { LOADING_INDICATOR } from '../screens/security_header';
 import { TOAST_ERROR } from '../screens/shared';
@@ -402,6 +403,7 @@ export const fillIndexAndIndicatorIndexPattern = (
 
 export const fillEmailConnectorForm = (connector: EmailConnector = getEmailConnector()) => {
   cy.get(CONNECTOR_NAME_INPUT).type(connector.name);
+  cy.get(EMAIL_CONNECTOR_SERVICE_SELECTOR).select(connector.service);
   cy.get(EMAIL_CONNECTOR_FROM_INPUT).type(connector.from);
   cy.get(EMAIL_CONNECTOR_HOST_INPUT).type(connector.host);
   cy.get(EMAIL_CONNECTOR_PORT_INPUT).type(connector.port);
diff --git a/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/use_investigate_in_timeline.tsx b/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/use_investigate_in_timeline.tsx
index 51d19651a8efb..c750ca94e633b 100644
--- a/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/use_investigate_in_timeline.tsx
+++ b/x-pack/plugins/security_solution/public/detections/components/alerts_table/timeline_actions/use_investigate_in_timeline.tsx
@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { EuiContextMenuItem } from '@elastic/eui';
@@ -13,11 +13,12 @@ import { useKibana } from '../../../../common/lib/kibana';
 import { TimelineId } from '../../../../../common/types/timeline';
 import { Ecs } from '../../../../../common/ecs';
 import { TimelineNonEcsData } from '../../../../../common/search_strategy/timeline';
-import { timelineActions } from '../../../../timelines/store/timeline';
+import { timelineActions, timelineSelectors } from '../../../../timelines/store/timeline';
 import { sendAlertToTimelineAction } from '../actions';
 import { dispatchUpdateTimeline } from '../../../../timelines/components/open_timeline/helpers';
 import { CreateTimelineProps } from '../types';
 import { ACTION_INVESTIGATE_IN_TIMELINE } from '../translations';
+import { useDeepEqualSelector } from '../../../../common/hooks/use_selector';
 import { useFetchEcsAlertsData } from '../../../containers/detection_engine/alerts/use_fetch_ecs_alerts_data';
 
 interface UseInvestigateInTimelineActionProps {
@@ -34,10 +35,20 @@ export const useInvestigateInTimeline = ({
   onInvestigateInTimelineAlertClick,
 }: UseInvestigateInTimelineActionProps) => {
   const {
-    data: { search: searchStrategyClient },
+    data: { search: searchStrategyClient, query },
   } = useKibana().services;
   const dispatch = useDispatch();
 
+  const filterManagerBackup = useMemo(() => query.filterManager, [query.filterManager]);
+  const getManageTimeline = useMemo(() => timelineSelectors.getManageTimelineById(), []);
+  const { filterManager: activeFilterManager } = useDeepEqualSelector((state) =>
+    getManageTimeline(state, TimelineId.active ?? '')
+  );
+  const filterManager = useMemo(() => activeFilterManager ?? filterManagerBackup, [
+    activeFilterManager,
+    filterManagerBackup,
+  ]);
+
   const updateTimelineIsLoading = useCallback(
     (payload) => dispatch(timelineActions.updateIsLoading(payload)),
     [dispatch]
@@ -53,6 +64,7 @@ export const useInvestigateInTimeline = ({
         notes: [],
         timeline: {
           ...timeline,
+          filterManager,
           // by setting as an empty array, it will default to all in the reducer because of the event type
           indexNames: [],
           show: true,
@@ -61,7 +73,7 @@ export const useInvestigateInTimeline = ({
         ruleNote,
       })();
     },
-    [dispatch, updateTimelineIsLoading]
+    [dispatch, filterManager, updateTimelineIsLoading]
   );
 
   const showInvestigateInTimelineAction = alertIds != null;
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/log_entry.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/log_entry.tsx
index 4fe70039d1251..b15c6b9ba0020 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/log_entry.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/details/components/log_entry.tsx
@@ -45,7 +45,7 @@ const useLogEntryUIProps = (
     if (logEntry.type === 'action') {
       avatarSize = 'm';
       commentType = 'regular';
-      commentText = logEntry.item.data.data.comment ?? '';
+      commentText = logEntry.item.data.data.comment?.trim() ?? '';
       displayResponseEvent = false;
       iconType = 'lockOpen';
       username = logEntry.item.data.user_id;
@@ -55,7 +55,7 @@ const useLogEntryUIProps = (
           iconType = 'lock';
           isIsolateAction = true;
         }
-        if (data.comment) {
+        if (commentText) {
           displayComment = true;
         }
       }
@@ -154,7 +154,7 @@ export const LogEntry = memo(({ logEntry }: { logEntry: Immutable<ActivityLogEnt
       data-test-subj="timelineEntry"
     >
       {displayComment ? (
-        <EuiText size="s">
+        <EuiText size="s" data-test-subj="activityLogCommentText">
           <p>{commentText}</p>
         </EuiText>
       ) : undefined}
diff --git a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
index ea999334ee771..d053da18ce502 100644
--- a/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/endpoint_hosts/view/index.test.tsx
@@ -832,6 +832,15 @@ describe('when on the endpoint list page', () => {
         });
         const actionData = fleetActionGenerator.generate({
           agents: [agentId],
+          data: {
+            comment: 'some comment',
+          },
+        });
+        const isolatedActionData = fleetActionGenerator.generateIsolateAction({
+          agents: [agentId],
+          data: {
+            comment: ' ', // has space for comment,
+          },
         });
 
         getMockData = () => ({
@@ -854,6 +863,13 @@ describe('when on the endpoint list page', () => {
                 data: actionData,
               },
             },
+            {
+              type: 'action',
+              item: {
+                id: 'some_id_3',
+                data: isolatedActionData,
+              },
+            },
           ],
         });
 
@@ -890,7 +906,7 @@ describe('when on the endpoint list page', () => {
           dispatchEndpointDetailsActivityLogChanged('success', getMockData());
         });
         const logEntries = await renderResult.queryAllByTestId('timelineEntry');
-        expect(logEntries.length).toEqual(2);
+        expect(logEntries.length).toEqual(3);
         expect(`${logEntries[0]} .euiCommentTimeline__icon--update`).not.toBe(null);
         expect(`${logEntries[1]} .euiCommentTimeline__icon--regular`).not.toBe(null);
       });
@@ -947,7 +963,7 @@ describe('when on the endpoint list page', () => {
           dispatchEndpointDetailsActivityLogChanged('success', getMockData());
         });
         const logEntries = await renderResult.queryAllByTestId('timelineEntry');
-        expect(logEntries.length).toEqual(2);
+        expect(logEntries.length).toEqual(3);
       });
 
       it('should display a callout message if no log data', async () => {
@@ -975,6 +991,29 @@ describe('when on the endpoint list page', () => {
         const activityLogCallout = await renderResult.findByTestId('activityLogNoDataCallout');
         expect(activityLogCallout).not.toBeNull();
       });
+
+      it('should correctly display non-empty comments only for actions', async () => {
+        const userChangedUrlChecker = middlewareSpy.waitForAction('userChangedUrl');
+        reactTestingLibrary.act(() => {
+          history.push(
+            `${MANAGEMENT_PATH}/endpoints?page_index=0&page_size=10&selected_endpoint=1&show=activity_log`
+          );
+        });
+        const changedUrlAction = await userChangedUrlChecker;
+        expect(changedUrlAction.payload.search).toEqual(
+          '?page_index=0&page_size=10&selected_endpoint=1&show=activity_log'
+        );
+        await middlewareSpy.waitForAction('endpointDetailsActivityLogChanged');
+        reactTestingLibrary.act(() => {
+          dispatchEndpointDetailsActivityLogChanged('success', getMockData());
+        });
+        const commentTexts = await renderResult.queryAllByTestId('activityLogCommentText');
+        expect(commentTexts.length).toEqual(1);
+        expect(commentTexts[0].textContent).toEqual('some comment');
+        expect(commentTexts[0].parentElement?.parentElement?.className).toContain(
+          'euiCommentEvent--regular'
+        );
+      });
     });
 
     describe('when showing host Policy Response panel', () => {
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/models/advanced_policy_schema.ts b/x-pack/plugins/security_solution/public/management/pages/policy/models/advanced_policy_schema.ts
index 1add8bb9d6f76..4d7ca74ca19f8 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/models/advanced_policy_schema.ts
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/models/advanced_policy_schema.ts
@@ -584,6 +584,28 @@ export const AdvancedPolicySchema: AdvancedPolicySchemaType[] = [
       }
     ),
   },
+  {
+    key: 'windows.advanced.kernel.fileaccess',
+    first_supported_version: '7.15',
+    documentation: i18n.translate(
+      'xpack.securitySolution.endpoint.policy.advanced.windows.advanced.kernel.fileaccess',
+      {
+        defaultMessage:
+          'Report limited file access (read) events. Paths are not user-configurable. Default value is true.',
+      }
+    ),
+  },
+  {
+    key: 'windows.advanced.kernel.registryaccess',
+    first_supported_version: '7.15',
+    documentation: i18n.translate(
+      'xpack.securitySolution.endpoint.policy.advanced.windows.advanced.kernel.registryaccess',
+      {
+        defaultMessage:
+          'Report limited registry access (queryvalue, savekey) events. Paths are not user-configurable. Default value is true.',
+      }
+    ),
+  },
   {
     key: 'windows.advanced.diagnostic.enabled',
     first_supported_version: '7.11',
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/protections/behavior.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/protections/behavior.tsx
index f52d8a4c70706..06cf666f2950e 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/protections/behavior.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/protections/behavior.tsx
@@ -28,13 +28,13 @@ export const BehaviorProtection = React.memo(() => {
   const protectionLabel = i18n.translate(
     'xpack.securitySolution.endpoint.policy.protections.behavior',
     {
-      defaultMessage: 'Behavior',
+      defaultMessage: 'Malicious behavior protections',
     }
   );
   return (
     <ConfigForm
       type={i18n.translate('xpack.securitySolution.endpoint.policy.details.behavior_protection', {
-        defaultMessage: 'Behavior',
+        defaultMessage: 'Malicious behavior',
       })}
       supportedOss={[OperatingSystem.WINDOWS, OperatingSystem.MAC, OperatingSystem.LINUX]}
       dataTestSubj="behaviorProtectionsForm"
diff --git a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/protections/memory.tsx b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/protections/memory.tsx
index b0937bc8ccfbe..792664f3e6f25 100644
--- a/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/protections/memory.tsx
+++ b/x-pack/plugins/security_solution/public/management/pages/policy/view/policy_forms/protections/memory.tsx
@@ -28,13 +28,13 @@ export const MemoryProtection = React.memo(() => {
   const protectionLabel = i18n.translate(
     'xpack.securitySolution.endpoint.policy.protections.memory',
     {
-      defaultMessage: 'Memory manipulation',
+      defaultMessage: 'Memory threat protections',
     }
   );
   return (
     <ConfigForm
       type={i18n.translate('xpack.securitySolution.endpoint.policy.details.memory_protection', {
-        defaultMessage: 'Memory manipulation',
+        defaultMessage: 'Memory threat',
       })}
       supportedOss={[OperatingSystem.WINDOWS]}
       dataTestSubj="memoryProtectionsForm"
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index ffd3adce378f5..0a8d10d01469e 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -5021,7 +5021,6 @@
     "visualizations.function.range.help": "範囲オブジェクトを生成します",
     "visualizations.function.range.to.help": "範囲の終了",
     "visualizations.function.visDimension.accessor.help": "使用するデータセット内の列 (列インデックスまたは列名) ",
-    "visualizations.function.visDimension.error.accessor": "入力された列名は無効です。",
     "visualizations.function.visDimension.format.help": "フォーマット",
     "visualizations.function.visDimension.formatParams.help": "フォーマットパラメーター",
     "visualizations.function.visDimension.help": "visConfig ディメンションオブジェクトを生成します",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index 0fc6f0ec119eb..d29307eddd422 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -5041,7 +5041,6 @@
     "visualizations.function.range.help": "生成范围对象",
     "visualizations.function.range.to.help": "范围结束",
     "visualizations.function.visDimension.accessor.help": "要使用的数据集列（列索引或列名称）",
-    "visualizations.function.visDimension.error.accessor": "提供的列名称无效",
     "visualizations.function.visDimension.format.help": "格式",
     "visualizations.function.visDimension.formatParams.help": "格式参数",
     "visualizations.function.visDimension.help": "生成 visConfig 维度对象",
diff --git a/x-pack/test/api_integration/apis/maps/migrations.js b/x-pack/test/api_integration/apis/maps/migrations.js
index d121c79f6cfe1..89e9c0975f9f6 100644
--- a/x-pack/test/api_integration/apis/maps/migrations.js
+++ b/x-pack/test/api_integration/apis/maps/migrations.js
@@ -76,7 +76,7 @@ export default function ({ getService }) {
         }
         expect(panels.length).to.be(1);
         expect(panels[0].type).to.be('map');
-        expect(panels[0].version).to.be('7.15.0');
+        expect(panels[0].version).to.be('7.16.0');
       });
     });
   });
diff --git a/x-pack/test/apm_api_integration/common/apm_api_supertest.ts b/x-pack/test/apm_api_integration/common/apm_api_supertest.ts
index 5034d4fae8fbc..f930cab3b0568 100644
--- a/x-pack/test/apm_api_integration/common/apm_api_supertest.ts
+++ b/x-pack/test/apm_api_integration/common/apm_api_supertest.ts
@@ -15,15 +15,12 @@ import type {
   APIClientRequestParamsOf,
 } from '../../../plugins/apm/public/services/rest/createCallApmApi';
 
-export function createApmApiSupertest(st: supertest.SuperTest<supertest.Test>) {
+export function createSupertestClient(st: supertest.SuperTest<supertest.Test>) {
   return async <TEndpoint extends APIEndpoint>(
     options: {
       endpoint: TEndpoint;
     } & APIClientRequestParamsOf<TEndpoint> & { params?: { query?: { _inspect?: boolean } } }
-  ): Promise<{
-    status: number;
-    body: APIReturnType<TEndpoint>;
-  }> => {
+  ): Promise<SupertestReturnType<TEndpoint>> => {
     const { endpoint } = options;
 
     const params = 'params' in options ? (options.params as Record<string, any>) : {};
@@ -44,7 +41,7 @@ export function createApmApiSupertest(st: supertest.SuperTest<supertest.Test>) {
   };
 }
 
-export type ApmApiSupertest = ReturnType<typeof createApmApiSupertest>;
+export type ApmApiSupertest = ReturnType<typeof createSupertestClient>;
 
 export class ApmApiError extends Error {
   res: request.Response;
@@ -60,3 +57,8 @@ Body: ${JSON.stringify(res.body)}`
     this.res = res;
   }
 }
+
+export interface SupertestReturnType<TEndpoint extends APIEndpoint> {
+  status: number;
+  body: APIReturnType<TEndpoint>;
+}
diff --git a/x-pack/test/apm_api_integration/common/authentication.ts b/x-pack/test/apm_api_integration/common/authentication.ts
index 799e78e5646ba..e8c71c54c6fe0 100644
--- a/x-pack/test/apm_api_integration/common/authentication.ts
+++ b/x-pack/test/apm_api_integration/common/authentication.ts
@@ -18,13 +18,15 @@ export enum ApmUser {
   apmReadUserWithoutMlAccess = 'apm_read_user_without_ml_access',
 }
 
+// TODO: Going forward we want to use the built-in roles `viewer` and `editor`. However ML privileges are not included in the built-in roles
+// Until https://github.com/elastic/kibana/issues/71422 is closed we have to use the custom roles below
 const roles = {
   [ApmUser.noAccessUser]: {},
   [ApmUser.apmReadUser]: {
     kibana: [
       {
         base: [],
-        feature: { apm: ['read'], ml: ['read'], savedObjectsManagement: ['read'] },
+        feature: { ml: ['read'] },
         spaces: ['*'],
       },
     ],
@@ -51,7 +53,7 @@ const roles = {
     kibana: [
       {
         base: [],
-        feature: { apm: ['all'], ml: ['all'], savedObjectsManagement: ['all'] },
+        feature: { ml: ['all'] },
         spaces: ['*'],
       },
     ],
@@ -81,16 +83,16 @@ const users = {
     roles: [],
   },
   [ApmUser.apmReadUser]: {
-    roles: ['apm_user', ApmUser.apmReadUser],
+    roles: ['viewer', ApmUser.apmReadUser],
   },
   [ApmUser.apmReadUserWithoutMlAccess]: {
     roles: [ApmUser.apmReadUserWithoutMlAccess],
   },
   [ApmUser.apmWriteUser]: {
-    roles: ['apm_user', ApmUser.apmWriteUser],
+    roles: ['editor', ApmUser.apmWriteUser],
   },
   [ApmUser.apmAnnotationsWriteUser]: {
-    roles: ['apm_user', ApmUser.apmWriteUser, ApmUser.apmAnnotationsWriteUser],
+    roles: ['editor', ApmUser.apmWriteUser, ApmUser.apmAnnotationsWriteUser],
   },
 };
 
diff --git a/x-pack/test/apm_api_integration/common/config.ts b/x-pack/test/apm_api_integration/common/config.ts
index c1ae7bb5f2b75..e8d777814402f 100644
--- a/x-pack/test/apm_api_integration/common/config.ts
+++ b/x-pack/test/apm_api_integration/common/config.ts
@@ -8,10 +8,12 @@
 import { FtrConfigProviderContext } from '@kbn/test';
 import supertest from 'supertest';
 import { format, UrlObject } from 'url';
+import { SecurityServiceProvider } from 'test/common/services/security';
 import { InheritedFtrProviderContext, InheritedServices } from './ftr_provider_context';
 import { PromiseReturnType } from '../../../plugins/observability/typings/common';
 import { createApmUser, APM_TEST_PASSWORD, ApmUser } from './authentication';
 import { APMFtrConfigName } from '../configs';
+import { createSupertestClient } from './apm_api_supertest';
 import { registry } from './registry';
 
 interface Config {
@@ -20,12 +22,29 @@ interface Config {
   kibanaConfig?: Record<string, string | string[]>;
 }
 
-const supertestAsApmUser = (kibanaServer: UrlObject, apmUser: ApmUser) => async (
-  context: InheritedFtrProviderContext
-) => {
-  const security = context.getService('security');
-  await security.init();
+type SecurityService = PromiseReturnType<typeof SecurityServiceProvider>;
 
+function getLegacySupertestClient(kibanaServer: UrlObject, apmUser: ApmUser) {
+  return async (context: InheritedFtrProviderContext) => {
+    const security = context.getService('security');
+    await security.init();
+
+    await createApmUser(security, apmUser);
+
+    const url = format({
+      ...kibanaServer,
+      auth: `${apmUser}:${APM_TEST_PASSWORD}`,
+    });
+
+    return supertest(url);
+  };
+}
+
+async function getApmApiClient(
+  kibanaServer: UrlObject,
+  security: SecurityService,
+  apmUser: ApmUser
+) {
   await createApmUser(security, apmUser);
 
   const url = format({
@@ -33,8 +52,10 @@ const supertestAsApmUser = (kibanaServer: UrlObject, apmUser: ApmUser) => async
     auth: `${apmUser}:${APM_TEST_PASSWORD}`,
   });
 
-  return supertest(url);
-};
+  return createSupertestClient(supertest(url));
+}
+
+export type CreateTestConfig = ReturnType<typeof createTestConfig>;
 
 export function createTestConfig(config: Config) {
   const { license, name, kibanaConfig } = config;
@@ -46,8 +67,7 @@ export function createTestConfig(config: Config) {
 
     const services = xPackAPITestsConfig.get('services') as InheritedServices;
     const servers = xPackAPITestsConfig.get('servers');
-
-    const supertestAsApmReadUser = supertestAsApmUser(servers.kibana, ApmUser.apmReadUser);
+    const kibanaServer = servers.kibana;
 
     registry.init(config.name);
 
@@ -56,16 +76,38 @@ export function createTestConfig(config: Config) {
       servers,
       services: {
         ...services,
-        supertest: supertestAsApmReadUser,
-        supertestAsApmReadUser,
-        supertestAsNoAccessUser: supertestAsApmUser(servers.kibana, ApmUser.noAccessUser),
-        supertestAsApmWriteUser: supertestAsApmUser(servers.kibana, ApmUser.apmWriteUser),
-        supertestAsApmAnnotationsWriteUser: supertestAsApmUser(
-          servers.kibana,
+
+        apmApiClient: async (context: InheritedFtrProviderContext) => {
+          const security = context.getService('security');
+          await security.init();
+
+          return {
+            noAccessUser: await getApmApiClient(servers.kibana, security, ApmUser.noAccessUser),
+            readUser: await getApmApiClient(servers.kibana, security, ApmUser.apmReadUser),
+            writeUser: await getApmApiClient(servers.kibana, security, ApmUser.apmWriteUser),
+            annotationWriterUser: await getApmApiClient(
+              servers.kibana,
+              security,
+              ApmUser.apmAnnotationsWriteUser
+            ),
+            noMlAccessUser: await getApmApiClient(
+              servers.kibana,
+              security,
+              ApmUser.apmReadUserWithoutMlAccess
+            ),
+          };
+        },
+
+        // legacy clients
+        legacySupertestAsNoAccessUser: getLegacySupertestClient(kibanaServer, ApmUser.noAccessUser),
+        legacySupertestAsApmReadUser: getLegacySupertestClient(kibanaServer, ApmUser.apmReadUser),
+        legacySupertestAsApmWriteUser: getLegacySupertestClient(kibanaServer, ApmUser.apmWriteUser),
+        legacySupertestAsApmAnnotationsWriteUser: getLegacySupertestClient(
+          kibanaServer,
           ApmUser.apmAnnotationsWriteUser
         ),
-        supertestAsApmReadUserWithoutMlAccess: supertestAsApmUser(
-          servers.kibana,
+        legacySupertestAsApmReadUserWithoutMlAccess: getLegacySupertestClient(
+          kibanaServer,
           ApmUser.apmReadUserWithoutMlAccess
         ),
       },
diff --git a/x-pack/test/apm_api_integration/common/registry.ts b/x-pack/test/apm_api_integration/common/registry.ts
index 0f0af0bda6ab8..a37cd26f1fc3c 100644
--- a/x-pack/test/apm_api_integration/common/registry.ts
+++ b/x-pack/test/apm_api_integration/common/registry.ts
@@ -110,7 +110,7 @@ export const registry = {
     const esArchiver = context.getService('esArchiver');
     const logger = context.getService('log');
 
-    const supertest = context.getService('supertestAsApmWriteUser');
+    const supertest = context.getService('legacySupertestAsApmWriteUser');
 
     const logWithTimer = () => {
       const start = process.hrtime();
diff --git a/x-pack/test/apm_api_integration/configs/index.ts b/x-pack/test/apm_api_integration/configs/index.ts
index 51bcb30a0c176..ad1f897debe32 100644
--- a/x-pack/test/apm_api_integration/configs/index.ts
+++ b/x-pack/test/apm_api_integration/configs/index.ts
@@ -6,7 +6,7 @@
  */
 
 import { mapValues } from 'lodash';
-import { createTestConfig } from '../common/config';
+import { createTestConfig, CreateTestConfig } from '../common/config';
 
 const apmFtrConfigs = {
   basic: {
@@ -34,9 +34,12 @@ const apmFtrConfigs = {
 
 export type APMFtrConfigName = keyof typeof apmFtrConfigs;
 
-export const configs = mapValues(apmFtrConfigs, (value, key) => {
-  return createTestConfig({
-    name: key as APMFtrConfigName,
-    ...value,
-  });
-});
+export const configs: Record<APMFtrConfigName, CreateTestConfig> = mapValues(
+  apmFtrConfigs,
+  (value, key) => {
+    return createTestConfig({
+      name: key as APMFtrConfigName,
+      ...value,
+    });
+  }
+);
diff --git a/x-pack/test/apm_api_integration/tests/alerts/chart_preview.ts b/x-pack/test/apm_api_integration/tests/alerts/chart_preview.ts
index f12256a33ef05..c8bb844238020 100644
--- a/x-pack/test/apm_api_integration/tests/alerts/chart_preview.ts
+++ b/x-pack/test/apm_api_integration/tests/alerts/chart_preview.ts
@@ -6,13 +6,12 @@
  */
 
 import expect from '@kbn/expect';
-import { createApmApiSupertest } from '../../common/apm_api_supertest';
 import archives from '../../common/fixtures/es_archiver/archives_metadata';
 import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const apmApiSupertest = createApmApiSupertest(getService('supertest'));
+  const apmApiClient = getService('apmApiClient');
   const archiveName = 'apm_8.0.0';
   const { end } = archives[archiveName];
   const start = new Date(Date.parse(end) - 600000).toISOString();
@@ -32,7 +31,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
   registry.when(`without data loaded`, { config: 'basic', archives: [] }, () => {
     it('transaction_error_rate (without data)', async () => {
       const options = getOptions();
-      const response = await apmApiSupertest({
+      const response = await apmApiClient.readUser({
         endpoint: 'GET /api/apm/alerts/chart_preview/transaction_error_rate',
         ...options,
       });
@@ -45,7 +44,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
       const options = getOptions();
       options.params.query.transactionType = undefined;
 
-      const response = await apmApiSupertest({
+      const response = await apmApiClient.readUser({
         endpoint: 'GET /api/apm/alerts/chart_preview/transaction_error_count',
         ...options,
       });
@@ -57,7 +56,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
     it('transaction_duration (without data)', async () => {
       const options = getOptions();
 
-      const response = await apmApiSupertest({
+      const response = await apmApiClient.readUser({
         endpoint: 'GET /api/apm/alerts/chart_preview/transaction_duration',
         ...options,
       });
@@ -70,7 +69,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
   registry.when(`with data loaded`, { config: 'basic', archives: [archiveName] }, () => {
     it('transaction_error_rate (with data)', async () => {
       const options = getOptions();
-      const response = await apmApiSupertest({
+      const response = await apmApiClient.readUser({
         endpoint: 'GET /api/apm/alerts/chart_preview/transaction_error_rate',
         ...options,
       });
@@ -87,7 +86,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
       const options = getOptions();
       options.params.query.transactionType = undefined;
 
-      const response = await apmApiSupertest({
+      const response = await apmApiClient.readUser({
         endpoint: 'GET /api/apm/alerts/chart_preview/transaction_error_count',
         ...options,
       });
@@ -102,7 +101,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
 
     it('transaction_duration (with data)', async () => {
       const options = getOptions();
-      const response = await apmApiSupertest({
+      const response = await apmApiClient.readUser({
         ...options,
         endpoint: 'GET /api/apm/alerts/chart_preview/transaction_duration',
       });
diff --git a/x-pack/test/apm_api_integration/tests/alerts/rule_registry.ts b/x-pack/test/apm_api_integration/tests/alerts/rule_registry.ts
index 7cf1fe4c969cc..7f107f127594d 100644
--- a/x-pack/test/apm_api_integration/tests/alerts/rule_registry.ts
+++ b/x-pack/test/apm_api_integration/tests/alerts/rule_registry.ts
@@ -36,7 +36,7 @@ interface Alert {
 }
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertestAsApmWriteUser');
+  const supertest = getService('legacySupertestAsApmWriteUser');
   const es = getService('es');
 
   const MAX_POLLS = 10;
diff --git a/x-pack/test/apm_api_integration/tests/correlations/errors_failed_transactions.ts b/x-pack/test/apm_api_integration/tests/correlations/errors_failed_transactions.ts
index 054ccbfb4996e..b08ced565ec30 100644
--- a/x-pack/test/apm_api_integration/tests/correlations/errors_failed_transactions.ts
+++ b/x-pack/test/apm_api_integration/tests/correlations/errors_failed_transactions.ts
@@ -13,7 +13,7 @@ import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
   const archiveName = 'apm_8.0.0';
   const range = archives_metadata[archiveName];
 
diff --git a/x-pack/test/apm_api_integration/tests/correlations/errors_overall.ts b/x-pack/test/apm_api_integration/tests/correlations/errors_overall.ts
index a4e4077a17483..f4e95816a3996 100644
--- a/x-pack/test/apm_api_integration/tests/correlations/errors_overall.ts
+++ b/x-pack/test/apm_api_integration/tests/correlations/errors_overall.ts
@@ -6,36 +6,37 @@
  */
 
 import expect from '@kbn/expect';
-import { format } from 'url';
-import { APIReturnType } from '../../../../plugins/apm/public/services/rest/createCallApmApi';
+import { SupertestReturnType } from '../../common/apm_api_supertest';
 import archives_metadata from '../../common/fixtures/es_archiver/archives_metadata';
 import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const apmApiClient = getService('apmApiClient');
   const archiveName = 'apm_8.0.0';
   const range = archives_metadata[archiveName];
 
-  const url = format({
-    pathname: `/api/apm/correlations/errors/overall_timeseries`,
-    query: {
-      start: range.start,
-      end: range.end,
-      environment: 'ENVIRONMENT_ALL',
-      kuery: '',
+  const urlConfig = {
+    endpoint: `GET /api/apm/correlations/errors/overall_timeseries` as const,
+    params: {
+      query: {
+        start: range.start,
+        end: range.end,
+        environment: 'ENVIRONMENT_ALL',
+        kuery: '',
+      },
     },
-  });
+  };
 
   registry.when(
     'correlations errors overall without data',
     { config: 'trial', archives: [] },
     () => {
       it('handles the empty state', async () => {
-        const response = await supertest.get(url);
+        const response = await apmApiClient.readUser(urlConfig);
 
         expect(response.status).to.be(200);
-        expect(response.body.response).to.be(undefined);
+        expect(response.body.overall).to.be(null);
       });
     }
   );
@@ -44,14 +45,10 @@ export default function ApiTest({ getService }: FtrProviderContext) {
     'correlations errors overall with data and default args',
     { config: 'trial', archives: ['apm_8.0.0'] },
     () => {
-      type ResponseBody = APIReturnType<'GET /api/apm/correlations/errors/overall_timeseries'>;
-      let response: {
-        status: number;
-        body: NonNullable<ResponseBody>;
-      };
+      let response: SupertestReturnType<'GET /api/apm/correlations/errors/overall_timeseries'>;
 
       before(async () => {
-        response = await supertest.get(url);
+        response = await apmApiClient.readUser(urlConfig);
       });
 
       it('returns successfully', () => {
diff --git a/x-pack/test/apm_api_integration/tests/correlations/failed_transactions.ts b/x-pack/test/apm_api_integration/tests/correlations/failed_transactions.ts
index 94c293cd1a19f..0205940d77724 100644
--- a/x-pack/test/apm_api_integration/tests/correlations/failed_transactions.ts
+++ b/x-pack/test/apm_api_integration/tests/correlations/failed_transactions.ts
@@ -13,7 +13,7 @@ import { parseBfetchResponse } from '../../common/utils/parse_b_fetch';
 
 export default function ApiTest({ getService }: FtrProviderContext) {
   const retry = getService('retry');
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   const getRequestBody = () => {
     const partialSearchRequest: PartialSearchRequest = {
diff --git a/x-pack/test/apm_api_integration/tests/correlations/latency.ts b/x-pack/test/apm_api_integration/tests/correlations/latency.ts
index 32ca71694626f..21cd855f4ed85 100644
--- a/x-pack/test/apm_api_integration/tests/correlations/latency.ts
+++ b/x-pack/test/apm_api_integration/tests/correlations/latency.ts
@@ -13,7 +13,7 @@ import { parseBfetchResponse } from '../../common/utils/parse_b_fetch';
 
 export default function ApiTest({ getService }: FtrProviderContext) {
   const retry = getService('retry');
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   const getRequestBody = () => {
     const partialSearchRequest: PartialSearchRequest = {
diff --git a/x-pack/test/apm_api_integration/tests/correlations/latency_overall.ts b/x-pack/test/apm_api_integration/tests/correlations/latency_overall.ts
index cfbe63e976655..722a9a2bc4fb7 100644
--- a/x-pack/test/apm_api_integration/tests/correlations/latency_overall.ts
+++ b/x-pack/test/apm_api_integration/tests/correlations/latency_overall.ts
@@ -13,7 +13,7 @@ import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
   const archiveName = 'apm_8.0.0';
   const range = archives_metadata[archiveName];
 
diff --git a/x-pack/test/apm_api_integration/tests/correlations/latency_slow_transactions.ts b/x-pack/test/apm_api_integration/tests/correlations/latency_slow_transactions.ts
index dac9ed70bc483..09c092ed1a646 100644
--- a/x-pack/test/apm_api_integration/tests/correlations/latency_slow_transactions.ts
+++ b/x-pack/test/apm_api_integration/tests/correlations/latency_slow_transactions.ts
@@ -13,7 +13,7 @@ import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
   const archiveName = 'apm_8.0.0';
   const range = archives_metadata[archiveName];
 
diff --git a/x-pack/test/apm_api_integration/tests/csm/csm_services.ts b/x-pack/test/apm_api_integration/tests/csm/csm_services.ts
index 57018b5012aa2..832ef93e3f721 100644
--- a/x-pack/test/apm_api_integration/tests/csm/csm_services.ts
+++ b/x-pack/test/apm_api_integration/tests/csm/csm_services.ts
@@ -10,7 +10,7 @@ import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
 export default function rumServicesApiTests({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   registry.when('CSM Services without data', { config: 'trial', archives: [] }, () => {
     it('returns empty list', async () => {
diff --git a/x-pack/test/apm_api_integration/tests/csm/has_rum_data.ts b/x-pack/test/apm_api_integration/tests/csm/has_rum_data.ts
index 15ddc04e2414d..3372e43396ed0 100644
--- a/x-pack/test/apm_api_integration/tests/csm/has_rum_data.ts
+++ b/x-pack/test/apm_api_integration/tests/csm/has_rum_data.ts
@@ -10,7 +10,7 @@ import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
 export default function rumHasDataApiTests({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   registry.when('has_rum_data without data', { config: 'trial', archives: [] }, () => {
     it('returns empty list', async () => {
diff --git a/x-pack/test/apm_api_integration/tests/csm/js_errors.ts b/x-pack/test/apm_api_integration/tests/csm/js_errors.ts
index 870c90273d5cc..6346c991373b5 100644
--- a/x-pack/test/apm_api_integration/tests/csm/js_errors.ts
+++ b/x-pack/test/apm_api_integration/tests/csm/js_errors.ts
@@ -10,7 +10,7 @@ import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
 export default function rumJsErrorsApiTests({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   registry.when('CSM JS errors with data', { config: 'trial', archives: [] }, () => {
     it('returns no js errors', async () => {
diff --git a/x-pack/test/apm_api_integration/tests/csm/long_task_metrics.ts b/x-pack/test/apm_api_integration/tests/csm/long_task_metrics.ts
index 86a99325fe9c9..0cb84d1935fa8 100644
--- a/x-pack/test/apm_api_integration/tests/csm/long_task_metrics.ts
+++ b/x-pack/test/apm_api_integration/tests/csm/long_task_metrics.ts
@@ -10,7 +10,7 @@ import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
 export default function rumServicesApiTests({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   registry.when('CSM long task metrics without data', { config: 'trial', archives: [] }, () => {
     it('returns empty list', async () => {
diff --git a/x-pack/test/apm_api_integration/tests/csm/page_load_dist.ts b/x-pack/test/apm_api_integration/tests/csm/page_load_dist.ts
index f26832c8fadbe..8d6a38f27a8c4 100644
--- a/x-pack/test/apm_api_integration/tests/csm/page_load_dist.ts
+++ b/x-pack/test/apm_api_integration/tests/csm/page_load_dist.ts
@@ -10,7 +10,7 @@ import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
 export default function rumServicesApiTests({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   registry.when('UX page load dist without data', { config: 'trial', archives: [] }, () => {
     it('returns empty list', async () => {
diff --git a/x-pack/test/apm_api_integration/tests/csm/page_views.ts b/x-pack/test/apm_api_integration/tests/csm/page_views.ts
index 6732f46011cb1..e5ffd37d3c682 100644
--- a/x-pack/test/apm_api_integration/tests/csm/page_views.ts
+++ b/x-pack/test/apm_api_integration/tests/csm/page_views.ts
@@ -10,7 +10,7 @@ import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
 export default function rumServicesApiTests({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   registry.when('CSM page views without data', { config: 'trial', archives: [] }, () => {
     it('returns empty list', async () => {
diff --git a/x-pack/test/apm_api_integration/tests/csm/url_search.ts b/x-pack/test/apm_api_integration/tests/csm/url_search.ts
index 4d0d120668519..3c63186879788 100644
--- a/x-pack/test/apm_api_integration/tests/csm/url_search.ts
+++ b/x-pack/test/apm_api_integration/tests/csm/url_search.ts
@@ -10,7 +10,7 @@ import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
 export default function rumServicesApiTests({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   registry.when('CSM url search api without data', { config: 'trial', archives: [] }, () => {
     it('returns empty list', async () => {
diff --git a/x-pack/test/apm_api_integration/tests/csm/web_core_vitals.ts b/x-pack/test/apm_api_integration/tests/csm/web_core_vitals.ts
index 19411f44dc771..2c89b13d1b725 100644
--- a/x-pack/test/apm_api_integration/tests/csm/web_core_vitals.ts
+++ b/x-pack/test/apm_api_integration/tests/csm/web_core_vitals.ts
@@ -10,7 +10,7 @@ import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
 export default function rumServicesApiTests({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   registry.when('CSM web core vitals without data', { config: 'trial', archives: [] }, () => {
     it('returns empty list', async () => {
diff --git a/x-pack/test/apm_api_integration/tests/feature_controls.ts b/x-pack/test/apm_api_integration/tests/feature_controls.ts
index 58193726e20f1..18fcf4fef5fec 100644
--- a/x-pack/test/apm_api_integration/tests/feature_controls.ts
+++ b/x-pack/test/apm_api_integration/tests/feature_controls.ts
@@ -10,7 +10,7 @@ import { FtrProviderContext } from '../common/ftr_provider_context';
 import { registry } from '../common/registry';
 
 export default function featureControlsTests({ getService }: FtrProviderContext) {
-  const supertest = getService('supertestAsApmWriteUser');
+  const supertest = getService('legacySupertestAsApmWriteUser');
   const supertestWithoutAuth = getService('supertestWithoutAuth');
   const security = getService('security');
   const spaces = getService('spaces');
diff --git a/x-pack/test/apm_api_integration/tests/inspect/inspect.ts b/x-pack/test/apm_api_integration/tests/inspect/inspect.ts
index c2a4dfb77d0e6..95805f4ef4524 100644
--- a/x-pack/test/apm_api_integration/tests/inspect/inspect.ts
+++ b/x-pack/test/apm_api_integration/tests/inspect/inspect.ts
@@ -8,11 +8,11 @@
 import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
-import { createApmApiSupertest } from '../../common/apm_api_supertest';
+
 import archives_metadata from '../../common/fixtures/es_archiver/archives_metadata';
 
 export default function customLinksTests({ getService }: FtrProviderContext) {
-  const supertestRead = createApmApiSupertest(getService('supertest'));
+  const apmApiClient = getService('apmApiClient');
 
   const archiveName = 'apm_8.0.0';
   const metadata = archives_metadata[archiveName];
@@ -20,7 +20,7 @@ export default function customLinksTests({ getService }: FtrProviderContext) {
   registry.when('Inspect feature', { config: 'trial', archives: [archiveName] }, () => {
     describe('when omitting `_inspect` query param', () => {
       it('returns response without `_inspect`', async () => {
-        const { status, body } = await supertestRead({
+        const { status, body } = await apmApiClient.readUser({
           endpoint: 'GET /api/apm/environments',
           params: {
             query: {
@@ -38,7 +38,7 @@ export default function customLinksTests({ getService }: FtrProviderContext) {
     describe('when passing `_inspect` as query param', () => {
       describe('elasticsearch calls made with end-user auth are returned', () => {
         it('for environments', async () => {
-          const { status, body } = await supertestRead({
+          const { status, body } = await apmApiClient.readUser({
             endpoint: 'GET /api/apm/environments',
             params: {
               query: {
@@ -66,7 +66,7 @@ export default function customLinksTests({ getService }: FtrProviderContext) {
 
       describe('elasticsearch calls made with internal user are not return', () => {
         it('for custom links', async () => {
-          const { status, body } = await supertestRead({
+          const { status, body } = await apmApiClient.readUser({
             endpoint: 'GET /api/apm/settings/custom_links',
             params: {
               query: {
@@ -82,7 +82,7 @@ export default function customLinksTests({ getService }: FtrProviderContext) {
         });
 
         it('for agent configs', async () => {
-          const { status, body } = await supertestRead({
+          const { status, body } = await apmApiClient.readUser({
             endpoint: 'GET /api/apm/settings/agent-configuration',
             params: {
               query: {
diff --git a/x-pack/test/apm_api_integration/tests/metrics_charts/metrics_charts.ts b/x-pack/test/apm_api_integration/tests/metrics_charts/metrics_charts.ts
index 891334e1c1db2..a3e02984a16de 100644
--- a/x-pack/test/apm_api_integration/tests/metrics_charts/metrics_charts.ts
+++ b/x-pack/test/apm_api_integration/tests/metrics_charts/metrics_charts.ts
@@ -18,7 +18,7 @@ interface ChartResponse {
 }
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   registry.when(
     'Metrics charts when data is loaded',
diff --git a/x-pack/test/apm_api_integration/tests/observability_overview/has_data.ts b/x-pack/test/apm_api_integration/tests/observability_overview/has_data.ts
index c6bdce217e229..1b0f8fdcf8736 100644
--- a/x-pack/test/apm_api_integration/tests/observability_overview/has_data.ts
+++ b/x-pack/test/apm_api_integration/tests/observability_overview/has_data.ts
@@ -6,20 +6,19 @@
  */
 
 import expect from '@kbn/expect';
-import { createApmApiSupertest } from '../../common/apm_api_supertest';
+
 import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
-  const apmApiSupertest = createApmApiSupertest(supertest);
+  const apmApiClient = getService('apmApiClient');
 
   registry.when(
     'Observability overview when data is not loaded',
     { config: 'basic', archives: [] },
     () => {
       it('returns false when there is no data', async () => {
-        const response = await apmApiSupertest({
+        const response = await apmApiClient.readUser({
           endpoint: 'GET /api/apm/observability_overview/has_data',
         });
         expect(response.status).to.be(200);
@@ -33,7 +32,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
     { config: 'basic', archives: ['observability_overview'] },
     () => {
       it('returns false when there is only onboarding data', async () => {
-        const response = await apmApiSupertest({
+        const response = await apmApiClient.readUser({
           endpoint: 'GET /api/apm/observability_overview/has_data',
         });
         expect(response.status).to.be(200);
@@ -47,7 +46,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
     { config: 'basic', archives: ['apm_8.0.0'] },
     () => {
       it('returns true when there is at least one document on transaction, error or metrics indices', async () => {
-        const response = await apmApiSupertest({
+        const response = await apmApiClient.readUser({
           endpoint: 'GET /api/apm/observability_overview/has_data',
         });
         expect(response.status).to.be(200);
diff --git a/x-pack/test/apm_api_integration/tests/observability_overview/observability_overview.ts b/x-pack/test/apm_api_integration/tests/observability_overview/observability_overview.ts
index 8760b80f5c737..76a157d72cc6f 100644
--- a/x-pack/test/apm_api_integration/tests/observability_overview/observability_overview.ts
+++ b/x-pack/test/apm_api_integration/tests/observability_overview/observability_overview.ts
@@ -11,7 +11,7 @@ import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   const archiveName = 'apm_8.0.0';
   const metadata = archives_metadata[archiveName];
diff --git a/x-pack/test/apm_api_integration/tests/service_maps/service_maps.ts b/x-pack/test/apm_api_integration/tests/service_maps/service_maps.ts
index 1520ecd644395..816e4e26ef869 100644
--- a/x-pack/test/apm_api_integration/tests/service_maps/service_maps.ts
+++ b/x-pack/test/apm_api_integration/tests/service_maps/service_maps.ts
@@ -15,8 +15,10 @@ import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
 export default function serviceMapsApiTests({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
-  const supertestAsApmReadUserWithoutMlAccess = getService('supertestAsApmReadUserWithoutMlAccess');
+  const supertest = getService('legacySupertestAsApmReadUser');
+  const supertestAsApmReadUserWithoutMlAccess = getService(
+    'legacySupertestAsApmReadUserWithoutMlAccess'
+  );
 
   const archiveName = 'apm_8.0.0';
   const metadata = archives_metadata[archiveName];
diff --git a/x-pack/test/apm_api_integration/tests/service_overview/dependencies/index.ts b/x-pack/test/apm_api_integration/tests/service_overview/dependencies/index.ts
index 942378477f04c..4bd9785b31427 100644
--- a/x-pack/test/apm_api_integration/tests/service_overview/dependencies/index.ts
+++ b/x-pack/test/apm_api_integration/tests/service_overview/dependencies/index.ts
@@ -9,7 +9,6 @@ import expect from '@kbn/expect';
 import { last, omit, pick, sortBy } from 'lodash';
 import { ValuesType } from 'utility-types';
 import { Node, NodeType } from '../../../../../plugins/apm/common/connections';
-import { createApmApiSupertest } from '../../../common/apm_api_supertest';
 import { roundNumber } from '../../../utils';
 import {
   ENVIRONMENT_ALL,
@@ -22,7 +21,7 @@ import { registry } from '../../../common/registry';
 import { apmDependenciesMapping, createServiceDependencyDocs } from './es_utils';
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const apmApiSupertest = createApmApiSupertest(getService('supertest'));
+  const apmApiClient = getService('apmApiClient');
   const es = getService('es');
 
   const archiveName = 'apm_8.0.0';
@@ -37,7 +36,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
     { config: 'basic', archives: [] },
     () => {
       it('handles the empty state', async () => {
-        const response = await apmApiSupertest({
+        const response = await apmApiClient.readUser({
           endpoint: `GET /api/apm/services/{serviceName}/dependencies`,
           params: {
             path: { serviceName: 'opbeans-java' },
@@ -212,7 +211,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
           refresh: 'wait_for',
         });
 
-        response = await apmApiSupertest({
+        response = await apmApiClient.readUser({
           endpoint: `GET /api/apm/services/{serviceName}/dependencies`,
           params: {
             path: { serviceName: 'opbeans-java' },
@@ -314,7 +313,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
       };
 
       before(async () => {
-        response = await apmApiSupertest({
+        response = await apmApiClient.readUser({
           endpoint: `GET /api/apm/services/{serviceName}/dependencies`,
           params: {
             path: { serviceName: 'opbeans-python' },
diff --git a/x-pack/test/apm_api_integration/tests/service_overview/instance_details.ts b/x-pack/test/apm_api_integration/tests/service_overview/instance_details.ts
index 52525abe50373..40bfbbb699e65 100644
--- a/x-pack/test/apm_api_integration/tests/service_overview/instance_details.ts
+++ b/x-pack/test/apm_api_integration/tests/service_overview/instance_details.ts
@@ -6,18 +6,18 @@
  */
 import url from 'url';
 import expect from '@kbn/expect';
-import { FtrProviderContext } from '../../../common/ftr_provider_context';
+import { FtrProviderContext } from '../../common/ftr_provider_context';
 import archives from '../../common/fixtures/es_archiver/archives_metadata';
 import { registry } from '../../common/registry';
 import { APIReturnType } from '../../../../plugins/apm/public/services/rest/createCallApmApi';
 import { getServiceNodeIds } from './get_service_node_ids';
-import { createApmApiSupertest } from '../../common/apm_api_supertest';
+import { createSupertestClient } from '../../common/apm_api_supertest';
 
 type ServiceOverviewInstanceDetails = APIReturnType<'GET /api/apm/services/{serviceName}/service_overview_instances/details/{serviceNodeName}'>;
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
-  const apmApiSupertest = createApmApiSupertest(supertest);
+  const supertest = getService('legacySupertestAsApmReadUser');
+  const apmApiSupertest = createSupertestClient(supertest);
 
   const archiveName = 'apm_8.0.0';
   const { start, end } = archives[archiveName];
diff --git a/x-pack/test/apm_api_integration/tests/service_overview/instances_detailed_statistics.ts b/x-pack/test/apm_api_integration/tests/service_overview/instances_detailed_statistics.ts
index cdea0da2671bb..ffadb7fcf7801 100644
--- a/x-pack/test/apm_api_integration/tests/service_overview/instances_detailed_statistics.ts
+++ b/x-pack/test/apm_api_integration/tests/service_overview/instances_detailed_statistics.ts
@@ -14,12 +14,12 @@ import { APIReturnType } from '../../../../plugins/apm/public/services/rest/crea
 import { FtrProviderContext } from '../../common/ftr_provider_context';
 import archives from '../../common/fixtures/es_archiver/archives_metadata';
 import { registry } from '../../common/registry';
-import { createApmApiSupertest } from '../../common/apm_api_supertest';
+import { createSupertestClient } from '../../common/apm_api_supertest';
 import { getServiceNodeIds } from './get_service_node_ids';
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
-  const apmApiSupertest = createApmApiSupertest(supertest);
+  const supertest = getService('legacySupertestAsApmReadUser');
+  const apmApiSupertest = createSupertestClient(supertest);
 
   const archiveName = 'apm_8.0.0';
   const { start, end } = archives[archiveName];
diff --git a/x-pack/test/apm_api_integration/tests/service_overview/instances_main_statistics.ts b/x-pack/test/apm_api_integration/tests/service_overview/instances_main_statistics.ts
index 52ead7f2b7b81..355778757af3c 100644
--- a/x-pack/test/apm_api_integration/tests/service_overview/instances_main_statistics.ts
+++ b/x-pack/test/apm_api_integration/tests/service_overview/instances_main_statistics.ts
@@ -13,11 +13,11 @@ import { isFiniteNumber } from '../../../../plugins/apm/common/utils/is_finite_n
 import { FtrProviderContext } from '../../common/ftr_provider_context';
 import archives from '../../common/fixtures/es_archiver/archives_metadata';
 import { registry } from '../../common/registry';
-import { createApmApiSupertest } from '../../common/apm_api_supertest';
+
 import { LatencyAggregationType } from '../../../../plugins/apm/common/latency_aggregation_types';
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const apmApiSupertest = createApmApiSupertest(getService('supertest'));
+  const apmApiClient = getService('apmApiClient');
 
   const archiveName = 'apm_8.0.0';
   const { start, end } = archives[archiveName];
@@ -28,7 +28,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
     () => {
       describe('when data is not loaded', () => {
         it('handles the empty state', async () => {
-          const response = await apmApiSupertest({
+          const response = await apmApiClient.readUser({
             endpoint: `GET /api/apm/services/{serviceName}/service_overview_instances/main_statistics`,
             params: {
               path: { serviceName: 'opbeans-java' },
@@ -62,7 +62,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
         };
 
         beforeEach(async () => {
-          response = await apmApiSupertest({
+          response = await apmApiClient.readUser({
             endpoint: `GET /api/apm/services/{serviceName}/service_overview_instances/main_statistics`,
             params: {
               path: { serviceName: 'opbeans-java' },
@@ -133,7 +133,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
         };
 
         beforeEach(async () => {
-          response = await apmApiSupertest({
+          response = await apmApiClient.readUser({
             endpoint: `GET /api/apm/services/{serviceName}/service_overview_instances/main_statistics`,
             params: {
               path: { serviceName: 'opbeans-ruby' },
@@ -201,7 +201,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
         };
 
         beforeEach(async () => {
-          response = await apmApiSupertest({
+          response = await apmApiClient.readUser({
             endpoint: `GET /api/apm/services/{serviceName}/service_overview_instances/main_statistics`,
             params: {
               path: { serviceName: 'opbeans-java' },
diff --git a/x-pack/test/apm_api_integration/tests/services/agent.ts b/x-pack/test/apm_api_integration/tests/services/agent.ts
index 5fd222c72a3b2..3e44dbe685cd8 100644
--- a/x-pack/test/apm_api_integration/tests/services/agent.ts
+++ b/x-pack/test/apm_api_integration/tests/services/agent.ts
@@ -11,7 +11,7 @@ import archives from '../../common/fixtures/es_archiver/archives_metadata';
 import { registry } from '../../common/registry';
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   const archiveName = 'apm_8.0.0';
   const range = archives[archiveName];
diff --git a/x-pack/test/apm_api_integration/tests/services/annotations.ts b/x-pack/test/apm_api_integration/tests/services/annotations.ts
index 0a885301643c6..32ade1036e629 100644
--- a/x-pack/test/apm_api_integration/tests/services/annotations.ts
+++ b/x-pack/test/apm_api_integration/tests/services/annotations.ts
@@ -14,8 +14,8 @@ import { registry } from '../../common/registry';
 const DEFAULT_INDEX_NAME = 'observability-annotations';
 
 export default function annotationApiTests({ getService }: FtrProviderContext) {
-  const supertestRead = getService('supertestAsApmReadUser');
-  const supertestWrite = getService('supertestAsApmAnnotationsWriteUser');
+  const supertestRead = getService('legacySupertestAsApmReadUser');
+  const supertestWrite = getService('legacySupertestAsApmAnnotationsWriteUser');
   const es = getService('es');
 
   function expectContainsObj(source: JsonObject, expected: JsonObject) {
diff --git a/x-pack/test/apm_api_integration/tests/services/derived_annotations.ts b/x-pack/test/apm_api_integration/tests/services/derived_annotations.ts
index 2ff4eb7e73306..f401d69b1b002 100644
--- a/x-pack/test/apm_api_integration/tests/services/derived_annotations.ts
+++ b/x-pack/test/apm_api_integration/tests/services/derived_annotations.ts
@@ -7,12 +7,12 @@
 
 import expect from '@kbn/expect';
 import { APIReturnType } from '../../../../plugins/apm/public/services/rest/createCallApmApi';
-import { createApmApiSupertest } from '../../common/apm_api_supertest';
+
 import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
 export default function annotationApiTests({ getService }: FtrProviderContext) {
-  const supertestRead = createApmApiSupertest(getService('supertestAsApmReadUser'));
+  const apmApiClient = getService('apmApiClient');
   const es = getService('es');
 
   const dates = [
@@ -128,7 +128,7 @@ export default function annotationApiTests({ getService }: FtrProviderContext) {
           });
 
           response = (
-            await supertestRead({
+            await apmApiClient.readUser({
               endpoint: 'GET /api/apm/services/{serviceName}/annotation/search',
               params: {
                 path: {
diff --git a/x-pack/test/apm_api_integration/tests/services/error_groups_detailed_statistics.ts b/x-pack/test/apm_api_integration/tests/services/error_groups_detailed_statistics.ts
index d7eea2d24ddd3..24507c1e42708 100644
--- a/x-pack/test/apm_api_integration/tests/services/error_groups_detailed_statistics.ts
+++ b/x-pack/test/apm_api_integration/tests/services/error_groups_detailed_statistics.ts
@@ -12,14 +12,14 @@ import archives_metadata from '../../common/fixtures/es_archiver/archives_metada
 import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 import { APIReturnType } from '../../../../plugins/apm/public/services/rest/createCallApmApi';
-import { createApmApiSupertest } from '../../common/apm_api_supertest';
+import { createSupertestClient } from '../../common/apm_api_supertest';
 import { getErrorGroupIds } from './get_error_group_ids';
 
 type ErrorGroupsDetailedStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/error_groups/detailed_statistics'>;
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
-  const apmApiSupertest = createApmApiSupertest(supertest);
+  const supertest = getService('legacySupertestAsApmReadUser');
+  const apmApiSupertest = createSupertestClient(supertest);
 
   const archiveName = 'apm_8.0.0';
   const metadata = archives_metadata[archiveName];
diff --git a/x-pack/test/apm_api_integration/tests/services/error_groups_main_statistics.ts b/x-pack/test/apm_api_integration/tests/services/error_groups_main_statistics.ts
index 1dbd01cd9b4f7..c853bd60e43e0 100644
--- a/x-pack/test/apm_api_integration/tests/services/error_groups_main_statistics.ts
+++ b/x-pack/test/apm_api_integration/tests/services/error_groups_main_statistics.ts
@@ -15,7 +15,7 @@ import { APIReturnType } from '../../../../plugins/apm/public/services/rest/crea
 type ErrorGroupsMainStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/error_groups/main_statistics'>;
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   const archiveName = 'apm_8.0.0';
   const metadata = archives_metadata[archiveName];
diff --git a/x-pack/test/apm_api_integration/tests/services/service_details.ts b/x-pack/test/apm_api_integration/tests/services/service_details.ts
index 1f4b4a2c9909b..263aaa504946b 100644
--- a/x-pack/test/apm_api_integration/tests/services/service_details.ts
+++ b/x-pack/test/apm_api_integration/tests/services/service_details.ts
@@ -12,7 +12,7 @@ import archives from '../../common/fixtures/es_archiver/archives_metadata';
 import { registry } from '../../common/registry';
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   const archiveName = 'apm_8.0.0';
   const { start, end } = archives[archiveName];
diff --git a/x-pack/test/apm_api_integration/tests/services/service_icons.ts b/x-pack/test/apm_api_integration/tests/services/service_icons.ts
index 5f16ad1d57f2b..619603efc4128 100644
--- a/x-pack/test/apm_api_integration/tests/services/service_icons.ts
+++ b/x-pack/test/apm_api_integration/tests/services/service_icons.ts
@@ -12,7 +12,7 @@ import archives from '../../common/fixtures/es_archiver/archives_metadata';
 import { registry } from '../../common/registry';
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   const archiveName = 'apm_8.0.0';
   const { start, end } = archives[archiveName];
diff --git a/x-pack/test/apm_api_integration/tests/services/services_detailed_statistics.ts b/x-pack/test/apm_api_integration/tests/services/services_detailed_statistics.ts
index f19cb71018be0..043a3cdc2c9a3 100644
--- a/x-pack/test/apm_api_integration/tests/services/services_detailed_statistics.ts
+++ b/x-pack/test/apm_api_integration/tests/services/services_detailed_statistics.ts
@@ -16,7 +16,7 @@ import { isFiniteNumber } from '../../../../plugins/apm/common/utils/is_finite_n
 type ServicesDetailedStatisticsReturn = APIReturnType<'GET /api/apm/services/detailed_statistics'>;
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   const archiveName = 'apm_8.0.0';
   const metadata = archives_metadata[archiveName];
diff --git a/x-pack/test/apm_api_integration/tests/services/throughput.ts b/x-pack/test/apm_api_integration/tests/services/throughput.ts
index 9134b13e18db1..03815c9947e9a 100644
--- a/x-pack/test/apm_api_integration/tests/services/throughput.ts
+++ b/x-pack/test/apm_api_integration/tests/services/throughput.ts
@@ -13,19 +13,18 @@ import { APIReturnType } from '../../../../plugins/apm/public/services/rest/crea
 import archives_metadata from '../../common/fixtures/es_archiver/archives_metadata';
 import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
-import { createApmApiSupertest } from '../../common/apm_api_supertest';
 
 type ThroughputReturn = APIReturnType<'GET /api/apm/services/{serviceName}/throughput'>;
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const apmApiSupertest = createApmApiSupertest(getService('supertest'));
+  const apmApiClient = getService('apmApiClient');
 
   const archiveName = 'apm_8.0.0';
   const metadata = archives_metadata[archiveName];
 
   registry.when('Throughput when data is not loaded', { config: 'basic', archives: [] }, () => {
     it('handles the empty state', async () => {
-      const response = await apmApiSupertest({
+      const response = await apmApiClient.readUser({
         endpoint: 'GET /api/apm/services/{serviceName}/throughput',
         params: {
           path: {
@@ -54,7 +53,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
     () => {
       describe('when querying without kql filter', () => {
         before(async () => {
-          const response = await apmApiSupertest({
+          const response = await apmApiClient.readUser({
             endpoint: 'GET /api/apm/services/{serviceName}/throughput',
             params: {
               path: {
@@ -108,7 +107,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
 
       describe('with kql filter to force transaction-based UI', () => {
         before(async () => {
-          const response = await apmApiSupertest({
+          const response = await apmApiClient.readUser({
             endpoint: 'GET /api/apm/services/{serviceName}/throughput',
             params: {
               path: {
@@ -144,7 +143,7 @@ export default function ApiTest({ getService }: FtrProviderContext) {
     { config: 'basic', archives: [archiveName] },
     () => {
       before(async () => {
-        const response = await apmApiSupertest({
+        const response = await apmApiClient.readUser({
           endpoint: 'GET /api/apm/services/{serviceName}/throughput',
           params: {
             path: {
diff --git a/x-pack/test/apm_api_integration/tests/services/top_services.ts b/x-pack/test/apm_api_integration/tests/services/top_services.ts
index 86d5db591a6ba..23b2ca7cfefe9 100644
--- a/x-pack/test/apm_api_integration/tests/services/top_services.ts
+++ b/x-pack/test/apm_api_integration/tests/services/top_services.ts
@@ -14,8 +14,10 @@ import archives_metadata from '../../common/fixtures/es_archiver/archives_metada
 import { registry } from '../../common/registry';
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
-  const supertestAsApmReadUserWithoutMlAccess = getService('supertestAsApmReadUserWithoutMlAccess');
+  const supertest = getService('legacySupertestAsApmReadUser');
+  const supertestAsApmReadUserWithoutMlAccess = getService(
+    'legacySupertestAsApmReadUserWithoutMlAccess'
+  );
 
   const archiveName = 'apm_8.0.0';
 
diff --git a/x-pack/test/apm_api_integration/tests/services/transaction_types.ts b/x-pack/test/apm_api_integration/tests/services/transaction_types.ts
index 568d75c3e9cc7..6f574b5c8e997 100644
--- a/x-pack/test/apm_api_integration/tests/services/transaction_types.ts
+++ b/x-pack/test/apm_api_integration/tests/services/transaction_types.ts
@@ -11,7 +11,7 @@ import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   const archiveName = 'apm_8.0.0';
   const metadata = archives_metadata[archiveName];
diff --git a/x-pack/test/apm_api_integration/tests/settings/agent_configuration.ts b/x-pack/test/apm_api_integration/tests/settings/agent_configuration.ts
index 166c95b5f6de7..377c933144880 100644
--- a/x-pack/test/apm_api_integration/tests/settings/agent_configuration.ts
+++ b/x-pack/test/apm_api_integration/tests/settings/agent_configuration.ts
@@ -9,52 +9,51 @@ import expect from '@kbn/expect';
 import { omit, orderBy } from 'lodash';
 import { AgentConfigurationIntake } from '../../../../plugins/apm/common/agent_configuration/configuration_types';
 import { AgentConfigSearchParams } from '../../../../plugins/apm/server/routes/settings/agent_configuration';
-import { createApmApiSupertest } from '../../common/apm_api_supertest';
+
 import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
 export default function agentConfigurationTests({ getService }: FtrProviderContext) {
-  const supertestRead = createApmApiSupertest(getService('supertestAsApmReadUser'));
-  const supertestWrite = createApmApiSupertest(getService('supertestAsApmWriteUser'));
+  const apmApiClient = getService('apmApiClient');
 
   const log = getService('log');
 
   const archiveName = 'apm_8.0.0';
 
   function getServices() {
-    return supertestRead({
+    return apmApiClient.readUser({
       endpoint: 'GET /api/apm/settings/agent-configuration/services',
     });
   }
 
   async function getEnvironments(serviceName: string) {
-    return supertestRead({
+    return apmApiClient.readUser({
       endpoint: 'GET /api/apm/settings/agent-configuration/environments',
       params: { query: { serviceName } },
     });
   }
 
   function getAgentName(serviceName: string) {
-    return supertestRead({
+    return apmApiClient.readUser({
       endpoint: 'GET /api/apm/settings/agent-configuration/agent_name',
       params: { query: { serviceName } },
     });
   }
 
   function searchConfigurations(configuration: AgentConfigSearchParams) {
-    return supertestRead({
+    return apmApiClient.readUser({
       endpoint: 'POST /api/apm/settings/agent-configuration/search',
       params: { body: configuration },
     });
   }
 
   function getAllConfigurations() {
-    return supertestRead({ endpoint: 'GET /api/apm/settings/agent-configuration' });
+    return apmApiClient.readUser({ endpoint: 'GET /api/apm/settings/agent-configuration' });
   }
 
   function createConfiguration(configuration: AgentConfigurationIntake, { user = 'write' } = {}) {
     log.debug('creating configuration', configuration.service);
-    const supertestClient = user === 'read' ? supertestRead : supertestWrite;
+    const supertestClient = user === 'read' ? apmApiClient.readUser : apmApiClient.writeUser;
 
     return supertestClient({
       endpoint: 'PUT /api/apm/settings/agent-configuration',
@@ -64,7 +63,7 @@ export default function agentConfigurationTests({ getService }: FtrProviderConte
 
   function updateConfiguration(config: AgentConfigurationIntake, { user = 'write' } = {}) {
     log.debug('updating configuration', config.service);
-    const supertestClient = user === 'read' ? supertestRead : supertestWrite;
+    const supertestClient = user === 'read' ? apmApiClient.readUser : apmApiClient.writeUser;
 
     return supertestClient({
       endpoint: 'PUT /api/apm/settings/agent-configuration',
@@ -74,7 +73,7 @@ export default function agentConfigurationTests({ getService }: FtrProviderConte
 
   function deleteConfiguration({ service }: AgentConfigurationIntake, { user = 'write' } = {}) {
     log.debug('deleting configuration', service);
-    const supertestClient = user === 'read' ? supertestRead : supertestWrite;
+    const supertestClient = user === 'read' ? apmApiClient.readUser : apmApiClient.writeUser;
 
     return supertestClient({
       endpoint: 'DELETE /api/apm/settings/agent-configuration',
diff --git a/x-pack/test/apm_api_integration/tests/settings/anomaly_detection/basic.ts b/x-pack/test/apm_api_integration/tests/settings/anomaly_detection/basic.ts
index 9a4968e50bfc2..40708adb754a8 100644
--- a/x-pack/test/apm_api_integration/tests/settings/anomaly_detection/basic.ts
+++ b/x-pack/test/apm_api_integration/tests/settings/anomaly_detection/basic.ts
@@ -10,9 +10,9 @@ import { registry } from '../../../common/registry';
 import { FtrProviderContext } from '../../../common/ftr_provider_context';
 
 export default function apiTest({ getService }: FtrProviderContext) {
-  const noAccessUser = getService('supertestAsNoAccessUser');
-  const readUser = getService('supertestAsApmReadUser');
-  const writeUser = getService('supertestAsApmWriteUser');
+  const noAccessUser = getService('legacySupertestAsNoAccessUser');
+  const readUser = getService('legacySupertestAsApmReadUser');
+  const writeUser = getService('legacySupertestAsApmWriteUser');
 
   type SupertestAsUser = typeof noAccessUser | typeof readUser | typeof writeUser;
 
diff --git a/x-pack/test/apm_api_integration/tests/settings/anomaly_detection/no_access_user.ts b/x-pack/test/apm_api_integration/tests/settings/anomaly_detection/no_access_user.ts
index 822053e3fc12a..135038755dc6e 100644
--- a/x-pack/test/apm_api_integration/tests/settings/anomaly_detection/no_access_user.ts
+++ b/x-pack/test/apm_api_integration/tests/settings/anomaly_detection/no_access_user.ts
@@ -10,7 +10,7 @@ import { registry } from '../../../common/registry';
 import { FtrProviderContext } from '../../../common/ftr_provider_context';
 
 export default function apiTest({ getService }: FtrProviderContext) {
-  const noAccessUser = getService('supertestAsNoAccessUser');
+  const noAccessUser = getService('legacySupertestAsNoAccessUser');
 
   function getJobs() {
     return noAccessUser.get(`/api/apm/settings/anomaly-detection/jobs`).set('kbn-xsrf', 'foo');
diff --git a/x-pack/test/apm_api_integration/tests/settings/anomaly_detection/read_user.ts b/x-pack/test/apm_api_integration/tests/settings/anomaly_detection/read_user.ts
index fb4069eae09d9..3beebb434b317 100644
--- a/x-pack/test/apm_api_integration/tests/settings/anomaly_detection/read_user.ts
+++ b/x-pack/test/apm_api_integration/tests/settings/anomaly_detection/read_user.ts
@@ -10,7 +10,7 @@ import { registry } from '../../../common/registry';
 import { FtrProviderContext } from '../../../common/ftr_provider_context';
 
 export default function apiTest({ getService }: FtrProviderContext) {
-  const apmReadUser = getService('supertestAsApmReadUser');
+  const apmReadUser = getService('legacySupertestAsApmReadUser');
 
   function getJobs() {
     return apmReadUser.get(`/api/apm/settings/anomaly-detection/jobs`).set('kbn-xsrf', 'foo');
diff --git a/x-pack/test/apm_api_integration/tests/settings/anomaly_detection/write_user.ts b/x-pack/test/apm_api_integration/tests/settings/anomaly_detection/write_user.ts
index 322c2a4a049cf..7c13533a14291 100644
--- a/x-pack/test/apm_api_integration/tests/settings/anomaly_detection/write_user.ts
+++ b/x-pack/test/apm_api_integration/tests/settings/anomaly_detection/write_user.ts
@@ -7,20 +7,19 @@
 
 import expect from '@kbn/expect';
 import { countBy } from 'lodash';
-import { createApmApiSupertest } from '../../../common/apm_api_supertest';
 import { registry } from '../../../common/registry';
 import { FtrProviderContext } from '../../../common/ftr_provider_context';
 
 export default function apiTest({ getService }: FtrProviderContext) {
-  const apmWriteUser = getService('supertestAsApmWriteUser');
-  const apmApiWriteUser = createApmApiSupertest(getService('supertestAsApmWriteUser'));
+  const apmApiClient = getService('apmApiClient');
+  const legacyWriteUserClient = getService('legacySupertestAsApmWriteUser');
 
   function getJobs() {
-    return apmApiWriteUser({ endpoint: `GET /api/apm/settings/anomaly-detection/jobs` });
+    return apmApiClient.writeUser({ endpoint: `GET /api/apm/settings/anomaly-detection/jobs` });
   }
 
   function createJobs(environments: string[]) {
-    return apmApiWriteUser({
+    return apmApiClient.writeUser({
       endpoint: `POST /api/apm/settings/anomaly-detection/jobs`,
       params: {
         body: { environments },
@@ -29,7 +28,10 @@ export default function apiTest({ getService }: FtrProviderContext) {
   }
 
   function deleteJobs(jobIds: string[]) {
-    return apmWriteUser.post(`/api/ml/jobs/delete_jobs`).send({ jobIds }).set('kbn-xsrf', 'foo');
+    return legacyWriteUserClient
+      .post(`/api/ml/jobs/delete_jobs`)
+      .send({ jobIds })
+      .set('kbn-xsrf', 'foo');
   }
 
   registry.when('ML jobs', { config: 'trial', archives: [] }, () => {
diff --git a/x-pack/test/apm_api_integration/tests/settings/custom_link.ts b/x-pack/test/apm_api_integration/tests/settings/custom_link.ts
index 7f1fb7df68390..03b2ad4aa3212 100644
--- a/x-pack/test/apm_api_integration/tests/settings/custom_link.ts
+++ b/x-pack/test/apm_api_integration/tests/settings/custom_link.ts
@@ -9,11 +9,10 @@ import expect from '@kbn/expect';
 import { CustomLink } from '../../../../plugins/apm/common/custom_link/custom_link_types';
 import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
-import { ApmApiError, createApmApiSupertest } from '../../common/apm_api_supertest';
+import { ApmApiError } from '../../common/apm_api_supertest';
 
 export default function customLinksTests({ getService }: FtrProviderContext) {
-  const supertestRead = createApmApiSupertest(getService('supertest'));
-  const supertestWrite = createApmApiSupertest(getService('supertestAsApmWriteUser'));
+  const apmApiClient = getService('apmApiClient');
   const log = getService('log');
 
   const archiveName = 'apm_8.0.0';
@@ -50,6 +49,7 @@ export default function customLinksTests({ getService }: FtrProviderContext) {
             { key: 'transaction.type', value: 'qux' },
           ],
         } as CustomLink;
+
         await createCustomLink(customLink);
       });
 
@@ -125,7 +125,7 @@ export default function customLinksTests({ getService }: FtrProviderContext) {
       });
 
       it('fetches a transaction sample', async () => {
-        const response = await supertestRead({
+        const response = await apmApiClient.readUser({
           endpoint: 'GET /api/apm/settings/custom_links/transaction',
           params: {
             query: {
@@ -140,7 +140,7 @@ export default function customLinksTests({ getService }: FtrProviderContext) {
   );
 
   function searchCustomLinks(filters?: any) {
-    return supertestRead({
+    return apmApiClient.readUser({
       endpoint: 'GET /api/apm/settings/custom_links',
       params: {
         query: filters,
@@ -151,7 +151,7 @@ export default function customLinksTests({ getService }: FtrProviderContext) {
   async function createCustomLink(customLink: CustomLink) {
     log.debug('creating configuration', customLink);
 
-    return supertestWrite({
+    return apmApiClient.writeUser({
       endpoint: 'POST /api/apm/settings/custom_links',
       params: {
         body: customLink,
@@ -162,7 +162,7 @@ export default function customLinksTests({ getService }: FtrProviderContext) {
   async function updateCustomLink(id: string, customLink: CustomLink) {
     log.debug('updating configuration', id, customLink);
 
-    return supertestWrite({
+    return apmApiClient.writeUser({
       endpoint: 'PUT /api/apm/settings/custom_links/{id}',
       params: {
         path: { id },
@@ -174,7 +174,7 @@ export default function customLinksTests({ getService }: FtrProviderContext) {
   async function deleteCustomLink(id: string) {
     log.debug('deleting configuration', id);
 
-    return supertestWrite({
+    return apmApiClient.writeUser({
       endpoint: 'DELETE /api/apm/settings/custom_links/{id}',
       params: { path: { id } },
     });
diff --git a/x-pack/test/apm_api_integration/tests/traces/top_traces.ts b/x-pack/test/apm_api_integration/tests/traces/top_traces.ts
index 29604bfc990df..705c3d9ff4a15 100644
--- a/x-pack/test/apm_api_integration/tests/traces/top_traces.ts
+++ b/x-pack/test/apm_api_integration/tests/traces/top_traces.ts
@@ -12,7 +12,7 @@ import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   const archiveName = 'apm_8.0.0';
   const metadata = archives_metadata[archiveName];
diff --git a/x-pack/test/apm_api_integration/tests/transactions/breakdown.ts b/x-pack/test/apm_api_integration/tests/transactions/breakdown.ts
index 92fdbc3588e39..de23b8fea5363 100644
--- a/x-pack/test/apm_api_integration/tests/transactions/breakdown.ts
+++ b/x-pack/test/apm_api_integration/tests/transactions/breakdown.ts
@@ -11,7 +11,7 @@ import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   const archiveName = 'apm_8.0.0';
   const metadata = archives_metadata[archiveName];
diff --git a/x-pack/test/apm_api_integration/tests/transactions/error_rate.ts b/x-pack/test/apm_api_integration/tests/transactions/error_rate.ts
index bb6b465c9927c..517812c236c34 100644
--- a/x-pack/test/apm_api_integration/tests/transactions/error_rate.ts
+++ b/x-pack/test/apm_api_integration/tests/transactions/error_rate.ts
@@ -17,7 +17,7 @@ import { registry } from '../../common/registry';
 type ErrorRate = APIReturnType<'GET /api/apm/services/{serviceName}/transactions/charts/error_rate'>;
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   const archiveName = 'apm_8.0.0';
 
diff --git a/x-pack/test/apm_api_integration/tests/transactions/latency.ts b/x-pack/test/apm_api_integration/tests/transactions/latency.ts
index 7fa2c76dd54d8..5798da3019982 100644
--- a/x-pack/test/apm_api_integration/tests/transactions/latency.ts
+++ b/x-pack/test/apm_api_integration/tests/transactions/latency.ts
@@ -17,7 +17,7 @@ import { registry } from '../../common/registry';
 type LatencyChartReturnType = APIReturnType<'GET /api/apm/services/{serviceName}/transactions/charts/latency'>;
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   const archiveName = 'apm_8.0.0';
 
diff --git a/x-pack/test/apm_api_integration/tests/transactions/trace_samples.ts b/x-pack/test/apm_api_integration/tests/transactions/trace_samples.ts
index 73b1bbfd781d0..fca9222e69bd0 100644
--- a/x-pack/test/apm_api_integration/tests/transactions/trace_samples.ts
+++ b/x-pack/test/apm_api_integration/tests/transactions/trace_samples.ts
@@ -12,7 +12,7 @@ import { FtrProviderContext } from '../../common/ftr_provider_context';
 import { registry } from '../../common/registry';
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   const archiveName = 'apm_8.0.0';
   const metadata = archives_metadata[archiveName];
diff --git a/x-pack/test/apm_api_integration/tests/transactions/transactions_groups_detailed_statistics.ts b/x-pack/test/apm_api_integration/tests/transactions/transactions_groups_detailed_statistics.ts
index 3a97195ec587f..965c96bcf287b 100644
--- a/x-pack/test/apm_api_integration/tests/transactions/transactions_groups_detailed_statistics.ts
+++ b/x-pack/test/apm_api_integration/tests/transactions/transactions_groups_detailed_statistics.ts
@@ -18,7 +18,7 @@ import { removeEmptyCoordinates, roundNumber } from '../../utils';
 type TransactionsGroupsDetailedStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/transactions/groups/detailed_statistics'>;
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   const archiveName = 'apm_8.0.0';
   const { start, end } = archives[archiveName];
diff --git a/x-pack/test/apm_api_integration/tests/transactions/transactions_groups_main_statistics.ts b/x-pack/test/apm_api_integration/tests/transactions/transactions_groups_main_statistics.ts
index d0672946ad019..406d6fa1333d9 100644
--- a/x-pack/test/apm_api_integration/tests/transactions/transactions_groups_main_statistics.ts
+++ b/x-pack/test/apm_api_integration/tests/transactions/transactions_groups_main_statistics.ts
@@ -16,7 +16,7 @@ import { registry } from '../../common/registry';
 type TransactionsGroupsPrimaryStatistics = APIReturnType<'GET /api/apm/services/{serviceName}/transactions/groups/main_statistics'>;
 
 export default function ApiTest({ getService }: FtrProviderContext) {
-  const supertest = getService('supertest');
+  const supertest = getService('legacySupertestAsApmReadUser');
 
   const archiveName = 'apm_8.0.0';
   const { start, end } = archives[archiveName];
diff --git a/x-pack/test/functional/apps/observability/feature_controls/observability_security.ts b/x-pack/test/functional/apps/observability/feature_controls/observability_security.ts
index 1d52088ede3da..69bf995c49ae4 100644
--- a/x-pack/test/functional/apps/observability/feature_controls/observability_security.ts
+++ b/x-pack/test/functional/apps/observability/feature_controls/observability_security.ts
@@ -10,7 +10,7 @@ import { FtrProviderContext } from '../../../ftr_provider_context';
 
 export default function ({ getPageObjects, getService }: FtrProviderContext) {
   const esArchiver = getService('esArchiver');
-  const security = getService('security');
+  const observability = getService('observability');
   const PageObjects = getPageObjects([
     'common',
     'observability',
@@ -20,6 +20,7 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
   ]);
   const appsMenu = getService('appsMenu');
   const testSubjects = getService('testSubjects');
+
   describe('observability security feature controls', function () {
     this.tags(['skipFirefox']);
     before(async () => {
@@ -32,39 +33,20 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
 
     describe('observability cases all privileges', () => {
       before(async () => {
-        await security.role.create('cases_observability_all_role', {
-          elasticsearch: { cluster: [], indices: [], run_as: [] },
-          kibana: [
-            { spaces: ['*'], base: [], feature: { observabilityCases: ['all'], logs: ['all'] } },
-          ],
-        });
-
-        await security.user.create('cases_observability_all_user', {
-          password: 'cases_observability_all_user-password',
-          roles: ['cases_observability_all_role'],
-          full_name: 'test user',
-        });
-
-        await PageObjects.security.forceLogout();
-
-        await PageObjects.security.login(
-          'cases_observability_all_user',
-          'cases_observability_all_user-password',
-          {
-            expectSpaceSelector: false,
-          }
+        await observability.users.setTestUserRole(
+          observability.users.defineBasicObservabilityRole({
+            observabilityCases: ['all'],
+            logs: ['all'],
+          })
         );
       });
 
       after(async () => {
-        await PageObjects.security.forceLogout();
-        await Promise.all([
-          security.role.delete('cases_observability_all_role'),
-          security.user.delete('cases_observability_all_user'),
-        ]);
+        await observability.users.restoreDefaultTestUserRole();
       });
 
       it('shows observability/cases navlink', async () => {
+        await PageObjects.common.navigateToActualUrl('observability');
         const navLinks = (await appsMenu.readLinks()).map((link) => link.text);
         expect(navLinks).to.contain('Cases');
       });
@@ -101,38 +83,20 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
 
     describe('observability cases read-only privileges', () => {
       before(async () => {
-        await security.role.create('cases_observability_read_role', {
-          elasticsearch: { cluster: [], indices: [], run_as: [] },
-          kibana: [
-            {
-              spaces: ['*'],
-              base: [],
-              feature: { observabilityCases: ['read'], logs: ['all'] },
-            },
-          ],
-        });
-
-        await security.user.create('cases_observability_read_user', {
-          password: 'cases_observability_read_user-password',
-          roles: ['cases_observability_read_role'],
-          full_name: 'test user',
-        });
-
-        await PageObjects.security.login(
-          'cases_observability_read_user',
-          'cases_observability_read_user-password',
-          {
-            expectSpaceSelector: false,
-          }
+        await observability.users.setTestUserRole(
+          observability.users.defineBasicObservabilityRole({
+            observabilityCases: ['read'],
+            logs: ['all'],
+          })
         );
       });
 
       after(async () => {
-        await security.role.delete('cases_observability_read_role');
-        await security.user.delete('cases_observability_read_user');
+        await observability.users.restoreDefaultTestUserRole();
       });
 
       it('shows observability/cases navlink', async () => {
+        await PageObjects.common.navigateToActualUrl('observability');
         const navLinks = (await appsMenu.readLinks()).map((link) => link.text);
         expect(navLinks).to.contain('Cases');
       });
@@ -170,36 +134,14 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
 
     describe('no observability privileges', () => {
       before(async () => {
-        await security.role.create('no_observability_privileges_role', {
+        await observability.users.setTestUserRole({
           elasticsearch: { cluster: [], indices: [], run_as: [] },
-          kibana: [
-            {
-              feature: {
-                discover: ['all'],
-              },
-              spaces: ['*'],
-            },
-          ],
+          kibana: [{ spaces: ['*'], base: [], feature: { discover: ['all'] } }],
         });
-
-        await security.user.create('no_observability_privileges_user', {
-          password: 'no_observability_privileges_user-password',
-          roles: ['no_observability_privileges_role'],
-          full_name: 'test user',
-        });
-
-        await PageObjects.security.login(
-          'no_observability_privileges_user',
-          'no_observability_privileges_user-password',
-          {
-            expectSpaceSelector: false,
-          }
-        );
       });
 
       after(async () => {
-        await security.role.delete('no_observability_privileges_role');
-        await security.user.delete('no_observability_privileges_user');
+        await observability.users.restoreDefaultTestUserRole();
       });
 
       it(`returns a 403`, async () => {
diff --git a/x-pack/test/functional/services/index.ts b/x-pack/test/functional/services/index.ts
index 273db212400ab..5e40eb040178b 100644
--- a/x-pack/test/functional/services/index.ts
+++ b/x-pack/test/functional/services/index.ts
@@ -60,6 +60,7 @@ import {
   DashboardPanelTimeRangeProvider,
 } from './dashboard';
 import { SearchSessionsService } from './search_sessions';
+import { ObservabilityProvider } from './observability';
 
 // define the name and providers for services that should be
 // available to your tests. If you don't specify anything here
@@ -110,4 +111,5 @@ export const services = {
   dashboardPanelTimeRange: DashboardPanelTimeRangeProvider,
   reporting: ReportingFunctionalProvider,
   searchSessions: SearchSessionsService,
+  observability: ObservabilityProvider,
 };
diff --git a/x-pack/test/functional/services/observability/index.ts b/x-pack/test/functional/services/observability/index.ts
new file mode 100644
index 0000000000000..14f931d93b56f
--- /dev/null
+++ b/x-pack/test/functional/services/observability/index.ts
@@ -0,0 +1,17 @@
+/*
+ * 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';
+import { ObservabilityUsersProvider } from './users';
+
+export function ObservabilityProvider(context: FtrProviderContext) {
+  const users = ObservabilityUsersProvider(context);
+
+  return {
+    users,
+  };
+}
diff --git a/x-pack/test/functional/services/observability/users.ts b/x-pack/test/functional/services/observability/users.ts
new file mode 100644
index 0000000000000..78e8b3346cc67
--- /dev/null
+++ b/x-pack/test/functional/services/observability/users.ts
@@ -0,0 +1,92 @@
+/*
+ * 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 { Role } from '../../../../plugins/security/common/model';
+import { FtrProviderContext } from '../../ftr_provider_context';
+
+type CreateRolePayload = Pick<Role, 'metadata' | 'elasticsearch' | 'kibana'>;
+
+const OBSERVABILITY_TEST_ROLE_NAME = 'observability-functional-test-role';
+
+export function ObservabilityUsersProvider({ getPageObject, getService }: FtrProviderContext) {
+  const security = getService('security');
+  const commonPageObject = getPageObject('common');
+
+  /**
+   * Creates a test role and set it as the test user's role. Performs a page
+   * reload to apply the role change, but doesn't require a re-login.
+   *
+   * @arg roleDefinition - the privileges of the test role
+   */
+  const setTestUserRole = async (roleDefinition: CreateRolePayload) => {
+    // return to neutral grounds to avoid running into permission problems on reload
+    await commonPageObject.navigateToActualUrl('kibana');
+
+    await security.role.create(OBSERVABILITY_TEST_ROLE_NAME, roleDefinition);
+
+    await security.testUser.setRoles([OBSERVABILITY_TEST_ROLE_NAME]); // performs a page reload
+  };
+
+  /**
+   * Deletes the test role and restores thedefault test user role. Performs a
+   * page reload to apply the role change, but doesn't require a re-login.
+   */
+  const restoreDefaultTestUserRole = async () => {
+    await Promise.all([
+      security.role.delete(OBSERVABILITY_TEST_ROLE_NAME),
+      security.testUser.restoreDefaults(),
+    ]);
+  };
+
+  return {
+    defineBasicObservabilityRole,
+    restoreDefaultTestUserRole,
+    setTestUserRole,
+  };
+}
+
+/**
+ * Generates a combination of Elasticsearch and Kibana privileges for given
+ * observability features.
+ */
+const defineBasicObservabilityRole = (
+  features: Partial<{
+    observabilityCases: string[];
+    apm: string[];
+    logs: string[];
+    infrastructure: string[];
+    uptime: string[];
+  }>
+): CreateRolePayload => {
+  return {
+    elasticsearch: {
+      cluster: ['all'],
+      indices: [
+        ...((features.logs?.length ?? 0) > 0
+          ? [{ names: ['filebeat-*', 'logs-*'], privileges: ['all'] }]
+          : []),
+        ...((features.infrastructure?.length ?? 0) > 0
+          ? [{ names: ['metricbeat-*', 'metrics-*'], privileges: ['all'] }]
+          : []),
+        ...((features.apm?.length ?? 0) > 0 ? [{ names: ['apm-*'], privileges: ['all'] }] : []),
+        ...((features.uptime?.length ?? 0) > 0
+          ? [{ names: ['heartbeat-*,synthetics-*'], privileges: ['all'] }]
+          : []),
+      ],
+      run_as: [],
+    },
+    kibana: [
+      {
+        spaces: ['*'],
+        base: [],
+        // @ts-expect-error TypeScript doesn't distinguish between missing and
+        // undefined props yet
+        feature: features,
+      },
+    ],
+  };
+};
diff --git a/yarn.lock b/yarn.lock
index 4d49a2f06e1e9..f0a1ff1278f4e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -23379,10 +23379,10 @@ react-popper@^2.2.4:
     react-fast-compare "^3.0.1"
     warning "^4.0.2"
 
-react-query@^3.21.0:
-  version "3.21.0"
-  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.21.0.tgz#2e099a7906c38eeeb750e8b9b12121a21fa8d9ef"
-  integrity sha512-5rY5J8OD9f4EdkytjSsdCO+pqbJWKwSIMETfh/UyxqyjLURHE0IhlB+IPNPrzzu/dzK0rRxi5p0IkcCdSfizDQ==
+react-query@^3.21.1:
+  version "3.21.1"
+  resolved "https://registry.yarnpkg.com/react-query/-/react-query-3.21.1.tgz#8fe4df90bf6c6a93e0552ea9baff211d1b28f6e0"
+  integrity sha512-aKFLfNJc/m21JBXJk7sR9tDUYPjotWA4EHAKvbZ++GgxaY+eI0tqBxXmGBuJo0Pisis1W4pZWlZgoRv9yE8yjA==
   dependencies:
     "@babel/runtime" "^7.5.5"
     broadcast-channel "^3.4.1"