Fix various problems (#37547)

1. Fix ugly commit form "warning" message
2. Use JSONError for "Update PR Branch" response 
3. Remove useless "timeline" class
4. Make timeline review default to "comment" to avoid icon missing
5. Align PR's "command line instructions" UI
6. Simply "Update PR branch" button logic

And then some TODOs are fixed.

---------

Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/css/modules/checkbox.css

@@ -105,6 +105,7 @@ input[type="checkbox"]:indeterminate::before {
   vertical-align: middle;
 }
 
+.ui.disabled.checkbox input,
 .ui.disabled.checkbox label,
 .ui.checkbox input[disabled] ~ label {
   cursor: default !important;

web_src/css/repo.css

@@ -423,28 +423,14 @@ td .commit-summary {
   margin-right: 5px;
 }
 
-.repository.view.issue .comment-list:not(.prevent-before-timeline)::before {
-  display: block;
-  content: "";
-  position: absolute;
-  margin-top: 12px;
-  margin-bottom: 14px;
-  top: 0;
-  bottom: 0;
-  left: 96px;
-  width: 2px;
-  background-color: var(--color-timeline);
-  z-index: -1;
-}
-
-.repository.view.issue .comment-list .timeline {
+.repository.view.issue .comment-list {
   position: relative;
   display: block;
   margin-left: 40px;
   padding-left: 16px;
 }
 
-.repository.view.issue .comment-list .timeline::before { /* ciara */
+.repository.view.issue .comment-list::before {
   display: block;
   content: "";
   position: absolute;
@@ -1318,6 +1304,7 @@ td .commit-summary {
   display: flex;
   align-items: center;
   gap: 6px;
+  flex-wrap: wrap;
 }
 
 .comment-header-right {
@@ -1844,26 +1831,23 @@ tbody.commit-list {
 }
 
 @media (max-width: 767.98px) {
-  .repository.view.issue .comment-list .timeline,
+  .repository.view.issue .comment-list,
   .repository.view.issue .comment-list .timeline-item {
     margin-left: 0;
   }
-  .repository.view.issue .comment-list .timeline::before {
+  .repository.view.issue .comment-list::before {
     left: 14px;
   }
-  .repository.view.issue .comment-list .timeline .inline-timeline-avatar {
+  .repository.view.issue .comment-list .inline-timeline-avatar {
     display: flex;
     margin-bottom: auto;
     margin-left: 6px;
     margin-right: 2px;
   }
-  .repository.view.issue .comment-list .timeline .comment-header {
-    padding-left: 4px;
-  }
   /* Don't show the general avatar, we show the inline avatar on mobile.
    * And don't show the role labels, there's no place for that. */
-  .repository.view.issue .comment-list .timeline .timeline-avatar,
-  .repository.view.issue .comment-list .timeline .comment-header-right .role-label {
+  .repository.view.issue .comment-list .timeline-avatar,
+  .repository.view.issue .comment-list .comment-header-right .role-label {
     display: none;
   }
   .commit-header h3 {

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

@@ -94,7 +94,7 @@ function showContentHistoryDetail(issueBaseUrl: string, commentId: string, histo
 function showContentHistoryMenu(issueBaseUrl: string, elCommentItem: Element, commentId: string) {
   const elHeaderLeft = elCommentItem.querySelector('.comment-header-left')!;
   const menuHtml = `
-  <div class="ui dropdown interact-fg content-history-menu" data-comment-id="${commentId}">
+  <div class="ui dropdown interact-fg content-history-menu tw-flex-shrink-0" data-comment-id="${commentId}">
     &bull; ${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon')}
     <div class="menu">
     </div>
@@ -127,7 +127,7 @@ export async function initRepoIssueContentHistory() {
   const issuePageInfo = parseIssuePageInfo();
   if (!issuePageInfo.issueNumber) return;
 
-  const elIssueDescription = document.querySelector('.repository.issue .timeline-item.comment.first'); // issue(PR) main content
+  const elIssueDescription = document.querySelector('.repository.issue .timeline-item.comment.issue-content-comment'); // issue(PR) main content
   const elComments = document.querySelectorAll('.repository.issue .comment-list .comment'); // includes: issue(PR) comments, review comments, code comments
   if (!elIssueDescription && !elComments.length) return;
 

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

@@ -1,51 +1,19 @@
 import {createApp} from 'vue';
-import {GET, POST} from '../modules/fetch.ts';
+import {GET} from '../modules/fetch.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
 import {createElementFromHTML} from '../utils/dom.ts';
 import {registerGlobalEventFunc} from '../modules/observer.ts';
 
-function initRepoPullRequestUpdate(el: HTMLElement) {
-  const prUpdateButtonContainer = el.querySelector('#update-pr-branch-with-base');
-  if (!prUpdateButtonContainer) return;
+export function initRepoPullRequestUpdate(el: HTMLElement) {
+  const elDropdown = el.querySelector(':scope > .ui.dropdown');
+  if (!elDropdown) return;
+  const elButton = el.querySelector<HTMLButtonElement>(':scope > button')!;
 
-  const prUpdateButton = prUpdateButtonContainer.querySelector<HTMLButtonElement>(':scope > button')!;
-  const prUpdateDropdown = prUpdateButtonContainer.querySelector(':scope > .ui.dropdown')!;
-  prUpdateButton.addEventListener('click', async function (e) {
-    e.preventDefault();
-    this.classList.add('is-loading');
-    let response: Response | undefined;
-    try {
-      response = await POST(this.getAttribute('data-do')!);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      this.classList.remove('is-loading');
-    }
-    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);
-    }
-    if (data?.redirect) {
-      window.location.href = data.redirect;
-    } else {
-      window.location.reload();
-    }
-  });
-
-  fomanticQuery(prUpdateDropdown).dropdown({
+  fomanticQuery(elDropdown).dropdown({
     onChange(_text: string, _value: string, $choice: any) {
       const choiceEl = $choice[0];
-      const url = choiceEl.getAttribute('data-do');
-      if (url) {
-        const buttonText = prUpdateButton.querySelector('.button-text');
-        if (buttonText) {
-          buttonText.textContent = choiceEl.textContent;
-        }
-        prUpdateButton.setAttribute('data-do', url);
-      }
+      elButton.textContent = choiceEl.textContent;
+      elButton.setAttribute('data-url', choiceEl.getAttribute('data-update-url'));
     },
   });
 }
@@ -69,7 +37,6 @@ async function initRepoPullRequestMergeForm(box: HTMLElement) {
 
 export function initRepoPullMergeBox(el: HTMLElement) {
   registerGlobalEventFunc('click', 'onCommitStatusChecksToggle', onCommitStatusChecksToggle);
-  initRepoPullRequestUpdate(el);
   initRepoPullRequestMergeForm(el);
 
   const reloadingIntervalValue = el.getAttribute('data-pull-merge-box-reloading-interval');

web_src/js/features/repo-legacy.ts

@@ -17,7 +17,7 @@ import {initRepoMilestone} from './repo-milestone.ts';
 import {initRepoNew} from './repo-new.ts';
 import {createApp} from 'vue';
 import RepoBranchTagSelector from '../components/RepoBranchTagSelector.vue';
-import {initRepoPullMergeBox} from './repo-issue-pull.ts';
+import {initRepoPullMergeBox, initRepoPullRequestUpdate} from './repo-issue-pull.ts';
 
 function initRepoBranchTagSelector() {
   registerGlobalInitFunc('initRepoBranchTagSelector', async (elRoot: HTMLInputElement) => {
@@ -38,6 +38,9 @@ export function initBranchSelectorTabs() {
 }
 
 export function initRepository() {
+  registerGlobalInitFunc('initRepoPullMergeBox', initRepoPullMergeBox);
+  registerGlobalInitFunc('initRepoPullRequestUpdate', initRepoPullRequestUpdate);
+
   const pageContent = document.querySelector('.page-content.repository');
   if (!pageContent) return;
 
@@ -68,8 +71,6 @@ export function initRepository() {
     initRepoIssueCommentDelete();
     initRepoIssueCodeCommentCancel();
     initCompReactionSelector();
-
-    registerGlobalInitFunc('initRepoPullMergeBox', initRepoPullMergeBox);
   }
 
   initUnicodeEscapeButton();