diff --git a/frontend-service/src/views/DatasetDesigner/_components/TabsDesigner/TabsDesigner.jsx b/frontend-service/src/views/DatasetDesigner/_components/TabsDesigner/TabsDesigner.jsx index fa192822d7..ea3c4a5557 100644 --- a/frontend-service/src/views/DatasetDesigner/_components/TabsDesigner/TabsDesigner.jsx +++ b/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); } }; diff --git a/frontend-service/src/views/_components/TabView/TabView.jsx b/frontend-service/src/views/_components/TabView/TabView.jsx index 963feb66df..28db5e672a 100644 --- a/frontend-service/src/views/_components/TabView/TabView.jsx +++ b/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} diff --git a/frontend-service/src/views/_components/TabView/_components/Tab/Tab.jsx b/frontend-service/src/views/_components/TabView/_components/Tab/Tab.jsx index 5c9538a695..dbd8394324 100644 --- a/frontend-service/src/views/_components/TabView/_components/Tab/Tab.jsx +++ b/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 = ({
  • { 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); diff --git a/frontend-service/src/views/_components/TabView/_components/Tab/Tab.module.scss b/frontend-service/src/views/_components/TabView/_components/Tab/Tab.module.scss index f4cbc83543..64eaf6614c 100644 --- a/frontend-service/src/views/_components/TabView/_components/Tab/Tab.module.scss +++ b/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; + } +} \ No newline at end of file