portal-mojo 0.2.5 → 0.2.6

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>
+            )}
+        </>
+    );
+}