feat(teams): enhance team deletion process with success messaging and improved error handling

Author: JasonKrik

services/backend/src/middleware/roleMiddleware.ts

@@ -9,25 +9,33 @@ import { RoleService } from '../services/roleService';
  */
 export function requirePermission(permission: string) {
   return async (request: FastifyRequest, reply: FastifyReply) => {
-    // Check if user is authenticated
-    if (!request.user) {
-      return reply.status(401).send({ error: 'Authentication required' });
-    }
-
-    const roleService = new RoleService();
-    
     try {
+      // Check if user is authenticated
+      if (!request.user) {
+        return reply.status(401).send({ 
+          success: false,
+          error: 'Authentication required' 
+        });
+      }
+
+      const roleService = new RoleService();
+      
       const hasPermission = await roleService.userHasPermission(request.user.id, permission);
 
       if (!hasPermission) {
         return reply.status(403).send({ 
+          success: false,
           error: 'Insufficient permissions',
           required_permission: permission 
         });
       }
     } catch (error) {
-      request.log.error(error, 'Error checking user permissions');
-      return reply.status(500).send({ error: 'Internal server error' });
+      request.log.error(error, `Error checking user permissions for permission: ${permission}`);
+      return reply.status(500).send({ 
+        success: false,
+        error: 'Internal server error',
+        details: error instanceof Error ? error.message : 'Unknown error'
+      });
     }
   };
 }

services/backend/src/routes/teams/index.ts

@@ -429,8 +429,19 @@ export default async function teamsRoute(fastify: FastifyInstance) {
         });
       }
 
-      // Check if it's a default team
-      const isDefaultTeam = await TeamService.isDefaultTeam(teamId, request.user.id);
+      // Check if it's a default team with better error handling
+      let isDefaultTeam = false;
+      try {
+        isDefaultTeam = await TeamService.isDefaultTeam(teamId, request.user.id);
+        fastify.log.info(`Default team check for team ${teamId}: ${isDefaultTeam}`);
+      } catch (defaultTeamError) {
+        fastify.log.error(defaultTeamError, 'Error checking if team is default team');
+        return reply.status(500).send({
+          success: false,
+          error: 'Failed to verify team deletion eligibility',
+        });
+      }
+
       if (isDefaultTeam) {
         return reply.status(400).send({
           success: false,
@@ -457,6 +468,7 @@ export default async function teamsRoute(fastify: FastifyInstance) {
       return reply.status(500).send({
         success: false,
         error: 'Failed to delete team',
+        details: error instanceof Error ? error.message : 'Unknown error'
       });
     }
   });

services/frontend/src/i18n/locales/en/teams.ts

@@ -11,6 +11,9 @@ export default {
         placeholder: 'Search teams...'
       }
     },
+    messages: {
+      deleteSuccess: 'Team "{teamName}" has been successfully deleted.'
+    },
     pagination: {
       rowsSelected: '{selected} of {total} row(s) selected.',
       previous: 'Previous',

services/frontend/src/services/teamService.ts

@@ -275,9 +275,6 @@ export class TeamService {
 
       const response = await fetch(`${apiUrl}/api/teams/${teamId}`, {
         method: 'DELETE',
-        headers: {
-          'Content-Type': 'application/json',
-        },
         credentials: 'include',
       });
 

services/frontend/src/views/Teams.vue

@@ -28,10 +28,13 @@ import AddTeamModal from '@/components/teams/AddTeamModal.vue'
 import { TeamService, type TeamWithRole } from '@/services/teamService'
 import { UserService } from '@/services/userService'
 import { createColumns } from './teams/columns'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { CheckCircle } from 'lucide-vue-next'
 
 const { t } = useI18n()
 const router = useRouter()
+const route = useRoute()
 
 // State
 const teams = ref<TeamWithRole[]>([])
@@ -44,6 +47,7 @@ const rowSelection = ref({})
 const showAddModal = ref(false)
 const canCreateTeams = ref(false)
 const userPermissions = ref<string[]>([])
+const deleteSuccessMessage = ref<string | null>(null)
 
 // Handle manage team navigation
 const handleManageTeam = (teamId: string) => {
@@ -89,8 +93,27 @@ const handleTeamCreated = async () => {
   await TeamService.getUserTeams(true)
 }
 
+// Check for delete success message from query params
+const checkDeleteSuccess = () => {
+  const deletedTeamName = route.query.deleted as string
+  if (deletedTeamName) {
+    deleteSuccessMessage.value = t('teams.messages.deleteSuccess', { teamName: deletedTeamName })
+
+    // Clear the query parameter from URL
+    router.replace({ path: '/teams' })
+
+    // Clear the message after 5 seconds
+    setTimeout(() => {
+      deleteSuccessMessage.value = null
+    }, 5000)
+  }
+}
+
 // Load data on component mount
 onMounted(async () => {
+  // Check for delete success message first
+  checkDeleteSuccess()
+
   await Promise.all([
     checkPermissions(),
     fetchTeams()
@@ -170,6 +193,12 @@ const filterValue = computed({
         </Button>
       </div>
 
+      <!-- Delete Success Message -->
+      <Alert v-if="deleteSuccessMessage" class="border-green-200 bg-green-50 text-green-800">
+        <CheckCircle class="h-4 w-4" />
+        <AlertDescription>{{ deleteSuccessMessage }}</AlertDescription>
+      </Alert>
+
       <!-- Loading State -->
       <div v-if="isLoading" class="text-muted-foreground">
         {{ t('teams.table.loading') }}

services/frontend/src/views/teams/TeamManage.vue

@@ -170,10 +170,14 @@ const saveTeam = async () => {
 const deleteTeam = async () => {
   try {
     isDeleting.value = true
+    const teamName = team.value?.name || 'Unknown Team'
     await TeamService.deleteTeam(teamId.value)
 
-    // Redirect to teams list
-    router.push('/teams')
+    // Redirect to teams list with success message
+    router.push({
+      path: '/teams',
+      query: { deleted: teamName }
+    })
   } catch (err) {
     error.value = err instanceof Error ? err.message : 'Failed to delete team'
     console.error('Error deleting team:', err)