diff --git a/superset-frontend/src/explore/components/ExploreContainer/ExploreContainer.test.tsx b/superset-frontend/src/explore/components/ExploreContainer/ExploreContainer.test.tsx
index fcfc351f4d3dc..bf9e66adc1d59 100644
--- a/superset-frontend/src/explore/components/ExploreContainer/ExploreContainer.test.tsx
+++ b/superset-frontend/src/explore/components/ExploreContainer/ExploreContainer.test.tsx
@@ -22,6 +22,8 @@ import { OptionControlLabel } from 'src/explore/components/controls/OptionContro
import ExploreContainer, { DraggingContext, DropzoneContext } from '.';
import OptionWrapper from '../controls/DndColumnSelectControl/OptionWrapper';
+import DatasourcePanelDragOption from '../DatasourcePanel/DatasourcePanelDragOption';
+import { DndItemType } from '../DndItemType';
const MockChildren = () => {
const dragging = React.useContext(DraggingContext);
@@ -61,7 +63,7 @@ test('should render children', () => {
expect(getByText('not dragging')).toBeInTheDocument();
});
-test('should propagate dragging state', () => {
+test('should only propagate dragging state when dragging the panel option', () => {
const defaultProps = {
label: Test label,
tooltipTitle: 'This is a tooltip title',
@@ -73,15 +75,19 @@ test('should propagate dragging state', () => {
};
const { container, getByText } = render(
+
Label 1}
+ label={Metric item}
/>
{}}
onShiftOptions={() => {}}
/>
@@ -93,12 +99,15 @@ test('should propagate dragging state', () => {
},
);
expect(container.getElementsByClassName('dragging')).toHaveLength(0);
- fireEvent.dragStart(getByText('Label 1'));
+ fireEvent.dragStart(getByText('panel option'));
expect(container.getElementsByClassName('dragging')).toHaveLength(1);
- fireEvent.dragEnd(getByText('Label 1'));
+ fireEvent.dragEnd(getByText('panel option'));
+ fireEvent.dragStart(getByText('Metric item'));
+ expect(container.getElementsByClassName('dragging')).toHaveLength(0);
+ fireEvent.dragEnd(getByText('Metric item'));
expect(container.getElementsByClassName('dragging')).toHaveLength(0);
// don't show dragging state for the sorting item
- fireEvent.dragStart(getByText('Label 2'));
+ fireEvent.dragStart(getByText('Column item'));
expect(container.getElementsByClassName('dragging')).toHaveLength(0);
});
diff --git a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
index 2e2bf1f5d7b8d..5e3b7c38c66f3 100644
--- a/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
+++ b/superset-frontend/src/explore/components/controls/OptionControls/index.tsx
@@ -231,7 +231,7 @@ export const AddIconButton = styled.button`
`;
interface DragItem {
- index: number;
+ dragIndex: number;
type: string;
}
@@ -287,7 +287,7 @@ export const OptionControlLabel = ({
if (!ref.current) {
return;
}
- const dragIndex = item.index;
+ const { dragIndex } = item;
const hoverIndex = index;
// Don't replace items with themselves
if (dragIndex === hoverIndex) {
@@ -322,13 +322,13 @@ export const OptionControlLabel = ({
// but it's good here for the sake of performance
// to avoid expensive index searches.
// eslint-disable-next-line no-param-reassign
- item.index = hoverIndex;
+ item.dragIndex = hoverIndex;
},
});
const [{ isDragging }, drag] = useDrag({
item: {
type,
- index,
+ dragIndex: index,
value: savedMetric?.metric_name ? savedMetric : adhocMetric,
},
collect: monitor => ({