Merge pull request #656 from zenml-io/staging

Cahllagerfeld · web-flow · commit 1932ac9dc0f1 · 2024-08-28T16:56:38.000+02:00
Followup Release
diff --git a/src/app/settings/secrets/AddSecretDialog.tsx b/src/app/settings/secrets/AddSecretDialog.tsx
@@ -3,6 +3,7 @@ import Plus from "@/assets/icons/plus.svg?react";
 import Trash from "@/assets/icons/trash.svg?react";
 import { useCreateSecretMutation } from "@/data/secrets/create-secret-query";
 import { isFetchError } from "@/lib/fetch-error";
+import { Workspace } from "@/types/workspaces";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useQueryClient } from "@tanstack/react-query";
 import {
@@ -21,10 +22,6 @@ import { useState } from "react";
 import { Controller, useFieldArray, useForm } from "react-hook-form";
 import { secretFormSchema, SecretFormType } from "./form-schema";
 
-interface Workspace {
-	id: string;
-}
-
 export function AddSecretDialog({ id, workspace }: { id: string; workspace: Workspace }) {
 	const [open, setOpen] = useState(false);
 
diff --git a/src/app/settings/secrets/EditSecretDialog.tsx b/src/app/settings/secrets/EditSecretDialog.tsx
@@ -75,7 +75,7 @@ export function EditSecret({ secretId, isSecretNameEditable }: EditSecretProps)
 			setValue("secretName", secretDetail.name);
 			setValue(
 				"keysValues",
-				Object.entries(secretDetail.body.values || {}).map(([key, value]) => ({
+				Object.entries(secretDetail.body?.values || {}).map(([key, value]) => ({
 					key,
 					value: String(value)
 				}))
diff --git a/src/app/settings/secrets/SecretsTable.tsx b/src/app/settings/secrets/SecretsTable.tsx
@@ -1,13 +1,14 @@
+import Pagination from "@/components/Pagination";
 import { SearchField } from "@/components/SearchField";
-import { useCurrentUser } from "@/data/users/current-user-query";
-import { AddSecretDialog } from "./AddSecretDialog";
 import { useAllSecrets } from "@/data/secrets/secrets-all-query";
+import { useCurrentUser } from "@/data/users/current-user-query";
+import { useQuery } from "@tanstack/react-query";
 import { DataTable, Skeleton } from "@zenml-io/react-component-library";
+import { useNavigate } from "react-router-dom";
+import { workspaceQueries } from "../../../data/workspaces";
+import { AddSecretDialog } from "./AddSecretDialog";
 import { getSecretColumns } from "./columns";
-import { useGetWorkSpaceDetail } from "@/data/workspaces/workspace-all-query";
 import { useSecretOverviewSearchParams } from "./service";
-import { useNavigate } from "react-router-dom";
-import Pagination from "@/components/Pagination";
 
 export default function SecretsTable() {
 	const navigate = useNavigate();
@@ -20,7 +21,12 @@ export default function SecretsTable() {
 
 	const userId = currentUser?.id || "";
 
-	const { data: workspaceData, isLoading, isError } = useGetWorkSpaceDetail("default");
+	const {
+		data: workspaceData,
+		isLoading,
+		isError,
+		isSuccess
+	} = useQuery({ ...workspaceQueries.workspaceDetail("default") });
 
 	return (
 		<>
@@ -32,7 +38,7 @@ export default function SecretsTable() {
 				) : isError ? (
 					<div>Error loading workspace details.</div>
 				) : (
-					<AddSecretDialog id={userId} workspace={workspaceData} />
+					isSuccess && <AddSecretDialog id={userId} workspace={workspaceData} />
 				)}
 			</div>
 			<div className="flex flex-col items-center gap-5">
diff --git a/src/app/settings/secrets/secretsDetail/DeleteKeyAlert.tsx b/src/app/settings/secrets/secretsDetail/DeleteKeyAlert.tsx
@@ -39,11 +39,11 @@ export function DeleteKeyAlert({ secretId, keyName }: { secretId: string; keyNam
 
 	const deleteSecret = () => {
 		if (secretDetail) {
-			const updatedValues = { ...secretDetail.body.values };
+			const updatedValues = { ...secretDetail.body?.values };
 			delete updatedValues[keyName];
 
 			const updatedSecretData: UpdateSecret = {
-				name: secretDetail.secretName,
+				name: secretDetail.name,
 				scope: "workspace",
 				values: updatedValues
 			};
diff --git a/src/app/settings/secrets/secretsDetail/SecretDetailTable.tsx b/src/app/settings/secrets/secretsDetail/SecretDetailTable.tsx
@@ -12,15 +12,15 @@ export default function SecretDetailTable({ secretId }: { secretId: string }) {
 	// Prepare data for DataTable
 	const secretDetailData = useMemo(() => {
 		return secretDetail
-			? Object.entries(secretDetail.body.values).map(([key, value]) => ({
+			? Object.entries(secretDetail.body?.values || []).map(([key, value]) => ({
 					id: secretDetail.id,
 					name: secretDetail.name,
 					key,
 					value,
-					scope: secretDetail.body.scope,
-					created: secretDetail.body.created,
-					updated: secretDetail.body.updated,
-					user: secretDetail.body.user
+					scope: secretDetail.body?.scope,
+					created: secretDetail.body?.created,
+					updated: secretDetail.body?.updated,
+					user: secretDetail.body?.user
 				}))
 			: [];
 	}, [secretDetail]);
diff --git a/src/app/stacks/create/ExistingInfra.tsx b/src/app/stacks/create/ExistingInfra.tsx
@@ -11,10 +11,20 @@ import {
 } from "@zenml-io/react-component-library/components/client";
 import { Link, useSearchParams } from "react-router-dom";
 import * as OptionsCard from "./OptionCard";
+import { useServerInfo } from "@/data/server/info-query";
+import { Skeleton } from "@zenml-io/react-component-library";
+import { checkIsLocalServer } from "@/lib/server";
+import { LocalOverlay } from "./LocalOverlay";
 
 const learnMoreLink = "https://docs.zenml.io/how-to/stack-deployment/deploy-a-cloud-stack";
 
 export function ExistingInfrastructure() {
+	const { isError, isPending, data } = useServerInfo();
+	if (isPending) return <Skeleton className="h-[200px] w-full" />;
+	if (isError) return <div>Failed to load server info</div>;
+
+	const isLocalServer = checkIsLocalServer(data.deployment_type || "other");
+
 	return (
 		<section className="w-full space-y-5">
 			<div>
@@ -24,13 +34,17 @@ export function ExistingInfrastructure() {
 				</p>
 			</div>
 			<div className="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
-				<ScanCard />
+				<ScanCard isLocalDeployment={isLocalServer} />
 				<ManualSetupCard />
 			</div>
 		</section>
 	);
 }
 
+type Props = {
+	isLocalDeployment: boolean;
+};
+
 function ManualSetupCard() {
 	const [searchParams] = useSearchParams();
 	const link =
@@ -103,9 +117,10 @@ function ManualSetupCard() {
 	);
 }
 
-function ScanCard() {
+function ScanCard({ isLocalDeployment }: Props) {
 	return (
 		<div className="relative">
+			{isLocalDeployment && <LocalOverlay />}
 			<Link to={routes.stacks.create.existingInfra}>
 				<OptionsCard.Root>
 					<OptionsCard.Header>
diff --git a/src/app/stacks/create/LocalOverlay.tsx b/src/app/stacks/create/LocalOverlay.tsx
@@ -0,0 +1,9 @@
+export function LocalOverlay() {
+	return (
+		<div className="group absolute flex h-full w-full items-center justify-center rounded-md border border-theme-border-moderate bg-white/70">
+			<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">
+				This option is not available for local deployments
+			</div>
+		</div>
+	);
+}
diff --git a/src/app/stacks/create/NewInfra.tsx b/src/app/stacks/create/NewInfra.tsx
@@ -3,18 +3,27 @@ import Codebrowser from "@/assets/icons/code-browser.svg?react";
 import ConnectorAdd from "@/assets/icons/connector-add.svg?react";
 import Help from "@/assets/icons/help.svg?react";
 import { routes } from "@/router/routes";
+import { Skeleton } from "@zenml-io/react-component-library";
 import {
 	Tooltip,
 	TooltipContent,
 	TooltipProvider,
 	TooltipTrigger
 } from "@zenml-io/react-component-library/components/client";
-import * as OptionsCard from "./OptionCard";
 import { Link, useSearchParams } from "react-router-dom";
+import { useServerInfo } from "../../../data/server/info-query";
+import { checkIsLocalServer } from "../../../lib/server";
+import { LocalOverlay } from "./LocalOverlay";
+import * as OptionsCard from "./OptionCard";
 
 const learnMoreLink = "https://docs.zenml.io/how-to/stack-deployment/deploy-a-cloud-stack";
 
 export function NewInfrastructure() {
+	const { isError, isPending, data } = useServerInfo();
+	if (isPending) return <Skeleton className="h-[200px] w-full" />;
+	if (isError) return <div>Failed to load server info</div>;
+
+	const isLocalServer = checkIsLocalServer(data.deployment_type || "other");
 	return (
 		<section className="w-full space-y-5">
 			<div>
@@ -24,19 +33,24 @@ export function NewInfrastructure() {
 				</p>
 			</div>
 			<div className="grid w-full grid-cols-1 gap-6 md:grid-cols-2">
-				<InBrowserCard />
-				<TerraformCard />
+				<InBrowserCard isLocalDeployment={isLocalServer} />
+				<TerraformCard isLocalDeployment={isLocalServer} />
 			</div>
 		</section>
 	);
 }
 
-function InBrowserCard() {
+type Props = {
+	isLocalDeployment: boolean;
+};
+
+function InBrowserCard({ isLocalDeployment }: Props) {
 	const [searchParams] = useSearchParams();
 	const link =
 		routes.stacks.create.newInfra + (searchParams.size >= 1 ? `?${searchParams.toString()}` : "");
 	return (
 		<div className="relative">
+			{isLocalDeployment && <LocalOverlay />}
 			<Link to={link}>
 				<OptionsCard.Root>
 					<OptionsCard.Header>
@@ -101,13 +115,14 @@ function InBrowserCard() {
 	);
 }
 
-function TerraformCard() {
+function TerraformCard({ isLocalDeployment }: Props) {
 	const [searchParams] = useSearchParams();
 	const link =
 		routes.stacks.create.terraform + (searchParams.size >= 1 ? `?${searchParams.toString()}` : "");
 
 	return (
 		<div className="relative">
+			{isLocalDeployment && <LocalOverlay />}
 			<Link to={link}>
 				<OptionsCard.Root className="flex flex-col justify-between space-y-0">
 					<div className="space-y-1">
diff --git a/src/components/survey/Infrastructure.tsx b/src/components/survey/Infrastructure.tsx
@@ -87,7 +87,7 @@ export function InfrastructureForm({ submitHandler }: InfrastructureFormProps) {
 												"border-primary-400 bg-primary-25 shadow-sm": watch("providers").includes(
 													name.name
 												),
-												"border-transparent bg-theme-surface-primary hover:border-theme-border-bold hover:shadow-sm":
+												"border-theme-border-minimal bg-theme-surface-primary hover:border-theme-border-bold hover:shadow-sm":
 													!watch("providers").includes(name.name)
 											}
 										)}
@@ -117,7 +117,7 @@ export function InfrastructureForm({ submitHandler }: InfrastructureFormProps) {
 							"flex items-center rounded-md border bg-theme-surface-primary p-3 transition duration-150",
 							{
 								"border-primary-400": !!watch("other"),
-								"border-transparent hover:border-theme-border-bold": !watch("other")
+								"border-theme-border-minimal hover:border-theme-border-bold": !watch("other")
 							}
 						)}
 					>
diff --git a/src/components/survey/UsageReason.tsx b/src/components/survey/UsageReason.tsx
@@ -108,7 +108,7 @@ export function UsageReasonForm({ submitHandler }: InfrastructureFormProps) {
 									"flex items-center gap-1 rounded-md border pl-3 transition-all duration-150",
 									{
 										"border-primary-400 bg-primary-25 shadow-sm": watch("usageReason") === key,
-										"border-transparent bg-theme-surface-primary hover:border-theme-border-bold hover:shadow-sm":
+										"border-theme-border-minimal bg-theme-surface-primary hover:border-theme-border-bold hover:shadow-sm":
 											watch("usageReason") !== key
 									}
 								)}
@@ -144,7 +144,7 @@ export function UsageReasonForm({ submitHandler }: InfrastructureFormProps) {
 																{
 																	"border-primary-400 bg-primary-25 shadow-sm":
 																		watch("comparison_tools")?.includes(name),
-																	"border-transparent bg-theme-surface-primary hover:border-theme-border-bold hover:shadow-sm":
+																	"border-theme-border-minimal bg-theme-surface-primary hover:border-theme-border-bold hover:shadow-sm":
 																		!watch("comparison_tools")?.includes(name)
 																}
 															)}
@@ -177,7 +177,8 @@ export function UsageReasonForm({ submitHandler }: InfrastructureFormProps) {
 													"flex h-full items-center rounded-md border bg-theme-surface-primary p-3 transition duration-150",
 													{
 														"border-primary-400": !!watch("otherTool"),
-														"border-transparent hover:border-theme-border-bold": !watch("otherTool")
+														"border-theme-border-minimal hover:border-theme-border-bold":
+															!watch("otherTool")
 													}
 												)}
 											>
diff --git a/src/data/secrets/get-secret-detail.ts b/src/data/secrets/get-secret-detail.ts
@@ -1,8 +1,9 @@
-import { apiPaths, createApiPath } from "../api";
 import { FetchError } from "@/lib/fetch-error";
 import { notFound } from "@/lib/not-found-error";
-import { fetcher } from "../fetch";
+import { Secret } from "@/types/secret";
 import { useQuery, UseQueryOptions } from "@tanstack/react-query";
+import { apiPaths, createApiPath } from "../api";
+import { fetcher } from "../fetch";
 
 export async function getSecretDetail(secretId: string) {
 	const url = createApiPath(apiPaths.secrets.detail(secretId));
@@ -27,11 +28,11 @@ export async function getSecretDetail(secretId: string) {
 
 export function useGetSecretDetail(
 	secretId: string,
-	options?: Omit<UseQueryOptions<any, unknown, any>, "queryFn" | "queryKey">
+	options?: Omit<UseQueryOptions<Secret, FetchError>, "queryFn" | "queryKey">
 ) {
-	return useQuery<any, unknown, any>({
+	return useQuery<Secret, FetchError>({
 		queryFn: () => getSecretDetail(secretId),
-		queryKey: ["secretDetail", secretId],
+		queryKey: ["secrets", secretId],
 		...options
 	});
 }
diff --git a/src/data/workspaces/workspace-all-query.ts b/src/data/workspaces/workspace-all-query.ts

Original file line number	Diff line number	Diff line change
`@@ -87,7 +87,7 @@ export function InfrastructureForm({ submitHandler }: InfrastructureFormProps) {`
`87`	`87`	`"border-primary-400 bg-primary-25 shadow-sm": watch("providers").includes(`
`88`	`88`	`name.name`
`89`	`89`	`),`
`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":`
`91`	`91`	`!watch("providers").includes(name.name)`
`92`	`92`	`}`
`93`	`93`	`)}`
`@@ -117,7 +117,7 @@ export function InfrastructureForm({ submitHandler }: InfrastructureFormProps) {`
`117`	`117`	`"flex items-center rounded-md border bg-theme-surface-primary p-3 transition duration-150",`
`118`	`118`	`{`
`119`	`119`	`"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")`
`121`	`121`	`}`
`122`	`122`	`)}`
`123`	`123`	`>`
Original file line number	Diff line number	Diff line change
`@@ -108,7 +108,7 @@ export function UsageReasonForm({ submitHandler }: InfrastructureFormProps) {`
`108`	`108`	`"flex items-center gap-1 rounded-md border pl-3 transition-all duration-150",`
`109`	`109`	`{`
`110`	`110`	`"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":`
`112`	`112`	`watch("usageReason") !== key`
`113`	`113`	`}`
`114`	`114`	`)}`
`@@ -144,7 +144,7 @@ export function UsageReasonForm({ submitHandler }: InfrastructureFormProps) {`
`144`	`144`	`{`
`145`	`145`	`"border-primary-400 bg-primary-25 shadow-sm":`
`146`	`146`	`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":`
`148`	`148`	`!watch("comparison_tools")?.includes(name)`
`149`	`149`	`}`
`150`	`150`	`)}`
`@@ -177,7 +177,8 @@ export function UsageReasonForm({ submitHandler }: InfrastructureFormProps) {`
`177`	`177`	`"flex h-full items-center rounded-md border bg-theme-surface-primary p-3 transition duration-150",`
`178`	`178`	`{`
`179`	`179`	`"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")`
`181`	`182`	`}`
`182`	`183`	`)}`
`183`	`184`	`>`