create-astram-app 0.2.0 → 0.4.0

package/template/frontend/src/pages/cross-tenant/GrantForm.jsx

@@ -0,0 +1,337 @@
+/**
+ * GrantForm — the "Offer a cross-tenant grant" form, rendered as a routed-modal overlay
+ * by `/cross-tenant/offer` under GrantsPage's layout (mirrors the identity add/edit
+ * forms' routed-modal shape: `useOutletContext` for `onRefresh`, closes via
+ * `navigate(-1)`).
+ *
+ * Composition (all EXISTING components — no new CSS):
+ *   - `SearchableSelect` for the grantee TENANT picker (over `identity.listCompanies`)
+ *   - a grantee-kind toggle (user/role) — plain Button variants
+ *   - `SearchableSelect` for the grantee user/role picker (over `identity.listUsers`/
+ *     `identity.listRoles`) — resets when the tenant OR kind changes
+ *   - a plain `Select` for the object type (from `crossTenant.listOfferableTypes` —
+ *     tenantScoped types ONLY, decision 1)
+ *   - a `Checkbox` per allowed-action (the type's action vocabulary) — at least one
+ *     required; NEVER a wildcard option is offered (the writer hard-rejects '*')
+ *   - a native `DateField` for the expiry, defaulting to now+90 days, converted to a
+ *     future epoch-ms on submit (decision 2: mandatory, default 90 days)
+ *
+ * ⛔ Object_type scope ONLY (decision 4): there is no recordId/scope field anywhere in
+ * this form — the server hard-codes `scope:'object_type'` from the authenticated
+ * principal's context; nothing here could send a record-scoped offer even if it tried.
+ *
+ * ⛔ `owningTenantId`/`offeredBy` are never sent from here — only
+ * `{ granteeTenantId, granteeKind, granteeUuid, typeKey, allowedActions, expiresAtMs }`.
+ */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useNavigate, useOutletContext } from 'react-router-dom';
+import { toast } from 'sonner';
+import { useAuth } from '@/auth/AuthContext';
+import EntityFormModal from '@/components/EntityFormModal';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Checkbox } from '@/components/ui/checkbox';
+import { DateField } from '@/components/ui/date-field';
+import { SearchableSelect } from '@/components/ui/searchable-select';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+const DEFAULT_EXPIRY_DAYS = 90;
+
+/** now + N days, as a yyyy-mm-dd string for the native date input's default value. */
+function defaultExpiryDateString() {
+  const d = new Date(Date.now() + DEFAULT_EXPIRY_DAYS * 24 * 60 * 60 * 1000);
+  return d.toISOString().slice(0, 10);
+}
+
+/** A yyyy-mm-dd date string -> END-OF-DAY epoch-ms (so "today" is still a valid future expiry). */
+function dateStringToEndOfDayMs(dateStr) {
+  if (!dateStr) return NaN;
+  const d = new Date(`${dateStr}T23:59:59.999`);
+  return d.getTime();
+}
+
+export default function GrantForm() {
+  const { tokens, identity, crossTenant } = useAuth();
+  const token = tokens?.accessToken;
+  const navigate = useNavigate();
+  const { onRefresh } = useOutletContext() ?? {};
+
+  const [granteeTenantId, setGranteeTenantId] = useState(null);
+  const [granteeTenantLabel, setGranteeTenantLabel] = useState(null);
+
+  const [granteeKind, setGranteeKind] = useState('user');
+  const [granteeUuid, setGranteeUuid] = useState(null);
+  const [granteeLabel, setGranteeLabel] = useState(null);
+
+  const [types, setTypes] = useState([]);
+  const [typesLoading, setTypesLoading] = useState(true);
+  const [typeKey, setTypeKey] = useState('');
+  const [selectedActions, setSelectedActions] = useState(new Set());
+
+  const [expiryDate, setExpiryDate] = useState(defaultExpiryDateString());
+
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState('');
+
+  // Load the offerable (tenantScoped-only) object types once.
+  useEffect(() => {
+    if (!token) return undefined;
+    let active = true;
+    (async () => {
+      setTypesLoading(true);
+      const r = await crossTenant.listOfferableTypes(token);
+      if (!active) return;
+      if (r.ok) {
+        setTypes(r.types || []);
+        if (r.types?.length === 1) setTypeKey(r.types[0].typeKey);
+      } else {
+        setError(r.error || 'Could not load the offerable object types.');
+      }
+      setTypesLoading(false);
+    })();
+    return () => {
+      active = false;
+    };
+  }, [crossTenant, token]);
+
+  const currentType = useMemo(() => types.find((t) => t.typeKey === typeKey), [types, typeKey]);
+
+  // Reset the chosen actions whenever the object type changes (a prior type's actions
+  // don't necessarily apply to the new one).
+  const onTypeChange = (nextKey) => {
+    setTypeKey(nextKey);
+    setSelectedActions(new Set());
+  };
+
+  const toggleAction = (action) => {
+    setSelectedActions((prev) => {
+      const next = new Set(prev);
+      if (next.has(action)) next.delete(action);
+      else next.add(action);
+      return next;
+    });
+  };
+
+  // Reset the grantee user/role whenever the TENANT or KIND changes (a uuid from a
+  // different tenant/kind is meaningless).
+  const onTenantChange = (value) => {
+    setGranteeTenantId(value);
+    setGranteeUuid(null);
+    setGranteeLabel(null);
+  };
+  const onKindChange = (kind) => {
+    setGranteeKind(kind);
+    setGranteeUuid(null);
+    setGranteeLabel(null);
+  };
+
+  const fetchTenants = useCallback(
+    async ({ search: term, page, limit }) => {
+      const r = await identity.listCompanies(token, { page, limit, search: term, sortBy: 'name', sortOrder: 'asc' });
+      if (!r.ok) return { options: [], total: 0, page };
+      return {
+        options: (r.rows || []).map((row) => ({ value: row.id, label: row.fields?.name || '(unnamed)' })),
+        total: r.total ?? 0,
+        page: r.page ?? page,
+      };
+    },
+    [identity, token],
+  );
+
+  const fetchGrantees = useCallback(
+    async ({ search: term, page, limit }) => {
+      if (granteeKind === 'role') {
+        const r = await identity.listRoles(token, { page, limit, search: term, sortBy: 'name', sortOrder: 'asc' });
+        if (!r.ok) return { options: [], total: 0, page };
+        return {
+          options: (r.rows || []).map((row) => ({ value: row.id, label: row.fields?.name || '(unnamed)' })),
+          total: r.total ?? 0,
+          page: r.page ?? page,
+        };
+      }
+      const r = await identity.listUsers(token, { page, limit, search: term, sortBy: 'username', sortOrder: 'asc' });
+      if (!r.ok) return { options: [], total: 0, page };
+      return {
+        options: (r.rows || []).map((row) => ({ value: row.id, label: row.fields?.username || '(unnamed)' })),
+        total: r.total ?? 0,
+        page: r.page ?? page,
+      };
+    },
+    [identity, token, granteeKind],
+  );
+
+  const close = () => navigate(-1);
+
+  const onSubmit = async () => {
+    if (!granteeTenantId) {
+      setError('Pick a grantee tenant.');
+      return;
+    }
+    if (!granteeUuid) {
+      setError(`Pick a grantee ${granteeKind}.`);
+      return;
+    }
+    if (!typeKey) {
+      setError('Pick an object type.');
+      return;
+    }
+    const allowedActions = [...selectedActions];
+    if (allowedActions.length === 0) {
+      setError('Pick at least one allowed action.');
+      return;
+    }
+    const expiresAtMs = dateStringToEndOfDayMs(expiryDate);
+    if (!Number.isFinite(expiresAtMs) || expiresAtMs <= Date.now()) {
+      setError('Pick a future expiry date.');
+      return;
+    }
+
+    setError('');
+    setBusy(true);
+    const r = await crossTenant.offer(token, {
+      granteeTenantId,
+      granteeKind,
+      granteeUuid,
+      typeKey,
+      allowedActions,
+      expiresAtMs,
+    });
+    setBusy(false);
+    if (!r.ok) {
+      setError(r.error || 'Could not offer the grant.');
+      return;
+    }
+    toast.success('Grant offered');
+    onRefresh?.();
+    close();
+  };
+
+  return (
+    <EntityFormModal
+      title="Offer a cross-tenant grant"
+      description="Let another tenant's user or role reach into one of your object types, for a bounded set of actions until an expiry."
+      open
+      onClose={close}
+      onSubmit={onSubmit}
+      submitLabel="Offer grant"
+      busy={busy}
+      error={error}
+    >
+      <div className="space-y-1.5">
+        <Label htmlFor="grant-tenant" variant="field">
+          Grantee tenant
+        </Label>
+        <SearchableSelect
+          value={granteeTenantId}
+          selectedLabel={granteeTenantLabel}
+          onChange={onTenantChange}
+          onLabelChange={setGranteeTenantLabel}
+          fetchPage={fetchTenants}
+          placeholder="Select a tenant"
+          searchPlaceholder="Search tenants"
+        />
+      </div>
+
+      <div className="space-y-1.5">
+        <Label variant="field">Grant to</Label>
+        <div className="flex gap-2">
+          <Button
+            type="button"
+            variant={granteeKind === 'user' ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => onKindChange('user')}
+          >
+            User
+          </Button>
+          <Button
+            type="button"
+            variant={granteeKind === 'role' ? 'default' : 'outline'}
+            size="sm"
+            onClick={() => onKindChange('role')}
+          >
+            Role
+          </Button>
+        </div>
+      </div>
+
+      <div className="space-y-1.5">
+        <Label htmlFor="grant-grantee" variant="field">
+          {granteeKind === 'role' ? 'Role' : 'User'}
+        </Label>
+        <SearchableSelect
+          key={`${granteeTenantId ?? ''}:${granteeKind}`}
+          value={granteeUuid}
+          selectedLabel={granteeLabel}
+          onChange={setGranteeUuid}
+          onLabelChange={setGranteeLabel}
+          fetchPage={fetchGrantees}
+          placeholder={granteeKind === 'role' ? 'Select a role' : 'Select a user'}
+          searchPlaceholder={granteeKind === 'role' ? 'Search roles' : 'Search users'}
+        />
+      </div>
+
+      <div className="space-y-1.5">
+        <Label htmlFor="grant-type" variant="field">
+          Object type
+        </Label>
+        <Select value={typeKey} onValueChange={onTypeChange} disabled={typesLoading || types.length === 0}>
+          <SelectTrigger id="grant-type">
+            <SelectValue placeholder={typesLoading ? 'Loading…' : 'Select an object type'} />
+          </SelectTrigger>
+          <SelectContent>
+            {types.map((t) => (
+              <SelectItem key={t.typeKey} value={t.typeKey}>
+                {t.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        {!typesLoading && types.length === 0 && (
+          <p className="text-xs text-muted-foreground">No object types are available to offer yet.</p>
+        )}
+      </div>
+
+      {currentType && (
+        <div className="space-y-1.5">
+          <Label variant="field">Allowed actions</Label>
+          <div className="flex flex-col gap-2">
+            {currentType.actions.map((action) => (
+              <label key={action} className="flex items-center gap-2 text-sm">
+                <Checkbox
+                  checked={selectedActions.has(action)}
+                  onCheckedChange={() => toggleAction(action)}
+                />
+                <span className="capitalize">{action}</span>
+              </label>
+            ))}
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Pick at least one. The grantee can never do more than this explicit set.
+          </p>
+        </div>
+      )}
+
+      <div className="space-y-1.5">
+        <Label htmlFor="grant-expiry" variant="field">
+          Expires on
+        </Label>
+        <DateField
+          id="grant-expiry"
+          value={expiryDate}
+          onChange={(e) => setExpiryDate(e.target.value)}
+          min={new Date().toISOString().slice(0, 10)}
+        />
+        <p className="text-xs text-muted-foreground">
+          Defaults to {DEFAULT_EXPIRY_DAYS} days out. The grant must have a future expiry — no
+          perpetual grants.
+        </p>
+      </div>
+    </EntityFormModal>
+  );
+}

package/template/frontend/src/pages/cross-tenant/GrantsPage.jsx

@@ -0,0 +1,237 @@
+/**
+ * GrantsPage — my tenant's cross-tenant grant book: the OUTGOING grants my tenant OWNS
+ * (any status) + the INCOMING grants ACCEPTED into my tenant. Mirrors the shared
+ * identity-admin list shape (AppShell + PageHeader + a controlled `EntityList`), plus
+ * an `<Outlet context={{ onRefresh }} />` for the routed-modal offer form at
+ * `/cross-tenant/offer`.
+ *
+ * Two lists on one page (both server-scoped to MY tenant, never a client-chosen
+ * tenant): "Outgoing" (rows, any status — Revoke available while not already revoked)
+ * and "Incoming" (accepted grants reaching INTO my tenant — read-only here; the grantee
+ * side manages acceptance from the Inbox page).
+ *
+ * ⛔ No raw UUIDs: every column renders a resolved NAME/label (grantee tenant/user/role
+ * name, type label, offeredBy name); `row.uuid` is a key/API-arg only.
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Outlet, useNavigate } from 'react-router-dom';
+import { Handshake, Inbox } from 'lucide-react';
+import { toast } from 'sonner';
+import { useAuth } from '@/auth/AuthContext';
+import AppShell from '@/shell/AppShell';
+import PageHeader from '@/components/PageHeader';
+import EntityList, { EntityListControls } from '@/components/EntityList';
+import ConfirmDialog from '@/components/ConfirmDialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+
+/** Compact absolute date — e.g. "13 Jul 2026"; '—' when missing/invalid. */
+function formatDate(ms) {
+  if (!ms && ms !== 0) return '—';
+  const d = new Date(ms);
+  if (Number.isNaN(d.getTime())) return '—';
+  return d.toLocaleDateString(undefined, { day: 'numeric', month: 'short', year: 'numeric' });
+}
+
+function statusVariant(status) {
+  if (status === 'accepted') return 'success';
+  if (status === 'revoked') return 'destructive';
+  return 'info'; // 'offered'
+}
+
+function ActionChips({ actions }) {
+  if (!actions || actions.length === 0) return <span className="text-xs text-muted-foreground">—</span>;
+  return (
+    <div className="flex flex-wrap gap-1">
+      {actions.map((a) => (
+        <Badge key={a} variant="secondary" className="font-normal">
+          {a}
+        </Badge>
+      ))}
+    </div>
+  );
+}
+
+export default function GrantsPage() {
+  const { tokens, crossTenant } = useAuth();
+  const token = tokens?.accessToken;
+  const navigate = useNavigate();
+
+  const [rows, setRows] = useState([]);
+  const [incoming, setIncoming] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  const [revokeTarget, setRevokeTarget] = useState(null);
+  const [revokeBusy, setRevokeBusy] = useState(false);
+
+  // Abort a superseded list request (rapid refreshes) — mirrors UsersPage/AuditPage.
+  const loadAbortRef = useRef(/** @type {AbortController | null} */ (null));
+
+  const load = useCallback(async () => {
+    if (!token) return;
+    loadAbortRef.current?.abort();
+    const controller = new AbortController();
+    loadAbortRef.current = controller;
+
+    setLoading(true);
+    const r = await crossTenant.listGrants(token, { signal: controller.signal });
+
+    if (controller.signal.aborted || loadAbortRef.current !== controller) return;
+
+    if (r.ok) {
+      setRows(r.rows || []);
+      setIncoming(r.incoming || []);
+      setError('');
+    } else {
+      setRows([]);
+      setIncoming([]);
+      setError(r.error || 'Could not load your cross-tenant grants.');
+    }
+    setLoading(false);
+  }, [crossTenant, token]);
+
+  useEffect(() => {
+    load();
+    return () => loadAbortRef.current?.abort();
+  }, [load]);
+
+  const onConfirmRevoke = async () => {
+    if (!revokeTarget) return;
+    setRevokeBusy(true);
+    const r = await crossTenant.revoke(token, revokeTarget.uuid);
+    setRevokeBusy(false);
+    if (!r.ok) {
+      toast.error(r.error || 'Could not revoke the grant.');
+      return;
+    }
+    setRevokeTarget(null);
+    toast.success('Grant revoked');
+    await load();
+  };
+
+  const outgoingColumns = [
+    {
+      key: 'granteeTenantName',
+      label: 'Grantee tenant',
+      render: (row) => <span className="font-medium text-foreground">{row.granteeTenantName}</span>,
+    },
+    {
+      key: 'granteeName',
+      label: 'Grantee',
+      render: (row) => (
+        <span>
+          {row.granteeName}{' '}
+          <span className="text-xs text-muted-foreground">({row.granteeKind})</span>
+        </span>
+      ),
+    },
+    { key: 'typeLabel', label: 'Object type' },
+    { key: 'actions', label: 'Actions', render: (row) => <ActionChips actions={row.allowedActions} /> },
+    {
+      key: 'status',
+      label: 'Status',
+      render: (row) => (
+        <Badge variant={statusVariant(row.status)} className="font-normal capitalize">
+          {row.status}
+        </Badge>
+      ),
+    },
+    { key: 'expiresAtMs', label: 'Expires', render: (row) => formatDate(row.expiresAtMs) },
+    { key: 'offeredByName', label: 'Offered by' },
+    {
+      key: 'rowActions',
+      label: '',
+      render: (row) =>
+        row.status !== 'revoked' ? (
+          <div className="flex justify-end">
+            <Button
+              type="button"
+              variant="ghost"
+              size="sm"
+              className="text-destructive hover:bg-destructive/10 hover:text-destructive"
+              onClick={() => setRevokeTarget(row)}
+            >
+              Revoke
+            </Button>
+          </div>
+        ) : null,
+    },
+  ];
+
+  const incomingColumns = [
+    {
+      key: 'owningTenantName',
+      label: 'Owning tenant',
+      render: (row) => <span className="font-medium text-foreground">{row.owningTenantName}</span>,
+    },
+    {
+      key: 'granteeName',
+      label: 'Granted to',
+      render: (row) => (
+        <span>
+          {row.granteeName}{' '}
+          <span className="text-xs text-muted-foreground">({row.granteeKind})</span>
+        </span>
+      ),
+    },
+    { key: 'typeLabel', label: 'Object type' },
+    { key: 'actions', label: 'Actions', render: (row) => <ActionChips actions={row.allowedActions} /> },
+    { key: 'expiresAtMs', label: 'Expires', render: (row) => formatDate(row.expiresAtMs) },
+    { key: 'offeredByName', label: 'Offered by' },
+  ];
+
+  return (
+    <AppShell section="Identity" title="Cross-tenant grants">
+      <div className="p-4">
+        <PageHeader
+          section="Identity"
+          title="Cross-tenant grants"
+          icon={Handshake}
+          actions={
+            <>
+              <Button type="button" variant="outline" size="sm" onClick={() => navigate('/cross-tenant/inbox')}>
+                <Inbox className="size-4" />
+                Inbox
+              </Button>
+              <EntityListControls addLabel="Offer grant" onAdd={() => navigate('/cross-tenant/offer')} />
+            </>
+          }
+        />
+
+        <div className="mb-2 text-sm font-medium text-foreground">Outgoing — grants you&apos;ve offered</div>
+        <EntityList
+          columns={outgoingColumns}
+          rows={rows}
+          loading={loading}
+          error={error}
+          emptyLabel="You haven't offered any cross-tenant grants yet."
+        />
+
+        <div className="mt-6 mb-2 text-sm font-medium text-foreground">
+          Incoming — grants accepted into your tenant
+        </div>
+        <EntityList
+          columns={incomingColumns}
+          rows={incoming}
+          loading={loading}
+          error={error}
+          emptyLabel="No cross-tenant grants have been accepted into your tenant."
+        />
+      </div>
+
+      <Outlet context={{ onRefresh: load }} />
+
+      <ConfirmDialog
+        open={!!revokeTarget}
+        title={revokeTarget ? `Revoke the grant to “${revokeTarget.granteeTenantName}”?` : 'Revoke grant?'}
+        message="This immediately revokes the grant. The grantee tenant will lose access. This cannot be undone."
+        confirmLabel="Revoke"
+        destructive
+        busy={revokeBusy}
+        onConfirm={onConfirmRevoke}
+        onCancel={() => setRevokeTarget(null)}
+      />
+    </AppShell>
+  );
+}