refactor: remove unnecessary steps

zenml-io · Jul 10, 2024 · b21d695 · b21d695
1 parent b56272a
commit b21d695
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 125 deletions.
diff --git a/src/app/onboarding/ProductionSetup/Items.tsx b/src/app/onboarding/ProductionSetup/Items.tsx
@@ -1,88 +1,12 @@
+import Plus from "@/assets/icons/plus.svg?react";
 import { Codesnippet } from "@/components/CodeSnippet";
 import { HelpBox } from "@/components/fallback-pages/Helpbox";
 import { ChecklistItem } from "@/components/onboarding/ChecklistItem";
 import {} from "@/lib/onboarding";
+import { routes } from "@/router/routes";
 import { OnboardingStep } from "@/types/onboarding";
-import { useState } from "react";
-import { getArtifactStoreStep } from "./ArtifactStore";
-import { getServiceConnectorStep } from "./ConnectorContent";
-import { CloudProvider, ProviderSelect } from "./ProviderSelect";
-
-export function CreateServiceConnector({ hasDownstreamStep, active, completed }: OnboardingStep) {
-	const [selectedProvider, setSelectedProvider] = useState<CloudProvider>("aws");
-
-	return (
-		<ChecklistItem
-			hasDownstream={hasDownstreamStep}
-			active={active}
-			completed={completed}
-			title="Create a service connector"
-		>
-			<p className="mb-3">
-				A service connector grants users of your ZenML tenant the ability to access components like
-				your artifact store{" "}
-				<LearnMoreLink href="https://docs.zenml.io/user-guide/production-guide/remote-storage#configuring-permissions-with-your-first-service-connector" />
-			</p>
-			<div className="space-y-5">
-				<div className="space-y-1">
-					<label
-						htmlFor="artifact-store-provider"
-						className="text-text-sm text-theme-text-secondary"
-					>
-						Select your cloud provider
-					</label>
-					<ProviderSelect
-						id="artifact-store-provider"
-						value={selectedProvider}
-						setValue={setSelectedProvider}
-					/>
-				</div>
-				{getServiceConnectorStep(selectedProvider)}
-				<div>
-					<HelpBox link="https://docs.zenml.io/user-guide/production-guide/remote-storage#configuring-permissions-with-your-first-service-connector" />
-				</div>
-			</div>
-		</ChecklistItem>
-	);
-}
-
-export function CreateArtifactStore({ completed, active, hasDownstreamStep }: OnboardingStep) {
-	const [selectedProvider, setSelectedProvider] = useState<CloudProvider>("aws");
-	return (
-		<ChecklistItem
-			hasDownstream={hasDownstreamStep}
-			completed={completed}
-			title="Create an artifact store"
-			active={active}
-		>
-			<p className="mb-3">
-				Configuring a remote artifact store will version your pipeline's data directly in your cloud
-				provider{" "}
-				<LearnMoreLink href="https://docs.zenml.io/user-guide/production-guide/remote-storage" />
-			</p>
-			<div className="space-y-5">
-				<div className="space-y-1">
-					<label
-						htmlFor="artifact-store-provider"
-						className="text-text-sm text-theme-text-secondary"
-					>
-						Select your cloud provider
-					</label>
-					<ProviderSelect
-						displayOther
-						id="artifact-store-provider"
-						value={selectedProvider}
-						setValue={setSelectedProvider}
-					/>
-				</div>
-				{getArtifactStoreStep(selectedProvider)}
-				<div>
-					<HelpBox link="https://docs.zenml.io/user-guide/production-guide/remote-storage" />
-				</div>
-			</div>
-		</ChecklistItem>
-	);
-}
+import { Button } from "@zenml-io/react-component-library";
+import { Link } from "react-router-dom";
 
 export function CreateNewStack({ completed, active, hasDownstreamStep }: OnboardingStep) {
 	return (
@@ -97,14 +21,14 @@ export function CreateNewStack({ completed, active, hasDownstreamStep }: Onboard
 				<LearnMoreLink href="https://docs.zenml.io/user-guide/production-guide/understand-stacks" />
 			</p>
 			<div className="space-y-5">
-				<div>
-					<p className="mb-1 text-text-sm text-theme-text-secondary">
-						Download the quickstart example to your local machine
-					</p>
-					<Codesnippet
-						codeClasses="whitespace-pre-wrap"
-						code="zenml stack register local_with_remote_storage -o default -a cloud_artifact_store"
-					/>
+				<div className="space-y-3">
+					<p>Connect your Cloud to deploy your ZenML pipelines in a remote stack.</p>
+					<Button className="w-fit" size="md" asChild>
+						<Link className="flex" to={routes.stacks.create.index}>
+							<Plus className="h-5 w-5 shrink-0 fill-white" />
+							Register a stack
+						</Link>
+					</Button>
 				</div>
 				<HelpBox link="https://docs.zenml.io/user-guide/production-guide/understand-stacks" />
 			</div>

diff --git a/src/app/onboarding/ProductionSetup/index.tsx b/src/app/onboarding/ProductionSetup/index.tsx
@@ -13,12 +13,7 @@ import {
 	cn
 } from "@zenml-io/react-component-library";
 import { useState } from "react";
-import {
-	CreateArtifactStore,
-	CreateNewStack,
-	CreateServiceConnector,
-	RunNewPipeline
-} from "./Items";
+import { CreateNewStack, RunNewPipeline } from "./Items";
 
 export function ProductionSetupChecklist() {
 	const onboarding = useOnboarding({ refetchInterval: 5000 });
@@ -36,10 +31,8 @@ export function ProductionSetupChecklist() {
 
 	const { progress, totalItems, itemsDone, getItem } = getProductionSetup(onboarding.data);
 
-	const connectorStep = getItem("service_connector_created");
-	const storeStep = getItem("remote_artifact_store_created");
-	const stackStep = getItem("stack_with_remote_artifact_store_created");
-	const pipelineStep = getItem("pipeline_run_with_remote_artifact_store");
+	const stackStep = getItem("stack_with_remote_orchestrator_created");
+	const pipelineStep = getItem("pipeline_run_with_remote_orchestrator");
 
 	return (
 		<>
@@ -84,20 +77,6 @@ export function ProductionSetupChecklist() {
 				</CollapsibleTrigger>
 				<CollapsibleContent className="border-t border-theme-border-moderate p-5">
 					<ul className="divide-y divide-theme-border-moderate">
-						<li className="py-5 first:pt-0 last:pb-0">
-							<CreateServiceConnector
-								active={starterSetup.isFinished && connectorStep.isActive}
-								completed={connectorStep.isCompleted}
-								hasDownstreamStep={connectorStep.hasDownStreamStep}
-							/>
-						</li>
-						<li className="py-5 first:pt-0 last:pb-0">
-							<CreateArtifactStore
-								active={starterSetup.isFinished && storeStep.isActive}
-								completed={storeStep.isCompleted}
-								hasDownstreamStep={storeStep.hasDownStreamStep}
-							/>
-						</li>
 						<li className="py-5 first:pt-0 last:pb-0">
 							<CreateNewStack
 								active={starterSetup.isFinished && stackStep.isActive}

diff --git a/src/components/onboarding/ChecklistItem.tsx b/src/components/onboarding/ChecklistItem.tsx
@@ -20,9 +20,10 @@ export function ChecklistItem({
 	completed,
 	title,
 	children,
-	hasDownstream
+	hasDownstream,
+	active
 }: PropsWithChildren<Props>) {
-	const [open, setOpen] = useState(false);
+	const [open, setOpen] = useState(active);
 
 	return (
 		<Collapsible open={open} onOpenChange={setOpen}>

diff --git a/src/lib/onboarding.ts b/src/lib/onboarding.ts
@@ -7,12 +7,7 @@ export function getStarterSetupItems(isLocal: boolean): OnboardingChecklistItemN
 }
 
 function getProductionSetupItems(): OnboardingChecklistItemName[] {
-	return [
-		"service_connector_created",
-		"remote_artifact_store_created",
-		"pipeline_run_with_remote_artifact_store",
-		"stack_with_remote_artifact_store_created"
-	];
+	return ["stack_with_remote_orchestrator_created", "pipeline_run_with_remote_orchestrator"];
 }
 
 const finalSteps: {

diff --git a/src/types/onboarding.ts b/src/types/onboarding.ts
@@ -2,12 +2,7 @@ export type OnboardingChecklistItemName =
 	| "device_verified"
 	| "pipeline_run"
 	| "starter_setup_completed"
-	| "service_connector_created"
-	| "remote_artifact_store_created"
-	| "remote_orchestrator_created"
-	| "stack_with_remote_artifact_store_created"
 	| "stack_with_remote_orchestrator_created"
-	| "pipeline_run_with_remote_artifact_store"
 	| "pipeline_run_with_remote_orchestrator"
 	| "production_setup_completed";