feat: add dropGroupByControl (apache-superset#967)

* feat: add dropGroupByControl

* control rename to DndColumnSelectControl

* add DND feature flag

* wip

* fix lint

* duplicate dnd control

packages/superset-ui-chart-controls/src/shared-controls/dndControls.tsx

@@ -0,0 +1,72 @@
+/* eslint-disable camelcase */
+/**
+ * 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, validateNonEmpty } from '@superset-ui/core';
+import { ExtraControlProps, SharedControlConfig } from '../types';
+
+const timeColumnOption = {
+  verbose_name: t('Time'),
+  column_name: '__timestamp',
+  description: t('A reference to the [Time] configuration, taking granularity into account'),
+};
+
+export const dndGroupByControl: SharedControlConfig<'DndColumnSelectControl'> = {
+  type: 'DndColumnSelectControl',
+  label: t('Group by'),
+  default: [],
+  description: t('One or many columns to group by'),
+  mapStateToProps(state, { includeTime }) {
+    const newState: ExtraControlProps = {};
+    if (state.datasource) {
+      const options = state.datasource.columns.filter(c => c.groupby);
+      if (includeTime) {
+        options.unshift(timeColumnOption);
+      }
+      newState.options = Object.fromEntries(options.map(option => [option.column_name, option]));
+    }
+    return newState;
+  },
+};
+
+export const dndColumnsControl: typeof dndGroupByControl = {
+  ...dndGroupByControl,
+  label: t('Columns'),
+  description: t('One or many columns to pivot as columns'),
+};
+
+export const dndSeries: typeof dndGroupByControl = {
+  ...dndGroupByControl,
+  label: t('Series'),
+  multi: false,
+  default: null,
+  description: t(
+    'Defines the grouping of entities. ' +
+      'Each series is shown as a specific color on the chart and ' +
+      'has a legend toggle',
+  ),
+};
+
+export const dndEntity: typeof dndGroupByControl = {
+  ...dndGroupByControl,
+  label: t('Entity'),
+  default: null,
+  multi: false,
+  validators: [validateNonEmpty],
+  description: t('This defines the element to be plotted on the chart'),
+};

packages/superset-ui-chart-controls/src/shared-controls/index.tsx

@@ -54,6 +54,7 @@ import {
   SelectControlConfig,
 } from '../types';
 import { ColumnOption } from '../components/ColumnOption';
+import { dndColumnsControl, dndEntity, dndGroupByControl, dndSeries } from './dndControls';
 
 const categoricalSchemeRegistry = getCategoricalSchemeRegistry();
 const sequentialSchemeRegistry = getSequentialSchemeRegistry();
@@ -476,6 +477,13 @@ const label_colors: SharedControlConfig<'ColorMapControl'> = {
   }),
 };
 
+// A quick and dirty patch, should be moved to the main repo in the future
+export function isFeatureEnabled(feature: string) {
+  // @ts-ignore
+  return window && window.featureFlags && !!window.featureFlags[feature];
+}
+const enableExploreDnd = isFeatureEnabled('ENABLE_EXPLORE_DRAG_AND_DROP');
+
 const sharedControls = {
   metrics,
   metric,
@@ -485,8 +493,8 @@ const sharedControls = {
   metric_2,
   linear_color_scheme,
   secondary_metric,
-  groupby: groupByControl,
-  columns: columnsControl,
+  groupby: enableExploreDnd ? dndGroupByControl : groupByControl,
+  columns: enableExploreDnd ? dndColumnsControl : columnsControl,
   druid_time_origin,
   granularity,
   granularity_sqla,
@@ -495,8 +503,8 @@ const sharedControls = {
   row_limit,
   limit,
   timeseries_limit_metric,
-  series,
-  entity,
+  series: enableExploreDnd ? dndSeries : series,
+  entity: enableExploreDnd ? dndEntity : entity,
   x,
   y,
   size,

packages/superset-ui-chart-controls/src/types.ts

@@ -139,6 +139,7 @@ export type InternalControlType =
   | 'MetricsControl'
   | 'AdhocFilterControl'
   | 'FilterBoxItemControl'
+  | 'DndColumnSelectControl'
   | keyof SharedControlComponents; // expanded in `expandControlConfig`
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any