coder · Parkreiner · Dec 2, 2023 · Nov 30, 2023 · Nov 30, 2023 · Nov 30, 2023
diff --git a/site/src/components/PaginationWidget/PaginationContainer.mocks.ts b/site/src/components/PaginationWidget/PaginationContainer.mocks.ts
@@ -0,0 +1,45 @@
+/**
+ * @file Mock input props for use with PaginationContainer's tests and stories.
+ *
+ * Had to split this off into a separate file because housing these in the test
+ * file and then importing them from the stories file was causing Chromatic's
+ * Vite test environment to break
+ */
+import type { PaginationResult } from "./PaginationContainer";
+
+type ResultBase = Omit<
+  PaginationResult,
+  "isPreviousData" | "currentOffsetStart" | "totalRecords" | "totalPages"
+>;
+
+export const mockPaginationResultBase: ResultBase = {
+  isSuccess: false,
+  currentPage: 1,
+  limit: 25,
+  hasNextPage: false,
+  hasPreviousPage: false,
+  goToPreviousPage: () => {},
+  goToNextPage: () => {},
+  goToFirstPage: () => {},
+  onPageChange: () => {},
+};
+
+export const mockInitialRenderResult: PaginationResult = {
+  ...mockPaginationResultBase,
+  isSuccess: false,
+  isPreviousData: false,
+  currentOffsetStart: undefined,
+  hasNextPage: false,
+  hasPreviousPage: false,
+  totalRecords: undefined,
+  totalPages: undefined,
+};
+
+export const mockSuccessResult: PaginationResult = {
+  ...mockPaginationResultBase,
+  isSuccess: true,
+  isPreviousData: false,
+  currentOffsetStart: 1,
+  totalPages: 1,
+  totalRecords: 4,
+};
diff --git a/site/src/components/PaginationWidget/PaginationContainer.stories.tsx b/site/src/components/PaginationWidget/PaginationContainer.stories.tsx
@@ -0,0 +1,122 @@
+import type {
+  ComponentProps,
+  FC,
+  HTMLAttributes,
+  PropsWithChildren,
+} from "react";
+import { PaginationContainer } from "./PaginationContainer";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+  mockPaginationResultBase,
+  mockInitialRenderResult,
+} from "./PaginationContainer.mocks";
+
+// Filtering out optional <div> props to give better auto-complete experience
+type EssentialComponent = FC<
+  Omit<
+    ComponentProps<typeof PaginationContainer>,
+    keyof HTMLAttributes<HTMLDivElement>
+  > &
+    PropsWithChildren
+>;
+
+const meta: Meta<EssentialComponent> = {
+  title: "components/PaginationContainer",
+  component: PaginationContainer,
+  args: {
+    paginationUnitLabel: "puppies",
+    children: <div>Put any content here</div>,
+  },
+};
+
+export default meta;
+type Story = StoryObj<EssentialComponent>;
+
+export const FirstPageBeforeFetch: Story = {
+  args: {
+    query: mockInitialRenderResult,
+  },
+};
+
+export const FirstPageWithData: Story = {
+  args: {
+    query: {
+      ...mockPaginationResultBase,
+      isSuccess: true,
+      currentPage: 1,
+      currentOffsetStart: 1,
+      totalRecords: 100,
+      totalPages: 4,
+      hasPreviousPage: false,
+      hasNextPage: true,
+      isPreviousData: false,
+    },
+  },
+};
+
+export const FirstPageWithLittleData: Story = {
+  args: {
+    query: {
+      ...mockPaginationResultBase,
+      isSuccess: true,
+      currentPage: 1,
+      currentOffsetStart: 1,
+      totalRecords: 7,
+      totalPages: 1,
+      hasPreviousPage: false,
+      hasNextPage: false,
+      isPreviousData: false,
+    },
+  },
+};
+
+export const FirstPageWithNoData: Story = {
+  args: {
+    query: {
+      ...mockPaginationResultBase,
+      isSuccess: true,
+      currentPage: 1,
+      currentOffsetStart: 1,
+      totalRecords: 0,
+      totalPages: 0,
+      hasPreviousPage: false,
+      hasNextPage: false,
+      isPreviousData: false,
+    },
+  },
+};
+
+export const TransitionFromFirstToSecondPage: Story = {
+  args: {
+    query: {
+      ...mockPaginationResultBase,
+      isSuccess: true,
+      currentPage: 2,
+      currentOffsetStart: 26,
+      totalRecords: 100,
+      totalPages: 4,
+      hasPreviousPage: false,
+      hasNextPage: false,
+      isPreviousData: true,
+    },
+    children: <div>Previous data from page 1</div>,
+  },
+};
+
+export const SecondPageWithData: Story = {
+  args: {
+    query: {
+      ...mockPaginationResultBase,
+      isSuccess: true,
+      currentPage: 2,
+      currentOffsetStart: 26,
+      totalRecords: 100,
+      totalPages: 4,
+      hasPreviousPage: true,
+      hasNextPage: true,
+      isPreviousData: false,
+    },
+    children: <div>New data for page 2</div>,
+  },
+};
diff --git a/site/src/components/PaginationWidget/PaginationContainer.tsx b/site/src/components/PaginationWidget/PaginationContainer.tsx
@@ -0,0 +1,53 @@
+import { type FC, type HTMLAttributes } from "react";
+import { type PaginationResultInfo } from "hooks/usePaginatedQuery";
+import { PaginationWidgetBase } from "./PaginationWidgetBase";
+import { PaginationHeader } from "./PaginationHeader";
+
+export type PaginationResult = PaginationResultInfo & {
+  isPreviousData: boolean;
+};
+
+type PaginationProps = HTMLAttributes<HTMLDivElement> & {
+  query: PaginationResult;
+  paginationUnitLabel: string;
+};
+
+export const PaginationContainer: FC<PaginationProps> = ({
+  children,
+  query,
+  paginationUnitLabel,
+  ...delegatedProps
+}) => {
+  return (
+    <>
+      <PaginationHeader
+        limit={query.limit}
+        totalRecords={query.totalRecords}
+        currentOffsetStart={query.currentOffsetStart}
+        paginationUnitLabel={paginationUnitLabel}
+      />
+
+      <div
+        css={{
+          display: "flex",
+          flexFlow: "column nowrap",
+          rowGap: "16px",
+        }}
+        {...delegatedProps}
+      >
+        {children}
+
+        {query.isSuccess && (
+          <PaginationWidgetBase
+            totalRecords={query.totalRecords}
+            currentPage={query.currentPage}
+            pageSize={query.limit}
+            onPageChange={query.onPageChange}
+            hasPreviousPage={query.hasPreviousPage}
+            hasNextPage={query.hasNextPage}
+          />
+        )}
+      </div>
+    </>
+  );
+};
diff --git a/site/src/components/PaginationWidget/PaginationHeader.tsx b/site/src/components/PaginationWidget/PaginationHeader.tsx
@@ -0,0 +1,62 @@
+import { type FC } from "react";
+import { useTheme } from "@emotion/react";
+import Skeleton from "@mui/material/Skeleton";
+
+type PaginationHeaderProps = {
+  paginationUnitLabel: string;
+  limit: number;
+  totalRecords: number | undefined;
+  currentOffsetStart: number | undefined;
+};
+
+export const PaginationHeader: FC<PaginationHeaderProps> = ({
+  paginationUnitLabel,
+  limit,
+  totalRecords,
+  currentOffsetStart,
+}) => {
+  const theme = useTheme();
+
+  return (
+    <div
+      css={{
+        display: "flex",
+        flexFlow: "row nowrap",
+        alignItems: "center",
+        margin: 0,
+        fontSize: "13px",
+        paddingBottom: "8px",
+        color: theme.palette.text.secondary,
+        height: "36px", // The size of a small button
+        "& strong": {
+          color: theme.palette.text.primary,
+        },
+      }}
+    >
+      {totalRecords !== undefined ? (
+        <>
+          {/**
+           * Have to put text content in divs so that flexbox doesn't scramble
+           * the inner text nodes up
+           */}
+          {totalRecords === 0 && <div>No records available</div>}
+
+          {totalRecords !== 0 && currentOffsetStart !== undefined && (
+            <div>
+              Showing {paginationUnitLabel}{" "}
+              <strong>
+                {currentOffsetStart}&ndash;
+                {currentOffsetStart +
+                  Math.min(limit - 1, totalRecords - currentOffsetStart)}
+              </strong>{" "}
+              (<strong>{totalRecords.toLocaleString()}</strong>{" "}
+              {paginationUnitLabel} total)
+            </div>
+          )}
+        </>
+      ) : (
+        <Skeleton variant="text" width={160} height={16} />
+      )}
+    </div>
+  );
+};
diff --git a/site/src/components/PaginationWidget/PaginationWidgetBase.test.tsx b/site/src/components/PaginationWidget/PaginationWidgetBase.test.tsx
@@ -74,12 +74,15 @@ describe(PaginationWidgetBase.name, () => {
       expect(prevButton).not.toBeDisabled();
       expect(prevButton).toHaveAttribute("aria-disabled", "false");
 
+      await userEvent.click(prevButton);
+      expect(onPageChange).toHaveBeenCalledTimes(1);
+
       expect(nextButton).not.toBeDisabled();
       expect(nextButton).toHaveAttribute("aria-disabled", "false");
 
-      await userEvent.click(prevButton);
       await userEvent.click(nextButton);
       expect(onPageChange).toHaveBeenCalledTimes(2);
+
       unmount();
     }
   });

diff --git a/site/src/components/PaginationWidget/PaginationWidgetBase.tsx b/site/src/components/PaginationWidget/PaginationWidgetBase.tsx
@@ -12,13 +12,18 @@ export type PaginationWidgetBaseProps = {
   pageSize: number;
   totalRecords: number;
   onPageChange: (newPage: number) => void;
+
+  hasPreviousPage?: boolean;
+  hasNextPage?: boolean;
 };
 
 export const PaginationWidgetBase = ({
   currentPage,
   pageSize,
   totalRecords,
   onPageChange,
+  hasPreviousPage,
+  hasNextPage,
 }: PaginationWidgetBaseProps) => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down("md"));
@@ -28,8 +33,11 @@ export const PaginationWidgetBase = ({
     return null;
   }
 
-  const onFirstPage = currentPage <= 1;
-  const onLastPage = currentPage >= totalPages;
+  const currentPageOffset = (currentPage - 1) * pageSize;
+  const isPrevDisabled = !(hasPreviousPage ?? currentPage > 1);
+  const isNextDisabled = !(
+    hasNextPage ?? pageSize + currentPageOffset < totalRecords
+  );
 
   return (
     <div
@@ -38,16 +46,16 @@ export const PaginationWidgetBase = ({
         alignItems: "center",
         display: "flex",
         flexDirection: "row",
-        padding: "20px",
+        padding: "0 20px",
         columnGap: "6px",
       }}
     >
       <PaginationNavButton
         disabledMessage="You are already on the first page"
-        disabled={onFirstPage}
+        disabled={isPrevDisabled}
         aria-label="Previous page"
         onClick={() => {
-          if (!onFirstPage) {
+          if (!isPrevDisabled) {
             onPageChange(currentPage - 1);
           }
         }}
@@ -70,11 +78,11 @@ export const PaginationWidgetBase = ({
       )}
 
       <PaginationNavButton
-        disabledMessage="You're already on the last page"
-        disabled={onLastPage}
+        disabledMessage="You are already on the last page"
+        disabled={isNextDisabled}
         aria-label="Next page"
         onClick={() => {
-          if (!onLastPage) {
+          if (!isNextDisabled) {
             onPageChange(currentPage + 1);
           }
         }}