From 78d9ae48b250a0ef6efea90817e7830f37f2e738 Mon Sep 17 00:00:00 2001
From: Albrecht Degering <albrecht@degering.name>
Date: Tue, 21 Jul 2026 12:38:45 +0200
Subject: [PATCH] feat(webui): centralize disabled button reasons

---
 webui/src/components/Button.tsx        | 13 ++++++++++---
 webui/src/index.ts                     |  1 +
 webui/tests/data-grid-actions.test.tsx |  6 ++++++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/webui/src/components/Button.tsx b/webui/src/components/Button.tsx
index 5ea6811..757a0b2 100644
--- a/webui/src/components/Button.tsx
+++ b/webui/src/components/Button.tsx
@@ -1,5 +1,12 @@
-type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & { variant?: "primary" | "secondary" | "ghost" | "danger" };
+import type { ButtonHTMLAttributes, ReactNode } from "react";
+import DisabledActionTooltip from "./DisabledActionTooltip";
 
-export default function Button({ variant = "secondary", className = "", ...props }: Props) {
-  return <button className={`btn btn-${variant} ${className}`} {...props} />;
+export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: "primary" | "secondary" | "ghost" | "danger";
+  disabledReason?: ReactNode;
+};
+
+export default function Button({ variant = "secondary", className = "", disabledReason, disabled, ...props }: ButtonProps) {
+  const button = <button className={`btn btn-${variant} ${className}`} disabled={disabled || Boolean(disabledReason)} {...props} />;
+  return <DisabledActionTooltip reason={disabledReason}>{button}</DisabledActionTooltip>;
 }
diff --git a/webui/src/index.ts b/webui/src/index.ts
index 0fc48da..8ba36c4 100644
--- a/webui/src/index.ts
+++ b/webui/src/index.ts
@@ -47,6 +47,7 @@ export { default as AdminPageLayout } from "./components/admin/AdminPageLayout";
 export { default as AdminSelectionList } from "./components/admin/AdminSelectionList";
 export { adminErrorMessage, formatAdminDateTime, joinLabels } from "./components/admin/adminUtils";
 export { default as Button } from "./components/Button";
+export type { ButtonProps } from "./components/Button";
 export { default as Card } from "./components/Card";
 export { default as ConfirmDialog } from "./components/ConfirmDialog";
 export { default as ConnectionTree } from "./components/ConnectionTree";
diff --git a/webui/tests/data-grid-actions.test.tsx b/webui/tests/data-grid-actions.test.tsx
index 6e343b7..37a8654 100644
--- a/webui/tests/data-grid-actions.test.tsx
+++ b/webui/tests/data-grid-actions.test.tsx
@@ -3,6 +3,7 @@ function assertEqual<T>(actual: T, expected: T, message: string): void {
 }
 
 import { renderToStaticMarkup } from "react-dom/server";
+import Button from "../src/components/Button";
 import { DataGridEmptyAction, DataGridRowActions } from "../src/components/table/DataGrid";
 import TableActionGroup, { runTableAction } from "../src/components/table/TableActionGroup";
 
@@ -60,3 +61,8 @@ const noReorderActions = renderToStaticMarkup(
   <DataGridRowActions onAddBelow={noop} onRemove={noop} />
 );
 assertEqual(buttonCount(noReorderActions), 2, "row actions omit reorder controls when ordering does not apply");
+
+const reasonedButton = renderToStaticMarkup(<Button disabledReason="Permission denied">Save</Button>);
+assertEqual(reasonedButton.includes("disabled=\"\""), true, "a disabled reason disables the central button");
+assertEqual(reasonedButton.includes("disabled-action-tooltip"), true, "a disabled reason remains keyboard discoverable");
+assertEqual(reasonedButton.includes("disabledReason"), false, "the central-only disabled reason is not passed to the DOM");