redo w/o tests

ui/components/CommitsTable.tsx

@@ -100,7 +100,6 @@ function CommitsTable({
           { label: "author", displayLabel: "Author", value: "author" },
         ]}
         rows={commits.commits}
-        disablePagination
       />
     </div>
   );

ui/components/ConditionsTable.tsx

@@ -21,7 +21,6 @@ function ConditionsTable({ className, conditions }: Props) {
       sortFields={[""]}
       className={className}
       widths={["10%", "10%", "25%", "55%"]}
-      disablePagination
     />
   );
 }

ui/components/DataTable.tsx

@@ -1,7 +1,4 @@
 import {
-  FormControl,
-  MenuItem,
-  Select,
   Table,
   TableBody,
   TableCell,
@@ -15,6 +12,7 @@ import styled from "styled-components";
 import Button from "./Button";
 import Flex from "./Flex";
 import Icon, { IconType } from "./Icon";
+import Pagination from "./Pagination";
 import Spacer from "./Spacer";
 import Text from "./Text";
 
@@ -34,10 +32,8 @@ export interface Props {
   sortFields: string[];
   /** an optional list of string widths for each field/column. */
   widths?: string[];
-  /** removes bottom pagination bar. */
-  disablePagination?: boolean;
-  /** array of options for rows per page. Defaults to [25, 50, 75, 100]. */
-  paginationOptions?: number[];
+  /** enables bottom pagination bar. */
+  enablePagination?: any;
 }
 
 const EmptyRow = styled(TableRow)<{ colSpan: number }>`
@@ -72,15 +68,10 @@ function UnstyledDataTable({
   rows,
   sortFields,
   widths,
-  disablePagination,
-  paginationOptions = [25, 50, 75, 100],
+  enablePagination,
 }: Props) {
   const [sort, setSort] = React.useState(sortFields[0]);
   const [reverseSort, setReverseSort] = React.useState(false);
-  const [pagination, setPagination] = React.useState({
-    start: 0,
-    length: paginationOptions[0],
-  });
   const sorted = _.sortBy(rows, sort);
 
   if (reverseSort) {
@@ -117,8 +108,10 @@ function UnstyledDataTable({
 
   const r = [];
   for (
-    let i = pagination.start;
-    i < pagination.start + pagination.length;
+    let i = enablePagination ? enablePagination.current.start : 0;
+    i < enablePagination
+      ? enablePagination.current.start + enablePagination.current.pageTotal
+      : rows.length;
     i++
   ) {
     if (sorted[i]) {
@@ -175,95 +168,16 @@ function UnstyledDataTable({
       </TableContainer>
       {/* pagination row */}
       <Spacer padding="xs" />
-      {!disablePagination && (
-        <Flex wide align end>
-          <FormControl>
-            <Flex align>
-              <label htmlFor="pagination">Rows Per Page: </label>
-              <Spacer padding="xxs" />
-              <Select
-                id="pagination"
-                variant="outlined"
-                defaultValue={paginationOptions[0]}
-                onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
-                  const newValue = parseInt(e.target.value);
-                  setPagination({ start: 0, length: newValue });
-                }}
-              >
-                {paginationOptions.map((option, index) => {
-                  return (
-                    <MenuItem key={index} value={option}>
-                      {option}
-                    </MenuItem>
-                  );
-                })}
-              </Select>
-            </Flex>
-          </FormControl>
-          <Spacer padding="base" />
-          <Text>
-            {pagination.start + 1} - {pagination.start + r.length} out of{" "}
-            {rows.length}
-          </Text>
-          <Spacer padding="base" />
-          <Flex>
-            <Button
-              color="inherit"
-              variant="text"
-              aria-label="skip to first page"
-              disabled={pagination.start === 0}
-              onClick={() => setPagination({ ...pagination, start: 0 })}
-            >
-              <Icon type={IconType.SkipPreviousIcon} size="medium" />
-            </Button>
-            <Button
-              color="inherit"
-              variant="text"
-              aria-label="back one page"
-              disabled={pagination.start === 0}
-              onClick={() =>
-                setPagination({
-                  ...pagination,
-                  start: pagination.start - pagination.length,
-                })
-              }
-            >
-              <Icon type={IconType.NavigateBeforeIcon} size="medium" />
-            </Button>
-            <Button
-              color="inherit"
-              variant="text"
-              aria-label="forward one page"
-              disabled={pagination.start + pagination.length >= rows.length}
-              onClick={() =>
-                setPagination({
-                  ...pagination,
-                  start: pagination.start + pagination.length,
-                })
-              }
-            >
-              <Icon type={IconType.NavigateNextIcon} size="medium" />
-            </Button>
-            <Button
-              color="inherit"
-              variant="text"
-              aria-label="skip to last page"
-              disabled={pagination.start + pagination.length >= rows.length}
-              onClick={() => {
-                let newStart;
-                if (rows.length % pagination.length !== 0)
-                  newStart = rows.length - (rows.length % pagination.length);
-                else newStart = rows.length - pagination.length;
-                setPagination({
-                  ...pagination,
-                  start: newStart,
-                });
-              }}
-            >
-              <Icon type={IconType.SkipNextIcon} size="medium" />
-            </Button>
-          </Flex>
-        </Flex>
+      {enablePagination && (
+        <Pagination
+          forward={enablePagination.forward}
+          skipForward={enablePagination.skipForward}
+          back={enablePagination.back}
+          skipBack={enablePagination.skipBack}
+          perPage={enablePagination.perPage}
+          perPageOptions={enablePagination.perPageOptions}
+          current={enablePagination.current}
+        />
       )}
     </div>
   );

ui/components/Pagination.tsx

@@ -0,0 +1,113 @@
+import { FormControl, MenuItem, Select } from "@material-ui/core";
+import * as React from "react";
+import styled from "styled-components";
+import Button from "./Button";
+import Flex from "./Flex";
+import Icon, { IconType } from "./Icon";
+import Spacer from "./Spacer";
+import Text from "./Text";
+
+export interface Props {
+  /** CSS MUI Overrides or other styling. */
+  className?: string;
+  /** func for forward one page button */
+  forward: () => void;
+  /** func for skip to last page button */
+  skipForward: () => void;
+  /** func for back one page button */
+  back: () => void;
+  /** func for skip to start button */
+  skipBack: () => void;
+  /** onChange func for perPage select */
+  perPage: (value) => void;
+  /** options for perPage select */
+  perPageOptions: number[];
+  /** pagination status */
+  current: { start: number; pageTotal: number; outOf: number };
+}
+
+function unstyledPagination({
+  className,
+  forward,
+  skipForward,
+  back,
+  skipBack,
+  perPage,
+  perPageOptions,
+  current,
+}: Props) {
+  return (
+    <Flex wide align end className={className}>
+      <FormControl>
+        <Flex align>
+          <label htmlFor="pagination">Rows Per Page: </label>
+          <Spacer padding="xxs" />
+          <Select
+            id="pagination"
+            variant="outlined"
+            defaultValue={perPageOptions[0]}
+            onChange={(e: React.ChangeEvent<HTMLSelectElement>) => {
+              perPage(e.target.value);
+            }}
+          >
+            {perPageOptions.map((option, index) => {
+              return (
+                <MenuItem key={index} value={option}>
+                  {option}
+                </MenuItem>
+              );
+            })}
+          </Select>
+        </Flex>
+      </FormControl>
+      <Spacer padding="base" />
+      <Text>
+        {current.start + 1} - {current.start + current.pageTotal} out of{" "}
+        {current.outOf}
+      </Text>
+      <Spacer padding="base" />
+      <Flex>
+        <Button
+          color="inherit"
+          variant="text"
+          aria-label="skip to first page"
+          disabled={current.start === 0}
+          onClick={() => skipBack()}
+        >
+          <Icon type={IconType.SkipPreviousIcon} size="medium" />
+        </Button>
+        <Button
+          color="inherit"
+          variant="text"
+          aria-label="back one page"
+          disabled={current.start === 0}
+          onClick={() => back()}
+        >
+          <Icon type={IconType.NavigateBeforeIcon} size="medium" />
+        </Button>
+        <Button
+          color="inherit"
+          variant="text"
+          aria-label="forward one page"
+          disabled={current.start + current.pageTotal >= current.outOf}
+          onClick={() => forward()}
+        >
+          <Icon type={IconType.NavigateNextIcon} size="medium" />
+        </Button>
+        <Button
+          color="inherit"
+          variant="text"
+          aria-label="skip to last page"
+          disabled={current.start + current.pageTotal >= current.outOf}
+          onClick={() => skipForward()}
+        >
+          <Icon type={IconType.SkipNextIcon} size="medium" />
+        </Button>
+      </Flex>
+    </Flex>
+  );
+}
+
+export const Pagination = styled(unstyledPagination)``;
+
+export default Pagination;

ui/components/__tests__/DataTable.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render, screen, within } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import "jest-styled-components";
 import React from "react";
 import renderer from "react-test-renderer";
@@ -89,90 +89,6 @@ describe("DataTable", () => {
       expect(firstRow.innerHTML).toMatch(/podinfo/);
     });
   });
-  describe("pagination", () => {
-    it("displays an initial portion of rows based on paginationOptions[0] prop", () => {
-      render(
-        withTheme(
-          <DataTable
-            sortFields={["name", "status"]}
-            fields={fields}
-            rows={rows}
-            paginationOptions={[1, 2]}
-          />
-        )
-      );
-      expect(screen.getAllByRole("row").length).toEqual(2);
-    });
-    it("has functioning navigation buttons and display text", () => {
-      render(
-        withTheme(
-          <DataTable
-            sortFields={["name", "status"]}
-            fields={fields}
-            rows={rows}
-            paginationOptions={[1, 2]}
-          />
-        )
-      );
-      const back = screen.getByLabelText("back one page");
-      const skipBack = screen.getByLabelText("skip to first page");
-      const forward = screen.getByLabelText("forward one page");
-      const skipForward = screen.getByLabelText("skip to last page");
-      const displayText = screen.getByText(/1 - 1 out of 3/);
-      fireEvent.click(forward);
-      expect(displayText.innerHTML).toContain("2 - 2 out of 3");
-      fireEvent.click(back);
-      expect(displayText.innerHTML).toContain("1 - 1 out of 3");
-      fireEvent.click(skipForward);
-      expect(displayText.innerHTML).toContain("3 - 3 out of 3");
-      fireEvent.click(skipBack);
-      expect(displayText.innerHTML).toContain("1 - 1 out of 3");
-    });
-    it("disables buttons based on page location", () => {
-      render(
-        withTheme(
-          <DataTable
-            sortFields={["name", "status"]}
-            fields={fields}
-            rows={rows}
-            paginationOptions={[1, 2]}
-          />
-        )
-      );
-      const back = screen.getByLabelText("back one page");
-      const skipBack = screen.getByLabelText("skip to first page");
-      const forward = screen.getByLabelText("forward one page");
-      const skipForward = screen.getByLabelText("skip to last page");
-      expect(back.hasAttribute("disabled")).toBeTruthy();
-      expect(skipBack.hasAttribute("disabled")).toBeTruthy();
-      fireEvent.click(skipForward);
-      expect(forward.hasAttribute("disabled")).toBeTruthy();
-      expect(skipForward.hasAttribute("disabled")).toBeTruthy();
-    });
-    it("resets start index to 0 and changes list length on rows per page select change", () => {
-      render(
-        withTheme(
-          <DataTable
-            sortFields={["name", "status"]}
-            fields={fields}
-            rows={rows}
-            paginationOptions={[1, 2]}
-          />
-        )
-      );
-      const nextPage = screen.getByLabelText("forward one page");
-      fireEvent.click(nextPage);
-      expect(screen.getAllByRole("row")[1].innerHTML).toMatch(/podinfo/);
-      let select;
-      screen.getAllByRole("button").forEach((button) => {
-        if (button.getAttribute("aria-haspopup")) select = button;
-      });
-      fireEvent.mouseDown(select);
-      const listbox = within(screen.getByRole("listbox"));
-      fireEvent.click(listbox.getByText("2"));
-      expect(screen.getAllByRole("row")[2].innerHTML).toMatch(/podinfo/);
-    });
-  });
   describe("snapshots", () => {
     it("renders", () => {
       const tree = renderer