fix: secret environment flow bugs (#3817)

packages/hoppscotch-common/locales/en.json

@@ -240,7 +240,7 @@
     "profile": "Login to view your profile",
     "protocols": "Protocols are empty",
     "schema": "Connect to a GraphQL endpoint to view schema",
-    "secret_environments": "Secret environments are not synced to Hoppscotch hence user has to provide it's value during run-time.",
+    "secret_environments": "Secrets are not synced to Hoppscotch",
     "shared_requests": "Shared requests are empty",
     "shared_requests_logout": "Login to view your shared requests or create a new one",
     "subscription": "Subscriptions are empty",
@@ -272,7 +272,7 @@
     "quick_peek": "Environment Quick Peek",
     "replace_with_variable": "Replace with variable",
     "scope": "Scope",
-    "secret": "Secret",
+    "secrets": "Secrets",
     "secret_value": "Secret value",
     "select": "Select environment",
     "set": "Set environment",

packages/hoppscotch-common/src/components/environments/my/Details.vue

@@ -224,7 +224,7 @@ const tabsData: ComputedRef<
     },
     {
       id: "secret",
-      label: t("environment.secret"),
+      label: t("environment.secrets"),
       emptyStateLabel: t("empty.secret_environments"),
       isSecret: true,
       variables: secretVars.value,

packages/hoppscotch-common/src/components/environments/teams/Details.vue

@@ -229,7 +229,7 @@ const tabsData: ComputedRef<
     },
     {
       id: "secret",
-      label: t("environment.secret"),
+      label: t("environment.secrets"),
       emptyStateLabel: t("empty.secret_environments"),
       isSecret: true,
       variables: secretVars.value,

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

@@ -67,7 +67,6 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
       const envName = tooltipEnv?.sourceEnv ?? "Choose an Environment"
 
       let envValue = "Not Found"
-
       if (!tooltipEnv?.secret && tooltipEnv?.value) envValue = tooltipEnv.value
       else if (tooltipEnv?.secret && tooltipEnv.value) {
         envValue = "******"
@@ -92,11 +91,23 @@ const cursorTooltipField = (aggregateEnvs: AggregateEnvironment[]) =>
         editIcon.className =
           "ml-2 cursor-pointer text-accent hover:text-accentDark"
         editIcon.addEventListener("click", () => {
-          const isPersonalEnv =
-            envName === "Global" || selectedEnvType !== "TEAM_ENV"
-          const action = isPersonalEnv ? "my" : "team"
-          invokeAction(`modals.${action}.environment.edit`, {
-            envName,
+          let invokeActionType:
+            | "modals.my.environment.edit"
+            | "modals.team.environment.edit"
+            | "modals.global.environment.update" = "modals.my.environment.edit"
+
+          if (tooltipEnv?.sourceEnv === "Global") {
+            invokeActionType = "modals.global.environment.update"
+          } else if (selectedEnvType === "MY_ENV") {
+            invokeActionType = "modals.my.environment.edit"
+          } else if (selectedEnvType === "TEAM_ENV") {
+            invokeActionType = "modals.team.environment.edit"
+          } else {
+            invokeActionType = "modals.my.environment.edit"
+          }
+
+          invokeAction(invokeActionType, {
+            envName: tooltipEnv?.sourceEnv !== "Global" ? envName : "Global",
             variableName: parsedEnvKey,
             isSecret: tooltipEnv?.secret,
           })
@@ -185,7 +196,6 @@ export class HoppEnvironmentPlugin {
 
     subscribeToStream(aggregateEnvsWithSecrets$, (envs) => {
       this.envs = envs
-
       this.editorView.value?.dispatch({
         effects: this.compartment.reconfigure([
           cursorTooltipField(this.envs),

packages/hoppscotch-common/src/newstore/environments.ts

@@ -367,7 +367,8 @@ export const currentEnvironment$: Observable<Environment | undefined> =
         return environments[selectedEnvironmentIndex.index]
       }
       return selectedEnvironmentIndex.environment
-    })
+    }),
+    distinctUntilChanged()
   )
 
 export type AggregateEnvironment = {
@@ -476,7 +477,6 @@ export const aggregateEnvsWithSecrets$: Observable<AggregateEnvironment[]> =
   combineLatest([currentEnvironment$, globalEnv$]).pipe(
     map(([selectedEnv, globalVars]) => {
       const results: AggregateEnvironment[] = []
-
       selectedEnv?.variables.map((x, index) => {
         let value
         if (x.secret) {

packages/hoppscotch-common/src/services/inspection/inspectors/environment.inspector.ts

@@ -17,6 +17,7 @@ import {
 import { invokeAction } from "~/helpers/actions"
 import { computed } from "vue"
 import { useStreamStatic } from "~/composables/stream"
+import { SecretEnvironmentService } from "~/services/secret-environment.service"
 
 const HOPP_ENVIRONMENT_REGEX = /(<<[a-zA-Z0-9-_]+>>)/g
 
@@ -39,6 +40,7 @@ export class EnvironmentInspectorService extends Service implements Inspector {
   public readonly inspectorID = "environment"
 
   private readonly inspection = this.bind(InspectionService)
+  private readonly secretEnvs = this.bind(SecretEnvironmentService)
 
   private aggregateEnvsWithSecrets = useStreamStatic(
     aggregateEnvsWithSecrets$,
@@ -141,10 +143,18 @@ export class EnvironmentInspectorService extends Service implements Inspector {
         if (extractedEnv) {
           extractedEnv.forEach((exEnv: string) => {
             const formattedExEnv = exEnv.slice(2, -2)
+            const currentSelectedEnvironment = getCurrentEnvironment()
 
             this.aggregateEnvsWithSecrets.value.forEach((env) => {
+              const hasSecretEnv = this.secretEnvs.hasSecretValue(
+                env.sourceEnv !== "Global"
+                  ? currentSelectedEnvironment.id
+                  : "Global",
+                env.key
+              )
+
               if (env.key === formattedExEnv) {
-                if (env.value === "") {
+                if (env.secret ? !hasSecretEnv : env.value === "") {
                   const itemLocation: InspectorLocation = {
                     type: locations.type,
                     position:
@@ -157,7 +167,6 @@ export class EnvironmentInspectorService extends Service implements Inspector {
                     key: element,
                   }
 
-                  const currentSelectedEnvironment = getCurrentEnvironment()
                   const currentEnvironmentType = getSelectedEnvironmentType()
 
                   let invokeActionType:

packages/hoppscotch-common/src/services/secret-environment.service.ts

@@ -117,6 +117,21 @@ export class SecretEnvironmentService extends Service {
     this.secretEnvironments.delete(oldID)
   }
 
+  /**
+   *
+   * @param id ID of the environment
+   * @param key Key of the variable to check the value exists
+   * @returns true if the key has a secret value
+   */
+  public hasSecretValue(id: string, key: string) {
+    return (
+      this.secretEnvironments.has(id) &&
+      this.secretEnvironments
+        .get(id)!
+        .some((secretVar) => secretVar.key === key && secretVar.value !== "")
+    )
+  }
+
   /**
    * Used to update the value of a secret environment variable.
    */