From 8f33dac0a647291c2589512659af9d9f7200266c Mon Sep 17 00:00:00 2001
From: nivedin <nivedinp@gmail.com>
Date: Thu, 21 Mar 2024 17:55:17 +0530
Subject: [PATCH 1/3] fix: add loading state and switch workspace when current
 workspace is deleted

---
 .../src/components/teams/Team.vue             | 268 ++++++++++--------
 .../src/components/teams/index.vue            |  10 +-
 2 files changed, 151 insertions(+), 127 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/teams/Team.vue b/packages/hoppscotch-common/src/components/teams/Team.vue
index 123b63e74e..f8e854a350 100644
--- a/packages/hoppscotch-common/src/components/teams/Team.vue
+++ b/packages/hoppscotch-common/src/components/teams/Team.vue
@@ -3,134 +3,141 @@
     class="flex flex-1 flex-col rounded border border-divider"
     @contextmenu.prevent="!compact ? options.tippy.show() : null"
   >
-    <div
-      class="flex flex-1 items-start"
-      :class="
-        compact
-          ? team.myRole === 'OWNER'
-            ? 'cursor-pointer transition hover:border-dividerDark hover:bg-primaryDark focus-visible:border-dividerDark'
-            : 'cursor-not-allowed bg-primaryLight'
-          : ''
-      "
-      @click="
-        compact
-          ? team.myRole === 'OWNER'
-            ? $emit('invite-team')
-            : noPermission()
-          : ''
-      "
-    >
-      <div class="p-4">
-        <label
-          class="font-semibold text-secondaryDark"
-          :class="{ 'cursor-pointer': compact && team.myRole === 'OWNER' }"
-        >
-          {{ team.name || t("state.nothing_found") }}
-        </label>
-        <TeamsMemberStack :team-members="team.teamMembers" class="mt-4" />
-      </div>
+    <div v-if="loading" class="flex flex-col items-center justify-center p-2">
+      <HoppSmartSpinner class="mb-4" />
+      <span class="text-secondaryLight">{{ t("state.loading") }}</span>
     </div>
-    <div v-if="!compact" class="flex flex-shrink-0 items-end justify-between">
-      <span>
-        <HoppButtonSecondary
-          v-if="team.myRole === 'OWNER'"
-          :icon="IconEdit"
-          class="rounded-none"
-          :label="t('action.edit')"
-          @click="
-            () => {
-              $emit('edit-team')
-            }
-          "
-        />
-        <HoppButtonSecondary
-          v-if="team.myRole === 'OWNER'"
-          :icon="IconUserPlus"
-          class="rounded-none"
-          :label="t('team.invite')"
-          @click="
-            () => {
-              emit('invite-team')
-            }
-          "
-        />
-      </span>
-      <span>
-        <tippy
-          ref="options"
-          interactive
-          trigger="click"
-          theme="popover"
-          :on-shown="() => tippyActions.focus()"
-        >
+    <template v-else>
+      <div
+        class="flex flex-1 items-start"
+        :class="
+          compact
+            ? team.myRole === 'OWNER'
+              ? 'cursor-pointer transition hover:border-dividerDark hover:bg-primaryDark focus-visible:border-dividerDark'
+              : 'cursor-not-allowed bg-primaryLight'
+            : ''
+        "
+        @click="
+          compact
+            ? team.myRole === 'OWNER'
+              ? $emit('invite-team')
+              : noPermission()
+            : ''
+        "
+      >
+        <div class="p-4">
+          <label
+            class="font-semibold text-secondaryDark"
+            :class="{ 'cursor-pointer': compact && team.myRole === 'OWNER' }"
+          >
+            {{ team.name || t("state.nothing_found") }}
+          </label>
+          <TeamsMemberStack :team-members="team.teamMembers" class="mt-4" />
+        </div>
+      </div>
+      <div v-if="!compact" class="flex flex-shrink-0 items-end justify-between">
+        <span>
           <HoppButtonSecondary
-            v-tippy="{ theme: 'tooltip' }"
-            :title="t('action.more')"
-            :icon="IconMoreVertical"
+            v-if="team.myRole === 'OWNER'"
+            :icon="IconEdit"
+            class="rounded-none"
+            :label="t('action.edit')"
+            @click="
+              () => {
+                $emit('edit-team')
+              }
+            "
           />
-          <template #content="{ hide }">
-            <div
-              ref="tippyActions"
-              class="flex flex-col focus:outline-none"
-              tabindex="0"
-              @keyup.e="team.myRole === 'OWNER' ? edit.$el.click() : null"
-              @keyup.x="
-                !(team.myRole === 'OWNER' && team.ownersCount == 1)
-                  ? exit.$el.click()
-                  : null
-              "
-              @keyup.delete="
-                team.myRole === 'OWNER' ? deleteAction.$el.click() : null
-              "
-              @keyup.escape="hide()"
-            >
-              <HoppSmartItem
-                v-if="team.myRole === 'OWNER'"
-                ref="edit"
-                :icon="IconEdit"
-                :label="t('action.edit')"
-                :shortcut="['E']"
-                @click="
-                  () => {
-                    $emit('edit-team')
-                    hide()
-                  }
-                "
-              />
-              <HoppSmartItem
-                v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
-                ref="exit"
-                :icon="IconUserX"
-                :label="t('team.exit')"
-                :shortcut="['X']"
-                @click="
-                  () => {
-                    confirmExit = true
-                    hide()
-                  }
+          <HoppButtonSecondary
+            v-if="team.myRole === 'OWNER'"
+            :icon="IconUserPlus"
+            class="rounded-none"
+            :label="t('team.invite')"
+            @click="
+              () => {
+                emit('invite-team')
+              }
+            "
+          />
+        </span>
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            :on-shown="() => tippyActions.focus()"
+          >
+            <HoppButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t('action.more')"
+              :icon="IconMoreVertical"
+            />
+            <template #content="{ hide }">
+              <div
+                ref="tippyActions"
+                class="flex flex-col focus:outline-none"
+                tabindex="0"
+                @keyup.e="team.myRole === 'OWNER' ? edit.$el.click() : null"
+                @keyup.x="
+                  !(team.myRole === 'OWNER' && team.ownersCount == 1)
+                    ? exit.$el.click()
+                    : null
                 "
-              />
-              <HoppSmartItem
-                v-if="team.myRole === 'OWNER'"
-                ref="deleteAction"
-                :icon="IconTrash2"
-                :label="t('action.delete')"
-                :shortcut="['⌫']"
-                @click="
-                  () => {
-                    confirmRemove = true
-                    hide()
-                  }
+                @keyup.delete="
+                  team.myRole === 'OWNER' ? deleteAction.$el.click() : null
                 "
-              />
-            </div>
-          </template>
-        </tippy>
-      </span>
-    </div>
+                @keyup.escape="hide()"
+              >
+                <HoppSmartItem
+                  v-if="team.myRole === 'OWNER'"
+                  ref="edit"
+                  :icon="IconEdit"
+                  :label="t('action.edit')"
+                  :shortcut="['E']"
+                  @click="
+                    () => {
+                      $emit('edit-team')
+                      hide()
+                    }
+                  "
+                />
+                <HoppSmartItem
+                  v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
+                  ref="exit"
+                  :icon="IconUserX"
+                  :label="t('team.exit')"
+                  :shortcut="['X']"
+                  @click="
+                    () => {
+                      confirmExit = true
+                      hide()
+                    }
+                  "
+                />
+                <HoppSmartItem
+                  v-if="team.myRole === 'OWNER'"
+                  ref="deleteAction"
+                  :icon="IconTrash2"
+                  :label="t('action.delete')"
+                  :shortcut="['⌫']"
+                  @click="
+                    () => {
+                      confirmRemove = true
+                      hide()
+                    }
+                  "
+                />
+              </div>
+            </template>
+          </tippy>
+        </span>
+      </div>
+    </template>
     <HoppSmartConfirmModal
       :show="confirmRemove"
       :title="t('confirm.remove_team')"
+      :loading-state="loading"
       @hide-modal="confirmRemove = false"
       @resolve="deleteTeam()"
     />
@@ -161,6 +168,8 @@ import IconMoreVertical from "~icons/lucide/more-vertical"
 import IconUserX from "~icons/lucide/user-x"
 import IconUserPlus from "~icons/lucide/user-plus"
 import IconTrash2 from "~icons/lucide/trash-2"
+import { useService } from "dioc/vue"
+import { WorkspaceService } from "~/services/workspace.service"
 
 const t = useI18n()
 
@@ -173,6 +182,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   (e: "edit-team"): void
   (e: "invite-team"): void
+  (e: "refetch-teams"): void
 }>()
 
 const toast = useToast()
@@ -180,7 +190,12 @@ const toast = useToast()
 const confirmRemove = ref(false)
 const confirmExit = ref(false)
 
+const loading = ref(false)
+
+const workspaceService = useService(WorkspaceService)
+
 const deleteTeam = () => {
+  loading.value = true
   pipe(
     backendDeleteTeam(props.teamID),
     TE.match(
@@ -188,9 +203,22 @@ const deleteTeam = () => {
         // TODO: Better errors ? We know the possible errors now
         toast.error(`${t("error.something_went_wrong")}`)
         console.error(err)
+        loading.value = false
       },
       () => {
         toast.success(`${t("team.deleted")}`)
+        loading.value = false
+        emit("refetch-teams")
+
+        const currentWorkspace = workspaceService.currentWorkspace.value
+
+        // If the current workspace is the deleted team, change the workspace to personal
+        if (
+          currentWorkspace.type === "team" &&
+          currentWorkspace.teamID === props.teamID
+        ) {
+          workspaceService.changeWorkspace({ type: "personal" })
+        }
       }
     )
   )() // Tasks (and TEs) are lazy, so call the function returned
diff --git a/packages/hoppscotch-common/src/components/teams/index.vue b/packages/hoppscotch-common/src/components/teams/index.vue
index 2c3972ec5e..85c7206f9e 100644
--- a/packages/hoppscotch-common/src/components/teams/index.vue
+++ b/packages/hoppscotch-common/src/components/teams/index.vue
@@ -4,6 +4,7 @@
       <HoppButtonSecondary
         :label="`${t('team.create_new')}`"
         outline
+        :icon="IconPlus"
         @click="displayModalAdd(true)"
       />
       <div v-if="loading" class="flex flex-col items-center justify-center">
@@ -16,13 +17,6 @@
         :alt="`${t('empty.teams')}`"
         :text="`${t('empty.teams')}`"
       >
-        <template #body>
-          <HoppButtonSecondary
-            :label="`${t('team.create_new')}`"
-            filled
-            @click="displayModalAdd(true)"
-          />
-        </template>
       </HoppSmartPlaceholder>
       <div
         v-else-if="!loading"
@@ -39,6 +33,7 @@
           :compact="modal"
           @edit-team="editTeam(team, team.id)"
           @invite-team="inviteTeam(team, team.id)"
+          @refetch-teams="refetchTeams"
         />
       </div>
       <div v-if="!loading && adapterError" class="flex flex-col items-center">
@@ -76,6 +71,7 @@ import { useReadonlyStream } from "@composables/stream"
 import { useColorMode } from "@composables/theming"
 import { WorkspaceService } from "~/services/workspace.service"
 import { useService } from "dioc/vue"
+import IconPlus from "~icons/lucide/plus"
 
 const t = useI18n()
 

From 38b2795eed1d771cebacbb54072864f283dea384 Mon Sep 17 00:00:00 2001
From: nivedin <nivedinp@gmail.com>
Date: Thu, 21 Mar 2024 19:58:00 +0530
Subject: [PATCH 2/3] refactor: close modal after resolve and remove spinner in
 team card

---
 .../src/components/teams/Team.vue             | 250 +++++++++---------
 1 file changed, 123 insertions(+), 127 deletions(-)

diff --git a/packages/hoppscotch-common/src/components/teams/Team.vue b/packages/hoppscotch-common/src/components/teams/Team.vue
index f8e854a350..f07e65e332 100644
--- a/packages/hoppscotch-common/src/components/teams/Team.vue
+++ b/packages/hoppscotch-common/src/components/teams/Team.vue
@@ -3,137 +3,131 @@
     class="flex flex-1 flex-col rounded border border-divider"
     @contextmenu.prevent="!compact ? options.tippy.show() : null"
   >
-    <div v-if="loading" class="flex flex-col items-center justify-center p-2">
-      <HoppSmartSpinner class="mb-4" />
-      <span class="text-secondaryLight">{{ t("state.loading") }}</span>
-    </div>
-    <template v-else>
-      <div
-        class="flex flex-1 items-start"
-        :class="
-          compact
-            ? team.myRole === 'OWNER'
-              ? 'cursor-pointer transition hover:border-dividerDark hover:bg-primaryDark focus-visible:border-dividerDark'
-              : 'cursor-not-allowed bg-primaryLight'
-            : ''
-        "
-        @click="
-          compact
-            ? team.myRole === 'OWNER'
-              ? $emit('invite-team')
-              : noPermission()
-            : ''
-        "
-      >
-        <div class="p-4">
-          <label
-            class="font-semibold text-secondaryDark"
-            :class="{ 'cursor-pointer': compact && team.myRole === 'OWNER' }"
-          >
-            {{ team.name || t("state.nothing_found") }}
-          </label>
-          <TeamsMemberStack :team-members="team.teamMembers" class="mt-4" />
-        </div>
+    <div
+      class="flex flex-1 items-start"
+      :class="
+        compact
+          ? team.myRole === 'OWNER'
+            ? 'cursor-pointer transition hover:border-dividerDark hover:bg-primaryDark focus-visible:border-dividerDark'
+            : 'cursor-not-allowed bg-primaryLight'
+          : ''
+      "
+      @click="
+        compact
+          ? team.myRole === 'OWNER'
+            ? $emit('invite-team')
+            : noPermission()
+          : ''
+      "
+    >
+      <div class="p-4">
+        <label
+          class="font-semibold text-secondaryDark"
+          :class="{ 'cursor-pointer': compact && team.myRole === 'OWNER' }"
+        >
+          {{ team.name || t("state.nothing_found") }}
+        </label>
+        <TeamsMemberStack :team-members="team.teamMembers" class="mt-4" />
       </div>
-      <div v-if="!compact" class="flex flex-shrink-0 items-end justify-between">
-        <span>
-          <HoppButtonSecondary
-            v-if="team.myRole === 'OWNER'"
-            :icon="IconEdit"
-            class="rounded-none"
-            :label="t('action.edit')"
-            @click="
-              () => {
-                $emit('edit-team')
-              }
-            "
-          />
+    </div>
+    <div v-if="!compact" class="flex flex-shrink-0 items-end justify-between">
+      <span>
+        <HoppButtonSecondary
+          v-if="team.myRole === 'OWNER'"
+          :icon="IconEdit"
+          class="rounded-none"
+          :label="t('action.edit')"
+          @click="
+            () => {
+              $emit('edit-team')
+            }
+          "
+        />
+        <HoppButtonSecondary
+          v-if="team.myRole === 'OWNER'"
+          :icon="IconUserPlus"
+          class="rounded-none"
+          :label="t('team.invite')"
+          @click="
+            () => {
+              emit('invite-team')
+            }
+          "
+        />
+      </span>
+      <span>
+        <tippy
+          ref="options"
+          interactive
+          trigger="click"
+          theme="popover"
+          :on-shown="() => tippyActions.focus()"
+        >
           <HoppButtonSecondary
-            v-if="team.myRole === 'OWNER'"
-            :icon="IconUserPlus"
-            class="rounded-none"
-            :label="t('team.invite')"
-            @click="
-              () => {
-                emit('invite-team')
-              }
-            "
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t('action.more')"
+            :icon="IconMoreVertical"
           />
-        </span>
-        <span>
-          <tippy
-            ref="options"
-            interactive
-            trigger="click"
-            theme="popover"
-            :on-shown="() => tippyActions.focus()"
-          >
-            <HoppButtonSecondary
-              v-tippy="{ theme: 'tooltip' }"
-              :title="t('action.more')"
-              :icon="IconMoreVertical"
-            />
-            <template #content="{ hide }">
-              <div
-                ref="tippyActions"
-                class="flex flex-col focus:outline-none"
-                tabindex="0"
-                @keyup.e="team.myRole === 'OWNER' ? edit.$el.click() : null"
-                @keyup.x="
-                  !(team.myRole === 'OWNER' && team.ownersCount == 1)
-                    ? exit.$el.click()
-                    : null
+          <template #content="{ hide }">
+            <div
+              ref="tippyActions"
+              class="flex flex-col focus:outline-none"
+              tabindex="0"
+              @keyup.e="team.myRole === 'OWNER' ? edit.$el.click() : null"
+              @keyup.x="
+                !(team.myRole === 'OWNER' && team.ownersCount == 1)
+                  ? exit.$el.click()
+                  : null
+              "
+              @keyup.delete="
+                team.myRole === 'OWNER' ? deleteAction.$el.click() : null
+              "
+              @keyup.escape="hide()"
+            >
+              <HoppSmartItem
+                v-if="team.myRole === 'OWNER'"
+                ref="edit"
+                :icon="IconEdit"
+                :label="t('action.edit')"
+                :shortcut="['E']"
+                @click="
+                  () => {
+                    $emit('edit-team')
+                    hide()
+                  }
                 "
-                @keyup.delete="
-                  team.myRole === 'OWNER' ? deleteAction.$el.click() : null
+              />
+              <HoppSmartItem
+                v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
+                ref="exit"
+                :icon="IconUserX"
+                :label="t('team.exit')"
+                :shortcut="['X']"
+                @click="
+                  () => {
+                    confirmExit = true
+                    hide()
+                  }
                 "
-                @keyup.escape="hide()"
-              >
-                <HoppSmartItem
-                  v-if="team.myRole === 'OWNER'"
-                  ref="edit"
-                  :icon="IconEdit"
-                  :label="t('action.edit')"
-                  :shortcut="['E']"
-                  @click="
-                    () => {
-                      $emit('edit-team')
-                      hide()
-                    }
-                  "
-                />
-                <HoppSmartItem
-                  v-if="!(team.myRole === 'OWNER' && team.ownersCount == 1)"
-                  ref="exit"
-                  :icon="IconUserX"
-                  :label="t('team.exit')"
-                  :shortcut="['X']"
-                  @click="
-                    () => {
-                      confirmExit = true
-                      hide()
-                    }
-                  "
-                />
-                <HoppSmartItem
-                  v-if="team.myRole === 'OWNER'"
-                  ref="deleteAction"
-                  :icon="IconTrash2"
-                  :label="t('action.delete')"
-                  :shortcut="['⌫']"
-                  @click="
-                    () => {
-                      confirmRemove = true
-                      hide()
-                    }
-                  "
-                />
-              </div>
-            </template>
-          </tippy>
-        </span>
-      </div>
-    </template>
+              />
+              <HoppSmartItem
+                v-if="team.myRole === 'OWNER'"
+                ref="deleteAction"
+                :icon="IconTrash2"
+                :label="t('action.delete')"
+                :shortcut="['⌫']"
+                @click="
+                  () => {
+                    confirmRemove = true
+                    hide()
+                  }
+                "
+              />
+            </div>
+          </template>
+        </tippy>
+      </span>
+    </div>
     <HoppSmartConfirmModal
       :show="confirmRemove"
       :title="t('confirm.remove_team')"
@@ -212,13 +206,15 @@ const deleteTeam = () => {
 
         const currentWorkspace = workspaceService.currentWorkspace.value
 
-        // If the current workspace is the deleted team, change the workspace to personal
+        // If the current workspace is the deleted workspace, change the workspace to personal
         if (
           currentWorkspace.type === "team" &&
           currentWorkspace.teamID === props.teamID
         ) {
           workspaceService.changeWorkspace({ type: "personal" })
         }
+
+        confirmRemove.value = false
       }
     )
   )() // Tasks (and TEs) are lazy, so call the function returned

From ebc18d005c0143309c001eab886d451b2f3edcee Mon Sep 17 00:00:00 2001
From: jamesgeorge007 <jamesgeorge998001@gmail.com>
Date: Fri, 22 Mar 2024 17:52:50 +0530
Subject: [PATCH 3/3] chore: close the confirmation modal if the team deletion
 attempt fails

---
 packages/hoppscotch-common/src/components/teams/Team.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/hoppscotch-common/src/components/teams/Team.vue b/packages/hoppscotch-common/src/components/teams/Team.vue
index f07e65e332..76b51bf4e7 100644
--- a/packages/hoppscotch-common/src/components/teams/Team.vue
+++ b/packages/hoppscotch-common/src/components/teams/Team.vue
@@ -198,6 +198,7 @@ const deleteTeam = () => {
         toast.error(`${t("error.something_went_wrong")}`)
         console.error(err)
         loading.value = false
+        confirmRemove.value = false
       },
       () => {
         toast.success(`${t("team.deleted")}`)