feat: Implement drag and drop columns for filters (#13340)

* Implement DnD feature for filters

* minor refactor

* Fix types

* Fix undefined error

* Refactor

* Fix ts errors

* Fix conflicting dnd types

* Bump superset-ui packages

* Change DndItemType case to PascalCase

* Remove redundant null check

* Fix

* Fix csrf mock api call

superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanel.tsx

@@ -32,7 +32,7 @@ import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
 import { ExploreActions } from 'src/explore/actions/exploreActions';
 import Control from 'src/explore/components/Control';
 import DatasourcePanelDragWrapper from './DatasourcePanelDragWrapper';
-import { DatasourcePanelDndType } from './types';
+import { DndItemType } from '../DndItemType';
 
 interface DatasourceControl extends ControlConfig {
   datasource?: DatasourceMeta;
@@ -213,8 +213,8 @@ export default function DataSourcePanel({
               <LabelContainer key={m.metric_name} className="column">
                 {enableExploreDnd ? (
                   <DatasourcePanelDragWrapper
-                    metricOrColumnName={m.metric_name}
-                    type={DatasourcePanelDndType.METRIC}
+                    value={m}
+                    type={DndItemType.Metric}
                   >
                     <MetricOption metric={m} showType />
                   </DatasourcePanelDragWrapper>
@@ -235,8 +235,8 @@ export default function DataSourcePanel({
               <LabelContainer key={col.column_name} className="column">
                 {enableExploreDnd ? (
                   <DatasourcePanelDragWrapper
-                    metricOrColumnName={col.column_name}
-                    type={DatasourcePanelDndType.COLUMN}
+                    value={col}
+                    type={DndItemType.Column}
                   >
                     <ColumnOption column={col} showType />
                   </DatasourcePanelDragWrapper>

superset-frontend/src/explore/components/DatasourcePanel/DatasourcePanelDragWrapper.tsx

@@ -42,7 +42,7 @@ export default function DatasourcePanelDragWrapper(
 ) {
   const [, drag] = useDrag({
     item: {
-      metricOrColumnName: props.metricOrColumnName,
+      value: props.value,
       type: props.type,
     },
   });

superset-frontend/src/explore/components/DatasourcePanel/types.ts

@@ -16,15 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-export enum DatasourcePanelDndType {
-  // todo: The new `metric` conflicts with the existing metric type
-  METRIC = 'datasource-panel-metric',
-  COLUMN = 'column',
-}
+import { ColumnMeta, Metric } from '@superset-ui/chart-controls';
+import { DndItemType } from '../DndItemType';
+
+export type DndItemValue = ColumnMeta | Metric;
 
 export interface DatasourcePanelDndItem {
-  metricOrColumnName: string;
-  type:
-    | typeof DatasourcePanelDndType.METRIC
-    | typeof DatasourcePanelDndType.COLUMN;
+  value: DndItemValue;
+  type: DndItemType;
 }