Skip to content

PM-4401 stacked view for submitter #1553

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kkartunov merged 3 commits into from
Mar 26, 2026
Merged

PM-4401 stacked view for submitter #1553

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e7d3d7d
PM-4401 stacked view for submitter
vas3a Mar 26, 2026
743bee9
deploy
vas3a Mar 26, 2026
6ad42ae
lint
vas3a Mar 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .circleci/config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -226,6 +226,7 @@ workflows:
branches:
only:
- dev
- PM-4401_stacked-view-for-submitter

- deployQa:
context: org-global
Expand Down
125 changes: 72 additions & 53 deletions src/apps/review/src/lib/components/TableAppealsForSubmitter/TableAppealsForSubmitter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ import {
import type {
DownloadButtonConfig,
ScoreVisibilityConfig,
SubmissionReviewerRow,
SubmissionRow,
} from '../common/types'
import {
Expand Down Expand Up @@ -60,6 +61,7 @@ import {
WITHOUT_APPEAL,
} from '../../../config/index.config'
import { CollapsibleAiReviewsRow } from '../CollapsibleAiReviewsRow'
import { buildSubmissionReviewerRows } from '../common/reviewResult'

import styles from './TableAppealsForSubmitter.module.scss'

Expand Down Expand Up @@ -244,12 +246,9 @@ export const TableAppealsForSubmitter: FC<TableAppealsForSubmitterProps> = (prop
[aggregatedRows],
)

const maxReviewCount = useMemo<number>(
() => aggregatedRows.reduce(
(count, row) => Math.max(count, row.reviews.length),
0,
),
[aggregatedRows],
const reviewerRows = useMemo<SubmissionReviewerRow[]>(
Copy link
Copy Markdown

@github-actions github-actions bot Mar 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[⚠️ correctness]
The useMemo hook is used to memoize reviewerRows, but the dependency array only includes submissionRows. Ensure that buildSubmissionReviewerRows is a pure function and does not rely on any external state or variables that could change, as this could lead to stale data being used.

() => buildSubmissionReviewerRows(submissionRows),
[submissionRows],
)

const {
Expand Down Expand Up @@ -292,26 +291,63 @@ export const TableAppealsForSubmitter: FC<TableAppealsForSubmitterProps> = (prop
[ownedMemberIds],
)

const columns = useMemo<TableColumn<SubmissionRow>[]>(() => {
const baseColumns: TableColumn<SubmissionRow>[] = []
const columns = useMemo<TableColumn<SubmissionReviewerRow>[]>(() => {
Copy link
Copy Markdown

@github-actions github-actions bot Mar 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[⚠️ correctness]
The columns array is being memoized with useMemo, but the dependency array does not include props.aiReviewers. If props.aiReviewers changes, the columns will not be recalculated, potentially leading to incorrect rendering. Consider adding props.aiReviewers to the dependency array.

const baseColumns: TableColumn<SubmissionReviewerRow>[] = []

baseColumns.push({
className: styles.submissionColumn,
className: classNames(styles.submissionColumn, 'no-row-border'),
columnId: 'submission-id',
label: 'Submission ID',
renderer: submission => renderSubmissionIdCell(submission, downloadConfigBase),
renderer: submission => (
submission.isFirstReviewerRow
? renderSubmissionIdCell(submission, downloadConfigBase)
: <span />
),
type: 'element',
})

if (isChallengeCompleted) {
baseColumns.push({
className: 'no-row-border',
columnId: 'submitter',
label: 'Submitter',
renderer: submission => renderSubmitterHandleCell(submission),
renderer: submission => (
submission.isFirstReviewerRow
? renderSubmitterHandleCell(submission)
: <span />
),
type: 'element',
})
}

baseColumns.push({
className: 'no-row-border',
columnId: 'review-score',
label: 'Review Score',
renderer: submission => {
if (!submission.isFirstReviewerRow) {
return <span />
}

const isOwnedSubmission = isOwned(submission)
const scoreConfig: ScoreVisibilityConfig = {
canDisplayScores,
canViewScorecard: isChallengeCompleted || isOwnedSubmission,
isAppealsTab: true,
}

return renderReviewScoreCell(submission, scoreConfig)
},
type: 'element',
})

baseColumns.push({
columnId: 'reviewer',
label: 'Reviewer',
renderer: submission => renderReviewerCell(submission, submission.reviewerIndex),
type: 'element',
})

baseColumns.push({
columnId: 'review-date',
label: 'Review Date',
Expand All @@ -320,8 +356,8 @@ export const TableAppealsForSubmitter: FC<TableAppealsForSubmitterProps> = (prop
})

baseColumns.push({
columnId: 'review-score',
label: 'Review Score',
columnId: 'score',
label: 'Score',
renderer: submission => {
const isOwnedSubmission = isOwned(submission)
const scoreConfig: ScoreVisibilityConfig = {
Expand All @@ -330,22 +366,16 @@ export const TableAppealsForSubmitter: FC<TableAppealsForSubmitterProps> = (prop
isAppealsTab: true,
}

return renderReviewScoreCell(submission, scoreConfig)
return renderScoreCell(submission, submission.reviewerIndex, scoreConfig)
},
type: 'element',
})

for (let index = 0; index < maxReviewCount; index += 1) {
baseColumns.push({
columnId: `reviewer-${index}`,
label: `Reviewer ${index + 1}`,
renderer: submission => renderReviewerCell(submission, index),
type: 'element',
})

if (allowsAppeals) {
baseColumns.push({
columnId: `score-${index}`,
label: `Score ${index + 1}`,
className: styles.tableCellNoWrap,
columnId: 'appeals',
label: 'Appeals',
renderer: submission => {
const isOwnedSubmission = isOwned(submission)
const scoreConfig: ScoreVisibilityConfig = {
Expand All @@ -354,46 +384,36 @@ export const TableAppealsForSubmitter: FC<TableAppealsForSubmitterProps> = (prop
isAppealsTab: true,
}

return renderScoreCell(submission, index, scoreConfig)
return renderAppealsCell(submission, submission.reviewerIndex, scoreConfig)
},
type: 'element',
})

if (allowsAppeals) {
baseColumns.push({
className: styles.tableCellNoWrap,
columnId: `appeals-${index}`,
label: `Appeals ${index + 1}`,
renderer: submission => {
const isOwnedSubmission = isOwned(submission)
const scoreConfig: ScoreVisibilityConfig = {
canDisplayScores,
canViewScorecard: isChallengeCompleted || isOwnedSubmission,
isAppealsTab: true,
}

return renderAppealsCell(submission, index, scoreConfig)
},
type: 'element',
})
}
}

if (props.aiReviewers) {
baseColumns.push({
columnId: 'ai-reviews-table',
isExpand: true,
label: '',
renderer: (submission: SubmissionRow, allRows: SubmissionRow[]) => (
props.aiReviewers && (
renderer: (submission: SubmissionReviewerRow, allRows: SubmissionReviewerRow[]) => {
if (!submission.isLastReviewerRow || !props.aiReviewers) {
Copy link
Copy Markdown

@github-actions github-actions bot Mar 26, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[💡 design]
The check for submission.isLastReviewerRow and props.aiReviewers in the renderer function for the ai-reviews-table column could lead to rendering an empty <span /> when these conditions are not met. Ensure that this behavior is intended and does not lead to unexpected UI artifacts.

return <span />
}

const firstIndexForSubmission = allRows.findIndex(candidate => (
candidate.id === submission.id && candidate.isFirstReviewerRow
))
const defaultOpen = firstIndexForSubmission === 0

return (
<CollapsibleAiReviewsRow
className={styles.aiReviews}
aiReviewers={props.aiReviewers}
submission={submission as any}
defaultOpen={allRows ? !allRows.indexOf(submission) : false}
defaultOpen={defaultOpen}
/>
)
),
},
type: 'element',
})
}
Expand All @@ -405,10 +425,9 @@ export const TableAppealsForSubmitter: FC<TableAppealsForSubmitterProps> = (prop
downloadConfigBase,
isChallengeCompleted,
isOwned,
maxReviewCount,
])

const columnsMobile = useMemo<MobileTableColumn<SubmissionRow>[][]>(
const columnsMobile = useMemo<MobileTableColumn<SubmissionReviewerRow>[][]>(
() => columns.map(column => (
[
column.label && {
Expand All @@ -429,7 +448,7 @@ export const TableAppealsForSubmitter: FC<TableAppealsForSubmitterProps> = (prop
colSpan: column.label ? 1 : 2,
mobileType: 'last-value',
},
].filter(Boolean) as MobileTableColumn<SubmissionRow>[]
].filter(Boolean) as MobileTableColumn<SubmissionReviewerRow>[]
)),
[columns],
)
Expand All @@ -445,11 +464,11 @@ export const TableAppealsForSubmitter: FC<TableAppealsForSubmitterProps> = (prop
)}
>
{isTablet ? (
<TableMobile columns={columnsMobile} data={submissionRows} />
<TableMobile columns={columnsMobile} data={reviewerRows} />
) : (
<Table
columns={columns}
data={submissionRows}
data={reviewerRows}
showExpand
expandMode='always'
disableSorting
Expand Down
Loading
Loading