From b7cc89c6d41205f0433c0deeb6e9f6623232cf86 Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Mon, 9 Aug 2021 18:15:50 +0200
Subject: [PATCH] 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
---
 .../controls/DndColumnSelectControl/DndMetricSelect.tsx   | 7 ++++++-
 .../controls/MetricControl/AdhocMetricOption.jsx          | 3 +++
 .../controls/MetricControl/MetricDefinitionValue.jsx      | 2 ++
 .../components/controls/MetricControl/MetricsControl.jsx  | 1 +
 .../explore/components/controls/OptionControls/index.tsx  | 8 ++++++++
 5 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx
index ed32e1b907..6fc8714e67 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx
+++ b/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,
diff --git a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricOption.jsx b/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricOption.jsx
index 31f749c954..bbe544dd8f 100644
--- a/superset-frontend/src/explore/components/controls/MetricControl/AdhocMetricOption.jsx
+++ b/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>
     );
diff --git a/superset-frontend/src/explore/components/controls/MetricControl/MetricDefinitionValue.jsx b/superset-frontend/src/explore/components/controls/MetricControl/MetricDefinitionValue.jsx
index 47520c63a0..7115f52943 100644
--- a/superset-frontend/src/explore/components/controls/MetricControl/MetricDefinitionValue.jsx
+++ b/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} />;
diff --git a/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx b/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx
index 2e24b260be..7ca9c7628f 100644
--- a/superset-frontend/src/explore/components/controls/MetricControl/MetricsControl.jsx
+++ b/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;
diff --git a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
index 0469b4b916..e2584b53e3 100644
--- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
+++ b/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;
       }