@marinoscar/platform-web 0.0.0-stage → 0.1.0-next.10

package/dist/identity/ui/tokens/patColumns.js

@@ -0,0 +1,142 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Settings → Personal access tokens: the DataTable column contract
+ * (issue #67, epic #51).
+ *
+ * ## What `GET /api/pat` honours: nothing
+ *
+ * `pat.controller.ts` declares `@Get()` with no `@Query()` at all — the
+ * endpoint returns the caller's whole token list, unpaginated, unsorted and
+ * unfiltered. So NO column here declares `sortable`, `filterable` or
+ * `searchable`. Both flags default to `false` in the contract precisely so a
+ * table like this one cannot accidentally advertise a control the page has no
+ * way to answer.
+ *
+ * ## `tokenPrefix` is `exportable: false`
+ *
+ * The prefix is already truncated on screen, so this is not about secrecy on
+ * the page — it is about the LIFETIME of the artefact. A CSV is a file: it
+ * lands in a downloads folder, gets mailed around and survives the session,
+ * the token and often the employment that produced it. Token material of any
+ * length has no business in a document with that lifetime, and "it's only the
+ * first few characters" is exactly the reasoning that puts the whole secret in
+ * the next file. The flag exists in the contract for this case
+ * (`types.ts`: "material that must never leave the app").
+ *
+ * ## Names are not unique — the disambiguation decision
+ *
+ * `createPatSchema` does not require a unique `name`, and `pat.service.ts` does
+ * no uniqueness check, so twenty tokens may all be called `ci-token`. That is a
+ * real accessibility failure and not a cosmetic one: `rowAccessibleName()`
+ * names every selection checkbox and every row-action button after the first
+ * `primary` column's SCALAR, so twenty rows would offer twenty controls all
+ * announced as "Revoke for ci-token".
+ *
+ * The fix is a suffix on this column's `value`, applied UNCONDITIONALLY, rather
+ * than client-side uniqueness enforcement at create time. Three reasons:
+ *
+ *  - Create-time validation cannot fix rows that already exist. Duplicate names
+ *    are in the database today, and a rule the UI applies on the way in leaves
+ *    every historical duplicate exactly as ambiguous as it was.
+ *  - It is not enforceable anyway. The endpoint is a public, documented API
+ *    reachable from a second tab, a script or a CLI; a client-side check makes
+ *    a promise only one of the writers has agreed to keep.
+ *  - The suffix must be a pure function of ONE row. The `render` for a cell is
+ *    called per row with no knowledge of the rest of the page, and the "export
+ *    all matching rows" walk is fed page by page — a suffix applied only "when
+ *    ambiguous" would need the whole set, and would flip on and off as the page
+ *    composition changed, so the same token's accessible name would differ
+ *    between page 1 and page 2.
+ *
+ * `render` keeps the plain name, so the VISIBLE cell and the card headline read
+ * `ci-token` exactly as before. The suffix appears only where uniqueness is the
+ * requirement: accessible names, and the CSV (where it doubles as the row's
+ * link back to the API resource, since `id` is not otherwise a column).
+ */
+import { Chip, Typography } from '@mui/material';
+/** Persistence key for `user_settings.dataTables`. */
+export const TABLE_ID = 'settings-pats';
+export function getTokenStatus(token) {
+    if (token.revokedAt)
+        return 'revoked';
+    if (new Date(token.expiresAt) < new Date())
+        return 'expired';
+    return 'active';
+}
+const STATUS_LABELS = {
+    active: 'Active',
+    expired: 'Expired',
+    revoked: 'Revoked',
+};
+/** How much of the id is enough to tell two same-named tokens apart. */
+const ID_SUFFIX_LENGTH = 8;
+/**
+ * The token's row-unique scalar: its name plus a short, stable slice of its id.
+ * See the module docblock for why this is unconditional.
+ */
+export function patRowLabel(token) {
+    return `${token.name} (${token.id.slice(0, ID_SUFFIX_LENGTH)})`;
+}
+function formatDate(value) {
+    return new Date(value).toLocaleDateString();
+}
+export function buildPatColumns() {
+    return [
+        {
+            id: 'name',
+            label: 'Name',
+            priority: 'primary',
+            hideable: false, // it is the row's accessible name
+            minWidth: 180,
+            flex: 1,
+            value: patRowLabel,
+            render: (token) => _jsx(Typography, { variant: "body2", children: token.name }),
+        },
+        {
+            id: 'status',
+            label: 'Status',
+            priority: 'primary',
+            width: 120,
+            value: (token) => STATUS_LABELS[getTokenStatus(token)],
+            render: (token) => {
+                const status = getTokenStatus(token);
+                if (status === 'active')
+                    return _jsx(Chip, { label: "Active", color: "success", size: "small" });
+                if (status === 'expired')
+                    return _jsx(Chip, { label: "Expired", size: "small" });
+                return _jsx(Chip, { label: "Revoked", color: "error", size: "small" });
+            },
+        },
+        {
+            id: 'tokenPrefix',
+            label: 'Token Prefix',
+            priority: 'secondary',
+            exportable: false, // see the module docblock
+            minWidth: 140,
+            value: (token) => `${token.tokenPrefix}...`,
+            render: (token) => (_jsxs(Typography, { variant: "body2", sx: { fontFamily: 'monospace' }, children: [token.tokenPrefix, "..."] })),
+        },
+        {
+            id: 'createdAt',
+            label: 'Created',
+            priority: 'detail',
+            width: 120,
+            value: (token) => formatDate(token.createdAt),
+        },
+        {
+            id: 'expiresAt',
+            label: 'Expires',
+            priority: 'detail',
+            width: 120,
+            value: (token) => formatDate(token.expiresAt),
+        },
+        {
+            id: 'lastUsedAt',
+            label: 'Last Used',
+            priority: 'detail',
+            width: 120,
+            value: (token) => (token.lastUsedAt ? formatDate(token.lastUsedAt) : 'Never'),
+        },
+    ];
+}
+//# sourceMappingURL=patColumns.js.map

package/dist/identity/ui/tokens/patColumns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"patColumns.js","sourceRoot":"","sources":["../../../../src/identity/ui/tokens/patColumns.tsx"],"names":[],"mappings":"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"}

package/dist/identity/ui/users/AddEmailDialog.d.ts

@@ -0,0 +1,8 @@
+interface AddEmailDialogProps {
+    open: boolean;
+    onClose: () => void;
+    onAdd: (email: string, notes?: string) => Promise<void>;
+}
+export declare function AddEmailDialog({ open, onClose, onAdd }: AddEmailDialogProps): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=AddEmailDialog.d.ts.map

package/dist/identity/ui/users/AddEmailDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddEmailDialog.d.ts","sourceRoot":"","sources":["../../../../src/identity/ui/users/AddEmailDialog.tsx"],"names":[],"mappings":"AAYA,UAAU,mBAAmB;IAC3B,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CACzD;AAED,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,mBAAmB,+BA+F3E"}

package/dist/identity/ui/users/AddEmailDialog.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Dialog, DialogTitle, DialogContent, DialogActions, TextField, Button, Alert, Box, } from '@mui/material';
+export function AddEmailDialog({ open, onClose, onAdd }) {
+    const [email, setEmail] = useState('');
+    const [notes, setNotes] = useState('');
+    const [error, setError] = useState(null);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const validateEmail = (email) => {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
+    };
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setError(null);
+        // Validate email
+        if (!email.trim()) {
+            setError('Email is required');
+            return;
+        }
+        if (!validateEmail(email.trim())) {
+            setError('Please enter a valid email address');
+            return;
+        }
+        setIsSubmitting(true);
+        try {
+            await onAdd(email.trim(), notes.trim() || undefined);
+            // Reset form and close on success
+            setEmail('');
+            setNotes('');
+            setError(null);
+            onClose();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to add email');
+        }
+        finally {
+            setIsSubmitting(false);
+        }
+    };
+    const handleClose = () => {
+        if (!isSubmitting) {
+            setEmail('');
+            setNotes('');
+            setError(null);
+            onClose();
+        }
+    };
+    return (_jsx(Dialog, { open: open, onClose: handleClose, maxWidth: "sm", fullWidth: true, children: _jsxs("form", { onSubmit: handleSubmit, children: [_jsx(DialogTitle, { children: "Add Email to Allowlist" }), _jsx(DialogContent, { children: _jsxs(Box, { sx: { pt: 1 }, children: [error && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error })), _jsx(TextField, { label: "Email Address", type: "email", fullWidth: true, required: true, value: email, onChange: (e) => setEmail(e.target.value), disabled: isSubmitting, sx: { mb: 2 }, autoFocus: true }), _jsx(TextField, { label: "Notes (optional)", multiline: true, rows: 3, fullWidth: true, value: notes, onChange: (e) => setNotes(e.target.value), disabled: isSubmitting, placeholder: "Add any notes about this user..." })] }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: handleClose, disabled: isSubmitting, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "contained", disabled: isSubmitting, children: isSubmitting ? 'Adding...' : 'Add Email' })] })] }) }));
+}
+//# sourceMappingURL=AddEmailDialog.js.map

package/dist/identity/ui/users/AddEmailDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AddEmailDialog.js","sourceRoot":"","sources":["../../../../src/identity/ui/users/AddEmailDialog.tsx"],"names":[],"mappings":"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"}

package/dist/identity/ui/users/AllowlistTable.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Admin → Allowlist (issue #67, epic #51).
+ *
+ * The hand-rolled `TableContainer` block is deleted wholesale. Three specific
+ * conversions, each of them a shape the card renderer could not otherwise have:
+ *
+ *  1. **`window.confirm` → the row action's own `confirm` option.** The native
+ *     dialog blocked the event loop, could not be styled or translated, and
+ *     needed a global stub to test. `DataTableRowAction.confirm` gives ONE
+ *     dialog per table, owned by the renderer, with copy derived from the row.
+ *  2. **"Cannot remove a claimed entry" → `disabled: (e) => Boolean(e.claimedBy)`.**
+ *     The old code branched between a disabled `IconButton` wrapped in a
+ *     Tooltip and a live one; the contract expresses that as one action with a
+ *     per-row predicate, and `RowActionsCell` keeps the tooltip working over
+ *     the disabled control.
+ *  3. **"Add Email" moved OUT of the table into this page's header.** It is a
+ *     TABLE-level action — it belongs to neither a row nor a selection — so it
+ *     has no home inside a renderer that only knows about rows. It sits above
+ *     the table, next to the heading, where it is the same control at every
+ *     width.
+ *
+ * The search box is gone from this file entirely: quick search is now the
+ * table's own control, debounced on emission, and it renders as a bar on
+ * desktop and a full-screen sheet on a phone.
+ */
+import type { ReactElement } from 'react';
+/**
+ * The email allowlist: paging, search, the pending/claimed filter, add and
+ * remove (`allowlist:write`). The Allowlist tab of {@link UsersPage}.
+ *
+ * @returns the component.
+ *
+ * @stability stable
+ */
+export declare function AllowlistTable(): ReactElement;
+//# sourceMappingURL=AllowlistTable.d.ts.map

package/dist/identity/ui/users/AllowlistTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AllowlistTable.d.ts","sourceRoot":"","sources":["../../../../src/identity/ui/users/AllowlistTable.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AA2B1C;;;;;;;GAOG;AACH,wBAAgB,cAAc,IAAI,YAAY,CAiK7C"}

package/dist/identity/ui/users/AllowlistTable.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { Alert, Box, Button, Paper, Stack, Typography } from '@mui/material';
+import { Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-material';
+import { IdentityTable as DataTable } from '../table.js';
+import { useAllowlist } from '../../headless/index.js';
+import { usePermissions } from '../../headless/index.js';
+import { useIdentityApi } from '../../headless/index.js';
+import { AddEmailDialog } from './AddEmailDialog.js';
+import { TABLE_ID, asAllowlistSortField, buildAllowlistColumns } from './allowlistColumns.js';
+/** The `status` query param, read out of the filter model as a SCALAR. */
+function readStatusFilter(filters) {
+    const found = filters.find((filter) => filter.columnId === 'status' && filter.operator === 'is');
+    return found?.value === 'pending' || found?.value === 'claimed' ? found.value : 'all';
+}
+/**
+ * The email allowlist: paging, search, the pending/claimed filter, add and
+ * remove (`allowlist:write`). The Allowlist tab of {@link UsersPage}.
+ *
+ * @returns the component.
+ *
+ * @stability stable
+ */
+export function AllowlistTable() {
+    const { entries, total, isLoading, error, fetchAllowlist, addEmail, removeEmail } = useAllowlist();
+    const identity = useIdentityApi();
+    const { hasPermission } = usePermissions();
+    const [search, setSearch] = useState('');
+    const [page, setPage] = useState(0);
+    const [pageSize, setPageSize] = useState(10);
+    const [sort, setSort] = useState(null);
+    const [filters, setFilters] = useState([]);
+    const [dialogOpen, setDialogOpen] = useState(false);
+    const columns = useMemo(() => buildAllowlistColumns(), []);
+    // --- Query params, flattened to scalars ------------------------------------
+    const status = useMemo(() => readStatusFilter(filters), [filters]);
+    const sortField = asAllowlistSortField(sort?.field);
+    const sortDirection = sort?.direction;
+    useEffect(() => {
+        fetchAllowlist({
+            page: page + 1,
+            pageSize,
+            search: search || undefined,
+            status,
+            ...(sortField ? { sortBy: sortField, sortOrder: sortDirection } : {}),
+        });
+        // Scalars only — `entries` is replaced on every fetch, so nothing here may
+        // depend on a row object.
+    }, [page, pageSize, search, status, sortField, sortDirection, fetchAllowlist]);
+    // --- Row actions ------------------------------------------------------------
+    const canWrite = hasPermission('allowlist:write');
+    const rowActions = useMemo(() => {
+        // DELETE /api/allowlist/{id} enforces allowlist:write. Gating the ARRAY (as
+        // opposed to a rendered `<TableCell>`) removes the control from the grid,
+        // the tablet row expander and the card header in one move.
+        if (!canWrite)
+            return [];
+        return [
+            {
+                id: 'remove',
+                label: 'Remove',
+                icon: _jsx(DeleteIcon, { fontSize: "small" }),
+                destructive: true,
+                // The server refuses this too (`allowlist.service.ts` raises 400 on a
+                // claimed entry); disabling keeps the control and its tooltip
+                // discoverable rather than making the row silently actionless.
+                disabled: (entry) => Boolean(entry.claimedBy),
+                confirm: {
+                    title: 'Remove from allowlist?',
+                    description: (entry) => `${entry.email} will no longer be able to sign in. This cannot be undone.`,
+                    confirmLabel: 'Remove',
+                },
+                onClick: (entry) => {
+                    void removeEmail(entry.id).catch(() => {
+                        /* surfaced through the hook's `error` */
+                    });
+                },
+            },
+        ];
+    }, [canWrite, removeEmail]);
+    const emptyState = useMemo(() => (_jsx(Typography, { color: "text.secondary", children: search ? 'No emails found matching your search' : 'No emails in allowlist' })), [search]);
+    return (_jsxs(Paper, { sx: { width: '100%', p: 2 }, children: [_jsxs(Stack, { direction: { xs: 'column', sm: 'row' }, spacing: 1, sx: { mb: 2, alignItems: { sm: 'center' }, justifyContent: 'space-between' }, children: [_jsx(Typography, { variant: "h6", component: "h2", children: "Email allowlist" }), canWrite && (_jsx(Button, { variant: "contained", startIcon: _jsx(AddIcon, {}), onClick: () => setDialogOpen(true), children: "Add Email" }))] }), error && (_jsx(Alert, { severity: "error", sx: { mb: 2 }, children: error })), _jsx(Box, { sx: { minWidth: 0 }, children: _jsx(DataTable, { tableId: TABLE_ID, "data-testid": "admin-allowlist-table", ariaLabel: "Email allowlist", columns: columns, rows: entries, rowId: (entry) => entry.id, loading: isLoading, emptyState: emptyState, pagination: {
+                        page,
+                        pageSize,
+                        total,
+                        pageSizeOptions: [5, 10, 25, 50],
+                        onPaginationChange: (next) => {
+                            setPage(next.page);
+                            setPageSize(next.pageSize);
+                        },
+                    }, sort: { sort, onSortChange: setSort }, filters: filters, onFiltersChange: (next) => {
+                        setFilters(next);
+                        setPage(0);
+                    }, quickSearch: {
+                        value: search,
+                        ariaLabel: 'Search by email',
+                        placeholder: 'Search by email',
+                        onChange: (next) => {
+                            setSearch(next);
+                            setPage(0);
+                        },
+                    }, rowActions: rowActions, csvExport: {
+                        filename: 'allowlist',
+                        fetchAllRows: async ({ page: exportPage, pageSize: exportPageSize }) => {
+                            const response = await identity.getAllowlist({
+                                page: exportPage + 1,
+                                pageSize: exportPageSize,
+                                search: search || undefined,
+                                status,
+                            });
+                            return response.items;
+                        },
+                    } }) }), _jsx(AddEmailDialog, { open: dialogOpen, onClose: () => setDialogOpen(false), onAdd: addEmail })] }));
+}
+//# sourceMappingURL=AllowlistTable.js.map

package/dist/identity/ui/users/AllowlistTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AllowlistTable.js","sourceRoot":"","sources":["../../../../src/identity/ui/users/AllowlistTable.tsx"],"names":[],"mappings":"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"}

package/dist/identity/ui/users/ManageRolesDialog.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Admin → Users: the "Manage roles" dialog (issue #67, epic #51).
+ *
+ * ## Why a dialog and not the nested menu it replaces
+ *
+ * `UserList` used to open a `Menu`, then a SECOND `Menu` anchored to the same
+ * element, holding one checkbox per role. That shape has no card equivalent:
+ * the mobile renderer gives a row exactly one trailing control, and a submenu
+ * anchored to a menu item is not a thing a card header can host. Rather than
+ * teach the card renderer about nested menus, the multi-select becomes what it
+ * always was — a small form — and the row action that opens it is a single
+ * `DataTableRowAction`, identical in all three layouts.
+ *
+ * ## Why the validation moved inside
+ *
+ * The old code called `window.alert('User must have at least one role')` from
+ * the menu's click handler. A native alert is unstyled, unreachable by the
+ * assistive-technology conventions the rest of the app follows, blocks the
+ * event loop, and — the practical problem — cannot be asserted on without
+ * stubbing a global. The rule lives here now as inline validation: the empty
+ * selection is describable, the Save button is disabled, and the message is in
+ * the accessibility tree next to the control that caused it.
+ *
+ * The API enforces the same rule (`updateUserRolesSchema` requires
+ * `min(1)`), so this is a second line, not the only one.
+ */
+import type { RoleDescriptor, UserListItem } from '../../headless/index.js';
+export interface ManageRolesDialogProps {
+    /** The user being edited, or `null` when the dialog is closed. */
+    user: UserListItem | null;
+    /**
+     * The roles offered: the ones the API says may be assigned
+     * (`GET /api/roles`, `assignable` only). A role the user holds that is not
+     * in this list (the `org_admin` an administrator is listed with, a role the
+     * application manages itself) is neither shown nor sent back.
+     */
+    roles: readonly RoleDescriptor[];
+    onClose: () => void;
+    onSave: (userId: string, roles: string[]) => Promise<void>;
+}
+export declare function ManageRolesDialog({ user, roles, onClose, onSave }: ManageRolesDialogProps): import("react").JSX.Element;
+//# sourceMappingURL=ManageRolesDialog.d.ts.map

package/dist/identity/ui/users/ManageRolesDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ManageRolesDialog.d.ts","sourceRoot":"","sources":["../../../../src/identity/ui/users/ManageRolesDialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAgBH,OAAO,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5E,MAAM,WAAW,sBAAsB;IACrC,kEAAkE;IAClE,IAAI,EAAE,YAAY,GAAG,IAAI,CAAC;IAC1B;;;;;OAKG;IACH,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC5D;AAID,wBAAgB,iBAAiB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,sBAAsB,+BA8FzF"}

package/dist/identity/ui/users/ManageRolesDialog.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Admin → Users: the "Manage roles" dialog (issue #67, epic #51).
+ *
+ * ## Why a dialog and not the nested menu it replaces
+ *
+ * `UserList` used to open a `Menu`, then a SECOND `Menu` anchored to the same
+ * element, holding one checkbox per role. That shape has no card equivalent:
+ * the mobile renderer gives a row exactly one trailing control, and a submenu
+ * anchored to a menu item is not a thing a card header can host. Rather than
+ * teach the card renderer about nested menus, the multi-select becomes what it
+ * always was — a small form — and the row action that opens it is a single
+ * `DataTableRowAction`, identical in all three layouts.
+ *
+ * ## Why the validation moved inside
+ *
+ * The old code called `window.alert('User must have at least one role')` from
+ * the menu's click handler. A native alert is unstyled, unreachable by the
+ * assistive-technology conventions the rest of the app follows, blocks the
+ * event loop, and — the practical problem — cannot be asserted on without
+ * stubbing a global. The rule lives here now as inline validation: the empty
+ * selection is describable, the Save button is disabled, and the message is in
+ * the accessibility tree next to the control that caused it.
+ *
+ * The API enforces the same rule (`updateUserRolesSchema` requires
+ * `min(1)`), so this is a second line, not the only one.
+ */
+import { useEffect, useState } from 'react';
+import { Alert, Button, Checkbox, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle, FormControlLabel, FormGroup, Stack, } from '@mui/material';
+const EMPTY_ROLES_MESSAGE = 'User must have at least one role';
+export function ManageRolesDialog({ user, roles, onClose, onSave }) {
+    const [selected, setSelected] = useState([]);
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    // Re-seed whenever a different user is opened. Keyed on the user ID (a
+    // scalar), never on the user OBJECT: `useUsers` replaces every row object on
+    // each refetch, and keying on identity would wipe an in-progress edit on the
+    // next poll.
+    const userId = user?.id ?? null;
+    const rolesKey = user?.roles.join(',') ?? '';
+    const offeredKey = roles.map((role) => role.id).join(',');
+    useEffect(() => {
+        // Only the roles this dialog offers. The API also reports the org role an
+        // administrator holds alongside `admin` (`org_admin`, issue #723), which is
+        // implied by `admin` and is not assigned here; carrying it through a save
+        // would keep it after `admin` is unticked.
+        const offered = offeredKey ? offeredKey.split(',') : [];
+        setSelected(rolesKey ? rolesKey.split(',').filter((role) => offered.includes(role)) : []);
+        setError(null);
+    }, [userId, rolesKey, offeredKey]);
+    const toggle = (role) => {
+        setSelected((current) => current.includes(role) ? current.filter((r) => r !== role) : [...current, role]);
+    };
+    const isEmpty = selected.length === 0;
+    const handleSave = async () => {
+        if (!user || isEmpty)
+            return;
+        setSaving(true);
+        setError(null);
+        try {
+            await onSave(user.id, selected);
+            onClose();
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to update roles');
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    return (_jsxs(Dialog, { open: Boolean(user), onClose: saving ? undefined : onClose, maxWidth: "xs", fullWidth: true, children: [_jsx(DialogTitle, { children: "Manage roles" }), _jsx(DialogContent, { children: _jsxs(Stack, { spacing: 2, sx: { pt: 1 }, children: [_jsx(DialogContentText, { children: user ? `Choose the roles for ${user.email}.` : '' }), error && _jsx(Alert, { severity: "error", children: error }), isEmpty && (_jsx(Alert, { severity: "warning", id: "manage-roles-empty", children: EMPTY_ROLES_MESSAGE })), _jsx(FormGroup, { "aria-label": "Roles", "aria-describedby": isEmpty ? 'manage-roles-empty' : undefined, children: roles.map((role) => (_jsx(FormControlLabel, { control: _jsx(Checkbox, { checked: selected.includes(role.id), onChange: () => toggle(role.id), disabled: saving }), label: role.label }, role.id))) })] }) }), _jsxs(DialogActions, { children: [_jsx(Button, { onClick: onClose, disabled: saving, children: "Cancel" }), _jsx(Button, { variant: "contained", onClick: handleSave, disabled: isEmpty || saving, children: saving ? 'Saving…' : 'Save roles' })] })] }));
+}
+//# sourceMappingURL=ManageRolesDialog.js.map

package/dist/identity/ui/users/ManageRolesDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ManageRolesDialog.js","sourceRoot":"","sources":["../../../../src/identity/ui/users/ManageRolesDialog.tsx"],"names":[],"mappings":"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"}

package/dist/identity/ui/users/UserList.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Admin → Users (issue #67, epic #51).
+ *
+ * The hand-rolled `TableContainer` / `TablePagination` / `MoreVert` block this
+ * file used to be is gone wholesale — not wrapped — and replaced by the shared
+ * `DataTable`. What remains here is state: the query this page sends, the
+ * selection it holds, and the dialog its row action opens.
+ *
+ * Four rules from the migration brief are load-bearing in this file:
+ *
+ *  1. **The table renders unconditionally; `loading` is a prop.** The previous
+ *     `{isLoading ? <CircularProgress/> : <Table/>}` ternary UNMOUNTED the
+ *     whole table on every refetch, taking row expansion, scroll offset and
+ *     grid focus with it. `DataTable` draws a loading overlay above rows that
+ *     stay on screen.
+ *  2. **Refetch effects key on SCALARS.** Never on `filters` (an array) or on a
+ *     row object: `useUsers` hands back brand-new objects on every fetch, so an
+ *     effect keyed on one would refetch forever.
+ *  3. **The row-action ARRAY is gated, never a rendered control.** A user
+ *     without `users:write` gets an array that does not CONTAIN the activate /
+ *     deactivate actions, so they are absent from the grid, the tablet expander
+ *     and the card header at once. The old code hid a `<TableCell>` — a
+ *     grid-shaped gate no card renderer can reproduce.
+ *  4. **A per-row `disabled` replaces "render nothing".** "Activate user" stays
+ *     visible (and tooltipped) on an already-active user rather than vanishing,
+ *     so the set of actions does not change shape row to row.
+ */
+import type { ReactElement } from 'react';
+import type { TableSlots } from '../../../core/index.js';
+import type { IdentityTableColumn } from '../../headless/index.js';
+import type { UserListItem } from '../../headless/index.js';
+/**
+ * The table slots of {@link UserList} (and, passed through, of `UsersPage`):
+ * the packaged-page table contract over a user row. `Columns` receives the
+ * list's own columns (`buildUserColumns`, plus the `RowActions` and
+ * `DetailPanel` columns when those slots are set) and returns the ones to draw;
+ * `Toolbar` is drawn above the table.
+ *
+ * @example
+ * ```tsx
+ * <UserList slots={{ Columns: (base) => [...base, planColumn] }} />
+ * ```
+ *
+ * @extensionPoint slot
+ * @stability experimental
+ */
+export type UserListSlots = TableSlots<UserListItem, IdentityTableColumn<UserListItem>>;
+/**
+ * Props of {@link UserList}.
+ *
+ * @stability experimental
+ */
+export interface UserListProps {
+    /** Add columns, per-row actions, a detail view or toolbar controls to the table. */
+    slots?: UserListSlots;
+}
+/**
+ * The admin user list: server-side paging, search, sort and filters, the
+ * activate/deactivate actions (`users:write`) and Manage roles (`rbac:manage`).
+ * The Users tab of {@link UsersPage}.
+ *
+ * @param props - see {@link UserListProps}.
+ * @returns the component.
+ *
+ * @stability stable
+ */
+export declare function UserList({ slots }?: UserListProps): ReactElement;
+//# sourceMappingURL=UserList.d.ts.map

package/dist/identity/ui/users/UserList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UserList.d.ts","sourceRoot":"","sources":["../../../../src/identity/ui/users/UserList.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AAEH,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAO1C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEzD,OAAO,KAAK,EACV,mBAAmB,EAIpB,MAAM,yBAAyB,CAAC;AAIjC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAoB5D;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,CAAC,YAAY,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC,CAAC;AAExF;;;;GAIG;AACH,MAAM,WAAW,aAAa;IAC5B,oFAAoF;IACpF,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,EAAE,KAAK,EAAE,GAAE,aAAkB,GAAG,YAAY,CAmMpE"}