feat: adjust overview pipelines (#914)

Author: Cahllagerfeld

src/app/overview/pipelines-grid/index.tsx

@@ -102,6 +102,7 @@ function PipelinesGrid({ pipelines }: Props) {
 						isDone={apiPipelines.some((p) => p.name === pipeline.directory)}
 						pipelineName={pipeline.directory}
 						displayName={pipeline.name}
+						deployable={pipeline.deployable ?? false}
 					/>
 				</li>
 			))}

src/app/overview/pipelines-grid/pipeline-item.tsx

@@ -12,9 +12,10 @@ type Props = {
 	displayName: string;
 	pipelineName: string;
 	isDone: boolean;
+	deployable: boolean;
 };
 
-export function PipelineItem({ displayName, pipelineName, isDone }: Props) {
+export function PipelineItem({ displayName, pipelineName, isDone, deployable }: Props) {
 	const [open, setOpen] = useState(false);
 	const content = useGithubPipelineContent(pipelineName, {
 		refetchOnWindowFocus: false,
@@ -36,6 +37,7 @@ export function PipelineItem({ displayName, pipelineName, isDone }: Props) {
 			pipelineContent={content.data}
 			open={open}
 			onOpenChange={setOpen}
+			deployable={deployable}
 		>
 			<Box className="space-y-5 p-5 text-start transition-shadow duration-200 hover:shadow-sm">
 				{isDone ? <Tick /> : <ProgressOutstanding />}

src/app/overview/pipelines-grid/pipeline-sheet.tsx

@@ -29,6 +29,7 @@ type Props = {
 	isDone: boolean;
 	name: string;
 	displayName: string;
+	deployable: boolean;
 };
 
 export function GithubPipelineSheet({
@@ -38,7 +39,8 @@ export function GithubPipelineSheet({
 	open,
 	name,
 	displayName,
-	isDone
+	isDone,
+	deployable
 }: PropsWithChildren<Props>) {
 	return (
 		<Sheet open={open} onOpenChange={onOpenChange}>
@@ -69,6 +71,14 @@ export function GithubPipelineSheet({
 								<p className="mb-1 text-text-sm text-theme-text-secondary">Run the pipeline.</p>
 								<Codesnippet code={`python ${name}.py`} />
 							</div>
+							{deployable && (
+								<div>
+									<p className="mb-1 text-text-sm text-theme-text-secondary">
+										Deploy the pipeline.
+									</p>
+									<Codesnippet code={`zenml pipeline deploy ${name}.${name}`} />
+								</div>
+							)}
 							<HelpBox link="https://docs.zenml.io/user-guides/starter-guide/create-an-ml-pipeline" />
 						</Box>
 					) : (

src/components/sheet/resizable-sheet.tsx

@@ -25,7 +25,11 @@ export const ResizableSheetContent = forwardRef<
 					<SheetClose className="absolute inset-0 hover:cursor-default" />
 				</Panel>
 				<PanelResizeHandle className="w-[1px] bg-theme-border-moderate transition-colors duration-200 data-[resize-handle-state=drag]:bg-theme-border-bold data-[resize-handle-state=hover]:bg-theme-border-bold" />
-				<Panel className="!overflow-y-auto bg-theme-surface-primary" minSize={25} defaultSize={50}>
+				<Panel
+					className="!overflow-y-auto bg-theme-surface-secondary"
+					minSize={25}
+					defaultSize={50}
+				>
 					{children}
 				</Panel>
 			</PanelGroup>

src/data/github/pipelines.ts

@@ -4,7 +4,8 @@ import { z } from "zod";
 const githubPipelineOrderEntrySchema = z.object({
 	index: z.number(),
 	directory: z.string(),
-	name: z.string()
+	name: z.string(),
+	deployable: z.boolean()
 });
 
 const githubPipelinesOrderSchema = z.object({