Refactor authors dropdown (send get request from frontend to avoid long wait time) (#23890)
Right now the authors search dropdown might take a long time to load if amount of authors is huge. Example: (In the video below, there are about 10000 authors, and it takes about 10 seconds to open the author dropdown) https://user-images.githubusercontent.com/17645053/229422229-98aa9656-3439-4f8c-9f4e-83bd8e2a2557.mov Possible improvements can be made, which will take 2 steps (Thanks to @wolfogre for advice): Step 1： Backend: Add a new api, which returns a limit of 30 posters with matched prefix. Frontend: Change the search behavior from frontend search(fomantic search) to backend search(when input is changed, send a request to get authors matching the current search prefix) Step 2： Backend: Optimize the api in step 1 using indexer to support fuzzy search. This PR is implements the first step. The main changes: 1. Added api: `GET /{type:issues|pulls}/posters` , which return a limit of 30 users with matched prefix (prefix sent as query). If `DEFAULT_SHOW_FULL_NAME` in `custom/conf/app.ini` is set to true, will also include fullnames fuzzy search. 2. Added a tooltip saying "Shows a maximum of 30 users" to the author search dropdown 3. Change the search behavior from frontend search to backend search After: https://user-images.githubusercontent.com/17645053/229430960-f88fafd8-fd5d-4f84-9df2-2677539d5d08.mov Fixes: https://github.com/go-gitea/gitea/issues/22586 --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: silverwind <me@silverwind.io>wip
Hester Gong
GitHub
parent
08f4a9cca2
commit
6eb678374b
@ -0,0 +1,23 @@
|
|||||||
|
// Copyright 2023 The Gitea Authors. All rights reserved.
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
package repo
|
||||||
|
|
||||||
|
import (
|
||||||
|
"sort"
|
||||||
|
|
||||||
|
"code.gitea.io/gitea/models/user"
|
||||||
|
"code.gitea.io/gitea/modules/context"
|
||||||
|
)
|
||||||
|
|
||||||
|
func makeSelfOnTop(ctx *context.Context, users []*user.User) []*user.User {
|
||||||
|
if ctx.Doer != nil {
|
||||||
|
sort.Slice(users, func(i, j int) bool {
|
||||||
|
if users[i].ID == users[j].ID {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
return users[i].ID == ctx.Doer.ID // if users[i] is self, put it before others, so less=true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return users
|
||||||
|
}
|
||||||
@ -0,0 +1,27 @@
|
|||||||
|
// Copyright 2023 The Gitea Authors. All rights reserved.
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
package repo
|
||||||
|
|
||||||
|
import (
|
||||||
|
"testing"
|
||||||
|
|
||||||
|
"code.gitea.io/gitea/models/user"
|
||||||
|
"code.gitea.io/gitea/modules/context"
|
||||||
|
|
||||||
|
"github.com/stretchr/testify/assert"
|
||||||
|
)
|
||||||
|
|
||||||
|
func TestMakeSelfOnTop(t *testing.T) {
|
||||||
|
users := makeSelfOnTop(&context.Context{}, []*user.User{{ID: 2}, {ID: 1}})
|
||||||
|
assert.Len(t, users, 2)
|
||||||
|
assert.EqualValues(t, 2, users[0].ID)
|
||||||
|
|
||||||
|
users = makeSelfOnTop(&context.Context{Doer: &user.User{ID: 1}}, []*user.User{{ID: 2}, {ID: 1}})
|
||||||
|
assert.Len(t, users, 2)
|
||||||
|
assert.EqualValues(t, 1, users[0].ID)
|
||||||
|
|
||||||
|
users = makeSelfOnTop(&context.Context{Doer: &user.User{ID: 2}}, []*user.User{{ID: 2}, {ID: 1}})
|
||||||
|
assert.Len(t, users, 2)
|
||||||
|
assert.EqualValues(t, 2, users[0].ID)
|
||||||
|
}
|
||||||
@ -1,59 +0,0 @@
|
|||||||
import $ from 'jquery';
|
|
||||||
import {updateIssuesMeta} from './repo-issue.js';
|
|
||||||
import {toggleElem} from '../utils/dom.js';
|
|
||||||
|
|
||||||
export function initCommonIssue() {
|
|
||||||
const $issueSelectAll = $('.issue-checkbox-all');
|
|
||||||
const $issueCheckboxes = $('.issue-checkbox');
|
|
||||||
|
|
||||||
const syncIssueSelectionState = () => {
|
|
||||||
const $checked = $issueCheckboxes.filter(':checked');
|
|
||||||
const anyChecked = $checked.length !== 0;
|
|
||||||
const allChecked = anyChecked && $checked.length === $issueCheckboxes.length;
|
|
||||||
|
|
||||||
if (allChecked) {
|
|
||||||
$issueSelectAll.prop({'checked': true, 'indeterminate': false});
|
|
||||||
} else if (anyChecked) {
|
|
||||||
$issueSelectAll.prop({'checked': false, 'indeterminate': true});
|
|
||||||
} else {
|
|
||||||
$issueSelectAll.prop({'checked': false, 'indeterminate': false});
|
|
||||||
}
|
|
||||||
// if any issue is selected, show the action panel, otherwise show the filter panel
|
|
||||||
toggleElem($('#issue-filters'), !anyChecked);
|
|
||||||
toggleElem($('#issue-actions'), anyChecked);
|
|
||||||
// there are two panels but only one select-all checkbox, so move the checkbox to the visible panel
|
|
||||||
$('#issue-filters, #issue-actions').filter(':visible').find('.column:first').prepend($issueSelectAll);
|
|
||||||
};
|
|
||||||
|
|
||||||
$issueCheckboxes.on('change', syncIssueSelectionState);
|
|
||||||
|
|
||||||
$issueSelectAll.on('change', () => {
|
|
||||||
$issueCheckboxes.prop('checked', $issueSelectAll.is(':checked'));
|
|
||||||
syncIssueSelectionState();
|
|
||||||
});
|
|
||||||
|
|
||||||
$('.issue-action').on('click', async function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
let action = this.getAttribute('data-action');
|
|
||||||
let elementId = this.getAttribute('data-element-id');
|
|
||||||
const url = this.getAttribute('data-url');
|
|
||||||
const issueIDs = $('.issue-checkbox:checked').map((_, el) => {
|
|
||||||
return el.getAttribute('data-issue-id');
|
|
||||||
}).get().join(',');
|
|
||||||
if (elementId === '0' && url.slice(-9) === '/assignee') {
|
|
||||||
elementId = '';
|
|
||||||
action = 'clear';
|
|
||||||
}
|
|
||||||
if (action === 'toggle' && e.altKey) {
|
|
||||||
action = 'toggle-alt';
|
|
||||||
}
|
|
||||||
updateIssuesMeta(
|
|
||||||
url,
|
|
||||||
action,
|
|
||||||
issueIDs,
|
|
||||||
elementId
|
|
||||||
).then(() => {
|
|
||||||
window.location.reload();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@ -0,0 +1,124 @@
|
|||||||
|
import $ from 'jquery';
|
||||||
|
import {updateIssuesMeta} from './repo-issue.js';
|
||||||
|
import {toggleElem} from '../utils/dom.js';
|
||||||
|
import {htmlEscape} from 'escape-goat';
|
||||||
|
|
||||||
|
function initRepoIssueListCheckboxes() {
|
||||||
|
const $issueSelectAll = $('.issue-checkbox-all');
|
||||||
|
const $issueCheckboxes = $('.issue-checkbox');
|
||||||
|
|
||||||
|
const syncIssueSelectionState = () => {
|
||||||
|
const $checked = $issueCheckboxes.filter(':checked');
|
||||||
|
const anyChecked = $checked.length !== 0;
|
||||||
|
const allChecked = anyChecked && $checked.length === $issueCheckboxes.length;
|
||||||
|
|
||||||
|
if (allChecked) {
|
||||||
|
$issueSelectAll.prop({'checked': true, 'indeterminate': false});
|
||||||
|
} else if (anyChecked) {
|
||||||
|
$issueSelectAll.prop({'checked': false, 'indeterminate': true});
|
||||||
|
} else {
|
||||||
|
$issueSelectAll.prop({'checked': false, 'indeterminate': false});
|
||||||
|
}
|
||||||
|
// if any issue is selected, show the action panel, otherwise show the filter panel
|
||||||
|
toggleElem($('#issue-filters'), !anyChecked);
|
||||||
|
toggleElem($('#issue-actions'), anyChecked);
|
||||||
|
// there are two panels but only one select-all checkbox, so move the checkbox to the visible panel
|
||||||
|
$('#issue-filters, #issue-actions').filter(':visible').find('.column:first').prepend($issueSelectAll);
|
||||||
|
};
|
||||||
|
|
||||||
|
$issueCheckboxes.on('change', syncIssueSelectionState);
|
||||||
|
|
||||||
|
$issueSelectAll.on('change', () => {
|
||||||
|
$issueCheckboxes.prop('checked', $issueSelectAll.is(':checked'));
|
||||||
|
syncIssueSelectionState();
|
||||||
|
});
|
||||||
|
|
||||||
|
$('.issue-action').on('click', async function (e) {
|
||||||
|
e.preventDefault();
|
||||||
|
let action = this.getAttribute('data-action');
|
||||||
|
let elementId = this.getAttribute('data-element-id');
|
||||||
|
const url = this.getAttribute('data-url');
|
||||||
|
const issueIDs = $('.issue-checkbox:checked').map((_, el) => {
|
||||||
|
return el.getAttribute('data-issue-id');
|
||||||
|
}).get().join(',');
|
||||||
|
if (elementId === '0' && url.slice(-9) === '/assignee') {
|
||||||
|
elementId = '';
|
||||||
|
action = 'clear';
|
||||||
|
}
|
||||||
|
if (action === 'toggle' && e.altKey) {
|
||||||
|
action = 'toggle-alt';
|
||||||
|
}
|
||||||
|
updateIssuesMeta(
|
||||||
|
url,
|
||||||
|
action,
|
||||||
|
issueIDs,
|
||||||
|
elementId
|
||||||
|
).then(() => {
|
||||||
|
window.location.reload();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function initRepoIssueListAuthorDropdown() {
|
||||||
|
const $searchDropdown = $('.user-remote-search');
|
||||||
|
if (!$searchDropdown.length) return;
|
||||||
|
|
||||||
|
let searchUrl = $searchDropdown.attr('data-search-url');
|
||||||
|
const actionJumpUrl = $searchDropdown.attr('data-action-jump-url');
|
||||||
|
const selectedUserId = $searchDropdown.attr('data-selected-user-id');
|
||||||
|
if (!searchUrl.includes('?')) searchUrl += '?';
|
||||||
|
|
||||||
|
$searchDropdown.dropdown('setting', {
|
||||||
|
fullTextSearch: true,
|
||||||
|
selectOnKeydown: false,
|
||||||
|
apiSettings: {
|
||||||
|
cache: false,
|
||||||
|
url: `${searchUrl}&q={query}`,
|
||||||
|
onResponse(resp) {
|
||||||
|
// the content is provided by backend IssuePosters handler
|
||||||
|
const processedResults = []; // to be used by dropdown to generate menu items
|
||||||
|
for (const item of resp.results) {
|
||||||
|
let html = `<img class="ui avatar gt-vm" src="${htmlEscape(item.avatar_link)}" aria-hidden="true" alt="" width="20" height="20"><span class="gt-ellipsis">${htmlEscape(item.username)}</span>`;
|
||||||
|
if (item.full_name) html += `<span class="search-fullname gt-ml-3">${htmlEscape(item.full_name)}</span>`;
|
||||||
|
processedResults.push({value: item.user_id, name: html});
|
||||||
|
}
|
||||||
|
resp.results = processedResults;
|
||||||
|
return resp;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
action: (_text, value) => {
|
||||||
|
window.location.href = actionJumpUrl.replace('{user_id}', encodeURIComponent(value));
|
||||||
|
},
|
||||||
|
onShow: () => {
|
||||||
|
$searchDropdown.dropdown('filter', ' '); // trigger a search on first show
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
// we want to generate the dropdown menu items by ourselves, replace its internal setup functions
|
||||||
|
const dropdownSetup = {...$searchDropdown.dropdown('internal', 'setup')};
|
||||||
|
const dropdownTemplates = $searchDropdown.dropdown('setting', 'templates');
|
||||||
|
$searchDropdown.dropdown('internal', 'setup', dropdownSetup);
|
||||||
|
dropdownSetup.menu = function (values) {
|
||||||
|
const $menu = $searchDropdown.find('> .menu');
|
||||||
|
$menu.find('> .dynamic-item').remove(); // remove old dynamic items
|
||||||
|
|
||||||
|
const newMenuHtml = dropdownTemplates.menu(values, $searchDropdown.dropdown('setting', 'fields'), true /* html */, $searchDropdown.dropdown('setting', 'className'));
|
||||||
|
if (newMenuHtml) {
|
||||||
|
const $newMenuItems = $(newMenuHtml);
|
||||||
|
$newMenuItems.addClass('dynamic-item');
|
||||||
|
$menu.append('<div class="ui divider dynamic-item"></div>', ...$newMenuItems);
|
||||||
|
}
|
||||||
|
$searchDropdown.dropdown('refresh');
|
||||||
|
// defer our selection to the next tick, because dropdown will set the selection item after this `menu` function
|
||||||
|
setTimeout(() => {
|
||||||
|
$menu.find('.item.active, .item.selected').removeClass('active selected');
|
||||||
|
$menu.find(`.item[data-value="${selectedUserId}"]`).addClass('selected');
|
||||||
|
}, 0);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export function initRepoIssueList() {
|
||||||
|
if (!document.querySelectorAll('.page-content.repository.issue-list, .page-content.repository.milestone-issue-list').length) return;
|
||||||
|
initRepoIssueListCheckboxes();
|
||||||
|
initRepoIssueListAuthorDropdown();
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue