feat: loading modal (#639)

Author: Cahllagerfeld

src/app/stacks/create/existing-infrastructure/steps/connect/LoadingModal.tsx

@@ -0,0 +1,113 @@
+import Dots from "@/assets/icons/dots-horizontal.svg?react";
+import Zenml from "@/assets/icons/zenml-icon.svg?react";
+import { CloudProviderIcon } from "@/components/ProviderIcon";
+import { Tick } from "@/components/Tick";
+import { StackDeploymentProvider } from "@/types/stack";
+import { Spinner } from "@zenml-io/react-component-library";
+import {
+	Dialog,
+	DialogContent,
+	DialogTitle
+} from "@zenml-io/react-component-library/components/client";
+import { PropsWithChildren, useEffect, useState } from "react";
+import { useExistingInfraContext } from "../../ExistingInfraContext";
+
+type Props = {
+	open: boolean;
+	loadingComponents: boolean;
+};
+
+export function LoadingModal({ open, loadingComponents }: Props) {
+	const { data } = useExistingInfraContext();
+	if (!data.connectorConfig?.type) return null;
+	return (
+		<Dialog open={open}>
+			<DialogContent
+				onPointerDownOutside={(e) => e.preventDefault()}
+				onEscapeKeyDown={(e) => e.preventDefault()}
+				className="max-w-[600px]"
+			>
+				<div className="flex items-center justify-between border-b border-theme-border-moderate py-2 pl-5 pr-3">
+					<DialogTitle className="text-text-lg">
+						Connecting and loading your components...
+					</DialogTitle>
+				</div>
+				<div className="flex h-[200px] items-center justify-center gap-5 bg-primary-50">
+					<Zenml className="h-[60px] w-[60px]" />
+					<div className="flex h-[60px] w-[60px] items-center justify-center">
+						<Dots className="h-5 w-5 fill-theme-text-tertiary" />
+					</div>
+					<CloudProviderIcon
+						className="h-[60px] w-[60px]"
+						provider={data.connectorConfig.type as StackDeploymentProvider}
+					/>
+				</div>
+				<div className="flex flex-col gap-1 px-7 pb-6 pt-5">
+					<p className="text-theme-text-secondary">
+						We're securely connecting to{" "}
+						<span className="capitalize">{data.connectorConfig?.type}</span> and retrieving your
+						custom components. This process typically takes about 30-60 seconds.
+					</p>
+					<Loaders loadingComponents={loadingComponents} />
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+type LoaderProps = {
+	loadingComponents: boolean;
+};
+function Loaders({ loadingComponents }: LoaderProps) {
+	const [conncetionLoading, setConnectionLoading] = useState(true);
+	const [authLoading, setAuthLoading] = useState(true);
+
+	useEffect(() => {
+		const connectionTimeout = setTimeout(
+			() => {
+				setConnectionLoading(false);
+			},
+			Math.floor(Math.random() * 1000) + 500
+		);
+
+		const authTimeout = setTimeout(() => {
+			setAuthLoading(false);
+		}, 1500);
+
+		return () => {
+			clearTimeout(connectionTimeout);
+			clearTimeout(authTimeout);
+		};
+	}, []);
+
+	return (
+		<ul className="mt-3 space-y-3 text-theme-text-secondary">
+			<ListItem>
+				<Indicator loading={conncetionLoading} />
+				Establishing a secure connection
+			</ListItem>
+			<ListItem>
+				<Indicator loading={authLoading} />
+				Authenticating your account
+			</ListItem>
+			<ListItem>
+				<Indicator loading={loadingComponents} />
+				Fetching your existing components
+			</ListItem>
+		</ul>
+	);
+}
+
+type IndicatorProps = {
+	loading: boolean;
+};
+function Indicator({ loading }: IndicatorProps) {
+	if (loading) {
+		return <Spinner className="h-5 w-5 border-2" />;
+	}
+	return <Tick className="h-5 w-5" tickClasses="w-3 h-3" />;
+}
+
+function ListItem({ children }: PropsWithChildren) {
+	return <li className="flex items-center gap-1">{children}</li>;
+}

src/app/stacks/create/existing-infrastructure/steps/connect/NewConnectorForm.tsx

@@ -2,14 +2,22 @@ import { useFormContext } from "react-hook-form";
 import { StackName } from "../../../components/StackName";
 import { AuthenticationMethod } from "./AuthenticationMethod";
 import { ConnectorConfig } from "./Configuration";
+import { LoadingModal } from "./LoadingModal";
 import { useNewConnector } from "./useNewConnector";
 
 export function NewConnector() {
-	const { handleSubmit } = useFormContext();
-	const { handleFormSubmit } = useNewConnector();
+	const {
+		handleSubmit,
+		formState: { isSubmitting }
+	} = useFormContext();
+	const { handleFormSubmit, fullStackResources, loadingComponents } = useNewConnector();
 
 	return (
 		<form onSubmit={handleSubmit(handleFormSubmit)} id="connect-form">
+			<LoadingModal
+				loadingComponents={loadingComponents}
+				open={isSubmitting || fullStackResources.isPending}
+			/>
 			<AuthenticationMethod />
 			<StackName />
 			<ConnectorConfig />

src/app/stacks/create/existing-infrastructure/steps/connect/index.tsx

@@ -31,24 +31,17 @@ export function ConnectCloudStep() {
 
 function NextButton() {
 	const {
-		formState: { isValid }
+		formState: { isValid, isSubmitting }
 	} = useFormContext();
 	const isMutating = !!useIsMutating();
 	return (
 		<Button
 			className="justify-center gap-2"
-			disabled={!isValid || isMutating}
+			disabled={!isValid || isMutating || isSubmitting}
 			form="connect-form"
 			size="md"
 		>
-			{isMutating && (
-				<div
-					role="alert"
-					aria-busy="true"
-					className="full h-[20px] w-[20px] animate-spin rounded-rounded border-2 border-theme-text-negative border-b-theme-text-brand"
-				></div>
-			)}
-			{isMutating ? "Loading..." : "Next"}
+			{isMutating || isSubmitting ? "Loading..." : "Next"}
 		</Button>
 	);
 }

src/app/stacks/create/existing-infrastructure/steps/connect/useNewConnector.ts

@@ -1,12 +1,15 @@
 import { useWizardContext } from "@/context/WizardContext";
 import { useConnectorFullstackResources } from "@/data/service-connectors/resources-info";
+import { sleep } from "@/lib/common";
 import { useToast } from "@zenml-io/react-component-library";
 import { produce } from "immer";
-import { useExistingInfraContext } from "../../ExistingInfraContext";
+import { useState } from "react";
 import { FieldValues, SubmitHandler } from "react-hook-form";
+import { useExistingInfraContext } from "../../ExistingInfraContext";
 
 export function useNewConnector() {
 	const { setCurrentStep } = useWizardContext();
+	const [loadingComponents, setIsLoadingComponents] = useState(true);
 	const { toast } = useToast();
 	const { setData, data } = useExistingInfraContext();
 	const fullStackResources = useConnectorFullstackResources({
@@ -16,6 +19,8 @@ export function useNewConnector() {
 					draft.fullstackResources = data;
 				})
 			);
+			setIsLoadingComponents(false);
+			await sleep(200);
 			setCurrentStep((prev) => prev + 1);
 		},
 		onError: (e) => {
@@ -34,7 +39,7 @@ export function useNewConnector() {
 				rest[key] === "" ||
 				rest[key] === null ||
 				rest[key] === undefined ||
-				(rest[key] instanceof Array && rest[key].length === 0)
+				(Array.isArray(rest[key]) && rest[key].length === 0)
 			) {
 				delete rest[key];
 			}
@@ -57,5 +62,5 @@ export function useNewConnector() {
 		});
 	};
 
-	return { handleFormSubmit };
+	return { handleFormSubmit, fullStackResources, loadingComponents };
 }

src/app/stacks/create/existing-infrastructure/steps/container_registry/useContainerRegistry.ts renamed to src/app/stacks/create/existing-infrastructure/steps/container_registry/useContainerRegistry.tsx

@@ -1,18 +1,32 @@
+import AlertCircle from "@/assets/icons/alert-circle.svg?react";
 import { useWizardContext } from "@/context/WizardContext";
+import { stackQueries } from "@/data/stacks";
+import { useCreateFullstack } from "@/data/stacks/full-stack-create";
+import { ComponentResourceInfo } from "@/types/service-connectors";
+import { useQueryClient } from "@tanstack/react-query";
+import { useToast } from "@zenml-io/react-component-library";
 import { produce } from "immer";
 import { useExistingInfraContext } from "../../ExistingInfraContext";
 import { ContainerRegistryFormType } from "./schema";
-import { useQueryClient } from "@tanstack/react-query";
-import { ComponentResourceInfo } from "@/types/service-connectors";
-import { useCreateFullstack } from "@/data/stacks/full-stack-create";
-import { stackQueries } from "@/data/stacks";
 
 export function useContainerRegistries() {
 	const { data, setData } = useExistingInfraContext();
 	const queryClient = useQueryClient();
+	const { toast } = useToast();
 
 	const { setCurrentStep } = useWizardContext();
 	const { mutate } = useCreateFullstack({
+		onError: (error) => {
+			if (error instanceof Error) {
+				toast({
+					status: "error",
+					emphasis: "subtle",
+					icon: <AlertCircle className="h-5 w-5 shrink-0 fill-error-700" />,
+					description: error.message,
+					rounded: true
+				});
+			}
+		},
 		onSuccess: async (res) => {
 			setData((prev) =>
 				produce(prev, (draft) => {

src/app/stacks/create/existing-infrastructure/steps/orchestrator/Form.tsx

@@ -49,8 +49,12 @@ export function OrchestratorForm() {
 													)
 												);
 											}
-											if (orchestrator.flavor !== kubernetesKey)
+											if (
+												orchestrator.flavor !== kubernetesKey &&
+												orchestrator.accessible_by_service_connector.length > 0
+											)
 												setValue("resourceId", orchestrator.accessible_by_service_connector[0]);
+
 											onChange(e);
 										}}
 										{...restField}

src/components/form/DynamicField.tsx

@@ -64,18 +64,11 @@ function DynamicArray({ name, schema, isOptional }: DynamicFieldProps) {
 			</label>
 			<ul className="space-y-5">
 				{fields.map((field, index) => (
-					<li className="flex w-full items-center gap-4" key={field.id}>
+					<li className="flex w-full items-center gap-4 [&>div]:w-full" key={field.id}>
 						<Controller
 							defaultValue=""
 							name={`${name}.${index}`}
-							render={({ field }) => (
-								<Input
-									// wrapperClasses="w-full"
-									className="w-full flex-1"
-									inputSize="md"
-									{...field}
-								/>
-							)}
+							render={({ field }) => <Input className="w-full flex-1" inputSize="md" {...field} />}
 						/>
 						<Button
 							className="h-7 w-7"

src/context/WizardContext.tsx

@@ -28,7 +28,7 @@ export function WizardProvider({
 export function useWizardContext() {
 	const context = useContext(WizardContext);
 	if (context === null) {
-		throw new Error("useWizardContext must be used within an AuthProvider");
+		throw new Error("useWizardContext must be used within a WizardProvider");
 	}
 	return context;
 }

src/lib/common.ts

@@ -0,0 +1,3 @@
+export function sleep(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}