awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-06 14:27:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

misc: addressed comments

Browse Source
This commit is contained in:
Sheen Capadngan
2024-07-09 01:11:24 +08:00
parent d0f0dca3a3
commit 2c6decaf6e
2 changed files with 68 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
backend/src/server/routes/v1/admin-router.ts
+1 -1
View File
@@ -93,7 +93,7 @@ export const registerAdminRouter = async (server: FastifyZodProvider) => {
querystring: z.object({ querystring: z.object({
searchTerm: z.string().default(""), searchTerm: z.string().default(""),
offset: z.coerce.number().default(0), offset: z.coerce.number().default(0),
limit: z.coerce.number().default(20) limit: z.coerce.number().max(100).default(20)
}), }),
response: { response: {
200: z.object({ 200: z.object({
frontend/src/views/admin/DashboardPage/UserPanel.tsx
+67 -68
View File
@@ -24,10 +24,8 @@ import { useAdminDeleteUser, useAdminGetUsers } from "@app/hooks/api";
import { UsePopUpState } from "@app/hooks/usePopUp"; import { UsePopUpState } from "@app/hooks/usePopUp";
const UserPanelTable = ({ const UserPanelTable = ({
searchUserFilter,
handlePopUpOpen handlePopUpOpen
}: { }: {
searchUserFilter: string;
handlePopUpOpen: ( handlePopUpOpen: (
popUpName: keyof UsePopUpState<["removeUser"]>, popUpName: keyof UsePopUpState<["removeUser"]>,
data: { data: {
@@ -36,6 +34,7 @@ const UserPanelTable = ({
} }
) => void; ) => void;
}) => { }) => {
const [searchUserFilter, setSearchUserFilter] = useState("");
const { user } = useUser(); const { user } = useUser();
const userId = user?.id || ""; const userId = user?.id || "";
const debounedSearchTerm = useDebounce(searchUserFilter, 500); const debounedSearchTerm = useDebounce(searchUserFilter, 500);
@@ -47,64 +46,72 @@ const UserPanelTable = ({
const isEmpty = !isLoading && !data?.pages?.[0].length; const isEmpty = !isLoading && !data?.pages?.[0].length;
return ( return (
<div className="mt-4"> <>
<TableContainer> <Input
<Table> value={searchUserFilter}
<THead> onChange={(e) => setSearchUserFilter(e.target.value)}
<Tr> leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
<Th className="w-5/12">Name</Th> placeholder="Search users..."
<Th className="w-5/12">Username</Th> />
<Th className="w-5" /> <div className="mt-4">
</Tr> <TableContainer>
</THead> <Table>
<TBody> <THead>
{isLoading && <TableSkeleton columns={4} innerKey="users" />} <Tr>
{!isLoading && <Th className="w-5/12">Name</Th>
data?.pages?.map((users) => <Th className="w-5/12">Username</Th>
users.map(({ username, email, firstName, lastName, id }) => { <Th className="w-5" />
const name = firstName || lastName ? `${firstName} ${lastName}` : "-"; </Tr>
</THead>
<TBody>
{isLoading && <TableSkeleton columns={4} innerKey="users" />}
{!isLoading &&
data?.pages?.map((users) =>
users.map(({ username, email, firstName, lastName, id }) => {
const name = firstName || lastName ? `${firstName} ${lastName}` : "-";
return ( return (
<Tr key={`user-${id}`} className="w-full"> <Tr key={`user-${id}`} className="w-full">
<Td className="w-5/12">{name}</Td> <Td className="w-5/12">{name}</Td>
<Td className="w-5/12">{email}</Td> <Td className="w-5/12">{email}</Td>
<Td> <Td>
{userId !== id && ( {userId !== id && (
<div className="flex justify-end"> <div className="flex justify-end">
<IconButton <IconButton
size="lg" size="lg"
colorSchema="danger" colorSchema="danger"
variant="plain" variant="plain"
ariaLabel="update" ariaLabel="update"
isDisabled={userId === id} isDisabled={userId === id}
onClick={() => handlePopUpOpen("removeUser", { username, id })} onClick={() => handlePopUpOpen("removeUser", { username, id })}
> >
<FontAwesomeIcon icon={faXmark} /> <FontAwesomeIcon icon={faXmark} />
</IconButton> </IconButton>
</div> </div>
)} )}
</Td> </Td>
</Tr> </Tr>
); );
}) })
)} )}
</TBody> </TBody>
</Table> </Table>
{!isLoading && isEmpty && <EmptyState title="No users found" icon={faUsers} />} {!isLoading && isEmpty && <EmptyState title="No users found" icon={faUsers} />}
</TableContainer> </TableContainer>
{!isEmpty && ( {!isEmpty && (
<Button <Button
className="mt-4 py-3 text-sm" className="mt-4 py-3 text-sm"
isFullWidth isFullWidth
variant="star" variant="star"
isLoading={isFetchingNextPage} isLoading={isFetchingNextPage}
isDisabled={isFetchingNextPage || !hasNextPage} isDisabled={isFetchingNextPage || !hasNextPage}
onClick={() => fetchNextPage()} onClick={() => fetchNextPage()}
> >
{hasNextPage ? "Load More" : "End of list"} {hasNextPage ? "Load More" : "End of list"}
</Button> </Button>
)} )}
</div> </div>
</>
); );
}; };
@@ -113,8 +120,6 @@ export const UserPanel = () => {
"removeUser" "removeUser"
] as const); ] as const);
const [searchUserFilter, setSearchUserFilter] = useState("");
const { mutateAsync: deleteUser } = useAdminDeleteUser(); const { mutateAsync: deleteUser } = useAdminDeleteUser();
const handleRemoveUser = async () => { const handleRemoveUser = async () => {
@@ -141,13 +146,7 @@ export const UserPanel = () => {
<div className="mb-4"> <div className="mb-4">
<p className="text-xl font-semibold text-mineshaft-100">Users</p> <p className="text-xl font-semibold text-mineshaft-100">Users</p>
</div> </div>
<Input <UserPanelTable handlePopUpOpen={handlePopUpOpen} />
value={searchUserFilter}
onChange={(e) => setSearchUserFilter(e.target.value)}
leftIcon={<FontAwesomeIcon icon={faMagnifyingGlass} />}
placeholder="Search users..."
/>
<UserPanelTable searchUserFilter={searchUserFilter} handlePopUpOpen={handlePopUpOpen} />
<DeleteActionModal <DeleteActionModal
isOpen={popUp.removeUser.isOpen} isOpen={popUp.removeUser.isOpen}
deleteKey="remove" deleteKey="remove"