From c332808fe4250e17f8085da777e95346c8fb9153 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Fri, 1 Oct 2021 13:46:22 +0530
Subject: [PATCH 01/17] feat: initial setup of new backend comms

---
 .../hoppscotch-app/components/teams/index.vue |  57 ++++--
 .../helpers/backend/GQLClient.ts              | 165 ++++++++++++++++++
 .../helpers/backend/QueryErrors.ts            |   3 +
 .../helpers/backend/types/TeamMemberRole.ts   |   1 +
 .../helpers/backend/types/TeamName.ts         |  13 ++
 packages/hoppscotch-app/helpers/fb/auth.ts    |   4 +
 packages/hoppscotch-app/package.json          |   5 +
 pnpm-lock.yaml                                |  40 ++++-
 8 files changed, 273 insertions(+), 15 deletions(-)
 create mode 100644 packages/hoppscotch-app/helpers/backend/GQLClient.ts
 create mode 100644 packages/hoppscotch-app/helpers/backend/QueryErrors.ts
 create mode 100644 packages/hoppscotch-app/helpers/backend/types/TeamMemberRole.ts
 create mode 100644 packages/hoppscotch-app/helpers/backend/types/TeamName.ts

diff --git a/packages/hoppscotch-app/components/teams/index.vue b/packages/hoppscotch-app/components/teams/index.vue
index 64c9e501d..82636de4f 100644
--- a/packages/hoppscotch-app/components/teams/index.vue
+++ b/packages/hoppscotch-app/components/teams/index.vue
@@ -18,25 +18,29 @@
         @click.native="displayModalAdd(true)"
       />
       <div
-        v-if="myTeamsLoading"
+        v-if="myTeams.loading"
         class="flex flex-col items-center justify-center"
       >
         <SmartSpinner class="mb-4" />
         <span class="text-secondaryLight">{{ $t("state.loading") }}</span>
       </div>
       <div
-        v-if="!myTeamsLoading && myTeams.myTeams.length === 0"
+        v-if="
+          !myTeams.loading &&
+          E.isRight(myTeams.data) &&
+          myTeams.data.right.myTeams.length === 0
+        "
         class="flex items-center"
       >
         <i class="mr-4 material-icons">help_outline</i>
         {{ $t("empty.teams") }}
       </div>
       <div
-        v-else-if="!myTeamsLoading && !isApolloError(myTeams)"
+        v-else-if="!myTeams.loading && E.isRight(myTeams.data)"
         class="grid gap-4 sm:grid-cols-2 md:grid-cols-3"
       >
         <TeamsTeam
-          v-for="(team, index) in myTeams.myTeams"
+          v-for="(team, index) in myTeams.data.right.myTeams"
           :key="`team-${String(index)}`"
           :team-i-d="team.id"
           :team="team"
@@ -47,8 +51,12 @@
     <TeamsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
     <!-- ¯\_(ツ)_/¯ -->
     <TeamsEdit
-      v-if="!myTeamsLoading && myTeams.myTeams.length > 0"
-      :team="myTeams.myTeams[0]"
+      v-if="
+        !myTeams.loading &&
+        E.isRight(myTeams.data) &&
+        myTeams.data.right.myTeams.length > 0
+      "
+      :team="myTeams.data.right.myTeams[0]"
       :show="showModalEdit"
       :editing-team="editingTeam"
       :editingteam-i-d="editingTeamID"
@@ -59,16 +67,38 @@
 
 <script setup lang="ts">
 import { gql } from "@apollo/client/core"
-import { ref } from "@nuxtjs/composition-api"
-import { useGQLQuery, isApolloError } from "~/helpers/apollo"
+import { ref, watchEffect } from "@nuxtjs/composition-api"
+import * as E from "fp-ts/Either"
+import { useGQLQuery } from "~/helpers/backend/GQLClient"
+import { MyTeamsQueryError } from "~/helpers/backend/QueryErrors"
+import { TeamMemberRole } from "~/helpers/backend/types/TeamMemberRole"
 
 const showModalAdd = ref(false)
 const showModalEdit = ref(false)
 const editingTeam = ref<any>({}) // TODO: Check this out
 const editingTeamID = ref<any>("")
 
-const { loading: myTeamsLoading, data: myTeams } = useGQLQuery({
-  query: gql`
+const myTeams = useGQLQuery<
+  {
+    myTeams: Array<{
+      id: string
+      name: string
+      myRole: TeamMemberRole
+      ownersCount: number
+      members: Array<{
+        user: {
+          photoURL: string | null
+          displayName: string
+          email: string
+          uid: string
+        }
+        role: TeamMemberRole
+      }>
+    }>
+  },
+  MyTeamsQueryError
+>(
+  gql`
     query GetMyTeams {
       myTeams {
         id
@@ -86,8 +116,11 @@ const { loading: myTeamsLoading, data: myTeams } = useGQLQuery({
         }
       }
     }
-  `,
-  pollInterval: 10000,
+  `
+)
+
+watchEffect(() => {
+  console.log(myTeams)
 })
 
 const displayModalAdd = (shouldDisplay: boolean) => {
diff --git a/packages/hoppscotch-app/helpers/backend/GQLClient.ts b/packages/hoppscotch-app/helpers/backend/GQLClient.ts
new file mode 100644
index 000000000..006465542
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/backend/GQLClient.ts
@@ -0,0 +1,165 @@
+import {
+  computed,
+  ref,
+  onMounted,
+  onBeforeUnmount,
+  reactive,
+  Ref,
+} from "@nuxtjs/composition-api"
+import { DocumentNode } from "graphql/language"
+import {
+  createClient,
+  TypedDocumentNode,
+  OperationResult,
+  defaultExchanges,
+} from "@urql/core"
+import { devtoolsExchange } from "@urql/devtools"
+import * as E from "fp-ts/Either"
+import { pipe } from "fp-ts/function"
+import { subscribe } from "wonka"
+import clone from "lodash/clone"
+import { getAuthIDToken } from "~/helpers/fb/auth"
+
+const BACKEND_GQL_URL =
+  process.env.CONTEXT === "production"
+    ? "https://api.hoppscotch.io/graphql"
+    : "https://api.hoppscotch.io/graphql"
+
+const client = createClient({
+  url: BACKEND_GQL_URL,
+  fetchOptions: () => {
+    const token = getAuthIDToken()
+
+    return {
+      headers: {
+        authorization: token ? `Bearer ${token}` : "",
+      },
+    }
+  },
+  exchanges: [devtoolsExchange, ...defaultExchanges],
+})
+
+/**
+ * A wrapper type for defining errors possible in a GQL operation
+ */
+export type GQLError<T extends string> =
+  | {
+      type: "network_error"
+      error: Error
+    }
+  | {
+      type: "gql_error"
+      err: T
+    }
+
+const DEFAULT_QUERY_OPTIONS = {
+  noPolling: false,
+  pause: undefined as Ref<boolean> | undefined,
+}
+
+type GQL_QUERY_OPTIONS = typeof DEFAULT_QUERY_OPTIONS
+
+type UseQueryLoading = {
+  loading: true
+}
+
+type UseQueryLoaded<
+  QueryFailType extends string = "",
+  QueryReturnType = any
+> = {
+  loading: false
+  data: E.Either<GQLError<QueryFailType>, QueryReturnType>
+}
+
+type UseQueryReturn<QueryFailType extends string = "", QueryReturnType = any> =
+  | UseQueryLoading
+  | UseQueryLoaded<QueryFailType, QueryReturnType>
+
+export function isLoadedGQLQuery<QueryFailType extends string, QueryReturnType>(
+  x: UseQueryReturn<QueryFailType, QueryReturnType>
+): x is {
+  loading: false
+  data: E.Either<GQLError<QueryFailType>, QueryReturnType>
+} {
+  return !x.loading
+}
+
+export function useGQLQuery<
+  QueryReturnType = any,
+  QueryFailType extends string = "",
+  QueryVariables extends object = {}
+>(
+  query: string | DocumentNode | TypedDocumentNode<any, QueryVariables>,
+  variables?: QueryVariables,
+  options: Partial<GQL_QUERY_OPTIONS> = DEFAULT_QUERY_OPTIONS
+):
+  | { loading: false; data: E.Either<GQLError<QueryFailType>, QueryReturnType> }
+  | { loading: true } {
+  type DataType = E.Either<GQLError<QueryFailType>, QueryReturnType>
+
+  const finalOptions = Object.assign(clone(DEFAULT_QUERY_OPTIONS), options)
+
+  const data = ref<DataType>()
+
+  let subscription: { unsubscribe(): void } | null = null
+
+  onMounted(() => {
+    const gqlQuery = client.query<any, QueryVariables>(query, variables)
+
+    const processResult = (result: OperationResult<any, QueryVariables>) =>
+      pipe(
+        // The target
+        result.data as QueryReturnType | undefined,
+        // Define what happens if data does not exist (it is an error)
+        E.fromNullable(
+          pipe(
+            // Take the network error value
+            result.error?.networkError,
+            // If it null, set the left to the generic error name
+            E.fromNullable(result.error?.name),
+            E.match(
+              // The left case (network error was null)
+              (gqlErr) =>
+                <GQLError<QueryFailType>>{
+                  type: "gql_error",
+                  err: gqlErr as QueryFailType,
+                },
+              // The right case (it was a GraphQL Error)
+              (networkErr) =>
+                <GQLError<QueryFailType>>{
+                  type: "network_error",
+                  error: networkErr,
+                }
+            )
+          )
+        )
+      )
+
+    if (finalOptions.noPolling) {
+      gqlQuery.toPromise().then((result) => {
+        data.value = processResult(result)
+      })
+    } else {
+      subscription = pipe(
+        gqlQuery,
+        subscribe((result) => {
+          data.value = processResult(result)
+        })
+      )
+    }
+  })
+
+  onBeforeUnmount(() => {
+    subscription?.unsubscribe()
+  })
+
+  return reactive({
+    loading: computed(() => !data.value),
+    data: data!,
+  }) as
+    | {
+        loading: false
+        data: DataType
+      }
+    | { loading: true }
+}
diff --git a/packages/hoppscotch-app/helpers/backend/QueryErrors.ts b/packages/hoppscotch-app/helpers/backend/QueryErrors.ts
new file mode 100644
index 000000000..37d1963f8
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/backend/QueryErrors.ts
@@ -0,0 +1,3 @@
+export type UserQueryError = "user/not_found"
+
+export type MyTeamsQueryError = "ea/not_invite_or_admin"
diff --git a/packages/hoppscotch-app/helpers/backend/types/TeamMemberRole.ts b/packages/hoppscotch-app/helpers/backend/types/TeamMemberRole.ts
new file mode 100644
index 000000000..a98db8c4c
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/backend/types/TeamMemberRole.ts
@@ -0,0 +1 @@
+export type TeamMemberRole = "OWNER" | "EDITOR" | "VIEWER"
\ No newline at end of file
diff --git a/packages/hoppscotch-app/helpers/backend/types/TeamName.ts b/packages/hoppscotch-app/helpers/backend/types/TeamName.ts
new file mode 100644
index 000000000..ce8253a04
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/backend/types/TeamName.ts
@@ -0,0 +1,13 @@
+import * as t from "io-ts"
+
+interface TeamNameBrand {
+  readonly TeamName: unique symbol
+}
+
+export const TeamNameCodec = t.brand(
+  t.string,
+  (x): x is t.Branded<string, TeamNameBrand> => x.length > 6,
+  "TeamName"
+)
+
+export type TeamName = t.TypeOf<typeof TeamNameCodec>
diff --git a/packages/hoppscotch-app/helpers/fb/auth.ts b/packages/hoppscotch-app/helpers/fb/auth.ts
index eafaf2766..88767e4c2 100644
--- a/packages/hoppscotch-app/helpers/fb/auth.ts
+++ b/packages/hoppscotch-app/helpers/fb/auth.ts
@@ -141,6 +141,10 @@ export function initAuth() {
   })
 }
 
+export function getAuthIDToken(): string | null {
+  return authIdToken$.getValue()
+}
+
 /**
  * Sign user in with a popup using Google
  */
diff --git a/packages/hoppscotch-app/package.json b/packages/hoppscotch-app/package.json
index 24d27dbe1..55dd024e5 100644
--- a/packages/hoppscotch-app/package.json
+++ b/packages/hoppscotch-app/package.json
@@ -35,6 +35,7 @@
     "@nuxtjs/robots": "^2.5.0",
     "@nuxtjs/sitemap": "^2.4.0",
     "@nuxtjs/toast": "^3.3.1",
+    "@urql/core": "^2.3.3",
     "acorn": "^8.5.0",
     "acorn-walk": "^8.2.0",
     "axios": "^0.21.4",
@@ -48,6 +49,8 @@
     "graphql": "^15.6.0",
     "graphql-language-service-interface": "^2.8.4",
     "graphql-language-service-parser": "^1.9.2",
+    "graphql-tag": "^2.12.5",
+    "io-ts": "^2.2.16",
     "json-loader": "^0.5.7",
     "lodash": "^4.17.21",
     "mustache": "^4.2.0",
@@ -66,6 +69,7 @@
     "vue-textarea-autosize": "^1.1.1",
     "vue-tippy": "^4.11.0",
     "vuejs-auto-complete": "^0.9.0",
+    "wonka": "^4.0.15",
     "yargs-parser": "^20.2.9"
   },
   "devDependencies": {
@@ -90,6 +94,7 @@
     "@types/esprima": "^4.0.3",
     "@types/lodash": "^4.14.174",
     "@types/splitpanes": "^2.2.1",
+    "@urql/devtools": "^2.0.3",
     "@vue/runtime-dom": "^3.2.19",
     "@vue/test-utils": "^1.2.2",
     "babel-core": "^7.0.0-bridge.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1d3297026..9df89872c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,6 +47,8 @@ importers:
       '@types/esprima': ^4.0.3
       '@types/lodash': ^4.14.174
       '@types/splitpanes': ^2.2.1
+      '@urql/core': ^2.3.3
+      '@urql/devtools': ^2.0.3
       '@vue/runtime-dom': ^3.2.19
       '@vue/test-utils': ^1.2.2
       acorn: ^8.5.0
@@ -69,6 +71,8 @@ importers:
       graphql: ^15.6.0
       graphql-language-service-interface: ^2.8.4
       graphql-language-service-parser: ^1.9.2
+      graphql-tag: ^2.12.5
+      io-ts: ^2.2.16
       jest: ^27.2.2
       jest-serializer-vue: ^2.0.2
       json-loader: ^0.5.7
@@ -102,6 +106,7 @@ importers:
       vue-textarea-autosize: ^1.1.1
       vue-tippy: ^4.11.0
       vuejs-auto-complete: ^0.9.0
+      wonka: ^4.0.15
       worker-loader: ^3.0.8
       yargs-parser: ^20.2.9
     dependencies:
@@ -114,6 +119,7 @@ importers:
       '@nuxtjs/robots': 2.5.0
       '@nuxtjs/sitemap': 2.4.0
       '@nuxtjs/toast': 3.3.1
+      '@urql/core': 2.3.3_graphql@15.6.0
       acorn: 8.5.0
       acorn-walk: 8.2.0
       axios: 0.21.4
@@ -127,6 +133,8 @@ importers:
       graphql: 15.6.0
       graphql-language-service-interface: 2.8.4_graphql@15.6.0
       graphql-language-service-parser: 1.9.2_graphql@15.6.0
+      graphql-tag: 2.12.5_graphql@15.6.0
+      io-ts: 2.2.16_fp-ts@2.11.3
       json-loader: 0.5.7
       lodash: 4.17.21
       mustache: 4.2.0
@@ -138,13 +146,14 @@ importers:
       socketio-wildcard: 2.0.0
       splitpanes: 2.3.8
       tern: 0.24.3
-      vue-apollo: 3.0.8
+      vue-apollo: 3.0.8_graphql-tag@2.12.5
       vue-cli-plugin-apollo: 0.22.2_typescript@4.4.3
       vue-functional-data-merge: 3.1.0
       vue-github-button: 1.3.0
       vue-textarea-autosize: 1.1.1
       vue-tippy: 4.11.0
       vuejs-auto-complete: 0.9.0
+      wonka: 4.0.15
       yargs-parser: 20.2.9
     devDependencies:
       '@babel/core': 7.15.5
@@ -168,6 +177,7 @@ importers:
       '@types/esprima': 4.0.3
       '@types/lodash': 4.14.174
       '@types/splitpanes': 2.2.1
+      '@urql/devtools': 2.0.3_@urql+core@2.3.3+graphql@15.6.0
       '@vue/runtime-dom': 3.2.19
       '@vue/test-utils': 1.2.2
       babel-core: 7.0.0-bridge.0_@babel+core@7.15.5
@@ -4592,6 +4602,27 @@ packages:
       eslint-visitor-keys: 2.1.0
     dev: true
 
+  /@urql/core/2.3.3_graphql@15.6.0:
+    resolution: {integrity: sha512-Bi9mafTFu0O1XZmI7/HrEk12LHZW+Fs/V1FqSJoUDgYIhARIJW6cCh3Havy1dJJ0FETxYmmQQXPf6kst+IP2qQ==}
+    peerDependencies:
+      graphql: ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0
+    dependencies:
+      '@graphql-typed-document-node/core': 3.1.0_graphql@15.6.0
+      graphql: 15.6.0
+      wonka: 4.0.15
+    dev: false
+
+  /@urql/devtools/2.0.3_@urql+core@2.3.3+graphql@15.6.0:
+    resolution: {integrity: sha512-TktPLiBS9LcBPHD6qcnb8wqOVcg3Bx0iCtvQ80uPpfofwwBGJmqnQTjUdEFU6kwaLOFZULQ9+Uo4831G823mQw==}
+    peerDependencies:
+      '@urql/core': '>= 1.14.0'
+      graphql: '>= 0.11.0'
+    dependencies:
+      '@urql/core': 2.3.3_graphql@15.6.0
+      graphql: 15.6.0
+      wonka: 4.0.15
+    dev: true
+
   /@vue/babel-helper-vue-jsx-merge-props/1.2.1:
     resolution: {integrity: sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA==}
     dev: false
@@ -10432,7 +10463,6 @@ packages:
       fp-ts: ^2.5.0
     dependencies:
       fp-ts: 2.11.3
-    dev: true
 
   /ip/1.1.5:
     resolution: {integrity: sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=}
@@ -17362,12 +17392,13 @@ packages:
     deprecated: Sorry but vue-analytics is no longer maintained. I would suggest you switch to vue-gtag, with love, the guy who made the package.
     dev: true
 
-  /vue-apollo/3.0.8:
+  /vue-apollo/3.0.8_graphql-tag@2.12.5:
     resolution: {integrity: sha512-RnkC75PMoGwl1sdZdVO3R9P51wqmgOVi4QmljkBaTzlVThVlqfkJhrBcPiw2K9EohvSagvZclNqXktyOCcXbBA==}
     peerDependencies:
       graphql-tag: ^2
     dependencies:
       chalk: 2.4.2
+      graphql-tag: 2.12.5_graphql@15.6.0
       serialize-javascript: 4.0.0
       throttle-debounce: 2.3.0
     dev: false
@@ -17865,6 +17896,9 @@ packages:
       babel-walk: 3.0.0-canary-5
     optional: true
 
+  /wonka/4.0.15:
+    resolution: {integrity: sha512-U0IUQHKXXn6PFo9nqsHphVCE5m3IntqZNB9Jjn7EB1lrR7YTDY3YWgFvEvwniTzXSvOH/XMzAZaIfJF/LvHYXg==}
+
   /word-wrap/1.2.3:
     resolution: {integrity: sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==}
     engines: {node: '>=0.10.0'}

From ffb0c12c08bab6ec9ae1a3eb5e28cab8e28e417b Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Fri, 1 Oct 2021 15:13:48 +0530
Subject: [PATCH 02/17] feat: introduce updated mutation system and team.vue
 rewrite

---
 .../hoppscotch-app/components/teams/Team.vue  | 118 +++++++++++-------
 .../helpers/backend/GQLClient.ts              |  48 ++++++-
 .../helpers/backend/mutations/Team.ts         |  33 +++++
 3 files changed, 152 insertions(+), 47 deletions(-)
 create mode 100644 packages/hoppscotch-app/helpers/backend/mutations/Team.ts

diff --git a/packages/hoppscotch-app/components/teams/Team.vue b/packages/hoppscotch-app/components/teams/Team.vue
index 029a9f1b1..2f6fe89ca 100644
--- a/packages/hoppscotch-app/components/teams/Team.vue
+++ b/packages/hoppscotch-app/components/teams/Team.vue
@@ -14,7 +14,7 @@
             :key="`member-${index}`"
             v-tippy="{ theme: 'tooltip' }"
             :title="member.user.displayName"
-            :src="member.user.photoURL"
+            :src="member.user.photoURL || undefined"
             :alt="member.user.displayName"
             class="rounded-full h-5 ring-primary ring-2 w-5 inline-block"
           />
@@ -33,7 +33,7 @@
         <SmartItem
           v-if="team.myRole === 'OWNER'"
           svg="edit"
-          :label="$t('action.edit')"
+          :label="$t('action.edit').toString()"
           @click.native="
             () => {
               $emit('edit-team')
@@ -45,7 +45,7 @@
           v-if="team.myRole === 'OWNER'"
           svg="trash-2"
           color="red"
-          :label="$t('action.delete')"
+          :label="$t('action.delete').toString()"
           @click.native="
             () => {
               deleteTeam()
@@ -56,7 +56,7 @@
         <SmartItem
           v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
           svg="trash"
-          :label="$t('team.exit')"
+          :label="$t('team.exit').toString()"
           @click.native="
             () => {
               exitTeam()
@@ -69,49 +69,79 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
-import * as teamUtils from "~/helpers/teams/utils"
+<script setup lang="ts">
+import { useContext } from "@nuxtjs/composition-api"
+import { pipe } from "fp-ts/function"
+import * as TE from "fp-ts/TaskEither"
+import {
+  deleteTeam as backendDeleteTeam,
+  leaveTeam,
+} from "~/helpers/backend/mutations/Team"
+import { TeamMemberRole } from "~/helpers/backend/types/TeamMemberRole"
 
-export default defineComponent({
-  props: {
-    team: { type: Object, default: () => {} },
-    teamID: { type: String, default: null },
-  },
-  methods: {
-    deleteTeam() {
-      if (!confirm(this.$t("confirm.remove_team"))) return
-      // Call to the graphql mutation
-      teamUtils
-        .deleteTeam(this.$apollo, this.teamID)
-        .then(() => {
-          this.$toast.success(this.$t("team.deleted"), {
-            icon: "done",
-          })
+const props = defineProps<{
+  team: {
+    name: string
+    myRole: TeamMemberRole
+    ownersCount: number
+    members: Array<{
+      user: {
+        displayName: string
+        photoURL: string | null
+      }
+    }>
+  }
+  teamID: string
+}>()
+
+const {
+  app: { i18n },
+  $toast,
+} = useContext()
+
+const $t = i18n.t.bind(i18n)
+
+const deleteTeam = () => {
+  if (!confirm($t("confirm.remove_team").toString())) return
+
+  pipe(
+    backendDeleteTeam(props.teamID),
+    TE.match(
+      (err) => {
+        // TODO: Better errors ? We know the possible errors now
+        $toast.error($t("error.something_went_wrong").toString(), {
+          icon: "error_outline",
         })
-        .catch((e) => {
-          this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error_outline",
-          })
-          console.error(e)
+        console.error(err)
+      },
+      () => {
+        $toast.success($t("team.deleted").toString(), {
+          icon: "done",
         })
-    },
-    exitTeam() {
-      if (!confirm("Are you sure you want to exit this team?")) return
-      teamUtils
-        .exitTeam(this.$apollo, this.teamID)
-        .then(() => {
-          this.$toast.success(this.$t("team.left"), {
-            icon: "done",
-          })
+      }
+    )
+  )() // Tasks (and TEs) are lazy, so call the function returned
+}
+
+const exitTeam = () => {
+  if (!confirm("Are you sure you want to exit this team?")) return
+
+  pipe(
+    leaveTeam(props.teamID),
+    TE.match(
+      (err) => {
+        // TODO: Better errors ?
+        $toast.error($t("error.something_went_wrong").toString(), {
+          icon: "error_outline",
         })
-        .catch((e) => {
-          this.$toast.error(this.$t("error.something_went_wrong"), {
-            icon: "error_outline",
-          })
-          console.error(e)
+        console.error(err)
+      },
+      () => {
+        $toast.success($t("team.left").toString(), {
+          icon: "done",
         })
-    },
-  },
-})
+      }
+    )
+  )() // Tasks (and TEs) are lazy, so call the function returned
+}
 </script>
diff --git a/packages/hoppscotch-app/helpers/backend/GQLClient.ts b/packages/hoppscotch-app/helpers/backend/GQLClient.ts
index 006465542..cf8fd2335 100644
--- a/packages/hoppscotch-app/helpers/backend/GQLClient.ts
+++ b/packages/hoppscotch-app/helpers/backend/GQLClient.ts
@@ -15,7 +15,8 @@ import {
 } from "@urql/core"
 import { devtoolsExchange } from "@urql/devtools"
 import * as E from "fp-ts/Either"
-import { pipe } from "fp-ts/function"
+import * as TE from "fp-ts/TaskEither"
+import { pipe, constVoid } from "fp-ts/function"
 import { subscribe } from "wonka"
 import clone from "lodash/clone"
 import { getAuthIDToken } from "~/helpers/fb/auth"
@@ -49,7 +50,7 @@ export type GQLError<T extends string> =
     }
   | {
       type: "gql_error"
-      err: T
+      error: T
     }
 
 const DEFAULT_QUERY_OPTIONS = {
@@ -122,7 +123,7 @@ export function useGQLQuery<
               (gqlErr) =>
                 <GQLError<QueryFailType>>{
                   type: "gql_error",
-                  err: gqlErr as QueryFailType,
+                  error: gqlErr as QueryFailType,
                 },
               // The right case (it was a GraphQL Error)
               (networkErr) =>
@@ -163,3 +164,44 @@ export function useGQLQuery<
       }
     | { loading: true }
 }
+
+export const runMutation = <
+  MutationReturnType = any,
+  MutationFailType extends string = "",
+  MutationVariables extends {} = {}
+>(
+  mutation: string | DocumentNode | TypedDocumentNode<any, MutationVariables>,
+  variables?: MutationVariables
+): TE.TaskEither<GQLError<MutationFailType>, NonNullable<MutationReturnType>> =>
+  pipe(
+    TE.tryCatch(
+      () => client.mutation<MutationReturnType>(mutation, variables).toPromise(),
+      () => constVoid() as never // The mutation function can never fail, so this will never be called ;)
+    ),
+    TE.chainEitherK((result) =>
+      pipe(
+        result.data as MutationReturnType, // If we have the result, then okay
+        E.fromNullable(
+          // Result is null
+          pipe(
+            result.error?.networkError, // Check for network error
+            E.fromNullable(result.error?.name), // If it is null, then it is a GQL error
+            E.match(
+              // The left case (network error was null)
+              (gqlErr) =>
+                <GQLError<MutationFailType>>{
+                  type: "gql_error",
+                  error: gqlErr as MutationFailType,
+                },
+              // The right case (it was a GraphQL Error)
+              (networkErr) =>
+                <GQLError<MutationFailType>>{
+                  type: "network_error",
+                  error: networkErr,
+                }
+            )
+          )
+        )
+      )
+    )
+  )
diff --git a/packages/hoppscotch-app/helpers/backend/mutations/Team.ts b/packages/hoppscotch-app/helpers/backend/mutations/Team.ts
new file mode 100644
index 000000000..b75f5f1ed
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/backend/mutations/Team.ts
@@ -0,0 +1,33 @@
+import gql from "graphql-tag"
+import { runMutation } from "../GQLClient"
+
+type DeleteTeamErrors =
+  | "team/not_required_role"
+  | "team/invalid_id"
+  | "team/member_not_found"
+
+type ExitTeamErrors = "team/invalid_id" | "team/member_not_found"
+
+export const deleteTeam = (teamID: string) =>
+  runMutation<void, DeleteTeamErrors>(
+    gql`
+      mutation DeleteTeam($teamID: String!) {
+        deleteTeam(teamID: $teamID)
+      }
+    `,
+    {
+      teamID,
+    }
+  )
+
+export const leaveTeam = (teamID: string) =>
+  runMutation<void, ExitTeamErrors>(
+    gql`
+      mutation ExitTeam($teamID: String!) {
+        leaveTeam(teamID: $teamID)
+      }
+    `,
+    {
+      teamID,
+    }
+  )

From 93f55f561943460f14201de9aacd0121cfdcb6d1 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 2 Oct 2021 13:22:07 +0530
Subject: [PATCH 03/17] feat: init profile page

---
 .../hoppscotch-app/assets/icons/verified.svg  |   1 +
 .../hoppscotch-app/components/app/Header.vue  |   6 +
 .../hoppscotch-app/components/teams/index.vue |  15 +-
 packages/hoppscotch-app/locales/en.json       |   1 +
 packages/hoppscotch-app/pages/profile.vue     | 138 ++++++++++++++++++
 packages/hoppscotch-app/pages/settings.vue    | 114 +--------------
 6 files changed, 149 insertions(+), 126 deletions(-)
 create mode 100644 packages/hoppscotch-app/assets/icons/verified.svg
 create mode 100644 packages/hoppscotch-app/pages/profile.vue

diff --git a/packages/hoppscotch-app/assets/icons/verified.svg b/packages/hoppscotch-app/assets/icons/verified.svg
new file mode 100644
index 000000000..2a2c4e926
--- /dev/null
+++ b/packages/hoppscotch-app/assets/icons/verified.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><g><rect fill="none" height="24" width="24"/></g><g><path d="M23,12l-2.44-2.79l0.34-3.69l-3.61-0.82L15.4,1.5L12,2.96L8.6,1.5L6.71,4.69L3.1,5.5L3.44,9.2L1,12l2.44,2.79l-0.34,3.7 l3.61,0.82L8.6,22.5l3.4-1.47l3.4,1.46l1.89-3.19l3.61-0.82l-0.34-3.69L23,12z M10.09,16.72l-3.8-3.81l1.48-1.48l2.32,2.33 l5.85-5.87l1.48,1.48L10.09,16.72z"/></g></svg>
diff --git a/packages/hoppscotch-app/components/app/Header.vue b/packages/hoppscotch-app/components/app/Header.vue
index 283e58b48..04804d63f 100644
--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/packages/hoppscotch-app/components/app/Header.vue
@@ -69,6 +69,12 @@
                 svg="user"
               />
             </template>
+            <SmartItem
+              to="/profile"
+              svg="user"
+              :label="$t('navigation.profile')"
+              @click.native="$refs.user.tippy().hide()"
+            />
             <SmartItem
               to="/settings"
               svg="settings"
diff --git a/packages/hoppscotch-app/components/teams/index.vue b/packages/hoppscotch-app/components/teams/index.vue
index 82636de4f..e379cbba0 100644
--- a/packages/hoppscotch-app/components/teams/index.vue
+++ b/packages/hoppscotch-app/components/teams/index.vue
@@ -1,17 +1,6 @@
 <template>
   <AppSection label="teams">
-    <h4 class="text-secondaryDark">
-      {{ $t("team.title") }}
-    </h4>
-    <div class="mt-1 text-secondaryLight">
-      <SmartAnchor
-        :label="`${$t('team.join_beta')}`"
-        to="https://hoppscotch.io/beta"
-        blank
-        class="link"
-      />
-    </div>
-    <div class="space-y-4 mt-4">
+    <div class="space-y-4 p-4">
       <ButtonSecondary
         :label="`${$t('team.create_new')}`"
         outline
@@ -37,7 +26,7 @@
       </div>
       <div
         v-else-if="!myTeams.loading && E.isRight(myTeams.data)"
-        class="grid gap-4 sm:grid-cols-2 md:grid-cols-3"
+        class="grid gap-4 sm:grid-cols-3 md:grid-cols-4"
       >
         <TeamsTeam
           v-for="(team, index) in myTeams.data.right.myTeams"
diff --git a/packages/hoppscotch-app/locales/en.json b/packages/hoppscotch-app/locales/en.json
index a65f74e04..d752ba633 100644
--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -245,6 +245,7 @@
   "navigation": {
     "doc": "Docs",
     "graphql": "GraphQL",
+    "profile": "Profile",
     "realtime": "Realtime",
     "rest": "REST",
     "settings": "Settings"
diff --git a/packages/hoppscotch-app/pages/profile.vue b/packages/hoppscotch-app/pages/profile.vue
new file mode 100644
index 000000000..359b24e14
--- /dev/null
+++ b/packages/hoppscotch-app/pages/profile.vue
@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <div class="container">
+      <div class="py-8 px-4">
+        <div v-if="currentUser === null">
+          <ButtonPrimary
+            :label="$t('auth.login')"
+            @click.native="showLogin = true"
+          />
+        </div>
+        <div v-else class="space-y-4">
+          <div class="flex px-4 items-center">
+            <img
+              v-if="currentUser.photoURL"
+              :src="currentUser.photoURL"
+              class="rounded-full h-16 w-16"
+            />
+            <SmartIcon v-else name="user" class="svg-icons" />
+            <div class="ml-4">
+              <label class="heading">
+                {{ currentUser.displayName || $t("state.nothing_found") }}
+              </label>
+              <p class="flex text-secondaryLight items-center">
+                {{ currentUser.email || $t("state.nothing_found") }}
+                <SmartIcon
+                  name="verified"
+                  v-if="currentUser.emailVerified"
+                  class="ml-2 text-green-500 svg-icons"
+                />
+              </p>
+            </div>
+          </div>
+          <SmartTabs styles="sticky bg-primary z-10 top-0">
+            <SmartTab
+              :id="'sync'"
+              :label="$t('settings.account')"
+              :selected="true"
+            >
+              <section class="p-4">
+                <h4 class="font-semibold text-secondaryDark">
+                  {{ $t("settings.sync") }}
+                </h4>
+                <div class="mt-1 text-secondaryLight">
+                  {{ $t("settings.sync_description") }}
+                </div>
+                <div class="space-y-4 py-4">
+                  <div class="flex items-center">
+                    <SmartToggle
+                      :on="SYNC_COLLECTIONS"
+                      @change="
+                        toggleSettings('syncCollections', !SYNC_COLLECTIONS)
+                      "
+                    >
+                      {{ $t("settings.sync_collections") }}
+                    </SmartToggle>
+                  </div>
+                  <div class="flex items-center">
+                    <SmartToggle
+                      :on="SYNC_ENVIRONMENTS"
+                      @change="
+                        toggleSettings('syncEnvironments', !SYNC_ENVIRONMENTS)
+                      "
+                    >
+                      {{ $t("settings.sync_environments") }}
+                    </SmartToggle>
+                  </div>
+                  <div class="flex items-center">
+                    <SmartToggle
+                      :on="SYNC_HISTORY"
+                      @change="toggleSettings('syncHistory', !SYNC_HISTORY)"
+                    >
+                      {{ $t("settings.sync_history") }}
+                    </SmartToggle>
+                  </div>
+                </div>
+              </section>
+            </SmartTab>
+            <SmartTab
+              v-if="currentBackendUser && currentBackendUser.eaInvited"
+              :id="'teams'"
+              :label="$t('team.title')"
+            >
+              <AppSection label="teams">
+                <Teams />
+              </AppSection>
+            </SmartTab>
+          </SmartTabs>
+        </div>
+      </div>
+      <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
+import { currentUser$ } from "~/helpers/fb/auth"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import { applySetting, SettingsType, useSetting } from "~/newstore/settings"
+import { KeysMatching } from "~/types/ts-utils"
+
+export default defineComponent({
+  setup() {
+    return {
+      SYNC_COLLECTIONS: useSetting("syncCollections"),
+      SYNC_ENVIRONMENTS: useSetting("syncEnvironments"),
+      SYNC_HISTORY: useSetting("syncHistory"),
+      currentUser: useReadonlyStream(currentUser$, currentUser$.value),
+      currentBackendUser: useReadonlyStream(
+        currentUserInfo$,
+        currentUserInfo$.value
+      ),
+    }
+  },
+  data() {
+    return {
+      showLogin: false,
+    }
+  },
+  head() {
+    return {
+      title: `${this.$t("navigation.profile")} • Hoppscotch`,
+    }
+  },
+  methods: {
+    applySetting<K extends keyof SettingsType>(key: K, value: SettingsType[K]) {
+      applySetting(key, value)
+    },
+    toggleSettings<K extends KeysMatching<SettingsType, boolean>>(
+      name: K,
+      value: SettingsType[K]
+    ) {
+      this.applySetting(name, value)
+    },
+  },
+})
+</script>
diff --git a/packages/hoppscotch-app/pages/settings.vue b/packages/hoppscotch-app/pages/settings.vue
index 27bad3436..3229a1ff2 100644
--- a/packages/hoppscotch-app/pages/settings.vue
+++ b/packages/hoppscotch-app/pages/settings.vue
@@ -1,104 +1,6 @@
 <template>
   <div>
     <div class="divide-y divide-dividerLight space-y-8">
-      <div class="md:grid md:gap-4 md:grid-cols-3">
-        <div class="p-8 md:col-span-1">
-          <h3 class="heading">
-            {{ $t("settings.account") }}
-          </h3>
-          <p class="mt-1 text-secondaryLight">
-            {{ $t("settings.account_description") }}
-          </p>
-        </div>
-        <div class="p-8 md:col-span-2">
-          <div v-if="currentUser === null">
-            <ButtonPrimary
-              :label="`${$t('auth.login')}`"
-              @click.native="showLogin = true"
-            />
-          </div>
-          <div v-else class="space-y-8">
-            <section>
-              <h4 class="font-semibold text-secondaryDark">
-                {{ $t("settings.user") }}
-              </h4>
-              <div class="space-y-4 py-4">
-                <div class="flex items-start">
-                  <div class="flex items-center">
-                    <img
-                      v-if="currentUser.photoURL"
-                      :src="currentUser.photoURL"
-                      class="rounded-full h-5 w-5"
-                    />
-                    <SmartIcon v-else name="user" class="svg-icons" />
-                  </div>
-                  <div class="ml-4">
-                    <label>
-                      {{ currentUser.displayName || $t("state.nothing_found") }}
-                    </label>
-                    <p class="mt-1 text-secondaryLight">
-                      {{ $t("settings.account_name_description") }}
-                    </p>
-                  </div>
-                </div>
-                <div class="flex items-start">
-                  <div class="flex items-center">
-                    <SmartIcon name="at-sign" class="svg-icons" />
-                  </div>
-                  <div class="ml-4">
-                    <label>
-                      {{ currentUser.email || $t("state.nothing_found") }}
-                    </label>
-                    <p class="mt-1 text-secondaryLight">
-                      {{ $t("settings.account_email_description") }}
-                    </p>
-                  </div>
-                </div>
-              </div>
-            </section>
-            <Teams v-if="currentBackendUser && currentBackendUser.eaInvited" />
-            <section>
-              <h4 class="font-semibold text-secondaryDark">
-                {{ $t("settings.sync") }}
-              </h4>
-              <div class="mt-1 text-secondaryLight">
-                {{ $t("settings.sync_description") }}
-              </div>
-              <div class="space-y-4 py-4">
-                <div class="flex items-center">
-                  <SmartToggle
-                    :on="SYNC_COLLECTIONS"
-                    @change="
-                      toggleSettings('syncCollections', !SYNC_COLLECTIONS)
-                    "
-                  >
-                    {{ $t("settings.sync_collections") }}
-                  </SmartToggle>
-                </div>
-                <div class="flex items-center">
-                  <SmartToggle
-                    :on="SYNC_ENVIRONMENTS"
-                    @change="
-                      toggleSettings('syncEnvironments', !SYNC_ENVIRONMENTS)
-                    "
-                  >
-                    {{ $t("settings.sync_environments") }}
-                  </SmartToggle>
-                </div>
-                <div class="flex items-center">
-                  <SmartToggle
-                    :on="SYNC_HISTORY"
-                    @change="toggleSettings('syncHistory', !SYNC_HISTORY)"
-                  >
-                    {{ $t("settings.sync_history") }}
-                  </SmartToggle>
-                </div>
-              </div>
-            </section>
-          </div>
-        </div>
-      </div>
-
       <div class="md:grid md:gap-4 md:grid-cols-3">
         <div class="p-8 md:col-span-1">
           <h3 class="heading">
@@ -325,7 +227,6 @@
         </div>
       </div>
     </div>
-    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
     <SmartConfirmModal
       :show="confirmRemove"
       :title="`${$t('confirm.remove_telemetry')} ${$t(
@@ -344,7 +245,6 @@
 
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api"
-import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
 import {
   hasExtensionInstalled,
   hasChromeExtensionInstalled,
@@ -357,9 +257,7 @@ import {
   useSetting,
 } from "~/newstore/settings"
 import type { KeysMatching } from "~/types/ts-utils"
-import { currentUser$ } from "~/helpers/fb/auth"
 import { getLocalConfig } from "~/newstore/localpersistence"
-import { useReadonlyStream } from "~/helpers/utils/composables"
 
 type SettingsType = typeof defaultSettings
 
@@ -371,17 +269,9 @@ export default defineComponent({
       PROXY_KEY: useSetting("PROXY_KEY"),
       EXTENSIONS_ENABLED: useSetting("EXTENSIONS_ENABLED"),
       EXPERIMENTAL_URL_BAR_ENABLED: useSetting("EXPERIMENTAL_URL_BAR_ENABLED"),
-      SYNC_COLLECTIONS: useSetting("syncCollections"),
-      SYNC_ENVIRONMENTS: useSetting("syncEnvironments"),
-      SYNC_HISTORY: useSetting("syncHistory"),
       TELEMETRY_ENABLED: useSetting("TELEMETRY_ENABLED"),
       LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
       ZEN_MODE: useSetting("ZEN_MODE"),
-      currentUser: useReadonlyStream(currentUser$, currentUser$.value),
-      currentBackendUser: useReadonlyStream(
-        currentUserInfo$,
-        currentUserInfo$.value
-      ),
     }
   },
   data() {
@@ -395,9 +285,7 @@ export default defineComponent({
 
       clearIcon: "rotate-ccw",
 
-      showLogin: false,
-
-      active: getLocalConfig("THEME_COLOR") || "indigo",
+      active: getLocalConfig("THEME_COLOR") || "blue",
       confirmRemove: false,
     }
   },

From 23de147ca19c4438971cebcd625d2baeda778e1b Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 2 Oct 2021 13:46:51 +0530
Subject: [PATCH 04/17] fix: i18n usage

---
 packages/hoppscotch-app/components/teams/Team.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/hoppscotch-app/components/teams/Team.vue b/packages/hoppscotch-app/components/teams/Team.vue
index 2f6fe89ca..98cdb4498 100644
--- a/packages/hoppscotch-app/components/teams/Team.vue
+++ b/packages/hoppscotch-app/components/teams/Team.vue
@@ -99,23 +99,23 @@ const {
   $toast,
 } = useContext()
 
-const $t = i18n.t.bind(i18n)
+const t = i18n.t.bind(i18n)
 
 const deleteTeam = () => {
-  if (!confirm($t("confirm.remove_team").toString())) return
+  if (!confirm(t("confirm.remove_team").toString())) return
 
   pipe(
     backendDeleteTeam(props.teamID),
     TE.match(
       (err) => {
         // TODO: Better errors ? We know the possible errors now
-        $toast.error($t("error.something_went_wrong").toString(), {
+        $toast.error(t("error.something_went_wrong").toString(), {
           icon: "error_outline",
         })
         console.error(err)
       },
       () => {
-        $toast.success($t("team.deleted").toString(), {
+        $toast.success(t("team.deleted").toString(), {
           icon: "done",
         })
       }
@@ -131,13 +131,13 @@ const exitTeam = () => {
     TE.match(
       (err) => {
         // TODO: Better errors ?
-        $toast.error($t("error.something_went_wrong").toString(), {
+        $toast.error(t("error.something_went_wrong").toString(), {
           icon: "error_outline",
         })
         console.error(err)
       },
       () => {
-        $toast.success($t("team.left").toString(), {
+        $toast.success(t("team.left").toString(), {
           icon: "done",
         })
       }

From a628420adbb66e0bd8ddd1c9eefd54fd59592573 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Fri, 1 Oct 2021 22:41:30 +0530
Subject: [PATCH 05/17] refactor: refactor create team modal to new system

---
 .../hoppscotch-app/components/teams/Add.vue   | 107 +++++++++---------
 .../hoppscotch-app/components/teams/Team.vue  |   9 +-
 .../helpers/backend/mutations/Team.ts         |  37 +++++-
 .../helpers/backend/types/TeamName.ts         |   2 +-
 4 files changed, 100 insertions(+), 55 deletions(-)

diff --git a/packages/hoppscotch-app/components/teams/Add.vue b/packages/hoppscotch-app/components/teams/Add.vue
index ef4250007..c80c37746 100644
--- a/packages/hoppscotch-app/components/teams/Add.vue
+++ b/packages/hoppscotch-app/components/teams/Add.vue
@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" :title="$t('team.new')" @close="hideModal">
+  <SmartModal v-if="show" :title="$t('team.new').toString()" @close="hideModal">
     <template #body>
       <div class="flex flex-col px-2">
         <input
@@ -19,9 +19,12 @@
     </template>
     <template #footer>
       <span>
-        <ButtonPrimary :label="$t('action.save')" @click.native="addNewTeam" />
+        <ButtonPrimary
+          :label="$t('action.save').toString()"
+          @click.native="addNewTeam"
+        />
         <ButtonSecondary
-          :label="$t('action.cancel')"
+          :label="$t('action.cancel').toString()"
           @click.native="hideModal"
         />
       </span>
@@ -29,54 +32,56 @@
   </SmartModal>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
-import * as teamUtils from "~/helpers/teams/utils"
+<script setup lang="ts">
+import { ref, useContext } from "@nuxtjs/composition-api"
+import { pipe } from "fp-ts/function"
+import * as TE from "fp-ts/TaskEither"
+import { createTeam } from "~/helpers/backend/mutations/Team"
+import { TeamNameCodec } from "~/helpers/backend/types/TeamName"
 
-export default defineComponent({
-  props: {
-    show: Boolean,
-  },
-  data() {
-    return {
-      name: null,
-    }
-  },
-  methods: {
-    addNewTeam() {
-      // We save the user input in case of an error
-      const name = this.name
-      // We clear it early to give the UI a snappy feel
-      this.name = ""
-      if (!name) {
-        this.$toast.error(this.$t("empty.team_name"), {
-          icon: "error_outline",
-        })
-        return
+const {
+  app: { i18n },
+  $toast,
+} = useContext()
+
+const $t = i18n.t.bind(i18n)
+
+defineProps<{
+  show: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
+
+const name = ref<string | null>(null)
+
+const addNewTeam = () =>
+  pipe(
+    TeamNameCodec.decode(name.value), // Perform decode (returns either)
+    TE.fromEither, // Convert either to a task either
+    TE.mapLeft(() => "invalid_name" as const), // Failure above is an invalid_name, give it an identifiable value
+    TE.chainW(createTeam), // Create the team
+    TE.match(
+      (err) => {
+        // err is of type "invalid_name" | GQLError<Err>
+        if (err === "invalid_name") {
+          $toast.error($t("team.name_length_insufficient").toString(), {
+            icon: "error_outline",
+          })
+        } else {
+          // Handle GQL errors (use err obj)
+        }
+      },
+      () => {
+        // Success logic ?
+        hideModal()
       }
-      if (name !== null && name.replace(/\s/g, "").length < 6) {
-        this.$toast.error(this.$t("team.name_length_insufficient"), {
-          icon: "error_outline",
-        })
-        return
-      }
-      // Call to the graphql mutation
-      teamUtils
-        .createTeam(this.$apollo, name)
-        .then(() => {
-          this.hideModal()
-        })
-        .catch((e) => {
-          console.error(e)
-          // We restore the initial user input
-          this.name = name
-        })
-      this.hideModal()
-    },
-    hideModal() {
-      this.name = null
-      this.$emit("hide-modal")
-    },
-  },
-})
+    )
+  )()
+
+const hideModal = () => {
+  name.value = null
+  emit("hide-modal")
+}
 </script>
diff --git a/packages/hoppscotch-app/components/teams/Team.vue b/packages/hoppscotch-app/components/teams/Team.vue
index 98cdb4498..6ea0d801c 100644
--- a/packages/hoppscotch-app/components/teams/Team.vue
+++ b/packages/hoppscotch-app/components/teams/Team.vue
@@ -4,7 +4,7 @@
       <div class="p-4">
         <label
           class="cursor-pointer transition hover:text-secondaryDark"
-          @click="team.myRole === 'OWNER' ? $emit('edit-team') : ''"
+          @click="team.myRole === 'OWNER' ? emit('edit-team') : ''"
         >
           {{ team.name || $t("state.nothing_found") }}
         </label>
@@ -36,7 +36,7 @@
           :label="$t('action.edit').toString()"
           @click.native="
             () => {
-              $emit('edit-team')
+              emit('edit-team')
               $refs.options.tippy().hide()
             }
           "
@@ -94,6 +94,11 @@ const props = defineProps<{
   teamID: string
 }>()
 
+const emit = defineEmits<{
+  (e: "edit-team"): void
+  
+}>()
+
 const {
   app: { i18n },
   $toast,
diff --git a/packages/hoppscotch-app/helpers/backend/mutations/Team.ts b/packages/hoppscotch-app/helpers/backend/mutations/Team.ts
index b75f5f1ed..4ae3f496e 100644
--- a/packages/hoppscotch-app/helpers/backend/mutations/Team.ts
+++ b/packages/hoppscotch-app/helpers/backend/mutations/Team.ts
@@ -1,12 +1,47 @@
 import gql from "graphql-tag"
+import { pipe } from "fp-ts/function"
+import * as TE from "fp-ts/TaskEither"
 import { runMutation } from "../GQLClient"
+import { TeamName } from "../types/TeamName"
 
 type DeleteTeamErrors =
   | "team/not_required_role"
   | "team/invalid_id"
   | "team/member_not_found"
+  | "ea/not_invite_or_admin"
 
-type ExitTeamErrors = "team/invalid_id" | "team/member_not_found"
+type ExitTeamErrors =
+  | "team/invalid_id"
+  | "team/member_not_found"
+  | "ea/not_invite_or_admin"
+
+type CreateTeamErrors = "team/name_invalid" | "ea/not_invite_or_admin"
+
+export const createTeam = (name: TeamName) =>
+  pipe(
+    runMutation<
+      {
+        createTeam: {
+          id: string
+          name: string
+        }
+      },
+      CreateTeamErrors
+    >(
+      gql`
+        mutation CreateTeam($name: String!) {
+          createTeam(name: $name) {
+            id
+            name
+          }
+        }
+      `,
+      {
+        name,
+      }
+    ),
+    TE.map(({ createTeam }) => createTeam)
+  )
 
 export const deleteTeam = (teamID: string) =>
   runMutation<void, DeleteTeamErrors>(
diff --git a/packages/hoppscotch-app/helpers/backend/types/TeamName.ts b/packages/hoppscotch-app/helpers/backend/types/TeamName.ts
index ce8253a04..0f981db0d 100644
--- a/packages/hoppscotch-app/helpers/backend/types/TeamName.ts
+++ b/packages/hoppscotch-app/helpers/backend/types/TeamName.ts
@@ -6,7 +6,7 @@ interface TeamNameBrand {
 
 export const TeamNameCodec = t.brand(
   t.string,
-  (x): x is t.Branded<string, TeamNameBrand> => x.length > 6,
+  (x): x is t.Branded<string, TeamNameBrand> => x.trim().length > 6,
   "TeamName"
 )
 

From 2092a3729c050355ee475068ff1e45b3b3e7e8ad Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Sat, 2 Oct 2021 13:48:15 +0530
Subject: [PATCH 06/17] feat: team mutation

---
 packages/hoppscotch-app/components/teams/Team.vue         | 1 -
 packages/hoppscotch-app/helpers/backend/mutations/Team.ts | 4 ++--
 packages/hoppscotch-app/pages/profile.vue                 | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/hoppscotch-app/components/teams/Team.vue b/packages/hoppscotch-app/components/teams/Team.vue
index 6ea0d801c..83f1c6ad0 100644
--- a/packages/hoppscotch-app/components/teams/Team.vue
+++ b/packages/hoppscotch-app/components/teams/Team.vue
@@ -96,7 +96,6 @@ const props = defineProps<{
 
 const emit = defineEmits<{
   (e: "edit-team"): void
-  
 }>()
 
 const {
diff --git a/packages/hoppscotch-app/helpers/backend/mutations/Team.ts b/packages/hoppscotch-app/helpers/backend/mutations/Team.ts
index 4ae3f496e..1002c59fe 100644
--- a/packages/hoppscotch-app/helpers/backend/mutations/Team.ts
+++ b/packages/hoppscotch-app/helpers/backend/mutations/Team.ts
@@ -46,7 +46,7 @@ export const createTeam = (name: TeamName) =>
 export const deleteTeam = (teamID: string) =>
   runMutation<void, DeleteTeamErrors>(
     gql`
-      mutation DeleteTeam($teamID: String!) {
+      mutation DeleteTeam($teamID: ID!) {
         deleteTeam(teamID: $teamID)
       }
     `,
@@ -58,7 +58,7 @@ export const deleteTeam = (teamID: string) =>
 export const leaveTeam = (teamID: string) =>
   runMutation<void, ExitTeamErrors>(
     gql`
-      mutation ExitTeam($teamID: String!) {
+      mutation ExitTeam($teamID: ID!) {
         leaveTeam(teamID: $teamID)
       }
     `,
diff --git a/packages/hoppscotch-app/pages/profile.vue b/packages/hoppscotch-app/pages/profile.vue
index 359b24e14..88115df9a 100644
--- a/packages/hoppscotch-app/pages/profile.vue
+++ b/packages/hoppscotch-app/pages/profile.vue
@@ -23,8 +23,8 @@
               <p class="flex text-secondaryLight items-center">
                 {{ currentUser.email || $t("state.nothing_found") }}
                 <SmartIcon
-                  name="verified"
                   v-if="currentUser.emailVerified"
+                  name="verified"
                   class="ml-2 text-green-500 svg-icons"
                 />
               </p>

From ccdd4963cd018b20c06961ff03e2b0b27bb6bc74 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Sun, 3 Oct 2021 01:31:06 +0530
Subject: [PATCH 07/17] fix: fix issue with team queries not updating correctly
 after mutation

---
 packages/hoppscotch-app/helpers/backend/GQLClient.ts     | 9 +++++++--
 .../hoppscotch-app/helpers/backend/mutations/Team.ts     | 6 ++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/hoppscotch-app/helpers/backend/GQLClient.ts b/packages/hoppscotch-app/helpers/backend/GQLClient.ts
index cf8fd2335..6613d7a6f 100644
--- a/packages/hoppscotch-app/helpers/backend/GQLClient.ts
+++ b/packages/hoppscotch-app/helpers/backend/GQLClient.ts
@@ -12,6 +12,7 @@ import {
   TypedDocumentNode,
   OperationResult,
   defaultExchanges,
+  OperationContext,
 } from "@urql/core"
 import { devtoolsExchange } from "@urql/devtools"
 import * as E from "fp-ts/Either"
@@ -171,11 +172,15 @@ export const runMutation = <
   MutationVariables extends {} = {}
 >(
   mutation: string | DocumentNode | TypedDocumentNode<any, MutationVariables>,
-  variables?: MutationVariables
+  variables?: MutationVariables,
+  additionalConfig?: Partial<OperationContext>
 ): TE.TaskEither<GQLError<MutationFailType>, NonNullable<MutationReturnType>> =>
   pipe(
     TE.tryCatch(
-      () => client.mutation<MutationReturnType>(mutation, variables).toPromise(),
+      () =>
+        client
+          .mutation<MutationReturnType>(mutation, variables, additionalConfig)
+          .toPromise(),
       () => constVoid() as never // The mutation function can never fail, so this will never be called ;)
     ),
     TE.chainEitherK((result) =>
diff --git a/packages/hoppscotch-app/helpers/backend/mutations/Team.ts b/packages/hoppscotch-app/helpers/backend/mutations/Team.ts
index 1002c59fe..c761cf47d 100644
--- a/packages/hoppscotch-app/helpers/backend/mutations/Team.ts
+++ b/packages/hoppscotch-app/helpers/backend/mutations/Team.ts
@@ -52,6 +52,9 @@ export const deleteTeam = (teamID: string) =>
     `,
     {
       teamID,
+    },
+    {
+      additionalTypenames: ["Team"],
     }
   )
 
@@ -64,5 +67,8 @@ export const leaveTeam = (teamID: string) =>
     `,
     {
       teamID,
+    },
+    {
+      additionalTypenames: ["Team"],
     }
   )

From 7f501241f0b75fcd0a5bd854c8bcfa2a293e2c8a Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 3 Oct 2021 15:49:04 +0530
Subject: [PATCH 08/17] refactor: remove EAInvite flag

---
 .../components/collections/ChooseType.vue     |  2 +-
 .../hoppscotch-app/components/teams/Add.vue   |  4 +-
 .../hoppscotch-app/components/teams/index.vue |  7 ++
 .../helpers/teams/BackendUserInfo.ts          |  6 --
 packages/hoppscotch-app/pages/profile.vue     | 84 ++++++++-----------
 5 files changed, 43 insertions(+), 60 deletions(-)

diff --git a/packages/hoppscotch-app/components/collections/ChooseType.vue b/packages/hoppscotch-app/components/collections/ChooseType.vue
index 01665ed55..d87bddb70 100644
--- a/packages/hoppscotch-app/components/collections/ChooseType.vue
+++ b/packages/hoppscotch-app/components/collections/ChooseType.vue
@@ -7,7 +7,7 @@
         :selected="true"
       />
       <SmartTab
-        v-if="currentUser && currentUser.eaInvited && !doc"
+        v-if="currentUser && !doc"
         :id="'team-collections'"
         :label="`${$t('collection.team_collections')}`"
       >
diff --git a/packages/hoppscotch-app/components/teams/Add.vue b/packages/hoppscotch-app/components/teams/Add.vue
index c80c37746..9d70e2de8 100644
--- a/packages/hoppscotch-app/components/teams/Add.vue
+++ b/packages/hoppscotch-app/components/teams/Add.vue
@@ -44,7 +44,7 @@ const {
   $toast,
 } = useContext()
 
-const $t = i18n.t.bind(i18n)
+const t = i18n.t.bind(i18n)
 
 defineProps<{
   show: boolean
@@ -66,7 +66,7 @@ const addNewTeam = () =>
       (err) => {
         // err is of type "invalid_name" | GQLError<Err>
         if (err === "invalid_name") {
-          $toast.error($t("team.name_length_insufficient").toString(), {
+          $toast.error(t("team.name_length_insufficient").toString(), {
             icon: "error_outline",
           })
         } else {
diff --git a/packages/hoppscotch-app/components/teams/index.vue b/packages/hoppscotch-app/components/teams/index.vue
index e379cbba0..104eed298 100644
--- a/packages/hoppscotch-app/components/teams/index.vue
+++ b/packages/hoppscotch-app/components/teams/index.vue
@@ -36,6 +36,13 @@
           @edit-team="editTeam(team, team.id)"
         />
       </div>
+      <div
+        v-if="!myTeams.loading && E.isLeft(myTeams.data)"
+        class="flex items-center flex-col"
+      >
+        <i class="mb-4 material-icons">help_outline</i>
+        {{ $t("error.something_went_wrong") }}
+      </div>
     </div>
     <TeamsAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
     <!-- ¯\_(ツ)_/¯ -->
diff --git a/packages/hoppscotch-app/helpers/teams/BackendUserInfo.ts b/packages/hoppscotch-app/helpers/teams/BackendUserInfo.ts
index b0e504210..e42fd4705 100644
--- a/packages/hoppscotch-app/helpers/teams/BackendUserInfo.ts
+++ b/packages/hoppscotch-app/helpers/teams/BackendUserInfo.ts
@@ -28,10 +28,6 @@ export interface UserInfo {
    * URL to the profile photo of the user (or null if none available)
    */
   photoURL: string | null
-  /**
-   * Whether the user has access to Early Access features
-   */
-  eaInvited: boolean
 }
 
 /**
@@ -65,7 +61,6 @@ async function updateUserInfo() {
             displayName
             email
             photoURL
-            eaInvited
           }
         }
       `,
@@ -76,7 +71,6 @@ async function updateUserInfo() {
       displayName: data.me.displayName,
       email: data.me.email,
       photoURL: data.me.photoURL,
-      eaInvited: data.me.eaInvited,
     })
   } catch (e) {
     currentUserInfo$.next(null)
diff --git a/packages/hoppscotch-app/pages/profile.vue b/packages/hoppscotch-app/pages/profile.vue
index 88115df9a..424192511 100644
--- a/packages/hoppscotch-app/pages/profile.vue
+++ b/packages/hoppscotch-app/pages/profile.vue
@@ -47,9 +47,7 @@
                   <div class="flex items-center">
                     <SmartToggle
                       :on="SYNC_COLLECTIONS"
-                      @change="
-                        toggleSettings('syncCollections', !SYNC_COLLECTIONS)
-                      "
+                      @change="toggleSetting('syncCollections')"
                     >
                       {{ $t("settings.sync_collections") }}
                     </SmartToggle>
@@ -57,9 +55,7 @@
                   <div class="flex items-center">
                     <SmartToggle
                       :on="SYNC_ENVIRONMENTS"
-                      @change="
-                        toggleSettings('syncEnvironments', !SYNC_ENVIRONMENTS)
-                      "
+                      @change="toggleSetting('syncEnvironments')"
                     >
                       {{ $t("settings.sync_environments") }}
                     </SmartToggle>
@@ -67,7 +63,7 @@
                   <div class="flex items-center">
                     <SmartToggle
                       :on="SYNC_HISTORY"
-                      @change="toggleSettings('syncHistory', !SYNC_HISTORY)"
+                      @change="toggleSetting('syncHistory')"
                     >
                       {{ $t("settings.sync_history") }}
                     </SmartToggle>
@@ -75,11 +71,7 @@
                 </div>
               </section>
             </SmartTab>
-            <SmartTab
-              v-if="currentBackendUser && currentBackendUser.eaInvited"
-              :id="'teams'"
-              :label="$t('team.title')"
-            >
+            <SmartTab :id="'teams'" :label="$t('team.title')">
               <AppSection label="teams">
                 <Teams />
               </AppSection>
@@ -92,47 +84,37 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
-import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
+<script setup lang="ts">
+import {
+  ref,
+  useContext,
+  useMeta,
+  defineComponent,
+} from "@nuxtjs/composition-api"
 import { currentUser$ } from "~/helpers/fb/auth"
 import { useReadonlyStream } from "~/helpers/utils/composables"
-import { applySetting, SettingsType, useSetting } from "~/newstore/settings"
-import { KeysMatching } from "~/types/ts-utils"
+import { toggleSetting, useSetting } from "~/newstore/settings"
 
-export default defineComponent({
-  setup() {
-    return {
-      SYNC_COLLECTIONS: useSetting("syncCollections"),
-      SYNC_ENVIRONMENTS: useSetting("syncEnvironments"),
-      SYNC_HISTORY: useSetting("syncHistory"),
-      currentUser: useReadonlyStream(currentUser$, currentUser$.value),
-      currentBackendUser: useReadonlyStream(
-        currentUserInfo$,
-        currentUserInfo$.value
-      ),
-    }
-  },
-  data() {
-    return {
-      showLogin: false,
-    }
-  },
-  head() {
-    return {
-      title: `${this.$t("navigation.profile")} • Hoppscotch`,
-    }
-  },
-  methods: {
-    applySetting<K extends keyof SettingsType>(key: K, value: SettingsType[K]) {
-      applySetting(key, value)
-    },
-    toggleSettings<K extends KeysMatching<SettingsType, boolean>>(
-      name: K,
-      value: SettingsType[K]
-    ) {
-      this.applySetting(name, value)
-    },
-  },
+const {
+  app: { i18n },
+} = useContext()
+
+const t = i18n.t.bind(i18n)
+
+const showLogin = ref(false)
+
+const SYNC_COLLECTIONS = useSetting("syncCollections")
+const SYNC_ENVIRONMENTS = useSetting("syncEnvironments")
+const SYNC_HISTORY = useSetting("syncHistory")
+const currentUser = useReadonlyStream(currentUser$, null)
+
+useMeta({
+  title: `${t("navigation.profile")} • Hoppscotch`,
+})
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  head: {},
 })
 </script>

From 84ad4071ad0b56d75cb34d632724b7db2c5334a5 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 3 Oct 2021 18:14:52 +0530
Subject: [PATCH 09/17] feat: teams modal wrapper

---
 .../hoppscotch-app/components/app/Header.vue  | 87 +++++++++++--------
 .../hoppscotch-app/components/teams/Modal.vue | 26 ++++++
 .../hoppscotch-app/components/teams/index.vue |  7 +-
 packages/hoppscotch-app/locales/en.json       |  2 +
 packages/hoppscotch-app/pages/profile.vue     |  2 +-
 5 files changed, 87 insertions(+), 37 deletions(-)
 create mode 100644 packages/hoppscotch-app/components/teams/Modal.vue

diff --git a/packages/hoppscotch-app/components/app/Header.vue b/packages/hoppscotch-app/components/app/Header.vue
index 04804d63f..90e656468 100644
--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/packages/hoppscotch-app/components/app/Header.vue
@@ -47,49 +47,65 @@
           :label="$t('header.login')"
           @click.native="showLogin = true"
         />
-        <span v-else class="px-2">
-          <tippy ref="user" interactive trigger="click" theme="popover" arrow>
-            <template #trigger>
-              <ProfilePicture
-                v-if="currentUser.photoURL"
-                v-tippy="{
-                  theme: 'tooltip',
-                }"
-                :url="currentUser.photoURL"
-                :alt="currentUser.displayName"
-                :title="currentUser.displayName"
-                indicator
-                :indicator-styles="isOnLine ? 'bg-green-500' : 'bg-red-500'"
-              />
-              <ButtonSecondary
-                v-else
-                v-tippy="{ theme: 'tooltip' }"
-                :title="$t('header.account')"
-                class="rounded"
+        <div v-else class="space-x-2 inline-flex items-center">
+          <ButtonPrimary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('team.invite_tooltip')"
+            :label="$t('team.invite')"
+            svg="user-plus"
+            class="
+              !bg-green-400
+              !text-green-500
+              !bg-opacity-10
+              !hover:bg-opacity-10 !hover:text-green-600 !hover:bg-green-600
+            "
+            @click.native="showTeamsModal = true"
+          />
+          <span class="px-2">
+            <tippy ref="user" interactive trigger="click" theme="popover" arrow>
+              <template #trigger>
+                <ProfilePicture
+                  v-if="currentUser.photoURL"
+                  v-tippy="{
+                    theme: 'tooltip',
+                  }"
+                  :url="currentUser.photoURL"
+                  :alt="currentUser.displayName"
+                  :title="currentUser.displayName"
+                  indicator
+                  :indicator-styles="isOnLine ? 'bg-green-500' : 'bg-red-500'"
+                />
+                <ButtonSecondary
+                  v-else
+                  v-tippy="{ theme: 'tooltip' }"
+                  :title="$t('header.account')"
+                  class="rounded"
+                  svg="user"
+                />
+              </template>
+              <SmartItem
+                to="/profile"
                 svg="user"
+                :label="$t('navigation.profile')"
+                @click.native="$refs.user.tippy().hide()"
               />
-            </template>
-            <SmartItem
-              to="/profile"
-              svg="user"
-              :label="$t('navigation.profile')"
-              @click.native="$refs.user.tippy().hide()"
-            />
-            <SmartItem
-              to="/settings"
-              svg="settings"
-              :label="$t('navigation.settings')"
-              @click.native="$refs.user.tippy().hide()"
-            />
-            <FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
-          </tippy>
-        </span>
+              <SmartItem
+                to="/settings"
+                svg="settings"
+                :label="$t('navigation.settings')"
+                @click.native="$refs.user.tippy().hide()"
+              />
+              <FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
+            </tippy>
+          </span>
+        </div>
       </div>
     </header>
     <AppAnnouncement v-if="!isOnLine" />
     <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
     <AppSupport :show="showSupport" @hide-modal="showSupport = false" />
     <AppPowerSearch :show="showSearch" @hide-modal="showSearch = false" />
+    <TeamsModal :show="showTeamsModal" @hide-modal="showTeamsModal = false" />
   </div>
 </template>
 
@@ -127,6 +143,7 @@ export default defineComponent({
       showInstallPrompt: null,
       showLogin: false,
       isOnLine: navigator.onLine,
+      showTeamsModal: false,
     }
   },
   async mounted() {
diff --git a/packages/hoppscotch-app/components/teams/Modal.vue b/packages/hoppscotch-app/components/teams/Modal.vue
new file mode 100644
index 000000000..bbe25ad3b
--- /dev/null
+++ b/packages/hoppscotch-app/components/teams/Modal.vue
@@ -0,0 +1,26 @@
+<template>
+  <SmartModal
+    v-if="show"
+    :title="$t('app.invite_your_friends')"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <Teams :modal="true" />
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+  },
+  methods: {
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+  },
+})
+</script>
diff --git a/packages/hoppscotch-app/components/teams/index.vue b/packages/hoppscotch-app/components/teams/index.vue
index 104eed298..6f736033d 100644
--- a/packages/hoppscotch-app/components/teams/index.vue
+++ b/packages/hoppscotch-app/components/teams/index.vue
@@ -26,7 +26,8 @@
       </div>
       <div
         v-else-if="!myTeams.loading && E.isRight(myTeams.data)"
-        class="grid gap-4 sm:grid-cols-3 md:grid-cols-4"
+        class="grid gap-4"
+        :class="modal ? 'grid-cols-1' : 'sm:grid-cols-3 md:grid-cols-4'"
       >
         <TeamsTeam
           v-for="(team, index) in myTeams.data.right.myTeams"
@@ -69,6 +70,10 @@ import { useGQLQuery } from "~/helpers/backend/GQLClient"
 import { MyTeamsQueryError } from "~/helpers/backend/QueryErrors"
 import { TeamMemberRole } from "~/helpers/backend/types/TeamMemberRole"
 
+defineProps<{
+  modal: boolean
+}>()
+
 const showModalAdd = ref(false)
 const showModalEdit = ref(false)
 const editingTeam = ref<any>({}) // TODO: Check this out
diff --git a/packages/hoppscotch-app/locales/en.json b/packages/hoppscotch-app/locales/en.json
index d752ba633..495faaee0 100644
--- a/packages/hoppscotch-app/locales/en.json
+++ b/packages/hoppscotch-app/locales/en.json
@@ -471,6 +471,8 @@
     "exit_disabled": "Only owner cannot exit the team",
     "invalid_email_format": "Email format is invalid",
     "invalid_member_permission": "Please provide a valid permission to the team member",
+    "invite": "Invite",
+    "invite_tooltip": "Invite people to this workspace",
     "join_beta": "Join the beta program to access teams.",
     "left": "You left the team",
     "member_removed": "User removed",
diff --git a/packages/hoppscotch-app/pages/profile.vue b/packages/hoppscotch-app/pages/profile.vue
index 424192511..8d817aa47 100644
--- a/packages/hoppscotch-app/pages/profile.vue
+++ b/packages/hoppscotch-app/pages/profile.vue
@@ -73,7 +73,7 @@
             </SmartTab>
             <SmartTab :id="'teams'" :label="$t('team.title')">
               <AppSection label="teams">
-                <Teams />
+                <Teams :modal="false" />
               </AppSection>
             </SmartTab>
           </SmartTabs>

From ecdc7919ae6241c13cee60c3b7c24608811dd6fe Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Sun, 3 Oct 2021 19:12:31 +0530
Subject: [PATCH 10/17] fix: queries not waiting for authentication

---
 .../helpers/backend/GQLClient.ts              | 61 +++++++++++++++----
 packages/hoppscotch-app/helpers/fb/auth.ts    | 45 +++++++++++++-
 packages/hoppscotch-app/package.json          |  1 +
 pnpm-lock.yaml                                | 12 ++++
 4 files changed, 105 insertions(+), 14 deletions(-)

diff --git a/packages/hoppscotch-app/helpers/backend/GQLClient.ts b/packages/hoppscotch-app/helpers/backend/GQLClient.ts
index 6613d7a6f..9aadfe86e 100644
--- a/packages/hoppscotch-app/helpers/backend/GQLClient.ts
+++ b/packages/hoppscotch-app/helpers/backend/GQLClient.ts
@@ -11,16 +11,24 @@ import {
   createClient,
   TypedDocumentNode,
   OperationResult,
-  defaultExchanges,
+  dedupExchange,
   OperationContext,
+  cacheExchange,
+  fetchExchange,
+  makeOperation,
 } from "@urql/core"
+import { authExchange } from "@urql/exchange-auth"
 import { devtoolsExchange } from "@urql/devtools"
 import * as E from "fp-ts/Either"
 import * as TE from "fp-ts/TaskEither"
 import { pipe, constVoid } from "fp-ts/function"
 import { subscribe } from "wonka"
 import clone from "lodash/clone"
-import { getAuthIDToken } from "~/helpers/fb/auth"
+import {
+  getAuthIDToken,
+  probableUser$,
+  waitProbableLoginToConfirm,
+} from "~/helpers/fb/auth"
 
 const BACKEND_GQL_URL =
   process.env.CONTEXT === "production"
@@ -29,16 +37,47 @@ const BACKEND_GQL_URL =
 
 const client = createClient({
   url: BACKEND_GQL_URL,
-  fetchOptions: () => {
-    const token = getAuthIDToken()
+  exchanges: [
+    devtoolsExchange,
+    dedupExchange,
+    cacheExchange,
+    authExchange({
+      addAuthToOperation({ authState, operation }) {
+        if (!authState || !authState.authToken) {
+          return operation
+        }
 
-    return {
-      headers: {
-        authorization: token ? `Bearer ${token}` : "",
+        const fetchOptions =
+          typeof operation.context.fetchOptions === "function"
+            ? operation.context.fetchOptions()
+            : operation.context.fetchOptions || {}
+
+        return makeOperation(operation.kind, operation, {
+          ...operation.context,
+          fetchOptions: {
+            ...fetchOptions,
+            headers: {
+              ...fetchOptions.headers,
+              Authorization: `Bearer ${authState.authToken}`,
+            },
+          },
+        })
       },
-    }
-  },
-  exchanges: [devtoolsExchange, ...defaultExchanges],
+      willAuthError({ authState }) {
+        return !authState || !authState.authToken
+      },
+      getAuth: async () => {
+        if (!probableUser$.value) return { authToken: null }
+
+        await waitProbableLoginToConfirm()
+
+        return {
+          authToken: getAuthIDToken(),
+        }
+      },
+    }),
+    fetchExchange,
+  ],
 })
 
 /**
@@ -118,7 +157,7 @@ export function useGQLQuery<
             // Take the network error value
             result.error?.networkError,
             // If it null, set the left to the generic error name
-            E.fromNullable(result.error?.name),
+            E.fromNullable(result.error?.message),
             E.match(
               // The left case (network error was null)
               (gqlErr) =>
diff --git a/packages/hoppscotch-app/helpers/fb/auth.ts b/packages/hoppscotch-app/helpers/fb/auth.ts
index 88767e4c2..d6f24b20c 100644
--- a/packages/hoppscotch-app/helpers/fb/auth.ts
+++ b/packages/hoppscotch-app/helpers/fb/auth.ts
@@ -33,6 +33,11 @@ import {
   Subscription,
 } from "rxjs"
 import { onBeforeUnmount, onMounted } from "@nuxtjs/composition-api"
+import {
+  setLocalConfig,
+  getLocalConfig,
+  removeLocalConfig,
+} from "~/newstore/localpersistence"
 
 export type HoppUser = User & {
   provider?: string
@@ -40,9 +45,10 @@ export type HoppUser = User & {
 }
 
 type AuthEvents =
-  | { event: "login"; user: HoppUser }
-  | { event: "logout" }
-  | { event: "authTokenUpdate"; user: HoppUser; newToken: string | null }
+  | { event: "probable_login"; user: HoppUser } // We have previous login state, but the app is waiting for authentication
+  | { event: "login"; user: HoppUser } // We are authenticated
+  | { event: "logout" } // No authentication and we have no previous state
+  | { event: "authTokenUpdate"; user: HoppUser; newToken: string | null } // Token has been updated
 
 /**
  * A BehaviorSubject emitting the currently logged in user (or null if not logged in)
@@ -58,6 +64,26 @@ export const authIdToken$ = new BehaviorSubject<string | null>(null)
  */
 export const authEvents$ = new Subject<AuthEvents>()
 
+/**
+ * Like currentUser$ but also gives probable user value
+ */
+export const probableUser$ = new BehaviorSubject<HoppUser | null>(null)
+
+/**
+ * Resolves when the probable login resolves into proper login
+ */
+export const waitProbableLoginToConfirm = () =>
+  new Promise<void>((resolve, reject) => {
+    if (authIdToken$.value) resolve()
+
+    if (!probableUser$.value) reject(new Error("no_probable_user"))
+
+    const sub = authIdToken$.pipe(filter((token) => !!token)).subscribe(() => {
+      sub?.unsubscribe()
+      resolve()
+    })
+  })
+
 /**
  * Initializes the firebase authentication related subjects
  */
@@ -67,6 +93,17 @@ export function initAuth() {
 
   let extraSnapshotStop: (() => void) | null = null
 
+  probableUser$.next(JSON.parse(getLocalConfig("login_state") ?? "null"))
+
+  currentUser$.subscribe((user) => {
+    if (user) {
+      probableUser$.next(user)
+    } else {
+      probableUser$.next(null)
+      removeLocalConfig("login_state")
+    }
+  })
+
   onAuthStateChanged(auth, (user) => {
     /** Whether the user was logged in before */
     const wasLoggedIn = currentUser$.value !== null
@@ -135,6 +172,8 @@ export function initAuth() {
         newToken: authIdToken$.value,
         user: currentUser$.value!!, // Force not-null because user is defined
       })
+
+      setLocalConfig("login_state", JSON.stringify(user))
     } else {
       authIdToken$.next(null)
     }
diff --git a/packages/hoppscotch-app/package.json b/packages/hoppscotch-app/package.json
index 55dd024e5..dab0e98e4 100644
--- a/packages/hoppscotch-app/package.json
+++ b/packages/hoppscotch-app/package.json
@@ -36,6 +36,7 @@
     "@nuxtjs/sitemap": "^2.4.0",
     "@nuxtjs/toast": "^3.3.1",
     "@urql/core": "^2.3.3",
+    "@urql/exchange-auth": "^0.1.6",
     "acorn": "^8.5.0",
     "acorn-walk": "^8.2.0",
     "axios": "^0.21.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9df89872c..7758007a0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -49,6 +49,7 @@ importers:
       '@types/splitpanes': ^2.2.1
       '@urql/core': ^2.3.3
       '@urql/devtools': ^2.0.3
+      '@urql/exchange-auth': ^0.1.6
       '@vue/runtime-dom': ^3.2.19
       '@vue/test-utils': ^1.2.2
       acorn: ^8.5.0
@@ -120,6 +121,7 @@ importers:
       '@nuxtjs/sitemap': 2.4.0
       '@nuxtjs/toast': 3.3.1
       '@urql/core': 2.3.3_graphql@15.6.0
+      '@urql/exchange-auth': 0.1.6_graphql@15.6.0
       acorn: 8.5.0
       acorn-walk: 8.2.0
       axios: 0.21.4
@@ -4623,6 +4625,16 @@ packages:
       wonka: 4.0.15
     dev: true
 
+  /@urql/exchange-auth/0.1.6_graphql@15.6.0:
+    resolution: {integrity: sha512-jVyUaV+hHe3p2rIJauh6lgILMAjXOsHQ98xjKhUF3TXYx88TZXuBIl5DPZwnMcGra8YPOSHO/Wsn6NEjO5hQ+Q==}
+    peerDependencies:
+      graphql: ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0
+    dependencies:
+      '@urql/core': 2.3.3_graphql@15.6.0
+      graphql: 15.6.0
+      wonka: 4.0.15
+    dev: false
+
   /@vue/babel-helper-vue-jsx-merge-props/1.2.1:
     resolution: {integrity: sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA==}
     dev: false

From 96cf774652b5ad8cd9610e30077a40aaa12f018a Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 5 Oct 2021 02:09:39 +0530
Subject: [PATCH 11/17] feat: add persistent cache and optimistic updates

---
 .../hoppscotch-app/components/teams/index.vue |   2 +
 .../helpers/backend/GQLClient.ts              | 114 ++++++++++++++++--
 .../helpers/backend/mutations/Team.ts         |  13 ++
 packages/hoppscotch-app/package.json          |   1 +
 pnpm-lock.yaml                                |  12 ++
 5 files changed, 135 insertions(+), 7 deletions(-)

diff --git a/packages/hoppscotch-app/components/teams/index.vue b/packages/hoppscotch-app/components/teams/index.vue
index 6f736033d..c170960f5 100644
--- a/packages/hoppscotch-app/components/teams/index.vue
+++ b/packages/hoppscotch-app/components/teams/index.vue
@@ -87,6 +87,7 @@ const myTeams = useGQLQuery<
       myRole: TeamMemberRole
       ownersCount: number
       members: Array<{
+        membershipID: string
         user: {
           photoURL: string | null
           displayName: string
@@ -107,6 +108,7 @@ const myTeams = useGQLQuery<
         myRole
         ownersCount
         members {
+          membershipID
           user {
             photoURL
             displayName
diff --git a/packages/hoppscotch-app/helpers/backend/GQLClient.ts b/packages/hoppscotch-app/helpers/backend/GQLClient.ts
index 9aadfe86e..049fb7de9 100644
--- a/packages/hoppscotch-app/helpers/backend/GQLClient.ts
+++ b/packages/hoppscotch-app/helpers/backend/GQLClient.ts
@@ -13,17 +13,19 @@ import {
   OperationResult,
   dedupExchange,
   OperationContext,
-  cacheExchange,
   fetchExchange,
   makeOperation,
 } from "@urql/core"
 import { authExchange } from "@urql/exchange-auth"
+import { offlineExchange } from "@urql/exchange-graphcache"
+import { makeDefaultStorage } from "@urql/exchange-graphcache/default-storage"
 import { devtoolsExchange } from "@urql/devtools"
 import * as E from "fp-ts/Either"
 import * as TE from "fp-ts/TaskEither"
 import { pipe, constVoid } from "fp-ts/function"
 import { subscribe } from "wonka"
 import clone from "lodash/clone"
+import gql from "graphql-tag"
 import {
   getAuthIDToken,
   probableUser$,
@@ -35,12 +37,105 @@ const BACKEND_GQL_URL =
     ? "https://api.hoppscotch.io/graphql"
     : "https://api.hoppscotch.io/graphql"
 
+const storage = makeDefaultStorage({
+  idbName: "hoppcache-v1",
+  maxAge: 7,
+})
+
 const client = createClient({
   url: BACKEND_GQL_URL,
   exchanges: [
     devtoolsExchange,
     dedupExchange,
-    cacheExchange,
+    // TODO: Extract this outttttttt
+    offlineExchange({
+      keys: {
+        User: (data) => (data as any).uid,
+        TeamMember: (data) => (data as any).membershipID,
+        Team: (data) => data.id as any,
+      },
+      optimistic: {
+        deleteTeam: () => true,
+        leaveTeam: () => true,
+      },
+      updates: {
+        Mutation: {
+          deleteTeam: (_r, { teamID }, cache, _info) => {
+            cache.updateQuery(
+              {
+                query: gql`
+                  query {
+                    myTeams {
+                      id
+                    }
+                  }
+                `,
+              },
+              (data: any) => {
+                console.log(data)
+                data.myTeams = (data as any).myTeams.filter(
+                  (x: any) => x.id !== teamID
+                )
+
+                return data
+              }
+            )
+
+            cache.invalidate({
+              __typename: "Team",
+              id: teamID as any,
+            })
+          },
+          leaveTeam: (_r, { teamID }, cache, _info) => {
+            cache.updateQuery(
+              {
+                query: gql`
+                  query {
+                    myTeams {
+                      id
+                    }
+                  }
+                `,
+              },
+              (data: any) => {
+                console.log(data)
+                data.myTeams = (data as any).myTeams.filter(
+                  (x: any) => x.id !== teamID
+                )
+
+                return data
+              }
+            )
+
+            cache.invalidate({
+              __typename: "Team",
+              id: teamID as any,
+            })
+          },
+          createTeam: (result, _args, cache, _info) => {
+            cache.updateQuery(
+              {
+                query: gql`
+                  {
+                    myTeams {
+                      id
+                    }
+                  }
+                `,
+              },
+              (data: any) => {
+                console.log(result)
+                console.log(data)
+
+                data.myTeams.push(result.createTeam)
+                return data
+              }
+            )
+          },
+        },
+      },
+      storage,
+    }),
     authExchange({
       addAuthToOperation({ authState, operation }) {
         if (!authState || !authState.authToken) {
@@ -145,7 +240,9 @@ export function useGQLQuery<
   let subscription: { unsubscribe(): void } | null = null
 
   onMounted(() => {
-    const gqlQuery = client.query<any, QueryVariables>(query, variables)
+    const gqlQuery = client.query<any, QueryVariables>(query, variables, {
+      requestPolicy: "cache-and-network",
+    })
 
     const processResult = (result: OperationResult<any, QueryVariables>) =>
       pipe(
@@ -218,18 +315,21 @@ export const runMutation = <
     TE.tryCatch(
       () =>
         client
-          .mutation<MutationReturnType>(mutation, variables, additionalConfig)
+          .mutation<MutationReturnType>(mutation, variables, {
+            requestPolicy: "cache-and-network",
+            ...additionalConfig,
+          })
           .toPromise(),
       () => constVoid() as never // The mutation function can never fail, so this will never be called ;)
     ),
     TE.chainEitherK((result) =>
       pipe(
-        result.data as MutationReturnType, // If we have the result, then okay
+        result.data as MutationReturnType,
         E.fromNullable(
           // Result is null
           pipe(
-            result.error?.networkError, // Check for network error
-            E.fromNullable(result.error?.name), // If it is null, then it is a GQL error
+            result.error?.networkError,
+            E.fromNullable(result.error?.name),
             E.match(
               // The left case (network error was null)
               (gqlErr) =>
diff --git a/packages/hoppscotch-app/helpers/backend/mutations/Team.ts b/packages/hoppscotch-app/helpers/backend/mutations/Team.ts
index c761cf47d..8d23a33cf 100644
--- a/packages/hoppscotch-app/helpers/backend/mutations/Team.ts
+++ b/packages/hoppscotch-app/helpers/backend/mutations/Team.ts
@@ -3,6 +3,7 @@ import { pipe } from "fp-ts/function"
 import * as TE from "fp-ts/TaskEither"
 import { runMutation } from "../GQLClient"
 import { TeamName } from "../types/TeamName"
+import { TeamMemberRole } from "../types/TeamMemberRole"
 
 type DeleteTeamErrors =
   | "team/not_required_role"
@@ -24,6 +25,11 @@ export const createTeam = (name: TeamName) =>
         createTeam: {
           id: string
           name: string
+          members: Array<{ membershipID: string }>
+          myRole: TeamMemberRole
+          ownersCount: number
+          editorsCount: number
+          viewersCount: number
         }
       },
       CreateTeamErrors
@@ -33,6 +39,13 @@ export const createTeam = (name: TeamName) =>
           createTeam(name: $name) {
             id
             name
+            members {
+              membershipID
+            }
+            myRole
+            ownersCount
+            editorsCount
+            viewersCount
           }
         }
       `,
diff --git a/packages/hoppscotch-app/package.json b/packages/hoppscotch-app/package.json
index dab0e98e4..43b326ffc 100644
--- a/packages/hoppscotch-app/package.json
+++ b/packages/hoppscotch-app/package.json
@@ -37,6 +37,7 @@
     "@nuxtjs/toast": "^3.3.1",
     "@urql/core": "^2.3.3",
     "@urql/exchange-auth": "^0.1.6",
+    "@urql/exchange-graphcache": "^4.3.5",
     "acorn": "^8.5.0",
     "acorn-walk": "^8.2.0",
     "axios": "^0.21.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7758007a0..fd58acb60 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -50,6 +50,7 @@ importers:
       '@urql/core': ^2.3.3
       '@urql/devtools': ^2.0.3
       '@urql/exchange-auth': ^0.1.6
+      '@urql/exchange-graphcache': ^4.3.5
       '@vue/runtime-dom': ^3.2.19
       '@vue/test-utils': ^1.2.2
       acorn: ^8.5.0
@@ -122,6 +123,7 @@ importers:
       '@nuxtjs/toast': 3.3.1
       '@urql/core': 2.3.3_graphql@15.6.0
       '@urql/exchange-auth': 0.1.6_graphql@15.6.0
+      '@urql/exchange-graphcache': 4.3.5_graphql@15.6.0
       acorn: 8.5.0
       acorn-walk: 8.2.0
       axios: 0.21.4
@@ -4635,6 +4637,16 @@ packages:
       wonka: 4.0.15
     dev: false
 
+  /@urql/exchange-graphcache/4.3.5_graphql@15.6.0:
+    resolution: {integrity: sha512-q5/CzNtSxd5fW/YZ94KABmtQ34XliyS+KKKhyJ+/y66D7mYrN/ZEiuKTlnB7FTt9GLZ0yRtgIfXjwoGicB/Tlw==}
+    peerDependencies:
+      graphql: ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0
+    dependencies:
+      '@urql/core': 2.3.3_graphql@15.6.0
+      graphql: 15.6.0
+      wonka: 4.0.15
+    dev: false
+
   /@vue/babel-helper-vue-jsx-merge-props/1.2.1:
     resolution: {integrity: sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA==}
     dev: false

From 317de82be666c4d3009ca79424e74b732a77012b Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 5 Oct 2021 21:48:10 +0530
Subject: [PATCH 12/17] refactor: updated lint script

---
 package.json                                             | 3 ++-
 .../hoppscotch-app/.stylelintrc.js                       | 0
 packages/hoppscotch-app/package.json                     | 9 +++++----
 packages/hoppscotch-js-sandbox/package.json              | 4 +++-
 4 files changed, 10 insertions(+), 6 deletions(-)
 rename .stylelintrc.js => packages/hoppscotch-app/.stylelintrc.js (100%)

diff --git a/package.json b/package.json
index 48689bb09..f5801a9f8 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,9 @@
     "dev": "pnpm -r do-dev",
     "generate": "pnpm -r do-build-prod",
     "start": "pnpm -r do-prod-start",
+    "lint": "pnpm -r do-lint",
     "lintfix": "pnpm -r do-lintfix",
-    "pre-commit": "pnpm -r do-lintfix",
+    "pre-commit": "pnpm -r do-lint",
     "test": "pnpm -r do-test"
   },
   "workspaces": [
diff --git a/.stylelintrc.js b/packages/hoppscotch-app/.stylelintrc.js
similarity index 100%
rename from .stylelintrc.js
rename to packages/hoppscotch-app/.stylelintrc.js
diff --git a/packages/hoppscotch-app/package.json b/packages/hoppscotch-app/package.json
index 43b326ffc..eb0ac723f 100644
--- a/packages/hoppscotch-app/package.json
+++ b/packages/hoppscotch-app/package.json
@@ -14,15 +14,16 @@
     "start": "nuxt start",
     "generate": "nuxt generate --modern",
     "analyze": "npx nuxt build -a",
-    "lint:script": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .",
+    "lint:script": "eslint --ext .ts,.js,.vue --ignore-path .gitignore",
     "lint:style": "stylelint **/*.{css,scss,vue} --ignore-path .gitignore",
-    "lint": "npm run lint:script && npm run lint:style",
-    "lintfix": "eslint --ext .ts,.js,.vue --ignore-path .gitignore . --fix",
+    "lint": "pnpm run lint:script && pnpm run lint:style",
+    "lintfix": "eslint --ext .ts,.js,.vue --ignore-path .gitignore --fix",
     "test": "jest",
     "do-dev": "pnpm run dev",
     "do-build-prod": "pnpm run generate",
     "do-prod-start": "pnpm run start",
-    "do-lintfix": "pnpm run lint",
+    "do-lint": "pnpm run lint",
+    "do-lintfix": "pnpm run lintfix",
     "do-test": "pnpm run test"
   },
   "dependencies": {
diff --git a/packages/hoppscotch-js-sandbox/package.json b/packages/hoppscotch-js-sandbox/package.json
index c428fe27b..996c3da09 100644
--- a/packages/hoppscotch-js-sandbox/package.json
+++ b/packages/hoppscotch-js-sandbox/package.json
@@ -12,11 +12,13 @@
   "scripts": {
     "demo": "esrun src/demo.ts",
     "lint": "eslint --ext .ts,.js --ignore-path .gitignore",
+    "lintfix": "eslint --ext .ts,.js --ignore-path .gitignore --fix",
     "test": "npx jest",
     "build": "npx tsc",
     "clean": "npx tsc --build --clean",
     "prepublish": "pnpm run build",
-    "do-lintfix": "pnpm run lint",
+    "do-lint": "pnpm run lint",
+    "do-lintfix": "pnpm run lintfix",
     "do-build-prod": "pnpm run build",
     "do-test": "pnpm run test"
   },

From 109d4190ae00bf16400990c4c3ec53417c75fdca Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Tue, 5 Oct 2021 22:03:33 +0530
Subject: [PATCH 13/17] feat: probable user is displayed as authenticated

---
 .../hoppscotch-app/components/app/Header.vue  | 133 +++++++++---------
 packages/hoppscotch-app/helpers/fb/auth.ts    |  10 +-
 2 files changed, 72 insertions(+), 71 deletions(-)

diff --git a/packages/hoppscotch-app/components/app/Header.vue b/packages/hoppscotch-app/components/app/Header.vue
index 90e656468..ba2829831 100644
--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/packages/hoppscotch-app/components/app/Header.vue
@@ -109,81 +109,84 @@
   </div>
 </template>
 
-<script>
-import { defineComponent, ref } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import {
+  onMounted,
+  ref,
+  useContext,
+} from "@nuxtjs/composition-api"
 import intializePwa from "~/helpers/pwa"
-import { currentUser$ } from "~/helpers/fb/auth"
+import { probableUser$ } from "~/helpers/fb/auth"
 import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 import { defineActionHandler } from "~/helpers/actions"
 
-export default defineComponent({
-  setup() {
-    const showSupport = ref(false)
-    const showSearch = ref(false)
+const {
+  $toast,
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
-    defineActionHandler("modals.support.toggle", () => {
-      showSupport.value = !showSupport.value
-    })
-    defineActionHandler("modals.search.toggle", () => {
-      showSearch.value = !showSearch.value
-    })
+/**
+ * Once the PWA code is initialized, this holds a method
+ * that can be called to show the user the installation
+ * prompt.
+ */
+const showInstallPrompt = ref<undefined | null>(null)
 
-    return {
-      currentUser: useReadonlyStream(currentUser$, null),
-      showSupport,
-      showSearch,
-    }
-  },
-  data() {
-    return {
-      // Once the PWA code is initialized, this holds a method
-      // that can be called to show the user the installation
-      // prompt.
-      showInstallPrompt: null,
-      showLogin: false,
-      isOnLine: navigator.onLine,
-      showTeamsModal: false,
-    }
-  },
-  async mounted() {
-    window.addEventListener("online", () => {
-      this.isOnLine = true
-    })
-    window.addEventListener("offline", () => {
-      this.isOnLine = false
-    })
+const showSupport = ref(false)
+const showSearch = ref(false)
+const showLogin = ref(false)
+const showTeamsModal = ref(false)
 
-    // Initializes the PWA code - checks if the app is installed,
-    // etc.
-    this.showInstallPrompt = await intializePwa()
+const isOnLine = ref(navigator.onLine)
 
-    const cookiesAllowed = getLocalConfig("cookiesAllowed") === "yes"
-    if (!cookiesAllowed) {
-      this.$toast.show(this.$t("app.we_use_cookies"), {
-        icon: "cookie",
-        duration: 0,
-        action: [
-          {
-            text: this.$t("action.learn_more"),
-            onClick: (_, toastObject) => {
-              setLocalConfig("cookiesAllowed", "yes")
-              toastObject.goAway(0)
-              window
-                .open("https://docs.hoppscotch.io/privacy", "_blank")
-                .focus()
-            },
+const currentUser = useReadonlyStream(probableUser$, null)
+
+defineActionHandler("modals.support.toggle", () => {
+  showSupport.value = !showSupport.value
+})
+defineActionHandler("modals.search.toggle", () => {
+  showSearch.value = !showSearch.value
+})
+
+onMounted(async () => {
+  window.addEventListener("online", () => {
+    isOnLine.value = true
+  })
+  window.addEventListener("offline", () => {
+    isOnLine.value = false
+  })
+
+  // Initializes the PWA code - checks if the app is installed,
+  // etc.
+  // TODO: @liyasthomas, check this out (initializePwa is a () => Promise<void>)
+  await intializePwa()
+  showInstallPrompt.value = undefined
+
+  const cookiesAllowed = getLocalConfig("cookiesAllowed") === "yes"
+  if (!cookiesAllowed) {
+    $toast.show(t("app.we_use_cookies").toString(), {
+      icon: "cookie",
+      duration: 0,
+      action: [
+        {
+          text: t("action.learn_more").toString(),
+          onClick: (_, toastObject) => {
+            setLocalConfig("cookiesAllowed", "yes")
+            toastObject.goAway(0)
+            window.open("https://docs.hoppscotch.io/privacy", "_blank")?.focus()
           },
-          {
-            text: this.$t("action.dismiss"),
-            onClick: (_, toastObject) => {
-              setLocalConfig("cookiesAllowed", "yes")
-              toastObject.goAway(0)
-            },
+        },
+        {
+          text: t("action.dismiss").toString(),
+          onClick: (_, toastObject) => {
+            setLocalConfig("cookiesAllowed", "yes")
+            toastObject.goAway(0)
           },
-        ],
-      })
-    }
-  },
+        },
+      ],
+    })
+  }
 })
 </script>
diff --git a/packages/hoppscotch-app/helpers/fb/auth.ts b/packages/hoppscotch-app/helpers/fb/auth.ts
index d6f24b20c..6ccabf4f4 100644
--- a/packages/hoppscotch-app/helpers/fb/auth.ts
+++ b/packages/hoppscotch-app/helpers/fb/auth.ts
@@ -95,18 +95,16 @@ export function initAuth() {
 
   probableUser$.next(JSON.parse(getLocalConfig("login_state") ?? "null"))
 
-  currentUser$.subscribe((user) => {
+  onAuthStateChanged(auth, (user) => {
+    /** Whether the user was logged in before */
+    const wasLoggedIn = currentUser$.value !== null
+
     if (user) {
       probableUser$.next(user)
     } else {
       probableUser$.next(null)
       removeLocalConfig("login_state")
     }
-  })
-
-  onAuthStateChanged(auth, (user) => {
-    /** Whether the user was logged in before */
-    const wasLoggedIn = currentUser$.value !== null
 
     if (!user && extraSnapshotStop) {
       extraSnapshotStop()

From f73c8a45d97917ac70b35c30869cff4074874ef0 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Tue, 5 Oct 2021 22:17:29 +0530
Subject: [PATCH 14/17] chore(ui): minor ui improvements, empty teams state

---
 packages/hoppscotch-app/components/app/Header.vue  | 10 +++-------
 packages/hoppscotch-app/components/teams/Modal.vue |  2 +-
 packages/hoppscotch-app/components/teams/index.vue | 14 +++++++++++---
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/hoppscotch-app/components/app/Header.vue b/packages/hoppscotch-app/components/app/Header.vue
index ba2829831..d8556738f 100644
--- a/packages/hoppscotch-app/components/app/Header.vue
+++ b/packages/hoppscotch-app/components/app/Header.vue
@@ -54,10 +54,10 @@
             :label="$t('team.invite')"
             svg="user-plus"
             class="
-              !bg-green-400
+              !bg-green-500
               !text-green-500
               !bg-opacity-10
-              !hover:bg-opacity-10 !hover:text-green-600 !hover:bg-green-600
+              !hover:bg-opacity-10 !hover:text-green-400 !hover:bg-green-400
             "
             @click.native="showTeamsModal = true"
           />
@@ -110,11 +110,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  onMounted,
-  ref,
-  useContext,
-} from "@nuxtjs/composition-api"
+import { onMounted, ref, useContext } from "@nuxtjs/composition-api"
 import intializePwa from "~/helpers/pwa"
 import { probableUser$ } from "~/helpers/fb/auth"
 import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
diff --git a/packages/hoppscotch-app/components/teams/Modal.vue b/packages/hoppscotch-app/components/teams/Modal.vue
index bbe25ad3b..25c7e8a96 100644
--- a/packages/hoppscotch-app/components/teams/Modal.vue
+++ b/packages/hoppscotch-app/components/teams/Modal.vue
@@ -1,7 +1,7 @@
 <template>
   <SmartModal
     v-if="show"
-    :title="$t('app.invite_your_friends')"
+    :title="$t('team.title')"
     @close="$emit('hide-modal')"
   >
     <template #body>
diff --git a/packages/hoppscotch-app/components/teams/index.vue b/packages/hoppscotch-app/components/teams/index.vue
index c170960f5..e8b8793e3 100644
--- a/packages/hoppscotch-app/components/teams/index.vue
+++ b/packages/hoppscotch-app/components/teams/index.vue
@@ -19,10 +19,18 @@
           E.isRight(myTeams.data) &&
           myTeams.data.right.myTeams.length === 0
         "
-        class="flex items-center"
+        class="
+          flex flex-col
+          text-secondaryLight
+          p-4
+          items-center
+          justify-center
+        "
       >
-        <i class="mr-4 material-icons">help_outline</i>
-        {{ $t("empty.teams") }}
+        <i class="opacity-75 pb-2 material-icons">help_outline</i>
+        <span class="text-center">
+          {{ $t("empty.teams") }}
+        </span>
       </div>
       <div
         v-else-if="!myTeams.loading && E.isRight(myTeams.data)"

From a5fd39adf8eb869547bbb3b97009596e68a691b2 Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Wed, 6 Oct 2021 19:31:16 +0530
Subject: [PATCH 15/17] refactor: extract cache info to separate files and add
 more mutations

---
 .../helpers/backend/GQLClient.ts              |  92 +----------
 .../helpers/backend/caching/keys.ts           |   7 +
 .../helpers/backend/caching/optimistic.ts     |  13 ++
 .../helpers/backend/caching/updates.ts        | 147 ++++++++++++++++++
 .../helpers/backend/mutations/Team.ts         |  95 +++++++++++
 5 files changed, 268 insertions(+), 86 deletions(-)
 create mode 100644 packages/hoppscotch-app/helpers/backend/caching/keys.ts
 create mode 100644 packages/hoppscotch-app/helpers/backend/caching/optimistic.ts
 create mode 100644 packages/hoppscotch-app/helpers/backend/caching/updates.ts

diff --git a/packages/hoppscotch-app/helpers/backend/GQLClient.ts b/packages/hoppscotch-app/helpers/backend/GQLClient.ts
index 049fb7de9..5a6c64603 100644
--- a/packages/hoppscotch-app/helpers/backend/GQLClient.ts
+++ b/packages/hoppscotch-app/helpers/backend/GQLClient.ts
@@ -25,7 +25,9 @@ import * as TE from "fp-ts/TaskEither"
 import { pipe, constVoid } from "fp-ts/function"
 import { subscribe } from "wonka"
 import clone from "lodash/clone"
-import gql from "graphql-tag"
+import { keyDefs } from "./caching/keys"
+import { optimisticDefs } from "./caching/optimistic"
+import { updatesDef } from "./caching/updates"
 import {
   getAuthIDToken,
   probableUser$,
@@ -49,91 +51,9 @@ const client = createClient({
     dedupExchange,
     // TODO: Extract this outttttttt
     offlineExchange({
-      keys: {
-        User: (data) => (data as any).uid,
-        TeamMember: (data) => (data as any).membershipID,
-        Team: (data) => data.id as any,
-      },
-      optimistic: {
-        deleteTeam: () => true,
-        leaveTeam: () => true,
-      },
-      updates: {
-        Mutation: {
-          deleteTeam: (_r, { teamID }, cache, _info) => {
-            cache.updateQuery(
-              {
-                query: gql`
-                  query {
-                    myTeams {
-                      id
-                    }
-                  }
-                `,
-              },
-              (data: any) => {
-                console.log(data)
-                data.myTeams = (data as any).myTeams.filter(
-                  (x: any) => x.id !== teamID
-                )
-
-                return data
-              }
-            )
-
-            cache.invalidate({
-              __typename: "Team",
-              id: teamID as any,
-            })
-          },
-          leaveTeam: (_r, { teamID }, cache, _info) => {
-            cache.updateQuery(
-              {
-                query: gql`
-                  query {
-                    myTeams {
-                      id
-                    }
-                  }
-                `,
-              },
-              (data: any) => {
-                console.log(data)
-                data.myTeams = (data as any).myTeams.filter(
-                  (x: any) => x.id !== teamID
-                )
-
-                return data
-              }
-            )
-
-            cache.invalidate({
-              __typename: "Team",
-              id: teamID as any,
-            })
-          },
-          createTeam: (result, _args, cache, _info) => {
-            cache.updateQuery(
-              {
-                query: gql`
-                  {
-                    myTeams {
-                      id
-                    }
-                  }
-                `,
-              },
-              (data: any) => {
-                console.log(result)
-                console.log(data)
-
-                data.myTeams.push(result.createTeam)
-                return data
-              }
-            )
-          },
-        },
-      },
+      keys: keyDefs,
+      optimistic: optimisticDefs,
+      updates: updatesDef,
       storage,
     }),
     authExchange({
diff --git a/packages/hoppscotch-app/helpers/backend/caching/keys.ts b/packages/hoppscotch-app/helpers/backend/caching/keys.ts
new file mode 100644
index 000000000..41f3d4626
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/backend/caching/keys.ts
@@ -0,0 +1,7 @@
+import { KeyingConfig } from "@urql/exchange-graphcache";
+
+export const keyDefs: KeyingConfig = {
+  User: (data) => (data as any).uid,
+  TeamMember: (data) => (data as any).membershipID,
+  Team: (data) => data.id as any,
+}
\ No newline at end of file
diff --git a/packages/hoppscotch-app/helpers/backend/caching/optimistic.ts b/packages/hoppscotch-app/helpers/backend/caching/optimistic.ts
new file mode 100644
index 000000000..4f06fb063
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/backend/caching/optimistic.ts
@@ -0,0 +1,13 @@
+import { OptimisticMutationConfig } from "@urql/exchange-graphcache"
+
+export const optimisticDefs: OptimisticMutationConfig = {
+  deleteTeam: () => true,
+  leaveTeam: () => true,
+  renameTeam: ({ teamID, newName }) => ({
+    __typename: "Team",
+    id: teamID,
+    name: newName,
+  }),
+  removeTeamMember: () => true,
+  // TODO: updateTeamMemberRole
+}
diff --git a/packages/hoppscotch-app/helpers/backend/caching/updates.ts b/packages/hoppscotch-app/helpers/backend/caching/updates.ts
new file mode 100644
index 000000000..b2a0f82b3
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/backend/caching/updates.ts
@@ -0,0 +1,147 @@
+import { UpdatesConfig } from "@urql/exchange-graphcache"
+import gql from "graphql-tag"
+
+export const updatesDef: Partial<UpdatesConfig> = {
+  Mutation: {
+    deleteTeam: (_r, { teamID }, cache, _info) => {
+      cache.updateQuery(
+        {
+          query: gql`
+            query {
+              myTeams {
+                id
+              }
+            }
+          `,
+        },
+        (data: any) => {
+          data.myTeams = (data as any).myTeams.filter(
+            (x: any) => x.id !== teamID
+          )
+
+          return data
+        }
+      )
+
+      cache.invalidate({
+        __typename: "Team",
+        id: teamID as any,
+      })
+    },
+    leaveTeam: (_r, { teamID }, cache, _info) => {
+      cache.updateQuery(
+        {
+          query: gql`
+            query {
+              myTeams {
+                id
+              }
+            }
+          `,
+        },
+        (data: any) => {
+          data.myTeams = (data as any).myTeams.filter(
+            (x: any) => x.id !== teamID
+          )
+
+          return data
+        }
+      )
+
+      cache.invalidate({
+        __typename: "Team",
+        id: teamID as any,
+      })
+    },
+    createTeam: (result, _args, cache, _info) => {
+      cache.updateQuery(
+        {
+          query: gql`
+            {
+              myTeams {
+                id
+              }
+            }
+          `,
+        },
+        (data: any) => {
+          data.myTeams.push(result.createTeam)
+          return data
+        }
+      )
+    },
+    renameTeam: (_result, { teamID, newName }, cache, _info) => {
+      cache.updateQuery(
+        {
+          query: gql`
+            query GetTeam($teamID: ID!) {
+              team(teamID: $teamID) {
+                id
+                name
+              }
+            }
+          `,
+          variables: {
+            teamID,
+          },
+        },
+        (data: any) => {
+          data.team.name = newName
+          return data
+        }
+      )
+    },
+    removeTeamMember: (_result, { userUid, teamID }, cache) => {
+      cache.updateQuery(
+        {
+          query: gql`
+            query GetTeam($teamID: ID!) {
+              team(teamID: $teamID) {
+                members {
+                  user {
+                    uid
+                  }
+                }
+              }
+            }
+          `,
+          variables: {
+            teamID,
+          },
+        },
+        (data: any) => {
+          data.team.members = data.team.members.filter(
+            (x: any) => x.user.uid !== userUid
+          )
+          return data
+        }
+      )
+    },
+    updateTeamMemberRole: (result, { userUid, teamID }, cache) => {
+      cache.updateQuery(
+        {
+          query: gql`
+            query GetTeam($teamID: ID!) {
+              team(teamID: $teamID) {
+                members {
+                  user {
+                    uid
+                  }
+                }
+              }
+            }
+          `,
+          variables: {
+            teamID,
+          },
+        },
+        (data: any) => {
+          data.team.members = data.team.members.map((x: any) =>
+            x.user.uid !== userUid ? x : result
+          )
+          return data
+        }
+      )
+    },
+  },
+}
diff --git a/packages/hoppscotch-app/helpers/backend/mutations/Team.ts b/packages/hoppscotch-app/helpers/backend/mutations/Team.ts
index 8d23a33cf..480463854 100644
--- a/packages/hoppscotch-app/helpers/backend/mutations/Team.ts
+++ b/packages/hoppscotch-app/helpers/backend/mutations/Team.ts
@@ -18,6 +18,21 @@ type ExitTeamErrors =
 
 type CreateTeamErrors = "team/name_invalid" | "ea/not_invite_or_admin"
 
+type RenameTeamErrors =
+  | "ea/not_invite_or_admin"
+  | "team/invalid_id"
+  | "team/not_required_role"
+
+type UpdateTeamMemberRoleErrors =
+  | "ea/not_invite_or_admin"
+  | "team/invalid_id"
+  | "team/not_required_role"
+
+type RemoveTeamMemberErrors =
+  | "ea/not_invite_or_admin"
+  | "team/invalid_id"
+  | "team/not_required_role"
+
 export const createTeam = (name: TeamName) =>
   pipe(
     runMutation<
@@ -85,3 +100,83 @@ export const leaveTeam = (teamID: string) =>
       additionalTypenames: ["Team"],
     }
   )
+
+export const renameTeam = (teamID: string, newName: TeamName) =>
+  pipe(
+    runMutation<
+      {
+        renameTeam: {
+          id: string
+          name: TeamName
+        }
+      },
+      RenameTeamErrors
+    >(
+      gql`
+        mutation RenameTeam($newName: String!, $teamID: ID!) {
+          renameTeam(newName: $newName, teamID: $teamID) {
+            id
+            name
+          }
+        }
+      `,
+      {
+        newName,
+        teamID,
+      }
+    ),
+    TE.map(({ renameTeam }) => renameTeam)
+  )
+
+export const updateTeamMemberRole = (
+  userUid: string,
+  teamID: string,
+  newRole: TeamMemberRole
+) =>
+  pipe(
+    runMutation<
+      {
+        updateTeamMemberRole: {
+          membershipID: string
+          role: TeamMemberRole
+        }
+      },
+      UpdateTeamMemberRoleErrors
+    >(
+      gql`
+          mutation UpdateTeamMemberRole(
+            $newRole: TeamMemberRole!,
+            $userUid: ID!,
+            teamID: ID!
+          ) {
+            updateTeamMemberRole(
+              newRole: $newRole
+              userUid: $userUid
+              teamID: $teamID
+            ) {
+              membershipID
+              role
+            }
+          }
+        `,
+      {
+        newRole,
+        userUid,
+        teamID,
+      }
+    ),
+    TE.map(({ updateTeamMemberRole }) => updateTeamMemberRole)
+  )
+
+export const removeTeamMember = (userUid: string, teamID: string) =>
+  runMutation<void, RemoveTeamMemberErrors>(
+    gql`
+      mutation RemoveTeamMember($userUid: ID!, $teamID: ID!) {
+        removeTeamMember(userUid: $userUid, teamID: $teamID)
+      }
+    `,
+    {
+      userUid,
+      teamID,
+    }
+  )

From 337a60c8a4babbad9f657706c45b4defddaf7c9f Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Fri, 8 Oct 2021 23:44:23 +0530
Subject: [PATCH 16/17] feat: gql codegen + caching + optimistic

---
 .gitignore                                    |    2 +-
 packages/hoppscotch-app/.eslintrc.js          |    3 +
 packages/hoppscotch-app/.gitignore            |    6 +
 .../hoppscotch-app/components/teams/Team.vue  |    2 +-
 .../hoppscotch-app/components/teams/index.vue |   50 +-
 packages/hoppscotch-app/gql-codegen.yml       |   15 +
 .../helpers/backend/GQLClient.ts              |   34 +-
 .../helpers/backend/caching/keys.ts           |    4 +-
 .../helpers/backend/caching/resolvers.ts      |   14 +
 .../helpers/backend/caching/updates.ts        |  112 +-
 .../backend/gql/mutations/CreateTeam.graphql  |   20 +
 .../backend/gql/mutations/DeleteTeam.graphql  |    3 +
 .../backend/gql/mutations/LeaveTeam.graphql   |    3 +
 .../gql/mutations/RemoveTeamMember.graphql    |    3 +
 .../backend/gql/mutations/RenameTeam.graphql  |   13 +
 .../mutations/UpdateTeamMemberRole.graphql    |   14 +
 .../backend/gql/queries/GetTeam.graphql       |   13 +
 .../helpers/backend/gql/queries/Me.graphql    |    8 +
 .../backend/gql/queries/MyTeams.graphql       |   18 +
 .../helpers/backend/mutations/Team.ts         |  162 +--
 .../helpers/backend/types/TeamMemberRole.ts   |    1 -
 packages/hoppscotch-app/package.json          |   18 +-
 packages/hoppscotch-app/tsconfig.json         |    1 +
 pnpm-lock.yaml                                | 1101 ++++++++++++++---
 24 files changed, 1202 insertions(+), 418 deletions(-)
 create mode 100644 packages/hoppscotch-app/gql-codegen.yml
 create mode 100644 packages/hoppscotch-app/helpers/backend/caching/resolvers.ts
 create mode 100644 packages/hoppscotch-app/helpers/backend/gql/mutations/CreateTeam.graphql
 create mode 100644 packages/hoppscotch-app/helpers/backend/gql/mutations/DeleteTeam.graphql
 create mode 100644 packages/hoppscotch-app/helpers/backend/gql/mutations/LeaveTeam.graphql
 create mode 100644 packages/hoppscotch-app/helpers/backend/gql/mutations/RemoveTeamMember.graphql
 create mode 100644 packages/hoppscotch-app/helpers/backend/gql/mutations/RenameTeam.graphql
 create mode 100644 packages/hoppscotch-app/helpers/backend/gql/mutations/UpdateTeamMemberRole.graphql
 create mode 100644 packages/hoppscotch-app/helpers/backend/gql/queries/GetTeam.graphql
 create mode 100644 packages/hoppscotch-app/helpers/backend/gql/queries/Me.graphql
 create mode 100644 packages/hoppscotch-app/helpers/backend/gql/queries/MyTeams.graphql
 delete mode 100644 packages/hoppscotch-app/helpers/backend/types/TeamMemberRole.ts

diff --git a/.gitignore b/.gitignore
index 0d329c28a..ada8b332e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -109,4 +109,4 @@ tests/*/videos
 .netlify
 
 # Andrew's crazy Volar shim generator
-shims-volar.d.ts
+shims-volar.d.ts
\ No newline at end of file
diff --git a/packages/hoppscotch-app/.eslintrc.js b/packages/hoppscotch-app/.eslintrc.js
index d51ccaed3..9b30a5797 100644
--- a/packages/hoppscotch-app/.eslintrc.js
+++ b/packages/hoppscotch-app/.eslintrc.js
@@ -18,6 +18,9 @@ module.exports = {
     "plugin:prettier/recommended",
     "plugin:nuxt/recommended",
   ],
+  ignorePatterns: [
+    "helpers/backend/graphql.ts"
+  ],
   plugins: ["vue", "prettier"],
   // add your custom rules here
   rules: {
diff --git a/packages/hoppscotch-app/.gitignore b/packages/hoppscotch-app/.gitignore
index 0d329c28a..a3ab74b17 100644
--- a/packages/hoppscotch-app/.gitignore
+++ b/packages/hoppscotch-app/.gitignore
@@ -110,3 +110,9 @@ tests/*/videos
 
 # Andrew's crazy Volar shim generator
 shims-volar.d.ts
+
+# Hoppscotch Backend Schema Introspection JSON
+helpers/backend/backend-schema.json
+
+# GraphQL Type Generation
+helpers/backend/graphql.ts
\ No newline at end of file
diff --git a/packages/hoppscotch-app/components/teams/Team.vue b/packages/hoppscotch-app/components/teams/Team.vue
index 83f1c6ad0..49d37e695 100644
--- a/packages/hoppscotch-app/components/teams/Team.vue
+++ b/packages/hoppscotch-app/components/teams/Team.vue
@@ -73,11 +73,11 @@
 import { useContext } from "@nuxtjs/composition-api"
 import { pipe } from "fp-ts/function"
 import * as TE from "fp-ts/TaskEither"
+import { TeamMemberRole } from "~/helpers/backend/graphql"
 import {
   deleteTeam as backendDeleteTeam,
   leaveTeam,
 } from "~/helpers/backend/mutations/Team"
-import { TeamMemberRole } from "~/helpers/backend/types/TeamMemberRole"
 
 const props = defineProps<{
   team: {
diff --git a/packages/hoppscotch-app/components/teams/index.vue b/packages/hoppscotch-app/components/teams/index.vue
index e8b8793e3..51c38fbcf 100644
--- a/packages/hoppscotch-app/components/teams/index.vue
+++ b/packages/hoppscotch-app/components/teams/index.vue
@@ -71,12 +71,15 @@
 </template>
 
 <script setup lang="ts">
-import { gql } from "@apollo/client/core"
 import { ref, watchEffect } from "@nuxtjs/composition-api"
 import * as E from "fp-ts/Either"
 import { useGQLQuery } from "~/helpers/backend/GQLClient"
+import {
+  MyTeamsDocument,
+  MyTeamsQuery,
+  MyTeamsQueryVariables,
+} from "~/helpers/backend/graphql"
 import { MyTeamsQueryError } from "~/helpers/backend/QueryErrors"
-import { TeamMemberRole } from "~/helpers/backend/types/TeamMemberRole"
 
 defineProps<{
   modal: boolean
@@ -88,47 +91,10 @@ const editingTeam = ref<any>({}) // TODO: Check this out
 const editingTeamID = ref<any>("")
 
 const myTeams = useGQLQuery<
-  {
-    myTeams: Array<{
-      id: string
-      name: string
-      myRole: TeamMemberRole
-      ownersCount: number
-      members: Array<{
-        membershipID: string
-        user: {
-          photoURL: string | null
-          displayName: string
-          email: string
-          uid: string
-        }
-        role: TeamMemberRole
-      }>
-    }>
-  },
+  MyTeamsQuery,
+  MyTeamsQueryVariables,
   MyTeamsQueryError
->(
-  gql`
-    query GetMyTeams {
-      myTeams {
-        id
-        name
-        myRole
-        ownersCount
-        members {
-          membershipID
-          user {
-            photoURL
-            displayName
-            email
-            uid
-          }
-          role
-        }
-      }
-    }
-  `
-)
+>(MyTeamsDocument)
 
 watchEffect(() => {
   console.log(myTeams)
diff --git a/packages/hoppscotch-app/gql-codegen.yml b/packages/hoppscotch-app/gql-codegen.yml
new file mode 100644
index 000000000..238c50e00
--- /dev/null
+++ b/packages/hoppscotch-app/gql-codegen.yml
@@ -0,0 +1,15 @@
+overwrite: true
+schema: https://api.hoppscotch.io/graphql
+generates:
+  helpers/backend/graphql.ts:
+    documents: "**/*.graphql"
+    plugins:
+      - add:
+          content: // Auto-generated file (DO NOT EDIT!!!), refer gql-codegen.yml
+      - typescript
+      - typescript-operations
+      - typed-document-node
+
+  helpers/backend/backend-schema.json:
+    plugins:
+      - urql-introspection
diff --git a/packages/hoppscotch-app/helpers/backend/GQLClient.ts b/packages/hoppscotch-app/helpers/backend/GQLClient.ts
index 5a6c64603..1f4eb1a9e 100644
--- a/packages/hoppscotch-app/helpers/backend/GQLClient.ts
+++ b/packages/hoppscotch-app/helpers/backend/GQLClient.ts
@@ -6,7 +6,6 @@ import {
   reactive,
   Ref,
 } from "@nuxtjs/composition-api"
-import { DocumentNode } from "graphql/language"
 import {
   createClient,
   TypedDocumentNode,
@@ -28,6 +27,8 @@ import clone from "lodash/clone"
 import { keyDefs } from "./caching/keys"
 import { optimisticDefs } from "./caching/optimistic"
 import { updatesDef } from "./caching/updates"
+import { resolversDef } from "./caching/resolvers"
+import schema from "./backend-schema.json"
 import {
   getAuthIDToken,
   probableUser$,
@@ -49,11 +50,12 @@ const client = createClient({
   exchanges: [
     devtoolsExchange,
     dedupExchange,
-    // TODO: Extract this outttttttt
     offlineExchange({
+      schema: schema as any,
       keys: keyDefs,
       optimistic: optimisticDefs,
       updates: updatesDef,
+      resolvers: resolversDef,
       storage,
     }),
     authExchange({
@@ -142,10 +144,10 @@ export function isLoadedGQLQuery<QueryFailType extends string, QueryReturnType>(
 
 export function useGQLQuery<
   QueryReturnType = any,
-  QueryFailType extends string = "",
-  QueryVariables extends object = {}
+  QueryVariables extends object = {},
+  QueryFailType extends string = ""
 >(
-  query: string | DocumentNode | TypedDocumentNode<any, QueryVariables>,
+  query: TypedDocumentNode<QueryReturnType, QueryVariables>,
   variables?: QueryVariables,
   options: Partial<GQL_QUERY_OPTIONS> = DEFAULT_QUERY_OPTIONS
 ):
@@ -223,19 +225,19 @@ export function useGQLQuery<
 }
 
 export const runMutation = <
-  MutationReturnType = any,
-  MutationFailType extends string = "",
-  MutationVariables extends {} = {}
+  DocType,
+  DocVariables extends object | undefined,
+  DocErrors extends string
 >(
-  mutation: string | DocumentNode | TypedDocumentNode<any, MutationVariables>,
-  variables?: MutationVariables,
+  mutation: TypedDocumentNode<DocType, DocVariables>,
+  variables?: DocVariables,
   additionalConfig?: Partial<OperationContext>
-): TE.TaskEither<GQLError<MutationFailType>, NonNullable<MutationReturnType>> =>
+): TE.TaskEither<GQLError<DocErrors>, DocType> =>
   pipe(
     TE.tryCatch(
       () =>
         client
-          .mutation<MutationReturnType>(mutation, variables, {
+          .mutation(mutation, variables, {
             requestPolicy: "cache-and-network",
             ...additionalConfig,
           })
@@ -244,7 +246,7 @@ export const runMutation = <
     ),
     TE.chainEitherK((result) =>
       pipe(
-        result.data as MutationReturnType,
+        result.data,
         E.fromNullable(
           // Result is null
           pipe(
@@ -253,13 +255,13 @@ export const runMutation = <
             E.match(
               // The left case (network error was null)
               (gqlErr) =>
-                <GQLError<MutationFailType>>{
+                <GQLError<DocErrors>>{
                   type: "gql_error",
-                  error: gqlErr as MutationFailType,
+                  error: gqlErr,
                 },
               // The right case (it was a GraphQL Error)
               (networkErr) =>
-                <GQLError<MutationFailType>>{
+                <GQLError<DocErrors>>{
                   type: "network_error",
                   error: networkErr,
                 }
diff --git a/packages/hoppscotch-app/helpers/backend/caching/keys.ts b/packages/hoppscotch-app/helpers/backend/caching/keys.ts
index 41f3d4626..96c745201 100644
--- a/packages/hoppscotch-app/helpers/backend/caching/keys.ts
+++ b/packages/hoppscotch-app/helpers/backend/caching/keys.ts
@@ -1,7 +1,7 @@
-import { KeyingConfig } from "@urql/exchange-graphcache";
+import { KeyingConfig } from "@urql/exchange-graphcache"
 
 export const keyDefs: KeyingConfig = {
   User: (data) => (data as any).uid,
   TeamMember: (data) => (data as any).membershipID,
   Team: (data) => data.id as any,
-}
\ No newline at end of file
+}
diff --git a/packages/hoppscotch-app/helpers/backend/caching/resolvers.ts b/packages/hoppscotch-app/helpers/backend/caching/resolvers.ts
new file mode 100644
index 000000000..5927fdd52
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/backend/caching/resolvers.ts
@@ -0,0 +1,14 @@
+import { ResolverConfig } from "@urql/exchange-graphcache"
+
+export const resolversDef: ResolverConfig = {
+  Query: {
+    team: (_parent, { teamID }, _cache, _info) => ({
+      __typename: "Team",
+      id: teamID as any,
+    }),
+    user: (_parent, { uid }, _cache, _info) => ({
+      __typename: "User",
+      uid: uid as any,
+    }),
+  },
+}
diff --git a/packages/hoppscotch-app/helpers/backend/caching/updates.ts b/packages/hoppscotch-app/helpers/backend/caching/updates.ts
index b2a0f82b3..aecb3926d 100644
--- a/packages/hoppscotch-app/helpers/backend/caching/updates.ts
+++ b/packages/hoppscotch-app/helpers/backend/caching/updates.ts
@@ -1,18 +1,12 @@
 import { UpdatesConfig } from "@urql/exchange-graphcache"
-import gql from "graphql-tag"
+import { MyTeamsDocument } from "../graphql"
 
 export const updatesDef: Partial<UpdatesConfig> = {
   Mutation: {
     deleteTeam: (_r, { teamID }, cache, _info) => {
       cache.updateQuery(
         {
-          query: gql`
-            query {
-              myTeams {
-                id
-              }
-            }
-          `,
+          query: MyTeamsDocument,
         },
         (data: any) => {
           data.myTeams = (data as any).myTeams.filter(
@@ -31,13 +25,7 @@ export const updatesDef: Partial<UpdatesConfig> = {
     leaveTeam: (_r, { teamID }, cache, _info) => {
       cache.updateQuery(
         {
-          query: gql`
-            query {
-              myTeams {
-                id
-              }
-            }
-          `,
+          query: MyTeamsDocument,
         },
         (data: any) => {
           data.myTeams = (data as any).myTeams.filter(
@@ -56,13 +44,7 @@ export const updatesDef: Partial<UpdatesConfig> = {
     createTeam: (result, _args, cache, _info) => {
       cache.updateQuery(
         {
-          query: gql`
-            {
-              myTeams {
-                id
-              }
-            }
-          `,
+          query: MyTeamsDocument,
         },
         (data: any) => {
           data.myTeams.push(result.createTeam)
@@ -70,77 +52,25 @@ export const updatesDef: Partial<UpdatesConfig> = {
         }
       )
     },
-    renameTeam: (_result, { teamID, newName }, cache, _info) => {
-      cache.updateQuery(
-        {
-          query: gql`
-            query GetTeam($teamID: ID!) {
-              team(teamID: $teamID) {
-                id
-                name
-              }
-            }
-          `,
-          variables: {
-            teamID,
+    removeTeamMember: (_result, { teamID, userUid }, cache) => {
+      const newMembers = (
+        cache.resolve(
+          {
+            __typename: "Team",
+            id: teamID as string,
           },
-        },
-        (data: any) => {
-          data.team.name = newName
-          return data
-        }
+          "members"
+        ) as string[]
       )
-    },
-    removeTeamMember: (_result, { userUid, teamID }, cache) => {
-      cache.updateQuery(
-        {
-          query: gql`
-            query GetTeam($teamID: ID!) {
-              team(teamID: $teamID) {
-                members {
-                  user {
-                    uid
-                  }
-                }
-              }
-            }
-          `,
-          variables: {
-            teamID,
-          },
-        },
-        (data: any) => {
-          data.team.members = data.team.members.filter(
-            (x: any) => x.user.uid !== userUid
-          )
-          return data
-        }
-      )
-    },
-    updateTeamMemberRole: (result, { userUid, teamID }, cache) => {
-      cache.updateQuery(
-        {
-          query: gql`
-            query GetTeam($teamID: ID!) {
-              team(teamID: $teamID) {
-                members {
-                  user {
-                    uid
-                  }
-                }
-              }
-            }
-          `,
-          variables: {
-            teamID,
-          },
-        },
-        (data: any) => {
-          data.team.members = data.team.members.map((x: any) =>
-            x.user.uid !== userUid ? x : result
-          )
-          return data
-        }
+        .map((x) => [x, cache.resolve(x, "user") as string])
+        .map(([key, userKey]) => [key, cache.resolve(userKey, "uid") as string])
+        .filter(([_key, uid]) => uid !== userUid)
+        .map(([key]) => key)
+
+      cache.link(
+        { __typename: "Team", id: teamID as string },
+        "members",
+        newMembers
       )
     },
   },
diff --git a/packages/hoppscotch-app/helpers/backend/gql/mutations/CreateTeam.graphql b/packages/hoppscotch-app/helpers/backend/gql/mutations/CreateTeam.graphql
new file mode 100644
index 000000000..b638037a3
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/backend/gql/mutations/CreateTeam.graphql
@@ -0,0 +1,20 @@
+mutation CreateTeam($name: String!) {
+  createTeam(name: $name) {
+    id
+    name
+    members {
+      membershipID
+      role
+      user {
+        uid
+        displayName
+        email
+        photoURL
+      }
+    }
+    myRole
+    ownersCount
+    editorsCount
+    viewersCount
+  }
+}
\ No newline at end of file
diff --git a/packages/hoppscotch-app/helpers/backend/gql/mutations/DeleteTeam.graphql b/packages/hoppscotch-app/helpers/backend/gql/mutations/DeleteTeam.graphql
new file mode 100644
index 000000000..a63baa1a0
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/backend/gql/mutations/DeleteTeam.graphql
@@ -0,0 +1,3 @@
+mutation DeleteTeam($teamID: ID!) {
+  deleteTeam(teamID: $teamID)
+}
\ No newline at end of file
diff --git a/packages/hoppscotch-app/helpers/backend/gql/mutations/LeaveTeam.graphql b/packages/hoppscotch-app/helpers/backend/gql/mutations/LeaveTeam.graphql
new file mode 100644
index 000000000..8a0a46cf2
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/backend/gql/mutations/LeaveTeam.graphql
@@ -0,0 +1,3 @@
+mutation LeaveTeam($teamID: ID!) {
+  leaveTeam(teamID: $teamID)
+}
\ No newline at end of file
diff --git a/packages/hoppscotch-app/helpers/backend/gql/mutations/RemoveTeamMember.graphql b/packages/hoppscotch-app/helpers/backend/gql/mutations/RemoveTeamMember.graphql
new file mode 100644
index 000000000..4b3fba1b1
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/backend/gql/mutations/RemoveTeamMember.graphql
@@ -0,0 +1,3 @@
+mutation RemoveTeamMember($userUid: ID!, $teamID: ID!) {
+  removeTeamMember(userUid: $userUid, teamID: $teamID)
+}
\ No newline at end of file
diff --git a/packages/hoppscotch-app/helpers/backend/gql/mutations/RenameTeam.graphql b/packages/hoppscotch-app/helpers/backend/gql/mutations/RenameTeam.graphql
new file mode 100644
index 000000000..1bb736420
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/backend/gql/mutations/RenameTeam.graphql
@@ -0,0 +1,13 @@
+mutation RenameTeam($newName: String!, $teamID: ID!) {
+  renameTeam(newName: $newName, teamID: $teamID) {
+    id
+    name
+    members {
+      membershipID
+      user {
+        uid
+      }
+      role
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/hoppscotch-app/helpers/backend/gql/mutations/UpdateTeamMemberRole.graphql b/packages/hoppscotch-app/helpers/backend/gql/mutations/UpdateTeamMemberRole.graphql
new file mode 100644
index 000000000..2cbbd5459
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/backend/gql/mutations/UpdateTeamMemberRole.graphql
@@ -0,0 +1,14 @@
+mutation UpdateTeamMemberRole(
+  $newRole: TeamMemberRole!,
+  $userUid: ID!,
+  $teamID: ID!
+) {
+  updateTeamMemberRole(
+    newRole: $newRole
+    userUid: $userUid
+    teamID: $teamID
+  ) {
+    membershipID
+    role
+  }
+}
\ No newline at end of file
diff --git a/packages/hoppscotch-app/helpers/backend/gql/queries/GetTeam.graphql b/packages/hoppscotch-app/helpers/backend/gql/queries/GetTeam.graphql
new file mode 100644
index 000000000..a64ca567e
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/backend/gql/queries/GetTeam.graphql
@@ -0,0 +1,13 @@
+query GetTeam($teamID: ID!) {
+  team(teamID: $teamID) {
+    id
+    name
+    members {
+      membershipID
+      user {
+        uid
+      }
+      role
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/hoppscotch-app/helpers/backend/gql/queries/Me.graphql b/packages/hoppscotch-app/helpers/backend/gql/queries/Me.graphql
new file mode 100644
index 000000000..b1979547d
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/backend/gql/queries/Me.graphql
@@ -0,0 +1,8 @@
+query Me {
+  me {
+    uid
+    displayName
+    photoURL
+    eaInvited
+  }
+}
\ No newline at end of file
diff --git a/packages/hoppscotch-app/helpers/backend/gql/queries/MyTeams.graphql b/packages/hoppscotch-app/helpers/backend/gql/queries/MyTeams.graphql
new file mode 100644
index 000000000..c7fd2b23f
--- /dev/null
+++ b/packages/hoppscotch-app/helpers/backend/gql/queries/MyTeams.graphql
@@ -0,0 +1,18 @@
+query MyTeams {
+  myTeams {
+    id
+    name
+    myRole
+    ownersCount
+    members {
+      membershipID
+      user {
+        photoURL
+        displayName
+        email
+        uid
+      }
+      role
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/hoppscotch-app/helpers/backend/mutations/Team.ts b/packages/hoppscotch-app/helpers/backend/mutations/Team.ts
index 480463854..cb87e0374 100644
--- a/packages/hoppscotch-app/helpers/backend/mutations/Team.ts
+++ b/packages/hoppscotch-app/helpers/backend/mutations/Team.ts
@@ -1,9 +1,28 @@
-import gql from "graphql-tag"
 import { pipe } from "fp-ts/function"
 import * as TE from "fp-ts/TaskEither"
 import { runMutation } from "../GQLClient"
 import { TeamName } from "../types/TeamName"
-import { TeamMemberRole } from "../types/TeamMemberRole"
+import {
+  CreateTeamDocument,
+  CreateTeamMutation,
+  CreateTeamMutationVariables,
+  DeleteTeamDocument,
+  DeleteTeamMutation,
+  DeleteTeamMutationVariables,
+  LeaveTeamDocument,
+  LeaveTeamMutation,
+  LeaveTeamMutationVariables,
+  RemoveTeamMemberDocument,
+  RemoveTeamMemberMutation,
+  RemoveTeamMemberMutationVariables,
+  RenameTeamDocument,
+  RenameTeamMutation,
+  RenameTeamMutationVariables,
+  TeamMemberRole,
+  UpdateTeamMemberRoleDocument,
+  UpdateTeamMemberRoleMutation,
+  UpdateTeamMemberRoleMutationVariables,
+} from "../graphql"
 
 type DeleteTeamErrors =
   | "team/not_required_role"
@@ -11,7 +30,7 @@ type DeleteTeamErrors =
   | "team/member_not_found"
   | "ea/not_invite_or_admin"
 
-type ExitTeamErrors =
+type LeaveTeamErrors =
   | "team/invalid_id"
   | "team/member_not_found"
   | "ea/not_invite_or_admin"
@@ -36,48 +55,22 @@ type RemoveTeamMemberErrors =
 export const createTeam = (name: TeamName) =>
   pipe(
     runMutation<
-      {
-        createTeam: {
-          id: string
-          name: string
-          members: Array<{ membershipID: string }>
-          myRole: TeamMemberRole
-          ownersCount: number
-          editorsCount: number
-          viewersCount: number
-        }
-      },
+      CreateTeamMutation,
+      CreateTeamMutationVariables,
       CreateTeamErrors
-    >(
-      gql`
-        mutation CreateTeam($name: String!) {
-          createTeam(name: $name) {
-            id
-            name
-            members {
-              membershipID
-            }
-            myRole
-            ownersCount
-            editorsCount
-            viewersCount
-          }
-        }
-      `,
-      {
-        name,
-      }
-    ),
+    >(CreateTeamDocument, {
+      name,
+    }),
     TE.map(({ createTeam }) => createTeam)
   )
 
 export const deleteTeam = (teamID: string) =>
-  runMutation<void, DeleteTeamErrors>(
-    gql`
-      mutation DeleteTeam($teamID: ID!) {
-        deleteTeam(teamID: $teamID)
-      }
-    `,
+  runMutation<
+    DeleteTeamMutation,
+    DeleteTeamMutationVariables,
+    DeleteTeamErrors
+  >(
+    DeleteTeamDocument,
     {
       teamID,
     },
@@ -87,12 +80,8 @@ export const deleteTeam = (teamID: string) =>
   )
 
 export const leaveTeam = (teamID: string) =>
-  runMutation<void, ExitTeamErrors>(
-    gql`
-      mutation ExitTeam($teamID: ID!) {
-        leaveTeam(teamID: $teamID)
-      }
-    `,
+  runMutation<LeaveTeamMutation, LeaveTeamMutationVariables, LeaveTeamErrors>(
+    LeaveTeamDocument,
     {
       teamID,
     },
@@ -104,27 +93,13 @@ export const leaveTeam = (teamID: string) =>
 export const renameTeam = (teamID: string, newName: TeamName) =>
   pipe(
     runMutation<
-      {
-        renameTeam: {
-          id: string
-          name: TeamName
-        }
-      },
+      RenameTeamMutation,
+      RenameTeamMutationVariables,
       RenameTeamErrors
-    >(
-      gql`
-        mutation RenameTeam($newName: String!, $teamID: ID!) {
-          renameTeam(newName: $newName, teamID: $teamID) {
-            id
-            name
-          }
-        }
-      `,
-      {
-        newName,
-        teamID,
-      }
-    ),
+    >(RenameTeamDocument, {
+      newName,
+      teamID,
+    }),
     TE.map(({ renameTeam }) => renameTeam)
   )
 
@@ -135,48 +110,23 @@ export const updateTeamMemberRole = (
 ) =>
   pipe(
     runMutation<
-      {
-        updateTeamMemberRole: {
-          membershipID: string
-          role: TeamMemberRole
-        }
-      },
+      UpdateTeamMemberRoleMutation,
+      UpdateTeamMemberRoleMutationVariables,
       UpdateTeamMemberRoleErrors
-    >(
-      gql`
-          mutation UpdateTeamMemberRole(
-            $newRole: TeamMemberRole!,
-            $userUid: ID!,
-            teamID: ID!
-          ) {
-            updateTeamMemberRole(
-              newRole: $newRole
-              userUid: $userUid
-              teamID: $teamID
-            ) {
-              membershipID
-              role
-            }
-          }
-        `,
-      {
-        newRole,
-        userUid,
-        teamID,
-      }
-    ),
+    >(UpdateTeamMemberRoleDocument, {
+      newRole,
+      userUid,
+      teamID,
+    }),
     TE.map(({ updateTeamMemberRole }) => updateTeamMemberRole)
   )
 
 export const removeTeamMember = (userUid: string, teamID: string) =>
-  runMutation<void, RemoveTeamMemberErrors>(
-    gql`
-      mutation RemoveTeamMember($userUid: ID!, $teamID: ID!) {
-        removeTeamMember(userUid: $userUid, teamID: $teamID)
-      }
-    `,
-    {
-      userUid,
-      teamID,
-    }
-  )
+  runMutation<
+    RemoveTeamMemberMutation,
+    RemoveTeamMemberMutationVariables,
+    RemoveTeamMemberErrors
+  >(RemoveTeamMemberDocument, {
+    userUid,
+    teamID,
+  })
diff --git a/packages/hoppscotch-app/helpers/backend/types/TeamMemberRole.ts b/packages/hoppscotch-app/helpers/backend/types/TeamMemberRole.ts
deleted file mode 100644
index a98db8c4c..000000000
--- a/packages/hoppscotch-app/helpers/backend/types/TeamMemberRole.ts
+++ /dev/null
@@ -1 +0,0 @@
-export type TeamMemberRole = "OWNER" | "EDITOR" | "VIEWER"
\ No newline at end of file
diff --git a/packages/hoppscotch-app/package.json b/packages/hoppscotch-app/package.json
index eb0ac723f..7a830a56b 100644
--- a/packages/hoppscotch-app/package.json
+++ b/packages/hoppscotch-app/package.json
@@ -9,8 +9,11 @@
     "pnpm": ">=3"
   },
   "scripts": {
-    "dev": "nuxt",
+    "dev": "pnpx npm-run-all -p -l dev:*",
+    "dev:nuxt": "nuxt",
+    "dev:gql-codegen": "graphql-codegen --config gql-codegen.yml --watch",
     "build": "vue-tsc --noEmit && nuxt build",
+    "postinstall": "pnpm run gql-codegen",
     "start": "nuxt start",
     "generate": "nuxt generate --modern",
     "analyze": "npx nuxt build -a",
@@ -24,7 +27,8 @@
     "do-prod-start": "pnpm run start",
     "do-lint": "pnpm run lint",
     "do-lintfix": "pnpm run lintfix",
-    "do-test": "pnpm run test"
+    "do-test": "pnpm run test",
+    "gql-codegen": "graphql-codegen --config gql-codegen.yml"
   },
   "dependencies": {
     "@apollo/client": "^3.4.13",
@@ -80,6 +84,13 @@
     "@babel/preset-env": "^7.15.6",
     "@commitlint/cli": "^13.1.0",
     "@commitlint/config-conventional": "^13.1.0",
+    "@graphql-codegen/add": "^3.1.0",
+    "@graphql-codegen/cli": "2.2.0",
+    "@graphql-codegen/typed-document-node": "^2.1.4",
+    "@graphql-codegen/typescript": "2.2.2",
+    "@graphql-codegen/typescript-operations": "^2.1.6",
+    "@graphql-codegen/urql-introspection": "^2.1.0",
+    "@graphql-typed-document-node/core": "^3.1.0",
     "@nuxt/types": "^2.15.8",
     "@nuxt/typescript-build": "^2.1.0",
     "@nuxtjs/color-mode": "^2.1.1",
@@ -109,6 +120,7 @@
     "eslint-plugin-vue": "^7.18.0",
     "jest": "^27.2.2",
     "jest-serializer-vue": "^2.0.2",
+    "npm-run-all": "^4.1.5",
     "nuxt-windicss": "^1.2.4",
     "prettier": "^2.4.1",
     "pretty-quick": "^3.1.1",
@@ -124,4 +136,4 @@
     "vue-jest": "^3.0.7",
     "worker-loader": "^3.0.8"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/hoppscotch-app/tsconfig.json b/packages/hoppscotch-app/tsconfig.json
index ed74407f2..ad08f4af8 100644
--- a/packages/hoppscotch-app/tsconfig.json
+++ b/packages/hoppscotch-app/tsconfig.json
@@ -4,6 +4,7 @@
     "module": "ESNext",
     "moduleResolution": "Node",
     "lib": ["ESNext", "ESNext.AsyncIterable", "DOM"],
+    "resolveJsonModule": true,
     "esModuleInterop": true,
     "allowJs": true,
     "sourceMap": true,
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fd58acb60..77dff9734 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,6 +22,13 @@ importers:
       '@babel/preset-env': ^7.15.6
       '@commitlint/cli': ^13.1.0
       '@commitlint/config-conventional': ^13.1.0
+      '@graphql-codegen/add': ^3.1.0
+      '@graphql-codegen/cli': 2.2.0
+      '@graphql-codegen/typed-document-node': ^2.1.4
+      '@graphql-codegen/typescript': 2.2.2
+      '@graphql-codegen/typescript-operations': ^2.1.6
+      '@graphql-codegen/urql-introspection': ^2.1.0
+      '@graphql-typed-document-node/core': ^3.1.0
       '@hoppscotch/js-sandbox': workspace:^1.0.0
       '@nuxt/types': ^2.15.8
       '@nuxt/typescript-build': ^2.1.0
@@ -81,6 +88,7 @@ importers:
       lodash: ^4.17.21
       mustache: ^4.2.0
       node-interval-tree: ^1.3.3
+      npm-run-all: ^4.1.5
       nuxt: ^2.15.8
       nuxt-windicss: ^1.2.4
       paho-mqtt: ^1.1.0
@@ -164,6 +172,13 @@ importers:
       '@babel/preset-env': 7.15.6_@babel+core@7.15.5
       '@commitlint/cli': 13.1.0
       '@commitlint/config-conventional': 13.1.0
+      '@graphql-codegen/add': 3.1.0_graphql@15.6.0
+      '@graphql-codegen/cli': 2.2.0_graphql@15.6.0+typescript@4.4.3
+      '@graphql-codegen/typed-document-node': 2.1.4_graphql@15.6.0
+      '@graphql-codegen/typescript': 2.2.2_graphql@15.6.0
+      '@graphql-codegen/typescript-operations': 2.1.6_graphql@15.6.0
+      '@graphql-codegen/urql-introspection': 2.1.0_graphql@15.6.0
+      '@graphql-typed-document-node/core': 3.1.0_graphql@15.6.0
       '@nuxt/types': 2.15.8_sass@1.42.1
       '@nuxt/typescript-build': 2.1.0_@nuxt+types@2.15.8
       '@nuxtjs/color-mode': 2.1.1
@@ -193,6 +208,7 @@ importers:
       eslint-plugin-vue: 7.18.0_eslint@7.32.0
       jest: 27.2.2
       jest-serializer-vue: 2.0.2
+      npm-run-all: 4.1.5
       nuxt-windicss: 1.2.4_typescript@4.4.3
       prettier: 2.4.1
       pretty-quick: 3.1.1_prettier@2.4.1
@@ -416,6 +432,10 @@ packages:
       tslib: 2.0.3
     dev: false
 
+  /@ardatan/fetch-event-source/2.0.2:
+    resolution: {integrity: sha512-mcpz/wJ7s50PJIVz4OQ1Yim3w/AAchtYtIg0QMWiMR2cZZoI9t23hRyqeumtD5EmyJu0fxtjmQ5WY8GI86V4rQ==}
+    dev: true
+
   /@babel/code-frame/7.12.11:
     resolution: {integrity: sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==}
     dependencies:
@@ -964,7 +984,6 @@ packages:
     dependencies:
       '@babel/core': 7.15.5
       '@babel/helper-plugin-utils': 7.14.5
-    dev: false
 
   /@babel/plugin-syntax-import-meta/7.10.4_@babel+core@7.15.5:
     resolution: {integrity: sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==}
@@ -991,7 +1010,6 @@ packages:
     dependencies:
       '@babel/core': 7.15.5
       '@babel/helper-plugin-utils': 7.14.5
-    dev: false
 
   /@babel/plugin-syntax-logical-assignment-operators/7.10.4_@babel+core@7.15.5:
     resolution: {integrity: sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==}
@@ -1182,7 +1200,6 @@ packages:
       '@babel/core': 7.15.5
       '@babel/helper-plugin-utils': 7.14.5
       '@babel/plugin-syntax-flow': 7.14.5_@babel+core@7.15.5
-    dev: false
 
   /@babel/plugin-transform-for-of/7.15.4_@babel+core@7.15.5:
     resolution: {integrity: sha512-DRTY9fA751AFBDh2oxydvVm4SYevs5ILTWLs6xKXps4Re/KG5nfUkr+TdHCrRWB8C69TlzVgA9b3RmGWmgN9LA==}
@@ -1331,7 +1348,6 @@ packages:
     dependencies:
       '@babel/core': 7.15.5
       '@babel/helper-plugin-utils': 7.14.5
-    dev: false
 
   /@babel/plugin-transform-react-jsx/7.14.9_@babel+core@7.15.5:
     resolution: {integrity: sha512-30PeETvS+AeD1f58i1OVyoDlVYQhap/K20ZrMjLmmzmC2AYR/G43D4sdJAaDAqCD3MYpSWbmrz3kES158QSLjw==}
@@ -1345,7 +1361,6 @@ packages:
       '@babel/helper-plugin-utils': 7.14.5
       '@babel/plugin-syntax-jsx': 7.14.5_@babel+core@7.15.5
       '@babel/types': 7.15.6
-    dev: false
 
   /@babel/plugin-transform-regenerator/7.14.5_@babel+core@7.15.5:
     resolution: {integrity: sha512-NVIY1W3ITDP5xQl50NgTKlZ0GrotKtLna08/uGY6ErQt6VEQZXla86x/CTddm5gZdcr+5GSsvMeTmWA5Ii6pkg==}
@@ -1797,6 +1812,21 @@ packages:
       - typescript
     dev: false
 
+  /@endemolshinegroup/cosmiconfig-typescript-loader/3.0.2_e9677aae07926e7f535c02f0a1c9b8a5:
+    resolution: {integrity: sha512-QRVtqJuS1mcT56oHpVegkKBlgtWjXw/gHNWO3eL9oyB5Sc7HBoc2OLG/nYpVfT/Jejvo3NUrD0Udk7XgoyDKkA==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      cosmiconfig: '>=6'
+    dependencies:
+      cosmiconfig: 7.0.0
+      lodash.get: 4.4.2
+      make-error: 1.3.6
+      ts-node: 9.1.1_typescript@4.4.3
+      tslib: 2.3.1
+    transitivePeerDependencies:
+      - typescript
+    dev: true
+
   /@eslint/eslintrc/0.4.3:
     resolution: {integrity: sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==}
     engines: {node: ^10.12.0 || >=12.0.0}
@@ -2256,6 +2286,185 @@ packages:
     resolution: {integrity: sha512-82cpyJyKRoQoRi+14ibCeGPu0CwypgtBAdBhq1WfvagpCZNKqwXbKwXllYSMG91DhmG4jt9gN8eP6lGOtozuaw==}
     dev: false
 
+  /@graphql-codegen/add/3.1.0_graphql@15.6.0:
+    resolution: {integrity: sha512-vRRHpuUFadYXnPrb5RNiIzm3Ao39UxjvrdX760lEfXh2qeG7YddM5QFC+ev2BH3X452R15gv/gf/rXy0+Hqm1A==}
+    peerDependencies:
+      graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0
+    dependencies:
+      '@graphql-codegen/plugin-helpers': 2.1.1_graphql@15.6.0
+      graphql: 15.6.0
+      tslib: 2.3.1
+    dev: true
+
+  /@graphql-codegen/cli/2.2.0_graphql@15.6.0+typescript@4.4.3:
+    resolution: {integrity: sha512-f4EsScASza57aPM1z6eKAaYmwz83B/LsmiyBb8phy1NfbWea2IBUCfEgtvOHN85xbiMpdQfNtckE2mC84yH80w==}
+    hasBin: true
+    peerDependencies:
+      graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0
+    dependencies:
+      '@graphql-codegen/core': 2.1.0_graphql@15.6.0
+      '@graphql-codegen/plugin-helpers': 2.1.1_graphql@15.6.0
+      '@graphql-tools/apollo-engine-loader': 7.1.0_graphql@15.6.0
+      '@graphql-tools/code-file-loader': 7.2.0_graphql@15.6.0
+      '@graphql-tools/git-loader': 7.1.0_graphql@15.6.0
+      '@graphql-tools/github-loader': 7.1.0_graphql@15.6.0
+      '@graphql-tools/graphql-file-loader': 7.3.0_graphql@15.6.0
+      '@graphql-tools/json-file-loader': 7.3.0_graphql@15.6.0
+      '@graphql-tools/load': 7.3.2_graphql@15.6.0
+      '@graphql-tools/prisma-loader': 7.1.0_graphql@15.6.0
+      '@graphql-tools/url-loader': 7.2.0_graphql@15.6.0
+      '@graphql-tools/utils': 8.2.5_graphql@15.6.0
+      ansi-escapes: 4.3.2
+      chalk: 4.1.2
+      change-case-all: 1.0.14
+      chokidar: 3.5.2
+      common-tags: 1.8.0
+      cosmiconfig: 7.0.1
+      debounce: 1.2.1
+      dependency-graph: 0.11.0
+      detect-indent: 6.1.0
+      glob: 7.2.0
+      globby: 11.0.4
+      graphql: 15.6.0
+      graphql-config: 4.0.1_graphql@15.6.0+typescript@4.4.3
+      inquirer: 7.3.3
+      is-glob: 4.0.1
+      json-to-pretty-yaml: 1.2.2
+      latest-version: 5.1.0
+      listr: 0.14.3
+      listr-update-renderer: 0.5.0_listr@0.14.3
+      log-symbols: 4.1.0
+      minimatch: 3.0.4
+      mkdirp: 1.0.4
+      string-env-interpolation: 1.0.1
+      ts-log: 2.2.3
+      tslib: 2.3.1
+      valid-url: 1.0.9
+      wrap-ansi: 7.0.0
+      yaml: 1.10.2
+      yargs: 17.2.1
+    transitivePeerDependencies:
+      - '@types/node'
+      - bufferutil
+      - supports-color
+      - typescript
+      - utf-8-validate
+      - zen-observable
+    dev: true
+
+  /@graphql-codegen/core/2.1.0_graphql@15.6.0:
+    resolution: {integrity: sha512-pNzpBZWP+B7doPtANN61CMoBq382KMuGierbZXyilrO6RAqgN/DgU4UEIaQFat1BfiVA5GFDAQryysOv4glU8g==}
+    peerDependencies:
+      graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0
+    dependencies:
+      '@graphql-codegen/plugin-helpers': 2.1.1_graphql@15.6.0
+      '@graphql-tools/schema': 8.2.0_graphql@15.6.0
+      '@graphql-tools/utils': 8.2.5_graphql@15.6.0
+      graphql: 15.6.0
+      tslib: 2.3.1
+    dev: true
+
+  /@graphql-codegen/plugin-helpers/2.1.1_graphql@15.6.0:
+    resolution: {integrity: sha512-7jjN9fekMQkpd7cRTbaBxgqt/hkR3CXeOUSsEyHFDDHKtvCrnev3iyc75IeWXpO9tOwDE8mVPTzEZnu4QukrNA==}
+    peerDependencies:
+      graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0
+    dependencies:
+      '@graphql-tools/utils': 8.2.5_graphql@15.6.0
+      change-case-all: 1.0.14
+      common-tags: 1.8.0
+      graphql: 15.6.0
+      import-from: 4.0.0
+      lodash: 4.17.21
+      tslib: 2.3.1
+    dev: true
+
+  /@graphql-codegen/typed-document-node/2.1.4_graphql@15.6.0:
+    resolution: {integrity: sha512-TP8jbppssZLBL7HgV/AQg2yVL6FP5qNjWpo+S45n0FNutFQvtSUrCe5Ji6+xFUHDoRBbeWIXeQPJPjURjlIbfA==}
+    peerDependencies:
+      graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0
+    dependencies:
+      '@graphql-codegen/plugin-helpers': 2.1.1_graphql@15.6.0
+      '@graphql-codegen/visitor-plugin-common': 2.2.1_graphql@15.6.0
+      auto-bind: 4.0.0
+      change-case-all: 1.0.14
+      graphql: 15.6.0
+      tslib: 2.3.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@graphql-codegen/typescript-operations/2.1.6_graphql@15.6.0:
+    resolution: {integrity: sha512-TtvrlLcZNNotxz3UAKBDrPeT1eL2bi1CWwDSzKiViX5lEDiMp40p/Gxa7P/n9n0n5ZfYzrl06Id6l/WMlUy6Kw==}
+    peerDependencies:
+      graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0
+    dependencies:
+      '@graphql-codegen/plugin-helpers': 2.1.1_graphql@15.6.0
+      '@graphql-codegen/typescript': 2.2.2_graphql@15.6.0
+      '@graphql-codegen/visitor-plugin-common': 2.2.1_graphql@15.6.0
+      auto-bind: 4.0.0
+      graphql: 15.6.0
+      tslib: 2.3.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@graphql-codegen/typescript/2.2.2_graphql@15.6.0:
+    resolution: {integrity: sha512-prcB4nNi2iQzZRLla6N6kEPmnE2WU1zz5+sEBcZcqphjWERqQ3zwdSKsuLorE/XxMp500p6BQ96cVo+bFkmVtA==}
+    peerDependencies:
+      graphql: ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0
+    dependencies:
+      '@graphql-codegen/plugin-helpers': 2.1.1_graphql@15.6.0
+      '@graphql-codegen/visitor-plugin-common': 2.2.1_graphql@15.6.0
+      auto-bind: 4.0.0
+      graphql: 15.6.0
+      tslib: 2.3.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@graphql-codegen/urql-introspection/2.1.0_graphql@15.6.0:
+    resolution: {integrity: sha512-OBKKJqNsySrslQMKRiL5yLtLXHKYK5WMG6sDLTOBwz12hChqqeCKu39bfFGgP26Pe6x1YWGqHpnsXPTMPWaNjQ==}
+    peerDependencies:
+      graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0
+    dependencies:
+      '@graphql-codegen/plugin-helpers': 2.1.1_graphql@15.6.0
+      '@urql/introspection': 0.3.0_graphql@15.6.0
+      graphql: 15.6.0
+      tslib: 2.3.1
+    dev: true
+
+  /@graphql-codegen/visitor-plugin-common/2.2.1_graphql@15.6.0:
+    resolution: {integrity: sha512-RbTCaayVCAEMp2jRUAwAp6Y49gq7K+SV/rwzdkoMUJUOUu4PxM4bCbWdnnXr0CIpbwjYIOnoqx729q6riT5+hg==}
+    peerDependencies:
+      graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0
+    dependencies:
+      '@graphql-codegen/plugin-helpers': 2.1.1_graphql@15.6.0
+      '@graphql-tools/optimize': 1.1.0_graphql@15.6.0
+      '@graphql-tools/relay-operation-optimizer': 6.4.0_graphql@15.6.0
+      '@graphql-tools/utils': 8.2.2_graphql@15.6.0
+      auto-bind: 4.0.0
+      change-case-all: 1.0.14
+      dependency-graph: 0.11.0
+      graphql: 15.6.0
+      graphql-tag: 2.12.5_graphql@15.6.0
+      parse-filepath: 1.0.2
+      tslib: 2.3.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
+  /@graphql-tools/apollo-engine-loader/7.1.0_graphql@15.6.0:
+    resolution: {integrity: sha512-JKK34xQiB1l2sBfi8G5c1HZZkleQbwOlLAkySycKTrU+VMzu5lEjhzYwowIbLLjTthjUHQkRFANHkxvB42t5SQ==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@graphql-tools/utils': 8.2.5_graphql@15.6.0
+      cross-fetch: 3.1.4
+      graphql: 15.6.0
+      sync-fetch: 0.3.0
+      tslib: 2.3.1
+    dev: true
+
   /@graphql-tools/batch-delegate/6.2.6_graphql@15.6.0:
     resolution: {integrity: sha512-QUoE9pQtkdNPFdJHSnBhZtUfr3M7pIRoXoMR+TG7DK2Y62ISKbT/bKtZEUU1/2v5uqd5WVIvw9dF8gHDSJAsSA==}
     peerDependencies:
@@ -2279,6 +2488,18 @@ packages:
       value-or-promise: 1.0.6
     dev: false
 
+  /@graphql-tools/batch-execute/8.1.1_graphql@15.6.0:
+    resolution: {integrity: sha512-euRh9Fxhrpb99sbPk++hPHEZ9c0zmLfh/1zOk2BMxWOic65WlNDuFsNV2S6ddlruu9PNL6dEpBteiTfRWxpMfw==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@graphql-tools/utils': 8.2.5_graphql@15.6.0
+      dataloader: 2.0.0
+      graphql: 15.6.0
+      tslib: 2.3.1
+      value-or-promise: 1.0.10
+    dev: true
+
   /@graphql-tools/code-file-loader/6.3.1_graphql@15.6.0:
     resolution: {integrity: sha512-ZJimcm2ig+avgsEOWWVvAaxZrXXhiiSZyYYOJi0hk9wh5BxZcLUNKkTp6EFnZE/jmGUwuos3pIjUD3Hwi3Bwhg==}
     peerDependencies:
@@ -2292,6 +2513,21 @@ packages:
       - supports-color
     dev: false
 
+  /@graphql-tools/code-file-loader/7.2.0_graphql@15.6.0:
+    resolution: {integrity: sha512-DYiNqCTHGprA6cysScPGfYctGuxqarJExv+1s+2cKoR0VNiJDHQlinzAp/lo6mR704NJi5St9PVCt6FPKq68vg==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@graphql-tools/graphql-tag-pluck': 7.1.2_graphql@15.6.0
+      '@graphql-tools/utils': 8.2.5_graphql@15.6.0
+      globby: 11.0.4
+      graphql: 15.6.0
+      tslib: 2.3.1
+      unixify: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@graphql-tools/delegate/6.2.4_graphql@15.6.0:
     resolution: {integrity: sha512-mXe6DfoWmq49kPcDrpKHgC2DSWcD5q0YCaHHoXYPAOlnLH8VMTY8BxcE8y/Do2eyg+GLcwAcrpffVszWMwqw0w==}
     peerDependencies:
@@ -2321,6 +2557,20 @@ packages:
       value-or-promise: 1.0.6
     dev: false
 
+  /@graphql-tools/delegate/8.2.2_graphql@15.6.0:
+    resolution: {integrity: sha512-1fV9JePOBjYHwcYEhKkYDU9S0ttDs1qZHh8KvkJc05fH57ahsdedm97s4l8YNBaaXqLVjSq8aTUEsXqOZ/Fefg==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@graphql-tools/batch-execute': 8.1.1_graphql@15.6.0
+      '@graphql-tools/schema': 8.2.0_graphql@15.6.0
+      '@graphql-tools/utils': 8.2.5_graphql@15.6.0
+      dataloader: 2.0.0
+      graphql: 15.6.0
+      tslib: 2.3.1
+      value-or-promise: 1.0.10
+    dev: true
+
   /@graphql-tools/git-loader/6.2.6_graphql@15.6.0:
     resolution: {integrity: sha512-ooQTt2CaG47vEYPP3CPD+nbA0F+FYQXfzrB1Y1ABN9K3d3O2RK3g8qwslzZaI8VJQthvKwt0A95ZeE4XxteYfw==}
     peerDependencies:
@@ -2334,6 +2584,22 @@ packages:
       - supports-color
     dev: false
 
+  /@graphql-tools/git-loader/7.1.0_graphql@15.6.0:
+    resolution: {integrity: sha512-n6JBKc7Po8aE9/pueH0wO2EXicueuCT3VCo9YcFcCkdEl1tUZwIoIUgNUqgki2eS8u2Z76F2EWZwWBWO2ipXEw==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@graphql-tools/graphql-tag-pluck': 7.1.2_graphql@15.6.0
+      '@graphql-tools/utils': 8.2.5_graphql@15.6.0
+      graphql: 15.6.0
+      is-glob: 4.0.1
+      micromatch: 4.0.4
+      tslib: 2.3.1
+      unixify: 1.0.0
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@graphql-tools/github-loader/6.2.5_graphql@15.6.0:
     resolution: {integrity: sha512-DLuQmYeNNdPo8oWus8EePxWCfCAyUXPZ/p1PWqjrX/NGPyH2ZObdqtDAfRHztljt0F/qkBHbGHCEk2TKbRZTRw==}
     peerDependencies:
@@ -2348,6 +2614,20 @@ packages:
       - supports-color
     dev: false
 
+  /@graphql-tools/github-loader/7.1.0_graphql@15.6.0:
+    resolution: {integrity: sha512-RL8bREscN+CO/gP58BE+aA+PXUIwMY7okmrWtrupjRyo1IYv0bfaZXKHRF+qb2gqlJxksM5Q9HevO/MIj6T1eQ==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@graphql-tools/graphql-tag-pluck': 7.1.2_graphql@15.6.0
+      '@graphql-tools/utils': 8.2.5_graphql@15.6.0
+      cross-fetch: 3.1.4
+      graphql: 15.6.0
+      tslib: 2.3.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@graphql-tools/graphql-file-loader/6.2.7_graphql@15.6.0:
     resolution: {integrity: sha512-5k2SNz0W87tDcymhEMZMkd6/vs6QawDyjQXWtqkuLTBF3vxjxPD1I4dwHoxgWPIjjANhXybvulD7E+St/7s9TQ==}
     peerDependencies:
@@ -2359,6 +2639,19 @@ packages:
       tslib: 2.1.0
     dev: false
 
+  /@graphql-tools/graphql-file-loader/7.3.0_graphql@15.6.0:
+    resolution: {integrity: sha512-m5ox7GuVI1EibDygW+P4jpmA78viRcfOw0eiE/EiuCljQsIJcA4iXTsc22KbawS+EfPS0v6hXkk/JhnhXoeX4A==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@graphql-tools/import': 6.5.2_graphql@15.6.0
+      '@graphql-tools/utils': 8.2.5_graphql@15.6.0
+      globby: 11.0.4
+      graphql: 15.6.0
+      tslib: 2.3.1
+      unixify: 1.0.0
+    dev: true
+
   /@graphql-tools/graphql-tag-pluck/6.5.1_graphql@15.6.0:
     resolution: {integrity: sha512-7qkm82iFmcpb8M6/yRgzjShtW6Qu2OlCSZp8uatA3J0eMl87TxyJoUmL3M3UMMOSundAK8GmoyNVFUrueueV5Q==}
     peerDependencies:
@@ -2374,6 +2667,21 @@ packages:
       - supports-color
     dev: false
 
+  /@graphql-tools/graphql-tag-pluck/7.1.2_graphql@15.6.0:
+    resolution: {integrity: sha512-YVvzG6UaWJQgbU+VvjFY5rZQQDvkyNX+rEbqYpJOt1muhP67dAwAGyWMyDcyEi4QAsEpSvaxfy/Km6lR/NHwWA==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@babel/parser': 7.15.7
+      '@babel/traverse': 7.15.4
+      '@babel/types': 7.15.6
+      '@graphql-tools/utils': 8.2.5_graphql@15.6.0
+      graphql: 15.6.0
+      tslib: 2.3.1
+    transitivePeerDependencies:
+      - supports-color
+    dev: true
+
   /@graphql-tools/import/6.4.1_graphql@15.6.0:
     resolution: {integrity: sha512-nFWo2dI9XXs0hsBscHnTSJNfgFq2gA1bw0qbCXyQga1PJclZViO8SxcHqCf2JmShRpTFsyzsDjKA8xGKDDs8PQ==}
     peerDependencies:
@@ -2384,6 +2692,17 @@ packages:
       tslib: 2.3.1
     dev: false
 
+  /@graphql-tools/import/6.5.2_graphql@15.6.0:
+    resolution: {integrity: sha512-Hi3aEWHK6B83d+mjO7CdX1xhaBwEon3ZLc9Ch1ivrU7vay84k6UQkoY/B4NdOZuLKrKlt920UtoDbGoZFFYlHA==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@graphql-tools/utils': 8.2.5_graphql@15.6.0
+      graphql: 15.6.0
+      resolve-from: 5.0.0
+      tslib: 2.3.1
+    dev: true
+
   /@graphql-tools/json-file-loader/6.2.6_graphql@15.6.0:
     resolution: {integrity: sha512-CnfwBSY5926zyb6fkDBHnlTblHnHI4hoBALFYXnrg0Ev4yWU8B04DZl/pBRUc459VNgO2x8/mxGIZj2hPJG1EA==}
     peerDependencies:
@@ -2394,6 +2713,18 @@ packages:
       tslib: 2.0.3
     dev: false
 
+  /@graphql-tools/json-file-loader/7.3.0_graphql@15.6.0:
+    resolution: {integrity: sha512-lTh3HbLpKnONh8vOsE6iKWxzfNIpYRGqNCmpUJ7vl+UoJBVdVneZzqHMrb/Rxk8pdhjbwV0Di2l6I+bSULPo9Q==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@graphql-tools/utils': 8.2.5_graphql@15.6.0
+      globby: 11.0.4
+      graphql: 15.6.0
+      tslib: 2.3.1
+      unixify: 1.0.0
+    dev: true
+
   /@graphql-tools/links/6.2.5_fbc2669a39cce3d0d7a36ba453108f25:
     resolution: {integrity: sha512-XeGDioW7F+HK6HHD/zCeF0HRC9s12NfOXAKv1HC0J7D50F4qqMvhdS/OkjzLoBqsgh/Gm8icRc36B5s0rOA9ig==}
     peerDependencies:
@@ -2440,6 +2771,18 @@ packages:
       valid-url: 1.0.9
     dev: false
 
+  /@graphql-tools/load/7.3.2_graphql@15.6.0:
+    resolution: {integrity: sha512-tB03MGOlgKkoP6YyzIl/saTYshuLWxQy2JebhYL6gy3XsWmSE7ae1WAL3p+G0pyfw66HaMu905omyulu1VkfXw==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@graphql-tools/schema': 8.2.0_graphql@15.6.0
+      '@graphql-tools/utils': 8.2.5_graphql@15.6.0
+      graphql: 15.6.0
+      p-limit: 3.1.0
+      tslib: 2.3.1
+    dev: true
+
   /@graphql-tools/merge/6.2.17_graphql@15.6.0:
     resolution: {integrity: sha512-G5YrOew39fZf16VIrc49q3c8dBqQDD0ax5LYPiNja00xsXDi0T9zsEWVt06ApjtSdSF6HDddlu5S12QjeN8Tow==}
     peerDependencies:
@@ -2449,7 +2792,6 @@ packages:
       '@graphql-tools/utils': 8.0.2_graphql@15.6.0
       graphql: 15.6.0
       tslib: 2.3.1
-    dev: false
 
   /@graphql-tools/merge/8.1.2_graphql@15.6.0:
     resolution: {integrity: sha512-kFLd4kKNJXYXnKIhM8q9zgGAtbLmsy3WmGdDxYq3YHBJUogucAxnivQYyRIseUq37KGmSAIWu3pBQ23TKGsGOw==}
@@ -2459,7 +2801,6 @@ packages:
       '@graphql-tools/utils': 8.2.3_graphql@15.6.0
       graphql: 15.6.0
       tslib: 2.3.1
-    dev: false
 
   /@graphql-tools/mock/6.2.4_graphql@15.6.0:
     resolution: {integrity: sha512-O5Zvq/mcDZ7Ptky0IZ4EK9USmxV6FEVYq0Jxv2TI80kvxbCjt0tbEpZ+r1vIt1gZOXlAvadSHYyzWnUPh+1vkQ==}
@@ -2482,6 +2823,48 @@ packages:
       tslib: 2.1.0
     dev: false
 
+  /@graphql-tools/optimize/1.1.0_graphql@15.6.0:
+    resolution: {integrity: sha512-OW3tX3DHZ/5bRPPGI5UNgaQpaV7HihvV9zX6MYCLwERWRZTbc2DsNIq+H8L5Y5q2E2G8/H7vuz7q8LH8RgyP6A==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      graphql: 15.6.0
+      tslib: 2.3.1
+    dev: true
+
+  /@graphql-tools/prisma-loader/7.1.0_graphql@15.6.0:
+    resolution: {integrity: sha512-fehVzximGYuVkbl4mIbXjPz3XlL+7N4BlnXI5QEAif2DJ8fkTpPN7E9PoV80lxWkLDNokFFDHH6qq7hr99JyOg==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@graphql-tools/url-loader': 7.2.0_graphql@15.6.0
+      '@graphql-tools/utils': 8.2.5_graphql@15.6.0
+      '@types/js-yaml': 4.0.3
+      '@types/json-stable-stringify': 1.0.33
+      '@types/jsonwebtoken': 8.5.5
+      chalk: 4.1.2
+      debug: 4.3.2
+      dotenv: 10.0.0
+      graphql: 15.6.0
+      graphql-request: 3.5.0_graphql@15.6.0
+      http-proxy-agent: 4.0.1
+      https-proxy-agent: 5.0.0
+      isomorphic-fetch: 3.0.0
+      js-yaml: 4.1.0
+      json-stable-stringify: 1.0.1
+      jsonwebtoken: 8.5.1
+      lodash: 4.17.21
+      replaceall: 0.1.6
+      scuid: 1.1.0
+      tslib: 2.3.1
+      yaml-ast-parser: 0.0.43
+    transitivePeerDependencies:
+      - '@types/node'
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+    dev: true
+
   /@graphql-tools/relay-operation-optimizer/6.4.0_graphql@15.6.0:
     resolution: {integrity: sha512-auNvHC8gHu9BHBPnLA5c8Iv5VAXQG866KZJz7ljhKpXPdlPevK4zjHlVJwqnF8H6clJ9NgZpizN4kNNCe/3R9g==}
     peerDependencies:
@@ -2493,7 +2876,6 @@ packages:
       tslib: 2.3.1
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
   /@graphql-tools/resolvers-composition/6.4.0_graphql@15.6.0:
     resolution: {integrity: sha512-YkAmpIzyFtto9aDp/FysuyPb/tPba/gXYYvlN2vdBkE9nRU8ms8Fwhnroek0pW5ipjZAhpQZsZPVVpzSwldj3A==}
@@ -2538,7 +2920,6 @@ packages:
       graphql: 15.6.0
       tslib: 2.3.1
       value-or-promise: 1.0.10
-    dev: false
 
   /@graphql-tools/stitch/6.2.4_graphql@15.6.0:
     resolution: {integrity: sha512-0C7PNkS7v7iAc001m7c1LPm5FUB0/DYw+s3OyCii6YYYHY8NwdI0roeOyeDGFJkFubWBQfjc3hoSyueKtU73mw==}
@@ -2587,6 +2968,41 @@ packages:
       - utf-8-validate
     dev: false
 
+  /@graphql-tools/url-loader/7.2.0_graphql@15.6.0:
+    resolution: {integrity: sha512-1HOyt89TlzINko/Sa39oNQCzvbIshAiz+ECaoJKkIfkQZzXWzRkDrU5nEIPGm/FsCHm519OiJeaLwPLbdqnrLw==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@ardatan/fetch-event-source': 2.0.2
+      '@graphql-tools/delegate': 8.2.2_graphql@15.6.0
+      '@graphql-tools/utils': 8.2.5_graphql@15.6.0
+      '@graphql-tools/wrap': 8.1.1_graphql@15.6.0
+      '@n1ru4l/graphql-live-query': 0.8.1_graphql@15.6.0
+      '@types/websocket': 1.0.4
+      '@types/ws': 7.4.7
+      abort-controller: 3.0.0
+      cross-fetch: 3.1.4
+      extract-files: 11.0.0
+      form-data: 4.0.0
+      graphql: 15.6.0
+      graphql-sse: 1.0.4_graphql@15.6.0
+      graphql-ws: 5.5.0_graphql@15.6.0
+      is-promise: 4.0.0
+      isomorphic-ws: 4.0.1_ws@8.2.2
+      lodash: 4.17.21
+      meros: 1.1.4
+      subscriptions-transport-ws: 0.10.0_graphql@15.6.0
+      sync-fetch: 0.3.0
+      tslib: 2.3.1
+      valid-url: 1.0.9
+      value-or-promise: 1.0.10
+      ws: 8.2.2
+    transitivePeerDependencies:
+      - '@types/node'
+      - bufferutil
+      - utf-8-validate
+    dev: true
+
   /@graphql-tools/utils/6.2.4_graphql@15.6.0:
     resolution: {integrity: sha512-ybgZ9EIJE3JMOtTrTd2VcIpTXtDrn2q6eiYkeYMKRVh3K41+LZa6YnR2zKERTXqTWqhobROwLt4BZbw2O3Aeeg==}
     peerDependencies:
@@ -2616,7 +3032,15 @@ packages:
     dependencies:
       graphql: 15.6.0
       tslib: 2.3.1
-    dev: false
+
+  /@graphql-tools/utils/8.2.2_graphql@15.6.0:
+    resolution: {integrity: sha512-29FFY5U4lpXuBiW9dRvuWnBVwGhWbGLa2leZcAMU/Pz47Cr/QLZGVgpLBV9rt+Gbs7wyIJM7t7EuksPs0RDm3g==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      graphql: 15.6.0
+      tslib: 2.3.1
+    dev: true
 
   /@graphql-tools/utils/8.2.3_graphql@15.6.0:
     resolution: {integrity: sha512-RR+aiusf2gIfnPmrDIH1uA45QuPiHB54RD+BmWyMcl88tWAjeJtqZeWPqUTq/1EXrNeocJAJQqogHV4Fbbzx3A==}
@@ -2625,7 +3049,15 @@ packages:
     dependencies:
       graphql: 15.6.0
       tslib: 2.3.1
-    dev: false
+
+  /@graphql-tools/utils/8.2.5_graphql@15.6.0:
+    resolution: {integrity: sha512-k/Rktklhy22dQfbJLKiLGfQymQCTr6Rd2BilC7g2Yk6wFSzVLYr8jeXNoTD+/p61XBQzBjTVayskvaMvNS3BDg==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      graphql: 15.6.0
+      tslib: 2.3.1
+    dev: true
 
   /@graphql-tools/wrap/6.2.4_graphql@15.6.0:
     resolution: {integrity: sha512-cyQgpybolF9DjL2QNOvTS1WDCT/epgYoiA8/8b3nwv5xmMBQ6/6nYnZwityCZ7njb7MMyk7HBEDNNlP9qNJDcA==}
@@ -2653,13 +3085,25 @@ packages:
       value-or-promise: 1.0.6
     dev: false
 
+  /@graphql-tools/wrap/8.1.1_graphql@15.6.0:
+    resolution: {integrity: sha512-Z2ylFug2iHMbpcc2Bs/avNTKmhoJrUO6l0JrQbgiZZJWBaBz6yw+fyfL/kCLQluiU5/SXsvUxxPGBQ9tqb864g==}
+    peerDependencies:
+      graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
+    dependencies:
+      '@graphql-tools/delegate': 8.2.2_graphql@15.6.0
+      '@graphql-tools/schema': 8.2.0_graphql@15.6.0
+      '@graphql-tools/utils': 8.2.5_graphql@15.6.0
+      graphql: 15.6.0
+      tslib: 2.3.1
+      value-or-promise: 1.0.10
+    dev: true
+
   /@graphql-typed-document-node/core/3.1.0_graphql@15.6.0:
     resolution: {integrity: sha512-wYn6r8zVZyQJ6rQaALBEln5B1pzxb9shV5Ef97kTvn6yVGrqyXVnDqnU24MXnFubR+rZjBY9NWuxX3FB2sTsjg==}
     peerDependencies:
       graphql: ^0.8.0 || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0
     dependencies:
       graphql: 15.6.0
-    dev: false
 
   /@grpc/grpc-js/1.3.7:
     resolution: {integrity: sha512-CKQVuwuSPh40tgOkR7c0ZisxYRiN05PcKPW72mQL5y++qd7CwBRoaJZvU5xfXnCJDFBmS3qZGQ71Frx6Ofo2XA==}
@@ -2695,6 +3139,10 @@ packages:
     resolution: {integrity: sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==}
     dev: true
 
+  /@iarna/toml/2.2.5:
+    resolution: {integrity: sha512-trnsAYxU3xnS1gPHPyU961coFyLkh4gAD/0zQ5mymY4yOZ+CYvsPqUbOFSw0aDM4y0tV7tiFxL/1XfXPNC6IPg==}
+    dev: true
+
   /@intlify/shared/9.1.7:
     resolution: {integrity: sha512-zt0zlUdalumvT9AjQNxPXA36UgOndUyvBMplh8uRZU0fhWHAwhnJTcf0NaG9Qvr8I1n3HPSs96+kLb/YdwTavQ==}
     engines: {node: '>= 10'}
@@ -2942,6 +3390,14 @@ packages:
     resolution: {integrity: sha512-W6CLUJ2eBMw3Rec70qrsEW0jOm/3twwJv21mrmj2yORiaVmVYGS4sSS5yUwvQc1ZlDLYGPnClVWmUUMagKNsfA==}
     dev: false
 
+  /@n1ru4l/graphql-live-query/0.8.1_graphql@15.6.0:
+    resolution: {integrity: sha512-x5SLY+L9/5s07OJprISXx4csNBPF74UZeTI01ZPSaxOtRz2Gljk652kSPf6OjMLtx5uATr35O0M3G0LYhHBLtg==}
+    peerDependencies:
+      graphql: ^15.4.0
+    dependencies:
+      graphql: 15.6.0
+    dev: true
+
   /@nodelib/fs.scandir/2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -3851,12 +4307,10 @@ packages:
     dependencies:
       any-observable: 0.3.0
       rxjs: 6.6.7
-    dev: false
 
   /@sindresorhus/is/0.14.0:
     resolution: {integrity: sha512-9NET910DNaIPngYnLLPeg+Ogzqsi9uM4mSboU5y6p8S5DzMTVEsJZrawi+BoDNUVBa2DhJqQYUFvMDfgU062LQ==}
     engines: {node: '>=6'}
-    dev: false
 
   /@sindresorhus/is/4.2.0:
     resolution: {integrity: sha512-VkE3KLBmJwcCaVARtQpfuKcKv8gcBmUubrfHGF84dXuuW6jgsRYxPtzcIhPyK9WAPpRt2/xY6zkD9MnRaJzSyw==}
@@ -3907,7 +4361,6 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       defer-to-connect: 1.1.3
-    dev: false
 
   /@szmarczak/http-timer/4.0.6:
     resolution: {integrity: sha512-4BAffykYOgO+5nzBWYwE3W90sBgLJoUPRWWcL8wlyiM8IB8ipJz3UMJ9KXQd1RKQXpKp8Tutn80HZtWsu2u76w==}
@@ -4195,13 +4648,27 @@ packages:
       pretty-format: 27.2.2
     dev: true
 
+  /@types/js-yaml/4.0.3:
+    resolution: {integrity: sha512-5t9BhoORasuF5uCPr+d5/hdB++zRFUTMIZOzbNkr+jZh3yQht4HYbRDyj9fY8n2TZT30iW9huzav73x4NikqWg==}
+    dev: true
+
   /@types/json-schema/7.0.9:
     resolution: {integrity: sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==}
 
+  /@types/json-stable-stringify/1.0.33:
+    resolution: {integrity: sha512-qEWiQff6q2tA5gcJGWwzplQcXdJtm+0oy6IHGHzlOf3eFAkGE/FIPXZK9ofWgNSHVp8AFFI33PJJshS0ei3Gvw==}
+    dev: true
+
   /@types/json5/0.0.29:
     resolution: {integrity: sha1-7ihweulOEdK4J7y+UnC86n8+ce4=}
     dev: true
 
+  /@types/jsonwebtoken/8.5.5:
+    resolution: {integrity: sha512-OGqtHQ7N5/Ap/TUwO6IgHDuLiAoTmHhGpNvgkCm/F4N6pKzx/RBSfr2OXZSwC6vkfnsEdb6+7DNZVtiXiwdwFw==}
+    dependencies:
+      '@types/node': 16.10.1
+    dev: true
+
   /@types/keygrip/1.0.2:
     resolution: {integrity: sha512-GJhpTepz2udxGexqos8wgaBx4I/zWIDPh/KOGEwAqtuGDkOUJu5eFvwmdBX4AmB8Odsr+9pHCQqiAqDL/yKMKw==}
     dev: false
@@ -4475,11 +4942,16 @@ packages:
       '@types/node': 16.10.1
     dev: false
 
+  /@types/websocket/1.0.4:
+    resolution: {integrity: sha512-qn1LkcFEKK8RPp459jkjzsfpbsx36BBt3oC3pITYtkoBw/aVX+EZFa5j3ThCRTNpLFvIMr5dSTD4RaMdilIOpA==}
+    dependencies:
+      '@types/node': 16.10.1
+    dev: true
+
   /@types/ws/7.4.7:
     resolution: {integrity: sha512-JQbbmxZTZehdc2iszGKs5oC3NFnjeay7mtAWrdt7qNtAVK0g19muApzAy4bm9byz79xa2ZnO/BOBC2R8RC5Lww==}
     dependencies:
       '@types/node': 16.10.1
-    dev: false
 
   /@types/yargs-parser/20.2.1:
     resolution: {integrity: sha512-7tFImggNeNBVMsn0vLrpn1H1uPrUBdnARPTpZoitY37ZrdJREzf7I16tMrlK3hen349gr1NYh8CmZQa7CTG6Aw==}
@@ -4647,6 +5119,14 @@ packages:
       wonka: 4.0.15
     dev: false
 
+  /@urql/introspection/0.3.0_graphql@15.6.0:
+    resolution: {integrity: sha512-dw87YiSmCgEUFnWj7fYu+wnrFcSEhYyQ8DykTvL1UzCKPm9uLDeey1z0yiSxZeX2qP9oD+TSGIq+61AZHhQO0w==}
+    peerDependencies:
+      graphql: ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0
+    dependencies:
+      graphql: 15.6.0
+    dev: true
+
   /@vue/babel-helper-vue-jsx-merge-props/1.2.1:
     resolution: {integrity: sha512-QOi5OW45e2R20VygMSNhyQHvpdUwQZqGPc748JLGCYEy+yp8fNFNdbNIGAgZmi9e+2JHPd6i6idRuqivyicIkA==}
     dev: false
@@ -5035,7 +5515,6 @@ packages:
     engines: {node: '>=6.5'}
     dependencies:
       event-target-shim: 5.0.1
-    dev: false
 
   /accepts/1.3.7:
     resolution: {integrity: sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==}
@@ -5163,7 +5642,6 @@ packages:
   /ansi-escapes/3.2.0:
     resolution: {integrity: sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==}
     engines: {node: '>=4'}
-    dev: false
 
   /ansi-escapes/4.3.2:
     resolution: {integrity: sha512-gKXj5ALrKWQLsYG9jlTRmR/xKluxHV+Z9QEwNIgCfM1/uwPMCuzVVnh5mwTd+OuBZcwSIMbqssNWRm1lE51QaQ==}
@@ -5184,7 +5662,6 @@ packages:
   /ansi-regex/3.0.0:
     resolution: {integrity: sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=}
     engines: {node: '>=4'}
-    dev: false
 
   /ansi-regex/4.1.0:
     resolution: {integrity: sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==}
@@ -5223,7 +5700,6 @@ packages:
   /any-observable/0.3.0:
     resolution: {integrity: sha512-/FQM1EDkTsf63Ub2C6O7GuYFDsSXUwsaZDurV0np41ocwq0jthUAYCmhBX9f+KwlaCgIuWyr/4WlUQUBfKfZog==}
     engines: {node: '>=6'}
-    dev: false
 
   /any-promise/1.3.0:
     resolution: {integrity: sha1-q8av7tzqUugJzcA3au0845Y10X8=}
@@ -5737,7 +6213,6 @@ packages:
 
   /arg/4.1.3:
     resolution: {integrity: sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==}
-    dev: false
 
   /arg/5.0.1:
     resolution: {integrity: sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==}
@@ -5748,6 +6223,10 @@ packages:
     dependencies:
       sprintf-js: 1.0.3
 
+  /argparse/2.0.1:
+    resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
+    dev: true
+
   /aria-query/4.2.2:
     resolution: {integrity: sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==}
     engines: {node: '>=6.0'}
@@ -5886,6 +6365,11 @@ packages:
     engines: {node: '>= 4.5.0'}
     hasBin: true
 
+  /auto-bind/4.0.0:
+    resolution: {integrity: sha512-Hdw8qdNiqdJ8LqT0iK0sVzkFbzg6fhnQqqfWhBDxcHZvU75+B+ayzTy8x+k5Ix0Y92XOhOUlx74ps+bA6BeYMQ==}
+    engines: {node: '>=8'}
+    dev: true
+
   /autoprefixer/9.8.7:
     resolution: {integrity: sha512-7Hg99B1eTH5+LgmUBUSmov1Z3bsggQJS7v3IMGo6wcScnbRuvtMc871J9J+4bSbIqa9LSX/zypFXJ8sXHpMJeQ==}
     hasBin: true
@@ -6036,7 +6520,6 @@ packages:
 
   /babel-plugin-syntax-trailing-function-commas/7.0.0-beta.0:
     resolution: {integrity: sha512-Xj9XuRuz3nTSbaTXWv3itLOcxyF4oPD8douBBmj7U9BBC6nEBYfyOJYQMf/8PJAFotC62UY5dFfIGEPr7WswzQ==}
-    dev: false
 
   /babel-plugin-transform-es2015-modules-commonjs/6.26.2:
     resolution: {integrity: sha512-CV9ROOHEdrjcwhIaJNBGMBCodN+1cfkwtM1SbUHmvyy35KGT7fohbpOxkE2uLz1o6odKK2Ck/tz47z+VqQfi9Q==}
@@ -6109,7 +6592,6 @@ packages:
       babel-plugin-syntax-trailing-function-commas: 7.0.0-beta.0
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
   /babel-preset-jest/27.2.0_@babel+core@7.15.5:
     resolution: {integrity: sha512-z7MgQ3peBwN5L5aCqBKnF6iqdlvZvFUQynEhu0J+X9nHLU72jO3iY331lcYrg+AssJ8q7xsv5/3AICzVmJ/wvg==}
@@ -6176,7 +6658,6 @@ packages:
 
   /backo2/1.0.2:
     resolution: {integrity: sha1-MasayLEpNjRj41s+u2n038+6eUc=}
-    dev: false
 
   /bail/1.0.5:
     resolution: {integrity: sha512-xFbRxM1tahm08yHBP16MMjVUAvDaBMD38zsM9EMAUN61omwLmKlOpB/Zku5QkjZ8TZ4vn53pj+t518cH0S03RQ==}
@@ -6208,7 +6689,6 @@ packages:
 
   /base64-js/1.5.1:
     resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
-    dev: false
 
   /big.js/5.2.2:
     resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
@@ -6389,6 +6869,10 @@ packages:
     dependencies:
       node-int64: 0.4.0
 
+  /buffer-equal-constant-time/1.0.1:
+    resolution: {integrity: sha1-+OcRMvf/5uAaXJaXpMbz5I1cyBk=}
+    dev: true
+
   /buffer-from/1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
 
@@ -6413,7 +6897,6 @@ packages:
     dependencies:
       base64-js: 1.5.1
       ieee754: 1.2.1
-    dev: false
 
   /builtin-status-codes/3.0.0:
     resolution: {integrity: sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=}
@@ -6535,7 +7018,6 @@ packages:
       lowercase-keys: 2.0.0
       normalize-url: 4.5.1
       responselike: 1.0.2
-    dev: false
 
   /cacheable-request/7.0.2:
     resolution: {integrity: sha512-pouW8/FmiPQbuGpkXQ9BAPv/Mo5xDGANgSNXzTzJ8DrKGuXOssM4wIQRjfanNRh3Yu5cfYPvcorqbhg2KIJtew==}
@@ -6598,7 +7080,6 @@ packages:
     dependencies:
       pascal-case: 3.1.2
       tslib: 2.3.1
-    dev: false
 
   /camelcase-keys/6.2.2:
     resolution: {integrity: sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==}
@@ -6637,7 +7118,6 @@ packages:
       no-case: 3.0.4
       tslib: 2.3.1
       upper-case-first: 2.0.2
-    dev: false
 
   /cardinal/2.1.1:
     resolution: {integrity: sha1-fMEFXYItISlU0HsIXeolHMe8VQU=}
@@ -6679,6 +7159,21 @@ packages:
       ansi-styles: 4.3.0
       supports-color: 7.2.0
 
+  /change-case-all/1.0.14:
+    resolution: {integrity: sha512-CWVm2uT7dmSHdO/z1CXT/n47mWonyypzBbuCy5tN7uMg22BsfkhwT6oHmFCAk+gL1LOOxhdbB9SZz3J1KTY3gA==}
+    dependencies:
+      change-case: 4.1.2
+      is-lower-case: 2.0.2
+      is-upper-case: 2.0.2
+      lower-case: 2.0.2
+      lower-case-first: 2.0.2
+      sponge-case: 1.0.1
+      swap-case: 2.0.2
+      title-case: 3.0.3
+      upper-case: 2.0.2
+      upper-case-first: 2.0.2
+    dev: true
+
   /change-case/4.1.2:
     resolution: {integrity: sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==}
     dependencies:
@@ -6694,7 +7189,6 @@ packages:
       sentence-case: 3.0.4
       snake-case: 3.0.4
       tslib: 2.3.1
-    dev: false
 
   /char-regex/1.0.2:
     resolution: {integrity: sha512-kWWXztvZ5SBQV+eRgKFeh8q5sLuZY2+8WUIzlxWVTg+oGwY14qylx1KbKzHd8P6ZYkAg0xyIDU9JMHhyJMZ1jw==}
@@ -6721,7 +7215,6 @@ packages:
 
   /chardet/0.7.0:
     resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
-    dev: false
 
   /chokidar/2.1.8:
     resolution: {integrity: sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg==}
@@ -6841,14 +7334,12 @@ packages:
     engines: {node: '>=4'}
     dependencies:
       restore-cursor: 2.0.0
-    dev: false
 
   /cli-cursor/3.1.0:
     resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
     engines: {node: '>=8'}
     dependencies:
       restore-cursor: 3.1.0
-    dev: false
 
   /cli-progress/3.9.1:
     resolution: {integrity: sha512-AXxiCe2a0Lm0VN+9L0jzmfQSkcZm5EYspfqXKaSIQKqIk+0hnkZ3/v1E9B39mkD6vYhKih3c/RPsJBSwq9O99Q==}
@@ -6864,7 +7355,6 @@ packages:
     dependencies:
       slice-ansi: 0.0.4
       string-width: 1.0.2
-    dev: false
 
   /cli-truncate/2.1.0:
     resolution: {integrity: sha512-n8fOixwDD6b/ObinzTrp1ZKFzbgvKZvuz/TvejnLn1aQfC6r52XEx85FmuC+3HI+JM7coBRXUvNqEU2PHVrHpg==}
@@ -6936,7 +7426,6 @@ packages:
   /cli-width/3.0.0:
     resolution: {integrity: sha512-FxqpkPPwu1HjuN93Omfm4h8uIanXofW0RxVEW3k5RKx+mJJYSthzNhp32Kzxxy3YAEZ/Dc/EWN1vZRY0+kOhbw==}
     engines: {node: '>= 10'}
-    dev: false
 
   /cliui/6.0.0:
     resolution: {integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==}
@@ -6944,7 +7433,6 @@ packages:
       string-width: 4.2.3
       strip-ansi: 6.0.1
       wrap-ansi: 6.2.0
-    dev: false
 
   /cliui/7.0.4:
     resolution: {integrity: sha512-OcRE68cOsVMXp1Yvonl/fzkQOyjLSu/8bhPDfQt0e0/Eb283TKP20Fs2MqoPsr9SwA595rRCA+QMzYc9nBP+JQ==}
@@ -6995,7 +7483,6 @@ packages:
   /code-point-at/1.1.0:
     resolution: {integrity: sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /codemirror-theme-github/1.0.0:
     resolution: {integrity: sha512-suheFec2wlI4klyqn61MOFXjjrKPZiNY7d2py0OvTd5Z+7AsNxoGKDaS/HI59y7EAG1SkkXW/JQ1Rt2gDMxHfA==}
@@ -7082,7 +7569,6 @@ packages:
   /common-tags/1.8.0:
     resolution: {integrity: sha512-6P6g0uetGpW/sdyUy/iQQCbFF0kWVMSIVSyYz7Zgjcgh8mgw8PQzDNZeyZ5DQ2gM7LBoZPHmnjz8rUthkBG5tw==}
     engines: {node: '>=4.0.0'}
-    dev: false
 
   /commondir/1.0.1:
     resolution: {integrity: sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=}
@@ -7189,7 +7675,6 @@ packages:
       no-case: 3.0.4
       tslib: 2.3.1
       upper-case: 2.0.2
-    dev: false
 
   /constantinople/4.0.1:
     resolution: {integrity: sha512-vCrqcSIq4//Gx74TXXCGnHpulY1dskqLTFGDmhrGxzeXL8lF8kvXv6mpNWlJj1uD4DW23D4ljAqbY4RRaaUZIw==}
@@ -7319,6 +7804,12 @@ packages:
       vary: 1.1.2
     dev: false
 
+  /cosmiconfig-toml-loader/1.0.0:
+    resolution: {integrity: sha512-H/2gurFWVi7xXvCyvsWRLCMekl4tITJcX0QEsDMpzxtuxDyM59xLatYNg4s/k9AA/HdtCYfj2su8mgA0GSDLDA==}
+    dependencies:
+      '@iarna/toml': 2.2.5
+    dev: true
+
   /cosmiconfig/5.2.1:
     resolution: {integrity: sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==}
     engines: {node: '>=4'}
@@ -7340,6 +7831,17 @@ packages:
       yaml: 1.10.2
     dev: true
 
+  /cosmiconfig/7.0.0:
+    resolution: {integrity: sha512-pondGvTuVYDk++upghXJabWzL6Kxu6f26ljFw64Swq9v6sQPUL3EUlVDV56diOjpCayKihL6hVe8exIACU4XcA==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@types/parse-json': 4.0.0
+      import-fresh: 3.3.0
+      parse-json: 5.2.0
+      path-type: 4.0.0
+      yaml: 1.10.2
+    dev: true
+
   /cosmiconfig/7.0.1:
     resolution: {integrity: sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==}
     engines: {node: '>=10'}
@@ -7397,7 +7899,6 @@ packages:
     resolution: {integrity: sha512-1eAtFWdIubi6T4XPy6ei9iUFoKpUkIF971QLN8lIvvvwueI65+Nw5haMNKUwfJxabqlIIDODJKGrQ66gxC0PbQ==}
     dependencies:
       node-fetch: 2.6.1
-    dev: false
 
   /cross-spawn/6.0.5:
     resolution: {integrity: sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==}
@@ -7408,7 +7909,6 @@ packages:
       semver: 5.7.1
       shebang-command: 1.2.0
       which: 1.3.1
-    dev: false
 
   /cross-spawn/7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
@@ -7698,11 +8198,9 @@ packages:
 
   /dataloader/2.0.0:
     resolution: {integrity: sha512-YzhyDAwA4TaQIhM5go+vCLmU0UikghC/t9DTQYZR2M/UvZ1MdOhPezSDZcjj9uqQJOMqjLcpWtyW2iNINdlatQ==}
-    dev: false
 
   /date-fns/1.30.1:
     resolution: {integrity: sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==}
-    dev: false
 
   /de-indent/1.0.2:
     resolution: {integrity: sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=}
@@ -7717,6 +8215,10 @@ packages:
       node-addon-api: 1.7.2
     dev: true
 
+  /debounce/1.2.1:
+    resolution: {integrity: sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==}
+    dev: true
+
   /debug/2.6.9:
     resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==}
     dependencies:
@@ -7776,7 +8278,6 @@ packages:
     engines: {node: '>=4'}
     dependencies:
       mimic-response: 1.0.1
-    dev: false
 
   /decompress-response/6.0.0:
     resolution: {integrity: sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==}
@@ -7792,7 +8293,6 @@ packages:
   /deep-extend/0.6.0:
     resolution: {integrity: sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==}
     engines: {node: '>=4.0.0'}
-    dev: false
 
   /deep-is/0.1.4:
     resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
@@ -7809,7 +8309,6 @@ packages:
 
   /defer-to-connect/1.1.3:
     resolution: {integrity: sha512-0ISdNousHvZT2EiFlZeZAHBUvSxmKswVCEf8hW7KWgG4a8MVEu/3Vb6uWYozkjylyCxe0JBIiRB1jV45S70WVQ==}
-    dev: false
 
   /defer-to-connect/2.0.1:
     resolution: {integrity: sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg==}
@@ -7863,6 +8362,11 @@ packages:
     resolution: {integrity: sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=}
     engines: {node: '>= 0.6'}
 
+  /dependency-graph/0.11.0:
+    resolution: {integrity: sha512-JeMq7fEshyepOWDfcfHK06N3MhyPhz++vtqWhMT5O9A3K42rdsEDpfdVqjaqaAhsw6a+ZqeDvQVtD0hFHQWrzg==}
+    engines: {node: '>= 0.6.0'}
+    dev: true
+
   /deprecated-decorator/0.1.6:
     resolution: {integrity: sha1-AJZjF7ehL+kvPMgx91g68ym4bDc=}
     dev: false
@@ -7885,6 +8389,11 @@ packages:
     engines: {node: '>=4'}
     dev: false
 
+  /detect-indent/6.1.0:
+    resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
+    engines: {node: '>=8'}
+    dev: true
+
   /detect-newline/3.1.0:
     resolution: {integrity: sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==}
     engines: {node: '>=8'}
@@ -7918,7 +8427,6 @@ packages:
   /diff/4.0.2:
     resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
     engines: {node: '>=0.3.1'}
-    dev: false
 
   /diffie-hellman/5.0.3:
     resolution: {integrity: sha512-kqag/Nl+f3GwyK25fhUMYj81BUOrZ9IuJsjIcDE5icNM9FJHAVm3VcUDxdLPoQtTuUylWm6ZIknYJwwaPxsUzg==}
@@ -8031,7 +8539,6 @@ packages:
     dependencies:
       no-case: 3.0.4
       tslib: 2.3.1
-    dev: false
 
   /dot-prop/5.3.0:
     resolution: {integrity: sha512-QM8q3zDe58hqUqjraQOmzZ1LIH9SWQJTlEKCH4kJ2oQvLZk7RbQXvtDM2XEq3fwkV9CCvvH4LA0AV+ogFsBM2Q==}
@@ -8059,7 +8566,6 @@ packages:
 
   /duplexer3/0.1.4:
     resolution: {integrity: sha1-7gHdHKwO08vH/b6jfcCo8c4ALOI=}
-    dev: false
 
   /duplexify/3.7.1:
     resolution: {integrity: sha512-07z8uv2wMyS51kKhD1KsdXJg5WQ6t93RneqRxUHnskXVtlYYkLqM0gqStQZ3pj073g687jPCHrqNfCzawLYh5g==}
@@ -8070,6 +8576,12 @@ packages:
       stream-shift: 1.0.1
     dev: false
 
+  /ecdsa-sig-formatter/1.0.11:
+    resolution: {integrity: sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==}
+    dependencies:
+      safe-buffer: 5.2.1
+    dev: true
+
   /editorconfig/0.15.3:
     resolution: {integrity: sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==}
     hasBin: true
@@ -8089,7 +8601,6 @@ packages:
   /elegant-spinner/1.0.1:
     resolution: {integrity: sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /elliptic/6.5.4:
     resolution: {integrity: sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==}
@@ -8237,6 +8748,32 @@ packages:
       string.prototype.trimstart: 1.0.4
       unbox-primitive: 1.0.1
 
+  /es-abstract/1.19.1:
+    resolution: {integrity: sha512-2vJ6tjA/UfqLm2MPs7jxVybLoB8i1t1Jd9R3kISld20sIxPcTbLuggQOUxeWeAvIUkduv/CfMjuh4WmiXr2v9w==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      es-to-primitive: 1.2.1
+      function-bind: 1.1.1
+      get-intrinsic: 1.1.1
+      get-symbol-description: 1.0.0
+      has: 1.0.3
+      has-symbols: 1.0.2
+      internal-slot: 1.0.3
+      is-callable: 1.2.4
+      is-negative-zero: 2.0.1
+      is-regex: 1.1.4
+      is-shared-array-buffer: 1.0.1
+      is-string: 1.0.7
+      is-weakref: 1.0.1
+      object-inspect: 1.11.0
+      object-keys: 1.1.1
+      object.assign: 4.1.2
+      string.prototype.trimend: 1.0.4
+      string.prototype.trimstart: 1.0.4
+      unbox-primitive: 1.0.1
+    dev: true
+
   /es-to-primitive/1.2.1:
     resolution: {integrity: sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==}
     engines: {node: '>= 0.4'}
@@ -8686,11 +9223,9 @@ packages:
   /event-target-shim/5.0.1:
     resolution: {integrity: sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==}
     engines: {node: '>=6'}
-    dev: false
 
   /eventemitter3/3.1.2:
     resolution: {integrity: sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==}
-    dev: false
 
   /eventemitter3/4.0.7:
     resolution: {integrity: sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==}
@@ -8847,7 +9382,6 @@ packages:
       chardet: 0.7.0
       iconv-lite: 0.4.24
       tmp: 0.0.33
-    dev: false
 
   /extglob/2.0.4:
     resolution: {integrity: sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==}
@@ -8875,6 +9409,11 @@ packages:
       webpack-sources: 1.4.3
     dev: false
 
+  /extract-files/11.0.0:
+    resolution: {integrity: sha512-FuoE1qtbJ4bBVvv94CC7s0oTnKUGvQs+Rjf1L2SJFfS+HTVVjhPFtehPdQ0JiGPqVNfSSZvL5yzHHQq2Z4WNhQ==}
+    engines: {node: ^12.20 || >= 14.13}
+    dev: true
+
   /extract-files/8.1.0:
     resolution: {integrity: sha512-PTGtfthZK79WUMk+avLmwx3NGdU8+iVFXC2NMGxKsn0MnihOG2lvumj+AZo8CTwTrwjXDgZ5tztbRlEdRjBonQ==}
     engines: {node: 10 - 12 || >= 13.7}
@@ -8883,7 +9422,6 @@ packages:
   /extract-files/9.0.0:
     resolution: {integrity: sha512-CvdFfHkC95B4bBBk36hcEmvdR2awOdhhVUYH6S/zrVj3477zven/fJMYg7121h4T1xHZC+tetUpubpAhxwI7hQ==}
     engines: {node: ^10.17.0 || ^12.0.0 || >= 13.7.0}
-    dev: false
 
   /extract-from-css/0.4.4:
     resolution: {integrity: sha1-HqffLnx8brmSL6COitrqSG9vj5I=}
@@ -8948,7 +9486,6 @@ packages:
 
   /fbjs-css-vars/1.0.2:
     resolution: {integrity: sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ==}
-    dev: false
 
   /fbjs/3.0.0:
     resolution: {integrity: sha512-dJd4PiDOFuhe7vk4F80Mba83Vr2QuK86FoxtgPmzBqEJahncp+13YCmfoa53KHCo6OnlXLG7eeMWPfB5CrpVKg==}
@@ -8960,7 +9497,6 @@ packages:
       promise: 7.3.1
       setimmediate: 1.0.5
       ua-parser-js: 0.7.28
-    dev: false
 
   /figgy-pudding/3.5.2:
     resolution: {integrity: sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==}
@@ -8972,21 +9508,18 @@ packages:
     dependencies:
       escape-string-regexp: 1.0.5
       object-assign: 4.1.1
-    dev: false
 
   /figures/2.0.0:
     resolution: {integrity: sha1-OrGi0qYsi/tDGgyUy3l6L84nyWI=}
     engines: {node: '>=4'}
     dependencies:
       escape-string-regexp: 1.0.5
-    dev: false
 
   /figures/3.2.0:
     resolution: {integrity: sha512-yaduQFRKLXYOGgEn6AZau90j3ggSOyiqXU0F9JZfeXYhNa+Jk4X+s45A2zg5jns87GAFa34BBm2kXw4XpNcbdg==}
     engines: {node: '>=8'}
     dependencies:
       escape-string-regexp: 1.0.5
-    dev: false
 
   /file-entry-cache/6.0.1:
     resolution: {integrity: sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==}
@@ -9232,7 +9765,6 @@ packages:
       asynckit: 0.4.0
       combined-stream: 1.0.8
       mime-types: 2.1.32
-    dev: false
 
   /forwarded/0.2.0:
     resolution: {integrity: sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==}
@@ -9405,7 +9937,6 @@ packages:
     engines: {node: '>=6'}
     dependencies:
       pump: 3.0.0
-    dev: false
 
   /get-stream/5.2.0:
     resolution: {integrity: sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==}
@@ -9679,7 +10210,6 @@ packages:
       p-cancelable: 1.1.0
       to-readable-stream: 1.0.0
       url-parse-lax: 3.0.0
-    dev: false
 
   /graceful-fs/4.1.15:
     resolution: {integrity: sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==}
@@ -9699,6 +10229,31 @@ packages:
       tslib: 1.14.1
     dev: false
 
+  /graphql-config/4.0.1_graphql@15.6.0+typescript@4.4.3:
+    resolution: {integrity: sha512-JdXxFzBwjujJMGLHUZom9SrmP/M4gF57iTDa3fJVm3Q85+Xw2kj9jZIygaaSLpDKhaPnMQZqfJ5Hmc6afKxS9w==}
+    engines: {node: '>= 10.0.0'}
+    peerDependencies:
+      graphql: ^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0
+    dependencies:
+      '@endemolshinegroup/cosmiconfig-typescript-loader': 3.0.2_e9677aae07926e7f535c02f0a1c9b8a5
+      '@graphql-tools/graphql-file-loader': 7.3.0_graphql@15.6.0
+      '@graphql-tools/json-file-loader': 7.3.0_graphql@15.6.0
+      '@graphql-tools/load': 7.3.2_graphql@15.6.0
+      '@graphql-tools/merge': 6.2.17_graphql@15.6.0
+      '@graphql-tools/url-loader': 7.2.0_graphql@15.6.0
+      '@graphql-tools/utils': 8.2.5_graphql@15.6.0
+      cosmiconfig: 7.0.0
+      cosmiconfig-toml-loader: 1.0.0
+      graphql: 15.6.0
+      minimatch: 3.0.4
+      string-env-interpolation: 1.0.1
+    transitivePeerDependencies:
+      - '@types/node'
+      - bufferutil
+      - typescript
+      - utf-8-validate
+    dev: true
+
   /graphql-extensions/0.15.0_graphql@15.6.0:
     resolution: {integrity: sha512-bVddVO8YFJPwuACn+3pgmrEg6I8iBuYLuwvxiE+lcQQ7POotVZxm2rgGw0PvVYmWWf3DT7nTVDZ5ROh/ALp8mA==}
     engines: {node: '>=6.0'}
@@ -9751,6 +10306,26 @@ packages:
       nullthrows: 1.1.1
     dev: false
 
+  /graphql-request/3.5.0_graphql@15.6.0:
+    resolution: {integrity: sha512-Io89QpfU4rqiMbqM/KwMBzKaDLOppi8FU8sEccCE4JqCgz95W9Q8bvxQ4NfPALLSMvg9nafgg8AkYRmgKSlukA==}
+    peerDependencies:
+      graphql: 14.x || 15.x
+    dependencies:
+      cross-fetch: 3.1.4
+      extract-files: 9.0.0
+      form-data: 3.0.1
+      graphql: 15.6.0
+    dev: true
+
+  /graphql-sse/1.0.4_graphql@15.6.0:
+    resolution: {integrity: sha512-oB43ifRcEdElgep9jTP9qsj5cJ7Ny/1tAFyIl1W3A0hXRRg/P71tUHzMFBrRkEsJ9IA7MTp+RKSJfh52QR6PBQ==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      graphql: '>=0.11 <=16'
+    dependencies:
+      graphql: 15.6.0
+    dev: true
+
   /graphql-subscriptions/1.2.1_graphql@15.6.0:
     resolution: {integrity: sha512-95yD/tKi24q8xYa7Q9rhQN16AYj5wPbrb8tmHGM3WRc9EBmWrG/0kkMl+tQG8wcEuE9ibR4zyOM31p5Sdr2v4g==}
     peerDependencies:
@@ -9778,7 +10353,6 @@ packages:
     dependencies:
       graphql: 15.6.0
       tslib: 2.3.1
-    dev: false
 
   /graphql-tools/4.0.8_graphql@15.6.0:
     resolution: {integrity: sha512-MW+ioleBrwhRjalKjYaLQbr+920pHBgy9vM/n47sswtns8+96sRn5M/G+J1eu7IMeKWiN/9p6tmwCHU7552VJg==}
@@ -9842,6 +10416,15 @@ packages:
       graphql: 15.6.0
     dev: false
 
+  /graphql-ws/5.5.0_graphql@15.6.0:
+    resolution: {integrity: sha512-WQepPMGQQoqS2VsrI2I3RMLCVz3CW4/6ZqGV6ABDOwH4R62DzjxwMlwZbj6vhSI/7IM3/C911yITwgs77iO/hw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      graphql: '>=0.11 <=16'
+    dependencies:
+      graphql: 15.6.0
+    dev: true
+
   /graphql/15.6.0:
     resolution: {integrity: sha512-WJR872Zlc9hckiEPhXgyUftXH48jp2EjO5tgBBOyNMRJZ9fviL2mJBD6CAysk6N5S0r9BTs09Qk39nnJBkvOXQ==}
     engines: {node: '>= 10.x'}
@@ -10004,7 +10587,6 @@ packages:
     dependencies:
       capital-case: 1.0.4
       tslib: 2.3.1
-    dev: false
 
   /hex-color-regex/1.1.0:
     resolution: {integrity: sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==}
@@ -10294,7 +10876,6 @@ packages:
 
   /ieee754/1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
-    dev: false
 
   /iferr/0.1.5:
     resolution: {integrity: sha1-xg7taebY/bazEEofy8ocGS3FtQE=}
@@ -10326,7 +10907,6 @@ packages:
   /immutable/3.7.6:
     resolution: {integrity: sha1-E7TTyxK++hVIKib+Gy665kAHHks=}
     engines: {node: '>=0.8.0'}
-    dev: false
 
   /import-cwd/2.1.0:
     resolution: {integrity: sha1-qmzzbnInYShcs3HsZRn1PiQ1sKk=}
@@ -10370,6 +10950,11 @@ packages:
     dependencies:
       resolve-from: 5.0.0
 
+  /import-from/4.0.0:
+    resolution: {integrity: sha512-P9J71vT5nLlDeV8FHs5nNxaLbrpfAV5cF5srvbZfpwpcJoM/xZR3hiv+q+SAnuSmuGbXMWud063iIMx/V/EWZQ==}
+    engines: {node: '>=12.2'}
+    dev: true
+
   /import-lazy/2.1.0:
     resolution: {integrity: sha1-BWmOPUXIjo1+nZLLBYTnfwlvPkM=}
     engines: {node: '>=4'}
@@ -10401,7 +10986,6 @@ packages:
   /indent-string/3.2.0:
     resolution: {integrity: sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=}
     engines: {node: '>=4'}
-    dev: false
 
   /indent-string/4.0.0:
     resolution: {integrity: sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg==}
@@ -10461,7 +11045,6 @@ packages:
       string-width: 4.2.3
       strip-ansi: 6.0.1
       through: 2.3.8
-    dev: false
 
   /internal-slot/1.0.3:
     resolution: {integrity: sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==}
@@ -10502,6 +11085,14 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /is-absolute/1.0.0:
+    resolution: {integrity: sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-relative: 1.0.0
+      is-windows: 1.0.2
+    dev: true
+
   /is-accessor-descriptor/0.1.6:
     resolution: {integrity: sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=}
     engines: {node: '>=0.10.0'}
@@ -10675,12 +11266,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       number-is-nan: 1.0.1
-    dev: false
 
   /is-fullwidth-code-point/2.0.0:
     resolution: {integrity: sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=}
     engines: {node: '>=4'}
-    dev: false
 
   /is-fullwidth-code-point/3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
@@ -10725,6 +11314,12 @@ packages:
       is-path-inside: 3.0.3
     dev: false
 
+  /is-lower-case/2.0.2:
+    resolution: {integrity: sha512-bVcMJy4X5Og6VZfdOZstSexlEy20Sr0k/p/b2IlQJlfdKAQuMpiv5w2Ccxb8sKdRUNAG1PnHVHjFSdRDVS6NlQ==}
+    dependencies:
+      tslib: 2.3.1
+    dev: true
+
   /is-negative-zero/2.0.1:
     resolution: {integrity: sha512-2z6JzQvZRa9A2Y7xC6dQQm4FSTSTNWjKIYYTt4246eMTJmIo0Q+ZyOsU66X8lxK1AbB92dFeglPLrhwpeRKO6w==}
     engines: {node: '>= 0.4'}
@@ -10764,7 +11359,6 @@ packages:
     engines: {node: '>=4'}
     dependencies:
       symbol-observable: 1.2.0
-    dev: false
 
   /is-path-inside/3.0.3:
     resolution: {integrity: sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==}
@@ -10800,7 +11394,6 @@ packages:
 
   /is-promise/4.0.0:
     resolution: {integrity: sha512-hvpoI6korhJMnej285dSg6nu1+e6uxs7zG3BYAm5byqDsgJNWwxzM6z6iZiAgQR4TJ30JmBTOwqZUw3WlyH3AQ==}
-    dev: false
 
   /is-regex/1.1.4:
     resolution: {integrity: sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==}
@@ -10819,6 +11412,13 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /is-relative/1.0.0:
+    resolution: {integrity: sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-unc-path: 1.0.0
+    dev: true
+
   /is-resolvable/1.1.0:
     resolution: {integrity: sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg==}
     dev: false
@@ -10828,6 +11428,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: false
 
+  /is-shared-array-buffer/1.0.1:
+    resolution: {integrity: sha512-IU0NmyknYZN0rChcKhRO1X8LYz5Isj/Fsqh8NJOSf+N/hCOTwy29F32Ik7a+QszE63IdvmwdTPDd6cZ5pg4cwA==}
+    dev: true
+
   /is-ssh/1.3.3:
     resolution: {integrity: sha512-NKzJmQzJfEEma3w5cJNcUMxoXfDjz0Zj0eyCalHn2E6VOwlzjZo0yuO2fcBSf8zhFuVCL/82/r5gRcoi6aEPVQ==}
     dependencies:
@@ -10837,7 +11441,6 @@ packages:
   /is-stream/1.1.0:
     resolution: {integrity: sha1-EtSj3U5o4Lec6428hBc66A2RykQ=}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /is-stream/2.0.1:
     resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
@@ -10865,10 +11468,29 @@ packages:
   /is-typedarray/1.0.0:
     resolution: {integrity: sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=}
 
+  /is-unc-path/1.0.0:
+    resolution: {integrity: sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      unc-path-regex: 0.1.2
+    dev: true
+
   /is-unicode-supported/0.1.0:
     resolution: {integrity: sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==}
     engines: {node: '>=10'}
 
+  /is-upper-case/2.0.2:
+    resolution: {integrity: sha512-44pxmxAvnnAOwBg4tHPnkfvgjPwbc5QIsSstNU+YcJ1ovxVzCWpSGosPJOZh/a1tdl81fbgnLc9LLv+x2ywbPQ==}
+    dependencies:
+      tslib: 2.3.1
+    dev: true
+
+  /is-weakref/1.0.1:
+    resolution: {integrity: sha512-b2jKc2pQZjaeFYWEf7ScFj+Be1I+PXmlu572Q8coTXZ+LD/QQZ7ShPMst8h16riVgyXTQwUsFEl74mDvc/3MHQ==}
+    dependencies:
+      call-bind: 1.0.2
+    dev: true
+
   /is-whitespace/0.3.0:
     resolution: {integrity: sha1-Fjnssb4DauxppUy7QBz77XEUq38=}
     engines: {node: '>=0.10.0'}
@@ -10910,6 +11532,13 @@ packages:
     resolution: {integrity: sha1-TkMekrEalzFjaqH5yNHMvP2reN8=}
     engines: {node: '>=0.10.0'}
 
+  /isomorphic-fetch/3.0.0:
+    resolution: {integrity: sha512-qvUtwJ3j6qwsF3jLxkZ72qCgjMysPzDfeV240JHiGZsANBYd+EEuu35v7dfrJ9Up0Ak07D7GGSkGhCHTqg/5wA==}
+    dependencies:
+      node-fetch: 2.6.5
+      whatwg-fetch: 3.6.2
+    dev: true
+
   /isomorphic-ws/4.0.1_ws@7.4.5:
     resolution: {integrity: sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==}
     peerDependencies:
@@ -10918,6 +11547,14 @@ packages:
       ws: 7.4.5
     dev: false
 
+  /isomorphic-ws/4.0.1_ws@8.2.2:
+    resolution: {integrity: sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==}
+    peerDependencies:
+      ws: '*'
+    dependencies:
+      ws: 8.2.2
+    dev: true
+
   /istanbul-lib-coverage/3.0.1:
     resolution: {integrity: sha512-GvCYYTxaCPqwMjobtVcVKvSHtAGe48MNhGjpK8LtVF8K0ISX7hCKl85LgtuaSneWVyQmaGcW3iXVV3GaZSLpmQ==}
     engines: {node: '>=8'}
@@ -10965,7 +11602,6 @@ packages:
 
   /iterall/1.3.0:
     resolution: {integrity: sha512-QZ9qOMdF+QLHxy1QIpUHUU1D5pS2CG2P69LF6L6CPjPYA/XMOmKV3PZpawHoAjHNyB0swdVTRxdYT4tbBbxqwg==}
-    dev: false
 
   /java-properties/1.0.2:
     resolution: {integrity: sha512-qjdpeo2yKlYTH7nFdK0vbZWuTCesk4o63v5iVOlhMQPfuIZQfW/HI35SjfhA+4qpg36rnFSvUK5b1m+ckIblQQ==}
@@ -11554,6 +12190,13 @@ packages:
       argparse: 1.0.10
       esprima: 4.0.1
 
+  /js-yaml/4.1.0:
+    resolution: {integrity: sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==}
+    hasBin: true
+    dependencies:
+      argparse: 2.0.1
+    dev: true
+
   /jsdom/16.7.0:
     resolution: {integrity: sha512-u9Smc2G1USStM+s/x1ru5Sxrl6mPYCbByG1U/hUmqaVsm4tbNyS7CicOSRyuGQYZhTu0h84qkZZQ/I+dzizSVw==}
     engines: {node: '>=10'}
@@ -11607,7 +12250,6 @@ packages:
 
   /json-buffer/3.0.0:
     resolution: {integrity: sha1-Wx85evx11ne96Lz8Dkfh+aPZqJg=}
-    dev: false
 
   /json-buffer/3.0.1:
     resolution: {integrity: sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==}
@@ -11633,10 +12275,24 @@ packages:
     resolution: {integrity: sha1-nbe1lJatPzz+8wp1FC0tkwrXJlE=}
     dev: true
 
+  /json-stable-stringify/1.0.1:
+    resolution: {integrity: sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=}
+    dependencies:
+      jsonify: 0.0.0
+    dev: true
+
   /json-stringify-safe/5.0.1:
     resolution: {integrity: sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=}
     dev: false
 
+  /json-to-pretty-yaml/1.2.2:
+    resolution: {integrity: sha1-9M0L0KXo/h3yWq9boRiwmf2ZLVs=}
+    engines: {node: '>= 0.2.0'}
+    dependencies:
+      remedial: 1.0.8
+      remove-trailing-spaces: 1.0.8
+    dev: true
+
   /json5/0.5.1:
     resolution: {integrity: sha1-Hq3nrMASA0rYTiOWdn6tn6VJWCE=}
     hasBin: true
@@ -11668,11 +12324,31 @@ packages:
     optionalDependencies:
       graceful-fs: 4.2.8
 
+  /jsonify/0.0.0:
+    resolution: {integrity: sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=}
+    dev: true
+
   /jsonparse/1.3.1:
     resolution: {integrity: sha1-P02uSpH6wxX3EGL4UhzCOfE2YoA=}
     engines: {'0': node >= 0.2.0}
     dev: true
 
+  /jsonwebtoken/8.5.1:
+    resolution: {integrity: sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==}
+    engines: {node: '>=4', npm: '>=1.4.28'}
+    dependencies:
+      jws: 3.2.2
+      lodash.includes: 4.3.0
+      lodash.isboolean: 3.0.3
+      lodash.isinteger: 4.0.4
+      lodash.isnumber: 3.0.3
+      lodash.isplainobject: 4.0.6
+      lodash.isstring: 4.0.1
+      lodash.once: 4.1.1
+      ms: 2.1.3
+      semver: 5.7.1
+    dev: true
+
   /jstransformer/1.0.0:
     resolution: {integrity: sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=}
     dependencies:
@@ -11689,11 +12365,25 @@ packages:
       set-immediate-shim: 1.0.1
     dev: false
 
+  /jwa/1.4.1:
+    resolution: {integrity: sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==}
+    dependencies:
+      buffer-equal-constant-time: 1.0.1
+      ecdsa-sig-formatter: 1.0.11
+      safe-buffer: 5.2.1
+    dev: true
+
+  /jws/3.2.2:
+    resolution: {integrity: sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==}
+    dependencies:
+      jwa: 1.4.1
+      safe-buffer: 5.2.1
+    dev: true
+
   /keyv/3.1.0:
     resolution: {integrity: sha512-9ykJ/46SN/9KPM/sichzQ7OvXyGDYKGTaDlKMGCAlg2UK8KRy4jb0d8sFc+0Tt0YYnThq8X2RZgCg74RPxgcVA==}
     dependencies:
       json-buffer: 3.0.0
-    dev: false
 
   /keyv/4.0.3:
     resolution: {integrity: sha512-zdGa2TOpSZPq5mU6iowDARnMBZgtCqJ11dJROFi6tg6kTn4nuUdU09lFyLFSaHrWqpIJ+EBq4E8/Dc0Vx5vLdA==}
@@ -11746,7 +12436,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       package-json: 6.5.0
-    dev: false
 
   /launch-editor-middleware/2.2.1:
     resolution: {integrity: sha512-s0UO2/gEGiCgei3/2UN3SMuUj1phjQN8lcpnvgLSz26fAzNWPQ6Nf/kF5IFClnfU2ehp6LrmKdMU/beveO+2jg==}
@@ -11821,7 +12510,6 @@ packages:
   /listr-silent-renderer/1.1.1:
     resolution: {integrity: sha1-kktaN1cVN3C/Go4/v3S4u/P5JC4=}
     engines: {node: '>=4'}
-    dev: false
 
   /listr-update-renderer/0.5.0_listr@0.14.3:
     resolution: {integrity: sha512-tKRsZpKz8GSGqoI/+caPmfrypiaq+OQCbd+CovEC24uk1h952lVj5sC7SqyFUm+OaJ5HN/a1YLt5cit2FMNsFA==}
@@ -11838,7 +12526,6 @@ packages:
       log-symbols: 1.0.2
       log-update: 2.3.0
       strip-ansi: 3.0.1
-    dev: false
 
   /listr-verbose-renderer/0.5.0:
     resolution: {integrity: sha512-04PDPqSlsqIOaaaGZ+41vq5FejI9auqTInicFRndCBgE3bXG8D6W1I+mWhk+1nqbHmyhla/6BUrd5OSiHwKRXw==}
@@ -11848,7 +12535,6 @@ packages:
       cli-cursor: 2.1.0
       date-fns: 1.30.1
       figures: 2.0.0
-    dev: false
 
   /listr/0.14.3:
     resolution: {integrity: sha512-RmAl7su35BFd/xoMamRjpIE4j3v+L28o8CT5YhAXQJm1fD+1l9ngXY8JAQRJ+tFK2i5njvi0iRUKV09vPwA0iA==}
@@ -11865,7 +12551,6 @@ packages:
       rxjs: 6.6.7
     transitivePeerDependencies:
       - zen-observable
-    dev: false
 
   /listr2/3.12.2_enquirer@2.3.6:
     resolution: {integrity: sha512-64xC2CJ/As/xgVI3wbhlPWVPx0wfTqbUAkpb7bjDi0thSWMqrf07UFhrfsGoo8YSXmF049Rp9C0cjLC8rZxK9A==}
@@ -11974,12 +12659,35 @@ packages:
 
   /lodash.get/4.4.2:
     resolution: {integrity: sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=}
-    dev: false
 
   /lodash.identity/3.0.0:
     resolution: {integrity: sha1-rXvGpOZH15yXLhuA/u968VYmeHY=}
     dev: false
 
+  /lodash.includes/4.3.0:
+    resolution: {integrity: sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8=}
+    dev: true
+
+  /lodash.isboolean/3.0.3:
+    resolution: {integrity: sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY=}
+    dev: true
+
+  /lodash.isinteger/4.0.4:
+    resolution: {integrity: sha1-YZwK89A/iwTDH1iChAt3sRzWg0M=}
+    dev: true
+
+  /lodash.isnumber/3.0.3:
+    resolution: {integrity: sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w=}
+    dev: true
+
+  /lodash.isplainobject/4.0.6:
+    resolution: {integrity: sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=}
+    dev: true
+
+  /lodash.isstring/4.0.1:
+    resolution: {integrity: sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=}
+    dev: true
+
   /lodash.kebabcase/4.1.1:
     resolution: {integrity: sha1-hImxyw0p/4gZXM7KRI/21swpXDY=}
     dev: false
@@ -11991,6 +12699,10 @@ packages:
   /lodash.merge/4.6.2:
     resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
 
+  /lodash.once/4.1.1:
+    resolution: {integrity: sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=}
+    dev: true
+
   /lodash.pickby/4.6.0:
     resolution: {integrity: sha1-feoh2MGNdwOifHBMFdO4SmfjOv8=}
     dev: false
@@ -12033,7 +12745,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       chalk: 1.1.3
-    dev: false
 
   /log-symbols/4.1.0:
     resolution: {integrity: sha512-8XPvpAA8uyhfteu8pIvQxpJZ7SYYdpUivZpGy6sFsBuKRY/7rQGavedeB8aK+Zkyq6upMFVL/9AW6vOYzfRyLg==}
@@ -12049,7 +12760,6 @@ packages:
       ansi-escapes: 3.2.0
       cli-cursor: 2.1.0
       wrap-ansi: 3.0.1
-    dev: false
 
   /log-update/4.0.0:
     resolution: {integrity: sha512-9fkkDevMefjg0mmzWFBW8YkFP91OrizzkW3diF7CpG+S2EYdy4+TVfGwz1zeF8x7hCx1ovSPTOE9Ngib74qqUg==}
@@ -12080,6 +12790,12 @@ packages:
     dependencies:
       js-tokens: 4.0.0
 
+  /lower-case-first/2.0.2:
+    resolution: {integrity: sha512-EVm/rR94FJTZi3zefZ82fLWab+GX14LJN4HrWBcuo6Evmsl9hEfnqxgcHCKb9q+mNf6EVdsjx/qucYFIIB84pg==}
+    dependencies:
+      tslib: 2.3.1
+    dev: true
+
   /lower-case/1.1.4:
     resolution: {integrity: sha1-miyr0bno4K6ZOkv31YdcOcQujqw=}
     dev: false
@@ -12088,12 +12804,10 @@ packages:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
     dependencies:
       tslib: 2.3.1
-    dev: false
 
   /lowercase-keys/1.0.1:
     resolution: {integrity: sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /lowercase-keys/2.0.0:
     resolution: {integrity: sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==}
@@ -12271,6 +12985,11 @@ packages:
       errno: 0.1.8
       readable-stream: 2.3.7
 
+  /memorystream/0.3.1:
+    resolution: {integrity: sha1-htcJCzDORV1j+64S3aUaR93K+bI=}
+    engines: {node: '>= 0.10.0'}
+    dev: true
+
   /meow/8.1.2:
     resolution: {integrity: sha512-r85E3NdZ+mpYk1C6RjPFEMSE+s1iZMuHtsHAqY0DT3jZczl0diWUZ8g6oU7h0M9cD2EL+PzaYghhCLzR0ZNn5Q==}
     engines: {node: '>=10'}
@@ -12338,7 +13057,6 @@ packages:
     peerDependenciesMeta:
       '@types/node':
         optional: true
-    dev: false
 
   /methods/1.1.2:
     resolution: {integrity: sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=}
@@ -12436,7 +13154,6 @@ packages:
   /mimic-fn/1.2.0:
     resolution: {integrity: sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ==}
     engines: {node: '>=4'}
-    dev: false
 
   /mimic-fn/2.1.0:
     resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
@@ -12559,7 +13276,6 @@ packages:
     resolution: {integrity: sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==}
     engines: {node: '>=10'}
     hasBin: true
-    dev: false
 
   /moment/2.29.1:
     resolution: {integrity: sha512-kHmoybcPV8Sqy59DwNDY3Jefr64lK/by/da0ViFcuA4DH0vQg5Q6Ze5VimxkfQNSC+Mls/Kx53s7TjP1RhFEDQ==}
@@ -12621,7 +13337,6 @@ packages:
 
   /mute-stream/0.0.8:
     resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
-    dev: false
 
   /mz/2.7.0:
     resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
@@ -12633,6 +13348,7 @@ packages:
 
   /nan/2.15.0:
     resolution: {integrity: sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==}
+    requiresBuild: true
     dev: false
     optional: true
 
@@ -12681,7 +13397,6 @@ packages:
 
   /nice-try/1.0.5:
     resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
-    dev: false
 
   /no-case/2.3.2:
     resolution: {integrity: sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==}
@@ -12694,7 +13409,6 @@ packages:
     dependencies:
       lower-case: 2.0.2
       tslib: 2.3.1
-    dev: false
 
   /node-addon-api/1.7.2:
     resolution: {integrity: sha512-ibPK3iA+vaY1eEjESkQkM0BbCqFOaZMiXRTtdB0u7b4djtY6JnsjvPdUHVMg6xQt3B8fpTTWHI9A+ADjM9frzg==}
@@ -12711,7 +13425,6 @@ packages:
   /node-fetch/2.6.1:
     resolution: {integrity: sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==}
     engines: {node: 4.x || >=6.0.0}
-    dev: false
 
   /node-fetch/2.6.2:
     resolution: {integrity: sha512-aLoxToI6RfZ+0NOjmWAgn9+LEd30YCkJKFSyWacNZdEKTit/ZMcKjGkTRo8uWEsnIb/hfKecNPEbln02PdWbcA==}
@@ -12723,7 +13436,6 @@ packages:
     engines: {node: 4.x || >=6.0.0}
     dependencies:
       whatwg-url: 5.0.0
-    dev: false
 
   /node-html-parser/3.3.6:
     resolution: {integrity: sha512-VkWDHvNgFGB3mbQGMyzqRE1i/BG7TKX9wRXC8e/v8kL0kZR/Oy6RjYxXH91K6/+m3g8iQ8dTqRy75lTYoA2Cjg==}
@@ -12850,7 +13562,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       remove-trailing-separator: 1.1.0
-    dev: false
 
   /normalize-path/3.0.0:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
@@ -12882,12 +13593,27 @@ packages:
   /normalize-url/4.5.1:
     resolution: {integrity: sha512-9UZCFRHQdNrfTpGg8+1INIg93B6zE0aXMVFkw1WFwvO4SlZywU6aLg5Of0Ap/PgcbSw4LNxvMWXMeugwMCX0AA==}
     engines: {node: '>=8'}
-    dev: false
 
   /normalize-url/6.1.0:
     resolution: {integrity: sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A==}
     engines: {node: '>=10'}
 
+  /npm-run-all/4.1.5:
+    resolution: {integrity: sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==}
+    engines: {node: '>= 4'}
+    hasBin: true
+    dependencies:
+      ansi-styles: 3.2.1
+      chalk: 2.4.2
+      cross-spawn: 6.0.5
+      memorystream: 0.3.1
+      minimatch: 3.0.4
+      pidtree: 0.3.1
+      read-pkg: 3.0.0
+      shell-quote: 1.7.2
+      string.prototype.padend: 3.1.3
+    dev: true
+
   /npm-run-path/4.0.1:
     resolution: {integrity: sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==}
     engines: {node: '>=8'}
@@ -12907,7 +13633,6 @@ packages:
 
   /nullthrows/1.1.1:
     resolution: {integrity: sha512-2vPPEi+Z7WqML2jZYddDIfy5Dqb0r2fze2zTxNNknZaFpVHU3mFB3R+DWeJWGVx0ecvttSGlJTI+WG+8Z4cDWw==}
-    dev: false
 
   /num2fraction/1.2.2:
     resolution: {integrity: sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4=}
@@ -12915,7 +13640,6 @@ packages:
   /number-is-nan/1.0.1:
     resolution: {integrity: sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /nuxt-windicss/1.2.4_typescript@4.4.3:
     resolution: {integrity: sha512-UsmZqFrU0pX7+nMhNPiZ1XaDKjgPgIRIFY2H8E7FBysYZ7abQ6bHknHF2CpeaxPh0PT3fWhKgSGT8HxNH4wKcQ==}
@@ -13055,7 +13779,6 @@ packages:
     engines: {node: '>=4'}
     dependencies:
       mimic-fn: 1.2.0
-    dev: false
 
   /onetime/5.1.2:
     resolution: {integrity: sha512-kbpaSSGJTWdAY5KPVeMOKXSrPtr8C8C7wodJbcsd51jRnmD+GZu8Y0VoU6Dm5Z4vWr0Ig/1NKuWRKf7j5aaYSg==}
@@ -13122,12 +13845,10 @@ packages:
   /os-tmpdir/1.0.2:
     resolution: {integrity: sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /p-cancelable/1.1.0:
     resolution: {integrity: sha512-s73XxOZ4zpt1edZYZzvhqFa6uvQc1vwUa0K0BdtIZgQMAJj9IbebH+JkgKZc9h+B05PKHLOTl4ajG1BmNrVZlw==}
     engines: {node: '>=6'}
-    dev: false
 
   /p-cancelable/2.1.1:
     resolution: {integrity: sha512-BZOr3nRQHOntUjTrH8+Lh54smKHoHyur8We1V8DSMVrl5A2malOOwuJRnKRDjSnkoeBh4at6BwEnb5I7Jl31wg==}
@@ -13193,7 +13914,6 @@ packages:
   /p-map/2.1.0:
     resolution: {integrity: sha512-y3b8Kpd8OAN444hxfBbFfj1FY/RjtTd8tzYwhUqNYXx0fXx2iX4maP4Qr6qhIKbQXI02wTLAda4fYUbDagTUFw==}
     engines: {node: '>=6'}
-    dev: false
 
   /p-map/4.0.0:
     resolution: {integrity: sha512-/bjOqmgETBYB5BoEeGVea8dmvHb2m9GLy1E9W43yeyfP6QQCZGFNa+XRceJEuDB6zqr+gKpIAmlLebMpykw/MQ==}
@@ -13219,7 +13939,6 @@ packages:
       registry-auth-token: 4.2.1
       registry-url: 5.1.0
       semver: 6.3.0
-    dev: false
 
   /paho-mqtt/1.1.0:
     resolution: {integrity: sha512-KPbL9KAB0ASvhSDbOrZBaccXS+/s7/LIofbPyERww8hM5Ko71GUJQ6Nmg0BWqj8phAIT8zdf/Sd/RftHU9i2HA==}
@@ -13248,7 +13967,6 @@ packages:
     dependencies:
       dot-case: 3.0.4
       tslib: 2.3.1
-    dev: false
 
   /parent-module/1.0.1:
     resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==}
@@ -13284,6 +14002,15 @@ packages:
       is-hexadecimal: 1.0.4
     dev: true
 
+  /parse-filepath/1.0.2:
+    resolution: {integrity: sha1-pjISf1Oq89FYdvWHLz/6x2PWyJE=}
+    engines: {node: '>=0.8'}
+    dependencies:
+      is-absolute: 1.0.0
+      map-cache: 0.2.2
+      path-root: 0.1.1
+    dev: true
+
   /parse-git-config/3.0.0:
     resolution: {integrity: sha512-wXoQGL1D+2COYWCD35/xbiKma1Z15xvZL8cI25wvxzled58V51SJM04Urt/uznS900iQor7QO04SgdfT/XlbuA==}
     engines: {node: '>=8'}
@@ -13347,7 +14074,6 @@ packages:
     dependencies:
       no-case: 3.0.4
       tslib: 2.3.1
-    dev: false
 
   /pascalcase/0.1.1:
     resolution: {integrity: sha1-s2PlXoAGym/iF4TS2yK9FdeRfxQ=}
@@ -13369,7 +14095,6 @@ packages:
     dependencies:
       dot-case: 3.0.4
       tslib: 2.3.1
-    dev: false
 
   /path-dirname/1.0.2:
     resolution: {integrity: sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA=}
@@ -13391,7 +14116,6 @@ packages:
   /path-key/2.0.1:
     resolution: {integrity: sha1-QRyttXTFoUDTpLGRDUDYDMn0C0A=}
     engines: {node: '>=4'}
-    dev: false
 
   /path-key/3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
@@ -13400,6 +14124,18 @@ packages:
   /path-parse/1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
+  /path-root-regex/0.1.2:
+    resolution: {integrity: sha1-v8zcjfWxLcUsi0PsONGNcsBLqW0=}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
+  /path-root/0.1.1:
+    resolution: {integrity: sha1-mkpoFMrBwM1zNgqV8yCDyOpHRbc=}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      path-root-regex: 0.1.2
+    dev: true
+
   /path-to-regexp/0.1.7:
     resolution: {integrity: sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=}
     dev: false
@@ -13430,6 +14166,12 @@ packages:
     resolution: {integrity: sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==}
     engines: {node: '>=8.6'}
 
+  /pidtree/0.3.1:
+    resolution: {integrity: sha512-qQbW94hLHEqCg7nhby4yRC7G2+jYHY4Rguc2bjw7Uug4GIJuu1tvf2uHaZv5Q8zdt+WKJ6qK1FOI6amaWUo5FA==}
+    engines: {node: '>=0.10'}
+    hasBin: true
+    dev: true
+
   /pify/2.3.0:
     resolution: {integrity: sha1-7RQaasBDqEnqWISY59yosVMw6Qw=}
     engines: {node: '>=0.10.0'}
@@ -14287,7 +15029,6 @@ packages:
   /prepend-http/2.0.0:
     resolution: {integrity: sha1-6SQ0v6XqjBn0HN/UAddBo8gZ2Jc=}
     engines: {node: '>=4'}
-    dev: false
 
   /prettier-linter-helpers/1.0.0:
     resolution: {integrity: sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==}
@@ -14727,7 +15468,6 @@ packages:
       ini: 1.3.8
       minimist: 1.2.5
       strip-json-comments: 2.0.1
-    dev: false
 
   /rc9/1.2.0:
     resolution: {integrity: sha512-/jknmhG0USFAx5uoKkAKhtG40sONds9RWhFHrP1UzJ3OvVfqFWOypSUpmsQD0fFwAV7YtzHhsn3QNasfAoxgcQ==}
@@ -14905,14 +15645,12 @@ packages:
     engines: {node: '>=6.0.0'}
     dependencies:
       rc: 1.2.8
-    dev: false
 
   /registry-url/5.1.0:
     resolution: {integrity: sha512-8acYXXTI0AkQv6RAOjE3vOaIXZkT9wo4LOFbBKYQEEnnMNBpKqdUrI6S4NT0KPIo/WVvJ5tE/X5LF/TQUf0ekw==}
     engines: {node: '>=8'}
     dependencies:
       rc: 1.2.8
-    dev: false
 
   /regjsgen/0.5.2:
     resolution: {integrity: sha512-OFFT3MfrH90xIW8OOSyUrk6QHD5E9JOTeGodiJeBS3J6IwlgzJMNE/1bZklWz5oTg+9dCMyEetclvCVXOPoN3A==}
@@ -14954,7 +15692,6 @@ packages:
       yargs: 15.4.1
     transitivePeerDependencies:
       - supports-color
-    dev: false
 
   /relay-runtime/11.0.2:
     resolution: {integrity: sha512-xxZkIRnL8kNE1cxmwDXX8P+wSeWLR+0ACFyAiAhvfWWAyjXb+bhjJ2FSsRGlNYfkqaTNEuDqpnodQV1/fF7Idw==}
@@ -14962,7 +15699,6 @@ packages:
       '@babel/runtime': 7.15.4
       fbjs: 3.0.0
       invariant: 2.2.4
-    dev: false
 
   /remark-parse/9.0.0:
     resolution: {integrity: sha512-geKatMwSzEXKHuzBNU1z676sGcDcFoChMK38TgdHJNAYfFtsfHDQG7MoJAjs6sgYMqyLduCYWDIWZIxiPeafEw==}
@@ -14988,9 +15724,16 @@ packages:
       - supports-color
     dev: true
 
+  /remedial/1.0.8:
+    resolution: {integrity: sha512-/62tYiOe6DzS5BqVsNpH/nkGlX45C/Sp6V+NtiN6JQNS1Viay7cWkazmRkrQrdFj2eshDe96SIQNIoMxqhzBOg==}
+    dev: true
+
   /remove-trailing-separator/1.1.0:
     resolution: {integrity: sha1-wkvOKig62tW8P1jg1IJJuSN52O8=}
-    dev: false
+
+  /remove-trailing-spaces/1.0.8:
+    resolution: {integrity: sha512-O3vsMYfWighyFbTd8hk8VaSj9UAGENxAtX+//ugIst2RMk5e03h6RoIS+0ylsFxY1gvmPuAY/PO4It+gPEeySA==}
+    dev: true
 
   /renderkid/2.0.7:
     resolution: {integrity: sha512-oCcFyxaMrKsKcTY59qnCAtmDVSLfPbrv6A3tVbPdFMMrv5jaK10V6m40cKsoPNhAqN6rmHW9sswW4o3ruSrwUQ==}
@@ -15010,6 +15753,11 @@ packages:
     resolution: {integrity: sha1-jcrkcOHIirwtYA//Sndihtp15jc=}
     engines: {node: '>=0.10'}
 
+  /replaceall/0.1.6:
+    resolution: {integrity: sha1-gdgax663LX9cSUKt8ml6MiBojY4=}
+    engines: {node: '>= 0.8.x'}
+    dev: true
+
   /require-directory/2.1.1:
     resolution: {integrity: sha1-jGStX9MNqxyXbiNE/+f3kqam30I=}
     engines: {node: '>=0.10.0'}
@@ -15020,7 +15768,6 @@ packages:
 
   /require-main-filename/2.0.0:
     resolution: {integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==}
-    dev: false
 
   /requires-port/1.0.0:
     resolution: {integrity: sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=}
@@ -15080,7 +15827,6 @@ packages:
     resolution: {integrity: sha1-kYcg7ztjHFZCvgaPFa3lpG9Loec=}
     dependencies:
       lowercase-keys: 1.0.1
-    dev: false
 
   /responselike/2.0.0:
     resolution: {integrity: sha512-xH48u3FTB9VsZw7R+vvgaKeLKzT6jOogbQhEe/jewwnZgzPcnyWui2Av6JpoYZF/91uueC+lqhWqeURw5/qhCw==}
@@ -15094,7 +15840,6 @@ packages:
     dependencies:
       onetime: 2.0.1
       signal-exit: 3.0.4
-    dev: false
 
   /restore-cursor/3.1.0:
     resolution: {integrity: sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==}
@@ -15102,7 +15847,6 @@ packages:
     dependencies:
       onetime: 5.1.2
       signal-exit: 3.0.4
-    dev: false
 
   /ret/0.1.15:
     resolution: {integrity: sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==}
@@ -15173,7 +15917,6 @@ packages:
   /run-async/2.4.1:
     resolution: {integrity: sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==}
     engines: {node: '>=0.12.0'}
-    dev: false
 
   /run-parallel/1.2.0:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
@@ -15191,7 +15934,6 @@ packages:
     engines: {npm: '>=2.0.0'}
     dependencies:
       tslib: 1.14.1
-    dev: false
 
   /rxjs/7.3.0:
     resolution: {integrity: sha512-p2yuGIg9S1epc3vrjKf6iVb3RCaAYjYskkO+jHIaV0IjOPlJop4UnodOoFb2xeNwlguqLYvGw1b1McillYb5Gw==}
@@ -15320,6 +16062,10 @@ packages:
       ajv: 6.12.6
       ajv-keywords: 3.5.2_ajv@6.12.6
 
+  /scuid/1.1.0:
+    resolution: {integrity: sha512-MuCAyrGZcTLfQoH2XoBlQ8C6bzwN88XT/0slOGz0pn8+gIP85BOAfYa44ZXQUTOwRwPU0QvgU+V+OSajl/59Xg==}
+    dev: true
+
   /scule/0.2.1:
     resolution: {integrity: sha512-M9gnWtn3J0W+UhJOHmBxBTwv8mZCan5i1Himp60t6vvZcor0wr+IM0URKmIglsWJ7bRujNAVVN77fp+uZaWoKg==}
 
@@ -15390,7 +16136,6 @@ packages:
       no-case: 3.0.4
       tslib: 2.3.1
       upper-case-first: 2.0.2
-    dev: false
 
   /serialize-error/7.0.1:
     resolution: {integrity: sha512-8I8TjW5KMOKsZQTvoxjuSIa7foAwPWGOts+6o7sgjz41/qMD9VQHEDxi6PBvK2l0MXUmqZyNpUK+T2tQaaElvw==}
@@ -15438,7 +16183,6 @@ packages:
 
   /set-blocking/2.0.0:
     resolution: {integrity: sha1-BF+XgtARrppoA93TgrJDkrPYkPc=}
-    dev: false
 
   /set-immediate-shim/1.0.1:
     resolution: {integrity: sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=}
@@ -15456,7 +16200,6 @@ packages:
 
   /setimmediate/1.0.5:
     resolution: {integrity: sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=}
-    dev: false
 
   /setprototypeof/1.1.1:
     resolution: {integrity: sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw==}
@@ -15489,7 +16232,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       shebang-regex: 1.0.0
-    dev: false
 
   /shebang-command/2.0.0:
     resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
@@ -15500,7 +16242,6 @@ packages:
   /shebang-regex/1.0.0:
     resolution: {integrity: sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /shebang-regex/3.0.0:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
@@ -15508,7 +16249,6 @@ packages:
 
   /shell-quote/1.7.2:
     resolution: {integrity: sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==}
-    dev: false
 
   /shelljs/0.8.4:
     resolution: {integrity: sha512-7gk3UZ9kOfPLIAbslLzyWeGiEqx9e3rxwZM0KE6EL8GlGwjym9Mrlx5/p33bWTu9YG6vcS4MBxYZDHYr5lr8BQ==}
@@ -15536,7 +16276,6 @@ packages:
 
   /signedsource/1.0.0:
     resolution: {integrity: sha1-HdrOSYF5j5O9gzlzgD2A1S6TrWo=}
-    dev: false
 
   /simple-swizzle/0.2.2:
     resolution: {integrity: sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo=}
@@ -15576,7 +16315,6 @@ packages:
   /slice-ansi/0.0.4:
     resolution: {integrity: sha1-7b+JA/ZvfOL46v1s7tZeJkyDGzU=}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /slice-ansi/3.0.0:
     resolution: {integrity: sha512-pSyv7bSTC7ig9Dcgbw9AuRNUb5k5V6oDudjZoMBSr13qpLBG7tB+zgCkARjq7xIUgdz5P1Qe8u+rSGdouOOIyQ==}
@@ -15600,7 +16338,6 @@ packages:
     dependencies:
       dot-case: 3.0.4
       tslib: 2.3.1
-    dev: false
 
   /snapdragon-node/2.1.1:
     resolution: {integrity: sha512-O27l4xaMYt/RSQ5TR3vpWCAB5Kb/czIcqUFOM/C4fYcLnbZUc1PkjTAMjof2pBWaSTwOUd6qUHcFGVGj7aIwnw==}
@@ -15777,6 +16514,12 @@ packages:
     resolution: {integrity: sha512-eM/qZ1v7U5BMV8FQR7oeqVlllz3sTGTm0//g/eJMa0hZ4s+A1VK68j26FWzcaVlw2P5+dCXk7/X6ZRjjwcbrgw==}
     dev: false
 
+  /sponge-case/1.0.1:
+    resolution: {integrity: sha512-dblb9Et4DAtiZ5YSUZHLl4XhH4uK80GhAZrVXdN4O2P4gQ40Wa5UIOPUHlA/nFd2PLblBZWUioLMMAVrgpoYcA==}
+    dependencies:
+      tslib: 2.3.1
+    dev: true
+
   /sprintf-js/1.0.3:
     resolution: {integrity: sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=}
 
@@ -15878,6 +16621,10 @@ packages:
     engines: {node: '>=0.6.19'}
     dev: false
 
+  /string-env-interpolation/1.0.1:
+    resolution: {integrity: sha512-78lwMoCcn0nNu8LszbP1UA7g55OeE4v7rCeWnM5B453rnNr4aq+5it3FEYtZrSEiMvHZOZ9Jlqb0OD0M2VInqg==}
+    dev: true
+
   /string-length/4.0.2:
     resolution: {integrity: sha512-+l6rNN5fYHNhZZy41RXsYptCjA2Igmq4EG7kZAYFQI1E1VTXarr6ZPXBg6eq7Y6eK4FEhY6AJlyuFIb/v/S0VQ==}
     engines: {node: '>=10'}
@@ -15893,7 +16640,6 @@ packages:
       code-point-at: 1.1.0
       is-fullwidth-code-point: 1.0.0
       strip-ansi: 3.0.1
-    dev: false
 
   /string-width/2.1.1:
     resolution: {integrity: sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==}
@@ -15901,7 +16647,6 @@ packages:
     dependencies:
       is-fullwidth-code-point: 2.0.0
       strip-ansi: 4.0.0
-    dev: false
 
   /string-width/3.1.0:
     resolution: {integrity: sha512-vafcv6KjVZKSgz06oM/H6GDBrAtz8vdhQakGjFIvNrHA6y3HCF1CInLy+QLq8dTJPQ1b+KDUqDFctkdRW44e1w==}
@@ -15920,6 +16665,15 @@ packages:
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
 
+  /string.prototype.padend/3.1.3:
+    resolution: {integrity: sha512-jNIIeokznm8SD/TZISQsZKYu7RJyheFNt84DUPrh482GC8RVp2MKqm2O5oBRdGxbDQoXrhhWtPIWQOiy20svUg==}
+    engines: {node: '>= 0.4'}
+    dependencies:
+      call-bind: 1.0.2
+      define-properties: 1.1.3
+      es-abstract: 1.19.1
+    dev: true
+
   /string.prototype.trimend/1.0.4:
     resolution: {integrity: sha512-y9xCjw1P23Awk8EvTpcyL2NIr1j7wJ39f+k6lvRnSMz+mz9CGz9NYPelDk42kOz6+ql8xjfK8oYzy3jAP5QU5A==}
     dependencies:
@@ -15962,7 +16716,6 @@ packages:
     engines: {node: '>=4'}
     dependencies:
       ansi-regex: 3.0.0
-    dev: false
 
   /strip-ansi/5.2.0:
     resolution: {integrity: sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==}
@@ -16132,6 +16885,22 @@ packages:
       - supports-color
     dev: true
 
+  /subscriptions-transport-ws/0.10.0_graphql@15.6.0:
+    resolution: {integrity: sha512-k28LhLn3abJ1mowFW+LP4QGggE0e3hrk55zXbMHyAeZkCUYtC0owepiwqMD3zX8DglQVaxnhE760pESrNSEzpg==}
+    peerDependencies:
+      graphql: '>=0.10.0'
+    dependencies:
+      backo2: 1.0.2
+      eventemitter3: 3.1.2
+      graphql: 15.6.0
+      iterall: 1.3.0
+      symbol-observable: 1.2.0
+      ws: 7.5.5
+    transitivePeerDependencies:
+      - bufferutil
+      - utf-8-validate
+    dev: true
+
   /subscriptions-transport-ws/0.9.19_graphql@15.6.0:
     resolution: {integrity: sha512-dxdemxFFB0ppCLg10FTtRqH/31FNRL1y1BQv8209MK5I4CwALb7iihQg+7p65lFcIl8MHatINWBLOqpgU4Kyyw==}
     peerDependencies:
@@ -16281,10 +17050,15 @@ packages:
       unquote: 1.1.1
       util.promisify: 1.0.1
 
+  /swap-case/2.0.2:
+    resolution: {integrity: sha512-kc6S2YS/2yXbtkSMunBtKdah4VFETZ8Oh6ONSmSd9bRxhqTrtARUCBUiWXH3xVPpvR7tz2CSnkuXVE42EcGnMw==}
+    dependencies:
+      tslib: 2.3.1
+    dev: true
+
   /symbol-observable/1.2.0:
     resolution: {integrity: sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==}
     engines: {node: '>=0.10.0'}
-    dev: false
 
   /symbol-observable/4.0.0:
     resolution: {integrity: sha512-b19dMThMV4HVFynSAM1++gBHAbk2Tc/osgLIBZMKsyqh34jb2e8Os7T6ZW/Bt3pJFdBTd2JwAnAAEQV7rSNvcQ==}
@@ -16301,7 +17075,6 @@ packages:
     dependencies:
       buffer: 5.7.1
       node-fetch: 2.6.5
-    dev: false
 
   /table/6.7.1:
     resolution: {integrity: sha512-ZGum47Yi6KOOFDE8m223td53ath2enHcYLgOCjGr5ngu8bdIARQk6mN/wRMv4yMRcHnCSnHbCEha4sobQx5yWg==}
@@ -16505,12 +17278,17 @@ packages:
       popper.js: 1.16.1
     dev: false
 
+  /title-case/3.0.3:
+    resolution: {integrity: sha512-e1zGYRvbffpcHIrnuqT0Dh+gEJtDaxDSoG4JAIpq4oDFyooziLBIiYQv0GBT4FUAnUop5uZ1hiIAj7oAF6sOCA==}
+    dependencies:
+      tslib: 2.3.1
+    dev: true
+
   /tmp/0.0.33:
     resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
     engines: {node: '>=0.6.0'}
     dependencies:
       os-tmpdir: 1.0.2
-    dev: false
 
   /tmp/0.2.1:
     resolution: {integrity: sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==}
@@ -16545,7 +17323,6 @@ packages:
   /to-readable-stream/1.0.0:
     resolution: {integrity: sha512-Iq25XBt6zD5npPhlLVXGFN3/gyR2/qODcKNNyTMd4vbm39HUaOiAM4PMq0eMVC/Tkxz+Zjdsc55g9yyz+Yq00Q==}
     engines: {node: '>=6'}
-    dev: false
 
   /to-regex-range/2.1.1:
     resolution: {integrity: sha1-fIDBe53+vlmeJzZ+DU3VWQFB2zg=}
@@ -16600,7 +17377,6 @@ packages:
 
   /tr46/0.0.3:
     resolution: {integrity: sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=}
-    dev: false
 
   /tr46/2.1.0:
     resolution: {integrity: sha512-15Ih7phfcdP5YxqiB+iDtLoaTz4Nd35+IiAv0kQ5FNKHzXgdWqPoTIqEDDJmXceQt4JZk6lVPT8lnDlPpGDppw==}
@@ -16733,6 +17509,10 @@ packages:
       typescript: 4.2.4
     dev: true
 
+  /ts-log/2.2.3:
+    resolution: {integrity: sha512-XvB+OdKSJ708Dmf9ore4Uf/q62AYDTzFcAdxc8KNML1mmAWywRFVt/dn1KYJH8Agt5UJNujfM3znU5PxgAzA2w==}
+    dev: true
+
   /ts-node/8.10.2_typescript@4.4.3:
     resolution: {integrity: sha512-ISJJGgkIpDdBhWVu3jufsWpK3Rzo7bdiIXJjQc0ynKxVOVcg2oIrf2H2cejminGrptVc6q6/uynAHNCuWGbpVA==}
     engines: {node: '>=6.0.0'}
@@ -16748,6 +17528,22 @@ packages:
       yn: 3.1.1
     dev: false
 
+  /ts-node/9.1.1_typescript@4.4.3:
+    resolution: {integrity: sha512-hPlt7ZACERQGf03M253ytLY3dHbGNGrAq9qIHWUY9XHYl1z7wYngSr3OQ5xmui8o2AaxsONxIzjafLUiWBo1Fg==}
+    engines: {node: '>=10.0.0'}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=2.7'
+    dependencies:
+      arg: 4.1.3
+      create-require: 1.1.1
+      diff: 4.0.2
+      make-error: 1.3.6
+      source-map-support: 0.5.20
+      typescript: 4.4.3
+      yn: 3.1.1
+    dev: true
+
   /ts-pnp/1.2.0_typescript@4.4.3:
     resolution: {integrity: sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==}
     engines: {node: '>=6'}
@@ -16795,7 +17591,6 @@ packages:
 
   /tslib/2.3.1:
     resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
-    dev: false
 
   /tsup/4.14.0_typescript@4.4.3:
     resolution: {integrity: sha512-77rWdzhikTP9mQ34XMRzK83tw++LF6f4ox/HNERlgesB7g6g5VQ1iJlueG9O0P9HAZGVKavUwyoZv0+322p6rg==}
@@ -16932,7 +17727,6 @@ packages:
 
   /ua-parser-js/0.7.28:
     resolution: {integrity: sha512-6Gurc1n//gjp9eQNXjD9O3M/sMwVtN5S8Lv9bvOYBfKfDNiIIhqiyi01vMBO45u4zkDE420w/e0se7Vs+sIg+g==}
-    dev: false
 
   /ufo/0.7.9:
     resolution: {integrity: sha512-6t9LrLk3FhqTS+GW3IqlITtfRB5JAVr5MMNjpBECfK827W+Vh5Ilw/LhTcHWrt6b3hkeBvcbjx4Ti7QVFzmcww==}
@@ -16951,6 +17745,11 @@ packages:
       has-symbols: 1.0.2
       which-boxed-primitive: 1.0.2
 
+  /unc-path-regex/0.1.2:
+    resolution: {integrity: sha1-5z3T17DXxe2G+6xrCufYxqadUPo=}
+    engines: {node: '>=0.10.0'}
+    dev: true
+
   /unctx/0.0.3:
     resolution: {integrity: sha512-x+NCoXiYn93laQNnoJGZx2UZj7vv8ViFKadUCDx9S4QoPIkGRCYT0OLUDEMlg/B+Q6bnqdSkPLmiy/kjNIwVyQ==}
     dev: true
@@ -17065,7 +17864,6 @@ packages:
     engines: {node: '>=0.10.0'}
     dependencies:
       normalize-path: 2.1.1
-    dev: false
 
   /unpipe/1.0.0:
     resolution: {integrity: sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=}
@@ -17158,7 +17956,6 @@ packages:
     resolution: {integrity: sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==}
     dependencies:
       tslib: 2.3.1
-    dev: false
 
   /upper-case/1.1.3:
     resolution: {integrity: sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=}
@@ -17168,7 +17965,6 @@ packages:
     resolution: {integrity: sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==}
     dependencies:
       tslib: 2.3.1
-    dev: false
 
   /uri-js/4.4.1:
     resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==}
@@ -17217,7 +18013,6 @@ packages:
     engines: {node: '>=4'}
     dependencies:
       prepend-http: 2.0.0
-    dev: false
 
   /url-slug/2.0.0:
     resolution: {integrity: sha1-p4nVrtSZXA2VrzM3etHVxo1NcCc=}
@@ -17311,7 +18106,6 @@ packages:
 
   /valid-url/1.0.9:
     resolution: {integrity: sha1-HBRHm0DxOXp1eC8RXkCGRHQzogA=}
-    dev: false
 
   /validate-npm-package-license/3.0.4:
     resolution: {integrity: sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==}
@@ -17323,7 +18117,6 @@ packages:
   /value-or-promise/1.0.10:
     resolution: {integrity: sha512-1OwTzvcfXkAfabk60UVr5NdjtjJ0Fg0T5+B1bhxtrOEwSH2fe8y4DnLgoksfCyd8yZCOQQHB0qLMQnwgCjbXLQ==}
     engines: {node: '>=12'}
-    dev: false
 
   /value-or-promise/1.0.6:
     resolution: {integrity: sha512-9r0wQsWD8z/BxPOvnwbPf05ZvFngXyouE9EKB+5GbYix+BYnAwrIChCUyFIinfbf2FL/U71z+CPpbnmTdxrwBg==}
@@ -17685,7 +18478,6 @@ packages:
 
   /webidl-conversions/3.0.1:
     resolution: {integrity: sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=}
-    dev: false
 
   /webidl-conversions/5.0.0:
     resolution: {integrity: sha512-VlZwKPCkYKxQgeSbH5EyngOmRp7Ww7I9rQLERETtf5ofd9pGeswWiOtogpEO850jziPRarreGxn5QIiTqpb2wA==}
@@ -17834,6 +18626,10 @@ packages:
     resolution: {integrity: sha512-dcQ1GWpOD/eEQ97k66aiEVpNnapVj90/+R+SXTPYGHpYBBypfKJEQjLrvMZ7YXbKm21gXd4NcuxUTjiv1YtLng==}
     dev: false
 
+  /whatwg-fetch/3.6.2:
+    resolution: {integrity: sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==}
+    dev: true
+
   /whatwg-mimetype/2.3.0:
     resolution: {integrity: sha512-M4yMwr6mAnQz76TbJm914+gPpB/nCwvZbJU28cUD6dR004SAxDLOOSUaB1JDRqLtaOV/vi0IC5lEAGFgrjGv/g==}
     dev: true
@@ -17843,7 +18639,6 @@ packages:
     dependencies:
       tr46: 0.0.3
       webidl-conversions: 3.0.1
-    dev: false
 
   /whatwg-url/8.7.0:
     resolution: {integrity: sha512-gAojqb/m9Q8a5IV96E3fHJM70AzCkgt4uXYX2O7EmuyOnLrViCQlsEBmF9UQIu3/aeAIp2U17rtbpZWNntQqdg==}
@@ -17865,7 +18660,6 @@ packages:
 
   /which-module/2.0.0:
     resolution: {integrity: sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=}
-    dev: false
 
   /which/1.3.1:
     resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
@@ -17954,7 +18748,6 @@ packages:
     dependencies:
       string-width: 2.1.1
       strip-ansi: 4.0.0
-    dev: false
 
   /wrap-ansi/4.0.0:
     resolution: {integrity: sha512-uMTsj9rDb0/7kk1PbcbCcwvHUxp60fGDB/NNXpVa0Q+ic/e7y5+BwTxKfQ33VYgDppSwi/FBzpetYzo8s6tfbg==}
@@ -17972,7 +18765,6 @@ packages:
       ansi-styles: 4.3.0
       string-width: 4.2.3
       strip-ansi: 6.0.1
-    dev: false
 
   /wrap-ansi/7.0.0:
     resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==}
@@ -18062,7 +18854,6 @@ packages:
         optional: true
       utf-8-validate:
         optional: true
-    dev: false
 
   /xdg-basedir/4.0.0:
     resolution: {integrity: sha512-PSNhEJDejZYV7h50BohL09Er9VaIefr2LMAf3OEmpCkjOi34eYyQYAXUTjEQtZJTKcF0E2UKTh+osDLsgNim9Q==}
@@ -18109,7 +18900,6 @@ packages:
 
   /y18n/4.0.3:
     resolution: {integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==}
-    dev: false
 
   /y18n/5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
@@ -18125,6 +18915,10 @@ packages:
   /yallist/4.0.0:
     resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
 
+  /yaml-ast-parser/0.0.43:
+    resolution: {integrity: sha512-2PTINUwsRqSd+s8XxKaJWQlUuEMHJQyEuh2edBbW8KNJz0SJPwUSD2zRWqezFEdN7IzAgeuYHFUCF7o8zRdZ0A==}
+    dev: true
+
   /yaml/1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
@@ -18135,7 +18929,6 @@ packages:
     dependencies:
       camelcase: 5.3.1
       decamelize: 1.2.0
-    dev: false
 
   /yargs-parser/20.2.9:
     resolution: {integrity: sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==}
@@ -18156,7 +18949,6 @@ packages:
       which-module: 2.0.0
       y18n: 4.0.3
       yargs-parser: 18.1.3
-    dev: false
 
   /yargs/16.2.0:
     resolution: {integrity: sha512-D1mvvtDG0L5ft/jGWkLpG1+m0eQxOfaBvTNELraWj22wSVUMWxZUvYgJYcKh6jGGIkJFhH4IZPQhR4TKpc8mBw==}
@@ -18197,7 +18989,6 @@ packages:
   /yn/3.1.1:
     resolution: {integrity: sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==}
     engines: {node: '>=6'}
-    dev: false
 
   /yocto-queue/0.1.0:
     resolution: {integrity: sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==}

From ef9593976395874147e965a935afd36ded6fdd75 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sat, 9 Oct 2021 16:10:51 +0530
Subject: [PATCH 17/17] feat: teams invite modal

---
 .../components/teams/Invite.vue               | 373 ++++++++++++++++++
 .../hoppscotch-app/components/teams/Team.vue  |  12 +
 .../hoppscotch-app/components/teams/index.vue |  27 ++
 3 files changed, 412 insertions(+)
 create mode 100644 packages/hoppscotch-app/components/teams/Invite.vue

diff --git a/packages/hoppscotch-app/components/teams/Invite.vue b/packages/hoppscotch-app/components/teams/Invite.vue
new file mode 100644
index 000000000..9d48d21f0
--- /dev/null
+++ b/packages/hoppscotch-app/components/teams/Invite.vue
@@ -0,0 +1,373 @@
+<template>
+  <SmartModal v-if="show" :title="$t('team.invite_tooltip')" @close="hideModal">
+    <template #body>
+      <div class="flex flex-col px-2">
+        <div class="flex flex-1 justify-between items-center">
+          <label for="memberList" class="p-4">
+            {{ $t("team.members") }}
+          </label>
+          <div class="flex">
+            <ButtonSecondary
+              svg="plus"
+              :label="$t('add.new')"
+              @click.native="addTeamMember"
+            />
+          </div>
+        </div>
+        <div class="divide-y divide-dividerLight border-divider border rounded">
+          <div
+            v-for="(member, index) in members"
+            :key="`member-${index}`"
+            class="divide-x divide-dividerLight flex"
+          >
+            <input
+              class="bg-transparent flex flex-1 py-2 px-4"
+              :placeholder="$t('team.email')"
+              :name="'param' + index"
+              :value="member.user.email"
+              readonly
+            />
+            <span>
+              <tippy
+                :ref="`memberOptions-${index}`"
+                interactive
+                trigger="click"
+                theme="popover"
+                arrow
+              >
+                <template #trigger>
+                  <span class="select-wrapper">
+                    <input
+                      class="
+                        bg-transparent
+                        cursor-pointer
+                        flex flex-1
+                        py-2
+                        px-4
+                      "
+                      :placeholder="$t('team.permissions')"
+                      :name="'value' + index"
+                      :value="
+                        typeof member.role === 'string'
+                          ? member.role
+                          : JSON.stringify(member.role)
+                      "
+                      readonly
+                    />
+                  </span>
+                </template>
+                <SmartItem
+                  label="OWNER"
+                  @click.native="updateMemberRole(index, 'OWNER')"
+                />
+                <SmartItem
+                  label="EDITOR"
+                  @click.native="updateMemberRole(index, 'EDITOR')"
+                />
+                <SmartItem
+                  label="VIEWER"
+                  @click.native="updateMemberRole(index, 'VIEWER')"
+                />
+              </tippy>
+            </span>
+            <div class="flex">
+              <ButtonSecondary
+                id="member"
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.remove')"
+                svg="trash"
+                color="red"
+                @click.native="removeExistingTeamMember(member.user.uid)"
+              />
+            </div>
+          </div>
+          <div
+            v-for="(member, index) in newMembers"
+            :key="`new-member-${index}`"
+            class="divide-x divide-dividerLight flex"
+          >
+            <input
+              v-model="member.key"
+              class="bg-transparent flex flex-1 py-2 px-4"
+              :placeholder="$t('team.email')"
+              :name="'member' + index"
+              autofocus
+            />
+            <span>
+              <tippy
+                :ref="`newMemberOptions-${index}`"
+                interactive
+                trigger="click"
+                theme="popover"
+                arrow
+              >
+                <template #trigger>
+                  <span class="select-wrapper">
+                    <input
+                      class="
+                        bg-transparent
+                        cursor-pointer
+                        flex flex-1
+                        py-2
+                        px-4
+                      "
+                      :placeholder="$t('team.permissions')"
+                      :name="'value' + index"
+                      :value="
+                        typeof member.value === 'string'
+                          ? member.value
+                          : JSON.stringify(member.value)
+                      "
+                      readonly
+                    />
+                  </span>
+                </template>
+                <SmartItem
+                  label="OWNER"
+                  @click.native="updateNewMemberRole(index, 'OWNER')"
+                />
+                <SmartItem
+                  label="EDITOR"
+                  @click.native="updateNewMemberRole(index, 'EDITOR')"
+                />
+                <SmartItem
+                  label="VIEWER"
+                  @click.native="updateNewMemberRole(index, 'VIEWER')"
+                />
+              </tippy>
+            </span>
+            <div class="flex">
+              <ButtonSecondary
+                id="member"
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.remove')"
+                svg="trash"
+                color="red"
+                @click.native="removeTeamMember(index)"
+              />
+            </div>
+          </div>
+          <div
+            v-if="members.length === 0 && newMembers.length === 0"
+            class="
+              flex flex-col
+              text-secondaryLight
+              p-4
+              items-center
+              justify-center
+            "
+          >
+            <SmartIcon class="opacity-75 pb-2" name="users" />
+            <span class="text-center pb-4">
+              {{ $t("empty.members") }}
+            </span>
+            <ButtonSecondary
+              :label="$t('add.new')"
+              filled
+              @click.native="addTeamMember"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary :label="$t('action.save')" @click.native="saveTeam" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+import cloneDeep from "lodash/cloneDeep"
+import { defineComponent } from "@nuxtjs/composition-api"
+import * as teamUtils from "~/helpers/teams/utils"
+import TeamMemberAdapter from "~/helpers/teams/TeamMemberAdapter"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+    editingTeam: { type: Object, default: () => {} },
+    editingteamID: { type: String, default: null },
+  },
+  data() {
+    return {
+      rename: null,
+      members: [],
+      newMembers: [],
+      membersAdapter: new TeamMemberAdapter(null),
+    }
+  },
+  computed: {
+    editingTeamCopy() {
+      return this.editingTeam
+    },
+    name: {
+      get() {
+        return this.editingTeam.name
+      },
+      set(name) {
+        this.rename = name
+      },
+    },
+  },
+  watch: {
+    editingteamID(teamID) {
+      this.membersAdapter.changeTeamID(teamID)
+    },
+  },
+  mounted() {
+    this.membersAdapter.members$.subscribe((list) => {
+      this.members = cloneDeep(list)
+    })
+  },
+  methods: {
+    updateMemberRole(id, role) {
+      this.members[id].role = role
+      this.$refs[`memberOptions-${id}`][0].tippy().hide()
+    },
+    updateNewMemberRole(id, role) {
+      this.newMembers[id].value = role
+      this.$refs[`newMemberOptions-${id}`][0].tippy().hide()
+    },
+    addTeamMember() {
+      const member = { key: "", value: "" }
+      this.newMembers.push(member)
+    },
+    removeExistingTeamMember(userID) {
+      teamUtils
+        .removeTeamMember(this.$apollo, userID, this.editingteamID)
+        .then(() => {
+          this.$toast.success(this.$t("team.member_removed"), {
+            icon: "done",
+          })
+          this.hideModal()
+        })
+        .catch((e) => {
+          this.$toast.error(this.$t("error.something_went_wrong"), {
+            icon: "error_outline",
+          })
+          console.error(e)
+        })
+    },
+    removeTeamMember(index) {
+      this.newMembers.splice(index, 1)
+    },
+    validateEmail(emailID) {
+      if (
+        /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
+          emailID
+        )
+      ) {
+        return true
+      }
+      return false
+    },
+    saveTeam() {
+      if (
+        this.$data.rename !== null &&
+        this.$data.rename.replace(/\s/g, "").length < 6
+      ) {
+        this.$toast.error(this.$t("team.name_length_insufficient"), {
+          icon: "error_outline",
+        })
+        return
+      }
+      let invalidEmail = false
+      this.$data.newMembers.forEach((element) => {
+        if (!this.validateEmail(element.key)) {
+          this.$toast.error(this.$t("team.invalid_email_format"), {
+            icon: "error_outline",
+          })
+          invalidEmail = true
+        }
+      })
+      if (invalidEmail) return
+      let invalidPermission = false
+      this.$data.newMembers.forEach((element) => {
+        if (!element.value) {
+          this.$toast.error(this.$t("invalid_member_permission"), {
+            icon: "error_outline",
+          })
+          invalidPermission = true
+        }
+      })
+      if (invalidPermission) return
+      this.$data.newMembers.forEach((element) => {
+        // Call to the graphql mutation
+        teamUtils
+          .addTeamMemberByEmail(
+            this.$apollo,
+            element.value,
+            element.key,
+            this.editingteamID
+          )
+          .then(() => {
+            this.$toast.success(this.$t("team.saved"), {
+              icon: "done",
+            })
+          })
+          .catch((e) => {
+            this.$toast.error(e, {
+              icon: "error_outline",
+            })
+            console.error(e)
+          })
+      })
+      this.members.forEach((element) => {
+        teamUtils
+          .updateTeamMemberRole(
+            this.$apollo,
+            element.user.uid,
+            element.role,
+            this.editingteamID
+          )
+          .then(() => {
+            this.$toast.success(this.$t("team.member_role_updated"), {
+              icon: "done",
+            })
+          })
+          .catch((e) => {
+            this.$toast.error(e, {
+              icon: "error_outline",
+            })
+            console.error(e)
+          })
+      })
+      if (this.$data.rename !== null) {
+        const newName =
+          this.name === this.$data.rename ? this.name : this.$data.rename
+        if (!/\S/.test(newName))
+          return this.$toast.error(this.$t("empty.team_name"), {
+            icon: "error_outline",
+          })
+        // Call to the graphql mutation
+        if (this.name !== this.rename)
+          teamUtils
+            .renameTeam(this.$apollo, newName, this.editingteamID)
+            .then(() => {
+              this.$toast.success(this.$t("team.saved"), {
+                icon: "done",
+              })
+            })
+            .catch((e) => {
+              this.$toast.error(this.$t("error.something_went_wrong"), {
+                icon: "error_outline",
+              })
+              console.error(e)
+            })
+      }
+      this.hideModal()
+    },
+    hideModal() {
+      this.rename = null
+      this.newMembers = []
+      this.$emit("hide-modal")
+    },
+  },
+})
+</script>
diff --git a/packages/hoppscotch-app/components/teams/Team.vue b/packages/hoppscotch-app/components/teams/Team.vue
index 49d37e695..33bd27105 100644
--- a/packages/hoppscotch-app/components/teams/Team.vue
+++ b/packages/hoppscotch-app/components/teams/Team.vue
@@ -21,6 +21,18 @@
         </div>
       </div>
     </div>
+    <ButtonSecondary
+      v-if="team.myRole === 'OWNER'"
+      v-tippy="{ theme: 'tooltip' }"
+      svg="user-plus"
+      :title="$t('team.invite')"
+      @click.native="
+        () => {
+          emit('invite-team')
+          $refs.options.tippy().hide()
+        }
+      "
+    />
     <span>
       <tippy ref="options" interactive trigger="click" theme="popover" arrow>
         <template #trigger>
diff --git a/packages/hoppscotch-app/components/teams/index.vue b/packages/hoppscotch-app/components/teams/index.vue
index 51c38fbcf..007340909 100644
--- a/packages/hoppscotch-app/components/teams/index.vue
+++ b/packages/hoppscotch-app/components/teams/index.vue
@@ -43,6 +43,7 @@
           :team-i-d="team.id"
           :team="team"
           @edit-team="editTeam(team, team.id)"
+          @invite-team="inviteTeam(team, team.id)"
         />
       </div>
       <div
@@ -67,6 +68,18 @@
       :editingteam-i-d="editingTeamID"
       @hide-modal="displayModalEdit(false)"
     />
+    <TeamsInvite
+      v-if="
+        !myTeams.loading &&
+        E.isRight(myTeams.data) &&
+        myTeams.data.right.myTeams.length > 0
+      "
+      :team="myTeams.data.right.myTeams[0]"
+      :show="showModalInvite"
+      :editing-team="editingTeam"
+      :editingteam-i-d="editingTeamID"
+      @hide-modal="displayModalInvite(false)"
+    />
   </AppSection>
 </template>
 
@@ -87,6 +100,7 @@ defineProps<{
 
 const showModalAdd = ref(false)
 const showModalEdit = ref(false)
+const showModalInvite = ref(false)
 const editingTeam = ref<any>({}) // TODO: Check this out
 const editingTeamID = ref<any>("")
 
@@ -109,12 +123,25 @@ const displayModalEdit = (shouldDisplay: boolean) => {
 
   if (!shouldDisplay) resetSelectedData()
 }
+
+const displayModalInvite = (shouldDisplay: boolean) => {
+  showModalInvite.value = shouldDisplay
+
+  if (!shouldDisplay) resetSelectedData()
+}
+
 const editTeam = (team: any, teamID: any) => {
   editingTeam.value = team
   editingTeamID.value = teamID
   displayModalEdit(true)
 }
 
+const inviteTeam = (team: any, teamID: any) => {
+  editingTeam.value = team
+  editingTeamID.value = teamID
+  displayModalInvite(true)
+}
+
 const resetSelectedData = () => {
   editingTeam.value = undefined
   editingTeamID.value = undefined