[Maps] convert ToolbarOverlay to TS (#95368)

* [Maps] convert ToolbarOverlay to TS

* remove getDerivedStateFromProps

* remove unused function

Co-authored-by: Kibana Machine <[email protected]>

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

@@ -14,8 +14,6 @@ import { trackMapSettings } from './map_actions';
 import { setSelectedLayer } from './layer_actions';
 
 export const UPDATE_FLYOUT = 'UPDATE_FLYOUT';
-export const CLOSE_SET_VIEW = 'CLOSE_SET_VIEW';
-export const OPEN_SET_VIEW = 'OPEN_SET_VIEW';
 export const SET_IS_LAYER_TOC_OPEN = 'SET_IS_LAYER_TOC_OPEN';
 export const SET_FULL_SCREEN = 'SET_FULL_SCREEN';
 export const SET_READ_ONLY = 'SET_READ_ONLY';
@@ -50,16 +48,6 @@ export function openMapSettings() {
     dispatch(updateFlyout(FLYOUT_STATE.MAP_SETTINGS_PANEL));
   };
 }
-export function closeSetView() {
-  return {
-    type: CLOSE_SET_VIEW,
-  };
-}
-export function openSetView() {
-  return {
-    type: OPEN_SET_VIEW,
-  };
-}
 export function setIsLayerTOCOpen(isLayerTOCOpen: boolean) {
   return {
     type: SET_IS_LAYER_TOC_OPEN,

x-pack/plugins/maps/public/classes/styles/vector/components/data_mapping/data_mapping_popover.tsx

@@ -25,9 +25,9 @@ export class DataMappingPopover extends Component<Props, State> {
   };
 
   _togglePopover = () => {
-    this.setState({
-      isPopoverOpen: !this.state.isPopoverOpen,
-    });
+    this.setState((prevState) => ({
+      isPopoverOpen: !prevState.isPopoverOpen,
+    }));
   };
 
   _closePopover = () => {

x-pack/plugins/maps/public/components/tooltip_selector/add_tooltip_field_popover.tsx

@@ -98,9 +98,9 @@ export class AddTooltipFieldPopover extends Component<Props, State> {
   }
 
   _togglePopover = () => {
-    this.setState({
-      isPopoverOpen: !this.state.isPopoverOpen,
-    });
+    this.setState((prevState) => ({
+      isPopoverOpen: !prevState.isPopoverOpen,
+    }));
   };
 
   _closePopover = () => {

x-pack/plugins/maps/public/connected_components/map_container/map_container.tsx

@@ -16,7 +16,6 @@ import { ActionExecutionContext, Action } from 'src/plugins/ui_actions/public';
 import { MBMap } from '../mb_map';
 // @ts-expect-error
 import { WidgetOverlay } from '../widget_overlay';
-// @ts-expect-error
 import { ToolbarOverlay } from '../toolbar_overlay';
 // @ts-expect-error
 import { LayerPanel } from '../layer_panel';

x-pack/plugins/maps/public/connected_components/toolbar_overlay/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
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export { ToolbarOverlay } from './toolbar_overlay';

x-pack/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/index.js → x-pack/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/index.ts

@@ -5,33 +5,27 @@
  * 2.0.
  */
 
+import { AnyAction } from 'redux';
+import { ThunkDispatch } from 'redux-thunk';
 import { connect } from 'react-redux';
 import { SetViewControl } from './set_view_control';
-import { setGotoWithCenter, closeSetView, openSetView } from '../../../actions';
+import { setGotoWithCenter } from '../../../actions';
 import { getMapZoom, getMapCenter, getMapSettings } from '../../../selectors/map_selectors';
-import { getIsSetViewOpen } from '../../../selectors/ui_selectors';
+import { MapStoreState } from '../../../reducers/store';
 
-function mapStateToProps(state = {}) {
+function mapStateToProps(state: MapStoreState) {
   return {
     settings: getMapSettings(state),
-    isSetViewOpen: getIsSetViewOpen(state),
     zoom: getMapZoom(state),
     center: getMapCenter(state),
   };
 }
 
-function mapDispatchToProps(dispatch) {
+function mapDispatchToProps(dispatch: ThunkDispatch<MapStoreState, void, AnyAction>) {
   return {
-    onSubmit: ({ lat, lon, zoom }) => {
-      dispatch(closeSetView());
+    onSubmit: ({ lat, lon, zoom }: { lat: number; lon: number; zoom: number }) => {
       dispatch(setGotoWithCenter({ lat, lon, zoom }));
     },
-    closeSetView: () => {
-      dispatch(closeSetView());
-    },
-    openSetView: () => {
-      dispatch(openSetView());
-    },
   };
 }
 

x-pack/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/set_view_control.js → x-pack/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/set_view_control.tsx

@@ -5,8 +5,7 @@
  * 2.0.
  */
 
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { ChangeEvent, Component } from 'react';
 import {
   EuiForm,
   EuiFormRow,
@@ -19,57 +18,86 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-
-function getViewString(lat, lon, zoom) {
-  return `${lat},${lon},${zoom}`;
+import { MapCenter } from '../../../../common/descriptor_types';
+import { MapSettings } from '../../../reducers/map';
+
+export interface Props {
+  settings: MapSettings;
+  zoom: number;
+  center: MapCenter;
+  onSubmit: ({ lat, lon, zoom }: { lat: number; lon: number; zoom: number }) => void;
 }
 
-export class SetViewControl extends Component {
-  state = {};
-
-  static getDerivedStateFromProps(nextProps, prevState) {
-    const nextView = getViewString(nextProps.center.lat, nextProps.center.lon, nextProps.zoom);
-    if (nextView !== prevState.prevView) {
-      return {
-        lat: nextProps.center.lat,
-        lon: nextProps.center.lon,
-        zoom: nextProps.zoom,
-        prevView: nextView,
-      };
-    }
+interface State {
+  isPopoverOpen: boolean;
+  lat: number | string;
+  lon: number | string;
+  zoom: number | string;
+}
 
-    return null;
-  }
+export class SetViewControl extends Component<Props, State> {
+  state: State = {
+    isPopoverOpen: false,
+    lat: 0,
+    lon: 0,
+    zoom: 0,
+  };
 
   _togglePopover = () => {
-    if (this.props.isSetViewOpen) {
-      this.props.closeSetView();
+    if (this.state.isPopoverOpen) {
+      this._closePopover();
       return;
     }
 
-    this.props.openSetView();
+    this.setState({
+      lat: this.props.center.lat,
+      lon: this.props.center.lon,
+      zoom: this.props.zoom,
+      isPopoverOpen: true,
+    });
+  };
+
+  _closePopover = () => {
+    this.setState({
+      isPopoverOpen: false,
+    });
   };
 
-  _onLatChange = (evt) => {
+  _onLatChange = (evt: ChangeEvent<HTMLInputElement>) => {
     this._onChange('lat', evt);
   };
 
-  _onLonChange = (evt) => {
+  _onLonChange = (evt: ChangeEvent<HTMLInputElement>) => {
     this._onChange('lon', evt);
   };
 
-  _onZoomChange = (evt) => {
+  _onZoomChange = (evt: ChangeEvent<HTMLInputElement>) => {
     this._onChange('zoom', evt);
   };
 
-  _onChange = (name, evt) => {
+  _onChange = (name: 'lat' | 'lon' | 'zoom', evt: ChangeEvent<HTMLInputElement>) => {
     const sanitizedValue = parseFloat(evt.target.value);
+    // @ts-expect-error
     this.setState({
       [name]: isNaN(sanitizedValue) ? '' : sanitizedValue,
     });
   };
 
-  _renderNumberFormRow = ({ value, min, max, onChange, label, dataTestSubj }) => {
+  _renderNumberFormRow = ({
+    value,
+    min,
+    max,
+    onChange,
+    label,
+    dataTestSubj,
+  }: {
+    value: string | number;
+    min: number;
+    max: number;
+    onChange: (evt: ChangeEvent<HTMLInputElement>) => void;
+    label: string;
+    dataTestSubj: string;
+  }) => {
     const isInvalid = value === '' || value > max || value < min;
     const error = isInvalid ? `Must be between ${min} and ${max}` : null;
     return {
@@ -90,7 +118,8 @@ export class SetViewControl extends Component {
 
   _onSubmit = () => {
     const { lat, lon, zoom } = this.state;
-    this.props.onSubmit({ lat, lon, zoom });
+    this._closePopover();
+    this.props.onSubmit({ lat: lat as number, lon: lon as number, zoom: zoom as number });
   };
 
   _renderSetViewForm() {
@@ -175,23 +204,11 @@ export class SetViewControl extends Component {
             })}
           />
         }
-        isOpen={this.props.isSetViewOpen}
-        closePopover={this.props.closeSetView}
+        isOpen={this.state.isPopoverOpen}
+        closePopover={this._closePopover}
       >
         {this._renderSetViewForm()}
       </EuiPopover>
     );
   }
 }
-
-SetViewControl.propTypes = {
-  isSetViewOpen: PropTypes.bool.isRequired,
-  zoom: PropTypes.number.isRequired,
-  center: PropTypes.shape({
-    lat: PropTypes.number.isRequired,
-    lon: PropTypes.number.isRequired,
-  }),
-  onSubmit: PropTypes.func.isRequired,
-  closeSetView: PropTypes.func.isRequired,
-  openSetView: PropTypes.func.isRequired,
-};

x-pack/plugins/maps/public/connected_components/toolbar_overlay/toolbar_overlay.test.tsx

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
+import { Filter } from 'src/plugins/data/public';
 
 jest.mock('../../kibana_services', () => {
   return {
@@ -16,15 +17,25 @@ jest.mock('../../kibana_services', () => {
   };
 });
 
-// @ts-ignore
 import { ToolbarOverlay } from './toolbar_overlay';
 
 test('Must render zoom tools', async () => {
-  const component = shallow(<ToolbarOverlay />);
+  const component = shallow(<ToolbarOverlay geoFields={[]} />);
   expect(component).toMatchSnapshot();
 });
 
 test('Must zoom tools and draw filter tools', async () => {
-  const component = shallow(<ToolbarOverlay addFilters={() => {}} geoFields={['coordinates']} />);
+  const geoFieldWithIndex = {
+    geoFieldName: 'myGeoFieldName',
+    geoFieldType: 'geo_point',
+    indexPatternTitle: 'myIndex',
+    indexPatternId: '1',
+  };
+  const component = shallow(
+    <ToolbarOverlay
+      addFilters={async (filters: Filter[], actionId: string) => {}}
+      geoFields={[geoFieldWithIndex]}
+    />
+  );
   expect(component).toMatchSnapshot();
 });