chore: Small Adjustments (#728)

Author: Cahllagerfeld

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

@@ -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/onboarding/Setup/Items.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/page.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/components/repositories/RepoBadge.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/stack-components/create-component/configuration-form.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/flavor-select.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/info-tile.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">