refactor: lint

assets/md/folderBody.md

@@ -1,8 +1,8 @@
-{{nesting_level}} {{name}}
+{{nestingLevel}} {{name}}
 
 {{#requests}}
 
-{{nesting_level}} Request: {{name}}
+{{nestingLevel}} Request: {{name}}
 
 **Method**: {{method}}
 

components/collections/Add.vue

@@ -13,9 +13,9 @@
     <div slot="body" class="flex flex-col">
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
-        type="text"
         id="selectLabel"
         v-model="name"
+        type="text"
         :placeholder="$t('my_new_collection')"
         @keyup.enter="addNewCollection"
       />

components/collections/AddFolder.vue

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="show = false">
+  <SmartModal v-if="show" @close="$emit('hide-modal')">
     <div slot="header">
       <div class="row-wrapper">
         <h3 class="title">{{ $t("new_folder") }}</h3>
@@ -13,9 +13,9 @@
     <div slot="body" class="flex flex-col">
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
-        type="text"
         id="selectLabel"
         v-model="name"
+        type="text"
         :placeholder="$t('my_new_folder')"
         @keyup.enter="addFolder"
       />
@@ -40,9 +40,9 @@
 export default {
   props: {
     show: Boolean,
-    folder: Object,
+    folder: { type: Object, default: () => {} },
-    folderPath: String,
+    folderPath: { type: String, default: null },
-    collectionIndex: Number,
+    collectionIndex: { type: Number, default: null },
   },
   data() {
     return {

components/collections/ChooseType.vue

@@ -1,27 +1,45 @@
 <template>
   <div v-if="show">
-    <SmartTabs styles="m-4" :id="'collections_tab'" v-on:tab-changed="updateCollectionsType">
+    <SmartTabs
-      <SmartTab :id="'my-collections'" :label="'My Collections'" :selected="true"> </SmartTab>
+      :id="'collections_tab'"
+      styles="m-4"
+      @tab-changed="updateCollectionsType"
+    >
       <SmartTab
+        :id="'my-collections'"
+        :label="'My Collections'"
+        :selected="true"
+      />
+      <SmartTab
+        v-if="currentUser && currentUser.eaInvited && !doc"
         :id="'team-collections'"
         :label="'Team Collections'"
-        v-if="currentUser && currentUser.eaInvited && !doc"
       >
         <ul>
           <li>
             <span class="select-wrapper">
               <SmartIntersection @intersecting="onTeamSelectIntersect">
                 <select
-                  type="text"
                   id="team"
+                  type="text"
                   class="team"
                   autofocus
                   @change="updateSelectedTeam(myTeams[$event.target.value])"
                 >
-                  <option :key="undefined" :value="undefined" hidden disabled selected>
+                  <option
+                    :key="undefined"
+                    :value="undefined"
+                    hidden
+                    disabled
+                    selected
+                  >
                     Select team
                   </option>
-                  <option v-for="(team, index) in myTeams" :key="index" :value="index">
+                  <option
+                    v-for="(team, index) in myTeams"
+                    :key="index"
+                    :value="index"
+                  >
                     {{ team.name }}
                   </option>
                 </select>

components/collections/Edit.vue

@@ -13,9 +13,9 @@
     <div slot="body" class="flex flex-col">
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
-        type="text"
         id="selectLabel"
         v-model="name"
+        type="text"
         :placeholder="placeholderCollName"
         @keyup.enter="saveCollection"
       />
@@ -40,7 +40,7 @@
 export default {
   props: {
     show: Boolean,
-    placeholderCollName: String,
+    placeholderCollName: { type: String, default: null },
   },
   data() {
     return {

components/collections/EditFolder.vue

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="show = false">
+  <SmartModal v-if="show" @close="$emit('hide-modal')">
     <div slot="header">
       <div class="row-wrapper">
         <h3 class="title">{{ $t("edit_folder") }}</h3>
@@ -12,7 +12,12 @@
     </div>
     <div slot="body" class="flex flex-col">
       <label for="selectLabel">{{ $t("label") }}</label>
-      <input type="text" id="selectLabel" v-model="name" @keyup.enter="editFolder" />
+      <input
+        id="selectLabel"
+        v-model="name"
+        type="text"
+        @keyup.enter="editFolder"
+      />
     </div>
     <div slot="footer">
       <div class="row-wrapper">

components/collections/EditRequest.vue

@@ -13,11 +13,11 @@
     <div slot="body" class="flex flex-col">
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
-        type="text"
         id="selectLabel"
         v-model="requestUpdateData.name"
-        @keyup.enter="saveRequest"
+        type="text"
         :placeholder="placeholderReqName"
+        @keyup.enter="saveRequest"
       />
     </div>
     <div slot="footer">
@@ -40,7 +40,7 @@
 export default {
   props: {
     show: Boolean,
-    placeholderReqName: String,
+    placeholderReqName: { type: String, default: null },
   },
   data() {
     return {

components/collections/ImportExport.vue

@@ -5,20 +5,29 @@
         <h3 class="title">Export</h3>
         <div>
           <button
-            class="tooltip-target icon"
             v-if="mode != 'import_export'"
-            @click="mode = 'import_export'"
             v-tooltip.left="'Back'"
+            class="tooltip-target icon"
+            @click="mode = 'import_export'"
           >
             <i class="material-icons">arrow_back</i>
           </button>
-          <v-popover v-if="mode == 'import_export' && collectionsType.type == 'my-collections'">
+          <v-popover
-            <button class="tooltip-target icon" v-tooltip.left="$t('more')">
+            v-if="
+              mode == 'import_export' &&
+              collectionsType.type == 'my-collections'
+            "
+          >
+            <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="readCollectionGist" v-close-popover>
+                <button
+                  v-close-popover
+                  class="icon"
+                  @click="readCollectionGist"
+                >
                   <i class="material-icons">assignment_returned</i>
                   <span>{{ $t("import_from_gist") }}</span>
                 </button>
@@ -33,12 +42,16 @@
                 }"
               >
                 <button
+                  v-close-popover
                   :disabled="
-                    !fb.currentUser ? true : fb.currentUser.provider !== 'github.com' ? true : false
+                    !fb.currentUser
+                      ? true
+                      : fb.currentUser.provider !== 'github.com'
+                      ? true
+                      : false
                   "
                   class="icon"
                   @click="createCollectionGist"
-                  v-close-popover
                 >
                   <i class="material-icons">assignment_turned_in</i>
                   <span>{{ $t("create_secret_gist") }}</span>
@@ -56,12 +69,14 @@
       <div v-if="mode == 'import_export'" class="flex flex-col items-start p-2">
         <span
           v-tooltip="{
-            content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
+            content: !fb.currentUser
+              ? $t('login_first')
+              : $t('replace_current'),
           }"
         >
           <button
-            :disabled="!fb.currentUser"
             v-if="collectionsType.type == 'my-collections'"
+            :disabled="!fb.currentUser"
             class="icon"
             @click="syncCollections"
           >
@@ -70,45 +85,46 @@
           </button>
         </span>
         <button
+          v-tooltip="$t('replace_current')"
           class="icon"
           @click="openDialogChooseFileToReplaceWith"
-          v-tooltip="$t('replace_current')"
         >
           <i class="material-icons">create_new_folder</i>
           <span>{{ $t("replace_json") }}</span>
           <input
-            type="file"
-            @change="replaceWithJSON"
-            style="display: none"
             ref="inputChooseFileToReplaceWith"
+            type="file"
+            style="display: none"
             accept="application/json"
+            @change="replaceWithJSON"
           />
         </button>
         <button
+          v-tooltip="$t('preserve_current')"
           class="icon"
           @click="openDialogChooseFileToImportFrom"
-          v-tooltip="$t('preserve_current')"
         >
           <i class="material-icons">folder_special</i>
           <span>{{ $t("import_json") }}</span>
           <input
-            type="file"
-            @change="importFromJSON"
-            style="display: none"
             ref="inputChooseFileToImportFrom"
+            type="file"
+            style="display: none"
             accept="application/json"
+            @change="importFromJSON"
           />
         </button>
         <button
+          v-if="collectionsType.type == 'team-collections'"
+          v-tooltip="$t('replace_current')"
           class="icon"
           @click="mode = 'import_from_my_collections'"
-          v-tooltip="$t('replace_current')"
-          v-if="collectionsType.type == 'team-collections'"
         >
           <i class="material-icons">folder_special</i>
           <span>{{ "Import from My Collections" }}</span>
         </button>
         <button
+          v-tooltip="$t('show_code')"
           class="icon"
           @click="
             () => {
@@ -116,7 +132,6 @@
               getJSONCollection()
             }
           "
-          v-tooltip="$t('show_code')"
         >
           <i class="material-icons">folder_special</i>
           <span>{{ "Export As JSON" }}</span>
@@ -133,10 +148,20 @@
               }
             "
           >
-            <option :key="undefined" :value="undefined" hidden disabled selected>
+            <option
+              :key="undefined"
+              :value="undefined"
+              hidden
+              disabled
+              selected
+            >
               Select Collection
             </option>
-            <option v-for="(collection, index) in myCollections" :key="index" :value="index">
+            <option
+              v-for="(collection, index) in myCollections"
+              :key="index"
+              :value="index"
+            >
               {{ collection.name }}
             </option>
           </select>
@@ -153,7 +178,11 @@
         <textarea v-model="collectionJson" rows="8" readonly></textarea>
         <div class="row-wrapper">
           <span class="m-2">
-            <button class="icon primary" @click="exportJSON" v-tooltip="$t('download_file')">
+            <button
+              v-tooltip="$t('download_file')"
+              class="icon primary"
+              @click="exportJSON"
+            >
               {{ $t("export") }}
             </button>
           </span>
@@ -166,9 +195,13 @@
 <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,
+    collectionsType: { type: Object, default: () => {} },
+  },
   data() {
     return {
       fb,
@@ -183,10 +216,6 @@ export default {
       SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
     }
   },
-  props: {
-    show: Boolean,
-    collectionsType: Object,
-  },
   computed: {
     myCollections() {
       return fb.currentUser !== null
@@ -213,11 +242,11 @@ export default {
             },
           }
         )
-        .then(({ html_url }) => {
+        .then((res) => {
           this.$toast.success(this.$t("gist_created"), {
             icon: "done",
           })
-          window.open(html_url)
+          window.open(res.html_url)
         })
         .catch((error) => {
           this.$toast.error(this.$t("something_went_wrong"), {
@@ -227,7 +256,7 @@ export default {
         })
     },
     async readCollectionGist() {
-      let gist = prompt(this.$t("enter_gist_url"))
+      const gist = prompt(this.$t("enter_gist_url"))
       if (!gist) return
       await this.$axios
         .$get(`https://api.github.com/gists/${gist.split("/").pop()}`, {
@@ -236,8 +265,11 @@ export default {
           },
         })
         .then(({ files }) => {
-          let collections = JSON.parse(Object.values(files)[0].content)
+          const collections = JSON.parse(Object.values(files)[0].content)
-          this.$store.commit("postwoman/replaceCollections", { data: collections, flag: "rest" })
+          this.$store.commit("postwoman/replaceCollections", {
+            data: collections,
+            flag: "rest",
+          })
           this.fileImported()
           this.syncToFBCollections()
         })
@@ -258,23 +290,34 @@ export default {
       this.$refs.inputChooseFileToImportFrom.click()
     },
     replaceWithJSON() {
-      let reader = new FileReader()
+      const reader = new FileReader()
       reader.onload = ({ target }) => {
-        let content = target.result
+        const content = target.result
         let collections = JSON.parse(content)
         if (collections[0]) {
-          let [name, folders, requests] = Object.keys(collections[0])
+          const [name, folders, requests] = Object.keys(collections[0])
-          if (name === "name" && folders === "folders" && requests === "requests") {
+          if (
+            name === "name" &&
+            folders === "folders" &&
+            requests === "requests"
+          ) {
             // Do nothing
           }
-        } else if (collections.info && collections.info.schema.includes("v2.1.0")) {
+        } else if (
+          collections.info &&
+          collections.info.schema.includes("v2.1.0")
+        ) {
           collections = [this.parsePostmanCollection(collections)]
         } else {
           this.failedImport()
         }
-        if (this.collectionsType.type == "team-collections") {
+        if (this.collectionsType.type === "team-collections") {
-          team_utils
+          teamUtils
-            .replaceWithJSON(this.$apollo, collections, this.collectionsType.selectedTeam.id)
+            .replaceWithJSON(
+              this.$apollo,
+              collections,
+              this.collectionsType.selectedTeam.id
+            )
             .then((status) => {
               if (status) {
                 this.fileImported()
@@ -299,26 +342,39 @@ export default {
       this.$refs.inputChooseFileToReplaceWith.value = ""
     },
     importFromJSON() {
-      let reader = new FileReader()
+      const reader = new FileReader()
       reader.onload = ({ target }) => {
-        let content = target.result
+        const content = target.result
         let collections = JSON.parse(content)
         if (collections[0]) {
-          let [name, folders, requests] = Object.keys(collections[0])
+          const [name, folders, requests] = Object.keys(collections[0])
-          if (name === "name" && folders === "folders" && requests === "requests") {
+          if (
+            name === "name" &&
+            folders === "folders" &&
+            requests === "requests"
+          ) {
             // Do nothing
           }
-        } else if (collections.info && collections.info.schema.includes("v2.1.0")) {
+        } else if (
-          //replace the variables, postman uses {{var}}, Hoppscotch uses <<var>>
+          collections.info &&
-          collections = JSON.parse(content.replaceAll(/{{([a-z]+)}}/gi, "<<$1>>"))
+          collections.info.schema.includes("v2.1.0")
+        ) {
+          // replace the variables, postman uses {{var}}, Hoppscotch uses <<var>>
+          collections = JSON.parse(
+            content.replaceAll(/{{([a-z]+)}}/gi, "<<$1>>")
+          )
           collections = [this.parsePostmanCollection(collections)]
         } else {
           this.failedImport()
           return
         }
-        if (this.collectionsType.type == "team-collections") {
+        if (this.collectionsType.type === "team-collections") {
-          team_utils
+          teamUtils
-            .importFromJSON(this.$apollo, collections, this.collectionsType.selectedTeam.id)
+            .importFromJSON(
+              this.$apollo,
+              collections,
+              this.collectionsType.selectedTeam.id
+            )
             .then((status) => {
               if (status) {
                 this.$emit("update-team-collections")
@@ -332,7 +388,10 @@ export default {
               this.failedImport()
             })
         } else {
-          this.$store.commit("postwoman/importCollections", { data: collections, flag: "rest" })
+          this.$store.commit("postwoman/importCollections", {
+            data: collections,
+            flag: "rest",
+          })
           this.syncToFBCollections()
           this.fileImported()
         }
@@ -341,7 +400,7 @@ export default {
       this.$refs.inputChooseFileToImportFrom.value = ""
     },
     importFromMyCollections() {
-      team_utils
+      teamUtils
         .importFromMyCollections(
           this.$apollo,
           this.mySelectedCollectionID,
@@ -361,10 +420,14 @@ export default {
         })
     },
     async getJSONCollection() {
-      if (this.collectionsType.type == "my-collections") {
+      if (this.collectionsType.type === "my-collections") {
-        this.collectionJson = JSON.stringify(this.$store.state.postwoman.collections, null, 2)
+        this.collectionJson = JSON.stringify(
+          this.$store.state.postwoman.collections,
+          null,
+          2
+        )
       } else {
-        this.collectionJson = await team_utils.exportAsJSON(
+        this.collectionJson = await teamUtils.exportAsJSON(
           this.$apollo,
           this.collectionsType.selectedTeam.id
         )
@@ -374,10 +437,10 @@ export default {
     exportJSON() {
       let text = this.collectionJson
       text = text.replace(/\n/g, "\r\n")
-      let blob = new Blob([text], {
+      const blob = new Blob([text], {
         type: "text/json",
       })
-      let anchor = document.createElement("a")
+      const anchor = document.createElement("a")
       anchor.download = "hoppscotch-collection.json"
       anchor.href = window.URL.createObjectURL(blob)
       anchor.target = "_blank"
@@ -415,7 +478,7 @@ export default {
       })
     },
     parsePostmanCollection({ info, name, item }) {
-      let postwomanCollection = {
+      const postwomanCollection = {
         name: "",
         folders: [],
         requests: [],
@@ -424,26 +487,39 @@ export default {
       postwomanCollection.name = info ? info.name : name
 
       if (item && item.length > 0) {
-        for (let collectionItem of item) {
+        for (const collectionItem of item) {
           if (collectionItem.request) {
-            if (postwomanCollection.hasOwnProperty("folders")) {
+            if (
+              Object.prototype.hasOwnProperty.call(
+                postwomanCollection,
+                "folders"
+              )
+            ) {
               postwomanCollection.name = info ? info.name : name
-              postwomanCollection.requests.push(this.parsePostmanRequest(collectionItem))
+              postwomanCollection.requests.push(
+                this.parsePostmanRequest(collectionItem)
+              )
             } else {
-              postwomanCollection.name = name ? name : ""
+              postwomanCollection.name = name || ""
-              postwomanCollection.requests.push(this.parsePostmanRequest(collectionItem))
+              postwomanCollection.requests.push(
+                this.parsePostmanRequest(collectionItem)
+              )
             }
           } else if (this.hasFolder(collectionItem)) {
-            postwomanCollection.folders.push(this.parsePostmanCollection(collectionItem))
+            postwomanCollection.folders.push(
+              this.parsePostmanCollection(collectionItem)
+            )
           } else {
-            postwomanCollection.requests.push(this.parsePostmanRequest(collectionItem))
+            postwomanCollection.requests.push(
+              this.parsePostmanRequest(collectionItem)
+            )
           }
         }
       }
       return postwomanCollection
     },
     parsePostmanRequest({ name, request }) {
-      let pwRequest = {
+      const pwRequest = {
         url: "",
         path: "",
         method: "",
@@ -464,21 +540,27 @@ export default {
 
       pwRequest.name = name
       if (request.url) {
-        let requestObjectUrl = request.url.raw.match(/^(.+:\/\/[^\/]+|{[^\/]+})(\/[^\?]+|).*$/)
+        const requestObjectUrl = request.url.raw.match(
+          /^(.+:\/\/[^/]+|{[^/]+})(\/[^?]+|).*$/
+        )
         if (requestObjectUrl) {
           pwRequest.url = requestObjectUrl[1]
           pwRequest.path = requestObjectUrl[2] ? requestObjectUrl[2] : ""
         }
       }
       pwRequest.method = request.method
-      let itemAuth = request.auth ? request.auth : ""
+      const itemAuth = request.auth ? request.auth : ""
-      let authType = itemAuth ? itemAuth.type : ""
+      const authType = itemAuth ? itemAuth.type : ""
       if (authType === "basic") {
         pwRequest.auth = "Basic Auth"
         pwRequest.httpUser =
-          itemAuth.basic[0].key === "username" ? itemAuth.basic[0].value : itemAuth.basic[1].value
+          itemAuth.basic[0].key === "username"
+            ? itemAuth.basic[0].value
+            : itemAuth.basic[1].value
         pwRequest.httpPassword =
-          itemAuth.basic[0].key === "password" ? itemAuth.basic[0].value : itemAuth.basic[1].value
+          itemAuth.basic[0].key === "password"
+            ? itemAuth.basic[0].value
+            : itemAuth.basic[1].value
       } else if (authType === "oauth2") {
         pwRequest.auth = "OAuth 2.0"
         pwRequest.bearerToken =
@@ -489,28 +571,28 @@ export default {
         pwRequest.auth = "Bearer Token"
         pwRequest.bearerToken = itemAuth.bearer[0].value
       }
-      let requestObjectHeaders = request.header
+      const requestObjectHeaders = request.header
       if (requestObjectHeaders) {
         pwRequest.headers = requestObjectHeaders
-        for (let header of pwRequest.headers) {
+        for (const header of pwRequest.headers) {
           delete header.name
           delete header.type
         }
       }
       if (request.url) {
-        let requestObjectParams = request.url.query
+        const requestObjectParams = request.url.query
         if (requestObjectParams) {
           pwRequest.params = requestObjectParams
-          for (let param of pwRequest.params) {
+          for (const param of pwRequest.params) {
             delete param.disabled
           }
         }
       }
       if (request.body) {
         if (request.body.mode === "urlencoded") {
-          let params = request.body.urlencoded
+          const params = request.body.urlencoded
-          pwRequest.bodyParams = params ? params : []
+          pwRequest.bodyParams = params || []
-          for (let param of pwRequest.bodyParams) {
+          for (const param of pwRequest.bodyParams) {
             delete param.type
           }
         } else if (request.body.mode === "raw") {
@@ -521,7 +603,7 @@ export default {
       return pwRequest
     },
     hasFolder(item) {
-      return item.hasOwnProperty("item")
+      return Object.prototype.hasOwnProperty.call(item, "item")
     },
   },
 }

components/collections/graphql/Add.vue

@@ -13,9 +13,9 @@
     <div slot="body" class="flex flex-col">
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
-        type="text"
         id="selectLabel"
         v-model="name"
+        type="text"
         :placeholder="$t('my_new_collection')"
         @keyup.enter="addNewCollection"
       />
@@ -53,7 +53,9 @@ 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"
           )
         }

components/collections/graphql/AddFolder.vue

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="show = false">
+  <SmartModal v-if="show" @close="$emit('hide-modal')">
     <div slot="header">
       <div class="row-wrapper">
         <h3 class="title">{{ $t("new_folder") }}</h3>
@@ -13,9 +13,9 @@
     <div slot="body" class="flex flex-col">
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
-        type="text"
         id="selectLabel"
         v-model="name"
+        type="text"
         :placeholder="$t('my_new_folder')"
         @keyup.enter="addFolder"
       />
@@ -40,9 +40,9 @@
 export default {
   props: {
     show: Boolean,
-    folder: Object,
+    folder: { type: Object, default: () => {} },
-    folderPath: String,
+    folderPath: { type: String, default: null },
-    collectionIndex: Number,
+    collectionIndex: { type: Number, default: null },
   },
   data() {
     return {

components/collections/graphql/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,43 +13,60 @@
       @dragend="dragging = false"
     >
       <button class="icon" @click="toggleShowChildren">
-        <i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
+        <i v-show="!showChildren && !isFiltered" class="material-icons"
-        <i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
+          >arrow_right</i
+        >
+        <i v-show="showChildren || isFiltered" class="material-icons"
+          >arrow_drop_down</i
+        >
         <i class="material-icons">folder</i>
         <span>{{ collection.name }}</span>
       </button>
       <div>
         <button
           v-if="doc"
+          v-tooltip.left="$t('import')"
           class="icon"
           @click="$emit('select-collection')"
-          v-tooltip.left="$t('import')"
         >
           <i class="material-icons">topic</i>
         </button>
         <v-popover>
-          <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>
@@ -68,7 +88,7 @@
             :folder-path="`${collectionIndex}/${index}`"
             :collection-index="collectionIndex"
             :doc="doc"
-            :isFiltered="isFiltered"
+            :is-filtered="isFiltered"
             @add-folder="$emit('add-folder', $event)"
             @edit-folder="$emit('edit-folder', $event)"
             @edit-request="$emit('edit-request', $event)"
@@ -94,11 +114,14 @@
       </ul>
       <ul>
         <li
-          v-if="collection.folders.length === 0 && collection.requests.length === 0"
+          v-if="
+            collection.folders.length === 0 && 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>
@@ -117,8 +140,8 @@ import { fb } from "~/helpers/fb"
 
 export default {
   props: {
-    collectionIndex: Number,
+    collectionIndex: { type: Number, default: null },
-    collection: Object,
+    collection: { type: Object, default: () => {} },
     doc: Boolean,
     isFiltered: Boolean,
   },
@@ -135,7 +158,9 @@ 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"
           )
         }

components/collections/graphql/Edit.vue

@@ -13,9 +13,9 @@
     <div slot="body" class="flex flex-col">
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
-        type="text"
         id="selectLabel"
         v-model="name"
+        type="text"
         :placeholder="editingCollection.name"
         @keyup.enter="saveCollection"
       />
@@ -42,8 +42,8 @@ import { fb } from "~/helpers/fb"
 export default {
   props: {
     show: Boolean,
-    editingCollection: Object,
+    editingCollection: { type: Object, default: () => {} },
-    editingCollectionIndex: Number,
+    editingCollectionIndex: { type: Number, default: null },
   },
   data() {
     return {
@@ -55,7 +55,9 @@ 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"
           )
         }

components/collections/graphql/EditFolder.vue

@@ -1,5 +1,5 @@
 <template>
-  <SmartModal v-if="show" @close="show = false">
+  <SmartModal v-if="show" @close="$emit('hide-modal')">
     <div slot="header">
       <div class="row-wrapper">
         <h3 class="title">{{ $t("edit_folder") }}</h3>
@@ -13,9 +13,9 @@
     <div slot="body" class="flex flex-col">
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
-        type="text"
         id="selectLabel"
         v-model="name"
+        type="text"
         :placeholder="folder.name"
         @keyup.enter="editFolder"
       />
@@ -42,9 +42,9 @@ import { fb } from "~/helpers/fb"
 export default {
   props: {
     show: Boolean,
-    collectionIndex: Number,
+    collectionIndex: { type: Number, default: null },
-    folder: Object,
+    folder: { type: Object, default: () => {} },
-    folderIndex: Number,
+    folderIndex: { type: Number, default: null },
   },
   data() {
     return {
@@ -56,7 +56,9 @@ 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"
           )
         }

components/collections/graphql/EditRequest.vue

@@ -13,11 +13,11 @@
     <div slot="body" class="flex flex-col">
       <label for="selectLabel">{{ $t("label") }}</label>
       <input
-        type="text"
         id="selectLabel"
         v-model="requestUpdateData.name"
-        @keyup.enter="saveRequest"
+        type="text"
         :placeholder="request.name"
+        @keyup.enter="saveRequest"
       />
     </div>
     <div slot="footer">
@@ -42,11 +42,11 @@ import { fb } from "~/helpers/fb"
 export default {
   props: {
     show: Boolean,
-    collectionIndex: Number,
+    collectionIndex: { type: Number, default: null },
-    folderIndex: Number,
+    folderIndex: { type: Number, default: null },
-    folderName: String,
+    folderName: { type: String, default: null },
-    request: Object,
+    request: { type: Object, default: () => {} },
-    requestIndex: Number,
+    requestIndex: { type: Number, default: null },
   },
   data() {
     return {
@@ -60,7 +60,9 @@ 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"
           )
         }

components/collections/graphql/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,22 +14,26 @@
     >
       <div>
         <button class="icon" @click="toggleShowChildren">
-          <i class="material-icons" v-show="!showChildren && !isFiltered">arrow_right</i>
+          <i v-show="!showChildren && !isFiltered" class="material-icons"
-          <i class="material-icons" v-show="showChildren || isFiltered">arrow_drop_down</i>
+            >arrow_right</i
+          >
+          <i v-show="showChildren || isFiltered" class="material-icons"
+            >arrow_drop_down</i
+          >
           <i class="material-icons">folder_open</i>
           <span>{{ folder.name }}</span>
         </button>
       </div>
       <v-popover>
-        <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>
@@ -34,16 +41,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>
@@ -61,9 +70,10 @@
           <CollectionsGraphqlFolder
             :folder="subFolder"
             :folder-index="subFolderIndex"
+            :folder-path="`${folderPath}/${subFolderIndex}`"
             :collection-index="collectionIndex"
             :doc="doc"
-            :folder-path="`${folderPath}/${subFolderIndex}`"
+            :is-filtered="isFiltered"
             @add-folder="$emit('add-folder', $event)"
             @edit-folder="$emit('edit-folder', $event)"
             @edit-request="$emit('edit-request', $event)"
@@ -96,7 +106,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>
@@ -113,12 +126,12 @@
 import { fb } from "~/helpers/fb"
 
 export default {
-  name: "folder",
+  name: "Folder",
   props: {
-    folder: Object,
+    folder: { type: Object, default: () => {} },
-    folderIndex: Number,
+    folderIndex: { type: Number, default: null },
-    collectionIndex: Number,
+    collectionIndex: { type: Number, default: null },
-    folderPath: String,
+    folderPath: { type: String, default: null },
     doc: Boolean,
     isFiltered: Boolean,
   },
@@ -134,7 +147,9 @@ 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"
           )
         }

components/collections/graphql/ImportExport.vue

@@ -5,12 +5,16 @@
         <h3 class="title">{{ $t("import_export") }} {{ $t("collections") }}</h3>
         <div>
           <v-popover>
-            <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="readCollectionGist" v-close-popover>
+                <button
+                  v-close-popover
+                  class="icon"
+                  @click="readCollectionGist"
+                >
                   <i class="material-icons">assignment_returned</i>
                   <span>{{ $t("import_from_gist") }}</span>
                 </button>
@@ -25,12 +29,16 @@
                 }"
               >
                 <button
+                  v-close-popover
                   :disabled="
-                    !fb.currentUser ? true : fb.currentUser.provider !== 'github.com' ? true : false
+                    !fb.currentUser
+                      ? true
+                      : fb.currentUser.provider !== 'github.com'
+                      ? true
+                      : false
                   "
                   class="icon"
                   @click="createCollectionGist"
-                  v-close-popover
                 >
                   <i class="material-icons">assignment_turned_in</i>
                   <span>{{ $t("create_secret_gist") }}</span>
@@ -48,42 +56,48 @@
       <div class="flex flex-col items-start p-2">
         <span
           v-tooltip="{
-            content: !fb.currentUser ? $t('login_first') : $t('replace_current'),
+            content: !fb.currentUser
+              ? $t('login_first')
+              : $t('replace_current'),
           }"
         >
-          <button :disabled="!fb.currentUser" class="icon" @click="syncCollections">
+          <button
+            :disabled="!fb.currentUser"
+            class="icon"
+            @click="syncCollections"
+          >
             <i class="material-icons">folder_shared</i>
             <span>{{ $t("import_from_sync") }}</span>
           </button>
         </span>
         <button
+          v-tooltip="$t('replace_current')"
           class="icon"
           @click="openDialogChooseFileToReplaceWith"
-          v-tooltip="$t('replace_current')"
         >
           <i class="material-icons">create_new_folder</i>
           <span>{{ $t("replace_json") }}</span>
           <input
-            type="file"
-            @change="replaceWithJSON"
-            style="display: none"
             ref="inputChooseFileToReplaceWith"
+            type="file"
+            style="display: none"
             accept="application/json"
+            @change="replaceWithJSON"
           />
         </button>
         <button
+          v-tooltip="$t('preserve_current')"
           class="icon"
           @click="openDialogChooseFileToImportFrom"
-          v-tooltip="$t('preserve_current')"
         >
           <i class="material-icons">folder_special</i>
           <span>{{ $t("import_json") }}</span>
           <input
-            type="file"
-            @change="importFromJSON"
-            style="display: none"
             ref="inputChooseFileToImportFrom"
+            type="file"
+            style="display: none"
             accept="application/json"
+            @change="importFromJSON"
           />
         </button>
       </div>
@@ -102,7 +116,11 @@
           <button class="icon" @click="hideModal">
             {{ $t("cancel") }}
           </button>
-          <button class="icon primary" @click="exportJSON" v-tooltip="$t('download_file')">
+          <button
+            v-tooltip="$t('download_file')"
+            class="icon primary"
+            @click="exportJSON"
+          >
             {{ $t("export") }}
           </button>
         </span>
@@ -115,18 +133,22 @@
 import { fb } from "~/helpers/fb"
 
 export default {
+  props: {
+    show: Boolean,
+  },
   data() {
     return {
       fb,
       showJsonCode: false,
     }
   },
-  props: {
-    show: Boolean,
-  },
   computed: {
     collectionJson() {
-      return JSON.stringify(this.$store.state.postwoman.collectionsGraphql, null, 2)
+      return JSON.stringify(
+        this.$store.state.postwoman.collectionsGraphql,
+        null,
+        2
+      )
     },
   },
   methods: {
@@ -148,11 +170,11 @@ export default {
             },
           }
         )
-        .then(({ html_url }) => {
+        .then((res) => {
           this.$toast.success(this.$t("gist_created"), {
             icon: "done",
           })
-          window.open(html_url)
+          window.open(res.html_url)
         })
         .catch((error) => {
           this.$toast.error(this.$t("something_went_wrong"), {
@@ -162,7 +184,7 @@ export default {
         })
     },
     async readCollectionGist() {
-      let gist = prompt(this.$t("enter_gist_url"))
+      const gist = prompt(this.$t("enter_gist_url"))
       if (!gist) return
       await this.$axios
         .$get(`https://api.github.com/gists/${gist.split("/").pop()}`, {
@@ -171,8 +193,11 @@ export default {
           },
         })
         .then(({ files }) => {
-          let collections = JSON.parse(Object.values(files)[0].content)
+          const collections = JSON.parse(Object.values(files)[0].content)
-          this.$store.commit("postwoman/replaceCollections", { data: collections, flag: "graphql" })
+          this.$store.commit("postwoman/replaceCollections", {
+            data: collections,
+            flag: "graphql",
+          })
           this.fileImported()
           this.syncToFBCollections()
         })
@@ -191,22 +216,32 @@ export default {
       this.$refs.inputChooseFileToImportFrom.click()
     },
     replaceWithJSON() {
-      let reader = new FileReader()
+      const reader = new FileReader()
       reader.onload = ({ target }) => {
-        let content = target.result
+        const content = target.result
         let collections = JSON.parse(content)
         if (collections[0]) {
-          let [name, folders, requests] = Object.keys(collections[0])
+          const [name, folders, requests] = Object.keys(collections[0])
-          if (name === "name" && folders === "folders" && requests === "requests") {
+          if (
+            name === "name" &&
+            folders === "folders" &&
+            requests === "requests"
+          ) {
             // Do nothing
           }
-        } else if (collections.info && collections.info.schema.includes("v2.1.0")) {
+        } else if (
+          collections.info &&
+          collections.info.schema.includes("v2.1.0")
+        ) {
           collections = [this.parsePostmanCollection(collections)]
         } else {
           this.failedImport()
           return
         }
-        this.$store.commit("postwoman/replaceCollections", { data: collections, flag: "graphql" })
+        this.$store.commit("postwoman/replaceCollections", {
+          data: collections,
+          flag: "graphql",
+        })
         this.fileImported()
         this.syncToFBCollections()
       }
@@ -214,24 +249,36 @@ export default {
       this.$refs.inputChooseFileToReplaceWith.value = ""
     },
     importFromJSON() {
-      let reader = new FileReader()
+      const reader = new FileReader()
       reader.onload = ({ target }) => {
-        let content = target.result
+        const content = target.result
         let collections = JSON.parse(content)
         if (collections[0]) {
-          let [name, folders, requests] = Object.keys(collections[0])
+          const [name, folders, requests] = Object.keys(collections[0])
-          if (name === "name" && folders === "folders" && requests === "requests") {
+          if (
+            name === "name" &&
+            folders === "folders" &&
+            requests === "requests"
+          ) {
             // Do nothing
           }
-        } else if (collections.info && collections.info.schema.includes("v2.1.0")) {
+        } else if (
-          //replace the variables, postman uses {{var}}, Hoppscotch uses <<var>>
+          collections.info &&
-          collections = JSON.parse(content.replaceAll(/{{([a-z]+)}}/gi, "<<$1>>"))
+          collections.info.schema.includes("v2.1.0")
+        ) {
+          // replace the variables, postman uses {{var}}, Hoppscotch uses <<var>>
+          collections = JSON.parse(
+            content.replaceAll(/{{([a-z]+)}}/gi, "<<$1>>")
+          )
           collections = [this.parsePostmanCollection(collections)]
         } else {
           this.failedImport()
           return
         }
-        this.$store.commit("postwoman/importCollections", { data: collections, flag: "graphql" })
+        this.$store.commit("postwoman/importCollections", {
+          data: collections,
+          flag: "graphql",
+        })
         this.fileImported()
         this.syncToFBCollections()
       }
@@ -241,10 +288,10 @@ export default {
     exportJSON() {
       let text = this.collectionJson
       text = text.replace(/\n/g, "\r\n")
-      let blob = new Blob([text], {
+      const blob = new Blob([text], {
         type: "text/json",
       })
-      let anchor = document.createElement("a")
+      const anchor = document.createElement("a")
       anchor.download = "hoppscotch-collection.json"
       anchor.href = window.URL.createObjectURL(blob)
       anchor.target = "_blank"
@@ -267,7 +314,9 @@ 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"
           )
         }
@@ -284,7 +333,7 @@ export default {
       })
     },
     parsePostmanCollection({ info, name, item }) {
-      let postwomanCollection = {
+      const postwomanCollection = {
         name: "",
         folders: [],
         requests: [],
@@ -293,26 +342,39 @@ export default {
       postwomanCollection.name = info ? info.name : name
 
       if (item && item.length > 0) {
-        for (let collectionItem of item) {
+        for (const collectionItem of item) {
           if (collectionItem.request) {
-            if (postwomanCollection.hasOwnProperty("folders")) {
+            if (
+              Object.prototype.hasOwnProperty.call(
+                postwomanCollection,
+                "folders"
+              )
+            ) {
               postwomanCollection.name = info ? info.name : name
-              postwomanCollection.requests.push(this.parsePostmanRequest(collectionItem))
+              postwomanCollection.requests.push(
+                this.parsePostmanRequest(collectionItem)
+              )
             } else {
-              postwomanCollection.name = name ? name : ""
+              postwomanCollection.name = name || ""
-              postwomanCollection.requests.push(this.parsePostmanRequest(collectionItem))
+              postwomanCollection.requests.push(
+                this.parsePostmanRequest(collectionItem)
+              )
             }
           } else if (this.hasFolder(collectionItem)) {
-            postwomanCollection.folders.push(this.parsePostmanCollection(collectionItem))
+            postwomanCollection.folders.push(
+              this.parsePostmanCollection(collectionItem)
+            )
           } else {
-            postwomanCollection.requests.push(this.parsePostmanRequest(collectionItem))
+            postwomanCollection.requests.push(
+              this.parsePostmanRequest(collectionItem)
+            )
           }
         }
       }
       return postwomanCollection
     },
     parsePostmanRequest({ name, request }) {
-      let pwRequest = {
+      const pwRequest = {
         url: "",
         path: "",
         method: "",
@@ -332,20 +394,26 @@ export default {
       }
 
       pwRequest.name = name
-      let requestObjectUrl = request.url.raw.match(/^(.+:\/\/[^\/]+|{[^\/]+})(\/[^\?]+|).*$/)
+      const requestObjectUrl = request.url.raw.match(
+        /^(.+:\/\/[^/]+|{[^/]+})(\/[^?]+|).*$/
+      )
       if (requestObjectUrl) {
         pwRequest.url = requestObjectUrl[1]
         pwRequest.path = requestObjectUrl[2] ? requestObjectUrl[2] : ""
       }
       pwRequest.method = request.method
-      let itemAuth = request.auth ? request.auth : ""
+      const itemAuth = request.auth ? request.auth : ""
-      let authType = itemAuth ? itemAuth.type : ""
+      const authType = itemAuth ? itemAuth.type : ""
       if (authType === "basic") {
         pwRequest.auth = "Basic Auth"
         pwRequest.httpUser =
-          itemAuth.basic[0].key === "username" ? itemAuth.basic[0].value : itemAuth.basic[1].value
+          itemAuth.basic[0].key === "username"
+            ? itemAuth.basic[0].value
+            : itemAuth.basic[1].value
         pwRequest.httpPassword =
-          itemAuth.basic[0].key === "password" ? itemAuth.basic[0].value : itemAuth.basic[1].value
+          itemAuth.basic[0].key === "password"
+            ? itemAuth.basic[0].value
+            : itemAuth.basic[1].value
       } else if (authType === "oauth2") {
         pwRequest.auth = "OAuth 2.0"
         pwRequest.bearerToken =
@@ -356,26 +424,26 @@ export default {
         pwRequest.auth = "Bearer Token"
         pwRequest.bearerToken = itemAuth.bearer[0].value
       }
-      let requestObjectHeaders = request.header
+      const requestObjectHeaders = request.header
       if (requestObjectHeaders) {
         pwRequest.headers = requestObjectHeaders
-        for (let header of pwRequest.headers) {
+        for (const header of pwRequest.headers) {
           delete header.name
           delete header.type
         }
       }
-      let requestObjectParams = request.url.query
+      const requestObjectParams = request.url.query
       if (requestObjectParams) {
         pwRequest.params = requestObjectParams
-        for (let param of pwRequest.params) {
+        for (const param of pwRequest.params) {
           delete param.disabled
         }
       }
       if (request.body) {
         if (request.body.mode === "urlencoded") {
-          let params = request.body.urlencoded
+          const params = request.body.urlencoded
-          pwRequest.bodyParams = params ? params : []
+          pwRequest.bodyParams = params || []
-          for (let param of pwRequest.bodyParams) {
+          for (const param of pwRequest.bodyParams) {
             delete param.type
           }
         } else if (request.body.mode === "raw") {
@@ -386,7 +454,7 @@ export default {
       return pwRequest
     },
     hasFolder(item) {
-      return item.hasOwnProperty("item")
+      return Object.prototype.hasOwnProperty.call(item, "item")
     },
   },
 }

components/collections/graphql/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,20 +13,22 @@
     >
       <div>
         <button
+          v-tooltip="!doc ? $t('use_request') : ''"
           class="icon"
           @click="!doc ? selectRequest() : {}"
-          v-tooltip="!doc ? $t('use_request') : ''"
         >
+          <i class="material-icons">description</i>
           <span>{{ request.name }}</span>
         </button>
       </div>
       <v-popover>
-        <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', {
@@ -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>
@@ -63,11 +67,11 @@ import { fb } from "~/helpers/fb"
 
 export default {
   props: {
-    request: Object,
+    request: { type: Object, default: () => {} },
-    collectionIndex: Number,
+    collectionIndex: { type: Number, default: null },
-    folderIndex: Number,
+    folderIndex: { type: Number, default: null },
-    folderName: String,
+    folderName: { type: String, default: null },
-    requestIndex: Number,
+    requestIndex: { type: Number, default: null },
     doc: Boolean,
   },
   data() {
@@ -81,14 +85,18 @@ 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"
           )
         }
       }
     },
     selectRequest() {
-      this.$store.commit("postwoman/selectGraphqlRequest", { request: this.request })
+      this.$store.commit("postwoman/selectGraphqlRequest", {
+        request: this.request,
+      })
     },
     dragStart({ dataTransfer }) {
       this.dragging = !this.dragging

components/collections/graphql/SaveRequest.vue

@@ -12,17 +12,33 @@
     </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"
+      />
       <ul>
         <li>
           <label for="selectCollection">{{ $t("collection") }}</label>
           <span class="select-wrapper">
-            <select type="text" id="selectCollection" v-model="requestData.collectionIndex">
+            <select
-              <option :key="undefined" :value="undefined" hidden disabled selected>
+              id="selectCollection"
+              v-model="requestData.collectionIndex"
+              type="text"
+            >
+              <option
+                :key="undefined"
+                :value="undefined"
+                hidden
+                disabled
+                selected
+              >
                 {{ $t("select_collection") }}
               </option>
               <option
-                v-for="(collection, index) in $store.state.postwoman.collectionsGraphql"
+                v-for="(collection, index) in $store.state.postwoman
+                  .collectionsGraphql"
                 :key="index"
                 :value="index"
               >
@@ -34,18 +50,26 @@
       </ul>
       <label>{{ $t("folder") }}</label>
       <SmartAutoComplete
+        v-model="requestData.folderName"
         :placeholder="$t('search')"
         :source="folders"
         :spellcheck="false"
-        v-model="requestData.folderName"
       />
       <ul>
         <li>
           <label for="selectRequest">{{ $t("request") }}</label>
           <span class="select-wrapper">
-            <select type="text" id="selectRequest" v-model="requestData.requestIndex">
+            <select
+              id="selectRequest"
+              v-model="requestData.requestIndex"
+              type="text"
+            >
               <option :key="undefined" :value="undefined">/</option>
-              <option v-for="(folder, index) in requests" :key="index" :value="index">
+              <option
+                v-for="(folder, index) in requests"
+                :key="index"
+                :value="index"
+              >
                 {{ folder.name }}
               </option>
             </select>
@@ -75,7 +99,7 @@ import { fb } from "~/helpers/fb"
 export default {
   props: {
     show: Boolean,
-    editingRequest: Object,
+    editingRequest: { type: Object, default: () => {} },
   },
   data() {
     return {
@@ -88,20 +112,6 @@ 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
-    },
-  },
   computed: {
     folders() {
       const collections = this.$store.state.postwoman.collectionsGraphql
@@ -124,7 +134,8 @@ export default {
         return []
       }
 
-      const userSelectedAnyFolder = folderName !== undefined && folderName !== ""
+      const userSelectedAnyFolder =
+        folderName !== undefined && folderName !== ""
 
       if (userSelectedAnyFolder) {
         const collection = collections[collectionIndex]
@@ -142,19 +153,36 @@ 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: {
     syncCollections() {
       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"
           )
         }
       }
     },
     saveRequestAs() {
-      const userDidntSpecifyCollection = this.$data.requestData.collectionIndex === undefined
+      const userDidntSpecifyCollection =
+        this.$data.requestData.collectionIndex === undefined
       if (userDidntSpecifyCollection) {
         this.$toast.error(this.$t("select_collection"), {
           icon: "error",

components/graphql/__tests__/Field.spec.js

@@ -1,5 +1,5 @@
-import field from "../Field"
 import { shallowMount } from "@vue/test-utils"
+import field from "../Field"
 
 const gqlField = {
   name: "testField",

components/graphql/__tests__/Type.spec.js

@@ -1,7 +1,11 @@
-import type from "../Type"
-
 import { shallowMount } from "@vue/test-utils"
-import {GraphQLEnumType, GraphQLInputObjectType, GraphQLInterfaceType, GraphQLObjectType} from "graphql"
+import {
+  GraphQLEnumType,
+  GraphQLInputObjectType,
+  GraphQLInterfaceType,
+  GraphQLObjectType,
+} from "graphql"
+import type from "../Type"
 
 const gqlType = {
   name: "TestType",
@@ -77,11 +81,11 @@ describe("type", () => {
   test("prepends 'input' to type name for Input Types", () => {
     const testType = new GraphQLInputObjectType({
       name: "TestType",
-      fields: {}
+      fields: {},
     })
 
     const wrapper = factory({
-      gqlType: testType 
+      gqlType: testType,
     })
 
     expect(wrapper.find(".type-title").text().startsWith("input")).toEqual(true)
@@ -90,24 +94,26 @@ describe("type", () => {
   test("prepends 'interface' to type name for Interface Types", () => {
     const testType = new GraphQLInterfaceType({
       name: "TestType",
-      fields: {}
+      fields: {},
     })
 
     const wrapper = factory({
-      gqlType: testType
+      gqlType: testType,
     })
 
-    expect(wrapper.find(".type-title").text().startsWith("interface")).toEqual(true)
+    expect(wrapper.find(".type-title").text().startsWith("interface")).toEqual(
+      true
+    )
   })
 
   test("prepends 'enum' to type name for Enum Types", () => {
     const testType = new GraphQLEnumType({
       name: "TestType",
-      values: {}
+      values: {},
     })
 
     const wrapper = factory({
-      gqlType: testType
+      gqlType: testType,
     })
 
     expect(wrapper.find(".type-title").text().startsWith("enum")).toEqual(true)
@@ -116,34 +122,36 @@ describe("type", () => {
   test("'interfaces' computed property returns all the related interfaces", () => {
     const testInterfaceA = new GraphQLInterfaceType({
       name: "TestInterfaceA",
-      fields: {}
+      fields: {},
     })
     const testInterfaceB = new GraphQLInterfaceType({
       name: "TestInterfaceB",
-      fields: {}
+      fields: {},
     })
 
     const type = new GraphQLObjectType({
       name: "TestType",
       interfaces: [testInterfaceA, testInterfaceB],
-      fields: {}
+      fields: {},
     })
 
     const wrapper = factory({
-      gqlType: type
+      gqlType: type,
     })
 
-    expect(wrapper.vm.interfaces).toEqual(expect.arrayContaining([testInterfaceA, testInterfaceB]))
+    expect(wrapper.vm.interfaces).toEqual(
+      expect.arrayContaining([testInterfaceA, testInterfaceB])
+    )
   })
 
   test("'interfaces' computed property returns an empty array if there are no interfaces", () => {
     const type = new GraphQLObjectType({
       name: "TestType",
-      fields: {}
+      fields: {},
     })
 
     const wrapper = factory({
-      gqlType: type
+      gqlType: type,
     })
 
     expect(wrapper.vm.interfaces).toEqual([])
@@ -152,11 +160,11 @@ describe("type", () => {
   test("'interfaces' computed property returns an empty array if the type is an enum", () => {
     const type = new GraphQLEnumType({
       name: "TestType",
-      values: {}
+      values: {},
     })
 
     const wrapper = factory({
-      gqlType: type
+      gqlType: type,
     })
 
     expect(wrapper.vm.interfaces).toEqual([])
@@ -165,24 +173,24 @@ describe("type", () => {
   test("'children' computed property returns all the types implementing an interface", () => {
     const testInterface = new GraphQLInterfaceType({
       name: "TestInterface",
-      fields: {}
+      fields: {},
     })
 
     const typeA = new GraphQLObjectType({
       name: "TypeA",
       interfaces: [testInterface],
-      fields: {}
+      fields: {},
     })
 
     const typeB = new GraphQLObjectType({
       name: "TypeB",
       interfaces: [testInterface],
-      fields: {}
+      fields: {},
     })
 
     const wrapper = factory({
       gqlType: testInterface,
-      gqlTypes: [testInterface, typeA, typeB]
+      gqlTypes: [testInterface, typeA, typeB],
     })
 
     expect(wrapper.vm.children).toEqual(expect.arrayContaining([typeA, typeB]))
@@ -191,22 +199,22 @@ describe("type", () => {
   test("'children' computed property returns an empty array if there are no types implementing the interface", () => {
     const testInterface = new GraphQLInterfaceType({
       name: "TestInterface",
-      fields: {}
+      fields: {},
     })
 
     const typeA = new GraphQLObjectType({
       name: "TypeA",
-      fields: {}
+      fields: {},
     })
 
     const typeB = new GraphQLObjectType({
       name: "TypeB",
-      fields: {}
+      fields: {},
     })
 
     const wrapper = factory({
       gqlType: testInterface,
-      gqlTypes: [testInterface, typeA, typeB]
+      gqlTypes: [testInterface, typeA, typeB],
     })
 
     expect(wrapper.vm.children).toEqual([])
@@ -215,20 +223,19 @@ describe("type", () => {
   test("'children' computed property returns an empty array if the type is an enum", () => {
     const testInterface = new GraphQLInterfaceType({
       name: "TestInterface",
-      fields: {}
+      fields: {},
     })
 
     const testType = new GraphQLEnumType({
       name: "TestEnum",
-      values: {}
+      values: {},
     })
 
     const wrapper = factory({
       gqlType: testType,
-      gqlTypes: [testInterface, testType]
+      gqlTypes: [testInterface, testType],
     })
 
     expect(wrapper.vm.children).toEqual([])
   })
-
 })

components/graphql/__tests__/TypeLink.spec.js

@@ -1,6 +1,6 @@
-import typelink from "../TypeLink.vue"
 import { shallowMount } from "@vue/test-utils"
-import {GraphQLInt} from "graphql"
+import { GraphQLInt } from "graphql"
+import typelink from "../TypeLink.vue"
 
 const factory = (props) =>
   shallowMount(typelink, {
@@ -39,7 +39,7 @@ describe("typelink", () => {
 
     const wrapper = factory({
       gqlType: GraphQLInt,
-      jumpTypeCallback: callback
+      jumpTypeCallback: callback,
     })
 
     await wrapper.trigger("click")

components/http/CodegenModal.vue

@@ -78,7 +78,7 @@ import { codegens } from "~/helpers/codegen/codegen"
 export default {
   props: {
     show: Boolean,
-    requestCode: { type: String, default: "" },
+    requestCode: { type: String, default: null },
     requestTypeProp: { type: String, default: "curl" },
   },
   data() {

components/http/RawBody.vue

@@ -62,8 +62,8 @@ import { getEditorLangForMimeType } from "~/helpers/editorutils"
 
 export default {
   props: {
-    rawParams: { type: String, default: "{}" },
+    rawParams: { type: String, default: null },
-    contentType: { type: String, default: "" },
+    contentType: { type: String, default: null },
     rawInput: { type: Boolean, default: false },
   },
   data() {

components/smart/ConfirmModal.vue

@@ -33,7 +33,7 @@
 export default {
   props: {
     show: Boolean,
-    title: { type: String, default: "" },
+    title: { type: String, default: null },
     yes: {
       type: String,
       default() {

components/smart/Tab.vue

@@ -7,9 +7,9 @@
 <script>
 export default {
   props: {
-    label: { type: String, default: "" },
+    label: { type: String, default: null },
-    icon: { type: String, default: "" },
+    icon: { type: String, default: null },
-    id: { type: String, default: "", required: true },
+    id: { type: String, default: null, required: true },
     selected: {
       type: Boolean,
       default: false,

components/smart/UrlField.vue

@@ -5,7 +5,7 @@
 <script>
 export default {
   props: {
-    value: { type: String, default: "" },
+    value: { type: String, default: null },
   },
   data() {
     return {

layouts/default.vue

@@ -53,7 +53,7 @@ export default {
                 text: this.$t("reload"),
                 onClick: (_, toastObject) => {
                   toastObject.goAway(0)
-                  this.$router.push("/", () => window.location.reload())
+                  window.location.reload()
                 },
               },
             ],

newstore/__tests__/DispatchingStore.spec.js

@@ -177,7 +177,9 @@ describe("DispatchingStore", () => {
     })
 
     store.dispatches$.subscribe((value) => {
-      if (isEqual(value, { dispatcher: "testDispatcher", payload: testPayload })) {
+      if (
+        isEqual(value, { dispatcher: "testDispatcher", payload: testPayload })
+      ) {
         done()
       }
     })

pages/doc.vue

@@ -2,7 +2,7 @@
   <div class="page">
     <div class="content">
       <div class="page-columns inner-left">
-        <AppSection :label="$t('import')" ref="import" no-legend>
+        <AppSection ref="import" :label="$t('import')" no-legend>
           <div class="flex flex-col">
             <label>{{ $t("collection") }}</label>
             <p class="info">
@@ -10,7 +10,11 @@
             </p>
             <div class="row-wrapper">
               <label for="collectionUpload">
-                <button class="icon" @click="$refs.collectionUpload.click()" v-tooltip="'JSON'">
+                <button
+                  v-tooltip="'JSON'"
+                  class="icon"
+                  @click="$refs.collectionUpload.click()"
+                >
                   <i class="material-icons">folder</i>
                   <span>{{ $t("import_collections") }}</span>
                 </button>
@@ -22,7 +26,11 @@
                 @change="uploadCollection"
               />
               <div>
-                <button class="icon" @click="collectionJSON = '[]'" v-tooltip.bottom="$t('clear')">
+                <button
+                  v-tooltip.bottom="$t('clear')"
+                  class="icon"
+                  @click="collectionJSON = '[]'"
+                >
                   <i class="material-icons">clear_all</i>
                 </button>
               </div>
@@ -47,10 +55,10 @@
           </div>
         </AppSection>
 
-        <AppSection :label="$t('documentation')" ref="documentation" no-legend>
+        <AppSection ref="documentation" :label="$t('documentation')" no-legend>
           <div class="flex flex-col">
             <label>{{ $t("documentation") }}</label>
-            <p v-if="this.items.length === 0" class="info">
+            <p v-if="items.length === 0" class="info">
               {{ $t("generate_docs_first") }}
             </p>
             <div v-else class="row-wrapper">
@@ -65,7 +73,11 @@
               >
                 <button
                   :disabled="
-                    !fb.currentUser ? true : fb.currentUser.provider !== 'github.com' ? true : false
+                    !fb.currentUser
+                      ? true
+                      : fb.currentUser.provider !== 'github.com'
+                      ? true
+                      : false
                   "
                   class="icon"
                   @click="createDocsGist"
@@ -76,7 +88,10 @@
               </div>
             </div>
             <div>
-              <span v-for="(collection, index) in this.items" :key="`collection-${index}`">
+              <span
+                v-for="(collection, index) in items"
+                :key="`collection-${index}`"
+              >
                 <DocsCollection :collection="collection" />
               </span>
             </div>
@@ -87,9 +102,9 @@
       <aside class="sticky-inner inner-right lg:max-w-md">
         <Collections
           :selected="selected"
+          :doc="true"
           @use-collection="useSelectedCollection($event)"
           @remove-collection="removeSelectedCollection($event)"
-          :doc="true"
         />
       </aside>
     </div>
@@ -97,8 +112,8 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
 import Mustache from "mustache"
+import { fb } from "~/helpers/fb"
 import DocsTemplate from "~/assets/md/docs.md"
 import folderContents from "~/assets/md/folderContents.md"
 import folderBody from "~/assets/md/folderBody.md"
@@ -113,6 +128,11 @@ export default {
       selected: [],
     }
   },
+  head() {
+    return {
+      title: `Documentation • Hoppscotch`,
+    }
+  },
   methods: {
     async createDocsGist() {
       await this.$axios
@@ -132,11 +152,11 @@ export default {
             },
           }
         )
-        .then(({ html_url }) => {
+        .then((res) => {
           this.$toast.success(this.$t("gist_created"), {
             icon: "done",
           })
-          window.open(html_url)
+          window.open(res.html_url)
         })
         .catch((error) => {
           this.$toast.error(this.$t("something_went_wrong"), {
@@ -147,9 +167,9 @@ export default {
     },
 
     uploadCollection() {
-      let file = this.$refs.collectionUpload.files[0]
+      const file = this.$refs.collectionUpload.files[0]
       if (file !== undefined && file !== null) {
-        let reader = new FileReader()
+        const reader = new FileReader()
         reader.onload = ({ target }) => {
           this.collectionJSON = target.result
         }
@@ -165,16 +185,22 @@ export default {
       this.$refs.collectionUpload.value = ""
     },
 
-    assignIDs(items, pref, nesting_level) {
+    assignIDs(items, pref, nestingLevel) {
-      for (var i = 0; i < items.length; ++i) {
+      for (let i = 0; i < items.length; ++i) {
         items[i].id = `&emsp;${pref}${i + 1}.`
         items[i].ref = `${items[i].name.split(" ").join("-")}`
-        items[i].nesting_level = nesting_level
+        items[i].nestingLevel = nestingLevel
-        items[i].folders = this.assignIDs(items[i].folders, items[i].id, nesting_level + "#")
+        items[i].folders = this.assignIDs(
-        for (var j = 0; j < items[i].requests.length; ++j) {
+          items[i].folders,
+          items[i].id,
+          nestingLevel + "#"
+        )
+        for (let j = 0; j < items[i].requests.length; ++j) {
           items[i].requests[j].id = `&emsp;${items[i].id}${i + 1}`
-          items[i].requests[j].ref = `${items[i].requests[j].name.split(" ").join("-")}`
+          items[i].requests[j].ref = `${items[i].requests[j].name
-          items[i].requests[j].nesting_level = nesting_level + "#"
+            .split(" ")
+            .join("-")}`
+          items[i].requests[j].nestingLevel = nestingLevel + "#"
         }
       }
       return items
@@ -210,16 +236,19 @@ export default {
             isPreRequestScript() {
               return (
                 this.preRequestScript &&
-                this.preRequestScript != `// pw.env.set('variable', 'value');`
+                this.preRequestScript !== `// pw.env.set('variable', 'value');`
               )
             },
             isTestScript() {
-              return this.testScript && this.testScript != `// pw.expect('variable').toBe('value');`
+              return (
+                this.testScript &&
+                this.testScript !== `// pw.expect('variable').toBe('value');`
+              )
             },
           },
           {
-            folderContents: folderContents,
+            folderContents,
-            folderBody: folderBody,
+            folderBody,
           }
         )
         this.docsMarkdown = docsMarkdown.replace(/^\s*[\r\n]/gm, "\n\n")
@@ -231,24 +260,27 @@ export default {
     },
 
     useSelectedCollection(collection) {
-      if (this.selected.find((coll) => coll == collection)) {
+      if (this.selected.find((coll) => coll === collection)) {
         return
       }
       this.selected.push(collection)
-      let importCollection = JSON.stringify(this.selected, null, 2)
+      const importCollection = JSON.stringify(this.selected, null, 2)
-      this.collectionJSON = JSON.stringify(JSON.parse(importCollection), null, 2)
+      this.collectionJSON = JSON.stringify(
+        JSON.parse(importCollection),
+        null,
+        2
+      )
     },
 
     removeSelectedCollection(collection) {
-      this.selected = this.selected.filter((coll) => coll != collection)
+      this.selected = this.selected.filter((coll) => coll !== collection)
-      let importCollection = JSON.stringify(this.selected, null, 2)
+      const importCollection = JSON.stringify(this.selected, null, 2)
-      this.collectionJSON = JSON.stringify(JSON.parse(importCollection), null, 2)
+      this.collectionJSON = JSON.stringify(
+        JSON.parse(importCollection),
+        null,
+        2
+      )
     },
   },
-  head() {
-    return {
-      title: `Documentation • Hoppscotch`,
-    }
-  },
 }
 </script>

pages/settings.vue

@@ -4,7 +4,7 @@
       <Teams />
     </div>
 
-    <AppSection :label="$t('account')" ref="account" no-legend>
+    <AppSection ref="account" :label="$t('account')" no-legend>
       <div class="flex flex-col">
         <label>{{ $t("account") }}</label>
         <div v-if="fb.currentUser">
@@ -49,7 +49,10 @@
           </p>
 
           <p>
-            <SmartToggle :on="SYNC_HISTORY" @change="toggleSettings('syncHistory', !SYNC_HISTORY)">
+            <SmartToggle
+              :on="SYNC_HISTORY"
+              @change="toggleSettings('syncHistory', !SYNC_HISTORY)"
+            >
               {{ $t("syncHistory") + " " + $t("sync") }}
               {{ SYNC_HISTORY ? $t("enabled") : $t("disabled") }}
             </SmartToggle>
@@ -71,13 +74,16 @@
       </div>
     </AppSection>
 
-    <AppSection :label="$t('theme')" ref="theme" no-legend>
+    <AppSection ref="theme" :label="$t('theme')" no-legend>
       <div class="flex flex-col">
         <label>{{ $t("theme") }}</label>
         <SmartColorModePicker />
         <SmartAccentModePicker />
         <span>
-          <SmartToggle :on="SCROLL_INTO_ENABLED" @change="toggleSetting('SCROLL_INTO_ENABLED')">
+          <SmartToggle
+            :on="SCROLL_INTO_ENABLED"
+            @change="toggleSetting('SCROLL_INTO_ENABLED')"
+          >
             {{ $t("scrollInto_use_toggle") }}
             {{ SCROLL_INTO_ENABLED ? $t("enabled") : $t("disabled") }}
           </SmartToggle>
@@ -85,16 +91,21 @@
       </div>
     </AppSection>
 
-    <AppSection :label="$t('extensions')" ref="extensions" no-legend>
+    <AppSection ref="extensions" :label="$t('extensions')" no-legend>
       <div class="flex flex-col">
         <label>{{ $t("extensions") }}</label>
         <div class="row-wrapper">
-          <SmartToggle :on="EXTENSIONS_ENABLED" @change="toggleSetting('EXTENSIONS_ENABLED')">
+          <SmartToggle
+            :on="EXTENSIONS_ENABLED"
+            @change="toggleSetting('EXTENSIONS_ENABLED')"
+          >
             {{ $t("extensions_use_toggle") }}
           </SmartToggle>
         </div>
         <p v-if="extensionVersion != null" class="info">
-          {{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{ extensionVersion.minor }}
+          {{ $t("extension_version") }}: v{{ extensionVersion.major }}.{{
+            extensionVersion.minor
+          }}
         </p>
         <p v-else class="info">
           {{ $t("extension_version") }}: {{ $t("extension_ver_not_reported") }}
@@ -102,12 +113,15 @@
       </div>
     </AppSection>
 
-    <AppSection :label="$t('proxy')" ref="proxy" no-legend>
+    <AppSection ref="proxy" :label="$t('proxy')" no-legend>
       <div class="flex flex-col">
         <label>{{ $t("proxy") }}</label>
         <div class="row-wrapper">
           <span>
-            <SmartToggle :on="PROXY_ENABLED" @change="toggleSetting('PROXY_ENABLED')">
+            <SmartToggle
+              :on="PROXY_ENABLED"
+              @change="toggleSetting('PROXY_ENABLED')"
+            >
               {{ $t("proxy") }}
               {{ PROXY_ENABLED ? $t("enabled") : $t("disabled") }}
             </SmartToggle>
@@ -117,21 +131,25 @@
             target="_blank"
             rel="noopener"
           >
-            <button class="icon" v-tooltip="$t('wiki')">
+            <button v-tooltip="$t('wiki')" class="icon">
               <i class="material-icons">help_outline</i>
             </button>
           </a>
         </div>
         <div class="row-wrapper">
           <label for="url">{{ $t("url") }}</label>
-          <button class="icon" @click="resetProxy" v-tooltip.bottom="$t('reset_default')">
+          <button
+            v-tooltip.bottom="$t('reset_default')"
+            class="icon"
+            @click="resetProxy"
+          >
             <i class="material-icons">clear_all</i>
           </button>
         </div>
         <input
           id="url"
-          type="url"
           v-model="PROXY_URL"
+          type="url"
           :disabled="!PROXY_ENABLED"
           :placeholder="$t('url')"
         />
@@ -166,7 +184,7 @@
       -->
     </AppSection>
 
-    <AppSection :label="$t('experiments')" ref="experiments" no-legend>
+    <AppSection ref="experiments" :label="$t('experiments')" no-legend>
       <div class="flex flex-col">
         <label>{{ $t("experiments") }}</label>
         <p class="info">
@@ -193,8 +211,9 @@
 </template>
 
 <script lang="ts">
-import { fb } from "~/helpers/fb"
+import Vue from "vue"
 import { hasExtensionInstalled } from "../helpers/strategies/ExtensionStrategy"
+import { fb } from "~/helpers/fb"
 import {
   getSettingSubject,
   applySetting,
@@ -204,8 +223,6 @@ import {
 import type { KeysMatching } from "~/types/ts-utils"
 import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
 
-import Vue from "vue"
-
 type SettingsType = typeof defaultSettings
 
 export default Vue.extend({
@@ -239,7 +256,9 @@ export default Vue.extend({
 
       EXTENSIONS_ENABLED: getSettingSubject("EXTENSIONS_ENABLED"),
 
-      EXPERIMENTAL_URL_BAR_ENABLED: getSettingSubject("EXPERIMENTAL_URL_BAR_ENABLED"),
+      EXPERIMENTAL_URL_BAR_ENABLED: getSettingSubject(
+        "EXPERIMENTAL_URL_BAR_ENABLED"
+      ),
 
       SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
       SYNC_ENVIRONMENTS: getSettingSubject("syncEnvironments"),
@@ -249,6 +268,19 @@ export default Vue.extend({
       currentUser: currentUserInfo$,
     }
   },
+  head() {
+    return {
+      title: `Settings • Hoppscotch`,
+    }
+  },
+  computed: {
+    proxySettings(): { url: string; key: string } {
+      return {
+        url: this.PROXY_URL,
+        key: this.PROXY_KEY,
+      }
+    },
+  },
   watch: {
     proxySettings: {
       deep: true,
@@ -271,7 +303,10 @@ export default Vue.extend({
       }
       toggleSetting(key)
     },
-    toggleSettings<K extends KeysMatching<SettingsType, boolean>>(name: K, value: SettingsType[K]) {
+    toggleSettings<K extends KeysMatching<SettingsType, boolean>>(
+      name: K,
+      value: SettingsType[K]
+    ) {
       this.applySetting(name, value)
 
       if (name === "syncCollections" && value) {
@@ -293,7 +328,10 @@ export default Vue.extend({
       this.$toast.info(this.$t("cleared"), {
         icon: "clear_all",
       })
-      setTimeout(() => (target.innerHTML = '<i class="material-icons">clear_all</i>'), 1000)
+      setTimeout(
+        () => (target.innerHTML = '<i class="material-icons">clear_all</i>'),
+        1000
+      )
     },
     syncCollections(): void {
       if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
@@ -304,29 +342,20 @@ export default Vue.extend({
           )
         if (this.$store.state.postwoman.collectionsGraphql)
           fb.writeCollections(
-            JSON.parse(JSON.stringify(this.$store.state.postwoman.collectionsGraphql)),
+            JSON.parse(
+              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
+            ),
             "collectionsGraphql"
           )
       }
     },
     syncEnvironments(): void {
       if (fb.currentUser !== null && this.SYNC_ENVIRONMENTS) {
-        fb.writeEnvironments(JSON.parse(JSON.stringify(this.$store.state.postwoman.environments)))
+        fb.writeEnvironments(
+          JSON.parse(JSON.stringify(this.$store.state.postwoman.environments))
+        )
       }
     },
   },
-  computed: {
-    proxySettings(): { url: string; key: string } {
-      return {
-        url: this.PROXY_URL,
-        key: this.PROXY_KEY,
-      }
-    },
-  },
-  head() {
-    return {
-      title: `Settings • Hoppscotch`,
-    }
-  },
 })
 </script>

plugins/web-worker.js

@@ -1,6 +1,6 @@
 import RegexWorker from "~/assets/js/regex.worker"
 
-export default (context, inject) => {
+export default (_, inject) => {
   inject("worker", {
     createRejexWorker() {
       return new RegexWorker()

store/mutations.js

@@ -11,7 +11,9 @@ export default {
 
   setCollapsedSection({ theme }, value) {
     theme.collapsedSections.includes(value)
-      ? (theme.collapsedSections = theme.collapsedSections.filter((section) => section !== value))
+      ? (theme.collapsedSections = theme.collapsedSections.filter(
+          (section) => section !== value
+        ))
       : theme.collapsedSections.push(value)
   },
 
@@ -20,7 +22,7 @@ export default {
   },
 
   setActiveGQLHeader({ gql }, { index, value }) {
-    if (!gql.headers[index].hasOwnProperty("active")) {
+    if (!Object.prototype.hasOwnProperty.call(gql.headers[index], "active")) {
       Vue.set(gql.headers[index], "active", value)
     } else {
       gql.headers[index].active = value
@@ -56,7 +58,9 @@ export default {
   },
 
   setActiveHeader({ request }, { index, value }) {
-    if (!request.headers[index].hasOwnProperty("active")) {
+    if (
+      !Object.prototype.hasOwnProperty.call(request.headers[index], "active")
+    ) {
       Vue.set(request.headers[index], "active", value)
     } else {
       request.headers[index].active = value
@@ -84,7 +88,9 @@ export default {
   },
 
   setActiveParams({ request }, { index, value }) {
-    if (!request.params[index].hasOwnProperty("active")) {
+    if (
+      !Object.prototype.hasOwnProperty.call(request.params[index], "active")
+    ) {
       Vue.set(request.params[index], "active", value)
     } else {
       request.params[index].active = value
@@ -124,7 +130,9 @@ export default {
   },
 
   setActiveBodyParams({ request }, { index, value }) {
-    if (!request.bodyParams[index].hasOwnProperty("active")) {
+    if (
+      !Object.prototype.hasOwnProperty.call(request.bodyParams[index], "active")
+    ) {
       Vue.set(request.bodyParams[index], "active", value)
     } else {
       request.bodyParams[index].active = value