diff --git a/ui/src/components/IssueProperties.test.tsx b/ui/src/components/IssueProperties.test.tsx index 4e1f2c46ef..892f94f546 100644 --- a/ui/src/components/IssueProperties.test.tsx +++ b/ui/src/components/IssueProperties.test.tsx @@ -2394,7 +2394,7 @@ describe("IssueProperties", () => { inline: true, externalObjects: [ { - mentionCount: 1, + mentionCount: 2, sourceLabels: ["Description"], pill: { providerKey: "github", @@ -2411,7 +2411,7 @@ describe("IssueProperties", () => { group: { object: null, mentions: [], - mentionCount: 1, + mentionCount: 2, sourceLabels: ["Description"], }, }, @@ -2463,7 +2463,9 @@ describe("IssueProperties", () => { }); await flush(); - expect(container.textContent).toContain("Github Pull Request"); + expect(container.textContent).toContain("Github PR"); + expect(container.textContent).not.toContain("Github Pull Request"); + expect(container.textContent).not.toContain("×2"); expect(container.textContent).toContain("Github Issue"); expect(container.textContent).toContain("URL"); expect(container.textContent).not.toContain("URL link"); @@ -2472,13 +2474,13 @@ describe("IssueProperties", () => { expect(container.textContent).toContain("Open"); expect(container.textContent).not.toContain("External objects"); const label = Array.from(container.querySelectorAll("span")) - .find((span) => span.textContent === "Github Pull Request"); + .find((span) => span.textContent === "Github PR"); expect(label?.querySelector("svg")).toBeTruthy(); const pullRequestLink = Array.from(container.querySelectorAll("a")) .find((anchor) => anchor.getAttribute("href") === "https://github.com/acme/web/pull/241"); expect(pullRequestLink?.textContent).toContain("PR 241 - Merged"); expect(pullRequestLink?.textContent).not.toContain("acme/web#241"); - expect(pullRequestLink?.textContent).not.toContain("Github Pull Request"); + expect(pullRequestLink?.textContent).not.toContain("Github PR"); expect(pullRequestLink?.querySelectorAll("svg")).toHaveLength(1); expect(pullRequestLink?.className).not.toContain("paperclip-mention-chip"); expect(pullRequestLink?.className).not.toContain("rounded-full"); diff --git a/ui/src/components/StarToggle.test.tsx b/ui/src/components/StarToggle.test.tsx index bc3c0a863d..2f0dcd1f48 100644 --- a/ui/src/components/StarToggle.test.tsx +++ b/ui/src/components/StarToggle.test.tsx @@ -92,15 +92,30 @@ describe("StarToggle", () => { expect(onToggle).not.toHaveBeenCalled(); }); - it("surfaces a retry affordance on error for the button variant", async () => { + it("surfaces an icon-only retry affordance on error for the detail variant", async () => { await render( {}} />); const btn = button(); - expect(btn?.textContent).toContain("Retry star"); + expect(btn?.textContent).toBe(""); + expect(btn?.getAttribute("data-variant")).toBe("ghost"); expect(btn?.getAttribute("title")).toBe("Couldn't save — retry"); }); - it("renders the labelled Star/Starred button variant", async () => { + it("renders the unstarred detail variant as an unfilled icon without an outline", async () => { + await render( {}} />); + const btn = button(); + expect(btn?.textContent).toBe(""); + expect(btn?.getAttribute("data-variant")).toBe("ghost"); + expect(btn?.getAttribute("aria-label")).toBe("Star Alpha"); + expect(btn?.querySelector("svg")?.getAttribute("class")).not.toContain("fill-amber-500"); + }); + + it("renders the detail variant as a filled, icon-only star without an outline", async () => { await render( {}} />); - expect(button()?.textContent).toContain("Starred"); + const btn = button(); + expect(btn?.textContent).toBe(""); + expect(btn?.getAttribute("data-variant")).toBe("ghost"); + expect(btn?.getAttribute("data-size")).toBe("icon-sm"); + expect(btn?.getAttribute("aria-label")).toBe("Unstar Alpha"); + expect(btn?.querySelector("svg")?.getAttribute("class")).toContain("fill-amber-500"); }); }); diff --git a/ui/src/components/StarToggle.tsx b/ui/src/components/StarToggle.tsx index 72c1d9b428..6f67b2c854 100644 --- a/ui/src/components/StarToggle.tsx +++ b/ui/src/components/StarToggle.tsx @@ -14,7 +14,7 @@ export interface StarToggleProps { error?: boolean; /** * "row" — quiet icon-only control for sidebar and browse-list rows. - * "button" — labelled Star/Starred button for detail headers. + * "button" — always-visible icon-only control for detail headers. */ size?: "row" | "button"; /** Called with the desired next starred value. */ @@ -63,12 +63,11 @@ export function StarToggle({ } if (size === "button") { - const label = pending ? "Saving..." : error ? "Retry star" : starred ? "Starred" : "Star"; return ( ); } diff --git a/ui/src/components/issue-properties/external-object-rows.tsx b/ui/src/components/issue-properties/external-object-rows.tsx index e449fda289..37382746f4 100644 --- a/ui/src/components/issue-properties/external-object-rows.tsx +++ b/ui/src/components/issue-properties/external-object-rows.tsx @@ -32,7 +32,7 @@ function externalObjectRowDisplayKey(group: IssueExternalObjectGroup): string { const displayKey = pill.displayKey?.trim(); if (displayKey) return displayKey; if (pill.providerKey === "github") { - if (pill.objectType === "pull_request") return "Github Pull Request"; + if (pill.objectType === "pull_request") return "Github PR"; if (pill.objectType === "issue") return "Github Issue"; } return externalObjectDisplayLabel(pill.providerKey, pill.objectType); @@ -101,7 +101,7 @@ function externalObjectPropertyTitle(group: IssueExternalObjectGroup): string { } function ExternalObjectPropertyValue({ group }: { group: IssueExternalObjectGroup }) { - const { pill, mentionCount } = group; + const { pill } = group; const statusLabel = externalObjectPropertyStatusLabel(group); const providerLabel = externalObjectProviderLabel(pill.providerKey); const typeLabel = externalObjectTypeLabel(pill.objectType); @@ -116,9 +116,6 @@ function ExternalObjectPropertyValue({ group }: { group: IssueExternalObjectGrou label={`${providerLabel}: ${statusLabel}`} /> {value} - {mentionCount > 1 ? ( - ×{mentionCount} - ) : null} ); const className = cn(