Developer
1da67f38c7
PR 3 of 4 for the runtime service registry change. - Add service + new-shape widget TypeScript types; widgets carry service_id + widget_kind (service-bound) or null (built-in). - Add services API client + TanStack Query hooks; reconcile the widget API client/hooks to the new endpoints (remove sources/types; add builtin kinds). - Add closed frontend service registry (integrations/registry.ts) mirroring the backend, with resolveWidget(widget, services) mapping a widget to its component + refresh interval. - Add ServicePage at /services/:serviceType/:serviceId with config view, empty-on-edit secret inputs + 'set' badges, enable toggle, delete, and the service's widget-kind list. - Register /services/:serviceType/:serviceId in App.tsx. - Reconcile the six widget components to refreshIntervalMs + description props; rewrite WidgetConfigDialog around a service -> widget-kind picker. - Update Dashboard test; add integrations/registry.test.ts. Verification: frontend lint 0 errors, build success, 70 tests passed; backend ruff clean, 222 tests passed.
37 lines
988 B
TypeScript
37 lines
988 B
TypeScript
import { Alert, AlertDescription } from "@/components/ui/alert";
|
|
import { useServiceInstances } from "../hooks/useServices";
|
|
import { resolveWidget } from "../integrations/registry";
|
|
import type { WidgetInstance } from "../types";
|
|
import { SectionCard } from "./SectionCard";
|
|
|
|
interface Props {
|
|
widget: WidgetInstance;
|
|
}
|
|
|
|
export function WidgetInstanceCard({ widget }: Props) {
|
|
const { data: services = [] } = useServiceInstances();
|
|
const resolved = resolveWidget(widget, services);
|
|
|
|
if (!resolved) {
|
|
const label = widget.service_id
|
|
? `Unknown widget: ${widget.widget_kind} (service-bound)`
|
|
: `Unknown widget: ${widget.widget_kind} (built-in)`;
|
|
return (
|
|
<SectionCard title={widget.title}>
|
|
<Alert>
|
|
<AlertDescription>{label}</AlertDescription>
|
|
</Alert>
|
|
</SectionCard>
|
|
);
|
|
}
|
|
|
|
const Component = resolved.component;
|
|
return (
|
|
<Component
|
|
widget={widget}
|
|
refreshIntervalMs={resolved.refreshIntervalMs}
|
|
description={resolved.description}
|
|
/>
|
|
);
|
|
}
|