From dd4804ee4c466066d1a02e6381904ac0225eec63 Mon Sep 17 00:00:00 2001
From: QuantumXiecao <99702568+QuantumXiecao@users.noreply.github.com>
Date: Fri, 17 Feb 2023 15:04:38 +0800
Subject: [PATCH] [fix-13504] Display the current project name on the left
 corner of the page (#13572)

Co-authored-by: xiecao <haolong.zhl@alibaba-inc.com>
---
 .../components/sidebar/use-menuClick.ts       | 10 +++++----
 .../src/layouts/content/index.tsx             |  1 -
 .../src/layouts/content/use-dataList.ts       | 21 ++++++++++++-------
 .../src/views/projects/list/use-table.ts      |  5 ++++-
 4 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/dolphinscheduler-ui/src/layouts/content/components/sidebar/use-menuClick.ts b/dolphinscheduler-ui/src/layouts/content/components/sidebar/use-menuClick.ts
index fbf235c943..fe569e87a1 100644
--- a/dolphinscheduler-ui/src/layouts/content/components/sidebar/use-menuClick.ts
+++ b/dolphinscheduler-ui/src/layouts/content/components/sidebar/use-menuClick.ts
@@ -15,16 +15,18 @@
  * limitations under the License.
  */
 
-import { useRouter } from 'vue-router'
+import {LocationQueryRaw, useRouter} from 'vue-router'
 import type { Router } from 'vue-router'
 import { MenuOption } from 'naive-ui'
 
 export function useMenuClick() {
   const router: Router = useRouter()
 
-  const handleMenuClick = (key: string, unused: MenuOption) => {
-    // console.log(key, item)
-    router.push({ path: `${key}` })
+  const handleMenuClick = (key: string, menuOption: MenuOption) => {
+    router.push({
+      path: `${key}`,
+      query: menuOption.payload? menuOption.payload as LocationQueryRaw: {}
+    })
   }
 
   return {
diff --git a/dolphinscheduler-ui/src/layouts/content/index.tsx b/dolphinscheduler-ui/src/layouts/content/index.tsx
index 55767608f3..b4a1f6e20a 100644
--- a/dolphinscheduler-ui/src/layouts/content/index.tsx
+++ b/dolphinscheduler-ui/src/layouts/content/index.tsx
@@ -77,7 +77,6 @@ const Content = defineComponent({
           }
 
           getSideMenu(state)
-
           const currentSide = (
             route.meta.activeSide
               ? route.meta.activeSide
diff --git a/dolphinscheduler-ui/src/layouts/content/use-dataList.ts b/dolphinscheduler-ui/src/layouts/content/use-dataList.ts
index 242859e33d..8085e925e3 100644
--- a/dolphinscheduler-ui/src/layouts/content/use-dataList.ts
+++ b/dolphinscheduler-ui/src/layouts/content/use-dataList.ts
@@ -89,6 +89,7 @@ export function useDataList() {
 
   const changeMenuOption = (state: any) => {
     const projectCode = route.params.projectCode || ''
+    const projectName = route.query.projectName || ''
     state.menuOptions = [
       {
         label: () => h(NEllipsis, null, { default: () => t('menu.home') }),
@@ -101,9 +102,10 @@ export function useDataList() {
         icon: renderIcon(ProfileOutlined),
         children: [
           {
-            label: t('menu.project_overview'),
+            label: t('menu.project_overview') + (projectName? `[${projectName}]` : ''),
             key: `/projects/${projectCode}`,
-            icon: renderIcon(FundProjectionScreenOutlined)
+            icon: renderIcon(FundProjectionScreenOutlined),
+            payload: {projectName:projectName}
           },
           {
             label: t('menu.workflow'),
@@ -112,15 +114,18 @@ export function useDataList() {
             children: [
               {
                 label: t('menu.workflow_relation'),
-                key: `/projects/${projectCode}/workflow/relation`
+                key: `/projects/${projectCode}/workflow/relation`,
+                payload: {projectName:projectName}
               },
               {
                 label: t('menu.workflow_definition'),
-                key: `/projects/${projectCode}/workflow-definition`
+                key: `/projects/${projectCode}/workflow-definition`,
+                payload: {projectName:projectName}
               },
               {
                 label: t('menu.workflow_instance'),
-                key: `/projects/${projectCode}/workflow/instances`
+                key: `/projects/${projectCode}/workflow/instances`,
+                payload: {projectName:projectName}
               }
             ]
           },
@@ -131,11 +136,13 @@ export function useDataList() {
             children: [
               {
                 label: t('menu.task_definition'),
-                key: `/projects/${projectCode}/task/definitions`
+                key: `/projects/${projectCode}/task/definitions`,
+                payload: {projectName:projectName}
               },
               {
                 label: t('menu.task_instance'),
-                key: `/projects/${projectCode}/task/instances`
+                key: `/projects/${projectCode}/task/instances`,
+                payload: {projectName:projectName}
               }
             ]
           }
diff --git a/dolphinscheduler-ui/src/views/projects/list/use-table.ts b/dolphinscheduler-ui/src/views/projects/list/use-table.ts
index 107718657b..a62bd3b5a1 100644
--- a/dolphinscheduler-ui/src/views/projects/list/use-table.ts
+++ b/dolphinscheduler-ui/src/views/projects/list/use-table.ts
@@ -82,7 +82,10 @@ export function useTable() {
             ButtonLink,
             {
               onClick: () => {
-                router.push({ path: `/projects/${row.code}` })
+                router.push({
+                  path: `/projects/${row.code}`,
+                  query: {projectName: row.name}
+                })
               }
             },
             {