diff --git a/src/apps/review/src/lib/components/ChallengeDetailsContent/ChallengeDetailsContent.tsx b/src/apps/review/src/lib/components/ChallengeDetailsContent/ChallengeDetailsContent.tsx index 50edfbe4c..fb4787a5a 100644 --- a/src/apps/review/src/lib/components/ChallengeDetailsContent/ChallengeDetailsContent.tsx +++ b/src/apps/review/src/lib/components/ChallengeDetailsContent/ChallengeDetailsContent.tsx @@ -392,6 +392,9 @@ export const ChallengeDetailsContent: FC = (props: Props) => { const renderSelectedTab = (): JSX.Element => { const selectedTabLower = (props.selectedTab || '').toLowerCase() const selectedTabNormalized = normalizeType(props.selectedTab) + const aiReviewers = ( + challengeInfo?.reviewers?.filter(r => !!r.aiWorkflowId) as { aiWorkflowId: string }[] + ) ?? [] if (selectedTabLower === 'registration') { return @@ -405,9 +408,7 @@ export const ChallengeDetailsContent: FC = (props: Props) => { if (SUBMISSION_TAB_KEYS.has(selectedTabNormalized)) { return renderSubmissionTab({ - aiReviewers: ( - challengeInfo?.reviewers?.filter(r => !!r.aiWorkflowId) as { aiWorkflowId: string }[] - ) ?? [], + aiReviewers, allowTopgearSubmissionList, downloadSubmission: handleSubmissionDownload, isActiveChallenge: props.isActiveChallenge, @@ -444,6 +445,7 @@ export const ChallengeDetailsContent: FC = (props: Props) => { if (selectedTabLower === 'winners') { return ( = (props: Props) => { return ( = (props: Props) => { return ( = (props: Props) => { return isSubmitterView ? ( = (props: Props) => { ) : ( = (props: Props) => { return isSubmitterView ? ( ) : ( void @@ -30,6 +31,7 @@ export const TabContentWinners: FC = (props: Props) => { return ( } const CollapsibleAiReviewsRow: FC = props => { @@ -24,8 +25,8 @@ const CollapsibleAiReviewsRow: FC = props => { }, []) return ( -
- +
+ {aiReviewersCount} {' '} AI Reviewer @@ -33,7 +34,7 @@ const CollapsibleAiReviewsRow: FC = props => { {isOpen && ( -
+
void @@ -357,6 +359,25 @@ export const TableAppeals: FC = (props: TableAppealsProps) => } } + if (props.aiReviewers) { + baseColumns.push({ + columnId: 'ai-reviews-table', + isExpand: true, + label: '', + renderer: (submission: SubmissionRow, allRows: SubmissionRow[]) => ( + props.aiReviewers && ( + + ) + ), + type: 'element', + }) + } + return baseColumns }, [ allowsAppeals, @@ -369,7 +390,7 @@ export const TableAppeals: FC = (props: TableAppealsProps) => const columnsMobile = useMemo[][]>( () => columns.map(column => ([ - { + column.label && { columnId: `${column.columnId}-label`, label: '', mobileType: 'label', @@ -384,11 +405,12 @@ export const TableAppeals: FC = (props: TableAppealsProps) => }, { ...column, + colSpan: column.label ? 1 : 2, columnId: `${column.columnId}-value`, label: '', mobileType: 'last-value', }, - ]) as MobileTableColumn[]), + ]).filter(Boolean) as MobileTableColumn[]), [columns], ) @@ -408,6 +430,8 @@ export const TableAppeals: FC = (props: TableAppealsProps) => void @@ -377,6 +379,25 @@ export const TableAppealsForSubmitter: FC = (prop } } + if (props.aiReviewers) { + baseColumns.push({ + columnId: 'ai-reviews-table', + isExpand: true, + label: '', + renderer: (submission: SubmissionRow, allRows: SubmissionRow[]) => ( + props.aiReviewers && ( + + ) + ), + type: 'element', + }) + } + return baseColumns }, [ allowsAppeals, @@ -390,7 +411,7 @@ export const TableAppealsForSubmitter: FC = (prop const columnsMobile = useMemo[][]>( () => columns.map(column => ( [ - { + column.label && { ...column, className: '', label: `${column.label as string} label`, @@ -405,9 +426,10 @@ export const TableAppealsForSubmitter: FC = (prop }, { ...column, + colSpan: column.label ? 1 : 2, mobileType: 'last-value', }, - ] as MobileTableColumn[] + ].filter(Boolean) as MobileTableColumn[] )), [columns], ) @@ -428,6 +450,8 @@ export const TableAppealsForSubmitter: FC = (prop
void mappingReviewAppeal: MappingReviewAppeal @@ -478,6 +480,25 @@ export const TableAppealsResponse: FC = (props: Table }) } + if (props.aiReviewers) { + baseColumns.push({ + columnId: 'ai-reviews-table', + isExpand: true, + label: '', + renderer: (submission: SubmissionRow, allRows: SubmissionRow[]) => ( + props.aiReviewers && ( + + ) + ), + type: 'element', + }) + } + return baseColumns }, [ allowsAppeals, @@ -509,13 +530,14 @@ export const TableAppealsResponse: FC = (props: Table const valueColumn: MobileTableColumn = { ...column, + colSpan: label ? 1 : 2, columnId: `${column.columnId}-value`, label: '', mobileType: 'last-value', ...(column.columnId === 'actions' ? { colSpan: 2 } : {}), } - return [labelColumn, valueColumn] + return [!!label && labelColumn, valueColumn].filter(Boolean) as MobileTableColumn[] }), [columns], ) @@ -541,6 +563,8 @@ export const TableAppealsResponse: FC = (props: Table ) : (
= (props: TableReviewProps) => { }) } + for (let index = 0; index < maxReviewCount; index += 1) { + const metadata = reviewerColumnMetadata[index] ?? { + label: `Reviewer ${index + 1}`, + } + baseColumns.push( + { + columnId: `reviewer-${index}`, + label: metadata.renderLabel ?? metadata.label, + renderer: (submission: SubmissionRow) => renderReviewerCell(submission, index), + type: 'element', + }, + { + columnId: `score-${index}`, + label: `Score ${index + 1}`, + renderer: (submission: SubmissionRow) => renderScoreCell( + submission, + index, + scoreVisibilityConfig, + challengeInfo, + pendingReopen, + canManageCompletedReviews, + isReopening, + openReopenDialog, + ), + type: 'element', + }, + ) + } + baseColumns.push( + ...(props.aiReviewers ? [{ + columnId: 'ai-reviews-table', + isExpand: true, + label: '', + renderer: (submission: SubmissionRow, allRows: SubmissionRow[]) => ( + props.aiReviewers && ( + + ) + ), + type: 'element', + }] : []) as TableColumn[], { columnId: 'review-date', label: 'Review Date', @@ -631,35 +678,6 @@ export const TableReview: FC = (props: TableReviewProps) => { }, ) - for (let index = 0; index < maxReviewCount; index += 1) { - const metadata = reviewerColumnMetadata[index] ?? { - label: `Reviewer ${index + 1}`, - } - baseColumns.push( - { - columnId: `reviewer-${index}`, - label: metadata.renderLabel ?? metadata.label, - renderer: (submission: SubmissionRow) => renderReviewerCell(submission, index), - type: 'element', - }, - { - columnId: `score-${index}`, - label: `Score ${index + 1}`, - renderer: (submission: SubmissionRow) => renderScoreCell( - submission, - index, - scoreVisibilityConfig, - challengeInfo, - pendingReopen, - canManageCompletedReviews, - isReopening, - openReopenDialog, - ), - type: 'element', - }, - ) - } - if (shouldShowAggregatedActions) { baseColumns.push({ className: styles.textBlue, @@ -738,24 +756,27 @@ export const TableReview: FC = (props: TableReviewProps) => { const labelText = resolvedLabel || '' return [ + (labelText && ( + { + ...column, + className: '', + label: labelText ? `${labelText} label` : 'label', + mobileType: 'label', + renderer: () => ( +
+ {labelText} + : +
+ ), + type: 'element', + } + )), { ...column, - className: '', - label: labelText ? `${labelText} label` : 'label', - mobileType: 'label', - renderer: () => ( -
- {labelText} - : -
- ), - type: 'element', - }, - { - ...column, + colSpan: labelText ? 1 : 2, mobileType: 'last-value', }, - ] as MobileTableColumn[] + ].filter(Boolean) as MobileTableColumn[] }), [columns, reviewerColumnMetadata], ) @@ -773,6 +794,8 @@ export const TableReview: FC = (props: TableReviewProps) => { ) : (
void mappingReviewAppeal: MappingReviewAppeal @@ -492,6 +494,25 @@ export const TableReviewForSubmitter: FC = (props: }) } + if (props.aiReviewers) { + columnsList.push({ + columnId: 'ai-reviews-table', + isExpand: true, + label: '', + renderer: (submission: SubmissionRow, allRows: SubmissionRow[]) => ( + props.aiReviewers && ( + + ) + ), + type: 'element', + }) + } + return columnsList }, [ canDisplayScores, @@ -511,7 +532,7 @@ export const TableReviewForSubmitter: FC = (props: const columnsMobile = useMemo[][]>( () => columns.map(column => ( [ - { + column.label && { ...column, className: '', label: `${column.label as string} label`, @@ -526,9 +547,10 @@ export const TableReviewForSubmitter: FC = (props: }, { ...column, + colSpan: column.label ? 1 : 2, mobileType: 'last-value', }, - ] as MobileTableColumn[] + ].filter(Boolean) as MobileTableColumn[] )), [columns], ) @@ -549,6 +571,8 @@ export const TableReviewForSubmitter: FC = (props:
void } @@ -210,6 +212,21 @@ export const TableWinners: FC = (props: Props) => { ), type: 'element', }, + { + columnId: 'ai-reviews-table', + label: '', + renderer: (result: ProjectResult, allRows: ProjectResult[]) => ( + props.aiReviewers && ( + + ) + ), + type: 'element', + }, ], [ downloadSubmission, @@ -223,7 +240,7 @@ export const TableWinners: FC = (props: Props) => { const columnsMobile = useMemo[][]>( () => columns.map(column => [ - { + column.label && { ...column, className: '', label: `${column.label as string} label`, @@ -238,9 +255,10 @@ export const TableWinners: FC = (props: Props) => { }, { ...column, + colSpan: column.label ? 1 : 2, mobileType: 'last-value', }, - ] as MobileTableColumn[]), + ].filter(Boolean) as MobileTableColumn[]), [columns], ) diff --git a/src/libs/ui/lib/components/table/Table.tsx b/src/libs/ui/lib/components/table/Table.tsx index 221db4812..3b1c794f7 100644 --- a/src/libs/ui/lib/components/table/Table.tsx +++ b/src/libs/ui/lib/components/table/Table.tsx @@ -28,6 +28,7 @@ interface TableProps { readonly moreToLoad?: boolean readonly disableSorting?: boolean readonly showExpand?: boolean + readonly expandMode?: 'always' readonly initSort?: Sort readonly forceSort?: Sort readonly onLoadMoreClick?: () => void @@ -239,7 +240,7 @@ const Table: (props: TableProps) = ) }) - const rowCells: Array = sortedData + const bodyRows: Array = sortedData .map((sorted, index) => ( (props: TableProps) = columns={props.columns} index={index} showExpand={props.showExpand} + expandMode={props.expandMode} colWidth={colWidthInput} preventDefault={props.preventDefault} /> @@ -264,7 +266,7 @@ const Table: (props: TableProps) = - {rowCells} + {bodyRows}
{ diff --git a/src/libs/ui/lib/components/table/table-row/TableRow.module.scss b/src/libs/ui/lib/components/table/table-row/TableRow.module.scss index 7ad11aa99..a14d4ed4c 100644 --- a/src/libs/ui/lib/components/table/table-row/TableRow.module.scss +++ b/src/libs/ui/lib/components/table/table-row/TableRow.module.scss @@ -27,14 +27,9 @@ } } -.blockExpandContainer { - display: table; - padding: 8px; - width: 100%; -} - .blockExpandItem { - display: table-row; + display: flex; + align-items: flex-start; font-size: 14px; line-height: 22px; } @@ -47,7 +42,12 @@ } .blockExpandCell { - display: table-cell; + display: block; + max-width: none; + flex: 1 1 auto; + > * { + display: block; + } } .blockExpandValue { @@ -55,8 +55,4 @@ background-color: white !important; font-weight: 400 !important; white-space: break-spaces !important; - - :global(.TableCell_blockCell) { - margin-top: 3px; - } } diff --git a/src/libs/ui/lib/components/table/table-row/TableRow.tsx b/src/libs/ui/lib/components/table/table-row/TableRow.tsx index f94748d61..d8a74870e 100644 --- a/src/libs/ui/lib/components/table/table-row/TableRow.tsx +++ b/src/libs/ui/lib/components/table/table-row/TableRow.tsx @@ -21,6 +21,7 @@ interface Props { readonly columns: ReadonlyArray> index: number readonly showExpand?: boolean + readonly expandMode?: 'always' colWidth?: {[key: string]: number} readonly preventDefault?: boolean allRows?: ReadonlyArray @@ -38,7 +39,8 @@ export const TableRow: ( return _.filter(props.columns, item => !item.isExpand) }, [props.columns, props.showExpand]) - const [isExpanded, setIsExpanded] = useState(false) + const isAlwaysExpand = props.expandMode === 'always' + const [isExpanded, setIsExpanded] = useState(isAlwaysExpand) const expandColumns = useMemo(() => { if (!props.showExpand) { return props.columns @@ -56,12 +58,12 @@ export const TableRow: ( data={props.data} index={props.index} key={getKey(`${props.index}${colIndex}`)} - showExpandIndicator={colIndex === 0 && props.showExpand} + showExpandIndicator={colIndex === 0 && (!isAlwaysExpand && props.showExpand)} isExpanded={isExpanded && colIndex === 0} onExpand={ props.showExpand ? function onExpand() { - setIsExpanded(!isExpanded) + setIsExpanded(isAlwaysExpand || !isExpanded) } : undefined } @@ -93,22 +95,22 @@ export const TableRow: ( > {cells} - {isExpanded && props.showExpand && ( + {props.showExpand && isExpanded && ( -
- {expandColumns.map((col, colIndex) => { - const columnId = `column-id-${col.columnId}-` - const colWidth = props.colWidth?.[columnId] - return ( -
+ {expandColumns.map((col, colIndex) => { + const columnId = `column-id-${col.columnId}-` + const colWidth = props.colWidth?.[columnId] + return ( +
+ {!!col.label && ( ( {col.label as string} : - -
- ) - })} -
+ )} + +
+ ) + })} )}