refactor: modals (#1720)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>

components/app/Header.vue

@@ -185,14 +185,6 @@ export default {
     }
   },
   async mounted() {
-    this._keyListener = function (e) {
-      if (e.key === "Escape") {
-        e.preventDefault()
-        this.showExtensions = this.showShortcuts = this.showSupport = false
-      }
-    }
-    document.addEventListener("keydown", this._keyListener.bind(this))
-
     // Initializes the PWA code - checks if the app is installed,
     // etc.
     this.showInstallPrompt = await intializePwa()
@@ -277,9 +269,6 @@ export default {
     //   }, 5000)
     // }
   },
-  beforeDestroy() {
-    document.removeEventListener("keydown", this._keyListener)
-  },
   methods: {
     nativeShare() {
       if (navigator.share) {

components/collections/graphql/index.vue

@@ -170,24 +170,6 @@ export default {
       return filteredCollections
     },
   },
-  mounted() {
-    this._keyListener = function (e) {
-      if (e.key === "Escape") {
-        e.preventDefault()
-        this.showModalAdd =
-          this.showModalEdit =
-          this.showModalImportExport =
-          this.showModalAddFolder =
-          this.showModalEditFolder =
-          this.showModalEditRequest =
-            false
-      }
-    }
-    document.addEventListener("keydown", this._keyListener.bind(this))
-  },
-  beforeDestroy() {
-    document.removeEventListener("keydown", this._keyListener)
-  },
   methods: {
     displayModalAdd(shouldDisplay) {
       this.showModalAdd = shouldDisplay

components/collections/index.vue

@@ -255,27 +255,10 @@ export default {
     },
   },
   mounted() {
-    this._keyListener = function (e) {
-      if (e.key === "Escape") {
-        e.preventDefault()
-        this.showModalAdd =
-          this.showModalEdit =
-          this.showModalImportExport =
-          this.showModalAddFolder =
-          this.showModalEditFolder =
-          this.showModalEditRequest =
-            false
-      }
-    }
-    document.addEventListener("keydown", this._keyListener.bind(this))
-
     this.$subscribeTo(this.teamCollectionAdapter.collections$, (colls) => {
       this.teamCollectionsNew = cloneDeep(colls)
     })
   },
-  beforeDestroy() {
-    document.removeEventListener("keydown", this._keyListener)
-  },
   methods: {
     updateTeamCollections() {
       // TODO: Remove this at some point

components/environments/index.vue

@@ -98,21 +98,6 @@ export default {
       setCurrentEnvironment(val)
     },
   },
-  mounted() {
-    this._keyListener = function (e) {
-      if (e.key === "Escape") {
-        e.preventDefault()
-        this.showModalImportExport =
-          this.showModalAdd =
-          this.showModalEdit =
-            false
-      }
-    }
-    document.addEventListener("keydown", this._keyListener.bind(this))
-  },
-  beforeDestroy() {
-    document.removeEventListener("keydown", this._keyListener)
-  },
   methods: {
     displayModalAdd(shouldDisplay) {
       this.showModalAdd = shouldDisplay

components/firebase/Email.vue

@@ -91,17 +91,6 @@ export default {
     this.$subscribeTo(fb.currentUser$, (user) => {
       if (user) this.hideModal()
     })
-
-    this._keyListener = function (e) {
-      if (e.key === "Escape") {
-        e.preventDefault()
-        this.hideModal()
-      }
-    }
-    document.addEventListener("keydown", this._keyListener.bind(this))
-  },
-  beforeDestroy() {
-    document.removeEventListener("keydown", this._keyListener)
   },
   methods: {
     async signInWithEmail() {

components/smart/ConfirmModal.vue

@@ -47,18 +47,6 @@ export default {
       },
     },
   },
-  mounted() {
-    this._keyListener = function (e) {
-      if (e.key === "Escape") {
-        e.preventDefault()
-        this.hideModal()
-      }
-    }
-    document.addEventListener("keydown", this._keyListener.bind(this))
-  },
-  beforeDestroy() {
-    document.removeEventListener("keydown", this._keyListener)
-  },
   methods: {
     hideModal() {
       this.$emit("hide-modal")

components/smart/Modal.vue

@@ -1,6 +1,6 @@
 <template>
-  <transition name="modal" appear>
-    <div class="modal-backdrop">
+  <transition name="modal" appear @leave="onTransitionLeaveStart">
+    <div ref="modal" class="modal-backdrop" @click="onBackdropClick">
       <div class="modal-wrapper">
         <div class="modal-container">
           <div class="modal-header">
@@ -21,12 +21,74 @@
 </template>
 
 <script>
+const PORTAL_DOM_ID = "hoppscotch-modal-portal"
+
+const stack = (() => {
+  const stack = []
+  return {
+    push: stack.push.bind(stack),
+    pop: stack.pop.bind(stack),
+    peek: () => (stack.length === 0 ? undefined : stack[stack.length - 1]),
+  }
+})()
+
 export default {
+  data() {
+    return {
+      stackId: Math.random(),
+      // when transition doesn't fire on unmount, we should manually remove the modal from DOM
+      // (for example, when the parent component of this modal gets destroyed)
+      shouldCleanupDomOnUnmount: true,
+    }
+  },
   computed: {
     hasFooterSlot() {
       return !!this.$slots.footer
     },
   },
+  mounted() {
+    const $portal = this.$getPortal()
+    $portal.appendChild(this.$refs.modal)
+    stack.push(this.stackId)
+    document.addEventListener("keydown", this.onKeyDown)
+  },
+  beforeDestroy() {
+    const $modal = this.$refs.modal
+    if (this.shouldCleanupDomOnUnmount && $modal) {
+      this.$getPortal().removeChild($modal)
+    }
+    stack.pop()
+    document.removeEventListener("keydown", this.onKeyDown)
+  },
+  methods: {
+    close() {
+      this.$emit("close")
+    },
+    onBackdropClick({ target }) {
+      if (!target?.closest(".modal-container")) {
+        this.close()
+      }
+    },
+    onKeyDown(e) {
+      if (e.key === "Escape" && this.stackId === stack.peek()) {
+        e.preventDefault()
+        this.close()
+      }
+    },
+    onTransitionLeaveStart() {
+      this.shouldCleanupDomOnUnmount = false
+    },
+    $getPortal() {
+      let $el = document.querySelector("#" + PORTAL_DOM_ID)
+      if ($el) {
+        return $el
+      }
+      $el = document.createElement("DIV")
+      $el.id = PORTAL_DOM_ID
+      document.body.appendChild($el)
+      return $el
+    },
+  },
 }
 </script>
 

pages/index.vue

@@ -2169,15 +2169,6 @@ export default {
         e.preventDefault()
         this.$refs.clearAll.click()
       }
-      if (e.key === "Escape") {
-        e.preventDefault()
-        this.showCurlImportModal =
-          this.showTokenListModal =
-          this.showTokenRequestList =
-          this.showSaveRequestModal =
-          this.showCodegenModal =
-            false
-      }
       if ((e.key === "g" || e.key === "G") && e.altKey) {
         this.method = "GET"
       }