Show dropdown with all statuses for commit (#13977)

* Show dropdown with all statuses for commit

* Use popups

* Remove unnecessary change

* Style popup

* Use divided list

* As per @silverwind

* Refactor GetLastCommitStatus

* Missing dropdown on repo home and commit page

* Fix tests

* Make status icon be a part of a link on PR list

* Fix missing translation call

* Indent fix

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

integrations/repo_commits_test.go

@@ -65,7 +65,7 @@ func doTestRepoCommitWithStatus(t *testing.T, state string, classes ...string) {
 
 	doc = NewHTMLParser(t, resp.Body)
 	// Check if commit status is displayed in message column
-	sel := doc.doc.Find("#commits-table tbody tr td.message i.commit-status")
+	sel := doc.doc.Find("#commits-table tbody tr td.message a.commit-statuses-trigger i.commit-status")
 	assert.Equal(t, sel.Length(), 1)
 	for _, class := range classes {
 		assert.True(t, sel.HasClass(class))

models/commit_status.go

@@ -253,6 +253,7 @@ func NewCommitStatus(opts NewCommitStatusOptions) error {
 // SignCommitWithStatuses represents a commit with validation of signature and status state.
 type SignCommitWithStatuses struct {
 	Status   *CommitStatus
+	Statuses []*CommitStatus
 	*SignCommit
 }
 
@@ -272,6 +273,7 @@ func ParseCommitsWithStatus(oldCommits *list.List, repo *Repository) *list.List
 		if err != nil {
 			log.Error("GetLatestCommitStatus: %v", err)
 		} else {
+			commit.Statuses = statuses
 			commit.Status = CalcCommitStatus(statuses)
 		}
 

routers/repo/blame.go

@@ -102,6 +102,7 @@ func RefBlame(ctx *context.Context) {
 	blob := entry.Blob()
 
 	ctx.Data["LatestCommitStatus"] = models.CalcCommitStatus(statuses)
+	ctx.Data["LatestCommitStatuses"] = statuses
 
 	ctx.Data["Paths"] = paths
 	ctx.Data["TreeLink"] = treeLink

routers/repo/commit.go

@@ -302,6 +302,7 @@ func Diff(ctx *context.Context) {
 	}
 
 	ctx.Data["CommitStatus"] = models.CalcCommitStatus(statuses)
+	ctx.Data["CommitStatuses"] = statuses
 
 	diff, err := gitdiff.GetDiffCommit(repoPath,
 		commitID, setting.Git.MaxGitDiffLines,

routers/repo/issue.go

@@ -259,7 +259,8 @@ func issues(ctx *context.Context, milestoneID, projectID int64, isPullOption uti
 				return
 			}
 
-			commitStatus[issues[i].PullRequest.ID], _ = pull_service.GetLastCommitStatus(issues[i].PullRequest)
+			var statuses, _ = pull_service.GetLastCommitStatus(issues[i].PullRequest)
+			commitStatus[issues[i].PullRequest.ID] = models.CalcCommitStatus(statuses)
 		}
 	}
 

routers/repo/view.go

@@ -359,6 +359,7 @@ func renderDirectory(ctx *context.Context, treeLink string) {
 	}
 
 	ctx.Data["LatestCommitStatus"] = models.CalcCommitStatus(statuses)
+	ctx.Data["LatestCommitStatuses"] = statuses
 
 	// Check permission to add or upload new file.
 	if ctx.Repo.CanWrite(models.UnitTypeCode) && ctx.Repo.IsViewBranch {

routers/user/home.go

@@ -563,7 +563,8 @@ func Issues(ctx *context.Context) {
 		issue.Repo = showReposMap[issue.RepoID]
 
 		if isPullList {
-			commitStatus[issue.PullRequest.ID], _ = pull_service.GetLastCommitStatus(issue.PullRequest)
+			var statuses, _ = pull_service.GetLastCommitStatus(issue.PullRequest)
+			commitStatus[issue.PullRequest.ID] = models.CalcCommitStatus(statuses)
 		}
 	}
 

services/pull/pull.go

@@ -640,8 +640,8 @@ func GetCommitMessages(pr *models.PullRequest) string {
 	return stringBuilder.String()
 }
 
-// GetLastCommitStatus returns the last commit status for this pull request.
-func GetLastCommitStatus(pr *models.PullRequest) (status *models.CommitStatus, err error) {
+// GetLastCommitStatus returns list of commit statuses for latest commit on this pull request.
+func GetLastCommitStatus(pr *models.PullRequest) (status []*models.CommitStatus, err error) {
 	if err = pr.LoadBaseRepo(); err != nil {
 		return nil, err
 	}
@@ -666,7 +666,7 @@ func GetLastCommitStatus(pr *models.PullRequest) (status *models.CommitStatus, e
 	if err != nil {
 		return nil, err
 	}
-	return models.CalcCommitStatus(statusList), nil
+	return statusList, nil
 }
 
 // IsHeadEqualWithBranch returns if the commits of branchName are available in pull request head

templates/repo/commit_page.tmpl

@@ -23,7 +23,7 @@
 				{{.i18n.Tr "repo.diff.browse_source"}}
 			</a>
 			{{end}}
-			<h3><span class="message-wrapper"><span class="commit-summary" title="{{.Commit.Summary}}">{{RenderCommitMessage .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</span></span>{{template "repo/commit_status" .CommitStatus}}</h3>
+			<h3><span class="message-wrapper"><span class="commit-summary" title="{{.Commit.Summary}}">{{RenderCommitMessage .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</span></span>{{template "repo/commit_statuses" dict "Status" .CommitStatus "Statuses" .CommitStatuses  "root" $}}</h3>
 			{{if IsMultilineCommitMessage .Commit.Message}}
 				<pre class="commit-body">{{RenderCommitBody .Commit.Message $.RepoLink $.Repository.ComposeMetas}}</pre>
 			{{end}}

templates/repo/commit_status.tmpl

@@ -1,15 +1,15 @@
 {{if eq .State "pending"}}
-	<a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status circle icon yellow"></i></a>
+	<i class="commit-status circle icon yellow"></i>
 {{end}}
 {{if eq .State "success"}}
-	<a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status check icon green"></i></a>
+	<i class="commit-status check icon green"></i>
 {{end}}
 {{if eq .State "error"}}
-	<a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status warning icon red"></i></a>
+	<i class="commit-status warning icon red"></i>
 {{end}}
 {{if eq .State "failure"}}
-	<a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status remove icon red"></i></a>
+	<i class="commit-status remove icon red"></i>
 {{end}}
 {{if eq .State "warning"}}
-	<a class="commit-status-link" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer"><i class="commit-status warning sign icon yellow"></i></a>
+	<i class="commit-status warning sign icon yellow"></i>
 {{end}}

templates/repo/commit_statuses.tmpl

@@ -0,0 +1,14 @@
+<a class="ui link commit-statuses-trigger">{{template "repo/commit_status" .Status}}</a>
+<div class="ui popup very wide fixed basic commit-statuses">
+	<div class="ui relaxed list divided">
+		{{range .Statuses}}
+			<div class="ui item singular-status">
+				<span>{{template "repo/commit_status" .}}</span>
+				<span class="ui">{{.Context}} <span class="text grey">{{.Description}}</span></span>
+				{{if .TargetURL}}
+					<div class="ui right"><a href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer">{{$.root.i18n.Tr "repo.pulls.status_checks_details"}}</a></div>
+				{{end}}
+			</div>
+		{{end}}
+	</div>
+</div>

templates/repo/commits_list.tmpl

@@ -70,7 +70,7 @@
 							<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
 							{{end}}
 							{{if eq (CommitType .) "SignCommitWithStatuses"}}
-								{{template "repo/commit_status" .Status}}
+								{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses "root" $}}
 							{{end}}
 							{{if IsMultilineCommitMessage .Message}}
 							<pre class="commit-body" style="display: none;">{{RenderCommitBody .Message $.RepoLink $.Repository.ComposeMetas}}</pre>

templates/repo/commits_list_small.tmpl

@@ -16,7 +16,7 @@
 
 		<span class="ui float right shabox">
 			{{if eq (CommitType .) "SignCommitWithStatuses"}}
-        		{{template "repo/commit_status" .Status}}
+				{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses "root" $.root}}
 			{{end}}
 			{{$class := "ui sha label"}}
 			{{if .Signature}}

templates/repo/view_list.tmpl

@@ -21,7 +21,7 @@
 						{{template "repo/shabox_badge" dict "root" $ "verification" .LatestCommitVerification}}
 					{{end}}
 				</a>
-				{{template "repo/commit_status" .LatestCommitStatus}}
+				{{template "repo/commit_statuses" dict "Status" .LatestCommitStatus "Statuses" .LatestCommitStatuses "root" $}}
 				{{ $commitLink:= printf "%s/commit/%s" .RepoLink .LatestCommit.ID }}
 				<span class="grey commit-summary" title="{{.LatestCommit.Summary}}"><span class="message-wrapper">{{RenderCommitMessageLinkSubject .LatestCommit.Message $.RepoLink $commitLink $.Repository.ComposeMetas}}</span>
 				{{if IsMultilineCommitMessage .LatestCommit.Message}}

templates/shared/issuelist.tmpl

@@ -31,12 +31,14 @@
 			</div>
 			<div class="issue-item-main f1 fc df">
 				<div class="issue-item-top-row df ac fw">
-					<a class="title mr-3" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">{{RenderEmoji .Title}}</a>
+					<a class="title mr-3" href="{{if .HTMLURL}}{{.HTMLURL}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
+						{{RenderEmoji .Title}}
 						{{if .IsPull }}
 							{{if (index $.CommitStatus .PullRequest.ID)}}
 								{{template "repo/commit_status" (index $.CommitStatus .PullRequest.ID)}}
 							{{end}}
 						{{end}}
+					</a>
 					<span class="labels-list">
 						{{range .Labels}}
 							<a class="ui label" href="{{$.Link}}?q={{$.Keyword}}&type={{$.ViewType}}&state={{$.State}}&labels={{.ID}}{{if ne $.listType "milestone"}}&milestone={{$.MilestoneID}}{{end}}&assignee={{$.AssigneeID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>

web_src/js/index.js

@@ -759,6 +759,15 @@ async function initRepository() {
     });
   }
 
+  // Commit statuses
+  $('.commit-statuses-trigger').each(function () {
+    $(this)
+      .popup({
+        on: 'click',
+        position: ($('.repository.file.list').length > 0 ? 'right center' : 'left center'),
+      });
+  });
+
   // File list and commits
   if ($('.repository.file.list').length > 0 || ('.repository.commits').length > 0) {
     initFilterBranchTagDropdown('.choose.reference .dropdown');

web_src/less/_base.less

@@ -530,6 +530,10 @@ a.ui.card:hover,
   border-radius: var(--border-radius);
 }
 
+.ui.divided.list > .item {
+  border-color: var(--color-secondary);
+}
+
 .dont-break-out {
   overflow-wrap: break-word;
   word-wrap: break-word;
@@ -1164,7 +1168,7 @@ footer {
   }
 }
 
-.center {
+.center:not(.popup) {
   text-align: center;
 }
 

web_src/less/_repository.less

@@ -1,4 +1,8 @@
 .repository {
+  .commit-statuses .list > .item {
+    line-height: 2;
+  }
+
   .repo-header {
     .ui.compact.menu {
       margin-left: 1rem;