[Maps] convert map inspector to TS (#113041)

* [Maps] convert map inspector to TS

* eslint

* simplify folder structure

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/maps/public/inspector/map_adapter.ts

@@ -6,9 +6,13 @@
  */
 
 import { EventEmitter } from 'events';
+import { Stats } from './types';
 
 class MapAdapter extends EventEmitter {
-  setMapState({ stats, style }) {
+  private stats?: Stats;
+  private style?: string;
+
+  setMapState({ stats, style }: { stats: Stats; style: string }) {
     this.stats = stats;
     this.style = style;
     this._onChange();

x-pack/plugins/maps/public/inspector/map_details.tsx

@@ -6,7 +6,6 @@
  */
 
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import {
   EuiTab,
   EuiTabs,
@@ -22,31 +21,42 @@ import { FormattedMessage } from '@kbn/i18n/react';
 const DETAILS_TAB_ID = 'details';
 const STYLE_TAB_ID = 'mapStyle';
 
-class MapDetails extends Component {
-  tabs = [
-    {
-      id: DETAILS_TAB_ID,
-      name: i18n.translate('xpack.maps.inspector.mapDetailsTitle', {
-        defaultMessage: 'Map details',
-      }),
-      dataTestSubj: 'mapDetailsTab',
-    },
-    {
-      id: STYLE_TAB_ID,
-      name: i18n.translate('xpack.maps.inspector.mapboxStyleTitle', {
-        defaultMessage: 'Mapbox style',
-      }),
-      dataTestSubj: 'mapboxStyleTab',
-    },
-  ];
+const TABS = [
+  {
+    id: DETAILS_TAB_ID,
+    name: i18n.translate('xpack.maps.inspector.mapDetailsTitle', {
+      defaultMessage: 'Map details',
+    }),
+    dataTestSubj: 'mapDetailsTab',
+  },
+  {
+    id: STYLE_TAB_ID,
+    name: i18n.translate('xpack.maps.inspector.mapboxStyleTitle', {
+      defaultMessage: 'Mapbox style',
+    }),
+    dataTestSubj: 'mapboxStyleTab',
+  },
+];
 
-  state = {
+interface Props {
+  centerLon: number;
+  centerLat: number;
+  zoom: number;
+  style: string;
+}
+
+interface State {
+  selectedTabId: typeof DETAILS_TAB_ID | typeof STYLE_TAB_ID;
+}
+
+export class MapDetails extends Component<Props, State> {
+  state: State = {
     selectedTabId: DETAILS_TAB_ID,
   };
 
-  onSelectedTabChanged = (id) => {
+  onSelectedTabChanged = (id: string) => {
     this.setState({
-      selectedTabId: id,
+      selectedTabId: id as typeof DETAILS_TAB_ID | typeof STYLE_TAB_ID,
     });
   };
 
@@ -55,7 +65,7 @@ class MapDetails extends Component {
       return (
         <div data-test-subj="mapboxStyleContainer">
           <EuiCodeBlock language="json" paddingSize="s">
-            {JSON.stringify(this.props.mapStyle, null, 2)}
+            {JSON.stringify(this.props.style, null, 2)}
           </EuiCodeBlock>
         </div>
       );
@@ -96,7 +106,7 @@ class MapDetails extends Component {
   };
 
   renderTabs() {
-    return this.tabs.map((tab, index) => (
+    return TABS.map((tab, index) => (
       <EuiTab
         onClick={() => this.onSelectedTabChanged(tab.id)}
         isSelected={tab.id === this.state.selectedTabId}
@@ -118,12 +128,3 @@ class MapDetails extends Component {
     );
   }
 }
-
-MapDetails.propTypes = {
-  centerLon: PropTypes.number.isRequired,
-  centerLat: PropTypes.number.isRequired,
-  zoom: PropTypes.number.isRequired,
-  mapStyle: PropTypes.object.isRequired,
-};
-
-export { MapDetails };

x-pack/plugins/maps/public/inspector/map_inspector_view.tsx

@@ -0,0 +1,31 @@
+/*
+ * 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, { lazy } from 'react';
+import type { Adapters } from 'src/plugins/inspector/public';
+import { i18n } from '@kbn/i18n';
+import { LazyWrapper } from '../lazy_wrapper';
+
+const getLazyComponent = () => {
+  return lazy(() => import('./map_view_component'));
+};
+
+export const MapInspectorView = {
+  title: i18n.translate('xpack.maps.inspector.mapDetailsViewTitle', {
+    defaultMessage: 'Map details',
+  }),
+  order: 30,
+  help: i18n.translate('xpack.maps.inspector.mapDetailsViewHelpText', {
+    defaultMessage: 'View the map state',
+  }),
+  shouldShow(adapters: Adapters) {
+    return Boolean(adapters.map);
+  },
+  component: (props: { adapters: Adapters }) => {
+    return <LazyWrapper getLazyComponent={getLazyComponent} lazyComponentProps={props} />;
+  },
+};

x-pack/plugins/maps/public/inspector/map_view_component.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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, { Component } from 'react';
+import type { Adapters } from 'src/plugins/inspector/public';
+import { MapDetails } from './map_details';
+import { Stats } from './types';
+
+interface Props {
+  adapters: Adapters;
+}
+
+interface State {
+  stats: Stats;
+  style: string;
+}
+
+class MapViewComponent extends Component<Props, State> {
+  state: State = this.props.adapters.map.getMapState();
+
+  _onMapChange = () => {
+    this.setState(this.props.adapters.map.getMapState());
+  };
+
+  componentDidMount() {
+    this.props.adapters.map.on('change', this._onMapChange);
+  }
+
+  componentWillUnmount() {
+    this.props.adapters.map.removeListener('change', this._onMapChange);
+  }
+
+  render() {
+    return (
+      <MapDetails
+        centerLon={this.state.stats.center[0]}
+        centerLat={this.state.stats.center[1]}
+        zoom={this.state.stats.zoom}
+        style={this.state.style}
+      />
+    );
+  }
+}
+
+// default export required for React.Lazy
+// eslint-disable-next-line import/no-default-export
+export default MapViewComponent;

x-pack/plugins/maps/public/inspector/types.ts

@@ -0,0 +1,11 @@
+/*
+ * 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.
+ */
+
+export interface Stats {
+  center: [number, number];
+  zoom: number;
+}

x-pack/plugins/maps/public/inspector/views/map_view.js

@@ -1,67 +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, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { MapDetails } from './map_details';
-import { i18n } from '@kbn/i18n';
-
-class MapViewComponent extends Component {
-  constructor(props) {
-    super(props);
-    props.adapters.map.on('change', this._onMapChange);
-
-    const { stats, style } = props.adapters.map.getMapState();
-    this.state = {
-      stats,
-      mapStyle: style,
-    };
-  }
-
-  _onMapChange = () => {
-    const { stats, style } = this.props.adapters.map.getMapState();
-    this.setState({
-      stats,
-      mapStyle: style,
-    });
-  };
-
-  componentWillUnmount() {
-    this.props.adapters.map.removeListener('change', this._onMapChange);
-  }
-
-  render() {
-    return (
-      <MapDetails
-        centerLon={this.state.stats.center[0]}
-        centerLat={this.state.stats.center[1]}
-        zoom={this.state.stats.zoom}
-        mapStyle={this.state.mapStyle}
-      />
-    );
-  }
-}
-
-MapViewComponent.propTypes = {
-  adapters: PropTypes.object.isRequired,
-};
-
-const MapView = {
-  title: i18n.translate('xpack.maps.inspector.mapDetailsViewTitle', {
-    defaultMessage: 'Map details',
-  }),
-  order: 30,
-  help: i18n.translate('xpack.maps.inspector.mapDetailsViewHelpText', {
-    defaultMessage: 'View the map state',
-  }),
-  shouldShow(adapters) {
-    return Boolean(adapters.map);
-  },
-  component: MapViewComponent,
-};
-
-export { MapView };

x-pack/plugins/maps/public/lazy_wrapper.tsx

@@ -0,0 +1,31 @@
+/*
+ * 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, { FC, Suspense } from 'react';
+import { EuiDelayRender, EuiErrorBoundary, EuiLoadingContent } from '@elastic/eui';
+
+const Fallback = () => (
+  <EuiDelayRender>
+    <EuiLoadingContent lines={3} />
+  </EuiDelayRender>
+);
+
+interface Props<T> {
+  getLazyComponent: () => FC<T>;
+  lazyComponentProps: T;
+}
+
+export function LazyWrapper<T>({ getLazyComponent, lazyComponentProps }: Props<T>) {
+  const LazyComponent = getLazyComponent();
+  return (
+    <EuiErrorBoundary>
+      <Suspense fallback={<Fallback />}>
+        <LazyComponent {...lazyComponentProps} />
+      </Suspense>
+    </EuiErrorBoundary>
+  );
+}

x-pack/plugins/maps/public/plugin.ts

@@ -20,8 +20,7 @@ import type {
   PluginInitializerContext,
 } from '../../../../src/core/public';
 import { DEFAULT_APP_CATEGORIES } from '../../../../src/core/public';
-// @ts-ignore
-import { MapView } from './inspector/views/map_view';
+import { MapInspectorView } from './inspector/map_inspector_view';
 import {
   setEMSSettings,
   setKibanaCommonConfig,
@@ -166,7 +165,7 @@ export class MapsPlugin
       })
     );
 
-    plugins.inspector.registerView(MapView);
+    plugins.inspector.registerView(MapInspectorView);
     if (plugins.home) {
       plugins.home.featureCatalogue.register(featureCatalogueEntry);
     }

x-pack/plugins/maps/public/reducers/non_serializable_instances.js

@@ -6,7 +6,7 @@
  */
 
 import { RequestAdapter } from '../../../../../src/plugins/inspector/common/adapters/request';
-import { MapAdapter } from '../inspector/adapters/map_adapter';
+import { MapAdapter } from '../inspector/map_adapter';
 import { getShowMapsInspectorAdapter } from '../kibana_services';
 
 const REGISTER_CANCEL_CALLBACK = 'REGISTER_CANCEL_CALLBACK';