diff --git a/site/src/components/PaginationWidget/PaginationNavButton.tsx b/site/src/components/PaginationWidget/PaginationNavButton.tsx index b5c8a1f9d5..3e6d905384 100644 --- a/site/src/components/PaginationWidget/PaginationNavButton.tsx +++ b/site/src/components/PaginationWidget/PaginationNavButton.tsx @@ -1,86 +1,28 @@ -import Tooltip from "@mui/material/Tooltip"; import { Button } from "components/Button/Button"; -import { - type ButtonHTMLAttributes, - type ReactNode, - useEffect, - useState, -} from "react"; +import type { ButtonHTMLAttributes, ReactNode } from "react"; type PaginationNavButtonProps = Omit< ButtonHTMLAttributes, - | "aria-disabled" - // Need to omit color for MUI compatibility - | "color" + "aria-disabled" > & { // Required/narrowed versions of default props children: ReactNode; disabled: boolean; onClick: () => void; "aria-label": string; - - // Bespoke props - disabledMessage: ReactNode; - disabledMessageTimeout?: number; }; -function PaginationNavButtonCore({ +export function PaginationNavButton({ onClick, disabled, - disabledMessage, - disabledMessageTimeout = 3000, - ...delegatedProps -}: PaginationNavButtonProps) { - const [showDisabledMessage, setShowDisabledMessage] = useState(false); - - // Inline state sync - this is safe/recommended by the React team in this case - if (!disabled && showDisabledMessage) { - setShowDisabledMessage(false); - } - - useEffect(() => { - if (!showDisabledMessage) { - return; - } - - const timeoutId = setTimeout( - () => setShowDisabledMessage(false), - disabledMessageTimeout, - ); - - return () => clearTimeout(timeoutId); - }, [showDisabledMessage, disabledMessageTimeout]); - - return ( - - {/* - * Going more out of the way to avoid attaching the disabled prop directly - * to avoid unwanted side effects of using the prop: - * - Not being focusable/keyboard-navigable - * - Not being able to call functions in response to invalid actions - * (mostly for giving direct UI feedback to those actions) - */} -