mirror of
https://github.com/harness/drone.git
synced 2025-05-06 07:52:58 +00:00
638 lines
24 KiB
TypeScript
638 lines
24 KiB
TypeScript
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
|
|
import { useMutate } from 'restful-react'
|
|
import ReactDOM from 'react-dom'
|
|
import { useInView } from 'react-intersection-observer'
|
|
import {
|
|
Button,
|
|
Container,
|
|
FlexExpander,
|
|
ButtonVariation,
|
|
Layout,
|
|
Text,
|
|
ButtonSize,
|
|
useToaster,
|
|
ButtonProps,
|
|
Checkbox
|
|
} from '@harnessio/uicore'
|
|
import cx from 'classnames'
|
|
import { Render } from 'react-jsx-match'
|
|
import { Link } from 'react-router-dom'
|
|
import { Diff2HtmlUI } from 'diff2html/lib-esm/ui/js/diff2html-ui'
|
|
import { useStrings } from 'framework/strings'
|
|
import { CodeIcon, GitInfoProps } from 'utils/GitUtils'
|
|
import { useEventListener } from 'hooks/useEventListener'
|
|
import type { DiffFileEntry } from 'utils/types'
|
|
import { useConfirmAct } from 'hooks/useConfirmAction'
|
|
import { useAppContext } from 'AppContext'
|
|
import type { OpenapiCommentCreatePullReqRequest, TypesPullReq, TypesPullReqActivity } from 'services/code'
|
|
import { getErrorMessage } from 'utils/Utils'
|
|
import { CopyButton } from 'components/CopyButton/CopyButton'
|
|
import { AppWrapper } from 'App'
|
|
import { NavigationCheck } from 'components/NavigationCheck/NavigationCheck'
|
|
import { CodeCommentStatusButton } from 'components/CodeCommentStatusButton/CodeCommentStatusButton'
|
|
import { CodeCommentSecondarySaveButton } from 'components/CodeCommentSecondarySaveButton/CodeCommentSecondarySaveButton'
|
|
import { CodeCommentStatusSelect } from 'components/CodeCommentStatusSelect/CodeCommentStatusSelect'
|
|
import {
|
|
activitiesToDiffCommentItems,
|
|
activityToCommentItem,
|
|
CommentType,
|
|
DIFF2HTML_CONFIG,
|
|
DiffCommentItem,
|
|
DIFF_VIEWER_HEADER_HEIGHT,
|
|
getCommentLineInfo,
|
|
createCommentOppositePlaceHolder,
|
|
ViewStyle,
|
|
contentDOMHasData
|
|
} from './DiffViewerUtils'
|
|
import { CommentAction, CommentBox, CommentBoxOutletPosition, CommentItem } from '../CommentBox/CommentBox'
|
|
import css from './DiffViewer.module.scss'
|
|
|
|
interface DiffViewerProps extends Pick<GitInfoProps, 'repoMetadata'> {
|
|
diff: DiffFileEntry
|
|
viewStyle: ViewStyle
|
|
stickyTopPosition?: number
|
|
readOnly?: boolean
|
|
pullRequestMetadata?: TypesPullReq
|
|
onCommentUpdate: () => void
|
|
targetRef?: string
|
|
sourceRef?: string
|
|
commitRange?: string[]
|
|
scrollElement: HTMLElement
|
|
}
|
|
|
|
//
|
|
// Note: Lots of direct DOM manipulations are used to boost performance.
|
|
// Avoid React re-rendering at all cost as it might cause unresponsive UI
|
|
// when diff content is big, or when a PR has a lot of changed files.
|
|
//
|
|
export const DiffViewer: React.FC<DiffViewerProps> = ({
|
|
diff,
|
|
viewStyle,
|
|
stickyTopPosition = 0,
|
|
readOnly,
|
|
repoMetadata,
|
|
pullRequestMetadata,
|
|
onCommentUpdate,
|
|
targetRef,
|
|
sourceRef,
|
|
commitRange,
|
|
scrollElement
|
|
}) => {
|
|
const { routes } = useAppContext()
|
|
const { getString } = useStrings()
|
|
const viewedPath = useMemo(
|
|
() => `/api/v1/repos/${repoMetadata.path}/+/pullreq/${pullRequestMetadata?.number}/file-views`,
|
|
[repoMetadata.path, pullRequestMetadata?.number]
|
|
)
|
|
const { mutate: markViewed } = useMutate({ verb: 'PUT', path: viewedPath })
|
|
const { mutate: unmarkViewed } = useMutate({ verb: 'DELETE', path: ({ filePath }) => `${viewedPath}/${filePath}` })
|
|
|
|
// file viewed feature is only enabled if no commit range is provided (otherwise component is hidden, too)
|
|
const [viewed, setViewed] = useState(
|
|
commitRange?.length === 0 && diff.fileViews?.get(diff.filePath) === diff.checksumAfter
|
|
)
|
|
useEffect(() => {
|
|
if (commitRange?.length === 0) {
|
|
setViewed(diff.fileViews?.get(diff.filePath) === diff.checksumAfter)
|
|
}
|
|
}, [diff.fileViews, diff.filePath, diff.checksumAfter, commitRange])
|
|
|
|
const [collapsed, setCollapsed] = useState(viewed)
|
|
useEffect(() => {
|
|
setCollapsed(viewed)
|
|
}, [viewed])
|
|
const [fileUnchanged] = useState(diff.unchangedPercentage === 100)
|
|
const [fileDeleted] = useState(diff.isDeleted)
|
|
const [renderCustomContent, setRenderCustomContent] = useState(fileUnchanged || fileDeleted)
|
|
const [diffRenderer, setDiffRenderer] = useState<Diff2HtmlUI>()
|
|
const { ref: inViewRef, inView } = useInView({ rootMargin: '100px 0px' })
|
|
const containerRef = useRef<HTMLDivElement | null>(null)
|
|
const { currentUser, standalone } = useAppContext()
|
|
const { showError } = useToaster()
|
|
const confirmAct = useConfirmAct()
|
|
const commentPath = useMemo(
|
|
() => `/api/v1/repos/${repoMetadata.path}/+/pullreq/${pullRequestMetadata?.number}/comments`,
|
|
[repoMetadata.path, pullRequestMetadata?.number]
|
|
)
|
|
const { mutate: saveComment } = useMutate({ verb: 'POST', path: commentPath })
|
|
const { mutate: updateComment } = useMutate({ verb: 'PATCH', path: ({ id }) => `${commentPath}/${id}` })
|
|
const { mutate: deleteComment } = useMutate({ verb: 'DELETE', path: ({ id }) => `${commentPath}/${id}` })
|
|
|
|
const [comments, _setComments] = useState<DiffCommentItem<TypesPullReqActivity>[]>([])
|
|
function setComments(c: DiffCommentItem<TypesPullReqActivity>[]) {
|
|
// no changes in comments? nothing to do
|
|
// NOTE: we only react to new comments as of now, not changes on existing comments or replies, so that's good enough
|
|
if (c.length == comments.length) {
|
|
return
|
|
}
|
|
|
|
_setComments(c)
|
|
triggerCodeCommentRendering()
|
|
}
|
|
// use separate flag for monitoring comment rendering as opposed to updating comments to void spamming comment changes
|
|
const [renderComments, _setRenderComments] = useState(0)
|
|
const commitRefs = useRef<{ sourceRef?: string; targetRef?: string }>({ sourceRef, targetRef })
|
|
|
|
function triggerCodeCommentRendering() {
|
|
_setRenderComments(Date.now())
|
|
}
|
|
|
|
useMemo(() => {
|
|
triggerCodeCommentRendering()
|
|
}, [viewStyle, inView, commitRange])
|
|
|
|
const [dirty, setDirty] = useState(false)
|
|
const commentsRef = useRef<DiffCommentItem<TypesPullReqActivity>[]>(comments)
|
|
const setContainerRef = useCallback(
|
|
node => {
|
|
containerRef.current = node
|
|
inViewRef(node)
|
|
},
|
|
[inViewRef]
|
|
)
|
|
const contentRef = useRef<HTMLDivElement>(null)
|
|
const setupViewerInitialStates = useCallback(() => {
|
|
setDiffRenderer(
|
|
new Diff2HtmlUI(
|
|
document.getElementById(diff.contentId) as HTMLElement,
|
|
[diff],
|
|
Object.assign({}, DIFF2HTML_CONFIG, { outputFormat: viewStyle })
|
|
)
|
|
)
|
|
}, [diff, viewStyle])
|
|
const renderDiffAndUpdateContainerHeightIfNeeded = useCallback(
|
|
(enforced = false) => {
|
|
const contentDOM = contentRef.current as HTMLDivElement
|
|
const containerDOM = containerRef.current as HTMLDivElement
|
|
|
|
if (!contentDOM.dataset.rendered || enforced) {
|
|
if (!renderCustomContent || enforced) {
|
|
containerDOM.style.height = 'auto'
|
|
diffRenderer?.draw()
|
|
triggerCodeCommentRendering()
|
|
}
|
|
|
|
contentDOM.dataset.rendered = 'true'
|
|
}
|
|
},
|
|
[diffRenderer, renderCustomContent]
|
|
)
|
|
|
|
useEffect(() => {
|
|
// no activities or commit range view? no comments!
|
|
if (!diff?.fileActivities || (commitRange?.length || 0) > 0) {
|
|
setComments([])
|
|
return
|
|
}
|
|
const _comments = activitiesToDiffCommentItems(diff)
|
|
if (_comments.length > 0) {
|
|
setComments(_comments)
|
|
}
|
|
}, [diff?.fileActivities, diff?.fileActivities?.length, commitRange])
|
|
|
|
useEffect(
|
|
function createDiffRenderer() {
|
|
if (inView && !diffRenderer) {
|
|
setupViewerInitialStates()
|
|
}
|
|
},
|
|
[inView, diffRenderer, setupViewerInitialStates]
|
|
)
|
|
|
|
useEffect(
|
|
function renderInitialContent() {
|
|
if (diffRenderer && inView) {
|
|
renderDiffAndUpdateContainerHeightIfNeeded()
|
|
}
|
|
},
|
|
[inView, diffRenderer, renderDiffAndUpdateContainerHeightIfNeeded]
|
|
)
|
|
|
|
useEffect(() => {
|
|
commitRefs.current = { sourceRef, targetRef }
|
|
}, [sourceRef, targetRef])
|
|
|
|
useEffect(
|
|
function handleCollapsedState() {
|
|
const containerDOM = containerRef.current as HTMLDivElement & { scrollIntoViewIfNeeded: () => void }
|
|
const { classList: containerClassList, style: containerStyle } = containerDOM
|
|
|
|
if (collapsed) {
|
|
containerClassList.add(css.collapsed)
|
|
|
|
// Fix scrolling position messes up with sticky header: When content of the diff content
|
|
// is above the diff header, we need to scroll it back to below the header, adjust window
|
|
// scrolling position to avoid the next diff scroll jump
|
|
const { y } = containerDOM.getBoundingClientRect()
|
|
if (y - stickyTopPosition < 1) {
|
|
containerDOM.scrollIntoView()
|
|
|
|
if (stickyTopPosition) {
|
|
scrollElement.scroll({ top: scrollElement.scrollTop - stickyTopPosition })
|
|
}
|
|
}
|
|
|
|
if (parseInt(containerStyle.height) != DIFF_VIEWER_HEADER_HEIGHT) {
|
|
containerStyle.height = `${DIFF_VIEWER_HEADER_HEIGHT}px`
|
|
}
|
|
} else {
|
|
containerClassList.remove(css.collapsed)
|
|
|
|
const newHeight = Number(containerDOM.scrollHeight)
|
|
if (parseInt(containerStyle.height) != newHeight) {
|
|
containerStyle.height = `${newHeight}px`
|
|
}
|
|
}
|
|
},
|
|
[collapsed, stickyTopPosition]
|
|
)
|
|
|
|
useEventListener(
|
|
'click',
|
|
useCallback(
|
|
function clickToAddAnnotation(event: MouseEvent) {
|
|
if (readOnly) {
|
|
return
|
|
}
|
|
|
|
const target = event.target as HTMLDivElement
|
|
const targetButton = target?.closest('[data-annotation-for-line]') as HTMLDivElement
|
|
const annotatedLineRow = targetButton?.closest('tr') as HTMLTableRowElement
|
|
|
|
const commentItem: DiffCommentItem<TypesPullReqActivity> = {
|
|
left: false,
|
|
right: false,
|
|
lineNumber: 0,
|
|
height: 0,
|
|
commentItems: [],
|
|
filePath: ''
|
|
}
|
|
|
|
if (targetButton && annotatedLineRow) {
|
|
if (viewStyle === ViewStyle.SIDE_BY_SIDE) {
|
|
const leftParent = targetButton.closest('.d2h-file-side-diff.left')
|
|
commentItem.left = !!leftParent
|
|
commentItem.right = !leftParent
|
|
commentItem.lineNumber = Number(targetButton.dataset.annotationForLine)
|
|
} else {
|
|
const lineInfoTD = targetButton.closest('td')?.previousElementSibling
|
|
const lineNum1 = lineInfoTD?.querySelector('.line-num1')
|
|
const lineNum2 = lineInfoTD?.querySelector('.line-num2')
|
|
|
|
// Right has priority
|
|
commentItem.right = !!lineNum2?.textContent
|
|
commentItem.left = !commentItem.right
|
|
commentItem.lineNumber = Number(lineNum2?.textContent || lineNum1?.textContent)
|
|
}
|
|
setComments([...comments, commentItem])
|
|
}
|
|
},
|
|
[viewStyle, readOnly]
|
|
),
|
|
containerRef.current as HTMLDivElement
|
|
)
|
|
|
|
useEffect(
|
|
function renderCodeComments() {
|
|
if (readOnly) {
|
|
return
|
|
}
|
|
|
|
// early exit if there's nothing to render on
|
|
if (!contentRef.current || !contentDOMHasData(contentRef.current)) {
|
|
return
|
|
}
|
|
|
|
const isSideBySide = viewStyle === ViewStyle.SIDE_BY_SIDE
|
|
|
|
// Update latest commentsRef to use it inside CommentBox callbacks
|
|
commentsRef.current = comments
|
|
|
|
comments.forEach(comment => {
|
|
const lineInfo = getCommentLineInfo(contentRef.current, comment, viewStyle)
|
|
|
|
// TODO: add support for live updating changes and replies to comment!
|
|
if (!lineInfo.rowElement || lineInfo.hasCommentsRendered) {
|
|
return
|
|
}
|
|
const { rowElement } = lineInfo
|
|
|
|
// Mark row that it has comment/annotation
|
|
rowElement.dataset.annotated = 'true'
|
|
|
|
// always create placeholder (in memory)
|
|
const oppositeRowPlaceHolder = createCommentOppositePlaceHolder(comment)
|
|
|
|
// in split view, actually attach the placeholder
|
|
if (isSideBySide && lineInfo.oppositeRowElement != null) {
|
|
lineInfo.oppositeRowElement.after(oppositeRowPlaceHolder)
|
|
}
|
|
|
|
// Create a new row below it and render CommentBox inside
|
|
const commentRowElement = document.createElement('tr')
|
|
commentRowElement.dataset.annotatedLine = String(comment.lineNumber)
|
|
commentRowElement.innerHTML = `<td colspan="2"></td>`
|
|
rowElement.after(commentRowElement)
|
|
|
|
const element = commentRowElement.firstElementChild as HTMLTableCellElement
|
|
const resetCommentState = () => {
|
|
// Clean up CommentBox rendering and reset states bound to lineInfo
|
|
ReactDOM.unmountComponentAtNode(element as HTMLDivElement)
|
|
commentRowElement.parentElement?.removeChild(commentRowElement)
|
|
lineInfo.oppositeRowElement?.parentElement?.removeChild(oppositeRowPlaceHolder as Element)
|
|
delete lineInfo.rowElement.dataset.annotated
|
|
|
|
setComments(
|
|
commentsRef.current.filter(item => {
|
|
return item !== comment
|
|
})
|
|
)
|
|
}
|
|
|
|
// Note: CommentBox is rendered as an independent React component
|
|
// everything passed to it must be either values, or refs. If you
|
|
// pass callbacks or states, they won't be updated and might
|
|
// cause unexpected bugs
|
|
ReactDOM.unmountComponentAtNode(element as HTMLDivElement)
|
|
ReactDOM.render(
|
|
<AppWrapper>
|
|
<CommentBox
|
|
commentItems={comment.commentItems}
|
|
initialContent={''}
|
|
width={isSideBySide ? 'calc(100vw / 2 - 163px)' : undefined} // TODO: Re-calcualte for standalone version
|
|
onHeightChange={boxHeight => {
|
|
const first = oppositeRowPlaceHolder?.firstElementChild as HTMLTableCellElement
|
|
const last = oppositeRowPlaceHolder?.lastElementChild as HTMLTableCellElement
|
|
if (first && last) {
|
|
first.style.height = `${boxHeight}px`
|
|
last.style.height = `${boxHeight}px`
|
|
}
|
|
}}
|
|
onCancel={resetCommentState}
|
|
setDirty={setDirty}
|
|
currentUserName={currentUser.display_name}
|
|
handleAction={async (action, value, commentItem) => {
|
|
let result = true
|
|
let updatedItem: CommentItem<TypesPullReqActivity> | undefined = undefined
|
|
const id = (commentItem as CommentItem<TypesPullReqActivity>)?.payload?.id
|
|
|
|
switch (action) {
|
|
case CommentAction.NEW: {
|
|
const payload: OpenapiCommentCreatePullReqRequest = {
|
|
line_start: comment.lineNumber,
|
|
line_end: comment.lineNumber,
|
|
line_start_new: !comment.left,
|
|
line_end_new: !comment.left,
|
|
path: diff.filePath,
|
|
source_commit_sha: commitRefs.current.sourceRef,
|
|
target_commit_sha: commitRefs.current.targetRef,
|
|
text: value
|
|
}
|
|
|
|
await saveComment(payload)
|
|
.then((newComment: TypesPullReqActivity) => {
|
|
updatedItem = activityToCommentItem(newComment)
|
|
|
|
// remove item (to refresh all comment refrences and remove it from rendering)
|
|
resetCommentState()
|
|
|
|
// add comment to file activities (will re-create comments and render new one)
|
|
diff.fileActivities?.push(newComment)
|
|
})
|
|
.catch(exception => {
|
|
result = false
|
|
showError(getErrorMessage(exception), 0)
|
|
})
|
|
break
|
|
}
|
|
|
|
case CommentAction.REPLY: {
|
|
await saveComment({
|
|
type: CommentType.CODE_COMMENT,
|
|
text: value,
|
|
parent_id: Number(commentItem?.payload?.id as number)
|
|
})
|
|
.then(newComment => {
|
|
updatedItem = activityToCommentItem(newComment)
|
|
diff.fileActivities?.push(newComment)
|
|
})
|
|
.catch(exception => {
|
|
result = false
|
|
showError(getErrorMessage(exception), 0)
|
|
})
|
|
break
|
|
}
|
|
|
|
case CommentAction.DELETE: {
|
|
result = false
|
|
await confirmAct({
|
|
message: getString('deleteCommentConfirm'),
|
|
action: async () => {
|
|
await deleteComment({}, { pathParams: { id } })
|
|
.then(() => {
|
|
result = true
|
|
})
|
|
.catch(exception => {
|
|
result = false
|
|
showError(getErrorMessage(exception), 0, getString('pr.failedToDeleteComment'))
|
|
})
|
|
}
|
|
})
|
|
break
|
|
}
|
|
|
|
case CommentAction.UPDATE: {
|
|
await updateComment({ text: value }, { pathParams: { id } })
|
|
.then(newComment => {
|
|
updatedItem = activityToCommentItem(newComment)
|
|
})
|
|
.catch(exception => {
|
|
result = false
|
|
showError(getErrorMessage(exception), 0)
|
|
})
|
|
break
|
|
}
|
|
}
|
|
|
|
if (result) {
|
|
onCommentUpdate()
|
|
}
|
|
|
|
return [result, updatedItem]
|
|
}}
|
|
outlets={{
|
|
[CommentBoxOutletPosition.LEFT_OF_OPTIONS_MENU]: (
|
|
<CodeCommentStatusSelect
|
|
repoMetadata={repoMetadata}
|
|
pullRequestMetadata={pullRequestMetadata as TypesPullReq}
|
|
onCommentUpdate={onCommentUpdate}
|
|
commentItems={comment.commentItems}
|
|
/>
|
|
),
|
|
[CommentBoxOutletPosition.LEFT_OF_REPLY_PLACEHOLDER]: (
|
|
<CodeCommentStatusButton
|
|
repoMetadata={repoMetadata}
|
|
pullRequestMetadata={pullRequestMetadata as TypesPullReq}
|
|
onCommentUpdate={onCommentUpdate}
|
|
commentItems={comment.commentItems}
|
|
/>
|
|
),
|
|
[CommentBoxOutletPosition.BETWEEN_SAVE_AND_CANCEL_BUTTONS]: (props: ButtonProps) => (
|
|
<CodeCommentSecondarySaveButton
|
|
repoMetadata={repoMetadata}
|
|
pullRequestMetadata={pullRequestMetadata as TypesPullReq}
|
|
commentItems={comment.commentItems}
|
|
{...props}
|
|
/>
|
|
)
|
|
}}
|
|
autoFocusAndPositioning
|
|
/>
|
|
</AppWrapper>,
|
|
element
|
|
)
|
|
})
|
|
},
|
|
[renderComments]
|
|
)
|
|
|
|
useEffect(function cleanUpCommentBoxRendering() {
|
|
const contentDOM = contentRef.current
|
|
return () => {
|
|
contentDOM
|
|
?.querySelectorAll('[data-annotated-line]')
|
|
.forEach(element => ReactDOM.unmountComponentAtNode(element.firstElementChild as HTMLTableCellElement))
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<Container
|
|
ref={setContainerRef}
|
|
id={diff.containerId}
|
|
className={cx(css.main, { [css.readOnly]: readOnly })}
|
|
style={{ '--diff-viewer-sticky-top': `${stickyTopPosition}px` } as React.CSSProperties}>
|
|
<Layout.Vertical>
|
|
<Container className={css.diffHeader} height={DIFF_VIEWER_HEADER_HEIGHT}>
|
|
<Layout.Horizontal>
|
|
<Button
|
|
variation={ButtonVariation.ICON}
|
|
icon={collapsed ? 'main-chevron-right' : 'main-chevron-down'}
|
|
size={ButtonSize.SMALL}
|
|
onClick={() => setCollapsed(!collapsed)}
|
|
iconProps={{
|
|
size: 10,
|
|
style: {
|
|
color: '#383946',
|
|
flexGrow: 1,
|
|
justifyContent: 'center',
|
|
display: 'flex'
|
|
}
|
|
}}
|
|
className={css.chevron}
|
|
/>
|
|
<Text inline className={css.fname}>
|
|
<Link
|
|
to={routes.toCODERepository({
|
|
repoPath: repoMetadata.path as string,
|
|
gitRef: pullRequestMetadata?.source_branch,
|
|
resourcePath: diff.isRename ? diff.newName : diff.filePath
|
|
})}>
|
|
{diff.isRename ? `${diff.oldName} -> ${diff.newName}` : diff.filePath}
|
|
</Link>
|
|
<CopyButton content={diff.filePath} icon={CodeIcon.Copy} size={ButtonSize.SMALL} />
|
|
</Text>
|
|
<Container style={{ alignSelf: 'center' }} padding={{ left: 'small' }}>
|
|
<Layout.Horizontal spacing="xsmall">
|
|
<Render when={diff.addedLines || diff.isNew}>
|
|
<Text tag="span" className={css.addedLines}>
|
|
+{diff.addedLines || 0}
|
|
</Text>
|
|
</Render>
|
|
<Render when={diff.deletedLines || diff.isDeleted}>
|
|
<Text tag="span" className={css.deletedLines}>
|
|
-{diff.deletedLines || 0}
|
|
</Text>
|
|
</Render>
|
|
</Layout.Horizontal>
|
|
</Container>
|
|
<FlexExpander />
|
|
|
|
<Render
|
|
when={
|
|
!readOnly &&
|
|
commitRange?.length === 0 &&
|
|
diff.fileViews?.get(diff.filePath) !== undefined &&
|
|
diff.fileViews?.get(diff.filePath) !== diff.checksumAfter
|
|
}>
|
|
<Container>
|
|
<Text className={css.fileChanged}>{getString('changedSinceLastView')}</Text>
|
|
</Container>
|
|
</Render>
|
|
|
|
<Render when={!readOnly && commitRange?.length === 0}>
|
|
<Container>
|
|
<label className={css.viewLabel}>
|
|
<Checkbox
|
|
checked={viewed}
|
|
onChange={async () => {
|
|
if (viewed) {
|
|
setViewed(false)
|
|
|
|
// update local data first
|
|
diff.fileViews?.delete(diff.filePath)
|
|
|
|
// best effort attempt to recflect on server (swallow exception - user still sees correct data locally)
|
|
await unmarkViewed(null, { pathParams: { filePath: diff.filePath } }).catch(() => {})
|
|
} else {
|
|
setViewed(true)
|
|
|
|
// update local data first
|
|
// we could wait for server response for the guaranteed correct SHA, but this is non-crucial data so it's okay
|
|
diff.fileViews?.set(diff.filePath, diff.checksumAfter || 'unknown')
|
|
|
|
// best effort attempt to recflect on server (swallow exception - user still sees correct data locally)
|
|
await markViewed(
|
|
{
|
|
path: diff.filePath,
|
|
commit_sha: pullRequestMetadata?.source_sha
|
|
},
|
|
{}
|
|
).catch(() => {})
|
|
}
|
|
}}
|
|
/>
|
|
{getString('viewed')}
|
|
</label>
|
|
</Container>
|
|
</Render>
|
|
</Layout.Horizontal>
|
|
</Container>
|
|
|
|
<Container
|
|
id={diff.contentId}
|
|
className={cx(css.diffContent, { [css.standalone]: standalone })}
|
|
ref={contentRef}>
|
|
<Render when={renderCustomContent}>
|
|
<Container>
|
|
<Layout.Vertical padding="xlarge" style={{ alignItems: 'center' }}>
|
|
<Render when={fileDeleted}>
|
|
<Button
|
|
variation={ButtonVariation.LINK}
|
|
onClick={() => {
|
|
setRenderCustomContent(false)
|
|
setTimeout(() => renderDiffAndUpdateContainerHeightIfNeeded(true), 0)
|
|
}}>
|
|
{getString('pr.showDiff')}
|
|
</Button>
|
|
</Render>
|
|
<Text>{getString(fileDeleted ? 'pr.fileDeleted' : 'pr.fileUnchanged')}</Text>
|
|
</Layout.Vertical>
|
|
</Container>
|
|
</Render>
|
|
</Container>
|
|
</Layout.Vertical>
|
|
<NavigationCheck when={dirty} />
|
|
</Container>
|
|
)
|
|
}
|