From c9497836989efcc9738fd7bef495e76ba64c9875 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Wed, 18 Aug 2021 10:34:20 +0530
Subject: [PATCH] feat: show global envs on hover

---
 assets/scss/styles.scss       |  1 +
 components/app/Header.vue     | 13 +++++++++++++
 components/firebase/Login.vue | 13 ++++++++++---
 components/smart/EnvInput.vue | 36 +++++++++++++++++------------------
 components/smart/JsEditor.vue |  2 +-
 5 files changed, 43 insertions(+), 22 deletions(-)

diff --git a/assets/scss/styles.scss b/assets/scss/styles.scss
index 905447ef2..5991a9a46 100644
--- a/assets/scss/styles.scss
+++ b/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;
diff --git a/components/app/Header.vue b/components/app/Header.vue
index 9ff00e746..3cee83eda 100644
--- a/components/app/Header.vue
+++ b/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) => {
diff --git a/components/firebase/Login.vue b/components/firebase/Login.vue
index b662ebf83..322f74b5e 100644
--- a/components/firebase/Login.vue
+++ b/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",
+          })
         }
       }
 
diff --git a/components/smart/EnvInput.vue b/components/smart/EnvInput.vue
index 63e76eb6f..fb2c08e95 100644
--- a/components/smart/EnvInput.vue
+++ b/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>
diff --git a/components/smart/JsEditor.vue b/components/smart/JsEditor.vue
index 10c4648fa..2f7ea4239 100644
--- a/components/smart/JsEditor.vue
+++ b/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
         })
     })