add bypassers inactive state

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<TFormSchema>({
     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 (
     <div className="flex flex-col space-y-3">
       <form onSubmit={handleSubmit(handleFormSubmit)}>
@@ -804,6 +812,7 @@ const Form = ({
                       menuPlacement="top"
                       isMulti
                       placeholder="Select members..."
+                      components={{ Option: PolicyBypasserMemberOption }}
                       options={bypasserMemberOptions}
                       getOptionValue={(option) => option.id}
                       getOptionLabel={(option) => {

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 (
+    <components.Option isSelected={isSelected} {...props}>
+      <div className="flex flex-row items-center justify-between">
+        <p
+          className={twMerge("truncate", !props.data.isOrgMembershipActive && "text-mineshaft-400")}
+        >
+          {children}
+        </p>
+        {!props.data.isOrgMembershipActive && (
+          <Badge className="pointer-events-none ml-1 mr-auto flex h-5 w-min items-center gap-1.5 whitespace-nowrap bg-mineshaft-400/50 text-bunker-300">
+            <FontAwesomeIcon icon={faBan} />
+            Inactive
+          </Badge>
+        )}
+        {isSelected && (
+          <FontAwesomeIcon className="ml-2 text-primary" icon={faCheckCircle} size="sm" />
+        )}
+      </div>
+    </components.Option>
+  );
+};