Frontend: Implement User Groups Page CRUD Operations

[mrveiss]

Problem

The User Groups page (frontend/src/pages/UserGroups.tsx) currently only displays groups in read-only mode. The Create, Edit, and Delete buttons are rendered but not connected to any handlers.

Current State

• ✅ Displays list of user groups from API
• ✅ Shows group name, description, member count, roles
• ✅ Shows "Requires Approval" badge when applicable
• ❌ "Create Group" button does nothing
• ❌ Edit button (pencil icon) does nothing
• ❌ Delete button (trash icon) does nothing

Required Changes

1. Add React Query Mutations

Create hooks in useUserGroups.ts (if not already present):

export function useCreateUserGroup() { ... }
export function useUpdateUserGroup() { ... }
export function useDeleteUserGroup() { ... }

2. Add Dialog Components

• Create User Group dialog with form fields:
  • Name (required)
  • Description (optional)
  • Roles multi-select (assign roles to the group)
  • Requires Approval checkbox
• Edit User Group dialog (same fields)
• Delete confirmation dialog

3. Wire Up Handlers

• Create button → opens create dialog
• Edit button → opens edit dialog with prefilled data
• Delete button → opens confirmation dialog

API Endpoints

The backend already has these endpoints:

• POST /api/v1/rbac/user-groups - Create user group
• PUT /api/v1/rbac/user-groups/{group_id} - Update user group
• DELETE /api/v1/rbac/user-groups/{group_id} - Delete user group

Acceptance Criteria

• Can create new user groups with name, description, and roles
• Can edit existing user groups
• Can delete user groups (with confirmation)
• Can assign/remove roles to groups
• UI updates immediately after operations

Related

• Part of RBAC system from Advanced RBAC and Audit Logging #8
• Related to Complete RBAC & Audit Integration Across All Endpoints #89 (RBAC integration)