Typescript map embeddable (#61264) (#61530)

* typescript map embeddable

* Address code review comments and update some usages in SIEM and uptime to the new types

* More clean up - carry over some of the SIEM types to maps for render tool tip

* Address more review comments

x-pack/legacy/plugins/canvas/canvas_plugin_src/expression_types/embeddable_types.ts

@@ -4,8 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-// @ts-ignore
-import { MAP_SAVED_OBJECT_TYPE } from '../../../maps/common/constants';
+import { MAP_SAVED_OBJECT_TYPE } from '../../../../../plugins/maps/public';
 import { VISUALIZE_EMBEDDABLE_TYPE } from '../../../../../../src/legacy/core_plugins/visualizations/public';
 import { LENS_EMBEDDABLE_TYPE } from '../../../../../plugins/lens/common/constants';
 import { SEARCH_EMBEDDABLE_TYPE } from '../../../../../../src/legacy/core_plugins/kibana/public/discover/np_ready/embeddable/constants';

x-pack/legacy/plugins/maps/public/actions/map_actions.d.ts

@@ -5,6 +5,8 @@
  */
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
 
+import { Filter, Query } from 'src/plugins/data/public';
+import { AnyAction } from 'redux';
 import { LAYER_TYPE } from '../../common/constants';
 import { DataMeta, MapFilters } from '../../common/descriptor_types';
 
@@ -24,3 +26,45 @@ export function updateSourceProp(
  value: unknown,
  newLayerType?: LAYER_TYPE
 ): void;
+
+export interface MapCenter {
+ lat: number;
+ lon: number;
+ zoom: number;
+}
+
+export function setGotoWithCenter(config: MapCenter): AnyAction;
+
+export function replaceLayerList(layerList: unknown[]): AnyAction;
+
+export interface QueryGroup {
+ filters: Filter[];
+ query?: Query;
+ timeFilters: unknown;
+ refresh: unknown;
+}
+
+export function setQuery(query: QueryGroup): AnyAction;
+
+export interface RefreshConfig {
+ isPaused: boolean;
+ interval: number;
+}
+
+export function setRefreshConfig(config: RefreshConfig): AnyAction;
+
+export function disableScrollZoom(): AnyAction;
+
+export function disableInteractive(): AnyAction;
+
+export function disableTooltipControl(): AnyAction;
+
+export function hideToolbarOverlay(): AnyAction;
+
+export function hideLayerControl(): AnyAction;
+
+export function hideViewControl(): AnyAction;
+
+export function setHiddenLayers(hiddenLayerIds: string[]): AnyAction;
+
+export function addLayerWithoutDataSync(layerDescriptor: unknown): AnyAction;

x-pack/legacy/plugins/maps/public/actions/ui_actions.d.ts

@@ -0,0 +1,13 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { AnyAction } from 'redux';
+
+export function setOpenTOCDetails(layerIds?: string[]): AnyAction;
+
+export function setIsLayerTOCOpen(open: boolean): AnyAction;
+
+export function setReadOnly(readOnly: boolean): AnyAction;

x-pack/legacy/plugins/maps/public/angular/get_initial_layers.d.ts

@@ -0,0 +1,7 @@
+/*
+ * 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 function getInitialLayers(layerListJSON?: string, initialLayers?: unknown[]): unknown[];

x-pack/legacy/plugins/maps/public/connected_components/gis_map/index.d.ts

@@ -0,0 +1,14 @@
+/*
+ * 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 { Filter } from 'src/plugins/data/public';
+import { RenderToolTipContent } from '../../layers/tooltips/tooltip_property';
+
+export const GisMap: React.ComponentType<{
+ addFilters: ((filters: Filter[]) => void) | null;
+ renderTooltipContent?: RenderToolTipContent;
+}>;

x-pack/legacy/plugins/maps/public/embeddable/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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 * from './map_embeddable';
+export * from './map_embeddable_factory';

x-pack/legacy/plugins/maps/public/embeddable/map_embeddable.js → x-pack/legacy/plugins/maps/public/embeddable/map_embeddable.tsx

@@ -10,16 +10,29 @@ import { Provider } from 'react-redux';
 import { render, unmountComponentAtNode } from 'react-dom';
 import 'mapbox-gl/dist/mapbox-gl.css';
 
-import { Embeddable } from '../../../../../../src/legacy/core_plugins/embeddable_api/public/np_ready/public';
-import { APPLY_FILTER_TRIGGER } from '../../../../../../src/plugins/ui_actions/public';
-import { esFilters } from '../../../../../../src/plugins/data/public';
-
 import { I18nContext } from 'ui/i18n';
+import { npStart } from 'ui/new_platform';
+import { Subscription } from 'rxjs';
+import { Unsubscribe } from 'redux';
+import {
+ Embeddable,
+ IContainer,
+ EmbeddableInput,
+ EmbeddableOutput,
+} from '../../../../../../src/plugins/embeddable/public';
+import { APPLY_FILTER_TRIGGER } from '../../../../../../src/plugins/ui_actions/public';
+import {
+ esFilters,
+ IIndexPattern,
+ TimeRange,
+ Filter,
+ Query,
+ RefreshInterval,
+} from '../../../../../../src/plugins/data/public';
 
 import { GisMap } from '../connected_components/gis_map';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { createMapStore } from '../../../../../plugins/maps/public/reducers/store';
-import { npStart } from 'ui/new_platform';
+import { createMapStore, MapStore } from '../../../../../plugins/maps/public/reducers/store';
 import {
  setGotoWithCenter,
  replaceLayerList,
@@ -32,21 +45,72 @@ import {
  hideLayerControl,
  hideViewControl,
  setHiddenLayers,
+ MapCenter,
 } from '../actions/map_actions';
 import { setReadOnly, setIsLayerTOCOpen, setOpenTOCDetails } from '../actions/ui_actions';
 import { getIsLayerTOCOpen, getOpenTOCDetails } from '../selectors/ui_selectors';
 import {
  getInspectorAdapters,
  setEventHandlers,
+ EventHandlers,
  // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 } from '../../../../../plugins/maps/public/reducers/non_serializable_instances';
 import { getMapCenter, getMapZoom, getHiddenLayerIds } from '../selectors/map_selectors';
 import { MAP_SAVED_OBJECT_TYPE } from '../../common/constants';
+import { RenderToolTipContent } from '../layers/tooltips/tooltip_property';
+
+interface MapEmbeddableConfig {
+ editUrl?: string;
+ indexPatterns: IIndexPattern[];
+ editable: boolean;
+ title?: string;
+ layerList: unknown[];
+}
+
+export interface MapEmbeddableInput extends EmbeddableInput {
+ timeRange?: TimeRange;
+ filters: Filter[];
+ query?: Query;
+ refresh?: unknown;
+ refreshConfig: RefreshInterval;
+ isLayerTOCOpen: boolean;
+ openTOCDetails?: string[];
+ disableTooltipControl?: boolean;
+ disableInteractive?: boolean;
+ hideToolbarOverlay?: boolean;
+ hideLayerControl?: boolean;
+ hideViewControl?: boolean;
+ mapCenter?: MapCenter;
+ hiddenLayers?: string[];
+ hideFilterActions?: boolean;
+}
 
-export class MapEmbeddable extends Embeddable {
+export interface MapEmbeddableOutput extends EmbeddableOutput {
+ indexPatterns: IIndexPattern[];
+}
+
+export class MapEmbeddable extends Embeddable<MapEmbeddableInput, MapEmbeddableOutput> {
  type = MAP_SAVED_OBJECT_TYPE;
 
- constructor(config, initialInput, parent, renderTooltipContent, eventHandlers) {
+ private _renderTooltipContent?: RenderToolTipContent;
+ private _eventHandlers?: EventHandlers;
+ private _layerList: unknown[];
+ private _store: MapStore;
+ private _subscription: Subscription;
+ private _prevTimeRange?: TimeRange;
+ private _prevQuery?: Query;
+ private _prevRefreshConfig?: RefreshInterval;
+ private _prevFilters?: Filter[];
+ private _domNode?: HTMLElement;
+ private _unsubscribeFromStore?: Unsubscribe;
+
+ constructor(
+ config: MapEmbeddableConfig,
+ initialInput: MapEmbeddableInput,
+ parent?: IContainer,
+ renderTooltipContent?: RenderToolTipContent,
+ eventHandlers?: EventHandlers
+ ) {
  super(
  initialInput,
  {
@@ -70,7 +134,7 @@ export class MapEmbeddable extends Embeddable {
  return getInspectorAdapters(this._store.getState());
  }
 
- onContainerStateChanged(containerState) {
+ onContainerStateChanged(containerState: MapEmbeddableInput) {
  if (
  !_.isEqual(containerState.timeRange, this._prevTimeRange) ||
  !_.isEqual(containerState.query, this._prevQuery) ||
@@ -84,7 +148,12 @@ export class MapEmbeddable extends Embeddable {
  }
  }
 
- _dispatchSetQuery({ query, timeRange, filters, refresh }) {
+ _dispatchSetQuery({
+ query,
+ timeRange,
+ filters,
+ refresh,
+ }: Pick<MapEmbeddableInput, 'query' | 'timeRange' | 'filters' | 'refresh'>) {
  this._prevTimeRange = timeRange;
  this._prevQuery = query;
  this._prevFilters = filters;
@@ -98,7 +167,7 @@ export class MapEmbeddable extends Embeddable {
  );
  }
 
- _dispatchSetRefreshConfig({ refreshConfig }) {
+ _dispatchSetRefreshConfig({ refreshConfig }: Pick<MapEmbeddableInput, 'refreshConfig'>) {
  this._prevRefreshConfig = refreshConfig;
  this._store.dispatch(
  setRefreshConfig({
@@ -113,7 +182,7 @@ export class MapEmbeddable extends Embeddable {
  * @param {HTMLElement} domNode
  * @param {ContainerState} containerState
  */
- render(domNode) {
+ render(domNode: HTMLElement) {
  this._store.dispatch(setEventHandlers(this._eventHandlers));
  this._store.dispatch(setReadOnly(true));
  this._store.dispatch(disableScrollZoom());
@@ -127,23 +196,22 @@ export class MapEmbeddable extends Embeddable {
  }
 
  if (_.has(this.input, 'disableInteractive') && this.input.disableInteractive) {
- this._store.dispatch(disableInteractive(this.input.disableInteractive));
+ this._store.dispatch(disableInteractive());
  }
 
  if (_.has(this.input, 'disableTooltipControl') && this.input.disableTooltipControl) {
- this._store.dispatch(disableTooltipControl(this.input.disableTooltipControl));
+ this._store.dispatch(disableTooltipControl());
  }
-
  if (_.has(this.input, 'hideToolbarOverlay') && this.input.hideToolbarOverlay) {
- this._store.dispatch(hideToolbarOverlay(this.input.hideToolbarOverlay));
+ this._store.dispatch(hideToolbarOverlay());
  }
 
  if (_.has(this.input, 'hideLayerControl') && this.input.hideLayerControl) {
- this._store.dispatch(hideLayerControl(this.input.hideLayerControl));
+ this._store.dispatch(hideLayerControl());
  }
 
  if (_.has(this.input, 'hideViewControl') && this.input.hideViewControl) {
- this._store.dispatch(hideViewControl(this.input.hideViewControl));
+ this._store.dispatch(hideViewControl());
  }
 
  if (this.input.mapCenter) {
@@ -182,12 +250,12 @@ export class MapEmbeddable extends Embeddable {
  });
  }
 
- async setLayerList(layerList) {
+ async setLayerList(layerList: unknown[]) {
  this._layerList = layerList;
  return await this._store.dispatch(replaceLayerList(this._layerList));
  }
 
- addFilters = filters => {
+ addFilters = (filters: Filter[]) => {
  npStart.plugins.uiActions.executeTriggerActions(APPLY_FILTER_TRIGGER, {
  embeddable: this,
  filters,
@@ -213,7 +281,7 @@ export class MapEmbeddable extends Embeddable {
  this._dispatchSetQuery({
  query: this._prevQuery,
  timeRange: this._prevTimeRange,
- filters: this._prevFilters,
+ filters: this._prevFilters ?? [],
  refresh: true,
  });
  }
@@ -222,7 +290,7 @@ export class MapEmbeddable extends Embeddable {
  const center = getMapCenter(this._store.getState());
  const zoom = getMapZoom(this._store.getState());
 
- const mapCenter = this.input.mapCenter || {};
+ const mapCenter = this.input.mapCenter || undefined;
  if (
  !mapCenter ||
  mapCenter.lat !== center.lat ||
@@ -233,7 +301,7 @@ export class MapEmbeddable extends Embeddable {
  mapCenter: {
  lat: center.lat,
  lon: center.lon,
- zoom: zoom,
+ zoom,
  },
  });
  }