From d03c608ce13ab4595263c7deac268cf38dac1947 Mon Sep 17 00:00:00 2001
From: Kamil Gabryjelski <kamil.gabryjelski@gmail.com>
Date: Mon, 24 May 2021 09:53:46 +0200
Subject: [PATCH] fix(explore): DndColumnSelect not handling controls with
 "multi: false" (#14737)

* fix(explore): DndColumnSelect not handling controls with multi={false}

* Implement translations for singular and plural cases

* Fix test
---
 .../controls/DndColumnSelectControl/DndColumnSelect.tsx   | 6 +++++-
 .../DndColumnSelectControl/DndMetricSelect.test.tsx       | 5 +++++
 .../controls/DndColumnSelectControl/DndMetricSelect.tsx   | 8 ++++++--
 .../components/controls/DndColumnSelectControl/types.ts   | 1 +
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx
index b6d6a28389d1f..10c8bd60d27ea 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx
@@ -17,6 +17,7 @@
  * under the License.
  */
 import React, { useState } from 'react';
+import { tn } from '@superset-ui/core';
 import { ColumnMeta } from '@superset-ui/chart-controls';
 import { isEmpty } from 'lodash';
 import { LabelProps } from 'src/explore/components/controls/DndColumnSelectControl/types';
@@ -28,7 +29,7 @@ import { DndItemType } from 'src/explore/components/DndItemType';
 import { StyledColumnOption } from 'src/explore/components/optionRenderers';
 
 export const DndColumnSelect = (props: LabelProps) => {
-  const { value, options } = props;
+  const { value, options, multi = true } = props;
   const optionSelector = new OptionSelector(options, value);
   const [values, setValues] = useState<ColumnMeta[]>(optionSelector.values);
 
@@ -44,6 +45,7 @@ export const DndColumnSelect = (props: LabelProps) => {
   };
 
   const canDrop = (item: DatasourcePanelDndItem) =>
+    (multi || optionSelector.values.length === 0) &&
     !optionSelector.has((item.value as ColumnMeta).column_name);
 
   const onClickClose = (index: number) => {
@@ -77,6 +79,8 @@ export const DndColumnSelect = (props: LabelProps) => {
       canDrop={canDrop}
       valuesRenderer={valuesRenderer}
       accept={DndItemType.Column}
+      displayGhostButton={multi || optionSelector.values.length === 0}
+      ghostButtonText={tn('Drop column', 'Drop columns', multi ? 2 : 1)}
       {...props}
     />
   );
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.test.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.test.tsx
index eaa18babe4363..51fb9aac3ba23 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.test.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.test.tsx
@@ -31,5 +31,10 @@ const defaultProps = {
 
 test('renders with default props', () => {
   render(<DndMetricSelect {...defaultProps} />, { useDnd: true });
+  expect(screen.getByText('Drop column or metric')).toBeInTheDocument();
+});
+
+test('renders with default props and multi = true', () => {
+  render(<DndMetricSelect {...defaultProps} multi />, { useDnd: true });
   expect(screen.getByText('Drop columns or metrics')).toBeInTheDocument();
 });
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx
index f28dcee42e0b1..a3daeaf70211b 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx
@@ -18,7 +18,7 @@
  */
 
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { ensureIsArray, Metric, t } from '@superset-ui/core';
+import { ensureIsArray, Metric, tn } from '@superset-ui/core';
 import { ColumnMeta } from '@superset-ui/chart-controls';
 import { isEqual } from 'lodash';
 import { usePrevious } from 'src/common/hooks/usePrevious';
@@ -268,7 +268,11 @@ export const DndMetricSelect = (props: any) => {
         canDrop={canDrop}
         valuesRenderer={valuesRenderer}
         accept={[DndItemType.Column, DndItemType.Metric]}
-        ghostButtonText={t('Drop columns or metrics')}
+        ghostButtonText={tn(
+          'Drop column or metric',
+          'Drop columns or metrics',
+          multi ? 2 : 1,
+        )}
         displayGhostButton={multi || value.length === 0}
         {...props}
       />
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts
index bd29ecbe7ed5b..5ba1e06abb45f 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts
@@ -39,6 +39,7 @@ export interface LabelProps<T = string[] | string> {
   value?: T;
   onChange: (value?: T) => void;
   options: { string: ColumnMeta };
+  multi?: boolean;
 }
 
 export interface DndColumnSelectProps<