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:
@@ -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);
|
||||
}
|
||||
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user