chore: updated types

packages/hoppscotch-app/components/app/PowerSearchEntry.vue

@@ -33,7 +33,12 @@ import { useI18n } from "~/helpers/utils/composables"
 const t = useI18n()
 
 defineProps<{
-  shortcut: Object
+  shortcut: {
+    label: string
+    keys: string[]
+    action: string
+    icon: string
+  }
   active: Boolean
 }>()
 </script>

packages/hoppscotch-app/components/app/ShortcutsEntry.vue

@@ -19,6 +19,9 @@ import { useI18n } from "~/helpers/utils/composables"
 const t = useI18n()
 
 defineProps<{
-  shortcut: Object
+  shortcut: {
+    label: string
+    keys: string[]
+  }
 }>()
 </script>

packages/hoppscotch-app/components/app/Sidenav.vue

@@ -8,9 +8,6 @@
         class="nav-link"
         tabindex="0"
       >
-        <i v-if="navigation.icon" class="material-icons">
-          {{ navigation.icon }}
-        </i>
         <div v-if="navigation.svg">
           <SmartIcon :name="navigation.svg" class="svg-icons" />
         </div>

packages/hoppscotch-app/components/collections/graphql/Collection.vue

@@ -227,10 +227,8 @@ export default defineComponent({
     },
     dropEvent({ dataTransfer }: any) {
       this.dragging = !this.dragging
-
       const folderPath = dataTransfer.getData("folderPath")
       const requestIndex = dataTransfer.getData("requestIndex")
-
       moveGraphqlRequest(folderPath, requestIndex, `${this.collectionIndex}`)
     },
   },

packages/hoppscotch-app/components/collections/graphql/Folder.vue

@@ -137,7 +137,7 @@
             :src="`/images/states/${$colorMode.value}/pack.svg`"
             loading="lazy"
             class="flex-col object-contain object-center h-16 mb-4 w-16 inline-flex"
-            :alt="$t('empty.folder')"
+            :alt="`${$t('empty.folder')}`"
           />
           <span class="text-center">
             {{ $t("empty.folder") }}
@@ -226,7 +226,6 @@ export default defineComponent({
       this.dragging = !this.dragging
       const folderPath = dataTransfer.getData("folderPath")
       const requestIndex = dataTransfer.getData("requestIndex")
-
       moveGraphqlRequest(folderPath, requestIndex, this.folderPath)
     },
   },

packages/hoppscotch-app/components/collections/graphql/ImportExport.vue

@@ -19,8 +19,10 @@
             icon="assignment_returned"
             :label="$t('import.from_gist')"
             @click.native="
-              readCollectionGist
+              () => {
-              $refs.options.tippy().hide()
+                readCollectionGist()
+                $refs.options.tippy().hide()
+              }
             "
           />
           <span
@@ -44,8 +46,10 @@
               icon="assignment_turned_in"
               :label="$t('export.create_secret_gist')"
               @click.native="
-                createCollectionGist()
+                () => {
-                $refs.options.tippy().hide()
+                  createCollectionGist()
+                  $refs.options.tippy().hide()
+                }
               "
             />
           </span>

packages/hoppscotch-app/components/collections/my/Request.vue

@@ -71,38 +71,44 @@
               svg="edit"
               :label="$t('action.edit')"
               @click.native="
-                $emit('edit-request', {
+                () => {
-                  collectionIndex,
+                  $emit('edit-request', {
-                  folderIndex,
+                    collectionIndex,
-                  folderName,
+                    folderIndex,
-                  request,
+                    folderName,
-                  requestIndex,
+                    request,
-                  folderPath,
+                    requestIndex,
-                })
+                    folderPath,
-                $refs.options.tippy().hide()
+                  })
+                  $refs.options.tippy().hide()
+                }
               "
             />
             <SmartItem
               svg="copy"
               :label="$t('action.duplicate')"
               @click.native="
-                $emit('duplicate-request', {
+                () => {
-                  collectionIndex,
+                  $emit('duplicate-request', {
-                  folderIndex,
+                    collectionIndex,
-                  folderName,
+                    folderIndex,
-                  request,
+                    folderName,
-                  requestIndex,
+                    request,
-                  folderPath,
+                    requestIndex,
-                })
+                    folderPath,
-                $refs.options.tippy().hide()
+                  })
+                  $refs.options.tippy().hide()
+                }
               "
             />
             <SmartItem
               svg="trash-2"
               :label="$t('action.delete')"
               @click.native="
-                confirmRemove = true
+                () => {
-                $refs.options.tippy().hide()
+                  confirmRemove = true
+                  $refs.options.tippy().hide()
+                }
               "
             />
           </tippy>

packages/hoppscotch-app/components/environments/ImportExport.vue

@@ -19,8 +19,10 @@
             icon="assignment_returned"
             :label="$t('import.from_gist')"
             @click.native="
-              readEnvironmentGist
+              () => {
-              $refs.options.tippy().hide()
+                readEnvironmentGist()
+                $refs.options.tippy().hide()
+              }
             "
           />
           <span
@@ -44,8 +46,10 @@
               icon="assignment_turned_in"
               :label="$t('export.create_secret_gist')"
               @click.native="
-                createEnvironmentGist
+                () => {
-                $refs.options.tippy().hide()
+                  createEnvironmentGist()
+                  $refs.options.tippy().hide()
+                }
               "
             />
           </span>

packages/hoppscotch-app/components/environments/index.vue

@@ -92,7 +92,7 @@
         :src="`/images/states/${$colorMode.value}/blockchain.svg`"
         loading="lazy"
         class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
-        :alt="$t('empty.environments')"
+        :alt="`${$t('empty.environments')}`"
       />
       <span class="text-center pb-4">
         {{ $t("empty.environments") }}

packages/hoppscotch-app/components/http/Authorization.vue

@@ -156,17 +156,15 @@
       <div
         class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
       >
-        <div class="p-2">
+        <div class="text-secondaryLight pb-2">
-          <div class="text-secondaryLight pb-2">
+          {{ $t("helpers.authorization") }}
-            {{ $t("helpers.authorization") }}
-          </div>
-          <SmartAnchor
-            class="link"
-            :label="`${$t('authorization.learn')} \xA0 →`"
-            to="https://docs.hoppscotch.io/features/authorization"
-            blank
-          />
         </div>
+        <SmartAnchor
+          class="link"
+          :label="`${$t('authorization.learn')} \xA0 →`"
+          to="https://docs.hoppscotch.io/features/authorization"
+          blank
+        />
       </div>
     </div>
     <div v-if="authType === 'bearer'" class="border-b border-dividerLight flex">
@@ -182,17 +180,15 @@
       <div
         class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
       >
-        <div class="p-2">
+        <div class="text-secondaryLight pb-2">
-          <div class="text-secondaryLight pb-2">
+          {{ $t("helpers.authorization") }}
-            {{ $t("helpers.authorization") }}
-          </div>
-          <SmartAnchor
-            class="link"
-            :label="`${$t('authorization.learn')} \xA0 →`"
-            to="https://docs.hoppscotch.io/features/authorization"
-            blank
-          />
         </div>
+        <SmartAnchor
+          class="link"
+          :label="`${$t('authorization.learn')} \xA0 →`"
+          to="https://docs.hoppscotch.io/features/authorization"
+          blank
+        />
       </div>
     </div>
     <div
@@ -212,17 +208,15 @@
       <div
         class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
       >
-        <div class="p-2">
+        <div class="text-secondaryLight pb-2">
-          <div class="text-secondaryLight pb-2">
+          {{ $t("helpers.authorization") }}
-            {{ $t("helpers.authorization") }}
-          </div>
-          <SmartAnchor
-            class="link"
-            :label="`${$t('authorization.learn')} \xA0 →`"
-            to="https://docs.hoppscotch.io/features/authorization"
-            blank
-          />
         </div>
+        <SmartAnchor
+          class="link"
+          :label="`${$t('authorization.learn')} \xA0 →`"
+          to="https://docs.hoppscotch.io/features/authorization"
+          blank
+        />
       </div>
     </div>
     <div
@@ -258,19 +252,29 @@
             <template #trigger>
               <span class="select-wrapper">
                 <ButtonSecondary
-                  :label="addTo || 'Header'"
+                  :label="addTo || $t('state.none')"
                   class="rounded-none ml-2 pr-8"
                 />
               </span>
             </template>
             <SmartItem
-              :label="'Header'"
+              :icon="
+                addTo === 'Headers'
+                  ? 'radio_button_checked'
+                  : 'radio_button_unchecked'
+              "
+              :label="'Headers'"
               @click.native="
-                addTo = 'Header'
+                addTo = 'Headers'
                 $refs.addToOptions.tippy().hide()
               "
             />
             <SmartItem
+              :icon="
+                addTo === 'Query params'
+                  ? 'radio_button_checked'
+                  : 'radio_button_unchecked'
+              "
               :label="'Query params'"
               @click.native="
                 addTo = 'Query params'
@@ -283,17 +287,15 @@
       <div
         class="bg-primary h-full top-upperTertiaryStickyFold min-w-46 max-w-1/3 p-4 z-9 sticky overflow-auto"
       >
-        <div class="p-2">
+        <div class="text-secondaryLight pb-2">
-          <div class="text-secondaryLight pb-2">
+          {{ $t("helpers.authorization") }}
-            {{ $t("helpers.authorization") }}
-          </div>
-          <SmartAnchor
-            class="link"
-            :label="`${$t('authorization.learn')} \xA0 →`"
-            to="https://docs.hoppscotch.io/features/authorization"
-            blank
-          />
         </div>
+        <SmartAnchor
+          class="link"
+          :label="`${$t('authorization.learn')} \xA0 →`"
+          to="https://docs.hoppscotch.io/features/authorization"
+          blank
+        />
       </div>
     </div>
   </div>
@@ -305,7 +307,7 @@ import {
   HoppRESTAuthBasic,
   HoppRESTAuthBearer,
   HoppRESTAuthOAuth2,
-  HoppRESTAuthApiKey,
+  HoppRESTAuthAPIKey,
 } from "@hoppscotch/data"
 import { pluckRef, useStream } from "~/helpers/utils/composables"
 import { restAuth$, setRESTAuth } from "~/newstore/RESTSession"
@@ -331,9 +333,15 @@ export default defineComponent({
     const basicPassword = pluckRef(auth as Ref<HoppRESTAuthBasic>, "password")
     const bearerToken = pluckRef(auth as Ref<HoppRESTAuthBearer>, "token")
     const oauth2Token = pluckRef(auth as Ref<HoppRESTAuthOAuth2>, "token")
-    const apiKey = pluckRef(auth as Ref<HoppRESTAuthApiKey>, "key")
+    const apiKey = pluckRef(auth as Ref<HoppRESTAuthAPIKey>, "key")
-    const apiValue = pluckRef(auth as Ref<HoppRESTAuthApiKey>, "value")
+    const apiValue = pluckRef(auth as Ref<HoppRESTAuthAPIKey>, "value")
-    const addTo = pluckRef(auth as Ref<HoppRESTAuthApiKey>, "addTo")
+    const addTo = pluckRef(auth as Ref<HoppRESTAuthAPIKey>, "addTo")
+    if (typeof addTo.value === "undefined") {
+      addTo.value = "Headers"
+      apiKey.value = ""
+      apiValue.value = ""
+    }
+
     const URLExcludes = useSetting("URL_EXCLUDES")
     const clearContent = () => {
       auth.value = {

packages/hoppscotch-app/components/http/Body.vue

@@ -59,7 +59,7 @@
         :src="`/images/states/${$colorMode.value}/upload_single_file.svg`"
         loading="lazy"
         class="flex-col object-contain object-center h-16 my-4 w-16 inline-flex"
-        :alt="$t('empty.body')"
+        :alt="`${$t('empty.body')}`"
       />
       <span class="text-center pb-4">
         {{ $t("empty.body") }}

packages/hoppscotch-app/components/http/TestResultReport.vue

@@ -20,12 +20,16 @@
 
 <script setup lang="ts">
 import { computed, PropType } from "@nuxtjs/composition-api"
-import { HoppTestResult } from "~/helpers/types/HoppTestResult"
+import {
+  HoppTestExpectResult,
+  HoppTestResult,
+} from "~/helpers/types/HoppTestResult"
 
 const props = defineProps({
   testResults: {
     type: Object as PropType<HoppTestResult>,
     required: true,
+    expectResults: [] as HoppTestExpectResult[],
   },
 })
 

packages/hoppscotch-app/helpers/types/HoppTestResult.ts

@@ -12,4 +12,5 @@ export type HoppTestData = {
 export type HoppTestResult = {
   tests: HoppTestData[]
   expectResults: HoppTestExpectResult[]
+  description: string
 }

packages/hoppscotch-app/helpers/utils/EffectiveURL.ts

@@ -114,8 +114,7 @@ export function getEffectiveRESTRequest(
       })
     } else if (request.auth.authType === "api-key") {
       const { key, value, addTo } = request.auth
-
+      if (addTo === "Headers") {
-      if (addTo === "Header") {
         effectiveFinalHeaders.push({
           active: true,
           key: parseTemplateString(key, envVariables),

packages/hoppscotch-data/src/rest/HoppRESTAuth.ts

@@ -26,9 +26,18 @@ export type HoppRESTAuthOAuth2 = {
   scope: string
 }
 
+export type HoppRESTAuthAPIKey = {
+  authType: "api-key"
+
+  key: string
+  value: string
+  addTo: string
+}
+
 export type HoppRESTAuth = { authActive: boolean } & (
   | HoppRESTAuthNone
   | HoppRESTAuthBasic
   | HoppRESTAuthBearer
   | HoppRESTAuthOAuth2
-)
+  | HoppRESTAuthAPIKey
+)