Fix type errors from Custom Vector Map changes

[tmarkley]

Task for #1660

PR: #1718

Code owners and PR reviewers, can you help address this?
@Shivamdhar @ashwin-pc @junqiu-lei

$ tsc --noEmit
...

src/plugins/region_map/public/components/map_choice_options.test.tsx:9:21 - error TS6133: 'getByTestId' is declared but its value is never read.

9 import { fireEvent, getByTestId } from '@testing-library/dom';
                      ~~~~~~~~~~~

src/plugins/region_map/public/components/map_choice_options.test.tsx:73:30 - error TS2740: Type '{ colorSchema: {}; outlineWeight: {}; wms: {}; selectedLayer: { attribution: string; created_at: string; format: string; fields: { name: string; type: string; description: string; }[]; id: string; meta: undefined; name: string; origin: string; }; selectedJoinField: { ...; }; }' is missing the following properties from type 'RegionMapVisParams': addTooltip, legendPosition, mapCenter, mapZoom, and 2 more.

73     render(<MapChoiceOptions stateParams={stateParams} vis={vis} {...props} />);
                                ~~~~~~~~~~~

  src/plugins/vis_default_editor/public/vis_options_props.tsx:38:3
    38   stateParams: VisParamType;
         ~~~~~~~~~~~
    The expected type comes from property 'stateParams' which is declared here on type 'IntrinsicAttributes & { getServiceSettings: () => Promise<IServiceSettings>; } & VisOptionsProps<RegionMapVisParams>'

src/plugins/region_map/public/components/map_choice_options.test.tsx:73:56 - error TS2740: Type '{ type: { editorConfig: { collections: { colorSchemas: never[]; customVectorLayers: never[]; tmsLayers: never[]; vectorLayers: { attribution: string; created_at: string; format: string; fields: { name: string; type: string; description: string; }[]; id: string; meta: undefined; name: string; origin: string; }[]; }; ...' is missing the following properties from type 'Vis<VisParams>': title, description, params, sessionState, and 9 more.

73     render(<MapChoiceOptions stateParams={stateParams} vis={vis} {...props} />);
                                                          ~~~

  src/plugins/vis_default_editor/public/vis_options_props.tsx:39:3
    39   vis: Vis;
         ~~~
    The expected type comes from property 'vis' which is declared here on type 'IntrinsicAttributes & { getServiceSettings: () => Promise<IServiceSettings>; } & VisOptionsProps<RegionMapVisParams>'

src/plugins/region_map/public/components/map_choice_options.test.tsx:141:30 - error TS2740: Type '{ colorSchema: {}; outlineWeight: {}; wms: {}; selectedCustomLayer: { attribution: string; created_at: string; format: string; fields: { name: string; type: string; description: string; }[]; id: string; meta: undefined; name: string; origin: string; }; selectedCustomJoinField: { ...; }; }' is missing the following properties from type 'RegionMapVisParams': addTooltip, legendPosition, mapCenter, mapZoom, and 2 more.

141     render(<MapChoiceOptions stateParams={stateParams} vis={vis} {...props} />);
                                 ~~~~~~~~~~~

  src/plugins/vis_default_editor/public/vis_options_props.tsx:38:3
    38   stateParams: VisParamType;
         ~~~~~~~~~~~
    The expected type comes from property 'stateParams' which is declared here on type 'IntrinsicAttributes & { getServiceSettings: () => Promise<IServiceSettings>; } & VisOptionsProps<RegionMapVisParams>'

src/plugins/region_map/public/components/map_choice_options.test.tsx:141:56 - error TS2740: Type '{ type: { editorConfig: { collections: { colorSchemas: never[]; customVectorLayers: { attribution: string; created_at: string; format: string; fields: { name: string; type: string; description: string; }[]; id: string; meta: undefined; name: string; origin: string; }[]; tmsLayers: never[]; vectorLayers: never[]; }; ...' is missing the following properties from type 'Vis<VisParams>': title, description, params, sessionState, and 9 more.

141     render(<MapChoiceOptions stateParams={stateParams} vis={vis} {...props} />);
                                                           ~~~

  src/plugins/vis_default_editor/public/vis_options_props.tsx:39:3
    39   vis: Vis;
         ~~~
    The expected type comes from property 'vis' which is declared here on type 'IntrinsicAttributes & { getServiceSettings: () => Promise<IServiceSettings>; } & VisOptionsProps<RegionMapVisParams>'

src/plugins/region_map/public/components/map_choice_options.tsx:7:39 - error TS6133: 'useState' is declared but its value is never read.

7 import React, { useCallback, useMemo, useState } from 'react';
                                        ~~~~~~~~

src/plugins/region_map/public/components/map_choice_options.tsx:72:14 - error TS2345: Argument of type '"layerChosenByUser"' is not assignable to parameter of type 'keyof RegionMapVisParams'.

72     setValue('layerChosenByUser', DEFAULT_MAP_CHOICE);
                ~~~~~~~~~~~~~~~~~~~

src/plugins/region_map/public/components/map_choice_options.tsx:76:14 - error TS2345: Argument of type '"layerChosenByUser"' is not assignable to parameter of type 'keyof RegionMapVisParams'.

76     setValue('layerChosenByUser', CUSTOM_MAP_CHOICE);
                ~~~~~~~~~~~~~~~~~~~

src/plugins/region_map/public/components/map_choice_options.tsx:163:57 - error TS2339: Property 'layerChosenByUser' does not exist on type 'RegionMapVisParams'.

163             checked={DEFAULT_MAP_CHOICE === stateParams.layerChosenByUser}
                                                            ~~~~~~~~~~~~~~~~~

src/plugins/region_map/public/components/map_choice_options.tsx:174:56 - error TS2339: Property 'layerChosenByUser' does not exist on type 'RegionMapVisParams'.

174             checked={CUSTOM_MAP_CHOICE === stateParams.layerChosenByUser}
                                                           ~~~~~~~~~~~~~~~~~

src/plugins/region_map/public/components/map_choice_options.tsx:181:43 - error TS2339: Property 'layerChosenByUser' does not exist on type 'RegionMapVisParams'.

181       {DEFAULT_MAP_CHOICE === stateParams.layerChosenByUser ? (
                                              ~~~~~~~~~~~~~~~~~

src/plugins/region_map/public/components/region_map_options.test.tsx:8:31 - error TS7016: Could not find a declaration file for module 'react-test-renderer'. '/workspaces/OpenSearch-Dashboards/node_modules/react-test-renderer/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/react-test-renderer` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-test-renderer';`

8 import renderer, { act } from 'react-test-renderer';
                                ~~~~~~~~~~~~~~~~~~~~~

src/plugins/region_map/public/components/region_map_options.test.tsx:58:48 - error TS2740: Type '{ colorSchema: {}; outlineWeight: {}; wms: {}; selectedJoinField: { name: string; }; selectedLayer: { layerId: string; fields: { name: string; type: string; property: string; }[]; }; }' is missing the following properties from type 'RegionMapVisParams': addTooltip, legendPosition, mapCenter, mapZoom, and 2 more.

58       tree = renderer.create(<RegionMapOptions stateParams={stateParams} vis={vis} {...props} />);
                                                  ~~~~~~~~~~~

  src/plugins/vis_default_editor/public/vis_options_props.tsx:38:3
    38   stateParams: VisParamType;
         ~~~~~~~~~~~
    The expected type comes from property 'stateParams' which is declared here on type 'IntrinsicAttributes & { getServiceSettings: () => Promise<IServiceSettings>; } & VisOptionsProps<RegionMapVisParams>'

src/plugins/region_map/public/components/region_map_options.test.tsx:58:74 - error TS2740: Type '{ type: { editorConfig: { collections: { colorSchemas: never[]; customVectorLayers: never[]; tmsLayers: never[]; vectorLayers: { attribution: string; created_at: string; format: string; fields: never[]; id: string; meta: undefined; name: string; origin: string; }[]; }; }; }; }' is missing the following properties from type 'Vis<VisParams>': title, description, params, sessionState, and 9 more.

58       tree = renderer.create(<RegionMapOptions stateParams={stateParams} vis={vis} {...props} />);
                                                                            ~~~

  src/plugins/vis_default_editor/public/vis_options_props.tsx:39:3
    39   vis: Vis;
         ~~~
    The expected type comes from property 'vis' which is declared here on type 'IntrinsicAttributes & { getServiceSettings: () => Promise<IServiceSettings>; } & VisOptionsProps<RegionMapVisParams>'

src/plugins/region_map/public/components/region_map_options.test.tsx:60:12 - error TS18048: 'tree' is possibly 'undefined'.

60     expect(tree.toJSON().props.id).toBe('defaultMapOption');
              ~~~~

src/plugins/region_map/public/components/region_map_options.test.tsx:61:12 - error TS18048: 'tree' is possibly 'undefined'.

61     expect(tree.toJSON()).toMatchSnapshot();
              ~~~~

src/plugins/region_map/public/components/region_map_options.test.tsx:111:48 - error TS2740: Type '{ colorSchema: {}; outlineWeight: {}; wms: {}; selectedJoinField: { name: string; }; selectedCustomLayer: { fields: { name: string; property: string; type: string; }[]; layerId: string; }; }' is missing the following properties from type 'RegionMapVisParams': addTooltip, legendPosition, mapCenter, mapZoom, and 2 more.

111       tree = renderer.create(<RegionMapOptions stateParams={stateParams} vis={vis} {...props} />);
                                                   ~~~~~~~~~~~

  src/plugins/vis_default_editor/public/vis_options_props.tsx:38:3
    38   stateParams: VisParamType;
         ~~~~~~~~~~~
    The expected type comes from property 'stateParams' which is declared here on type 'IntrinsicAttributes & { getServiceSettings: () => Promise<IServiceSettings>; } & VisOptionsProps<RegionMapVisParams>'

src/plugins/region_map/public/components/region_map_options.test.tsx:111:74 - error TS2740: Type '{ type: { editorConfig: { collections: { colorSchemas: never[]; customVectorLayers: { attribution: string; created_at: string; format: string; fields: never[]; id: string; meta: undefined; name: string; origin: string; }[]; tmsLayers: never[]; vectorLayers: never[]; }; }; }; }' is missing the following properties from type 'Vis<VisParams>': title, description, params, sessionState, and 9 more.

111       tree = renderer.create(<RegionMapOptions stateParams={stateParams} vis={vis} {...props} />);
                                                                             ~~~

  src/plugins/vis_default_editor/public/vis_options_props.tsx:39:3
    39   vis: Vis;
         ~~~
    The expected type comes from property 'vis' which is declared here on type 'IntrinsicAttributes & { getServiceSettings: () => Promise<IServiceSettings>; } & VisOptionsProps<RegionMapVisParams>'

src/plugins/region_map/public/components/region_map_options.test.tsx:113:12 - error TS18048: 'tree' is possibly 'undefined'.

113     expect(tree.toJSON().props.id).toBe('customMapOption');
               ~~~~

src/plugins/region_map/public/components/region_map_options.test.tsx:114:12 - error TS18048: 'tree' is possibly 'undefined'.

114     expect(tree.toJSON()).toMatchSnapshot();
               ~~~~

src/plugins/region_map/public/components/style_options.test.tsx:8:31 - error TS7016: Could not find a declaration file for module 'react-test-renderer'. '/workspaces/OpenSearch-Dashboards/node_modules/react-test-renderer/index.js' implicitly has an 'any' type.
  Try `npm i --save-dev @types/react-test-renderer` if it exists or add a new declaration (.d.ts) file containing `declare module 'react-test-renderer';`

8 import renderer, { act } from 'react-test-renderer';
                                ~~~~~~~~~~~~~~~~~~~~~

src/plugins/region_map/public/components/style_options.test.tsx:29:44 - error TS2740: Type '{ colorSchema: {}; outlineWeight: {}; }' is missing the following properties from type 'RegionMapVisParams': addTooltip, legendPosition, mapCenter, mapZoom, and 3 more.

29       tree = renderer.create(<StyleOptions stateParams={stateParams} vis={vis} {...props} />);
                                              ~~~~~~~~~~~

  src/plugins/vis_default_editor/public/vis_options_props.tsx:38:3
    38   stateParams: VisParamType;
         ~~~~~~~~~~~
    The expected type comes from property 'stateParams' which is declared here on type 'IntrinsicAttributes & { getServiceSettings: () => Promise<IServiceSettings>; } & VisOptionsProps<RegionMapVisParams>'

src/plugins/region_map/public/components/style_options.test.tsx:29:70 - error TS2740: Type '{ type: { editorConfig: { collections: { colorSchemas: never[]; }; }; }; }' is missing the following properties from type 'Vis<VisParams>': title, description, params, sessionState, and 9 more.

29       tree = renderer.create(<StyleOptions stateParams={stateParams} vis={vis} {...props} />);
                                                                        ~~~

  src/plugins/vis_default_editor/public/vis_options_props.tsx:39:3
    39   vis: Vis;
         ~~~
    The expected type comes from property 'vis' which is declared here on type 'IntrinsicAttributes & { getServiceSettings: () => Promise<IServiceSettings>; } & VisOptionsProps<RegionMapVisParams>'

src/plugins/region_map/public/components/style_options.test.tsx:31:12 - error TS18048: 'tree' is possibly 'undefined'.

31     expect(tree.toJSON().children[0].props.id).toBe('styleSettingTitleId');
              ~~~~

src/plugins/region_map/public/components/style_options.test.tsx:32:12 - error TS18048: 'tree' is possibly 'undefined'.

32     expect(tree.toJSON()).toMatchSnapshot();
              ~~~~

src/plugins/region_map/public/components/style_options.tsx:52:9 - error TS2322: Type '{ label: string; min: number; paramName: "outlineWeight"; value: number | ""; setValue: <T extends keyof RegionMapVisParams>(paramName: T, value: RegionMapVisParams[T]) => void; id: string; }' is not assignable to type 'IntrinsicAttributes & NumberInputOptionProps<"outlineWeight">'.
  Property 'id' does not exist on type 'IntrinsicAttributes & NumberInputOptionProps<"outlineWeight">'.

52         id="borderThicknessId"
           ~~

[yollosun]

[CCI]
src/plugins/region_map/public/components/map_choice_options.test.tsx:73:30 - error TS2740: Type '{ colorSchema: {}; outlineWeight: {}; wms: {}; selectedLayer: { attribution: string; created_at: string; format: string; fields: { name: string; type: string; description: string; }[]; id: string; meta: undefined; name: string; origin: string; }; selectedJoinField: { ...; }; }' is missing the following properties from type 'RegionMapVisParams': addTooltip, legendPosition, mapCenter, mapZoom, and 2 more.

73 render(<MapChoiceOptions stateParams={stateParams} vis={vis} {...props} />);

Am I right that I need to add parameters to stateParams in accordance with the type RegionMapVisParams? Only it is not clear what values ​​​​should be set for these properties. Can you give me advice how can i solve this problem?
do I need to provide more information?

[joshuarrrr]

When fixing typescript issues and errors, there are a couple potential root causes that you have to distinguish:

1. Are the types/interfaces defined correctly?
2. Are the functions defined with the correct types or interfaces for their input and output?
3. Do the input and output of the function conform with the expected type/interface

So it's not safe to assume that a given error is due to case 3 - investigation is necessary to figure out the intended behavior, and whether the problem is in the type definition, the function definition, or the function output.

[joshuarrrr]

@junqiu-lei may also have specific insight about these interfaces.

[joshuarrrr]

@yollosun Are you interested in working on this issue?

[sayuree]

@joshuarrrr Is this issue available? If yes, can I get assigned to it?