awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-10 11:29:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Access requests group support

Browse Source
This commit is contained in:
Daniel Hougaard
2024-08-20 19:50:42 +04:00
committed by Daniel Hougaard
parent 4bf5381060
commit 3647943c80
7 changed files with 492 additions and 407 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/hooks/api/accessApproval/mutation.tsx
+10 -2
View File
@@ -16,12 +16,20 @@ export const useCreateAccessApprovalPolicy = () => {
const queryClient = useQueryClient();
return useMutation<{}, {}, TCreateAccessPolicyDTO>({
mutationFn: async ({ environment, projectSlug, approvals, approvers, name, secretPath, enforcementLevel }) => {
mutationFn: async ({
environment,
projectSlug,
approvals,
approverUserIds,
name,
secretPath,
enforcementLevel
}) => {
const { data } = await apiRequest.post("/api/v1/access-approvals/policies", {
environment,
projectSlug,
approvals,
approvers,
approverUserIds,
secretPath,
name,
enforcementLevel
frontend/src/hooks/api/accessApproval/types.ts
+9 -2
View File
@@ -23,7 +23,14 @@ export type TAccessApprovalRequest = {
id: string;
policyId: string;
privilegeId: string | null;
requestedBy: string;
requestedByUserId: string;
requestedByUser: {
email: string;
firstName?: string;
lastName?: string;
userId: string;
username: string;
};
createdAt: Date;
updatedAt: Date;
isTemporary: boolean;
@@ -123,7 +130,7 @@ export type TCreateAccessPolicyDTO = {
projectSlug: string;
name?: string;
environment: string;
approvers?: string[];
approverUserIds?: string[];
approvals?: number;
secretPath?: string;
enforcementLevel?: EnforcementLevel;
frontend/src/hooks/api/users/types.ts
+1
View File
@@ -83,6 +83,7 @@ export type TWorkspaceUser = {
publicKey: string;
};
projectId: string;
isGroupMember: boolean;
project: {
id: string;
name: string;
frontend/src/hooks/api/workspace/queries.tsx
+7 -2
View File
@@ -377,14 +377,19 @@ export const useDeleteWsEnvironment = () => {
});
};
export const useGetWorkspaceUsers = (workspaceId: string) => {
export const useGetWorkspaceUsers = (workspaceId: string, includeGroupMembers?: boolean) => {
return useQuery({
queryKey: workspaceKeys.getWorkspaceUsers(workspaceId),
queryFn: async () => {
const {
data: { users }
} = await apiRequest.get<{ users: TWorkspaceUser[] }>(
`/api/v1/workspace/${workspaceId}/users`
`/api/v1/workspace/${workspaceId}/users`,
{
params: {
includeGroupMembers
}
}
);
return users;
},
frontend/src/views/SecretApprovalPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx
+34 -31
View File
@@ -29,6 +29,7 @@ import {
ProjectPermissionSub,
useProjectPermission,
useSubscription,
useUser,
useWorkspace
} from "@app/context";
import { usePopUp } from "@app/hooks";
@@ -47,7 +48,7 @@ import { queryClient } from "@app/reactQuery";
import { RequestAccessModal } from "./components/RequestAccessModal";
import { ReviewAccessRequestModal } from "./components/ReviewAccessModal";
const generateRequestText = (request: TAccessApprovalRequest, membershipId: string) => {
const generateRequestText = (request: TAccessApprovalRequest, userId: string) => {
const { isTemporary } = request;
return (
@@ -63,7 +64,7 @@ const generateRequestText = (request: TAccessApprovalRequest, membershipId: stri
</code>
</div>
<div>
{request.requestedBy === membershipId && (
{request.requestedByUserId === userId && (
<span className="text-xs text-gray-500">
<Badge className="ml-1">Requested By You</Badge>
</span>
@@ -81,7 +82,7 @@ export const AccessApprovalRequest = ({
projectId: string;
}) => {
const [selectedRequest, setSelectedRequest] = useState<
(TAccessApprovalRequest & {
| (TAccessApprovalRequest & {
user: TWorkspaceUser["user"] | null;
isRequestedByCurrentUser: boolean;
isApprover: boolean;
@@ -94,16 +95,19 @@ export const AccessApprovalRequest = ({
"reviewRequest",
"upgradePlan"
] as const);
const { membership, permission } = useProjectPermission();
const { permission } = useProjectPermission();
const { user } = useUser();
const { subscription } = useSubscription();
const { currentWorkspace } = useWorkspace();
const { data: members } = useGetWorkspaceUsers(projectId);
const { data: members } = useGetWorkspaceUsers(projectId, true);
const membersGroupById = members?.reduce<Record<string, TWorkspaceUser>>(
(prev, curr) => ({ ...prev, [curr.id]: curr }),
(prev, curr) => ({ ...prev, [curr.user.id]: curr }),
{}
);
console.log("membersGroupById", membersGroupById);
const [statusFilter, setStatusFilter] = useState<"open" | "close">("open");
const [requestedByFilter, setRequestedByFilter] = useState<string | undefined>(undefined);
const [envFilter, setEnvFilter] = useState<string | undefined>(undefined);
@@ -140,19 +144,18 @@ export const AccessApprovalRequest = ({
}, [requests, statusFilter, requestedByFilter, envFilter]);
const generateRequestDetails = (request: TAccessApprovalRequest) => {
const isReviewedByUser =
request.reviewers.findIndex(({ member }) => member === membership.id) !== -1;
console.log(request);
const isReviewedByUser = request.reviewers.findIndex(({ member }) => member === user.id) !== -1;
const isRejectedByAnyone = request.reviewers.some(
({ status }) => status === ApprovalStatus.REJECTED
);
const isApprover = request.policy.approvers.indexOf(membership.id || "") !== -1;
const isApprover = request.policy.approvers.indexOf(user.id || "") !== -1;
const isAccepted = request.isApproved;
const isSoftEnforcement = request.policy.enforcementLevel === EnforcementLevel.Soft;
const isRequestedByCurrentUser = request.requestedBy === membership.id;
const isRequestedByCurrentUser = request.requestedByUserId === user.id;
const userReviewStatus = request.reviewers.find(
({ member }) => member === membership.id
)?.status;
const userReviewStatus = request.reviewers.find(({ member }) => member === user.id)?.status;
let displayData: { label: string; type: "primary" | "danger" | "success" } = {
label: "",
@@ -303,7 +306,7 @@ export const AccessApprovalRequest = ({
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>Select an author</DropdownMenuLabel>
{members?.map(({ user, id }) => (
{members?.map(({ user: membershipUser, id }) => (
<DropdownMenuItem
onClick={() =>
setRequestedByFilter((state) => (state === id ? undefined : id))
@@ -312,7 +315,7 @@ export const AccessApprovalRequest = ({
icon={requestedByFilter === id && <FontAwesomeIcon icon={faCheckCircle} />}
iconPos="right"
>
{user.username}
{membershipUser.username}
</DropdownMenuItem>
))}
</DropdownMenuContent>
@@ -341,22 +344,21 @@ export const AccessApprovalRequest = ({
tabIndex={0}
onClick={() => {
if (
(
!details.isApprover
|| details.isReviewedByUser
|| details.isRejectedByAnyone
|| details.isAccepted
) && !(
details.isSoftEnforcement
&& details.isRequestedByCurrentUser
&& !details.isAccepted
(!details.isApprover ||
details.isReviewedByUser ||
details.isRejectedByAnyone ||
details.isAccepted) &&
!(
details.isSoftEnforcement &&
details.isRequestedByCurrentUser &&
!details.isAccepted
)
)
return;
setSelectedRequest({
...request,
user: membersGroupById?.[request.requestedBy].user!,
user: membersGroupById?.[request.requestedByUserId].user!,
isRequestedByCurrentUser: details.isRequestedByCurrentUser,
isApprover: details.isApprover
});
@@ -373,7 +375,7 @@ export const AccessApprovalRequest = ({
if (evt.key === "Enter") {
setSelectedRequest({
...request,
user: membersGroupById?.[request.requestedBy].user!,
user: membersGroupById?.[request.requestedByUserId].user!,
isRequestedByCurrentUser: details.isRequestedByCurrentUser,
isApprover: details.isApprover
});
@@ -385,16 +387,17 @@ export const AccessApprovalRequest = ({
<div className="flex w-full flex-col justify-between">
<div className="mb-1 flex w-full items-center">
<FontAwesomeIcon icon={faLock} className="mr-2" />
{generateRequestText(request, membership.id)}
{generateRequestText(request, user.id)}
</div>
<div className="flex items-center justify-between">
<div className="text-xs text-gray-500">
{membersGroupById?.[request.requestedBy]?.user && (
{membersGroupById?.[request.requestedByUserId]?.user && (
<>
Requested {formatDistance(new Date(request.createdAt), new Date())}{" "}
ago by {membersGroupById?.[request.requestedBy]?.user?.firstName}{" "}
{membersGroupById?.[request.requestedBy]?.user?.lastName} (
{membersGroupById?.[request.requestedBy]?.user?.email}){" "}
ago by{" "}
{membersGroupById?.[request.requestedByUserId]?.user?.firstName}{" "}
{membersGroupById?.[request.requestedByUserId]?.user?.lastName} (
{membersGroupById?.[request.requestedByUserId]?.user?.email}){" "}
</>
)}
</div>
frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/ApprovalPolicyList.tsx
+44 -18
View File
@@ -1,5 +1,10 @@
import { useMemo,useState } from "react";
import { faCheckCircle,faChevronDown, faFileShield, faPlus } from "@fortawesome/free-solid-svg-icons";
import { useMemo, useState } from "react";
import {
faCheckCircle,
faChevronDown,
faFileShield,
faPlus
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { createNotification } from "@app/components/notifications";
@@ -32,7 +37,12 @@ import {
useWorkspace
} from "@app/context";
import { usePopUp } from "@app/hooks";
import { useDeleteAccessApprovalPolicy, useDeleteSecretApprovalPolicy, useGetSecretApprovalPolicies, useGetWorkspaceUsers } from "@app/hooks/api";
import {
useDeleteAccessApprovalPolicy,
useDeleteSecretApprovalPolicy,
useGetSecretApprovalPolicies,
useGetWorkspaceUsers
} from "@app/hooks/api";
import { useGetAccessApprovalPolicies } from "@app/hooks/api/accessApproval/queries";
import { PolicyType } from "@app/hooks/api/policies/enums";
import { TAccessApprovalPolicy, Workspace } from "@app/hooks/api/types";
@@ -45,27 +55,32 @@ interface IProps {
}
const useApprovalPolicies = (permission: TProjectPermission, currentWorkspace?: Workspace) => {
const { data: accessPolicies, isLoading: isAccessPoliciesLoading } = useGetAccessApprovalPolicies({
const { data: accessPolicies, isLoading: isAccessPoliciesLoading } = useGetAccessApprovalPolicies(
{
projectSlug: currentWorkspace?.slug as string,
options: {
enabled:
permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretApproval) &&
!!currentWorkspace?.slug
}
});
const { data: secretPolicies, isLoading: isSecretPoliciesLoading } = useGetSecretApprovalPolicies({
}
);
const { data: secretPolicies, isLoading: isSecretPoliciesLoading } = useGetSecretApprovalPolicies(
{
workspaceId: currentWorkspace?.id as string,
options: {
enabled:
permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretApproval) &&
!!currentWorkspace?.id
}
});
}
);
// merge data sorted by updatedAt
const policies = [
...(accessPolicies?.map(policy => ({ ...policy, policyType: PolicyType.AccessPolicy })) || []),
...(secretPolicies?.map(policy => ({ ...policy, policyType: PolicyType.ChangePolicy })) || [])
...(accessPolicies?.map((policy) => ({ ...policy, policyType: PolicyType.AccessPolicy })) ||
[]),
...(secretPolicies?.map((policy) => ({ ...policy, policyType: PolicyType.ChangePolicy })) || [])
].sort((a, b) => {
return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
});
@@ -86,15 +101,16 @@ export const ApprovalPolicyList = ({ workspaceId }: IProps) => {
const { subscription } = useSubscription();
const { currentWorkspace } = useWorkspace();
const { data: members } = useGetWorkspaceUsers(workspaceId);
const { policies, isLoading: isPoliciesLoading } = useApprovalPolicies(permission, currentWorkspace);
const { data: members } = useGetWorkspaceUsers(workspaceId, true);
const { policies, isLoading: isPoliciesLoading } = useApprovalPolicies(
permission,
currentWorkspace
);
const [filterType, setFilterType] = useState<string | null>(null);
const filteredPolicies = useMemo(() => {
return filterType
? policies.filter(policy => policy.policyType === filterType)
: policies;
return filterType ? policies.filter((policy) => policy.policyType === filterType) : policies;
}, [policies, filterType]);
const { mutateAsync: deleteSecretApprovalPolicy } = useDeleteSecretApprovalPolicy();
@@ -177,8 +193,10 @@ export const ApprovalPolicyList = ({ workspaceId }: IProps) => {
<Button
variant="plain"
colorSchema="secondary"
className="text-bunker-300 uppercase text-xs font-semibold"
rightIcon={<FontAwesomeIcon icon={faChevronDown} size="sm" className="ml-2" />}
className="text-xs font-semibold uppercase text-bunker-300"
rightIcon={
<FontAwesomeIcon icon={faChevronDown} size="sm" className="ml-2" />
}
>
Type
</Button>
@@ -194,14 +212,22 @@ export const ApprovalPolicyList = ({ workspaceId }: IProps) => {
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => setFilterType(PolicyType.AccessPolicy)}
icon={filterType === PolicyType.AccessPolicy && <FontAwesomeIcon icon={faCheckCircle} />}
icon={
filterType === PolicyType.AccessPolicy && (
<FontAwesomeIcon icon={faCheckCircle} />
)
}
iconPos="right"
>
Access Policy
</DropdownMenuItem>
<DropdownMenuItem
onClick={() => setFilterType(PolicyType.ChangePolicy)}
icon={filterType === PolicyType.ChangePolicy && <FontAwesomeIcon icon={faCheckCircle} />}
icon={
filterType === PolicyType.ChangePolicy && (
<FontAwesomeIcon icon={faCheckCircle} />
)
}
iconPos="right"
>
Change Policy
frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx
+52 -17
View File
@@ -40,19 +40,19 @@ type Props = {
};
const formSchema = z
.object({
.object({
environment: z.string(),
name: z.string().optional(),
secretPath: z.string().optional(),
approvals: z.number().min(1),
approvers: z.string().array().min(1),
approverUserIds: z.string().array().min(1),
policyType: z.nativeEnum(PolicyType),
enforcementLevel: z.nativeEnum(EnforcementLevel)
})
.refine((data) => data.approvals <= data.approvers.length, {
})
.refine((data) => data.approvals <= data.approverUserIds.length, {
path: ["approvals"],
message: "The number of approvals should be lower than the number of approvers."
});
});
type TFormSchema = z.infer<typeof formSchema>;
@@ -71,11 +71,14 @@ export const AccessPolicyForm = ({
formState: { isSubmitting }
} = useForm<TFormSchema>({
resolver: zodResolver(formSchema),
values: editValues ? {
values: editValues
? {
...editValues,
environment: editValues.environment.slug,
approvers: editValues?.userApprovers?.map((user) => user.userId) || editValues?.approvers
} : undefined
approverUserIds:
editValues?.userApprovers?.map((user) => user.userId) || editValues?.approvers
}
: undefined
});
const { currentWorkspace } = useWorkspace();
@@ -104,6 +107,26 @@ export const AccessPolicyForm = ({
workspaceId: currentWorkspace?.id || ""
});
} else {
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
console.log(data);
await createAccessApprovalPolicy({
...data,
projectSlug
@@ -178,7 +201,6 @@ export const AccessPolicyForm = ({
control={control}
name="policyType"
defaultValue={PolicyType.ChangePolicy}
render={({ field: { value, onChange }, fieldState: { error } }) => (
<FormControl
label="Policy Type"
@@ -208,7 +230,11 @@ export const AccessPolicyForm = ({
control={control}
name="name"
render={({ field, fieldState: { error } }) => (
<FormControl label="Policy Name" isError={Boolean(error)} errorText={error?.message}>
<FormControl
label="Policy Name"
isError={Boolean(error)}
errorText={error?.message}
>
<Input {...field} value={field.value || ""} />
</FormControl>
)}
@@ -247,14 +273,18 @@ export const AccessPolicyForm = ({
control={control}
name="secretPath"
render={({ field, fieldState: { error } }) => (
<FormControl label="Secret Path" isError={Boolean(error)} errorText={error?.message}>
<FormControl
label="Secret Path"
isError={Boolean(error)}
errorText={error?.message}
>
<Input {...field} value={field.value || ""} />
</FormControl>
)}
/>
<Controller
control={control}
name="approvers"
name="approverUserIds"
render={({ field: { value, onChange }, fieldState: { error } }) => (
<FormControl
label="Required Approvers"
@@ -277,15 +307,17 @@ export const AccessPolicyForm = ({
<DropdownMenuLabel>
Select members that are allowed to approve requests
</DropdownMenuLabel>
{members.map(({ id, user }) => {
const userId = watch("policyType") === PolicyType.ChangePolicy ? user.id : id;
{members.map(({ user }) => {
const { id: userId } = user;
const isChecked = value?.includes(userId);
return (
<DropdownMenuItem
onClick={(evt) => {
evt.preventDefault();
onChange(
isChecked ? value?.filter((el: string) => el !== userId) : [...(value || []), userId]
isChecked
? value?.filter((el: string) => el !== userId)
: [...(value || []), userId]
);
}}
key={`create-policy-members-${userId}`}
@@ -343,7 +375,11 @@ export const AccessPolicyForm = ({
>
{Object.values(EnforcementLevel).map((level) => {
return (
<SelectItem value={level} key={`enforcement-level-${level}`} className="text-xs">
<SelectItem
value={level}
key={`enforcement-level-${level}`}
className="text-xs"
>
{formatEnforcementLevel(level)}
</SelectItem>
);
@@ -366,4 +402,3 @@ export const AccessPolicyForm = ({
</Modal>
);
};