Make pagination ui look consistent

src/components/Pagination/ControlledPaginationControls.tsx

@@ -1,8 +1,8 @@
 import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
-import { Flex, FlexProps, HStack, Icon, IconButton, Select } from '@chakra-ui/react';
-import { ChevronDoubleLeftIcon, ChevronDoubleRightIcon } from '@heroicons/react/24/solid';
+import { Button, Flex, FlexProps, Select } from '@chakra-ui/react';
 import { NumPerPageType } from '@/types';
 import { useCallback } from 'react';
+import { ManualPageSelect } from './ManualPageSelect';
 
 export interface IControlledPaginationControlsProps extends FlexProps {
   entries: number;
@@ -49,41 +49,32 @@ export const ControlledPaginationControls = (props: IControlledPaginationControl
           <option value={100}>100</option>
         </Select>
       </Flex>
-      <HStack spacing="1" flex="1" justifyContent="flex-end">
-        <IconButton
-          aria-label="go to first page"
-          variant="outline"
-          colorScheme="gray"
-          icon={<Icon as={ChevronDoubleLeftIcon} />}
-          isDisabled={pageIndex === 0}
-          onClick={() => onChangePageIndex(0)}
-        />
-        <IconButton
+      <Flex flex="1" justifyContent="flex-end">
+        <Button
           aria-label="go to previous page"
-          variant="outline"
-          colorScheme="gray"
-          icon={<Icon as={ChevronLeftIcon} />}
+          variant="pagePrev"
+          leftIcon={<ChevronLeftIcon />}
           isDisabled={pageIndex === 0}
           onClick={handlePreviousPage}
+        >
+          Prev
+        </Button>
+        <ManualPageSelect
+          page={pageIndex + 1}
+          totalPages={pageCount}
+          onPageSelect={(p) => onChangePageIndex(p - 1)}
+          isDisabled={pageCount <= 1}
         />
-        <IconButton
+        <Button
           aria-label="go to next page"
-          variant="outline"
-          colorScheme="gray"
-          icon={<Icon as={ChevronRightIcon} />}
+          variant="pageNext"
+          rightIcon={<ChevronRightIcon />}
           isDisabled={pageIndex === pageCount - 1}
           onClick={handleNextPage}
-        />
-
-        <IconButton
-          aria-label="go to last page"
-          variant="outline"
-          colorScheme="gray"
-          icon={<Icon as={ChevronDoubleRightIcon} />}
-          isDisabled={pageIndex === pageCount - 1}
-          onClick={() => onChangePageIndex(pageCount - 1)}
-        />
-      </HStack>
+        >
+          Next
+        </Button>
+      </Flex>
     </Flex>
   );
 };

src/components/Pagination/ManualPageSelect.tsx

@@ -0,0 +1,113 @@
+import {
+  Popover,
+  PopoverTrigger,
+  Button,
+  PopoverContent,
+  PopoverHeader,
+  PopoverArrow,
+  PopoverCloseButton,
+  PopoverBody,
+  FormControl,
+  FormLabel,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  NumberIncrementStepper,
+  NumberDecrementStepper,
+  Stack,
+} from '@chakra-ui/react';
+import { clamp } from 'ramda';
+import { useState, useCallback, KeyboardEventHandler, useRef, useEffect } from 'react';
+
+const cleanPage = (page: number) => (Number.isNaN(page) ? 1 : page);
+const clampPage = (page: number, totalPages: number) => clamp(1, totalPages, page);
+
+export const ManualPageSelect = ({
+  page: currentPage = 1,
+  totalPages = 1,
+  onPageSelect,
+  isDisabled,
+}: {
+  page: number;
+  totalPages: number;
+  onPageSelect: (page: number) => void;
+  isDisabled: boolean;
+}) => {
+  // hold intermediate page in local state
+  const [page, setPage] = useState(currentPage);
+  const [isOpen, setIsOpen] = useState(false);
+  const open = () => setIsOpen(!isOpen);
+  const close = () => setIsOpen(false);
+
+  useEffect(() => {
+    setPage(currentPage);
+  }, [currentPage]);
+
+  const handleChange = useCallback(
+    (_: string, page: number) => {
+      setPage(clampPage(cleanPage(page), totalPages));
+    },
+    [totalPages],
+  );
+
+  // submit the change to page
+  const handleSubmit = useCallback(() => {
+    if (page !== currentPage) {
+      onPageSelect(page);
+    }
+    close();
+  }, [page, currentPage, onPageSelect]);
+
+  // on enter, submit the change
+  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+  const pagePickerRef = useRef(null);
+
+  return (
+    <Popover
+      placement="top"
+      size="sm"
+      isOpen={isOpen}
+      onClose={close}
+      onOpen={open}
+      initialFocusRef={pagePickerRef}
+      closeOnBlur
+      returnFocusOnClose
+    >
+      <PopoverTrigger>
+        <Button
+          aria-label={`current page is ${currentPage}, update page`}
+          variant="pageBetween"
+          data-testid="pagination-select-page"
+          isDisabled={isDisabled}
+        >
+          {currentPage.toLocaleString()} of {totalPages > 0 ? totalPages.toLocaleString() : 1}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent maxW={150}>
+        <PopoverHeader fontWeight="semibold">Select Page</PopoverHeader>
+        <PopoverArrow />
+        <PopoverCloseButton />
+        <PopoverBody>
+          <FormControl>
+            <FormLabel hidden>Select Page</FormLabel>
+            <Stack spacing={2}>
+              <NumberInput value={page} min={1} max={totalPages} onChange={handleChange} onKeyDown={handleKeyDown}>
+                <NumberInputField ref={pagePickerRef} />
+                <NumberInputStepper>
+                  <NumberIncrementStepper />
+                  <NumberDecrementStepper />
+                </NumberInputStepper>
+              </NumberInput>
+              <Button onClick={handleSubmit}>Goto Page {page.toLocaleString()}</Button>
+            </Stack>
+          </FormControl>
+        </PopoverBody>
+      </PopoverContent>
+    </Popover>
+  );
+};

src/components/Pagination/PaginationControls.tsx

@@ -1,8 +1,8 @@
 import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
-import { Flex, FlexProps, HStack, Icon, IconButton, Select } from '@chakra-ui/react';
-import { ChevronDoubleLeftIcon, ChevronDoubleRightIcon } from '@heroicons/react/24/solid';
+import { Button, Flex, FlexProps, Select } from '@chakra-ui/react';
 import { Table } from '@tanstack/react-table';
 import { useCallback } from 'react';
+import { ManualPageSelect } from './ManualPageSelect';
 
 export interface IPaginationControlsProps<T> extends FlexProps {
   table: Table<T>;
@@ -34,41 +34,32 @@ export const PaginationControls = <T extends object>(props: IPaginationControlsP
           <option value={100}>100</option>
         </Select>
       </Flex>
-      <HStack spacing="1" flex="1" justifyContent="flex-end">
-        <IconButton
-          aria-label="go to first page"
-          variant="outline"
-          colorScheme="gray"
-          icon={<Icon as={ChevronDoubleLeftIcon} />}
-          isDisabled={!table.getCanPreviousPage()}
-          onClick={() => table.setPageIndex(0)}
-        />
-        <IconButton
+      <Flex flex="1" justifyContent="flex-end">
+        <Button
           aria-label="go to previous page"
-          variant="outline"
-          colorScheme="gray"
-          icon={<Icon as={ChevronLeftIcon} />}
+          variant="pagePrev"
+          leftIcon={<ChevronLeftIcon />}
           isDisabled={!table.getCanPreviousPage()}
           onClick={() => table.previousPage()}
+        >
+          Prev
+        </Button>
+        <ManualPageSelect
+          page={pageIndex + 1}
+          totalPages={table.getPageCount()}
+          onPageSelect={(p) => table.setPageIndex(p - 1)}
+          isDisabled={entries.length <= pageSize}
         />
-        <IconButton
+        <Button
           aria-label="go to next page"
-          variant="outline"
-          colorScheme="gray"
-          icon={<Icon as={ChevronRightIcon} />}
+          variant="pageNext"
+          rightIcon={<ChevronRightIcon />}
           isDisabled={!table.getCanNextPage()}
           onClick={() => table.nextPage()}
-        />
-
-        <IconButton
-          aria-label="go to last page"
-          variant="outline"
-          colorScheme="gray"
-          icon={<Icon as={ChevronDoubleRightIcon} />}
-          isDisabled={!table.getCanNextPage()}
-          onClick={() => table.setPageIndex(table.getPageCount() - 1)}
-        />
-      </HStack>
+        >
+          Next
+        </Button>
+      </Flex>
     </Flex>
   );
 };

src/theme.ts

@@ -259,24 +259,26 @@ export const theme = extendTheme(
             backgroundColor: 'blue.50',
             zIndex: '5',
           },
-          pagePrev: {
+          pagePrev: (props: StyleFunctionProps) => ({
             borderWidth: '1px',
             borderRadius: '5px 0 0 5px',
             borderColor: 'gray.200',
             backgroundColor: 'transparent',
-          },
+            color: mode('blue.400', 'blue.200')(props),
+          }),
           pageBetween: {
             borderWidth: '1px',
             borderRadius: '0 0 0 0',
             borderColor: 'gray.200',
             backgroundColor: 'transparent',
           },
-          pageNext: {
+          pageNext: (props: StyleFunctionProps) => ({
             borderWidth: '1px',
             borderRadius: '0 5px 5px 0',
             borderColor: 'gray.200',
             backgroundColor: 'transparent',
-          },
+            color: mode('blue.400', 'blue.200')(props),
+          }),
           warning: {
             backgroundColor: 'red.500',
             color: 'gray.50',