diff --git a/ui/src/pages/admin/rbac/GroupsTab.tsx b/ui/src/pages/admin/rbac/GroupsTab.tsx index 33814442..50b45a4d 100644 --- a/ui/src/pages/admin/rbac/GroupsTab.tsx +++ b/ui/src/pages/admin/rbac/GroupsTab.tsx @@ -215,6 +215,8 @@ function GroupDetailView({ const [showDeleteDialog, setShowDeleteDialog] = useState(false); const [editingName, setEditingName] = useState(false); const [nameValue, setNameValue] = useState(group.name); + const [editingParent, setEditingParent] = useState(false); + const [parentValue, setParentValue] = useState(group.parentGroupId || ''); const deleteGroup = useDeleteGroup(); const updateGroup = useUpdateGroup(); const assignRole = useAssignRoleToGroup(); @@ -228,6 +230,8 @@ function GroupDetailView({ setPrevGroupId(group.id); setEditingName(false); setNameValue(group.name); + setEditingParent(false); + setParentValue(group.parentGroupId || ''); } const hierarchyLabel = group.parentGroupId @@ -282,7 +286,7 @@ function GroupDetailView({ onChange={e => setNameValue(e.target.value)} onBlur={() => { if (nameValue.trim() && nameValue !== group.name) { - updateGroup.mutate({ id: group.id, name: nameValue.trim() }); + updateGroup.mutate({ id: group.id, name: nameValue.trim(), parentGroupId: group.parentGroupId }); } setEditingName(false); }} @@ -312,11 +316,33 @@ function GroupDetailView({
Parent - + {editingParent ? ( +
+ + + +
+ ) : ( + + {hierarchyLabel} + {!isBuiltIn && ( + + )} + + )}

diff --git a/ui/src/pages/admin/rbac/RbacPage.module.css b/ui/src/pages/admin/rbac/RbacPage.module.css index f68fc75a..a152ef90 100644 --- a/ui/src/pages/admin/rbac/RbacPage.module.css +++ b/ui/src/pages/admin/rbac/RbacPage.module.css @@ -843,6 +843,42 @@ max-width: 200px; } +/* ─── Parent Edit Mode ─── */ +.parentEditRow { + display: flex; + gap: 6px; + align-items: center; + flex: 1; +} + +.parentEditBtn { + background: var(--bg-raised); + border: 1px solid var(--border); + border-radius: var(--radius-sm); + color: var(--text); + padding: 2px 8px; + font-size: 11px; + cursor: pointer; +} + +.parentEditBtn:hover { + background: var(--bg-hover); +} + +.fieldEditBtn { + background: none; + border: none; + color: var(--amber); + font-size: 11px; + cursor: pointer; + margin-left: 8px; + padding: 0; +} + +.fieldEditBtn:hover { + text-decoration: underline; +} + /* ─── Editable Name Input ─── */ .editNameInput { font-size: 16px;