feat: tab service added (#3367)

packages/hoppscotch-common/src/components/graphql/RequestOptions.vue

@@ -58,8 +58,7 @@ import { computed, ref, watch } from "vue"
 import { defineActionHandler } from "~/helpers/actions"
 import { HoppGQLRequest } from "@hoppscotch/data"
 import { platform } from "~/platform"
-import { currentActiveTab } from "~/helpers/graphql/tab"
-import { computedWithControl } from "@vueuse/core"
+import { computedWithControl, useVModel } from "@vueuse/core"
 import {
   GQLResponseEvent,
   runGQLOperation,
@@ -68,26 +67,39 @@ import {
 import { useService } from "dioc/vue"
 import { InterceptorService } from "~/services/interceptor.service"
 import { editGraphqlRequest } from "~/newstore/collections"
+import { GQLTabService } from "~/services/tab/graphql"
+
+const VALID_GQL_OPERATIONS = [
+  "query",
+  "headers",
+  "variables",
+  "authorization",
+] as const
+
+export type GQLOptionTabs = (typeof VALID_GQL_OPERATIONS)[number]
 
-export type GQLOptionTabs = "query" | "headers" | "variables" | "authorization"
-const selectedOptionTab = ref<GQLOptionTabs>("query")
 const interceptorService = useService(InterceptorService)
 
 const t = useI18n()
 const toast = useToast()
 
+const tabs = useService(GQLTabService)
+
 // v-model integration with props and emit
 const props = withDefaults(
   defineProps<{
     modelValue: HoppGQLRequest
     response?: GQLResponseEvent[] | null
+    optionTab?: GQLOptionTabs
     tabId: string
   }>(),
   {
     response: null,
+    optionTab: "query",
   }
 )
 const emit = defineEmits(["update:modelValue", "update:response"])
+const selectedOptionTab = useVModel(props, "optionTab", emit)
 
 const request = ref(props.modelValue)
 
@@ -100,8 +112,8 @@ watch(
 )
 
 const url = computedWithControl(
-  () => currentActiveTab.value,
-  () => currentActiveTab.value.document.request.url
+  () => tabs.currentActiveTab.value,
+  () => tabs.currentActiveTab.value.document.request.url
 )
 
 const activeGQLHeadersCount = computed(
@@ -185,17 +197,17 @@ const hideRequestModal = () => {
 }
 const saveRequest = () => {
   if (
-    currentActiveTab.value.document.saveContext &&
-    currentActiveTab.value.document.saveContext.originLocation ===
+    tabs.currentActiveTab.value.document.saveContext &&
+    tabs.currentActiveTab.value.document.saveContext.originLocation ===
       "user-collection"
   ) {
     editGraphqlRequest(
-      currentActiveTab.value.document.saveContext.folderPath,
-      currentActiveTab.value.document.saveContext.requestIndex,
-      currentActiveTab.value.document.request
+      tabs.currentActiveTab.value.document.saveContext.folderPath,
+      tabs.currentActiveTab.value.document.saveContext.requestIndex,
+      tabs.currentActiveTab.value.document.request
     )
 
-    currentActiveTab.value.document.isDirty = false
+    tabs.currentActiveTab.value.document.isDirty = false
   } else {
     showSaveRequestModal.value = true
   }