PM-1904 active challenges page

src/apps/review/src/lib/assets/icons/index.ts

@@ -2,6 +2,13 @@ import { ReactComponent as IconArrowLeft } from './arrow-left.svg'
 import { ReactComponent as IconExternalLink } from './external-link.svg'
 import { ReactComponent as IconChevronDown } from './selector.svg'
 import { ReactComponent as IconError } from './icon-error.svg'
+import { ReactComponent as IconAiReview } from './icon-ai-review.svg'
+import { ReactComponent as IconSubmission } from './icon-phase-submission.svg'
+import { ReactComponent as IconRegistration } from './icon-phase-registration.svg'
+import { ReactComponent as IconReview } from './icon-phase-review.svg'
+import { ReactComponent as IconAppeal } from './icon-phase-appeal.svg'
+import { ReactComponent as IconAppealResponse } from './icon-phase-appeal-response.svg'
+import { ReactComponent as IconPhaseWinners } from './icon-phase-winners.svg'
 
 export * from './editor/bold'
 export * from './editor/code'
@@ -19,4 +26,24 @@ export * from './editor/table'
 export * from './editor/unordered-list'
 export * from './editor/upload-file'
 
-export { IconArrowLeft, IconExternalLink, IconChevronDown, IconError }
+export {
+    IconArrowLeft,
+    IconExternalLink,
+    IconChevronDown,
+    IconError,
+    IconAiReview,
+    IconSubmission,
+    IconReview,
+    IconAppeal,
+    IconAppealResponse,
+    IconPhaseWinners,
+}
+
+export const phasesIcons = {
+    appeal: IconAppeal,
+    appealResponse: IconAppealResponse,
+    'iterative review': IconReview,
+    registration: IconRegistration,
+    review: IconReview,
+    submission: IconSubmission,
+}

src/apps/review/src/lib/components/TableActiveReviews/TableActiveReviews.module.scss

@@ -79,3 +79,7 @@
     background-color: $red-25;
     color: $red-140;
 }
+
+.mr2 {
+    margin-right: $sp-2;
+}

src/apps/review/src/lib/components/TableActiveReviews/TableActiveReviews.tsx

@@ -17,6 +17,7 @@ import {
 } from '../../models'
 import { TableWrapper } from '../TableWrapper'
 import { ProgressBar } from '../ProgressBar'
+import { IconAiReview, phasesIcons } from '../../assets/icons'
 
 import styles from './TableActiveReviews.module.scss'
 
@@ -253,11 +254,20 @@ export const TableActiveReviews: FC<Props> = (props: Props) => {
                         isSortable: true,
                         label: 'Phase',
                         propertyName: 'currentPhase',
-                        renderer: (data: ActiveReviewAssignment) => (
-                            <div className={styles.phase}>
-                                {data.currentPhase}
-                            </div>
-                        ),
+                        renderer: (data: ActiveReviewAssignment) => {
+                            const Icon = data.hasAIReview ? IconAiReview : (
+                                phasesIcons[data.currentPhase.toLowerCase() as keyof typeof phasesIcons]
+                            )
+
+                            return (
+                                <div className={styles.phase}>
+                                    {Icon && (
+                                        <Icon className={styles.mr2} />
+                                    )}
+                                    {data.currentPhase}
+                                </div>
+                            )
+                        },
                         type: 'element',
                     },
                     {

src/apps/review/src/lib/hooks/useFetchActiveReviews.ts

@@ -141,6 +141,7 @@ export const transformAssignments = (
                     .local()
                     .format(TABLE_DATE_FORMAT)
                 : undefined,
+            hasAIReview: base.hasAIReview,
             id: base.challengeId,
             index: currentIndex,
             name: base.challengeName,

src/apps/review/src/lib/models/ActiveReviewAssignment.model.ts

@@ -9,6 +9,7 @@ export interface ActiveReviewAssignment {
     currentPhaseEndDateString?: string
     challengeEndDate?: string | Date | null
     challengeEndDateString?: string
+    hasAIReview: boolean;
     timeLeft?: string
     timeLeftColor?: string
     timeLeftStatus?: string

src/apps/review/src/lib/models/BackendMyReviewAssignment.model.ts

@@ -20,6 +20,7 @@ export interface BackendMyReviewAssignment {
     challengeEndDate: string | null
     currentPhaseName: string
     currentPhaseEndDate: string | null
+    hasAIReview: boolean;
     timeLeftInCurrentPhase: number | null
     resourceRoleName: string
     reviewProgress: number | null

src/apps/review/src/pages/active-review-assignements/ActiveReviewsPage/ActiveReviewsPage.tsx

@@ -17,6 +17,7 @@ import classNames from 'classnames'
 import { Pagination, TableLoading } from '~/apps/admin/src/lib'
 import { Sort } from '~/apps/admin/src/platform/gamification-admin/src/game-lib'
 import { Button, IconOutline, InputText } from '~/libs/ui'
+import { NotificationContextType, useNotification } from '~/libs/shared'
 
 import { CHALLENGE_TYPE_SELECT_ALL_OPTION } from '../../../config/index.config'
 import {
@@ -37,6 +38,7 @@ import {
 import { ReviewAppContextModel } from '../../../lib/models'
 import { SelectOption } from '../../../lib/models/SelectOption.model'
 import { getAllowedTypeAbbreviationsByTrack } from '../../../lib/utils/challengeTypesByTrack'
+import { IconAiReview } from '../../../lib/assets/icons'
 
 import styles from './ActiveReviewsPage.module.scss'
 
@@ -50,6 +52,8 @@ const DEFAULT_SORT: Sort = {
 }
 
 export const ActiveReviewsPage: FC<Props> = (props: Props) => {
+    const { showBannerNotification, removeNotification }: NotificationContextType = useNotification()
+
     const {
         loginUserInfo,
     }: ReviewAppContextModel = useContext(ReviewAppContext)
@@ -193,6 +197,16 @@ export const ActiveReviewsPage: FC<Props> = (props: Props) => {
         })
     }, [loadActiveReviews, sort])
 
+    useEffect(() => {
+        const notification = showBannerNotification({
+            icon: <IconAiReview />,
+            id: 'ai-review-icon-notification',
+            message: `Challenges with this icon indicate that
+                one or more AI reviews will be conducted for each member submission.`,
+        })
+        return () => notification && removeNotification(notification.id)
+    }, [showBannerNotification, removeNotification])
+
     return (
         <PageWrapper
             pageTitle='My Active Challenges'

src/libs/ui/lib/components/notification/banner/NotificationBanner.module.scss

@@ -35,4 +35,7 @@
 .icon {
     flex: 0 0;
     margin-right: $sp-2;
+    > svg path {
+        fill: $tc-white;
+    }
 }

src/libs/ui/lib/components/notification/banner/NotificationBanner.tsx

@@ -21,11 +21,11 @@ const NotificationBanner: FC<NotificationBannerProps> = props => {
     return (
         <div className={styles.wrap}>
             <div className={styles.inner}>
-                {props.icon || (
-                    <div className={styles.icon}>
+                <div className={styles.icon}>
+                    {props.icon || (
                         <InformationCircleIcon className='icon-xl' />
-                    </div>
-                )}
+                    )}
+                </div>
 
                 {props.content}