chore: revamp how nav buttons are defined

Parkreiner · Parkreiner · commit aef28e602325 · 2023-11-07T19:38:02.000Z
diff --git a/site/src/components/PaginationWidget/PaginationNavButtons.tsx b/site/src/components/PaginationWidget/PaginationNavButtons.tsx
@@ -0,0 +1,124 @@
+import {
+  type PropsWithChildren,
+  type ReactNode,
+  useEffect,
+  useState,
+} from "react";
+
+import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
+import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
+import Button from "@mui/material/Button";
+import Tooltip from "@mui/material/Tooltip";
+import { useTheme } from "@emotion/react";
+
+type NavProps = {
+  currentPage: number;
+  onChange: (newPage: number) => void;
+};
+
+export function LeftNavButton({ currentPage, onChange }: NavProps) {
+  const isFirstPage = currentPage <= 1;
+
+  return (
+    <BaseNavButton
+      disabledMessage="You are already on the first page"
+      disabled={isFirstPage}
+      aria-label="Previous page"
+      onClick={() => {
+        if (!isFirstPage) {
+          onChange(currentPage - 1);
+        }
+      }}
+    >
+      <KeyboardArrowLeft />
+    </BaseNavButton>
+  );
+}
+
+export function RightNavButton({ currentPage, onChange }: NavProps) {
+  const isLastPage = currentPage <= 1;
+
+  return (
+    <BaseNavButton
+      disabledMessage="You're already on the last page"
+      disabled={isLastPage}
+      aria-label="Previous page"
+      onClick={() => {
+        if (!isLastPage) {
+          onChange(currentPage + 1);
+        }
+      }}
+    >
+      <KeyboardArrowRight />
+    </BaseNavButton>
+  );
+}
+
+type BaseButtonProps = PropsWithChildren<{
+  disabled: boolean;
+  disabledMessage: ReactNode;
+  onClick: () => void;
+  "aria-label": string;
+
+  disabledMessageTimeout?: number;
+}>;
+
+function BaseNavButton({
+  children,
+  onClick,
+  disabled,
+  disabledMessage,
+  "aria-label": ariaLabel,
+  disabledMessageTimeout = 3000,
+}: BaseButtonProps) {
+  const theme = useTheme();
+  const [showDisabledMessage, setShowDisabledMessage] = useState(false);
+
+  useEffect(() => {
+    if (!showDisabledMessage) {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(
+      () => setShowDisabledMessage(false),
+      disabledMessageTimeout,
+    );
+
+    return () => window.clearTimeout(timeoutId);
+  }, [showDisabledMessage, disabledMessageTimeout]);
+
+  // Using inline state sync to help MUI render accurately more quickly; same
+  // idea as the useEffect approach, but state changes flush faster
+  if (!disabled && showDisabledMessage) {
+    setShowDisabledMessage(false);
+  }
+
+  return (
+    <Tooltip title={disabledMessage} open={showDisabledMessage}>
+      <Button
+        disabled={false}
+        aria-label={ariaLabel}
+        css={
+          disabled && {
+            borderColor: theme.palette.divider,
+            color: theme.palette.text.disabled,
+            cursor: "default",
+            "&:hover": {
+              backgroundColor: theme.palette.background.default,
+              borderColor: theme.palette.divider,
+            },
+          }
+        }
+        onClick={() => {
+          if (disabled) {
+            setShowDisabledMessage(true);
+          } else {
+            onClick();
+          }
+        }}
+      >
+        {children}
+      </Button>
+    </Tooltip>
+  );
+}
diff --git a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx
@@ -1,11 +1,9 @@
-import { type ReactElement } from "react";
-import Button from "@mui/material/Button";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft";
-import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight";
 import { useTheme } from "@emotion/react";
+
 import { PlaceholderPageButton, NumberedPageButton } from "./PageButtons";
 import { buildPagedList } from "./utils";
+import { LeftNavButton, RightNavButton } from "./PaginationNavButtons";
 
 export type PaginationWidgetBaseProps = {
   count: number;
@@ -19,7 +17,7 @@ export const PaginationWidgetBase = ({
   limit,
   onChange,
   page: currentPage,
-}: PaginationWidgetBaseProps): ReactElement | null => {
+}: PaginationWidgetBaseProps) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
   const totalPages = Math.ceil(count / limit);
@@ -28,9 +26,6 @@ export const PaginationWidgetBase = ({
     return null;
   }
 
-  const isFirstPage = currentPage <= 1;
-  const isLastPage = currentPage >= totalPages;
-
   return (
     <div
       css={{
@@ -42,17 +37,7 @@ export const PaginationWidgetBase = ({
         columnGap: "6px",
       }}
     >
-      <Button
-        aria-label="Previous page"
-        disabled={isFirstPage}
-        onClick={() => {
-          if (!isFirstPage) {
-            onChange(currentPage - 1);
-          }
-        }}
-      >
-        <KeyboardArrowLeft />
-      </Button>
+      <LeftNavButton currentPage={currentPage} onChange={onChange} />
 
       {isMobile ? (
         <NumberedPageButton
@@ -68,17 +53,7 @@ export const PaginationWidgetBase = ({
         />
       )}
 
-      <Button
-        aria-label="Next page"
-        disabled={isLastPage}
-        onClick={() => {
-          if (!isLastPage) {
-            onChange(currentPage + 1);
-          }
-        }}
-      >
-        <KeyboardArrowRight />
-      </Button>
+      <RightNavButton currentPage={currentPage} onChange={onChange} />
     </div>
   );
 };
