From 8285b8a91ee74d74ee1a873aa1211aa7ce01183f Mon Sep 17 00:00:00 2001
From: XL-YiBai <lei.xia@emqx.io>
Date: Thu, 18 Jul 2024 11:24:32 +0800
Subject: [PATCH] feat(desktop & web): display el-tooltip only when the
 connection name is too long

---
 src/views/connections/ConnectionsDetail.vue   | 17 ++++++++++++--
 .../views/connections/ConnectionsDetail.vue   | 22 +++++++++++++++----
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/views/connections/ConnectionsDetail.vue b/src/views/connections/ConnectionsDetail.vue
index 89d7edd21..295ba2089 100644
--- a/src/views/connections/ConnectionsDetail.vue
+++ b/src/views/connections/ConnectionsDetail.vue
@@ -31,12 +31,13 @@
               </a>
             </el-tooltip>
             <el-tooltip
+              :disabled="!showTitleTooltip"
               :effect="theme !== 'light' ? 'light' : 'dark'"
-              :content="`${titleName}`"
+              :content="titleName"
               :open-delay="500"
               placement="top"
             >
-              <h2 :class="[ { offline: !client.connected }, 'title-name' ]">
+              <h2 ref="title" :class="[{ offline: !client.connected }, 'title-name']">
                 {{ titleName }}
               </h2>
             </el-tooltip>
@@ -439,6 +440,7 @@ export default class ConnectionsDetail extends Vue {
   private showImportData = false
   private showTimedMessage = false
   private showUseScript = false
+  private showTitleTooltip = false
 
   private connectLoading = false
   private disconnectLoding = false
@@ -567,6 +569,17 @@ export default class ConnectionsDetail extends Vue {
     }, 500)
   }
 
+  @Watch('titleName')
+  private async checkTitleOverflow() {
+    await this.$nextTick()
+    const titleElement = this.$refs.title as HTMLElement
+    if (titleElement?.scrollWidth > 200) {
+      this.showTitleTooltip = true
+    } else {
+      this.showTitleTooltip = false
+    }
+  }
+
   private checkScriptOption(optionName: 'function' | 'schema', optionMethod: 'received' | 'publish') {
     const applyOption: any = this.scriptOption?.apply
     const optionNameExists = Boolean(this.scriptOption?.[optionName]?.name)
diff --git a/web/src/views/connections/ConnectionsDetail.vue b/web/src/views/connections/ConnectionsDetail.vue
index fe0e7e6d0..746aae64d 100644
--- a/web/src/views/connections/ConnectionsDetail.vue
+++ b/web/src/views/connections/ConnectionsDetail.vue
@@ -5,12 +5,13 @@
         <div class="topbar">
           <div class="connection-head">
             <el-tooltip
+              :disabled="!showTitleTooltip"
               :effect="theme !== 'light' ? 'light' : 'dark'"
-              :content="`${titleName}`"
+              :content="titleName"
               :open-delay="500"
               placement="top"
             >
-              <h2 :class="[ { offline: !client.connected }, 'title-name' ]">
+              <h2 ref="title" :class="[{ offline: !client.connected }, 'title-name']">
                 {{ titleName }}
               </h2>
             </el-tooltip>
@@ -278,9 +279,12 @@ export default class ConnectionsDetail extends Vue {
   }
 
   private showSubs = true
+  private showClientInfo = true
+  private showContextmenu: boolean = false
+  private showTitleTooltip = false
+
   private largeDesktop = false
   private screenWidth = document.body.clientWidth
-  private showClientInfo = true
   private connectLoading = false
   private disconnectLoding = false
   private isReconnect = false
@@ -301,7 +305,6 @@ export default class ConnectionsDetail extends Vue {
   private messageListMarginTop: number = 19
   private messagesAddedNewItem: boolean = false
   private activeTopic = ''
-  private showContextmenu: boolean = false
   private selectedMessage: MessageModel | null = null
   private contextmenuConfig: ContextmenuModel = {
     top: 0,
@@ -515,6 +518,17 @@ export default class ConnectionsDetail extends Vue {
     }, 500)
   }
 
+  @Watch('titleName')
+  private async checkTitleOverflow() {
+    await this.$nextTick()
+    const titleElement = this.$refs.title as HTMLElement
+    if (titleElement?.scrollWidth > 200) {
+      this.showTitleTooltip = true
+    } else {
+      this.showTitleTooltip = false
+    }
+  }
+
   private getConnectionValue(id: string) {
     const currentActiveConnection:
       | {