feat: tab service added (#3367)

packages/hoppscotch-common/src/components/history/graphql/Card.vue

@@ -67,9 +67,11 @@ import IconMaximize2 from "~icons/lucide/maximize-2"
 
 import { useI18n } from "@composables/i18n"
 import { makeGQLRequest } from "@hoppscotch/data"
-import { createNewTab } from "~/helpers/graphql/tab"
+import { useService } from "dioc/vue"
+import { GQLTabService } from "~/services/tab/graphql"
 
 const t = useI18n()
+const tabs = useService(GQLTabService)
 
 const props = defineProps<{
   entry: GQLHistoryEntry
@@ -93,7 +95,7 @@ const query = computed(() =>
 )
 
 const useEntry = () => {
-  createNewTab({
+  tabs.createNewTab({
     request: makeGQLRequest({
       name: props.entry.request.name,
       url: props.entry.request.url,

packages/hoppscotch-common/src/components/history/index.vue

@@ -176,8 +176,9 @@ import {
 
 import HistoryRestCard from "./rest/Card.vue"
 import HistoryGraphqlCard from "./graphql/Card.vue"
-import { createNewTab } from "~/helpers/rest/tab"
 import { defineActionHandler, invokeAction } from "~/helpers/actions"
+import { useService } from "dioc/vue"
+import { RESTTabService } from "~/services/tab/rest"
 
 type HistoryEntry = GQLHistoryEntry | RESTHistoryEntry
 
@@ -293,8 +294,9 @@ const clearHistory = () => {
 
 // NOTE: For GQL, the HistoryGraphqlCard component already implements useEntry
 // (That is not a really good behaviour tho ¯\_(ツ)_/¯)
+const tabs = useService(RESTTabService)
 const useHistory = (entry: RESTHistoryEntry) => {
-  createNewTab({
+  tabs.createNewTab({
     request: entry.request,
     isDirty: false,
   })