fix: deckgl dimension select missing options (#10277)

Fixes #10246

superset-frontend/src/explore/controlPanels/DeckArc.js

@@ -99,15 +99,17 @@ export default {
         ],
         [
           {
-            ...dimension,
-            label: t('Categorical Color'),
-            description: t(
-              'Pick a dimension from which categorical colors are defined',
-            ),
+            name: 'dimension',
+            config: {
+              ...dimension.config,
+              label: t('Categorical Color'),
+              description: t(
+                'Pick a dimension from which categorical colors are defined',
+              ),
+            },
           },
-          'color_scheme',
-          'label_colors',
         ],
+        ['color_scheme', 'label_colors'],
         [
           {
             name: 'stroke_width',

superset-frontend/src/explore/controlPanels/DeckScatter.js

@@ -134,15 +134,17 @@ export default {
         [null, legendFormat],
         [
           {
-            ...dimension,
-            label: t('Categorical Color'),
-            description: t(
-              'Pick a dimension from which categorical colors are defined',
-            ),
+            name: 'dimension',
+            config: {
+              ...dimension.config,
+              label: t('Categorical Color'),
+              description: t(
+                'Pick a dimension from which categorical colors are defined',
+              ),
+            },
           },
-          'color_scheme',
-          'label_colors',
         ],
+        ['color_scheme', 'label_colors'],
       ],
     },
     {

superset-frontend/src/explore/controlPanels/Shared_DeckGL.jsx

@@ -22,7 +22,7 @@
 import React from 'react';
 import { t } from '@superset-ui/translation';
 import { validateNonEmpty } from '@superset-ui/validator';
-import { ColumnOption } from '@superset-ui/chart-controls';
+import { ColumnOption, sharedControls } from '@superset-ui/chart-controls';
 import { D3_FORMAT_OPTIONS, columnChoices, PRIMARY_COLOR } from '../controls';
 import { DEFAULT_VIEWPORT } from '../../explore/components/controls/ViewportControl';
 
@@ -35,37 +35,6 @@ const timeColumnOption = {
   ),
 };
 
-const groupByControl = {
-  type: 'SelectControl',
-  multi: true,
-  freeForm: true,
-  label: t('Group by'),
-  default: [],
-  includeTime: false,
-  description: t('One or many controls to group by'),
-  optionRenderer: c => <ColumnOption column={c} showType />,
-  valueRenderer: c => <ColumnOption column={c} />,
-  valueKey: 'column_name',
-  allowAll: true,
-  filterOption: (opt, text) =>
-    (opt.column_name &&
-      opt.column_name.toLowerCase().indexOf(text.toLowerCase()) >= 0) ||
-    (opt.verbose_name &&
-      opt.verbose_name.toLowerCase().indexOf(text.toLowerCase()) >= 0),
-  promptTextCreator: label => label,
-  mapStateToProps: (state, control) => {
-    const newState = {};
-    if (state.datasource) {
-      newState.options = state.datasource.columns.filter(c => c.groupby);
-      if (control && control.includeTime) {
-        newState.options.push(timeColumnOption);
-      }
-    }
-    return newState;
-  },
-  commaChoosesOption: false,
-};
-
 const sandboxUrl =
   'https://github.com/apache/incubator-superset/' +
   'blob/master/superset-frontend/src/modules/sandbox.js';
@@ -137,7 +106,7 @@ export const autozoom = {
 export const dimension = {
   name: 'dimension',
   config: {
-    ...groupByControl,
+    ...sharedControls.groupby,
     label: t('Dimension'),
     description: t('Select a dimension'),
     multi: false,
@@ -148,7 +117,7 @@ export const dimension = {
 export const jsColumns = {
   name: 'js_columns',
   config: {
-    ...groupByControl,
+    ...sharedControls.groupby,
     label: t('Extra data for JS'),
     default: [],
     description: t(