feat: group management UI (BCH-1328)#271
Merged
Merged
Conversation
Add native CCF group management pages and surface group memberships on the user detail view, completing the UI side of the authz groups feature. - New types: CCFGroup, CCFGroupCreate, CCFGroupMember, CCFUserGroup - /admin/groups list view with create-group dialog - /admin/groups/:id detail view with members panel - GroupMembersPanel: shows native vs inherited (SSO) members; inherited members display as locked (cannot be removed), native members have a Remove button; Add Member dialog with live user search - GroupCreateForm / GroupEditForm reuse existing form patterns - UserView enhanced with a Group Memberships card using colour-coded chips (blue = SSO-inherited, grey = native) with tooltip explaining that inherited memberships are read-only - Router + LeftSideNav wired under Admin > Groups (admin:manage gate) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
📝 WalkthroughWalkthroughThis PR adds group admin screens, member management, group type definitions, admin navigation and routes, and user group membership display. ChangesGroups Admin Feature
Sequence Diagram(s)sequenceDiagram
participant Admin
participant GroupsListView
participant GroupCreateForm
participant GroupView
participant GroupEditForm
participant GroupMembersPanel
participant API
Admin->>GroupsListView: open /admin/groups
GroupsListView->>API: GET /api/admin/groups
API-->>GroupsListView: CCFGroup[]
Admin->>GroupsListView: create group
GroupsListView->>GroupCreateForm: open dialog
Admin->>GroupCreateForm: submit
GroupCreateForm->>API: POST /api/admin/groups
API-->>GroupCreateForm: CCFGroup
GroupCreateForm-->>GroupsListView: emit create
Admin->>GroupsListView: open group
GroupsListView->>GroupView: navigate /admin/groups/:id
GroupView->>API: GET /api/admin/groups/:id
API-->>GroupView: CCFGroup
GroupView->>GroupMembersPanel: render with group.id
GroupMembersPanel->>API: GET members / users
API-->>GroupMembersPanel: member data
Admin->>GroupView: edit group
GroupView->>GroupEditForm: open dialog
Admin->>GroupEditForm: save
GroupEditForm->>API: PUT /api/admin/groups/:id
API-->>GroupEditForm: updated CCFGroup
GroupEditForm-->>GroupView: saved
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
The v-if on availableUsers?.length treated an empty array (0) as falsy, causing the "Loading users..." placeholder to persist after a successful but empty user list fetch. Switch to v-if="usersLoading" / v-else so the list always renders once the request settles. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/groups/GroupMembersPanel.vue`:
- Around line 8-13: The template currently only handles loading and empty
states, so when a fetch fails, it incorrectly displays "No members yet" instead
of an error message. Add an error state variable to track fetch failures, then
insert a new v-else-if condition checking the error state between the isLoading
and !members?.length checks in the GroupMembersPanel template. Display an
appropriate error message when the error state is true. Apply the same pattern
to the other template blocks referenced at lines 89-127 and 160-174 to ensure
all member/user load failures show proper error states instead of empty states.
In `@src/views/groups/GroupsListView.vue`:
- Around line 115-117: The onCreated function is using push() to mutate the
groups array, but since groups is a shallowRef from useDataApi, it only tracks
reference changes and mutations won't trigger reactivity. Replace the push
operation by reassigning the entire groups array with a new array that includes
the newGroup, such as creating a new array with the existing items plus the
newGroup using spread syntax or similar approach, to ensure the reactivity
system detects the change.
In `@src/views/users/UserView.vue`:
- Around line 148-150: The useDataApi call for fetching user groups does not
capture error information, so when the API request fails, the template
incorrectly displays the empty-state UI saying "Not a member of any groups"
instead of showing an error message. Modify the destructuring of the useDataApi
response for the `/api/admin/users/${route.params.id}/groups` endpoint to also
capture the error or isError property, then update the template logic at the
empty-state branch (Line 62) to conditionally display an error message when the
error state is true rather than showing the empty-state UI on API failures.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: ce47fb99-ef32-4112-a300-88514d7851cb
📒 Files selected for processing (9)
src/components/groups/GroupCreateForm.vuesrc/components/groups/GroupEditForm.vuesrc/components/groups/GroupMembersPanel.vuesrc/router/index.tssrc/stores/types.tssrc/views/LeftSideNav.vuesrc/views/groups/GroupView.vuesrc/views/groups/GroupsListView.vuesrc/views/users/UserView.vue
gusfcarvalho
commented
Jun 23, 2026
gusfcarvalho
left a comment
gusfcarvalho
left a comment
Contributor
Author
There was a problem hiding this comment.
Findings inline. Two items to address before merge: the shallowRef push bug (new groups silently don't appear after creation) and the 403 double-toast (two overlapping permission warnings). Medium items are fixable in the same pass; Low can follow up.
- shallowRef push bug: replace groups.value?.push() with array reassignment in onCreated so Vue's shallow tracking fires on group creation (GroupsListView) - double-toast on 403: remove local error watcher in GroupsListView; the global axios interceptor already throttles a warn toast on 403 - error states: expose membersError and usersError from useDataApi and show explicit error messages instead of falling back to empty-state UI in GroupMembersPanel; same for groupsError in UserView - lazy user fetch: load /api/admin/users only when the Add Member dialog first opens (watch(showAddMember)) instead of unconditionally on mount - double-submit guard: addMember is guarded by an adding ref; the Add button is disabled while a request is in flight - Cancel button styling: use SecondaryButton in GroupCreateForm and GroupEditForm so Cancel has lower visual weight than Save - Delete vs Edit visual hierarchy: Edit Group uses SecondaryButton, Delete Group uses PrimaryButton so the destructive action is visually distinct Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
gusfcarvalho
commented
Jun 23, 2026
gusfcarvalho
left a comment
gusfcarvalho
left a comment
Contributor
Author
There was a problem hiding this comment.
Good pass — shallowRef bug, 403 double-toast, lazy user fetch, Add guard, Cancel styling, and error states all fixed. Two items remain: a regression (success toast dropped) and the Delete/Edit button priority inversion.
GroupsListView: the success toast was accidentally removed when the duplicate 403 watcher was dropped. Re-import useToast and re-add the toast.add() call in onCreated independently of the watcher. GroupView: making Delete the PrimaryButton and Edit the SecondaryButton inadvertently put the most prominent affordance on the destructive action. Revert to Edit = PrimaryButton (the intended main workflow) and Delete = SecondaryButton with red text class (danger-outlined effect) so the hierarchy is correct: clear primary CTA on the left, visually de-emphasised but clearly destructive action on the right. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
gusfcarvalho
commented
Jun 23, 2026
gusfcarvalho
left a comment
gusfcarvalho
left a comment
Contributor
Author
There was a problem hiding this comment.
All findings resolved across two fix commits. Verified: shallowRef reactivity fix, 403 double-toast removed, lazy user fetch, Add-button inflight guard, Edit=Primary/Delete=SecondaryButton (red text) hierarchy, error states for member/user/groups loads, success toast restored. CI green (tests ✅ type-check ✅ CodeRabbit ✅). LGTM — ready to merge once a human approves.
Signed-off-by: Gustavo Carvalho <gustavo.carvalho@container-solutions.com>
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/components/groups/GroupCreateForm.vue (2)
54-67: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winGuard
createGroupagainst double-submit.The Save button isn't disabled while the POST is in flight, so rapid double-clicks can create duplicate groups. This PR added an in-flight guard to member-add in
GroupMembersPanel.vue(addingref); apply the same here for consistency.🛡️ Proposed guard
+const submitting = ref(false); + async function createGroup() { if (!group.value.name.trim()) { toast.add({ /* ... */ }); return; } + if (submitting.value) return; + submitting.value = true; try { await execute({ data: group.value }); if (!createdGroup.value) return; emit('create', createdGroup.value); } catch (error) { // ... + } finally { + submitting.value = false; } }Bind
:disabled="submitting"on the Save button.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/groups/GroupCreateForm.vue` around lines 54 - 67, The createGroup flow in GroupCreateForm.vue needs an in-flight submit guard to prevent duplicate group creation on rapid clicks. Add a submitting ref around createGroup, set it true before execute({ data: group.value }) and clear it in a finally block, then bind the Save button’s disabled state to that flag so the action cannot be triggered twice while the POST is pending, mirroring the adding guard used in GroupMembersPanel.vue.
68-77: 🩺 Stability & Availability | 🟡 MinorChain through
dataanderrorsin group error handlers.errorResponse.response?.data.errors.bodycan still throw when the response body doesn’t matchErrorResponse<ErrorBody>. UseerrorResponse.response?.data?.errors?.body ?? 'Unknown error occurred'insrc/components/groups/GroupCreateForm.vue,src/components/groups/GroupEditForm.vue,src/components/groups/GroupMembersPanel.vue, andsrc/views/groups/GroupView.vue.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/groups/GroupCreateForm.vue` around lines 68 - 77, The group error handlers are still assuming a fully-shaped Axios response and can throw when the payload is missing or differently structured. Update the error detail lookup in GroupCreateForm, GroupEditForm, GroupMembersPanel, and GroupView to safely chain through response, data, and errors before reading body, using the existing errorResponse variable in each catch block and keeping the same fallback message.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/groups/GroupMembersPanel.vue`:
- Around line 172-174: The GroupMembersPanel setup still eagerly calls
fetchAllUsers() to populate emailByUserId, which defeats the server-side
typeahead scalability claim. Remove the unconditional full /api/admin/users
fetch and instead get email from the members data source or load member emails
on demand for the rows actually displayed, using the existing
useUserSearch/searchUsers and member table rendering paths. Also update the
nearby comment so it no longer says there is no need to download every user up
front unless that is actually true.
In `@src/stores/types.ts`:
- Around line 68-71: The doc comment on CCFGroupMember still mentions
client-side enrichment for email, but that field is not part of this interface
and is handled separately via emailByUserId in GroupMembersPanel.vue. Update the
comment next to CCFGroupMember to remove the email parenthetical and keep only
the fields actually represented here, namely userId, displayName, and optional
inherited.
---
Outside diff comments:
In `@src/components/groups/GroupCreateForm.vue`:
- Around line 54-67: The createGroup flow in GroupCreateForm.vue needs an
in-flight submit guard to prevent duplicate group creation on rapid clicks. Add
a submitting ref around createGroup, set it true before execute({ data:
group.value }) and clear it in a finally block, then bind the Save button’s
disabled state to that flag so the action cannot be triggered twice while the
POST is pending, mirroring the adding guard used in GroupMembersPanel.vue.
- Around line 68-77: The group error handlers are still assuming a fully-shaped
Axios response and can throw when the payload is missing or differently
structured. Update the error detail lookup in GroupCreateForm, GroupEditForm,
GroupMembersPanel, and GroupView to safely chain through response, data, and
errors before reading body, using the existing errorResponse variable in each
catch block and keeping the same fallback message.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 1ab5647d-9738-44eb-ad93-c8c735f86272
📒 Files selected for processing (7)
src/components/groups/GroupCreateForm.vuesrc/components/groups/GroupEditForm.vuesrc/components/groups/GroupMembersPanel.vuesrc/stores/types.tssrc/views/groups/GroupView.vuesrc/views/groups/GroupsListView.vuesrc/views/users/UserView.vue
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Implements the UI component for BCH-1328 (native user groups / authz membership model).
/admin/groups,/admin/groups/:id) — list, create, edit, delete groups; gated behindadmin:manage/users/:idwith colour-coded chips (blue = SSO-inherited/read-only, grey = native CCF group)CCFGroup,CCFGroupCreate,CCFGroupMember,CCFUserGroupadded tosrc/stores/types.ts/admin/groups/*and a "Groups" entry in the Admin sidebar sectionAddresses the comment on BCH-1328: "Misses UI component for Group management. Inherited Groups MUST be fixed and cannot be removed."
All inherited (SSO-synced) memberships are visually distinct and the Remove action is absent/disabled for them throughout the UI.
API contract assumed
/api/admin/groups/api/admin/groups/:id/api/admin/groups/:id/members/api/admin/groups/:id/members/:userId/api/admin/users/:id/groupsTest plan
make reviewablepasses (format ✅ typecheck ✅ lint ✅ 754 unit tests ✅)/admin/groupsdirectly🤖 Generated with Claude Code
Summary by CodeRabbit