[Maps] layer wizard select re-design (#69313) (#69462)

* [Maps] layer wizard select re-design

* review feedback

* tslint

* add unit test

* use smaller gutters

* review feedback

x-pack/plugins/maps/common/constants.ts

@@ -227,3 +227,9 @@ export enum INITIAL_LOCATION {
  FIXED_LOCATION = 'FIXED_LOCATION',
  BROWSER_LOCATION = 'BROWSER_LOCATION',
 }
+
+export enum LAYER_WIZARD_CATEGORY {
+ ELASTICSEARCH = 'ELASTICSEARCH',
+ REFERENCE = 'REFERENCE',
+ SOLUTIONS = 'SOLUTIONS',
+}

x-pack/plugins/maps/public/classes/layers/layer_wizard_registry.ts

@@ -7,6 +7,7 @@
 
 import { ReactElement } from 'react';
 import { LayerDescriptor } from '../../../common/descriptor_types';
+import { LAYER_WIZARD_CATEGORY } from '../../../common/constants';
 
 export type RenderWizardArguments = {
  previewLayers: (layerDescriptors: LayerDescriptor[], isIndexingSource?: boolean) => void;
@@ -20,6 +21,7 @@ export type RenderWizardArguments = {
 };
 
 export type LayerWizard = {
+ categories: LAYER_WIZARD_CATEGORY[];
  checkVisibility?: () => Promise<boolean>;
  description: string;
  icon: string;

x-pack/plugins/maps/public/classes/layers/solution_layers/observability/observability_layer_wizard.tsx

@@ -6,12 +6,14 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { LAYER_WIZARD_CATEGORY } from '../../../../../common/constants';
 import { LayerWizard, RenderWizardArguments } from '../../layer_wizard_registry';
 import { ObservabilityLayerTemplate } from './observability_layer_template';
 import { APM_INDEX_PATTERN_ID } from './create_layer_descriptor';
 import { getIndexPatternService } from '../../../../kibana_services';
 
 export const ObservabilityLayerWizardConfig: LayerWizard = {
+ categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH, LAYER_WIZARD_CATEGORY.SOLUTIONS],
  checkVisibility: async () => {
  try {
  await getIndexPatternService().get(APM_INDEX_PATTERN_ID);

x-pack/plugins/maps/public/classes/layers/solution_layers/security/security_layer_wizard.tsx

@@ -6,11 +6,13 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
+import { LAYER_WIZARD_CATEGORY } from '../../../../../common/constants';
 import { LayerWizard, RenderWizardArguments } from '../../layer_wizard_registry';
 import { getSecurityIndexPatterns } from './security_index_pattern_utils';
 import { SecurityLayerTemplate } from './security_layer_template';
 
 export const SecurityLayerWizardConfig: LayerWizard = {
+ categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH, LAYER_WIZARD_CATEGORY.SOLUTIONS],
  checkVisibility: async () => {
  const indexPatterns = await getSecurityIndexPatterns();
  return indexPatterns.length > 0;

x-pack/plugins/maps/public/classes/sources/client_file_source/upload_layer_wizard.tsx

@@ -22,6 +22,7 @@ import { GeojsonFileSource } from './geojson_file_source';
 import { VectorLayer } from '../../layers/vector_layer/vector_layer';
 
 export const uploadLayerWizardConfig: LayerWizard = {
+ categories: [],
  description: i18n.translate('xpack.maps.source.geojsonFileDescription', {
  defaultMessage: 'Index GeoJSON data in Elasticsearch',
  }),

x-pack/plugins/maps/public/classes/sources/ems_file_source/ems_boundaries_layer_wizard.tsx

@@ -13,8 +13,10 @@ import { EMSFileSource, sourceTitle } from './ems_file_source';
 // @ts-ignore
 import { getIsEmsEnabled } from '../../../kibana_services';
 import { EMSFileSourceDescriptor } from '../../../../common/descriptor_types';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 export const emsBoundariesLayerWizardConfig: LayerWizard = {
+ categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
  checkVisibility: () => {
  return getIsEmsEnabled();
  },

x-pack/plugins/maps/public/classes/sources/ems_tms_source/ems_base_map_layer_wizard.tsx

@@ -13,8 +13,10 @@ import { VectorTileLayer } from '../../layers/vector_tile_layer/vector_tile_laye
 // @ts-ignore
 import { TileServiceSelect } from './tile_service_select';
 import { getIsEmsEnabled } from '../../../kibana_services';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 export const emsBaseMapLayerWizardConfig: LayerWizard = {
+ categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
  checkVisibility: () => {
  return getIsEmsEnabled();
  },

x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/clusters_layer_wizard.tsx

@@ -23,13 +23,15 @@ import {
  COUNT_PROP_NAME,
  COLOR_MAP_TYPE,
  FIELD_ORIGIN,
+ LAYER_WIZARD_CATEGORY,
  RENDER_AS,
  VECTOR_STYLES,
  STYLE_TYPE,
 } from '../../../../common/constants';
 import { COLOR_GRADIENTS } from '../../styles/color_utils';
 
 export const clustersLayerWizardConfig: LayerWizard = {
+ categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],
  description: i18n.translate('xpack.maps.source.esGridClustersDescription', {
  defaultMessage: 'Geospatial data grouped in grids with metrics for each gridded cell',
  }),

x-pack/plugins/maps/public/classes/sources/es_geo_grid_source/heatmap_layer_wizard.tsx

@@ -14,9 +14,10 @@ import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_re
 // @ts-ignore
 import { HeatmapLayer } from '../../layers/heatmap_layer/heatmap_layer';
 import { ESGeoGridSourceDescriptor } from '../../../../common/descriptor_types';
-import { RENDER_AS } from '../../../../common/constants';
+import { LAYER_WIZARD_CATEGORY, RENDER_AS } from '../../../../common/constants';
 
 export const heatmapLayerWizardConfig: LayerWizard = {
+ categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],
  description: i18n.translate('xpack.maps.source.esGridHeatmapDescription', {
  defaultMessage: 'Geospatial data grouped in grids to show density',
  }),

x-pack/plugins/maps/public/classes/sources/es_pew_pew_source/point_2_point_layer_wizard.tsx

@@ -14,6 +14,7 @@ import { VectorStyle } from '../../styles/vector/vector_style';
 import {
  FIELD_ORIGIN,
  COUNT_PROP_NAME,
+ LAYER_WIZARD_CATEGORY,
  VECTOR_STYLES,
  STYLE_TYPE,
 } from '../../../../common/constants';
@@ -24,6 +25,7 @@ import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_re
 import { ColorDynamicOptions, SizeDynamicOptions } from '../../../../common/descriptor_types';
 
 export const point2PointLayerWizardConfig: LayerWizard = {
+ categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],
  description: i18n.translate('xpack.maps.source.pewPewDescription', {
  defaultMessage: 'Aggregated data paths between the source and destination',
  }),

x-pack/plugins/maps/public/classes/sources/es_search_source/es_documents_layer_wizard.tsx

@@ -13,7 +13,7 @@ import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_re
 import { ESSearchSource, sourceTitle } from './es_search_source';
 import { BlendedVectorLayer } from '../../layers/blended_vector_layer/blended_vector_layer';
 import { VectorLayer } from '../../layers/vector_layer/vector_layer';
-import { SCALING_TYPES } from '../../../../common/constants';
+import { LAYER_WIZARD_CATEGORY, SCALING_TYPES } from '../../../../common/constants';
 
 export function createDefaultLayerDescriptor(sourceConfig: unknown, mapColors: string[]) {
  const sourceDescriptor = ESSearchSource.createDescriptor(sourceConfig);
@@ -24,6 +24,7 @@ export function createDefaultLayerDescriptor(sourceConfig: unknown, mapColors: s
 }
 
 export const esDocumentsLayerWizardConfig: LayerWizard = {
+ categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],
  description: i18n.translate('xpack.maps.source.esSearchDescription', {
  defaultMessage: 'Vector data from a Kibana index pattern',
  }),

x-pack/plugins/maps/public/classes/sources/kibana_regionmap_source/kibana_regionmap_layer_wizard.tsx

@@ -13,8 +13,10 @@ import { VectorLayer } from '../../layers/vector_layer/vector_layer';
 // @ts-ignore
 import { CreateSourceEditor } from './create_source_editor';
 import { getKibanaRegionList } from '../../../meta';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 export const kibanaRegionMapLayerWizardConfig: LayerWizard = {
+ categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
  checkVisibility: async () => {
  const regions = getKibanaRegionList();
  return regions.length > 0;

x-pack/plugins/maps/public/classes/sources/kibana_tilemap_source/kibana_base_map_layer_wizard.tsx

@@ -13,8 +13,10 @@ import { CreateSourceEditor } from './create_source_editor';
 import { KibanaTilemapSource, sourceTitle } from './kibana_tilemap_source';
 import { TileLayer } from '../../layers/tile_layer/tile_layer';
 import { getKibanaTileMap } from '../../../meta';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 export const kibanaBasemapLayerWizardConfig: LayerWizard = {
+ categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
  checkVisibility: async () => {
  const tilemap = getKibanaTileMap();
  // @ts-ignore

x-pack/plugins/maps/public/classes/sources/mvt_single_layer_vector_source/layer_wizard.tsx

@@ -13,8 +13,10 @@ import {
 import { MVTSingleLayerVectorSource, sourceTitle } from './mvt_single_layer_vector_source';
 import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry';
 import { TiledVectorLayer } from '../../layers/tiled_vector_layer/tiled_vector_layer';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 export const mvtVectorSourceWizardConfig: LayerWizard = {
+ categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
  description: i18n.translate('xpack.maps.source.mvtVectorSourceWizard', {
  defaultMessage: 'Vector source wizard',
  }),

x-pack/plugins/maps/public/classes/sources/wms_source/wms_layer_wizard.tsx

@@ -12,8 +12,10 @@ import { WMSCreateSourceEditor } from './wms_create_source_editor';
 import { sourceTitle, WMSSource } from './wms_source';
 import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry';
 import { TileLayer } from '../../layers/tile_layer/tile_layer';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 export const wmsLayerWizardConfig: LayerWizard = {
+ categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
  description: i18n.translate('xpack.maps.source.wmsDescription', {
  defaultMessage: 'Maps from OGC Standard WMS',
  }),

x-pack/plugins/maps/public/classes/sources/xyz_tms_source/layer_wizard.tsx

@@ -10,8 +10,10 @@ import { XYZTMSEditor, XYZTMSSourceConfig } from './xyz_tms_editor';
 import { XYZTMSSource, sourceTitle } from './xyz_tms_source';
 import { LayerWizard, RenderWizardArguments } from '../../layers/layer_wizard_registry';
 import { TileLayer } from '../../layers/tile_layer/tile_layer';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
 
 export const tmsLayerWizardConfig: LayerWizard = {
+ categories: [LAYER_WIZARD_CATEGORY.REFERENCE],
  description: i18n.translate('xpack.maps.source.ems_xyzDescription', {
  defaultMessage: 'Tile map service configured in interface',
  }),

x-pack/plugins/maps/public/connected_components/_index.scss

@@ -1,5 +1,4 @@
 @import 'gis_map/gis_map';
-@import 'add_layer_panel/index';
 @import 'layer_panel/index';
 @import 'widget_overlay/index';
 @import 'toolbar_overlay/index';

x-pack/plugins/maps/public/connected_components/add_layer_panel/flyout_body/layer_wizard_select.test.tsx

@@ -0,0 +1,59 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+jest.mock('../../../classes/layers/layer_wizard_registry', () => ({}));
+
+import React from 'react';
+import { shallow } from 'enzyme';
+import { LayerWizardSelect } from './layer_wizard_select';
+import { LAYER_WIZARD_CATEGORY } from '../../../../common/constants';
+
+const defaultProps = {
+ onSelect: () => {},
+};
+
+describe('LayerWizardSelect', () => {
+ beforeAll(() => {
+ require('../../../classes/layers/layer_wizard_registry').getLayerWizards = async () => {
+ return [
+ {
+ categories: [LAYER_WIZARD_CATEGORY.ELASTICSEARCH],
+ description: 'mock wizard without icon',
+ renderWizard: () => {
+ return <div />;
+ },
+ title: 'wizard 1',
+ },
+ {
+ categories: [LAYER_WIZARD_CATEGORY.SOLUTIONS],
+ description: 'mock wizard with icon',
+ icon: 'logoObservability',
+ renderWizard: () => {
+ return <div />;
+ },
+ title: 'wizard 2',
+ },
+ ];
+ };
+ });
+
+ test('Should render layer select after layer wizards are loaded', async () => {
+ const component = shallow(<LayerWizardSelect {...defaultProps} />);
+
+ // Ensure all promises resolve
+ await new Promise((resolve) => process.nextTick(resolve));
+ // Ensure the state changes are reflected
+ component.update();
+
+ expect(component).toMatchSnapshot();
+ });
+
+ test('Should render loading screen before layer wizards are loaded', () => {
+ const component = shallow(<LayerWizardSelect {...defaultProps} />);
+
+ expect(component).toMatchSnapshot();
+ });
+});