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