Release (#730)

Author: Cahllagerfeld

.env.example

@@ -1,3 +1,4 @@
 VITE_API_BASE_URL=
 VITE_FRONTEND_VERSION=
-VITE_FEATURE_OS_KEY=
+VITE_FEATURE_OS_KEY=
+VITE_REO_KEY=

.github/workflows/release.yml

@@ -35,6 +35,7 @@ jobs:
           VITE_API_BASE_URL: "/api/v1"
           VITE_FRONTEND_VERSION: ${{ steps.get_version.outputs.VERSION }}
           VITE_FEATURE_OS_KEY: ${{ secrets.FEATURE_OS_KEY }}
+          VITE_REO_KEY: ${{ secrets.REO_KEY }}
 
       - name: Generate Changelog
         uses: heinrichreimer/github-changelog-generator-action@v2.1.1

package.json

@@ -38,7 +38,7 @@
 		"jwt-decode": "^4.0.0",
 		"lodash.debounce": "^4.0.8",
 		"papaparse": "^5.5.2",
-		"prismjs": "^1.29.0",
+		"prismjs": "^1.30.0",
 		"react": "^18.3.1",
 		"react-countdown": "^2.3.6",
 		"react-dom": "^18.3.1",
@@ -48,6 +48,7 @@
 		"react-markdown": "^9.0.3",
 		"react-router-dom": "^6.27.0",
 		"reactflow": "^11.11.4",
+		"reodotdev": "^1.0.0",
 		"unique-names-generator": "^4.7.1",
 		"zod": "^3.24.1"
 	},

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 import ArrowLeft from "@/assets/icons/arrow-left.svg?react";
 import { SelectFlavorList } from "@/components/stack-components/create-component/flavor-select";
 import * as Wizard from "@/components/wizard/Wizard";
+import { snakeCaseToTitleCase } from "@/lib/strings";
 import { StackComponentType } from "@/types/components";
 import { Flavor } from "@/types/flavors";
 import { Button } from "@zenml-io/react-component-library/components/server";
@@ -24,7 +25,7 @@ export function FlavorStep({ type, handleFlavorSelect, handleBack }: Props) {
 					<ArrowLeft className="size-5 shrink-0" />
 					<span className="sr-only">Go step back</span>
 				</Button>
-				<span>Select your Component Flavor</span>
+				<span>Select your {snakeCaseToTitleCase(type)} Flavor</span>{" "}
 			</Wizard.Header>
 			<Wizard.Body>
 				<SelectFlavorList type={type} setSelectedFlavor={handleFlavorSelect} />

src/app/components/create/flavor-step.tsx

@@ -31,7 +31,7 @@ export function ConnectZenMLStep({ completed, hasDownstreamStep, active }: Onboa
 					<p className="mb-1 text-text-sm text-theme-text-secondary">Log in to your ZenML Server</p>
 					<Codesnippet code={getLoginCommand(data?.deployment_type || "other")} />
 				</div>
-				<HelpBox link="https://docs.zenml.io/user-guide/production-guide/deploying-zenml#connecting-to-a-deployed-zenml" />
+				<HelpBox link="https://docs.zenml.io/user-guides/production-guide/deploying-zenml#connecting-to-a-deployed-zenml" />
 			</div>
 		</ChecklistItem>
 	);
@@ -93,7 +93,7 @@ export function RunFirstPipeline({ active, completed, hasDownstreamStep }: Onboa
 							target="_blank"
 							rel="noopener noreferrer"
 							className={buttonVariants({ intent: "primary", emphasis: "subtle", size: "md" })}
-							href="https://docs.zenml.io/user-guide/starter-guide/create-an-ml-pipeline"
+							href="https://docs.zenml.io/user-guides/starter-guide/create-an-ml-pipeline"
 						>
 							Browse our docs
 						</a>
@@ -116,7 +116,7 @@ export function CreateNewStack({ completed, active, hasDownstreamStep }: Onboard
 		>
 			<p className="mb-3">
 				A stack configures how a pipeline is executed{" "}
-				<LearnMoreLink href="https://docs.zenml.io/user-guide/production-guide/understand-stacks" />
+				<LearnMoreLink href="https://docs.zenml.io/user-guides/production-guide/understand-stacks" />
 			</p>
 			<div className="space-y-5">
 				<div className="space-y-3">
@@ -128,7 +128,7 @@ export function CreateNewStack({ completed, active, hasDownstreamStep }: Onboard
 						</Link>
 					</Button>
 				</div>
-				<HelpBox link="https://docs.zenml.io/user-guide/production-guide/understand-stacks" />
+				<HelpBox link="https://docs.zenml.io/user-guides/production-guide/understand-stacks" />
 			</div>
 		</ChecklistItem>
 	);
@@ -152,7 +152,7 @@ export function RunNewPipeline({ active, completed, hasDownstreamStep }: Onboard
 					<Codesnippet wrap codeClasses="whitespace-pre-wrap" code="python run.py" />
 				</div>
 				<div>
-					<HelpBox link="https://docs.zenml.io/user-guide/production-guide/understand-stacks" />
+					<HelpBox link="https://docs.zenml.io/user-guides/production-guide/understand-stacks" />
 				</div>
 			</div>
 		</ChecklistItem>

src/app/onboarding/Setup/Items.tsx

@@ -1,9 +1,8 @@
-import External from "@/assets/icons/link-external.svg?react";
 import CloudSquares from "@/assets/illustrations/cloud-squares.svg";
 import { useServerInfo } from "@/data/server/info-query";
 import { getLoginCommand } from "@/lib/login-command";
 import { routes } from "@/router/routes";
-import { Badge, Box, Button } from "@zenml-io/react-component-library";
+import { Box } from "@zenml-io/react-component-library";
 import { Link } from "react-router-dom";
 import { Codesnippet } from "../components/CodeSnippet";
 import { OverviewHeader } from "./Header";
@@ -14,7 +13,6 @@ export default function IndexPage() {
 			<OverviewHeader />
 			<div className="layout-container space-y-5 py-5">
 				<OverviewContent />
-				<VsCodeBox />
 			</div>
 		</div>
 	);
@@ -58,28 +56,3 @@ function OverviewContent() {
 		</Box>
 	);
 }
-
-function VsCodeBox() {
-	return (
-		<Box className="flex flex-col items-center justify-between gap-3 overflow-hidden px-7 py-5 md:flex-row md:flex-wrap">
-			<div className="space-y-1">
-				<div className="flex items-center space-x-1">
-					<Badge className="text-text-xs font-semibold" color="green">
-						NEW
-					</Badge>
-					<h2 className="text-text-xl font-semibold">VS Code Quickstart with ZenML</h2>
-				</div>
-				<p className="text-theme-text-secondary">
-					Get started quickly with ZenML using GitHub Codespaces! You can run our quickstart guide
-					in a pre-configured environment.
-				</p>
-			</div>
-
-			<Button size="sm" className="w-fit" emphasis="subtle" asChild>
-				<a target="_blank" rel="noopener noreferrer" href="https://github.com/zenml-io/zenml">
-					Visit our GitHub repo <External className="h-5 w-5 shrink-0" />
-				</a>
-			</Button>
-		</Box>
-	);
-}

src/app/page.tsx

@@ -1,18 +1,42 @@
 import { fetcher } from "@/data/fetch";
 import { useServerInfo } from "@/data/server/info-query";
 import { useCurrentUser } from "@/data/users/current-user-query";
-
+import { loadReoScript } from "reodotdev";
 import { analyticsServerUrl } from "@/lib/analytics";
 import { routes } from "@/router/routes";
 import { PageEvent, PageEventContext, PageEventPage, PageEventProperties } from "@/types/analytics";
 import { useEffect } from "react";
 import { matchPath, useLocation } from "react-router-dom";
 
+const REO_KEY = import.meta.env.VITE_REO_KEY;
+
 export function Analytics() {
 	const { data } = useServerInfo();
 	const { data: userData } = useCurrentUser();
 	const location = useLocation();
 
+	useEffect(() => {
+		if (REO_KEY && data && data.analytics_enabled && userData) {
+			const reoPromise = loadReoScript({ clientID: REO_KEY });
+			reoPromise
+				.then(async (Reo) => {
+					Reo.init({ clientID: REO_KEY });
+					if (userData.metadata?.email) {
+						// wait 2 seconds to ensure the script is loaded
+						await new Promise((resolve) => setTimeout(resolve, 2000));
+						const identity = {
+							username: userData.metadata.email,
+							type: "email"
+						};
+						Reo.identify(identity);
+					}
+				})
+				.catch((error) => {
+					console.error("Error loading Reo", error);
+				});
+		}
+	}, [data, userData]);
+
 	useEffect(() => {
 		if (data && data.analytics_enabled && userData) {
 			performPageEvent(

src/components/Analytics.tsx

@@ -17,7 +17,11 @@ export function RepoBadge({ repositoryId, commit }: Props) {
 		{ enabled: !!repositoryId }
 	);
 
-	const repositoryMetadata = data?.metadata?.config;
+	if (!repositoryId || !commit) return <p>Not available</p>;
+	if (isPending) return <Skeleton className="h-6" />;
+	if (isError) return null;
+
+	const repositoryMetadata = data.metadata?.config;
 
 	const getRepositoryLink = () => {
 		let Icon: React.FunctionComponent<
@@ -31,11 +35,17 @@ export function RepoBadge({ repositoryId, commit }: Props) {
 		if (data?.body?.source?.attribute === "GitHubCodeRepository") {
 			Icon = Github;
 			name = `${repositoryMetadata?.owner}/${repositoryMetadata?.repository}`;
-			url = `https://www.github.com/${name}` + (commit ? `/tree/${commit}` : "");
+			const defaultHost = "github.com";
+			url =
+				`https://www.${(typeof repositoryMetadata?.host === "string" ? repositoryMetadata.host : defaultHost).replace(/\/$/, "")}/${name}` +
+				(commit ? `/tree/${commit}` : "");
 		} else if (data?.body?.source?.attribute === "GitLabCodeRepository") {
 			Icon = Gitlab;
 			name = `${repositoryMetadata?.group}/${repositoryMetadata?.project}`;
-			url = `https://www.gitlab.com/${name}` + (commit ? `/tree/${commit}` : "");
+			const defaultHost = "gitlab.com";
+			url =
+				`https://www.${(typeof repositoryMetadata?.host === "string" ? repositoryMetadata.host : defaultHost).replace(/\/$/, "")}/${name}` +
+				(commit ? `/tree/${commit}` : "");
 		}
 
 		return (
@@ -51,9 +61,7 @@ export function RepoBadge({ repositoryId, commit }: Props) {
 			</a>
 		);
 	};
-	if (!repositoryId || !commit) return <p>Not available</p>;
-	if (isPending) return <Skeleton className="h-6" />;
-	if (isError) return null;
+
 	return (
 		<div className="group/copybutton mr-1">
 			<Tag

src/components/repositories/RepoBadge.tsx

@@ -58,6 +58,7 @@ export function ComponentConfigurationForm({
 			useMaxHeight={useMaxHeight}
 			infoTile={
 				<InfoTile
+					type={flavor.data.body?.type || "orchestrator"}
 					name={flavor.data.name}
 					sdkDocsUrl={flavor.data.metadata?.sdk_docs_url ?? undefined}
 					logoUrl={flavor.data.body?.logo_url ?? undefined}

src/components/stack-components/create-component/configuration-form.tsx

@@ -5,6 +5,7 @@ import { StackComponentType } from "@/types/components";
 import { Flavor } from "@/types/flavors";
 import { flavorQueries } from "../../../data/flavors";
 import { useInfiniteQuery } from "@tanstack/react-query";
+import { ComponentIcon } from "../../ComponentIcon";
 
 type Props = {
 	type: StackComponentType;
@@ -24,6 +25,7 @@ export function SelectFlavorList({ type, setSelectedFlavor }: Props) {
 				page.items.map((flavor) => (
 					<li className="" key={flavor.id}>
 						<FlavorListItem
+							type={type}
 							onClick={() => setSelectedFlavor(flavor)}
 							id={flavor.id}
 							name={flavor.name}
@@ -40,25 +42,31 @@ type FlavorListItemItemProps = {
 	id: string;
 	name: string;
 	logoUrl?: string;
+	type: StackComponentType;
 	onClick?: () => void;
 };
 
-function FlavorListItem({ name, logoUrl, onClick }: FlavorListItemItemProps) {
+function FlavorListItem({ name, logoUrl, onClick, type }: FlavorListItemItemProps) {
 	return (
 		<Button
 			onClick={onClick}
 			intent="secondary"
 			emphasis="subtle"
 			className="h-auto w-full gap-2 px-5 py-3"
 		>
-			{logoUrl && (
+			{logoUrl ? (
 				<img
 					alt={`Logo of ${name}`}
 					width={36}
 					height={36}
 					className="aspect-square object-contain"
 					src={sanitizeUrl(logoUrl)}
 				/>
+			) : (
+				<ComponentIcon
+					className="aspect-square h-[36px] w-[36px] fill-primary-400 object-contain"
+					type={type}
+				/>
 			)}
 			<span className="min-w-0 truncate">{snakeCaseToTitleCase(name)}</span>
 		</Button>

src/components/stack-components/create-component/flavor-select.tsx

@@ -2,25 +2,33 @@ import FileText from "@/assets/icons/file-text.svg?react";
 import File from "@/assets/icons/file.svg?react";
 import TerminalSquare from "@/assets/icons/terminal-square.svg?react";
 import { sanitizeUrl } from "@/lib/url";
+import { StackComponentType } from "@/types/components";
 import { Box, Button } from "@zenml-io/react-component-library/components/server";
+import { ComponentIcon } from "../../ComponentIcon";
 
 type InfoTileProps = {
 	sdkDocsUrl?: string;
 	logoUrl?: string;
 	name: string;
+	type: StackComponentType;
 };
-export function InfoTile({ sdkDocsUrl, name, logoUrl }: InfoTileProps) {
+export function InfoTile({ sdkDocsUrl, name, logoUrl, type }: InfoTileProps) {
 	return (
 		<Box className="space-y-5 overflow-hidden pb-5">
 			<div className="flex h-[120px] w-full items-center justify-center bg-teal-25">
-				{!!logoUrl && (
+				{logoUrl ? (
 					<img
 						width={60}
 						height={60}
 						className="aspect-square object-contain"
 						src={sanitizeUrl(logoUrl)}
 						alt={`Logo of ${name}`}
 					/>
+				) : (
+					<ComponentIcon
+						className="aspect-square h-[60px] w-[60px] fill-primary-400 object-contain"
+						type={type}
+					/>
 				)}
 			</div>
 			<div className="space-y-2">

src/components/stack-components/create-component/info-tile.tsx

@@ -0,0 +1,8 @@
+declare module "reodotdev" {
+	interface ReoInstance {
+		init(options: { clientID: string }): void;
+		identify(identity: { username: string; type: string }): void;
+	}
+
+	export function loadReoScript(options: { clientID: string }): Promise<ReoInstance>;
+}