feat: components detail (#691)

package.json

@@ -51,6 +51,7 @@
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.48.1",
+		"@tailwindcss/container-queries": "^0.1.1",
 		"@tailwindcss/forms": "^0.5.7",
 		"@tailwindcss/typography": "^0.5.10",
 		"@types/lodash.debounce": "^4.0.9",

src/app/components/[componentId]/page.tsx

@@ -0,0 +1,19 @@
+import { useParams } from "react-router-dom";
+import { StackComponentsDetailHeader } from "../../../components/stack-components/component-detail/Header";
+import { StackComponentTabs } from "@/components/stack-components/component-detail/Tabs";
+import { StackList } from "../../stacks/StackList";
+
+export default function ComponentDetailPage() {
+	const { componentId } = useParams() as { componentId: string };
+
+	return (
+		<div className="@container">
+			<StackComponentsDetailHeader isPanel={false} componentId={componentId} />
+			<StackComponentTabs
+				isPanel={false}
+				stacksTabContent={<StackList fixedQueryParams={{ component_id: componentId }} />}
+				componentId={componentId}
+			/>
+		</div>
+	);
+}

src/app/components/columns.tsx

@@ -1,8 +1,8 @@
 import { CopyButton } from "@/components/CopyButton";
 import { DisplayDate } from "@/components/DisplayDate";
 import { InlineAvatar } from "@/components/InlineAvatar";
+import { ComponentSheet } from "@/components/stack-components/component-sheet";
 import { ComponentBadge } from "@/components/stack-components/ComponentBadge";
-import { ComponentFallbackDialog } from "@/components/stack-components/ComponentFallbackDialog";
 import { snakeCaseToTitleCase } from "@/lib/strings";
 import { sanitizeUrl } from "@/lib/url";
 import { getUsername } from "@/lib/user";
@@ -29,18 +29,19 @@ export function getComponentList(): ColumnDef<StackComponent>[] {
 						/>
 						<div>
 							<div className="flex items-center gap-1">
-								<ComponentFallbackDialog
-									name={name}
-									type={row.original.body?.type || "orchestrator"}
-								>
+								<ComponentSheet componentId={id}>
 									<button>
 										<h2 className="text-text-md font-semibold">{name}</h2>
 									</button>
-								</ComponentFallbackDialog>
+								</ComponentSheet>
 								<CopyButton copyText={name} />
 							</div>
 							<div className="flex items-center gap-1">
-								<p className="text-text-xs text-theme-text-secondary">{id.split("-")[0]}</p>
+								<ComponentSheet componentId={id}>
+									<button className="text-text-xs text-theme-text-secondary">
+										{id.split("-")[0]}
+									</button>
+								</ComponentSheet>
 								<CopyButton copyText={id} />
 							</div>
 						</div>

src/app/stacks/ResumeBanner.tsx

@@ -0,0 +1,21 @@
+import { useState } from "react";
+import { parseWizardData } from "./create/new-infrastructure/persist";
+import { parseWizardData as parseTerraform } from "./create/terraform/persist";
+import { ResumeStackBanner } from "./ResumeStackBanner";
+import { ResumeTerraformBanner } from "./ResumeTerraformBanner";
+
+export function ResumeBanners() {
+	const [hasResumeableStack, setResumeableStack] = useState(parseWizardData().success);
+	const [hasResumeableTerraform, setResumeableTerraform] = useState<boolean>(
+		parseTerraform().success
+	);
+
+	return (
+		<div className="space-y-5">
+			{hasResumeableStack && <ResumeStackBanner setHasResumeableStack={setResumeableStack} />}
+			{hasResumeableTerraform && (
+				<ResumeTerraformBanner setHasResumeableTerraform={setResumeableTerraform} />
+			)}
+		</div>
+	);
+}

src/app/stacks/StackList.tsx

@@ -6,23 +6,19 @@ import { stackQueries } from "@/data/stacks";
 import { routes } from "@/router/routes";
 import { useQuery } from "@tanstack/react-query";
 import { Button, DataTable, Skeleton } from "@zenml-io/react-component-library";
-import { useState } from "react";
 import { Link } from "react-router-dom";
 import { getStackColumns } from "./columns";
-import { parseWizardData } from "./create/new-infrastructure/persist";
-import { parseWizardData as parseTerraform } from "./create/terraform/persist";
-import { ResumeStackBanner } from "./ResumeStackBanner";
 import { useStacklistQueryParams } from "./service";
-import { ResumeTerraformBanner } from "./ResumeTerraformBanner";
+import { StackListQueryParams } from "../../types/stack";
 
-export function StackList() {
-	const [hasResumeableStack, setResumeableStack] = useState(parseWizardData().success);
-	const [hasResumeableTerraform, setResumeableTerraform] = useState<boolean>(
-		parseTerraform().success
-	);
+type Props = {
+	fixedQueryParams?: StackListQueryParams;
+};
+
+export function StackList({ fixedQueryParams = {} }: Props) {
 	const queryParams = useStacklistQueryParams();
 	const { refetch, data } = useQuery({
-		...stackQueries.stackList({ ...queryParams, sort_by: "desc:updated" }),
+		...stackQueries.stackList({ ...queryParams, sort_by: "desc:updated", ...fixedQueryParams }),
 		throwOnError: true
 	});
 
@@ -45,10 +41,6 @@ export function StackList() {
 					</div>
 				</div>
 				<div className="flex flex-col items-center gap-5">
-					{hasResumeableStack && <ResumeStackBanner setHasResumeableStack={setResumeableStack} />}
-					{hasResumeableTerraform && (
-						<ResumeTerraformBanner setHasResumeableTerraform={setResumeableTerraform} />
-					)}
 					<div className="w-full">
 						{data ? (
 							<DataTable columns={getStackColumns()} data={data.items} />

src/app/stacks/page.tsx

@@ -1,6 +1,7 @@
 import { useTourContext } from "@/components/tour/TourContext";
 import { useEffect } from "react";
 import { StackList } from "./StackList";
+import { ResumeBanners } from "./ResumeBanner";
 
 export default function StacksPage() {
 	const {
@@ -14,5 +15,10 @@ export default function StacksPage() {
 		}
 	}, [tourActive]);
 
-	return <StackList />;
+	return (
+		<div className="space-y-5">
+			<ResumeBanners />
+			<StackList />
+		</div>
+	);
 }

src/components/Pagination.tsx

@@ -10,19 +10,24 @@ import { useNavigate } from "react-router-dom";
 import { ResponsePage } from "@/types/common";
 
 type Props = {
+	inMemoryHandler?: (page: number) => void;
 	// Maybe handle this with a generic?
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	searchParams: Record<string, any>;
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	paginate: Omit<ResponsePage<any>, "items">;
 };
 
-export default function Pagination({ paginate, searchParams }: Props) {
+export default function Pagination({ paginate, searchParams, inMemoryHandler }: Props) {
 	const navigate = useNavigate();
 
 	const { index, total_pages } = paginate;
 
 	function goToPage(page: number) {
+		if (!!inMemoryHandler) {
+			inMemoryHandler(page);
+			return;
+		}
 		const queryParams = new URLSearchParams(objectToSearchParams(searchParams));
 		queryParams.set("page", page.toString());
 

src/components/SearchField.tsx

@@ -6,6 +6,7 @@ import { InputHTMLAttributes, forwardRef, useEffect, useMemo, useState } from "r
 import { useNavigate, useSearchParams } from "react-router-dom";
 
 type Props = {
+	inMemoryHandler?: (val: string) => void;
 	searchContains?: boolean;
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	searchParams: Record<string, any>;
@@ -14,7 +15,7 @@ type Props = {
 export const SearchField = forwardRef<
 	HTMLInputElement,
 	InputHTMLAttributes<HTMLInputElement> & Props
->(({ searchParams, searchContains = true, ...rest }, ref) => {
+>(({ searchParams, searchContains = true, inMemoryHandler, ...rest }, ref) => {
 	const navigate = useNavigate();
 	const [existingParams] = useSearchParams();
 
@@ -35,6 +36,10 @@ export const SearchField = forwardRef<
 	}, [debouncedSearch]);
 
 	function updateSearchQuery(value: string) {
+		if (!!inMemoryHandler) {
+			inMemoryHandler(value);
+			return;
+		}
 		const queryParams = new URLSearchParams({
 			...Object.fromEntries(existingParams),
 			...objectToSearchParams(searchParams)

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

@@ -7,7 +7,6 @@ import { ExecutionStatusIcon, getExecutionStatusTagColor } from "@/components/Ex
 import { InlineAvatar } from "@/components/InlineAvatar";
 import { Key, KeyValue, Value } from "@/components/KeyValue";
 import { useArtifactVersion } from "@/data/artifact-versions/artifact-version-detail-query";
-import { useComponentDetail } from "@/data/components/component-detail-query";
 import { usePipelineRun } from "@/data/pipeline-runs/pipeline-run-detail-query";
 import { useStepDetail } from "@/data/steps/step-detail-query";
 import { routes } from "@/router/routes";
@@ -22,6 +21,8 @@ import {
 import { Link } from "react-router-dom";
 import { Codesnippet } from "../../CodeSnippet";
 import { CollapsibleCard } from "../../CollapsibleCard";
+import { useQuery } from "@tanstack/react-query";
+import { componentQueries } from "../../../data/components";
 
 type Props = {
 	artifactVersionId: string;
@@ -177,12 +178,10 @@ export function DataCard({ artifactVersionId }: Props) {
 	} = useArtifactVersion({ versionId: artifactVersionId });
 
 	const artifactStoreId = artifactVersionData?.metadata?.artifact_store_id;
-	const { data: storeData, isSuccess: isStoreSuccess } = useComponentDetail(
-		{
-			componentId: artifactStoreId!
-		},
-		{ enabled: !!artifactStoreId }
-	);
+	const { data: storeData, isSuccess: isStoreSuccess } = useQuery({
+		...componentQueries.componentDetail(artifactStoreId!),
+		enabled: !!artifactStoreId
+	});
 
 	if (isArtifactVersionError) {
 		return <ErrorFallback err={artifactVersionError} />;

src/components/breadcrumbs/SegmentsBreadcrumbs.tsx

@@ -28,6 +28,13 @@ export const matchSegmentWithRequest = ({ segment, data }: { segment: string; da
 		components: {
 			components: { name: "Components" }
 		},
+		componentDetail: {
+			components: { name: "Components" },
+			component_detail: {
+				id: data?.id,
+				name: data?.name
+			}
+		},
 		secrets: {
 			secrets: { name: "Secrets" }
 		},
@@ -113,7 +120,8 @@ export const matchSegmentWithTab = (segment: string) => {
 		metadata: <MetadataIcon className={iconClasses} />,
 		runs: <RunIcon className={iconClasses} />,
 		templates: <TemplatesIcon className={iconClasses} />,
-		stack: <Stack className={iconClasses} />
+		stack: <Stack className={iconClasses} />,
+		stacks: <Stack className={iconClasses} />
 	};
 
 	return routeMap[segment] || <Info className="h-5 w-5 fill-theme-text-tertiary" />;