feat: alert when no environment selected

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

@@ -34,36 +34,41 @@
               </span>
             </summary>
             <div class="divide-y divide-dividerLight">
+              <div
+                v-if="noEnvSelected"
+                class="flex bg-error p-4 text-secondaryDark"
+              >
+                <i class="mr-4 material-icons"> warning </i>
+                <div class="flex flex-col">
+                  <p>
+                    {{ t("environment.no_environment_description") }}
+                  </p>
+                  <p class="space-x-2 flex mt-3">
+                    <ButtonSecondary
+                      :label="t('environment.add_to_global')"
+                      class="text-tiny !bg-primary"
+                      filled
+                    />
+                    <ButtonSecondary
+                      :label="t('environment.create_new')"
+                      class="text-tiny !bg-primary"
+                      filled
+                    />
+                  </p>
+                </div>
+              </div>
               <HttpTestResultEnv
-                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"
+                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.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}`"
@@ -165,7 +170,15 @@
 
 <script setup lang="ts">
 import { computed } from "@nuxtjs/composition-api"
-import { useReadonlyStream, useI18n } from "~/helpers/utils/composables"
+import {
+  useReadonlyStream,
+  useI18n,
+  useStream,
+} from "~/helpers/utils/composables"
+import {
+  selectedEnvIndex$,
+  setCurrentEnvironment,
+} from "~/newstore/environments"
 import { restTestResults$, setRESTTestResults } from "~/newstore/RESTSession"
 
 const t = useI18n()
@@ -185,4 +198,12 @@ const haveEnvVariables = computed(() => {
     testResults.value.envDiff.selected.deletions.length
   )
 })
+
+const selectedEnvironmentIndex = useStream(
+  selectedEnvIndex$,
+  -1,
+  setCurrentEnvironment
+)
+
+const noEnvSelected = computed(() => selectedEnvironmentIndex.value === -1)
 </script>

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

@@ -1,6 +1,11 @@
 <template>
   <div class="flex items-center px-4 py-2">
-    <i class="mr-4 material-icons" :class="getStyle(status)">
+    <i
+      v-tippy="{ theme: 'tooltip' }"
+      class="mr-4 material-icons cursor-help"
+      :class="getStyle(status)"
+      :title="`${t(getTooltip(status))}`"
+    >
       {{ getIcon(status) }}
     </i>
     <span class="text-secondaryDark">
@@ -16,6 +21,8 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from "~/helpers/utils/composables"
+
 type Status = "updations" | "additions" | "deletions"
 type Props = {
   env: {
@@ -28,14 +35,16 @@ type Props = {
 
 defineProps<Props>()
 
+const t = useI18n()
+
 const getIcon = (status: Status) => {
   switch (status) {
     case "additions":
-      return "add_circle_outline"
+      return "add_circle"
     case "updations":
-      return "check_circle_outline"
+      return "check_circle"
     case "deletions":
-      return "remove_circle_outline"
+      return "remove_circle"
   }
 }
 
@@ -49,4 +58,15 @@ const getStyle = (status: Status) => {
       return "text-red-500"
   }
 }
+
+const getTooltip = (status: Status) => {
+  switch (status) {
+    case "additions":
+      return "environment.added"
+    case "updations":
+      return "environment.updated"
+    case "deletions":
+      return "environment.deleted"
+  }
+}
 </script>