From 8eb8f49581f2c0c012f69476e9aa5828096a7648 Mon Sep 17 00:00:00 2001 From: Gusted Date: Mon, 13 Oct 2025 17:48:49 +0200 Subject: [PATCH] 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 Co-committed-by: Gusted --- templates/admin/emails/list.tmpl | 18 ++- templates/admin/notice.tmpl | 13 +- templates/base/modal_actions_confirm.tmpl | 2 +- .../repo/issue/labels/edit_delete_label.tmpl | 112 +++++++++--------- templates/repo/issue/labels/label_new.tmpl | 86 +++++++------- tests/e2e/admin-ui.test.e2e.ts | 58 +++++++++ tests/e2e/repo-labels.test.e2e.ts | 43 +++++++ web_src/css/admin.css | 4 +- web_src/css/repo.css | 11 -- web_src/js/features/admin/common.js | 3 +- web_src/js/features/admin/emails.js | 3 +- web_src/js/features/comp/LabelEdit.js | 37 +++--- web_src/js/modules/tippy.js | 1 + 13 files changed, 242 insertions(+), 149 deletions(-) create mode 100644 tests/e2e/admin-ui.test.e2e.ts create mode 100644 tests/e2e/repo-labels.test.e2e.ts diff --git a/templates/admin/emails/list.tmpl b/templates/admin/emails/list.tmpl index 0a9a28fa2d..035185c55c 100644 --- a/templates/admin/emails/list.tmpl +++ b/templates/admin/emails/list.tmpl @@ -75,13 +75,12 @@ {{template "base/paginate" .}} - - - + + - + +
+
{{ctx.Locale.Tr "admin.notices.view_detail_header"}}
+ 

+			

+				
+			

+	

+
 
 {{template "admin/layout_footer" .}}
diff --git a/templates/base/modal_actions_confirm.tmpl b/templates/base/modal_actions_confirm.tmpl
index 8c4e346088..d663c8a899 100644
--- a/templates/base/modal_actions_confirm.tmpl
+++ b/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}}
 
-		
+		
 		
 	{{end}}
 
diff --git a/templates/repo/issue/labels/edit_delete_label.tmpl b/templates/repo/issue/labels/edit_delete_label.tmpl
index a4732d35ec..31b8a03bc5 100644
--- a/templates/repo/issue/labels/edit_delete_label.tmpl
+++ b/templates/repo/issue/labels/edit_delete_label.tmpl
@@ -9,64 +9,64 @@
 	{{template "base/modal_actions_confirm" .}}
 
 
-

-	

-		{{ctx.Locale.Tr "repo.issues.label_modify"}}
-	

-	

-		

-			{{.CsrfTokenHtml}}
-			
-			

-				
-				

-					
+
+	

+		
{{ctx.Locale.Tr "repo.issues.label_modify"}}

+		

+			
+				{{.CsrfTokenHtml}}
+				
+				

+					
+					

+						
+					

 				

-			

-			

-				

-					
-					
+				

+					

+						
+						
+					

+					

+					{{ctx.Locale.Tr "repo.issues.label_exclusive_desc"}}
+					

+						{{svg "octicon-alert"}} {{ctx.Locale.Tr "repo.issues.label_exclusive_warning"}}
+					

+					

 				

-				

-				{{ctx.Locale.Tr "repo.issues.label_exclusive_desc"}}
-				

-					{{svg "octicon-alert"}} {{ctx.Locale.Tr "repo.issues.label_exclusive_warning"}}
+				

+					

+						
+						
+					

+					
+						{{svg "octicon-info"}}
+					
 				

-				

-			

-			

-				

-					
-					
+				

+					
+					

+						
+					

 				

-				
-					{{svg "octicon-info"}}
-				
-			

-			

-				
-				

-					
+				

+					
+					

+						
+						{{template "repo/issue/label_precolors"}}
+					

 				

-			

-			

-				
-				

-					
-					{{template "repo/issue/label_precolors"}}
-				

-			

-		
-	

-	

-		
-		
-	

-

+			
+		

+		

+			
+			
+		

+	

+
diff --git a/templates/repo/issue/labels/label_new.tmpl b/templates/repo/issue/labels/label_new.tmpl
index 32fd8e76d7..30d1e45c3d 100644
--- a/templates/repo/issue/labels/label_new.tmpl
+++ b/templates/repo/issue/labels/label_new.tmpl
@@ -1,48 +1,48 @@
-

-	

-		{{ctx.Locale.Tr "repo.issues.new_label"}}
-	

-	

-		

-			{{.CsrfTokenHtml}}
-			

-				
-				

-					
+
+	

+		
{{ctx.Locale.Tr "repo.issues.new_label"}}

+		

+			
+				{{.CsrfTokenHtml}}
+				

+					
+					

+						
+					

 				

-			

-			

-				

-					
-					
+				

+					

+						
+						
+					

+					

+					{{ctx.Locale.Tr "repo.issues.label_exclusive_desc"}}
 				

-				

-				{{ctx.Locale.Tr "repo.issues.label_exclusive_desc"}}
-			

-			

-				
-				

-					
+				

+					
+					

+						
+					

 				

-			

-			

-				
-				

-					
-					{{template "repo/issue/label_precolors"}}
+				

+					
+					

+						
+						{{template "repo/issue/label_precolors"}}
+					

 				

-			

-		
-	

+			
+		

 
-	

-		
-		
-	

-

+		

+			
+			
+		

+	

+
diff --git a/tests/e2e/admin-ui.test.e2e.ts b/tests/e2e/admin-ui.test.e2e.ts
new file mode 100644
index 0000000000..8fcd3456a3
--- /dev/null
+++ b/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/);
+  }
+});
diff --git a/tests/e2e/repo-labels.test.e2e.ts b/tests/e2e/repo-labels.test.e2e.ts
new file mode 100644
index 0000000000..e7d5ce32bf
--- /dev/null
+++ b/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();
+});
diff --git a/web_src/css/admin.css b/web_src/css/admin.css
index e6866b27a6..873b1bf91e 100644
--- a/web_src/css/admin.css
+++ b/web_src/css/admin.css
@@ -29,8 +29,8 @@
   min-width: 100px;
 }
 
-.admin code,
-.admin pre {
+:is(.admin, #detail-modal) code,
+:is(.admin, #detail-modal) pre {
   white-space: pre-wrap;
   word-wrap: break-word;
 }
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 4cafa61ce0..3d47ffece1 100644
--- a/web_src/css/repo.css
+++ b/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%;
diff --git a/web_src/js/features/admin/common.js b/web_src/js/features/admin/common.js
index 76cf4e57f7..b3b11bb061 100644
--- a/web_src/js/features/admin/common.js
+++ b/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;
     });
 
diff --git a/web_src/js/features/admin/emails.js b/web_src/js/features/admin/emails.js
index 46fafa7eff..536974c1ed 100644
--- a/web_src/js/features/admin/emails.js
+++ b/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);
diff --git a/web_src/js/features/comp/LabelEdit.js b/web_src/js/features/comp/LabelEdit.js
index 2b13c64344..ee890ce0bc 100644
--- a/web_src/js/features/comp/LabelEdit.js
+++ b/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({
-      onApprove() {
-        const form = document.querySelector('.new-label.form');
-        if (!form.checkValidity()) {
-          form.reportValidity();
-          return false;
-        }
-        document.querySelector('.new-label.form').requestSubmit();
-      },
-    }).modal('show');
+    showModal('new-label-modal', () => {
+      const form = document.querySelector('.new-label.form');
+      if (!form.checkValidity()) {
+        form.reportValidity();
+        return false;
+      }
+      document.querySelector('.new-label.form').requestSubmit();
+    });
     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({
-      onApprove() {
-        const form = document.querySelector('.edit-label.form');
-        if (!form.checkValidity()) {
-          form.reportValidity();
-          return false;
-        }
-        document.querySelector('.edit-label.form').requestSubmit();
-      },
-    }).modal('show');
+    showModal('edit-label-modal', () => {
+      const form = document.querySelector('.edit-label.form');
+      if (!form.checkValidity()) {
+        form.reportValidity();
+        return false;
+      }
+      document.querySelector('.edit-label.form').requestSubmit();
+    });
     return false;
   });
 
diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js
index 887e7194d9..0aab06e92e 100644
--- a/web_src/js/modules/tippy.js
+++ b/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}} : {}),
   };