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>

2 files changed, 54 insertions, 37 deletions

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>