-
+
-
+
-
+
+
{id.split("-")[0]}
+
+ {hasResumeableStack &&
+ );
+}
diff --git a/src/app/stacks/StackList.tsx b/src/app/stacks/StackList.tsx
index ccb390c6..14e53755 100644
--- a/src/app/stacks/StackList.tsx
+++ b/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
- {hasResumeableStack &&
+ 
+
+
+ );
+}
+
+function ComponentId({ componentId, isPanel }: Props & { isPanel: boolean }) {
+ const component = useComponent(componentId);
+ const { setCurrentBreadcrumbData } = useBreadcrumbsContext();
+ useEffect(() => {
+ if (component.data && !isPanel) {
+ setCurrentBreadcrumbData({ segment: "componentDetail", data: component.data });
+ }
+ }, [component.data, isPanel]);
+
+ if (component.isError) return null;
+ if (component.isPending) return
+ {snakeCaseToTitleCase(component.data.body?.type || "")}
+
+ );
+}
diff --git a/src/components/stack-components/component-detail/Tabs.tsx b/src/components/stack-components/component-detail/Tabs.tsx
new file mode 100644
index 00000000..d2e9f98d
--- /dev/null
+++ b/src/components/stack-components/component-detail/Tabs.tsx
@@ -0,0 +1,52 @@
+import Stacks from "@/assets/icons/stack.svg?react";
+import Tools from "@/assets/icons/tool-02.svg?react";
+import { ComponentConfigTab } from "./ConfigTab";
+import { useSelectedTab } from "./service";
+import { ReactNode, useState } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@zenml-io/react-component-library";
+import { useNavigate } from "react-router-dom";
+
+type Props = {
+ componentId: string;
+ isPanel: boolean;
+ stacksTabContent: ReactNode;
+};
+export function StackComponentTabs({ componentId, isPanel, stacksTabContent }: Props) {
+ const [inMemoryTab, setInMemoryTab] = useState("configuration");
+ const selectedTab = useSelectedTab();
+ const navigate = useNavigate();
+
+ function handleTabChage(tab: string) {
+ if (isPanel) {
+ setInMemoryTab(tab);
+ return;
+ }
+ const current = new URLSearchParams();
+ current.set("tab", tab);
+ navigate(`?${current.toString()}`);
+ }
+
+ return (
+ ) {
+ return (
+
+ {children}
+
+
+
+ );
+}
diff --git a/src/components/stack-components/component-sheet/stacks-tab/StackList.tsx b/src/components/stack-components/component-sheet/stacks-tab/StackList.tsx
new file mode 100644
index 00000000..18923601
--- /dev/null
+++ b/src/components/stack-components/component-sheet/stacks-tab/StackList.tsx
@@ -0,0 +1,76 @@
+"use client";
+import Refresh from "@/assets/icons/refresh.svg?react";
+import { stackQueries } from "@/data/stacks";
+import { StackListQueryParams } from "@/types/stack";
+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 { useState } from "react";
+import Pagination from "../../../Pagination";
+import { SearchField } from "../../../SearchField";
+import { getStackColumnsPanel } from "./columns";
+
+type Props = {
+ componentId: string;
+};
+
+export function StackList({ componentId }: Props) {
+ const [search, setSearch] = useState(undefined);
+ const [page, setPage] = useState(1);
+ // const { orgId, tenantID } = useParams<{ orgId: string; tenantID: string }>();
+
+ const inlineQueries: StackListQueryParams = {
+ name: search,
+ page
+ };
+
+ const { refetch, data } = useQuery(
+ stackQueries.stackList({
+ ...inlineQueries,
+ component_id: componentId,
+ sort_by: "desc:updated"
+ })
+ );
+
+ return (
+
+
+ );
+}
diff --git a/src/components/stack-components/component-sheet/stacks-tab/columns.tsx b/src/components/stack-components/component-sheet/stacks-tab/columns.tsx
new file mode 100644
index 00000000..64f6b514
--- /dev/null
+++ b/src/components/stack-components/component-sheet/stacks-tab/columns.tsx
@@ -0,0 +1,56 @@
+import { Stack } from "@/types/stack";
+import { User } from "@/types/user";
+import { ColumnDef } from "@tanstack/react-table";
+import { Avatar, AvatarFallback } from "@zenml-io/react-component-library";
+import { CopyButton } from "../../../CopyButton";
+import { DisplayDate } from "../../../DisplayDate";
+import { InlineAvatar } from "../../../InlineAvatar";
+
+export function getStackColumnsPanel(): ColumnDef[] {
+ return [
+ {
+ id: "name",
+ header: "Stack",
+ accessorFn: (row) => row.name,
+ cell: ({ row }) => {
+ const { name, id } = row.original;
+ return (
+
{data ? (
;
@@ -17,12 +18,16 @@ type Props = {
paginate: Omit, "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());
diff --git a/src/components/SearchField.tsx b/src/components/SearchField.tsx
index 919dd745..bd0491bd 100644
--- a/src/components/SearchField.tsx
+++ b/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;
@@ -14,7 +15,7 @@ type Props = {
export const SearchField = forwardRef<
HTMLInputElement,
InputHTMLAttributes & 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)
diff --git a/src/components/artifacts/artifact-node-sheet/DetailCards.tsx b/src/components/artifacts/artifact-node-sheet/DetailCards.tsx
index 539a9675..c0da40e3 100644
--- a/src/components/artifacts/artifact-node-sheet/DetailCards.tsx
+++ b/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 ,
- ComponentPropsWithoutRef & Props
->(({ name, children, type, ...rest }, ref) => {
- return (
-
- );
-});
-
-ComponentFallbackDialog.displayName = "ComponentFallbackDialog";
-
-type InfoProps = {
- type: StackComponentType;
-};
-function Info({ type }: InfoProps) {
- return (
-
-
- );
-}
diff --git a/src/components/stack-components/component-detail/ConfigTab.tsx b/src/components/stack-components/component-detail/ConfigTab.tsx
new file mode 100644
index 00000000..c20368a9
--- /dev/null
+++ b/src/components/stack-components/component-detail/ConfigTab.tsx
@@ -0,0 +1,117 @@
+import ChevronDown from "@/assets/icons/chevron-down.svg?react";
+import {
+ CollapsibleContent,
+ CollapsibleHeader,
+ CollapsiblePanel,
+ CollapsibleTrigger
+} from "@zenml-io/react-component-library";
+import { sanitizeUrl } from "@/lib/url";
+import { getUsername } from "@/lib/user";
+import { Skeleton, Tag } from "@zenml-io/react-component-library/components/server";
+import { useState } from "react";
+import { useComponent } from "./hooks";
+import { KeyValue } from "../../KeyValue";
+import { DisplayDate } from "../../DisplayDate";
+import { InlineAvatar } from "../../InlineAvatar";
+import { NestedCollapsible } from "../../NestedCollapsible";
+
+type Props = {
+ componentId: string;
+};
+export function ComponentConfigTab({ componentId }: Props) {
+ return (
+
+
+ );
+}
+
+function BasicParams({ componentId }: Props) {
+ const [open, setOpen] = useState(true);
+ const component = useComponent(componentId);
+ if (component.isError) return null;
+ if (component.isPending) return
+
+
+
+
+
+
+ }
+ /> */}
+
+
+ );
}
diff --git a/src/assets/icons/expand-full.svg b/src/assets/icons/expand-full.svg
new file mode 100644
index 00000000..ed43f01f
--- /dev/null
+++ b/src/assets/icons/expand-full.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
index 4a5a7c12..28da215b 100644
--- a/src/components/Pagination.tsx
+++ b/src/components/Pagination.tsx
@@ -10,6 +10,7 @@ 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
-
-
-
- - We are working on the new Stack Components experience. -
-- Meanwhile you can use the CLI to manage your {snakeCaseToLowerCase(type)}. -
-
+
+
+
+ -
+ {/*
{component.data.id}
+{component.data.body?.flavor}
+ + } + /> +
+
+
+
+ );
+}
+
+function ComponentName({ componentId }: Props) {
+ const component = useComponent(componentId);
+
+ if (component.isError) return null;
+ if (component.isPending) return {id}
+{component.data.name}
; +} + +function ComponentIcon({ componentId }: Props) { + const component = useComponent(componentId); + + if (component.isError) return null; + if (component.isPending) return
+
+
+
+
+
+
+
+
+
+
+
+ {stacksTabContent}
+
+
+
+ );
+}
diff --git a/src/components/stack-components/component-detail/hooks.ts b/src/components/stack-components/component-detail/hooks.ts
new file mode 100644
index 00000000..98b3f624
--- /dev/null
+++ b/src/components/stack-components/component-detail/hooks.ts
@@ -0,0 +1,6 @@
+import { componentQueries } from "@/data/components";
+import { useQuery } from "@tanstack/react-query";
+
+export function useComponent(id: string) {
+ return useQuery({ ...componentQueries.componentDetail(id), throwOnError: true });
+}
diff --git a/src/components/stack-components/component-detail/service.ts b/src/components/stack-components/component-detail/service.ts
new file mode 100644
index 00000000..42c23e9e
--- /dev/null
+++ b/src/components/stack-components/component-detail/service.ts
@@ -0,0 +1,15 @@
+import { useSearchParams } from "react-router-dom";
+import { z } from "zod";
+
+const tabParamSchema = z.object({
+ tab: z.enum(["configuration", "stacks"]).optional().default("configuration").catch("stacks")
+});
+
+export function useSelectedTab() {
+ const [searchParams] = useSearchParams();
+ const { tab } = tabParamSchema.parse({
+ tab: searchParams.get("tab") || undefined
+ });
+
+ return tab;
+}
diff --git a/src/components/stack-components/component-sheet/index.tsx b/src/components/stack-components/component-sheet/index.tsx
new file mode 100644
index 00000000..dc12aee2
--- /dev/null
+++ b/src/components/stack-components/component-sheet/index.tsx
@@ -0,0 +1,48 @@
+"use client";
+import ChevronRight from "@/assets/icons/chevron-right-double.svg?react";
+import Expand from "@/assets/icons/expand-full.svg?react";
+import { Sheet, SheetClose, SheetContent, SheetTrigger } from "@zenml-io/react-component-library";
+import { routes } from "@/router/routes";
+import { Button } from "@zenml-io/react-component-library/components/server";
+import { PropsWithChildren } from "react";
+import { Link } from "react-router-dom";
+import { StackComponentsDetailHeader } from "../component-detail/Header";
+import { StackComponentTabs } from "../component-detail/Tabs";
+import { StackList } from "./stacks-tab/StackList";
+
+type Props = {
+ componentId: string;
+ onOpenChange?: (isOpen: boolean) => void;
+};
+
+export function ComponentSheet({ children, onOpenChange, componentId }: PropsWithChildren
+
+
+
+
+
+
+
+
+
+
+ {
+ setPage(1);
+ if (!Boolean(val)) setSearch(undefined);
+ setSearch(`contains:${val}`);
+ }}
+ searchParams={{}}
+ />
+
+
+
+
+
+
+
+
+ {data ? (
+
+ {data ? (
+ data.total_pages > 1 && (
+
+
+ {name[0]}
+
+
+ );
+ }
+ },
+ {
+ id: "author",
+ header: "Author",
+ accessorFn: (row) => ({ author: row.body?.user }),
+ cell: ({ getValue }) => {
+ const { author } = getValue<{ author?: User }>();
+ if (!author) return null;
+ return
+
+
+
+ {name}
+
+
+ {id.split("-")[0]}
+
+
-
-
-
+
+ {component.name}
+
-
-
+
+
+
+
);
}
@@ -41,15 +40,14 @@ export function ComponentCollapsible({ component, run }: Props) {
}
data={settings}
>
-
-
-
+
);
}
diff --git a/src/components/stacks/info/ComponentInfoDialog.tsx b/src/components/stacks/info/ComponentInfoDialog.tsx
deleted file mode 100644
index e04873b0..00000000
--- a/src/components/stacks/info/ComponentInfoDialog.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { snakeCaseToDashCase, snakeCaseToLowerCase, snakeCaseToTitleCase } from "@/lib/strings";
-import {
- Dialog,
- DialogContent,
- DialogHeader,
- DialogTitle,
- DialogTrigger
-} from "@zenml-io/react-component-library/components/client";
-import { ComponentPropsWithoutRef, ElementRef, forwardRef } from "react";
-import { InfoBox } from "../../Infobox";
-import { StackComponentType } from "@/types/components";
-import { Codesnippet } from "../../CodeSnippet";
-
-type Props = {
- name: string;
- type: StackComponentType;
-};
-export const ComponentInfoDialog = forwardRef<
- ElementRef,
- ComponentPropsWithoutRef & Props
->(({ name, children, type, ...rest }, ref) => {
- {
- return (
-
- );
- }
-});
-
-ComponentInfoDialog.displayName = "ComponentInfoDialog";
diff --git a/src/data/components/component-detail-query.ts b/src/data/components/component-detail-query.ts
index 1851ed6f..ac22c68f 100644
--- a/src/data/components/component-detail-query.ts
+++ b/src/data/components/component-detail-query.ts
@@ -1,20 +1,12 @@
import { FetchError } from "@/lib/fetch-error";
-import { createApiPath, apiPaths } from "../api";
-import { UseQueryOptions, useQuery } from "@tanstack/react-query";
-import { StackComponent } from "@/types/components";
import { notFound } from "@/lib/not-found-error";
+import { StackComponent } from "@/types/components";
+import { apiPaths, createApiPath } from "../api";
import { fetcher } from "../fetch";
-type ComponentDetail = {
- componentId: string;
-};
-
-export function getComponentDetailQueryKey({ componentId }: ComponentDetail) {
- return ["components", componentId];
-}
-
-export async function fetchComponentDetail({ componentId }: ComponentDetail) {
+export async function fetchComponentDetail(componentId: string): Promise {
const url = createApiPath(apiPaths.components.detail(componentId));
+
const res = await fetcher(url, {
method: "GET",
headers: {
@@ -22,27 +14,23 @@ export async function fetchComponentDetail({ componentId }: ComponentDetail) {
}
});
- if (res.status === 404) {
- notFound();
- }
+ if (res.status === 404) notFound();
if (!res.ok) {
+ const errorData: string = await res
+ .json()
+ .then((data) => {
+ if (Array.isArray(data.detail)) {
+ return data.detail[1];
+ }
+ return data.detail;
+ })
+ .catch(() => "Error while fetching stack components");
throw new FetchError({
- message: `Error while fetching component ${componentId}`,
status: res.status,
- statusText: res.statusText
+ statusText: res.statusText,
+ message: errorData
});
}
return res.json();
}
-
-export function useComponentDetail(
- params: ComponentDetail,
- options?: Omit, "queryKey" | "queryFn">
-) {
- return useQuery({
- queryKey: getComponentDetailQueryKey(params),
- queryFn: () => fetchComponentDetail(params),
- ...options
- });
-}
diff --git a/src/data/components/components-list.ts b/src/data/components/components-list.ts
index 01a698ef..768527c3 100644
--- a/src/data/components/components-list.ts
+++ b/src/data/components/components-list.ts
@@ -1,10 +1,9 @@
import { FetchError } from "@/lib/fetch-error";
+import { notFound } from "@/lib/not-found-error";
import { objectToSearchParams } from "@/lib/url";
-
+import { StackComponentListParams, StackComponentPage } from "@/types/components";
import { apiPaths, createApiPath } from "../api";
import { fetcher } from "../fetch";
-import { notFound } from "@/lib/not-found-error";
-import { StackComponentListParams, StackComponentPage } from "@/types/components";
export async function fetchComponents(
queryParams: StackComponentListParams
diff --git a/src/data/components/index.ts b/src/data/components/index.ts
index e8e2bb77..43a55518 100644
--- a/src/data/components/index.ts
+++ b/src/data/components/index.ts
@@ -1,12 +1,13 @@
import { infiniteQueryOptions, queryOptions } from "@tanstack/react-query";
import { fetchComponents } from "./components-list";
import { StackComponentListParams } from "@/types/components";
+import { fetchComponentDetail } from "./component-detail-query";
export const componentQueries = {
all: ["components"],
componentListInfinite: (queryParams: StackComponentListParams) =>
infiniteQueryOptions({
- queryKey: [...componentQueries.all, queryParams],
+ queryKey: [...componentQueries.all, queryParams, "infinite"],
queryFn: async ({ pageParam }) => fetchComponents({ ...queryParams, page: pageParam }),
getNextPageParam: (lastPage) =>
lastPage.index < lastPage.total_pages ? lastPage.index + 1 : null,
@@ -16,5 +17,10 @@ export const componentQueries = {
queryOptions({
queryKey: [...componentQueries.all, queryParams],
queryFn: async () => fetchComponents(queryParams)
+ }),
+ componentDetail: (componentId: string) =>
+ queryOptions({
+ queryKey: [...componentQueries.all, componentId],
+ queryFn: async () => fetchComponentDetail(componentId)
})
};
diff --git a/src/layouts/AuthenticatedLayout/Sidebar.tsx b/src/layouts/AuthenticatedLayout/Sidebar.tsx
index 33068d2e..1cb00868 100644
--- a/src/layouts/AuthenticatedLayout/Sidebar.tsx
+++ b/src/layouts/AuthenticatedLayout/Sidebar.tsx
@@ -99,6 +99,7 @@ export function Sidebar() {
id="stacks-sidebar-link"
routePatterns={[
routes.components.overview,
+ routes.components.detail(":componentId"),
routes.stacks.overview,
routes.stacks.create.index,
routes.stacks.create.newInfra,
diff --git a/src/router/Router.tsx b/src/router/Router.tsx
index 190205fc..dc94ced3 100644
--- a/src/router/Router.tsx
+++ b/src/router/Router.tsx
@@ -36,6 +36,7 @@ const GeneralSettings = lazy(() => import("@/app/settings/general/page"));
// Components
const Components = lazy(() => import("@/app/components/page"));
+const ComponentDetail = lazy(() => import("@/app/components/[componentId]/page"));
//Stacks
const Stacks = lazy(() => import("@/app/stacks/page"));
@@ -216,6 +217,15 @@ export const router = createBrowserRouter(
}
/>
+
+
+ }
+ />
{component.id.split("-")[0]}