feat: add governed configuration reference selectors
This commit is contained in:
@@ -1,7 +1,7 @@
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import { Check, Download, Play, RefreshCw } from "lucide-react";
|
||||
import type { ApiSettings } from "@govoplan/core-webui";
|
||||
import { AdminPageLayout, Button, Card, DataGrid, StatusBadge, adminErrorMessage, i18nMessage, type DataGridColumn } from "@govoplan/core-webui";
|
||||
import type { ApiSettings, AuthInfo } from "@govoplan/core-webui";
|
||||
import { AdminPageLayout, Button, Card, DataGrid, FormField, ReferenceSelect, StatusBadge, ToggleSwitch, adminErrorMessage, i18nMessage, type DataGridColumn } from "@govoplan/core-webui";
|
||||
import {
|
||||
applyConfigurationPackage,
|
||||
createConfigurationChangeRequest,
|
||||
@@ -13,6 +13,10 @@ import {
|
||||
type ConfigurationPackagePlanItem,
|
||||
type ConfigurationPackageRequiredData } from
|
||||
"../../api/admin";
|
||||
import {
|
||||
createChangeRequestReferenceProvider,
|
||||
createTenantReferenceProvider
|
||||
} from "./configurationReferenceProviders";
|
||||
|
||||
const SAMPLE_ACCESS_PACKAGE = {
|
||||
package_id: "govoplan.access.minimal-office",
|
||||
@@ -60,12 +64,14 @@ type ApplyResult = {
|
||||
updated_refs: Record<string, string>;
|
||||
};
|
||||
|
||||
export default function ConfigurationPackagesPanel({ settings, canWrite }: {settings: ApiSettings;canWrite: boolean;}) {
|
||||
export default function ConfigurationPackagesPanel({ settings, auth, canWrite }: {settings: ApiSettings;auth: AuthInfo;canWrite: boolean;}) {
|
||||
const [catalogValidation, setCatalogValidation] = useState<Record<string, unknown> | null>(null);
|
||||
const [packageText, setPackageText] = useState(() => JSON.stringify(SAMPLE_ACCESS_PACKAGE, null, 2));
|
||||
const [tenantId, setTenantId] = useState("");
|
||||
const activeTenantId = auth.active_tenant?.id ?? auth.tenant.id;
|
||||
const [tenantId, setTenantId] = useState(activeTenantId);
|
||||
const [suppliedDataText, setSuppliedDataText] = useState("{}");
|
||||
const [changeRequestId, setChangeRequestId] = useState("");
|
||||
const [manualReferences, setManualReferences] = useState(false);
|
||||
const [dryRun, setDryRun] = useState<DryRunResult | null>(null);
|
||||
const [applyResult, setApplyResult] = useState<ApplyResult | null>(null);
|
||||
const [exportText, setExportText] = useState("");
|
||||
@@ -78,6 +84,22 @@ export default function ConfigurationPackagesPanel({ settings, canWrite }: {sett
|
||||
const parsedPackage = useMemo(() => parseObject(packageText), [packageText]);
|
||||
const parsedSuppliedData = useMemo(() => parseObject(suppliedDataText), [suppliedDataText]);
|
||||
const canRun = Boolean(parsedPackage.value && parsedSuppliedData.value);
|
||||
const tenantProvider = useMemo(
|
||||
() => createTenantReferenceProvider(settings),
|
||||
[settings.accessToken, settings.apiBaseUrl, settings.apiKey]
|
||||
);
|
||||
const changeRequestProvider = useMemo(
|
||||
() => createChangeRequestReferenceProvider(settings, {
|
||||
purpose: "configuration_packages.apply",
|
||||
tenantId
|
||||
}),
|
||||
[
|
||||
settings.accessToken,
|
||||
settings.apiBaseUrl,
|
||||
settings.apiKey,
|
||||
tenantId
|
||||
]
|
||||
);
|
||||
|
||||
async function loadCatalog() {
|
||||
setLoading(true);
|
||||
@@ -93,6 +115,9 @@ export default function ConfigurationPackagesPanel({ settings, canWrite }: {sett
|
||||
}
|
||||
|
||||
useEffect(() => {void loadCatalog();}, [settings.accessToken, settings.apiBaseUrl]);
|
||||
useEffect(() => {
|
||||
setTenantId((current) => current || activeTenantId);
|
||||
}, [activeTenantId]);
|
||||
|
||||
async function runDryRun() {
|
||||
const manifest = requireParsedPackage();
|
||||
@@ -228,8 +253,50 @@ export default function ConfigurationPackagesPanel({ settings, canWrite }: {sett
|
||||
|
||||
<Card title="i18n:govoplan-admin.package.7431e3df">
|
||||
<div className="module-installer-request-grid">
|
||||
<label className="wide"><span>i18n:govoplan-admin.tenant_id.59eba244</span><input value={tenantId} onChange={(event) => setTenantId(event.target.value)} placeholder="active tenant" /></label>
|
||||
<label className="wide"><span>i18n:govoplan-admin.change_request_id.96ee3239</span><input value={changeRequestId} onChange={(event) => setChangeRequestId(event.target.value)} placeholder="cfgreq-..." /></label>
|
||||
<div className="wide">
|
||||
<ToggleSwitch
|
||||
checked={manualReferences}
|
||||
onChange={setManualReferences}
|
||||
label="Enter reference IDs manually"
|
||||
help="Use only when importing a package that intentionally references a target no longer returned by the live catalog."
|
||||
/>
|
||||
</div>
|
||||
<div className="wide">
|
||||
<FormField label="i18n:govoplan-admin.tenant_id.59eba244">
|
||||
{manualReferences ? (
|
||||
<input value={tenantId} onChange={(event) => setTenantId(event.target.value)} placeholder="active tenant" />
|
||||
) : (
|
||||
<ReferenceSelect
|
||||
value={tenantId}
|
||||
onChange={(value) => {
|
||||
setTenantId(value);
|
||||
setChangeRequestId("");
|
||||
}}
|
||||
provider={tenantProvider}
|
||||
aria-label="Configuration package tenant"
|
||||
placeholder="Select a tenant"
|
||||
disabled={Boolean(busy)}
|
||||
/>
|
||||
)}
|
||||
</FormField>
|
||||
</div>
|
||||
<div className="wide">
|
||||
<FormField label="i18n:govoplan-admin.change_request_id.96ee3239">
|
||||
{manualReferences ? (
|
||||
<input value={changeRequestId} onChange={(event) => setChangeRequestId(event.target.value)} placeholder="cfgreq-..." />
|
||||
) : (
|
||||
<ReferenceSelect
|
||||
value={changeRequestId}
|
||||
onChange={(value) => setChangeRequestId(value)}
|
||||
provider={changeRequestProvider}
|
||||
aria-label="Configuration package change request"
|
||||
placeholder="Select an eligible request (optional)"
|
||||
emptyText="No eligible configuration requests."
|
||||
disabled={Boolean(busy)}
|
||||
/>
|
||||
)}
|
||||
</FormField>
|
||||
</div>
|
||||
<label className="wide"><span>i18n:govoplan-admin.package_json.a2b10f38</span><textarea rows={18} value={packageText} onChange={(event) => setPackageText(event.target.value)} /></label>
|
||||
<label className="wide"><span>i18n:govoplan-admin.supplied_data_json.6932bfb7</span><textarea rows={6} value={suppliedDataText} onChange={(event) => setSuppliedDataText(event.target.value)} /></label>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,191 @@
|
||||
import {
|
||||
filterSearchableSelectOptions,
|
||||
unavailableReferenceOption,
|
||||
type ApiSettings,
|
||||
type ConfigurationReferenceSelectorsUiCapability,
|
||||
type ReferenceOption,
|
||||
type ReferenceOptionProvider
|
||||
} from "@govoplan/core-webui";
|
||||
import {
|
||||
fetchConfigurationChanges,
|
||||
fetchTenants,
|
||||
type ConfigurationChangeRequest
|
||||
} from "../../api/admin";
|
||||
|
||||
export const configurationReferenceSelectors: ConfigurationReferenceSelectorsUiCapability = {
|
||||
tenantProvider: createTenantReferenceProvider,
|
||||
changeRequestProvider: createChangeRequestReferenceProvider
|
||||
};
|
||||
|
||||
export function createTenantReferenceProvider(
|
||||
settings: ApiSettings
|
||||
): ReferenceOptionProvider {
|
||||
async function catalogue(signal: AbortSignal): Promise<ReferenceOption[]> {
|
||||
const tenants = await fetchTenants(settings);
|
||||
if (signal.aborted) throw abortError();
|
||||
return tenants.map((tenant) => ({
|
||||
value: tenant.id,
|
||||
label: tenant.name || tenant.slug || tenant.id,
|
||||
description: [
|
||||
tenant.slug,
|
||||
tenant.is_active ? null : "Inactive",
|
||||
tenant.id
|
||||
].filter(Boolean).join(" · "),
|
||||
kind: "tenant",
|
||||
availability: tenant.is_active ? "available" : "inactive",
|
||||
disabled: !tenant.is_active,
|
||||
sourceModule: "tenancy",
|
||||
provenance: {
|
||||
tenantId: tenant.id,
|
||||
active: tenant.is_active
|
||||
}
|
||||
}));
|
||||
}
|
||||
return {
|
||||
async search(query, context) {
|
||||
const options = await catalogue(context.signal);
|
||||
return retainSelected(
|
||||
filterSearchableSelectOptions(options, query, context.limit),
|
||||
options,
|
||||
context.selectedValues
|
||||
);
|
||||
},
|
||||
async resolve(values, context) {
|
||||
const options = await catalogue(context.signal);
|
||||
const byValue = new Map(options.map((option) => [option.value, option]));
|
||||
return values.map(
|
||||
(value) =>
|
||||
byValue.get(value)
|
||||
?? unavailableReferenceOption(value, "Unavailable tenant")
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export function createChangeRequestReferenceProvider(
|
||||
settings: ApiSettings,
|
||||
{
|
||||
purpose,
|
||||
tenantId
|
||||
}: {
|
||||
purpose: string;
|
||||
tenantId?: string | null;
|
||||
}
|
||||
): ReferenceOptionProvider {
|
||||
async function catalogue(signal: AbortSignal): Promise<{
|
||||
eligible: ReferenceOption[];
|
||||
all: ReferenceOption[];
|
||||
}> {
|
||||
const response = await fetchConfigurationChanges(settings);
|
||||
if (signal.aborted) throw abortError();
|
||||
const matching = response.requests.filter(
|
||||
(request) =>
|
||||
request.key === purpose
|
||||
&& requestTargetsTenant(request, tenantId)
|
||||
);
|
||||
const all = matching.map(changeRequestOption);
|
||||
return {
|
||||
eligible: all.filter((option) => !option.disabled),
|
||||
all
|
||||
};
|
||||
}
|
||||
return {
|
||||
async search(query, context) {
|
||||
const options = await catalogue(context.signal);
|
||||
return retainSelected(
|
||||
filterSearchableSelectOptions(
|
||||
options.eligible,
|
||||
query,
|
||||
context.limit
|
||||
),
|
||||
options.all,
|
||||
context.selectedValues
|
||||
);
|
||||
},
|
||||
async resolve(values, context) {
|
||||
const options = await catalogue(context.signal);
|
||||
const byValue = new Map(
|
||||
options.all.map((option) => [option.value, option])
|
||||
);
|
||||
return values.map(
|
||||
(value) =>
|
||||
byValue.get(value)
|
||||
?? unavailableReferenceOption(
|
||||
value,
|
||||
"Unavailable configuration request"
|
||||
)
|
||||
);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function changeRequestOption(
|
||||
request: ConfigurationChangeRequest
|
||||
): ReferenceOption {
|
||||
const closed = request.status === "applied" || request.status === "rejected";
|
||||
const eligible = request.status === "approved" && request.dry_run;
|
||||
return {
|
||||
value: request.id,
|
||||
label: request.label || request.key,
|
||||
description: [
|
||||
request.status.split("_").join(" "),
|
||||
request.dry_run ? null : "dry run not recorded",
|
||||
formatTimestamp(request.requested_at),
|
||||
`requested by ${request.requested_by}`,
|
||||
request.id
|
||||
].filter(Boolean).join(" · "),
|
||||
searchText: `${request.id} ${request.requested_by} ${request.status}`,
|
||||
kind: "configuration_change_request",
|
||||
availability: closed
|
||||
? "unavailable"
|
||||
: eligible
|
||||
? "available"
|
||||
: "inactive",
|
||||
disabled: !eligible,
|
||||
sourceModule: "admin",
|
||||
provenance: {
|
||||
purpose: request.key,
|
||||
target: request.target ?? {},
|
||||
requestedBy: request.requested_by,
|
||||
requestedAt: request.requested_at,
|
||||
status: request.status,
|
||||
dryRunRecorded: request.dry_run
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function requestTargetsTenant(
|
||||
request: ConfigurationChangeRequest,
|
||||
tenantId?: string | null
|
||||
): boolean {
|
||||
if (!tenantId) return true;
|
||||
const targetTenant = request.target?.tenant_id;
|
||||
return !targetTenant || String(targetTenant) === tenantId;
|
||||
}
|
||||
|
||||
function retainSelected(
|
||||
matches: readonly ReferenceOption[],
|
||||
catalogue: readonly ReferenceOption[],
|
||||
selectedValues: readonly string[]
|
||||
): ReferenceOption[] {
|
||||
const result = [...matches];
|
||||
const returned = new Set(result.map((option) => option.value));
|
||||
const byValue = new Map(catalogue.map((option) => [option.value, option]));
|
||||
for (const value of selectedValues) {
|
||||
if (returned.has(value)) continue;
|
||||
result.push(
|
||||
byValue.get(value)
|
||||
?? unavailableReferenceOption(value)
|
||||
);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function formatTimestamp(value: string): string {
|
||||
const date = new Date(value);
|
||||
return Number.isNaN(date.getTime()) ? value : date.toLocaleString();
|
||||
}
|
||||
|
||||
function abortError(): DOMException {
|
||||
return new DOMException("The operation was aborted.", "AbortError");
|
||||
}
|
||||
Reference in New Issue
Block a user