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, Trash2,
Upload Upload
} from "lucide-react"; } from "lucide-react";
import { import { FormGrid, DialogSection, ToolbarGroup, ActionToolbar,
ActionBlockerHint, ActionBlockerHint,
Button, Button,
ConfirmDialog, ConfirmDialog,
@@ -287,9 +287,9 @@ export default function DatasourcesPage({
<main className="datasources-page"> <main className="datasources-page">
<div className="datasources-shell"> <div className="datasources-shell">
<aside className="datasources-sidebar" aria-label="Datasource catalogue"> <aside className="datasources-sidebar" aria-label="Datasource catalogue">
<div className="datasources-sidebar-toolbar"> <ActionToolbar className="datasources-sidebar-toolbar">
<strong>Data</strong> <strong>Data</strong>
<span className="datasources-toolbar-actions"> <ToolbarGroup align="end" className="datasources-toolbar-actions">
<IconButton <IconButton
label="Refresh" label="Refresh"
icon={<RefreshCw size={16} />} icon={<RefreshCw size={16} />}
@@ -306,8 +306,8 @@ export default function DatasourcesPage({
disabled={!canStage && !canManage} disabled={!canStage && !canManage}
disabledReason={!canStage && !canManage ? DATASOURCES_I18N.manageReason : undefined} disabledReason={!canStage && !canManage ? DATASOURCES_I18N.manageReason : undefined}
/> />
</span> </ToolbarGroup>
</div> </ActionToolbar>
<div className="datasources-view-switch"> <div className="datasources-view-switch">
<SegmentedControl<CatalogueView> <SegmentedControl<CatalogueView>
ariaLabel="Datasource view" ariaLabel="Datasource view"
@@ -398,7 +398,7 @@ export default function DatasourcesPage({
</aside> </aside>
<section className="datasources-workspace"> <section className="datasources-workspace">
<div className="datasources-workspace-toolbar"> <ActionToolbar className="datasources-workspace-toolbar">
<span className="datasources-current-title"> <span className="datasources-current-title">
{view === "catalogue" ? <DatabaseZap size={19} /> {view === "catalogue" ? <DatabaseZap size={19} />
: view === "staging" ? <Layers3 size={19} /> : view === "staging" ? <Layers3 size={19} />
@@ -420,7 +420,7 @@ export default function DatasourcesPage({
</small> </small>
</span> </span>
</span> </span>
<span className="datasources-toolbar-actions"> <ToolbarGroup align="end" className="datasources-toolbar-actions">
<DocumentationHelpLink reference={DATASOURCES_DOCUMENTATION} /> <DocumentationHelpLink reference={DATASOURCES_DOCUMENTATION} />
{view === "catalogue" && selectedDatasource?.mode === "cached" ? ( {view === "catalogue" && selectedDatasource?.mode === "cached" ? (
<Button onClick={() => void refreshSelected()} disabled={!canManage || working} disabledReason={working ? DATASOURCES_I18N.working : !canManage ? DATASOURCES_I18N.manageReason : undefined}> <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 <Plus size={16} /> Register
</Button> </Button>
) : null} ) : null}
</span> </ToolbarGroup>
</div> </ActionToolbar>
<div className="datasources-alerts"> <div className="datasources-alerts">
{error ? ( {error ? (
@@ -972,8 +972,8 @@ function GovernanceDialog({
> >
{error ? <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert> : null} {error ? <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert> : null}
{draft ? ( {draft ? (
<div className="datasources-dialog-fields"> <DialogSection className="datasources-dialog-fields">
<div className="datasources-dialog-grid"> <FormGrid columns={2} gap="small" collapseAt="narrow">
<FormField label="Authority mode" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}> <FormField label="Authority mode" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}>
<select <select
value={draft.authority_mode} value={draft.authority_mode}
@@ -1025,11 +1025,11 @@ function GovernanceDialog({
<FormField label="Correction procedure"> <FormField label="Correction procedure">
<input value={draft.correction_procedure_ref ?? ""} onChange={(event) => setValue("correction_procedure_ref", event.target.value || null)} /> <input value={draft.correction_procedure_ref ?? ""} onChange={(event) => setValue("correction_procedure_ref", event.target.value || null)} />
</FormField> </FormField>
</div> </FormGrid>
<FormField label="Semantic definition" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}> <FormField label="Semantic definition" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}>
<textarea value={draft.semantic_definition ?? ""} onChange={(event) => setValue("semantic_definition", event.target.value || null)} /> <textarea value={draft.semantic_definition ?? ""} onChange={(event) => setValue("semantic_definition", event.target.value || null)} />
</FormField> </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="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="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)} /> <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="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="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)} /> <GovernanceListField label="Known limits" values={draft.known_limits} onChange={(values) => setValue("known_limits", values)} />
</div> </FormGrid>
<div className="datasources-dialog-grid"> <FormGrid columns={2} gap="small" collapseAt="narrow">
<FormField label="Freshness policy (JSON)" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}> <FormField label="Freshness policy (JSON)" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}>
<textarea value={freshness} onChange={(event) => setFreshness(event.target.value)} spellCheck={false} /> <textarea value={freshness} onChange={(event) => setFreshness(event.target.value)} spellCheck={false} />
</FormField> </FormField>
<FormField label="Quality policy (JSON)" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}> <FormField label="Quality policy (JSON)" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}>
<textarea value={quality} onChange={(event) => setQuality(event.target.value)} spellCheck={false} /> <textarea value={quality} onChange={(event) => setQuality(event.target.value)} spellCheck={false} />
</FormField> </FormField>
</div> </FormGrid>
</div> </DialogSection>
) : null} ) : null}
</Dialog> </Dialog>
); );
@@ -1283,7 +1283,7 @@ function AddDatasourceDialog({
</> </>
)} )}
> >
<div className="datasources-dialog-fields"> <DialogSection className="datasources-dialog-fields">
{error ? ( {error ? (
<DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert> <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>
) : null} ) : null}
@@ -1336,7 +1336,7 @@ function AddDatasourceDialog({
</FormField> </FormField>
</> </>
)} )}
<div className="datasources-dialog-grid"> <FormGrid columns={2} gap="small" collapseAt="narrow">
<FormField label="Name" documentation={DATASOURCE_FIELDS_DOCUMENTATION}> <FormField label="Name" documentation={DATASOURCE_FIELDS_DOCUMENTATION}>
<input value={name} onChange={(event) => setName(event.target.value)} /> <input value={name} onChange={(event) => setName(event.target.value)} />
</FormField> </FormField>
@@ -1349,7 +1349,7 @@ function AddDatasourceDialog({
disabled={Boolean(targetRef)} disabled={Boolean(targetRef)}
/> />
</FormField> </FormField>
</div> </FormGrid>
<FormField label="Description"> <FormField label="Description">
<input value={description} onChange={(event) => setDescription(event.target.value)} /> <input value={description} onChange={(event) => setDescription(event.target.value)} />
</FormField> </FormField>
@@ -1421,7 +1421,7 @@ function AddDatasourceDialog({
)} )}
</> </>
) : null} ) : null}
</div> </DialogSection>
</Dialog> </Dialog>
); );
} }
webui/src/styles/datasources.css
+1 -8
View File
@@ -487,12 +487,6 @@
font-size: 12px; font-size: 12px;
} }
.datasources-dialog-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px;
}
.datasources-dialog-copy { .datasources-dialog-copy {
margin: 0 0 14px; margin: 0 0 14px;
color: var(--muted); color: var(--muted);
@@ -539,8 +533,7 @@
@media (max-width: 560px) { @media (max-width: 560px) {
.datasources-metrics, .datasources-metrics,
.datasources-key-values, .datasources-key-values {
.datasources-dialog-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
} }