portal-mojo 0.2.5 → 0.2.7

package/src/admin/identity/groups/GroupDetail.tsx

@@ -0,0 +1,287 @@
+// GroupDetail — the FULL GroupView.js port (web-mojo admin/account/groups/
+// GroupView.js, all 2243 lines read 2026-08-05; parity pass over the earlier
+// subset build): DetailView modal with the complete section map —
+//   Overview · Identity · ─Membership─ Members · Sub-Groups · ─Access─
+//   API Keys · Webhooks(manage_group) · Geofencing(geofence perms) ·
+//   ─Activity─ Events · Audit(view_logs…) · ─Detail─ Metadata
+// — kind-aware header (icon/noun/chips), rail count badges, active toggle
+// gated to manage_groups (the source hid it below that tier), kebab context
+// menu (Invite Member · Add Sub-{Noun} · Configure Auth · View Parent ·
+// Deactivate/Activate), and cross-record navigation (parent/sub-group links
+// open a STACKED GroupDetail — native <dialog> stacking).
+//
+// Deviations from source, all deliberate and documented in-section:
+//   · "Edit {Noun}" (the GroupForms.detailed modal) is not carried — the
+//     Identity section IS that form, as an autosave surface covering every
+//     field it had except avatar (no upload pipeline in portal-mojo yet).
+//   · The header aux meta line ("Last activity 50m ago" under the toggle)
+//     folds into the chips row — DetailView has no right-gutter meta slot;
+//     Overview's KPI carries the same fact.
+//   · Member rows use the packaged MemberDetail; optional callbacks keep the
+//     package decoupled while this app still opens UserDetail/GroupDetail.
+//   · Deactivate collects the REQUIRED reason (admin | abuse | archived —
+//     django-mojo services/disable.py GROUP_REST_REASONS); web-mojo's bare
+//     confirm predates that backend rule.
+import { useQueryClient, useQuery } from '@tanstack/react-query';
+import {
+    DetailView, Eyebrow, MetadataSection, formModal, modal, toast,
+    type DetailMenuEntry,
+} from 'portal-mojo/ui';
+import { mojoList, useCan, type Params } from 'portal-mojo/client/runtime';
+import {
+    GLOBAL_CREDENTIAL_PERMS, GroupApiKeyModel, GroupApiKeysSection,
+    WebhookSubscriptionModel, WebhookSubscriptionsSection,
+} from '../../credentials';
+import {
+    MEMBER_INVITE_PERMISSIONS, MEMBER_SAVE_PERMISSIONS, MEMBER_USER_DIRECTORY_PERMISSIONS,
+    MemberModel, openMemberAdmissionDialog,
+} from '../members';
+import { LogModel } from '../../monitoring';
+import {
+    GROUP_DESTRUCTIVE_PERMS, GROUP_MANAGE_PERMS,
+    GroupModel, type GroupRow,
+} from './models';
+import {
+    iconForKind, kindLabel,
+} from './group-sections/models';
+import { GEOFENCE_VIEW_PERMS } from './group-sections/geofence-data';
+import { groupAuditParams } from './group-sections/shared';
+import { openAuthConfigDialog } from './group-sections/AuthConfigDialog';
+import { OverviewSection } from './group-sections/OverviewSection';
+import { IdentitySection } from './group-sections/IdentitySection';
+import { MembersSection } from './group-sections/MembersSection';
+import { SubGroupsSection, runAddSubGroupFlow } from './group-sections/SubGroupsSection';
+import { GeofenceSection } from './group-sections/GeofenceSection';
+import { EventsSection } from './group-sections/EventsSection';
+import { AuditSection } from './group-sections/AuditSection';
+
+export { iconForKind } from './group-sections/models';
+
+const GLOBAL_SECURITY_PERMS = ['sys.view_security', 'sys.security'];
+const GLOBAL_LOG_PERMS = ['sys.view_logs', 'sys.manage_logs', 'sys.security'];
+
+/** Open another group's detail as a stacked modal (source _openGroupById). */
+function openGroupById(id: number) {
+    void modal.detail((close) => <GroupDetail id={id} onClose={() => close(null)} />);
+}
+
+/**
+ * count-only peek sharing useModelList's exact cache key ([endpoint,
+ * params]), so a section mounting the same list dedupes with the badge.
+ * `enabled:false` for gated surfaces (a non-manager's webhook badge must
+ * not fire a guaranteed-403 request per open).
+ */
+function useCountPeek(endpoint: string, params: Params, enabled = true): number | null {
+    const q = useQuery({
+        queryKey: [endpoint, params],
+        queryFn: () => mojoList(endpoint, params),
+        enabled,
+    });
+    return q.data?.count ?? null;
+}
+
+export function GroupDetail({ id, onClose }: { id: number; onClose: () => void }) {
+    const qc = useQueryClient();
+    const { data: group, isPending } = GroupModel.useOne(id);
+    const groupSave = GroupModel.useSave();
+    const disable = GroupModel.useAction('disable');
+    const reactivate = GroupModel.useAction('reactivate');
+    const { can: canManage } = useCan(GROUP_MANAGE_PERMS);
+    const { can: canAccessCredentials } = useCan(GLOBAL_CREDENTIAL_PERMS);
+    const { can: canViewAudit } = useCan(GLOBAL_LOG_PERMS);
+    const { can: canInviteMember } = useCan(MEMBER_INVITE_PERMISSIONS);
+    const { can: canCreateMember } = useCan(MEMBER_SAVE_PERMISSIONS);
+    const { can: canReadUsers } = useCan(MEMBER_USER_DIRECTORY_PERMISSIONS);
+
+    // Rail count badges (source setBadge wiring, as controlled props). The
+    // member/apikey peeks share Overview's keys and dedupe; the gated ones
+    // hold off until the caller could actually open the section.
+    const memberCount = useCountPeek(MemberModel.endpoint, { group: id, size: 1, is_active: true });
+    const subCount = useCountPeek(GroupModel.endpoint, { parent: id, size: 1 });
+    const keyCount = useCountPeek(GroupApiKeyModel.endpoint, { group: id, size: 1 }, canAccessCredentials);
+    const hookCount = useCountPeek(WebhookSubscriptionModel.endpoint, { group: id, size: 1 }, canAccessCredentials);
+    const auditCount = useCountPeek(LogModel.endpoint, { ...groupAuditParams(id), size: 1 }, canViewAudit);
+
+    if (isPending || !group) {
+        return <div className="detail-loading"><span className="skel skel-block" /></div>;
+    }
+
+    const noun = kindLabel(group.kind) || 'Group';
+
+    /** Deactivate collects the REQUIRED reason (admin | abuse | archived). */
+    const deactivate = async () => {
+        const data = await formModal({
+            ...GroupModel.forms.disable!,
+            title: `Deactivate ${noun.toLowerCase()}`,
+            intro: <>Deactivate <b>{group.name}</b>? Members keep their accounts; the group stops resolving.</>,
+        });
+        if (!data) return;
+        const payload: Record<string, unknown> = { reason: data.reason };
+        if (data.note) payload.note = data.note;
+        try {
+            await disable.mutateAsync({ id: group.id, payload });
+            toast.success(`${noun} deactivated`);
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Deactivate failed');
+        }
+    };
+
+    const activate = async () => {
+        try {
+            await reactivate.mutateAsync({ id: group.id });
+            toast.success(`${noun} reactivated`);
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Reactivate failed');
+        }
+    };
+
+    // Kebab — the source contextItems (GroupView.js:1361-1373) minus "Edit
+    // {Noun}" (Identity autosave replaces it — see the header comment).
+    const MENU: DetailMenuEntry<GroupRow>[] = [
+        {
+            label: 'Add or Invite Member', icon: 'bi-person-plus',
+            permissions: MEMBER_INVITE_PERMISSIONS,
+            onSelect: () => {
+                void openMemberAdmissionDialog({
+                    group,
+                    canInvite: canInviteMember,
+                    canCreate: canCreateMember,
+                    canReadUsers,
+                    queryClient: qc,
+                });
+            },
+        },
+        {
+            label: `Add Sub-${noun}`, icon: 'bi-diagram-3',
+            permissions: GROUP_MANAGE_PERMS,
+            onSelect: () => { void runAddSubGroupFlow(group, groupSave.mutateAsync); },
+        },
+        {
+            label: 'Configure Auth', icon: 'bi-box-arrow-in-right',
+            permissions: GROUP_MANAGE_PERMS,
+            onSelect: () => { openAuthConfigDialog(group); },
+        },
+        {
+            label: 'View Parent', icon: 'bi-arrow-up-right-square',
+            when: (g) => Boolean(g?.parent?.id),
+            onSelect: () => { if (group.parent?.id) openGroupById(group.parent.id); },
+        },
+        { divider: true },
+        {
+            label: group.is_active ? `Deactivate ${noun}` : `Activate ${noun}`,
+            icon: group.is_active ? 'bi-toggle-off' : 'bi-toggle-on',
+            danger: group.is_active,
+            permissions: GROUP_DESTRUCTIVE_PERMS,
+            onSelect: () => { void (group.is_active ? deactivate() : activate()); },
+        },
+    ];
+
+    const shownMembers = memberCount ?? group.member_count;
+    const timezone = typeof group.metadata?.timezone === 'string' ? group.metadata.timezone : null;
+    const eodRaw = group.metadata?.eod_hour;
+    const eodChip = eodRaw !== undefined && eodRaw !== null && eodRaw !== ''
+        ? `EOD ${String(eodRaw).padStart(2, '0')}:00` : null;
+
+    return (
+        <DetailView<GroupRow>
+            icon={iconForKind(group.kind)}
+            title={group.name}
+            subtitle={group.parent?.name ?? undefined}
+            chips={[
+                ...(group.kind ? [{ text: kindLabel(group.kind), tone: 'primary' as const }] : []),
+                ...(shownMembers > 0 ? [{ icon: 'bi-people', text: `${shownMembers} member${shownMembers === 1 ? '' : 's'}`, tone: 'muted' as const }] : []),
+                ...(subCount != null && subCount > 0 ? [{ icon: 'bi-diagram-3', text: `${subCount} sub-group${subCount === 1 ? '' : 's'}`, tone: 'muted' as const }] : []),
+                ...(timezone ? [{ text: timezone, tone: 'muted' as const }] : []),
+                ...(eodChip ? [{ text: eodChip, tone: 'muted' as const }] : []),
+                ...(group.metadata?.portal ? [{ icon: 'bi-globe', text: 'Has portal', tone: 'muted' as const }] : []),
+            ]}
+            // Toggle hidden below manage_groups (source _buildHeaderAux gate).
+            // Off → deactivate flow (cancel leaves it on); on → reactivate.
+            active={canManage
+                ? { value: group.is_active, onChange: (next) => { void (next ? activate() : deactivate()); } }
+                : undefined}
+            contextMenu={MENU}
+            menuContext={group}
+            badges={{
+                Members: shownMembers > 0 ? shownMembers : null,
+                SubGroups: subCount != null && subCount > 0 ? subCount : null,
+                ApiKeys: keyCount != null && keyCount > 0 ? keyCount : null,
+                Webhooks: hookCount != null && hookCount > 0 ? hookCount : null,
+                Audit: auditCount != null && auditCount > 0 ? auditCount : null,
+            }}
+            onClose={onClose}
+            sections={[
+                {
+                    key: 'Overview', label: 'Overview', icon: 'bi-grid-1x2',
+                    render: () => (
+                        <OverviewSection
+                            group={group}
+                            openGroup={openGroupById}
+                            canViewCredentials={canAccessCredentials}
+                            canViewAudit={canViewAudit}
+                        />
+                    ),
+                },
+                { key: 'Identity', label: 'Identity', icon: 'bi-card-text', render: () => <IdentitySection group={group} editable={canManage} /> },
+                { divider: 'Membership' },
+                { key: 'Members', label: 'Members', icon: 'bi-people', render: () => <MembersSection group={group} openGroup={openGroupById} /> },
+                { key: 'SubGroups', label: 'Sub-Groups', icon: 'bi-diagram-3', render: () => <SubGroupsSection group={group} openGroup={openGroupById} /> },
+                { divider: 'Access' },
+                {
+                    key: 'ApiKeys', label: 'API Keys', icon: 'bi-key',
+                    permissions: GLOBAL_CREDENTIAL_PERMS,
+                    render: () => <GroupApiKeysSection group={group} permission={GLOBAL_CREDENTIAL_PERMS} />,
+                },
+                {
+                    key: 'Webhooks', label: 'Webhooks', icon: 'bi-broadcast',
+                    permissions: GLOBAL_CREDENTIAL_PERMS,
+                    render: () => <WebhookSubscriptionsSection group={group} permission={GLOBAL_CREDENTIAL_PERMS} />,
+                },
+                {
+                    key: 'Geofencing', label: 'Geofencing', icon: 'bi-globe-americas',
+                    permissions: GEOFENCE_VIEW_PERMS,
+                    render: () => <GeofenceSection group={group} />,
+                },
+                { divider: 'Activity' },
+                {
+                    key: 'Events', label: 'Events', icon: 'bi-calendar-event',
+                    permissions: GLOBAL_SECURITY_PERMS,
+                    render: () => <EventsSection group={group} />,
+                },
+                {
+                    key: 'Audit', label: 'Audit', icon: 'bi-clock-history',
+                    // Wider than the source's bare 'view_logs': the fetch
+                    // itself needs logit's VIEW_PERMS, so the gate matches
+                    // what can actually load (fail-closed alignment).
+                    permissions: GLOBAL_LOG_PERMS,
+                    render: () => <AuditSection group={group} />,
+                },
+                { divider: 'Detail' },
+                {
+                    key: 'Metadata', label: 'Metadata', icon: 'bi-braces',
+                    render: () => (
+                        <>
+                            {canManage && (
+                                <MetadataSection
+                                    endpoint={GroupModel.endpoint}
+                                    id={group.id}
+                                    metadata={group.metadata ?? {}}
+                                    onSaved={(next) => {
+                                        // Owner write-through + refetch (the primitive is
+                                        // controlled — it never mirrors server state).
+                                        qc.setQueryData(GroupModel.keys.one(group.id), { ...group, metadata: next });
+                                        void GroupModel.invalidate(qc);
+                                    }}
+                                />
+                            )}
+                            <div style={{ marginTop: 16 }}>
+                                <Eyebrow>Raw metadata (JSON)</Eyebrow>
+                                <pre className="dim" style={{ whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }}><code>{JSON.stringify(group.metadata ?? {}, null, 2)}</code></pre>
+                            </div>
+                        </>
+                    ),
+                },
+            ]}
+        />
+    );
+}

package/src/admin/identity/groups/GroupsPage.tsx

@@ -0,0 +1,125 @@
+// Groups — the second full-UX ModelTable screen (board #1281): chooser,
+// filters incl. daterange, search, export, persistState, all against the
+// live /api/group default graph (measured 2026-08-05: rows carry uuid /
+// modified / last_activity / is_active / member_count / parent-basic).
+// Row click opens the GroupDetail port of web-mojo's GroupView.
+import { useQueryClient } from '@tanstack/react-query';
+import {
+    Badge, fmt, formModal, modal, toast, ModelTable,
+    type BatchAction, type Column, type FilterDef,
+} from 'portal-mojo/ui';
+import { useCan } from 'portal-mojo/client/runtime';
+import {
+    GROUP_KIND_OPTIONS, GROUP_MANAGE_PERMS, GroupModel, type GroupRow,
+} from './models';
+import { GroupDetail, iconForKind } from './GroupDetail';
+
+const COLUMNS: Column<GroupRow>[] = [
+    { key: 'id', label: 'ID', sortable: true, render: (g) => <span className="dim">{g.id}</span> },
+    {
+        key: 'name', label: 'Group', sortable: true, hideable: false, render: (g) => (
+            <div className="cell-user">
+                <span className="cell-avatar" style={{ fontSize: 13 }}><i className={`bi ${iconForKind(g.kind)}`} /></span>
+                <span>
+                    <span className="cell-name">{g.name}</span>
+                    <span className="cell-sub">{g.parent?.name ?? 'Top-level'}</span>
+                </span>
+            </div>
+        ),
+    },
+    {
+        key: 'kind', label: 'Kind', sortable: true, render: (g) =>
+            g.kind ? <Badge tone="primary">{g.kind}</Badge> : <span className="dim">—</span>,
+    },
+    {
+        key: 'member_count', label: 'Members', align: 'center', render: (g) =>
+            g.member_count > 0 ? String(g.member_count) : <span className="dim">—</span>,
+    },
+    { key: 'is_active', label: 'Status', render: (g) => <Badge>{g.is_active ? 'Active' : 'Inactive'}</Badge> },
+    { key: 'parent', label: 'Parent', render: (g) => g.parent?.name ?? <span className="dim">—</span> },
+    { key: 'uuid', label: 'UUID', render: (g) => g.uuid ? <code>{g.uuid}</code> : <span className="dim">—</span> },
+    { key: 'created', label: 'Created', sortable: true, render: (g) => fmt.date(g.created) },
+    { key: 'last_activity', label: 'Last Activity', sortable: true, render: (g) => fmt.relative(g.last_activity, '—') },
+];
+
+const FILTERS: FilterDef[] = [
+    { key: 'name', label: 'Name', type: 'text', placeholder: 'Contains…' },
+    { key: 'kind', label: 'Kind', type: 'multiselect', options: GROUP_KIND_OPTIONS },
+    { key: 'is_active', label: 'Status', type: 'boolean', trueLabel: 'Active', falseLabel: 'Inactive' },
+    // The boolean dialog writes the key verbatim — carrying the lookup IN
+    // the key gives it Django __isnull semantics without a new filter type.
+    { key: 'parent__isnull', label: 'Top-level', type: 'boolean', trueLabel: 'Top-level only', falseLabel: 'Has a parent' },
+    { key: 'created', label: 'Created', type: 'daterange' },
+    { key: 'last_activity', label: 'Last activity', type: 'daterange' },
+];
+
+export function GroupsPage() {
+    const qc = useQueryClient();
+    const save = GroupModel.useSave();
+    const disable = GroupModel.useAction('disable');
+    const reactivate = GroupModel.useAction('reactivate');
+    const { can: canManage } = useCan(GROUP_MANAGE_PERMS);
+
+    const addGroup = async () => {
+        const form = GroupModel.forms.create!;
+        const data = await formModal(form);
+        if (!data) return;
+        const changes = Object.fromEntries(Object.entries(data).filter(([, v]) => v !== '' && v != null));
+        try {
+            const created = await save.mutateAsync({ id: null, changes });
+            toast.success(`${created.name} created`);
+        } catch (err) {
+            toast.error(err instanceof Error ? err.message : 'Create failed');
+        }
+    };
+
+    const openGroup = (g: GroupRow) => {
+        // Warm the one-record cache so the modal's useOne attaches to this
+        // in-flight request instead of issuing its own.
+        void GroupModel.fetchOne(qc, g.id).catch(() => {});
+        void modal.detail((close) => <GroupDetail id={g.id} onClose={() => close(null)} />);
+    };
+
+    const batchActions: BatchAction<GroupRow>[] = canManage ? [
+        {
+            key: 'deactivate', label: 'Deactivate', icon: 'bi-x-circle', danger: true, confirm: false,
+            prepare: async () => {
+                const data = await formModal(GroupModel.forms.disable!);
+                if (!data) return null;
+                const payload: Record<string, unknown> = { reason: data.reason };
+                if (data.note) payload.note = data.note;
+                return payload;
+            },
+            run: (row, payload) => disable.mutateAsync({ id: row.id, payload }),
+        },
+        {
+            key: 'reactivate', label: 'Reactivate', icon: 'bi-arrow-counterclockwise',
+            run: (row) => reactivate.mutateAsync({ id: row.id }),
+        },
+    ] : [];
+
+    return (
+        <ModelTable<GroupRow>
+            model={GroupModel}
+            eyebrow="Account"
+            title="Groups"
+            searchPlaceholder="Search group names…"
+            columns={COLUMNS}
+            filters={FILTERS}
+            presets={[
+                { key: 'all', label: 'All', params: {} },
+                { key: 'active', label: 'Active', params: { is_active: 'true' } },
+                { key: 'top', label: 'Top-level', params: { parent__isnull: 'true' } },
+                { key: 'orgs', label: 'Orgs', params: { kind: 'org' } },
+            ]}
+            defaultSort="-created"
+            selectable={canManage}
+            batchActions={batchActions}
+            columnChooser
+            persistState
+            exportFormats={['csv', 'json']}
+            onRowClick={openGroup}
+            {...(canManage ? { addLabel: 'Add Group', onAdd: addGroup } : {})}
+        />
+    );
+}

package/src/admin/identity/groups/group-permissions.ts

@@ -0,0 +1,5 @@
+/** Group directory permissions are pinned to the caller's system grants. */
+export const GROUP_VIEW_PERMS = ['sys.groups', 'sys.view_groups'];
+export const GROUP_MANAGE_PERMS = ['sys.groups', 'sys.manage_groups'];
+export const GROUP_DESTRUCTIVE_PERMS = ['sys.groups', 'sys.manage_groups'];
+

package/src/admin/identity/groups/group-sections/AuditSection.tsx

@@ -0,0 +1,57 @@
+// group-sections/AuditSection.tsx — GroupAuditTimelineSection port
+// (GroupView.js:1064-1112): the group's OBJECT logs
+// (model_name=account.Group, model_id=<id> — the source's shared LogList),
+// rendered as a DAY-GROUPED timeline: one date heading per day, a Timeline
+// under each, tones mapped from the log level (LOG_LEVEL_TONE).
+import { Eyebrow, Timeline, fmt, type TimelineItem } from 'portal-mojo/ui';
+import { LogModel, type LogRow } from 'portal-mojo/admin/observability';
+import { type GroupRow } from '../models';
+import { LOG_TONE, groupAuditParams } from './shared';
+
+/** Bucket rows by local calendar day, newest day first (rows arrive -created). */
+function groupByDay(rows: LogRow[]): { day: string; items: TimelineItem[] }[] {
+    const buckets: { day: string; items: TimelineItem[] }[] = [];
+    for (const l of rows) {
+        const day = fmt.date(l.created);
+        const item: TimelineItem = {
+            tone: LOG_TONE[l.level] ?? 'muted',
+            title: l.kind ?? l.level,
+            body: (
+                <span className="dim">
+                    {l.log ? fmt.truncate(l.log, 110) : ''}
+                    {l.username && <> · <code>{l.username}</code></>}
+                </span>
+            ),
+            meta: fmt.relative(l.created),
+        };
+        const last = buckets[buckets.length - 1];
+        if (last && last.day === day) last.items.push(item);
+        else buckets.push({ day, items: [item] });
+    }
+    return buckets;
+}
+
+export function AuditSection({ group }: { group: GroupRow }) {
+    const { data, isPending } = LogModel.useList({ ...groupAuditParams(group.id), size: 25 });
+    const buckets = groupByDay(data?.rows ?? []);
+
+    return (
+        <>
+            <Eyebrow>Audit</Eyebrow>
+            {!isPending && buckets.length === 0 && (
+                <Timeline items={[]} emptyText="No audit entries recorded for this group yet." />
+            )}
+            {buckets.map((b) => (
+                <div key={b.day} className="ga-audit-day">
+                    <div className="ga-audit-day-label">{b.day}</div>
+                    <Timeline items={b.items} />
+                </div>
+            ))}
+            {(data?.count ?? 0) > (data?.rows.length ?? 0) && (
+                <p className="dim" style={{ marginTop: 8 }}>
+                    {data!.count - data!.rows.length} older entries — see the Logs page for the full history.
+                </p>
+            )}
+        </>
+    );
+}