feat: indicated valid and invalid environment variables with its value on hover

components/smart/EnvInput.vue

@@ -24,6 +24,7 @@
 import IntervalTree from "node-interval-tree"
 import debounce from "lodash/debounce"
 import isUndefined from "lodash/isUndefined"
+import { getCurrentEnvironment } from "~/newstore/environments"
 
 const tagsToReplace = {
   "&": "&",
@@ -54,7 +55,7 @@ export default {
       highlight: [
         {
           text: /(<<\w+>>)/g,
-          style: "text-white bg-accentDark rounded px-1 mx-0.5",
+          style: "text-white rounded px-1 mx-0.5",
         },
       ],
       highlightEnabled: true,
@@ -174,14 +175,21 @@ export default {
         result += this.safe_tags_replace(
           this.internalValue.substring(startingPosition, position.start)
         )
-        result +=
+        const envVar = this.internalValue
-          "<span class='" +
+          .substring(position.start, position.end + 1)
-          highlightPositions[k].style +
+          .slice(2, -2)
-          "'>" +
+        result += `<span class="${highlightPositions[k].style} ${
-          this.safe_tags_replace(
+          getCurrentEnvironment().variables.find((k) => k.key === envVar)
-            this.internalValue.substring(position.start, position.end + 1)
+            ?.value === undefined
-          ) +
+            ? "bg-red-500"
-          "</span>"
+            : "bg-accentDark"
+        }" title="Environment: ${
+          getCurrentEnvironment().name
+        } \xA0-\xA0 Value: ${
+          getCurrentEnvironment().variables.find((k) => k.key === envVar)?.value
+        }">${this.safe_tags_replace(
+          this.internalValue.substring(position.start, position.end + 1)
+        )}</span>`
         startingPosition = position.end + 1
       }
       if (startingPosition < this.internalValue.length)

newstore/environments.ts

@@ -210,7 +210,7 @@ export const currentEnvironment$ = combineLatest([
   map(([envs, selectedIndex]) => {
     if (selectedIndex === -1) {
       const env: Environment = {
-        name: "No Environment",
+        name: "No environment",
         variables: [],
       }
 
@@ -224,7 +224,7 @@ export const currentEnvironment$ = combineLatest([
 export function getCurrentEnvironment(): Environment {
   if (environmentsStore.value.currentEnvironmentIndex === -1) {
     return {
-      name: "No Environment",
+      name: "No environment",
       variables: [],
     }
   }