From 2d9106c033c469d48a1b8714c07318c608a8cac6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=9D=92=E6=B9=9B?= <0x1304570@gmail.com>
Date: Tue, 6 Aug 2024 19:45:32 +1200
Subject: [PATCH] fix: unnecessary refresh when changing url (#7838)

---
 config-ui/src/config/paths.ts                 | 20 ++----------------
 .../plugins/components/scope-config/index.tsx |  2 +-
 .../blueprint/connection-detail/index.tsx     | 14 +++++++++----
 .../blueprint/detail/blueprint-detail.tsx     | 21 ++++++++++++-------
 config-ui/src/routes/blueprint/home/index.tsx | 10 +++++++--
 config-ui/src/routes/project/detail/index.tsx | 16 ++++++++------
 .../routes/project/detail/settings-panel.tsx  |  6 +++++-
 config-ui/src/routes/project/home/index.tsx   | 13 ++++++++++--
 8 files changed, 60 insertions(+), 42 deletions(-)

diff --git a/config-ui/src/config/paths.ts b/config-ui/src/config/paths.ts
index c42d8bb528a..72aa74dfb28 100644
--- a/config-ui/src/config/paths.ts
+++ b/config-ui/src/config/paths.ts
@@ -25,27 +25,11 @@ export const PATHS = {
   CONNECTIONS: () => `${PATH_PREFIX}/connections`,
   CONNECTION: (plugin: string, connectionId: ID) => `${PATH_PREFIX}/connections/${plugin}/${connectionId}`,
   PROJECTS: () => `${PATH_PREFIX}/projects`,
-  PROJECT: (
-    pname: string,
-    { tab, tabId }: { tab?: 'configuration' | 'status'; tabId?: 'blueprint' | 'webhook' | 'settings' } = {},
-  ) => {
-    let params = '';
-
-    if (tab && tabId) {
-      params = `?tab=${tab}&tabId=${tabId}`;
-    } else if (tab) {
-      params = `?tab=${tab}`;
-    } else if (tabId) {
-      params = `?tabId=${tabId}`;
-    }
-
-    return `${PATH_PREFIX}/projects/${encodeName(pname)}${params}`;
-  },
+  PROJECT: (pname: string) => `${PATH_PREFIX}/projects/${encodeName(pname)}`,
   PROJECT_CONNECTION: (pname: string, plugin: string, connectionId: ID) =>
     `${PATH_PREFIX}/projects/${encodeName(pname)}/${plugin}-${connectionId}`,
   BLUEPRINTS: () => `${PATH_PREFIX}/advanced/blueprints`,
-  BLUEPRINT: (bid: ID, tab?: 'configuration' | 'status') =>
-    `${PATH_PREFIX}/advanced/blueprints/${bid}${tab ? `?tab=${tab}` : ''}`,
+  BLUEPRINT: (bid: ID) => `${PATH_PREFIX}/advanced/blueprints/${bid}`,
   BLUEPRINT_CONNECTION: (bid: ID, plugin: string, connectionId: ID) =>
     `${PATH_PREFIX}/advanced/blueprints/${bid}/${plugin}-${connectionId}`,
   PIPELINES: () => `${PATH_PREFIX}/advanced/pipelines`,
diff --git a/config-ui/src/plugins/components/scope-config/index.tsx b/config-ui/src/plugins/components/scope-config/index.tsx
index 18055db7b7e..50756a4b33c 100644
--- a/config-ui/src/plugins/components/scope-config/index.tsx
+++ b/config-ui/src/plugins/components/scope-config/index.tsx
@@ -94,7 +94,7 @@ export const ScopeConfig = ({
     });
 
     if (success) {
-      window.open(PATHS.PROJECT(pname, { tab: 'status' }));
+      window.open(PATHS.PROJECT(pname));
     }
   };
 
diff --git a/config-ui/src/routes/blueprint/connection-detail/index.tsx b/config-ui/src/routes/blueprint/connection-detail/index.tsx
index e055f90fa4a..555691116e0 100644
--- a/config-ui/src/routes/blueprint/connection-detail/index.tsx
+++ b/config-ui/src/routes/blueprint/connection-detail/index.tsx
@@ -92,7 +92,11 @@ export const BlueprintConnectionDetailPage = () => {
     });
 
     if (success) {
-      navigate(pname ? PATHS.PROJECT(pname, { tab: 'status' }) : PATHS.BLUEPRINT(blueprint.id, 'status'));
+      navigate(pname ? PATHS.PROJECT(pname) : PATHS.BLUEPRINT(blueprint.id), {
+        state: {
+          activeKey: 'status',
+        },
+      });
     }
   };
 
@@ -121,9 +125,11 @@ export const BlueprintConnectionDetailPage = () => {
           </div>
         ),
         onCancel: () => {
-          navigate(
-            pname ? PATHS.PROJECT(pname, { tab: 'configuration' }) : PATHS.BLUEPRINT(blueprint.id, 'configuration'),
-          );
+          navigate(pname ? PATHS.PROJECT(pname) : PATHS.BLUEPRINT(blueprint.id), {
+            state: {
+              tab: 'configuration',
+            },
+          });
         },
       });
     }
diff --git a/config-ui/src/routes/blueprint/detail/blueprint-detail.tsx b/config-ui/src/routes/blueprint/detail/blueprint-detail.tsx
index a8390e227b3..78a7b6e4fae 100644
--- a/config-ui/src/routes/blueprint/detail/blueprint-detail.tsx
+++ b/config-ui/src/routes/blueprint/detail/blueprint-detail.tsx
@@ -16,9 +16,9 @@
  *
  */
 
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import { Tabs } from 'antd';
-import useUrlState from '@ahooksjs/use-url-state';
 
 import API from '@/api';
 import { PageLoading } from '@/components';
@@ -37,8 +37,13 @@ interface Props {
 
 export const BlueprintDetail = ({ id, from }: Props) => {
   const [version, setVersion] = useState(1);
+  const [activeKey, setActiveKey] = useState('status');
 
-  const [query, setQuery] = useUrlState({ tab: 'status' });
+  const { state } = useLocation();
+
+  useEffect(() => {
+    setActiveKey(state?.activeKey ?? 'status');
+  }, [state]);
 
   const { ready, data } = useRefreshData(async () => {
     const [bpRes, pipelineRes] = await Promise.all([API.blueprint.get(id), API.blueprint.pipelines(id)]);
@@ -49,8 +54,8 @@ export const BlueprintDetail = ({ id, from }: Props) => {
     setVersion((v) => v + 1);
   };
 
-  const handleChangeTab = (tab: string) => {
-    setQuery({ tab });
+  const handleChangeActiveKey = (activeKey: string) => {
+    setActiveKey(activeKey);
   };
 
   if (!ready || !data) {
@@ -79,13 +84,13 @@ export const BlueprintDetail = ({ id, from }: Props) => {
                 from={from}
                 blueprint={blueprint}
                 onRefresh={handlRefresh}
-                onChangeTab={handleChangeTab}
+                onChangeTab={handleChangeActiveKey}
               />
             ),
           },
         ]}
-        activeKey={query.tab}
-        onChange={(tab) => setQuery({ tab })}
+        activeKey={activeKey}
+        onChange={handleChangeActiveKey}
       />
     </S.Wrapper>
   );
diff --git a/config-ui/src/routes/blueprint/home/index.tsx b/config-ui/src/routes/blueprint/home/index.tsx
index ada7fbb12cb..ae2a624b241 100644
--- a/config-ui/src/routes/blueprint/home/index.tsx
+++ b/config-ui/src/routes/blueprint/home/index.tsx
@@ -121,7 +121,7 @@ export const BlueprintHomePage = () => {
               title: 'Blueprint Name',
               key: 'name',
               render: (_, { id, name }) => (
-                <Link to={PATHS.BLUEPRINT(id, 'configuration')} style={{ color: '#292b3f' }}>
+                <Link to={PATHS.BLUEPRINT(id)} state={{ activeKey: 'configuration' }} style={{ color: '#292b3f' }}>
                   <TextTooltip content={name}>{name}</TextTooltip>
                 </Link>
               ),
@@ -196,7 +196,13 @@ export const BlueprintHomePage = () => {
                   type="primary"
                   icon={<SettingOutlined />}
                   helptip="Blueprint Configuration"
-                  onClick={() => navigate(PATHS.BLUEPRINT(val, 'configuration'))}
+                  onClick={() =>
+                    navigate(PATHS.BLUEPRINT(val), {
+                      state: {
+                        activeKey: 'configuration',
+                      },
+                    })
+                  }
                 />
               ),
             },
diff --git a/config-ui/src/routes/project/detail/index.tsx b/config-ui/src/routes/project/detail/index.tsx
index 553f64f62e8..fb37a68ebe7 100644
--- a/config-ui/src/routes/project/detail/index.tsx
+++ b/config-ui/src/routes/project/detail/index.tsx
@@ -16,11 +16,10 @@
  *
  */
 
-import { useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { useParams, useLocation } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import { Tabs } from 'antd';
-import useUrlState from '@ahooksjs/use-url-state';
 
 import API from '@/api';
 import { PageHeader, PageLoading } from '@/components';
@@ -36,14 +35,19 @@ const brandName = import.meta.env.DEVLAKE_BRAND_NAME ?? 'DevLake';
 
 export const ProjectDetailPage = () => {
   const [version, setVersion] = useState(1);
+  const [tabId, setTabId] = useState('blueprint');
 
   const { pname } = useParams() as { pname: string };
-  const [query, setQuery] = useUrlState({ tabId: 'blueprint' });
+  const { state } = useLocation();
+
+  useEffect(() => {
+    setTabId(state?.tabId ?? 'blueprint');
+  }, [state]);
 
   const { ready, data } = useRefreshData(() => API.project.get(pname), [pname, version]);
 
   const handleChangeTabId = (tabId: string) => {
-    setQuery({ tabId });
+    setTabId(tabId);
   };
 
   const handleRefresh = () => {
@@ -85,7 +89,7 @@ export const ProjectDetailPage = () => {
               children: <SettingsPanel project={data} onRefresh={handleRefresh} />,
             },
           ]}
-          activeKey={query.tabId}
+          activeKey={tabId}
           onChange={handleChangeTabId}
         />
       </S.Wrapper>
diff --git a/config-ui/src/routes/project/detail/settings-panel.tsx b/config-ui/src/routes/project/detail/settings-panel.tsx
index a4baa004a53..bc09e450a00 100644
--- a/config-ui/src/routes/project/detail/settings-panel.tsx
+++ b/config-ui/src/routes/project/detail/settings-panel.tsx
@@ -110,7 +110,11 @@ export const SettingsPanel = ({ project, onRefresh }: Props) => {
 
     if (success) {
       onRefresh();
-      navigate(PATHS.PROJECT(name, { tabId: 'settings' }));
+      navigate(PATHS.PROJECT(name), {
+        state: {
+          tabId: 'settings',
+        },
+      });
     }
   };
 
diff --git a/config-ui/src/routes/project/home/index.tsx b/config-ui/src/routes/project/home/index.tsx
index 6511f9928f0..bf5d2f4e6d5 100644
--- a/config-ui/src/routes/project/home/index.tsx
+++ b/config-ui/src/routes/project/home/index.tsx
@@ -125,7 +125,12 @@ export const ProjectHomePage = () => {
             dataIndex: 'name',
             key: 'name',
             render: (name: string) => (
-              <Link to={PATHS.PROJECT(name, { tab: 'configuration' })} style={{ color: '#292b3f' }} ref={nameRef}>
+              <Link
+                to={PATHS.PROJECT(name)}
+                state={{ activeKey: 'configuration' }}
+                style={{ color: '#292b3f' }}
+                ref={nameRef}
+              >
                 {name}
               </Link>
             ),
@@ -185,7 +190,11 @@ export const ProjectHomePage = () => {
                 type="primary"
                 icon={<SettingOutlined />}
                 helptip="Project Configuration"
-                onClick={() => navigate(PATHS.PROJECT(name, { tab: 'configuration' }))}
+                onClick={() =>
+                  navigate(PATHS.PROJECT(name), {
+                    state: { activeKey: 'configuration' },
+                  })
+                }
               />
             ),
           },