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>