fix: additional envs

packages/hoppscotch-app/components/http/TestResult.vue

@@ -38,11 +38,37 @@
                 v-for="(env, index) in testResults.envDiff.global.updations"
                 :key="`env-${env.key}-${index}`"
                 :env="env"
+                status="updations"
+              />
+              <HttpTestResultEnv
+                v-for="(env, index) in testResults.envDiff.global.additions"
+                :key="`env-${env.key}-${index}`"
+                :env="env"
+                status="additions"
+              />
+              <HttpTestResultEnv
+                v-for="(env, index) in testResults.envDiff.global.deletions"
+                :key="`env-${env.key}-${index}`"
+                :env="env"
+                status="deletions"
               />
               <HttpTestResultEnv
                 v-for="(env, index) in testResults.envDiff.selected.updations"
                 :key="`env-${env.key}-${index}`"
                 :env="env"
+                status="updations"
+              />
+              <HttpTestResultEnv
+                v-for="(env, index) in testResults.envDiff.selected.additions"
+                :key="`env-${env.key}-${index}`"
+                :env="env"
+                status="additions"
+              />
+              <HttpTestResultEnv
+                v-for="(env, index) in testResults.envDiff.selected.deletions"
+                :key="`env-${env.key}-${index}`"
+                :env="env"
+                status="deletions"
               />
             </div>
           </details>
@@ -151,8 +177,12 @@ const clearContent = () => setRESTTestResults(null)
 const haveEnvVariables = computed(() => {
   if (!testResults.value) return false
   return (
+    testResults.value.envDiff.global.additions.length ||
     testResults.value.envDiff.global.updations.length ||
-    testResults.value.envDiff.selected.updations.length
+    testResults.value.envDiff.global.deletions.length ||
+    testResults.value.envDiff.selected.additions.length ||
+    testResults.value.envDiff.selected.updations.length ||
+    testResults.value.envDiff.selected.deletions.length
   )
 })
 </script>

packages/hoppscotch-app/components/http/TestResultEnv.vue

@@ -1,24 +1,52 @@
 <template>
   <div class="flex items-center px-4 py-2">
-    <i class="mr-4 material-icons text-accentLight"> lock </i>
+    <i class="mr-4 material-icons" :class="getStyle(status)">
+      {{ getIcon(status) }}
+    </i>
     <span class="text-secondaryDark">
       {{ env.key }}
     </span>
     <span class="text-secondaryDark">
       {{ ` \xA0 — \xA0 ${env.value}` }}
     </span>
-    <span class="text-secondaryLight">
+    <span v-if="status === 'updations'" class="text-secondaryLight">
       {{ ` \xA0 ← \xA0 ${env.previousValue}` }}
     </span>
   </div>
 </template>
 
 <script setup lang="ts">
-defineProps<{
+type Status = "updations" | "additions" | "deletions"
+type Props = {
   env: {
     key: string
     value: string
-    previousValue: string
+    previousValue?: string
   }
-}>()
+  status: Status
+}
+
+defineProps<Props>()
+
+const getIcon = (status: Status) => {
+  switch (status) {
+    case "additions":
+      return "add_circle_outline"
+    case "updations":
+      return "check_circle_outline"
+    case "deletions":
+      return "remove_circle_outline"
+  }
+}
+
+const getStyle = (status: Status) => {
+  switch (status) {
+    case "additions":
+      return "text-green-500"
+    case "updations":
+      return "text-yellow-500"
+    case "deletions":
+      return "text-red-500"
+  }
+}
 </script>

packages/hoppscotch-app/helpers/RequestRunner.ts

@@ -11,6 +11,7 @@ import {
   TestDescriptor,
 } from "@hoppscotch/js-sandbox"
 import { isRight } from "fp-ts/Either"
+import cloneDeep from "lodash/cloneDeep"
 import {
   getCombinedEnvVariables,
   getFinalEnvsFromPreRequest,
@@ -91,8 +92,6 @@ export const runRESTRequest$ = (): TaskEither<
             })()
 
             if (isRight(runResult)) {
-              debugger
-
               setRESTTestResults(translateToSandboxTestResults(runResult.right))
 
               setGlobalEnvVariables(runResult.right.envs.global)
@@ -156,22 +155,23 @@ const getUpdatedEnvVariables = (
     updated,
     A.filterMap(
       flow(
-        O.fromPredicate(
-          (x) => current.findIndex((y) => x.key === y.key) === -1
+        O.of,
+        O.bindTo("env"),
+        O.bind("index", ({ env }) =>
+          pipe(
+            current.findIndex((x) => x.key === env.key),
+            O.fromPredicate((x) => x !== -1)
+          )
         ),
         O.chain(
           O.fromPredicate(
-            (x) => current.findIndex((y) => x.value !== y.value) === -1
+            ({ env, index }) => env.value !== current[index].value
           )
         ),
-        O.map((x) => {
-          const match = current.find((y) => x.key === y.key)!.value
-
-          return {
-            ...x,
-            previousValue: match,
-          }
-        })
+        O.map(({ env, index }) => ({
+          ...env,
+          previousValue: current[index].value,
+        }))
       )
     )
   )
@@ -187,8 +187,8 @@ function translateToSandboxTestResults(
     }
   }
 
-  const globals = getGlobalVariables()
-  const env = getCurrentEnvironment()
+  const globals = cloneDeep(getGlobalVariables())
+  const env = cloneDeep(getCurrentEnvironment())
 
   return {
     description: "",

packages/hoppscotch-app/helpers/preRequest.ts

@@ -1,13 +1,14 @@
 import { runPreRequestScript } from "@hoppscotch/js-sandbox"
 import { Environment } from "@hoppscotch/data"
+import cloneDeep from "lodash/cloneDeep"
 import {
   getCurrentEnvironment,
   getGlobalVariables,
 } from "~/newstore/environments"
 
 export const getCombinedEnvVariables = () => ({
-  global: getGlobalVariables(),
-  selected: getCurrentEnvironment().variables,
+  global: cloneDeep(getGlobalVariables()),
+  selected: cloneDeep(getCurrentEnvironment().variables),
 })
 
 export const getFinalEnvsFromPreRequest = (