feat: show global envs on hover

assets/scss/styles.scss

@@ -358,6 +358,7 @@ input[type="checkbox"] {
         @apply px-4;
         @apply bg-opacity-10;
         @apply ml-auto;
+        @apply last:ml-4;
         @apply sm:ml-8;
         @apply transition;
         @apply rounded;

components/app/Header.vue

@@ -115,6 +115,19 @@ export default defineComponent({
         icon: "cookie",
         duration: 0,
         action: [
+          {
+            text: this.$t("action.learn_more").toString(),
+            onClick: (_, toastObject) => {
+              setLocalConfig("cookiesAllowed", "yes")
+              toastObject.goAway(0)
+              window
+                .open(
+                  "https://github.com/hoppscotch/hoppscotch/wiki/Privacy-Policy",
+                  "_blank"
+                )
+                .focus()
+            },
+          },
           {
             text: this.$t("action.dismiss").toString(),
             onClick: (_, toastObject) => {

components/firebase/Login.vue

@@ -228,7 +228,7 @@ export default {
               text: this.$t("yes"),
               onClick: async (_, toastObject) => {
                 const { user } = await signInWithGithub()
-                await user.linkAndRetrieveDataWithCredential(pendingCred)
+                await user.linkWithCredential(pendingCred)
 
                 this.showLoginSuccess()
 
@@ -236,6 +236,10 @@ export default {
               },
             },
           })
+        } else {
+          this.$toast.error(this.$t("error.something_went_wrong"), {
+            icon: "error",
+          })
         }
       }
 
@@ -304,8 +308,7 @@ export default {
               text: this.$t("yes"),
               onClick: async (_, toastObject) => {
                 const { user } = await signInUserWithGoogle()
-                // TODO: handle deprecation
-                await user.linkAndRetrieveDataWithCredential(pendingCred)
+                await user.linkWithCredential(pendingCred)
 
                 this.showLoginSuccess()
 
@@ -313,6 +316,10 @@ export default {
               },
             },
           })
+        } else {
+          this.$toast.error(this.$t("error.something_went_wrong"), {
+            icon: "error",
+          })
         }
       }
 

components/smart/EnvInput.vue

@@ -25,10 +25,7 @@ import IntervalTree from "node-interval-tree"
 import debounce from "lodash/debounce"
 import isUndefined from "lodash/isUndefined"
 import { tippy } from "vue-tippy"
-import {
-  currentEnvironment$,
-  getCurrentEnvironment,
-} from "~/newstore/environments"
+import { aggregateEnvs$ } from "~/newstore/environments"
 import { useReadonlyStream } from "~/helpers/utils/composables"
 
 const tagsToReplace = {
@@ -53,13 +50,9 @@ export default defineComponent({
     },
   },
   setup() {
-    const currentEnvironment = useReadonlyStream(
-      currentEnvironment$,
-      getCurrentEnvironment()
-    )
-
+    const aggregateEnvs = useReadonlyStream(aggregateEnvs$)
     return {
-      currentEnvironment,
+      aggregateEnvs,
     }
   },
   data() {
@@ -83,7 +76,7 @@ export default defineComponent({
   },
 
   watch: {
-    currentEnvironment() {
+    aggregateEnvs() {
       this.processHighlights()
     },
     highlightStyle() {
@@ -201,15 +194,14 @@ export default defineComponent({
           .substring(position.start, position.end + 1)
           .slice(2, -2)
         result += `<span class="${highlightPositions[k].style} ${
-          this.currentEnvironment.variables.find((k) => k.key === envVar)
-            ?.value === undefined
+          this.aggregateEnvs.find((k) => k.key === envVar)?.value === undefined
             ? "bg-red-400 text-red-50 hover:bg-red-600"
             : "bg-accentDark text-accentContrast hover:bg-accent"
-        }" v-tippy data-tippy-content="environment: ${
-          this.currentEnvironment.name
-        } • value: ${
-          this.currentEnvironment.variables.find((k) => k.key === envVar)?.value
-        }">${this.safe_tags_replace(
+        }" v-tippy data-tippy-content="${this.getEnvName(
+          this.aggregateEnvs.find((k) => k.key === envVar)?.sourceEnv
+        )} <kbd>${this.getEnvValue(
+          this.aggregateEnvs.find((k) => k.key === envVar)?.value
+        )}</kbd>">${this.safe_tags_replace(
           this.internalValue.substring(position.start, position.end + 1)
         )}</span>`
         startingPosition = position.end + 1
@@ -459,6 +451,14 @@ export default defineComponent({
         textRange.select()
       }
     },
+    getEnvName(name) {
+      if (name) return name
+      return "choose an environment"
+    },
+    getEnvValue(value) {
+      if (value) return value
+      return "not found"
+    },
   },
 })
 </script>

components/smart/JsEditor.vue

@@ -104,7 +104,7 @@ export default {
         })
         .catch(() => {
           // nextTIck shouldn't really ever throw but still
-          this.initalized = true
+          this.initialized = true
         })
     })