Add diagram sharing/collaborators, version history, and view-only lockdown
Per organized-ideas.md §8. Backend tables/RLS (diagrams, diagram_collaborators, diagram_snapshots) already existed from an earlier phase — this is the frontend for them, plus two small backend additions. Backend (supabase/migrations/20260913000000_diagram_sharing.sql): - find_user_id_by_username(text): lets any authenticated user resolve a username to an id for "share with @username" — unlike general profile browsing (blocked by profiles_select_self_or_super_admin), a username is meant to be a shareable handle, so this is deliberately not gated. - diagram_collaborator_usernames / diagram_snapshot_saved_by_usernames: same pattern as the admin-review-queue phase's submitter-username lookup — batched per diagram, gated to "can you see this diagram at all" (reusing diagrams_select's own helper functions). - prune_diagram_snapshots trigger: keeps the 50 most recent snapshots per diagram, enforced at write time rather than a scheduled job (diagram_ snapshots has no update/delete policy for regular users at all). - 14 new pgTAP tests (52/52 total). Frontend: - DiagramCollaboratorRepository/store + DiagramSharingModal: add/remove collaborators by username, per-person view/edit permission, owner-only controls. - DiagramSnapshotRepository/store + VersionHistoryModal (its own top-bar button, not nested under Share — moved there after review): periodic checkpoints (one per 5 min of active editing) written as a side effect of normal saves, list + restore. - Restore's duplicate-snapshot problem: repeatedly jumping between old versions without editing in between was writing a near-duplicate safety snapshot on every jump. Fixed by having projectStore track which snapshot the diagram was last restored from and its updatedAt at that moment (touch() always advances updatedAt on a genuine edit) — a restore skips the safety snapshot when nothing has changed since the last one, and the tracking clears on any real edit so in-progress work stays protected. - DiagramRepository gains getAccess() (owner id + your own permission for the open diagram) — surfaced in projectStore as `access`. - View-only enforcement: FlowCanvas disables drag/connect/drop (nodesDraggable/nodesConnectable + guarded handlers), DeviceInspector/ ConnectionInspector wrap their controls in a disabled <fieldset>, DevicePalette disables adding devices to the canvas, TopBar disables the rename field, and a ViewOnlyBanner makes the restriction visible instead of leaving a collaborator to discover it as controls that just don't work. Autosave itself also refuses to write for a view-only user, as a backstop behind the UI-level lockdown. Verified: tsc -b and oxlint clean; supabase db reset + 52/52 pgTAP tests pass; confirmed find_user_id_by_username works through the real REST API via a live curl call (signup, confirm, resolve). Manually tested two- account sharing (view vs. edit), restoring history, and the duplicate- snapshot fix.
This commit is contained in:
@@ -0,0 +1,124 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import type { CollaboratorPermission } from '../../data/DiagramCollaboratorRepository'
|
||||
import { UnknownUsernameError } from '../../data/DiagramCollaboratorRepository'
|
||||
import { useDiagramCollaboratorStore } from '../../state/diagramCollaboratorStore'
|
||||
import { useProjectStore } from '../../state/projectStore'
|
||||
import Modal from '../common/Modal'
|
||||
|
||||
export default function DiagramSharingModal({ onClose }: { onClose: () => void }) {
|
||||
const project = useProjectStore((s) => s.project)
|
||||
const access = useProjectStore((s) => s.access)
|
||||
const isOwner = access?.myPermission === 'owner'
|
||||
const diagramId = project.id
|
||||
|
||||
const collaborators = useDiagramCollaboratorStore((s) => s.collaborators)
|
||||
const isLoaded = useDiagramCollaboratorStore((s) => s.isLoaded)
|
||||
const load = useDiagramCollaboratorStore((s) => s.load)
|
||||
const add = useDiagramCollaboratorStore((s) => s.add)
|
||||
const updatePermission = useDiagramCollaboratorStore((s) => s.updatePermission)
|
||||
const remove = useDiagramCollaboratorStore((s) => s.remove)
|
||||
|
||||
const [username, setUsername] = useState('')
|
||||
const [permission, setPermission] = useState<CollaboratorPermission>('view')
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
const [busy, setBusy] = useState(false)
|
||||
|
||||
useEffect(() => {
|
||||
load(diagramId)
|
||||
}, [diagramId, load])
|
||||
|
||||
const handleAdd = async () => {
|
||||
const trimmed = username.trim()
|
||||
if (!trimmed) return
|
||||
setError(null)
|
||||
setBusy(true)
|
||||
try {
|
||||
await add(diagramId, trimmed, permission)
|
||||
setUsername('')
|
||||
} catch (err) {
|
||||
setError(err instanceof UnknownUsernameError ? err.message : 'Could not add that person. Try again.')
|
||||
} finally {
|
||||
setBusy(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleRemove = (userId: string, name: string) => {
|
||||
const confirmed = window.confirm(`Remove "${name}" from this diagram? They'll immediately lose access.`)
|
||||
if (confirmed) remove(diagramId, userId)
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal title={`Share "${project.name}"`} onClose={onClose} width="max-w-md">
|
||||
<div className="space-y-3">
|
||||
{isOwner && (
|
||||
<div className="space-y-1.5 rounded border border-slate-200 bg-slate-50 p-2">
|
||||
<div className="flex gap-1.5">
|
||||
<input
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && handleAdd()}
|
||||
placeholder="Username"
|
||||
className="w-0 min-w-0 flex-1 rounded border border-slate-300 px-1.5 py-1 text-xs"
|
||||
/>
|
||||
<select
|
||||
value={permission}
|
||||
onChange={(e) => setPermission(e.target.value as CollaboratorPermission)}
|
||||
className="rounded border border-slate-300 px-1 py-1 text-xs"
|
||||
>
|
||||
<option value="view">Can view</option>
|
||||
<option value="edit">Can edit</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={handleAdd}
|
||||
disabled={busy || !username.trim()}
|
||||
className="shrink-0 rounded bg-indigo-600 px-2.5 py-1 text-xs font-medium text-white hover:bg-indigo-500 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
{error && <p className="text-[11px] text-red-600">{error}</p>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-1.5">
|
||||
{!isLoaded && <p className="py-2 text-center text-xs italic text-slate-400">Loading…</p>}
|
||||
{isLoaded && collaborators.length === 0 && (
|
||||
<p className="py-2 text-center text-xs italic text-slate-400">
|
||||
Not shared with anyone yet{isOwner ? ' — add someone above.' : '.'}
|
||||
</p>
|
||||
)}
|
||||
{collaborators.map((c) => (
|
||||
<div key={c.userId} className="flex items-center justify-between gap-2 rounded border border-slate-200 bg-white px-2 py-1.5 text-xs">
|
||||
<span className="font-medium text-slate-700">{c.username}</span>
|
||||
{isOwner ? (
|
||||
<div className="flex shrink-0 items-center gap-1.5">
|
||||
<select
|
||||
value={c.permission}
|
||||
onChange={(e) => updatePermission(diagramId, c.userId, e.target.value as CollaboratorPermission)}
|
||||
className="rounded border border-slate-300 px-1 py-1 text-[11px]"
|
||||
>
|
||||
<option value="view">Can view</option>
|
||||
<option value="edit">Can edit</option>
|
||||
</select>
|
||||
<button
|
||||
onClick={() => handleRemove(c.userId, c.username)}
|
||||
className="rounded bg-slate-100 px-2 py-1 text-[11px] font-medium text-slate-600 hover:bg-red-50 hover:text-red-600"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<span className="shrink-0 text-[11px] text-slate-400">{c.permission === 'edit' ? 'Can edit' : 'Can view'}</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex justify-end border-t border-slate-100 pt-3">
|
||||
<button onClick={onClose} className="rounded px-3 py-1.5 text-xs text-slate-600 hover:bg-slate-100">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user