[Maps] convert TooltipControl to typescript (#100059) (#100309)

* [Maps] convert ToolbarControl to typescript * fix scss import * remove unused function from APM map tooltip * apm tslint * pass loadFeatureGeometry to renderTooltipContent * security_solution: pass mbProperties to loadFeatureProperties * security_solution tslint Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
elastic · May 19, 2021 · 5cc4f99 · 5cc4f99
1 parent c85ccf9
commit 5cc4f99
Show file tree

Hide file tree

Showing 27 changed files with 320 additions and 170 deletions.
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/EmbeddedMap.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/EmbeddedMap.tsx
@@ -109,15 +109,13 @@ export function EmbeddedMapComponent() {
     isLocked,
     getLayerName,
     loadFeatureProperties,
-    loadFeatureGeometry,
   }: RenderTooltipContentParams) {
     const props = {
       addFilters,
       closeTooltip,
       isLocked,
       getLayerName,
       loadFeatureProperties,
-      loadFeatureGeometry,
     };
 
     return <MapToolTip {...props} features={features} />;

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/MapToolTip.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/VisitorBreakdownMap/MapToolTip.tsx
@@ -59,7 +59,11 @@ function MapToolTipComponent({
   useEffect(() => {
     const loadRegionInfo = async () => {
       if (loadFeatureProperties) {
-        const items = await loadFeatureProperties({ layerId, featureId });
+        const items = await loadFeatureProperties({
+          layerId,
+          featureId,
+          mbProperties: {},
+        });
         items.forEach((item) => {
           if (
             item.getPropertyKey() === COUNTRY_NAME ||

diff --git a/x-pack/plugins/maps/common/descriptor_types/map_descriptor.ts b/x-pack/plugins/maps/common/descriptor_types/map_descriptor.ts
@@ -63,7 +63,7 @@ export type TooltipState = {
   features: TooltipFeature[];
   id: string;
   isLocked: boolean;
-  location: number[]; // 0 index is lon, 1 index is lat
+  location: [number, number]; // 0 index is lon, 1 index is lat
 };
 
 export type DrawState = {

diff --git a/x-pack/plugins/maps/public/classes/tooltips/tooltip_property.ts b/x-pack/plugins/maps/public/classes/tooltips/tooltip_property.ts
@@ -6,7 +6,10 @@
  */
 
 import _ from 'lodash';
-import { Filter } from '../../../../../../src/plugins/data/public';
+import { GeoJsonProperties, Geometry } from 'geojson';
+import { Filter } from 'src/plugins/data/public';
+import { ActionExecutionContext, Action } from 'src/plugins/ui_actions/public';
+import { RawValue } from '../../../../../plugins/maps/common/constants';
 import type { TooltipFeature } from '../../../../../plugins/maps/common/descriptor_types';
 
 export interface ITooltipProperty {
@@ -29,13 +32,30 @@ export interface FeatureGeometry {
 }
 
 export interface RenderTooltipContentParams {
-  addFilters(filter: object, actionId: string): void;
-  closeTooltip(): void;
+  addFilters: ((filters: Filter[], actionId: string) => Promise<void>) | null;
+  closeTooltip: () => void;
   features: TooltipFeature[];
+  getActionContext?: () => ActionExecutionContext;
+  getFilterActions?: () => Promise<Action[]>;
+  getLayerName: (layerId: string) => Promise<string | null>;
   isLocked: boolean;
-  getLayerName(layerId: string): Promise<string>;
-  loadFeatureProperties({ layerId, featureId }: LoadFeatureProps): Promise<ITooltipProperty[]>;
-  loadFeatureGeometry({ layerId, featureId }: LoadFeatureProps): FeatureGeometry;
+  loadFeatureProperties: ({
+    layerId,
+    featureId,
+    mbProperties,
+  }: {
+    layerId: string;
+    featureId?: string | number;
+    mbProperties: GeoJsonProperties;
+  }) => Promise<ITooltipProperty[]>;
+  loadFeatureGeometry: ({
+    layerId,
+    featureId,
+  }: {
+    layerId: string;
+    featureId?: string | number;
+  }) => Geometry | null;
+  onSingleValueTrigger?: (actionId: string, key: string, value: RawValue) => void;
 }
 
 export type RenderToolTipContent = (params: RenderTooltipContentParams) => JSX.Element;

diff --git a/x-pack/plugins/maps/public/connected_components/_index.scss b/x-pack/plugins/maps/public/connected_components/_index.scss
@@ -2,5 +2,5 @@
 @import 'layer_panel/index';
 @import 'right_side_controls/index';
 @import 'toolbar_overlay/index';
-@import 'mb_map/features_tooltip/index';
+@import 'mb_map/tooltip_control/features_tooltip/index';
 @import 'mb_map/scale_control/index';
diff --git a/x-pack/plugins/maps/public/connected_components/mb_map/mb_map.tsx b/x-pack/plugins/maps/public/connected_components/mb_map/mb_map.tsx
@@ -19,7 +19,6 @@ import { Filter } from 'src/plugins/data/public';
 import { ActionExecutionContext, Action } from 'src/plugins/ui_actions/public';
 import { DrawFilterControl } from './draw_control';
 import { ScaleControl } from './scale_control';
-// @ts-expect-error
 import { TooltipControl } from './tooltip_control';
 import { clampToLatBounds, clampToLonBounds } from '../../../common/elasticsearch_util';
 import { getInitialView } from './get_initial_view';

diff --git a/..._snapshots__/tooltip_control.test.js.snap → ...snapshots__/tooltip_control.test.tsx.snap b/..._snapshots__/tooltip_control.test.js.snap → ...snapshots__/tooltip_control.test.tsx.snap
diff --git a/..._snapshots__/tooltip_popover.test.js.snap → ...snapshots__/tooltip_popover.test.tsx.snap b/..._snapshots__/tooltip_popover.test.js.snap → ...snapshots__/tooltip_popover.test.tsx.snap
diff --git a/...pshots__/feature_properties.test.tsx.snap → ...pshots__/feature_properties.test.tsx.snap b/...pshots__/feature_properties.test.tsx.snap → ...pshots__/feature_properties.test.tsx.snap
diff --git a/...ooltip/__snapshots__/footer.test.tsx.snap → ...ooltip/__snapshots__/footer.test.tsx.snap b/...ooltip/__snapshots__/footer.test.tsx.snap → ...ooltip/__snapshots__/footer.test.tsx.snap
diff --git a/...ooltip/__snapshots__/header.test.tsx.snap → ...ooltip/__snapshots__/header.test.tsx.snap b/...ooltip/__snapshots__/header.test.tsx.snap → ...ooltip/__snapshots__/header.test.tsx.snap
diff --git a/...nents/mb_map/features_tooltip/_index.scss → ...ltip_control/features_tooltip/_index.scss b/...nents/mb_map/features_tooltip/_index.scss → ...ltip_control/features_tooltip/_index.scss
diff --git a/..._tooltip/feature_geometry_filter_form.tsx → ..._tooltip/feature_geometry_filter_form.tsx b/..._tooltip/feature_geometry_filter_form.tsx → ..._tooltip/feature_geometry_filter_form.tsx
@@ -12,16 +12,16 @@ import { Filter } from 'src/plugins/data/public';
 import { ActionExecutionContext, Action } from 'src/plugins/ui_actions/public';
 import { Geometry, Polygon } from 'geojson';
 import rison, { RisonObject } from 'rison-node';
-import { URL_MAX_LENGTH } from '../../../../../../../src/core/public';
-import { ACTION_GLOBAL_APPLY_FILTER } from '../../../../../../../src/plugins/data/public';
+import { URL_MAX_LENGTH } from '../../../../../../../../src/core/public';
+import { ACTION_GLOBAL_APPLY_FILTER } from '../../../../../../../../src/plugins/data/public';
 import {
   createSpatialFilterWithGeometry,
   PreIndexedShape,
-} from '../../../../common/elasticsearch_util';
-import { ES_SPATIAL_RELATIONS, GEO_JSON_TYPE } from '../../../../common/constants';
+} from '../../../../../common/elasticsearch_util';
+import { ES_SPATIAL_RELATIONS, GEO_JSON_TYPE } from '../../../../../common/constants';
 // @ts-expect-error
-import { GeometryFilterForm } from '../../../components/geometry_filter_form';
-import { GeoFieldWithIndex } from '../../../components/geo_field_with_index';
+import { GeometryFilterForm } from '../../../../components/geometry_filter_form';
+import { GeoFieldWithIndex } from '../../../../components/geo_field_with_index';
 
 // over estimated and imprecise value to ensure filter has additional room for any meta keys added when filter is mapped.
 const META_OVERHEAD = 100;

diff --git a/...tures_tooltip/feature_properties.test.tsx → ...tures_tooltip/feature_properties.test.tsx b/...tures_tooltip/feature_properties.test.tsx → ...tures_tooltip/feature_properties.test.tsx
@@ -8,8 +8,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { FeatureProperties } from './feature_properties';
-import { ACTION_GLOBAL_APPLY_FILTER } from '../../../../../../../src/plugins/data/public';
-import { ITooltipProperty } from '../../../classes/tooltips/tooltip_property';
+import { ACTION_GLOBAL_APPLY_FILTER } from '../../../../../../../../src/plugins/data/public';
+import { ITooltipProperty } from '../../../../classes/tooltips/tooltip_property';
 import { ActionExecutionContext, Action } from 'src/plugins/ui_actions/public';
 
 class MockTooltipProperty {

diff --git a/...p/features_tooltip/feature_properties.tsx → ...l/features_tooltip/feature_properties.tsx b/...p/features_tooltip/feature_properties.tsx → ...l/features_tooltip/feature_properties.tsx
@@ -18,10 +18,10 @@ import { i18n } from '@kbn/i18n';
 import { ActionExecutionContext, Action } from 'src/plugins/ui_actions/public';
 import { GeoJsonProperties } from 'geojson';
 import { Filter } from 'src/plugins/data/public';
-import { ACTION_GLOBAL_APPLY_FILTER } from '../../../../../../../src/plugins/data/public';
-import { isUrlDrilldown } from '../../../trigger_actions/trigger_utils';
-import { RawValue } from '../../../../common/constants';
-import { ITooltipProperty } from '../../../classes/tooltips/tooltip_property';
+import { ACTION_GLOBAL_APPLY_FILTER } from '../../../../../../../../src/plugins/data/public';
+import { isUrlDrilldown } from '../../../../trigger_actions/trigger_utils';
+import { RawValue } from '../../../../../common/constants';
+import { ITooltipProperty } from '../../../../classes/tooltips/tooltip_property';
 
 interface Props {
   featureId?: string | number;

diff --git a/...map/features_tooltip/features_tooltip.tsx → ...rol/features_tooltip/features_tooltip.tsx b/...map/features_tooltip/features_tooltip.tsx → ...rol/features_tooltip/features_tooltip.tsx
@@ -9,15 +9,15 @@ import React, { Component, Fragment, ReactNode } from 'react';
 import { EuiIcon, EuiLink } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { ActionExecutionContext, Action } from 'src/plugins/ui_actions/public';
-import { GeoJsonProperties, Geometry } from 'geojson';
+import { GeoJsonProperties } from 'geojson';
 import { Filter } from 'src/plugins/data/public';
 import { FeatureProperties } from './feature_properties';
-import { RawValue } from '../../../../common/constants';
+import { RawValue } from '../../../../../common/constants';
 import { Footer } from './footer';
 import { Header } from './header';
-import { GEOMETRY_FILTER_ACTION, TooltipFeature } from '../../../../common/descriptor_types';
-import { ITooltipProperty } from '../../../classes/tooltips/tooltip_property';
-import { ILayer } from '../../../classes/layers/layer';
+import { GEOMETRY_FILTER_ACTION, TooltipFeature } from '../../../../../common/descriptor_types';
+import { ITooltipProperty } from '../../../../classes/tooltips/tooltip_property';
+import { IVectorLayer } from '../../../../classes/layers/vector_layer';
 
 const PROPERTIES_VIEW = 'PROPERTIES_VIEW';
 const FILTER_ACTIONS_VIEW = 'FILTER_ACTIONS_VIEW';
@@ -41,15 +41,8 @@ interface Props {
     featureId?: string | number;
     mbProperties: GeoJsonProperties;
   }) => Promise<ITooltipProperty[]>;
-  loadFeatureGeometry: ({
-    layerId,
-    featureId,
-  }: {
-    layerId: string;
-    featureId?: string | number;
-  }) => Geometry | null;
   getLayerName: (layerId: string) => Promise<string | null>;
-  findLayerById: (layerId: string) => ILayer | undefined;
+  findLayerById: (layerId: string) => IVectorLayer | undefined;
 }
 
 interface State {

diff --git a/...s/mb_map/features_tooltip/footer.test.tsx → ..._control/features_tooltip/footer.test.tsx b/...s/mb_map/features_tooltip/footer.test.tsx → ..._control/features_tooltip/footer.test.tsx
@@ -8,7 +8,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { Footer } from './footer';
-import { ILayer } from '../../../classes/layers/layer';
+import { IVectorLayer } from '../../../../classes/layers/vector_layer';
 
 const defaultProps = {
   isLocked: false,
@@ -20,7 +20,7 @@ const defaultProps = {
       getId() {
         return id;
       },
-    } as unknown) as ILayer;
+    } as unknown) as IVectorLayer;
   },
   setCurrentFeature: () => {},
 };

diff --git a/...onents/mb_map/features_tooltip/footer.tsx → ...oltip_control/features_tooltip/footer.tsx b/...onents/mb_map/features_tooltip/footer.tsx → ...oltip_control/features_tooltip/footer.tsx
@@ -18,16 +18,16 @@ import {
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { TooltipFeature } from '../../../../common/descriptor_types';
-import { ILayer } from '../../../classes/layers/layer';
+import { TooltipFeature } from '../../../../../common/descriptor_types';
+import { IVectorLayer } from '../../../../classes/layers/vector_layer';
 
 const ALL_LAYERS = '_ALL_LAYERS_';
 const DEFAULT_PAGE_NUMBER = 0;
 
 interface Props {
   features: TooltipFeature[];
   isLocked: boolean;
-  findLayerById: (layerId: string) => ILayer | undefined;
+  findLayerById: (layerId: string) => IVectorLayer | undefined;
   setCurrentFeature: (feature: TooltipFeature) => void;
 }
 
@@ -78,7 +78,7 @@ export class Footer extends Component<Props, State> {
       countByLayerId.set(this.props.features[i].layerId, count);
     }
 
-    const layers: ILayer[] = [];
+    const layers: IVectorLayer[] = [];
     countByLayerId.forEach((count, layerId) => {
       const layer = this.props.findLayerById(layerId);
       if (layer) {

diff --git a/...s/mb_map/features_tooltip/header.test.tsx → ..._control/features_tooltip/header.test.tsx b/...s/mb_map/features_tooltip/header.test.tsx → ..._control/features_tooltip/header.test.tsx
@@ -8,7 +8,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { Header } from './header';
-import { ILayer } from '../../../classes/layers/layer';
+import { IVectorLayer } from '../../../../classes/layers/vector_layer';
 
 const layerMock = ({
   getDisplayName: async () => {
@@ -19,7 +19,7 @@ const layerMock = ({
       icon: <span>mockIcon</span>,
     };
   },
-} as unknown) as ILayer;
+} as unknown) as IVectorLayer;
 
 const defaultProps = {
   findLayerById: (layerId: string) => {

diff --git a/...onents/mb_map/features_tooltip/header.tsx → ...oltip_control/features_tooltip/header.tsx b/...onents/mb_map/features_tooltip/header.tsx → ...oltip_control/features_tooltip/header.tsx
@@ -14,10 +14,10 @@ import {
   EuiFlexItem,
   EuiTextColor,
 } from '@elastic/eui';
-import { ILayer } from '../../../classes/layers/layer';
+import { IVectorLayer } from '../../../../classes/layers/vector_layer';
 
 interface Props {
-  findLayerById: (layerId: string) => ILayer | undefined;
+  findLayerById: (layerId: string) => IVectorLayer | undefined;
   isLocked: boolean;
   layerId: string;
   onClose: () => void;

diff --git a/...mponents/mb_map/features_tooltip/index.ts → ...tooltip_control/features_tooltip/index.ts b/...mponents/mb_map/features_tooltip/index.ts → ...tooltip_control/features_tooltip/index.ts