fix: workspace list section bugs (#3925)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>

packages/hoppscotch-common/src/components/teams/Team.vue

@@ -131,6 +131,7 @@
     <HoppSmartConfirmModal
       :show="confirmRemove"
       :title="t('confirm.remove_team')"
+      :loading-state="loading"
       @hide-modal="confirmRemove = false"
       @resolve="deleteTeam()"
     />
@@ -161,6 +162,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,24 +176,46 @@ const props = defineProps<{
 const emit = defineEmits<{
   (e: "edit-team"): void
   (e: "invite-team"): void
+  (e: "refetch-teams"): void
 }>()
 
 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(
       (err) => {
         // TODO: Better errors ? We know the possible errors now
         toast.error(`${t("error.something_went_wrong")}`)
         console.error(err)
+        loading.value = false
+        confirmRemove.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 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

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()