Skip to content

Commit e6df4f6

Browse files
committed
[dashboard] add pagination to user search
1 parent 746638b commit e6df4f6

File tree

5 files changed

+58
-17
lines changed

5 files changed

+58
-17
lines changed

components/dashboard/src/Pagination/Pagination.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,12 @@ interface PaginationProps {
1313
setPage: (page: number) => void;
1414
}
1515

16-
function Pagination({ totalNumberOfPages, currentPage, setPage }: PaginationProps) {
16+
function Pagination(props: PaginationProps) {
17+
const { totalNumberOfPages, setPage } = props;
18+
if (totalNumberOfPages <= 1 || props.currentPage < 1) {
19+
return <></>;
20+
}
21+
const currentPage = Math.min(totalNumberOfPages, props.currentPage);
1722
const calculatedPagination = getPaginationNumbers(totalNumberOfPages, currentPage);
1823

1924
const nextPage = () => {

components/dashboard/src/admin/ProjectsSearch.tsx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import ProjectDetail from "./ProjectDetail";
1313
import { getGitpodService } from "../service/service";
1414
import { AdminGetListResult, Project } from "@gitpod/gitpod-protocol";
1515
import { PageWithAdminSubMenu } from "./PageWithAdminSubMenu";
16+
import Pagination from "../Pagination/Pagination";
1617

1718
export default function ProjectsSearchPage() {
1819
return (
@@ -29,6 +30,11 @@ export function ProjectsSearch() {
2930
const [searchResult, setSearchResult] = useState<AdminGetListResult<Project>>({ total: 0, rows: [] });
3031
const [currentProject, setCurrentProject] = useState<Project | undefined>(undefined);
3132
const [currentProjectOwner, setCurrentProjectOwner] = useState<string | undefined>("");
33+
const pageLength = 50;
34+
const [currentPage, setCurrentPage] = useState(1);
35+
useEffect(() => {
36+
search();
37+
}, [currentPage]);
3238

3339
useEffect(() => {
3440
const projectId = location.pathname.split("/")[3];
@@ -75,9 +81,9 @@ export function ProjectsSearch() {
7581
try {
7682
const result = await getGitpodService().server.adminGetProjectsBySearchTerm({
7783
searchTerm,
78-
limit: 50,
84+
limit: pageLength,
7985
orderBy: "creationTime",
80-
offset: 0,
86+
offset: (currentPage - 1) * pageLength,
8187
orderDir: "desc",
8288
});
8389
setSearchResult(result);
@@ -131,6 +137,11 @@ export function ProjectsSearch() {
131137
<ProjectResultItem project={project} />
132138
))}
133139
</div>
140+
<Pagination
141+
currentPage={currentPage}
142+
setPage={setCurrentPage}
143+
totalNumberOfPages={Math.ceil(searchResult.total / pageLength)}
144+
/>
134145
</>
135146
);
136147

components/dashboard/src/admin/TeamsSearch.tsx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { getGitpodService } from "../service/service";
1414
import { AdminGetListResult, Team } from "@gitpod/gitpod-protocol";
1515
import Label from "./Label";
1616
import { PageWithAdminSubMenu } from "./PageWithAdminSubMenu";
17+
import Pagination from "../Pagination/Pagination";
1718

1819
export default function TeamsSearchPage() {
1920
return (
@@ -29,6 +30,11 @@ export function TeamsSearch() {
2930
const [searchTerm, setSearchTerm] = useState("");
3031
const [currentTeam, setCurrentTeam] = useState<Team | undefined>(undefined);
3132
const [searchResult, setSearchResult] = useState<AdminGetListResult<Team>>({ total: 0, rows: [] });
33+
const pageLength = 50;
34+
const [currentPage, setCurrentPage] = useState(1);
35+
useEffect(() => {
36+
search();
37+
}, [currentPage]);
3238

3339
useEffect(() => {
3440
const teamId = location.pathname.split("/")[3];
@@ -56,9 +62,9 @@ export function TeamsSearch() {
5662
try {
5763
const result = await getGitpodService().server.adminGetTeams({
5864
searchTerm,
59-
limit: 100,
65+
limit: pageLength,
6066
orderBy: "creationTime",
61-
offset: 0,
67+
offset: (currentPage - 1) * pageLength,
6268
orderDir: "desc",
6369
});
6470
setSearchResult(result);
@@ -120,6 +126,11 @@ export function TeamsSearch() {
120126
<TeamResultItem team={team} />
121127
))}
122128
</div>
129+
<Pagination
130+
currentPage={currentPage}
131+
setPage={setCurrentPage}
132+
totalNumberOfPages={Math.ceil(searchResult.total / pageLength)}
133+
/>
123134
</>
124135
);
125136

components/dashboard/src/admin/UserSearch.tsx

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import moment from "moment";
99
import { useEffect, useState } from "react";
1010
import { useLocation } from "react-router";
1111
import { Link } from "react-router-dom";
12+
import Pagination from "../Pagination/Pagination";
1213
import { getGitpodService } from "../service/service";
1314
import { PageWithAdminSubMenu } from "./PageWithAdminSubMenu";
1415
import UserDetail from "./UserDetail";
@@ -19,6 +20,11 @@ export default function UserSearch() {
1920
const [searchTerm, setSearchTerm] = useState("");
2021
const [searching, setSearching] = useState(false);
2122
const [currentUser, setCurrentUserState] = useState<User | undefined>(undefined);
23+
const pageLength = 50;
24+
const [currentPage, setCurrentPage] = useState(1);
25+
useEffect(() => {
26+
search();
27+
}, [currentPage]);
2228

2329
useEffect(() => {
2430
const userId = location.pathname.split("/")[3];
@@ -46,9 +52,9 @@ export default function UserSearch() {
4652
try {
4753
const result = await getGitpodService().server.adminGetUsers({
4854
searchTerm,
49-
limit: 50,
55+
limit: pageLength,
5056
orderBy: "creationDate",
51-
offset: 0,
57+
offset: (currentPage - 1) * pageLength,
5258
orderDir: "desc",
5359
});
5460
setSearchResult(result);
@@ -103,6 +109,11 @@ export default function UserSearch() {
103109
<UserEntry user={u} />
104110
))}
105111
</div>
112+
<Pagination
113+
currentPage={currentPage}
114+
setPage={setCurrentPage}
115+
totalNumberOfPages={Math.ceil(searchResult.total / pageLength)}
116+
/>
106117
</PageWithAdminSubMenu>
107118
);
108119
}

components/dashboard/src/admin/WorkspacesSearch.tsx

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import moment from "moment";
1919
import { useEffect, useState } from "react";
2020
import { useLocation } from "react-router";
2121
import { Link } from "react-router-dom";
22+
import Pagination from "../Pagination/Pagination";
2223
import { getGitpodService } from "../service/service";
2324
import { getProject, WorkspaceStatusIndicator } from "../workspaces/WorkspaceEntry";
2425
import WorkspaceDetail from "./WorkspaceDetail";
@@ -43,6 +44,11 @@ export function WorkspaceSearch(props: Props) {
4344
const [queryTerm, setQueryTerm] = useState("");
4445
const [searching, setSearching] = useState(false);
4546
const [currentWorkspace, setCurrentWorkspaceState] = useState<WorkspaceAndInstance | undefined>(undefined);
47+
const pageLength = 50;
48+
const [currentPage, setCurrentPage] = useState(1);
49+
useEffect(() => {
50+
search();
51+
}, [currentPage]);
4652

4753
useEffect(() => {
4854
const workspaceId = location.pathname.split("/")[3];
@@ -72,11 +78,6 @@ export function WorkspaceSearch(props: Props) {
7278
}
7379

7480
const search = async () => {
75-
// Disables empty search on the workspace search page
76-
if (!props.user && queryTerm.length === 0) {
77-
return;
78-
}
79-
8081
setSearching(true);
8182
try {
8283
const query: AdminGetWorkspacesQuery = {
@@ -87,14 +88,11 @@ export function WorkspaceSearch(props: Props) {
8788
} else if (matchesNewWorkspaceIdExactly(queryTerm)) {
8889
query.workspaceId = queryTerm;
8990
}
90-
if (!query.ownerId && !query.instanceIdOrWorkspaceId && !query.workspaceId) {
91-
return;
92-
}
9391

9492
const result = await getGitpodService().server.adminGetWorkspaces({
95-
limit: 100,
93+
limit: pageLength,
9694
orderBy: "instanceCreationTime",
97-
offset: 0,
95+
offset: (currentPage - 1) * pageLength,
9896
orderDir: "desc",
9997
...query,
10098
});
@@ -152,6 +150,11 @@ export function WorkspaceSearch(props: Props) {
152150
<WorkspaceEntry ws={ws} />
153151
))}
154152
</div>
153+
<Pagination
154+
currentPage={currentPage}
155+
setPage={setCurrentPage}
156+
totalNumberOfPages={Math.ceil(searchResult.total / pageLength)}
157+
/>
155158
</>
156159
);
157160
}

0 commit comments

Comments
 (0)