Add goto issue id function (#24479)

for
#4109 (comment)

Supports format:
`#1234`
`Org/Repo#1234`

---------

Co-authored-by: techknowlogick <[email protected]>

Author: tyroneyeh

options/locale/locale_en-US.ini

@@ -308,6 +308,7 @@ repos = Repositories
 users = Users
 organizations = Organizations
 search = Search
+go_to = Go to
 code = Code
 search.type.tooltip = Search type
 search.fuzzy = Fuzzy

templates/repo/issue/search.tmpl

@@ -8,7 +8,8 @@
 		<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 class="ui small icon button" type="submit" aria-label="{{.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="search-button" class="ui small icon button" aria-label="{{.locale.Tr "explore.search"}}">
 			{{svg "octicon-search"}}
 		</button>
 	</div>

templates/user/dashboard/issues.tmpl

@@ -78,7 +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 class="ui small icon button" type="submit" aria-label="{{.locale.Tr "explore.search"}}">{{svg "octicon-search"}}</button>
+							<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="search-button" class="ui small icon button" aria-label="{{.locale.Tr "explore.search"}}">{{svg "octicon-search"}}</button>
 						</div>
 					</form>
 					<!-- Sort -->

web_src/js/features/repo-issue.js

@@ -4,6 +4,7 @@ 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;
 
@@ -636,3 +637,31 @@ 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'));
+    }
+  });
+}

web_src/js/index.js

@@ -30,7 +30,7 @@ import {
   initRepoIssueWipTitle,
   initRepoPullRequestMergeInstruction,
   initRepoPullRequestAllowMaintainerEdit,
-  initRepoPullRequestReview, initRepoIssueSidebarList,
+  initRepoPullRequestReview, initRepoIssueSidebarList, initRepoIssueGotoID
 } from './features/repo-issue.js';
 import {
   initRepoEllipsisButton,
@@ -175,4 +175,5 @@ onDomReady(() => {
   initUserAuthWebAuthnRegister();
   initUserSettings();
   initRepoDiffView();
+  initRepoIssueGotoID();
 });