feat: move more modals to native dialogs (#9636)

Follow up of forgejo/forgejo#8859

Move the following modals to native dialogs:
- Admin notice.
- Edit label.
- New label.
- Update email in admin's email list.

Each has a E2E test to screenshot the modal and test functionality.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/9636
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>

templates/admin/emails/list.tmpl

@@ -75,13 +75,12 @@
 
 		{{template "base/paginate" .}}
 
-		<div class="ui g-modal-confirm modal" id="change-email-modal">
+		<dialog id="change-email-modal">
-			<div class="header">
+			<article>
-				{{ctx.Locale.Tr "admin.emails.change_email_header"}}
+				<header>{{ctx.Locale.Tr "admin.emails.change_email_header"}}</header>
-			</div>
 				<div class="content">
 					<p class="center">{{ctx.Locale.Tr "admin.emails.change_email_text"}}</p>
-
+				</div>
 				<form class="ui form" id="email-action-form" action="{{AppSubUrl}}/admin/emails/activate" method="post">
 					{{$.CsrfTokenHtml}}
 
@@ -99,9 +98,8 @@
 						{{template "base/modal_actions_confirm" .}}
 					</div>
 				</form>
-			</div>
+			</article>
-		</div>
+		</dialog>
-
 	</div>
 
 <div class="ui g-modal-confirm delete modal" id="delete-email">

templates/admin/notice.tmpl

@@ -62,9 +62,14 @@
 		{{template "base/paginate" .}}
 	</div>
 
-<div class="ui modal admin" id="detail-modal">
+<dialog id="detail-modal">
-	<div class="header">{{ctx.Locale.Tr "admin.notices.view_detail_header"}}</div>
+	<article>
+		<header>{{ctx.Locale.Tr "admin.notices.view_detail_header"}}</header>
 		<div class="content"><pre></pre></div>
-</div>
+			<div class="actions">
+				<button class="ui cancel button">{{ctx.Locale.Tr "settings.cancel"}}</button>
+			</div>
+	</article>
+</dialog>
 
 {{template "admin/layout_footer" .}}

templates/base/modal_actions_confirm.tmpl

@@ -22,7 +22,7 @@ The ".ok.button" and ".cancel.button" selectors are also used by Fomantic Modal
 		{{if .ModalButtonCancelText}}{{$textNegitive = .ModalButtonCancelText}}{{end}}
 		{{if .ModalButtonOkText}}{{$textPositive = .ModalButtonOkText}}{{end}}
 
-		<button class="ui cancel button">{{svg "octicon-x"}} {{$textNegitive}}</button>
+		<button type="button" class="ui cancel button">{{svg "octicon-x"}} {{$textNegitive}}</button>
 		<button class="ui primary ok button">{{svg "octicon-check"}} {{$textPositive}}</button>
 	{{end}}
 </div>

templates/repo/issue/labels/edit_delete_label.tmpl

@@ -9,10 +9,9 @@
 	{{template "base/modal_actions_confirm" .}}
 </div>
 
-<div class="ui small edit-label modal">
+<dialog id="edit-label-modal">
-	<div class="header">
+	<article>
-		{{ctx.Locale.Tr "repo.issues.label_modify"}}
+		<header>{{ctx.Locale.Tr "repo.issues.label_modify"}}</header>
-	</div>
 		<div class="content">
 			<form class="ui edit-label form ignore-dirty" action="{{$.Link}}/edit" method="post">
 				{{.CsrfTokenHtml}}
@@ -40,7 +39,7 @@
 						<input class="label-is-archived-input" name="is_archived" type="checkbox">
 						<label>{{ctx.Locale.Tr "repo.issues.label_archive"}}</label>
 					</div>
-				<i class="tw-ml-1" data-tooltip-content={{ctx.Locale.Tr "repo.issues.label_archive_tooltip"}}>
+					<i class="tw-ml-1" data-tooltip-content={{ctx.Locale.Tr "repo.issues.label_archive_tooltip"}} data-tooltip-appendto="parent">
 						{{svg "octicon-info"}}
 					</i>
 				</div>
@@ -69,4 +68,5 @@
 				{{ctx.Locale.Tr "save"}}
 			</button>
 		</div>
-</div>
+	</article>
+</dialog>

templates/repo/issue/labels/label_new.tmpl

@@ -1,7 +1,6 @@
-<div class="ui small new-label modal">
+<dialog id="new-label-modal">
-	<div class="header">
+	<article>
-		{{ctx.Locale.Tr "repo.issues.new_label"}}
+		<header>{{ctx.Locale.Tr "repo.issues.new_label"}}</header>
-	</div>
 		<div class="content">
 			<form class="ui new-label form ignore-dirty" action="{{$.Link}}/new" method="post">
 				{{.CsrfTokenHtml}}
@@ -45,4 +44,5 @@
 				{{ctx.Locale.Tr "repo.issues.create_label"}}
 			</button>
 		</div>
-</div>
+	</article>
+</dialog>

tests/e2e/admin-ui.test.e2e.ts

@@ -0,0 +1,58 @@
+// Copyright 2025 The Forgejo Authors. All rights reserved.
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+// @watch start
+// web_src/js/features/admin/**
+// templates/admin/**
+// @watch end
+
+import {expect} from '@playwright/test';
+import {test} from './utils_e2e.ts';
+import {screenshot} from './shared/screenshots.ts';
+
+test.use({user: 'user1'});
+
+test('Admin notices modal', async ({page}) => {
+  const response = await page.goto('/admin/notices');
+  expect(response?.status()).toBe(200);
+
+  await page.getByText('description1').click();
+  await expect(page.locator('#detail-modal .content')).toHaveText('description1');
+  await screenshot(page, page.locator('#detail-modal'));
+  await page.getByText('Cancel').click();
+  await expect(page.locator('#change-email-modal')).toBeHidden();
+
+  await page.getByText('description2').click();
+  await expect(page.locator('#detail-modal .content')).toHaveText('description2');
+  await screenshot(page, page.locator('#detail-modal'));
+  await page.getByText('Cancel').click();
+  await expect(page.locator('#change-email-modal')).toBeHidden();
+
+  await page.getByText('description3').click();
+  await expect(page.locator('#detail-modal .content')).toHaveText('description3');
+  await screenshot(page, page.locator('#detail-modal'));
+  await page.getByText('Cancel').click();
+  await expect(page.locator('#change-email-modal')).toBeHidden();
+});
+
+test('Admin email list', async ({page}) => {
+  const response = await page.goto('/admin/emails');
+  expect(response?.status()).toBe(200);
+
+  await page.locator('[data-uid="21"]').click();
+  await expect(page.locator('#change-email-modal .content')).toHaveText('Are you sure you want to update this email address?');
+  await screenshot(page, page.locator('#change-email-modal .content'));
+  await page.locator('#email-action-form').getByText('No').click();
+  await expect(page.locator('#change-email-modal')).toBeHidden();
+
+  const activated = await page.locator('[data-uid="9"] .svg').evaluate((node) => node.classList.contains('octicon-check'));
+  await page.locator('[data-uid="9"]').click();
+  await page.getByRole('button', {name: 'Yes'}).click();
+
+  // Retry-proof
+  if (activated) {
+    await expect(page.locator('[data-uid="9"] .svg')).toHaveClass(/octicon-x/);
+  } else {
+    await expect(page.locator('[data-uid="9"] svg')).toHaveClass(/octicon-check/);
+  }
+});

tests/e2e/repo-labels.test.e2e.ts

@@ -0,0 +1,43 @@
+// Copyright 2025 The Forgejo Authors. All rights reserved.
+// SPDX-License-Identifier: GPL-3.0-or-later
+
+// @watch start
+// templates/repo/issues/labels/**
+// web_src/js/features/comp/LabelEdit.js
+// @watch end
+
+import {expect} from '@playwright/test';
+import {test, dynamic_id} from './utils_e2e.ts';
+import {screenshot} from './shared/screenshots.ts';
+
+test.use({user: 'user2'});
+
+test('New label', async ({page}) => {
+  const response = await page.goto('/user2/repo1/labels');
+  expect(response?.status()).toBe(200);
+
+  await page.getByRole('button', {name: 'New label'}).click();
+  await expect(page.locator('#new-label-modal')).toBeVisible();
+  await screenshot(page, page.locator('#new-label-modal'));
+
+  const labelName = dynamic_id();
+  await page.keyboard.type(labelName);
+  await page.getByRole('button', {name: 'Create label'}).click();
+
+  await page.locator('.label-title').filter({hasText: labelName}).isVisible();
+});
+
+test('Edit label', async ({page}) => {
+  const response = await page.goto('/user2/repo1/labels');
+  expect(response?.status()).toBe(200);
+
+  await page.getByText('Edit').first().click();
+  await expect(page.locator('#edit-label-modal')).toBeVisible();
+  await screenshot(page, page.locator('#edit-label-modal'));
+
+  const labelName = dynamic_id();
+  await page.keyboard.type(labelName);
+  await page.getByRole('button', {name: 'Save'}).click();
+
+  await page.locator('.label-title').filter({hasText: labelName}).isVisible();
+});

web_src/css/admin.css

@@ -29,8 +29,8 @@
   min-width: 100px;
 }
 
-.admin code,
+:is(.admin, #detail-modal) code,
-.admin pre {
+:is(.admin, #detail-modal) pre {
   white-space: pre-wrap;
   word-wrap: break-word;
 }

web_src/css/repo.css

@@ -2133,17 +2133,6 @@ details.repo-search-result summary::marker {
   padding: 1em;
 }
 
-.edit-label.modal .form .column,
-.new-label.modal .form .column {
-  padding-right: 0;
-}
-
-.edit-label.modal .form .buttons,
-.new-label.modal .form .buttons {
-  margin-left: auto;
-  padding-top: 15px;
-}
-
 .stats-table {
   display: table;
   width: 100%;

web_src/js/features/admin/common.js

@@ -2,6 +2,7 @@ import $ from 'jquery';
 import {checkAppUrl} from '../common-global.js';
 import {hideElem, showElem, toggleElem} from '../../utils/dom.js';
 import {POST} from '../../modules/fetch.js';
+import {showModal} from '../../modules/modal.ts';
 
 const {appSubUrl} = window.config;
 
@@ -216,7 +217,7 @@ export function initAdminCommon() {
     $('.view-detail').on('click', function () {
       const description = this.closest('tr').querySelector('.notice-description').textContent;
       detailModal.querySelector('.content pre').textContent = description;
-      $(detailModal).modal('show');
+      showModal('detail-modal', undefined);
       return false;
     });
 

web_src/js/features/admin/emails.js

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import {showModal} from '../../modules/modal.ts';
 
 export function initAdminEmails() {
   function linkEmailAction(e) {
@@ -7,7 +8,7 @@ export function initAdminEmails() {
     $('#form-email').val($this.data('email'));
     $('#form-primary').val($this.data('primary'));
     $('#form-activate').val($this.data('activate'));
-    $('#change-email-modal').modal('show');
+    showModal('change-email-modal', undefined);
     e.preventDefault();
   }
   $('.link-email-action').on('click', linkEmailAction);

web_src/js/features/comp/LabelEdit.js

@@ -1,4 +1,5 @@
 import $ from 'jquery';
+import {showModal} from '../../modules/modal.ts';
 
 function isExclusiveScopeName(name) {
   return /.*[^/]\/[^/].*/.test(name);
@@ -27,16 +28,14 @@ export function initCompLabelEdit(selector) {
   // Create label
   $('.new-label.button').on('click', () => {
     updateExclusiveLabelEdit('.new-label');
-    $('.new-label.modal').modal({
+    showModal('new-label-modal', () => {
-      onApprove() {
       const form = document.querySelector('.new-label.form');
       if (!form.checkValidity()) {
         form.reportValidity();
         return false;
       }
       document.querySelector('.new-label.form').requestSubmit();
-      },
+    });
-    }).modal('show');
     return false;
   });
 
@@ -64,16 +63,14 @@ export function initCompLabelEdit(selector) {
     colorInput.value = this.getAttribute('data-color');
     colorInput.dispatchEvent(new Event('input', {bubbles: true}));
 
-    $('.edit-label.modal').modal({
+    showModal('edit-label-modal', () => {
-      onApprove() {
       const form = document.querySelector('.edit-label.form');
       if (!form.checkValidity()) {
         form.reportValidity();
         return false;
       }
       document.querySelector('.edit-label.form').requestSubmit();
-      },
+    });
-    }).modal('show');
     return false;
   });
 

web_src/js/modules/tippy.js

@@ -81,6 +81,7 @@ function attachTooltip(target, content = null) {
     hideOnClick,
     placement: target.getAttribute('data-tooltip-placement') || 'top-start',
     followCursor: target.getAttribute('data-tooltip-follow-cursor') || false,
+    ...(target.getAttribute('data-tooltip-appendto') === 'parent' ? {appendTo: 'parent'} : {}),
     ...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true, aria: {content: 'describedby', expanded: false}} : {}),
   };