This is an automated email from the ASF dual-hosted git repository. michaelsmolina pushed a commit to branch 4.0 in repository https://gitbox.apache.org/repos/asf/superset.git
commit aef6564e1e4e69e2ef4d4a936a739474e49de827 Author: JUST.in DO IT <[email protected]> AuthorDate: Mon Apr 29 10:50:25 2024 -0700 fix(dashboard): unable to drop tabs in columns (#28242) (cherry picked from commit 44690fb299ab3b7adc24e84eeec73bccdde14420) --- .../src/dashboard/components/gridComponents/Column.jsx | 11 ++++------- .../dashboard/components/gridComponents/Column.test.jsx | 14 +++++++++++--- .../src/dashboard/components/gridComponents/Row.jsx | 8 ++++---- .../src/dashboard/components/gridComponents/Row.test.jsx | 14 +++++++++++--- 4 files changed, 30 insertions(+), 17 deletions(-) diff --git a/superset-frontend/src/dashboard/components/gridComponents/Column.jsx b/superset-frontend/src/dashboard/components/gridComponents/Column.jsx index 3511c54a99..6d96bfb00c 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/Column.jsx +++ b/superset-frontend/src/dashboard/components/gridComponents/Column.jsx @@ -243,18 +243,15 @@ class Column extends React.PureComponent { {editMode && ( <Droppable component={columnComponent} - parentComponent={parentComponent} + parentComponent={columnComponent} {...(columnItems.length === 0 ? { - component: columnComponent, - parentComponent, dropToChild: true, } : { - component: columnItems, - parentComponent: columnComponent, + component: columnItems[0], })} - depth={depth + 1} + depth={depth} index={0} orientation="column" onDrop={handleComponentDrop} @@ -291,7 +288,7 @@ class Column extends React.PureComponent { <Droppable component={columnItems} parentComponent={columnComponent} - depth={depth + 1} + depth={depth} index={itemIndex + 1} orientation="column" onDrop={handleComponentDrop} diff --git a/superset-frontend/src/dashboard/components/gridComponents/Column.test.jsx b/superset-frontend/src/dashboard/components/gridComponents/Column.test.jsx index b1521211ad..294b1f1dea 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/Column.test.jsx +++ b/superset-frontend/src/dashboard/components/gridComponents/Column.test.jsx @@ -31,8 +31,10 @@ jest.mock('src/dashboard/components/dnd/DragDroppable', () => ({ Draggable: ({ children }) => ( <div data-test="mock-draggable">{children({})}</div> ), - Droppable: ({ children }) => ( - <div data-test="mock-droppable">{children({})}</div> + Droppable: ({ children, depth }) => ( + <div data-test="mock-droppable" depth={depth}> + {children({})} + </div> ), })); jest.mock( @@ -130,7 +132,7 @@ test('should render a ResizableContainer', () => { test('should render a HoverMenu in editMode', () => { // we cannot set props on the Row because of the WithDragDropContext wrapper - const { container, getAllByTestId } = setup({ + const { container, getAllByTestId, getByTestId } = setup({ component: columnWithoutChildren, editMode: true, }); @@ -138,6 +140,12 @@ test('should render a HoverMenu in editMode', () => { // Droppable area enabled in editMode expect(getAllByTestId('mock-droppable').length).toBe(1); + + // pass the same depth of its droppable area + expect(getByTestId('mock-droppable')).toHaveAttribute( + 'depth', + `${props.depth}`, + ); }); test('should render a DeleteComponentButton in editMode', () => { diff --git a/superset-frontend/src/dashboard/components/gridComponents/Row.jsx b/superset-frontend/src/dashboard/components/gridComponents/Row.jsx index b6dc042a2b..2f7a5e541b 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/Row.jsx +++ b/superset-frontend/src/dashboard/components/gridComponents/Row.jsx @@ -323,14 +323,14 @@ class Row extends React.PureComponent { {...(rowItems.length === 0 ? { component: rowComponent, - parentComponent, + parentComponent: rowComponent, dropToChild: true, } : { - component: rowItems, + component: rowItems[0], parentComponent: rowComponent, })} - depth={depth + 1} + depth={depth} index={0} orientation="row" onDrop={handleComponentDrop} @@ -375,7 +375,7 @@ class Row extends React.PureComponent { <Droppable component={rowItems} parentComponent={rowComponent} - depth={depth + 1} + depth={depth} index={itemIndex + 1} orientation="row" onDrop={handleComponentDrop} diff --git a/superset-frontend/src/dashboard/components/gridComponents/Row.test.jsx b/superset-frontend/src/dashboard/components/gridComponents/Row.test.jsx index e330195d77..e3cc9fb735 100644 --- a/superset-frontend/src/dashboard/components/gridComponents/Row.test.jsx +++ b/superset-frontend/src/dashboard/components/gridComponents/Row.test.jsx @@ -32,8 +32,10 @@ jest.mock('src/dashboard/components/dnd/DragDroppable', () => ({ Draggable: ({ children }) => ( <div data-test="mock-draggable">{children({})}</div> ), - Droppable: ({ children }) => ( - <div data-test="mock-droppable">{children({})}</div> + Droppable: ({ children, depth }) => ( + <div data-test="mock-droppable" depth={depth}> + {children({})} + </div> ), })); jest.mock( @@ -125,7 +127,7 @@ test('should render a WithPopoverMenu', () => { }); test('should render a HoverMenu in editMode', () => { - const { container, getAllByTestId } = setup({ + const { container, getAllByTestId, getByTestId } = setup({ component: rowWithoutChildren, editMode: true, }); @@ -133,6 +135,12 @@ test('should render a HoverMenu in editMode', () => { // Droppable area enabled in editMode expect(getAllByTestId('mock-droppable').length).toBe(1); + + // pass the same depth of its droppable area + expect(getByTestId('mock-droppable')).toHaveAttribute( + 'depth', + `${props.depth}`, + ); }); test('should render a DeleteComponentButton in editMode', () => {
