fix: smaller fixes (#602)

* feat: sort dicts alphabetically

* feat: allow nesting in component settings

Author: Cahllagerfeld

src/app/pipelines/columns.tsx

@@ -4,7 +4,7 @@ import { ExecutionStatusIcon, getExecutionStatusColor } from "@/components/Execu
 import { ExecutionStatus } from "@/types/pipeline-runs";
 import { PipelineNamespace, PipelineNamespaceBody } from "@/types/pipelines";
 import { ColumnDef } from "@tanstack/react-table";
-import { Tag } from "@zenml-io/react-component-library";
+import { Tag, TagProps } from "@zenml-io/react-component-library";
 import { Link } from "react-router-dom";
 import { routes } from "@/router/routes";
 import { CopyButton } from "@/components/CopyButton";
@@ -45,17 +45,19 @@ export function getPipelineColumns(): ColumnDef<PipelineNamespace>[] {
 			}),
 			cell: ({ getValue }) => {
 				const { runId, status } = getValue<{
-					runId: string;
-					status: PipelineNamespaceBody["latest_run_status"];
+					runId?: string;
+					status?: PipelineNamespaceBody["latest_run_status"];
 				}>();
 
+				if (!runId || !status) return <div>No run</div>;
+
 				return (
 					<Link to={routes.runs.detail(runId)}>
 						<Tag
 							emphasis="subtle"
 							rounded={false}
 							className="inline-flex items-center gap-0.5"
-							color={"green"}
+							color={getTagColor(status)}
 						>
 							<RunIcon className={`h-3 w-3 ${getRunIconColor(status)}`} />
 							{runId?.split("-")[0]}
@@ -82,3 +84,19 @@ function getRunIconColor(status?: ExecutionStatus) {
 			return "fill-theme-text-brand";
 	}
 }
+
+function getTagColor(status?: ExecutionStatus): TagProps["color"] {
+	if (!status) return "purple";
+	switch (status) {
+		case "running":
+			return "orange";
+		case "cached":
+			return "grey";
+		case "completed":
+			return "green";
+		case "failed":
+			return "red";
+		case "initializing":
+			return "purple";
+	}
+}

src/app/runs/[id]/_Tabs/Overview/ComponentCollapsible.tsx

@@ -1,24 +1,15 @@
-import ChevronDown from "@/assets/icons/chevron-down.svg?react";
-import { Key, Value } from "@/components/KeyValue";
+import { NestedCollapsible } from "@/components/NestedCollapsible";
 import { snakeCaseToTitleCase } from "@/lib/strings";
 import { StackComponent } from "@/types/components";
 import { PipelineRun } from "@/types/pipeline-runs";
-import {
-	CollapsibleContent,
-	CollapsibleHeader,
-	CollapsiblePanel,
-	CollapsibleTrigger
-} from "@zenml-io/react-component-library";
-import { ReactNode, useState } from "react";
+import { CollapsibleHeader } from "@zenml-io/react-component-library";
 
 type Props = {
 	component: StackComponent;
 	run: PipelineRun;
 };
 
 export function StackComponentCollapsible({ component, run }: Props) {
-	const [open, setOpen] = useState(false);
-
 	const keyName = `${component.body?.type}.${component.body?.flavor}`;
 	const settings =
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -37,38 +28,18 @@ export function StackComponentCollapsible({ component, run }: Props) {
 	}
 
 	return (
-		<CollapsiblePanel className="w-full" open={open} onOpenChange={setOpen}>
-			<CollapsibleHeader intent="secondary" className="flex items-center justify-between ">
-				<div className="flex w-full items-center gap-[10px]">
-					<CollapsibleTrigger>
-						<ChevronDown
-							className={` ${
-								open ? "" : "-rotate-90"
-							} h-5 w-5 rounded-md fill-neutral-500 transition-transform duration-200 hover:bg-neutral-200`}
-						/>
-					</CollapsibleTrigger>
-					<div className="grid w-full grid-cols-2 gap-2">
-						<span>{snakeCaseToTitleCase(component.body?.type as string)}</span>
-						<div>{component.name}</div>
-					</div>
+		<NestedCollapsible
+			intent="secondary"
+			contentClassName="pl-[60px]"
+			className="w-full"
+			isInitialOpen={false}
+			data={settings}
+			title={
+				<div className="grid w-full grid-cols-2 gap-2 text-left">
+					<span>{snakeCaseToTitleCase(component.body?.type as string)}</span>
+					<div>{component.name}</div>
 				</div>
-			</CollapsibleHeader>
-			<CollapsibleContent className="border-t border-theme-border-moderate bg-theme-surface-primary px-5 py-3">
-				<dl className="grid grid-cols-1 gap-x-[10px] gap-y-2 pl-[36px] md:grid-cols-2 md:gap-y-4">
-					{Object.entries(settings).map(([key, value]) => (
-						<KeyValue key={key} label={key} value={JSON.stringify(value)} />
-					))}
-				</dl>
-			</CollapsibleContent>
-		</CollapsiblePanel>
-	);
-}
-
-function KeyValue({ label, value }: { label: string; value: string | ReactNode }) {
-	return (
-		<>
-			<Key className="col-span-1 text-theme-text-secondary">{label}</Key>
-			<Value className="col-span-1 w-full truncate text-neutral-700">{value}</Value>
-		</>
+			}
+		/>
 	);
 }

src/components/CollapsibleCard.tsx

@@ -5,6 +5,7 @@ import {
 	CollapsibleHeader,
 	CollapsibleHeaderProps
 } from "@zenml-io/react-component-library";
+import { cn } from "@zenml-io/react-component-library/utilities";
 import ChevronDown from "@/assets/icons/chevron-down.svg?react";
 import { useState } from "react";
 
@@ -13,6 +14,7 @@ type CollapsibleCardProps = {
 	children: React.ReactNode;
 	title: string | React.ReactNode;
 	className?: string;
+	contentClassName?: string;
 	intent?: CollapsibleHeaderProps["intent"];
 };
 
@@ -21,6 +23,7 @@ export function CollapsibleCard({
 	children,
 	initialOpen = false,
 	className,
+	contentClassName,
 	intent = "primary"
 }: CollapsibleCardProps) {
 	const [open, setOpen] = useState(initialOpen);
@@ -37,7 +40,12 @@ export function CollapsibleCard({
 				</CollapsibleTrigger>
 			</CollapsibleHeader>
 
-			<CollapsibleContent className="space-y-3 border-t border-theme-border-moderate bg-theme-surface-primary px-5 py-3">
+			<CollapsibleContent
+				className={cn(
+					"space-y-3 border-t border-theme-border-moderate bg-theme-surface-primary px-5 py-3",
+					contentClassName
+				)}
+			>
 				{children}
 			</CollapsibleContent>
 		</CollapsiblePanel>

src/components/MetadataCards.tsx

@@ -46,6 +46,9 @@ export function UncategorizedCard({ metadata }: Props) {
 
 	if (nonDicts.length === 0) return null;
 
+	// sort nonDicts alphabetically by index 0
+	nonDicts.sort((a, b) => a[0].localeCompare(b[0]));
+
 	const convertToMBorGB = (number: number) => {
 		if (number < 1024) {
 			return number + " bytes";

src/components/NestedCollapsible.tsx

@@ -10,14 +10,18 @@ type Props = {
 	intent?: CollapsibleHeaderProps["intent"];
 	data?: { [key: string]: any };
 	title: ReactNode;
+	contentClassName?: string;
+	className?: string;
 	isInitialOpen?: boolean;
 };
 
 export function NestedCollapsible({
 	title,
 	data,
 	intent = "primary",
-	isInitialOpen = false
+	isInitialOpen = false,
+	contentClassName,
+	className
 }: Props) {
 	const objects: { [key: string]: any } = {};
 	const nonObjects: { [key: string]: any } = {};
@@ -36,11 +40,20 @@ export function NestedCollapsible({
 
 	if (Object.keys(data || {}).length === 0) return null;
 
+	const values = Object.entries(nonObjects);
+	values.sort((a, b) => a[0].localeCompare(b[0]));
+
 	return (
-		<CollapsibleCard initialOpen={isInitialOpen} intent={intent} title={title}>
+		<CollapsibleCard
+			contentClassName={contentClassName}
+			className={className}
+			initialOpen={isInitialOpen}
+			intent={intent}
+			title={title}
+		>
 			<div className="flex flex-col gap-3">
 				<dl className="grid grid-cols-1 gap-x-[10px] gap-y-2 md:grid-cols-3 md:gap-y-4">
-					{Object.entries(nonObjects).map(([key, value]) => (
+					{values.map(([key, value]) => (
 						<KeyValue
 							key={key}
 							label={key}
@@ -51,7 +64,7 @@ export function NestedCollapsible({
 									) : regex.test(value) ? (
 										<Codesnippet className="py-1" highlightCode code={value} />
 									) : (
-										<div className="py-1">{value}</div>
+										<div className="overflow-x-auto py-1">{value}</div>
 									)}
 								</>
 							}