Skip to content

Commit 78e28be

Browse files
authored
Merge pull request #1328 from topcoder-platform/pm-2177_comments_edit
feat(PM-2177): implemented edit comment
2 parents 6d0f2de + 4f1ce88 commit 78e28be

File tree

6 files changed

+73
-11
lines changed

6 files changed

+73
-11
lines changed
Lines changed: 3 additions & 0 deletions
Loading

src/apps/review/src/lib/assets/icons/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import { ReactComponent as IconThumbsUp } from './icon-thumb-up.svg'
2020
import { ReactComponent as IconThumbsDown } from './icon-thumbs-down.svg'
2121
import { ReactComponent as IconThumbsUpFilled } from './icon-thumb-up-filled.svg'
2222
import { ReactComponent as IconThumbsDownFilled } from './icon-thumbs-down-filled.svg'
23+
import { ReactComponent as IconEditReply } from './icon-edit-reply.svg'
2324

2425
export * from './editor/bold'
2526
export * from './editor/code'
@@ -59,6 +60,7 @@ export {
5960
IconThumbsDown,
6061
IconThumbsUpFilled,
6162
IconThumbsDownFilled,
63+
IconEditReply,
6264
}
6365

6466
export const phasesIcons = {

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackActions/AiFeedbackActions.tsx

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { FC, useCallback, useContext, useEffect, useState } from 'react'
33
import { mutate } from 'swr'
44

55
import {
6+
IconEditReply,
67
IconReply,
78
IconThumbsDown,
89
IconThumbsDownFilled,
@@ -11,7 +12,7 @@ import {
1112
} from '~/apps/review/src/lib/assets/icons'
1213
import { ReviewAppContext } from '~/apps/review/src/lib/contexts'
1314
import { useReviewsContext } from '~/apps/review/src/pages/reviews/ReviewsContext'
14-
import { updateLikesOrDislikesOnRunItem, updateLikesOrDislikesOnRunItemComment } from '~/apps/review/src/lib/services'
15+
import { updateLikesOrDislikesOnRunItem, updateRunItemComment } from '~/apps/review/src/lib/services'
1516
import { EnvironmentConfig } from '~/config'
1617
import { ReviewAppContextModel, ReviewsContextModel } from '~/apps/review/src/lib/models'
1718

@@ -29,6 +30,7 @@ interface AiFeedbackActionsProps {
2930
comment?: AiFeedbackComment
3031
feedback?: any
3132
onPressReply: () => void
33+
onPressEdit?: () => void
3234
}
3335

3436
export const AiFeedbackActions: FC<AiFeedbackActionsProps> = props => {
@@ -185,7 +187,7 @@ export const AiFeedbackActions: FC<AiFeedbackActionsProps> = props => {
185187
}
186188

187189
try {
188-
await updateLikesOrDislikesOnRunItemComment(workflowId, workflowRun.id, props.feedback.id, c.id, {
190+
await updateRunItemComment(workflowId, workflowRun.id, props.feedback.id, c.id, {
189191
downVote: down,
190192
upVote: up,
191193
})
@@ -233,6 +235,19 @@ export const AiFeedbackActions: FC<AiFeedbackActionsProps> = props => {
233235
<IconReply />
234236
<span className={styles.count}>Reply</span>
235237
</button>
238+
239+
{
240+
props.onPressEdit && (
241+
<button
242+
type='button'
243+
className={styles.actionBtn}
244+
onClick={props.onPressEdit}
245+
>
246+
<IconEditReply />
247+
<span className={styles.count}>Edit</span>
248+
</button>
249+
)
250+
}
236251
</div>
237252
)
238253
}

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackComments/AiFeedbackComment.tsx

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import classNames from 'classnames'
44
import moment from 'moment'
55

66
import { useReviewsContext } from '~/apps/review/src/pages/reviews/ReviewsContext'
7-
import { createFeedbackComment } from '~/apps/review/src/lib/services'
7+
import { createFeedbackComment, updateRunItemComment } from '~/apps/review/src/lib/services'
88
import { AiFeedbackItem, ReviewsContextModel } from '~/apps/review/src/lib/models'
99
import { EnvironmentConfig } from '~/config'
1010

@@ -23,12 +23,17 @@ interface AiFeedbackCommentProps {
2323

2424
export const AiFeedbackComment: FC<AiFeedbackCommentProps> = props => {
2525
const { workflowId, workflowRun }: ReviewsContextModel = useReviewsContext()
26+
const [editMode, setEditMode] = useState(false)
2627
const [showReply, setShowReply] = useState(false)
2728

2829
const onShowReply = useCallback(() => {
2930
setShowReply(!showReply)
3031
}, [])
3132

33+
const onPressEdit = useCallback(() => {
34+
setEditMode(true)
35+
}, [])
36+
3237
const onSubmitReply = useCallback(async (content: string, comment: AiFeedbackCommentType) => {
3338
await createFeedbackComment(workflowId as string, workflowRun?.id as string, props.feedback?.id, {
3439
content,
@@ -37,6 +42,15 @@ export const AiFeedbackComment: FC<AiFeedbackCommentProps> = props => {
3742
await mutate(`${EnvironmentConfig.API.V6}/workflows/${workflowId}/runs/${workflowRun?.id}/items`)
3843
setShowReply(false)
3944
}, [workflowId, workflowRun?.id, props.feedback?.id])
45+
46+
const onEditReply = useCallback(async (content: string, comment: AiFeedbackCommentType) => {
47+
await updateRunItemComment(workflowId as string, workflowRun?.id as string, props.feedback?.id, comment.id, {
48+
content,
49+
})
50+
await mutate(`${EnvironmentConfig.API.V6}/workflows/${workflowId}/runs/${workflowRun?.id}/items`)
51+
setEditMode(false)
52+
}, [workflowId, workflowRun?.id, props.feedback?.id])
53+
4054
return (
4155
<div
4256
key={props.comment.id}
@@ -62,12 +76,29 @@ export const AiFeedbackComment: FC<AiFeedbackCommentProps> = props => {
6276
.format('MMM DD, hh:mm A')}
6377
</span>
6478
</div>
65-
<MarkdownReview value={props.comment.content} />
79+
{
80+
!editMode && <MarkdownReview value={props.comment.content} />
81+
}
82+
{
83+
editMode && (
84+
<AiFeedbackReply
85+
id={props.comment.id}
86+
initialValue={props.comment.content}
87+
onSubmitReply={function submitReply(content: string) {
88+
return onEditReply(content, props.comment)
89+
}}
90+
onCloseReply={function closeReply() {
91+
setEditMode(false)
92+
}}
93+
/>
94+
)
95+
}
6696
<AiFeedbackActions
6797
feedback={props.feedback}
6898
comment={props.comment}
6999
actionType='comment'
70100
onPressReply={onShowReply}
101+
onPressEdit={onPressEdit}
71102
/>
72103
{
73104
showReply && (

src/apps/review/src/lib/components/Scorecard/ScorecardViewer/ScorecardQuestion/AiFeedbackReply/AiFeedbackReply.tsx

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
UseFormReturn,
66
} from 'react-hook-form'
77
import { get } from 'lodash'
8-
import { FC, useCallback, useState } from 'react'
8+
import { FC, useCallback, useEffect, useState } from 'react'
99
import classNames from 'classnames'
1010

1111
import { yupResolver } from '@hookform/resolvers/yup'
@@ -17,8 +17,10 @@ import { FieldMarkdownEditor } from '../../../../FieldMarkdownEditor'
1717
import styles from './AiFeedbackReply.module.scss'
1818

1919
interface AiFeedbackReplyProps {
20+
id?: string
21+
initialValue?: string
2022
onCloseReply: () => void
21-
onSubmitReply: (content: string) => Promise<void>
23+
onSubmitReply: (content: string, id?: string) => Promise<void>
2224
}
2325

2426
export const AiFeedbackReply: FC<AiFeedbackReplyProps> = props => {
@@ -36,9 +38,15 @@ export const AiFeedbackReply: FC<AiFeedbackReplyProps> = props => {
3638
resolver: yupResolver(formFeedbackReplySchema),
3739
})
3840

41+
useEffect(() => {
42+
if (props.initialValue) {
43+
setReply(props.initialValue)
44+
}
45+
}, [props.initialValue])
46+
3947
const onSubmit = useCallback(async (data: FormFeedbackReply) => {
4048
setSavingReply(true)
41-
await props.onSubmitReply(data.reply)
49+
await props.onSubmitReply(data.reply, props.id)
4250
setReply('')
4351
setSavingReply(false)
4452
}, [props.onSubmitReply, setReply])
@@ -80,7 +88,9 @@ export const AiFeedbackReply: FC<AiFeedbackReplyProps> = props => {
8088
className='filledButton'
8189
type='submit'
8290
>
83-
Submit Reply
91+
{
92+
props.id ? 'Edit Reply' : 'Submit Reply'
93+
}
8494
</button>
8595
<button
8696
type='button'

src/apps/review/src/lib/services/scorecards.service.ts

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,15 @@ export const updateLikesOrDislikesOnRunItem = (
4343
body,
4444
)
4545

46-
export const updateLikesOrDislikesOnRunItemComment = (
46+
export const updateRunItemComment = (
4747
workflowId: string,
4848
runId: string,
4949
feedbackId: string,
5050
commentId: string,
5151
body: {
52-
upVote: boolean
53-
downVote: boolean
52+
content?: string
53+
upVote?: boolean
54+
downVote?: boolean
5455
},
5556
): Promise<void> => xhrPatchAsync(
5657
`${EnvironmentConfig.API.V6}/workflows/${workflowId}/runs/${runId}/items/${feedbackId}/comments/${commentId}`,

0 commit comments

Comments
 (0)