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

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