refactor(webui): adopt semantic workspace actions

This commit is contained in:
2026-08-19 18:47:46 +02:00
parent 165b012571
commit fb8d674637
@@ -38,6 +38,7 @@ import { ContentGrid, FormGrid,
ToggleSwitch, ToggleSwitch,
StatusBadge, StatusBadge,
StageRail, StageRail,
WorkspaceActionBar,
WorkspaceFrame, WorkspaceFrame,
hasScope, hasScope,
i18nMessage, i18nMessage,
@@ -899,19 +900,23 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
<Card <Card
title={I18N.requests} title={I18N.requests}
actions={( actions={(
<div className="scheduling-sidebar-actions"> <WorkspaceActionBar
<IconButton scope="collection-pane"
label={I18N.refresh} variant="collection"
icon={<RefreshCw aria-hidden="true" size={16} />} refreshable
onClick={() => requestNavigation(() => void loadRequests(selected?.id))} reloadAction={{
disabled={loading || saving} onReload: () => void loadRequests(selected?.id),
disabledReason={saving ? I18N.saving : undefined} /> loading: loading || saving,
<DocumentationHelpLink disabledReason: saving ? I18N.saving : undefined,
label: I18N.refresh
}}
className="scheduling-sidebar-actions"
helpAction={<DocumentationHelpLink
reference={{ reference={{
topicId: "scheduling.find-and-decide-meeting-time", topicId: "scheduling.find-and-decide-meeting-time",
documentationType: "user" documentationType: "user"
}} /> }} />}
{canCreateOrWrite ? ( createAction={canCreateOrWrite ? (
<Button <Button
type="button" type="button"
variant="primary" variant="primary"
@@ -920,8 +925,8 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
disabledReason={saving ? I18N.saving : undefined}> disabledReason={saving ? I18N.saving : undefined}>
<Plus aria-hidden="true" size={16} /> {I18N.add} <Plus aria-hidden="true" size={16} /> {I18N.add}
</Button> </Button>
) : null} ) : undefined}
</div> />
)}> )}>
{loading ? <p className="scheduling-note" role="status">{I18N.loading}</p> : null} {loading ? <p className="scheduling-note" role="status">{I18N.loading}</p> : null}
<RequestGroup <RequestGroup
@@ -956,37 +961,32 @@ export default function SchedulingPage({ settings, auth }: { settings: ApiSettin
{editorMode ? ( {editorMode ? (
<div className="scheduling-editor-surface"> <div className="scheduling-editor-surface">
<header className="scheduling-page-header"> <WorkspaceActionBar
<div className="scheduling-page-title"> scope="editor-pane"
variant="editor"
state={saving ? "saving" : draftDirty && !title.trim() ? "invalid" : draftDirty ? "dirty" : "clean"}
className="scheduling-page-header"
contextActions={<div className="scheduling-page-title">
<CalendarCheck aria-hidden="true" size={20} /> <CalendarCheck aria-hidden="true" size={20} />
<div> <div>
<PageTitle>{editorMode === "create" ? I18N.newRequest : I18N.edit}</PageTitle> <PageTitle>{editorMode === "create" ? I18N.newRequest : I18N.edit}</PageTitle>
<p>{editorMode === "create" ? I18N.addRequest : title}</p> <p>{editorMode === "create" ? I18N.addRequest : title}</p>
</div> </div>
</div> </div>}
<div className="scheduling-page-actions"> helpAction={<DocumentationHelpLink
<DocumentationHelpLink
reference={{ reference={{
topicId: "scheduling.find-and-decide-meeting-time", topicId: "scheduling.find-and-decide-meeting-time",
documentationType: "user" documentationType: "user"
}} /> }} />}
<Button discardAction={{ label: I18N.discard, type: "button", onClick: discardEditor }}
type="button" saveAction={{
onClick={discardEditor} label: <><Save aria-hidden="true" size={16} /> {saving ? I18N.saving : I18N.save}</>,
disabled={saving} type: "submit",
disabledReason={saving ? I18N.saving : undefined}> form: "scheduling-editor-form",
{I18N.discard} disabled: saving || !canCreateOrWrite,
</Button> disabledReason: saving ? I18N.saving : !canCreateOrWrite ? I18N.unavailable : undefined
<Button }}
type="submit" />
form="scheduling-editor-form"
variant="primary"
disabled={saving || !canCreateOrWrite}
disabledReason={saving ? I18N.saving : !canCreateOrWrite ? I18N.unavailable : undefined}>
<Save aria-hidden="true" size={16} /> {saving ? I18N.saving : I18N.save}
</Button>
</div>
</header>
<form <form
id="scheduling-editor-form" id="scheduling-editor-form"