PM-1905 - ai reviews

Author: vas3a

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

@@ -0,0 +1,63 @@
+@import '@libs/ui/styles/includes';
+
+.wrap {
+    font-family: "Nunito Sans", sans-serif;
+    max-width: 100%;
+    overflow: hidden;
+}
+
+.reviewsTable {
+    width: 100%;
+    border-collapse: collapse;
+
+    th {
+        border-top: 1px solid #A8A8A8;
+        font-weight: bold;
+        background: #E0E4E8;
+    }
+
+    th, td {
+        text-align: left;
+        font-size: 14px;
+        padding: $sp-2 $sp-4;
+        border-bottom: 1px solid #A8A8A8;
+    }
+
+    .scoreCol {
+        text-align: right;
+
+        color: #0D61BF;
+    }
+}
+
+.aiReviewer {
+    display: flex;
+    align-items: center;
+    gap: $sp-2;
+
+    .icon {
+        display: flex;
+        align-items: center;
+        flex: 0 0;
+    }
+
+    .workflowName {
+        max-width: 200px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+}
+
+.result {
+    display: flex;
+    align-items: center;
+    gap: $sp-2;
+
+    :global(.icon) {
+        color: #C1294F;
+        &:global(.passed) {
+            color: $teal-160;
+        }
+    }
+}

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

@@ -0,0 +1,87 @@
+import { FC, useMemo } from 'react'
+import moment from 'moment'
+
+import { CheckIcon, MinusCircleIcon } from '@heroicons/react/outline'
+
+import { AiWorkflowRunsResponse, useFetchAiWorkflowsRuns } from '../../hooks'
+import { IconAiReview } from '../../assets/icons'
+import { TABLE_DATE_FORMAT } from '../../../config/index.config'
+
+import styles from './AiReviewsTable.module.scss'
+
+interface AiReviewsTableProps {
+    submissionId: string
+    reviewers: { aiWorkflowId: string }[]
+}
+
+const AiReviewsTable: FC<AiReviewsTableProps> = props => {
+    const aiWorkflowIds = useMemo(() => props.reviewers.map(r => r.aiWorkflowId), [props.reviewers])
+    const { runs, isLoading }: AiWorkflowRunsResponse = useFetchAiWorkflowsRuns(props.submissionId, aiWorkflowIds)
+
+    return (
+        <div className={styles.wrap}>
+            <table className={styles.reviewsTable}>
+                <tr>
+                    <th>AI Reviewer</th>
+                    <th>Review Date</th>
+                    <th>Score</th>
+                    <th>Result</th>
+                </tr>
+
+                {!runs.length && isLoading && (
+                    <tr>
+                        <td colSpan={4}>Loading...</td>
+                    </tr>
+                )}
+
+                {runs.map(run => (
+                    <tr key={run.id}>
+                        <td>
+                            <div className={styles.aiReviewer}>
+                                <span className={styles.icon}>
+                                    <IconAiReview />
+                                </span>
+                                <span className={styles.workflowName} title={run.workflow.name}>
+                                    {run.workflow.name}
+                                </span>
+                            </div>
+                        </td>
+                        <td>
+                            {run.status === 'SUCCESS' && (
+                                moment(run.completedAt)
+                                    .local()
+                                    .format(TABLE_DATE_FORMAT)
+                            )}
+                        </td>
+                        <td className={styles.scoreCol}>
+                            {run.status === 'SUCCESS' && run.score}
+                        </td>
+                        <td className={styles.resultCol}>
+                            {run.status === 'SUCCESS' && (
+                                <div className={styles.result}>
+                                    {run.score >= run.workflow.scorecard.minimumPassingScore
+                                        ? (
+                                            <>
+                                                <CheckIcon className='icon icon-xl passed' />
+                                                {' '}
+                                                Passed
+                                            </>
+                                        )
+                                        : (
+                                            <>
+                                                <MinusCircleIcon className='icon icon-xl' />
+                                                {' '}
+                                                Passed
+                                            </>
+                                        )}
+                                </div>
+                            )}
+                        </td>
+                    </tr>
+                ))}
+            </table>
+        </div>
+    )
+}
+
+export default AiReviewsTable

src/apps/review/src/lib/components/AiReviewsTable/index.ts

@@ -0,0 +1 @@
+export { default as AiReviewsTable } from './AiReviewsTable'

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

@@ -126,6 +126,7 @@ interface SubmissionTabParams {
     isDownloadingSubmission: useDownloadSubmissionProps['isLoading']
     downloadSubmission: useDownloadSubmissionProps['downloadSubmission']
     isActiveChallenge: boolean
+    aiReviewers: { aiWorkflowId: string }[]
 }
 
 const renderSubmissionTab = ({
@@ -137,6 +138,7 @@ const renderSubmissionTab = ({
     isDownloadingSubmission,
     downloadSubmission,
     isActiveChallenge,
+    aiReviewers,
 }: SubmissionTabParams): JSX.Element => {
     const isSubmissionTab = selectedTabNormalized === 'submission'
     const isTopgearSubmissionTab = selectedTabNormalized === 'topgearsubmission'
@@ -155,6 +157,7 @@ const renderSubmissionTab = ({
     if (canShowSubmissionList) {
         return (
             <TabContentSubmissions
+                aiReviewers={aiReviewers}
                 submissions={visibleSubmissions}
                 isLoading={isLoadingSubmission}
                 isDownloading={isDownloadingSubmission}
@@ -335,6 +338,9 @@ export const ChallengeDetailsContent: FC<Props> = (props: Props) => {
 
         if (SUBMISSION_TAB_KEYS.has(selectedTabNormalized)) {
             return renderSubmissionTab({
+                aiReviewers: (
+                    challengeInfo?.reviewers?.filter(r => !!r.aiWorkflowId) as { aiWorkflowId: string }[]
+                ) ?? [],
                 downloadSubmission,
                 isActiveChallenge: props.isActiveChallenge,
                 isDownloadingSubmission,

src/apps/review/src/lib/components/ChallengeDetailsContent/TabContentSubmissions.tsx

@@ -41,10 +41,12 @@ import {
 } from '../../utils'
 import type { SubmissionHistoryPartition } from '../../utils'
 import { TABLE_DATE_FORMAT } from '../../../config/index.config'
+import { CollapsibleAiReviewsRow } from '../CollapsibleAiReviewsRow'
 
 import styles from './TabContentSubmissions.module.scss'
 
 interface Props {
+    aiReviewers?: { aiWorkflowId: string }[]
     submissions: BackendSubmission[]
     isLoading: boolean
     isDownloading: IsRemovingType
@@ -340,6 +342,17 @@ export const TabContentSubmissions: FC<Props> = props => {
                     },
                     type: 'element',
                 },
+                ...(!props.aiReviewers?.length ? [] : [{
+                    label: 'Reviewer',
+                    propertyName: 'submittedDate',
+                    renderer: (submission: BackendSubmission) => (
+                        <CollapsibleAiReviewsRow
+                            aiReviewers={props.aiReviewers!}
+                            submissionId={submission.id}
+                        />
+                    ),
+                    type: 'element',
+                } as TableColumn<BackendSubmission>]),
             ]
 
             if (shouldShowHistoryActions) {
@@ -442,6 +455,7 @@ export const TabContentSubmissions: FC<Props> = props => {
                 isDownloading={props.isDownloading}
                 getRestriction={getHistoryRestriction}
                 getSubmissionMeta={resolveSubmissionMeta}
+                aiReviewers={props.aiReviewers}
             />
         </TableWrapper>
     )

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

@@ -0,0 +1,21 @@
+@import '@libs/ui/styles/includes';
+
+.wrap {
+    width: 100%;
+    text-align: left;
+}
+
+.reviewersDropown {
+    display: flex;
+    align-items: center;
+    gap: $sp-2;
+
+    svg {
+        color: #767676;
+    }
+}
+
+.table {
+    margin-top: $sp-2;
+    margin-left: -1 * $sp-4;
+}

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

@@ -0,0 +1,44 @@
+import { FC, useCallback, useState } from 'react'
+
+import { IconOutline } from '~/libs/ui'
+
+import { AiReviewsTable } from '../AiReviewsTable'
+
+import styles from './CollapsibleAiReviewsRow.module.scss'
+
+interface CollapsibleAiReviewsRowProps {
+    aiReviewers: { aiWorkflowId: string }[]
+    submissionId: string
+}
+
+const CollapsibleAiReviewsRow: FC<CollapsibleAiReviewsRowProps> = props => {
+    const aiReviewersCount = props.aiReviewers.length
+
+    const [isOpen, setIsOpen] = useState(false)
+
+    const toggleOpen = useCallback(() => {
+        setIsOpen(wasOpen => !wasOpen)
+    }, [])
+
+    return (
+        <div className={styles.wrap}>
+            <span className={styles.reviewersDropown} onClick={toggleOpen}>
+                {aiReviewersCount}
+                {' '}
+                AI Reviewer
+                {aiReviewersCount === 1 ? '' : 's'}
+                <IconOutline.ChevronDownIcon className='icon-xl' />
+            </span>
+            {isOpen && (
+                <div className={styles.table}>
+                    <AiReviewsTable
+                        reviewers={props.aiReviewers}
+                        submissionId={props.submissionId}
+                    />
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default CollapsibleAiReviewsRow

src/apps/review/src/lib/components/CollapsibleAiReviewsRow/index.ts

@@ -0,0 +1 @@
+export { default as CollapsibleAiReviewsRow } from './CollapsibleAiReviewsRow'

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

@@ -146,3 +146,21 @@
   font-size: 14px;
   text-align: center;
 }
+
+.reviewersDropown {
+    display: flex;
+    align-items: center;
+    gap: $sp-2;
+
+    svg {
+        color: #767676;
+    }
+}
+
+.table .aiReviewersTableRow.aiReviewersTableRow {
+    padding: 0;
+}
+
+.aiReviewersTable {
+    margin-top: -1px;
+}