FN-5875: fix hidden usage row count

Keep the usage indicator's hidden-row toggle in sync with rendered duplicate windows.

- count hidden usage rows from the currently rendered provider windows instead of persisted label entries
- preserve the Show hidden button when duplicate live windows share a stored hidden label
- add a regression test covering duplicate Daily windows with persisted hidden state

Files changed:
 .../dashboard/app/components/UsageIndicator.tsx    | 12 ++++++-
 .../components/__tests__/UsageIndicator.test.tsx   | 42 ++++++++++++++++++++++
 2 files changed, 53 insertions(+), 1 deletion(-)

Fusion-Task-Id: FN-5875

Fusion-Task-Lineage: 648f9cb9-ea0a-4573-b08f-b1a412a46ae4
This commit is contained in:
gsxdsm
2026-06-02 07:52:04 -07:00
parent 7d20a997b9
commit 91784d9acf
2 changed files with 53 additions and 1 deletions

View File

@@ -170,6 +170,16 @@ function isWindowHidden(
return hidden[providerName]?.includes(windowLabel) ?? false;
}
function getRenderedHiddenWindowCount(
providerName: string,
windows: UsageWindow[],
hidden: Record<string, string[]>
): number {
return windows.reduce((count, window) => {
return count + (isWindowHidden(providerName, window.label, hidden) ? 1 : 0);
}, 0);
}
interface UsageWindowRowProps {
window: UsageWindow;
viewMode: 'used' | 'remaining';
@@ -404,7 +414,7 @@ function ProviderCard({
onMoveUp,
onMoveDown,
}: ProviderCardProps) {
const hiddenCount = hiddenWindows[provider.name]?.length ?? 0;
const hiddenCount = getRenderedHiddenWindowCount(provider.name, provider.windows, hiddenWindows);
const getStatusBadge = () => {
switch (provider.status) {
case "ok":

View File

@@ -938,6 +938,48 @@ describe("UsageIndicator", () => {
expect(screen.getByTestId("usage-show-hidden-btn")).toHaveTextContent("Show hidden (1)");
});
it("counts currently rendered hidden rows when persisted labels match duplicate live windows", () => {
localStorage.setItem(
USAGE_HIDDEN_WINDOWS_KEY,
JSON.stringify({ Anthropic: ["Daily"] })
);
mockUseUsageData.mockReturnValue({
providers: [
{
name: "Anthropic",
icon: "🅰️",
status: "ok",
windows: [
{
label: "Daily",
percentUsed: 20,
percentLeft: 80,
resetText: "resets in 1h",
resetMs: 3600000,
},
{
label: "Daily",
percentUsed: 60,
percentLeft: 40,
resetText: "resets in 4h",
resetMs: 14400000,
},
],
},
],
loading: false,
error: null,
lastUpdated: new Date(),
refresh: mockRefresh,
});
render(<UsageIndicator isOpen={true} onClose={mockOnClose} projectId={TEST_PROJECT_ID} />);
expect(document.querySelectorAll(".usage-window--hidden")).toHaveLength(2);
expect(screen.getByTestId("usage-show-hidden-btn")).toHaveTextContent("Show hidden (2)");
});
it("renders show hidden button inline within provider info", () => {
mockUseUsageData.mockReturnValue({
providers: mockProviders,