fix some bugs
This commit is contained in:
Warp Agent
@@ -1,4 +1,4 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { useState, useEffect, useRef } from 'react'
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
|
||||
import { ChevronRight, Search, Filter, UserPlus, History, ChevronLeft, MoreVertical, Lock, Verified, Wrench, Eye, HardDrive, Shield, ArrowRight, Network, ChevronRight as ChevronRightIcon, X, Edit, Trash2, User as UserIcon, Plus } from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
@@ -651,6 +651,30 @@ function EditUserForm({ user, onClose, onSuccess }: EditUserFormProps) {
|
||||
const [selectedRole, setSelectedRole] = useState('')
|
||||
const [selectedGroup, setSelectedGroup] = useState('')
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
// Use refs to always get the latest state values
|
||||
const userRolesRef = useRef(userRoles)
|
||||
const userGroupsRef = useRef(userGroups)
|
||||
|
||||
// Update refs whenever state changes
|
||||
useEffect(() => {
|
||||
userRolesRef.current = userRoles
|
||||
console.log('useEffect userRoles - state updated:', userRoles)
|
||||
}, [userRoles])
|
||||
|
||||
useEffect(() => {
|
||||
userGroupsRef.current = userGroups
|
||||
console.log('useEffect userGroups - state updated:', userGroups)
|
||||
}, [userGroups])
|
||||
|
||||
// Debug: log state changes
|
||||
useEffect(() => {
|
||||
console.log('EditUserForm - userRoles state changed:', userRoles)
|
||||
}, [userRoles])
|
||||
|
||||
useEffect(() => {
|
||||
console.log('EditUserForm - userGroups state changed:', userGroups)
|
||||
}, [userGroups])
|
||||
|
||||
// Fetch available roles and groups
|
||||
const { data: availableRoles = [] } = useQuery({
|
||||
@@ -688,20 +712,27 @@ function EditUserForm({ user, onClose, onSuccess }: EditUserFormProps) {
|
||||
mutationFn: (roleName: string) => iamApi.assignRoleToUser(user.id, roleName),
|
||||
onMutate: async (roleName: string) => {
|
||||
// Optimistic update: add role to state immediately
|
||||
console.log('assignRoleMutation onMutate - BEFORE update, current userRoles:', userRolesRef.current)
|
||||
setUserRoles(prev => {
|
||||
if (prev.includes(roleName)) return prev
|
||||
return [...prev, roleName]
|
||||
const newRoles = prev.includes(roleName) ? prev : [...prev, roleName]
|
||||
console.log('assignRoleMutation onMutate - prev:', prev, 'roleName:', roleName, 'newRoles:', newRoles)
|
||||
// Also update ref immediately
|
||||
userRolesRef.current = newRoles
|
||||
return newRoles
|
||||
})
|
||||
setSelectedRole('')
|
||||
console.log('assignRoleMutation onMutate - AFTER update, ref should be:', userRolesRef.current)
|
||||
},
|
||||
onSuccess: async () => {
|
||||
// Verify with server data
|
||||
const updatedUser = await iamApi.getUser(user.id)
|
||||
setUserRoles(updatedUser.roles || [])
|
||||
onSuccess: async (_, roleName: string) => {
|
||||
// Don't overwrite state with server data - keep optimistic update
|
||||
// Just invalidate queries for other components
|
||||
queryClient.invalidateQueries({ queryKey: ['iam-users'] })
|
||||
await queryClient.refetchQueries({ queryKey: ['iam-users'] })
|
||||
queryClient.invalidateQueries({ queryKey: ['iam-user', user.id] })
|
||||
await queryClient.refetchQueries({ queryKey: ['iam-user', user.id] })
|
||||
// Use functional update to get current state
|
||||
setUserRoles(current => {
|
||||
console.log('assignRoleMutation onSuccess - roleName:', roleName, 'current userRoles:', current)
|
||||
return current
|
||||
})
|
||||
},
|
||||
onError: (error: any, roleName: string) => {
|
||||
console.error('Failed to assign role:', error, roleName)
|
||||
@@ -720,14 +751,12 @@ function EditUserForm({ user, onClose, onSuccess }: EditUserFormProps) {
|
||||
setUserRoles(prev => prev.filter(r => r !== roleName))
|
||||
return { previousRoles }
|
||||
},
|
||||
onSuccess: async () => {
|
||||
// Verify with server data
|
||||
const updatedUser = await iamApi.getUser(user.id)
|
||||
setUserRoles(updatedUser.roles || [])
|
||||
onSuccess: async (_, roleName: string) => {
|
||||
// Don't overwrite state with server data - keep optimistic update
|
||||
// Just invalidate queries for other components
|
||||
queryClient.invalidateQueries({ queryKey: ['iam-users'] })
|
||||
await queryClient.refetchQueries({ queryKey: ['iam-users'] })
|
||||
queryClient.invalidateQueries({ queryKey: ['iam-user', user.id] })
|
||||
await queryClient.refetchQueries({ queryKey: ['iam-user', user.id] })
|
||||
console.log('Role removed successfully:', roleName, 'Current userRoles:', userRoles)
|
||||
},
|
||||
onError: (error: any, _roleName: string, context: any) => {
|
||||
console.error('Failed to remove role:', error)
|
||||
@@ -743,20 +772,27 @@ function EditUserForm({ user, onClose, onSuccess }: EditUserFormProps) {
|
||||
mutationFn: (groupName: string) => iamApi.assignGroupToUser(user.id, groupName),
|
||||
onMutate: async (groupName: string) => {
|
||||
// Optimistic update: add group to state immediately
|
||||
console.log('assignGroupMutation onMutate - BEFORE update, current userGroups:', userGroupsRef.current)
|
||||
setUserGroups(prev => {
|
||||
if (prev.includes(groupName)) return prev
|
||||
return [...prev, groupName]
|
||||
const newGroups = prev.includes(groupName) ? prev : [...prev, groupName]
|
||||
console.log('assignGroupMutation onMutate - prev:', prev, 'groupName:', groupName, 'newGroups:', newGroups)
|
||||
// Also update ref immediately
|
||||
userGroupsRef.current = newGroups
|
||||
return newGroups
|
||||
})
|
||||
setSelectedGroup('')
|
||||
console.log('assignGroupMutation onMutate - AFTER update, ref should be:', userGroupsRef.current)
|
||||
},
|
||||
onSuccess: async () => {
|
||||
// Verify with server data
|
||||
const updatedUser = await iamApi.getUser(user.id)
|
||||
setUserGroups(updatedUser.groups || [])
|
||||
onSuccess: async (_, groupName: string) => {
|
||||
// Don't overwrite state with server data - keep optimistic update
|
||||
// Just invalidate queries for other components
|
||||
queryClient.invalidateQueries({ queryKey: ['iam-users'] })
|
||||
await queryClient.refetchQueries({ queryKey: ['iam-users'] })
|
||||
queryClient.invalidateQueries({ queryKey: ['iam-user', user.id] })
|
||||
await queryClient.refetchQueries({ queryKey: ['iam-user', user.id] })
|
||||
// Use functional update to get current state
|
||||
setUserGroups(current => {
|
||||
console.log('assignGroupMutation onSuccess - groupName:', groupName, 'current userGroups:', current)
|
||||
return current
|
||||
})
|
||||
},
|
||||
onError: (error: any, groupName: string) => {
|
||||
console.error('Failed to assign group:', error, groupName)
|
||||
@@ -775,14 +811,12 @@ function EditUserForm({ user, onClose, onSuccess }: EditUserFormProps) {
|
||||
setUserGroups(prev => prev.filter(g => g !== groupName))
|
||||
return { previousGroups }
|
||||
},
|
||||
onSuccess: async () => {
|
||||
// Verify with server data
|
||||
const updatedUser = await iamApi.getUser(user.id)
|
||||
setUserGroups(updatedUser.groups || [])
|
||||
onSuccess: async (_, groupName: string) => {
|
||||
// Don't overwrite state with server data - keep optimistic update
|
||||
// Just invalidate queries for other components
|
||||
queryClient.invalidateQueries({ queryKey: ['iam-users'] })
|
||||
await queryClient.refetchQueries({ queryKey: ['iam-users'] })
|
||||
queryClient.invalidateQueries({ queryKey: ['iam-user', user.id] })
|
||||
await queryClient.refetchQueries({ queryKey: ['iam-user', user.id] })
|
||||
console.log('Group removed successfully:', groupName, 'Current userGroups:', userGroups)
|
||||
},
|
||||
onError: (error: any, _groupName: string, context: any) => {
|
||||
console.error('Failed to remove group:', error)
|
||||
@@ -796,16 +830,21 @@ function EditUserForm({ user, onClose, onSuccess }: EditUserFormProps) {
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
// Use refs to get the latest state values (avoid closure issues)
|
||||
const currentRoles = userRolesRef.current
|
||||
const currentGroups = userGroupsRef.current
|
||||
const payload = {
|
||||
email: email.trim(),
|
||||
full_name: fullName.trim() || undefined,
|
||||
is_active: isActive,
|
||||
roles: userRoles,
|
||||
groups: userGroups,
|
||||
roles: currentRoles,
|
||||
groups: currentGroups,
|
||||
}
|
||||
console.log('EditUserForm - Submitting payload:', payload)
|
||||
console.log('EditUserForm - userRoles:', userRoles)
|
||||
console.log('EditUserForm - userGroups:', userGroups)
|
||||
console.log('EditUserForm - currentRoles from ref:', currentRoles)
|
||||
console.log('EditUserForm - currentGroups from ref:', currentGroups)
|
||||
console.log('EditUserForm - userRoles from state:', userRoles)
|
||||
console.log('EditUserForm - userGroups from state:', userGroups)
|
||||
updateMutation.mutate(payload)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user