fix: dict and array params (#705)

Author: Cahllagerfeld

src/components/NestedCollapsible.tsx

@@ -114,7 +114,7 @@ function RenderArray({ title, value }: { title: string; value: unknown[] }) {
 	const simpleValues: unknown[] = value.filter(
 		(val) => (!isArray(val) && !isObject(val)) || val === null
 	);
-	const nestedValues: unknown[] = value.filter((val) => isArray(val) || isObject);
+	const nestedValues: unknown[] = value.filter((val) => isArray(val) || isObject(val));
 
 	return (
 		<>

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

@@ -1,20 +1,12 @@
 import { DockerImageCollapsible } from "@/app/runs/[id]/_Tabs/Configuration/DockerImageCollapsible";
 import { Codesnippet } from "@/components/CodeSnippet";
 import { CollapsibleCard } from "@/components/CollapsibleCard";
-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 {
-	Tooltip,
-	TooltipContent,
-	TooltipProvider,
-	TooltipTrigger
-} from "@zenml-io/react-component-library/components/client";
 import { useParams } from "react-router-dom";
 import { ErrorFallback } from "../../Error";
 import { NestedCollapsible } from "../../NestedCollapsible";
@@ -78,7 +70,11 @@ export function StepConfigTab({ stepId }: Props) {
 
 	return (
 		<div className="space-y-5">
-			<KeyValueCard data={data.metadata?.config?.parameters as AnyDict} title="Parameters" />
+			<NestedCollapsible
+				isInitialOpen
+				data={data.metadata?.config?.parameters as AnyDict}
+				title="Parameters"
+			/>
 			{dataImage ? <DockerImageCollapsible data={dataImage} /> : null}
 			<CodeSnippetCard id={data.id} />
 			<NestedCollapsible
@@ -91,40 +87,6 @@ export function StepConfigTab({ stepId }: Props) {
 	);
 }
 
-export function KeyValueCard({ data, title }: { title: string; data: AnyDict }) {
-	const hasData = Object.keys(data).length > 0;
-
-	if (!hasData)
-		return (
-			<CollapsibleCard initialOpen title={title}>
-				<p className="text-theme-text-secondary">No data available</p>
-			</CollapsibleCard>
-		);
-	return (
-		<CollapsibleCard initialOpen title={title}>
-			<dl className="grid grid-cols-1 gap-x-[10px] gap-y-2 md:grid-cols-3 md:gap-y-4">
-				{Object.entries(data).map(
-					([key, value]) =>
-						typeof value !== "object" && (
-							<KeyValue
-								key={key}
-								label={
-									<TooltipProvider>
-										<Tooltip>
-											<TooltipTrigger className="cursor-default truncate">{key}</TooltipTrigger>
-											<TooltipContent className="max-w-[480px]">{key}</TooltipContent>
-										</Tooltip>
-									</TooltipProvider>
-								}
-								value={<div>{renderAnyToString(value)}</div>}
-							/>
-						)
-				)}
-			</dl>
-		</CollapsibleCard>
-	);
-}
-
 function CodeSnippetCard({ id }: { id: string }) {
 	function returnConfigSchema(id: string) {
 		return `from zenml.client import Client