Shiloh/githaven
Shiloh/githaven
1
0
Fork 1
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source 
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:
wxiaoguang 2023-05-10 23:50:58 +08:00 committed by GitHub
parent 54f399c4df
commit 23ae939ef3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 111 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
templates/repo/issue/search.tmpl
View File

@ -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>
<button id="search-button" class="ui small icon button" aria-label="{{.locale.Tr "explore.search"}}">
{{svg "octicon-search"}}
</button>
{{if .PageIsIssueList}}
<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>
{{end}}
<button class="ui small icon button" aria-label="{{.locale.Tr "explore.search"}}">{{svg "octicon-search"}}</button>
</div>
</form>

4
templates/user/dashboard/issues.tmpl
View File

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

4
web_src/js/features/codeeditor.js
View File

@ -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);

70
web_src/js/features/common-issue-list.js Normal file
View 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
View 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');
});

29
web_src/js/features/repo-issue.js
View File

@ -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

5
web_src/js/index.js
View File

@ -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();
});

13
web_src/js/utils/dom.js
View File

@ -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);
}