Sync GovOPlaN module state
This commit is contained in:
377
webui/src/features/admin/ExternalFunctionRoleMappingsPanel.tsx
Normal file
377
webui/src/features/admin/ExternalFunctionRoleMappingsPanel.tsx
Normal file
@@ -0,0 +1,377 @@
|
||||
import { useEffect, useMemo, useRef, useState } from "react";
|
||||
import { Pencil, Plus, Trash2 } from "lucide-react";
|
||||
import type { ApiSettings, AuthInfo, OrganizationFunctionPickerUiCapability, OrganizationFunctionSelection } from "@govoplan/core-webui";
|
||||
import {
|
||||
createExternalFunctionRoleMapping,
|
||||
deleteExternalFunctionRoleMapping,
|
||||
fetchExternalFunctionRoleMappingsDelta,
|
||||
fetchRolesDelta,
|
||||
updateExternalFunctionRoleMapping,
|
||||
type ExternalFunctionRoleMappingItem,
|
||||
type RoleSummary
|
||||
} from "../../api/admin";
|
||||
import { Button } from "@govoplan/core-webui";
|
||||
import { DataGrid, type DataGridColumn } from "@govoplan/core-webui";
|
||||
import { Dialog } from "@govoplan/core-webui";
|
||||
import { FormField } from "@govoplan/core-webui";
|
||||
import { ConfirmDialog } from "@govoplan/core-webui";
|
||||
import { AdminIconButton, AdminPageLayout, adminErrorMessage, formatAdminDateTime as formatDateTime } from "@govoplan/core-webui";
|
||||
import { i18nMessage, useDeltaWatermarks, useUnsavedDraftGuard } from "@govoplan/core-webui";
|
||||
import { loadDeltaRows } from "./utils/deltaRows";
|
||||
|
||||
const emptyDraft = {
|
||||
sourceModule: "organizations",
|
||||
functionId: "",
|
||||
functionLabel: "",
|
||||
organizationUnitLabel: "",
|
||||
roleId: ""
|
||||
};
|
||||
|
||||
export default function ExternalFunctionRoleMappingsPanel({
|
||||
settings,
|
||||
auth,
|
||||
functionPicker,
|
||||
canWrite,
|
||||
onAuthRefresh
|
||||
}: {
|
||||
settings: ApiSettings;
|
||||
auth: AuthInfo;
|
||||
functionPicker: OrganizationFunctionPickerUiCapability;
|
||||
canWrite: boolean;
|
||||
onAuthRefresh: () => Promise<void>;
|
||||
}) {
|
||||
const [mappings, setMappings] = useState<ExternalFunctionRoleMappingItem[]>([]);
|
||||
const [roles, setRoles] = useState<RoleSummary[]>([]);
|
||||
const mappingsRef = useRef<ExternalFunctionRoleMappingItem[]>([]);
|
||||
const rolesRef = useRef<RoleSummary[]>([]);
|
||||
const { getDeltaWatermark, setDeltaWatermark, resetDeltaWatermark } = useDeltaWatermarks();
|
||||
const [editing, setEditing] = useState<ExternalFunctionRoleMappingItem | "new" | null>(null);
|
||||
const [draft, setDraft] = useState(emptyDraft);
|
||||
const [savedDraftKey, setSavedDraftKey] = useState(draftKey(emptyDraft));
|
||||
const [deleting, setDeleting] = useState<ExternalFunctionRoleMappingItem | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [error, setError] = useState("");
|
||||
const [success, setSuccess] = useState("");
|
||||
const tenantId = (auth.active_tenant ?? auth.tenant).id;
|
||||
const dirty = editing !== null && draftKey(draft) !== savedDraftKey;
|
||||
|
||||
useUnsavedDraftGuard({
|
||||
dirty,
|
||||
onSave: save,
|
||||
onDiscard: closeEditor
|
||||
});
|
||||
|
||||
async function load() {
|
||||
setLoading(true);
|
||||
setError("");
|
||||
try {
|
||||
const [nextMappings, nextRoles] = await Promise.all([
|
||||
loadDeltaRows(
|
||||
mappingsRef.current,
|
||||
"access:external-function-role-mappings",
|
||||
getDeltaWatermark,
|
||||
setDeltaWatermark,
|
||||
(since) => fetchExternalFunctionRoleMappingsDelta(settings, { since }),
|
||||
(response) => response.mappings,
|
||||
(mapping) => mapping.id,
|
||||
"access_external_function_role_mapping",
|
||||
sortMappings
|
||||
),
|
||||
loadDeltaRows(
|
||||
rolesRef.current,
|
||||
"access:roles-for-external-function-mappings",
|
||||
getDeltaWatermark,
|
||||
setDeltaWatermark,
|
||||
(since) => fetchRolesDelta(settings, { since }),
|
||||
(response) => response.roles,
|
||||
(role) => role.id,
|
||||
"access_role",
|
||||
sortRoles
|
||||
)
|
||||
]);
|
||||
mappingsRef.current = nextMappings;
|
||||
rolesRef.current = nextRoles;
|
||||
setMappings(nextMappings);
|
||||
setRoles(nextRoles.filter((role) => role.level === "tenant"));
|
||||
} catch (err) {
|
||||
setError(adminErrorMessage(err));
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
mappingsRef.current = [];
|
||||
rolesRef.current = [];
|
||||
resetDeltaWatermark();
|
||||
void load();
|
||||
}, [settings.accessToken, settings.apiBaseUrl, tenantId, resetDeltaWatermark]);
|
||||
|
||||
const roleById = useMemo(() => new Map(roles.map((role) => [role.id, role])), [roles]);
|
||||
const assignableRoles = useMemo(() => roles.filter((role) => role.is_assignable), [roles]);
|
||||
|
||||
function openCreate() {
|
||||
const initial = { ...emptyDraft, roleId: assignableRoles[0]?.id ?? "" };
|
||||
setDraft(initial);
|
||||
setSavedDraftKey(draftKey(initial));
|
||||
setEditing("new");
|
||||
setError("");
|
||||
}
|
||||
|
||||
function openEdit(mapping: ExternalFunctionRoleMappingItem) {
|
||||
const nextDraft = {
|
||||
sourceModule: mapping.source_module,
|
||||
functionId: mapping.function_id,
|
||||
functionLabel: "",
|
||||
organizationUnitLabel: "",
|
||||
roleId: mapping.role_id
|
||||
};
|
||||
setDraft(nextDraft);
|
||||
setSavedDraftKey(draftKey(nextDraft));
|
||||
setEditing(mapping);
|
||||
setError("");
|
||||
}
|
||||
|
||||
function closeEditor() {
|
||||
setEditing(null);
|
||||
setDraft(emptyDraft);
|
||||
setSavedDraftKey(draftKey(emptyDraft));
|
||||
}
|
||||
|
||||
async function save(): Promise<boolean> {
|
||||
setBusy(true);
|
||||
setError("");
|
||||
try {
|
||||
if (editing === "new") {
|
||||
await createExternalFunctionRoleMapping(settings, {
|
||||
source_module: functionPicker.sourceModule,
|
||||
function_id: draft.functionId.trim(),
|
||||
role_id: draft.roleId
|
||||
});
|
||||
setSuccess(i18nMessage("i18n:govoplan-access.function_role_mapping_created.7a25eb5a"));
|
||||
} else if (editing) {
|
||||
await updateExternalFunctionRoleMapping(settings, editing.id, { role_id: draft.roleId });
|
||||
setSuccess(i18nMessage("i18n:govoplan-access.function_role_mapping_updated.76020443"));
|
||||
}
|
||||
closeEditor();
|
||||
await onAuthRefresh();
|
||||
mappingsRef.current = [];
|
||||
resetDeltaWatermark("access:external-function-role-mappings");
|
||||
await load();
|
||||
return true;
|
||||
} catch (err) {
|
||||
setError(adminErrorMessage(err));
|
||||
return false;
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function remove() {
|
||||
if (!deleting) return;
|
||||
setBusy(true);
|
||||
setError("");
|
||||
try {
|
||||
await deleteExternalFunctionRoleMapping(settings, deleting.id);
|
||||
setSuccess(i18nMessage("i18n:govoplan-access.function_role_mapping_deleted.fb180786"));
|
||||
setDeleting(null);
|
||||
await onAuthRefresh();
|
||||
mappingsRef.current = [];
|
||||
resetDeltaWatermark("access:external-function-role-mappings");
|
||||
await load();
|
||||
} catch (err) {
|
||||
setError(adminErrorMessage(err));
|
||||
} finally {
|
||||
setBusy(false);
|
||||
}
|
||||
}
|
||||
|
||||
const columns = useMemo<DataGridColumn<ExternalFunctionRoleMappingItem>[]>(
|
||||
() => [
|
||||
{
|
||||
id: "function",
|
||||
header: "i18n:govoplan-access.function_fact.4f7435e4",
|
||||
width: "minmax(260px, 1fr)",
|
||||
minWidth: 220,
|
||||
resizable: true,
|
||||
sticky: "start",
|
||||
sortable: true,
|
||||
filterable: true,
|
||||
value: (row) => `${row.source_module} ${row.function_id}`,
|
||||
render: (row) => (
|
||||
<>
|
||||
{functionPicker.renderLabel?.({
|
||||
settings,
|
||||
auth,
|
||||
sourceModule: row.source_module,
|
||||
functionId: row.function_id,
|
||||
fallback: (
|
||||
<div>
|
||||
<strong>{row.source_module}</strong>
|
||||
<div className="muted small-note">{row.function_id}</div>
|
||||
</div>
|
||||
)
|
||||
}) ?? (
|
||||
<div>
|
||||
<strong>{row.source_module}</strong>
|
||||
<div className="muted small-note">{row.function_id}</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
},
|
||||
{
|
||||
id: "role",
|
||||
header: "i18n:govoplan-access.role.c3f104d1",
|
||||
width: "minmax(220px, 1fr)",
|
||||
minWidth: 190,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
filterable: true,
|
||||
value: (row) => roleById.get(row.role_id)?.name ?? row.role_id,
|
||||
render: (row) => {
|
||||
const role = roleById.get(row.role_id);
|
||||
return (
|
||||
<div>
|
||||
<strong>{role?.name ?? row.role_id}</strong>
|
||||
{role && <div className="muted small-note">{role.slug}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "updated",
|
||||
header: "i18n:govoplan-access.updated.f2f8570d",
|
||||
width: 180,
|
||||
minWidth: 150,
|
||||
resizable: true,
|
||||
sortable: true,
|
||||
value: (row) => row.updated_at,
|
||||
render: (row) => formatDateTime(row.updated_at)
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
header: "i18n:govoplan-access.actions.c3cd636a",
|
||||
width: 130,
|
||||
sticky: "end",
|
||||
resizable: false,
|
||||
align: "right",
|
||||
render: (row) => (
|
||||
<div className="admin-icon-actions">
|
||||
<AdminIconButton label={i18nMessage("i18n:govoplan-access.edit_value.fad75899", { value0: row.function_id })} icon={<Pencil />} onClick={() => openEdit(row)} disabled={!canWrite} />
|
||||
<AdminIconButton label={i18nMessage("i18n:govoplan-access.delete_value.4d18989e", { value0: row.function_id })} icon={<Trash2 />} variant="danger" onClick={() => setDeleting(row)} disabled={!canWrite} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
],
|
||||
[auth, canWrite, functionPicker, roleById, settings]
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<AdminPageLayout
|
||||
title="i18n:govoplan-access.function_role_mappings.2b64e9c3"
|
||||
description="i18n:govoplan-access.map_accepted_function_facts_to_tenant_roles_.7581e5cf"
|
||||
loading={loading}
|
||||
error={error}
|
||||
success={success}
|
||||
actions={
|
||||
<>
|
||||
<Button onClick={() => void load()} disabled={loading}>i18n:govoplan-access.reload.cce71553</Button>
|
||||
<AdminIconButton label="i18n:govoplan-access.add_function_role_mapping.1bc376ac" icon={<Plus />} variant="primary" onClick={openCreate} disabled={!canWrite || !assignableRoles.length} />
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="admin-table-surface">
|
||||
<DataGrid
|
||||
id="admin-external-function-role-mappings-v1"
|
||||
rows={mappings}
|
||||
columns={columns}
|
||||
initialFit="container"
|
||||
getRowKey={(row) => row.id}
|
||||
emptyText="i18n:govoplan-access.no_function_role_mappings_found.f735ff54"
|
||||
/>
|
||||
</div>
|
||||
</AdminPageLayout>
|
||||
|
||||
<Dialog
|
||||
open={editing !== null}
|
||||
title={editing === "new" ? "i18n:govoplan-access.create_function_role_mapping.3718168d" : "i18n:govoplan-access.edit_function_role_mapping.91ee75af"}
|
||||
onClose={() => !busy && closeEditor()}
|
||||
className="admin-dialog"
|
||||
footer={
|
||||
<>
|
||||
<Button onClick={closeEditor} disabled={busy}>i18n:govoplan-access.cancel.77dfd213</Button>
|
||||
<Button variant="primary" onClick={() => void save()} disabled={!canWrite || busy || !draft.functionId.trim() || !draft.roleId}>
|
||||
{busy ? "i18n:govoplan-access.saving.56a2285c" : "i18n:govoplan-access.save_mapping.a4ac90e9"}
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="admin-form-grid">
|
||||
<FormField label="i18n:govoplan-access.function_id.e5e08937">
|
||||
{functionPicker.renderPicker({
|
||||
settings,
|
||||
auth,
|
||||
disabled: editing !== "new",
|
||||
value: draft.functionId ? draftSelection(draft) : null,
|
||||
onChange: (selection) => setDraft({ ...draft, ...selectionDraft(selection) })
|
||||
})}
|
||||
</FormField>
|
||||
<FormField label="i18n:govoplan-access.role.c3f104d1">
|
||||
<select value={draft.roleId} onChange={(event) => setDraft({ ...draft, roleId: event.target.value })}>
|
||||
<option value="">i18n:govoplan-access.select_role.c543f191</option>
|
||||
{assignableRoles.map((role) => (
|
||||
<option key={role.id} value={role.id}>{role.name} ({role.slug})</option>
|
||||
))}
|
||||
</select>
|
||||
</FormField>
|
||||
</div>
|
||||
<p className="muted small-note">i18n:govoplan-access.function_role_mapping_help.0cf9996a</p>
|
||||
</Dialog>
|
||||
|
||||
<ConfirmDialog
|
||||
open={Boolean(deleting)}
|
||||
title="i18n:govoplan-access.delete_function_role_mapping.0c0eec6e"
|
||||
message={i18nMessage("i18n:govoplan-access.delete_function_role_mapping_value.419da2aa", { value0: deleting?.function_id })}
|
||||
confirmLabel="i18n:govoplan-access.delete_mapping.0d27d92a"
|
||||
tone="danger"
|
||||
busy={busy}
|
||||
onCancel={() => setDeleting(null)}
|
||||
onConfirm={() => void remove()}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function draftKey(draft: typeof emptyDraft): string {
|
||||
return JSON.stringify(draft);
|
||||
}
|
||||
|
||||
function draftSelection(draft: typeof emptyDraft): OrganizationFunctionSelection {
|
||||
return {
|
||||
sourceModule: "organizations",
|
||||
functionId: draft.functionId,
|
||||
label: draft.functionLabel || null,
|
||||
organizationUnitLabel: draft.organizationUnitLabel || null
|
||||
};
|
||||
}
|
||||
|
||||
function selectionDraft(selection: OrganizationFunctionSelection | null): Pick<typeof emptyDraft, "sourceModule" | "functionId" | "functionLabel" | "organizationUnitLabel"> {
|
||||
return {
|
||||
sourceModule: selection?.sourceModule ?? "organizations",
|
||||
functionId: selection?.functionId ?? "",
|
||||
functionLabel: selection?.label ?? "",
|
||||
organizationUnitLabel: selection?.organizationUnitLabel ?? ""
|
||||
};
|
||||
}
|
||||
|
||||
function sortMappings(left: ExternalFunctionRoleMappingItem, right: ExternalFunctionRoleMappingItem): number {
|
||||
const sourceDelta = left.source_module.localeCompare(right.source_module);
|
||||
return sourceDelta !== 0 ? sourceDelta : left.function_id.localeCompare(right.function_id);
|
||||
}
|
||||
|
||||
function sortRoles(left: RoleSummary, right: RoleSummary): number {
|
||||
return left.name.localeCompare(right.name);
|
||||
}
|
||||
Reference in New Issue
Block a user