feat: loading states for modal buttons (#2268)

packages/hoppscotch-app/components/collections/Add.vue

@@ -26,6 +26,7 @@
       <span>
         <ButtonPrimary
           :label="$t('action.save')"
+          :loading="loadingState"
           @click.native="addNewCollection"
         />
         <ButtonSecondary
@@ -43,6 +44,7 @@ import { defineComponent } from "@nuxtjs/composition-api"
 export default defineComponent({
   props: {
     show: Boolean,
+    loadingState: Boolean,
   },
   data() {
     return {
@@ -56,7 +58,6 @@ export default defineComponent({
         return
       }
       this.$emit("submit", this.name)
-      this.hideModal()
     },
     hideModal() {
       this.name = null

packages/hoppscotch-app/components/collections/AddFolder.vue

@@ -24,7 +24,11 @@
     </template>
     <template #footer>
       <span>
-        <ButtonPrimary :label="$t('action.save')" @click.native="addFolder" />
+        <ButtonPrimary
+          :label="$t('action.save')"
+          :loading="loadingState"
+          @click.native="addFolder"
+        />
         <ButtonSecondary
           :label="$t('action.cancel')"
           @click.native="hideModal"
@@ -43,6 +47,7 @@ export default defineComponent({
     folder: { type: Object, default: () => {} },
     folderPath: { type: String, default: null },
     collectionIndex: { type: Number, default: null },
+    loadingState: Boolean,
   },
   data() {
     return {
@@ -60,7 +65,6 @@ export default defineComponent({
         folder: this.folder,
         path: this.folderPath || `${this.collectionIndex}`,
       })
-      this.hideModal()
     },
     hideModal() {
       this.name = null

packages/hoppscotch-app/components/collections/Edit.vue

@@ -26,6 +26,7 @@
       <span>
         <ButtonPrimary
           :label="$t('action.save')"
+          :loading="loadingState"
           @click.native="saveCollection"
         />
         <ButtonSecondary
@@ -44,6 +45,7 @@ export default defineComponent({
   props: {
     show: Boolean,
     editingCollectionName: { type: String, default: null },
+    loadingState: Boolean,
   },
   data() {
     return {
@@ -62,7 +64,6 @@ export default defineComponent({
         return
       }
       this.$emit("submit", this.name)
-      this.hideModal()
     },
     hideModal() {
       this.name = null

packages/hoppscotch-app/components/collections/EditFolder.vue

@@ -24,7 +24,11 @@
     </template>
     <template #footer>
       <span>
-        <ButtonPrimary :label="$t('action.save')" @click.native="editFolder" />
+        <ButtonPrimary
+          :label="$t('action.save')"
+          :loading="loadingState"
+          @click.native="editFolder"
+        />
         <ButtonSecondary
           :label="$t('action.cancel')"
           @click.native="hideModal"
@@ -41,6 +45,7 @@ export default defineComponent({
   props: {
     show: Boolean,
     editingFolderName: { type: String, default: null },
+    loadingState: Boolean,
   },
   data() {
     return {
@@ -59,7 +64,6 @@ export default defineComponent({
         return
       }
       this.$emit("submit", this.name)
-      this.hideModal()
     },
     hideModal() {
       this.name = null

packages/hoppscotch-app/components/collections/EditRequest.vue

@@ -24,7 +24,11 @@
     </template>
     <template #footer>
       <span>
-        <ButtonPrimary :label="$t('action.save')" @click.native="saveRequest" />
+        <ButtonPrimary
+          :label="$t('action.save')"
+          :loading="loadingState"
+          @click.native="saveRequest"
+        />
         <ButtonSecondary
           :label="$t('action.cancel')"
           @click.native="hideModal"
@@ -41,6 +45,7 @@ export default defineComponent({
   props: {
     show: Boolean,
     editingRequestName: { type: String, default: null },
+    loadingState: Boolean,
   },
   data() {
     return {
@@ -61,7 +66,6 @@ export default defineComponent({
         return
       }
       this.$emit("submit", this.requestUpdateData)
-      this.hideModal()
     },
     hideModal() {
       this.requestUpdateData = { name: null }

packages/hoppscotch-app/components/collections/index.vue

@@ -94,6 +94,7 @@
         @expand-collection="expandCollection"
         @remove-collection="removeCollection"
         @remove-request="removeRequest"
+        @remove-folder="removeFolder"
       />
     </div>
     <div
@@ -147,6 +148,7 @@
     </div>
     <CollectionsAdd
       :show="showModalAdd"
+      :loading-state="modalLoadingState"
       @submit="addNewRootCollection"
       @hide-modal="displayModalAdd(false)"
     />
@@ -157,6 +159,7 @@
           ? editingCollection.name || editingCollection.title
           : ''
       "
+      :loading-state="modalLoadingState"
       @hide-modal="displayModalEdit(false)"
       @submit="updateEditingCollection"
     />
@@ -172,6 +175,7 @@
       :show="showModalAddFolder"
       :folder="editingFolder"
       :folder-path="editingFolderPath"
+      :loading-state="modalLoadingState"
       @add-folder="onAddFolder($event)"
       @hide-modal="displayModalAddFolder(false)"
     />
@@ -180,12 +184,14 @@
       :editing-folder-name="
         editingFolder ? editingFolder.name || editingFolder.title : ''
       "
+      :loading-state="modalLoadingState"
       @submit="updateEditingFolder"
       @hide-modal="displayModalEditFolder(false)"
     />
     <CollectionsEditRequest
       :show="showModalEditRequest"
       :editing-request-name="editingRequest ? editingRequest.name : ''"
+      :loading-state="modalLoadingState"
       @submit="updateEditingRequest"
       @hide-modal="displayModalEditRequest(false)"
     />
@@ -195,6 +201,13 @@
       @hide-modal="displayModalImportExport(false)"
       @update-team-collections="updateTeamCollections"
     />
+    <SmartConfirmModal
+      :show="showConfirmModal"
+      :title="confirmModalTitle"
+      :loading-state="modalLoadingState"
+      @hide-modal="showConfirmModal = false"
+      @resolve="resolveConfirmModal"
+    />
   </div>
 </template>
 
@@ -213,6 +226,7 @@ import {
   editRESTCollection,
   addRESTFolder,
   removeRESTCollection,
+  removeRESTFolder,
   editRESTFolder,
   removeRESTRequest,
   editRESTRequest,
@@ -264,15 +278,18 @@ export default defineComponent({
       showModalAddFolder: false,
       showModalEditFolder: false,
       showModalEditRequest: false,
+      showConfirmModal: false,
       modalLoadingState: false,
       editingCollection: undefined,
       editingCollectionIndex: undefined,
+      editingCollectionID: undefined,
       editingFolder: undefined,
       editingFolderName: undefined,
       editingFolderIndex: undefined,
       editingFolderPath: undefined,
       editingRequest: undefined,
       editingRequestIndex: undefined,
+      confirmModalTitle: undefined,
       filterText: "",
       collectionsType: {
         type: "my-collections",
@@ -387,14 +404,18 @@ export default defineComponent({
             requests: [],
           })
         )
+
+        this.displayModalAdd(false)
       } else if (
         this.collectionsType.type === "team-collections" &&
         this.collectionsType.selectedTeam.myRole !== "VIEWER"
       ) {
+        this.modalLoadingState = true
         runMutation(CreateNewRootCollectionDocument, {
           title: name,
           teamID: this.collectionsType.selectedTeam.id,
         })().then((result) => {
+          this.modalLoadingState = false
           if (E.isLeft(result)) {
             if (result.left.error === "team_coll/short_title")
               this.$toast.error(this.$t("collection.name_length_insufficient"))
@@ -402,10 +423,10 @@ export default defineComponent({
             console.error(result.left.error)
           } else {
             this.$toast.success(this.$t("collection.created"))
+            this.displayModalAdd(false)
           }
         })
       }
-      this.displayModalAdd(false)
     },
     // Intented to be called by CollectionEdit modal submit event
     updateEditingCollection(newName) {
@@ -420,46 +441,57 @@ export default defineComponent({
         }
 
         editRESTCollection(this.editingCollectionIndex, collectionUpdated)
+        this.displayModalEdit(false)
       } else if (
         this.collectionsType.type === "team-collections" &&
         this.collectionsType.selectedTeam.myRole !== "VIEWER"
       ) {
+        this.modalLoadingState = true
+
         runMutation(RenameCollectionDocument, {
           collectionID: this.editingCollection.id,
           newTitle: newName,
         })().then((result) => {
+          this.modalLoadingState = false
+
           if (E.isLeft(result)) {
             this.$toast.error(this.$t("error.something_went_wrong"))
-            console.error(e)
+            console.error(result.left.error)
           } else {
             this.$toast.success(this.$t("collection.renamed"))
+            this.displayModalEdit(false)
           }
         })
       }
-      this.displayModalEdit(false)
     },
     // Intended to be called by CollectionEditFolder modal submit event
     updateEditingFolder(name) {
       if (this.collectionsType.type === "my-collections") {
         editRESTFolder(this.editingFolderPath, { ...this.editingFolder, name })
+        this.displayModalEditFolder(false)
       } else if (
         this.collectionsType.type === "team-collections" &&
         this.collectionsType.selectedTeam.myRole !== "VIEWER"
       ) {
+        this.modalLoadingState = true
+
         runMutation(RenameCollectionDocument, {
           collectionID: this.editingFolder.id,
           newTitle: name,
         })().then((result) => {
+          this.modalLoadingState = false
+
           if (E.isLeft(result)) {
-            this.$toast.error(this.$t("error.something_went_wrong"))
+            if (result.left.error === "team_coll/short_title")
-            console.error(e)
+              this.$toast.error(this.$t("folder.name_length_insufficient"))
+            else this.$toast.error(this.$t("error.something_went_wrong"))
+            console.error(result.left.error)
           } else {
             this.$toast.success(this.$t("folder.renamed"))
+            this.displayModalEditFolder(false)
           }
         })
       }
-
-      this.displayModalEditFolder(false)
     },
     // Intented to by called by CollectionsEditRequest modal submit event
     updateEditingRequest(requestUpdateData) {
@@ -474,10 +506,13 @@ export default defineComponent({
           this.editingRequestIndex,
           requestUpdated
         )
+        this.displayModalEditRequest(false)
       } else if (
         this.collectionsType.type === "team-collections" &&
         this.collectionsType.selectedTeam.myRole !== "VIEWER"
       ) {
+        this.modalLoadingState = true
+
         const requestName = requestUpdateData.name || this.editingRequest.name
 
         runMutation(UpdateRequestDocument, {
@@ -487,17 +522,18 @@ export default defineComponent({
           },
           requestID: this.editingRequestIndex,
         })().then((result) => {
+          this.modalLoadingState = false
+
           if (E.isLeft(result)) {
             this.$toast.error(this.$t("error.something_went_wrong"))
-            console.error(e)
+            console.error(result.left.error)
           } else {
             this.$toast.success(this.$t("request.renamed"))
             this.$emit("update-team-collections")
+            this.displayModalEditRequest(false)
           }
         })
       }
-
-      this.displayModalEditRequest(false)
     },
     displayModalAdd(shouldDisplay) {
       this.showModalAdd = shouldDisplay
@@ -530,6 +566,11 @@ export default defineComponent({
 
       if (!shouldDisplay) this.resetSelectedData()
     },
+    displayConfirmModal(shouldDisplay) {
+      this.showConfirmModal = shouldDisplay
+
+      if (!shouldDisplay) this.resetSelectedData()
+    },
     editCollection(collection, collectionIndex) {
       this.$data.editingCollection = collection
       this.$data.editingCollectionIndex = collectionIndex
@@ -538,26 +579,29 @@ export default defineComponent({
     onAddFolder({ name, folder, path }) {
       if (this.collectionsType.type === "my-collections") {
         addRESTFolder(name, path)
-      } else if (this.collectionsType.type === "team-collections") {
+        this.displayModalAddFolder(false)
-        if (this.collectionsType.selectedTeam.myRole !== "VIEWER") {
+      } else if (
-          runMutation(CreateChildCollectionDocument, {
+        this.collectionsType.type === "team-collections" &&
-            childTitle: name,
+        this.collectionsType.selectedTeam.myRole !== "VIEWER"
-            collectionID: folder.id,
+      ) {
-          })().then((result) => {
+        this.modalLoadingState = true
-            if (E.isLeft(result)) {
+        runMutation(CreateChildCollectionDocument, {
-              if (result.left.error === "team_coll/short_title")
+          childTitle: name,
-                this.$toast.error(this.$t("folder.name_length_insufficient"))
+          collectionID: folder.id,
-              else this.$toast.error(this.$t("error.something_went_wrong"))
+        })().then((result) => {
-              console.error(result.left.error)
+          this.modalLoadingState = false
-            } else {
+          if (E.isLeft(result)) {
-              this.$toast.success(this.$t("folder.created"))
+            if (result.left.error === "team_coll/short_title")
-              this.$emit("update-team-collections")
+              this.$toast.error(this.$t("folder.name_length_insufficient"))
-            }
+            else this.$toast.error(this.$t("error.something_went_wrong"))
-          })
+            console.error(result.left.error)
-        }
+          } else {
+            this.$toast.success(this.$t("folder.created"))
+            this.displayModalAddFolder(false)
+            this.$emit("update-team-collections")
+          }
+        })
       }
-
-      this.displayModalAddFolder(false)
     },
     addFolder(payload) {
       const { folder, path } = payload
@@ -595,16 +639,30 @@ export default defineComponent({
     resetSelectedData() {
       this.$data.editingCollection = undefined
       this.$data.editingCollectionIndex = undefined
+      this.$data.editingCollectionID = undefined
       this.$data.editingFolder = undefined
+      this.$data.editingFolderPath = undefined
       this.$data.editingFolderIndex = undefined
       this.$data.editingRequest = undefined
       this.$data.editingRequestIndex = undefined
+
+      this.$data.confirmModalTitle = undefined
     },
     expandCollection(collectionID) {
       this.teamCollectionAdapter.expandCollection(collectionID)
     },
-    removeCollection({ collectionsType, collectionIndex, collectionID }) {
+    removeCollection({ collectionIndex, collectionID }) {
-      if (collectionsType.type === "my-collections") {
+      this.$data.editingCollectionIndex = collectionIndex
+      this.$data.editingCollectionID = collectionID
+      this.confirmModalTitle = `${this.$t("confirm.remove_collection")}`
+
+      this.displayConfirmModal(true)
+    },
+    onRemoveCollection() {
+      const collectionIndex = this.$data.editingCollectionIndex
+      const collectionID = this.$data.editingCollectionID
+
+      if (this.collectionsType.type === "my-collections") {
         // Cancel pick if picked collection is deleted
         if (
           this.picked &&
@@ -615,8 +673,12 @@ export default defineComponent({
         }
 
         removeRESTCollection(collectionIndex)
+
         this.$toast.success(this.$t("state.deleted"))
-      } else if (collectionsType.type === "team-collections") {
+        this.displayConfirmModal(false)
+      } else if (this.collectionsType.type === "team-collections") {
+        this.modalLoadingState = true
+
         // Cancel pick if picked collection is deleted
         if (
           this.picked &&
@@ -626,21 +688,89 @@ export default defineComponent({
           this.$emit("select", { picked: null })
         }
 
-        if (collectionsType.selectedTeam.myRole !== "VIEWER") {
+        if (this.collectionsType.selectedTeam.myRole !== "VIEWER") {
           runMutation(DeleteCollectionDocument, {
             collectionID,
           })().then((result) => {
+            this.modalLoadingState = false
             if (E.isLeft(result)) {
               this.$toast.error(this.$t("error.something_went_wrong"))
               console.error(result.left.error)
             } else {
               this.$toast.success(this.$t("state.deleted"))
+              this.displayConfirmModal(false)
+            }
+          })
+        }
+      }
+    },
+    removeFolder({ collectionID, folder, folderPath }) {
+      this.$data.editingCollectionID = collectionID
+      this.$data.editingFolder = folder
+      this.$data.editingFolderPath = folderPath
+      this.confirmModalTitle = `${this.$t("confirm.remove_folder")}`
+
+      this.displayConfirmModal(true)
+    },
+    onRemoveFolder() {
+      const folder = this.$data.editingFolder
+      const folderPath = this.$data.editingFolderPath
+
+      if (this.collectionsType.type === "my-collections") {
+        // Cancel pick if picked folder was deleted
+        if (
+          this.picked &&
+          this.picked.pickedType === "my-folder" &&
+          this.picked.folderPath === folderPath
+        ) {
+          this.$emit("select", { picked: null })
+        }
+        removeRESTFolder(folderPath)
+
+        this.$toast.success(this.$t("state.deleted"))
+        this.displayConfirmModal(false)
+      } else if (this.collectionsType.type === "team-collections") {
+        this.modalLoadingState = true
+
+        // Cancel pick if picked collection folder was deleted
+        if (
+          this.picked &&
+          this.picked.pickedType === "teams-folder" &&
+          this.picked.folderID === folder.id
+        ) {
+          this.$emit("select", { picked: null })
+        }
+
+        if (this.collectionsType.selectedTeam.myRole !== "VIEWER") {
+          runMutation(DeleteCollectionDocument, {
+            collectionID: folder.id,
+          })().then((result) => {
+            this.modalLoadingState = false
+
+            if (E.isLeft(result)) {
+              this.$toast.error(`${this.$t("error.something_went_wrong")}`)
+              console.error(result.left.error)
+            } else {
+              this.$toast.success(`${this.$t("state.deleted")}`)
+              this.displayConfirmModal(false)
+
+              this.updateTeamCollections()
             }
           })
         }
       }
     },
     removeRequest({ requestIndex, folderPath }) {
+      this.$data.editingRequestIndex = requestIndex
+      this.$data.editingFolderPath = folderPath
+      this.confirmModalTitle = `${this.$t("confirm.remove_request")}`
+
+      this.displayConfirmModal(true)
+    },
+    onRemoveRequest() {
+      const requestIndex = this.$data.editingRequestIndex
+      const folderPath = this.$data.editingFolderPath
+
       if (this.collectionsType.type === "my-collections") {
         // Cancel pick if the picked item is being deleted
         if (
@@ -652,8 +782,11 @@ export default defineComponent({
           this.$emit("select", { picked: null })
         }
         removeRESTRequest(folderPath, requestIndex)
+
         this.$toast.success(this.$t("state.deleted"))
+        this.displayConfirmModal(false)
       } else if (this.collectionsType.type === "team-collections") {
+        this.modalLoadingState = true
         // Cancel pick if the picked item is being deleted
         if (
           this.picked &&
@@ -666,11 +799,13 @@ export default defineComponent({
         runMutation(DeleteRequestDocument, {
           requestID: requestIndex,
         })().then((result) => {
+          this.modalLoadingState = false
           if (E.isLeft(result)) {
             this.$toast.error(this.$t("error.something_went_wrong"))
             console.error(result.left.error)
           } else {
             this.$toast.success(this.$t("state.deleted"))
+            this.displayConfirmModal(false)
           }
         })
       }
@@ -753,6 +888,22 @@ export default defineComponent({
         })
       }
     },
+    resolveConfirmModal(title) {
+      if (title === `${this.$t("confirm.remove_collection")}`)
+        this.onRemoveCollection()
+      else if (title === `${this.$t("confirm.remove_request")}`)
+        this.onRemoveRequest()
+      else if (title === `${this.$t("confirm.remove_folder")}`)
+        this.onRemoveFolder()
+      else {
+        console.error(
+          `Confirm modal title ${title} is not handled by the component`
+        )
+        this.$toast.error(this.$t("error.something_went_wrong"))
+        this.displayConfirmModal(false)
+      }
+    },
   },
 })
+// request inside folder is not being deleted, you dumb fuck
 </script>

packages/hoppscotch-app/components/collections/my/Collection.vue

@@ -158,7 +158,7 @@
                 :shortcut="['⌫']"
                 @click.native="
                   () => {
-                    confirmRemove = true
+                    removeCollection()
                     options.tippy().hide()
                   }
                 "
@@ -193,6 +193,7 @@
           @duplicate-request="$emit('duplicate-request', $event)"
           @select="$emit('select', $event)"
           @remove-request="$emit('remove-request', $event)"
+          @remove-folder="$emit('remove-folder', $event)"
         />
         <CollectionsMyRequest
           v-for="(request, index) in collection.requests"
@@ -233,12 +234,6 @@
         </div>
       </div>
     </div>
-    <SmartConfirmModal
-      :show="confirmRemove"
-      :title="$t('confirm.remove_collection')"
-      @hide-modal="confirmRemove = false"
-      @resolve="removeCollection"
-    />
   </div>
 </template>
 
@@ -273,7 +268,6 @@ export default defineComponent({
       showChildren: false,
       dragging: false,
       selectedFolder: {},
-      confirmRemove: false,
       prevCursor: "",
       cursor: "",
       pageNo: 0,
@@ -326,7 +320,6 @@ export default defineComponent({
     },
     removeCollection() {
       this.$emit("remove-collection", {
-        collectionsType: this.collectionsType,
         collectionIndex: this.collectionIndex,
         collectionID: this.collection.id,
       })

packages/hoppscotch-app/components/collections/my/Folder.vue

@@ -131,7 +131,7 @@
                 :shortcut="['⌫']"
                 @click.native="
                   () => {
-                    confirmRemove = true
+                    removeFolder()
                     options.tippy().hide()
                   }
                 "
@@ -165,7 +165,8 @@
           @duplicate-request="$emit('duplicate-request', $event)"
           @update-team-collections="$emit('update-team-collections')"
           @select="$emit('select', $event)"
-          @remove-request="removeRequest"
+          @remove-request="$emit('remove-request', $event)"
+          @remove-folder="$emit('remove-folder', $event)"
         />
         <CollectionsMyRequest
           v-for="(request, index) in folder.requests"
@@ -183,7 +184,7 @@
           @edit-request="$emit('edit-request', $event)"
           @duplicate-request="$emit('duplicate-request', $event)"
           @select="$emit('select', $event)"
-          @remove-request="removeRequest"
+          @remove-request="$emit('remove-request', $event)"
         />
         <div
           v-if="
@@ -206,23 +207,13 @@
         </div>
       </div>
     </div>
-    <SmartConfirmModal
-      :show="confirmRemove"
-      :title="t('confirm.remove_folder')"
-      @hide-modal="confirmRemove = false"
-      @resolve="removeFolder"
-    />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from "@nuxtjs/composition-api"
 import { useI18n } from "~/helpers/utils/composables"
-import {
+import { moveRESTRequest } from "~/newstore/collections"
-  removeRESTFolder,
-  removeRESTRequest,
-  moveRESTRequest,
-} from "~/newstore/collections"
 
 export default defineComponent({
   name: "Folder",
@@ -255,7 +246,6 @@ export default defineComponent({
     return {
       showChildren: false,
       dragging: false,
-      confirmRemove: false,
       prevCursor: "",
       cursor: "",
     }
@@ -306,17 +296,10 @@ export default defineComponent({
       this.showChildren = !this.showChildren
     },
     removeFolder() {
-      // TODO: Bubble it up ?
+      this.$emit("remove-folder", {
-      // Cancel pick if picked folder was deleted
+        folder: this.folder,
-      if (
+        folderPath: this.folderPath,
-        this.picked &&
+      })
-        this.picked.pickedType === "my-folder" &&
-        this.picked.folderPath === this.folderPath
-      ) {
-        this.$emit("select", { picked: null })
-      }
-      removeRESTFolder(this.folderPath)
-      this.$toast.success(`${this.$t("state.deleted")}`)
     },
     dropEvent({ dataTransfer }) {
       this.dragging = !this.dragging
@@ -324,19 +307,6 @@ export default defineComponent({
       const requestIndex = dataTransfer.getData("requestIndex")
       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)
-    },
   },
 })
 </script>

packages/hoppscotch-app/components/collections/my/Request.vue

@@ -126,7 +126,7 @@
                 :shortcut="['⌫']"
                 @click.native="
                   () => {
-                    confirmRemove = true
+                    removeRequest()
                     options.tippy().hide()
                   }
                 "
@@ -136,12 +136,6 @@
         </span>
       </div>
     </div>
-    <SmartConfirmModal
-      :show="confirmRemove"
-      :title="t('confirm.remove_request')"
-      @hide-modal="confirmRemove = false"
-      @resolve="removeRequest"
-    />
     <HttpReqChangeConfirmModal
       :show="confirmChange"
       @hide-modal="confirmChange = false"
@@ -222,8 +216,6 @@ const emit = defineEmits<{
   (
     e: "remove-request",
     data: {
-      collectionIndex: number
-      folderName: string
       folderPath: string
       requestIndex: number
     }
@@ -265,7 +257,6 @@ const requestMethodLabels = {
   delete: "text-red-500",
   default: "text-gray-500",
 }
-const confirmRemove = ref(false)
 const confirmChange = ref(false)
 const showSaveRequestModal = ref(false)
 
@@ -304,8 +295,6 @@ const dragStart = ({ dataTransfer }: DragEvent) => {
 
 const removeRequest = () => {
   emit("remove-request", {
-    collectionIndex: props.collectionIndex,
-    folderName: props.folderName,
     folderPath: props.folderPath,
     requestIndex: props.requestIndex,
   })

packages/hoppscotch-app/components/collections/teams/Collection.vue

@@ -157,7 +157,7 @@
                 :shortcut="['⌫']"
                 @click.native="
                   () => {
-                    confirmRemove = true
+                    removeCollection()
                     options.tippy().hide()
                   }
                 "
@@ -192,7 +192,8 @@
           @edit-request="$emit('edit-request', $event)"
           @select="$emit('select', $event)"
           @expand-collection="expandCollection"
-          @remove-request="removeRequest"
+          @remove-request="$emit('remove-request', $event)"
+          @remove-folder="$emit('remove-folder', $event)"
           @duplicate-request="$emit('duplicate-request', $event)"
         />
         <CollectionsTeamsRequest
@@ -210,7 +211,7 @@
           :picked="picked"
           @edit-request="editRequest($event)"
           @select="$emit('select', $event)"
-          @remove-request="removeRequest"
+          @remove-request="$emit('remove-request', $event)"
           @duplicate-request="$emit('duplicate-request', $event)"
         />
         <div
@@ -241,12 +242,6 @@
         </div>
       </div>
     </div>
-    <SmartConfirmModal
-      :show="confirmRemove"
-      :title="t('confirm.remove_collection')"
-      @hide-modal="confirmRemove = false"
-      @resolve="removeCollection"
-    />
   </div>
 </template>
 
@@ -292,7 +287,6 @@ export default defineComponent({
       showChildren: false,
       dragging: false,
       selectedFolder: {},
-      confirmRemove: false,
       prevCursor: "",
       cursor: "",
       pageNo: 0,
@@ -375,7 +369,6 @@ export default defineComponent({
     },
     removeCollection() {
       this.$emit("remove-collection", {
-        collectionsType: this.collectionsType,
         collectionIndex: this.collectionIndex,
         collectionID: this.collection.id,
       })
@@ -393,13 +386,6 @@ export default defineComponent({
       if (E.isLeft(moveRequestResult))
         this.$toast.error(`${this.$t("error.something_went_wrong")}`)
     },
-    removeRequest({ collectionIndex, folderName, requestIndex }: any) {
-      this.$emit("remove-request", {
-        collectionIndex,
-        folderName,
-        requestIndex,
-      })
-    },
   },
 })
 </script>

packages/hoppscotch-app/components/collections/teams/Folder.vue

@@ -130,7 +130,7 @@
                 :shortcut="['⌫']"
                 @click.native="
                   () => {
-                    confirmRemove = true
+                    removeFolder()
                     options.tippy().hide()
                   }
                 "
@@ -165,7 +165,8 @@
           @update-team-collections="$emit('update-team-collections')"
           @select="$emit('select', $event)"
           @expand-collection="expandCollection"
-          @remove-request="removeRequest"
+          @remove-request="$emit('remove-request', $event)"
+          @remove-folder="$emit('remove-folder', $event)"
           @duplicate-request="$emit('duplicate-request', $event)"
         />
         <CollectionsTeamsRequest
@@ -183,7 +184,7 @@
           :collection-i-d="folder.id"
           @edit-request="$emit('edit-request', $event)"
           @select="$emit('select', $event)"
-          @remove-request="removeRequest"
+          @remove-request="$emit('remove-request', $event)"
           @duplicate-request="$emit('duplicate-request', $event)"
         />
         <div
@@ -212,20 +213,12 @@
         </div>
       </div>
     </div>
-    <SmartConfirmModal
-      :show="confirmRemove"
-      :title="$t('confirm.remove_folder')"
-      @hide-modal="confirmRemove = false"
-      @resolve="removeFolder"
-    />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from "@nuxtjs/composition-api"
 import * as E from "fp-ts/Either"
-import { runMutation } from "~/helpers/backend/GQLClient"
-import { DeleteCollectionDocument } from "~/helpers/backend/graphql"
 import {
   getCompleteCollectionTree,
   teamCollToHoppRESTColl,
@@ -262,7 +255,6 @@ export default defineComponent({
     return {
       showChildren: false,
       dragging: false,
-      confirmRemove: false,
       prevCursor: "",
       cursor: "",
     }
@@ -333,30 +325,10 @@ export default defineComponent({
       this.showChildren = !this.showChildren
     },
     removeFolder() {
-      if (this.collectionsType.selectedTeam.myRole !== "VIEWER") {
+      this.$emit("remove-folder", {
-        // Cancel pick if picked collection folder was deleted
+        collectionsType: this.collectionsType,
-        if (
+        folder: this.folder,
-          this.picked &&
+      })
-          this.picked.pickedType === "teams-folder" &&
-          this.picked.folderID === this.folder.id
-        ) {
-          this.$emit("select", { picked: null })
-        }
-
-        runMutation(DeleteCollectionDocument, {
-          collectionID: this.folder.id,
-        })().then((result) => {
-          if (E.isLeft(result)) {
-            this.$toast.error(`${this.$t("error.something_went_wrong")}`)
-            console.error(result.left)
-          } else {
-            this.$toast.success(`${this.$t("state.deleted")}`)
-            this.$emit("update-team-collections")
-          }
-        })
-
-        this.$emit("update-team-collections")
-      }
     },
     expandCollection(collectionID: number) {
       this.$emit("expand-collection", collectionID)
@@ -371,13 +343,6 @@ export default defineComponent({
       if (E.isLeft(moveRequestResult))
         this.$toast.error(`${this.$t("error.something_went_wrong")}`)
     },
-    removeRequest({ collectionIndex, folderName, requestIndex }: any) {
-      this.$emit("remove-request", {
-        collectionIndex,
-        folderName,
-        requestIndex,
-      })
-    },
   },
 })
 </script>

packages/hoppscotch-app/components/collections/teams/Request.vue

@@ -123,7 +123,7 @@
                 :shortcut="['⌫']"
                 @click.native="
                   () => {
-                    confirmRemove = true
+                    removeRequest()
                     options.tippy().hide()
                   }
                 "
@@ -133,12 +133,6 @@
         </span>
       </div>
     </div>
-    <SmartConfirmModal
-      :show="confirmRemove"
-      :title="$t('confirm.remove_request')"
-      @hide-modal="confirmRemove = false"
-      @resolve="removeRequest"
-    />
     <HttpReqChangeConfirmModal
       :show="confirmChange"
       @hide-modal="confirmChange = false"
@@ -215,8 +209,7 @@ const emit = defineEmits<{
   (
     e: "remove-request",
     data: {
-      collectionIndex: number
+      folderPath: string | undefined
-      folderName: string | undefined
       requestIndex: string
     }
   ): void
@@ -253,7 +246,6 @@ const requestMethodLabels = {
   delete: "text-red-500",
   default: "text-gray-500",
 }
-const confirmRemove = ref(false)
 const confirmChange = ref(false)
 const showSaveRequestModal = ref(false)
 
@@ -289,8 +281,7 @@ const dragStart = ({ dataTransfer }: DragEvent) => {
 
 const removeRequest = () => {
   emit("remove-request", {
-    collectionIndex: props.collectionIndex,
+    folderPath: props.folderName,
-    folderName: props.folderName,
     requestIndex: props.requestIndex,
   })
 }

packages/hoppscotch-app/components/smart/ConfirmModal.vue

@@ -16,7 +16,12 @@
     </template>
     <template #footer>
       <span>
-        <ButtonPrimary v-focus :label="yes" @click.native="resolve" />
+        <ButtonPrimary
+          v-focus
+          :label="yes"
+          :loading="!!loadingState"
+          @click.native="resolve"
+        />
         <ButtonSecondary :label="no" @click.native="hideModal" />
       </span>
     </template>
@@ -42,14 +47,15 @@ export default defineComponent({
         return this.$t("action.no")
       },
     },
+    loadingState: { type: Boolean, default: null },
   },
   methods: {
     hideModal() {
       this.$emit("hide-modal")
     },
     resolve() {
-      this.$emit("resolve")
+      this.$emit("resolve", this.title)
-      this.$emit("hide-modal")
+      if (this.loadingState === null) this.$emit("hide-modal")
     },
   },
 })