diff --git a/components/dashboard/src/Pagination/Pagination.tsx b/components/dashboard/src/Pagination/Pagination.tsx index b9a86d891cf083..ff5045deeba6d8 100644 --- a/components/dashboard/src/Pagination/Pagination.tsx +++ b/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 = () => { diff --git a/components/dashboard/src/admin/ProjectsSearch.tsx b/components/dashboard/src/admin/ProjectsSearch.tsx index 7fe4dd3525d4a7..37960e1d990810 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 ( @@ -29,6 +30,11 @@ export function ProjectsSearch() { const [searchResult, setSearchResult] = useState>({ total: 0, rows: [] }); const [currentProject, setCurrentProject] = useState(undefined); const [currentProjectOwner, setCurrentProjectOwner] = useState(""); + const pageLength = 50; + const [currentPage, setCurrentPage] = useState(1); + 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() { ))} + ); diff --git a/components/dashboard/src/admin/TeamsSearch.tsx b/components/dashboard/src/admin/TeamsSearch.tsx index 354921ea074af3..33230c5da35521 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 ( @@ -29,6 +30,11 @@ export function TeamsSearch() { const [searchTerm, setSearchTerm] = useState(""); const [currentTeam, setCurrentTeam] = useState(undefined); const [searchResult, setSearchResult] = useState>({ total: 0, rows: [] }); + const pageLength = 50; + const [currentPage, setCurrentPage] = useState(1); + 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() { ))} + ); diff --git a/components/dashboard/src/admin/UserSearch.tsx b/components/dashboard/src/admin/UserSearch.tsx index 0187c0a8b9f5d7..3d3a5f20d6e880 100644 --- a/components/dashboard/src/admin/UserSearch.tsx +++ b/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(undefined); + const pageLength = 50; + const [currentPage, setCurrentPage] = useState(1); + 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() { ))} + ); } diff --git a/components/dashboard/src/admin/WorkspacesSearch.tsx b/components/dashboard/src/admin/WorkspacesSearch.tsx index 6482668c03f317..ac245b8b3e955f 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"; @@ -43,6 +44,11 @@ export function WorkspaceSearch(props: Props) { const [queryTerm, setQueryTerm] = useState(""); const [searching, setSearching] = useState(false); const [currentWorkspace, setCurrentWorkspaceState] = useState(undefined); + const pageLength = 50; + const [currentPage, setCurrentPage] = useState(1); + useEffect(() => { + search(); + }, [currentPage]); useEffect(() => { const workspaceId = location.pathname.split("/")[3]; @@ -72,11 +78,6 @@ export function WorkspaceSearch(props: Props) { } const search = async () => { - // Disables empty search on the workspace search page - if (!props.user && queryTerm.length === 0) { - return; - } - setSearching(true); try { const query: AdminGetWorkspacesQuery = { @@ -87,14 +88,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 +150,11 @@ export function WorkspaceSearch(props: Props) { ))} + ); }