Improve "goto issue by number" button (#24577)

Follow #24479


![image](https://user-images.githubusercontent.com/2114189/236694114-c5cb42ff-456d-465a-bcb9-89ed5959d346.png)


![image](https://user-images.githubusercontent.com/2114189/236694119-052e689c-6264-4468-9ab3-0e5c97521bec.png)


![image](https://user-images.githubusercontent.com/2114189/236694139-f8940765-42ce-462d-b49e-50a416cc6f85.png)


![image](https://user-images.githubusercontent.com/2114189/236694154-6d8a000c-9ef3-4d07-af1c-59b0cf8f4d33.png)


![image](https://user-images.githubusercontent.com/2114189/236694166-3bc3e585-7955-44aa-af34-b33ae91e132f.png)

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>

templates/repo/issue/search.tmpl

@@ -8,9 +8,9 @@
 		<input type="hidden" name="assignee" value="{{$.AssigneeID}}">
 		<input type="hidden" name="poster" value="{{$.PosterID}}">
 		<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}...">
-		<button id="hashtag-button" class="ui small icon button gt-hidden" data-tooltip-content="{{.locale.Tr "explore.go_to"}}">{{svg "octicon-hash"}}</button>
+		{{if .PageIsIssueList}}
-		<button id="search-button" class="ui small icon button" aria-label="{{.locale.Tr "explore.search"}}">
+			<button id="issue-list-quick-goto" class="ui small icon button gt-hidden" data-tooltip-content="{{.locale.Tr "explore.go_to"}}" data-repo-link="{{.RepoLink}}">{{svg "octicon-hash"}}</button>
-			{{svg "octicon-search"}}
+		{{end}}
-		</button>
+		<button class="ui small icon button" aria-label="{{.locale.Tr "explore.search"}}">{{svg "octicon-search"}}</button>
 	</div>
 </form>

templates/user/dashboard/issues.tmpl

@@ -78,8 +78,8 @@
 							<input type="hidden" name="sort" value="{{$.SortType}}">
 							<input type="hidden" name="state" value="{{$.State}}">
 							<input name="q" value="{{$.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}...">
-							<button id="hashtag-button" class="ui small icon button gt-hidden" data-tooltip-content="{{.locale.Tr "explore.go_to"}}">{{svg "octicon-hash"}}</button>
+							<button id="issue-list-quick-goto" class="ui small icon button gt-hidden" data-tooltip-content="{{.locale.Tr "explore.go_to"}}">{{svg "octicon-hash"}}</button>
-							<button id="search-button" class="ui small icon button" aria-label="{{.locale.Tr "explore.search"}}">{{svg "octicon-search"}}</button>
+							<button class="ui small icon button" aria-label="{{.locale.Tr "explore.search"}}">{{svg "octicon-search"}}</button>
 						</div>
 					</form>
 					<!-- Sort -->

web_src/js/features/codeeditor.js

@@ -1,5 +1,5 @@
 import {basename, extname, isObject, isDarkTheme} from '../utils.js';
-import {debounce} from 'throttle-debounce';
+import {onInputDebounce} from '../utils/dom.js';
 
 const languagesByFilename = {};
 const languagesByExt = {};
@@ -164,7 +164,7 @@ export async function createCodeEditor(textarea, filenameInput) {
     ...getEditorConfigOptions(editorConfig),
   });
 
-  filenameInput.addEventListener('input', debounce(500, () => {
+  filenameInput.addEventListener('input', onInputDebounce(() => {
     const filename = filenameInput.value;
     const previewable = previewableExts.has(extname(filename));
     togglePreviewDisplay(previewable);

web_src/js/features/common-issue-list.js

@@ -0,0 +1,70 @@
+import $ from 'jquery';
+import {isElemHidden, onInputDebounce, toggleElem} from '../utils/dom.js';
+const {appSubUrl} = window.config;
+
+const reIssueIndex = /^(\d+)$/; // eg: "123"
+const reIssueSharpIndex = /^#(\d+)$/; // eg: "#123"
+const reIssueOwnerRepoIndex = /^([-.\w]+)\/([-.\w]+)#(\d+)$/;  // eg: "{owner}/{repo}#{index}"
+
+// if the searchText can be parsed to an "issue goto link", return the link, otherwise return empty string
+export function parseIssueListQuickGotoLink(repoLink, searchText) {
+  searchText = searchText.trim();
+  let targetUrl = '';
+  if (repoLink) {
+    // try to parse it in current repo
+    if (reIssueIndex.test(searchText)) {
+      targetUrl = `${repoLink}/issues/${searchText}`;
+    } else if (reIssueSharpIndex.test(searchText)) {
+      targetUrl = `${repoLink}/issues/${searchText.substr(1)}`;
+    }
+  } else {
+    // try to parse it for a global search (eg: "owner/repo#123")
+    const matchIssueOwnerRepoIndex = searchText.match(reIssueOwnerRepoIndex);
+    if (matchIssueOwnerRepoIndex) {
+      const [_, owner, repo, index] = matchIssueOwnerRepoIndex;
+      targetUrl = `${appSubUrl}/${owner}/${repo}/issues/${index}`;
+    }
+  }
+  return targetUrl;
+}
+
+export function initCommonIssueListQuickGoto() {
+  const $goto = $('#issue-list-quick-goto');
+  if (!$goto.length) return;
+
+  const $form = $goto.closest('form');
+  const $input = $form.find('input[name=q]');
+  const repoLink = $goto.attr('data-repo-link');
+
+  $form.on('submit', (e) => {
+    // if there is no goto button, or the form is submitted by non-quick-goto elements, submit the form directly
+    let doQuickGoto = !isElemHidden($goto);
+    const submitter = e.originalEvent.submitter;
+    if (submitter !== $form[0] && submitter !== $input[0] && submitter !== $goto[0]) doQuickGoto = false;
+    if (!doQuickGoto) return;
+
+    // if there is a goto button, use its link
+    e.preventDefault();
+    window.location.href = $goto.attr('data-issue-goto-link');
+  });
+
+  const onInput = async () => {
+    const searchText = $input.val();
+
+    // try to check whether the parsed goto link is valid
+    let targetUrl = parseIssueListQuickGotoLink(repoLink, searchText);
+    if (targetUrl) {
+      const res = await fetch(`${targetUrl}/info`);
+      if (res.status !== 200) targetUrl = '';
+    }
+
+    // if the input value has changed, then ignore the result
+    if ($input.val() !== searchText) return;
+
+    toggleElem($goto, Boolean(targetUrl));
+    $goto.attr('data-issue-goto-link', targetUrl);
+  };
+
+  $input.on('input', onInputDebounce(onInput));
+  onInput();
+}

web_src/js/features/common-issue-list.test.js

@@ -0,0 +1,17 @@
+import {test, expect} from 'vitest';
+import {parseIssueListQuickGotoLink} from './common-issue-list.js';
+
+test('parseIssueListQuickGotoLink', () => {
+  expect(parseIssueListQuickGotoLink('/link', '')).toEqual('');
+  expect(parseIssueListQuickGotoLink('/link', 'abc')).toEqual('');
+  expect(parseIssueListQuickGotoLink('/link', '123')).toEqual('/link/issues/123');
+  expect(parseIssueListQuickGotoLink('/link', '#123')).toEqual('/link/issues/123');
+  expect(parseIssueListQuickGotoLink('/link', 'owner/repo#123')).toEqual('');
+
+  expect(parseIssueListQuickGotoLink('', '')).toEqual('');
+  expect(parseIssueListQuickGotoLink('', 'abc')).toEqual('');
+  expect(parseIssueListQuickGotoLink('', '123')).toEqual('');
+  expect(parseIssueListQuickGotoLink('', '#123')).toEqual('');
+  expect(parseIssueListQuickGotoLink('', 'owner/repo#')).toEqual('');
+  expect(parseIssueListQuickGotoLink('', 'owner/repo#123')).toEqual('/owner/repo/issues/123');
+});

web_src/js/features/repo-issue.js

@@ -4,7 +4,6 @@ import {showTemporaryTooltip, createTippy} from '../modules/tippy.js';
 import {hideElem, showElem, toggleElem} from '../utils/dom.js';
 import {setFileFolding} from './file-fold.js';
 import {getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
-import {parseIssueHref} from '../utils.js';
 
 const {appSubUrl, csrfToken} = window.config;
 
@@ -638,34 +637,6 @@ export function initRepoIssueBranchSelect() {
   $('#branch-select > .item').on('click', changeBranchSelect);
 }
 
-export function initRepoIssueGotoID() {
-  const issueidre = /^(?:\w+\/\w+#\d+|#\d+|\d+)$/;
-  const isGlobalIssuesArea = $('.repo.name.item').length > 0; // for global issues area or repository issues area
-  $('form.list-header-search').on('submit', (e) => {
-    const qval = e.target.q.value;
-    const aElm = document.activeElement;
-    if (!$('#hashtag-button').length || aElm.id === 'search-button' || (aElm.name === 'q' && !qval.includes('#')) || (isGlobalIssuesArea && !qval.includes('/')) || !issueidre.test(qval)) return;
-    const pathname = window.location.pathname;
-    let gotoUrl = qval.includes('/') ? `${qval.replace('#', '/issues/')}` : `${pathname}/${qval.replace('#', '')}`;
-    if (appSubUrl.length) {
-      gotoUrl = qval.includes('/') ? `/${appSubUrl}/${qval.replace('#', '/issues/')}` : `/${appSubUrl}/${pathname}/${qval.replace('#', '')}`;
-    }
-    const {owner, repo, type, index} = parseIssueHref(gotoUrl);
-    if (owner && repo && type && index) {
-      e.preventDefault();
-      window.location.href = gotoUrl;
-    }
-  });
-  $('form.list-header-search input[name=q]').on('input', (e) => {
-    const qval = e.target.value;
-    if (isGlobalIssuesArea && qval.includes('/') && issueidre.test(qval) || !isGlobalIssuesArea && issueidre.test(qval)) {
-      showElem($('#hashtag-button'));
-    } else {
-      hideElem($('#hashtag-button'));
-    }
-  });
-}
-
 export function initSingleCommentEditor($commentForm) {
   // pages:
   // * normal new issue/pr page, no status-button

web_src/js/index.js

@@ -30,7 +30,7 @@ import {
   initRepoIssueWipTitle,
   initRepoPullRequestMergeInstruction,
   initRepoPullRequestAllowMaintainerEdit,
-  initRepoPullRequestReview, initRepoIssueSidebarList, initRepoIssueGotoID
+  initRepoPullRequestReview, initRepoIssueSidebarList
 } from './features/repo-issue.js';
 import {
   initRepoEllipsisButton,
@@ -81,6 +81,7 @@ import {initGlobalTooltips} from './modules/tippy.js';
 import {initGiteaFomantic} from './modules/fomantic.js';
 import {onDomReady} from './utils/dom.js';
 import {initRepoIssueList} from './features/repo-issue-list.js';
+import {initCommonIssueListQuickGoto} from './features/common-issue-list.js';
 
 // Init Gitea's Fomantic settings
 initGiteaFomantic();
@@ -98,6 +99,7 @@ onDomReady(() => {
   initGlobalLinkActions();
 
   initCommonOrganization();
+  initCommonIssueListQuickGoto();
 
   initCompSearchUserBox();
   initCompWebHookEditor();
@@ -175,5 +177,4 @@ onDomReady(() => {
   initUserAuthWebAuthnRegister();
   initUserSettings();
   initRepoDiffView();
-  initRepoIssueGotoID();
 });

web_src/js/utils/dom.js

@@ -1,3 +1,5 @@
+import {debounce} from 'throttle-debounce';
+
 function elementsCall(el, func, ...args) {
   if (typeof el === 'string' || el instanceof String) {
     el = document.querySelectorAll(el);
@@ -42,6 +44,13 @@ export function toggleElem(el, force) {
   elementsCall(el, toggleShown, force);
 }
 
+export function isElemHidden(el) {
+  const res = [];
+  elementsCall(el, (e) => res.push(e.classList.contains('gt-hidden')));
+  if (res.length > 1) throw new Error(`isElemHidden doesn't work for multiple elements`);
+  return res[0];
+}
+
 export function onDomReady(cb) {
   if (document.readyState === 'loading') {
     document.addEventListener('DOMContentLoaded', cb);
@@ -170,3 +179,7 @@ export function autosize(textarea, {viewportMarginBottom = 0} = {}) {
     }
   };
 }
+
+export function onInputDebounce(fn) {
+  return debounce(300, fn);
+}