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(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(, { useDnd: true }); + expect(screen.getByText('Drop column or metric')).toBeInTheDocument(); +}); + +test('renders with default props and multi = true', () => { + render(, { 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 { value?: T; onChange: (value?: T) => void; options: { string: ColumnMeta }; + multi?: boolean; } export interface DndColumnSelectProps<