feat: request variables (#3825)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>

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

@@ -26,7 +26,7 @@
           @click="clearContent()"
         />
         <HoppButtonSecondary
-          v-if="bulkMode"
+          v-if="bulkHeaders"
           v-tippy="{ theme: 'tooltip' }"
           :title="t('state.linewrap')"
           :class="{ '!text-accent': WRAP_LINES }"
@@ -92,6 +92,8 @@
               :auto-complete-source="commonHeaders"
               :env-index="index"
               :inspection-results="getInspectorResult(headerKeyResults, index)"
+              :auto-complete-env="true"
+              :envs="envs"
               @change="
                 updateHeader(index, {
                   id: header.id,
@@ -108,6 +110,8 @@
                 getInspectorResult(headerValueResults, index)
               "
               :env-index="index"
+              :auto-complete-env="true"
+              :envs="envs"
               @change="
                 updateHeader(index, {
                   id: header.id,
@@ -329,7 +333,11 @@ import {
   getComputedHeaders,
   getComputedAuthHeaders,
 } from "~/helpers/utils/EffectiveURL"
-import { aggregateEnvs$, getAggregateEnvs } from "~/newstore/environments"
+import {
+  AggregateEnvironment,
+  aggregateEnvs$,
+  getAggregateEnvs,
+} from "~/newstore/environments"
 import { useVModel } from "@vueuse/core"
 import { useService } from "dioc/vue"
 import { InspectionService, InspectorResult } from "~/services/inspection"
@@ -359,6 +367,7 @@ const props = defineProps<{
   modelValue: HoppRESTRequest
   isCollectionProperty?: boolean
   inheritedProperties?: HoppInheritedProperty
+  envs?: AggregateEnvironment[]
 }>()
 
 const emit = defineEmits<{