fix(frontend): preserve team permissions after update and improve delete modal UX

Lasim · Lasim · commit d7e92dbd2418 · 2025-12-13T21:53:20.000+01:00
- Fix critical bug where team permissions (role, is_admin, is_owner) were reset after updating team details by merging response data instead of replacing
- Replace AlertDialog with Dialog component for team deletion modal and increase width to 600px
- Add confirmation input requiring "sudo delete team" text before enabling delete button
- Remove red styling from consequences list in delete modal for less alarming appearance
- Remove icons from Save Changes, Delete Team, and Add Member buttons for cleaner UI
- Fix button loading states to properly display Spinner component alongside text
- Add new translation keys for deletion confirmation workflow
diff --git a/services/frontend/src/components/teams/manage/TeamInfo.vue b/services/frontend/src/components/teams/manage/TeamInfo.vue
@@ -6,28 +6,26 @@ import { toast } from 'vue-sonner'
 import { Button } from '@/components/ui/button'
 import { Spinner } from '@/components/ui/spinner'
 import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
 import { Badge } from '@/components/ui/badge'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import {
-  Save,
   Lock,
   Calendar,
   Users,
   Hash,
   AlertTriangle,
-  Trash2,
   XCircle,
   Shield
 } from 'lucide-vue-next'
 import {
-  AlertDialog,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui/alert-dialog'
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
 import { TeamService, type Team } from '@/services/teamService'
 import { DsCard } from '@/components/ui/ds-card'
 import { z } from 'zod'
@@ -56,6 +54,7 @@ const saveError = ref<string | null>(null)
 const isDeleting = ref(false)
 const deleteError = ref<string | null>(null)
 const showDeleteDialog = ref(false)
+const confirmationText = ref('')
 
 // Form data
 const formData = ref({
@@ -97,6 +96,10 @@ const formattedUpdatedDate = computed(() => {
   })
 })
 
+const isConfirmationValid = computed(() => {
+  return confirmationText.value === 'sudo delete team'
+})
+
 // Save team changes
 const saveTeam = async () => {
   try {
@@ -288,11 +291,9 @@ watch(() => props.team, () => {
         <Button
           @click="saveTeam"
           :disabled="!hasChanges || isSaving"
-          class="gap-2"
         >
           <Spinner v-if="isSaving" class="mr-2" />
-          <Save v-else class="h-4 w-4" />
-          {{ t('teams.manage.save') }}
+          {{ isSaving ? t('teams.manage.saving') : t('teams.manage.save') }}
         </Button>
       </template>
     </DsCard>
@@ -323,34 +324,19 @@ watch(() => props.team, () => {
 
       <!-- Delete Team Content -->
       <div v-else class="space-y-4">
-        <p class="text-sm text-muted-foreground">
+        <p class="text-sm">
           {{ t('teams.manage.dangerZone.deleteTeamDescription') }}
         </p>
 
         <!-- What gets deleted -->
-        <div class="bg-muted/50 border rounded-lg p-4">
-          <h4 class="text-sm font-medium mb-3">{{ t('teams.manage.dangerZone.willDelete.title') }}</h4>
-          <ul class="text-xs space-y-2">
-            <li class="flex items-start gap-2">
-              <XCircle class="h-3 w-3 text-destructive mt-0.5 shrink-0" />
-              {{ t('teams.manage.dangerZone.willDelete.servers') }}
-            </li>
-            <li class="flex items-start gap-2">
-              <XCircle class="h-3 w-3 text-destructive mt-0.5 shrink-0" />
-              {{ t('teams.manage.dangerZone.willDelete.credentials') }}
-            </li>
-            <li class="flex items-start gap-2">
-              <XCircle class="h-3 w-3 text-destructive mt-0.5 shrink-0" />
-              {{ t('teams.manage.dangerZone.willDelete.variables') }}
-            </li>
-            <li class="flex items-start gap-2">
-              <XCircle class="h-3 w-3 text-destructive mt-0.5 shrink-0" />
-              {{ t('teams.manage.dangerZone.willDelete.history') }}
-            </li>
-            <li class="flex items-start gap-2">
-              <XCircle class="h-3 w-3 text-destructive mt-0.5 shrink-0" />
-              {{ t('teams.manage.dangerZone.willDelete.members') }}
-            </li>
+        <div>
+          <h4 class="text-sm font-medium mb-2">{{ t('teams.manage.dangerZone.willDelete.title') }}</h4>
+          <ul class="text-sm space-y-1 list-disc list-inside">
+            <li>{{ t('teams.manage.dangerZone.willDelete.servers') }}</li>
+            <li>{{ t('teams.manage.dangerZone.willDelete.credentials') }}</li>
+            <li>{{ t('teams.manage.dangerZone.willDelete.variables') }}</li>
+            <li>{{ t('teams.manage.dangerZone.willDelete.history') }}</li>
+            <li>{{ t('teams.manage.dangerZone.willDelete.members') }}</li>
           </ul>
         </div>
       </div>
@@ -359,69 +345,74 @@ watch(() => props.team, () => {
         <Button
           variant="destructive"
           @click="showDeleteDialog = true"
-          class="gap-2"
         >
-          <Trash2 class="h-4 w-4" />
           {{ t('teams.manage.dangerZone.deleteButton') }}
         </Button>
       </template>
     </DsCard>
 
     <!-- Delete Confirmation Dialog -->
-    <AlertDialog :open="showDeleteDialog" @update:open="showDeleteDialog = $event">
-      <AlertDialogContent class="sm:max-w-[500px]">
-        <AlertDialogHeader>
-          <AlertDialogTitle class="flex items-center gap-2 text-destructive">
-            <AlertTriangle class="h-5 w-5" />
-            {{ t('teams.manage.deleteDialog.title') }}
-          </AlertDialogTitle>
-          <AlertDialogDescription class="space-y-4">
+    <Dialog
+      :open="showDeleteDialog"
+      @update:open="(value) => {
+        showDeleteDialog = value
+        if (!value) confirmationText = ''
+      }"
+    >
+      <DialogContent class="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>{{ t('teams.manage.deleteDialog.title') }}</DialogTitle>
+          <DialogDescription class="space-y-4">
             <p>{{ t('teams.manage.deleteDialog.warning') }}</p>
 
             <div class="rounded-lg border p-3 bg-muted/50">
               <p class="font-medium text-sm mb-1">{{ t('teams.manage.deleteDialog.teamName') }}:</p>
               <p class="font-mono text-sm">"{{ team.name }}"</p>
             </div>
 
-            <div class="rounded-lg border-destructive/50 bg-destructive/5 p-4 space-y-3">
-              <p class="text-sm font-medium text-destructive">{{ t('teams.manage.deleteDialog.consequences') }}</p>
-              <ul class="text-xs space-y-2">
-                <li class="flex items-start gap-2">
-                  <XCircle class="h-3 w-3 text-destructive mt-0.5 shrink-0" />
-                  {{ t('teams.manage.deleteDialog.consequencesList.servers') }}
-                </li>
-                <li class="flex items-start gap-2">
-                  <XCircle class="h-3 w-3 text-destructive mt-0.5 shrink-0" />
-                  {{ t('teams.manage.deleteDialog.consequencesList.credentials') }}
-                </li>
-                <li class="flex items-start gap-2">
-                  <XCircle class="h-3 w-3 text-destructive mt-0.5 shrink-0" />
-                  {{ t('teams.manage.deleteDialog.consequencesList.variables') }}
-                </li>
-                <li class="flex items-start gap-2">
-                  <XCircle class="h-3 w-3 text-destructive mt-0.5 shrink-0" />
-                  {{ t('teams.manage.deleteDialog.consequencesList.history') }}
-                </li>
+            <div>
+              <p class="text-sm font-medium mb-2">{{ t('teams.manage.deleteDialog.consequences') }}</p>
+              <ul class="text-sm space-y-1 list-disc list-inside">
+                <li>{{ t('teams.manage.deleteDialog.consequencesList.servers') }}</li>
+                <li>{{ t('teams.manage.deleteDialog.consequencesList.credentials') }}</li>
+                <li>{{ t('teams.manage.deleteDialog.consequencesList.variables') }}</li>
+                <li>{{ t('teams.manage.deleteDialog.consequencesList.history') }}</li>
               </ul>
             </div>
-          </AlertDialogDescription>
-        </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel @click="showDeleteDialog = false">
+
+            <div class="space-y-2">
+              <Label for="delete-confirmation">
+                {{ t('teams.manage.deleteDialog.confirmationLabel') }}
+              </Label>
+              <Input
+                id="delete-confirmation"
+                v-model="confirmationText"
+                :placeholder="t('teams.manage.deleteDialog.confirmationPlaceholder')"
+                class="font-mono"
+              />
+              <p class="text-xs text-muted-foreground">
+                {{ t('teams.manage.deleteDialog.confirmationRequired') }}
+              </p>
+            </div>
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            variant="outline"
+            @click="showDeleteDialog = false"
+          >
             {{ t('teams.manage.deleteDialog.cancel') }}
-          </AlertDialogCancel>
+          </Button>
           <Button
             variant="destructive"
             @click="deleteTeam"
-            :disabled="isDeleting"
-            class="gap-2"
+            :disabled="!isConfirmationValid || isDeleting"
           >
             <Spinner v-if="isDeleting" class="mr-2" />
-            <Trash2 v-else class="h-4 w-4" />
-            {{ t('teams.manage.deleteDialog.confirm') }}
+            {{ isDeleting ? t('teams.manage.deleteDialog.deleting') : t('teams.manage.deleteDialog.confirm') }}
           </Button>
-        </AlertDialogFooter>
-      </AlertDialogContent>
-    </AlertDialog>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   </div>
 </template>
diff --git a/services/frontend/src/components/teams/manage/members/MembersList.vue b/services/frontend/src/components/teams/manage/members/MembersList.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n'
 import { Button } from '@/components/ui/button'
 import { Alert, AlertDescription } from '@/components/ui/alert'
 import { Skeleton } from '@/components/ui/skeleton'
-import { Users, UserPlus, Info, AlertTriangle } from 'lucide-vue-next'
+import { Users, Info, AlertTriangle } from 'lucide-vue-next'
 import MemberRow from './MemberRow.vue'
 import { DsCard } from '@/components/ui/ds-card'
 import type { Team } from '@/services/teamService'
@@ -249,8 +249,7 @@ defineExpose({
         <p class="text-sm text-muted-foreground mb-4">
           {{ t('teams.manage.members.noMembers.description') }}
         </p>
-        <Button v-if="canAddMembers" class="gap-2" @click="handleAddMember">
-          <UserPlus class="h-4 w-4" />
+        <Button v-if="canAddMembers" @click="handleAddMember">
           {{ t('teams.manage.members.noMembers.addFirstMember') }}
         </Button>
       </div>
@@ -268,10 +267,8 @@ defineExpose({
 
       <template v-if="canAddMembers" #footer-actions>
         <Button
-          class="gap-2"
           @click="handleAddMember"
         >
-          <UserPlus class="h-4 w-4" />
           {{ t('teams.manage.members.addMember') }}
         </Button>
       </template>
diff --git a/services/frontend/src/i18n/locales/en/teams.ts b/services/frontend/src/i18n/locales/en/teams.ts
@@ -277,6 +277,9 @@ export default {
           variables: 'All global environment variables',
           history: 'Complete deployment history and logs'
         },
+        confirmationRequired: 'Type "sudo delete team" to confirm',
+        confirmationLabel: 'Confirmation',
+        confirmationPlaceholder: 'Type: sudo delete team',
         cancel: 'Cancel',
         confirm: 'Delete Team',
         deleting: 'Deleting...'
diff --git a/services/frontend/src/views/teams/manage/[id].vue b/services/frontend/src/views/teams/manage/[id].vue
@@ -83,7 +83,21 @@ const loadTeam = async () => {
 
 // Handle team updates
 const handleTeamUpdated = (updatedTeam: Team) => {
-  team.value = updatedTeam
+  // Merge updated team data while preserving permission fields
+  // that may not be returned by the update endpoint
+  if (team.value) {
+    team.value = {
+      ...team.value,
+      ...updatedTeam,
+      // Explicitly preserve permission fields if they're not in the update response
+      role: updatedTeam.role ?? team.value.role,
+      is_admin: updatedTeam.is_admin ?? team.value.is_admin,
+      is_owner: updatedTeam.is_owner ?? team.value.is_owner,
+      member_count: updatedTeam.member_count ?? team.value.member_count,
+    }
+  } else {
+    team.value = updatedTeam
+  }
 }
 
 // Handle team selection from sidebar
