diff --git a/src/apps/review/src/lib/assets/icons/icon-ai-review.svg b/src/apps/review/src/lib/assets/icons/icon-ai-review.svg new file mode 100644 index 000000000..0448ec082 --- /dev/null +++ b/src/apps/review/src/lib/assets/icons/icon-ai-review.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/apps/review/src/lib/assets/icons/icon-phase-appeal-response.svg b/src/apps/review/src/lib/assets/icons/icon-phase-appeal-response.svg new file mode 100644 index 000000000..edc7d9459 --- /dev/null +++ b/src/apps/review/src/lib/assets/icons/icon-phase-appeal-response.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/apps/review/src/lib/assets/icons/icon-phase-appeal.svg b/src/apps/review/src/lib/assets/icons/icon-phase-appeal.svg new file mode 100644 index 000000000..f28dd1bf8 --- /dev/null +++ b/src/apps/review/src/lib/assets/icons/icon-phase-appeal.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/apps/review/src/lib/assets/icons/icon-phase-registration.svg b/src/apps/review/src/lib/assets/icons/icon-phase-registration.svg new file mode 100644 index 000000000..7305b63dd --- /dev/null +++ b/src/apps/review/src/lib/assets/icons/icon-phase-registration.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/apps/review/src/lib/assets/icons/icon-phase-review.svg b/src/apps/review/src/lib/assets/icons/icon-phase-review.svg new file mode 100644 index 000000000..0e0f58507 --- /dev/null +++ b/src/apps/review/src/lib/assets/icons/icon-phase-review.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/apps/review/src/lib/assets/icons/icon-phase-submission.svg b/src/apps/review/src/lib/assets/icons/icon-phase-submission.svg new file mode 100644 index 000000000..4b96fe2b4 --- /dev/null +++ b/src/apps/review/src/lib/assets/icons/icon-phase-submission.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/apps/review/src/lib/assets/icons/icon-phase-winners.svg b/src/apps/review/src/lib/assets/icons/icon-phase-winners.svg new file mode 100644 index 000000000..146c041f6 --- /dev/null +++ b/src/apps/review/src/lib/assets/icons/icon-phase-winners.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/apps/review/src/lib/assets/icons/index.ts b/src/apps/review/src/lib/assets/icons/index.ts index 067315b11..7ec1bf70b 100644 --- a/src/apps/review/src/lib/assets/icons/index.ts +++ b/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, +} diff --git a/src/apps/review/src/lib/components/TableActiveReviews/TableActiveReviews.module.scss b/src/apps/review/src/lib/components/TableActiveReviews/TableActiveReviews.module.scss index 2798cf333..6679068ba 100644 --- a/src/apps/review/src/lib/components/TableActiveReviews/TableActiveReviews.module.scss +++ b/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; +} diff --git a/src/apps/review/src/lib/components/TableActiveReviews/TableActiveReviews.tsx b/src/apps/review/src/lib/components/TableActiveReviews/TableActiveReviews.tsx index ef4d1c63f..014430141 100644 --- a/src/apps/review/src/lib/components/TableActiveReviews/TableActiveReviews.tsx +++ b/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) => { isSortable: true, label: 'Phase', propertyName: 'currentPhase', - renderer: (data: ActiveReviewAssignment) => ( -
- {data.currentPhase} -
- ), + renderer: (data: ActiveReviewAssignment) => { + const Icon = data.hasAIReview ? IconAiReview : ( + phasesIcons[data.currentPhase.toLowerCase() as keyof typeof phasesIcons] + ) + + return ( +
+ {Icon && ( + + )} + {data.currentPhase} +
+ ) + }, type: 'element', }, { diff --git a/src/apps/review/src/lib/hooks/useFetchActiveReviews.ts b/src/apps/review/src/lib/hooks/useFetchActiveReviews.ts index b226180f2..e12ee1d3a 100644 --- a/src/apps/review/src/lib/hooks/useFetchActiveReviews.ts +++ b/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, diff --git a/src/apps/review/src/lib/models/ActiveReviewAssignment.model.ts b/src/apps/review/src/lib/models/ActiveReviewAssignment.model.ts index 2ba052480..0fd16bf73 100644 --- a/src/apps/review/src/lib/models/ActiveReviewAssignment.model.ts +++ b/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 diff --git a/src/apps/review/src/lib/models/BackendMyReviewAssignment.model.ts b/src/apps/review/src/lib/models/BackendMyReviewAssignment.model.ts index 4de66927c..7819ce591 100644 --- a/src/apps/review/src/lib/models/BackendMyReviewAssignment.model.ts +++ b/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 diff --git a/src/apps/review/src/pages/active-review-assignements/ActiveReviewsPage/ActiveReviewsPage.tsx b/src/apps/review/src/pages/active-review-assignements/ActiveReviewsPage/ActiveReviewsPage.tsx index 6e66e7d82..d8d099bfc 100644 --- a/src/apps/review/src/pages/active-review-assignements/ActiveReviewsPage/ActiveReviewsPage.tsx +++ b/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) => { + const { showBannerNotification, removeNotification }: NotificationContextType = useNotification() + const { loginUserInfo, }: ReviewAppContextModel = useContext(ReviewAppContext) @@ -193,6 +197,16 @@ export const ActiveReviewsPage: FC = (props: Props) => { }) }, [loadActiveReviews, sort]) + useEffect(() => { + const notification = showBannerNotification({ + icon: , + 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 ( svg path { + fill: $tc-white; + } } diff --git a/src/libs/ui/lib/components/notification/banner/NotificationBanner.tsx b/src/libs/ui/lib/components/notification/banner/NotificationBanner.tsx index 66900057a..98aa008fd 100644 --- a/src/libs/ui/lib/components/notification/banner/NotificationBanner.tsx +++ b/src/libs/ui/lib/components/notification/banner/NotificationBanner.tsx @@ -21,11 +21,11 @@ const NotificationBanner: FC = props => { return (
- {props.icon || ( -
+
+ {props.icon || ( -
- )} + )} +
{props.content}