mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-14 07:30:20 +00:00
Complete basic pre-cleaned group member assignment/unassignment
This commit is contained in:
Tuan Dang
@@ -1,4 +1,9 @@
|
||||
export {
|
||||
useCreateGroup,
|
||||
useCreateGroupUserMembership,
|
||||
useDeleteGroup,
|
||||
useUpdateGroup} from "./mutations";
|
||||
useDeleteGroupUserMembership,
|
||||
useUpdateGroup} from "./mutations";
|
||||
export {
|
||||
useGetGroupUserMemberships
|
||||
} from "./queries";
|
||||
@@ -3,6 +3,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { apiRequest } from "@app/config/request";
|
||||
|
||||
import { organizationKeys } from "../organization/queries";
|
||||
import { groupKeys } from "./queries";
|
||||
import { TGroup } from "./types";
|
||||
|
||||
export const useCreateGroup = () => {
|
||||
@@ -84,4 +85,48 @@ export const useDeleteGroup = () => {
|
||||
queryClient.invalidateQueries(organizationKeys.getOrgGroups(orgId));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const useCreateGroupUserMembership = () => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async ({
|
||||
slug,
|
||||
username
|
||||
}: {
|
||||
slug: string;
|
||||
username: string;
|
||||
}) => {
|
||||
const {
|
||||
data
|
||||
} = await apiRequest.post<TGroup>(`/api/v1/groups/${slug}/users/${username}`);
|
||||
|
||||
return data;
|
||||
},
|
||||
onSuccess: (_, { slug }) => {
|
||||
queryClient.invalidateQueries(groupKeys.getGroupUserMembership(slug));
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const useDeleteGroupUserMembership = () => {
|
||||
const queryClient = useQueryClient();
|
||||
return useMutation({
|
||||
mutationFn: async ({
|
||||
slug,
|
||||
username
|
||||
}: {
|
||||
slug: string;
|
||||
username: string;
|
||||
}) => {
|
||||
const {
|
||||
data
|
||||
} = await apiRequest.delete<TGroup>(`/api/v1/groups/${slug}/users/${username}`);
|
||||
|
||||
return data;
|
||||
},
|
||||
onSuccess: (_, { slug }) => {
|
||||
queryClient.invalidateQueries(groupKeys.getGroupUserMembership(slug));
|
||||
}
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,29 @@
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
import { apiRequest } from "@app/config/request";
|
||||
|
||||
export const groupKeys = {
|
||||
getGroupUserMembership: (slug: string) => [{ slug }, "group-user-memberships"] as const
|
||||
}
|
||||
|
||||
type TUser = {
|
||||
id: string;
|
||||
email: string;
|
||||
username: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
isPartOfGroup: boolean;
|
||||
}
|
||||
|
||||
export const useGetGroupUserMemberships = (groupSlug: string) => {
|
||||
return useQuery({
|
||||
queryKey: groupKeys.getGroupUserMembership(groupSlug),
|
||||
queryFn: async () => {
|
||||
const {
|
||||
data: users
|
||||
} = await apiRequest.get<TUser[]>(`/api/v1/groups/${groupSlug}/users`);
|
||||
|
||||
return users;
|
||||
}
|
||||
});
|
||||
};
|
||||
+130
@@ -0,0 +1,130 @@
|
||||
import { faUsers } from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
|
||||
import {
|
||||
Button,
|
||||
EmptyState,
|
||||
Modal,
|
||||
ModalContent,
|
||||
Table,
|
||||
TableContainer,
|
||||
TableSkeleton,
|
||||
TBody,
|
||||
Td,
|
||||
Th,
|
||||
THead,
|
||||
Tr
|
||||
} from "@app/components/v2";
|
||||
import {
|
||||
useCreateGroupUserMembership,
|
||||
useDeleteGroupUserMembership,
|
||||
useGetGroupUserMemberships} from "@app/hooks/api";
|
||||
import { UsePopUpState } from "@app/hooks/usePopUp";
|
||||
|
||||
type Props = {
|
||||
popUp: UsePopUpState<["groupMembers"]>;
|
||||
// handlePopUpClose: (popUpName: keyof UsePopUpState<["groupMembers"]>) => void;
|
||||
handlePopUpToggle: (popUpName: keyof UsePopUpState<["groupMembers"]>, state?: boolean) => void;
|
||||
};
|
||||
|
||||
export const OrgGroupMembersModal = ({
|
||||
popUp,
|
||||
handlePopUpToggle
|
||||
}: Props) => {
|
||||
const { createNotification } = useNotificationContext();
|
||||
|
||||
const popUpData = popUp?.groupMembers?.data as {
|
||||
slug: string;
|
||||
};
|
||||
|
||||
const { data: users, isLoading } = useGetGroupUserMemberships(popUpData?.slug ?? "");
|
||||
const { mutateAsync: assignMutateAsync } = useCreateGroupUserMembership();
|
||||
const { mutateAsync: unassignMutateAsync } = useDeleteGroupUserMembership();
|
||||
|
||||
const handleAssignment = async (username: string, assign: boolean) => {
|
||||
try {
|
||||
if (!popUpData?.slug) return;
|
||||
|
||||
if (assign) {
|
||||
await assignMutateAsync({
|
||||
username,
|
||||
slug: popUpData.slug
|
||||
});
|
||||
} else {
|
||||
await unassignMutateAsync({
|
||||
username,
|
||||
slug: popUpData.slug
|
||||
});
|
||||
}
|
||||
|
||||
createNotification({
|
||||
text: `Successfully ${assign ? "assigned" : "removed "} user ${assign ? "to" : "from"} group`,
|
||||
type: "success"
|
||||
});
|
||||
} catch (err) {
|
||||
createNotification({
|
||||
text: `Failed to ${assign ? "assigned" : "remove"} user ${assign ? "to" : "from"} group`,
|
||||
type: "error"
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={popUp?.groupMembers?.isOpen}
|
||||
onOpenChange={(isOpen) => {
|
||||
handlePopUpToggle("groupMembers", isOpen);
|
||||
}}
|
||||
>
|
||||
<ModalContent title="Manage Group Members">
|
||||
<TableContainer>
|
||||
<Table>
|
||||
<THead>
|
||||
<Tr>
|
||||
<Th>User</Th>
|
||||
<Th>Status</Th>
|
||||
</Tr>
|
||||
</THead>
|
||||
<TBody>
|
||||
{isLoading && <TableSkeleton columns={2} innerKey="group-users" />}
|
||||
{!isLoading && users?.map(({
|
||||
id,
|
||||
firstName,
|
||||
lastName,
|
||||
username,
|
||||
isPartOfGroup
|
||||
}) => {
|
||||
return (
|
||||
<Tr className="items-center" key={`group-user-${id}`}>
|
||||
<Td>
|
||||
<p>{`${firstName} ${lastName}`}</p>
|
||||
<p>{username}</p>
|
||||
</Td>
|
||||
<Td>
|
||||
<Button
|
||||
// isLoading={isLoading}
|
||||
// isDisabled={!isAllowed}
|
||||
colorSchema="primary"
|
||||
variant="outline_bg"
|
||||
type="submit"
|
||||
onClick={() => handleAssignment(username, !isPartOfGroup)}
|
||||
>
|
||||
{isPartOfGroup ? "Unassign" : "Assign"}
|
||||
</Button>
|
||||
</Td>
|
||||
</Tr>
|
||||
);
|
||||
})}
|
||||
</TBody>
|
||||
</Table>
|
||||
{!isLoading && !users?.length && (
|
||||
<EmptyState
|
||||
title="No users found"
|
||||
icon={faUsers}
|
||||
/>
|
||||
)}
|
||||
</TableContainer>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
+1
-4
@@ -126,10 +126,7 @@ export const OrgGroupModal = ({
|
||||
reset();
|
||||
}}
|
||||
>
|
||||
<ModalContent
|
||||
title={`${popUp?.group?.data ? "Update" : "Create"} Group`}
|
||||
subTitle="Manage users more easily with groups"
|
||||
>
|
||||
<ModalContent title={`${popUp?.group?.data ? "Update" : "Create"} Group`}>
|
||||
<form onSubmit={handleSubmit(onGroupModalSubmit)}>
|
||||
<Controller
|
||||
control={control}
|
||||
|
||||
+7
@@ -16,6 +16,7 @@ import {
|
||||
import { useDeleteGroup } from "@app/hooks/api";
|
||||
import { usePopUp } from "@app/hooks/usePopUp";
|
||||
|
||||
import { OrgGroupMembersModal } from "./OrgGroupMembersModal";
|
||||
import { OrgGroupModal } from "./OrgGroupModal";
|
||||
import { OrgGroupsTable } from "./OrgGroupsTable";
|
||||
|
||||
@@ -26,6 +27,7 @@ export const OrgGroupsSection = () => {
|
||||
|
||||
const { popUp, handlePopUpOpen, handlePopUpClose, handlePopUpToggle } = usePopUp([
|
||||
"group",
|
||||
"groupMembers",
|
||||
"deleteGroup",
|
||||
"upgradePlan"
|
||||
] as const);
|
||||
@@ -92,6 +94,11 @@ export const OrgGroupsSection = () => {
|
||||
handlePopUpClose={handlePopUpClose}
|
||||
handlePopUpToggle={handlePopUpToggle}
|
||||
/>
|
||||
<OrgGroupMembersModal
|
||||
popUp={popUp}
|
||||
handlePopUpClose={handlePopUpClose}
|
||||
handlePopUpToggle={handlePopUpToggle}
|
||||
/>
|
||||
<DeleteActionModal
|
||||
isOpen={popUp.deleteGroup.isOpen}
|
||||
title={`Are you sure want to delete the group named ${
|
||||
|
||||
+25
-1
@@ -34,7 +34,7 @@ import { UsePopUpState } from "@app/hooks/usePopUp";
|
||||
type Props = {
|
||||
handlePopUpOpen: (
|
||||
popUpName: keyof UsePopUpState<
|
||||
["group", "deleteGroup"]
|
||||
["group", "deleteGroup", "groupMembers"]
|
||||
>,
|
||||
data?: {
|
||||
groupId?: string;
|
||||
@@ -143,6 +143,29 @@ export const OrgGroupsTable = ({
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="flex items-center justify-end">
|
||||
<OrgPermissionCan
|
||||
I={OrgPermissionActions.Edit}
|
||||
a={OrgPermissionSubjects.Groups}
|
||||
>
|
||||
{(isAllowed) => (
|
||||
<Tooltip content="Manage group members">
|
||||
<IconButton
|
||||
onClick={() => {
|
||||
handlePopUpOpen("groupMembers", {
|
||||
slug
|
||||
});
|
||||
}}
|
||||
size="lg"
|
||||
colorSchema="primary"
|
||||
variant="plain"
|
||||
ariaLabel="update"
|
||||
isDisabled={!isAllowed}
|
||||
>
|
||||
<FontAwesomeIcon icon={faUsers} />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)}
|
||||
</OrgPermissionCan>
|
||||
<OrgPermissionCan
|
||||
I={OrgPermissionActions.Edit}
|
||||
a={OrgPermissionSubjects.Groups}
|
||||
@@ -163,6 +186,7 @@ export const OrgGroupsTable = ({
|
||||
colorSchema="primary"
|
||||
variant="plain"
|
||||
ariaLabel="update"
|
||||
className="ml-4"
|
||||
isDisabled={!isAllowed}
|
||||
>
|
||||
<FontAwesomeIcon icon={faPencil} />
|
||||
|
||||
Reference in New Issue
Block a user