From 903125fa3348b45a1db4c19d2adebaf5fdc1c801 Mon Sep 17 00:00:00 2001 From: Shivam Dhar Date: Tue, 14 Jun 2022 17:55:10 -0700 Subject: [PATCH] updates http and notifications properties and adds more test Signed-off-by: Shivam Dhar --- .../region_map/opensearch_dashboards.json | 3 +- .../region_map_options.test.tsx.snap | 1097 +++++++++++++++++ .../components/map_choice_options.test.tsx | 148 +++ .../public/components/map_choice_options.tsx | 13 +- .../components/region_map_options.test.tsx | 116 ++ .../public/components/region_map_options.tsx | 8 +- src/plugins/region_map/public/plugin.ts | 2 - .../region_map/public/region_map_type.js | 11 +- src/plugins/region_map/public/services.ts | 4 +- 9 files changed, 1378 insertions(+), 24 deletions(-) create mode 100644 src/plugins/region_map/public/components/__snapshots__/region_map_options.test.tsx.snap create mode 100644 src/plugins/region_map/public/components/map_choice_options.test.tsx create mode 100644 src/plugins/region_map/public/components/region_map_options.test.tsx diff --git a/src/plugins/region_map/opensearch_dashboards.json b/src/plugins/region_map/opensearch_dashboards.json index 2f107a4156c4..b2859541377d 100644 --- a/src/plugins/region_map/opensearch_dashboards.json +++ b/src/plugins/region_map/opensearch_dashboards.json @@ -11,7 +11,8 @@ "mapsLegacy", "opensearchDashboardsLegacy", "data", - "share" + "share", + "opensearchDashboardsReact" ], "requiredBundles": [ "opensearchDashboardsUtils", diff --git a/src/plugins/region_map/public/components/__snapshots__/region_map_options.test.tsx.snap b/src/plugins/region_map/public/components/__snapshots__/region_map_options.test.tsx.snap new file mode 100644 index 000000000000..447d5876fa10 --- /dev/null +++ b/src/plugins/region_map/public/components/__snapshots__/region_map_options.test.tsx.snap @@ -0,0 +1,1097 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`region_map_options renders the RegionMapOptions with custom option if custom vector maps are found 1`] = ` +
+
+

+ + Layer settings + +

+
+
+ + + Choose a vector map layer + + +
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
+
+
+ +
+ + + Display warnings + +
+ +
+
+
+
+ +
+ + + Show all shapes + +
+ +
+
+
+
+
+

+ + Style settings + +

+
+
+
+ +
+
+
+
+ +
+ + +
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+

+ + Base layer settings + +

+
+
+
+ +
+ + + WMS map server + +
+ +
+
+
+
+
+ +
+
+
+
+ +
+ + +
+
+
+
+
+
+
+`; + +exports[`region_map_options renders the RegionMapOptions with default option if no custom vector maps are found 1`] = ` +
+
+

+ + Layer settings + +

+
+
+
+
+
+ +
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+ + +
+
+
+
+
+
+
+
+
+
+ +
+ + + Display warnings + +
+ +
+
+
+
+ +
+ + + Show all shapes + +
+ +
+
+
+
+
+

+ + Style settings + +

+
+
+
+ +
+
+
+
+ +
+ + +
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+

+ + Base layer settings + +

+
+
+
+ +
+ + + WMS map server + +
+ +
+
+
+
+
+ +
+
+
+
+ +
+ + +
+
+
+
+
+
+
+`; diff --git a/src/plugins/region_map/public/components/map_choice_options.test.tsx b/src/plugins/region_map/public/components/map_choice_options.test.tsx new file mode 100644 index 000000000000..69b2e71399c9 --- /dev/null +++ b/src/plugins/region_map/public/components/map_choice_options.test.tsx @@ -0,0 +1,148 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import * as React from 'react'; +import { MapChoiceOptions } from './map_choice_options'; +import { screen, render } from '@testing-library/react'; +import { fireEvent, getByTestId } from '@testing-library/dom'; +import '@testing-library/jest-dom'; + +describe('map_choice_options', () => { + it('renders the MapChoiceOptions based on the props provided', async () => { + const props = jest.mock; + const vis = { + type: { + editorConfig: { + collections: { + colorSchemas: [], + customVectorLayers: [], + tmsLayers: [], + vectorLayers: [ + { + attribution: + 'Made with NaturalEarth', + created_at: '2017-04-26T17:12:15.978370', + format: 'geojson', + fields: [ + { + name: 'name', + type: 'id', + description: 'description', + }, + ], + id: 'sample', + meta: undefined, + name: 'sample', + origin: 'user-upload', + }, + ], + }, + }, + }, + }; + + const stateParams = { + colorSchema: {}, + outlineWeight: {}, + wms: {}, + selectedLayer: { + attribution: + 'Made with NaturalEarth', + created_at: '2017-04-26T17:12:15.978370', + format: 'geojson', + fields: [ + { + name: 'name', + type: 'id', + description: 'description', + }, + ], + id: 'sample', + meta: undefined, + name: 'sample', + origin: 'user-upload', + }, + selectedJoinField: { + name: 'name', + type: 'id', + description: 'description', + }, + }; + render(); + const defaultVectorSelection = screen.getByTestId('defaultVectorMap'); + const customVectorSelection = screen.getByTestId('customVectorMap'); + fireEvent.click(defaultVectorSelection); + await expect(defaultVectorSelection).toBeChecked; + await expect(customVectorSelection).not.toBeChecked; + }); + + it('renders the MapChoiceOptions based on the props provided for custom selection', async () => { + const props = jest.mock; + const vis = { + type: { + editorConfig: { + collections: { + colorSchemas: [], + customVectorLayers: [ + { + attribution: + 'Made with NaturalEarth', + created_at: '2017-04-26T17:12:15.978370', + format: 'geojson', + fields: [ + { + name: 'name', + type: 'id', + description: 'description', + }, + ], + id: 'sample', + meta: undefined, + name: 'sample', + origin: 'user-upload', + }, + ], + tmsLayers: [], + vectorLayers: [], + }, + }, + }, + }; + + const stateParams = { + colorSchema: {}, + outlineWeight: {}, + wms: {}, + selectedCustomLayer: { + attribution: + 'Made with NaturalEarth', + created_at: '2017-04-26T17:12:15.978370', + format: 'geojson', + fields: [ + { + name: 'name', + type: 'id', + description: 'description', + }, + ], + id: 'sample', + meta: undefined, + name: 'sample', + origin: 'user-upload', + }, + selectedCustomJoinField: { + name: 'name', + type: 'id', + description: 'description', + }, + }; + render(); + const defaultVectorSelection = screen.getByTestId('defaultVectorMap'); + const customVectorSelection = screen.getByTestId('customVectorMap'); + fireEvent.click(customVectorSelection); + await expect(customVectorSelection).toBeChecked; + await expect(defaultVectorSelection).not.toBeChecked; + }); +}); diff --git a/src/plugins/region_map/public/components/map_choice_options.tsx b/src/plugins/region_map/public/components/map_choice_options.tsx index e6c489ba3087..f18cf88b3712 100644 --- a/src/plugins/region_map/public/components/map_choice_options.tsx +++ b/src/plugins/region_map/public/components/map_choice_options.tsx @@ -51,7 +51,6 @@ function MapChoiceOptions(props: MapChoiceOptionsProps) { const customVectorLayerOptions = useMemo(() => customVectorLayers.map(mapLayerForOption), [ customVectorLayers, ]); - const [userSelectedLayer, setUserSelectedLayer] = useState(DEFAULT_MAP_CHOICE); const fieldOptions = useMemo( () => @@ -70,12 +69,10 @@ function MapChoiceOptions(props: MapChoiceOptionsProps) { ); const selectDefaultVectorMap = () => { - setUserSelectedLayer(DEFAULT_MAP_CHOICE); setValue('layerChosenByUser', DEFAULT_MAP_CHOICE); }; const selectCustomVectorMap = () => { - setUserSelectedLayer(CUSTOM_MAP_CHOICE); setValue('layerChosenByUser', CUSTOM_MAP_CHOICE); }; @@ -137,8 +134,6 @@ function MapChoiceOptions(props: MapChoiceOptionsProps) { [setValue, stateParams.selectedLayer] ); - // const [selectedOptions, setSelected] = useState([customFieldOptions[0]]); - return ( @@ -161,27 +156,29 @@ function MapChoiceOptions(props: MapChoiceOptionsProps) { - {DEFAULT_MAP_CHOICE === userSelectedLayer ? ( + {DEFAULT_MAP_CHOICE === stateParams.layerChosenByUser ? ( { + it('renders the RegionMapOptions with default option if no custom vector maps are found', async () => { + const props = jest.mock; + const vis = { + type: { + editorConfig: { + collections: { + colorSchemas: [], + customVectorLayers: [], + tmsLayers: [], + vectorLayers: [ + { + attribution: + 'Made with NaturalEarth', + created_at: '2017-04-26T17:12:15.978370', + format: 'geojson', + fields: [], + id: 'sample', + meta: undefined, + name: 'sample', + origin: 'user-upload', + }, + ], + }, + }, + }, + }; + const stateParams = { + colorSchema: {}, + outlineWeight: {}, + wms: {}, + selectedJoinField: { + name: 'randomId', + }, + selectedLayer: { + layerId: 'name', + fields: [ + { + name: 'name', + type: 'name', + property: 'name', + }, + ], + }, + }; + + let tree; + await act(async () => { + tree = renderer.create(); + }); + expect(tree.toJSON().props.id).toBe('defaultMapOption'); + expect(tree.toJSON()).toMatchSnapshot(); + }); + + it('renders the RegionMapOptions with custom option if custom vector maps are found', async () => { + const props = jest.mock; + const vis = { + type: { + editorConfig: { + collections: { + colorSchemas: [], + customVectorLayers: [ + { + attribution: + 'Made with NaturalEarth', + created_at: '2017-04-26T17:12:15.978370', + format: 'geojson', + fields: [], + id: 'sample', + meta: undefined, + name: 'sample', + origin: 'user-upload', + }, + ], + tmsLayers: [], + vectorLayers: [], + }, + }, + }, + }; + const stateParams = { + colorSchema: {}, + outlineWeight: {}, + wms: {}, + selectedJoinField: { + name: 'randomId', + }, + selectedCustomLayer: { + fields: [ + { + name: 'name', + property: 'name', + type: 'name', + }, + ], + layerId: 'sample', + }, + }; + + let tree; + await act(async () => { + tree = renderer.create(); + }); + expect(tree.toJSON().props.id).toBe('customMapOption'); + expect(tree.toJSON()).toMatchSnapshot(); + }); +}); diff --git a/src/plugins/region_map/public/components/region_map_options.tsx b/src/plugins/region_map/public/components/region_map_options.tsx index cff4fa635861..d876eda7fdd3 100644 --- a/src/plugins/region_map/public/components/region_map_options.tsx +++ b/src/plugins/region_map/public/components/region_map_options.tsx @@ -54,23 +54,23 @@ function RegionMapOptions(props: RegionMapOptionsProps) { if (customVectorLayerOptions.length === 0) { return ( - <> +
- +
); } else { return ( - <> +
- +
); } } diff --git a/src/plugins/region_map/public/plugin.ts b/src/plugins/region_map/public/plugin.ts index d9f43ab3ca56..5b0caca1370d 100644 --- a/src/plugins/region_map/public/plugin.ts +++ b/src/plugins/region_map/public/plugin.ts @@ -60,7 +60,6 @@ import { SharePluginStart } from '../../share/public'; /** @private */ export interface RegionMapVisualizationDependencies { http: CoreStart['http']; - notifications: CoreStart['notifications']; uiSettings: IUiSettingsClient; regionmapsConfig: RegionMapsConfig; getServiceSettings: () => Promise; @@ -126,7 +125,6 @@ export class RegionMapPlugin implements Plugin = { http: core.http, - notifications: core.notifications, uiSettings: core.uiSettings, regionmapsConfig: config as RegionMapsConfig, getServiceSettings: mapsLegacy.getServiceSettings, diff --git a/src/plugins/region_map/public/region_map_type.js b/src/plugins/region_map/public/region_map_type.js index 1fa519b609cb..9e2294a1fd5e 100644 --- a/src/plugins/region_map/public/region_map_type.js +++ b/src/plugins/region_map/public/region_map_type.js @@ -42,15 +42,14 @@ import { DEFAULT_MAP_CHOICE } from '../common'; export function createRegionMapTypeDefinition(dependencies) { const { http, - notifications, uiSettings, regionmapsConfig, getServiceSettings, additionalOptions, } = dependencies; - const visualization = createRegionMapVisualization(dependencies); - const services = getServices(http); + const services = getServices(http); + const visualization = createRegionMapVisualization(dependencies); const diffArray = (arr1, arr2) => { return arr1.concat(arr2).filter((item) => !arr1.includes(item) || !arr2.includes(item)); }; @@ -72,7 +71,7 @@ export function createRegionMapTypeDefinition(dependencies) { ]); return properties.map(function (property) { return { - type: property, + type: 'id', name: property, description: property, }; @@ -110,6 +109,7 @@ provided base maps, or add your own. Darker colors represent higher values.', icon: 'visMapRegion', visConfig: { defaults: { + layerChosenByUser: DEFAULT_MAP_CHOICE, legendPosition: 'bottomright', addTooltip: true, colorSchema: 'Yellow to Red', @@ -187,9 +187,6 @@ provided base maps, or add your own. Darker colors represent higher values.', const serviceSettings = await getServiceSettings(); const tmsLayers = await serviceSettings.getTMSServices(); - vis.http = http; - vis.params.http = http; - vis.notifications = notifications; vis.type.editorConfig.collections.tmsLayers = tmsLayers; if (!vis.params.wms.selectedTmsLayer && tmsLayers.length) { vis.params.wms.selectedTmsLayer = tmsLayers[0]; diff --git a/src/plugins/region_map/public/services.ts b/src/plugins/region_map/public/services.ts index d4b5257ff859..dd26be3ccd7a 100644 --- a/src/plugins/region_map/public/services.ts +++ b/src/plugins/region_map/public/services.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { HttpFetchError } from 'opensearch-dashboards/public'; +import { CoreStart, HttpFetchError } from 'opensearch-dashboards/public'; export interface Services { getCustomIndices: () => Promise; @@ -11,7 +11,7 @@ export interface Services { getIndexMapping: (indexName: string) => Promise; } -export function getServices(http: any): Services { +export function getServices(http: CoreStart['http']): Services { return { getCustomIndices: async () => { try {