homelab/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-08-07 07:16:09 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

feat(actions): add workflow status badge modal (#38196)

Browse Source 
- Add a Create Status Badge button for selected Actions workflows.
- Show badge URL, Markdown, and HTML snippets backed by the existing
workflow badge route.

## Screenshots
<img width="553" height="470" alt="dyn-a5d565ab915b9ffb6c02ac68113494b0"
src="https://github.com/user-attachments/assets/43b4ceb9-bbd1-4024-b058-d85ec8325e88"
/>
<img width="349" height="156" alt="grafik"
src="https://github.com/user-attachments/assets/6eaec62d-ffb0-45c0-b63d-866a41a66005"
/>



Fixes https://github.com/go-gitea/gitea/issues/31462

---------

Signed-off-by: guanzi008 <245205080@qq.com>
Co-authored-by: bircni <bircni@icloud.com>
This commit is contained in:
guanzi008
2026-06-28 07:36:45 +08:00
committed by GitHub
parent d392fb1438
commit 9540292596
6 changed files with 210 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web_src/js/features/repo-actions.test.ts
+31
View File
@@ -0,0 +1,31 @@
import {updateWorkflowBadgeFields} from './repo-actions.ts';
test('updateWorkflowBadgeFields updates badge snippets for selected branch', () => {
document.body.innerHTML = `
<div
data-badge-url="https://gitea.example.com/user1/repo1/actions/workflows/build/test%20workflow.yml/badge.svg?branch=main"
data-workflow-url="https://gitea.example.com/user1/repo1/actions?workflow=build%2Ftest+workflow.yml"
data-markdown-alt-text="CI \\[prod\\]\\\\build &quot;fast&quot; &lt;ok&gt;"
data-html-alt-text="CI [prod]\\build &quot;fast&quot; &lt;ok&gt;"
>
<img data-workflow-badge-image src="">
<input id="workflow-badge-url" readonly>
<textarea id="workflow-badge-markdown" readonly></textarea>
<textarea id="workflow-badge-html" readonly></textarea>
</div>
`;
const form = document.querySelector<HTMLElement>('[data-badge-url]')!;
updateWorkflowBadgeFields(form, 'release/1.0 & hotfix');
const badgeURL = 'https://gitea.example.com/user1/repo1/actions/workflows/build/test%20workflow.yml/badge.svg?branch=release%2F1.0+%26+hotfix';
expect(form.querySelector<HTMLImageElement>('[data-workflow-badge-image]')!.src).toBe(badgeURL);
expect(form.querySelector<HTMLInputElement>('#workflow-badge-url')!.value).toBe(badgeURL);
expect(form.querySelector<HTMLTextAreaElement>('#workflow-badge-markdown')!.value).toBe(
`[![CI \\[prod\\]\\\\build "fast" <ok>](${badgeURL})](https://gitea.example.com/user1/repo1/actions?workflow=build%2Ftest+workflow.yml)`,
);
expect(form.querySelector<HTMLTextAreaElement>('#workflow-badge-html')!.value).toBe(
`<a href="https://gitea.example.com/user1/repo1/actions?workflow=build%2Ftest+workflow.yml"><img src="${badgeURL}" alt="CI [prod]\\build &quot;fast&quot; &lt;ok&gt;"></a>`,
);
});
web_src/js/features/repo-actions.ts
+29
View File
@@ -1,7 +1,36 @@
import {createApp} from 'vue';
import RepoActionView from '../components/RepoActionView.vue';
import {queryElems} from '../utils/dom.ts';
function escapeHTMLAttribute(value: string): string {
return value.replaceAll('&', '&amp;').replaceAll('"', '&quot;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
}
export function updateWorkflowBadgeFields(form: HTMLElement, branch: string): void {
const badgeURL = new URL(form.getAttribute('data-badge-url')!);
badgeURL.searchParams.set('branch', branch);
const badgeURLString = badgeURL.href;
const workflowURL = form.getAttribute('data-workflow-url')!;
const markdownAltText = form.getAttribute('data-markdown-alt-text')!;
const htmlAltText = form.getAttribute('data-html-alt-text')!;
form.querySelector<HTMLImageElement>('[data-workflow-badge-image]')!.src = badgeURLString;
form.querySelector<HTMLInputElement>('#workflow-badge-url')!.value = badgeURLString;
form.querySelector<HTMLTextAreaElement>('#workflow-badge-markdown')!.value = `[![${markdownAltText}](${badgeURLString})](${workflowURL})`;
form.querySelector<HTMLTextAreaElement>('#workflow-badge-html')!.value = `<a href="${escapeHTMLAttribute(workflowURL)}"><img src="${escapeHTMLAttribute(badgeURLString)}" alt="${escapeHTMLAttribute(htmlAltText)}"></a>`;
}
function initWorkflowBadgeBranchSelection(): void {
queryElems(document, '[data-workflow-badge-form]', (form) => {
const branchInput = form.querySelector<HTMLInputElement>('[data-workflow-badge-branch]')!;
branchInput.addEventListener('change', () => updateWorkflowBadgeFields(form, branchInput.value));
});
}
export function initRepositoryActionView() {
initWorkflowBadgeBranchSelection();
const el = document.querySelector('#repo-action-view');
if (!el) return;