@oneuptime/common 14.0.12 → 14.0.14

package/UI/Components/Pagination/Pagination.tsx

@@ -1,8 +1,13 @@
 import Icon from "../Icon/Icon";
 import IconProp from "../../../Types/Icon/IconProp";
 import Modal from "../Modal/Modal";
+import useTranslateValue from "../../Utils/Translation";
+import { translateTemplate } from "../../Utils/TranslateTemplate";
+import PaginationCopy from "./PaginationCopy";
+import { getPaginationSummary } from "./PaginationSummary";
 import PaginationUtil, {
   DefaultItemsOnPageOptions,
+  DefaultMaxVisiblePages,
   ItemRange,
   PageWindowItem,
 } from "./PaginationUtil";
@@ -42,7 +47,7 @@ export interface ComponentProps {
   // Optional. Page sizes offered in the "rows per page" dropdown.
   itemsOnPageOptions?: Array<number> | undefined;
   /*
-   * Optional. Denser type and padding, for footers that sit under a
+   * Optional. Smaller controls and less padding, for footers that sit under a
    * compact data view (logs, traces) rather than under a full table.
    */
   isCompact?: boolean | undefined;
@@ -55,9 +60,123 @@ export interface ComponentProps {
   isDisabled?: boolean | undefined;
 }
 
+/*
+ * The control's two sizes. The footer is chrome, not content, so both are a
+ * single row of small, quiet controls in the table's caption type: borderless
+ * arrows and page numbers that only take a background on hover, and a tinted
+ * chip for the page the reader is on. Compact is a notch denser again, for
+ * the logs and traces views, whose own rows are denser than a table's.
+ */
+export interface PaginationSize {
+  // The bar's padding. The default lines its text up with a table's cells.
+  barClassName: string;
+  // How tall every control on the bar is.
+  heightClassName: string;
+  // An arrow: a square of that height.
+  squareClassName: string;
+  /*
+   * A page number or a gap. A minimum width rather than padding alone, so a
+   * row of single-digit pages does not read as a row of narrower buttons than
+   * the two- and three-digit ones beside it.
+   */
+  pageClassName: string;
+  // The rows-per-page select, with room on the right for its chevron.
+  selectClassName: string;
+}
+
+export const DefaultPaginationSize: PaginationSize = {
+  barClassName: "px-4 py-2.5 sm:px-6",
+  heightClassName: "h-7",
+  squareClassName: "h-7 w-7",
+  pageClassName: "h-7 min-w-7 px-1.5",
+  selectClassName: "h-7 pl-2.5 pr-7",
+};
+
+export const CompactPaginationSize: PaginationSize = {
+  barClassName: "px-4 py-2",
+  heightClassName: "h-6",
+  squareClassName: "h-6 w-6",
+  pageClassName: "h-6 min-w-6 px-1",
+  selectClassName: "h-6 pl-2 pr-6",
+};
+
+/*
+ * What every arrow, page number, gap and indicator shares. The focus ring is
+ * inset so a footer that clips its overflow cannot cut it off, and the hover
+ * colours fade in over a short transition that is dropped for a reader who
+ * asks for less motion.
+ */
+export const CONTROL_CLASS_NAME: string =
+  "inline-flex shrink-0 items-center justify-center rounded-md text-xs transition focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-indigo-500 motion-reduce:transition-none";
+
+/*
+ * The page the reader is on: a tinted chip, the only coloured thing on the
+ * bar. Every colour here, and below, is one the dark theme remaps
+ * (Common/UI/Styles/Theme.css).
+ */
+export const CURRENT_PAGE_CLASS_NAME: string =
+  "cursor-default bg-indigo-50 font-semibold text-indigo-700 ring-1 ring-inset ring-indigo-200";
+
+// Any other page: quiet until it is hovered.
+export const PAGE_CLASS_NAME: string =
+  "cursor-pointer font-medium text-gray-600 hover:bg-gray-100 hover:text-gray-900";
+
+export const ARROW_CLASS_NAME: string =
+  "cursor-pointer text-gray-500 hover:bg-gray-100 hover:text-gray-900";
+
+export const GAP_CLASS_NAME: string =
+  "cursor-pointer font-medium text-gray-400 hover:bg-gray-100 hover:text-gray-700";
+
+// "Page 12 of 24": plain text between the arrows.
+export const INDICATOR_CLASS_NAME: string =
+  "whitespace-nowrap px-2 text-xs font-medium text-gray-700";
+
+// The same words, when they also open the jump dialog.
+export const JUMPABLE_INDICATOR_CLASS_NAME: string =
+  "cursor-pointer font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-900";
+
+/*
+ * A control that cannot be used right now keeps its colour and fades, rather
+ * than turning a paler grey: the dark theme maps text-gray-300 to a light
+ * slate, so a dead arrow drawn that way was brighter than a live one. Its
+ * hover classes are left off, not overridden - the dark theme's hover rules
+ * are !important and would light a disabled control up anyway.
+ */
+export const DISABLED_CONTROL_CLASS_NAME: string =
+  "cursor-not-allowed opacity-40";
+
+// The same control, dead: its resting colour, faded, with no hover.
+const disabledClassName: (enabledClassName: string) => string = (
+  enabledClassName: string,
+): string => {
+  const restingClassNames: Array<string> = enabledClassName
+    .split(" ")
+    .filter((className: string): boolean => {
+      return (
+        className.length > 0 &&
+        !className.includes(":") &&
+        !className.startsWith("cursor-")
+      );
+    });
+
+  return [...restingClassNames, DISABLED_CONTROL_CLASS_NAME].join(" ");
+};
+
 const Pagination: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  const { translateString } = useTranslateValue();
+
+  type TranslateFunction = (text: string) => string;
+
+  const translate: TranslateFunction = (text: string): string => {
+    return translateString(text) || text;
+  };
+
+  const size: PaginationSize = props.isCompact
+    ? CompactPaginationSize
+    : DefaultPaginationSize;
+
   /*
    * Has-more mode: the count is a lower bound, so there is no last page to
    * link to and no "of N" to print. Prev/next and the page size are all the
@@ -110,6 +229,14 @@ const Pagination: FunctionComponent<ComponentProps> = (
     setGoToPageValue("");
   }, [currentPageNumber]);
 
+  /*
+   * Narrow screens have no page list, so no gaps either: there the page
+   * indicator opens the same dialog - for exactly the lists whose page list
+   * would collapse a gap on a wider screen.
+   */
+  const canJumpFromIndicator: boolean =
+    !isHasMoreMode && totalPageCount > DefaultMaxVisiblePages;
+
   const itemRange: ItemRange = PaginationUtil.getItemRange({
     currentPageNumber: currentPageNumber,
     itemsOnPage: props.itemsOnPage,
@@ -123,8 +250,6 @@ const Pagination: FunctionComponent<ComponentProps> = (
       props.itemsOnPageOptions || DefaultItemsOnPageOptions,
     );
 
-  const textSizeClassName: string = props.isCompact ? "text-xs" : "text-sm";
-
   type NavigateToPageFunction = (pageNumber: number) => void;
 
   const navigateToPage: NavigateToPageFunction = (pageNumber: number): void => {
@@ -135,6 +260,14 @@ const Pagination: FunctionComponent<ComponentProps> = (
     props.onNavigateToPage(pageNumber, props.itemsOnPage);
   };
 
+  type OpenGoToPageModalFunction = () => void;
+
+  const openGoToPageModal: OpenGoToPageModalFunction = (): void => {
+    if (!isDisabled) {
+      setIsGoToPageModalVisible(true);
+    }
+  };
+
   type SubmitGoToPageFunction = () => void;
 
   const submitGoToPage: SubmitGoToPageFunction = (): void => {
@@ -150,55 +283,13 @@ const Pagination: FunctionComponent<ComponentProps> = (
     );
   };
 
-  type GetSummaryFunction = () => string;
-
-  const getSummary: GetSummaryFunction = (): string => {
-    const pluralLabel: string = props.pluralLabel.toLowerCase();
-    const singularLabel: string = props.singularLabel.toLowerCase();
-
-    if (itemRange.isEmpty) {
-      return `No ${pluralLabel}`;
-    }
-
-    const rangeText: string =
-      itemRange.firstItemNumber === itemRange.lastItemNumber
-        ? itemRange.firstItemNumber.toLocaleString()
-        : `${itemRange.firstItemNumber.toLocaleString()}-${itemRange.lastItemNumber.toLocaleString()}`;
-
-    if (isHasMoreMode) {
-      /*
-       * The count cannot be printed here — it is a lower bound that also
-       * includes the probe row the payload dropped. The trailing "+" is all
-       * that can be said about what comes after this page.
-       */
-      return `Showing ${rangeText}${props.hasMore ? "+" : ""} ${pluralLabel}`;
-    }
-
-    return `Showing ${rangeText} of ${props.totalItemsCount.toLocaleString()} ${
-      props.totalItemsCount === 1 ? singularLabel : pluralLabel
-    }`;
-  };
+  type GetArrowClassNameFunction = (isButtonDisabled: boolean) => string;
 
-  /*
-   * A minimum width rather than padding alone, so a row of single-digit
-   * pages does not read as a row of narrower buttons than the two- and
-   * three-digit ones beside it.
-   */
-  const pageButtonBaseClassName: string = `relative inline-flex items-center justify-center border border-gray-300 font-medium transition-colors focus:z-20 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-indigo-500 ${
-    props.isCompact
-      ? "min-w-8 px-2 py-1.5 text-xs"
-      : "min-w-9 px-2 py-2 text-sm"
-  }`;
-
-  type GetArrowButtonClassNameFunction = (isButtonDisabled: boolean) => string;
-
-  const getArrowButtonClassName: GetArrowButtonClassNameFunction = (
+  const getArrowClassName: GetArrowClassNameFunction = (
     isButtonDisabled: boolean,
   ): string => {
-    return `${pageButtonBaseClassName} ${
-      isButtonDisabled
-        ? "cursor-not-allowed bg-gray-50 text-gray-300"
-        : "cursor-pointer bg-white text-gray-500 hover:bg-gray-50 hover:text-gray-700"
+    return `${CONTROL_CLASS_NAME} ${size.squareClassName} ${
+      isButtonDisabled ? disabledClassName(ARROW_CLASS_NAME) : ARROW_CLASS_NAME
     }`;
   };
 
@@ -209,14 +300,27 @@ const Pagination: FunctionComponent<ComponentProps> = (
   ): ReactElement => {
     const isCurrentPage: boolean = pageNumber === currentPageNumber;
 
+    /*
+     * The current page keeps its chip while the bar is frozen, so the reader
+     * can still see where they are.
+     */
+    let stateClassName: string = PAGE_CLASS_NAME;
+
+    if (isCurrentPage) {
+      stateClassName = CURRENT_PAGE_CLASS_NAME;
+    } else if (isDisabled) {
+      stateClassName = disabledClassName(PAGE_CLASS_NAME);
+    }
+
     return (
       <li className="max-sm:hidden sm:flex" key={`page-${pageNumber}`}>
         <button
           type="button"
           data-testid={`pagination-page-${pageNumber}`}
-          aria-label={
-            isCurrentPage ? `Page ${pageNumber}` : `Go to page ${pageNumber}`
-          }
+          aria-label={translateTemplate(
+            isCurrentPage ? PaginationCopy.page : PaginationCopy.goToPageNumber,
+            { page: pageNumber.toLocaleString() },
+          )}
           aria-current={isCurrentPage ? "page" : undefined}
           disabled={isDisabled}
           onClick={() => {
@@ -224,15 +328,7 @@ const Pagination: FunctionComponent<ComponentProps> = (
               navigateToPage(pageNumber);
             }
           }}
-          className={`${pageButtonBaseClassName} ${
-            isCurrentPage
-              ? "z-10 border-indigo-500 bg-indigo-50 text-indigo-600"
-              : "bg-white text-gray-600 hover:bg-gray-50"
-          } ${
-            isDisabled && !isCurrentPage
-              ? "cursor-not-allowed text-gray-300"
-              : "cursor-pointer"
-          }`}
+          className={`${CONTROL_CLASS_NAME} ${size.pageClassName} tabular-nums ${stateClassName}`}
         >
           {pageNumber.toLocaleString()}
         </button>
@@ -248,18 +344,13 @@ const Pagination: FunctionComponent<ComponentProps> = (
         <button
           type="button"
           data-testid={`pagination-${key}`}
-          aria-label="Go to a page in between"
-          title="Go to page"
+          aria-label={translate(PaginationCopy.pagesInBetween)}
+          aria-haspopup="dialog"
+          title={translate(PaginationCopy.goToPage)}
           disabled={isDisabled}
-          onClick={() => {
-            if (!isDisabled) {
-              setIsGoToPageModalVisible(true);
-            }
-          }}
-          className={`${pageButtonBaseClassName} bg-white text-gray-400 ${
-            isDisabled
-              ? "cursor-not-allowed"
-              : "cursor-pointer hover:bg-gray-50 hover:text-gray-600"
+          onClick={openGoToPageModal}
+          className={`${CONTROL_CLASS_NAME} ${size.pageClassName} ${
+            isDisabled ? disabledClassName(GAP_CLASS_NAME) : GAP_CLASS_NAME
           }`}
         >
           &hellip;
@@ -268,30 +359,92 @@ const Pagination: FunctionComponent<ComponentProps> = (
     );
   };
 
+  type GetCurrentPageIndicatorFunction = () => ReactElement;
+
+  /*
+   * Where the reader is, on a screen too narrow for the page list: "Page 12
+   * of 24" (or just "Page 12" when the total is unknown).
+   */
+  const getCurrentPageIndicator: GetCurrentPageIndicatorFunction =
+    (): ReactElement => {
+      const text: string = isHasMoreMode
+        ? translateTemplate(PaginationCopy.page, {
+            page: currentPageNumber.toLocaleString(),
+          })
+        : translateTemplate(PaginationCopy.pageOfPages, {
+            page: currentPageNumber.toLocaleString(),
+            total: totalPageCount.toLocaleString(),
+          });
+
+      if (!canJumpFromIndicator) {
+        return (
+          <span
+            data-testid="pagination-current-page-indicator"
+            className={INDICATOR_CLASS_NAME}
+          >
+            {text}
+          </span>
+        );
+      }
+
+      return (
+        <button
+          type="button"
+          data-testid="pagination-current-page-indicator"
+          aria-haspopup="dialog"
+          title={translate(PaginationCopy.goToPage)}
+          disabled={isDisabled}
+          onClick={openGoToPageModal}
+          className={`${CONTROL_CLASS_NAME} ${
+            size.heightClassName
+          } whitespace-nowrap px-2 ${
+            isDisabled
+              ? disabledClassName(JUMPABLE_INDICATOR_CLASS_NAME)
+              : JUMPABLE_INDICATOR_CLASS_NAME
+          }`}
+        >
+          {text}
+        </button>
+      );
+    };
+
   return (
     <>
       <nav
-        className={`flex flex-col gap-3 border-t border-gray-200 bg-white px-4 py-3 text-left sm:flex-row sm:items-center sm:justify-between ${
-          props.className || ""
-        }`}
+        className={`flex flex-wrap items-center justify-between gap-x-6 gap-y-2 border-t border-gray-200 bg-white text-left ${
+          size.barClassName
+        } ${props.className || ""}`}
         data-testid={props.dataTestId}
-        aria-label={`Pagination for ${props.pluralLabel}`}
+        aria-label={translateTemplate(PaginationCopy.regionLabel, {
+          items: props.pluralLabel,
+        })}
       >
         <p
-          className={`${textSizeClassName} shrink-0 whitespace-nowrap text-gray-500`}
+          className="min-w-0 text-xs text-gray-500"
           data-testid="pagination-summary"
           aria-live="polite"
         >
-          {props.isLoading ? "Loading…" : getSummary()}
+          {props.isLoading
+            ? translate(PaginationCopy.loading)
+            : getPaginationSummary({
+                itemRange: itemRange,
+                totalItemsCount: props.totalItemsCount,
+                singularLabel: props.singularLabel,
+                pluralLabel: props.pluralLabel,
+                hasMore: props.hasMore,
+              })}
         </p>
 
-        <div className="flex flex-wrap items-center justify-start gap-x-3 gap-y-3 sm:justify-end">
+        <div
+          className="flex flex-wrap items-center gap-x-5 gap-y-2"
+          data-testid="pagination-controls"
+        >
           <div className="flex items-center gap-2">
             <label
               htmlFor={itemsOnPageSelectId}
-              className={`${textSizeClassName} whitespace-nowrap text-gray-500`}
+              className="whitespace-nowrap text-xs text-gray-500"
             >
-              Rows per page
+              {translate(PaginationCopy.rowsPerPage)}
             </label>
             <div className="relative">
               <select
@@ -313,7 +466,11 @@ const Pagination: FunctionComponent<ComponentProps> = (
                    */
                   props.onNavigateToPage(1, newItemsOnPage);
                 }}
-                className={`cursor-pointer appearance-none rounded-md border border-gray-300 bg-white py-1.5 pl-2.5 pr-8 font-medium text-gray-700 shadow-sm transition-colors hover:bg-gray-50 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-400 ${textSizeClassName}`}
+                className={`${
+                  size.selectClassName
+                } block cursor-pointer appearance-none rounded-md border border-gray-300 bg-white py-0 text-xs font-medium text-gray-700 shadow-sm transition focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 disabled:cursor-not-allowed disabled:opacity-50 motion-reduce:transition-none ${
+                  isDisabled ? "" : "hover:border-gray-400"
+                }`}
               >
                 {itemsOnPageOptions.map((option: number) => {
                   return (
@@ -323,33 +480,28 @@ const Pagination: FunctionComponent<ComponentProps> = (
                   );
                 })}
               </select>
-              <span className="pointer-events-none absolute inset-y-0 right-2 flex items-center">
+              <span className="pointer-events-none absolute inset-y-0 right-1.5 flex items-center">
                 <Icon
                   icon={IconProp.ChevronDown}
-                  className="h-4 w-4 text-gray-400"
+                  className="h-3.5 w-3.5 text-gray-400"
                 />
               </span>
             </div>
           </div>
 
-          <ul
-            className="isolate inline-flex -space-x-px rounded-md shadow-sm"
-            role="list"
-          >
+          <ul className="flex items-center gap-1" role="list">
             <li className="flex">
               <button
                 type="button"
                 data-testid="pagination-previous-button"
                 disabled={isPreviousDisabled}
-                aria-label="Go to previous page"
+                aria-label={translate(PaginationCopy.previousPage)}
                 onClick={() => {
                   if (!isPreviousDisabled) {
                     navigateToPage(currentPageNumber - 1);
                   }
                 }}
-                className={`${getArrowButtonClassName(
-                  isPreviousDisabled,
-                )} rounded-l-md`}
+                className={getArrowClassName(isPreviousDisabled)}
               >
                 <Icon icon={IconProp.ChevronLeft} className="h-4 w-4" />
               </button>
@@ -360,25 +512,18 @@ const Pagination: FunctionComponent<ComponentProps> = (
              * single indicator instead so the control never wraps into a
              * second row of buttons.
              */}
-            <li className="flex sm:hidden">
-              <span
-                data-testid="pagination-current-page-indicator"
-                className={`${pageButtonBaseClassName} bg-white text-gray-600`}
-              >
-                {isHasMoreMode
-                  ? `Page ${currentPageNumber.toLocaleString()}`
-                  : `Page ${currentPageNumber.toLocaleString()} of ${totalPageCount.toLocaleString()}`}
-              </span>
-            </li>
+            <li className="flex sm:hidden">{getCurrentPageIndicator()}</li>
 
             {isHasMoreMode && (
               <li className="max-sm:hidden sm:flex">
                 <span
                   data-testid="pagination-current-page-indicator-desktop"
                   aria-current="page"
-                  className={`${pageButtonBaseClassName} z-10 border-indigo-500 bg-indigo-50 text-indigo-600`}
+                  className={INDICATOR_CLASS_NAME}
                 >
-                  {`Page ${currentPageNumber.toLocaleString()}`}
+                  {translateTemplate(PaginationCopy.page, {
+                    page: currentPageNumber.toLocaleString(),
+                  })}
                 </span>
               </li>
             )}
@@ -396,15 +541,13 @@ const Pagination: FunctionComponent<ComponentProps> = (
                 type="button"
                 data-testid="pagination-next-button"
                 disabled={isNextDisabled}
-                aria-label="Go to next page"
+                aria-label={translate(PaginationCopy.nextPage)}
                 onClick={() => {
                   if (!isNextDisabled) {
                     navigateToPage(currentPageNumber + 1);
                   }
                 }}
-                className={`${getArrowButtonClassName(
-                  isNextDisabled,
-                )} rounded-r-md`}
+                className={getArrowClassName(isNextDisabled)}
               >
                 <Icon icon={IconProp.ChevronRight} className="h-4 w-4" />
               </button>
@@ -415,9 +558,11 @@ const Pagination: FunctionComponent<ComponentProps> = (
 
       {isGoToPageModalVisible && (
         <Modal
-          title="Go to page"
-          description={`This list has ${totalPageCount.toLocaleString()} pages. Enter the one you want to see.`}
-          submitButtonText="Go"
+          title={PaginationCopy.goToPage}
+          description={translateTemplate(PaginationCopy.goToPageDescription, {
+            count: totalPageCount.toLocaleString(),
+          })}
+          submitButtonText={PaginationCopy.goToPage}
           closeButtonText="Cancel"
           disableSubmitButton={goToPageValue === ""}
           onSubmit={submitGoToPage}
@@ -431,7 +576,7 @@ const Pagination: FunctionComponent<ComponentProps> = (
               htmlFor={goToPageInputId}
               className="block text-sm font-medium text-gray-700"
             >
-              Page number
+              {translate(PaginationCopy.pageNumber)}
             </label>
             <input
               id={goToPageInputId}

package/UI/Components/Pagination/PaginationCopy.ts

@@ -0,0 +1,71 @@
+/*
+ * The words the shared pagination control shows of its own: the region's
+ * name, the rows-per-page label, the arrows and page numbers, the page
+ * indicator, the summary and the jump-to-a-page dialog.
+ *
+ * Kept in one React-free module so the control renders these exact strings
+ * and App/Tests/Dashboard/PaginationI18n can check that each has an entry in
+ * all seventeen Dashboard locale files - a string is translated by looking up
+ * its English text, so one with no entry silently stays English.
+ *
+ * Every {{placeholder}} is filled with a number, except {{items}} in the
+ * region's name, which is the list's own plural label. A locale keeps each
+ * placeholder and puts it where its grammar wants it.
+ */
+
+export const PaginationCopy: {
+  regionLabel: string;
+  rowsPerPage: string;
+  previousPage: string;
+  nextPage: string;
+  page: string;
+  goToPageNumber: string;
+  pageOfPages: string;
+  pagesInBetween: string;
+  goToPage: string;
+  pageNumber: string;
+  goToPageDescription: string;
+  loading: string;
+  showingRangeOfTotal: string;
+  showingRange: string;
+  noItems: string;
+} = {
+  regionLabel: "Pagination for {{items}}",
+  rowsPerPage: "Rows per page",
+  previousPage: "Go to previous page",
+  nextPage: "Go to next page",
+  // The page the reader is on, named and shown on its own.
+  page: "Page {{page}}",
+  goToPageNumber: "Go to page {{page}}",
+  pageOfPages: "Page {{page}} of {{total}}",
+  // A collapsed gap in the page list, which opens the jump dialog.
+  pagesInBetween: "Go to a page in between",
+  // The jump dialog's title and its button, and the hint on what opens it.
+  goToPage: "Go to page",
+  pageNumber: "Page number",
+  goToPageDescription:
+    "This list has {{count}} pages. Enter the one you want to see.",
+  loading: "Loading...",
+  /*
+   * The summary in a locale. English names the rows instead ("Showing 1-10
+   * of 240 monitors"), but the noun is the caller's - not every caller
+   * translates it, and no locale file can hold every noun in every case its
+   * grammar needs - so a translated summary leaves it out ("1-10 von 240").
+   * See getPaginationSummary in Pagination.tsx.
+   */
+  showingRangeOfTotal: "Showing {{range}} of {{total}}",
+  // Has-more mode, where the total is unknown: "Showing 1-10+".
+  showingRange: "Showing {{range}}",
+  noItems: "No items",
+};
+
+/*
+ * Every string above, in the order it is declared - what the locale files
+ * have to carry.
+ */
+export const getPaginationUiStrings: () => Array<string> =
+  (): Array<string> => {
+    return Object.values(PaginationCopy);
+  };
+
+export default PaginationCopy;