diff --git a/docs/apm/api.asciidoc b/docs/apm/api.asciidoc
new file mode 100644
index 0000000000000..b520cc46bef8d
--- /dev/null
+++ b/docs/apm/api.asciidoc
@@ -0,0 +1,260 @@
+[role="xpack"]
+[[apm-api]]
+== API
+
+Some APM app features are provided via a REST API:
+
+* <<agent-config-api>>
+
+TIP: Kibana provides additional <<api,REST APIs>>,
+and general information on <<using-api,how to use APIs>>.
+
+////
+*******************************************************
+////
+
+[[agent-config-api]]
+=== Agent Configuration API
+
+The Agent configuration API allows you to fine-tune your APM agent configuration,
+without needing to redeploy your application.
+
+The following Agent configuration APIs are available:
+
+* <<apm-update-config>> to create or update an Agent configuration
+* <<apm-delete-config>> to delete an Agent configuration.
+* <<apm-list-config>> to list all Agent configurations.
+* <<apm-search-config>> to search for an Agent configuration.
+
+////
+*******************************************************
+////
+
+[[apm-update-config]]
+==== Create or update configuration
+
+[[apm-update-config-req]]
+===== Request
+
+`PUT /api/apm/settings/agent-configuration`
+
+[[apm-update-config-req-body]]
+===== Request body
+
+`service`::
+(required, object) Service identifying the configuration to create or update.
+
+`name` :::
+  (required, string) Name of service
+
+`environment` :::
+  (optional, string) Environment of service
+
+`settings`::
+(required) Key/value object with settings and their corresponding value.
+
+`agent_name`::
+(optional) The agent name is used by the UI to determine which settings to display.
+
+
+[[apm-update-config-example]]
+===== Example
+
+[source,console]
+--------------------------------------------------
+PUT /api/apm/settings/agent-configuration
+{
+    "service" : {
+        "name" : "frontend",
+        "environment" : "production"
+    },
+    "settings" : {
+        "transaction_sample_rate" : 0.4,
+        "capture_body" : "off",
+        "transaction_max_spans" : 500
+    },
+    "agent_name": "nodejs"
+}
+--------------------------------------------------
+
+////
+*******************************************************
+////
+
+
+[[apm-delete-config]]
+==== Delete configuration
+
+[[apm-delete-config-req]]
+===== Request
+
+`DELETE /api/apm/settings/agent-configuration`
+
+[[apm-delete-config-req-body]]
+===== Request body
+`service`::
+(required, object) Service identifying the configuration to delete
+
+`name` :::
+  (required, string) Name of service
+
+`environment` :::
+  (optional, string) Environment of service
+
+
+[[apm-delete-config-example]]
+===== Example
+
+[source,console]
+--------------------------------------------------
+DELETE /api/apm/settings/agent-configuration
+{
+    "service" : {
+        "name" : "frontend",
+        "environment": "production"
+    }
+}
+--------------------------------------------------
+
+////
+*******************************************************
+////
+
+
+[[apm-list-config]]
+==== List configuration
+
+
+[[apm-list-config-req]]
+===== Request
+
+`GET  /api/apm/settings/agent-configuration`
+
+[[apm-list-config-body]]
+===== Response body
+
+[source,js]
+--------------------------------------------------
+[
+  {
+    "agent_name": "go",
+    "service": {
+      "name": "opbeans-go",
+      "environment": "production"
+    },
+    "settings": {
+      "transaction_sample_rate": 1,
+      "capture_body": "off",
+      "transaction_max_spans": 200
+    },
+    "@timestamp": 1581934104843,
+    "applied_by_agent": false,
+    "etag": "1e58c178efeebae15c25c539da740d21dee422fc"
+  },
+  {
+    "agent_name": "go",
+    "service": {
+      "name": "opbeans-go"
+    },
+    "settings": {
+      "transaction_sample_rate": 1,
+      "capture_body": "off",
+      "transaction_max_spans": 300
+    },
+    "@timestamp": 1581934111727,
+    "applied_by_agent": false,
+    "etag": "3eed916d3db434d9fb7f039daa681c7a04539a64"
+  },
+  {
+    "agent_name": "nodejs",
+    "service": {
+      "name": "frontend"
+    },
+    "settings": {
+      "transaction_sample_rate": 1,
+    },
+    "@timestamp": 1582031336265,
+    "applied_by_agent": false,
+    "etag": "5080ed25785b7b19f32713681e79f46996801a5b"
+  }
+]
+--------------------------------------------------
+
+[[apm-list-config-example]]
+===== Example
+
+[source,console]
+--------------------------------------------------
+GET  /api/apm/settings/agent-configuration
+--------------------------------------------------
+
+////
+*******************************************************
+////
+
+
+[[apm-search-config]]
+==== Search configuration
+
+[[apm-search-config-req]]
+===== Request
+
+`POST /api/apm/settings/agent-configuration/search`
+
+[[apm-search-config-req-body]]
+===== Request body
+
+`service`::
+(required, object) Service identifying the configuration.
+
+`name` :::
+  (required, string) Name of service
+
+`environment` :::
+  (optional, string) Environment of service
+
+`etag`::
+(required) etag is sent by the agent to indicate the etag of the last successfully applied configuration. If the etag matches an existing configuration its `applied_by_agent` property will be set to `true`. Every time a configuration is edited `applied_by_agent` is reset to `false`.
+
+[[apm-search-config-body]]
+===== Response body
+
+[source,js]
+--------------------------------------------------
+{
+  "_index": ".apm-agent-configuration",
+  "_id": "CIaqXXABmQCdPphWj8EJ",
+  "_score": 2,
+  "_source": {
+    "agent_name": "nodejs",
+    "service": {
+      "name": "frontend"
+    },
+    "settings": {
+      "transaction_sample_rate": 1,
+    },
+    "@timestamp": 1582031336265,
+    "applied_by_agent": false,
+    "etag": "5080ed25785b7b19f32713681e79f46996801a5b"
+  }
+}
+--------------------------------------------------
+
+[[apm-search-config-example]]
+===== Example
+
+[source,console]
+--------------------------------------------------
+POST /api/apm/settings/agent-configuration/search
+{
+    "etag" : "1e58c178efeebae15c25c539da740d21dee422fc",
+    "service" : {
+        "name" : "frontend",
+        "environment": "production"
+    }
+}
+--------------------------------------------------
+
+////
+*******************************************************
+////
diff --git a/docs/apm/index.asciidoc b/docs/apm/index.asciidoc
index 7eb7278cf0358..d3f0dc5b7f11f 100644
--- a/docs/apm/index.asciidoc
+++ b/docs/apm/index.asciidoc
@@ -24,3 +24,5 @@ include::getting-started.asciidoc[]
 include::bottlenecks.asciidoc[]
 
 include::using-the-apm-ui.asciidoc[]
+
+include::api.asciidoc[]
diff --git a/docs/management/advanced-options.asciidoc b/docs/management/advanced-options.asciidoc
index 80c9053dc5ae6..9d4052bbd0156 100644
--- a/docs/management/advanced-options.asciidoc
+++ b/docs/management/advanced-options.asciidoc
@@ -62,8 +62,6 @@ mentioned use "\_default_".
 `histogram:maxBars`:: Date histograms are not generated with more bars than the value of this property, scaling values
 when necessary.
 `history:limit`:: In fields that have history, such as query inputs, show this many recent values.
-`indexPattern:fieldMapping:lookBack`:: For index patterns containing timestamps in their names,
-look for this many recent matching patterns from which to query the field mapping.
 `indexPattern:placeholder`:: The default placeholder value to use in Management > Index Patterns > Create Index Pattern.
 `metaFields`:: Fields that exist outside of `_source`. Kibana merges these fields
 into the document when displaying it.
diff --git a/packages/kbn-optimizer/src/optimizer/optimizer_config.ts b/packages/kbn-optimizer/src/optimizer/optimizer_config.ts
index a258e1010fce3..1c8ae265bf6bb 100644
--- a/packages/kbn-optimizer/src/optimizer/optimizer_config.ts
+++ b/packages/kbn-optimizer/src/optimizer/optimizer_config.ts
@@ -25,6 +25,15 @@ import { Bundle, WorkerConfig } from '../common';
 import { findKibanaPlatformPlugins, KibanaPlatformPlugin } from './kibana_platform_plugins';
 import { getBundles } from './get_bundles';
 
+function pickMaxWorkerCount(dist: boolean) {
+  // don't break if cpus() returns nothing, or an empty array
+  const cpuCount = Math.max(Os.cpus()?.length, 1);
+  // if we're buiding the dist then we can use more of the system's resources to get things done a little quicker
+  const maxWorkers = dist ? cpuCount - 1 : Math.ceil(cpuCount / 3);
+  // ensure we always have at least two workers
+  return Math.max(maxWorkers, 2);
+}
+
 interface Options {
   /** absolute path to root of the repo/build */
   repoRoot: string;
@@ -110,7 +119,7 @@ export class OptimizerConfig {
 
     const maxWorkerCount = process.env.KBN_OPTIMIZER_MAX_WORKERS
       ? parseInt(process.env.KBN_OPTIMIZER_MAX_WORKERS, 10)
-      : options.maxWorkerCount ?? Math.max(Math.ceil(Math.max(Os.cpus()?.length, 1) / 3), 2);
+      : options.maxWorkerCount ?? pickMaxWorkerCount(dist);
     if (typeof maxWorkerCount !== 'number' || !Number.isFinite(maxWorkerCount)) {
       throw new TypeError('worker count must be a number');
     }
diff --git a/packages/kbn-optimizer/src/worker/webpack.config.ts b/packages/kbn-optimizer/src/worker/webpack.config.ts
index 22b927d4638d7..3c6ae78bc4d91 100644
--- a/packages/kbn-optimizer/src/worker/webpack.config.ts
+++ b/packages/kbn-optimizer/src/worker/webpack.config.ts
@@ -252,6 +252,7 @@ export function getWebpackConfig(bundle: Bundle, worker: WorkerConfig) {
           cache: false,
           sourceMap: false,
           extractComments: false,
+          parallel: false,
           terserOptions: {
             compress: false,
             mangle: false,
diff --git a/src/dev/build/tasks/os_packages/docker_generator/resources/bin/kibana-docker b/src/dev/build/tasks/os_packages/docker_generator/resources/bin/kibana-docker
index 34ba25f92beb6..d4d2e86e1e96b 100755
--- a/src/dev/build/tasks/os_packages/docker_generator/resources/bin/kibana-docker
+++ b/src/dev/build/tasks/os_packages/docker_generator/resources/bin/kibana-docker
@@ -142,6 +142,7 @@ kibana_vars=(
     xpack.code.security.enableGitCertCheck
     xpack.code.security.gitHostWhitelist
     xpack.code.security.gitProtocolWhitelist
+    xpack.encryptedSavedObjects.encryptionKey
     xpack.graph.enabled
     xpack.graph.canEditDrillDownUrls
     xpack.graph.savePolicy
diff --git a/src/legacy/core_plugins/kibana/public/kibana.js b/src/legacy/core_plugins/kibana/public/kibana.js
index d77fc780f4cc2..384c6bd80ec33 100644
--- a/src/legacy/core_plugins/kibana/public/kibana.js
+++ b/src/legacy/core_plugins/kibana/public/kibana.js
@@ -53,7 +53,7 @@ import './management';
 import './dev_tools';
 import 'ui/agg_response';
 import 'ui/agg_types';
-import { showAppRedirectNotification } from 'ui/notify';
+import { showAppRedirectNotification } from '../../../../plugins/kibana_legacy/public';
 import 'leaflet';
 import { localApplicationService } from './local_application_service';
 
@@ -68,4 +68,6 @@ routes.otherwise({
   redirectTo: `/${config.defaultAppId || 'discover'}`,
 });
 
-uiModules.get('kibana').run(showAppRedirectNotification);
+uiModules
+  .get('kibana')
+  .run($location => showAppRedirectNotification($location, npSetup.core.notifications.toasts));
diff --git a/src/legacy/core_plugins/kibana/ui_setting_defaults.js b/src/legacy/core_plugins/kibana/ui_setting_defaults.js
index f92694eabe58d..c0628b72c2ce7 100644
--- a/src/legacy/core_plugins/kibana/ui_setting_defaults.js
+++ b/src/legacy/core_plugins/kibana/ui_setting_defaults.js
@@ -690,17 +690,6 @@ export function getUiSettingDefaults() {
           'The maximum height that a cell in a table should occupy. Set to 0 to disable truncation',
       }),
     },
-    'indexPattern:fieldMapping:lookBack': {
-      name: i18n.translate('kbn.advancedSettings.indexPattern.recentMatchingTitle', {
-        defaultMessage: 'Recent matching patterns',
-      }),
-      value: 5,
-      description: i18n.translate('kbn.advancedSettings.indexPattern.recentMatchingText', {
-        defaultMessage:
-          'For index patterns containing timestamps in their names, look for this many recent matching ' +
-          'patterns from which to query the field mapping',
-      }),
-    },
     'format:defaultTypeMap': {
       name: i18n.translate('kbn.advancedSettings.format.defaultTypeMapTitle', {
         defaultMessage: 'Field type format name',
diff --git a/src/legacy/core_plugins/telemetry/mappings.json b/src/legacy/core_plugins/telemetry/mappings.json
index a88372a5578e8..fa9cc93d6363a 100644
--- a/src/legacy/core_plugins/telemetry/mappings.json
+++ b/src/legacy/core_plugins/telemetry/mappings.json
@@ -17,6 +17,13 @@
       },
       "userHasSeenNotice": {
         "type": "boolean"
+      },
+      "reportFailureCount": {
+        "type": "integer"
+      },
+      "reportFailureVersion": {
+        "ignore_above": 256,
+        "type": "keyword"
       }
     }
   }
diff --git a/src/legacy/core_plugins/telemetry/server/collection_manager.ts b/src/legacy/core_plugins/telemetry/server/collection_manager.ts
index 0394dea343adf..715ca56e290a2 100644
--- a/src/legacy/core_plugins/telemetry/server/collection_manager.ts
+++ b/src/legacy/core_plugins/telemetry/server/collection_manager.ts
@@ -20,6 +20,7 @@
 import { encryptTelemetry } from './collectors';
 import { CallCluster } from '../../elasticsearch';
 import { UsageCollectionSetup } from '../../../../plugins/usage_collection/server';
+import { ESLicense } from './telemetry_collection/get_local_license';
 
 export type EncryptedStatsGetterConfig = { unencrypted: false } & {
   server: any;
@@ -45,22 +46,38 @@ export interface StatsCollectionConfig {
   end: string | number;
 }
 
+export interface BasicStatsPayload {
+  timestamp: string;
+  cluster_uuid: string;
+  cluster_name: string;
+  version: string;
+  cluster_stats: object;
+  collection?: string;
+  stack_stats: object;
+}
+
 export type StatsGetterConfig = UnencryptedStatsGetterConfig | EncryptedStatsGetterConfig;
 export type ClusterDetailsGetter = (config: StatsCollectionConfig) => Promise<ClusterDetails[]>;
-export type StatsGetter = (
+export type StatsGetter<T extends BasicStatsPayload = BasicStatsPayload> = (
+  clustersDetails: ClusterDetails[],
+  config: StatsCollectionConfig
+) => Promise<T[]>;
+export type LicenseGetter = (
   clustersDetails: ClusterDetails[],
   config: StatsCollectionConfig
-) => Promise<any[]>;
+) => Promise<{ [clusterUuid: string]: ESLicense | undefined }>;
 
-interface CollectionConfig {
+interface CollectionConfig<T extends BasicStatsPayload> {
   title: string;
   priority: number;
   esCluster: string;
-  statsGetter: StatsGetter;
+  statsGetter: StatsGetter<T>;
   clusterDetailsGetter: ClusterDetailsGetter;
+  licenseGetter: LicenseGetter;
 }
 interface Collection {
   statsGetter: StatsGetter;
+  licenseGetter: LicenseGetter;
   clusterDetailsGetter: ClusterDetailsGetter;
   esCluster: string;
   title: string;
@@ -70,8 +87,15 @@ export class TelemetryCollectionManager {
   private usageGetterMethodPriority = -1;
   private collections: Collection[] = [];
 
-  public setCollection = (collectionConfig: CollectionConfig) => {
-    const { title, priority, esCluster, statsGetter, clusterDetailsGetter } = collectionConfig;
+  public setCollection = <T extends BasicStatsPayload>(collectionConfig: CollectionConfig<T>) => {
+    const {
+      title,
+      priority,
+      esCluster,
+      statsGetter,
+      clusterDetailsGetter,
+      licenseGetter,
+    } = collectionConfig;
 
     if (typeof priority !== 'number') {
       throw new Error('priority must be set.');
@@ -88,10 +112,14 @@ export class TelemetryCollectionManager {
         throw Error('esCluster name must be set for the getCluster method.');
       }
       if (!clusterDetailsGetter) {
-        throw Error('Cluser UUIds method is not set.');
+        throw Error('Cluster UUIds method is not set.');
+      }
+      if (!licenseGetter) {
+        throw Error('License getter method not set.');
       }
 
       this.collections.unshift({
+        licenseGetter,
         statsGetter,
         clusterDetailsGetter,
         esCluster,
@@ -141,7 +169,19 @@ export class TelemetryCollectionManager {
       return;
     }
 
-    return await collection.statsGetter(clustersDetails, statsCollectionConfig);
+    const [stats, licenses] = await Promise.all([
+      collection.statsGetter(clustersDetails, statsCollectionConfig),
+      collection.licenseGetter(clustersDetails, statsCollectionConfig),
+    ]);
+
+    return stats.map(stat => {
+      const license = licenses[stat.cluster_uuid];
+      return {
+        ...(license ? { license } : {}),
+        ...stat,
+        collectionSource: collection.title,
+      };
+    });
   };
 
   public getOptInStats = async (optInStatus: boolean, config: StatsGetterConfig) => {
diff --git a/src/legacy/core_plugins/telemetry/server/fetcher.ts b/src/legacy/core_plugins/telemetry/server/fetcher.ts
index 6e16328c4abd8..d30ee10066813 100644
--- a/src/legacy/core_plugins/telemetry/server/fetcher.ts
+++ b/src/legacy/core_plugins/telemetry/server/fetcher.ts
@@ -21,19 +21,26 @@ import moment from 'moment';
 // @ts-ignore
 import fetch from 'node-fetch';
 import { telemetryCollectionManager } from './collection_manager';
-import { getTelemetryOptIn, getTelemetrySendUsageFrom } from './telemetry_config';
+import {
+  getTelemetryOptIn,
+  getTelemetrySendUsageFrom,
+  getTelemetryFailureDetails,
+} from './telemetry_config';
 import { getTelemetrySavedObject, updateTelemetrySavedObject } from './telemetry_repository';
 import { REPORT_INTERVAL_MS } from '../common/constants';
 
 export class FetcherTask {
-  private readonly checkDurationMs = 60 * 1000 * 5;
+  private readonly initialCheckDelayMs = 60 * 1000 * 5;
+  private readonly checkIntervalMs = 60 * 1000 * 60 * 12;
   private intervalId?: NodeJS.Timeout;
   private lastReported?: number;
+  private currentVersion: string;
   private isSending = false;
   private server: any;
 
   constructor(server: any) {
     this.server = server;
+    this.currentVersion = this.server.config().get('pkg.version');
   }
 
   private getInternalRepository = () => {
@@ -52,6 +59,9 @@ export class FetcherTask {
     const allowChangingOptInStatus = config.get('telemetry.allowChangingOptInStatus');
     const configTelemetryOptIn = config.get('telemetry.optIn');
     const telemetryUrl = config.get('telemetry.url') as string;
+    const { failureCount, failureVersion } = await getTelemetryFailureDetails({
+      telemetrySavedObject,
+    });
 
     return {
       telemetryOptIn: getTelemetryOptIn({
@@ -65,6 +75,8 @@ export class FetcherTask {
         configTelemetrySendUsageFrom,
       }),
       telemetryUrl,
+      failureCount,
+      failureVersion,
     };
   };
 
@@ -72,11 +84,31 @@ export class FetcherTask {
     const internalRepository = this.getInternalRepository();
     this.lastReported = Date.now();
     updateTelemetrySavedObject(internalRepository, {
+      reportFailureCount: 0,
       lastReported: this.lastReported,
     });
   };
 
-  private shouldSendReport = ({ telemetryOptIn, telemetrySendUsageFrom }: any) => {
+  private updateReportFailure = async ({ failureCount }: { failureCount: number }) => {
+    const internalRepository = this.getInternalRepository();
+
+    updateTelemetrySavedObject(internalRepository, {
+      reportFailureCount: failureCount + 1,
+      reportFailureVersion: this.currentVersion,
+    });
+  };
+
+  private shouldSendReport = ({
+    telemetryOptIn,
+    telemetrySendUsageFrom,
+    reportFailureCount,
+    currentVersion,
+    reportFailureVersion,
+  }: any) => {
+    if (reportFailureCount > 2 && reportFailureVersion === currentVersion) {
+      return false;
+    }
+
     if (telemetryOptIn && telemetrySendUsageFrom === 'server') {
       if (!this.lastReported || Date.now() - this.lastReported > REPORT_INTERVAL_MS) {
         return true;
@@ -98,6 +130,14 @@ export class FetcherTask {
 
   private sendTelemetry = async (url: string, cluster: any): Promise<void> => {
     this.server.log(['debug', 'telemetry', 'fetcher'], `Sending usage stats.`);
+    /**
+     * send OPTIONS before sending usage data.
+     * OPTIONS is less intrusive as it does not contain any payload and is used here to check if the endpoint is reachable.
+     */
+    await fetch(url, {
+      method: 'options',
+    });
+
     await fetch(url, {
       method: 'post',
       body: cluster,
@@ -108,21 +148,23 @@ export class FetcherTask {
     if (this.isSending) {
       return;
     }
-    try {
-      const telemetryConfig = await this.getCurrentConfigs();
-      if (!this.shouldSendReport(telemetryConfig)) {
-        return;
-      }
+    const telemetryConfig = await this.getCurrentConfigs();
+    if (!this.shouldSendReport(telemetryConfig)) {
+      return;
+    }
 
-      // mark that we are working so future requests are ignored until we're done
+    try {
       this.isSending = true;
       const clusters = await this.fetchTelemetry();
+      const { telemetryUrl } = telemetryConfig;
       for (const cluster of clusters) {
-        await this.sendTelemetry(telemetryConfig.telemetryUrl, cluster);
+        await this.sendTelemetry(telemetryUrl, cluster);
       }
 
       await this.updateLastReported();
     } catch (err) {
+      await this.updateReportFailure(telemetryConfig);
+
       this.server.log(
         ['warning', 'telemetry', 'fetcher'],
         `Error sending telemetry usage data: ${err}`
@@ -132,8 +174,12 @@ export class FetcherTask {
   };
 
   public start = () => {
-    this.intervalId = setInterval(() => this.sendIfDue(), this.checkDurationMs);
+    setTimeout(() => {
+      this.sendIfDue();
+      this.intervalId = setInterval(() => this.sendIfDue(), this.checkIntervalMs);
+    }, this.initialCheckDelayMs);
   };
+
   public stop = () => {
     if (this.intervalId) {
       clearInterval(this.intervalId);
diff --git a/src/legacy/core_plugins/telemetry/server/telemetry_collection/get_cluster_info.js b/src/legacy/core_plugins/telemetry/server/telemetry_collection/get_cluster_info.ts
similarity index 61%
rename from src/legacy/core_plugins/telemetry/server/telemetry_collection/get_cluster_info.js
rename to src/legacy/core_plugins/telemetry/server/telemetry_collection/get_cluster_info.ts
index 2e4ed0b36ed26..67812457ed4ec 100644
--- a/src/legacy/core_plugins/telemetry/server/telemetry_collection/get_cluster_info.js
+++ b/src/legacy/core_plugins/telemetry/server/telemetry_collection/get_cluster_info.ts
@@ -17,14 +17,32 @@
  * under the License.
  */
 
+import { CallCluster } from 'src/legacy/core_plugins/elasticsearch';
+
+// This can be removed when the ES client improves the types
+export interface ESClusterInfo {
+  cluster_uuid: string;
+  cluster_name: string;
+  version: {
+    number: string;
+    build_flavor: string;
+    build_type: string;
+    build_hash: string;
+    build_date: string;
+    build_snapshot?: boolean;
+    lucene_version: string;
+    minimum_wire_compatibility_version: string;
+    minimum_index_compatibility_version: string;
+  };
+}
+
 /**
  * Get the cluster info from the connected cluster.
  *
  * This is the equivalent to GET /
  *
  * @param {function} callCluster The callWithInternalUser handler (exposed for testing)
- * @return {Promise} The response from Elasticsearch.
  */
-export function getClusterInfo(callCluster) {
-  return callCluster('info');
+export function getClusterInfo(callCluster: CallCluster) {
+  return callCluster<ESClusterInfo>('info');
 }
diff --git a/src/legacy/core_plugins/telemetry/server/telemetry_collection/get_local_license.ts b/src/legacy/core_plugins/telemetry/server/telemetry_collection/get_local_license.ts
new file mode 100644
index 0000000000000..589392ffb6095
--- /dev/null
+++ b/src/legacy/core_plugins/telemetry/server/telemetry_collection/get_local_license.ts
@@ -0,0 +1,90 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { CallCluster } from 'src/legacy/core_plugins/elasticsearch';
+import { LicenseGetter } from '../collection_manager';
+
+// From https://www.elastic.co/guide/en/elasticsearch/reference/current/get-license.html
+export interface ESLicense {
+  status: string;
+  uid: string;
+  type: string;
+  issue_date: string;
+  issue_date_in_millis: number;
+  expiry_date: string;
+  expirty_date_in_millis: number;
+  max_nodes: number;
+  issued_to: string;
+  issuer: string;
+  start_date_in_millis: number;
+}
+let cachedLicense: ESLicense | undefined;
+
+function fetchLicense(callCluster: CallCluster, local: boolean) {
+  return callCluster<{ license: ESLicense }>('transport.request', {
+    method: 'GET',
+    path: '/_license',
+    query: {
+      local,
+      // For versions >= 7.6 and < 8.0, this flag is needed otherwise 'platinum' is returned for 'enterprise' license.
+      accept_enterprise: 'true',
+    },
+  });
+}
+
+/**
+ * Get the cluster's license from the connected node.
+ *
+ * This is the equivalent of GET /_license?local=true .
+ *
+ * Like any X-Pack related API, X-Pack must installed for this to work.
+ */
+async function getLicenseFromLocalOrMaster(callCluster: CallCluster) {
+  // Fetching the local license is cheaper than getting it from the master and good enough
+  const { license } = await fetchLicense(callCluster, true).catch(async err => {
+    if (cachedLicense) {
+      try {
+        // Fallback to the master node's license info
+        const response = await fetchLicense(callCluster, false);
+        return response;
+      } catch (masterError) {
+        if (masterError.statusCode === 404) {
+          // If the master node does not have a license, we can assume there is no license
+          cachedLicense = undefined;
+        } else {
+          // Any other errors from the master node, throw and do not send any telemetry
+          throw err;
+        }
+      }
+    }
+    return { license: void 0 };
+  });
+
+  if (license) {
+    cachedLicense = license;
+  }
+  return license;
+}
+
+export const getLocalLicense: LicenseGetter = async (clustersDetails, { callCluster }) => {
+  const license = await getLicenseFromLocalOrMaster(callCluster);
+
+  // It should be called only with 1 cluster element in the clustersDetails array, but doing reduce just in case.
+  return clustersDetails.reduce((acc, { clusterUuid }) => ({ ...acc, [clusterUuid]: license }), {});
+};
diff --git a/src/legacy/core_plugins/telemetry/server/telemetry_collection/get_local_stats.ts b/src/legacy/core_plugins/telemetry/server/telemetry_collection/get_local_stats.ts
index 8adb6d237bee8..d99710deb1cbc 100644
--- a/src/legacy/core_plugins/telemetry/server/telemetry_collection/get_local_stats.ts
+++ b/src/legacy/core_plugins/telemetry/server/telemetry_collection/get_local_stats.ts
@@ -17,11 +17,8 @@
  * under the License.
  */
 
-import { get, omit } from 'lodash';
-// @ts-ignore
-import { getClusterInfo } from './get_cluster_info';
+import { getClusterInfo, ESClusterInfo } from './get_cluster_info';
 import { getClusterStats } from './get_cluster_stats';
-// @ts-ignore
 import { getKibana, handleKibanaStats, KibanaUsageStats } from './get_kibana';
 import { StatsGetter } from '../collection_manager';
 
@@ -33,20 +30,19 @@ import { StatsGetter } from '../collection_manager';
  * @param {Object} clusterInfo Cluster info (GET /)
  * @param {Object} clusterStats Cluster stats (GET /_cluster/stats)
  * @param {Object} kibana The Kibana Usage stats
- * @return {Object} A combined object containing the different responses.
  */
 export function handleLocalStats(
   server: any,
-  clusterInfo: any,
-  clusterStats: any,
+  { cluster_name, cluster_uuid, version }: ESClusterInfo,
+  { _nodes, cluster_name: clusterName, ...clusterStats }: any,
   kibana: KibanaUsageStats
 ) {
   return {
     timestamp: new Date().toISOString(),
-    cluster_uuid: get(clusterInfo, 'cluster_uuid'),
-    cluster_name: get(clusterInfo, 'cluster_name'),
-    version: get(clusterInfo, 'version.number'),
-    cluster_stats: omit(clusterStats, '_nodes', 'cluster_name'),
+    cluster_uuid,
+    cluster_name,
+    version: version.number,
+    cluster_stats: clusterStats,
     collection: 'local',
     stack_stats: {
       kibana: handleKibanaStats(server, kibana),
@@ -54,14 +50,12 @@ export function handleLocalStats(
   };
 }
 
+export type TelemetryLocalStats = ReturnType<typeof handleLocalStats>;
+
 /**
  * Get statistics for all products joined by Elasticsearch cluster.
- *
- * @param {Object} server The Kibana server instance used to call ES as the internal user
- * @param {function} callCluster The callWithInternalUser handler (exposed for testing)
- * @return {Promise} The object containing the current Elasticsearch cluster's telemetry.
  */
-export const getLocalStats: StatsGetter = async (clustersDetails, config) => {
+export const getLocalStats: StatsGetter<TelemetryLocalStats> = async (clustersDetails, config) => {
   const { server, callCluster, usageCollection } = config;
 
   return await Promise.all(
diff --git a/src/legacy/core_plugins/telemetry/server/telemetry_collection/index.ts b/src/legacy/core_plugins/telemetry/server/telemetry_collection/index.ts
index 7f228dbc5e6f6..9ac94216c21bc 100644
--- a/src/legacy/core_plugins/telemetry/server/telemetry_collection/index.ts
+++ b/src/legacy/core_plugins/telemetry/server/telemetry_collection/index.ts
@@ -17,7 +17,6 @@
  * under the License.
  */
 
-// @ts-ignore
 export { getLocalStats } from './get_local_stats';
 export { getClusterUuids } from './get_cluster_stats';
 export { registerCollection } from './register_collection';
diff --git a/src/legacy/core_plugins/telemetry/server/telemetry_collection/register_collection.ts b/src/legacy/core_plugins/telemetry/server/telemetry_collection/register_collection.ts
index faf8e9de79194..6580b47dba08e 100644
--- a/src/legacy/core_plugins/telemetry/server/telemetry_collection/register_collection.ts
+++ b/src/legacy/core_plugins/telemetry/server/telemetry_collection/register_collection.ts
@@ -39,6 +39,7 @@
 import { telemetryCollectionManager } from '../collection_manager';
 import { getLocalStats } from './get_local_stats';
 import { getClusterUuids } from './get_cluster_stats';
+import { getLocalLicense } from './get_local_license';
 
 export function registerCollection() {
   telemetryCollectionManager.setCollection({
@@ -47,5 +48,6 @@ export function registerCollection() {
     priority: 0,
     statsGetter: getLocalStats,
     clusterDetailsGetter: getClusterUuids,
+    licenseGetter: getLocalLicense,
   });
 }
diff --git a/src/legacy/core_plugins/telemetry/server/telemetry_config/get_telemetry_failure_details.test.ts b/src/legacy/core_plugins/telemetry/server/telemetry_config/get_telemetry_failure_details.test.ts
new file mode 100644
index 0000000000000..c92696838e8e8
--- /dev/null
+++ b/src/legacy/core_plugins/telemetry/server/telemetry_config/get_telemetry_failure_details.test.ts
@@ -0,0 +1,96 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { getTelemetryFailureDetails } from './get_telemetry_failure_details';
+
+describe('getTelemetryFailureDetails: get details about server usage fetcher failures', () => {
+  it('returns `failureCount: 0` and `failureVersion: undefined` when telemetry does not have any custom configs in saved Object', () => {
+    const telemetrySavedObject = null;
+    const failureDetails = getTelemetryFailureDetails({ telemetrySavedObject });
+    expect(failureDetails).toStrictEqual({
+      failureVersion: undefined,
+      failureCount: 0,
+    });
+  });
+
+  it('returns telemetryFailureCount and reportFailureVersion from telemetry saved Object', () => {
+    const telemetrySavedObject = {
+      reportFailureCount: 12,
+      reportFailureVersion: '8.0.0',
+    };
+    const failureDetails = getTelemetryFailureDetails({ telemetrySavedObject });
+    expect(failureDetails).toStrictEqual({
+      failureVersion: '8.0.0',
+      failureCount: 12,
+    });
+  });
+
+  it('returns `failureCount: 0` on malformed reportFailureCount telemetry saved Object', () => {
+    const failureVersion = '8.0.0';
+    expect(
+      getTelemetryFailureDetails({
+        telemetrySavedObject: {
+          reportFailureCount: null,
+          reportFailureVersion: failureVersion,
+        } as any,
+      })
+    ).toStrictEqual({ failureVersion, failureCount: 0 });
+    expect(
+      getTelemetryFailureDetails({
+        telemetrySavedObject: {
+          reportFailureCount: undefined,
+          reportFailureVersion: failureVersion,
+        },
+      })
+    ).toStrictEqual({ failureVersion, failureCount: 0 });
+    expect(
+      getTelemetryFailureDetails({
+        telemetrySavedObject: {
+          reportFailureCount: 'not_a_number',
+          reportFailureVersion: failureVersion,
+        } as any,
+      })
+    ).toStrictEqual({ failureVersion, failureCount: 0 });
+  });
+
+  it('returns `failureVersion: undefined` on malformed reportFailureCount telemetry saved Object', () => {
+    const failureCount = 0;
+    expect(
+      getTelemetryFailureDetails({
+        telemetrySavedObject: {
+          reportFailureVersion: null,
+          reportFailureCount: failureCount,
+        } as any,
+      })
+    ).toStrictEqual({ failureCount, failureVersion: undefined });
+    expect(
+      getTelemetryFailureDetails({
+        telemetrySavedObject: { reportFailureVersion: undefined, reportFailureCount: failureCount },
+      })
+    ).toStrictEqual({ failureCount, failureVersion: undefined });
+    expect(
+      getTelemetryFailureDetails({
+        telemetrySavedObject: {
+          reportFailureVersion: 123,
+          reportFailureCount: failureCount,
+        } as any,
+      })
+    ).toStrictEqual({ failureCount, failureVersion: undefined });
+  });
+});
diff --git a/src/legacy/core_plugins/telemetry/server/telemetry_config/get_telemetry_failure_details.ts b/src/legacy/core_plugins/telemetry/server/telemetry_config/get_telemetry_failure_details.ts
new file mode 100644
index 0000000000000..2952fa96a5cf3
--- /dev/null
+++ b/src/legacy/core_plugins/telemetry/server/telemetry_config/get_telemetry_failure_details.ts
@@ -0,0 +1,45 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { TelemetrySavedObject } from '../telemetry_repository/get_telemetry_saved_object';
+
+interface GetTelemetryFailureDetailsConfig {
+  telemetrySavedObject: TelemetrySavedObject;
+}
+
+export interface TelemetryFailureDetails {
+  failureCount: number;
+  failureVersion?: string;
+}
+
+export function getTelemetryFailureDetails({
+  telemetrySavedObject,
+}: GetTelemetryFailureDetailsConfig): TelemetryFailureDetails {
+  if (!telemetrySavedObject) {
+    return {
+      failureVersion: undefined,
+      failureCount: 0,
+    };
+  }
+  const { reportFailureCount, reportFailureVersion } = telemetrySavedObject;
+
+  return {
+    failureCount: typeof reportFailureCount === 'number' ? reportFailureCount : 0,
+    failureVersion: typeof reportFailureVersion === 'string' ? reportFailureVersion : undefined,
+  };
+}
diff --git a/src/legacy/core_plugins/telemetry/server/telemetry_config/index.ts b/src/legacy/core_plugins/telemetry/server/telemetry_config/index.ts
index ab30dac1c3666..bf9855ce7538e 100644
--- a/src/legacy/core_plugins/telemetry/server/telemetry_config/index.ts
+++ b/src/legacy/core_plugins/telemetry/server/telemetry_config/index.ts
@@ -21,3 +21,7 @@ export { replaceTelemetryInjectedVars } from './replace_injected_vars';
 export { getTelemetryOptIn } from './get_telemetry_opt_in';
 export { getTelemetrySendUsageFrom } from './get_telemetry_send_usage_from';
 export { getTelemetryAllowChangingOptInStatus } from './get_telemetry_allow_changing_opt_in_status';
+export {
+  getTelemetryFailureDetails,
+  TelemetryFailureDetails,
+} from './get_telemetry_failure_details';
diff --git a/src/legacy/core_plugins/telemetry/server/telemetry_repository/index.ts b/src/legacy/core_plugins/telemetry/server/telemetry_repository/index.ts
index b9ba2ce5573c3..f1735d1bb2866 100644
--- a/src/legacy/core_plugins/telemetry/server/telemetry_repository/index.ts
+++ b/src/legacy/core_plugins/telemetry/server/telemetry_repository/index.ts
@@ -27,4 +27,6 @@ export interface TelemetrySavedObjectAttributes {
   lastReported?: number;
   telemetryAllowChangingOptInStatus?: boolean;
   userHasSeenNotice?: boolean;
+  reportFailureCount?: number;
+  reportFailureVersion?: string;
 }
diff --git a/src/legacy/core_plugins/visualizations/public/embeddable/visualize_embeddable.ts b/src/legacy/core_plugins/visualizations/public/embeddable/visualize_embeddable.ts
index 72a0ef72b5693..32bbae13b79b8 100644
--- a/src/legacy/core_plugins/visualizations/public/embeddable/visualize_embeddable.ts
+++ b/src/legacy/core_plugins/visualizations/public/embeddable/visualize_embeddable.ts
@@ -369,9 +369,7 @@ export class VisualizeEmbeddable extends Embeddable<VisualizeInput, VisualizeOut
         query: this.input.query,
         filters: this.input.filters,
       },
-      extraHandlers: {
-        uiState: this.uiState,
-      },
+      uiState: this.uiState,
     };
     this.expression = await buildPipeline(this.vis, {
       searchSource: this.savedVisualization.searchSource,
diff --git a/src/legacy/ui/public/notify/index.js b/src/legacy/ui/public/notify/index.js
index f7526f3b8f8fd..7ec6a394d7e88 100644
--- a/src/legacy/ui/public/notify/index.js
+++ b/src/legacy/ui/public/notify/index.js
@@ -19,5 +19,4 @@
 
 export { fatalError, addFatalErrorCallback } from './fatal_error';
 export { toastNotifications } from './toasts';
-export { addAppRedirectMessageToUrl, showAppRedirectNotification } from './app_redirect';
 export { banners } from './banners';
diff --git a/src/optimize/base_optimizer.js b/src/optimize/base_optimizer.js
index a833204eaa0e2..a94f251c292f9 100644
--- a/src/optimize/base_optimizer.js
+++ b/src/optimize/base_optimizer.js
@@ -152,11 +152,7 @@ export default class BaseOptimizer {
 
   getThreadLoaderPoolConfig() {
     // Calculate the node options from the NODE_OPTIONS env var
-    const parsedNodeOptions = process.env.NODE_OPTIONS
-      ? // thread-loader could not receive empty string as options
-        // or it would break that's why we need to filter here
-        process.env.NODE_OPTIONS.split(/\s/).filter(opt => !!opt)
-      : [];
+    const parsedNodeOptions = process.env.NODE_OPTIONS ? process.env.NODE_OPTIONS.split(/\s/) : [];
 
     return {
       name: 'optimizer-thread-loader-main-pool',
diff --git a/src/plugins/advanced_settings/public/_index.scss b/src/plugins/advanced_settings/public/_index.scss
index f3fe78bf6a9c0..d13c37bff32d0 100644
--- a/src/plugins/advanced_settings/public/_index.scss
+++ b/src/plugins/advanced_settings/public/_index.scss
@@ -17,4 +17,4 @@
  * under the License.
  */
 
- @import './management_app/advanced_settings';
+@import './management_app/index';
diff --git a/src/plugins/advanced_settings/public/management_app/_index.scss b/src/plugins/advanced_settings/public/management_app/_index.scss
new file mode 100644
index 0000000000000..aa1980692f7b7
--- /dev/null
+++ b/src/plugins/advanced_settings/public/management_app/_index.scss
@@ -0,0 +1,3 @@
+@import './advanced_settings';
+
+@import './components/index';
diff --git a/src/plugins/advanced_settings/public/management_app/advanced_settings.scss b/src/plugins/advanced_settings/public/management_app/advanced_settings.scss
index 79b6feccb6b7d..016edb2817da8 100644
--- a/src/plugins/advanced_settings/public/management_app/advanced_settings.scss
+++ b/src/plugins/advanced_settings/public/management_app/advanced_settings.scss
@@ -17,21 +17,27 @@
  * under the License.
  */
 
-.mgtAdvancedSettings__field {
+ .mgtAdvancedSettings__field {
   + * {
     margin-top: $euiSize;
   }
 
-  &Wrapper {
-    width: 640px;
 
-    @include internetExplorerOnly() {
-      min-height: 1px;
-    }
+  padding-left: $euiSizeS;
+  margin-left: -$euiSizeS;
+  &--unsaved {
+    // Simulates a left side border without shifting content
+    box-shadow: -$euiSizeXS 0px $euiColorSecondary;
   }
-
-  &Actions {
-    padding-top: $euiSizeM;
+  &--invalid {
+    // Simulates a left side border without shifting content
+    box-shadow: -$euiSizeXS 0px $euiColorDanger;
+  }
+  @include internetExplorerOnly() {
+    min-height: 1px;
+  }
+  &Row {
+    padding-left: $euiSizeS;
   }
 
   @include internetExplorerOnly {
@@ -40,3 +46,19 @@
     }
   }
 }
+
+.mgtAdvancedSettingsForm__unsavedCount {
+  @include euiBreakpoint('xs', 's') {
+    display: none;
+  }
+}
+
+.mgtAdvancedSettingsForm__unsavedCountMessage{
+  // Simulates a left side border without shifting content
+  box-shadow: -$euiSizeXS 0px $euiColorSecondary;
+  padding-left: $euiSizeS;
+}
+
+.mgtAdvancedSettingsForm__button {
+  width: 100%;
+}
diff --git a/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx b/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx
index 5057d072e3e41..39312c9340ff9 100644
--- a/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx
+++ b/src/plugins/advanced_settings/public/management_app/advanced_settings.tsx
@@ -38,7 +38,7 @@ import { ComponentRegistry } from '../';
 
 import { getAriaName, toEditableConfig, DEFAULT_CATEGORY } from './lib';
 
-import { FieldSetting, IQuery } from './types';
+import { FieldSetting, IQuery, SettingsChanges } from './types';
 
 interface AdvancedSettingsProps {
   enableSaving: boolean;
@@ -177,6 +177,13 @@ export class AdvancedSettingsComponent extends Component<
     });
   };
 
+  saveConfig = async (changes: SettingsChanges) => {
+    const arr = Object.entries(changes).map(([key, value]) =>
+      this.props.uiSettings.set(key, value)
+    );
+    return Promise.all(arr);
+  };
+
   render() {
     const { filteredSettings, query, footerQueryMatched } = this.state;
     const componentRegistry = this.props.componentRegistry;
@@ -205,18 +212,19 @@ export class AdvancedSettingsComponent extends Component<
         <AdvancedSettingsVoiceAnnouncement queryText={query.text} settings={filteredSettings} />
 
         <Form
-          settings={filteredSettings}
+          settings={this.groupedSettings}
+          visibleSettings={filteredSettings}
           categories={this.categories}
           categoryCounts={this.categoryCounts}
           clearQuery={this.clearQuery}
-          save={this.props.uiSettings.set.bind(this.props.uiSettings)}
-          clear={this.props.uiSettings.remove.bind(this.props.uiSettings)}
+          save={this.saveConfig}
           showNoResultsMessage={!footerQueryMatched}
           enableSaving={this.props.enableSaving}
           dockLinks={this.props.dockLinks}
           toasts={this.props.toasts}
         />
         <PageFooter
+          toasts={this.props.toasts}
           query={query}
           onQueryMatchChange={this.onFooterQueryMatchChange}
           enableSaving={this.props.enableSaving}
diff --git a/src/plugins/advanced_settings/public/management_app/components/_index.scss b/src/plugins/advanced_settings/public/management_app/components/_index.scss
new file mode 100644
index 0000000000000..d2d2e38947f76
--- /dev/null
+++ b/src/plugins/advanced_settings/public/management_app/components/_index.scss
@@ -0,0 +1 @@
+@import './form/index';
diff --git a/src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap b/src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap
index 5121785b05cad..2f4d806e60244 100644
--- a/src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap
+++ b/src/plugins/advanced_settings/public/management_app/components/field/__snapshots__/field.test.tsx.snap
@@ -1,3912 +1,3821 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Field for array setting should render as read only if saving is disabled 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Array test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Array test setting
+      
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="array:test:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Array test setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Array test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "array:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="array:test:setting"
-        labelType="label"
-      >
-        <EuiFieldText
-          aria-label="array test setting"
-          data-test-subj="advancedSetting-editField-array:test:setting"
-          disabled={true}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          value="default_value"
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+    <EuiFieldText
+      aria-label="array test setting"
+      data-test-subj="advancedSetting-editField-array:test:setting"
+      disabled={true}
+      fullWidth={true}
+      onChange={[Function]}
+      value="default_value"
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for array setting should render as read only with help text if overridden 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
->
-  <EuiFlexItem
-    grow={false}
-  >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Array test setting",
-              }
-            }
-          />
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Array test setting",
+          }
+        }
+      />
+      <React.Fragment>
+        <EuiSpacer
+          size="s"
+        />
+        <EuiText
+          size="xs"
+        >
           <React.Fragment>
-            <EuiSpacer
-              size="s"
-            />
-            <EuiText
-              size="xs"
-            >
-              <React.Fragment>
-                <FormattedMessage
-                  defaultMessage="Default: {value}"
-                  id="advancedSettings.field.defaultValueText"
-                  values={
-                    Object {
-                      "value": <EuiCode>
-                        default_value
-                      </EuiCode>,
-                    }
-                  }
-                />
-              </React.Fragment>
-            </EuiText>
-          </React.Fragment>
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Array test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "array:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={
-          <EuiText
-            size="xs"
-          >
             <FormattedMessage
-              defaultMessage="This setting is overridden by the Kibana server and can not be changed."
-              id="advancedSettings.field.helpText"
-              values={Object {}}
+              defaultMessage="Default: {value}"
+              id="advancedSettings.field.defaultValueText"
+              values={
+                Object {
+                  "value": <EuiCode>
+                    default_value
+                  </EuiCode>,
+                }
+              }
             />
-          </EuiText>
-        }
-        isInvalid={false}
-        label="array:test:setting"
-        labelType="label"
+          </React.Fragment>
+        </EuiText>
+      </React.Fragment>
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Array test setting
+      
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={
+      <EuiText
+        size="xs"
       >
-        <EuiFieldText
-          aria-label="array test setting"
-          data-test-subj="advancedSetting-editField-array:test:setting"
-          disabled={true}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          value="user, value"
+        <FormattedMessage
+          defaultMessage="This setting is overridden by the Kibana server and can not be changed."
+          id="advancedSettings.field.helpText"
+          values={Object {}}
         />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+      </EuiText>
+    }
+    label="array:test:setting"
+    labelType="label"
+  >
+    <EuiFieldText
+      aria-label="array test setting"
+      data-test-subj="advancedSetting-editField-array:test:setting"
+      disabled={true}
+      fullWidth={true}
+      onChange={[Function]}
+      value="user, value"
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for array setting should render custom setting icon if it is custom 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Array test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Array test setting
+      <EuiIconTip
+        aria-label="Custom setting"
+        color="primary"
+        content={
+          <FormattedMessage
+            defaultMessage="Custom setting"
+            id="advancedSettings.field.customSettingTooltip"
+            values={Object {}}
+          />
+        }
+        type="asterisk"
+      />
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="array:test:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Array test setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Array test setting
-          <EuiIconTip
-            aria-label="Custom setting"
-            color="primary"
-            content={
-              <FormattedMessage
-                defaultMessage="Custom setting"
-                id="advancedSettings.field.customSettingTooltip"
-                values={Object {}}
-              />
-            }
-            type="asterisk"
-          />
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "array:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="array:test:setting"
-        labelType="label"
-      >
-        <EuiFieldText
-          aria-label="array test setting"
-          data-test-subj="advancedSetting-editField-array:test:setting"
-          disabled={false}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          value="default_value"
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+    <EuiFieldText
+      aria-label="array test setting"
+      data-test-subj="advancedSetting-editField-array:test:setting"
+      disabled={false}
+      fullWidth={true}
+      onChange={[Function]}
+      value="default_value"
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for array setting should render default value if there is no user value set 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Array test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Array test setting
+      
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="array:test:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Array test setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Array test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "array:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="array:test:setting"
-        labelType="label"
+    <EuiFieldText
+      aria-label="array test setting"
+      data-test-subj="advancedSetting-editField-array:test:setting"
+      disabled={false}
+      fullWidth={true}
+      onChange={[Function]}
+      value="default_value"
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
+`;
+
+exports[`Field for array setting should render unsaved value if there are unsaved changes 1`] = `
+<EuiDescribedFormGroup
+  className="mgtAdvancedSettings__field mgtAdvancedSettings__field--unsaved"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Array test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Array test setting
+      <EuiIconTip
+        aria-label="Custom setting"
+        color="primary"
+        content={
+          <FormattedMessage
+            defaultMessage="Custom setting"
+            id="advancedSettings.field.customSettingTooltip"
+            values={Object {}}
+          />
+        }
+        type="asterisk"
+      />
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="array:test:setting"
+    labelType="label"
+  >
+    <EuiFieldText
+      aria-describedby="array:test:setting"
+      aria-label="array test setting"
+      data-test-subj="advancedSetting-editField-array:test:setting"
+      disabled={false}
+      fullWidth={true}
+      onChange={[Function]}
+      value={
+        Array [
+          "example_value",
+        ]
+      }
+    />
+    <EuiScreenReaderOnly>
+      <p
+        id="array:test:setting"
       >
-        <EuiFieldText
-          aria-label="array test setting"
-          data-test-subj="advancedSetting-editField-array:test:setting"
-          disabled={false}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          value="default_value"
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+        Setting is currently not saved.
+      </p>
+    </EuiScreenReaderOnly>
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for array setting should render user value if there is user value is set 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
->
-  <EuiFlexItem
-    grow={false}
-  >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Array test setting",
-              }
-            }
-          />
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Array test setting",
+          }
+        }
+      />
+      <React.Fragment>
+        <EuiSpacer
+          size="s"
+        />
+        <EuiText
+          size="xs"
+        >
           <React.Fragment>
-            <EuiSpacer
-              size="s"
+            <FormattedMessage
+              defaultMessage="Default: {value}"
+              id="advancedSettings.field.defaultValueText"
+              values={
+                Object {
+                  "value": <EuiCode>
+                    default_value
+                  </EuiCode>,
+                }
+              }
             />
-            <EuiText
-              size="xs"
-            >
-              <React.Fragment>
-                <FormattedMessage
-                  defaultMessage="Default: {value}"
-                  id="advancedSettings.field.defaultValueText"
-                  values={
-                    Object {
-                      "value": <EuiCode>
-                        default_value
-                      </EuiCode>,
-                    }
-                  }
-                />
-              </React.Fragment>
-            </EuiText>
           </React.Fragment>
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Array test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "array:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={
-          <span>
-            <span>
-              <ForwardRef
-                aria-label="Reset array test setting to default"
-                data-test-subj="advancedSetting-resetField-array:test:setting"
-                onClick={[Function]}
-              >
-                <FormattedMessage
-                  defaultMessage="Reset to default"
-                  id="advancedSettings.field.resetToDefaultLinkText"
-                  values={Object {}}
-                />
-              </ForwardRef>
-                 
-            </span>
-          </span>
-        }
-        isInvalid={false}
-        label="array:test:setting"
-        labelType="label"
-      >
-        <EuiFieldText
-          aria-label="array test setting"
-          data-test-subj="advancedSetting-editField-array:test:setting"
-          disabled={false}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          value="user, value"
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+        </EuiText>
+      </React.Fragment>
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Array test setting
+      
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={
+      <span>
+        <span>
+          <ForwardRef
+            aria-label="Reset array test setting to default"
+            data-test-subj="advancedSetting-resetField-array:test:setting"
+            onClick={[Function]}
+          >
+            <FormattedMessage
+              defaultMessage="Reset to default"
+              id="advancedSettings.field.resetToDefaultLinkText"
+              values={Object {}}
+            />
+          </ForwardRef>
+             
+        </span>
+      </span>
+    }
+    label="array:test:setting"
+    labelType="label"
+  >
+    <EuiFieldText
+      aria-label="array test setting"
+      data-test-subj="advancedSetting-editField-array:test:setting"
+      disabled={false}
+      fullWidth={true}
+      onChange={[Function]}
+      value="user, value"
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for boolean setting should render as read only if saving is disabled 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Boolean test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Boolean test setting
+      
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={false}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="boolean:test:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Boolean test setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Boolean test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "boolean:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={false}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="boolean:test:setting"
-        labelType="label"
-      >
-        <EuiSwitch
-          aria-label="boolean test setting"
-          checked={true}
-          data-test-subj="advancedSetting-editField-boolean:test:setting"
-          disabled={true}
-          label={
-            <FormattedMessage
-              defaultMessage="On"
-              id="advancedSettings.field.onLabel"
-              values={Object {}}
-            />
-          }
-          onChange={[Function]}
-          onKeyDown={[Function]}
+    <EuiSwitch
+      aria-label="boolean test setting"
+      checked={true}
+      data-test-subj="advancedSetting-editField-boolean:test:setting"
+      disabled={true}
+      label={
+        <FormattedMessage
+          defaultMessage="On"
+          id="advancedSettings.field.onLabel"
+          values={Object {}}
         />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+      }
+      onChange={[Function]}
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for boolean setting should render as read only with help text if overridden 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
->
-  <EuiFlexItem
-    grow={false}
-  >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Boolean test setting",
-              }
-            }
-          />
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Boolean test setting",
+          }
+        }
+      />
+      <React.Fragment>
+        <EuiSpacer
+          size="s"
+        />
+        <EuiText
+          size="xs"
+        >
           <React.Fragment>
-            <EuiSpacer
-              size="s"
-            />
-            <EuiText
-              size="xs"
-            >
-              <React.Fragment>
-                <FormattedMessage
-                  defaultMessage="Default: {value}"
-                  id="advancedSettings.field.defaultValueText"
-                  values={
-                    Object {
-                      "value": <EuiCode>
-                        true
-                      </EuiCode>,
-                    }
-                  }
-                />
-              </React.Fragment>
-            </EuiText>
-          </React.Fragment>
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Boolean test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "boolean:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={false}
-        hasEmptyLabelSpace={false}
-        helpText={
-          <EuiText
-            size="xs"
-          >
             <FormattedMessage
-              defaultMessage="This setting is overridden by the Kibana server and can not be changed."
-              id="advancedSettings.field.helpText"
-              values={Object {}}
+              defaultMessage="Default: {value}"
+              id="advancedSettings.field.defaultValueText"
+              values={
+                Object {
+                  "value": <EuiCode>
+                    true
+                  </EuiCode>,
+                }
+              }
             />
-          </EuiText>
-        }
-        isInvalid={false}
-        label="boolean:test:setting"
-        labelType="label"
+          </React.Fragment>
+        </EuiText>
+      </React.Fragment>
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Boolean test setting
+      
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={false}
+    hasEmptyLabelSpace={false}
+    helpText={
+      <EuiText
+        size="xs"
       >
-        <EuiSwitch
-          aria-label="boolean test setting"
-          checked={false}
-          data-test-subj="advancedSetting-editField-boolean:test:setting"
-          disabled={true}
-          label={
-            <FormattedMessage
-              defaultMessage="Off"
-              id="advancedSettings.field.offLabel"
-              values={Object {}}
-            />
-          }
-          onChange={[Function]}
-          onKeyDown={[Function]}
+        <FormattedMessage
+          defaultMessage="This setting is overridden by the Kibana server and can not be changed."
+          id="advancedSettings.field.helpText"
+          values={Object {}}
+        />
+      </EuiText>
+    }
+    label="boolean:test:setting"
+    labelType="label"
+  >
+    <EuiSwitch
+      aria-label="boolean test setting"
+      checked={false}
+      data-test-subj="advancedSetting-editField-boolean:test:setting"
+      disabled={true}
+      label={
+        <FormattedMessage
+          defaultMessage="Off"
+          id="advancedSettings.field.offLabel"
+          values={Object {}}
         />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+      }
+      onChange={[Function]}
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for boolean setting should render custom setting icon if it is custom 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Boolean test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Boolean test setting
+      <EuiIconTip
+        aria-label="Custom setting"
+        color="primary"
+        content={
+          <FormattedMessage
+            defaultMessage="Custom setting"
+            id="advancedSettings.field.customSettingTooltip"
+            values={Object {}}
+          />
+        }
+        type="asterisk"
+      />
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={false}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="boolean:test:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Boolean test setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Boolean test setting
-          <EuiIconTip
-            aria-label="Custom setting"
-            color="primary"
-            content={
-              <FormattedMessage
-                defaultMessage="Custom setting"
-                id="advancedSettings.field.customSettingTooltip"
-                values={Object {}}
-              />
-            }
-            type="asterisk"
-          />
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "boolean:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={false}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="boolean:test:setting"
-        labelType="label"
-      >
-        <EuiSwitch
-          aria-label="boolean test setting"
-          checked={true}
-          data-test-subj="advancedSetting-editField-boolean:test:setting"
-          disabled={false}
-          label={
-            <FormattedMessage
-              defaultMessage="On"
-              id="advancedSettings.field.onLabel"
-              values={Object {}}
-            />
-          }
-          onChange={[Function]}
-          onKeyDown={[Function]}
+    <EuiSwitch
+      aria-label="boolean test setting"
+      checked={true}
+      data-test-subj="advancedSetting-editField-boolean:test:setting"
+      disabled={false}
+      label={
+        <FormattedMessage
+          defaultMessage="On"
+          id="advancedSettings.field.onLabel"
+          values={Object {}}
         />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+      }
+      onChange={[Function]}
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for boolean setting should render default value if there is no user value set 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Boolean test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Boolean test setting
+      
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={false}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="boolean:test:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Boolean test setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Boolean test setting
-          
-        </h3>
+    <EuiSwitch
+      aria-label="boolean test setting"
+      checked={true}
+      data-test-subj="advancedSetting-editField-boolean:test:setting"
+      disabled={false}
+      label={
+        <FormattedMessage
+          defaultMessage="On"
+          id="advancedSettings.field.onLabel"
+          values={Object {}}
+        />
       }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "boolean:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={false}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="boolean:test:setting"
-        labelType="label"
-      >
-        <EuiSwitch
-          aria-label="boolean test setting"
-          checked={true}
-          data-test-subj="advancedSetting-editField-boolean:test:setting"
-          disabled={false}
-          label={
-            <FormattedMessage
-              defaultMessage="On"
-              id="advancedSettings.field.onLabel"
-              values={Object {}}
-            />
+      onChange={[Function]}
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
+`;
+
+exports[`Field for boolean setting should render unsaved value if there are unsaved changes 1`] = `
+<EuiDescribedFormGroup
+  className="mgtAdvancedSettings__field mgtAdvancedSettings__field--unsaved"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Boolean test setting",
           }
-          onChange={[Function]}
-          onKeyDown={[Function]}
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Boolean test setting
+      <EuiIconTip
+        aria-label="Custom setting"
+        color="primary"
+        content={
+          <FormattedMessage
+            defaultMessage="Custom setting"
+            id="advancedSettings.field.customSettingTooltip"
+            values={Object {}}
+          />
+        }
+        type="asterisk"
+      />
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={false}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="boolean:test:setting"
+    labelType="label"
+  >
+    <EuiSwitch
+      aria-describedby="boolean:test:setting"
+      aria-label="boolean test setting"
+      checked={false}
+      data-test-subj="advancedSetting-editField-boolean:test:setting"
+      disabled={false}
+      label={
+        <FormattedMessage
+          defaultMessage="Off"
+          id="advancedSettings.field.offLabel"
+          values={Object {}}
         />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+      }
+      onChange={[Function]}
+    />
+    <EuiScreenReaderOnly>
+      <p
+        id="boolean:test:setting"
+      >
+        Setting is currently not saved.
+      </p>
+    </EuiScreenReaderOnly>
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for boolean setting should render user value if there is user value is set 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
->
-  <EuiFlexItem
-    grow={false}
-  >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Boolean test setting",
-              }
-            }
-          />
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Boolean test setting",
+          }
+        }
+      />
+      <React.Fragment>
+        <EuiSpacer
+          size="s"
+        />
+        <EuiText
+          size="xs"
+        >
           <React.Fragment>
-            <EuiSpacer
-              size="s"
+            <FormattedMessage
+              defaultMessage="Default: {value}"
+              id="advancedSettings.field.defaultValueText"
+              values={
+                Object {
+                  "value": <EuiCode>
+                    true
+                  </EuiCode>,
+                }
+              }
             />
-            <EuiText
-              size="xs"
-            >
-              <React.Fragment>
-                <FormattedMessage
-                  defaultMessage="Default: {value}"
-                  id="advancedSettings.field.defaultValueText"
-                  values={
-                    Object {
-                      "value": <EuiCode>
-                        true
-                      </EuiCode>,
-                    }
-                  }
-                />
-              </React.Fragment>
-            </EuiText>
           </React.Fragment>
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Boolean test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "boolean:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={false}
-        hasEmptyLabelSpace={false}
-        helpText={
-          <span>
-            <span>
-              <ForwardRef
-                aria-label="Reset boolean test setting to default"
-                data-test-subj="advancedSetting-resetField-boolean:test:setting"
-                onClick={[Function]}
-              >
-                <FormattedMessage
-                  defaultMessage="Reset to default"
-                  id="advancedSettings.field.resetToDefaultLinkText"
-                  values={Object {}}
-                />
-              </ForwardRef>
-                 
-            </span>
-          </span>
-        }
-        isInvalid={false}
-        label="boolean:test:setting"
-        labelType="label"
-      >
-        <EuiSwitch
-          aria-label="boolean test setting"
-          checked={false}
-          data-test-subj="advancedSetting-editField-boolean:test:setting"
-          disabled={false}
-          label={
+        </EuiText>
+      </React.Fragment>
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Boolean test setting
+      
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={false}
+    hasEmptyLabelSpace={false}
+    helpText={
+      <span>
+        <span>
+          <ForwardRef
+            aria-label="Reset boolean test setting to default"
+            data-test-subj="advancedSetting-resetField-boolean:test:setting"
+            onClick={[Function]}
+          >
             <FormattedMessage
-              defaultMessage="Off"
-              id="advancedSettings.field.offLabel"
+              defaultMessage="Reset to default"
+              id="advancedSettings.field.resetToDefaultLinkText"
               values={Object {}}
             />
-          }
-          onChange={[Function]}
-          onKeyDown={[Function]}
+          </ForwardRef>
+             
+        </span>
+      </span>
+    }
+    label="boolean:test:setting"
+    labelType="label"
+  >
+    <EuiSwitch
+      aria-label="boolean test setting"
+      checked={false}
+      data-test-subj="advancedSetting-editField-boolean:test:setting"
+      disabled={false}
+      label={
+        <FormattedMessage
+          defaultMessage="Off"
+          id="advancedSettings.field.offLabel"
+          values={Object {}}
         />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+      }
+      onChange={[Function]}
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for image setting should render as read only if saving is disabled 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Image test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Image test setting
+      
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="image:test:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Image test setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Image test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "image:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="image:test:setting"
-        labelType="label"
-      >
-        <EuiFilePicker
-          accept=".jpg,.jpeg,.png"
-          compressed={false}
-          data-test-subj="advancedSetting-editField-image:test:setting"
-          disabled={true}
-          display="large"
-          initialPromptText="Select or drag and drop a file"
-          onChange={[Function]}
-          onKeyDown={[Function]}
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+    <EuiFilePicker
+      accept=".jpg,.jpeg,.png"
+      compressed={false}
+      data-test-subj="advancedSetting-editField-image:test:setting"
+      disabled={true}
+      display="large"
+      fullWidth={true}
+      initialPromptText="Select or drag and drop a file"
+      onChange={[Function]}
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for image setting should render as read only with help text if overridden 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
->
-  <EuiFlexItem
-    grow={false}
-  >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Image test setting",
-              }
-            }
-          />
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Image test setting",
+          }
+        }
+      />
+      <React.Fragment>
+        <EuiSpacer
+          size="s"
+        />
+        <EuiText
+          size="xs"
+        >
           <React.Fragment>
-            <EuiSpacer
-              size="s"
-            />
-            <EuiText
-              size="xs"
-            >
-              <React.Fragment>
-                <FormattedMessage
-                  defaultMessage="Default: {value}"
-                  id="advancedSettings.field.defaultValueText"
-                  values={
-                    Object {
-                      "value": <EuiCode>
-                        null
-                      </EuiCode>,
-                    }
-                  }
-                />
-              </React.Fragment>
-            </EuiText>
-          </React.Fragment>
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Image test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "image:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={
-          <EuiText
-            size="xs"
-          >
             <FormattedMessage
-              defaultMessage="This setting is overridden by the Kibana server and can not be changed."
-              id="advancedSettings.field.helpText"
-              values={Object {}}
+              defaultMessage="Default: {value}"
+              id="advancedSettings.field.defaultValueText"
+              values={
+                Object {
+                  "value": <EuiCode>
+                    null
+                  </EuiCode>,
+                }
+              }
             />
-          </EuiText>
-        }
-        isInvalid={false}
-        label="image:test:setting"
-        labelType="label"
+          </React.Fragment>
+        </EuiText>
+      </React.Fragment>
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Image test setting
+      
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={
+      <EuiText
+        size="xs"
       >
-        <EuiImage
-          allowFullScreen={true}
-          alt="image:test:setting"
-          aria-label="image test setting"
-          url="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
+        <FormattedMessage
+          defaultMessage="This setting is overridden by the Kibana server and can not be changed."
+          id="advancedSettings.field.helpText"
+          values={Object {}}
         />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+      </EuiText>
+    }
+    label="image:test:setting"
+    labelType="label"
+  >
+    <EuiImage
+      allowFullScreen={true}
+      alt="image:test:setting"
+      aria-label="image test setting"
+      url="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for image setting should render custom setting icon if it is custom 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Image test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Image test setting
+      <EuiIconTip
+        aria-label="Custom setting"
+        color="primary"
+        content={
+          <FormattedMessage
+            defaultMessage="Custom setting"
+            id="advancedSettings.field.customSettingTooltip"
+            values={Object {}}
+          />
+        }
+        type="asterisk"
+      />
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="image:test:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Image test setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Image test setting
-          <EuiIconTip
-            aria-label="Custom setting"
-            color="primary"
-            content={
-              <FormattedMessage
-                defaultMessage="Custom setting"
-                id="advancedSettings.field.customSettingTooltip"
-                values={Object {}}
-              />
-            }
-            type="asterisk"
-          />
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "image:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="image:test:setting"
-        labelType="label"
-      >
-        <EuiFilePicker
-          accept=".jpg,.jpeg,.png"
-          compressed={false}
-          data-test-subj="advancedSetting-editField-image:test:setting"
-          disabled={false}
-          display="large"
-          initialPromptText="Select or drag and drop a file"
-          onChange={[Function]}
-          onKeyDown={[Function]}
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+    <EuiFilePicker
+      accept=".jpg,.jpeg,.png"
+      compressed={false}
+      data-test-subj="advancedSetting-editField-image:test:setting"
+      disabled={false}
+      display="large"
+      fullWidth={true}
+      initialPromptText="Select or drag and drop a file"
+      onChange={[Function]}
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for image setting should render default value if there is no user value set 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Image test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Image test setting
+      
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="image:test:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Image test setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Image test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "image:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="image:test:setting"
-        labelType="label"
+    <EuiFilePicker
+      accept=".jpg,.jpeg,.png"
+      compressed={false}
+      data-test-subj="advancedSetting-editField-image:test:setting"
+      disabled={false}
+      display="large"
+      fullWidth={true}
+      initialPromptText="Select or drag and drop a file"
+      onChange={[Function]}
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
+`;
+
+exports[`Field for image setting should render unsaved value if there are unsaved changes 1`] = `
+<EuiDescribedFormGroup
+  className="mgtAdvancedSettings__field mgtAdvancedSettings__field--unsaved"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Image test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Image test setting
+      <EuiIconTip
+        aria-label="Custom setting"
+        color="primary"
+        content={
+          <FormattedMessage
+            defaultMessage="Custom setting"
+            id="advancedSettings.field.customSettingTooltip"
+            values={Object {}}
+          />
+        }
+        type="asterisk"
+      />
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="image:test:setting"
+    labelType="label"
+  >
+    <EuiFilePicker
+      accept=".jpg,.jpeg,.png"
+      compressed={false}
+      data-test-subj="advancedSetting-editField-image:test:setting"
+      disabled={false}
+      display="large"
+      fullWidth={true}
+      initialPromptText="Select or drag and drop a file"
+      onChange={[Function]}
+    />
+    <EuiScreenReaderOnly>
+      <p
+        id="image:test:setting"
       >
-        <EuiFilePicker
-          accept=".jpg,.jpeg,.png"
-          compressed={false}
-          data-test-subj="advancedSetting-editField-image:test:setting"
-          disabled={false}
-          display="large"
-          initialPromptText="Select or drag and drop a file"
-          onChange={[Function]}
-          onKeyDown={[Function]}
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+        Setting is currently not saved.
+      </p>
+    </EuiScreenReaderOnly>
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for image setting should render user value if there is user value is set 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
->
-  <EuiFlexItem
-    grow={false}
-  >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Image test setting",
-              }
-            }
-          />
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Image test setting",
+          }
+        }
+      />
+      <React.Fragment>
+        <EuiSpacer
+          size="s"
+        />
+        <EuiText
+          size="xs"
+        >
           <React.Fragment>
-            <EuiSpacer
-              size="s"
+            <FormattedMessage
+              defaultMessage="Default: {value}"
+              id="advancedSettings.field.defaultValueText"
+              values={
+                Object {
+                  "value": <EuiCode>
+                    null
+                  </EuiCode>,
+                }
+              }
             />
-            <EuiText
-              size="xs"
-            >
-              <React.Fragment>
-                <FormattedMessage
-                  defaultMessage="Default: {value}"
-                  id="advancedSettings.field.defaultValueText"
-                  values={
-                    Object {
-                      "value": <EuiCode>
-                        null
-                      </EuiCode>,
-                    }
-                  }
-                />
-              </React.Fragment>
-            </EuiText>
           </React.Fragment>
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Image test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "image:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={
-          <span>
-            <span>
-              <ForwardRef
-                aria-label="Reset image test setting to default"
-                data-test-subj="advancedSetting-resetField-image:test:setting"
-                onClick={[Function]}
-              >
-                <FormattedMessage
-                  defaultMessage="Reset to default"
-                  id="advancedSettings.field.resetToDefaultLinkText"
-                  values={Object {}}
-                />
-              </ForwardRef>
-                 
-            </span>
-            <span>
-              <ForwardRef
-                aria-label="Change image test setting"
-                data-test-subj="advancedSetting-changeImage-image:test:setting"
-                onClick={[Function]}
-              >
-                <FormattedMessage
-                  defaultMessage="Change image"
-                  id="advancedSettings.field.changeImageLinkText"
-                  values={Object {}}
-                />
-              </ForwardRef>
-            </span>
-          </span>
-        }
-        isInvalid={false}
-        label="image:test:setting"
-        labelType="label"
-      >
-        <EuiImage
-          allowFullScreen={true}
-          alt="image:test:setting"
-          aria-label="image test setting"
-          url="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+        </EuiText>
+      </React.Fragment>
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Image test setting
+      
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={
+      <span>
+        <span>
+          <ForwardRef
+            aria-label="Reset image test setting to default"
+            data-test-subj="advancedSetting-resetField-image:test:setting"
+            onClick={[Function]}
+          >
+            <FormattedMessage
+              defaultMessage="Reset to default"
+              id="advancedSettings.field.resetToDefaultLinkText"
+              values={Object {}}
+            />
+          </ForwardRef>
+             
+        </span>
+        <span>
+          <ForwardRef
+            aria-label="Change image test setting"
+            data-test-subj="advancedSetting-changeImage-image:test:setting"
+            onClick={[Function]}
+          >
+            <FormattedMessage
+              defaultMessage="Change image"
+              id="advancedSettings.field.changeImageLinkText"
+              values={Object {}}
+            />
+          </ForwardRef>
+        </span>
+      </span>
+    }
+    label="image:test:setting"
+    labelType="label"
+  >
+    <EuiImage
+      allowFullScreen={true}
+      alt="image:test:setting"
+      aria-label="image test setting"
+      url="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for json setting should render as read only if saving is disabled 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
->
-  <EuiFlexItem
-    grow={false}
-  >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Json test setting",
-              }
-            }
-          />
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Json test setting",
+          }
+        }
+      />
+      <React.Fragment>
+        <EuiSpacer
+          size="s"
+        />
+        <EuiText
+          size="xs"
+        >
           <React.Fragment>
-            <EuiSpacer
-              size="s"
+            <FormattedMessage
+              defaultMessage="Default: {value}"
+              id="advancedSettings.field.defaultValueTypeJsonText"
+              values={
+                Object {
+                  "value": <EuiCodeBlock
+                    language="json"
+                    paddingSize="s"
+                  >
+                    {}
+                  </EuiCodeBlock>,
+                }
+              }
             />
-            <EuiText
-              size="xs"
-            >
-              <React.Fragment>
-                <FormattedMessage
-                  defaultMessage="Default: {value}"
-                  id="advancedSettings.field.defaultValueTypeJsonText"
-                  values={
-                    Object {
-                      "value": <EuiCodeBlock
-                        language="json"
-                        paddingSize="s"
-                      >
-                        {}
-                      </EuiCodeBlock>,
-                    }
-                  }
-                />
-              </React.Fragment>
-            </EuiText>
           </React.Fragment>
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Json test setting
-          
-        </h3>
-      }
+        </EuiText>
+      </React.Fragment>
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Json test setting
+      
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="json:test:setting"
+    labelType="label"
+  >
+    <div
+      data-test-subj="advancedSetting-editField-json:test:setting"
     >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "json:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="json:test:setting"
-        labelType="label"
-      >
-        <div
-          data-test-subj="advancedSetting-editField-json:test:setting"
-        >
-          <EuiCodeEditor
-            aria-label="json test setting"
-            editorProps={
-              Object {
-                "$blockScrolling": Infinity,
-              }
-            }
-            height="auto"
-            isReadOnly={true}
-            maxLines={30}
-            minLines={6}
-            mode="json"
-            onChange={[Function]}
-            setOptions={
-              Object {
-                "showLineNumbers": false,
-                "tabSize": 2,
-              }
-            }
-            showGutter={false}
-            theme="textmate"
-            value="{\\"foo\\": \\"bar\\"}"
-            width="100%"
-          />
-        </div>
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+      <EuiCodeEditor
+        aria-label="json test setting"
+        editorProps={
+          Object {
+            "$blockScrolling": Infinity,
+          }
+        }
+        fullWidth={true}
+        height="auto"
+        isReadOnly={true}
+        maxLines={30}
+        minLines={6}
+        mode="json"
+        onChange={[Function]}
+        setOptions={
+          Object {
+            "showLineNumbers": false,
+            "tabSize": 2,
+          }
+        }
+        showGutter={false}
+        theme="textmate"
+        value="{\\"foo\\": \\"bar\\"}"
+        width="100%"
+      />
+    </div>
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for json setting should render as read only with help text if overridden 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
->
-  <EuiFlexItem
-    grow={false}
-  >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Json test setting",
-              }
-            }
-          />
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Json test setting",
+          }
+        }
+      />
+      <React.Fragment>
+        <EuiSpacer
+          size="s"
+        />
+        <EuiText
+          size="xs"
+        >
           <React.Fragment>
-            <EuiSpacer
-              size="s"
+            <FormattedMessage
+              defaultMessage="Default: {value}"
+              id="advancedSettings.field.defaultValueTypeJsonText"
+              values={
+                Object {
+                  "value": <EuiCodeBlock
+                    language="json"
+                    paddingSize="s"
+                  >
+                    {}
+                  </EuiCodeBlock>,
+                }
+              }
             />
-            <EuiText
-              size="xs"
-            >
-              <React.Fragment>
-                <FormattedMessage
-                  defaultMessage="Default: {value}"
-                  id="advancedSettings.field.defaultValueTypeJsonText"
-                  values={
-                    Object {
-                      "value": <EuiCodeBlock
-                        language="json"
-                        paddingSize="s"
-                      >
-                        {}
-                      </EuiCodeBlock>,
-                    }
-                  }
-                />
-              </React.Fragment>
-            </EuiText>
           </React.Fragment>
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Json test setting
-          
-        </h3>
-      }
+        </EuiText>
+      </React.Fragment>
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Json test setting
+      
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={
+      <EuiText
+        size="xs"
+      >
+        <FormattedMessage
+          defaultMessage="This setting is overridden by the Kibana server and can not be changed."
+          id="advancedSettings.field.helpText"
+          values={Object {}}
+        />
+      </EuiText>
+    }
+    label="json:test:setting"
+    labelType="label"
+  >
+    <div
+      data-test-subj="advancedSetting-editField-json:test:setting"
     >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "json:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={
-          <EuiText
-            size="xs"
-          >
-            <FormattedMessage
-              defaultMessage="This setting is overridden by the Kibana server and can not be changed."
-              id="advancedSettings.field.helpText"
-              values={Object {}}
-            />
-          </EuiText>
+      <EuiCodeEditor
+        aria-label="json test setting"
+        editorProps={
+          Object {
+            "$blockScrolling": Infinity,
+          }
         }
-        isInvalid={false}
-        label="json:test:setting"
-        labelType="label"
-      >
-        <div
-          data-test-subj="advancedSetting-editField-json:test:setting"
-        >
-          <EuiCodeEditor
-            aria-label="json test setting"
-            editorProps={
-              Object {
-                "$blockScrolling": Infinity,
-              }
-            }
-            height="auto"
-            isReadOnly={true}
-            maxLines={30}
-            minLines={6}
-            mode="json"
-            onChange={[Function]}
-            setOptions={
-              Object {
-                "showLineNumbers": false,
-                "tabSize": 2,
-              }
-            }
-            showGutter={false}
-            theme="textmate"
-            value="{\\"hello\\": \\"world\\"}"
-            width="100%"
-          />
-        </div>
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+        fullWidth={true}
+        height="auto"
+        isReadOnly={true}
+        maxLines={30}
+        minLines={6}
+        mode="json"
+        onChange={[Function]}
+        setOptions={
+          Object {
+            "showLineNumbers": false,
+            "tabSize": 2,
+          }
+        }
+        showGutter={false}
+        theme="textmate"
+        value="{\\"hello\\": \\"world\\"}"
+        width="100%"
+      />
+    </div>
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for json setting should render custom setting icon if it is custom 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Json test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Json test setting
+      <EuiIconTip
+        aria-label="Custom setting"
+        color="primary"
+        content={
+          <FormattedMessage
+            defaultMessage="Custom setting"
+            id="advancedSettings.field.customSettingTooltip"
+            values={Object {}}
+          />
+        }
+        type="asterisk"
+      />
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="json:test:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Json test setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Json test setting
-          <EuiIconTip
-            aria-label="Custom setting"
-            color="primary"
-            content={
-              <FormattedMessage
-                defaultMessage="Custom setting"
-                id="advancedSettings.field.customSettingTooltip"
-                values={Object {}}
-              />
-            }
-            type="asterisk"
-          />
-        </h3>
-      }
+    <div
+      data-test-subj="advancedSetting-editField-json:test:setting"
     >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "json:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="json:test:setting"
-        labelType="label"
-      >
-        <div
-          data-test-subj="advancedSetting-editField-json:test:setting"
-        >
-          <EuiCodeEditor
-            aria-label="json test setting"
-            editorProps={
-              Object {
-                "$blockScrolling": Infinity,
-              }
-            }
-            height="auto"
-            isReadOnly={false}
-            maxLines={30}
-            minLines={6}
-            mode="json"
-            onChange={[Function]}
-            setOptions={
-              Object {
-                "showLineNumbers": false,
-                "tabSize": 2,
-              }
-            }
-            showGutter={false}
-            theme="textmate"
-            value="{\\"foo\\": \\"bar\\"}"
-            width="100%"
-          />
-        </div>
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+      <EuiCodeEditor
+        aria-label="json test setting"
+        editorProps={
+          Object {
+            "$blockScrolling": Infinity,
+          }
+        }
+        fullWidth={true}
+        height="auto"
+        isReadOnly={false}
+        maxLines={30}
+        minLines={6}
+        mode="json"
+        onChange={[Function]}
+        setOptions={
+          Object {
+            "showLineNumbers": false,
+            "tabSize": 2,
+          }
+        }
+        showGutter={false}
+        theme="textmate"
+        value="{\\"foo\\": \\"bar\\"}"
+        width="100%"
+      />
+    </div>
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for json setting should render default value if there is no user value set 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
->
-  <EuiFlexItem
-    grow={false}
-  >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Json test setting",
-              }
-            }
-          />
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Json test setting",
+          }
+        }
+      />
+      <React.Fragment>
+        <EuiSpacer
+          size="s"
+        />
+        <EuiText
+          size="xs"
+        >
           <React.Fragment>
-            <EuiSpacer
-              size="s"
+            <FormattedMessage
+              defaultMessage="Default: {value}"
+              id="advancedSettings.field.defaultValueTypeJsonText"
+              values={
+                Object {
+                  "value": <EuiCodeBlock
+                    language="json"
+                    paddingSize="s"
+                  >
+                    {}
+                  </EuiCodeBlock>,
+                }
+              }
             />
-            <EuiText
-              size="xs"
-            >
-              <React.Fragment>
-                <FormattedMessage
-                  defaultMessage="Default: {value}"
-                  id="advancedSettings.field.defaultValueTypeJsonText"
-                  values={
-                    Object {
-                      "value": <EuiCodeBlock
-                        language="json"
-                        paddingSize="s"
-                      >
-                        {}
-                      </EuiCodeBlock>,
-                    }
-                  }
-                />
-              </React.Fragment>
-            </EuiText>
           </React.Fragment>
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Json test setting
-          
-        </h3>
-      }
+        </EuiText>
+      </React.Fragment>
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Json test setting
+      
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={
+      <span>
+        <span>
+          <ForwardRef
+            aria-label="Reset json test setting to default"
+            data-test-subj="advancedSetting-resetField-json:test:setting"
+            onClick={[Function]}
+          >
+            <FormattedMessage
+              defaultMessage="Reset to default"
+              id="advancedSettings.field.resetToDefaultLinkText"
+              values={Object {}}
+            />
+          </ForwardRef>
+             
+        </span>
+      </span>
+    }
+    label="json:test:setting"
+    labelType="label"
+  >
+    <div
+      data-test-subj="advancedSetting-editField-json:test:setting"
     >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "json:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={
-          <span>
-            <span>
-              <ForwardRef
-                aria-label="Reset json test setting to default"
-                data-test-subj="advancedSetting-resetField-json:test:setting"
-                onClick={[Function]}
-              >
-                <FormattedMessage
-                  defaultMessage="Reset to default"
-                  id="advancedSettings.field.resetToDefaultLinkText"
-                  values={Object {}}
-                />
-              </ForwardRef>
-                 
-            </span>
-          </span>
-        }
-        isInvalid={false}
-        label="json:test:setting"
-        labelType="label"
+      <EuiCodeEditor
+        aria-label="json test setting"
+        editorProps={
+          Object {
+            "$blockScrolling": Infinity,
+          }
+        }
+        fullWidth={true}
+        height="auto"
+        isReadOnly={false}
+        maxLines={30}
+        minLines={6}
+        mode="json"
+        onChange={[Function]}
+        setOptions={
+          Object {
+            "showLineNumbers": false,
+            "tabSize": 2,
+          }
+        }
+        showGutter={false}
+        theme="textmate"
+        value="{\\"foo\\": \\"bar\\"}"
+        width="100%"
+      />
+    </div>
+  </EuiFormRow>
+</EuiDescribedFormGroup>
+`;
+
+exports[`Field for json setting should render unsaved value if there are unsaved changes 1`] = `
+<EuiDescribedFormGroup
+  className="mgtAdvancedSettings__field mgtAdvancedSettings__field--unsaved"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Json test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Json test setting
+      <EuiIconTip
+        aria-label="Custom setting"
+        color="primary"
+        content={
+          <FormattedMessage
+            defaultMessage="Custom setting"
+            id="advancedSettings.field.customSettingTooltip"
+            values={Object {}}
+          />
+        }
+        type="asterisk"
+      />
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="json:test:setting"
+    labelType="label"
+  >
+    <div
+      data-test-subj="advancedSetting-editField-json:test:setting"
+    >
+      <EuiCodeEditor
+        aria-describedby="json:test:setting"
+        aria-label="json test setting"
+        editorProps={
+          Object {
+            "$blockScrolling": Infinity,
+          }
+        }
+        fullWidth={true}
+        height="auto"
+        isReadOnly={false}
+        maxLines={30}
+        minLines={6}
+        mode="json"
+        onChange={[Function]}
+        setOptions={
+          Object {
+            "showLineNumbers": false,
+            "tabSize": 2,
+          }
+        }
+        showGutter={false}
+        theme="textmate"
+        value={
+          Object {
+            "foo": "bar2",
+          }
+        }
+        width="100%"
+      />
+    </div>
+    <EuiScreenReaderOnly>
+      <p
+        id="json:test:setting"
       >
-        <div
-          data-test-subj="advancedSetting-editField-json:test:setting"
-        >
-          <EuiCodeEditor
-            aria-label="json test setting"
-            editorProps={
-              Object {
-                "$blockScrolling": Infinity,
-              }
-            }
-            height="auto"
-            isReadOnly={false}
-            maxLines={30}
-            minLines={6}
-            mode="json"
-            onChange={[Function]}
-            setOptions={
-              Object {
-                "showLineNumbers": false,
-                "tabSize": 2,
-              }
-            }
-            showGutter={false}
-            theme="textmate"
-            value="{\\"foo\\": \\"bar\\"}"
-            width="100%"
-          />
-        </div>
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+        Setting is currently not saved.
+      </p>
+    </EuiScreenReaderOnly>
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for json setting should render user value if there is user value is set 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
->
-  <EuiFlexItem
-    grow={false}
-  >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Json test setting",
-              }
-            }
-          />
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Json test setting",
+          }
+        }
+      />
+      <React.Fragment>
+        <EuiSpacer
+          size="s"
+        />
+        <EuiText
+          size="xs"
+        >
           <React.Fragment>
-            <EuiSpacer
-              size="s"
+            <FormattedMessage
+              defaultMessage="Default: {value}"
+              id="advancedSettings.field.defaultValueTypeJsonText"
+              values={
+                Object {
+                  "value": <EuiCodeBlock
+                    language="json"
+                    paddingSize="s"
+                  >
+                    {}
+                  </EuiCodeBlock>,
+                }
+              }
             />
-            <EuiText
-              size="xs"
-            >
-              <React.Fragment>
-                <FormattedMessage
-                  defaultMessage="Default: {value}"
-                  id="advancedSettings.field.defaultValueTypeJsonText"
-                  values={
-                    Object {
-                      "value": <EuiCodeBlock
-                        language="json"
-                        paddingSize="s"
-                      >
-                        {}
-                      </EuiCodeBlock>,
-                    }
-                  }
-                />
-              </React.Fragment>
-            </EuiText>
           </React.Fragment>
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Json test setting
-          
-        </h3>
-      }
+        </EuiText>
+      </React.Fragment>
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Json test setting
+      
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={
+      <span>
+        <span>
+          <ForwardRef
+            aria-label="Reset json test setting to default"
+            data-test-subj="advancedSetting-resetField-json:test:setting"
+            onClick={[Function]}
+          >
+            <FormattedMessage
+              defaultMessage="Reset to default"
+              id="advancedSettings.field.resetToDefaultLinkText"
+              values={Object {}}
+            />
+          </ForwardRef>
+             
+        </span>
+      </span>
+    }
+    label="json:test:setting"
+    labelType="label"
+  >
+    <div
+      data-test-subj="advancedSetting-editField-json:test:setting"
     >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "json:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={
-          <span>
-            <span>
-              <ForwardRef
-                aria-label="Reset json test setting to default"
-                data-test-subj="advancedSetting-resetField-json:test:setting"
-                onClick={[Function]}
-              >
-                <FormattedMessage
-                  defaultMessage="Reset to default"
-                  id="advancedSettings.field.resetToDefaultLinkText"
-                  values={Object {}}
-                />
-              </ForwardRef>
-                 
-            </span>
-          </span>
-        }
-        isInvalid={false}
-        label="json:test:setting"
-        labelType="label"
-      >
-        <div
-          data-test-subj="advancedSetting-editField-json:test:setting"
-        >
-          <EuiCodeEditor
-            aria-label="json test setting"
-            editorProps={
-              Object {
-                "$blockScrolling": Infinity,
-              }
-            }
-            height="auto"
-            isReadOnly={false}
-            maxLines={30}
-            minLines={6}
-            mode="json"
-            onChange={[Function]}
-            setOptions={
-              Object {
-                "showLineNumbers": false,
-                "tabSize": 2,
-              }
-            }
-            showGutter={false}
-            theme="textmate"
-            value="{\\"hello\\": \\"world\\"}"
-            width="100%"
-          />
-        </div>
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+      <EuiCodeEditor
+        aria-label="json test setting"
+        editorProps={
+          Object {
+            "$blockScrolling": Infinity,
+          }
+        }
+        fullWidth={true}
+        height="auto"
+        isReadOnly={false}
+        maxLines={30}
+        minLines={6}
+        mode="json"
+        onChange={[Function]}
+        setOptions={
+          Object {
+            "showLineNumbers": false,
+            "tabSize": 2,
+          }
+        }
+        showGutter={false}
+        theme="textmate"
+        value="{\\"hello\\": \\"world\\"}"
+        width="100%"
+      />
+    </div>
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for markdown setting should render as read only if saving is disabled 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Markdown test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Markdown test setting
+      
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="markdown:test:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Markdown test setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Markdown test setting
-          
-        </h3>
-      }
+    <div
+      data-test-subj="advancedSetting-editField-markdown:test:setting"
     >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "markdown:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="markdown:test:setting"
-        labelType="label"
-      >
-        <div
-          data-test-subj="advancedSetting-editField-markdown:test:setting"
-        >
-          <EuiCodeEditor
-            aria-label="markdown test setting"
-            editorProps={
-              Object {
-                "$blockScrolling": Infinity,
-              }
-            }
-            height="auto"
-            isReadOnly={true}
-            maxLines={30}
-            minLines={6}
-            mode="markdown"
-            onChange={[Function]}
-            setOptions={
-              Object {
-                "showLineNumbers": false,
-                "tabSize": 2,
-              }
-            }
-            showGutter={false}
-            theme="textmate"
-            value=""
-            width="100%"
-          />
-        </div>
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+      <EuiCodeEditor
+        aria-label="markdown test setting"
+        editorProps={
+          Object {
+            "$blockScrolling": Infinity,
+          }
+        }
+        fullWidth={true}
+        height="auto"
+        isReadOnly={true}
+        maxLines={30}
+        minLines={6}
+        mode="markdown"
+        onChange={[Function]}
+        setOptions={
+          Object {
+            "showLineNumbers": false,
+            "tabSize": 2,
+          }
+        }
+        showGutter={false}
+        theme="textmate"
+        value=""
+        width="100%"
+      />
+    </div>
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for markdown setting should render as read only with help text if overridden 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
->
-  <EuiFlexItem
-    grow={false}
-  >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Markdown test setting",
-              }
-            }
-          />
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Markdown test setting",
+          }
+        }
+      />
+      <React.Fragment>
+        <EuiSpacer
+          size="s"
+        />
+        <EuiText
+          size="xs"
+        >
           <React.Fragment>
-            <EuiSpacer
-              size="s"
+            <FormattedMessage
+              defaultMessage="Default: {value}"
+              id="advancedSettings.field.defaultValueText"
+              values={
+                Object {
+                  "value": <EuiCode>
+                    null
+                  </EuiCode>,
+                }
+              }
             />
-            <EuiText
-              size="xs"
-            >
-              <React.Fragment>
-                <FormattedMessage
-                  defaultMessage="Default: {value}"
-                  id="advancedSettings.field.defaultValueText"
-                  values={
-                    Object {
-                      "value": <EuiCode>
-                        null
-                      </EuiCode>,
-                    }
-                  }
-                />
-              </React.Fragment>
-            </EuiText>
           </React.Fragment>
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Markdown test setting
-          
-        </h3>
-      }
+        </EuiText>
+      </React.Fragment>
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Markdown test setting
+      
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={
+      <EuiText
+        size="xs"
+      >
+        <FormattedMessage
+          defaultMessage="This setting is overridden by the Kibana server and can not be changed."
+          id="advancedSettings.field.helpText"
+          values={Object {}}
+        />
+      </EuiText>
+    }
+    label="markdown:test:setting"
+    labelType="label"
+  >
+    <div
+      data-test-subj="advancedSetting-editField-markdown:test:setting"
     >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "markdown:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={
-          <EuiText
-            size="xs"
-          >
-            <FormattedMessage
-              defaultMessage="This setting is overridden by the Kibana server and can not be changed."
-              id="advancedSettings.field.helpText"
-              values={Object {}}
-            />
-          </EuiText>
+      <EuiCodeEditor
+        aria-label="markdown test setting"
+        editorProps={
+          Object {
+            "$blockScrolling": Infinity,
+          }
         }
-        isInvalid={false}
-        label="markdown:test:setting"
-        labelType="label"
-      >
-        <div
-          data-test-subj="advancedSetting-editField-markdown:test:setting"
-        >
-          <EuiCodeEditor
-            aria-label="markdown test setting"
-            editorProps={
-              Object {
-                "$blockScrolling": Infinity,
-              }
-            }
-            height="auto"
-            isReadOnly={true}
-            maxLines={30}
-            minLines={6}
-            mode="markdown"
-            onChange={[Function]}
-            setOptions={
-              Object {
-                "showLineNumbers": false,
-                "tabSize": 2,
-              }
-            }
-            showGutter={false}
-            theme="textmate"
-            value="**bold**"
-            width="100%"
-          />
-        </div>
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+        fullWidth={true}
+        height="auto"
+        isReadOnly={true}
+        maxLines={30}
+        minLines={6}
+        mode="markdown"
+        onChange={[Function]}
+        setOptions={
+          Object {
+            "showLineNumbers": false,
+            "tabSize": 2,
+          }
+        }
+        showGutter={false}
+        theme="textmate"
+        value="**bold**"
+        width="100%"
+      />
+    </div>
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for markdown setting should render custom setting icon if it is custom 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Markdown test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Markdown test setting
+      <EuiIconTip
+        aria-label="Custom setting"
+        color="primary"
+        content={
+          <FormattedMessage
+            defaultMessage="Custom setting"
+            id="advancedSettings.field.customSettingTooltip"
+            values={Object {}}
+          />
+        }
+        type="asterisk"
+      />
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="markdown:test:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Markdown test setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Markdown test setting
-          <EuiIconTip
-            aria-label="Custom setting"
-            color="primary"
-            content={
-              <FormattedMessage
-                defaultMessage="Custom setting"
-                id="advancedSettings.field.customSettingTooltip"
-                values={Object {}}
-              />
-            }
-            type="asterisk"
-          />
-        </h3>
-      }
+    <div
+      data-test-subj="advancedSetting-editField-markdown:test:setting"
     >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "markdown:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="markdown:test:setting"
-        labelType="label"
-      >
-        <div
-          data-test-subj="advancedSetting-editField-markdown:test:setting"
-        >
-          <EuiCodeEditor
-            aria-label="markdown test setting"
-            editorProps={
-              Object {
-                "$blockScrolling": Infinity,
-              }
-            }
-            height="auto"
-            isReadOnly={false}
-            maxLines={30}
-            minLines={6}
-            mode="markdown"
-            onChange={[Function]}
-            setOptions={
-              Object {
-                "showLineNumbers": false,
-                "tabSize": 2,
-              }
-            }
-            showGutter={false}
-            theme="textmate"
-            value=""
-            width="100%"
-          />
-        </div>
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+      <EuiCodeEditor
+        aria-label="markdown test setting"
+        editorProps={
+          Object {
+            "$blockScrolling": Infinity,
+          }
+        }
+        fullWidth={true}
+        height="auto"
+        isReadOnly={false}
+        maxLines={30}
+        minLines={6}
+        mode="markdown"
+        onChange={[Function]}
+        setOptions={
+          Object {
+            "showLineNumbers": false,
+            "tabSize": 2,
+          }
+        }
+        showGutter={false}
+        theme="textmate"
+        value=""
+        width="100%"
+      />
+    </div>
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for markdown setting should render default value if there is no user value set 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Markdown test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Markdown test setting
+      
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="markdown:test:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Markdown test setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Markdown test setting
-          
-        </h3>
-      }
+    <div
+      data-test-subj="advancedSetting-editField-markdown:test:setting"
+    >
+      <EuiCodeEditor
+        aria-label="markdown test setting"
+        editorProps={
+          Object {
+            "$blockScrolling": Infinity,
+          }
+        }
+        fullWidth={true}
+        height="auto"
+        isReadOnly={false}
+        maxLines={30}
+        minLines={6}
+        mode="markdown"
+        onChange={[Function]}
+        setOptions={
+          Object {
+            "showLineNumbers": false,
+            "tabSize": 2,
+          }
+        }
+        showGutter={false}
+        theme="textmate"
+        value=""
+        width="100%"
+      />
+    </div>
+  </EuiFormRow>
+</EuiDescribedFormGroup>
+`;
+
+exports[`Field for markdown setting should render unsaved value if there are unsaved changes 1`] = `
+<EuiDescribedFormGroup
+  className="mgtAdvancedSettings__field mgtAdvancedSettings__field--unsaved"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Markdown test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Markdown test setting
+      <EuiIconTip
+        aria-label="Custom setting"
+        color="primary"
+        content={
+          <FormattedMessage
+            defaultMessage="Custom setting"
+            id="advancedSettings.field.customSettingTooltip"
+            values={Object {}}
+          />
+        }
+        type="asterisk"
+      />
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="markdown:test:setting"
+    labelType="label"
+  >
+    <div
+      data-test-subj="advancedSetting-editField-markdown:test:setting"
     >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "markdown:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="markdown:test:setting"
-        labelType="label"
+      <EuiCodeEditor
+        aria-describedby="markdown:test:setting"
+        aria-label="markdown test setting"
+        editorProps={
+          Object {
+            "$blockScrolling": Infinity,
+          }
+        }
+        fullWidth={true}
+        height="auto"
+        isReadOnly={false}
+        maxLines={30}
+        minLines={6}
+        mode="markdown"
+        onChange={[Function]}
+        setOptions={
+          Object {
+            "showLineNumbers": false,
+            "tabSize": 2,
+          }
+        }
+        showGutter={false}
+        theme="textmate"
+        value="Hello World"
+        width="100%"
+      />
+    </div>
+    <EuiScreenReaderOnly>
+      <p
+        id="markdown:test:setting"
       >
-        <div
-          data-test-subj="advancedSetting-editField-markdown:test:setting"
-        >
-          <EuiCodeEditor
-            aria-label="markdown test setting"
-            editorProps={
-              Object {
-                "$blockScrolling": Infinity,
-              }
-            }
-            height="auto"
-            isReadOnly={false}
-            maxLines={30}
-            minLines={6}
-            mode="markdown"
-            onChange={[Function]}
-            setOptions={
-              Object {
-                "showLineNumbers": false,
-                "tabSize": 2,
-              }
-            }
-            showGutter={false}
-            theme="textmate"
-            value=""
-            width="100%"
-          />
-        </div>
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+        Setting is currently not saved.
+      </p>
+    </EuiScreenReaderOnly>
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for markdown setting should render user value if there is user value is set 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
->
-  <EuiFlexItem
-    grow={false}
-  >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Markdown test setting",
-              }
-            }
-          />
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Markdown test setting",
+          }
+        }
+      />
+      <React.Fragment>
+        <EuiSpacer
+          size="s"
+        />
+        <EuiText
+          size="xs"
+        >
           <React.Fragment>
-            <EuiSpacer
-              size="s"
+            <FormattedMessage
+              defaultMessage="Default: {value}"
+              id="advancedSettings.field.defaultValueText"
+              values={
+                Object {
+                  "value": <EuiCode>
+                    null
+                  </EuiCode>,
+                }
+              }
             />
-            <EuiText
-              size="xs"
-            >
-              <React.Fragment>
-                <FormattedMessage
-                  defaultMessage="Default: {value}"
-                  id="advancedSettings.field.defaultValueText"
-                  values={
-                    Object {
-                      "value": <EuiCode>
-                        null
-                      </EuiCode>,
-                    }
-                  }
-                />
-              </React.Fragment>
-            </EuiText>
           </React.Fragment>
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Markdown test setting
-          
-        </h3>
-      }
+        </EuiText>
+      </React.Fragment>
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Markdown test setting
+      
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={
+      <span>
+        <span>
+          <ForwardRef
+            aria-label="Reset markdown test setting to default"
+            data-test-subj="advancedSetting-resetField-markdown:test:setting"
+            onClick={[Function]}
+          >
+            <FormattedMessage
+              defaultMessage="Reset to default"
+              id="advancedSettings.field.resetToDefaultLinkText"
+              values={Object {}}
+            />
+          </ForwardRef>
+             
+        </span>
+      </span>
+    }
+    label="markdown:test:setting"
+    labelType="label"
+  >
+    <div
+      data-test-subj="advancedSetting-editField-markdown:test:setting"
     >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "markdown:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={
-          <span>
-            <span>
-              <ForwardRef
-                aria-label="Reset markdown test setting to default"
-                data-test-subj="advancedSetting-resetField-markdown:test:setting"
-                onClick={[Function]}
-              >
-                <FormattedMessage
-                  defaultMessage="Reset to default"
-                  id="advancedSettings.field.resetToDefaultLinkText"
-                  values={Object {}}
-                />
-              </ForwardRef>
-                 
-            </span>
-          </span>
-        }
-        isInvalid={false}
-        label="markdown:test:setting"
-        labelType="label"
-      >
-        <div
-          data-test-subj="advancedSetting-editField-markdown:test:setting"
-        >
-          <EuiCodeEditor
-            aria-label="markdown test setting"
-            editorProps={
-              Object {
-                "$blockScrolling": Infinity,
-              }
-            }
-            height="auto"
-            isReadOnly={false}
-            maxLines={30}
-            minLines={6}
-            mode="markdown"
-            onChange={[Function]}
-            setOptions={
-              Object {
-                "showLineNumbers": false,
-                "tabSize": 2,
-              }
-            }
-            showGutter={false}
-            theme="textmate"
-            value="**bold**"
-            width="100%"
-          />
-        </div>
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+      <EuiCodeEditor
+        aria-label="markdown test setting"
+        editorProps={
+          Object {
+            "$blockScrolling": Infinity,
+          }
+        }
+        fullWidth={true}
+        height="auto"
+        isReadOnly={false}
+        maxLines={30}
+        minLines={6}
+        mode="markdown"
+        onChange={[Function]}
+        setOptions={
+          Object {
+            "showLineNumbers": false,
+            "tabSize": 2,
+          }
+        }
+        showGutter={false}
+        theme="textmate"
+        value="**bold**"
+        width="100%"
+      />
+    </div>
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for number setting should render as read only if saving is disabled 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Number test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Number test setting
+      
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="number:test:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Number test setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Number test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "number:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="number:test:setting"
-        labelType="label"
-      >
-        <EuiFieldNumber
-          aria-label="number test setting"
-          data-test-subj="advancedSetting-editField-number:test:setting"
-          disabled={true}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          value={5}
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+    <EuiFieldNumber
+      aria-label="number test setting"
+      data-test-subj="advancedSetting-editField-number:test:setting"
+      disabled={true}
+      fullWidth={true}
+      onChange={[Function]}
+      value={5}
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for number setting should render as read only with help text if overridden 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
->
-  <EuiFlexItem
-    grow={false}
-  >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Number test setting",
-              }
-            }
-          />
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Number test setting",
+          }
+        }
+      />
+      <React.Fragment>
+        <EuiSpacer
+          size="s"
+        />
+        <EuiText
+          size="xs"
+        >
           <React.Fragment>
-            <EuiSpacer
-              size="s"
-            />
-            <EuiText
-              size="xs"
-            >
-              <React.Fragment>
-                <FormattedMessage
-                  defaultMessage="Default: {value}"
-                  id="advancedSettings.field.defaultValueText"
-                  values={
-                    Object {
-                      "value": <EuiCode>
-                        5
-                      </EuiCode>,
-                    }
-                  }
-                />
-              </React.Fragment>
-            </EuiText>
-          </React.Fragment>
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Number test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "number:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={
-          <EuiText
-            size="xs"
-          >
             <FormattedMessage
-              defaultMessage="This setting is overridden by the Kibana server and can not be changed."
-              id="advancedSettings.field.helpText"
-              values={Object {}}
+              defaultMessage="Default: {value}"
+              id="advancedSettings.field.defaultValueText"
+              values={
+                Object {
+                  "value": <EuiCode>
+                    5
+                  </EuiCode>,
+                }
+              }
             />
-          </EuiText>
-        }
-        isInvalid={false}
-        label="number:test:setting"
-        labelType="label"
+          </React.Fragment>
+        </EuiText>
+      </React.Fragment>
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Number test setting
+      
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={
+      <EuiText
+        size="xs"
       >
-        <EuiFieldNumber
-          aria-label="number test setting"
-          data-test-subj="advancedSetting-editField-number:test:setting"
-          disabled={true}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          value={10}
+        <FormattedMessage
+          defaultMessage="This setting is overridden by the Kibana server and can not be changed."
+          id="advancedSettings.field.helpText"
+          values={Object {}}
         />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+      </EuiText>
+    }
+    label="number:test:setting"
+    labelType="label"
+  >
+    <EuiFieldNumber
+      aria-label="number test setting"
+      data-test-subj="advancedSetting-editField-number:test:setting"
+      disabled={true}
+      fullWidth={true}
+      onChange={[Function]}
+      value={10}
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for number setting should render custom setting icon if it is custom 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Number test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Number test setting
+      <EuiIconTip
+        aria-label="Custom setting"
+        color="primary"
+        content={
+          <FormattedMessage
+            defaultMessage="Custom setting"
+            id="advancedSettings.field.customSettingTooltip"
+            values={Object {}}
+          />
+        }
+        type="asterisk"
+      />
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="number:test:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Number test setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Number test setting
-          <EuiIconTip
-            aria-label="Custom setting"
-            color="primary"
-            content={
-              <FormattedMessage
-                defaultMessage="Custom setting"
-                id="advancedSettings.field.customSettingTooltip"
-                values={Object {}}
-              />
-            }
-            type="asterisk"
-          />
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "number:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="number:test:setting"
-        labelType="label"
-      >
-        <EuiFieldNumber
-          aria-label="number test setting"
-          data-test-subj="advancedSetting-editField-number:test:setting"
-          disabled={false}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          value={5}
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+    <EuiFieldNumber
+      aria-label="number test setting"
+      data-test-subj="advancedSetting-editField-number:test:setting"
+      disabled={false}
+      fullWidth={true}
+      onChange={[Function]}
+      value={5}
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
+`;
+
+exports[`Field for number setting should render default value if there is no user value set 1`] = `
+<EuiDescribedFormGroup
+  className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Number test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Number test setting
+      
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="number:test:setting"
+    labelType="label"
+  >
+    <EuiFieldNumber
+      aria-label="number test setting"
+      data-test-subj="advancedSetting-editField-number:test:setting"
+      disabled={false}
+      fullWidth={true}
+      onChange={[Function]}
+      value={5}
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
-exports[`Field for number setting should render default value if there is no user value set 1`] = `
-<EuiFlexGroup
-  className="mgtAdvancedSettings__field"
+exports[`Field for number setting should render unsaved value if there are unsaved changes 1`] = `
+<EuiDescribedFormGroup
+  className="mgtAdvancedSettings__field mgtAdvancedSettings__field--unsaved"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Number test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Number test setting
+      <EuiIconTip
+        aria-label="Custom setting"
+        color="primary"
+        content={
+          <FormattedMessage
+            defaultMessage="Custom setting"
+            id="advancedSettings.field.customSettingTooltip"
+            values={Object {}}
+          />
+        }
+        type="asterisk"
+      />
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="number:test:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Number test setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Number test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "number:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="number:test:setting"
-        labelType="label"
+    <EuiFieldNumber
+      aria-describedby="number:test:setting"
+      aria-label="number test setting"
+      data-test-subj="advancedSetting-editField-number:test:setting"
+      disabled={false}
+      fullWidth={true}
+      onChange={[Function]}
+      value={1}
+    />
+    <EuiScreenReaderOnly>
+      <p
+        id="number:test:setting"
       >
-        <EuiFieldNumber
-          aria-label="number test setting"
-          data-test-subj="advancedSetting-editField-number:test:setting"
-          disabled={false}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          value={5}
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+        Setting is currently not saved.
+      </p>
+    </EuiScreenReaderOnly>
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for number setting should render user value if there is user value is set 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
->
-  <EuiFlexItem
-    grow={false}
-  >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Number test setting",
-              }
-            }
-          />
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Number test setting",
+          }
+        }
+      />
+      <React.Fragment>
+        <EuiSpacer
+          size="s"
+        />
+        <EuiText
+          size="xs"
+        >
           <React.Fragment>
-            <EuiSpacer
-              size="s"
+            <FormattedMessage
+              defaultMessage="Default: {value}"
+              id="advancedSettings.field.defaultValueText"
+              values={
+                Object {
+                  "value": <EuiCode>
+                    5
+                  </EuiCode>,
+                }
+              }
             />
-            <EuiText
-              size="xs"
-            >
-              <React.Fragment>
-                <FormattedMessage
-                  defaultMessage="Default: {value}"
-                  id="advancedSettings.field.defaultValueText"
-                  values={
-                    Object {
-                      "value": <EuiCode>
-                        5
-                      </EuiCode>,
-                    }
-                  }
-                />
-              </React.Fragment>
-            </EuiText>
           </React.Fragment>
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Number test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "number:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={
-          <span>
-            <span>
-              <ForwardRef
-                aria-label="Reset number test setting to default"
-                data-test-subj="advancedSetting-resetField-number:test:setting"
-                onClick={[Function]}
-              >
-                <FormattedMessage
-                  defaultMessage="Reset to default"
-                  id="advancedSettings.field.resetToDefaultLinkText"
-                  values={Object {}}
-                />
-              </ForwardRef>
-                 
-            </span>
-          </span>
-        }
-        isInvalid={false}
-        label="number:test:setting"
-        labelType="label"
-      >
-        <EuiFieldNumber
-          aria-label="number test setting"
-          data-test-subj="advancedSetting-editField-number:test:setting"
-          disabled={false}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          value={10}
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+        </EuiText>
+      </React.Fragment>
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Number test setting
+      
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={
+      <span>
+        <span>
+          <ForwardRef
+            aria-label="Reset number test setting to default"
+            data-test-subj="advancedSetting-resetField-number:test:setting"
+            onClick={[Function]}
+          >
+            <FormattedMessage
+              defaultMessage="Reset to default"
+              id="advancedSettings.field.resetToDefaultLinkText"
+              values={Object {}}
+            />
+          </ForwardRef>
+             
+        </span>
+      </span>
+    }
+    label="number:test:setting"
+    labelType="label"
+  >
+    <EuiFieldNumber
+      aria-label="number test setting"
+      data-test-subj="advancedSetting-editField-number:test:setting"
+      disabled={false}
+      fullWidth={true}
+      onChange={[Function]}
+      value={10}
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for select setting should render as read only if saving is disabled 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Select test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Select test setting
+      
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="select:test:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Select test setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Select test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "select:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="select:test:setting"
-        labelType="label"
-      >
-        <EuiSelect
-          aria-label="select test setting"
-          data-test-subj="advancedSetting-editField-select:test:setting"
-          disabled={true}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          options={
-            Array [
-              Object {
-                "text": "Apple",
-                "value": "apple",
-              },
-              Object {
-                "text": "Orange",
-                "value": "orange",
-              },
-              Object {
-                "text": "banana",
-                "value": "banana",
-              },
-            ]
-          }
-          value="orange"
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+    <EuiSelect
+      aria-label="select test setting"
+      data-test-subj="advancedSetting-editField-select:test:setting"
+      disabled={true}
+      fullWidth={true}
+      onChange={[Function]}
+      options={
+        Array [
+          Object {
+            "text": "Apple",
+            "value": "apple",
+          },
+          Object {
+            "text": "Orange",
+            "value": "orange",
+          },
+          Object {
+            "text": "banana",
+            "value": "banana",
+          },
+        ]
+      }
+      value="orange"
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for select setting should render as read only with help text if overridden 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
->
-  <EuiFlexItem
-    grow={false}
-  >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Select test setting",
-              }
-            }
-          />
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Select test setting",
+          }
+        }
+      />
+      <React.Fragment>
+        <EuiSpacer
+          size="s"
+        />
+        <EuiText
+          size="xs"
+        >
           <React.Fragment>
-            <EuiSpacer
-              size="s"
-            />
-            <EuiText
-              size="xs"
-            >
-              <React.Fragment>
-                <FormattedMessage
-                  defaultMessage="Default: {value}"
-                  id="advancedSettings.field.defaultValueText"
-                  values={
-                    Object {
-                      "value": <EuiCode>
-                        Orange
-                      </EuiCode>,
-                    }
-                  }
-                />
-              </React.Fragment>
-            </EuiText>
-          </React.Fragment>
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Select test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "select:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={
-          <EuiText
-            size="xs"
-          >
             <FormattedMessage
-              defaultMessage="This setting is overridden by the Kibana server and can not be changed."
-              id="advancedSettings.field.helpText"
-              values={Object {}}
+              defaultMessage="Default: {value}"
+              id="advancedSettings.field.defaultValueText"
+              values={
+                Object {
+                  "value": <EuiCode>
+                    Orange
+                  </EuiCode>,
+                }
+              }
             />
-          </EuiText>
-        }
-        isInvalid={false}
-        label="select:test:setting"
-        labelType="label"
+          </React.Fragment>
+        </EuiText>
+      </React.Fragment>
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Select test setting
+      
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={
+      <EuiText
+        size="xs"
       >
-        <EuiSelect
-          aria-label="select test setting"
-          data-test-subj="advancedSetting-editField-select:test:setting"
-          disabled={true}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          options={
-            Array [
-              Object {
-                "text": "Apple",
-                "value": "apple",
-              },
-              Object {
-                "text": "Orange",
-                "value": "orange",
-              },
-              Object {
-                "text": "banana",
-                "value": "banana",
-              },
-            ]
-          }
-          value="banana"
+        <FormattedMessage
+          defaultMessage="This setting is overridden by the Kibana server and can not be changed."
+          id="advancedSettings.field.helpText"
+          values={Object {}}
         />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+      </EuiText>
+    }
+    label="select:test:setting"
+    labelType="label"
+  >
+    <EuiSelect
+      aria-label="select test setting"
+      data-test-subj="advancedSetting-editField-select:test:setting"
+      disabled={true}
+      fullWidth={true}
+      onChange={[Function]}
+      options={
+        Array [
+          Object {
+            "text": "Apple",
+            "value": "apple",
+          },
+          Object {
+            "text": "Orange",
+            "value": "orange",
+          },
+          Object {
+            "text": "banana",
+            "value": "banana",
+          },
+        ]
+      }
+      value="banana"
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for select setting should render custom setting icon if it is custom 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Select test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Select test setting
+      <EuiIconTip
+        aria-label="Custom setting"
+        color="primary"
+        content={
+          <FormattedMessage
+            defaultMessage="Custom setting"
+            id="advancedSettings.field.customSettingTooltip"
+            values={Object {}}
+          />
+        }
+        type="asterisk"
+      />
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="select:test:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Select test setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Select test setting
-          <EuiIconTip
-            aria-label="Custom setting"
-            color="primary"
-            content={
-              <FormattedMessage
-                defaultMessage="Custom setting"
-                id="advancedSettings.field.customSettingTooltip"
-                values={Object {}}
-              />
-            }
-            type="asterisk"
-          />
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "select:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="select:test:setting"
-        labelType="label"
-      >
-        <EuiSelect
-          aria-label="select test setting"
-          data-test-subj="advancedSetting-editField-select:test:setting"
-          disabled={false}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          options={
-            Array [
-              Object {
-                "text": "Apple",
-                "value": "apple",
-              },
-              Object {
-                "text": "Orange",
-                "value": "orange",
-              },
-              Object {
-                "text": "banana",
-                "value": "banana",
-              },
-            ]
-          }
-          value="orange"
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+    <EuiSelect
+      aria-label="select test setting"
+      data-test-subj="advancedSetting-editField-select:test:setting"
+      disabled={false}
+      fullWidth={true}
+      onChange={[Function]}
+      options={
+        Array [
+          Object {
+            "text": "Apple",
+            "value": "apple",
+          },
+          Object {
+            "text": "Orange",
+            "value": "orange",
+          },
+          Object {
+            "text": "banana",
+            "value": "banana",
+          },
+        ]
+      }
+      value="orange"
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for select setting should render default value if there is no user value set 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Select test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Select test setting
+      
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="select:test:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Select test setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Select test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "select:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="select:test:setting"
-        labelType="label"
+    <EuiSelect
+      aria-label="select test setting"
+      data-test-subj="advancedSetting-editField-select:test:setting"
+      disabled={false}
+      fullWidth={true}
+      onChange={[Function]}
+      options={
+        Array [
+          Object {
+            "text": "Apple",
+            "value": "apple",
+          },
+          Object {
+            "text": "Orange",
+            "value": "orange",
+          },
+          Object {
+            "text": "banana",
+            "value": "banana",
+          },
+        ]
+      }
+      value="orange"
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
+`;
+
+exports[`Field for select setting should render unsaved value if there are unsaved changes 1`] = `
+<EuiDescribedFormGroup
+  className="mgtAdvancedSettings__field mgtAdvancedSettings__field--unsaved"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Select test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Select test setting
+      <EuiIconTip
+        aria-label="Custom setting"
+        color="primary"
+        content={
+          <FormattedMessage
+            defaultMessage="Custom setting"
+            id="advancedSettings.field.customSettingTooltip"
+            values={Object {}}
+          />
+        }
+        type="asterisk"
+      />
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="select:test:setting"
+    labelType="label"
+  >
+    <EuiSelect
+      aria-describedby="select:test:setting"
+      aria-label="select test setting"
+      data-test-subj="advancedSetting-editField-select:test:setting"
+      disabled={false}
+      fullWidth={true}
+      onChange={[Function]}
+      options={
+        Array [
+          Object {
+            "text": "Apple",
+            "value": "apple",
+          },
+          Object {
+            "text": "Orange",
+            "value": "orange",
+          },
+          Object {
+            "text": "banana",
+            "value": "banana",
+          },
+        ]
+      }
+      value="banana"
+    />
+    <EuiScreenReaderOnly>
+      <p
+        id="select:test:setting"
       >
-        <EuiSelect
-          aria-label="select test setting"
-          data-test-subj="advancedSetting-editField-select:test:setting"
-          disabled={false}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          options={
-            Array [
-              Object {
-                "text": "Apple",
-                "value": "apple",
-              },
-              Object {
-                "text": "Orange",
-                "value": "orange",
-              },
-              Object {
-                "text": "banana",
-                "value": "banana",
-              },
-            ]
-          }
-          value="orange"
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+        Setting is currently not saved.
+      </p>
+    </EuiScreenReaderOnly>
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for select setting should render user value if there is user value is set 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
->
-  <EuiFlexItem
-    grow={false}
-  >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for Select test setting",
-              }
-            }
-          />
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for Select test setting",
+          }
+        }
+      />
+      <React.Fragment>
+        <EuiSpacer
+          size="s"
+        />
+        <EuiText
+          size="xs"
+        >
           <React.Fragment>
-            <EuiSpacer
-              size="s"
+            <FormattedMessage
+              defaultMessage="Default: {value}"
+              id="advancedSettings.field.defaultValueText"
+              values={
+                Object {
+                  "value": <EuiCode>
+                    Orange
+                  </EuiCode>,
+                }
+              }
             />
-            <EuiText
-              size="xs"
-            >
-              <React.Fragment>
-                <FormattedMessage
-                  defaultMessage="Default: {value}"
-                  id="advancedSettings.field.defaultValueText"
-                  values={
-                    Object {
-                      "value": <EuiCode>
-                        Orange
-                      </EuiCode>,
-                    }
-                  }
-                />
-              </React.Fragment>
-            </EuiText>
           </React.Fragment>
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          Select test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "select:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={
-          <span>
-            <span>
-              <ForwardRef
-                aria-label="Reset select test setting to default"
-                data-test-subj="advancedSetting-resetField-select:test:setting"
-                onClick={[Function]}
-              >
-                <FormattedMessage
-                  defaultMessage="Reset to default"
-                  id="advancedSettings.field.resetToDefaultLinkText"
-                  values={Object {}}
-                />
-              </ForwardRef>
-                 
-            </span>
-          </span>
-        }
-        isInvalid={false}
-        label="select:test:setting"
-        labelType="label"
-      >
-        <EuiSelect
-          aria-label="select test setting"
-          data-test-subj="advancedSetting-editField-select:test:setting"
-          disabled={false}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          options={
-            Array [
-              Object {
-                "text": "Apple",
-                "value": "apple",
-              },
-              Object {
-                "text": "Orange",
-                "value": "orange",
-              },
-              Object {
-                "text": "banana",
-                "value": "banana",
-              },
-            ]
-          }
-          value="banana"
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+        </EuiText>
+      </React.Fragment>
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      Select test setting
+      
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={
+      <span>
+        <span>
+          <ForwardRef
+            aria-label="Reset select test setting to default"
+            data-test-subj="advancedSetting-resetField-select:test:setting"
+            onClick={[Function]}
+          >
+            <FormattedMessage
+              defaultMessage="Reset to default"
+              id="advancedSettings.field.resetToDefaultLinkText"
+              values={Object {}}
+            />
+          </ForwardRef>
+             
+        </span>
+      </span>
+    }
+    label="select:test:setting"
+    labelType="label"
+  >
+    <EuiSelect
+      aria-label="select test setting"
+      data-test-subj="advancedSetting-editField-select:test:setting"
+      disabled={false}
+      fullWidth={true}
+      onChange={[Function]}
+      options={
+        Array [
+          Object {
+            "text": "Apple",
+            "value": "apple",
+          },
+          Object {
+            "text": "Orange",
+            "value": "orange",
+          },
+          Object {
+            "text": "banana",
+            "value": "banana",
+          },
+        ]
+      }
+      value="banana"
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for string setting should render as read only if saving is disabled 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for String test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      String test setting
+      
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="string:test:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for String test setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          String test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "string:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="string:test:setting"
-        labelType="label"
-      >
-        <EuiFieldText
-          aria-label="string test setting"
-          data-test-subj="advancedSetting-editField-string:test:setting"
-          disabled={true}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          value=""
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+    <EuiFieldText
+      aria-label="string test setting"
+      data-test-subj="advancedSetting-editField-string:test:setting"
+      disabled={true}
+      fullWidth={true}
+      onChange={[Function]}
+      value=""
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for string setting should render as read only with help text if overridden 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
->
-  <EuiFlexItem
-    grow={false}
-  >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for String test setting",
-              }
-            }
-          />
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for String test setting",
+          }
+        }
+      />
+      <React.Fragment>
+        <EuiSpacer
+          size="s"
+        />
+        <EuiText
+          size="xs"
+        >
           <React.Fragment>
-            <EuiSpacer
-              size="s"
-            />
-            <EuiText
-              size="xs"
-            >
-              <React.Fragment>
-                <FormattedMessage
-                  defaultMessage="Default: {value}"
-                  id="advancedSettings.field.defaultValueText"
-                  values={
-                    Object {
-                      "value": <EuiCode>
-                        null
-                      </EuiCode>,
-                    }
-                  }
-                />
-              </React.Fragment>
-            </EuiText>
-          </React.Fragment>
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          String test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "string:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={
-          <EuiText
-            size="xs"
-          >
             <FormattedMessage
-              defaultMessage="This setting is overridden by the Kibana server and can not be changed."
-              id="advancedSettings.field.helpText"
-              values={Object {}}
+              defaultMessage="Default: {value}"
+              id="advancedSettings.field.defaultValueText"
+              values={
+                Object {
+                  "value": <EuiCode>
+                    null
+                  </EuiCode>,
+                }
+              }
             />
-          </EuiText>
-        }
-        isInvalid={false}
-        label="string:test:setting"
-        labelType="label"
+          </React.Fragment>
+        </EuiText>
+      </React.Fragment>
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      String test setting
+      
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={
+      <EuiText
+        size="xs"
       >
-        <EuiFieldText
-          aria-label="string test setting"
-          data-test-subj="advancedSetting-editField-string:test:setting"
-          disabled={true}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          value="foo"
+        <FormattedMessage
+          defaultMessage="This setting is overridden by the Kibana server and can not be changed."
+          id="advancedSettings.field.helpText"
+          values={Object {}}
         />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+      </EuiText>
+    }
+    label="string:test:setting"
+    labelType="label"
+  >
+    <EuiFieldText
+      aria-label="string test setting"
+      data-test-subj="advancedSetting-editField-string:test:setting"
+      disabled={true}
+      fullWidth={true}
+      onChange={[Function]}
+      value="foo"
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for string setting should render custom setting icon if it is custom 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for String test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      String test setting
+      <EuiIconTip
+        aria-label="Custom setting"
+        color="primary"
+        content={
+          <FormattedMessage
+            defaultMessage="Custom setting"
+            id="advancedSettings.field.customSettingTooltip"
+            values={Object {}}
+          />
+        }
+        type="asterisk"
+      />
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="string:test:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for String test setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          String test setting
-          <EuiIconTip
-            aria-label="Custom setting"
-            color="primary"
-            content={
-              <FormattedMessage
-                defaultMessage="Custom setting"
-                id="advancedSettings.field.customSettingTooltip"
-                values={Object {}}
-              />
-            }
-            type="asterisk"
-          />
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "string:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="string:test:setting"
-        labelType="label"
-      >
-        <EuiFieldText
-          aria-label="string test setting"
-          data-test-subj="advancedSetting-editField-string:test:setting"
-          disabled={false}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          value=""
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+    <EuiFieldText
+      aria-label="string test setting"
+      data-test-subj="advancedSetting-editField-string:test:setting"
+      disabled={false}
+      fullWidth={true}
+      onChange={[Function]}
+      value=""
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for string setting should render default value if there is no user value set 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for String test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      String test setting
+      
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="string:test:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for String test setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          String test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "string:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="string:test:setting"
-        labelType="label"
+    <EuiFieldText
+      aria-label="string test setting"
+      data-test-subj="advancedSetting-editField-string:test:setting"
+      disabled={false}
+      fullWidth={true}
+      onChange={[Function]}
+      value=""
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
+`;
+
+exports[`Field for string setting should render unsaved value if there are unsaved changes 1`] = `
+<EuiDescribedFormGroup
+  className="mgtAdvancedSettings__field mgtAdvancedSettings__field--unsaved"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for String test setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      String test setting
+      <EuiIconTip
+        aria-label="Custom setting"
+        color="primary"
+        content={
+          <FormattedMessage
+            defaultMessage="Custom setting"
+            id="advancedSettings.field.customSettingTooltip"
+            values={Object {}}
+          />
+        }
+        type="asterisk"
+      />
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="string:test:setting"
+    labelType="label"
+  >
+    <EuiFieldText
+      aria-describedby="string:test:setting"
+      aria-label="string test setting"
+      data-test-subj="advancedSetting-editField-string:test:setting"
+      disabled={false}
+      fullWidth={true}
+      onChange={[Function]}
+      value="hello world"
+    />
+    <EuiScreenReaderOnly>
+      <p
+        id="string:test:setting"
       >
-        <EuiFieldText
-          aria-label="string test setting"
-          data-test-subj="advancedSetting-editField-string:test:setting"
-          disabled={false}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          value=""
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+        Setting is currently not saved.
+      </p>
+    </EuiScreenReaderOnly>
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for string setting should render user value if there is user value is set 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
->
-  <EuiFlexItem
-    grow={false}
-  >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for String test setting",
-              }
-            }
-          />
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for String test setting",
+          }
+        }
+      />
+      <React.Fragment>
+        <EuiSpacer
+          size="s"
+        />
+        <EuiText
+          size="xs"
+        >
           <React.Fragment>
-            <EuiSpacer
-              size="s"
+            <FormattedMessage
+              defaultMessage="Default: {value}"
+              id="advancedSettings.field.defaultValueText"
+              values={
+                Object {
+                  "value": <EuiCode>
+                    null
+                  </EuiCode>,
+                }
+              }
             />
-            <EuiText
-              size="xs"
-            >
-              <React.Fragment>
-                <FormattedMessage
-                  defaultMessage="Default: {value}"
-                  id="advancedSettings.field.defaultValueText"
-                  values={
-                    Object {
-                      "value": <EuiCode>
-                        null
-                      </EuiCode>,
-                    }
-                  }
-                />
-              </React.Fragment>
-            </EuiText>
           </React.Fragment>
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          String test setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "string:test:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={
-          <span>
-            <span>
-              <ForwardRef
-                aria-label="Reset string test setting to default"
-                data-test-subj="advancedSetting-resetField-string:test:setting"
-                onClick={[Function]}
-              >
-                <FormattedMessage
-                  defaultMessage="Reset to default"
-                  id="advancedSettings.field.resetToDefaultLinkText"
-                  values={Object {}}
-                />
-              </ForwardRef>
-                 
-            </span>
-          </span>
-        }
-        isInvalid={false}
-        label="string:test:setting"
-        labelType="label"
-      >
-        <EuiFieldText
-          aria-label="string test setting"
-          data-test-subj="advancedSetting-editField-string:test:setting"
-          disabled={false}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          value="foo"
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+        </EuiText>
+      </React.Fragment>
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      String test setting
+      
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={
+      <span>
+        <span>
+          <ForwardRef
+            aria-label="Reset string test setting to default"
+            data-test-subj="advancedSetting-resetField-string:test:setting"
+            onClick={[Function]}
+          >
+            <FormattedMessage
+              defaultMessage="Reset to default"
+              id="advancedSettings.field.resetToDefaultLinkText"
+              values={Object {}}
+            />
+          </ForwardRef>
+             
+        </span>
+      </span>
+    }
+    label="string:test:setting"
+    labelType="label"
+  >
+    <EuiFieldText
+      aria-label="string test setting"
+      data-test-subj="advancedSetting-editField-string:test:setting"
+      disabled={false}
+      fullWidth={true}
+      onChange={[Function]}
+      value="foo"
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for stringWithValidation setting should render as read only if saving is disabled 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for String test validation setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      String test validation setting
+      
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="string:test-validation:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for String test validation setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          String test validation setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "string:test-validation:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="string:test-validation:setting"
-        labelType="label"
-      >
-        <EuiFieldText
-          aria-label="string test validation setting"
-          data-test-subj="advancedSetting-editField-string:test-validation:setting"
-          disabled={true}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          value="foo-default"
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+    <EuiFieldText
+      aria-label="string test validation setting"
+      data-test-subj="advancedSetting-editField-string:test-validation:setting"
+      disabled={true}
+      fullWidth={true}
+      onChange={[Function]}
+      value="foo-default"
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for stringWithValidation setting should render as read only with help text if overridden 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
->
-  <EuiFlexItem
-    grow={false}
-  >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for String test validation setting",
-              }
-            }
-          />
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for String test validation setting",
+          }
+        }
+      />
+      <React.Fragment>
+        <EuiSpacer
+          size="s"
+        />
+        <EuiText
+          size="xs"
+        >
           <React.Fragment>
-            <EuiSpacer
-              size="s"
-            />
-            <EuiText
-              size="xs"
-            >
-              <React.Fragment>
-                <FormattedMessage
-                  defaultMessage="Default: {value}"
-                  id="advancedSettings.field.defaultValueText"
-                  values={
-                    Object {
-                      "value": <EuiCode>
-                        foo-default
-                      </EuiCode>,
-                    }
-                  }
-                />
-              </React.Fragment>
-            </EuiText>
-          </React.Fragment>
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          String test validation setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "string:test-validation:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={
-          <EuiText
-            size="xs"
-          >
             <FormattedMessage
-              defaultMessage="This setting is overridden by the Kibana server and can not be changed."
-              id="advancedSettings.field.helpText"
-              values={Object {}}
+              defaultMessage="Default: {value}"
+              id="advancedSettings.field.defaultValueText"
+              values={
+                Object {
+                  "value": <EuiCode>
+                    foo-default
+                  </EuiCode>,
+                }
+              }
             />
-          </EuiText>
-        }
-        isInvalid={false}
-        label="string:test-validation:setting"
-        labelType="label"
+          </React.Fragment>
+        </EuiText>
+      </React.Fragment>
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      String test validation setting
+      
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={
+      <EuiText
+        size="xs"
       >
-        <EuiFieldText
-          aria-label="string test validation setting"
-          data-test-subj="advancedSetting-editField-string:test-validation:setting"
-          disabled={true}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          value="fooUserValue"
+        <FormattedMessage
+          defaultMessage="This setting is overridden by the Kibana server and can not be changed."
+          id="advancedSettings.field.helpText"
+          values={Object {}}
         />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+      </EuiText>
+    }
+    label="string:test-validation:setting"
+    labelType="label"
+  >
+    <EuiFieldText
+      aria-label="string test validation setting"
+      data-test-subj="advancedSetting-editField-string:test-validation:setting"
+      disabled={true}
+      fullWidth={true}
+      onChange={[Function]}
+      value="fooUserValue"
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for stringWithValidation setting should render custom setting icon if it is custom 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for String test validation setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      String test validation setting
+      <EuiIconTip
+        aria-label="Custom setting"
+        color="primary"
+        content={
+          <FormattedMessage
+            defaultMessage="Custom setting"
+            id="advancedSettings.field.customSettingTooltip"
+            values={Object {}}
+          />
+        }
+        type="asterisk"
+      />
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="string:test-validation:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for String test validation setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          String test validation setting
-          <EuiIconTip
-            aria-label="Custom setting"
-            color="primary"
-            content={
-              <FormattedMessage
-                defaultMessage="Custom setting"
-                id="advancedSettings.field.customSettingTooltip"
-                values={Object {}}
-              />
-            }
-            type="asterisk"
-          />
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "string:test-validation:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="string:test-validation:setting"
-        labelType="label"
-      >
-        <EuiFieldText
-          aria-label="string test validation setting"
-          data-test-subj="advancedSetting-editField-string:test-validation:setting"
-          disabled={false}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          value="foo-default"
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+    <EuiFieldText
+      aria-label="string test validation setting"
+      data-test-subj="advancedSetting-editField-string:test-validation:setting"
+      disabled={false}
+      fullWidth={true}
+      onChange={[Function]}
+      value="foo-default"
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for stringWithValidation setting should render default value if there is no user value set 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for String test validation setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      String test validation setting
+      
+    </h3>
+  }
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="string:test-validation:setting"
+    labelType="label"
   >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for String test validation setting",
-              }
-            }
-          />
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          String test validation setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "string:test-validation:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={null}
-        isInvalid={false}
-        label="string:test-validation:setting"
-        labelType="label"
+    <EuiFieldText
+      aria-label="string test validation setting"
+      data-test-subj="advancedSetting-editField-string:test-validation:setting"
+      disabled={false}
+      fullWidth={true}
+      onChange={[Function]}
+      value="foo-default"
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
+`;
+
+exports[`Field for stringWithValidation setting should render unsaved value if there are unsaved changes 1`] = `
+<EuiDescribedFormGroup
+  className="mgtAdvancedSettings__field mgtAdvancedSettings__field--unsaved"
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for String test validation setting",
+          }
+        }
+      />
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      String test validation setting
+      <EuiIconTip
+        aria-label="Custom setting"
+        color="primary"
+        content={
+          <FormattedMessage
+            defaultMessage="Custom setting"
+            id="advancedSettings.field.customSettingTooltip"
+            values={Object {}}
+          />
+        }
+        type="asterisk"
+      />
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={null}
+    label="string:test-validation:setting"
+    labelType="label"
+  >
+    <EuiFieldText
+      aria-describedby="string:test-validation:setting"
+      aria-label="string test validation setting"
+      data-test-subj="advancedSetting-editField-string:test-validation:setting"
+      disabled={false}
+      fullWidth={true}
+      onChange={[Function]}
+      value="hello world"
+    />
+    <EuiScreenReaderOnly>
+      <p
+        id="string:test-validation:setting"
       >
-        <EuiFieldText
-          aria-label="string test validation setting"
-          data-test-subj="advancedSetting-editField-string:test-validation:setting"
-          disabled={false}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          value="foo-default"
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+        Setting is currently not saved.
+      </p>
+    </EuiScreenReaderOnly>
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
 
 exports[`Field for stringWithValidation setting should render user value if there is user value is set 1`] = `
-<EuiFlexGroup
+<EuiDescribedFormGroup
   className="mgtAdvancedSettings__field"
->
-  <EuiFlexItem
-    grow={false}
-  >
-    <EuiDescribedFormGroup
-      className="mgtAdvancedSettings__fieldWrapper"
-      description={
-        <React.Fragment>
-          <div
-            dangerouslySetInnerHTML={
-              Object {
-                "__html": "Description for String test validation setting",
-              }
-            }
-          />
+  description={
+    <React.Fragment>
+      <div
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "Description for String test validation setting",
+          }
+        }
+      />
+      <React.Fragment>
+        <EuiSpacer
+          size="s"
+        />
+        <EuiText
+          size="xs"
+        >
           <React.Fragment>
-            <EuiSpacer
-              size="s"
+            <FormattedMessage
+              defaultMessage="Default: {value}"
+              id="advancedSettings.field.defaultValueText"
+              values={
+                Object {
+                  "value": <EuiCode>
+                    foo-default
+                  </EuiCode>,
+                }
+              }
             />
-            <EuiText
-              size="xs"
-            >
-              <React.Fragment>
-                <FormattedMessage
-                  defaultMessage="Default: {value}"
-                  id="advancedSettings.field.defaultValueText"
-                  values={
-                    Object {
-                      "value": <EuiCode>
-                        foo-default
-                      </EuiCode>,
-                    }
-                  }
-                />
-              </React.Fragment>
-            </EuiText>
           </React.Fragment>
-        </React.Fragment>
-      }
-      title={
-        <h3>
-          String test validation setting
-          
-        </h3>
-      }
-    >
-      <EuiFormRow
-        className="mgtAdvancedSettings__fieldRow"
-        describedByIds={
-          Array [
-            "string:test-validation:setting-aria",
-          ]
-        }
-        display="row"
-        error={null}
-        fullWidth={false}
-        hasChildLabel={true}
-        hasEmptyLabelSpace={false}
-        helpText={
-          <span>
-            <span>
-              <ForwardRef
-                aria-label="Reset string test validation setting to default"
-                data-test-subj="advancedSetting-resetField-string:test-validation:setting"
-                onClick={[Function]}
-              >
-                <FormattedMessage
-                  defaultMessage="Reset to default"
-                  id="advancedSettings.field.resetToDefaultLinkText"
-                  values={Object {}}
-                />
-              </ForwardRef>
-                 
-            </span>
-          </span>
-        }
-        isInvalid={false}
-        label="string:test-validation:setting"
-        labelType="label"
-      >
-        <EuiFieldText
-          aria-label="string test validation setting"
-          data-test-subj="advancedSetting-editField-string:test-validation:setting"
-          disabled={false}
-          isLoading={false}
-          onChange={[Function]}
-          onKeyDown={[Function]}
-          value="fooUserValue"
-        />
-      </EuiFormRow>
-    </EuiDescribedFormGroup>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={false}
-  />
-</EuiFlexGroup>
+        </EuiText>
+      </React.Fragment>
+    </React.Fragment>
+  }
+  fullWidth={true}
+  title={
+    <h3>
+      String test validation setting
+      
+    </h3>
+  }
+>
+  <EuiFormRow
+    className="mgtAdvancedSettings__fieldRow"
+    describedByIds={Array []}
+    display="row"
+    fullWidth={true}
+    hasChildLabel={true}
+    hasEmptyLabelSpace={false}
+    helpText={
+      <span>
+        <span>
+          <ForwardRef
+            aria-label="Reset string test validation setting to default"
+            data-test-subj="advancedSetting-resetField-string:test-validation:setting"
+            onClick={[Function]}
+          >
+            <FormattedMessage
+              defaultMessage="Reset to default"
+              id="advancedSettings.field.resetToDefaultLinkText"
+              values={Object {}}
+            />
+          </ForwardRef>
+             
+        </span>
+      </span>
+    }
+    label="string:test-validation:setting"
+    labelType="label"
+  >
+    <EuiFieldText
+      aria-label="string test validation setting"
+      data-test-subj="advancedSetting-editField-string:test-validation:setting"
+      disabled={false}
+      fullWidth={true}
+      onChange={[Function]}
+      value="fooUserValue"
+    />
+  </EuiFormRow>
+</EuiDescribedFormGroup>
 `;
diff --git a/src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx b/src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx
index 81df22ccf6e43..8e41fed685898 100644
--- a/src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx
+++ b/src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx
@@ -20,21 +20,14 @@
 import React from 'react';
 import { I18nProvider } from '@kbn/i18n/react';
 import { shallowWithI18nProvider, mountWithI18nProvider } from 'test_utils/enzyme_helpers';
-import { mount } from 'enzyme';
+import { mount, ReactWrapper } from 'enzyme';
 import { FieldSetting } from '../../types';
 import { UiSettingsType, StringValidation } from '../../../../../../core/public';
 import { notificationServiceMock, docLinksServiceMock } from '../../../../../../core/public/mocks';
 
 // @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
-import { Field } from './field';
-
-jest.mock('ui/notify', () => ({
-  toastNotifications: {
-    addDanger: () => {},
-    add: jest.fn(),
-  },
-}));
+import { Field, getEditableValue } from './field';
 
 jest.mock('brace/theme/textmate', () => 'brace/theme/textmate');
 jest.mock('brace/mode/markdown', () => 'brace/mode/markdown');
@@ -45,6 +38,18 @@ const defaults = {
   category: ['category'],
 };
 
+const exampleValues = {
+  array: ['example_value'],
+  boolean: false,
+  image: 'data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=',
+  json: { foo: 'bar2' },
+  markdown: 'Hello World',
+  number: 1,
+  select: 'banana',
+  string: 'hello world',
+  stringWithValidation: 'foo',
+};
+
 const settings: Record<string, FieldSetting> = {
   array: {
     name: 'array:test:setting',
@@ -161,7 +166,7 @@ const settings: Record<string, FieldSetting> = {
     description: 'Description for String test validation setting',
     type: 'string',
     validation: {
-      regex: new RegExp('/^foo'),
+      regex: new RegExp('^foo'),
       message: 'must start with "foo"',
     },
     value: undefined,
@@ -182,11 +187,22 @@ const userValues = {
   string: 'foo',
   stringWithValidation: 'fooUserValue',
 };
+
 const invalidUserValues = {
   stringWithValidation: 'invalidUserValue',
 };
-const save = jest.fn(() => Promise.resolve(true));
-const clear = jest.fn(() => Promise.resolve(true));
+
+const handleChange = jest.fn();
+const clearChange = jest.fn();
+
+const getFieldSettingValue = (wrapper: ReactWrapper, name: string, type: string) => {
+  const field = findTestSubject(wrapper, `advancedSetting-editField-${name}`);
+  if (type === 'boolean') {
+    return field.props()['aria-checked'];
+  } else {
+    return field.props().value;
+  }
+};
 
 describe('Field', () => {
   Object.keys(settings).forEach(type => {
@@ -197,8 +213,7 @@ describe('Field', () => {
         const component = shallowWithI18nProvider(
           <Field
             setting={setting}
-            save={save}
-            clear={clear}
+            handleChange={handleChange}
             enableSaving={true}
             toasts={notificationServiceMock.createStartContract().toasts}
             dockLinks={docLinksServiceMock.createStartContract().links}
@@ -217,8 +232,7 @@ describe('Field', () => {
               value: userValues[type],
               isOverridden: true,
             }}
-            save={save}
-            clear={clear}
+            handleChange={handleChange}
             enableSaving={true}
             toasts={notificationServiceMock.createStartContract().toasts}
             dockLinks={docLinksServiceMock.createStartContract().links}
@@ -232,14 +246,12 @@ describe('Field', () => {
         const component = shallowWithI18nProvider(
           <Field
             setting={setting}
-            save={save}
-            clear={clear}
+            handleChange={handleChange}
             enableSaving={false}
             toasts={notificationServiceMock.createStartContract().toasts}
             dockLinks={docLinksServiceMock.createStartContract().links}
           />
         );
-
         expect(component).toMatchSnapshot();
       });
 
@@ -251,8 +263,7 @@ describe('Field', () => {
               // @ts-ignore
               value: userValues[type],
             }}
-            save={save}
-            clear={clear}
+            handleChange={handleChange}
             enableSaving={true}
             toasts={notificationServiceMock.createStartContract().toasts}
             dockLinks={docLinksServiceMock.createStartContract().links}
@@ -269,48 +280,44 @@ describe('Field', () => {
               ...setting,
               isCustom: true,
             }}
-            save={save}
-            clear={clear}
+            handleChange={handleChange}
             enableSaving={true}
             toasts={notificationServiceMock.createStartContract().toasts}
             dockLinks={docLinksServiceMock.createStartContract().links}
           />
         );
-
         expect(component).toMatchSnapshot();
       });
-    });
-
-    if (type === 'select') {
-      it('should use options for rendering values', () => {
-        const component = mountWithI18nProvider(
+      it('should render unsaved value if there are unsaved changes', async () => {
+        const component = shallowWithI18nProvider(
           <Field
             setting={{
               ...setting,
               isCustom: true,
             }}
-            save={save}
-            clear={clear}
+            handleChange={handleChange}
             enableSaving={true}
             toasts={notificationServiceMock.createStartContract().toasts}
             dockLinks={docLinksServiceMock.createStartContract().links}
+            unsavedChanges={{
+              // @ts-ignore
+              value: exampleValues[setting.type],
+            }}
           />
         );
-        const select = findTestSubject(component, `advancedSetting-editField-${setting.name}`);
-        // @ts-ignore
-        const labels = select.find('option').map(option => option.prop('value'));
-        expect(labels).toEqual(['apple', 'orange', 'banana']);
+        expect(component).toMatchSnapshot();
       });
+    });
 
-      it('should use optionLabels for rendering labels', () => {
+    if (type === 'select') {
+      it('should use options for rendering values and optionsLabels for rendering labels', () => {
         const component = mountWithI18nProvider(
           <Field
             setting={{
               ...setting,
               isCustom: true,
             }}
-            save={save}
-            clear={clear}
+            handleChange={handleChange}
             enableSaving={true}
             toasts={notificationServiceMock.createStartContract().toasts}
             dockLinks={docLinksServiceMock.createStartContract().links}
@@ -318,6 +325,9 @@ describe('Field', () => {
         );
         const select = findTestSubject(component, `advancedSetting-editField-${setting.name}`);
         // @ts-ignore
+        const values = select.find('option').map(option => option.prop('value'));
+        expect(values).toEqual(['apple', 'orange', 'banana']);
+        // @ts-ignore
         const labels = select.find('option').map(option => option.text());
         expect(labels).toEqual(['Apple', 'Orange', 'banana']);
       });
@@ -328,8 +338,8 @@ describe('Field', () => {
         <I18nProvider>
           <Field
             setting={setting}
-            save={save}
-            clear={clear}
+            clearChange={clearChange}
+            handleChange={handleChange}
             enableSaving={true}
             toasts={notificationServiceMock.createStartContract().toasts}
             dockLinks={docLinksServiceMock.createStartContract().links}
@@ -352,90 +362,52 @@ describe('Field', () => {
         const userValue = userValues[type];
         (component.instance() as Field).getImageAsBase64 = ({}: Blob) => Promise.resolve('');
 
-        it('should be able to change value from no value and cancel', async () => {
-          await (component.instance() as Field).onImageChange([userValue]);
-          const updated = wrapper.update();
-          findTestSubject(updated, `advancedSetting-cancelEditField-${setting.name}`).simulate(
-            'click'
-          );
-          expect(
-            (component.instance() as Field).state.unsavedValue ===
-              (component.instance() as Field).state.savedValue
-          ).toBe(true);
-        });
-
-        it('should be able to change value and save', async () => {
-          await (component.instance() as Field).onImageChange([userValue]);
-          const updated = wrapper.update();
-          findTestSubject(updated, `advancedSetting-saveEditField-${setting.name}`).simulate(
-            'click'
-          );
-          expect(save).toBeCalled();
-          component.setState({ savedValue: userValue });
+        it('should be able to change value and cancel', async () => {
+          (component.instance() as Field).onImageChange([userValue]);
+          expect(handleChange).toBeCalled();
           await wrapper.setProps({
+            unsavedChanges: {
+              value: userValue,
+              changeImage: true,
+            },
             setting: {
               ...(component.instance() as Field).props.setting,
               value: userValue,
             },
           });
-
           await (component.instance() as Field).cancelChangeImage();
+          expect(clearChange).toBeCalledWith(setting.name);
           wrapper.update();
         });
 
-        it('should be able to change value from existing value and save', async () => {
+        it('should be able to change value from existing value', async () => {
+          await wrapper.setProps({
+            unsavedChanges: {},
+          });
           const updated = wrapper.update();
           findTestSubject(updated, `advancedSetting-changeImage-${setting.name}`).simulate('click');
-
           const newUserValue = `${userValue}=`;
           await (component.instance() as Field).onImageChange([newUserValue]);
-          const updated2 = wrapper.update();
-          findTestSubject(updated2, `advancedSetting-saveEditField-${setting.name}`).simulate(
-            'click'
-          );
-          expect(save).toBeCalled();
-          component.setState({ savedValue: newUserValue });
-          await wrapper.setProps({
-            setting: {
-              ...(component.instance() as Field).props.setting,
-              value: newUserValue,
-            },
-          });
-          wrapper.update();
+          expect(handleChange).toBeCalled();
         });
 
         it('should be able to reset to default value', async () => {
           const updated = wrapper.update();
           findTestSubject(updated, `advancedSetting-resetField-${setting.name}`).simulate('click');
-          expect(clear).toBeCalled();
+          expect(handleChange).toBeCalledWith(setting.name, {
+            value: getEditableValue(setting.type, setting.defVal),
+            changeImage: true,
+          });
         });
       });
     } else if (type === 'markdown' || type === 'json') {
       describe(`for changing ${type} setting`, () => {
         const { wrapper, component } = setup();
         const userValue = userValues[type];
-        const fieldUserValue = userValue;
-
-        it('should be able to change value and cancel', async () => {
-          (component.instance() as Field).onCodeEditorChange(fieldUserValue as UiSettingsType);
-          const updated = wrapper.update();
-          findTestSubject(updated, `advancedSetting-cancelEditField-${setting.name}`).simulate(
-            'click'
-          );
-          expect(
-            (component.instance() as Field).state.unsavedValue ===
-              (component.instance() as Field).state.savedValue
-          ).toBe(true);
-        });
 
-        it('should be able to change value and save', async () => {
-          (component.instance() as Field).onCodeEditorChange(fieldUserValue as UiSettingsType);
-          const updated = wrapper.update();
-          findTestSubject(updated, `advancedSetting-saveEditField-${setting.name}`).simulate(
-            'click'
-          );
-          expect(save).toBeCalled();
-          component.setState({ savedValue: fieldUserValue });
+        it('should be able to change value', async () => {
+          (component.instance() as Field).onCodeEditorChange(userValue as UiSettingsType);
+          expect(handleChange).toBeCalledWith(setting.name, { value: userValue });
           await wrapper.setProps({
             setting: {
               ...(component.instance() as Field).props.setting,
@@ -445,19 +417,21 @@ describe('Field', () => {
           wrapper.update();
         });
 
+        it('should be able to reset to default value', async () => {
+          const updated = wrapper.update();
+          findTestSubject(updated, `advancedSetting-resetField-${setting.name}`).simulate('click');
+          expect(handleChange).toBeCalledWith(setting.name, {
+            value: getEditableValue(setting.type, setting.defVal),
+          });
+        });
+
         if (type === 'json') {
           it('should be able to clear value and have empty object populate', async () => {
-            (component.instance() as Field).onCodeEditorChange('' as UiSettingsType);
+            await (component.instance() as Field).onCodeEditorChange('' as UiSettingsType);
             wrapper.update();
-            expect((component.instance() as Field).state.unsavedValue).toEqual('{}');
+            expect(handleChange).toBeCalledWith(setting.name, { value: setting.defVal });
           });
         }
-
-        it('should be able to reset to default value', async () => {
-          const updated = wrapper.update();
-          findTestSubject(updated, `advancedSetting-resetField-${setting.name}`).simulate('click');
-          expect(clear).toBeCalled();
-        });
       });
     } else {
       describe(`for changing ${type} setting`, () => {
@@ -470,76 +444,45 @@ describe('Field', () => {
           // @ts-ignore
           const invalidUserValue = invalidUserValues[type];
           it('should display an error when validation fails', async () => {
-            (component.instance() as Field).onFieldChange(invalidUserValue);
+            await (component.instance() as Field).onFieldChange(invalidUserValue);
+            const expectedUnsavedChanges = {
+              value: invalidUserValue,
+              error: (setting.validation as StringValidation).message,
+              isInvalid: true,
+            };
+            expect(handleChange).toBeCalledWith(setting.name, expectedUnsavedChanges);
+            wrapper.setProps({ unsavedChanges: expectedUnsavedChanges });
             const updated = wrapper.update();
             const errorMessage = updated.find('.euiFormErrorText').text();
-            expect(errorMessage).toEqual((setting.validation as StringValidation).message);
+            expect(errorMessage).toEqual(expectedUnsavedChanges.error);
           });
         }
 
-        it('should be able to change value and cancel', async () => {
-          (component.instance() as Field).onFieldChange(fieldUserValue);
+        it('should be able to change value', async () => {
+          await (component.instance() as Field).onFieldChange(fieldUserValue);
           const updated = wrapper.update();
-          findTestSubject(updated, `advancedSetting-cancelEditField-${setting.name}`).simulate(
-            'click'
-          );
-          expect(
-            (component.instance() as Field).state.unsavedValue ===
-              (component.instance() as Field).state.savedValue
-          ).toBe(true);
+          expect(handleChange).toBeCalledWith(setting.name, { value: fieldUserValue });
+          updated.setProps({ unsavedChanges: { value: fieldUserValue } });
+          const currentValue = getFieldSettingValue(updated, setting.name, type);
+          expect(currentValue).toEqual(fieldUserValue);
         });
 
-        it('should be able to change value and save', async () => {
-          (component.instance() as Field).onFieldChange(fieldUserValue);
-          const updated = wrapper.update();
-          findTestSubject(updated, `advancedSetting-saveEditField-${setting.name}`).simulate(
-            'click'
-          );
-          expect(save).toBeCalled();
-          component.setState({ savedValue: fieldUserValue });
+        it('should be able to reset to default value', async () => {
           await wrapper.setProps({
-            setting: {
-              ...(component.instance() as Field).props.setting,
-              value: userValue,
-            },
+            unsavedChanges: {},
+            setting: { ...setting, value: fieldUserValue },
           });
-          wrapper.update();
-        });
-
-        it('should be able to reset to default value', async () => {
           const updated = wrapper.update();
           findTestSubject(updated, `advancedSetting-resetField-${setting.name}`).simulate('click');
-          expect(clear).toBeCalled();
+          const expectedEditableValue = getEditableValue(setting.type, setting.defVal);
+          expect(handleChange).toBeCalledWith(setting.name, {
+            value: expectedEditableValue,
+          });
+          updated.setProps({ unsavedChanges: { value: expectedEditableValue } });
+          const currentValue = getFieldSettingValue(updated, setting.name, type);
+          expect(currentValue).toEqual(expectedEditableValue);
         });
       });
     }
   });
-
-  it('should show a reload toast when saving setting requiring a page reload', async () => {
-    const setting = {
-      ...settings.string,
-      requiresPageReload: true,
-    };
-    const toasts = notificationServiceMock.createStartContract().toasts;
-    const wrapper = mountWithI18nProvider(
-      <Field
-        setting={setting}
-        save={save}
-        clear={clear}
-        enableSaving={true}
-        toasts={toasts}
-        dockLinks={docLinksServiceMock.createStartContract().links}
-      />
-    );
-    (wrapper.instance() as Field).onFieldChange({ target: { value: 'a new value' } });
-    const updated = wrapper.update();
-    findTestSubject(updated, `advancedSetting-saveEditField-${setting.name}`).simulate('click');
-    expect(save).toHaveBeenCalled();
-    await save();
-    expect(toasts.add).toHaveBeenCalledWith(
-      expect.objectContaining({
-        title: expect.stringContaining('Please reload the page'),
-      })
-    );
-  });
 });
diff --git a/src/plugins/advanced_settings/public/management_app/components/field/field.tsx b/src/plugins/advanced_settings/public/management_app/components/field/field.tsx
index 7158e3d5e7b3e..d9c3752d1c0a5 100644
--- a/src/plugins/advanced_settings/public/management_app/components/field/field.tsx
+++ b/src/plugins/advanced_settings/public/management_app/components/field/field.tsx
@@ -18,17 +18,16 @@
  */
 
 import React, { PureComponent, Fragment } from 'react';
-import ReactDOM from 'react-dom';
+import classNames from 'classnames';
 
 import 'brace/theme/textmate';
 import 'brace/mode/markdown';
 
 import {
   EuiBadge,
-  EuiButton,
-  EuiButtonEmpty,
   EuiCode,
   EuiCodeBlock,
+  EuiScreenReaderOnly,
   // @ts-ignore
   EuiCodeEditor,
   EuiDescribedFormGroup,
@@ -36,23 +35,20 @@ import {
   EuiFieldText,
   // @ts-ignore
   EuiFilePicker,
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiFormRow,
   EuiIconTip,
   EuiImage,
   EuiLink,
   EuiSpacer,
-  EuiToolTip,
   EuiText,
   EuiSelect,
   EuiSwitch,
   EuiSwitchEvent,
-  keyCodes,
+  EuiToolTip,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { FieldSetting } from '../../types';
+import { FieldSetting, FieldState } from '../../types';
 import { isDefaultValue } from '../../lib';
 import {
   UiSettingsType,
@@ -64,71 +60,37 @@ import {
 
 interface FieldProps {
   setting: FieldSetting;
-  save: (name: string, value: string) => Promise<boolean>;
-  clear: (name: string) => Promise<boolean>;
+  handleChange: (name: string, value: FieldState) => void;
   enableSaving: boolean;
   dockLinks: DocLinksStart['links'];
   toasts: ToastsStart;
+  clearChange?: (name: string) => void;
+  unsavedChanges?: FieldState;
+  loading?: boolean;
 }
 
-interface FieldState {
-  unsavedValue: any;
-  savedValue: any;
-  loading: boolean;
-  isInvalid: boolean;
-  error: string | null;
-  changeImage: boolean;
-  isJsonArray: boolean;
-}
-
-export class Field extends PureComponent<FieldProps, FieldState> {
-  private changeImageForm: EuiFilePicker | undefined;
-  constructor(props: FieldProps) {
-    super(props);
-    const { type, value, defVal } = this.props.setting;
-    const editableValue = this.getEditableValue(type, value, defVal);
-
-    this.state = {
-      isInvalid: false,
-      error: null,
-      loading: false,
-      changeImage: false,
-      savedValue: editableValue,
-      unsavedValue: editableValue,
-      isJsonArray: type === 'json' ? Array.isArray(JSON.parse(String(defVal) || '{}')) : false,
-    };
-  }
-
-  UNSAFE_componentWillReceiveProps(nextProps: FieldProps) {
-    const { unsavedValue } = this.state;
-    const { type, value, defVal } = nextProps.setting;
-    const editableValue = this.getEditableValue(type, value, defVal);
-
-    this.setState({
-      savedValue: editableValue,
-      unsavedValue: value === null || value === undefined ? editableValue : unsavedValue,
-    });
+export const getEditableValue = (
+  type: UiSettingsType,
+  value: FieldSetting['value'],
+  defVal?: FieldSetting['defVal']
+) => {
+  const val = value === null || value === undefined ? defVal : value;
+  switch (type) {
+    case 'array':
+      return (val as string[]).join(', ');
+    case 'boolean':
+      return !!val;
+    case 'number':
+      return Number(val);
+    case 'image':
+      return val;
+    default:
+      return val || '';
   }
+};
 
-  getEditableValue(
-    type: UiSettingsType,
-    value: FieldSetting['value'],
-    defVal: FieldSetting['defVal']
-  ) {
-    const val = value === null || value === undefined ? defVal : value;
-    switch (type) {
-      case 'array':
-        return (val as string[]).join(', ');
-      case 'boolean':
-        return !!val;
-      case 'number':
-        return Number(val);
-      case 'image':
-        return val;
-      default:
-        return val || '';
-    }
-  }
+export class Field extends PureComponent<FieldProps> {
+  private changeImageForm: EuiFilePicker | undefined = React.createRef();
 
   getDisplayedDefaultValue(
     type: UiSettingsType,
@@ -150,47 +112,60 @@ export class Field extends PureComponent<FieldProps, FieldState> {
     }
   }
 
-  setLoading(loading: boolean) {
-    this.setState({
-      loading,
-    });
-  }
+  handleChange = (unsavedChanges: FieldState) => {
+    this.props.handleChange(this.props.setting.name, unsavedChanges);
+  };
 
-  clearError() {
-    this.setState({
-      isInvalid: false,
-      error: null,
-    });
+  resetField = () => {
+    const { type, defVal } = this.props.setting;
+    if (type === 'image') {
+      this.cancelChangeImage();
+      return this.handleChange({
+        value: getEditableValue(type, defVal),
+        changeImage: true,
+      });
+    }
+    return this.handleChange({ value: getEditableValue(type, defVal) });
+  };
+
+  componentDidUpdate(prevProps: FieldProps) {
+    if (
+      prevProps.setting.type === 'image' &&
+      prevProps.unsavedChanges?.value &&
+      !this.props.unsavedChanges?.value
+    ) {
+      this.cancelChangeImage();
+    }
   }
 
   onCodeEditorChange = (value: UiSettingsType) => {
-    const { type } = this.props.setting;
-    const { isJsonArray } = this.state;
+    const { defVal, type } = this.props.setting;
 
     let newUnsavedValue;
-    let isInvalid = false;
-    let error = null;
+    let errorParams = {};
 
     switch (type) {
       case 'json':
+        const isJsonArray = Array.isArray(JSON.parse((defVal as string) || '{}'));
         newUnsavedValue = value.trim() || (isJsonArray ? '[]' : '{}');
         try {
           JSON.parse(newUnsavedValue);
         } catch (e) {
-          isInvalid = true;
-          error = i18n.translate('advancedSettings.field.codeEditorSyntaxErrorMessage', {
-            defaultMessage: 'Invalid JSON syntax',
-          });
+          errorParams = {
+            error: i18n.translate('advancedSettings.field.codeEditorSyntaxErrorMessage', {
+              defaultMessage: 'Invalid JSON syntax',
+            }),
+            isInvalid: true,
+          };
         }
         break;
       default:
         newUnsavedValue = value;
     }
 
-    this.setState({
-      error,
-      isInvalid,
-      unsavedValue: newUnsavedValue,
+    this.handleChange({
+      value: newUnsavedValue,
+      ...errorParams,
     });
   };
 
@@ -201,58 +176,44 @@ export class Field extends PureComponent<FieldProps, FieldState> {
   onFieldChangeEvent = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) =>
     this.onFieldChange(e.target.value);
 
-  onFieldChange = (value: any) => {
-    const { type, validation } = this.props.setting;
-    const { unsavedValue } = this.state;
-
+  onFieldChange = (targetValue: any) => {
+    const { type, validation, value, defVal } = this.props.setting;
     let newUnsavedValue;
 
     switch (type) {
       case 'boolean':
-        newUnsavedValue = !unsavedValue;
+        const { unsavedChanges } = this.props;
+        const currentValue = unsavedChanges
+          ? unsavedChanges.value
+          : getEditableValue(type, value, defVal);
+        newUnsavedValue = !currentValue;
         break;
       case 'number':
-        newUnsavedValue = Number(value);
+        newUnsavedValue = Number(targetValue);
         break;
       default:
-        newUnsavedValue = value;
+        newUnsavedValue = targetValue;
     }
 
-    let isInvalid = false;
-    let error = null;
+    let errorParams = {};
 
-    if (validation && (validation as StringValidationRegex).regex) {
+    if ((validation as StringValidationRegex)?.regex) {
       if (!(validation as StringValidationRegex).regex!.test(newUnsavedValue.toString())) {
-        error = (validation as StringValidationRegex).message;
-        isInvalid = true;
+        errorParams = {
+          error: (validation as StringValidationRegex).message,
+          isInvalid: true,
+        };
       }
     }
 
-    this.setState({
-      unsavedValue: newUnsavedValue,
-      isInvalid,
-      error,
+    this.handleChange({
+      value: newUnsavedValue,
+      ...errorParams,
     });
   };
 
-  onFieldKeyDown = ({ keyCode }: { keyCode: number }) => {
-    if (keyCode === keyCodes.ENTER) {
-      this.saveEdit();
-    }
-    if (keyCode === keyCodes.ESCAPE) {
-      this.cancelEdit();
-    }
-  };
-
-  onFieldEscape = ({ keyCode }: { keyCode: number }) => {
-    if (keyCode === keyCodes.ESCAPE) {
-      this.cancelEdit();
-    }
-  };
-
   onImageChange = async (files: any[]) => {
     if (!files.length) {
-      this.clearError();
       this.setState({
         unsavedValue: null,
       });
@@ -266,19 +227,24 @@ export class Field extends PureComponent<FieldProps, FieldState> {
       if (file instanceof File) {
         base64Image = (await this.getImageAsBase64(file)) as string;
       }
-      const isInvalid = !!(maxSize && maxSize.length && base64Image.length > maxSize.length);
-      this.setState({
-        isInvalid,
-        error: isInvalid
-          ? i18n.translate('advancedSettings.field.imageTooLargeErrorMessage', {
-              defaultMessage: 'Image is too large, maximum size is {maxSizeDescription}',
-              values: {
-                maxSizeDescription: maxSize.description,
-              },
-            })
-          : null,
+
+      let errorParams = {};
+      const isInvalid = !!(maxSize?.length && base64Image.length > maxSize.length);
+      if (isInvalid) {
+        errorParams = {
+          isInvalid,
+          error: i18n.translate('advancedSettings.field.imageTooLargeErrorMessage', {
+            defaultMessage: 'Image is too large, maximum size is {maxSizeDescription}',
+            values: {
+              maxSizeDescription: maxSize.description,
+            },
+          }),
+        };
+      }
+      this.handleChange({
         changeImage: true,
-        unsavedValue: base64Image,
+        value: base64Image,
+        ...errorParams,
       });
     } catch (err) {
       this.props.toasts.addDanger(
@@ -305,152 +271,62 @@ export class Field extends PureComponent<FieldProps, FieldState> {
   }
 
   changeImage = () => {
-    this.setState({
+    this.handleChange({
+      value: null,
       changeImage: true,
     });
   };
 
   cancelChangeImage = () => {
-    const { savedValue } = this.state;
-
-    if (this.changeImageForm) {
-      this.changeImageForm.fileInput.value = null;
-      this.changeImageForm.handleChange();
-    }
-
-    this.setState({
-      changeImage: false,
-      unsavedValue: savedValue,
-    });
-  };
-
-  cancelEdit = () => {
-    const { savedValue } = this.state;
-    this.clearError();
-    this.setState({
-      unsavedValue: savedValue,
-    });
-  };
-
-  showPageReloadToast = () => {
-    if (this.props.setting.requiresPageReload) {
-      this.props.toasts.add({
-        title: i18n.translate('advancedSettings.field.requiresPageReloadToastDescription', {
-          defaultMessage: 'Please reload the page for the "{settingName}" setting to take effect.',
-          values: {
-            settingName: this.props.setting.displayName || this.props.setting.name,
-          },
-        }),
-        text: element => {
-          const content = (
-            <>
-              <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
-                <EuiFlexItem grow={false}>
-                  <EuiButton size="s" onClick={() => window.location.reload()}>
-                    {i18n.translate('advancedSettings.field.requiresPageReloadToastButtonLabel', {
-                      defaultMessage: 'Reload page',
-                    })}
-                  </EuiButton>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </>
-          );
-          ReactDOM.render(content, element);
-          return () => ReactDOM.unmountComponentAtNode(element);
-        },
-        color: 'success',
-      });
-    }
-  };
-
-  saveEdit = async () => {
-    const { name, defVal, type } = this.props.setting;
-    const { changeImage, savedValue, unsavedValue, isJsonArray } = this.state;
-
-    if (savedValue === unsavedValue) {
-      return;
-    }
-
-    let valueToSave = unsavedValue;
-    let isSameValue = false;
-
-    switch (type) {
-      case 'array':
-        valueToSave = valueToSave.split(',').map((val: string) => val.trim());
-        isSameValue = valueToSave.join(',') === (defVal as string[]).join(',');
-        break;
-      case 'json':
-        valueToSave = valueToSave.trim();
-        valueToSave = valueToSave || (isJsonArray ? '[]' : '{}');
-      default:
-        isSameValue = valueToSave === defVal;
-    }
-
-    this.setLoading(true);
-    try {
-      if (isSameValue) {
-        await this.props.clear(name);
-      } else {
-        await this.props.save(name, valueToSave);
-      }
-
-      this.showPageReloadToast();
-
-      if (changeImage) {
-        this.cancelChangeImage();
-      }
-    } catch (e) {
-      this.props.toasts.addDanger(
-        i18n.translate('advancedSettings.field.saveFieldErrorMessage', {
-          defaultMessage: 'Unable to save {name}',
-          values: { name },
-        })
-      );
+    if (this.changeImageForm.current) {
+      this.changeImageForm.current.fileInput.value = null;
+      this.changeImageForm.current.handleChange({});
     }
-    this.setLoading(false);
-  };
-
-  resetField = async () => {
-    const { name } = this.props.setting;
-    this.setLoading(true);
-    try {
-      await this.props.clear(name);
-      this.showPageReloadToast();
-      this.cancelChangeImage();
-      this.clearError();
-    } catch (e) {
-      this.props.toasts.addDanger(
-        i18n.translate('advancedSettings.field.resetFieldErrorMessage', {
-          defaultMessage: 'Unable to reset {name}',
-          values: { name },
-        })
-      );
+    if (this.props.clearChange) {
+      this.props.clearChange(this.props.setting.name);
     }
-    this.setLoading(false);
   };
 
-  renderField(setting: FieldSetting) {
-    const { enableSaving } = this.props;
-    const { loading, changeImage, unsavedValue } = this.state;
-    const { name, value, type, options, optionLabels = {}, isOverridden, ariaName } = setting;
+  renderField(id: string, setting: FieldSetting) {
+    const { enableSaving, unsavedChanges, loading } = this.props;
+    const {
+      name,
+      value,
+      type,
+      options,
+      optionLabels = {},
+      isOverridden,
+      defVal,
+      ariaName,
+    } = setting;
+    const a11yProps: { [key: string]: string } = unsavedChanges
+      ? {
+          'aria-label': ariaName,
+          'aria-describedby': id,
+        }
+      : {
+          'aria-label': ariaName,
+        };
+    const currentValue = unsavedChanges
+      ? unsavedChanges.value
+      : getEditableValue(type, value, defVal);
 
     switch (type) {
       case 'boolean':
         return (
           <EuiSwitch
             label={
-              !!unsavedValue ? (
+              !!currentValue ? (
                 <FormattedMessage id="advancedSettings.field.onLabel" defaultMessage="On" />
               ) : (
                 <FormattedMessage id="advancedSettings.field.offLabel" defaultMessage="Off" />
               )
             }
-            checked={!!unsavedValue}
+            checked={!!currentValue}
             onChange={this.onFieldChangeSwitch}
             disabled={loading || isOverridden || !enableSaving}
-            onKeyDown={this.onFieldKeyDown}
             data-test-subj={`advancedSetting-editField-${name}`}
-            aria-label={ariaName}
+            {...a11yProps}
           />
         );
       case 'markdown':
@@ -458,10 +334,10 @@ export class Field extends PureComponent<FieldProps, FieldState> {
         return (
           <div data-test-subj={`advancedSetting-editField-${name}`}>
             <EuiCodeEditor
-              aria-label={ariaName}
+              {...a11yProps}
               mode={type}
               theme="textmate"
-              value={unsavedValue}
+              value={currentValue}
               onChange={this.onCodeEditorChange}
               width="100%"
               height="auto"
@@ -476,24 +352,22 @@ export class Field extends PureComponent<FieldProps, FieldState> {
                 $blockScrolling: Infinity,
               }}
               showGutter={false}
+              fullWidth
             />
           </div>
         );
       case 'image':
+        const changeImage = unsavedChanges?.changeImage;
         if (!isDefaultValue(setting) && !changeImage) {
-          return (
-            <EuiImage aria-label={ariaName} allowFullScreen url={value as string} alt={name} />
-          );
+          return <EuiImage {...a11yProps} allowFullScreen url={value as string} alt={name} />;
         } else {
           return (
             <EuiFilePicker
               disabled={loading || isOverridden || !enableSaving}
               onChange={this.onImageChange}
               accept=".jpg,.jpeg,.png"
-              ref={(input: HTMLInputElement) => {
-                this.changeImageForm = input;
-              }}
-              onKeyDown={this.onFieldEscape}
+              ref={this.changeImageForm}
+              fullWidth
               data-test-subj={`advancedSetting-editField-${name}`}
             />
           );
@@ -501,8 +375,8 @@ export class Field extends PureComponent<FieldProps, FieldState> {
       case 'select':
         return (
           <EuiSelect
-            aria-label={ariaName}
-            value={unsavedValue}
+            {...a11yProps}
+            value={currentValue}
             options={(options as string[]).map(option => {
               return {
                 text: optionLabels.hasOwnProperty(option) ? optionLabels[option] : option,
@@ -512,31 +386,31 @@ export class Field extends PureComponent<FieldProps, FieldState> {
             onChange={this.onFieldChangeEvent}
             isLoading={loading}
             disabled={loading || isOverridden || !enableSaving}
-            onKeyDown={this.onFieldKeyDown}
+            fullWidth
             data-test-subj={`advancedSetting-editField-${name}`}
           />
         );
       case 'number':
         return (
           <EuiFieldNumber
-            aria-label={ariaName}
-            value={unsavedValue}
+            {...a11yProps}
+            value={currentValue}
             onChange={this.onFieldChangeEvent}
             isLoading={loading}
             disabled={loading || isOverridden || !enableSaving}
-            onKeyDown={this.onFieldKeyDown}
+            fullWidth
             data-test-subj={`advancedSetting-editField-${name}`}
           />
         );
       default:
         return (
           <EuiFieldText
-            aria-label={ariaName}
-            value={unsavedValue}
+            {...a11yProps}
+            value={currentValue}
             onChange={this.onFieldChangeEvent}
             isLoading={loading}
             disabled={loading || isOverridden || !enableSaving}
-            onKeyDown={this.onFieldKeyDown}
+            fullWidth
             data-test-subj={`advancedSetting-editField-${name}`}
           />
         );
@@ -699,8 +573,12 @@ export class Field extends PureComponent<FieldProps, FieldState> {
   }
 
   renderResetToDefaultLink(setting: FieldSetting) {
-    const { ariaName, name } = setting;
-    if (isDefaultValue(setting)) {
+    const { defVal, ariaName, name } = setting;
+    if (
+      defVal === this.props.unsavedChanges?.value ||
+      isDefaultValue(setting) ||
+      this.props.loading
+    ) {
       return;
     }
     return (
@@ -726,7 +604,7 @@ export class Field extends PureComponent<FieldProps, FieldState> {
   }
 
   renderChangeImageLink(setting: FieldSetting) {
-    const { changeImage } = this.state;
+    const changeImage = this.props.unsavedChanges?.changeImage;
     const { type, value, ariaName, name } = setting;
     if (type !== 'image' || !value || changeImage) {
       return;
@@ -752,84 +630,49 @@ export class Field extends PureComponent<FieldProps, FieldState> {
     );
   }
 
-  renderActions(setting: FieldSetting) {
-    const { ariaName, name } = setting;
-    const { loading, isInvalid, changeImage, savedValue, unsavedValue } = this.state;
-    const isDisabled = loading || setting.isOverridden;
-
-    if (savedValue === unsavedValue && !changeImage) {
-      return;
-    }
-
-    return (
-      <EuiFormRow className="mgtAdvancedSettings__fieldActions" hasEmptyLabelSpace>
-        <EuiFlexGroup>
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              fill
-              aria-label={i18n.translate('advancedSettings.field.saveButtonAriaLabel', {
-                defaultMessage: 'Save {ariaName}',
-                values: {
-                  ariaName,
-                },
-              })}
-              onClick={this.saveEdit}
-              disabled={isDisabled || isInvalid}
-              data-test-subj={`advancedSetting-saveEditField-${name}`}
-            >
-              <FormattedMessage id="advancedSettings.field.saveButtonLabel" defaultMessage="Save" />
-            </EuiButton>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButtonEmpty
-              aria-label={i18n.translate('advancedSettings.field.cancelEditingButtonAriaLabel', {
-                defaultMessage: 'Cancel editing {ariaName}',
-                values: {
-                  ariaName,
-                },
-              })}
-              onClick={() => (changeImage ? this.cancelChangeImage() : this.cancelEdit())}
-              disabled={isDisabled}
-              data-test-subj={`advancedSetting-cancelEditField-${name}`}
-            >
-              <FormattedMessage
-                id="advancedSettings.field.cancelEditingButtonLabel"
-                defaultMessage="Cancel"
-              />
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiFormRow>
-    );
-  }
-
   render() {
-    const { setting } = this.props;
-    const { error, isInvalid } = this.state;
+    const { setting, unsavedChanges } = this.props;
+    const error = unsavedChanges?.error;
+    const isInvalid = unsavedChanges?.isInvalid;
+
+    const className = classNames('mgtAdvancedSettings__field', {
+      'mgtAdvancedSettings__field--unsaved': unsavedChanges,
+      'mgtAdvancedSettings__field--invalid': isInvalid,
+    });
+    const id = setting.name;
 
     return (
-      <EuiFlexGroup className="mgtAdvancedSettings__field">
-        <EuiFlexItem grow={false}>
-          <EuiDescribedFormGroup
-            className="mgtAdvancedSettings__fieldWrapper"
-            title={this.renderTitle(setting)}
-            description={this.renderDescription(setting)}
-          >
-            <EuiFormRow
-              isInvalid={isInvalid}
-              error={error}
-              label={this.renderLabel(setting)}
-              helpText={this.renderHelpText(setting)}
-              describedByIds={[`${setting.name}-aria`]}
-              className="mgtAdvancedSettings__fieldRow"
-              hasChildLabel={setting.type !== 'boolean'}
-            >
-              {this.renderField(setting)}
-            </EuiFormRow>
-          </EuiDescribedFormGroup>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>{this.renderActions(setting)}</EuiFlexItem>
-      </EuiFlexGroup>
+      <EuiDescribedFormGroup
+        className={className}
+        title={this.renderTitle(setting)}
+        description={this.renderDescription(setting)}
+        fullWidth
+      >
+        <EuiFormRow
+          isInvalid={isInvalid}
+          error={error}
+          label={this.renderLabel(setting)}
+          helpText={this.renderHelpText(setting)}
+          className="mgtAdvancedSettings__fieldRow"
+          hasChildLabel={setting.type !== 'boolean'}
+          fullWidth
+        >
+          <>
+            {this.renderField(id, setting)}
+            {unsavedChanges && (
+              <EuiScreenReaderOnly>
+                <p id={id}>
+                  {unsavedChanges.error
+                    ? unsavedChanges.error
+                    : i18n.translate('advancedSettings.field.settingIsUnsaved', {
+                        defaultMessage: 'Setting is currently not saved.',
+                      })}
+                </p>
+              </EuiScreenReaderOnly>
+            )}
+          </>
+        </EuiFormRow>
+      </EuiDescribedFormGroup>
     );
   }
 }
diff --git a/src/plugins/advanced_settings/public/management_app/components/field/index.ts b/src/plugins/advanced_settings/public/management_app/components/field/index.ts
index 5c86519116fe9..d1b9b34515532 100644
--- a/src/plugins/advanced_settings/public/management_app/components/field/index.ts
+++ b/src/plugins/advanced_settings/public/management_app/components/field/index.ts
@@ -17,4 +17,4 @@
  * under the License.
  */
 
-export { Field } from './field';
+export { Field, getEditableValue } from './field';
diff --git a/src/plugins/advanced_settings/public/management_app/components/form/__snapshots__/form.test.tsx.snap b/src/plugins/advanced_settings/public/management_app/components/form/__snapshots__/form.test.tsx.snap
index 8c471f5f5be9c..bce9cb67537db 100644
--- a/src/plugins/advanced_settings/public/management_app/components/form/__snapshots__/form.test.tsx.snap
+++ b/src/plugins/advanced_settings/public/management_app/components/form/__snapshots__/form.test.tsx.snap
@@ -1,449 +1,849 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Form should not render no settings message when instructed not to 1`] = `<Fragment />`;
+exports[`Form should not render no settings message when instructed not to 1`] = `
+<Fragment>
+  <div>
+    <EuiPanel
+      paddingSize="l"
+    >
+      <EuiForm>
+        <EuiText>
+          <EuiFlexGroup
+            alignItems="baseline"
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <h2>
+                General
+              </h2>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiText>
+        <EuiSpacer
+          size="m"
+        />
+        <Field
+          clearChange={[Function]}
+          dockLinks={Object {}}
+          enableSaving={true}
+          handleChange={[Function]}
+          key="general:test:date"
+          setting={
+            Object {
+              "ariaName": "general test date",
+              "category": Array [
+                "general",
+              ],
+              "defVal": "defVal",
+              "description": "bar",
+              "displayName": "Test date",
+              "isCustom": false,
+              "isOverridden": false,
+              "name": "general:test:date",
+              "readOnly": false,
+              "requiresPageReload": false,
+              "type": "string",
+              "value": "value",
+            }
+          }
+          toasts={Object {}}
+        />
+        <Field
+          clearChange={[Function]}
+          dockLinks={Object {}}
+          enableSaving={true}
+          handleChange={[Function]}
+          key="setting:test"
+          setting={
+            Object {
+              "ariaName": "setting test",
+              "category": Array [
+                "general",
+              ],
+              "defVal": "defVal",
+              "description": "foo",
+              "displayName": "Test setting",
+              "isCustom": false,
+              "isOverridden": false,
+              "name": "setting:test",
+              "readOnly": false,
+              "requiresPageReload": false,
+              "type": "string",
+              "value": "value",
+            }
+          }
+          toasts={Object {}}
+        />
+      </EuiForm>
+    </EuiPanel>
+    <EuiSpacer
+      size="l"
+    />
+    <EuiPanel
+      paddingSize="l"
+    >
+      <EuiForm>
+        <EuiText>
+          <EuiFlexGroup
+            alignItems="baseline"
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <h2>
+                Dashboard
+              </h2>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiText>
+        <EuiSpacer
+          size="m"
+        />
+        <Field
+          clearChange={[Function]}
+          dockLinks={Object {}}
+          enableSaving={true}
+          handleChange={[Function]}
+          key="dashboard:test:setting"
+          setting={
+            Object {
+              "ariaName": "dashboard test setting",
+              "category": Array [
+                "dashboard",
+              ],
+              "defVal": "defVal",
+              "description": "description",
+              "displayName": "Dashboard test setting",
+              "isCustom": false,
+              "isOverridden": false,
+              "name": "dashboard:test:setting",
+              "readOnly": false,
+              "requiresPageReload": true,
+              "type": "string",
+              "value": "value",
+            }
+          }
+          toasts={Object {}}
+        />
+      </EuiForm>
+    </EuiPanel>
+    <EuiSpacer
+      size="l"
+    />
+    <EuiPanel
+      paddingSize="l"
+    >
+      <EuiForm>
+        <EuiText>
+          <EuiFlexGroup
+            alignItems="baseline"
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <h2>
+                X-pack
+              </h2>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
+            >
+              <em>
+                <FormattedMessage
+                  defaultMessage="Search terms are hiding {settingsCount} settings {clearSearch}"
+                  id="advancedSettings.form.searchResultText"
+                  values={
+                    Object {
+                      "clearSearch": <ForwardRef
+                        onClick={[Function]}
+                      >
+                        <em>
+                          <FormattedMessage
+                            defaultMessage="(clear search)"
+                            id="advancedSettings.form.clearSearchResultText"
+                            values={Object {}}
+                          />
+                        </em>
+                      </ForwardRef>,
+                      "settingsCount": 9,
+                    }
+                  }
+                />
+              </em>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiText>
+        <EuiSpacer
+          size="m"
+        />
+        <Field
+          clearChange={[Function]}
+          dockLinks={Object {}}
+          enableSaving={true}
+          handleChange={[Function]}
+          key="xpack:test:setting"
+          setting={
+            Object {
+              "ariaName": "xpack test setting",
+              "category": Array [
+                "x-pack",
+              ],
+              "defVal": "defVal",
+              "description": "bar",
+              "displayName": "X-Pack test setting",
+              "isCustom": false,
+              "isOverridden": false,
+              "name": "xpack:test:setting",
+              "readOnly": false,
+              "requiresPageReload": false,
+              "type": "string",
+              "value": "value",
+            }
+          }
+          toasts={Object {}}
+        />
+      </EuiForm>
+    </EuiPanel>
+    <EuiSpacer
+      size="l"
+    />
+  </div>
+</Fragment>
+`;
 
 exports[`Form should render no settings message when there are no settings 1`] = `
 <Fragment>
-  <EuiPanel
-    paddingSize="l"
-  >
-    <FormattedMessage
-      defaultMessage="No settings found {clearSearch}"
-      id="advancedSettings.form.noSearchResultText"
-      values={
-        Object {
-          "clearSearch": <ForwardRef
-            onClick={[Function]}
+  <div>
+    <EuiPanel
+      paddingSize="l"
+    >
+      <EuiForm>
+        <EuiText>
+          <EuiFlexGroup
+            alignItems="baseline"
           >
-            <FormattedMessage
-              defaultMessage="(clear search)"
-              id="advancedSettings.form.clearNoSearchResultText"
-              values={Object {}}
-            />
-          </ForwardRef>,
-        }
-      }
+            <EuiFlexItem
+              grow={false}
+            >
+              <h2>
+                General
+              </h2>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiText>
+        <EuiSpacer
+          size="m"
+        />
+        <Field
+          clearChange={[Function]}
+          dockLinks={Object {}}
+          enableSaving={true}
+          handleChange={[Function]}
+          key="general:test:date"
+          setting={
+            Object {
+              "ariaName": "general test date",
+              "category": Array [
+                "general",
+              ],
+              "defVal": "defVal",
+              "description": "bar",
+              "displayName": "Test date",
+              "isCustom": false,
+              "isOverridden": false,
+              "name": "general:test:date",
+              "readOnly": false,
+              "requiresPageReload": false,
+              "type": "string",
+              "value": "value",
+            }
+          }
+          toasts={Object {}}
+        />
+        <Field
+          clearChange={[Function]}
+          dockLinks={Object {}}
+          enableSaving={true}
+          handleChange={[Function]}
+          key="setting:test"
+          setting={
+            Object {
+              "ariaName": "setting test",
+              "category": Array [
+                "general",
+              ],
+              "defVal": "defVal",
+              "description": "foo",
+              "displayName": "Test setting",
+              "isCustom": false,
+              "isOverridden": false,
+              "name": "setting:test",
+              "readOnly": false,
+              "requiresPageReload": false,
+              "type": "string",
+              "value": "value",
+            }
+          }
+          toasts={Object {}}
+        />
+      </EuiForm>
+    </EuiPanel>
+    <EuiSpacer
+      size="l"
     />
-  </EuiPanel>
+    <EuiPanel
+      paddingSize="l"
+    >
+      <EuiForm>
+        <EuiText>
+          <EuiFlexGroup
+            alignItems="baseline"
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <h2>
+                Dashboard
+              </h2>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiText>
+        <EuiSpacer
+          size="m"
+        />
+        <Field
+          clearChange={[Function]}
+          dockLinks={Object {}}
+          enableSaving={true}
+          handleChange={[Function]}
+          key="dashboard:test:setting"
+          setting={
+            Object {
+              "ariaName": "dashboard test setting",
+              "category": Array [
+                "dashboard",
+              ],
+              "defVal": "defVal",
+              "description": "description",
+              "displayName": "Dashboard test setting",
+              "isCustom": false,
+              "isOverridden": false,
+              "name": "dashboard:test:setting",
+              "readOnly": false,
+              "requiresPageReload": true,
+              "type": "string",
+              "value": "value",
+            }
+          }
+          toasts={Object {}}
+        />
+      </EuiForm>
+    </EuiPanel>
+    <EuiSpacer
+      size="l"
+    />
+    <EuiPanel
+      paddingSize="l"
+    >
+      <EuiForm>
+        <EuiText>
+          <EuiFlexGroup
+            alignItems="baseline"
+          >
+            <EuiFlexItem
+              grow={false}
+            >
+              <h2>
+                X-pack
+              </h2>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
+            >
+              <em>
+                <FormattedMessage
+                  defaultMessage="Search terms are hiding {settingsCount} settings {clearSearch}"
+                  id="advancedSettings.form.searchResultText"
+                  values={
+                    Object {
+                      "clearSearch": <ForwardRef
+                        onClick={[Function]}
+                      >
+                        <em>
+                          <FormattedMessage
+                            defaultMessage="(clear search)"
+                            id="advancedSettings.form.clearSearchResultText"
+                            values={Object {}}
+                          />
+                        </em>
+                      </ForwardRef>,
+                      "settingsCount": 9,
+                    }
+                  }
+                />
+              </em>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiText>
+        <EuiSpacer
+          size="m"
+        />
+        <Field
+          clearChange={[Function]}
+          dockLinks={Object {}}
+          enableSaving={true}
+          handleChange={[Function]}
+          key="xpack:test:setting"
+          setting={
+            Object {
+              "ariaName": "xpack test setting",
+              "category": Array [
+                "x-pack",
+              ],
+              "defVal": "defVal",
+              "description": "bar",
+              "displayName": "X-Pack test setting",
+              "isCustom": false,
+              "isOverridden": false,
+              "name": "xpack:test:setting",
+              "readOnly": false,
+              "requiresPageReload": false,
+              "type": "string",
+              "value": "value",
+            }
+          }
+          toasts={Object {}}
+        />
+      </EuiForm>
+    </EuiPanel>
+    <EuiSpacer
+      size="l"
+    />
+  </div>
 </Fragment>
 `;
 
 exports[`Form should render normally 1`] = `
 <Fragment>
-  <EuiPanel
-    paddingSize="l"
-  >
-    <EuiForm>
-      <EuiText>
-        <EuiFlexGroup
-          alignItems="baseline"
-        >
-          <EuiFlexItem
-            grow={false}
+  <div>
+    <EuiPanel
+      paddingSize="l"
+    >
+      <EuiForm>
+        <EuiText>
+          <EuiFlexGroup
+            alignItems="baseline"
           >
-            <h2>
-              General
-            </h2>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiText>
-      <EuiSpacer
-        size="m"
-      />
-      <Field
-        clear={[Function]}
-        dockLinks={Object {}}
-        enableSaving={true}
-        key="general:test:date"
-        save={[Function]}
-        setting={
-          Object {
-            "ariaName": "general test date",
-            "category": Array [
-              "general",
-            ],
-            "defVal": "defVal",
-            "description": "description",
-            "displayName": "Test date",
-            "isCustom": false,
-            "isOverridden": false,
-            "name": "general:test:date",
-            "readOnly": false,
-            "requiresPageReload": false,
-            "type": "string",
-            "value": "value",
+            <EuiFlexItem
+              grow={false}
+            >
+              <h2>
+                General
+              </h2>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiText>
+        <EuiSpacer
+          size="m"
+        />
+        <Field
+          clearChange={[Function]}
+          dockLinks={Object {}}
+          enableSaving={true}
+          handleChange={[Function]}
+          key="general:test:date"
+          setting={
+            Object {
+              "ariaName": "general test date",
+              "category": Array [
+                "general",
+              ],
+              "defVal": "defVal",
+              "description": "bar",
+              "displayName": "Test date",
+              "isCustom": false,
+              "isOverridden": false,
+              "name": "general:test:date",
+              "readOnly": false,
+              "requiresPageReload": false,
+              "type": "string",
+              "value": "value",
+            }
           }
-        }
-        toasts={Object {}}
-      />
-      <Field
-        clear={[Function]}
-        dockLinks={Object {}}
-        enableSaving={true}
-        key="setting:test"
-        save={[Function]}
-        setting={
-          Object {
-            "ariaName": "setting test",
-            "category": Array [
-              "general",
-            ],
-            "defVal": "defVal",
-            "description": "description",
-            "displayName": "Test setting",
-            "isCustom": false,
-            "isOverridden": false,
-            "name": "setting:test",
-            "readOnly": false,
-            "requiresPageReload": false,
-            "type": "string",
-            "value": "value",
+          toasts={Object {}}
+        />
+        <Field
+          clearChange={[Function]}
+          dockLinks={Object {}}
+          enableSaving={true}
+          handleChange={[Function]}
+          key="setting:test"
+          setting={
+            Object {
+              "ariaName": "setting test",
+              "category": Array [
+                "general",
+              ],
+              "defVal": "defVal",
+              "description": "foo",
+              "displayName": "Test setting",
+              "isCustom": false,
+              "isOverridden": false,
+              "name": "setting:test",
+              "readOnly": false,
+              "requiresPageReload": false,
+              "type": "string",
+              "value": "value",
+            }
           }
-        }
-        toasts={Object {}}
-      />
-    </EuiForm>
-  </EuiPanel>
-  <EuiSpacer
-    size="l"
-  />
-  <EuiPanel
-    paddingSize="l"
-  >
-    <EuiForm>
-      <EuiText>
-        <EuiFlexGroup
-          alignItems="baseline"
-        >
-          <EuiFlexItem
-            grow={false}
+          toasts={Object {}}
+        />
+      </EuiForm>
+    </EuiPanel>
+    <EuiSpacer
+      size="l"
+    />
+    <EuiPanel
+      paddingSize="l"
+    >
+      <EuiForm>
+        <EuiText>
+          <EuiFlexGroup
+            alignItems="baseline"
           >
-            <h2>
-              Dashboard
-            </h2>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiText>
-      <EuiSpacer
-        size="m"
-      />
-      <Field
-        clear={[Function]}
-        dockLinks={Object {}}
-        enableSaving={true}
-        key="dashboard:test:setting"
-        save={[Function]}
-        setting={
-          Object {
-            "ariaName": "dashboard test setting",
-            "category": Array [
-              "dashboard",
-            ],
-            "defVal": "defVal",
-            "description": "description",
-            "displayName": "Dashboard test setting",
-            "isCustom": false,
-            "isOverridden": false,
-            "name": "dashboard:test:setting",
-            "readOnly": false,
-            "requiresPageReload": false,
-            "type": "string",
-            "value": "value",
+            <EuiFlexItem
+              grow={false}
+            >
+              <h2>
+                Dashboard
+              </h2>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiText>
+        <EuiSpacer
+          size="m"
+        />
+        <Field
+          clearChange={[Function]}
+          dockLinks={Object {}}
+          enableSaving={true}
+          handleChange={[Function]}
+          key="dashboard:test:setting"
+          setting={
+            Object {
+              "ariaName": "dashboard test setting",
+              "category": Array [
+                "dashboard",
+              ],
+              "defVal": "defVal",
+              "description": "description",
+              "displayName": "Dashboard test setting",
+              "isCustom": false,
+              "isOverridden": false,
+              "name": "dashboard:test:setting",
+              "readOnly": false,
+              "requiresPageReload": true,
+              "type": "string",
+              "value": "value",
+            }
           }
-        }
-        toasts={Object {}}
-      />
-    </EuiForm>
-  </EuiPanel>
-  <EuiSpacer
-    size="l"
-  />
-  <EuiPanel
-    paddingSize="l"
-  >
-    <EuiForm>
-      <EuiText>
-        <EuiFlexGroup
-          alignItems="baseline"
-        >
-          <EuiFlexItem
-            grow={false}
-          >
-            <h2>
-              X-pack
-            </h2>
-          </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
+          toasts={Object {}}
+        />
+      </EuiForm>
+    </EuiPanel>
+    <EuiSpacer
+      size="l"
+    />
+    <EuiPanel
+      paddingSize="l"
+    >
+      <EuiForm>
+        <EuiText>
+          <EuiFlexGroup
+            alignItems="baseline"
           >
-            <em>
-              <FormattedMessage
-                defaultMessage="Search terms are hiding {settingsCount} settings {clearSearch}"
-                id="advancedSettings.form.searchResultText"
-                values={
-                  Object {
-                    "clearSearch": <ForwardRef
-                      onClick={[Function]}
-                    >
-                      <em>
-                        <FormattedMessage
-                          defaultMessage="(clear search)"
-                          id="advancedSettings.form.clearSearchResultText"
-                          values={Object {}}
-                        />
-                      </em>
-                    </ForwardRef>,
-                    "settingsCount": 9,
+            <EuiFlexItem
+              grow={false}
+            >
+              <h2>
+                X-pack
+              </h2>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
+            >
+              <em>
+                <FormattedMessage
+                  defaultMessage="Search terms are hiding {settingsCount} settings {clearSearch}"
+                  id="advancedSettings.form.searchResultText"
+                  values={
+                    Object {
+                      "clearSearch": <ForwardRef
+                        onClick={[Function]}
+                      >
+                        <em>
+                          <FormattedMessage
+                            defaultMessage="(clear search)"
+                            id="advancedSettings.form.clearSearchResultText"
+                            values={Object {}}
+                          />
+                        </em>
+                      </ForwardRef>,
+                      "settingsCount": 9,
+                    }
                   }
-                }
-              />
-            </em>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiText>
-      <EuiSpacer
-        size="m"
-      />
-      <Field
-        clear={[Function]}
-        dockLinks={Object {}}
-        enableSaving={true}
-        key="xpack:test:setting"
-        save={[Function]}
-        setting={
-          Object {
-            "ariaName": "xpack test setting",
-            "category": Array [
-              "x-pack",
-            ],
-            "defVal": "defVal",
-            "description": "description",
-            "displayName": "X-Pack test setting",
-            "isCustom": false,
-            "isOverridden": false,
-            "name": "xpack:test:setting",
-            "readOnly": false,
-            "requiresPageReload": false,
-            "type": "string",
-            "value": "value",
+                />
+              </em>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiText>
+        <EuiSpacer
+          size="m"
+        />
+        <Field
+          clearChange={[Function]}
+          dockLinks={Object {}}
+          enableSaving={true}
+          handleChange={[Function]}
+          key="xpack:test:setting"
+          setting={
+            Object {
+              "ariaName": "xpack test setting",
+              "category": Array [
+                "x-pack",
+              ],
+              "defVal": "defVal",
+              "description": "bar",
+              "displayName": "X-Pack test setting",
+              "isCustom": false,
+              "isOverridden": false,
+              "name": "xpack:test:setting",
+              "readOnly": false,
+              "requiresPageReload": false,
+              "type": "string",
+              "value": "value",
+            }
           }
-        }
-        toasts={Object {}}
-      />
-    </EuiForm>
-  </EuiPanel>
-  <EuiSpacer
-    size="l"
-  />
+          toasts={Object {}}
+        />
+      </EuiForm>
+    </EuiPanel>
+    <EuiSpacer
+      size="l"
+    />
+  </div>
 </Fragment>
 `;
 
 exports[`Form should render read-only when saving is disabled 1`] = `
 <Fragment>
-  <EuiPanel
-    paddingSize="l"
-  >
-    <EuiForm>
-      <EuiText>
-        <EuiFlexGroup
-          alignItems="baseline"
-        >
-          <EuiFlexItem
-            grow={false}
+  <div>
+    <EuiPanel
+      paddingSize="l"
+    >
+      <EuiForm>
+        <EuiText>
+          <EuiFlexGroup
+            alignItems="baseline"
           >
-            <h2>
-              General
-            </h2>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiText>
-      <EuiSpacer
-        size="m"
-      />
-      <Field
-        clear={[Function]}
-        dockLinks={Object {}}
-        enableSaving={false}
-        key="general:test:date"
-        save={[Function]}
-        setting={
-          Object {
-            "ariaName": "general test date",
-            "category": Array [
-              "general",
-            ],
-            "defVal": "defVal",
-            "description": "description",
-            "displayName": "Test date",
-            "isCustom": false,
-            "isOverridden": false,
-            "name": "general:test:date",
-            "readOnly": false,
-            "requiresPageReload": false,
-            "type": "string",
-            "value": "value",
+            <EuiFlexItem
+              grow={false}
+            >
+              <h2>
+                General
+              </h2>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiText>
+        <EuiSpacer
+          size="m"
+        />
+        <Field
+          clearChange={[Function]}
+          dockLinks={Object {}}
+          enableSaving={false}
+          handleChange={[Function]}
+          key="general:test:date"
+          setting={
+            Object {
+              "ariaName": "general test date",
+              "category": Array [
+                "general",
+              ],
+              "defVal": "defVal",
+              "description": "bar",
+              "displayName": "Test date",
+              "isCustom": false,
+              "isOverridden": false,
+              "name": "general:test:date",
+              "readOnly": false,
+              "requiresPageReload": false,
+              "type": "string",
+              "value": "value",
+            }
           }
-        }
-        toasts={Object {}}
-      />
-      <Field
-        clear={[Function]}
-        dockLinks={Object {}}
-        enableSaving={false}
-        key="setting:test"
-        save={[Function]}
-        setting={
-          Object {
-            "ariaName": "setting test",
-            "category": Array [
-              "general",
-            ],
-            "defVal": "defVal",
-            "description": "description",
-            "displayName": "Test setting",
-            "isCustom": false,
-            "isOverridden": false,
-            "name": "setting:test",
-            "readOnly": false,
-            "requiresPageReload": false,
-            "type": "string",
-            "value": "value",
+          toasts={Object {}}
+        />
+        <Field
+          clearChange={[Function]}
+          dockLinks={Object {}}
+          enableSaving={false}
+          handleChange={[Function]}
+          key="setting:test"
+          setting={
+            Object {
+              "ariaName": "setting test",
+              "category": Array [
+                "general",
+              ],
+              "defVal": "defVal",
+              "description": "foo",
+              "displayName": "Test setting",
+              "isCustom": false,
+              "isOverridden": false,
+              "name": "setting:test",
+              "readOnly": false,
+              "requiresPageReload": false,
+              "type": "string",
+              "value": "value",
+            }
           }
-        }
-        toasts={Object {}}
-      />
-    </EuiForm>
-  </EuiPanel>
-  <EuiSpacer
-    size="l"
-  />
-  <EuiPanel
-    paddingSize="l"
-  >
-    <EuiForm>
-      <EuiText>
-        <EuiFlexGroup
-          alignItems="baseline"
-        >
-          <EuiFlexItem
-            grow={false}
+          toasts={Object {}}
+        />
+      </EuiForm>
+    </EuiPanel>
+    <EuiSpacer
+      size="l"
+    />
+    <EuiPanel
+      paddingSize="l"
+    >
+      <EuiForm>
+        <EuiText>
+          <EuiFlexGroup
+            alignItems="baseline"
           >
-            <h2>
-              Dashboard
-            </h2>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiText>
-      <EuiSpacer
-        size="m"
-      />
-      <Field
-        clear={[Function]}
-        dockLinks={Object {}}
-        enableSaving={false}
-        key="dashboard:test:setting"
-        save={[Function]}
-        setting={
-          Object {
-            "ariaName": "dashboard test setting",
-            "category": Array [
-              "dashboard",
-            ],
-            "defVal": "defVal",
-            "description": "description",
-            "displayName": "Dashboard test setting",
-            "isCustom": false,
-            "isOverridden": false,
-            "name": "dashboard:test:setting",
-            "readOnly": false,
-            "requiresPageReload": false,
-            "type": "string",
-            "value": "value",
+            <EuiFlexItem
+              grow={false}
+            >
+              <h2>
+                Dashboard
+              </h2>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiText>
+        <EuiSpacer
+          size="m"
+        />
+        <Field
+          clearChange={[Function]}
+          dockLinks={Object {}}
+          enableSaving={false}
+          handleChange={[Function]}
+          key="dashboard:test:setting"
+          setting={
+            Object {
+              "ariaName": "dashboard test setting",
+              "category": Array [
+                "dashboard",
+              ],
+              "defVal": "defVal",
+              "description": "description",
+              "displayName": "Dashboard test setting",
+              "isCustom": false,
+              "isOverridden": false,
+              "name": "dashboard:test:setting",
+              "readOnly": false,
+              "requiresPageReload": true,
+              "type": "string",
+              "value": "value",
+            }
           }
-        }
-        toasts={Object {}}
-      />
-    </EuiForm>
-  </EuiPanel>
-  <EuiSpacer
-    size="l"
-  />
-  <EuiPanel
-    paddingSize="l"
-  >
-    <EuiForm>
-      <EuiText>
-        <EuiFlexGroup
-          alignItems="baseline"
-        >
-          <EuiFlexItem
-            grow={false}
-          >
-            <h2>
-              X-pack
-            </h2>
-          </EuiFlexItem>
-          <EuiFlexItem
-            grow={false}
+          toasts={Object {}}
+        />
+      </EuiForm>
+    </EuiPanel>
+    <EuiSpacer
+      size="l"
+    />
+    <EuiPanel
+      paddingSize="l"
+    >
+      <EuiForm>
+        <EuiText>
+          <EuiFlexGroup
+            alignItems="baseline"
           >
-            <em>
-              <FormattedMessage
-                defaultMessage="Search terms are hiding {settingsCount} settings {clearSearch}"
-                id="advancedSettings.form.searchResultText"
-                values={
-                  Object {
-                    "clearSearch": <ForwardRef
-                      onClick={[Function]}
-                    >
-                      <em>
-                        <FormattedMessage
-                          defaultMessage="(clear search)"
-                          id="advancedSettings.form.clearSearchResultText"
-                          values={Object {}}
-                        />
-                      </em>
-                    </ForwardRef>,
-                    "settingsCount": 9,
+            <EuiFlexItem
+              grow={false}
+            >
+              <h2>
+                X-pack
+              </h2>
+            </EuiFlexItem>
+            <EuiFlexItem
+              grow={false}
+            >
+              <em>
+                <FormattedMessage
+                  defaultMessage="Search terms are hiding {settingsCount} settings {clearSearch}"
+                  id="advancedSettings.form.searchResultText"
+                  values={
+                    Object {
+                      "clearSearch": <ForwardRef
+                        onClick={[Function]}
+                      >
+                        <em>
+                          <FormattedMessage
+                            defaultMessage="(clear search)"
+                            id="advancedSettings.form.clearSearchResultText"
+                            values={Object {}}
+                          />
+                        </em>
+                      </ForwardRef>,
+                      "settingsCount": 9,
+                    }
                   }
-                }
-              />
-            </em>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiText>
-      <EuiSpacer
-        size="m"
-      />
-      <Field
-        clear={[Function]}
-        dockLinks={Object {}}
-        enableSaving={false}
-        key="xpack:test:setting"
-        save={[Function]}
-        setting={
-          Object {
-            "ariaName": "xpack test setting",
-            "category": Array [
-              "x-pack",
-            ],
-            "defVal": "defVal",
-            "description": "description",
-            "displayName": "X-Pack test setting",
-            "isCustom": false,
-            "isOverridden": false,
-            "name": "xpack:test:setting",
-            "readOnly": false,
-            "requiresPageReload": false,
-            "type": "string",
-            "value": "value",
+                />
+              </em>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </EuiText>
+        <EuiSpacer
+          size="m"
+        />
+        <Field
+          clearChange={[Function]}
+          dockLinks={Object {}}
+          enableSaving={false}
+          handleChange={[Function]}
+          key="xpack:test:setting"
+          setting={
+            Object {
+              "ariaName": "xpack test setting",
+              "category": Array [
+                "x-pack",
+              ],
+              "defVal": "defVal",
+              "description": "bar",
+              "displayName": "X-Pack test setting",
+              "isCustom": false,
+              "isOverridden": false,
+              "name": "xpack:test:setting",
+              "readOnly": false,
+              "requiresPageReload": false,
+              "type": "string",
+              "value": "value",
+            }
           }
-        }
-        toasts={Object {}}
-      />
-    </EuiForm>
-  </EuiPanel>
-  <EuiSpacer
-    size="l"
-  />
+          toasts={Object {}}
+        />
+      </EuiForm>
+    </EuiPanel>
+    <EuiSpacer
+      size="l"
+    />
+  </div>
 </Fragment>
 `;
diff --git a/src/plugins/advanced_settings/public/management_app/components/form/_form.scss b/src/plugins/advanced_settings/public/management_app/components/form/_form.scss
new file mode 100644
index 0000000000000..02ebb90221d90
--- /dev/null
+++ b/src/plugins/advanced_settings/public/management_app/components/form/_form.scss
@@ -0,0 +1,13 @@
+@import '@elastic/eui/src/components/header/variables';
+@import '@elastic/eui/src/components/nav_drawer/variables';
+
+.mgtAdvancedSettingsForm__bottomBar {
+  margin-left: $euiNavDrawerWidthCollapsed;
+  z-index: 9; // Puts it inuder the nav drawer when expanded
+  &--pushForNav {
+    margin-left: $euiNavDrawerWidthExpanded;
+  }
+  @include euiBreakpoint('xs', 's') {
+    margin-left: 0;
+  }
+}
diff --git a/src/plugins/advanced_settings/public/management_app/components/form/_index.scss b/src/plugins/advanced_settings/public/management_app/components/form/_index.scss
new file mode 100644
index 0000000000000..2ef4ef1d20ce9
--- /dev/null
+++ b/src/plugins/advanced_settings/public/management_app/components/form/_index.scss
@@ -0,0 +1 @@
+@import './form';
diff --git a/src/plugins/advanced_settings/public/management_app/components/form/form.test.tsx b/src/plugins/advanced_settings/public/management_app/components/form/form.test.tsx
index 468cfbfc70820..0e942665b23a9 100644
--- a/src/plugins/advanced_settings/public/management_app/components/form/form.test.tsx
+++ b/src/plugins/advanced_settings/public/management_app/components/form/form.test.tsx
@@ -18,9 +18,14 @@
  */
 
 import React from 'react';
-import { shallowWithI18nProvider } from 'test_utils/enzyme_helpers';
+import { shallowWithI18nProvider, mountWithI18nProvider } from 'test_utils/enzyme_helpers';
 import { UiSettingsType } from '../../../../../../core/public';
 
+// @ts-ignore
+import { findTestSubject } from '@elastic/eui/lib/test';
+
+import { notificationServiceMock } from '../../../../../../core/public/mocks';
+import { SettingsChanges } from '../../types';
 import { Form } from './form';
 
 jest.mock('../field', () => ({
@@ -29,6 +34,25 @@ jest.mock('../field', () => ({
   },
 }));
 
+beforeAll(() => {
+  const localStorage: Record<string, any> = {
+    'core.chrome.isLocked': true,
+  };
+
+  Object.defineProperty(window, 'localStorage', {
+    value: {
+      getItem: (key: string) => {
+        return localStorage[key] || null;
+      },
+    },
+    writable: true,
+  });
+});
+
+afterAll(() => {
+  delete (window as any).localStorage;
+});
+
 const defaults = {
   requiresPageReload: false,
   readOnly: false,
@@ -43,50 +67,52 @@ const defaults = {
 const settings = {
   dashboard: [
     {
+      ...defaults,
       name: 'dashboard:test:setting',
       ariaName: 'dashboard test setting',
       displayName: 'Dashboard test setting',
       category: ['dashboard'],
-      ...defaults,
+      requiresPageReload: true,
     },
   ],
   general: [
     {
+      ...defaults,
       name: 'general:test:date',
       ariaName: 'general test date',
       displayName: 'Test date',
       description: 'bar',
       category: ['general'],
-      ...defaults,
     },
     {
+      ...defaults,
       name: 'setting:test',
       ariaName: 'setting test',
       displayName: 'Test setting',
       description: 'foo',
       category: ['general'],
-      ...defaults,
     },
   ],
   'x-pack': [
     {
+      ...defaults,
       name: 'xpack:test:setting',
       ariaName: 'xpack test setting',
       displayName: 'X-Pack test setting',
       category: ['x-pack'],
       description: 'bar',
-      ...defaults,
     },
   ],
 };
+
 const categories = ['general', 'dashboard', 'hiddenCategory', 'x-pack'];
 const categoryCounts = {
   general: 2,
   dashboard: 1,
   'x-pack': 10,
 };
-const save = (key: string, value: any) => Promise.resolve(true);
-const clear = (key: string) => Promise.resolve(true);
+const save = jest.fn((changes: SettingsChanges) => Promise.resolve([true]));
+
 const clearQuery = () => {};
 
 describe('Form', () => {
@@ -94,10 +120,10 @@ describe('Form', () => {
     const component = shallowWithI18nProvider(
       <Form
         settings={settings}
+        visibleSettings={settings}
         categories={categories}
         categoryCounts={categoryCounts}
         save={save}
-        clear={clear}
         clearQuery={clearQuery}
         showNoResultsMessage={true}
         enableSaving={true}
@@ -113,10 +139,10 @@ describe('Form', () => {
     const component = shallowWithI18nProvider(
       <Form
         settings={settings}
+        visibleSettings={settings}
         categories={categories}
         categoryCounts={categoryCounts}
         save={save}
-        clear={clear}
         clearQuery={clearQuery}
         showNoResultsMessage={true}
         enableSaving={false}
@@ -132,10 +158,10 @@ describe('Form', () => {
     const component = shallowWithI18nProvider(
       <Form
         settings={{}}
+        visibleSettings={settings}
         categories={categories}
         categoryCounts={categoryCounts}
         save={save}
-        clear={clear}
         clearQuery={clearQuery}
         showNoResultsMessage={true}
         enableSaving={true}
@@ -151,10 +177,10 @@ describe('Form', () => {
     const component = shallowWithI18nProvider(
       <Form
         settings={{}}
+        visibleSettings={settings}
         categories={categories}
         categoryCounts={categoryCounts}
         save={save}
-        clear={clear}
         clearQuery={clearQuery}
         showNoResultsMessage={false}
         enableSaving={true}
@@ -165,4 +191,70 @@ describe('Form', () => {
 
     expect(component).toMatchSnapshot();
   });
+
+  it('should hide bottom bar when clicking on the cancel changes button', async () => {
+    const wrapper = mountWithI18nProvider(
+      <Form
+        settings={settings}
+        visibleSettings={settings}
+        categories={categories}
+        categoryCounts={categoryCounts}
+        save={save}
+        clearQuery={clearQuery}
+        showNoResultsMessage={true}
+        enableSaving={false}
+        toasts={{} as any}
+        dockLinks={{} as any}
+      />
+    );
+    (wrapper.instance() as Form).setState({
+      unsavedChanges: {
+        'dashboard:test:setting': {
+          value: 'changedValue',
+        },
+      },
+    });
+    const updated = wrapper.update();
+    expect(updated.exists('[data-test-subj="advancedSetting-bottomBar"]')).toEqual(true);
+    await findTestSubject(updated, `advancedSetting-cancelButton`).simulate('click');
+    updated.update();
+    expect(updated.exists('[data-test-subj="advancedSetting-bottomBar"]')).toEqual(false);
+  });
+
+  it('should show a reload toast when saving setting requiring a page reload', async () => {
+    const toasts = notificationServiceMock.createStartContract().toasts;
+    const wrapper = mountWithI18nProvider(
+      <Form
+        settings={settings}
+        visibleSettings={settings}
+        categories={categories}
+        categoryCounts={categoryCounts}
+        save={save}
+        clearQuery={clearQuery}
+        showNoResultsMessage={true}
+        enableSaving={false}
+        toasts={toasts}
+        dockLinks={{} as any}
+      />
+    );
+    (wrapper.instance() as Form).setState({
+      unsavedChanges: {
+        'dashboard:test:setting': {
+          value: 'changedValue',
+        },
+      },
+    });
+    const updated = wrapper.update();
+
+    findTestSubject(updated, `advancedSetting-saveButton`).simulate('click');
+    expect(save).toHaveBeenCalled();
+    await save({ 'dashboard:test:setting': 'changedValue' });
+    expect(toasts.add).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: expect.stringContaining(
+          'One or more settings require you to reload the page to take effect.'
+        ),
+      })
+    );
+  });
 });
diff --git a/src/plugins/advanced_settings/public/management_app/components/form/form.tsx b/src/plugins/advanced_settings/public/management_app/components/form/form.tsx
index 91d587866836e..ef433dd990d33 100644
--- a/src/plugins/advanced_settings/public/management_app/components/form/form.tsx
+++ b/src/plugins/advanced_settings/public/management_app/components/form/form.tsx
@@ -18,7 +18,7 @@
  */
 
 import React, { PureComponent, Fragment } from 'react';
-
+import classNames from 'classnames';
 import {
   EuiFlexGroup,
   EuiFlexItem,
@@ -27,30 +27,188 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiText,
+  EuiTextColor,
+  EuiBottomBar,
+  EuiButton,
+  EuiToolTip,
+  EuiButtonEmpty,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { isEmpty } from 'lodash';
+import { i18n } from '@kbn/i18n';
+import { toMountPoint } from '../../../../../kibana_react/public';
 import { DocLinksStart, ToastsStart } from '../../../../../../core/public';
 
 import { getCategoryName } from '../../lib';
-import { Field } from '../field';
-import { FieldSetting } from '../../types';
+import { Field, getEditableValue } from '../field';
+import { FieldSetting, SettingsChanges, FieldState } from '../../types';
 
 type Category = string;
+const NAV_IS_LOCKED_KEY = 'core.chrome.isLocked';
 
 interface FormProps {
   settings: Record<string, FieldSetting[]>;
+  visibleSettings: Record<string, FieldSetting[]>;
   categories: Category[];
   categoryCounts: Record<string, number>;
   clearQuery: () => void;
-  save: (key: string, value: any) => Promise<boolean>;
-  clear: (key: string) => Promise<boolean>;
+  save: (changes: SettingsChanges) => Promise<boolean[]>;
   showNoResultsMessage: boolean;
   enableSaving: boolean;
   dockLinks: DocLinksStart['links'];
   toasts: ToastsStart;
 }
 
+interface FormState {
+  unsavedChanges: {
+    [key: string]: FieldState;
+  };
+  loading: boolean;
+}
+
 export class Form extends PureComponent<FormProps> {
+  state: FormState = {
+    unsavedChanges: {},
+    loading: false,
+  };
+
+  setLoading(loading: boolean) {
+    this.setState({
+      loading,
+    });
+  }
+
+  getSettingByKey = (key: string): FieldSetting | undefined => {
+    return Object.values(this.props.settings)
+      .flat()
+      .find(el => el.name === key);
+  };
+
+  getCountOfUnsavedChanges = (): number => {
+    return Object.keys(this.state.unsavedChanges).length;
+  };
+
+  getCountOfHiddenUnsavedChanges = (): number => {
+    const shownSettings = Object.values(this.props.visibleSettings)
+      .flat()
+      .map(setting => setting.name);
+    return Object.keys(this.state.unsavedChanges).filter(key => !shownSettings.includes(key))
+      .length;
+  };
+
+  areChangesInvalid = (): boolean => {
+    const { unsavedChanges } = this.state;
+    return Object.values(unsavedChanges).some(({ isInvalid }) => isInvalid);
+  };
+
+  handleChange = (key: string, change: FieldState) => {
+    const setting = this.getSettingByKey(key);
+    if (!setting) {
+      return;
+    }
+    const { type, defVal, value } = setting;
+    const savedValue = getEditableValue(type, value, defVal);
+    if (change.value === savedValue) {
+      return this.clearChange(key);
+    }
+    this.setState({
+      unsavedChanges: {
+        ...this.state.unsavedChanges,
+        [key]: change,
+      },
+    });
+  };
+
+  clearChange = (key: string) => {
+    if (!this.state.unsavedChanges[key]) {
+      return;
+    }
+    const unsavedChanges = { ...this.state.unsavedChanges };
+    delete unsavedChanges[key];
+
+    this.setState({
+      unsavedChanges,
+    });
+  };
+
+  clearAllUnsaved = () => {
+    this.setState({ unsavedChanges: {} });
+  };
+
+  saveAll = async () => {
+    this.setLoading(true);
+    const { unsavedChanges } = this.state;
+
+    if (isEmpty(unsavedChanges)) {
+      return;
+    }
+    const configToSave: SettingsChanges = {};
+    let requiresReload = false;
+
+    Object.entries(unsavedChanges).forEach(([name, { value }]) => {
+      const setting = this.getSettingByKey(name);
+      if (!setting) {
+        return;
+      }
+      const { defVal, type, requiresPageReload } = setting;
+      let valueToSave = value;
+      let equalsToDefault = false;
+      switch (type) {
+        case 'array':
+          valueToSave = valueToSave.split(',').map((val: string) => val.trim());
+          equalsToDefault = valueToSave.join(',') === (defVal as string[]).join(',');
+          break;
+        case 'json':
+          const isArray = Array.isArray(JSON.parse((defVal as string) || '{}'));
+          valueToSave = valueToSave.trim();
+          valueToSave = valueToSave || (isArray ? '[]' : '{}');
+        default:
+          equalsToDefault = valueToSave === defVal;
+      }
+      if (requiresPageReload) {
+        requiresReload = true;
+      }
+      configToSave[name] = equalsToDefault ? null : valueToSave;
+    });
+
+    try {
+      await this.props.save(configToSave);
+      this.clearAllUnsaved();
+      if (requiresReload) {
+        this.renderPageReloadToast();
+      }
+    } catch (e) {
+      this.props.toasts.addDanger(
+        i18n.translate('advancedSettings.form.saveErrorMessage', {
+          defaultMessage: 'Unable to save',
+        })
+      );
+    }
+    this.setLoading(false);
+  };
+
+  renderPageReloadToast = () => {
+    this.props.toasts.add({
+      title: i18n.translate('advancedSettings.form.requiresPageReloadToastDescription', {
+        defaultMessage: 'One or more settings require you to reload the page to take effect.',
+      }),
+      text: toMountPoint(
+        <>
+          <EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
+            <EuiFlexItem grow={false}>
+              <EuiButton size="s" onClick={() => window.location.reload()}>
+                {i18n.translate('advancedSettings.form.requiresPageReloadToastButtonLabel', {
+                  defaultMessage: 'Reload page',
+                })}
+              </EuiButton>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        </>
+      ),
+      color: 'success',
+    });
+  };
+
   renderClearQueryLink(totalSettings: number, currentSettings: number) {
     const { clearQuery } = this.props;
 
@@ -102,8 +260,9 @@ export class Form extends PureComponent<FormProps> {
                 <Field
                   key={setting.name}
                   setting={setting}
-                  save={this.props.save}
-                  clear={this.props.clear}
+                  handleChange={this.handleChange}
+                  unsavedChanges={this.state.unsavedChanges[setting.name]}
+                  clearChange={this.clearChange}
                   enableSaving={this.props.enableSaving}
                   dockLinks={this.props.dockLinks}
                   toasts={this.props.toasts}
@@ -141,23 +300,116 @@ export class Form extends PureComponent<FormProps> {
     return null;
   }
 
+  renderCountOfUnsaved = () => {
+    const unsavedCount = this.getCountOfUnsavedChanges();
+    const hiddenUnsavedCount = this.getCountOfHiddenUnsavedChanges();
+    return (
+      <EuiTextColor className="mgtAdvancedSettingsForm__unsavedCountMessage" color="ghost">
+        <FormattedMessage
+          id="advancedSettings.form.countOfSettingsChanged"
+          defaultMessage="{unsavedCount} unsaved {unsavedCount, plural,
+              one {setting}
+              other {settings}
+            }{hiddenCount, plural,
+              =0 {}
+              other {, # hidden}
+            }"
+          values={{
+            unsavedCount,
+            hiddenCount: hiddenUnsavedCount,
+          }}
+        />
+      </EuiTextColor>
+    );
+  };
+
+  renderBottomBar = () => {
+    const areChangesInvalid = this.areChangesInvalid();
+    const bottomBarClasses = classNames('mgtAdvancedSettingsForm__bottomBar', {
+      'mgtAdvancedSettingsForm__bottomBar--pushForNav':
+        localStorage.getItem(NAV_IS_LOCKED_KEY) === 'true',
+    });
+    return (
+      <EuiBottomBar className={bottomBarClasses} data-test-subj="advancedSetting-bottomBar">
+        <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+          <EuiFlexItem grow={false} className="mgtAdvancedSettingsForm__unsavedCount">
+            <p id="aria-describedby.countOfUnsavedSettings">{this.renderCountOfUnsaved()}</p>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiFlexGroup gutterSize="s">
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty
+                  color="ghost"
+                  size="s"
+                  iconType="cross"
+                  onClick={this.clearAllUnsaved}
+                  aria-describedby="aria-describedby.countOfUnsavedSettings"
+                  data-test-subj="advancedSetting-cancelButton"
+                >
+                  {i18n.translate('advancedSettings.form.cancelButtonLabel', {
+                    defaultMessage: 'Cancel changes',
+                  })}
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <EuiToolTip
+                  content={
+                    areChangesInvalid &&
+                    i18n.translate('advancedSettings.form.saveButtonTooltipWithInvalidChanges', {
+                      defaultMessage: 'Fix invalid settings before saving.',
+                    })
+                  }
+                >
+                  <EuiButton
+                    className="mgtAdvancedSettingsForm__button"
+                    disabled={areChangesInvalid}
+                    color="secondary"
+                    fill
+                    size="s"
+                    iconType="check"
+                    onClick={this.saveAll}
+                    aria-describedby="aria-describedby.countOfUnsavedSettings"
+                    isLoading={this.state.loading}
+                    data-test-subj="advancedSetting-saveButton"
+                  >
+                    {i18n.translate('advancedSettings.form.saveButtonLabel', {
+                      defaultMessage: 'Save changes',
+                    })}
+                  </EuiButton>
+                </EuiToolTip>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiBottomBar>
+    );
+  };
+
   render() {
-    const { settings, categories, categoryCounts, clearQuery } = this.props;
+    const { unsavedChanges } = this.state;
+    const { visibleSettings, categories, categoryCounts, clearQuery } = this.props;
     const currentCategories: Category[] = [];
 
     categories.forEach(category => {
-      if (settings[category] && settings[category].length) {
+      if (visibleSettings[category] && visibleSettings[category].length) {
         currentCategories.push(category);
       }
     });
 
     return (
       <Fragment>
-        {currentCategories.length
-          ? currentCategories.map(category => {
-              return this.renderCategory(category, settings[category], categoryCounts[category]);
-            })
-          : this.maybeRenderNoSettings(clearQuery)}
+        <div>
+          {currentCategories.length
+            ? currentCategories.map(category => {
+                return this.renderCategory(
+                  category,
+                  visibleSettings[category],
+                  categoryCounts[category]
+                );
+              })
+            : this.maybeRenderNoSettings(clearQuery)}
+        </div>
+        {!isEmpty(unsavedChanges) && this.renderBottomBar()}
       </Fragment>
     );
   }
diff --git a/src/plugins/advanced_settings/public/management_app/types.ts b/src/plugins/advanced_settings/public/management_app/types.ts
index 05bb5e754563d..d44a05ce36f5d 100644
--- a/src/plugins/advanced_settings/public/management_app/types.ts
+++ b/src/plugins/advanced_settings/public/management_app/types.ts
@@ -47,6 +47,19 @@ export interface FieldSetting {
 }
 
 // until eui searchbar and query are typed
+
+export interface SettingsChanges {
+  [key: string]: any;
+}
+
+export interface FieldState {
+  value?: any;
+  changeImage?: boolean;
+  loading?: boolean;
+  isInvalid?: boolean;
+  error?: string | null;
+}
+
 export interface IQuery {
   ast: any; // incomplete
   text: string;
diff --git a/src/plugins/expressions/public/loader.ts b/src/plugins/expressions/public/loader.ts
index 4600922e076fa..fbe2f37c648d6 100644
--- a/src/plugins/expressions/public/loader.ts
+++ b/src/plugins/expressions/public/loader.ts
@@ -167,7 +167,7 @@ export class ExpressionLoader {
   };
 
   private render(data: Data): void {
-    this.renderHandler.render(data, this.params.extraHandlers);
+    this.renderHandler.render(data, this.params.uiState);
   }
 
   private setParams(params?: IExpressionLoaderParams) {
@@ -182,8 +182,8 @@ export class ExpressionLoader {
         this.params.searchContext || {}
       ) as any;
     }
-    if (params.extraHandlers && this.params) {
-      this.params.extraHandlers = params.extraHandlers;
+    if (params.uiState && this.params) {
+      this.params.uiState = params.uiState;
     }
     if (params.variables && this.params) {
       this.params.variables = params.variables;
diff --git a/src/plugins/expressions/public/render.ts b/src/plugins/expressions/public/render.ts
index 86e360f8135e7..ad4d16bcd1323 100644
--- a/src/plugins/expressions/public/render.ts
+++ b/src/plugins/expressions/public/render.ts
@@ -94,7 +94,7 @@ export class ExpressionRenderHandler {
     };
   }
 
-  render = async (data: any, extraHandlers: IExpressionRendererExtraHandlers = {}) => {
+  render = async (data: any, uiState: any = {}) => {
     if (!data || typeof data !== 'object') {
       return this.handleRenderError(new Error('invalid data provided to the expression renderer'));
     }
@@ -119,7 +119,7 @@ export class ExpressionRenderHandler {
         .get(data.as)!
         .render(this.element, data.value, {
           ...this.handlers,
-          ...extraHandlers,
+          uiState,
         } as any);
     } catch (e) {
       return this.handleRenderError(e);
diff --git a/src/plugins/expressions/public/types/index.ts b/src/plugins/expressions/public/types/index.ts
index c77698d3661c2..b5781ef213fd0 100644
--- a/src/plugins/expressions/public/types/index.ts
+++ b/src/plugins/expressions/public/types/index.ts
@@ -48,7 +48,7 @@ export interface IExpressionLoaderParams {
   disableCaching?: boolean;
   customFunctions?: [];
   customRenderers?: [];
-  extraHandlers?: Record<string, any>;
+  uiState?: unknown;
   inspectorAdapters?: Adapters;
   onRenderError?: RenderErrorHandlerFnType;
 }
diff --git a/src/legacy/ui/public/notify/app_redirect/app_redirect.test.js b/src/plugins/kibana_legacy/public/notify/app_redirect/app_redirect.test.ts
similarity index 75%
rename from src/legacy/ui/public/notify/app_redirect/app_redirect.test.js
rename to src/plugins/kibana_legacy/public/notify/app_redirect/app_redirect.test.ts
index a23aabe6ad88e..efb1393ff0b16 100644
--- a/src/legacy/ui/public/notify/app_redirect/app_redirect.test.js
+++ b/src/plugins/kibana_legacy/public/notify/app_redirect/app_redirect.test.ts
@@ -17,17 +17,12 @@
  * under the License.
  */
 
+import { ILocationService } from 'angular';
+import { ToastsStart } from '../../../../../core/public';
 import { addAppRedirectMessageToUrl, showAppRedirectNotification } from './app_redirect';
 
 let isToastAdded = false;
-
-jest.mock('../toasts', () => ({
-  toastNotifications: {
-    addDanger: () => {
-      isToastAdded = true;
-    },
-  },
-}));
+const toasts: ToastsStart = {} as ToastsStart;
 
 describe('addAppRedirectMessageToUrl', () => {
   test('adds a message to the URL', () => {
@@ -39,20 +34,29 @@ describe('addAppRedirectMessageToUrl', () => {
 describe('showAppRedirectNotification', () => {
   beforeEach(() => {
     isToastAdded = false;
+    toasts.addDanger = (): any => {
+      isToastAdded = true;
+    };
   });
 
   test(`adds a toast when there's a message in the URL`, () => {
-    showAppRedirectNotification({
-      search: () => ({ app_redirect_message: 'redirect message' }),
-    });
+    showAppRedirectNotification(
+      {
+        search: () => ({ app_redirect_message: 'redirect message' }),
+      } as ILocationService,
+      toasts
+    );
 
     expect(isToastAdded).toBe(true);
   });
 
   test(`doesn't add a toast when there's no message in the URL`, () => {
-    showAppRedirectNotification({
-      search: () => ({ app_redirect_message: '' }),
-    });
+    showAppRedirectNotification(
+      {
+        search: () => ({ app_redirect_message: '' }),
+      } as ILocationService,
+      toasts
+    );
 
     expect(isToastAdded).toBe(false);
   });
diff --git a/src/legacy/ui/public/notify/app_redirect/app_redirect.js b/src/plugins/kibana_legacy/public/notify/app_redirect/app_redirect.ts
similarity index 82%
rename from src/legacy/ui/public/notify/app_redirect/app_redirect.js
rename to src/plugins/kibana_legacy/public/notify/app_redirect/app_redirect.ts
index a92e5401e5e75..e79ab4b2fbc6d 100644
--- a/src/legacy/ui/public/notify/app_redirect/app_redirect.js
+++ b/src/plugins/kibana_legacy/public/notify/app_redirect/app_redirect.ts
@@ -17,12 +17,13 @@
  * under the License.
  */
 
+import { ILocationService } from 'angular';
 import { modifyUrl } from '../../../../../core/utils';
-import { toastNotifications } from '../toasts';
+import { ToastsStart } from '../../../../../core/public';
 
 const APP_REDIRECT_MESSAGE_PARAM = 'app_redirect_message';
 
-export function addAppRedirectMessageToUrl(url, message) {
+export function addAppRedirectMessageToUrl(url: string, message: string) {
   return modifyUrl(url, urlParts => {
     urlParts.hash = modifyUrl(urlParts.hash || '', hashParts => {
       hashParts.query[APP_REDIRECT_MESSAGE_PARAM] = message;
@@ -32,7 +33,7 @@ export function addAppRedirectMessageToUrl(url, message) {
 
 // If an app needs to redirect, e.g. due to an expired license, it can surface a message via
 // the URL query params.
-export function showAppRedirectNotification($location) {
+export function showAppRedirectNotification($location: ILocationService, toasts: ToastsStart) {
   const queryString = $location.search();
 
   if (!queryString[APP_REDIRECT_MESSAGE_PARAM]) {
@@ -42,5 +43,5 @@ export function showAppRedirectNotification($location) {
   const message = queryString[APP_REDIRECT_MESSAGE_PARAM];
   $location.search(APP_REDIRECT_MESSAGE_PARAM, null);
 
-  toastNotifications.addDanger(message);
+  toasts.addDanger(message);
 }
diff --git a/src/legacy/ui/public/notify/app_redirect/index.js b/src/plugins/kibana_legacy/public/notify/app_redirect/index.ts
similarity index 100%
rename from src/legacy/ui/public/notify/app_redirect/index.js
rename to src/plugins/kibana_legacy/public/notify/app_redirect/index.ts
diff --git a/src/plugins/kibana_legacy/public/notify/index.ts b/src/plugins/kibana_legacy/public/notify/index.ts
index 6aa4e36ab7227..b6f29876c2737 100644
--- a/src/plugins/kibana_legacy/public/notify/index.ts
+++ b/src/plugins/kibana_legacy/public/notify/index.ts
@@ -18,3 +18,4 @@
  */
 export * from './toasts';
 export * from './lib';
+export { addAppRedirectMessageToUrl, showAppRedirectNotification } from './app_redirect';
diff --git a/src/plugins/share/server/routes/goto.ts b/src/plugins/share/server/routes/goto.ts
index 5c3a4e441099f..0c5b74915e58a 100644
--- a/src/plugins/share/server/routes/goto.ts
+++ b/src/plugins/share/server/routes/goto.ts
@@ -23,6 +23,7 @@ import { schema } from '@kbn/config-schema';
 import { shortUrlAssertValid } from './lib/short_url_assert_valid';
 import { ShortUrlLookupService } from './lib/short_url_lookup';
 import { getGotoPath } from '../../common/short_url_routes';
+import { modifyUrl } from '../../../../core/utils';
 
 export const createGotoRoute = ({
   router,
@@ -49,9 +50,16 @@ export const createGotoRoute = ({
       const uiSettings = context.core.uiSettings.client;
       const stateStoreInSessionStorage = await uiSettings.get('state:storeInSessionStorage');
       if (!stateStoreInSessionStorage) {
+        const basePath = http.basePath.get(request);
+
+        const prependedUrl = modifyUrl(url, parts => {
+          if (!parts.hostname && parts.pathname && parts.pathname.startsWith('/')) {
+            parts.pathname = `${basePath}${parts.pathname}`;
+          }
+        });
         return response.redirected({
           headers: {
-            location: http.basePath.prepend(url),
+            location: prependedUrl,
           },
         });
       }
diff --git a/src/plugins/telemetry/public/components/telemetry_management_section.tsx b/src/plugins/telemetry/public/components/telemetry_management_section.tsx
index 20c8873b13272..bf14c33a48048 100644
--- a/src/plugins/telemetry/public/components/telemetry_management_section.tsx
+++ b/src/plugins/telemetry/public/components/telemetry_management_section.tsx
@@ -33,8 +33,8 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 import { PRIVACY_STATEMENT_URL } from '../../common/constants';
 import { OptInExampleFlyout } from './opt_in_example_flyout';
-// @ts-ignore
 import { Field } from '../../../advanced_settings/public';
+import { ToastsStart } from '../../../../core/public/';
 import { TelemetryService } from '../services/telemetry_service';
 const SEARCH_TERMS = ['telemetry', 'usage', 'data', 'usage data'];
 
@@ -44,12 +44,14 @@ interface Props {
   showAppliesSettingMessage: boolean;
   enableSaving: boolean;
   query?: any;
+  toasts: ToastsStart;
 }
 
 interface State {
   processing: boolean;
   showExample: boolean;
   queryMatches: boolean | null;
+  enabled: boolean;
 }
 
 export class TelemetryManagementSection extends Component<Props, State> {
@@ -57,6 +59,7 @@ export class TelemetryManagementSection extends Component<Props, State> {
     processing: false,
     showExample: false,
     queryMatches: null,
+    enabled: this.props.telemetryService.getIsOptedIn() || false,
   };
 
   UNSAFE_componentWillReceiveProps(nextProps: Props) {
@@ -79,7 +82,7 @@ export class TelemetryManagementSection extends Component<Props, State> {
 
   render() {
     const { telemetryService } = this.props;
-    const { showExample, queryMatches } = this.state;
+    const { showExample, queryMatches, enabled, processing } = this.state;
 
     if (!telemetryService.getCanChangeOptInStatus()) {
       return null;
@@ -119,7 +122,7 @@ export class TelemetryManagementSection extends Component<Props, State> {
                   displayName: i18n.translate('telemetry.provideUsageStatisticsTitle', {
                     defaultMessage: 'Provide usage statistics',
                   }),
-                  value: telemetryService.getIsOptedIn(),
+                  value: enabled,
                   description: this.renderDescription(),
                   defVal: true,
                   ariaName: i18n.translate('telemetry.provideUsageStatisticsAriaName', {
@@ -127,10 +130,10 @@ export class TelemetryManagementSection extends Component<Props, State> {
                   }),
                 } as any
               }
+              loading={processing}
               dockLinks={null as any}
               toasts={null as any}
-              save={this.toggleOptIn}
-              clear={this.toggleOptIn}
+              handleChange={this.toggleOptIn}
               enableSaving={this.props.enableSaving}
             />
           </EuiForm>
@@ -151,13 +154,13 @@ export class TelemetryManagementSection extends Component<Props, State> {
           <p>
             <FormattedMessage
               id="telemetry.callout.appliesSettingTitle"
-              defaultMessage="This setting applies to {allOfKibanaText}"
+              defaultMessage="Changes to this setting apply to {allOfKibanaText} and are saved automatically."
               values={{
                 allOfKibanaText: (
                   <strong>
                     <FormattedMessage
                       id="telemetry.callout.appliesSettingTitle.allOfKibanaText"
-                      defaultMessage="all of Kibana."
+                      defaultMessage="all of Kibana"
                     />
                   </strong>
                 ),
@@ -200,20 +203,35 @@ export class TelemetryManagementSection extends Component<Props, State> {
   );
 
   toggleOptIn = async (): Promise<boolean> => {
-    const { telemetryService } = this.props;
-    const newOptInValue = !telemetryService.getIsOptedIn();
+    const { telemetryService, toasts } = this.props;
+    const newOptInValue = !this.state.enabled;
 
     return new Promise((resolve, reject) => {
-      this.setState({ processing: true }, async () => {
-        try {
-          await telemetryService.setOptIn(newOptInValue);
-          this.setState({ processing: false });
-          resolve(true);
-        } catch (err) {
-          this.setState({ processing: false });
-          reject(err);
+      this.setState(
+        {
+          processing: true,
+          enabled: newOptInValue,
+        },
+        async () => {
+          try {
+            await telemetryService.setOptIn(newOptInValue);
+            this.setState({ processing: false });
+            toasts.addSuccess(
+              newOptInValue
+                ? i18n.translate('telemetry.optInSuccessOn', {
+                    defaultMessage: 'Usage data collection turned on.',
+                  })
+                : i18n.translate('telemetry.optInSuccessOff', {
+                    defaultMessage: 'Usage data collection turned off.',
+                  })
+            );
+            resolve(true);
+          } catch (err) {
+            this.setState({ processing: false });
+            reject(err);
+          }
         }
-      });
+      );
     });
   };
 
diff --git a/src/plugins/telemetry/public/plugin.ts b/src/plugins/telemetry/public/plugin.ts
index 7ba51cacd1949..9cfb4ca1ec395 100644
--- a/src/plugins/telemetry/public/plugin.ts
+++ b/src/plugins/telemetry/public/plugin.ts
@@ -54,9 +54,6 @@ export class TelemetryPlugin implements Plugin<TelemetryPluginSetup, TelemetryPl
     }
 
     const telemetryBanner = injectedMetadata.getInjectedVar('telemetryBanner') as boolean;
-    const sendUsageFrom = injectedMetadata.getInjectedVar('telemetrySendUsageFrom') as
-      | 'browser'
-      | 'server';
 
     this.telemetryNotifications = new TelemetryNotifications({
       overlays,
@@ -69,7 +66,7 @@ export class TelemetryPlugin implements Plugin<TelemetryPluginSetup, TelemetryPl
         return;
       }
 
-      this.maybeStartTelemetryPoller({ sendUsageFrom });
+      this.maybeStartTelemetryPoller();
       if (telemetryBanner) {
         this.maybeShowOptedInNotificationBanner();
         this.maybeShowOptInBanner();
@@ -87,13 +84,12 @@ export class TelemetryPlugin implements Plugin<TelemetryPluginSetup, TelemetryPl
     return anonymousPaths.isAnonymous(window.location.pathname);
   }
 
-  private maybeStartTelemetryPoller({ sendUsageFrom }: { sendUsageFrom: string }) {
+  private maybeStartTelemetryPoller() {
     if (!this.telemetrySender) {
       return;
     }
-    if (sendUsageFrom === 'browser') {
-      this.telemetrySender.startChecking();
-    }
+
+    this.telemetrySender.startChecking();
   }
 
   private maybeShowOptedInNotificationBanner() {
diff --git a/src/plugins/telemetry/public/services/telemetry_service.test.ts b/src/plugins/telemetry/public/services/telemetry_service.test.ts
index 0ebcd52f1423c..0a49b0ae3084e 100644
--- a/src/plugins/telemetry/public/services/telemetry_service.test.ts
+++ b/src/plugins/telemetry/public/services/telemetry_service.test.ts
@@ -26,9 +26,18 @@ const mockSubtract = jest.fn().mockImplementation(() => {
   };
 });
 
+const mockClone = jest.fn().mockImplementation(() => {
+  return {
+    clone: mockClone,
+    subtract: mockSubtract,
+    toISOString: jest.fn(),
+  };
+});
+
 jest.mock('moment', () => {
   return jest.fn().mockImplementation(() => {
     return {
+      clone: mockClone,
       subtract: mockSubtract,
       toISOString: jest.fn(),
     };
@@ -43,6 +52,7 @@ describe('TelemetryService', () => {
       expect(telemetryService['http'].post).toBeCalledWith('/api/telemetry/v2/clusters/_stats', {
         body: JSON.stringify({ unencrypted: false, timeRange: {} }),
       });
+      expect(mockClone).toBeCalled();
       expect(mockSubtract).toBeCalledWith(20, 'minutes');
     });
   });
diff --git a/src/plugins/telemetry/public/services/telemetry_service.ts b/src/plugins/telemetry/public/services/telemetry_service.ts
index 073886e7d1327..cb91451bd8ef4 100644
--- a/src/plugins/telemetry/public/services/telemetry_service.ts
+++ b/src/plugins/telemetry/public/services/telemetry_service.ts
@@ -92,7 +92,10 @@ export class TelemetryService {
       body: JSON.stringify({
         unencrypted,
         timeRange: {
-          min: now.subtract(20, 'minutes').toISOString(),
+          min: now
+            .clone() // Need to clone it to avoid mutation (and max being the same value)
+            .subtract(20, 'minutes')
+            .toISOString(),
           max: now.toISOString(),
         },
       }),
diff --git a/test/functional/page_objects/settings_page.ts b/test/functional/page_objects/settings_page.ts
index d7e5064cf7280..ff340c6b0abcd 100644
--- a/test/functional/page_objects/settings_page.ts
+++ b/test/functional/page_objects/settings_page.ts
@@ -94,7 +94,7 @@ export function SettingsPageProvider({ getService, getPageObjects }: FtrProvider
         `[data-test-subj="advancedSetting-editField-${propertyName}"] option[value="${propertyValue}"]`
       );
       await PageObjects.header.waitUntilLoadingHasFinished();
-      await testSubjects.click(`advancedSetting-saveEditField-${propertyName}`);
+      await testSubjects.click(`advancedSetting-saveButton`);
       await PageObjects.header.waitUntilLoadingHasFinished();
     }
 
@@ -102,14 +102,14 @@ export function SettingsPageProvider({ getService, getPageObjects }: FtrProvider
       const input = await testSubjects.find(`advancedSetting-editField-${propertyName}`);
       await input.clearValue();
       await input.type(propertyValue);
-      await testSubjects.click(`advancedSetting-saveEditField-${propertyName}`);
+      await testSubjects.click(`advancedSetting-saveButton`);
       await PageObjects.header.waitUntilLoadingHasFinished();
     }
 
     async toggleAdvancedSettingCheckbox(propertyName: string) {
       testSubjects.click(`advancedSetting-editField-${propertyName}`);
       await PageObjects.header.waitUntilLoadingHasFinished();
-      await testSubjects.click(`advancedSetting-saveEditField-${propertyName}`);
+      await testSubjects.click(`advancedSetting-saveButton`);
       await PageObjects.header.waitUntilLoadingHasFinished();
     }
 
diff --git a/x-pack/.i18nrc.json b/x-pack/.i18nrc.json
index f22f7e98d3b8a..b1cb9075434e8 100644
--- a/x-pack/.i18nrc.json
+++ b/x-pack/.i18nrc.json
@@ -16,7 +16,7 @@
     "xpack.fileUpload": "legacy/plugins/file_upload",
     "xpack.graph": ["legacy/plugins/graph", "plugins/graph"],
     "xpack.grokDebugger": "legacy/plugins/grokdebugger",
-    "xpack.idxMgmt": "legacy/plugins/index_management",
+    "xpack.idxMgmt": "plugins/index_management",
     "xpack.indexLifecycleMgmt": "legacy/plugins/index_lifecycle_management",
     "xpack.infra": "plugins/infra",
     "xpack.ingestManager": "plugins/ingest_manager",
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Popover/Contents.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Popover/Contents.tsx
index 378ad9509c217..f1c53673c8755 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Popover/Contents.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Popover/Contents.tsx
@@ -14,7 +14,7 @@ import cytoscape from 'cytoscape';
 import React from 'react';
 import { Buttons } from './Buttons';
 import { Info } from './Info';
-import { ServiceMetricList } from './ServiceMetricList';
+import { ServiceMetricFetcher } from './ServiceMetricFetcher';
 
 const popoverMinWidth = 280;
 
@@ -49,7 +49,7 @@ export function Contents({
       </EuiFlexItem>
       <EuiFlexItem>
         {isService ? (
-          <ServiceMetricList serviceName={selectedNodeServiceName} />
+          <ServiceMetricFetcher serviceName={selectedNodeServiceName} />
         ) : (
           <Info {...selectedNodeData} />
         )}
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Popover/Popover.stories.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Popover/Popover.stories.tsx
index b26488c5ef7de..e5962afd76eb8 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Popover/Popover.stories.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Popover/Popover.stories.tsx
@@ -6,44 +6,50 @@
 
 import { storiesOf } from '@storybook/react';
 import React from 'react';
-import {
-  ApmPluginContext,
-  ApmPluginContextValue
-} from '../../../../context/ApmPluginContext';
-import { Contents } from './Contents';
+import { ServiceMetricList } from './ServiceMetricList';
 
-const selectedNodeData = {
-  id: 'opbeans-node',
-  label: 'opbeans-node',
-  href:
-    '#/services/opbeans-node/service-map?rangeFrom=now-24h&rangeTo=now&refreshPaused=true&refreshInterval=0',
-  agentName: 'nodejs',
-  type: 'service'
-};
-
-storiesOf('app/ServiceMap/Popover/Contents', module).add(
-  'example',
-  () => {
-    return (
-      <ApmPluginContext.Provider
-        value={
-          ({ core: { notifications: {} } } as unknown) as ApmPluginContextValue
-        }
-      >
-        <Contents
-          selectedNodeData={selectedNodeData}
-          isService={true}
-          label="opbeans-node"
-          onFocusClick={() => {}}
-          selectedNodeServiceName="opbeans-node"
-        />
-      </ApmPluginContext.Provider>
-    );
-  },
-  {
-    info: {
-      propTablesExclude: [ApmPluginContext.Provider],
-      source: false
-    }
-  }
-);
+storiesOf('app/ServiceMap/Popover/ServiceMetricList', module)
+  .add('example', () => (
+    <ServiceMetricList
+      avgErrorsPerMinute={15.738888706725826}
+      avgTransactionDuration={61634.38905590272}
+      avgRequestsPerMinute={164.47222031860858}
+      avgCpuUsage={0.32809666568309237}
+      avgMemoryUsage={0.5504868173242986}
+      numInstances={2}
+      isLoading={false}
+    />
+  ))
+  .add('loading', () => (
+    <ServiceMetricList
+      avgErrorsPerMinute={null}
+      avgTransactionDuration={null}
+      avgRequestsPerMinute={null}
+      avgCpuUsage={null}
+      avgMemoryUsage={null}
+      numInstances={1}
+      isLoading={true}
+    />
+  ))
+  .add('some null values', () => (
+    <ServiceMetricList
+      avgErrorsPerMinute={7.615972134074397}
+      avgTransactionDuration={238792.54809512055}
+      avgRequestsPerMinute={8.439583235652972}
+      avgCpuUsage={null}
+      avgMemoryUsage={null}
+      numInstances={1}
+      isLoading={false}
+    />
+  ))
+  .add('all null values', () => (
+    <ServiceMetricList
+      avgErrorsPerMinute={null}
+      avgTransactionDuration={null}
+      avgRequestsPerMinute={null}
+      avgCpuUsage={null}
+      avgMemoryUsage={null}
+      numInstances={1}
+      isLoading={false}
+    />
+  ));
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Popover/ServiceMetricFetcher.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Popover/ServiceMetricFetcher.tsx
new file mode 100644
index 0000000000000..b0a5e892b5a7e
--- /dev/null
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Popover/ServiceMetricFetcher.tsx
@@ -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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { ServiceNodeMetrics } from '../../../../../../../../plugins/apm/common/service_map';
+import { useFetcher } from '../../../../hooks/useFetcher';
+import { useUrlParams } from '../../../../hooks/useUrlParams';
+import { ServiceMetricList } from './ServiceMetricList';
+
+interface ServiceMetricFetcherProps {
+  serviceName: string;
+}
+
+export function ServiceMetricFetcher({
+  serviceName
+}: ServiceMetricFetcherProps) {
+  const {
+    urlParams: { start, end, environment }
+  } = useUrlParams();
+
+  const { data = {} as ServiceNodeMetrics, status } = useFetcher(
+    callApmApi => {
+      if (serviceName && start && end) {
+        return callApmApi({
+          pathname: '/api/apm/service-map/service/{serviceName}',
+          params: { path: { serviceName }, query: { start, end, environment } }
+        });
+      }
+    },
+    [serviceName, start, end, environment],
+    {
+      preservePreviousData: false
+    }
+  );
+  const isLoading = status === 'loading';
+
+  return <ServiceMetricList {...data} isLoading={isLoading} />;
+}
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Popover/ServiceMetricList.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Popover/ServiceMetricList.tsx
index e91eb5e006d82..50ce918ea7037 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Popover/ServiceMetricList.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceMap/Popover/ServiceMetricList.tsx
@@ -5,26 +5,23 @@
  */
 
 import {
+  EuiBadge,
   EuiFlexGroup,
-  EuiLoadingSpinner,
   EuiFlexItem,
-  EuiBadge
+  EuiLoadingSpinner
 } from '@elastic/eui';
 import lightTheme from '@elastic/eui/dist/eui_theme_light.json';
 import { i18n } from '@kbn/i18n';
 import { isNumber } from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
-// eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { ServiceNodeMetrics } from '../../../../../../../../plugins/apm/server/lib/service_map/get_service_map_service_node_info';
+import { ServiceNodeMetrics } from '../../../../../../../../plugins/apm/common/service_map';
 import {
   asDuration,
   asPercent,
   toMicroseconds,
   tpmUnit
 } from '../../../../utils/formatters';
-import { useUrlParams } from '../../../../hooks/useUrlParams';
-import { useFetcher } from '../../../../hooks/useFetcher';
 
 function LoadingSpinner() {
   return (
@@ -51,53 +48,19 @@ const ItemDescription = styled('td')`
   text-align: right;
 `;
 
-const na = i18n.translate('xpack.apm.serviceMap.NotAvailableMetric', {
-  defaultMessage: 'N/A'
-});
-
-interface MetricListProps {
-  serviceName: string;
+interface ServiceMetricListProps extends ServiceNodeMetrics {
+  isLoading: boolean;
 }
 
-export function ServiceMetricList({ serviceName }: MetricListProps) {
-  const {
-    urlParams: { start, end, environment }
-  } = useUrlParams();
-
-  const { data = {} as ServiceNodeMetrics, status } = useFetcher(
-    callApmApi => {
-      if (serviceName && start && end) {
-        return callApmApi({
-          pathname: '/api/apm/service-map/service/{serviceName}',
-          params: {
-            path: {
-              serviceName
-            },
-            query: {
-              start,
-              end,
-              environment
-            }
-          }
-        });
-      }
-    },
-    [serviceName, start, end, environment],
-    {
-      preservePreviousData: false
-    }
-  );
-
-  const {
-    avgTransactionDuration,
-    avgRequestsPerMinute,
-    avgErrorsPerMinute,
-    avgCpuUsage,
-    avgMemoryUsage,
-    numInstances
-  } = data;
-  const isLoading = status === 'loading';
-
+export function ServiceMetricList({
+  avgTransactionDuration,
+  avgRequestsPerMinute,
+  avgErrorsPerMinute,
+  avgCpuUsage,
+  avgMemoryUsage,
+  numInstances,
+  isLoading
+}: ServiceMetricListProps) {
   const listItems = [
     {
       title: i18n.translate(
@@ -108,7 +71,7 @@ export function ServiceMetricList({ serviceName }: MetricListProps) {
       ),
       description: isNumber(avgTransactionDuration)
         ? asDuration(toMicroseconds(avgTransactionDuration, 'milliseconds'))
-        : na
+        : null
     },
     {
       title: i18n.translate(
@@ -119,7 +82,7 @@ export function ServiceMetricList({ serviceName }: MetricListProps) {
       ),
       description: isNumber(avgRequestsPerMinute)
         ? `${avgRequestsPerMinute.toFixed(2)} ${tpmUnit('request')}`
-        : na
+        : null
     },
     {
       title: i18n.translate(
@@ -128,13 +91,13 @@ export function ServiceMetricList({ serviceName }: MetricListProps) {
           defaultMessage: 'Errors per minute (avg.)'
         }
       ),
-      description: avgErrorsPerMinute?.toFixed(2) ?? na
+      description: avgErrorsPerMinute?.toFixed(2)
     },
     {
       title: i18n.translate('xpack.apm.serviceMap.avgCpuUsagePopoverMetric', {
         defaultMessage: 'CPU usage (avg.)'
       }),
-      description: isNumber(avgCpuUsage) ? asPercent(avgCpuUsage, 1) : na
+      description: isNumber(avgCpuUsage) ? asPercent(avgCpuUsage, 1) : null
     },
     {
       title: i18n.translate(
@@ -143,7 +106,9 @@ export function ServiceMetricList({ serviceName }: MetricListProps) {
           defaultMessage: 'Memory usage (avg.)'
         }
       ),
-      description: isNumber(avgMemoryUsage) ? asPercent(avgMemoryUsage, 1) : na
+      description: isNumber(avgMemoryUsage)
+        ? asPercent(avgMemoryUsage, 1)
+        : null
     }
   ];
   return isLoading ? (
@@ -165,12 +130,15 @@ export function ServiceMetricList({ serviceName }: MetricListProps) {
 
       <table>
         <tbody>
-          {listItems.map(({ title, description }) => (
-            <ItemRow key={title}>
-              <ItemTitle>{title}</ItemTitle>
-              <ItemDescription>{description}</ItemDescription>
-            </ItemRow>
-          ))}
+          {listItems.map(
+            ({ title, description }) =>
+              description && (
+                <ItemRow key={title}>
+                  <ItemTitle>{title}</ItemTitle>
+                  <ItemDescription>{description}</ItemDescription>
+                </ItemRow>
+              )
+          )}
         </tbody>
       </table>
     </>
diff --git a/x-pack/legacy/plugins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/DeleteButton.tsx b/x-pack/legacy/plugins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/DeleteButton.tsx
index 496147b02589b..1564f1ae746a9 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/DeleteButton.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/DeleteButton.tsx
@@ -51,12 +51,18 @@ async function deleteConfig(
 ) {
   try {
     await callApmApi({
-      pathname: '/api/apm/settings/agent-configuration/{configurationId}',
+      pathname: '/api/apm/settings/agent-configuration',
       method: 'DELETE',
       params: {
-        path: { configurationId: selectedConfig.id }
+        body: {
+          service: {
+            name: selectedConfig.service.name,
+            environment: selectedConfig.service.environment
+          }
+        }
       }
     });
+
     toasts.addSuccess({
       title: i18n.translate(
         'xpack.apm.settings.agentConf.flyout.deleteSection.deleteConfigSucceededTitle',
diff --git a/x-pack/legacy/plugins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/index.tsx b/x-pack/legacy/plugins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/index.tsx
index 653dedea733f2..c77617fbb424f 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/index.tsx
@@ -135,8 +135,8 @@ export function AddEditFlyout({
       sampleRate,
       captureBody,
       transactionMaxSpans,
-      configurationId: selectedConfig ? selectedConfig.id : undefined,
       agentName,
+      isExistingConfig: Boolean(selectedConfig),
       toasts,
       trackApmEvent
     });
diff --git a/x-pack/legacy/plugins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/saveConfig.ts b/x-pack/legacy/plugins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/saveConfig.ts
index 19934cafb4694..d36120a054795 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/saveConfig.ts
+++ b/x-pack/legacy/plugins/apm/public/components/app/Settings/AgentConfigurations/AddEditFlyout/saveConfig.ts
@@ -27,8 +27,8 @@ export async function saveConfig({
   sampleRate,
   captureBody,
   transactionMaxSpans,
-  configurationId,
   agentName,
+  isExistingConfig,
   toasts,
   trackApmEvent
 }: {
@@ -38,8 +38,8 @@ export async function saveConfig({
   sampleRate: string;
   captureBody: string;
   transactionMaxSpans: string;
-  configurationId?: string;
   agentName?: string;
+  isExistingConfig: boolean;
   toasts: NotificationsStart['toasts'];
   trackApmEvent: UiTracker;
 }) {
@@ -64,24 +64,14 @@ export async function saveConfig({
       settings
     };
 
-    if (configurationId) {
-      await callApmApi({
-        pathname: '/api/apm/settings/agent-configuration/{configurationId}',
-        method: 'PUT',
-        params: {
-          path: { configurationId },
-          body: configuration
-        }
-      });
-    } else {
-      await callApmApi({
-        pathname: '/api/apm/settings/agent-configuration/new',
-        method: 'POST',
-        params: {
-          body: configuration
-        }
-      });
-    }
+    await callApmApi({
+      pathname: '/api/apm/settings/agent-configuration',
+      method: 'PUT',
+      params: {
+        query: { overwrite: isExistingConfig },
+        body: configuration
+      }
+    });
 
     toasts.addSuccess({
       title: i18n.translate(
diff --git a/x-pack/legacy/plugins/apm/readme.md b/x-pack/legacy/plugins/apm/readme.md
index 2106243d12aea..a513249c296db 100644
--- a/x-pack/legacy/plugins/apm/readme.md
+++ b/x-pack/legacy/plugins/apm/readme.md
@@ -71,6 +71,28 @@ node scripts/jest.js plugins/apm --watch
 node scripts/jest.js plugins/apm --updateSnapshot
 ```
 
+### Functional tests
+
+**Start server**
+`node scripts/functional_tests_server --config x-pack/test/functional/config.js`
+
+**Run tests**
+`node scripts/functional_test_runner --config x-pack/test/functional/config.js --grep='APM specs'`
+
+APM tests are located in `x-pack/test/functional/apps/apm`.
+For debugging access Elasticsearch on http://localhost:9220` (elastic/changeme)
+
+### API integration tests
+
+**Start server**
+`node scripts/functional_tests_server --config x-pack/test/api_integration/config.js`
+
+**Run tests**
+`node scripts/functional_test_runner --config x-pack/test/api_integration/config.js --grep='APM specs'`
+
+APM tests are located in `x-pack/test/api_integration/apis/apm`.
+For debugging access Elasticsearch on http://localhost:9220` (elastic/changeme)
+
 ### Linting
 
 _Note: Run the following commands from `kibana/`._
diff --git a/x-pack/legacy/plugins/canvas/public/components/toolbar/__examples__/toolbar.stories.tsx b/x-pack/legacy/plugins/canvas/public/components/toolbar/__examples__/toolbar.stories.tsx
new file mode 100644
index 0000000000000..5907c932ddabb
--- /dev/null
+++ b/x-pack/legacy/plugins/canvas/public/components/toolbar/__examples__/toolbar.stories.tsx
@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+/*
+ TODO: uncomment and fix this test to address storybook errors as a result of nested component dependencies - https://github.com/elastic/kibana/issues/58289
+ */
+
+/*
+import { action } from '@storybook/addon-actions';
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { Toolbar } from '../toolbar';
+
+storiesOf('components/Toolbar', module)
+  .addDecorator(story => (
+    <div
+      style={{
+        width: '200px',
+      }}
+    >
+      {story()}
+    </div>
+  ))
+  .add('with null metric', () => (
+    <Toolbar
+      setTray={action('setTray')}
+      nextPage={action('nextPage')}
+      previousPage={action('previousPage')}
+      setShowWorkpadManager={action('setShowWorkpadManager')}
+      selectedPageNumber={1}
+      totalPages={1}
+      showWorkpadManager={false}
+      isWriteable={true}
+    />
+  ));
+*/
diff --git a/x-pack/legacy/plugins/canvas/public/components/toolbar/index.js b/x-pack/legacy/plugins/canvas/public/components/toolbar/index.js
index c834304739a4c..294a44ba0415a 100644
--- a/x-pack/legacy/plugins/canvas/public/components/toolbar/index.js
+++ b/x-pack/legacy/plugins/canvas/public/components/toolbar/index.js
@@ -7,12 +7,14 @@
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { pure, compose, withState, getContext, withHandlers } from 'recompose';
+import { canUserWrite } from '../../state/selectors/app';
 
 import {
   getWorkpad,
   getWorkpadName,
   getSelectedPageIndex,
   getSelectedElement,
+  isWriteable,
 } from '../../state/selectors/workpad';
 
 import { Toolbar as Component } from './toolbar';
@@ -23,6 +25,7 @@ const mapStateToProps = state => ({
   totalPages: getWorkpad(state).pages.length,
   selectedPageNumber: getSelectedPageIndex(state) + 1,
   selectedElement: getSelectedElement(state),
+  isWriteable: isWriteable(state) && canUserWrite(state),
 });
 
 export const Toolbar = compose(
diff --git a/x-pack/legacy/plugins/canvas/public/components/toolbar/toolbar.tsx b/x-pack/legacy/plugins/canvas/public/components/toolbar/toolbar.tsx
index 089f021ccdc32..0f8204e6bc261 100644
--- a/x-pack/legacy/plugins/canvas/public/components/toolbar/toolbar.tsx
+++ b/x-pack/legacy/plugins/canvas/public/components/toolbar/toolbar.tsx
@@ -39,7 +39,8 @@ enum TrayType {
 
 interface Props {
   workpadName: string;
-
+  isWriteable: boolean;
+  canUserWrite: boolean;
   tray: TrayType | null;
   setTray: (tray: TrayType | null) => void;
 
@@ -66,12 +67,17 @@ export const Toolbar = (props: Props) => {
     totalPages,
     showWorkpadManager,
     setShowWorkpadManager,
+    isWriteable,
   } = props;
 
   const elementIsSelected = Boolean(selectedElement);
 
   const done = () => setTray(null);
 
+  if (!isWriteable && tray === TrayType.expression) {
+    done();
+  }
+
   const showHideTray = (exp: TrayType) => {
     if (tray && tray === exp) {
       return done();
@@ -135,7 +141,7 @@ export const Toolbar = (props: Props) => {
             />
           </EuiFlexItem>
           <EuiFlexItem />
-          {elementIsSelected && (
+          {elementIsSelected && isWriteable && (
             <EuiFlexItem grow={false}>
               <EuiButtonEmpty
                 color="text"
@@ -166,4 +172,5 @@ Toolbar.propTypes = {
   selectedElement: PropTypes.object,
   showWorkpadManager: PropTypes.bool.isRequired,
   setShowWorkpadManager: PropTypes.func.isRequired,
+  isWriteable: PropTypes.bool.isRequired,
 };
diff --git a/x-pack/legacy/plugins/cross_cluster_replication/index.js b/x-pack/legacy/plugins/cross_cluster_replication/index.js
index 1b5f42fc5107e..1b3aafcad5c0f 100644
--- a/x-pack/legacy/plugins/cross_cluster_replication/index.js
+++ b/x-pack/legacy/plugins/cross_cluster_replication/index.js
@@ -49,13 +49,12 @@ export function crossClusterReplication(kibana) {
     init: function initCcrPlugin(server) {
       registerLicenseChecker(server);
       registerRoutes(server);
-
       if (
         server.config().get('xpack.ccr.ui.enabled') &&
-        server.plugins.index_management &&
-        server.plugins.index_management.addIndexManagementDataEnricher
+        server.newPlatform.setup.plugins.indexManagement &&
+        server.newPlatform.setup.plugins.indexManagement.indexDataEnricher
       ) {
-        server.plugins.index_management.addIndexManagementDataEnricher(ccrDataEnricher);
+        server.newPlatform.setup.plugins.indexManagement.indexDataEnricher.add(ccrDataEnricher);
       }
     },
   });
diff --git a/x-pack/legacy/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/components/detail_panel/detail_panel.js b/x-pack/legacy/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/components/detail_panel/detail_panel.js
index 16ed0a7d695ad..7b31ffa5024b7 100644
--- a/x-pack/legacy/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/components/detail_panel/detail_panel.js
+++ b/x-pack/legacy/plugins/cross_cluster_replication/public/app/sections/home/auto_follow_pattern_list/components/detail_panel/detail_panel.js
@@ -7,7 +7,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { getIndexListUri } from '../../../../../../../../index_management/public/application/services/navigation';
+import { getIndexListUri } from '../../../../../../../../../../plugins/index_management/public';
 
 import {
   EuiButtonEmpty,
diff --git a/x-pack/legacy/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/components/detail_panel/detail_panel.js b/x-pack/legacy/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/components/detail_panel/detail_panel.js
index e3bda2e67097d..2ad118d28f38d 100644
--- a/x-pack/legacy/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/components/detail_panel/detail_panel.js
+++ b/x-pack/legacy/plugins/cross_cluster_replication/public/app/sections/home/follower_indices_list/components/detail_panel/detail_panel.js
@@ -7,8 +7,6 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { getIndexListUri } from '../../../../../../../../index_management/public/application/services/navigation';
-
 import {
   EuiButton,
   EuiButtonEmpty,
@@ -31,12 +29,11 @@ import {
   EuiTextColor,
   EuiTitle,
 } from '@elastic/eui';
-
 import 'brace/theme/textmate';
 
-import { ContextMenu } from '../context_menu';
-
+import { getIndexListUri } from '../../../../../../../../../../plugins/index_management/public';
 import { API_STATUS } from '../../../../../constants';
+import { ContextMenu } from '../context_menu';
 
 export class DetailPanel extends Component {
   static propTypes = {
diff --git a/x-pack/legacy/plugins/cross_cluster_replication/public/extend_index_management/index.js b/x-pack/legacy/plugins/cross_cluster_replication/public/extend_index_management/index.js
index 809a7c3e87b75..c44918c500849 100644
--- a/x-pack/legacy/plugins/cross_cluster_replication/public/extend_index_management/index.js
+++ b/x-pack/legacy/plugins/cross_cluster_replication/public/extend_index_management/index.js
@@ -4,11 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { i18n } from '@kbn/i18n';
-import { extensionsService } from '../../../index_management/public';
+import { npSetup } from 'ui/new_platform';
 import { get } from 'lodash';
 
 const propertyPath = 'isFollowerIndex';
-export const followerBadgeExtension = {
+
+const followerBadgeExtension = {
   matchIndex: index => {
     return get(index, propertyPath);
   },
@@ -19,4 +20,6 @@ export const followerBadgeExtension = {
   filterExpression: 'isFollowerIndex:true',
 };
 
-extensionsService.addBadge(followerBadgeExtension);
+if (npSetup.plugins.indexManagement) {
+  npSetup.plugins.indexManagement.extensionsService.addBadge(followerBadgeExtension);
+}
diff --git a/x-pack/legacy/plugins/dashboard_mode/public/dashboard_viewer.js b/x-pack/legacy/plugins/dashboard_mode/public/dashboard_viewer.js
index 8ca023aa90cf1..e0e49fe59daf4 100644
--- a/x-pack/legacy/plugins/dashboard_mode/public/dashboard_viewer.js
+++ b/x-pack/legacy/plugins/dashboard_mode/public/dashboard_viewer.js
@@ -37,7 +37,7 @@ import 'plugins/kibana/dashboard/legacy';
 import { npStart } from 'ui/new_platform';
 import { localApplicationService } from 'plugins/kibana/local_application_service';
 
-import { showAppRedirectNotification } from 'ui/notify';
+import { showAppRedirectNotification } from '../../../../../src/plugins/kibana_legacy/public';
 import { DashboardConstants, createDashboardEditUrl } from 'plugins/kibana/dashboard';
 
 npStart.plugins.kibanaLegacy.dashboardConfig.turnHideWriteControlsOn();
@@ -51,7 +51,9 @@ chrome.setRootController('kibana', function() {
   npStart.core.chrome.navLinks.showOnly('kibana:dashboard');
 });
 
-uiModules.get('kibana').run(showAppRedirectNotification);
+uiModules
+  .get('kibana')
+  .run($location => showAppRedirectNotification($location, npStart.core.notifications.toasts));
 
 /**
  * If there is a configured `kibana.defaultAppId`, and it is a dashboard ID, we'll
diff --git a/x-pack/legacy/plugins/graph/public/application.ts b/x-pack/legacy/plugins/graph/public/application.ts
index 80a797b7f0724..7bd18f841b478 100644
--- a/x-pack/legacy/plugins/graph/public/application.ts
+++ b/x-pack/legacy/plugins/graph/public/application.ts
@@ -24,7 +24,6 @@ import {
   configureAppAngularModule,
   createTopNavDirective,
   createTopNavHelper,
-  addAppRedirectMessageToUrl,
 } from './legacy_imports';
 // @ts-ignore
 import { initGraphApp } from './app';
@@ -37,6 +36,7 @@ import { checkLicense } from '../../../../plugins/graph/common/check_license';
 import { NavigationPublicPluginStart as NavigationStart } from '../../../../../src/plugins/navigation/public';
 import { createSavedWorkspacesLoader } from './services/persistence/saved_workspace_loader';
 import { Storage } from '../../../../../src/plugins/kibana_utils/public';
+import { addAppRedirectMessageToUrl } from '../../../../../src/plugins/kibana_legacy/public';
 
 /**
  * These are dependencies of the Graph app besides the base dependencies
diff --git a/x-pack/legacy/plugins/graph/public/legacy_imports.ts b/x-pack/legacy/plugins/graph/public/legacy_imports.ts
index ac518d34551db..84fafdb580abe 100644
--- a/x-pack/legacy/plugins/graph/public/legacy_imports.ts
+++ b/x-pack/legacy/plugins/graph/public/legacy_imports.ts
@@ -8,6 +8,4 @@ import 'ace';
 
 // @ts-ignore
 export { createTopNavDirective, createTopNavHelper } from 'ui/kbn_top_nav/kbn_top_nav';
-// @ts-ignore
-export { addAppRedirectMessageToUrl } from 'ui/notify';
 export { configureAppAngularModule } from '../../../../../src/plugins/kibana_legacy/public';
diff --git a/x-pack/legacy/plugins/index_lifecycle_management/__jest__/extend_index_management.test.js b/x-pack/legacy/plugins/index_lifecycle_management/__jest__/extend_index_management.test.js
index bcbae7e093f46..d2619778617c3 100644
--- a/x-pack/legacy/plugins/index_lifecycle_management/__jest__/extend_index_management.test.js
+++ b/x-pack/legacy/plugins/index_lifecycle_management/__jest__/extend_index_management.test.js
@@ -27,8 +27,10 @@ initHttp(axios.create({ adapter: axiosXhrAdapter }), path => path);
 initUiMetric(() => () => {});
 
 jest.mock('ui/new_platform');
-jest.mock('../../index_management/public', async () => {
-  const { indexManagementMock } = await import('../../index_management/public/mocks.ts');
+jest.mock('../../../../plugins/index_management/public', async () => {
+  const { indexManagementMock } = await import(
+    '../../../../plugins/index_management/public/mocks.ts'
+  );
   return indexManagementMock.createSetup();
 });
 
diff --git a/x-pack/legacy/plugins/index_lifecycle_management/plugin.ts b/x-pack/legacy/plugins/index_lifecycle_management/plugin.ts
index 8d7f937039203..38d1bea45ce07 100644
--- a/x-pack/legacy/plugins/index_lifecycle_management/plugin.ts
+++ b/x-pack/legacy/plugins/index_lifecycle_management/plugin.ts
@@ -41,14 +41,14 @@ export class Plugin {
     registerPoliciesRoutes(server);
     registerTemplatesRoutes(server);
 
-    const serverPlugins = server.plugins as any;
+    const serverPlugins = server.newPlatform.setup.plugins as any;
 
     if (
       server.config().get('xpack.ilm.ui.enabled') &&
-      serverPlugins.index_management &&
-      serverPlugins.index_management.addIndexManagementDataEnricher
+      serverPlugins.indexManagement &&
+      serverPlugins.indexManagement.indexDataEnricher
     ) {
-      serverPlugins.index_management.addIndexManagementDataEnricher(indexLifecycleDataEnricher);
+      serverPlugins.indexManagement.indexDataEnricher.add(indexLifecycleDataEnricher);
     }
   }
 }
diff --git a/x-pack/legacy/plugins/index_lifecycle_management/public/legacy.ts b/x-pack/legacy/plugins/index_lifecycle_management/public/legacy.ts
index 3c21a644c0f78..f7f924add2c51 100644
--- a/x-pack/legacy/plugins/index_lifecycle_management/public/legacy.ts
+++ b/x-pack/legacy/plugins/index_lifecycle_management/public/legacy.ts
@@ -20,7 +20,9 @@ import { addAllExtensions } from './np_ready/extend_index_management';
 if (chrome.getInjected('ilmUiEnabled')) {
   // We have to initialize this outside of the NP lifecycle, otherwise these extensions won't
   // be available in Index Management unless the user visits ILM first.
-  addAllExtensions();
+  if ((npSetup.plugins as any).indexManagement) {
+    addAllExtensions((npSetup.plugins as any).indexManagement.extensionsService);
+  }
 
   // This method handles the cleanup needed when route is scope is destroyed.  It also prevents Angular
   // from destroying scope when route changes and both old route and new route are this same route.
diff --git a/x-pack/legacy/plugins/index_lifecycle_management/public/np_ready/application/sections/policy_table/components/policy_table/policy_table.js b/x-pack/legacy/plugins/index_lifecycle_management/public/np_ready/application/sections/policy_table/components/policy_table/policy_table.js
index 83d32eae1097d..903161fe094fc 100644
--- a/x-pack/legacy/plugins/index_lifecycle_management/public/np_ready/application/sections/policy_table/components/policy_table/policy_table.js
+++ b/x-pack/legacy/plugins/index_lifecycle_management/public/np_ready/application/sections/policy_table/components/policy_table/policy_table.js
@@ -37,7 +37,7 @@ import {
 
 import { RIGHT_ALIGNMENT } from '@elastic/eui/lib/services';
 
-import { getIndexListUri } from '../../../../../../../../index_management/public/application/services/navigation';
+import { getIndexListUri } from '../../../../../../../../../../plugins/index_management/public';
 import { BASE_PATH } from '../../../../../../../common/constants';
 import { UIM_EDIT_CLICK } from '../../../../constants';
 import { getPolicyPath } from '../../../../services/navigation';
diff --git a/x-pack/legacy/plugins/index_lifecycle_management/public/np_ready/extend_index_management/index.js b/x-pack/legacy/plugins/index_lifecycle_management/public/np_ready/extend_index_management/index.js
index 0e662b78b2c18..69658d31695bc 100644
--- a/x-pack/legacy/plugins/index_lifecycle_management/public/np_ready/extend_index_management/index.js
+++ b/x-pack/legacy/plugins/index_lifecycle_management/public/np_ready/extend_index_management/index.js
@@ -9,7 +9,6 @@ import { get, every, any } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import { EuiSearchBar } from '@elastic/eui';
 
-import { extensionsService } from '../../../../index_management/public';
 import { init as initUiMetric } from '../application/services/ui_metric';
 import { init as initNotification } from '../application/services/notification';
 import { retryLifecycleForIndex } from '../application/services/api';
@@ -238,7 +237,7 @@ export const ilmFilterExtension = indices => {
   }
 };
 
-export const addAllExtensions = () => {
+export const addAllExtensions = extensionsService => {
   extensionsService.addAction(retryLifecycleActionExtension);
   extensionsService.addAction(removeLifecyclePolicyActionExtension);
   extensionsService.addAction(addLifecyclePolicyActionExtension);
diff --git a/x-pack/legacy/plugins/index_management/index.ts b/x-pack/legacy/plugins/index_management/index.ts
index c92b38c0d94be..9eba98a526d2b 100644
--- a/x-pack/legacy/plugins/index_management/index.ts
+++ b/x-pack/legacy/plugins/index_management/index.ts
@@ -4,36 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { resolve } from 'path';
-import { Legacy } from 'kibana';
-import { PLUGIN } from './common/constants';
-import { plugin as initServerPlugin, Dependencies } from './server';
-
-export type ServerFacade = Legacy.Server;
-
 export function indexManagement(kibana: any) {
   return new kibana.Plugin({
-    id: PLUGIN.id,
+    id: 'index_management',
     configPrefix: 'xpack.index_management',
-    publicDir: resolve(__dirname, 'public'),
-    require: ['kibana', 'elasticsearch', 'xpack_main'],
-
-    uiExports: {
-      styleSheetPaths: resolve(__dirname, 'public/index.scss'),
-      managementSections: ['plugins/index_management'],
-    },
-
-    init(server: ServerFacade) {
-      const coreSetup = server.newPlatform.setup.core;
-      const coreInitializerContext = server.newPlatform.coreContext;
-      const pluginsSetup: Dependencies = {
-        licensing: server.newPlatform.setup.plugins.licensing as any,
-      };
-
-      const serverPlugin = initServerPlugin(coreInitializerContext as any);
-      const serverPublicApi = serverPlugin.setup(coreSetup, pluginsSetup);
-
-      server.expose('addIndexManagementDataEnricher', serverPublicApi.indexDataEnricher.add);
-    },
   });
 }
diff --git a/x-pack/legacy/plugins/index_management/public/index.html b/x-pack/legacy/plugins/index_management/public/index.html
deleted file mode 100644
index 0e9ac6fa0bc97..0000000000000
--- a/x-pack/legacy/plugins/index_management/public/index.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<kbn-management-app section="elasticsearch/index_management">
-  <div id="indexManagementReactRoot"></div>
-</kbn-management-app>
diff --git a/x-pack/legacy/plugins/index_management/public/shared_imports.ts b/x-pack/legacy/plugins/index_management/public/shared_imports.ts
deleted file mode 100644
index cbc4dde7448ff..0000000000000
--- a/x-pack/legacy/plugins/index_management/public/shared_imports.ts
+++ /dev/null
@@ -1,13 +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;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-export {
-  SendRequestConfig,
-  SendRequestResponse,
-  UseRequestConfig,
-  sendRequest,
-  useRequest,
-} from '../../../../../src/plugins/es_ui_shared/public/request/np_ready_request';
diff --git a/x-pack/legacy/plugins/ingest_manager/index.ts b/x-pack/legacy/plugins/ingest_manager/index.ts
index c20cc7225d780..7ed5599b234a3 100644
--- a/x-pack/legacy/plugins/ingest_manager/index.ts
+++ b/x-pack/legacy/plugins/ingest_manager/index.ts
@@ -3,6 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+import { resolve } from 'path';
 import {
   savedObjectMappings,
   OUTPUT_SAVED_OBJECT_TYPE,
@@ -18,6 +19,7 @@ import {
 export function ingestManager(kibana: any) {
   return new kibana.Plugin({
     id: 'ingestManager',
+    publicDir: resolve(__dirname, '../../../plugins/ingest_manager/public'),
     uiExports: {
       savedObjectSchemas: {
         [AGENT_CONFIG_SAVED_OBJECT_TYPE]: {
diff --git a/x-pack/legacy/plugins/monitoring/server/telemetry_collection/get_all_stats.test.ts b/x-pack/legacy/plugins/monitoring/server/telemetry_collection/get_all_stats.test.ts
index 470642f9dd8a3..dcc7924fe171a 100644
--- a/x-pack/legacy/plugins/monitoring/server/telemetry_collection/get_all_stats.test.ts
+++ b/x-pack/legacy/plugins/monitoring/server/telemetry_collection/get_all_stats.test.ts
@@ -5,7 +5,7 @@
  */
 
 import sinon from 'sinon';
-import { addStackStats, getAllStats, handleAllStats } from './get_all_stats';
+import { getStackStats, getAllStats, handleAllStats } from './get_all_stats';
 import { ESClusterStats } from './get_es_stats';
 import { KibanaStats } from './get_kibana_stats';
 import { ClustersHighLevelStats } from './get_high_level_stats';
@@ -223,7 +223,8 @@ describe('get_all_stats', () => {
         beats: {},
       });
 
-      expect(clusters).toStrictEqual(expectedClusters);
+      const [a, b, c] = expectedClusters;
+      expect(clusters).toStrictEqual([a, b, { ...c, stack_stats: {} }]);
     });
 
     it('handles no clusters response', () => {
@@ -233,9 +234,8 @@ describe('get_all_stats', () => {
     });
   });
 
-  describe('addStackStats', () => {
+  describe('getStackStats', () => {
     it('searches for clusters', () => {
-      const cluster = { cluster_uuid: 'a' };
       const stats = {
         a: {
           count: 2,
@@ -250,9 +250,7 @@ describe('get_all_stats', () => {
         },
       };
 
-      addStackStats(cluster as ESClusterStats, stats, 'xyz');
-
-      expect((cluster as any).stack_stats.xyz).toStrictEqual(stats.a);
+      expect(getStackStats('a', stats, 'xyz')).toStrictEqual({ xyz: stats.a });
     });
   });
 });
diff --git a/x-pack/legacy/plugins/monitoring/server/telemetry_collection/get_all_stats.ts b/x-pack/legacy/plugins/monitoring/server/telemetry_collection/get_all_stats.ts
index aa5e937387daf..a6ed5254dabd5 100644
--- a/x-pack/legacy/plugins/monitoring/server/telemetry_collection/get_all_stats.ts
+++ b/x-pack/legacy/plugins/monitoring/server/telemetry_collection/get_all_stats.ts
@@ -61,38 +61,31 @@ export function handleAllStats(
   }
 ) {
   return clusters.map(cluster => {
-    // if they are using Kibana or Logstash, then add it to the cluster details under cluster.stack_stats
-    addStackStats(cluster, kibana, KIBANA_SYSTEM_ID);
-    addStackStats(cluster, logstash, LOGSTASH_SYSTEM_ID);
-    addStackStats(cluster, beats, BEATS_SYSTEM_ID);
-    mergeXPackStats(cluster, kibana, 'graph_workspace', 'graph'); // copy graph_workspace info out of kibana, merge it into stack_stats.xpack.graph
+    const stats = {
+      ...cluster,
+      stack_stats: {
+        ...cluster.stack_stats,
+        // if they are using Kibana or Logstash, then add it to the cluster details under cluster.stack_stats
+        ...getStackStats(cluster.cluster_uuid, kibana, KIBANA_SYSTEM_ID),
+        ...getStackStats(cluster.cluster_uuid, logstash, LOGSTASH_SYSTEM_ID),
+        ...getStackStats(cluster.cluster_uuid, beats, BEATS_SYSTEM_ID),
+      },
+    };
 
-    return cluster;
+    mergeXPackStats(stats, kibana, 'graph_workspace', 'graph'); // copy graph_workspace info out of kibana, merge it into stack_stats.xpack.graph
+
+    return stats;
   });
 }
 
-/**
- * Add product data to the {@code cluster}, only if it exists for the current {@code cluster}.
- *
- * @param {Object} cluster The current Elasticsearch cluster stats
- * @param {Object} allProductStats Product stats, keyed by Cluster UUID
- * @param {String} product The product name being added (e.g., 'kibana' or 'logstash')
- */
-export function addStackStats<T extends { [clusterUuid: string]: K }, K>(
-  cluster: ESClusterStats & { stack_stats?: { [product: string]: K } },
+export function getStackStats<T extends { [clusterUuid: string]: K }, K>(
+  clusterUuid: string,
   allProductStats: T,
   product: string
 ) {
-  const productStats = allProductStats[cluster.cluster_uuid];
-
+  const productStats = allProductStats[clusterUuid];
   // Don't add it if they're not using (or configured to report stats) this product for this cluster
-  if (productStats) {
-    if (!cluster.stack_stats) {
-      cluster.stack_stats = {};
-    }
-
-    cluster.stack_stats[product] = productStats;
-  }
+  return productStats ? { [product]: productStats } : {};
 }
 
 export function mergeXPackStats<T extends { [clusterUuid: string]: unknown }>(
diff --git a/x-pack/legacy/plugins/monitoring/server/telemetry_collection/get_es_stats.ts b/x-pack/legacy/plugins/monitoring/server/telemetry_collection/get_es_stats.ts
index f0ae1163d3f52..2f2fffd3f0823 100644
--- a/x-pack/legacy/plugins/monitoring/server/telemetry_collection/get_es_stats.ts
+++ b/x-pack/legacy/plugins/monitoring/server/telemetry_collection/get_es_stats.ts
@@ -48,11 +48,6 @@ export function fetchElasticsearchStats(
       'hits.hits._source.timestamp',
       'hits.hits._source.cluster_name',
       'hits.hits._source.version',
-      'hits.hits._source.license.status', // license data only includes necessary fields to drive UI
-      'hits.hits._source.license.type',
-      'hits.hits._source.license.issue_date',
-      'hits.hits._source.license.expiry_date',
-      'hits.hits._source.license.expiry_date_in_millis',
       'hits.hits._source.cluster_stats',
       'hits.hits._source.stack_stats',
     ],
@@ -79,7 +74,11 @@ export function fetchElasticsearchStats(
 
 export interface ESClusterStats {
   cluster_uuid: string;
-  type: 'cluster_stats';
+  cluster_name: string;
+  timestamp: string;
+  version: string;
+  cluster_stats: object;
+  stack_stats?: object;
 }
 
 /**
diff --git a/x-pack/legacy/plugins/monitoring/server/telemetry_collection/get_licenses.test.ts b/x-pack/legacy/plugins/monitoring/server/telemetry_collection/get_licenses.test.ts
new file mode 100644
index 0000000000000..bb8326ce0b63a
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/server/telemetry_collection/get_licenses.test.ts
@@ -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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import sinon from 'sinon';
+import { getLicenses, handleLicenses, fetchLicenses } from './get_licenses';
+
+describe('get_licenses', () => {
+  const callWith = sinon.stub();
+  const size = 123;
+  const server = {
+    config: sinon.stub().returns({
+      get: sinon
+        .stub()
+        .withArgs('xpack.monitoring.elasticsearch.index_pattern')
+        .returns('.monitoring-es-N-*')
+        .withArgs('xpack.monitoring.max_bucket_size')
+        .returns(size),
+    }),
+  };
+  const response = {
+    hits: {
+      hits: [
+        { _id: 'abc', _source: { cluster_uuid: 'abc', license: { type: 'basic' } } },
+        { _id: 'xyz', _source: { cluster_uuid: 'xyz', license: { type: 'basic' } } },
+        { _id: '123', _source: { cluster_uuid: '123' } },
+      ],
+    },
+  };
+  const expectedClusters = response.hits.hits.map(hit => hit._source);
+  const clusterUuids = expectedClusters.map(cluster => ({ clusterUuid: cluster.cluster_uuid }));
+  const expectedLicenses = {
+    abc: { type: 'basic' },
+    xyz: { type: 'basic' },
+    '123': void 0,
+  };
+
+  describe('getLicenses', () => {
+    it('returns clusters', async () => {
+      callWith.withArgs('search').returns(Promise.resolve(response));
+
+      expect(
+        await getLicenses(clusterUuids, { server, callCluster: callWith } as any)
+      ).toStrictEqual(expectedLicenses);
+    });
+  });
+
+  describe('fetchLicenses', () => {
+    it('searches for clusters', async () => {
+      callWith.returns(response);
+
+      expect(
+        await fetchLicenses(
+          server,
+          callWith,
+          clusterUuids.map(({ clusterUuid }) => clusterUuid)
+        )
+      ).toStrictEqual(response);
+    });
+  });
+
+  describe('handleLicenses', () => {
+    // filterPath makes it easy to ignore anything unexpected because it will come back empty
+    it('handles unexpected response', () => {
+      const clusters = handleLicenses({} as any);
+
+      expect(clusters).toStrictEqual({});
+    });
+
+    it('handles valid response', () => {
+      const clusters = handleLicenses(response as any);
+
+      expect(clusters).toStrictEqual(expectedLicenses);
+    });
+
+    it('handles no hits response', () => {
+      const clusters = handleLicenses({ hits: { hits: [] } } as any);
+
+      expect(clusters).toStrictEqual({});
+    });
+  });
+});
diff --git a/x-pack/legacy/plugins/monitoring/server/telemetry_collection/get_licenses.ts b/x-pack/legacy/plugins/monitoring/server/telemetry_collection/get_licenses.ts
new file mode 100644
index 0000000000000..7364227e7dc92
--- /dev/null
+++ b/x-pack/legacy/plugins/monitoring/server/telemetry_collection/get_licenses.ts
@@ -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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  StatsCollectionConfig,
+  LicenseGetter,
+} from 'src/legacy/core_plugins/telemetry/server/collection_manager';
+import { SearchResponse } from 'elasticsearch';
+import { ESLicense } from 'src/legacy/core_plugins/telemetry/server/telemetry_collection/get_local_license';
+import { INDEX_PATTERN_ELASTICSEARCH } from '../../common/constants';
+
+/**
+ * Get statistics for all selected Elasticsearch clusters.
+ */
+export const getLicenses: LicenseGetter = async (clustersDetails, { server, callCluster }) => {
+  const clusterUuids = clustersDetails.map(({ clusterUuid }) => clusterUuid);
+  const response = await fetchLicenses(server, callCluster, clusterUuids);
+  return handleLicenses(response);
+};
+
+/**
+ * Fetch the Elasticsearch stats.
+ *
+ * @param {Object} server The server instance
+ * @param {function} callCluster The callWithRequest or callWithInternalUser handler
+ * @param {Array} clusterUuids Cluster UUIDs to limit the request against
+ *
+ * Returns the response for the aggregations to fetch details for the product.
+ */
+export function fetchLicenses(
+  server: StatsCollectionConfig['server'],
+  callCluster: StatsCollectionConfig['callCluster'],
+  clusterUuids: string[]
+) {
+  const config = server.config();
+  const params = {
+    index: INDEX_PATTERN_ELASTICSEARCH,
+    size: config.get('monitoring.ui.max_bucket_size'),
+    ignoreUnavailable: true,
+    filterPath: ['hits.hits._source.cluster_uuid', 'hits.hits._source.license'],
+    body: {
+      query: {
+        bool: {
+          filter: [
+            /*
+             * Note: Unlike most places, we don't care about the old _type: cluster_stats because it would NOT
+             * have the license in it (that used to be in the .monitoring-data-2 index in cluster_info)
+             */
+            { term: { type: 'cluster_stats' } },
+            { terms: { cluster_uuid: clusterUuids } },
+          ],
+        },
+      },
+      collapse: { field: 'cluster_uuid' },
+      sort: { timestamp: { order: 'desc' } },
+    },
+  };
+
+  return callCluster('search', params);
+}
+
+export interface ESClusterStatsWithLicense {
+  cluster_uuid: string;
+  type: 'cluster_stats';
+  license?: ESLicense;
+}
+
+/**
+ * Extract the cluster stats for each cluster.
+ */
+export function handleLicenses(response: SearchResponse<ESClusterStatsWithLicense>) {
+  const clusters = response.hits?.hits || [];
+
+  return clusters.reduce(
+    (acc, { _source }) => ({
+      ...acc,
+      [_source.cluster_uuid]: _source.license,
+    }),
+    {}
+  );
+}
diff --git a/x-pack/legacy/plugins/monitoring/server/telemetry_collection/register_monitoring_collection.ts b/x-pack/legacy/plugins/monitoring/server/telemetry_collection/register_monitoring_collection.ts
index f0fda5229cb5c..0b14eb05f796f 100644
--- a/x-pack/legacy/plugins/monitoring/server/telemetry_collection/register_monitoring_collection.ts
+++ b/x-pack/legacy/plugins/monitoring/server/telemetry_collection/register_monitoring_collection.ts
@@ -7,6 +7,7 @@
 import { telemetryCollectionManager } from '../../../../../../src/legacy/core_plugins/telemetry/server';
 import { getAllStats } from './get_all_stats';
 import { getClusterUuids } from './get_cluster_uuids';
+import { getLicenses } from './get_licenses';
 
 export function registerMonitoringCollection() {
   telemetryCollectionManager.setCollection({
@@ -15,5 +16,6 @@ export function registerMonitoringCollection() {
     priority: 2,
     statsGetter: getAllStats,
     clusterDetailsGetter: getClusterUuids,
+    licenseGetter: getLicenses,
   });
 }
diff --git a/x-pack/legacy/plugins/remote_clusters/index.ts b/x-pack/legacy/plugins/remote_clusters/index.ts
index 37b2224f8d7c2..439cb818d8a56 100644
--- a/x-pack/legacy/plugins/remote_clusters/index.ts
+++ b/x-pack/legacy/plugins/remote_clusters/index.ts
@@ -5,6 +5,8 @@
  */
 
 import { resolve } from 'path';
+import { Legacy } from 'kibana';
+
 import { PLUGIN } from './common';
 
 export function remoteClusters(kibana: any) {
@@ -28,7 +30,7 @@ export function remoteClusters(kibana: any) {
         enabled: Joi.boolean().default(true),
       }).default();
     },
-    isEnabled(config: any) {
+    isEnabled(config: Legacy.KibanaConfig) {
       return (
         config.get('xpack.remote_clusters.enabled') && config.get('xpack.index_management.enabled')
       );
diff --git a/x-pack/legacy/plugins/rollup/index.ts b/x-pack/legacy/plugins/rollup/index.ts
index 7548af23b3aae..2c8363cc397f4 100644
--- a/x-pack/legacy/plugins/rollup/index.ts
+++ b/x-pack/legacy/plugins/rollup/index.ts
@@ -40,7 +40,7 @@ export function rollup(kibana: any) {
     },
     init(server: any) {
       const { core: coreSetup, plugins } = server.newPlatform.setup;
-      const { usageCollection, metrics } = plugins;
+      const { usageCollection, metrics, indexManagement } = plugins;
 
       const rollupSetup = (plugins.rollup as unknown) as RollupSetup;
 
@@ -54,11 +54,11 @@ export function rollup(kibana: any) {
       rollupPluginInstance.setup(coreSetup, {
         usageCollection,
         metrics,
+        indexManagement,
         __LEGACY: {
           plugins: {
             xpack_main: server.plugins.xpack_main,
             rollup: server.plugins[PLUGIN.ID],
-            index_management: server.plugins.index_management,
           },
         },
       });
diff --git a/x-pack/legacy/plugins/rollup/public/legacy.ts b/x-pack/legacy/plugins/rollup/public/legacy.ts
index 64eb1f6436389..e3e663ac7b0f4 100644
--- a/x-pack/legacy/plugins/rollup/public/legacy.ts
+++ b/x-pack/legacy/plugins/rollup/public/legacy.ts
@@ -10,7 +10,6 @@ import { aggTypeFieldFilters } from 'ui/agg_types';
 import { addSearchStrategy } from '../../../../../src/plugins/data/public';
 import { RollupPlugin } from './plugin';
 import { setup as management } from '../../../../../src/legacy/core_plugins/management/public/legacy';
-import { extensionsService } from '../../index_management/public';
 
 const plugin = new RollupPlugin();
 
@@ -20,7 +19,6 @@ export const setup = plugin.setup(npSetup.core, {
     aggTypeFilters,
     aggTypeFieldFilters,
     addSearchStrategy,
-    indexManagementExtensions: extensionsService,
     managementLegacy: management,
   },
 });
diff --git a/x-pack/legacy/plugins/rollup/public/plugin.ts b/x-pack/legacy/plugins/rollup/public/plugin.ts
index 90d7e2d9d0191..a01383f4733ef 100644
--- a/x-pack/legacy/plugins/rollup/public/plugin.ts
+++ b/x-pack/legacy/plugins/rollup/public/plugin.ts
@@ -27,7 +27,7 @@ import {
 // @ts-ignore
 import { CRUD_APP_BASE_PATH } from './crud_app/constants';
 import { ManagementSetup } from '../../../../../src/plugins/management/public';
-import { IndexMgmtSetup } from '../../index_management/public';
+import { IndexMgmtSetup } from '../../../../plugins/index_management/public';
 // @ts-ignore
 import { setEsBaseAndXPackBase, setHttp } from './crud_app/services';
 import { setNotifications, setFatalErrors } from './kibana_services';
@@ -39,30 +39,28 @@ export interface RollupPluginSetupDependencies {
     aggTypeFieldFilters: AggTypeFieldFilters;
     addSearchStrategy: (searchStrategy: SearchStrategyProvider) => void;
     managementLegacy: ManagementSetupLegacy;
-    indexManagementExtensions: IndexMgmtSetup['extensionsService'];
   };
   home?: HomePublicPluginSetup;
   management: ManagementSetup;
+  indexManagement?: IndexMgmtSetup;
 }
 
 export class RollupPlugin implements Plugin {
   setup(
     core: CoreSetup,
     {
-      __LEGACY: {
-        aggTypeFilters,
-        aggTypeFieldFilters,
-        addSearchStrategy,
-        managementLegacy,
-        indexManagementExtensions,
-      },
+      __LEGACY: { aggTypeFilters, aggTypeFieldFilters, addSearchStrategy, managementLegacy },
       home,
       management,
+      indexManagement,
     }: RollupPluginSetupDependencies
   ) {
     setFatalErrors(core.fatalErrors);
-    indexManagementExtensions.addBadge(rollupBadgeExtension);
-    indexManagementExtensions.addToggle(rollupToggleExtension);
+
+    if (indexManagement) {
+      indexManagement.extensionsService.addBadge(rollupBadgeExtension);
+      indexManagement.extensionsService.addToggle(rollupToggleExtension);
+    }
 
     const isRollupIndexPatternsEnabled = core.uiSettings.get(CONFIG_ROLLUPS);
 
diff --git a/x-pack/legacy/plugins/rollup/server/plugin.ts b/x-pack/legacy/plugins/rollup/server/plugin.ts
index 52b1e31af4eb2..090cb8a47377a 100644
--- a/x-pack/legacy/plugins/rollup/server/plugin.ts
+++ b/x-pack/legacy/plugins/rollup/server/plugin.ts
@@ -9,6 +9,7 @@ import { i18n } from '@kbn/i18n';
 
 import { UsageCollectionSetup } from 'src/plugins/usage_collection/server';
 import { VisTypeTimeseriesSetup } from 'src/plugins/vis_type_timeseries/server';
+import { IndexMgmtSetup } from '../../../../plugins/index_management/server';
 import { registerLicenseChecker } from '../../../server/lib/register_license_checker';
 import { PLUGIN } from '../common';
 import { ServerShim, RouteDependencies } from './types';
@@ -38,10 +39,12 @@ export class RollupsServerPlugin implements Plugin<void, void, any, any> {
       __LEGACY: serverShim,
       usageCollection,
       metrics,
+      indexManagement,
     }: {
       __LEGACY: ServerShim;
       usageCollection?: UsageCollectionSetup;
       metrics?: VisTypeTimeseriesSetup;
+      indexManagement?: IndexMgmtSetup;
     }
   ) {
     const elasticsearch = await elasticsearchService.adminClient;
@@ -76,11 +79,8 @@ export class RollupsServerPlugin implements Plugin<void, void, any, any> {
         });
     }
 
-    if (
-      serverShim.plugins.index_management &&
-      serverShim.plugins.index_management.addIndexManagementDataEnricher
-    ) {
-      serverShim.plugins.index_management.addIndexManagementDataEnricher(rollupDataEnricher);
+    if (indexManagement && indexManagement.indexDataEnricher) {
+      indexManagement.indexDataEnricher.add(rollupDataEnricher);
     }
 
     if (metrics) {
diff --git a/x-pack/legacy/plugins/rollup/server/rollup_data_enricher.ts b/x-pack/legacy/plugins/rollup/server/rollup_data_enricher.ts
index 7c5e160c54a31..ad621f2d9ba80 100644
--- a/x-pack/legacy/plugins/rollup/server/rollup_data_enricher.ts
+++ b/x-pack/legacy/plugins/rollup/server/rollup_data_enricher.ts
@@ -4,14 +4,11 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-interface Index {
-  name: string;
-  [key: string]: unknown;
-}
+import { Index } from '../../../../plugins/index_management/server';
 
 export const rollupDataEnricher = async (indicesList: Index[], callWithRequest: any) => {
   if (!indicesList || !indicesList.length) {
-    return indicesList;
+    return Promise.resolve(indicesList);
   }
 
   const params = {
diff --git a/x-pack/legacy/plugins/rollup/server/types.ts b/x-pack/legacy/plugins/rollup/server/types.ts
index 62a4841133cff..bcc6770e9b8ee 100644
--- a/x-pack/legacy/plugins/rollup/server/types.ts
+++ b/x-pack/legacy/plugins/rollup/server/types.ts
@@ -11,7 +11,6 @@ export interface ServerShim {
   plugins: {
     xpack_main: XPackMainPlugin;
     rollup: any;
-    index_management: any;
   };
 }
 
diff --git a/x-pack/legacy/plugins/siem/cypress/integration/timeline_search_or_filter.spec.ts b/x-pack/legacy/plugins/siem/cypress/integration/timeline_search_or_filter.spec.ts
index c06fd69a558a4..f738ff792049a 100644
--- a/x-pack/legacy/plugins/siem/cypress/integration/timeline_search_or_filter.spec.ts
+++ b/x-pack/legacy/plugins/siem/cypress/integration/timeline_search_or_filter.spec.ts
@@ -24,6 +24,9 @@ describe('timeline search or filter KQL bar', () => {
 
     cy.get(SERVER_SIDE_EVENT_COUNT)
       .invoke('text')
-      .should('be.above', 0);
+      .then(strCount => {
+        const intCount = +strCount;
+        cy.wrap(intCount).should('be.above', 0);
+      });
   });
 });
diff --git a/x-pack/legacy/plugins/siem/cypress/integration/url_state.spec.ts b/x-pack/legacy/plugins/siem/cypress/integration/url_state.spec.ts
index cabdb98fa5b67..11c0562eb3638 100644
--- a/x-pack/legacy/plugins/siem/cypress/integration/url_state.spec.ts
+++ b/x-pack/legacy/plugins/siem/cypress/integration/url_state.spec.ts
@@ -236,7 +236,10 @@ describe('url state', () => {
 
     cy.get(SERVER_SIDE_EVENT_COUNT)
       .invoke('text')
-      .should('be.above', 0);
+      .then(strCount => {
+        const intCount = +strCount;
+        cy.wrap(intCount).should('be.above', 0);
+      });
 
     const bestTimelineName = 'The Best Timeline';
     addNameToTimeline(bestTimelineName);
diff --git a/x-pack/legacy/plugins/siem/cypress/tasks/hosts/authentications.ts b/x-pack/legacy/plugins/siem/cypress/tasks/hosts/authentications.ts
index f5f15150e8ac3..ce3767a340376 100644
--- a/x-pack/legacy/plugins/siem/cypress/tasks/hosts/authentications.ts
+++ b/x-pack/legacy/plugins/siem/cypress/tasks/hosts/authentications.ts
@@ -5,7 +5,11 @@
  */
 
 import { AUTHENTICATIONS_TABLE } from '../../screens/hosts/authentications';
+import { REFRESH_BUTTON } from '../../screens/siem_header';
 
 export const waitForAuthenticationsToBeLoaded = () => {
   cy.get(AUTHENTICATIONS_TABLE).should('exist');
+  cy.get(REFRESH_BUTTON)
+    .invoke('text')
+    .should('not.equal', 'Updating');
 };
diff --git a/x-pack/legacy/plugins/siem/cypress/tasks/hosts/uncommon_processes.ts b/x-pack/legacy/plugins/siem/cypress/tasks/hosts/uncommon_processes.ts
index c44249acdd964..a28a7df07c3f8 100644
--- a/x-pack/legacy/plugins/siem/cypress/tasks/hosts/uncommon_processes.ts
+++ b/x-pack/legacy/plugins/siem/cypress/tasks/hosts/uncommon_processes.ts
@@ -5,7 +5,11 @@
  */
 
 import { UNCOMMON_PROCESSES_TABLE } from '../../screens/hosts/uncommon_processes';
+import { REFRESH_BUTTON } from '../../screens/siem_header';
 
 export const waitForUncommonProcessesToBeLoaded = () => {
   cy.get(UNCOMMON_PROCESSES_TABLE).should('exist');
+  cy.get(REFRESH_BUTTON)
+    .invoke('text')
+    .should('not.equal', 'Updating');
 };
diff --git a/x-pack/legacy/plugins/siem/cypress/tasks/timeline.ts b/x-pack/legacy/plugins/siem/cypress/tasks/timeline.ts
index 76acdad990a7e..c218d5153356b 100644
--- a/x-pack/legacy/plugins/siem/cypress/tasks/timeline.ts
+++ b/x-pack/legacy/plugins/siem/cypress/tasks/timeline.ts
@@ -65,7 +65,10 @@ export const populateTimeline = () => {
   executeTimelineKQL(hostExistsQuery);
   cy.get(SERVER_SIDE_EVENT_COUNT)
     .invoke('text')
-    .should('be.above', 0);
+    .then(strCount => {
+      const intCount = +strCount;
+      cy.wrap(intCount).should('be.above', 0);
+    });
 };
 
 export const uncheckTimestampToggleField = () => {
diff --git a/x-pack/legacy/plugins/siem/public/components/fields_browser/header.test.tsx b/x-pack/legacy/plugins/siem/public/components/fields_browser/header.test.tsx
index 42689065354d0..2abc2fd1046e0 100644
--- a/x-pack/legacy/plugins/siem/public/components/fields_browser/header.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/fields_browser/header.test.tsx
@@ -6,11 +6,9 @@
 
 import { mount } from 'enzyme';
 import React from 'react';
-
 import { mockBrowserFields } from '../../containers/source/mock';
 import { TestProviders } from '../../mock';
 import { defaultHeaders } from '../timeline/body/column_headers/default_headers';
-
 import { Header } from './header';
 
 const timelineId = 'test';
diff --git a/x-pack/legacy/plugins/transform/public/app/lib/authorization/components/common.ts b/x-pack/legacy/plugins/transform/public/app/lib/authorization/components/common.ts
index 5aec2ac041db3..27556e0d673a8 100644
--- a/x-pack/legacy/plugins/transform/public/app/lib/authorization/components/common.ts
+++ b/x-pack/legacy/plugins/transform/public/app/lib/authorization/components/common.ts
@@ -21,19 +21,33 @@ export interface Privileges {
   missingPrivileges: MissingPrivileges;
 }
 
+function isPrivileges(arg: any): arg is Privileges {
+  return (
+    typeof arg === 'object' &&
+    arg !== null &&
+    arg.hasOwnProperty('hasAllPrivileges') &&
+    typeof arg.hasAllPrivileges === 'boolean' &&
+    arg.hasOwnProperty('missingPrivileges') &&
+    typeof arg.missingPrivileges === 'object' &&
+    arg.missingPrivileges !== null
+  );
+}
+
 export interface MissingPrivileges {
   [key: string]: string[] | undefined;
 }
 export const toArray = (value: string | string[]): string[] =>
   Array.isArray(value) ? value : [value];
 
-export const hasPrivilegeFactory = (privileges: Privileges) => (privilege: Privilege) => {
+export const hasPrivilegeFactory = (privileges: Privileges | undefined | null) => (
+  privilege: Privilege
+) => {
   const [section, requiredPrivilege] = privilege;
-  if (!privileges.missingPrivileges[section]) {
+  if (isPrivileges(privileges) && !privileges.missingPrivileges[section]) {
     // if the section does not exist in our missingPrivileges, everything is OK
     return true;
   }
-  if (privileges.missingPrivileges[section]!.length === 0) {
+  if (isPrivileges(privileges) && privileges.missingPrivileges[section]!.length === 0) {
     return true;
   }
   if (requiredPrivilege === '*') {
@@ -42,7 +56,9 @@ export const hasPrivilegeFactory = (privileges: Privileges) => (privilege: Privi
   }
   // If we require _some_ privilege, we make sure that the one
   // we require is *not* in the missingPrivilege array
-  return !privileges.missingPrivileges[section]!.includes(requiredPrivilege);
+  return (
+    isPrivileges(privileges) && !privileges.missingPrivileges[section]!.includes(requiredPrivilege)
+  );
 };
 
 // create the text for button's tooltips if the user
diff --git a/x-pack/legacy/plugins/uptime/public/hooks/use_telemetry.ts b/x-pack/legacy/plugins/uptime/public/hooks/use_telemetry.ts
index 15f276174e2cf..7eb18404decfd 100644
--- a/x-pack/legacy/plugins/uptime/public/hooks/use_telemetry.ts
+++ b/x-pack/legacy/plugins/uptime/public/hooks/use_telemetry.ts
@@ -22,13 +22,9 @@ const getApiPath = (page?: UptimePage) => {
 };
 
 const logPageLoad = async (fetch: HttpHandler, page?: UptimePage) => {
-  try {
-    await fetch(getApiPath(page), {
-      method: 'POST',
-    });
-  } catch (e) {
-    throw e;
-  }
+  await fetch(getApiPath(page), {
+    method: 'POST',
+  });
 };
 
 export const useUptimeTelemetry = (page?: UptimePage) => {
diff --git a/x-pack/legacy/plugins/uptime/server/lib/helper/index.ts b/x-pack/legacy/plugins/uptime/server/lib/helper/index.ts
index 0dcbc0a424b5e..1607c36f1d1b7 100644
--- a/x-pack/legacy/plugins/uptime/server/lib/helper/index.ts
+++ b/x-pack/legacy/plugins/uptime/server/lib/helper/index.ts
@@ -7,6 +7,5 @@
 export { getFilterClause } from './get_filter_clause';
 export { parseRelativeDate } from './get_histogram_interval';
 export { getHistogramIntervalFormatted } from './get_histogram_interval_formatted';
-export { parseFilterQuery } from './parse_filter_query';
 export { assertCloseTo } from './assert_close_to';
 export { objectValuesToArrays } from './object_to_array';
diff --git a/x-pack/legacy/plugins/uptime/server/lib/requests/get_ping_histogram.ts b/x-pack/legacy/plugins/uptime/server/lib/requests/get_ping_histogram.ts
index 3b448dc31659b..7b8ca4708255c 100644
--- a/x-pack/legacy/plugins/uptime/server/lib/requests/get_ping_histogram.ts
+++ b/x-pack/legacy/plugins/uptime/server/lib/requests/get_ping_histogram.ts
@@ -5,7 +5,7 @@
  */
 
 import { UMElasticsearchQueryFn } from '../adapters';
-import { parseFilterQuery, getFilterClause } from '../helper';
+import { getFilterClause } from '../helper';
 import { INDEX_NAMES, QUERY } from '../../../common/constants';
 import { HistogramQueryResult } from './types';
 import { HistogramResult } from '../../../common/types';
@@ -27,7 +27,7 @@ export const getPingHistogram: UMElasticsearchQueryFn<
   GetPingHistogramParams,
   HistogramResult
 > = async ({ callES, from, to, filters, monitorId, statusFilter }) => {
-  const boolFilters = parseFilterQuery(filters);
+  const boolFilters = filters ? JSON.parse(filters) : null;
   const additionalFilters = [];
   if (monitorId) {
     additionalFilters.push({ match: { 'monitor.id': monitorId } });
diff --git a/x-pack/legacy/plugins/uptime/server/lib/requests/get_snapshot_counts.ts b/x-pack/legacy/plugins/uptime/server/lib/requests/get_snapshot_counts.ts
index 6236971146015..8d84c0f4d6769 100644
--- a/x-pack/legacy/plugins/uptime/server/lib/requests/get_snapshot_counts.ts
+++ b/x-pack/legacy/plugins/uptime/server/lib/requests/get_snapshot_counts.ts
@@ -6,7 +6,7 @@
 
 import { UMElasticsearchQueryFn } from '../adapters';
 import { Snapshot } from '../../../common/runtime_types';
-import { QueryContext, MonitorGroupIterator } from './search';
+import { QueryContext } from './search';
 import { CONTEXT_DEFAULTS, INDEX_NAMES } from '../../../common/constants';
 
 export interface GetSnapshotCountParams {
@@ -16,49 +16,6 @@ export interface GetSnapshotCountParams {
   statusFilter?: string;
 }
 
-const fastStatusCount = async (context: QueryContext): Promise<Snapshot> => {
-  const params = {
-    index: INDEX_NAMES.HEARTBEAT,
-    body: {
-      size: 0,
-      query: { bool: { filter: await context.dateAndCustomFilters() } },
-      aggs: {
-        unique: {
-          // We set the precision threshold to 40k which is the max precision supported by cardinality
-          cardinality: { field: 'monitor.id', precision_threshold: 40000 },
-        },
-        down: {
-          filter: { range: { 'summary.down': { gt: 0 } } },
-          aggs: {
-            unique: { cardinality: { field: 'monitor.id', precision_threshold: 40000 } },
-          },
-        },
-      },
-    },
-  };
-
-  const statistics = await context.search(params);
-  const total = statistics.aggregations.unique.value;
-  const down = statistics.aggregations.down.unique.value;
-
-  return {
-    total,
-    down,
-    up: total - down,
-  };
-};
-
-const slowStatusCount = async (context: QueryContext, status: string): Promise<number> => {
-  const downContext = context.clone();
-  downContext.statusFilter = status;
-  const iterator = new MonitorGroupIterator(downContext);
-  let count = 0;
-  while (await iterator.next()) {
-    count++;
-  }
-  return count;
-};
-
 export const getSnapshotCount: UMElasticsearchQueryFn<GetSnapshotCountParams, Snapshot> = async ({
   callES,
   dateRangeStart,
@@ -81,18 +38,7 @@ export const getSnapshotCount: UMElasticsearchQueryFn<GetSnapshotCountParams, Sn
   );
 
   // Calculate the total, up, and down counts.
-  const counts = await fastStatusCount(context);
-
-  // Check if the last count was accurate, if not, we need to perform a slower count with the
-  // MonitorGroupsIterator.
-  if (!(await context.hasTimespan())) {
-    // Figure out whether 'up' or 'down' is more common. It's faster to count the lower cardinality
-    // one then use subtraction to figure out its opposite.
-    const [leastCommonStatus, mostCommonStatus]: Array<'up' | 'down'> =
-      counts.up > counts.down ? ['down', 'up'] : ['up', 'down'];
-    counts[leastCommonStatus] = await slowStatusCount(context, leastCommonStatus);
-    counts[mostCommonStatus] = counts.total - counts[leastCommonStatus];
-  }
+  const counts = await statusCount(context);
 
   return {
     total: statusFilter ? counts[statusFilter] : counts.total,
@@ -100,3 +46,139 @@ export const getSnapshotCount: UMElasticsearchQueryFn<GetSnapshotCountParams, Sn
     down: statusFilter === 'up' ? 0 : counts.down,
   };
 };
+
+const statusCount = async (context: QueryContext): Promise<Snapshot> => {
+  const res = await context.search({
+    index: INDEX_NAMES.HEARTBEAT,
+    body: statusCountBody(await context.dateAndCustomFilters()),
+  });
+
+  return res.aggregations.counts.value;
+};
+
+const statusCountBody = (filters: any): any => {
+  return {
+    size: 0,
+    query: {
+      bool: {
+        filter: [
+          {
+            exists: {
+              field: 'summary',
+            },
+          },
+          filters,
+        ],
+      },
+    },
+    aggs: {
+      counts: {
+        scripted_metric: {
+          init_script: 'state.locStatus = new HashMap(); state.totalDocs = 0;',
+          map_script: `
+          def loc = doc["observer.geo.name"].size() == 0 ? "" : doc["observer.geo.name"][0];
+
+          // One concern here is memory since we could build pretty gigantic maps. I've opted to
+          // stick to a simple <String,String> map to reduce memory overhead. This means we do
+          // a little string parsing to treat these strings as records that stay lexicographically
+          // sortable (which is important later).
+          // We encode the ID and location as $id.len:$id$loc
+          String id = doc["monitor.id"][0];
+          String idLenDelim = Integer.toHexString(id.length()) + ":" + id;
+          String idLoc = loc == null ? idLenDelim : idLenDelim + loc;
+          
+          String status = doc["summary.down"][0] > 0 ? "d" : "u";
+          String timeAndStatus = doc["@timestamp"][0].toInstant().toEpochMilli().toString() + status;
+          state.locStatus[idLoc] = timeAndStatus;
+          state.totalDocs++;
+        `,
+          combine_script: `
+          return state;
+        `,
+          reduce_script: `
+          // Use a treemap since it's traversable in sorted order.
+          // This is important later.
+          TreeMap locStatus = new TreeMap();
+          long totalDocs = 0;
+          int uniqueIds = 0;
+          for (state in states) {
+            totalDocs += state.totalDocs;
+            for (entry in state.locStatus.entrySet()) {
+              // Update the value for the given key if we have a more recent check from this location.
+              locStatus.merge(entry.getKey(), entry.getValue(), (a,b) -> a.compareTo(b) > 0 ? a : b)
+            }
+          }
+          
+          HashMap locTotals = new HashMap();
+          int total = 0;
+          int down = 0;
+          String curId = "";
+          boolean curIdDown = false;
+          // We now iterate through our tree map in order, which means records for a given ID
+          // always are encountered one after the other. This saves us having to make an intermediate
+          // map.
+          for (entry in locStatus.entrySet()) {
+            String idLoc = entry.getKey();
+            String timeStatus = entry.getValue();
+
+            // Parse the length delimited id/location strings described in the map section
+            int colonIndex = idLoc.indexOf(":");
+            int idEnd = Integer.parseInt(idLoc.substring(0, colonIndex), 16) + colonIndex + 1;
+            String id = idLoc.substring(colonIndex + 1, idEnd);
+            String loc = idLoc.substring(idEnd, idLoc.length());
+            String status = timeStatus.substring(timeStatus.length() - 1);
+            
+            // Here we increment counters for the up/down key per location
+            // We also create a new hashmap in locTotals if we've never seen this location
+            // before.
+            locTotals.compute(loc, (k,v) -> {
+              HashMap res = v;
+              if (v == null) {
+                res = new HashMap();
+                res.put('up', 0);
+                res.put('down', 0);
+              }
+              
+              if (status == 'u') {
+                res.up++;
+              } else {
+                res.down++;
+              }
+
+              return res;
+            });
+            
+            
+            // We've encountered a new ID
+            if (curId != id) {
+              total++;
+              curId = id;
+              if (status == "d") {
+                curIdDown = true;
+                down++;
+              } else {
+                curIdDown = false;
+              }
+            } else if (!curIdDown) {
+              if (status == "d") {
+                curIdDown = true;
+                down++;
+              } else {
+                curIdDown = false;
+              }
+            }
+          }
+          
+          Map result = new HashMap();
+          result.total = total;
+          result.location_totals = locTotals;
+          result.up = total - down;
+          result.down = down;
+          result.totalDocs = totalDocs;
+          return result;
+        `,
+        },
+      },
+    },
+  };
+};
diff --git a/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/__snapshots__/get_stats_with_xpack.test.ts.snap b/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/__snapshots__/get_stats_with_xpack.test.ts.snap
new file mode 100644
index 0000000000000..1a70504dc9391
--- /dev/null
+++ b/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/__snapshots__/get_stats_with_xpack.test.ts.snap
@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Telemetry Collection: Get Aggregated Stats OSS-like telemetry (no license nor X-Pack telemetry) 1`] = `
+Array [
+  Object {
+    "cluster_name": "test",
+    "cluster_stats": Object {},
+    "cluster_uuid": "test",
+    "collection": "local",
+    "stack_stats": Object {
+      "kibana": Object {
+        "count": 1,
+        "great": "googlymoogly",
+        "indices": 1,
+        "os": Object {
+          "platformReleases": Array [
+            Object {
+              "count": 1,
+              "platformRelease": "iv",
+            },
+          ],
+          "platforms": Array [
+            Object {
+              "count": 1,
+              "platform": "rocky",
+            },
+          ],
+        },
+        "plugins": Object {
+          "clouds": Object {
+            "chances": 95,
+          },
+          "localization": Object {
+            "integrities": Object {},
+            "labelsCount": 0,
+            "locale": "en",
+          },
+          "rain": Object {
+            "chances": 2,
+          },
+          "snow": Object {
+            "chances": 0,
+          },
+          "sun": Object {
+            "chances": 5,
+          },
+        },
+        "versions": Array [
+          Object {
+            "count": 1,
+            "version": "8675309",
+          },
+        ],
+      },
+    },
+    "version": "8.0.0",
+  },
+]
+`;
+
+exports[`Telemetry Collection: Get Aggregated Stats X-Pack telemetry (license + X-Pack) 1`] = `
+Array [
+  Object {
+    "cluster_name": "test",
+    "cluster_stats": Object {},
+    "cluster_uuid": "test",
+    "collection": "local",
+    "stack_stats": Object {
+      "kibana": Object {
+        "count": 1,
+        "great": "googlymoogly",
+        "indices": 1,
+        "os": Object {
+          "platformReleases": Array [
+            Object {
+              "count": 1,
+              "platformRelease": "iv",
+            },
+          ],
+          "platforms": Array [
+            Object {
+              "count": 1,
+              "platform": "rocky",
+            },
+          ],
+        },
+        "plugins": Object {
+          "clouds": Object {
+            "chances": 95,
+          },
+          "localization": Object {
+            "integrities": Object {},
+            "labelsCount": 0,
+            "locale": "en",
+          },
+          "rain": Object {
+            "chances": 2,
+          },
+          "snow": Object {
+            "chances": 0,
+          },
+          "sun": Object {
+            "chances": 5,
+          },
+        },
+        "versions": Array [
+          Object {
+            "count": 1,
+            "version": "8675309",
+          },
+        ],
+      },
+      "xpack": Object {},
+    },
+    "version": "8.0.0",
+  },
+]
+`;
diff --git a/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/__tests__/get_xpack.js b/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/__tests__/get_xpack.js
index eca130b4d7465..eb03701fd195b 100644
--- a/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/__tests__/get_xpack.js
+++ b/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/__tests__/get_xpack.js
@@ -8,42 +8,7 @@ import expect from '@kbn/expect';
 import sinon from 'sinon';
 
 import { TIMEOUT } from '../constants';
-import { getXPackLicense, getXPackUsage, getXPack, handleXPack } from '../get_xpack';
-
-function mockGetXPackLicense(callCluster, license, req) {
-  callCluster
-    .withArgs(req, 'transport.request', {
-      method: 'GET',
-      path: '/_license',
-      query: {
-        local: 'true',
-        accept_enterprise: 'true',
-      },
-    })
-    .returns(
-      license.then(
-        response => ({ license: response }),
-        () => {} // Catch error so that we don't emit UnhandledPromiseRejectionWarning for tests with invalid license
-      )
-    );
-
-  callCluster
-    .withArgs('transport.request', {
-      method: 'GET',
-      path: '/_license',
-      query: {
-        local: 'true',
-        accept_enterprise: 'true',
-      },
-    })
-    // conveniently wraps the passed in license object as { license: response }, like it really is
-    .returns(
-      license.then(
-        response => ({ license: response }),
-        () => {} // Catch error so that we don't emit UnhandledPromiseRejectionWarning for tests with invalid license
-      )
-    );
-}
+import { getXPackUsage } from '../get_xpack';
 
 function mockGetXPackUsage(callCluster, usage, req) {
   callCluster
@@ -67,31 +32,7 @@ function mockGetXPackUsage(callCluster, usage, req) {
     .returns(usage);
 }
 
-/**
- * Mock getXPack responses.
- *
- * @param {Function} callCluster Sinon function mock.
- * @param {Promise} license Promised license response.
- * @param {Promise} usage Promised usage response.
- * @param {Object} usage reqeust object.
- */
-export function mockGetXPack(callCluster, license, usage, req) {
-  mockGetXPackLicense(callCluster, license, req);
-  mockGetXPackUsage(callCluster, usage, req);
-}
-
 describe('get_xpack', () => {
-  describe('getXPackLicense', () => {
-    it('uses callCluster to get /_license API', async () => {
-      const response = { type: 'basic' };
-      const callCluster = sinon.stub();
-
-      mockGetXPackLicense(callCluster, Promise.resolve(response));
-
-      expect(await getXPackLicense(callCluster)).to.eql(response);
-    });
-  });
-
   describe('getXPackUsage', () => {
     it('uses callCluster to get /_xpack/usage API', () => {
       const response = Promise.resolve({});
@@ -102,48 +43,4 @@ describe('get_xpack', () => {
       expect(getXPackUsage(callCluster)).to.be(response);
     });
   });
-
-  describe('handleXPack', () => {
-    it('uses data as expected', () => {
-      const license = { fake: 'data' };
-      const usage = { also: 'fake', nested: { object: { data: [{ field: 1 }, { field: 2 }] } } };
-
-      expect(handleXPack(license, usage)).to.eql({ license, stack_stats: { xpack: usage } });
-    });
-  });
-
-  describe('getXPack', () => {
-    it('returns the formatted response object', async () => {
-      const license = { fancy: 'license' };
-      const xpack = { also: 'fancy' };
-
-      const callCluster = sinon.stub();
-
-      mockGetXPack(callCluster, Promise.resolve(license), Promise.resolve(xpack));
-
-      const data = await getXPack(callCluster);
-
-      expect(data).to.eql({ license, xpack });
-    });
-
-    it('returns empty object upon license failure', async () => {
-      const callCluster = sinon.stub();
-
-      mockGetXPack(callCluster, Promise.reject(new Error()), Promise.resolve({ also: 'fancy' }));
-
-      const data = await getXPack(callCluster);
-
-      expect(data).to.eql({});
-    });
-
-    it('returns empty object upon usage failure', async () => {
-      const callCluster = sinon.stub();
-
-      mockGetXPack(callCluster, Promise.resolve({ fancy: 'license' }), Promise.reject(new Error()));
-
-      const data = await getXPack(callCluster);
-
-      expect(data).to.eql({});
-    });
-  });
 });
diff --git a/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/constants.ts b/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/constants.ts
index c89fbe416a0cc..b6f1aabab95c4 100644
--- a/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/constants.ts
+++ b/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/constants.ts
@@ -7,4 +7,5 @@
 /**
  * The timeout used by each request, whenever a timeout can be specified.
  */
+
 export const TIMEOUT = '30s';
diff --git a/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/get_stats_with_xpack.test.ts b/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/get_stats_with_xpack.test.ts
new file mode 100644
index 0000000000000..b85cbd9661022
--- /dev/null
+++ b/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/get_stats_with_xpack.test.ts
@@ -0,0 +1,113 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { getStatsWithXpack } from './get_stats_with_xpack';
+
+const kibana = {
+  kibana: {
+    great: 'googlymoogly',
+    versions: [{ version: '8675309', count: 1 }],
+  },
+  kibana_stats: {
+    os: {
+      platform: 'rocky',
+      platformRelease: 'iv',
+    },
+  },
+  localization: {
+    locale: 'en',
+    labelsCount: 0,
+    integrities: {},
+  },
+  sun: { chances: 5 },
+  clouds: { chances: 95 },
+  rain: { chances: 2 },
+  snow: { chances: 0 },
+};
+
+const getMockServer = (getCluster = jest.fn()) => ({
+  log(tags: string[], message: string) {
+    // eslint-disable-next-line no-console
+    console.log({ tags, message });
+  },
+  config() {
+    return {
+      get(item: string) {
+        switch (item) {
+          case 'pkg.version':
+            return '8675309-snapshot';
+          default:
+            throw Error(`unexpected config.get('${item}') received.`);
+        }
+      },
+    };
+  },
+  plugins: {
+    elasticsearch: { getCluster },
+  },
+});
+
+const mockUsageCollection = (kibanaUsage = kibana) => ({
+  bulkFetch: () => kibanaUsage,
+  toObject: (data: any) => data,
+});
+
+describe('Telemetry Collection: Get Aggregated Stats', () => {
+  test('OSS-like telemetry (no license nor X-Pack telemetry)', async () => {
+    const callCluster = jest.fn(async (method: string, options: { path?: string }) => {
+      switch (method) {
+        case 'transport.request':
+          if (options.path === '/_license' || options.path === '/_xpack/usage') {
+            // eslint-disable-next-line no-throw-literal
+            throw { statusCode: 404 };
+          }
+          return {};
+        case 'info':
+          return { cluster_uuid: 'test', cluster_name: 'test', version: { number: '8.0.0' } };
+        default:
+          return {};
+      }
+    });
+    const usageCollection = mockUsageCollection();
+    const server = getMockServer();
+
+    const stats = await getStatsWithXpack([{ clusterUuid: '1234' }], {
+      callCluster,
+      usageCollection,
+      server,
+    } as any);
+    expect(stats.map(({ timestamp, ...rest }) => rest)).toMatchSnapshot();
+  });
+
+  test('X-Pack telemetry (license + X-Pack)', async () => {
+    const callCluster = jest.fn(async (method: string, options: { path?: string }) => {
+      switch (method) {
+        case 'transport.request':
+          if (options.path === '/_license') {
+            return {
+              license: { type: 'basic' },
+            };
+          }
+          if (options.path === '/_xpack/usage') {
+            return {};
+          }
+        case 'info':
+          return { cluster_uuid: 'test', cluster_name: 'test', version: { number: '8.0.0' } };
+        default:
+          return {};
+      }
+    });
+    const usageCollection = mockUsageCollection();
+    const server = getMockServer();
+
+    const stats = await getStatsWithXpack([{ clusterUuid: '1234' }], {
+      callCluster,
+      usageCollection,
+      server,
+    } as any);
+    expect(stats.map(({ timestamp, ...rest }) => rest)).toMatchSnapshot();
+  });
+});
diff --git a/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/get_stats_with_xpack.ts b/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/get_stats_with_xpack.ts
index 41076d96231c9..ea7465f66f120 100644
--- a/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/get_stats_with_xpack.ts
+++ b/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/get_stats_with_xpack.ts
@@ -4,19 +4,33 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// @ts-ignore
-import { getXPack } from './get_xpack';
-import { getLocalStats } from '../../../../../../src/legacy/core_plugins/telemetry/server/telemetry_collection';
 import { StatsGetter } from '../../../../../../src/legacy/core_plugins/telemetry/server/collection_manager';
+import {
+  getLocalStats,
+  TelemetryLocalStats,
+} from '../../../../../../src/legacy/core_plugins/telemetry/server/telemetry_collection/get_local_stats';
+import { getXPackUsage } from './get_xpack';
 
-export const getStatsWithXpack: StatsGetter = async function(clustersDetails, config) {
+export type TelemetryAggregatedStats = TelemetryLocalStats & {
+  stack_stats: { xpack?: object };
+};
+
+export const getStatsWithXpack: StatsGetter<TelemetryAggregatedStats> = async function(
+  clustersDetails,
+  config
+) {
   const { callCluster } = config;
   const clustersLocalStats = await getLocalStats(clustersDetails, config);
-  const { license, xpack } = await getXPack(callCluster);
+  const xpack = await getXPackUsage(callCluster).catch(() => undefined); // We want to still report something (and do not lose the license) even when this method fails.
 
   return clustersLocalStats.map(localStats => {
-    localStats.license = license;
-    localStats.stack_stats.xpack = xpack;
+    if (xpack) {
+      return {
+        ...localStats,
+        stack_stats: { ...localStats.stack_stats, xpack },
+      };
+    }
+
     return localStats;
   });
 };
diff --git a/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/get_xpack.js b/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/get_xpack.js
deleted file mode 100644
index aaeb890981aa1..0000000000000
--- a/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/get_xpack.js
+++ /dev/null
@@ -1,85 +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;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-import { TIMEOUT } from './constants';
-
-/**
- * Get the cluster stats from the connected cluster.
- *
- * This is the equivalent of GET /_license?local=true .
- *
- * Like any X-Pack related API, X-Pack must installed for this to work.
- *
- * @param {function} callCluster The callWithInternalUser handler (exposed for testing)
- * @return {Promise} The response from Elasticsearch.
- */
-export function getXPackLicense(callCluster) {
-  return callCluster('transport.request', {
-    method: 'GET',
-    path: '/_license',
-    query: {
-      // Fetching the local license is cheaper than getting it from the master and good enough
-      local: 'true',
-      // For versions >= 7.6 and < 8.0, this flag is needed otherwise 'platinum' is returned for 'enterprise' license.
-      accept_enterprise: 'true',
-    },
-  }).then(({ license }) => license);
-}
-
-/**
- * Get the cluster stats from the connected cluster.
- *
- * This is the equivalent of GET /_xpack/usage?master_timeout=${TIMEOUT}
- *
- * Like any X-Pack related API, X-Pack must installed for this to work.
- *
- * @param {function} callCluster The callWithInternalUser handler (exposed for testing)
- * @return {Promise} The response from Elasticsearch equivalent to GET /_cluster/stats.
- */
-export function getXPackUsage(callCluster) {
-  return callCluster('transport.request', {
-    method: 'GET',
-    path: '/_xpack/usage',
-    query: {
-      master_timeout: TIMEOUT,
-    },
-  });
-}
-
-/**
- * Combine the X-Pack responses into a single response as Monitoring does already.
- *
- * @param {Object} license The license returned from /_license
- * @param {Object} usage The usage details returned from /_xpack/usage
- * @return {Object} An object containing both the license and usage.
- */
-export function handleXPack(license, usage) {
-  return {
-    license,
-    stack_stats: {
-      xpack: usage,
-    },
-  };
-}
-
-/**
- * Combine all X-Pack requests as a singular request that is ignored upon failure.
- *
- * @param {function} callCluster The callWithInternalUser handler (exposed for testing)
- * @return {Promise}
- */
-export function getXPack(callCluster) {
-  return Promise.all([getXPackLicense(callCluster), getXPackUsage(callCluster)])
-    .then(([license, xpack]) => {
-      return {
-        license,
-        xpack,
-      };
-    })
-    .catch(() => {
-      return {};
-    });
-}
diff --git a/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/get_xpack.ts b/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/get_xpack.ts
new file mode 100644
index 0000000000000..9b69540007e5f
--- /dev/null
+++ b/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/get_xpack.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { CallCluster } from 'src/legacy/core_plugins/elasticsearch';
+import { TIMEOUT } from './constants';
+
+/**
+ * Get the cluster stats from the connected cluster.
+ *
+ * This is the equivalent of GET /_xpack/usage?master_timeout=${TIMEOUT}
+ *
+ * Like any X-Pack related API, X-Pack must installed for this to work.
+ */
+export function getXPackUsage(callCluster: CallCluster) {
+  return callCluster('transport.request', {
+    method: 'GET',
+    path: '/_xpack/usage',
+    query: {
+      master_timeout: TIMEOUT,
+    },
+  });
+}
diff --git a/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/register_xpack_collection.ts b/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/register_xpack_collection.ts
index 57faf2da90d09..04445d7bde7d7 100644
--- a/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/register_xpack_collection.ts
+++ b/x-pack/legacy/plugins/xpack_main/server/telemetry_collection/register_xpack_collection.ts
@@ -4,6 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { getLocalLicense } from '../../../../../../src/legacy/core_plugins/telemetry/server/telemetry_collection/get_local_license';
 import { telemetryCollectionManager } from '../../../../../../src/legacy/core_plugins/telemetry/server';
 import { getClusterUuids } from '../../../../../../src/legacy/core_plugins/telemetry/server/telemetry_collection';
 import { getStatsWithXpack } from './get_stats_with_xpack';
@@ -15,5 +16,6 @@ export function registerMonitoringCollection() {
     priority: 1,
     statsGetter: getStatsWithXpack,
     clusterDetailsGetter: getClusterUuids,
+    licenseGetter: getLocalLicense,
   });
 }
diff --git a/x-pack/package.json b/x-pack/package.json
index 551e466893f93..f76b0182ea228 100644
--- a/x-pack/package.json
+++ b/x-pack/package.json
@@ -117,7 +117,7 @@
     "cheerio": "0.22.0",
     "commander": "3.0.2",
     "copy-webpack-plugin": "^5.0.4",
-    "cypress": "^3.6.1",
+    "cypress": "^4.0.2",
     "cypress-multi-reporters": "^1.2.3",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
diff --git a/x-pack/plugins/apm/common/runtime_types/agent_configuration_intake_rt/index.test.ts b/x-pack/plugins/apm/common/runtime_types/agent_configuration_intake_rt/index.test.ts
new file mode 100644
index 0000000000000..4c9dc78eb41e9
--- /dev/null
+++ b/x-pack/plugins/apm/common/runtime_types/agent_configuration_intake_rt/index.test.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { agentConfigurationIntakeRt } from './index';
+import { isRight } from 'fp-ts/lib/Either';
+
+describe('agentConfigurationIntakeRt', () => {
+  it('is valid when required parameters are given', () => {
+    const config = {
+      service: {},
+      settings: {}
+    };
+
+    expect(isConfigValid(config)).toBe(true);
+  });
+
+  it('is valid when required and optional parameters are given', () => {
+    const config = {
+      service: { name: 'my-service', environment: 'my-environment' },
+      settings: {
+        transaction_sample_rate: 0.5,
+        capture_body: 'foo',
+        transaction_max_spans: 10
+      }
+    };
+
+    expect(isConfigValid(config)).toBe(true);
+  });
+
+  it('is invalid when required parameters are not given', () => {
+    const config = {};
+    expect(isConfigValid(config)).toBe(false);
+  });
+});
+
+function isConfigValid(config: any) {
+  return isRight(agentConfigurationIntakeRt.decode(config));
+}
diff --git a/x-pack/plugins/apm/common/runtime_types/agent_configuration_intake_rt/index.ts b/x-pack/plugins/apm/common/runtime_types/agent_configuration_intake_rt/index.ts
new file mode 100644
index 0000000000000..32a2832b5eaf3
--- /dev/null
+++ b/x-pack/plugins/apm/common/runtime_types/agent_configuration_intake_rt/index.ts
@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import * as t from 'io-ts';
+import { transactionSampleRateRt } from '../transaction_sample_rate_rt';
+import { transactionMaxSpansRt } from '../transaction_max_spans_rt';
+
+export const serviceRt = t.partial({
+  name: t.string,
+  environment: t.string
+});
+
+export const agentConfigurationIntakeRt = t.intersection([
+  t.partial({ agent_name: t.string }),
+  t.type({
+    service: serviceRt,
+    settings: t.partial({
+      transaction_sample_rate: transactionSampleRateRt,
+      capture_body: t.string,
+      transaction_max_spans: transactionMaxSpansRt
+    })
+  })
+]);
diff --git a/x-pack/plugins/apm/common/service_map.ts b/x-pack/plugins/apm/common/service_map.ts
index fbaa489c45039..528aec2f70ad9 100644
--- a/x-pack/plugins/apm/common/service_map.ts
+++ b/x-pack/plugins/apm/common/service_map.ts
@@ -21,3 +21,12 @@ export interface Connection {
   source: ConnectionNode;
   destination: ConnectionNode;
 }
+
+export interface ServiceNodeMetrics {
+  numInstances: number;
+  avgMemoryUsage: number | null;
+  avgCpuUsage: number | null;
+  avgTransactionDuration: number | null;
+  avgRequestsPerMinute: number | null;
+  avgErrorsPerMinute: number | null;
+}
diff --git a/x-pack/plugins/apm/server/lib/helpers/es_client.ts b/x-pack/plugins/apm/server/lib/helpers/es_client.ts
index 8ada02d085631..86eb1dba507f0 100644
--- a/x-pack/plugins/apm/server/lib/helpers/es_client.ts
+++ b/x-pack/plugins/apm/server/lib/helpers/es_client.ts
@@ -7,9 +7,10 @@
 /* eslint-disable no-console */
 import {
   IndexDocumentParams,
-  IndicesCreateParams,
   IndicesDeleteParams,
-  SearchParams
+  SearchParams,
+  IndicesCreateParams,
+  DeleteDocumentResponse
 } from 'elasticsearch';
 import { cloneDeep, isString, merge, uniqueId } from 'lodash';
 import { KibanaRequest } from 'src/core/server';
@@ -188,7 +189,7 @@ export function getESClient(
     index: <Body>(params: APMIndexDocumentParams<Body>) => {
       return withTime(() => callMethod('index', params));
     },
-    delete: (params: IndicesDeleteParams) => {
+    delete: (params: IndicesDeleteParams): Promise<DeleteDocumentResponse> => {
       return withTime(() => callMethod('delete', params));
     },
     indicesCreate: (params: IndicesCreateParams) => {
diff --git a/x-pack/plugins/apm/server/lib/service_map/get_service_map_service_node_info.ts b/x-pack/plugins/apm/server/lib/service_map/get_service_map_service_node_info.ts
index 6c4d540103cec..0fe825e8ace35 100644
--- a/x-pack/plugins/apm/server/lib/service_map/get_service_map_service_node_info.ts
+++ b/x-pack/plugins/apm/server/lib/service_map/get_service_map_service_node_info.ts
@@ -18,7 +18,6 @@ import {
   SERVICE_NODE_NAME
 } from '../../../common/elasticsearch_fieldnames';
 import { percentMemoryUsedScript } from '../metrics/by_agent/shared/memory';
-import { PromiseReturnType } from '../../../typings/common';
 
 interface Options {
   setup: Setup & SetupTimeRange;
@@ -32,10 +31,6 @@ interface TaskParameters {
   filter: ESFilter[];
 }
 
-export type ServiceNodeMetrics = PromiseReturnType<
-  typeof getServiceMapServiceNodeInfo
->;
-
 export async function getServiceMapServiceNodeInfo({
   serviceName,
   environment,
@@ -112,7 +107,10 @@ async function getTransactionMetrics({
   setup,
   filter,
   minutes
-}: TaskParameters) {
+}: TaskParameters): Promise<{
+  avgTransactionDuration: number | null;
+  avgRequestsPerMinute: number | null;
+}> {
   const { indices, client } = setup;
 
   const response = await client.search({
@@ -140,13 +138,16 @@ async function getTransactionMetrics({
   });
 
   return {
-    avgTransactionDuration: response.aggregations?.duration.value,
+    avgTransactionDuration: response.aggregations?.duration.value ?? null,
     avgRequestsPerMinute:
       response.hits.total.value > 0 ? response.hits.total.value / minutes : null
   };
 }
 
-async function getCpuMetrics({ setup, filter }: TaskParameters) {
+async function getCpuMetrics({
+  setup,
+  filter
+}: TaskParameters): Promise<{ avgCpuUsage: number | null }> {
   const { indices, client } = setup;
 
   const response = await client.search({
@@ -180,11 +181,14 @@ async function getCpuMetrics({ setup, filter }: TaskParameters) {
   });
 
   return {
-    avgCpuUsage: response.aggregations?.avgCpuUsage.value
+    avgCpuUsage: response.aggregations?.avgCpuUsage.value ?? null
   };
 }
 
-async function getMemoryMetrics({ setup, filter }: TaskParameters) {
+async function getMemoryMetrics({
+  setup,
+  filter
+}: TaskParameters): Promise<{ avgMemoryUsage: number | null }> {
   const { client, indices } = setup;
   const response = await client.search({
     index: indices['apm_oss.metricsIndices'],
@@ -221,11 +225,14 @@ async function getMemoryMetrics({ setup, filter }: TaskParameters) {
   });
 
   return {
-    avgMemoryUsage: response.aggregations?.avgMemoryUsage.value
+    avgMemoryUsage: response.aggregations?.avgMemoryUsage.value ?? null
   };
 }
 
-async function getNumInstances({ setup, filter }: TaskParameters) {
+async function getNumInstances({
+  setup,
+  filter
+}: TaskParameters): Promise<{ numInstances: number }> {
   const { client, indices } = setup;
   const response = await client.search({
     index: indices['apm_oss.transactionIndices'],
diff --git a/x-pack/plugins/apm/server/lib/services/get_service_node_metadata.ts b/x-pack/plugins/apm/server/lib/services/get_service_node_metadata.ts
index 7120d3bca6c25..ccd8b123e23e2 100644
--- a/x-pack/plugins/apm/server/lib/services/get_service_node_metadata.ts
+++ b/x-pack/plugins/apm/server/lib/services/get_service_node_metadata.ts
@@ -58,8 +58,8 @@ export async function getServiceNodeMetadata({
   const response = await client.search(query);
 
   return {
-    host: response.aggregations?.host.buckets[0].key || NOT_AVAILABLE_LABEL,
+    host: response.aggregations?.host.buckets[0]?.key || NOT_AVAILABLE_LABEL,
     containerId:
-      response.aggregations?.containerId.buckets[0].key || NOT_AVAILABLE_LABEL
+      response.aggregations?.containerId.buckets[0]?.key || NOT_AVAILABLE_LABEL
   };
 }
diff --git a/x-pack/plugins/apm/server/lib/settings/agent_configuration/__snapshots__/queries.test.ts.snap b/x-pack/plugins/apm/server/lib/settings/agent_configuration/__snapshots__/queries.test.ts.snap
index 542fdd99e2635..db34b4d5d20b5 100644
--- a/x-pack/plugins/apm/server/lib/settings/agent_configuration/__snapshots__/queries.test.ts.snap
+++ b/x-pack/plugins/apm/server/lib/settings/agent_configuration/__snapshots__/queries.test.ts.snap
@@ -1,6 +1,90 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`agent configuration queries fetches all environments 1`] = `
+exports[`agent configuration queries findExactConfiguration find configuration by service.environment 1`] = `
+Object {
+  "body": Object {
+    "query": Object {
+      "bool": Object {
+        "filter": Array [
+          Object {
+            "bool": Object {
+              "must_not": Array [
+                Object {
+                  "exists": Object {
+                    "field": "service.name",
+                  },
+                },
+              ],
+            },
+          },
+          Object {
+            "term": Object {
+              "service.environment": "bar",
+            },
+          },
+        ],
+      },
+    },
+  },
+  "index": "myIndex",
+}
+`;
+
+exports[`agent configuration queries findExactConfiguration find configuration by service.name 1`] = `
+Object {
+  "body": Object {
+    "query": Object {
+      "bool": Object {
+        "filter": Array [
+          Object {
+            "term": Object {
+              "service.name": "foo",
+            },
+          },
+          Object {
+            "bool": Object {
+              "must_not": Array [
+                Object {
+                  "exists": Object {
+                    "field": "service.environment",
+                  },
+                },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  },
+  "index": "myIndex",
+}
+`;
+
+exports[`agent configuration queries findExactConfiguration find configuration by service.name and service.environment 1`] = `
+Object {
+  "body": Object {
+    "query": Object {
+      "bool": Object {
+        "filter": Array [
+          Object {
+            "term": Object {
+              "service.name": "foo",
+            },
+          },
+          Object {
+            "term": Object {
+              "service.environment": "bar",
+            },
+          },
+        ],
+      },
+    },
+  },
+  "index": "myIndex",
+}
+`;
+
+exports[`agent configuration queries getAllEnvironments fetches all environments 1`] = `
 Object {
   "body": Object {
     "aggs": Object {
@@ -41,14 +125,79 @@ Object {
 }
 `;
 
-exports[`agent configuration queries fetches configurations 1`] = `
+exports[`agent configuration queries getExistingEnvironmentsForService fetches unavailable environments 1`] = `
+Object {
+  "body": Object {
+    "aggs": Object {
+      "environments": Object {
+        "terms": Object {
+          "field": "service.environment",
+          "missing": "ALL_OPTION_VALUE",
+          "size": 50,
+        },
+      },
+    },
+    "query": Object {
+      "bool": Object {
+        "filter": Array [
+          Object {
+            "term": Object {
+              "service.name": "foo",
+            },
+          },
+        ],
+      },
+    },
+    "size": 0,
+  },
+  "index": "myIndex",
+}
+`;
+
+exports[`agent configuration queries getServiceNames fetches service names 1`] = `
+Object {
+  "body": Object {
+    "aggs": Object {
+      "services": Object {
+        "terms": Object {
+          "field": "service.name",
+          "size": 50,
+        },
+      },
+    },
+    "query": Object {
+      "bool": Object {
+        "filter": Array [
+          Object {
+            "terms": Object {
+              "processor.event": Array [
+                "transaction",
+                "error",
+                "metric",
+              ],
+            },
+          },
+        ],
+      },
+    },
+    "size": 0,
+  },
+  "index": Array [
+    "myIndex",
+    "myIndex",
+    "myIndex",
+  ],
+}
+`;
+
+exports[`agent configuration queries listConfigurations fetches configurations 1`] = `
 Object {
   "index": "myIndex",
   "size": 200,
 }
 `;
 
-exports[`agent configuration queries fetches filtered configurations with an environment 1`] = `
+exports[`agent configuration queries searchConfigurations fetches filtered configurations with an environment 1`] = `
 Object {
   "body": Object {
     "query": Object {
@@ -60,9 +209,7 @@ Object {
               "boost": 2,
               "filter": Object {
                 "term": Object {
-                  "service.name": Object {
-                    "value": "foo",
-                  },
+                  "service.name": "foo",
                 },
               },
             },
@@ -72,9 +219,7 @@ Object {
               "boost": 1,
               "filter": Object {
                 "term": Object {
-                  "service.environment": Object {
-                    "value": "bar",
-                  },
+                  "service.environment": "bar",
                 },
               },
             },
@@ -109,7 +254,7 @@ Object {
 }
 `;
 
-exports[`agent configuration queries fetches filtered configurations without an environment 1`] = `
+exports[`agent configuration queries searchConfigurations fetches filtered configurations without an environment 1`] = `
 Object {
   "body": Object {
     "query": Object {
@@ -121,9 +266,7 @@ Object {
               "boost": 2,
               "filter": Object {
                 "term": Object {
-                  "service.name": Object {
-                    "value": "foo",
-                  },
+                  "service.name": "foo",
                 },
               },
             },
@@ -157,68 +300,3 @@ Object {
   "index": "myIndex",
 }
 `;
-
-exports[`agent configuration queries fetches service names 1`] = `
-Object {
-  "body": Object {
-    "aggs": Object {
-      "services": Object {
-        "terms": Object {
-          "field": "service.name",
-          "size": 50,
-        },
-      },
-    },
-    "query": Object {
-      "bool": Object {
-        "filter": Array [
-          Object {
-            "terms": Object {
-              "processor.event": Array [
-                "transaction",
-                "error",
-                "metric",
-              ],
-            },
-          },
-        ],
-      },
-    },
-    "size": 0,
-  },
-  "index": Array [
-    "myIndex",
-    "myIndex",
-    "myIndex",
-  ],
-}
-`;
-
-exports[`agent configuration queries fetches unavailable environments 1`] = `
-Object {
-  "body": Object {
-    "aggs": Object {
-      "environments": Object {
-        "terms": Object {
-          "field": "service.environment",
-          "missing": "ALL_OPTION_VALUE",
-          "size": 50,
-        },
-      },
-    },
-    "query": Object {
-      "bool": Object {
-        "filter": Array [
-          Object {
-            "term": Object {
-              "service.name": "foo",
-            },
-          },
-        ],
-      },
-    },
-    "size": 0,
-  },
-  "index": "myIndex",
-}
-`;
diff --git a/x-pack/plugins/apm/server/lib/settings/agent_configuration/configuration_types.d.ts b/x-pack/plugins/apm/server/lib/settings/agent_configuration/configuration_types.d.ts
index ea8f50c90c1d3..ddbe6892c5441 100644
--- a/x-pack/plugins/apm/server/lib/settings/agent_configuration/configuration_types.d.ts
+++ b/x-pack/plugins/apm/server/lib/settings/agent_configuration/configuration_types.d.ts
@@ -4,18 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export interface AgentConfiguration {
+import t from 'io-ts';
+import { agentConfigurationIntakeRt } from '../../../../common/runtime_types/agent_configuration_intake_rt';
+
+export type AgentConfigurationIntake = t.TypeOf<
+  typeof agentConfigurationIntakeRt
+>;
+export type AgentConfiguration = {
   '@timestamp': number;
   applied_by_agent?: boolean;
   etag?: string;
   agent_name?: string;
-  service: {
-    name?: string;
-    environment?: string;
-  };
-  settings: {
-    transaction_sample_rate?: number;
-    capture_body?: string;
-    transaction_max_spans?: number;
-  };
-}
+} & AgentConfigurationIntake;
diff --git a/x-pack/plugins/apm/server/lib/settings/agent_configuration/create_or_update_configuration.ts b/x-pack/plugins/apm/server/lib/settings/agent_configuration/create_or_update_configuration.ts
index 5a67f78de6f65..74fcc61dde863 100644
--- a/x-pack/plugins/apm/server/lib/settings/agent_configuration/create_or_update_configuration.ts
+++ b/x-pack/plugins/apm/server/lib/settings/agent_configuration/create_or_update_configuration.ts
@@ -6,19 +6,19 @@
 
 import hash from 'object-hash';
 import { Setup } from '../../helpers/setup_request';
-import { AgentConfiguration } from './configuration_types';
+import {
+  AgentConfiguration,
+  AgentConfigurationIntake
+} from './configuration_types';
 import { APMIndexDocumentParams } from '../../helpers/es_client';
 
 export async function createOrUpdateConfiguration({
   configurationId,
-  configuration,
+  configurationIntake,
   setup
 }: {
   configurationId?: string;
-  configuration: Omit<
-    AgentConfiguration,
-    '@timestamp' | 'applied_by_agent' | 'etag'
-  >;
+  configurationIntake: AgentConfigurationIntake;
   setup: Setup;
 }) {
   const { internalClient, indices } = setup;
@@ -27,15 +27,15 @@ export async function createOrUpdateConfiguration({
     refresh: true,
     index: indices.apmAgentConfigurationIndex,
     body: {
-      agent_name: configuration.agent_name,
+      agent_name: configurationIntake.agent_name,
       service: {
-        name: configuration.service.name,
-        environment: configuration.service.environment
+        name: configurationIntake.service.name,
+        environment: configurationIntake.service.environment
       },
-      settings: configuration.settings,
+      settings: configurationIntake.settings,
       '@timestamp': Date.now(),
       applied_by_agent: false,
-      etag: hash(configuration)
+      etag: hash(configurationIntake)
     }
   };
 
diff --git a/x-pack/plugins/apm/server/lib/settings/agent_configuration/find_exact_configuration.ts b/x-pack/plugins/apm/server/lib/settings/agent_configuration/find_exact_configuration.ts
new file mode 100644
index 0000000000000..eea409882f876
--- /dev/null
+++ b/x-pack/plugins/apm/server/lib/settings/agent_configuration/find_exact_configuration.ts
@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import {
+  SERVICE_NAME,
+  SERVICE_ENVIRONMENT
+} from '../../../../common/elasticsearch_fieldnames';
+import { Setup } from '../../helpers/setup_request';
+import { AgentConfiguration } from './configuration_types';
+import { ESSearchHit } from '../../../../typings/elasticsearch';
+
+export async function findExactConfiguration({
+  service,
+  setup
+}: {
+  service: AgentConfiguration['service'];
+  setup: Setup;
+}) {
+  const { internalClient, indices } = setup;
+
+  const serviceNameFilter = service.name
+    ? { term: { [SERVICE_NAME]: service.name } }
+    : { bool: { must_not: [{ exists: { field: SERVICE_NAME } }] } };
+
+  const environmentFilter = service.environment
+    ? { term: { [SERVICE_ENVIRONMENT]: service.environment } }
+    : { bool: { must_not: [{ exists: { field: SERVICE_ENVIRONMENT } }] } };
+
+  const params = {
+    index: indices.apmAgentConfigurationIndex,
+    body: {
+      query: {
+        bool: { filter: [serviceNameFilter, environmentFilter] }
+      }
+    }
+  };
+
+  const resp = await internalClient.search<AgentConfiguration, typeof params>(
+    params
+  );
+
+  return resp.hits.hits[0] as ESSearchHit<AgentConfiguration> | undefined;
+}
diff --git a/x-pack/plugins/apm/server/lib/settings/agent_configuration/get_agent_name_by_service.ts b/x-pack/plugins/apm/server/lib/settings/agent_configuration/get_agent_name_by_service.ts
index dccf8b110d082..a9af1f6174fd5 100644
--- a/x-pack/plugins/apm/server/lib/settings/agent_configuration/get_agent_name_by_service.ts
+++ b/x-pack/plugins/apm/server/lib/settings/agent_configuration/get_agent_name_by_service.ts
@@ -48,8 +48,6 @@ export async function getAgentNameByService({
   };
 
   const { aggregations } = await client.search(params);
-  const agentName = aggregations?.agent_names.buckets[0].key as
-    | string
-    | undefined;
-  return { agentName };
+  const agentName = aggregations?.agent_names.buckets[0]?.key;
+  return agentName as string | undefined;
 }
diff --git a/x-pack/plugins/apm/server/lib/settings/agent_configuration/queries.test.ts b/x-pack/plugins/apm/server/lib/settings/agent_configuration/queries.test.ts
index a82d148781ad8..b951b7f350eed 100644
--- a/x-pack/plugins/apm/server/lib/settings/agent_configuration/queries.test.ts
+++ b/x-pack/plugins/apm/server/lib/settings/agent_configuration/queries.test.ts
@@ -8,11 +8,12 @@ import { getAllEnvironments } from './get_environments/get_all_environments';
 import { getExistingEnvironmentsForService } from './get_environments/get_existing_environments_for_service';
 import { getServiceNames } from './get_service_names';
 import { listConfigurations } from './list_configurations';
-import { searchConfigurations } from './search';
+import { searchConfigurations } from './search_configurations';
 import {
   SearchParamsMock,
   inspectSearchParams
 } from '../../../../../../legacy/plugins/apm/public/utils/testHelpers';
+import { findExactConfiguration } from './find_exact_configuration';
 
 describe('agent configuration queries', () => {
   let mock: SearchParamsMock;
@@ -21,68 +22,117 @@ describe('agent configuration queries', () => {
     mock.teardown();
   });
 
-  it('fetches all environments', async () => {
-    mock = await inspectSearchParams(setup =>
-      getAllEnvironments({
-        serviceName: 'foo',
-        setup
-      })
-    );
+  describe('getAllEnvironments', () => {
+    it('fetches all environments', async () => {
+      mock = await inspectSearchParams(setup =>
+        getAllEnvironments({
+          serviceName: 'foo',
+          setup
+        })
+      );
 
-    expect(mock.params).toMatchSnapshot();
+      expect(mock.params).toMatchSnapshot();
+    });
   });
 
-  it('fetches unavailable environments', async () => {
-    mock = await inspectSearchParams(setup =>
-      getExistingEnvironmentsForService({
-        serviceName: 'foo',
-        setup
-      })
-    );
+  describe('getExistingEnvironmentsForService', () => {
+    it('fetches unavailable environments', async () => {
+      mock = await inspectSearchParams(setup =>
+        getExistingEnvironmentsForService({
+          serviceName: 'foo',
+          setup
+        })
+      );
 
-    expect(mock.params).toMatchSnapshot();
+      expect(mock.params).toMatchSnapshot();
+    });
   });
 
-  it('fetches service names', async () => {
-    mock = await inspectSearchParams(setup =>
-      getServiceNames({
-        setup
-      })
-    );
+  describe('getServiceNames', () => {
+    it('fetches service names', async () => {
+      mock = await inspectSearchParams(setup =>
+        getServiceNames({
+          setup
+        })
+      );
 
-    expect(mock.params).toMatchSnapshot();
+      expect(mock.params).toMatchSnapshot();
+    });
   });
 
-  it('fetches configurations', async () => {
-    mock = await inspectSearchParams(setup =>
-      listConfigurations({
-        setup
-      })
-    );
+  describe('listConfigurations', () => {
+    it('fetches configurations', async () => {
+      mock = await inspectSearchParams(setup =>
+        listConfigurations({
+          setup
+        })
+      );
 
-    expect(mock.params).toMatchSnapshot();
+      expect(mock.params).toMatchSnapshot();
+    });
   });
 
-  it('fetches filtered configurations without an environment', async () => {
-    mock = await inspectSearchParams(setup =>
-      searchConfigurations({
-        serviceName: 'foo',
-        setup
-      })
-    );
+  describe('searchConfigurations', () => {
+    it('fetches filtered configurations without an environment', async () => {
+      mock = await inspectSearchParams(setup =>
+        searchConfigurations({
+          service: {
+            name: 'foo'
+          },
+          setup
+        })
+      );
 
-    expect(mock.params).toMatchSnapshot();
+      expect(mock.params).toMatchSnapshot();
+    });
+
+    it('fetches filtered configurations with an environment', async () => {
+      mock = await inspectSearchParams(setup =>
+        searchConfigurations({
+          service: {
+            name: 'foo',
+            environment: 'bar'
+          },
+          setup
+        })
+      );
+
+      expect(mock.params).toMatchSnapshot();
+    });
   });
 
-  it('fetches filtered configurations with an environment', async () => {
-    mock = await inspectSearchParams(setup =>
-      searchConfigurations({
-        serviceName: 'foo',
-        environment: 'bar',
-        setup
-      })
-    );
+  describe('findExactConfiguration', () => {
+    it('find configuration by service.name', async () => {
+      mock = await inspectSearchParams(setup =>
+        findExactConfiguration({
+          service: { name: 'foo' },
+          setup
+        })
+      );
+
+      expect(mock.params).toMatchSnapshot();
+    });
+
+    it('find configuration by service.environment', async () => {
+      mock = await inspectSearchParams(setup =>
+        findExactConfiguration({
+          service: { environment: 'bar' },
+          setup
+        })
+      );
+
+      expect(mock.params).toMatchSnapshot();
+    });
+
+    it('find configuration by service.name and service.environment', async () => {
+      mock = await inspectSearchParams(setup =>
+        findExactConfiguration({
+          service: { name: 'foo', environment: 'bar' },
+          setup
+        })
+      );
 
-    expect(mock.params).toMatchSnapshot();
+      expect(mock.params).toMatchSnapshot();
+    });
   });
 });
diff --git a/x-pack/plugins/apm/server/lib/settings/agent_configuration/search.ts b/x-pack/plugins/apm/server/lib/settings/agent_configuration/search_configurations.ts
similarity index 68%
rename from x-pack/plugins/apm/server/lib/settings/agent_configuration/search.ts
rename to x-pack/plugins/apm/server/lib/settings/agent_configuration/search_configurations.ts
index 766baead006b6..9bbdc96a3a797 100644
--- a/x-pack/plugins/apm/server/lib/settings/agent_configuration/search.ts
+++ b/x-pack/plugins/apm/server/lib/settings/agent_configuration/search_configurations.ts
@@ -12,29 +12,39 @@ import { Setup } from '../../helpers/setup_request';
 import { AgentConfiguration } from './configuration_types';
 
 export async function searchConfigurations({
-  serviceName,
-  environment,
+  service,
   setup
 }: {
-  serviceName: string;
-  environment?: string;
+  service: AgentConfiguration['service'];
   setup: Setup;
 }) {
   const { internalClient, indices } = setup;
-  const environmentFilter = environment
+
+  // In the following `constant_score` is being used to disable IDF calculation (where frequency of a term influences scoring).
+  // Additionally a boost has been added to service.name to ensure it scores higher.
+  // If there is tie between a config with a matching service.name and a config with a matching environment, the config that matches service.name wins
+  const serviceNameFilter = service.name
+    ? [
+        {
+          constant_score: {
+            filter: { term: { [SERVICE_NAME]: service.name } },
+            boost: 2
+          }
+        }
+      ]
+    : [];
+
+  const environmentFilter = service.environment
     ? [
         {
           constant_score: {
-            filter: { term: { [SERVICE_ENVIRONMENT]: { value: environment } } },
+            filter: { term: { [SERVICE_ENVIRONMENT]: service.environment } },
             boost: 1
           }
         }
       ]
     : [];
 
-  // In the following `constant_score` is being used to disable IDF calculation (where frequency of a term influences scoring)
-  // Additionally a boost has been added to service.name to ensure it scores higher
-  // if there is tie between a config with a matching service.name and a config with a matching environment
   const params = {
     index: indices.apmAgentConfigurationIndex,
     body: {
@@ -42,12 +52,7 @@ export async function searchConfigurations({
         bool: {
           minimum_should_match: 2,
           should: [
-            {
-              constant_score: {
-                filter: { term: { [SERVICE_NAME]: { value: serviceName } } },
-                boost: 2
-              }
-            },
+            ...serviceNameFilter,
             ...environmentFilter,
             { bool: { must_not: [{ exists: { field: SERVICE_NAME } }] } },
             { bool: { must_not: [{ exists: { field: SERVICE_ENVIRONMENT } }] } }
diff --git a/x-pack/plugins/apm/server/routes/create_apm_api.ts b/x-pack/plugins/apm/server/routes/create_apm_api.ts
index f65e271389938..21392edbb2c48 100644
--- a/x-pack/plugins/apm/server/routes/create_apm_api.ts
+++ b/x-pack/plugins/apm/server/routes/create_apm_api.ts
@@ -23,11 +23,10 @@ import {
 import {
   agentConfigurationRoute,
   agentConfigurationSearchRoute,
-  createAgentConfigurationRoute,
   deleteAgentConfigurationRoute,
   listAgentConfigurationEnvironmentsRoute,
   listAgentConfigurationServicesRoute,
-  updateAgentConfigurationRoute,
+  createOrUpdateAgentConfigurationRoute,
   agentConfigurationAgentNameRoute
 } from './settings/agent_configuration';
 import {
@@ -83,11 +82,10 @@ const createApmApi = () => {
     .add(agentConfigurationAgentNameRoute)
     .add(agentConfigurationRoute)
     .add(agentConfigurationSearchRoute)
-    .add(createAgentConfigurationRoute)
     .add(deleteAgentConfigurationRoute)
     .add(listAgentConfigurationEnvironmentsRoute)
     .add(listAgentConfigurationServicesRoute)
-    .add(updateAgentConfigurationRoute)
+    .add(createOrUpdateAgentConfigurationRoute)
 
     // APM indices
     .add(apmIndexSettingsRoute)
diff --git a/x-pack/plugins/apm/server/routes/settings/agent_configuration.ts b/x-pack/plugins/apm/server/routes/settings/agent_configuration.ts
index ddd6a27025131..83b845b1fc436 100644
--- a/x-pack/plugins/apm/server/routes/settings/agent_configuration.ts
+++ b/x-pack/plugins/apm/server/routes/settings/agent_configuration.ts
@@ -9,15 +9,19 @@ import Boom from 'boom';
 import { setupRequest } from '../../lib/helpers/setup_request';
 import { getServiceNames } from '../../lib/settings/agent_configuration/get_service_names';
 import { createOrUpdateConfiguration } from '../../lib/settings/agent_configuration/create_or_update_configuration';
-import { searchConfigurations } from '../../lib/settings/agent_configuration/search';
+import { searchConfigurations } from '../../lib/settings/agent_configuration/search_configurations';
+import { findExactConfiguration } from '../../lib/settings/agent_configuration/find_exact_configuration';
 import { listConfigurations } from '../../lib/settings/agent_configuration/list_configurations';
 import { getEnvironments } from '../../lib/settings/agent_configuration/get_environments';
 import { deleteConfiguration } from '../../lib/settings/agent_configuration/delete_configuration';
 import { createRoute } from '../create_route';
-import { transactionSampleRateRt } from '../../../common/runtime_types/transaction_sample_rate_rt';
-import { transactionMaxSpansRt } from '../../../common/runtime_types/transaction_max_spans_rt';
 import { getAgentNameByService } from '../../lib/settings/agent_configuration/get_agent_name_by_service';
 import { markAppliedByAgent } from '../../lib/settings/agent_configuration/mark_applied_by_agent';
+import {
+  serviceRt,
+  agentConfigurationIntakeRt
+} from '../../../common/runtime_types/agent_configuration_intake_rt';
+import { jsonRt } from '../../../common/runtime_types/json_rt';
 
 // get list of configurations
 export const agentConfigurationRoute = createRoute(core => ({
@@ -31,20 +35,34 @@ export const agentConfigurationRoute = createRoute(core => ({
 // delete configuration
 export const deleteAgentConfigurationRoute = createRoute(() => ({
   method: 'DELETE',
-  path: '/api/apm/settings/agent-configuration/{configurationId}',
+  path: '/api/apm/settings/agent-configuration',
   options: {
     tags: ['access:apm', 'access:apm_write']
   },
   params: {
-    path: t.type({
-      configurationId: t.string
+    body: t.type({
+      service: serviceRt
     })
   },
   handler: async ({ context, request }) => {
     const setup = await setupRequest(context, request);
-    const { configurationId } = context.params.path;
+    const { service } = context.params.body;
+
+    const config = await findExactConfiguration({ service, setup });
+    if (!config) {
+      context.logger.info(
+        `Config was not found for ${service.name}/${service.environment}`
+      );
+
+      throw Boom.notFound();
+    }
+
+    context.logger.info(
+      `Deleting config ${service.name}/${service.environment} (${config._id})`
+    );
+
     return await deleteConfiguration({
-      configurationId,
+      configurationId: config._id,
       setup
     });
   }
@@ -62,23 +80,6 @@ export const listAgentConfigurationServicesRoute = createRoute(() => ({
   }
 }));
 
-const agentPayloadRt = t.intersection([
-  t.partial({ agent_name: t.string }),
-  t.type({
-    service: t.intersection([
-      t.partial({ name: t.string }),
-      t.partial({ environment: t.string })
-    ])
-  }),
-  t.type({
-    settings: t.intersection([
-      t.partial({ transaction_sample_rate: transactionSampleRateRt }),
-      t.partial({ capture_body: t.string }),
-      t.partial({ transaction_max_spans: transactionMaxSpansRt })
-    ])
-  })
-]);
-
 // get environments for service
 export const listAgentConfigurationEnvironmentsRoute = createRoute(() => ({
   path: '/api/apm/settings/agent-configuration/environments',
@@ -102,55 +103,47 @@ export const agentConfigurationAgentNameRoute = createRoute(() => ({
     const setup = await setupRequest(context, request);
     const { serviceName } = context.params.query;
     const agentName = await getAgentNameByService({ serviceName, setup });
-    return agentName;
+    return { agentName };
   }
 }));
 
-export const createAgentConfigurationRoute = createRoute(() => ({
-  method: 'POST',
-  path: '/api/apm/settings/agent-configuration/new',
-  params: {
-    body: agentPayloadRt
-  },
+export const createOrUpdateAgentConfigurationRoute = createRoute(() => ({
+  method: 'PUT',
+  path: '/api/apm/settings/agent-configuration',
   options: {
     tags: ['access:apm', 'access:apm_write']
   },
+  params: {
+    query: t.partial({ overwrite: jsonRt.pipe(t.boolean) }),
+    body: agentConfigurationIntakeRt
+  },
   handler: async ({ context, request }) => {
     const setup = await setupRequest(context, request);
-    const configuration = context.params.body;
+    const { body, query } = context.params;
 
-    // TODO: Remove logger. Only added temporarily to debug flaky test (https://github.com/elastic/kibana/issues/51764)
-    context.logger.info(
-      `Hitting: /api/apm/settings/agent-configuration/new with ${configuration.service.name}/${configuration.service.environment}`
-    );
-    const res = await createOrUpdateConfiguration({
-      configuration,
+    // if the config already exists, it is fetched and updated
+    // this is to avoid creating two configs with identical service params
+    const config = await findExactConfiguration({
+      service: body.service,
       setup
     });
-    context.logger.info(`Created agent configuration`);
 
-    return res;
-  }
-}));
+    // if the config exists ?overwrite=true is required
+    if (config && !query.overwrite) {
+      throw Boom.badRequest(
+        `A configuration already exists for "${body.service.name}/${body.service.environment}. Use ?overwrite=true to overwrite the existing configuration.`
+      );
+    }
+
+    context.logger.info(
+      `${config ? 'Updating' : 'Creating'} config ${body.service.name}/${
+        body.service.environment
+      }`
+    );
 
-export const updateAgentConfigurationRoute = createRoute(() => ({
-  method: 'PUT',
-  path: '/api/apm/settings/agent-configuration/{configurationId}',
-  options: {
-    tags: ['access:apm', 'access:apm_write']
-  },
-  params: {
-    path: t.type({
-      configurationId: t.string
-    }),
-    body: agentPayloadRt
-  },
-  handler: async ({ context, request }) => {
-    const setup = await setupRequest(context, request);
-    const { configurationId } = context.params.path;
     return await createOrUpdateConfiguration({
-      configurationId,
-      configuration: context.params.body,
+      configurationId: config?._id,
+      configurationIntake: body,
       setup
     });
   }
@@ -162,41 +155,33 @@ export const agentConfigurationSearchRoute = createRoute(core => ({
   path: '/api/apm/settings/agent-configuration/search',
   params: {
     body: t.type({
-      service: t.intersection([
-        t.type({ name: t.string }),
-        t.partial({ environment: t.string })
-      ]),
+      service: serviceRt,
       etag: t.string
     })
   },
   handler: async ({ context, request }) => {
-    const { body } = context.params;
-
-    // TODO: Remove logger. Only added temporarily to debug flaky test (https://github.com/elastic/kibana/issues/51764)
-    context.logger.info(
-      `Hitting: /api/apm/settings/agent-configuration/search for ${body.service.name}/${body.service.environment}`
-    );
+    const { service, etag } = context.params.body;
 
     const setup = await setupRequest(context, request);
     const config = await searchConfigurations({
-      serviceName: body.service.name,
-      environment: body.service.environment,
+      service,
       setup
     });
 
     if (!config) {
       context.logger.info(
-        `Config was not found for ${body.service.name}/${body.service.environment}`
+        `Config was not found for ${service.name}/${service.environment}`
       );
-      throw new Boom('Not found', { statusCode: 404 });
+      throw Boom.notFound();
     }
 
     context.logger.info(
-      `Config was found for ${body.service.name}/${body.service.environment}`
+      `Config was found for ${service.name}/${service.environment}`
     );
 
     // update `applied_by_agent` field if etags match
-    if (body.etag === config._source.etag && !config._source.applied_by_agent) {
+    // this happens in the background and doesn't block the response
+    if (etag === config._source.etag && !config._source.applied_by_agent) {
       markAppliedByAgent({ id: config._id, body: config._source, setup });
     }
 
diff --git a/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/constants.ts b/x-pack/plugins/index_management/__jest__/client_integration/helpers/constants.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/constants.ts
rename to x-pack/plugins/index_management/__jest__/client_integration/helpers/constants.ts
diff --git a/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/home.helpers.ts b/x-pack/plugins/index_management/__jest__/client_integration/helpers/home.helpers.ts
similarity index 96%
rename from x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/home.helpers.ts
rename to x-pack/plugins/index_management/__jest__/client_integration/helpers/home.helpers.ts
index e5f0b25d89c3e..7e3e1fba9c44a 100644
--- a/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/home.helpers.ts
+++ b/x-pack/plugins/index_management/__jest__/client_integration/helpers/home.helpers.ts
@@ -12,10 +12,10 @@ import {
   TestBedConfig,
   findTestSubject,
   nextTick,
-} from '../../../../../../test_utils';
-import { IndexManagementHome } from '../../../public/application/sections/home';
+} from '../../../../../test_utils';
+import { IndexManagementHome } from '../../../public/application/sections/home'; // eslint-disable-line @kbn/eslint/no-restricted-paths
 import { BASE_PATH } from '../../../common/constants';
-import { indexManagementStore } from '../../../public/application/store';
+import { indexManagementStore } from '../../../public/application/store'; // eslint-disable-line @kbn/eslint/no-restricted-paths
 import { Template } from '../../../common/types';
 import { WithAppDependencies, services } from './setup_environment';
 
diff --git a/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/http_requests.ts b/x-pack/plugins/index_management/__jest__/client_integration/helpers/http_requests.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/http_requests.ts
rename to x-pack/plugins/index_management/__jest__/client_integration/helpers/http_requests.ts
diff --git a/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/index.ts b/x-pack/plugins/index_management/__jest__/client_integration/helpers/index.ts
similarity index 95%
rename from x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/index.ts
rename to x-pack/plugins/index_management/__jest__/client_integration/helpers/index.ts
index 6dce4453a67f9..66021b531919a 100644
--- a/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/index.ts
+++ b/x-pack/plugins/index_management/__jest__/client_integration/helpers/index.ts
@@ -9,7 +9,7 @@ import { setup as templateCreateSetup } from './template_create.helpers';
 import { setup as templateCloneSetup } from './template_clone.helpers';
 import { setup as templateEditSetup } from './template_edit.helpers';
 
-export { nextTick, getRandomString, findTestSubject, TestBed } from '../../../../../../test_utils';
+export { nextTick, getRandomString, findTestSubject, TestBed } from '../../../../../test_utils';
 
 export { setupEnvironment } from './setup_environment';
 
diff --git a/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/setup_environment.tsx b/x-pack/plugins/index_management/__jest__/client_integration/helpers/setup_environment.tsx
similarity index 95%
rename from x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/setup_environment.tsx
rename to x-pack/plugins/index_management/__jest__/client_integration/helpers/setup_environment.tsx
index 0212efe1f322d..1eaf7efd17395 100644
--- a/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/setup_environment.tsx
+++ b/x-pack/plugins/index_management/__jest__/client_integration/helpers/setup_environment.tsx
@@ -3,6 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+/* eslint-disable @kbn/eslint/no-restricted-paths */
 import React from 'react';
 import axios from 'axios';
 import axiosXhrAdapter from 'axios/lib/adapters/xhr';
@@ -10,7 +11,7 @@ import axiosXhrAdapter from 'axios/lib/adapters/xhr';
 import {
   notificationServiceMock,
   docLinksServiceMock,
-} from '../../../../../../../src/core/public/mocks';
+} from '../../../../../../src/core/public/mocks';
 import { AppContextProvider } from '../../../public/application/app_context';
 import { httpService } from '../../../public/application/services/http';
 import { breadcrumbService } from '../../../public/application/services/breadcrumbs';
diff --git a/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/template_clone.helpers.ts b/x-pack/plugins/index_management/__jest__/client_integration/helpers/template_clone.helpers.ts
similarity index 85%
rename from x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/template_clone.helpers.ts
rename to x-pack/plugins/index_management/__jest__/client_integration/helpers/template_clone.helpers.ts
index cd1b67c08d934..36498b99ba143 100644
--- a/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/template_clone.helpers.ts
+++ b/x-pack/plugins/index_management/__jest__/client_integration/helpers/template_clone.helpers.ts
@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { registerTestBed, TestBedConfig } from '../../../../../../test_utils';
+import { registerTestBed, TestBedConfig } from '../../../../../test_utils';
 import { BASE_PATH } from '../../../common/constants';
-import { TemplateClone } from '../../../public/application/sections/template_clone';
+import { TemplateClone } from '../../../public/application/sections/template_clone'; // eslint-disable-line @kbn/eslint/no-restricted-paths
 import { formSetup } from './template_form.helpers';
 import { TEMPLATE_NAME } from './constants';
 import { WithAppDependencies } from './setup_environment';
diff --git a/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/template_create.helpers.ts b/x-pack/plugins/index_management/__jest__/client_integration/helpers/template_create.helpers.ts
similarity index 84%
rename from x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/template_create.helpers.ts
rename to x-pack/plugins/index_management/__jest__/client_integration/helpers/template_create.helpers.ts
index 8e62bc25d6bd1..14a44968a93c3 100644
--- a/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/template_create.helpers.ts
+++ b/x-pack/plugins/index_management/__jest__/client_integration/helpers/template_create.helpers.ts
@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { registerTestBed, TestBedConfig } from '../../../../../../test_utils';
+import { registerTestBed, TestBedConfig } from '../../../../../test_utils';
 import { BASE_PATH } from '../../../common/constants';
-import { TemplateCreate } from '../../../public/application/sections/template_create';
+import { TemplateCreate } from '../../../public/application/sections/template_create'; // eslint-disable-line @kbn/eslint/no-restricted-paths
 import { formSetup, TestSubjects } from './template_form.helpers';
 import { WithAppDependencies } from './setup_environment';
 
diff --git a/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/template_edit.helpers.ts b/x-pack/plugins/index_management/__jest__/client_integration/helpers/template_edit.helpers.ts
similarity index 85%
rename from x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/template_edit.helpers.ts
rename to x-pack/plugins/index_management/__jest__/client_integration/helpers/template_edit.helpers.ts
index cb1025234b48e..af5fa8b79ecad 100644
--- a/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/template_edit.helpers.ts
+++ b/x-pack/plugins/index_management/__jest__/client_integration/helpers/template_edit.helpers.ts
@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { registerTestBed, TestBedConfig } from '../../../../../../test_utils';
+import { registerTestBed, TestBedConfig } from '../../../../../test_utils';
 import { BASE_PATH } from '../../../common/constants';
-import { TemplateEdit } from '../../../public/application/sections/template_edit';
+import { TemplateEdit } from '../../../public/application/sections/template_edit'; // eslint-disable-line @kbn/eslint/no-restricted-paths
 import { formSetup, TestSubjects } from './template_form.helpers';
 import { TEMPLATE_NAME } from './constants';
 import { WithAppDependencies } from './setup_environment';
diff --git a/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/template_form.helpers.ts b/x-pack/plugins/index_management/__jest__/client_integration/helpers/template_form.helpers.ts
similarity index 99%
rename from x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/template_form.helpers.ts
rename to x-pack/plugins/index_management/__jest__/client_integration/helpers/template_form.helpers.ts
index a7c87723b33fb..134c67c278b22 100644
--- a/x-pack/legacy/plugins/index_management/__jest__/client_integration/helpers/template_form.helpers.ts
+++ b/x-pack/plugins/index_management/__jest__/client_integration/helpers/template_form.helpers.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { TestBed, SetupFunc, UnwrapPromise } from '../../../../../../test_utils';
+import { TestBed, SetupFunc, UnwrapPromise } from '../../../../../test_utils';
 import { Template } from '../../../common/types';
 import { nextTick } from './index';
 
diff --git a/x-pack/legacy/plugins/index_management/__jest__/client_integration/home.test.ts b/x-pack/plugins/index_management/__jest__/client_integration/home.test.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/__jest__/client_integration/home.test.ts
rename to x-pack/plugins/index_management/__jest__/client_integration/home.test.ts
diff --git a/x-pack/legacy/plugins/index_management/__jest__/client_integration/template_clone.test.tsx b/x-pack/plugins/index_management/__jest__/client_integration/template_clone.test.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/__jest__/client_integration/template_clone.test.tsx
rename to x-pack/plugins/index_management/__jest__/client_integration/template_clone.test.tsx
diff --git a/x-pack/legacy/plugins/index_management/__jest__/client_integration/template_create.test.tsx b/x-pack/plugins/index_management/__jest__/client_integration/template_create.test.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/__jest__/client_integration/template_create.test.tsx
rename to x-pack/plugins/index_management/__jest__/client_integration/template_create.test.tsx
diff --git a/x-pack/legacy/plugins/index_management/__jest__/client_integration/template_edit.test.tsx b/x-pack/plugins/index_management/__jest__/client_integration/template_edit.test.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/__jest__/client_integration/template_edit.test.tsx
rename to x-pack/plugins/index_management/__jest__/client_integration/template_edit.test.tsx
diff --git a/x-pack/legacy/plugins/index_management/__jest__/components/__snapshots__/index_table.test.js.snap b/x-pack/plugins/index_management/__jest__/components/__snapshots__/index_table.test.js.snap
similarity index 100%
rename from x-pack/legacy/plugins/index_management/__jest__/components/__snapshots__/index_table.test.js.snap
rename to x-pack/plugins/index_management/__jest__/components/__snapshots__/index_table.test.js.snap
diff --git a/x-pack/legacy/plugins/index_management/__jest__/components/index_table.test.js b/x-pack/plugins/index_management/__jest__/components/index_table.test.js
similarity index 98%
rename from x-pack/legacy/plugins/index_management/__jest__/components/index_table.test.js
rename to x-pack/plugins/index_management/__jest__/components/index_table.test.js
index 2b4fd89436458..15c3ef0b84562 100644
--- a/x-pack/legacy/plugins/index_management/__jest__/components/index_table.test.js
+++ b/x-pack/plugins/index_management/__jest__/components/index_table.test.js
@@ -20,13 +20,13 @@ import { setUiMetricService } from '../../public/application/services/api';
 import { indexManagementStore } from '../../public/application/store';
 import { setExtensionsService } from '../../public/application/store/selectors';
 import { BASE_PATH, API_BASE_PATH } from '../../common/constants';
-import { mountWithIntl } from '../../../../../test_utils/enzyme_helpers';
+import { mountWithIntl } from '../../../../test_utils/enzyme_helpers';
 import { ExtensionsService } from '../../public/services';
 import sinon from 'sinon';
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 /* eslint-disable @kbn/eslint/no-restricted-paths */
-import { notificationServiceMock } from '../../../../../../src/core/public/notifications/notifications_service.mock';
+import { notificationServiceMock } from '../../../../../src/core/public/notifications/notifications_service.mock';
 
 jest.mock('ui/new_platform');
 
diff --git a/x-pack/legacy/plugins/index_management/__jest__/lib/__snapshots__/flatten_object.test.js.snap b/x-pack/plugins/index_management/__jest__/lib/__snapshots__/flatten_object.test.js.snap
similarity index 100%
rename from x-pack/legacy/plugins/index_management/__jest__/lib/__snapshots__/flatten_object.test.js.snap
rename to x-pack/plugins/index_management/__jest__/lib/__snapshots__/flatten_object.test.js.snap
diff --git a/x-pack/legacy/plugins/index_management/__jest__/lib/flatten_object.test.js b/x-pack/plugins/index_management/__jest__/lib/flatten_object.test.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/__jest__/lib/flatten_object.test.js
rename to x-pack/plugins/index_management/__jest__/lib/flatten_object.test.js
diff --git a/x-pack/legacy/plugins/index_management/__mocks__/ace.js b/x-pack/plugins/index_management/__mocks__/ace.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/__mocks__/ace.js
rename to x-pack/plugins/index_management/__mocks__/ace.js
diff --git a/x-pack/legacy/plugins/index_management/__mocks__/ui/documentation_links.js b/x-pack/plugins/index_management/__mocks__/ui/documentation_links.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/__mocks__/ui/documentation_links.js
rename to x-pack/plugins/index_management/__mocks__/ui/documentation_links.js
diff --git a/x-pack/legacy/plugins/index_management/__mocks__/ui/notify.js b/x-pack/plugins/index_management/__mocks__/ui/notify.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/__mocks__/ui/notify.js
rename to x-pack/plugins/index_management/__mocks__/ui/notify.js
diff --git a/x-pack/legacy/plugins/index_management/common/constants/api_base_path.ts b/x-pack/plugins/index_management/common/constants/api_base_path.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/common/constants/api_base_path.ts
rename to x-pack/plugins/index_management/common/constants/api_base_path.ts
diff --git a/x-pack/legacy/plugins/index_management/common/constants/base_path.ts b/x-pack/plugins/index_management/common/constants/base_path.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/common/constants/base_path.ts
rename to x-pack/plugins/index_management/common/constants/base_path.ts
diff --git a/x-pack/legacy/plugins/index_management/common/constants/index.ts b/x-pack/plugins/index_management/common/constants/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/common/constants/index.ts
rename to x-pack/plugins/index_management/common/constants/index.ts
diff --git a/x-pack/legacy/plugins/index_management/common/constants/index_statuses.ts b/x-pack/plugins/index_management/common/constants/index_statuses.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/common/constants/index_statuses.ts
rename to x-pack/plugins/index_management/common/constants/index_statuses.ts
diff --git a/x-pack/legacy/plugins/index_management/common/constants/invalid_characters.ts b/x-pack/plugins/index_management/common/constants/invalid_characters.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/common/constants/invalid_characters.ts
rename to x-pack/plugins/index_management/common/constants/invalid_characters.ts
diff --git a/x-pack/legacy/plugins/index_management/common/constants/plugin.ts b/x-pack/plugins/index_management/common/constants/plugin.ts
similarity index 86%
rename from x-pack/legacy/plugins/index_management/common/constants/plugin.ts
rename to x-pack/plugins/index_management/common/constants/plugin.ts
index 2cd137f62d3db..e25f537edcf8d 100644
--- a/x-pack/legacy/plugins/index_management/common/constants/plugin.ts
+++ b/x-pack/plugins/index_management/common/constants/plugin.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { LicenseType } from '../../../../../plugins/licensing/common/types';
+import { LicenseType } from '../../../licensing/common/types';
 
 const basicLicense: LicenseType = 'basic';
 
diff --git a/x-pack/legacy/plugins/index_management/common/constants/ui_metric.ts b/x-pack/plugins/index_management/common/constants/ui_metric.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/common/constants/ui_metric.ts
rename to x-pack/plugins/index_management/common/constants/ui_metric.ts
diff --git a/x-pack/legacy/plugins/index_management/common/index.ts b/x-pack/plugins/index_management/common/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/common/index.ts
rename to x-pack/plugins/index_management/common/index.ts
diff --git a/x-pack/legacy/plugins/index_management/common/lib/index.ts b/x-pack/plugins/index_management/common/lib/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/common/lib/index.ts
rename to x-pack/plugins/index_management/common/lib/index.ts
diff --git a/x-pack/legacy/plugins/index_management/common/lib/template_serialization.ts b/x-pack/plugins/index_management/common/lib/template_serialization.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/common/lib/template_serialization.ts
rename to x-pack/plugins/index_management/common/lib/template_serialization.ts
diff --git a/x-pack/legacy/plugins/index_management/common/types/index.ts b/x-pack/plugins/index_management/common/types/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/common/types/index.ts
rename to x-pack/plugins/index_management/common/types/index.ts
diff --git a/x-pack/legacy/plugins/index_management/common/types/templates.ts b/x-pack/plugins/index_management/common/types/templates.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/common/types/templates.ts
rename to x-pack/plugins/index_management/common/types/templates.ts
diff --git a/x-pack/plugins/index_management/kibana.json b/x-pack/plugins/index_management/kibana.json
new file mode 100644
index 0000000000000..7387a042988c0
--- /dev/null
+++ b/x-pack/plugins/index_management/kibana.json
@@ -0,0 +1,15 @@
+{
+  "id": "indexManagement",
+  "version": "kibana",
+  "server": true,
+  "ui": true,
+  "requiredPlugins": [
+    "home",
+    "licensing",
+    "management"
+  ],
+  "optionalPlugins": [
+    "usageCollection"
+  ],
+  "configPath": ["xpack", "index_management"]
+}
diff --git a/x-pack/legacy/plugins/index_management/public/application/app.tsx b/x-pack/plugins/index_management/public/application/app.tsx
similarity index 98%
rename from x-pack/legacy/plugins/index_management/public/application/app.tsx
rename to x-pack/plugins/index_management/public/application/app.tsx
index 3b475f3baba04..83997dd6ece18 100644
--- a/x-pack/legacy/plugins/index_management/public/application/app.tsx
+++ b/x-pack/plugins/index_management/public/application/app.tsx
@@ -16,7 +16,7 @@ import { useServices } from './app_context';
 
 export const App = () => {
   const { uiMetricService } = useServices();
-  useEffect(() => uiMetricService.trackMetric('loaded', UIM_APP_LOAD), []);
+  useEffect(() => uiMetricService.trackMetric('loaded', UIM_APP_LOAD), [uiMetricService]);
 
   return (
     <HashRouter>
diff --git a/x-pack/legacy/plugins/index_management/public/application/app_context.tsx b/x-pack/plugins/index_management/public/application/app_context.tsx
similarity index 90%
rename from x-pack/legacy/plugins/index_management/public/application/app_context.tsx
rename to x-pack/plugins/index_management/public/application/app_context.tsx
index 12e0d362a2930..2bb618ad8efce 100644
--- a/x-pack/legacy/plugins/index_management/public/application/app_context.tsx
+++ b/x-pack/plugins/index_management/public/application/app_context.tsx
@@ -5,9 +5,9 @@
  */
 
 import React, { createContext, useContext } from 'react';
-import { CoreStart } from '../../../../../../src/core/public';
+import { CoreStart } from '../../../../../src/core/public';
 
-import { UsageCollectionSetup } from '../../../../../../src/plugins/usage_collection/public';
+import { UsageCollectionSetup } from '../../../../../src/plugins/usage_collection/public';
 import { IndexMgmtMetricsType } from '../types';
 import { UiMetricService, NotificationService, HttpService } from './services';
 import { ExtensionsService } from '../services';
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/index.ts b/x-pack/plugins/index_management/public/application/components/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/index.ts
rename to x-pack/plugins/index_management/public/application/components/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/index.ts
similarity index 90%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/index.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/index.ts
index e3313bfba56fd..6d64cb73da4bd 100644
--- a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/index.ts
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/index.ts
@@ -10,7 +10,7 @@ export {
   getRandomString,
   findTestSubject,
   TestBed,
-} from '../../../../../../../../../../test_utils';
+} from '../../../../../../../../../test_utils';
 
 export const componentHelpers = {
   mappingsEditor: { setup: mappingsEditorSetup },
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/mappings_editor.helpers.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/mappings_editor.helpers.ts
similarity index 85%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/mappings_editor.helpers.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/mappings_editor.helpers.ts
index dcee956130a29..acb416654023e 100644
--- a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/mappings_editor.helpers.ts
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/helpers/mappings_editor.helpers.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { registerTestBed } from '../../../../../../../../../../test_utils';
+import { registerTestBed } from '../../../../../../../../../test_utils';
 import { MappingsEditor } from '../../../mappings_editor';
 
 export const setup = (props: any) =>
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/mappings_editor.test.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/mappings_editor.test.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/mappings_editor.test.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/__jest__/client_integration/mappings_editor.test.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/_index.scss b/x-pack/plugins/index_management/public/application/components/mappings_editor/_index.scss
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/_index.scss
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/_index.scss
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/_index.scss b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/_index.scss
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/_index.scss
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/_index.scss
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/code_block.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/code_block.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/code_block.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/code_block.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/configuration_form.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/configuration_form.tsx
similarity index 98%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/configuration_form.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/configuration_form.tsx
index 0c5c9e2a15b75..9b0b8420f9ea9 100644
--- a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/configuration_form.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/configuration_form.tsx
@@ -110,7 +110,7 @@ export const ConfigurationForm = React.memo(({ defaultValue }: Props) => {
       });
     });
     return subscription.unsubscribe;
-  }, [form]);
+  }, [form, dispatch]);
 
   useEffect(() => {
     if (didMountRef.current) {
@@ -121,14 +121,14 @@ export const ConfigurationForm = React.memo(({ defaultValue }: Props) => {
       // Avoid reseting the form on component mount.
       didMountRef.current = true;
     }
-  }, [defaultValue]);
+  }, [defaultValue, form]);
 
   useEffect(() => {
     return () => {
       // On unmount => save in the state a snapshot of the current form data.
       dispatch({ type: 'configuration.save' });
     };
-  }, []);
+  }, [dispatch]);
 
   return (
     <Form form={form} isInvalid={form.isSubmitted && !form.isValid} error={form.getErrors()}>
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/configuration_form_schema.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/configuration_form_schema.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/configuration_form_schema.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/configuration_form_schema.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/dynamic_mapping_section/dynamic_mapping_section.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/dynamic_mapping_section/dynamic_mapping_section.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/dynamic_mapping_section/dynamic_mapping_section.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/dynamic_mapping_section/dynamic_mapping_section.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/dynamic_mapping_section/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/dynamic_mapping_section/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/dynamic_mapping_section/index.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/dynamic_mapping_section/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/index.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/meta_field_section/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/meta_field_section/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/meta_field_section/index.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/meta_field_section/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/meta_field_section/meta_field_section.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/meta_field_section/meta_field_section.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/meta_field_section/meta_field_section.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/meta_field_section/meta_field_section.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/routing_section.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/routing_section.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/routing_section.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/routing_section.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/source_field_section/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/source_field_section/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/source_field_section/index.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/source_field_section/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/source_field_section/source_field_section.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/source_field_section/source_field_section.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/source_field_section/source_field_section.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/configuration_form/source_field_section/source_field_section.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/_index.scss b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/_index.scss
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/_index.scss
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/_index.scss
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/document_fields.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/document_fields.tsx
similarity index 91%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/document_fields.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/document_fields.tsx
index 378d669dee69c..400de4052afa4 100644
--- a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/document_fields.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/document_fields.tsx
@@ -24,7 +24,7 @@ export const DocumentFields = React.memo(() => {
     if (editorType === 'json') {
       return deNormalize(fields);
     }
-  }, [editorType]);
+  }, [editorType, fields]);
 
   const editor =
     editorType === 'json' ? (
@@ -41,9 +41,12 @@ export const DocumentFields = React.memo(() => {
     return <EditFieldContainer field={field} allFields={fields.byId} />;
   };
 
-  const onSearchChange = useCallback((value: string) => {
-    dispatch({ type: 'search:update', value });
-  }, []);
+  const onSearchChange = useCallback(
+    (value: string) => {
+      dispatch({ type: 'search:update', value });
+    },
+    [dispatch]
+  );
 
   const searchTerm = search.term.trim();
 
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/document_fields_header.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/document_fields_header.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/document_fields_header.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/document_fields_header.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/editor_toggle_controls.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/editor_toggle_controls.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/editor_toggle_controls.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/editor_toggle_controls.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/analyzer_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/analyzer_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/analyzer_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/analyzer_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/analyzer_parameter_selects.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/analyzer_parameter_selects.tsx
similarity index 86%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/analyzer_parameter_selects.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/analyzer_parameter_selects.tsx
index de3d70db31af4..a91231352c168 100644
--- a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/analyzer_parameter_selects.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/analyzer_parameter_selects.tsx
@@ -56,15 +56,21 @@ export const AnalyzerParameterSelects = ({
     });
 
     return subscription.unsubscribe;
-  }, [form]);
+  }, [form, onChange]);
 
-  const getSubOptionsMeta = (mainValue: string) =>
-    mapOptionsToSubOptions !== undefined ? mapOptionsToSubOptions[mainValue] : undefined;
+  const getSubOptionsMeta = useCallback(
+    (mainValue: string) =>
+      mapOptionsToSubOptions !== undefined ? mapOptionsToSubOptions[mainValue] : undefined,
+    [mapOptionsToSubOptions]
+  );
 
-  const onMainValueChange = useCallback((mainValue: unknown) => {
-    const subOptionsMeta = getSubOptionsMeta(mainValue as string);
-    form.setFieldValue('sub', subOptionsMeta ? subOptionsMeta.options[0].value : undefined);
-  }, []);
+  const onMainValueChange = useCallback(
+    (mainValue: unknown) => {
+      const subOptionsMeta = getSubOptionsMeta(mainValue as string);
+      form.setFieldValue('sub', subOptionsMeta ? subOptionsMeta.options[0].value : undefined);
+    },
+    [form, getSubOptionsMeta]
+  );
 
   const renderSelect = (field: FieldHook, opts: Options) => {
     const isSuperSelect = areOptionsSuperSelect(opts);
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/analyzers_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/analyzers_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/analyzers_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/analyzers_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/boost_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/boost_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/boost_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/boost_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/coerce_number_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/coerce_number_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/coerce_number_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/coerce_number_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/coerce_shape_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/coerce_shape_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/coerce_shape_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/coerce_shape_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/copy_to_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/copy_to_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/copy_to_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/copy_to_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/doc_values_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/doc_values_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/doc_values_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/doc_values_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/dynamic_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/dynamic_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/dynamic_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/dynamic_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/eager_global_ordinals_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/eager_global_ordinals_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/eager_global_ordinals_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/eager_global_ordinals_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/enabled_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/enabled_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/enabled_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/enabled_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/fielddata_frequency_filter_absolute.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/fielddata_frequency_filter_absolute.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/fielddata_frequency_filter_absolute.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/fielddata_frequency_filter_absolute.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/fielddata_frequency_filter_percentage.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/fielddata_frequency_filter_percentage.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/fielddata_frequency_filter_percentage.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/fielddata_frequency_filter_percentage.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/fielddata_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/fielddata_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/fielddata_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/fielddata_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/format_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/format_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/format_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/format_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/ignore_malformed.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/ignore_malformed.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/ignore_malformed.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/ignore_malformed.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/ignore_z_value_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/ignore_z_value_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/ignore_z_value_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/ignore_z_value_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/index.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/index_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/index_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/index_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/index_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/locale_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/locale_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/locale_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/locale_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/max_shingle_size_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/max_shingle_size_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/max_shingle_size_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/max_shingle_size_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/name_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/name_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/name_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/name_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/norms_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/norms_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/norms_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/norms_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/null_value_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/null_value_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/null_value_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/null_value_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/orientation_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/orientation_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/orientation_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/orientation_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/path_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/path_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/path_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/path_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/relations_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/relations_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/relations_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/relations_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/similarity_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/similarity_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/similarity_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/similarity_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/split_queries_on_whitespace_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/split_queries_on_whitespace_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/split_queries_on_whitespace_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/split_queries_on_whitespace_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/store_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/store_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/store_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/store_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/term_vector_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/term_vector_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/term_vector_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/term_vector_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/type_parameter.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/type_parameter.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/type_parameter.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/field_parameters/type_parameter.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/_field_list_item.scss b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/_field_list_item.scss
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/_field_list_item.scss
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/_field_list_item.scss
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/_index.scss b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/_index.scss
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/_index.scss
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/_index.scss
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/create_field.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/create_field.tsx
similarity index 83%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/create_field.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/create_field.tsx
index 5f1b8c0df770e..60b025ce644ef 100644
--- a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/create_field.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/create_field.tsx
@@ -66,7 +66,7 @@ export const CreateField = React.memo(function CreateFieldComponent({
     });
 
     return subscription.unsubscribe;
-  }, [form]);
+  }, [form, dispatch]);
 
   const cancel = () => {
     dispatch({ type: 'documentField.changeStatus', value: 'idle' });
@@ -108,43 +108,53 @@ export const CreateField = React.memo(function CreateFieldComponent({
    *
    * @param type The selected field type
    */
-  const getSubTypeMeta = (
-    type: MainType
-  ): { subTypeLabel?: string; subTypeOptions?: ComboBoxOption[] } => {
-    const typeDefinition = TYPE_DEFINITION[type];
-    const hasSubTypes = typeDefinition !== undefined && typeDefinition.subTypes;
-
-    let subTypeOptions = hasSubTypes
-      ? typeDefinition
-          .subTypes!.types.map(subType => TYPE_DEFINITION[subType])
-          .map(
-            subType => ({ value: subType.value as SubType, label: subType.label } as ComboBoxOption)
-          )
-      : undefined;
-
-    if (hasSubTypes) {
-      if (isMultiField) {
-        // If it is a multi-field, we need to filter out non-allowed types
-        subTypeOptions = filterTypesForMultiField<SubType>(subTypeOptions!);
-      } else if (isRootLevelField === false) {
-        subTypeOptions = filterTypesForNonRootFields(subTypeOptions!);
+  const getSubTypeMeta = useCallback(
+    (
+      type: MainType
+    ): {
+      subTypeLabel?: string;
+      subTypeOptions?: ComboBoxOption[];
+    } => {
+      const typeDefinition = TYPE_DEFINITION[type];
+      const hasSubTypes = typeDefinition !== undefined && typeDefinition.subTypes;
+
+      let subTypeOptions = hasSubTypes
+        ? typeDefinition
+            .subTypes!.types.map(subType => TYPE_DEFINITION[subType])
+            .map(
+              subType =>
+                ({ value: subType.value as SubType, label: subType.label } as ComboBoxOption)
+            )
+        : undefined;
+
+      if (hasSubTypes) {
+        if (isMultiField) {
+          // If it is a multi-field, we need to filter out non-allowed types
+          subTypeOptions = filterTypesForMultiField<SubType>(subTypeOptions!);
+        } else if (isRootLevelField === false) {
+          subTypeOptions = filterTypesForNonRootFields(subTypeOptions!);
+        }
       }
-    }
 
-    return {
-      subTypeOptions,
-      subTypeLabel: hasSubTypes ? typeDefinition.subTypes!.label : undefined,
-    };
-  };
+      return {
+        subTypeOptions,
+        subTypeLabel: hasSubTypes ? typeDefinition.subTypes!.label : undefined,
+      };
+    },
+    [isMultiField, isRootLevelField]
+  );
 
-  const onTypeChange = (nextType: ComboBoxOption[]) => {
-    form.setFieldValue('type', nextType);
+  const onTypeChange = useCallback(
+    (nextType: ComboBoxOption[]) => {
+      form.setFieldValue('type', nextType);
 
-    if (nextType.length) {
-      const { subTypeOptions } = getSubTypeMeta(nextType[0].value as MainType);
-      form.setFieldValue('subType', subTypeOptions ? [subTypeOptions[0]] : undefined);
-    }
-  };
+      if (nextType.length) {
+        const { subTypeOptions } = getSubTypeMeta(nextType[0].value as MainType);
+        form.setFieldValue('subType', subTypeOptions ? [subTypeOptions[0]] : undefined);
+      }
+    },
+    [form, getSubTypeMeta]
+  );
 
   const renderFormFields = useCallback(
     ({ type }) => {
@@ -208,7 +218,7 @@ export const CreateField = React.memo(function CreateFieldComponent({
         </EuiFlexItem>
       );
     },
-    [form, isMultiField]
+    [getSubTypeMeta, isMultiField, isRootLevelField, onTypeChange]
   );
 
   const renderFormActions = () => (
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/index.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/alias_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/alias_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/alias_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/alias_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/dense_vector_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/dense_vector_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/dense_vector_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/dense_vector_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/index.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/scaled_float_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/scaled_float_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/scaled_float_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/scaled_float_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/token_count_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/token_count_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/token_count_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/create_field/required_parameters_forms/token_count_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/delete_field_provider.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/delete_field_provider.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/delete_field_provider.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/delete_field_provider.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/_edit_field_form_row.scss b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/_edit_field_form_row.scss
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/_edit_field_form_row.scss
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/_edit_field_form_row.scss
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/_index.scss b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/_index.scss
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/_index.scss
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/_index.scss
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/advanced_parameters_section.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/advanced_parameters_section.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/advanced_parameters_section.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/advanced_parameters_section.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/basic_parameters_section.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/basic_parameters_section.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/basic_parameters_section.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/basic_parameters_section.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field_container.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field_container.tsx
similarity index 97%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field_container.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field_container.tsx
index 284ae8803acb5..1f77584439568 100644
--- a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field_container.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field_container.tsx
@@ -32,11 +32,11 @@ export const EditFieldContainer = React.memo(({ field, allFields }: Props) => {
     });
 
     return subscription.unsubscribe;
-  }, [form]);
+  }, [form, dispatch]);
 
   const exitEdit = useCallback(() => {
     dispatch({ type: 'documentField.changeStatus', value: 'idle' });
-  }, []);
+  }, [dispatch]);
 
   return <EditField form={form} field={field} allFields={allFields} exitEdit={exitEdit} />;
 });
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field_form_row.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field_form_row.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field_form_row.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field_form_row.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field_header_form.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field_header_form.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field_header_form.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/edit_field_header_form.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/field_description_section.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/field_description_section.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/field_description_section.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/field_description_section.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/index.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/update_field_provider.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/update_field_provider.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/update_field_provider.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/edit_field/update_field_provider.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/alias_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/alias_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/alias_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/alias_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/binary_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/binary_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/binary_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/binary_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/boolean_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/boolean_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/boolean_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/boolean_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/completion_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/completion_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/completion_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/completion_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/date_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/date_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/date_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/date_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/dense_vector_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/dense_vector_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/dense_vector_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/dense_vector_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/flattened_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/flattened_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/flattened_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/flattened_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/geo_point_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/geo_point_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/geo_point_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/geo_point_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/geo_shape_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/geo_shape_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/geo_shape_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/geo_shape_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/index.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/ip_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/ip_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/ip_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/ip_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/join_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/join_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/join_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/join_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/keyword_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/keyword_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/keyword_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/keyword_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/nested_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/nested_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/nested_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/nested_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/numeric_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/numeric_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/numeric_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/numeric_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/object_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/object_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/object_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/object_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/range_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/range_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/range_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/range_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/search_as_you_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/search_as_you_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/search_as_you_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/search_as_you_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/shape_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/shape_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/shape_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/shape_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/text_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/text_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/text_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/text_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/token_count_type.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/token_count_type.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/token_count_type.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/field_types/token_count_type.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item_container.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item_container.tsx
similarity index 92%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item_container.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item_container.tsx
index cff2d294fead9..55093e606cfa1 100644
--- a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item_container.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/fields_list_item_container.tsx
@@ -23,7 +23,7 @@ export const FieldsListItemContainer = ({ fieldId, treeDepth, isLastItem }: Prop
     fields: { byId, maxNestedDepth },
   } = useMappingsState();
 
-  const getField = (id: string) => byId[id];
+  const getField = useCallback((id: string) => byId[id], [byId]);
 
   const field: NormalizedField = getField(fieldId);
   const { childFields } = field;
@@ -33,7 +33,7 @@ export const FieldsListItemContainer = ({ fieldId, treeDepth, isLastItem }: Prop
   const areActionButtonsVisible = status === 'idle';
   const childFieldsArray = useMemo(
     () => (childFields !== undefined ? childFields.map(getField) : []),
-    [childFields]
+    [childFields, getField]
   );
 
   const addField = useCallback(() => {
@@ -41,18 +41,18 @@ export const FieldsListItemContainer = ({ fieldId, treeDepth, isLastItem }: Prop
       type: 'documentField.createField',
       value: fieldId,
     });
-  }, [fieldId]);
+  }, [fieldId, dispatch]);
 
   const editField = useCallback(() => {
     dispatch({
       type: 'documentField.editField',
       value: fieldId,
     });
-  }, [fieldId]);
+  }, [fieldId, dispatch]);
 
   const toggleExpand = useCallback(() => {
     dispatch({ type: 'field.toggleExpand', value: { fieldId } });
-  }, [fieldId]);
+  }, [fieldId, dispatch]);
 
   return (
     <FieldsListItem
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/index.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/modal_confirmation_delete_fields.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/modal_confirmation_delete_fields.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/modal_confirmation_delete_fields.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields/modal_confirmation_delete_fields.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields_json_editor.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields_json_editor.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields_json_editor.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields_json_editor.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields_tree_editor.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields_tree_editor.tsx
similarity index 88%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields_tree_editor.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields_tree_editor.tsx
index f85482c22e3b1..cb0016e967c42 100644
--- a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields_tree_editor.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/fields_tree_editor.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo, useCallback } from 'react';
 import { EuiButtonEmpty, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
@@ -18,12 +18,12 @@ export const DocumentFieldsTreeEditor = () => {
     documentFields: { status, fieldToAddFieldTo },
   } = useMappingsState();
 
-  const getField = (fieldId: string) => byId[fieldId];
-  const fields = useMemo(() => rootLevelFields.map(getField), [rootLevelFields]);
+  const getField = useCallback((fieldId: string) => byId[fieldId], [byId]);
+  const fields = useMemo(() => rootLevelFields.map(getField), [rootLevelFields, getField]);
 
-  const addField = () => {
+  const addField = useCallback(() => {
     dispatch({ type: 'documentField.createField' });
-  };
+  }, [dispatch]);
 
   useEffect(() => {
     /**
@@ -32,7 +32,7 @@ export const DocumentFieldsTreeEditor = () => {
     if (status === 'idle' && fields.length === 0) {
       addField();
     }
-  }, [fields, status]);
+  }, [addField, fields, status]);
 
   const renderCreateField = () => {
     // The "fieldToAddFieldTo" is undefined when adding to the top level "properties" object.
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/index.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/search_fields/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/search_fields/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/search_fields/index.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/search_fields/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/search_fields/search_result.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/search_fields/search_result.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/search_fields/search_result.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/search_fields/search_result.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/search_fields/search_result_item.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/search_fields/search_result_item.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/document_fields/search_fields/search_result_item.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/document_fields/search_fields/search_result_item.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/fields_tree.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/fields_tree.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/fields_tree.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/fields_tree.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/index.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/index.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_from_json_button.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_from_json_button.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_from_json_button.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_from_json_button.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.test.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.test.tsx
similarity index 98%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.test.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.test.tsx
index a9433d3a7530f..f8e3eca7898d2 100644
--- a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.test.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.test.tsx
@@ -19,7 +19,7 @@ jest.mock('@elastic/eui', () => ({
   ),
 }));
 
-import { registerTestBed, nextTick, TestBed } from '../../../../../../../../../test_utils';
+import { registerTestBed, nextTick, TestBed } from '../../../../../../../../test_utils';
 import { LoadMappingsProvider } from './load_mappings_provider';
 
 const ComponentToTest = ({ onJson }: { onJson: () => void }) => (
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/load_mappings/load_mappings_provider.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/multiple_mappings_warning.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/multiple_mappings_warning.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/multiple_mappings_warning.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/multiple_mappings_warning.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/templates_form/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/templates_form/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/templates_form/index.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/templates_form/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/templates_form/templates_form.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/templates_form/templates_form.tsx
similarity index 98%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/templates_form/templates_form.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/templates_form/templates_form.tsx
index 471217108ba6f..f32fcb3956e1c 100644
--- a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/templates_form/templates_form.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/templates_form/templates_form.tsx
@@ -69,7 +69,7 @@ export const TemplatesForm = React.memo(({ defaultValue }: Props) => {
       });
     });
     return subscription.unsubscribe;
-  }, [form]);
+  }, [form, dispatch]);
 
   useEffect(() => {
     if (didMountRef.current) {
@@ -80,14 +80,14 @@ export const TemplatesForm = React.memo(({ defaultValue }: Props) => {
       // Avoid reseting the form on component mount.
       didMountRef.current = true;
     }
-  }, [defaultValue]);
+  }, [defaultValue, form]);
 
   useEffect(() => {
     return () => {
       // On unmount => save in the state a snapshot of the current form data.
       dispatch({ type: 'templates.save' });
     };
-  }, []);
+  }, [dispatch]);
 
   return (
     <>
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/templates_form/templates_form_schema.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/templates_form/templates_form_schema.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/templates_form/templates_form_schema.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/templates_form/templates_form_schema.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/tree/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/tree/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/tree/index.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/tree/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/tree/tree.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/tree/tree.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/tree/tree.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/tree/tree.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/tree/tree_item.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/components/tree/tree_item.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/components/tree/tree_item.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/components/tree/tree_item.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/constants/data_types_definition.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/constants/data_types_definition.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/constants/data_types_definition.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/constants/data_types_definition.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/constants/default_values.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/constants/default_values.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/constants/default_values.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/constants/default_values.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/constants/field_options.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/constants/field_options.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/constants/field_options.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/constants/field_options.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/constants/field_options_i18n.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/constants/field_options_i18n.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/constants/field_options_i18n.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/constants/field_options_i18n.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/constants/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/constants/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/constants/index.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/constants/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/constants/mappings_editor.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/constants/mappings_editor.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/constants/mappings_editor.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/constants/mappings_editor.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/constants/parameters_definition.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/constants/parameters_definition.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/constants/parameters_definition.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/constants/parameters_definition.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/index.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/index_settings_context.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/index_settings_context.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/index_settings_context.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/index_settings_context.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/error_reporter.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/error_reporter.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/error_reporter.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/lib/error_reporter.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/extract_mappings_definition.test.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/extract_mappings_definition.test.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/extract_mappings_definition.test.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/lib/extract_mappings_definition.test.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/extract_mappings_definition.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/extract_mappings_definition.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/extract_mappings_definition.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/lib/extract_mappings_definition.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/index.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/index.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/lib/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/mappings_validator.test.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/mappings_validator.test.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/mappings_validator.test.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/lib/mappings_validator.test.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/mappings_validator.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/mappings_validator.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/mappings_validator.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/lib/mappings_validator.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/search_fields.test.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/search_fields.test.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/search_fields.test.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/lib/search_fields.test.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/search_fields.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/search_fields.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/search_fields.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/lib/search_fields.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/serializers.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/serializers.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/serializers.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/lib/serializers.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/utils.test.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/utils.test.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/utils.test.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/lib/utils.test.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/utils.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/utils.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/utils.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/lib/utils.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/validators.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/lib/validators.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/lib/validators.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/lib/validators.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/mappings_editor.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/mappings_editor.tsx
similarity index 98%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/mappings_editor.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/mappings_editor.tsx
index d79a023386e8d..b6345a7140e15 100644
--- a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/mappings_editor.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/mappings_editor.tsx
@@ -78,7 +78,7 @@ export const MappingsEditor = React.memo(({ onUpdate, defaultValue, indexSetting
         isValid: true,
       });
     }
-  }, [multipleMappingsDeclared]);
+  }, [multipleMappingsDeclared, onUpdate, defaultValue]);
 
   const changeTab = async (tab: TabName, state: State) => {
     if (selectedTab === 'advanced') {
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/mappings_state.tsx b/x-pack/plugins/index_management/public/application/components/mappings_editor/mappings_state.tsx
similarity index 98%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/mappings_state.tsx
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/mappings_state.tsx
index 65a1aa2858d14..247bd183baddf 100644
--- a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/mappings_state.tsx
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/mappings_state.tsx
@@ -168,7 +168,7 @@ export const MappingsState = React.memo(({ children, onUpdate, defaultValue }: P
       },
       isValid: state.isValid,
     });
-  }, [state]);
+  }, [state, onUpdate]);
 
   useEffect(() => {
     /**
@@ -187,7 +187,7 @@ export const MappingsState = React.memo(({ children, onUpdate, defaultValue }: P
     } else {
       didMountRef.current = true;
     }
-  }, [defaultValue]);
+  }, [defaultValue, parsedFieldsDefaultValue]);
 
   return (
     <StateContext.Provider value={state}>
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/reducer.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/reducer.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/reducer.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/reducer.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/shared_imports.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/shared_imports.ts
similarity index 72%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/shared_imports.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/shared_imports.ts
index e99d8840d57df..2979015c07455 100644
--- a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/shared_imports.ts
+++ b/x-pack/plugins/index_management/public/application/components/mappings_editor/shared_imports.ts
@@ -24,7 +24,7 @@ export {
   VALIDATION_TYPES,
   ValidationFunc,
   ValidationFuncArg,
-} from '../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib';
+} from '../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib';
 
 export {
   CheckBoxField,
@@ -39,14 +39,14 @@ export {
   ComboBoxField,
   ToggleField,
   JsonEditorField,
-} from '../../../../../../../../src/plugins/es_ui_shared/static/forms/components';
+} from '../../../../../../../src/plugins/es_ui_shared/static/forms/components';
 
 export {
   fieldFormatters,
   fieldValidators,
-} from '../../../../../../../../src/plugins/es_ui_shared/static/forms/helpers';
+} from '../../../../../../../src/plugins/es_ui_shared/static/forms/helpers';
 
 export {
   JsonEditor,
   OnJsonEditorUpdateHandler,
-} from '../../../../../../../../src/plugins/es_ui_shared/public';
+} from '../../../../../../../src/plugins/es_ui_shared/public';
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/types.ts b/x-pack/plugins/index_management/public/application/components/mappings_editor/types.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/mappings_editor/types.ts
rename to x-pack/plugins/index_management/public/application/components/mappings_editor/types.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/no_match/index.ts b/x-pack/plugins/index_management/public/application/components/no_match/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/no_match/index.ts
rename to x-pack/plugins/index_management/public/application/components/no_match/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/no_match/no_match.tsx b/x-pack/plugins/index_management/public/application/components/no_match/no_match.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/no_match/no_match.tsx
rename to x-pack/plugins/index_management/public/application/components/no_match/no_match.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/page_error/index.ts b/x-pack/plugins/index_management/public/application/components/page_error/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/page_error/index.ts
rename to x-pack/plugins/index_management/public/application/components/page_error/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/page_error/page_error_forbidden.tsx b/x-pack/plugins/index_management/public/application/components/page_error/page_error_forbidden.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/page_error/page_error_forbidden.tsx
rename to x-pack/plugins/index_management/public/application/components/page_error/page_error_forbidden.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/section_error.tsx b/x-pack/plugins/index_management/public/application/components/section_error.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/section_error.tsx
rename to x-pack/plugins/index_management/public/application/components/section_error.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/section_loading.tsx b/x-pack/plugins/index_management/public/application/components/section_loading.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/section_loading.tsx
rename to x-pack/plugins/index_management/public/application/components/section_loading.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/template_delete_modal.tsx b/x-pack/plugins/index_management/public/application/components/template_delete_modal.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/template_delete_modal.tsx
rename to x-pack/plugins/index_management/public/application/components/template_delete_modal.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/template_form/index.ts b/x-pack/plugins/index_management/public/application/components/template_form/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/template_form/index.ts
rename to x-pack/plugins/index_management/public/application/components/template_form/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/template_form/steps/index.ts b/x-pack/plugins/index_management/public/application/components/template_form/steps/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/template_form/steps/index.ts
rename to x-pack/plugins/index_management/public/application/components/template_form/steps/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/template_form/steps/step_aliases.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_aliases.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/template_form/steps/step_aliases.tsx
rename to x-pack/plugins/index_management/public/application/components/template_form/steps/step_aliases.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx
similarity index 94%
rename from x-pack/legacy/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx
rename to x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx
index dd8d49a569042..2f6e055b5d0c6 100644
--- a/x-pack/legacy/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx
+++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_logistics.tsx
@@ -7,15 +7,8 @@ import React, { useEffect } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiButtonEmpty, EuiSpacer } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import {
-  useForm,
-  Form,
-  getUseField,
-} from '../../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib';
-import {
-  getFormRow,
-  Field,
-} from '../../../../../../../../../src/plugins/es_ui_shared/static/forms/components';
+
+import { useForm, Form, getUseField, getFormRow, Field } from '../../../../shared_imports';
 import { documentationService } from '../../../services/documentation';
 import { StepProps } from '../types';
 import { schemas, nameConfig, nameConfigWithoutValidations } from '../template_form_schemas';
@@ -80,11 +73,11 @@ export const StepLogistics: React.FunctionComponent<StepProps> = ({
 
   useEffect(() => {
     onStepValidityChange(form.isValid);
-  }, [form.isValid]);
+  }, [form.isValid, onStepValidityChange]);
 
   useEffect(() => {
     setDataGetter(form.submit);
-  }, [form]);
+  }, [form.submit, setDataGetter]);
 
   const { name, indexPatterns, order, version } = fieldsMeta;
 
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/template_form/steps/step_mappings.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_mappings.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/template_form/steps/step_mappings.tsx
rename to x-pack/plugins/index_management/public/application/components/template_form/steps/step_mappings.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/template_form/steps/step_review.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_review.tsx
similarity index 98%
rename from x-pack/legacy/plugins/index_management/public/application/components/template_form/steps/step_review.tsx
rename to x-pack/plugins/index_management/public/application/components/template_form/steps/step_review.tsx
index 09172bf5cd0ca..09da43b83c3c5 100644
--- a/x-pack/legacy/plugins/index_management/public/application/components/template_form/steps/step_review.tsx
+++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_review.tsx
@@ -20,7 +20,7 @@ import {
   EuiCodeBlock,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { serializers } from '../../../../../../../../../src/plugins/es_ui_shared/static/forms/helpers';
+import { serializers } from '../../../../shared_imports';
 
 import { serializeTemplate } from '../../../../../common/lib/template_serialization';
 import { Template } from '../../../../../common/types';
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/template_form/steps/step_settings.tsx b/x-pack/plugins/index_management/public/application/components/template_form/steps/step_settings.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/template_form/steps/step_settings.tsx
rename to x-pack/plugins/index_management/public/application/components/template_form/steps/step_settings.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/template_form/steps/use_json_step.ts b/x-pack/plugins/index_management/public/application/components/template_form/steps/use_json_step.ts
similarity index 83%
rename from x-pack/legacy/plugins/index_management/public/application/components/template_form/steps/use_json_step.ts
rename to x-pack/plugins/index_management/public/application/components/template_form/steps/use_json_step.ts
index ae16a2e9263ff..fbe479ea0cf23 100644
--- a/x-pack/legacy/plugins/index_management/public/application/components/template_form/steps/use_json_step.ts
+++ b/x-pack/plugins/index_management/public/application/components/template_form/steps/use_json_step.ts
@@ -4,10 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { useEffect, useState } from 'react';
+import { useEffect, useState, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
 
-import { isJSON } from '../../../../../../../../../src/plugins/es_ui_shared/static/validators/string';
+import { isJSON } from '../../../../shared_imports';
 import { StepProps } from '../types';
 
 interface Parameters {
@@ -29,7 +29,7 @@ export const useJsonStep = ({
   const [content, setContent] = useState<string>(stringifyJson(defaultValue));
   const [error, setError] = useState<string | null>(null);
 
-  const validateContent = () => {
+  const validateContent = useCallback(() => {
     // We allow empty string as it will be converted to "{}""
     const isValid = content.trim() === '' ? true : isJSON(content);
     if (!isValid) {
@@ -42,20 +42,20 @@ export const useJsonStep = ({
       setError(null);
     }
     return isValid;
-  };
+  }, [content]);
 
-  const dataGetter = () => {
+  const dataGetter = useCallback(() => {
     const isValid = validateContent();
     const value = isValid && content.trim() !== '' ? JSON.parse(content) : {};
     const data = { [prop]: value };
     return Promise.resolve({ isValid, data });
-  };
+  }, [content, validateContent, prop]);
 
   useEffect(() => {
     const isValid = validateContent();
     onStepValidityChange(isValid);
     setDataGetter(dataGetter);
-  }, [content]);
+  }, [content, dataGetter, onStepValidityChange, setDataGetter, validateContent]);
 
   return {
     content,
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/template_form/template_form.tsx b/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx
similarity index 92%
rename from x-pack/legacy/plugins/index_management/public/application/components/template_form/template_form.tsx
rename to x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx
index 6a76e1d203b70..58be9b2c63365 100644
--- a/x-pack/legacy/plugins/index_management/public/application/components/template_form/template_form.tsx
+++ b/x-pack/plugins/index_management/public/application/components/template_form/template_form.tsx
@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { Fragment, useState, useRef } from 'react';
+import React, { Fragment, useState, useRef, useCallback } from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiButton,
@@ -14,7 +14,7 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 
-import { serializers } from '../../../../../../../../src/plugins/es_ui_shared/static/forms/helpers';
+import { serializers } from '../../../shared_imports';
 import { Template } from '../../../../common/types';
 import { TemplateSteps } from './template_steps';
 import { StepAliases, StepLogistics, StepMappings, StepSettings, StepReview } from './steps';
@@ -70,19 +70,25 @@ export const TemplateForm: React.FunctionComponent<Props> = ({
   const CurrentStepComponent = stepComponentMap[currentStep];
   const isStepValid = validation[currentStep].isValid;
 
-  const setStepDataGetter = (stepDataGetter: DataGetterFunc) => {
-    stepsDataGetters.current[currentStep] = stepDataGetter;
-  };
+  const setStepDataGetter = useCallback(
+    (stepDataGetter: DataGetterFunc) => {
+      stepsDataGetters.current[currentStep] = stepDataGetter;
+    },
+    [currentStep]
+  );
 
-  const onStepValidityChange = (isValid: boolean | undefined) => {
-    setValidation(prev => ({
-      ...prev,
-      [currentStep]: {
-        isValid,
-        errors: {},
-      },
-    }));
-  };
+  const onStepValidityChange = useCallback(
+    (isValid: boolean | undefined) => {
+      setValidation(prev => ({
+        ...prev,
+        [currentStep]: {
+          isValid,
+          errors: {},
+        },
+      }));
+    },
+    [currentStep]
+  );
 
   const validateAndGetDataFromCurrentStep = async () => {
     const validateAndGetData = stepsDataGetters.current[currentStep];
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx b/x-pack/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx
similarity index 96%
rename from x-pack/legacy/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx
rename to x-pack/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx
index ed2616cc64e38..9ff73b71adf50 100644
--- a/x-pack/legacy/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx
+++ b/x-pack/plugins/index_management/public/application/components/template_form/template_form_schemas.tsx
@@ -13,12 +13,9 @@ import {
   FIELD_TYPES,
   VALIDATION_TYPES,
   FieldConfig,
-} from '../../../../../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib';
-
-import {
   fieldFormatters,
   fieldValidators,
-} from '../../../../../../../../src/plugins/es_ui_shared/static/forms/helpers';
+} from '../../../shared_imports';
 
 import {
   INVALID_INDEX_PATTERN_CHARS,
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/template_form/template_steps.tsx b/x-pack/plugins/index_management/public/application/components/template_form/template_steps.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/template_form/template_steps.tsx
rename to x-pack/plugins/index_management/public/application/components/template_form/template_steps.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/components/template_form/types.ts b/x-pack/plugins/index_management/public/application/components/template_form/types.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/components/template_form/types.ts
rename to x-pack/plugins/index_management/public/application/components/template_form/types.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/constants/detail_panel_tabs.ts b/x-pack/plugins/index_management/public/application/constants/detail_panel_tabs.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/constants/detail_panel_tabs.ts
rename to x-pack/plugins/index_management/public/application/constants/detail_panel_tabs.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/constants/index.ts b/x-pack/plugins/index_management/public/application/constants/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/constants/index.ts
rename to x-pack/plugins/index_management/public/application/constants/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/constants/refresh_intervals.ts b/x-pack/plugins/index_management/public/application/constants/refresh_intervals.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/constants/refresh_intervals.ts
rename to x-pack/plugins/index_management/public/application/constants/refresh_intervals.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/index.tsx b/x-pack/plugins/index_management/public/application/index.tsx
similarity index 94%
rename from x-pack/legacy/plugins/index_management/public/application/index.tsx
rename to x-pack/plugins/index_management/public/application/index.tsx
index b9859903f1434..5850cb8d42f1a 100644
--- a/x-pack/legacy/plugins/index_management/public/application/index.tsx
+++ b/x-pack/plugins/index_management/public/application/index.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { Provider } from 'react-redux';
 import { render, unmountComponentAtNode } from 'react-dom';
 
-import { CoreStart } from '../../../../../../src/core/public';
+import { CoreStart } from '../../../../../src/core/public';
 
 import { AppContextProvider, AppDependencies } from './app_context';
 import { App } from './app';
diff --git a/x-pack/legacy/plugins/index_management/public/application/lib/ace.js b/x-pack/plugins/index_management/public/application/lib/ace.js
similarity index 94%
rename from x-pack/legacy/plugins/index_management/public/application/lib/ace.js
rename to x-pack/plugins/index_management/public/application/lib/ace.js
index b9620dfbdb120..3b37c8fb8870e 100644
--- a/x-pack/legacy/plugins/index_management/public/application/lib/ace.js
+++ b/x-pack/plugins/index_management/public/application/lib/ace.js
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import ace from 'ace';
+import brace from 'brace';
 import 'brace/ext/language_tools';
 
 const splitTokens = line => {
@@ -43,14 +43,14 @@ const wordCompleter = words => {
 };
 
 export const createAceEditor = (div, value, readOnly = true, autocompleteArray) => {
-  const editor = ace.edit(div);
+  const editor = brace.edit(div);
   editor.$blockScrolling = Infinity;
   editor.setValue(value, -1);
   const session = editor.getSession();
   session.setUseWrapMode(true);
   session.setMode('ace/mode/json');
   if (autocompleteArray) {
-    const languageTools = ace.acequire('ace/ext/language_tools');
+    const languageTools = brace.acequire('ace/ext/language_tools');
     const autocompleter = wordCompleter(autocompleteArray);
     languageTools.setCompleters([autocompleter]);
   }
diff --git a/x-pack/legacy/plugins/index_management/public/application/lib/edit_settings.js b/x-pack/plugins/index_management/public/application/lib/edit_settings.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/lib/edit_settings.js
rename to x-pack/plugins/index_management/public/application/lib/edit_settings.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/lib/flatten_object.js b/x-pack/plugins/index_management/public/application/lib/flatten_object.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/lib/flatten_object.js
rename to x-pack/plugins/index_management/public/application/lib/flatten_object.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/lib/flatten_panel_tree.js b/x-pack/plugins/index_management/public/application/lib/flatten_panel_tree.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/lib/flatten_panel_tree.js
rename to x-pack/plugins/index_management/public/application/lib/flatten_panel_tree.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/lib/index_status_labels.js b/x-pack/plugins/index_management/public/application/lib/index_status_labels.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/lib/index_status_labels.js
rename to x-pack/plugins/index_management/public/application/lib/index_status_labels.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/lib/manage_angular_lifecycle.ts b/x-pack/plugins/index_management/public/application/lib/manage_angular_lifecycle.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/lib/manage_angular_lifecycle.ts
rename to x-pack/plugins/index_management/public/application/lib/manage_angular_lifecycle.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/lib/render_badges.js b/x-pack/plugins/index_management/public/application/lib/render_badges.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/lib/render_badges.js
rename to x-pack/plugins/index_management/public/application/lib/render_badges.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/home.tsx b/x-pack/plugins/index_management/public/application/sections/home/home.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/home.tsx
rename to x-pack/plugins/index_management/public/application/sections/home/home.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/index.ts b/x-pack/plugins/index_management/public/application/sections/home/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/index.ts
rename to x-pack/plugins/index_management/public/application/sections/home/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/detail_panel.container.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/detail_panel.container.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/detail_panel.container.js
rename to x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/detail_panel.container.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/detail_panel.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/detail_panel.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/detail_panel.js
rename to x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/detail_panel.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/edit_settings_json/edit_settings_json.container.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/edit_settings_json/edit_settings_json.container.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/edit_settings_json/edit_settings_json.container.js
rename to x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/edit_settings_json/edit_settings_json.container.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/edit_settings_json/edit_settings_json.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/edit_settings_json/edit_settings_json.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/edit_settings_json/edit_settings_json.js
rename to x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/edit_settings_json/edit_settings_json.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/edit_settings_json/index.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/edit_settings_json/index.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/edit_settings_json/index.js
rename to x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/edit_settings_json/index.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/index.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/index.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/index.js
rename to x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/index.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/show_json/index.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/show_json/index.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/show_json/index.js
rename to x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/show_json/index.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/show_json/show_json.container.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/show_json/show_json.container.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/show_json/show_json.container.js
rename to x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/show_json/show_json.container.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/show_json/show_json.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/show_json/show_json.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/show_json/show_json.js
rename to x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/show_json/show_json.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/summary/index.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/summary/index.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/summary/index.js
rename to x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/summary/index.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/summary/summary.container.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/summary/summary.container.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/summary/summary.container.js
rename to x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/summary/summary.container.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/summary/summary.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/summary/summary.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/detail_panel/summary/summary.js
rename to x-pack/plugins/index_management/public/application/sections/home/index_list/detail_panel/summary/summary.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/index.ts b/x-pack/plugins/index_management/public/application/sections/home/index_list/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/index.ts
rename to x-pack/plugins/index_management/public/application/sections/home/index_list/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/index_actions_context_menu/index.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/index_actions_context_menu/index.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/index_actions_context_menu/index.js
rename to x-pack/plugins/index_management/public/application/sections/home/index_list/index_actions_context_menu/index.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.container.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.container.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.container.js
rename to x-pack/plugins/index_management/public/application/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.container.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.js
rename to x-pack/plugins/index_management/public/application/sections/home/index_list/index_actions_context_menu/index_actions_context_menu.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/index_list.d.ts b/x-pack/plugins/index_management/public/application/sections/home/index_list/index_list.d.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/index_list.d.ts
rename to x-pack/plugins/index_management/public/application/sections/home/index_list/index_list.d.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/index_list.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/index_list.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/index_list.js
rename to x-pack/plugins/index_management/public/application/sections/home/index_list/index_list.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/index_table/index.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/index_table/index.js
rename to x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.container.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.container.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.container.js
rename to x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.container.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.js b/x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.js
rename to x-pack/plugins/index_management/public/application/sections/home/index_list/index_table/index_table.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/index.ts b/x-pack/plugins/index_management/public/application/sections/home/template_list/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/index.ts
rename to x-pack/plugins/index_management/public/application/sections/home/template_list/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/template_details/index.ts b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/template_details/index.ts
rename to x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/index.ts b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/index.ts
rename to x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/tab_aliases.tsx b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/tab_aliases.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/tab_aliases.tsx
rename to x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/tab_aliases.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/tab_mappings.tsx b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/tab_mappings.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/tab_mappings.tsx
rename to x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/tab_mappings.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/tab_settings.tsx b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/tab_settings.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/tab_settings.tsx
rename to x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/tab_settings.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/tab_summary.tsx b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/tab_summary.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/tab_summary.tsx
rename to x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/tabs/tab_summary.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/template_details/template_details.tsx b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/template_details.tsx
similarity index 98%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/template_details/template_details.tsx
rename to x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/template_details.tsx
index ced8bd97e744b..9c31b0d650449 100644
--- a/x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/template_details/template_details.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_details/template_details.tsx
@@ -32,7 +32,7 @@ import {
 } from '../../../../../../common/constants';
 import { Template } from '../../../../../../common/types';
 import { TemplateDeleteModal, SectionLoading, SectionError, Error } from '../../../../components';
-import { loadIndexTemplate } from '../../../../services/api';
+import { useLoadIndexTemplate } from '../../../../services/api';
 import { decodePath } from '../../../../services/routing';
 import { SendRequestResponse } from '../../../../../shared_imports';
 import { useServices } from '../../../../app_context';
@@ -103,7 +103,7 @@ export const TemplateDetails: React.FunctionComponent<Props> = ({
 }) => {
   const { uiMetricService } = useServices();
   const decodedTemplateName = decodePath(templateName);
-  const { error, data: templateDetails, isLoading } = loadIndexTemplate(decodedTemplateName);
+  const { error, data: templateDetails, isLoading } = useLoadIndexTemplate(decodedTemplateName);
   // TS complains if we use destructuring here. Fixed in 3.6.0 (https://github.com/microsoft/TypeScript/pull/31711).
   const isManaged = templateDetails ? templateDetails.isManaged : undefined;
   const [templateToDelete, setTemplateToDelete] = useState<Array<Template['name']>>([]);
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/template_list.tsx b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_list.tsx
similarity index 97%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/template_list.tsx
rename to x-pack/plugins/index_management/public/application/sections/home/template_list/template_list.tsx
index 71c32e2e0177f..ffdb224f16271 100644
--- a/x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/template_list.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_list.tsx
@@ -18,7 +18,7 @@ import {
 } from '@elastic/eui';
 import { SectionError, SectionLoading, Error } from '../../../components';
 import { TemplateTable } from './template_table';
-import { loadIndexTemplates } from '../../../services/api';
+import { useLoadIndexTemplates } from '../../../services/api';
 import { Template } from '../../../../../common/types';
 import { useServices } from '../../../app_context';
 import {
@@ -40,7 +40,7 @@ export const TemplateList: React.FunctionComponent<RouteComponentProps<MatchPara
   history,
 }) => {
   const { uiMetricService } = useServices();
-  const { error, isLoading, data: templates, sendRequest: reload } = loadIndexTemplates();
+  const { error, isLoading, data: templates, sendRequest: reload } = useLoadIndexTemplates();
 
   let content;
 
@@ -68,7 +68,7 @@ export const TemplateList: React.FunctionComponent<RouteComponentProps<MatchPara
   // Track component loaded
   useEffect(() => {
     uiMetricService.trackMetric('loaded', UIM_TEMPLATE_LIST_LOAD);
-  }, []);
+  }, [uiMetricService]);
 
   if (isLoading) {
     content = (
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/template_table/index.ts b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_table/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/template_table/index.ts
rename to x-pack/plugins/index_management/public/application/sections/home/template_list/template_table/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/template_table/template_table.tsx b/x-pack/plugins/index_management/public/application/sections/home/template_list/template_table/template_table.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/home/template_list/template_table/template_table.tsx
rename to x-pack/plugins/index_management/public/application/sections/home/template_list/template_table/template_table.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/template_clone/index.ts b/x-pack/plugins/index_management/public/application/sections/template_clone/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/template_clone/index.ts
rename to x-pack/plugins/index_management/public/application/sections/template_clone/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/template_clone/template_clone.tsx b/x-pack/plugins/index_management/public/application/sections/template_clone/template_clone.tsx
similarity index 96%
rename from x-pack/legacy/plugins/index_management/public/application/sections/template_clone/template_clone.tsx
rename to x-pack/plugins/index_management/public/application/sections/template_clone/template_clone.tsx
index 6659be5a2cf4e..cf6ca3c065777 100644
--- a/x-pack/legacy/plugins/index_management/public/application/sections/template_clone/template_clone.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/template_clone/template_clone.tsx
@@ -11,7 +11,7 @@ import { TemplateForm, SectionLoading, SectionError, Error } from '../../compone
 import { breadcrumbService } from '../../services/breadcrumbs';
 import { decodePath, getTemplateDetailsLink } from '../../services/routing';
 import { Template } from '../../../../common/types';
-import { saveTemplate, loadIndexTemplate } from '../../services/api';
+import { saveTemplate, useLoadIndexTemplate } from '../../services/api';
 
 interface MatchParams {
   name: string;
@@ -27,7 +27,7 @@ export const TemplateClone: React.FunctionComponent<RouteComponentProps<MatchPar
   const [isSaving, setIsSaving] = useState<boolean>(false);
   const [saveError, setSaveError] = useState<any>(null);
 
-  const { error: templateToCloneError, data: templateToClone, isLoading } = loadIndexTemplate(
+  const { error: templateToCloneError, data: templateToClone, isLoading } = useLoadIndexTemplate(
     decodedTemplateName
   );
 
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/template_create/index.ts b/x-pack/plugins/index_management/public/application/sections/template_create/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/template_create/index.ts
rename to x-pack/plugins/index_management/public/application/sections/template_create/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/template_create/template_create.tsx b/x-pack/plugins/index_management/public/application/sections/template_create/template_create.tsx
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/template_create/template_create.tsx
rename to x-pack/plugins/index_management/public/application/sections/template_create/template_create.tsx
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/template_edit/index.ts b/x-pack/plugins/index_management/public/application/sections/template_edit/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/sections/template_edit/index.ts
rename to x-pack/plugins/index_management/public/application/sections/template_edit/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/sections/template_edit/template_edit.tsx b/x-pack/plugins/index_management/public/application/sections/template_edit/template_edit.tsx
similarity index 96%
rename from x-pack/legacy/plugins/index_management/public/application/sections/template_edit/template_edit.tsx
rename to x-pack/plugins/index_management/public/application/sections/template_edit/template_edit.tsx
index 69e446528a68d..1e9d5f294de34 100644
--- a/x-pack/legacy/plugins/index_management/public/application/sections/template_edit/template_edit.tsx
+++ b/x-pack/plugins/index_management/public/application/sections/template_edit/template_edit.tsx
@@ -8,7 +8,7 @@ import { RouteComponentProps } from 'react-router-dom';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiPageBody, EuiPageContent, EuiTitle, EuiSpacer, EuiCallOut } from '@elastic/eui';
 import { breadcrumbService } from '../../services/breadcrumbs';
-import { loadIndexTemplate, updateTemplate } from '../../services/api';
+import { useLoadIndexTemplate, updateTemplate } from '../../services/api';
 import { decodePath, getTemplateDetailsLink } from '../../services/routing';
 import { SectionLoading, SectionError, TemplateForm, Error } from '../../components';
 import { Template } from '../../../../common/types';
@@ -27,7 +27,7 @@ export const TemplateEdit: React.FunctionComponent<RouteComponentProps<MatchPara
   const [isSaving, setIsSaving] = useState<boolean>(false);
   const [saveError, setSaveError] = useState<any>(null);
 
-  const { error, data: template, isLoading } = loadIndexTemplate(decodedTemplateName);
+  const { error, data: template, isLoading } = useLoadIndexTemplate(decodedTemplateName);
 
   useEffect(() => {
     breadcrumbService.setBreadcrumbs('templateEdit');
diff --git a/x-pack/legacy/plugins/index_management/public/application/services/api.ts b/x-pack/plugins/index_management/public/application/services/api.ts
similarity index 98%
rename from x-pack/legacy/plugins/index_management/public/application/services/api.ts
rename to x-pack/plugins/index_management/public/application/services/api.ts
index 642fd441b353a..88887f40972e4 100644
--- a/x-pack/legacy/plugins/index_management/public/application/services/api.ts
+++ b/x-pack/plugins/index_management/public/application/services/api.ts
@@ -200,7 +200,7 @@ export async function loadIndexData(type: string, indexName: string) {
   }
 }
 
-export function loadIndexTemplates() {
+export function useLoadIndexTemplates() {
   return useRequest({
     path: `${API_BASE_PATH}/templates`,
     method: 'get',
@@ -220,7 +220,7 @@ export async function deleteTemplates(names: Array<Template['name']>) {
   return result;
 }
 
-export function loadIndexTemplate(name: Template['name']) {
+export function useLoadIndexTemplate(name: Template['name']) {
   return useRequest({
     path: `${API_BASE_PATH}/templates/${encodeURIComponent(name)}`,
     method: 'get',
diff --git a/x-pack/legacy/plugins/index_management/public/application/services/breadcrumbs.ts b/x-pack/plugins/index_management/public/application/services/breadcrumbs.ts
similarity index 96%
rename from x-pack/legacy/plugins/index_management/public/application/services/breadcrumbs.ts
rename to x-pack/plugins/index_management/public/application/services/breadcrumbs.ts
index 299491756560e..8128ccd545dce 100644
--- a/x-pack/legacy/plugins/index_management/public/application/services/breadcrumbs.ts
+++ b/x-pack/plugins/index_management/public/application/services/breadcrumbs.ts
@@ -5,7 +5,7 @@
  */
 import { i18n } from '@kbn/i18n';
 import { BASE_PATH } from '../../../common/constants';
-import { ManagementAppMountParams } from '../../../../../../../src/plugins/management/public';
+import { ManagementAppMountParams } from '../../../../../../src/plugins/management/public';
 
 type SetBreadcrumbs = ManagementAppMountParams['setBreadcrumbs'];
 
diff --git a/x-pack/legacy/plugins/index_management/public/application/services/documentation.ts b/x-pack/plugins/index_management/public/application/services/documentation.ts
similarity index 98%
rename from x-pack/legacy/plugins/index_management/public/application/services/documentation.ts
rename to x-pack/plugins/index_management/public/application/services/documentation.ts
index e0f261e586b1e..fdf07c43a0c8b 100644
--- a/x-pack/legacy/plugins/index_management/public/application/services/documentation.ts
+++ b/x-pack/plugins/index_management/public/application/services/documentation.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { DocLinksStart } from '../../../../../../../src/core/public';
+import { DocLinksStart } from '../../../../../../src/core/public';
 import { DataType } from '../components/mappings_editor/types';
 import { TYPE_DEFINITION } from '../components/mappings_editor/constants';
 
diff --git a/x-pack/legacy/plugins/index_management/public/application/services/health_to_color.ts b/x-pack/plugins/index_management/public/application/services/health_to_color.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/services/health_to_color.ts
rename to x-pack/plugins/index_management/public/application/services/health_to_color.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/services/http.ts b/x-pack/plugins/index_management/public/application/services/http.ts
similarity index 88%
rename from x-pack/legacy/plugins/index_management/public/application/services/http.ts
rename to x-pack/plugins/index_management/public/application/services/http.ts
index a6973c263f00f..931e5fcd21898 100644
--- a/x-pack/legacy/plugins/index_management/public/application/services/http.ts
+++ b/x-pack/plugins/index_management/public/application/services/http.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { HttpSetup } from '../../../../../../../src/core/public';
+import { HttpSetup } from '../../../../../../src/core/public';
 
 export class HttpService {
   private client: any;
diff --git a/x-pack/legacy/plugins/index_management/public/application/services/index.ts b/x-pack/plugins/index_management/public/application/services/index.ts
similarity index 96%
rename from x-pack/legacy/plugins/index_management/public/application/services/index.ts
rename to x-pack/plugins/index_management/public/application/services/index.ts
index 78ff8cb5c314a..2334d32adf131 100644
--- a/x-pack/legacy/plugins/index_management/public/application/services/index.ts
+++ b/x-pack/plugins/index_management/public/application/services/index.ts
@@ -21,7 +21,7 @@ export {
   loadIndexStats,
   loadIndexMapping,
   loadIndexData,
-  loadIndexTemplates,
+  useLoadIndexTemplates,
 } from './api';
 export { healthToColor } from './health_to_color';
 export { sortTable } from './sort_table';
diff --git a/x-pack/legacy/plugins/index_management/public/application/services/navigation.ts b/x-pack/plugins/index_management/public/application/services/navigation.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/services/navigation.ts
rename to x-pack/plugins/index_management/public/application/services/navigation.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/services/notification.ts b/x-pack/plugins/index_management/public/application/services/notification.ts
similarity index 93%
rename from x-pack/legacy/plugins/index_management/public/application/services/notification.ts
rename to x-pack/plugins/index_management/public/application/services/notification.ts
index 0971ca77c004b..82b9de2272747 100644
--- a/x-pack/legacy/plugins/index_management/public/application/services/notification.ts
+++ b/x-pack/plugins/index_management/public/application/services/notification.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { NotificationsStart } from '../../../../../../../src/core/public';
+import { NotificationsStart } from '../../../../../../src/core/public';
 
 export class NotificationService {
   private _toasts: any;
diff --git a/x-pack/legacy/plugins/index_management/public/application/services/routing.ts b/x-pack/plugins/index_management/public/application/services/routing.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/services/routing.ts
rename to x-pack/plugins/index_management/public/application/services/routing.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/services/sort_table.ts b/x-pack/plugins/index_management/public/application/services/sort_table.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/services/sort_table.ts
rename to x-pack/plugins/index_management/public/application/services/sort_table.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/services/ui_metric.ts b/x-pack/plugins/index_management/public/application/services/ui_metric.ts
similarity index 90%
rename from x-pack/legacy/plugins/index_management/public/application/services/ui_metric.ts
rename to x-pack/plugins/index_management/public/application/services/ui_metric.ts
index 7c87ec9509085..73d2ef5aced86 100644
--- a/x-pack/legacy/plugins/index_management/public/application/services/ui_metric.ts
+++ b/x-pack/plugins/index_management/public/application/services/ui_metric.ts
@@ -4,7 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { UiStatsMetricType } from '@kbn/analytics';
-import { UsageCollectionSetup } from '../../../../../../../src/plugins/usage_collection/public';
+
+import { UsageCollectionSetup } from '../../../../../../src/plugins/usage_collection/public';
 import { IndexMgmtMetricsType } from '../../types';
 
 let uiMetricService: UiMetricService<IndexMgmtMetricsType>;
@@ -23,7 +24,8 @@ export class UiMetricService<T extends string> {
 
   private track(type: T, name: string) {
     if (!this.usageCollection) {
-      throw Error('UiMetricService not initialized.');
+      // Usage collection might have been disabled in Kibana config.
+      return;
     }
     this.usageCollection.reportUiStats(this.appName, type as UiStatsMetricType, name);
   }
diff --git a/x-pack/legacy/plugins/index_management/public/application/services/use_request.ts b/x-pack/plugins/index_management/public/application/services/use_request.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/services/use_request.ts
rename to x-pack/plugins/index_management/public/application/services/use_request.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/actions/clear_cache_indices.js b/x-pack/plugins/index_management/public/application/store/actions/clear_cache_indices.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/actions/clear_cache_indices.js
rename to x-pack/plugins/index_management/public/application/store/actions/clear_cache_indices.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/actions/clear_row_status.js b/x-pack/plugins/index_management/public/application/store/actions/clear_row_status.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/actions/clear_row_status.js
rename to x-pack/plugins/index_management/public/application/store/actions/clear_row_status.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/actions/close_indices.js b/x-pack/plugins/index_management/public/application/store/actions/close_indices.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/actions/close_indices.js
rename to x-pack/plugins/index_management/public/application/store/actions/close_indices.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/actions/delete_indices.js b/x-pack/plugins/index_management/public/application/store/actions/delete_indices.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/actions/delete_indices.js
rename to x-pack/plugins/index_management/public/application/store/actions/delete_indices.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/actions/detail_panel.js b/x-pack/plugins/index_management/public/application/store/actions/detail_panel.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/actions/detail_panel.js
rename to x-pack/plugins/index_management/public/application/store/actions/detail_panel.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/actions/edit_index_settings.js b/x-pack/plugins/index_management/public/application/store/actions/edit_index_settings.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/actions/edit_index_settings.js
rename to x-pack/plugins/index_management/public/application/store/actions/edit_index_settings.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/actions/extension_action.js b/x-pack/plugins/index_management/public/application/store/actions/extension_action.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/actions/extension_action.js
rename to x-pack/plugins/index_management/public/application/store/actions/extension_action.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/actions/flush_indices.js b/x-pack/plugins/index_management/public/application/store/actions/flush_indices.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/actions/flush_indices.js
rename to x-pack/plugins/index_management/public/application/store/actions/flush_indices.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/actions/forcemerge_indices.js b/x-pack/plugins/index_management/public/application/store/actions/forcemerge_indices.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/actions/forcemerge_indices.js
rename to x-pack/plugins/index_management/public/application/store/actions/forcemerge_indices.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/actions/freeze_indices.js b/x-pack/plugins/index_management/public/application/store/actions/freeze_indices.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/actions/freeze_indices.js
rename to x-pack/plugins/index_management/public/application/store/actions/freeze_indices.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/actions/index.js b/x-pack/plugins/index_management/public/application/store/actions/index.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/actions/index.js
rename to x-pack/plugins/index_management/public/application/store/actions/index.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/actions/load_index_data.js b/x-pack/plugins/index_management/public/application/store/actions/load_index_data.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/actions/load_index_data.js
rename to x-pack/plugins/index_management/public/application/store/actions/load_index_data.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/actions/load_indices.js b/x-pack/plugins/index_management/public/application/store/actions/load_indices.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/actions/load_indices.js
rename to x-pack/plugins/index_management/public/application/store/actions/load_indices.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/actions/open_indices.js b/x-pack/plugins/index_management/public/application/store/actions/open_indices.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/actions/open_indices.js
rename to x-pack/plugins/index_management/public/application/store/actions/open_indices.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/actions/refresh_indices.js b/x-pack/plugins/index_management/public/application/store/actions/refresh_indices.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/actions/refresh_indices.js
rename to x-pack/plugins/index_management/public/application/store/actions/refresh_indices.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/actions/reload_indices.js b/x-pack/plugins/index_management/public/application/store/actions/reload_indices.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/actions/reload_indices.js
rename to x-pack/plugins/index_management/public/application/store/actions/reload_indices.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/actions/table_state.js b/x-pack/plugins/index_management/public/application/store/actions/table_state.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/actions/table_state.js
rename to x-pack/plugins/index_management/public/application/store/actions/table_state.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/actions/unfreeze_indices.js b/x-pack/plugins/index_management/public/application/store/actions/unfreeze_indices.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/actions/unfreeze_indices.js
rename to x-pack/plugins/index_management/public/application/store/actions/unfreeze_indices.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/actions/update_index_settings.js b/x-pack/plugins/index_management/public/application/store/actions/update_index_settings.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/actions/update_index_settings.js
rename to x-pack/plugins/index_management/public/application/store/actions/update_index_settings.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/index.ts b/x-pack/plugins/index_management/public/application/store/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/index.ts
rename to x-pack/plugins/index_management/public/application/store/index.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/reducers/detail_panel.js b/x-pack/plugins/index_management/public/application/store/reducers/detail_panel.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/reducers/detail_panel.js
rename to x-pack/plugins/index_management/public/application/store/reducers/detail_panel.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/reducers/index.js b/x-pack/plugins/index_management/public/application/store/reducers/index.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/reducers/index.js
rename to x-pack/plugins/index_management/public/application/store/reducers/index.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/reducers/index_management.js b/x-pack/plugins/index_management/public/application/store/reducers/index_management.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/reducers/index_management.js
rename to x-pack/plugins/index_management/public/application/store/reducers/index_management.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/reducers/indices.js b/x-pack/plugins/index_management/public/application/store/reducers/indices.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/reducers/indices.js
rename to x-pack/plugins/index_management/public/application/store/reducers/indices.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/reducers/row_status.js b/x-pack/plugins/index_management/public/application/store/reducers/row_status.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/reducers/row_status.js
rename to x-pack/plugins/index_management/public/application/store/reducers/row_status.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/reducers/table_state.js b/x-pack/plugins/index_management/public/application/store/reducers/table_state.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/reducers/table_state.js
rename to x-pack/plugins/index_management/public/application/store/reducers/table_state.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/selectors/index.d.ts b/x-pack/plugins/index_management/public/application/store/selectors/index.d.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/selectors/index.d.ts
rename to x-pack/plugins/index_management/public/application/store/selectors/index.d.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/selectors/index.js b/x-pack/plugins/index_management/public/application/store/selectors/index.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/selectors/index.js
rename to x-pack/plugins/index_management/public/application/store/selectors/index.js
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/store.d.ts b/x-pack/plugins/index_management/public/application/store/store.d.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/store.d.ts
rename to x-pack/plugins/index_management/public/application/store/store.d.ts
diff --git a/x-pack/legacy/plugins/index_management/public/application/store/store.js b/x-pack/plugins/index_management/public/application/store/store.js
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/application/store/store.js
rename to x-pack/plugins/index_management/public/application/store/store.js
diff --git a/x-pack/legacy/plugins/index_management/public/index.scss b/x-pack/plugins/index_management/public/index.scss
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/index.scss
rename to x-pack/plugins/index_management/public/index.scss
diff --git a/x-pack/legacy/plugins/index_management/public/index.ts b/x-pack/plugins/index_management/public/index.ts
similarity index 66%
rename from x-pack/legacy/plugins/index_management/public/index.ts
rename to x-pack/plugins/index_management/public/index.ts
index 16e7bf21aee98..6bb921ef648f3 100644
--- a/x-pack/legacy/plugins/index_management/public/index.ts
+++ b/x-pack/plugins/index_management/public/index.ts
@@ -3,19 +3,14 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { npSetup } from 'ui/new_platform';
-
+import './index.scss';
 import { IndexMgmtUIPlugin, IndexMgmtSetup } from './plugin';
 
 /** @public */
-export { IndexMgmtSetup };
-
 export const plugin = () => {
   return new IndexMgmtUIPlugin();
 };
 
-// Temp. To be removed after moving to the "plugins" folder
-
-const { extensionsService } = plugin().setup(npSetup.core, npSetup.plugins);
+export { IndexMgmtSetup };
 
-export { extensionsService };
+export { getIndexListUri } from './application/services/navigation';
diff --git a/x-pack/legacy/plugins/index_management/public/mocks.ts b/x-pack/plugins/index_management/public/mocks.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/mocks.ts
rename to x-pack/plugins/index_management/public/mocks.ts
diff --git a/x-pack/legacy/plugins/index_management/public/plugin.ts b/x-pack/plugins/index_management/public/plugin.ts
similarity index 90%
rename from x-pack/legacy/plugins/index_management/public/plugin.ts
rename to x-pack/plugins/index_management/public/plugin.ts
index 539324766cf95..c1b26fe3ca56b 100644
--- a/x-pack/legacy/plugins/index_management/public/plugin.ts
+++ b/x-pack/plugins/index_management/public/plugin.ts
@@ -5,10 +5,10 @@
  */
 import { i18n } from '@kbn/i18n';
 
-import { CoreSetup } from '../../../../../src/core/public';
-import { UsageCollectionSetup } from '../../../../../src/plugins/usage_collection/public';
-import { ManagementSetup } from '../../../../../src/plugins/management/public';
-import { UIM_APP_NAME } from '../common/constants';
+import { CoreSetup } from '../../../../src/core/public';
+import { UsageCollectionSetup } from '../../../../src/plugins/usage_collection/public';
+import { ManagementSetup } from '../../../../src/plugins/management/public';
+import { UIM_APP_NAME, PLUGIN } from '../common/constants';
 
 import { AppDependencies } from './application';
 import { httpService } from './application/services/http';
@@ -52,7 +52,7 @@ export class IndexMgmtUIPlugin {
     this.uiMetricService.setup(usageCollection);
 
     management.sections.getSection('elasticsearch')!.registerApp({
-      id: 'index_management',
+      id: PLUGIN.id,
       title: i18n.translate('xpack.idxMgmt.appTitle', { defaultMessage: 'Index Management' }),
       order: 1,
       mount: async ({ element, setBreadcrumbs }) => {
diff --git a/x-pack/legacy/plugins/index_management/public/services/extensions_service.mock.ts b/x-pack/plugins/index_management/public/services/extensions_service.mock.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/services/extensions_service.mock.ts
rename to x-pack/plugins/index_management/public/services/extensions_service.mock.ts
diff --git a/x-pack/legacy/plugins/index_management/public/services/extensions_service.ts b/x-pack/plugins/index_management/public/services/extensions_service.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/services/extensions_service.ts
rename to x-pack/plugins/index_management/public/services/extensions_service.ts
diff --git a/x-pack/legacy/plugins/index_management/public/services/index.ts b/x-pack/plugins/index_management/public/services/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/services/index.ts
rename to x-pack/plugins/index_management/public/services/index.ts
diff --git a/x-pack/plugins/index_management/public/shared_imports.ts b/x-pack/plugins/index_management/public/shared_imports.ts
new file mode 100644
index 0000000000000..cd2964df23d9b
--- /dev/null
+++ b/x-pack/plugins/index_management/public/shared_imports.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;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export {
+  SendRequestConfig,
+  SendRequestResponse,
+  UseRequestConfig,
+  sendRequest,
+  useRequest,
+} from '../../../../src/plugins/es_ui_shared/public/request/np_ready_request';
+
+export {
+  FormSchema,
+  FIELD_TYPES,
+  VALIDATION_TYPES,
+  FieldConfig,
+  useForm,
+  Form,
+  getUseField,
+} from '../../../../src/plugins/es_ui_shared/static/forms/hook_form_lib';
+
+export {
+  fieldFormatters,
+  fieldValidators,
+  serializers,
+} from '../../../../src/plugins/es_ui_shared/static/forms/helpers';
+
+export { getFormRow, Field } from '../../../../src/plugins/es_ui_shared/static/forms/components';
+
+export { isJSON } from '../../../../src/plugins/es_ui_shared/static/validators/string';
diff --git a/x-pack/legacy/plugins/index_management/public/types.ts b/x-pack/plugins/index_management/public/types.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/public/types.ts
rename to x-pack/plugins/index_management/public/types.ts
diff --git a/x-pack/legacy/plugins/uptime/server/lib/helper/parse_filter_query.ts b/x-pack/plugins/index_management/server/config.ts
similarity index 52%
rename from x-pack/legacy/plugins/uptime/server/lib/helper/parse_filter_query.ts
rename to x-pack/plugins/index_management/server/config.ts
index 4c73ec53af9b9..5f03575d3ff43 100644
--- a/x-pack/legacy/plugins/uptime/server/lib/helper/parse_filter_query.ts
+++ b/x-pack/plugins/index_management/server/config.ts
@@ -4,10 +4,10 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export const parseFilterQuery = (query?: string | null) => {
-  try {
-    return query ? JSON.parse(query) : null;
-  } catch {
-    return null;
-  }
-};
+import { schema, TypeOf } from '@kbn/config-schema';
+
+export const configSchema = schema.object({
+  enabled: schema.boolean({ defaultValue: true }),
+});
+
+export type IndexManagementConfig = TypeOf<typeof configSchema>;
diff --git a/x-pack/legacy/plugins/index_management/server/index.ts b/x-pack/plugins/index_management/server/index.ts
similarity index 67%
rename from x-pack/legacy/plugins/index_management/server/index.ts
rename to x-pack/plugins/index_management/server/index.ts
index 866b374740d3b..e4102711708cb 100644
--- a/x-pack/legacy/plugins/index_management/server/index.ts
+++ b/x-pack/plugins/index_management/server/index.ts
@@ -5,8 +5,18 @@
  */
 
 import { PluginInitializerContext } from 'src/core/server';
+
 import { IndexMgmtServerPlugin } from './plugin';
+import { configSchema } from './config';
 
 export const plugin = (ctx: PluginInitializerContext) => new IndexMgmtServerPlugin(ctx);
 
+export const config = {
+  schema: configSchema,
+};
+
+/** @public */
 export { Dependencies } from './types';
+export { IndexMgmtSetup } from './plugin';
+export { Index } from './types';
+export { IndexManagementConfig } from './config';
diff --git a/x-pack/legacy/plugins/index_management/server/lib/fetch_aliases.test.ts b/x-pack/plugins/index_management/server/lib/fetch_aliases.test.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/lib/fetch_aliases.test.ts
rename to x-pack/plugins/index_management/server/lib/fetch_aliases.test.ts
diff --git a/x-pack/legacy/plugins/index_management/server/lib/fetch_aliases.ts b/x-pack/plugins/index_management/server/lib/fetch_aliases.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/lib/fetch_aliases.ts
rename to x-pack/plugins/index_management/server/lib/fetch_aliases.ts
diff --git a/x-pack/legacy/plugins/index_management/server/lib/fetch_indices.ts b/x-pack/plugins/index_management/server/lib/fetch_indices.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/lib/fetch_indices.ts
rename to x-pack/plugins/index_management/server/lib/fetch_indices.ts
diff --git a/x-pack/legacy/plugins/index_management/server/lib/get_managed_templates.ts b/x-pack/plugins/index_management/server/lib/get_managed_templates.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/lib/get_managed_templates.ts
rename to x-pack/plugins/index_management/server/lib/get_managed_templates.ts
diff --git a/x-pack/legacy/plugins/index_management/server/lib/is_es_error.ts b/x-pack/plugins/index_management/server/lib/is_es_error.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/lib/is_es_error.ts
rename to x-pack/plugins/index_management/server/lib/is_es_error.ts
diff --git a/x-pack/legacy/plugins/index_management/server/plugin.ts b/x-pack/plugins/index_management/server/plugin.ts
similarity index 94%
rename from x-pack/legacy/plugins/index_management/server/plugin.ts
rename to x-pack/plugins/index_management/server/plugin.ts
index 95d27e1cf16ba..a0a9151cdb71f 100644
--- a/x-pack/legacy/plugins/index_management/server/plugin.ts
+++ b/x-pack/plugins/index_management/server/plugin.ts
@@ -24,8 +24,8 @@ export class IndexMgmtServerPlugin implements Plugin<IndexMgmtSetup, void, any,
   private readonly logger: Logger;
   private readonly indexDataEnricher: IndexDataEnricher;
 
-  constructor({ logger }: PluginInitializerContext) {
-    this.logger = logger.get();
+  constructor(initContext: PluginInitializerContext) {
+    this.logger = initContext.logger.get();
     this.apiRoutes = new ApiRoutes();
     this.license = new License();
     this.indexDataEnricher = new IndexDataEnricher();
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/index.ts b/x-pack/plugins/index_management/server/routes/api/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/index.ts
rename to x-pack/plugins/index_management/server/routes/api/index.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/indices/index.ts b/x-pack/plugins/index_management/server/routes/api/indices/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/indices/index.ts
rename to x-pack/plugins/index_management/server/routes/api/indices/index.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/indices/register_clear_cache_route.ts b/x-pack/plugins/index_management/server/routes/api/indices/register_clear_cache_route.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/indices/register_clear_cache_route.ts
rename to x-pack/plugins/index_management/server/routes/api/indices/register_clear_cache_route.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/indices/register_close_route.ts b/x-pack/plugins/index_management/server/routes/api/indices/register_close_route.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/indices/register_close_route.ts
rename to x-pack/plugins/index_management/server/routes/api/indices/register_close_route.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/indices/register_delete_route.ts b/x-pack/plugins/index_management/server/routes/api/indices/register_delete_route.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/indices/register_delete_route.ts
rename to x-pack/plugins/index_management/server/routes/api/indices/register_delete_route.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/indices/register_flush_route.ts b/x-pack/plugins/index_management/server/routes/api/indices/register_flush_route.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/indices/register_flush_route.ts
rename to x-pack/plugins/index_management/server/routes/api/indices/register_flush_route.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/indices/register_forcemerge_route.ts b/x-pack/plugins/index_management/server/routes/api/indices/register_forcemerge_route.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/indices/register_forcemerge_route.ts
rename to x-pack/plugins/index_management/server/routes/api/indices/register_forcemerge_route.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/indices/register_freeze_route.ts b/x-pack/plugins/index_management/server/routes/api/indices/register_freeze_route.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/indices/register_freeze_route.ts
rename to x-pack/plugins/index_management/server/routes/api/indices/register_freeze_route.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/indices/register_indices_routes.ts b/x-pack/plugins/index_management/server/routes/api/indices/register_indices_routes.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/indices/register_indices_routes.ts
rename to x-pack/plugins/index_management/server/routes/api/indices/register_indices_routes.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/indices/register_list_route.ts b/x-pack/plugins/index_management/server/routes/api/indices/register_list_route.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/indices/register_list_route.ts
rename to x-pack/plugins/index_management/server/routes/api/indices/register_list_route.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/indices/register_open_route.ts b/x-pack/plugins/index_management/server/routes/api/indices/register_open_route.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/indices/register_open_route.ts
rename to x-pack/plugins/index_management/server/routes/api/indices/register_open_route.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/indices/register_refresh_route.ts b/x-pack/plugins/index_management/server/routes/api/indices/register_refresh_route.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/indices/register_refresh_route.ts
rename to x-pack/plugins/index_management/server/routes/api/indices/register_refresh_route.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/indices/register_reload_route.ts b/x-pack/plugins/index_management/server/routes/api/indices/register_reload_route.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/indices/register_reload_route.ts
rename to x-pack/plugins/index_management/server/routes/api/indices/register_reload_route.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/indices/register_unfreeze_route.ts b/x-pack/plugins/index_management/server/routes/api/indices/register_unfreeze_route.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/indices/register_unfreeze_route.ts
rename to x-pack/plugins/index_management/server/routes/api/indices/register_unfreeze_route.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/mapping/index.ts b/x-pack/plugins/index_management/server/routes/api/mapping/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/mapping/index.ts
rename to x-pack/plugins/index_management/server/routes/api/mapping/index.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/mapping/register_mapping_route.ts b/x-pack/plugins/index_management/server/routes/api/mapping/register_mapping_route.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/mapping/register_mapping_route.ts
rename to x-pack/plugins/index_management/server/routes/api/mapping/register_mapping_route.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/settings/index.ts b/x-pack/plugins/index_management/server/routes/api/settings/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/settings/index.ts
rename to x-pack/plugins/index_management/server/routes/api/settings/index.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/settings/register_load_route.ts b/x-pack/plugins/index_management/server/routes/api/settings/register_load_route.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/settings/register_load_route.ts
rename to x-pack/plugins/index_management/server/routes/api/settings/register_load_route.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/settings/register_settings_routes.ts b/x-pack/plugins/index_management/server/routes/api/settings/register_settings_routes.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/settings/register_settings_routes.ts
rename to x-pack/plugins/index_management/server/routes/api/settings/register_settings_routes.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/settings/register_update_route.ts b/x-pack/plugins/index_management/server/routes/api/settings/register_update_route.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/settings/register_update_route.ts
rename to x-pack/plugins/index_management/server/routes/api/settings/register_update_route.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/stats/index.ts b/x-pack/plugins/index_management/server/routes/api/stats/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/stats/index.ts
rename to x-pack/plugins/index_management/server/routes/api/stats/index.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/stats/register_stats_route.ts b/x-pack/plugins/index_management/server/routes/api/stats/register_stats_route.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/stats/register_stats_route.ts
rename to x-pack/plugins/index_management/server/routes/api/stats/register_stats_route.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/templates/index.ts b/x-pack/plugins/index_management/server/routes/api/templates/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/templates/index.ts
rename to x-pack/plugins/index_management/server/routes/api/templates/index.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/templates/register_create_route.ts b/x-pack/plugins/index_management/server/routes/api/templates/register_create_route.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/templates/register_create_route.ts
rename to x-pack/plugins/index_management/server/routes/api/templates/register_create_route.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/templates/register_delete_route.ts b/x-pack/plugins/index_management/server/routes/api/templates/register_delete_route.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/templates/register_delete_route.ts
rename to x-pack/plugins/index_management/server/routes/api/templates/register_delete_route.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/templates/register_get_routes.ts b/x-pack/plugins/index_management/server/routes/api/templates/register_get_routes.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/templates/register_get_routes.ts
rename to x-pack/plugins/index_management/server/routes/api/templates/register_get_routes.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/templates/register_template_routes.ts b/x-pack/plugins/index_management/server/routes/api/templates/register_template_routes.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/templates/register_template_routes.ts
rename to x-pack/plugins/index_management/server/routes/api/templates/register_template_routes.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/templates/register_update_route.ts b/x-pack/plugins/index_management/server/routes/api/templates/register_update_route.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/templates/register_update_route.ts
rename to x-pack/plugins/index_management/server/routes/api/templates/register_update_route.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/api/templates/validate_schemas.ts b/x-pack/plugins/index_management/server/routes/api/templates/validate_schemas.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/api/templates/validate_schemas.ts
rename to x-pack/plugins/index_management/server/routes/api/templates/validate_schemas.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/helpers.ts b/x-pack/plugins/index_management/server/routes/helpers.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/helpers.ts
rename to x-pack/plugins/index_management/server/routes/helpers.ts
diff --git a/x-pack/legacy/plugins/index_management/server/routes/index.ts b/x-pack/plugins/index_management/server/routes/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/routes/index.ts
rename to x-pack/plugins/index_management/server/routes/index.ts
diff --git a/x-pack/legacy/plugins/index_management/server/services/index.ts b/x-pack/plugins/index_management/server/services/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/services/index.ts
rename to x-pack/plugins/index_management/server/services/index.ts
diff --git a/x-pack/legacy/plugins/index_management/server/services/index_data_enricher.ts b/x-pack/plugins/index_management/server/services/index_data_enricher.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/server/services/index_data_enricher.ts
rename to x-pack/plugins/index_management/server/services/index_data_enricher.ts
diff --git a/x-pack/legacy/plugins/index_management/server/services/license.ts b/x-pack/plugins/index_management/server/services/license.ts
similarity index 89%
rename from x-pack/legacy/plugins/index_management/server/services/license.ts
rename to x-pack/plugins/index_management/server/services/license.ts
index fc284a0e3eb65..c490aa7b57ed9 100644
--- a/x-pack/legacy/plugins/index_management/server/services/license.ts
+++ b/x-pack/plugins/index_management/server/services/license.ts
@@ -11,9 +11,8 @@ import {
   RequestHandlerContext,
 } from 'kibana/server';
 
-import { LicensingPluginSetup } from '../../../../../plugins/licensing/server';
-import { LicenseType } from '../../../../../plugins/licensing/common/types';
-import { LICENSE_CHECK_STATE } from '../../../../../plugins/licensing/common/types';
+import { LicensingPluginSetup } from '../../../licensing/server';
+import { LicenseType, LICENSE_CHECK_STATE } from '../../../licensing/common/types';
 
 export interface LicenseStatus {
   isValid: boolean;
diff --git a/x-pack/legacy/plugins/index_management/server/types.ts b/x-pack/plugins/index_management/server/types.ts
similarity index 92%
rename from x-pack/legacy/plugins/index_management/server/types.ts
rename to x-pack/plugins/index_management/server/types.ts
index fbc39b88a462e..b7b1c57b6f04e 100644
--- a/x-pack/legacy/plugins/index_management/server/types.ts
+++ b/x-pack/plugins/index_management/server/types.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import { ScopedClusterClient, IRouter } from 'src/core/server';
-import { LicensingPluginSetup } from '../../../../plugins/licensing/server';
+import { LicensingPluginSetup } from '../../licensing/server';
 import { License, IndexDataEnricher } from './services';
 import { isEsError } from './lib/is_es_error';
 
diff --git a/x-pack/legacy/plugins/index_management/test/fixtures/index.ts b/x-pack/plugins/index_management/test/fixtures/index.ts
similarity index 100%
rename from x-pack/legacy/plugins/index_management/test/fixtures/index.ts
rename to x-pack/plugins/index_management/test/fixtures/index.ts
diff --git a/x-pack/legacy/plugins/index_management/test/fixtures/template.ts b/x-pack/plugins/index_management/test/fixtures/template.ts
similarity index 88%
rename from x-pack/legacy/plugins/index_management/test/fixtures/template.ts
rename to x-pack/plugins/index_management/test/fixtures/template.ts
index 31bfae2d5821f..19a6e0c257647 100644
--- a/x-pack/legacy/plugins/index_management/test/fixtures/template.ts
+++ b/x-pack/plugins/index_management/test/fixtures/template.ts
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { getRandomString, getRandomNumber } from '../../../../../test_utils';
+import { getRandomString, getRandomNumber } from '../../../../test_utils';
 import { Template } from '../../common/types';
 
 export const getTemplate = ({
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/header.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/header.tsx
new file mode 100644
index 0000000000000..0936b5dcfed10
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/header.tsx
@@ -0,0 +1,62 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React from 'react';
+import styled from 'styled-components';
+import { EuiFlexGroup, EuiFlexItem, EuiTabs, EuiTab, EuiSpacer } from '@elastic/eui';
+import { Props as EuiTabProps } from '@elastic/eui/src/components/tabs/tab';
+
+const Container = styled.div`
+  border-bottom: ${props => props.theme.eui.euiBorderThin};
+  background-color: ${props => props.theme.eui.euiPageBackgroundColor};
+`;
+
+const Wrapper = styled.div`
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-top: ${props => props.theme.eui.paddingSizes.xl};
+`;
+
+const Tabs = styled(EuiTabs)`
+  top: 1px;
+  &:before {
+    height: 0px;
+  }
+`;
+
+export interface HeaderProps {
+  leftColumn?: JSX.Element;
+  rightColumn?: JSX.Element;
+  tabs?: EuiTabProps[];
+}
+
+export const Header: React.FC<HeaderProps> = ({ leftColumn, rightColumn, tabs }) => (
+  <Container>
+    <Wrapper>
+      <EuiFlexGroup>
+        {leftColumn ? <EuiFlexItem>{leftColumn}</EuiFlexItem> : null}
+        {rightColumn ? <EuiFlexItem>{rightColumn}</EuiFlexItem> : null}
+      </EuiFlexGroup>
+      <EuiFlexGroup>
+        {tabs ? (
+          <EuiFlexItem>
+            <Tabs>
+              {tabs.map(props => (
+                <EuiTab {...props} key={props.id}>
+                  {props.name}
+                </EuiTab>
+              ))}
+            </Tabs>
+          </EuiFlexItem>
+        ) : (
+          <EuiFlexItem>
+            <EuiSpacer size="l" />
+          </EuiFlexItem>
+        )}
+      </EuiFlexGroup>
+    </Wrapper>
+  </Container>
+);
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/index.ts b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/index.ts
index 5133d82588494..b6bb29462c569 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/index.ts
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/components/index.ts
@@ -4,3 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 export { Loading } from './loading';
+export { Header, HeaderProps } from './header';
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/default.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/default.tsx
index eaf49fed3d933..f99d1bfe50026 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/default.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/default.tsx
@@ -4,17 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React from 'react';
-import {
-  EuiPage,
-  EuiPageBody,
-  EuiTabs,
-  EuiTab,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-} from '@elastic/eui';
+import styled from 'styled-components';
+import { EuiTabs, EuiTab, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
-import euiStyled from '../../../../../../legacy/common/eui_styled_components';
 import { Section } from '../sections';
 import { useLink, useConfig } from '../hooks';
 import { EPM_PATH, FLEET_PATH, AGENT_CONFIG_PATH } from '../constants';
@@ -24,7 +16,12 @@ interface Props {
   children?: React.ReactNode;
 }
 
-const Nav = euiStyled.nav`
+const Container = styled.div`
+  min-height: calc(100vh - ${props => props.theme.eui.euiHeaderChildSize});
+  background: ${props => props.theme.eui.euiColorEmptyShade};
+`;
+
+const Nav = styled.nav`
   background: ${props => props.theme.eui.euiColorEmptyShade};
   border-bottom: ${props => props.theme.eui.euiBorderThin};
   padding: ${props =>
@@ -32,13 +29,13 @@ const Nav = euiStyled.nav`
   .euiTabs {
     padding-left: 3px;
     margin-left: -3px;
-  };
+  }
 `;
 
 export const DefaultLayout: React.FunctionComponent<Props> = ({ section, children }) => {
   const { epm, fleet } = useConfig();
   return (
-    <div>
+    <Container>
       <Nav>
         <EuiFlexGroup gutterSize="l" alignItems="center">
           <EuiFlexItem grow={false}>
@@ -82,9 +79,7 @@ export const DefaultLayout: React.FunctionComponent<Props> = ({ section, childre
           </EuiFlexItem>
         </EuiFlexGroup>
       </Nav>
-      <EuiPage>
-        <EuiPageBody>{children}</EuiPageBody>
-      </EuiPage>
-    </div>
+      {children}
+    </Container>
   );
 };
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/index.tsx
index 858951bd0d38f..a9ef7f1656260 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/index.tsx
@@ -4,3 +4,4 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 export { DefaultLayout } from './default';
+export { WithHeaderLayout } from './with_header';
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/with_header.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/with_header.tsx
new file mode 100644
index 0000000000000..d59c99316c8b8
--- /dev/null
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/layouts/with_header.tsx
@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+import React, { Fragment } from 'react';
+import styled from 'styled-components';
+import { EuiPage, EuiPageBody, EuiSpacer } from '@elastic/eui';
+import { Header, HeaderProps } from '../components';
+
+const Page = styled(EuiPage)`
+  background: ${props => props.theme.eui.euiColorEmptyShade};
+`;
+
+interface Props extends HeaderProps {
+  children?: React.ReactNode;
+}
+
+export const WithHeaderLayout: React.FC<Props> = ({ children, ...rest }) => (
+  <Fragment>
+    <Header {...rest} />
+    <Page restrictWidth={1200}>
+      <EuiPageBody>
+        <EuiSpacer size="m" />
+        {children}
+      </EuiPageBody>
+    </Page>
+  </Fragment>
+);
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/list_page/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/list_page/index.tsx
index ca9fb195166f6..ef5a38d486901 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/list_page/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/agent_config/list_page/index.tsx
@@ -5,9 +5,6 @@
  */
 import React, { useState } from 'react';
 import {
-  EuiPageBody,
-  EuiPageContent,
-  EuiTitle,
   EuiSpacer,
   EuiText,
   EuiFlexGroup,
@@ -24,11 +21,43 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { AgentConfig } from '../../../types';
 import { DEFAULT_AGENT_CONFIG_ID, AGENT_CONFIG_DETAILS_PATH } from '../../../constants';
+import { WithHeaderLayout } from '../../../layouts';
 // import { SearchBar } from '../../../components';
 import { useGetAgentConfigs, usePagination, useLink } from '../../../hooks';
 import { AgentConfigDeleteProvider } from '../components';
 import { CreateAgentConfigFlyout } from './components';
 
+const AgentConfigListPageLayout: React.FunctionComponent = ({ children }) => (
+  <WithHeaderLayout
+    leftColumn={
+      <EuiFlexGroup direction="column" gutterSize="m">
+        <EuiFlexItem>
+          <EuiText>
+            <h1>
+              <FormattedMessage
+                id="xpack.ingestManager.agentConfigList.pageTitle"
+                defaultMessage="Agent Configurations"
+              />
+            </h1>
+          </EuiText>
+        </EuiFlexItem>
+        <EuiFlexItem>
+          <EuiText color="subdued">
+            <p>
+              <FormattedMessage
+                id="xpack.ingestManager.agentConfigList.pageSubtitle"
+                defaultMessage="Use agent configurations to manage your agents and the data they collect."
+              />
+            </p>
+          </EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    }
+  >
+    {children}
+  </WithHeaderLayout>
+);
+
 export const AgentConfigListPage: React.FunctionComponent<{}> = () => {
   // Create agent config flyout state
   const [isCreateAgentConfigFlyoutOpen, setIsCreateAgentConfigFlyoutOpen] = useState<boolean>(
@@ -123,71 +152,46 @@ export const AgentConfigListPage: React.FunctionComponent<{}> = () => {
   );
 
   return (
-    <EuiPageBody>
-      <EuiPageContent>
-        {isCreateAgentConfigFlyoutOpen ? (
-          <CreateAgentConfigFlyout
-            onClose={() => {
-              setIsCreateAgentConfigFlyoutOpen(false);
-              sendRequest();
-            }}
-          />
-        ) : null}
-
-        <EuiTitle size="l">
-          <h1>
-            <FormattedMessage
-              id="xpack.ingestManager.agentConfigList.pageTitle"
-              defaultMessage="Agent configurations"
-            />
-          </h1>
-        </EuiTitle>
-        <EuiSpacer size="s" />
-        <EuiFlexGroup alignItems={'center'} justifyContent={'spaceBetween'}>
-          <EuiFlexItem grow={false}>
-            <EuiTitle size="s">
-              <EuiText color="subdued">
-                <FormattedMessage
-                  id="xpack.ingestManager.agentConfigList.pageDescription"
-                  defaultMessage="Lorem ipsum"
-                />
-              </EuiText>
-            </EuiTitle>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <EuiSpacer size="m" />
-
-        <EuiFlexGroup alignItems={'center'} gutterSize="m">
-          {selectedAgentConfigs.length ? (
-            <EuiFlexItem>
-              <AgentConfigDeleteProvider>
-                {deleteAgentConfigsPrompt => (
-                  <EuiButton
-                    color="danger"
-                    onClick={() => {
-                      deleteAgentConfigsPrompt(
-                        selectedAgentConfigs.map(agentConfig => agentConfig.id),
-                        () => {
-                          sendRequest();
-                          setSelectedAgentConfigs([]);
-                        }
-                      );
+    <AgentConfigListPageLayout>
+      {isCreateAgentConfigFlyoutOpen ? (
+        <CreateAgentConfigFlyout
+          onClose={() => {
+            setIsCreateAgentConfigFlyoutOpen(false);
+            sendRequest();
+          }}
+        />
+      ) : null}
+      <EuiFlexGroup alignItems={'center'} gutterSize="m">
+        {selectedAgentConfigs.length ? (
+          <EuiFlexItem>
+            <AgentConfigDeleteProvider>
+              {deleteAgentConfigsPrompt => (
+                <EuiButton
+                  color="danger"
+                  onClick={() => {
+                    deleteAgentConfigsPrompt(
+                      selectedAgentConfigs.map(agentConfig => agentConfig.id),
+                      () => {
+                        sendRequest();
+                        setSelectedAgentConfigs([]);
+                      }
+                    );
+                  }}
+                >
+                  <FormattedMessage
+                    id="xpack.ingestManager.agentConfigList.deleteButton"
+                    defaultMessage="Delete {count, plural, one {# agent config} other {# agent configs}}"
+                    values={{
+                      count: selectedAgentConfigs.length,
                     }}
-                  >
-                    <FormattedMessage
-                      id="xpack.ingestManager.agentConfigList.deleteButton"
-                      defaultMessage="Delete {count, plural, one {# agent config} other {# agent configs}}"
-                      values={{
-                        count: selectedAgentConfigs.length,
-                      }}
-                    />
-                  </EuiButton>
-                )}
-              </AgentConfigDeleteProvider>
-            </EuiFlexItem>
-          ) : null}
-          <EuiFlexItem grow={4}>
-            {/* <SearchBar
+                  />
+                </EuiButton>
+              )}
+            </AgentConfigDeleteProvider>
+          </EuiFlexItem>
+        ) : null}
+        <EuiFlexItem grow={4}>
+          {/* <SearchBar
               value={search}
               onChange={newSearch => {
                 setPagination({
@@ -198,83 +202,82 @@ export const AgentConfigListPage: React.FunctionComponent<{}> = () => {
               }}
               fieldPrefix={AGENT_CONFIG_SAVED_OBJECT_TYPE}
             /> */}
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton color="secondary" iconType="refresh" onClick={() => sendRequest()}>
-              <FormattedMessage
-                id="xpack.ingestManager.agentConfigList.reloadAgentConfigsButtonText"
-                defaultMessage="Reload"
-              />
-            </EuiButton>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              fill
-              iconType="plusInCircle"
-              onClick={() => setIsCreateAgentConfigFlyoutOpen(true)}
-            >
-              <FormattedMessage
-                id="xpack.ingestManager.agentConfigList.addButton"
-                defaultMessage="Create new agent configuration"
-              />
-            </EuiButton>
-          </EuiFlexItem>
-        </EuiFlexGroup>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton color="secondary" iconType="refresh" onClick={() => sendRequest()}>
+            <FormattedMessage
+              id="xpack.ingestManager.agentConfigList.reloadAgentConfigsButtonText"
+              defaultMessage="Reload"
+            />
+          </EuiButton>
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          <EuiButton
+            fill
+            iconType="plusInCircle"
+            onClick={() => setIsCreateAgentConfigFlyoutOpen(true)}
+          >
+            <FormattedMessage
+              id="xpack.ingestManager.agentConfigList.addButton"
+              defaultMessage="Create new agent configuration"
+            />
+          </EuiButton>
+        </EuiFlexItem>
+      </EuiFlexGroup>
 
-        <EuiSpacer size="m" />
-        <EuiBasicTable
-          loading={isLoading}
-          noItemsMessage={
-            isLoading ? (
-              <FormattedMessage
-                id="xpack.ingestManager.agentConfigList.loadingAgentConfigsMessage"
-                defaultMessage="Loading agent configurations…"
-              />
-            ) : !search.trim() && agentConfigData?.total === 0 ? (
-              emptyPrompt
-            ) : (
-              <FormattedMessage
-                id="xpack.ingestManager.agentConfigList.noFilteredAgentConfigsPrompt"
-                defaultMessage="No agent configurations found. {clearFiltersLink}"
-                values={{
-                  clearFiltersLink: (
-                    <EuiLink onClick={() => setSearch('')}>
-                      <FormattedMessage
-                        id="xpack.ingestManager.agentConfigList.clearFiltersLinkText"
-                        defaultMessage="Clear filters"
-                      />
-                    </EuiLink>
-                  ),
-                }}
-              />
-            )
-          }
-          items={agentConfigData ? agentConfigData.items : []}
-          itemId="id"
-          columns={columns}
-          isSelectable={true}
-          selection={{
-            selectable: (agentConfig: AgentConfig) => agentConfig.id !== DEFAULT_AGENT_CONFIG_ID,
-            onSelectionChange: (newSelectedAgentConfigs: AgentConfig[]) => {
-              setSelectedAgentConfigs(newSelectedAgentConfigs);
-            },
-          }}
-          pagination={{
-            pageIndex: pagination.currentPage - 1,
-            pageSize: pagination.pageSize,
-            totalItemCount: agentConfigData ? agentConfigData.total : 0,
-          }}
-          onChange={({ page }: { page: { index: number; size: number } }) => {
-            const newPagination = {
-              ...pagination,
-              currentPage: page.index + 1,
-              pageSize: page.size,
-            };
-            setPagination(newPagination);
-            sendRequest(); // todo: fix this to send pagination options
-          }}
-        />
-      </EuiPageContent>
-    </EuiPageBody>
+      <EuiSpacer size="m" />
+      <EuiBasicTable
+        loading={isLoading}
+        noItemsMessage={
+          isLoading ? (
+            <FormattedMessage
+              id="xpack.ingestManager.agentConfigList.loadingAgentConfigsMessage"
+              defaultMessage="Loading agent configurations…"
+            />
+          ) : !search.trim() && agentConfigData?.total === 0 ? (
+            emptyPrompt
+          ) : (
+            <FormattedMessage
+              id="xpack.ingestManager.agentConfigList.noFilteredAgentConfigsPrompt"
+              defaultMessage="No agent configurations found. {clearFiltersLink}"
+              values={{
+                clearFiltersLink: (
+                  <EuiLink onClick={() => setSearch('')}>
+                    <FormattedMessage
+                      id="xpack.ingestManager.agentConfigList.clearFiltersLinkText"
+                      defaultMessage="Clear filters"
+                    />
+                  </EuiLink>
+                ),
+              }}
+            />
+          )
+        }
+        items={agentConfigData ? agentConfigData.items : []}
+        itemId="id"
+        columns={columns}
+        isSelectable={true}
+        selection={{
+          selectable: (agentConfig: AgentConfig) => agentConfig.id !== DEFAULT_AGENT_CONFIG_ID,
+          onSelectionChange: (newSelectedAgentConfigs: AgentConfig[]) => {
+            setSelectedAgentConfigs(newSelectedAgentConfigs);
+          },
+        }}
+        pagination={{
+          pageIndex: pagination.currentPage - 1,
+          pageSize: pagination.pageSize,
+          totalItemCount: agentConfigData ? agentConfigData.total : 0,
+        }}
+        onChange={({ page }: { page: { index: number; size: number } }) => {
+          const newPagination = {
+            ...pagination,
+            currentPage: page.index + 1,
+            pageSize: page.size,
+          };
+          setPagination(newPagination);
+          sendRequest(); // todo: fix this to send pagination options
+        }}
+      />
+    </AgentConfigListPageLayout>
   );
 };
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/assets/illustration_kibana_getting_started@2x.png b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/assets/illustration_kibana_getting_started@2x.png
new file mode 100644
index 0000000000000..cad64be0b6e36
Binary files /dev/null and b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/assets/illustration_kibana_getting_started@2x.png differ
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/index.tsx
index ca8c22be9c34c..777c2353226c4 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/epm/index.tsx
@@ -5,9 +5,74 @@
  */
 
 import React from 'react';
-import { useConfig } from '../../hooks';
+import styled from 'styled-components';
+import { EuiFlexGroup, EuiFlexItem, EuiText, EuiImage } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { PLUGIN_ID } from '../../constants';
+import { WithHeaderLayout } from '../../layouts';
+import { useConfig, useCore } from '../../hooks';
+
+const ImageWrapper = styled.div`
+  margin-bottom: -62px;
+`;
 
 export const EPMApp: React.FunctionComponent = () => {
   const { epm } = useConfig();
-  return epm.enabled ? <div>hello world - epm app</div> : null;
+  const { http } = useCore();
+
+  if (!epm.enabled) {
+    return null;
+  }
+
+  return (
+    <WithHeaderLayout
+      leftColumn={
+        <EuiFlexGroup direction="column" gutterSize="m" justifyContent="center">
+          <EuiFlexItem grow={false}>
+            <EuiText>
+              <h1>
+                <FormattedMessage
+                  id="xpack.ingestManager.epm.pageTitle"
+                  defaultMessage="Elastic Package Manager"
+                />
+              </h1>
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiText color="subdued">
+              <p>
+                <FormattedMessage
+                  id="xpack.ingestManager.epm.pageSubtitle"
+                  defaultMessage="Browse packages for popular apps and services."
+                />
+              </p>
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      }
+      rightColumn={
+        <ImageWrapper>
+          <EuiImage
+            alt="Illustration of computer"
+            url={http.basePath.prepend(
+              `/plugins/${PLUGIN_ID}/applications/ingest_manager/sections/epm/assets/illustration_kibana_getting_started@2x.png`
+            )}
+          />
+        </ImageWrapper>
+      }
+      tabs={[
+        {
+          id: 'all_packages',
+          name: 'All packages',
+          isSelected: true,
+        },
+        {
+          id: 'installed_packages',
+          name: 'Installed packages',
+        },
+      ]}
+    >
+      hello world - fleet app
+    </WithHeaderLayout>
+  );
 };
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/index.tsx
index 978414769004d..c4e8c576a1d7d 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/fleet/index.tsx
@@ -4,9 +4,53 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React from 'react';
+import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { WithHeaderLayout } from '../../layouts';
 import { useConfig } from '../../hooks';
 
 export const FleetApp: React.FunctionComponent = () => {
   const { fleet } = useConfig();
-  return fleet.enabled ? <div>hello world - fleet app</div> : null;
+  if (!fleet.enabled) {
+    return null;
+  }
+
+  return (
+    <WithHeaderLayout
+      leftColumn={
+        <EuiFlexGroup direction="column" gutterSize="m">
+          <EuiFlexItem>
+            <EuiText>
+              <h1>
+                <FormattedMessage id="xpack.ingestManager.fleet.pageTitle" defaultMessage="Fleet" />
+              </h1>
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiText color="subdued">
+              <p>
+                <FormattedMessage
+                  id="xpack.ingestManager.fleet.pageSubtitle"
+                  defaultMessage="Manage and deploy configuration updates to a group of agents of any size."
+                />
+              </p>
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      }
+      tabs={[
+        {
+          id: 'agents',
+          name: 'Agents',
+          isSelected: true,
+        },
+        {
+          id: 'enrollment_keys',
+          name: 'Enrollment keys',
+        },
+      ]}
+    >
+      hello world - fleet app
+    </WithHeaderLayout>
+  );
 };
diff --git a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx
index da4a78a39e2fe..ea6b045f504ec 100644
--- a/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx
+++ b/x-pack/plugins/ingest_manager/public/applications/ingest_manager/sections/overview/index.tsx
@@ -4,7 +4,37 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 import React from 'react';
+import { EuiText, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { FormattedMessage } from '@kbn/i18n/react';
+import { WithHeaderLayout } from '../../layouts';
 
 export const IngestManagerOverview: React.FunctionComponent = () => {
-  return <div>Ingest manager overview page</div>;
+  return (
+    <WithHeaderLayout
+      leftColumn={
+        <EuiFlexGroup direction="column" gutterSize="m">
+          <EuiFlexItem>
+            <EuiText>
+              <h1>
+                <FormattedMessage
+                  id="xpack.ingestManager.overviewPageTitle"
+                  defaultMessage="Ingest Manager"
+                />
+              </h1>
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem>
+            <EuiText color="subdued">
+              <p>
+                <FormattedMessage
+                  id="xpack.ingestManager.overviewPageSubtitle"
+                  defaultMessage="Lorem ipsum some description about ingest manager."
+                />
+              </p>
+            </EuiText>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      }
+    />
+  );
 };
diff --git a/x-pack/plugins/security/server/authorization/api_authorization.test.ts b/x-pack/plugins/security/server/authorization/api_authorization.test.ts
index a5902f251b082..409f998cfe8d2 100644
--- a/x-pack/plugins/security/server/authorization/api_authorization.test.ts
+++ b/x-pack/plugins/security/server/authorization/api_authorization.test.ts
@@ -15,27 +15,7 @@ import {
 import { authorizationMock } from './index.mock';
 
 describe('initAPIAuthorization', () => {
-  test(`route that doesn't start with "/api/" continues`, async () => {
-    const mockHTTPSetup = coreMock.createSetup().http;
-    initAPIAuthorization(
-      mockHTTPSetup,
-      authorizationMock.create(),
-      loggingServiceMock.create().get()
-    );
-
-    const [[postAuthHandler]] = mockHTTPSetup.registerOnPostAuth.mock.calls;
-
-    const mockRequest = httpServerMock.createKibanaRequest({ method: 'get', path: '/app/foo' });
-    const mockResponse = httpServerMock.createResponseFactory();
-    const mockPostAuthToolkit = httpServiceMock.createOnPostAuthToolkit();
-
-    await postAuthHandler(mockRequest, mockResponse, mockPostAuthToolkit);
-
-    expect(mockResponse.notFound).not.toHaveBeenCalled();
-    expect(mockPostAuthToolkit.next).toHaveBeenCalledTimes(1);
-  });
-
-  test(`protected route that starts with "/api/", but "mode.useRbacForRequest()" returns false continues`, async () => {
+  test(`protected route when "mode.useRbacForRequest()" returns false continues`, async () => {
     const mockHTTPSetup = coreMock.createSetup().http;
     const mockAuthz = authorizationMock.create();
     initAPIAuthorization(mockHTTPSetup, mockAuthz, loggingServiceMock.create().get());
@@ -44,7 +24,7 @@ describe('initAPIAuthorization', () => {
 
     const mockRequest = httpServerMock.createKibanaRequest({
       method: 'get',
-      path: '/api/foo',
+      path: '/foo/bar',
       routeTags: ['access:foo'],
     });
     const mockResponse = httpServerMock.createResponseFactory();
@@ -59,7 +39,7 @@ describe('initAPIAuthorization', () => {
     expect(mockAuthz.mode.useRbacForRequest).toHaveBeenCalledWith(mockRequest);
   });
 
-  test(`unprotected route that starts with "/api/", but "mode.useRbacForRequest()" returns true continues`, async () => {
+  test(`unprotected route when "mode.useRbacForRequest()" returns true continues`, async () => {
     const mockHTTPSetup = coreMock.createSetup().http;
     const mockAuthz = authorizationMock.create();
     initAPIAuthorization(mockHTTPSetup, mockAuthz, loggingServiceMock.create().get());
@@ -68,7 +48,7 @@ describe('initAPIAuthorization', () => {
 
     const mockRequest = httpServerMock.createKibanaRequest({
       method: 'get',
-      path: '/api/foo',
+      path: '/foo/bar',
       routeTags: ['not-access:foo'],
     });
     const mockResponse = httpServerMock.createResponseFactory();
@@ -83,7 +63,7 @@ describe('initAPIAuthorization', () => {
     expect(mockAuthz.mode.useRbacForRequest).toHaveBeenCalledWith(mockRequest);
   });
 
-  test(`protected route that starts with "/api/", "mode.useRbacForRequest()" returns true and user is authorized continues`, async () => {
+  test(`protected route when "mode.useRbacForRequest()" returns true and user is authorized continues`, async () => {
     const mockHTTPSetup = coreMock.createSetup().http;
     const mockAuthz = authorizationMock.create({ version: '1.0.0-zeta1' });
     initAPIAuthorization(mockHTTPSetup, mockAuthz, loggingServiceMock.create().get());
@@ -93,7 +73,7 @@ describe('initAPIAuthorization', () => {
     const headers = { authorization: 'foo' };
     const mockRequest = httpServerMock.createKibanaRequest({
       method: 'get',
-      path: '/api/foo',
+      path: '/foo/bar',
       headers,
       routeTags: ['access:foo'],
     });
@@ -118,7 +98,7 @@ describe('initAPIAuthorization', () => {
     expect(mockAuthz.mode.useRbacForRequest).toHaveBeenCalledWith(mockRequest);
   });
 
-  test(`protected route that starts with "/api/", "mode.useRbacForRequest()" returns true and user isn't authorized responds with a 404`, async () => {
+  test(`protected route when "mode.useRbacForRequest()" returns true and user isn't authorized responds with a 404`, async () => {
     const mockHTTPSetup = coreMock.createSetup().http;
     const mockAuthz = authorizationMock.create({ version: '1.0.0-zeta1' });
     initAPIAuthorization(mockHTTPSetup, mockAuthz, loggingServiceMock.create().get());
@@ -128,7 +108,7 @@ describe('initAPIAuthorization', () => {
     const headers = { authorization: 'foo' };
     const mockRequest = httpServerMock.createKibanaRequest({
       method: 'get',
-      path: '/api/foo',
+      path: '/foo/bar',
       headers,
       routeTags: ['access:foo'],
     });
diff --git a/x-pack/plugins/security/server/authorization/api_authorization.ts b/x-pack/plugins/security/server/authorization/api_authorization.ts
index b280cc74c230f..cc672fbc69e06 100644
--- a/x-pack/plugins/security/server/authorization/api_authorization.ts
+++ b/x-pack/plugins/security/server/authorization/api_authorization.ts
@@ -13,8 +13,8 @@ export function initAPIAuthorization(
   logger: Logger
 ) {
   http.registerOnPostAuth(async (request, response, toolkit) => {
-    // if the api doesn't start with "/api/" or we aren't using RBAC for this request, just continue
-    if (!request.url.path!.startsWith('/api/') || !mode.useRbacForRequest(request)) {
+    // if we aren't using RBAC for this request, just continue
+    if (!mode.useRbacForRequest(request)) {
       return toolkit.next();
     }
 
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 4b06645cdfe04..dc97a96d4fcba 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -878,8 +878,6 @@
     "kbn.advancedSettings.histogram.maxBarsTitle": "最高バー数",
     "kbn.advancedSettings.historyLimitText": "履歴があるフィールド (例: クエリインプット) に個の数の最近の値が表示されます",
     "kbn.advancedSettings.historyLimitTitle": "履歴制限数",
-    "kbn.advancedSettings.indexPattern.recentMatchingText": "名前にタイムスタンプが含まれているインデックスパターンで、フィールドマッチングをクエリする最近の一致したパターンが、この数検索されます",
-    "kbn.advancedSettings.indexPattern.recentMatchingTitle": "最近一致したパターン",
     "kbn.advancedSettings.indexPatternPlaceholderText": "「管理 > インデックスパターン > インデックスパターンを作成」で使用される「インデックスパターン名」フィールドのプレースホルダーです。",
     "kbn.advancedSettings.indexPatternPlaceholderTitle": "インデックスパターンのプレースホルダー",
     "kbn.advancedSettings.maxBucketsText": "1 つのデータソースが返せるバケットの最大数です",
@@ -1618,8 +1616,6 @@
     "advancedSettings.categoryNames.timelionLabel": "Timelion",
     "advancedSettings.categoryNames.visualizationsLabel": "ビジュアライゼーション",
     "advancedSettings.categorySearchLabel": "カテゴリー",
-    "advancedSettings.field.cancelEditingButtonAriaLabel": "{ariaName} の編集をキャンセル",
-    "advancedSettings.field.cancelEditingButtonLabel": "キャンセル",
     "advancedSettings.field.changeImageLinkAriaLabel": "{ariaName} を変更",
     "advancedSettings.field.changeImageLinkText": "画像を変更",
     "advancedSettings.field.codeEditorSyntaxErrorMessage": "無効な JSON 構文",
@@ -1632,17 +1628,10 @@
     "advancedSettings.field.imageTooLargeErrorMessage": "画像が大きすぎます。最大サイズは {maxSizeDescription} です",
     "advancedSettings.field.offLabel": "オフ",
     "advancedSettings.field.onLabel": "オン",
-    "advancedSettings.field.requiresPageReloadToastButtonLabel": "ページを再読み込み",
-    "advancedSettings.field.requiresPageReloadToastDescription": "「{settingName}」設定を有効にするには、ページを再読み込みしてください。",
-    "advancedSettings.field.resetFieldErrorMessage": "{name} をリセットできませんでした",
     "advancedSettings.field.resetToDefaultLinkAriaLabel": "{ariaName} をデフォルトにリセット",
     "advancedSettings.field.resetToDefaultLinkText": "デフォルトにリセット",
-    "advancedSettings.field.saveButtonAriaLabel": "{ariaName} を保存",
-    "advancedSettings.field.saveButtonLabel": "保存",
-    "advancedSettings.field.saveFieldErrorMessage": "{name} を保存できませんでした",
     "advancedSettings.form.clearNoSearchResultText": "(検索結果を消去)",
     "advancedSettings.form.clearSearchResultText": "(検索結果を消去)",
-    "advancedSettings.form.noSearchResultText": "設定が見つかりませんでした {clearSearch}",
     "advancedSettings.form.searchResultText": "検索用語により {settingsCount} 件の設定が非表示になっています {clearSearch}",
     "advancedSettings.pageTitle": "設定",
     "advancedSettings.searchBar.unableToParseQueryErrorMessage": "クエリをパースできません",
@@ -2474,8 +2463,6 @@
     "statusPage.statusApp.statusTitle": "プラグインステータス",
     "statusPage.statusTable.columns.idHeader": "ID",
     "statusPage.statusTable.columns.statusHeader": "ステータス",
-    "telemetry.callout.appliesSettingTitle": "この設定は {allOfKibanaText} に適用されます",
-    "telemetry.callout.appliesSettingTitle.allOfKibanaText": "Kibana のすべて",
     "telemetry.callout.clusterStatisticsDescription": "これは収集される基本的なクラスター統計の例です。インデックス、シャード、ノードの数が含まれます。監視がオンになっているかどうかなどのハイレベルの使用統計も含まれます。",
     "telemetry.callout.clusterStatisticsTitle": "クラスター統計",
     "telemetry.callout.errorLoadingClusterStatisticsDescription": "クラスター統計の取得中に予期せぬエラーが発生しました。Elasticsearch、Kibana、またはネットワークのエラーが原因の可能性があります。Kibana を確認し、ページを再読み込みして再試行してください。",
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
index ecf4dfbb33be6..2532cdb0c4d07 100644
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@@ -878,8 +878,6 @@
     "kbn.advancedSettings.histogram.maxBarsTitle": "最大条形数",
     "kbn.advancedSettings.historyLimitText": "在具有历史记录（例如查询输入）的字段中，显示此数目的最近值",
     "kbn.advancedSettings.historyLimitTitle": "历史记录限制",
-    "kbn.advancedSettings.indexPattern.recentMatchingText": "对于名称中包含时间戳的索引模式，寻找此数目的最近匹配模式，以从其中查询字段映射",
-    "kbn.advancedSettings.indexPattern.recentMatchingTitle": "最近匹配模式",
     "kbn.advancedSettings.indexPatternPlaceholderText": "在“管理 > 索引模式 > 创建索引模式”中“索引模式名称”的占位符。",
     "kbn.advancedSettings.indexPatternPlaceholderTitle": "索引模式占位符",
     "kbn.advancedSettings.maxBucketsText": "单个数据源可以返回的最大存储桶数目",
@@ -1618,8 +1616,6 @@
     "advancedSettings.categoryNames.timelionLabel": "Timelion",
     "advancedSettings.categoryNames.visualizationsLabel": "可视化",
     "advancedSettings.categorySearchLabel": "类别",
-    "advancedSettings.field.cancelEditingButtonAriaLabel": "取消编辑 {ariaName}",
-    "advancedSettings.field.cancelEditingButtonLabel": "取消",
     "advancedSettings.field.changeImageLinkAriaLabel": "更改 {ariaName}",
     "advancedSettings.field.changeImageLinkText": "更改图片",
     "advancedSettings.field.codeEditorSyntaxErrorMessage": "JSON 语法无效",
@@ -1632,14 +1628,8 @@
     "advancedSettings.field.imageTooLargeErrorMessage": "图像过大，最大大小为 {maxSizeDescription}",
     "advancedSettings.field.offLabel": "关闭",
     "advancedSettings.field.onLabel": "开启",
-    "advancedSettings.field.requiresPageReloadToastButtonLabel": "重新加载页面",
-    "advancedSettings.field.requiresPageReloadToastDescription": "请重新加载页面，以使“{settingName}”设置生效。",
-    "advancedSettings.field.resetFieldErrorMessage": "无法重置 {name}",
     "advancedSettings.field.resetToDefaultLinkAriaLabel": "将 {ariaName} 重置为默认值",
     "advancedSettings.field.resetToDefaultLinkText": "重置为默认值",
-    "advancedSettings.field.saveButtonAriaLabel": "保存 {ariaName}",
-    "advancedSettings.field.saveButtonLabel": "保存",
-    "advancedSettings.field.saveFieldErrorMessage": "无法保存 {name}",
     "advancedSettings.form.clearNoSearchResultText": "（清除搜索）",
     "advancedSettings.form.clearSearchResultText": "（清除搜索）",
     "advancedSettings.form.noSearchResultText": "未找到设置{clearSearch}",
@@ -2474,8 +2464,6 @@
     "statusPage.statusApp.statusTitle": "插件状态",
     "statusPage.statusTable.columns.idHeader": "ID",
     "statusPage.statusTable.columns.statusHeader": "状态",
-    "telemetry.callout.appliesSettingTitle": "此设置适用于{allOfKibanaText}",
-    "telemetry.callout.appliesSettingTitle.allOfKibanaText": "所有 Kibana。",
     "telemetry.callout.clusterStatisticsDescription": "这是我们将收集的基本集群统计信息的示例。其包括索引、分片和节点的数目。还包括概括性的使用情况统计信息，例如监测是否打开。",
     "telemetry.callout.clusterStatisticsTitle": "集群统计信息",
     "telemetry.callout.errorLoadingClusterStatisticsDescription": "尝试提取集群统计信息时发生意外错误。发生此问题的原因可能是 Elasticsearch 出故障、Kibana 出故障或者有网络错误。检查 Kibana，然后重新加载页面并重试。",
diff --git a/x-pack/test/api_integration/apis/apm/agent_configuration.ts b/x-pack/test/api_integration/apis/apm/agent_configuration.ts
index 12e08869fa586..959a0c97acfa3 100644
--- a/x-pack/test/api_integration/apis/apm/agent_configuration.ts
+++ b/x-pack/test/api_integration/apis/apm/agent_configuration.ts
@@ -5,6 +5,7 @@
  */
 
 import expect from '@kbn/expect';
+import { AgentConfigurationIntake } from '../../../../plugins/apm/server/lib/settings/agent_configuration/configuration_types';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function agentConfigurationTests({ getService }: FtrProviderContext) {
@@ -18,108 +19,122 @@ export default function agentConfigurationTests({ getService }: FtrProviderConte
       .set('kbn-xsrf', 'foo');
   }
 
-  let createdConfigIds: any[] = [];
-  async function createConfiguration(configuration: any) {
+  async function createConfiguration(config: AgentConfigurationIntake) {
+    log.debug('creating configuration', config.service);
     const res = await supertest
-      .post(`/api/apm/settings/agent-configuration/new`)
-      .send(configuration)
+      .put(`/api/apm/settings/agent-configuration`)
+      .send(config)
       .set('kbn-xsrf', 'foo');
 
-    createdConfigIds.push(res.body._id);
+    throwOnError(res);
 
     return res;
   }
 
-  function deleteCreatedConfigurations() {
-    const promises = Promise.all(createdConfigIds.map(deleteConfiguration));
-    return promises;
+  async function updateConfiguration(config: AgentConfigurationIntake) {
+    log.debug('updating configuration', config.service);
+    const res = await supertest
+      .put(`/api/apm/settings/agent-configuration?overwrite=true`)
+      .send(config)
+      .set('kbn-xsrf', 'foo');
+
+    throwOnError(res);
+
+    return res;
   }
 
-  function deleteConfiguration(configurationId: string) {
-    return supertest
-      .delete(`/api/apm/settings/agent-configuration/${configurationId}`)
-      .set('kbn-xsrf', 'foo')
-      .then((response: any) => {
-        createdConfigIds = createdConfigIds.filter(id => id === configurationId);
-        return response;
-      });
+  async function deleteConfiguration({ service }: AgentConfigurationIntake) {
+    log.debug('deleting configuration', service);
+    const res = await supertest
+      .delete(`/api/apm/settings/agent-configuration`)
+      .send({ service })
+      .set('kbn-xsrf', 'foo');
+
+    throwOnError(res);
+
+    return res;
+  }
+
+  function throwOnError(res: any) {
+    const { statusCode, req, body } = res;
+    if (statusCode !== 200) {
+      throw new Error(`
+      Endpoint: ${req.method} ${req.path}
+      Service: ${JSON.stringify(res.request._data.service)}
+      Status code: ${statusCode}
+      Response: ${body.message}`);
+    }
   }
 
   describe('agent configuration', () => {
     describe('when creating one configuration', () => {
-      let createdConfigId: string;
+      const newConfig = {
+        service: {},
+        settings: { transaction_sample_rate: 0.55 },
+      };
 
-      const parameters = {
+      const searchParams = {
         service: { name: 'myservice', environment: 'development' },
         etag: '7312bdcc34999629a3d39df24ed9b2a7553c0c39',
       };
 
       before(async () => {
-        log.debug('creating agent configuration');
-
-        // all / all
-        const { body } = await createConfiguration({
-          service: {},
-          settings: { transaction_sample_rate: 0.1 },
-        });
-
-        createdConfigId = body._id;
+        await createConfiguration(newConfig);
       });
 
-      it('returns the created configuration', async () => {
-        const { statusCode, body } = await searchConfigurations(parameters);
-
+      it('can find the created config', async () => {
+        const { statusCode, body } = await searchConfigurations(searchParams);
         expect(statusCode).to.equal(200);
-        expect(body._id).to.equal(createdConfigId);
+        expect(body._source.service).to.eql({});
+        expect(body._source.settings).to.eql({ transaction_sample_rate: 0.55 });
       });
 
-      it('succesfully deletes the configuration', async () => {
-        await deleteConfiguration(createdConfigId);
+      it('can update the created config', async () => {
+        await updateConfiguration({ service: {}, settings: { transaction_sample_rate: 0.85 } });
 
-        const { statusCode } = await searchConfigurations(parameters);
+        const { statusCode, body } = await searchConfigurations(searchParams);
+        expect(statusCode).to.equal(200);
+        expect(body._source.service).to.eql({});
+        expect(body._source.settings).to.eql({ transaction_sample_rate: 0.85 });
+      });
 
+      it('can delete the created config', async () => {
+        await deleteConfiguration(newConfig);
+        const { statusCode } = await searchConfigurations(searchParams);
         expect(statusCode).to.equal(404);
       });
     });
 
-    describe('when creating four configurations', () => {
-      before(async () => {
-        log.debug('creating agent configuration');
-
-        // all / all
-        await createConfiguration({
+    describe('when creating multiple configurations', () => {
+      const configs = [
+        {
           service: {},
           settings: { transaction_sample_rate: 0.1 },
-        });
-
-        // my_service / all
-        await createConfiguration({
+        },
+        {
           service: { name: 'my_service' },
           settings: { transaction_sample_rate: 0.2 },
-        });
-
-        // all / production
-        await createConfiguration({
-          service: { environment: 'production' },
+        },
+        {
+          service: { name: 'my_service', environment: 'development' },
           settings: { transaction_sample_rate: 0.3 },
-        });
-
-        // all / production
-        await createConfiguration({
-          service: { environment: 'development' },
+        },
+        {
+          service: { environment: 'production' },
           settings: { transaction_sample_rate: 0.4 },
-        });
-
-        // my_service / production
-        await createConfiguration({
-          service: { name: 'my_service', environment: 'development' },
+        },
+        {
+          service: { environment: 'development' },
           settings: { transaction_sample_rate: 0.5 },
-        });
+        },
+      ];
+
+      before(async () => {
+        await Promise.all(configs.map(config => createConfiguration(config)));
       });
 
       after(async () => {
-        log.debug('deleting agent configurations');
-        await deleteCreatedConfigurations();
+        await Promise.all(configs.map(config => deleteConfiguration(config)));
       });
 
       const agentsRequests = [
@@ -127,20 +142,24 @@ export default function agentConfigurationTests({ getService }: FtrProviderConte
           service: { name: 'non_existing_service', environment: 'non_existing_env' },
           expectedSettings: { transaction_sample_rate: 0.1 },
         },
+        {
+          service: { name: 'my_service', environment: 'non_existing_env' },
+          expectedSettings: { transaction_sample_rate: 0.2 },
+        },
         {
           service: { name: 'my_service', environment: 'production' },
           expectedSettings: { transaction_sample_rate: 0.2 },
         },
         {
-          service: { name: 'non_existing_service', environment: 'production' },
+          service: { name: 'my_service', environment: 'development' },
           expectedSettings: { transaction_sample_rate: 0.3 },
         },
         {
-          service: { name: 'non_existing_service', environment: 'development' },
+          service: { name: 'non_existing_service', environment: 'production' },
           expectedSettings: { transaction_sample_rate: 0.4 },
         },
         {
-          service: { name: 'my_service', environment: 'development' },
+          service: { name: 'non_existing_service', environment: 'development' },
           expectedSettings: { transaction_sample_rate: 0.5 },
         },
       ];
@@ -159,18 +178,18 @@ export default function agentConfigurationTests({ getService }: FtrProviderConte
     });
 
     describe('when an agent retrieves a configuration', () => {
+      const config = {
+        service: { name: 'myservice', environment: 'development' },
+        settings: { transaction_sample_rate: 0.9 },
+      };
+
       before(async () => {
         log.debug('creating agent configuration');
-
-        await createConfiguration({
-          service: { name: 'myservice', environment: 'development' },
-          settings: { transaction_sample_rate: 0.9 },
-        });
+        await createConfiguration(config);
       });
 
       after(async () => {
-        log.debug('deleting agent configurations');
-        await deleteCreatedConfigurations();
+        await deleteConfiguration(config);
       });
 
       it(`should have 'applied_by_agent=false' on first request`, async () => {
diff --git a/x-pack/test/api_integration/apis/apm/feature_controls.ts b/x-pack/test/api_integration/apis/apm/feature_controls.ts
index ec2bbca23ddd2..3c5314d0d3261 100644
--- a/x-pack/test/api_integration/apis/apm/feature_controls.ts
+++ b/x-pack/test/api_integration/apis/apm/feature_controls.ts
@@ -4,8 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-/* eslint-disable no-console */
-
 import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../ftr_provider_context';
 
@@ -14,8 +12,8 @@ export default function featureControlsTests({ getService }: FtrProviderContext)
   const supertestWithoutAuth = getService('supertestWithoutAuth');
   const security = getService('security');
   const spaces = getService('spaces');
-  const log = getService('log');
   const es = getService('legacyEs');
+  const log = getService('log');
 
   const start = encodeURIComponent(new Date(Date.now() - 10000).toISOString());
   const end = encodeURIComponent(new Date().toISOString());
@@ -33,7 +31,7 @@ export default function featureControlsTests({ getService }: FtrProviderContext)
   interface Endpoint {
     req: {
       url: string;
-      method?: 'get' | 'post' | 'delete';
+      method?: 'get' | 'post' | 'delete' | 'put';
       body?: any;
     };
     expectForbidden: (result: any) => void;
@@ -148,7 +146,7 @@ export default function featureControlsTests({ getService }: FtrProviderContext)
           index: '.apm-agent-configuration',
         });
 
-        console.warn(JSON.stringify(res, null, 2));
+        log.error(JSON.stringify(res, null, 2));
       },
     },
   ];
@@ -196,7 +194,7 @@ export default function featureControlsTests({ getService }: FtrProviderContext)
 
     const { statusCode, req } = response;
     if (statusCode !== 200) {
-      log.debug(`Endpoint: ${req.method} ${req.path}
+      throw new Error(`Endpoint: ${req.method} ${req.path}
       Status code: ${statusCode}
       Response: ${response.body.message}`);
     }
@@ -216,9 +214,9 @@ export default function featureControlsTests({ getService }: FtrProviderContext)
     spaceId?: string;
   }) {
     for (const endpoint of endpoints) {
-      console.log(`Requesting: ${endpoint.req.url}. Expecting: ${expectation}`);
+      log.info(`Requesting: ${endpoint.req.url}. Expecting: ${expectation}`);
       const result = await executeAsUser(endpoint.req, username, password, spaceId);
-      console.log(`Responded: ${endpoint.req.url}`);
+      log.info(`Responded: ${endpoint.req.url}`);
 
       try {
         if (expectation === 'forbidden') {
@@ -244,26 +242,28 @@ export default function featureControlsTests({ getService }: FtrProviderContext)
   }
 
   describe('apm feature controls', () => {
-    let res: any;
+    const config = {
+      service: { name: 'test-service' },
+      settings: { transaction_sample_rate: 0.5 },
+    };
     before(async () => {
-      console.log(`Creating agent configuration`);
-      res = await executeAsAdmin({
-        method: 'post',
-        url: '/api/apm/settings/agent-configuration/new',
-        body: {
-          service: { name: 'test-service' },
-          settings: { transaction_sample_rate: 0.5 },
-        },
+      log.info(`Creating agent configuration`);
+      await executeAsAdmin({
+        method: 'put',
+        url: '/api/apm/settings/agent-configuration',
+        body: config,
       });
-      console.log(`Agent configuration created`);
+      log.info(`Agent configuration created`);
     });
 
     after(async () => {
-      console.log('deleting agent configuration');
-      const configurationId = res.body._id;
+      log.info('deleting agent configuration');
       await executeAsAdmin({
         method: 'delete',
-        url: `/api/apm/settings/agent-configuration/${configurationId}`,
+        url: `/api/apm/settings/agent-configuration`,
+        body: {
+          service: config.service,
+        },
       });
     });
 
diff --git a/x-pack/test/api_integration/apis/apm/index.ts b/x-pack/test/api_integration/apis/apm/index.ts
index c49d577537048..6f41f4abfecc3 100644
--- a/x-pack/test/api_integration/apis/apm/index.ts
+++ b/x-pack/test/api_integration/apis/apm/index.ts
@@ -7,7 +7,7 @@
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function apmApiIntegrationTests({ loadTestFile }: FtrProviderContext) {
-  describe('APM', () => {
+  describe('APM specs', () => {
     loadTestFile(require.resolve('./feature_controls'));
     loadTestFile(require.resolve('./agent_configuration'));
   });
diff --git a/x-pack/test/api_integration/apis/telemetry/fixtures/basiccluster.json b/x-pack/test/api_integration/apis/telemetry/fixtures/basiccluster.json
index 5c3c8cfcab7a6..a0097f53ac93b 100644
--- a/x-pack/test/api_integration/apis/telemetry/fixtures/basiccluster.json
+++ b/x-pack/test/api_integration/apis/telemetry/fixtures/basiccluster.json
@@ -1,6 +1,7 @@
 [
   {
     "cluster_name": "docker-cluster",
+    "collectionSource": "monitoring",
     "cluster_stats": {
       "indices": {
         "completion": {
@@ -161,6 +162,12 @@
     },
     "cluster_uuid": "ooEYzl3fSL222Y6eVm7SAA",
     "license": {
+      "uid": "79dc3adb-e85e-4cef-a985-9b74eb6c07c1",
+      "issue_date_in_millis": 1532383643540,
+      "issued_to": "docker-cluster",
+      "issuer": "elasticsearch",
+      "max_nodes": 1000,
+      "start_date_in_millis": -1,
       "issue_date": "2018-07-23T22:07:23.540Z",
       "status": "active",
       "type": "basic"
diff --git a/x-pack/test/api_integration/apis/telemetry/fixtures/multicluster.json b/x-pack/test/api_integration/apis/telemetry/fixtures/multicluster.json
index 2e6a75ee75972..6cc9c55157b28 100644
--- a/x-pack/test/api_integration/apis/telemetry/fixtures/multicluster.json
+++ b/x-pack/test/api_integration/apis/telemetry/fixtures/multicluster.json
@@ -1 +1,1001 @@
-[{"cluster_uuid":"6d-9tDFTRe-qT5GoBytdlQ","timestamp":"2017-08-15T22:10:59.952Z","cluster_name":"clustertwo","version":"7.0.0-alpha1","license":{"status":"active","type":"basic","issue_date":"2014-09-29T00:00:00.000Z","expiry_date":"2030-08-29T23:59:59.999Z","expiry_date_in_millis":1914278399999},"cluster_stats":{"timestamp":1502835059952,"status":"green","indices":{"count":1,"shards":{"total":1,"primaries":1,"replication":0,"index":{"shards":{"min":1,"max":1,"avg":1},"primaries":{"min":1,"max":1,"avg":1},"replication":{"min":0,"max":0,"avg":0}}},"docs":{"count":8,"deleted":0},"store":{"size_in_bytes":34095},"fielddata":{"memory_size_in_bytes":0,"evictions":0},"query_cache":{"memory_size_in_bytes":0,"total_count":0,"hit_count":0,"miss_count":0,"cache_size":0,"cache_count":0,"evictions":0},"completion":{"size_in_bytes":0},"segments":{"count":8,"memory_in_bytes":13852,"terms_memory_in_bytes":10412,"stored_fields_memory_in_bytes":2496,"term_vectors_memory_in_bytes":0,"norms_memory_in_bytes":256,"points_memory_in_bytes":8,"doc_values_memory_in_bytes":680,"index_writer_memory_in_bytes":0,"version_map_memory_in_bytes":0,"fixed_bit_set_memory_in_bytes":0,"max_unsafe_auto_id_timestamp":-1,"file_sizes":{}}},"nodes":{"count":{"total":1,"data":1,"coordinating_only":0,"master":1,"ingest":1},"versions":["7.0.0-alpha1"],"os":{"available_processors":4,"allocated_processors":1,"names":[{"name":"Mac OS X","count":1}],"mem":{"total_in_bytes":17179869184,"free_in_bytes":183799808,"used_in_bytes":16996069376,"free_percent":1,"used_percent":99}},"process":{"cpu":{"percent":0},"open_file_descriptors":{"min":163,"max":163,"avg":163}},"jvm":{"max_uptime_in_millis":701043,"versions":[{"vm_version":"25.121-b13","count":1,"vm_vendor":"Oracle Corporation","version":"1.8.0_121","vm_name":"Java HotSpot(TM) 64-Bit Server VM"}],"mem":{"heap_used_in_bytes":204299464,"heap_max_in_bytes":628555776},"threads":40},"fs":{"total_in_bytes":499065712640,"free_in_bytes":200665341952,"available_in_bytes":200403197952},"plugins":[{"classname":"org.elasticsearch.xpack.XPackPlugin","name":"x-pack","description":"Elasticsearch Expanded Pack Plugin","version":"7.0.0-alpha1","has_native_controller":true}],"network_types":{"transport_types":{"security4":1},"http_types":{"security4":1}}}},"stack_stats":{"xpack":{"security":{"available":false,"enabled":true,"realms":{"file":{"available":false,"enabled":false},"ldap":{"available":false,"enabled":false},"native":{"available":false,"enabled":false},"active_directory":{"available":false,"enabled":false},"pki":{"available":false,"enabled":false}},"roles":{"native":{"size":1,"dls":false,"fls":false},"file":{"size":0,"dls":false,"fls":false}},"role_mapping":{"native":{"size":0,"enabled":0}},"ssl":{"http":{"enabled":false}},"audit":{"outputs":["logfile"],"enabled":false},"ipfilter":{"http":false,"transport":false},"anonymous":{"enabled":false}},"monitoring":{"available":true,"enabled":true,"enabled_exporters":{"http":1}},"watcher":{"available":false,"enabled":true,"execution":{"actions":{"_all":{"total":0,"total_time_in_ms":0}}}},"graph":{"available":false,"enabled":true},"ml":{"available":false,"enabled":true,"jobs":{"_all":{"count":0,"detectors":{"total":0,"min":0,"avg":0,"max":0},"model_size":{"total":0,"min":0,"avg":0,"max":0}}},"datafeeds":{"_all":{"count":0}}},"logstash":{"available":false,"enabled":true},"ccr":{"auto_follow_patterns_count":0,"available":true,"follower_indices_count":0,"enabled":true}}}},{"cluster_uuid":"lOF8kofiS_2DX58o9mXJ1Q","timestamp":"2017-08-15T22:10:54.610Z","cluster_name":"monitoring-one","version":"7.0.0-alpha1","license":{"status":"active","type":"trial","issue_date":"2017-08-15T21:58:28.997Z","expiry_date":"2017-09-14T21:58:28.997Z","expiry_date_in_millis":1505426308997},"cluster_stats":{"timestamp":1502835054610,"status":"yellow","indices":{"count":8,"shards":{"total":8,"primaries":8,"replication":0,"index":{"shards":{"min":1,"max":1,"avg":1},"primaries":{"min":1,"max":1,"avg":1},"replication":{"min":0,"max":0,"avg":0}}},"docs":{"count":3997,"deleted":69},"store":{"size_in_bytes":2647163},"fielddata":{"memory_size_in_bytes":2104,"evictions":0},"query_cache":{"memory_size_in_bytes":0,"total_count":0,"hit_count":0,"miss_count":0,"cache_size":0,"cache_count":0,"evictions":0},"completion":{"size_in_bytes":0},"segments":{"count":36,"memory_in_bytes":278961,"terms_memory_in_bytes":166031,"stored_fields_memory_in_bytes":11544,"term_vectors_memory_in_bytes":0,"norms_memory_in_bytes":6784,"points_memory_in_bytes":3250,"doc_values_memory_in_bytes":91352,"index_writer_memory_in_bytes":205347,"version_map_memory_in_bytes":26362,"fixed_bit_set_memory_in_bytes":992,"max_unsafe_auto_id_timestamp":-1,"file_sizes":{}}},"nodes":{"count":{"total":1,"data":1,"coordinating_only":0,"master":1,"ingest":1},"versions":["7.0.0-alpha1"],"os":{"available_processors":4,"allocated_processors":1,"names":[{"name":"Mac OS X","count":1}],"mem":{"total_in_bytes":17179869184,"free_in_bytes":86732800,"used_in_bytes":17093136384,"free_percent":1,"used_percent":99}},"process":{"cpu":{"percent":2},"open_file_descriptors":{"min":178,"max":178,"avg":178}},"jvm":{"max_uptime_in_millis":761002,"versions":[{"vm_version":"25.121-b13","count":1,"vm_vendor":"Oracle Corporation","version":"1.8.0_121","vm_name":"Java HotSpot(TM) 64-Bit Server VM"}],"mem":{"heap_used_in_bytes":133041176,"heap_max_in_bytes":628555776},"threads":42},"fs":{"total_in_bytes":499065712640,"free_in_bytes":200665792512,"available_in_bytes":200403648512},"plugins":[{"classname":"org.elasticsearch.xpack.XPackPlugin","name":"x-pack","description":"Elasticsearch Expanded Pack Plugin","version":"7.0.0-alpha1","has_native_controller":true}],"network_types":{"transport_types":{"security4":1},"http_types":{"security4":1}}}},"stack_stats":{"xpack":{"security":{"available":true,"enabled":true,"realms":{"file":{"name":["default_file"],"available":true,"size":[0],"enabled":true,"order":[2147483647]},"ldap":{"available":true,"enabled":false},"native":{"name":["default_native"],"available":true,"size":[2],"enabled":true,"order":[2147483647]},"active_directory":{"available":true,"enabled":false},"pki":{"available":true,"enabled":false}},"roles":{"native":{"size":1,"dls":false,"fls":false},"file":{"size":0,"dls":false,"fls":false}},"role_mapping":{"native":{"size":0,"enabled":0}},"ssl":{"http":{"enabled":false}},"audit":{"outputs":["logfile"],"enabled":false},"ipfilter":{"http":false,"transport":false},"anonymous":{"enabled":false}},"monitoring":{"available":true,"enabled":true,"enabled_exporters":{"local":1}},"watcher":{"available":true,"enabled":true,"execution":{"actions":{"index":{"total":14,"total_time_in_ms":158},"_all":{"total":110,"total_time_in_ms":2245},"email":{"total":14,"total_time_in_ms":3}}}},"graph":{"available":true,"enabled":true},"ml":{"available":true,"enabled":true,"jobs":{"_all":{"count":0,"detectors":{"total":0,"min":0,"avg":0,"max":0},"model_size":{"total":0,"min":0,"avg":0,"max":0}}},"datafeeds":{"_all":{"count":0}}},"logstash":{"available":true,"enabled":true},"ccr":{"auto_follow_patterns_count":0,"available":true,"follower_indices_count":0,"enabled":true}}}},{"cluster_uuid":"TkHOX_-1TzWwbROwQJU5IA","timestamp":"2017-08-15T22:10:52.642Z","cluster_name":"clusterone","version":"7.0.0-alpha1","license":{"status":"active","type":"trial","issue_date":"2017-08-15T21:58:47.135Z","expiry_date":"2017-09-14T21:58:47.135Z","expiry_date_in_millis":1505426327135},"cluster_stats":{"timestamp":1502835052641,"status":"green","indices":{"count":5,"shards":{"total":26,"primaries":13,"replication":1,"index":{"shards":{"min":2,"max":10,"avg":5.2},"primaries":{"min":1,"max":5,"avg":2.6},"replication":{"min":1,"max":1,"avg":1}}},"docs":{"count":150,"deleted":0},"store":{"size_in_bytes":4838464},"fielddata":{"memory_size_in_bytes":0,"evictions":0},"query_cache":{"memory_size_in_bytes":0,"total_count":0,"hit_count":0,"miss_count":0,"cache_size":0,"cache_count":0,"evictions":0},"completion":{"size_in_bytes":0},"segments":{"count":76,"memory_in_bytes":1907922,"terms_memory_in_bytes":1595112,"stored_fields_memory_in_bytes":23744,"term_vectors_memory_in_bytes":0,"norms_memory_in_bytes":197184,"points_memory_in_bytes":3818,"doc_values_memory_in_bytes":88064,"index_writer_memory_in_bytes":7006184,"version_map_memory_in_bytes":260,"fixed_bit_set_memory_in_bytes":0,"max_unsafe_auto_id_timestamp":1502834982386,"file_sizes":{}}},"nodes":{"count":{"total":2,"data":2,"coordinating_only":0,"master":2,"ingest":2},"versions":["7.0.0-alpha1"],"os":{"available_processors":8,"allocated_processors":2,"names":[{"name":"Mac OS X","count":2}],"mem":{"total_in_bytes":34359738368,"free_in_bytes":332099584,"used_in_bytes":34027638784,"free_percent":1,"used_percent":99}},"process":{"cpu":{"percent":2},"open_file_descriptors":{"min":218,"max":237,"avg":227}},"jvm":{"max_uptime_in_millis":741786,"versions":[{"vm_version":"25.121-b13","count":2,"vm_vendor":"Oracle Corporation","version":"1.8.0_121","vm_name":"Java HotSpot(TM) 64-Bit Server VM"}],"mem":{"heap_used_in_bytes":465621856,"heap_max_in_bytes":1257111552},"threads":92},"fs":{"total_in_bytes":499065712640,"free_in_bytes":200666353664,"available_in_bytes":200404209664},"plugins":[{"classname":"org.elasticsearch.xpack.XPackPlugin","name":"x-pack","description":"Elasticsearch Expanded Pack Plugin","version":"7.0.0-alpha1","has_native_controller":true}],"network_types":{"transport_types":{"security4":2},"http_types":{"security4":2}}}},"stack_stats":{"xpack":{"security":{"available":true,"enabled":true,"realms":{"file":{"name":["default_file"],"available":true,"size":[0],"enabled":true,"order":[2147483647]},"ldap":{"available":true,"enabled":false},"native":{"name":["default_native"],"available":true,"size":[1],"enabled":true,"order":[2147483647]},"active_directory":{"available":true,"enabled":false},"pki":{"available":true,"enabled":false}},"roles":{"native":{"size":1,"dls":false,"fls":false},"file":{"size":0,"dls":false,"fls":false}},"role_mapping":{"native":{"size":0,"enabled":0}},"ssl":{"http":{"enabled":false}},"audit":{"outputs":["logfile"],"enabled":false},"ipfilter":{"http":false,"transport":false},"anonymous":{"enabled":false}},"monitoring":{"available":true,"enabled":true,"enabled_exporters":{"http":1}},"watcher":{"available":true,"enabled":true,"execution":{"actions":{"_all":{"total":0,"total_time_in_ms":0}}}},"graph":{"available":true,"enabled":true,"graph_workspace":{"total":0}},"ml":{"available":true,"enabled":true,"jobs":{"_all":{"count":3,"detectors":{"total":3,"min":1,"avg":1,"max":1},"model_size":{"total":0,"min":0,"avg":0,"max":0}},"opened":{"count":1,"detectors":{"total":1,"min":1,"avg":1,"max":1},"model_size":{"total":0,"min":0,"avg":0,"max":0}},"closed":{"count":2,"detectors":{"total":2,"min":1,"avg":1,"max":1},"model_size":{"total":0,"min":0,"avg":0,"max":0}}},"datafeeds":{"_all":{"count":0}}},"logstash":{"available":true,"enabled":true},"ccr":{"auto_follow_patterns_count":0,"available":true,"follower_indices_count":0,"enabled":true}},"kibana":{"count":1,"versions":[{"version":"7.0.0-alpha1","count":1}],"os":{"platforms":[],"platformReleases":[],"distros":[],"distroReleases":[]},"dashboard":{"total":0},"visualization":{"total":0},"search":{"total":0},"index_pattern":{"total":0},"graph_workspace":{"total":0},"timelion_sheet":{"total":0},"indices":1,"plugins":{}},"logstash":{"count":1,"versions":[{"version":"7.0.0-alpha1","count":1}],"os":{"platforms":[],"platformReleases":[],"distros":[],"distroReleases":[]}}}}]
+[
+  {
+    "cluster_uuid": "6d-9tDFTRe-qT5GoBytdlQ",
+    "collectionSource": "monitoring",
+    "timestamp": "2017-08-15T22:10:59.952Z",
+    "cluster_name": "clustertwo",
+    "version": "7.0.0-alpha1",
+    "license": {
+      "status": "active",
+      "type": "basic",
+      "issue_date": "2014-09-29T00:00:00.000Z",
+      "expiry_date": "2030-08-29T23:59:59.999Z",
+      "expiry_date_in_millis": 1914278399999,
+      "issue_date_in_millis": 1411948800000,
+      "issued_to": "issuedTo",
+      "issuer": "issuer",
+      "max_nodes": 1,
+      "uid": "893361dc-9749-4997-93cb-802e3d7fa4a8",
+      "hkey": null
+    },
+    "cluster_stats": {
+      "timestamp": 1502835059952,
+      "status": "green",
+      "indices": {
+        "count": 1,
+        "shards": {
+          "total": 1,
+          "primaries": 1,
+          "replication": 0,
+          "index": {
+            "shards": {
+              "min": 1,
+              "max": 1,
+              "avg": 1
+            },
+            "primaries": {
+              "min": 1,
+              "max": 1,
+              "avg": 1
+            },
+            "replication": {
+              "min": 0,
+              "max": 0,
+              "avg": 0
+            }
+          }
+        },
+        "docs": {
+          "count": 8,
+          "deleted": 0
+        },
+        "store": {
+          "size_in_bytes": 34095
+        },
+        "fielddata": {
+          "memory_size_in_bytes": 0,
+          "evictions": 0
+        },
+        "query_cache": {
+          "memory_size_in_bytes": 0,
+          "total_count": 0,
+          "hit_count": 0,
+          "miss_count": 0,
+          "cache_size": 0,
+          "cache_count": 0,
+          "evictions": 0
+        },
+        "completion": {
+          "size_in_bytes": 0
+        },
+        "segments": {
+          "count": 8,
+          "memory_in_bytes": 13852,
+          "terms_memory_in_bytes": 10412,
+          "stored_fields_memory_in_bytes": 2496,
+          "term_vectors_memory_in_bytes": 0,
+          "norms_memory_in_bytes": 256,
+          "points_memory_in_bytes": 8,
+          "doc_values_memory_in_bytes": 680,
+          "index_writer_memory_in_bytes": 0,
+          "version_map_memory_in_bytes": 0,
+          "fixed_bit_set_memory_in_bytes": 0,
+          "max_unsafe_auto_id_timestamp": -1,
+          "file_sizes": {}
+        }
+      },
+      "nodes": {
+        "count": {
+          "total": 1,
+          "data": 1,
+          "coordinating_only": 0,
+          "master": 1,
+          "ingest": 1
+        },
+        "versions": [
+          "7.0.0-alpha1"
+        ],
+        "os": {
+          "available_processors": 4,
+          "allocated_processors": 1,
+          "names": [
+            {
+              "name": "Mac OS X",
+              "count": 1
+            }
+          ],
+          "mem": {
+            "total_in_bytes": 17179869184,
+            "free_in_bytes": 183799808,
+            "used_in_bytes": 16996069376,
+            "free_percent": 1,
+            "used_percent": 99
+          }
+        },
+        "process": {
+          "cpu": {
+            "percent": 0
+          },
+          "open_file_descriptors": {
+            "min": 163,
+            "max": 163,
+            "avg": 163
+          }
+        },
+        "jvm": {
+          "max_uptime_in_millis": 701043,
+          "versions": [
+            {
+              "vm_version": "25.121-b13",
+              "count": 1,
+              "vm_vendor": "Oracle Corporation",
+              "version": "1.8.0_121",
+              "vm_name": "Java HotSpot(TM) 64-Bit Server VM"
+            }
+          ],
+          "mem": {
+            "heap_used_in_bytes": 204299464,
+            "heap_max_in_bytes": 628555776
+          },
+          "threads": 40
+        },
+        "fs": {
+          "total_in_bytes": 499065712640,
+          "free_in_bytes": 200665341952,
+          "available_in_bytes": 200403197952
+        },
+        "plugins": [
+          {
+            "classname": "org.elasticsearch.xpack.XPackPlugin",
+            "name": "x-pack",
+            "description": "Elasticsearch Expanded Pack Plugin",
+            "version": "7.0.0-alpha1",
+            "has_native_controller": true
+          }
+        ],
+        "network_types": {
+          "transport_types": {
+            "security4": 1
+          },
+          "http_types": {
+            "security4": 1
+          }
+        }
+      }
+    },
+    "stack_stats": {
+      "xpack": {
+        "security": {
+          "available": false,
+          "enabled": true,
+          "realms": {
+            "file": {
+              "available": false,
+              "enabled": false
+            },
+            "ldap": {
+              "available": false,
+              "enabled": false
+            },
+            "native": {
+              "available": false,
+              "enabled": false
+            },
+            "active_directory": {
+              "available": false,
+              "enabled": false
+            },
+            "pki": {
+              "available": false,
+              "enabled": false
+            }
+          },
+          "roles": {
+            "native": {
+              "size": 1,
+              "dls": false,
+              "fls": false
+            },
+            "file": {
+              "size": 0,
+              "dls": false,
+              "fls": false
+            }
+          },
+          "role_mapping": {
+            "native": {
+              "size": 0,
+              "enabled": 0
+            }
+          },
+          "ssl": {
+            "http": {
+              "enabled": false
+            }
+          },
+          "audit": {
+            "outputs": [
+              "logfile"
+            ],
+            "enabled": false
+          },
+          "ipfilter": {
+            "http": false,
+            "transport": false
+          },
+          "anonymous": {
+            "enabled": false
+          }
+        },
+        "monitoring": {
+          "available": true,
+          "enabled": true,
+          "enabled_exporters": {
+            "http": 1
+          }
+        },
+        "watcher": {
+          "available": false,
+          "enabled": true,
+          "execution": {
+            "actions": {
+              "_all": {
+                "total": 0,
+                "total_time_in_ms": 0
+              }
+            }
+          }
+        },
+        "graph": {
+          "available": false,
+          "enabled": true
+        },
+        "ml": {
+          "available": false,
+          "enabled": true,
+          "jobs": {
+            "_all": {
+              "count": 0,
+              "detectors": {
+                "total": 0,
+                "min": 0,
+                "avg": 0,
+                "max": 0
+              },
+              "model_size": {
+                "total": 0,
+                "min": 0,
+                "avg": 0,
+                "max": 0
+              }
+            }
+          },
+          "datafeeds": {
+            "_all": {
+              "count": 0
+            }
+          }
+        },
+        "logstash": {
+          "available": false,
+          "enabled": true
+        },
+        "ccr": {
+          "auto_follow_patterns_count": 0,
+          "available": true,
+          "follower_indices_count": 0,
+          "enabled": true
+        }
+      }
+    }
+  },
+  {
+    "cluster_uuid": "lOF8kofiS_2DX58o9mXJ1Q",
+    "collectionSource": "monitoring",
+    "timestamp": "2017-08-15T22:10:54.610Z",
+    "cluster_name": "monitoring-one",
+    "version": "7.0.0-alpha1",
+    "license": {
+      "status": "active",
+      "type": "trial",
+      "issue_date": "2017-08-15T21:58:28.997Z",
+      "expiry_date": "2017-09-14T21:58:28.997Z",
+      "expiry_date_in_millis": 1505426308997,
+      "issue_date_in_millis": 1502834308997,
+      "issued_to": "monitoring-one",
+      "issuer": "elasticsearch",
+      "max_nodes": 1000,
+      "start_date_in_millis": -1,
+      "uid": "e5f6e897-0db5-4042-ad7c-6628ddc91691",
+      "hkey": null
+    },
+    "cluster_stats": {
+      "timestamp": 1502835054610,
+      "status": "yellow",
+      "indices": {
+        "count": 8,
+        "shards": {
+          "total": 8,
+          "primaries": 8,
+          "replication": 0,
+          "index": {
+            "shards": {
+              "min": 1,
+              "max": 1,
+              "avg": 1
+            },
+            "primaries": {
+              "min": 1,
+              "max": 1,
+              "avg": 1
+            },
+            "replication": {
+              "min": 0,
+              "max": 0,
+              "avg": 0
+            }
+          }
+        },
+        "docs": {
+          "count": 3997,
+          "deleted": 69
+        },
+        "store": {
+          "size_in_bytes": 2647163
+        },
+        "fielddata": {
+          "memory_size_in_bytes": 2104,
+          "evictions": 0
+        },
+        "query_cache": {
+          "memory_size_in_bytes": 0,
+          "total_count": 0,
+          "hit_count": 0,
+          "miss_count": 0,
+          "cache_size": 0,
+          "cache_count": 0,
+          "evictions": 0
+        },
+        "completion": {
+          "size_in_bytes": 0
+        },
+        "segments": {
+          "count": 36,
+          "memory_in_bytes": 278961,
+          "terms_memory_in_bytes": 166031,
+          "stored_fields_memory_in_bytes": 11544,
+          "term_vectors_memory_in_bytes": 0,
+          "norms_memory_in_bytes": 6784,
+          "points_memory_in_bytes": 3250,
+          "doc_values_memory_in_bytes": 91352,
+          "index_writer_memory_in_bytes": 205347,
+          "version_map_memory_in_bytes": 26362,
+          "fixed_bit_set_memory_in_bytes": 992,
+          "max_unsafe_auto_id_timestamp": -1,
+          "file_sizes": {}
+        }
+      },
+      "nodes": {
+        "count": {
+          "total": 1,
+          "data": 1,
+          "coordinating_only": 0,
+          "master": 1,
+          "ingest": 1
+        },
+        "versions": [
+          "7.0.0-alpha1"
+        ],
+        "os": {
+          "available_processors": 4,
+          "allocated_processors": 1,
+          "names": [
+            {
+              "name": "Mac OS X",
+              "count": 1
+            }
+          ],
+          "mem": {
+            "total_in_bytes": 17179869184,
+            "free_in_bytes": 86732800,
+            "used_in_bytes": 17093136384,
+            "free_percent": 1,
+            "used_percent": 99
+          }
+        },
+        "process": {
+          "cpu": {
+            "percent": 2
+          },
+          "open_file_descriptors": {
+            "min": 178,
+            "max": 178,
+            "avg": 178
+          }
+        },
+        "jvm": {
+          "max_uptime_in_millis": 761002,
+          "versions": [
+            {
+              "vm_version": "25.121-b13",
+              "count": 1,
+              "vm_vendor": "Oracle Corporation",
+              "version": "1.8.0_121",
+              "vm_name": "Java HotSpot(TM) 64-Bit Server VM"
+            }
+          ],
+          "mem": {
+            "heap_used_in_bytes": 133041176,
+            "heap_max_in_bytes": 628555776
+          },
+          "threads": 42
+        },
+        "fs": {
+          "total_in_bytes": 499065712640,
+          "free_in_bytes": 200665792512,
+          "available_in_bytes": 200403648512
+        },
+        "plugins": [
+          {
+            "classname": "org.elasticsearch.xpack.XPackPlugin",
+            "name": "x-pack",
+            "description": "Elasticsearch Expanded Pack Plugin",
+            "version": "7.0.0-alpha1",
+            "has_native_controller": true
+          }
+        ],
+        "network_types": {
+          "transport_types": {
+            "security4": 1
+          },
+          "http_types": {
+            "security4": 1
+          }
+        }
+      }
+    },
+    "stack_stats": {
+      "xpack": {
+        "security": {
+          "available": true,
+          "enabled": true,
+          "realms": {
+            "file": {
+              "name": [
+                "default_file"
+              ],
+              "available": true,
+              "size": [
+                0
+              ],
+              "enabled": true,
+              "order": [
+                2147483647
+              ]
+            },
+            "ldap": {
+              "available": true,
+              "enabled": false
+            },
+            "native": {
+              "name": [
+                "default_native"
+              ],
+              "available": true,
+              "size": [
+                2
+              ],
+              "enabled": true,
+              "order": [
+                2147483647
+              ]
+            },
+            "active_directory": {
+              "available": true,
+              "enabled": false
+            },
+            "pki": {
+              "available": true,
+              "enabled": false
+            }
+          },
+          "roles": {
+            "native": {
+              "size": 1,
+              "dls": false,
+              "fls": false
+            },
+            "file": {
+              "size": 0,
+              "dls": false,
+              "fls": false
+            }
+          },
+          "role_mapping": {
+            "native": {
+              "size": 0,
+              "enabled": 0
+            }
+          },
+          "ssl": {
+            "http": {
+              "enabled": false
+            }
+          },
+          "audit": {
+            "outputs": [
+              "logfile"
+            ],
+            "enabled": false
+          },
+          "ipfilter": {
+            "http": false,
+            "transport": false
+          },
+          "anonymous": {
+            "enabled": false
+          }
+        },
+        "monitoring": {
+          "available": true,
+          "enabled": true,
+          "enabled_exporters": {
+            "local": 1
+          }
+        },
+        "watcher": {
+          "available": true,
+          "enabled": true,
+          "execution": {
+            "actions": {
+              "index": {
+                "total": 14,
+                "total_time_in_ms": 158
+              },
+              "_all": {
+                "total": 110,
+                "total_time_in_ms": 2245
+              },
+              "email": {
+                "total": 14,
+                "total_time_in_ms": 3
+              }
+            }
+          }
+        },
+        "graph": {
+          "available": true,
+          "enabled": true
+        },
+        "ml": {
+          "available": true,
+          "enabled": true,
+          "jobs": {
+            "_all": {
+              "count": 0,
+              "detectors": {
+                "total": 0,
+                "min": 0,
+                "avg": 0,
+                "max": 0
+              },
+              "model_size": {
+                "total": 0,
+                "min": 0,
+                "avg": 0,
+                "max": 0
+              }
+            }
+          },
+          "datafeeds": {
+            "_all": {
+              "count": 0
+            }
+          }
+        },
+        "logstash": {
+          "available": true,
+          "enabled": true
+        },
+        "ccr": {
+          "auto_follow_patterns_count": 0,
+          "available": true,
+          "follower_indices_count": 0,
+          "enabled": true
+        }
+      }
+    }
+  },
+  {
+    "cluster_uuid": "TkHOX_-1TzWwbROwQJU5IA",
+    "collectionSource": "monitoring",
+    "timestamp": "2017-08-15T22:10:52.642Z",
+    "cluster_name": "clusterone",
+    "version": "7.0.0-alpha1",
+    "license": {
+      "status": "active",
+      "type": "trial",
+      "issue_date": "2017-08-15T21:58:47.135Z",
+      "expiry_date": "2017-09-14T21:58:47.135Z",
+      "expiry_date_in_millis": 1505426327135,
+      "issue_date_in_millis": 1502834327135,
+      "issued_to": "clusterone",
+      "issuer": "elasticsearch",
+      "max_nodes": 1000,
+      "start_date_in_millis": -1,
+      "uid": "e5e99511-0928-41a3-97b0-ec77fa5e3b4c",
+      "hkey": null
+    },
+    "cluster_stats": {
+      "timestamp": 1502835052641,
+      "status": "green",
+      "indices": {
+        "count": 5,
+        "shards": {
+          "total": 26,
+          "primaries": 13,
+          "replication": 1,
+          "index": {
+            "shards": {
+              "min": 2,
+              "max": 10,
+              "avg": 5.2
+            },
+            "primaries": {
+              "min": 1,
+              "max": 5,
+              "avg": 2.6
+            },
+            "replication": {
+              "min": 1,
+              "max": 1,
+              "avg": 1
+            }
+          }
+        },
+        "docs": {
+          "count": 150,
+          "deleted": 0
+        },
+        "store": {
+          "size_in_bytes": 4838464
+        },
+        "fielddata": {
+          "memory_size_in_bytes": 0,
+          "evictions": 0
+        },
+        "query_cache": {
+          "memory_size_in_bytes": 0,
+          "total_count": 0,
+          "hit_count": 0,
+          "miss_count": 0,
+          "cache_size": 0,
+          "cache_count": 0,
+          "evictions": 0
+        },
+        "completion": {
+          "size_in_bytes": 0
+        },
+        "segments": {
+          "count": 76,
+          "memory_in_bytes": 1907922,
+          "terms_memory_in_bytes": 1595112,
+          "stored_fields_memory_in_bytes": 23744,
+          "term_vectors_memory_in_bytes": 0,
+          "norms_memory_in_bytes": 197184,
+          "points_memory_in_bytes": 3818,
+          "doc_values_memory_in_bytes": 88064,
+          "index_writer_memory_in_bytes": 7006184,
+          "version_map_memory_in_bytes": 260,
+          "fixed_bit_set_memory_in_bytes": 0,
+          "max_unsafe_auto_id_timestamp": 1502834982386,
+          "file_sizes": {}
+        }
+      },
+      "nodes": {
+        "count": {
+          "total": 2,
+          "data": 2,
+          "coordinating_only": 0,
+          "master": 2,
+          "ingest": 2
+        },
+        "versions": [
+          "7.0.0-alpha1"
+        ],
+        "os": {
+          "available_processors": 8,
+          "allocated_processors": 2,
+          "names": [
+            {
+              "name": "Mac OS X",
+              "count": 2
+            }
+          ],
+          "mem": {
+            "total_in_bytes": 34359738368,
+            "free_in_bytes": 332099584,
+            "used_in_bytes": 34027638784,
+            "free_percent": 1,
+            "used_percent": 99
+          }
+        },
+        "process": {
+          "cpu": {
+            "percent": 2
+          },
+          "open_file_descriptors": {
+            "min": 218,
+            "max": 237,
+            "avg": 227
+          }
+        },
+        "jvm": {
+          "max_uptime_in_millis": 741786,
+          "versions": [
+            {
+              "vm_version": "25.121-b13",
+              "count": 2,
+              "vm_vendor": "Oracle Corporation",
+              "version": "1.8.0_121",
+              "vm_name": "Java HotSpot(TM) 64-Bit Server VM"
+            }
+          ],
+          "mem": {
+            "heap_used_in_bytes": 465621856,
+            "heap_max_in_bytes": 1257111552
+          },
+          "threads": 92
+        },
+        "fs": {
+          "total_in_bytes": 499065712640,
+          "free_in_bytes": 200666353664,
+          "available_in_bytes": 200404209664
+        },
+        "plugins": [
+          {
+            "classname": "org.elasticsearch.xpack.XPackPlugin",
+            "name": "x-pack",
+            "description": "Elasticsearch Expanded Pack Plugin",
+            "version": "7.0.0-alpha1",
+            "has_native_controller": true
+          }
+        ],
+        "network_types": {
+          "transport_types": {
+            "security4": 2
+          },
+          "http_types": {
+            "security4": 2
+          }
+        }
+      }
+    },
+    "stack_stats": {
+      "xpack": {
+        "security": {
+          "available": true,
+          "enabled": true,
+          "realms": {
+            "file": {
+              "name": [
+                "default_file"
+              ],
+              "available": true,
+              "size": [
+                0
+              ],
+              "enabled": true,
+              "order": [
+                2147483647
+              ]
+            },
+            "ldap": {
+              "available": true,
+              "enabled": false
+            },
+            "native": {
+              "name": [
+                "default_native"
+              ],
+              "available": true,
+              "size": [
+                1
+              ],
+              "enabled": true,
+              "order": [
+                2147483647
+              ]
+            },
+            "active_directory": {
+              "available": true,
+              "enabled": false
+            },
+            "pki": {
+              "available": true,
+              "enabled": false
+            }
+          },
+          "roles": {
+            "native": {
+              "size": 1,
+              "dls": false,
+              "fls": false
+            },
+            "file": {
+              "size": 0,
+              "dls": false,
+              "fls": false
+            }
+          },
+          "role_mapping": {
+            "native": {
+              "size": 0,
+              "enabled": 0
+            }
+          },
+          "ssl": {
+            "http": {
+              "enabled": false
+            }
+          },
+          "audit": {
+            "outputs": [
+              "logfile"
+            ],
+            "enabled": false
+          },
+          "ipfilter": {
+            "http": false,
+            "transport": false
+          },
+          "anonymous": {
+            "enabled": false
+          }
+        },
+        "monitoring": {
+          "available": true,
+          "enabled": true,
+          "enabled_exporters": {
+            "http": 1
+          }
+        },
+        "watcher": {
+          "available": true,
+          "enabled": true,
+          "execution": {
+            "actions": {
+              "_all": {
+                "total": 0,
+                "total_time_in_ms": 0
+              }
+            }
+          }
+        },
+        "graph": {
+          "available": true,
+          "enabled": true,
+          "graph_workspace": {
+            "total": 0
+          }
+        },
+        "ml": {
+          "available": true,
+          "enabled": true,
+          "jobs": {
+            "_all": {
+              "count": 3,
+              "detectors": {
+                "total": 3,
+                "min": 1,
+                "avg": 1,
+                "max": 1
+              },
+              "model_size": {
+                "total": 0,
+                "min": 0,
+                "avg": 0,
+                "max": 0
+              }
+            },
+            "opened": {
+              "count": 1,
+              "detectors": {
+                "total": 1,
+                "min": 1,
+                "avg": 1,
+                "max": 1
+              },
+              "model_size": {
+                "total": 0,
+                "min": 0,
+                "avg": 0,
+                "max": 0
+              }
+            },
+            "closed": {
+              "count": 2,
+              "detectors": {
+                "total": 2,
+                "min": 1,
+                "avg": 1,
+                "max": 1
+              },
+              "model_size": {
+                "total": 0,
+                "min": 0,
+                "avg": 0,
+                "max": 0
+              }
+            }
+          },
+          "datafeeds": {
+            "_all": {
+              "count": 0
+            }
+          }
+        },
+        "logstash": {
+          "available": true,
+          "enabled": true
+        },
+        "ccr": {
+          "auto_follow_patterns_count": 0,
+          "available": true,
+          "follower_indices_count": 0,
+          "enabled": true
+        }
+      },
+      "kibana": {
+        "count": 1,
+        "versions": [
+          {
+            "version": "7.0.0-alpha1",
+            "count": 1
+          }
+        ],
+        "os": {
+          "platforms": [],
+          "platformReleases": [],
+          "distros": [],
+          "distroReleases": []
+        },
+        "dashboard": {
+          "total": 0
+        },
+        "visualization": {
+          "total": 0
+        },
+        "search": {
+          "total": 0
+        },
+        "index_pattern": {
+          "total": 0
+        },
+        "graph_workspace": {
+          "total": 0
+        },
+        "timelion_sheet": {
+          "total": 0
+        },
+        "indices": 1,
+        "plugins": {}
+      },
+      "logstash": {
+        "count": 1,
+        "versions": [
+          {
+            "version": "7.0.0-alpha1",
+            "count": 1
+          }
+        ],
+        "os": {
+          "platforms": [],
+          "platformReleases": [],
+          "distros": [],
+          "distroReleases": []
+        }
+      }
+    }
+  }
+]
diff --git a/x-pack/test/api_integration/apis/uptime/rest/snapshot.ts b/x-pack/test/api_integration/apis/uptime/rest/snapshot.ts
index b0d97837c770f..20fe59d149ae8 100644
--- a/x-pack/test/api_integration/apis/uptime/rest/snapshot.ts
+++ b/x-pack/test/api_integration/apis/uptime/rest/snapshot.ts
@@ -34,66 +34,69 @@ export default function({ getService }: FtrProviderContext) {
       let dateRange: { start: string; end: string };
 
       [true, false].forEach(async (includeTimespan: boolean) => {
-        describe(`with timespans ${includeTimespan ? 'included' : 'missing'}`, async () => {
-          before(async () => {
-            const promises: Array<Promise<any>> = [];
-
-            // When includeTimespan is false we have to remove the values there.
-            let mogrify = (d: any) => d;
-            if ((includeTimespan = false)) {
-              mogrify = (d: any): any => {
-                d.monitor.delete('timespan');
+        [true, false].forEach(async (includeObserver: boolean) => {
+          describe(`with timespans=${includeTimespan} and observer=${includeObserver}`, async () => {
+            before(async () => {
+              const promises: Array<Promise<any>> = [];
+
+              const mogrify = (d: any) => {
+                if (!includeTimespan) {
+                  delete d.monitor.timespan;
+                }
+                if (!includeObserver) {
+                  delete d.observer;
+                }
                 return d;
               };
-            }
-
-            const makeMonitorChecks = async (monitorId: string, status: 'up' | 'down') => {
-              return makeChecksWithStatus(
-                getService('legacyEs'),
-                monitorId,
-                checksPerMonitor,
-                numIps,
-                scheduleEvery,
-                {},
-                status,
-                mogrify
-              );
-            };
 
-            for (let i = 0; i < numUpMonitors; i++) {
-              promises.push(makeMonitorChecks(`up-${i}`, 'up'));
-            }
-            for (let i = 0; i < numDownMonitors; i++) {
-              promises.push(makeMonitorChecks(`down-${i}`, 'down'));
-            }
+              const makeMonitorChecks = async (monitorId: string, status: 'up' | 'down') => {
+                return makeChecksWithStatus(
+                  getService('legacyEs'),
+                  monitorId,
+                  checksPerMonitor,
+                  numIps,
+                  scheduleEvery,
+                  {},
+                  status,
+                  mogrify
+                );
+              };
 
-            const allResults = await Promise.all(promises);
-            dateRange = getChecksDateRange(allResults);
-          });
+              for (let i = 0; i < numUpMonitors; i++) {
+                promises.push(makeMonitorChecks(`up-${i}`, 'up'));
+              }
+              for (let i = 0; i < numDownMonitors; i++) {
+                promises.push(makeMonitorChecks(`down-${i}`, 'down'));
+              }
 
-          it('will count all statuses correctly', async () => {
-            const apiResponse = await supertest.get(
-              `/api/uptime/snapshot/count?dateRangeStart=${dateRange.start}&dateRangeEnd=${dateRange.end}`
-            );
+              const allResults = await Promise.all(promises);
+              dateRange = getChecksDateRange(allResults);
+            });
 
-            expectFixtureEql(apiResponse.body, 'snapshot');
-          });
+            it('will count all statuses correctly', async () => {
+              const apiResponse = await supertest.get(
+                `/api/uptime/snapshot/count?dateRangeStart=${dateRange.start}&dateRangeEnd=${dateRange.end}`
+              );
 
-          it('will fetch a monitor snapshot filtered by down status', async () => {
-            const statusFilter = 'down';
-            const apiResponse = await supertest.get(
-              `/api/uptime/snapshot/count?dateRangeStart=${dateRange.start}&dateRangeEnd=${dateRange.end}&statusFilter=${statusFilter}`
-            );
+              expectFixtureEql(apiResponse.body, 'snapshot');
+            });
 
-            expectFixtureEql(apiResponse.body, 'snapshot_filtered_by_down');
-          });
+            it('will fetch a monitor snapshot filtered by down status', async () => {
+              const statusFilter = 'down';
+              const apiResponse = await supertest.get(
+                `/api/uptime/snapshot/count?dateRangeStart=${dateRange.start}&dateRangeEnd=${dateRange.end}&statusFilter=${statusFilter}`
+              );
 
-          it('will fetch a monitor snapshot filtered by up status', async () => {
-            const statusFilter = 'up';
-            const apiResponse = await supertest.get(
-              `/api/uptime/snapshot/count?dateRangeStart=${dateRange.start}&dateRangeEnd=${dateRange.end}&statusFilter=${statusFilter}`
-            );
-            expectFixtureEql(apiResponse.body, 'snapshot_filtered_by_up');
+              expectFixtureEql(apiResponse.body, 'snapshot_filtered_by_down');
+            });
+
+            it('will fetch a monitor snapshot filtered by up status', async () => {
+              const statusFilter = 'up';
+              const apiResponse = await supertest.get(
+                `/api/uptime/snapshot/count?dateRangeStart=${dateRange.start}&dateRangeEnd=${dateRange.end}&statusFilter=${statusFilter}`
+              );
+              expectFixtureEql(apiResponse.body, 'snapshot_filtered_by_up');
+            });
           });
         });
       });
diff --git a/x-pack/test/functional/apps/apm/index.ts b/x-pack/test/functional/apps/apm/index.ts
index 945af09183f03..bf254f9b9b419 100644
--- a/x-pack/test/functional/apps/apm/index.ts
+++ b/x-pack/test/functional/apps/apm/index.ts
@@ -6,7 +6,7 @@
 import { FtrProviderContext } from '../../ftr_provider_context';
 
 export default function({ loadTestFile }: FtrProviderContext) {
-  describe('APM', function() {
+  describe('APM specs', function() {
     this.tags('ciGroup6');
     loadTestFile(require.resolve('./feature_controls'));
   });
diff --git a/x-pack/test/functional/page_objects/security_page.js b/x-pack/test/functional/page_objects/security_page.js
index 3bcba7cbd1696..5889a374e443e 100644
--- a/x-pack/test/functional/page_objects/security_page.js
+++ b/x-pack/test/functional/page_objects/security_page.js
@@ -30,6 +30,11 @@ export function SecurityPageProvider({ getService, getPageObjects }) {
       const rawDataTabLocator = 'a[id=rawdata-tab]';
 
       await PageObjects.common.navigateToApp('login');
+
+      // ensure welcome screen won't be shown. This is relevant for environments which don't allow
+      // to use the yml setting, e.g. cloud
+      await browser.setLocalStorageItem('home:welcome:show', 'false');
+
       await testSubjects.setValue('loginUsername', username);
       await testSubjects.setValue('loginPassword', password);
       await testSubjects.click('loginSubmit');
diff --git a/x-pack/test/functional/services/machine_learning/data_frame_analytics_creation.ts b/x-pack/test/functional/services/machine_learning/data_frame_analytics_creation.ts
index b4e455ebaa63f..96dc8993c3d35 100644
--- a/x-pack/test/functional/services/machine_learning/data_frame_analytics_creation.ts
+++ b/x-pack/test/functional/services/machine_learning/data_frame_analytics_creation.ts
@@ -6,10 +6,12 @@
 import expect from '@kbn/expect';
 
 import { FtrProviderContext } from '../../ftr_provider_context';
+import { MlCommon } from './common';
 
-export function MachineLearningDataFrameAnalyticsCreationProvider({
-  getService,
-}: FtrProviderContext) {
+export function MachineLearningDataFrameAnalyticsCreationProvider(
+  { getService }: FtrProviderContext,
+  mlCommon: MlCommon
+) {
   const testSubjects = getService('testSubjects');
   const comboBox = getService('comboBox');
   const retry = getService('retry');
@@ -85,14 +87,14 @@ export function MachineLearningDataFrameAnalyticsCreationProvider({
     },
 
     async setJobId(jobId: string) {
-      await testSubjects.setValue('mlAnalyticsCreateJobFlyoutJobIdInput', jobId, {
+      await mlCommon.setValueWithChecks('mlAnalyticsCreateJobFlyoutJobIdInput', jobId, {
         clearWithKeyboard: true,
       });
       await this.assertJobIdValue(jobId);
     },
 
     async setJobDescription(jobDescription: string) {
-      await testSubjects.setValue('mlDFAnalyticsJobCreationJobDescription', jobDescription, {
+      await mlCommon.setValueWithChecks('mlDFAnalyticsJobCreationJobDescription', jobDescription, {
         clearWithKeyboard: true,
       });
       await this.assertJobDescriptionValue(jobDescription);
@@ -136,9 +138,13 @@ export function MachineLearningDataFrameAnalyticsCreationProvider({
     },
 
     async setDestIndex(destIndex: string) {
-      await testSubjects.setValue('mlAnalyticsCreateJobFlyoutDestinationIndexInput', destIndex, {
-        clearWithKeyboard: true,
-      });
+      await mlCommon.setValueWithChecks(
+        'mlAnalyticsCreateJobFlyoutDestinationIndexInput',
+        destIndex,
+        {
+          clearWithKeyboard: true,
+        }
+      );
       await this.assertDestIndexValue(destIndex);
     },
 
@@ -248,7 +254,7 @@ export function MachineLearningDataFrameAnalyticsCreationProvider({
     },
 
     async setModelMemory(modelMemory: string) {
-      await testSubjects.setValue('mlAnalyticsCreateJobFlyoutModelMemoryInput', modelMemory, {
+      await mlCommon.setValueWithChecks('mlAnalyticsCreateJobFlyoutModelMemoryInput', modelMemory, {
         clearWithKeyboard: true,
       });
       await this.assertModelMemoryValue(modelMemory);
diff --git a/x-pack/test/functional/services/ml.ts b/x-pack/test/functional/services/ml.ts
index 2660a90662dec..354e0907375ca 100644
--- a/x-pack/test/functional/services/ml.ts
+++ b/x-pack/test/functional/services/ml.ts
@@ -42,7 +42,10 @@ export function MachineLearningProvider(context: FtrProviderContext) {
   const api = MachineLearningAPIProvider(context);
   const customUrls = MachineLearningCustomUrlsProvider(context);
   const dataFrameAnalytics = MachineLearningDataFrameAnalyticsProvider(context, api);
-  const dataFrameAnalyticsCreation = MachineLearningDataFrameAnalyticsCreationProvider(context);
+  const dataFrameAnalyticsCreation = MachineLearningDataFrameAnalyticsCreationProvider(
+    context,
+    common
+  );
   const dataFrameAnalyticsTable = MachineLearningDataFrameAnalyticsTableProvider(context);
   const dataVisualizer = MachineLearningDataVisualizerProvider(context);
   const dataVisualizerIndexBased = MachineLearningDataVisualizerIndexBasedProvider(context);
diff --git a/yarn.lock b/yarn.lock
index 8ea23c17b8b8b..f46e869909e2e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7023,13 +7023,6 @@ async@2.4.0:
   dependencies:
     lodash "^4.14.0"
 
-async@2.6.1, async@^2.6.0, async@^2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.1.tgz#b245a23ca71930044ec53fa46aa00a3e87c6a610"
-  integrity sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==
-  dependencies:
-    lodash "^4.17.10"
-
 async@^2.0.0, async@^2.1.4:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.0.tgz#61a29abb6fcc026fea77e56d1c6ec53a795951f4"
@@ -7037,6 +7030,13 @@ async@^2.0.0, async@^2.1.4:
   dependencies:
     lodash "^4.14.0"
 
+async@^2.6.0, async@^2.6.1:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.1.tgz#b245a23ca71930044ec53fa46aa00a3e87c6a610"
+  integrity sha512-fNEiL2+AZt6AlAw/29Cr0UDe4sRAHCpEHh54WMz+Bb7QfNcFw4h3loofyJpLeQs4Yx7yuqu/2dLgM5hKOs6HlQ==
+  dependencies:
+    lodash "^4.17.10"
+
 async@^2.6.3:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
@@ -7044,6 +7044,11 @@ async@^2.6.3:
   dependencies:
     lodash "^4.17.14"
 
+async@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/async/-/async-3.2.0.tgz#b3a2685c5ebb641d3de02d161002c60fc9f85720"
+  integrity sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==
+
 async@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/async/-/async-1.0.0.tgz#f8fc04ca3a13784ade9e1641af98578cfbd647a9"
@@ -7909,6 +7914,11 @@ bluebird@3.5.5, bluebird@^3.5.0, bluebird@^3.5.1, bluebird@^3.5.5:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.5.tgz#a8d0afd73251effbbd5fe384a77d73003c17a71f"
   integrity sha512-5am6HnnfN+urzt4yfg7IgTbotDjIT/u8AJpEt0sIU9FtXfVeezXAPKswrG+xKUCOYAINpSdgZVDU6QFh+cuH3w==
 
+bluebird@3.7.2:
+  version "3.7.2"
+  resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
+  integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
+
 bluebird@^3.3.0, bluebird@^3.3.1:
   version "3.5.1"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.5.1.tgz#d9551f9de98f1fcda1e683d17ee91a0602ee2eb9"
@@ -8536,12 +8546,10 @@ cacheable-request@^2.1.1:
     normalize-url "2.0.1"
     responselike "1.0.2"
 
-cachedir@1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-1.3.0.tgz#5e01928bf2d95b5edd94b0942188246740e0dbc4"
-  integrity sha512-O1ji32oyON9laVPJL1IZ5bmwd2cB46VfpxkDequezH+15FDzzVddEyrGEeX4WusDSqKxdyFdDQDEG1yo1GoWkg==
-  dependencies:
-    os-homedir "^1.0.1"
+cachedir@2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/cachedir/-/cachedir-2.3.0.tgz#0c75892a052198f0b21c7c1804d8331edfcae0e8"
+  integrity sha512-A+Fezp4zxnit6FanDmv9EqXNAi3vt9DWp51/71UEhXukb7QUuvtv9344h91dyAxuTLoSYJFU299qzR3tzwPAhw==
 
 caching-transform@^3.0.2:
   version "3.0.2"
@@ -8806,6 +8814,14 @@ chalk@2.4.2, chalk@^2.3.2, chalk@^2.4.2, chalk@~2.4.1:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
+chalk@3.0.0, chalk@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
+  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
 chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98"
@@ -8835,14 +8851,6 @@ chalk@^2.3.0:
     escape-string-regexp "^1.0.5"
     supports-color "^5.2.0"
 
-chalk@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/chalk/-/chalk-3.0.0.tgz#3f73c2bf526591f574cc492c51e2456349f844e4"
-  integrity sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
 chalk@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-0.4.0.tgz#5199a3ddcd0c1efe23bc08c1b027b06176e0c64f"
@@ -9087,11 +9095,6 @@ ci-info@^1.0.0:
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.1.2.tgz#03561259db48d0474c8bdc90f5b47b068b6bbfb4"
   integrity sha512-uTGIPNx/nSpBdsF6xnseRXLLtfr9VLqkz8ZqHXr3Y7b6SftyRxBGjwMtJj1OhNbmlc1wZzLNAlAcvyIiE8a6ZA==
 
-ci-info@^1.5.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-1.6.0.tgz#2ca20dbb9ceb32d4524a683303313f0304b1e497"
-  integrity sha512-vsGdkwSCDpWmP80ncATX7iea5DWQemg1UgCW5J8tqjU3lYw4FBYuj89J0CTVomA7BEfvSZd84GmHko+MxFQU2A==
-
 ci-info@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-2.0.0.tgz#67a9e964be31a51e15e5010d58e6f12834002f46"
@@ -9596,11 +9599,6 @@ commander@2, commander@2.19.0, commander@^2.11.0, commander@^2.12.2:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
   integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
 
-commander@2.15.1:
-  version "2.15.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.15.1.tgz#df46e867d0fc2aec66a34662b406a9ccafff5b0f"
-  integrity sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==
-
 commander@2.17.x, commander@~2.17.1:
   version "2.17.1"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
@@ -9611,6 +9609,11 @@ commander@3.0.2:
   resolved "https://registry.yarnpkg.com/commander/-/commander-3.0.2.tgz#6837c3fb677ad9933d1cfba42dd14d5117d6b39e"
   integrity sha512-Gar0ASD4BDyKC4hl4DwHqDrmvjoxWKZigVnAbn5H1owvm4CxCPdb0HQDehwNYMJpla5+M2tPmPARzhtYuwpHow==
 
+commander@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.0.tgz#545983a0603fe425bc672d66c9e3c89c42121a83"
+  integrity sha512-NIQrwvv9V39FHgGFm36+U9SMQzbiHvU79k+iADraJTpmrFFfx7Ds0IvDoAdZsDrknlkRk14OYoWXb57uTh7/sw==
+
 commander@^2.13.0, commander@^2.15.1, commander@^2.16.0, commander@^2.19.0:
   version "2.20.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
@@ -10646,41 +10649,42 @@ cypress-multi-reporters@^1.2.3:
     debug "^4.1.1"
     lodash "^4.17.11"
 
-cypress@^3.6.1:
-  version "3.6.1"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-3.6.1.tgz#4420957923879f60b7a5146ccbf81841a149b653"
-  integrity sha512-6n0oqENdz/oQ7EJ6IgESNb2M7Bo/70qX9jSJsAziJTC3kICfEMmJUlrAnP9bn+ut24MlXQST5nRXhUP5nRIx6A==
+cypress@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-4.0.2.tgz#ede194d7bc73fb449f8de553c9e1db4ca15309ef"
+  integrity sha512-WRzxOoSd+TxyXKa7Zi9orz3ii5VW7yhhVYstCU+EpOKfPan9x5Ww2Clucmy4H/W0GHUYAo7GYFZRD33ZCSNBQA==
   dependencies:
     "@cypress/listr-verbose-renderer" "0.4.1"
     "@cypress/xvfb" "1.2.4"
     "@types/sizzle" "2.3.2"
     arch "2.1.1"
-    bluebird "3.5.0"
-    cachedir "1.3.0"
-    chalk "2.4.2"
+    bluebird "3.7.2"
+    cachedir "2.3.0"
+    chalk "3.0.0"
     check-more-types "2.24.0"
-    commander "2.15.1"
+    commander "4.1.0"
     common-tags "1.8.0"
-    debug "3.2.6"
-    execa "0.10.0"
+    debug "4.1.1"
+    eventemitter2 "4.1.2"
+    execa "3.3.0"
     executable "4.1.1"
     extract-zip "1.6.7"
-    fs-extra "5.0.0"
-    getos "3.1.1"
-    is-ci "1.2.1"
+    fs-extra "8.1.0"
+    getos "3.1.4"
+    is-ci "2.0.0"
     is-installed-globally "0.1.0"
     lazy-ass "1.6.0"
-    listr "0.12.0"
+    listr "0.14.3"
     lodash "4.17.15"
-    log-symbols "2.2.0"
+    log-symbols "3.0.0"
     minimist "1.2.0"
     moment "2.24.0"
-    ramda "0.24.1"
+    ramda "0.26.1"
     request "2.88.0"
     request-progress "3.0.0"
-    supports-color "5.5.0"
+    supports-color "7.1.0"
     tmp "0.1.0"
-    untildify "3.0.3"
+    untildify "4.0.0"
     url "0.11.0"
     yauzl "2.10.0"
 
@@ -11065,7 +11069,7 @@ debug@4.1.0:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
+debug@4.1.1, debug@^4.0.0, debug@^4.0.1, debug@^4.1.0, debug@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
   integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
@@ -13028,6 +13032,11 @@ event-target-shim@^5.0.0:
   resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789"
   integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==
 
+eventemitter2@4.1.2:
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-4.1.2.tgz#0e1a8477af821a6ef3995b311bf74c23a5247f15"
+  integrity sha1-DhqEd6+CGm7zmVsxG/dMI6UkfxU=
+
 eventemitter2@~0.4.13:
   version "0.4.14"
   resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-0.4.14.tgz#8f61b75cde012b2e9eb284d4545583b5643b61ab"
@@ -13078,19 +13087,6 @@ exec-sh@^0.3.2:
   resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.2.tgz#6738de2eb7c8e671d0366aea0b0db8c6f7d7391b"
   integrity sha512-9sLAvzhI5nc8TpuQUh4ahMdCrWT00wPWz7j47/emR5+2qEfoZP5zzUXvx+vdx+H6ohhnsYC31iX04QLYJK8zTg==
 
-execa@0.10.0, execa@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.yarnpkg.com/execa/-/execa-0.10.0.tgz#ff456a8f53f90f8eccc71a96d11bdfc7f082cb50"
-  integrity sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==
-  dependencies:
-    cross-spawn "^6.0.0"
-    get-stream "^3.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
 execa@1.0.0, execa@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-1.0.0.tgz#c6236a5bb4df6d6f15e88e7f017798216749ddd8"
@@ -13104,6 +13100,22 @@ execa@1.0.0, execa@^1.0.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
+execa@3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-3.3.0.tgz#7e348eef129a1937f21ecbbd53390942653522c1"
+  integrity sha512-j5Vit5WZR/cbHlqU97+qcnw9WHRCIL4V1SVe75VcHcD1JRBdt8fv0zw89b7CQHQdUHTt2VjuhcF5ibAgVOxqpg==
+  dependencies:
+    cross-spawn "^7.0.0"
+    get-stream "^5.0.0"
+    human-signals "^1.1.1"
+    is-stream "^2.0.0"
+    merge-stream "^2.0.0"
+    npm-run-path "^4.0.0"
+    onetime "^5.1.0"
+    p-finally "^2.0.0"
+    signal-exit "^3.0.2"
+    strip-final-newline "^2.0.0"
+
 execa@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/execa/-/execa-0.1.1.tgz#b09c2a9309bc0ef0501479472db3180f8d4c3edd"
@@ -13113,6 +13125,19 @@ execa@^0.1.1:
     object-assign "^4.0.1"
     strip-eof "^1.0.0"
 
+execa@^0.10.0:
+  version "0.10.0"
+  resolved "https://registry.yarnpkg.com/execa/-/execa-0.10.0.tgz#ff456a8f53f90f8eccc71a96d11bdfc7f082cb50"
+  integrity sha512-7XOMnz8Ynx1gGo/3hyV9loYNPWM94jG3+3T3Y8tsfSstFmETmENCMU/A/zj8Lyaj1lkgEepKepvd6240tBRvlw==
+  dependencies:
+    cross-spawn "^6.0.0"
+    get-stream "^3.0.0"
+    is-stream "^1.1.0"
+    npm-run-path "^2.0.0"
+    p-finally "^1.0.0"
+    signal-exit "^3.0.0"
+    strip-eof "^1.0.0"
+
 execa@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-0.4.0.tgz#4eb6467a36a095fabb2970ff9d5e3fb7bce6ebc3"
@@ -14321,12 +14346,12 @@ fs-exists-sync@^0.1.0:
   resolved "https://registry.yarnpkg.com/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz#982d6893af918e72d08dec9e8673ff2b5a8d6add"
   integrity sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=
 
-fs-extra@5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-5.0.0.tgz#414d0110cdd06705734d055652c5411260c31abd"
-  integrity sha512-66Pm4RYbjzdyeuqudYqhFiNBbCIuI9kgRqLPSHIlXHidW8NIQtVdkM1yeZ4lXwuhbTETv3EUGMNHAAw6hiundQ==
+fs-extra@8.1.0, fs-extra@^8.0.1:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
+  integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
   dependencies:
-    graceful-fs "^4.1.2"
+    graceful-fs "^4.2.0"
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
@@ -14368,15 +14393,6 @@ fs-extra@^7.0.0, fs-extra@^7.0.1, fs-extra@~7.0.1:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
-fs-extra@^8.0.1:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
-  integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
-  dependencies:
-    graceful-fs "^4.2.0"
-    jsonfile "^4.0.0"
-    universalify "^0.1.0"
-
 fs-minipass@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/fs-minipass/-/fs-minipass-1.2.5.tgz#06c277218454ec288df77ada54a03b8702aacb9d"
@@ -14703,12 +14719,12 @@ getopts@^2.2.5:
   resolved "https://registry.yarnpkg.com/getopts/-/getopts-2.2.5.tgz#67a0fe471cacb9c687d817cab6450b96dde8313b"
   integrity sha512-9jb7AW5p3in+IiJWhQiZmmwkpLaR/ccTWdWQCtZM66HJcHHLegowh4q4tSD7gouUyeNvFWRavfK9GXosQHDpFA==
 
-getos@3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/getos/-/getos-3.1.1.tgz#967a813cceafee0156b0483f7cffa5b3eff029c5"
-  integrity sha512-oUP1rnEhAr97rkitiszGP9EgDVYnmchgFzfqRzSkgtfv7ai6tEi7Ko8GgjNXts7VLWEqrTWyhsOKLe5C5b/Zkg==
+getos@3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/getos/-/getos-3.1.4.tgz#29cdf240ed10a70c049add7b6f8cb08c81876faf"
+  integrity sha512-UORPzguEB/7UG5hqiZai8f0vQ7hzynMQyJLxStoQ8dPGAcmgsfXOPA4iE/fGtweHYkK+z4zc9V0g+CIFRf5HYw==
   dependencies:
-    async "2.6.1"
+    async "^3.1.0"
 
 getos@^3.1.0:
   version "3.1.0"
@@ -17152,12 +17168,12 @@ is-callable@^1.1.3, is-callable@^1.1.4, is-callable@^1.1.5:
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.5.tgz#f7e46b596890456db74e7f6e976cb3273d06faab"
   integrity sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==
 
-is-ci@1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.2.1.tgz#e3779c8ee17fccf428488f6e281187f2e632841c"
-  integrity sha512-s6tfsaQaQi3JNciBH6shVqEDvhGut0SUXr31ag8Pd8BBbVVlcGfWhpPmEOoM6RJ5TFhbypvf5yyRw/VXW1IiWg==
+is-ci@2.0.0, is-ci@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
+  integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
   dependencies:
-    ci-info "^1.5.0"
+    ci-info "^2.0.0"
 
 is-ci@^1.0.10:
   version "1.1.0"
@@ -17166,13 +17182,6 @@ is-ci@^1.0.10:
   dependencies:
     ci-info "^1.0.0"
 
-is-ci@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-2.0.0.tgz#6bc6334181810e04b5c22b3d589fdca55026404c"
-  integrity sha512-YfJT7rkpQB0updsdHLGWrvhBJfcfzNNawYDNIyQXJz0IViGf75O8EBPKSdvw2rF+LGCsX4FZ8tcr3b19LcZq4w==
-  dependencies:
-    ci-info "^2.0.0"
-
 is-data-descriptor@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"
@@ -19254,20 +19263,6 @@ listr-update-renderer@0.5.0, listr-update-renderer@^0.5.0:
     log-update "^2.3.0"
     strip-ansi "^3.0.1"
 
-listr-update-renderer@^0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/listr-update-renderer/-/listr-update-renderer-0.2.0.tgz#ca80e1779b4e70266807e8eed1ad6abe398550f9"
-  integrity sha1-yoDhd5tOcCZoB+ju0a1qvjmFUPk=
-  dependencies:
-    chalk "^1.1.3"
-    cli-truncate "^0.2.1"
-    elegant-spinner "^1.0.1"
-    figures "^1.7.0"
-    indent-string "^3.0.0"
-    log-symbols "^1.0.2"
-    log-update "^1.0.2"
-    strip-ansi "^3.0.1"
-
 listr-update-renderer@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/listr-update-renderer/-/listr-update-renderer-0.4.0.tgz#344d980da2ca2e8b145ba305908f32ae3f4cc8a7"
@@ -19302,28 +19297,6 @@ listr-verbose-renderer@^0.5.0:
     date-fns "^1.27.2"
     figures "^2.0.0"
 
-listr@0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/listr/-/listr-0.12.0.tgz#6bce2c0f5603fa49580ea17cd6a00cc0e5fa451a"
-  integrity sha1-a84sD1YD+klYDqF81qAMwOX6RRo=
-  dependencies:
-    chalk "^1.1.3"
-    cli-truncate "^0.2.1"
-    figures "^1.7.0"
-    indent-string "^2.1.0"
-    is-promise "^2.1.0"
-    is-stream "^1.1.0"
-    listr-silent-renderer "^1.1.1"
-    listr-update-renderer "^0.2.0"
-    listr-verbose-renderer "^0.4.0"
-    log-symbols "^1.0.2"
-    log-update "^1.0.2"
-    ora "^0.2.3"
-    p-map "^1.1.1"
-    rxjs "^5.0.0-beta.11"
-    stream-to-observable "^0.1.0"
-    strip-ansi "^3.0.1"
-
 listr@0.14.3:
   version "0.14.3"
   resolved "https://registry.yarnpkg.com/listr/-/listr-0.14.3.tgz#2fea909604e434be464c50bddba0d496928fa586"
@@ -19824,6 +19797,13 @@ log-symbols@2.2.0, log-symbols@^2.0.0, log-symbols@^2.1.0, log-symbols@^2.2.0:
   dependencies:
     chalk "^2.0.1"
 
+log-symbols@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-3.0.0.tgz#f3a08516a5dea893336a7dee14d18a1cfdab77c4"
+  integrity sha512-dSkNGuI7iG3mfvDzUuYZyvk5dD9ocYCYzNU6CYDE6+Xqd+gwme6Z00NS3dUh8mq/73HaEtT7m6W+yUPtU6BZnQ==
+  dependencies:
+    chalk "^2.4.2"
+
 log-symbols@^1.0.1, log-symbols@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-1.0.2.tgz#376ff7b58ea3086a0f09facc74617eca501e1a18"
@@ -23983,21 +23963,16 @@ railroad-diagrams@^1.0.0:
   resolved "https://registry.yarnpkg.com/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz#eb7e6267548ddedfb899c1b90e57374559cddb7e"
   integrity sha1-635iZ1SN3t+4mcG5Dlc3RVnN234=
 
-ramda@0.24.1:
-  version "0.24.1"
-  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.24.1.tgz#c3b7755197f35b8dc3502228262c4c91ddb6b857"
-  integrity sha1-w7d1UZfzW43DUCIoJixMkd22uFc=
+ramda@0.26.1, ramda@^0.26, ramda@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
+  integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==
 
 ramda@^0.21.0:
   version "0.21.0"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.21.0.tgz#a001abedb3ff61077d4ff1d577d44de77e8d0a35"
   integrity sha1-oAGr7bP/YQd9T/HVd9RN536NCjU=
 
-ramda@^0.26, ramda@^0.26.1:
-  version "0.26.1"
-  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
-  integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==
-
 randexp@0.4.6:
   version "0.4.6"
   resolved "https://registry.yarnpkg.com/randexp/-/randexp-0.4.6.tgz#e986ad5e5e31dae13ddd6f7b3019aa7c87f60ca3"
@@ -26375,7 +26350,7 @@ rxjs@6.5.2:
   dependencies:
     tslib "^1.9.0"
 
-rxjs@^5.0.0-beta.11, rxjs@^5.5.2:
+rxjs@^5.5.2:
   version "5.5.12"
   resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-5.5.12.tgz#6fa61b8a77c3d793dbaf270bee2f43f652d741cc"
   integrity sha512-xx2itnL5sBbqeeiVgNPVuQQ1nC8Jp2WfNJhXWHmElW9YmrpS9UVnNzhP3EH3HFqexO5Tlp8GhYY+WEcqcVMvGw==
@@ -27815,11 +27790,6 @@ stream-spigot@~2.1.2:
   dependencies:
     readable-stream "~1.1.0"
 
-stream-to-observable@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/stream-to-observable/-/stream-to-observable-0.1.0.tgz#45bf1d9f2d7dc09bed81f1c307c430e68b84cffe"
-  integrity sha1-Rb8dny19wJvtgfHDB8Qw5ouEz/4=
-
 streamroller@0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/streamroller/-/streamroller-0.7.0.tgz#a1d1b7cf83d39afb0d63049a5acbf93493bdf64b"
@@ -28291,13 +28261,6 @@ supertest@^3.1.0:
     methods "~1.1.2"
     superagent "3.8.2"
 
-supports-color@5.5.0, supports-color@^5.0.0, supports-color@^5.4.0, supports-color@^5.5.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
-  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
-  dependencies:
-    has-flag "^3.0.0"
-
 supports-color@6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-6.0.0.tgz#76cfe742cf1f41bb9b1c29ad03068c05b4c0e40a"
@@ -28312,6 +28275,13 @@ supports-color@6.1.0, supports-color@^6.0.0, supports-color@^6.1.0:
   dependencies:
     has-flag "^3.0.0"
 
+supports-color@7.1.0, supports-color@^7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
+  integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
+  dependencies:
+    has-flag "^4.0.0"
+
 supports-color@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-0.2.0.tgz#d92de2694eb3f67323973d7ae3d8b55b4c22190a"
@@ -28329,6 +28299,13 @@ supports-color@^3.1.0, supports-color@^3.1.2, supports-color@^3.2.3:
   dependencies:
     has-flag "^1.0.0"
 
+supports-color@^5.0.0, supports-color@^5.4.0, supports-color@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
+  integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
+  dependencies:
+    has-flag "^3.0.0"
+
 supports-color@^5.2.0, supports-color@^5.3.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.3.0.tgz#5b24ac15db80fa927cf5227a4a33fd3c4c7676c0"
@@ -28343,13 +28320,6 @@ supports-color@^7.0.0:
   dependencies:
     has-flag "^4.0.0"
 
-supports-color@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-7.1.0.tgz#68e32591df73e25ad1c4b49108a2ec507962bfd1"
-  integrity sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==
-  dependencies:
-    has-flag "^4.0.0"
-
 supports-hyperlinks@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/supports-hyperlinks/-/supports-hyperlinks-1.0.1.tgz#71daedf36cc1060ac5100c351bb3da48c29c0ef7"
@@ -30241,10 +30211,10 @@ unstated@^2.1.1:
   dependencies:
     create-react-context "^0.1.5"
 
-untildify@3.0.3, untildify@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/untildify/-/untildify-3.0.3.tgz#1e7b42b140bcfd922b22e70ca1265bfe3634c7c9"
-  integrity sha512-iSk/J8efr8uPT/Z4eSUywnqyrQU7DSdMfdqK4iWEaUVVmcP5JcnpRqmVMwcwcnmI1ATFNgC5V90u09tBynNFKA==
+untildify@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
+  integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
 
 untildify@^2.0.0:
   version "2.1.0"
@@ -30253,6 +30223,11 @@ untildify@^2.0.0:
   dependencies:
     os-homedir "^1.0.0"
 
+untildify@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/untildify/-/untildify-3.0.3.tgz#1e7b42b140bcfd922b22e70ca1265bfe3634c7c9"
+  integrity sha512-iSk/J8efr8uPT/Z4eSUywnqyrQU7DSdMfdqK4iWEaUVVmcP5JcnpRqmVMwcwcnmI1ATFNgC5V90u09tBynNFKA==
+
 unzip-response@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unzip-response/-/unzip-response-1.0.2.tgz#b984f0877fc0a89c2c773cc1ef7b5b232b5b06fe"