fix: Switch tab on drag hover (#21648)

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