fix: Fixes top level tabs and automatic scroll (#14624)

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx

@@ -182,7 +182,7 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
             depth={DASHBOARD_ROOT_DEPTH}
             index={0}
             orientation="column"
-            onDrop={() => dispatch(handleComponentDrop)}
+            onDrop={dropResult => dispatch(handleComponentDrop(dropResult))}
             editMode={editMode}
             // you cannot drop on/displace tabs if they already exist
             disableDragdrop={!!topLevelTabs}

superset-frontend/src/dashboard/components/dnd/handleHover.js

@@ -17,7 +17,8 @@
  * under the License.
  */
 import { throttle } from 'lodash';
-import getDropPosition from '../../util/getDropPosition';
+import { DASHBOARD_ROOT_TYPE } from 'src/dashboard/util/componentTypes';
+import getDropPosition from 'src/dashboard/util/getDropPosition';
 import handleScroll from './handleScroll';
 
 const HOVER_THROTTLE_MS = 100;
@@ -28,9 +29,13 @@ function handleHover(props, monitor, Component) {
 
   const dropPosition = getDropPosition(monitor, Component);
 
-  handleScroll(dropPosition);
+  const isDashboardRoot =
+    Component?.props?.component?.type === DASHBOARD_ROOT_TYPE;
+  const scroll = isDashboardRoot ? 'SCROLL_TOP' : null;
 
-  if (!dropPosition || dropPosition === 'SCROLL_TOP') {
+  handleScroll(scroll);
+
+  if (!dropPosition) {
     Component.setState(() => ({ dropIndicator: null }));
     return;
   }

superset-frontend/src/dashboard/components/dnd/handleScroll/handleScroll.test.ts

@@ -28,6 +28,7 @@ afterAll(() => {
 
 test('calling: "NOT_SCROLL_TOP" ,"SCROLL_TOP", "NOT_SCROLL_TOP"', () => {
   window.scroll = jest.fn();
+  document.documentElement.scrollTop = 500;
 
   handleScroll('NOT_SCROLL_TOP');
 

superset-frontend/src/dashboard/components/dnd/handleScroll/index.ts

@@ -20,22 +20,34 @@ let scrollTopDashboardInterval: any;
 const SCROLL_STEP = 120;
 const INTERVAL_DELAY = 50;
 
-export default function handleScroll(dropPosition: string) {
-  if (dropPosition === 'SCROLL_TOP') {
-    if (!scrollTopDashboardInterval) {
-      scrollTopDashboardInterval = setInterval(() => {
-        let scrollTop = document.documentElement.scrollTop - SCROLL_STEP;
-        if (scrollTop < 0) {
-          scrollTop = 0;
-        }
-        window.scroll({
-          top: scrollTop,
-          behavior: 'smooth',
-        });
-      }, INTERVAL_DELAY);
-    }
-  }
-  if (dropPosition !== 'SCROLL_TOP' && scrollTopDashboardInterval) {
+export default function handleScroll(scroll: string) {
+  const setupScroll =
+    scroll === 'SCROLL_TOP' &&
+    !scrollTopDashboardInterval &&
+    document.documentElement.scrollTop !== 0;
+
+  const clearScroll =
+    scrollTopDashboardInterval &&
+    (scroll !== 'SCROLL_TOP' || document.documentElement.scrollTop === 0);
+
+  if (setupScroll) {
+    scrollTopDashboardInterval = setInterval(() => {
+      if (document.documentElement.scrollTop === 0) {
+        clearInterval(scrollTopDashboardInterval);
+        scrollTopDashboardInterval = null;
+        return;
+      }
+
+      let scrollTop = document.documentElement.scrollTop - SCROLL_STEP;
+      if (scrollTop < 0) {
+        scrollTop = 0;
+      }
+      window.scroll({
+        top: scrollTop,
+        behavior: 'smooth',
+      });
+    }, INTERVAL_DELAY);
+  } else if (clearScroll) {
     clearInterval(scrollTopDashboardInterval);
     scrollTopDashboardInterval = null;
   }

superset-frontend/src/dashboard/util/getDropPosition.js

@@ -17,13 +17,12 @@
  * under the License.
  */
 import isValidChild from './isValidChild';
-import { DASHBOARD_ROOT_TYPE, TAB_TYPE, TABS_TYPE } from './componentTypes';
+import { TAB_TYPE, TABS_TYPE } from './componentTypes';
 
 export const DROP_TOP = 'DROP_TOP';
 export const DROP_RIGHT = 'DROP_RIGHT';
 export const DROP_BOTTOM = 'DROP_BOTTOM';
 export const DROP_LEFT = 'DROP_LEFT';
-export const SCROLL_TOP = 'SCROLL_TOP';
 
 // this defines how close the mouse must be to the edge of a component to display
 // a sibling type drop indicator
@@ -55,10 +54,6 @@ export default function getDropPosition(monitor, Component) {
     return null;
   }
 
-  if (component.type === DASHBOARD_ROOT_TYPE) {
-    return SCROLL_TOP;
-  }
-
   // TODO need a better solution to prevent nested tabs
   if (
     draggingItem.type === TABS_TYPE &&