feat(common): show full request path in tab tooltip (#5750)

Co-authored-by: Code3B <97300790+code3b@users.noreply.github.com>

packages/hoppscotch-common/src/components/http/TabHead.vue

@@ -1,7 +1,7 @@
 <template>
   <div
-    v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
-    :title="tabState.name"
+    v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
+    :title="tabTooltip"
     class="flex items-center truncate px-2"
     @dblclick="emit('open-rename-modal')"
     @contextmenu.prevent="options?.tippy?.show()"
@@ -124,6 +124,7 @@ import {
   HoppRequestDocument,
   HoppSavedExampleDocument,
 } from "~/helpers/rest/document"
+import { restCollectionStore } from "~/newstore/collections"
 
 const t = useI18n()
 
@@ -151,6 +152,70 @@ const isResponseExample = computed(() => {
   return props.tab.document.type === "example-response"
 })
 
+const requestPath = computed(() => {
+  if (props.tab.document.type !== "request" || !props.tab.document.saveContext)
+    return null
+
+  const ctx = props.tab.document.saveContext
+
+  if (
+    ctx.originLocation === "user-collection" &&
+    "folderPath" in ctx &&
+    ctx.folderPath
+  ) {
+    try {
+      const folderIndices = ctx.folderPath.split("/").map((x) => parseInt(x))
+      const pathItems: string[] = []
+
+      let currentFolder =
+        restCollectionStore.value.state[folderIndices.shift()!]
+      if (currentFolder) {
+        pathItems.push(currentFolder.name)
+
+        while (folderIndices.length > 0) {
+          const folderIndex = folderIndices.shift()!
+          const folder = currentFolder.folders[folderIndex]
+          if (folder) {
+            pathItems.push(folder.name)
+            currentFolder = folder
+          }
+        }
+      }
+      return pathItems.join(" / ")
+    } catch (e) {
+      console.error(e)
+      return null
+    }
+  }
+  return null
+})
+
+const escapeHtml = (text: string) => {
+  return text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;")
+}
+
+const tabTooltip = computed(() => {
+  if (requestPath.value) {
+    const lines: string[] = [
+      escapeHtml(tabState.value.name),
+      escapeHtml(requestPath.value),
+    ]
+
+    const endpoint = tabState.value.request?.endpoint
+    if (endpoint) {
+      lines.push(escapeHtml(endpoint))
+    }
+
+    return `<div class="text-left font-normal">${lines.join("<br>")}</div>`
+  }
+  return escapeHtml(tabState.value.name)
+})
+
 const emit = defineEmits<{
   (event: "open-rename-modal"): void
   (event: "close-tab"): void