fix: requested changes

This commit is contained in:
Daniel Hougaard
2025-08-25 17:26:41 +02:00
parent 991ee20ec7
commit 9a98192b9b
6 changed files with 77 additions and 105 deletions

View File

@@ -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}>
{member.user.username}{" "}
<span className="text-xs">
<Tooltip content="This user has been deactivated and no longer has an active organization membership.">
<div>
(Inactive){" "}
<FontAwesomeIcon size="xs" icon={faQuestionCircle} />
</div>
</Tooltip>
<div className="flex items-center" key={member.user.id}>
<span className="flex items-center opacity-40">
{member.user.username}
<span className="text-xs">
<Tooltip content="This user has been deactivated and no longer has an active organization membership.">
<div>
<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>
</div>
</Tooltip>
</span>
</span>
</span>
{index < approver.user.length - 1 && ","}
</div>
);
})}
</div>

View File

@@ -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) => {

View File

@@ -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}>
{getMemberLabel(u)}{" "}
<span className="text-xs">
<Tooltip content="This user has been deactivated and no longer has an active organization membership.">
<div>
(Inactive){" "}
<FontAwesomeIcon size="xs" icon={faQuestionCircle} />
</div>
</Tooltip>
<div className="flex items-center" key={u.id}>
<span className="flex items-center opacity-40">
{getMemberLabel(u)}
<span className="text-xs">
<Tooltip content="This user has been deactivated and no longer has an active organization membership.">
<div>
<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>
</div>
</Tooltip>
</span>
</span>
</span>
{index < el.users.length - 1 && ","}
</div>
);
})}
</div>

View File

@@ -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>
);
};

View File

@@ -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}>

View File

@@ -554,31 +554,27 @@ export const SecretApprovalRequestChanges = ({
>
<Tooltip
content={
requiredApprover.firstName
? `${requiredApprover.firstName || ""} ${requiredApprover.lastName || ""}`
: undefined
!isOrgMembershipActive
? "This user has been deactivated and no longer has an active organization membership."
: 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>