feat: update Connect Command (#702)

Author: Cahllagerfeld

src/app/onboarding/Setup/Items.tsx

@@ -4,13 +4,15 @@ 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";
 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>

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>

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}`;
+	}
+}