4f897d1a46
Merge brings FN-3067 UX revisions across onboarding components, including reduced ModelOnboardingModal complexity, new fallback styling for PluginSlot, and polish to OnboardingDisclosure, OnboardingResumeCard, and PostOnboardingRecommendations with minor updates to PlanningModeModal and SettingsModa Fusion-Task-Id: FN-3067
59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import { ErrorBoundary } from "./ErrorBoundary";
|
|
import { usePluginUiSlots } from "../hooks/usePluginUiSlots";
|
|
import "./PluginSlot.css";
|
|
|
|
interface PluginSlotProps {
|
|
/** The slot identifier to render (e.g., "task-detail-tab", "header-action") */
|
|
slotId: string;
|
|
/** Optional project ID for multi-project slot scoping */
|
|
projectId?: string;
|
|
/** Optional plugin IDs to restrict rendering to a subset of matching entries */
|
|
pluginIds?: string[];
|
|
}
|
|
|
|
/**
|
|
* Renders plugin slot registrations for a host surface.
|
|
*
|
|
* Dynamic plugin component loading is not yet available, so this renders a
|
|
* lightweight non-technical placeholder while preserving plugin slot boundaries.
|
|
* Each rendered slot is wrapped in an ErrorBoundary to isolate failures from
|
|
* the parent dashboard UI.
|
|
*/
|
|
export function PluginSlot({ slotId, projectId, pluginIds }: PluginSlotProps): ReactNode {
|
|
const { getSlotsForId, loading, error } = usePluginUiSlots(projectId);
|
|
|
|
// Non-critical failure — no visible UI when loading, errored, or no matching slots
|
|
if (loading || error || !slotId) {
|
|
return null;
|
|
}
|
|
|
|
const matchingEntries = getSlotsForId(slotId).filter((entry) =>
|
|
pluginIds && pluginIds.length > 0 ? pluginIds.includes(entry.pluginId) : true,
|
|
);
|
|
|
|
if (matchingEntries.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
return (
|
|
<ErrorBoundary level="page">
|
|
<>
|
|
{matchingEntries.map((entry, index) => (
|
|
<section
|
|
key={`${entry.pluginId}-${entry.slot.slotId}-${index}`}
|
|
className="plugin-slot-shell"
|
|
data-plugin-slot
|
|
data-slot-id={entry.slot.slotId}
|
|
data-plugin-id={entry.pluginId}
|
|
aria-label={entry.slot.label}
|
|
>
|
|
<p className="plugin-slot-shell__title">{entry.slot.label}</p>
|
|
<p className="plugin-slot-shell__message">Extension content available.</p>
|
|
</section>
|
|
))}
|
|
</>
|
|
</ErrorBoundary>
|
|
);
|
|
}
|