Multiple GitGraph improvements: Exclude PR heads, Add branch/PR links, Show only certain branches, (#12766)

* Multiple GitGraph improvements.

Add backend support for excluding PRs, selecting branches and files.

Fix #10327

Signed-off-by: Andrew Thornton <art27@cantab.net>

* as per @silverwind

Signed-off-by: Andrew Thornton <art27@cantab.net>

* as per @silverwind

Signed-off-by: Andrew Thornton <art27@cantab.net>

* Only show refs in dropdown we display on the graph

Signed-off-by: Andrew Thornton <art27@cantab.net>

* as per @silverwind

Signed-off-by: Andrew Thornton <art27@cantab.net>

* use flexbox for ui header

Signed-off-by: Andrew Thornton <art27@cantab.net>

* Move Hide Pull Request button to the dropdown

Signed-off-by: Andrew Thornton <art27@cantab.net>

* Add SHA and user pictures

Signed-off-by: Andrew Thornton <art27@cantab.net>

* fix test

Signed-off-by: Andrew Thornton <art27@cantab.net>

* fix test 2

Signed-off-by: Andrew Thornton <art27@cantab.net>

* fixes

* async

* more tweaks

* use tabs in tmpl

Signed-off-by: Andrew Thornton <art27@cantab.net>

* remove commented thing

Signed-off-by: Andrew Thornton <art27@cantab.net>

* fix linting

Signed-off-by: Andrew Thornton <art27@cantab.net>

* Update web_src/js/features/gitgraph.js

Co-authored-by: silverwind <me@silverwind.io>

* graph tweaks

* more tweaks

* add title

Signed-off-by: Andrew Thornton <art27@cantab.net>

* fix loading indicator z-index and position

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
Co-authored-by: Lauris BH <lauris@nix.lv>

4 files changed, 161 insertions, 49 deletions

diff --git a/templates/repo/graph.tmpl b/templates/repo/graph.tmpl
index 7d2ecb5a91..fa027adc03 100644
--- a/templates/repo/graph.tmpl
+++ b/templates/repo/graph.tmpl
@@ -3,60 +3,61 @@
 	{{template "repo/header" .}}
 	<div class="ui container">
 		<div id="git-graph-container" class="ui segment{{if eq .Mode "monochrome"}} monochrome{{end}}">
-			<h2 class="ui header dividing">{{.i18n.Tr "repo.commit_graph"}}
-				<div class="ui right">
-					<div class="ui icon buttons tiny color-buttons">
-						<button id="flow-color-monochrome" class="ui labelled icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{.i18n.Tr "repo.commit_graph.monochrome"}}"><span class="emoji">{{svg "material-invert-colors"}}</span> {{.i18n.Tr "repo.commit_graph.monochrome"}}</button>
-						<button id="flow-color-colored" class="ui labelled icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{.i18n.Tr "repo.commit_graph.color"}}"><span class="emoji">{{svg "material-palette"}}</span> {{.i18n.Tr "repo.commit_graph.color"}}</button>
+			<h2 class="ui header dividing">
+				{{.i18n.Tr "repo.commit_graph"}}
+				<div class="ui icon buttons tiny color-buttons">
+					<div class="ui multiple selection search dropdown" id="flow-select-refs-dropdown">
+						<input type="hidden" name="flow">
+						<i class="dropdown icon"></i>
+						<div class="default text">{{.i18n.Tr "repo.commit_graph.select"}}</div>
+						<div class="menu">
+							<div class="item" data-value="...flow-hide-pr-refs">
+								<span class="truncate">
+									{{svg "octicon-eye-closed" 16 "mr-2"}}<span title="{{.i18n.Tr "repo.commit_graph.hide_pr_refs"}}">{{.i18n.Tr "repo.commit_graph.hide_pr_refs"}}</span>
+								</span>
+							</div>
+							{{range .AllRefs}}
+								{{$refGroup := .RefGroup}}
+								{{if eq $refGroup "pull"}}
+									<div class="item" data-value="{{.Name}}">
+										<span class="truncate">
+											{{svg "octicon-git-pull-request" 16 "mr-2"}}<span title="{{.ShortName}}">#{{.ShortName}}</span>
+										</span>
+									</div>
+								{{else if eq $refGroup "tags"}}
+									<div class="item" data-value="{{.Name}}">
+										<span class="truncate">
+											{{svg "octicon-tag" 16 "mr-2"}}<span title="{{.ShortName}}">{{.ShortName}}</span>
+										</span>
+									</div>
+								{{else if eq $refGroup "remotes"}}
+									<div class="item" data-value="{{.Name}}">
+										<span class="truncate">
+											{{svg "octicon-cross-reference" 16 "mr-2"}}<span title="{{.ShortName}}">{{.ShortName}}</span>
+										</span>
+									</div>
+								{{else if eq $refGroup "heads"}}
+									<div class="item" data-value="{{.Name}}">
+										<span class="truncate">
+											{{svg "octicon-git-branch" 16 "mr-2"}}<span title="{{.ShortName}}">{{.ShortName}}</span>
+										</span>
+									</div>
+								{{end}}
+							{{end}}
+						</div>
 					</div>
+					<button id="flow-color-monochrome" class="ui labelled icon button{{if eq .Mode "monochrome"}} active{{end}}" title="{{.i18n.Tr "repo.commit_graph.monochrome"}}">{{svg "material-invert-colors" 16 "mr-2"}}{{.i18n.Tr "repo.commit_graph.monochrome"}}</button>
+					<button id="flow-color-colored" class="ui labelled icon button{{if ne .Mode "monochrome"}} active{{end}}" title="{{.i18n.Tr "repo.commit_graph.color"}}">{{svg "material-palette" 16 "mr-2"}}{{.i18n.Tr "repo.commit_graph.color"}}</button>
 				</div>
 			</h2>
 			<div class="ui dividing"></div>
-			<div id="rel-container">
-				<svg viewbox="{{Mul .Graph.MinColumn 5}} {{Mul .Graph.MinRow 10}} {{Add (Mul .Graph.Width 5) 5}} {{Mul .Graph.Height 10}}" width="{{Add (Mul .Graph.Width 10) 10}}px">
-					{{range $flowid, $flow := .Graph.Flows}}
-						<g id="flow-{{$flow.ID}}" class="flow-group flow-color-{{$flow.ColorNumber}} flow-color-16-{{$flow.Color16}}" data-flow="{{$flow.ID}}" data-color="{{$flow.ColorNumber}}">
-							<path d="{{range $i, $glyph := $flow.Glyphs -}}
-								{{- if or (eq $glyph.Glyph '*') (eq $glyph.Glyph '|') -}}
-									M {{Add (Mul $glyph.Column 5) 5}} {{Add (Mul $glyph.Row 10) 0}} v 10 {{/* */ -}}
-								{{- else if eq $glyph.Glyph '/' -}}
-									M {{Add (Mul $glyph.Column 5) 10}} {{Add (Mul $glyph.Row 10) 0}} l -10 10 {{/* */ -}}
-								{{- else if eq $glyph.Glyph '\\' -}}
-									M {{Add (Mul $glyph.Column 5) 0}} {{Add (Mul $glyph.Row 10) 0}} l 10 10 {{/* */ -}}
-								{{- else if or (eq $glyph.Glyph '-') (eq $glyph.Glyph '.') -}}
-									M {{Add (Mul $glyph.Column 5) 0}} {{Add (Mul $glyph.Row 10) 10}} h 5 {{/* */ -}}
-								{{- else if eq $glyph.Glyph '_' -}}
-									M {{Add (Mul $glyph.Column 5) 0}} {{Add (Mul $glyph.Row 10) 10}} h 10 {{/* */ -}}
-								{{- end -}}
-							{{- end}}" stroke-width="1" fill="none" id="flow-{{$flow.ID}}-path" stroke-linecap="round"/>
-							{{range $flow.Commits}}
-								<circle class="flow-commit" cx="{{Add (Mul .Column 5) 5}}" cy="{{Add (Mul .Row 10) 5}}" r="2.5" stroke="none" id="flow-commit-{{.Rev}}" data-rev="{{.Rev}}"/>
-							{{end}}
-						</g>
-					{{end}}
-				</svg>
-			</div>
-			<div id="rev-container">
-				<ul id="rev-list">
-					{{ range .Graph.Commits }}
-						<li id="commit-{{.Rev}}" data-flow="{{.Flow}}">
-							{{ if .OnlyRelation }}
-								<span />
-							{{ else }}
-								<code id="{{.ShortRev}}">
-									<a href="{{AppSubUrl}}/{{$.Username}}/{{$.Reponame}}/commit/{{.Rev}}">{{ .ShortRev}}</a>
-								</code>
-								<strong> {{.Branch}}</strong>
-								<span>{{RenderCommitMessage .Subject $.RepoLink $.Repository.ComposeMetas}}</span> by
-								<span class="author">{{.Author}}</span>
-								<span class="time">{{.Date}}</span>
-							{{ end }}
-						</li>
-					{{ end }}
-				</ul>
-			</div>
+			<div class="ui segment loading hide" id="loading-indicator"></div>
+			{{ template "repo/graph/svgcontainer" .}}
+			{{ template "repo/graph/commits" .}}
 		</div>
 	</div>
 </div>
-{{template "base/paginate" .}}
+<div id="pagination">
+	{{template "base/paginate" .}}
+</div>
 {{template "base/footer" .}}
diff --git a/templates/repo/graph/commits.tmpl b/templates/repo/graph/commits.tmpl
new file mode 100644
index 0000000000..108aa0aa04
--- /dev/null
+++ b/templates/repo/graph/commits.tmpl
@@ -0,0 +1,80 @@
+<div id="rev-container">
+	<ul id="rev-list">
+		{{ range $commitI, $commit := .Graph.Commits }}
+			<li id="commit-{{$commit.Rev}}" data-flow="{{$commit.Flow}}">
+				{{ if $commit.OnlyRelation }}
+					<span />
+				{{ else }}
+					<span class="sha" id="{{$commit.ShortRev}}">
+						{{$class := "ui sha label"}}
+						{{if $commit.Commit.Signature}}
+							{{$class = (printf "%s%s" $class " isSigned")}}
+							{{if $commit.Verification.Verified}}
+								{{if eq $commit.Verification.TrustStatus "trusted"}}
+									{{$class = (printf "%s%s" $class " isVerified")}}
+								{{else if eq $commit.Verification.TrustStatus "untrusted"}}
+									{{$class = (printf "%s%s" $class " isVerifiedUntrusted")}}
+								{{else}}
+									{{$class = (printf "%s%s" $class " isVerifiedUnmatched")}}
+								{{end}}
+							{{else if $commit.Verification.Warning}}
+								{{$class = (printf "%s%s" $class " isWarning")}}
+							{{end}}
+						{{end}}
+						<a href="{{AppSubUrl}}/{{$.Username}}/{{$.Reponame}}/commit/{{$commit.Rev}}" rel="nofollow" class="{{$class}}">
+							<span class="shortsha">{{ShortSha $commit.Commit.ID.String}}</span>
+							{{- if $commit.Commit.Signature -}}
+								<span class="shortsha-pad"></span>{{template "repo/shabox_badge" dict "root" $ "verification" $commit.Verification}}
+							{{- end -}}
+						</a>
+					</span>
+					<span class="message df ac mr-2">{{RenderCommitMessage $commit.Subject $.RepoLink $.Repository.ComposeMetas}}</span>
+					<span class="tags df ac">
+						{{range $commit.Refs}}
+							{{$refGroup := .RefGroup}}
+							{{if eq $refGroup "pull"}}
+								{{if $.HidePRRefs}}
+									{{if (containGeneric $.SelectedBranches .Name) }}
+										<a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/pulls/{{.ShortName|PathEscape}}">
+											{{svg "octicon-git-pull-request" 16 "mr-2"}}#{{.ShortName}}
+										</a>
+									{{end}}
+								{{else}}
+									<a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/pulls/{{.ShortName|PathEscape}}">
+										{{svg "octicon-git-pull-request" 16 "mr-2"}}#{{.ShortName}}
+									</a>
+								{{end}}
+							{{else if eq $refGroup "tags"}}
+								<a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/src/tag/{{.ShortName|PathEscape}}">
+									{{svg "octicon-tag" 16 "mr-2"}}{{.ShortName}}
+								</a>
+							{{else if eq $refGroup "remotes"}}
+								<a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/src/commit/{{$commit.Rev}}">
+									{{svg "octicon-cross-reference" 16 "mr-2"}}{{.ShortName}}
+								</a>
+							{{else if eq $refGroup "heads"}}
+								<a class="ui labelled icon button basic tiny" href="{{$.RepoLink}}/src/branch/{{.ShortName|PathEscape}}">
+									{{svg "octicon-git-branch" 16 "mr-2"}}{{.ShortName}}
+								</a>
+							{{else}}
+								<!-- Unknown ref type {{.Name}} -->
+							{{end}}
+						{{end}}
+					</span>
+					<span class="author df ac mr-2">
+						{{$userName := $commit.Commit.Author.Name}}
+						{{if $commit.User}}
+							{{if $commit.User.FullName}}
+								{{$userName = $commit.User.FullName}}
+							{{end}}
+							<img class="ui avatar image" src="{{$commit.User.RelAvatarLink}}" alt=""/><a href="{{AppSubUrl}}/{{$commit.User.Name}}">{{$userName}}</a>
+						{{else}}
+							<img class="ui avatar image" src="{{AvatarLink $commit.Commit.Author.Email}}" alt=""/>{{$userName}}
+						{{end}}
+					</span>
+					<span class="time df ac">{{$commit.Date}}</span>
+				{{ end }}
+			</li>
+		{{ end }}
+	</ul>
+</div>
diff --git a/templates/repo/graph/div.tmpl b/templates/repo/graph/div.tmpl
new file mode 100644
index 0000000000..c0bd4e269a
--- /dev/null
+++ b/templates/repo/graph/div.tmpl
@@ -0,0 +1,7 @@
+<div>
+	{{template "repo/graph/svgcontainer" .}}
+	{{template "repo/graph/commits" .}}
+	<div id="pagination">
+		{{template "base/paginate" .}}
+	</div>
+</div>
diff --git a/templates/repo/graph/svgcontainer.tmpl b/templates/repo/graph/svgcontainer.tmpl
new file mode 100644
index 0000000000..6e6046cecc
--- /dev/null
+++ b/templates/repo/graph/svgcontainer.tmpl
@@ -0,0 +1,24 @@
+<div id="rel-container">
+	<svg viewbox="{{Mul .Graph.MinColumn 5}} {{Mul .Graph.MinRow 12}} {{Add (Mul .Graph.Width 5) 5}} {{Mul .Graph.Height 12}}" width="{{Add (Mul .Graph.Width 10) 10}}px">
+		{{range $flowid, $flow := .Graph.Flows}}
+			<g id="flow-{{$flow.ID}}" class="flow-group flow-color-{{$flow.ColorNumber}} flow-color-16-{{$flow.Color16}}" data-flow="{{$flow.ID}}" data-color="{{$flow.ColorNumber}}">
+				<path d="{{range $i, $glyph := $flow.Glyphs -}}
+					{{- if or (eq $glyph.Glyph '*') (eq $glyph.Glyph '|') -}}
+						M {{Add (Mul $glyph.Column 5) 5}} {{Add (Mul $glyph.Row 12) 0}} v 12 {{/* */ -}}
+					{{- else if eq $glyph.Glyph '/' -}}
+						M {{Add (Mul $glyph.Column 5) 10}} {{Add (Mul $glyph.Row 12) 0}} l -10 12 {{/* */ -}}
+					{{- else if eq $glyph.Glyph '\\' -}}
+						M {{Add (Mul $glyph.Column 5) 0}} {{Add (Mul $glyph.Row 12) 0}} l 10 12 {{/* */ -}}
+					{{- else if or (eq $glyph.Glyph '-') (eq $glyph.Glyph '.') -}}
+						M {{Add (Mul $glyph.Column 5) 0}} {{Add (Mul $glyph.Row 12) 12}} h 5 {{/* */ -}}
+					{{- else if eq $glyph.Glyph '_' -}}
+						M {{Add (Mul $glyph.Column 5) 0}} {{Add (Mul $glyph.Row 12) 12}} h 10 {{/* */ -}}
+					{{- end -}}
+				{{- end}}" stroke-width="1" fill="none" id="flow-{{$flow.ID}}-path" stroke-linecap="round"/>
+				{{range $flow.Commits}}
+					<circle class="flow-commit" cx="{{Add (Mul .Column 5) 5}}" cy="{{Add (Mul .Row 12) 6}}" r="2.5" stroke="none" id="flow-commit-{{.Rev}}" data-rev="{{.Rev}}"/>
+				{{end}}
+			</g>
+		{{end}}
+	</svg>
+</div>