create-astram-app 0.3.0 → 0.5.0

package/template/frontend/src/pages/access/RecordPoliciesPage.jsx

@@ -0,0 +1,390 @@
+/**
+ * RecordPoliciesPage — the GUIDED RULE-BUILDER (§9.1 / list-scoping engine Phase 5).
+ *
+ * Author record-access policies through a STRUCTURED, no-code form — never a raw expression:
+ *   pick object type → load its schema → pick action + effect → add conditions
+ *   (field dropdown → operator dropdown VALID for that field's type → value input typed per
+ *   operator) → Save. The current policies for the selected type are listed with delete-confirm.
+ *
+ * ⛔ The field/operator dropdowns come from the SERVER schema
+ * (`GET /identity/record-policies/schema`), so the builder can only compose combinations the
+ * server accepts — one source of truth, no client-side operator table. The server re-validates
+ * (`validateGuidedPolicy`) and enforces the delegated-admin ceiling on save.
+ * ⛔ The target TENANT is never sent — the server authors in the caller's own tenant.
+ * ⛔ No raw UUID is shown — `policyId` is a delete key only.
+ */
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { ShieldCheck, Plus, Trash2, Info } from 'lucide-react';
+import { toast } from 'sonner';
+import { useAuth } from '@/auth/AuthContext';
+import AppShell from '@/shell/AppShell';
+import PageHeader from '@/components/PageHeader';
+import EntityList from '@/components/EntityList';
+import ConfirmDialog from '@/components/ConfirmDialog';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
+/** The object types this app lets an admin author policies for. Extend as the app grows. */
+const AUTHORABLE_TYPES = ['note'];
+
+/** Human labels for the closed operator set. */
+const OPERATOR_LABELS = {
+  eq: 'equals',
+  ne: 'does not equal',
+  in: 'is any of',
+  not_in: 'is none of',
+  gt: 'is greater than',
+  lt: 'is less than',
+  gte: 'is at least',
+  lte: 'is at most',
+  contains: 'contains',
+  not_contains: 'does not contain',
+  is_null: 'is empty',
+  is_not_null: 'is not empty',
+};
+
+/** A fresh, empty condition row. */
+const emptyCondition = () => ({ field: '', operator: '', value: '' });
+
+export default function RecordPoliciesPage() {
+  const { tokens, recordPolicy } = useAuth();
+  const token = tokens?.accessToken;
+
+  const [typeKey, setTypeKey] = useState(AUTHORABLE_TYPES[0] ?? '');
+  const [schema, setSchema] = useState(null);
+  const [policies, setPolicies] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  // The in-progress policy being built.
+  const [action, setAction] = useState('');
+  const [effect, setEffect] = useState('allow');
+  const [conditions, setConditions] = useState([emptyCondition()]);
+  const [saving, setSaving] = useState(false);
+
+  const [deleteTarget, setDeleteTarget] = useState(null);
+  const [deleteBusy, setDeleteBusy] = useState(false);
+
+  const fieldsByKey = useMemo(() => {
+    const m = new Map();
+    for (const f of schema?.fields ?? []) m.set(f.key, f);
+    return m;
+  }, [schema]);
+
+  const load = useCallback(async () => {
+    if (!token || !typeKey) return;
+    setLoading(true);
+    const [s, p] = await Promise.all([
+      recordPolicy.schema(token, typeKey),
+      recordPolicy.list(token, typeKey),
+    ]);
+    if (s.ok) {
+      setSchema(s.schema);
+      // Default the action to the type's first action.
+      setAction((prev) => prev || s.schema.actions?.[0] || '');
+      setError('');
+    } else {
+      setSchema(null);
+      setError(s.error || 'Could not load the policy schema for this type.');
+    }
+    setPolicies(p.ok ? p.policies : []);
+    setLoading(false);
+  }, [recordPolicy, token, typeKey]);
+
+  useEffect(() => {
+    load();
+  }, [load]);
+
+  // Reset the builder when the type changes (fields/actions differ per type).
+  useEffect(() => {
+    setAction('');
+    setConditions([emptyCondition()]);
+  }, [typeKey]);
+
+  const setCondition = (i, patch) =>
+    setConditions((cs) => cs.map((c, idx) => (idx === i ? { ...c, ...patch } : c)));
+  const addCondition = () => setConditions((cs) => [...cs, emptyCondition()]);
+  const removeCondition = (i) =>
+    setConditions((cs) => (cs.length <= 1 ? cs : cs.filter((_, idx) => idx !== i)));
+
+  const onSave = async () => {
+    if (!action) {
+      toast.error('Pick an action.');
+      return;
+    }
+    // Build the structured conditions, dropping incomplete rows; a nullary op needs no value.
+    const built = [];
+    for (const c of conditions) {
+      if (!c.field || !c.operator) continue;
+      const fieldSchema = fieldsByKey.get(c.field);
+      const isNullary = fieldSchema?.nullaryOperators?.includes(c.operator);
+      const isArray = fieldSchema?.arrayOperators?.includes(c.operator);
+      if (isNullary) {
+        built.push({ field: c.field, operator: c.operator });
+      } else if (isArray) {
+        const values = String(c.value ?? '')
+          .split(',')
+          .map((v) => v.trim())
+          .filter(Boolean);
+        built.push({ field: c.field, operator: c.operator, value: values });
+      } else {
+        built.push({ field: c.field, operator: c.operator, value: c.value });
+      }
+    }
+
+    setSaving(true);
+    const r = await recordPolicy.author(token, { typeKey, action, effect, conditions: built });
+    setSaving(false);
+    if (!r.ok) {
+      toast.error(r.error || 'Could not author the policy.');
+      return;
+    }
+    toast.success('Policy authored');
+    setConditions([emptyCondition()]);
+    await load();
+  };
+
+  const onConfirmDelete = async () => {
+    if (!deleteTarget) return;
+    setDeleteBusy(true);
+    const r = await recordPolicy.remove(token, deleteTarget.policyId);
+    setDeleteBusy(false);
+    if (!r.ok) {
+      toast.error(r.error || 'Could not delete the policy.');
+      return;
+    }
+    setDeleteTarget(null);
+    toast.success('Policy deleted');
+    await load();
+  };
+
+  // Render one policy as a human sentence: "allow read where branch equals north AND …".
+  const describe = (policy) => {
+    const parts = (policy.conditions ?? []).map((c) => {
+      const label = OPERATOR_LABELS[c.operator] ?? c.operator;
+      const val = Array.isArray(c.value) ? c.value.join(', ') : c.value;
+      const isNullary = c.operator === 'is_null' || c.operator === 'is_not_null';
+      return `${c.field} ${label}${isNullary ? '' : ` ${val}`}`;
+    });
+    const where = parts.length ? ` where ${parts.join(' AND ')}` : ' (all records)';
+    return `${policy.effect} ${policy.action}${where}`;
+  };
+
+  const policyColumns = [
+    {
+      key: 'effect',
+      label: 'Effect',
+      render: (row) => (
+        <Badge variant={row.policy.effect === 'deny' ? 'destructive' : 'success'} className="capitalize font-normal">
+          {row.policy.effect}
+        </Badge>
+      ),
+    },
+    { key: 'action', label: 'Action', render: (row) => row.policy.action },
+    { key: 'rule', label: 'Rule', render: (row) => <span className="text-sm">{describe(row.policy)}</span> },
+    {
+      key: 'rowActions',
+      label: '',
+      render: (row) => (
+        <div className="flex justify-end">
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            className="text-destructive hover:bg-destructive/10 hover:text-destructive"
+            onClick={() => setDeleteTarget(row)}
+          >
+            <Trash2 className="size-4" />
+            Delete
+          </Button>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <AppShell section="Identity" title="Record policies">
+      <div className="p-4">
+        <PageHeader section="Identity" title="Record policies" icon={ShieldCheck} />
+
+        {/* Type picker */}
+        <div className="mb-6 flex flex-wrap items-end gap-3">
+          <div className="space-y-1">
+            <Label htmlFor="policy-type">Object type</Label>
+            <Select value={typeKey} onValueChange={setTypeKey}>
+              <SelectTrigger id="policy-type" className="w-48">
+                <SelectValue placeholder="Pick a type" />
+              </SelectTrigger>
+              <SelectContent>
+                {AUTHORABLE_TYPES.map((t) => (
+                  <SelectItem key={t} value={t}>
+                    {t}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        {/* The guided builder */}
+        {schema && (
+          <div className="mb-8 rounded-lg border border-border bg-card p-4">
+            <div className="mb-4 text-sm font-medium text-foreground">Build a rule</div>
+
+            <div className="mb-4 flex flex-wrap items-end gap-3">
+              <div className="space-y-1">
+                <Label htmlFor="policy-effect">Effect</Label>
+                <Select value={effect} onValueChange={setEffect}>
+                  <SelectTrigger id="policy-effect" className="w-36">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="allow">Allow</SelectItem>
+                    <SelectItem value="deny">Deny</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+              <div className="space-y-1">
+                <Label htmlFor="policy-action">Action</Label>
+                <Select value={action} onValueChange={setAction}>
+                  <SelectTrigger id="policy-action" className="w-40">
+                    <SelectValue placeholder="Pick an action" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {(schema.actions ?? []).map((a) => (
+                      <SelectItem key={a} value={a}>
+                        {a}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+
+            <div className="mb-2 text-xs font-medium uppercase tracking-wide text-muted-foreground">
+              Where (all conditions must match)
+            </div>
+            <div className="space-y-2">
+              {conditions.map((c, i) => {
+                const fieldSchema = fieldsByKey.get(c.field);
+                const validOps = fieldSchema?.validOperators ?? [];
+                const isNullary = fieldSchema?.nullaryOperators?.includes(c.operator);
+                const isArray = fieldSchema?.arrayOperators?.includes(c.operator);
+                const isContains = c.operator === 'contains' || c.operator === 'not_contains';
+                return (
+                  <div key={i} className="flex flex-wrap items-center gap-2">
+                    {/* Field */}
+                    <Select
+                      value={c.field}
+                      onValueChange={(field) => setCondition(i, { field, operator: '', value: '' })}
+                    >
+                      <SelectTrigger className="w-40">
+                        <SelectValue placeholder="Field" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {(schema.fields ?? []).map((f) => (
+                          <SelectItem key={f.key} value={f.key}>
+                            {f.label}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+
+                    {/* Operator — only those VALID for the chosen field's type */}
+                    <Select
+                      value={c.operator}
+                      onValueChange={(operator) => setCondition(i, { operator, value: '' })}
+                      disabled={!c.field}
+                    >
+                      <SelectTrigger className="w-44">
+                        <SelectValue placeholder="Operator" />
+                      </SelectTrigger>
+                      <SelectContent>
+                        {validOps.map((op) => (
+                          <SelectItem key={op} value={op}>
+                            {OPERATOR_LABELS[op] ?? op}
+                          </SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+
+                    {/* Value — hidden for nullary ops; a comma list hint for array ops */}
+                    {!isNullary && (
+                      <Input
+                        className="w-56"
+                        placeholder={isArray ? 'value1, value2, …' : 'value'}
+                        value={c.value ?? ''}
+                        onChange={(e) => setCondition(i, { value: e.target.value })}
+                        disabled={!c.operator}
+                      />
+                    )}
+
+                    <Button
+                      type="button"
+                      variant="ghost"
+                      size="icon"
+                      onClick={() => removeCondition(i)}
+                      disabled={conditions.length <= 1}
+                      aria-label="Remove condition"
+                    >
+                      <Trash2 className="size-4" />
+                    </Button>
+
+                    {isContains && (
+                      <span className="inline-flex items-center gap-1 text-xs text-amber-600 dark:text-amber-500">
+                        <Info className="size-3.5" />
+                        “contains” is not index-friendly on large tables.
+                      </span>
+                    )}
+                  </div>
+                );
+              })}
+            </div>
+
+            <div className="mt-3 flex items-center gap-2">
+              <Button type="button" variant="outline" size="sm" onClick={addCondition}>
+                <Plus className="size-4" />
+                Add condition
+              </Button>
+              <Button type="button" size="sm" onClick={onSave} disabled={saving}>
+                {saving ? 'Saving…' : 'Save policy'}
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Current policies */}
+        <div className="mb-2 text-sm font-medium text-foreground">
+          Current policies for “{typeKey}”
+        </div>
+        <EntityList
+          columns={policyColumns}
+          rows={policies}
+          loading={loading}
+          error={error}
+          emptyLabel="No record policies yet — build one above."
+        />
+      </div>
+
+      <ConfirmDialog
+        open={!!deleteTarget}
+        title="Delete this record policy?"
+        message="This removes the rule. Access to matching records reverts to the remaining policies. This cannot be undone."
+        confirmLabel="Delete"
+        destructive
+        busy={deleteBusy}
+        onConfirm={onConfirmDelete}
+        onCancel={() => setDeleteTarget(null)}
+      />
+    </AppShell>
+  );
+}

package/template/frontend/src/pages/service-accounts/KeyRevealDialog.jsx

@@ -0,0 +1,104 @@
+/**
+ * KeyRevealDialog — the ONE-TIME reveal of a freshly issued/rotated service-account API key
+ * (ADR-0033). The raw `ask_…` key exists on the client only right after issue/rotate and is NEVER
+ * retrievable again, so this modal makes the operator copy it before dismissing.
+ *
+ * Controlled: the parent passes the `IssuedKey` (or null to close). The key is shown in a read-only
+ * field with a Copy button; a prominent warning states it won't be shown again. Closing is deliberate
+ * ("I've copied it") so it isn't dismissed by accident.
+ *
+ * ⛔ The key is a SECRET — it is only ever rendered here, never logged, never persisted client-side.
+ */
+import { useState } from 'react';
+import { toast } from 'sonner';
+import { KeyRound, Copy, Check, TriangleAlert } from 'lucide-react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+
+function formatExpiry(ms) {
+  if (!ms) return 'Never expires';
+  try {
+    return `Expires ${new Date(ms).toLocaleString()}`;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * @param {{ issued: import('@astram/frontend-core').IssuedKey | null, onClose: () => void }} props
+ *   `issued` — the one-time key payload, or null (closed). `onClose` — dismiss (after the operator
+ *   has copied the key).
+ */
+export default function KeyRevealDialog({ issued, onClose }) {
+  const [copied, setCopied] = useState(false);
+
+  const copy = async () => {
+    if (!issued) return;
+    try {
+      await navigator.clipboard.writeText(issued.apiKey);
+      setCopied(true);
+      toast.success('API key copied to clipboard');
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      toast.error('Could not copy — select the key and copy it manually.');
+    }
+  };
+
+  const close = () => {
+    setCopied(false);
+    onClose?.();
+  };
+
+  return (
+    <Dialog open={!!issued} onOpenChange={(next) => !next && close()}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <KeyRound className="h-5 w-5" />
+            API key for “{issued?.accountLabel}”
+          </DialogTitle>
+          <DialogDescription>
+            Copy this key now and store it somewhere safe. For your security, it will{' '}
+            <strong>never be shown again</strong> — if you lose it, rotate the key to get a new one.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex items-start gap-2 rounded-md border border-amber-300 bg-amber-50 p-3 text-sm text-amber-900 dark:border-amber-800/60 dark:bg-amber-950/40 dark:text-amber-200">
+          <TriangleAlert className="mt-0.5 h-4 w-4 shrink-0" />
+          <span>
+            Treat this like a password. Anyone with this key can act as this service account (within
+            its scope). {formatExpiry(issued?.expiresAtMs)} · Version {issued?.version}.
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Input
+            readOnly
+            value={issued?.apiKey ?? ''}
+            onFocus={(e) => e.target.select()}
+            className="font-mono text-xs"
+            aria-label="API key"
+          />
+          <Button type="button" variant="secondary" onClick={copy} className="shrink-0">
+            {copied ? <Check className="h-4 w-4" /> : <Copy className="h-4 w-4" />}
+            <span className="ml-1">{copied ? 'Copied' : 'Copy'}</span>
+          </Button>
+        </div>
+
+        <DialogFooter>
+          <Button type="button" onClick={close}>
+            I’ve copied it
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}