Refactor pull request view (5) (#37517)

Clean up templates, remove various CSS patches.

By the way, fix incorrect NewRequest URLs in tests.

templates/base/footer.tmpl

@@ -12,7 +12,7 @@
 	{{ctx.ScriptImport "js/index.js" "module"}}
 	{{template "custom/footer" .}}
 	<script nonce="{{ctx.CspScriptNonce}}" type="module">
-	if (!window.config?.frontendInited) alert("Frontend is not initialized, check console errors or asset files.")
+	if (!window.config?.frontendInited && window.config?.runModeIsProd) alert("Frontend is not initialized, check console errors or asset files.");
 	</script>
 </body>
 </html>

templates/devtest/flex-list.tmpl

@@ -101,21 +101,30 @@
 				<div class="item">item 2</div>
 			</div>
 		</div>
-		<h3>Flex List (with "ui segment fitted")</h3>
-		<div class="ui attached segment fitted">
-			<div class="flex-divided-list">
+		<h3>Flex List (with "ui segment fitted", items have their own padding)</h3>
+		<div class="ui attached segment fitted container-divided">
+			<div class="flex-divided-list container-divided">
 				<div class="item">item 1</div>
 				<div class="item">item 2</div>
+				<div class="item flex-divided-list">
+					<div class="item">item nested 1</div>
+					<div class="item">item nested 2</div>
+				</div>
+				<div class="item">item 3</div>
 			</div>
 		</div>
 
-		<h3>If parent provides border or padding:</h3>
-		<div class="container-segmented tw-border tw-border-secondary">
+		<h3>If parent provides padding or items need their own flex and/or padding:</h3>
+		<div class="container-divided tw-border tw-border-secondary">
 			<div class="tw-m-3">before divider</div>
 			<div class="divider"></div>
-			<div class="flex-divided-list">
+			<div class="flex-divided-list container-divided flex-items-block">
 				<div class="item">item 1</div>
 				<div class="item">item 2</div>
+				<div class="item flex-divided-list">
+					<div class="item">item nested 1</div>
+					<div class="item">item nested 2</div>
+				</div>
 			</div>
 			<div class="divider"></div>
 			<div class="tw-m-3">after divider</div>

templates/repo/commit_statuses.tmpl

@@ -9,6 +9,10 @@
 		</span>
 	{{end}}
 	<div class="tippy-target">
-		{{template "repo/pulls/status" (dict "CommitStatuses" .Statuses "CommitStatus" .Status)}}
+		<div class="ui segment">
+			<div class="flex-divided-list">
+				{{template "repo/pulls/status" (dict "CommitStatuses" .Statuses "CommitStatus" .Status)}}
+			</div>
+		</div>
 	</div>
 {{end}}

templates/repo/issue/view_content/pull_merge_box.tmpl

@@ -27,18 +27,18 @@
 	{{- else if .Issue.PullRequest.IsStatusMergeable}}tw-text-green
 	{{- else}}tw-text-red{{end}}">{{svg "octicon-git-merge" 40}}</div>
 	<div class="content">
-		{{if .LatestCommitStatus}}
-		<div class="ui attached segment fitted">
-		{{template "repo/pulls/status" (dict
-			"CommitStatus" .LatestCommitStatus
-			"CommitStatuses" .LatestCommitStatuses
-			"ShowHideChecks" true
-			"StatusCheckData" $statusCheckData
-		)}}
-		</div>
-		{{end}}
-		{{$showGeneralMergeForm := false}}
-		<div class="ui attached segment merge-section {{if not $.LatestCommitStatus}}avatar-content-left-arrow{{end}} flex-items-block">
+		<div class="ui segment fitted avatar-content-left-arrow container-divided">
+			<div class="merge-section flex-divided-list flex-items-block container-divided">
+			{{if .LatestCommitStatus}}
+				{{template "repo/pulls/status" (dict
+					"CommitStatus" .LatestCommitStatus
+					"CommitStatuses" .LatestCommitStatuses
+					"ShowHideChecks" true
+					"StatusCheckData" $statusCheckData
+				)}}
+			{{end}}
+
+			{{$showGeneralMergeForm := false}}
 			{{if .Issue.PullRequest.HasMerged}}
 				{{if .IsPullBranchDeletable}}
 					<div class="item item-section text tw-flex-1">
@@ -78,7 +78,7 @@
 					{{svg "octicon-x"}}
 					{{ctx.Locale.Tr "repo.pulls.files_conflicted"}}
 				</div>
-				<ul>
+				<ul class="item">
 					{{range .ConflictedFiles}}
 					<li>{{.}}</li>
 					{{else}}
@@ -143,7 +143,7 @@
 						{{svg "octicon-x"}}
 						{{ctx.Locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n"}}
 					</div>
-					<ul>
+					<ul class="item">
 						{{range .ChangedProtectedFiles}}
 						<li>{{.}}</li>
 						{{end}}
@@ -200,7 +200,6 @@
 				{{template "repo/issue/view_content/update_branch_by_merge" $}}
 
 				{{if .Issue.PullRequest.IsEmpty}}
-					<div class="divider"></div>
 					<div class="item">
 						{{svg "octicon-alert"}}
 						{{ctx.Locale.Tr "repo.pulls.is_empty"}}
@@ -209,13 +208,13 @@
 
 				{{if .AllowMerge}} {{/* user is allowed to merge */}}
 					{{if $data.MergeFormProps}}
-						<div class="divider"></div>
 						{{$showGeneralMergeForm = true}}
 						{{/* The merge form is a Vue component. After mounted, it has a button for choosing merge style, so make it have min-height to avoid layout shifting */}}
-						<div id="pull-request-merge-form" class="tw-min-h-[40px]" data-merge-form-props="{{JsonUtils.EncodeToString $data.MergeFormProps}}"></div>
+						<div class="item">
+							<div id="pull-request-merge-form" class="tw-min-h-[40px]" data-merge-form-props="{{JsonUtils.EncodeToString $data.MergeFormProps}}"></div>
+						</div>
 					{{else}}
 						{{/* no merge style was set in repo setting: not or ($prUnit.PullRequestsConfig.AllowMerge ...) */}}
-						<div class="divider"></div>
 						<div class="item tw-text-red">
 							{{svg "octicon-x"}}
 							{{ctx.Locale.Tr "repo.pulls.no_merge_desc"}}
@@ -227,7 +226,6 @@
 					{{end}} {{/* end if the repo was set to use any merge style */}}
 				{{else}}
 					{{/* user is not allowed to merge */}}
-					<div class="divider"></div>
 					<div class="item">
 						{{svg "octicon-info"}}
 						{{ctx.Locale.Tr "repo.pulls.no_merge_access"}}
@@ -260,7 +258,7 @@
 						{{svg "octicon-x"}}
 						{{ctx.Locale.TrN $.ChangedProtectedFilesNum "repo.pulls.blocked_by_changed_protected_files_1" "repo.pulls.blocked_by_changed_protected_files_n"}}
 					</div>
-					<ul>
+					<ul class="item">
 						{{range .ChangedProtectedFiles}}
 						<li>{{.}}</li>
 						{{end}}
@@ -296,20 +294,24 @@
 			* Then the Manually Merged form will be shown in the merge form
 			*/}}
 			{{if and $.StillCanManualMerge (not $showGeneralMergeForm)}}
-				<div class="divider"></div>
-				<form class="ui form form-fetch-action" action="{{.Issue.Link}}/merge" method="post">{{/* another similar form is in PullRequestMergeForm.vue*/}}
-					<div class="field">
-						<input type="text" name="merge_commit_id" placeholder="{{ctx.Locale.Tr "repo.pulls.merge_commit_id"}}">
-					</div>
-					<button class="ui red button" type="submit" name="do" value="manually-merged">
-						{{ctx.Locale.Tr "repo.pulls.merge_manually"}}
-					</button>
-				</form>
+				<div class="item">
+					<form class="ui form form-fetch-action tw-flex-1" action="{{.Issue.Link}}/merge" method="post">{{/* another similar form is in PullRequestMergeForm.vue*/}}
+						<div class="field">
+							<input type="text" name="merge_commit_id" placeholder="{{ctx.Locale.Tr "repo.pulls.merge_commit_id"}}">
+						</div>
+						<button class="ui red button" type="submit" name="do" value="manually-merged">
+							{{ctx.Locale.Tr "repo.pulls.merge_manually"}}
+						</button>
+					</form>
+				</div>
 			{{end}}
 
 			{{if $data.ShowPullCommands}}
-				{{template "repo/issue/view_content/pull_merge_instruction" dict "PullRequest" .Issue.PullRequest "MergeBoxData" $data}}
+				<div class="item">
+					{{template "repo/issue/view_content/pull_merge_instruction" dict "PullRequest" .Issue.PullRequest "MergeBoxData" $data}}
+				</div>
 			{{end}}
+			</div>
 		</div>
 	</div>
 </div>

templates/repo/issue/view_content/pull_merge_instruction.tmpl

@@ -1,6 +1,5 @@
 {{$data := $.MergeBoxData}}
 {{$pull := $.PullRequest}}
-<div class="divider"></div>
 <details>
 	<summary>{{ctx.Locale.Tr "repo.pulls.cmd_instruction_hint"}}</summary>
 	<div class="tw-mt-2">

templates/repo/issue/view_content/update_branch_by_merge.tmpl

@@ -1,5 +1,4 @@
 {{if and (gt $.Issue.PullRequest.CommitsBehind 0) (not $.Issue.IsClosed) (not $.Issue.PullRequest.IsChecking) (not $.IsPullFilesConflicted) (not $.IsPullRequestBroken)}}
-	<div class="divider"></div>
 	<div class="item item-section">
 		<div class="item-section-left flex-text-inline">
 			{{svg "octicon-alert"}}

templates/repo/pulls/status.tmpl

@@ -6,22 +6,19 @@
 */}}
 {{$statusCheckData := .StatusCheckData}}
 {{if .CommitStatus}}
-<div class="commit-status-panel">
-	<div class="ui top attached header commit-status-header">
-		{{$statusCheckData.CommitStatusCheckPrompt ctx.Locale}}
-
+	{{if $statusCheckData}}
+	<div class="item flex-left-right commit-status-toggle">
+		<div>{{$statusCheckData.CommitStatusCheckPrompt ctx.Locale}}</div>
 		{{if .ShowHideChecks}}
-		<div class="ui right">
-			<button class="commit-status-hide-checks btn interact-fg"
+		<button data-global-click="onCommitStatusChecksToggle" class="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>
+			data-hide-all="{{ctx.Locale.Tr "repo.pulls.status_checks_hide_all"}}"
+		>{{ctx.Locale.Tr "repo.pulls.status_checks_hide_all"}}</button>
 		{{end}}
 	</div>
-
+	{{end}}
 	{{if and $statusCheckData $statusCheckData.RequireApprovalRunCount}}
-		<div class="ui attached segment flex-left-right" id="approve-status-checks">
+		<div class="item flex-left-right" id="approve-status-checks">
 			<div>
 				<strong>
 					{{ctx.Locale.Tr "repo.pulls.status_checks_need_approvals" $statusCheckData.RequireApprovalRunCount}}
@@ -36,28 +33,31 @@
 		</div>
 	{{end}}
 
-	<div class="commit-status-list">
+	<div class="item flex-divided-list commit-status-list">
 		{{range .CommitStatuses}}
-			<div class="commit-status-item">
-				{{template "repo/commit_status" .}}
-				<div class="status-context gt-ellipsis">{{.Context}} <span class="tw-text-text-light-2">{{.Description}}</span></div>
-				<div class="ui status-details">
+			<div class="item commit-status-item">
+				<div class="flex-text-block">
+					{{template "repo/commit_status" .}}
+					<div class="status-context gt-ellipsis">{{.Context}} <span class="tw-text-text-light-2">{{.Description}}</span></div>
+				</div>
+				<div class="status-details">
 					{{if and $statusCheckData $statusCheckData.IsContextRequired}}
 						{{if (call $statusCheckData.IsContextRequired .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 .TargetURL}}<a href="{{.TargetURL}}">{{ctx.Locale.Tr "repo.pulls.status_checks_details"}}</a>{{end}}
 				</div>
 			</div>
 		{{end}}
 		{{if $statusCheckData}}
 			{{range $statusCheckData.MissingRequiredChecks}}
-				<div class="commit-status-item">
-					{{svg "octicon-dot-fill" 18 "commit-status icon tw-text-yellow"}}
-					<div class="status-context gt-ellipsis">{{.}}</div>
+				<div class="item commit-status-item">
+					<div class="flex-text-block">
+						{{svg "octicon-dot-fill" 16 "commit-status icon tw-text-yellow"}}
+						<div class="status-context gt-ellipsis">{{.}}</div>
+					</div>
 					<div class="ui label">{{ctx.Locale.Tr "repo.pulls.status_checks_requested"}}</div>
 				</div>
 			{{end}}
 		{{end}}
 	</div>
-</div>
 {{end}}