From b2a360fa14046e384e48ed6273f42eef394ad005 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <70410625+michael-s-molina@users.noreply.github.com>
Date: Fri, 30 Sep 2022 08:09:05 -0300
Subject: [PATCH] fix: Switch tab on drag hover (#21648)

---
 .../src/dashboard/components/dnd/DragDroppable.jsx     |  2 ++
 .../src/dashboard/components/dnd/handleHover.js        |  2 ++
 .../src/dashboard/components/gridComponents/Tab.jsx    | 10 ++++++++++
 .../src/dashboard/components/gridComponents/Tabs.jsx   |  1 +
 4 files changed, 15 insertions(+)

diff --git a/superset-frontend/src/dashboard/components/dnd/DragDroppable.jsx b/superset-frontend/src/dashboard/components/dnd/DragDroppable.jsx
index b9c287c225..8556c9ecab 100644
--- a/superset-frontend/src/dashboard/components/dnd/DragDroppable.jsx
+++ b/superset-frontend/src/dashboard/components/dnd/DragDroppable.jsx
@@ -42,6 +42,7 @@ const propTypes = {
   index: PropTypes.number.isRequired,
   style: PropTypes.object,
   onDrop: PropTypes.func,
+  onHover: PropTypes.func,
   editMode: PropTypes.bool.isRequired,
   useEmptyDragPreview: PropTypes.bool,
 
@@ -61,6 +62,7 @@ const defaultProps = {
   disableDragDrop: false,
   children() {},
   onDrop() {},
+  onHover() {},
   orientation: 'row',
   useEmptyDragPreview: false,
   isDragging: false,
diff --git a/superset-frontend/src/dashboard/components/dnd/handleHover.js b/superset-frontend/src/dashboard/components/dnd/handleHover.js
index 71862a66c5..e709b6e3e5 100644
--- a/superset-frontend/src/dashboard/components/dnd/handleHover.js
+++ b/superset-frontend/src/dashboard/components/dnd/handleHover.js
@@ -40,6 +40,8 @@ function handleHover(props, monitor, Component) {
     return;
   }
 
+  Component?.props?.onHover();
+
   Component.setState(() => ({
     dropIndicator: dropPosition,
   }));
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx
index d8312cd60a..32ac77936c 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Tab.jsx
@@ -43,6 +43,7 @@ const propTypes = {
   depth: PropTypes.number.isRequired,
   renderType: PropTypes.oneOf([RENDER_TAB, RENDER_TAB_CONTENT]).isRequired,
   onDropOnTab: PropTypes.func,
+  onHoverTab: PropTypes.func,
   editMode: PropTypes.bool.isRequired,
   canEdit: PropTypes.bool.isRequired,
 
@@ -64,6 +65,7 @@ const defaultProps = {
   availableColumnCount: 0,
   columnWidth: 0,
   onDropOnTab() {},
+  onHoverTab() {},
   onResizeStart() {},
   onResize() {},
   onResizeStop() {},
@@ -95,6 +97,7 @@ class Tab extends React.PureComponent {
     super(props);
     this.handleChangeText = this.handleChangeText.bind(this);
     this.handleDrop = this.handleDrop.bind(this);
+    this.handleOnHover = this.handleOnHover.bind(this);
     this.handleTopDropTargetDrop = this.handleTopDropTargetDrop.bind(this);
     this.handleChangeTab = this.handleChangeTab.bind(this);
   }
@@ -123,6 +126,10 @@ class Tab extends React.PureComponent {
     this.props.onDropOnTab(dropResult);
   }
 
+  handleOnHover() {
+    this.props.onHoverTab();
+  }
+
   handleTopDropTargetDrop(dropResult) {
     if (dropResult) {
       this.props.handleComponentDrop({
@@ -216,6 +223,7 @@ class Tab extends React.PureComponent {
             depth={depth} // see isValidChild.js for why tabs don't increment child depth
             index={componentIndex}
             onDrop={this.handleDrop}
+            onHover={this.handleOnHover}
             availableColumnCount={availableColumnCount}
             columnWidth={columnWidth}
             onResizeStart={onResizeStart}
@@ -234,6 +242,7 @@ class Tab extends React.PureComponent {
             index={tabComponent.children.length}
             depth={depth}
             onDrop={this.handleDrop}
+            onHover={this.handleOnHover}
             editMode
             className="empty-droptarget"
           >
@@ -263,6 +272,7 @@ class Tab extends React.PureComponent {
         index={index}
         depth={depth}
         onDrop={this.handleDrop}
+        onHover={this.handleOnHover}
         editMode={editMode}
       >
         {({ dropIndicatorProps, dragSourceRef }) => (
diff --git a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
index edb922a397..bfbaf94bda 100644
--- a/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
+++ b/superset-frontend/src/dashboard/components/gridComponents/Tabs.jsx
@@ -388,6 +388,7 @@ export class Tabs extends React.PureComponent {
                       availableColumnCount={availableColumnCount}
                       columnWidth={columnWidth}
                       onDropOnTab={this.handleDropOnTab}
+                      onHoverTab={() => this.handleClickTab(tabIndex)}
                       isFocused={activeKey === tabId}
                       isHighlighted={
                         activeKey !== tabId && tabsToHighlight?.includes(tabId)