From 621919b3384630ed42bf3365443465c084a7a830 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Tue, 25 May 2021 15:29:45 -0600
Subject: [PATCH] [Maps] convert LayerPanel to typescript (#100481) (#100600)

* [Maps] convert LayerPanel to typescript

* layer_errors

* style panel

* layer_panel component

* rename to EditLayerPanel

* clean up

* fix scss imports for rename

* one more scss path clean up

* fix EditLayerPanel errors
---
 .../layers/vector_layer/vector_layer.tsx      |   1 +
 .../ems_file_source/update_source_editor.tsx  |   2 +-
 .../update_source_editor.tsx                  |   2 +-
 .../sources/es_search_source/scaling_form.tsx |   2 +-
 .../top_hits/create_source_editor.tsx         |   2 +-
 .../top_hits/top_hits_form.tsx                |   2 +-
 .../top_hits/update_source_editor.tsx         |   2 +-
 .../update_source_editor.tsx                  |   2 +-
 .../maps/public/classes/sources/source.ts     |   9 +-
 ...checkbox.js => global_filter_checkbox.tsx} |  12 +-
 .../public/connected_components/_index.scss   |   2 +-
 .../edit_layer_panel.test.tsx.snap}           |   7 +-
 .../_index.scss                               |   0
 .../_layer_panel.scss                         |   0
 .../edit_layer_panel.test.tsx}                |  25 ++--
 .../edit_layer_panel.tsx}                     | 131 ++++++++++++------
 .../filter_editor/_filter_editor.scss         |   0
 .../filter_editor/filter_editor.tsx}          |  32 ++++-
 .../filter_editor/index.ts}                   |  15 +-
 .../flyout_footer/flyout_footer.tsx}          |   9 +-
 .../flyout_footer/index.ts}                   |   9 +-
 .../index.js => edit_layer_panel/index.ts}    |  16 ++-
 .../__snapshots__/join_editor.test.tsx.snap   |   0
 .../join_editor/index.ts}                     |   1 +
 .../join_editor/join_editor.test.tsx          |   0
 .../join_editor/join_editor.tsx               |   8 +-
 .../metrics_expression.test.js.snap           |   0
 .../join_editor/resources/_join.scss          |   0
 .../join_editor/resources/join.js             |   0
 .../join_editor/resources/join_expression.js  |   0
 .../resources/metrics_expression.js           |   0
 .../resources/metrics_expression.test.js      |   0
 .../join_editor/resources/where_expression.js |   0
 .../attribution_form_row.test.tsx.snap        |   0
 .../layer_settings/_attribution_form_row.scss |   0
 .../layer_settings/_attribution_popover.scss  |   0
 .../layer_settings/_index.scss                |   0
 .../attribution_form_row.test.tsx             |   0
 .../layer_settings/attribution_form_row.tsx   |   0
 .../layer_settings/attribution_popover.tsx    |   0
 .../layer_settings/index.tsx                  |   0
 .../layer_settings/layer_settings.tsx         |   0
 .../style_settings/_style_settings.scss       |   0
 .../style_settings/index.ts}                  |  12 +-
 .../style_settings/style_settings.tsx}        |   9 +-
 .../__snapshots__/layer_errors.test.js.snap   |  21 ---
 .../layer_panel/layer_errors/index.js         |  19 ---
 .../layer_panel/layer_errors/layer_errors.js  |  30 ----
 .../layer_errors/layer_errors.test.js         |  36 -----
 .../layer_panel/view.d.ts                     |  16 ---
 .../map_container/map_container.tsx           |   5 +-
 .../routes/map_page/map_app/map_app.tsx       |   4 +-
 52 files changed, 216 insertions(+), 227 deletions(-)
 rename x-pack/plugins/maps/public/components/{global_filter_checkbox.js => global_filter_checkbox.tsx} (70%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel/__snapshots__/view.test.js.snap => edit_layer_panel/__snapshots__/edit_layer_panel.test.tsx.snap} (93%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/_index.scss (100%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/_layer_panel.scss (100%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel/view.test.js => edit_layer_panel/edit_layer_panel.test.tsx} (83%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel/view.js => edit_layer_panel/edit_layer_panel.tsx} (64%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/filter_editor/_filter_editor.scss (100%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel/filter_editor/filter_editor.js => edit_layer_panel/filter_editor/filter_editor.tsx} (87%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel/filter_editor/index.js => edit_layer_panel/filter_editor/index.ts} (56%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel/flyout_footer/view.js => edit_layer_panel/flyout_footer/flyout_footer.tsx} (92%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel/flyout_footer/index.js => edit_layer_panel/flyout_footer/index.ts} (78%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel/index.js => edit_layer_panel/index.ts} (53%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/join_editor/__snapshots__/join_editor.test.tsx.snap (100%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel/join_editor/index.tsx => edit_layer_panel/join_editor/index.ts} (96%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/join_editor/join_editor.test.tsx (100%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/join_editor/join_editor.tsx (97%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/join_editor/resources/__snapshots__/metrics_expression.test.js.snap (100%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/join_editor/resources/_join.scss (100%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/join_editor/resources/join.js (100%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/join_editor/resources/join_expression.js (100%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/join_editor/resources/metrics_expression.js (100%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/join_editor/resources/metrics_expression.test.js (100%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/join_editor/resources/where_expression.js (100%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/layer_settings/__snapshots__/attribution_form_row.test.tsx.snap (100%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/layer_settings/_attribution_form_row.scss (100%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/layer_settings/_attribution_popover.scss (100%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/layer_settings/_index.scss (100%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/layer_settings/attribution_form_row.test.tsx (100%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/layer_settings/attribution_form_row.tsx (100%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/layer_settings/attribution_popover.tsx (100%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/layer_settings/index.tsx (100%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/layer_settings/layer_settings.tsx (100%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel => edit_layer_panel}/style_settings/_style_settings.scss (100%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel/style_settings/index.js => edit_layer_panel/style_settings/index.ts} (62%)
 rename x-pack/plugins/maps/public/connected_components/{layer_panel/style_settings/style_settings.js => edit_layer_panel/style_settings/style_settings.tsx} (78%)
 delete mode 100644 x-pack/plugins/maps/public/connected_components/layer_panel/layer_errors/__snapshots__/layer_errors.test.js.snap
 delete mode 100644 x-pack/plugins/maps/public/connected_components/layer_panel/layer_errors/index.js
 delete mode 100644 x-pack/plugins/maps/public/connected_components/layer_panel/layer_errors/layer_errors.js
 delete mode 100644 x-pack/plugins/maps/public/connected_components/layer_panel/layer_errors/layer_errors.test.js
 delete mode 100644 x-pack/plugins/maps/public/connected_components/layer_panel/view.d.ts

diff --git a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.tsx b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.tsx
index a1474237f6c9cc..a4d913979cf1b5 100644
--- a/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.tsx
+++ b/x-pack/plugins/maps/public/classes/layers/vector_layer/vector_layer.tsx
@@ -89,6 +89,7 @@ export interface IVectorLayer extends ILayer {
   getPropertiesForTooltip(properties: GeoJsonProperties): Promise<ITooltipProperty[]>;
   hasJoins(): boolean;
   canShowTooltip(): boolean;
+  getLeftJoinFields(): Promise<IField[]>;
 }
 
 export class VectorLayer extends AbstractLayer implements IVectorLayer {
diff --git a/x-pack/plugins/maps/public/classes/sources/ems_file_source/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/ems_file_source/update_source_editor.tsx
index abac9cbe5d0267..265a0f67f959c2 100644
--- a/x-pack/plugins/maps/public/classes/sources/ems_file_source/update_source_editor.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/ems_file_source/update_source_editor.tsx
@@ -12,7 +12,7 @@ import { TooltipSelector } from '../../../components/tooltip_selector';
 import { getEmsFileLayers } from '../../../util';
 import { IEmsFileSource } from './ems_file_source';
 import { IField } from '../../fields/field';
-import { OnSourceChangeArgs } from '../../../connected_components/layer_panel/view';
+import { OnSourceChangeArgs } from '../source';
 
 interface Props {
   layerId: string;
diff --git a/x-pack/plugins/maps/public/classes/sources/es_geo_line_source/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/es_geo_line_source/update_source_editor.tsx
index 81c5d8d6d89df4..2688ef1d29686f 100644
--- a/x-pack/plugins/maps/public/classes/sources/es_geo_line_source/update_source_editor.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/es_geo_line_source/update_source_editor.tsx
@@ -18,7 +18,7 @@ import { MetricsEditor } from '../../../components/metrics_editor';
 import { getIndexPatternService } from '../../../kibana_services';
 import { GeoLineForm } from './geo_line_form';
 import { AggDescriptor } from '../../../../common/descriptor_types';
-import { OnSourceChangeArgs } from '../../../connected_components/layer_panel/view';
+import { OnSourceChangeArgs } from '../source';
 
 interface Props {
   indexPatternId: string;
diff --git a/x-pack/plugins/maps/public/classes/sources/es_search_source/scaling_form.tsx b/x-pack/plugins/maps/public/classes/sources/es_search_source/scaling_form.tsx
index b9ce43dbbdad42..5d095035331f8c 100644
--- a/x-pack/plugins/maps/public/classes/sources/es_search_source/scaling_form.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/es_search_source/scaling_form.tsx
@@ -22,7 +22,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { getIndexPatternService } from '../../../kibana_services';
 import { DEFAULT_MAX_RESULT_WINDOW, LAYER_TYPE, SCALING_TYPES } from '../../../../common/constants';
 import { loadIndexSettings } from './load_index_settings';
-import { OnSourceChangeArgs } from '../../../connected_components/layer_panel/view';
+import { OnSourceChangeArgs } from '../source';
 
 interface Props {
   filterByMapBounds: boolean;
diff --git a/x-pack/plugins/maps/public/classes/sources/es_search_source/top_hits/create_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/es_search_source/top_hits/create_source_editor.tsx
index ec656be3efeaea..41c9076c114360 100644
--- a/x-pack/plugins/maps/public/classes/sources/es_search_source/top_hits/create_source_editor.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/es_search_source/top_hits/create_source_editor.tsx
@@ -19,7 +19,7 @@ import {
   SortDirection,
 } from '../../../../../../../../src/plugins/data/common';
 import { TopHitsForm } from './top_hits_form';
-import { OnSourceChangeArgs } from '../../../../connected_components/layer_panel/view';
+import { OnSourceChangeArgs } from '../../source';
 
 interface Props {
   onSourceConfigChange: (sourceConfig: Partial<ESSearchSourceDescriptor> | null) => void;
diff --git a/x-pack/plugins/maps/public/classes/sources/es_search_source/top_hits/top_hits_form.tsx b/x-pack/plugins/maps/public/classes/sources/es_search_source/top_hits/top_hits_form.tsx
index e4f196e5e8a858..83831f84e77f98 100644
--- a/x-pack/plugins/maps/public/classes/sources/es_search_source/top_hits/top_hits_form.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/es_search_source/top_hits/top_hits_form.tsx
@@ -14,7 +14,7 @@ import { getIndexPatternService } from '../../../../kibana_services';
 import { ValidatedRange } from '../../../../components/validated_range';
 import { DEFAULT_MAX_INNER_RESULT_WINDOW } from '../../../../../common/constants';
 import { loadIndexSettings } from '../load_index_settings';
-import { OnSourceChangeArgs } from '../../../../connected_components/layer_panel/view';
+import { OnSourceChangeArgs } from '../../source';
 import { IFieldType, SortDirection } from '../../../../../../../../src/plugins/data/public';
 
 interface Props {
diff --git a/x-pack/plugins/maps/public/classes/sources/es_search_source/top_hits/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/es_search_source/top_hits/update_source_editor.tsx
index 90553d47e644a5..6ca38f3be22f48 100644
--- a/x-pack/plugins/maps/public/classes/sources/es_search_source/top_hits/update_source_editor.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/es_search_source/top_hits/update_source_editor.tsx
@@ -16,7 +16,7 @@ import { getIndexPatternService } from '../../../../kibana_services';
 import { getTermsFields, getSortFields, getSourceFields } from '../../../../index_pattern_util';
 import { SortDirection, IFieldType } from '../../../../../../../../src/plugins/data/public';
 import { ESDocField } from '../../../fields/es_doc_field';
-import { OnSourceChangeArgs } from '../../../../connected_components/layer_panel/view';
+import { OnSourceChangeArgs } from '../../source';
 import { TopHitsForm } from './top_hits_form';
 import { ESSearchSource } from '../es_search_source';
 import { IField } from '../../../fields/field';
diff --git a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx
index a20aadd3c12bc0..62ebdb789daebc 100644
--- a/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx
+++ b/x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/update_source_editor.tsx
@@ -14,7 +14,7 @@ import { TooltipSelector } from '../../../components/tooltip_selector';
 import { MVTField } from '../../fields/mvt_field';
 import { MVTSingleLayerVectorSource } from './mvt_single_layer_vector_source';
 import { MVTSettings, MVTSingleLayerSourceSettings } from './mvt_single_layer_source_settings';
-import { OnSourceChangeArgs } from '../../../connected_components/layer_panel/view';
+import { OnSourceChangeArgs } from '../source';
 import { MVTFieldDescriptor } from '../../../../common/descriptor_types';
 
 interface Props {
diff --git a/x-pack/plugins/maps/public/classes/sources/source.ts b/x-pack/plugins/maps/public/classes/sources/source.ts
index 28a68dda64cb6b..1f683068e132bf 100644
--- a/x-pack/plugins/maps/public/classes/sources/source.ts
+++ b/x-pack/plugins/maps/public/classes/sources/source.ts
@@ -14,12 +14,17 @@ import { GeoJsonProperties } from 'geojson';
 import { copyPersistentState } from '../../reducers/copy_persistent_state';
 
 import { IField } from '../fields/field';
-import { FieldFormatter, MAX_ZOOM, MIN_ZOOM } from '../../../common/constants';
+import { FieldFormatter, LAYER_TYPE, MAX_ZOOM, MIN_ZOOM } from '../../../common/constants';
 import { AbstractSourceDescriptor, Attribution } from '../../../common/descriptor_types';
-import { OnSourceChangeArgs } from '../../connected_components/layer_panel/view';
 import { LICENSED_FEATURES } from '../../licensed_features';
 import { PreIndexedShape } from '../../../common/elasticsearch_util';
 
+export type OnSourceChangeArgs = {
+  propName: string;
+  value: unknown;
+  newLayerType?: LAYER_TYPE;
+};
+
 export type SourceEditorArgs = {
   onChange: (...args: OnSourceChangeArgs[]) => void;
   currentLayerType?: string;
diff --git a/x-pack/plugins/maps/public/components/global_filter_checkbox.js b/x-pack/plugins/maps/public/components/global_filter_checkbox.tsx
similarity index 70%
rename from x-pack/plugins/maps/public/components/global_filter_checkbox.js
rename to x-pack/plugins/maps/public/components/global_filter_checkbox.tsx
index df31cc5c40cdf4..bddb1cfd9cfcd5 100644
--- a/x-pack/plugins/maps/public/components/global_filter_checkbox.js
+++ b/x-pack/plugins/maps/public/components/global_filter_checkbox.tsx
@@ -6,10 +6,16 @@
  */
 
 import React from 'react';
-import { EuiFormRow, EuiSwitch } from '@elastic/eui';
+import { EuiFormRow, EuiSwitch, EuiSwitchEvent } from '@elastic/eui';
 
-export function GlobalFilterCheckbox({ applyGlobalQuery, label, setApplyGlobalQuery }) {
-  const onApplyGlobalQueryChange = (event) => {
+interface Props {
+  applyGlobalQuery: boolean;
+  label: string;
+  setApplyGlobalQuery: (applyGlobalQuery: boolean) => void;
+}
+
+export function GlobalFilterCheckbox({ applyGlobalQuery, label, setApplyGlobalQuery }: Props) {
+  const onApplyGlobalQueryChange = (event: EuiSwitchEvent) => {
     setApplyGlobalQuery(event.target.checked);
   };
 
diff --git a/x-pack/plugins/maps/public/connected_components/_index.scss b/x-pack/plugins/maps/public/connected_components/_index.scss
index c4438a9312bceb..9a49dbe550efb2 100644
--- a/x-pack/plugins/maps/public/connected_components/_index.scss
+++ b/x-pack/plugins/maps/public/connected_components/_index.scss
@@ -1,5 +1,5 @@
 @import 'map_container/map_container';
-@import 'layer_panel/index';
+@import 'edit_layer_panel/index';
 @import 'right_side_controls/index';
 @import 'toolbar_overlay/index';
 @import 'mb_map/tooltip_control/features_tooltip/index';
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/__snapshots__/view.test.js.snap b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/__snapshots__/edit_layer_panel.test.tsx.snap
similarity index 93%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/__snapshots__/view.test.js.snap
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/__snapshots__/edit_layer_panel.test.tsx.snap
index bbec1643cb55df..24f15674a05043 100644
--- a/x-pack/plugins/maps/public/connected_components/layer_panel/__snapshots__/view.test.js.snap
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/__snapshots__/edit_layer_panel.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`LayerPanel is rendered 1`] = `
+exports[`EditLayerPanel is rendered 1`] = `
 <Provider
   services={
     Object {
@@ -90,7 +90,6 @@ exports[`LayerPanel is rendered 1`] = `
       <div
         className="mapLayerPanel__bodyOverflow"
       >
-        <LayerErrors />
         <LayerSettings
           layer={
             Object {
@@ -98,6 +97,7 @@ exports[`LayerPanel is rendered 1`] = `
               "getId": [Function],
               "getImmutableSourceProperties": [Function],
               "getLayerTypeIconName": [Function],
+              "hasErrors": [Function],
               "renderSourceSettingsEditor": [Function],
               "showJoinEditor": [Function],
               "supportsElasticsearchFilters": [Function],
@@ -116,6 +116,7 @@ exports[`LayerPanel is rendered 1`] = `
                 "getId": [Function],
                 "getImmutableSourceProperties": [Function],
                 "getLayerTypeIconName": [Function],
+                "hasErrors": [Function],
                 "renderSourceSettingsEditor": [Function],
                 "showJoinEditor": [Function],
                 "supportsElasticsearchFilters": [Function],
@@ -140,4 +141,4 @@ exports[`LayerPanel is rendered 1`] = `
 </Provider>
 `;
 
-exports[`LayerPanel should render empty panel when selectedLayer is null 1`] = `""`;
+exports[`EditLayerPanel should render empty panel when selectedLayer is null 1`] = `""`;
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/_index.scss b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/_index.scss
similarity index 100%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/_index.scss
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/_index.scss
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/_layer_panel.scss b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/_layer_panel.scss
similarity index 100%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/_layer_panel.scss
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/_layer_panel.scss
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/view.test.js b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/edit_layer_panel.test.tsx
similarity index 83%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/view.test.js
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/edit_layer_panel.test.tsx
index ae5368c4749859..fa5cdc77982b85 100644
--- a/x-pack/plugins/maps/public/connected_components/layer_panel/view.test.js
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/edit_layer_panel.test.tsx
@@ -29,12 +29,6 @@ jest.mock('./flyout_footer', () => ({
   },
 }));
 
-jest.mock('./layer_errors', () => ({
-  LayerErrors: () => {
-    return <div>mockLayerErrors</div>;
-  },
-}));
-
 jest.mock('./layer_settings', () => ({
   LayerSettings: () => {
     return <div>mockLayerSettings</div>;
@@ -53,11 +47,11 @@ jest.mock('../../kibana_services', () => {
 });
 
 import React from 'react';
-import { shallowWithIntl } from '@kbn/test/jest';
-
-import { LayerPanel } from './view';
+import { shallow } from 'enzyme';
+import { ILayer } from '../../classes/layers/layer';
+import { EditLayerPanel } from './edit_layer_panel';
 
-const mockLayer = {
+const mockLayer = ({
   getId: () => {
     return '1';
   },
@@ -79,7 +73,10 @@ const mockLayer = {
   renderSourceSettingsEditor: () => {
     return <div>mockSourceSettings</div>;
   },
-};
+  hasErrors: () => {
+    return false;
+  },
+} as unknown) as ILayer;
 
 const defaultProps = {
   selectedLayer: mockLayer,
@@ -87,9 +84,9 @@ const defaultProps = {
   updateSourceProp: () => {},
 };
 
-describe('LayerPanel', () => {
+describe('EditLayerPanel', () => {
   test('is rendered', async () => {
-    const component = shallowWithIntl(<LayerPanel {...defaultProps} />);
+    const component = shallow(<EditLayerPanel {...defaultProps} />);
 
     // Ensure all promises resolve
     await new Promise((resolve) => process.nextTick(resolve));
@@ -100,7 +97,7 @@ describe('LayerPanel', () => {
   });
 
   test('should render empty panel when selectedLayer is null', async () => {
-    const component = shallowWithIntl(<LayerPanel {...defaultProps} selectedLayer={undefined} />);
+    const component = shallow(<EditLayerPanel {...defaultProps} selectedLayer={undefined} />);
 
     // Ensure all promises resolve
     await new Promise((resolve) => process.nextTick(resolve));
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/view.js b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/edit_layer_panel.tsx
similarity index 64%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/view.js
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/edit_layer_panel.tsx
index 9438d55ac18bc1..eb3c472252252a 100644
--- a/x-pack/plugins/maps/public/connected_components/layer_panel/view.js
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/edit_layer_panel.tsx
@@ -5,15 +5,10 @@
  * 2.0.
  */
 
-import React, { Fragment } from 'react';
+import React, { Component, Fragment } from 'react';
 
-import { FilterEditor } from './filter_editor';
-import { JoinEditor } from './join_editor';
-import { FlyoutFooter } from './flyout_footer';
-import { LayerErrors } from './layer_errors';
-import { LayerSettings } from './layer_settings';
-import { StyleSettings } from './style_settings';
 import {
+  EuiCallOut,
   EuiIcon,
   EuiFlexItem,
   EuiTitle,
@@ -26,20 +21,47 @@ import {
   EuiText,
   EuiLink,
 } from '@elastic/eui';
-
 import { i18n } from '@kbn/i18n';
+import { FilterEditor } from './filter_editor';
+import { JoinEditor, JoinField } from './join_editor';
+import { FlyoutFooter } from './flyout_footer';
+import { LayerSettings } from './layer_settings';
+import { StyleSettings } from './style_settings';
+
 import { KibanaContextProvider } from '../../../../../../src/plugins/kibana_react/public';
 import { Storage } from '../../../../../../src/plugins/kibana_utils/public';
-
+import { LAYER_TYPE } from '../../../common/constants';
 import { getData, getCore } from '../../kibana_services';
+import { ILayer } from '../../classes/layers/layer';
+import { IVectorLayer } from '../../classes/layers/vector_layer';
+import { ImmutableSourceProperty, OnSourceChangeArgs } from '../../classes/sources/source';
+import { IField } from '../../classes/fields/field';
 
 const localStorage = new Storage(window.localStorage);
 
-export class LayerPanel extends React.Component {
-  state = {
+export interface Props {
+  selectedLayer?: ILayer;
+  updateSourceProp: (
+    layerId: string,
+    propName: string,
+    value: unknown,
+    newLayerType?: LAYER_TYPE
+  ) => void;
+}
+
+interface State {
+  displayName: string;
+  immutableSourceProps: ImmutableSourceProperty[];
+  leftJoinFields: JoinField[];
+  supportsFitToBounds: boolean;
+}
+
+export class EditLayerPanel extends Component<Props, State> {
+  private _isMounted = false;
+  state: State = {
     displayName: '',
     immutableSourceProps: [],
-    leftJoinFields: null,
+    leftJoinFields: [],
     supportsFitToBounds: false,
   };
 
@@ -89,14 +111,19 @@ export class LayerPanel extends React.Component {
   };
 
   async _loadLeftJoinFields() {
-    if (!this.props.selectedLayer || !this.props.selectedLayer.showJoinEditor()) {
+    if (
+      !this.props.selectedLayer ||
+      !this.props.selectedLayer.showJoinEditor() ||
+      (this.props.selectedLayer as IVectorLayer).getLeftJoinFields === undefined
+    ) {
       return;
     }
 
-    let leftJoinFields;
+    let leftJoinFields: JoinField[] = [];
     try {
-      const leftFieldsInstances = await this.props.selectedLayer.getLeftJoinFields();
-      const leftFieldPromises = leftFieldsInstances.map(async (field) => {
+      const leftFieldsInstances = await (this.props
+        .selectedLayer as IVectorLayer).getLeftJoinFields();
+      const leftFieldPromises = leftFieldsInstances.map(async (field: IField) => {
         return {
           name: field.getName(),
           label: await field.getLabel(),
@@ -104,22 +131,42 @@ export class LayerPanel extends React.Component {
       });
       leftJoinFields = await Promise.all(leftFieldPromises);
     } catch (error) {
-      leftJoinFields = [];
+      // ignore exceptions getting fields, will bubble up in layer errors panel
     }
     if (this._isMounted) {
       this.setState({ leftJoinFields });
     }
   }
 
-  _onSourceChange = (...args) => {
+  _onSourceChange = (...args: OnSourceChangeArgs[]) => {
     for (let i = 0; i < args.length; i++) {
       const { propName, value, newLayerType } = args[i];
-      this.props.updateSourceProp(this.props.selectedLayer.getId(), propName, value, newLayerType);
+      this.props.updateSourceProp(this.props.selectedLayer!.getId(), propName, value, newLayerType);
     }
   };
 
+  _renderLayerErrors() {
+    if (!this.props.selectedLayer || !this.props.selectedLayer.hasErrors()) {
+      return null;
+    }
+
+    return (
+      <Fragment>
+        <EuiCallOut
+          color="warning"
+          title={i18n.translate('xpack.maps.layerPanel.settingsPanel.unableToLoadTitle', {
+            defaultMessage: 'Unable to load layer',
+          })}
+        >
+          <p data-test-subj="layerErrorMessage">{this.props.selectedLayer.getErrors()}</p>
+        </EuiCallOut>
+        <EuiSpacer size="m" />
+      </Fragment>
+    );
+  }
+
   _renderFilterSection() {
-    if (!this.props.selectedLayer.supportsElasticsearchFilters()) {
+    if (!this.props.selectedLayer || !this.props.selectedLayer.supportsElasticsearchFilters()) {
       return null;
     }
 
@@ -134,7 +181,7 @@ export class LayerPanel extends React.Component {
   }
 
   _renderJoinSection() {
-    if (!this.props.selectedLayer.showJoinEditor()) {
+    if (!this.props.selectedLayer || !this.props.selectedLayer.showJoinEditor()) {
       return null;
     }
 
@@ -153,29 +200,29 @@ export class LayerPanel extends React.Component {
   }
 
   _renderSourceProperties() {
-    return this.state.immutableSourceProps.map(({ label, value, link }) => {
-      function renderValue() {
-        if (link) {
-          return (
-            <EuiLink href={link} target="_blank">
-              {value}
-            </EuiLink>
-          );
+    return this.state.immutableSourceProps.map(
+      ({ label, value, link }: ImmutableSourceProperty) => {
+        function renderValue() {
+          if (link) {
+            return (
+              <EuiLink href={link} target="_blank">
+                {value}
+              </EuiLink>
+            );
+          }
+          return <span>{value}</span>;
         }
-        return <span>{value}</span>;
+        return (
+          <p key={label} className="mapLayerPanel__sourceDetail">
+            <strong>{label}</strong> {renderValue()}
+          </p>
+        );
       }
-      return (
-        <p key={label} className="mapLayerPanel__sourceDetail">
-          <strong>{label}</strong> {renderValue()}
-        </p>
-      );
-    });
+    );
   }
 
   render() {
-    const { selectedLayer } = this.props;
-
-    if (!selectedLayer) {
+    if (!this.props.selectedLayer) {
       return null;
     }
 
@@ -192,7 +239,7 @@ export class LayerPanel extends React.Component {
           <EuiFlyoutHeader hasBorder className="mapLayerPanel__header">
             <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s">
               <EuiFlexItem grow={false}>
-                <EuiIcon type={selectedLayer.getLayerTypeIconName()} />
+                <EuiIcon type={this.props.selectedLayer.getLayerTypeIconName()} />
               </EuiFlexItem>
               <EuiFlexItem>
                 <EuiTitle size="s">
@@ -218,10 +265,10 @@ export class LayerPanel extends React.Component {
 
           <div className="mapLayerPanel__body">
             <div className="mapLayerPanel__bodyOverflow">
-              <LayerErrors />
+              {this._renderLayerErrors()}
 
               <LayerSettings
-                layer={selectedLayer}
+                layer={this.props.selectedLayer}
                 supportsFitToBounds={this.state.supportsFitToBounds}
               />
 
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/filter_editor/_filter_editor.scss b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/filter_editor/_filter_editor.scss
similarity index 100%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/filter_editor/_filter_editor.scss
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/filter_editor/_filter_editor.scss
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/filter_editor/filter_editor.js b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/filter_editor/filter_editor.tsx
similarity index 87%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/filter_editor/filter_editor.js
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/filter_editor/filter_editor.tsx
index 654ce5a4e9ddbf..6e258e679b96f9 100644
--- a/x-pack/plugins/maps/public/connected_components/layer_panel/filter_editor/filter_editor.js
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/filter_editor/filter_editor.tsx
@@ -21,12 +21,28 @@ import {
 
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
+import type { IndexPattern, Query } from 'src/plugins/data/public';
+import { APP_ID } from '../../../../common/constants';
 import { getIndexPatternService, getData } from '../../../kibana_services';
 import { GlobalFilterCheckbox } from '../../../components/global_filter_checkbox';
 import { GlobalTimeCheckbox } from '../../../components/global_time_checkbox';
+import { ILayer } from '../../../classes/layers/layer';
 
-export class FilterEditor extends Component {
-  state = {
+export interface Props {
+  layer: ILayer;
+  setLayerQuery: (id: string, query: Query) => void;
+  updateSourceProp: (layerId: string, propName: string, value: unknown) => void;
+}
+
+interface State {
+  isPopoverOpen: boolean;
+  indexPatterns: IndexPattern[];
+  isSourceTimeAware: boolean;
+}
+
+export class FilterEditor extends Component<Props, State> {
+  private _isMounted = false;
+  state: State = {
     isPopoverOpen: false,
     indexPatterns: [],
     isSourceTimeAware: false,
@@ -45,7 +61,7 @@ export class FilterEditor extends Component {
   async _loadIndexPatterns() {
     // Filter only effects source so only load source indices.
     const indexPatternIds = this.props.layer.getSource().getIndexPatternIds();
-    const indexPatterns = [];
+    const indexPatterns: IndexPattern[] = [];
     const getIndexPatternPromises = indexPatternIds.map(async (indexPatternId) => {
       try {
         const indexPattern = await getIndexPatternService().get(indexPatternId);
@@ -81,16 +97,19 @@ export class FilterEditor extends Component {
     this.setState({ isPopoverOpen: false });
   };
 
-  _onQueryChange = ({ query }) => {
+  _onQueryChange = ({ query }: { query?: Query }) => {
+    if (!query) {
+      return;
+    }
     this.props.setLayerQuery(this.props.layer.getId(), query);
     this._close();
   };
 
-  _onApplyGlobalQueryChange = (applyGlobalQuery) => {
+  _onApplyGlobalQueryChange = (applyGlobalQuery: boolean) => {
     this.props.updateSourceProp(this.props.layer.getId(), 'applyGlobalQuery', applyGlobalQuery);
   };
 
-  _onApplyGlobalTimeChange = (applyGlobalTime) => {
+  _onApplyGlobalTimeChange = (applyGlobalTime: boolean) => {
     this.props.updateSourceProp(this.props.layer.getId(), 'applyGlobalTime', applyGlobalTime);
   };
 
@@ -109,6 +128,7 @@ export class FilterEditor extends Component {
       >
         <div className="mapFilterEditor" data-test-subj="mapFilterEditor">
           <SearchBar
+            appName={APP_ID}
             showFilterBar={false}
             showDatePicker={false}
             showQueryInput={true}
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/filter_editor/index.js b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/filter_editor/index.ts
similarity index 56%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/filter_editor/index.js
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/filter_editor/index.ts
index c3e1acc912c5ec..2277cba3e4744f 100644
--- a/x-pack/plugins/maps/public/connected_components/layer_panel/filter_editor/index.js
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/filter_editor/index.ts
@@ -5,23 +5,28 @@
  * 2.0.
  */
 
+import { AnyAction } from 'redux';
+import { ThunkDispatch } from 'redux-thunk';
 import { connect } from 'react-redux';
+import type { Query } from 'src/plugins/data/public';
 import { FilterEditor } from './filter_editor';
 import { getSelectedLayer } from '../../../selectors/map_selectors';
 import { setLayerQuery, updateSourceProp } from '../../../actions';
+import { MapStoreState } from '../../../reducers/store';
 
-function mapStateToProps(state = {}) {
+function mapStateToProps(state: MapStoreState) {
   return {
-    layer: getSelectedLayer(state),
+    layer: getSelectedLayer(state)!,
   };
 }
 
-function mapDispatchToProps(dispatch) {
+function mapDispatchToProps(dispatch: ThunkDispatch<MapStoreState, void, AnyAction>) {
   return {
-    setLayerQuery: (layerId, query) => {
+    setLayerQuery: (layerId: string, query: Query) => {
       dispatch(setLayerQuery(layerId, query));
     },
-    updateSourceProp: (id, propName, value) => dispatch(updateSourceProp(id, propName, value)),
+    updateSourceProp: (id: string, propName: string, value: unknown) =>
+      dispatch(updateSourceProp(id, propName, value)),
   };
 }
 
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/flyout_footer/view.js b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/flyout_footer/flyout_footer.tsx
similarity index 92%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/flyout_footer/view.js
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/flyout_footer/flyout_footer.tsx
index 7070a875715f47..b55f9488e1f767 100644
--- a/x-pack/plugins/maps/public/connected_components/layer_panel/flyout_footer/view.js
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/flyout_footer/flyout_footer.tsx
@@ -10,12 +10,19 @@ import React from 'react';
 import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiButtonEmpty } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
+export interface Props {
+  cancelLayerPanel: () => void;
+  saveLayerEdits: () => void;
+  removeLayer: () => void;
+  hasStateChanged: boolean;
+}
+
 export const FlyoutFooter = ({
   cancelLayerPanel,
   saveLayerEdits,
   removeLayer,
   hasStateChanged,
-}) => {
+}: Props) => {
   const removeBtn = (
     <EuiFlexItem grow={false}>
       <EuiButtonEmpty
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/flyout_footer/index.js b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/flyout_footer/index.ts
similarity index 78%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/flyout_footer/index.js
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/flyout_footer/index.ts
index a01e3d3c20b002..8546b8088d40af 100644
--- a/x-pack/plugins/maps/public/connected_components/layer_panel/flyout_footer/index.js
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/flyout_footer/index.ts
@@ -5,8 +5,10 @@
  * 2.0.
  */
 
+import { AnyAction } from 'redux';
+import { ThunkDispatch } from 'redux-thunk';
 import { connect } from 'react-redux';
-import { FlyoutFooter } from './view';
+import { FlyoutFooter } from './flyout_footer';
 
 import { FLYOUT_STATE } from '../../../reducers/ui';
 import { hasDirtyState } from '../../../selectors/map_selectors';
@@ -16,14 +18,15 @@ import {
   removeTrackedLayerStateForSelectedLayer,
   updateFlyout,
 } from '../../../actions';
+import { MapStoreState } from '../../../reducers/store';
 
-function mapStateToProps(state = {}) {
+function mapStateToProps(state: MapStoreState) {
   return {
     hasStateChanged: hasDirtyState(state),
   };
 }
 
-const mapDispatchToProps = (dispatch) => {
+const mapDispatchToProps = (dispatch: ThunkDispatch<MapStoreState, void, AnyAction>) => {
   return {
     cancelLayerPanel: () => {
       dispatch(updateFlyout(FLYOUT_STATE.NONE));
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/index.js b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/index.ts
similarity index 53%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/index.js
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/index.ts
index d47ebc98a3fe3b..b78ffb3874e304 100644
--- a/x-pack/plugins/maps/public/connected_components/layer_panel/index.js
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/index.ts
@@ -5,12 +5,16 @@
  * 2.0.
  */
 
+import { AnyAction } from 'redux';
+import { ThunkDispatch } from 'redux-thunk';
 import { connect } from 'react-redux';
-import { LayerPanel } from './view';
+import { EditLayerPanel } from './edit_layer_panel';
+import { LAYER_TYPE } from '../../../common/constants';
 import { getSelectedLayer } from '../../selectors/map_selectors';
 import { updateSourceProp } from '../../actions';
+import { MapStoreState } from '../../reducers/store';
 
-function mapStateToProps(state = {}) {
+function mapStateToProps(state: MapStoreState) {
   const selectedLayer = getSelectedLayer(state);
   return {
     key: selectedLayer ? `${selectedLayer.getId()}${selectedLayer.showJoinEditor()}` : '',
@@ -18,12 +22,12 @@ function mapStateToProps(state = {}) {
   };
 }
 
-function mapDispatchToProps(dispatch) {
+function mapDispatchToProps(dispatch: ThunkDispatch<MapStoreState, void, AnyAction>) {
   return {
-    updateSourceProp: (id, propName, value, newLayerType) =>
+    updateSourceProp: (id: string, propName: string, value: unknown, newLayerType?: LAYER_TYPE) =>
       dispatch(updateSourceProp(id, propName, value, newLayerType)),
   };
 }
 
-const connectedLayerPanel = connect(mapStateToProps, mapDispatchToProps)(LayerPanel);
-export { connectedLayerPanel as LayerPanel };
+const connected = connect(mapStateToProps, mapDispatchToProps)(EditLayerPanel);
+export { connected as EditLayerPanel };
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/__snapshots__/join_editor.test.tsx.snap b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/__snapshots__/join_editor.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/__snapshots__/join_editor.test.tsx.snap
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/__snapshots__/join_editor.test.tsx.snap
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/index.tsx b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/index.ts
similarity index 96%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/index.tsx
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/index.ts
index fb8e27205368a9..7971017a3d52b6 100644
--- a/x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/index.tsx
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/index.ts
@@ -31,3 +31,4 @@ function mapDispatchToProps(dispatch: ThunkDispatch<MapStoreState, void, AnyActi
 
 const connectedJoinEditor = connect(mapStateToProps, mapDispatchToProps)(JoinEditor);
 export { connectedJoinEditor as JoinEditor };
+export { JoinField } from './join_editor';
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/join_editor.test.tsx b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/join_editor.test.tsx
similarity index 100%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/join_editor.test.tsx
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/join_editor.test.tsx
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/join_editor.tsx b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/join_editor.tsx
similarity index 97%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/join_editor.tsx
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/join_editor.tsx
index 9eeeb4faa5e724..d07b39be6f6ab2 100644
--- a/x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/join_editor.tsx
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/join_editor.tsx
@@ -23,14 +23,18 @@ import { i18n } from '@kbn/i18n';
 import { Join } from './resources/join';
 import { ILayer } from '../../../classes/layers/layer';
 import { JoinDescriptor } from '../../../../common/descriptor_types';
-import { IField } from '../../../classes/fields/field';
 import { SOURCE_TYPES } from '../../../../common/constants';
 
+export interface JoinField {
+  label: string;
+  name: string;
+}
+
 export interface Props {
   joins: JoinDescriptor[];
   layer: ILayer;
   layerDisplayName: string;
-  leftJoinFields: IField[];
+  leftJoinFields: JoinField[];
   onChange: (layer: ILayer, joins: JoinDescriptor[]) => void;
 }
 
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/resources/__snapshots__/metrics_expression.test.js.snap b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/resources/__snapshots__/metrics_expression.test.js.snap
similarity index 100%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/resources/__snapshots__/metrics_expression.test.js.snap
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/resources/__snapshots__/metrics_expression.test.js.snap
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/resources/_join.scss b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/resources/_join.scss
similarity index 100%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/resources/_join.scss
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/resources/_join.scss
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/resources/join.js b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/resources/join.js
similarity index 100%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/resources/join.js
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/resources/join.js
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/resources/join_expression.js b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/resources/join_expression.js
similarity index 100%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/resources/join_expression.js
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/resources/join_expression.js
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/resources/metrics_expression.js b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/resources/metrics_expression.js
similarity index 100%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/resources/metrics_expression.js
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/resources/metrics_expression.js
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/resources/metrics_expression.test.js b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/resources/metrics_expression.test.js
similarity index 100%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/resources/metrics_expression.test.js
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/resources/metrics_expression.test.js
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/resources/where_expression.js b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/resources/where_expression.js
similarity index 100%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/join_editor/resources/where_expression.js
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/join_editor/resources/where_expression.js
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/layer_settings/__snapshots__/attribution_form_row.test.tsx.snap b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/__snapshots__/attribution_form_row.test.tsx.snap
similarity index 100%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/layer_settings/__snapshots__/attribution_form_row.test.tsx.snap
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/__snapshots__/attribution_form_row.test.tsx.snap
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/layer_settings/_attribution_form_row.scss b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/_attribution_form_row.scss
similarity index 100%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/layer_settings/_attribution_form_row.scss
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/_attribution_form_row.scss
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/layer_settings/_attribution_popover.scss b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/_attribution_popover.scss
similarity index 100%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/layer_settings/_attribution_popover.scss
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/_attribution_popover.scss
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/layer_settings/_index.scss b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/_index.scss
similarity index 100%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/layer_settings/_index.scss
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/_index.scss
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/layer_settings/attribution_form_row.test.tsx b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/attribution_form_row.test.tsx
similarity index 100%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/layer_settings/attribution_form_row.test.tsx
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/attribution_form_row.test.tsx
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/layer_settings/attribution_form_row.tsx b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/attribution_form_row.tsx
similarity index 100%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/layer_settings/attribution_form_row.tsx
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/attribution_form_row.tsx
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/layer_settings/attribution_popover.tsx b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/attribution_popover.tsx
similarity index 100%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/layer_settings/attribution_popover.tsx
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/attribution_popover.tsx
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/layer_settings/index.tsx b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/index.tsx
similarity index 100%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/layer_settings/index.tsx
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/index.tsx
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.tsx b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
similarity index 100%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/layer_settings/layer_settings.tsx
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/style_settings/_style_settings.scss b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/style_settings/_style_settings.scss
similarity index 100%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/style_settings/_style_settings.scss
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/style_settings/_style_settings.scss
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/style_settings/index.js b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/style_settings/index.ts
similarity index 62%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/style_settings/index.js
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/style_settings/index.ts
index a25477880e4654..d52689cda141af 100644
--- a/x-pack/plugins/maps/public/connected_components/layer_panel/style_settings/index.js
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/style_settings/index.ts
@@ -5,20 +5,24 @@
  * 2.0.
  */
 
+import { AnyAction } from 'redux';
+import { ThunkDispatch } from 'redux-thunk';
 import { connect } from 'react-redux';
 import { StyleSettings } from './style_settings';
 import { getSelectedLayer } from '../../../selectors/map_selectors';
 import { updateLayerStyleForSelectedLayer } from '../../../actions';
+import { MapStoreState } from '../../../reducers/store';
+import { StyleDescriptor } from '../../../../common/descriptor_types';
 
-function mapStateToProps(state = {}) {
+function mapStateToProps(state: MapStoreState) {
   return {
-    layer: getSelectedLayer(state),
+    layer: getSelectedLayer(state)!,
   };
 }
 
-function mapDispatchToProps(dispatch) {
+function mapDispatchToProps(dispatch: ThunkDispatch<MapStoreState, void, AnyAction>) {
   return {
-    updateStyleDescriptor: (styleDescriptor) => {
+    updateStyleDescriptor: (styleDescriptor: StyleDescriptor) => {
       dispatch(updateLayerStyleForSelectedLayer(styleDescriptor));
     },
   };
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/style_settings/style_settings.tsx
similarity index 78%
rename from x-pack/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js
rename to x-pack/plugins/maps/public/connected_components/edit_layer_panel/style_settings/style_settings.tsx
index b37e58925195c1..06e38079403d12 100644
--- a/x-pack/plugins/maps/public/connected_components/layer_panel/style_settings/style_settings.js
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/style_settings/style_settings.tsx
@@ -10,8 +10,15 @@ import React, { Fragment } from 'react';
 import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiPanel, EuiSpacer } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
+import { StyleDescriptor } from '../../../../common/descriptor_types';
+import { ILayer } from '../../../classes/layers/layer';
 
-export function StyleSettings({ layer, updateStyleDescriptor }) {
+export interface Props {
+  layer: ILayer;
+  updateStyleDescriptor: (styleDescriptor: StyleDescriptor) => void;
+}
+
+export function StyleSettings({ layer, updateStyleDescriptor }: Props) {
   const settingsEditor = layer.renderStyleEditor(updateStyleDescriptor);
 
   if (!settingsEditor) {
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/layer_errors/__snapshots__/layer_errors.test.js.snap b/x-pack/plugins/maps/public/connected_components/layer_panel/layer_errors/__snapshots__/layer_errors.test.js.snap
deleted file mode 100644
index 1fdc3a1bfdf178..00000000000000
--- a/x-pack/plugins/maps/public/connected_components/layer_panel/layer_errors/__snapshots__/layer_errors.test.js.snap
+++ /dev/null
@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Should render errors when layer has errors 1`] = `
-<Fragment>
-  <EuiCallOut
-    color="warning"
-    title="Unable to load layer"
-  >
-    <p
-      data-test-subj="layerErrorMessage"
-    >
-      simulated layer error
-    </p>
-  </EuiCallOut>
-  <EuiSpacer
-    size="m"
-  />
-</Fragment>
-`;
-
-exports[`should render nothing when layer has no errors 1`] = `""`;
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/layer_errors/index.js b/x-pack/plugins/maps/public/connected_components/layer_panel/layer_errors/index.js
deleted file mode 100644
index 932034cc19da62..00000000000000
--- a/x-pack/plugins/maps/public/connected_components/layer_panel/layer_errors/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { connect } from 'react-redux';
-import { LayerErrors } from './layer_errors';
-import { getSelectedLayer } from '../../../selectors/map_selectors';
-
-function mapStateToProps(state = {}) {
-  return {
-    layer: getSelectedLayer(state),
-  };
-}
-
-const connectedLayerErrors = connect(mapStateToProps, null)(LayerErrors);
-export { connectedLayerErrors as LayerErrors };
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/layer_errors/layer_errors.js b/x-pack/plugins/maps/public/connected_components/layer_panel/layer_errors/layer_errors.js
deleted file mode 100644
index 13c802faf79e76..00000000000000
--- a/x-pack/plugins/maps/public/connected_components/layer_panel/layer_errors/layer_errors.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React, { Fragment } from 'react';
-import { i18n } from '@kbn/i18n';
-import { EuiCallOut, EuiSpacer } from '@elastic/eui';
-
-export function LayerErrors({ layer }) {
-  if (!layer.hasErrors()) {
-    return null;
-  }
-
-  return (
-    <Fragment>
-      <EuiCallOut
-        color="warning"
-        title={i18n.translate('xpack.maps.layerPanel.settingsPanel.unableToLoadTitle', {
-          defaultMessage: 'Unable to load layer',
-        })}
-      >
-        <p data-test-subj="layerErrorMessage">{layer.getErrors()}</p>
-      </EuiCallOut>
-      <EuiSpacer size="m" />
-    </Fragment>
-  );
-}
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/layer_errors/layer_errors.test.js b/x-pack/plugins/maps/public/connected_components/layer_panel/layer_errors/layer_errors.test.js
deleted file mode 100644
index 333a1b2bd1e4ee..00000000000000
--- a/x-pack/plugins/maps/public/connected_components/layer_panel/layer_errors/layer_errors.test.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import { LayerErrors } from './layer_errors';
-
-test('Should render errors when layer has errors', () => {
-  const mockLayer = {
-    hasErrors: () => {
-      return true;
-    },
-    getErrors: () => {
-      return 'simulated layer error';
-    },
-  };
-  const component = shallow(<LayerErrors layer={mockLayer} />);
-
-  expect(component).toMatchSnapshot();
-});
-
-test('should render nothing when layer has no errors', () => {
-  const mockLayer = {
-    hasErrors: () => {
-      return false;
-    },
-  };
-  const component = shallow(<LayerErrors layer={mockLayer} />);
-
-  expect(component).toMatchSnapshot();
-});
diff --git a/x-pack/plugins/maps/public/connected_components/layer_panel/view.d.ts b/x-pack/plugins/maps/public/connected_components/layer_panel/view.d.ts
deleted file mode 100644
index c1c55ebe6040ba..00000000000000
--- a/x-pack/plugins/maps/public/connected_components/layer_panel/view.d.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-/* eslint-disable @typescript-eslint/consistent-type-definitions */
-
-import { LAYER_TYPE } from '../../../common/constants';
-
-export type OnSourceChangeArgs = {
-  propName: string;
-  value: unknown;
-  newLayerType?: LAYER_TYPE;
-};
diff --git a/x-pack/plugins/maps/public/connected_components/map_container/map_container.tsx b/x-pack/plugins/maps/public/connected_components/map_container/map_container.tsx
index 851fd583b4251f..9128cebf480ed2 100644
--- a/x-pack/plugins/maps/public/connected_components/map_container/map_container.tsx
+++ b/x-pack/plugins/maps/public/connected_components/map_container/map_container.tsx
@@ -16,8 +16,7 @@ import { ActionExecutionContext, Action } from 'src/plugins/ui_actions/public';
 import { MBMap } from '../mb_map';
 import { RightSideControls } from '../right_side_controls';
 import { ToolbarOverlay } from '../toolbar_overlay';
-// @ts-expect-error
-import { LayerPanel } from '../layer_panel';
+import { EditLayerPanel } from '../edit_layer_panel';
 import { AddLayerPanel } from '../add_layer_panel';
 import { ExitFullScreenButton } from '../../../../../../src/plugins/kibana_react/public';
 import { getIndexPatternsFromIds } from '../../index_pattern_util';
@@ -222,7 +221,7 @@ export class MapContainer extends Component<Props, State> {
     if (flyoutDisplay === FLYOUT_STATE.ADD_LAYER_WIZARD) {
       flyoutPanel = <AddLayerPanel />;
     } else if (flyoutDisplay === FLYOUT_STATE.LAYER_PANEL) {
-      flyoutPanel = <LayerPanel />;
+      flyoutPanel = <EditLayerPanel />;
     } else if (flyoutDisplay === FLYOUT_STATE.MAP_SETTINGS_PANEL) {
       flyoutPanel = <MapSettingsPanel />;
     }
diff --git a/x-pack/plugins/maps/public/routes/map_page/map_app/map_app.tsx b/x-pack/plugins/maps/public/routes/map_page/map_app/map_app.tsx
index 6a31e25197210d..21b50aba440f5a 100644
--- a/x-pack/plugins/maps/public/routes/map_page/map_app/map_app.tsx
+++ b/x-pack/plugins/maps/public/routes/map_page/map_app/map_app.tsx
@@ -42,7 +42,7 @@ import { getTopNavConfig } from '../top_nav_config';
 import { MapRefreshConfig, MapQuery } from '../../../../common/descriptor_types';
 import { goToSpecifiedPath } from '../../../render_app';
 import { MapSavedObjectAttributes } from '../../../../common/map_saved_object_type';
-import { getExistingMapPath } from '../../../../common/constants';
+import { getExistingMapPath, APP_ID } from '../../../../common/constants';
 import {
   getInitialQuery,
   getInitialRefreshConfig,
@@ -355,7 +355,7 @@ export class MapApp extends React.Component<Props, State> {
     return (
       <TopNavMenu
         setMenuMountPoint={this.props.setHeaderActionMenu}
-        appName="maps"
+        appName={APP_ID}
         config={topNavConfig}
         indexPatterns={this.state.indexPatterns}
         filters={this.props.filters}