Merge pull request #593 from zenml-io/future

Release

Author: Cahllagerfeld

package.json

@@ -37,6 +37,7 @@
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-hook-form": "^7.51.1",
+		"react-joyride": "^2.8.1",
 		"react-markdown": "^9.0.1",
 		"react-router-dom": "^6.22.3",
 		"reactflow": "^11.11.0",

pnpm-lock.yaml

@@ -7,16 +7,20 @@ import "reactflow/dist/style.css";
 import { AuthProvider } from "./context/AuthContext";
 import { router } from "./router/Router";
 import { queryClient } from "./router/queryclient";
+import { TourProvider } from "./components/tour/TourContext";
 
 export function App() {
 	return (
 		<Suspense>
 			<AuthProvider>
 				<ReactFlowProvider>
-					<QueryClientProvider client={queryClient}>
-						<Toaster />
-						<RouterProvider router={router} />
-					</QueryClientProvider>
+					<TourProvider>
+						<QueryClientProvider client={queryClient}>
+							<Toaster />
+
+							<RouterProvider router={router} />
+						</QueryClientProvider>
+					</TourProvider>
 				</ReactFlowProvider>
 			</AuthProvider>
 		</Suspense>

src/App.tsx

@@ -2,7 +2,7 @@ import { PageHeader } from "@/components/PageHeader";
 import { Badge } from "@zenml-io/react-component-library";
 import { CommandSection, InfoBox } from "./Fragments";
 import { CTASection, artifactFeatures } from "@/contents/cloud-only";
-import ACP from "@/assets/images/acp.png";
+import ACP from "@/assets/images/acp.webp";
 
 export default function ModelsPage() {
 	return (

src/app/artifacts/page.tsx

@@ -2,9 +2,22 @@ import { PageHeader } from "@/components/PageHeader";
 import { Badge } from "@zenml-io/react-component-library";
 import { CommandSection, InfoBox } from "./Fragments";
 import { CTASection, modelFeatures } from "@/contents/cloud-only";
-import MCP from "@/assets/images/mcp.png";
+import MCP from "@/assets/images/mcp.webp";
+import { useTourContext } from "@/components/tour/TourContext";
+import { useEffect } from "react";
 
 export default function ModelsPage() {
+	const {
+		setTourState,
+		tourState: { tourActive }
+	} = useTourContext();
+
+	useEffect(() => {
+		if (tourActive) {
+			setTourState((prev) => ({ ...prev, run: true, stepIndex: prev.stepIndex }));
+		}
+	}, [tourActive]);
+
 	return (
 		<div>
 			<PageHeader className="flex items-center gap-1">

src/app/models/page.tsx

@@ -2,8 +2,21 @@ import { FallbackSupportCard, ResourcesCard } from "@/components/fallback-pages/
 import { HeaderOnboardingBox } from "./Header";
 import { ProductionSetupChecklist } from "./ProductionSetup";
 import { StarterSetupList } from "./StarterSetup";
+import { useTourContext } from "@/components/tour/TourContext";
+import { useEffect } from "react";
 
 export default function OnboardingPage() {
+	const {
+		setTourState,
+		tourState: { tourActive }
+	} = useTourContext();
+
+	useEffect(() => {
+		if (tourActive) {
+			setTourState((prev) => ({ ...prev, run: true, stepIndex: prev.stepIndex }));
+		}
+	}, [tourActive]);
+
 	return (
 		<div className="layout-container grid grid-cols-4 gap-5 py-5">
 			<div className="col-span-4 space-y-5 lg:col-span-3">

src/app/onboarding/page.tsx

@@ -0,0 +1,80 @@
+import ChevronDown from "@/assets/icons/chevron-down.svg?react";
+import {
+	CollapsibleContent,
+	CollapsibleHeader,
+	CollapsiblePanel,
+	CollapsibleTrigger,
+	Tag
+} from "@zenml-io/react-component-library";
+import { useState } from "react";
+import Docker from "@/assets/icons/services/docker.svg?react";
+import Redirect from "@/assets/icons/redirect.svg?react";
+import { CopyButton } from "@/components/CopyButton";
+import { Codesnippet } from "@/components/CodeSnippet";
+import { KeyValue } from "@/components/KeyValue";
+
+type Props = {
+	data: any;
+};
+
+export function DockerImageCollapsible({ data }: Props) {
+	const [open, setOpen] = useState(true);
+
+	return (
+		<CollapsiblePanel open={open} onOpenChange={setOpen}>
+			<CollapsibleHeader intent="primary" className="flex items-center gap-[10px]">
+				<CollapsibleTrigger className="flex w-full items-center gap-[10px]">
+					<ChevronDown
+						className={` ${
+							open ? "" : "-rotate-90"
+						} h-5 w-5 rounded-md fill-neutral-500 transition-transform duration-200 hover:bg-neutral-200`}
+					/>
+					Docker Image
+				</CollapsibleTrigger>
+			</CollapsibleHeader>
+			<CollapsibleContent className="border-t border-theme-border-moderate bg-theme-surface-primary px-5 py-3">
+				<dl className="grid grid-cols-1 gap-x-[10px] gap-y-2 md:grid-cols-3 md:gap-y-4">
+					<KeyValue
+						label="Docker Image"
+						value={
+							<div className="flex justify-between">
+								<Tag className="inline-flex items-center gap-0.5" rounded={false} emphasis="subtle">
+									<Docker className="mr-1 h-4 w-4 fill-theme-text-brand" />
+									{"zenml/my_pipeline:data"}
+								</Tag>
+								<div className="align-center mr-1 flex">
+									<a
+										className="cursor-pointer"
+										rel="noopener noreferrer"
+										target="_blank"
+										href={`https://${data.image}`}
+									>
+										<Redirect className="mr-1 mt-0.5 h-5 w-5 fill-theme-text-tertiary" />
+									</a>
+									<CopyButton copyText={data.image} isVisible copyTitle="Copy url" />
+								</div>
+							</div>
+						}
+					/>
+					<KeyValue
+						label="Contains Code"
+						value={
+							<Tag
+								color={data.contains_code ? "green" : "grey"}
+								className="inline-flex items-center gap-0.5"
+								rounded={false}
+								emphasis="subtle"
+							>
+								{data.contains_code ? "Available" : "None"}
+							</Tag>
+						}
+					/>
+				</dl>
+				<p className="mb-2 mt-5 text-theme-text-secondary">Dockerfile</p>
+				<Codesnippet fullWidth highlightCode wrap code={data.dockerfile} />
+				<p className="mb-2 mt-5 text-theme-text-secondary">Requirements</p>
+				<Codesnippet fullWidth highlightCode wrap code={data.requirements} />
+			</CollapsibleContent>
+		</CollapsiblePanel>
+	);
+}