feat: loading states for modal buttons (#2268)

2022-04-20 23:48:25 +05:30
parent 7bf76a5812
commit 2452b1be4b
13 changed files with 242 additions and 177 deletions
--- a/packages/hoppscotch-app/components/collections/Add.vue
+++ b/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
--- a/packages/hoppscotch-app/components/collections/AddFolder.vue
+++ b/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
--- a/packages/hoppscotch-app/components/collections/Edit.vue
+++ b/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
--- a/packages/hoppscotch-app/components/collections/EditFolder.vue
+++ b/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
--- a/packages/hoppscotch-app/components/collections/EditRequest.vue
+++ b/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 }
--- a/packages/hoppscotch-app/components/collections/index.vue
+++ b/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"))
-            console.error(e)
+            if (result.left.error === "team_coll/short_title")
+              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") {
-        if (this.collectionsType.selectedTeam.myRole !== "VIEWER") {
-          runMutation(CreateChildCollectionDocument, {
-            childTitle: name,
-            collectionID: folder.id,
-          })().then((result) => {
-            if (E.isLeft(result)) {
-              if (result.left.error === "team_coll/short_title")
-                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.$emit("update-team-collections")
-            }
-          })
-        }
+        this.displayModalAddFolder(false)
+      } else if (
+        this.collectionsType.type === "team-collections" &&
+        this.collectionsType.selectedTeam.myRole !== "VIEWER"
+      ) {
+        this.modalLoadingState = true
+        runMutation(CreateChildCollectionDocument, {
+          childTitle: name,
+          collectionID: folder.id,
+        })().then((result) => {
+          this.modalLoadingState = false
+          if (E.isLeft(result)) {
+            if (result.left.error === "team_coll/short_title")
+              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 }) {
-      if (collectionsType.type === "my-collections") {
+    removeCollection({ collectionIndex, collectionID }) {
+      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>
--- a/packages/hoppscotch-app/components/collections/my/Collection.vue
+++ b/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,
      })
--- a/packages/hoppscotch-app/components/collections/my/Folder.vue
+++ b/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 {
-  removeRESTFolder,
-  removeRESTRequest,
-  moveRESTRequest,
-} from "~/newstore/collections"
+import { 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 ?
-      // 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.success(`${this.$t("state.deleted")}`)
+      this.$emit("remove-folder", {
+        folder: this.folder,
+        folderPath: this.folderPath,
+      })
    },
    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>
--- a/packages/hoppscotch-app/components/collections/my/Request.vue
+++ b/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,
  })
--- a/packages/hoppscotch-app/components/collections/teams/Collection.vue
+++ b/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>
--- a/packages/hoppscotch-app/components/collections/teams/Folder.vue
+++ b/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") {
-        // 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 })
-        }
-
-        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")
-      }
+      this.$emit("remove-folder", {
+        collectionsType: this.collectionsType,
+        folder: this.folder,
+      })
    },
    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>
--- a/packages/hoppscotch-app/components/collections/teams/Request.vue
+++ b/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
-      folderName: string | undefined
+      folderPath: 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,
-    folderName: props.folderName,
+    folderPath: props.folderName,
    requestIndex: props.requestIndex,
  })
 }
--- a/packages/hoppscotch-app/components/smart/ConfirmModal.vue
+++ b/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("hide-modal")
+      this.$emit("resolve", this.title)
+      if (this.loadingState === null) this.$emit("hide-modal")
    },
  },
 })