feat(KB-022): add GitHub issue status badges to task cards
- Extend core types with GitHub issue tracking fields (issueNumber, issueStatus, lastIssueSync) - Add TaskStore.getTaskGitHubIssueInfo() to fetch issue details from GitHub API - Create server-side API endpoint for issue status lookup with caching - Build GitHubBadge component with color-coded status indicators (open/closed) - Integrate badges into TaskCard with hover state linking to GitHub issues - Add CSS styles for badge positioning and visual polish - Include comprehensive tests for GitHubBadge and TaskCard badge rendering
This commit is contained in:
gsxdsm
@@ -271,6 +271,23 @@ export function refreshPrStatus(id: string): Promise<PrInfo> {
|
||||
});
|
||||
}
|
||||
|
||||
// --- Issue Management API ---
|
||||
|
||||
/** Re-export IssueInfo type for convenience */
|
||||
export type { IssueInfo } from "@kb/core";
|
||||
|
||||
/** Fetch cached issue status for a task */
|
||||
export function fetchIssueStatus(id: string): Promise<{ issueInfo: import("@kb/core").IssueInfo; stale: boolean }> {
|
||||
return api<{ issueInfo: import("@kb/core").IssueInfo; stale: boolean }>(`/tasks/${id}/issue/status`);
|
||||
}
|
||||
|
||||
/** Force refresh issue status from GitHub */
|
||||
export function refreshIssueStatus(id: string): Promise<import("@kb/core").IssueInfo> {
|
||||
return api<import("@kb/core").IssueInfo>(`/tasks/${id}/issue/refresh`, {
|
||||
method: "POST",
|
||||
});
|
||||
}
|
||||
|
||||
// --- Git Management API ---
|
||||
|
||||
/** Current git status */
|
||||
|
||||
90
packages/dashboard/app/components/GitHubBadge.tsx
Normal file
90
packages/dashboard/app/components/GitHubBadge.tsx
Normal file
@@ -0,0 +1,90 @@
|
||||
import { GitPullRequest, CircleDot } from "lucide-react";
|
||||
import type { IssueInfo, PrInfo } from "@kb/core";
|
||||
import type { ToastType } from "../hooks/useToast";
|
||||
|
||||
interface GitHubBadgeProps {
|
||||
prInfo?: PrInfo;
|
||||
issueInfo?: IssueInfo;
|
||||
onIssueRefresh?: () => void;
|
||||
addToast?: (message: string, type?: ToastType) => void;
|
||||
}
|
||||
|
||||
// Color scheme for PR and Issue badges
|
||||
const COLORS = {
|
||||
pr: {
|
||||
open: { bg: "rgba(63,185,80,0.2)", text: "#3fb950" },
|
||||
closed: { bg: "rgba(218,54,51,0.2)", text: "#da3633" },
|
||||
merged: { bg: "rgba(188,140,255,0.2)", text: "#bc8cff" },
|
||||
},
|
||||
issue: {
|
||||
open: { bg: "rgba(63,185,80,0.2)", text: "#3fb950" },
|
||||
completed: { bg: "rgba(188,140,255,0.2)", text: "#bc8cff" },
|
||||
not_planned: { bg: "rgba(248,81,73,0.2)", text: "#f85149" },
|
||||
default: { bg: "rgba(139,148,158,0.2)", text: "#8b949e" },
|
||||
},
|
||||
};
|
||||
|
||||
function getPrColors(status: string) {
|
||||
return COLORS.pr[status as keyof typeof COLORS.pr] ?? COLORS.pr.open;
|
||||
}
|
||||
|
||||
function getIssueColors(state: string, stateReason?: string) {
|
||||
if (state === "open") return COLORS.issue.open;
|
||||
if (stateReason === "completed") return COLORS.issue.completed;
|
||||
if (stateReason === "not_planned") return COLORS.issue.not_planned;
|
||||
return COLORS.issue.default;
|
||||
}
|
||||
|
||||
function getIssueModifierClass(state: string, stateReason?: string): string {
|
||||
if (state === "open") return "card-github-badge--open";
|
||||
if (stateReason === "completed") return "card-github-badge--completed";
|
||||
if (stateReason === "not_planned") return "card-github-badge--closed";
|
||||
return "";
|
||||
}
|
||||
|
||||
export function GitHubBadge({ prInfo, issueInfo, onIssueRefresh }: GitHubBadgeProps) {
|
||||
const handlePrClick = () => {
|
||||
if (prInfo?.url) {
|
||||
window.open(prInfo.url, "_blank", "noopener,noreferrer");
|
||||
}
|
||||
};
|
||||
|
||||
const handleIssueClick = () => {
|
||||
if (issueInfo?.url) {
|
||||
window.open(issueInfo.url, "_blank", "noopener,noreferrer");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{prInfo && (
|
||||
<span
|
||||
className={`card-github-badge card-github-badge--${prInfo.status}`}
|
||||
title={`PR #${prInfo.number}: ${prInfo.title}`}
|
||||
onClick={handlePrClick}
|
||||
style={{
|
||||
background: getPrColors(prInfo.status).bg,
|
||||
color: getPrColors(prInfo.status).text,
|
||||
}}
|
||||
>
|
||||
<GitPullRequest size={12} />
|
||||
<span>#{prInfo.number}</span>
|
||||
</span>
|
||||
)}
|
||||
{issueInfo && (
|
||||
<span
|
||||
className={`card-github-badge ${getIssueModifierClass(issueInfo.state, issueInfo.stateReason)}`}
|
||||
title={`Issue #${issueInfo.number}: ${issueInfo.title}`}
|
||||
onClick={handleIssueClick}
|
||||
style={{
|
||||
background: getIssueColors(issueInfo.state, issueInfo.stateReason).bg,
|
||||
color: getIssueColors(issueInfo.state, issueInfo.stateReason).text,
|
||||
}}
|
||||
>
|
||||
<CircleDot size={12} />
|
||||
<span>#{issueInfo.number}</span>
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,8 @@
|
||||
import { useCallback, useState, useRef, useEffect } from "react";
|
||||
import { Link, Clock, Layers, GitPullRequest, Pencil, ChevronDown } from "lucide-react";
|
||||
import { Link, Clock, Layers, Pencil, ChevronDown } from "lucide-react";
|
||||
import type { Task, TaskDetail, Column } from "@kb/core";
|
||||
import { fetchTaskDetail, uploadAttachment } from "../api";
|
||||
import { GitHubBadge } from "./GitHubBadge";
|
||||
import type { ToastType } from "../hooks/useToast";
|
||||
|
||||
const COLUMN_COLOR_MAP: Record<Column, string> = {
|
||||
@@ -331,40 +332,14 @@ export function TaskCard({
|
||||
{task.status}
|
||||
</span>
|
||||
)}
|
||||
{/* PR Status Indicator for in-review tasks */}
|
||||
{task.column === "in-review" && task.prInfo && (
|
||||
<span
|
||||
className="card-pr-badge"
|
||||
title={`PR #${task.prInfo.number}: ${task.prInfo.status}`}
|
||||
style={{
|
||||
background: task.prInfo.status === "merged"
|
||||
? "rgba(188,140,255,0.2)"
|
||||
: task.prInfo.status === "closed"
|
||||
? "rgba(139,148,158,0.2)"
|
||||
: "rgba(63,185,80,0.2)",
|
||||
color: task.prInfo.status === "merged"
|
||||
? "#bc8cff"
|
||||
: task.prInfo.status === "closed"
|
||||
? "#8b949e"
|
||||
: "#3fb950",
|
||||
fontSize: "11px",
|
||||
padding: "2px 6px",
|
||||
borderRadius: "10px",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "4px",
|
||||
}}
|
||||
>
|
||||
<GitPullRequest size={12} />
|
||||
#{task.prInfo.number}
|
||||
</span>
|
||||
)}
|
||||
{/* Size Indicator */}
|
||||
{task.size && (
|
||||
<span className={`card-size-badge size-${task.size.toLowerCase()}`}>
|
||||
{task.size}
|
||||
</span>
|
||||
)}
|
||||
{/* GitHub Badges - PR and Issue */}
|
||||
<GitHubBadge prInfo={task.prInfo} issueInfo={task.issueInfo} />
|
||||
{/* Edit button - visible on hover for editable cards */}
|
||||
{canEdit && (
|
||||
<button
|
||||
|
||||
239
packages/dashboard/app/components/__tests__/GitHubBadge.test.tsx
Normal file
239
packages/dashboard/app/components/__tests__/GitHubBadge.test.tsx
Normal file
@@ -0,0 +1,239 @@
|
||||
import { describe, it, expect, vi } from "vitest";
|
||||
import { render, screen, fireEvent } from "@testing-library/react";
|
||||
import type { IssueInfo, PrInfo } from "@kb/core";
|
||||
import { GitHubBadge } from "../GitHubBadge";
|
||||
|
||||
describe("GitHubBadge", () => {
|
||||
const mockPrInfo: PrInfo = {
|
||||
url: "https://github.com/owner/repo/pull/42",
|
||||
number: 42,
|
||||
status: "open",
|
||||
title: "Fix critical bug",
|
||||
headBranch: "feature/bugfix",
|
||||
baseBranch: "main",
|
||||
commentCount: 5,
|
||||
lastCheckedAt: "2026-01-01T00:00:00Z",
|
||||
};
|
||||
|
||||
const mockIssueInfo: IssueInfo = {
|
||||
url: "https://github.com/owner/repo/issues/123",
|
||||
number: 123,
|
||||
state: "open",
|
||||
title: "Feature request: dark mode",
|
||||
lastCheckedAt: "2026-01-01T00:00:00Z",
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
describe("PR badge rendering", () => {
|
||||
it("renders PR badge with correct number and icon when prInfo is provided", () => {
|
||||
render(<GitHubBadge prInfo={mockPrInfo} />);
|
||||
|
||||
expect(screen.getByText("#42")).toBeDefined();
|
||||
// Check for the PR icon (GitPullRequest)
|
||||
const badge = screen.getByTitle("PR #42: Fix critical bug");
|
||||
expect(badge).toBeDefined();
|
||||
});
|
||||
|
||||
it("does not render PR badge when prInfo is undefined", () => {
|
||||
render(<GitHubBadge />);
|
||||
|
||||
expect(screen.queryByText(/#/)).toBeNull();
|
||||
});
|
||||
|
||||
it("applies correct color classes for open PR", () => {
|
||||
const { container } = render(<GitHubBadge prInfo={mockPrInfo} />);
|
||||
|
||||
const badge = container.querySelector(".card-github-badge--open");
|
||||
expect(badge).toBeDefined();
|
||||
});
|
||||
|
||||
it("applies correct color classes for closed PR", () => {
|
||||
const closedPr: PrInfo = { ...mockPrInfo, status: "closed" };
|
||||
const { container } = render(<GitHubBadge prInfo={closedPr} />);
|
||||
|
||||
const badge = container.querySelector(".card-github-badge--closed");
|
||||
expect(badge).toBeDefined();
|
||||
});
|
||||
|
||||
it("applies correct color classes for merged PR", () => {
|
||||
const mergedPr: PrInfo = { ...mockPrInfo, status: "merged" };
|
||||
const { container } = render(<GitHubBadge prInfo={mergedPr} />);
|
||||
|
||||
const badge = container.querySelector(".card-github-badge--merged");
|
||||
expect(badge).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe("Issue badge rendering", () => {
|
||||
it("renders Issue badge with correct number and icon when issueInfo is provided", () => {
|
||||
render(<GitHubBadge issueInfo={mockIssueInfo} />);
|
||||
|
||||
expect(screen.getByText("#123")).toBeDefined();
|
||||
const badge = screen.getByTitle("Issue #123: Feature request: dark mode");
|
||||
expect(badge).toBeDefined();
|
||||
});
|
||||
|
||||
it("does not render Issue badge when issueInfo is undefined", () => {
|
||||
render(<GitHubBadge />);
|
||||
|
||||
expect(screen.queryByText(/#/)).toBeNull();
|
||||
});
|
||||
|
||||
it("applies correct color classes for open Issue", () => {
|
||||
const { container } = render(<GitHubBadge issueInfo={mockIssueInfo} />);
|
||||
|
||||
const badge = container.querySelector(".card-github-badge--open");
|
||||
expect(badge).toBeDefined();
|
||||
});
|
||||
|
||||
it("applies correct color classes for completed Issue", () => {
|
||||
const completedIssue: IssueInfo = { ...mockIssueInfo, state: "closed", stateReason: "completed" };
|
||||
const { container } = render(<GitHubBadge issueInfo={completedIssue} />);
|
||||
|
||||
const badge = container.querySelector(".card-github-badge--completed");
|
||||
expect(badge).toBeDefined();
|
||||
});
|
||||
|
||||
it("applies correct color classes for not_planned Issue", () => {
|
||||
const notPlannedIssue: IssueInfo = { ...mockIssueInfo, state: "closed", stateReason: "not_planned" };
|
||||
const { container } = render(<GitHubBadge issueInfo={notPlannedIssue} />);
|
||||
|
||||
const badge = container.querySelector(".card-github-badge--closed");
|
||||
expect(badge).toBeDefined();
|
||||
});
|
||||
|
||||
it("handles Issue with no state reason gracefully", () => {
|
||||
const noReasonIssue: IssueInfo = { ...mockIssueInfo, state: "closed", stateReason: undefined };
|
||||
const { container } = render(<GitHubBadge issueInfo={noReasonIssue} />);
|
||||
|
||||
// Should not have any modifier class
|
||||
const badge = container.querySelector(".card-github-badge");
|
||||
expect(badge).toBeDefined();
|
||||
expect(badge?.classList.contains("card-github-badge--open")).toBe(false);
|
||||
expect(badge?.classList.contains("card-github-badge--completed")).toBe(false);
|
||||
expect(badge?.classList.contains("card-github-badge--closed")).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Both badges can appear simultaneously", () => {
|
||||
it("renders both PR and Issue badges when both props are provided", () => {
|
||||
render(<GitHubBadge prInfo={mockPrInfo} issueInfo={mockIssueInfo} />);
|
||||
|
||||
expect(screen.getByText("#42")).toBeDefined();
|
||||
expect(screen.getByText("#123")).toBeDefined();
|
||||
});
|
||||
|
||||
it("renders PR badge with open status and Issue badge with completed status", () => {
|
||||
const completedIssue: IssueInfo = { ...mockIssueInfo, state: "closed", stateReason: "completed" };
|
||||
const { container } = render(<GitHubBadge prInfo={mockPrInfo} issueInfo={completedIssue} />);
|
||||
|
||||
const badges = container.querySelectorAll(".card-github-badge");
|
||||
expect(badges.length).toBe(2);
|
||||
|
||||
// First badge should be PR (open)
|
||||
expect(badges[0].classList.contains("card-github-badge--open")).toBe(true);
|
||||
|
||||
// Second badge should be Issue (completed)
|
||||
expect(badges[1].classList.contains("card-github-badge--completed")).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe("Click behavior", () => {
|
||||
it("opens PR URL in new tab when PR badge is clicked", () => {
|
||||
const mockOpen = vi.fn();
|
||||
vi.stubGlobal("open", mockOpen);
|
||||
|
||||
render(<GitHubBadge prInfo={mockPrInfo} />);
|
||||
|
||||
const badge = screen.getByTitle("PR #42: Fix critical bug");
|
||||
fireEvent.click(badge);
|
||||
|
||||
expect(mockOpen).toHaveBeenCalledWith(
|
||||
"https://github.com/owner/repo/pull/42",
|
||||
"_blank",
|
||||
"noopener,noreferrer"
|
||||
);
|
||||
|
||||
vi.unstubAllGlobals();
|
||||
});
|
||||
|
||||
it("opens Issue URL in new tab when Issue badge is clicked", () => {
|
||||
const mockOpen = vi.fn();
|
||||
vi.stubGlobal("open", mockOpen);
|
||||
|
||||
render(<GitHubBadge issueInfo={mockIssueInfo} />);
|
||||
|
||||
const badge = screen.getByTitle("Issue #123: Feature request: dark mode");
|
||||
fireEvent.click(badge);
|
||||
|
||||
expect(mockOpen).toHaveBeenCalledWith(
|
||||
"https://github.com/owner/repo/issues/123",
|
||||
"_blank",
|
||||
"noopener,noreferrer"
|
||||
);
|
||||
|
||||
vi.unstubAllGlobals();
|
||||
});
|
||||
|
||||
it("does not open window when PR badge is clicked but URL is missing", () => {
|
||||
const mockOpen = vi.fn();
|
||||
vi.stubGlobal("open", mockOpen);
|
||||
|
||||
const prWithoutUrl: PrInfo = { ...mockPrInfo, url: "" };
|
||||
render(<GitHubBadge prInfo={prWithoutUrl} />);
|
||||
|
||||
const badge = screen.getByTitle("PR #42: Fix critical bug");
|
||||
fireEvent.click(badge);
|
||||
|
||||
expect(mockOpen).not.toHaveBeenCalled();
|
||||
|
||||
vi.unstubAllGlobals();
|
||||
});
|
||||
});
|
||||
|
||||
describe("Tooltip text", () => {
|
||||
it("shows correct tooltip for PR badge", () => {
|
||||
render(<GitHubBadge prInfo={mockPrInfo} />);
|
||||
|
||||
const badge = screen.getByTitle("PR #42: Fix critical bug");
|
||||
expect(badge).toBeDefined();
|
||||
});
|
||||
|
||||
it("shows correct tooltip for Issue badge", () => {
|
||||
render(<GitHubBadge issueInfo={mockIssueInfo} />);
|
||||
|
||||
const badge = screen.getByTitle("Issue #123: Feature request: dark mode");
|
||||
expect(badge).toBeDefined();
|
||||
});
|
||||
|
||||
it("handles long titles in tooltips", () => {
|
||||
const longTitlePr: PrInfo = {
|
||||
...mockPrInfo,
|
||||
title: "This is a very long PR title that exceeds normal length limits",
|
||||
};
|
||||
render(<GitHubBadge prInfo={longTitlePr} />);
|
||||
|
||||
const badge = screen.getByTitle(`PR #42: ${longTitlePr.title}`);
|
||||
expect(badge).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
describe("No badges when no data", () => {
|
||||
it("renders nothing when both prInfo and issueInfo are undefined", () => {
|
||||
const { container } = render(<GitHubBadge />);
|
||||
|
||||
const badges = container.querySelectorAll(".card-github-badge");
|
||||
expect(badges.length).toBe(0);
|
||||
});
|
||||
|
||||
it("renders nothing when both prInfo and issueInfo are null", () => {
|
||||
const { container } = render(<GitHubBadge prInfo={undefined} issueInfo={undefined} />);
|
||||
|
||||
const badges = container.querySelectorAll(".card-github-badge");
|
||||
expect(badges.length).toBe(0);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1238,3 +1238,214 @@ describe("TaskCard steps toggle", () => {
|
||||
expect(chevron?.classList.contains("expanded")).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* Tests for GitHub badges rendering in TaskCard.
|
||||
*/
|
||||
describe("TaskCard GitHub badges", () => {
|
||||
const noopToast = vi.fn();
|
||||
|
||||
beforeEach(() => {
|
||||
vi.clearAllMocks();
|
||||
});
|
||||
|
||||
it("renders GitHubBadge when task has prInfo", () => {
|
||||
const task = makeTask({
|
||||
prInfo: {
|
||||
url: "https://github.com/owner/repo/pull/42",
|
||||
number: 42,
|
||||
status: "open",
|
||||
title: "Fix bug",
|
||||
headBranch: "feature/bugfix",
|
||||
baseBranch: "main",
|
||||
commentCount: 3,
|
||||
},
|
||||
});
|
||||
|
||||
render(
|
||||
<TaskCard
|
||||
task={task}
|
||||
onOpenDetail={vi.fn()}
|
||||
addToast={noopToast}
|
||||
/>
|
||||
);
|
||||
|
||||
// Should show the PR badge with the PR number
|
||||
expect(screen.getByText("#42")).toBeDefined();
|
||||
expect(screen.getByTitle("PR #42: Fix bug")).toBeDefined();
|
||||
});
|
||||
|
||||
it("renders GitHubBadge when task has issueInfo", () => {
|
||||
const task = makeTask({
|
||||
issueInfo: {
|
||||
url: "https://github.com/owner/repo/issues/123",
|
||||
number: 123,
|
||||
state: "open",
|
||||
title: "Feature request",
|
||||
},
|
||||
});
|
||||
|
||||
render(
|
||||
<TaskCard
|
||||
task={task}
|
||||
onOpenDetail={vi.fn()}
|
||||
addToast={noopToast}
|
||||
/>
|
||||
);
|
||||
|
||||
// Should show the Issue badge with the issue number
|
||||
expect(screen.getByText("#123")).toBeDefined();
|
||||
expect(screen.getByTitle("Issue #123: Feature request")).toBeDefined();
|
||||
});
|
||||
|
||||
it("renders both PR and Issue badges when task has both", () => {
|
||||
const task = makeTask({
|
||||
prInfo: {
|
||||
url: "https://github.com/owner/repo/pull/42",
|
||||
number: 42,
|
||||
status: "open",
|
||||
title: "Fix bug",
|
||||
headBranch: "feature/bugfix",
|
||||
baseBranch: "main",
|
||||
commentCount: 3,
|
||||
},
|
||||
issueInfo: {
|
||||
url: "https://github.com/owner/repo/issues/123",
|
||||
number: 123,
|
||||
state: "closed",
|
||||
stateReason: "completed",
|
||||
title: "Related issue",
|
||||
},
|
||||
});
|
||||
|
||||
render(
|
||||
<TaskCard
|
||||
task={task}
|
||||
onOpenDetail={vi.fn()}
|
||||
addToast={noopToast}
|
||||
/>
|
||||
);
|
||||
|
||||
// Both badges should appear
|
||||
expect(screen.getByText("#42")).toBeDefined();
|
||||
expect(screen.getByText("#123")).toBeDefined();
|
||||
expect(screen.getByTitle("PR #42: Fix bug")).toBeDefined();
|
||||
expect(screen.getByTitle("Issue #123: Related issue")).toBeDefined();
|
||||
});
|
||||
|
||||
it("does not render GitHubBadge when task has neither prInfo nor issueInfo", () => {
|
||||
const task = makeTask();
|
||||
|
||||
render(
|
||||
<TaskCard
|
||||
task={task}
|
||||
onOpenDetail={vi.fn()}
|
||||
addToast={noopToast}
|
||||
/>
|
||||
);
|
||||
|
||||
// No badge numbers should appear
|
||||
const badgeNumbers = screen.queryAllByText(/^#\d+$/);
|
||||
expect(badgeNumbers.length).toBe(0);
|
||||
});
|
||||
|
||||
it("renders PR badge in all columns (not just in-review)", () => {
|
||||
const columns: Column[] = ["triage", "todo", "in-progress", "in-review", "done"];
|
||||
|
||||
for (const column of columns) {
|
||||
const task = makeTask({
|
||||
column,
|
||||
prInfo: {
|
||||
url: "https://github.com/owner/repo/pull/42",
|
||||
number: 42,
|
||||
status: "open",
|
||||
title: "Fix bug",
|
||||
headBranch: "feature/bugfix",
|
||||
baseBranch: "main",
|
||||
commentCount: 3,
|
||||
},
|
||||
});
|
||||
|
||||
const { unmount } = render(
|
||||
<TaskCard
|
||||
task={task}
|
||||
onOpenDetail={vi.fn()}
|
||||
addToast={noopToast}
|
||||
/>
|
||||
);
|
||||
|
||||
expect(screen.getByText("#42")).toBeDefined();
|
||||
unmount();
|
||||
}
|
||||
});
|
||||
|
||||
it("renders Issue badge with correct color class for open state", () => {
|
||||
const task = makeTask({
|
||||
issueInfo: {
|
||||
url: "https://github.com/owner/repo/issues/123",
|
||||
number: 123,
|
||||
state: "open",
|
||||
title: "Open issue",
|
||||
},
|
||||
});
|
||||
|
||||
const { container } = render(
|
||||
<TaskCard
|
||||
task={task}
|
||||
onOpenDetail={vi.fn()}
|
||||
addToast={noopToast}
|
||||
/>
|
||||
);
|
||||
|
||||
const badge = container.querySelector(".card-github-badge--open");
|
||||
expect(badge).toBeDefined();
|
||||
});
|
||||
|
||||
it("renders Issue badge with correct color class for completed state", () => {
|
||||
const task = makeTask({
|
||||
issueInfo: {
|
||||
url: "https://github.com/owner/repo/issues/123",
|
||||
number: 123,
|
||||
state: "closed",
|
||||
stateReason: "completed",
|
||||
title: "Completed issue",
|
||||
},
|
||||
});
|
||||
|
||||
const { container } = render(
|
||||
<TaskCard
|
||||
task={task}
|
||||
onOpenDetail={vi.fn()}
|
||||
addToast={noopToast}
|
||||
/>
|
||||
);
|
||||
|
||||
const badge = container.querySelector(".card-github-badge--completed");
|
||||
expect(badge).toBeDefined();
|
||||
});
|
||||
|
||||
it("renders PR badge with correct color class for merged status", () => {
|
||||
const task = makeTask({
|
||||
prInfo: {
|
||||
url: "https://github.com/owner/repo/pull/42",
|
||||
number: 42,
|
||||
status: "merged",
|
||||
title: "Merged PR",
|
||||
headBranch: "feature/merged",
|
||||
baseBranch: "main",
|
||||
commentCount: 5,
|
||||
},
|
||||
});
|
||||
|
||||
const { container } = render(
|
||||
<TaskCard
|
||||
task={task}
|
||||
onOpenDetail={vi.fn()}
|
||||
addToast={noopToast}
|
||||
/>
|
||||
);
|
||||
|
||||
const badge = container.querySelector(".card-github-badge--merged");
|
||||
expect(badge).toBeDefined();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1705,6 +1705,44 @@ body {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* === GitHub Badges === */
|
||||
.card-github-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: filter 0.15s ease, transform 0.1s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.card-github-badge:hover {
|
||||
filter: brightness(1.15);
|
||||
}
|
||||
|
||||
.card-github-badge:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Modifier classes for state-based styling */
|
||||
.card-github-badge--open {
|
||||
/* Green styling applied via inline styles */
|
||||
}
|
||||
|
||||
.card-github-badge--closed {
|
||||
/* Red styling applied via inline styles */
|
||||
}
|
||||
|
||||
.card-github-badge--merged {
|
||||
/* Purple styling applied via inline styles */
|
||||
}
|
||||
|
||||
.card-github-badge--completed {
|
||||
/* Purple styling applied via inline styles */
|
||||
}
|
||||
|
||||
/* Card saving state */
|
||||
.card.card-saving {
|
||||
opacity: 0.7;
|
||||
|
||||
Reference in New Issue
Block a user