feat: implement governed cases workspace
This commit is contained in:
@@ -0,0 +1,240 @@
|
||||
import { Plus, Trash2 } from "lucide-react";
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
Button,
|
||||
Dialog,
|
||||
DismissibleAlert,
|
||||
FormField,
|
||||
IconButton,
|
||||
ReferenceSelect,
|
||||
ToggleSwitch,
|
||||
type ApiSettings
|
||||
} from "@govoplan/core-webui";
|
||||
import {
|
||||
caseShareTargetProvider,
|
||||
updateCase,
|
||||
type CaseGrant,
|
||||
type CaseRecord
|
||||
} from "../../api/cases";
|
||||
|
||||
|
||||
type TargetType = "user" | "group";
|
||||
type Permission = CaseGrant["permissions"][number];
|
||||
|
||||
export default function CaseShareDialog({
|
||||
settings,
|
||||
record,
|
||||
open,
|
||||
onClose,
|
||||
onSaved
|
||||
}: {
|
||||
settings: ApiSettings;
|
||||
record: CaseRecord;
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
onSaved: (record: CaseRecord) => void;
|
||||
}) {
|
||||
const [restricted, setRestricted] = useState(record.access_mode === "restricted");
|
||||
const [grants, setGrants] = useState<CaseGrant[]>(record.access_grants);
|
||||
const [targetType, setTargetType] = useState<TargetType>("user");
|
||||
const [targetId, setTargetId] = useState("");
|
||||
const [permission, setPermission] = useState<Permission>("read");
|
||||
const [changeReason, setChangeReason] = useState("");
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const targetProvider = useMemo(
|
||||
() => caseShareTargetProvider(settings, record.reference.object_id, targetType),
|
||||
[record.reference.object_id, settings, targetType]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
setRestricted(record.access_mode === "restricted");
|
||||
setGrants(record.access_grants);
|
||||
setTargetId("");
|
||||
setPermission("read");
|
||||
setChangeReason("");
|
||||
setError("");
|
||||
}, [open, record]);
|
||||
|
||||
const changed = restricted !== (record.access_mode === "restricted")
|
||||
|| JSON.stringify(grants) !== JSON.stringify(record.access_grants);
|
||||
|
||||
function addGrant() {
|
||||
const subjectId = targetId.trim();
|
||||
if (!subjectId) return;
|
||||
const subjectKind = targetType === "user" ? "account" : "group";
|
||||
setGrants((current) => [
|
||||
...current.filter(
|
||||
(item) => !(item.subject_kind === subjectKind && item.subject_id === subjectId)
|
||||
),
|
||||
{
|
||||
subject_kind: subjectKind,
|
||||
subject_id: subjectId,
|
||||
permissions: [permission]
|
||||
}
|
||||
]);
|
||||
setTargetId("");
|
||||
}
|
||||
|
||||
async function save() {
|
||||
if (!changed || !changeReason.trim()) return;
|
||||
setBusy(true);
|
||||
setError("");
|
||||
try {
|
||||
const saved = await updateCase(settings, record.reference.object_id, {
|
||||
expected_revision: record.revision,
|
||||
recorded_at: new Date().toISOString(),
|
||||
change_reason: changeReason.trim(),
|
||||
idempotency_key: crypto.randomUUID(),
|
||||
access_mode: restricted ? "restricted" : "tenant",
|
||||
access_grants: grants
|
||||
});
|
||||
onSaved(saved);
|
||||
onClose();
|
||||
} catch (reason) {
|
||||
setError(reason instanceof Error ? reason.message : "Case access could not be saved.");
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
open={open}
|
||||
title={`Case access - ${record.case_number}`}
|
||||
onClose={onClose}
|
||||
closeDisabled={busy}
|
||||
portal
|
||||
className="case-share-dialog"
|
||||
footer={
|
||||
<>
|
||||
<Button disabled={busy} onClick={onClose}>Cancel</Button>
|
||||
<Button
|
||||
variant="primary"
|
||||
disabled={busy || !changed || !changeReason.trim()}
|
||||
onClick={() => void save()}
|
||||
>
|
||||
{busy ? "Saving" : "Save access"}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="case-share-content">
|
||||
{error ? (
|
||||
<DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>
|
||||
) : null}
|
||||
<ToggleSwitch
|
||||
label="Case visibility"
|
||||
inactiveLabel="Tenant"
|
||||
activeLabel="Restricted"
|
||||
checked={restricted}
|
||||
disabled={busy}
|
||||
onChange={setRestricted}
|
||||
/>
|
||||
<p className="case-share-explanation">
|
||||
Tenant cases follow the Cases read permission. Restricted cases are visible only to
|
||||
their creator, case administrators, assigned functions or units, and the explicit
|
||||
grants below.
|
||||
</p>
|
||||
|
||||
<div className="case-share-add-row">
|
||||
<FormField label="Target type">
|
||||
<select
|
||||
value={targetType}
|
||||
disabled={busy}
|
||||
onChange={(event) => {
|
||||
setTargetType(event.target.value as TargetType);
|
||||
setTargetId("");
|
||||
}}
|
||||
>
|
||||
<option value="user">User</option>
|
||||
<option value="group">Group</option>
|
||||
</select>
|
||||
</FormField>
|
||||
<FormField label="Target">
|
||||
<ReferenceSelect
|
||||
value={targetId}
|
||||
onChange={setTargetId}
|
||||
provider={targetProvider}
|
||||
disabled={busy}
|
||||
placeholder={`Select a ${targetType}`}
|
||||
aria-label={`Case access ${targetType}`}
|
||||
/>
|
||||
</FormField>
|
||||
<FormField label="Permission">
|
||||
<select
|
||||
value={permission}
|
||||
disabled={busy}
|
||||
onChange={(event) => setPermission(event.target.value as Permission)}
|
||||
>
|
||||
<option value="read">Read</option>
|
||||
<option value="update">Update</option>
|
||||
<option value="share">Share</option>
|
||||
<option value="admin">Administer</option>
|
||||
</select>
|
||||
</FormField>
|
||||
<IconButton
|
||||
label="Add access grant"
|
||||
icon={<Plus size={16} />}
|
||||
variant="primary"
|
||||
disabled={busy || !targetId.trim()}
|
||||
onClick={addGrant}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="case-share-grants" aria-label="Explicit access grants">
|
||||
{grants.length === 0 ? (
|
||||
<p>No explicit access grants.</p>
|
||||
) : grants.map((grant) => (
|
||||
<div
|
||||
key={`${grant.subject_kind}:${grant.subject_id}`}
|
||||
className="case-share-grant"
|
||||
>
|
||||
<span>
|
||||
<strong>{humanize(grant.subject_kind)}</strong>
|
||||
{grant.subject_id}
|
||||
</span>
|
||||
<select
|
||||
aria-label={`Permission for ${grant.subject_id}`}
|
||||
value={grant.permissions[0] ?? "read"}
|
||||
disabled={busy}
|
||||
onChange={(event) => setGrants((current) => current.map((item) =>
|
||||
item === grant
|
||||
? { ...item, permissions: [event.target.value as Permission] }
|
||||
: item
|
||||
))}
|
||||
>
|
||||
<option value="read">Read</option>
|
||||
<option value="update">Update</option>
|
||||
<option value="share">Share</option>
|
||||
<option value="admin">Administer</option>
|
||||
</select>
|
||||
<IconButton
|
||||
label={`Remove access for ${grant.subject_id}`}
|
||||
icon={<Trash2 size={16} />}
|
||||
variant="danger"
|
||||
disabled={busy}
|
||||
onClick={() => setGrants((current) => current.filter((item) => item !== grant))}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<FormField label="Change reason">
|
||||
<input
|
||||
value={changeReason}
|
||||
disabled={busy}
|
||||
maxLength={1000}
|
||||
onChange={(event) => setChangeReason(event.target.value)}
|
||||
placeholder="Why is case access changing?"
|
||||
/>
|
||||
</FormField>
|
||||
</div>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
|
||||
function humanize(value: string): string {
|
||||
return value.replace(/[_:.-]+/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase());
|
||||
}
|
||||
Reference in New Issue
Block a user