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>
This commit is contained in:
parent
54f399c4df
commit
23ae939ef3
|
@ -8,9 +8,9 @@
|
||||||
<input type="hidden" name="assignee" value="{{$.AssigneeID}}">
|
<input type="hidden" name="assignee" value="{{$.AssigneeID}}">
|
||||||
<input type="hidden" name="poster" value="{{$.PosterID}}">
|
<input type="hidden" name="poster" value="{{$.PosterID}}">
|
||||||
<input name="q" value="{{.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}...">
|
<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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
@ -78,8 +78,8 @@
|
||||||
<input type="hidden" name="sort" value="{{$.SortType}}">
|
<input type="hidden" name="sort" value="{{$.SortType}}">
|
||||||
<input type="hidden" name="state" value="{{$.State}}">
|
<input type="hidden" name="state" value="{{$.State}}">
|
||||||
<input name="q" value="{{$.Keyword}}" placeholder="{{.locale.Tr "explore.search"}}...">
|
<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>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<!-- Sort -->
|
<!-- Sort -->
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import {basename, extname, isObject, isDarkTheme} from '../utils.js';
|
import {basename, extname, isObject, isDarkTheme} from '../utils.js';
|
||||||
import {debounce} from 'throttle-debounce';
|
import {onInputDebounce} from '../utils/dom.js';
|
||||||
|
|
||||||
const languagesByFilename = {};
|
const languagesByFilename = {};
|
||||||
const languagesByExt = {};
|
const languagesByExt = {};
|
||||||
|
@ -164,7 +164,7 @@ export async function createCodeEditor(textarea, filenameInput) {
|
||||||
...getEditorConfigOptions(editorConfig),
|
...getEditorConfigOptions(editorConfig),
|
||||||
});
|
});
|
||||||
|
|
||||||
filenameInput.addEventListener('input', debounce(500, () => {
|
filenameInput.addEventListener('input', onInputDebounce(() => {
|
||||||
const filename = filenameInput.value;
|
const filename = filenameInput.value;
|
||||||
const previewable = previewableExts.has(extname(filename));
|
const previewable = previewableExts.has(extname(filename));
|
||||||
togglePreviewDisplay(previewable);
|
togglePreviewDisplay(previewable);
|
||||||
|
|
70
web_src/js/features/common-issue-list.js
Normal file
70
web_src/js/features/common-issue-list.js
Normal file
|
@ -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();
|
||||||
|
}
|
17
web_src/js/features/common-issue-list.test.js
Normal file
17
web_src/js/features/common-issue-list.test.js
Normal file
|
@ -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');
|
||||||
|
});
|
|
@ -4,7 +4,6 @@ import {showTemporaryTooltip, createTippy} from '../modules/tippy.js';
|
||||||
import {hideElem, showElem, toggleElem} from '../utils/dom.js';
|
import {hideElem, showElem, toggleElem} from '../utils/dom.js';
|
||||||
import {setFileFolding} from './file-fold.js';
|
import {setFileFolding} from './file-fold.js';
|
||||||
import {getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
|
import {getComboMarkdownEditor, initComboMarkdownEditor} from './comp/ComboMarkdownEditor.js';
|
||||||
import {parseIssueHref} from '../utils.js';
|
|
||||||
|
|
||||||
const {appSubUrl, csrfToken} = window.config;
|
const {appSubUrl, csrfToken} = window.config;
|
||||||
|
|
||||||
|
@ -638,34 +637,6 @@ export function initRepoIssueBranchSelect() {
|
||||||
$('#branch-select > .item').on('click', changeBranchSelect);
|
$('#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) {
|
export function initSingleCommentEditor($commentForm) {
|
||||||
// pages:
|
// pages:
|
||||||
// * normal new issue/pr page, no status-button
|
// * normal new issue/pr page, no status-button
|
||||||
|
|
|
@ -30,7 +30,7 @@ import {
|
||||||
initRepoIssueWipTitle,
|
initRepoIssueWipTitle,
|
||||||
initRepoPullRequestMergeInstruction,
|
initRepoPullRequestMergeInstruction,
|
||||||
initRepoPullRequestAllowMaintainerEdit,
|
initRepoPullRequestAllowMaintainerEdit,
|
||||||
initRepoPullRequestReview, initRepoIssueSidebarList, initRepoIssueGotoID
|
initRepoPullRequestReview, initRepoIssueSidebarList
|
||||||
} from './features/repo-issue.js';
|
} from './features/repo-issue.js';
|
||||||
import {
|
import {
|
||||||
initRepoEllipsisButton,
|
initRepoEllipsisButton,
|
||||||
|
@ -81,6 +81,7 @@ import {initGlobalTooltips} from './modules/tippy.js';
|
||||||
import {initGiteaFomantic} from './modules/fomantic.js';
|
import {initGiteaFomantic} from './modules/fomantic.js';
|
||||||
import {onDomReady} from './utils/dom.js';
|
import {onDomReady} from './utils/dom.js';
|
||||||
import {initRepoIssueList} from './features/repo-issue-list.js';
|
import {initRepoIssueList} from './features/repo-issue-list.js';
|
||||||
|
import {initCommonIssueListQuickGoto} from './features/common-issue-list.js';
|
||||||
|
|
||||||
// Init Gitea's Fomantic settings
|
// Init Gitea's Fomantic settings
|
||||||
initGiteaFomantic();
|
initGiteaFomantic();
|
||||||
|
@ -98,6 +99,7 @@ onDomReady(() => {
|
||||||
initGlobalLinkActions();
|
initGlobalLinkActions();
|
||||||
|
|
||||||
initCommonOrganization();
|
initCommonOrganization();
|
||||||
|
initCommonIssueListQuickGoto();
|
||||||
|
|
||||||
initCompSearchUserBox();
|
initCompSearchUserBox();
|
||||||
initCompWebHookEditor();
|
initCompWebHookEditor();
|
||||||
|
@ -175,5 +177,4 @@ onDomReady(() => {
|
||||||
initUserAuthWebAuthnRegister();
|
initUserAuthWebAuthnRegister();
|
||||||
initUserSettings();
|
initUserSettings();
|
||||||
initRepoDiffView();
|
initRepoDiffView();
|
||||||
initRepoIssueGotoID();
|
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
import {debounce} from 'throttle-debounce';
|
||||||
|
|
||||||
function elementsCall(el, func, ...args) {
|
function elementsCall(el, func, ...args) {
|
||||||
if (typeof el === 'string' || el instanceof String) {
|
if (typeof el === 'string' || el instanceof String) {
|
||||||
el = document.querySelectorAll(el);
|
el = document.querySelectorAll(el);
|
||||||
|
@ -42,6 +44,13 @@ export function toggleElem(el, force) {
|
||||||
elementsCall(el, toggleShown, 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) {
|
export function onDomReady(cb) {
|
||||||
if (document.readyState === 'loading') {
|
if (document.readyState === 'loading') {
|
||||||
document.addEventListener('DOMContentLoaded', cb);
|
document.addEventListener('DOMContentLoaded', cb);
|
||||||
|
@ -170,3 +179,7 @@ export function autosize(textarea, {viewportMarginBottom = 0} = {}) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function onInputDebounce(fn) {
|
||||||
|
return debounce(300, fn);
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue