Skip to content

Commit 38733b6

Browse files
vas3avas3a
authored
Merge pull request #1318 from topcoder-platform/fixes-to-ai-review-scorecard-viewer
Fixes to ai scorcard viewer
2 parents 0223926 + 072f6fb commit 38733b6

File tree

20 files changed

+264
-136
lines changed

20 files changed

+264
-136
lines changed

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { FC, MouseEvent as ReactMouseEvent, useMemo } from 'react'
2+
import { Link } from 'react-router-dom'
23
import moment from 'moment'
34

45
import { useWindowSize, WindowSize } from '~/libs/shared'
@@ -90,7 +91,7 @@ const AiReviewsTable: FC<AiReviewsTableProps> = props => {
9091
<div className={styles.value}>
9192
{run.status === 'SUCCESS' ? (
9293
run.workflow.scorecard ? (
93-
<a href={`/scorecard/${run.workflow.scorecard.id}`}>{run.score}</a>
94+
<Link to={`/scorecard/${run.workflow.scorecard.id}`}>{run.score}</Link>
9495
) : run.score
9596
) : '-'}
9697
</div>
@@ -151,11 +152,11 @@ const AiReviewsTable: FC<AiReviewsTableProps> = props => {
151152
<td className={styles.scoreCol}>
152153
{run.status === 'SUCCESS' ? (
153154
run.workflow.id ? (
154-
<a
155-
href={`./reviews/${props.submission.id}?workflowId=${run.workflow.id}`}
155+
<Link
156+
to={`../reviews/${props.submission.id}?workflowId=${run.workflow.id}`}
156157
>
157158
{run.score}
158-
</a>
159+
</Link>
159160
) : run.score
160161
) : '-'}
161162
</td>

‎src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/ReviewResponse/ReviewComment/ReviewComment.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -98,14 +98,16 @@ const ReviewComment: FC<ReviewCommentProps> = props => {
9898

9999
return (
100100
<div className={styles.wrap}>
101-
<ScorecardQuestionRow
102-
index={`Comment ${props.index}${typeDisplay ? ` (${typeDisplay})` : ''}`}
103-
className={styles.commentRow}
104-
>
105-
<div className={styles.content}>
106-
{props.comment.content}
107-
</div>
108-
</ScorecardQuestionRow>
101+
{props.comment.content && (
102+
<ScorecardQuestionRow
103+
index={`Comment ${props.index}${typeDisplay ? ` (${typeDisplay})` : ''}`}
104+
className={styles.commentRow}
105+
>
106+
<div className={styles.content}>
107+
{props.comment.content}
108+
</div>
109+
</ScorecardQuestionRow>
110+
)}
109111

110112
<ScorecardQuestionRow>
111113
{isSubmitter && canAddAppeal && (!props.appeal && !showAppealForm && (

‎src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/ReviewResponse/ReviewComments/ReviewComments.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ interface ReviewCommentsProps {
1212

1313
const ReviewComments: FC<ReviewCommentsProps> = props => {
1414
const comments = useMemo(() => (
15-
(props.reviewItem.reviewItemComments || []).filter(c => c.content || c.appeal || props.mappingAppeals?.[c.id])
15+
(props.reviewItem.reviewItemComments || [])
1616
).sort((a, b) => a.sortOrder - b.sortOrder), [props.reviewItem.reviewItemComments, props.mappingAppeals])
1717

1818
return (

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

Lines changed: 56 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
/* eslint-disable complexity */
22

3-
import { FC, useCallback, useEffect, useMemo, useState } from 'react'
3+
import { FC, ReactNode, useCallback, useEffect, useMemo, useState } from 'react'
4+
import { Link, NavLink } from 'react-router-dom'
45
import { isEmpty } from 'lodash'
56
import classNames from 'classnames'
67

@@ -44,6 +45,7 @@ interface ScorecardViewerProps {
4445
isSavingAppealResponse?: boolean
4546
isSavingManagerComment?: boolean
4647
setReviewStatus?: (status: ReviewCtxStatus) => void
48+
setActionButtons?: (buttons?: ReactNode) => void
4749
saveReviewInfo?: (
4850
updatedReview: FormReviews | undefined,
4951
fullReview: FormReviews | undefined,
@@ -74,6 +76,7 @@ interface ScorecardViewerProps {
7476
success: () => void,
7577
) => void
7678
onCancelEdit?: () => void
79+
navigateBack?: (e?: React.MouseEvent<HTMLAnchorElement>) => void
7780
isLoading?: boolean
7881
setIsChanged?: (changed: boolean) => void
7982
}
@@ -112,9 +115,7 @@ const ScorecardViewerContent: FC<ScorecardViewerProps> = props => {
112115
form?.getValues(),
113116
true,
114117
totalScore,
115-
(): void => {
116-
// Success callback - could navigate or show success message
117-
},
118+
() => props.navigateBack?.(),
118119
)
119120
}
120121
}, [
@@ -167,6 +168,44 @@ const ScorecardViewerContent: FC<ScorecardViewerProps> = props => {
167168
}
168169
}, [totalScore, props.scorecard])
169170

171+
const actionButtons = useMemo(() => (
172+
<div className={styles.actions}>
173+
<button
174+
type='button'
175+
className='borderButton'
176+
onClick={handleSaveAsDraft}
177+
disabled={props.isSavingReview}
178+
>
179+
Save as Draft
180+
</button>
181+
<button
182+
type='submit'
183+
className='filledButton'
184+
onClick={function onClick() {
185+
touchedAllFields()
186+
form?.handleSubmit(onSubmit)()
187+
}}
188+
disabled={props.isSavingReview}
189+
>
190+
Mark as Complete
191+
</button>
192+
</div>
193+
), [props.isEdit, handleSaveAsDraft, touchedAllFields, props.isSavingReview])
194+
195+
useEffect(() => {
196+
props.setActionButtons?.(props.isEdit ? actionButtons : (
197+
<>
198+
<Link
199+
type='button'
200+
className='borderButton'
201+
to='../challenge-details'
202+
>
203+
Back to Challenge
204+
</Link>
205+
</>
206+
))
207+
}, [actionButtons, props.setActionButtons])
208+
170209
if (props.isLoading) {
171210
return <TableLoading />
172211
}
@@ -234,7 +273,7 @@ const ScorecardViewerContent: FC<ScorecardViewerProps> = props => {
234273

235274
<ScorecardTotal score={totalScore} />
236275

237-
{props.isEdit && (
276+
{props.isEdit ? (
238277
<div className={styles.footer}>
239278
<div>
240279
{errorMessage && (
@@ -259,27 +298,22 @@ const ScorecardViewerContent: FC<ScorecardViewerProps> = props => {
259298
Cancel
260299
</button>
261300
)}
262-
<button
263-
type='button'
264-
className='borderButton'
265-
onClick={handleSaveAsDraft}
266-
disabled={props.isSavingReview}
267-
>
268-
Save as Draft
269-
</button>
270-
<button
271-
type='submit'
301+
{actionButtons}
302+
</div>
303+
</div>
304+
) : (props.navigateBack && (
305+
<div className={styles.footer}>
306+
<div className={styles.actions}>
307+
<NavLink
272308
className='filledButton'
273-
onClick={function onClick() {
274-
touchedAllFields()
275-
}}
276-
disabled={props.isSavingReview}
309+
to=''
310+
onClick={props.navigateBack}
277311
>
278-
Mark as Complete
279-
</button>
312+
Back to Challenge
313+
</NavLink>
280314
</div>
281315
</div>
282-
)}
316+
))}
283317
</ContainerTag>
284318

285319
<ConfirmModal

‎src/apps/review/src/lib/components/SubmissionBarInfo/SubmissionBarInfo.module.scss‎

Lines changed: 28 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,12 @@
22

33
.container {
44
display: flex;
5-
gap: $sp-10;
5+
gap: $sp-4;
66
margin-top: $sp-6;
77
flex-wrap: wrap;
88

9-
@include ltelg {
10-
display: grid;
11-
grid-template-columns: repeat(2, minmax(0, 1fr));
12-
gap: 15px 30px;
13-
}
14-
15-
@include ltesm {
16-
grid-template-columns: 1fr;
9+
@include ltemd {
10+
flex-direction: column;
1711
}
1812
}
1913

@@ -22,31 +16,39 @@
2216
font-size: 14px;
2317
line-height: 19px;
2418

25-
.circleWrapper {
26-
align-items: center;
27-
background-color: #E9ECEF;
28-
border-radius: 50%;
29-
height: 40px;
19+
.nameIcon {
3020
display: flex;
31-
margin-right: $sp-4;
32-
justify-content: center;
33-
width: 40px;
21+
align-items: center;
22+
23+
@include ltemd {
24+
margin-right: auto;
25+
}
3426
}
3527

36-
strong,
37-
a {
38-
color: var(--FontColor);
39-
font-family: "Nunito Sans", sans-serif;
28+
.icon {
4029
display: block;
41-
font-weight: 700;
42-
line-height: 20px;
30+
width: 20px;
31+
height: 20px;
32+
margin-right: 8px;
33+
padding-top: 2px;
34+
padding-bottom: 2px;
35+
i {
36+
width: auto;
37+
height: 100%;
38+
}
4339
}
44-
span {
45-
color: var(--GrayFontColor);
46-
display: block;
40+
41+
strong {
42+
font-weight: bold;
43+
margin-right: $sp-1;
44+
}
45+
46+
strong, a {
47+
color: #0A0A0A;
4748
font-family: "Nunito Sans", sans-serif;
4849
display: block;
4950
line-height: 20px;
51+
font-size: 14px;
5052
}
5153
}
5254

‎src/apps/review/src/lib/components/SubmissionBarInfo/SubmissionBarInfo.tsx‎

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -42,17 +42,17 @@ export const SubmissionBarInfo: FC<Props> = (props: Props) => {
4242
type: 'link',
4343
value: submissionIdValue,
4444
},
45-
{
46-
icon: 'icon-handle',
47-
title: 'My Role',
48-
value: (
49-
<div className={styles.blockMyRoles}>
50-
{myChallengeRoles.map(item => (
51-
<span key={item}>{item}</span>
52-
))}
53-
</div>
54-
),
55-
},
45+
// {
46+
// icon: 'icon-handle',
47+
// title: 'My Role',
48+
// value: (
49+
// <div className={styles.blockMyRoles}>
50+
// {myChallengeRoles.map(item => (
51+
// <span key={item}>{item}</span>
52+
// ))}
53+
// </div>
54+
// ),
55+
// },
5656
{
5757
href: getHandleUrl(useInfo),
5858
icon: 'icon-handle',
@@ -69,24 +69,27 @@ export const SubmissionBarInfo: FC<Props> = (props: Props) => {
6969
<div className={classNames(styles.container, props.className)}>
7070
{uiItems.map(item => (
7171
<div className={styles.blockItem} key={item.title}>
72-
<span className={styles.circleWrapper}>
73-
<i className={item.icon} />
72+
<span className={styles.nameIcon}>
73+
<span className={styles.icon}>
74+
<i className={item.icon} />
75+
</span>
76+
<strong>
77+
{item.title}
78+
:
79+
</strong>
7480
</span>
75-
<div>
76-
<span>{item.title}</span>
77-
{item.type === 'link' ? (
78-
<a
79-
href={item.href}
80-
style={item.style}
81-
target='_blank'
82-
rel='noreferrer'
83-
>
84-
{item.value}
85-
</a>
86-
) : (
87-
<strong style={item.style}>{item.value}</strong>
88-
)}
89-
</div>
81+
{item.type === 'link' ? (
82+
<a
83+
href={item.href}
84+
style={item.style}
85+
target='_blank'
86+
rel='noreferrer'
87+
>
88+
{item.value}
89+
</a>
90+
) : (
91+
<span>{item.value}</span>
92+
)}
9093
</div>
9194
))}
9295
</div>

‎src/apps/review/src/lib/components/TableCheckpointSubmissions/TableCheckpointSubmissions.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -362,7 +362,7 @@ export const TableCheckpointSubmissions: FC<Props> = (props: Props) => {
362362

363363
return (
364364
<Link
365-
to={`./../review/${reviewId}`}
365+
to={`./../reviews/${data.submissionId}?reviewId=${reviewId}`}
366366
className={classNames(
367367
styles.scoreLink,
368368
{
@@ -444,7 +444,7 @@ export const TableCheckpointSubmissions: FC<Props> = (props: Props) => {
444444
key: `complete-${data.myReviewId}`,
445445
render: isLast => (
446446
<Link
447-
to={`./../review/${data.myReviewId}`}
447+
to={`./../reviews/${data.submissionId}?reviewId=${data.myReviewId}`}
448448
className={classNames(styles.submit, { 'last-element': isLast })}
449449
>
450450
<i className='icon-upload' />
@@ -524,7 +524,7 @@ export const TableCheckpointSubmissions: FC<Props> = (props: Props) => {
524524

525525
return (
526526
<Link
527-
to={`./../review/${reviewId}`}
527+
to={`./../reviews/${data.submissionId}?reviewId=${reviewId}`}
528528
className={classNames(
529529
styles.scoreLink,
530530
{

0 commit comments

Comments
 (0)