Skip to content

Commit dae3e69

Browse files
CahllagerfeldCahllagerfeld
authored
chore: Small Adjustments (#728)
1 parent e95604e commit dae3e69

File tree

7 files changed

+43
-44
lines changed

7 files changed

+43
-44
lines changed

‎src/app/components/create/flavor-step.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import ArrowLeft from "@/assets/icons/arrow-left.svg?react";
22
import { SelectFlavorList } from "@/components/stack-components/create-component/flavor-select";
33
import * as Wizard from "@/components/wizard/Wizard";
4+
import { snakeCaseToTitleCase } from "@/lib/strings";
45
import { StackComponentType } from "@/types/components";
56
import { Flavor } from "@/types/flavors";
67
import { Button } from "@zenml-io/react-component-library/components/server";
@@ -24,7 +25,7 @@ export function FlavorStep({ type, handleFlavorSelect, handleBack }: Props) {
2425
<ArrowLeft className="size-5 shrink-0" />
2526
<span className="sr-only">Go step back</span>
2627
</Button>
27-
<span>Select your Component Flavor</span>
28+
<span>Select your {snakeCaseToTitleCase(type)} Flavor</span>{" "}
2829
</Wizard.Header>
2930
<Wizard.Body>
3031
<SelectFlavorList type={type} setSelectedFlavor={handleFlavorSelect} />

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ export function ConnectZenMLStep({ completed, hasDownstreamStep, active }: Onboa
3131
<p className="mb-1 text-text-sm text-theme-text-secondary">Log in to your ZenML Server</p>
3232
<Codesnippet code={getLoginCommand(data?.deployment_type || "other")} />
3333
</div>
34-
<HelpBox link="https://docs.zenml.io/user-guide/production-guide/deploying-zenml#connecting-to-a-deployed-zenml" />
34+
<HelpBox link="https://docs.zenml.io/user-guides/production-guide/deploying-zenml#connecting-to-a-deployed-zenml" />
3535
</div>
3636
</ChecklistItem>
3737
);
@@ -93,7 +93,7 @@ export function RunFirstPipeline({ active, completed, hasDownstreamStep }: Onboa
9393
target="_blank"
9494
rel="noopener noreferrer"
9595
className={buttonVariants({ intent: "primary", emphasis: "subtle", size: "md" })}
96-
href="https://docs.zenml.io/user-guide/starter-guide/create-an-ml-pipeline"
96+
href="https://docs.zenml.io/user-guides/starter-guide/create-an-ml-pipeline"
9797
>
9898
Browse our docs
9999
</a>
@@ -116,7 +116,7 @@ export function CreateNewStack({ completed, active, hasDownstreamStep }: Onboard
116116
>
117117
<p className="mb-3">
118118
A stack configures how a pipeline is executed{" "}
119-
<LearnMoreLink href="https://docs.zenml.io/user-guide/production-guide/understand-stacks" />
119+
<LearnMoreLink href="https://docs.zenml.io/user-guides/production-guide/understand-stacks" />
120120
</p>
121121
<div className="space-y-5">
122122
<div className="space-y-3">
@@ -128,7 +128,7 @@ export function CreateNewStack({ completed, active, hasDownstreamStep }: Onboard
128128
</Link>
129129
</Button>
130130
</div>
131-
<HelpBox link="https://docs.zenml.io/user-guide/production-guide/understand-stacks" />
131+
<HelpBox link="https://docs.zenml.io/user-guides/production-guide/understand-stacks" />
132132
</div>
133133
</ChecklistItem>
134134
);
@@ -152,7 +152,7 @@ export function RunNewPipeline({ active, completed, hasDownstreamStep }: Onboard
152152
<Codesnippet wrap codeClasses="whitespace-pre-wrap" code="python run.py" />
153153
</div>
154154
<div>
155-
<HelpBox link="https://docs.zenml.io/user-guide/production-guide/understand-stacks" />
155+
<HelpBox link="https://docs.zenml.io/user-guides/production-guide/understand-stacks" />
156156
</div>
157157
</div>
158158
</ChecklistItem>

‎src/app/page.tsx

+1-28
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import External from "@/assets/icons/link-external.svg?react";
21
import CloudSquares from "@/assets/illustrations/cloud-squares.svg";
32
import { useServerInfo } from "@/data/server/info-query";
43
import { getLoginCommand } from "@/lib/login-command";
54
import { routes } from "@/router/routes";
6-
import { Badge, Box, Button } from "@zenml-io/react-component-library";
5+
import { Box } from "@zenml-io/react-component-library";
76
import { Link } from "react-router-dom";
87
import { Codesnippet } from "../components/CodeSnippet";
98
import { OverviewHeader } from "./Header";
@@ -14,7 +13,6 @@ export default function IndexPage() {
1413
<OverviewHeader />
1514
<div className="layout-container space-y-5 py-5">
1615
<OverviewContent />
17-
<VsCodeBox />
1816
</div>
1917
</div>
2018
);
@@ -58,28 +56,3 @@ function OverviewContent() {
5856
</Box>
5957
);
6058
}
61-
62-
function VsCodeBox() {
63-
return (
64-
<Box className="flex flex-col items-center justify-between gap-3 overflow-hidden px-7 py-5 md:flex-row md:flex-wrap">
65-
<div className="space-y-1">
66-
<div className="flex items-center space-x-1">
67-
<Badge className="text-text-xs font-semibold" color="green">
68-
NEW
69-
</Badge>
70-
<h2 className="text-text-xl font-semibold">VS Code Quickstart with ZenML</h2>
71-
</div>
72-
<p className="text-theme-text-secondary">
73-
Get started quickly with ZenML using GitHub Codespaces! You can run our quickstart guide
74-
in a pre-configured environment.
75-
</p>
76-
</div>
77-
78-
<Button size="sm" className="w-fit" emphasis="subtle" asChild>
79-
<a target="_blank" rel="noopener noreferrer" href="https://github.com/zenml-io/zenml">
80-
Visit our GitHub repo <External className="h-5 w-5 shrink-0" />
81-
</a>
82-
</Button>
83-
</Box>
84-
);
85-
}

‎src/components/repositories/RepoBadge.tsx

+14-6
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,11 @@ export function RepoBadge({ repositoryId, commit }: Props) {
1717
{ enabled: !!repositoryId }
1818
);
1919

20-
const repositoryMetadata = data?.metadata?.config;
20+
if (!repositoryId || !commit) return <p>Not available</p>;
21+
if (isPending) return <Skeleton className="h-6" />;
22+
if (isError) return null;
23+
24+
const repositoryMetadata = data.metadata?.config;
2125

2226
const getRepositoryLink = () => {
2327
let Icon: React.FunctionComponent<
@@ -31,11 +35,17 @@ export function RepoBadge({ repositoryId, commit }: Props) {
3135
if (data?.body?.source?.attribute === "GitHubCodeRepository") {
3236
Icon = Github;
3337
name = `${repositoryMetadata?.owner}/${repositoryMetadata?.repository}`;
34-
url = `https://www.github.com/${name}` + (commit ? `/tree/${commit}` : "");
38+
const defaultHost = "github.com";
39+
url =
40+
`https://www.${(typeof repositoryMetadata?.host === "string" ? repositoryMetadata.host : defaultHost).replace(/\/$/, "")}/${name}` +
41+
(commit ? `/tree/${commit}` : "");
3542
} else if (data?.body?.source?.attribute === "GitLabCodeRepository") {
3643
Icon = Gitlab;
3744
name = `${repositoryMetadata?.group}/${repositoryMetadata?.project}`;
38-
url = `https://www.gitlab.com/${name}` + (commit ? `/tree/${commit}` : "");
45+
const defaultHost = "gitlab.com";
46+
url =
47+
`https://www.${(typeof repositoryMetadata?.host === "string" ? repositoryMetadata.host : defaultHost).replace(/\/$/, "")}/${name}` +
48+
(commit ? `/tree/${commit}` : "");
3949
}
4050

4151
return (
@@ -51,9 +61,7 @@ export function RepoBadge({ repositoryId, commit }: Props) {
5161
</a>
5262
);
5363
};
54-
if (!repositoryId || !commit) return <p>Not available</p>;
55-
if (isPending) return <Skeleton className="h-6" />;
56-
if (isError) return null;
64+
5765
return (
5866
<div className="group/copybutton mr-1">
5967
<Tag

‎src/components/stack-components/create-component/configuration-form.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export function ComponentConfigurationForm({
5858
useMaxHeight={useMaxHeight}
5959
infoTile={
6060
<InfoTile
61+
type={flavor.data.body?.type || "orchestrator"}
6162
name={flavor.data.name}
6263
sdkDocsUrl={flavor.data.metadata?.sdk_docs_url ?? undefined}
6364
logoUrl={flavor.data.body?.logo_url ?? undefined}

‎src/components/stack-components/create-component/flavor-select.tsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { StackComponentType } from "@/types/components";
55
import { Flavor } from "@/types/flavors";
66
import { flavorQueries } from "../../../data/flavors";
77
import { useInfiniteQuery } from "@tanstack/react-query";
8+
import { ComponentIcon } from "../../ComponentIcon";
89

910
type Props = {
1011
type: StackComponentType;
@@ -24,6 +25,7 @@ export function SelectFlavorList({ type, setSelectedFlavor }: Props) {
2425
page.items.map((flavor) => (
2526
<li className="" key={flavor.id}>
2627
<FlavorListItem
28+
type={type}
2729
onClick={() => setSelectedFlavor(flavor)}
2830
id={flavor.id}
2931
name={flavor.name}
@@ -40,25 +42,31 @@ type FlavorListItemItemProps = {
4042
id: string;
4143
name: string;
4244
logoUrl?: string;
45+
type: StackComponentType;
4346
onClick?: () => void;
4447
};
4548

46-
function FlavorListItem({ name, logoUrl, onClick }: FlavorListItemItemProps) {
49+
function FlavorListItem({ name, logoUrl, onClick, type }: FlavorListItemItemProps) {
4750
return (
4851
<Button
4952
onClick={onClick}
5053
intent="secondary"
5154
emphasis="subtle"
5255
className="h-auto w-full gap-2 px-5 py-3"
5356
>
54-
{logoUrl && (
57+
{logoUrl ? (
5558
<img
5659
alt={`Logo of ${name}`}
5760
width={36}
5861
height={36}
5962
className="aspect-square object-contain"
6063
src={sanitizeUrl(logoUrl)}
6164
/>
65+
) : (
66+
<ComponentIcon
67+
className="aspect-square h-[36px] w-[36px] fill-primary-400 object-contain"
68+
type={type}
69+
/>
6270
)}
6371
<span className="min-w-0 truncate">{snakeCaseToTitleCase(name)}</span>
6472
</Button>

‎src/components/stack-components/create-component/info-tile.tsx

+10-2
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,33 @@ import FileText from "@/assets/icons/file-text.svg?react";
22
import File from "@/assets/icons/file.svg?react";
33
import TerminalSquare from "@/assets/icons/terminal-square.svg?react";
44
import { sanitizeUrl } from "@/lib/url";
5+
import { StackComponentType } from "@/types/components";
56
import { Box, Button } from "@zenml-io/react-component-library/components/server";
7+
import { ComponentIcon } from "../../ComponentIcon";
68

79
type InfoTileProps = {
810
sdkDocsUrl?: string;
911
logoUrl?: string;
1012
name: string;
13+
type: StackComponentType;
1114
};
12-
export function InfoTile({ sdkDocsUrl, name, logoUrl }: InfoTileProps) {
15+
export function InfoTile({ sdkDocsUrl, name, logoUrl, type }: InfoTileProps) {
1316
return (
1417
<Box className="space-y-5 overflow-hidden pb-5">
1518
<div className="flex h-[120px] w-full items-center justify-center bg-teal-25">
16-
{!!logoUrl && (
19+
{logoUrl ? (
1720
<img
1821
width={60}
1922
height={60}
2023
className="aspect-square object-contain"
2124
src={sanitizeUrl(logoUrl)}
2225
alt={`Logo of ${name}`}
2326
/>
27+
) : (
28+
<ComponentIcon
29+
className="aspect-square h-[60px] w-[60px] fill-primary-400 object-contain"
30+
type={type}
31+
/>
2432
)}
2533
</div>
2634
<div className="space-y-2">

0 commit comments

Comments
 (0)