Centralize project loading and status-state handling across dashboard surfaces. - add a reusable DataBoundary component for loading, empty, error, and loaded states - extract shared project status config helpers for labels, colors, icons, and initializing detection - update project overview, cards, badges, and selector UI to use the shared helpers - add regression coverage for data-boundary behavior, project overview empty/loading transitions, and status config fallbacks Files changed: packages/dashboard/app/components/DataBoundary.tsx | 64 ++++++++++++++++++++++ packages/dashboard/app/components/ProjectCard.tsx | 48 ++-------------- .../app/components/ProjectHealthBadge.tsx | 45 +-------------- .../dashboard/app/components/ProjectOverview.tsx | 4 +- .../dashboard/app/components/ProjectSelector.tsx | 27 +-------- .../app/components/__tests__/DataBoundary.test.tsx | 62 +++++++++++++++++++++ .../components/__tests__/ProjectOverview.test.tsx | 25 +++++++++ .../__tests__/ProjectThemeTokens.test.tsx | 37 ++++--------- .../utils/__tests__/projectStatusConfig.test.ts | 53 ++++++++++++++++++ .../dashboard/app/utils/projectStatusConfig.ts | 50 +++++++++++++++++ packages/dashboard/vitest.config.ts | 2 + 11 files changed, 282 insertions(+), 135 deletions(-) Fusion-Task-Id: FN-5894 Fusion-Task-Lineage: 3626a4af-b62b-456d-82d7-cf47bbf55c21
54 lines
2.0 KiB
TypeScript
54 lines
2.0 KiB
TypeScript
import { describe, expect, it } from "vitest";
|
|
import { AlertCircle, Loader2, Pause, Play } from "lucide-react";
|
|
import {
|
|
STATUS_CONFIG,
|
|
formatStatusLabel,
|
|
getProjectStatusConfig,
|
|
isInitializingStatus,
|
|
} from "../projectStatusConfig";
|
|
|
|
describe("projectStatusConfig", () => {
|
|
it("maps each known status to the expected config", () => {
|
|
expect(STATUS_CONFIG.active.label).toBe("Active");
|
|
expect(STATUS_CONFIG.active.color).toBe("var(--color-success)");
|
|
expect(STATUS_CONFIG.active.icon).toBe(Play);
|
|
|
|
expect(STATUS_CONFIG.paused.label).toBe("Paused");
|
|
expect(STATUS_CONFIG.paused.color).toBe("var(--color-warning)");
|
|
expect(STATUS_CONFIG.paused.icon).toBe(Pause);
|
|
|
|
expect(STATUS_CONFIG.errored.label).toBe("Error");
|
|
expect(STATUS_CONFIG.errored.color).toBe("var(--color-error)");
|
|
expect(STATUS_CONFIG.errored.icon).toBe(AlertCircle);
|
|
|
|
expect(STATUS_CONFIG.initializing.label).toBe("Initializing");
|
|
expect(STATUS_CONFIG.initializing.color).toBe("var(--color-info)");
|
|
expect(STATUS_CONFIG.initializing.icon).toBe(Loader2);
|
|
});
|
|
|
|
it("formats unknown statuses into readable labels", () => {
|
|
expect(formatStatusLabel("removing_now")).toBe("Removing Now");
|
|
expect(getProjectStatusConfig("removing")).toMatchObject({
|
|
label: "Removing",
|
|
color: "var(--color-error)",
|
|
});
|
|
expect(getProjectStatusConfig("removing").icon).toBe(AlertCircle);
|
|
});
|
|
|
|
it("returns Unknown fallback labels for undefined, null, or empty statuses", () => {
|
|
for (const status of [undefined, null, ""]) {
|
|
const config = getProjectStatusConfig(status);
|
|
expect(config.label).toBe("Unknown");
|
|
expect(config.color).toBe("var(--color-error)");
|
|
expect(config.icon).toBe(AlertCircle);
|
|
expect(config.icon).toBeDefined();
|
|
}
|
|
});
|
|
|
|
it("only treats literal initializing as the spinner state", () => {
|
|
expect(isInitializingStatus("initializing")).toBe(true);
|
|
expect(isInitializingStatus("INITIALIZING")).toBe(false);
|
|
expect(isInitializingStatus(undefined)).toBe(false);
|
|
});
|
|
});
|