pagination

Author: Laurie T. Malau

components/dashboard/src/Menu.tsx

@@ -217,11 +217,17 @@ export default function Menu() {
                     link: `/t/${team.slug}/members`,
                 },
             ];
+            if (showUsageBasedUI) {
+                teamSettingsList.push({
+                    title: "Usage",
+                    link: `/t/${team.slug}/usage`,
+                });
+            }
             if (currentUserInTeam?.role === "owner") {
                 teamSettingsList.push({
                     title: "Settings",
                     link: `/t/${team.slug}/settings`,
-                    alternatives: getTeamSettingsMenu({ team, showPaymentUI, showUsageBasedUI }).flatMap((e) => e.link),
+                    alternatives: getTeamSettingsMenu({ team, showPaymentUI }).flatMap((e) => e.link),
                 });
             }
 

components/dashboard/src/components/Arrow.tsx

@@ -4,12 +4,22 @@
  * See License-AGPL.txt in the project root for license information.
  */
 
-function Arrow(props: { up: boolean; customBorderClasses?: string }) {
+function Arrow(props: { direction: string; customBorderClasses?: string }) {
+    const { direction, customBorderClasses } = props;
+
+    // Using any because of known TS bug with bracket notation:
+    // https://github.com/microsoft/TypeScript/issues/10530
+    const directionMap: any = {
+        up: "-135deg",
+        down: "45deg",
+        left: "135deg",
+        right: "315deg",
+    };
     return (
         <span
             className={
                 "mx-2 " +
-                (props.customBorderClasses ||
+                (customBorderClasses ||
                     "border-gray-400 dark:border-gray-500 group-hover:border-gray-600 dark:group-hover:border-gray-400")
             }
             style={{
@@ -18,7 +28,7 @@ function Arrow(props: { up: boolean; customBorderClasses?: string }) {
                 padding: 3,
                 borderWidth: "0 2px 2px 0",
                 display: "inline-block",
-                transform: `rotate(${props.up ? "-135deg" : "45deg"})`,
+                transform: `rotate(${directionMap[direction]})`,
             }}
         ></span>
     );

components/dashboard/src/components/DropDown.tsx

@@ -49,7 +49,7 @@ function DropDown(props: DropDownProps) {
             >
                 {props.prefix}
                 {current}
-                <Arrow up={false} customBorderClasses={props.renderAsLink ? asLinkArrowBorder : undefined} />
+                <Arrow direction={"down"} customBorderClasses={props.renderAsLink ? asLinkArrowBorder : undefined} />
             </span>
         </ContextMenu>
     );

components/dashboard/src/components/Pagination.tsx

@@ -0,0 +1,50 @@
+/**
+ * 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 Arrow from "./Arrow";
+
+function Pagination(props: { numberOfPages: number; currentPage: number; setCurrentPage: any }) {
+    const { numberOfPages, currentPage, setCurrentPage } = props;
+    const availablePageNumbers = [...Array(numberOfPages + 1).keys()].slice(1);
+
+    const nextPage = () => {
+        if (currentPage !== numberOfPages) setCurrentPage(currentPage + 1);
+    };
+    const prevPage = () => {
+        if (currentPage !== 1) setCurrentPage(currentPage - 1);
+    };
+
+    return (
+        <nav className="mt-16">
+            <ul className="flex justify-center space-x-4">
+                <li className="text-gray-400 cursor-pointer">
+                    <span onClick={prevPage}>
+                        <Arrow direction={"left"} />
+                        Previous
+                    </span>
+                </li>
+                {availablePageNumbers.map((pn) => (
+                    <li
+                        key={pn}
+                        className={`text-gray-500 cursor-pointer w-8 text-center rounded-md ${
+                            currentPage === pn ? "bg-gray-200" : ""
+                        } `}
+                    >
+                        <span onClick={() => setCurrentPage(pn)}>{pn}</span>
+                    </li>
+                ))}
+                <li className="text-gray-400 cursor-pointer">
+                    <span onClick={nextPage}>
+                        Next
+                        <Arrow direction={"right"} />
+                    </span>
+                </li>
+            </ul>
+        </nav>
+    );
+}
+
+export default Pagination;

components/dashboard/src/images/credits.svg

@@ -519,7 +519,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
                                 >
                                     <button className="secondary">
                                         More Actions...
-                                        <Arrow up={false} />
+                                        <Arrow direction={"down"} />
                                     </button>
                                 </ContextMenu>
                                 <button

components/dashboard/src/start/StartWorkspace.tsx

@@ -31,7 +31,7 @@ export default function TeamBilling() {
     const team = getCurrentTeam(location, teams);
     const [members, setMembers] = useState<TeamMemberInfo[]>([]);
     const [teamSubscription, setTeamSubscription] = useState<TeamSubscription2 | undefined>();
-    const { showPaymentUI, showUsageBasedUI, currency, setCurrency } = useContext(PaymentContext);
+    const { showPaymentUI, currency, setCurrency } = useContext(PaymentContext);
     const [pendingTeamPlan, setPendingTeamPlan] = useState<PendingPlan | undefined>();
     const [pollTeamSubscriptionTimeout, setPollTeamSubscriptionTimeout] = useState<NodeJS.Timeout | undefined>();
 
@@ -140,7 +140,7 @@ export default function TeamBilling() {
 
     return (
         <PageWithSubMenu
-            subMenu={getTeamSettingsMenu({ team, showPaymentUI, showUsageBasedUI })}
+            subMenu={getTeamSettingsMenu({ team, showPaymentUI })}
             title="Billing"
             subtitle="Manage team billing and plans."
         >

components/dashboard/src/teams/TeamBilling.tsx

@@ -15,8 +15,8 @@ import { getGitpodService, gitpodHostUrl } from "../service/service";
 import { UserContext } from "../user-context";
 import { getCurrentTeam, TeamsContext } from "./teams-context";
 
-export function getTeamSettingsMenu(params: { team?: Team; showPaymentUI?: boolean; showUsageBasedUI?: boolean }) {
-    const { team, showPaymentUI, showUsageBasedUI } = params;
+export function getTeamSettingsMenu(params: { team?: Team; showPaymentUI?: boolean }) {
+    const { team, showPaymentUI } = params;
     return [
         {
             title: "General",
@@ -30,14 +30,6 @@ export function getTeamSettingsMenu(params: { team?: Team; showPaymentUI?: boole
                   },
               ]
             : []),
-        ...(showUsageBasedUI
-            ? [
-                  {
-                      title: "Usage",
-                      link: [`/t/${team?.slug}/usage`],
-                  },
-              ]
-            : []),
     ];
 }
 
@@ -49,7 +41,7 @@ export default function TeamSettings() {
     const { user } = useContext(UserContext);
     const location = useLocation();
     const team = getCurrentTeam(location, teams);
-    const { showPaymentUI, showUsageBasedUI } = useContext(PaymentContext);
+    const { showPaymentUI } = useContext(PaymentContext);
 
     const close = () => setModal(false);
 
@@ -76,7 +68,7 @@ export default function TeamSettings() {
     return (
         <>
             <PageWithSubMenu
-                subMenu={getTeamSettingsMenu({ team, showPaymentUI, showUsageBasedUI })}
+                subMenu={getTeamSettingsMenu({ team, showPaymentUI })}
                 title="Settings"
                 subtitle="Manage general team settings."
             >