Migrate Dashboard interface patterns

webui/src/features/dashboard/DashboardPage.tsx

@@ -13,6 +13,7 @@ import {
 import {
   Button,
   DismissibleAlert,
+  DocumentationHelpLink,
   LoadingFrame,
   MetricCard,
   PageScrollViewport,
@@ -36,6 +37,10 @@ import {
 import DashboardGrid from "./DashboardGrid";
 import WidgetConfigurationDialog from "./WidgetConfigurationDialog";
 import WidgetLibrary from "./WidgetLibrary";
+import {
+  DASHBOARD_DOCUMENTATION,
+  DASHBOARD_I18N
+} from "./interfacePatterns";
 import {
   appendPlacement,
   DASHBOARD_COLUMN_COUNT,
@@ -184,8 +189,8 @@ export default function DashboardPage({
     dirty,
     onSave: persistLayout,
     onDiscard: discardChanges,
-    title: "Unsaved Dashboard layout",
-    message: "Save or discard the Dashboard arrangement before leaving this page."
+    title: "i18n:govoplan-dashboard.unsaved_layout_title",
+    message: "i18n:govoplan-dashboard.unsaved_layout_message"
   });
 
   const activeLayout = configuring ? draftLayout : savedLayout;
@@ -446,25 +451,39 @@ export default function DashboardPage({
             <p>Personal workspace assembled from installed module widgets.</p>
           </div>
           <div className="button-row compact-actions">
+            <DocumentationHelpLink reference={DASHBOARD_DOCUMENTATION} />
             {!configuring && (
               <>
-                <Button onClick={() => setRefreshKey((value) => value + 1)}>
+                <Button
+                  onClick={() => setRefreshKey((value) => value + 1)}
+                  disabled={loading}
+                  disabledReason={loading ? DASHBOARD_I18N.loading : undefined}
+                >
                   <RefreshCw size={16} /> Refresh
                 </Button>
-                <Button onClick={beginConfiguration}>
+                <Button
+                  onClick={beginConfiguration}
+                  disabled={loading}
+                  disabledReason={loading ? DASHBOARD_I18N.loading : undefined}
+                >
                   <SlidersHorizontal size={16} /> Configure
                 </Button>
               </>
             )}
             {configuring && (
               <>
-                <Button onClick={discardChanges} disabled={saving}>
+                <Button
+                  onClick={discardChanges}
+                  disabled={saving}
+                  disabledReason={saving ? DASHBOARD_I18N.saving : undefined}
+                >
                   <X size={16} /> Cancel
                 </Button>
                 <Button
                   variant="primary"
                   onClick={() => void persistLayout()}
                   disabled={saving || !dirty}
+                  disabledReason={saving ? DASHBOARD_I18N.saving : !dirty ? DASHBOARD_I18N.noChanges : undefined}
                 >
                   <Save size={16} /> {saving ? "Saving..." : "Save layout"}
                 </Button>