Skip to content

Commit ff75470

Browse files
CahllagerfeldCahllagerfeld
authored
chore: minor bugfixes (#579)
1 parent e121daa commit ff75470

File tree

12 files changed

+124
-41
lines changed

12 files changed

+124
-41
lines changed

‎src/app/onboarding/ProductionSetup/index.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import ChevronDown from "@/assets/icons/chevron-down.svg?react";
22
import { Tick } from "@/components/Tick";
33
import { useServerSettings } from "@/data/server/get-server-settings";
4+
import { useServerInfo } from "@/data/server/info-query";
5+
import { PRODUCTION_SETUP_ITEMS } from "@/lib/constants";
6+
import { getOnboardingState, getProgress, getStarterSetupItems } from "@/lib/onboarding";
7+
import { checkIsLocalServer } from "@/lib/server";
48
import {
59
Collapsible,
610
CollapsibleContent,
@@ -10,21 +14,24 @@ import {
1014
cn
1115
} from "@zenml-io/react-component-library";
1216
import { useState } from "react";
13-
import { getOnboardingState, getProgress } from "@/lib/onboarding";
1417
import {
1518
CreateArtifactStore,
1619
CreateNewStack,
1720
CreateServiceConnector,
1821
RunNewPipeline
1922
} from "./Items";
20-
import { PRODUCTION_SETUP_ITEMS, STARTER_SETUP_ITEMS } from "@/lib/constants";
2123

2224
export function ProductionSetupChecklist() {
2325
const { isError, isPending, data } = useServerSettings({ throwOnError: true });
26+
const serverInfo = useServerInfo();
2427
const [open, setOpen] = useState(true);
2528

26-
if (isPending) return <Skeleton className="h-[200px] w-full" />;
27-
if (isError) return null;
29+
if (isPending || serverInfo.isPending) return <Skeleton className="h-[200px] w-full" />;
30+
if (isError || serverInfo.isError) return null;
31+
32+
const STARTER_SETUP_ITEMS = getStarterSetupItems(
33+
checkIsLocalServer(serverInfo.data.deployment_type || "other")
34+
);
2835

2936
const onboardingState = getOnboardingState(data);
3037
const isStarterSetupFinished =

‎src/app/onboarding/StarterSetup/Items.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,12 @@ export function RunFirstPipeline({ onboardingState }: Props) {
4848
</p>
4949
<Codesnippet code="git clone --depth 1 https://github.com/zenml-io/zenml.git && cd zenml/examples/quickstart" />
5050
</div>
51+
<div>
52+
<p className="mb-1 text-text-sm text-theme-text-secondary">
53+
Initialize ZenML in the current directory
54+
</p>
55+
<Codesnippet code="zenml init" />
56+
</div>
5157
<div>
5258
<p className="mb-1 text-text-sm text-theme-text-secondary">
5359
Install the remaining requirements apart from ZenML

‎src/app/onboarding/StarterSetup/index.tsx‎

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,29 @@
1+
import ChevronDown from "@/assets/icons/chevron-down.svg?react";
2+
import { Tick } from "@/components/Tick";
3+
import { useServerSettings } from "@/data/server/get-server-settings";
4+
import { useServerInfo } from "@/data/server/info-query";
5+
import { getOnboardingState, getProgress, getStarterSetupItems } from "@/lib/onboarding";
6+
import { checkIsLocalServer } from "@/lib/server";
17
import {
28
Collapsible,
39
CollapsibleContent,
410
CollapsibleTrigger,
511
RadialProgress,
612
Skeleton
713
} from "@zenml-io/react-component-library";
8-
import ChevronDown from "@/assets/icons/chevron-down.svg?react";
914
import { useState } from "react";
10-
import { useServerSettings } from "@/data/server/get-server-settings";
1115
import { ConnectZenMLStep, RunFirstPipeline } from "./Items";
12-
import { Tick } from "@/components/Tick";
13-
import { getOnboardingState, getProgress } from "@/lib/onboarding";
14-
import { STARTER_SETUP_ITEMS } from "@/lib/constants";
1516

1617
export function StarterSetupList() {
1718
const { isError, isPending, data } = useServerSettings({ throwOnError: true });
19+
const serverInfo = useServerInfo();
1820
const [open, setOpen] = useState(true);
1921

20-
if (isPending) return <Skeleton className="h-[200px] w-full" />;
21-
if (isError) return null;
22+
if (isPending || serverInfo.isPending) return <Skeleton className="h-[200px] w-full" />;
23+
if (isError || serverInfo.isError) return null;
24+
25+
const isLocalServer = checkIsLocalServer(serverInfo.data.deployment_type || "other");
26+
const STARTER_SETUP_ITEMS = getStarterSetupItems(isLocalServer);
2227

2328
const doneItems = getProgress(getOnboardingState(data), STARTER_SETUP_ITEMS);
2429
const progress = (doneItems / STARTER_SETUP_ITEMS.length) * 100;
@@ -60,9 +65,11 @@ export function StarterSetupList() {
6065
</CollapsibleTrigger>
6166
<CollapsibleContent className="border-t border-theme-border-moderate p-5">
6267
<ul className="divide-y divide-theme-border-moderate">
63-
<li className="py-5 first:pt-0 last:pb-0">
64-
<ConnectZenMLStep onboardingState={getOnboardingState(data)} />
65-
</li>
68+
{!isLocalServer && (
69+
<li className="py-5 first:pt-0 last:pb-0">
70+
<ConnectZenMLStep onboardingState={getOnboardingState(data)} />
71+
</li>
72+
)}
6673
<li className="py-5 first:pt-0 last:pb-0">
6774
<RunFirstPipeline onboardingState={getOnboardingState(data)} />
6875
</li>

‎src/app/onboarding/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FallbackSupportCard, ResourcesCard } from "@/components/fallback-pages/Cards";
22
import { HeaderOnboardingBox } from "./Header";
3-
import { StarterSetupList } from "./StarterSetup";
43
import { ProductionSetupChecklist } from "./ProductionSetup";
4+
import { StarterSetupList } from "./StarterSetup";
55

66
export default function OnboardingPage() {
77
return (

‎src/components/onboarding/ChecklistItem.tsx‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
import Check from "@/assets/icons/check.svg?react";
2+
import ChevronDown from "@/assets/icons/chevron-down.svg?react";
3+
import { getServerSettingsKey, useServerSettings } from "@/data/server/get-server-settings";
4+
import { useUpdateServerSettings } from "@/data/server/update-server-settings-mutation";
5+
import { OnboardingChecklistItemName, OnboardingState } from "@/types/onboarding";
6+
import { useQueryClient } from "@tanstack/react-query";
17
import {
28
Button,
39
Collapsible,
@@ -7,12 +13,6 @@ import {
713
} from "@zenml-io/react-component-library";
814
import { PropsWithChildren, ReactNode, useState } from "react";
915
import { Tick } from "../Tick";
10-
import { useQueryClient } from "@tanstack/react-query";
11-
import { useUpdateServerSettings } from "@/data/server/update-server-settings-mutation";
12-
import { getServerSettingsKey, useServerSettings } from "@/data/server/get-server-settings";
13-
import { OnboardingChecklistItemName, OnboardingState } from "@/types/onboarding";
14-
import ChevronDown from "@/assets/icons/chevron-down.svg?react";
15-
import Check from "@/assets/icons/check.svg?react";
1616

1717
type Props = {
1818
completed: boolean;
@@ -37,10 +37,10 @@ export function ChecklistItem({
3737
}
3838
});
3939

40-
function markAsDone() {
40+
function toggleItem(isDone: boolean) {
4141
const newOnboardingState: OnboardingState = {
4242
...data?.metadata?.onboarding_state,
43-
[itemName]: true
43+
[itemName]: isDone
4444
};
4545
mutate({ onboarding_state: newOnboardingState });
4646
}
@@ -49,25 +49,34 @@ export function ChecklistItem({
4949
<Collapsible open={open} onOpenChange={setOpen}>
5050
<div className="flex w-full flex-col gap-3">
5151
<div className="flex w-full justify-between gap-2">
52+
{completed ? (
53+
<button onClick={() => toggleItem(false)}>
54+
<Tick className="shrink-0" />
55+
</button>
56+
) : (
57+
<ProgressOutstanding className="shrink-0" />
58+
)}
5259
<CollapsibleTrigger className="w-full">
5360
<ChecklistHeader title={title} completed={completed} />
5461
</CollapsibleTrigger>
5562
<div className="flex items-center gap-1">
5663
{!completed && active && (
5764
<Button
58-
onClick={markAsDone}
65+
onClick={() => toggleItem(true)}
5966
className="items-center whitespace-nowrap"
6067
intent="primary"
6168
emphasis="subtle"
6269
>
6370
<Check className="h-5 w-5 fill-primary-600" /> <span>Mark as done</span>
6471
</Button>
6572
)}
66-
<ChevronDown
67-
className={` ${
68-
open ? "" : "-rotate-90"
69-
} h-5 w-5 shrink-0 rounded-md fill-neutral-500`}
70-
/>
73+
<CollapsibleTrigger>
74+
<ChevronDown
75+
className={` ${
76+
open ? "" : "-rotate-90"
77+
} h-5 w-5 shrink-0 rounded-md fill-neutral-500`}
78+
/>
79+
</CollapsibleTrigger>
7180
</div>
7281
</div>
7382
{children && (
@@ -90,8 +99,7 @@ type HeaderProps = {
9099
export function ChecklistHeader({ completed, title }: HeaderProps) {
91100
return (
92101
<div className="flex w-full items-center justify-between gap-2">
93-
<div className="flex w-full items-center gap-2">
94-
{completed ? <Tick /> : <ProgressOutstanding />}
102+
<div className="flex w-full items-center">
95103
<div
96104
className={`font-semibold ${
97105
completed ? "text-theme-text-tertiary line-through decoration-theme-text-tertiary" : ""

‎src/layouts/AuthenticatedLayout/OnboardingItem.tsx‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,30 @@
1+
import ChevronRight from "@/assets/icons/chevron-right.svg?react";
12
import { useServerSettings } from "@/data/server/get-server-settings";
2-
import { PRODUCTION_SETUP_ITEMS, STARTER_SETUP_ITEMS } from "@/lib/constants";
3-
import { getOnboardingState, getProgress } from "@/lib/onboarding";
3+
import { useServerInfo } from "@/data/server/info-query";
4+
import { PRODUCTION_SETUP_ITEMS } from "@/lib/constants";
5+
import { getOnboardingState, getProgress, getStarterSetupItems } from "@/lib/onboarding";
6+
import { checkIsLocalServer } from "@/lib/server";
47
import { routes } from "@/router/routes";
58
import { Box, ProgressBar, Skeleton, useSidebarContext } from "@zenml-io/react-component-library";
69
import { Link } from "react-router-dom";
7-
import ChevronRight from "@/assets/icons/chevron-right.svg?react";
810

911
export function OnboardingItem() {
1012
const { isPending, isError, data } = useServerSettings({ throwOnError: true });
13+
const serverInfo = useServerInfo();
1114
const { isOpen } = useSidebarContext();
12-
if (isError) return null;
13-
if (isPending) {
15+
if (isError || serverInfo.isError) return null;
16+
if (isPending || serverInfo.isPending) {
1417
return (
1518
<Box className="w-full rounded-md p-2">
1619
<Skeleton className="h-5" />
1720
</Box>
1821
);
1922
}
23+
24+
const STARTER_SETUP_ITEMS = getStarterSetupItems(
25+
checkIsLocalServer(serverInfo.data.deployment_type || "other")
26+
);
27+
2028
const onboardingState = getOnboardingState(data || {});
2129
const isStarterSetupFinished =
2230
getProgress(onboardingState, STARTER_SETUP_ITEMS) === STARTER_SETUP_ITEMS.length;

‎src/lib/constants.ts‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,6 @@ export const StackComponentTypes: StackComponentType[] = [
1818
"model_registry"
1919
];
2020

21-
export const STARTER_SETUP_ITEMS: OnboardingChecklistItemName[] = [
22-
"connect_zenml",
23-
"run_first_pipeline"
24-
];
25-
2621
export const PRODUCTION_SETUP_ITEMS: OnboardingChecklistItemName[] = [
2722
"create_service_connector",
2823
"create_remote_artifact_store",

‎src/lib/onboarding.spec.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { describe, test, expect } from "vitest";
2+
import { getStarterSetupItems } from "./onboarding";
3+
4+
describe("returns the correct items for the starter setup based on the deployment type", () => {
5+
test("doesnt return connect step for local deployment", () => {
6+
const isLocal = true;
7+
const items = getStarterSetupItems(isLocal);
8+
expect(items).toEqual(["run_first_pipeline"]);
9+
});
10+
11+
test("includes the connect step for non-local deployments", () => {
12+
const isLocal = false;
13+
const items = getStarterSetupItems(isLocal);
14+
expect(items).toEqual(["connect_zenml", "run_first_pipeline"]);
15+
});
16+
});

‎src/lib/onboarding.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,10 @@ export function getProgress(
1818
) {
1919
return checklistItems.filter((item) => onboardingState[item]).length;
2020
}
21+
22+
export function getStarterSetupItems(isLocal: boolean): OnboardingChecklistItemName[] {
23+
return [
24+
...(isLocal ? [] : ["connect_zenml" as OnboardingChecklistItemName]),
25+
"run_first_pipeline"
26+
];
27+
}

‎src/lib/server.spec.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { DeploymentType } from "@/types/server";
2+
import { describe, test, expect } from "vitest";
3+
import { checkIsLocalServer } from "./server";
4+
5+
describe("returns if the server is deployed locally or not", () => {
6+
test("returns true if the deployment type is local", () => {
7+
const deploymentType: DeploymentType = "local";
8+
const isLocal = checkIsLocalServer(deploymentType);
9+
expect(isLocal).toBe(true);
10+
});
11+
12+
test("returns true if the deployment type is docker", () => {
13+
const deploymentType: DeploymentType = "docker";
14+
const isLocal = checkIsLocalServer(deploymentType);
15+
expect(isLocal).toBe(true);
16+
});
17+
18+
test("returns false if the deployment type is not local and not docker", () => {
19+
const deploymentType: DeploymentType = "other";
20+
const isLocal = checkIsLocalServer(deploymentType);
21+
expect(isLocal).toBe(false);
22+
});
23+
});

0 commit comments

Comments
 (0)