fix: various fixes (#715)

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/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/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/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;