[Maps] convert redux store to TS phase 1 (#61704)

* [Maps] convert redux store to TS phase 1

* review feedback

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

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

@@ -5,10 +5,14 @@
  */
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
 
-import { Filter, Query } from 'src/plugins/data/public';
+import { Filter, Query, TimeRange } from 'src/plugins/data/public';
 import { AnyAction } from 'redux';
 import { LAYER_TYPE } from '../../common/constants';
 import { DataMeta, MapFilters } from '../../common/descriptor_types';
+import {
+  MapCenterAndZoom,
+  MapRefreshConfig,
+} from '../../../../../plugins/maps/common/descriptor_types';
 
 export type SyncContext = {
   startLoading(dataId: string, requestToken: symbol, meta: DataMeta): void;
@@ -27,31 +31,20 @@ export function updateSourceProp(
   newLayerType?: LAYER_TYPE
 ): void;
 
-export interface MapCenter {
-  lat: number;
-  lon: number;
-  zoom: number;
-}
-
-export function setGotoWithCenter(config: MapCenter): AnyAction;
+export function setGotoWithCenter(config: MapCenterAndZoom): AnyAction;
 
 export function replaceLayerList(layerList: unknown[]): AnyAction;
 
-export interface QueryGroup {
+export type QueryGroup = {
   filters: Filter[];
   query?: Query;
-  timeFilters: unknown;
-  refresh: unknown;
-}
+  timeFilters?: TimeRange;
+  refresh?: boolean;
+};
 
 export function setQuery(query: QueryGroup): AnyAction;
 
-export interface RefreshConfig {
-  isPaused: boolean;
-  interval: number;
-}
-
-export function setRefreshConfig(config: RefreshConfig): AnyAction;
+export function setRefreshConfig(config: MapRefreshConfig): AnyAction;
 
 export function disableScrollZoom(): AnyAction;
 

x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/index.js

@@ -7,7 +7,7 @@
 import { connect } from 'react-redux';
 import { LayerControl } from './view';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { FLYOUT_STATE } from '../../../../../../../plugins/maps/public/reducers/ui.js';
+import { FLYOUT_STATE } from '../../../../../../../plugins/maps/public/reducers/ui';
 import { updateFlyout, setIsLayerTOCOpen } from '../../../actions/ui_actions';
 import { setSelectedLayer } from '../../../actions/map_actions';
 import {

x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/layer_control/layer_toc/toc_entry/index.js

@@ -8,7 +8,7 @@ import _ from 'lodash';
 import { connect } from 'react-redux';
 import { TOCEntry } from './view';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { FLYOUT_STATE } from '../../../../../../../../../plugins/maps/public/reducers/ui.js';
+import { FLYOUT_STATE } from '../../../../../../../../../plugins/maps/public/reducers/ui';
 import { updateFlyout, hideTOCDetails, showTOCDetails } from '../../../../../actions/ui_actions';
 import { getIsReadOnly, getOpenTOCDetails } from '../../../../../selectors/ui_selectors';
 import {

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

@@ -45,8 +45,8 @@ import {
   hideLayerControl,
   hideViewControl,
   setHiddenLayers,
-  MapCenter,
 } from '../actions/map_actions';
+import { MapCenterAndZoom } from '../../../../../plugins/maps/common/descriptor_types';
 import { setReadOnly, setIsLayerTOCOpen, setOpenTOCDetails } from '../actions/ui_actions';
 import { getIsLayerTOCOpen, getOpenTOCDetails } from '../selectors/ui_selectors';
 import {
@@ -71,7 +71,6 @@ export interface MapEmbeddableInput extends EmbeddableInput {
   timeRange?: TimeRange;
   filters: Filter[];
   query?: Query;
-  refresh?: unknown;
   refreshConfig: RefreshInterval;
   isLayerTOCOpen: boolean;
   openTOCDetails?: string[];
@@ -80,7 +79,7 @@ export interface MapEmbeddableInput extends EmbeddableInput {
   hideToolbarOverlay?: boolean;
   hideLayerControl?: boolean;
   hideViewControl?: boolean;
-  mapCenter?: MapCenter;
+  mapCenter?: MapCenterAndZoom;
   hiddenLayers?: string[];
   hideFilterActions?: boolean;
 }
@@ -153,7 +152,12 @@ export class MapEmbeddable extends Embeddable<MapEmbeddableInput, MapEmbeddableO
     timeRange,
     filters,
     refresh,
-  }: Pick<MapEmbeddableInput, 'query' | 'timeRange' | 'filters' | 'refresh'>) {
+  }: {
+    query?: Query;
+    timeRange?: TimeRange;
+    filters: Filter[];
+    refresh?: boolean;
+  }) {
     this._prevTimeRange = timeRange;
     this._prevQuery = query;
     this._prevFilters = filters;

x-pack/legacy/plugins/maps/public/layers/tooltips/tooltip_property.ts

@@ -6,6 +6,7 @@
 
 import _ from 'lodash';
 import { PhraseFilter } from '../../../../../../../src/plugins/data/public';
+import { TooltipFeature } from '../../../../../../plugins/maps/common/descriptor_types';
 
 export interface ITooltipProperty {
   getPropertyKey(): string;
@@ -16,11 +17,6 @@ export interface ITooltipProperty {
   getESFilters(): Promise<PhraseFilter[]>;
 }
 
-export interface MapFeature {
-  id: number;
-  layerId: string;
-}
-
 export interface LoadFeatureProps {
   layerId: string;
   featureId: number;
@@ -34,7 +30,7 @@ export interface FeatureGeometry {
 export interface RenderTooltipContentParams {
   addFilters(filter: object): void;
   closeTooltip(): void;
-  features: MapFeature[];
+  features: TooltipFeature[];
   isLocked: boolean;
   getLayerName(layerId: string): Promise<string>;
   loadFeatureProperties({ layerId, featureId }: LoadFeatureProps): Promise<ITooltipProperty[]>;

x-pack/legacy/plugins/maps/public/layers/util/is_refresh_only_query.ts

@@ -4,13 +4,13 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Query } from '../../../common/descriptor_types';
+import { MapQuery } from '../../../common/descriptor_types';
 
 // Refresh only query is query where timestamps are different but query is the same.
 // Triggered by clicking "Refresh" button in QueryBar
 export function isRefreshOnlyQuery(
-  prevQuery: Query | undefined,
-  newQuery: Query | undefined
+  prevQuery: MapQuery | undefined,
+  newQuery: MapQuery | undefined
 ): boolean {
   if (!prevQuery || !newQuery) {
     return false;

x-pack/legacy/plugins/maps/public/selectors/map_selectors.d.ts

@@ -5,12 +5,14 @@
  */
 
 import { AnyAction } from 'redux';
-import { MapCenter } from '../actions/map_actions';
+import { MapCenter } from '../../common/descriptor_types';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { MapStoreState } from '../../../../../plugins/maps/public/reducers/store';
 
-export function getHiddenLayerIds(state: unknown): string[];
+export function getHiddenLayerIds(state: MapStoreState): string[];
 
-export function getMapZoom(state: unknown): number;
+export function getMapZoom(state: MapStoreState): number;
 
-export function getMapCenter(state: unknown): MapCenter;
+export function getMapCenter(state: MapStoreState): MapCenter;
 
-export function getQueryableUniqueIndexPatternIds(state: unknown): string[];
+export function getQueryableUniqueIndexPatternIds(state: MapStoreState): string[];

x-pack/legacy/plugins/maps/public/selectors/ui_selectors.d.ts

@@ -1,9 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-export function getOpenTOCDetails(state: unknown): string[];
-
-export function getIsLayerTOCOpen(state: unknown): boolean;

x-pack/legacy/plugins/maps/public/selectors/ui_selectors.js

@@ -1,13 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License;
- * you may not use this file except in compliance with the Elastic License.
- */
-
-export const getFlyoutDisplay = ({ ui }) => ui.flyoutDisplay;
-export const getIsSetViewOpen = ({ ui }) => ui.isSetViewOpen;
-export const getIsLayerTOCOpen = ({ ui }) => ui.isLayerTOCOpen;
-export const getOpenTOCDetails = ({ ui }) => ui.openTOCDetails;
-export const getIsFullScreen = ({ ui }) => ui.isFullScreen;
-export const getIsReadOnly = ({ ui }) => ui.isReadOnly;
-export const getIndexingStage = ({ ui }) => ui.importIndexingStage;

x-pack/legacy/plugins/maps/public/selectors/ui_selectors.ts

@@ -0,0 +1,19 @@
+/*
+ * 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.
+ */
+
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { MapStoreState } from '../../../../../plugins/maps/public/reducers/store';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { FLYOUT_STATE, INDEXING_STAGE } from '../../../../../plugins/maps/public/reducers/ui';
+
+export const getFlyoutDisplay = ({ ui }: MapStoreState): FLYOUT_STATE => ui.flyoutDisplay;
+export const getIsSetViewOpen = ({ ui }: MapStoreState): boolean => ui.isSetViewOpen;
+export const getIsLayerTOCOpen = ({ ui }: MapStoreState): boolean => ui.isLayerTOCOpen;
+export const getOpenTOCDetails = ({ ui }: MapStoreState): string[] => ui.openTOCDetails;
+export const getIsFullScreen = ({ ui }: MapStoreState): boolean => ui.isFullScreen;
+export const getIsReadOnly = ({ ui }: MapStoreState): boolean => ui.isReadOnly;
+export const getIndexingStage = ({ ui }: MapStoreState): INDEXING_STAGE | null =>
+  ui.importIndexingStage;

x-pack/plugins/maps/common/constants.ts

@@ -90,16 +90,16 @@ export const FEATURE_VISIBLE_PROPERTY_NAME = '__kbn_isvisibleduetojoin__';
 
 export const MB_SOURCE_ID_LAYER_ID_PREFIX_DELIMITER = '_';
 
-export const ES_GEO_FIELD_TYPE = {
-  GEO_POINT: 'geo_point',
-  GEO_SHAPE: 'geo_shape',
-};
+export enum ES_GEO_FIELD_TYPE {
+  GEO_POINT = 'geo_point',
+  GEO_SHAPE = 'geo_shape',
+}
 
-export const ES_SPATIAL_RELATIONS = {
-  INTERSECTS: 'INTERSECTS',
-  DISJOINT: 'DISJOINT',
-  WITHIN: 'WITHIN',
-};
+export enum ES_SPATIAL_RELATIONS {
+  INTERSECTS = 'INTERSECTS',
+  DISJOINT = 'DISJOINT',
+  WITHIN = 'WITHIN',
+}
 
 export const GEO_JSON_TYPE = {
   POINT: 'Point',
@@ -120,11 +120,11 @@ export const EMPTY_FEATURE_COLLECTION = {
   features: [],
 };
 
-export const DRAW_TYPE = {
-  BOUNDS: 'BOUNDS',
-  DISTANCE: 'DISTANCE',
-  POLYGON: 'POLYGON',
-};
+export enum DRAW_TYPE {
+  BOUNDS = 'BOUNDS',
+  DISTANCE = 'DISTANCE',
+  POLYGON = 'POLYGON',
+}
 
 export enum AGG_TYPE {
   AVG = 'avg',

x-pack/plugins/maps/common/descriptor_types/data_request_descriptor_types.d.ts

@@ -5,21 +5,14 @@
  */
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
 
-import { Query } from './map_descriptor';
-
-type Extent = {
-  maxLat: number;
-  maxLon: number;
-  minLat: number;
-  minLon: number;
-};
+import { MapExtent, MapQuery } from './map_descriptor';
 
 // Global map state passed to every layer.
 export type MapFilters = {
-  buffer: Extent; // extent with additional buffer
-  extent: Extent; // map viewport
+  buffer: MapExtent; // extent with additional buffer
+  extent: MapExtent; // map viewport
   filters: unknown[];
-  query: Query;
+  query: MapQuery;
   refreshTimerLastTriggeredAt: string;
   timeFilters: unknown;
   zoom: number;
@@ -29,14 +22,14 @@ export type VectorSourceRequestMeta = MapFilters & {
   applyGlobalQuery: boolean;
   fieldNames: string[];
   geogridPrecision: number;
-  sourceQuery: Query;
+  sourceQuery: MapQuery;
   sourceMeta: unknown;
 };
 
 export type VectorStyleRequestMeta = MapFilters & {
   dynamicStyleFields: string[];
   isTimeAware: boolean;
-  sourceQuery: Query;
+  sourceQuery: MapQuery;
   timeFilters: unknown;
 };
 

x-pack/plugins/maps/common/descriptor_types/map_descriptor.ts

@@ -3,11 +3,67 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
 
-export type Query = {
-  language: string;
-  query: string;
+import { Query } from '../../../../../src/plugins/data/public';
+import { DRAW_TYPE, ES_GEO_FIELD_TYPE, ES_SPATIAL_RELATIONS } from '../constants';
+
+export type MapExtent = {
+  maxLat: number;
+  maxLon: number;
+  minLat: number;
+  minLon: number;
+};
+
+export type MapQuery = Query & {
   queryLastTriggeredAt: string;
 };
+
+export type MapRefreshConfig = {
+  isPaused: boolean;
+  interval: number;
+};
+
+export type MapCenter = {
+  lat: number;
+  lon: number;
+};
+
+export type MapCenterAndZoom = MapCenter & {
+  zoom: number;
+};
+
+// TODO replace with map_descriptors.MapExtent. Both define the same thing but with different casing
+type MapBounds = {
+  min_lon: number;
+  max_lon: number;
+  min_lat: number;
+  max_lat: number;
+};
+
+export type Goto = {
+  bounds?: MapBounds;
+  center?: MapCenterAndZoom;
+};
+
+export type TooltipFeature = {
+  id: number;
+  layerId: string;
+};
+
+export type TooltipState = {
+  features: TooltipFeature[];
+  id: string;
+  isLocked: boolean;
+  location: number[]; // 0 index is lon, 1 index is lat
+};
+
+export type DrawState = {
+  drawType: DRAW_TYPE;
+  filterLabel?: string; // point radius filter alias
+  geoFieldName?: string;
+  geoFieldType?: ES_GEO_FIELD_TYPE;
+  geometryLabel?: string;
+  indexPatternId?: string;
+  relation?: ES_SPATIAL_RELATIONS;
+};

x-pack/plugins/maps/public/reducers/map.d.ts

@@ -0,0 +1,52 @@
+/*
+ * 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.
+ */
+/* eslint-disable @typescript-eslint/consistent-type-definitions */
+
+import {
+  DrawState,
+  Goto,
+  LayerDescriptor,
+  MapCenter,
+  MapExtent,
+  MapQuery,
+  MapRefreshConfig,
+  TooltipState,
+} from '../../common/descriptor_types';
+import { Filter, TimeRange } from '../../../../../src/plugins/data/public';
+
+export type MapContext = {
+  zoom?: number;
+  center?: MapCenter;
+  scrollZoom: boolean;
+  extent?: MapExtent;
+  mouseCoordinates?: {
+    lat: number;
+    lon: number;
+  };
+  timeFilters?: TimeRange;
+  query?: MapQuery;
+  filters: Filter[];
+  refreshConfig?: MapRefreshConfig;
+  refreshTimerLastTriggeredAt?: string;
+  drawState?: DrawState;
+  disableInteractive: boolean;
+  disableTooltipControl: boolean;
+  hideToolbarOverlay: boolean;
+  hideLayerControl: boolean;
+  hideViewControl: boolean;
+};
+
+export type MapState = {
+  ready: boolean;
+  mapInitError?: string | null;
+  goto?: Goto | null;
+  openTooltips: TooltipState[];
+  mapState: MapContext;
+  selectedLayerId: string | null;
+  __transientLayerId: string | null;
+  layerList: LayerDescriptor[];
+  waitingForMapReadyLayerList: LayerDescriptor[];
+};

x-pack/plugins/maps/public/reducers/store.d.ts

@@ -5,7 +5,14 @@
  */
 
 import { Store } from 'redux';
+import { MapState } from './map';
+import { MapUiState } from './ui';
 
-export type MapStore = Store;
+export interface MapStoreState {
+  ui: MapUiState;
+  map: MapState;
+}
+
+export type MapStore = Store<MapStoreState>;
 
 export function createMapStore(): MapStore;

x-pack/plugins/maps/public/reducers/ui.ts

@@ -3,6 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+/* eslint-disable @typescript-eslint/consistent-type-definitions */
 
 import {
   UPDATE_FLYOUT,
@@ -15,19 +16,30 @@ import {
   SHOW_TOC_DETAILS,
   HIDE_TOC_DETAILS,
   UPDATE_INDEXING_STAGE,
+  // @ts-ignore
 } from '../actions/ui_actions';
 
-export const FLYOUT_STATE = {
-  NONE: 'NONE',
-  LAYER_PANEL: 'LAYER_PANEL',
-  ADD_LAYER_WIZARD: 'ADD_LAYER_WIZARD',
-};
+export enum FLYOUT_STATE {
+  NONE = 'NONE',
+  LAYER_PANEL = 'LAYER_PANEL',
+  ADD_LAYER_WIZARD = 'ADD_LAYER_WIZARD',
+}
 
-export const INDEXING_STAGE = {
-  READY: 'READY',
-  TRIGGERED: 'TRIGGERED',
-  SUCCESS: 'SUCCESS',
-  ERROR: 'ERROR',
+export enum INDEXING_STAGE {
+  READY = 'READY',
+  TRIGGERED = 'TRIGGERED',
+  SUCCESS = 'SUCCESS',
+  ERROR = 'ERROR',
+}
+
+export type MapUiState = {
+  flyoutDisplay: FLYOUT_STATE;
+  isFullScreen: boolean;
+  isReadOnly: boolean;
+  isLayerTOCOpen: boolean;
+  isSetViewOpen: boolean;
+  openTOCDetails: string[];
+  importIndexingStage: INDEXING_STAGE | null;
 };
 
 export const DEFAULT_IS_LAYER_TOC_OPEN = true;
@@ -45,7 +57,7 @@ const INITIAL_STATE = {
 };
 
 // Reducer
-export function ui(state = INITIAL_STATE, action) {
+export function ui(state: MapUiState = INITIAL_STATE, action: any) {
   switch (action.type) {
     case UPDATE_FLYOUT:
       return { ...state, flyoutDisplay: action.display };