refactor(webui): adopt semantic workspace actions

webui/src/features/datasources/DatasourcesPage.tsx

@@ -13,13 +13,12 @@ import {
   Layers3,
   Pencil,
   Plus,
-  RefreshCw,
   Snowflake,
   ShieldCheck,
   Trash2,
   Upload
 } from "lucide-react";
-import { FormGrid, DialogSection, ToolbarGroup, ActionToolbar,
+import { FormGrid, DialogSection, ActionToolbar,
   ActionBlockerHint,
   Button,
   ConfirmDialog,
@@ -39,6 +38,7 @@ import { FormGrid, DialogSection, ToolbarGroup, ActionToolbar,
   SelectionListItemContent,
   StatePanel,
   StatusBadge,
+  WorkspaceActionBar,
   WorkspaceFrame,
   WorkspaceLayout,
   hasScope,
@@ -305,27 +305,21 @@ export default function DatasourcesPage({
         contentLabel="Datasource workspace"
         contentClassName="datasources-workspace"
         primary={<>
-          <ActionToolbar surface="panel-header">
-            <strong>Data</strong>
-            <ToolbarGroup align="end" className="datasources-toolbar-actions">
-              <IconButton
-                label="Refresh"
-                icon={<RefreshCw size={16} />}
-                variant="ghost"
-                onClick={() => void reload(selectedDatasourceRef)}
-                disabled={loading || working}
-                disabledReason={loading ? DATASOURCES_I18N.loading : working ? DATASOURCES_I18N.working : undefined}
-              />
-              <IconButton
-                label="Add datasource or stage"
-                icon={<Plus size={17} />}
-                variant="primary"
-                onClick={() => setAddOpen(true)}
-                disabled={!canStage && !canManage}
-                disabledReason={!canStage && !canManage ? DATASOURCES_I18N.manageReason : undefined}
-              />
-            </ToolbarGroup>
-          </ActionToolbar>
+          <WorkspaceActionBar
+            scope="collection-pane"
+            variant="collection"
+            refreshable
+            reloadAction={{ onReload: () => void reload(selectedDatasourceRef), loading: loading || working }}
+            contextActions={<strong>Data</strong>}
+            createAction={<IconButton
+              label="Add datasource or stage"
+              icon={<Plus size={17} />}
+              variant="primary"
+              onClick={() => setAddOpen(true)}
+              disabled={!canStage && !canManage}
+              disabledReason={!canStage && !canManage ? DATASOURCES_I18N.manageReason : undefined}
+            />}
+          />
           <div className="datasources-view-switch">
             <SegmentedControl<CatalogueView>
               ariaLabel="Datasource view"
@@ -401,8 +395,11 @@ export default function DatasourcesPage({
           </LoadingFrame>
         </>}
       >
-          <ActionToolbar surface="panel-header" className="datasources-workspace-toolbar">
-            <span className="datasources-current-title">
+          <WorkspaceActionBar
+            scope="detail-pane"
+            variant="detail"
+            className="datasources-workspace-toolbar"
+            contextActions={<span className="datasources-current-title">
               {view === "catalogue" ? <DatabaseZap size={19} />
                 : view === "staging" ? <Layers3 size={19} />
                   : <Database size={19} />}
@@ -422,9 +419,9 @@ export default function DatasourcesPage({
                       : selectedOrigin?.provider ?? "External acquisition"}
                 </small>
               </span>
-            </span>
-            <ToolbarGroup align="end" className="datasources-toolbar-actions">
-              <DocumentationHelpLink reference={DATASOURCES_DOCUMENTATION} />
+            </span>}
+            helpAction={<DocumentationHelpLink reference={DATASOURCES_DOCUMENTATION} />}
+            primaryActions={<>
               {view === "catalogue" && selectedDatasource?.mode === "cached" ? (
                 <Button onClick={() => void refreshSelected()} disabled={!canManage || working} disabledReason={working ? DATASOURCES_I18N.working : !canManage ? DATASOURCES_I18N.manageReason : undefined}>
                   <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}>
                     <Snowflake size={16} /> Freeze
                   </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}
               {view === "staging" && selectedStage?.state === "ready" ? (
@@ -472,8 +461,18 @@ export default function DatasourcesPage({
                   <Plus size={16} /> Register
                 </Button>
               ) : 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">
             {error ? (