Fix the Manually Merged form (#23015)

Regression bug of #19650

Close #20983
Close #21912

### The "Manually Merged" form

![image](https://user-images.githubusercontent.com/2114189/220170503-32638994-b509-4251-8aa1-d8393dda7184.png)

### Mark a PR as Manually Merged and close it

![image](https://user-images.githubusercontent.com/2114189/220170537-25c91b2c-7a9a-44d1-9e6a-ebe3f1dfc26a.png)

---------

Co-authored-by: Jason Song <i@wolfogre.com>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>

templates/repo/issue/view_content/pull.tmpl

@@ -129,6 +129,7 @@
  <div class="content">
  {{template "repo/pulls/status" .}}
  {{$canAutoMerge := false}}
+ {{$showGeneralMergeForm := false}}
  <div class="ui attached merge-section segment {{if not $.LatestCommitStatus}}no-header{{end}}">
  {{if .Issue.PullRequest.HasMerged}}
  <div class="item text">
@@ -320,6 +321,7 @@
  'textAutoMergeCancelSchedule': {{$.locale.Tr "repo.pulls.auto_merge_cancel_schedule"}},
  'textClearMergeMessage': {{$.locale.Tr "repo.pulls.clear_merge_message"}},
  'textClearMergeMessageHint': {{$.locale.Tr "repo.pulls.clear_merge_message_hint"}},
+ 'textMergeCommitId': {{$.locale.Tr "repo.pulls.merge_commit_id"}},
 
  'canMergeNow': {{$canMergeNow}},
  'allOverridableChecksOk': {{not $notAllOverridableChecksOk}},
@@ -379,6 +381,7 @@
  window.config.pageData.pullRequestMergeForm = mergeForm;
  </script>
 
+ {{$showGeneralMergeForm = true}}
  <div id="pull-request-merge-form"></div>
  {{else}}
  {{/* no merge style was set in repo setting: not or ($prUnit.PullRequestsConfig.AllowMerge ...) */}}
@@ -452,30 +455,21 @@
  {{$.locale.Tr "repo.pulls.cannot_auto_merge_helper"}}
  </div>
  {{end}}
- {{end}}
+ {{end}}{{/* end if: pull request status */}}
 
- {{if $.StillCanManualMerge}}
+ {{if and $.StillCanManualMerge (not $showGeneralMergeForm)}}
  <div class="ui divider"></div>
- <div class="ui form manually-merged-fields gt-hidden">
+ <div class="ui form">
  <form action="{{.Link}}/merge" method="post">
  {{.CsrfTokenHtml}}
  <div class="field">
- <input type="text" name="merge_commit_id"  placeholder="{{$.locale.Tr "repo.pulls.merge_commit_id"}}">
+ <input type="text" name="merge_commit_id" placeholder="{{$.locale.Tr "repo.pulls.merge_commit_id"}}">
  </div>
  <button class="ui red button" type="submit" name="do" value="manually-merged">
  {{$.locale.Tr "repo.pulls.merge_manually"}}
  </button>
- <button class="ui button merge-cancel">
- {{$.locale.Tr "cancel"}}
- </button>
  </form>
  </div>
-
- <div class="ui red buttons merge-button">
- <button class="ui button" data-do="manually-merged">
- {{$.locale.Tr "repo.pulls.merge_manually"}}
- </button>
- </div>
  {{end}}
 
  {{if and .ShowMergeInstructions .Issue.PullRequest.HeadRepo}}

web_src/js/components/PullRequestMergeForm.vue

@@ -36,6 +36,10 @@
  </div>
  </template>
 
+ <div class="field" v-if="mergeStyle === 'manually-merged'">
+ <input type="text" name="merge_commit_id" :placeholder="mergeForm.textMergeCommitId">
+ </div>
+
  <button class="ui button" :class="mergeButtonStyleClass" type="submit" name="do" :value="mergeStyle">
  {{ mergeStyleDetail.textDoMerge }}
  <template v-if="autoMergeWhenSucceed">