feat: implement live updates for env update modal highlights

packages/hoppscotch-app/components/environments/Edit.vue

@@ -62,6 +62,7 @@
             <SmartEnvInput
               v-model="variable.value"
               :placeholder="`${$t('count.value', { count: index + 1 })}`"
+              :envs="liveEnvs"
               :name="'value' + index"
             />
             <div class="flex">
@@ -121,10 +122,12 @@ import {
   Environment,
   getEnviroment,
   getGlobalVariables,
+  globalEnv$,
   setGlobalEnvVariables,
   updateEnvironment,
 } from "~/newstore/environments"
 import { parseTemplateStringE } from "~/helpers/templating"
+import { useReadonlyStream } from "~/helpers/utils/composables"
 
 export default defineComponent({
   props: {
@@ -135,6 +138,8 @@ export default defineComponent({
     },
   },
   setup(props) {
+    const globalVars = useReadonlyStream(globalEnv$, [])
+
     const workingEnv = computed(() => {
       if (props.editingEnvironmentIndex === null) return null
 
@@ -149,6 +154,7 @@ export default defineComponent({
     })
 
     return {
+      globalVars,
       workingEnv,
     }
   },
@@ -171,6 +177,20 @@ export default defineComponent({
       }
       return false
     },
+    liveEnvs(): Array<{ key: string; value: string; source: string }> {
+      if (this.evnExpandError) {
+        return []
+      }
+
+      if (this.$props.editingEnvironmentIndex === "Global") {
+        return [...this.vars.map((x) => ({ ...x, source: this.name! }))]
+      } else {
+        return [
+          ...this.vars.map((x) => ({ ...x, source: this.name! })),
+          ...this.globalVars.map((x) => ({ ...x, source: "Global" })),
+        ]
+      }
+    },
   },
   watch: {
     show() {

packages/hoppscotch-app/components/smart/EnvInput.vue

@@ -16,7 +16,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch, nextTick } from "@nuxtjs/composition-api"
+import {
+  ref,
+  onMounted,
+  watch,
+  nextTick,
+  computed,
+  Ref,
+} from "@nuxtjs/composition-api"
 import {
   EditorView,
   placeholder as placeholderExt,
@@ -26,19 +33,22 @@ import {
 import { EditorState, Extension } from "@codemirror/state"
 import clone from "lodash/clone"
 import { inputTheme } from "~/helpers/editor/themes/baseTheme"
-import { HoppEnvironmentPlugin } from "~/helpers/editor/extensions/HoppEnvironment"
-import { useStreamSubscriber } from "~/helpers/utils/composables"
+import { HoppReactiveEnvPlugin } from "~/helpers/editor/extensions/HoppEnvironment"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import { AggregateEnvironment, aggregateEnvs$ } from "~/newstore/environments"
 
 const props = withDefaults(
   defineProps<{
     value: string
     placeholder: string
     styles: string
+    envs: { key: string; value: string; source: string }[] | null
   }>(),
   {
     value: "",
     placeholder: "",
     styles: "",
+    envs: null,
   }
 )
 
@@ -85,11 +95,23 @@ watch(
   }
 )
 
-const { subscribeToStream } = useStreamSubscriber()
-
 let clipboardEv: ClipboardEvent | null = null
 
-const envTooltipPlugin = new HoppEnvironmentPlugin(subscribeToStream, view)
+const aggregateEnvs = useReadonlyStream(aggregateEnvs$, []) as Ref<
+  AggregateEnvironment[]
+>
+
+const envVars = computed(() =>
+  props.envs
+    ? props.envs.map((x) => ({
+        key: x.key,
+        value: x.value,
+        sourceEnv: x.source,
+      }))
+    : aggregateEnvs.value
+)
+
+const envTooltipPlugin = new HoppReactiveEnvPlugin(envVars, view)
 
 const initView = (el: any) => {
   const extensions: Extension = [

packages/hoppscotch-app/helpers/editor/extensions/HoppEnvironment.ts

@@ -1,3 +1,4 @@
+import { watch, Ref } from "@nuxtjs/composition-api"
 import { Compartment } from "@codemirror/state"
 import { hoverTooltip } from "@codemirror/tooltip"
 import {
@@ -6,7 +7,6 @@ import {
   MatchDecorator,
   ViewPlugin,
 } from "@codemirror/view"
-import { Ref } from "@nuxtjs/composition-api"
 import { StreamSubscriberFunc } from "~/helpers/utils/composables"
 import {
   AggregateEnvironment,
@@ -144,3 +144,36 @@ export class HoppEnvironmentPlugin {
     ])
   }
 }
+
+export class HoppReactiveEnvPlugin {
+  private compartment = new Compartment()
+
+  private envs: AggregateEnvironment[] = []
+
+  constructor(
+    envsRef: Ref<AggregateEnvironment[]>,
+    private editorView: Ref<EditorView | undefined>
+  ) {
+    watch(
+      envsRef,
+      (envs) => {
+        this.envs = envs
+
+        this.editorView.value?.dispatch({
+          effects: this.compartment.reconfigure([
+            cursorTooltipField(this.envs),
+            environmentHighlightStyle(this.envs),
+          ]),
+        })
+      },
+      { immediate: true }
+    )
+  }
+
+  get extension() {
+    return this.compartment.of([
+      cursorTooltipField(this.envs),
+      environmentHighlightStyle(this.envs),
+    ])
+  }
+}