feat(deckgl-map): use an arbitraty Mabpox style URL (#26027) (#26031)

Signed-off-by: François Travais <francois.travais@solinum.org>
2023-11-28 23:32:19 +01:00 · 2023-11-28 23:32:19 +01:00 · af58784040
parent 7223633da6
commit af58784040
14 changed files with 118 additions and 23 deletions
--- a/superset-frontend/packages/superset-ui-core/src/validator/index.ts
+++ b/superset-frontend/packages/superset-ui-core/src/validator/index.ts
@ -22,3 +22,4 @@ export { default as legacyValidateNumber } from './legacyValidateNumber';
 export { default as validateInteger } from './validateInteger';
 export { default as validateNumber } from './validateNumber';
 export { default as validateNonEmpty } from './validateNonEmpty';
+export { default as validateMapboxStylesUrl } from './validateMapboxStylesUrl';
--- a/superset-frontend/packages/superset-ui-core/src/validator/validateMapboxStylesUrl.ts
+++ b/superset-frontend/packages/superset-ui-core/src/validator/validateMapboxStylesUrl.ts
@ -0,0 +1,36 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import { t } from '../translation';
+
+/**
+ * Validate a [Mapbox styles URL](https://docs.mapbox.com/help/glossary/style-url/)
+ * @param v
+ */
+export default function validateMapboxStylesUrl(v: unknown) {
+  if (
+    typeof v === 'string' &&
+    v.trim().length > 0 &&
+    v.trim().startsWith('mapbox://styles/')
+  ) {
+    return false;
+  }
+
+  return t('is expected to be a Mapbox URL');
+}
--- a/superset-frontend/packages/superset-ui-core/test/validator/validateMapboxStylesUrl.test.ts
+++ b/superset-frontend/packages/superset-ui-core/test/validator/validateMapboxStylesUrl.test.ts
@ -0,0 +1,47 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { validateMapboxStylesUrl } from '@superset-ui/core';
+import './setup';
+
+describe('validateMapboxStylesUrl', () => {
+  it('should validate mapbox style URLs', () => {
+    expect(
+      validateMapboxStylesUrl('mapbox://styles/mapbox/streets-v9'),
+    ).toEqual(false);
+    expect(
+      validateMapboxStylesUrl(
+        'mapbox://styles/foobar/clp2dr5r4008a01pcg4ad45m8',
+      ),
+    ).toEqual(false);
+  });
+
+  [
+    123,
+    ['mapbox://styles/mapbox/streets-v9'],
+    { url: 'mapbox://styles/mapbox/streets-v9' },
+    'https://superset.apache.org/',
+    'mapbox://tileset/mapbox/streets-v9',
+  ].forEach(value => {
+    it(`should not validate ${value}`, () => {
+      expect(validateMapboxStylesUrl(value)).toEqual(
+        'is expected to be a Mapbox URL',
+      );
+    });
+  });
+});
--- a/superset-frontend/plugins/legacy-plugin-chart-map-box/src/controlPanel.ts
+++ b/superset-frontend/plugins/legacy-plugin-chart-map-box/src/controlPanel.ts
@ -16,7 +16,12 @@
 * specific language governing permissions and limitations
 * under the License.
 */
-import { FeatureFlag, isFeatureEnabled, t } from '@superset-ui/core';
+import {
+  FeatureFlag,
+  isFeatureEnabled,
+  t,
+  validateMapboxStylesUrl,
+} from '@superset-ui/core';
 import {
  columnChoices,
  ControlPanelConfig,
@ -224,6 +229,8 @@ const config: ControlPanelConfig = {
              label: t('Map Style'),
              clearable: false,
              renderTrigger: true,
+              freeForm: true,
+              validators: [validateMapboxStylesUrl],
              choices: [
                ['mapbox://styles/mapbox/streets-v9', t('Streets')],
                ['mapbox://styles/mapbox/dark-v9', t('Dark')],
@ -236,7 +243,10 @@ const config: ControlPanelConfig = {
                ['mapbox://styles/mapbox/outdoors-v9', t('Outdoors')],
              ],
              default: 'mapbox://styles/mapbox/light-v9',
-              description: t('Base layer map style'),
+              description: t(
+                'Base layer map style. See Mapbox documentation: %s',
+                'https://docs.mapbox.com/help/glossary/style-url/',
+              ),
            },
          },
        ],
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/Multi/controlPanel.ts
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/Multi/controlPanel.ts
@ -27,7 +27,8 @@ export default {
      label: t('Map'),
      expanded: true,
      controlSetRows: [
-        [mapboxStyle, viewport],
+        [mapboxStyle],
+        [viewport],
        [
          {
            name: 'deck_slices',
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Arc/controlPanel.ts
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Arc/controlPanel.ts
@ -76,10 +76,7 @@ const config: ControlPanelConfig = {
    },
    {
      label: t('Map'),
-      controlSetRows: [
-        [mapboxStyle, viewport],
-        [autozoom, null],
-      ],
+      controlSetRows: [[mapboxStyle], [autozoom, viewport]],
    },
    {
      label: t('Arc'),
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Contour/controlPanel.ts
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Contour/controlPanel.ts
@ -52,8 +52,8 @@ const config: ControlPanelConfig = {
      label: t('Map'),
      expanded: true,
      controlSetRows: [
-        [mapboxStyle, viewport],
-        [autozoom],
+        [mapboxStyle],
+        [autozoom, viewport],
        [
          {
            name: 'cellSize',
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/controlPanel.ts
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Grid/controlPanel.ts
@ -53,7 +53,8 @@ const config: ControlPanelConfig = {
    {
      label: t('Map'),
      controlSetRows: [
-        [mapboxStyle, viewport],
+        [mapboxStyle],
+        [viewport],
        ['color_scheme'],
        [autozoom],
        [gridSize],
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/controlPanel.ts
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Heatmap/controlPanel.ts
@ -99,7 +99,8 @@ const config: ControlPanelConfig = {
    {
      label: t('Map'),
      controlSetRows: [
-        [mapboxStyle, viewport],
+        [mapboxStyle],
+        [viewport],
        ['linear_color_scheme'],
        [autozoom],
        [
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/controlPanel.ts
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Hex/controlPanel.ts
@ -53,8 +53,8 @@ const config: ControlPanelConfig = {
    {
      label: t('Map'),
      controlSetRows: [
-        [mapboxStyle, viewport],
-        ['color_scheme'],
+        [mapboxStyle],
+        ['color_scheme', viewport],
        [autozoom],
        [gridSize],
        [extruded],
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/controlPanel.ts
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Path/controlPanel.ts
@ -67,7 +67,8 @@ const config: ControlPanelConfig = {
      label: t('Map'),
      expanded: true,
      controlSetRows: [
-        [mapboxStyle, viewport],
+        [mapboxStyle],
+        [viewport],
        ['color_picker'],
        [lineWidth],
        [
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Scatter/controlPanel.ts
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Scatter/controlPanel.ts
@ -62,10 +62,7 @@ const config: ControlPanelConfig = {
    {
      label: t('Map'),
      expanded: true,
-      controlSetRows: [
-        [mapboxStyle, viewport],
-        [autozoom, null],
-      ],
+      controlSetRows: [[mapboxStyle], [autozoom, viewport]],
    },
    {
      label: t('Point Size'),
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Screengrid/controlPanel.ts
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Screengrid/controlPanel.ts
@ -52,10 +52,7 @@ const config: ControlPanelConfig = {
    },
    {
      label: t('Map'),
-      controlSetRows: [
-        [mapboxStyle, viewport],
-        [autozoom, null],
-      ],
+      controlSetRows: [[mapboxStyle], [autozoom, viewport]],
    },
    {
      label: t('Grid'),
--- a/superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/Shared_DeckGL.jsx
+++ b/superset-frontend/plugins/legacy-preset-chart-deckgl/src/utilities/Shared_DeckGL.jsx
@ -25,6 +25,7 @@ import {
  isFeatureEnabled,
  t,
  validateNonEmpty,
+  validateMapboxStylesUrl,
 } from '@superset-ui/core';
 import { D3_FORMAT_OPTIONS, sharedControls } from '@superset-ui/chart-controls';
 import { columnChoices, PRIMARY_COLOR } from './controls';
@ -370,6 +371,8 @@ export const mapboxStyle = {
    label: t('Map Style'),
    clearable: false,
    renderTrigger: true,
+    freeForm: true,
+    validators: [validateMapboxStylesUrl],
    choices: [
      ['mapbox://styles/mapbox/streets-v9', t('Streets')],
      ['mapbox://styles/mapbox/dark-v9', t('Dark')],
@ -379,7 +382,10 @@ export const mapboxStyle = {
      ['mapbox://styles/mapbox/outdoors-v9', t('Outdoors')],
    ],
    default: 'mapbox://styles/mapbox/light-v9',
-    description: t('Base layer map style'),
+    description: t(
+      'Base layer map style. See Mapbox documentation: %s',
+      'https://docs.mapbox.com/help/glossary/style-url/',
+    ),
  },
 };