Merge pull request #1312 from topcoder-platform/qa-ai-workflows

Various QA issues re AI workflows

Author: vas3a

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

@@ -14,6 +14,7 @@ import { ReactComponent as IconClock } from './icon-clock.svg'
 import { ReactComponent as IconPremium } from './icon-premium.svg'
 import { ReactComponent as IconComment } from './icon-comment.svg'
 import { ReactComponent as IconEdit } from './icon-edit.svg'
+import { ReactComponent as IconFile } from './icon-file.svg'
 
 export * from './editor/bold'
 export * from './editor/code'
@@ -47,6 +48,7 @@ export {
     IconPremium,
     IconComment,
     IconEdit,
+    IconFile,
 }
 
 export const phasesIcons = {

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

@@ -10,10 +10,11 @@
     width: 100%;
     border-collapse: collapse;
 
-    th {
+
+    &.reviewsTable thead tr th {
         border-top: 1px solid #A8A8A8;
         font-weight: bold;
-        background: #E0E4E8;
+        background: none;
     }
 
     th, td {
@@ -60,7 +61,8 @@
     padding-left: $sp-4;
     padding-right: $sp-4;
     > * {
-        flex: 1 1 50%;
+        flex: 0 0 50%;
+        white-space: normal;
     }
 }
 .label {

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

@@ -46,6 +46,9 @@ const AiReviewsTable: FC<AiReviewsTableProps> = props => {
             workflow: {
                 description: '',
                 name: 'Virus Scan',
+                scorecard: {
+                    minimumPassingScore: 1,
+                },
             },
         } as AiWorkflowRun,
     ], [runs, props.submission])
@@ -112,7 +115,7 @@ const AiReviewsTable: FC<AiReviewsTableProps> = props => {
                     <tr>
                         <th>AI Reviewer</th>
                         <th>Review Date</th>
-                        <th>Score</th>
+                        <th className={styles.scoreCol}>Score</th>
                         <th>Result</th>
                     </tr>
                 </thead>
@@ -147,7 +150,7 @@ const AiReviewsTable: FC<AiReviewsTableProps> = props => {
                             </td>
                             <td className={styles.scoreCol}>
                                 {run.status === 'SUCCESS' ? (
-                                    run.workflow.scorecard ? (
+                                    run.workflow.id ? (
                                         <a
                                             href={`./reviews/${props.submission.id}?workflowId=${run.workflow.id}`}
                                         >

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

@@ -73,7 +73,9 @@ export const AiWorkflowRunStatus: FC<AiWorkflowRunStatusProps> = props => {
             {status === 'failed' && (
                 <StatusLabel
                     icon={<IconOutline.XCircleIcon className='icon-xl' />}
+                    hideLabel={props.hideLabel}
                     status={status}
+                    label='Failure'
                     score={score}
                 />
             )}

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardViewer.tsx

@@ -184,7 +184,7 @@ const ScorecardViewerContent: FC<ScorecardViewerProps> = props => {
                 </div>
             )}
 
-            {totalScore && !!props.aiFeedback && (
+            {!!totalScore && !!props.aiFeedback && (
                 <div className={styles.conclusion}>
                     <strong>Conclusion</strong>
                     <p>

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

@@ -7,8 +7,6 @@ import { handleError } from '~/libs/shared/lib/utils/handle-error'
 
 import { AiFeedbackItem, Scorecard } from '../models'
 
-import { useRolePermissions, UseRolePermissionsResult } from './useRolePermissions'
-
 export enum AiWorkflowRunStatusEnum {
     INIT = 'INIT',
     QUEUED = 'QUEUED',
@@ -42,6 +40,8 @@ export interface AiWorkflowRun {
     startedAt: string;
     completedAt: string;
     status: AiWorkflowRunStatusEnum;
+    gitRunId?: string;
+    gitRunUrl?: string;
     score: number;
     workflow: AiWorkflow
 }
@@ -76,7 +76,6 @@ export function useFetchAiWorkflowsRuns(
     submissionId: string,
     workflowIds: string[],
 ): AiWorkflowRunsResponse {
-    const { isAdmin }: UseRolePermissionsResult = useRolePermissions()
     // Use swr hooks for challenge info fetching
     const {
         data: runs = [],
@@ -106,7 +105,7 @@ export function useFetchAiWorkflowsRuns(
 
     return {
         isLoading,
-        runs: runs.filter(r => isAdmin || !aiRunFailed(r)),
+        runs,
     }
 }
 

src/apps/review/src/pages/reviews/ReviewsViewer/ReviewsViewer.tsx

@@ -1,9 +1,6 @@
-import { FC, useEffect, useMemo } from 'react'
+import { FC, useMemo } from 'react'
 import { useLocation } from 'react-router-dom'
 
-import { NotificationContextType, useNotification } from '~/libs/shared'
-
-import { IconAiReview } from '../../../lib/assets/icons'
 import { PageWrapper } from '../../../lib'
 import { BreadCrumbData, ReviewsContextModel } from '../../../lib/models'
 import { ReviewsSidebar } from '../components/ReviewsSidebar'
@@ -15,7 +12,6 @@ import { ReviewViewer } from '../components/ReviewViewer'
 import styles from './ReviewsViewer.module.scss'
 
 const ReviewsViewer: FC = () => {
-    const { showBannerNotification, removeNotification }: NotificationContextType = useNotification()
     const { challengeInfo, submissionId, workflowRun }: ReviewsContextModel = useReviewsContext()
 
     const location = useLocation()
@@ -41,16 +37,6 @@ const ReviewsViewer: FC = () => {
         },
     ], [challengeInfo?.name, challengeInfo?.id, submissionId, containsPastChallenges])
 
-    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={challengeInfo?.name ?? ''}

src/apps/review/src/pages/reviews/components/AiReviewViewer/AiReviewViewer.tsx

@@ -1,9 +1,13 @@
-import { FC, useState } from 'react'
+import { FC, useMemo, useState } from 'react'
 
 import { Tabs } from '~/apps/review/src/lib'
 import { ScorecardViewer } from '~/apps/review/src/lib/components/Scorecard'
 import { ScorecardAttachments } from '~/apps/review/src/lib/components/Scorecard/ScorecardAttachments'
-import { AiWorkflowRunItemsResponse, useFetchAiWorkflowsRunItems } from '~/apps/review/src/lib/hooks'
+import {
+    AiWorkflowRunItemsResponse,
+    AiWorkflowRunStatusEnum,
+    useFetchAiWorkflowsRunItems,
+} from '~/apps/review/src/lib/hooks'
 import { ReviewsContextModel, SelectOption } from '~/apps/review/src/lib/models'
 
 import { ScorecardHeader } from '../ScorecardHeader'
@@ -20,6 +24,12 @@ const AiReviewViewer: FC = () => {
     const { scorecard, workflowId, workflowRun }: ReviewsContextModel = useReviewsContext()
     const [selectedTab, setSelectedTab] = useState('scorecard')
     const { runItems }: AiWorkflowRunItemsResponse = useFetchAiWorkflowsRunItems(workflowId, workflowRun?.id)
+    const isFailedRun = useMemo(() => (
+        workflowRun && [
+            AiWorkflowRunStatusEnum.CANCELLED,
+            AiWorkflowRunStatusEnum.FAILURE,
+        ].includes(workflowRun.status)
+    ), [workflowRun])
 
     return (
         <div className={styles.wrap}>
@@ -31,15 +41,24 @@ const AiReviewViewer: FC = () => {
                 selected={selectedTab}
                 onChange={setSelectedTab}
             />
-            {!!scorecard && selectedTab === 'scorecard' && (
-                <ScorecardViewer
-                    scorecard={scorecard}
-                    aiFeedback={runItems}
-                />
-            )}
 
-            {selectedTab === 'attachments' && (
-                <ScorecardAttachments />
+            {isFailedRun ? (
+                <div>
+                    AI run failed - no scorecard results are available
+                </div>
+            ) : (
+                <>
+                    {!!scorecard && selectedTab === 'scorecard' && (
+                        <ScorecardViewer
+                            scorecard={scorecard}
+                            aiFeedback={runItems}
+                        />
+                    )}
+
+                    {selectedTab === 'attachments' && (
+                        <ScorecardAttachments />
+                    )}
+                </>
             )}
         </div>
     )

src/apps/review/src/pages/reviews/components/ScorecardHeader/ScorecardHeader.module.scss

@@ -97,6 +97,15 @@
         color: var(--FontColor);
     }
 
+    svg {
+        &.sm {
+            height: 16px;
+        }
+        path {
+            fill: #0A0A0A;
+        }
+    }
+
     @include ltemd {
         margin-left: 0;
     }

src/apps/review/src/pages/reviews/components/ScorecardHeader/ScorecardHeader.tsx

@@ -2,8 +2,9 @@ import { FC, useCallback, useMemo, useState } from 'react'
 import moment, { Duration } from 'moment'
 
 import { ReviewsContextModel } from '~/apps/review/src/lib/models'
+import { useRolePermissions, UseRolePermissionsResult } from '~/apps/review/src/lib/hooks'
 
-import { IconClock, IconPremium } from '../../../../lib/assets/icons'
+import { IconClock, IconFile, IconPremium } from '../../../../lib/assets/icons'
 import { AiModelModal } from '../AiModelModal'
 import { useReviewsContext } from '../../ReviewsContext'
 import AiModelIcon from '../AiModelIcon'
@@ -19,6 +20,7 @@ const formatDuration = (duration: Duration): string => [
 
 const ScorecardHeader: FC = () => {
     const { workflow, workflowRun }: ReviewsContextModel = useReviewsContext()
+    const { isAdmin }: UseRolePermissionsResult = useRolePermissions()
     const runDuration = useMemo(() => (
         workflowRun && workflowRun.completedAt && workflowRun.startedAt && moment.duration(
             +new Date(workflowRun.completedAt) - +new Date(workflowRun.startedAt),
@@ -64,6 +66,21 @@ const ScorecardHeader: FC = () => {
                             {!!runDuration && formatDuration(runDuration)}
                         </span>
                     </span>
+                    {isAdmin && (
+                        <span>
+                            <IconFile className={styles.sm} />
+                            <span>
+                                <strong>Git log:</strong>
+                                {' '}
+                                {workflowRun.gitRunUrl && (
+                                    <a href={workflowRun.gitRunUrl} target='_blank' rel='noreferrer noopener'>
+                                        #
+                                        {workflowRun.gitRunId}
+                                    </a>
+                                )}
+                            </span>
+                        </span>
+                    )}
                 </div>
             </div>
             <p className={styles.workflowDescription}>