feat(FN-3176): polish github source issue summary styling in task detail

Polished the GitHub source issue summary in the TaskDetailModal with UI refinements to its CSS and component markup, along with updated tests covering the new behavior.

Fusion-Task-Id: FN-3176
This commit is contained in:
Fusion
2026-05-02 02:25:54 -07:00
committed by gsxdsm
parent b4401d5911
commit 623772629f
3 changed files with 73 additions and 6 deletions

View File

@@ -237,7 +237,7 @@
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--card);
padding: var(--space-md);
padding: var(--space-sm) var(--space-md);
}
.detail-source-grid {
@@ -267,6 +267,10 @@
text-decoration: underline;
}
.detail-source-link--summary {
text-decoration: none;
}
.detail-source-link:hover {
color: var(--text);
}
@@ -295,12 +299,13 @@
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
gap: var(--space-xs);
}
.detail-source-summary {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-xs);
}
@@ -309,6 +314,23 @@
font-weight: 500;
}
.detail-source-provider-badge {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
padding: 0 var(--space-xs);
border-radius: var(--radius-pill);
background: color-mix(in srgb, var(--text-muted) 18%, transparent);
color: var(--text-muted);
font-size: calc(var(--space-sm) + var(--space-xs) * 0.75);
line-height: 1.6;
}
.detail-source-provider-badge svg {
width: 1em;
height: 1em;
}
.detail-source-number {
color: var(--text);
font-family: var(--font-mono);
@@ -344,8 +366,8 @@
}
.detail-source-section .detail-source-grid {
margin-top: var(--space-md);
padding-top: var(--space-md);
margin-top: var(--space-sm);
padding-top: var(--space-sm);
border-top: 1px solid var(--border);
}

View File

@@ -1864,9 +1864,15 @@ export function TaskDetailModal({
<div className="detail-source-header">
<div className="detail-source-summary">
<span className="detail-source-label">Source issue</span>
{task.sourceIssue.provider.toLowerCase() === "github" && (
<span className="detail-source-provider-badge" aria-label="GitHub source issue">
<GitBranch aria-hidden="true" />
<span>GitHub</span>
</span>
)}
{task.sourceIssue.url ? (
<a
className="detail-source-link detail-source-number"
className="detail-source-link detail-source-link--summary detail-source-number"
href={task.sourceIssue.url}
target="_blank"
rel="noopener noreferrer"

View File

@@ -4352,10 +4352,13 @@ describe("TaskDetailModal", () => {
);
expect(screen.getByText("Source issue")).toBeTruthy();
expect(screen.getByRole("link", { name: "(#2473)" })).toHaveAttribute(
expect(screen.getByLabelText("GitHub source issue")).toBeTruthy();
const summaryIssueLink = screen.getByRole("link", { name: "(#2473)" });
expect(summaryIssueLink).toHaveAttribute(
"href",
"https://github.com/runfusion/fusion/issues/2473",
);
expect(summaryIssueLink.classList.contains("detail-source-link--summary")).toBe(true);
expect(screen.queryByText("Provider")).toBeNull();
const toggle = screen.getByRole("button", { name: "Expand source issue details" });
@@ -4375,6 +4378,42 @@ describe("TaskDetailModal", () => {
expect(screen.getByTestId("chevron-right-icon").classList.contains("detail-source-chevron--expanded")).toBe(true);
});
it("applies compact GitHub source summary styling contracts", () => {
const css = loadAllAppCss();
expectBaseRule(css, ".detail-source-provider-badge", "border-radius: var(--radius-pill);");
expectBaseRule(css, ".detail-source-provider-badge", "background: color-mix(in srgb, var(--text-muted) 18%, transparent);");
expectBaseRule(css, ".detail-source-link--summary", "text-decoration: none;");
expectBaseRule(css, ".detail-source-section .detail-source-grid", "margin-top: var(--space-sm);");
expectBaseRule(css, ".detail-source-section .detail-source-grid", "padding-top: var(--space-sm);");
});
it("does not render GitHub badge for non-github providers", () => {
render(
<TaskDetailModal
task={makeTask({
sourceIssue: {
provider: "gitlab",
repository: "runfusion/fusion",
externalIssueId: "42",
issueNumber: 42,
url: "https://gitlab.com/runfusion/fusion/-/issues/42",
},
})}
onClose={noop}
onMoveTask={noopMove}
onDeleteTask={noopDelete}
onMergeTask={noopMerge}
onOpenDetail={noopOpenDetail}
addToast={noop}
/>,
);
expect(screen.queryByLabelText("GitHub source issue")).toBeNull();
expect(document.querySelector(".detail-source-provider-badge")).toBeNull();
expect(screen.getByRole("link", { name: "(#42)" })).toBeTruthy();
});
it("hides source issue read section when sourceIssue metadata is missing", () => {
render(
<TaskDetailModal