Add Hide/Show all checks button to commit status check

options/locale/locale_en-US.ini

@@ -1786,6 +1786,8 @@ pulls.status_checks_failure = Some checks failed
 pulls.status_checks_error = Some checks reported errors
 pulls.status_checks_requested = Required
 pulls.status_checks_details = Details
+pulls.status_checks_hide_all = Hide all checks
+pulls.status_checks_show_all = Show all checks
 pulls.update_branch = Update branch by merge
 pulls.update_branch_rebase = Update branch by rebase
 pulls.update_branch_success = Branch update was successful

routers/web/repo/pull.go

@@ -494,6 +494,7 @@ func PrepareMergedViewPullInfo(ctx *context.Context, issue *issues_model.Issue)
 		if len(commitStatuses) != 0 {
 			ctx.Data["LatestCommitStatuses"] = commitStatuses
 			ctx.Data["LatestCommitStatus"] = git_model.CalcCommitStatus(commitStatuses)
+			ctx.Data["ShowHideButton"] = true
 		}
 	}
 
@@ -556,6 +557,7 @@ func PrepareViewPullInfo(ctx *context.Context, issue *issues_model.Issue) *git.C
 		if len(commitStatuses) > 0 {
 			ctx.Data["LatestCommitStatuses"] = commitStatuses
 			ctx.Data["LatestCommitStatus"] = git_model.CalcCommitStatus(commitStatuses)
+			ctx.Data["ShowHideButton"] = true
 		}
 
 		compareInfo, err := baseGitRepo.GetCompareInfo(pull.BaseRepo.RepoPath(),
@@ -648,6 +650,7 @@ func PrepareViewPullInfo(ctx *context.Context, issue *issues_model.Issue) *git.C
 	if len(commitStatuses) > 0 {
 		ctx.Data["LatestCommitStatuses"] = commitStatuses
 		ctx.Data["LatestCommitStatus"] = git_model.CalcCommitStatus(commitStatuses)
+		ctx.Data["ShowHideButton"] = true
 	}
 
 	if pb != nil && pb.EnableStatusCheck {

templates/repo/branch/list.tmpl

@@ -23,7 +23,7 @@
 									{{if .DefaultBranchBranch.IsProtected}}{{svg "octicon-shield-lock"}}{{end}}
 									<a class="gt-ellipsis" href="{{.RepoLink}}/src/branch/{{PathEscapeSegments .DefaultBranchBranch.DBBranch.Name}}">{{.DefaultBranchBranch.DBBranch.Name}}</a>
 									<button class="btn interact-fg gt-px-2" data-clipboard-text="{{.DefaultBranchBranch.DBBranch.Name}}">{{svg "octicon-copy" 14}}</button>
-									{{template "repo/commit_statuses" dict "Status" (index $.CommitStatus .DefaultBranchBranch.DBBranch.CommitID) "Statuses" (index $.CommitStatuses .DefaultBranchBranch.DBBranch.CommitID)}}
+									{{template "repo/commit_statuses" dict "Status" (index $.CommitStatus .DefaultBranchBranch.DBBranch.CommitID) "Statuses" (index $.CommitStatuses .DefaultBranchBranch.DBBranch.CommitID) "root" $}}
 								</div>
 								<p class="info gt-df gt-ac gt-my-2">{{svg "octicon-git-commit" 16 "gt-mr-2"}}<a href="{{.RepoLink}}/commit/{{PathEscape .DefaultBranchBranch.DBBranch.CommitID}}">{{ShortSha .DefaultBranchBranch.DBBranch.CommitID}}</a> · <span class="commit-message">{{RenderCommitMessage $.Context .DefaultBranchBranch.DBBranch.CommitMessage .RepoLink (.Repository.ComposeMetas ctx)}}</span> · {{ctx.Locale.Tr "org.repo_updated"}} {{TimeSince .DefaultBranchBranch.DBBranch.CommitTime.AsTime ctx.Locale}}{{if .DefaultBranchBranch.DBBranch.Pusher}} &nbsp;{{template "shared/user/avatarlink" dict "user" .DefaultBranchBranch.DBBranch.Pusher}}{{template "shared/user/namelink" .DefaultBranchBranch.DBBranch.Pusher}}{{end}}</p>
 							</td>
@@ -99,7 +99,7 @@
 										{{if .IsProtected}}{{svg "octicon-shield-lock"}}{{end}}
 										<a class="gt-ellipsis" href="{{$.RepoLink}}/src/branch/{{PathEscapeSegments .DBBranch.Name}}">{{.DBBranch.Name}}</a>
 										<button class="btn interact-fg gt-px-2" data-clipboard-text="{{.DBBranch.Name}}">{{svg "octicon-copy" 14}}</button>
-										{{template "repo/commit_statuses" dict "Status" (index $.CommitStatus .DBBranch.CommitID) "Statuses" (index $.CommitStatuses .DBBranch.CommitID)}}
+										{{template "repo/commit_statuses" dict "Status" (index $.CommitStatus .DBBranch.CommitID) "Statuses" (index $.CommitStatuses .DBBranch.CommitID) "root" $}}
 									</div>
 									<p class="info gt-df gt-ac gt-my-2">{{svg "octicon-git-commit" 16 "gt-mr-2"}}<a href="{{$.RepoLink}}/commit/{{PathEscape .DBBranch.CommitID}}">{{ShortSha .DBBranch.CommitID}}</a> · <span class="commit-message">{{RenderCommitMessage $.Context .DBBranch.CommitMessage $.RepoLink ($.Repository.ComposeMetas ctx)}}</span> · {{ctx.Locale.Tr "org.repo_updated"}} {{TimeSince .DBBranch.CommitTime.AsTime ctx.Locale}}{{if .DBBranch.Pusher}} &nbsp;{{template "shared/user/avatarlink" dict "user" .DBBranch.Pusher}} &nbsp;{{template "shared/user/namelink" .DBBranch.Pusher}}{{end}}</p>
 								{{end}}

templates/repo/commit_statuses.tmpl

@@ -9,14 +9,11 @@
 		</span>
 	{{end}}
 	<div class="tippy-target ui relaxed list divided">
-		{{range .Statuses}}
-			<div class="ui item singular-status gt-df">
-				{{template "repo/commit_status" .}}
-				<span class="ui gt-ml-3 gt-f1">{{.Context}} <span class="text grey">{{.Description}}</span></span>
-				{{if .TargetURL}}
-					<a class="gt-ml-3" href="{{.TargetURL}}" target="_blank" rel="noopener noreferrer">{{ctx.Locale.Tr "repo.pulls.status_checks_details"}}</a>
-				{{end}}
-			</div>
-		{{end}}
+		{{template "repo/pulls/status" (dict
+			"CommitStatuses" .Statuses
+			"CommitStatus" .Status
+			"IsPopup" true
+			"is_context_required" .root.is_context_required
+		)}}
 	</div>
 {{end}}

templates/repo/issue/view_content/pull.tmpl

@@ -20,7 +20,11 @@
 	{{- else if .Issue.PullRequest.CanAutoMerge}}green
 	{{- else}}red{{end}}">{{svg "octicon-git-merge" 40}}</div>
 	<div class="content">
-		{{template "repo/pulls/status" .}}
+		{{template "repo/pulls/status" (dict
+			"CommitStatus" .LatestCommitStatus
+			"CommitStatuses" .LatestCommitStatuses
+			"is_context_required" .is_context_required
+		)}}
 		{{$showGeneralMergeForm := false}}
 		<div class="ui attached merge-section segment {{if not $.LatestCommitStatus}}no-header{{end}} flex-items-block">
 			{{if .Issue.PullRequest.HasMerged}}

templates/repo/pulls/status.tmpl

@@ -1,34 +1,53 @@
-{{if $.LatestCommitStatus}}
-	{{if not $.Issue.PullRequest.HasMerged}}
-		<div class="ui top attached header">
-			{{if eq .LatestCommitStatus.State "pending"}}
-				{{ctx.Locale.Tr "repo.pulls.status_checking"}}
-			{{else if eq .LatestCommitStatus.State "success"}}
-				{{ctx.Locale.Tr "repo.pulls.status_checks_success"}}
-			{{else if eq .LatestCommitStatus.State "warning"}}
-				{{ctx.Locale.Tr "repo.pulls.status_checks_warning"}}
-			{{else if eq .LatestCommitStatus.State "failure"}}
-				{{ctx.Locale.Tr "repo.pulls.status_checks_failure"}}
-			{{else if eq .LatestCommitStatus.State "error"}}
-				{{ctx.Locale.Tr "repo.pulls.status_checks_error"}}
-			{{else}}
-				{{ctx.Locale.Tr "repo.pulls.status_checking"}}
-			{{end}}
-			</div>
-	{{end}}
+{{/*
+Template Attributes:
+* CommitStatus: summary of all commit status state
+* CommitStatuses: all commit status elements
+* IsPopup: whether this template is in a popup
+* is_context_required: Used in pull request commit status check table
+*/}}
+
+{{if .CommitStatus}}
+<div class="{{if .IsPopup}}tippy-commit-status{{else}}pr-commit-status{{end}}">
+	<div class="ui attached header top">
+		{{if eq .CommitStatus.State "pending"}}
+			{{ctx.Locale.Tr "repo.pulls.status_checking"}}
+		{{else if eq .CommitStatus.State "success"}}
+			{{ctx.Locale.Tr "repo.pulls.status_checks_success"}}
+		{{else if eq .CommitStatus.State "warning"}}
+			{{ctx.Locale.Tr "repo.pulls.status_checks_warning"}}
+		{{else if eq .CommitStatus.State "failure"}}
+			{{ctx.Locale.Tr "repo.pulls.status_checks_failure"}}
+		{{else if eq .CommitStatus.State "error"}}
+			{{ctx.Locale.Tr "repo.pulls.status_checks_error"}}
+		{{else}}
+			{{ctx.Locale.Tr "repo.pulls.status_checking"}}
+		{{end}}
 
-	{{range $.LatestCommitStatuses}}
-		<div class="ui attached segment pr-status">
-			{{template "repo/commit_status" .}}
-			<div class="status-context">
-				<span>{{.Context}} <span class="text grey">{{.Description}}</span></span>
-				<div class="ui status-details">
-					{{if $.is_context_required}}
-						{{if (call $.is_context_required .Context)}}<div class="ui label">{{ctx.Locale.Tr "repo.pulls.status_checks_requested"}}</div>{{end}}
-					{{end}}
-					<span>{{if .TargetURL}}<a href="{{.TargetURL}}">{{ctx.Locale.Tr "repo.pulls.status_checks_details"}}</a>{{end}}</span>
+		{{if not .IsPopup}}
+		<div class="ui right">
+			<button class="hide-all-checks btn interact-fg"
+			data-show-all="{{ctx.Locale.Tr "repo.pulls.status_checks_show_all"}}"
+			data-hide-all="{{ctx.Locale.Tr "repo.pulls.status_checks_hide_all"}}">
+			{{ctx.Locale.Tr "repo.pulls.status_checks_hide_all"}}</button>
+		</div>
+		{{end}}
+	</div>
+
+	<div class="ui attached segment commit-status-list">
+		{{range .CommitStatuses}}
+			<div class="ui attached segment commit-status-item">
+				{{template "repo/commit_status" .}}
+				<div class="status-context">
+					<span>{{.Context}} <span class="text grey">{{.Description}}</span></span>
+					<div class="ui status-details">
+						{{if $.is_context_required}}
+							{{if (call $.is_context_required .Context)}}<div class="ui label">{{ctx.Locale.Tr "repo.pulls.status_checks_requested"}}</div>{{end}}
+						{{end}}
+						<span>{{if .TargetURL}}<a href="{{.TargetURL}}">{{ctx.Locale.Tr "repo.pulls.status_checks_details"}}</a>{{end}}</span>
+					</div>
 				</div>
 			</div>
-		</div>
-	{{end}}
+		{{end}}
+	</div>
+</div>
 {{end}}

web_src/css/modules/tippy.css

@@ -37,7 +37,7 @@
 
 .tippy-content {
   position: relative;
-  padding: 1rem;
+  padding: 0;
   z-index: 1;
 }
 

web_src/css/repo.css

@@ -3074,46 +3074,82 @@ tbody.commit-list {
   }
 }
 
-.pr-status {
+.commit-status-list {
+  padding: 0 !important;
+  max-height: 231px;
+  overflow-x: hidden;
+  transition: max-height 0.2s;
+  border-bottom: 0 !important;
+}
+
+.pr-commit-status.hide {
+  border-bottom: 0 !important;
+}
+
+.pr-commit-status.hide .ui.attached.header {
+  border-bottom: none !important;
+}
+
+.pr-commit-status.hide .commit-status-list {
+  max-height: 0;
+}
+
+.commit-status-item {
   padding: 0 !important; /* To clear fomantic's padding on .ui.segment elements */
   display: flex;
   align-items: center;
 }
 
-.pr-status .commit-status {
+.commit-status-item:first-child {
+  border-top: none !important;
+}
+
+.commit-status-item:last-child {
+  border-bottom: none !important;
+}
+
+.commit-status-item .commit-status {
   margin: 1em;
   flex-shrink: 0;
 }
 
-.pr-status .status-context {
+.commit-status-item .status-context {
   display: flex;
   justify-content: space-between;
   width: 100%;
 }
 
-.pr-status .status-context > span {
+.commit-status-item .status-context > span {
   padding: 1em 0;
 }
 
-.pr-status .status-details {
+.commit-status-item .status-details {
   display: flex;
   padding-right: 0.5em;
   align-items: center;
   justify-content: flex-end;
 }
 
 @media (max-width: 767.98px) {
-  .pr-status .status-details {
+  .commit-status-item .status-details {
     flex-direction: column;
     align-items: flex-end;
     justify-content: center;
   }
 }
 
-.pr-status .status-details > span {
+.commit-status-item .status-details > span {
   padding-right: 0.5em; /* To match the alignment with the "required" label */
 }
 
+.tippy-commit-status {
+  max-width: calc(100vw - 16px);
+}
+
+.tippy-commit-status .ui.attached.header {
+  border-top: 0 !important;
+}
+
 .search-fullname {
   color: var(--color-text-light-2);
 }

web_src/js/features/repo-issue-pr-status.js

@@ -0,0 +1,13 @@
+export function initRepoPullRequestCommitStatus() {
+  const btn = document.querySelector('.hide-all-checks');
+  const prCommitStatus = document.querySelector('.pr-commit-status');
+  if (!btn) return;
+  btn.addEventListener('click', () => {
+    if (prCommitStatus.classList.contains('hide')) {
+      btn.textContent = btn.getAttribute('data-hide-all');
+    } else {
+      btn.textContent = btn.getAttribute('data-show-all');
+    }
+    prCommitStatus.classList.toggle('hide');
+  });
+}

web_src/js/features/repo-legacy.js

@@ -20,6 +20,7 @@ import {initCommentContent, initMarkupContent} from '../markup/content.js';
 import {initCompReactionSelector} from './comp/ReactionSelector.js';
 import {initRepoSettingBranches} from './repo-settings.js';
 import {initRepoPullRequestMergeForm} from './repo-issue-pr-form.js';
+import {initRepoPullRequestCommitStatus} from './repo-issue-pr-status.js';
 import {hideElem, showElem} from '../utils/dom.js';
 import {getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
 import {attachRefIssueContextPopup} from './contextpopup.js';
@@ -546,6 +547,7 @@ export function initRepository() {
     initCompReactionSelector($(document));
 
     initRepoPullRequestMergeForm();
+    initRepoPullRequestCommitStatus();
   }
 
   // Pull request