{
if (isColumnMeta(newColumn)) {
optionSelector.replace(idx, newColumn.column_name);
@@ -171,13 +183,15 @@ export function DndColumnSelect(props: DndColumnSelectProps) {
),
[
canDelete,
+ clickEnabled,
+ isTemporal,
label,
name,
onChange,
onClickClose,
onShiftOptions,
optionSelector,
- popoverOptions,
+ options,
],
);
@@ -205,15 +219,24 @@ export function DndColumnSelect(props: DndColumnSelectProps) {
togglePopover(true);
}, [togglePopover]);
- const defaultGhostButtonText = isFeatureEnabled(
- FeatureFlag.ENABLE_DND_WITH_CLICK_UX,
- )
- ? tn(
- 'Drop a column here or click',
- 'Drop columns here or click',
- multi ? 2 : 1,
- )
- : tn('Drop column here', 'Drop columns here', multi ? 2 : 1);
+ const labelGhostButtonText = useMemo(() => {
+ if (clickEnabled) {
+ return (
+ clickEnabledGhostButtonText ??
+ ghostButtonText ??
+ tn(
+ 'Drop a column here or click',
+ 'Drop columns here or click',
+ multi ? 2 : 1,
+ )
+ );
+ }
+
+ return (
+ ghostButtonText ??
+ tn('Drop column here', 'Drop columns here', multi ? 2 : 1)
+ );
+ }, [clickEnabled, clickEnabledGhostButtonText, ghostButtonText, multi]);
return (
@@ -223,16 +246,12 @@ export function DndColumnSelect(props: DndColumnSelectProps) {
valuesRenderer={valuesRenderer}
accept={DndItemType.Column}
displayGhostButton={multi || optionSelector.values.length === 0}
- ghostButtonText={ghostButtonText || defaultGhostButtonText}
- onClickGhostButton={
- isFeatureEnabled(FeatureFlag.ENABLE_DND_WITH_CLICK_UX)
- ? openPopover
- : undefined
- }
+ ghostButtonText={labelGhostButtonText}
+ onClickGhostButton={clickEnabled ? openPopover : undefined}
{...props}
/>
);
}
+
+const DndColumnSelectWithFallback = withDndFallback(
+ DndColumnSelect,
+ SelectControl,
+);
+
+export { DndColumnSelectWithFallback as DndColumnSelect };
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.test.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.test.tsx
index 92a1597dcd..5e9816e50e 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.test.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.test.tsx
@@ -17,7 +17,7 @@
* under the License.
*/
import React from 'react';
-import { GenericDataType } from '@superset-ui/core';
+import { FeatureFlag, GenericDataType } from '@superset-ui/core';
import { render, screen } from 'spec/helpers/testing-library';
import AdhocMetric from 'src/explore/components/controls/MetricControl/AdhocMetric';
import AdhocFilter, {
@@ -48,6 +48,14 @@ const baseFormData = {
datasource: 'table__1',
};
+beforeAll(() => {
+ window.featureFlags = { [FeatureFlag.ENABLE_EXPLORE_DRAG_AND_DROP]: true };
+});
+
+afterAll(() => {
+ window.featureFlags = {};
+});
+
test('renders with default props', async () => {
render(, { useDnd: true });
expect(
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx
index b0eb601643..285c731323 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndFilterSelect.tsx
@@ -27,7 +27,7 @@ import {
SupersetClient,
t,
} from '@superset-ui/core';
-import { ColumnMeta } from '@superset-ui/chart-controls';
+import { ColumnMeta, withDndFallback } from '@superset-ui/chart-controls';
import {
OPERATOR_ENUM_TO_OPERATOR_TYPE,
Operators,
@@ -49,6 +49,7 @@ import {
} from 'src/explore/components/DatasourcePanel/types';
import { DndItemType } from 'src/explore/components/DndItemType';
import { ControlComponentProps } from 'src/explore/components/Control';
+import AdhocFilterControl from '../FilterControl/AdhocFilterControl';
const EMPTY_OBJECT = {};
const DND_ACCEPTED_TYPES = [
@@ -69,7 +70,7 @@ export interface DndFilterSelectProps
datasource: Datasource;
}
-export const DndFilterSelect = (props: DndFilterSelectProps) => {
+const DndFilterSelect = (props: DndFilterSelectProps) => {
const { datasource, onChange = () => {}, name: controlName } = props;
const propsValues = Array.from(props.value ?? []);
@@ -407,3 +408,10 @@ export const DndFilterSelect = (props: DndFilterSelectProps) => {
>
);
};
+
+const DndFilterSelectWithFallback = withDndFallback(
+ DndFilterSelect,
+ AdhocFilterControl,
+);
+
+export { DndFilterSelectWithFallback as DndFilterSelect };
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 e16c1d0d25..69727d17fe 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.test.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.test.tsx
@@ -18,6 +18,7 @@
*/
import React from 'react';
import userEvent from '@testing-library/user-event';
+import { FeatureFlag } from '@superset-ui/core';
import {
render,
screen,
@@ -67,6 +68,14 @@ const adhocMetricB = {
optionName: 'def',
};
+beforeAll(() => {
+ window.featureFlags = { [FeatureFlag.ENABLE_EXPLORE_DRAG_AND_DROP]: true };
+});
+
+afterAll(() => {
+ window.featureFlags = {};
+});
+
test('renders with default props', () => {
render(, { useDnd: true });
expect(screen.getByText('Drop column or metric here')).toBeInTheDocument();
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx
index 0d9591a0c5..501e814b9a 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx
@@ -27,7 +27,7 @@ import {
QueryFormMetric,
tn,
} from '@superset-ui/core';
-import { ColumnMeta } from '@superset-ui/chart-controls';
+import { ColumnMeta, withDndFallback } from '@superset-ui/chart-controls';
import { isEqual } from 'lodash';
import { usePrevious } from 'src/hooks/usePrevious';
import AdhocMetric from 'src/explore/components/controls/MetricControl/AdhocMetric';
@@ -41,6 +41,7 @@ import { DndItemType } from 'src/explore/components/DndItemType';
import DndSelectLabel from 'src/explore/components/controls/DndColumnSelectControl/DndSelectLabel';
import { savedMetricType } from 'src/explore/components/controls/MetricControl/types';
import { AGGREGATES } from 'src/explore/constants';
+import MetricsControl from '../MetricControl/MetricsControl';
const EMPTY_OBJECT = {};
const DND_ACCEPTED_TYPES = [DndItemType.Column, DndItemType.Metric];
@@ -125,7 +126,7 @@ const getMetricsMatchingCurrentDataset = (
}, []);
};
-export const DndMetricSelect = (props: any) => {
+const DndMetricSelect = (props: any) => {
const { onChange, multi, columns, savedMetrics } = props;
const handleChange = useCallback(
@@ -408,3 +409,10 @@ export const DndMetricSelect = (props: any) => {
);
};
+
+const DndMetricSelectWithFallback = withDndFallback(
+ DndMetricSelect,
+ MetricsControl,
+);
+
+export { DndMetricSelectWithFallback as DndMetricSelect };
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts
index b2c9bd953b..b324689c67 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/types.ts
@@ -46,6 +46,7 @@ export type DndControlProps =
multi?: boolean;
canDelete?: boolean;
ghostButtonText?: string;
+ clickEnabledGhostButtonText?: string;
onChange: (value: ValueType | ValueType[] | null | undefined) => void;
};