feat: collection runner (#3600)

Co-authored-by: jamesgeorge007 <25279263+jamesgeorge007@users.noreply.github.com>
Co-authored-by: nivedin <nivedinp@gmail.com>

packages/hoppscotch-common/src/pages/graphql.vue

@@ -88,7 +88,6 @@ import { usePageHead } from "@composables/head"
 import { useI18n } from "@composables/i18n"
 import { useService } from "dioc/vue"
 import { computed, onBeforeUnmount, ref } from "vue"
-
 import { defineActionHandler } from "~/helpers/actions"
 import { connection, disconnect } from "~/helpers/graphql/connection"
 import { getDefaultGQLRequest } from "~/helpers/graphql/default"

packages/hoppscotch-common/src/pages/index.vue

@@ -18,7 +18,7 @@
             :is-removable="activeTabs.length > 1"
             :close-visibility="'hover'"
           >
-            <template #tabhead>
+            <template v-if="tab.document.type === 'request'" #tabhead>
               <HttpTabHead
                 :tab="tab"
                 :is-removable="activeTabs.length > 1"
@@ -44,16 +44,24 @@
                 </svg>
               </span>
             </template>
+            <HttpExampleResponseTab
+              v-if="tab.document.type === 'example-response'"
+              :model-value="tab"
+              @update:model-value="onTabUpdate"
+            />
+            <!-- Render TabContents -->
+            <HttpTestRunner
+              v-if="tab.document.type === 'test-runner'"
+              :model-value="tab"
+              @update:model-value="onTabUpdate"
+            />
+            <!-- When document.type === 'request' the tab type is HoppTab<HoppRequestDocument>-->
             <HttpRequestTab
               v-if="tab.document.type === 'request'"
               :model-value="tab"
               @update:model-value="onTabUpdate"
             />
-            <HttpExampleResponseTab
-              v-else-if="tab.document.type === 'example-response'"
-              :model-value="tab"
-              @update:model-value="onTabUpdate"
-            />
+            <!-- END Render TabContents -->
           </HoppSmartWindow>
           <template #actions>
             <EnvironmentsSelector class="h-full" />
@@ -211,9 +219,9 @@ const onTabUpdate = (tab: HoppTab<HoppRequestDocument>) => {
 
 const addNewTab = () => {
   const tab = tabs.createNewTab({
+    type: "request",
     request: getDefaultRESTRequest(),
     isDirty: false,
-    type: "request",
   })
 
   tabs.setActiveTab(tab.id)
@@ -222,6 +230,18 @@ const sortTabs = (e: { oldIndex: number; newIndex: number }) => {
   tabs.updateTabOrdering(e.oldIndex, e.newIndex)
 }
 
+const getTabName = (tab: HoppTab<HoppTabDocument>) => {
+  if (tab.document.type === "request") {
+    return tab.document.request.name
+  } else if (tab.document.type === "test-runner") {
+    return tab.document.collection.name
+  } else if (tab.document.type === "example-response") {
+    return tab.document.response.name
+  }
+
+  return "Unnamed tab"
+}
+
 const inspectionService = useService(InspectionService)
 
 const removeTab = (tabID: string) => {
@@ -255,9 +275,9 @@ const duplicateTab = (tabID: string) => {
   const tab = tabs.getTabRef(tabID)
   if (tab.value && tab.value.document.type === "request") {
     const newTab = tabs.createNewTab({
+      type: "request",
       request: cloneDeep(tab.value.document.request),
       isDirty: true,
-      type: "request",
     })
     tabs.setActiveTab(newTab.id)
   }
@@ -268,14 +288,6 @@ const onResolveConfirmCloseAllTabs = () => {
   confirmingCloseAllTabs.value = false
 }
 
-const getTabName = (tab: HoppTab<HoppTabDocument>) => {
-  if (tab.document.type === "request") {
-    return tab.document.request.name
-  } else if (tab.document.type === "example-response") {
-    return tab.document.response.name
-  }
-}
-
 const requestToRename = computed(() => {
   if (!renameTabID.value) return null
   const tab = tabs.getTabRef(renameTabID.value)
@@ -386,7 +398,10 @@ defineActionHandler("rest.request.open", ({ doc }) => {
   tabs.createNewTab(doc)
 })
 
-defineActionHandler("request.rename", openReqRenameModal)
+defineActionHandler("request.rename", () => {
+  if (tabs.currentActiveTab.value.document.type === "request")
+    openReqRenameModal(tabs.currentActiveTab.value.id)
+})
 defineActionHandler("tab.duplicate-tab", ({ tabID }) => {
   duplicateTab(tabID ?? currentTabID.value)
 })

packages/hoppscotch-common/src/pages/r/_id.vue

@@ -136,6 +136,7 @@ const addRequestToTab = () => {
     const request: unknown = JSON.parse(data.right.shortcode?.request as string)
 
     tabs.createNewTab({
+      type: "request",
       request: safelyExtractRESTRequest(request, getDefaultRESTRequest()),
       isDirty: false,
       type: "request",