refactor: clean up legacy templates and js (#39808)

* Remove unused `"root"` data attributes from templates
* Use our "confirmModal" as much as possible (partially for #39643)
* Use "data-global-init" to refactor a lot of legacy code
* Refactor and clearify initRepoIssueCommentDelete's behavior to help #36862
* Remove dead code `common-organization.ts`

templates/admin/stacktrace-row.tmpl

@@ -17,7 +17,7 @@
 		</div>
 		<div>
 			{{if or (eq .Process.Type "request") (eq .Process.Type "normal")}}
-				<a class="link-action" data-url="{{.root.Link}}/cancel/{{.Process.PID}}"
+				<a class="link-action" data-url="{{ctx.RootData.Link}}/cancel/{{.Process.PID}}"
 					data-modal-confirm-header="{{ctx.Locale.Tr "admin.monitor.process.cancel"}}"
 					data-modal-confirm-content="{{ctx.Locale.Tr "admin.monitor.process.cancel_desc"}}"
 				>{{svg "octicon-trash" 16 "tw-text-red"}}</a>
@@ -60,8 +60,8 @@
 
 	{{if .Process.Children}}
 		<div class="divided list">
-			{{range .Process.Children}}
-				{{template "admin/stacktrace-row" dict "Process" . "root" $.root}}
+			{{range $child := .Process.Children}}
+				{{template "admin/stacktrace-row" dict "Process" $child}}
 			{{end}}
 		</div>
 	{{end}}

templates/admin/stacktrace.tmpl

@@ -11,8 +11,8 @@
 	{{if .ProcessStacks}}
 	<div class="ui attached segment">
 		<div class="ui relaxed divided list">
-			{{range .ProcessStacks}}
-				{{template "admin/stacktrace-row" dict "Process" . "root" $}}
+			{{range $process := .ProcessStacks}}
+				{{template "admin/stacktrace-row" dict "Process" $process}}
 			{{end}}
 		</div>
 	</div>

templates/package/content/composer.tmpl

@@ -33,8 +33,8 @@
 		<h4 class="ui top attached header">{{ctx.Locale.Tr "packages.dependencies"}}</h4>
 		<div class="ui attached segment">
 			<div class="ui list">
-				{{template "package/content/composer_dependencies" dict "root" $ "dependencies" .PackageDescriptor.Metadata.Require "title" (ctx.Locale.Tr "packages.composer.dependencies")}}
-				{{template "package/content/composer_dependencies" dict "root" $ "dependencies" .PackageDescriptor.Metadata.RequireDev "title" (ctx.Locale.Tr "packages.composer.dependencies.development")}}
+				{{template "package/content/composer_dependencies" dict "dependencies" .PackageDescriptor.Metadata.Require "title" (ctx.Locale.Tr "packages.composer.dependencies")}}
+				{{template "package/content/composer_dependencies" dict "dependencies" .PackageDescriptor.Metadata.RequireDev "title" (ctx.Locale.Tr "packages.composer.dependencies.development")}}
 			</div>
 		</div>
 	{{end}}

templates/package/content/npm.tmpl

@@ -30,10 +30,10 @@
 		<h4 class="ui top attached header">{{ctx.Locale.Tr "packages.dependencies"}}</h4>
 		<div class="ui attached segment">
 			<div class="ui list">
-				{{template "package/content/npm_dependencies" dict "root" $ "dependencies" .PackageDescriptor.Metadata.Dependencies "title" (ctx.Locale.Tr "packages.npm.dependencies")}}
-				{{template "package/content/npm_dependencies" dict "root" $ "dependencies" .PackageDescriptor.Metadata.DevelopmentDependencies "title" (ctx.Locale.Tr "packages.npm.dependencies.development")}}
-				{{template "package/content/npm_dependencies" dict "root" $ "dependencies" .PackageDescriptor.Metadata.PeerDependencies "title" (ctx.Locale.Tr "packages.npm.dependencies.peer")}}
-				{{template "package/content/npm_dependencies" dict "root" $ "dependencies" .PackageDescriptor.Metadata.OptionalDependencies "title" (ctx.Locale.Tr "packages.npm.dependencies.optional")}}
+				{{template "package/content/npm_dependencies" dict "dependencies" .PackageDescriptor.Metadata.Dependencies "title" (ctx.Locale.Tr "packages.npm.dependencies")}}
+				{{template "package/content/npm_dependencies" dict "dependencies" .PackageDescriptor.Metadata.DevelopmentDependencies "title" (ctx.Locale.Tr "packages.npm.dependencies.development")}}
+				{{template "package/content/npm_dependencies" dict "dependencies" .PackageDescriptor.Metadata.PeerDependencies "title" (ctx.Locale.Tr "packages.npm.dependencies.peer")}}
+				{{template "package/content/npm_dependencies" dict "dependencies" .PackageDescriptor.Metadata.OptionalDependencies "title" (ctx.Locale.Tr "packages.npm.dependencies.optional")}}
 			</div>
 		</div>
 	{{end}}

templates/package/content/rubygems.tmpl

@@ -32,8 +32,8 @@ end</code></pre></div>
 		<h4 class="ui top attached header">{{ctx.Locale.Tr "packages.dependencies"}}</h4>
 		<div class="ui attached segment">
 			<div class="ui list">
-				{{template "package/content/rubygems_dependencies" dict "root" $ "dependencies" .PackageDescriptor.Metadata.RuntimeDependencies "title" (ctx.Locale.Tr "packages.rubygems.dependencies.runtime")}}
-				{{template "package/content/rubygems_dependencies" dict "root" $ "dependencies" .PackageDescriptor.Metadata.DevelopmentDependencies "title" (ctx.Locale.Tr "packages.rubygems.dependencies.development")}}
+				{{template "package/content/rubygems_dependencies" dict "dependencies" .PackageDescriptor.Metadata.RuntimeDependencies "title" (ctx.Locale.Tr "packages.rubygems.dependencies.runtime")}}
+				{{template "package/content/rubygems_dependencies" dict "dependencies" .PackageDescriptor.Metadata.DevelopmentDependencies "title" (ctx.Locale.Tr "packages.rubygems.dependencies.development")}}
 			</div>
 		</div>
 	{{end}}

templates/repo/issue/labels/label_edit_modal.tmpl

@@ -1,4 +1,4 @@
-<div class="ui small modal" id="issue-label-edit-modal"
+<div class="ui small modal" id="issue-label-edit-modal" data-global-init="initLabelEditModal"
 		data-current-page-link="{{$.Link}}"{{/*will be used to construct "new label" and "edit label" URLs*/}}
 		data-text-new-label="{{ctx.Locale.Tr "repo.issues.new_label"}}"
 		data-text-edit-label="{{ctx.Locale.Tr "repo.issues.label_modify"}}"

templates/repo/issue/view_content/comments.tmpl

@@ -553,7 +553,7 @@
 				{{end}}
 			</div>
 			{{if not .IsForcePush}}
-				{{template "repo/commits_list_small" dict "comment" . "root" $}}
+				{{template "repo/commits_list_small" dict "comment" $comment}}
 			{{end}}
 		{{else if eq .Type 30}}
 			<div class="timeline-item event" id="{{.HashTag}}">

templates/repo/issue/view_content/context_menu.tmpl

@@ -26,7 +26,7 @@
 					<div class="divider"></div>
 					<div class="item js-aria-clickable" data-global-click="onConvContentEdit">{{ctx.Locale.Tr "repo.issues.context.edit"}}</div>
 					{{if $supportDelete}}
-						<div class="item js-aria-clickable" data-global-click="onConvContentDelete" data-comment-id={{$item.HashTag}} data-url="{{ctx.RootData.RepoLink}}/comments/{{$item.ID}}/delete" data-locale="{{ctx.Locale.Tr "repo.issues.delete_comment_confirm"}}">{{ctx.Locale.Tr "repo.issues.context.delete"}}</div>
+						<div class="item js-aria-clickable" data-global-click="onConvContentDelete" data-comment-hash-tag={{$item.HashTag}} data-url="{{ctx.RootData.RepoLink}}/comments/{{$item.ID}}/delete" data-locale="{{ctx.Locale.Tr "repo.issues.delete_comment_confirm"}}">{{ctx.Locale.Tr "repo.issues.context.delete"}}</div>
 					{{end}}
 				{{end}}
 			{{end}}

tests/e2e/pr-review.test.ts

@@ -117,8 +117,13 @@ test('pr review flow', async ({page, request}) => {
   const pendingComment = fileBox.locator('.comment').filter({hasText: 'pending review comment'});
   await expect(pendingComment.locator('[data-clipboard-text]')).toHaveAttribute('data-clipboard-text', /\/files#issuecomment-\d+$/);
   await pendingComment.getByRole('menu').filter({has: page.getByRole('menuitem', {name: 'Delete', exact: true, includeHidden: true})}).click();
-  page.once('dialog', (dialog) => dialog.accept());
   await pendingComment.getByRole('menuitem', {name: 'Delete', exact: true}).click();
+  await page.getByRole('button', {name: 'Cancel', exact: true}).click();
+  await expect(pendingComment).toBeVisible();
+  await expect(counter).toHaveAttribute('data-pending-comment-number', '1');
+  await pendingComment.getByRole('menu').filter({has: page.getByRole('menuitem', {name: 'Delete', exact: true, includeHidden: true})}).click();
+  await pendingComment.getByRole('menuitem', {name: 'Delete', exact: true}).click();
+  await page.getByRole('button', {name: 'Confirm', exact: true}).click();
   await expect(pendingComment).toHaveCount(0);
   await expect(counter).toHaveAttribute('data-pending-comment-number', '0');
   await expect(counter).toHaveText('0');

web_src/css/repo.css

@@ -620,10 +620,6 @@
   min-width: 0;
 }
 
-.repository .comment.form .content .field:first-child {
-  clear: none;
-}
-
 .repository.new.milestone textarea {
   height: 200px;
 }

web_src/js/components/RepoActionView.vue

@@ -10,6 +10,7 @@ import type {ActionsJob, ActionsRunAttempt} from '../modules/gitea-actions.ts';
 import {buildJobsByParentJobID, createActionRunViewStore} from './ActionRunView.ts';
 import {buildArtifactTooltipHtml} from './ActionRunArtifacts.ts';
 import {trString} from '../modules/i18n.ts';
+import {confirmModal} from '../features/comp/ConfirmModal.ts';
 
 defineOptions({
   name: 'RepoActionView',
@@ -142,8 +143,9 @@ function approveRun() {
 }
 
 async function deleteArtifact(name: string) {
-  if (!window.confirm(trString(locale.confirmDeleteArtifact, name))) return;
-  await DELETE(buildArtifactLink(name));
+  const artifactLink = buildArtifactLink(name);
+  if (!await confirmModal({content: trString(locale.confirmDeleteArtifact, name), confirmButtonColor: 'red'})) return;
+  await DELETE(artifactLink);
   await store.forceReloadCurrentRun();
 }
 

web_src/js/features/common-organization.ts

@@ -1,16 +0,0 @@
-import {initCompLabelEdit} from './comp/LabelEdit.ts';
-import {toggleElem} from '../utils/dom.ts';
-
-export function initCommonOrganization() {
-  if (!document.querySelectorAll('.organization').length) {
-    return;
-  }
-
-  document.querySelector<HTMLInputElement>('.organization.settings.options #org_name')?.addEventListener('input', function () {
-    const nameChanged = this.value.toLowerCase() !== this.getAttribute('data-org-name')!.toLowerCase();
-    toggleElem('#org-name-change-prompt', nameChanged);
-  });
-
-  // Labels
-  initCompLabelEdit('.page-content.organization.settings.labels');
-}

web_src/js/features/comp/LabelEdit.ts

@@ -1,19 +1,13 @@
-import {toggleElem} from '../../utils/dom.ts';
+import {queryElems, toggleElem} from '../../utils/dom.ts';
 import {showFomanticModal} from '../../modules/fomantic/modal.ts';
 import {submitFormFetchAction} from '../../modules/fetch-action.ts';
+import {registerGlobalInitFunc} from '../../modules/observer.ts';
 
 function nameHasScope(name: string): boolean {
   return /.*[^/]\/[^/].*/.test(name);
 }
 
-export function initCompLabelEdit(pageSelector: string) {
-  const pageContent = document.querySelector<HTMLElement>(pageSelector);
-  if (!pageContent) return;
-
-  // for guest view, the modal is not available, the "labels" are read-only
-  const elModal = pageContent.querySelector<HTMLElement>('#issue-label-edit-modal');
-  if (!elModal) return;
-
+function initLabelEditModal(elModal: HTMLElement) {
   const elLabelId = elModal.querySelector<HTMLInputElement>('input[name="id"]')!;
   const elNameInput = elModal.querySelector<HTMLInputElement>('.label-name-input')!;
   const elExclusiveField = elModal.querySelector('.label-exclusive-input-field')!;
@@ -79,15 +73,15 @@ export function initCompLabelEdit(pageSelector: string) {
 
   elModal.addEventListener('input', () => syncModalUi());
 
-  // theoretically, if the modal exists, the "new label" button should also exist, just in case it doesn't, use "?."
-  const elNewLabel = pageContent.querySelector<HTMLElement>('.ui.button.new-label');
-  elNewLabel?.addEventListener('click', () => showLabelEditModal(elNewLabel));
+  const elNewLabel = document.querySelector<HTMLElement>('.ui.button.new-label')!;
+  elNewLabel.addEventListener('click', () => showLabelEditModal(elNewLabel));
 
-  const elEditLabelButtons = pageContent.querySelectorAll<HTMLElement>('.edit-label-button');
-  for (const btn of elEditLabelButtons) {
-    btn.addEventListener('click', (e) => {
-      e.preventDefault();
-      showLabelEditModal(btn);
-    });
-  }
+  queryElems(document, '.edit-label-button', (btn) => btn.addEventListener('click', (e) => {
+    e.preventDefault();
+    showLabelEditModal(btn);
+  }));
+}
+
+export function initCompLabelEdit() {
+  registerGlobalInitFunc('initLabelEditModal', initLabelEditModal);
 }

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

@@ -39,6 +39,7 @@ function showContentHistoryDetail(issueBaseUrl: string, commentId: string, histo
     async onChange(_value: string, _text: string, $item: JQueryElem) {
       const optionItem = $item.data('option-item');
       if (optionItem === 'delete') {
+        // TODO: to use confirmModal instead of window.confirm, need to support multiple modals on the same page first.
         if (window.confirm(i18nTextDeleteFromHistoryConfirm)) {
           try {
             const params = new URLSearchParams();

web_src/js/features/repo-issue.ts

@@ -7,19 +7,19 @@ import {
   hideElem,
   queryElems,
   showElem,
-  toggleElem,
+  toggleElem, toggleElemClass,
 } from '../utils/dom.ts';
 import {setFileFolding} from './file-fold.ts';
 import {ComboMarkdownEditor, getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.ts';
 import {GET, POST} from '../modules/fetch.ts';
 import {showErrorToast} from '../modules/toast.ts';
-import {initRepoIssueSidebar} from './repo-issue-sidebar.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
 import {showFomanticModal} from '../modules/fomantic/modal.ts';
 import {ignoreAreYouSure} from '../modules/are-you-sure.ts';
 import {registerGlobalEventFunc, registerGlobalInitFunc} from '../modules/observer.ts';
 import type {FomanticApiResponse} from '../types.ts';
 import {performFetchActionRequest} from '../modules/fetch-action.ts';
+import {confirmModal} from './comp/ConfirmModal.ts';
 
 const {appSubUrl} = window.config;
 
@@ -96,40 +96,48 @@ export function initRepoIssueFilterItemLabel() {
 
 export function initRepoIssueCommentDelete() {
   registerGlobalEventFunc('click', 'onConvContentDelete', async (deleteButton) => {
-    if (!window.confirm(deleteButton.getAttribute('data-locale')!)) return;
+    if (!await confirmModal({content: deleteButton.getAttribute('data-locale')!, confirmButtonColor: 'red'})) return;
 
-    const response = await performFetchActionRequest(deleteButton, {method: 'POST', url: deleteButton.getAttribute('data-url')!});
-    if (!response) return;
+    const resp = await performFetchActionRequest(deleteButton, {method: 'POST', url: deleteButton.getAttribute('data-url')!});
+    if (!resp) return;
 
+    // query the parent elements of the delete button before the comment (with the delete button) is removed from the DOM
     const conversationHolder = deleteButton.closest('.conversation-holder');
-    const parentTimelineItem = deleteButton.closest('.timeline-item');
     const parentTimelineGroup = deleteButton.closest('.timeline-item-group');
+    const parentTimelineItem = deleteButton.closest('.timeline-item');
 
-    // Check if this was a pending comment.
-    if (conversationHolder?.querySelector('.pending-label')) {
-      const counter = document.querySelector('.review-box-button .review-comments-counter')!;
-      let num = parseInt(counter?.getAttribute('data-pending-comment-number') || '') - 1 || 0;
-      num = Math.max(num, 0);
-      counter.setAttribute('data-pending-comment-number', String(num));
-      counter.textContent = String(num);
+    // Delete the current comment from the DOM
+    const commentHashTag = deleteButton.getAttribute('data-comment-hash-tag')!;
+    const deletedComment = document.querySelector(`#${commentHashTag}`);
+    deletedComment?.remove();
+
+    // only pr review comments have the "conversation-holder" element, so if it's not found, we can return early
+    if (!conversationHolder) return;
+
+    // Check if this was a pending comment for a review, and if so, update the pending comment counter in the review box button.
+    if (deletedComment?.querySelector('.pending-label')) {
+      const reviewCounter = document.querySelector('.review-box-button .review-comments-counter');
+      if (reviewCounter) {
+        let num = parseInt(reviewCounter.getAttribute('data-pending-comment-number') || '') - 1 || 0;
+        num = Math.max(num, 0);
+        reviewCounter.setAttribute('data-pending-comment-number', String(num));
+        reviewCounter.textContent = String(num);
+      }
     }
 
-    document.querySelector(`#${deleteButton.getAttribute('data-comment-id')}`)?.remove();
-
-    if (conversationHolder && !conversationHolder.querySelector('.comment')) {
-      const path = conversationHolder.getAttribute('data-path');
-      const side = conversationHolder.getAttribute('data-side');
-      const idx = conversationHolder.getAttribute('data-idx');
-      const lineType = conversationHolder.closest('tr')?.getAttribute('data-line-type');
-
+    // If the conversation holder has no more comments, remove it.
+    if (!conversationHolder.querySelector('.comment')) {
       // the conversation holder could appear either on the "Conversation" page, or the "Files Changed" page
-      // on the Conversation page, there is no parent "tr", so no need to do anything for "add-code-comment"
-      if (lineType) {
-        if (lineType === 'same') {
-          document.querySelector(`[data-path="${CSS.escape(String(path))}"] .add-code-comment[data-idx="${CSS.escape(String(idx))}"]`)!.classList.remove('tw-invisible');
-        } else {
-          document.querySelector(`[data-path="${CSS.escape(String(path))}"] .add-code-comment[data-side="${CSS.escape(String(side))}"][data-idx="${CSS.escape(String(idx))}"]`)!.classList.remove('tw-invisible');
-        }
+      // on the Conversation page, there is no parent "tr", so no need to do anything for "add-code-comment" button
+      const parentTr = conversationHolder.closest('tr[data-line-type]');
+      if (parentTr) {
+        // allow to add a new comment on the same line after deleting the existing comments
+        // previous element is the "tr" for the code line, and it contains the "add-code-comment" button
+        const isLineSame = parentTr.getAttribute('data-line-type') === 'same';
+        const side = conversationHolder.getAttribute('data-side')!;
+        const selector = isLineSame ? '.add-code-comment' : `.add-code-comment[data-side=${CSS.escape(side)}]`;
+        const addCodeCommentButtons = parentTr.previousElementSibling!.querySelectorAll(selector);
+        toggleElemClass(addCodeCommentButtons, 'tw-invisible', false);
       }
       conversationHolder.remove();
     }
@@ -154,8 +162,8 @@ export function initRepoIssueCodeCommentCancel() {
   });
 }
 
-export function initRepoIssueComments() {
-  if (!document.querySelector('.repository.view.issue .timeline')) return;
+export function initRepoIssueCommentTargetHashReset() {
+  if (!document.querySelector('.repository.view.issue')) return;
 
   document.addEventListener('click', (e: Event) => {
     const urlTarget = document.querySelector(':target');
@@ -491,9 +499,7 @@ function initIssueTemplateCommentEditors(commentForm: HTMLFormElement) {
   }
 }
 
-export function initRepoCommentFormAndSidebar() {
-  initRepoIssueSidebar();
-
+export function initRepoCommentForm() {
   const commentForm = document.querySelector<HTMLFormElement>('.comment.form');
   if (!commentForm) return;
 

web_src/js/features/repo-legacy.ts

@@ -1,14 +1,13 @@
 import {registerGlobalInitFunc} from '../modules/observer.ts';
 import {
-  initRepoCommentFormAndSidebar,
+  initRepoCommentForm,
   initRepoIssueCodeCommentCancel, initRepoIssueCommentDelete,
-  initRepoIssueComments, initRepoIssueReferenceIssue,
+  initRepoIssueCommentTargetHashReset, initRepoIssueReferenceIssue,
   initRepoIssueTitleEdit, initRepoIssueWipNewTitle, initRepoIssueWipToggle,
 } from './repo-issue.ts';
 import {initUnicodeEscapeButton} from './repo-unicode-escape.ts';
 import {initRepoCloneButtons} from './repo-common.ts';
 import {initRepoCitationPanel} from './citation.ts';
-import {initCompLabelEdit} from './comp/LabelEdit.ts';
 import {initCompReactionSelector} from './comp/ReactionSelector.ts';
 import {initRepoSettings} from './repo-settings.ts';
 import {hideElem, queryElemChildren, queryElems, showElem} from '../utils/dom.ts';
@@ -18,6 +17,7 @@ import {initRepoNew} from './repo-new.ts';
 import {createApp} from 'vue';
 import RepoBranchTagSelector from '../components/RepoBranchTagSelector.vue';
 import {initRepoPullMergeBox, initRepoPullRequestUpdate} from './repo-issue-pull.ts';
+import {initRepoIssueSidebar} from './repo-issue-sidebar.ts';
 
 function initRepoBranchTagSelector() {
   registerGlobalInitFunc('initRepoBranchTagSelector', (elRoot: HTMLInputElement) => {
@@ -47,9 +47,9 @@ export function initRepository() {
   if (!pageContent) return;
 
   initRepoBranchTagSelector();
-  initRepoCommentFormAndSidebar();
+  initRepoIssueSidebar();
+  initRepoCommentForm();
 
-  initCompLabelEdit('.page-content.repository.labels');
   initRepoMilestone();
   initRepoNew();
 
@@ -61,14 +61,14 @@ export function initRepository() {
   initRepoIssueCommentDelete();
   initRepoIssueCodeCommentCancel();
 
+  initCompReactionSelector();
+
   if (pageContent.matches('.page-content.repository.view.issue')) {
     initRepoIssueTitleEdit();
     initRepoIssueWipToggle();
-    initRepoIssueComments();
+    initRepoIssueCommentTargetHashReset();
 
     initRepoIssueReferenceIssue();
-
-    initCompReactionSelector();
   }
 
   initUnicodeEscapeButton();

web_src/js/index.ts

@@ -36,8 +36,8 @@ import {initRepoEditor} from './features/repo-editor.ts';
 import {initCompSearchUserBox} from './features/comp/SearchUserBox.ts';
 import {initInstall} from './features/install.ts';
 import {initCompWebHookEditor} from './features/comp/WebHookEditor.ts';
+import {initCompLabelEdit} from './features/comp/LabelEdit.ts';
 import {initRepoBranchButton} from './features/repo-branch.ts';
-import {initCommonOrganization} from './features/common-organization.ts';
 import {initRepoWiki} from './features/repo-wiki.ts';
 import {initRepository, initBranchSelectorTabs} from './features/repo-legacy.ts';
 import {initCaptcha} from './features/captcha.ts';
@@ -86,11 +86,11 @@ const initPerformanceTracer = callInitFunctions([
   initGlobalInput,
   initGlobalShortcut,
 
-  initCommonOrganization,
   initCommonIssueListQuickGoto,
 
   initCompSearchUserBox,
   initCompWebHookEditor,
+  initCompLabelEdit,
 
   initInstall,