Contest Tile: Add support for Rolling Triage

src/lib/ContestStatus/ContestStatus.types.ts

@@ -12,3 +12,21 @@ export interface ContestStatusProps {
   /** HTML element identifier */
   id?: string;
 }
+
+export const AuditStatus = {
+  Booking: "Booking",
+  PreAudit: "Pre-Audit",
+  Active: "Active",
+  /** Paused: The audit is in between Rolling Triage cohorts */
+  Paused: "Paused",
+  Review: "Review",
+  Judging: "Judging",
+  PJQA: "Post-Judging QA",
+  JudgingComplete: "Judging Complete",
+  Awarding: "Awarding",
+  Reporting: "Reporting",
+  Completed: "Completed",
+  LostDeal: "Lost Deal",
+} as const;
+// Take the AuditStatus object, and make a string literal type of the values
+export type AuditStatus = (typeof AuditStatus)[keyof typeof AuditStatus];

src/lib/ContestTile/CompactTemplate.tsx

@@ -3,8 +3,8 @@ import clsx from "clsx";
 import { BountyTileData, ContestSchedule, ContestTileData, ContestTileProps, ContestTileVariant } from "./ContestTile.types";
 import { Status, TagSize, TagVariant } from '../types';
 import { ContestStatus } from '../ContestStatus';
-import { Countdown } from './ContestTile';
-import { getDates } from '../../utils/time';
+import { ContestCountdown } from './ContestTile';
+import { getContestSchedule } from '../../utils/time';
 import { Tag } from '../Tag';
 import { Icon } from '../Icon';
 import wolfbotIcon from "../../../public/icons/wolfbot.svg";
@@ -28,7 +28,7 @@ export default function CompactTemplate({
       c4contesttile: true,
       compact: true
     });
-      
+
     return <div className={clsx("c4tilewrapper", variantClasses)}>
       <div id={htmlId ?? undefined} className={clsx(variantClasses, tileClasses)}>
         <div className="container--inner compact-content">
@@ -82,15 +82,15 @@ const IsContest = ({title, isDarkTile = true, contestData, sponsorUrl, sponsorIm
       }
 
       if (startDate && endDate) {
-        const newTimelineObject = getDates(contestData.startDate, contestData.endDate);
+        const newTimelineObject = getContestSchedule(contestData);
         setContestTimelineObject(newTimelineObject);
       }
     }
   }, [contestData]);
 
   useEffect(() => {
     if (contestData && startDate && endDate) {
-      const newTimelineObject = getDates(startDate, endDate);
+      const newTimelineObject = getContestSchedule(contestData);
       setContestTimelineObject(newTimelineObject);
     }
   }, [contestData])
@@ -104,14 +104,12 @@ const IsContest = ({title, isDarkTile = true, contestData, sponsorUrl, sponsorIm
               status={contestTimelineObject.contestStatus} />
             {contestTimelineObject.contestStatus !== Status.ENDED && (
               <div className="timer">
-                <Countdown
-                  start={startDate}
-                  end={endDate}
+                <ContestCountdown
+                  schedule={contestTimelineObject}
                   updateContestStatus={updateContestTileStatus}
-                  text={contestTimelineObject.contestStatus === Status.UPCOMING ? 'Starts in ' : 'Ends in '}
                 />
               </div>
-            )}  
+            )}
           </span>}
           <p className="type">
             {contestType === "Audit + mitigation review"
@@ -208,7 +206,7 @@ const IsBounty = ({title, isDarkTile = true, bountyData, sponsorUrl, sponsorImag
         break;
     }
   }
-  
+
   return (
     <div className="body--bounty">
       <header>

src/lib/ContestTile/ContestTile.stories.tsx

@@ -1,7 +1,9 @@
 import React, { Fragment } from "react";
+import { addDays, subDays } from "date-fns";
 import { ContestTile } from "./ContestTile";
 import { Meta, StoryObj } from "@storybook/react";
 import { CodingLanguage, ContestEcosystem, ContestTileVariant } from "./ContestTile.types";
+import { AuditStatus } from "../types";
 
 const meta: Meta<typeof ContestTile> = {
   component: ContestTile,
@@ -36,6 +38,7 @@ const defaultArgs = {
   htmlId: "",
   contestData: {
     codeAccess: "public",
+    cohorts: [],
     contestType: "Open Audit",
     isUserCertified: false,
     contestId: 321,
@@ -75,6 +78,25 @@ export const ContestTileUpcoming: Story = (args) => {
   </Fragment>
 };
 
+export const ContestTileUpcomingRollingTriage: Story = (args) => {
+  const isDark = args.variant === ContestTileVariant.DARK || args.variant === ContestTileVariant.COMPACT_DARK;
+
+  return <Fragment>
+    <ContestTile
+      {...args}
+      variant={isDark ? ContestTileVariant.DARK : ContestTileVariant.LIGHT}
+      startDate={new Date(args.contestData.startDate).toISOString()}
+      endDate={new Date(args.contestData.endDate).toISOString()}
+    />
+    <ContestTile
+      {...args}
+      variant={isDark ? ContestTileVariant.COMPACT_DARK : ContestTileVariant.COMPACT_LIGHT }
+      startDate={new Date(args.contestData.startDate).toISOString()}
+      endDate={new Date(args.contestData.endDate).toISOString()}
+    />
+  </Fragment>
+};
+
 export const ContestTileLive: Story = (args) => {
   const isDark = args.variant === ContestTileVariant.DARK || args.variant === ContestTileVariant.COMPACT_DARK;
 
@@ -94,6 +116,61 @@ export const ContestTileLive: Story = (args) => {
   </Fragment>
 };
 
+export const ContestTileLiveCohort1: Story = (args) => {
+  const isDark = args.variant === ContestTileVariant.DARK || args.variant === ContestTileVariant.COMPACT_DARK;
+
+  return <Fragment>
+    <ContestTile
+      {...args}
+      variant={isDark ? ContestTileVariant.DARK : ContestTileVariant.LIGHT}
+      startDate={new Date(args.contestData.startDate).toISOString()}
+      endDate={new Date(args.contestData.endDate).toISOString()}
+    />
+    <ContestTile
+      {...args}
+      variant={isDark ? ContestTileVariant.COMPACT_DARK : ContestTileVariant.COMPACT_LIGHT }
+      startDate={new Date(args.contestData.startDate).toISOString()}
+      endDate={new Date(args.contestData.endDate).toISOString()}
+    />
+  </Fragment>
+};
+export const ContestTileLivePreCohort2: Story = (args) => {
+  const isDark = args.variant === ContestTileVariant.DARK || args.variant === ContestTileVariant.COMPACT_DARK;
+
+  return <Fragment>
+    <ContestTile
+      {...args}
+      variant={isDark ? ContestTileVariant.DARK : ContestTileVariant.LIGHT}
+      startDate={new Date(args.contestData.startDate).toISOString()}
+      endDate={new Date(args.contestData.endDate).toISOString()}
+    />
+    <ContestTile
+      {...args}
+      variant={isDark ? ContestTileVariant.COMPACT_DARK : ContestTileVariant.COMPACT_LIGHT }
+      startDate={new Date(args.contestData.startDate).toISOString()}
+      endDate={new Date(args.contestData.endDate).toISOString()}
+    />
+  </Fragment>
+};
+export const ContestTileLiveAwaitingCohort3: Story = (args) => {
+  const isDark = args.variant === ContestTileVariant.DARK || args.variant === ContestTileVariant.COMPACT_DARK;
+
+  return <Fragment>
+    <ContestTile
+      {...args}
+      variant={isDark ? ContestTileVariant.DARK : ContestTileVariant.LIGHT}
+      startDate={new Date(args.contestData.startDate).toISOString()}
+      endDate={new Date(args.contestData.endDate).toISOString()}
+    />
+    <ContestTile
+      {...args}
+      variant={isDark ? ContestTileVariant.COMPACT_DARK : ContestTileVariant.COMPACT_LIGHT }
+      startDate={new Date(args.contestData.startDate).toISOString()}
+      endDate={new Date(args.contestData.endDate).toISOString()}
+    />
+  </Fragment>
+};
+
 export const ContestTileEnded: Story = (args) => {
   const isDark = args.variant === ContestTileVariant.DARK || args.variant === ContestTileVariant.COMPACT_DARK;
 
@@ -127,7 +204,11 @@ export const BountyTile: Story = (args) => {
 }
 
 ContestTileUpcoming.parameters = parameters;
+ContestTileUpcomingRollingTriage.parameters = parameters;
 ContestTileLive.parameters = parameters;
+ContestTileLiveCohort1.parameters = parameters;
+ContestTileLivePreCohort2.parameters = parameters;
+ContestTileLiveAwaitingCohort3.parameters = parameters;
 ContestTileEnded.parameters = parameters;
 BountyTile.parameters = parameters;
 
@@ -136,16 +217,107 @@ ContestTileUpcoming.args = {
   contestData: {
     ...defaultArgs.contestData,
     startDate: "2030-07-12T18:00:00Z",
-    endDate: "2030-07-21T18:00:00.000Z"
+    endDate: "2030-07-21T18:00:00.000Z",
+    status: AuditStatus.PreAudit,
+  }
+};
+ContestTileUpcomingRollingTriage.args = {
+  ...defaultArgs,
+  contestData: {
+    ...defaultArgs.contestData,
+    cohorts: [{
+      name: "cohort-1",
+      pauseTime: addDays(Date.now(), 6).toISOString(),
+      resumeTime: null
+    }, {
+      name: "cohort-2",
+      pauseTime: addDays(Date.now(), 13).toISOString(),
+      resumeTime: addDays(Date.now(), 9).toISOString(),
+    }, {
+      name: "cohort-3",
+      pauseTime: null,
+      resumeTime: addDays(Date.now(), 16).toISOString(),
+    }],
+    startDate: addDays(Date.now(), 3).toISOString(),
+    endDate: addDays(Date.now(), 20).toISOString(),
+    status: AuditStatus.PreAudit,
   }
 };
 
+
 ContestTileLive.args = {
   ...defaultArgs,
   contestData: {
     ...defaultArgs.contestData,
     startDate: "2023-07-12T18:00:00Z",
-    endDate: "2030-07-21T18:00:00.000Z"
+    endDate: "2030-07-21T18:00:00.000Z",
+    status: AuditStatus.Active,
+  }
+};
+ContestTileLiveCohort1.args = {
+  ...defaultArgs,
+  contestData: {
+    ...defaultArgs.contestData,
+    cohorts: [{
+      name: "cohort-1",
+      pauseTime: addDays(Date.now(), 4).toISOString(),
+      resumeTime: null
+    }, {
+      name: "cohort-2",
+      pauseTime: addDays(Date.now(), 11).toISOString(),
+      resumeTime: addDays(Date.now(), 7).toISOString(),
+    }, {
+      name: "cohort-3",
+      pauseTime: null,
+      resumeTime: addDays(Date.now(), 14).toISOString(),
+    }],
+    startDate: subDays(Date.now(), 1).toISOString(),
+    endDate: addDays(Date.now(), 18).toISOString(),
+    status: AuditStatus.Active,
+  }
+};
+ContestTileLivePreCohort2.args = {
+  ...defaultArgs,
+  contestData: {
+    ...defaultArgs.contestData,
+    cohorts: [{
+      name: "cohort-1",
+      pauseTime: subDays(Date.now(), 1).toISOString(),
+      resumeTime: null
+    }, {
+      name: "cohort-2",
+      pauseTime: addDays(Date.now(), 6).toISOString(),
+      resumeTime: addDays(Date.now(), 2).toISOString(),
+    }, {
+      name: "cohort-3",
+      pauseTime: null,
+      resumeTime: addDays(Date.now(), 9).toISOString(),
+    }],
+    startDate: subDays(Date.now(), 6).toISOString(),
+    endDate: addDays(Date.now(), 16).toISOString(),
+    status: AuditStatus.Paused,
+  }
+};
+ContestTileLiveAwaitingCohort3.args = {
+  ...defaultArgs,
+  contestData: {
+    ...defaultArgs.contestData,
+    cohorts: [{
+      name: "cohort-1",
+      pauseTime: subDays(Date.now(), 11).toISOString(),
+      resumeTime: null
+    }, {
+      name: "cohort-2",
+      pauseTime: subDays(Date.now(), 4).toISOString(),
+      resumeTime: subDays(Date.now(), 8).toISOString(),
+    }, {
+      name: "cohort-3",
+      pauseTime: null,
+      resumeTime: subDays(Date.now(), 1).toISOString(),
+    }],
+    startDate: subDays(Date.now(), 16).toISOString(),
+    endDate: addDays(Date.now(), 6).toISOString(),
+    status: AuditStatus.Paused,
   }
 };
 
@@ -154,7 +326,8 @@ ContestTileEnded.args = {
   contestData: {
     ...defaultArgs.contestData,
     startDate: "2023-07-12T18:00:00Z",
-    endDate: "2023-07-21T18:00:00Z"
+    endDate: "2023-07-21T18:00:00Z",
+    status: AuditStatus.Review,
   }
 };