From 44df9b3be88e465707907d3d26eee7ec52450471 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 19 May 2021 10:24:57 +0530
Subject: [PATCH] refactor: lint

---
 .eslintrc.js                                |   2 +
 components/collections/SaveRequest.vue      |  52 +--
 components/collections/graphql/index.vue    |  71 +++--
 components/collections/index.vue            | 202 ++++++------
 components/collections/my/Collection.vue    |  71 +++--
 components/collections/my/Folder.vue        |  56 ++--
 components/collections/my/Request.vue       |  64 ++--
 components/collections/teams/Collection.vue |  58 ++--
 components/collections/teams/Folder.vue     |  59 ++--
 components/collections/teams/Request.vue    |  37 ++-
 components/graphql/Field.vue                |  42 ++-
 components/graphql/QueryEditor.vue          |  81 +++--
 components/graphql/Type.vue                 |  76 +++--
 components/history/index.vue                | 258 ++++++++-------
 helpers/postwomanTesting.js                 |  77 ++++-
 helpers/preRequest.js                       |   5 +-
 helpers/teams/utils.js                      | 189 ++++++-----
 helpers/utils/__tests__/debounce.spec.js    |   4 +-
 newstore/DispatchingStore.ts                |  31 +-
 pages/graphql.vue                           | 335 +++++++++++++-------
 20 files changed, 1080 insertions(+), 690 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 5ec892798..c5434b1b3 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -37,6 +37,8 @@ module.exports = {
     ],
     "vue/singleline-html-element-content-newline": "off",
     "vue/multiline-html-element-content-newline": "off",
+    "vue/require-default-prop": "warn",
+    "vue/require-prop-types": "warn",
     "prettier/prettier": ["warn", { semi: false }],
     "import/no-named-as-default": "off",
     "no-undef": "off",
diff --git a/components/collections/SaveRequest.vue b/components/collections/SaveRequest.vue
index 9dc61f8fc..ea53e0c64 100644
--- a/components/collections/SaveRequest.vue
+++ b/components/collections/SaveRequest.vue
@@ -12,15 +12,20 @@
     </div>
     <div slot="body" class="flex flex-col">
       <label for="selectLabel">{{ $t("token_req_name") }}</label>
-      <input type="text" id="selectLabel" v-model="requestData.name" @keyup.enter="saveRequestAs" />
+      <input
+        id="selectLabel"
+        v-model="requestData.name"
+        type="text"
+        @keyup.enter="saveRequestAs"
+      />
       <label for="selectLabel">Select location</label>
       <!-- <input readonly :value="path" /> -->
       <Collections
+        :picked="picked"
+        :save-request="true"
         @select="onSelect"
         @update-collection="collectionsType.type = $event"
         @update-coll-type="onUpdateCollType"
-        :picked="picked"
-        :saveRequest="true"
       />
     </div>
     <div slot="footer">
@@ -42,12 +47,12 @@
 <script>
 import { fb } from "~/helpers/fb"
 import { getSettingSubject } from "~/newstore/settings"
-import * as team_utils from "~/helpers/teams/utils"
+import * as teamUtils from "~/helpers/teams/utils"
 
 export default {
   props: {
     show: Boolean,
-    editingRequest: Object,
+    editingRequest: { type: Object, default: () => {} },
   },
   data() {
     return {
@@ -71,20 +76,6 @@ export default {
       SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
     }
   },
-  watch: {
-    "requestData.collectionIndex": function resetFolderAndRequestIndex() {
-      // if user has chosen some folder, than selected other collection, which doesn't have any folders
-      // than `requestUpdateData.folderName` won't be reseted
-      this.$data.requestData.folderName = undefined
-      this.$data.requestData.requestIndex = undefined
-    },
-    "requestData.folderName": function resetRequestIndex() {
-      this.$data.requestData.requestIndex = undefined
-    },
-    editingRequest({ name }) {
-      this.$data.requestData.name = name || this.$data.defaultRequestName
-    },
-  },
   computed: {
     folders() {
       const collections = this.$store.state.postwoman.collections
@@ -107,7 +98,8 @@ export default {
         return []
       }
 
-      const userSelectedAnyFolder = folderName !== undefined && folderName !== ""
+      const userSelectedAnyFolder =
+        folderName !== undefined && folderName !== ""
 
       if (userSelectedAnyFolder) {
         const collection = collections[collectionIndex]
@@ -125,6 +117,20 @@ export default {
       }
     },
   },
+  watch: {
+    "requestData.collectionIndex": function resetFolderAndRequestIndex() {
+      // if user has chosen some folder, than selected other collection, which doesn't have any folders
+      // than `requestUpdateData.folderName` won't be reseted
+      this.$data.requestData.folderName = undefined
+      this.$data.requestData.requestIndex = undefined
+    },
+    "requestData.folderName": function resetRequestIndex() {
+      this.$data.requestData.requestIndex = undefined
+    },
+    editingRequest({ name }) {
+      this.$data.requestData.name = name || this.$data.defaultRequestName
+    },
+  },
   methods: {
     onUpdateCollType(newCollType) {
       this.collectionsType = newCollType
@@ -188,14 +194,14 @@ export default {
 
         this.syncCollections()
       } else if (this.picked.pickedType === "teams-request") {
-        team_utils.overwriteRequestTeams(
+        teamUtils.overwriteRequestTeams(
           this.$apollo,
           JSON.stringify(requestUpdated),
           requestUpdated.name,
           this.picked.requestID
         )
       } else if (this.picked.pickedType === "teams-folder") {
-        team_utils.saveRequestAsTeams(
+        teamUtils.saveRequestAsTeams(
           this.$apollo,
           JSON.stringify(requestUpdated),
           requestUpdated.name,
@@ -203,7 +209,7 @@ export default {
           this.picked.folderID
         )
       } else if (this.picked.pickedType === "teams-collection") {
-        team_utils.saveRequestAsTeams(
+        teamUtils.saveRequestAsTeams(
           this.$apollo,
           JSON.stringify(requestUpdated),
           requestUpdated.name,
diff --git a/components/collections/graphql/index.vue b/components/collections/graphql/index.vue
index 3dcbafb50..4f05ed781 100644
--- a/components/collections/graphql/index.vue
+++ b/components/collections/graphql/index.vue
@@ -1,15 +1,23 @@
 <template>
-  <AppSection class="yellow" :label="$t('collections')" ref="collections" no-legend>
+  <AppSection
+    ref="collections"
+    class="yellow"
+    :label="$t('collections')"
+    no-legend
+  >
     <div class="show-on-large-screen">
       <input
+        v-model="filterText"
         aria-label="Search"
         type="search"
         :placeholder="$t('search')"
-        v-model="filterText"
         class="rounded-t-lg"
       />
     </div>
-    <CollectionsGraphqlAdd :show="showModalAdd" @hide-modal="displayModalAdd(false)" />
+    <CollectionsGraphqlAdd
+      :show="showModalAdd"
+      @hide-modal="displayModalAdd(false)"
+    />
     <CollectionsGraphqlEdit
       :show="showModalEdit"
       :editing-collection="editingCollection"
@@ -53,17 +61,21 @@
       </button>
     </div>
     <p v-if="collections.length === 0" class="info">
-      <i class="material-icons">help_outline</i> {{ $t("create_new_collection") }}
+      <i class="material-icons">help_outline</i>
+      {{ $t("create_new_collection") }}
     </p>
     <div class="virtual-list">
       <ul class="flex-col">
-        <li v-for="(collection, index) in filteredCollections" :key="collection.name">
+        <li
+          v-for="(collection, index) in filteredCollections"
+          :key="collection.name"
+        >
           <CollectionsGraphqlCollection
             :name="collection.name"
             :collection-index="index"
             :collection="collection"
             :doc="doc"
-            :isFiltered="filterText.length > 0"
+            :is-filtered="filterText.length > 0"
             @edit-collection="editCollection(collection, index)"
             @add-folder="addFolder($event)"
             @edit-folder="editFolder($event)"
@@ -74,17 +86,13 @@
       </ul>
     </div>
     <p v-if="filterText && filteredCollections.length === 0" class="info">
-      <i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{ filterText }}"
+      <i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{
+        filterText
+      }}"
     </p>
   </AppSection>
 </template>
 
-<style scoped lang="scss">
-.virtual-list {
-  max-height: calc(100vh - 270px);
-}
-</style>
-
 <script>
 import { fb } from "~/helpers/fb"
 
@@ -128,15 +136,16 @@ export default {
       const filterText = this.filterText.toLowerCase()
       const filteredCollections = []
 
-      for (let collection of collections) {
+      for (const collection of collections) {
         const filteredRequests = []
         const filteredFolders = []
-        for (let request of collection.requests) {
-          if (request.name.toLowerCase().includes(filterText)) filteredRequests.push(request)
+        for (const request of collection.requests) {
+          if (request.name.toLowerCase().includes(filterText))
+            filteredRequests.push(request)
         }
-        for (let folder of collection.folders) {
+        for (const folder of collection.folders) {
           const filteredFolderRequests = []
-          for (let request of folder.requests) {
+          for (const request of folder.requests) {
             if (request.name.toLowerCase().includes(filterText))
               filteredFolderRequests.push(request)
           }
@@ -158,7 +167,7 @@ export default {
       return filteredCollections
     },
   },
-  async mounted() {
+  mounted() {
     this._keyListener = function (e) {
       if (e.key === "Escape") {
         e.preventDefault()
@@ -173,6 +182,9 @@ export default {
     }
     document.addEventListener("keydown", this._keyListener.bind(this))
   },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this._keyListener)
+  },
   methods: {
     displayModalAdd(shouldDisplay) {
       this.showModalAdd = shouldDisplay
@@ -232,7 +244,13 @@ export default {
       this.syncCollections()
     },
     editRequest(payload) {
-      const { collectionIndex, folderIndex, folderName, request, requestIndex } = payload
+      const {
+        collectionIndex,
+        folderIndex,
+        folderName,
+        request,
+        requestIndex,
+      } = payload
       this.$data.editingCollectionIndex = collectionIndex
       this.$data.editingFolderIndex = folderIndex
       this.$data.editingFolderName = folderName
@@ -253,15 +271,20 @@ export default {
       if (fb.currentUser !== null && fb.currentSettings[0]) {
         if (fb.currentSettings[0].value) {
           fb.writeCollections(
-            JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
+            JSON.parse(
+              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
+            ),
             "collectionsGraphql"
           )
         }
       }
     },
   },
-  beforeDestroy() {
-    document.removeEventListener("keydown", this._keyListener)
-  },
 }
 </script>
+
+<style scoped lang="scss">
+.virtual-list {
+  max-height: calc(100vh - 270px);
+}
+</style>
diff --git a/components/collections/index.vue b/components/collections/index.vue
index b69cf358f..a8ea48b56 100644
--- a/components/collections/index.vue
+++ b/components/collections/index.vue
@@ -1,17 +1,17 @@
 <template>
-  <AppSection :label="$t('collections')" ref="collections" no-legend>
+  <AppSection ref="collections" :label="$t('collections')" no-legend>
     <div class="show-on-large-screen">
       <input
+        v-if="!saveRequest"
+        v-model="filterText"
         aria-label="Search"
         type="search"
         :placeholder="$t('search')"
-        v-if="!saveRequest"
-        v-model="filterText"
         class="rounded-t-lg"
       />
     </div>
     <CollectionsChooseType
-      :collectionsType="collectionsType"
+      :collections-type="collectionsType"
       :show="showTeamCollections"
       :doc="doc"
       @update-collection-type="updateCollectionType"
@@ -48,7 +48,7 @@
     />
     <CollectionsImportExport
       :show="showModalImportExport"
-      :collectionsType="collectionsType"
+      :collections-type="collectionsType"
       @hide-modal="displayModalImportExport(false)"
       @update-team-collections="updateTeamCollections"
     />
@@ -61,22 +61,27 @@
           !saveRequest
         "
         class="icon"
-        @click="displayModalAdd(true)"
         disabled
+        @click="displayModalAdd(true)"
       >
         <i class="material-icons">add</i>
         <div v-tooltip.left="$t('disable_new_collection')">
           <span>{{ $t("new") }}</span>
         </div>
       </button>
-      <button v-else-if="!saveRequest" class="icon" @click="displayModalAdd(true)">
+      <button
+        v-else-if="!saveRequest"
+        class="icon"
+        @click="displayModalAdd(true)"
+      >
         <i class="material-icons">add</i>
         <span>{{ $t("new") }}</span>
       </button>
       <button
         v-if="!saveRequest"
         :disabled="
-          collectionsType.type == 'team-collections' && collectionsType.selectedTeam == undefined
+          collectionsType.type == 'team-collections' &&
+          collectionsType.selectedTeam == undefined
         "
         class="icon"
         @click="displayModalImportExport(true)"
@@ -85,11 +90,15 @@
       </button>
     </div>
     <p v-if="collections.length === 0" class="info">
-      <i class="material-icons">help_outline</i> {{ $t("create_new_collection") }}
+      <i class="material-icons">help_outline</i>
+      {{ $t("create_new_collection") }}
     </p>
     <div class="virtual-list">
       <ul class="flex-col">
-        <li v-for="(collection, index) in filteredCollections" :key="collection.name">
+        <li
+          v-for="(collection, index) in filteredCollections"
+          :key="collection.name"
+        >
           <component
             :is="
               collectionsType.type == 'my-collections'
@@ -100,10 +109,10 @@
             :collection-index="index"
             :collection="collection"
             :doc="doc"
-            :isFiltered="filterText.length > 0"
+            :is-filtered="filterText.length > 0"
             :selected="selected.some((coll) => coll == collection)"
-            :saveRequest="saveRequest"
-            :collectionsType="collectionsType"
+            :save-request="saveRequest"
+            :collections-type="collectionsType"
             :picked="picked"
             @edit-collection="editCollection(collection, index)"
             @add-folder="addFolder($event)"
@@ -112,25 +121,6 @@
             @update-team-collections="updateTeamCollections"
             @select-collection="$emit('use-collection', collection)"
             @unselect-collection="$emit('remove-collection', collection)"
-            @select-folder="
-              $emit('select-folder', {
-                folderName:
-                  (collectionsType.type == 'my-collections' ? collection.name : collection.title) +
-                  '/' +
-                  $event.name,
-                collectionIndex: collectionsType.type == 'my-collections' ? index : $event.id,
-                reqIdx: $event.reqIdx,
-                collectionsType: collectionsType,
-                folderId: $event.id,
-              })
-              if (collectionsType.type == 'my-collections') {
-                if ($event.folderPath) {
-                  picked = $event.folderPath
-                } else picked = index
-              } else {
-                picked = $event.id
-              }
-            "
             @select="$emit('select', $event)"
             @expand-collection="expandCollection"
             @remove-collection="removeCollection"
@@ -140,31 +130,27 @@
       </ul>
     </div>
     <p v-if="filterText && filteredCollections.length === 0" class="info">
-      <i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{ filterText }}"
+      <i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{
+        filterText
+      }}"
     </p>
   </AppSection>
 </template>
 
-<style scoped lang="scss">
-.virtual-list {
-  max-height: calc(100vh - 270px);
-}
-</style>
-
 <script>
+import gql from "graphql-tag"
+import cloneDeep from "lodash/cloneDeep"
 import { fb } from "~/helpers/fb"
 import { getSettingSubject } from "~/newstore/settings"
-import gql from "graphql-tag"
 import TeamCollectionAdapter from "~/helpers/teams/TeamCollectionAdapter"
-import * as team_utils from "~/helpers/teams/utils"
-import cloneDeep from "lodash/cloneDeep"
+import * as teamUtils from "~/helpers/teams/utils"
 
 export default {
   props: {
     doc: Boolean,
     selected: { type: Array, default: () => [] },
     saveRequest: Boolean,
-    picked: Object,
+    picked: { type: Object, default: () => {} },
   },
   data() {
     return {
@@ -196,20 +182,12 @@ export default {
       SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
     }
   },
-  watch: {
-    "collectionsType.type": function emitstuff() {
-      this.$emit("update-collection", this.$data.collectionsType.type)
-    },
-    "collectionsType.selectedTeam": function (value) {
-      if (value?.id) this.teamCollectionAdapter.changeTeamID(value.id)
-    },
-  },
   computed: {
     showTeamCollections() {
       if (fb.currentUser == null) {
-        this.collectionsType.type = "my-collections"
+        return false
       }
-      return fb.currentUser !== null
+      return true
     },
     collections() {
       return fb.currentUser !== null
@@ -218,9 +196,11 @@ export default {
     },
     filteredCollections() {
       let collections = null
-      if (this.collectionsType.type == "my-collections") {
+      if (this.collectionsType.type === "my-collections") {
         collections =
-          fb.currentUser !== null ? fb.currentCollections : this.$store.state.postwoman.collections
+          fb.currentUser !== null
+            ? fb.currentCollections
+            : this.$store.state.postwoman.collections
       } else {
         collections = this.teamCollectionsNew
       }
@@ -229,24 +209,25 @@ export default {
         return collections
       }
 
-      if (this.collectionsType.type == "team-collections") {
+      if (this.collectionsType.type === "team-collections") {
         return []
       }
 
       const filterText = this.filterText.toLowerCase()
       const filteredCollections = []
 
-      for (let collection of collections) {
+      for (const collection of collections) {
         const filteredRequests = []
         const filteredFolders = []
-        for (let request of collection.requests) {
-          if (request.name.toLowerCase().includes(filterText)) filteredRequests.push(request)
+        for (const request of collection.requests) {
+          if (request.name.toLowerCase().includes(filterText))
+            filteredRequests.push(request)
         }
-        for (let folder of this.collectionsType.type === "team-collections"
+        for (const folder of this.collectionsType.type === "team-collections"
           ? collection.children
           : collection.folders) {
           const filteredFolderRequests = []
-          for (let request of folder.requests) {
+          for (const request of folder.requests) {
             if (request.name.toLowerCase().includes(filterText))
               filteredFolderRequests.push(request)
           }
@@ -271,7 +252,15 @@ export default {
       return filteredCollections
     },
   },
-  async mounted() {
+  watch: {
+    "collectionsType.type": function emitstuff() {
+      this.$emit("update-collection", this.$data.collectionsType.type)
+    },
+    "collectionsType.selectedTeam"(value) {
+      if (value?.id) this.teamCollectionAdapter.changeTeamID(value.id)
+    },
+  },
+  mounted() {
     this._keyListener = function (e) {
       if (e.key === "Escape") {
         e.preventDefault()
@@ -290,6 +279,9 @@ export default {
       this.teamCollectionsNew = cloneDeep(colls)
     })
   },
+  beforeDestroy() {
+    document.removeEventListener("keydown", this._keyListener)
+  },
   methods: {
     updateTeamCollections() {
       // TODO: Remove this at some point
@@ -319,8 +311,12 @@ export default {
         this.collectionsType.type === "team-collections" &&
         this.collectionsType.selectedTeam.myRole !== "VIEWER"
       ) {
-        team_utils
-          .createNewRootCollection(this.$apollo, name, this.collectionsType.selectedTeam.id)
+        teamUtils
+          .createNewRootCollection(
+            this.$apollo,
+            name,
+            this.collectionsType.selectedTeam.id
+          )
           .then(() => {
             this.$toast.success(this.$t("collection_added"), {
               icon: "done",
@@ -356,7 +352,7 @@ export default {
         this.collectionsType.type === "team-collections" &&
         this.collectionsType.selectedTeam.myRole !== "VIEWER"
       ) {
-        team_utils
+        teamUtils
           .renameCollection(this.$apollo, newName, this.editingCollection.id)
           .then(() => {
             // TODO: $t translations ?
@@ -375,20 +371,20 @@ export default {
     },
     // Intended to be called by CollectionEditFolder modal submit event
     updateEditingFolder(name) {
-      if (this.collectionsType.type == "my-collections") {
+      if (this.collectionsType.type === "my-collections") {
         this.$store.commit("postwoman/editFolder", {
           collectionIndex: this.editingCollectionIndex,
-          folder: { ...this.editingFolder, name: name },
+          folder: { ...this.editingFolder, name },
           folderIndex: this.editingFolderIndex,
           folderName: this.editingFolder.name,
           flag: "rest",
         })
         this.syncCollections()
       } else if (
-        this.collectionsType.type == "team-collections" &&
+        this.collectionsType.type === "team-collections" &&
         this.collectionsType.selectedTeam.myRole !== "VIEWER"
       ) {
-        team_utils
+        teamUtils
           .renameCollection(this.$apollo, name, this.editingFolder.id)
           .then(() => {
             // Result
@@ -414,7 +410,7 @@ export default {
         name: requestUpdateData.name || this.editingRequest.name,
       }
 
-      if (this.collectionsType.type == "my-collections") {
+      if (this.collectionsType.type === "my-collections") {
         this.$store.commit("postwoman/editRequest", {
           requestCollectionIndex: this.editingCollectionIndex,
           requestFolderName: this.editingFolderName,
@@ -428,9 +424,14 @@ export default {
         this.collectionsType.type === "team-collections" &&
         this.collectionsType.selectedTeam.myRole !== "VIEWER"
       ) {
-        let requestName = requestUpdateData.name || this.editingRequest.name
-        team_utils
-          .updateRequest(this.$apollo, requestUpdated, requestName, this.editingRequestIndex)
+        const requestName = requestUpdateData.name || this.editingRequest.name
+        teamUtils
+          .updateRequest(
+            this.$apollo,
+            requestUpdated,
+            requestName,
+            this.editingRequestIndex
+          )
           .then(() => {
             this.$toast.success("Request Renamed", {
               icon: "done",
@@ -489,12 +490,18 @@ export default {
         })
         this.syncCollections()
       } else if (this.collectionsType.type === "team-collections") {
-        if (this.collectionsType.selectedTeam.myRole != "VIEWER") {
+        if (this.collectionsType.selectedTeam.myRole !== "VIEWER") {
           this.$apollo
             .mutate({
               mutation: gql`
-                mutation CreateChildCollection($childTitle: String!, $collectionID: String!) {
-                  createChildCollection(childTitle: $childTitle, collectionID: $collectionID) {
+                mutation CreateChildCollection(
+                  $childTitle: String!
+                  $collectionID: String!
+                ) {
+                  createChildCollection(
+                    childTitle: $childTitle
+                    collectionID: $collectionID
+                  ) {
                     id
                   }
                 }
@@ -540,7 +547,13 @@ export default {
       this.syncCollections()
     },
     editRequest(payload) {
-      const { collectionIndex, folderIndex, folderName, request, requestIndex } = payload
+      const {
+        collectionIndex,
+        folderIndex,
+        folderName,
+        request,
+        requestIndex,
+      } = payload
       this.$data.editingCollectionIndex = collectionIndex
       this.$data.editingFolderIndex = folderIndex
       this.$data.editingFolderName = folderName
@@ -570,17 +583,17 @@ export default {
       this.teamCollectionAdapter.expandCollection(collectionID)
     },
     removeCollection({ collectionsType, collectionIndex, collectionID }) {
-      if (collectionsType.type == "my-collections") {
+      if (collectionsType.type === "my-collections") {
         this.$store.commit("postwoman/removeCollection", {
-          collectionIndex: collectionIndex,
+          collectionIndex,
           flag: "rest",
         })
         this.$toast.error(this.$t("deleted"), {
           icon: "delete",
         })
         this.syncCollections()
-      } else if (collectionsType.type == "team-collections") {
-        if (collectionsType.selectedTeam.myRole != "VIEWER") {
+      } else if (collectionsType.type === "team-collections") {
+        if (collectionsType.selectedTeam.myRole !== "VIEWER") {
           this.$apollo
             .mutate({
               // Query
@@ -591,10 +604,10 @@ export default {
               `,
               // Parameters
               variables: {
-                collectionID: collectionID,
+                collectionID,
               },
             })
-            .then((data) => {
+            .then(() => {
               // Result
               this.$toast.success(this.$t("deleted"), {
                 icon: "delete",
@@ -611,21 +624,21 @@ export default {
       }
     },
     removeRequest({ collectionIndex, folderName, requestIndex }) {
-      if (this.collectionsType.type == "my-collections") {
+      if (this.collectionsType.type === "my-collections") {
         this.$store.commit("postwoman/removeRequest", {
-          collectionIndex: collectionIndex,
-          folderName: folderName,
-          requestIndex: requestIndex,
+          collectionIndex,
+          folderName,
+          requestIndex,
           flag: "rest",
         })
         this.$toast.error(this.$t("deleted"), {
           icon: "delete",
         })
         this.syncCollections()
-      } else if (this.collectionsType.type == "team-collections") {
-        team_utils
+      } else if (this.collectionsType.type === "team-collections") {
+        teamUtils
           .deleteRequest(this.$apollo, requestIndex)
-          .then((data) => {
+          .then(() => {
             // Result
             this.$toast.success(this.$t("deleted"), {
               icon: "delete",
@@ -641,8 +654,11 @@ export default {
       }
     },
   },
-  beforeDestroy() {
-    document.removeEventListener("keydown", this._keyListener)
-  },
 }
 </script>
+
+<style scoped lang="scss">
+.virtual-list {
+  max-height: calc(100vh - 270px);
+}
+</style>
diff --git a/components/collections/my/Collection.vue b/components/collections/my/Collection.vue
index 1d0d34a91..2f477be59 100644
--- a/components/collections/my/Collection.vue
+++ b/components/collections/my/Collection.vue
@@ -1,7 +1,10 @@
 <template>
   <div>
     <div
-      :class="['row-wrapper transition duration-150 ease-in-out', { 'bg-bgDarkColor': dragging }]"
+      :class="[
+        'row-wrapper transition duration-150 ease-in-out',
+        { 'bg-bgDarkColor': dragging },
+      ]"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -10,10 +13,16 @@
       @dragend="dragging = false"
     >
       <button class="icon" @click="toggleShowChildren">
-        <i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
-        <i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
+        <i v-show="!showChildren && !isFiltered" class="material-icons"
+          >arrow_right</i
+        >
+        <i v-show="showChildren || isFiltered" class="material-icons"
+          >arrow_drop_down</i
+        >
 
-        <i v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
+        <i v-if="isSelected" class="text-green-400 material-icons"
+          >check_circle</i
+        >
 
         <i v-else class="material-icons">folder</i>
         <span>{{ collection.name }}</span>
@@ -21,43 +30,56 @@
       <div>
         <button
           v-if="doc && !selected"
+          v-tooltip.left="$t('import')"
           class="icon"
           @click="$emit('select-collection')"
-          v-tooltip.left="$t('import')"
         >
           <i class="material-icons">check_box_outline_blank</i>
         </button>
         <button
           v-if="doc && selected"
+          v-tooltip.left="$t('delete')"
           class="icon"
           @click="$emit('unselect-collection')"
-          v-tooltip.left="$t('delete')"
         >
           <i class="material-icons">check_box</i>
         </button>
         <v-popover v-if="!saveRequest">
-          <button class="tooltip-target icon" v-tooltip.left="$t('more')">
+          <button v-tooltip.left="$t('more')" class="tooltip-target icon">
             <i class="material-icons">more_vert</i>
           </button>
           <template slot="popover">
             <div>
               <button
-                class="icon"
-                @click="$emit('add-folder', { folder: collection, path: `${collectionIndex}` })"
                 v-close-popover
+                class="icon"
+                @click="
+                  $emit('add-folder', {
+                    folder: collection,
+                    path: `${collectionIndex}`,
+                  })
+                "
               >
                 <i class="material-icons">create_new_folder</i>
                 <span>{{ $t("new_folder") }}</span>
               </button>
             </div>
             <div>
-              <button class="icon" @click="$emit('edit-collection')" v-close-popover>
+              <button
+                v-close-popover
+                class="icon"
+                @click="$emit('edit-collection')"
+              >
                 <i class="material-icons">create</i>
                 <span>{{ $t("edit") }}</span>
               </button>
             </div>
             <div>
-              <button class="icon" @click="confirmRemove = true" v-close-popover>
+              <button
+                v-close-popover
+                class="icon"
+                @click="confirmRemove = true"
+              >
                 <i class="material-icons">delete</i>
                 <span>{{ $t("delete") }}</span>
               </button>
@@ -79,9 +101,9 @@
             :folder-path="`${collectionIndex}/${index}`"
             :collection-index="collectionIndex"
             :doc="doc"
-            :saveRequest="saveRequest"
-            :collectionsType="collectionsType"
-            :isFiltered="isFiltered"
+            :save-request="saveRequest"
+            :collections-type="collectionsType"
+            :is-filtered="isFiltered"
             :picked="picked"
             @add-folder="$emit('add-folder', $event)"
             @edit-folder="$emit('edit-folder', $event)"
@@ -105,8 +127,8 @@
             :folder-path="collectionIndex.toString()"
             :request-index="index"
             :doc="doc"
-            :saveRequest="saveRequest"
-            :collectionsType="collectionsType"
+            :save-request="saveRequest"
+            :collections-type="collectionsType"
             :picked="picked"
             @edit-request="editRequest($event)"
             @select="$emit('select', $event)"
@@ -117,13 +139,16 @@
       <ul>
         <li
           v-if="
-            (collection.folders == undefined || collection.folders.length === 0) &&
-            (collection.requests == undefined || collection.requests.length === 0)
+            (collection.folders == undefined ||
+              collection.folders.length === 0) &&
+            (collection.requests == undefined ||
+              collection.requests.length === 0)
           "
           class="flex ml-8 border-l border-brdColor"
         >
           <p class="info">
-            <i class="material-icons">not_interested</i> {{ $t("collection_empty") }}
+            <i class="material-icons">not_interested</i>
+            {{ $t("collection_empty") }}
           </p>
         </li>
       </ul>
@@ -143,14 +168,14 @@ import { getSettingSubject } from "~/newstore/settings"
 
 export default {
   props: {
-    collectionIndex: Number,
-    collection: Object,
+    collectionIndex: { type: Number, default: null },
+    collection: { type: Object, default: () => {} },
     doc: Boolean,
     isFiltered: Boolean,
     selected: Boolean,
     saveRequest: Boolean,
-    collectionsType: Object,
-    picked: Object,
+    collectionsType: { type: Object, default: () => {} },
+    picked: { type: Object, default: () => {} },
   },
   data() {
     return {
diff --git a/components/collections/my/Folder.vue b/components/collections/my/Folder.vue
index dc48ca50b..fa92a86e3 100644
--- a/components/collections/my/Folder.vue
+++ b/components/collections/my/Folder.vue
@@ -1,7 +1,10 @@
 <template>
   <div>
     <div
-      :class="['row-wrapper transition duration-150 ease-in-out', { 'bg-bgDarkColor': dragging }]"
+      :class="[
+        'row-wrapper transition duration-150 ease-in-out',
+        { 'bg-bgDarkColor': dragging },
+      ]"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -11,23 +14,29 @@
     >
       <div>
         <button class="icon" @click="toggleShowChildren">
-          <i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
-          <i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
-          <i v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
+          <i v-show="!showChildren && !isFiltered" class="material-icons"
+            >arrow_right</i
+          >
+          <i v-show="showChildren || isFiltered" class="material-icons"
+            >arrow_drop_down</i
+          >
+          <i v-if="isSelected" class="text-green-400 material-icons"
+            >check_circle</i
+          >
           <i v-else class="material-icons">folder_open</i>
           <span>{{ folder.name ? folder.name : folder.title }}</span>
         </button>
       </div>
       <v-popover v-if="!saveRequest">
-        <button class="tooltip-target icon" v-tooltip.left="$t('more')">
+        <button v-tooltip.left="$t('more')" class="tooltip-target icon">
           <i class="material-icons">more_vert</i>
         </button>
         <template slot="popover">
           <div>
             <button
+              v-close-popover
               class="icon"
               @click="$emit('add-folder', { folder, path: folderPath })"
-              v-close-popover
             >
               <i class="material-icons">create_new_folder</i>
               <span>{{ $t("new_folder") }}</span>
@@ -35,16 +44,18 @@
           </div>
           <div>
             <button
-              class="icon"
-              @click="$emit('edit-folder', { folder, folderIndex, collectionIndex })"
               v-close-popover
+              class="icon"
+              @click="
+                $emit('edit-folder', { folder, folderIndex, collectionIndex })
+              "
             >
               <i class="material-icons">edit</i>
               <span>{{ $t("edit") }}</span>
             </button>
           </div>
           <div>
-            <button class="icon" @click="confirmRemove = true" v-close-popover>
+            <button v-close-popover class="icon" @click="confirmRemove = true">
               <i class="material-icons">delete</i>
               <span>{{ $t("delete") }}</span>
             </button>
@@ -64,8 +75,8 @@
             :folder-index="subFolderIndex"
             :collection-index="collectionIndex"
             :doc="doc"
-            :saveRequest="saveRequest"
-            :collectionsType="collectionsType"
+            :save-request="saveRequest"
+            :collections-type="collectionsType"
             :folder-path="`${folderPath}/${subFolderIndex}`"
             :picked="picked"
             @add-folder="$emit('add-folder', $event)"
@@ -92,8 +103,8 @@
             :folder-path="folderPath"
             :doc="doc"
             :picked="picked"
-            :saveRequest="saveRequest"
-            :collectionsType="collectionsType"
+            :save-request="saveRequest"
+            :collections-type="collectionsType"
             @edit-request="$emit('edit-request', $event)"
             @select="$emit('select', $event)"
             @remove-request="removeRequest"
@@ -109,7 +120,10 @@
         "
       >
         <li class="flex ml-8 border-l border-brdColor">
-          <p class="info"><i class="material-icons">not_interested</i> {{ $t("folder_empty") }}</p>
+          <p class="info">
+            <i class="material-icons">not_interested</i>
+            {{ $t("folder_empty") }}
+          </p>
         </li>
       </ul>
     </div>
@@ -127,17 +141,17 @@ import { fb } from "~/helpers/fb"
 import { getSettingSubject } from "~/newstore/settings"
 
 export default {
-  name: "folder",
+  name: "Folder",
   props: {
-    folder: Object,
-    folderIndex: Number,
-    collectionIndex: Number,
-    folderPath: String,
+    folder: { type: Object, default: () => {} },
+    folderIndex: { type: Number, default: null },
+    collectionIndex: { type: Number, default: null },
+    folderPath: { type: String, default: null },
     doc: Boolean,
     saveRequest: Boolean,
     isFiltered: Boolean,
-    collectionsType: Object,
-    picked: Object,
+    collectionsType: { type: Object, default: () => {} },
+    picked: { type: Object, default: () => {} },
   },
   data() {
     return {
diff --git a/components/collections/my/Request.vue b/components/collections/my/Request.vue
index ff7a435b8..1611e5d8c 100644
--- a/components/collections/my/Request.vue
+++ b/components/collections/my/Request.vue
@@ -1,7 +1,10 @@
 <template>
   <div>
     <div
-      :class="['row-wrapper transition duration-150 ease-in-out', { 'bg-bgDarkColor': dragging }]"
+      :class="[
+        'row-wrapper transition duration-150 ease-in-out',
+        { 'bg-bgDarkColor': dragging },
+      ]"
       draggable="true"
       @dragstart="dragStart"
       @dragover.stop
@@ -10,23 +13,28 @@
     >
       <div>
         <button
+          v-tooltip="!doc ? $t('use_request') : ''"
           class="icon"
           @click="!doc ? selectRequest() : {}"
-          v-tooltip="!doc ? $t('use_request') : ''"
         >
-          <i v-if="isSelected" class="mx-3 text-green-400 material-icons">check_circle</i>
+          <i v-if="isSelected" class="mx-3 text-green-400 material-icons"
+            >check_circle</i
+          >
 
-          <span v-else :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
+          <span v-else :class="getRequestLabelColor(request.method)">{{
+            request.method
+          }}</span>
           <span>{{ request.name }}</span>
         </button>
       </div>
       <v-popover v-if="!saveRequest">
-        <button class="tooltip-target icon" v-tooltip="$t('more')">
+        <button v-tooltip="$t('more')" class="tooltip-target icon">
           <i class="material-icons">more_vert</i>
         </button>
         <template slot="popover">
           <div>
             <button
+              v-close-popover
               class="icon"
               @click="
                 $emit('edit-request', {
@@ -37,14 +45,13 @@
                   requestIndex,
                 })
               "
-              v-close-popover
             >
               <i class="material-icons">edit</i>
               <span>{{ $t("edit") }}</span>
             </button>
           </div>
           <div>
-            <button class="icon" @click="confirmRemove = true" v-close-popover>
+            <button v-close-popover class="icon" @click="confirmRemove = true">
               <i class="material-icons">delete</i>
               <span>{{ $t("delete") }}</span>
             </button>
@@ -64,26 +71,17 @@
 <script>
 export default {
   props: {
-    request: Object,
-    collectionIndex: Number,
-    folderIndex: Number,
-    folderName: String,
+    request: { type: Object, default: () => {} },
+    collectionIndex: { type: Number, default: null },
+    folderIndex: { type: Number, default: null },
+    folderName: { type: String, default: null },
+    // eslint-disable-next-line vue/require-default-prop
     requestIndex: [Number, String],
     doc: Boolean,
     saveRequest: Boolean,
-    collectionsType: Object,
-    folderPath: String,
-    picked: Object,
-  },
-  computed: {
-    isSelected() {
-      return (
-        this.picked &&
-        this.picked.pickedType === "my-request" &&
-        this.picked.folderPath === this.folderPath &&
-        this.picked.requestIndex === this.requestIndex
-      )
-    },
+    collectionsType: { type: Object, default: () => {} },
+    folderPath: { type: String, default: null },
+    picked: { type: Object, default: () => {} },
   },
   data() {
     return {
@@ -98,6 +96,16 @@ export default {
       confirmRemove: false,
     }
   },
+  computed: {
+    isSelected() {
+      return (
+        this.picked &&
+        this.picked.pickedType === "my-request" &&
+        this.picked.folderPath === this.folderPath &&
+        this.picked.requestIndex === this.requestIndex
+      )
+    },
+  },
   methods: {
     selectRequest() {
       if (this.$props.saveRequest)
@@ -110,7 +118,8 @@ export default {
             requestIndex: this.requestIndex,
           },
         })
-      else this.$store.commit("postwoman/selectRequest", { request: this.request })
+      else
+        this.$store.commit("postwoman/selectRequest", { request: this.request })
     },
     dragStart({ dataTransfer }) {
       this.dragging = !this.dragging
@@ -127,7 +136,10 @@ export default {
       })
     },
     getRequestLabelColor(method) {
-      return this.requestMethodLabels[method.toLowerCase()] || this.requestMethodLabels.default
+      return (
+        this.requestMethodLabels[method.toLowerCase()] ||
+        this.requestMethodLabels.default
+      )
     },
   },
 }
diff --git a/components/collections/teams/Collection.vue b/components/collections/teams/Collection.vue
index ef8dc9f47..34cd56b8f 100644
--- a/components/collections/teams/Collection.vue
+++ b/components/collections/teams/Collection.vue
@@ -2,10 +2,16 @@
   <div>
     <div class="transition duration-150 ease-in-out row-wrapper">
       <button class="icon" @click="toggleShowChildren">
-        <i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
-        <i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
+        <i v-show="!showChildren && !isFiltered" class="material-icons"
+          >arrow_right</i
+        >
+        <i v-show="showChildren || isFiltered" class="material-icons"
+          >arrow_drop_down</i
+        >
 
-        <i v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
+        <i v-if="isSelected" class="text-green-400 material-icons"
+          >check_circle</i
+        >
 
         <i v-else class="material-icons">folder</i>
         <span>{{ collection.title }}</span>
@@ -13,25 +19,25 @@
       <div>
         <button
           v-if="doc && !selected"
+          v-tooltip.left="$t('import')"
           class="icon"
           @click="$emit('select-collection')"
-          v-tooltip.left="$t('import')"
         >
           <i class="material-icons">check_box_outline_blank</i>
         </button>
         <button
           v-if="doc && selected"
+          v-tooltip.left="$t('delete')"
           class="icon"
           @click="$emit('unselect-collection')"
-          v-tooltip.left="$t('delete')"
         >
           <i class="material-icons">check_box</i>
         </button>
         <v-popover v-if="!saveRequest">
           <button
             v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-            class="tooltip-target icon"
             v-tooltip.left="$t('more')"
+            class="tooltip-target icon"
           >
             <i class="material-icons">more_vert</i>
           </button>
@@ -39,9 +45,14 @@
             <div>
               <button
                 v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-                class="icon"
-                @click="$emit('add-folder', { folder: collection, path: `${collectionIndex}` })"
                 v-close-popover
+                class="icon"
+                @click="
+                  $emit('add-folder', {
+                    folder: collection,
+                    path: `${collectionIndex}`,
+                  })
+                "
               >
                 <i class="material-icons">create_new_folder</i>
                 <span>{{ $t("new_folder") }}</span>
@@ -50,9 +61,9 @@
             <div>
               <button
                 v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+                v-close-popover
                 class="icon"
                 @click="$emit('edit-collection')"
-                v-close-popover
               >
                 <i class="material-icons">create</i>
                 <span>{{ $t("edit") }}</span>
@@ -61,9 +72,9 @@
             <div>
               <button
                 v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+                v-close-popover
                 class="icon"
                 @click="confirmRemove = true"
-                v-close-popover
               >
                 <i class="material-icons">delete</i>
                 <span>{{ $t("delete") }}</span>
@@ -86,9 +97,9 @@
             :folder-path="`${collectionIndex}/${index}`"
             :collection-index="collectionIndex"
             :doc="doc"
-            :saveRequest="saveRequest"
-            :collectionsType="collectionsType"
-            :isFiltered="isFiltered"
+            :save-request="saveRequest"
+            :collections-type="collectionsType"
+            :is-filtered="isFiltered"
             :picked="picked"
             @add-folder="$emit('add-folder', $event)"
             @edit-folder="$emit('edit-folder', $event)"
@@ -112,8 +123,8 @@
             :folder-name="collection.name"
             :request-index="request.id"
             :doc="doc"
-            :saveRequest="saveRequest"
-            :collectionsType="collectionsType"
+            :save-request="saveRequest"
+            :collections-type="collectionsType"
             :picked="picked"
             @edit-request="editRequest($event)"
             @select="$emit('select', $event)"
@@ -124,13 +135,16 @@
       <ul>
         <li
           v-if="
-            (collection.children == undefined || collection.children.length === 0) &&
-            (collection.requests == undefined || collection.requests.length === 0)
+            (collection.children == undefined ||
+              collection.children.length === 0) &&
+            (collection.requests == undefined ||
+              collection.requests.length === 0)
           "
           class="flex ml-8 border-l border-brdColor"
         >
           <p class="info">
-            <i class="material-icons">not_interested</i> {{ $t("collection_empty") }}
+            <i class="material-icons">not_interested</i>
+            {{ $t("collection_empty") }}
           </p>
         </li>
       </ul>
@@ -147,14 +161,14 @@
 <script>
 export default {
   props: {
-    collectionIndex: Number,
-    collection: Object,
+    collectionIndex: { type: Number, default: null },
+    collection: { type: Object, default: () => {} },
     doc: Boolean,
     isFiltered: Boolean,
     selected: Boolean,
     saveRequest: Boolean,
-    collectionsType: Object,
-    picked: Object,
+    collectionsType: { type: Object, default: () => {} },
+    picked: { type: Object, default: () => {} },
   },
   data() {
     return {
diff --git a/components/collections/teams/Folder.vue b/components/collections/teams/Folder.vue
index 855088b17..3a85f821f 100644
--- a/components/collections/teams/Folder.vue
+++ b/components/collections/teams/Folder.vue
@@ -3,10 +3,16 @@
     <div class="transition duration-150 ease-in-out row-wrapper">
       <div>
         <button class="icon" @click="toggleShowChildren">
-          <i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
-          <i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
+          <i v-show="!showChildren && !isFiltered" class="material-icons"
+            >arrow_right</i
+          >
+          <i v-show="showChildren || isFiltered" class="material-icons"
+            >arrow_drop_down</i
+          >
 
-          <i v-if="isSelected" class="text-green-400 material-icons">check_circle</i>
+          <i v-if="isSelected" class="text-green-400 material-icons"
+            >check_circle</i
+          >
 
           <i v-else class="material-icons">folder_open</i>
           <span>{{ folder.name ? folder.name : folder.title }}</span>
@@ -15,8 +21,8 @@
       <v-popover v-if="!saveRequest">
         <button
           v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-          class="tooltip-target icon"
           v-tooltip.left="$t('more')"
+          class="tooltip-target icon"
         >
           <i class="material-icons">more_vert</i>
         </button>
@@ -24,9 +30,9 @@
           <div>
             <button
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+              v-close-popover
               class="icon"
               @click="$emit('add-folder', { folder, path: folderPath })"
-              v-close-popover
             >
               <i class="material-icons">create_new_folder</i>
               <span>{{ $t("new_folder") }}</span>
@@ -35,9 +41,11 @@
           <div>
             <button
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-              class="icon"
-              @click="$emit('edit-folder', { folder, folderIndex, collectionIndex })"
               v-close-popover
+              class="icon"
+              @click="
+                $emit('edit-folder', { folder, folderIndex, collectionIndex })
+              "
             >
               <i class="material-icons">edit</i>
               <span>{{ $t("edit") }}</span>
@@ -46,9 +54,9 @@
           <div>
             <button
               v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
+              v-close-popover
               class="icon"
               @click="confirmRemove = true"
-              v-close-popover
             >
               <i class="material-icons">delete</i>
               <span>{{ $t("delete") }}</span>
@@ -69,8 +77,8 @@
             :folder-index="subFolderIndex"
             :collection-index="collectionIndex"
             :doc="doc"
-            :saveRequest="saveRequest"
-            :collectionsType="collectionsType"
+            :save-request="saveRequest"
+            :collections-type="collectionsType"
             :folder-path="`${folderPath}/${subFolderIndex}`"
             :picked="picked"
             @add-folder="$emit('add-folder', $event)"
@@ -96,8 +104,8 @@
             :folder-name="folder.name"
             :request-index="request.id"
             :doc="doc"
-            :saveRequest="saveRequest"
-            :collectionsType="collectionsType"
+            :save-request="saveRequest"
+            :collections-type="collectionsType"
             :picked="picked"
             @edit-request="$emit('edit-request', $event)"
             @select="$emit('select', $event)"
@@ -112,7 +120,10 @@
         "
       >
         <li class="flex ml-8 border-l border-brdColor">
-          <p class="info"><i class="material-icons">not_interested</i> {{ $t("folder_empty") }}</p>
+          <p class="info">
+            <i class="material-icons">not_interested</i>
+            {{ $t("folder_empty") }}
+          </p>
         </li>
       </ul>
     </div>
@@ -126,20 +137,20 @@
 </template>
 
 <script>
-import * as team_utils from "~/helpers/teams/utils"
+import * as teamUtils from "~/helpers/teams/utils"
 
 export default {
-  name: "folder",
+  name: "Folder",
   props: {
-    folder: Object,
-    folderIndex: Number,
-    collectionIndex: Number,
-    folderPath: String,
+    folder: { type: Object, default: () => {} },
+    folderIndex: { type: Number, default: null },
+    collectionIndex: { type: Number, default: null },
+    folderPath: { type: String, default: null },
     doc: Boolean,
     saveRequest: Boolean,
     isFiltered: Boolean,
-    collectionsType: Object,
-    picked: Object,
+    collectionsType: { type: Object, default: () => {} },
+    picked: { type: Object, default: () => {} },
   },
   data() {
     return {
@@ -172,10 +183,10 @@ export default {
       this.showChildren = !this.showChildren
     },
     removeFolder() {
-      if (this.collectionsType.selectedTeam.myRole != "VIEWER") {
-        team_utils
+      if (this.collectionsType.selectedTeam.myRole !== "VIEWER") {
+        teamUtils
           .deleteCollection(this.$apollo, this.folder.id)
-          .then((data) => {
+          .then(() => {
             // Result
             this.$toast.success(this.$t("deleted"), {
               icon: "delete",
diff --git a/components/collections/teams/Request.vue b/components/collections/teams/Request.vue
index f48df2e47..a05449635 100644
--- a/components/collections/teams/Request.vue
+++ b/components/collections/teams/Request.vue
@@ -3,27 +3,32 @@
     <div class="transition duration-150 ease-in-out row-wrapper">
       <div>
         <button
+          v-tooltip="!doc ? $t('use_request') : ''"
           class="icon"
           @click="!doc ? selectRequest() : {}"
-          v-tooltip="!doc ? $t('use_request') : ''"
         >
-          <i v-if="isSelected" class="mx-3 text-green-400 material-icons">check_circle</i>
+          <i v-if="isSelected" class="mx-3 text-green-400 material-icons"
+            >check_circle</i
+          >
 
-          <span v-else :class="getRequestLabelColor(request.method)">{{ request.method }}</span>
+          <span v-else :class="getRequestLabelColor(request.method)">{{
+            request.method
+          }}</span>
           <span>{{ request.name }}</span>
         </button>
       </div>
       <v-popover v-if="!saveRequest">
         <button
           v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
-          class="tooltip-target icon"
           v-tooltip="$t('more')"
+          class="tooltip-target icon"
         >
           <i class="material-icons">more_vert</i>
         </button>
         <template slot="popover">
           <div>
             <button
+              v-close-popover
               class="icon"
               @click="
                 $emit('edit-request', {
@@ -34,14 +39,13 @@
                   requestIndex,
                 })
               "
-              v-close-popover
             >
               <i class="material-icons">edit</i>
               <span>{{ $t("edit") }}</span>
             </button>
           </div>
           <div>
-            <button class="icon" @click="confirmRemove = true" v-close-popover>
+            <button v-close-popover class="icon" @click="confirmRemove = true">
               <i class="material-icons">delete</i>
               <span>{{ $t("delete") }}</span>
             </button>
@@ -61,15 +65,16 @@
 <script>
 export default {
   props: {
-    request: Object,
-    collectionIndex: Number,
-    folderIndex: Number,
-    folderName: String,
+    request: { type: Object, default: () => {} },
+    collectionIndex: { type: Number, default: null },
+    folderIndex: { type: Number, default: null },
+    folderName: { type: String, default: null },
+    // eslint-disable-next-line vue/require-default-prop
     requestIndex: [Number, String],
     doc: Boolean,
     saveRequest: Boolean,
-    collectionsType: Object,
-    picked: Object,
+    collectionsType: { type: Object, default: () => {} },
+    picked: { type: Object, default: () => {} },
   },
   data() {
     return {
@@ -102,7 +107,8 @@ export default {
             requestID: this.requestIndex,
           },
         })
-      else this.$store.commit("postwoman/selectRequest", { request: this.request })
+      else
+        this.$store.commit("postwoman/selectRequest", { request: this.request })
     },
     removeRequest() {
       this.$emit("remove-request", {
@@ -112,7 +118,10 @@ export default {
       })
     },
     getRequestLabelColor(method) {
-      return this.requestMethodLabels[method.toLowerCase()] || this.requestMethodLabels.default
+      return (
+        this.requestMethodLabels[method.toLowerCase()] ||
+        this.requestMethodLabels.default
+      )
     },
   },
 }
diff --git a/components/graphql/Field.vue b/components/graphql/Field.vue
index 088365329..9b1d05784 100644
--- a/components/graphql/Field.vue
+++ b/components/graphql/Field.vue
@@ -6,17 +6,24 @@
         (
         <span v-for="(field, index) in fieldArgs" :key="index">
           {{ field.name }}:
-          <GraphqlTypeLink :gqlType="field.type" :jumpTypeCallback="jumpTypeCallback" />
+          <GraphqlTypeLink
+            :gql-type="field.type"
+            :jump-type-callback="jumpTypeCallback"
+          />
           <span v-if="index !== fieldArgs.length - 1"> , </span>
         </span>
         ) </span
       >:
-      <GraphqlTypeLink :gqlType="gqlField.type" :jumpTypeCallback="jumpTypeCallback" />
+      <GraphqlTypeLink
+        :gql-type="gqlField.type"
+        :jump-type-callback="jumpTypeCallback"
+      />
     </div>
-    <div class="mt-2 text-fgLightColor field-desc" v-if="gqlField.description">
+    <div v-if="gqlField.description" class="mt-2 text-fgLightColor field-desc">
       {{ gqlField.description }}
     </div>
     <div
+      v-if="gqlField.isDeprecated"
       class="
         inline-block
         px-4
@@ -29,7 +36,6 @@
         rounded-lg
         field-deprecated
       "
-      v-if="gqlField.isDeprecated"
     >
       {{ $t("deprecated") }}
     </div>
@@ -38,8 +44,14 @@
       <div class="px-4 border-l-2 border-acColor">
         <div v-for="(field, index) in fieldArgs" :key="index">
           {{ field.name }}:
-          <GraphqlTypeLink :gqlType="field.type" :jumpTypeCallback="jumpTypeCallback" />
-          <div class="mt-2 text-fgLightColor field-desc" v-if="field.description">
+          <GraphqlTypeLink
+            :gql-type="field.type"
+            :jump-type-callback="jumpTypeCallback"
+          />
+          <div
+            v-if="field.description"
+            class="mt-2 text-fgLightColor field-desc"
+          >
             {{ field.description }}
           </div>
         </div>
@@ -48,18 +60,11 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-.field-highlighted {
-  @apply border-b-2;
-  @apply border-acColor;
-}
-</style>
-
 <script>
 export default {
   props: {
-    gqlField: Object,
-    jumpTypeCallback: Function,
+    gqlField: { type: Object, default: () => {} },
+    jumpTypeCallback: { type: Function, default: () => {} },
     isHighlighted: { type: Boolean, default: false },
   },
   computed: {
@@ -73,3 +78,10 @@ export default {
   },
 }
 </script>
+
+<style scoped lang="scss">
+.field-highlighted {
+  @apply border-b-2;
+  @apply border-acColor;
+}
+</style>
diff --git a/components/graphql/QueryEditor.vue b/components/graphql/QueryEditor.vue
index 81f7ee918..49707d31f 100644
--- a/components/graphql/QueryEditor.vue
+++ b/components/graphql/QueryEditor.vue
@@ -4,27 +4,15 @@
   </div>
 </template>
 
-<style scoped lang="scss">
-.show-if-initialized {
-  &.initialized {
-    @apply opacity-100;
-  }
-
-  & > * {
-    @apply transition-none;
-  }
-}
-</style>
-
 <script>
 import ace from "ace-builds"
 import "ace-builds/webpack-resolver"
 import "ace-builds/src-noconflict/ext-language_tools"
 import "ace-builds/src-noconflict/mode-graphqlschema"
-import { defineGQLLanguageMode } from "~/helpers/syntax/gqlQueryLangMode"
 
 import * as gql from "graphql"
 import { getAutocompleteSuggestions } from "graphql-language-service-interface"
+import { defineGQLLanguageMode } from "~/helpers/syntax/gqlQueryLangMode"
 import debounce from "~/helpers/utils/debounce"
 
 export default {
@@ -44,7 +32,7 @@ export default {
     },
     options: {
       type: Object,
-      default: {},
+      default: () => {},
     },
     styles: {
       type: String,
@@ -84,7 +72,7 @@ export default {
   mounted() {
     defineGQLLanguageMode(ace)
 
-    let langTools = ace.require("ace/ext/language_tools")
+    const langTools = ace.require("ace/ext/language_tools")
 
     const editor = ace.edit(this.$refs.editor, {
       mode: `ace/mode/gql-query`,
@@ -108,12 +96,22 @@ export default {
     })
 
     const completer = {
-      getCompletions: (editor, _session, { row, column }, _prefix, callback) => {
+      getCompletions: (
+        editor,
+        _session,
+        { row, column },
+        _prefix,
+        callback
+      ) => {
         if (this.validationSchema) {
-          const completions = getAutocompleteSuggestions(this.validationSchema, editor.getValue(), {
-            line: row,
-            character: column,
-          })
+          const completions = getAutocompleteSuggestions(
+            this.validationSchema,
+            editor.getValue(),
+            {
+              line: row,
+              character: column,
+            }
+          )
 
           callback(
             null,
@@ -165,10 +163,14 @@ export default {
     this.parseContents(this.value)
   },
 
+  beforeDestroy() {
+    this.editor.destroy()
+  },
+
   methods: {
     prettifyQuery() {
       try {
-        this.value = gql.print(gql.parse(this.editor.getValue()))
+        this.$emit("update-query", gql.print(gql.parse(this.editor.getValue())))
       } catch (e) {
         this.$toast.error(`${this.$t("gql_prettify_invalid_query")}`, {
           icon: "error",
@@ -180,9 +182,12 @@ export default {
       if (this.theme) {
         return this.theme
       }
-      const strip = (str) => str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
+      const strip = (str) =>
+        str.replace(/#/g, "").replace(/ /g, "").replace(/"/g, "")
       return strip(
-        window.getComputedStyle(document.documentElement).getPropertyValue("--editor-theme")
+        window
+          .getComputedStyle(document.documentElement)
+          .getPropertyValue("--editor-theme")
       )
     },
 
@@ -198,12 +203,14 @@ export default {
 
           if (this.validationSchema) {
             this.editor.session.setAnnotations(
-              gql.validate(this.validationSchema, doc).map(({ locations, message }) => ({
-                row: locations[0].line - 1,
-                column: locations[0].column - 1,
-                text: message,
-                type: "error",
-              }))
+              gql
+                .validate(this.validationSchema, doc)
+                .map(({ locations, message }) => ({
+                  row: locations[0].line - 1,
+                  column: locations[0].column - 1,
+                  text: message,
+                  type: "error",
+                }))
             )
           }
         } catch (e) {
@@ -221,9 +228,17 @@ export default {
       }
     }, 2000),
   },
-
-  beforeDestroy() {
-    this.editor.destroy()
-  },
 }
 </script>
+
+<style scoped lang="scss">
+.show-if-initialized {
+  &.initialized {
+    @apply opacity-100;
+  }
+
+  & > * {
+    @apply transition-none;
+  }
+}
+</style>
diff --git a/components/graphql/Type.vue b/components/graphql/Type.vue
index 1de21faba..c2b999faa 100644
--- a/components/graphql/Type.vue
+++ b/components/graphql/Type.vue
@@ -1,65 +1,79 @@
 <template>
   <div :id="`type_${gqlType.name}`" class="p-2 m-2">
-    <div class="font-bold type-title" :class="{ 'type-highlighted': isHighlighted }">
+    <div
+      class="font-bold type-title"
+      :class="{ 'type-highlighted': isHighlighted }"
+    >
       <span v-if="isInput" class="font-normal text-acColor">input </span>
-      <span v-else-if="isInterface" class="font-normal text-acColor">interface </span>
+      <span v-else-if="isInterface" class="font-normal text-acColor"
+        >interface
+      </span>
       <span v-else-if="isEnum" class="font-normal text-acColor">enum </span>
       {{ gqlType.name }}
     </div>
-    <div class="mt-2 text-fgLightColor type-desc" v-if="gqlType.description">
+    <div v-if="gqlType.description" class="mt-2 text-fgLightColor type-desc">
       {{ gqlType.description }}
     </div>
     <div v-if="interfaces.length > 0" class="mb-2">
       <h5>{{ $t("interfaces") }}</h5>
-      <div v-for="gqlInterface in interfaces" :key="gqlInterface.name" class="m-2 ml-4">
-        <GraphqlTypeLink :gqlType="gqlInterface" :jumpTypeCallback="jumpTypeCallback" />
+      <div
+        v-for="gqlInterface in interfaces"
+        :key="gqlInterface.name"
+        class="m-2 ml-4"
+      >
+        <GraphqlTypeLink
+          :gql-type="gqlInterface"
+          :jump-type-callback="jumpTypeCallback"
+        />
       </div>
     </div>
     <div v-if="children.length > 0" class="mb-2">
       <h5>{{ $t("children") }}</h5>
       <div v-for="child in children" :key="child.name" class="m-2 ml-4">
-        <GraphqlTypeLink :gqlType="child" :jumpTypeCallback="jumpTypeCallback" />
+        <GraphqlTypeLink
+          :gql-type="child"
+          :jump-type-callback="jumpTypeCallback"
+        />
       </div>
     </div>
     <div v-if="gqlType.getFields">
       <h5>{{ $t("fields") }}</h5>
       <div v-for="field in gqlType.getFields()" :key="field.name">
         <GraphqlField
-          :gqlField="field"
-          :isHighlighted="isFieldHighlighted({ field })"
-          :jumpTypeCallback="jumpTypeCallback"
+          :gql-field="field"
+          :is-highlighted="isFieldHighlighted({ field })"
+          :jump-type-callback="jumpTypeCallback"
         />
       </div>
     </div>
     <div v-if="isEnum">
       <h5>{{ $t("values") }}</h5>
-      <div :key="value.name" v-for="value in gqlType.getValues()" class="m-4" v-text="value.name" />
+      <div
+        v-for="value in gqlType.getValues()"
+        :key="value.name"
+        class="m-4"
+        v-text="value.name"
+      ></div>
     </div>
   </div>
 </template>
 
-<style scoped lang="scss">
-.type-highlighted {
-  @apply text-acColor;
-}
-</style>
-
 <script>
-import { GraphQLEnumType, GraphQLInputObjectType, GraphQLInterfaceType } from "graphql"
+import {
+  GraphQLEnumType,
+  GraphQLInputObjectType,
+  GraphQLInterfaceType,
+} from "graphql"
 
 export default {
   props: {
+    // eslint-disable-next-line vue/require-default-prop, vue/require-prop-types
     gqlType: {},
-    gqlTypes: Array,
-    jumpTypeCallback: Function,
+    gqlTypes: { type: Array, default: () => [] },
+    jumpTypeCallback: { type: Function, default: () => {} },
     isHighlighted: { type: Boolean, default: false },
     highlightedFields: { type: Array, default: () => [] },
   },
-  methods: {
-    isFieldHighlighted({ field }) {
-      return !!this.highlightedFields.find(({ name }) => name === field.name)
-    },
-  },
   computed: {
     isInput() {
       return this.gqlType instanceof GraphQLInputObjectType
@@ -75,9 +89,21 @@ export default {
     },
     children() {
       return this.gqlTypes.filter(
-        (type) => type.getInterfaces && type.getInterfaces().includes(this.gqlType)
+        (type) =>
+          type.getInterfaces && type.getInterfaces().includes(this.gqlType)
       )
     },
   },
+  methods: {
+    isFieldHighlighted({ field }) {
+      return !!this.highlightedFields.find(({ name }) => name === field.name)
+    },
+  },
 }
 </script>
+
+<style scoped lang="scss">
+.type-highlighted {
+  @apply text-acColor;
+}
+</style>
diff --git a/components/history/index.vue b/components/history/index.vue
index e6afced8d..8ded07653 100644
--- a/components/history/index.vue
+++ b/components/history/index.vue
@@ -1,11 +1,11 @@
 <template>
-  <AppSection icon="history" :label="$t('history')" ref="history" no-legend>
+  <AppSection ref="history" icon="history" :label="$t('history')" no-legend>
     <div class="show-on-large-screen">
       <input
+        v-model="filterText"
         aria-label="Search"
         type="search"
         :placeholder="$t('search')"
-        v-model="filterText"
         class="rounded-t-lg"
       />
     </div>
@@ -16,9 +16,9 @@
       <ul v-for="(entry, index) in filteredHistory" :key="`entry-${index}`">
         <HistoryRestCard
           v-if="page == 'rest'"
-          :entry="entry"
           :id="index"
-          :showMore="showMore"
+          :entry="entry"
+          :show-more="showMore"
           @toggle-star="toggleStar(entry)"
           @delete-entry="deleteHistory(entry)"
           @use-entry="useHistory(entry)"
@@ -26,21 +26,24 @@
         <HistoryGraphqlCard
           v-if="page == 'graphql'"
           :entry="entry"
-          :showMore="showMore"
+          :show-more="showMore"
           @toggle-star="toggleStar(entry)"
           @delete-entry="deleteHistory(entry)"
           @use-entry="useHistory(entry)"
         />
       </ul>
     </div>
-    <p :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }" class="info">
+    <p
+      :class="{ hidden: filteredHistory.length != 0 || history.length === 0 }"
+      class="info"
+    >
       {{ $t("nothing_found") }} "{{ filterText }}"
     </p>
     <p v-if="history.length === 0" class="info">
       <i class="material-icons">schedule</i> {{ $t("history_empty") }}
     </p>
     <div v-if="history.length !== 0" class="rounded-b-lg bg-bgDarkColor">
-      <div class="row-wrapper" v-if="!isClearingHistory">
+      <div v-if="!isClearingHistory" class="row-wrapper">
         <button
           data-testid="clear_history"
           class="icon"
@@ -60,22 +63,24 @@
           </i>
         </button>
       </div>
-      <div class="row-wrapper" v-else>
-        <p class="info"><i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}</p>
+      <div v-else class="row-wrapper">
+        <p class="info">
+          <i class="material-icons">help_outline</i> {{ $t("are_you_sure") }}
+        </p>
         <div>
           <button
+            v-tooltip="$t('yes')"
             data-testid="confirm_clear_history"
             class="icon"
             @click="clearHistory"
-            v-tooltip="$t('yes')"
           >
             <i class="material-icons">done</i>
           </button>
           <button
+            v-tooltip="$t('no')"
             data-testid="reject_clear_history"
             class="icon"
             @click="disableHistoryClearing"
-            v-tooltip="$t('no')"
           >
             <i class="material-icons">close</i>
           </button>
@@ -85,6 +90,134 @@
   </AppSection>
 </template>
 
+<script>
+import { fb } from "~/helpers/fb"
+
+const updateOnLocalStorage = (propertyName, property) =>
+  window.localStorage.setItem(propertyName, JSON.stringify(property))
+
+export default {
+  props: {
+    page: { type: String, default: null },
+  },
+  data() {
+    return {
+      history:
+        fb.currentUser !== null
+          ? this.page === "rest"
+            ? fb.currentHistory
+            : fb.currentGraphqlHistory
+          : JSON.parse(
+              window.localStorage.getItem(
+                this.page === "rest" ? "history" : "graphqlHistory"
+              )
+            ) || [],
+      filterText: "",
+      showFilter: false,
+      isClearingHistory: false,
+      showMore: false,
+    }
+  },
+  computed: {
+    filteredHistory() {
+      const filteringHistory =
+        fb.currentUser !== null
+          ? this.page === "rest"
+            ? fb.currentHistory
+            : fb.currentGraphqlHistory
+          : JSON.parse(
+              window.localStorage.getItem(
+                this.page === "rest" ? "history" : "graphqlHistory"
+              )
+            ) || []
+      return filteringHistory.filter((entry) => {
+        const filterText = this.filterText.toLowerCase()
+        return Object.keys(entry).some((key) => {
+          let value = entry[key]
+          value = typeof value !== "string" ? value.toString() : value
+          return value.toLowerCase().includes(filterText)
+        })
+      })
+    },
+  },
+  methods: {
+    async clearHistory() {
+      if (fb.currentUser !== null) {
+        this.page === "rest"
+          ? await fb.clearHistory()
+          : await fb.clearGraphqlHistory()
+      }
+      this.history = []
+      this.filterText = ""
+      this.disableHistoryClearing()
+      updateOnLocalStorage(
+        this.page === "rest" ? "history" : "graphqlHistory",
+        this.history
+      )
+      this.$toast.error(this.$t("history_deleted"), {
+        icon: "delete",
+      })
+    },
+    useHistory(entry) {
+      this.$emit("useHistory", entry)
+    },
+    async deleteHistory(entry) {
+      if (this.history.length === 0) {
+        this.filterText = ""
+      }
+      if (fb.currentUser !== null) {
+        await (this.page === "rest"
+          ? fb.deleteHistory(entry)
+          : fb.deleteGraphqlHistory(entry))
+        this.history = fb.currentHistory
+        updateOnLocalStorage(
+          this.page === "rest" ? "history" : "graphqlHistory",
+          this.history
+        )
+      } else {
+        this.history.splice(this.history.indexOf(entry), 1)
+        updateOnLocalStorage(
+          this.page === "rest" ? "history" : "graphqlHistory",
+          this.history
+        )
+      }
+      this.$toast.error(this.$t("deleted"), {
+        icon: "delete",
+      })
+    },
+    addEntry(entry) {
+      this.history.push(entry)
+      updateOnLocalStorage(
+        this.page === "rest" ? "history" : "graphqlHistory",
+        this.history
+      )
+    },
+    enableHistoryClearing() {
+      if (!this.history || !this.history.length) return
+      this.isClearingHistory = true
+    },
+    disableHistoryClearing() {
+      this.isClearingHistory = false
+    },
+    toggleCollapse() {
+      this.showMore = !this.showMore
+    },
+    async toggleStar(entry) {
+      if (fb.currentUser !== null) {
+        this.page === "rest"
+          ? await fb.toggleStar(entry, !entry.star)
+          : await fb.toggleGraphqlHistoryStar(entry, !entry.star)
+      }
+      entry.star = !entry.star
+      updateOnLocalStorage(
+        this.page === "rest" ? "history" : "graphqlHistory",
+        this.history
+      )
+    },
+  },
+}
+</script>
+
 <style scoped lang="scss">
 .virtual-list {
   max-height: calc(100vh - 270px);
@@ -105,106 +238,3 @@ ol {
   }
 }
 </style>
-
-<script>
-import { fb } from "~/helpers/fb"
-
-const updateOnLocalStorage = (propertyName, property) =>
-  window.localStorage.setItem(propertyName, JSON.stringify(property))
-
-export default {
-  props: {
-    page: String,
-  },
-  data() {
-    return {
-      history:
-        fb.currentUser !== null
-          ? fb.currentHistory
-          : JSON.parse(
-              window.localStorage.getItem(this.page == "rest" ? "history" : "graphqlHistory")
-            ) || [],
-      filterText: "",
-      showFilter: false,
-      isClearingHistory: false,
-      showMore: false,
-    }
-  },
-  computed: {
-    filteredHistory() {
-      this.history =
-        fb.currentUser !== null
-          ? this.page == "rest"
-            ? fb.currentHistory
-            : fb.currentGraphqlHistory
-          : JSON.parse(
-              window.localStorage.getItem(this.page == "rest" ? "history" : "graphqlHistory")
-            ) || []
-      return this.history.filter((entry) => {
-        const filterText = this.filterText.toLowerCase()
-        return Object.keys(entry).some((key) => {
-          let value = entry[key]
-          value = typeof value !== "string" ? value.toString() : value
-          return value.toLowerCase().includes(filterText)
-        })
-      })
-    },
-  },
-  methods: {
-    async clearHistory() {
-      if (fb.currentUser !== null) {
-        this.page == "rest" ? await fb.clearHistory() : await fb.clearGraphqlHistory()
-      }
-      this.history = []
-      this.filterText = ""
-      this.disableHistoryClearing()
-      updateOnLocalStorage(this.page == "rest" ? "history" : "graphqlHistory", this.history)
-      this.$toast.error(this.$t("history_deleted"), {
-        icon: "delete",
-      })
-    },
-    useHistory(entry) {
-      this.$emit("useHistory", entry)
-    },
-    async deleteHistory(entry) {
-      if (this.history.length === 0) {
-        this.filterText = ""
-      }
-      if (fb.currentUser !== null) {
-        await (this.page == "rest" ? fb.deleteHistory(entry) : fb.deleteGraphqlHistory(entry))
-        this.history = fb.currentHistory
-        updateOnLocalStorage(this.page == "rest" ? "history" : "graphqlHistory", this.history)
-      } else {
-        this.history.splice(this.history.indexOf(entry), 1)
-        updateOnLocalStorage(this.page == "rest" ? "history" : "graphqlHistory", this.history)
-      }
-      this.$toast.error(this.$t("deleted"), {
-        icon: "delete",
-      })
-    },
-    addEntry(entry) {
-      this.history.push(entry)
-      updateOnLocalStorage(this.page == "rest" ? "history" : "graphqlHistory", this.history)
-    },
-    enableHistoryClearing() {
-      if (!this.history || !this.history.length) return
-      this.isClearingHistory = true
-    },
-    disableHistoryClearing() {
-      this.isClearingHistory = false
-    },
-    toggleCollapse() {
-      this.showMore = !this.showMore
-    },
-    async toggleStar(entry) {
-      if (fb.currentUser !== null) {
-        this.page == "rest"
-          ? await fb.toggleStar(entry, !entry.star)
-          : await fb.toggleGraphqlHistoryStar(entry, !entry.star)
-      }
-      entry.star = !entry.star
-      updateOnLocalStorage(this.page == "rest" ? "history" : "graphqlHistory", this.history)
-    },
-  },
-}
-</script>
diff --git a/helpers/postwomanTesting.js b/helpers/postwomanTesting.js
index 3bf8fcf49..1e9c75a1f 100644
--- a/helpers/postwomanTesting.js
+++ b/helpers/postwomanTesting.js
@@ -12,7 +12,7 @@ const styles = {
 // TODO: probably have to use a more global state for `test`
 
 export default function runTestScriptWithVariables(script, variables) {
-  let pw = {
+  const pw = {
     _errors: [],
     _testReports: [],
     _report: "",
@@ -29,6 +29,7 @@ export default function runTestScriptWithVariables(script, variables) {
   Object.assign(pw, variables)
 
   // run pre-request script within this function so that it has access to the pw object.
+  // eslint-disable-next-line no-new-func
   new Function("pw", script)(pw)
   //
   const testReports = pw._testReports.map((item) => {
@@ -80,6 +81,7 @@ class Expectation {
       }
     }
   }
+
   _fmtNot(message) {
     // given a string with "(not)" in it, replaces with "not" or "", depending if the expectation is expecting the positive or inverse (this._not)
     if (this.not === true) {
@@ -88,62 +90,102 @@ class Expectation {
       return message.replace("(not)", "")
     }
   }
+
   _fail(message) {
     return this._testReports.push({ result: FAIL, message })
   }
+
   _pass() {
     return this._testReports.push({ result: PASS })
   }
+
   // TEST METHODS DEFINED BELOW
   // these are the usual methods that would follow expect(...)
   toBe(value) {
     return this._satisfies(value)
-      ? this._pass()
-      : this._fail(this._fmtNot(`Expected ${this.expectValue} (not)to be ${value}`))
-  }
-  toHaveProperty(value) {
-    return this._satisfies(Object.prototype.hasOwnProperty.call(this.expectValue, value), true)
       ? this._pass()
       : this._fail(
-          this._fmtNot(`Expected object ${this.expectValue} to (not)have property ${value}`)
+          this._fmtNot(`Expected ${this.expectValue} (not)to be ${value}`)
         )
   }
+
+  toHaveProperty(value) {
+    return this._satisfies(
+      Object.prototype.hasOwnProperty.call(this.expectValue, value),
+      true
+    )
+      ? this._pass()
+      : this._fail(
+          this._fmtNot(
+            `Expected object ${this.expectValue} to (not)have property ${value}`
+          )
+        )
+  }
+
   toBeLevel2xx() {
     const code = parseInt(this.expectValue, 10)
     if (Number.isNaN(code)) {
-      return this._fail(`Expected 200-level status but could not parse value ${this.expectValue}`)
+      return this._fail(
+        `Expected 200-level status but could not parse value ${this.expectValue}`
+      )
     }
     return this._satisfies(code >= 200 && code < 300, true)
       ? this._pass()
-      : this._fail(this._fmtNot(`Expected ${this.expectValue} to (not)be 200-level status`))
+      : this._fail(
+          this._fmtNot(
+            `Expected ${this.expectValue} to (not)be 200-level status`
+          )
+        )
   }
+
   toBeLevel3xx() {
     const code = parseInt(this.expectValue, 10)
     if (Number.isNaN(code)) {
-      return this._fail(`Expected 300-level status but could not parse value ${this.expectValue}`)
+      return this._fail(
+        `Expected 300-level status but could not parse value ${this.expectValue}`
+      )
     }
     return this._satisfies(code >= 300 && code < 400, true)
       ? this._pass()
-      : this._fail(this._fmtNot(`Expected ${this.expectValue} to (not)be 300-level status`))
+      : this._fail(
+          this._fmtNot(
+            `Expected ${this.expectValue} to (not)be 300-level status`
+          )
+        )
   }
+
   toBeLevel4xx() {
     const code = parseInt(this.expectValue, 10)
     if (Number.isNaN(code)) {
-      return this._fail(`Expected 400-level status but could not parse value ${this.expectValue}`)
+      return this._fail(
+        `Expected 400-level status but could not parse value ${this.expectValue}`
+      )
     }
     return this._satisfies(code >= 400 && code < 500, true)
       ? this._pass()
-      : this._fail(this._fmtNot(`Expected ${this.expectValue} to (not)be 400-level status`))
+      : this._fail(
+          this._fmtNot(
+            `Expected ${this.expectValue} to (not)be 400-level status`
+          )
+        )
   }
+
   toBeLevel5xx() {
     const code = parseInt(this.expectValue, 10)
     if (Number.isNaN(code)) {
-      return this._fail(`Expected 500-level status but could not parse value ${this.expectValue}`)
+      return this._fail(
+        `Expected 500-level status but could not parse value ${this.expectValue}`
+      )
     }
     return this._satisfies(code >= 500 && code < 600, true)
       ? this._pass()
-      : this._fail(this._fmtNot(`Expected ${this.expectValue} to (not)be 500-level status`))
+      : this._fail(
+          this._fmtNot(
+            `Expected ${this.expectValue} to (not)be 500-level status`
+          )
+        )
   }
+
   toHaveLength(expectedLength) {
     const actualLength = this.expectValue.length
     return this._satisfies(actualLength, expectedLength)
@@ -154,6 +196,7 @@ class Expectation {
           )
         )
   }
+
   toBeType(expectedType) {
     const actualType = typeof this.expectValue
     if (
@@ -177,7 +220,9 @@ class Expectation {
     return this._satisfies(actualType, expectedType)
       ? this._pass()
       : this._fail(
-          this._fmtNot(`Expected type to be "${expectedType}" but actual type was "${actualType}"`)
+          this._fmtNot(
+            `Expected type to be "${expectedType}" but actual type was "${actualType}"`
+          )
         )
   }
 }
diff --git a/helpers/preRequest.js b/helpers/preRequest.js
index 6375fece0..ad8581cfb 100644
--- a/helpers/preRequest.js
+++ b/helpers/preRequest.js
@@ -1,10 +1,10 @@
 export default function getEnvironmentVariablesFromScript(script) {
-  let _variables = {}
+  const _variables = {}
 
   try {
     // the pw object is the proxy by which pre-request scripts can pass variables to the request.
     // for security and control purposes, this is the only way a pre-request script should modify variables.
-    let pw = {
+    const pw = {
       environment: {
         set: (key, value) => (_variables[key] = value),
       },
@@ -15,6 +15,7 @@ export default function getEnvironmentVariablesFromScript(script) {
     }
 
     // run pre-request script within this function so that it has access to the pw object.
+    // eslint-disable-next-line no-new-func
     new Function("pw", script)(pw)
   } catch (_e) {}
 
diff --git a/helpers/teams/utils.js b/helpers/teams/utils.js
index e284d5261..957e20250 100644
--- a/helpers/teams/utils.js
+++ b/helpers/teams/utils.js
@@ -1,4 +1,3 @@
-import { ApolloClient } from "@apollo/client/core"
 import gql from "graphql-tag"
 import { BehaviorSubject } from "rxjs"
 
@@ -95,7 +94,9 @@ export async function getLiveTeamMembersList(apollo, teamID) {
     })
     .subscribe(({ data }) => {
       subject.next(
-        subject.value.filter((member) => member.user.uid !== data.teamMemberAdded.user.uid)
+        subject.value.filter(
+          (member) => member.user.uid !== data.teamMemberAdded.user.uid
+        )
       )
     })
 
@@ -112,22 +113,22 @@ export async function getLiveTeamMembersList(apollo, teamID) {
   return subject
 }
 
-export async function createTeam(apollo, name) {
+export function createTeam(apollo, name) {
   return apollo.mutate({
     mutation: gql`
-      mutation($name: String!) {
+      mutation ($name: String!) {
         createTeam(name: $name) {
           name
         }
       }
     `,
     variables: {
-      name: name,
+      name,
     },
   })
 }
 
-export async function addTeamMemberByEmail(apollo, userRole, userEmail, teamID) {
+export function addTeamMemberByEmail(apollo, userRole, userEmail, teamID) {
   return apollo.mutate({
     mutation: gql`
       mutation addTeamMemberByEmail(
@@ -135,20 +136,24 @@ export async function addTeamMemberByEmail(apollo, userRole, userEmail, teamID)
         $userEmail: String!
         $teamID: String!
       ) {
-        addTeamMemberByEmail(userRole: $userRole, userEmail: $userEmail, teamID: $teamID) {
+        addTeamMemberByEmail(
+          userRole: $userRole
+          userEmail: $userEmail
+          teamID: $teamID
+        ) {
           role
         }
       }
     `,
     variables: {
-      userRole: userRole,
-      userEmail: userEmail,
-      teamID: teamID,
+      userRole,
+      userEmail,
+      teamID,
     },
   })
 }
 
-export async function updateTeamMemberRole(apollo, userID, newRole, teamID) {
+export function updateTeamMemberRole(apollo, userID, newRole, teamID) {
   return apollo.mutate({
     mutation: gql`
       mutation updateTeamMemberRole(
@@ -156,20 +161,24 @@ export async function updateTeamMemberRole(apollo, userID, newRole, teamID) {
         $userUid: String!
         $teamID: String!
       ) {
-        updateTeamMemberRole(newRole: $newRole, userUid: $userUid, teamID: $teamID) {
+        updateTeamMemberRole(
+          newRole: $newRole
+          userUid: $userUid
+          teamID: $teamID
+        ) {
           role
         }
       }
     `,
     variables: {
-      newRole: newRole,
+      newRole,
       userUid: userID,
-      teamID: teamID,
+      teamID,
     },
   })
 }
 
-export async function renameTeam(apollo, name, teamID) {
+export function renameTeam(apollo, name, teamID) {
   return apollo.mutate({
     mutation: gql`
       mutation renameTeam($newName: String!, $teamID: String!) {
@@ -180,12 +189,12 @@ export async function renameTeam(apollo, name, teamID) {
     `,
     variables: {
       newName: name,
-      teamID: teamID,
+      teamID,
     },
   })
 }
 
-export async function removeTeamMember(apollo, userID, teamID) {
+export function removeTeamMember(apollo, userID, teamID) {
   return apollo.mutate({
     mutation: gql`
       mutation removeTeamMember($userUid: String!, $teamID: String!) {
@@ -194,47 +203,47 @@ export async function removeTeamMember(apollo, userID, teamID) {
     `,
     variables: {
       userUid: userID,
-      teamID: teamID,
+      teamID,
     },
   })
 }
 
 export async function deleteTeam(apollo, teamID) {
-  let response = undefined
+  let response
   while (true) {
     response = await apollo.mutate({
       mutation: gql`
-        mutation($teamID: String!) {
+        mutation ($teamID: String!) {
           deleteTeam(teamID: $teamID)
         }
       `,
       variables: {
-        teamID: teamID,
+        teamID,
       },
     })
-    if (response != undefined) break
+    if (response !== undefined) break
   }
   return response
 }
 
-export async function exitTeam(apollo, teamID) {
+export function exitTeam(apollo, teamID) {
   apollo.mutate({
     mutation: gql`
-      mutation($teamID: String!) {
+      mutation ($teamID: String!) {
         leaveTeam(teamID: $teamID)
       }
     `,
     variables: {
-      teamID: teamID,
+      teamID,
     },
   })
 }
 
 export async function rootCollectionsOfTeam(apollo, teamID) {
-  var collections = []
-  var cursor = ""
+  const collections = []
+  let cursor = ""
   while (true) {
-    var response = await apollo.query({
+    const response = await apollo.query({
       query: gql`
         query rootCollectionsOfTeam($teamID: String!, $cursor: String!) {
           rootCollectionsOfTeam(teamID: $teamID, cursor: $cursor) {
@@ -244,12 +253,12 @@ export async function rootCollectionsOfTeam(apollo, teamID) {
         }
       `,
       variables: {
-        teamID: teamID,
-        cursor: cursor,
+        teamID,
+        cursor,
       },
       fetchPolicy: "no-cache",
     })
-    if (response.data.rootCollectionsOfTeam.length == 0) break
+    if (response.data.rootCollectionsOfTeam.length === 0) break
     response.data.rootCollectionsOfTeam.forEach((collection) => {
       collections.push(collection)
     })
@@ -259,8 +268,8 @@ export async function rootCollectionsOfTeam(apollo, teamID) {
 }
 
 export async function getCollectionChildren(apollo, collectionID) {
-  var children = []
-  var response = await apollo.query({
+  const children = []
+  const response = await apollo.query({
     query: gql`
       query getCollectionChildren($collectionID: String!) {
         collection(collectionID: $collectionID) {
@@ -272,7 +281,7 @@ export async function getCollectionChildren(apollo, collectionID) {
       }
     `,
     variables: {
-      collectionID: collectionID,
+      collectionID,
     },
     fetchPolicy: "no-cache",
   })
@@ -283,10 +292,10 @@ export async function getCollectionChildren(apollo, collectionID) {
 }
 
 export async function getCollectionRequests(apollo, collectionID) {
-  var requests = []
-  var cursor = ""
+  const requests = []
+  let cursor = ""
   while (true) {
-    var response = await apollo.query({
+    const response = await apollo.query({
       query: gql`
         query getCollectionRequests($collectionID: String!, $cursor: String) {
           requestsInCollection(collectionID: $collectionID, cursor: $cursor) {
@@ -297,8 +306,8 @@ export async function getCollectionRequests(apollo, collectionID) {
         }
       `,
       variables: {
-        collectionID: collectionID,
-        cursor: cursor,
+        collectionID,
+        cursor,
       },
       fetchPolicy: "no-cache",
     })
@@ -316,11 +325,11 @@ export async function getCollectionRequests(apollo, collectionID) {
 }
 
 export async function renameCollection(apollo, title, id) {
-  let response = undefined
+  let response
   while (true) {
     response = await apollo.mutate({
       mutation: gql`
-        mutation($newTitle: String!, $collectionID: String!) {
+        mutation ($newTitle: String!, $collectionID: String!) {
           renameCollection(newTitle: $newTitle, collectionID: $collectionID) {
             id
           }
@@ -331,17 +340,17 @@ export async function renameCollection(apollo, title, id) {
         collectionID: id,
       },
     })
-    if (response != undefined) break
+    if (response !== undefined) break
   }
   return response
 }
 
 export async function updateRequest(apollo, request, requestName, requestID) {
-  let response = undefined
+  let response
   while (true) {
     response = await apollo.mutate({
       mutation: gql`
-        mutation($data: UpdateTeamRequestInput!, $requestID: String!) {
+        mutation ($data: UpdateTeamRequestInput!, $requestID: String!) {
           updateRequest(data: $data, requestID: $requestID) {
             id
           }
@@ -352,21 +361,24 @@ export async function updateRequest(apollo, request, requestName, requestID) {
           request: JSON.stringify(request),
           title: requestName,
         },
-        requestID: requestID,
+        requestID,
       },
     })
-    if (response != undefined) break
+    if (response !== undefined) break
   }
   return response
 }
 
 export async function addChildCollection(apollo, title, id) {
-  let response = undefined
+  let response
   while (true) {
     response = await apollo.mutate({
       mutation: gql`
-        mutation($childTitle: String!, $collectionID: String!) {
-          createChildCollection(childTitle: $childTitle, collectionID: $collectionID) {
+        mutation ($childTitle: String!, $collectionID: String!) {
+          createChildCollection(
+            childTitle: $childTitle
+            collectionID: $collectionID
+          ) {
             id
           }
         }
@@ -376,17 +388,17 @@ export async function addChildCollection(apollo, title, id) {
         collectionID: id,
       },
     })
-    if (response != undefined) break
+    if (response !== undefined) break
   }
   return response
 }
 
 export async function deleteCollection(apollo, id) {
-  let response = undefined
+  let response
   while (true) {
     response = await apollo.mutate({
       mutation: gql`
-        mutation($collectionID: String!) {
+        mutation ($collectionID: String!) {
           deleteCollection(collectionID: $collectionID)
         }
       `,
@@ -394,54 +406,60 @@ export async function deleteCollection(apollo, id) {
         collectionID: id,
       },
     })
-    if (response != undefined) break
+    if (response !== undefined) break
   }
   return response
 }
 
 export async function deleteRequest(apollo, requestID) {
-  let response = undefined
+  let response
   while (true) {
     response = await apollo.mutate({
       mutation: gql`
-        mutation($requestID: String!) {
+        mutation ($requestID: String!) {
           deleteRequest(requestID: $requestID)
         }
       `,
       variables: {
-        requestID: requestID,
+        requestID,
       },
     })
-    if (response != undefined) break
+    if (response !== undefined) break
   }
   return response
 }
 
 export async function createNewRootCollection(apollo, title, id) {
-  let response = undefined
+  let response
   while (true) {
     response = await apollo.mutate({
       mutation: gql`
-        mutation($title: String!, $teamID: String!) {
+        mutation ($title: String!, $teamID: String!) {
           createRootCollection(title: $title, teamID: $teamID) {
             id
           }
         }
       `,
       variables: {
-        title: title,
+        title,
         teamID: id,
       },
     })
-    if (response != undefined) break
+    if (response !== undefined) break
   }
   return response
 }
 
-export async function saveRequestAsTeams(apollo, request, title, teamID, collectionID) {
+export async function saveRequestAsTeams(
+  apollo,
+  request,
+  title,
+  teamID,
+  collectionID
+) {
   await apollo.mutate({
     mutation: gql`
-      mutation($data: CreateTeamRequestInput!, $collectionID: String!) {
+      mutation ($data: CreateTeamRequestInput!, $collectionID: String!) {
         createRequestInCollection(data: $data, collectionID: $collectionID) {
           collection {
             id
@@ -454,11 +472,11 @@ export async function saveRequestAsTeams(apollo, request, title, teamID, collect
       }
     `,
     variables: {
-      collectionID: collectionID,
+      collectionID,
       data: {
-        teamID: teamID,
-        title: title,
-        request: request,
+        teamID,
+        title,
+        request,
       },
     },
   })
@@ -467,7 +485,10 @@ export async function saveRequestAsTeams(apollo, request, title, teamID, collect
 export async function overwriteRequestTeams(apollo, request, title, requestID) {
   await apollo.mutate({
     mutation: gql`
-      mutation updateRequest($data: UpdateTeamRequestInput!, $requestID: String!) {
+      mutation updateRequest(
+        $data: UpdateTeamRequestInput!
+        $requestID: String!
+      ) {
         updateRequest(data: $data, requestID: $requestID) {
           id
           title
@@ -475,20 +496,26 @@ export async function overwriteRequestTeams(apollo, request, title, requestID) {
       }
     `,
     variables: {
-      requestID: requestID,
+      requestID,
       data: {
-        request: request,
-        title: title,
+        request,
+        title,
       },
     },
   })
 }
 
 export async function importFromMyCollections(apollo, collectionID, teamID) {
-  let response = await apollo.mutate({
+  const response = await apollo.mutate({
     mutation: gql`
-      mutation importFromMyCollections($fbCollectionPath: String!, $teamID: String!) {
-        importCollectionFromUserFirestore(fbCollectionPath: $fbCollectionPath, teamID: $teamID) {
+      mutation importFromMyCollections(
+        $fbCollectionPath: String!
+        $teamID: String!
+      ) {
+        importCollectionFromUserFirestore(
+          fbCollectionPath: $fbCollectionPath
+          teamID: $teamID
+        ) {
           id
           title
         }
@@ -496,14 +523,14 @@ export async function importFromMyCollections(apollo, collectionID, teamID) {
     `,
     variables: {
       fbCollectionPath: collectionID,
-      teamID: teamID,
+      teamID,
     },
   })
   return response.data != null
 }
 
 export async function importFromJSON(apollo, collections, teamID) {
-  let response = await apollo.mutate({
+  const response = await apollo.mutate({
     mutation: gql`
       mutation importFromJSON($jsonString: String!, $teamID: String!) {
         importCollectionsFromJSON(jsonString: $jsonString, teamID: $teamID)
@@ -511,14 +538,14 @@ export async function importFromJSON(apollo, collections, teamID) {
     `,
     variables: {
       jsonString: JSON.stringify(collections),
-      teamID: teamID,
+      teamID,
     },
   })
   return response.data != null
 }
 
 export async function replaceWithJSON(apollo, collections, teamID) {
-  let response = await apollo.mutate({
+  const response = await apollo.mutate({
     mutation: gql`
       mutation replaceWithJSON($jsonString: String!, $teamID: String!) {
         replaceCollectionsWithJSON(jsonString: $jsonString, teamID: $teamID)
@@ -526,21 +553,21 @@ export async function replaceWithJSON(apollo, collections, teamID) {
     `,
     variables: {
       jsonString: JSON.stringify(collections),
-      teamID: teamID,
+      teamID,
     },
   })
   return response.data != null
 }
 
 export async function exportAsJSON(apollo, teamID) {
-  let response = await apollo.query({
+  const response = await apollo.query({
     query: gql`
       query exportAsJSON($teamID: String!) {
         exportCollectionsToJSON(teamID: $teamID)
       }
     `,
     variables: {
-      teamID: teamID,
+      teamID,
     },
   })
   return response.data.exportCollectionsToJSON
diff --git a/helpers/utils/__tests__/debounce.spec.js b/helpers/utils/__tests__/debounce.spec.js
index 16701de31..40365d0a6 100644
--- a/helpers/utils/__tests__/debounce.spec.js
+++ b/helpers/utils/__tests__/debounce.spec.js
@@ -10,7 +10,7 @@ describe("debounce", () => {
     expect(fn).not.toHaveBeenCalled()
   })
 
-  test("calls the function after the given timeout", async () => {
+  test("calls the function after the given timeout", () => {
     const fn = jest.fn()
 
     jest.useFakeTimers()
@@ -24,7 +24,7 @@ describe("debounce", () => {
     expect(setTimeout).toHaveBeenCalledWith(expect.any(Function), 100)
   })
 
-  test("calls the function only one time within the timeframe", async () => {
+  test("calls the function only one time within the timeframe", () => {
     const fn = jest.fn()
 
     const debFunc = debounce(fn, 1000)
diff --git a/newstore/DispatchingStore.ts b/newstore/DispatchingStore.ts
index 6b450f5d5..e32b48f30 100644
--- a/newstore/DispatchingStore.ts
+++ b/newstore/DispatchingStore.ts
@@ -3,6 +3,10 @@ import { map } from "rxjs/operators"
 import assign from "lodash/assign"
 import clone from "lodash/clone"
 
+export type Dispatchers<StoreType> = {
+  [key: string]: (currentVal: StoreType, payload: any) => Partial<StoreType>
+}
+
 type Dispatch<
   StoreType,
   DispatchersType extends Dispatchers<StoreType>,
@@ -12,21 +16,26 @@ type Dispatch<
   payload: any
 }
 
-export type Dispatchers<StoreType> = {
-  [key: string]: (currentVal: StoreType, payload: any) => Partial<StoreType>
-}
-
-export default class DispatchingStore<StoreType, DispatchersType extends Dispatchers<StoreType>> {
+export default class DispatchingStore<
+  StoreType,
+  DispatchersType extends Dispatchers<StoreType>
+> {
   #state$: BehaviorSubject<StoreType>
   #dispatchers: Dispatchers<StoreType>
-  #dispatches$: Subject<Dispatch<StoreType, DispatchersType, keyof DispatchersType>> = new Subject()
+  #dispatches$: Subject<
+    Dispatch<StoreType, DispatchersType, keyof DispatchersType>
+  > = new Subject()
 
   constructor(initialValue: StoreType, dispatchers: DispatchersType) {
     this.#state$ = new BehaviorSubject(initialValue)
     this.#dispatchers = dispatchers
 
     this.#dispatches$
-      .pipe(map(({ dispatcher, payload }) => this.#dispatchers[dispatcher](this.value, payload)))
+      .pipe(
+        map(({ dispatcher, payload }) =>
+          this.#dispatchers[dispatcher](this.value, payload)
+        )
+      )
       .subscribe((val) => {
         const data = clone(this.value)
         assign(data, val)
@@ -47,8 +56,12 @@ export default class DispatchingStore<StoreType, DispatchersType extends Dispatc
     return this.#dispatches$
   }
 
-  dispatch({ dispatcher, payload }: Dispatch<StoreType, DispatchersType, keyof DispatchersType>) {
-    if (!this.#dispatchers[dispatcher]) throw new Error(`Undefined dispatch type '${dispatcher}'`)
+  dispatch({
+    dispatcher,
+    payload,
+  }: Dispatch<StoreType, DispatchersType, keyof DispatchersType>) {
+    if (!this.#dispatchers[dispatcher])
+      throw new Error(`Undefined dispatch type '${dispatcher}'`)
 
     this.#dispatches$.next({ dispatcher, payload })
   }
diff --git a/pages/graphql.vue b/pages/graphql.vue
index 74d6097c1..8f9b568b5 100644
--- a/pages/graphql.vue
+++ b/pages/graphql.vue
@@ -2,18 +2,18 @@
   <div class="page">
     <div class="content">
       <div class="page-columns inner-left">
-        <AppSection :label="$t('endpoint')" ref="endpoint" no-legend>
+        <AppSection ref="endpoint" :label="$t('endpoint')" no-legend>
           <ul>
             <li>
               <label for="url">{{ $t("url") }}</label>
               <input
                 id="url"
-                type="url"
                 v-model="url"
+                type="url"
                 spellcheck="false"
-                @keyup.enter="onPollSchemaClick()"
                 class="md:rounded-bl-lg"
                 :placeholder="$t('url')"
+                @keyup.enter="onPollSchemaClick()"
               />
             </li>
             <div>
@@ -22,8 +22,8 @@
                 <button
                   id="get"
                   name="get"
-                  @click="onPollSchemaClick"
                   class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
+                  @click="onPollSchemaClick"
                 >
                   {{ !isPollingSchema ? $t("connect") : $t("disconnect") }}
                   <span
@@ -37,7 +37,7 @@
           </ul>
         </AppSection>
 
-        <AppSection :label="$t('headers')" ref="headers" no-legend>
+        <AppSection ref="headers" :label="$t('headers')" no-legend>
           <div class="flex flex-col">
             <label>{{ $t("headers") }}</label>
             <ul v-if="headers.length !== 0">
@@ -45,7 +45,11 @@
                 <div class="row-wrapper">
                   <label for="headerList">{{ $t("header_list") }}</label>
                   <div>
-                    <button class="icon" @click="headers = []" v-tooltip.bottom="$t('clear')">
+                    <button
+                      v-tooltip.bottom="$t('clear')"
+                      class="icon"
+                      @click="headers = []"
+                    >
                       <i class="material-icons">clear_all</i>
                     </button>
                   </div>
@@ -71,13 +75,13 @@
                   :source="commonHeaders"
                   :spellcheck="false"
                   :value="header.key"
+                  autofocus
                   @input="
                     $store.commit('setGQLHeaderKey', {
                       index,
                       value: $event,
                     })
                   "
-                  autofocus
                 />
               </li>
               <li>
@@ -85,25 +89,18 @@
                   :placeholder="$t('value_count', { count: index + 1 })"
                   :name="`value ${index}`"
                   :value="header.value"
+                  autofocus
                   @change="
                     $store.commit('setGQLHeaderValue', {
                       index,
                       value: $event.target.value,
                     })
                   "
-                  autofocus
                 />
               </li>
               <div>
                 <li>
                   <button
-                    class="icon"
-                    @click="
-                      $store.commit('setActiveGQLHeader', {
-                        index,
-                        value: header.hasOwnProperty('active') ? !header.active : false,
-                      })
-                    "
                     v-tooltip.bottom="{
                       content: header.hasOwnProperty('active')
                         ? header.active
@@ -111,6 +108,15 @@
                           : $t('turn_on')
                         : $t('turn_off'),
                     }"
+                    class="icon"
+                    @click="
+                      $store.commit('setActiveGQLHeader', {
+                        index,
+                        value: header.hasOwnProperty('active')
+                          ? !header.active
+                          : false,
+                      })
+                    "
                   >
                     <i class="material-icons">
                       {{
@@ -127,9 +133,9 @@
               <div>
                 <li>
                   <button
+                    v-tooltip.bottom="$t('delete')"
                     class="icon"
                     @click="removeRequestHeader(index)"
-                    v-tooltip.bottom="$t('delete')"
                   >
                     <i class="material-icons">delete</i>
                   </button>
@@ -147,35 +153,37 @@
           </div>
         </AppSection>
 
-        <AppSection :label="$t('schema')" ref="schema" no-legend>
+        <AppSection ref="schema" :label="$t('schema')" no-legend>
           <div class="row-wrapper">
             <label>{{ $t("schema") }}</label>
             <div v-if="schema">
               <button
-                class="icon"
-                @click="ToggleExpandResponse"
                 ref="ToggleExpandResponse"
                 v-tooltip="{
-                  content: !expandResponse ? $t('expand_response') : $t('collapse_response'),
+                  content: !expandResponse
+                    ? $t('expand_response')
+                    : $t('collapse_response'),
                 }"
+                class="icon"
+                @click="ToggleExpandResponse"
               >
                 <i class="material-icons">
                   {{ !expandResponse ? "unfold_more" : "unfold_less" }}
                 </i>
               </button>
               <button
-                class="icon"
-                @click="downloadSchema"
                 ref="downloadSchema"
                 v-tooltip="$t('download_file')"
+                class="icon"
+                @click="downloadSchema"
               >
                 <i class="material-icons">save_alt</i>
               </button>
               <button
-                class="icon"
                 ref="copySchemaCode"
-                @click="copySchema"
                 v-tooltip="$t('copy_schema')"
+                class="icon"
+                @click="copySchema"
               >
                 <i class="material-icons">content_copy</i>
               </button>
@@ -198,45 +206,47 @@
           />
           <input
             v-else
+            ref="status"
             class="rounded-b-lg missing-data-response"
             :value="$t('waiting_receive_schema')"
-            ref="status"
             name="status"
             readonly
             type="text"
           />
         </AppSection>
 
-        <AppSection :label="$t('query')" ref="query" no-legend>
+        <AppSection ref="query" :label="$t('query')" no-legend>
           <div class="row-wrapper gqlRunQuery">
             <label for="gqlQuery">{{ $t("query") }}</label>
             <div>
               <button
+                v-tooltip.bottom="
+                  `${$t('run_query')} (${getSpecialKey()}-Enter)`
+                "
                 @click="runQuery()"
-                v-tooltip.bottom="`${$t('run_query')} (${getSpecialKey()}-Enter)`"
               >
                 <i class="material-icons">play_arrow</i>
               </button>
               <button
-                class="icon"
-                @click="copyQuery"
                 ref="copyQueryButton"
                 v-tooltip="$t('copy_query')"
+                class="icon"
+                @click="copyQuery"
               >
                 <i class="material-icons">content_copy</i>
               </button>
               <button
+                v-tooltip="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
                 class="icon"
                 @click="doPrettifyQuery"
-                v-tooltip="`${$t('prettify_query')} (${getSpecialKey()}-P)`"
               >
                 <i class="material-icons">photo_filter</i>
               </button>
               <button
-                class="icon"
-                @click="saveRequest"
                 ref="saveRequest"
                 v-tooltip.bottom="$t('save_to_collections')"
+                class="icon"
+                @click="saveRequest"
               >
                 <i class="material-icons">create_new_folder</i>
               </button>
@@ -245,7 +255,8 @@
           <GraphqlQueryEditor
             ref="queryEditor"
             v-model="gqlQueryString"
-            :onRunGQLQuery="runQuery"
+            styles="rounded-b-lg"
+            :on-run-g-q-l-query="runQuery"
             :options="{
               maxLines: responseBodyMaxLines,
               minLines: 10,
@@ -254,11 +265,11 @@
               showPrintMargin: false,
               useWorker: false,
             }"
-            styles="rounded-b-lg"
+            @update-query="updateQuery"
           />
         </AppSection>
 
-        <AppSection :label="$t('variables')" ref="variables" no-legend>
+        <AppSection ref="variables" :label="$t('variables')" no-legend>
           <div class="flex flex-col">
             <label>{{ $t("variables") }}</label>
             <SmartAceEditor
@@ -277,27 +288,27 @@
           </div>
         </AppSection>
 
-        <AppSection :label="$t('response')" ref="response" no-legend>
+        <AppSection ref="response" :label="$t('response')" no-legend>
           <div class="flex flex-col">
             <label>{{ $t("response") }}</label>
             <div class="row-wrapper">
               <label for="responseField">{{ $t("response_body") }}</label>
               <div>
                 <button
+                  v-if="response"
+                  ref="downloadResponse"
+                  v-tooltip="$t('download_file')"
                   class="icon"
                   @click="downloadResponse"
-                  ref="downloadResponse"
-                  v-if="response"
-                  v-tooltip="$t('download_file')"
                 >
                   <i class="material-icons">save_alt</i>
                 </button>
                 <button
+                  v-if="response"
+                  ref="copyResponseButton"
+                  v-tooltip="$t('copy_response')"
                   class="icon"
                   @click="copyResponse"
-                  ref="copyResponseButton"
-                  v-if="response"
-                  v-tooltip="$t('copy_response')"
                 >
                   <i class="material-icons">content_copy</i>
                 </button>
@@ -321,9 +332,9 @@
             />
             <input
               v-else
+              ref="status"
               class="rounded-b-lg missing-data-response"
               :value="$t('waiting_receive_response')"
-              ref="status"
               name="status"
               readonly
               type="text"
@@ -335,12 +346,12 @@
       <aside class="sticky-inner inner-right lg:max-w-md">
         <SmartTabs>
           <SmartTab :id="'docs'" :label="`Docs`" :selected="true">
-            <AppSection :label="$t('docs')" ref="docs" no-legend>
+            <AppSection ref="docs" :label="$t('docs')" no-legend>
               <section class="flex-col">
                 <input
+                  v-model="graphqlFieldsFilterText"
                   type="text"
                   :placeholder="$t('search')"
-                  v-model="graphqlFieldsFilterText"
                   class="rounded-t-lg"
                 />
                 <SmartTabs ref="gqlTabs" styles="m-4">
@@ -351,8 +362,14 @@
                       :label="$t('queries')"
                       :selected="true"
                     >
-                      <div v-for="field in filteredQueryFields" :key="field.name">
-                        <GraphqlField :gqlField="field" :jumpTypeCallback="handleJumpToType" />
+                      <div
+                        v-for="field in filteredQueryFields"
+                        :key="field.name"
+                      >
+                        <GraphqlField
+                          :gql-field="field"
+                          :jump-type-callback="handleJumpToType"
+                        />
                       </div>
                     </SmartTab>
 
@@ -361,8 +378,14 @@
                       :id="'mutations'"
                       :label="$t('mutations')"
                     >
-                      <div v-for="field in filteredMutationFields" :key="field.name">
-                        <GraphqlField :gqlField="field" :jumpTypeCallback="handleJumpToType" />
+                      <div
+                        v-for="field in filteredMutationFields"
+                        :key="field.name"
+                      >
+                        <GraphqlField
+                          :gql-field="field"
+                          :jump-type-callback="handleJumpToType"
+                        />
                       </div>
                     </SmartTab>
 
@@ -371,24 +394,37 @@
                       :id="'subscriptions'"
                       :label="$t('subscriptions')"
                     >
-                      <div v-for="field in filteredSubscriptionFields" :key="field.name">
-                        <GraphqlField :gqlField="field" :jumpTypeCallback="handleJumpToType" />
+                      <div
+                        v-for="field in filteredSubscriptionFields"
+                        :key="field.name"
+                      >
+                        <GraphqlField
+                          :gql-field="field"
+                          :jump-type-callback="handleJumpToType"
+                        />
                       </div>
                     </SmartTab>
 
                     <SmartTab
                       v-if="graphqlTypes.length > 0"
                       :id="'types'"
-                      :label="$t('types')"
                       ref="typesTab"
+                      :label="$t('types')"
                     >
-                      <div v-for="type in filteredGraphqlTypes" :key="type.name">
+                      <div
+                        v-for="type in filteredGraphqlTypes"
+                        :key="type.name"
+                      >
                         <GraphqlType
-                          :gqlType="type"
-                          :gqlTypes="graphqlTypes"
-                          :isHighlighted="isGqlTypeHighlighted({ gqlType: type })"
-                          :highlightedFields="getGqlTypeHighlightedFields({ gqlType: type })"
-                          :jumpTypeCallback="handleJumpToType"
+                          :gql-type="type"
+                          :gql-types="graphqlTypes"
+                          :is-highlighted="
+                            isGqlTypeHighlighted({ gqlType: type })
+                          "
+                          :highlighted-fields="
+                            getGqlTypeHighlightedFields({ gqlType: type })
+                          "
+                          :jump-type-callback="handleJumpToType"
                         />
                       </div>
                     </SmartTab>
@@ -411,9 +447,9 @@
 
           <SmartTab :id="'history'" :label="$t('history')">
             <History
-              @useHistory="handleUseHistory"
               ref="graphqlHistoryComponent"
               :page="'graphql'"
+              @useHistory="handleUseHistory"
             />
           </SmartTab>
 
@@ -433,23 +469,12 @@
     </div>
     <CollectionsGraphqlSaveRequest
       :show="showSaveRequestModal"
-      @hide-modal="hideRequestModal"
       :editing-request="editRequest"
+      @hide-modal="hideRequestModal"
     />
   </div>
 </template>
 
-<style scoped lang="scss">
-.gqlTabs {
-  max-height: calc(100vh - 192px);
-  position: relative;
-  @apply overflow-auto;
-}
-.gqlRunQuery {
-  @apply mb-8;
-}
-</style>
-
 <script>
 import * as gql from "graphql"
 import { commonHeaders } from "~/helpers/headers"
@@ -459,6 +484,12 @@ import { getSettingSubject } from "~/newstore/settings"
 import { fb } from "~/helpers/fb"
 
 export default {
+  beforeRouteLeave(_to, _from, next) {
+    this.isPollingSchema = false
+    if (this.timeoutSubscription) clearTimeout(this.timeoutSubscription)
+
+    next()
+  },
   data() {
     return {
       commonHeaders,
@@ -484,14 +515,10 @@ export default {
       SCROLL_INTO_ENABLED: getSettingSubject("SCROLL_INTO_ENABLED"),
     }
   },
-  watch: {
-    selectedRequest(newValue) {
-      if (!newValue) return
-      this.url = newValue.url
-      this.gqlQueryString = newValue.query
-      this.headers = newValue.headers
-      this.variableString = newValue.variables
-    },
+  head() {
+    return {
+      title: `GraphQL • Hoppscotch`,
+    }
   },
   computed: {
     selectedRequest() {
@@ -576,18 +603,26 @@ export default {
       },
     },
   },
+  watch: {
+    selectedRequest(newValue) {
+      if (!newValue) return
+      this.url = newValue.url
+      this.gqlQueryString = newValue.query
+      this.headers = newValue.headers
+      this.variableString = newValue.variables
+    },
+  },
   mounted() {
-    if (this.$store.state.gql.schemaIntrospection && this.$store.state.gql.schema) {
-      const gqlSchema = gql.buildClientSchema(JSON.parse(this.$store.state.gql.schemaIntrospection))
+    if (
+      this.$store.state.gql.schemaIntrospection &&
+      this.$store.state.gql.schema
+    ) {
+      const gqlSchema = gql.buildClientSchema(
+        JSON.parse(this.$store.state.gql.schemaIntrospection)
+      )
       this.getDocsFromSchema(gqlSchema)
     }
   },
-  beforeRouteLeave(_to, _from, next) {
-    this.isPollingSchema = false
-    if (this.timeoutSubscription) clearTimeout(this.timeoutSubscription)
-
-    next()
-  },
   methods: {
     hideRequestModal() {
       this.showSaveRequestModal = false
@@ -641,7 +676,9 @@ export default {
       const isFilterTextFoundInDescription = graphqlFieldObject.description
         ? graphqlFieldObject.description.toLowerCase().includes(normalizedText)
         : false
-      const isFilterTextFoundInName = graphqlFieldObject.name.toLowerCase().includes(normalizedText)
+      const isFilterTextFoundInName = graphqlFieldObject.name
+        .toLowerCase()
+        .includes(normalizedText)
 
       return isFilterTextFoundInDescription || isFilterTextFoundInName
     },
@@ -649,7 +686,10 @@ export default {
       if (!filterText) return fields
 
       return fields.filter((field) =>
-        this.isTextFoundInGraphqlFieldObject({ text: filterText, graphqlFieldObject: field })
+        this.isTextFoundInGraphqlFieldObject({
+          text: filterText,
+          graphqlFieldObject: field,
+        })
       )
     },
     getFilteredGraphqlTypes({ filterText, types }) {
@@ -665,12 +705,13 @@ export default {
           return true
         }
 
-        const isFilterTextMatchingAtLeastOneField = Object.values(type._fields || {}).some(
-          (field) =>
-            this.isTextFoundInGraphqlFieldObject({
-              text: filterText,
-              graphqlFieldObject: field,
-            })
+        const isFilterTextMatchingAtLeastOneField = Object.values(
+          type._fields || {}
+        ).some((field) =>
+          this.isTextFoundInGraphqlFieldObject({
+            text: filterText,
+            graphqlFieldObject: field,
+          })
         )
 
         return isFilterTextMatchingAtLeastOneField
@@ -709,7 +750,10 @@ export default {
       this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done",
       })
-      setTimeout(() => (this.$refs.copySchemaCode.innerHTML = this.copyButton), 1000)
+      setTimeout(
+        () => (this.$refs.copySchemaCode.innerHTML = this.copyButton),
+        1000
+      )
     },
     copyQuery() {
       this.$refs.copyQueryButton.innerHTML = this.doneButton
@@ -722,7 +766,10 @@ export default {
       this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done",
       })
-      setTimeout(() => (this.$refs.copyQueryButton.innerHTML = this.copyButton), 1000)
+      setTimeout(
+        () => (this.$refs.copyQueryButton.innerHTML = this.copyButton),
+        1000
+      )
     },
     copyResponse() {
       this.$refs.copyResponseButton.innerHTML = this.doneButton
@@ -735,7 +782,10 @@ export default {
       this.$toast.success(this.$t("copied_to_clipboard"), {
         icon: "done",
       })
-      setTimeout(() => (this.$refs.copyResponseButton.innerHTML = this.copyButton), 1000)
+      setTimeout(
+        () => (this.$refs.copyResponseButton.innerHTML = this.copyButton),
+        1000
+      )
     },
     async runQuery() {
       const startTime = Date.now()
@@ -748,14 +798,18 @@ export default {
       if (this.SCROLL_INTO_ENABLED) this.scrollInto("response")
 
       try {
-        let headers = {}
+        const headers = {}
         this.headers
-          .filter((item) => (item.hasOwnProperty("active") ? item.active == true : true))
+          .filter((item) =>
+            Object.prototype.hasOwnProperty.call(item, "active")
+              ? item.active === true
+              : true
+          )
           .forEach(({ key, value }) => {
             headers[key] = value
           })
 
-        let variables = JSON.parse(this.variableString || "{}")
+        const variables = JSON.parse(this.variableString || "{}")
 
         const gqlQueryString = this.gqlQueryString
 
@@ -778,7 +832,9 @@ export default {
         const res = await sendNetworkRequest(reqOptions)
 
         // HACK: Temporary trailing null character issue from the extension fix
-        const responseText = new TextDecoder("utf-8").decode(res.data).replace(/\0+$/, "")
+        const responseText = new TextDecoder("utf-8")
+          .decode(res.data)
+          .replace(/\0+$/, "")
 
         this.response = JSON.stringify(JSON.parse(responseText), null, 2)
 
@@ -846,17 +902,23 @@ export default {
       const typeMap = schema.getTypeMap()
       const types = []
 
-      const queryTypeName = schema.getQueryType() ? schema.getQueryType().name : ""
-      const mutationTypeName = schema.getMutationType() ? schema.getMutationType().name : ""
+      const queryTypeName = schema.getQueryType()
+        ? schema.getQueryType().name
+        : ""
+      const mutationTypeName = schema.getMutationType()
+        ? schema.getMutationType().name
+        : ""
       const subscriptionTypeName = schema.getSubscriptionType()
         ? schema.getSubscriptionType().name
         : ""
 
       for (const typeName in typeMap) {
-        let type = typeMap[typeName]
+        const type = typeMap[typeName]
         if (
           !type.name.startsWith("__") &&
-          ![queryTypeName, mutationTypeName, subscriptionTypeName].includes(type.name) &&
+          ![queryTypeName, mutationTypeName, subscriptionTypeName].includes(
+            type.name
+          ) &&
           (type instanceof gql.GraphQLObjectType ||
             type instanceof gql.GraphQLInputObjectType ||
             type instanceof gql.GraphQLEnumType ||
@@ -887,9 +949,13 @@ export default {
           query: gql.getIntrospectionQuery(),
         })
 
-        let headers = {}
+        const headers = {}
         this.headers
-          .filter((item) => (item.hasOwnProperty("active") ? item.active == true : true))
+          .filter((item) =>
+            Object.prototype.hasOwnProperty.call(item, "active")
+              ? item.active === true
+              : true
+          )
           .forEach(({ key, value }) => {
             headers[key] = value
           })
@@ -907,7 +973,9 @@ export default {
         const data = await sendNetworkRequest(reqOptions, this.$store)
 
         // HACK : Temporary trailing null character issue from the extension fix
-        const response = new TextDecoder("utf-8").decode(data.data).replace(/\0+$/, "")
+        const response = new TextDecoder("utf-8")
+          .decode(data.data)
+          .replace(/\0+$/, "")
         const introspectResponse = JSON.parse(response)
 
         const schema = gql.buildClientSchema(introspectResponse.data)
@@ -926,13 +994,16 @@ export default {
         this.$refs.queryEditor.setValidationSchema(schema)
         this.$nuxt.$loading.finish()
 
-        if (this.isPollingSchema) this.timeoutSubscription = setTimeout(this.pollSchema, 7000)
+        if (this.isPollingSchema)
+          this.timeoutSubscription = setTimeout(this.pollSchema, 7000)
       } catch (error) {
         this.$nuxt.$loading.finish()
 
         this.schema = `${error}. ${this.$t("check_console_details")}`
         this.$toast.error(
-          `${this.$t("graphql_introspect_failed")} ${this.$t("check_graphql_valid")}`,
+          `${this.$t("graphql_introspect_failed")} ${this.$t(
+            "check_graphql_valid"
+          )}`,
           {
             icon: "error",
           }
@@ -959,9 +1030,13 @@ export default {
           query: gql.getIntrospectionQuery(),
         })
 
-        let headers = {}
+        const headers = {}
         this.headers
-          .filter((item) => (item.hasOwnProperty("active") ? item.active == true : true))
+          .filter((item) =>
+            Object.prototype.hasOwnProperty.call(item, "active")
+              ? item.active === true
+              : true
+          )
           .forEach(({ key, value }) => {
             headers[key] = value
           })
@@ -979,7 +1054,9 @@ export default {
         const data = await sendNetworkRequest(reqOptions, this.$store)
 
         // HACK : Temporary trailing null character issue from the extension fix
-        const response = new TextDecoder("utf-8").decode(data.data).replace(/\0+$/, "")
+        const response = new TextDecoder("utf-8")
+          .decode(data.data)
+          .replace(/\0+$/, "")
         const introspectResponse = JSON.parse(response)
 
         const schema = gql.buildClientSchema(introspectResponse.data)
@@ -1006,7 +1083,9 @@ export default {
 
         this.schema = `${error}. ${this.$t("check_console_details")}`
         this.$toast.error(
-          `${this.$t("graphql_introspect_failed")} ${this.$t("check_graphql_valid")}`,
+          `${this.$t("graphql_introspect_failed")} ${this.$t(
+            "check_graphql_valid"
+          )}`,
           {
             icon: "error",
           }
@@ -1016,7 +1095,8 @@ export default {
     },
     ToggleExpandResponse() {
       this.expandResponse = !this.expandResponse
-      this.responseBodyMaxLines = this.responseBodyMaxLines == Infinity ? 16 : Infinity
+      this.responseBodyMaxLines =
+        this.responseBodyMaxLines === Infinity ? 16 : Infinity
     },
     downloadResponse() {
       const dataToWrite = this.response
@@ -1056,7 +1136,7 @@ export default {
         this.$refs.downloadSchema.innerHTML = this.downloadButton
       }, 1000)
     },
-    addRequestHeader(index) {
+    addRequestHeader() {
       this.$store.commit("addGQLHeader", {
         key: "",
         value: "",
@@ -1073,7 +1153,7 @@ export default {
         action: {
           text: this.$t("undo"),
           duration: 4000,
-          onClick: (e, toastObject) => {
+          onClick: (_, toastObject) => {
             this.headers = oldHeaders
             toastObject.remove()
           },
@@ -1085,11 +1165,20 @@ export default {
         behavior: "smooth",
       })
     },
-  },
-  head() {
-    return {
-      title: `GraphQL • Hoppscotch`,
-    }
+    updateQuery(updatedQuery) {
+      this.gqlQueryString = updatedQuery
+    },
   },
 }
 </script>
+
+<style scoped lang="scss">
+.gqlTabs {
+  max-height: calc(100vh - 192px);
+  position: relative;
+  @apply overflow-auto;
+}
+.gqlRunQuery {
+  @apply mb-8;
+}
+</style>