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

Signed-off-by: François Travais <[email protected]>

Author: francois-travais

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: [
-        [mapboxStyle, viewport],
-        [autozoom, null],
-      ],
+      controlSetRows: [[mapboxStyle], [autozoom, viewport]],
     },
     {
       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],
-        [autozoom],
+        [mapboxStyle],
+        [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],
-        ['color_scheme'],
+        [mapboxStyle],
+        ['color_scheme', viewport],
         [autozoom],
         [gridSize],
         [extruded],