feat(diff): Enable commenting on expanded lines in PR diffs (#35662)

Fixes #32257 
/claim #32257

Implemented commenting on unchanged lines in Pull Request diffs, lines
are accessed by expanding the diff preview. Comments also appear in the
"Files Changed" tab on the unchanged lines where they were placed.

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
Bryan Mutai
2025-10-19 13:19:12 +03:00
committed by GitHub
parent 2d36a0c9ff
commit c30d74d0f9
13 changed files with 753 additions and 138 deletions

View File

@@ -1,28 +1,10 @@
{{$blobExcerptLink := print $.RepoLink (Iif $.PageIsWiki "/wiki" "") "/blob_excerpt/" (PathEscape $.AfterCommitID) (QueryBuild "?" "anchor" $.Anchor)}}
{{$diffBlobExcerptData := .DiffBlobExcerptData}}
{{$canCreateComment := and ctx.RootData.SignedUserID $diffBlobExcerptData.PullIssueIndex}}
{{if $.IsSplitStyle}}
{{range $k, $line := $.section.Lines}}
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}} line-expanded">
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}} line-expanded" data-line-type="{{.GetHTMLDiffLineType}}">
{{if eq .GetType 4}}
{{$expandDirection := $line.GetExpandDirection}}
<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}">
<div class="code-expander-buttons" data-expand-direction="{{$expandDirection}}">
{{if or (eq $expandDirection 3) (eq $expandDirection 5)}}
<button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptLink}}&{{$line.GetBlobExcerptQuery}}&style=split&direction=down">
{{svg "octicon-fold-down"}}
</button>
{{end}}
{{if or (eq $expandDirection 3) (eq $expandDirection 4)}}
<button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptLink}}&{{$line.GetBlobExcerptQuery}}&style=split&direction=up">
{{svg "octicon-fold-up"}}
</button>
{{end}}
{{if eq $expandDirection 2}}
<button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptLink}}&{{$line.GetBlobExcerptQuery}}&style=split">
{{svg "octicon-fold"}}
</button>
{{end}}
</div>
</td>
<td class="lines-num lines-num-old">{{$line.RenderBlobExcerptButtons $.FileNameHash $diffBlobExcerptData}}</td>
<td colspan="7" class="lines-code lines-code-old">
{{- $inlineDiff := $.section.GetComputedInlineDiffFor $line ctx.Locale -}}
{{- template "repo/diff/section_code" dict "diff" $inlineDiff -}}
@@ -33,6 +15,12 @@
<td class="lines-escape lines-escape-old">{{if and $line.LeftIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff}}"></button>{{end}}</td>
<td class="lines-type-marker lines-type-marker-old">{{if $line.LeftIdx}}<span class="tw-font-mono" data-type-marker=""></span>{{end}}</td>
<td class="lines-code lines-code-old">
{{/* ATTENTION: BLOB-EXCERPT-COMMENT-RIGHT: here it intentially use "right" side to comment, because the backend code depends on the assumption that the comment only happens on right side*/}}
{{- if and $canCreateComment $line.RightIdx -}}
<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-right{{if (not $line.CanComment)}} tw-invisible{{end}}" data-side="right" data-idx="{{$line.RightIdx}}">
{{- svg "octicon-plus" -}}
</button>
{{- end -}}
{{- if $line.LeftIdx -}}
{{- template "repo/diff/section_code" dict "diff" $inlineDiff -}}
{{- else -}}
@@ -43,6 +31,11 @@
<td class="lines-escape lines-escape-new">{{if and $line.RightIdx $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff}}"></button>{{end}}</td>
<td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="tw-font-mono" data-type-marker=""></span>{{end}}</td>
<td class="lines-code lines-code-new">
{{- if and $canCreateComment $line.RightIdx -}}
<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-right{{if (not $line.CanComment)}} tw-invisible{{end}}" data-side="right" data-idx="{{$line.RightIdx}}">
{{- svg "octicon-plus" -}}
</button>
{{- end -}}
{{- if $line.RightIdx -}}
{{- template "repo/diff/section_code" dict "diff" $inlineDiff -}}
{{- else -}}
@@ -51,31 +44,26 @@
</td>
{{end}}
</tr>
{{if $line.Comments}}
<tr class="add-comment" data-line-type="{{.GetHTMLDiffLineType}}">
<td class="add-comment-left" colspan="4">
{{if eq $line.GetCommentSide "previous"}}
{{template "repo/diff/conversation" dict "." $ "comments" $line.Comments}}
{{end}}
</td>
<td class="add-comment-right" colspan="4">
{{if eq $line.GetCommentSide "proposed"}}
{{template "repo/diff/conversation" dict "." $ "comments" $line.Comments}}
{{end}}
</td>
</tr>
{{end}}
{{end}}
{{else}}
{{range $k, $line := $.section.Lines}}
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}} line-expanded">
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}} line-expanded" data-line-type="{{.GetHTMLDiffLineType}}">
{{if eq .GetType 4}}
{{$expandDirection := $line.GetExpandDirection}}
<td colspan="2" class="lines-num">
<div class="code-expander-buttons" data-expand-direction="{{$expandDirection}}">
{{if or (eq $expandDirection 3) (eq $expandDirection 5)}}
<button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptLink}}&{{$line.GetBlobExcerptQuery}}&style=unified&direction=down">
{{svg "octicon-fold-down"}}
</button>
{{end}}
{{if or (eq $expandDirection 3) (eq $expandDirection 4)}}
<button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptLink}}&{{$line.GetBlobExcerptQuery}}&style=unified&direction=up">
{{svg "octicon-fold-up"}}
</button>
{{end}}
{{if eq $expandDirection 2}}
<button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptLink}}&{{$line.GetBlobExcerptQuery}}&style=unified">
{{svg "octicon-fold"}}
</button>
{{end}}
</div>
</td>
<td colspan="2" class="lines-num">{{$line.RenderBlobExcerptButtons $.FileNameHash $diffBlobExcerptData}}</td>
{{else}}
<td class="lines-num lines-num-old" data-line-num="{{if $line.LeftIdx}}{{$line.LeftIdx}}{{end}}"><span rel="{{if $line.LeftIdx}}diff-{{$.FileNameHash}}L{{$line.LeftIdx}}{{end}}"></span></td>
<td class="lines-num lines-num-new" data-line-num="{{if $line.RightIdx}}{{$line.RightIdx}}{{end}}"><span rel="{{if $line.RightIdx}}diff-{{$.FileNameHash}}R{{$line.RightIdx}}{{end}}"></span></td>
@@ -83,7 +71,21 @@
{{$inlineDiff := $.section.GetComputedInlineDiffFor $line ctx.Locale}}
<td class="lines-escape">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff}}"></button>{{end}}</td>
<td class="lines-type-marker"><span class="tw-font-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span></td>
<td class="lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}"><code {{if $inlineDiff.EscapeStatus.Escaped}}class="code-inner has-escaped" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff}}"{{else}}class="code-inner"{{end}}>{{$inlineDiff.Content}}</code></td>
<td class="lines-code{{if (not $line.RightIdx)}} lines-code-old{{end}}">
{{- if and $canCreateComment -}}
<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-{{if $line.RightIdx}}right{{else}}left{{end}}{{if (not $line.CanComment)}} tw-invisible{{end}}" data-side="{{if $line.RightIdx}}right{{else}}left{{end}}" data-idx="{{if $line.RightIdx}}{{$line.RightIdx}}{{else}}{{$line.LeftIdx}}{{end}}">
{{- svg "octicon-plus" -}}
</button>
{{- end -}}
<code {{if $inlineDiff.EscapeStatus.Escaped}}class="code-inner has-escaped" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff}}"{{else}}class="code-inner"{{end}}>{{$inlineDiff.Content}}</code>
</td>
</tr>
{{if $line.Comments}}
<tr class="add-comment" data-line-type="{{.GetHTMLDiffLineType}}">
<td class="add-comment-left add-comment-right" colspan="5">
{{template "repo/diff/conversation" dict "." $ "comments" $line.Comments}}
</td>
</tr>
{{end}}
{{end}}
{{end}}

View File

@@ -1,5 +1,5 @@
{{$file := .file}}
{{$blobExcerptLink := print (or ctx.RootData.CommitRepoLink ctx.RootData.RepoLink) (Iif $.root.PageIsWiki "/wiki" "") "/blob_excerpt/" (PathEscape $.root.AfterCommitID) "?"}}
{{$diffBlobExcerptData := $.root.DiffBlobExcerptData}}
<colgroup>
<col width="50">
<col width="10">
@@ -16,26 +16,8 @@
{{if or (ne .GetType 2) (not $hasmatch)}}
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}}" data-line-type="{{.GetHTMLDiffLineType}}">
{{if eq .GetType 4}}
{{$expandDirection := $line.GetExpandDirection}}
<td class="lines-num lines-num-old">
<div class="code-expander-buttons" data-expand-direction="{{$expandDirection}}">
{{if or (eq $expandDirection 3) (eq $expandDirection 5)}}
<button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptLink}}&{{$line.GetBlobExcerptQuery}}&style=split&direction=down&&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
{{svg "octicon-fold-down"}}
</button>
{{end}}
{{if or (eq $expandDirection 3) (eq $expandDirection 4)}}
<button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptLink}}&{{$line.GetBlobExcerptQuery}}&style=split&direction=up&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
{{svg "octicon-fold-up"}}
</button>
{{end}}
{{if eq $expandDirection 2}}
<button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptLink}}&{{$line.GetBlobExcerptQuery}}&style=split&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
{{svg "octicon-fold"}}
</button>
{{end}}
</div>
</td>{{$inlineDiff := $section.GetComputedInlineDiffFor $line ctx.Locale}}
{{$inlineDiff := $section.GetComputedInlineDiffFor $line ctx.Locale}}
<td class="lines-num lines-num-old">{{$line.RenderBlobExcerptButtons $file.NameHash $diffBlobExcerptData}}</td>
<td class="lines-escape lines-escape-old">{{if $inlineDiff.EscapeStatus.Escaped}}<button class="toggle-escape-button btn interact-bg" title="{{template "repo/diff/escape_title" dict "diff" $inlineDiff}}"></button>{{end}}</td>
<td colspan="6" class="lines-code lines-code-old">{{template "repo/diff/section_code" dict "diff" $inlineDiff}}</td>
{{else if and (eq .GetType 3) $hasmatch}}{{/* DEL */}}

View File

@@ -1,7 +1,6 @@
{{$file := .file}}
{{$repoLink := or ctx.RootData.CommitRepoLink ctx.RootData.RepoLink}}
{{$afterCommitID := or $.root.AfterCommitID "no-after-commit-id"}}{{/* this tmpl is also used by the PR Conversation page, so the "AfterCommitID" may not exist */}}
{{$blobExcerptLink := print $repoLink (Iif $.root.PageIsWiki "/wiki" "") "/blob_excerpt/" (PathEscape $afterCommitID) "?"}}
{{/* this tmpl is also used by the PR Conversation page, so the "AfterCommitID" and "DiffBlobExcerptData" may not exist */}}
{{$diffBlobExcerptData := $.root.DiffBlobExcerptData}}
<colgroup>
<col width="50">
<col width="50">
@@ -14,26 +13,7 @@
<tr class="{{.GetHTMLDiffLineType}}-code nl-{{$k}} ol-{{$k}}" data-line-type="{{.GetHTMLDiffLineType}}">
{{if eq .GetType 4}}
{{if $.root.AfterCommitID}}
{{$expandDirection := $line.GetExpandDirection}}
<td colspan="2" class="lines-num">
<div class="code-expander-buttons" data-expand-direction="{{$expandDirection}}">
{{if or (eq $expandDirection 3) (eq $expandDirection 5)}}
<button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptLink}}&{{$line.GetBlobExcerptQuery}}&style=unified&direction=down&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
{{svg "octicon-fold-down"}}
</button>
{{end}}
{{if or (eq $expandDirection 3) (eq $expandDirection 4)}}
<button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptLink}}&{{$line.GetBlobExcerptQuery}}&style=unified&direction=up&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
{{svg "octicon-fold-up"}}
</button>
{{end}}
{{if eq $expandDirection 2}}
<button class="code-expander-button" hx-target="closest tr" hx-get="{{$blobExcerptLink}}&{{$line.GetBlobExcerptQuery}}&style=unified&anchor=diff-{{$file.NameHash}}K{{$line.SectionInfo.RightIdx}}">
{{svg "octicon-fold"}}
</button>
{{end}}
</div>
</td>
<td colspan="2" class="lines-num">{{$line.RenderBlobExcerptButtons $file.NameHash $diffBlobExcerptData}}</td>
{{else}}
{{/* for code file preview page or comment diffs on pull comment pages, do not show the expansion arrows */}}
<td colspan="2" class="lines-num"></td>

View File

@@ -1,3 +1,8 @@
{{/* FIXME: DIFF-CONVERSATION-DATA: in the future this template should be refactor to avoid called by {{... "." $}}
At the moment, two kinds of request handler call this template:
* ExcerptBlob -> blob_excerpt.tmpl -> this
* Other compare and diff pages -> ... -> {section_unified.tmpl|section_split.tmpl} -> this)
The variables in "ctx.Data" are different in each case, making this template fragile, hard to read and maintain. */}}
{{if len .comments}}
{{$comment := index .comments 0}}
{{$invalid := $comment.Invalidated}}