Use Vue to refactor pull merge UI (#19650)

* Use Vue to refactor pull merge UI

* add comments

* fix comments

* small fine tune

* fix tests

* adopt new pull default messages

* clean up

Co-authored-by: 6543 <6543@obermui.de>

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),
+  });
+  new View().$mount(el);
+}

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');

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