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;