From 371419f9bb954a0bd3a4d50da68faa3ee074021a Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Thu, 20 May 2021 16:14:01 +0200 Subject: [PATCH 1/3] fix(explore): DndColumnSelect not handling controls with multi={false} --- .../controls/DndColumnSelectControl/DndColumnSelect.tsx | 4 +++- .../components/controls/DndColumnSelectControl/types.ts | 1 + 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx index b6d6a28389d1..880d0855cc9a 100644 --- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx +++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx @@ -28,7 +28,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 +44,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 +78,7 @@ export const DndColumnSelect = (props: LabelProps) => { canDrop={canDrop} valuesRenderer={valuesRenderer} accept={DndItemType.Column} + displayGhostButton={multi || optionSelector.values.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 bd29ecbe7ed5..5ba1e06abb45 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< From 2ce2e71d9aa5a05b649cfa2184291af63e9e0948 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Fri, 21 May 2021 15:37:32 +0200 Subject: [PATCH 2/3] Implement translations for singular and plural cases --- .../controls/DndColumnSelectControl/DndColumnSelect.tsx | 2 ++ .../controls/DndColumnSelectControl/DndMetricSelect.tsx | 8 ++++++-- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndColumnSelect.tsx index 880d0855cc9a..10c8bd60d27e 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'; @@ -79,6 +80,7 @@ export const DndColumnSelect = (props: LabelProps) => { 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.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx index f28dcee42e0b..a3daeaf70211 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} /> From 29805cc4c994dbe7a920d73397aa97ea2c85e5e3 Mon Sep 17 00:00:00 2001 From: Kamil Gabryjelski Date: Fri, 21 May 2021 18:52:32 +0200 Subject: [PATCH 3/3] Fix test --- .../controls/DndColumnSelectControl/DndMetricSelect.test.tsx | 5 +++++ 1 file changed, 5 insertions(+) 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 eaa18babe436..51fb9aac3ba2 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(); });