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>

3 files changed, 125 insertions, 60 deletions

diff --git a/web_src/js/features/common-issue.js b/web_src/js/features/common-issue.js
deleted file mode 100644
index 25d41edde3..0000000000
--- a/web_src/js/features/common-issue.js
+++ /dev/null
@@ -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();
-    });
-  });
-}
diff --git a/web_src/js/features/repo-issue-list.js b/web_src/js/features/repo-issue-list.js
new file mode 100644
index 0000000000..6c5d1244fd
--- /dev/null
+++ b/web_src/js/features/repo-issue-list.js
@@ -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();
+}
diff --git a/web_src/js/features/repo-issue.js b/web_src/js/features/repo-issue.js
index f2a6f5815b..a6105f7b24 100644
--- a/web_src/js/features/repo-issue.js
+++ b/web_src/js/features/repo-issue.js
@@ -86,7 +86,7 @@ export function initRepoIssueDue() {
   });
 }
 
-export function initRepoIssueList() {
+export function initRepoIssueSidebarList() {
   const repolink = $('#repolink').val();
   const repoId = $('#repoId').val();
   const crossRepoSearch = $('#crossRepoSearch').val();