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
This commit is contained in:
Kamil Gabryjelski 2021-05-24 09:53:46 +02:00 committed by GitHub
parent 6d33432b58
commit d03c608ce1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 17 additions and 3 deletions

View File

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

View File

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

View File

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

View File

@ -39,6 +39,7 @@ export interface LabelProps<T = string[] | string> {
value?: T;
onChange: (value?: T) => void;
options: { string: ColumnMeta };
multi?: boolean;
}
export interface DndColumnSelectProps<