fix: code refactor and handle secret var in req var

packages/hoppscotch-common/src/components/smart/EnvInput.vue

@@ -79,10 +79,7 @@ import { history, historyKeymap } from "@codemirror/commands"
 import { inputTheme } from "~/helpers/editor/themes/baseTheme"
 import { HoppReactiveEnvPlugin } from "~/helpers/editor/extensions/HoppEnvironment"
 import { useReadonlyStream } from "@composables/stream"
-import {
-  AggregateEnvironment,
-  aggregateEnvsWithSecrets$,
-} from "~/newstore/environments"
+import { AggregateEnvironment, aggregateEnvs$ } from "~/newstore/environments"
 import { platform } from "~/platform"
 import { onClickOutside, useDebounceFn } from "@vueuse/core"
 import { InspectorResult } from "~/services/inspection"
@@ -356,56 +353,51 @@ watch(
 let clipboardEv: ClipboardEvent | null = null
 let pastedValue: string | null = null
 
-const aggregateEnvs = useReadonlyStream(aggregateEnvsWithSecrets$, []) as Ref<
+const aggregateEnvs = useReadonlyStream(aggregateEnvs$, []) as Ref<
   AggregateEnvironment[]
 >
 
 const tabs = useService(RESTTabService)
 
 const envVars = computed(() => {
-  return props.envs
-    ? props.envs.map((x) => {
-        if (x.secret) {
-          return {
-            key: x.key,
-            sourceEnv: "sourceEnv" in x ? x.sourceEnv : null,
-            value: "********",
-            secret: true,
-          }
-        }
-        return {
-          key: x.key,
-          value: x.value,
-          sourceEnv: "sourceEnv" in x ? x.sourceEnv : null,
-          secret: false,
-        }
-      })
-    : [
-        ...tabs.currentActiveTab.value.document.request.requestVariables.map(
-          (x) =>
-            x.active
-              ? {
-                  key: x.key,
-                  value: x.value,
-                  sourceEnv: "RequestVariable",
-                  secret: false,
-                }
-              : ([] as unknown as AggregateEnvironment)
-        ),
-        ...aggregateEnvs.value,
-      ]
+  if (props.envs) {
+    return props.envs.map((x) => {
+      const { key, secret } = x
+      const value = secret ? "********" : x.value
+      const sourceEnv = "sourceEnv" in x ? x.sourceEnv : null
+      return {
+        key,
+        value,
+        sourceEnv,
+        secret,
+      }
+    })
+  }
+  return [
+    ...tabs.currentActiveTab.value.document.request.requestVariables.map(
+      ({ active, key, value }) =>
+        active
+          ? {
+              key,
+              value,
+              sourceEnv: "RequestVariable",
+              secret: false,
+            }
+          : ({} as AggregateEnvironment)
+    ),
+    ...aggregateEnvs.value,
+  ]
 })
 
 function envAutoCompletion(context: CompletionContext) {
-  const options = envVars.value
-    ? envVars.value.map((env) => {
-        return {
-          label: `<<${env.key}>>`,
-          info: env.value,
-          apply: `<<${env.key}>>`,
-        }
-      })
-    : []
+  const options = (envVars.value ?? [])
+    .map((env) => ({
+      label: env?.key ? `<<${env.key}>>` : "",
+      info: env?.value ?? "",
+      apply: env?.key ? `<<${env.key}>>` : "",
+    }))
+    .filter((x) => x)
+
   const nodeBefore = syntaxTree(context.state).resolveInner(context.pos, -1)
   const textBefore = context.state.sliceDoc(nodeBefore.from, context.pos)
   const tagBefore = /<<\w*$/.exec(textBefore)

packages/hoppscotch-common/src/helpers/editor/extensions/HoppEnvironment.ts

@@ -13,7 +13,7 @@ import { StreamSubscriberFunc } from "@composables/stream"
 import {
   AggregateEnvironment,
   aggregateEnvsWithSecrets$,
-  getAggregateEnvsWithSecrets,
+  getAggregateEnvs,
   getCurrentEnvironment,
   getSelectedEnvironmentType,
 } from "~/newstore/environments"
@@ -100,7 +100,12 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
 
       const result = parseTemplateStringE(envValue, aggregateEnvs)
 
-      const finalEnv = E.isLeft(result) ? "error" : result.right
+      let finalEnv = E.isLeft(result) ? "error" : result.right
+
+      // If the request variable has an secret variable
+      // parseTemplateStringE is passed the secret value which has value undefined
+      // So, we need to check if the result is undefined and then set the finalEnv to ******
+      if (finalEnv === "undefined") finalEnv = "******"
 
       const selectedEnvType = getSelectedEnvironmentType()
 
@@ -224,7 +229,7 @@ export class HoppEnvironmentPlugin {
     subscribeToStream: StreamSubscriberFunc,
     private editorView: Ref<EditorView | undefined>
   ) {
-    const aggregateEnvs = getAggregateEnvsWithSecrets()
+    const aggregateEnvs = getAggregateEnvs()
     const currentTab = restTabs.currentActiveTab.value
 
     watch(