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

Signed-off-by: François Travais <francois.travais@solinum.org>

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';

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');
+}

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',
+      );
+    });
+  });
+});

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/',
+              ),
             },
           },
         ],

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',

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Arc/controlPanel.ts

@@ -76,10 +76,7 @@ const config: ControlPanelConfig = {
     },
     {
       label: t('Map'),
-      controlSetRows: [
+      controlSetRows: [[mapboxStyle], [autozoom, viewport]],
-        [mapboxStyle, viewport],
-        [autozoom, null],
-      ],
     },
     {
       label: t('Arc'),

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],
+        [mapboxStyle],
-        [autozoom],
+        [autozoom, viewport],
         [
           {
             name: 'cellSize',

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],

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],
         [

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],
+        [mapboxStyle],
-        ['color_scheme'],
+        ['color_scheme', viewport],
         [autozoom],
         [gridSize],
         [extruded],

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],
         [

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: [
+      controlSetRows: [[mapboxStyle], [autozoom, viewport]],
-        [mapboxStyle, viewport],
-        [autozoom, null],
-      ],
     },
     {
       label: t('Point Size'),

superset-frontend/plugins/legacy-preset-chart-deckgl/src/layers/Screengrid/controlPanel.ts

@@ -52,10 +52,7 @@ const config: ControlPanelConfig = {
     },
     {
       label: t('Map'),
-      controlSetRows: [
+      controlSetRows: [[mapboxStyle], [autozoom, viewport]],
-        [mapboxStyle, viewport],
-        [autozoom, null],
-      ],
     },
     {
       label: t('Grid'),

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/',
+    ),
   },
 };