Merge remote-tracking branch 'upstream/main' into newstate/firebase

components/app/Header.vue

@@ -189,14 +189,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()
@@ -281,9 +273,6 @@ export default {
     //   }, 5000)
     // }
   },
-  beforeDestroy() {
-    document.removeEventListener("keydown", this._keyListener)
-  },
   methods: {
     nativeShare() {
       if (navigator.share) {

components/app/Section.vue

@@ -26,7 +26,7 @@ export default Vue.extend({
     },
     noLegend: {
       type: Boolean,
-      default: false,
+      default: true,
     },
   },
   computed: {

components/collections/SaveRequest.vue

@@ -232,6 +232,7 @@ export default {
       this.hideModal()
     },
     hideModal() {
+      this.picked = null
       this.$emit("hide-modal")
     },
   },

components/collections/graphql/Collection.vue

@@ -36,7 +36,7 @@
         >
           <i class="material-icons">topic</i>
         </button>
-        <v-popover v-if="!savingMode">
+        <v-popover>
           <button v-tooltip.left="$t('more')" class="tooltip-target icon">
             <i class="material-icons">more_vert</i>
           </button>
@@ -197,6 +197,14 @@ export default Vue.extend({
       this.showChildren = !this.showChildren
     },
     removeCollection() {
+      // Cancel pick if picked collection is deleted
+      if (
+        this.picked &&
+        this.picked.pickedType === "gql-my-collection" &&
+        this.picked.collectionIndex === this.collectionIndex
+      ) {
+        this.$emit("select", { picked: null })
+      }
       removeGraphqlCollection(this.collectionIndex)
 
       this.$toast.error(this.$t("deleted").toString(), {

components/collections/graphql/Folder.vue

@@ -28,7 +28,7 @@
           <span>{{ folder.name }}</span>
         </button>
       </div>
-      <v-popover v-if="!savingMode">
+      <v-popover>
         <button v-tooltip.left="$t('more')" class="tooltip-target icon">
           <i class="material-icons">more_vert</i>
         </button>
@@ -181,6 +181,15 @@ export default Vue.extend({
       this.showChildren = !this.showChildren
     },
     removeFolder() {
+      // Cancel pick if the picked folder is deleted
+      if (
+        this.picked &&
+        this.picked.pickedType === "gql-my-folder" &&
+        this.picked.folderPath === this.folderPath
+      ) {
+        this.$emit("select", { picked: null })
+      }
+
       removeGraphqlFolder(this.folderPath)
       this.$toast.error(this.$t("deleted").toString(), {
         icon: "delete",

components/collections/graphql/Request.vue

@@ -25,7 +25,7 @@
           <span>{{ request.name }}</span>
         </button>
       </div>
-      <v-popover v-if="!savingMode">
+      <v-popover>
         <button v-tooltip="$t('more')" class="tooltip-target icon">
           <i class="material-icons">more_vert</i>
         </button>
@@ -122,6 +122,16 @@ export default Vue.extend({
       dataTransfer.setData("requestIndex", this.requestIndex)
     },
     removeRequest() {
+      // Cancel pick if the picked request is deleted
+      if (
+        this.picked &&
+        this.picked.pickedType === "gql-my-request" &&
+        this.picked.folderPath === this.folderPath &&
+        this.picked.requestIndex === this.requestIndex
+      ) {
+        this.$emit("select", { picked: null })
+      }
+
       removeGraphqlRequest(this.folderPath, this.requestIndex)
       this.$toast.error(this.$t("deleted").toString(), {
         icon: "delete",

components/collections/graphql/index.vue

@@ -1,12 +1,8 @@
 <template>
-  <AppSection
-    ref="collections"
-    class="yellow"
-    :label="$t('collections')"
-    no-legend
-  >
+  <AppSection ref="collections" :label="$t('collections')">
     <div class="show-on-large-screen">
       <input
+        v-if="showCollActions"
         v-model="filterText"
         aria-label="Search"
         type="search"
@@ -50,11 +46,7 @@
       @hide-modal="displayModalImportExport(false)"
     />
     <div class="border-b row-wrapper border-divider">
-      <button
-        v-if="showCollActions"
-        class="icon"
-        @click="displayModalAdd(true)"
-      >
+      <button class="icon" @click="displayModalAdd(true)">
         <i class="material-icons">add</i>
         <span>{{ $t("new") }}</span>
       </button>
@@ -178,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
@@ -250,7 +224,9 @@ export default {
         folderName,
         request,
         requestIndex,
+        folderPath,
       } = payload
+      this.$data.editingFolderPath = folderPath
       this.$data.editingCollectionIndex = collectionIndex
       this.$data.editingFolderIndex = folderIndex
       this.$data.editingFolderName = folderName

components/collections/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppSection ref="collections" :label="$t('collections')" no-legend>
+  <AppSection ref="collections" :label="$t('collections')">
     <div class="show-on-large-screen">
       <input
         v-if="!saveRequest"
@@ -57,8 +57,7 @@
         v-if="
           collectionsType.type == 'team-collections' &&
           (collectionsType.selectedTeam == undefined ||
-            collectionsType.selectedTeam.myRole == 'VIEWER') &&
-          !saveRequest
+            collectionsType.selectedTeam.myRole == 'VIEWER')
         "
         class="icon"
         disabled
@@ -69,11 +68,7 @@
           <span>{{ $t("new") }}</span>
         </div>
       </button>
-      <button
-        v-else-if="!saveRequest"
-        class="icon"
-        @click="displayModalAdd(true)"
-      >
+      <button v-else class="icon" @click="displayModalAdd(true)">
         <i class="material-icons">add</i>
         <span>{{ $t("new") }}</span>
       </button>
@@ -261,27 +256,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
@@ -554,12 +532,30 @@ export default {
     },
     removeCollection({ collectionsType, collectionIndex, collectionID }) {
       if (collectionsType.type === "my-collections") {
+        // Cancel pick if picked collection is deleted
+        if (
+          this.picked &&
+          this.picked.pickedType === "my-collection" &&
+          this.picked.collectionIndex === collectionIndex
+        ) {
+          this.$emit("select", { picked: null })
+        }
+
         removeRESTCollection(collectionIndex)
 
         this.$toast.error(this.$t("deleted"), {
           icon: "delete",
         })
       } else if (collectionsType.type === "team-collections") {
+        // Cancel pick if picked collection is deleted
+        if (
+          this.picked &&
+          this.picked.pickedType === "teams-collection" &&
+          this.picked.collectionID === collectionID
+        ) {
+          this.$emit("select", { picked: null })
+        }
+
         if (collectionsType.selectedTeam.myRole !== "VIEWER") {
           this.$apollo
             .mutate({
@@ -592,12 +588,30 @@ export default {
     },
     removeRequest({ requestIndex, folderPath }) {
       if (this.collectionsType.type === "my-collections") {
+        // Cancel pick if the picked item is being deleted
+        if (
+          this.picked &&
+          this.picked.pickedType === "my-request" &&
+          this.picked.folderPath === folderPath &&
+          this.picked.requestIndex === requestIndex
+        ) {
+          this.$emit("select", { picked: null })
+        }
         removeRESTRequest(folderPath, requestIndex)
 
         this.$toast.error(this.$t("deleted"), {
           icon: "delete",
         })
       } else if (this.collectionsType.type === "team-collections") {
+        // Cancel pick if the picked item is being deleted
+        if (
+          this.picked &&
+          this.picked.pickedType === "teams-request" &&
+          this.picked.requestID === requestIndex
+        ) {
+          this.$emit("select", { picked: null })
+        }
+
         teamUtils
           .deleteRequest(this.$apollo, requestIndex)
           .then(() => {

components/collections/my/Collection.vue

@@ -44,7 +44,7 @@
         >
           <i class="material-icons">check_box</i>
         </button>
-        <v-popover v-if="!saveRequest">
+        <v-popover>
           <button v-tooltip.left="$t('more')" class="tooltip-target icon">
             <i class="material-icons">more_vert</i>
           </button>

components/collections/my/Folder.vue

@@ -27,7 +27,7 @@
           <span>{{ folder.name ? folder.name : folder.title }}</span>
         </button>
       </div>
-      <v-popover v-if="!saveRequest">
+      <v-popover>
         <button v-tooltip.left="$t('more')" class="tooltip-target icon">
           <i class="material-icons">more_vert</i>
         </button>
@@ -193,6 +193,15 @@ export default {
       this.showChildren = !this.showChildren
     },
     removeFolder() {
+      // TODO: Bubble it up ?
+      // Cancel pick if picked folder was deleted
+      if (
+        this.picked &&
+        this.picked.pickedType === "my-folder" &&
+        this.picked.folderPath === this.folderPath
+      ) {
+        this.$emit("select", { picked: null })
+      }
       removeRESTFolder(this.folderPath)
 
       this.$toast.error(this.$t("deleted"), {
@@ -206,6 +215,16 @@ export default {
       moveRESTRequest(folderPath, requestIndex, this.folderPath)
     },
     removeRequest({ requestIndex }) {
+      // TODO: Bubble it up to root ?
+      // Cancel pick if the picked item is being deleted
+      if (
+        this.picked &&
+        this.picked.pickedType === "my-request" &&
+        this.picked.folderPath === this.folderPath &&
+        this.picked.requestIndex === requestIndex
+      ) {
+        this.$emit("select", { picked: null })
+      }
       removeRESTRequest(this.folderPath, requestIndex)
     },
   },

components/collections/my/Request.vue

@@ -27,7 +27,7 @@
           <span>{{ request.name }}</span>
         </button>
       </div>
-      <v-popover v-if="!saveRequest">
+      <v-popover>
         <button v-tooltip="$t('more')" class="tooltip-target icon">
           <i class="material-icons">more_vert</i>
         </button>

components/collections/teams/Collection.vue

@@ -33,7 +33,7 @@
         >
           <i class="material-icons">check_box</i>
         </button>
-        <v-popover v-if="!saveRequest">
+        <v-popover>
           <button
             v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
             v-tooltip.left="$t('more')"

components/collections/teams/Folder.vue

@@ -18,7 +18,7 @@
           <span>{{ folder.name ? folder.name : folder.title }}</span>
         </button>
       </div>
-      <v-popover v-if="!saveRequest">
+      <v-popover>
         <button
           v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
           v-tooltip.left="$t('more')"
@@ -189,6 +189,15 @@ export default {
     },
     removeFolder() {
       if (this.collectionsType.selectedTeam.myRole !== "VIEWER") {
+        // Cancel pick if picked collection folder was deleted
+        if (
+          this.picked &&
+          this.picked.pickedType === "teams-folder" &&
+          this.picked.folderID === this.folder.id
+        ) {
+          this.$emit("select", { picked: null })
+        }
+
         teamUtils
           .deleteCollection(this.$apollo, this.folder.id)
           .then(() => {

components/collections/teams/Request.vue

@@ -17,7 +17,7 @@
           <span>{{ request.name }}</span>
         </button>
       </div>
-      <v-popover v-if="!saveRequest">
+      <v-popover>
         <button
           v-if="collectionsType.selectedTeam.myRole !== 'VIEWER'"
           v-tooltip="$t('more')"

components/environments/index.vue

@@ -1,10 +1,5 @@
 <template>
-  <AppSection
-    ref="environments"
-    icon="history"
-    :label="$t('environments')"
-    no-legend
-  >
+  <AppSection ref="environments" :label="$t('environments')">
     <div class="show-on-large-screen">
       <span class="select-wrapper">
         <select
@@ -103,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

@@ -90,17 +90,6 @@ export default {
     this.$subscribeTo(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/history/graphql/Card.vue

@@ -9,7 +9,8 @@
           readonly
           :value="entry.url"
           :placeholder="$t('empty_req_name')"
-          class="bg-transparent"
+          class="cursor-pointer text-sm bg-transparent"
+          @click="$emit('use-entry')"
         />
       </li>
       <button

components/history/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppSection ref="history" icon="history" :label="$t('history')" no-legend>
+  <AppSection ref="history" :label="$t('history')">
     <div class="show-on-large-screen">
       <input
         v-model="filterText"

components/history/rest/Card.vue

@@ -2,9 +2,10 @@
   <div>
     <div class="show-on-large-screen">
       <span
-        class="p-2 m-2 truncate"
+        class="p-2 m-2 truncate inline-flex cursor-pointer items-center text-sm"
         :class="entryStatus.className"
         :style="{ '--status-code': entry.status }"
+        @click="$emit('use-entry')"
       >
         {{ `${entry.method} \xA0 • \xA0 ${entry.status}` }}
       </span>
@@ -15,7 +16,8 @@
           readonly
           :value="entry.name"
           :placeholder="$t('empty_req_name')"
-          class="bg-transparent"
+          class="cursor-pointer text-sm bg-transparent"
+          @click="$emit('use-entry')"
         />
       </li>
       <span>

components/http/Headers.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppSection ref="headers" label="Headers" no-legend>
+  <AppSection ref="headers" label="Headers">
     <ul v-if="headers.length !== 0">
       <li>
         <div class="row-wrapper">

components/http/Parameters.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppSection ref="parameters" label="Parameters" no-legend>
+  <AppSection ref="parameters" label="Parameters">
     <ul v-if="params.length !== 0">
       <li>
         <div class="row-wrapper">

components/http/Response.vue

@@ -1,5 +1,5 @@
 <template>
-  <AppSection id="response" ref="response" :label="$t('response')" no-legend>
+  <AppSection id="response" ref="response" :label="$t('response')">
     <HttpResponseMeta :response="response" :active="active" />
     <div v-if="response.body && response.body !== $t('loading')">
       <LensesResponseBodyRenderer :response="response" />

components/realtime/Mqtt.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <AppSection :label="$t('request')" no-legend>
+    <AppSection :label="$t('request')">
       <ul>
         <li>
           <label for="mqtt-url">{{ $t("url") }}</label>
@@ -34,7 +34,7 @@
       </ul>
     </AppSection>
 
-    <AppSection :label="$t('communication')" no-legend>
+    <AppSection :label="$t('communication')">
       <ul>
         <li>
           <RealtimeLog :title="$t('log')" :log="log" />

components/realtime/Socketio.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <AppSection ref="request" :label="$t('request')" no-legend>
+    <AppSection ref="request" :label="$t('request')">
       <ul>
         <li>
           <label for="socketio-url">{{ $t("url") }}</label>
@@ -43,12 +43,7 @@
       </ul>
     </AppSection>
 
-    <AppSection
-      id="response"
-      ref="response"
-      :label="$t('communication')"
-      no-legend
-    >
+    <AppSection id="response" ref="response" :label="$t('communication')">
       <ul>
         <li>
           <RealtimeLog :title="$t('log')" :log="communication.log" />

components/realtime/Sse.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <AppSection ref="request" :label="$t('request')" no-legend>
+    <AppSection ref="request" :label="$t('request')">
       <ul>
         <li>
           <label for="server">{{ $t("server") }}</label>
@@ -36,12 +36,7 @@
       </ul>
     </AppSection>
 
-    <AppSection
-      id="response"
-      ref="response"
-      :label="$t('communication')"
-      no-legend
-    >
+    <AppSection id="response" ref="response" :label="$t('communication')">
       <ul>
         <li>
           <RealtimeLog :title="$t('events')" :log="events.log" />

components/realtime/Websocket.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <AppSection ref="request" :label="$t('request')" no-legend>
+    <AppSection ref="request" :label="$t('request')">
       <ul>
         <li>
           <label for="websocket-url">{{ $t("url") }}</label>
@@ -10,7 +10,6 @@
             type="url"
             spellcheck="false"
             :class="{ error: !urlValid }"
-            class="md:rounded-bl-lg"
             :placeholder="$t('url')"
             @keyup.enter="urlValid ? toggleConnection() : null"
           />
@@ -22,7 +21,6 @@
               id="connect"
               :disabled="!urlValid"
               name="connect"
-              class="rounded-b-lg md:rounded-bl-none md:rounded-br-lg"
               @click="toggleConnection"
             >
               {{ !connectionState ? $t("connect") : $t("disconnect") }}
@@ -35,14 +33,86 @@
           </li>
         </div>
       </ul>
+      <ul>
+        <li>
+          <div class="row-wrapper">
+            <label>{{ $t("protocols") }}</label>
+          </div>
+        </li>
+      </ul>
+      <ul
+        v-for="(protocol, index) of protocols"
+        :key="`protocol-${index}`"
+        :class="{ 'border-t': index == 0 }"
+        class="
+          border-b border-dashed
+          divide-y
+          md:divide-x
+          border-divider
+          divide-dashed divide-divider
+          md:divide-y-0
+        "
+      >
+        <li>
+          <input
+            v-model="protocol.value"
+            :placeholder="$t('protocol_count', { count: index + 1 })"
+            name="message"
+            type="text"
+          />
+        </li>
+        <div>
+          <li>
+            <button
+              v-tooltip.bottom="{
+                content: protocol.hasOwnProperty('active')
+                  ? protocol.active
+                    ? $t('turn_off')
+                    : $t('turn_on')
+                  : $t('turn_off'),
+              }"
+              class="icon"
+              @click="
+                protocol.active = protocol.hasOwnProperty('active')
+                  ? !protocol.active
+                  : false
+              "
+            >
+              <i class="material-icons">
+                {{
+                  protocol.hasOwnProperty("active")
+                    ? protocol.active
+                      ? "check_box"
+                      : "check_box_outline_blank"
+                    : "check_box"
+                }}
+              </i>
+            </button>
+          </li>
+        </div>
+        <div>
+          <li>
+            <button
+              v-tooltip.bottom="$t('delete')"
+              class="icon"
+              @click="deleteProtocol({ index })"
+            >
+              <i class="material-icons">delete</i>
+            </button>
+          </li>
+        </div>
+      </ul>
+      <ul>
+        <li>
+          <button class="icon" @click="addProtocol">
+            <i class="material-icons">add</i>
+            <span>{{ $t("add_new") }}</span>
+          </button>
+        </li>
+      </ul>
     </AppSection>
 
-    <AppSection
-      id="response"
-      ref="response"
-      :label="$t('communication')"
-      no-legend
-    >
+    <AppSection id="response" ref="response" :label="$t('communication')">
       <ul>
         <li>
           <RealtimeLog :title="$t('log')" :log="communication.log" />
@@ -100,6 +170,8 @@ export default {
         input: "",
       },
       currentIndex: -1, // index of the message log array to put in input box
+      protocols: [],
+      activeProtocols: [],
     }
   },
   computed: {
@@ -111,6 +183,18 @@ export default {
     url() {
       this.debouncer()
     },
+    protocols: {
+      handler(newVal) {
+        this.activeProtocols = newVal
+          .filter((item) =>
+            Object.prototype.hasOwnProperty.call(item, "active")
+              ? item.active === true
+              : true
+          )
+          .map(({ value }) => value)
+      },
+      deep: true,
+    },
   },
   mounted() {
     if (process.browser) {
@@ -143,7 +227,7 @@ export default {
         },
       ]
       try {
-        this.socket = new WebSocket(this.url)
+        this.socket = new WebSocket(this.url, this.activeProtocols)
         this.socket.onopen = () => {
           this.connectionState = true
           this.communication.log = [
@@ -255,6 +339,24 @@ export default {
           break
       }
     },
+    addProtocol() {
+      this.protocols.push({ value: "", active: true })
+    },
+    deleteProtocol({ index }) {
+      const oldProtocols = this.protocols.slice()
+      this.$delete(this.protocols, index)
+      this.$toast.error(this.$t("deleted"), {
+        icon: "delete",
+        action: {
+          text: this.$t("undo"),
+          duration: 4000,
+          onClick: (_, toastObject) => {
+            this.protocols = oldProtocols
+            toastObject.remove()
+          },
+        },
+      })
+    },
   },
 }
 </script>

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,13 @@
 <template>
-  <transition name="modal" appear>
-    <div class="modal-backdrop">
+  <transition name="modal" appear @leave="onTransitionLeaveStart">
+    <div
+      ref="modal"
+      class="modal-backdrop"
+      @touchstart="onBackdropMouseDown"
+      @touchend="onBackdropMouseUp"
+      @mouseup="onBackdropMouseUp"
+      @mousedown="onBackdropMouseDown"
+    >
       <div class="modal-wrapper">
         <div class="modal-container">
           <div class="modal-header">
@@ -21,12 +28,86 @@
 </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(),
+      shouldCloseOnBackdropClick: true,
+      // 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")
+    },
+    onBackdropMouseDown({ target }) {
+      this.shouldCloseOnBackdropClick =
+        !this.checkIfTargetInsideModalContent(target)
+    },
+    onBackdropMouseUp({ target }) {
+      if (
+        this.shouldCloseOnBackdropClick &&
+        !this.checkIfTargetInsideModalContent(target)
+      ) {
+        this.close()
+      }
+      this.shouldCloseOnBackdropClick = true
+    },
+    checkIfTargetInsideModalContent($target) {
+      return $target?.closest(".modal-container")
+    },
+    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>
 

components/teams/index.vue

@@ -1,11 +1,5 @@
 <template>
-  <AppSection
-    ref="teams"
-    class="green"
-    icon="history"
-    :label="$t('teams')"
-    no-legend
-  >
+  <AppSection ref="teams" :label="$t('teams')">
     <div class="flex flex-col">
       <label>{{ $t("teams") }}</label>
       <div v-if="currentUser"></div>

components/translate/SlideLeft.vue

@@ -1,18 +1,8 @@
 <template>
-  <transition
-    :appear="appear"
-    name="translate-slide-left"
-    enter-active-class="transition duration-500 transform"
-    enter-class="translate-x-full"
-    enter-to-class="translate-x-0"
-    leave-active-class="transition duration-500 transform"
-    leave-class="translate-x-0"
-    leave-to-class="translate-x-full"
-  >
+  <transition :appear="appear" name="translate-slide-left">
     <slot></slot>
   </transition>
 </template>
-
 <script>
 export default {
   props: {
@@ -23,3 +13,26 @@ export default {
   },
 }
 </script>
+
+<style scoped lang="scss">
+.translate-slide-left {
+  &-enter,
+  &-leave-to {
+    width: 0%;
+    opacity: 0;
+    margin-left: 0;
+  }
+  &-enter-to,
+  &-leave {
+    width: var(--width, 33%);
+    margin-left: var(--ml, 0);
+    opacity: 1;
+  }
+  &-enter-active,
+  &-leave-active {
+    overflow-x: hidden;
+    white-space: nowrap;
+    transition: width 0.5s ease, opacity 0.3s ease, margin-left 0.5s ease;
+  }
+}
+</style>