Refactor pull request view (5) (#37517)

Clean up templates, remove various CSS patches.

By the way, fix incorrect NewRequest URLs in tests.

web_src/css/repo.css

@@ -596,8 +596,10 @@ td .commit-summary {
   }
 }
 
-.repository.view.issue .comment-list .comment .merge-section {
-  background-color: var(--color-box-body);
+.repository.view.issue .comment-list .comment .merge-section .item + ul.item {
+  border-top: 0;
+  padding: 0 1em 0 52px;
+  margin-top: -0.5em;
 }
 
 .repository.view.issue .comment-list .comment .merge-section .item-section {
@@ -605,15 +607,9 @@ td .commit-summary {
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  padding: 0;
   gap: 0.5em;
 }
 
-.repository.view.issue .comment-list .comment .merge-section .divider {
-  margin-left: -1rem;
-  width: calc(100% + 2rem);
-}
-
 .merge-section-info code {
   border: 1px solid var(--color-light-border);
   border-radius: var(--border-radius);
@@ -1937,42 +1933,11 @@ tbody.commit-list {
 
 .commit-status-item {
   height: 40px;
-  padding: 0 10px;
   display: flex;
-  gap: 8px;
+  gap: var(--gap-block);
   align-items: center;
-}
-
-.commit-status-item + .commit-status-item {
-  border-top: 1px solid var(--color-secondary);
-}
-
-.commit-status-item .commit-status {
-  flex-shrink: 0;
-}
-
-.commit-status-item .status-context {
-  color: var(--color-text);
-  flex: 1;
-}
-
-.commit-status-item .status-details {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-}
-
-@media (max-width: 767.98px) {
-  .commit-status-item .status-details {
-    flex-direction: column;
-    align-items: flex-end;
-    justify-content: center;
-  }
-}
-
-.commit-status-item .status-details > span {
-  padding-right: 0.5em; /* To match the alignment with the "required" label */
+  justify-content: space-between;
+  flex-wrap: wrap;
 }
 
 .username-display {

web_src/css/shared/flex-list.css

@@ -10,10 +10,12 @@
 }
 
 /* items have dividers between them, the dividers align with items (use parent padding) */
-.flex-divided-list {
-  list-style: none;
+.flex-divided-list,
+.flex-divided-list > .item.flex-divided-list {
   display: flex;
   flex-direction: column;
+  align-items: stretch;
+  gap: 0;
 }
 
 .flex-divided-list > .item {
@@ -99,22 +101,21 @@
 }
 
 /* special rules to make the list work with existing UI elements */
-.container-segmented > .flex-divided-list > .item {
+.container-divided > .flex-divided-list > .item {
   padding-left: 1em;
   padding-right: 1em;
 }
-
-.ui.segment.fitted > .flex-divided-list > .item {
-  padding: 1em;
+.container-divided > .flex-divided-list > .item.flex-divided-list {
+  padding: 0;
 }
 
 .container-padded > .flex-divided-list > .item:first-child,
-.ui.segment:not(.fitted) > .flex-divided-list > .item:first-child {
+.ui.segment:not(.container-divided) > .flex-divided-list > .item:first-child {
   padding-top: 0;
 }
 
 .container-padded > .flex-divided-list > .item:last-child,
-.ui.segment:not(.fitted) > .flex-divided-list > .item:last-child {
+.ui.segment:not(.container-divided) > .flex-divided-list > .item:last-child {
   padding-bottom: 0;
 }
 

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

@@ -2,6 +2,7 @@ import {createApp} from 'vue';
 import {GET, POST} 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');
@@ -48,15 +49,11 @@ function initRepoPullRequestUpdate(el: HTMLElement) {
   });
 }
 
-function initRepoPullRequestCommitStatus(el: HTMLElement) {
-  for (const btn of el.querySelectorAll('.commit-status-hide-checks')) {
-    const panel = btn.closest('.commit-status-panel')!;
-    const list = panel.querySelector<HTMLElement>('.commit-status-list')!;
-    btn.addEventListener('click', () => {
-      list.style.maxHeight = list.style.maxHeight ? '' : '0px'; // toggle
-      btn.textContent = btn.getAttribute(list.style.maxHeight ? 'data-show-all' : 'data-hide-all');
-    });
-  }
+function onCommitStatusChecksToggle(btn: HTMLElement) {
+  const panel = btn.closest('.commit-status-toggle')!.parentElement!;
+  const list = panel.querySelector<HTMLElement>('.commit-status-list')!;
+  list.style.maxHeight = list.style.maxHeight ? '' : '0px'; // toggle
+  btn.textContent = btn.getAttribute(list.style.maxHeight ? 'data-show-all' : 'data-hide-all');
 }
 
 async function initRepoPullRequestMergeForm(box: HTMLElement) {
@@ -70,7 +67,7 @@ async function initRepoPullRequestMergeForm(box: HTMLElement) {
 }
 
 export function initRepoPullMergeBox(el: HTMLElement) {
-  initRepoPullRequestCommitStatus(el);
+  registerGlobalEventFunc('click', 'onCommitStatusChecksToggle', onCommitStatusChecksToggle);
   initRepoPullRequestUpdate(el);
   initRepoPullRequestMergeForm(el);