feat(webui): centralize disabled button reasons

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>;
 }

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";

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");