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

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}
     />
   );

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();
 });

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}
       />

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<