Merge pull request #612 from zenml-io/future

Release

.github/workflows/check-links.yml

@@ -0,0 +1,33 @@
+name: Check Links
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - main
+      - future
+  pull_request:
+    types: [opened, synchronize, ready_for_review]
+    branches:
+      - main
+      - future
+concurrency:
+  # New commit on branch cancels running workflows of the same branch
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  check:
+    if: github.event.pull_request.draft == false
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+
+      - name: Check Links
+        run: bash scripts/check-links.sh

.gitignore

@@ -28,4 +28,6 @@ dist-ssr
 /playwright/.cache/
 
 .env*
-!.env.example
+!.env.example
+
+urls.txt

legacy/src/constants/constantCommands.ts

@@ -74,7 +74,7 @@ export const constantCommandsToCreatePipeline = {
 export const constantCommandsToCreateRuns = {
   title: 'Runs Cheatsheet',
   documentation:
-    'https://docs.zenml.io/user-guide/starter-guide/fetch-runs-after-execution',
+    'https://docs.zenml.io/how-to/build-pipelines/fetching-pipelines',
   body: [
     {
       text: 'Create a runs',

scripts/check-links.js

@@ -0,0 +1,50 @@
+import fs from "fs";
+import { exit } from "process";
+
+const allowedStatuses = [401, 403, 405];
+
+const ignoreList = [];
+
+const headers = new Headers({
+	"User-Agent": "ZenMLURLBot/1.0 (+http://zenml.io/bot)"
+});
+
+const noIndexRegex = /content="noindex"/i;
+const docsRegex = /docs.zenml.io/i;
+
+async function checkLink() {
+	let hasFailed = false;
+
+	const links = fs.readFileSync("urls.txt", "utf-8").split("\n").filter(Boolean);
+	for (const link of links) {
+		if (ignoreList.includes(link)) {
+			console.log("\x1b[33m", `Ignoring ${link}`);
+			continue;
+		}
+		try {
+			const response = await fetch(link, { method: "GET", headers });
+			const payload = await response.text();
+			const hasNoIndex = noIndexRegex.test(payload);
+
+			if (hasNoIndex && docsRegex.test(link)) {
+				console.log("\x1b[31m", `[${response.status}] ${link}`);
+				hasFailed = true;
+				continue;
+			}
+
+			if (response.ok || allowedStatuses.includes(response.status)) {
+				console.log("\x1b[32m", `[${response.status}] ${link}`);
+			} else {
+				console.log("\x1b[31m", `[${response.status}] ${link}`);
+				hasFailed = true;
+			}
+		} catch (error) {
+			console.error("\x1b[31m", `Error fetching ${link}: ${error}`);
+			hasFailed = true;
+		}
+	}
+
+	exit(hasFailed ? 1 : 0);
+}
+
+checkLink();

scripts/check-links.sh

@@ -0,0 +1,22 @@
+#!/bin/bash
+
+# Define the file patterns to search for URLs
+file_patterns=("*.json" "*.tsx" "*.ts")
+
+# Define the output file for the URLs
+output_file="urls.txt"
+
+# Find unique URLs matching the specified pattern in the specified file types
+find_unique_urls() {
+  include_patterns=""
+  for pattern in "${file_patterns[@]}"; do
+    include_patterns+="--include=${pattern} "
+  done
+  grep -E -o 'https?:\/\/([a-zA-Z0-9.-]*\.)?zenml\.io[^"'\''[:space:]]*' -r --no-filename $include_patterns "$@" | sort -u
+}
+
+# Find unique URLs in the specified file patterns within the "src" directory
+find_unique_urls src legacy | sort -u > "$output_file"
+
+# Run the link checker script
+node scripts/check-links.js

src/app/pipelines/[namespace]/columns.tsx

@@ -32,7 +32,7 @@ export function getPipelineDetailColumns(): ColumnDef<PipelineRun>[] {
 
 				return (
 					<div className="group/copybutton flex items-center gap-2">
-						<RunIcon className={`h-5 w-5 ${getExecutionStatusColor(status)}`} />
+						<RunIcon className={`h-5 w-5 shrink-0 ${getExecutionStatusColor(status)}`} />
 						<div>
 							<Link to={routes.runs.detail(id)} className="flex items-center gap-1">
 								<h2 className="text-text-md font-semibold">{name}</h2>

src/app/survey/SlackStep.tsx

@@ -0,0 +1,85 @@
+import Adam from "@/assets/images/portraits/adam.webp";
+import Alex from "@/assets/images/portraits/alex.webp";
+import Baris from "@/assets/images/portraits/baris.webp";
+import Hamza from "@/assets/images/portraits/hamza.webp";
+import Stefan from "@/assets/images/portraits/stefan.webp";
+import { useSurveyContext } from "@/components/survey/SurveyContext";
+import { Avatar, AvatarFallback, AvatarImage, Button } from "@zenml-io/react-component-library";
+
+export function SlackStep() {
+	const { setSurveyStep } = useSurveyContext();
+
+	function joinAndContinue() {
+		window.open("https://zenml.io/slack", "_blank");
+		setSurveyStep((prev) => prev + 1);
+	}
+
+	return (
+		<div className="max-w-[540px] space-y-5">
+			<div>
+				<h1 className="text-display-xs font-semibold">Join The ZenML Slack Community</h1>
+				<p className="text-theme-text-secondary">
+					Connect to our growing community and meet fellow ZenML enthusiasts, get support, and share
+					your insights. Let's grow together!
+				</p>
+			</div>
+			<AvatarStack />
+			<Button
+				onClick={() => joinAndContinue()}
+				className="h-auto min-h-8 w-full justify-center py-1"
+				intent="primary"
+				emphasis="bold"
+				size="lg"
+			>
+				Join the ZenML Community and Continue
+			</Button>
+			<Button
+				intent="secondary"
+				emphasis="minimal"
+				onClick={() => setSurveyStep((prev) => prev + 1)}
+				className="mx-auto justify-center text-neutral-500"
+				size="sm"
+			>
+				Skip this step
+			</Button>
+		</div>
+	);
+}
+
+const avatarList = [
+	{
+		name: "Adam",
+		image: Adam
+	},
+	{
+		name: "Hamza",
+		image: Hamza
+	},
+	{
+		name: "Alex",
+		image: Alex
+	},
+	{
+		name: "Stefan",
+		image: Stefan
+	},
+	{ name: "Baris", image: Baris }
+];
+
+function AvatarStack() {
+	return (
+		<div className="space-y-1">
+			<div className="flex items-center justify-center -space-x-[7px]">
+				{avatarList.map((avatar) => (
+					<Avatar key={avatar.name} size="lg" type="rounded">
+						<AvatarImage alt={`Portrait of ${avatar.name}`} src={avatar.image} />
+						<AvatarFallback size="lg">{avatar.name[0]}</AvatarFallback>
+					</Avatar>
+				))}
+			</div>
+			<p className="text-center text-text-xs text-theme-text-tertiary">
+				Adam Probst, Hamza Tahir, and +1,800 others have already joined
+			</p>
+		</div>
+	);
+}

src/app/survey/Wizard.tsx

@@ -1,12 +1,13 @@
-import { AccountDetailsStep } from "./AccountDetailsStep";
-import { PrimaryUseStep } from "./PrimaryUseStep";
-import { AwarenessStep } from "./AwarenessStep";
 import StepDisplay from "@/components/survey/StepDisplay";
 import { useSurveyContext } from "@/components/survey/SurveyContext";
 import { useCurrentUser } from "@/data/users/current-user-query";
 import { Skeleton } from "@zenml-io/react-component-library";
-import { SurveyUserProvider } from "./SurveyUserContext";
 import { SuccessStep } from "../../components/survey/SuccessStep";
+import { AccountDetailsStep } from "./AccountDetailsStep";
+import { AwarenessStep } from "./AwarenessStep";
+import { PrimaryUseStep } from "./PrimaryUseStep";
+import { SlackStep } from "./SlackStep";
+import { SurveyUserProvider } from "./SurveyUserContext";
 
 export function SurveyWizard() {
 	const { data, isPending, isError } = useCurrentUser({ throwOnError: true });
@@ -18,11 +19,12 @@ export function SurveyWizard() {
 	return (
 		<>
 			<SurveyUserProvider>
-				<StepDisplay stepAmount={3} />
+				<StepDisplay stepAmount={4} />
 				{surveyStep === 1 && <AccountDetailsStep user={data} />}
 				{surveyStep === 2 && <PrimaryUseStep user={data} />}
 				{surveyStep === 3 && <AwarenessStep />}
-				{surveyStep === 4 && (
+				{surveyStep === 4 && <SlackStep />}
+				{surveyStep === 5 && (
 					<SuccessStep
 						subHeader="Your ZenML account is now updated"
 						displayBody={false}

src/components/CodeSnippet.tsx

@@ -46,7 +46,7 @@ export function Codesnippet({
 			<pre
 				className={cn(
 					`${
-						wrap ? "whitespace-normal" : "whitespace-nowrap"
+						wrap ? "" : "whitespace-nowrap"
 					} overflow-auto text-left font-mono text-theme-text-primary`,
 					codeClasses
 				)}

src/components/ExecutionStatus.tsx

@@ -62,7 +62,7 @@ export function ExecutionStatusIcon({
 	className?: string;
 }) {
 	if (!status) return null;
-	const classNames = cn(`h-4 w-4`, getExecutionStatusColor(status), className);
+	const classNames = cn(`h-4 shrink-0 w-4`, getExecutionStatusColor(status), className);
 	switch (status) {
 		case "completed":
 			return <CheckCircle className={classNames} />;

src/components/artifacts/artifact-node-sheet/DetailCards.tsx

@@ -175,7 +175,9 @@ export function DataCard({ artifactVersionId }: Props) {
 						>
 							<TooltipProvider>
 								<Tooltip>
-									<TooltipTrigger>{artifactVersionData.body?.data_type.attribute}</TooltipTrigger>
+									<TooltipTrigger className="cursor-auto">
+										{artifactVersionData.body?.data_type.attribute}
+									</TooltipTrigger>
 									<TooltipContent>
 										{artifactVersionData.body?.data_type.module}.
 										{artifactVersionData.body?.data_type.attribute}{" "}

src/components/survey/form-schemas.ts

@@ -25,15 +25,15 @@ export type PrimaryUseFormType = z.infer<typeof primaryUseFormSchema>;
 
 export const AwarenessFormSchema = z
 	.object({
-		channels: z.string().array().min(1),
+		channels: z.string().array(),
 		other: z.boolean(),
 		otherVal: z.string().optional()
 	})
 	.refine((data) => {
 		if (data.other) {
 			return data.otherVal !== "";
 		}
-		return true;
+		return data.channels.length > 0;
 	});
 
 export type AwarenessFormType = z.infer<typeof AwarenessFormSchema>;