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
51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import { AlertCircle, Loader2, Pause, Play } from "lucide-react";
|
|
import type { LucideIcon } from "lucide-react";
|
|
import type { ProjectStatus } from "@fusion/core";
|
|
|
|
export interface ProjectStatusConfig {
|
|
label: string;
|
|
color: string;
|
|
icon: LucideIcon;
|
|
}
|
|
|
|
export const STATUS_CONFIG: Record<ProjectStatus, ProjectStatusConfig> = {
|
|
active: { label: "Active", color: "var(--color-success)", icon: Play },
|
|
paused: { label: "Paused", color: "var(--color-warning)", icon: Pause },
|
|
errored: { label: "Error", color: "var(--color-error)", icon: AlertCircle },
|
|
initializing: { label: "Initializing", color: "var(--color-info)", icon: Loader2 },
|
|
};
|
|
|
|
const FALLBACK_STATUS_CONFIG: ProjectStatusConfig = {
|
|
label: "Unknown",
|
|
color: "var(--color-error)",
|
|
icon: AlertCircle,
|
|
};
|
|
|
|
export function formatStatusLabel(status: string | null | undefined): string {
|
|
if (!status) {
|
|
return FALLBACK_STATUS_CONFIG.label;
|
|
}
|
|
|
|
return status
|
|
.split(/[-_\s]+/)
|
|
.filter(Boolean)
|
|
.map((part) => part.charAt(0).toUpperCase() + part.slice(1))
|
|
.join(" ");
|
|
}
|
|
|
|
export function getProjectStatusConfig(status: string | null | undefined): ProjectStatusConfig {
|
|
const config = STATUS_CONFIG[status as ProjectStatus];
|
|
if (config) {
|
|
return config;
|
|
}
|
|
|
|
return {
|
|
...FALLBACK_STATUS_CONFIG,
|
|
label: formatStatusLabel(status),
|
|
};
|
|
}
|
|
|
|
export function isInitializingStatus(status: string | null | undefined): boolean {
|
|
return status === "initializing";
|
|
}
|