feat: indicate global variable

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

@@ -59,6 +59,20 @@
                   </p>
                 </div>
               </div>
+              <HttpTestResultEnv
+                v-for="(env, index) in testResults.envDiff.global.additions"
+                :key="`env-${env.key}-${index}`"
+                :env="env"
+                status="additions"
+                global
+              />
+              <HttpTestResultEnv
+                v-for="(env, index) in testResults.envDiff.global.updations"
+                :key="`env-${env.key}-${index}`"
+                :env="env"
+                status="updations"
+                global
+              />
               <HttpTestResultEnv
                 v-for="(env, index) in testResults.envDiff.selected.additions"
                 :key="`env-${env.key}-${index}`"

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

@@ -1,21 +1,29 @@
 <template>
-  <div class="flex items-center px-4 py-2">
+  <div class="flex items-center justify-between px-4 py-2">
-    <i
+    <div class="flex items-center">
-      v-tippy="{ theme: 'tooltip' }"
+      <i
-      class="mr-4 material-icons cursor-help"
+        v-tippy="{ theme: 'tooltip' }"
-      :class="getStyle(status)"
+        class="mr-4 material-icons cursor-help"
-      :title="`${t(getTooltip(status))}`"
+        :class="getStyle(status)"
+        :title="`${t(getTooltip(status))}`"
+      >
+        {{ getIcon(status) }}
+      </i>
+      <span class="text-secondaryDark">
+        {{ env.key }}
+      </span>
+      <span class="text-secondaryDark">
+        {{ ` \xA0 — \xA0 ${env.value}` }}
+      </span>
+      <span v-if="status === 'updations'" class="text-secondaryLight">
+        {{ ` \xA0 ← \xA0 ${env.previousValue}` }}
+      </span>
+    </div>
+    <span
+      v-if="global"
+      class="bg-accentLight px-1 rounded text-accentContrast text-tiny"
     >
-      {{ getIcon(status) }}
+      Global
-    </i>
-    <span class="text-secondaryDark">
-      {{ env.key }}
-    </span>
-    <span class="text-secondaryDark">
-      {{ ` \xA0 — \xA0 ${env.value}` }}
-    </span>
-    <span v-if="status === 'updations'" class="text-secondaryLight">
-      {{ ` \xA0 ← \xA0 ${env.previousValue}` }}
     </span>
   </div>
 </template>
@@ -31,9 +39,12 @@ type Props = {
     previousValue?: string
   }
   status: Status
+  global: boolean
 }
 
-defineProps<Props>()
+withDefaults(defineProps<Props>(), {
+  global: false,
+})
 
 const t = useI18n()
 

packages/hoppscotch-app/components/lenses/ResponseBodyRenderer.vue

@@ -24,7 +24,11 @@
       :label="$t('test.results')"
       :indicator="
         testResults &&
-        (testResults.expectResults.length || testResults.tests.length)
+        (testResults.expectResults.length ||
+          testResults.tests.length ||
+          testResults.envDiff.selected.additions.length ||
+          testResults.envDiff.selected.updations.length ||
+          testResults.envDiff.global.updations.length)
           ? true
           : false
       "