awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: adds pagination in users table

Browse Source
This commit is contained in:
Piyush Gupta
2025-10-08 23:10:22 +05:30
parent e7990c493b
commit c91b803933
11 changed files with 225 additions and 157 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
backend/src/server/routes/v1/admin-router.ts
View File

@@ -172,7 +172,10 @@ export const registerAdminRouter = async (server: FastifyZodProvider) => {
email: true,
id: true,
superAdmin: true
}).array()
}).array(),
meta: z.object({
total: z.number()
})
})
}
},
@@ -186,8 +189,16 @@ export const registerAdminRouter = async (server: FastifyZodProvider) => {
...req.query
});
const count = await server.services.superAdmin.countUsers({
searchTerm: req.query.searchTerm,
adminsOnly: req.query.adminsOnly
});
return {
users
users,
meta: {
total: count
}
};
}
});
@@ -247,7 +258,7 @@ export const registerAdminRouter = async (server: FastifyZodProvider) => {
...req.query
});
const count = await server.services.superAdmin.countOrganizations({
...req.query
searchTerm: req.query.searchTerm
});
return {
@@ -364,7 +375,7 @@ export const registerAdminRouter = async (server: FastifyZodProvider) => {
});
const count = await server.services.superAdmin.countIdentities({
...req.query
searchTerm: req.query.searchTerm
});
return {

11
backend/src/services/super-admin/super-admin-service.ts
View File

@@ -57,6 +57,7 @@ import {
TAdminSignUpDTO,
TCountIdentitiesDTO,
TCountOrganizationsDTO,
TCountUsersDTO,
TCreateOrganizationDTO,
TGetOrganizationsDTO,
TResendOrgInviteDTO
@@ -670,6 +671,15 @@ export const superAdminServiceFactory = ({
});
};
const countUsers = async ({ searchTerm, adminsOnly }: TCountUsersDTO) => {
const count = await userDAL.countUsersByFilter({
searchTerm,
adminsOnly
});
return count;
};
const deleteUser = async (userId: string) => {
const superAdmins = await userDAL.find({
superAdmin: true
@@ -1151,6 +1161,7 @@ export const superAdminServiceFactory = ({
adminSignUp,
bootstrapInstance,
getUsers,
countUsers,
deleteUser,
getIdentities,
countIdentities,

5
backend/src/services/super-admin/super-admin-types.ts
View File

@@ -42,6 +42,11 @@ export type TCountIdentitiesDTO = {
searchTerm: string;
};
export type TCountUsersDTO = {
searchTerm: string;
adminsOnly: boolean;
};
export type TCreateOrganizationDTO = {
name: string;
inviteAdminEmails: string[];

30
backend/src/services/user/user-dal.ts
View File

@@ -70,6 +70,35 @@ export const userDALFactory = (db: TDbClient) => {
}
};
const countUsersByFilter = async ({ searchTerm, adminsOnly }: { searchTerm: string; adminsOnly: boolean }) => {
interface CountResult {
count: string;
}
try {
const count = await db
.replicaNode()(TableName.Users)
.where("isGhost", "=", false)
.where((qb) => {
if (searchTerm) {
void qb
.whereILike("email", `%${searchTerm}%`)
.orWhereILike("firstName", `%${searchTerm}%`)
.orWhereILike("lastName", `%${searchTerm}%`)
.orWhereRaw('lower("username") like ?', `%${searchTerm}%`);
}
if (adminsOnly) {
void qb.where("superAdmin", true);
}
})
.count("*")
.first();
return parseInt((count as unknown as CountResult).count || "0", 10);
} catch (error) {
throw new DatabaseError({ error, name: "Count Users by filter" });
}
};
// USER ENCRYPTION FUNCTIONS
// -------------------------
const findUserEncKeyByUsername = async ({ username }: { username: string }) => {
@@ -243,6 +272,7 @@ export const userDALFactory = (db: TDbClient) => {
findOneUserAction,
createUserAction,
getUsersByFilter,
countUsersByFilter,
findAllMyAccounts,
findUserByEmail
};

40
frontend/src/hooks/api/admin/queries.ts
View File

@@ -1,15 +1,7 @@
import {
DefaultError,
InfiniteData,
UndefinedInitialDataInfiniteOptions,
useInfiniteQuery,
useQuery,
UseQueryOptions
} from "@tanstack/react-query";
import { useQuery, UseQueryOptions } from "@tanstack/react-query";
import { apiRequest } from "@app/config/request";
import { User } from "../types";
import {
AdminGetIdentitiesFilters,
AdminGetOrganizationsFilters,
@@ -20,6 +12,7 @@ import {
TGetInvalidatingCacheStatus,
TGetOrganizationsResponse,
TGetServerRootKmsEncryptionDetails,
TGetUsersResponse,
TServerConfig
} from "./types";
@@ -87,37 +80,22 @@ export const useGetServerConfig = ({
enabled: options?.enabled ?? true
});
export const useAdminGetUsers = (
filters: AdminGetUsersFilters,
options?: Partial<
UndefinedInitialDataInfiniteOptions<
User[],
DefaultError,
InfiniteData<User[]>,
ReturnType<typeof adminQueryKeys.getUsers>,
number
>
>
) => {
return useInfiniteQuery({
initialPageParam: 0,
export const useAdminGetUsers = (filters: AdminGetUsersFilters) => {
return useQuery({
queryKey: adminQueryKeys.getUsers(filters),
queryFn: async ({ pageParam }) => {
const { data } = await apiRequest.get<{ users: User[] }>(
queryFn: async () => {
const { data } = await apiRequest.get<TGetUsersResponse>(
"/api/v1/admin/user-management/users",
{
params: {
...filters,
offset: pageParam
...filters
}
}
);
return data.users;
return { users: data.users, totalCount: data.meta.total };
},
getNextPageParam: (lastPage, pages) =>
lastPage.length !== 0 ? pages.length * filters.limit : undefined,
...options
placeholderData: (previousData) => previousData
});
};

18
frontend/src/hooks/api/admin/types.ts
View File

@@ -1,7 +1,7 @@
import { Identity } from "@app/hooks/api/identities/types";
import { OrgMembershipStatus } from "@app/hooks/api/organization/types";
import { Organization } from "../types";
import { Organization, User } from "../types";
export enum LoginMethod {
EMAIL = "email",
@@ -49,6 +49,11 @@ export type TGetIdentitiesResponse = {
meta: PaginatedDataMeta;
};
export type TGetUsersResponse = {
users: User[];
meta: PaginatedDataMeta;
};
export type TServerConfig = {
initialized: boolean;
allowSignUp: boolean;
@@ -102,9 +107,10 @@ export type AdminGetOrganizationsFilters = {
};
export type AdminGetUsersFilters = {
limit: number;
searchTerm: string;
adminsOnly: boolean;
limit?: number;
offset?: number;
searchTerm?: string;
adminsOnly?: boolean;
};
export type AdminGetIdentitiesFilters = {
@@ -187,3 +193,7 @@ export enum AdminOrganizationsOrderBy {
export enum AdminIdentitiesOrderBy {
Name = "name"
}
export enum AdminUsersOrderBy {
Username = "username"
}

44
frontend/src/hooks/api/users/types.ts
View File

@@ -103,29 +103,29 @@ export type TWorkspaceUser = {
organization: string;
roles: (
| {
id: string;
role: "owner" | "admin" | "member" | "no-access" | "custom";
customRoleId: string;
customRoleName: string;
customRoleSlug: string;
isTemporary: false;
temporaryRange: null;
temporaryMode: null;
temporaryAccessEndTime: null;
temporaryAccessStartTime: null;
}
id: string;
role: "owner" | "admin" | "member" | "no-access" | "custom";
customRoleId: string;
customRoleName: string;
customRoleSlug: string;
isTemporary: false;
temporaryRange: null;
temporaryMode: null;
temporaryAccessEndTime: null;
temporaryAccessStartTime: null;
}
| {
id: string;
role: "owner" | "admin" | "member" | "no-access" | "custom";
customRoleId: string;
customRoleName: string;
customRoleSlug: string;
isTemporary: true;
temporaryRange: string;
temporaryMode: ProjectUserMembershipTemporaryMode;
temporaryAccessEndTime: string;
temporaryAccessStartTime: string;
}
id: string;
role: "owner" | "admin" | "member" | "no-access" | "custom";
customRoleId: string;
customRoleName: string;
customRoleSlug: string;
isTemporary: true;
temporaryRange: string;
temporaryMode: ProjectUserMembershipTemporaryMode;
temporaryAccessEndTime: string;
temporaryAccessStartTime: string;
}
)[];
status: "invited" | "accepted" | "verified" | "completed";
deniedPermissions: any[];

22
frontend/src/pages/admin/AccessManagementPage/components/AddServerAdminModal.tsx
View File

@@ -1,4 +1,4 @@
import { useMemo, useState } from "react";
import { useState } from "react";
import { Controller, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
@@ -55,18 +55,14 @@ const Content = ({ onClose }: ContentProps) => {
const [searchUserFilter, setSearchUserFilter] = useState("");
const [debouncedSearchTerm, setDebouncedSearchTerm] = useDebounce(searchUserFilter, 500);
const { data, isFetching } = useAdminGetUsers(
{
limit: 20,
searchTerm: debouncedSearchTerm,
adminsOnly: false
},
{
placeholderData: (prev) => prev
}
);
const { data, isPending } = useAdminGetUsers({
limit: 20,
searchTerm: debouncedSearchTerm,
adminsOnly: false
});
const users = useMemo(() => data?.pages.flat().filter((user) => !user.superAdmin) ?? [], [data]);
const { users: usersData = [] } = data ?? {};
const users = usersData.filter((user) => !user.superAdmin);
const onSubmit = async ({ user }: FormData) => {
try {
@@ -91,7 +87,7 @@ const Content = ({ onClose }: ContentProps) => {
render={({ field, fieldState: { error } }) => (
<FormControl isError={Boolean(error)} errorText={error?.message} label="User">
<FilterableSelect
isLoading={searchUserFilter !== debouncedSearchTerm || isFetching}
isLoading={searchUserFilter !== debouncedSearchTerm || isPending}
className="w-full"
placeholder="Search users..."
options={users}

86
frontend/src/pages/admin/AccessManagementPage/components/ServerAdminsTable.tsx
View File

@@ -11,7 +11,6 @@ import {
faXmark
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { InfiniteData } from "@tanstack/react-query";
import { twMerge } from "tailwind-merge";
import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
@@ -28,6 +27,7 @@ import {
EmptyState,
IconButton,
Input,
Pagination,
Table,
TableContainer,
TableSkeleton,
@@ -39,13 +39,19 @@ import {
Tr
} from "@app/components/v2";
import { useSubscription, useUser } from "@app/context";
import { useDebounce, usePopUp } from "@app/hooks";
import {
getUserTablePreference,
PreferenceKey,
setUserTablePreference
} from "@app/helpers/userTablePreferences";
import { useDebounce, usePagination, usePopUp } from "@app/hooks";
import {
useAdminBulkDeleteUsers,
useAdminDeleteUser,
useAdminGetUsers,
useRemoveUserServerAdminAccess
} from "@app/hooks/api";
import { AdminUsersOrderBy } from "@app/hooks/api/admin/types";
import { User } from "@app/hooks/api/users/types";
import { UsePopUpState } from "@app/hooks/usePopUp";
import { AddServerAdminModal } from "@app/pages/admin/AccessManagementPage/components/AddServerAdminModal";
@@ -54,15 +60,17 @@ const removeServerAdminUpgradePlanMessage = "Removing Server Admin permissions f
const ServerAdminsPanelTable = ({
handlePopUpOpen,
users: usersPages,
users,
isPending,
searchUserFilter,
setSearchUserFilter,
isFetchingNextPage,
fetchNextPage,
hasNextPage,
selectedUsers,
setSelectedUsers
setSelectedUsers,
totalCount,
page,
perPage,
setPage,
handlePerPageChange
}: {
handlePopUpOpen: (
popUpName: keyof UsePopUpState<
@@ -75,20 +83,20 @@ const ServerAdminsPanelTable = ({
}
) => void;
isPending: boolean;
users: InfiniteData<User[], unknown> | undefined;
users?: User[];
searchUserFilter: string;
setSearchUserFilter: (filter: string) => void;
selectedUsers: User[];
setSelectedUsers: Dispatch<SetStateAction<User[]>>;
isFetchingNextPage: boolean;
fetchNextPage: () => void;
hasNextPage: boolean;
totalCount: number;
page: number;
perPage: number;
setPage: Dispatch<SetStateAction<number>>;
handlePerPageChange: (newPerPage: number) => void;
}) => {
const { subscription } = useSubscription();
const users = usersPages?.pages.flat();
const isEmpty = !isPending && !users?.length;
const isEmpty = !isPending && totalCount === 0;
const selectedUserIds = selectedUsers.map((user) => user.id);
@@ -241,16 +249,13 @@ const ServerAdminsPanelTable = ({
{!isPending && isEmpty && <EmptyState title="No users found" icon={faUsers} />}
</TableContainer>
{!isEmpty && (
<Button
className="mt-4 py-3 text-sm"
isFullWidth
variant="outline_bg"
isLoading={isFetchingNextPage}
isDisabled={isFetchingNextPage || !hasNextPage}
onClick={() => fetchNextPage()}
>
{hasNextPage ? "Load More" : "End of List"}
</Button>
<Pagination
count={totalCount}
page={page}
perPage={perPage}
onChangePage={(newPage) => setPage(newPage)}
onChangePerPage={handlePerPageChange}
/>
)}
</div>
</>
@@ -278,18 +283,27 @@ export const ServerAdminsTable = () => {
const [searchUserFilter, setSearchUserFilter] = useState("");
const [debouncedSearchTerm] = useDebounce(searchUserFilter, 500);
const {
data: users,
isPending,
isFetchingNextPage,
hasNextPage,
fetchNextPage
} = useAdminGetUsers({
limit: 20,
const { offset, limit, setPage, perPage, page, setPerPage } = usePagination<AdminUsersOrderBy>(
AdminUsersOrderBy.Username,
{
initPerPage: getUserTablePreference("ServerAdminUsersTable", PreferenceKey.PerPage, 20)
}
);
const handlePerPageChange = (newPerPage: number) => {
setPerPage(newPerPage);
setUserTablePreference("ServerAdminUsersTable", PreferenceKey.PerPage, newPerPage);
};
const { data, isPending } = useAdminGetUsers({
limit,
offset,
searchTerm: debouncedSearchTerm,
adminsOnly: true
});
const { users = [], totalCount = 0 } = data ?? {};
const handleRemoveUser = async () => {
const { id } = popUp?.removeUser?.data as { id: string; username: string };
@@ -389,9 +403,11 @@ export const ServerAdminsTable = () => {
searchUserFilter={searchUserFilter}
setSearchUserFilter={setSearchUserFilter}
isPending={isPending}
isFetchingNextPage={isFetchingNextPage}
hasNextPage={hasNextPage}
fetchNextPage={fetchNextPage}
page={page}
perPage={perPage}
setPage={setPage}
handlePerPageChange={handlePerPageChange}
totalCount={totalCount}
/>
<DeleteActionModal
isOpen={popUp.removeUser.isOpen}

21
frontend/src/pages/admin/ResourceOverviewPage/components/AddOrganizationModal.tsx
View File

@@ -1,4 +1,4 @@
import { useMemo, useState } from "react";
import { useState } from "react";
import { Controller, useFieldArray, useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
@@ -72,18 +72,13 @@ const Content = ({ onClose }: ContentProps) => {
const [searchUserFilter, setSearchUserFilter] = useState("");
const [debouncedSearchTerm, setDebouncedSearchTerm] = useDebounce(searchUserFilter, 500);
const { data, isFetching } = useAdminGetUsers(
{
limit: 20,
searchTerm: debouncedSearchTerm,
adminsOnly: false
},
{
placeholderData: (prev) => prev
}
);
const { data, isPending } = useAdminGetUsers({
limit: 20,
searchTerm: debouncedSearchTerm,
adminsOnly: false
});
const users = useMemo(() => data?.pages.flat() ?? [], [data]);
const { users = [] } = data ?? {};
const onSubmit = async ({ name, invitees }: FormData) => {
try {
@@ -155,7 +150,7 @@ const Content = ({ onClose }: ContentProps) => {
})
.includes(input)
}
isLoading={searchUserFilter !== debouncedSearchTerm || isFetching}
isLoading={searchUserFilter !== debouncedSearchTerm || isPending}
className="w-full"
placeholder="Search users or invite new ones..."
isMulti

86
frontend/src/pages/admin/ResourceOverviewPage/components/UserIdentitiesTable.tsx
View File

@@ -13,7 +13,6 @@ import {
faXmark
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { InfiniteData } from "@tanstack/react-query";
import { twMerge } from "tailwind-merge";
import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
@@ -31,6 +30,7 @@ import {
EmptyState,
IconButton,
Input,
Pagination,
Table,
TableContainer,
TableSkeleton,
@@ -42,7 +42,12 @@ import {
Tr
} from "@app/components/v2";
import { useSubscription, useUser } from "@app/context";
import { useDebounce, usePopUp } from "@app/hooks";
import {
getUserTablePreference,
PreferenceKey,
setUserTablePreference
} from "@app/helpers/userTablePreferences";
import { useDebounce, usePagination, usePopUp } from "@app/hooks";
import {
useAdminBulkDeleteUsers,
useAdminDeleteUser,
@@ -50,6 +55,7 @@ import {
useAdminGrantServerAdminAccess,
useRemoveUserServerAdminAccess
} from "@app/hooks/api";
import { AdminUsersOrderBy } from "@app/hooks/api/admin/types";
import { User } from "@app/hooks/api/users/types";
import { UsePopUpState } from "@app/hooks/usePopUp";
@@ -58,17 +64,19 @@ const removeServerAdminUpgradePlanMessage = "Removing Server Admin permissions f
const UserPanelTable = ({
handlePopUpOpen,
users: usersPages,
users,
isPending,
adminsOnly,
searchUserFilter,
setSearchUserFilter,
setAdminsOnly,
isFetchingNextPage,
fetchNextPage,
hasNextPage,
selectedUsers,
setSelectedUsers
setSelectedUsers,
totalCount,
page,
perPage,
setPage,
handlePerPageChange
}: {
handlePopUpOpen: (
popUpName: keyof UsePopUpState<
@@ -81,22 +89,22 @@ const UserPanelTable = ({
}
) => void;
isPending: boolean;
users: InfiniteData<User[], unknown> | undefined;
users: User[] | undefined;
adminsOnly: boolean;
setAdminsOnly: (adminsOnly: boolean) => void;
searchUserFilter: string;
setSearchUserFilter: (filter: string) => void;
selectedUsers: User[];
setSelectedUsers: Dispatch<SetStateAction<User[]>>;
isFetchingNextPage: boolean;
fetchNextPage: () => void;
hasNextPage: boolean;
totalCount: number;
page: number;
perPage: number;
setPage: Dispatch<SetStateAction<number>>;
handlePerPageChange: (newPerPage: number) => void;
}) => {
const { subscription } = useSubscription();
const users = usersPages?.pages.flat();
const isEmpty = !isPending && !users?.length;
const isEmpty = !isPending && totalCount === 0;
const isTableFiltered = Boolean(adminsOnly);
const selectedUserIds = selectedUsers.map((user) => user.id);
@@ -302,16 +310,13 @@ const UserPanelTable = ({
{!isPending && isEmpty && <EmptyState title="No users found" icon={faUsers} />}
</TableContainer>
{!isEmpty && (
<Button
className="mt-4 py-3 text-sm"
isFullWidth
variant="outline_bg"
isLoading={isFetchingNextPage}
isDisabled={isFetchingNextPage || !hasNextPage}
onClick={() => fetchNextPage()}
>
{hasNextPage ? "Load More" : "End of List"}
</Button>
<Pagination
count={totalCount}
page={page}
perPage={perPage}
onChangePage={(newPage) => setPage(newPage)}
onChangePerPage={handlePerPageChange}
/>
)}
</div>
</>
@@ -341,18 +346,27 @@ export const UserIdentitiesTable = () => {
const [adminsOnly, setAdminsOnly] = useState(false);
const [debouncedSearchTerm] = useDebounce(searchUserFilter, 500);
const {
data: users,
isPending,
isFetchingNextPage,
hasNextPage,
fetchNextPage
} = useAdminGetUsers({
limit: 20,
const { offset, limit, setPage, perPage, page, setPerPage } = usePagination<AdminUsersOrderBy>(
AdminUsersOrderBy.Username,
{
initPerPage: getUserTablePreference("ResourceOverviewUsersTable", PreferenceKey.PerPage, 20)
}
);
const handlePerPageChange = (newPerPage: number) => {
setPerPage(newPerPage);
setUserTablePreference("ResourceOverviewUsersTable", PreferenceKey.PerPage, newPerPage);
};
const { data, isPending } = useAdminGetUsers({
limit,
offset,
searchTerm: debouncedSearchTerm,
adminsOnly
});
const { users, totalCount = 0 } = data ?? {};
const handleRemoveUser = async () => {
const { id } = popUp?.removeUser?.data as { id: string; username: string };
@@ -479,9 +493,11 @@ export const UserIdentitiesTable = () => {
isPending={isPending}
adminsOnly={adminsOnly}
setAdminsOnly={setAdminsOnly}
isFetchingNextPage={isFetchingNextPage}
hasNextPage={hasNextPage}
fetchNextPage={fetchNextPage}
page={page}
perPage={perPage}
setPage={setPage}
handlePerPageChange={handlePerPageChange}
totalCount={totalCount}
/>
<DeleteActionModal
isOpen={popUp.removeUser.isOpen}