fix: persist request execution context between tabs (#4284)

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

@@ -70,9 +70,11 @@
         :title="`${t(
           'action.send'
         )} <kbd>${getSpecialKey()}</kbd><kbd>↩</kbd>`"
-        :label="`${!loading ? t('action.send') : t('action.cancel')}`"
+        :label="`${
+          !isTabResponseLoading ? t('action.send') : t('action.cancel')
+        }`"
         class="min-w-[5rem] flex-1 rounded-r-none"
-        @click="!loading ? newSendRequest() : cancelRequest()"
+        @click="!isTabResponseLoading ? newSendRequest() : cancelRequest()"
       />
       <span class="flex">
         <tippy
@@ -238,7 +240,7 @@ import { useReadonlyStream, useStreamSubscriber } from "@composables/stream"
 import { useToast } from "@composables/toast"
 import { useVModel } from "@vueuse/core"
 import * as E from "fp-ts/Either"
-import { Ref, computed, ref, onUnmounted } from "vue"
+import { computed, ref, onUnmounted } from "vue"
 import { defineActionHandler, invokeAction } from "~/helpers/actions"
 import { runMutation } from "~/helpers/backend/GQLClient"
 import { UpdateRequestDocument } from "~/helpers/backend/graphql"
@@ -302,6 +304,10 @@ const curlText = ref("")
 
 const loading = ref(false)
 
+const isTabResponseLoading = computed(
+  () => tab.value.document.response?.type === "loading"
+)
+
 const showCurlImportModal = ref(false)
 const showCodegenModal = ref(false)
 const showSaveRequestModal = ref(false)
@@ -318,8 +324,6 @@ const saveRequestAction = ref<any | null>(null)
 
 const history = useReadonlyStream<RESTHistoryEntry[]>(restHistory$, [])
 
-const requestCancelFunc: Ref<(() => void) | null> = ref(null)
-
 const userHistories = computed(() => {
   return history.value.map((history) => history.request.endpoint).slice(0, 10)
 })
@@ -351,7 +355,8 @@ const newSendRequest = async () => {
   const [cancel, streamPromise] = runRESTRequest$(tab)
   const streamResult = await streamPromise
 
-  requestCancelFunc.value = cancel
+  tab.value.document.cancelFunction = cancel
+
   if (E.isRight(streamResult)) {
     subscribeToStream(
       streamResult.right,
@@ -441,7 +446,7 @@ onUnmounted(() => {
 
 const cancelRequest = () => {
   loading.value = false
-  requestCancelFunc.value?.()
+  tab.value.document.cancelFunction?.()
 
   updateRESTResponse(null)
 }

packages/hoppscotch-common/src/helpers/rest/document.ts

@@ -87,4 +87,9 @@ export type HoppRESTDocument = {
    * (if any)
    */
   inheritedProperties?: HoppInheritedProperty
+
+  /**
+   * The function responsible for cancelling the tab request call
+   */
+  cancelFunction?: () => void
 }

packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts

@@ -539,6 +539,7 @@ export const REST_TAB_STATE_SCHEMA = z
             responseTabPreference: z.optional(z.string()),
             optionTabPreference: z.optional(z.enum(validRestOperations)),
             inheritedProperties: z.optional(HoppInheritedPropertySchema),
+            cancelFunction: z.optional(z.function()),
           })
           .strict(),
       })