refactor: persist request handle under tab saveContext

Bump vue version.

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

@@ -1,7 +1,7 @@
 <template>
   <div
     v-tippy="{ theme: 'tooltip', delay: [500, 20] }"
-    :title="tab.document.request.name"
+    :title="tabDocument.request.name"
     class="flex items-center truncate px-2"
     @dblclick="emit('open-rename-modal')"
     @contextmenu.prevent="options?.tippy?.show()"
@@ -9,9 +9,9 @@
   >
     <span
       class="text-tiny font-semibold mr-2"
-      :style="{ color: getMethodLabelColorClassOf(tab.document.request) }"
+      :style="{ color: getMethodLabelColorClassOf(tabDocument.request) }"
     >
-      {{ tab.document.request.method }}
+      {{ tabDocument.request.method }}
     </span>
     <tippy
       ref="options"
@@ -21,7 +21,7 @@
       :on-shown="() => tippyActions!.focus()"
     >
       <span class="truncate">
-        {{ tab.document.request.name }}
+        {{ tabDocument.request.name }}
       </span>
       <template #content="{ hide }">
         <div
@@ -104,7 +104,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue"
+import { ComputedRef, ref, watch } from "vue"
 import { TippyComponent } from "vue-tippy"
 import { getMethodLabelColorClassOf } from "~/helpers/rest/labelColoring"
 import { useI18n } from "~/composables/i18n"
@@ -115,10 +115,13 @@ import IconCopy from "~icons/lucide/copy"
 import IconShare2 from "~icons/lucide/share-2"
 import { HoppTab } from "~/services/tab"
 import { HoppRESTDocument } from "~/helpers/rest/document"
+import { computed } from "vue"
+import { HandleRef } from "~/services/new-workspace/handle"
+import { WorkspaceRequest } from "~/services/new-workspace/workspace"
 
 const t = useI18n()
 
-defineProps<{
+const props = defineProps<{
   tab: HoppTab<HoppRESTDocument>
   isRemovable: boolean
 }>()
@@ -139,4 +142,40 @@ const closeAction = ref<HTMLButtonElement | null>(null)
 const closeOthersAction = ref<HTMLButtonElement | null>(null)
 const duplicateAction = ref<HTMLButtonElement | null>(null)
 const shareRequestAction = ref<HTMLButtonElement | null>(null)
+const tabDocument = ref<HoppRESTDocument>(props.tab.document)
+
+const requestHandleForCurrentTab = computed(() => {
+  return props.tab.document.saveContext?.originLocation ===
+    "workspace-user-collection"
+    ? props.tab.document.saveContext.requestHandle
+    : undefined
+}) as ComputedRef<HandleRef<WorkspaceRequest>["value"] | undefined>
+
+watch(
+  requestHandleForCurrentTab,
+  (newRequestHandleState) => {
+    if (!newRequestHandleState) {
+      return
+    }
+
+    if (newRequestHandleState.type !== "ok") {
+      return
+    }
+
+    if (
+      tabDocument.value.request.name !== newRequestHandleState.data.request.name
+    ) {
+      tabDocument.value.request.name = newRequestHandleState.data.request.name
+    }
+  },
+  { deep: true }
+)
+
+watch(
+  props.tab.document,
+  (newTabDocument) => {
+    ;(tabDocument.value as HoppRESTDocument) = newTabDocument
+  },
+  { deep: true }
+)
 </script>

packages/hoppscotch-common/src/components/new-collections/rest/index.vue

@@ -616,17 +616,6 @@ const onRemoveRequest = async () => {
     possibleTab.value.document.isDirty = true
   }
 
-  const { collectionID, requestID } = requestHandle.value.data
-  const requestIndex = parseInt(requestID.split("/").slice(-1)[0])
-
-  // The same function is used to reorder requests since after removing, it's basically doing reorder
-  resolveSaveContextOnRequestReorder({
-    lastIndex: requestIndex,
-    newIndex: -1,
-    folderPath: collectionID,
-    length: getRequestsByPath(restCollectionState.value, collectionID).length,
-  })
-
   toast.success(t("state.deleted"))
   displayConfirmModal(false)
 }
@@ -668,8 +657,6 @@ const selectRequest = async (requestIndexPath: string) => {
     return
   }
 
-  const request = requestHandle.value.data.request
-
   // If there is a request with this save context, switch into it
   let possibleTab = null
 
@@ -701,7 +688,7 @@ const selectRequest = async (requestIndexPath: string) => {
   } else {
     // If not, open the request in a new tab
     tabs.createNewTab({
-      request: cloneDeep(request),
+      request: cloneDeep(requestHandle.value.data.request),
       isDirty: false,
       saveContext: {
         originLocation: "workspace-user-collection",

packages/hoppscotch-common/src/services/new-workspace/providers/personal.workspace.ts

@@ -53,6 +53,7 @@ import {
 import { HoppGQLHeader } from "~/helpers/graphql"
 import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
 import { computedAsync } from "@vueuse/core"
+import { merge } from "lodash-es"
 
 export class PersonalWorkspaceProviderService
   extends Service
@@ -231,10 +232,7 @@ export class PersonalWorkspaceProviderService
       collectionID.split("/").map((id) => parseInt(id))
     )
 
-    const newCollection = {
-      ...collection,
-      ...updatedCollection,
-    }
+    const newCollection = merge(collection, updatedCollection)
 
     const isRootCollection = collectionID.split("/").length === 1
 
@@ -403,10 +401,7 @@ export class PersonalWorkspaceProviderService
     const { collectionID, requestID, request } = requestHandle.value.data
 
     try {
-      const newRequest: HoppRESTRequest = {
-        ...request,
-        ...updatedRequest,
-      }
+      const newRequest: HoppRESTRequest = merge(request, updatedRequest)
       const requestIndex = parseInt(requestID)
       editRESTRequest(collectionID, requestIndex, newRequest)