Merge pull request #778 from zenml-io/staging

Release

Author: Cahllagerfeld

src/app/404.tsx

@@ -17,7 +17,7 @@ export default function Page404() {
 					</p>
 					<div className="mt-5 flex justify-center">
 						<Button size="md" asChild>
-							<Link className="w-min self-center whitespace-nowrap" to={routes.home}>
+							<Link className="w-min self-center whitespace-nowrap" to={routes.projects.overview}>
 								<span className="px-0.5">Go to Home</span>
 							</Link>
 						</Button>

src/app/activate-user/UsageReasonStep.tsx

@@ -7,10 +7,9 @@ import { useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import { AccountDetailsStep } from "./AccountDetailsStep";
 import { ActivationProvider } from "./ActivationContext";
-import { InfraStep } from "./InfrastructureStep";
+import { AiChallengesStep } from "./ai-challenge-step";
 import { SetPasswordStep } from "./PasswordStep";
-import { PrimaryUseStep } from "./PrimaryUseStep";
-import { UsageReasonStep } from "./UsageReasonStep";
+import { PrimaryRoleStep } from "./primary-role-step";
 
 export function ActivateWizard() {
 	const { surveyStep } = useSurveyContext();
@@ -31,14 +30,13 @@ export function ActivateWizard() {
 	return (
 		<>
 			<ActivationProvider initialUser={{ activation_token: token }}>
-				<StepDisplay stepAmount={6} />
+				<StepDisplay stepAmount={5} />
 				{surveyStep === 1 && <AccountDetailsStep />}
 				{surveyStep === 2 && <SetPasswordStep />}
-				{surveyStep === 3 && <PrimaryUseStep />}
-				{surveyStep === 4 && <UsageReasonStep />}
-				{surveyStep === 5 && <InfraStep setUsername={setUsername} userId={id} />}
-				{surveyStep === 6 && <SlackStep />}
-				{surveyStep === 7 && (
+				{surveyStep === 3 && <PrimaryRoleStep />}
+				{surveyStep === 4 && <AiChallengesStep setUsername={setUsername} userId={id} />}
+				{surveyStep === 5 && <SlackStep />}
+				{surveyStep === 6 && (
 					<SuccessStep subHeader="Your created your ZenML account" username={username} />
 				)}
 			</ActivationProvider>

src/app/activate-user/Wizard.tsx

@@ -1,6 +1,6 @@
 import AlertCircle from "@/assets/icons/alert-circle.svg?react";
-import { InfrastructureForm } from "@/components/survey/Infrastructure";
-import { InfrastructureFormType } from "@/components/survey/form-schemas";
+import { AiChallengesForm } from "@/components/survey/ai-challenge";
+import { AiChallengesFormType } from "@/components/survey/form-schemas";
 import { useActivateUser } from "@/data/users/activate-user-mutation";
 import { useToast } from "@zenml-io/react-component-library";
 import { useActivationContext } from "./ActivationContext";
@@ -15,7 +15,7 @@ type Props = {
 	setUsername: Dispatch<SetStateAction<string>>;
 };
 
-export function InfraStep({ userId, setUsername }: Props) {
+export function AiChallengesStep({ userId, setUsername }: Props) {
 	const { newUser } = useActivationContext();
 	const { setAuthState } = useAuthContext();
 	const { setSurveyStep } = useSurveyContext();
@@ -44,10 +44,10 @@ export function InfraStep({ userId, setUsername }: Props) {
 		}
 	});
 
-	function handleInfraFormSubmit({ other, providers, otherVal }: InfrastructureFormType) {
-		const providerArr = other ? [...providers, otherVal] : providers;
+	function handleAiChallengesSubmit({ aiTypes, biggestChallenge }: AiChallengesFormType) {
 		const updateMetadata: UserMetadata = {
-			infra_providers: providerArr as string[],
+			ai_types_working_with: aiTypes,
+			biggest_ai_challenges: biggestChallenge,
 			finished_onboarding_survey: true
 		};
 		mutate({
@@ -56,5 +56,5 @@ export function InfraStep({ userId, setUsername }: Props) {
 		});
 	}
 
-	return <InfrastructureForm submitHandler={handleInfraFormSubmit} />;
+	return <AiChallengesForm submitHandler={handleAiChallengesSubmit} />;
 }

src/app/activate-user/InfrastructureStep.tsx renamed to src/app/activate-user/ai-challenge-step.tsx

@@ -1,16 +1,16 @@
-import { PrimaryUseForm } from "@/components/survey/PrimaryUse";
+import { PrimaryRoleForm } from "@/components/survey/primary-role";
 import { useSurveyContext } from "@/components/survey/SurveyContext";
-import { PrimaryUseFormType } from "@/components/survey/form-schemas";
+import { PrimaryRoleFormType } from "@/components/survey/form-schemas";
 import { useActivationContext } from "./ActivationContext";
 import { UserMetadata } from "@/types/user";
 
-export function PrimaryUseStep() {
+export function PrimaryRoleStep() {
 	const { setSurveyStep } = useSurveyContext();
 	const { setNewUser } = useActivationContext();
 
-	function handlePrimaryUseSubmit({ primaryUse }: PrimaryUseFormType) {
+	function handlePrimaryUseSubmit({ primaryRole, otherVal }: PrimaryRoleFormType) {
 		const newMetadata: UserMetadata = {
-			primary_use: primaryUse
+			primary_role: primaryRole === "other" ? otherVal : primaryRole
 		};
 		setNewUser((prev) => ({
 			...prev,
@@ -19,5 +19,5 @@ export function PrimaryUseStep() {
 		setSurveyStep((prev) => prev + 1);
 	}
 
-	return <PrimaryUseForm submitHandler={handlePrimaryUseSubmit} />;
+	return <PrimaryRoleForm submitHandler={handlePrimaryUseSubmit} />;
 }

src/app/activate-user/PrimaryUseStep.tsx renamed to src/app/activate-user/primary-role-step.tsx

@@ -44,7 +44,7 @@ export function LoginForm() {
 		},
 		onSuccess: async () => {
 			setAuthState("true");
-			navigate(redirect || routes.home);
+			navigate(redirect || routes.projects.overview);
 		}
 	});
 

src/app/login/LoginForm.tsx

@@ -5,15 +5,9 @@ import { ChecklistItem } from "@/components/onboarding/ChecklistItem";
 import { useServerInfo } from "@/data/server/info-query";
 import { getLoginCommand } from "@/lib/login-command";
 import { OnboardingStep } from "@/types/onboarding";
-import { StackDeploymentProvider } from "@/types/stack";
 import { Box, Skeleton, buttonVariants } from "@zenml-io/react-component-library";
-import { Dispatch, SetStateAction } from "react";
 import { PipelineSnippet } from "./pipeline-snippet";
-import { DisabledOption, ProviderOnboardingStep } from "./provider-step";
 import { SetProject } from "./set-project";
-import { RunScript } from "./run-script";
-import { InfoBox } from "@/components/Infobox";
-import { SCRIPT_CONFIG } from "./constant";
 
 export function ConnectZenMLStep({ completed, hasDownstreamStep, active }: OnboardingStep) {
 	const { data } = useServerInfo({ throwOnError: true });
@@ -29,7 +23,7 @@ export function ConnectZenMLStep({ completed, hasDownstreamStep, active }: Onboa
 				<div>
 					<p className="mb-1 text-text-sm text-theme-text-secondary">Install ZenML</p>
 					<Codesnippet
-						code={`pip install "zenml==${data ? data.version : <Skeleton className="w-7" />}" scikit-learn scikit-image "numpy<2.0.0"`}
+						code={`pip install "zenml==${data ? data.version : <Skeleton className="w-7" />}"`}
 					/>
 				</div>
 				<div>
@@ -87,92 +81,3 @@ export function RunFirstPipeline({ active, completed, hasDownstreamStep }: Onboa
 		</ChecklistItem>
 	);
 }
-
-export function ConnectRemoteStorage({
-	completed,
-	active,
-	hasDownstreamStep,
-	provider,
-	setProvider
-}: OnboardingStep & {
-	provider: StackDeploymentProvider | null;
-	setProvider: Dispatch<SetStateAction<StackDeploymentProvider | null>>;
-}) {
-	return (
-		<ChecklistItem
-			hasDownstream={hasDownstreamStep}
-			completed={completed}
-			title="Connect remote storage (5 min)"
-			active={active}
-		>
-			<div className="space-y-5">
-				<InfoBox>
-					ZenML stacks provides the cloud infrastructure needed to run your ML pipelines at scale,
-					giving you access to more compute resources than your local machine.{" "}
-					<a
-						rel="noopener noreferrer"
-						target="_blank"
-						className="link text-theme-text-brand"
-						href="https://docs.zenml.io/stacks"
-					>
-						Learn more
-					</a>
-				</InfoBox>
-				<ProviderOnboardingStep selectedProvider={provider} setSelectedProvider={setProvider} />
-
-				{provider ? (
-					<RunScript provider={provider} />
-				) : (
-					<DisabledOption number={2}>Run the script</DisabledOption>
-				)}
-				<HelpBox link="https://docs.zenml.io/stacks" />
-			</div>
-		</ChecklistItem>
-	);
-}
-
-export function RunNewPipeline({
-	active,
-	completed,
-	hasDownstreamStep,
-	provider
-}: OnboardingStep & {
-	provider: StackDeploymentProvider | null;
-}) {
-	const stackName = provider ? SCRIPT_CONFIG[provider].stackName : "<REMOTE_STACK_NAME>";
-	const integrationName = provider ? SCRIPT_CONFIG[provider].integration : "<INTEGRATION_NAME>";
-	return (
-		<ChecklistItem
-			hasDownstream={hasDownstreamStep}
-			completed={completed}
-			title="Run a pipeline in a remote stack (3 min)"
-			active={active}
-		>
-			<div className="space-y-5">
-				<div className="space-y-1">
-					<p className="text-text-sm text-theme-text-secondary">Install the stack integrations</p>
-					<Codesnippet
-						wrap
-						codeClasses="whitespace-pre-wrap"
-						code={`zenml integration install ${integrationName}`}
-					/>
-				</div>
-				<div className="space-y-1">
-					<p className="text-text-sm text-theme-text-secondary">Set the new stack</p>
-					<Codesnippet
-						wrap
-						codeClasses="whitespace-pre-wrap"
-						code={`zenml stack set ${stackName}`}
-					/>
-				</div>
-				<div className="space-y-1">
-					<p className="text-text-sm text-theme-text-secondary">Run the pipeline</p>
-					<Codesnippet wrap codeClasses="whitespace-pre-wrap" code="python run.py" />
-				</div>
-				<div>
-					<HelpBox link="https://docs.zenml.io/stacks" />
-				</div>
-			</div>
-		</ChecklistItem>
-	);
-}

src/app/onboarding/Setup/Items.tsx

@@ -2,13 +2,14 @@ import { useServerInfo } from "@/data/server/info-query";
 import { useOnboarding } from "@/data/server/onboarding-state";
 import { getOnboardingSetup } from "@/lib/onboarding";
 import { checkIsLocalServer } from "@/lib/server";
+import { routes } from "@/router/routes";
+import { OnboardingResponse } from "@/types/onboarding";
 import { Skeleton } from "@zenml-io/react-component-library";
-import { ConnectRemoteStorage, ConnectZenMLStep, RunFirstPipeline, RunNewPipeline } from "./Items";
-import { useState } from "react";
-import { StackDeploymentProvider } from "@/types/stack";
+import { useEffect, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+import { ConnectZenMLStep, RunFirstPipeline } from "./Items";
 
 export function OnboardingSetupList() {
-	const [provider, setProvider] = useState<StackDeploymentProvider | null>(null);
 	const onboarding = useOnboarding({ refetchInterval: 5000 });
 	const serverInfo = useServerInfo();
 
@@ -17,11 +18,27 @@ export function OnboardingSetupList() {
 	if (onboarding.isError || serverInfo.isError) return null;
 
 	const isLocalServer = checkIsLocalServer(serverInfo.data.deployment_type || "other");
-	const { getItem } = getOnboardingSetup(onboarding.data, isLocalServer);
+
+	return <OnboardingSetupListContent onboarding={onboarding.data} isLocalServer={isLocalServer} />;
+}
+
+type Props = {
+	onboarding: OnboardingResponse;
+	isLocalServer: boolean;
+};
+
+function OnboardingSetupListContent({ onboarding, isLocalServer }: Props) {
+	const navigate = useNavigate();
+	const { getItem, isFinished } = getOnboardingSetup(onboarding, isLocalServer);
 	const connectStep = getItem("device_verified");
 	const pipelineStep = getItem("pipeline_run");
-	const stackStep = getItem("stack_with_remote_artifact_store_created");
-	const remotePipelineStep = getItem("pipeline_run_with_remote_artifact_store");
+	const isInitialFinished = useRef(isFinished);
+
+	useEffect(() => {
+		if (isFinished === true && isInitialFinished.current === false) {
+			navigate(routes.home + "?success=true");
+		}
+	}, [isFinished, navigate]);
 
 	return (
 		<ul className="space-y-5">
@@ -41,23 +58,6 @@ export function OnboardingSetupList() {
 					hasDownstreamStep={pipelineStep.hasDownStreamStep}
 				/>
 			</li>
-			<li>
-				<ConnectRemoteStorage
-					provider={provider}
-					setProvider={setProvider}
-					active={stackStep.isActive}
-					completed={stackStep.isCompleted}
-					hasDownstreamStep={stackStep.hasDownStreamStep}
-				/>
-			</li>
-			<li>
-				<RunNewPipeline
-					provider={provider}
-					active={remotePipelineStep.isActive}
-					completed={remotePipelineStep.isCompleted}
-					hasDownstreamStep={remotePipelineStep.hasDownStreamStep}
-				/>
-			</li>
 		</ul>
 	);
 }