refactor(webui): adopt semantic workspace actions
This commit is contained in:
@@ -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"
|
||||||
|
|||||||
Reference in New Issue
Block a user