refactor: remove pipeline versions (#636)

Author: Cahllagerfeld

src/app/pipelines/[namespace]/columns.tsx

@@ -6,11 +6,10 @@ import { InlineAvatar } from "@/components/InlineAvatar";
 import { routes } from "@/router/routes";
 import { CodeRepository } from "@/types/code-repository";
 import { PipelineRun, PipelineRunBody } from "@/types/pipeline-runs";
-import { PipelineBody } from "@/types/pipelines";
 import { Stack } from "@/types/stack";
 import { User } from "@/types/user";
 import { ColumnDef } from "@tanstack/react-table";
-import { Badge, Tag } from "@zenml-io/react-component-library";
+import { Tag } from "@zenml-io/react-component-library";
 import { Link } from "react-router-dom";
 
 export function getPipelineDetailColumns(): ColumnDef<PipelineRun>[] {
@@ -48,19 +47,6 @@ export function getPipelineDetailColumns(): ColumnDef<PipelineRun>[] {
 				);
 			}
 		},
-		{
-			id: "version",
-			header: "Version",
-			accessorFn: (row) => row.body?.pipeline?.body?.version,
-			cell: ({ getValue }) => {
-				const version = getValue<PipelineBody["version"]>();
-				return (
-					<Badge color="purple" className="inline-flex" size="sm">
-						{version}
-					</Badge>
-				);
-			}
-		},
 		{
 			id: "stack",
 			header: "Stack",

src/app/pipelines/columns.tsx

@@ -1,24 +1,24 @@
-import RunIcon from "@/assets/icons/terminal.svg?react";
 import PipelineIcon from "@/assets/icons/pipeline.svg?react";
+import RunIcon from "@/assets/icons/terminal.svg?react";
+import { CopyButton } from "@/components/CopyButton";
 import { ExecutionStatusIcon, getExecutionStatusColor } from "@/components/ExecutionStatus";
+import { routes } from "@/router/routes";
 import { ExecutionStatus } from "@/types/pipeline-runs";
-import { PipelineNamespace, PipelineNamespaceBody } from "@/types/pipelines";
+import { Pipeline } from "@/types/pipelines";
 import { ColumnDef } from "@tanstack/react-table";
 import { Tag, TagProps } from "@zenml-io/react-component-library";
 import { Link } from "react-router-dom";
-import { routes } from "@/router/routes";
-import { CopyButton } from "@/components/CopyButton";
 
-export function getPipelineColumns(): ColumnDef<PipelineNamespace>[] {
+export function getPipelineColumns(): ColumnDef<Pipeline>[] {
 	return [
 		{
 			id: "name",
 			header: "Pipeline",
 			accessorFn: (row) => ({ name: row.name, status: row.body?.latest_run_status }),
 			cell: ({ getValue }) => {
 				const { name, status } = getValue<{
-					name: PipelineNamespace["name"];
-					status: PipelineNamespaceBody["latest_run_status"];
+					name: string;
+					status: ExecutionStatus;
 				}>();
 
 				return (
@@ -46,7 +46,7 @@ export function getPipelineColumns(): ColumnDef<PipelineNamespace>[] {
 			cell: ({ getValue }) => {
 				const { runId, status } = getValue<{
 					runId?: string;
-					status?: PipelineNamespaceBody["latest_run_status"];
+					status?: ExecutionStatus;
 				}>();
 
 				if (!runId || !status) return <div>No run</div>;

src/app/pipelines/page.tsx

@@ -1,27 +1,23 @@
 import Refresh from "@/assets/icons/refresh.svg?react";
 import { PageHeader } from "@/components/PageHeader";
+import Pagination from "@/components/Pagination";
 import { SearchField } from "@/components/SearchField";
-import { useAllPipelineNamespaces } from "@/data/pipelines/pipeline-namespaces-query";
+import { pipelineQueries } from "@/data/pipelines";
+import { useBreadcrumbsContext } from "@/layouts/AuthenticatedLayout/BreadcrumbsContext";
+import { useQuery } from "@tanstack/react-query";
 import { Button, DataTable, Skeleton } from "@zenml-io/react-component-library";
+import { useEffect } from "react";
 import { getPipelineColumns } from "./columns";
 import { usePipelineOverviewSearchParams } from "./service";
-import Pagination from "@/components/Pagination";
-import { useBreadcrumbsContext } from "@/layouts/AuthenticatedLayout/BreadcrumbsContext";
-import { useEffect } from "react";
 
 export default function PipelinesPage() {
 	const { setCurrentBreadcrumbData } = useBreadcrumbsContext();
 	const queryParams = usePipelineOverviewSearchParams();
 
-	const { data, refetch } = useAllPipelineNamespaces(
-		{
-			params: {
-				...queryParams,
-				sort_by: "desc:updated"
-			}
-		},
-		{ throwOnError: true }
-	);
+	const { data, refetch } = useQuery({
+		...pipelineQueries.pipelineList({ ...queryParams, sort_by: "desc:latest_run" }),
+		throwOnError: true
+	});
 
 	useEffect(() => {
 		setCurrentBreadcrumbData({ segment: "pipelines", data: null });

src/app/pipelines/service.tsx

@@ -1,4 +1,4 @@
-import { PipelineNamespacesParams } from "@/types/pipelines";
+import { PipelineListParams } from "@/types/pipelines";
 import { useSearchParams } from "react-router-dom";
 
 import { z } from "zod";
@@ -11,7 +11,7 @@ const filterParamsSchema = z.object({
 	operator: z.enum(["and", "or"]).optional()
 });
 
-export function usePipelineOverviewSearchParams(): PipelineNamespacesParams {
+export function usePipelineOverviewSearchParams(): PipelineListParams {
 	const [searchParams] = useSearchParams();
 
 	const { page, name, operator } = filterParamsSchema.parse({

src/app/runs/[id]/_Tabs/Overview/Details.tsx

@@ -87,9 +87,6 @@ export function Details() {
 							>
 								<Pipelines className="h-4 w-4 fill-theme-text-brand" />
 								{data.body?.pipeline?.name}
-								<div className="rounded-sm bg-primary-50 px-1 py-0.25">
-									{data.body?.pipeline?.body?.version}
-								</div>
 							</Tag>
 						</Link>
 					</Value>

src/app/stacks/create/new-infrastructure/Steps/schemas.ts

@@ -1,7 +1,7 @@
 import { z } from "zod";
 import { stackNameSchema } from "../../components/sharedSchema";
 
-export const providerSchema = z.enum(["aws", "gcp"]);
+export const providerSchema = z.enum(["aws", "gcp", "azure"]);
 
 export const providerFormSchema = z.object({
 	provider: providerSchema

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

@@ -71,10 +71,6 @@ export function DetailsCard({ artifactVersionId }: Props) {
 							>
 								<Pipelines className="mr-1 h-4 w-4 fill-theme-text-brand" />
 								{pipelineRun.data.body?.pipeline?.name}
-
-								<div className="rounded-sm bg-primary-50 px-1 py-0.25">
-									{pipelineRun.data.body?.pipeline?.body?.version}
-								</div>
 							</Tag>
 						</Link>
 					}

src/components/steps/step-sheet/DetailsTab.tsx

@@ -181,9 +181,6 @@ export function StepDetailsTab({ stepId, runId }: Props) {
 									>
 										<Pipelines className="mr-1 h-4 w-4 fill-theme-text-brand" />
 										{pipelineRunData.body?.pipeline?.name}
-										<div className="rounded-sm bg-primary-50 px-1 py-0.25">
-											{pipelineRunData.body?.pipeline?.body?.version}
-										</div>
 									</Tag>
 								</Link>
 							}

src/data/api.ts

@@ -7,7 +7,7 @@ export const apiPaths = {
 	settings: "/settings",
 	onboarding: "/onboarding_state",
 	pipelines: {
-		namespaces: "/pipeline_namespaces"
+		all: "/pipelines"
 	},
 	artifactVersions: {
 		detail: (versionId: string) => `/artifact_versions/${versionId}`,

src/data/pipelines/index.ts

@@ -0,0 +1,12 @@
+import { PipelineListParams } from "@/types/pipelines";
+import { queryOptions } from "@tanstack/react-query";
+import { fetchAllPipelines } from "./pipeline-list-query";
+
+export const pipelineQueries = {
+	all: ["pipelines"],
+	pipelineList: (queryParams: PipelineListParams) =>
+		queryOptions({
+			queryKey: [...pipelineQueries.all, queryParams],
+			queryFn: async () => fetchAllPipelines({ params: queryParams })
+		})
+};