feat(frontend): manage Cognito users and groups, and test sign-in

The Cognito panel gains a test sign-in that shows the decoded ID and access token claims, a groups section, and a per-user panel to enable or disable, confirm, sign out everywhere, reset or set a password and change group membership. Delete confirmations (row and bulk) now say what else goes, driven by the schema's deleteImpact, and the inspector follows list refreshes instead of the click-time snapshot.
2026-10-23 17:54:15 -04:00
parent 43f4cae9b5
commit bafe799d00
15 changed files with 773 additions and 16 deletions
@@ -0,0 +1,64 @@
+import {Trash2} from 'lucide-react'
+import {useMutation, useQueryClient, type UseQueryResult} from '@tanstack/react-query'
+import {useState} from 'react'
+import {createUserPoolGroup, deleteUserPoolGroup} from '@/api/cloudProxyClient'
+import type {UserPoolGroup} from '@/types/resource'
+
+type Props = {
+    poolId: string
+    groupsQuery: UseQueryResult<UserPoolGroup[]>
+    groupsKey: unknown[]
+    runtimeReachable: boolean
+}
+
+export function CognitoGroupsSection({poolId, groupsQuery, groupsKey, runtimeReachable}: Props) {
+    const queryClient = useQueryClient()
+    const [name, setName] = useState('')
+    const [description, setDescription] = useState('')
+    const [precedence, setPrecedence] = useState('')
+    const refresh = () => queryClient.invalidateQueries({queryKey: groupsKey})
+
+    const createMutation = useMutation({
+        mutationFn: () => createUserPoolGroup('aws', poolId, {
+            name: name.trim(),
+            ...(description.trim() ? {description: description.trim()} : {}),
+            ...(precedence.trim() ? {precedence: Number(precedence)} : {}),
+        }),
+        onSuccess: () => {
+            setName('')
+            setDescription('')
+            setPrecedence('')
+            return refresh()
+        },
+    })
+    const deleteMutation = useMutation({
+        mutationFn: (groupName: string) => deleteUserPoolGroup('aws', poolId, groupName),
+        onSuccess: refresh,
+    })
+
+    const groups = groupsQuery.data ?? []
+    const pending = createMutation.isPending || deleteMutation.isPending
+    const error = groupsQuery.error ?? createMutation.error ?? deleteMutation.error
+
+    return <>
+        <div className="input-row resource-table-bar">
+            <div><p className="eyebrow">Groups</p><span className="muted">Group names appear in the <code>cognito:groups</code> token claim, so apps can check roles</span></div>
+        </div>
+        <form className="dynamic-form" aria-label="Create group" onSubmit={(event) => { event.preventDefault(); if (name.trim()) createMutation.mutate() }}>
+            <label className="dynamic-field"><span>Group name</span><input className="input" value={name} onChange={(event) => setName(event.target.value)} placeholder="admins" disabled={pending} required/></label>
+            <label className="dynamic-field"><span>Description</span><input className="input" value={description} onChange={(event) => setDescription(event.target.value)} disabled={pending}/></label>
+            <label className="dynamic-field"><span>Precedence</span><input className="input" type="number" min={0} step={1} value={precedence} onChange={(event) => setPrecedence(event.target.value)} disabled={pending}/><small className="muted">Lower wins when a user is in several groups.</small></label>
+            <div style={{alignSelf: 'end'}}><button className="button primary" type="submit" disabled={!runtimeReachable || !name.trim() || pending}>{createMutation.isPending ? 'Creating' : 'Create group'}</button></div>
+        </form>
+        {error instanceof Error && <p className="error-text compact-text" role="alert">{error.message}</p>}
+        {groupsQuery.isSuccess && groups.length === 0 && <p className="muted padded">No groups yet.</p>}
+        {groups.length > 0 && <div className="cognito-table"><table className="table"><thead><tr><th>Name</th><th>Description</th><th>Precedence</th><th/></tr></thead><tbody>{groups.map((group) => (
+            <tr key={group.name}>
+                <td><code>{group.name}</code></td>
+                <td>{group.description || '—'}</td>
+                <td>{group.precedence ?? '—'}</td>
+                <td><button className="icon-btn danger" type="button" title="Delete group" aria-label={`Delete group ${group.name}`} disabled={!runtimeReachable || pending} onClick={() => deleteMutation.mutate(group.name)}><Trash2 size={14}/></button></td>
+            </tr>
+        ))}</tbody></table></div>}
+    </>
+}