feat(FN-2607): merge fusion/fn-2607 (auto-resolved)

- test(FN-2607): complete Step 3 — update usage indicator assertions
- feat(FN-2607): complete Step 2 — hide labels for hidden usage rows
- feat(FN-2607): complete Step 1 — remove connected provider badge
This commit is contained in:
Fusion
2026-04-26 12:53:43 -07:00
committed by gsxdsm
parent bbc872cee9
commit 545c8a69f4
3 changed files with 28 additions and 13 deletions

View File

@@ -1307,11 +1307,6 @@
border-radius: var(--radius-pill); border-radius: var(--radius-pill);
} }
.usage-status-badge--connected {
background: rgba(63, 185, 80, 0.15);
color: var(--color-success);
}
.usage-status-badge--error { .usage-status-badge--error {
background: rgba(248, 81, 73, 0.15); background: rgba(248, 81, 73, 0.15);
color: var(--color-error); color: var(--color-error);
@@ -1395,7 +1390,8 @@
.usage-window--hidden .usage-progress-wrapper, .usage-window--hidden .usage-progress-wrapper,
.usage-window--hidden .usage-window-footer, .usage-window--hidden .usage-window-footer,
.usage-window--hidden .usage-pace-row { .usage-window--hidden .usage-pace-row,
.usage-window--hidden .usage-window-label {
display: none; display: none;
} }

View File

@@ -327,11 +327,7 @@ function ProviderCard({
const getStatusBadge = () => { const getStatusBadge = () => {
switch (provider.status) { switch (provider.status) {
case "ok": case "ok":
return ( return null;
<span className="usage-status-badge usage-status-badge--connected">
Connected
</span>
);
case "error": case "error":
return ( return (
<span className="usage-status-badge usage-status-badge--error"> <span className="usage-status-badge usage-status-badge--error">

View File

@@ -1,6 +1,7 @@
import { describe, it, expect, vi, beforeEach } from "vitest"; import { describe, it, expect, vi, beforeEach } from "vitest";
import { render, screen, fireEvent } from "@testing-library/react"; import { render, screen, fireEvent } from "@testing-library/react";
import { UsageIndicator } from "../UsageIndicator"; import { UsageIndicator } from "../UsageIndicator";
import "../PlanningModeModal.css";
import * as useUsageDataModule from "../../hooks/useUsageData"; import * as useUsageDataModule from "../../hooks/useUsageData";
import type { ProviderUsage } from "../../api"; import type { ProviderUsage } from "../../api";
import { scopedKey } from "../../utils/projectStorage"; import { scopedKey } from "../../utils/projectStorage";
@@ -117,7 +118,6 @@ describe("UsageIndicator", () => {
expect(screen.getByText("Google")).toBeInTheDocument(); expect(screen.getByText("Google")).toBeInTheDocument();
// Check status badges // Check status badges
expect(screen.getAllByText("Connected").length).toBeGreaterThanOrEqual(1);
expect(screen.getByText("Not configured")).toBeInTheDocument(); expect(screen.getByText("Not configured")).toBeInTheDocument();
// Check usage windows // Check usage windows
@@ -318,6 +318,27 @@ describe("UsageIndicator", () => {
expect(mockUseUsageData).toHaveBeenCalledWith({ autoRefresh: false }); expect(mockUseUsageData).toHaveBeenCalledWith({ autoRefresh: false });
}); });
it("does not render a Connected badge for providers with ok status", () => {
mockUseUsageData.mockReturnValue({
providers: [
{
name: "Anthropic",
icon: "🅰️",
status: "ok",
windows: [],
},
],
loading: false,
error: null,
lastUpdated: new Date(),
refresh: mockRefresh,
});
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
expect(screen.queryByText("Connected")).not.toBeInTheDocument();
});
it("renders provider error messages", () => { it("renders provider error messages", () => {
mockUseUsageData.mockReturnValue({ mockUseUsageData.mockReturnValue({
providers: [ providers: [
@@ -561,10 +582,12 @@ describe("UsageIndicator", () => {
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />); render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
const sessionLabel = screen.getByText("Session (5h)");
fireEvent.click(screen.getByRole("button", { name: "Hide Session (5h)" })); fireEvent.click(screen.getByRole("button", { name: "Hide Session (5h)" }));
const hiddenRow = screen.getByText("Session (5h)").closest(".usage-window"); const hiddenRow = sessionLabel.closest(".usage-window");
expect(hiddenRow).toHaveClass("usage-window--hidden"); expect(hiddenRow).toHaveClass("usage-window--hidden");
expect(sessionLabel).not.toBeVisible();
expect(screen.queryByText("45% used")).not.toBeInTheDocument(); expect(screen.queryByText("45% used")).not.toBeInTheDocument();
}); });