[dashboard] add pagination to user search

Author: svenefftinge

components/dashboard/src/admin/ProjectsSearch.tsx

@@ -13,6 +13,7 @@ import ProjectDetail from "./ProjectDetail";
 import { getGitpodService } from "../service/service";
 import { AdminGetListResult, Project } from "@gitpod/gitpod-protocol";
 import { PageWithAdminSubMenu } from "./PageWithAdminSubMenu";
+import Pagination from "../Pagination/Pagination";
 
 export default function ProjectsSearchPage() {
     return (
@@ -24,6 +25,8 @@ export default function ProjectsSearchPage() {
 
 export function ProjectsSearch() {
     const location = useLocation();
+    const pageLength = 50;
+    const [currentPage, setCurrentPage] = useState(0);
     const [searchTerm, setSearchTerm] = useState("");
     const [searching, setSearching] = useState(false);
     const [searchResult, setSearchResult] = useState<AdminGetListResult<Project>>({ total: 0, rows: [] });
@@ -75,9 +78,9 @@ export function ProjectsSearch() {
         try {
             const result = await getGitpodService().server.adminGetProjectsBySearchTerm({
                 searchTerm,
-                limit: 50,
+                limit: pageLength,
                 orderBy: "creationTime",
-                offset: 0,
+                offset: currentPage * pageLength,
                 orderDir: "desc",
             });
             setSearchResult(result);
@@ -86,6 +89,11 @@ export function ProjectsSearch() {
         }
     };
 
+    const updatePage = (page: number) => {
+        setCurrentPage(page);
+        search();
+    };
+
     return (
         <>
             <div className="pt-8 flex">
@@ -131,6 +139,11 @@ export function ProjectsSearch() {
                     <ProjectResultItem project={project} />
                 ))}
             </div>
+            <Pagination
+                currentPage={currentPage}
+                setPage={updatePage}
+                totalNumberOfPages={searchResult.total / pageLength}
+            />
         </>
     );
 

components/dashboard/src/admin/TeamsSearch.tsx

@@ -14,6 +14,7 @@ import { getGitpodService } from "../service/service";
 import { AdminGetListResult, Team } from "@gitpod/gitpod-protocol";
 import Label from "./Label";
 import { PageWithAdminSubMenu } from "./PageWithAdminSubMenu";
+import Pagination from "../Pagination/Pagination";
 
 export default function TeamsSearchPage() {
     return (
@@ -25,6 +26,8 @@ export default function TeamsSearchPage() {
 
 export function TeamsSearch() {
     const location = useLocation();
+    const pageLength = 50;
+    const [currentPage, setCurrentPage] = useState(0);
     const [searching, setSearching] = useState(false);
     const [searchTerm, setSearchTerm] = useState("");
     const [currentTeam, setCurrentTeam] = useState<Team | undefined>(undefined);
@@ -56,16 +59,21 @@ export function TeamsSearch() {
         try {
             const result = await getGitpodService().server.adminGetTeams({
                 searchTerm,
-                limit: 100,
+                limit: pageLength,
                 orderBy: "creationTime",
-                offset: 0,
+                offset: currentPage * pageLength,
                 orderDir: "desc",
             });
             setSearchResult(result);
         } finally {
             setSearching(false);
         }
     };
+
+    const updatePage = (page: number) => {
+        setCurrentPage(page);
+        search();
+    };
     return (
         <>
             <div className="pt-8 flex">
@@ -120,6 +128,11 @@ export function TeamsSearch() {
                     <TeamResultItem team={team} />
                 ))}
             </div>
+            <Pagination
+                currentPage={currentPage}
+                setPage={updatePage}
+                totalNumberOfPages={searchResult.total / pageLength}
+            />
         </>
     );
 

components/dashboard/src/admin/UserSearch.tsx

@@ -9,12 +9,15 @@ import moment from "moment";
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router";
 import { Link } from "react-router-dom";
+import Pagination from "../Pagination/Pagination";
 import { getGitpodService } from "../service/service";
 import { PageWithAdminSubMenu } from "./PageWithAdminSubMenu";
 import UserDetail from "./UserDetail";
 
 export default function UserSearch() {
     const location = useLocation();
+    const pageLength = 50;
+    const [currentPage, setCurrentPage] = useState(0);
     const [searchResult, setSearchResult] = useState<AdminGetListResult<User>>({ rows: [], total: 0 });
     const [searchTerm, setSearchTerm] = useState("");
     const [searching, setSearching] = useState(false);
@@ -46,16 +49,21 @@ export default function UserSearch() {
         try {
             const result = await getGitpodService().server.adminGetUsers({
                 searchTerm,
-                limit: 50,
+                limit: pageLength,
                 orderBy: "creationDate",
-                offset: 0,
+                offset: currentPage * pageLength,
                 orderDir: "desc",
             });
             setSearchResult(result);
         } finally {
             setSearching(false);
         }
     };
+
+    const updatePage = (page: number) => {
+        setCurrentPage(page);
+        search();
+    };
     return (
         <PageWithAdminSubMenu title="Users" subtitle="Search and manage all users.">
             <div className="pt-8 flex">
@@ -103,6 +111,11 @@ export default function UserSearch() {
                         <UserEntry user={u} />
                     ))}
             </div>
+            <Pagination
+                currentPage={currentPage}
+                setPage={updatePage}
+                totalNumberOfPages={searchResult.total / pageLength}
+            />
         </PageWithAdminSubMenu>
     );
 }

components/dashboard/src/admin/WorkspacesSearch.tsx

@@ -19,6 +19,7 @@ import moment from "moment";
 import { useEffect, useState } from "react";
 import { useLocation } from "react-router";
 import { Link } from "react-router-dom";
+import Pagination from "../Pagination/Pagination";
 import { getGitpodService } from "../service/service";
 import { getProject, WorkspaceStatusIndicator } from "../workspaces/WorkspaceEntry";
 import WorkspaceDetail from "./WorkspaceDetail";
@@ -39,6 +40,8 @@ export default function WorkspaceSearchPage() {
 
 export function WorkspaceSearch(props: Props) {
     const location = useLocation();
+    const pageLength = 50;
+    const [currentPage, setCurrentPage] = useState(0);
     const [searchResult, setSearchResult] = useState<AdminGetListResult<WorkspaceAndInstance>>({ rows: [], total: 0 });
     const [queryTerm, setQueryTerm] = useState("");
     const [searching, setSearching] = useState(false);
@@ -92,9 +95,9 @@ export function WorkspaceSearch(props: Props) {
             }
 
             const result = await getGitpodService().server.adminGetWorkspaces({
-                limit: 100,
+                limit: pageLength,
                 orderBy: "instanceCreationTime",
-                offset: 0,
+                offset: currentPage * pageLength,
                 orderDir: "desc",
                 ...query,
             });
@@ -103,6 +106,12 @@ export function WorkspaceSearch(props: Props) {
             setSearching(false);
         }
     };
+
+    const updatePage = (page: number) => {
+        setCurrentPage(page);
+        search();
+    };
+
     return (
         <>
             <div className="pt-8 flex">
@@ -152,6 +161,11 @@ export function WorkspaceSearch(props: Props) {
                     <WorkspaceEntry ws={ws} />
                 ))}
             </div>
+            <Pagination
+                currentPage={currentPage}
+                setPage={updatePage}
+                totalNumberOfPages={searchResult.total / pageLength}
+            />
         </>
     );
 }