Merge pull request #1345 from topcoder-platform/auto-refresh-ui

Auto-refresh the AI reviews ui if run is in progress

Author: vas3a

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

@@ -20,16 +20,14 @@ import styles from './AiReviewsTable.module.scss'
 
 interface AiReviewsTableProps {
     submission: Pick<BackendSubmission, 'id'|'virusScan'>
-    reviewers: { aiWorkflowId: string }[]
 }
 
 const stopPropagation = (ev: ReactMouseEvent<HTMLDivElement, MouseEvent>): void => {
     ev.stopPropagation()
 }
 
 const AiReviewsTable: FC<AiReviewsTableProps> = props => {
-    const aiWorkflowIds = useMemo(() => props.reviewers.map(r => r.aiWorkflowId), [props.reviewers])
-    const { runs, isLoading }: AiWorkflowRunsResponse = useFetchAiWorkflowsRuns(props.submission.id, aiWorkflowIds)
+    const { runs, isLoading }: AiWorkflowRunsResponse = useFetchAiWorkflowsRuns(props.submission.id)
 
     const windowSize: WindowSize = useWindowSize()
     const isTablet = useMemo(

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

@@ -35,10 +35,7 @@ const CollapsibleAiReviewsRow: FC<CollapsibleAiReviewsRowProps> = props => {
             </span>
             {isOpen && (
                 <div className={classNames(styles.table, 'reviews-table')}>
-                    <AiReviewsTable
-                        reviewers={props.aiReviewers}
-                        submission={props.submission}
-                    />
+                    <AiReviewsTable submission={props.submission} />
                 </div>
             )}
         </div>

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

@@ -279,10 +279,7 @@ export const SubmissionHistoryModal: FC<SubmissionHistoryModalProps> = (props: S
                     <tr>
                         <td className={styles.aiReviewersTableRow} colSpan={4}>
                             <div className={styles.aiReviewersTable}>
-                                <AiReviewsTable
-                                    reviewers={aiReviewers}
-                                    submission={submission}
-                                />
+                                <AiReviewsTable submission={submission} />
                             </div>
                         </td>
                     </tr>

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

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import useSWR, { SWRResponse } from 'swr'
 
 import { EnvironmentConfig } from '~/config'
@@ -111,8 +111,8 @@ export const aiRunFailed = (aiRun: Pick<AiWorkflowRun, 'status'>): boolean => [
 
 export function useFetchAiWorkflowsRuns(
     submissionId: string,
-    workflowIds: string[],
 ): AiWorkflowRunsResponse {
+    const hasInProgress = useRef(true)
     // Use swr hooks for challenge info fetching
     const {
         data: runs = [],
@@ -121,10 +121,19 @@ export function useFetchAiWorkflowsRuns(
     }: SWRResponse<AiWorkflowRun[], Error> = useSWR<AiWorkflowRun[], Error>(
         `${TC_API_BASE_URL}/workflows/runs?submissionId=${submissionId}`,
         {
-            isPaused: () => !workflowIds?.length || !submissionId,
+            isPaused: () => !submissionId,
+            refreshInterval: hasInProgress.current ? 10 * 1000 : 0,
         },
     )
 
+    hasInProgress.current = !!runs.find(r => (
+        ![
+            AiWorkflowRunStatusEnum.SUCCESS,
+            AiWorkflowRunStatusEnum.CANCELLED,
+            AiWorkflowRunStatusEnum.COMPLETED,
+        ].includes(r.status)
+    ))
+
     // Show backend error when fetching challenge info
     useEffect(() => {
         if (fetchError) {

src/apps/review/src/pages/reviews/ReviewsContext/ReviewsContextProvider.tsx

@@ -5,7 +5,7 @@ import { Context, createContext, FC, PropsWithChildren, ReactNode, useContext, u
 import { useParams, useSearchParams } from 'react-router-dom'
 
 import { ChallengeDetailContext } from '../../../lib'
-import { ChallengeDetailContextModel, ReviewCtxStatus, ReviewsContextModel } from '../../../lib/models'
+import { ReviewCtxStatus, ReviewsContextModel } from '../../../lib/models'
 import { AiWorkflowRunsResponse, useFetchAiWorkflowsRuns, useFetchSubmissionInfo } from '../../../lib/hooks'
 
 export const ReviewsContext: Context<ReviewsContextModel>
@@ -25,17 +25,10 @@ export const ReviewsContextProvider: FC<PropsWithChildren> = props => {
     const [actionButtons, setActionButtons] = useState<ReactNode>()
 
     const challengeDetailsCtx = useContext(ChallengeDetailContext)
-    const { challengeInfo }: ChallengeDetailContextModel = challengeDetailsCtx
-
     const [submissionInfo] = useFetchSubmissionInfo(submissionId)
 
-    const aiReviewers = useMemo(() => (
-        (challengeInfo?.reviewers ?? []).filter(r => !!r.aiWorkflowId)
-    ), [challengeInfo?.reviewers])
-    const aiWorkflowIds = useMemo(() => aiReviewers?.map(r => r.aiWorkflowId as string), [aiReviewers])
-
     const { runs: workflowRuns, isLoading: aiWorkflowRunsLoading }: AiWorkflowRunsResponse
-        = useFetchAiWorkflowsRuns(submissionId, aiWorkflowIds)
+        = useFetchAiWorkflowsRuns(submissionId)
 
     const isLoadingCtxData
         = challengeDetailsCtx.isLoadingChallengeInfo

src/libs/ui/lib/components/tooltip/Tooltip.tsx

@@ -52,12 +52,12 @@ const Tooltip: FC<TooltipProps> = (props: TooltipProps) => {
 
     function renderTrigger(): ReactElement[] {
         return Children.toArray(props.children)
-            .map(child => cloneElement((wrapComponents(child, props.disableWrap) as ReactElement), {
+            .map((child, i) => cloneElement((wrapComponents(child, props.disableWrap) as ReactElement), {
                 'data-tooltip-delay-show': triggerOnClick ? '0' : '300',
                 'data-tooltip-id': tooltipId.current as string,
                 'data-tooltip-place': props.place ?? 'bottom',
                 'data-tooltip-strategy': props.strategy ?? 'absolute',
-                key: tooltipId.current as string,
+                key: `${tooltipId.current as string}-${i}`,
             } as any))
     }