Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | 97x 97x 6x 6x 6x 6x | import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
import { Clock, EllipsisVertical, XCircle, XIcon } from "lucide-react";
import { UserRole } from "shared-types/events/legacy-user";
import { isStateRole, newUserRoleMap } from "shared-utils";
import { RoleStatusTopBorderCard } from "@/components/Cards";
import { updatedRoleAccessStatus } from "@/utils";
import { RoleStatusProps } from ".";
import { ApproverInfo } from "./ApproverInfo";
export const CardStatus = ({ status }: { status: string }) => {
return (
<div className="flex items-center gap-2">
{status === "denied" && <XCircle className="text-red-500" />}
{status === "pending" && <Clock className="text-yellow-500" />}
<p className="italic">{updatedRoleAccessStatus[status]}</p>
</div>
);
};
export const RoleStatusCardNew = ({
role,
access,
onClick,
}: Omit<RoleStatusProps, "isNewUserRoleDisplay">) => {
Iif (!access) return null;
const isState = isStateRole(access.role as UserRole);
const hideApprovers = status !== "pending" && role === "norole";
const showApproverInfo =
access.role !== "defaultcmsuser" &&
access.role !== "cmsreviewer" &&
access.role !== "systemadmin";
return (
<RoleStatusTopBorderCard status={access.status}>
<div className="p-8 min-h-36">
<div className="flex justify-between">
<h3 className="text-xl font-bold">
{isState
? `${newUserRoleMap[access.role]} - ${access.territory}`
: newUserRoleMap[access.role]}
</h3>
{/* in OY2-35201 we can remove !isState*/}
{!isState && access.status === "pending" && (
<DropdownMenu.Root>
<DropdownMenu.DropdownMenuTrigger
aria-label="Role Status Options"
data-testid="role-status-actions"
asChild
>
<button
className="disabled:text-gray-200"
data-testid="self-revoke"
title="Self Revoke Access"
type="button"
>
<EllipsisVertical size={30} />
</button>
</DropdownMenu.DropdownMenuTrigger>
<DropdownMenu.Content
className="flex flex-col bg-white rounded-md shadow-lg p-4 border"
align="start"
>
<DropdownMenu.Item asChild>
<button className="text-primary" onClick={onClick} type="button">
Cancel Request
</button>
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>
)}
{role === "statesubmitter" && (
<button
className="text-blue-700 disabled:text-gray-200"
disabled={!onClick}
data-testid="self-revoke"
title="Self Revoke Access"
onClick={onClick}
type="button"
>
<XIcon size={30} />
</button>
)}
</div>
<CardStatus status={access.status} />
{access.role === "systemadmin" && (
<div className="block lg:mt-8 lg:mb-2">
<strong>Approvers</strong>
<br />
<span>Pre-assigned</span>
</div>
)}
{(access.role === "defaultcmsuser" || access.role === "cmsreviewer") && (
<div className="block lg:mt-8 lg:mb-2">
<strong>Approvers</strong>
<br />
<i>Automatically approved by the system</i>
</div>
)}
{showApproverInfo && (
<div className="block lg:mt-8 lg:mb-2">
<p className="mb-2">{!hideApprovers && <strong>Approvers</strong>}</p>
<ApproverInfo access={access} />
</div>
)}
</div>
</RoleStatusTopBorderCard>
);
};
|