refactor: persist running requests while switching tabs (#3742)

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

@@ -237,7 +237,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, onBeforeUnmount, ref } from "vue"
+import { Ref, computed, ref, onUnmounted } from "vue"
 import { defineActionHandler, invokeAction } from "~/helpers/actions"
 import { runMutation } from "~/helpers/backend/GQLClient"
 import { UpdateRequestDocument } from "~/helpers/backend/graphql"
@@ -322,6 +322,10 @@ const userHistories = computed(() => {
   return history.value.map((history) => history.request.endpoint).slice(0, 10)
 })
 
+const inspectionService = useService(InspectionService)
+
+const tabs = useService(RESTTabService)
+
 const newSendRequest = async () => {
   if (newEndpoint.value === "" || /^\s+$/.test(newEndpoint.value)) {
     toast.error(`${t("empty.endpoint")}`)
@@ -422,6 +426,17 @@ function isCURL(curl: string) {
   return curl.includes("curl ")
 }
 
+const currentTabID = tabs.currentTabID.value
+
+onUnmounted(() => {
+  //check if current tab id exist in the current tab id lists
+  const isCurrentTabRemoved = !tabs
+    .getActiveTabs()
+    .value.some((tab) => tab.id === currentTabID)
+
+  if (isCurrentTabRemoved) cancelRequest()
+})
+
 const cancelRequest = () => {
   loading.value = false
   requestCancelFunc.value?.()
@@ -553,10 +568,6 @@ const saveRequest = () => {
 
 const request = ref<HoppRESTRequest | null>(null)
 
-onBeforeUnmount(() => {
-  if (loading.value) cancelRequest()
-})
-
 defineActionHandler("request.send-cancel", () => {
   if (!loading.value) newSendRequest()
   else cancelRequest()
@@ -607,8 +618,5 @@ const isCustomMethod = computed(() => {
 
 const COLUMN_LAYOUT = useSetting("COLUMN_LAYOUT")
 
-const inspectionService = useService(InspectionService)
-
-const tabs = useService(RESTTabService)
 const tabResults = inspectionService.getResultViewFor(tabs.currentTabID.value)
 </script>

packages/hoppscotch-common/src/helpers/RequestRunner.ts

@@ -154,6 +154,9 @@ export function runRESTRequest$(
           )
 
           if (E.isRight(runResult)) {
+            // set the response in the tab so that multiple tabs can run request simultaneously
+            tab.value.document.response = res
+
             tab.value.document.testResults = translateToSandboxTestResults(
               runResult.right
             )