Add pull request manually merge instruction (#13840)

* add pull request command line instructions

* Add pull request manually merge instuction

* Fix styles

* Fix lint

* Move inline style to class file

* add space between merge button and hint text

* Add sentence end charcter

* Change the language file

* adjust secondary bg

* further adjustment

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

7 files changed, 78 insertions, 42 deletions

diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index ff54bcd3b3..58fd7d8f50 100644
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -86,6 +86,9 @@ write = Write
 preview = Preview
 loading = Loading…
 
+step1 = Step 1:
+step2 = Step 2:
+
 error404 = The page you are trying to reach either <strong>does not exist</strong> or <strong>you are not authorized</strong> to view it.
 
 [error]
@@ -1296,6 +1299,10 @@ pulls.update_not_allowed = You are not allowed to update branch
 pulls.outdated_with_base_branch = This branch is out-of-date with the base branch
 pulls.closed_at = `closed this pull request <a id="%[1]s" href="#%[1]s">%[2]s</a>`
 pulls.reopened_at = `reopened this pull request <a id="%[1]s" href="#%[1]s">%[2]s</a>`
+pulls.merge_instruction_hint = `You can also view <a class="show-instruction">command line instructions</a>.`
+
+pulls.merge_instruction_step1_desc = From your project repository, check out a new branch and test the changes.
+pulls.merge_instruction_step2_desc = Merge the changes and update on Gitea.
 
 milestones.new = New Milestone
 milestones.open_tab = %d Open
diff --git a/templates/repo/issue/view_content/pull.tmpl b/templates/repo/issue/view_content/pull.tmpl
index c8fb50d86d..facb379a18 100644
--- a/templates/repo/issue/view_content/pull.tmpl
+++ b/templates/repo/issue/view_content/pull.tmpl
@@ -323,43 +323,60 @@
 								</form>
 							</div>
 							{{end}}
-							<div class="ui {{if $notAllOverridableChecksOk}}red{{else}}green{{end}} buttons merge-button">
-								<button class="ui button" data-do="{{.MergeStyle}}">
-									{{svg "octicon-git-merge"}}
-									<span class="button-text">
-									{{if eq .MergeStyle "merge"}}
-										{{$.i18n.Tr "repo.pulls.merge_pull_request"}}
-									{{end}}
-									{{if eq .MergeStyle "rebase"}}
-										{{$.i18n.Tr "repo.pulls.rebase_merge_pull_request"}}
-									{{end}}
-									{{if eq .MergeStyle "rebase-merge"}}
-										{{$.i18n.Tr "repo.pulls.rebase_merge_commit_pull_request"}}
-									{{end}}
-									{{if eq .MergeStyle "squash"}}
-										{{$.i18n.Tr "repo.pulls.squash_merge_pull_request"}}
-									{{end}}
-									</span>
-								</button>
-								{{if gt $prUnit.PullRequestsConfig.AllowedMergeStyleCount 1}}
-									<div class="ui dropdown icon button">
-										{{svg "octicon-triangle-down" 14 "dropdown icon"}}
-										<div class="menu">
-											{{if $prUnit.PullRequestsConfig.AllowMerge}}
-											<div class="item{{if eq .MergeStyle "merge"}} active selected{{end}}" data-do="merge">{{$.i18n.Tr "repo.pulls.merge_pull_request"}}</div>
-											{{end}}
-											{{if $prUnit.PullRequestsConfig.AllowRebase}}
-											<div class="item{{if eq .MergeStyle "rebase"}} active selected{{end}}" data-do="rebase">{{$.i18n.Tr "repo.pulls.rebase_merge_pull_request"}}</div>
-											{{end}}
-											{{if $prUnit.PullRequestsConfig.AllowRebaseMerge}}
-											<div class="item{{if eq .MergeStyle "rebase-merge"}} active selected{{end}}" data-do="rebase-merge">{{$.i18n.Tr "repo.pulls.rebase_merge_commit_pull_request"}}</div>
-											{{end}}
-											{{if $prUnit.PullRequestsConfig.AllowSquash}}
-											<div class="item{{if eq .MergeStyle "squash"}} active selected{{end}}" data-do="squash">{{$.i18n.Tr "repo.pulls.squash_merge_pull_request"}}</div>
-											{{end}}
+							<div class="dib">
+								<div class="ui {{if $notAllOverridableChecksOk}}red{{else}}green{{end}} buttons merge-button">
+									<button class="ui button" data-do="{{.MergeStyle}}">
+										{{svg "octicon-git-merge"}}
+										<span class="button-text">
+										{{if eq .MergeStyle "merge"}}
+											{{$.i18n.Tr "repo.pulls.merge_pull_request"}}
+										{{end}}
+										{{if eq .MergeStyle "rebase"}}
+											{{$.i18n.Tr "repo.pulls.rebase_merge_pull_request"}}
+										{{end}}
+										{{if eq .MergeStyle "rebase-merge"}}
+											{{$.i18n.Tr "repo.pulls.rebase_merge_commit_pull_request"}}
+										{{end}}
+										{{if eq .MergeStyle "squash"}}
+											{{$.i18n.Tr "repo.pulls.squash_merge_pull_request"}}
+										{{end}}
+										</span>
+									</button>
+									{{if gt $prUnit.PullRequestsConfig.AllowedMergeStyleCount 1}}
+										<div class="ui dropdown icon button">
+											{{svg "octicon-triangle-down" 14 "dropdown icon"}}
+											<div class="menu">
+												{{if $prUnit.PullRequestsConfig.AllowMerge}}
+												<div class="item{{if eq .MergeStyle "merge"}} active selected{{end}}" data-do="merge">{{$.i18n.Tr "repo.pulls.merge_pull_request"}}</div>
+												{{end}}
+												{{if $prUnit.PullRequestsConfig.AllowRebase}}
+												<div class="item{{if eq .MergeStyle "rebase"}} active selected{{end}}" data-do="rebase">{{$.i18n.Tr "repo.pulls.rebase_merge_pull_request"}}</div>
+												{{end}}
+												{{if $prUnit.PullRequestsConfig.AllowRebaseMerge}}
+												<div class="item{{if eq .MergeStyle "rebase-merge"}} active selected{{end}}" data-do="rebase-merge">{{$.i18n.Tr "repo.pulls.rebase_merge_commit_pull_request"}}</div>
+												{{end}}
+												{{if $prUnit.PullRequestsConfig.AllowSquash}}
+												<div class="item{{if eq .MergeStyle "squash"}} active selected{{end}}" data-do="squash">{{$.i18n.Tr "repo.pulls.squash_merge_pull_request"}}</div>
+												{{end}}
+											</div>
 										</div>
-									</div>
-								{{end}}
+									{{end}}
+								</div>
+							</div>
+							<div class="dib ml-3">{{$.i18n.Tr "repo.pulls.merge_instruction_hint" | Safe}}</div>
+							<div class="instruct" style="display:none">
+								<div class="ui divider"></div>
+								<div><h3 class="di">{{$.i18n.Tr "step1"}} </h3>{{$.i18n.Tr "repo.pulls.merge_instruction_step1_desc"}}</div>
+								<div class="ui secondary segment">
+									<div>git checkout -b {{if ne .Issue.PullRequest.HeadRepo.ID .Issue.PullRequest.BaseRepo.ID}}{{.Issue.PullRequest.HeadRepo.OwnerName}}-{{end}}{{.Issue.PullRequest.HeadBranch}} {{.Issue.PullRequest.BaseBranch}}</div>
+									<div>git pull {{if ne .Issue.PullRequest.HeadRepo.ID .Issue.PullRequest.BaseRepo.ID}}{{.Issue.PullRequest.HeadRepo.HTMLURL}}{{else}}origin{{end}} {{.Issue.PullRequest.HeadBranch}}</div>
+								</div>
+								<div><h3 class="di">{{$.i18n.Tr "step2"}} </h3>{{$.i18n.Tr "repo.pulls.merge_instruction_step2_desc"}}</div>
+								<div class="ui secondary segment">
+									<div>git checkout {{.Issue.PullRequest.BaseBranch}}</div>
+									<div>git merge --no-ff {{if ne .Issue.PullRequest.HeadRepo.ID .Issue.PullRequest.BaseRepo.ID}}{{.Issue.PullRequest.HeadRepo.OwnerName}}-{{end}}{{.Issue.PullRequest.HeadBranch}}</div>
+									<div>git push origin {{.Issue.PullRequest.BaseBranch}}</div>
+								</div>
 							</div>
 						{{else}}
 							<div class="ui divider"></div>
diff --git a/templates/user/dashboard/repolist.tmpl b/templates/user/dashboard/repolist.tmpl
index e790dad83f..49ea869bf1 100644
--- a/templates/user/dashboard/repolist.tmpl
+++ b/templates/user/dashboard/repolist.tmpl
@@ -33,7 +33,7 @@
 					<span class="sr-only">{{.i18n.Tr "new_repo"}}</span>
 				</a>
 			</h4>
-			<div class="ui attached secondary segment repos-search">
+			<div class="ui attached segment repos-search">
 				<div class="ui fluid right action left icon input" :class="{loading: isLoading}">
 					<input @input="searchRepos(reposFilter)" v-model="searchQuery" ref="search" placeholder="{{.i18n.Tr "home.search_repos"}}">
 					<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 496495a1cd..0dc0a9273b 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -1201,6 +1201,12 @@ async function initRepository() {
   }
 }
 
+function initPullRequestMergeInstruction() {
+  $('.show-instruction').on('click', () => {
+    $('.instruct').toggle();
+  });
+}
+
 function initPullRequestReview() {
   if (window.location.hash && window.location.hash.startsWith('#issuecomment-')) {
     const commentDiv = $(window.location.hash);
@@ -2526,6 +2532,7 @@ $(document).ready(async () => {
   initContextPopups();
   initTableSort();
   initNotificationsTable();
+  initPullRequestMergeInstruction();
 
   const routes = {
     'div.user.settings': initUserSettings,
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 2cecd59c93..517075db8b 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -99,7 +99,8 @@
   --color-markdown-code-block: #00000008;
   --color-button: #ffffff;
   --color-code-bg: #ffffff;
-  --color-shadow: #00000024;
+  --color-markdown-code-block: #00000010;
+  --color-secondary-bg: #f4f4f4;
 }
 
 :root:lang(ja) {
@@ -1691,6 +1692,11 @@ a.ui.basic.label:hover {
   border-color: var(--color-secondary);
 }
 
+.ui.secondary.segment {
+  background: var(--color-secondary-bg);
+  color: var(--color-text-light);
+}
+
 .ui.attached.header {
   position: relative;
   background: var(--color-box-header);
diff --git a/web_src/less/helpers.less b/web_src/less/helpers.less
index c611076f48..04c1b6567b 100644
--- a/web_src/less/helpers.less
+++ b/web_src/less/helpers.less
@@ -1,5 +1,7 @@
 .df { display: flex !important; }
+.di { display: inline !important; }
 .dif { display: inline-flex !important; }
+.dib { display: inline-block !important; }
 .ac { align-items: center !important; }
 .tc { text-align: center !important; }
 .jc { justify-content: center !important; }
diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less
index 526fa58730..7002d18c6f 100644
--- a/web_src/less/themes/theme-arc-green.less
+++ b/web_src/less/themes/theme-arc-green.less
@@ -95,6 +95,7 @@
   --color-button: #353846;
   --color-code-bg: #2a2e3a;
   --color-shadow: #00000060;
+  --color-secondary-bg: #2a2e3a;
 }
 
 /* LineTableTD */
@@ -827,10 +828,6 @@ td.blob-hunk {
   color: #dbdbdb;
 }
 
-.ui.secondary.segment {
-  background: #353945;
-}
-
 .ui.attached.info.message,
 .ui.info.message {
   box-shadow: 0 0 0 1px #4b5e71 inset, 0 0 0 0 transparent;