Add an authorization tab for GraphQL (#2125)

Co-authored-by: Rishabh Agarwal <rishabh2001agarwal@gmail.com>
Co-authored-by: Rishabh Agarwal <45998880+RishabhAgarwal-2001@users.noreply.github.com>
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-app/newstore/GQLSession.ts

@@ -1,5 +1,10 @@
 import { distinctUntilChanged, pluck } from "rxjs/operators"
-import { GQLHeader, HoppGQLRequest, makeGQLRequest } from "@hoppscotch/data"
+import {
+  GQLHeader,
+  HoppGQLRequest,
+  makeGQLRequest,
+  HoppGQLAuth,
+} from "@hoppscotch/data"
 import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
 import { useStream } from "~/helpers/utils/composables"
 
@@ -26,6 +31,10 @@ export const defaultGQLSession: GQLSession = {
   }
 }
 `,
+    auth: {
+      authType: "none",
+      authActive: true,
+    },
   }),
   schema: "",
   response: "",
@@ -112,6 +121,14 @@ const dispatchers = defineDispatchers({
       response: newResponse,
     }
   },
+  setAuth(curr: GQLSession, { newAuth }: { newAuth: HoppGQLAuth }) {
+    return {
+      request: {
+        ...curr.request,
+        auth: newAuth,
+      },
+    }
+  },
 })
 
 export const gqlSessionStore = new DispatchingStore(
@@ -223,6 +240,15 @@ export function useGQLRequestName() {
   })
 }
 
+export function setGQLAuth(newAuth: HoppGQLAuth) {
+  gqlSessionStore.dispatch({
+    dispatcher: "setAuth",
+    payload: {
+      newAuth,
+    },
+  })
+}
+
 export const gqlName$ = gqlSessionStore.subject$.pipe(
   pluck("request", "name"),
   distinctUntilChanged()
@@ -248,3 +274,8 @@ export const gqlResponse$ = gqlSessionStore.subject$.pipe(
   pluck("response"),
   distinctUntilChanged()
 )
+
+export const gqlAuth$ = gqlSessionStore.subject$.pipe(
+  pluck("request", "auth"),
+  distinctUntilChanged()
+)

packages/hoppscotch-app/newstore/history.ts

@@ -5,6 +5,7 @@ import {
   translateToNewRequest,
   HoppGQLRequest,
   translateToGQLRequest,
+  GQL_REQ_SCHEMA_VERSION,
 } from "@hoppscotch/data"
 import DispatchingStore, { defineDispatchers } from "./DispatchingStore"
 import { completedRESTResponse$ } from "./RESTSession"
@@ -83,10 +84,12 @@ export function translateToNewRESTHistory(x: any): RESTHistoryEntry {
 }
 
 export function translateToNewGQLHistory(x: any): GQLHistoryEntry {
-  if (x.v === 1) return x
+  if (x.v === 1 && x.request.v === GQL_REQ_SCHEMA_VERSION) return x
 
   // Legacy
-  const request = translateToGQLRequest(x)
+  const request = x.request
+    ? translateToGQLRequest(x.request)
+    : translateToGQLRequest(x)
   const star = x.star ?? false
   const response = x.response ?? ""
   const updatedOn = x.updatedOn ?? ""