Merge pull request #717 from zenml-io/staging

Release

Author: Cahllagerfeld

src/app/onboarding/Setup/Items.tsx

@@ -18,7 +18,7 @@ export function ConnectZenMLStep({ completed, hasDownstreamStep, active }: Onboa
 			active={active}
 			hasDownstream={hasDownstreamStep}
 			completed={completed}
-			title="Install and Connect ZenML (5 min)"
+			title="Install and log in to ZenML (5 min)"
 		>
 			<div className="flex flex-col gap-5">
 				<div>
@@ -28,7 +28,7 @@ export function ConnectZenMLStep({ completed, hasDownstreamStep, active }: Onboa
 					/>
 				</div>
 				<div>
-					<p className="mb-1 text-text-sm text-theme-text-secondary">Login to your ZenML Server</p>
+					<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" />

src/app/settings/service-accounts/[service-account-id]/Success.tsx

@@ -11,7 +11,7 @@ type Props = {
 
 export function ApiKeySuccess({ value }: Props) {
 	return (
-		<div className="space-y-3 overflow-x-hidden px-7 py-5 text-text-md text-theme-text-primary ">
+		<div className="space-y-3 overflow-x-hidden px-7 py-5 text-text-md text-theme-text-primary">
 			<div className="space-y-0.5">
 				<p className="text-text-md font-semibold text-theme-text-primary">
 					Here is your new API Key
@@ -34,7 +34,7 @@ export function ApiKeySuccess({ value }: Props) {
 					</a>
 				</div>
 				<p className="text-theme-text-secondary">
-					To login to the ZenML server using the generated key, you can run the following CLI
+					To log in to the ZenML server using the generated key, you can run the following CLI
 					command and enter the API key when prompted:
 				</p>
 				<Codesnippet highlightCode wrap code={`zenml login --api-key ${window.location.origin}`} />

src/app/stacks/columns.tsx

@@ -28,6 +28,7 @@ export function useStackColumns(): ColumnDef<Stack>[] {
 								<StackSheet stackName={name} stackId={id}>
 									<h2 className="text-text-md font-semibold">{name}</h2>
 								</StackSheet>
+								<CopyButton copyText={name}></CopyButton>
 							</div>
 							<div className="flex items-center gap-1">
 								<p className="text-text-xs text-theme-text-secondary">{id.split("-")[0]}</p>

src/app/stacks/create/new-infrastructure/Providers/AWS.tsx

@@ -89,6 +89,19 @@ export function AWSComponents({
 					}}
 				/>
 			</div>
+			<div className="py-3 pl-9 pr-5">
+				<ComponentListItem
+					title={components?.imageBuilder?.name || "AWS Image Builder"}
+					subtitle={components?.imageBuilder?.id || "Build and manage container images"}
+					badge={<ComponentBadge type="image_builder">Image Builder</ComponentBadge>}
+					isLoading={isLoading}
+					isSuccess={isSuccess}
+					img={{
+						src: "https://public-flavor-logos.s3.eu-central-1.amazonaws.com/image_builder/aws.png",
+						alt: "AWS Image Builder logo"
+					}}
+				/>
+			</div>
 		</div>
 	);
 }

src/components/SearchField.tsx

@@ -1,3 +1,4 @@
+import Search from "@/assets/icons/search.svg?react";
 import { sanitizeSearchValue } from "@/lib/search";
 import { objectToSearchParams } from "@/lib/url";
 import { Input } from "@zenml-io/react-component-library";
@@ -36,7 +37,7 @@ export const SearchField = forwardRef<
 	}, [debouncedSearch]);
 
 	function updateSearchQuery(value: string) {
-		if (!!inMemoryHandler) {
+		if (inMemoryHandler) {
 			inMemoryHandler(value);
 			return;
 		}
@@ -64,14 +65,20 @@ export const SearchField = forwardRef<
 		debouncedSearch(value);
 	}
 	return (
-		<Input
-			{...rest}
-			ref={ref}
-			value={searchQuery}
-			onChange={searchHandler}
-			placeholder="Search..."
-			inputSize="md"
-		/>
+		<div className="relative">
+			<Input
+				className="pl-[36px]"
+				{...rest}
+				ref={ref}
+				value={searchQuery}
+				onChange={searchHandler}
+				placeholder="Search..."
+				inputSize="md"
+			/>
+			<div className="absolute inset-y-0 left-0 flex items-center pl-1">
+				<Search className="size-4 fill-neutral-400" />
+			</div>
+		</div>
 	);
 });
 

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

@@ -183,6 +183,7 @@ export function DataCard({ artifactVersionId }: Props) {
 		...componentQueries.componentDetail(artifactStoreId!),
 		enabled: !!artifactStoreId
 	});
+	const artifactStoreHref: string = routes.components.detail(artifactStoreId || "");
 
 	if (isArtifactVersionError) {
 		return <ErrorFallback err={artifactVersionError} />;
@@ -208,14 +209,16 @@ export function DataCard({ artifactVersionId }: Props) {
 						value={
 							<>
 								{isStoreSuccess ? (
-									<Tag
-										emphasis="subtle"
-										rounded={false}
-										color="grey"
-										className="text-theme-text-primary"
-									>
-										{storeData?.name}
-									</Tag>
+									<Link target="_blank" rel="noopener noreferrer" to={artifactStoreHref}>
+										<Tag
+											emphasis="subtle"
+											rounded={false}
+											color="grey"
+											className="text-theme-text-primary"
+										>
+											{storeData?.name}
+										</Tag>
+									</Link>
 								) : (
 									<Skeleton className="h-6 w-12" />
 								)}

src/components/dag-visualizer/layout/helper.ts

@@ -68,6 +68,18 @@ export function mergeRealAndPlacehodlerData({
 		const duplicateRealArtifacts = finalNodes.filter((node) => node.id === realArtifact.id);
 		if (duplicateRealArtifacts.length === 0) {
 			finalNodes.push(realArtifact);
+		} else {
+			if (realArtifact.data.artifactType === "output") {
+				for (const node of duplicateRealArtifacts) {
+					// remove node from finalNodes based on id
+					const index = finalNodes.findIndex((finalNode) => finalNode.id === node.id);
+					if (index !== -1) {
+						finalNodes.splice(index, 1);
+					}
+				}
+
+				finalNodes.push(realArtifact);
+			}
 		}
 	});
 

src/components/dag-visualizer/layout/real-data.ts

@@ -36,7 +36,7 @@ function extractNodes(stepConfig: StepDict, substitutions: Record<string, Record
 					placeholderId,
 					type: "artifact",
 					substitutions: substitutions[stepName] || {},
-					data: { ...version, name: outputName }
+					data: { ...version, name: outputName, artifactType: "output" }
 				});
 			});
 		});
@@ -49,7 +49,7 @@ function extractNodes(stepConfig: StepDict, substitutions: Record<string, Record
 				id: artifactVersion.id,
 				placeholderId,
 				type: "artifact",
-				data: { ...artifactVersion, name: inputName }
+				data: { ...artifactVersion, name: inputName, artifactType: "input" }
 			});
 		});
 	});

src/components/stacks/Sheet/index.tsx

@@ -164,7 +164,7 @@ function StackSetCommand({ name }: StackSetCommandProps) {
 
 	return (
 		<section className="px-5 pt-5">
-			<CollapsibleCard title={<span className="text-text-lg">Set this stack</span>}>
+			<CollapsibleCard title={<span className="text-text-lg">Set this stack</span>} initialOpen>
 				<ul className="space-y-5">
 					<li className="space-y-2">
 						<div className="flex items-center gap-2">

src/types/pipeline-runs.ts

@@ -11,7 +11,7 @@ export type PipelineRunOvervieweParams = NonNullable<
 >;
 export type PipelineRunPage = components["schemas"]["Page_PipelineRunResponse_"];
 
-type ArtifactNodeDetails = ArtifactVersion & { name: string };
+type ArtifactNodeDetails = ArtifactVersion & { name: string; artifactType: "input" | "output" };
 export type ArtifactNode = {
 	id: string;
 	placeholderId: string;