From 7d83787ff820460eed2222b43b669fecfb216157 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   | 18 ++++++++++++++-
 .../views/connections/ConnectionsDetail.vue   | 23 ++++++++++++++++---
 2 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/src/views/connections/ConnectionsDetail.vue b/src/views/connections/ConnectionsDetail.vue
index 89d7edd219..1d40fba920 100644
--- a/src/views/connections/ConnectionsDetail.vue
+++ b/src/views/connections/ConnectionsDetail.vue
@@ -31,15 +31,19 @@
               </a>
             </el-tooltip>
             <el-tooltip
+              v-if="showTitleTooltip"
               :effect="theme !== 'light' ? 'light' : 'dark'"
               :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>
+            <h2 v-else ref="title" :class="[{ offline: !client.connected }, 'title-name']">
+                {{ titleName }}
+            </h2>
             <a
               href="javascript:;"
               :class="['collapse-btn', showClientInfo ? 'top' : 'bottom']"
@@ -439,6 +443,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 +572,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 fe0e7e6d03..64112369be 100644
--- a/web/src/views/connections/ConnectionsDetail.vue
+++ b/web/src/views/connections/ConnectionsDetail.vue
@@ -5,15 +5,19 @@
         <div class="topbar">
           <div class="connection-head">
             <el-tooltip
+              v-if="showTitleTooltip"
               :effect="theme !== 'light' ? 'light' : 'dark'"
               :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>
+            <h2 v-else ref="title" :class="[{ offline: !client.connected }, 'title-name']">
+              {{ titleName }}
+            </h2>
             <a
               href="javascript:;"
               :class="['collapse-btn', showClientInfo ? 'top' : 'bottom']"
@@ -278,9 +282,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 +308,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 +521,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:
       | {