From 33bc5d7e808c1b0bb6dee936b6251aa37373aa72 Mon Sep 17 00:00:00 2001
From: Cahllagerfeld <43843195+Cahllagerfeld@users.noreply.github.com>
Date: Mon, 2 Dec 2024 14:48:17 +0100
Subject: [PATCH] feat: update Connect Command (#702)

---
 src/app/onboarding/Setup/Items.tsx |  4 +++-
 src/app/page.tsx                   | 11 +++++++----
 src/lib/login-command.ts           | 13 +++++++++++++
 3 files changed, 23 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/login-command.ts

diff --git a/src/app/onboarding/Setup/Items.tsx b/src/app/onboarding/Setup/Items.tsx
index 343ad5a8..cfb544f7 100644
--- a/src/app/onboarding/Setup/Items.tsx
+++ b/src/app/onboarding/Setup/Items.tsx
@@ -4,6 +4,7 @@ import { Codesnippet } from "@/components/CodeSnippet";
 import { HelpBox } from "@/components/fallback-pages/Helpbox";
 import { ChecklistItem } from "@/components/onboarding/ChecklistItem";
 import { useServerInfo } from "@/data/server/info-query";
+import { getLoginCommand } from "@/lib/login-command";
 import { routes } from "@/router/routes";
 import { OnboardingStep } from "@/types/onboarding";
 import { Box, Button, Skeleton, buttonVariants } from "@zenml-io/react-component-library";
@@ -11,6 +12,7 @@ import { Link } from "react-router-dom";
 
 export function ConnectZenMLStep({ completed, hasDownstreamStep, active }: OnboardingStep) {
 	const { data } = useServerInfo({ throwOnError: true });
+
 	return (
 		<ChecklistItem
 			active={active}
@@ -27,7 +29,7 @@ export function ConnectZenMLStep({ completed, hasDownstreamStep, active }: Onboa
 				</div>
 				<div>
 					<p className="mb-1 text-text-sm text-theme-text-secondary">Login to your ZenML Server</p>
-					<Codesnippet code={`zenml connect --url ${window.location.origin}`} />
+					<Codesnippet code={getLoginCommand(data?.deployment_type || "other")} />
 				</div>
 				<HelpBox link="https://docs.zenml.io/user-guide/production-guide/deploying-zenml#connecting-to-a-deployed-zenml" />
 			</div>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5a4ce9bb..c53f823e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,10 +1,12 @@
+import External from "@/assets/icons/link-external.svg?react";
 import CloudSquares from "@/assets/illustrations/cloud-squares.svg";
+import { useServerInfo } from "@/data/server/info-query";
+import { getLoginCommand } from "@/lib/login-command";
+import { routes } from "@/router/routes";
 import { Badge, Box, Button } from "@zenml-io/react-component-library";
+import { Link } from "react-router-dom";
 import { Codesnippet } from "../components/CodeSnippet";
-import External from "@/assets/icons/link-external.svg?react";
 import { OverviewHeader } from "./Header";
-import { Link } from "react-router-dom";
-import { routes } from "@/router/routes";
 
 export default function IndexPage() {
 	return (
@@ -19,6 +21,7 @@ export default function IndexPage() {
 }
 
 function OverviewContent() {
+	const { data } = useServerInfo();
 	return (
 		<Box className="flex flex-col-reverse overflow-hidden lg:flex-row">
 			<div className="w-full px-7 py-5 lg:w-2/3">
@@ -40,7 +43,7 @@ function OverviewContent() {
 						<Codesnippet
 							codeClasses="truncate"
 							className="truncate"
-							code={`zenml connect --url=${window.location.origin}`}
+							code={getLoginCommand(data?.deployment_type || "other")}
 						/>
 					</div>
 				</div>
diff --git a/src/lib/login-command.ts b/src/lib/login-command.ts
new file mode 100644
index 00000000..6560d9cd
--- /dev/null
+++ b/src/lib/login-command.ts
@@ -0,0 +1,13 @@
+import { DeploymentType } from "../types/server";
+
+export function getLoginCommand(deploymentType: DeploymentType) {
+	switch (deploymentType) {
+		case "local":
+			return "zenml login --local";
+
+		case "docker":
+			return "zenml login --local --docker";
+		default:
+			return `zenml login ${window.location.origin}`;
+	}
+}