Adopt shared WebUI structural primitives
This commit is contained in:
@@ -18,18 +18,28 @@ import { DialogSection, ToolbarGroup, FormGrid, ActionToolbar,
|
||||
ApiError,
|
||||
Button,
|
||||
ConfirmDialog,
|
||||
ContentSection,
|
||||
DataGrid,
|
||||
DataGridRowActions,
|
||||
Dialog,
|
||||
DocumentationHelpLink,
|
||||
DismissibleAlert,
|
||||
FilterBar,
|
||||
FormField,
|
||||
IconButton,
|
||||
LoadingFrame,
|
||||
MetricCard,
|
||||
MetricGrid,
|
||||
SearchableSelect,
|
||||
SegmentedControl,
|
||||
SelectionList,
|
||||
SelectionListItem,
|
||||
SelectionListItemContent,
|
||||
StatePanel,
|
||||
StatusBadge,
|
||||
ToggleSwitch,
|
||||
WorkspaceFrame,
|
||||
WorkspaceLayout,
|
||||
formatDateTime,
|
||||
hasScope,
|
||||
useUnsavedChanges,
|
||||
@@ -528,10 +538,18 @@ export default function DistributionListsPage({ settings, auth }: Props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="dist-lists-page">
|
||||
<div className="dist-lists-shell">
|
||||
<aside className="dist-lists-sidebar" aria-label="Distribution lists">
|
||||
<ActionToolbar className="dist-lists-sidebar-toolbar">
|
||||
<WorkspaceFrame as="main" height="viewport" surface="plain" className="dist-lists-page" label="Distribution lists workspace">
|
||||
<WorkspaceLayout
|
||||
variant="split"
|
||||
primarySize="compact"
|
||||
surface="contained"
|
||||
primaryScrollable={false}
|
||||
contentScrollable={false}
|
||||
primaryLabel="Distribution lists"
|
||||
contentLabel="Distribution list workspace"
|
||||
contentClassName="dist-lists-workspace"
|
||||
primary={<>
|
||||
<ActionToolbar surface="panel-header">
|
||||
<strong>Distribution Lists</strong>
|
||||
<span>
|
||||
<IconButton
|
||||
@@ -552,7 +570,7 @@ export default function DistributionListsPage({ settings, auth }: Props) {
|
||||
/>
|
||||
</span>
|
||||
</ActionToolbar>
|
||||
<div className="dist-lists-search">
|
||||
<FilterBar surface="panel">
|
||||
<input
|
||||
type="search"
|
||||
value={search}
|
||||
@@ -560,30 +578,25 @@ export default function DistributionListsPage({ settings, auth }: Props) {
|
||||
placeholder="Search lists"
|
||||
aria-label="Search distribution lists"
|
||||
/>
|
||||
</div>
|
||||
</FilterBar>
|
||||
<LoadingFrame loading={loading} className="dist-lists-list-frame">
|
||||
<div className="dist-lists-list">
|
||||
<SelectionList variant="navigation" label="Distribution lists">
|
||||
{visibleItems.map((item) => (
|
||||
<button
|
||||
<SelectionListItem
|
||||
key={item.id}
|
||||
type="button"
|
||||
className={item.id === selectedId ? "is-selected" : ""}
|
||||
selected={item.id === selectedId}
|
||||
onClick={() => selectItem(item)}
|
||||
>
|
||||
<span>
|
||||
<strong>{item.name}</strong>
|
||||
<small>{item.revision.entries.length} entries · revision {item.current_revision}</small>
|
||||
</span>
|
||||
<SelectionListItemContent title={item.name} description={`${item.revision.entries.length} entries · revision ${item.current_revision}`} />
|
||||
<StatusBadge status={item.revision.definition_kind} label={item.revision.definition_kind} />
|
||||
</button>
|
||||
</SelectionListItem>
|
||||
))}
|
||||
{!visibleItems.length ? <div className="dist-lists-empty">No distribution lists</div> : null}
|
||||
</div>
|
||||
{!visibleItems.length ? <StatePanel size="compact" description="No distribution lists" /> : null}
|
||||
</SelectionList>
|
||||
</LoadingFrame>
|
||||
</aside>
|
||||
|
||||
<section className="dist-lists-workspace">
|
||||
<ActionToolbar className="dist-lists-workspace-toolbar">
|
||||
</>}
|
||||
>
|
||||
<ActionToolbar surface="panel-header" className="dist-lists-workspace-toolbar">
|
||||
<span className="dist-lists-current-title">
|
||||
<strong>{selected?.name ?? "No distribution list selected"}</strong>
|
||||
{selected ? <small>Revision {selected.current_revision} · {selected.scope_type} scope</small> : null}
|
||||
@@ -626,7 +639,7 @@ export default function DistributionListsPage({ settings, auth }: Props) {
|
||||
|
||||
<LoadingFrame loading={loading} className="dist-lists-content-frame">
|
||||
{!selected ? (
|
||||
<div className="dist-lists-empty">Create or select a distribution list.</div>
|
||||
<StatePanel size="fill" title="Distribution lists" description="Create or select a distribution list." />
|
||||
) : view === "definition" ? (
|
||||
<DefinitionEditor
|
||||
draft={draft}
|
||||
@@ -671,12 +684,12 @@ export default function DistributionListsPage({ settings, auth }: Props) {
|
||||
</section>
|
||||
{preview ? (
|
||||
<>
|
||||
<div className="dist-lists-metrics">
|
||||
<Metric label="Included" value={preview.recipients.length} />
|
||||
<Metric label="Excluded" value={preview.excluded.length} />
|
||||
<Metric label="Providers" value={preview.provider_evidence.length} />
|
||||
<Metric label="Source state" value={preview.stale ? "Stale" : "Current"} />
|
||||
</div>
|
||||
<MetricGrid columns={4} density="compact" minimum="compact">
|
||||
<MetricCard density="compact" label="Included" value={preview.recipients.length} />
|
||||
<MetricCard density="compact" label="Excluded" value={preview.excluded.length} />
|
||||
<MetricCard density="compact" label="Providers" value={preview.provider_evidence.length} />
|
||||
<MetricCard density="compact" label="Source state" value={preview.stale ? "Stale" : "Current"} />
|
||||
</MetricGrid>
|
||||
{preview.diagnostics.map((diagnostic, index) => (
|
||||
<DismissibleAlert
|
||||
key={`${diagnostic.code}-${index}`}
|
||||
@@ -708,18 +721,18 @@ export default function DistributionListsPage({ settings, auth }: Props) {
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<div className="dist-lists-empty">Expand the saved revision to inspect recipients and decisions.</div>
|
||||
<StatePanel size="default" description="Expand the saved revision to inspect recipients and decisions." />
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="dist-lists-content">
|
||||
<div className="dist-lists-section-heading">
|
||||
<ActionToolbar surface="section-header" className="dist-lists-section-heading">
|
||||
<span>
|
||||
<strong>Frozen snapshots</strong>
|
||||
<small>Immutable recipient evidence held by consumers</small>
|
||||
</span>
|
||||
<IconButton label="Refresh snapshots" icon={<RefreshCw size={16} />} variant="ghost" onClick={() => void openSnapshots()} />
|
||||
</div>
|
||||
</ActionToolbar>
|
||||
<DataGrid
|
||||
id="distribution-list-snapshots"
|
||||
rows={snapshots}
|
||||
@@ -731,8 +744,7 @@ export default function DistributionListsPage({ settings, auth }: Props) {
|
||||
</div>
|
||||
)}
|
||||
</LoadingFrame>
|
||||
</section>
|
||||
</div>
|
||||
</WorkspaceLayout>
|
||||
|
||||
<Dialog
|
||||
open={createOpen}
|
||||
@@ -808,7 +820,7 @@ export default function DistributionListsPage({ settings, auth }: Props) {
|
||||
onConfirm={() => void removeItem()}
|
||||
onCancel={() => setDeleteOpen(false)}
|
||||
/>
|
||||
</main>
|
||||
</WorkspaceFrame>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -856,8 +868,8 @@ function DefinitionEditor({
|
||||
</FormField>
|
||||
</section>
|
||||
|
||||
<section className="dist-lists-section">
|
||||
<div className="dist-lists-section-heading">
|
||||
<ContentSection>
|
||||
<ActionToolbar surface="section-header" className="dist-lists-section-heading">
|
||||
<span>
|
||||
<strong>Parameters</strong>
|
||||
<small>Typed values supplied by Campaign, Reporting, or Workflow</small>
|
||||
@@ -869,7 +881,7 @@ function DefinitionEditor({
|
||||
>
|
||||
<Plus size={15} /> Add parameter
|
||||
</Button>
|
||||
</div>
|
||||
</ActionToolbar>
|
||||
<div className="dist-lists-parameter-list">
|
||||
{draft.parameters.map((parameter, index) => (
|
||||
<div className="dist-lists-parameter-row" key={`${parameter.key}-${index}`}>
|
||||
@@ -889,12 +901,12 @@ function DefinitionEditor({
|
||||
<IconButton label="Remove parameter" icon={<Trash2 size={15} />} variant="ghost" disabled={!canWrite} onClick={() => onChange({ ...draft, parameters: draft.parameters.filter((_, itemIndex) => itemIndex !== index) })} />
|
||||
</div>
|
||||
))}
|
||||
{!draft.parameters.length ? <div className="dist-lists-inline-empty">No parameters</div> : null}
|
||||
{!draft.parameters.length ? <StatePanel size="inline" description="No parameters" /> : null}
|
||||
</div>
|
||||
</section>
|
||||
</ContentSection>
|
||||
|
||||
<section className="dist-lists-section dist-lists-entry-section">
|
||||
<div className="dist-lists-section-heading">
|
||||
<ContentSection className="dist-lists-entry-section">
|
||||
<ActionToolbar surface="section-header" className="dist-lists-section-heading">
|
||||
<span>
|
||||
<strong>Audience entries</strong>
|
||||
<small>Mixed local and provider-owned references; revisions are immutable after save</small>
|
||||
@@ -902,7 +914,7 @@ function DefinitionEditor({
|
||||
<Button variant="primary" disabled={!canWrite} onClick={onAddEntry}>
|
||||
<Plus size={15} /> Add entry
|
||||
</Button>
|
||||
</div>
|
||||
</ActionToolbar>
|
||||
<DataGrid
|
||||
id="distribution-list-entries"
|
||||
rows={draft.entries}
|
||||
@@ -911,7 +923,7 @@ function DefinitionEditor({
|
||||
emptyText="No audience entries."
|
||||
className="dist-lists-grid"
|
||||
/>
|
||||
</section>
|
||||
</ContentSection>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1144,10 +1156,6 @@ function ParameterValueField({ parameter, value, onChange }: { parameter: Distri
|
||||
);
|
||||
}
|
||||
|
||||
function Metric({ label, value }: { label: string; value: string | number }) {
|
||||
return <span><small>{label}</small><strong>{value}</strong></span>;
|
||||
}
|
||||
|
||||
function emptyPayload(): DistributionListPayload {
|
||||
return {
|
||||
name: "",
|
||||
|
||||
@@ -1,34 +1,3 @@
|
||||
.dist-lists-page {
|
||||
position: relative;
|
||||
height: calc(100vh - 115px);
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
color: var(--text);
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.dist-lists-page *,
|
||||
.dist-lists-page *::before,
|
||||
.dist-lists-page *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.dist-lists-shell {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
border: var(--border-line);
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.dist-lists-sidebar,
|
||||
.dist-lists-workspace,
|
||||
.dist-lists-list-frame,
|
||||
.dist-lists-content-frame,
|
||||
.dist-lists-content {
|
||||
@@ -36,32 +5,6 @@
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.dist-lists-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
border-right: var(--border-line);
|
||||
background: var(--panel-soft);
|
||||
}
|
||||
|
||||
.dist-lists-sidebar-toolbar,
|
||||
.dist-lists-workspace-toolbar,
|
||||
.dist-lists-section-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 10px;
|
||||
flex: 0 0 auto;
|
||||
border-bottom: var(--border-line);
|
||||
background: var(--panel-header);
|
||||
}
|
||||
|
||||
.dist-lists-sidebar-toolbar {
|
||||
min-height: 52px;
|
||||
padding: 8px 10px 8px 14px;
|
||||
}
|
||||
|
||||
.dist-lists-sidebar-toolbar > span,
|
||||
.dist-lists-toolbar-actions,
|
||||
.dist-lists-row-actions,
|
||||
.dist-lists-preview-actions,
|
||||
@@ -71,62 +14,11 @@
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.dist-lists-search {
|
||||
padding: 9px;
|
||||
border-bottom: var(--border-line);
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.dist-lists-search input {
|
||||
width: 100%;
|
||||
min-height: 34px;
|
||||
padding: 7px 9px;
|
||||
}
|
||||
|
||||
.dist-lists-list-frame {
|
||||
flex: 1 1 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dist-lists-list {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.dist-lists-list > button {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
min-height: 56px;
|
||||
padding: 8px 9px;
|
||||
border: 0;
|
||||
border-radius: var(--radius-sm);
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.dist-lists-list > button:hover,
|
||||
.dist-lists-list > button:focus-visible {
|
||||
background: var(--primary-soft);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.dist-lists-list > button.is-selected {
|
||||
background: var(--primary-soft-strong);
|
||||
box-shadow: inset 3px 0 0 var(--accent);
|
||||
}
|
||||
|
||||
.dist-lists-list > button > span:first-child {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dist-lists-list strong,
|
||||
.dist-lists-list small,
|
||||
.dist-lists-current-title strong,
|
||||
.dist-lists-current-title small,
|
||||
.dist-lists-source-cell strong,
|
||||
@@ -137,14 +29,12 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.dist-lists-list strong,
|
||||
.dist-lists-current-title strong,
|
||||
.dist-lists-source-cell strong {
|
||||
color: var(--text-strong);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.dist-lists-list small,
|
||||
.dist-lists-current-title small,
|
||||
.dist-lists-source-cell small {
|
||||
margin-top: 3px;
|
||||
@@ -152,16 +42,8 @@
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.dist-lists-workspace {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.dist-lists-workspace-toolbar {
|
||||
min-height: 58px;
|
||||
padding: 8px 10px 8px 14px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.dist-lists-current-title {
|
||||
@@ -202,17 +84,6 @@
|
||||
padding: 14px;
|
||||
}
|
||||
|
||||
.dist-lists-empty,
|
||||
.dist-lists-inline-empty {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
min-height: 110px;
|
||||
padding: 18px;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dist-lists-definition-fields {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(220px, 1.4fr) minmax(160px, 0.7fr) minmax(160px, 0.7fr);
|
||||
@@ -240,22 +111,10 @@
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.dist-lists-section {
|
||||
min-width: 0;
|
||||
margin-bottom: 14px;
|
||||
border: var(--border-line);
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.dist-lists-entry-section {
|
||||
min-height: 260px;
|
||||
}
|
||||
|
||||
.dist-lists-section-heading {
|
||||
min-height: 44px;
|
||||
padding: 7px 10px;
|
||||
}
|
||||
|
||||
.dist-lists-section-heading > span {
|
||||
min-width: 0;
|
||||
}
|
||||
@@ -323,39 +182,6 @@
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
.dist-lists-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, minmax(110px, 1fr));
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.dist-lists-metrics > span {
|
||||
min-height: 62px;
|
||||
padding: 9px 10px;
|
||||
border: var(--border-line);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--panel);
|
||||
}
|
||||
|
||||
.dist-lists-metrics small,
|
||||
.dist-lists-metrics strong {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dist-lists-metrics small {
|
||||
color: var(--muted);
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.dist-lists-metrics strong {
|
||||
margin-top: 6px;
|
||||
color: var(--text-strong);
|
||||
font-size: 15px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.dist-lists-content > .alert {
|
||||
margin: 8px 0;
|
||||
}
|
||||
@@ -475,10 +301,6 @@
|
||||
}
|
||||
|
||||
@media (max-width: 1040px) {
|
||||
.dist-lists-shell {
|
||||
grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.dist-lists-workspace-toolbar {
|
||||
align-items: flex-start;
|
||||
}
|
||||
@@ -505,20 +327,6 @@
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.dist-lists-shell {
|
||||
display: flex;
|
||||
min-height: calc(100vh - 115px);
|
||||
overflow: visible;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.dist-lists-sidebar {
|
||||
min-height: 230px;
|
||||
max-height: 36vh;
|
||||
border-right: 0;
|
||||
border-bottom: var(--border-line);
|
||||
}
|
||||
|
||||
.dist-lists-workspace {
|
||||
min-height: 560px;
|
||||
}
|
||||
@@ -537,7 +345,6 @@
|
||||
|
||||
.dist-lists-definition-fields,
|
||||
.dist-lists-preview-inputs,
|
||||
.dist-lists-metrics,
|
||||
.dist-lists-channel-fieldset,
|
||||
.dist-lists-parameter-row {
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
|
||||
Reference in New Issue
Block a user