USEFULL
/
drone
mirror of https://github.com/harness/drone.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix UI not sending comment id when replying a newly created comment (#1202)

gitness-test1
Tan Nhu 2024-04-10 19:36:20 +00:00 committed by Harness
parent cf0041cfb1
commit 85463212bb
5 changed files with 57 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
web/src/components/CodeCommentSecondarySaveButton/CodeCommentSecondarySaveButton.tsx
View File

@ -14,7 +14,8 @@
* limitations under the License.
*/
import React, { useMemo, useState } from 'react'
import React, { useCallback, useEffect, useMemo, useState } from 'react'
import { random } from 'lodash-es'
import { useMutate } from 'restful-react'
import { useToaster, Button, ButtonVariation, ButtonSize, ButtonProps, useIsMounted } from '@harnessio/uicore'
import { useStrings } from 'framework/strings'
@ -27,13 +28,13 @@ import type { CommentItem } from '../CommentBox/CommentBox'
interface CodeCommentSecondarySaveButtonProps
extends Pick<GitInfoProps, 'repoMetadata' | 'pullReqMetadata'>,
ButtonProps {
commentItems: CommentItem<TypesPullReqActivity>[]
comment: { commentItems: CommentItem<TypesPullReqActivity>[] }
}
export const CodeCommentSecondarySaveButton: React.FC<CodeCommentSecondarySaveButtonProps> = ({
repoMetadata,
pullReqMetadata,
commentItems,
comment: { commentItems },
onClick,
...props
}) => {
@ -45,37 +46,64 @@ export const CodeCommentSecondarySaveButton: React.FC<CodeCommentSecondarySaveBu
[repoMetadata.path, pullReqMetadata?.number]
)
const { mutate: updateCodeCommentStatus } = useMutate({ verb: 'PUT', path: ({ id }) => `${path}/${id}/status` })
const [resolved, setResolved] = useState(commentItems[0]?.payload?.resolved ? true : false)
const emitCodeCommentStatus = useEmitCodeCommentStatus({
id: commentItems[0]?.payload?.id,
onMatch: status => {
const [parentComment, setParentComment] = useState(commentItems[0])
const randomClass = useMemo(() => `CodeCommentSecondarySaveButton-${random(1_000_000, false)}`, [])
const [resolved, setResolved] = useState(parentComment?.payload?.resolved ? true : false)
const onMatch = useCallback(
status => {
if (isMounted.current) {
setResolved(status === CodeCommentState.RESOLVED)
const isResolved = status === CodeCommentState.RESOLVED
setResolved(isResolved)
if (parentComment?.payload) {
parentComment.payload.resolved = isResolved ? Date.now() : 0
}
}
},
[isMounted, parentComment?.payload]
)
const emitCodeCommentStatus = useEmitCodeCommentStatus({ id: parentComment?.id, onMatch })
useEffect(() => {
// Comment thread has been just created, check if parentComment is
// not set up properly, then query the comment id from DOM and construct
// it from scratch (this is a workaround).
if (!parentComment?.id) {
const id = document
.querySelector(`.${randomClass}`)
?.closest('[data-comment-thread-id]')
?.getAttribute('data-comment-thread-id')
if (id) {
setParentComment({
id: Number(id),
payload: { resolved: 0 }
} as CommentItem<TypesPullReqActivity>)
}
}
})
}, [parentComment?.id, randomClass])
return commentItems[0]?.payload?.deleted ? null : (
return parentComment?.deleted ? null : (
<Button
className={randomClass}
text={getString(resolved ? 'replyAndReactivate' : 'replyAndResolve')}
variation={ButtonVariation.TERTIARY}
size={ButtonSize.MEDIUM}
onClick={async () => {
const status = resolved ? CodeCommentState.ACTIVE : CodeCommentState.RESOLVED
const payload = { status }
const id = commentItems[0]?.payload?.id
const id = parentComment?.id
await updateCodeCommentStatus(payload, { pathParams: { id } })
.then(async () => {
if (commentItems[0]?.payload) {
if (resolved) {
commentItems[0].payload.resolved = 0
} else {
commentItems[0].payload.resolved = Date.now()
}
emitCodeCommentStatus(status)
if (parentComment?.payload) {
parentComment.payload.resolved = resolved ? 0 : Date.now()
}
emitCodeCommentStatus(status)
await (onClick as () => void)()
if (isMounted.current) setResolved(!resolved)

4
web/src/components/CodeCommentStatusButton/CodeCommentStatusButton.tsx
View File

@ -26,13 +26,13 @@ import { CodeCommentState, getErrorMessage } from 'utils/Utils'
import type { CommentItem } from '../CommentBox/CommentBox'
interface CodeCommentStatusButtonProps extends Pick<GitInfoProps, 'repoMetadata' | 'pullReqMetadata'> {
commentItems: CommentItem<TypesPullReqActivity>[]
comment: { commentItems: CommentItem<TypesPullReqActivity>[] }
}
export const CodeCommentStatusButton: React.FC<CodeCommentStatusButtonProps> = ({
repoMetadata,
pullReqMetadata,
commentItems
comment: { commentItems }
}) => {
const isMounted = useIsMounted()
const { getString } = useStrings()

6
web/src/components/CodeCommentStatusSelect/CodeCommentStatusSelect.tsx
View File

@ -28,13 +28,13 @@ import type { CommentItem } from 'components/CommentBox/CommentBox'
import css from './CodeCommentStatusSelect.module.scss'
interface CodeCommentStatusSelectProps extends Pick<GitInfoProps, 'repoMetadata' | 'pullReqMetadata'> {
commentItems: CommentItem<TypesPullReqActivity>[]
comment: { commentItems: CommentItem<TypesPullReqActivity>[] }
}
export const CodeCommentStatusSelect: React.FC<CodeCommentStatusSelectProps> = ({
repoMetadata,
pullReqMetadata,
commentItems
comment: { commentItems }
}) => {
const { getString } = useStrings()
const { showError } = useToaster()
@ -85,7 +85,7 @@ export const CodeCommentStatusSelect: React.FC<CodeCommentStatusSelectProps> = (
} as CommentItem<TypesPullReqActivity>)
}
}
}, [parentComment?.id])
}, [parentComment?.id, randomClass])
return parentComment?.deleted ? null : (
<Select

6
web/src/components/DiffViewer/usePullReqComments.tsx
View File

@ -420,21 +420,21 @@ export function usePullReqComments({
<CodeCommentStatusSelect
repoMetadata={repoMetadata}
pullReqMetadata={pullReqMetadata as TypesPullReq}
commentItems={comment._commentItems as CommentItem<TypesPullReqActivity>[]}
comment={comment}
/>
),
[CommentBoxOutletPosition.RIGHT_OF_REPLY_PLACEHOLDER]: (
<CodeCommentStatusButton
repoMetadata={repoMetadata}
pullReqMetadata={pullReqMetadata as TypesPullReq}
commentItems={comment._commentItems as CommentItem<TypesPullReqActivity>[]}
comment={comment}
/>
),
[CommentBoxOutletPosition.BETWEEN_SAVE_AND_CANCEL_BUTTONS]: (props: ButtonProps) => (
<CodeCommentSecondarySaveButton
repoMetadata={repoMetadata}
pullReqMetadata={pullReqMetadata as TypesPullReq}
commentItems={comment._commentItems as CommentItem<TypesPullReqActivity>[]}
comment={comment}
{...props}
/>
)

6
web/src/pages/PullRequest/Conversation/Conversation.tsx
View File

@ -339,21 +339,21 @@ export const Conversation: React.FC<ConversationProps> = ({
<CodeCommentStatusSelect
repoMetadata={repoMetadata}
pullReqMetadata={pullReqMetadata}
commentItems={commentItems}
comment={{ commentItems }}
/>
),
[CommentBoxOutletPosition.RIGHT_OF_REPLY_PLACEHOLDER]: (
<CodeCommentStatusButton
repoMetadata={repoMetadata}
pullReqMetadata={pullReqMetadata}
commentItems={commentItems}
comment={{ commentItems }}
/>
),
[CommentBoxOutletPosition.BETWEEN_SAVE_AND_CANCEL_BUTTONS]: (props: ButtonProps) => (
<CodeCommentSecondarySaveButton
repoMetadata={repoMetadata}
pullReqMetadata={pullReqMetadata as TypesPullReq}
commentItems={commentItems}
comment={{ commentItems }}
{...props}
/>
)