fix(explore): dnd error when dragging metric if multi: false (#16088)

* fix(explore): dnd error when dragging metric if multi: false

* Fix error for non-dnd controls

superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx

@@ -245,7 +245,10 @@ export const DndMetricSelect = (props: any) => {
     [props.savedMetrics, props.value],
   );
 
-  const handleDropLabel = useCallback(() => onChange(value), [onChange, value]);
+  const handleDropLabel = useCallback(
+    () => onChange(multi ? value : value[0]),
+    [multi, onChange, value],
+  );
 
   const valueRenderer = useCallback(
     (option: Metric | AdhocMetric | string, index: number) => (
@@ -262,12 +265,14 @@ export const DndMetricSelect = (props: any) => {
         onMoveLabel={moveLabel}
         onDropLabel={handleDropLabel}
         type={`${DndItemType.AdhocMetricOption}_${props.name}_${props.label}`}
+        multi={multi}
       />
     ),
     [
       getSavedMetricOptionsForMetric,
       handleDropLabel,
       moveLabel,
+      multi,
       onMetricEdit,
       onRemoveMetric,
       props.columns,

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

@@ -37,6 +37,7 @@ const propTypes = {
   onDropLabel: PropTypes.func,
   index: PropTypes.number,
   type: PropTypes.string,
+  multi: PropTypes.bool,
 };
 
 class AdhocMetricOption extends React.PureComponent {
@@ -62,6 +63,7 @@ class AdhocMetricOption extends React.PureComponent {
       onDropLabel,
       index,
       type,
+      multi,
     } = this.props;
 
     return (
@@ -84,6 +86,7 @@ class AdhocMetricOption extends React.PureComponent {
           type={type ?? DndItemType.AdhocMetricOption}
           withCaret
           isFunction
+          multi={multi}
         />
       </AdhocMetricPopoverTrigger>
     );

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

@@ -49,6 +49,7 @@ export default function MetricDefinitionValue({
   onDropLabel,
   index,
   type,
+  multi,
 }) {
   const getSavedMetricByName = metricName =>
     savedMetrics.find(metric => metric.metric_name === metricName);
@@ -76,6 +77,7 @@ export default function MetricDefinitionValue({
       index,
       savedMetric: savedMetric ?? {},
       type,
+      multi,
     };
 
     return <AdhocMetricOption {...metricOptionProps} />;

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

@@ -154,6 +154,7 @@ class MetricsControl extends React.PureComponent {
         datasourceType={this.props.datasourceType}
         onMoveLabel={this.moveLabel}
         onDropLabel={() => this.props.onChange(this.state.value)}
+        multi={this.props.multi}
       />
     );
     this.select = null;

superset-frontend/src/explore/components/controls/OptionControls/index.tsx

@@ -177,6 +177,7 @@ export const OptionControlLabel = ({
   index,
   isExtra,
   tooltipTitle,
+  multi = true,
   ...props
 }: {
   label: string | React.ReactNode;
@@ -192,15 +193,22 @@ export const OptionControlLabel = ({
   index: number;
   isExtra?: boolean;
   tooltipTitle: string;
+  multi?: boolean;
 }) => {
   const theme = useTheme();
   const ref = useRef<HTMLDivElement>(null);
   const [, drop] = useDrop({
     accept: type,
     drop() {
+      if (!multi) {
+        return;
+      }
       onDropLabel?.();
     },
     hover(item: DragItem, monitor: DropTargetMonitor) {
+      if (!multi) {
+        return;
+      }
       if (!ref.current) {
         return;
       }