From 9afe415c2da6f89a67b318af564b8edc8729cb9c Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 1 Aug 2021 14:42:32 +0530
Subject: [PATCH] feat: indicated valid and invalid environment variables with
 its value on hover

---
 components/smart/EnvInput.vue | 26 +++++++++++++++++---------
 newstore/environments.ts      |  4 ++--
 2 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/components/smart/EnvInput.vue b/components/smart/EnvInput.vue
index e24bb827d..938e2203a 100644
--- a/components/smart/EnvInput.vue
+++ b/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 = {
   "&": "&amp;",
@@ -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 +=
-          "<span class='" +
-          highlightPositions[k].style +
-          "'>" +
-          this.safe_tags_replace(
-            this.internalValue.substring(position.start, position.end + 1)
-          ) +
-          "</span>"
+        const envVar = this.internalValue
+          .substring(position.start, position.end + 1)
+          .slice(2, -2)
+        result += `<span class="${highlightPositions[k].style} ${
+          getCurrentEnvironment().variables.find((k) => k.key === envVar)
+            ?.value === undefined
+            ? "bg-red-500"
+            : "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)
diff --git a/newstore/environments.ts b/newstore/environments.ts
index 7d0321cff..b09c76abd 100644
--- a/newstore/environments.ts
+++ b/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: [],
     }
   }