Skip to content

Commit 693b08b

Browse files
Laurie T. Malauroboquat
Laurie T. Malau
authored andcommitted
pagination
1 parent 58266a4 commit 693b08b

File tree

11 files changed

+232
-93
lines changed

11 files changed

+232
-93
lines changed

components/dashboard/src/Menu.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -217,11 +217,17 @@ export default function Menu() {
217217
link: `/t/${team.slug}/members`,
218218
},
219219
];
220+
if (showUsageBasedUI) {
221+
teamSettingsList.push({
222+
title: "Usage",
223+
link: `/t/${team.slug}/usage`,
224+
});
225+
}
220226
if (currentUserInTeam?.role === "owner") {
221227
teamSettingsList.push({
222228
title: "Settings",
223229
link: `/t/${team.slug}/settings`,
224-
alternatives: getTeamSettingsMenu({ team, showPaymentUI, showUsageBasedUI }).flatMap((e) => e.link),
230+
alternatives: getTeamSettingsMenu({ team, showPaymentUI }).flatMap((e) => e.link),
225231
});
226232
}
227233

components/dashboard/src/components/Arrow.tsx

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,22 @@
44
* See License-AGPL.txt in the project root for license information.
55
*/
66

7-
function Arrow(props: { up: boolean; customBorderClasses?: string }) {
7+
function Arrow(props: { direction: string; customBorderClasses?: string }) {
8+
const { direction, customBorderClasses } = props;
9+
10+
// Using any because of known TS bug with bracket notation:
11+
// https://github.com/microsoft/TypeScript/issues/10530
12+
const directionMap: any = {
13+
up: "-135deg",
14+
down: "45deg",
15+
left: "135deg",
16+
right: "315deg",
17+
};
818
return (
919
<span
1020
className={
1121
"mx-2 " +
12-
(props.customBorderClasses ||
22+
(customBorderClasses ||
1323
"border-gray-400 dark:border-gray-500 group-hover:border-gray-600 dark:group-hover:border-gray-400")
1424
}
1525
style={{
@@ -18,7 +28,7 @@ function Arrow(props: { up: boolean; customBorderClasses?: string }) {
1828
padding: 3,
1929
borderWidth: "0 2px 2px 0",
2030
display: "inline-block",
21-
transform: `rotate(${props.up ? "-135deg" : "45deg"})`,
31+
transform: `rotate(${directionMap[direction]})`,
2232
}}
2333
></span>
2434
);

components/dashboard/src/components/DropDown.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ function DropDown(props: DropDownProps) {
4949
>
5050
{props.prefix}
5151
{current}
52-
<Arrow up={false} customBorderClasses={props.renderAsLink ? asLinkArrowBorder : undefined} />
52+
<Arrow direction={"down"} customBorderClasses={props.renderAsLink ? asLinkArrowBorder : undefined} />
5353
</span>
5454
</ContextMenu>
5555
);
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
/**
2+
* Copyright (c) 2022 Gitpod GmbH. All rights reserved.
3+
* Licensed under the GNU Affero General Public License (AGPL).
4+
* See License-AGPL.txt in the project root for license information.
5+
*/
6+
7+
import Arrow from "./Arrow";
8+
9+
function Pagination(props: { numberOfPages: number; currentPage: number; setCurrentPage: any }) {
10+
const { numberOfPages, currentPage, setCurrentPage } = props;
11+
const availablePageNumbers = [...Array(numberOfPages + 1).keys()].slice(1);
12+
13+
const nextPage = () => {
14+
if (currentPage !== numberOfPages) setCurrentPage(currentPage + 1);
15+
};
16+
const prevPage = () => {
17+
if (currentPage !== 1) setCurrentPage(currentPage - 1);
18+
};
19+
20+
return (
21+
<nav className="mt-16">
22+
<ul className="flex justify-center space-x-4">
23+
<li className="text-gray-400 cursor-pointer">
24+
<span onClick={prevPage}>
25+
<Arrow direction={"left"} />
26+
Previous
27+
</span>
28+
</li>
29+
{availablePageNumbers.map((pn) => (
30+
<li
31+
key={pn}
32+
className={`text-gray-500 cursor-pointer w-8 text-center rounded-md ${
33+
currentPage === pn ? "bg-gray-200" : ""
34+
} `}
35+
>
36+
<span onClick={() => setCurrentPage(pn)}>{pn}</span>
37+
</li>
38+
))}
39+
<li className="text-gray-400 cursor-pointer">
40+
<span onClick={nextPage}>
41+
Next
42+
<Arrow direction={"right"} />
43+
</span>
44+
</li>
45+
</ul>
46+
</nav>
47+
);
48+
}
49+
50+
export default Pagination;
Lines changed: 1 addition & 0 deletions
Loading

components/dashboard/src/start/StartWorkspace.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -519,7 +519,7 @@ export default class StartWorkspace extends React.Component<StartWorkspaceProps,
519519
>
520520
<button className="secondary">
521521
More Actions...
522-
<Arrow up={false} />
522+
<Arrow direction={"down"} />
523523
</button>
524524
</ContextMenu>
525525
<button

components/dashboard/src/teams/TeamBilling.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export default function TeamBilling() {
3131
const team = getCurrentTeam(location, teams);
3232
const [members, setMembers] = useState<TeamMemberInfo[]>([]);
3333
const [teamSubscription, setTeamSubscription] = useState<TeamSubscription2 | undefined>();
34-
const { showPaymentUI, showUsageBasedUI, currency, setCurrency } = useContext(PaymentContext);
34+
const { showPaymentUI, currency, setCurrency } = useContext(PaymentContext);
3535
const [pendingTeamPlan, setPendingTeamPlan] = useState<PendingPlan | undefined>();
3636
const [pollTeamSubscriptionTimeout, setPollTeamSubscriptionTimeout] = useState<NodeJS.Timeout | undefined>();
3737

@@ -140,7 +140,7 @@ export default function TeamBilling() {
140140

141141
return (
142142
<PageWithSubMenu
143-
subMenu={getTeamSettingsMenu({ team, showPaymentUI, showUsageBasedUI })}
143+
subMenu={getTeamSettingsMenu({ team, showPaymentUI })}
144144
title="Billing"
145145
subtitle="Manage team billing and plans."
146146
>

components/dashboard/src/teams/TeamSettings.tsx

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import { getGitpodService, gitpodHostUrl } from "../service/service";
1515
import { UserContext } from "../user-context";
1616
import { getCurrentTeam, TeamsContext } from "./teams-context";
1717

18-
export function getTeamSettingsMenu(params: { team?: Team; showPaymentUI?: boolean; showUsageBasedUI?: boolean }) {
19-
const { team, showPaymentUI, showUsageBasedUI } = params;
18+
export function getTeamSettingsMenu(params: { team?: Team; showPaymentUI?: boolean }) {
19+
const { team, showPaymentUI } = params;
2020
return [
2121
{
2222
title: "General",
@@ -30,14 +30,6 @@ export function getTeamSettingsMenu(params: { team?: Team; showPaymentUI?: boole
3030
},
3131
]
3232
: []),
33-
...(showUsageBasedUI
34-
? [
35-
{
36-
title: "Usage",
37-
link: [`/t/${team?.slug}/usage`],
38-
},
39-
]
40-
: []),
4133
];
4234
}
4335

@@ -49,7 +41,7 @@ export default function TeamSettings() {
4941
const { user } = useContext(UserContext);
5042
const location = useLocation();
5143
const team = getCurrentTeam(location, teams);
52-
const { showPaymentUI, showUsageBasedUI } = useContext(PaymentContext);
44+
const { showPaymentUI } = useContext(PaymentContext);
5345

5446
const close = () => setModal(false);
5547

@@ -76,7 +68,7 @@ export default function TeamSettings() {
7668
return (
7769
<>
7870
<PageWithSubMenu
79-
subMenu={getTeamSettingsMenu({ team, showPaymentUI, showUsageBasedUI })}
71+
subMenu={getTeamSettingsMenu({ team, showPaymentUI })}
8072
title="Settings"
8173
subtitle="Manage general team settings."
8274
>

0 commit comments

Comments
 (0)