diff --git a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx index 046e0838e..83819b09a 100644 --- a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx +++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx @@ -44,6 +44,7 @@ import { EnforcementLevel, PolicyType } from "@app/hooks/api/policies/enums"; import { TWorkspaceUser } from "@app/hooks/api/users/types"; import { PolicyMemberOption } from "./PolicyMemberOption"; +import { PolicyBypasserMemberOption } from "./PolicyBypasserMemberOption"; type Props = { isOpen?: boolean; @@ -64,7 +65,7 @@ const formSchema = z .object({ type: z.literal(ApproverType.User), id: z.string(), - isOrgMembershipActive: z.boolean() + isOrgMembershipActive: z.boolean().optional().nullable() }) .array() .default([]), @@ -73,7 +74,11 @@ const formSchema = z .array() .default([]), userBypassers: z - .object({ type: z.literal(BypasserType.User), id: z.string() }) + .object({ + type: z.literal(BypasserType.User), + id: z.string(), + isOrgMembershipActive: z.boolean().optional().nullable() + }) .array() .default([]), groupBypassers: z @@ -89,7 +94,7 @@ const formSchema = z .object({ type: z.literal(ApproverType.User), id: z.string(), - isOrgMembershipActive: z.boolean() + isOrgMembershipActive: z.boolean().optional().nullable() }) .array() .default([]), @@ -139,7 +144,7 @@ const Form = ({ handleSubmit, watch, resetField, - formState: { isSubmitting } + formState: { isSubmitting, errors } } = useForm({ resolver: zodResolver(formSchema), values: editValues @@ -366,7 +371,8 @@ const Form = ({ () => members.map((member) => ({ id: member.user.id, - type: BypasserType.User + type: BypasserType.User, + isOrgMembershipActive: member.user.isOrgMembershipActive })), [members] ); @@ -409,6 +415,8 @@ const Form = ({ setDragOverItem(null); }; + console.log("error", errors); + return (
@@ -804,6 +812,7 @@ const Form = ({ menuPlacement="top" isMulti placeholder="Select members..." + components={{ Option: PolicyBypasserMemberOption }} options={bypasserMemberOptions} getOptionValue={(option) => option.id} getOptionLabel={(option) => { diff --git a/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/PolicyBypasserMemberOption.tsx b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/PolicyBypasserMemberOption.tsx new file mode 100644 index 000000000..ed572bdba --- /dev/null +++ b/frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/PolicyBypasserMemberOption.tsx @@ -0,0 +1,39 @@ +import { components, OptionProps } from "react-select"; +import { faCheckCircle } from "@fortawesome/free-regular-svg-icons"; +import { faBan } from "@fortawesome/free-solid-svg-icons"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { twMerge } from "tailwind-merge"; + +import { Badge } from "@app/components/v2"; +import { BypasserType } from "@app/hooks/api/accessApproval/types"; + +export const PolicyBypasserMemberOption = ({ + isSelected, + children, + ...props +}: OptionProps<{ + id: string; + type: BypasserType; + isOrgMembershipActive?: boolean; +}>) => { + return ( + +
+

+ {children} +

+ {!props.data.isOrgMembershipActive && ( + + + Inactive + + )} + {isSelected && ( + + )} +
+
+ ); +};