Merge pull request #1268 from topcoder-platform/fix-2446

Fix 2446

Author: himaniraghav3

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

@@ -411,7 +411,7 @@ function renderResponseCommentRow({
                         </span>
 
                         <MarkdownReview
-                            value={commentItem.content}
+                            value={commentItem.content.replace(/\n\n/g, '<br><br>')}
                             className={styles.mardownReview}
                         />
                     </div>

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

@@ -34,7 +34,6 @@ import {
     aggregateSubmissionReviews,
     challengeHasSubmissionLimit,
     isReviewPhase,
-    isReviewPhaseCurrentlyOpen,
     refreshChallengeReviewData,
     REOPEN_MESSAGE_OTHER,
     REOPEN_MESSAGE_SELF,
@@ -86,69 +85,6 @@ type RestrictionResult = {
     message?: string
 }
 
-function createReopenActionButtons(
-    challengeInfo: ChallengeDetailContextModel['challengeInfo'],
-    submission: SubmissionRow,
-    aggregatedReviews: AggregatedReviewDetail[] | undefined,
-    {
-        canManageCompletedReviews,
-        isReopening,
-        openReopenDialog,
-        pendingReopen,
-    }: {
-        canManageCompletedReviews: boolean
-        isReopening: boolean
-        openReopenDialog: (submission: SubmissionRow, review: AggregatedReviewDetail) => void
-        pendingReopen: PendingReopenState | undefined
-    },
-): JSX.Element[] {
-    if (!canManageCompletedReviews) {
-        return []
-    }
-
-    const buttons: JSX.Element[] = []
-    const reviews = aggregatedReviews ?? []
-
-    reviews.forEach(review => {
-        const reviewInfo = review.reviewInfo
-        if (!reviewInfo?.id) {
-            return
-        }
-
-        if ((reviewInfo.status ?? '').toUpperCase() !== 'COMPLETED') {
-            return
-        }
-
-        if (!isReviewPhaseCurrentlyOpen(challengeInfo, reviewInfo.phaseId)) {
-            return
-        }
-
-        const isTargetReview = pendingReopen?.review?.reviewInfo?.id === reviewInfo.id
-
-        function handleReopenClick(): void {
-            openReopenDialog(submission, {
-                ...review,
-                reviewInfo,
-            } as AggregatedReviewDetail)
-        }
-
-        buttons.push(
-            <button
-                key={`reopen-${reviewInfo.id}`}
-                type='button'
-                className={classNames(styles.actionButton, styles.textBlue)}
-                onClick={handleReopenClick}
-                disabled={isReopening && isTargetReview}
-            >
-                <i className='icon-reopen' />
-                Reopen review
-            </button>,
-        )
-    })
-
-    return buttons
-}
-
 export const TableReview: FC<TableReviewProps> = (props: TableReviewProps) => {
     const className: string | undefined = props.className
     const datas: SubmissionInfo[] = props.datas
@@ -516,20 +452,6 @@ export const TableReview: FC<TableReviewProps> = (props: TableReviewProps) => {
         }
 
         appendAction(buildPrimaryAction(), 'primary')
-
-        const reopenButtons = createReopenActionButtons(
-            challengeInfo,
-            submission,
-            reviews,
-            {
-                canManageCompletedReviews,
-                isReopening,
-                openReopenDialog,
-                pendingReopen,
-            },
-        )
-
-        reopenButtons.forEach(button => appendAction(button, 'reopen'))
         appendAction(buildHistoryAction(), 'history')
 
         if (!actionEntries.length) {
@@ -559,16 +481,11 @@ export const TableReview: FC<TableReviewProps> = (props: TableReviewProps) => {
             </span>
         )
     }, [
-        canManageCompletedReviews,
         canViewHistory,
-        challengeInfo,
         handleHistoryButtonClick,
         hasReviewRole,
         historyByMember,
-        isReopening,
         myReviewerResourceIds,
-        openReopenDialog,
-        pendingReopen,
         shouldShowHistoryActions,
     ])
 
@@ -650,7 +567,16 @@ export const TableReview: FC<TableReviewProps> = (props: TableReviewProps) => {
                 {
                     columnId: `score-${index}`,
                     label: `Score ${index + 1}`,
-                    renderer: (submission: SubmissionRow) => renderScoreCell(submission, index, scoreVisibilityConfig),
+                    renderer: (submission: SubmissionRow) => renderScoreCell(
+                        submission,
+                        index,
+                        scoreVisibilityConfig,
+                        challengeInfo,
+                        pendingReopen,
+                        canManageCompletedReviews,
+                        isReopening,
+                        openReopenDialog,
+                    ),
                     type: 'element',
                 },
             )
@@ -675,6 +601,11 @@ export const TableReview: FC<TableReviewProps> = (props: TableReviewProps) => {
         renderActionsCell,
         scoreVisibilityConfig,
         shouldShowAggregatedActions,
+        canManageCompletedReviews,
+        isReopening,
+        openReopenDialog,
+        challengeInfo,
+        pendingReopen,
     ])
 
     const columnsMobile = useMemo<MobileTableColumn<SubmissionRow>[][]>(

src/apps/review/src/lib/components/common/TableColumnRenderers.module.scss

@@ -13,6 +13,12 @@
     }
 }
 
+.scoreReopenBlock {
+    display: flex;
+    gap: 4px;
+    align-items: center;
+}
+
 .tooltipTrigger {
     display: inline-block;
 }

src/apps/review/src/lib/components/common/TableColumnRenderers.tsx

@@ -12,13 +12,16 @@ import {
     VIRUS_SCAN_FAILED_MESSAGE,
 } from '../../utils/constants'
 import { getReviewRoute } from '../../utils/routes'
+import { ChallengeDetailContextModel, ChallengeInfo } from '../../models'
+import { isReviewPhaseCurrentlyOpen } from '../../utils'
 
 import {
     formatScoreDisplay,
     getHandleColor,
     getProfileUrl,
 } from './columnUtils'
 import type {
+    AggregatedReviewDetail,
     DownloadButtonConfig,
     ScoreVisibilityConfig,
     SubmissionRow,
@@ -315,13 +318,88 @@ export function renderReviewerCell(
     )
 }
 
+interface PendingReopenState {
+    review?: AggregatedReviewDetail
+    submission?: SubmissionRow
+    isOwnReview?: boolean
+}
+
+function createReopenActionButtons(
+    challengeInfo: ChallengeDetailContextModel['challengeInfo'],
+    submission: SubmissionRow,
+    aggregatedReviews: AggregatedReviewDetail[] | undefined,
+    {
+        canManageCompletedReviews,
+        isReopening,
+        openReopenDialog,
+        pendingReopen,
+    }: {
+        canManageCompletedReviews: boolean
+        isReopening: boolean
+        openReopenDialog: (submission: SubmissionRow, review: AggregatedReviewDetail) => void
+        pendingReopen: PendingReopenState | undefined
+    },
+): JSX.Element[] {
+    if (!canManageCompletedReviews) {
+        return []
+    }
+
+    const buttons: JSX.Element[] = []
+    const reviews = aggregatedReviews ?? []
+
+    reviews.forEach(review => {
+        const reviewInfo = review.reviewInfo
+        if (!reviewInfo?.id) {
+            return
+        }
+
+        if ((reviewInfo.status ?? '').toUpperCase() !== 'COMPLETED') {
+            return
+        }
+
+        if (!isReviewPhaseCurrentlyOpen(challengeInfo, reviewInfo.phaseId)) {
+            return
+        }
+
+        const isTargetReview = pendingReopen?.review?.reviewInfo?.id === reviewInfo.id
+
+        function handleReopenClick(): void {
+            openReopenDialog(submission, {
+                ...review,
+                reviewInfo,
+            } as AggregatedReviewDetail)
+        }
+
+        buttons.push(
+            // eslint-disable-next-line jsx-a11y/control-has-associated-label
+            <button
+                key={`reopen-${reviewInfo.id}`}
+                type='button'
+                className={classNames(styles.actionButton, styles.textBlue)}
+                onClick={handleReopenClick}
+                disabled={isReopening && isTargetReview}
+                title='Reopen review'
+            >
+                <i className='icon-reopen' />
+            </button>,
+        )
+    })
+
+    return buttons
+}
+
 /**
  * Renders an individual review score, linking to the review detail when allowed.
  */
 export function renderScoreCell(
     submission: SubmissionRow,
     reviewIndex: number,
     config: ScoreVisibilityConfig,
+    challengeInfo?: ChallengeInfo | undefined,
+    pendingReopen?: PendingReopenState | undefined,
+    canManageCompletedReviews?: boolean,
+    isReopening?: boolean,
+    openReopenDialog?: (submission: SubmissionRow, review: AggregatedReviewDetail) => void,
 ): JSX.Element {
     const configWithDefaults: ScoreVisibilityConfig = config
     const {
@@ -363,6 +441,20 @@ export function renderScoreCell(
     const formattedScore = formatScoreDisplay(reviewDetail.finalScore)
     const scoreLabel = formattedScore ?? '--'
 
+    const reopenButtons = createReopenActionButtons(
+        challengeInfo,
+        submission,
+        [reviewDetail], // pass single review in an array
+        {
+            canManageCompletedReviews: !!canManageCompletedReviews,
+            isReopening: !!isReopening,
+            openReopenDialog: openReopenDialog as (submission: SubmissionRow, review: AggregatedReviewDetail) => void,
+            pendingReopen,
+        },
+    )
+
+    const reopenButton = reopenButtons.length ? reopenButtons[0] : undefined
+
     if (!canViewScorecard) {
         return (
             <Tooltip
@@ -381,13 +473,18 @@ export function renderScoreCell(
     const reviewUrl = getReviewUrl ? getReviewUrl(reviewId) : getReviewRoute(reviewId)
 
     return (
-        <Link
-            to={reviewUrl}
-            className={styles.textBlue}
-        >
-            {scoreLabel}
-        </Link>
+        <div className={styles.scoreReopenBlock}>
+            <Link
+                to={reviewUrl}
+                className={styles.textBlue}
+            >
+                {scoreLabel}
+
+            </Link>
+            <span>{reopenButton}</span>
+        </div>
     )
+
 }
 
 /**