apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-05-05 13:52:40 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

fix: separate nested interactive elements in roles manager

Browse source 
Moves the RolePermissionsDialog trigger to wrap only the text content
area instead of the entire card. The dropdown menu is now a sibling,
not nested inside the dialog button. Removes stopPropagation hacks.

Fixes #921
This commit is contained in:
Matt Van Horn 2026-03-24 03:11:30 -07:00
parent 15e9f113e5
commit ac2333ee1c
No known key found for this signature in database
1 changed files with 77 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

160
surfsense_web/components/settings/roles-manager.tsx
View file

@ -510,93 +510,87 @@ function RolesContent({
<div className="space-y-3"> <div className="space-y-3">
{roles.map((role) => ( {roles.map((role) => (
<div key={role.id}> <div key={role.id}>
<RolePermissionsDialog permissions={role.permissions} roleName={role.name}> <div className="w-full text-left relative flex items-center gap-4 rounded-lg border border-border/60 p-4 transition-colors hover:bg-muted/30">
<button <div className="flex-1 min-w-0">
type="button" <RolePermissionsDialog permissions={role.permissions} roleName={role.name}>
className="w-full text-left relative flex items-center gap-4 rounded-lg border border-border/60 p-4 transition-colors hover:bg-muted/30 cursor-pointer" <button type="button" className="w-full text-left cursor-pointer">
> <div className="flex items-center gap-2">
<div className="flex-1 min-w-0"> <span className="font-medium text-sm">{role.name}</span>
<div className="flex items-center gap-2"> {role.is_system_role && (
<span className="font-medium text-sm">{role.name}</span> <span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium">
{role.is_system_role && ( System
<span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium"> </span>
System )}
</span> {role.is_default && (
)} <span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium">
{role.is_default && ( Default
<span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground font-medium"> </span>
Default )}
</span> </div>
{role.description && (
<p className="text-xs text-muted-foreground mt-0.5 truncate">
{role.description}
</p>
)} )}
</div> </div>
{role.description && ( </RolePermissionsDialog>
<p className="text-xs text-muted-foreground mt-0.5 truncate"> </div>
{role.description}
</p>
)}
</div>
<div className="shrink-0"> <div className="shrink-0">
<PermissionsBadge permissions={role.permissions} /> <PermissionsBadge permissions={role.permissions} />
</div> </div>
{!role.is_system_role && ( {!role.is_system_role && (
<div <div className="shrink-0" role="none">
className="shrink-0" <DropdownMenu>
role="none" <DropdownMenuTrigger asChild>
onClick={(e) => e.stopPropagation()} <Button variant="ghost" size="icon" className="h-8 w-8">
onKeyDown={(e) => e.stopPropagation()} <MoreHorizontal className="h-4 w-4" />
> </Button>
<DropdownMenu> </DropdownMenuTrigger>
<DropdownMenuTrigger asChild> <DropdownMenuContent align="end" onCloseAutoFocus={(e) => e.preventDefault()}>
<Button variant="ghost" size="icon" className="h-8 w-8"> {canUpdate && (
<MoreHorizontal className="h-4 w-4" /> <DropdownMenuItem onClick={() => setEditingRoleId(role.id)}>
</Button> <Edit2 className="h-4 w-4 mr-2" />
</DropdownMenuTrigger> Edit Role
<DropdownMenuContent align="end" onCloseAutoFocus={(e) => e.preventDefault()}> </DropdownMenuItem>
{canUpdate && ( )}
<DropdownMenuItem onClick={() => setEditingRoleId(role.id)}> {canDelete && (
<Edit2 className="h-4 w-4 mr-2" /> <>
Edit Role <DropdownMenuSeparator />
</DropdownMenuItem> <AlertDialog>
)} <AlertDialogTrigger asChild>
{canDelete && ( <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
<> <Trash2 className="h-4 w-4 mr-2" />
<DropdownMenuSeparator /> Delete Role
<AlertDialog> </DropdownMenuItem>
<AlertDialogTrigger asChild> </AlertDialogTrigger>
<DropdownMenuItem onSelect={(e) => e.preventDefault()}> <AlertDialogContent>
<Trash2 className="h-4 w-4 mr-2" /> <AlertDialogHeader>
Delete Role <AlertDialogTitle>Delete role?</AlertDialogTitle>
</DropdownMenuItem> <AlertDialogDescription>
</AlertDialogTrigger> This will permanently delete the &quot;{role.name}&quot; role.
<AlertDialogContent> Members with this role will lose their permissions.
<AlertDialogHeader> </AlertDialogDescription>
<AlertDialogTitle>Delete role?</AlertDialogTitle> </AlertDialogHeader>
<AlertDialogDescription> <AlertDialogFooter>
This will permanently delete the &quot;{role.name}&quot; role. <AlertDialogCancel>Cancel</AlertDialogCancel>
Members with this role will lose their permissions. <AlertDialogAction
</AlertDialogDescription> onClick={() => onDeleteRole(role.id)}
</AlertDialogHeader> className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
<AlertDialogFooter> >
<AlertDialogCancel>Cancel</AlertDialogCancel> Delete
<AlertDialogAction </AlertDialogAction>
onClick={() => onDeleteRole(role.id)} </AlertDialogFooter>
className="bg-destructive text-destructive-foreground hover:bg-destructive/90" </AlertDialogContent>
> </AlertDialog>
Delete </>
</AlertDialogAction> )}
</AlertDialogFooter> </DropdownMenuContent>
</AlertDialogContent> </DropdownMenu>
</AlertDialog> </div>
</> )}
)} </div>
</DropdownMenuContent>
</DropdownMenu>
</div>
)}
</button>
</RolePermissionsDialog>
</div> </div>
))} ))}
</div> </div>