Fix suggestions for issues (#32380)
This commit is contained in:
Родитель
f4d3aaeeb9
Коммит
a4a121c684
|
@ -11,19 +11,10 @@ import (
|
|||
"code.gitea.io/gitea/models/unit"
|
||||
issue_indexer "code.gitea.io/gitea/modules/indexer/issues"
|
||||
"code.gitea.io/gitea/modules/optional"
|
||||
"code.gitea.io/gitea/modules/structs"
|
||||
"code.gitea.io/gitea/services/context"
|
||||
)
|
||||
|
||||
type issueSuggestion struct {
|
||||
ID int64 `json:"id"`
|
||||
Title string `json:"title"`
|
||||
State string `json:"state"`
|
||||
PullRequest *struct {
|
||||
Merged bool `json:"merged"`
|
||||
Draft bool `json:"draft"`
|
||||
} `json:"pull_request,omitempty"`
|
||||
}
|
||||
|
||||
// IssueSuggestions returns a list of issue suggestions
|
||||
func IssueSuggestions(ctx *context.Context) {
|
||||
keyword := ctx.Req.FormValue("q")
|
||||
|
@ -61,13 +52,14 @@ func IssueSuggestions(ctx *context.Context) {
|
|||
return
|
||||
}
|
||||
|
||||
suggestions := make([]*issueSuggestion, 0, len(issues))
|
||||
suggestions := make([]*structs.Issue, 0, len(issues))
|
||||
|
||||
for _, issue := range issues {
|
||||
suggestion := &issueSuggestion{
|
||||
suggestion := &structs.Issue{
|
||||
ID: issue.ID,
|
||||
Index: issue.Index,
|
||||
Title: issue.Title,
|
||||
State: string(issue.State()),
|
||||
State: issue.State(),
|
||||
}
|
||||
|
||||
if issue.IsPull {
|
||||
|
@ -76,12 +68,9 @@ func IssueSuggestions(ctx *context.Context) {
|
|||
return
|
||||
}
|
||||
if issue.PullRequest != nil {
|
||||
suggestion.PullRequest = &struct {
|
||||
Merged bool `json:"merged"`
|
||||
Draft bool `json:"draft"`
|
||||
}{
|
||||
Merged: issue.PullRequest.HasMerged,
|
||||
Draft: issue.PullRequest.IsWorkInProgress(ctx),
|
||||
suggestion.PullRequest = &structs.PullRequestMeta{
|
||||
HasMerged: issue.PullRequest.HasMerged,
|
||||
IsWorkInProgress: issue.PullRequest.IsWorkInProgress(ctx),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -3,6 +3,7 @@ import {SvgIcon} from '../svg.ts';
|
|||
import {GET} from '../modules/fetch.ts';
|
||||
import {getIssueColor, getIssueIcon} from '../features/issue.ts';
|
||||
import {computed, onMounted, ref} from 'vue';
|
||||
import type {IssuePathInfo} from '../types.ts';
|
||||
|
||||
const {appSubUrl, i18n} = window.config;
|
||||
|
||||
|
@ -25,19 +26,19 @@ const root = ref<HTMLElement | null>(null);
|
|||
|
||||
onMounted(() => {
|
||||
root.value.addEventListener('ce-load-context-popup', (e: CustomEvent) => {
|
||||
const data = e.detail;
|
||||
const data: IssuePathInfo = e.detail;
|
||||
if (!loading.value && issue.value === null) {
|
||||
load(data);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
async function load(data) {
|
||||
async function load(issuePathInfo: IssuePathInfo) {
|
||||
loading.value = true;
|
||||
i18nErrorMessage.value = null;
|
||||
|
||||
try {
|
||||
const response = await GET(`${appSubUrl}/${data.owner}/${data.repo}/issues/${data.index}/info`); // backend: GetIssueInfo
|
||||
const response = await GET(`${appSubUrl}/${issuePathInfo.ownerName}/${issuePathInfo.repoName}/issues/${issuePathInfo.indexString}/info`); // backend: GetIssueInfo
|
||||
const respJson = await response.json();
|
||||
if (!response.ok) {
|
||||
i18nErrorMessage.value = respJson.message ?? i18n.network_error;
|
||||
|
|
|
@ -1,39 +1,29 @@
|
|||
import {matchEmoji, matchMention, matchIssue} from '../../utils/match.ts';
|
||||
import {emojiString} from '../emoji.ts';
|
||||
import {svg} from '../../svg.ts';
|
||||
import {parseIssueHref} from '../../utils.ts';
|
||||
import {parseIssueHref, parseIssueNewHref} from '../../utils.ts';
|
||||
import {createElementFromAttrs, createElementFromHTML} from '../../utils/dom.ts';
|
||||
import {getIssueColor, getIssueIcon} from '../issue.ts';
|
||||
import {debounce} from 'perfect-debounce';
|
||||
|
||||
const debouncedSuggestIssues = debounce((key: string, text: string) => new Promise<{matched:boolean; fragment?: HTMLElement}>(async (resolve) => {
|
||||
const {owner, repo, index} = parseIssueHref(window.location.href);
|
||||
const matches = await matchIssue(owner, repo, index, text);
|
||||
let issuePathInfo = parseIssueHref(window.location.href);
|
||||
if (!issuePathInfo.ownerName) issuePathInfo = parseIssueNewHref(window.location.href);
|
||||
if (!issuePathInfo.ownerName) return resolve({matched: false});
|
||||
|
||||
const matches = await matchIssue(issuePathInfo.ownerName, issuePathInfo.repoName, issuePathInfo.indexString, text);
|
||||
if (!matches.length) return resolve({matched: false});
|
||||
|
||||
const ul = document.createElement('ul');
|
||||
ul.classList.add('suggestions');
|
||||
const ul = createElementFromAttrs('ul', {class: 'suggestions'});
|
||||
for (const issue of matches) {
|
||||
const li = createElementFromAttrs('li', {
|
||||
role: 'option',
|
||||
'data-value': `${key}${issue.id}`,
|
||||
class: 'tw-flex tw-gap-2',
|
||||
});
|
||||
|
||||
const icon = svg(getIssueIcon(issue), 16, ['text', getIssueColor(issue)].join(' '));
|
||||
li.append(createElementFromHTML(icon));
|
||||
|
||||
const id = document.createElement('span');
|
||||
id.textContent = issue.id.toString();
|
||||
li.append(id);
|
||||
|
||||
const nameSpan = document.createElement('span');
|
||||
nameSpan.textContent = issue.title;
|
||||
li.append(nameSpan);
|
||||
|
||||
const li = createElementFromAttrs(
|
||||
'li', {role: 'option', class: 'tw-flex tw-gap-2', 'data-value': `${key}${issue.number}`},
|
||||
createElementFromHTML(svg(getIssueIcon(issue), 16, ['text', getIssueColor(issue)])),
|
||||
createElementFromAttrs('span', null, `#${issue.number}`),
|
||||
createElementFromAttrs('span', null, issue.title),
|
||||
);
|
||||
ul.append(li);
|
||||
}
|
||||
|
||||
resolve({matched: true, fragment: ul});
|
||||
}), 100);
|
||||
|
||||
|
|
|
@ -10,12 +10,10 @@ export function initContextPopups() {
|
|||
|
||||
export function attachRefIssueContextPopup(refIssues) {
|
||||
for (const refIssue of refIssues) {
|
||||
if (refIssue.classList.contains('ref-external-issue')) {
|
||||
return;
|
||||
}
|
||||
if (refIssue.classList.contains('ref-external-issue')) continue;
|
||||
|
||||
const {owner, repo, index} = parseIssueHref(refIssue.getAttribute('href'));
|
||||
if (!owner) return;
|
||||
const issuePathInfo = parseIssueHref(refIssue.getAttribute('href'));
|
||||
if (!issuePathInfo.ownerName) continue;
|
||||
|
||||
const el = document.createElement('div');
|
||||
el.classList.add('tw-p-3');
|
||||
|
@ -38,7 +36,7 @@ export function attachRefIssueContextPopup(refIssues) {
|
|||
role: 'dialog',
|
||||
interactiveBorder: 5,
|
||||
onShow: () => {
|
||||
el.firstChild.dispatchEvent(new CustomEvent('ce-load-context-popup', {detail: {owner, repo, index}}));
|
||||
el.firstChild.dispatchEvent(new CustomEvent('ce-load-context-popup', {detail: issuePathInfo}));
|
||||
},
|
||||
});
|
||||
}
|
||||
|
|
|
@ -153,7 +153,8 @@ export type SvgName = keyof typeof svgs;
|
|||
// most of the SVG icons in assets couldn't be used directly.
|
||||
|
||||
// retrieve an HTML string for given SVG icon name, size and additional classes
|
||||
export function svg(name: SvgName, size = 16, className = '') {
|
||||
export function svg(name: SvgName, size = 16, classNames: string|string[]): string {
|
||||
const className = Array.isArray(classNames) ? classNames.join(' ') : classNames;
|
||||
if (!(name in svgs)) throw new Error(`Unknown SVG icon: ${name}`);
|
||||
if (size === 16 && !className) return svgs[name];
|
||||
|
||||
|
|
|
@ -30,15 +30,16 @@ export type RequestOpts = {
|
|||
data?: RequestData,
|
||||
} & RequestInit;
|
||||
|
||||
export type IssueData = {
|
||||
owner: string,
|
||||
repo: string,
|
||||
type: string,
|
||||
index: string,
|
||||
export type IssuePathInfo = {
|
||||
ownerName: string,
|
||||
repoName: string,
|
||||
pathType: string,
|
||||
indexString?: string,
|
||||
}
|
||||
|
||||
export type Issue = {
|
||||
id: number;
|
||||
number: number;
|
||||
title: string;
|
||||
state: 'open' | 'closed';
|
||||
pull_request?: {
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import {
|
||||
basename, extname, isObject, stripTags, parseIssueHref,
|
||||
parseUrl, translateMonth, translateDay, blobToDataURI,
|
||||
toAbsoluteUrl, encodeURLEncodedBase64, decodeURLEncodedBase64, isImageFile, isVideoFile,
|
||||
toAbsoluteUrl, encodeURLEncodedBase64, decodeURLEncodedBase64, isImageFile, isVideoFile, parseIssueNewHref,
|
||||
} from './utils.ts';
|
||||
|
||||
test('basename', () => {
|
||||
|
@ -28,21 +28,27 @@ test('stripTags', () => {
|
|||
});
|
||||
|
||||
test('parseIssueHref', () => {
|
||||
expect(parseIssueHref('/owner/repo/issues/1')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
|
||||
expect(parseIssueHref('/owner/repo/pulls/1?query')).toEqual({owner: 'owner', repo: 'repo', type: 'pulls', index: '1'});
|
||||
expect(parseIssueHref('/owner/repo/issues/1#hash')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
|
||||
expect(parseIssueHref('/sub/owner/repo/issues/1')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
|
||||
expect(parseIssueHref('/sub/sub2/owner/repo/pulls/1')).toEqual({owner: 'owner', repo: 'repo', type: 'pulls', index: '1'});
|
||||
expect(parseIssueHref('/sub/sub2/owner/repo/issues/1?query')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
|
||||
expect(parseIssueHref('/sub/sub2/owner/repo/issues/1#hash')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
|
||||
expect(parseIssueHref('https://example.com/owner/repo/issues/1')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
|
||||
expect(parseIssueHref('https://example.com/owner/repo/pulls/1?query')).toEqual({owner: 'owner', repo: 'repo', type: 'pulls', index: '1'});
|
||||
expect(parseIssueHref('https://example.com/owner/repo/issues/1#hash')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
|
||||
expect(parseIssueHref('https://example.com/sub/owner/repo/issues/1')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
|
||||
expect(parseIssueHref('https://example.com/sub/sub2/owner/repo/pulls/1')).toEqual({owner: 'owner', repo: 'repo', type: 'pulls', index: '1'});
|
||||
expect(parseIssueHref('https://example.com/sub/sub2/owner/repo/issues/1?query')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
|
||||
expect(parseIssueHref('https://example.com/sub/sub2/owner/repo/issues/1#hash')).toEqual({owner: 'owner', repo: 'repo', type: 'issues', index: '1'});
|
||||
expect(parseIssueHref('')).toEqual({owner: undefined, repo: undefined, type: undefined, index: undefined});
|
||||
expect(parseIssueHref('/owner/repo/issues/1')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues', indexString: '1'});
|
||||
expect(parseIssueHref('/owner/repo/pulls/1?query')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'pulls', indexString: '1'});
|
||||
expect(parseIssueHref('/owner/repo/issues/1#hash')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues', indexString: '1'});
|
||||
expect(parseIssueHref('/sub/owner/repo/issues/1')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues', indexString: '1'});
|
||||
expect(parseIssueHref('/sub/sub2/owner/repo/pulls/1')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'pulls', indexString: '1'});
|
||||
expect(parseIssueHref('/sub/sub2/owner/repo/issues/1?query')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues', indexString: '1'});
|
||||
expect(parseIssueHref('/sub/sub2/owner/repo/issues/1#hash')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues', indexString: '1'});
|
||||
expect(parseIssueHref('https://example.com/owner/repo/issues/1')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues', indexString: '1'});
|
||||
expect(parseIssueHref('https://example.com/owner/repo/pulls/1?query')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'pulls', indexString: '1'});
|
||||
expect(parseIssueHref('https://example.com/owner/repo/issues/1#hash')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues', indexString: '1'});
|
||||
expect(parseIssueHref('https://example.com/sub/owner/repo/issues/1')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues', indexString: '1'});
|
||||
expect(parseIssueHref('https://example.com/sub/sub2/owner/repo/pulls/1')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'pulls', indexString: '1'});
|
||||
expect(parseIssueHref('https://example.com/sub/sub2/owner/repo/issues/1?query')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues', indexString: '1'});
|
||||
expect(parseIssueHref('https://example.com/sub/sub2/owner/repo/issues/1#hash')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues', indexString: '1'});
|
||||
expect(parseIssueHref('')).toEqual({ownerName: undefined, repoName: undefined, type: undefined, index: undefined});
|
||||
});
|
||||
|
||||
test('parseIssueNewHref', () => {
|
||||
expect(parseIssueNewHref('/owner/repo/issues/new')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues'});
|
||||
expect(parseIssueNewHref('/owner/repo/issues/new?query')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues'});
|
||||
expect(parseIssueNewHref('/sub/owner/repo/issues/new#hash')).toEqual({ownerName: 'owner', repoName: 'repo', pathType: 'issues'});
|
||||
});
|
||||
|
||||
test('parseUrl', () => {
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import {encode, decode} from 'uint8-to-base64';
|
||||
import type {IssueData} from './types.ts';
|
||||
import type {IssuePathInfo} from './types.ts';
|
||||
|
||||
// transform /path/to/file.ext to file.ext
|
||||
export function basename(path: string): string {
|
||||
|
@ -31,10 +31,16 @@ export function stripTags(text: string): string {
|
|||
return text.replace(/<[^>]*>?/g, '');
|
||||
}
|
||||
|
||||
export function parseIssueHref(href: string): IssueData {
|
||||
export function parseIssueHref(href: string): IssuePathInfo {
|
||||
const path = (href || '').replace(/[#?].*$/, '');
|
||||
const [_, owner, repo, type, index] = /([^/]+)\/([^/]+)\/(issues|pulls)\/([0-9]+)/.exec(path) || [];
|
||||
return {owner, repo, type, index};
|
||||
const [_, ownerName, repoName, pathType, indexString] = /([^/]+)\/([^/]+)\/(issues|pulls)\/([0-9]+)/.exec(path) || [];
|
||||
return {ownerName, repoName, pathType, indexString};
|
||||
}
|
||||
|
||||
export function parseIssueNewHref(href: string): IssuePathInfo {
|
||||
const path = (href || '').replace(/[#?].*$/, '');
|
||||
const [_, ownerName, repoName, pathType, indexString] = /([^/]+)\/([^/]+)\/(issues|pulls)\/new/.exec(path) || [];
|
||||
return {ownerName, repoName, pathType, indexString};
|
||||
}
|
||||
|
||||
// parse a URL, either relative '/path' or absolute 'https://localhost/path'
|
||||
|
|
|
@ -8,11 +8,11 @@ test('createElementFromAttrs', () => {
|
|||
const el = createElementFromAttrs('button', {
|
||||
id: 'the-id',
|
||||
class: 'cls-1 cls-2',
|
||||
'data-foo': 'the-data',
|
||||
disabled: true,
|
||||
checked: false,
|
||||
required: null,
|
||||
tabindex: 0,
|
||||
});
|
||||
expect(el.outerHTML).toEqual('<button id="the-id" class="cls-1 cls-2" data-foo="the-data" disabled="" tabindex="0"></button>');
|
||||
'data-foo': 'the-data',
|
||||
}, 'txt', createElementFromHTML('<span>inner</span>'));
|
||||
expect(el.outerHTML).toEqual('<button id="the-id" class="cls-1 cls-2" disabled="" tabindex="0" data-foo="the-data">txt<span>inner</span></button>');
|
||||
});
|
||||
|
|
|
@ -298,22 +298,24 @@ export function replaceTextareaSelection(textarea: HTMLTextAreaElement, text: st
|
|||
}
|
||||
|
||||
// Warning: Do not enter any unsanitized variables here
|
||||
export function createElementFromHTML(htmlString: string) {
|
||||
export function createElementFromHTML(htmlString: string): HTMLElement {
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = htmlString.trim();
|
||||
return div.firstChild as Element;
|
||||
return div.firstChild as HTMLElement;
|
||||
}
|
||||
|
||||
export function createElementFromAttrs(tagName: string, attrs: Record<string, any>) {
|
||||
export function createElementFromAttrs(tagName: string, attrs: Record<string, any>, ...children: (Node|string)[]): HTMLElement {
|
||||
const el = document.createElement(tagName);
|
||||
for (const [key, value] of Object.entries(attrs)) {
|
||||
for (const [key, value] of Object.entries(attrs || {})) {
|
||||
if (value === undefined || value === null) continue;
|
||||
if (typeof value === 'boolean') {
|
||||
el.toggleAttribute(key, value);
|
||||
} else {
|
||||
el.setAttribute(key, String(value));
|
||||
}
|
||||
// TODO: in the future we could make it also support "textContent" and "innerHTML" properties if needed
|
||||
}
|
||||
for (const child of children) {
|
||||
el.append(child instanceof Node ? child : document.createTextNode(child));
|
||||
}
|
||||
return el;
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import emojis from '../../../assets/emoji.json';
|
||||
import type {Issue} from '../features/issue.ts';
|
||||
import {GET} from '../modules/fetch.ts';
|
||||
import type {Issue} from '../features/issue.ts';
|
||||
|
||||
const maxMatches = 6;
|
||||
|
||||
|
@ -49,8 +49,8 @@ export async function matchIssue(owner: string, repo: string, issueIndexStr: str
|
|||
const res = await GET(`${window.config.appSubUrl}/${owner}/${repo}/issues/suggestions?q=${encodeURIComponent(query)}`);
|
||||
|
||||
const issues: Issue[] = await res.json();
|
||||
const issueIndex = parseInt(issueIndexStr);
|
||||
const issueNumber = parseInt(issueIndexStr);
|
||||
|
||||
// filter out issue with same id
|
||||
return issues.filter((i) => i.id !== issueIndex);
|
||||
return issues.filter((i) => i.number !== issueNumber);
|
||||
}
|
||||
|
|
Загрузка…
Ссылка в новой задаче