Integrate waitlist promotion modal and action

apps/site/src/app/admin/participants/components/ParticipantAction.tsx

@@ -1,33 +1,35 @@
 import { useContext } from "react";
 
 import Button from "@cloudscape-design/components/button";
-import Popover from "@cloudscape-design/components/popover";
 
-import { Decision, PostAcceptedStatus } from "@/lib/admin/useApplicant";
-import { Participant, Role } from "@/lib/admin/useParticipants";
 import UserContext from "@/lib/admin/UserContext";
+import { isCheckinLead } from "@/lib/admin/authorization";
+import { Decision, PostAcceptedStatus } from "@/lib/admin/useApplicant";
+import { Participant } from "@/lib/admin/useParticipants";
+import ParticipantActionPopover from "./ParticipantActionPopver";
 
 interface ParticipantActionProps {
 	participant: Participant;
 	initiateCheckIn: (participant: Participant) => void;
 	initiatePromotion: (participant: Participant) => void;
 }
+
 function ParticipantAction({
 	participant,
 	initiateCheckIn,
 	initiatePromotion,
 }: ParticipantActionProps) {
 	const { role } = useContext(UserContext);
 
-	const isNotCheckinLead = role !== Role.CheckInLead;
+	const isCheckin = isCheckinLead(role);
 	const isWaiverSigned = participant.status === PostAcceptedStatus.signed;
 
 	const promoteButton = (
 		<Button
 			variant="inline-link"
 			ariaLabel={`Promote ${participant._id} off waitlist`}
 			onClick={() => initiatePromotion(participant)}
-			disabled={isNotCheckinLead}
+			disabled={isCheckin}
 		>
 			Promote
 		</Button>
@@ -45,31 +47,19 @@ function ParticipantAction({
 	);
 
 	if (participant.status === Decision.waitlisted) {
-		if (isNotCheckinLead) {
+		if (isCheckin) {
 			return (
-				<Popover
-					dismissButton={false}
-					position="top"
-					size="medium"
-					triggerType="custom"
-					content="Only check-in leads are allowed to promote walk-ins."
-				>
+				<ParticipantActionPopover content="Only check-in leads are allowed to promote walk-ins.">
 					{promoteButton}
-				</Popover>
+				</ParticipantActionPopover>
 			);
 		}
 		return promoteButton;
 	} else if (isWaiverSigned) {
 		return (
-			<Popover
-				dismissButton={false}
-				position="top"
-				size="medium"
-				triggerType="custom"
-				content="Must confirm attendance in portal first"
-			>
+			<ParticipantActionPopover content="Must confirm attendance in portal first">
 				{checkinButton}
-			</Popover>
+			</ParticipantActionPopover>
 		);
 	}
 	return checkinButton;

apps/site/src/app/admin/participants/components/ParticipantActionPopver.tsx

@@ -0,0 +1,26 @@
+import Popover from "@cloudscape-design/components/popover";
+import { PropsWithChildren, ReactNode } from "react";
+
+interface ParticipantActionPopoverProps {
+	content: string;
+	children?: ReactNode;
+}
+
+function ParticipantActionPopover({
+	content,
+	children,
+}: PropsWithChildren<ParticipantActionPopoverProps>) {
+	return (
+		<Popover
+			dismissButton={false}
+			position="top"
+			size="medium"
+			triggerType="custom"
+			content={content}
+		>
+			{children}
+		</Popover>
+	);
+}
+
+export default ParticipantActionPopover;

apps/site/src/lib/admin/authorization.ts

@@ -1,4 +1,5 @@
 const ADMIN_ROLES = ["director", "reviewer", "checkin_lead"];
+const CHECKIN_ROLES = ["director", "checkin_lead"];
 const ORGANIZER_ROLES = ["organizer"];
 
 export function isApplicationManager(role: string | null) {
@@ -11,3 +12,7 @@ export function isAdminRole(role: string | null) {
 		(ADMIN_ROLES.includes(role) || ORGANIZER_ROLES.includes(role))
 	);
 }
+
+export function isCheckinLead(role: string | null) {
+	return role !== null && CHECKIN_ROLES.includes(role);
+}