fix: add check for orchestrator image (#599)

Author: Cahllagerfeld

src/app/runs/[id]/_Tabs/Configuration/DockerImageCollapsible.tsx

@@ -12,9 +12,10 @@ import Redirect from "@/assets/icons/redirect.svg?react";
 import { CopyButton } from "@/components/CopyButton";
 import { Codesnippet } from "@/components/CodeSnippet";
 import { KeyValue } from "@/components/KeyValue";
+import { BuildItem } from "@/types/pipeline-builds";
 
 type Props = {
-	data: any;
+	data: BuildItem;
 };
 
 export function DockerImageCollapsible({ data }: Props) {
@@ -70,10 +71,18 @@ export function DockerImageCollapsible({ data }: Props) {
 						}
 					/>
 				</dl>
-				<p className="mb-2 mt-5 text-theme-text-secondary">Dockerfile</p>
-				<Codesnippet fullWidth highlightCode wrap code={data.dockerfile} />
-				<p className="mb-2 mt-5 text-theme-text-secondary">Requirements</p>
-				<Codesnippet fullWidth highlightCode wrap code={data.requirements} />
+				{data.dockerfile && (
+					<>
+						<p className="mb-2 mt-5 text-theme-text-secondary">Dockerfile</p>
+						<Codesnippet fullWidth highlightCode wrap code={data.dockerfile} />
+					</>
+				)}
+				{data.requirements && (
+					<>
+						<p className="mb-2 mt-5 text-theme-text-secondary">Requirements</p>
+						<Codesnippet fullWidth highlightCode wrap code={data.requirements} />
+					</>
+				)}
 			</CollapsibleContent>
 		</CollapsiblePanel>
 	);

src/app/runs/[id]/_Tabs/Configuration/index.tsx

@@ -1,11 +1,12 @@
-import { CodeCollapsible } from "./CodeCollapsible";
-import { EnvironmentCollapsible } from "./EnvironmentCollapsible";
-import { useParams } from "react-router-dom";
-import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
-import { Skeleton } from "@zenml-io/react-component-library";
 import { NestedCollapsible } from "@/components/NestedCollapsible";
 import { usePipelineBuild } from "@/data/pipeline-builds/all-pipeline-builds-query";
+import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
+import { BuildItem, BuildItemMap } from "@/types/pipeline-builds";
+import { Skeleton } from "@zenml-io/react-component-library";
+import { useParams } from "react-router-dom";
+import { CodeCollapsible } from "./CodeCollapsible";
 import { DockerImageCollapsible } from "./DockerImageCollapsible";
+import { EnvironmentCollapsible } from "./EnvironmentCollapsible";
 
 export function ConfigurationTab() {
 	const { runId } = useParams() as { runId: string };
@@ -31,7 +32,9 @@ export function ConfigurationTab() {
 	return (
 		<div className="grid grid-cols-1 gap-5">
 			<NestedCollapsible title="Parameters" data={data.metadata?.config.parameters} />
-			{buildData && <DockerImageCollapsible data={buildData?.metadata?.images?.orchestrator} />}
+			{(buildData?.metadata?.images as BuildItemMap)?.orchestrator && (
+				<DockerImageCollapsible data={buildData?.metadata?.images?.orchestrator as BuildItem} />
+			)}
 			<CodeCollapsible runId={runId} />
 			<EnvironmentCollapsible run={data} />
 			<NestedCollapsible title="Extra" data={data.metadata?.config.extra} />

src/components/steps/step-sheet/ConfigurationTab.tsx

@@ -1,15 +1,16 @@
+import { DockerImageCollapsible } from "@/app/runs/[id]/_Tabs/Configuration/DockerImageCollapsible";
+import { Codesnippet } from "@/components/CodeSnippet";
 import { CollapsibleCard } from "@/components/CollapsibleCard";
-import { ErrorFallback } from "../../Error";
+import { KeyValue } from "@/components/KeyValue";
+import { usePipelineBuild } from "@/data/pipeline-builds/all-pipeline-builds-query";
+import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
 import { useStepDetail } from "@/data/steps/step-detail-query";
+import { renderAnyToString } from "@/lib/strings";
 import { AnyDict } from "@/types/common";
+import { BuildItemMap } from "@/types/pipeline-builds";
 import { Skeleton } from "@zenml-io/react-component-library";
-import { KeyValue } from "@/components/KeyValue";
-import { Codesnippet } from "@/components/CodeSnippet";
-import { renderAnyToString } from "@/lib/strings";
-import { DockerImageCollapsible } from "@/app/runs/[id]/_Tabs/Configuration/DockerImageCollapsible";
-import { usePipelineBuild } from "@/data/pipeline-builds/all-pipeline-builds-query";
 import { useParams } from "react-router-dom";
-import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
+import { ErrorFallback } from "../../Error";
 
 type Props = {
 	stepId: string;
@@ -55,7 +56,7 @@ export function StepConfigTab({ stepId }: Props) {
 
 	const indexImage = findIndexImage();
 
-	const dataImage = indexImage && buildData?.metadata?.images?.[indexImage];
+	const dataImage = indexImage && (buildData?.metadata?.images as BuildItemMap)?.[indexImage];
 
 	if (isError) {
 		return <ErrorFallback err={error} />;

src/types/pipeline-builds.ts

@@ -1,3 +1,5 @@
 import { components } from "./core";
 
 export type PipelineBuildResponse = components["schemas"]["PipelineBuildResponse"];
+export type BuildItem = components["schemas"]["BuildItem"];
+export type BuildItemMap = { [key: string]: BuildItem };