fix: some ui bugs (#650)

Author: Cahllagerfeld

src/app/stacks/create/manual/ComponentSelection.tsx

@@ -103,7 +103,7 @@ function ComponentList({ type, search }: Props & { search: string }) {
 										<div className="flex items-center gap-2 text-text-sm">
 											{comp.body?.user?.name && <InlineAvatar username={comp.body.user.name} />}
 											{comp.body?.updated && (
-												<div className="text-theme-text-secondary">
+												<div className="whitespace-nowrap text-theme-text-secondary">
 													<DisplayDate short dateString={comp.body.updated} />
 												</div>
 											)}

src/components/MetadataCards.tsx

@@ -5,6 +5,12 @@ import { CollapsibleCard } from "./CollapsibleCard";
 import { Codesnippet } from "./CodeSnippet";
 import { EmptyState } from "./EmptyState";
 import File from "@/assets/icons/file.svg?react";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger
+} from "@zenml-io/react-component-library/components/client";
 
 type Props = { metadata: MetadataMap };
 
@@ -68,7 +74,16 @@ export function UncategorizedCard({ metadata, title }: Props & { title?: string
 					{nonDicts.map(([_, value]) => (
 						<KeyValue
 							key={value.id}
-							label={value.body.key}
+							label={
+								<TooltipProvider>
+									<Tooltip>
+										<TooltipTrigger className="cursor-default truncate">
+											{value.body.key}
+										</TooltipTrigger>
+										<TooltipContent className="max-w-[480px]">{value.body.key}</TooltipContent>
+									</Tooltip>
+								</TooltipProvider>
+							}
 							value={
 								<>
 									{(() => {

src/components/NestedCollapsible.tsx

@@ -1,10 +1,16 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { ReactNode } from "react";
-import { KeyValue } from "./KeyValue";
+import { renderAnyToString } from "@/lib/strings";
 import { CollapsibleHeaderProps } from "@zenml-io/react-component-library";
-import { CollapsibleCard } from "./CollapsibleCard";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger
+} from "@zenml-io/react-component-library/components/client";
+import { ReactNode } from "react";
 import { Codesnippet } from "./CodeSnippet";
-import { renderAnyToString } from "@/lib/strings";
+import { CollapsibleCard } from "./CollapsibleCard";
+import { KeyValue } from "./KeyValue";
 
 type Props = {
 	intent?: CollapsibleHeaderProps["intent"];
@@ -56,7 +62,14 @@ export function NestedCollapsible({
 					{values.map(([key, value]) => (
 						<KeyValue
 							key={key}
-							label={key}
+							label={
+								<TooltipProvider>
+									<Tooltip>
+										<TooltipTrigger className="cursor-default truncate">{key}</TooltipTrigger>
+										<TooltipContent className="max-w-[480px]">{key}</TooltipContent>
+									</Tooltip>
+								</TooltipProvider>
+							}
 							value={
 								<>
 									{typeof value === "boolean" ? (
@@ -98,7 +111,14 @@ function RenderArray({ title, value }: { title: string; value: any }) {
 						{Object.entries(simpleValues).map(([key, value]) => (
 							<KeyValue
 								key={key}
-								label={key}
+								label={
+									<TooltipProvider>
+										<Tooltip>
+											<TooltipTrigger className="cursor-default truncate">{key}</TooltipTrigger>
+											<TooltipContent className="max-w-[480px]">{key}</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+								}
 								value={<div className="py-1">{renderAnyToString(value)}</div>}
 							/>
 						))}

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

@@ -120,7 +120,22 @@ export function DetailsCard({ artifactVersionId }: Props) {
 						}
 					/>
 				)}
-
+				<KeyValue
+					label="Materializer"
+					value={
+						<TooltipProvider>
+							<Tooltip>
+								<TooltipTrigger className="cursor-default">
+									{artifactVersion.data.body?.materializer.attribute}
+								</TooltipTrigger>
+								<TooltipContent align="start">
+									{artifactVersion.data.body?.materializer.module}.
+									{artifactVersion.data.body?.materializer.attribute}
+								</TooltipContent>
+							</Tooltip>
+						</TooltipProvider>
+					}
+				/>
 				<KeyValue label="Type" value={artifactVersion.data.body?.type} />
 				<KeyValue
 					label="Author"

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

@@ -9,6 +9,12 @@ import { renderAnyToString } from "@/lib/strings";
 import { AnyDict, MetadataMap } 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 { UncategorizedCard } from "../../MetadataCards";
@@ -85,13 +91,34 @@ 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={key} value={<div>{renderAnyToString(value)}</div>} />
+							<KeyValue
+								key={key}
+								label={
+									<TooltipProvider>
+										<Tooltip>
+											<TooltipTrigger className="cursor-default truncate">
+												{value.body.key}
+											</TooltipTrigger>
+											<TooltipContent className="max-w-[480px]">{value.body.key}</TooltipContent>
+										</Tooltip>
+									</TooltipProvider>
+								}
+								value={<div>{renderAnyToString(value)}</div>}
+							/>
 						)
 				)}
 			</dl>