From fb615d2d2b8fa0bd4f3fee0408fe8c01bb48d885 Mon Sep 17 00:00:00 2001
From: nivedin <nivedinp@gmail.com>
Date: Mon, 19 Feb 2024 21:24:17 +0530
Subject: [PATCH] chore: add env autocomplete to components

---
 .../src/components/http/Authorization.vue     |  6 +++++-
 .../src/components/http/Headers.vue           |  2 ++
 .../components/http/OAuth2Authorization.vue   | 21 ++++++++++++++++---
 .../src/components/http/Parameters.vue        |  2 ++
 .../src/components/http/Request.vue           |  1 +
 .../components/http/authorization/ApiKey.vue  | 12 +++++++++--
 .../components/http/authorization/Basic.vue   |  2 ++
 7 files changed, 40 insertions(+), 6 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/http/Authorization.vue b/packages/hoppscotch-common/src/components/http/Authorization.vue
index f1a7b0a60..e59fb39b3 100644
--- a/packages/hoppscotch-common/src/components/http/Authorization.vue
+++ b/packages/hoppscotch-common/src/components/http/Authorization.vue
@@ -169,7 +169,11 @@
         </div>
         <div v-if="auth.authType === 'bearer'">
           <div class="flex flex-1 border-b border-dividerLight">
-            <SmartEnvInput v-model="auth.token" placeholder="Token" />
+            <SmartEnvInput
+              v-model="auth.token"
+              placeholder="Token"
+              :auto-complete-env="true"
+            />
           </div>
         </div>
         <div v-if="auth.authType === 'oauth-2'">
diff --git a/packages/hoppscotch-common/src/components/http/Headers.vue b/packages/hoppscotch-common/src/components/http/Headers.vue
index fb46c4aee..33fd0ecb8 100644
--- a/packages/hoppscotch-common/src/components/http/Headers.vue
+++ b/packages/hoppscotch-common/src/components/http/Headers.vue
@@ -92,6 +92,7 @@
               :auto-complete-source="commonHeaders"
               :env-index="index"
               :inspection-results="getInspectorResult(headerKeyResults, index)"
+              :auto-complete-env="true"
               @change="
                 updateHeader(index, {
                   id: header.id,
@@ -108,6 +109,7 @@
                 getInspectorResult(headerValueResults, index)
               "
               :env-index="index"
+              :auto-complete-env="true"
               @change="
                 updateHeader(index, {
                   id: header.id,
diff --git a/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue b/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue
index ee9d2f1c0..bb85607c5 100644
--- a/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue
+++ b/packages/hoppscotch-common/src/components/http/OAuth2Authorization.vue
@@ -6,6 +6,7 @@
         :styles="
           hasAccessTokenOrAuthURL ? 'pointer-events-none opacity-70' : ''
         "
+        :auto-complete-env="true"
         placeholder="OpenID Connect Discovery URL"
       />
     </div>
@@ -13,6 +14,7 @@
       <SmartEnvInput
         v-model="authURL"
         placeholder="Authorization URL"
+        :auto-complete-env="true"
         :styles="hasOIDCURL ? 'pointer-events-none opacity-70' : ''"
       ></SmartEnvInput>
     </div>
@@ -20,17 +22,30 @@
       <SmartEnvInput
         v-model="accessTokenURL"
         placeholder="Access Token URL"
+        :auto-complete-env="true"
         :styles="hasOIDCURL ? 'pointer-events-none opacity-70' : ''"
       />
     </div>
     <div class="flex flex-1 border-b border-dividerLight">
-      <SmartEnvInput v-model="clientID" placeholder="Client ID" />
+      <SmartEnvInput
+        v-model="clientID"
+        :auto-complete-env="true"
+        placeholder="Client ID"
+      />
     </div>
     <div class="flex flex-1 border-b border-dividerLight">
-      <SmartEnvInput v-model="clientSecret" placeholder="Client Secret" />
+      <SmartEnvInput
+        v-model="clientSecret"
+        :auto-complete-env="true"
+        placeholder="Client Secret"
+      />
     </div>
     <div class="flex flex-1 border-b border-dividerLight">
-      <SmartEnvInput v-model="scope" placeholder="Scope" />
+      <SmartEnvInput
+        v-model="scope"
+        :auto-complete-env="true"
+        placeholder="Scope"
+      />
     </div>
     <div class="p-2">
       <HoppButtonSecondary
diff --git a/packages/hoppscotch-common/src/components/http/Parameters.vue b/packages/hoppscotch-common/src/components/http/Parameters.vue
index 202cbf631..19f54ae70 100644
--- a/packages/hoppscotch-common/src/components/http/Parameters.vue
+++ b/packages/hoppscotch-common/src/components/http/Parameters.vue
@@ -87,6 +87,7 @@
               :inspection-results="
                 getInspectorResult(parameterKeyResults, index)
               "
+              :auto-complete-env="true"
               @change="
                 updateParam(index, {
                   id: param.id,
@@ -102,6 +103,7 @@
               :inspection-results="
                 getInspectorResult(parameterValueResults, index)
               "
+              :auto-complete-env="true"
               @change="
                 updateParam(index, {
                   id: param.id,
diff --git a/packages/hoppscotch-common/src/components/http/Request.vue b/packages/hoppscotch-common/src/components/http/Request.vue
index 9191057ff..aa792aca3 100644
--- a/packages/hoppscotch-common/src/components/http/Request.vue
+++ b/packages/hoppscotch-common/src/components/http/Request.vue
@@ -56,6 +56,7 @@
           v-model="tab.document.request.endpoint"
           :placeholder="`${t('request.url')}`"
           :auto-complete-source="userHistories"
+          :auto-complete-env="true"
           :inspection-results="tabResults"
           @paste="onPasteUrl($event)"
           @enter="newSendRequest"
diff --git a/packages/hoppscotch-common/src/components/http/authorization/ApiKey.vue b/packages/hoppscotch-common/src/components/http/authorization/ApiKey.vue
index 52eff4ed8..fb84ead37 100644
--- a/packages/hoppscotch-common/src/components/http/authorization/ApiKey.vue
+++ b/packages/hoppscotch-common/src/components/http/authorization/ApiKey.vue
@@ -1,9 +1,17 @@
 <template>
   <div class="flex flex-1 border-b border-dividerLight">
-    <SmartEnvInput v-model="auth.key" placeholder="Key" />
+    <SmartEnvInput
+      v-model="auth.key"
+      :auto-complete-env="true"
+      placeholder="Key"
+    />
   </div>
   <div class="flex flex-1 border-b border-dividerLight">
-    <SmartEnvInput v-model="auth.value" placeholder="Value" />
+    <SmartEnvInput
+      v-model="auth.value"
+      :auto-complete-env="true"
+      placeholder="Value"
+    />
   </div>
   <div class="flex items-center border-b border-dividerLight">
     <span class="flex items-center">
diff --git a/packages/hoppscotch-common/src/components/http/authorization/Basic.vue b/packages/hoppscotch-common/src/components/http/authorization/Basic.vue
index b3db29a6b..02e473999 100644
--- a/packages/hoppscotch-common/src/components/http/authorization/Basic.vue
+++ b/packages/hoppscotch-common/src/components/http/authorization/Basic.vue
@@ -3,12 +3,14 @@
     <SmartEnvInput
       v-model="auth.username"
       :placeholder="t('authorization.username')"
+      :auto-complete-env="true"
     />
   </div>
   <div class="flex flex-1 border-b border-dividerLight">
     <SmartEnvInput
       v-model="auth.password"
       :placeholder="t('authorization.password')"
+      :auto-complete-env="true"
     />
   </div>
 </template>