Merge pull request #654 from zenml-io/staging

Author: Cahllagerfeld

package.json

@@ -33,6 +33,7 @@
 		"@zenml-io/react-component-library": "^0.18.0",
 		"awesome-debounce-promise": "^2.1.0",
 		"class-variance-authority": "^0.7.0",
+		"clsx": "^2.1.1",
 		"immer": "^10.1.1",
 		"lodash.debounce": "^4.0.8",
 		"papaparse": "^5.4.1",

pnpm-lock.yaml

@@ -1,6 +1,6 @@
 import AlertCircle from "@/assets/icons/alert-circle.svg?react";
-import { AwarenessForm } from "@/components/survey/AwarenessChannel";
-import { AwarenessFormType } from "@/components/survey/form-schemas";
+import { InfrastructureForm } from "@/components/survey/Infrastructure";
+import { InfrastructureFormType } 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 AwarenessStep({ userId, setUsername }: Props) {
+export function InfraStep({ userId, setUsername }: Props) {
 	const { newUser } = useActivationContext();
 	const { setAuthState } = useAuthContext();
 	const { setSurveyStep } = useSurveyContext();
@@ -44,14 +44,17 @@ export function AwarenessStep({ userId, setUsername }: Props) {
 		}
 	});
 
-	function handleAwarenessFormSubmit({ other, channels, otherVal }: AwarenessFormType) {
-		const channelArr = other ? [...channels, otherVal] : channels;
-		const updateMetadata: UserMetadata = { awareness_channels: channelArr as string[] };
+	function handleInfraFormSubmit({ other, providers, otherVal }: InfrastructureFormType) {
+		const providerArr = other ? [...providers, otherVal] : providers;
+		const updateMetadata: UserMetadata = {
+			infra_providers: providerArr as string[],
+			finished_onboarding_survey: true
+		};
 		mutate({
 			userId,
 			body: { ...newUser, user_metadata: { ...newUser.user_metadata, ...updateMetadata } }
 		});
 	}
 
-	return <AwarenessForm submitHandler={handleAwarenessFormSubmit} />;
+	return <InfrastructureForm submitHandler={handleInfraFormSubmit} />;
 }

src/app/activate-user/AwarenessStep.tsx renamed to src/app/activate-user/InfrastructureStep.tsx

@@ -8,10 +8,9 @@ export function PrimaryUseStep() {
 	const { setSurveyStep } = useSurveyContext();
 	const { setNewUser } = useActivationContext();
 
-	function handlePrimaryUseSubmit({ amountProductionModels, primaryUse }: PrimaryUseFormType) {
+	function handlePrimaryUseSubmit({ primaryUse }: PrimaryUseFormType) {
 		const newMetadata: UserMetadata = {
-			primary_use: primaryUse,
-			models_production: amountProductionModels
+			primary_use: primaryUse
 		};
 		setNewUser((prev) => ({
 			...prev,

src/app/activate-user/PrimaryUseStep.tsx

@@ -0,0 +1,32 @@
+import { useSurveyContext } from "@/components/survey/SurveyContext";
+import { UsageReasonForm } from "@/components/survey/UsageReason";
+import { UsageReasonFormType } from "@/components/survey/form-schemas";
+import { UserMetadata } from "@/types/user";
+import { useActivationContext } from "./ActivationContext";
+
+export function UsageReasonStep() {
+	const { setSurveyStep } = useSurveyContext();
+	const { setNewUser } = useActivationContext();
+
+	function handleUsageReasonSubmit({
+		usageReason,
+		comparison_tools,
+		otherTool,
+		otherToolVal
+	}: UsageReasonFormType) {
+		const metadata: UserMetadata = {
+			usage_reason: usageReason,
+			...(!!comparison_tools && {
+				comparing_tools:
+					!!otherTool && !!otherToolVal ? [...comparison_tools, otherToolVal] : comparison_tools
+			})
+		};
+		setNewUser((prev) => ({
+			...prev,
+			user_metadata: { ...prev.user_metadata, ...metadata }
+		}));
+		setSurveyStep((prev) => prev + 1);
+	}
+
+	return <UsageReasonForm submitHandler={handleUsageReasonSubmit} />;
+}

src/app/activate-user/UsageReasonStep.tsx

@@ -1,14 +1,16 @@
+import { EmptyState } from "@/components/EmptyState";
+import { SlackStep } from "@/components/survey/SlackStep";
 import StepDisplay from "@/components/survey/StepDisplay";
+import { SuccessStep } from "@/components/survey/SuccessStep";
 import { useSurveyContext } from "@/components/survey/SurveyContext";
+import { useState } from "react";
+import { useSearchParams } from "react-router-dom";
 import { AccountDetailsStep } from "./AccountDetailsStep";
+import { ActivationProvider } from "./ActivationContext";
+import { InfraStep } from "./InfrastructureStep";
 import { SetPasswordStep } from "./PasswordStep";
 import { PrimaryUseStep } from "./PrimaryUseStep";
-import { AwarenessStep } from "./AwarenessStep";
-import { ActivationProvider } from "./ActivationContext";
-import { useSearchParams } from "react-router-dom";
-import { EmptyState } from "@/components/EmptyState";
-import { SuccessStep } from "@/components/survey/SuccessStep";
-import { useState } from "react";
+import { UsageReasonStep } from "./UsageReasonStep";
 
 export function ActivateWizard() {
 	const { surveyStep } = useSurveyContext();
@@ -29,12 +31,14 @@ export function ActivateWizard() {
 	return (
 		<>
 			<ActivationProvider initialUser={{ activation_token: token }}>
-				<StepDisplay stepAmount={4} />
+				<StepDisplay stepAmount={6} />
 				{surveyStep === 1 && <AccountDetailsStep />}
 				{surveyStep === 2 && <SetPasswordStep />}
 				{surveyStep === 3 && <PrimaryUseStep />}
-				{surveyStep === 4 && <AwarenessStep setUsername={setUsername} userId={id} />}
-				{surveyStep === 5 && (
+				{surveyStep === 4 && <UsageReasonStep />}
+				{surveyStep === 5 && <InfraStep setUsername={setUsername} userId={id} />}
+				{surveyStep === 6 && <SlackStep />}
+				{surveyStep === 7 && (
 					<SuccessStep subHeader="Your created your ZenML account" username={username} />
 				)}
 			</ActivationProvider>

src/app/activate-user/Wizard.tsx

@@ -14,7 +14,7 @@ type Props = {
 };
 
 export function CodeCollapsible({ runId }: Props) {
-	const [open, setOpen] = useState(false);
+	const [open, setOpen] = useState(true);
 	const runCode = `from zenml.client import Client
 run = Client().get_pipeline_run('${runId}')
 config = run.config`;

src/app/runs/[id]/_Tabs/Configuration/CodeCollapsible.tsx

@@ -14,7 +14,7 @@ type Props = {
 };
 
 export function EnvironmentCollapsible({ run }: Props) {
-	const [open, setOpen] = useState(false);
+	const [open, setOpen] = useState(true);
 
 	return (
 		<CollapsiblePanel open={open} onOpenChange={setOpen}>

src/app/runs/[id]/_Tabs/Configuration/EnvironmentCollapsible.tsx

@@ -31,14 +31,19 @@ export function ConfigurationTab() {
 
 	return (
 		<div className="grid grid-cols-1 gap-5">
-			<NestedCollapsible title="Parameters" data={data.metadata?.config.parameters ?? undefined} />
+			<NestedCollapsible
+				isInitialOpen
+				title="Parameters"
+				data={data.metadata?.config.parameters ?? undefined}
+			/>
 			{(buildData?.metadata?.images as BuildItemMap)?.orchestrator && (
 				<DockerImageCollapsible data={buildData?.metadata?.images?.orchestrator as BuildItem} />
 			)}
 			<CodeCollapsible runId={runId} />
 			<EnvironmentCollapsible run={data} />
-			<NestedCollapsible title="Extra" data={data.metadata?.config.extra} />
+			<NestedCollapsible isInitialOpen title="Extra" data={data.metadata?.config.extra} />
 			<NestedCollapsible
+				isInitialOpen
 				title="Resources"
 				// eslint-disable-next-line @typescript-eslint/no-explicit-any
 				data={(data.metadata?.config.settings as { [key: string]: any })?.resources || {}}

src/app/runs/[id]/_Tabs/Configuration/index.tsx

@@ -0,0 +1,40 @@
+import File from "@/assets/icons/file.svg?react";
+import { EmptyState } from "@/components/EmptyState";
+import { MetadataCards, UncategorizedCard } from "@/components/MetadataCards";
+import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
+import { MetadataMap } from "@/types/common";
+import { Skeleton } from "@zenml-io/react-component-library";
+import { useParams } from "react-router-dom";
+
+export function MetadataTab() {
+	const { runId } = useParams() as { runId: string };
+	const { data, isError } = usePipelineRun({ runId }, { throwOnError: true });
+
+	if (isError) return <p>Failed to fetch pipeline run</p>;
+
+	if (data && Object.entries(data.metadata?.run_metadata || {}).length < 1) {
+		return (
+			<EmptyState icon={<File className="h-[120px] w-[120px] fill-neutral-300" />}>
+				<div className="text-center">
+					<p className="mb-2 text-display-xs font-semibold">No metadata found</p>
+					<p className="text-text-lg text-theme-text-secondary">There are no metadata available.</p>
+				</div>
+			</EmptyState>
+		);
+	}
+
+	return (
+		<section className="flex flex-col gap-5">
+			{data ? (
+				<UncategorizedCard metadata={data.metadata?.run_metadata as any} />
+			) : (
+				<Skeleton className="h-[200px] w-full" />
+			)}
+			{data ? (
+				<MetadataCards metadata={data.metadata?.run_metadata as MetadataMap} />
+			) : (
+				<Skeleton className="h-[200px] w-full" />
+			)}
+		</section>
+	);
+}