Skip to content

Commit 61b495e

Browse files
wxiaoguangwxiaoguang
authored
Fix issue label rendering in the issue popup (#30763)
1 parent a3d9f0d commit 61b495e

File tree

5 files changed

+36
-48
lines changed

5 files changed

+36
-48
lines changed

‎modules/templates/util_render.go‎

Lines changed: 17 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -121,29 +121,25 @@ func RenderIssueTitle(ctx context.Context, text string, metas map[string]string)
121121
// RenderLabel renders a label
122122
// locale is needed due to an import cycle with our context providing the `Tr` function
123123
func RenderLabel(ctx context.Context, locale translation.Locale, label *issues_model.Label) template.HTML {
124-
var (
125-
archivedCSSClass string
126-
textColor = util.ContrastColor(label.Color)
127-
labelScope = label.ExclusiveScope()
128-
)
129-
130-
description := emoji.ReplaceAliases(template.HTMLEscapeString(label.Description))
124+
var extraCSSClasses string
125+
textColor := util.ContrastColor(label.Color)
126+
labelScope := label.ExclusiveScope()
127+
descriptionText := emoji.ReplaceAliases(label.Description)
131128

132129
if label.IsArchived() {
133-
archivedCSSClass = "archived-label"
134-
description = fmt.Sprintf("(%s) %s", locale.TrString("archived"), description)
130+
extraCSSClasses = "archived-label"
131+
descriptionText = fmt.Sprintf("(%s) %s", locale.TrString("archived"), descriptionText)
135132
}
136133

137134
if labelScope == "" {
138135
// Regular label
139-
s := fmt.Sprintf("<div class='ui label %s' style='color: %s !important; background-color: %s !important;' data-tooltip-content title='%s'>%s</div>",
140-
archivedCSSClass, textColor, label.Color, description, RenderEmoji(ctx, label.Name))
141-
return template.HTML(s)
136+
return HTMLFormat(`<div class="ui label %s" style="color: %s !important; background-color: %s !important;" data-tooltip-content title="%s">%s</div>`,
137+
extraCSSClasses, textColor, label.Color, descriptionText, RenderEmoji(ctx, label.Name))
142138
}
143139

144140
// Scoped label
145-
scopeText := RenderEmoji(ctx, labelScope)
146-
itemText := RenderEmoji(ctx, label.Name[len(labelScope)+1:])
141+
scopeHTML := RenderEmoji(ctx, labelScope)
142+
itemHTML := RenderEmoji(ctx, label.Name[len(labelScope)+1:])
147143

148144
// Make scope and item background colors slightly darker and lighter respectively.
149145
// More contrast needed with higher luminance, empirically tweaked.
@@ -171,14 +167,13 @@ func RenderLabel(ctx context.Context, locale translation.Locale, label *issues_m
171167
itemColor := "#" + hex.EncodeToString(itemBytes)
172168
scopeColor := "#" + hex.EncodeToString(scopeBytes)
173169

174-
s := fmt.Sprintf("<span class='ui label %s scope-parent' data-tooltip-content title='%s'>"+
175-
"<div class='ui label scope-left' style='color: %s !important; background-color: %s !important'>%s</div>"+
176-
"<div class='ui label scope-right' style='color: %s !important; background-color: %s !important'>%s</div>"+
177-
"</span>",
178-
archivedCSSClass, description,
179-
textColor, scopeColor, scopeText,
180-
textColor, itemColor, itemText)
181-
return template.HTML(s)
170+
return HTMLFormat(`<span class="ui label %s scope-parent" data-tooltip-content title="%s">`+
171+
`<div class="ui label scope-left" style="color: %s !important; background-color: %s !important">%s</div>`+
172+
`<div class="ui label scope-right" style="color: %s !important; background-color: %s !important">%s</div>`+
173+
`</span>`,
174+
extraCSSClasses, descriptionText,
175+
textColor, scopeColor, scopeHTML,
176+
textColor, itemColor, itemHTML)
182177
}
183178

184179
// RenderEmoji renders html text with emoji post processors

‎routers/web/repo/issue.go‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2177,7 +2177,10 @@ func GetIssueInfo(ctx *context.Context) {
21772177
}
21782178
}
21792179

2180-
ctx.JSON(http.StatusOK, convert.ToIssue(ctx, ctx.Doer, issue))
2180+
ctx.JSON(http.StatusOK, map[string]any{
2181+
"convertedIssue": convert.ToIssue(ctx, ctx.Doer, issue),
2182+
"renderedLabels": templates.RenderLabels(ctx, ctx.Locale, issue.Labels, ctx.Repo.RepoLink, issue),
2183+
})
21812184
}
21822185

21832186
// UpdateIssueTitle change issue's title

‎tests/integration/issue_test.go‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ package integration
66
import (
77
"context"
88
"fmt"
9+
"html/template"
910
"net/http"
1011
"net/url"
1112
"path"
@@ -573,10 +574,14 @@ func TestGetIssueInfo(t *testing.T) {
573574
urlStr := fmt.Sprintf("/%s/%s/issues/%d/info", owner.Name, repo.Name, issue.Index)
574575
req := NewRequest(t, "GET", urlStr)
575576
resp := session.MakeRequest(t, req, http.StatusOK)
576-
var apiIssue api.Issue
577-
DecodeJSON(t, resp, &apiIssue)
577+
var respStruct struct {
578+
ConvertedIssue api.Issue
579+
RenderedLabels template.HTML
580+
}
581+
DecodeJSON(t, resp, &respStruct)
578582

579-
assert.EqualValues(t, issue.ID, apiIssue.ID)
583+
assert.EqualValues(t, issue.ID, respStruct.ConvertedIssue.ID)
584+
assert.Contains(t, string(respStruct.RenderedLabels), `"labels-list"`)
580585
}
581586

582587
func TestUpdateIssueDeadline(t *testing.T) {

‎web_src/js/components/ContextPopup.vue‎

Lines changed: 6 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script>
22
import {SvgIcon} from '../svg.js';
3-
import {contrastColor} from '../utils/color.js';
43
import {GET} from '../modules/fetch.js';
54
65
const {appSubUrl, i18n} = window.config;
@@ -10,6 +9,7 @@ export default {
109
data: () => ({
1110
loading: false,
1211
issue: null,
12+
renderedLabels: '',
1313
i18nErrorOccurred: i18n.error_occurred,
1414
i18nErrorMessage: null,
1515
}),
@@ -56,14 +56,6 @@ export default {
5656
}
5757
return 'red'; // Closed Issue
5858
},
59-
60-
labels() {
61-
return this.issue.labels.map((label) => ({
62-
name: label.name,
63-
color: `#${label.color}`,
64-
textColor: contrastColor(`#${label.color}`),
65-
}));
66-
},
6759
},
6860
mounted() {
6961
this.$refs.root.addEventListener('ce-load-context-popup', (e) => {
@@ -79,13 +71,14 @@ export default {
7971
this.i18nErrorMessage = null;
8072
8173
try {
82-
const response = await GET(`${appSubUrl}/${data.owner}/${data.repo}/issues/${data.index}/info`);
74+
const response = await GET(`${appSubUrl}/${data.owner}/${data.repo}/issues/${data.index}/info`); // backend: GetIssueInfo
8375
const respJson = await response.json();
8476
if (!response.ok) {
8577
this.i18nErrorMessage = respJson.message ?? i18n.network_error;
8678
return;
8779
}
88-
this.issue = respJson;
80+
this.issue = respJson.convertedIssue;
81+
this.renderedLabels = respJson.renderedLabels;
8982
} catch {
9083
this.i18nErrorMessage = i18n.network_error;
9184
} finally {
@@ -102,16 +95,8 @@ export default {
10295
<p><small>{{ issue.repository.full_name }} on {{ createdAt }}</small></p>
10396
<p><svg-icon :name="icon" :class="['text', color]"/> <strong>{{ issue.title }}</strong> #{{ issue.number }}</p>
10497
<p>{{ body }}</p>
105-
<div class="labels-list">
106-
<div
107-
v-for="label in labels"
108-
:key="label.name"
109-
class="ui label"
110-
:style="{ color: label.textColor, backgroundColor: label.color }"
111-
>
112-
{{ label.name }}
113-
</div>
114-
</div>
98+
<!-- eslint-disable-next-line vue/no-v-html -->
99+
<div v-html="renderedLabels"/>
115100
</div>
116101
<div v-if="!loading && issue === null">
117102
<p><small>{{ i18nErrorOccurred }}</small></p>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export function initCommonIssueListQuickGoto() {
5353
// try to check whether the parsed goto link is valid
5454
let targetUrl = parseIssueListQuickGotoLink(repoLink, searchText);
5555
if (targetUrl) {
56-
const res = await GET(`${targetUrl}/info`);
56+
const res = await GET(`${targetUrl}/info`); // backend: GetIssueInfo, it only checks whether the issue exists by status code
5757
if (res.status !== 200) targetUrl = '';
5858
}
5959
// if the input value has changed, then ignore the result

0 commit comments

Comments
 (0)