From 6f9bb41e0d235710ae38ac4100fcda2e281d7550 Mon Sep 17 00:00:00 2001
From: gaoyan <ikiler@126.com>
Date: Wed, 27 Nov 2024 18:09:26 +0800
Subject: [PATCH] [Optimize][Web]Click the Tasks tab to switch to Service
 Synchronization (#3965)

Co-authored-by: gaoyan1998 <gaoyan1998@users.noreply.github.com>
---
 .../DataStudio/CenterTabContent/SqlTask/index.tsx | 10 ++++++++++
 dinky-web/src/pages/DataStudio/data.d.tsx         |  3 ++-
 dinky-web/src/pages/DataStudio/index.tsx          | 15 +++++++++++++++
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/dinky-web/src/pages/DataStudio/CenterTabContent/SqlTask/index.tsx b/dinky-web/src/pages/DataStudio/CenterTabContent/SqlTask/index.tsx
index 87d6141132..a426ab24a0 100644
--- a/dinky-web/src/pages/DataStudio/CenterTabContent/SqlTask/index.tsx
+++ b/dinky-web/src/pages/DataStudio/CenterTabContent/SqlTask/index.tsx
@@ -252,6 +252,16 @@ export const SqlTask = memo((props: FlinkSqlProps & any) => {
       }
     });
     observer.observe(element);
+
+    const key = Number(id.replace('project_', ''));
+    updateAction({
+      actionType: DataStudioActionType.TASK_TAB_CHANGE,
+      params: {
+        taskId: params.taskId,
+        key: key
+      }
+    });
+
     return () => {
       observer.unobserve(element);
     };
diff --git a/dinky-web/src/pages/DataStudio/data.d.tsx b/dinky-web/src/pages/DataStudio/data.d.tsx
index d148dd6f75..7f737e18a5 100644
--- a/dinky-web/src/pages/DataStudio/data.d.tsx
+++ b/dinky-web/src/pages/DataStudio/data.d.tsx
@@ -59,5 +59,6 @@ export enum DataStudioActionType {
   TASK_RUN_SUBMIT = 'task-run-submit',
   TASK_PREVIEW_RESULT = 'task-preview-result',
   TASK_RUN_DEBUG = 'task-run-debug',
-  TASK_RUN_LOCATION = 'task-run-location'
+  TASK_RUN_LOCATION = 'task-run-location',
+  TASK_TAB_CHANGE = 'task-tab-change'
 }
diff --git a/dinky-web/src/pages/DataStudio/index.tsx b/dinky-web/src/pages/DataStudio/index.tsx
index 55106b6990..8ef1ff4c95 100644
--- a/dinky-web/src/pages/DataStudio/index.tsx
+++ b/dinky-web/src/pages/DataStudio/index.tsx
@@ -579,6 +579,21 @@ const DataStudio: React.FC = (props: any) => {
                     dropMode={'edge'}
                     style={{ position: 'absolute', left: 0, top: 0, right: 0, bottom: 0 }}
                     onLayoutChange={async (newLayout, currentTabId, direction) => {
+                      if (currentTabId && direction == 'active') {
+                        const tableData = (dataStudioState.centerContent.tabs as CenterTab[]).find(
+                          (x) => x.id === currentTabId
+                        );
+                        if (tableData) {
+                          const key = Number(currentTabId.replace('project_', ''));
+                          updateAction({
+                            actionType: DataStudioActionType.TASK_TAB_CHANGE,
+                            params: {
+                              taskId: tableData.params.taskId,
+                              key: key
+                            }
+                          });
+                        }
+                      }
                       // todo 这里移到方向会导致布局和算法异常，先暂时规避掉
                       if (
                         direction === 'left' ||