{{template "repo/issue/branch_selector_field" $}}{{/* TODO: RemoveIssueRef: template "repo/issue/branch_selector_field" $*/}}
{{if .PageIsComparePull}}
diff --git a/templates/repo/issue/view_content/sidebar.tmpl b/templates/repo/issue/view_content/sidebar.tmpl
index 987a882be7..4dff508495 100644
--- a/templates/repo/issue/view_content/sidebar.tmpl
+++ b/templates/repo/issue/view_content/sidebar.tmpl
@@ -1,4 +1,4 @@
-
+
{{template "repo/issue/branch_selector_field" $}}{{/* TODO: RemoveIssueRef: template "repo/issue/branch_selector_field" $*/}}
{{if .Issue.IsPull}}
diff --git a/web_src/js/features/repo-issue-sidebar-combolist.ts b/web_src/js/features/repo-issue-sidebar-combolist.ts
index c4eef16d7c..7c9f4e951a 100644
--- a/web_src/js/features/repo-issue-sidebar-combolist.ts
+++ b/web_src/js/features/repo-issue-sidebar-combolist.ts
@@ -1,27 +1,8 @@
import {fomanticQuery} from '../modules/fomantic/base.ts';
-import {POST} from '../modules/fetch.ts';
+import {GET, POST} from '../modules/fetch.ts';
import {showErrorToast} from '../modules/toast.ts';
import {addDelegatedEventListener, queryElemChildren, queryElems, toggleElem} from '../utils/dom.ts';
-
-// if there are draft comments, confirm before reloading, to avoid losing comments
-function issueSidebarReloadConfirmDraftComment() {
- const commentTextareas = [
- document.querySelector('.edit-content-zone:not(.tw-hidden) textarea'),
- document.querySelector('#comment-form textarea'),
- ];
- for (const textarea of commentTextareas) {
- // Most users won't feel too sad if they lose a comment with 10 chars, they can re-type these in seconds.
- // But if they have typed more (like 50) chars and the comment is lost, they will be very unhappy.
- if (textarea && textarea.value.trim().length > 10) {
- textarea.parentElement!.scrollIntoView();
- if (!window.confirm('Page will be reloaded, but there are draft comments. Continuing to reload will discard the comments. Continue?')) {
- return;
- }
- break;
- }
- }
- window.location.reload();
-}
+import {parseDom} from "../utils.ts";
export class IssueSidebarComboList {
updateUrl: string;
@@ -33,6 +14,9 @@ export class IssueSidebarComboList {
initialValues: string[];
container: HTMLElement;
+ elIssueMainContent: HTMLElement;
+ elIssueSidebar: HTMLElement;
+
constructor(container: HTMLElement) {
this.container = container;
this.updateUrl = container.getAttribute('data-update-url')!;
@@ -43,6 +27,9 @@ export class IssueSidebarComboList {
this.elDropdown = container.querySelector(':scope > .ui.dropdown')!;
this.elList = container.querySelector(':scope > .ui.list')!;
this.elComboValue = container.querySelector(':scope > .combo-value')!;
+
+ this.elIssueMainContent = document.querySelector('.issue-content-left')!;
+ this.elIssueSidebar = document.querySelector('.issue-content-right')!;
}
collectCheckedValues() {
@@ -63,6 +50,34 @@ export class IssueSidebarComboList {
toggleElem(elEmptyTip, !hasItems);
}
+ async reloadPagePartially() {
+ const resp = await GET(window.location.href);
+ if (!resp.ok) throw new Error(`Failed to reload page: ${resp.statusText}`);
+ const doc = parseDom(await resp.text(), 'text/html');
+
+ // we can safely replace the whole right part (sidebar) because there are only some dropdowns and lists
+ const newSidebar = doc.querySelector('.issue-content-right')!;
+ this.elIssueSidebar.replaceWith(newSidebar);
+
+ // for the main content (left side), at the moment we only support adding new timeline items
+ const newMainContent = doc.querySelector('.issue-content-left')!;
+
+ // find the last ".timeline-item[id]" in current main content, and insert new items after it, some cases:
+ // * a new empty issue: "timeline-item comment first", "timeline-item comment form (optional)"
+ // * issue with timeline events: "timeline-item comment first", "timeline-item event"+id, "timeline-item comment form (optional)"
+ const timelineItemsWithId = this.elIssueMainContent.querySelectorAll('.timeline-item[id]');
+ let lastTimelineItemForInsertion = timelineItemsWithId[timelineItemsWithId.length - 1] ?? this.elIssueMainContent.querySelector('.timeline-item');
+ if (!lastTimelineItemForInsertion) return;
+
+ const newTimelineItems = newMainContent.querySelectorAll(`.timeline-item[id]`);
+ for (const newItem of newTimelineItems) {
+ const newItemId = newItem.getAttribute('id')!;
+ if (this.elIssueMainContent.querySelector(`.timeline-item[id="${CSS.escape(newItemId)}"]`)) continue;
+ lastTimelineItemForInsertion.insertAdjacentElement('afterend', newItem);
+ lastTimelineItemForInsertion = newItem;
+ }
+ }
+
async sendRequestToBackend(changedValues: Array): Promise {
if (!changedValues.length) throw new Error('No changed values to update');
let lastResp: Response | null = null;
@@ -85,15 +100,18 @@ export class IssueSidebarComboList {
async updateToBackend(changedValues: Array) {
if (!changedValues.length) return;
+ this.elIssueSidebar.classList.add('is-loading');
try {
const resp = await this.sendRequestToBackend(changedValues);
if (!resp.ok) {
showErrorToast(`Failed to update to backend: ${resp.statusText}`);
return;
}
- issueSidebarReloadConfirmDraftComment();
+ await this.reloadPagePartially();
} catch (e) {
showErrorToast(`Failed to update to backend: ${e}`);
+ } finally {
+ this.elIssueSidebar.classList.remove('is-loading');
}
}
diff --git a/web_src/js/features/repo-issue-sidebar.ts b/web_src/js/features/repo-issue-sidebar.ts
index 2ff077e6db..b7e355281e 100644
--- a/web_src/js/features/repo-issue-sidebar.ts
+++ b/web_src/js/features/repo-issue-sidebar.ts
@@ -1,18 +1,20 @@
import {POST} from '../modules/fetch.ts';
import {queryElems, toggleElem} from '../utils/dom.ts';
import {IssueSidebarComboList} from './repo-issue-sidebar-combolist.ts';
+import {registerGlobalInitFunc} from '../modules/observer.ts';
-function initBranchSelector() {
- // TODO: RemoveIssueRef: see "repo/issue/branch_selector_field.tmpl"
- const elSelectBranch = document.querySelector('.ui.dropdown.select-branch.branch-selector-dropdown');
- if (!elSelectBranch) return;
-
+function initBranchSelector(elSelectBranch: HTMLElement) {
+ // At the moment, 2 places:
+ // * Issue sidebar branch selector, TODO: RemoveIssueRef: see "repo/issue/branch_selector_field.tmpl"
+ // * Workflow dispatch branch selector
const urlUpdateIssueRef = elSelectBranch.getAttribute('data-url-update-issueref');
const elBranchMenu = elSelectBranch.querySelector('.reference-list-menu')!;
queryElems(elBranchMenu, '.item:not(.no-select)', (el) => el.addEventListener('click', async function (e) {
e.preventDefault();
const selectedValue = this.getAttribute('data-id')!; // eg: "refs/heads/my-branch"
const selectedText = this.getAttribute('data-name'); // eg: "my-branch"
+
+ // the issue sidebar sets "urlUpdateIssueRef" for the dropdown
if (urlUpdateIssueRef) {
// for existing issue, send request to update issue ref, and reload page
try {
@@ -30,23 +32,26 @@ function initBranchSelector() {
}));
}
-function initRepoIssueDue() {
- const form = document.querySelector('.issue-due-form');
+function initRepoIssueDue(elSidebar: HTMLElement) {
+ const form = elSidebar.querySelector('.issue-due-form');
if (!form) return;
const deadline = form.querySelector('input[name=deadline]')!;
- document.querySelector('.issue-due-edit')?.addEventListener('click', () => {
+ elSidebar.querySelector('.issue-due-edit')?.addEventListener('click', () => {
toggleElem(form);
});
- document.querySelector('.issue-due-remove')?.addEventListener('click', () => {
+ elSidebar.querySelector('.issue-due-remove')?.addEventListener('click', () => {
deadline.value = '';
form.dispatchEvent(new Event('submit', {cancelable: true, bubbles: true}));
});
}
export function initRepoIssueSidebar() {
- initBranchSelector();
- initRepoIssueDue();
+ // FIXME: legacy dirty design, the dropdown is reused on Actions page
+ registerGlobalInitFunc('initSelectBranchDropdown', initBranchSelector);
- // init the combo list: a dropdown for selecting items, and a list for showing selected items and related actions
- queryElems(document, '.issue-sidebar-combo', (el) => new IssueSidebarComboList(el).init());
+ registerGlobalInitFunc('initRepoIssueSidebar', (elSidebar) => {
+ initRepoIssueDue(elSidebar);
+ // init the combo list: a dropdown for selecting items, and a list for showing selected items and related actions
+ queryElems(elSidebar, '.issue-sidebar-combo', (el) => new IssueSidebarComboList(el).init());
+ });
}