fix: Change tab order in ui and backend is slow in many tables (#284566)

frontend-service/src/views/DatasetDesigner/_components/TabsDesigner/TabsDesigner.jsx

@@ -79,6 +79,7 @@ export const TabsDesigner = ({
   const [isEditing, setIsEditing] = useState(false);
   const [isErrorDialogVisible, setIsErrorDialogVisible] = useState(false);
   const [isWarningDialogVisible, setIsWarningDialogVisible] = useState(false);
+  const [isReordering, setIsReordering] = useState(false);
   const [scrollFn, setScrollFn] = useState();
   const [tabs, setTabs] = useState([]);
   const [tabHasErrors, setTabHasErrors] = useState(false);
@@ -282,11 +283,6 @@ export const TabsDesigner = ({
   const onTableDragAndDrop = (draggedTabHeader, droppedTabHeader) => reorderTable(draggedTabHeader, droppedTabHeader);
 
   const onTableDragAndDropStart = (draggedTabIdx, draggedTabId) => {
-    if (!isUndefined(draggedTabId)) {
-      setActiveTableSchemaId(draggedTabId);
-    } else {
-      setActiveTableSchemaId(tabs[0].tableSchemaId);
-    }
     setInitialTabIndexDrag(draggedTabIdx);
   };
 
@@ -512,6 +508,7 @@ export const TabsDesigner = ({
         isEditingEnabled={isEditingEnabled}
         isErrorDialogVisible={isErrorDialogVisible}
         isIcebergCreated={isIcebergCreated}
+        isReordering={isReordering}
         isTableLockedDueToData={tableHasData[idx.tableSchemaId]}
         isWarningDialogVisible={isWarningDialogVisible}
         maxLength={maxLength}
@@ -612,6 +609,8 @@ export const TabsDesigner = ({
   };
 
   const reorderTable = async (draggedTabHeader, droppedTabHeader) => {
+    if (draggedTabHeader === droppedTabHeader) return;
+    setIsReordering(true);
     try {
       const inmTabs = [...tabs];
       const draggedTabIdx = TabsUtils.getIndexByHeader(draggedTabHeader, inmTabs);
@@ -622,13 +621,13 @@ export const TabsDesigner = ({
         await DatasetService.updateTableOrder(datasetId, index, tabs[draggedTabIdx].tableSchemaId);
 
         const shiftedTabs = arrayShift(inmTabs, draggedTabIdx, droppedTabIdx);
-
         shiftedTabs.forEach((tab, i) => (tab.index = !tab.addTab ? i : -1));
-        setActiveTableSchemaId(shiftedTabs[index].tableSchemaId);
         filterManualEdit([...shiftedTabs]);
       }
     } catch (error) {
       console.error('TabsDesigner - reorderTable.', error);
+    } finally {
+      setIsReordering(false);
     }
   };
 

frontend-service/src/views/_components/TabView/TabView.jsx

@@ -36,6 +36,7 @@ export const TabView = ({
   isErrorDialogVisible,
   isDataflowOpen,
   isDesignDatasetEditorRead,
+  isReordering,
   isTableLockedDueToData,
   onTabAdd,
   onTabAddCancel,
@@ -244,6 +245,7 @@ export const TabView = ({
           isEditingEnabled={isEditingEnabled}
           isIcebergCreated={isIcebergCreated}
           isNavigationHidden={isNavigationHidden}
+          isReordering={isReordering}
           isTableLockedDueToData={tab.props.isTableLockedDueToData}
           key={id}
           leftIcon={tab.props.leftIcon}

frontend-service/src/views/_components/TabView/_components/Tab/Tab.jsx

@@ -52,6 +52,7 @@ export const Tab = ({
   isDesignDatasetEditorRead,
   isEditingEnabled,
   isIcebergCreated,
+  isReordering,
   isTableLockedDueToData,
   index,
   initialTabIndexDrag,
@@ -101,6 +102,7 @@ export const Tab = ({
 
   let contextMenuRef = useRef();
   const tabRef = useRef();
+  const isMoving = useRef(false);
 
   useEffect(() => {
     if (!isEditingEnabled && !isTableLockedDueToData) {
@@ -284,6 +286,10 @@ export const Tab = ({
     if (editingHeader) {
       event.preventDefault();
     } else {
+      isMoving.current = true;
+      const img = new Image();
+      img.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+      event.dataTransfer.setDragImage(img, 0, 0);
       const draggedTabHeader = event.target.getElementsByClassName('p-tabview-title')[0].textContent;
       event.dataTransfer.setData('text/plain', draggedTabHeader);
       if (!isUndefined(onTabDragAndDropStart)) {
@@ -299,6 +305,9 @@ export const Tab = ({
         onTabDragAndDropStart(index, tableSchemaId);
       }
     }
+    setTimeout(() => {
+      isMoving.current = false;
+    }, 50);
   };
 
   const onTabDragOver = event => {
@@ -572,7 +581,9 @@ export const Tab = ({
         <FontAwesomeIcon className={styles.dragArrow} icon={AwesomeIcons('arrowUp')} role="presentation" />
       </div>
       <li
-        className={`${className} p-tabview-nav-li datasetSchema-new-table-help-step`}
+        className={classNames(`${className} p-tabview-nav-li datasetSchema-new-table-help-step`, {
+          [styles.tabReordering]: isReordering
+        })}
         onContextMenu={e => {
           if (designMode && !isDataflowOpen && !isDesignDatasetEditorRead && !addTab) {
             const contextMenus = document.getElementsByClassName('p-contextmenu p-component');
@@ -595,6 +606,11 @@ export const Tab = ({
           id={id}
           onAuxClick={e => e.preventDefault()}
           onClick={e => {
+            if (isMoving.current) {
+              e.preventDefault();
+              e.stopPropagation();
+              return;
+            }
             if (!disabled) {
               onTabHeaderClick(e);
               !preventScrollLeft && scrollTo(tabRef.current.offsetLeft - 80, 0);

frontend-service/src/views/_components/TabView/_components/Tab/Tab.module.scss

@@ -114,3 +114,12 @@ input.p_tabview_input_design {
   z-index: 3003 !important;
 }
 
+.tabReordering {
+  opacity: 0.6;
+  filter: blur(1px);
+  transition: all 0.2s ease-in-out;
+  user-select: none;
+  a {
+    cursor: wait !important;
+  }
+}