Document reporting interface patterns

webui/src/features/reporting/ReportingPage.tsx

@@ -21,6 +21,7 @@ import {
   Button,
   DataGrid,
   Dialog,
+  DocumentationHelpLink,
   DismissibleAlert,
   IconButton,
   LoadingIndicator,
@@ -202,6 +203,10 @@ export default function ReportingPage({ settings, auth }: PlatformRouteContext)
             />
           </form>
           <span className="reporting-count">{reports.length + providerReports.length} reports</span>
+          <DocumentationHelpLink
+            reference={{ topicId: "reporting.governed-bi", documentationType: "user" }}
+            label="Open reporting documentation"
+          />
           <IconButton
             label="Reload reports"
             icon={<RefreshCw size={17} />}
@@ -265,7 +270,11 @@ export default function ReportingPage({ settings, auth }: PlatformRouteContext)
                       <IconButton label="Schedule report" icon={<CalendarClock size={17} />} variant="ghost" onClick={() => setScheduleDialogOpen(true)} />
                     }
                     <IconButton label="Save current view" icon={<Save size={17} />} variant="ghost" onClick={() => setSaveDialogOpen(true)} />
-                    <Button variant="primary" onClick={() => void execute()} disabled={!canRun || running}>
+                    <Button
+                      variant="primary"
+                      onClick={() => void execute()}
+                      disabled={!canRun || running}
+                      disabledReason={!canRun ? "Report run permission is required." : undefined}>
                       <Play size={16} aria-hidden="true" /> {running ? "Running" : "Run"}
                     </Button>
                   </div>