refactor(webui): adopt semantic workspace actions

This commit is contained in:
2026-08-19 18:47:45 +02:00
parent 87d12519b7
commit f6c13ccd4f
2 changed files with 52 additions and 42 deletions
+18 -11
View File
@@ -1,8 +1,7 @@
import { Archive, ArrowLeft, BadgeCheck, ClipboardCheck, ExternalLink, RefreshCw, Save, Send, Trash2 } from "lucide-react"; import { Archive, ArrowLeft, BadgeCheck, ClipboardCheck, ExternalLink, RefreshCw, Save, Send, Trash2 } from "lucide-react";
import { useCallback, useEffect, useMemo, useState } from "react"; import { useCallback, useEffect, useMemo, useState } from "react";
import { useParams } from "react-router"; import { useParams } from "react-router";
import { ActionToolbar, import { ActionBlockerHint,
ActionBlockerHint,
Button, Button,
ConfirmDialog, ConfirmDialog,
DescriptionItem, DescriptionItem,
@@ -23,6 +22,7 @@ import { ActionToolbar,
usePlatformModuleInstalled, usePlatformModuleInstalled,
usePlatformLanguage, usePlatformLanguage,
useUnsavedDraftGuard, useUnsavedDraftGuard,
WorkspaceActionBar,
WorkspaceFrame, WorkspaceFrame,
type PlatformRouteContext type PlatformRouteContext
} from "@govoplan/core-webui"; } from "@govoplan/core-webui";
@@ -379,21 +379,28 @@ export default function FormInstancePage({ settings, auth }: PlatformRouteContex
return ( return (
<main className="forms-runtime-page"> <main className="forms-runtime-page">
<WorkspaceFrame className="form-instance-shell" label="Form instance" interfaceId="forms-runtime.instance" helpContextId="forms-runtime.page.instance" helpModuleId="forms-runtime"> <WorkspaceFrame className="form-instance-shell" label="Form instance" interfaceId="forms-runtime.instance" helpContextId="forms-runtime.page.instance" helpModuleId="forms-runtime">
<ActionToolbar surface="panel-header" className="form-instance-toolbar"> <WorkspaceActionBar
<Button onClick={() => navigate("/forms-runtime")}> scope="workspace"
variant="detail"
refreshable
reloadAction={{ onReload: () => void load(), loading }}
className="form-instance-toolbar"
contextActions={<>
<Button onClick={() => navigate("/forms-runtime")}>
<ArrowLeft size={16} aria-hidden="true" /> <ArrowLeft size={16} aria-hidden="true" />
Forms Forms
</Button> </Button>
{definition && <strong>{localized.title}</strong>} {definition && <strong>{localized.title}</strong>}
{instance && <StatusBadge status={editableLifecycle ? "active" : "inactive"} label={stateLabel(instance.status)} />} {instance && <StatusBadge status={editableLifecycle ? "active" : "inactive"} label={stateLabel(instance.status)} />}
{instance && recordsAvailable && !editableLifecycle && </>}
primaryActions={instance && recordsAvailable && !editableLifecycle ?
<Button onClick={() => navigate(recordFilingPath(instance))}> <Button onClick={() => navigate(recordFilingPath(instance))}>
<Archive size={16} aria-hidden="true" /> <Archive size={16} aria-hidden="true" />
File in eAkte File in eAkte
</Button> </Button>
} : undefined}
<DocumentationHelpLink reference={FORMS_RUNTIME_DOCUMENTATION} /> helpAction={<DocumentationHelpLink reference={FORMS_RUNTIME_DOCUMENTATION} />}
</ActionToolbar> />
<PageScrollViewport className="form-instance-viewport"> <PageScrollViewport className="form-instance-viewport">
{error && {error &&
<DismissibleAlert tone="danger" resetKey={error}> <DismissibleAlert tone="danger" resetKey={error}>
+34 -31
View File
@@ -1,7 +1,6 @@
import { Link2, RefreshCw, ShieldCheck, UserRoundPlus } from "lucide-react"; import { Link2, ShieldCheck, UserRoundPlus } from "lucide-react";
import { useCallback, useEffect, useState } from "react"; import { useCallback, useEffect, useState } from "react";
import { ActionToolbar, import { Button,
Button,
DocumentationHelpLink, DocumentationHelpLink,
DismissibleAlert, DismissibleAlert,
LoadingIndicator, LoadingIndicator,
@@ -15,6 +14,7 @@ import { ActionToolbar,
i18nMessage, i18nMessage,
useGuardedNavigate, useGuardedNavigate,
usePlatformLanguage, usePlatformLanguage,
WorkspaceActionBar,
WorkspaceFrame, WorkspaceFrame,
type PlatformRouteContext type PlatformRouteContext
} from "@govoplan/core-webui"; } from "@govoplan/core-webui";
@@ -69,46 +69,49 @@ export default function FormsRuntimePage({ settings, auth }: PlatformRouteContex
return ( return (
<main className="forms-runtime-page"> <main className="forms-runtime-page">
<WorkspaceFrame className="forms-runtime-shell" label="Forms runtime" interfaceId="forms-runtime.workspace" helpContextId="forms-runtime.page.workspace" helpModuleId="forms-runtime"> <WorkspaceFrame className="forms-runtime-shell" label="Forms runtime" interfaceId="forms-runtime.workspace" helpContextId="forms-runtime.page.workspace" helpModuleId="forms-runtime">
<ActionToolbar surface="panel-header" className="forms-runtime-toolbar"> <WorkspaceActionBar
<Button onClick={() => void load()} disabled={loading} disabledReason={loading ? FORMS_RUNTIME_I18N.loading : undefined}> scope="workspace"
<RefreshCw size={16} aria-hidden="true" /> variant="collection"
Refresh refreshable
</Button> reloadAction={{ onReload: () => void load(), loading }}
{canAdmin && className="forms-runtime-toolbar"
contextActions={<>
{canAdmin &&
<Button onClick={() => setIntakeOpen(true)}> <Button onClick={() => setIntakeOpen(true)}>
<Link2 size={16} aria-hidden="true" /> <Link2 size={16} aria-hidden="true" />
Public intake Public intake
</Button> </Button>
} }
{canAdmin && {canAdmin &&
<Button onClick={() => setStatusAccessOpen(true)}> <Button onClick={() => setStatusAccessOpen(true)}>
<ShieldCheck size={16} aria-hidden="true" /> <ShieldCheck size={16} aria-hidden="true" />
Status access Status access
</Button> </Button>
} }
{canAssist && <label>
<span>Status</span>
<select value={status} onChange={(event) => setStatus(event.target.value)}>
<option value="open">Open</option>
<option value="">All</option>
<option value="draft">Draft</option>
<option value="submitted">Submitted</option>
<option value="needs_review">Needs review</option>
<option value="accepted">Accepted</option>
<option value="rejected">Rejected</option>
<option value="handed_off">Handed off</option>
<option value="archived">Archived</option>
</select>
</label>
<span className="forms-runtime-count">{i18nMessage("i18n:govoplan-forms-runtime.form_count", { total })}</span>
</>}
createAction={canAssist ?
<Button onClick={() => setAssistedOpen(true)}> <Button onClick={() => setAssistedOpen(true)}>
<UserRoundPlus size={16} aria-hidden="true" /> <UserRoundPlus size={16} aria-hidden="true" />
Assisted intake Assisted intake
</Button> </Button>
} : undefined}
<label> helpAction={<DocumentationHelpLink reference={FORMS_RUNTIME_DOCUMENTATION} />}
<span>Status</span> />
<select value={status} onChange={(event) => setStatus(event.target.value)}>
<option value="open">Open</option>
<option value="">All</option>
<option value="draft">Draft</option>
<option value="submitted">Submitted</option>
<option value="needs_review">Needs review</option>
<option value="accepted">Accepted</option>
<option value="rejected">Rejected</option>
<option value="handed_off">Handed off</option>
<option value="archived">Archived</option>
</select>
</label>
<span className="forms-runtime-count">{i18nMessage("i18n:govoplan-forms-runtime.form_count", { total })}</span>
<DocumentationHelpLink reference={FORMS_RUNTIME_DOCUMENTATION} />
</ActionToolbar>
<PageScrollViewport className="forms-runtime-list-viewport"> <PageScrollViewport className="forms-runtime-list-viewport">
{error && {error &&
<DismissibleAlert tone="danger" resetKey={error}> <DismissibleAlert tone="danger" resetKey={error}>