fix: requested changes

frontend/src/pages/secret-manager/SecretApprovalsPage/components/AccessApprovalRequest/components/ReviewAccessModal.tsx

@@ -4,7 +4,6 @@ import {
   faCheck,
   faEdit,
   faHourglass,
-  faQuestionCircle,
   faTriangleExclamation,
   faUser,
   faUserSlash
@@ -58,8 +57,9 @@ const getReviewedStatusSymbol = (status?: ApprovalStatus, isOrgMembershipActive?
     return (
       // Can't do a tooltip here because nested tooltips doesn't work properly as of yet.
       // TODO(daniel): Fix nested tooltips in the future.
-      <Badge variant="danger" className="flex h-4 items-center justify-center">
+
-        <FontAwesomeIcon icon={faUserSlash} size="xs" />
+      <Badge className="flex h-4 items-center justify-center bg-mineshaft-400/50 text-bunker-300">
+        <FontAwesomeIcon size="xs" icon={faUserSlash} />
       </Badge>
     );
   }
@@ -206,6 +206,7 @@ export const ReviewAccessRequestModal = ({
       (acc, curr) => {
         if (acc.length && acc[acc.length - 1].sequence === curr.sequence) {
           acc[acc.length - 1][curr.type]?.push(curr);
+
           return acc;
         }
 
@@ -217,6 +218,7 @@ export const ReviewAccessRequestModal = ({
             ? { user: [curr], group: [], sequence, approvals }
             : { group: [curr], user: [], sequence, approvals }
         );
+
         return acc;
       },
       [] as {
@@ -430,24 +432,32 @@ export const ReviewAccessRequestModal = ({
                       <GenericFieldLabel className="col-span-2" icon={faUser} label="Users">
                         {Boolean(approver.user.length) && (
                           <div className="flex flex-row flex-wrap gap-2">
-                            {approver?.user?.map((el) => {
+                            {approver?.user?.map((el, index) => {
                               const member = approverSequence?.membersGroupById?.[el.id]?.[0];
                               if (!member) return null;
 
                               return member.user.isOrgMembershipActive ? (
-                                <span key={el.id}>{member.user.username}</span>
+                                <div className="flex items-center" key={member.user.id}>
+                                  <span>{member.user.username}</span>
+                                  {index < approver.user.length - 1 && ","}
+                                </div>
                               ) : (
-                                <span className="opacity-40" key={el.id}>
+                                <div className="flex items-center" key={member.user.id}>
-                                  {member.user.username}{" "}
+                                  <span className="flex items-center opacity-40">
-                                  <span className="text-xs">
+                                    {member.user.username}
-                                    <Tooltip content="This user has been deactivated and no longer has an active organization membership.">
+                                    <span className="text-xs">
-                                      <div>
+                                      <Tooltip content="This user has been deactivated and no longer has an active organization membership.">
-                                        (Inactive){" "}
+                                        <div>
-                                        <FontAwesomeIcon size="xs" icon={faQuestionCircle} />
+                                          <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">
-                                      </div>
+                                            <FontAwesomeIcon icon={faBan} />
-                                    </Tooltip>
+                                            Inactive
+                                          </Badge>
+                                        </div>
+                                      </Tooltip>
+                                    </span>
                                   </span>
-                                </span>
+                                  {index < approver.user.length - 1 && ","}
+                                </div>
                               );
                             })}
                           </div>

frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/AccessPolicyModal.tsx

@@ -44,7 +44,6 @@ 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;
@@ -144,7 +143,7 @@ const Form = ({
     handleSubmit,
     watch,
     resetField,
-    formState: { isSubmitting, errors }
+    formState: { isSubmitting }
   } = useForm<TFormSchema>({
     resolver: zodResolver(formSchema),
     values: editValues
@@ -415,8 +414,6 @@ const Form = ({
     setDragOverItem(null);
   };
 
-  console.log("error", errors);
-
   return (
     <div className="flex flex-col space-y-3">
       <form onSubmit={handleSubmit(handleFormSubmit)}>
@@ -812,7 +809,7 @@ const Form = ({
                       menuPlacement="top"
                       isMulti
                       placeholder="Select members..."
-                      components={{ Option: PolicyBypasserMemberOption }}
+                      components={{ Option: PolicyMemberOption }}
                       options={bypasserMemberOptions}
                       getOptionValue={(option) => option.id}
                       getOptionLabel={(option) => {

frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/ApprovalPolicyRow.tsx

@@ -1,9 +1,9 @@
 import { useMemo } from "react";
 import {
+  faBan,
   faClipboardCheck,
   faEdit,
   faEllipsisV,
-  faQuestionCircle,
   faTrash,
   faUser,
   faUserGroup
@@ -215,21 +215,29 @@ export const ApprovalPolicyRow = ({
                     <GenericFieldLabel className="col-span-2" icon={faUser} label="Users">
                       {Boolean(el.users.length) && (
                         <div className="flex flex-row flex-wrap gap-2">
-                          {el.users.map((u) => {
+                          {el.users.map((u, index) => {
                             return u.user.isOrgMembershipActive ? (
-                              <span key={u.id}>{getMemberLabel(u)}</span>
+                              <div className="flex items-center" key={u.id}>
+                                <span>{getMemberLabel(u)}</span>
+                                {index < el.users.length - 1 && ","}
+                              </div>
                             ) : (
-                              <span className="opacity-40" key={u.id}>
+                              <div className="flex items-center" key={u.id}>
-                                {getMemberLabel(u)}{" "}
+                                <span className="flex items-center opacity-40">
-                                <span className="text-xs">
+                                  {getMemberLabel(u)}
-                                  <Tooltip content="This user has been deactivated and no longer has an active organization membership.">
+                                  <span className="text-xs">
-                                    <div>
+                                    <Tooltip content="This user has been deactivated and no longer has an active organization membership.">
-                                      (Inactive){" "}
+                                      <div>
-                                      <FontAwesomeIcon size="xs" icon={faQuestionCircle} />
+                                        <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">
-                                    </div>
+                                          <FontAwesomeIcon icon={faBan} />
-                                  </Tooltip>
+                                          Inactive
+                                        </Badge>
+                                      </div>
+                                    </Tooltip>
+                                  </span>
                                 </span>
-                              </span>
+                                {index < el.users.length - 1 && ","}
+                              </div>
                             );
                           })}
                         </div>

frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/PolicyBypasserMemberOption.tsx

@@ -1,39 +0,0 @@
-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>
-  );
-};

frontend/src/pages/secret-manager/SecretApprovalsPage/components/ApprovalPolicyList/components/PolicyMemberOption.tsx

@@ -5,7 +5,8 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
 import { Badge } from "@app/components/v2";
-import { ApproverType } from "@app/hooks/api/accessApproval/types";
+import { BypasserType } from "@app/hooks/api/accessApproval/types";
+import { ApproverType } from "@app/hooks/api/secretApproval/types";
 
 export const PolicyMemberOption = ({
   isSelected,
@@ -13,8 +14,8 @@ export const PolicyMemberOption = ({
   ...props
 }: OptionProps<{
   id: string;
+  type: BypasserType | ApproverType;
   isOrgMembershipActive?: boolean;
-  type: ApproverType;
 }>) => {
   return (
     <components.Option isSelected={isSelected} {...props}>

frontend/src/pages/secret-manager/SecretApprovalsPage/components/SecretApprovalRequest/components/SecretApprovalRequestChanges.tsx

@@ -554,31 +554,27 @@ export const SecretApprovalRequestChanges = ({
                   >
                     <Tooltip
                       content={
-                        requiredApprover.firstName
+                        !isOrgMembershipActive
-                          ? `${requiredApprover.firstName || ""} ${requiredApprover.lastName || ""}`
+                          ? "This user has been deactivated and no longer has an active organization membership."
-                          : undefined
+                          : requiredApprover.firstName
+                            ? `${requiredApprover.firstName || ""} ${requiredApprover.lastName || ""}`
+                            : undefined
                       }
                       position="left"
                       sideOffset={10}
                     >
-                      <div className="flex">
+                      <div className="flex items-center">
                         <div>{requiredApprover?.email}</div>
                         <span className="text-red">*</span>
+                        {!isOrgMembershipActive && (
+                          <FontAwesomeIcon
+                            icon={faUserSlash}
+                            size="xs"
+                            className="ml-1 text-mineshaft-300"
+                          />
+                        )}
                       </div>
                     </Tooltip>
-
-                    {!isOrgMembershipActive && (
-                      <Tooltip
-                        className="relative !z-[500]"
-                        content="This user has been deactivated and no longer has an active organization membership."
-                      >
-                        <FontAwesomeIcon
-                          icon={faUserSlash}
-                          size="xs"
-                          className="text-mineshaft-300"
-                        />
-                      </Tooltip>
-                    )}
                   </div>
                   <div className="flex items-center">
                     {reviewer?.comment && (
@@ -632,24 +628,23 @@ export const SecretApprovalRequestChanges = ({
                   >
                     <Tooltip
                       className="relative !z-[500]"
-                      content={`${reviewer.firstName || ""} ${reviewer.lastName || ""}`}
+                      content={
+                        !isOrgMembershipActive
+                          ? "This user has been deactivated and no longer has an active organization membership."
+                          : `${reviewer.firstName || ""} ${reviewer.lastName || ""}`
+                      }
                     >
-                      <div className="flex">
+                      <div className="flex items-center">
                         <span>{reviewer?.email} </span>
+                        {!isOrgMembershipActive && (
+                          <FontAwesomeIcon
+                            icon={faUserSlash}
+                            size="xs"
+                            className="ml-1 text-mineshaft-300"
+                          />
+                        )}
                       </div>
                     </Tooltip>
-                    {!isOrgMembershipActive && (
-                      <Tooltip
-                        className="relative !z-[500]"
-                        content="This user has been deactivated and no longer has an active organization membership."
-                      >
-                        <FontAwesomeIcon
-                          icon={faUserSlash}
-                          size="xs"
-                          className="text-mineshaft-300"
-                        />
-                      </Tooltip>
-                    )}
                   </div>
 
                   <div>