GovOPlaN/govoplan-datasources
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Adopt shared WebUI layout primitives

Browse Source
This commit is contained in:
zemion
2026-08-18 10:42:51 +02:00
parent 492306f6a7
commit c16bb51aa3
2 changed files with 22 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/features/datasources/DatasourcesPage.tsx
+21 -21
View File
@@ -19,7 +19,7 @@ import {
Trash2,
Upload
} from "lucide-react";
import {
import { FormGrid, DialogSection, ToolbarGroup, ActionToolbar,
ActionBlockerHint,
Button,
ConfirmDialog,
@@ -287,9 +287,9 @@ export default function DatasourcesPage({
<main className="datasources-page">
<div className="datasources-shell">
<aside className="datasources-sidebar" aria-label="Datasource catalogue">
<div className="datasources-sidebar-toolbar">
<ActionToolbar className="datasources-sidebar-toolbar">
<strong>Data</strong>
<span className="datasources-toolbar-actions">
<ToolbarGroup align="end" className="datasources-toolbar-actions">
<IconButton
label="Refresh"
icon={<RefreshCw size={16} />}
@@ -306,8 +306,8 @@ export default function DatasourcesPage({
disabled={!canStage && !canManage}
disabledReason={!canStage && !canManage ? DATASOURCES_I18N.manageReason : undefined}
/>
</span>
</div>
</ToolbarGroup>
</ActionToolbar>
<div className="datasources-view-switch">
<SegmentedControl<CatalogueView>
ariaLabel="Datasource view"
@@ -398,7 +398,7 @@ export default function DatasourcesPage({
</aside>
<section className="datasources-workspace">
<div className="datasources-workspace-toolbar">
<ActionToolbar className="datasources-workspace-toolbar">
<span className="datasources-current-title">
{view === "catalogue" ? <DatabaseZap size={19} />
: view === "staging" ? <Layers3 size={19} />
@@ -420,7 +420,7 @@ export default function DatasourcesPage({
</small>
</span>
</span>
<span className="datasources-toolbar-actions">
<ToolbarGroup align="end" className="datasources-toolbar-actions">
<DocumentationHelpLink reference={DATASOURCES_DOCUMENTATION} />
{view === "catalogue" && selectedDatasource?.mode === "cached" ? (
<Button onClick={() => void refreshSelected()} disabled={!canManage || working} disabledReason={working ? DATASOURCES_I18N.working : !canManage ? DATASOURCES_I18N.manageReason : undefined}>
@@ -469,8 +469,8 @@ export default function DatasourcesPage({
<Plus size={16} /> Register
</Button>
) : null}
</span>
</div>
</ToolbarGroup>
</ActionToolbar>
<div className="datasources-alerts">
{error ? (
@@ -972,8 +972,8 @@ function GovernanceDialog({
>
{error ? <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert> : null}
{draft ? (
<div className="datasources-dialog-fields">
<div className="datasources-dialog-grid">
<DialogSection className="datasources-dialog-fields">
<FormGrid columns={2} gap="small" collapseAt="narrow">
<FormField label="Authority mode" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}>
<select
value={draft.authority_mode}
@@ -1025,11 +1025,11 @@ function GovernanceDialog({
<FormField label="Correction procedure">
<input value={draft.correction_procedure_ref ?? ""} onChange={(event) => setValue("correction_procedure_ref", event.target.value || null)} />
</FormField>
</div>
</FormGrid>
<FormField label="Semantic definition" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}>
<textarea value={draft.semantic_definition ?? ""} onChange={(event) => setValue("semantic_definition", event.target.value || null)} />
</FormField>
<div className="datasources-dialog-grid">
<FormGrid columns={2} gap="small" collapseAt="narrow">
<GovernanceListField label="Purposes" values={draft.purposes} onChange={(values) => setValue("purposes", values)} />
<GovernanceListField label="Legal basis references" values={draft.legal_basis_refs} onChange={(values) => setValue("legal_basis_refs", values)} />
<GovernanceListField label="Official keys" values={draft.official_keys} onChange={(values) => setValue("official_keys", values)} />
@@ -1037,16 +1037,16 @@ function GovernanceDialog({
<GovernanceListField label="Affected services and processes" values={draft.affected_refs} onChange={(values) => setValue("affected_refs", values)} />
<GovernanceListField label="Dependent flows, reports, controls and decisions" values={draft.dependency_refs} onChange={(values) => setValue("dependency_refs", values)} />
<GovernanceListField label="Known limits" values={draft.known_limits} onChange={(values) => setValue("known_limits", values)} />
</div>
<div className="datasources-dialog-grid">
</FormGrid>
<FormGrid columns={2} gap="small" collapseAt="narrow">
<FormField label="Freshness policy (JSON)" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}>
<textarea value={freshness} onChange={(event) => setFreshness(event.target.value)} spellCheck={false} />
</FormField>
<FormField label="Quality policy (JSON)" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}>
<textarea value={quality} onChange={(event) => setQuality(event.target.value)} spellCheck={false} />
</FormField>
</div>
</div>
</FormGrid>
</DialogSection>
) : null}
</Dialog>
);
@@ -1283,7 +1283,7 @@ function AddDatasourceDialog({
</>
)}
>
<div className="datasources-dialog-fields">
<DialogSection className="datasources-dialog-fields">
{error ? (
<DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>
) : null}
@@ -1336,7 +1336,7 @@ function AddDatasourceDialog({
</FormField>
</>
)}
<div className="datasources-dialog-grid">
<FormGrid columns={2} gap="small" collapseAt="narrow">
<FormField label="Name" documentation={DATASOURCE_FIELDS_DOCUMENTATION}>
<input value={name} onChange={(event) => setName(event.target.value)} />
</FormField>
@@ -1349,7 +1349,7 @@ function AddDatasourceDialog({
disabled={Boolean(targetRef)}
/>
</FormField>
</div>
</FormGrid>
<FormField label="Description">
<input value={description} onChange={(event) => setDescription(event.target.value)} />
</FormField>
@@ -1421,7 +1421,7 @@ function AddDatasourceDialog({
)}
</>
) : null}
</div>
</DialogSection>
</Dialog>
);
}