refactor: replace Fomantic modal with native dialog (#39846)

Replace Fomantic's hard-forked jQuery modal with native `<dialog>`
elements, advancing https://github.com/go-gitea/gitea/issues/29849. The
UI is visually unchanged. Dialogs open with `show()` over an `inert`
page, so tooltips, popups and toasts mounted on `<body>` stay usable
above them, unlike with `showModal()`
(https://github.com/whatwg/html/issues/9936).

- Remove the Fomantic modal and dimmer, add `showModal` and `hideModal`
- Declare modals as `<dialog class="modal-dialog">`, shown inside a
`.modal-backdrop`, instead of `ui modal` with its unused size classes
- Remove two modals that could never be opened
- Block the page while a modal is open, close the topmost one on Escape
and restore focus to its opener
- Allow stacked modals, use a confirm modal instead of `window.confirm`
for deleting content history
- Hide popups and toasts when a modal opens or closes
- Keep the release notes modal open when generating notes fails

Fixes: https://github.com/go-gitea/gitea/issues/39643
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

tests/e2e/issue-comment.test.ts

@@ -1,6 +1,6 @@
 import {env} from 'node:process';
 import {test, expect} from '@playwright/test';
-import {login, apiCreateRepo, apiCreateIssue, randomString} from './utils.ts';
+import {login, apiCreateRepo, apiCreateIssue, apiEditIssue, randomString} from './utils.ts';
 
 test('comment on and close an issue', async ({page, request}) => {
   const repoName = `e2e-issue-comment-${randomString(8)}`;
@@ -48,3 +48,25 @@ test('unsaved issue description prompts before leaving', async ({page, request})
   expect((await dialogPromise).type()).toBe('beforeunload');
   await expect(page).toHaveURL(/\/issues\/new$/);
 });
+
+test('delete an edit history entry via a confirm over the history modal', async ({page, request}) => {
+  const repoName = `e2e-issue-history-${randomString(8)}`;
+  const owner = env.GITEA_TEST_E2E_USER;
+  await Promise.all([
+    (async () => {
+      await apiCreateRepo(request, {name: repoName, autoInit: false});
+      await apiCreateIssue(request, {owner, repo: repoName, title: 'History test', body: 'first'});
+      await apiEditIssue(request, owner, repoName, 1, {body: 'second'});
+    })(),
+    login(page),
+  ]);
+  await page.goto(`/${owner}/${repoName}/issues/1`);
+  const historyMenu = page.locator('.content-history-menu');
+  await historyMenu.click();
+  await historyMenu.getByRole('menuitem').last().click();
+  const history = page.getByRole('dialog');
+  await history.getByText('Options').click();
+  await history.getByRole('menuitem', {name: 'Delete from history'}).click();
+  await page.getByRole('dialog', {name: 'Delete from history?'}).getByRole('button', {name: 'Confirm'}).click();
+  await expect(page.getByRole('dialog')).toHaveCount(0);
+});

tests/e2e/label.test.ts

@@ -0,0 +1,19 @@
+import {env} from 'node:process';
+import {test, expect} from '@playwright/test';
+import {login, apiCreateRepo, randomString} from './utils.ts';
+
+test('create a label in the modal with a color from the picker popup', async ({page}) => {
+  const repoName = `e2e-label-${randomString(8)}`;
+  await Promise.all([login(page), apiCreateRepo(page.request, {name: repoName, autoInit: false})]);
+  await page.goto(`/${env.GITEA_TEST_E2E_USER}/${repoName}/labels`);
+  await page.getByRole('button', {name: 'New Label'}).click();
+  const modal = page.getByRole('dialog');
+  await modal.getByRole('button', {name: 'Save'}).click();
+  await modal.getByPlaceholder('Label name').fill('e2e-label');
+  const colorInput = modal.locator('.color-picker-combo input');
+  await colorInput.fill('');
+  await page.locator('hex-color-picker').click({position: {x: 10, y: 10}});
+  await expect(colorInput).toHaveValue(/^#[0-9a-f]{6}$/);
+  await modal.getByRole('button', {name: 'Save'}).click();
+  await expect(page.locator('.issue-label-list')).toContainText('e2e-label');
+});

tests/e2e/repo.test.ts

@@ -1,6 +1,6 @@
 import {env} from 'node:process';
-import {test} from '@playwright/test';
-import {login, randomString} from './utils.ts';
+import {test, expect} from '@playwright/test';
+import {login, apiCreateBranch, apiCreateRepo, randomString} from './utils.ts';
 
 test('create a repository', async ({page}) => {
   const repoName = `e2e-repo-${randomString(8)}`;
@@ -10,3 +10,21 @@ test('create a repository', async ({page}) => {
   await page.getByRole('button', {name: 'Create Repository'}).click();
   await page.waitForURL(new RegExp(`/${env.GITEA_TEST_E2E_USER}/${repoName}$`));
 });
+
+test('delete a branch via its modal', async ({page, request}) => {
+  const repoName = `e2e-branch-${randomString(8)}`;
+  const owner = env.GITEA_TEST_E2E_USER;
+  await Promise.all([
+    (async () => {
+      await apiCreateRepo(request, {name: repoName});
+      await apiCreateBranch(request, owner, repoName, 'feature');
+    })(),
+    login(page),
+  ]);
+  await page.goto(`/${owner}/${repoName}/branches`);
+  await page.getByRole('button', {name: 'Delete Branch "feature"'}).click();
+  const modal = page.getByRole('dialog');
+  await expect(modal).toContainText('feature');
+  await modal.getByRole('button', {name: 'Yes'}).click();
+  await expect(page.locator('.flash-message')).toContainText('Branch "feature" has been deleted.');
+});

tests/e2e/utils.ts

@@ -91,6 +91,20 @@ export async function apiCloseIssue(requestContext: APIRequestContext, owner: st
   }), 'apiCloseIssue');
 }
 
+export async function apiEditIssue(requestContext: APIRequestContext, owner: string, repo: string, issueIndex: number, data: Record<string, unknown>) {
+  await apiRetry(() => requestContext.patch(`${baseUrl()}/api/v1/repos/${owner}/${repo}/issues/${issueIndex}`, {
+    headers: apiHeaders(),
+    data,
+  }), 'apiEditIssue');
+}
+
+export async function apiCreateBranch(requestContext: APIRequestContext, owner: string, repo: string, name: string) {
+  await apiRetry(() => requestContext.post(`${baseUrl()}/api/v1/repos/${owner}/${repo}/branches`, {
+    headers: apiHeaders(),
+    data: {new_branch_name: name},
+  }), 'apiCreateBranch');
+}
+
 /** Create a PR via API. Returns the PR index for subsequent operations. */
 export async function apiCreatePR(requestContext: APIRequestContext, owner: string, repo: string, head: string, base: string, title: string, {headers}: {headers?: Record<string, string>} = {}): Promise<number> {
   const response = await apiRetry(() => requestContext.post(`${baseUrl()}/api/v1/repos/${owner}/${repo}/pulls`, {