Merge pull request #698 from zenml-io/staging

Release

package.json

@@ -51,6 +51,7 @@
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.48.1",
+		"@tailwindcss/container-queries": "^0.1.1",
 		"@tailwindcss/forms": "^0.5.7",
 		"@tailwindcss/typography": "^0.5.10",
 		"@types/lodash.debounce": "^4.0.9",

src/app/artifacts/Fragments.tsx

@@ -1,22 +1,7 @@
 import { Codesnippet } from "@/components/CodeSnippet";
-import { InfoBox as InfoBoxPrimitive } from "@/components/Infobox";
 import { Box } from "@zenml-io/react-component-library";
 import { useSearchParams } from "react-router-dom";
 
-export function InfoBox() {
-	return (
-		<InfoBoxPrimitive>
-			<div className="flex w-full flex-wrap items-center gap-x-2 gap-y-0.5 text-text-md">
-				<p className="font-semibold">This is a ZenML Pro feature. </p>
-				<p>
-					Upgrade to ZenML Pro to access the Artifact Control Plane and interact with your artifacts
-					in the Dashboard.
-				</p>
-			</div>
-		</InfoBoxPrimitive>
-	);
-}
-
 export function CommandSection() {
 	const [searchParams] = useSearchParams();
 	const artifactName = searchParams.get("artifact");

src/app/artifacts/page.tsx

@@ -1,25 +1,56 @@
-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.webp";
+import { PageHeader } from "@/components/PageHeader";
+import { ProBadge } from "@/components/pro/ProBadge";
+import {
+	ProButtons,
+	ProFeatureList,
+	ProHeadline,
+	ProImage,
+	ProInfoBadge,
+	ProWrapper
+} from "@/components/pro/ProCta";
+import { CommandSection } from "./Fragments";
 
 export default function ModelsPage() {
 	return (
 		<div>
 			<PageHeader className="flex items-center gap-1">
 				<h1 className="text-display-xs font-semibold">Artifacts</h1>
-				<Badge color="purple" rounded size="sm">
-					<span className="font-semibold text-primary-500">Pro</span>
-				</Badge>
+				<ProBadge />
 			</PageHeader>
 			<div className="layout-container space-y-5 py-5">
-				<InfoBox />
-				<CTASection
-					feature="artifact"
-					image={{ src: ACP, alt: "Screenshot of the ZenML Pro Artifact Control plane" }}
-					features={artifactFeatures}
-				/>
+				<ProWrapper className="relative overflow-y-hidden">
+					<div className="w-full max-w-none space-y-5 lg:max-w-[900px]">
+						<ProHeadline>Advanced Artifact Management Features with ZenML Pro</ProHeadline>
+						<ProInfoBadge />
+						<ProFeatureList
+							features={[
+								{
+									title: "Artifact Control Plane Dashboard",
+									subtitle: "Artifact management and monitoring"
+								},
+								{
+									title: "Enterprise Security",
+									subtitle: "Social SSO, RBAC, and User Management"
+								},
+								{
+									title: "Managed ZenML Server",
+									subtitle: "On your VPC or hosted on our infrastructure"
+								},
+								{
+									title: "Advanced MLOps",
+									subtitle: "CI/CD/CT, Model Control Plane and more"
+								}
+							]}
+						/>
+						<ProButtons />
+					</div>
+					<ProImage
+						className="flex-1 translate-x-[10%] translate-y-[20%] scale-110"
+						src={ACP}
+						alt="Screenshot of the ZenML Pro Artifact Control Plane"
+					/>
+				</ProWrapper>
 				<CommandSection />
 			</div>
 		</div>

src/app/components/[componentId]/page.tsx

@@ -0,0 +1,26 @@
+import { useParams } from "react-router-dom";
+import { StackComponentsDetailHeader } from "../../../components/stack-components/component-detail/Header";
+import { StackComponentTabs } from "@/components/stack-components/component-detail/Tabs";
+import { StackList } from "../../stacks/StackList";
+import { RunsBody } from "../../pipelines/RunsTab/RunsBody";
+import { RunsSelectorProvider } from "../../pipelines/RunsTab/RunsSelectorContext";
+
+export default function ComponentDetailPage() {
+	const { componentId } = useParams() as { componentId: string };
+
+	return (
+		<div className="@container">
+			<StackComponentsDetailHeader isPanel={false} componentId={componentId} />
+			<StackComponentTabs
+				isPanel={false}
+				stacksTabContent={<StackList fixedQueryParams={{ component_id: componentId }} />}
+				runsTabContent={
+					<RunsSelectorProvider>
+						<RunsBody fixedQueryParams={{ stack_component: componentId }} />
+					</RunsSelectorProvider>
+				}
+				componentId={componentId}
+			/>
+		</div>
+	);
+}

src/app/components/columns.tsx

@@ -1,8 +1,8 @@
 import { CopyButton } from "@/components/CopyButton";
 import { DisplayDate } from "@/components/DisplayDate";
 import { InlineAvatar } from "@/components/InlineAvatar";
+import { ComponentSheet } from "@/components/stack-components/component-sheet";
 import { ComponentBadge } from "@/components/stack-components/ComponentBadge";
-import { ComponentFallbackDialog } from "@/components/stack-components/ComponentFallbackDialog";
 import { snakeCaseToTitleCase } from "@/lib/strings";
 import { sanitizeUrl } from "@/lib/url";
 import { getUsername } from "@/lib/user";
@@ -29,18 +29,19 @@ export function getComponentList(): ColumnDef<StackComponent>[] {
 						/>
 						<div>
 							<div className="flex items-center gap-1">
-								<ComponentFallbackDialog
-									name={name}
-									type={row.original.body?.type || "orchestrator"}
-								>
+								<ComponentSheet componentId={id}>
 									<button>
 										<h2 className="text-text-md font-semibold">{name}</h2>
 									</button>
-								</ComponentFallbackDialog>
+								</ComponentSheet>
 								<CopyButton copyText={name} />
 							</div>
 							<div className="flex items-center gap-1">
-								<p className="text-text-xs text-theme-text-secondary">{id.split("-")[0]}</p>
+								<ComponentSheet componentId={id}>
+									<button className="text-text-xs text-theme-text-secondary">
+										{id.split("-")[0]}
+									</button>
+								</ComponentSheet>
 								<CopyButton copyText={id} />
 							</div>
 						</div>
@@ -60,9 +61,9 @@ export function getComponentList(): ColumnDef<StackComponent>[] {
 		{
 			id: "flavor",
 			header: "Flavor",
-			accessorFn: (row) => row.body?.flavor,
+			accessorFn: (row) => row.body?.flavor_name,
 			cell: ({ row }) => {
-				const flavor = row.original.body?.flavor;
+				const flavor = row.original.body?.flavor_name;
 				return (
 					<Tag
 						rounded={false}

src/app/models/Fragments.tsx

@@ -1,22 +1,7 @@
 import { Codesnippet } from "@/components/CodeSnippet";
-import { InfoBox as InfoBoxPrimitive } from "@/components/Infobox";
 import { Box } from "@zenml-io/react-component-library";
 import { useSearchParams } from "react-router-dom";
 
-export function InfoBox() {
-	return (
-		<InfoBoxPrimitive>
-			<div className="flex w-full flex-wrap items-center gap-x-2 gap-y-0.5 text-text-md">
-				<p className="font-semibold">This is a ZenML Pro feature. </p>
-				<p>
-					Upgrade to ZenML Pro to access the Model Control Plane and interact with your models in
-					the Dashboard.
-				</p>
-			</div>
-		</InfoBoxPrimitive>
-	);
-}
-
 export function CommandSection() {
 	const [searchParams] = useSearchParams();
 	const modelName = searchParams.get("model");

src/app/models/page.tsx

@@ -1,10 +1,17 @@
-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.webp";
+import { PageHeader } from "@/components/PageHeader";
+import { ProBadge } from "@/components/pro/ProBadge";
+import {
+	ProButtons,
+	ProFeatureList,
+	ProHeadline,
+	ProImage,
+	ProInfoBadge,
+	ProWrapper
+} from "@/components/pro/ProCta";
 import { useTourContext } from "@/components/tour/TourContext";
 import { useEffect } from "react";
+import { CommandSection } from "./Fragments";
 
 export default function ModelsPage() {
 	const {
@@ -22,17 +29,41 @@ export default function ModelsPage() {
 		<div>
 			<PageHeader className="flex items-center gap-1">
 				<h1 className="text-display-xs font-semibold">Models</h1>
-				<Badge color="purple" rounded size="sm">
-					<span className="font-semibold text-primary-500">Pro</span>
-				</Badge>
+				<ProBadge />
 			</PageHeader>
 			<div className="layout-container space-y-5 py-5">
-				<InfoBox />
-				<CTASection
-					feature="model"
-					image={{ src: MCP, alt: "Screenshot of the ZenML Pro Model Control plane" }}
-					features={modelFeatures}
-				/>
+				<ProWrapper className="relative overflow-y-hidden">
+					<div className="w-full max-w-none space-y-5 lg:max-w-[900px]">
+						<ProHeadline>Access Advanced Model Management Features with ZenML Pro</ProHeadline>
+						<ProInfoBadge />
+						<ProFeatureList
+							features={[
+								{
+									title: "Model Control Plane Dashboard",
+									subtitle: "Centralized model management and monitoring"
+								},
+								{
+									title: "Enterprise Security",
+									subtitle: "Social SSO, RBAC, and User Management"
+								},
+								{
+									title: "Managed ZenML Server",
+									subtitle: "On your VPC or hosted on our infrastructure"
+								},
+								{
+									title: "Advanced MLOps",
+									subtitle: "CI/CD/CT, Artifact Control Plane and more"
+								}
+							]}
+						/>
+						<ProButtons />
+					</div>
+					<ProImage
+						className="flex-1 translate-x-[10%] translate-y-[20%] scale-110"
+						src={MCP}
+						alt="Screenshot of the ZenML Pro Artifact Control Plane"
+					/>
+				</ProWrapper>
 				<CommandSection />
 			</div>
 		</div>

src/app/onboarding/Setup/Items.tsx

@@ -122,7 +122,7 @@ export function CreateNewStack({ completed, active, hasDownstreamStep }: Onboard
 					<Button className="w-fit" size="md" asChild>
 						<Link className="flex" to={link}>
 							<Plus className="h-5 w-5 shrink-0 fill-white" />
-							Register a stack
+							Register a remote stack
 						</Link>
 					</Button>
 				</div>

src/app/page.tsx

@@ -2,7 +2,6 @@ import CloudSquares from "@/assets/illustrations/cloud-squares.svg";
 import { Badge, Box, Button } from "@zenml-io/react-component-library";
 import { Codesnippet } from "../components/CodeSnippet";
 import External from "@/assets/icons/link-external.svg?react";
-import Codespaces from "@/assets/images/codespaces.gif";
 import { OverviewHeader } from "./Header";
 import { Link } from "react-router-dom";
 import { routes } from "@/router/routes";
@@ -59,30 +58,25 @@ function OverviewContent() {
 
 function VsCodeBox() {
 	return (
-		<Box className="flex flex-col-reverse items-center overflow-hidden md:max-h-[200px] md:flex-row">
-			<div className="w-full space-y-3 px-7 py-5 xl:w-4/5">
+		<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!
-					<br />
-					You can run our quickstart guide in a pre-configured environment.
+					Get started quickly with ZenML using GitHub Codespaces! You can run our quickstart guide
+					in a pre-configured environment.
 				</p>
-				<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" />
-					</a>
-				</Button>
 			</div>
-			<img
-				className="object-contain"
-				src={Codespaces}
-				alt="Gif explaining how to setup codespaces"
-			/>
+
+			<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/pipelines/RunsTab/RunsBody.tsx

@@ -1,20 +1,26 @@
 import Refresh from "@/assets/icons/refresh.svg?react";
 import Pagination from "@/components/Pagination";
 import { SearchField } from "@/components/SearchField";
+import { useAllPipelineRuns } from "@/data/pipeline-runs/all-pipeline-runs-query";
+import { PipelineRunOvervieweParams } from "@/types/pipeline-runs";
 import { Button, DataTable, Skeleton } from "@zenml-io/react-component-library";
-import { useAllPipelineRuns } from "../../../data/pipeline-runs/all-pipeline-runs-query";
 import { RunsButtonGroup } from "./ButtonGroup";
 import { runsColumns } from "./columns";
 import { useRunsSelectorContext } from "./RunsSelectorContext";
 import { useRunsOverviewSearchParams } from "./service";
 
-export function RunsBody() {
+type Props = {
+	fixedQueryParams?: PipelineRunOvervieweParams;
+};
+
+export function RunsBody({ fixedQueryParams = {} }: Props) {
 	const { selectedRuns } = useRunsSelectorContext();
 	const queryParams = useRunsOverviewSearchParams();
 	const { data, refetch } = useAllPipelineRuns({
 		params: {
 			...queryParams,
-			sort_by: "desc:updated"
+			sort_by: "desc:updated",
+			...fixedQueryParams
 		}
 	});