Skip to content

Commit 138af7a

Browse files
CahllagerfeldCahllagerfeld
authored
chore: nit fixes (#655)
1 parent d0dc623 commit 138af7a

File tree

12 files changed

+80
-73
lines changed

12 files changed

+80
-73
lines changed

‎src/app/settings/secrets/AddSecretDialog.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Plus from "@/assets/icons/plus.svg?react";
33
import Trash from "@/assets/icons/trash.svg?react";
44
import { useCreateSecretMutation } from "@/data/secrets/create-secret-query";
55
import { isFetchError } from "@/lib/fetch-error";
6+
import { Workspace } from "@/types/workspaces";
67
import { zodResolver } from "@hookform/resolvers/zod";
78
import { useQueryClient } from "@tanstack/react-query";
89
import {
@@ -21,10 +22,6 @@ import { useState } from "react";
2122
import { Controller, useFieldArray, useForm } from "react-hook-form";
2223
import { secretFormSchema, SecretFormType } from "./form-schema";
2324

24-
interface Workspace {
25-
id: string;
26-
}
27-
2825
export function AddSecretDialog({ id, workspace }: { id: string; workspace: Workspace }) {
2926
const [open, setOpen] = useState(false);
3027

‎src/app/settings/secrets/EditSecretDialog.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export function EditSecret({ secretId, isSecretNameEditable }: EditSecretProps)
7575
setValue("secretName", secretDetail.name);
7676
setValue(
7777
"keysValues",
78-
Object.entries(secretDetail.body.values || {}).map(([key, value]) => ({
78+
Object.entries(secretDetail.body?.values || {}).map(([key, value]) => ({
7979
key,
8080
value: String(value)
8181
}))

‎src/app/settings/secrets/SecretsTable.tsx‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
1+
import Pagination from "@/components/Pagination";
12
import { SearchField } from "@/components/SearchField";
2-
import { useCurrentUser } from "@/data/users/current-user-query";
3-
import { AddSecretDialog } from "./AddSecretDialog";
43
import { useAllSecrets } from "@/data/secrets/secrets-all-query";
4+
import { useCurrentUser } from "@/data/users/current-user-query";
5+
import { useQuery } from "@tanstack/react-query";
56
import { DataTable, Skeleton } from "@zenml-io/react-component-library";
7+
import { useNavigate } from "react-router-dom";
8+
import { workspaceQueries } from "../../../data/workspaces";
9+
import { AddSecretDialog } from "./AddSecretDialog";
610
import { getSecretColumns } from "./columns";
7-
import { useGetWorkSpaceDetail } from "@/data/workspaces/workspace-all-query";
811
import { useSecretOverviewSearchParams } from "./service";
9-
import { useNavigate } from "react-router-dom";
10-
import Pagination from "@/components/Pagination";
1112

1213
export default function SecretsTable() {
1314
const navigate = useNavigate();
@@ -20,7 +21,12 @@ export default function SecretsTable() {
2021

2122
const userId = currentUser?.id || "";
2223

23-
const { data: workspaceData, isLoading, isError } = useGetWorkSpaceDetail("default");
24+
const {
25+
data: workspaceData,
26+
isLoading,
27+
isError,
28+
isSuccess
29+
} = useQuery({ ...workspaceQueries.workspaceDetail("default") });
2430

2531
return (
2632
<>
@@ -32,7 +38,7 @@ export default function SecretsTable() {
3238
) : isError ? (
3339
<div>Error loading workspace details.</div>
3440
) : (
35-
<AddSecretDialog id={userId} workspace={workspaceData} />
41+
isSuccess && <AddSecretDialog id={userId} workspace={workspaceData} />
3642
)}
3743
</div>
3844
<div className="flex flex-col items-center gap-5">

‎src/app/settings/secrets/secretsDetail/DeleteKeyAlert.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,11 +39,11 @@ export function DeleteKeyAlert({ secretId, keyName }: { secretId: string; keyNam
3939

4040
const deleteSecret = () => {
4141
if (secretDetail) {
42-
const updatedValues = { ...secretDetail.body.values };
42+
const updatedValues = { ...secretDetail.body?.values };
4343
delete updatedValues[keyName];
4444

4545
const updatedSecretData: UpdateSecret = {
46-
name: secretDetail.secretName,
46+
name: secretDetail.name,
4747
scope: "workspace",
4848
values: updatedValues
4949
};

‎src/app/settings/secrets/secretsDetail/SecretDetailTable.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@ export default function SecretDetailTable({ secretId }: { secretId: string }) {
1212
// Prepare data for DataTable
1313
const secretDetailData = useMemo(() => {
1414
return secretDetail
15-
? Object.entries(secretDetail.body.values).map(([key, value]) => ({
15+
? Object.entries(secretDetail.body?.values || []).map(([key, value]) => ({
1616
id: secretDetail.id,
1717
name: secretDetail.name,
1818
key,
1919
value,
20-
scope: secretDetail.body.scope,
21-
created: secretDetail.body.created,
22-
updated: secretDetail.body.updated,
23-
user: secretDetail.body.user
20+
scope: secretDetail.body?.scope,
21+
created: secretDetail.body?.created,
22+
updated: secretDetail.body?.updated,
23+
user: secretDetail.body?.user
2424
}))
2525
: [];
2626
}, [secretDetail]);

‎src/app/stacks/create/ExistingInfra.tsx‎

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,20 @@ import {
1111
} from "@zenml-io/react-component-library/components/client";
1212
import { Link, useSearchParams } from "react-router-dom";
1313
import * as OptionsCard from "./OptionCard";
14+
import { useServerInfo } from "@/data/server/info-query";
15+
import { Skeleton } from "@zenml-io/react-component-library";
16+
import { checkIsLocalServer } from "@/lib/server";
17+
import { LocalOverlay } from "./LocalOverlay";
1418

1519
const learnMoreLink = "https://docs.zenml.io/how-to/stack-deployment/deploy-a-cloud-stack";
1620

1721
export function ExistingInfrastructure() {
22+
const { isError, isPending, data } = useServerInfo();
23+
if (isPending) return <Skeleton className="h-[200px] w-full" />;
24+
if (isError) return <div>Failed to load server info</div>;
25+
26+
const isLocalServer = checkIsLocalServer(data.deployment_type || "other");
27+
1828
return (
1929
<section className="w-full space-y-5">
2030
<div>
@@ -24,13 +34,17 @@ export function ExistingInfrastructure() {
2434
</p>
2535
</div>
2636
<div className="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
27-
<ScanCard />
37+
<ScanCard isLocalDeployment={isLocalServer} />
2838
<ManualSetupCard />
2939
</div>
3040
</section>
3141
);
3242
}
3343

44+
type Props = {
45+
isLocalDeployment: boolean;
46+
};
47+
3448
function ManualSetupCard() {
3549
const [searchParams] = useSearchParams();
3650
const link =
@@ -103,9 +117,10 @@ function ManualSetupCard() {
103117
);
104118
}
105119

106-
function ScanCard() {
120+
function ScanCard({ isLocalDeployment }: Props) {
107121
return (
108122
<div className="relative">
123+
{isLocalDeployment && <LocalOverlay />}
109124
<Link to={routes.stacks.create.existingInfra}>
110125
<OptionsCard.Root>
111126
<OptionsCard.Header>

‎src/app/stacks/create/LocalOverlay.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export function LocalOverlay() {
2+
return (
3+
<div className="group absolute flex h-full w-full items-center justify-center rounded-md border border-theme-border-moderate bg-white/70">
4+
<div className="hidden rounded-md bg-theme-text-primary px-3 py-2 text-text-xs text-theme-text-negative shadow-lg animate-in fade-in-0 fade-out-0 zoom-in-95 group-hover:block">
5+
This option is not available for local deployments
6+
</div>
7+
</div>
8+
);
9+
}

‎src/app/stacks/create/NewInfra.tsx‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,18 +3,27 @@ import Codebrowser from "@/assets/icons/code-browser.svg?react";
33
import ConnectorAdd from "@/assets/icons/connector-add.svg?react";
44
import Help from "@/assets/icons/help.svg?react";
55
import { routes } from "@/router/routes";
6+
import { Skeleton } from "@zenml-io/react-component-library";
67
import {
78
Tooltip,
89
TooltipContent,
910
TooltipProvider,
1011
TooltipTrigger
1112
} from "@zenml-io/react-component-library/components/client";
12-
import * as OptionsCard from "./OptionCard";
1313
import { Link, useSearchParams } from "react-router-dom";
14+
import { useServerInfo } from "../../../data/server/info-query";
15+
import { checkIsLocalServer } from "../../../lib/server";
16+
import { LocalOverlay } from "./LocalOverlay";
17+
import * as OptionsCard from "./OptionCard";
1418

1519
const learnMoreLink = "https://docs.zenml.io/how-to/stack-deployment/deploy-a-cloud-stack";
1620

1721
export function NewInfrastructure() {
22+
const { isError, isPending, data } = useServerInfo();
23+
if (isPending) return <Skeleton className="h-[200px] w-full" />;
24+
if (isError) return <div>Failed to load server info</div>;
25+
26+
const isLocalServer = checkIsLocalServer(data.deployment_type || "other");
1827
return (
1928
<section className="w-full space-y-5">
2029
<div>
@@ -24,19 +33,24 @@ export function NewInfrastructure() {
2433
</p>
2534
</div>
2635
<div className="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
27-
<InBrowserCard />
28-
<TerraformCard />
36+
<InBrowserCard isLocalDeployment={isLocalServer} />
37+
<TerraformCard isLocalDeployment={isLocalServer} />
2938
</div>
3039
</section>
3140
);
3241
}
3342

34-
function InBrowserCard() {
43+
type Props = {
44+
isLocalDeployment: boolean;
45+
};
46+
47+
function InBrowserCard({ isLocalDeployment }: Props) {
3548
const [searchParams] = useSearchParams();
3649
const link =
3750
routes.stacks.create.newInfra + (searchParams.size >= 1 ? `?${searchParams.toString()}` : "");
3851
return (
3952
<div className="relative">
53+
{isLocalDeployment && <LocalOverlay />}
4054
<Link to={link}>
4155
<OptionsCard.Root>
4256
<OptionsCard.Header>
@@ -101,13 +115,14 @@ function InBrowserCard() {
101115
);
102116
}
103117

104-
function TerraformCard() {
118+
function TerraformCard({ isLocalDeployment }: Props) {
105119
const [searchParams] = useSearchParams();
106120
const link =
107121
routes.stacks.create.terraform + (searchParams.size >= 1 ? `?${searchParams.toString()}` : "");
108122

109123
return (
110124
<div className="relative">
125+
{isLocalDeployment && <LocalOverlay />}
111126
<Link to={link}>
112127
<OptionsCard.Root className="flex flex-col justify-between space-y-0">
113128
<div className="space-y-1">

‎src/components/survey/Infrastructure.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export function InfrastructureForm({ submitHandler }: InfrastructureFormProps) {
8787
"border-primary-400 bg-primary-25 shadow-sm": watch("providers").includes(
8888
name.name
8989
),
90-
"border-transparent bg-theme-surface-primary hover:border-theme-border-bold hover:shadow-sm":
90+
"border-theme-border-minimal bg-theme-surface-primary hover:border-theme-border-bold hover:shadow-sm":
9191
!watch("providers").includes(name.name)
9292
}
9393
)}
@@ -117,7 +117,7 @@ export function InfrastructureForm({ submitHandler }: InfrastructureFormProps) {
117117
"flex items-center rounded-md border bg-theme-surface-primary p-3 transition duration-150",
118118
{
119119
"border-primary-400": !!watch("other"),
120-
"border-transparent hover:border-theme-border-bold": !watch("other")
120+
"border-theme-border-minimal hover:border-theme-border-bold": !watch("other")
121121
}
122122
)}
123123
>

‎src/components/survey/UsageReason.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -108,7 +108,7 @@ export function UsageReasonForm({ submitHandler }: InfrastructureFormProps) {
108108
"flex items-center gap-1 rounded-md border pl-3 transition-all duration-150",
109109
{
110110
"border-primary-400 bg-primary-25 shadow-sm": watch("usageReason") === key,
111-
"border-transparent bg-theme-surface-primary hover:border-theme-border-bold hover:shadow-sm":
111+
"border-theme-border-minimal bg-theme-surface-primary hover:border-theme-border-bold hover:shadow-sm":
112112
watch("usageReason") !== key
113113
}
114114
)}
@@ -144,7 +144,7 @@ export function UsageReasonForm({ submitHandler }: InfrastructureFormProps) {
144144
{
145145
"border-primary-400 bg-primary-25 shadow-sm":
146146
watch("comparison_tools")?.includes(name),
147-
"border-transparent bg-theme-surface-primary hover:border-theme-border-bold hover:shadow-sm":
147+
"border-theme-border-minimal bg-theme-surface-primary hover:border-theme-border-bold hover:shadow-sm":
148148
!watch("comparison_tools")?.includes(name)
149149
}
150150
)}
@@ -177,7 +177,8 @@ export function UsageReasonForm({ submitHandler }: InfrastructureFormProps) {
177177
"flex h-full items-center rounded-md border bg-theme-surface-primary p-3 transition duration-150",
178178
{
179179
"border-primary-400": !!watch("otherTool"),
180-
"border-transparent hover:border-theme-border-bold": !watch("otherTool")
180+
"border-theme-border-minimal hover:border-theme-border-bold":
181+
!watch("otherTool")
181182
}
182183
)}
183184
>

0 commit comments

Comments
 (0)