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:
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;
|
||||
|
||||
Reference in new issue
Block a user