From e31d0b83c8d94008673bdfbe4827119bc4a2616f Mon Sep 17 00:00:00 2001
From: Sven Efftinge <sven@gitpod.io>
Date: Wed, 21 Sep 2022 10:14:18 +0000
Subject: [PATCH] [dashboard] add pagination to user search

---
 .../dashboard/src/admin/ProjectsSearch.tsx     | 17 +++++++++++++++--
 components/dashboard/src/admin/TeamsSearch.tsx | 17 +++++++++++++++--
 components/dashboard/src/admin/UserSearch.tsx  | 17 +++++++++++++++--
 .../dashboard/src/admin/WorkspacesSearch.tsx   | 18 ++++++++++++++++--
 4 files changed, 61 insertions(+), 8 deletions(-)

diff --git a/components/dashboard/src/admin/ProjectsSearch.tsx b/components/dashboard/src/admin/ProjectsSearch.tsx
index 7fe4dd3525d4a7..ae61803923fa54 100644
--- a/components/dashboard/src/admin/ProjectsSearch.tsx
+++ b/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}
+            />
         </>
     );
 
diff --git a/components/dashboard/src/admin/TeamsSearch.tsx b/components/dashboard/src/admin/TeamsSearch.tsx
index 354921ea074af3..c6d942e79415ef 100644
--- a/components/dashboard/src/admin/TeamsSearch.tsx
+++ b/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,9 +59,9 @@ 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);
@@ -66,6 +69,11 @@ export function TeamsSearch() {
             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}
+            />
         </>
     );
 
diff --git a/components/dashboard/src/admin/UserSearch.tsx b/components/dashboard/src/admin/UserSearch.tsx
index 0187c0a8b9f5d7..0c54fcffa7f338 100644
--- a/components/dashboard/src/admin/UserSearch.tsx
+++ b/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,9 +49,9 @@ 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);
@@ -56,6 +59,11 @@ export default function UserSearch() {
             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>
     );
 }
diff --git a/components/dashboard/src/admin/WorkspacesSearch.tsx b/components/dashboard/src/admin/WorkspacesSearch.tsx
index 6482668c03f317..b5f6c5499de9c1 100644
--- a/components/dashboard/src/admin/WorkspacesSearch.tsx
+++ b/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}
+            />
         </>
     );
 }