refactor(onboarding): replace 50-prop drilling with OnboardingContext

OnboardingStepPanel previously forwarded ~50 props to seven step
components, so adding a single wizard field meant touching four layers.
Introduce a renderer-local React Context (OnboardingProvider /
useOnboarding) that carries all wizard state and actions (connectors,
node status, company inputs, model selection, execution mode, mission,
launch summary, locale, t, error/loading). Step panels now receive only
their navigation callbacks (onContinue / onBack / onLaunch / onFinish)
and read everything else via useOnboarding(). CompanyOnboarding wraps
the step panel tree in OnboardingProvider with a memoised value.

Business logic is unchanged: each onContinueFrom* transition, the
bootstrap call, and the welcome-step branch remain exactly as before;
this refactor only moves the data-passing mechanism.
This commit is contained in:
ZacharyZhang-NY committed 2026-04-16 22:11:45 -04:00
1 parent f3816c6115
commit de77f5f38e
10 files changed
+256 -333

No files matched your search

@@ -1,39 +1,26 @@
import { motion } from "framer-motion";
import type { ConnectorModelEntry } from "@shared/connector-models";
import type { ConnectorId, ProfileSnapshot } from "@shared/types";
import type { AppLocale } from "@shared/locale";
import { ActionButton } from "../ui";
import { ModelToggleList, StatusBadge } from "../execution/ModelManagementShared";
import { getStepNumber, TOTAL_STEPS } from "./OnboardingHero";
import { useOnboarding } from "./OnboardingContext";
interface ModelPoolStepProps {
currentLocale: AppLocale;
connectorModelPools: Array<{
connector: ProfileSnapshot["connectors"][number];
models: ConnectorModelEntry[];
}>;
error: string | null;
onBack: () => void;
onContinue: () => void;
onToggleConnectorModel: (connectorId: ConnectorId, modelId: string) => void;
selectedConnectorId: ConnectorId | "";
selectedConnectorEnabledModels: number;
totalEnabledModels: number;
t: (key: string) => string;
}
export function ModelPoolStep({
currentLocale,
connectorModelPools,
error,
onBack,
onContinue,
onToggleConnectorModel,
selectedConnectorId,
selectedConnectorEnabledModels,
totalEnabledModels,
t,
}: ModelPoolStepProps) {
export function ModelPoolStep({ onBack, onContinue }: ModelPoolStepProps) {
const {
currentLocale,
connectorModelPools,
error,
onToggleConnectorModel,
selectedConnectorId,
selectedConnectorEnabledModels,
totalEnabledModels,
t,
} = useOnboarding();
const selectedConnectorIsRunnable = selectedConnectorEnabledModels > 0;
const hasAnyEnabledModels = totalEnabledModels > 0;
const canContinue = hasAnyEnabledModels && selectedConnectorIsRunnable;