Refactor pull request view (6) (#37522)

Clean up legacy logic.

* Use backend logic to choose PR timeline icon color
* Always use the Vue form to merge, remove the "StillCanManualMerge" logic

web_src/js/components/PullRequestMergeForm.vue

@@ -7,6 +7,8 @@ const props = defineProps<{
   mergeFormProps: any, // TODO: this is a huge object, need to be refactored in the future
 }>();
 
+const mergeStyleManuallyMerged = 'manually-merged';
+
 const mergeForm = props.mergeFormProps;
 
 const mergeTitleFieldValue = shallowRef('');
@@ -29,10 +31,17 @@ const showMergeStyleMenu = shallowRef(false);
 const showActionForm = shallowRef(false);
 
 const mergeButtonStyleClass = computed(() => {
+  if (mergeStyle.value === mergeStyleManuallyMerged) return 'red';
   if (mergeForm.allOverridableChecksOk) return 'primary';
   return autoMergeWhenSucceed.value ? 'primary' : 'red';
 });
 
+const mergeSelectStyleClass = computed(() => {
+  if (mergeForm.emptyCommit) return '';
+  if (mergeStyle.value === mergeStyleManuallyMerged) return 'red';
+  return 'primary';
+});
+
 const forceMerge = computed(() => {
   return mergeForm.canMergeNow && !mergeForm.allOverridableChecksOk;
 });
@@ -115,30 +124,32 @@ function clearMergeMessage() {
         </div>
       </template>
 
-      <div class="field" v-if="mergeStyle === 'manually-merged'">
+      <div class="field" v-if="mergeStyle === mergeStyleManuallyMerged">
         <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">
-          {{ mergeForm.textAutoMergeButtonWhenSucceed }}
-        </template>
-      </button>
+      <div class="flex-text-block tw-gap-3">
+        <button class="ui button" :class="mergeButtonStyleClass" type="submit" name="do" :value="mergeStyle">
+          {{ mergeStyleDetail.textDoMerge }}
+          <template v-if="autoMergeWhenSucceed">
+            {{ mergeForm.textAutoMergeButtonWhenSucceed }}
+          </template>
+        </button>
 
-      <button class="ui button merge-cancel" @click="toggleActionForm(false)">
-        {{ mergeForm.textCancel }}
-      </button>
+        <button class="ui button merge-cancel" type="button" @click="toggleActionForm(false)">
+          {{ mergeForm.textCancel }}
+        </button>
 
-      <div class="ui checkbox tw-ml-1" 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 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>
       </div>
     </form>
 
     <div v-if="!showActionForm" class="tw-flex">
       <!-- the merge button -->
-      <div class="ui buttons merge-button" :class="[mergeForm.emptyCommit ? '' : mergeForm.allOverridableChecksOk ? 'primary' : 'red']" @click="toggleActionForm(true)">
+      <div class="ui buttons merge-button" :class="mergeSelectStyleClass" @click="toggleActionForm(true)">
         <button class="ui button">
           <svg-icon name="octicon-git-merge"/>
           <span class="button-text">

web_src/js/features/repo-issue-pull.ts

@@ -23,6 +23,7 @@ function initRepoPullRequestUpdate(el: HTMLElement) {
     }
     let data: Record<string, any> | undefined;
     try {
+      // TODO: the response is indeed not JSON, need to fix (see backend UpdatePullRequest)
       data = await response?.json(); // the response is probably not a JSON
     } catch (error) {
       console.error(error);