[Maps] convert LayerPanel to typescript (#100481)

* [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

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 {

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;

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;

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;

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;

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 {

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';

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 {

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;

x-pack/plugins/maps/public/components/global_filter_checkbox.js → 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);
   };
 

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';

x-pack/plugins/maps/public/connected_components/layer_panel/view.test.js → 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,17 +73,20 @@ const mockLayer = {
   renderSourceSettingsEditor: () => {
     return <div>mockSourceSettings</div>;
   },
-};
+  hasErrors: () => {
+    return false;
+  },
+} as unknown) as ILayer;
 
 const defaultProps = {
   selectedLayer: mockLayer,
   fitToBounds: () => {},
   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));