fix(dashboard): unable to drop tabs in columns (apache#28242)

tshallenberger · Apr 29, 2024 · 44690fb · 44690fb
1 parent f9f0bc6
commit 44690fb
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 17 deletions.
diff --git 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
@@ -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,14 +132,20 @@ 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,
   });
   expect(container.querySelector('.hover-menu')).toBeInTheDocument();
 
   // 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
@@ -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
@@ -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,14 +127,20 @@ 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,
   });
   expect(container.querySelector('.hover-menu')).toBeInTheDocument();
 
   // 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', () => {