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/components/graphql/RequestOptions.vue

@@ -260,6 +260,9 @@
           </div>
         </div>
       </SmartTab>
+      <SmartTab :id="'authorization'" :label="`${t('tab.authorization')}`">
+        <GraphqlAuthorization />
+      </SmartTab>
     </SmartTabs>
     <CollectionsSaveRequest
       mode="graphql"
@@ -296,11 +299,13 @@ import {
   useToast,
 } from "~/helpers/utils/composables"
 import {
+  gqlAuth$,
   gqlHeaders$,
   gqlQuery$,
   gqlResponse$,
   gqlURL$,
   gqlVariables$,
+  setGQLAuth,
   setGQLHeaders,
   setGQLQuery,
   setGQLResponse,
@@ -353,6 +358,12 @@ useCodemirror(bulkEditor, bulkHeaders, {
 // The functional headers list (the headers actually in the system)
 const headers = useStream(gqlHeaders$, [], setGQLHeaders) as Ref<GQLHeader[]>
 
+const auth = useStream(
+  gqlAuth$,
+  { authType: "none", authActive: true },
+  setGQLAuth
+)
+
 // The UI representation of the headers list (has the empty end header)
 const workingHeaders = ref<Array<GQLHeader & { id: number }>>([
   {
@@ -602,12 +613,14 @@ const runQuery = async () => {
     const runHeaders = clone(headers.value)
     const runQuery = clone(gqlQueryString.value)
     const runVariables = clone(variableString.value)
+    const runAuth = clone(auth.value)
 
     const responseText = await props.conn.runQuery(
       runURL,
       runHeaders,
       runQuery,
-      runVariables
+      runVariables,
+      runAuth
     )
     const duration = Date.now() - startTime
 
@@ -623,6 +636,7 @@ const runQuery = async () => {
           query: runQuery,
           headers: runHeaders,
           variables: runVariables,
+          auth: runAuth,
         }),
         response: response.value,
         star: false,