fix: add edit mode for parent group dropdown, fix updateGroup to preserve parent

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

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({
 
       <div className={styles.fieldRow}>
         <span className={styles.fieldLabel}>Parent</span>
-        <select className={styles.parentSelect} value={group.parentGroupId || ''}
-          onChange={e => updateGroup.mutate({ id: group.id, parentGroupId: e.target.value || null })}>
-          <option value="">(Top-level)</option>
-          {parentOptions.map(g => <option key={g.id} value={g.id}>{g.name}</option>)}
-        </select>
+        {editingParent ? (
+          <div className={styles.parentEditRow}>
+            <select className={styles.parentSelect} value={parentValue}
+              onChange={e => setParentValue(e.target.value)}>
+              <option value="">(Top-level)</option>
+              {parentOptions.map(g => <option key={g.id} value={g.id}>{g.name}</option>)}
+            </select>
+            <button type="button" className={styles.parentEditBtn}
+              onClick={() => {
+                updateGroup.mutate(
+                  { id: group.id, name: group.name, parentGroupId: parentValue || null },
+                  { onSuccess: () => setEditingParent(false) }
+                );
+              }}
+              disabled={updateGroup.isPending}>Save</button>
+            <button type="button" className={styles.parentEditBtn}
+              onClick={() => { setParentValue(group.parentGroupId || ''); setEditingParent(false); }}>Cancel</button>
+          </div>
+        ) : (
+          <span className={styles.fieldVal}>
+            {hierarchyLabel}
+            {!isBuiltIn && (
+              <button type="button" className={styles.fieldEditBtn}
+                onClick={() => setEditingParent(true)}>Edit</button>
+            )}
+          </span>
+        )}
       </div>
 
       <hr className={styles.divider} />

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;