fix: use proper values for addTo field when auth type is api-key (#3966)

packages/hoppscotch-common/locales/en.json

@@ -162,6 +162,8 @@
       "label_client_credentials": "Client Credentials"
     },
     "pass_key_by": "Pass by",
+    "pass_by_query_params_label": "Query Parameters",
+    "pass_by_headers_label": "Headers",
     "password": "Password",
     "save_to_inherit": "Please save this request in any collection to inherit the authorization",
     "token": "Token",

packages/hoppscotch-common/src/components/graphql/Headers.vue

@@ -595,7 +595,7 @@ const getComputedAuthHeaders = (
   } else if (request.auth.authType === "api-key") {
     const { key, addTo } = request.auth
 
-    if (addTo === "Headers" && key) {
+    if (addTo === "HEADERS" && key) {
       headers.push({
         active: true,
         key,

packages/hoppscotch-common/src/components/http/authorization/ApiKey.vue

@@ -28,7 +28,13 @@
       >
         <HoppSmartSelectWrapper>
           <HoppButtonSecondary
-            :label="auth.addTo || t('state.none')"
+            :label="
+              auth.addTo
+                ? auth.addTo === 'HEADERS'
+                  ? t('authorization.pass_by_headers_label')
+                  : t('authorization.pass_by_query_params_label')
+                : t('state.none')
+            "
             class="ml-2 rounded-none pr-8"
           />
         </HoppSmartSelectWrapper>
@@ -40,23 +46,23 @@
             @keyup.escape="hide()"
           >
             <HoppSmartItem
-              :icon="auth.addTo === 'Headers' ? IconCircleDot : IconCircle"
-              :active="auth.addTo === 'Headers'"
-              :label="'Headers'"
+              :icon="auth.addTo === 'HEADERS' ? IconCircleDot : IconCircle"
+              :active="auth.addTo === 'HEADERS'"
+              :label="t('authorization.pass_by_headers_label')"
               @click="
                 () => {
-                  auth.addTo = 'Headers'
+                  auth.addTo = 'HEADERS'
                   hide()
                 }
               "
             />
             <HoppSmartItem
-              :icon="auth.addTo === 'Query params' ? IconCircleDot : IconCircle"
-              :active="auth.addTo === 'Query params'"
-              :label="'Query params'"
+              :icon="auth.addTo === 'QUERY_PARAMS' ? IconCircleDot : IconCircle"
+              :active="auth.addTo === 'QUERY_PARAMS'"
+              :label="t('authorization.pass_by_query_params_label')"
               @click="
                 () => {
-                  auth.addTo = 'Query params'
+                  auth.addTo = 'QUERY_PARAMS'
                   hide()
                 }
               "

packages/hoppscotch-common/src/helpers/graphql/connection.ts

@@ -281,9 +281,9 @@ export const runGQLOperation = async (options: RunQueryOptions) => {
       }
     } else if (auth.authType === "api-key") {
       const { key, value, addTo } = auth
-      if (addTo === "Headers") {
+      if (addTo === "HEADERS") {
         finalHeaders[key] = value
-      } else if (addTo === "Query params") {
+      } else if (addTo === "QUERY_PARAMS") {
         params[key] = value
       }
     }

packages/hoppscotch-common/src/helpers/import-export/import/openapi.ts

@@ -260,7 +260,7 @@ const resolveOpenAPIV3SecurityObj = (
       return {
         authType: "api-key",
         authActive: true,
-        addTo: "Headers",
+        addTo: "HEADERS",
         key: scheme.name,
         value: "",
       }
@@ -268,7 +268,7 @@ const resolveOpenAPIV3SecurityObj = (
       return {
         authType: "api-key",
         authActive: true,
-        addTo: "Query params",
+        addTo: "QUERY_PARAMS",
         key: scheme.in,
         value: "",
       }
@@ -430,7 +430,7 @@ const resolveOpenAPIV2SecurityScheme = (
     // V2 only supports in: header and in: query
     return {
       authType: "api-key",
-      addTo: scheme.in === "header" ? "Headers" : "Query params",
+      addTo: scheme.in === "header" ? "HEADERS" : "QUERY_PARAMS",
       authActive: true,
       key: scheme.name,
       value: "",

packages/hoppscotch-common/src/helpers/import-export/import/postman.ts

@@ -150,8 +150,8 @@ const getHoppReqAuth = (item: Item): HoppRESTAuth => {
       ),
       addTo:
         (getVariableValue(auth.apikey, "in") ?? "query") === "query"
-          ? "Query params"
-          : "Headers",
+          ? "QUERY_PARAMS"
+          : "HEADERS",
     }
   } else if (auth.type === "bearer") {
     return {

packages/hoppscotch-common/src/helpers/utils/EffectiveURL.ts

@@ -96,7 +96,7 @@ export const getComputedAuthHeaders = (
     })
   } else if (request.auth.authType === "api-key") {
     const { key, addTo } = request.auth
-    if (addTo === "Headers" && key) {
+    if (addTo === "HEADERS" && key) {
       headers.push({
         active: true,
         key: parseTemplateString(key, envVars),