awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-07 14:27:30 +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(); const queryClient = useQueryClient();
return useMutation<{}, {}, TCreateAccessPolicyDTO>({ 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", { const { data } = await apiRequest.post("/api/v1/access-approvals/policies", {
environment, environment,
projectSlug, projectSlug,
approvals, approvals,
approvers, approverUserIds,
secretPath, secretPath,
name, name,
enforcementLevel enforcementLevel
frontend/src/hooks/api/accessApproval/types.ts
+9 -2
View File
@@ -23,7 +23,14 @@ export type TAccessApprovalRequest = {
id: string; id: string;
policyId: string; policyId: string;
privilegeId: string | null; privilegeId: string | null;
requestedBy: string; requestedByUserId: string;
requestedByUser: {
email: string;
firstName?: string;
lastName?: string;
userId: string;
username: string;
};
createdAt: Date; createdAt: Date;
updatedAt: Date; updatedAt: Date;
isTemporary: boolean; isTemporary: boolean;
@@ -123,7 +130,7 @@ export type TCreateAccessPolicyDTO = {
projectSlug: string; projectSlug: string;
name?: string; name?: string;
environment: string; environment: string;
approvers?: string[]; approverUserIds?: string[];
approvals?: number; approvals?: number;
secretPath?: string; secretPath?: string;
enforcementLevel?: EnforcementLevel; enforcementLevel?: EnforcementLevel;
frontend/src/hooks/api/users/types.ts
+1
View File
@@ -83,6 +83,7 @@ export type TWorkspaceUser = {
publicKey: string; publicKey: string;
}; };
projectId: string; projectId: string;
isGroupMember: boolean;
project: { project: {
id: string; id: string;
name: 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({ return useQuery({
queryKey: workspaceKeys.getWorkspaceUsers(workspaceId), queryKey: workspaceKeys.getWorkspaceUsers(workspaceId),
queryFn: async () => { queryFn: async () => {
const { const {
data: { users } data: { users }
} = await apiRequest.get<{ users: TWorkspaceUser[] }>( } = await apiRequest.get<{ users: TWorkspaceUser[] }>(
`/api/v1/workspace/${workspaceId}/users` `/api/v1/workspace/${workspaceId}/users`,
{
params: {
includeGroupMembers
}
}
); );
return users; return users;
}, },
frontend/src/views/SecretApprovalPage/components/AccessApprovalRequest/AccessApprovalRequest.tsx
+38 -35
View File
@@ -29,6 +29,7 @@ import {
ProjectPermissionSub, ProjectPermissionSub,
useProjectPermission, useProjectPermission,
useSubscription, useSubscription,
useUser,
useWorkspace useWorkspace
} from "@app/context"; } from "@app/context";
import { usePopUp } from "@app/hooks"; import { usePopUp } from "@app/hooks";
@@ -47,7 +48,7 @@ import { queryClient } from "@app/reactQuery";
import { RequestAccessModal } from "./components/RequestAccessModal"; import { RequestAccessModal } from "./components/RequestAccessModal";
import { ReviewAccessRequestModal } from "./components/ReviewAccessModal"; import { ReviewAccessRequestModal } from "./components/ReviewAccessModal";
const generateRequestText = (request: TAccessApprovalRequest, membershipId: string) => { const generateRequestText = (request: TAccessApprovalRequest, userId: string) => {
const { isTemporary } = request; const { isTemporary } = request;
return ( return (
@@ -63,7 +64,7 @@ const generateRequestText = (request: TAccessApprovalRequest, membershipId: stri
</code> </code>
</div> </div>
<div> <div>
{request.requestedBy === membershipId && ( {request.requestedByUserId === userId && (
<span className="text-xs text-gray-500"> <span className="text-xs text-gray-500">
<Badge className="ml-1">Requested By You</Badge> <Badge className="ml-1">Requested By You</Badge>
</span> </span>
@@ -81,11 +82,11 @@ export const AccessApprovalRequest = ({
projectId: string; projectId: string;
}) => { }) => {
const [selectedRequest, setSelectedRequest] = useState< const [selectedRequest, setSelectedRequest] = useState<
(TAccessApprovalRequest & { | (TAccessApprovalRequest & {
user: TWorkspaceUser["user"] | null; user: TWorkspaceUser["user"] | null;
isRequestedByCurrentUser: boolean; isRequestedByCurrentUser: boolean;
isApprover: boolean; isApprover: boolean;
}) })
| null | null
>(null); >(null);
@@ -94,16 +95,19 @@ export const AccessApprovalRequest = ({
"reviewRequest", "reviewRequest",
"upgradePlan" "upgradePlan"
] as const); ] as const);
const { membership, permission } = useProjectPermission(); const { permission } = useProjectPermission();
const { user } = useUser();
const { subscription } = useSubscription(); const { subscription } = useSubscription();
const { currentWorkspace } = useWorkspace(); const { currentWorkspace } = useWorkspace();
const { data: members } = useGetWorkspaceUsers(projectId); const { data: members } = useGetWorkspaceUsers(projectId, true);
const membersGroupById = members?.reduce<Record<string, TWorkspaceUser>>( 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 [statusFilter, setStatusFilter] = useState<"open" | "close">("open");
const [requestedByFilter, setRequestedByFilter] = useState<string | undefined>(undefined); const [requestedByFilter, setRequestedByFilter] = useState<string | undefined>(undefined);
const [envFilter, setEnvFilter] = useState<string | undefined>(undefined); const [envFilter, setEnvFilter] = useState<string | undefined>(undefined);
@@ -140,19 +144,18 @@ export const AccessApprovalRequest = ({
}, [requests, statusFilter, requestedByFilter, envFilter]); }, [requests, statusFilter, requestedByFilter, envFilter]);
const generateRequestDetails = (request: TAccessApprovalRequest) => { const generateRequestDetails = (request: TAccessApprovalRequest) => {
const isReviewedByUser = console.log(request);
request.reviewers.findIndex(({ member }) => member === membership.id) !== -1;
const isReviewedByUser = request.reviewers.findIndex(({ member }) => member === user.id) !== -1;
const isRejectedByAnyone = request.reviewers.some( const isRejectedByAnyone = request.reviewers.some(
({ status }) => status === ApprovalStatus.REJECTED ({ 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 isAccepted = request.isApproved;
const isSoftEnforcement = request.policy.enforcementLevel === EnforcementLevel.Soft; const isSoftEnforcement = request.policy.enforcementLevel === EnforcementLevel.Soft;
const isRequestedByCurrentUser = request.requestedBy === membership.id; const isRequestedByCurrentUser = request.requestedByUserId === user.id;
const userReviewStatus = request.reviewers.find( const userReviewStatus = request.reviewers.find(({ member }) => member === user.id)?.status;
({ member }) => member === membership.id
)?.status;
let displayData: { label: string; type: "primary" | "danger" | "success" } = { let displayData: { label: string; type: "primary" | "danger" | "success" } = {
label: "", label: "",
@@ -303,7 +306,7 @@ export const AccessApprovalRequest = ({
</DropdownMenuTrigger> </DropdownMenuTrigger>
<DropdownMenuContent align="end"> <DropdownMenuContent align="end">
<DropdownMenuLabel>Select an author</DropdownMenuLabel> <DropdownMenuLabel>Select an author</DropdownMenuLabel>
{members?.map(({ user, id }) => ( {members?.map(({ user: membershipUser, id }) => (
<DropdownMenuItem <DropdownMenuItem
onClick={() => onClick={() =>
setRequestedByFilter((state) => (state === id ? undefined : id)) setRequestedByFilter((state) => (state === id ? undefined : id))
@@ -312,7 +315,7 @@ export const AccessApprovalRequest = ({
icon={requestedByFilter === id && <FontAwesomeIcon icon={faCheckCircle} />} icon={requestedByFilter === id && <FontAwesomeIcon icon={faCheckCircle} />}
iconPos="right" iconPos="right"
> >
{user.username} {membershipUser.username}
</DropdownMenuItem> </DropdownMenuItem>
))} ))}
</DropdownMenuContent> </DropdownMenuContent>
@@ -341,22 +344,21 @@ export const AccessApprovalRequest = ({
tabIndex={0} tabIndex={0}
onClick={() => { onClick={() => {
if ( if (
( (!details.isApprover ||
!details.isApprover details.isReviewedByUser ||
|| details.isReviewedByUser details.isRejectedByAnyone ||
|| details.isRejectedByAnyone details.isAccepted) &&
|| details.isAccepted !(
) && !( details.isSoftEnforcement &&
details.isSoftEnforcement details.isRequestedByCurrentUser &&
&& details.isRequestedByCurrentUser !details.isAccepted
&& !details.isAccepted
) )
) )
return; return;
setSelectedRequest({ setSelectedRequest({
...request, ...request,
user: membersGroupById?.[request.requestedBy].user!, user: membersGroupById?.[request.requestedByUserId].user!,
isRequestedByCurrentUser: details.isRequestedByCurrentUser, isRequestedByCurrentUser: details.isRequestedByCurrentUser,
isApprover: details.isApprover isApprover: details.isApprover
}); });
@@ -373,7 +375,7 @@ export const AccessApprovalRequest = ({
if (evt.key === "Enter") { if (evt.key === "Enter") {
setSelectedRequest({ setSelectedRequest({
...request, ...request,
user: membersGroupById?.[request.requestedBy].user!, user: membersGroupById?.[request.requestedByUserId].user!,
isRequestedByCurrentUser: details.isRequestedByCurrentUser, isRequestedByCurrentUser: details.isRequestedByCurrentUser,
isApprover: details.isApprover isApprover: details.isApprover
}); });
@@ -385,16 +387,17 @@ export const AccessApprovalRequest = ({
<div className="flex w-full flex-col justify-between"> <div className="flex w-full flex-col justify-between">
<div className="mb-1 flex w-full items-center"> <div className="mb-1 flex w-full items-center">
<FontAwesomeIcon icon={faLock} className="mr-2" /> <FontAwesomeIcon icon={faLock} className="mr-2" />
{generateRequestText(request, membership.id)} {generateRequestText(request, user.id)}
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="text-xs text-gray-500"> <div className="text-xs text-gray-500">
{membersGroupById?.[request.requestedBy]?.user && ( {membersGroupById?.[request.requestedByUserId]?.user && (
<> <>
Requested {formatDistance(new Date(request.createdAt), new Date())}{" "} Requested {formatDistance(new Date(request.createdAt), new Date())}{" "}
ago by {membersGroupById?.[request.requestedBy]?.user?.firstName}{" "} ago by{" "}
{membersGroupById?.[request.requestedBy]?.user?.lastName} ( {membersGroupById?.[request.requestedByUserId]?.user?.firstName}{" "}
{membersGroupById?.[request.requestedBy]?.user?.email}){" "} {membersGroupById?.[request.requestedByUserId]?.user?.lastName} (
{membersGroupById?.[request.requestedByUserId]?.user?.email}){" "}
</> </>
)} )}
</div> </div>
frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/ApprovalPolicyList.tsx
+54 -28
View File
@@ -1,5 +1,10 @@
import { useMemo,useState } from "react"; import { useMemo, useState } from "react";
import { faCheckCircle,faChevronDown, faFileShield, faPlus } from "@fortawesome/free-solid-svg-icons"; import {
faCheckCircle,
faChevronDown,
faFileShield,
faPlus
} from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { createNotification } from "@app/components/notifications"; import { createNotification } from "@app/components/notifications";
@@ -32,7 +37,12 @@ import {
useWorkspace useWorkspace
} from "@app/context"; } from "@app/context";
import { usePopUp } from "@app/hooks"; 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 { useGetAccessApprovalPolicies } from "@app/hooks/api/accessApproval/queries";
import { PolicyType } from "@app/hooks/api/policies/enums"; import { PolicyType } from "@app/hooks/api/policies/enums";
import { TAccessApprovalPolicy, Workspace } from "@app/hooks/api/types"; import { TAccessApprovalPolicy, Workspace } from "@app/hooks/api/types";
@@ -45,27 +55,32 @@ interface IProps {
} }
const useApprovalPolicies = (permission: TProjectPermission, currentWorkspace?: Workspace) => { const useApprovalPolicies = (permission: TProjectPermission, currentWorkspace?: Workspace) => {
const { data: accessPolicies, isLoading: isAccessPoliciesLoading } = useGetAccessApprovalPolicies({ const { data: accessPolicies, isLoading: isAccessPoliciesLoading } = useGetAccessApprovalPolicies(
projectSlug: currentWorkspace?.slug as string, {
options: { projectSlug: currentWorkspace?.slug as string,
enabled: options: {
permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretApproval) && enabled:
!!currentWorkspace?.slug 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: { workspaceId: currentWorkspace?.id as string,
enabled: options: {
permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretApproval) && enabled:
!!currentWorkspace?.id permission.can(ProjectPermissionActions.Read, ProjectPermissionSub.SecretApproval) &&
!!currentWorkspace?.id
}
} }
}); );
// merge data sorted by updatedAt // merge data sorted by updatedAt
const policies = [ const policies = [
...(accessPolicies?.map(policy => ({ ...policy, policyType: PolicyType.AccessPolicy })) || []), ...(accessPolicies?.map((policy) => ({ ...policy, policyType: PolicyType.AccessPolicy })) ||
...(secretPolicies?.map(policy => ({ ...policy, policyType: PolicyType.ChangePolicy })) || []) []),
...(secretPolicies?.map((policy) => ({ ...policy, policyType: PolicyType.ChangePolicy })) || [])
].sort((a, b) => { ].sort((a, b) => {
return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime(); return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
}); });
@@ -86,15 +101,16 @@ export const ApprovalPolicyList = ({ workspaceId }: IProps) => {
const { subscription } = useSubscription(); const { subscription } = useSubscription();
const { currentWorkspace } = useWorkspace(); const { currentWorkspace } = useWorkspace();
const { data: members } = useGetWorkspaceUsers(workspaceId); const { data: members } = useGetWorkspaceUsers(workspaceId, true);
const { policies, isLoading: isPoliciesLoading } = useApprovalPolicies(permission, currentWorkspace); const { policies, isLoading: isPoliciesLoading } = useApprovalPolicies(
permission,
currentWorkspace
);
const [filterType, setFilterType] = useState<string | null>(null); const [filterType, setFilterType] = useState<string | null>(null);
const filteredPolicies = useMemo(() => { const filteredPolicies = useMemo(() => {
return filterType return filterType ? policies.filter((policy) => policy.policyType === filterType) : policies;
? policies.filter(policy => policy.policyType === filterType)
: policies;
}, [policies, filterType]); }, [policies, filterType]);
const { mutateAsync: deleteSecretApprovalPolicy } = useDeleteSecretApprovalPolicy(); const { mutateAsync: deleteSecretApprovalPolicy } = useDeleteSecretApprovalPolicy();
@@ -177,8 +193,10 @@ export const ApprovalPolicyList = ({ workspaceId }: IProps) => {
<Button <Button
variant="plain" variant="plain"
colorSchema="secondary" colorSchema="secondary"
className="text-bunker-300 uppercase text-xs font-semibold" className="text-xs font-semibold uppercase text-bunker-300"
rightIcon={<FontAwesomeIcon icon={faChevronDown} size="sm" className="ml-2" />} rightIcon={
<FontAwesomeIcon icon={faChevronDown} size="sm" className="ml-2" />
}
> >
Type Type
</Button> </Button>
@@ -194,14 +212,22 @@ export const ApprovalPolicyList = ({ workspaceId }: IProps) => {
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
onClick={() => setFilterType(PolicyType.AccessPolicy)} onClick={() => setFilterType(PolicyType.AccessPolicy)}
icon={filterType === PolicyType.AccessPolicy && <FontAwesomeIcon icon={faCheckCircle} />} icon={
filterType === PolicyType.AccessPolicy && (
<FontAwesomeIcon icon={faCheckCircle} />
)
}
iconPos="right" iconPos="right"
> >
Access Policy Access Policy
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem <DropdownMenuItem
onClick={() => setFilterType(PolicyType.ChangePolicy)} onClick={() => setFilterType(PolicyType.ChangePolicy)}
icon={filterType === PolicyType.ChangePolicy && <FontAwesomeIcon icon={faCheckCircle} />} icon={
filterType === PolicyType.ChangePolicy && (
<FontAwesomeIcon icon={faCheckCircle} />
)
}
iconPos="right" iconPos="right"
> >
Change Policy Change Policy
frontend/src/views/SecretApprovalPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx
+363 -328
View File
@@ -7,363 +7,398 @@ import { z } from "zod";
import { createNotification } from "@app/components/notifications"; import { createNotification } from "@app/components/notifications";
import { import {
Button, Button,
DropdownMenu, DropdownMenu,
DropdownMenuContent, DropdownMenuContent,
DropdownMenuItem, DropdownMenuItem,
DropdownMenuLabel, DropdownMenuLabel,
DropdownMenuTrigger, DropdownMenuTrigger,
FormControl, FormControl,
Input, Input,
Modal, Modal,
ModalContent, ModalContent,
Select, Select,
SelectItem SelectItem
} from "@app/components/v2"; } from "@app/components/v2";
import { useWorkspace } from "@app/context"; import { useWorkspace } from "@app/context";
import { policyDetails } from "@app/helpers/policies"; import { policyDetails } from "@app/helpers/policies";
import { useCreateSecretApprovalPolicy, useUpdateSecretApprovalPolicy } from "@app/hooks/api"; import { useCreateSecretApprovalPolicy, useUpdateSecretApprovalPolicy } from "@app/hooks/api";
import { import {
useCreateAccessApprovalPolicy, useCreateAccessApprovalPolicy,
useUpdateAccessApprovalPolicy useUpdateAccessApprovalPolicy
} from "@app/hooks/api/accessApproval"; } from "@app/hooks/api/accessApproval";
import { TAccessApprovalPolicy } from "@app/hooks/api/accessApproval/types"; import { TAccessApprovalPolicy } from "@app/hooks/api/accessApproval/types";
import { EnforcementLevel, PolicyType } from "@app/hooks/api/policies/enums"; import { EnforcementLevel, PolicyType } from "@app/hooks/api/policies/enums";
import { TWorkspaceUser } from "@app/hooks/api/users/types"; import { TWorkspaceUser } from "@app/hooks/api/users/types";
type Props = { type Props = {
isOpen?: boolean; isOpen?: boolean;
onToggle: (isOpen: boolean) => void; onToggle: (isOpen: boolean) => void;
members?: TWorkspaceUser[]; members?: TWorkspaceUser[];
projectSlug: string; projectSlug: string;
editValues?: TAccessApprovalPolicy; editValues?: TAccessApprovalPolicy;
}; };
const formSchema = z const formSchema = z
.object({ .object({
environment: z.string(), environment: z.string(),
name: z.string().optional(), name: z.string().optional(),
secretPath: z.string().optional(), secretPath: z.string().optional(),
approvals: z.number().min(1), approvals: z.number().min(1),
approvers: z.string().array().min(1), approverUserIds: z.string().array().min(1),
policyType: z.nativeEnum(PolicyType), policyType: z.nativeEnum(PolicyType),
enforcementLevel: z.nativeEnum(EnforcementLevel) enforcementLevel: z.nativeEnum(EnforcementLevel)
}) })
.refine((data) => data.approvals <= data.approvers.length, { .refine((data) => data.approvals <= data.approverUserIds.length, {
path: ["approvals"], path: ["approvals"],
message: "The number of approvals should be lower than the number of approvers." message: "The number of approvals should be lower than the number of approvers."
}); });
type TFormSchema = z.infer<typeof formSchema>; type TFormSchema = z.infer<typeof formSchema>;
export const AccessPolicyForm = ({ export const AccessPolicyForm = ({
isOpen, isOpen,
onToggle, onToggle,
members = [], members = [],
projectSlug, projectSlug,
editValues editValues
}: Props) => { }: Props) => {
const { const {
control, control,
handleSubmit, handleSubmit,
reset, reset,
watch, watch,
formState: { isSubmitting } formState: { isSubmitting }
} = useForm<TFormSchema>({ } = useForm<TFormSchema>({
resolver: zodResolver(formSchema), resolver: zodResolver(formSchema),
values: editValues ? { values: editValues
...editValues, ? {
environment: editValues.environment.slug, ...editValues,
approvers: editValues?.userApprovers?.map((user) => user.userId) || editValues?.approvers environment: editValues.environment.slug,
} : undefined approverUserIds:
}); editValues?.userApprovers?.map((user) => user.userId) || editValues?.approvers
const { currentWorkspace } = useWorkspace(); }
: undefined
});
const { currentWorkspace } = useWorkspace();
const environments = currentWorkspace?.environments || []; const environments = currentWorkspace?.environments || [];
const isEditMode = Boolean(editValues); const isEditMode = Boolean(editValues);
useEffect(() => { useEffect(() => {
if (!isOpen || !isEditMode) reset({}); if (!isOpen || !isEditMode) reset({});
}, [isOpen, isEditMode]); }, [isOpen, isEditMode]);
const { mutateAsync: createAccessApprovalPolicy } = useCreateAccessApprovalPolicy(); const { mutateAsync: createAccessApprovalPolicy } = useCreateAccessApprovalPolicy();
const { mutateAsync: updateAccessApprovalPolicy } = useUpdateAccessApprovalPolicy(); const { mutateAsync: updateAccessApprovalPolicy } = useUpdateAccessApprovalPolicy();
const { mutateAsync: createSecretApprovalPolicy } = useCreateSecretApprovalPolicy(); const { mutateAsync: createSecretApprovalPolicy } = useCreateSecretApprovalPolicy();
const { mutateAsync: updateSecretApprovalPolicy } = useUpdateSecretApprovalPolicy(); const { mutateAsync: updateSecretApprovalPolicy } = useUpdateSecretApprovalPolicy();
const policyName = policyDetails[watch("policyType")]?.name || "Policy"; const policyName = policyDetails[watch("policyType")]?.name || "Policy";
const handleCreatePolicy = async (data: TFormSchema) => { const handleCreatePolicy = async (data: TFormSchema) => {
if (!projectSlug) return; if (!projectSlug) return;
try { try {
if (data.policyType === PolicyType.ChangePolicy) { if (data.policyType === PolicyType.ChangePolicy) {
await createSecretApprovalPolicy({ await createSecretApprovalPolicy({
...data, ...data,
workspaceId: currentWorkspace?.id || "" workspaceId: currentWorkspace?.id || ""
}); });
} else { } else {
await createAccessApprovalPolicy({ console.log(data);
...data, console.log(data);
projectSlug console.log(data);
}); console.log(data);
} console.log(data);
createNotification({ console.log(data);
type: "success", console.log(data);
text: "Successfully created policy" console.log(data);
}); console.log(data);
onToggle(false); console.log(data);
} catch (err) { console.log(data);
console.log(err); console.log(data);
createNotification({ console.log(data);
type: "error", console.log(data);
text: "Failed to create policy" console.log(data);
}); console.log(data);
} console.log(data);
}; console.log(data);
console.log(data);
console.log(data);
await createAccessApprovalPolicy({
...data,
projectSlug
});
}
createNotification({
type: "success",
text: "Successfully created policy"
});
onToggle(false);
} catch (err) {
console.log(err);
createNotification({
type: "error",
text: "Failed to create policy"
});
}
};
const handleUpdatePolicy = async (data: TFormSchema) => { const handleUpdatePolicy = async (data: TFormSchema) => {
if (!projectSlug) return; if (!projectSlug) return;
if (!editValues?.id) return; if (!editValues?.id) return;
try { try {
if (data.policyType === PolicyType.ChangePolicy) { if (data.policyType === PolicyType.ChangePolicy) {
await updateSecretApprovalPolicy({ await updateSecretApprovalPolicy({
id: editValues?.id, id: editValues?.id,
...data, ...data,
workspaceId: currentWorkspace?.id || "" workspaceId: currentWorkspace?.id || ""
}); });
} else { } else {
await updateAccessApprovalPolicy({ await updateAccessApprovalPolicy({
id: editValues?.id, id: editValues?.id,
...data, ...data,
projectSlug projectSlug
}); });
} }
createNotification({ createNotification({
type: "success", type: "success",
text: "Successfully updated policy" text: "Successfully updated policy"
}); });
onToggle(false); onToggle(false);
} catch (err) { } catch (err) {
console.log(err); console.log(err);
createNotification({ createNotification({
type: "error", type: "error",
text: "failed to update policy" text: "failed to update policy"
}); });
} }
}; };
const handleFormSubmit = async (data: TFormSchema) => { const handleFormSubmit = async (data: TFormSchema) => {
if (isEditMode) { if (isEditMode) {
await handleUpdatePolicy(data); await handleUpdatePolicy(data);
} else { } else {
await handleCreatePolicy(data); await handleCreatePolicy(data);
} }
}; };
const formatEnforcementLevel = (level: EnforcementLevel) => { const formatEnforcementLevel = (level: EnforcementLevel) => {
if (level === EnforcementLevel.Hard) return "Hard"; if (level === EnforcementLevel.Hard) return "Hard";
if (level === EnforcementLevel.Soft) return "Soft"; if (level === EnforcementLevel.Soft) return "Soft";
return level; return level;
}; };
return ( return (
<Modal isOpen={isOpen} onOpenChange={onToggle}> <Modal isOpen={isOpen} onOpenChange={onToggle}>
<ModalContent title={isEditMode ? `Edit ${policyName}` : "Create Policy"}> <ModalContent title={isEditMode ? `Edit ${policyName}` : "Create Policy"}>
<div className="flex flex-col space-y-3"> <div className="flex flex-col space-y-3">
<form onSubmit={handleSubmit(handleFormSubmit)}> <form onSubmit={handleSubmit(handleFormSubmit)}>
<Controller <Controller
control={control} control={control}
name="policyType" name="policyType"
defaultValue={PolicyType.ChangePolicy} defaultValue={PolicyType.ChangePolicy}
render={({ field: { value, onChange }, fieldState: { error } }) => (
render={({ field: { value, onChange }, fieldState: { error } }) => ( <FormControl
<FormControl label="Policy Type"
label="Policy Type" isRequired
isRequired isError={Boolean(error)}
isError={Boolean(error)} tooltipText="Change polices govern secret changes within a given environment and secret path. Access polices allow underprivileged user to request access to environment/secret path."
tooltipText="Change polices govern secret changes within a given environment and secret path. Access polices allow underprivileged user to request access to environment/secret path." errorText={error?.message}
errorText={error?.message} >
> <Select
<Select isDisabled={isEditMode}
isDisabled={isEditMode} value={value}
value={value} onValueChange={(val) => onChange(val as PolicyType)}
onValueChange={(val) => onChange(val as PolicyType)} className="w-full border border-mineshaft-500"
className="w-full border border-mineshaft-500" >
> {Object.values(PolicyType).map((policyType) => {
{Object.values(PolicyType).map((policyType) => { return (
return ( <SelectItem value={policyType} key={`policy-type-${policyType}`}>
<SelectItem value={policyType} key={`policy-type-${policyType}`}> {policyDetails[policyType].name}
{policyDetails[policyType].name} </SelectItem>
</SelectItem> );
); })}
})} </Select>
</Select> </FormControl>
</FormControl> )}
)} />
/> <Controller
<Controller control={control}
control={control} name="name"
name="name" render={({ field, fieldState: { error } }) => (
render={({ field, fieldState: { error } }) => ( <FormControl
<FormControl label="Policy Name" isError={Boolean(error)} errorText={error?.message}> label="Policy Name"
<Input {...field} value={field.value || ""} /> isError={Boolean(error)}
</FormControl> errorText={error?.message}
)} >
/> <Input {...field} value={field.value || ""} />
<Controller </FormControl>
control={control} )}
name="environment" />
defaultValue={environments[0]?.slug} <Controller
render={({ field: { value, onChange }, fieldState: { error } }) => ( control={control}
<FormControl name="environment"
label="Environment" defaultValue={environments[0]?.slug}
isRequired render={({ field: { value, onChange }, fieldState: { error } }) => (
className="mt-4" <FormControl
isError={Boolean(error)} label="Environment"
errorText={error?.message} isRequired
> className="mt-4"
<Select isError={Boolean(error)}
isDisabled={isEditMode} errorText={error?.message}
value={value} >
onValueChange={(val) => onChange(val)} <Select
className="w-full border border-mineshaft-500" isDisabled={isEditMode}
> value={value}
{environments.map((sourceEnvironment) => ( onValueChange={(val) => onChange(val)}
<SelectItem className="w-full border border-mineshaft-500"
value={sourceEnvironment.slug} >
key={`azure-key-vault-environment-${sourceEnvironment.slug}`} {environments.map((sourceEnvironment) => (
> <SelectItem
{sourceEnvironment.name} value={sourceEnvironment.slug}
</SelectItem> key={`azure-key-vault-environment-${sourceEnvironment.slug}`}
))} >
</Select> {sourceEnvironment.name}
</FormControl> </SelectItem>
)} ))}
/> </Select>
<Controller </FormControl>
control={control} )}
name="secretPath" />
render={({ field, fieldState: { error } }) => ( <Controller
<FormControl label="Secret Path" isError={Boolean(error)} errorText={error?.message}> control={control}
<Input {...field} value={field.value || ""} /> name="secretPath"
</FormControl> render={({ field, fieldState: { error } }) => (
)} <FormControl
/> label="Secret Path"
<Controller isError={Boolean(error)}
control={control} errorText={error?.message}
name="approvers" >
render={({ field: { value, onChange }, fieldState: { error } }) => ( <Input {...field} value={field.value || ""} />
<FormControl </FormControl>
label="Required Approvers" )}
isRequired />
isError={Boolean(error)} <Controller
errorText={error?.message} control={control}
> name="approverUserIds"
<DropdownMenu> render={({ field: { value, onChange }, fieldState: { error } }) => (
<DropdownMenuTrigger asChild> <FormControl
<Input label="Required Approvers"
isReadOnly isRequired
value={value?.length ? `${value.length} selected` : "None"} isError={Boolean(error)}
className="text-left" errorText={error?.message}
/> >
</DropdownMenuTrigger> <DropdownMenu>
<DropdownMenuContent <DropdownMenuTrigger asChild>
style={{ width: "var(--radix-dropdown-menu-trigger-width)" }} <Input
align="start" isReadOnly
> value={value?.length ? `${value.length} selected` : "None"}
<DropdownMenuLabel> className="text-left"
Select members that are allowed to approve requests />
</DropdownMenuLabel> </DropdownMenuTrigger>
{members.map(({ id, user }) => { <DropdownMenuContent
const userId = watch("policyType") === PolicyType.ChangePolicy ? user.id : id; style={{ width: "var(--radix-dropdown-menu-trigger-width)" }}
const isChecked = value?.includes(userId); align="start"
return ( >
<DropdownMenuItem <DropdownMenuLabel>
onClick={(evt) => { Select members that are allowed to approve requests
evt.preventDefault(); </DropdownMenuLabel>
onChange( {members.map(({ user }) => {
isChecked ? value?.filter((el: string) => el !== userId) : [...(value || []), userId] const { id: userId } = user;
); const isChecked = value?.includes(userId);
}} return (
key={`create-policy-members-${userId}`} <DropdownMenuItem
iconPos="right" onClick={(evt) => {
icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />} evt.preventDefault();
> onChange(
{user.username} isChecked
</DropdownMenuItem> ? value?.filter((el: string) => el !== userId)
); : [...(value || []), userId]
})} );
</DropdownMenuContent> }}
</DropdownMenu> key={`create-policy-members-${userId}`}
</FormControl> iconPos="right"
)} icon={isChecked && <FontAwesomeIcon icon={faCheckCircle} />}
/> >
<Controller {user.username}
control={control} </DropdownMenuItem>
name="approvals" );
defaultValue={1} })}
render={({ field, fieldState: { error } }) => ( </DropdownMenuContent>
<FormControl </DropdownMenu>
label="Minimum Approvals Required" </FormControl>
isError={Boolean(error)} )}
errorText={error?.message} />
> <Controller
<Input control={control}
{...field} name="approvals"
type="number" defaultValue={1}
min={1} render={({ field, fieldState: { error } }) => (
onChange={(el) => field.onChange(parseInt(el.target.value, 10))} <FormControl
/> label="Minimum Approvals Required"
</FormControl> isError={Boolean(error)}
)} errorText={error?.message}
/> >
<Controller <Input
control={control} {...field}
name="enforcementLevel" type="number"
defaultValue={EnforcementLevel.Hard} min={1}
render={({ field, fieldState: { error } }) => ( onChange={(el) => field.onChange(parseInt(el.target.value, 10))}
<FormControl />
label="Enforcement Level" </FormControl>
isError={Boolean(error)} )}
errorText={error?.message} />
tooltipText="Determines the level of enforcement for required approvers of a request" <Controller
helperText={ control={control}
field.value === EnforcementLevel.Hard name="enforcementLevel"
? "All approvers must approve the request." defaultValue={EnforcementLevel.Hard}
: "All approvers must approve the request; however, the requester can bypass approval requirements in emergencies." render={({ field, fieldState: { error } }) => (
} <FormControl
> label="Enforcement Level"
<Select isError={Boolean(error)}
value={field.value} errorText={error?.message}
onValueChange={(val) => field.onChange(val as EnforcementLevel)} tooltipText="Determines the level of enforcement for required approvers of a request"
className="w-full border border-mineshaft-500" helperText={
> field.value === EnforcementLevel.Hard
{Object.values(EnforcementLevel).map((level) => { ? "All approvers must approve the request."
return ( : "All approvers must approve the request; however, the requester can bypass approval requirements in emergencies."
<SelectItem value={level} key={`enforcement-level-${level}`} className="text-xs"> }
{formatEnforcementLevel(level)} >
</SelectItem> <Select
); value={field.value}
})} onValueChange={(val) => field.onChange(val as EnforcementLevel)}
</Select> className="w-full border border-mineshaft-500"
</FormControl> >
)} {Object.values(EnforcementLevel).map((level) => {
/> return (
<div className="mt-8 flex items-center space-x-4"> <SelectItem
<Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}> value={level}
Save key={`enforcement-level-${level}`}
</Button> className="text-xs"
<Button onClick={() => onToggle(false)} variant="outline_bg"> >
Close {formatEnforcementLevel(level)}
</Button> </SelectItem>
</div> );
</form> })}
</div> </Select>
</ModalContent> </FormControl>
</Modal> )}
); />
<div className="mt-8 flex items-center space-x-4">
<Button type="submit" isLoading={isSubmitting} isDisabled={isSubmitting}>
Save
</Button>
<Button onClick={() => onToggle(false)} variant="outline_bg">
Close
</Button>
</div>
</form>
</div>
</ModalContent>
</Modal>
);
}; };