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

refactor(webui): adopt semantic workspace actions

Browse Source
This commit is contained in:
zemion
2026-08-19 18:47:45 +02:00
parent 45cc3cdc7a
commit 1bb03c0f91
1 changed files with 37 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/features/datasources/DatasourcesPage.tsx
+30 -31
View File
@@ -13,13 +13,12 @@ import {
Layers3, Layers3,
Pencil, Pencil,
Plus, Plus,
RefreshCw,
Snowflake, Snowflake,
ShieldCheck, ShieldCheck,
Trash2, Trash2,
Upload Upload
} from "lucide-react"; } from "lucide-react";
import { FormGrid, DialogSection, ToolbarGroup, ActionToolbar, import { FormGrid, DialogSection, ActionToolbar,
ActionBlockerHint, ActionBlockerHint,
Button, Button,
ConfirmDialog, ConfirmDialog,
@@ -39,6 +38,7 @@ import { FormGrid, DialogSection, ToolbarGroup, ActionToolbar,
SelectionListItemContent, SelectionListItemContent,
StatePanel, StatePanel,
StatusBadge, StatusBadge,
WorkspaceActionBar,
WorkspaceFrame, WorkspaceFrame,
WorkspaceLayout, WorkspaceLayout,
hasScope, hasScope,
@@ -305,27 +305,21 @@ export default function DatasourcesPage({
contentLabel="Datasource workspace" contentLabel="Datasource workspace"
contentClassName="datasources-workspace" contentClassName="datasources-workspace"
primary={<> primary={<>
<ActionToolbar surface="panel-header"> <WorkspaceActionBar
<strong>Data</strong> scope="collection-pane"
<ToolbarGroup align="end" className="datasources-toolbar-actions"> variant="collection"
<IconButton refreshable
label="Refresh" reloadAction={{ onReload: () => void reload(selectedDatasourceRef), loading: loading || working }}
icon={<RefreshCw size={16} />} contextActions={<strong>Data</strong>}
variant="ghost" createAction={<IconButton
onClick={() => void reload(selectedDatasourceRef)}
disabled={loading || working}
disabledReason={loading ? DATASOURCES_I18N.loading : working ? DATASOURCES_I18N.working : undefined}
/>
<IconButton
label="Add datasource or stage" label="Add datasource or stage"
icon={<Plus size={17} />} icon={<Plus size={17} />}
variant="primary" variant="primary"
onClick={() => setAddOpen(true)} onClick={() => setAddOpen(true)}
disabled={!canStage && !canManage} disabled={!canStage && !canManage}
disabledReason={!canStage && !canManage ? DATASOURCES_I18N.manageReason : undefined} disabledReason={!canStage && !canManage ? DATASOURCES_I18N.manageReason : undefined}
/>}
/> />
</ToolbarGroup>
</ActionToolbar>
<div className="datasources-view-switch"> <div className="datasources-view-switch">
<SegmentedControl<CatalogueView> <SegmentedControl<CatalogueView>
ariaLabel="Datasource view" ariaLabel="Datasource view"
@@ -401,8 +395,11 @@ export default function DatasourcesPage({
</LoadingFrame> </LoadingFrame>
</>} </>}
> >
<ActionToolbar surface="panel-header" className="datasources-workspace-toolbar"> <WorkspaceActionBar
<span className="datasources-current-title"> scope="detail-pane"
variant="detail"
className="datasources-workspace-toolbar"
contextActions={<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} />
: <Database size={19} />} : <Database size={19} />}
@@ -422,9 +419,9 @@ export default function DatasourcesPage({
: selectedOrigin?.provider ?? "External acquisition"} : selectedOrigin?.provider ?? "External acquisition"}
</small> </small>
</span> </span>
</span> </span>}
<ToolbarGroup align="end" className="datasources-toolbar-actions"> helpAction={<DocumentationHelpLink reference={DATASOURCES_DOCUMENTATION} />}
<DocumentationHelpLink reference={DATASOURCES_DOCUMENTATION} /> primaryActions={<>
{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}>
<Download size={16} /> Refresh <Download size={16} /> Refresh
@@ -442,14 +439,6 @@ export default function DatasourcesPage({
<Button onClick={() => setFreezeOpen(true)} disabled={!canManage || working} disabledReason={working ? DATASOURCES_I18N.working : !canManage ? DATASOURCES_I18N.manageReason : undefined}> <Button onClick={() => setFreezeOpen(true)} disabled={!canManage || working} disabledReason={working ? DATASOURCES_I18N.working : !canManage ? DATASOURCES_I18N.manageReason : undefined}>
<Snowflake size={16} /> Freeze <Snowflake size={16} /> Freeze
</Button> </Button>
<IconButton
label="Retire datasource"
icon={<Trash2 size={16} />}
variant="danger"
onClick={() => setRetireOpen(true)}
disabled={!canManage || working}
disabledReason={working ? DATASOURCES_I18N.working : !canManage ? DATASOURCES_I18N.manageReason : undefined}
/>
</> </>
) : null} ) : null}
{view === "staging" && selectedStage?.state === "ready" ? ( {view === "staging" && selectedStage?.state === "ready" ? (
@@ -472,8 +461,18 @@ export default function DatasourcesPage({
<Plus size={16} /> Register <Plus size={16} /> Register
</Button> </Button>
) : null} ) : null}
</ToolbarGroup> </>}
</ActionToolbar> destructiveActions={view === "catalogue" && selectedDatasource ? (
<IconButton
label="Retire datasource"
icon={<Trash2 size={16} />}
variant="danger"
onClick={() => setRetireOpen(true)}
disabled={!canManage || working}
disabledReason={working ? DATASOURCES_I18N.working : !canManage ? DATASOURCES_I18N.manageReason : undefined}
/>
) : undefined}
/>
<div className="datasources-alerts"> <div className="datasources-alerts">
{error ? ( {error ? (