refactor: replace Fomantic search module with first-party code (#37443)

- Replace fomantic `search` code with minimal first-party code
- Added a small fix to vertically align search box and search button
- Manually tested all search forms.
- Add `errorName` helper, similar to `errorMessage`.

Signed-off-by: silverwind <me@silverwind.io>
Co-authored-by: Claude (Opus 4.7) <noreply@anthropic.com>

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(),

web_src/fomantic/build/fomantic.js

@@ -1,6 +1,5 @@
 import './components/api.js';
 import './components/dropdown.js';
 import './components/modal.js';
-import './components/search.js';
 
 // Hard-forked from Fomantic UI 2.8.7, patches are commented with "GITEA-PATCH"

web_src/fomantic/theme.config.less

@@ -44,7 +44,6 @@
 @progress   : 'default';
 @slider     : 'default';
 @rating     : 'default';
-@search     : 'default';
 @shape      : 'default';
 @sidebar    : 'default';
 @sticky     : 'default';

web_src/js/features/common-fetch-action.ts

@@ -1,7 +1,7 @@
 import {GET, request} from '../modules/fetch.ts';
 import {hideToastsAll, showErrorToast} from '../modules/toast.ts';
 import {addDelegatedEventListener, createElementFromHTML} from '../utils/dom.ts';
-import {errorMessage} from '../modules/errors.ts';
+import {errorMessage, errorName} from '../modules/errors.ts';
 import {confirmModal, createConfirmModal} from './comp/ConfirmModal.ts';
 import {ignoreAreYouSure} from '../vendor/jquery.are-you-sure.ts';
 import {registerGlobalSelectorFunc} from '../modules/observer.ts';
@@ -138,7 +138,7 @@ async function performActionRequest(el: HTMLElement, opt: FetchActionOpts) {
     }
     await handleFetchActionError(resp);
   } catch (err) {
-    if ((err as Error).name !== 'AbortError') {
+    if (errorName(err) !== 'AbortError') {
       console.error(`Fetch action request error:`, err);
       showErrorToast(`Error: ${errorMessage(err)}`);
     }

web_src/js/features/comp/SearchRepoBox.ts

@@ -1,31 +1,16 @@
-import {fomanticQuery} from '../../modules/fomantic/base.ts';
-import {htmlEscape} from '../../utils/html.ts';
+import {attachSearchBox} from '../../modules/search.ts';
 
 const {appSubUrl} = window.config;
 
+type RepoSearchResponse = {data: Array<{repository: {full_name: string}}>};
+
 export function initCompSearchRepoBox(el: HTMLElement) {
   const uid = el.getAttribute('data-uid');
   const exclusive = el.getAttribute('data-exclusive');
   let url = `${appSubUrl}/repo/search?q={query}&uid=${uid}`;
-  if (exclusive === 'true') {
-    url += `&exclusive=true`;
-  }
-  fomanticQuery(el).search({
-    minCharacters: 2,
-    apiSettings: {
-      url,
-      onResponse(response: any) {
-        const items = [];
-        for (const item of response.data) {
-          items.push({
-            title: htmlEscape(item.repository.full_name.split('/')[1]),
-            description: htmlEscape(item.repository.full_name),
-          });
-        }
-        return {results: items};
-      },
-    },
-    searchFields: ['full_name'],
-    showNoResults: false,
-  });
+  if (exclusive === 'true') url += `&exclusive=true`;
+  attachSearchBox(el, url, (response: RepoSearchResponse) => response.data.map((item) => ({
+    title: item.repository.full_name.split('/')[1],
+    description: item.repository.full_name,
+  })));
 }

web_src/js/features/comp/SearchUserBox.ts

@@ -1,49 +1,30 @@
-import {htmlEscape} from '../../utils/html.ts';
-import {fomanticQuery} from '../../modules/fomantic/base.ts';
+import {attachSearchBox, type SearchResult} from '../../modules/search.ts';
 
 const {appSubUrl} = window.config;
 const looksLikeEmailAddressCheck = /^\S+@\S+$/;
 
+type UserSearchResponse = {data: Array<{login: string; avatar_url: string; full_name: string}>};
+
 export function initCompSearchUserBox() {
-  const searchUserBox = document.querySelector('#search-user-box');
-  if (!searchUserBox) return;
+  const box = document.querySelector<HTMLElement>('#search-user-box');
+  if (!box) return;
 
-  const allowEmailInput = searchUserBox.getAttribute('data-allow-email') === 'true';
-  const allowEmailDescription = searchUserBox.getAttribute('data-allow-email-description') ?? undefined;
-  const includeOrgs = searchUserBox.getAttribute('data-include-orgs') === 'true';
-  fomanticQuery(searchUserBox).search({
-    minCharacters: 2,
-    apiSettings: {
-      url: `${appSubUrl}/user/search_candidates?q={query}&orgs=${includeOrgs}`,
-      onResponse(response: any) {
-        const resultItems = [];
-        const searchQuery = searchUserBox.querySelector('input')!.value;
-        const searchQueryUppercase = searchQuery.toUpperCase();
-        for (const item of response.data) {
-          const resultItem = {
-            title: item.login,
-            image: item.avatar_url,
-            description: htmlEscape(item.full_name),
-          };
-          if (searchQueryUppercase === item.login.toUpperCase()) {
-            resultItems.unshift(resultItem); // add the exact match to the top
-          } else {
-            resultItems.push(resultItem);
-          }
-        }
+  const allowEmailInput = box.getAttribute('data-allow-email') === 'true';
+  const allowEmailDescription = box.getAttribute('data-allow-email-description') ?? undefined;
+  const includeOrgs = box.getAttribute('data-include-orgs') === 'true';
+  const url = `${appSubUrl}/user/search_candidates?q={query}&orgs=${includeOrgs}`;
 
-        if (allowEmailInput && !resultItems.length && looksLikeEmailAddressCheck.test(searchQuery)) {
-          const resultItem = {
-            title: searchQuery,
-            description: allowEmailDescription,
-          };
-          resultItems.push(resultItem);
-        }
-
-        return {results: resultItems};
-      },
-    },
-    searchFields: ['login', 'full_name'],
-    showNoResults: false,
+  attachSearchBox(box, url, (response: UserSearchResponse, query) => {
+    const items: SearchResult[] = [];
+    const queryUpper = query.toUpperCase();
+    for (const item of response.data) {
+      const result: SearchResult = {title: item.login, image: item.avatar_url, description: item.full_name};
+      if (queryUpper === item.login.toUpperCase()) items.unshift(result); // exact match floats to top
+      else items.push(result);
+    }
+    if (allowEmailInput && !items.length && looksLikeEmailAddressCheck.test(query)) {
+      items.push({title: query, description: allowEmailDescription});
+    }
+    return items;
   });
 }

web_src/js/features/repo-settings.ts

@@ -3,6 +3,7 @@ import {onInputDebounce, queryElems, toggleElem} from '../utils/dom.ts';
 import {POST} from '../modules/fetch.ts';
 import {initRepoSettingsBranchesDrag} from './repo-settings-branches.ts';
 import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {attachSearchBox} from '../modules/search.ts';
 import {globMatch} from '../utils/glob.ts';
 
 const {appSubUrl} = window.config;
@@ -45,29 +46,17 @@ function initRepoSettingsCollaboration() {
   }
 }
 
-function initRepoSettingsSearchTeamBox() {
-  const searchTeamBox = document.querySelector('#search-team-box');
-  if (!searchTeamBox) return;
+type TeamSearchResponse = {data: Array<{name: string; permission: string}>};
 
-  fomanticQuery(searchTeamBox).search({
-    minCharacters: 2,
-    searchFields: ['name', 'description'],
-    showNoResults: false,
-    rawResponse: true,
-    apiSettings: {
-      url: `${appSubUrl}/org/${searchTeamBox.getAttribute('data-org-name')}/teams/-/search?q={query}`,
-      onResponse(response: any) {
-        const items: Array<Record<string, any>> = [];
-        for (const item of response.data) {
-          items.push({
-            title: item.name,
-            description: `${item.permission} access`, // TODO: translate this string
-          });
-        }
-        return {results: items};
-      },
-    },
-  });
+function initRepoSettingsSearchTeamBox() {
+  const box = document.querySelector<HTMLElement>('#search-team-box');
+  if (!box) return;
+
+  const url = `${appSubUrl}/org/${box.getAttribute('data-org-name')}/teams/-/search?q={query}`;
+  attachSearchBox(box, url, (response: TeamSearchResponse) => response.data.map((item) => ({
+    title: item.name,
+    description: `${item.permission} access`, // TODO: translate this string
+  })));
 }
 
 function initRepoSettingsGitHook() {

web_src/js/modules/errors.ts

@@ -2,10 +2,16 @@
 import {html} from '../utils/html.ts';
 import type {Intent} from '../types.ts';
 
+/** Extract a message string from an unknown caught value. */
 export function errorMessage(err: unknown): string {
   return (err as Error)?.message || String(err);
 }
 
+/** Extract a name string from an unknown caught value. */
+export function errorName(err: unknown): string {
+  return (err as Error)?.name ?? '';
+}
+
 export function showGlobalErrorMessage(msg: string, msgType: Intent = 'error', details?: string) {
   const parentContainer = document.querySelector('.page-content') ?? document.body;
   if (!parentContainer) {

web_src/js/modules/search.ts

@@ -0,0 +1,116 @@
+import {debounce} from 'throttle-debounce';
+import {GET} from './fetch.ts';
+import {errorName} from './errors.ts';
+import {html, htmlRaw} from '../utils/html.ts';
+import {urlQueryEscape} from '../utils/url.ts';
+
+export type SearchResult = {
+  title: string;
+  description?: string;
+  image?: string;
+};
+
+function buildResultHTML(result: SearchResult): string {
+  const img = result.image ? html`<div class="image"><img src="${result.image}" alt=""></div>` : '';
+  const desc = result.description ? html`<div class="description">${result.description}</div>` : '';
+  return html`${htmlRaw(img)}<div class="content"><div class="title">${result.title}</div>${htmlRaw(desc)}</div>`;
+}
+
+function buildResultElement(result: SearchResult): HTMLElement {
+  const item = document.createElement('div');
+  item.className = 'result';
+  item.innerHTML = buildResultHTML(result);
+  return item;
+}
+
+// single delegated outside-click handler; each attachSearchBox registers a {container, hide} entry
+const outsideClickBoxes = new Set<{container: HTMLElement; hide: () => void}>();
+document.addEventListener('click', (event) => {
+  for (const box of outsideClickBoxes) {
+    if (!box.container.contains(event.target as Node)) box.hide();
+  }
+});
+
+/** Attach an API-driven autocomplete to `container`. `parse` maps the raw JSON response into the rendered result list. The selected result's title is written to the input on selection. */
+export function attachSearchBox<T = unknown>(container: HTMLElement, url: string, parse: (raw: T, query: string) => SearchResult[], {minCharacters = 2}: {minCharacters?: number} = {}): void {
+  const input = container.querySelector<HTMLInputElement>('input.prompt') ?? container.querySelector<HTMLInputElement>('input');
+  if (!input) return;
+
+  let resultsEl = container.querySelector<HTMLElement>(':scope > .results');
+  if (!resultsEl) {
+    resultsEl = document.createElement('div');
+    resultsEl.className = 'results';
+    container.append(resultsEl);
+  }
+  const itemResults = new Map<HTMLElement, SearchResult>();
+  let fetchController: AbortController | null = null;
+
+  const hide = () => {
+    fetchController?.abort();
+    resultsEl.style.display = 'none';
+    resultsEl.replaceChildren();
+    itemResults.clear();
+  };
+
+  const render = (results: SearchResult[]) => {
+    if (!results.length) return hide();
+    itemResults.clear();
+    resultsEl.replaceChildren(...results.map((result) => {
+      const item = buildResultElement(result);
+      itemResults.set(item, result);
+      return item;
+    }));
+    resultsEl.style.display = 'block';
+  };
+
+  const select = (item: HTMLElement) => {
+    input.value = itemResults.get(item)!.title;
+    input.dispatchEvent(new Event('change', {bubbles: true}));
+    hide();
+  };
+
+  const search = debounce(200, async (query: string) => {
+    fetchController?.abort();
+    if (query.length < minCharacters) return hide();
+    const ctrl = (fetchController = new AbortController());
+    try {
+      const response = await GET(url.replaceAll('{query}', urlQueryEscape(query)), {signal: ctrl.signal});
+      if (!response.ok) return hide();
+      const results = parse(await response.json(), query);
+      // only render if the fetch wasn't aborted (e.g. by hide()) and the input still matches
+      if (!ctrl.signal.aborted && input.value === query) render(results);
+    } catch (err) {
+      if (errorName(err) !== 'AbortError') hide();
+    }
+  });
+  // cancel + hide ensures a debounced fetch scheduled before any of these can't fire afterwards
+  const dismiss = () => { search.cancel(); hide() };
+
+  input.addEventListener('input', () => search(input.value));
+  input.addEventListener('focus', () => { if (itemResults.size) resultsEl.style.display = 'block'; });
+  input.addEventListener('blur', () => { search.cancel(); setTimeout(hide, 150) }); // hide deferred so a result mousedown can land first
+  input.addEventListener('keydown', (event) => {
+    const resultEls = Array.from(resultsEl.querySelectorAll<HTMLElement>('.result'));
+    if (!resultEls.length) return;
+    const index = resultEls.findIndex((item) => item.classList.contains('active'));
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault();
+      resultEls[index]?.classList.remove('active');
+      const next = event.key === 'ArrowDown' ? (index + 1) % resultEls.length : index <= 0 ? resultEls.length - 1 : index - 1;
+      resultEls[next].classList.add('active');
+    } else if (event.key === 'Enter' && index >= 0) {
+      event.preventDefault();
+      select(resultEls[index]);
+    } else if (event.key === 'Escape') {
+      dismiss();
+    }
+  });
+  // mousedown fires before input blur so the selection registers before blur-hide kicks in
+  resultsEl.addEventListener('mousedown', (event) => {
+    const target = (event.target as HTMLElement).closest<HTMLElement>('.result');
+    if (!target) return;
+    event.preventDefault();
+    select(target);
+  });
+  outsideClickBoxes.add({container, hide: dismiss});
+}