Mirrors/gitea
0
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-09-20 16:41:08 +02:00
Code Issues Activity

Replace Fomantic search module with first-party autocomplete

Browse Source 
Drops the 1565-line vendored Fomantic UI search jQuery plugin in favor
of a small first-party TypeScript module covering the three call sites
(repo, user, and team autocomplete). Adds an e2e regression suite that
exercises each search box.

Also fixes input/button vertical alignment in the four forms that wrap
a search box: the fomantic-era `tw-align-middle` workaround is replaced
by `flex-text-block` on the form, which is the codebase's standard
flex helper for this layout.

Co-Authored-By: Claude (Opus 4.7) <noreply@anthropic.com>
This commit is contained in:
silverwind
2026-04-26 20:43:58 +02:00
co-authored by Claude
parent 068b59aa97
commit 77f78076fe
13 changed files with 291 additions and 1643 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web_src/js/features/comp/SearchRepoBox.ts
+12 -17
View File
@@ -1,4 +1,4 @@
import {fomanticQuery} from '../../modules/fomantic/base.ts';
import {initSearchBox} from '../../modules/fomantic/search.ts';
import {htmlEscape} from '../../utils/html.ts';
const {appSubUrl} = window.config;
@@ -10,22 +10,17 @@ export function initCompSearchRepoBox(el: HTMLElement) {
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};
},
initSearchBox(el, {
apiUrl: 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,
});
}
web_src/js/features/comp/SearchUserBox.ts
+26 -32
View File
@@ -1,49 +1,43 @@
import {htmlEscape} from '../../utils/html.ts';
import {fomanticQuery} from '../../modules/fomantic/base.ts';
import {initSearchBox} from '../../modules/fomantic/search.ts';
const {appSubUrl} = window.config;
const looksLikeEmailAddressCheck = /^\S+@\S+$/;
export function initCompSearchUserBox() {
const searchUserBox = document.querySelector('#search-user-box');
const searchUserBox = document.querySelector<HTMLElement>('#search-user-box');
if (!searchUserBox) 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);
}
}
if (allowEmailInput && !resultItems.length && looksLikeEmailAddressCheck.test(searchQuery)) {
const resultItem = {
title: searchQuery,
description: allowEmailDescription,
};
initSearchBox(searchUserBox, {
apiUrl: `${appSubUrl}/user/search_candidates?q={query}&orgs=${includeOrgs}`,
onResponse(response: any, searchQuery: string) {
const resultItems = [];
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);
}
}
return {results: resultItems};
},
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,
});
}
web_src/js/features/repo-settings.ts
+13 -18
View File
@@ -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 {initSearchBox} from '../modules/fomantic/search.ts';
import {globMatch} from '../utils/glob.ts';
const {appSubUrl} = window.config;
@@ -46,26 +47,20 @@ function initRepoSettingsCollaboration() {
}
function initRepoSettingsSearchTeamBox() {
const searchTeamBox = document.querySelector('#search-team-box');
const searchTeamBox = document.querySelector<HTMLElement>('#search-team-box');
if (!searchTeamBox) return;
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};
},
initSearchBox(searchTeamBox, {
apiUrl: `${appSubUrl}/org/${searchTeamBox.getAttribute('data-org-name')}/teams/-/search?q={query}`,
onResponse(response: any) {
const items = [];
for (const item of response.data) {
items.push({
title: item.name,
description: `${item.permission} access`, // TODO: translate this string
});
}
return {results: items};
},
});
}
web_src/js/modules/fomantic/search.ts
+120
View File
@@ -0,0 +1,120 @@
import {debounce} from 'throttle-debounce';
import {GET} from '../fetch.ts';
import {html, htmlRaw} from '../../utils/html.ts';
export type SearchResult = {
title: string;
description?: string;
image?: string;
};
export type SearchOpts = {
apiUrl: string;
minCharacters?: number;
onResponse: (raw: any, query: string) => {results: SearchResult[]};
};
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">${htmlRaw(result.description)}</div>` : '';
return html`${htmlRaw(img)}<div class="content"><div class="title">${htmlRaw(result.title)}</div>${htmlRaw(desc)}</div>`;
}
export function initSearchBox(container: HTMLElement, opts: SearchOpts): void {
const minCharacters = opts.minCharacters ?? 2;
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);
}
let abortCtrl: AbortController | null = null;
const items = () => resultsEl.querySelectorAll<HTMLElement>('.result');
const hide = () => {
resultsEl.style.display = 'none';
resultsEl.replaceChildren();
};
const render = (results: SearchResult[]) => {
if (!results.length) return hide();
resultsEl.replaceChildren();
for (const result of results) {
const item = document.createElement('div');
item.className = 'result';
item.innerHTML = buildResultHTML(result);
resultsEl.append(item);
}
resultsEl.style.display = 'block';
};
const selectItem = (item: HTMLElement) => {
input.value = item.querySelector<HTMLElement>('.title')!.textContent ?? '';
input.dispatchEvent(new Event('change', {bubbles: true}));
hide();
input.focus();
};
const performSearch = async (query: string) => {
abortCtrl?.abort();
if (query.length < minCharacters) return hide();
abortCtrl = new AbortController();
try {
const response = await GET(opts.apiUrl.replaceAll('{query}', encodeURIComponent(query)), {signal: abortCtrl.signal});
if (!response.ok) return hide();
const {results} = opts.onResponse(await response.json(), query);
if (input.value !== query) return; // stale response racing a newer keystroke
render(results);
} catch (err) {
if ((err as Error).name !== 'AbortError') hide();
}
};
const debounced = debounce(200, (query: string) => { performSearch(query) });
input.addEventListener('input', () => debounced(input.value));
input.addEventListener('focus', () => {
if (items().length) resultsEl.style.display = 'block';
});
input.addEventListener('keydown', (event) => {
const all = items();
if (!all.length) return;
const activeIndex = Array.from(all).findIndex((item) => item.classList.contains('active'));
const move = (next: number) => {
event.preventDefault();
all[activeIndex]?.classList.remove('active');
all[next].classList.add('active');
};
if (event.key === 'ArrowDown') {
move((activeIndex + 1) % all.length);
} else if (event.key === 'ArrowUp') {
move(activeIndex <= 0 ? all.length - 1 : activeIndex - 1);
} else if (event.key === 'Enter' && activeIndex >= 0) {
event.preventDefault();
selectItem(all[activeIndex]);
} else if (event.key === 'Escape') {
hide();
}
});
// 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();
selectItem(target);
});
document.addEventListener('click', (event) => {
if (!container.contains(event.target as Node)) hide();
});
input.addEventListener('blur', () => {
setTimeout(hide, 150); // deferred so a result mousedown can land first
});
}