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 = ({