Register & Update Components

package.json

@@ -30,7 +30,7 @@
 		"@tanstack/react-query": "^5.65.1",
 		"@tanstack/react-table": "^8.20.6",
 		"@tisoap/react-flow-smart-edge": "^3.0.0",
-		"@zenml-io/react-component-library": "^0.19.2",
+		"@zenml-io/react-component-library": "^0.22.0",
 		"awesome-debounce-promise": "^2.1.0",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",

src/app/components/StackComponentList.tsx

@@ -1,13 +1,15 @@
+import Plus from "@/assets/icons/plus.svg?react";
 import Refresh from "@/assets/icons/refresh.svg?react";
-
+import Pagination from "@/components/Pagination";
+import { SearchField } from "@/components/SearchField";
 import { componentQueries } from "@/data/components";
+import { routes } from "@/router/routes";
 import { useQuery } from "@tanstack/react-query";
+import { DataTable } from "@zenml-io/react-component-library";
 import { Button, Skeleton } from "@zenml-io/react-component-library/components/server";
+import { Link } from "react-router-dom";
 import { getComponentList } from "./columns";
 import { useComponentlistQueryParams } from "./service";
-import { SearchField } from "../../components/SearchField";
-import { DataTable } from "@zenml-io/react-component-library";
-import Pagination from "../../components/Pagination";
 
 export function StackComponentList() {
 	const queryParams = useComponentlistQueryParams();
@@ -36,6 +38,12 @@ export function StackComponentList() {
 							<Refresh className="h-5 w-5 fill-theme-text-brand" />
 							Refresh
 						</Button>
+						<Button size="md" asChild>
+							<Link to={routes.components.create}>
+								<Plus className="h-5 w-5 shrink-0 fill-white" />
+								<span>New Component</span>
+							</Link>
+						</Button>
 					</div>
 				</div>
 

src/app/components/[componentId]/edit/form-step.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import { Button, Skeleton } from "@zenml-io/react-component-library";
+import { useId } from "react";
+import * as Wizard from "@/components/wizard/Wizard";
+import { Link, useNavigate, useParams } from "react-router-dom";
+import { componentQueries } from "@/data/components";
+import { useQuery } from "@tanstack/react-query";
+import { routes } from "@/router/routes";
+import { ComponentConfigurationForm } from "@/components/stack-components/create-component/configuration-form";
+
+export function EditComponentConfig() {
+	const navigate = useNavigate();
+	const { componentId } = useParams() as { componentId: string };
+	const component = useQuery({
+		...componentQueries.componentDetail(componentId),
+		throwOnError: true
+	});
+
+	function handleSuccess(id: string) {
+		navigate(routes.components.detail(id));
+	}
+
+	const formId = useId();
+	if (component.isPending) {
+		return <Skeleton className="h-[300px] w-full" />;
+	}
+
+	if (component.isError) {
+		return <div>Error</div>;
+	}
+
+	const flavorId = component.data.resources?.flavor?.id;
+
+	if (!flavorId) {
+		return <div>No flavor found</div>;
+	}
+
+	return (
+		<>
+			<Wizard.Body className="p-0">
+				<ComponentConfigurationForm
+					component={component.data}
+					flavorId={flavorId}
+					formId={formId}
+					isCreate={false}
+					successHandler={handleSuccess}
+					FooterComponent={FooterComponent}
+				/>
+			</Wizard.Body>
+		</>
+	);
+}
+
+function FooterComponent({ formId, isPending }: { formId: string; isPending: boolean }) {
+	const params = useParams() as { componentId: string };
+
+	return (
+		<Wizard.Footer>
+			<Button asChild intent="secondary" size="md">
+				<Link to={routes.components.detail(params.componentId)}>Cancel</Link>
+			</Button>
+			<Button size="md" disabled={isPending} type="submit" form={formId}>
+				{isPending && (
+					<div
+						role="alert"
+						aria-busy="true"
+						className="full h-[20px] w-[20px] animate-spin rounded-rounded border-2 border-theme-text-negative border-b-theme-text-brand"
+					></div>
+				)}
+				Update Component
+			</Button>
+		</Wizard.Footer>
+	);
+}

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

@@ -0,0 +1,12 @@
+import { Wrapper } from "@/components/wizard/Wizard";
+import { EditComponentConfig } from "./form-step";
+
+export default function ComponentEditPage() {
+	return (
+		<section className="layout-container mt-5 pb-5">
+			<Wrapper>
+				<EditComponentConfig />
+			</Wrapper>
+		</section>
+	);
+}

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

@@ -0,0 +1,12 @@
+import { StackComponentsDetailHeader } from "@/components/stack-components/component-detail/Header";
+import { Outlet, useParams } from "react-router-dom";
+
+export default function ComponentLayout() {
+	const { componentId } = useParams() as { componentId: string };
+	return (
+		<div>
+			<StackComponentsDetailHeader isPanel={false} componentId={componentId} />
+			<Outlet />
+		</div>
+	);
+}

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

@@ -1,16 +1,14 @@
-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";
+import { useParams } from "react-router-dom";
 import { RunsBody } from "../../pipelines/RunsTab/RunsBody";
 import { RunsSelectorProvider } from "../../pipelines/RunsTab/RunsSelectorContext";
+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 }} />}

src/app/components/columns.tsx

@@ -9,6 +9,7 @@ import { getUsername } from "@/lib/user";
 import { StackComponent } from "@/types/components";
 import { ColumnDef } from "@tanstack/react-table";
 import { Tag } from "@zenml-io/react-component-library/components/server";
+import { ComponentDropdown } from "./component-dropdown";
 
 export function getComponentList(): ColumnDef<StackComponent>[] {
 	return [
@@ -101,6 +102,13 @@ export function getComponentList(): ColumnDef<StackComponent>[] {
 					<DisplayDate dateString={row.original.body?.created || ""} />
 				</p>
 			)
+		},
+		{
+			id: "admin_actions",
+			header: "",
+			cell: ({ row }) => {
+				return <ComponentDropdown id={row.original.id} />;
+			}
 		}
 	];
 }

src/app/components/component-dropdown.tsx

@@ -0,0 +1,41 @@
+import DotsIcon from "@/assets/icons/dots-horizontal.svg?react";
+import Edit from "@/assets/icons/edit.svg?react";
+import { routes } from "@/router/routes";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuTrigger
+} from "@zenml-io/react-component-library/components/client";
+import { Button } from "@zenml-io/react-component-library/components/server";
+import { useNavigate } from "react-router-dom";
+
+type Props = {
+	id: string;
+};
+
+export function ComponentDropdown({ id }: Props) {
+	const navigate = useNavigate();
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<Button
+					intent="secondary"
+					emphasis="minimal"
+					className="flex aspect-square items-center justify-center p-0"
+				>
+					<DotsIcon className="h-4 w-4 shrink-0 fill-theme-text-tertiary" />
+				</Button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="end" sideOffset={7}>
+				<DropdownMenuItem
+					onSelect={() => navigate(routes.components.edit(id))}
+					className="cursor-pointer space-x-2"
+				>
+					<Edit className="h-3 w-3 fill-neutral-400" />
+					<p>Edit</p>
+				</DropdownMenuItem>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}

src/app/components/create/config-step.tsx

@@ -0,0 +1,72 @@
+import ArrowLeft from "@/assets/icons/arrow-left.svg?react";
+import { ComponentConfigurationForm } from "@/components/stack-components/create-component/configuration-form";
+import * as Wizard from "@/components/wizard/Wizard";
+import { snakeCaseToTitleCase } from "@/lib/strings";
+import { routes } from "@/router/routes";
+import { StackComponentType } from "@/types/components";
+import { Flavor } from "@/types/flavors";
+import { Button } from "@zenml-io/react-component-library/components/server";
+import { useId } from "react";
+import { Link, useNavigate } from "react-router-dom";
+
+type Props = {
+	flavor: Flavor;
+	type: StackComponentType;
+	handleBack: () => void;
+};
+
+export function ConfiguratinStep({ flavor, type, handleBack }: Props) {
+	const formId = useId();
+	const navigate = useNavigate();
+
+	function handleSuccess(id: string) {
+		navigate(routes.components.detail(id));
+	}
+
+	return (
+		<>
+			<Wizard.Header className="flex items-center gap-2">
+				<Button
+					intent="secondary"
+					emphasis="subtle"
+					className="flex aspect-square size-6 items-center justify-center"
+					onClick={() => handleBack()}
+				>
+					<ArrowLeft className="size-5 shrink-0" />
+					<span className="sr-only">Go step back</span>
+				</Button>
+				<span>
+					Configure your {snakeCaseToTitleCase(flavor.name)} {snakeCaseToTitleCase(type)}
+				</span>
+			</Wizard.Header>
+			<Wizard.Body className="p-0">
+				<ComponentConfigurationForm
+					flavorId={flavor.id}
+					formId={formId}
+					successHandler={handleSuccess}
+					FooterComponent={FooterComponent}
+				/>
+			</Wizard.Body>
+		</>
+	);
+}
+
+function FooterComponent({ formId, isPending }: { formId: string; isPending: boolean }) {
+	return (
+		<Wizard.Footer>
+			<Button asChild intent="secondary" size="md">
+				<Link to={routes.components.overview}>Cancel</Link>
+			</Button>
+			<Button size="md" disabled={isPending} type="submit" form={formId}>
+				{isPending && (
+					<div
+						role="alert"
+						aria-busy="true"
+						className="full h-[20px] w-[20px] animate-spin rounded-rounded border-2 border-theme-text-negative border-b-theme-text-brand"
+					></div>
+				)}
+				Register Component
+			</Button>
+		</Wizard.Footer>
+	);
+}

src/app/components/create/flavor-step.tsx

@@ -0,0 +1,34 @@
+import ArrowLeft from "@/assets/icons/arrow-left.svg?react";
+import { SelectFlavorList } from "@/components/stack-components/create-component/flavor-select";
+import * as Wizard from "@/components/wizard/Wizard";
+import { StackComponentType } from "@/types/components";
+import { Flavor } from "@/types/flavors";
+import { Button } from "@zenml-io/react-component-library/components/server";
+
+type Props = {
+	type: StackComponentType;
+	handleFlavorSelect: (flavor: Flavor) => void;
+	handleBack: () => void;
+};
+
+export function FlavorStep({ type, handleFlavorSelect, handleBack }: Props) {
+	return (
+		<>
+			<Wizard.Header className="flex items-center gap-2">
+				<Button
+					intent="secondary"
+					emphasis="subtle"
+					className="flex aspect-square size-6 items-center justify-center"
+					onClick={() => handleBack()}
+				>
+					<ArrowLeft className="size-5 shrink-0" />
+					<span className="sr-only">Go step back</span>
+				</Button>
+				<span>Select your Component Flavor</span>
+			</Wizard.Header>
+			<Wizard.Body>
+				<SelectFlavorList type={type} setSelectedFlavor={handleFlavorSelect} />
+			</Wizard.Body>
+		</>
+	);
+}

src/app/components/create/header.tsx

@@ -0,0 +1,20 @@
+import Container from "@/assets/icons/container.svg?react";
+import { useEffect } from "react";
+import { PageHeader } from "../../../components/PageHeader";
+import { useBreadcrumbsContext } from "../../../layouts/AuthenticatedLayout/BreadcrumbsContext";
+
+export function CreateComponentHeader() {
+	const { setCurrentBreadcrumbData } = useBreadcrumbsContext();
+
+	useEffect(() => {
+		setCurrentBreadcrumbData({ segment: "createComponent", data: null });
+	}, []);
+	return (
+		<PageHeader>
+			<div className="flex items-center gap-1">
+				<Container className="h-5 w-5 fill-turquoise-400" />
+				<h1 className="text-display-xs font-semibold">Register new Component</h1>
+			</div>
+		</PageHeader>
+	);
+}

src/app/components/create/page.tsx

@@ -0,0 +1,13 @@
+import { CreateComponentHeader } from "./header";
+import { RegisterComponentWizard } from "./wizard";
+
+export default function ComponentCreatePage() {
+	return (
+		<div className="space-y-5">
+			<CreateComponentHeader />
+			<section className="layout-container pb-5">
+				<RegisterComponentWizard />
+			</section>
+		</div>
+	);
+}