[maps] convert VectorStyleEditor to TS (elastic#83582)

Co-authored-by: Kibana Machine <[email protected]>
nreese · Nov 19, 2020 · 435e228 · 435e228
1 parent c9f626c
commit 435e228
Show file tree

Hide file tree

Showing 23 changed files with 297 additions and 197 deletions.
diff --git a/x-pack/plugins/maps/common/descriptor_types/style_property_descriptor_types.ts b/x-pack/plugins/maps/common/descriptor_types/style_property_descriptor_types.ts
@@ -174,18 +174,18 @@ export type SizeStylePropertyDescriptor =
     };
 
 export type VectorStylePropertiesDescriptor = {
-  [VECTOR_STYLES.SYMBOLIZE_AS]?: SymbolizeAsStylePropertyDescriptor;
-  [VECTOR_STYLES.FILL_COLOR]?: ColorStylePropertyDescriptor;
-  [VECTOR_STYLES.LINE_COLOR]?: ColorStylePropertyDescriptor;
-  [VECTOR_STYLES.LINE_WIDTH]?: SizeStylePropertyDescriptor;
-  [VECTOR_STYLES.ICON]?: IconStylePropertyDescriptor;
-  [VECTOR_STYLES.ICON_SIZE]?: SizeStylePropertyDescriptor;
-  [VECTOR_STYLES.ICON_ORIENTATION]?: OrientationStylePropertyDescriptor;
-  [VECTOR_STYLES.LABEL_TEXT]?: LabelStylePropertyDescriptor;
-  [VECTOR_STYLES.LABEL_COLOR]?: ColorStylePropertyDescriptor;
-  [VECTOR_STYLES.LABEL_SIZE]?: SizeStylePropertyDescriptor;
-  [VECTOR_STYLES.LABEL_BORDER_COLOR]?: ColorStylePropertyDescriptor;
-  [VECTOR_STYLES.LABEL_BORDER_SIZE]?: LabelBorderSizeStylePropertyDescriptor;
+  [VECTOR_STYLES.SYMBOLIZE_AS]: SymbolizeAsStylePropertyDescriptor;
+  [VECTOR_STYLES.FILL_COLOR]: ColorStylePropertyDescriptor;
+  [VECTOR_STYLES.LINE_COLOR]: ColorStylePropertyDescriptor;
+  [VECTOR_STYLES.LINE_WIDTH]: SizeStylePropertyDescriptor;
+  [VECTOR_STYLES.ICON]: IconStylePropertyDescriptor;
+  [VECTOR_STYLES.ICON_SIZE]: SizeStylePropertyDescriptor;
+  [VECTOR_STYLES.ICON_ORIENTATION]: OrientationStylePropertyDescriptor;
+  [VECTOR_STYLES.LABEL_TEXT]: LabelStylePropertyDescriptor;
+  [VECTOR_STYLES.LABEL_COLOR]: ColorStylePropertyDescriptor;
+  [VECTOR_STYLES.LABEL_SIZE]: SizeStylePropertyDescriptor;
+  [VECTOR_STYLES.LABEL_BORDER_COLOR]: ColorStylePropertyDescriptor;
+  [VECTOR_STYLES.LABEL_BORDER_SIZE]: LabelBorderSizeStylePropertyDescriptor;
 };
 
 export type StyleDescriptor = {

diff --git a/x-pack/plugins/maps/public/classes/layers/blended_vector_layer/blended_vector_layer.ts b/x-pack/plugins/maps/public/classes/layers/blended_vector_layer/blended_vector_layer.ts
@@ -36,6 +36,7 @@ import {
   LayerDescriptor,
   VectorLayerDescriptor,
   VectorSourceRequestMeta,
+  VectorStylePropertiesDescriptor,
 } from '../../../../common/descriptor_types';
 import { IVectorSource } from '../../sources/vector_source';
 import { LICENSED_FEATURES } from '../../../licensed_features';
@@ -79,13 +80,15 @@ function getClusterStyleDescriptor(
   clusterSource: ESGeoGridSource
 ): VectorStyleDescriptor {
   const defaultDynamicProperties = getDefaultDynamicProperties();
-  const clusterStyleDescriptor: VectorStyleDescriptor = {
+  const clusterStyleDescriptor: Omit<VectorStyleDescriptor, 'properties'> & {
+    properties: Partial<VectorStylePropertiesDescriptor>;
+  } = {
     type: LAYER_STYLE_TYPE.VECTOR,
     properties: {
       [VECTOR_STYLES.LABEL_TEXT]: {
         type: STYLE_TYPE.DYNAMIC,
         options: {
-          ...defaultDynamicProperties[VECTOR_STYLES.LABEL_TEXT]!.options,
+          ...defaultDynamicProperties[VECTOR_STYLES.LABEL_TEXT].options,
           field: {
             name: COUNT_PROP_NAME,
             origin: FIELD_ORIGIN.SOURCE,
@@ -95,7 +98,7 @@ function getClusterStyleDescriptor(
       [VECTOR_STYLES.ICON_SIZE]: {
         type: STYLE_TYPE.DYNAMIC,
         options: {
-          ...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE]!.options as SizeDynamicOptions),
+          ...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE].options as SizeDynamicOptions),
           field: {
             name: COUNT_PROP_NAME,
             origin: FIELD_ORIGIN.SOURCE,
@@ -157,7 +160,7 @@ function getClusterStyleDescriptor(
       }
     });
 
-  return clusterStyleDescriptor;
+  return clusterStyleDescriptor as VectorStyleDescriptor;
 }
 
 export interface BlendedVectorLayerArguments {

diff --git a/.../maps/public/classes/layers/choropleth_layer_wizard/create_choropleth_layer_descriptor.ts b/.../maps/public/classes/layers/choropleth_layer_wizard/create_choropleth_layer_descriptor.ts
@@ -71,7 +71,7 @@ function createChoroplethLayerDescriptor({
       [VECTOR_STYLES.FILL_COLOR]: {
         type: STYLE_TYPE.DYNAMIC,
         options: {
-          ...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR]!.options as ColorDynamicOptions),
+          ...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR].options as ColorDynamicOptions),
           field: {
             name: joinKey,
             origin: FIELD_ORIGIN.JOIN,

diff --git a/x-pack/plugins/maps/public/classes/layers/create_region_map_layer_descriptor.ts b/x-pack/plugins/maps/public/classes/layers/create_region_map_layer_descriptor.ts
@@ -100,15 +100,15 @@ export function createRegionMapLayerDescriptor({
       [VECTOR_STYLES.FILL_COLOR]: {
         type: STYLE_TYPE.DYNAMIC,
         options: {
-          ...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR]!.options as ColorDynamicOptions),
+          ...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR].options as ColorDynamicOptions),
           field: {
             name: joinKey,
             origin: FIELD_ORIGIN.JOIN,
           },
           color: colorPallette ? colorPallette.value : 'Yellow to Red',
           type: COLOR_MAP_TYPE.ORDINAL,
           fieldMetaOptions: {
-            ...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR]!.options as ColorDynamicOptions)
+            ...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR].options as ColorDynamicOptions)
               .fieldMetaOptions,
             isEnabled: false,
           },

diff --git a/x-pack/plugins/maps/public/classes/layers/create_tile_map_layer_descriptor.ts b/x-pack/plugins/maps/public/classes/layers/create_tile_map_layer_descriptor.ts
@@ -113,16 +113,16 @@ export function createTileMapLayerDescriptor({
   const colorPallette = NUMERICAL_COLOR_PALETTES.find((pallette) => {
     return pallette.value.toLowerCase() === colorSchema.toLowerCase();
   });
-  const styleProperties: VectorStylePropertiesDescriptor = {
+  const styleProperties: Partial<VectorStylePropertiesDescriptor> = {
     [VECTOR_STYLES.FILL_COLOR]: {
       type: STYLE_TYPE.DYNAMIC,
       options: {
-        ...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR]!.options as ColorDynamicOptions),
+        ...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR].options as ColorDynamicOptions),
         field: metricStyleField,
         color: colorPallette ? colorPallette.value : 'Yellow to Red',
         type: COLOR_MAP_TYPE.ORDINAL,
         fieldMetaOptions: {
-          ...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR]!.options as ColorDynamicOptions)
+          ...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR].options as ColorDynamicOptions)
             .fieldMetaOptions,
           isEnabled: false,
         },
@@ -139,11 +139,11 @@ export function createTileMapLayerDescriptor({
     styleProperties[VECTOR_STYLES.ICON_SIZE] = {
       type: STYLE_TYPE.DYNAMIC,
       options: {
-        ...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE]!.options as SizeDynamicOptions),
+        ...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE].options as SizeDynamicOptions),
         maxSize: 18,
         field: metricStyleField,
         fieldMetaOptions: {
-          ...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE]!.options as SizeDynamicOptions)
+          ...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE].options as SizeDynamicOptions)
             .fieldMetaOptions,
           isEnabled: false,
         },

diff --git a/x-pack/plugins/maps/public/classes/layers/layer.tsx b/x-pack/plugins/maps/public/classes/layers/layer.tsx
@@ -76,11 +76,9 @@ export interface ILayer {
   getType(): string | undefined;
   isVisible(): boolean;
   cloneDescriptor(): Promise<LayerDescriptor>;
-  renderStyleEditor({
-    onStyleDescriptorChange,
-  }: {
-    onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void;
-  }): ReactElement<any> | null;
+  renderStyleEditor(
+    onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void
+  ): ReactElement<any> | null;
   getInFlightRequestTokens(): symbol[];
   getPrevRequestToken(dataId: string): symbol | undefined;
   destroy: () => void;
@@ -437,16 +435,14 @@ export class AbstractLayer implements ILayer {
     return null;
   }
 
-  renderStyleEditor({
-    onStyleDescriptorChange,
-  }: {
-    onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void;
-  }): ReactElement<any> | null {
+  renderStyleEditor(
+    onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void
+  ): ReactElement<any> | null {
     const style = this.getStyleForEditing();
     if (!style) {
       return null;
     }
-    return style.renderEditor({ layer: this, onStyleDescriptorChange });
+    return style.renderEditor(onStyleDescriptorChange);
   }
 
   getIndexPatternIds(): string[] {

diff --git a/...ugins/maps/public/classes/layers/solution_layers/observability/create_layer_descriptor.ts b/...ugins/maps/public/classes/layers/solution_layers/observability/create_layer_descriptor.ts
@@ -50,7 +50,7 @@ function createDynamicFillColorDescriptor(
   return {
     type: STYLE_TYPE.DYNAMIC,
     options: {
-      ...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR]!.options as ColorDynamicOptions),
+      ...(defaultDynamicProperties[VECTOR_STYLES.FILL_COLOR].options as ColorDynamicOptions),
       field,
       color:
         layer === OBSERVABILITY_LAYER_TYPE.APM_RUM_PERFORMANCE ? 'Green to Red' : 'Yellow to Red',
@@ -226,12 +226,12 @@ export function createLayerDescriptor({
     origin: FIELD_ORIGIN.SOURCE,
   };
 
-  const styleProperties: VectorStylePropertiesDescriptor = {
+  const styleProperties: Partial<VectorStylePropertiesDescriptor> = {
     [VECTOR_STYLES.FILL_COLOR]: createDynamicFillColorDescriptor(layer, metricStyleField),
     [VECTOR_STYLES.ICON_SIZE]: {
       type: STYLE_TYPE.DYNAMIC,
       options: {
-        ...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE]!.options as SizeDynamicOptions),
+        ...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE].options as SizeDynamicOptions),
         field: metricStyleField,
       },
     },

diff --git a/...k/plugins/maps/public/classes/layers/solution_layers/security/create_layer_descriptors.ts b/...k/plugins/maps/public/classes/layers/solution_layers/security/create_layer_descriptors.ts
@@ -68,7 +68,7 @@ function createSourceLayerDescriptor(indexPatternId: string, indexPatternTitle:
         ],
   });
 
-  const styleProperties: VectorStylePropertiesDescriptor = {
+  const styleProperties: Partial<VectorStylePropertiesDescriptor> = {
     [VECTOR_STYLES.FILL_COLOR]: {
       type: STYLE_TYPE.STATIC,
       options: { color: euiVisColorPalette[1] },
@@ -121,7 +121,7 @@ function createDestinationLayerDescriptor(indexPatternId: string, indexPatternTi
         ],
   });
 
-  const styleProperties: VectorStylePropertiesDescriptor = {
+  const styleProperties: Partial<VectorStylePropertiesDescriptor> = {
     [VECTOR_STYLES.FILL_COLOR]: {
       type: STYLE_TYPE.STATIC,
       options: { color: euiVisColorPalette[2] },
@@ -168,15 +168,15 @@ function createLineLayerDescriptor(indexPatternId: string, indexPatternTitle: st
     ],
   });
 
-  const styleProperties: VectorStylePropertiesDescriptor = {
+  const styleProperties: Partial<VectorStylePropertiesDescriptor> = {
     [VECTOR_STYLES.LINE_COLOR]: {
       type: STYLE_TYPE.STATIC,
       options: { color: euiVisColorPalette[1] },
     },
     [VECTOR_STYLES.LINE_WIDTH]: {
       type: STYLE_TYPE.DYNAMIC,
       options: {
-        ...(defaultDynamicProperties[VECTOR_STYLES.LINE_WIDTH]!.options as SizeDynamicOptions),
+        ...(defaultDynamicProperties[VECTOR_STYLES.LINE_WIDTH].options as SizeDynamicOptions),
         field: {
           name: COUNT_PROP_NAME,
           origin: FIELD_ORIGIN.SOURCE,

diff --git a/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx b/x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx
@@ -77,7 +77,7 @@ export const clustersLayerWizardConfig: LayerWizard = {
           [VECTOR_STYLES.ICON_SIZE]: {
             type: STYLE_TYPE.DYNAMIC,
             options: {
-              ...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE]!.options as SizeDynamicOptions),
+              ...(defaultDynamicProperties[VECTOR_STYLES.ICON_SIZE].options as SizeDynamicOptions),
               field: {
                 name: COUNT_PROP_NAME,
                 origin: FIELD_ORIGIN.SOURCE,
@@ -87,7 +87,7 @@ export const clustersLayerWizardConfig: LayerWizard = {
           [VECTOR_STYLES.LABEL_TEXT]: {
             type: STYLE_TYPE.DYNAMIC,
             options: {
-              ...defaultDynamicProperties[VECTOR_STYLES.LABEL_TEXT]!.options,
+              ...defaultDynamicProperties[VECTOR_STYLES.LABEL_TEXT].options,
               field: {
                 name: COUNT_PROP_NAME,
                 origin: FIELD_ORIGIN.SOURCE,

diff --git a/x-pack/plugins/maps/public/classes/styles/heatmap/heatmap_style.tsx b/x-pack/plugins/maps/public/classes/styles/heatmap/heatmap_style.tsx
@@ -41,11 +41,7 @@ export class HeatmapStyle implements IStyle {
     return LAYER_STYLE_TYPE.HEATMAP;
   }
 
-  renderEditor({
-    onStyleDescriptorChange,
-  }: {
-    onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void;
-  }) {
+  renderEditor(onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void) {
     const onHeatmapColorChange = ({ colorRampName }: { colorRampName: string }) => {
       const styleDescriptor = HeatmapStyle.createDescriptor(colorRampName);
       onStyleDescriptorChange(styleDescriptor);

diff --git a/x-pack/plugins/maps/public/classes/styles/style.ts b/x-pack/plugins/maps/public/classes/styles/style.ts
@@ -6,15 +6,10 @@
 
 import { ReactElement } from 'react';
 import { StyleDescriptor } from '../../../common/descriptor_types';
-import { ILayer } from '../layers/layer';
 
 export interface IStyle {
   getType(): string;
-  renderEditor({
-    layer,
-    onStyleDescriptorChange,
-  }: {
-    layer: ILayer;
-    onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void;
-  }): ReactElement<any> | null;
+  renderEditor(
+    onStyleDescriptorChange: (styleDescriptor: StyleDescriptor) => void
+  ): ReactElement<any> | null;
 }
diff --git a/x-pack/plugins/maps/public/classes/styles/tile/tile_style.ts b/x-pack/plugins/maps/public/classes/styles/tile/tile_style.ts
@@ -21,7 +21,7 @@ export class TileStyle implements IStyle {
     return LAYER_STYLE_TYPE.TILE;
   }
 
-  renderEditor(/* { layer, onStyleDescriptorChange } */) {
+  renderEditor(/* onStyleDescriptorChange */) {
     return null;
   }
 }
diff --git a/.../plugins/maps/public/classes/styles/vector/components/color/vector_style_color_editor.tsx b/.../plugins/maps/public/classes/styles/vector/components/color/vector_style_color_editor.tsx
@@ -14,7 +14,11 @@ import { DynamicColorForm } from './dynamic_color_form';
 import { StaticColorForm } from './static_color_form';
 import { ColorDynamicOptions, ColorStaticOptions } from '../../../../../../common/descriptor_types';
 
-export function VectorStyleColorEditor(props: Props<ColorStaticOptions, ColorDynamicOptions>) {
+type ColorEditorProps = Omit<Props<ColorStaticOptions, ColorDynamicOptions>, 'children'> & {
+  swatches: string[];
+};
+
+export function VectorStyleColorEditor(props: ColorEditorProps) {
   const colorForm = props.styleProperty.isDynamic() ? (
     <DynamicColorForm {...props} />
   ) : (

diff --git a/...onents/label/vector_style_label_editor.js → ...nents/label/vector_style_label_editor.tsx b/...onents/label/vector_style_label_editor.js → ...nents/label/vector_style_label_editor.tsx
@@ -6,11 +6,16 @@
 
 import React from 'react';
 
-import { StylePropEditor } from '../style_prop_editor';
+import { Props, StylePropEditor } from '../style_prop_editor';
+// @ts-expect-error
 import { DynamicLabelForm } from './dynamic_label_form';
+// @ts-expect-error
 import { StaticLabelForm } from './static_label_form';
+import { LabelDynamicOptions, LabelStaticOptions } from '../../../../../../common/descriptor_types';
 
-export function VectorStyleLabelEditor(props) {
+type LabelEditorProps = Omit<Props<LabelStaticOptions, LabelDynamicOptions>, 'children'>;
+
+export function VectorStyleLabelEditor(props: LabelEditorProps) {
   const labelForm = props.styleProperty.isDynamic() ? (
     <DynamicLabelForm {...props} />
   ) : (

diff --git a/...mponents/size/vector_style_size_editor.js → ...ponents/size/vector_style_size_editor.tsx b/...mponents/size/vector_style_size_editor.js → ...ponents/size/vector_style_size_editor.tsx
@@ -6,11 +6,16 @@
 
 import React from 'react';
 
-import { StylePropEditor } from '../style_prop_editor';
+import { Props, StylePropEditor } from '../style_prop_editor';
+// @ts-expect-error
 import { DynamicSizeForm } from './dynamic_size_form';
+// @ts-expect-error
 import { StaticSizeForm } from './static_size_form';
+import { SizeDynamicOptions, SizeStaticOptions } from '../../../../../../common/descriptor_types';
 
-export function VectorStyleSizeEditor(props) {
+type SizeEditorProps = Omit<Props<SizeStaticOptions, SizeDynamicOptions>, 'children'>;
+
+export function VectorStyleSizeEditor(props: SizeEditorProps) {
   const sizeForm = props.styleProperty.isDynamic() ? (
     <DynamicSizeForm {...props} />
   ) : (

diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/style_prop_editor.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/style_prop_editor.tsx
@@ -25,12 +25,12 @@ export interface Props<StaticOptions, DynamicOptions> {
   customStaticOptionLabel?: string;
   defaultStaticStyleOptions: StaticOptions;
   defaultDynamicStyleOptions: DynamicOptions;
-  disabled: boolean;
+  disabled?: boolean;
   disabledBy?: VECTOR_STYLES;
   fields: StyleField[];
   onDynamicStyleChange: (propertyName: VECTOR_STYLES, options: DynamicOptions) => void;
   onStaticStyleChange: (propertyName: VECTOR_STYLES, options: StaticOptions) => void;
-  styleProperty: IStyleProperty<any>;
+  styleProperty: IStyleProperty<StaticOptions | DynamicOptions>;
 }
 
 export class StylePropEditor<StaticOptions, DynamicOptions> extends Component<
@@ -42,15 +42,15 @@ export class StylePropEditor<StaticOptions, DynamicOptions> extends Component<
   _onTypeToggle = () => {
     if (this.props.styleProperty.isDynamic()) {
       // preserve current dynmaic style
-      this._prevDynamicStyleOptions = this.props.styleProperty.getOptions();
+      this._prevDynamicStyleOptions = this.props.styleProperty.getOptions() as DynamicOptions;
       // toggle to static style
       this.props.onStaticStyleChange(
         this.props.styleProperty.getStyleName(),
         this._prevStaticStyleOptions
       );
     } else {
       // preserve current static style
-      this._prevStaticStyleOptions = this.props.styleProperty.getOptions();
+      this._prevStaticStyleOptions = this.props.styleProperty.getOptions() as StaticOptions;
       // toggle to dynamic style
       this.props.onDynamicStyleChange(
         this.props.styleProperty.getStyleName(),
@@ -61,7 +61,7 @@ export class StylePropEditor<StaticOptions, DynamicOptions> extends Component<
 
   _onFieldMetaOptionsChange = (fieldMetaOptions: FieldMetaOptions) => {
     const options = {
-      ...this.props.styleProperty.getOptions(),
+      ...(this.props.styleProperty.getOptions() as DynamicOptions),
       fieldMetaOptions,
     };
     this.props.onDynamicStyleChange(this.props.styleProperty.getStyleName(), options);