From 74e55b626cc354f21bfa89ff2c138c7f229e02ec Mon Sep 17 00:00:00 2001 From: Tim Zadorozhny Date: Fri, 31 Oct 2025 16:09:13 +0100 Subject: [PATCH 1/2] custom empty state --- src/app/snapshots/page.content.tsx | 42 ++++++++++++++++++++ src/assets/illustrations/empty-snapshots.svg | 22 ++++++++++ 2 files changed, 64 insertions(+) create mode 100644 src/assets/illustrations/empty-snapshots.svg diff --git a/src/app/snapshots/page.content.tsx b/src/app/snapshots/page.content.tsx index 017ca2428..6c8241e83 100644 --- a/src/app/snapshots/page.content.tsx +++ b/src/app/snapshots/page.content.tsx @@ -3,6 +3,11 @@ import { SnapshotTableToolbar } from "@/components/pipeline-snapshots/list/toolb import { useSnapshotListQueryParams } from "@/components/pipeline-snapshots/list/use-queryparams"; import { PipelineSnapshotListQueryParams } from "@/types/pipeline-snapshots"; import { useGlobalSnapshotColumns } from "./columns"; +import { pipelineSnapshotQueries } from "@/data/pipeline-snapshots"; +import { useQuery } from "@tanstack/react-query"; +import EmptySnapshots from "@/assets/illustrations/empty-snapshots.svg?react"; +import { Button } from "@zenml-io/react-component-library"; +import Plus from "@/assets/icons/plus.svg?react"; export function GlobalSnapshotsContent() { const columns = useGlobalSnapshotColumns(); @@ -13,6 +18,24 @@ export function GlobalSnapshotsContent() { sort_by: "desc:updated" }; + const { data, isPending, isError } = useQuery({ + // empty params since we want to check if there are any results regardless of the search filter. + ...pipelineSnapshotQueries.list({ named_only: true }), + throwOnError: true + }); + + if (isPending) { + return null; + } + + if (isError) { + return
Error loading snapshots
; + } + + if (data.items.length === 0) { + return ; + } + return ( <> @@ -20,3 +43,22 @@ export function GlobalSnapshotsContent() { ); } + +function EmptyState() { + return ( +
+ +

No Snapshots Available

+
+

It looks like there are no snapshots created yet.

+

Run a pipeline in a remote stack to get started.

+
+
+ +
+
+ ); +} diff --git a/src/assets/illustrations/empty-snapshots.svg b/src/assets/illustrations/empty-snapshots.svg new file mode 100644 index 000000000..6d8bceb5f --- /dev/null +++ b/src/assets/illustrations/empty-snapshots.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + From 0ab7819b9397447e37e0b107659f856467d8ca45 Mon Sep 17 00:00:00 2001 From: Tim Zadorozhny Date: Fri, 31 Oct 2025 17:41:33 +0100 Subject: [PATCH 2/2] icon correction --- src/app/snapshots/page.content.tsx | 10 ++++-- src/assets/illustrations/empty-snapshots.svg | 35 +++++++++++--------- 2 files changed, 26 insertions(+), 19 deletions(-) diff --git a/src/app/snapshots/page.content.tsx b/src/app/snapshots/page.content.tsx index 6c8241e83..355456cf6 100644 --- a/src/app/snapshots/page.content.tsx +++ b/src/app/snapshots/page.content.tsx @@ -8,6 +8,8 @@ import { useQuery } from "@tanstack/react-query"; import EmptySnapshots from "@/assets/illustrations/empty-snapshots.svg?react"; import { Button } from "@zenml-io/react-component-library"; import Plus from "@/assets/icons/plus.svg?react"; +import { Link } from "react-router-dom"; +import { routes } from "@/router/routes"; export function GlobalSnapshotsContent() { const columns = useGlobalSnapshotColumns(); @@ -54,9 +56,11 @@ function EmptyState() {

Run a pipeline in a remote stack to get started.

-
diff --git a/src/assets/illustrations/empty-snapshots.svg b/src/assets/illustrations/empty-snapshots.svg index 6d8bceb5f..07274a2ef 100644 --- a/src/assets/illustrations/empty-snapshots.svg +++ b/src/assets/illustrations/empty-snapshots.svg @@ -1,22 +1,25 @@ - - - - - + + + + + + + + - - - - - - - - + + + + + + + + - + - - + +