From 4d9e9b18d037c85b3c92f756ae2732eb8917852c Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sun, 8 May 2022 03:51:41 +0800
Subject: [PATCH 1/7] Use Vue to refactor pull merge UI

---
 templates/repo/issue/view_content/pull.tmpl   | 220 +++++-------------
 .../js/components/PullRequestMergeForm.vue    | 127 ++++++++++
 web_src/js/features/repo-issue-pr-form.js     |  12 +
 web_src/js/features/repo-issue.js             |  26 ---
 web_src/js/features/repo-legacy.js            |   6 +-
 5 files changed, 195 insertions(+), 196 deletions(-)
 create mode 100644 web_src/js/components/PullRequestMergeForm.vue
 create mode 100644 web_src/js/features/repo-issue-pr-form.js

diff --git a/templates/repo/issue/view_content/pull.tmpl b/templates/repo/issue/view_content/pull.tmpl
index 8c43ace32e134..710e58577c472 100644
--- a/templates/repo/issue/view_content/pull.tmpl
+++ b/templates/repo/issue/view_content/pull.tmpl
@@ -322,176 +322,60 @@
 						{{$prUnit := .Repository.MustGetUnit $.UnitTypePullRequests}}
 						{{$approvers := .Issue.PullRequest.GetApprovers}}
 						{{if or $prUnit.PullRequestsConfig.AllowMerge $prUnit.PullRequestsConfig.AllowRebase $prUnit.PullRequestsConfig.AllowRebaseMerge $prUnit.PullRequestsConfig.AllowSquash}}
+
 							<div class="ui divider"></div>
-							{{if $prUnit.PullRequestsConfig.AllowMerge}}
-							<div class="ui form merge-fields" style="display: none">
-								<form action="{{.Link}}/merge" method="post">
-									{{.CsrfTokenHtml}}
-									<input type="hidden" name="head_commit_id" value="{{.PullHeadCommitID}}">
-									<div class="field">
-										<input type="text" name="merge_title_field" value="{{.Issue.PullRequest.GetDefaultMergeMessage $.Context}}">
-									</div>
-									<div class="field">
-										<textarea name="merge_message_field" rows="5" placeholder="{{$.i18n.Tr "repo.editor.commit_message_desc"}}">Reviewed-on: {{$.Issue.HTMLURL}}&#13;&#10;{{$approvers}}</textarea>
-									</div>
-									<button class="ui green button" type="submit" name="do" value="merge">
-										{{$.i18n.Tr "repo.pulls.merge_pull_request"}}
-									</button>
-									<button class="ui button merge-cancel">
-										{{$.i18n.Tr "cancel"}}
-									</button>
-									{{if .IsPullBranchDeletable}}
-										<div class="ui checkbox ml-2">
-											<input name="delete_branch_after_merge" type="checkbox" {{if $prUnit.PullRequestsConfig.DefaultDeleteBranchAfterMerge}}checked{{end}}>
-											<label>{{$.i18n.Tr "repo.branch.delete" .HeadTarget}}</label>
-										</div>
-									{{end}}
-								</form>
-							</div>
-							{{end}}
-							{{if $prUnit.PullRequestsConfig.AllowRebase}}
-							<div class="ui form rebase-fields" style="display: none">
-								<form action="{{.Link}}/merge" method="post">
-									{{.CsrfTokenHtml}}
-									<input type="hidden" name="head_commit_id" value="{{.PullHeadCommitID}}">
-									<button class="ui green button" type="submit" name="do" value="rebase">
-										{{$.i18n.Tr "repo.pulls.rebase_merge_pull_request"}}
-									</button>
-									<button class="ui button merge-cancel">
-										{{$.i18n.Tr "cancel"}}
-									</button>
-									{{if .IsPullBranchDeletable}}
-										<div class="ui checkbox ml-2">
-											<input name="delete_branch_after_merge" type="checkbox" {{if $prUnit.PullRequestsConfig.DefaultDeleteBranchAfterMerge}}checked{{end}}>
-											<label>{{$.i18n.Tr "repo.branch.delete" .HeadTarget}}</label>
-										</div>
-									{{end}}
-								</form>
-							</div>
-							{{end}}
-							{{if $prUnit.PullRequestsConfig.AllowRebaseMerge}}
-							<div class="ui form rebase-merge-fields" style="display: none">
-								<form action="{{.Link}}/merge" method="post">
-									{{.CsrfTokenHtml}}
-									<input type="hidden" name="head_commit_id" value="{{.PullHeadCommitID}}">
-									<div class="field">
-										<input type="text" name="merge_title_field" value="{{.Issue.PullRequest.GetDefaultMergeMessage $.Context}}">
-									</div>
-									<div class="field">
-										<textarea name="merge_message_field" rows="5" placeholder="{{$.i18n.Tr "repo.editor.commit_message_desc"}}">Reviewed-on: {{$.Issue.HTMLURL}}&#13;&#10;{{$approvers}}</textarea>
-									</div>
-									<button class="ui green button" type="submit" name="do" value="rebase-merge">
-										{{$.i18n.Tr "repo.pulls.rebase_merge_commit_pull_request"}}
-									</button>
-									<button class="ui button merge-cancel">
-										{{$.i18n.Tr "cancel"}}
-									</button>
-									{{if .IsPullBranchDeletable}}
-										<div class="ui checkbox ml-2">
-											<input name="delete_branch_after_merge" type="checkbox" {{if $prUnit.PullRequestsConfig.DefaultDeleteBranchAfterMerge}}checked{{end}}>
-											<label>{{$.i18n.Tr "repo.branch.delete" .HeadTarget}}</label>
-										</div>
-									{{end}}
-								</form>
-							</div>
-							{{end}}
-							{{if $prUnit.PullRequestsConfig.AllowSquash}}
-							<div class="ui form squash-fields" style="display: none">
-								<form action="{{.Link}}/merge" method="post">
-									{{.CsrfTokenHtml}}
-									<input type="hidden" name="head_commit_id" value="{{.PullHeadCommitID}}">
-									<div class="field">
-										<input type="text" name="merge_title_field" value="{{.Issue.PullRequest.GetDefaultSquashMessage $.Context}}">
-									</div>
-									<div class="field">
-										<textarea name="merge_message_field" rows="5" placeholder="{{$.i18n.Tr "repo.editor.commit_message_desc"}}">{{.GetCommitMessages}}Reviewed-on: {{$.Issue.HTMLURL}}&#13;&#10;{{$approvers}}</textarea>
-									</div>
-									<button class="ui green button" type="submit" name="do" value="squash">
-										{{$.i18n.Tr "repo.pulls.squash_merge_pull_request"}}
-									</button>
-									<button class="ui button merge-cancel">
-										{{$.i18n.Tr "cancel"}}
-									</button>
-									{{if .IsPullBranchDeletable}}
-										<div class="ui checkbox ml-2">
-											<input name="delete_branch_after_merge" type="checkbox" {{if $prUnit.PullRequestsConfig.DefaultDeleteBranchAfterMerge}}checked{{end}}>
-											<label>{{$.i18n.Tr "repo.branch.delete" .HeadTarget}}</label>
-										</div>
-									{{end}}
-								</form>
-							</div>
-							{{end}}
-							{{if and $prUnit.PullRequestsConfig.AllowManualMerge $.IsRepoAdmin}}
-								<div class="ui form manually-merged-fields" style="display: none">
-									<form action="{{.Link}}/merge" method="post">
-										{{.CsrfTokenHtml}}
-										<input type="hidden" name="head_commit_id" value="{{.PullHeadCommitID}}">
-										<div class="field">
-											<input type="text" name="merge_commit_id"  placeholder="{{$.i18n.Tr "repo.pulls.merge_commit_id"}}">
-										</div>
-										<button class="ui red button" type="submit" name="do" value="manually-merged">
-											{{$.i18n.Tr "repo.pulls.merge_manually"}}
-										</button>
-										<button class="ui button merge-cancel">
-											{{$.i18n.Tr "cancel"}}
-										</button>
-										{{if .IsPullBranchDeletable}}
-											<div class="ui checkbox ml-2">
-												<input name="delete_branch_after_merge" type="checkbox" {{if $prUnit.PullRequestsConfig.DefaultDeleteBranchAfterMerge}}checked{{end}}>
-												<label>{{$.i18n.Tr "repo.branch.delete" .HeadTarget}}</label>
-											</div>
-										{{end}}
-									</form>
-								</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}}
-										{{if eq .MergeStyle "manually-merged"}}
-											{{$.i18n.Tr "repo.pulls.merge_manually"}}
-										{{end}}
-										</span>
-									</button>
-									{{if gt $prUnit.PullRequestsConfig.AllowedMergeStyleCount 1}}
-										<div class="ui dropdown icon button no-text">
-											{{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}}
-												{{if and $prUnit.PullRequestsConfig.AllowManualMerge $.IsRepoAdmin}}
-												<div class="item{{if eq .MergeStyle "manually-merged"}} active selected{{end}}" data-do="manually-merged">{{$.i18n.Tr "repo.pulls.merge_manually"}}</div>
-												{{end}}
-											</div>
-										</div>
-									{{end}}
-								</div>
-							</div>
+
+							<script type="module">
+								<!-- /* eslint-disable */ -->
+								const mergeForm = {
+									'baseLink': {{.Link}},
+									'textCancel': {{$.i18n.Tr "cancel"}},
+									'textDeleteBranch': {{$.i18n.Tr "repo.branch.delete" .HeadTarget}},
+
+									'allOverridableChecksOk': {{not $notAllOverridableChecksOk}},
+									'pullHeadCommitID':{{.PullHeadCommitID}},
+									'mergeTitleFieldText': {{.Issue.PullRequest.GetDefaultMergeMessage $.Context}},
+									'mergeMessageFieldPlaceHolder': {{$.i18n.Tr "repo.editor.commit_message_desc"}},
+									'mergeMessageFieldText': 'Reviewed-on: ' + {{$.Issue.HTMLURL}} + '\n' + {{$approvers}},
+									'isPullBranchDeletable': {{.IsPullBranchDeletable}},
+									'defaultDeleteBranchAfterMerge': {{$prUnit.PullRequestsConfig.DefaultDeleteBranchAfterMerge}},
+								};
+								mergeForm['mergeStyles'] = [
+									{
+										'name': 'merge',
+										'allowed': {{$prUnit.PullRequestsConfig.AllowMerge}},
+										'textDoMerge': {{$.i18n.Tr "repo.pulls.merge_pull_request"}},
+									},
+									{
+										'name': 'rebase',
+										'allowed': {{$prUnit.PullRequestsConfig.AllowRebase}},
+										'textDoMerge': {{$.i18n.Tr "repo.pulls.rebase_merge_pull_request"}},
+										'hideMergeMessage': true,
+									},
+									{
+										'name': 'rebase-merge',
+										'allowed': {{$prUnit.PullRequestsConfig.AllowRebaseMerge}},
+										'textDoMerge': {{$.i18n.Tr "repo.pulls.rebase_merge_commit_pull_request"}},
+									},
+									{
+										'name': 'squash',
+										'allowed': {{$prUnit.PullRequestsConfig.AllowSquash}},
+										'textDoMerge': {{$.i18n.Tr "repo.pulls.squash_merge_pull_request"}},
+									},
+									{
+										'name': 'manually-merged',
+										'allowed': {{and $prUnit.PullRequestsConfig.AllowManualMerge $.IsRepoAdmin}},
+										'textDoMerge': {{$.i18n.Tr "repo.pulls.merge_manually"}},
+										'hideMergeMessage': true,
+									}
+								];
+								window.config.pageData.pullRequestMergeForm = mergeForm;
+							</script>
+
+							<div id="pull-request-merge-form"></div>
+
 							{{if .ShowMergeInstructions}}
-								<div class="instruct-toggle ml-3"> {{$.i18n.Tr "repo.pulls.merge_instruction_hint" | Safe}} </div>
+								<div class="instruct-toggle mt-3"> {{$.i18n.Tr "repo.pulls.merge_instruction_hint" | Safe}} </div>
 								<div class="instruct-content" 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>
diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue
new file mode 100644
index 0000000000000..323ff4bbe25e5
--- /dev/null
+++ b/web_src/js/components/PullRequestMergeForm.vue
@@ -0,0 +1,127 @@
+<template>
+  <div>
+    <div class="ui form" v-if="showActionForm">
+      <form :action="mergeForm.baseLink+'/merge'" method="post">
+        <input type="hidden" name="_csrf" :value="csrfToken">
+        <input type="hidden" name="head_commit_id" v-model="mergeForm.pullHeadCommitID">
+
+        <template v-if="!mergeStyleDetail.hideMergeMessage">
+          <div class="field">
+            <input type="text" name="merge_title_field" v-model="mergeTitleFieldValue">
+          </div>
+          <div class="field">
+            <textarea name="merge_message_field" rows="5" :placeholder="mergeForm.mergeMessageFieldPlaceHolder" v-model="mergeMessageFieldValue"/>
+          </div>
+        </template>
+
+        <button class="ui green button" type="submit" name="do" :value="mergeStyle">
+          {{ mergeStyleDetail.textDoMerge }}
+        </button>
+
+        <button class="ui button merge-cancel" @click="showActionForm=false">
+          {{ mergeForm.textCancel }}
+        </button>
+
+        <div class="ui checkbox" v-if="mergeForm.isPullBranchDeletable">
+          <input name="delete_branch_after_merge" type="checkbox" v-model="deleteBranchAfterMerge" id="delete-branch-after-merge">
+          <label for="delete-branch-after-merge">{{ mergeForm.textDeleteBranch }}</label>
+        </div>
+      </form>
+    </div>
+
+    <div v-if="!showActionForm">
+      <div class="ui buttons merge-button" :class="[mergeForm.allOverridableChecksOk?'green':'red']" @click="showActionForm=true">
+        <button class="ui button">
+          <svg-icon name="octicon-git-merge"/>
+          <span class="button-text">{{ mergeStyleDetail.textDoMerge }}</span>
+        </button>
+        <div class="ui dropdown icon button no-text" @click.stop="showMergeStyleMenu = !showMergeStyleMenu" v-if="mergeStyleAllowedCount>1">
+          <svg-icon name="octicon-triangle-down" :size="14"/>
+          <div class="menu" :class="{'show':showMergeStyleMenu}">
+            <template v-for="msd in mergeForm.mergeStyles">
+              <div class="item" v-if="msd.allowed" :key="msd.name" @click.stop="mergeStyle=msd.name">
+                {{ msd.textDoMerge }}
+              </div>
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {SvgIcon} from '../svg.js';
+
+const {csrfToken, pageData} = window.config;
+
+export default {
+  name: 'PullRequestMergeForm',
+  components: {
+    SvgIcon,
+  },
+
+  data: () => ({
+    csrfToken,
+    mergeForm: pageData.pullRequestMergeForm,
+
+    mergeTitleFieldValue: '',
+    mergeMessageFieldValue: '',
+    deleteBranchAfterMerge: false,
+
+    mergeStyle: '',
+    mergeStyleDetail: {
+      textDoMerge: '',
+    },
+    mergeStyleAllowedCount: 0,
+
+    showMergeStyleMenu: false,
+    showActionForm: false,
+  }),
+
+  watch: {
+    mergeStyle(val) {
+      for (const msd of this.mergeForm.mergeStyles) {
+        if (val === msd.name) {
+          this.mergeStyleDetail = msd;
+        }
+      }
+    }
+  },
+
+  created() {
+    for (const msd of this.mergeForm.mergeStyles) {
+      if (msd.allowed) {
+        if (!this.mergeStyle) this.mergeStyle = msd.name;
+        this.mergeStyleAllowedCount++;
+      }
+    }
+    this.deleteBranchAfterMerge = this.mergeForm.defaultDeleteBranchAfterMerge;
+    this.mergeTitleFieldValue = this.mergeForm.mergeTitleFieldText;
+    this.mergeMessageFieldValue = this.mergeForm.mergeMessageFieldText;
+  },
+
+  mounted() {
+    document.addEventListener('mouseup', this.hideMergeStyleMenu);
+  },
+
+  unmounted() {
+    document.removeEventListener('mouseup', this.hideMergeStyleMenu);
+  },
+
+  methods: {
+    hideMergeStyleMenu() {
+      this.showMergeStyleMenu = false;
+    }
+  },
+};
+</script>
+
+<style scoped>
+.ui.dropdown .menu.show {
+  display: block;
+}
+.ui.checkbox label {
+  cursor: pointer;
+}
+</style>
diff --git a/web_src/js/features/repo-issue-pr-form.js b/web_src/js/features/repo-issue-pr-form.js
new file mode 100644
index 0000000000000..89ca3c7987d18
--- /dev/null
+++ b/web_src/js/features/repo-issue-pr-form.js
@@ -0,0 +1,12 @@
+import Vue from 'vue';
+import PullRequestMergeForm from '../components/PullRequestMergeForm.vue';
+
+export default function initPullRequestMergeForm() {
+  const el = document.getElementById('pull-request-merge-form');
+  if (!el) return;
+
+  const View = Vue.extend({
+    render: (createElement) => createElement(PullRequestMergeForm, {props: {}}),
+  });
+  new View().$mount(el);
+}
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index 4e077c14e2e69..bdd616f071838 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -234,32 +234,6 @@ export function initRepoIssueStatusButton() {
   });
 }
 
-export function initRepoPullRequestMerge() {
-  // Pull Request merge button
-  const $mergeButton = $('.merge-button > button');
-  $mergeButton.on('click', function (e) {
-    e.preventDefault();
-    $(`.${$(this).data('do')}-fields`).show();
-    $(this).parent().hide();
-    $('.instruct-toggle').hide();
-    $('.instruct-content').hide();
-  });
-  $('.merge-button > .dropdown').dropdown({
-    onChange(_text, _value, $choice) {
-      if ($choice.data('do')) {
-        $mergeButton.find('.button-text').text($choice.text());
-        $mergeButton.data('do', $choice.data('do'));
-      }
-    }
-  });
-  $('.merge-cancel').on('click', function (e) {
-    e.preventDefault();
-    $(this).closest('.form').hide();
-    $mergeButton.parent().show();
-    $('.instruct-toggle').show();
-  });
-}
-
 export function initRepoPullRequestUpdate() {
   // Pull Request update button
   const $pullUpdateButton = $('.update-button > button');
diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js
index b7e6206e53a95..a24d1b974a02a 100644
--- a/web_src/js/features/repo-legacy.js
+++ b/web_src/js/features/repo-legacy.js
@@ -8,7 +8,7 @@ import {
   initRepoIssueComments, initRepoIssueDependencyDelete,
   initRepoIssueReferenceIssue, initRepoIssueStatusButton,
   initRepoIssueTitleEdit,
-  initRepoIssueWipToggle, initRepoPullRequestMerge, initRepoPullRequestUpdate,
+  initRepoIssueWipToggle, initRepoPullRequestUpdate,
   updateIssuesMeta,
 } from './repo-issue.js';
 import {initUnicodeEscapeButton} from './repo-unicode-escape.js';
@@ -28,6 +28,7 @@ import createDropzone from './dropzone.js';
 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';
 
 const {csrfToken} = window.config;
 
@@ -507,9 +508,10 @@ export function initRepository() {
     initRepoIssueDependencyDelete();
     initRepoIssueCodeCommentCancel();
     initRepoIssueStatusButton();
-    initRepoPullRequestMerge();
     initRepoPullRequestUpdate();
     initCompReactionSelector();
+
+    initRepoPullRequestMergeForm();
   }
 
   // Pull request

From 1f3d5793fb37bcdd5c942bcf3adef84d75d7090f Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sun, 8 May 2022 04:01:56 +0800
Subject: [PATCH 2/7] add comments

---
 web_src/js/components/PullRequestMergeForm.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue
index 323ff4bbe25e5..1d53d4207cc80 100644
--- a/web_src/js/components/PullRequestMergeForm.vue
+++ b/web_src/js/components/PullRequestMergeForm.vue
@@ -70,7 +70,8 @@ export default {
     deleteBranchAfterMerge: false,
 
     mergeStyle: '',
-    mergeStyleDetail: {
+    mergeStyleDetail: { // dummy only, these values will come from one of the mergeForm.mergeStyles
+      hideMergeMessage: false,
       textDoMerge: '',
     },
     mergeStyleAllowedCount: 0,
@@ -117,6 +118,7 @@ export default {
 };
 </script>
 
+<!-- to keep UI the same, at the moment we are still using some Fomantic UI styles, but we do not use their scripts, so we need to fine tune some styles -->
 <style scoped>
 .ui.dropdown .menu.show {
   display: block;

From 0c3d0909defd7f88c719f18a5207c340b1de7b2d Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sun, 8 May 2022 04:07:32 +0800
Subject: [PATCH 3/7] fix comments

---
 templates/repo/issue/view_content/pull.tmpl   | 88 ++++++++++---------
 .../js/components/PullRequestMergeForm.vue    |  2 +-
 2 files changed, 46 insertions(+), 44 deletions(-)

diff --git a/templates/repo/issue/view_content/pull.tmpl b/templates/repo/issue/view_content/pull.tmpl
index 710e58577c472..53f747efdcf4c 100644
--- a/templates/repo/issue/view_content/pull.tmpl
+++ b/templates/repo/issue/view_content/pull.tmpl
@@ -325,51 +325,53 @@
 
 							<div class="ui divider"></div>
 
-							<script type="module">
+							<script>
 								<!-- /* eslint-disable */ -->
-								const mergeForm = {
-									'baseLink': {{.Link}},
-									'textCancel': {{$.i18n.Tr "cancel"}},
-									'textDeleteBranch': {{$.i18n.Tr "repo.branch.delete" .HeadTarget}},
+								(() => {
+									const mergeForm = {
+										'baseLink': {{.Link}},
+										'textCancel': {{$.i18n.Tr "cancel"}},
+										'textDeleteBranch': {{$.i18n.Tr "repo.branch.delete" .HeadTarget}},
 
-									'allOverridableChecksOk': {{not $notAllOverridableChecksOk}},
-									'pullHeadCommitID':{{.PullHeadCommitID}},
-									'mergeTitleFieldText': {{.Issue.PullRequest.GetDefaultMergeMessage $.Context}},
-									'mergeMessageFieldPlaceHolder': {{$.i18n.Tr "repo.editor.commit_message_desc"}},
-									'mergeMessageFieldText': 'Reviewed-on: ' + {{$.Issue.HTMLURL}} + '\n' + {{$approvers}},
-									'isPullBranchDeletable': {{.IsPullBranchDeletable}},
-									'defaultDeleteBranchAfterMerge': {{$prUnit.PullRequestsConfig.DefaultDeleteBranchAfterMerge}},
-								};
-								mergeForm['mergeStyles'] = [
-									{
-										'name': 'merge',
-										'allowed': {{$prUnit.PullRequestsConfig.AllowMerge}},
-										'textDoMerge': {{$.i18n.Tr "repo.pulls.merge_pull_request"}},
-									},
-									{
-										'name': 'rebase',
-										'allowed': {{$prUnit.PullRequestsConfig.AllowRebase}},
-										'textDoMerge': {{$.i18n.Tr "repo.pulls.rebase_merge_pull_request"}},
-										'hideMergeMessage': true,
-									},
-									{
-										'name': 'rebase-merge',
-										'allowed': {{$prUnit.PullRequestsConfig.AllowRebaseMerge}},
-										'textDoMerge': {{$.i18n.Tr "repo.pulls.rebase_merge_commit_pull_request"}},
-									},
-									{
-										'name': 'squash',
-										'allowed': {{$prUnit.PullRequestsConfig.AllowSquash}},
-										'textDoMerge': {{$.i18n.Tr "repo.pulls.squash_merge_pull_request"}},
-									},
-									{
-										'name': 'manually-merged',
-										'allowed': {{and $prUnit.PullRequestsConfig.AllowManualMerge $.IsRepoAdmin}},
-										'textDoMerge': {{$.i18n.Tr "repo.pulls.merge_manually"}},
-										'hideMergeMessage': true,
-									}
-								];
-								window.config.pageData.pullRequestMergeForm = mergeForm;
+										'allOverridableChecksOk': {{not $notAllOverridableChecksOk}},
+										'pullHeadCommitID':{{.PullHeadCommitID}},
+										'mergeTitleFieldText': {{.Issue.PullRequest.GetDefaultMergeMessage $.Context}},
+										'mergeMessageFieldPlaceHolder': {{$.i18n.Tr "repo.editor.commit_message_desc"}},
+										'mergeMessageFieldText': 'Reviewed-on: ' + {{$.Issue.HTMLURL}} + '\n' + {{$approvers}},
+										'isPullBranchDeletable': {{.IsPullBranchDeletable}},
+										'defaultDeleteBranchAfterMerge': {{$prUnit.PullRequestsConfig.DefaultDeleteBranchAfterMerge}},
+									};
+									mergeForm['mergeStyles'] = [
+										{
+											'name': 'merge',
+											'allowed': {{$prUnit.PullRequestsConfig.AllowMerge}},
+											'textDoMerge': {{$.i18n.Tr "repo.pulls.merge_pull_request"}},
+										},
+										{
+											'name': 'rebase',
+											'allowed': {{$prUnit.PullRequestsConfig.AllowRebase}},
+											'textDoMerge': {{$.i18n.Tr "repo.pulls.rebase_merge_pull_request"}},
+											'hideMergeMessage': true,
+										},
+										{
+											'name': 'rebase-merge',
+											'allowed': {{$prUnit.PullRequestsConfig.AllowRebaseMerge}},
+											'textDoMerge': {{$.i18n.Tr "repo.pulls.rebase_merge_commit_pull_request"}},
+										},
+										{
+											'name': 'squash',
+											'allowed': {{$prUnit.PullRequestsConfig.AllowSquash}},
+											'textDoMerge': {{$.i18n.Tr "repo.pulls.squash_merge_pull_request"}},
+										},
+										{
+											'name': 'manually-merged',
+											'allowed': {{and $prUnit.PullRequestsConfig.AllowManualMerge $.IsRepoAdmin}},
+											'textDoMerge': {{$.i18n.Tr "repo.pulls.merge_manually"}},
+											'hideMergeMessage': true,
+										}
+									];
+									window.config.pageData.pullRequestMergeForm = mergeForm;
+								})();
 							</script>
 
 							<div id="pull-request-merge-form"></div>
diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue
index 1d53d4207cc80..6823a9a1e0d4f 100644
--- a/web_src/js/components/PullRequestMergeForm.vue
+++ b/web_src/js/components/PullRequestMergeForm.vue
@@ -118,8 +118,8 @@ export default {
 };
 </script>
 
-<!-- to keep UI the same, at the moment we are still using some Fomantic UI styles, but we do not use their scripts, so we need to fine tune some styles -->
 <style scoped>
+/* to keep UI the same, at the moment we are still using some Fomantic UI styles, but we do not use their scripts, so we need to fine tune some styles */
 .ui.dropdown .menu.show {
   display: block;
 }

From 3726a4820ca6bd05b011305fb34ca9e77da2b3c1 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sun, 8 May 2022 04:23:08 +0800
Subject: [PATCH 4/7] small fine tune

---
 templates/repo/issue/view_content/pull.tmpl    | 2 +-
 web_src/js/components/PullRequestMergeForm.vue | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/templates/repo/issue/view_content/pull.tmpl b/templates/repo/issue/view_content/pull.tmpl
index 53f747efdcf4c..90251f9779e0b 100644
--- a/templates/repo/issue/view_content/pull.tmpl
+++ b/templates/repo/issue/view_content/pull.tmpl
@@ -334,7 +334,7 @@
 										'textDeleteBranch': {{$.i18n.Tr "repo.branch.delete" .HeadTarget}},
 
 										'allOverridableChecksOk': {{not $notAllOverridableChecksOk}},
-										'pullHeadCommitID':{{.PullHeadCommitID}},
+										'pullHeadCommitID': {{.PullHeadCommitID}},
 										'mergeTitleFieldText': {{.Issue.PullRequest.GetDefaultMergeMessage $.Context}},
 										'mergeMessageFieldPlaceHolder': {{$.i18n.Tr "repo.editor.commit_message_desc"}},
 										'mergeMessageFieldText': 'Reviewed-on: ' + {{$.Issue.HTMLURL}} + '\n' + {{$approvers}},
diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue
index 6823a9a1e0d4f..40364d4d5e336 100644
--- a/web_src/js/components/PullRequestMergeForm.vue
+++ b/web_src/js/components/PullRequestMergeForm.vue
@@ -14,7 +14,7 @@
           </div>
         </template>
 
-        <button class="ui green button" type="submit" name="do" :value="mergeStyle">
+        <button class="ui button" :class="[mergeForm.allOverridableChecksOk?'green':'red']" type="submit" name="do" :value="mergeStyle">
           {{ mergeStyleDetail.textDoMerge }}
         </button>
 
@@ -22,14 +22,14 @@
           {{ mergeForm.textCancel }}
         </button>
 
-        <div class="ui checkbox" v-if="mergeForm.isPullBranchDeletable">
+        <div class="ui checkbox ml-2" v-if="mergeForm.isPullBranchDeletable">
           <input name="delete_branch_after_merge" type="checkbox" v-model="deleteBranchAfterMerge" id="delete-branch-after-merge">
           <label for="delete-branch-after-merge">{{ mergeForm.textDeleteBranch }}</label>
         </div>
       </form>
     </div>
 
-    <div v-if="!showActionForm">
+    <template v-if="!showActionForm">
       <div class="ui buttons merge-button" :class="[mergeForm.allOverridableChecksOk?'green':'red']" @click="showActionForm=true">
         <button class="ui button">
           <svg-icon name="octicon-git-merge"/>
@@ -46,7 +46,7 @@
           </div>
         </div>
       </div>
-    </div>
+    </template>
   </div>
 </template>
 

From 8fd26a78168f65f78f01c6817815050cf518b694 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sun, 8 May 2022 13:00:48 +0800
Subject: [PATCH 5/7] fix tests

---
 integrations/pull_merge_test.go |  6 ++----
 models/repo/repo_unit.go        | 18 ------------------
 2 files changed, 2 insertions(+), 22 deletions(-)

diff --git a/integrations/pull_merge_test.go b/integrations/pull_merge_test.go
index 476f7ab52f9f8..90ececf0bfdca 100644
--- a/integrations/pull_merge_test.go
+++ b/integrations/pull_merge_test.go
@@ -36,10 +36,8 @@ func testPullMerge(t *testing.T, session *TestSession, user, repo, pullnum strin
 	req := NewRequest(t, "GET", path.Join(user, repo, "pulls", pullnum))
 	resp := session.MakeRequest(t, req, http.StatusOK)
 
-	// Click the little green button to create a pull
 	htmlDoc := NewHTMLParser(t, resp.Body)
-	link, exists := htmlDoc.doc.Find(".ui.form." + string(mergeStyle) + "-fields > form").Attr("action")
-	assert.True(t, exists, "The template has changed")
+	link := path.Join(user, repo, "pulls", pullnum, "merge")
 	req = NewRequestWithValues(t, "POST", link, map[string]string{
 		"_csrf": htmlDoc.GetCSRF(),
 		"do":    string(mergeStyle),
@@ -56,7 +54,7 @@ func testPullCleanUp(t *testing.T, session *TestSession, user, repo, pullnum str
 	// Click the little green button to create a pull
 	htmlDoc := NewHTMLParser(t, resp.Body)
 	link, exists := htmlDoc.doc.Find(".timeline-item .delete-button").Attr("data-url")
-	assert.True(t, exists, "The template has changed")
+	assert.True(t, exists, "The template has changed, can not find delete button url")
 	req = NewRequestWithValues(t, "POST", link, map[string]string{
 		"_csrf": htmlDoc.GetCSRF(),
 	})
diff --git a/models/repo/repo_unit.go b/models/repo/repo_unit.go
index 37f1c70545060..794156c8fc1a2 100644
--- a/models/repo/repo_unit.go
+++ b/models/repo/repo_unit.go
@@ -150,24 +150,6 @@ func (cfg *PullRequestsConfig) GetDefaultMergeStyle() MergeStyle {
 	return MergeStyleMerge
 }
 
-// AllowedMergeStyleCount returns the total count of allowed merge styles for the PullRequestsConfig
-func (cfg *PullRequestsConfig) AllowedMergeStyleCount() int {
-	count := 0
-	if cfg.AllowMerge {
-		count++
-	}
-	if cfg.AllowRebase {
-		count++
-	}
-	if cfg.AllowRebaseMerge {
-		count++
-	}
-	if cfg.AllowSquash {
-		count++
-	}
-	return count
-}
-
 // BeforeSet is invoked from XORM before setting the value of a field of this object.
 func (r *RepoUnit) BeforeSet(colName string, val xorm.Cell) {
 	switch colName {

From b460a3567619fef060f6678e4c2d1d7ebb5bec17 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sun, 8 May 2022 22:01:21 +0800
Subject: [PATCH 6/7] adopt new pull default messages

---
 templates/repo/issue/view_content/pull.tmpl   | 17 +++++++---
 .../js/components/PullRequestMergeForm.vue    | 34 +++++++++----------
 2 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/templates/repo/issue/view_content/pull.tmpl b/templates/repo/issue/view_content/pull.tmpl
index 90251f9779e0b..c764138fa0474 100644
--- a/templates/repo/issue/view_content/pull.tmpl
+++ b/templates/repo/issue/view_content/pull.tmpl
@@ -328,6 +328,9 @@
 							<script>
 								<!-- /* eslint-disable */ -->
 								(() => {
+									const defaultMergeTitle = {{.DefaultMergeMessage}};
+									const defaultSquashMergeTitle = {{.DefaultSquashMergeMessage}};
+									const defaultMergeMessage = 'Reviewed-on: ' + {{$.Issue.HTMLURL}} + '\n' + {{$approvers}};
 									const mergeForm = {
 										'baseLink': {{.Link}},
 										'textCancel': {{$.i18n.Tr "cancel"}},
@@ -335,39 +338,43 @@
 
 										'allOverridableChecksOk': {{not $notAllOverridableChecksOk}},
 										'pullHeadCommitID': {{.PullHeadCommitID}},
-										'mergeTitleFieldText': {{.Issue.PullRequest.GetDefaultMergeMessage $.Context}},
-										'mergeMessageFieldPlaceHolder': {{$.i18n.Tr "repo.editor.commit_message_desc"}},
-										'mergeMessageFieldText': 'Reviewed-on: ' + {{$.Issue.HTMLURL}} + '\n' + {{$approvers}},
 										'isPullBranchDeletable': {{.IsPullBranchDeletable}},
 										'defaultDeleteBranchAfterMerge': {{$prUnit.PullRequestsConfig.DefaultDeleteBranchAfterMerge}},
+										'mergeMessageFieldPlaceHolder': {{$.i18n.Tr "repo.editor.commit_message_desc"}},
 									};
 									mergeForm['mergeStyles'] = [
 										{
 											'name': 'merge',
 											'allowed': {{$prUnit.PullRequestsConfig.AllowMerge}},
 											'textDoMerge': {{$.i18n.Tr "repo.pulls.merge_pull_request"}},
+											'mergeTitleFieldText': defaultMergeTitle,
+											'mergeMessageFieldText': defaultMergeMessage,
 										},
 										{
 											'name': 'rebase',
 											'allowed': {{$prUnit.PullRequestsConfig.AllowRebase}},
 											'textDoMerge': {{$.i18n.Tr "repo.pulls.rebase_merge_pull_request"}},
-											'hideMergeMessage': true,
+											'hideMergeMessageTexts': true,
 										},
 										{
 											'name': 'rebase-merge',
 											'allowed': {{$prUnit.PullRequestsConfig.AllowRebaseMerge}},
 											'textDoMerge': {{$.i18n.Tr "repo.pulls.rebase_merge_commit_pull_request"}},
+											'mergeTitleFieldText': defaultMergeTitle,
+											'mergeMessageFieldText': defaultMergeMessage,
 										},
 										{
 											'name': 'squash',
 											'allowed': {{$prUnit.PullRequestsConfig.AllowSquash}},
 											'textDoMerge': {{$.i18n.Tr "repo.pulls.squash_merge_pull_request"}},
+											'mergeTitleFieldText': defaultSquashMergeTitle,
+											'mergeMessageFieldText': defaultMergeMessage,
 										},
 										{
 											'name': 'manually-merged',
 											'allowed': {{and $prUnit.PullRequestsConfig.AllowManualMerge $.IsRepoAdmin}},
 											'textDoMerge': {{$.i18n.Tr "repo.pulls.merge_manually"}},
-											'hideMergeMessage': true,
+											'hideMergeMessageTexts': true,
 										}
 									];
 									window.config.pageData.pullRequestMergeForm = mergeForm;
diff --git a/web_src/js/components/PullRequestMergeForm.vue b/web_src/js/components/PullRequestMergeForm.vue
index 40364d4d5e336..40398a65cba74 100644
--- a/web_src/js/components/PullRequestMergeForm.vue
+++ b/web_src/js/components/PullRequestMergeForm.vue
@@ -5,7 +5,7 @@
         <input type="hidden" name="_csrf" :value="csrfToken">
         <input type="hidden" name="head_commit_id" v-model="mergeForm.pullHeadCommitID">
 
-        <template v-if="!mergeStyleDetail.hideMergeMessage">
+        <template v-if="!mergeStyleDetail.hideMergeMessageTexts">
           <div class="field">
             <input type="text" name="merge_title_field" v-model="mergeTitleFieldValue">
           </div>
@@ -18,7 +18,7 @@
           {{ mergeStyleDetail.textDoMerge }}
         </button>
 
-        <button class="ui button merge-cancel" @click="showActionForm=false">
+        <button class="ui button merge-cancel" @click="toggleActionForm(false)">
           {{ mergeForm.textCancel }}
         </button>
 
@@ -30,7 +30,7 @@
     </div>
 
     <template v-if="!showActionForm">
-      <div class="ui buttons merge-button" :class="[mergeForm.allOverridableChecksOk?'green':'red']" @click="showActionForm=true">
+      <div class="ui buttons merge-button" :class="[mergeForm.allOverridableChecksOk?'green':'red']" @click="toggleActionForm(true)">
         <button class="ui button">
           <svg-icon name="octicon-git-merge"/>
           <span class="button-text">{{ mergeStyleDetail.textDoMerge }}</span>
@@ -71,8 +71,10 @@ export default {
 
     mergeStyle: '',
     mergeStyleDetail: { // dummy only, these values will come from one of the mergeForm.mergeStyles
-      hideMergeMessage: false,
+      hideMergeMessageTexts: false,
       textDoMerge: '',
+      mergeTitleFieldText: '',
+      mergeMessageFieldText: '',
     },
     mergeStyleAllowedCount: 0,
 
@@ -82,24 +84,13 @@ export default {
 
   watch: {
     mergeStyle(val) {
-      for (const msd of this.mergeForm.mergeStyles) {
-        if (val === msd.name) {
-          this.mergeStyleDetail = msd;
-        }
-      }
+      this.mergeStyleDetail = this.mergeForm.mergeStyles.find((e) => e.name === val);
     }
   },
 
   created() {
-    for (const msd of this.mergeForm.mergeStyles) {
-      if (msd.allowed) {
-        if (!this.mergeStyle) this.mergeStyle = msd.name;
-        this.mergeStyleAllowedCount++;
-      }
-    }
-    this.deleteBranchAfterMerge = this.mergeForm.defaultDeleteBranchAfterMerge;
-    this.mergeTitleFieldValue = this.mergeForm.mergeTitleFieldText;
-    this.mergeMessageFieldValue = this.mergeForm.mergeMessageFieldText;
+    this.mergeStyleAllowedCount = this.mergeForm.mergeStyles.reduce((v, msd) => v + (msd.allowed ? 1 : 0), 0);
+    this.mergeStyle = this.mergeForm.mergeStyles.find((e) => e.allowed)?.name;
   },
 
   mounted() {
@@ -113,6 +104,13 @@ export default {
   methods: {
     hideMergeStyleMenu() {
       this.showMergeStyleMenu = false;
+    },
+    toggleActionForm(show) {
+      this.showActionForm = show;
+      if (!show) return;
+      this.deleteBranchAfterMerge = this.mergeForm.defaultDeleteBranchAfterMerge;
+      this.mergeTitleFieldValue = this.mergeStyleDetail.mergeTitleFieldText;
+      this.mergeMessageFieldValue = this.mergeStyleDetail.mergeMessageFieldText;
     }
   },
 };

From ed4011e62af51b33766e0b309cb6a9fdd0757cb6 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Sun, 8 May 2022 22:20:49 +0800
Subject: [PATCH 7/7] clean up

---
 web_src/js/features/repo-issue-pr-form.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web_src/js/features/repo-issue-pr-form.js b/web_src/js/features/repo-issue-pr-form.js
index 89ca3c7987d18..747e4f467e04a 100644
--- a/web_src/js/features/repo-issue-pr-form.js
+++ b/web_src/js/features/repo-issue-pr-form.js
@@ -6,7 +6,7 @@ export default function initPullRequestMergeForm() {
   if (!el) return;
 
   const View = Vue.extend({
-    render: (createElement) => createElement(PullRequestMergeForm, {props: {}}),
+    render: (createElement) => createElement(PullRequestMergeForm),
   });
   new View().$mount(el);
 }