refactor: adopt shared page and workspace layouts

webui/src/features/reports/AggregateReportsPage.tsx

@@ -5,11 +5,9 @@ import {
   Button,
   Card,
   DataGrid,
-  DismissibleAlert,
   LoadingFrame,
   MetricCard,
-  PageScrollViewport,
-  PageTitle,
+  PageLayout,
   StatusBadge,
   TableActionGroup,
   formatDateTime,
@@ -167,24 +165,21 @@ export default function AggregateReportsPage({ settings }: {settings: ApiSetting
   const outcomes = report?.outcomes;
 
   return (
-    <PageScrollViewport className="aggregate-reports-page">
-      <div className="content-pad workspace-data-page">
-      <div className="page-heading split workspace-heading">
-        <div>
-          <PageTitle loading={listLoading || reportLoading}>i18n:govoplan-campaign.reports.88bc3fe3</PageTitle>
-          <p className="muted">i18n:govoplan-campaign.privacy_protected_campaign_outcomes_without_reci.5b8a100d</p>
-        </div>
-        <div className="button-row compact-actions">
+    <PageLayout
+      mode="workspace"
+      className="aggregate-reports-page"
+      title="i18n:govoplan-campaign.reports.88bc3fe3"
+      description="i18n:govoplan-campaign.privacy_protected_campaign_outcomes_without_reci.5b8a100d"
+      error={error}
+      actions={
           <Button
             onClick={() => void Promise.all([loadCampaigns(), selectedFromUrl ? loadReport(selectedFromUrl) : Promise.resolve()])}
             disabled={listLoading || reportLoading}
           >
             <RefreshCw size={16} aria-hidden="true" /> i18n:govoplan-campaign.refresh.56e3badc
           </Button>
-        </div>
-      </div>
-
-      {error && <DismissibleAlert tone="danger" resetKey={error} floating>{error}</DismissibleAlert>}
+      }
+    >
 
       <Card title="i18n:govoplan-campaign.campaign_reports_available_to_you.f14fa403">
         <LoadingFrame loading={listLoading} label="i18n:govoplan-campaign.loading_campaign_reports_.61ec1ee8">
@@ -252,8 +247,7 @@ export default function AggregateReportsPage({ settings }: {settings: ApiSetting
           </>
         )}
       </LoadingFrame>
-      </div>
-    </PageScrollViewport>
+    </PageLayout>
   );
 }