diff --git a/components/providers/workflow/forms/connect-account-form.tsx b/components/providers/workflow/forms/connect-account-form.tsx index de5f23c45a..308dc2bc6f 100644 --- a/components/providers/workflow/forms/connect-account-form.tsx +++ b/components/providers/workflow/forms/connect-account-form.tsx @@ -1,7 +1,8 @@ "use client"; import { zodResolver } from "@hookform/resolvers/zod"; -import { SaveIcon } from "lucide-react"; +import { ChevronLeftIcon, ChevronRightIcon, SaveIcon } from "lucide-react"; +import { useState } from "react"; import { useForm } from "react-hook-form"; import * as z from "zod"; @@ -14,6 +15,9 @@ import { addProviderFormSchema, ApiError } from "../../../../types"; import { RadioGroupProvider } from "../../radio-group-provider"; export const ConnectAccountForm = () => { + const { toast } = useToast(); + const [prevStep, setPrevStep] = useState(1); + const formSchema = addProviderFormSchema; const form = useForm>({ @@ -24,9 +28,7 @@ export const ConnectAccountForm = () => { providerAlias: "", }, }); - - const { toast } = useToast(); - + const providerType = form.watch("providerType"); const isLoading = form.formState.isSubmitting; const onSubmitClient = async (values: z.infer) => { @@ -69,66 +71,144 @@ export const ConnectAccountForm = () => { }); } }); + setPrevStep(1); } }; + const handleNextStep = () => { + setPrevStep((prev) => prev + 1); + }; + + const handleBackStep = () => { + setPrevStep((prev) => prev - 1); + }; + return (
- - - + {prevStep === 1 && ( + <> + {/* Select a provider */} + + {/* Provider UID */} + + {/* Provider alias */} + + + )} + + {prevStep === 2 && ( + <> + {/* Select a provider */} + + {/* Provider UID */} + + {/* Provider alias */} + + + )} +
+ {prevStep === 2 && ( + } + isDisabled={isLoading} + > + Back + + )} -
- Cancel - - - } + startContent={ + !isLoading && + !(prevStep === 1 && providerType === "aws") && ( + + ) + } + endContent={ + !isLoading && + prevStep === 1 && + providerType === "aws" && + } + onPress={() => { + if (prevStep === 1 && providerType === "aws") { + handleNextStep(); + } else { + form.handleSubmit(onSubmitClient)(); + } + }} > - {isLoading ? <>Loading : Next} + {isLoading ? ( + <>Loading + ) : ( + + {prevStep === 1 && providerType === "aws" ? "Next" : "Save"} + + )}
diff --git a/components/providers/workflow/workflow.tsx b/components/providers/workflow/workflow.tsx index 20555b3574..28765f8c4b 100644 --- a/components/providers/workflow/workflow.tsx +++ b/components/providers/workflow/workflow.tsx @@ -10,22 +10,23 @@ const steps = [ { title: "Add your cloud account", description: - "Select the cloud provider of the account you want to connect.", + "Select the cloud provider of the account you want to connect and choose whether to use IAM role or credentials for access.", href: "/providers/connect-account", }, { - title: "Add credentials to your cloud provider", - description: "Please add your credentials to your cloud provider.", + title: "Add credentials to your cloud account", + description: "Add the credentials needed to connect to your cloud account.", href: "/providers/add-credentials", }, { title: "Test connection", - description: "Please test your connection to your cloud provider.", + description: + "Test your connection to verify that the credentials provided are valid for accessing your cloud account.", href: "/providers/test-connection", }, { title: "Lunch scan", - description: "Please choose when you want to launch your scan.", + description: "Choose when you want to launch your scan.", href: "/providers", }, ];