feat: secret variables in environments (#3779)

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

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

@@ -187,6 +187,8 @@ const copyCodeIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(
 const requestCode = computed(() => {
   const aggregateEnvs = getAggregateEnvs()
   const env: Environment = {
+    v: 1,
+    id: "env",
     name: "Env",
     variables: aggregateEnvs,
   }

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

@@ -553,7 +553,7 @@ const clearContent = () => {
 const aggregateEnvs = useReadonlyStream(aggregateEnvs$, getAggregateEnvs())
 
 const computedHeaders = computed(() =>
-  getComputedHeaders(request.value, aggregateEnvs.value).map(
+  getComputedHeaders(request.value, aggregateEnvs.value, false).map(
     (header, index) => ({
       id: `header-${index}`,
       ...header,
@@ -606,7 +606,8 @@ const inheritedProperties = computed(() => {
   const computedAuthHeader = getComputedAuthHeaders(
     aggregateEnvs.value,
     request.value,
-    props.inheritedProperties.auth.inheritedAuth
+    props.inheritedProperties.auth.inheritedAuth,
+    false
   )[0]
 
   if (

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

@@ -112,7 +112,7 @@ const handleAccessTokenRequest = async () => {
   }
 
   const envs = getCombinedEnvVariables()
-  const envVars = [...envs.selected, ...envs.global]
+  const envVars = [...envs.selected.variables, ...envs.global]
 
   try {
     const tokenReqParams = {

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

@@ -64,7 +64,6 @@
             :icon="IconShare2"
             :label="t('tab.share_tab_request')"
             :shortcut="['S']"
-            :new="true"
             @click="
               () => {
                 emit('share-tab-request')

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

@@ -211,7 +211,6 @@ import { useI18n } from "@composables/i18n"
 import {
   globalEnv$,
   selectedEnvironmentIndex$,
-  setGlobalEnvVariables,
   setSelectedEnvironmentIndex,
 } from "~/newstore/environments"
 import { HoppTestResult } from "~/helpers/types/HoppTestResult"
@@ -225,6 +224,7 @@ import { useColorMode } from "~/composables/theming"
 import { useVModel } from "@vueuse/core"
 import { useService } from "dioc/vue"
 import { WorkspaceService } from "~/services/workspace.service"
+import { invokeAction } from "~/helpers/actions"
 
 const props = defineProps<{
   modelValue: HoppTestResult | null | undefined
@@ -304,9 +304,10 @@ const globalHasAdditions = computed(() => {
 
 const addEnvToGlobal = () => {
   if (!testResults.value?.envDiff.selected.additions) return
-  setGlobalEnvVariables([
-    ...globalEnvVars.value,
-    ...testResults.value.envDiff.selected.additions,
-  ])
+
+  invokeAction("modals.global.environment.update", {
+    variables: testResults.value.envDiff.selected.additions,
+    isSecret: false,
+  })
 }
 </script>