feat: tab service added (#3367)

packages/hoppscotch-common/src/components/collections/graphql/AddRequest.vue

@@ -36,11 +36,14 @@
 import { ref, watch } from "vue"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
-import { currentActiveTab } from "~/helpers/graphql/tab"
+import { useService } from "dioc/vue"
+import { GQLTabService } from "~/services/tab/graphql"
 
 const toast = useToast()
 const t = useI18n()
 
+const tabs = useService(GQLTabService)
+
 const props = defineProps<{
   show: boolean
   folderPath?: string
@@ -63,7 +66,7 @@ watch(
   () => props.show,
   (show) => {
     if (show) {
-      editingName.value = currentActiveTab.value?.document.request.name
+      editingName.value = tabs.currentActiveTab.value?.document.request.name
     }
   }
 )

packages/hoppscotch-common/src/components/collections/graphql/Collection.vue

@@ -220,7 +220,8 @@ import {
   moveGraphqlRequest,
 } from "~/newstore/collections"
 import { Picked } from "~/helpers/types/HoppPicked"
-import { getTabsRefTo } from "~/helpers/graphql/tab"
+import { useService } from "dioc/vue"
+import { GQLTabService } from "~/services/tab/graphql"
 
 const props = defineProps({
   picked: { type: Object, default: null },
@@ -235,6 +236,8 @@ const colorMode = useColorMode()
 const toast = useToast()
 const t = useI18n()
 
+const tabs = useService(GQLTabService)
+
 // TODO: improve types plz
 const emit = defineEmits<{
   (e: "select", i: Picked | null): void
@@ -295,7 +298,7 @@ const removeCollection = () => {
     emit("select", null)
   }
 
-  const possibleTabs = getTabsRefTo((tab) => {
+  const possibleTabs = tabs.getTabsRefTo((tab) => {
     const ctx = tab.document.saveContext
 
     if (!ctx) return false

packages/hoppscotch-common/src/components/collections/graphql/Folder.vue

@@ -203,12 +203,15 @@ import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
 import { removeGraphqlFolder, moveGraphqlRequest } from "~/newstore/collections"
 import { computed, ref } from "vue"
-import { getTabsRefTo } from "~/helpers/graphql/tab"
+import { useService } from "dioc/vue"
+import { GQLTabService } from "~/services/tab/graphql"
 
 const toast = useToast()
 const t = useI18n()
 const colorMode = useColorMode()
 
+const tabs = useService(GQLTabService)
+
 const props = defineProps({
   picked: { type: Object, default: null },
   // Whether the request is in a selectable mode (activates 'select' event)
@@ -277,7 +280,7 @@ const removeFolder = () => {
     emit("select", { picked: null })
   }
 
-  const possibleTabs = getTabsRefTo((tab) => {
+  const possibleTabs = tabs.getTabsRefTo((tab) => {
     const ctx = tab.document.saveContext
 
     if (!ctx) return false

packages/hoppscotch-common/src/components/collections/graphql/Request.vue

@@ -137,12 +137,8 @@ import { useToast } from "@composables/toast"
 import { HoppGQLRequest, makeGQLRequest } from "@hoppscotch/data"
 import { cloneDeep } from "lodash-es"
 import { removeGraphqlRequest } from "~/newstore/collections"
-import {
-  createNewTab,
-  getTabRefWithSaveContext,
-  currentTabID,
-  currentActiveTab,
-} from "~/helpers/graphql/tab"
+import { useService } from "dioc/vue"
+import { GQLTabService } from "~/services/tab/graphql"
 
 // Template refs
 const tippyActions = ref<any | null>(null)
@@ -154,6 +150,8 @@ const deleteAction = ref<any | null>(null)
 const t = useI18n()
 const toast = useToast()
 
+const tabs = useService(GQLTabService)
+
 const props = defineProps({
   // Whether the object is selected (show the tick mark)
   picked: { type: Object, default: null },
@@ -165,7 +163,7 @@ const props = defineProps({
 })
 
 const isActive = computed(() => {
-  const saveCtx = currentActiveTab.value?.document.saveContext
+  const saveCtx = tabs.currentActiveTab.value?.document.saveContext
 
   if (!saveCtx) return false
 
@@ -201,7 +199,7 @@ const selectRequest = () => {
   if (props.saveRequest) {
     pick()
   } else {
-    const possibleTab = getTabRefWithSaveContext({
+    const possibleTab = tabs.getTabRefWithSaveContext({
       originLocation: "user-collection",
       folderPath: props.folderPath,
       requestIndex: props.requestIndex,
@@ -209,11 +207,11 @@ const selectRequest = () => {
 
     // Switch to that request if that request is open
     if (possibleTab) {
-      currentTabID.value = possibleTab.value.id
+      tabs.setActiveTab(possibleTab.value.id)
       return
     }
 
-    createNewTab({
+    tabs.createNewTab({
       saveContext: {
         originLocation: "user-collection",
         folderPath: props.folderPath,
@@ -253,7 +251,7 @@ const removeRequest = () => {
   }
 
   // Detach the request from any of the tabs
-  const possibleTab = getTabRefWithSaveContext({
+  const possibleTab = tabs.getTabRefWithSaveContext({
     originLocation: "user-collection",
     folderPath: props.folderPath,
     requestIndex: props.requestIndex,

packages/hoppscotch-common/src/components/collections/graphql/index.vue

@@ -145,7 +145,8 @@ import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
 import { useColorMode } from "@composables/theming"
 import { platform } from "~/platform"
-import { createNewTab, currentActiveTab } from "~/helpers/graphql/tab"
+import { useService } from "dioc/vue"
+import { GQLTabService } from "~/services/tab/graphql"
 
 export default defineComponent({
   props: {
@@ -158,11 +159,13 @@ export default defineComponent({
     const collections = useReadonlyStream(graphqlCollections$, [], "deep")
     const colorMode = useColorMode()
     const t = useI18n()
+    const tabs = useService(GQLTabService)
 
     return {
       collections,
       colorMode,
       t,
+      tabs,
       IconPlus,
       IconHelpCircle,
       IconArchive,
@@ -267,13 +270,13 @@ export default defineComponent({
     },
     onAddRequest({ name, path, index }) {
       const newRequest = {
-        ...currentActiveTab.value.document.request,
+        ...this.tabs.currentActiveTab.value.document.request,
         name,
       }
 
       saveGraphqlRequestAs(path, newRequest)
 
-      createNewTab({
+      this.tabs.createNewTab({
         saveContext: {
           originLocation: "user-collection",
           folderPath: path,