feat: update stack visualization (#918)

Author: Cahllagerfeld

src/app/deployments/[deploymentId]/_components/code-collapsible.tsx

@@ -60,7 +60,7 @@ function DeploymentCodeContent({ deployment }: Props) {
 
 	return (
 		<CollapsiblePanel open={open} onOpenChange={setOpen}>
-			<CollapsibleHeader className="flex items-center gap-[10px]">
+			<CollapsibleHeader className="flex h-9 items-center gap-[10px]">
 				<CollapsibleTrigger className="flex w-full gap-2">
 					<CollapsibleChevron open={open} />
 					Invocation

src/app/deployments/[deploymentId]/_components/deployment-detail.tsx

@@ -35,7 +35,7 @@ function DeploymentDetailContent({ deployment }: Props) {
 
 	return (
 		<CollapsiblePanel open={open} onOpenChange={setOpen}>
-			<CollapsibleHeader className="flex items-center gap-[10px]">
+			<CollapsibleHeader className="flex h-9 items-center gap-[10px]">
 				<CollapsibleTrigger className="flex w-full gap-2">
 					<CollapsibleChevron open={open} />
 					Details

src/app/deployments/[deploymentId]/_components/endpoint.tsx

@@ -27,7 +27,7 @@ function EndpointCollapsibleContent({ deployment }: Props) {
 
 	return (
 		<CollapsiblePanel open={open} onOpenChange={setOpen}>
-			<CollapsibleHeader className="flex items-center gap-[10px]">
+			<CollapsibleHeader className="flex h-9 items-center gap-[10px]">
 				<CollapsibleTrigger className="flex w-full gap-2">
 					<CollapsibleChevron open={open} />
 					Endpoint

src/app/deployments/[deploymentId]/_components/stack-collapsible.tsx

@@ -1,28 +1,21 @@
+import AlertCircle from "@/assets/icons/alert-circle.svg?react";
 import { CollapsibleCard } from "@/components/CollapsibleCard";
-import { StackInfo } from "@/components/stacks/info";
+import { EmptyState } from "@/components/EmptyState";
+import { StackInfoFull } from "@/components/stacks/info/stack-info-full";
 import { pipelineSnapshotQueries } from "@/data/pipeline-snapshots";
 import { useStack } from "@/data/stacks/stack-detail-query";
 import { Deployment } from "@/types/deployments";
 import { PipelineSnapshot } from "@/types/pipeline-snapshots";
 import { useQuery } from "@tanstack/react-query";
 import { Skeleton } from "@zenml-io/react-component-library";
-import { AlertEmptyState } from "./common";
 import { DeploymentDetailWrapper } from "./fetch-wrapper";
 
 type DeploymentStackCollapsibleContentProps = {
 	deployment: Deployment;
 };
 
 export function DeploymentStackCollapsible() {
-	return <DeploymentDetailWrapper Component={DeploymentStackCollapsibleWrapper} />;
-}
-
-function DeploymentStackCollapsibleWrapper({ deployment }: DeploymentStackCollapsibleContentProps) {
-	return (
-		<CollapsibleCard title="Stack" initialOpen={true}>
-			<DeploymentStackCollapsibleContent deployment={deployment} />
-		</CollapsibleCard>
-	);
+	return <DeploymentDetailWrapper Component={DeploymentStackCollapsibleContent} />;
 }
 
 function DeploymentStackCollapsibleContent({ deployment }: DeploymentStackCollapsibleContentProps) {
@@ -46,7 +39,7 @@ function DeploymentStackCollapsibleWithSnapshot({ snapshotId }: { snapshotId: st
 
 	if (snapshotQuery.isError) {
 		return (
-			<AlertEmptyState
+			<StackCollapsibleEmptyState
 				title="Unable to get Stack"
 				subtitle="Something went wrong fetching the deployment snapshot"
 			/>
@@ -77,8 +70,8 @@ function DeploymentStackCollapsibleStackSection({
 
 	if (stackQuery.isError) {
 		return (
-			<AlertEmptyState
-				title="Unable to get Stack"
+			<StackCollapsibleEmptyState
+				title="Failed to fetch the stack"
 				subtitle="Something went wrong fetching the stack"
 			/>
 		);
@@ -88,12 +81,28 @@ function DeploymentStackCollapsibleStackSection({
 
 	const snapshotConfig = snapshot.metadata?.pipeline_configuration.settings || {};
 
-	return <StackInfo displayInfoBox={false} stack={stack} objectConfig={snapshotConfig} />;
+	return <StackInfoFull stack={stack} objectConfig={snapshotConfig} />;
+}
+
+function StackCollapsibleEmptyState({ title, subtitle }: { title: string; subtitle?: string }) {
+	return (
+		<CollapsibleCard title="Stack" initialOpen={true}>
+			<EmptyState
+				className="p-5"
+				icon={<AlertCircle className="h-[60px] w-[60px] fill-neutral-300" />}
+			>
+				<div className="text-center">
+					<p className="text-text-lg font-semibold">{title}</p>
+					{subtitle && <p className="text-text-md text-theme-text-secondary">{subtitle}</p>}
+				</div>
+			</EmptyState>
+		</CollapsibleCard>
+	);
 }
 
 function NoStackEmptyState() {
 	return (
-		<AlertEmptyState
+		<StackCollapsibleEmptyState
 			title="No Stack"
 			subtitle="There is no stack associated with this deployment."
 		/>

src/app/snapshots/[snapshotId]/_components/snapshot-detail.tsx

@@ -41,7 +41,7 @@ function DetailsContent({ snapshot }: Props) {
 
 	return (
 		<CollapsiblePanel open={open} onOpenChange={setOpen}>
-			<CollapsibleHeader className="flex items-center gap-[10px]">
+			<CollapsibleHeader className="flex h-9 items-center gap-[10px]">
 				<CollapsibleTrigger className="flex w-full gap-2">
 					<CollapsibleChevron open={open} />
 					Details

src/app/snapshots/[snapshotId]/_components/snapshot-stack-content.tsx

@@ -1,9 +1,9 @@
+import { StackInfoFull } from "@/components/stacks/info/stack-info-full";
 import { pipelineSnapshotQueries } from "@/data/pipeline-snapshots";
 import { stackQueries } from "@/data/stacks";
 import { useQuery } from "@tanstack/react-query";
 import { Skeleton } from "@zenml-io/react-component-library/components/server";
 import { useParams } from "react-router-dom";
-import { StackContent } from "./snapshot-stack-content";
 
 export function SnapshotStack() {
 	const { snapshotId } = useParams() as {
@@ -39,5 +39,5 @@ export function SnapshotStack() {
 		return <div>Failed to load stack.</div>;
 	}
 
-	return <StackContent stack={stackQuery.data} />;
+	return <StackInfoFull stack={stackQuery.data} objectConfig={{}} />;
 }

src/app/snapshots/[snapshotId]/_components/snapshot-stack.tsx

@@ -1,4 +1,3 @@
-import ChevronDown from "@/assets/icons/chevron-down.svg?react";
 import {
 	CollapsibleContent,
 	CollapsibleHeader,
@@ -8,6 +7,7 @@ import {
 } from "@zenml-io/react-component-library";
 import { cn } from "@zenml-io/react-component-library/utilities";
 import { useState } from "react";
+import { CollapsibleChevron } from "./collapsible-chevron";
 import { CopyMetadataButton } from "./copy-metadata-button";
 
 type CollapsibleCardProps = {
@@ -35,12 +35,8 @@ export function CollapsibleCard({
 	return (
 		<CollapsiblePanel className={className} open={open} onOpenChange={setOpen}>
 			<CollapsibleHeader intent={intent} className={headerClassName}>
-				<CollapsibleTrigger className="flex w-full items-center gap-[10px]">
-					<ChevronDown
-						className={` ${
-							open ? "" : "-rotate-90"
-						} h-5 w-5 rounded-md fill-neutral-500 transition-transform duration-200 hover:bg-neutral-200`}
-					/>
+				<CollapsibleTrigger className="flex flex-1 items-center gap-[10px]">
+					<CollapsibleChevron open={open} />
 					{title}
 				</CollapsibleTrigger>
 
@@ -59,7 +55,7 @@ export function CollapsibleCard({
 	);
 }
 
-type Props = Omit<CollapsibleCardProps, "headerChildren"> & {
+type Props = CollapsibleCardProps & {
 	copyText: string;
 	displayCopyButton?: boolean;
 };
@@ -69,6 +65,7 @@ export function CollapsibleCardWithCopy({
 	displayCopyButton = true,
 	headerClassName,
 	className,
+	headerChildren,
 	...props
 }: Props) {
 	return (
@@ -80,7 +77,9 @@ export function CollapsibleCardWithCopy({
 				headerClassName
 			)}
 			headerChildren={
-				displayCopyButton ? (
+				headerChildren ? (
+					headerChildren
+				) : displayCopyButton ? (
 					<div className="opacity-100 transition-opacity duration-200 lg:opacity-0 lg:group-hover:opacity-100">
 						<CopyMetadataButton copyText={copyText} />
 					</div>

src/components/CollapsibleCard.tsx

@@ -23,6 +23,7 @@ type Props = {
 	sortKeysAlphabetically?: boolean;
 	className?: string;
 	schema?: JSONSchemaDefinition;
+	headerChildren?: ReactNode;
 };
 
 const regex = /^<class\s+'.*'>$/;
@@ -36,7 +37,8 @@ export function NestedCollapsible({
 	className,
 	children,
 	isInitialOpen = false,
-	sortKeysAlphabetically = true
+	sortKeysAlphabetically = true,
+	headerChildren
 }: PropsWithChildren<Props>) {
 	const objects: { [key: string]: Record<string, unknown> } = {};
 	const nonObjects: { [key: string]: unknown } = {};
@@ -62,6 +64,7 @@ export function NestedCollapsible({
 
 	return (
 		<CollapsibleCardWithCopy
+			headerChildren={headerChildren}
 			contentClassName={contentClassName}
 			initialOpen={isInitialOpen}
 			intent={intent}

src/components/NestedCollapsible.tsx

@@ -25,7 +25,7 @@ export function DockerImageCollapsible({ data, displayCopyButton = true }: Props
 
 	return (
 		<CollapsiblePanel open={open} onOpenChange={setOpen}>
-			<CollapsibleHeader intent="primary" className="flex items-center gap-[10px]">
+			<CollapsibleHeader intent="primary" className="flex h-9 items-center gap-[10px]">
 				<CollapsibleTrigger className="flex w-full items-center gap-[10px]">
 					<ChevronDown
 						className={` ${