feat(PM-2177): implemented edit comment

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

@@ -20,6 +20,7 @@ import { ReactComponent as IconThumbsUp } from './icon-thumb-up.svg'
 import { ReactComponent as IconThumbsDown } from './icon-thumbs-down.svg'
 import { ReactComponent as IconThumbsUpFilled } from './icon-thumb-up-filled.svg'
 import { ReactComponent as IconThumbsDownFilled } from './icon-thumbs-down-filled.svg'
+import { ReactComponent as IconEditReply } from './icon-edit-reply.svg'
 
 export * from './editor/bold'
 export * from './editor/code'
@@ -59,6 +60,7 @@ export {
     IconThumbsDown,
     IconThumbsUpFilled,
     IconThumbsDownFilled,
+    IconEditReply,
 }
 
 export const phasesIcons = {

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

@@ -3,6 +3,7 @@ import { FC, useCallback, useContext, useEffect, useState } from 'react'
 import { mutate } from 'swr'
 
 import {
+    IconEditReply,
     IconReply,
     IconThumbsDown,
     IconThumbsDownFilled,
@@ -11,7 +12,7 @@ import {
 } from '~/apps/review/src/lib/assets/icons'
 import { ReviewAppContext } from '~/apps/review/src/lib/contexts'
 import { useReviewsContext } from '~/apps/review/src/pages/reviews/ReviewsContext'
-import { updateLikesOrDislikesOnRunItem, updateLikesOrDislikesOnRunItemComment } from '~/apps/review/src/lib/services'
+import { updateLikesOrDislikesOnRunItem, updateRunItemComment } from '~/apps/review/src/lib/services'
 import { EnvironmentConfig } from '~/config'
 import { ReviewAppContextModel, ReviewsContextModel } from '~/apps/review/src/lib/models'
 
@@ -29,6 +30,7 @@ interface AiFeedbackActionsProps {
     comment?: AiFeedbackComment
     feedback?: any
     onPressReply: () => void
+    onPressEdit?: () => void
 }
 
 export const AiFeedbackActions: FC<AiFeedbackActionsProps> = props => {
@@ -185,7 +187,7 @@ export const AiFeedbackActions: FC<AiFeedbackActionsProps> = props => {
         }
 
         try {
-            await updateLikesOrDislikesOnRunItemComment(workflowId, workflowRun.id, props.feedback.id, c.id, {
+            await updateRunItemComment(workflowId, workflowRun.id, props.feedback.id, c.id, {
                 downVote: down,
                 upVote: up,
             })
@@ -233,6 +235,19 @@ export const AiFeedbackActions: FC<AiFeedbackActionsProps> = props => {
                 <IconReply />
                 <span className={styles.count}>Reply</span>
             </button>
+
+            {
+                props.onPressEdit && (
+                    <button
+                        type='button'
+                        className={styles.actionBtn}
+                        onClick={props.onPressEdit}
+                    >
+                        <IconEditReply />
+                        <span className={styles.count}>Edit</span>
+                    </button>
+                )
+            }
         </div>
     )
 }

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

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import moment from 'moment'
 
 import { useReviewsContext } from '~/apps/review/src/pages/reviews/ReviewsContext'
-import { createFeedbackComment } from '~/apps/review/src/lib/services'
+import { createFeedbackComment, updateRunItemComment } from '~/apps/review/src/lib/services'
 import { AiFeedbackItem, ReviewsContextModel } from '~/apps/review/src/lib/models'
 import { EnvironmentConfig } from '~/config'
 
@@ -23,12 +23,17 @@ interface AiFeedbackCommentProps {
 
 export const AiFeedbackComment: FC<AiFeedbackCommentProps> = props => {
     const { workflowId, workflowRun }: ReviewsContextModel = useReviewsContext()
+    const [editMode, setEditMode] = useState(false)
     const [showReply, setShowReply] = useState(false)
 
     const onShowReply = useCallback(() => {
         setShowReply(!showReply)
     }, [])
 
+    const onPressEdit = useCallback(() => {
+        setEditMode(true)
+    }, [])
+
     const onSubmitReply = useCallback(async (content: string, comment: AiFeedbackCommentType) => {
         await createFeedbackComment(workflowId as string, workflowRun?.id as string, props.feedback?.id, {
             content,
@@ -37,6 +42,15 @@ export const AiFeedbackComment: FC<AiFeedbackCommentProps> = props => {
         await mutate(`${EnvironmentConfig.API.V6}/workflows/${workflowId}/runs/${workflowRun?.id}/items`)
         setShowReply(false)
     }, [workflowId, workflowRun?.id, props.feedback?.id])
+
+    const onEditReply = useCallback(async (content: string, comment: AiFeedbackCommentType) => {
+        await updateRunItemComment(workflowId as string, workflowRun?.id as string, props.feedback?.id, comment.id, {
+            content,
+        })
+        await mutate(`${EnvironmentConfig.API.V6}/workflows/${workflowId}/runs/${workflowRun?.id}/items`)
+        setEditMode(false)
+    }, [workflowId, workflowRun?.id, props.feedback?.id])
+
     return (
         <div
             key={props.comment.id}
@@ -62,12 +76,29 @@ export const AiFeedbackComment: FC<AiFeedbackCommentProps> = props => {
                         .format('MMM DD, hh:mm A')}
                 </span>
             </div>
-            <MarkdownReview value={props.comment.content} />
+            {
+                !editMode && <MarkdownReview value={props.comment.content} />
+            }
+            {
+                editMode && (
+                    <AiFeedbackReply
+                        id={props.comment.id}
+                        initialValue={props.comment.content}
+                        onSubmitReply={function submitReply(content: string) {
+                            return onEditReply(content, props.comment)
+                        }}
+                        onCloseReply={function closeReply() {
+                            setEditMode(false)
+                        }}
+                    />
+                )
+            }
             <AiFeedbackActions
                 feedback={props.feedback}
                 comment={props.comment}
                 actionType='comment'
                 onPressReply={onShowReply}
+                onPressEdit={onPressEdit}
             />
             {
                 showReply && (

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

@@ -5,7 +5,7 @@ import {
     UseFormReturn,
 } from 'react-hook-form'
 import { get } from 'lodash'
-import { FC, useCallback, useState } from 'react'
+import { FC, useCallback, useEffect, useState } from 'react'
 import classNames from 'classnames'
 
 import { yupResolver } from '@hookform/resolvers/yup'
@@ -17,8 +17,10 @@ import { FieldMarkdownEditor } from '../../../../FieldMarkdownEditor'
 import styles from './AiFeedbackReply.module.scss'
 
 interface AiFeedbackReplyProps {
+    id?: string
+    initialValue?: string
     onCloseReply: () => void
-    onSubmitReply: (content: string) => Promise<void>
+    onSubmitReply: (content: string, id?: string) => Promise<void>
 }
 
 export const AiFeedbackReply: FC<AiFeedbackReplyProps> = props => {
@@ -36,9 +38,15 @@ export const AiFeedbackReply: FC<AiFeedbackReplyProps> = props => {
         resolver: yupResolver(formFeedbackReplySchema),
     })
 
+    useEffect(() => {
+        if (props.initialValue) {
+            setReply(props.initialValue)
+        }
+    }, [props.initialValue])
+
     const onSubmit = useCallback(async (data: FormFeedbackReply) => {
         setSavingReply(true)
-        await props.onSubmitReply(data.reply)
+        await props.onSubmitReply(data.reply, props.id)
         setReply('')
         setSavingReply(false)
     }, [props.onSubmitReply, setReply])
@@ -80,7 +88,9 @@ export const AiFeedbackReply: FC<AiFeedbackReplyProps> = props => {
                         className='filledButton'
                         type='submit'
                     >
-                        Submit Reply
+                        {
+                            props.id ? 'Edit Reply' : 'Submit Reply'
+                        }
                     </button>
                     <button
                         type='button'

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

@@ -43,14 +43,15 @@ export const updateLikesOrDislikesOnRunItem = (
     body,
 )
 
-export const updateLikesOrDislikesOnRunItemComment = (
+export const updateRunItemComment = (
     workflowId: string,
     runId: string,
     feedbackId: string,
     commentId: string,
     body: {
-        upVote: boolean
-        downVote: boolean
+        content?: string
+        upVote?: boolean
+        downVote?: boolean
     },
 ): Promise<void> => xhrPatchAsync(
     `${EnvironmentConfig.API.V6}/workflows/${workflowId}/runs/${runId}/items/${feedbackId}/comments/${commentId}`,