chore: resolve global env in team env and tooltip UI update (hoppscotch#5187)

Author: nivedin

packages/hoppscotch-common/assets/scss/styles.scss

@@ -158,7 +158,6 @@ a {
     @apply shadow-none #{!important};
     @apply fixed;
     @apply inline-flex;
-    @apply -mt-7;
   }
 }
 
@@ -169,7 +168,7 @@ a {
   @apply shadow;
 
   .tippy-content {
-    @apply flex;
+    @apply flex flex-col;
     @apply text-tiny text-primary;
     @apply font-semibold;
     @apply px-2 py-1;

packages/hoppscotch-common/locales/en.json

@@ -407,12 +407,14 @@
     "added": "Environment addition",
     "create_new": "Create new environment",
     "created": "Environment created",
+    "current_value": "Current value",
     "deleted": "Environment deletion",
     "duplicated": "Environment duplicated",
     "edit": "Edit Environment",
     "empty_variables": "No variables",
     "global": "Global",
     "global_variables": "Global variables",
+    "initial_value": "Initial value",
     "import_or_create": "Import or create a environment",
     "invalid_name": "Please provide a name for the environment",
     "list": "Environment variables",

packages/hoppscotch-common/src/components/environments/Selector.vue

@@ -239,9 +239,14 @@
                   {{ t("environment.name") }}
                 </span>
                 <span
-                  class="min-w-[9rem] w-full truncate text-tiny font-semibold"
+                  class="min-w-[4rem] w-full truncate text-tiny font-semibold"
                 >
-                  {{ t("environment.value") }}
+                  {{ t("environment.initial_value") }}
+                </span>
+                <span
+                  class="min-w-[4rem] w-full truncate text-tiny font-semibold"
+                >
+                  {{ t("environment.current_value") }}
                 </span>
               </div>
               <div
@@ -252,7 +257,13 @@
                 <span class="min-w-[9rem] w-1/4 truncate text-secondaryLight">
                   {{ variable.key }}
                 </span>
-                <span class="min-w-[9rem] w-full truncate text-secondaryLight">
+                <span class="min-w-[4rem] w-full truncate text-secondaryLight">
+                  <template v-if="variable.secret"> ******** </template>
+                  <template v-else>
+                    {{ variable.initialValue }}
+                  </template>
+                </span>
+                <span class="min-w-[4rem] w-full truncate text-secondaryLight">
                   <template v-if="variable.secret"> ******** </template>
                   <template v-else>
                     {{ variable.currentValue }}
@@ -297,9 +308,14 @@
                   {{ t("environment.name") }}
                 </span>
                 <span
-                  class="min-w-[9rem] w-full truncate text-tiny font-semibold"
+                  class="min-w-[4rem] w-full truncate text-tiny font-semibold"
                 >
-                  {{ t("environment.value") }}
+                  {{ t("environment.initial_value") }}
+                </span>
+                <span
+                  class="min-w-[4rem] w-full truncate text-tiny font-semibold"
+                >
+                  {{ t("environment.current_value") }}
                 </span>
               </div>
               <div
@@ -310,7 +326,13 @@
                 <span class="min-w-[9rem] w-1/4 truncate text-secondaryLight">
                   {{ variable.key }}
                 </span>
-                <span class="min-w-[9rem] w-full truncate text-secondaryLight">
+                <span class="min-w-[4rem] w-full truncate text-secondaryLight">
+                  <template v-if="variable.secret"> ******** </template>
+                  <template v-else>
+                    {{ variable.initialValue }}
+                  </template>
+                </span>
+                <span class="min-w-[4rem] w-full truncate text-secondaryLight">
                   <template v-if="variable.secret"> ******** </template>
                   <template v-else>
                     {{ variable.currentValue }}

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

@@ -159,7 +159,11 @@ import * as A from "fp-ts/Array"
 import * as O from "fp-ts/Option"
 import * as TE from "fp-ts/TaskEither"
 import { flow, pipe } from "fp-ts/function"
-import { Environment, parseTemplateStringE } from "@hoppscotch/data"
+import {
+  Environment,
+  GlobalEnvironment,
+  parseTemplateStringE,
+} from "@hoppscotch/data"
 import { refAutoReset } from "@vueuse/core"
 import { clone } from "lodash-es"
 import { useToast } from "@composables/toast"
@@ -181,6 +185,8 @@ import { useService } from "dioc/vue"
 import { SecretEnvironmentService } from "~/services/secret-environment.service"
 import { getEnvActionErrorMessage } from "~/helpers/error-messages"
 import { CurrentValueService } from "~/services/current-environment-value.service"
+import { useReadonlyStream } from "~/composables/stream"
+import { globalEnv$ } from "~/newstore/environments"
 
 type EnvironmentVariable = {
   id: number
@@ -259,6 +265,8 @@ const vars = ref<EnvironmentVariable[]>([
 const secretEnvironmentService = useService(SecretEnvironmentService)
 const currentEnvironmentValueService = useService(CurrentValueService)
 
+const globalEnv = useReadonlyStream(globalEnv$, {} as GlobalEnvironment)
+
 const secretVars = computed(() =>
   pipe(
     vars.value,
@@ -302,6 +310,7 @@ const liveEnvs = computed(() => {
   }
   return [
     ...vars.value.map((x) => ({ ...x.env, sourceEnv: editingName.value! })),
+    ...globalEnv.value.variables.map((x) => ({ ...x, sourceEnv: "Global" })),
   ]
 })
 

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

@@ -17,7 +17,7 @@
         v-else
         ref="editor"
         :placeholder="placeholder"
-        class="flex flex-1 truncate"
+        class="flex flex-1 truncate relative"
         :class="styles"
         @click="emit('click', $event)"
         @keydown="handleKeystroke"
@@ -85,7 +85,10 @@ import { inputTheme } from "~/helpers/editor/themes/baseTheme"
 import { HoppReactiveEnvPlugin } from "~/helpers/editor/extensions/HoppEnvironment"
 import { HoppPredefinedVariablesPlugin } from "~/helpers/editor/extensions/HoppPredefinedVariables"
 import { useReadonlyStream } from "@composables/stream"
-import { AggregateEnvironment, aggregateEnvs$ } from "~/newstore/environments"
+import {
+  AggregateEnvironment,
+  aggregateEnvsWithCurrentValue$,
+} from "~/newstore/environments"
 import { platform } from "~/platform"
 import { onClickOutside, useDebounceFn } from "@vueuse/core"
 import { InspectorResult } from "~/services/inspection"
@@ -365,9 +368,10 @@ watch(
 let clipboardEv: ClipboardEvent | null = null
 let pastedValue: string | null = null
 
-const aggregateEnvs = useReadonlyStream(aggregateEnvs$, []) as Ref<
-  AggregateEnvironment[]
->
+const aggregateEnvs = useReadonlyStream(
+  aggregateEnvsWithCurrentValue$,
+  []
+) as Ref<AggregateEnvironment[]>
 
 const tabs = useService(RESTTabService)
 
@@ -377,7 +381,7 @@ const envVars = computed(() => {
       const { key, secret } = x
       const currentValue = secret ? "********" : x.currentValue
       const initialValue = secret ? "********" : x.initialValue
-      const sourceEnv = "sourceEnv" in x ? x.sourceEnv : null
+      const sourceEnv = "sourceEnv" in x ? x.sourceEnv : ""
       return {
         key,
         currentValue,