This is an automated email from the ASF dual-hosted git repository.
michaelsmolina pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 44690fb299 fix(dashboard): unable to drop tabs in columns (#28242)
44690fb299 is described below
commit 44690fb299ab3b7adc24e84eeec73bccdde14420
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)
---
.../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', () => {
