feat: wizard for stacks (#635)

Author: Cahllagerfeld

package.json

@@ -30,7 +30,9 @@
 		"@tanstack/react-table": "^8.17.3",
 		"@tisoap/react-flow-smart-edge": "^3.0.0",
 		"@zenml-io/react-component-library": "^0.18.0",
+		"awesome-debounce-promise": "^2.1.0",
 		"class-variance-authority": "^0.7.0",
+		"immer": "^10.1.1",
 		"lodash.debounce": "^4.0.8",
 		"papaparse": "^5.4.1",
 		"prismjs": "^1.29.0",

pnpm-lock.yaml

@@ -54,16 +54,21 @@ function NewInfrastructure({ isLocalDeployment }: Props) {
 }
 
 function ExistingCloud({ isLocalDeployment }: Props) {
+	const [searchParams] = useSearchParams();
+	const link =
+		routes.stacks.create.existingInfra +
+		(searchParams.size >= 1 ? `?${searchParams.toString()}` : "");
 	return (
 		<div className="relative">
 			{isLocalDeployment && <LocalOverlay />}
-			<CreateStackOptionCard
-				comingSoon
-				title="Use existing Cloud"
-				subtitle="Connect to your existing Cloud and configure your components manually."
-				icon={<CloudTenant className="h-6 w-6 fill-primary-400" />}
-				estimatedTime="15"
-			/>
+			<Link to={link}>
+				<CreateStackOptionCard
+					title="Use existing Cloud"
+					subtitle="Connect to your existing Cloud and configure your components manually."
+					icon={<CloudTenant className="h-6 w-6 fill-primary-400" />}
+					estimatedTime="15"
+				/>
+			</Link>
 		</div>
 	);
 }

src/app/stacks/create/SmartSetup.tsx

@@ -0,0 +1,18 @@
+import { Button } from "@zenml-io/react-component-library/components/server";
+import { useNavigate } from "react-router-dom";
+import { clearWizardData } from "../new-infrastructure/persist";
+import { routes } from "@/router/routes";
+
+export function CancelButton() {
+	const navigate = useNavigate();
+
+	function cancel() {
+		clearWizardData();
+		navigate(routes.stacks.create.index);
+	}
+	return (
+		<Button onClick={() => cancel()} intent="secondary" size="md">
+			Cancel
+		</Button>
+	);
+}

src/app/stacks/create/components/CancelButton.tsx

@@ -0,0 +1,42 @@
+import { Badge, cn } from "@zenml-io/react-component-library";
+import { InputHTMLAttributes, ReactNode, forwardRef } from "react";
+
+type ProviderRadioProps = InputHTMLAttributes<HTMLInputElement>;
+export const CloudProviderRadioButton = forwardRef<HTMLInputElement, ProviderRadioProps>(
+	({ children, className, id, ...rest }, ref) => (
+		<div className="min-h-[160px] min-w-[160px]">
+			<input id={id} {...rest} ref={ref} className={cn("peer sr-only", className)} type="radio" />
+			<label
+				htmlFor={id}
+				className="flex h-full w-full flex-col items-start justify-center space-y-5 rounded-md border border-theme-border-minimal bg-theme-surface-primary p-5 text-text-lg text-theme-text-secondary hover:cursor-pointer	peer-checked:border-primary-100 peer-checked:bg-primary-25 peer-focus-visible:border-primary-100 peer-disabled:cursor-default peer-disabled:bg-neutral-50"
+			>
+				{children}
+			</label>
+		</div>
+	)
+);
+
+CloudProviderRadioButton.displayName = "CloudProviderRadioButton";
+
+type ProviderCardProps = {
+	icon: ReactNode;
+	title: ReactNode;
+	subtitle: ReactNode;
+	comingSoon?: boolean;
+};
+export function ProviderCard({ icon, title, subtitle, comingSoon }: ProviderCardProps) {
+	return (
+		<div className="space-y-1 text-left">
+			{icon}
+			<div className="flex items-center gap-1">
+				<p className="text-text-lg font-semibold text-theme-text-primary">{title}</p>
+				{comingSoon && (
+					<Badge className="font-semibold" color="purple" size="sm">
+						Coming Soon
+					</Badge>
+				)}
+			</div>
+			<p className="text-text-sm text-theme-text-secondary">{subtitle}</p>
+		</div>
+	);
+}