feat: Implement drag and drop for metrics (#13575)

* Convert MetricsControl to functional component

* Implement drag and drop for metrics

* Implement customizable placeholder for DndSelectLabel

superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricPopoverTrigger.tsx

@@ -35,6 +35,10 @@ export type AdhocMetricPopoverTriggerProps = {
   datasourceType: string;
   children: ReactNode;
   createNew?: boolean;
+  isControlledComponent?: boolean;
+  visible?: boolean;
+  togglePopover?: (visible: boolean) => void;
+  closePopover?: () => void;
 };
 
 export type AdhocMetricPopoverTriggerState = {
@@ -139,7 +143,14 @@ class AdhocMetricPopoverTrigger extends React.PureComponent<
   }
 
   render() {
-    const { adhocMetric, savedMetric } = this.props;
+    const {
+      adhocMetric,
+      savedMetric,
+      columns,
+      savedMetricsOptions,
+      datasourceType,
+      isControlledComponent,
+    } = this.props;
     const { verbose_name, metric_name } = savedMetric;
     const { hasCustomLabel, label } = adhocMetric;
     const adhocMetricLabel = hasCustomLabel
@@ -152,16 +163,28 @@ class AdhocMetricPopoverTrigger extends React.PureComponent<
           hasCustomLabel,
         };
 
+    const { visible, togglePopover, closePopover } = isControlledComponent
+      ? {
+          visible: this.props.visible,
+          togglePopover: this.props.togglePopover,
+          closePopover: this.props.closePopover,
+        }
+      : {
+          visible: this.state.popoverVisible,
+          togglePopover: this.togglePopover,
+          closePopover: this.closePopover,
+        };
+
     const overlayContent = (
       <AdhocMetricEditPopover
         adhocMetric={adhocMetric}
         title={title}
-        columns={this.props.columns}
-        savedMetricsOptions={this.props.savedMetricsOptions}
-        savedMetric={this.props.savedMetric}
-        datasourceType={this.props.datasourceType}
+        columns={columns}
+        savedMetricsOptions={savedMetricsOptions}
+        savedMetric={savedMetric}
+        datasourceType={datasourceType}
         onResize={this.onPopoverResize}
-        onClose={this.closePopover}
+        onClose={closePopover}
         onChange={this.onChange}
         getCurrentTab={this.getCurrentTab}
         getCurrentLabel={this.getCurrentLabel}
@@ -181,9 +204,9 @@ class AdhocMetricPopoverTrigger extends React.PureComponent<
         placement="right"
         trigger="click"
         content={overlayContent}
-        defaultVisible={this.state.popoverVisible}
-        visible={this.state.popoverVisible}
-        onVisibleChange={this.togglePopover}
+        defaultVisible={visible}
+        visible={visible}
+        onVisibleChange={togglePopover}
         title={popoverTitle}
         destroyTooltipOnHide={this.props.createNew}
       >

superset-frontend/src/explore/components/controls/MetricControl/MetricDefinitionValue.jsx

@@ -18,16 +18,20 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Metric } from '@superset-ui/chart-controls/lib/types';
 import columnType from 'src/explore/propTypes/columnType';
-import { OptionControlLabel } from 'src/explore/components/OptionControls';
 import AdhocMetricOption from './AdhocMetricOption';
 import AdhocMetric from './AdhocMetric';
 import savedMetricType from './savedMetricType';
 import adhocMetricType from './adhocMetricType';
-import { DndItemType } from '../../DndItemType';
 
 const propTypes = {
-  option: PropTypes.oneOfType([savedMetricType, adhocMetricType]).isRequired,
+  option: PropTypes.oneOfType([
+    savedMetricType,
+    adhocMetricType,
+    Metric,
+    PropTypes.string,
+  ]).isRequired,
   index: PropTypes.number.isRequired,
   onMetricEdit: PropTypes.func,
   onRemoveMetric: PropTypes.func,
@@ -81,19 +85,6 @@ export default function MetricDefinitionValue({
 
     return <AdhocMetricOption {...metricOptionProps} />;
   }
-  if (typeof option === 'string') {
-    return (
-      <OptionControlLabel
-        label={option}
-        onRemove={onRemoveMetric}
-        onMoveLabel={onMoveLabel}
-        onDropLabel={onDropLabel}
-        type={DndItemType.FilterOption}
-        index={index}
-        isFunction
-      />
-    );
-  }
   return null;
 }
 MetricDefinitionValue.propTypes = propTypes;

superset-frontend/src/explore/components/controls/MetricControl/types.ts

@@ -18,6 +18,6 @@
  */
 export type savedMetricType = {
   metric_name: string;
-  verbose_name: string;
+  verbose_name?: string;
   expression: string;
 };