refactor: replace Fomantic search module with first-party code

templates/admin/badge/users.tmpl

@@ -4,8 +4,8 @@
 			{{.Title}}
 		</h4>
 		<div class="ui attached segment">
-			<form class="ui form" action="{{.Link}}" method="post">
-				<div id="search-user-box" class="ui search input tw-align-middle">
+			<form class="ui form flex-text-block" action="{{.Link}}" method="post">
+				<div id="search-user-box" class="ui search input">
 					<input class="prompt" name="user" placeholder="{{ctx.Locale.Tr "search.user_kind"}}" autocomplete="off" autofocus required>
 				</div>
 				<button class="ui primary button">{{ctx.Locale.Tr "admin.badges.add_user"}}</button>

templates/repo/settings/actions_general.tmpl

@@ -86,8 +86,8 @@
 	</div>
 	{{end}}
 	<div class="ui bottom attached segment">
-		<form class="ui form form-fetch-action" action="{{.Link}}/collaborative_owner/add" method="post">
-			<div id="search-user-box" class="ui search input tw-align-middle" data-include-orgs="true">
+		<form class="ui form form-fetch-action flex-text-block" action="{{.Link}}/collaborative_owner/add" method="post">
+			<div id="search-user-box" class="ui search input" data-include-orgs="true">
 				<input class="prompt" name="collaborative_owner" placeholder="{{ctx.Locale.Tr "search.user_kind"}}" autocomplete="off" autofocus required>
 			</div>
 			<button class="ui primary button">{{ctx.Locale.Tr "actions.general.add_collaborative_owner"}}</button>

templates/repo/settings/collaboration.tmpl

@@ -39,8 +39,8 @@
 		</div>
 		{{end}}
 		<div class="ui bottom attached segment">
-			<form class="ui form" id="repo-collab-form" action="{{.Link}}" method="post">
-				<div id="search-user-box" class="ui search input tw-align-middle">
+			<form class="ui form flex-text-block" id="repo-collab-form" action="{{.Link}}" method="post">
+				<div id="search-user-box" class="ui search input">
 					<input class="prompt" name="collaborator" placeholder="{{ctx.Locale.Tr "search.user_kind"}}" autocomplete="off" autofocus required>
 				</div>
 				<button class="ui primary button">{{ctx.Locale.Tr "repo.settings.add_collaborator"}}</button>
@@ -106,8 +106,8 @@
 			{{end}}
 			<div class="ui bottom attached segment">
 				{{if $allowedToChangeTeams}}
-					<form class="ui form" id="repo-collab-team-form" action="{{.Link}}/team" method="post">
-						<div id="search-team-box" class="ui search input tw-align-middle" data-org-name="{{.OrgName}}">
+					<form class="ui form flex-text-block" id="repo-collab-team-form" action="{{.Link}}/team" method="post">
+						<div id="search-team-box" class="ui search input" data-org-name="{{.OrgName}}">
 							<input class="prompt" name="team" placeholder="{{ctx.Locale.Tr "search.team_kind"}}" autocomplete="off" required>
 						</div>
 						<button class="ui primary button">{{ctx.Locale.Tr "repo.settings.add_team"}}</button>

tests/e2e/org.test.ts

@@ -1,5 +1,5 @@
 import {test, expect} from '@playwright/test';
-import {login, apiDeleteOrg, randomString} from './utils.ts';
+import {login, apiCreateOrg, apiCreateTeam, apiCreateUser, apiDeleteOrg, randomString} from './utils.ts';
 
 test('create an organization', async ({page}) => {
   const orgName = `e2e-org-${randomString(8)}`;
@@ -11,3 +11,24 @@ test('create an organization', async ({page}) => {
   // delete via API because of issues related to form-fetch-action
   await apiDeleteOrg(page.request, orgName);
 });
+
+test('add team member search', async ({page, request}) => {
+  const orgName = `team-add-${randomString(8)}`;
+  const teamName = `team-add-${randomString(8)}`;
+  const userName = `team-add-${randomString(8)}`;
+
+  await Promise.all([
+    (async () => {
+      await apiCreateOrg(request, orgName);
+      await apiCreateTeam(request, orgName, teamName);
+    })(),
+    apiCreateUser(request, userName),
+    login(page),
+  ]);
+
+  await page.goto(`/org/${orgName}/teams/${teamName}`);
+  const input = page.locator('#search-user-box input.prompt');
+  await input.fill(userName.slice(-6));
+  const result = page.locator('#search-user-box .results .result').first();
+  await expect(result).toContainText(userName);
+});

tests/e2e/repo-collab.test.ts

@@ -0,0 +1,24 @@
+import {env} from 'node:process';
+import {test, expect} from '@playwright/test';
+import {apiCreateRepo, apiCreateUser, login, randomString} from './utils.ts';
+
+test('add collaborator search', async ({page, request}) => {
+  const userName = `repo-collab-${randomString(8)}`;
+  const repoName = `repo-collab-${randomString(8)}`;
+
+  await Promise.all([
+    apiCreateUser(request, userName),
+    apiCreateRepo(request, {name: repoName, autoInit: false}),
+    login(page),
+  ]);
+
+  await page.goto(`/${env.GITEA_TEST_E2E_USER}/${repoName}/settings/collaboration`);
+  const input = page.locator('#search-user-box input.prompt');
+  await input.fill(userName.slice(-6));
+  const result = page.locator('#search-user-box .results .result').first();
+  await expect(result).toContainText(userName);
+  await result.click();
+  await expect(input).toHaveValue(userName);
+  await page.getByRole('button', {name: 'Add Collaborator'}).click();
+  await expect(page.locator('body')).toContainText(userName);
+});

tests/e2e/utils.ts

@@ -47,6 +47,20 @@ export async function apiCreateRepo(requestContext: APIRequestContext, {name, au
   }), 'apiCreateRepo');
 }
 
+export async function apiCreateOrg(requestContext: APIRequestContext, name: string, {headers}: {headers?: Record<string, string>} = {}) {
+  await apiRetry(() => requestContext.post(`${baseUrl()}/api/v1/orgs`, {
+    headers: headers || apiHeaders(),
+    data: {username: name},
+  }), 'apiCreateOrg');
+}
+
+export async function apiCreateTeam(requestContext: APIRequestContext, org: string, name: string, {permission = 'read', units = ['repo.code'], headers}: {permission?: string; units?: Array<string>; headers?: Record<string, string>} = {}) {
+  await apiRetry(() => requestContext.post(`${baseUrl()}/api/v1/orgs/${org}/teams`, {
+    headers: headers || apiHeaders(),
+    data: {name, permission, units},
+  }), 'apiCreateTeam');
+}
+
 export async function apiStartStopwatch(requestContext: APIRequestContext, owner: string, repo: string, issueIndex: number, {headers}: {headers?: Record<string, string>} = {}) {
   await apiRetry(() => requestContext.post(`${baseUrl()}/api/v1/repos/${owner}/${repo}/issues/${issueIndex}/stopwatch/start`, {
     headers: headers || apiHeaders(),