[dashboard] add pagination to user search

Author: svenefftinge

components/dashboard/src/Pagination/Pagination.tsx

@@ -13,7 +13,12 @@ interface PaginationProps {
     setPage: (page: number) => void;
 }
 
-function Pagination({ totalNumberOfPages, currentPage, setPage }: PaginationProps) {
+function Pagination(props: PaginationProps) {
+    const { totalNumberOfPages, setPage } = props;
+    if (totalNumberOfPages <= 1 || props.currentPage < 1) {
+        return <></>;
+    }
+    const currentPage = Math.min(totalNumberOfPages, props.currentPage);
     const calculatedPagination = getPaginationNumbers(totalNumberOfPages, currentPage);
 
     const nextPage = () => {

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 (
@@ -29,6 +30,11 @@ export function ProjectsSearch() {
     const [searchResult, setSearchResult] = useState<AdminGetListResult<Project>>({ total: 0, rows: [] });
     const [currentProject, setCurrentProject] = useState<Project | undefined>(undefined);
     const [currentProjectOwner, setCurrentProjectOwner] = useState<string | undefined>("");
+    const pageLength = 50;
+    const [currentPage, setCurrentPage] = useState(0);
+    useEffect(() => {
+        search();
+    }, [currentPage]);
 
     useEffect(() => {
         const projectId = location.pathname.split("/")[3];
@@ -75,9 +81,9 @@ export function ProjectsSearch() {
         try {
             const result = await getGitpodService().server.adminGetProjectsBySearchTerm({
                 searchTerm,
-                limit: 50,
+                limit: pageLength,
                 orderBy: "creationTime",
-                offset: 0,
+                offset: (currentPage - 1) * pageLength,
                 orderDir: "desc",
             });
             setSearchResult(result);
@@ -131,6 +137,11 @@ export function ProjectsSearch() {
                     <ProjectResultItem project={project} />
                 ))}
             </div>
+            <Pagination
+                currentPage={currentPage}
+                setPage={setCurrentPage}
+                totalNumberOfPages={Math.ceil(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 (
@@ -29,6 +30,11 @@ export function TeamsSearch() {
     const [searchTerm, setSearchTerm] = useState("");
     const [currentTeam, setCurrentTeam] = useState<Team | undefined>(undefined);
     const [searchResult, setSearchResult] = useState<AdminGetListResult<Team>>({ total: 0, rows: [] });
+    const pageLength = 50;
+    const [currentPage, setCurrentPage] = useState(0);
+    useEffect(() => {
+        search();
+    }, [currentPage]);
 
     useEffect(() => {
         const teamId = location.pathname.split("/")[3];
@@ -56,9 +62,9 @@ export function TeamsSearch() {
         try {
             const result = await getGitpodService().server.adminGetTeams({
                 searchTerm,
-                limit: 100,
+                limit: pageLength,
                 orderBy: "creationTime",
-                offset: 0,
+                offset: (currentPage - 1) * pageLength,
                 orderDir: "desc",
             });
             setSearchResult(result);
@@ -120,6 +126,11 @@ export function TeamsSearch() {
                     <TeamResultItem team={team} />
                 ))}
             </div>
+            <Pagination
+                currentPage={currentPage}
+                setPage={setCurrentPage}
+                totalNumberOfPages={Math.ceil(searchResult.total / pageLength)}
+            />
         </>
     );
 

components/dashboard/src/admin/UserSearch.tsx

@@ -9,6 +9,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 { PageWithAdminSubMenu } from "./PageWithAdminSubMenu";
 import UserDetail from "./UserDetail";
@@ -19,6 +20,11 @@ export default function UserSearch() {
     const [searchTerm, setSearchTerm] = useState("");
     const [searching, setSearching] = useState(false);
     const [currentUser, setCurrentUserState] = useState<User | undefined>(undefined);
+    const pageLength = 50;
+    const [currentPage, setCurrentPage] = useState(0);
+    useEffect(() => {
+        search();
+    }, [currentPage]);
 
     useEffect(() => {
         const userId = location.pathname.split("/")[3];
@@ -46,9 +52,9 @@ export default function UserSearch() {
         try {
             const result = await getGitpodService().server.adminGetUsers({
                 searchTerm,
-                limit: 50,
+                limit: pageLength,
                 orderBy: "creationDate",
-                offset: 0,
+                offset: (currentPage - 1) * pageLength,
                 orderDir: "desc",
             });
             setSearchResult(result);
@@ -103,6 +109,11 @@ export default function UserSearch() {
                         <UserEntry user={u} />
                     ))}
             </div>
+            <Pagination
+                currentPage={currentPage}
+                setPage={setCurrentPage}
+                totalNumberOfPages={Math.ceil(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";
@@ -43,6 +44,11 @@ export function WorkspaceSearch(props: Props) {
     const [queryTerm, setQueryTerm] = useState("");
     const [searching, setSearching] = useState(false);
     const [currentWorkspace, setCurrentWorkspaceState] = useState<WorkspaceAndInstance | undefined>(undefined);
+    const pageLength = 2;
+    const [currentPage, setCurrentPage] = useState(1);
+    useEffect(() => {
+        search();
+    }, [currentPage]);
 
     useEffect(() => {
         const workspaceId = location.pathname.split("/")[3];
@@ -73,9 +79,9 @@ export function WorkspaceSearch(props: Props) {
 
     const search = async () => {
         // Disables empty search on the workspace search page
-        if (!props.user && queryTerm.length === 0) {
-            return;
-        }
+        // if (!props.user && queryTerm.length === 0) {
+        //     return;
+        // }
 
         setSearching(true);
         try {
@@ -87,14 +93,11 @@ export function WorkspaceSearch(props: Props) {
             } else if (matchesNewWorkspaceIdExactly(queryTerm)) {
                 query.workspaceId = queryTerm;
             }
-            if (!query.ownerId && !query.instanceIdOrWorkspaceId && !query.workspaceId) {
-                return;
-            }
 
             const result = await getGitpodService().server.adminGetWorkspaces({
-                limit: 100,
+                limit: pageLength,
                 orderBy: "instanceCreationTime",
-                offset: 0,
+                offset: (currentPage - 1) * pageLength,
                 orderDir: "desc",
                 ...query,
             });
@@ -152,6 +155,11 @@ export function WorkspaceSearch(props: Props) {
                     <WorkspaceEntry ws={ws} />
                 ))}
             </div>
+            <Pagination
+                currentPage={currentPage}
+                setPage={setCurrentPage}
+                totalNumberOfPages={Math.ceil(searchResult.total / pageLength)}
+            />
         </>
     );
 }