From 9b05bc13e2900348a84cf80245afa214b3639fcd Mon Sep 17 00:00:00 2001
From: Denghui Dong <denghui.ddh@alibaba-inc.com>
Date: Sat, 23 Mar 2024 13:43:45 +0800
Subject: [PATCH] chore: add tooltip for menu

---
 frontend/src/components/layouts/Side.vue | 39 +++++++++++++++---------
 frontend/src/i18n/en.ts                  |  5 +++
 frontend/src/i18n/zh.ts                  |  5 +++
 frontend/src/support/utils.ts            | 10 +++---
 4 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/layouts/Side.vue b/frontend/src/components/layouts/Side.vue
index 2d045e71..df06e08a 100644
--- a/frontend/src/components/layouts/Side.vue
+++ b/frontend/src/components/layouts/Side.vue
@@ -11,10 +11,11 @@
     SPDX-License-Identifier: EPL-2.0
  -->
 <script setup lang="ts">
-import { useRoute, useRouter } from 'vue-router';
-import { DataAnalysis, Files } from '@element-plus/icons-vue';
-import { useAnalysisStore } from '@/stores/analysis';
-import type { FileType } from '@/composables/file-types';
+import {t} from '@/i18n/i18n';
+import {useRoute, useRouter} from 'vue-router';
+import {DataAnalysis, Files} from '@element-plus/icons-vue';
+import {useAnalysisStore} from '@/stores/analysis';
+import type {FileType} from '@/composables/file-types';
 
 const router = useRouter();
 const route = useRoute();
@@ -37,16 +38,26 @@ function onSelect(index) {
 <template>
   <div>
     <el-menu class="ej-side-menu" :default-active="defaultActive" @select="onSelect" collapse>
-      <el-menu-item index="Files">
-        <el-icon>
-          <Files />
-        </el-icon>
-      </el-menu-item>
-      <el-menu-item index="Analysis" :disabled="!analysis.target">
-        <el-icon>
-          <DataAnalysis />
-        </el-icon>
-      </el-menu-item>
+      <el-tooltip placement="right" :show-arrow="false" :offset="6" :content="t('menu.files')">
+        <el-menu-item index="Files">
+          <el-icon>
+            <Files/>
+          </el-icon>
+        </el-menu-item>
+      </el-tooltip>
+      <el-tooltip
+          placement="right"
+          :show-arrow="false"
+          :offset="6"
+          :content="t('menu.analysisView')"
+          :disabled="!analysis.target"
+      >
+        <el-menu-item index="Analysis" :disabled="!analysis.target">
+          <el-icon>
+            <DataAnalysis/>
+          </el-icon>
+        </el-menu-item>
+      </el-tooltip>
     </el-menu>
   </div>
 </template>
diff --git a/frontend/src/i18n/en.ts b/frontend/src/i18n/en.ts
index b769e109..e3240e90 100644
--- a/frontend/src/i18n/en.ts
+++ b/frontend/src/i18n/en.ts
@@ -43,6 +43,11 @@ export default {
       download: 'Download'
     },
 
+    menu: {
+      files: "Files",
+      analysisView: "Analysis View",
+    },
+
     serviceUnavailable: {
       title: 'Service is unavailable',
       subtitle: 'Please contact the administrator'
diff --git a/frontend/src/i18n/zh.ts b/frontend/src/i18n/zh.ts
index 7093f69e..01a64292 100644
--- a/frontend/src/i18n/zh.ts
+++ b/frontend/src/i18n/zh.ts
@@ -43,6 +43,11 @@ export default {
       download: '下载原文件'
     },
 
+    menu: {
+      files: "文件",
+      analysisView: "分析视图",
+    },
+
     serviceUnavailable: {
       title: '服务不可用',
       subtitle: '请联系系统管理员'
diff --git a/frontend/src/support/utils.ts b/frontend/src/support/utils.ts
index cfad82f0..91636d3e 100644
--- a/frontend/src/support/utils.ts
+++ b/frontend/src/support/utils.ts
@@ -10,9 +10,9 @@
  *
  * SPDX-License-Identifier: EPL-2.0
  ********************************************************************************/
-import { formatDate } from '@vueuse/core';
-import { ElNotification } from 'element-plus';
-import { h } from 'vue';
+import {formatDate} from '@vueuse/core';
+import {ElNotification} from 'element-plus';
+import {h} from 'vue';
 
 function nullOrUndefined(v: any) {
   return v === null || v === undefined;
@@ -79,7 +79,7 @@ export function prettyTime(number: number, format: string) {
   return format;
 }
 
-let hasUnclosedError = false
+let hasUnclosedError = false;
 
 export function showErrorNotification(errorCode: string, message: string) {
   if (hasUnclosedError) {
@@ -94,6 +94,6 @@ export function showErrorNotification(errorCode: string, message: string) {
     showClose: true,
     onClose() {
       hasUnclosedError = false;
-    },
+    }
   });
 }