From e8f18f4dbfca4db4af0acdcddd23cde5f4fd6d5b Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Fri, 30 Jul 2021 08:20:43 -0300
Subject: [PATCH] fix: Drag inner tab to outer tab while editing a dashboard
 will show an error (#15946)

---
 .../components/DashboardBuilder/DashboardBuilder.tsx      | 2 +-
 .../src/dashboard/components/dnd/DragDroppable.jsx        | 7 ++++---
 .../src/dashboard/components/dnd/dragDroppableConfig.js   | 3 +++
 .../src/dashboard/components/gridComponents/Tabs.jsx      | 8 ++++++--
 4 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
index f5dfaf3551..614ceb47cc 100644
--- a/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
+++ b/superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx
@@ -246,7 +246,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
           onDrop={dropResult => dispatch(handleComponentDrop(dropResult))}
           editMode={editMode}
           // you cannot drop on/displace tabs if they already exist
-          disableDragdrop={!!topLevelTabs}
+          disableDragDrop={!!topLevelTabs}
           style={{
             marginLeft: dashboardFiltersOpen || editMode ? 0 : -32,
           }}
diff --git a/superset-frontend/src/dashboard/components/dnd/DragDroppable.jsx b/superset-frontend/src/dashboard/components/dnd/DragDroppable.jsx
index 36be1833e6..a841be7827 100644
--- a/superset-frontend/src/dashboard/components/dnd/DragDroppable.jsx
+++ b/superset-frontend/src/dashboard/components/dnd/DragDroppable.jsx
@@ -37,7 +37,7 @@ const propTypes = {
   component: componentShape.isRequired,
   parentComponent: componentShape,
   depth: PropTypes.number.isRequired,
-  disableDragdrop: PropTypes.bool,
+  disableDragDrop: PropTypes.bool,
   orientation: PropTypes.oneOf(['row', 'column']),
   index: PropTypes.number.isRequired,
   style: PropTypes.object,
@@ -58,7 +58,7 @@ const defaultProps = {
   className: null,
   style: null,
   parentComponent: null,
-  disableDragdrop: false,
+  disableDragDrop: false,
   children() {},
   onDrop() {},
   orientation: 'row',
@@ -104,6 +104,7 @@ export class UnwrappedDragDroppable extends React.Component {
       className,
       orientation,
       dragSourceRef,
+      disableDragDrop,
       isDragging,
       isDraggingOver,
       style,
@@ -112,7 +113,7 @@ export class UnwrappedDragDroppable extends React.Component {
 
     const { dropIndicator } = this.state;
     const dropIndicatorProps =
-      isDraggingOver && dropIndicator
+      isDraggingOver && dropIndicator && !disableDragDrop
         ? {
             className: cx(
               'drop-indicator',
diff --git a/superset-frontend/src/dashboard/components/dnd/dragDroppableConfig.js b/superset-frontend/src/dashboard/components/dnd/dragDroppableConfig.js
index 4e13d701a5..02466d3c5e 100644
--- a/superset-frontend/src/dashboard/components/dnd/dragDroppableConfig.js
+++ b/superset-frontend/src/dashboard/components/dnd/dragDroppableConfig.js
@@ -54,6 +54,9 @@ export const dragConfig = [
 export const dropConfig = [
   TYPE,
   {
+    canDrop(props) {
+      return !props.disableDragDrop;
+    },
     hover(props, monitor, component) {
       if (component && component.mounted) {
         handleHover(props, monitor, component);
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
index 83c9a6a8e8..a2a74829d0 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
@@ -34,7 +34,7 @@ import getLeafComponentIdFromPath from '../../util/getLeafComponentIdFromPath';
 import { componentShape } from '../../util/propShapes';
 import { NEW_TAB_ID, DASHBOARD_ROOT_ID } from '../../util/constants';
 import { RENDER_TAB, RENDER_TAB_CONTENT } from './Tab';
-import { TAB_TYPE } from '../../util/componentTypes';
+import { TABS_TYPE, TAB_TYPE } from '../../util/componentTypes';
 
 const propTypes = {
   id: PropTypes.string.isRequired,
@@ -315,7 +315,11 @@ export class Tabs extends React.PureComponent {
         orientation="row"
         index={index}
         depth={depth}
-        onDrop={handleComponentDrop}
+        onDrop={dropResult => {
+          if (dropResult.dragging.type !== TABS_TYPE) {
+            handleComponentDrop(dropResult);
+          }
+        }}
         editMode={editMode}
       >
         {({