fixes

gitpod-io · Aug 3, 2022 · cdfe3b1 · cdfe3b1
1 parent 140848c
commit cdfe3b1
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 71 deletions.
diff --git a/...s/dashboard/src/components/Pagination.tsx → ...s/dashboard/src/Pagination/Pagination.tsx b/...s/dashboard/src/components/Pagination.tsx → ...s/dashboard/src/Pagination/Pagination.tsx
@@ -4,18 +4,18 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-import { usePagination } from "../custom-hooks/usePagination";
-import Arrow from "./Arrow";
+import { getPaginationNumbers } from "./getPagination";
+import Arrow from "../components/Arrow";
 
-function Pagination(props: {
+interface PaginationProps {
     totalResults: number;
     totalNumberOfPages: number;
     currentPage: number;
     setCurrentPage: any;
-    resultsPerPage: number;
-}) {
-    const { totalResults, totalNumberOfPages, currentPage, setCurrentPage, resultsPerPage } = props;
-    const calculatedPagination = usePagination({ totalResults, totalNumberOfPages, currentPage, resultsPerPage });
+}
+
+function Pagination({ totalNumberOfPages, currentPage, setCurrentPage }: PaginationProps) {
+    const calculatedPagination = getPaginationNumbers(totalNumberOfPages, currentPage);
 
     const nextPage = () => {
         if (currentPage !== totalNumberOfPages) setCurrentPage(currentPage + 1);
@@ -42,12 +42,11 @@ function Pagination(props: {
                         Previous
                     </span>
                 </li>
-                {calculatedPagination &&
-                    calculatedPagination.map((pn) => (
-                        <li key={pn} className={getClassnames(pn)}>
-                            <span onClick={() => setCurrentPage(pn)}>{pn}</span>
-                        </li>
-                    ))}
+                {calculatedPagination.map((pn) => (
+                    <li key={pn} className={getClassnames(pn)}>
+                        <span onClick={() => setCurrentPage(pn)}>{pn}</span>
+                    </li>
+                ))}
                 <li
                     className={`text-gray-400 ${
                         currentPage === totalNumberOfPages ? "disabled" : "cursor-pointer text-gray-500"

diff --git a/components/dashboard/src/Pagination/getPagination.spec.ts b/components/dashboard/src/Pagination/getPagination.spec.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+import { getPaginationNumbers } from "./getPagination";
+
+test("getPagination", () => {
+    const totalNumberOfPages = 15;
+    const currentPage = 1;
+
+    expect(getPaginationNumbers(totalNumberOfPages, currentPage)).toStrictEqual([1, 2, 3, "...", 15]);
+
+    expect(getPaginationNumbers(37, 4)).toStrictEqual([1, "...", 3, 4, 5, "...", 37]);
+
+    expect(getPaginationNumbers(28, 7)).toStrictEqual([1, "...", 6, 7, 8, "...", 28]);
+
+    expect(getPaginationNumbers(5, 1)).toStrictEqual([1, 2, 3, 4, 5]);
+});
diff --git a/components/dashboard/src/Pagination/getPagination.ts b/components/dashboard/src/Pagination/getPagination.ts
@@ -0,0 +1,47 @@
+/**
+ * Copyright (c) 2022 Gitpod GmbH. All rights reserved.
+ * Licensed under the GNU Affero General Public License (AGPL).
+ * See License-AGPL.txt in the project root for license information.
+ */
+
+export function getPaginationNumbers(totalNumberOfPages: number, currentPage: number) {
+    const adjacentToCurrentPage = 1; // This is the number(s) we see next to the currentPage
+    const totalNumbersShownInPagination = 6;
+    let calculatedPagination: number[] = [];
+
+    const pageNumbersAsArray = (startRange: number, endRange: number) => {
+        return [...Array(endRange + 1).keys()].slice(startRange);
+    };
+
+    const minimumAmountInBetweenToShowEllipsis = 2;
+    // Without ellipsis aka normal case
+    if (totalNumberOfPages <= totalNumbersShownInPagination) {
+        return (calculatedPagination = pageNumbersAsArray(1, totalNumberOfPages));
+    }
+
+    // Otherwise, we show the ellipses
+    const toTheRightOfCurrent = Math.min(currentPage + adjacentToCurrentPage, totalNumberOfPages);
+    const toTheLeftOfCurrent = Math.max(currentPage - adjacentToCurrentPage, 1);
+
+    const showRightEllipsis = toTheRightOfCurrent < totalNumberOfPages - minimumAmountInBetweenToShowEllipsis; // e.g. "1 2 3 ... 7"
+    const showLeftEllipsis = toTheLeftOfCurrent > minimumAmountInBetweenToShowEllipsis; // e.g. 1 ... 5 6 7"
+
+    if (showRightEllipsis && !showLeftEllipsis) {
+        let leftSideNumbers = 3;
+        let leftPageNumbersAsArray = pageNumbersAsArray(1, leftSideNumbers);
+        return [...leftPageNumbersAsArray, "...", totalNumberOfPages];
+    }
+
+    if (showLeftEllipsis && !showRightEllipsis) {
+        let rightSideNumbers = 3;
+        let rightPageNumbersAsArray = pageNumbersAsArray(totalNumberOfPages - rightSideNumbers, totalNumberOfPages);
+        return [1, "...", ...rightPageNumbersAsArray];
+    }
+
+    if (showRightEllipsis && showLeftEllipsis) {
+        let middleNumbers = pageNumbersAsArray(toTheLeftOfCurrent, toTheRightOfCurrent);
+        return [1, "...", ...middleNumbers, "...", totalNumberOfPages];
+    }
+
+    return calculatedPagination;
+}
diff --git a/components/dashboard/src/custom-hooks/usePagination.ts b/components/dashboard/src/custom-hooks/usePagination.ts
diff --git a/components/dashboard/src/teams/TeamUsage.tsx b/components/dashboard/src/teams/TeamUsage.tsx
@@ -17,7 +17,7 @@ import {
 import { AttributionId } from "@gitpod/gitpod-protocol/lib/attribution";
 import { Item, ItemField, ItemsList } from "../components/ItemsList";
 import moment from "moment";
-import Pagination from "../components/Pagination";
+import Pagination from "../Pagination/Pagination";
 import Header from "../components/Header";
 import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
 import { FeatureFlagContext } from "../contexts/FeatureFlagContext";
@@ -240,7 +240,6 @@ function TeamUsage() {
                                         currentPage={currentPage}
                                         setCurrentPage={setCurrentPage}
                                         totalNumberOfPages={totalNumberOfPages}
-                                        resultsPerPage={resultsPerPage}
                                     />
                                 )}
                             </div>