feat: Enhance credential management by implementing team-based credential retrieval and success message handling

Author: Lasim

services/frontend/src/services/credentialsService.ts

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

services/frontend/src/views/CredentialDetail.vue

@@ -42,19 +42,47 @@ const error = ref<string | null>(null)
 const showDeleteModal = ref(false)
 const isDeleting = ref(false)
 const deleteError = ref<string | null>(null)
-const successMessage = ref<string | null>(null)
 
 const credentialId = route.params.id as string
 
-// Fetch credential details from API
-async function fetchCredential(): Promise<void> {
-  if (!selectedTeam.value) return
-
+// Find which team owns the credential by trying each team
+async function findCredentialTeam(): Promise<void> {
   try {
     isLoading.value = true
     error.value = null
 
-    credential.value = await CredentialsService.getCredential(selectedTeam.value.id, credentialId)
+    const userTeams = await TeamService.getUserTeams()
+
+    if (userTeams.length === 0) {
+      error.value = 'No teams found for user'
+      return
+    }
+
+    // Try each team to find the one that owns this credential
+    for (const team of userTeams) {
+      try {
+        const foundCredential = await CredentialsService.getCredential(team.id, credentialId)
+
+        // If we successfully found the credential, this is the correct team
+        credential.value = foundCredential
+        selectedTeam.value = team
+        userRole.value = team.role || 'team_user'
+        return
+
+      } catch (err) {
+        // If credential not found in this team, continue to next team
+        if (err instanceof Error && err.message.includes('not found')) {
+          continue
+        }
+        // If it's a different error (auth, permissions, etc.), re-throw
+        throw err
+      }
+    }
+
+    // If we get here, credential wasn't found in any team
+    error.value = 'Credential not found in any of your teams'
+    credential.value = null
+
   } catch (err) {
     error.value = err instanceof Error ? err.message : 'An unknown error occurred'
     credential.value = null
@@ -63,25 +91,9 @@ async function fetchCredential(): Promise<void> {
   }
 }
 
-// Initialize team context
-async function initializeTeamContext(): Promise<void> {
-  try {
-    const userTeams = await TeamService.getUserTeams()
-    if (userTeams.length > 0) {
-      selectedTeam.value = userTeams[0] // Default to first team
-      userRole.value = selectedTeam.value.role || 'team_user'
-    }
-  } catch (error) {
-    console.error('Error initializing team context:', error)
-  }
-}
-
 // Load data on component mount
 onMounted(async () => {
-  await initializeTeamContext()
-  if (selectedTeam.value) {
-    await fetchCredential()
-  }
+  await findCredentialTeam()
 })
 
 // Computed properties for display
@@ -148,16 +160,14 @@ const confirmDelete = async () => {
     // Emit general credentials updated event
     eventBus.emit('credentials-updated')
 
-    // Set success message
-    successMessage.value = `Credential "${credential.value.name}" has been successfully deleted.`
-
-    // Close modal and navigate back to credentials list
+    // Close modal and navigate back to credentials list with success message
     showDeleteModal.value = false
 
-    // Navigate back with a slight delay to show success message
-    setTimeout(() => {
-      router.push('/credentials')
-    }, 1500)
+    // Navigate back with success message in query params
+    router.push({
+      path: '/credentials',
+      query: { deleted: credential.value.name }
+    })
 
   } catch (err) {
     console.error('Error deleting credential:', err)
@@ -223,14 +233,6 @@ const handleUpdateSecrets = () => {
         </DropdownMenu>
       </div>
 
-      <!-- Success Message -->
-      <Alert v-if="successMessage" class="mb-4">
-        <CheckCircle class="h-4 w-4" />
-        <AlertDescription>
-          {{ successMessage }}
-        </AlertDescription>
-      </Alert>
-
       <!-- Loading State -->
       <div v-if="isLoading" class="text-muted-foreground">
         {{ t('credentials.detail.loading') }}

services/frontend/src/views/Credentials.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted, computed, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useRouter } from 'vue-router'
+import { useRouter, useRoute } from 'vue-router'
 import { Input } from '@/components/ui/input'
 import { Button } from '@/components/ui/button'
-import { Plus, Loader2, Search } from 'lucide-vue-next'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Plus, Loader2, Search, CheckCircle } from 'lucide-vue-next'
 import DashboardLayout from '@/components/DashboardLayout.vue'
 import { CredentialsService } from '@/services/credentialsService'
 import { UserService } from '@/services/userService'
@@ -27,6 +28,7 @@ function debounce<T extends (...args: any[]) => any>(func: T, wait: number): T {
 
 const { t } = useI18n()
 const router = useRouter()
+const route = useRoute()
 const eventBus = useEventBus()
 
 // State
@@ -39,6 +41,7 @@ const showAddModal = ref(false)
 const canCreateCredentials = ref(false)
 const userPermissions = ref<string[]>([])
 const searchQuery = ref('')
+const deleteSuccessMessage = ref<string | null>(null)
 
 // Team context (same pattern as teams page)
 const selectedTeam = ref<Team | null>(null)
@@ -190,8 +193,27 @@ const handleCredentialCreated = async () => {
   eventBus.emit('credentials-updated')
 }
 
+// Check for delete success message from query params
+const checkDeleteSuccess = () => {
+  const deletedCredentialName = route.query.deleted as string
+  if (deletedCredentialName) {
+    deleteSuccessMessage.value = `Credential "${deletedCredentialName}" has been successfully deleted.`
+
+    // Clear the query parameter from URL
+    router.replace({ path: '/credentials' })
+
+    // 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(),
     initializeSelectedTeam()
@@ -238,6 +260,12 @@ onUnmounted(() => {
         </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>
+
       <!-- No team selected state -->
       <div v-if="!selectedTeam" class="text-center py-12">
         <p class="text-muted-foreground">{{ t('credentials.permissions.noAccess') }}</p>