fix: Switch tab on drag hover

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,

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,
   }));

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 }) => (

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)