From f19c97ae5444670c6aa99bd6f7afce0a6a9124ff Mon Sep 17 00:00:00 2001
From: justinpark <justin.hojun.park@gmail.com>
Date: Fri, 26 Apr 2024 15:16:32 -0700
Subject: [PATCH] fix(dashboard): unable to drop tabs in columns

---
 .../dashboard/components/gridComponents/Column.jsx | 11 ++++-------
 .../components/gridComponents/Column.test.jsx      | 14 +++++++++++---
 .../dashboard/components/gridComponents/Row.jsx    |  8 ++++----
 .../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 3511c54a994f..6d96bfb00c55 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 b1521211ada0..294b1f1dea14 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 b6dc042a2b09..2f7a5e541bcc 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 e330195d7755..e3cc9fb7351a 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', () => {