initial commit after split
This commit is contained in:
160
webui/src/features/campaigns/components/CampaignAccessCard.tsx
Normal file
160
webui/src/features/campaigns/components/CampaignAccessCard.tsx
Normal file
@@ -0,0 +1,160 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import type { ApiSettings, CampaignListItem } from "../../../types";
|
||||
import {
|
||||
getCampaignShares,
|
||||
getCampaignShareTargets,
|
||||
revokeCampaignShare,
|
||||
updateCampaignOwner,
|
||||
upsertCampaignShare,
|
||||
type CampaignShare,
|
||||
type CampaignShareTargets
|
||||
} from "../../../api/campaigns";
|
||||
import Button from "../../../components/Button";
|
||||
import Card from "../../../components/Card";
|
||||
import ConfirmDialog from "../../../components/ConfirmDialog";
|
||||
import DataGrid, { type DataGridColumn } from "../../../components/table/DataGrid";
|
||||
import Dialog from "../../../components/Dialog";
|
||||
import FormField from "../../../components/FormField";
|
||||
import StatusBadge from "../../../components/StatusBadge";
|
||||
|
||||
type TargetType = "user" | "group";
|
||||
|
||||
export default function CampaignAccessCard({
|
||||
settings,
|
||||
campaign,
|
||||
onChanged,
|
||||
onError
|
||||
}: {
|
||||
settings: ApiSettings;
|
||||
campaign: CampaignListItem;
|
||||
onChanged: () => Promise<void>;
|
||||
onError: (message: string) => void;
|
||||
}) {
|
||||
const [available, setAvailable] = useState<boolean | null>(null);
|
||||
const [targets, setTargets] = useState<CampaignShareTargets>({ users: [], groups: [] });
|
||||
const [shares, setShares] = useState<CampaignShare[]>([]);
|
||||
const [ownerOpen, setOwnerOpen] = useState(false);
|
||||
const [shareOpen, setShareOpen] = useState(false);
|
||||
const [revokeTarget, setRevokeTarget] = useState<CampaignShare | null>(null);
|
||||
const [ownerType, setOwnerType] = useState<TargetType>(campaign.owner_group_id ? "group" : "user");
|
||||
const [ownerId, setOwnerId] = useState(campaign.owner_group_id || campaign.owner_user_id || "");
|
||||
const [shareType, setShareType] = useState<TargetType>("user");
|
||||
const [shareTargetId, setShareTargetId] = useState("");
|
||||
const [sharePermission, setSharePermission] = useState<"read" | "write">("read");
|
||||
const [busy, setBusy] = useState(false);
|
||||
|
||||
async function load() {
|
||||
try {
|
||||
const [nextTargets, nextShares] = await Promise.all([
|
||||
getCampaignShareTargets(settings, campaign.id),
|
||||
getCampaignShares(settings, campaign.id)
|
||||
]);
|
||||
setTargets(nextTargets);
|
||||
setShares(nextShares.filter((item) => !item.revoked_at));
|
||||
setAvailable(true);
|
||||
} catch (err) {
|
||||
const message = err instanceof Error ? err.message : String(err);
|
||||
if (message.startsWith("403 ")) setAvailable(false);
|
||||
else onError(message);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setOwnerType(campaign.owner_group_id ? "group" : "user");
|
||||
setOwnerId(campaign.owner_group_id || campaign.owner_user_id || "");
|
||||
void load();
|
||||
}, [campaign.id, campaign.owner_group_id, campaign.owner_user_id, settings.accessToken, settings.apiBaseUrl]);
|
||||
|
||||
const targetOptions = ownerType === "user" ? targets.users : targets.groups;
|
||||
const shareTargetOptions = shareType === "user" ? targets.users : targets.groups;
|
||||
const targetMap = useMemo(() => new Map([
|
||||
...targets.users.map((item) => [`user:${item.id}`, item] as const),
|
||||
...targets.groups.map((item) => [`group:${item.id}`, item] as const)
|
||||
]), [targets]);
|
||||
|
||||
const ownerLabel = campaign.owner_group_id
|
||||
? targetMap.get(`group:${campaign.owner_group_id}`)?.name || "Group owner"
|
||||
: targetMap.get(`user:${campaign.owner_user_id || ""}`)?.name || "User owner";
|
||||
|
||||
async function saveOwner() {
|
||||
if (!ownerId) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
await updateCampaignOwner(settings, campaign.id, ownerType === "user"
|
||||
? { owner_user_id: ownerId, owner_group_id: null }
|
||||
: { owner_user_id: null, owner_group_id: ownerId });
|
||||
setOwnerOpen(false);
|
||||
await onChanged();
|
||||
await load();
|
||||
} catch (err) { onError(err instanceof Error ? err.message : String(err)); }
|
||||
finally { setBusy(false); }
|
||||
}
|
||||
|
||||
async function saveShare() {
|
||||
if (!shareTargetId) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
await upsertCampaignShare(settings, campaign.id, { target_type: shareType, target_id: shareTargetId, permission: sharePermission });
|
||||
setShareOpen(false);
|
||||
setShareTargetId("");
|
||||
await load();
|
||||
} catch (err) { onError(err instanceof Error ? err.message : String(err)); }
|
||||
finally { setBusy(false); }
|
||||
}
|
||||
|
||||
async function revoke() {
|
||||
if (!revokeTarget) return;
|
||||
setBusy(true);
|
||||
try {
|
||||
await revokeCampaignShare(settings, campaign.id, revokeTarget.id);
|
||||
setRevokeTarget(null);
|
||||
await load();
|
||||
} catch (err) { onError(err instanceof Error ? err.message : String(err)); }
|
||||
finally { setBusy(false); }
|
||||
}
|
||||
|
||||
const columns = useMemo<DataGridColumn<CampaignShare>[]>(() => [
|
||||
{
|
||||
id: "target",
|
||||
header: "Shared with",
|
||||
width: "minmax(220px, 1fr)",
|
||||
minWidth: 190,
|
||||
resizable: true,
|
||||
sticky: "start",
|
||||
sortable: true,
|
||||
filterable: true,
|
||||
value: (row) => targetMap.get(`${row.target_type}:${row.target_id}`)?.name || row.target_id,
|
||||
render: (row) => {
|
||||
const target = targetMap.get(`${row.target_type}:${row.target_id}`);
|
||||
return <div><strong>{target?.name || row.target_id}</strong><div className="muted small-note">{row.target_type}{target?.secondary ? ` · ${target.secondary}` : ""}</div></div>;
|
||||
}
|
||||
},
|
||||
{ id: "permission", header: "Access", width: 120, resizable: false, sortable: true, filterable: true, value: (row) => row.permission, render: (row) => <StatusBadge status={row.permission === "write" ? "active" : "built"} label={row.permission === "write" ? "Can edit" : "Can view"} /> },
|
||||
{ id: "actions", header: "Actions", width: 110, resizable: false, sticky: "end", align: "right", render: (row) => <Button variant="danger" onClick={() => setRevokeTarget(row)}>Remove</Button> }
|
||||
], [targetMap]);
|
||||
|
||||
if (available === false) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card title="Ownership and sharing" actions={<div className="button-row compact-actions"><Button onClick={() => setOwnerOpen(true)} disabled={available !== true}>Change owner</Button><Button onClick={() => setShareOpen(true)} disabled={available !== true}>Share</Button></div>}>
|
||||
<p><strong>Owner:</strong> {ownerLabel}</p>
|
||||
<p className="muted small-note">Permissions define what a role may do; ownership and explicit shares determine which campaigns that permission applies to.</p>
|
||||
<DataGrid id={`campaign-${campaign.id}-shares`} rows={shares} columns={columns} getRowKey={(row) => row.id} emptyText={available === null ? "Loading campaign access…" : "This campaign has no explicit shares."} />
|
||||
</Card>
|
||||
|
||||
<Dialog open={ownerOpen} title="Change campaign owner" onClose={() => !busy && setOwnerOpen(false)} footer={<><Button onClick={() => setOwnerOpen(false)} disabled={busy}>Cancel</Button><Button variant="primary" onClick={() => void saveOwner()} disabled={busy || !ownerId}>Save owner</Button></>}>
|
||||
<FormField label="Owner type"><select value={ownerType} onChange={(event) => { const next = event.target.value as TargetType; setOwnerType(next); setOwnerId((next === "user" ? targets.users : targets.groups)[0]?.id || ""); }}><option value="user">User</option><option value="group">Group</option></select></FormField>
|
||||
<FormField label="Owner"><select value={ownerId} onChange={(event) => setOwnerId(event.target.value)}>{targetOptions.map((item) => <option key={item.id} value={item.id}>{item.name}{item.secondary ? ` · ${item.secondary}` : ""}</option>)}</select></FormField>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={shareOpen} title="Share campaign" onClose={() => !busy && setShareOpen(false)} footer={<><Button onClick={() => setShareOpen(false)} disabled={busy}>Cancel</Button><Button variant="primary" onClick={() => void saveShare()} disabled={busy || !shareTargetId}>Save share</Button></>}>
|
||||
<FormField label="Target type"><select value={shareType} onChange={(event) => { const next = event.target.value as TargetType; setShareType(next); setShareTargetId((next === "user" ? targets.users : targets.groups)[0]?.id || ""); }}><option value="user">User</option><option value="group">Group</option></select></FormField>
|
||||
<FormField label="User or group"><select value={shareTargetId} onChange={(event) => setShareTargetId(event.target.value)}><option value="">Select…</option>{shareTargetOptions.map((item) => <option key={item.id} value={item.id}>{item.name}{item.secondary ? ` · ${item.secondary}` : ""}</option>)}</select></FormField>
|
||||
<FormField label="Access"><select value={sharePermission} onChange={(event) => setSharePermission(event.target.value as "read" | "write")}><option value="read">Can view</option><option value="write">Can edit and operate</option></select></FormField>
|
||||
</Dialog>
|
||||
|
||||
<ConfirmDialog open={Boolean(revokeTarget)} title="Remove campaign share" message="Remove this user's or group's explicit access to the campaign? Ownership and other group shares still apply." confirmLabel="Remove share" tone="danger" busy={busy} onCancel={() => setRevokeTarget(null)} onConfirm={() => void revoke()} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user