fix:delete run in pipeline detail (#679)

Author: Aagya-Sharma

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

@@ -6,11 +6,14 @@ import { useAllPipelineRuns } from "@/data/pipeline-runs/all-pipeline-runs-query
 import { SearchField } from "@/components/SearchField";
 import Pagination from "@/components/Pagination";
 import { getPipelineDetailColumns } from "./columns";
+import { useRunsSelectorContext } from "../RunsTab/RunsSelectorContext";
+import { RunsButtonGroup } from "../RunsTab/ButtonGroup";
 
 export function PipelineRunsTable() {
 	const { namespace } = useParams() as { namespace: string };
 	const params = usePipelineRunParams();
 	const cols = getPipelineDetailColumns();
+	const { selectedRuns } = useRunsSelectorContext();
 
 	const { data, refetch } = useAllPipelineRuns(
 		{
@@ -26,7 +29,7 @@ export function PipelineRunsTable() {
 	return (
 		<div className="flex flex-col gap-5 p-5">
 			<div className="flex items-center justify-between">
-				<SearchField searchParams={params} />
+				{selectedRuns.length ? <RunsButtonGroup /> : <SearchField searchParams={params} />}
 				<Button intent="primary" emphasis="subtle" size="md" onClick={() => refetch()}>
 					<Refresh className="h-5 w-5 fill-theme-text-brand" />
 					Refresh

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

@@ -17,9 +17,23 @@ import {
 	TooltipTrigger
 } from "@zenml-io/react-component-library";
 import { Link } from "react-router-dom";
+import { RunDropdown } from "../RunsTab/RunDropdown";
+import { RunSelector } from "../RunsTab/RunSelector";
 
 export function getPipelineDetailColumns(): ColumnDef<PipelineRun>[] {
 	return [
+		{
+			id: "check",
+			header: "",
+			meta: {
+				width: "1%"
+			},
+			accessorFn: (row) => ({ id: row.id }),
+			cell: ({ getValue }) => {
+				const { id } = getValue<{ id: string }>();
+				return <RunSelector id={id} />;
+			}
+		},
 		{
 			id: "run",
 			header: "Run",
@@ -129,6 +143,16 @@ export function getPipelineDetailColumns(): ColumnDef<PipelineRun>[] {
 				const { author } = getValue<{ author: User }>();
 				return <InlineAvatar username={author.name} />;
 			}
+		},
+		{
+			id: "admin_actions",
+			header: "",
+			meta: {
+				width: "5%"
+			},
+			cell: ({ row }) => {
+				return <RunDropdown id={row.original.id} />;
+			}
 		}
 	];
 }

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

@@ -3,20 +3,26 @@ import { Header } from "./Header";
 import { PipelineRunsTable } from "./RunsTable";
 import { useEffect } from "react";
 import { useBreadcrumbsContext } from "@/layouts/AuthenticatedLayout/BreadcrumbsContext";
+import { RunsSelectorProvider } from "../RunsTab/RunsSelectorContext";
 
 export default function PipelineNamespacePage() {
 	const { namespace } = useParams() as { namespace: string };
 	const { setCurrentBreadcrumbData } = useBreadcrumbsContext();
 
 	useEffect(() => {
 		namespace &&
-			setCurrentBreadcrumbData({ segment: "pipeline_detail", data: { name: namespace } });
+			setCurrentBreadcrumbData({
+				segment: "pipeline_detail",
+				data: { name: namespace }
+			});
 	}, [namespace]);
 
 	return (
 		<div>
-			<Header namespace={namespace} />
-			<PipelineRunsTable />
+			<RunsSelectorProvider>
+				<Header namespace={namespace} />
+				<PipelineRunsTable />
+			</RunsSelectorProvider>
 		</div>
 	);
 }