diff --git a/ui/components/providers/wizard/provider-wizard-modal.utils.test.ts b/ui/components/providers/wizard/provider-wizard-modal.utils.test.ts index 810da48446..8875c5ea2a 100644 --- a/ui/components/providers/wizard/provider-wizard-modal.utils.test.ts +++ b/ui/components/providers/wizard/provider-wizard-modal.utils.test.ts @@ -1,8 +1,12 @@ import { describe, expect, it } from "vitest"; import { ORG_SETUP_PHASE, ORG_WIZARD_STEP } from "@/types/organizations"; +import { PROVIDER_WIZARD_MODE } from "@/types/provider-wizard"; -import { getOrganizationsStepperOffset } from "./provider-wizard-modal.utils"; +import { + getOrganizationsStepperOffset, + getProviderWizardModalTitle, +} from "./provider-wizard-modal.utils"; describe("getOrganizationsStepperOffset", () => { it("keeps step 1 active during organization details", () => { @@ -32,3 +36,17 @@ describe("getOrganizationsStepperOffset", () => { expect(offset).toBe(1); }); }); + +describe("getProviderWizardModalTitle", () => { + it("returns add title for add mode", () => { + const title = getProviderWizardModalTitle(PROVIDER_WIZARD_MODE.ADD); + + expect(title).toBe("Adding A Cloud Provider"); + }); + + it("returns update title for update mode", () => { + const title = getProviderWizardModalTitle(PROVIDER_WIZARD_MODE.UPDATE); + + expect(title).toBe("Update Provider Credentials"); + }); +}); diff --git a/ui/components/providers/wizard/provider-wizard-modal.utils.ts b/ui/components/providers/wizard/provider-wizard-modal.utils.ts index a907bb66a7..de62adb50d 100644 --- a/ui/components/providers/wizard/provider-wizard-modal.utils.ts +++ b/ui/components/providers/wizard/provider-wizard-modal.utils.ts @@ -4,6 +4,10 @@ import { OrgSetupPhase, OrgWizardStep, } from "@/types/organizations"; +import { + PROVIDER_WIZARD_MODE, + ProviderWizardMode, +} from "@/types/provider-wizard"; export function getOrganizationsStepperOffset( currentStep: OrgWizardStep, @@ -15,3 +19,11 @@ export function getOrganizationsStepperOffset( return 1; } + +export function getProviderWizardModalTitle(mode: ProviderWizardMode) { + if (mode === PROVIDER_WIZARD_MODE.UPDATE) { + return "Update Provider Credentials"; + } + + return "Adding A Cloud Provider"; +} diff --git a/ui/components/providers/wizard/steps/credentials-step.tsx b/ui/components/providers/wizard/steps/credentials-step.tsx index 8b2b4b8581..8f8caee768 100644 --- a/ui/components/providers/wizard/steps/credentials-step.tsx +++ b/ui/components/providers/wizard/steps/credentials-step.tsx @@ -175,6 +175,7 @@ export function CredentialsStep({ hideActions: true, onLoadingChange: setIsFormLoading, onValidityChange: setIsFormValid, + validationMode: "onChange" as const, }; if (formType === "credentials") { diff --git a/ui/components/providers/workflow/forms/base-credentials-form.tsx b/ui/components/providers/workflow/forms/base-credentials-form.tsx index 5cc0e529ea..8d199294da 100644 --- a/ui/components/providers/workflow/forms/base-credentials-form.tsx +++ b/ui/components/providers/workflow/forms/base-credentials-form.tsx @@ -64,6 +64,7 @@ type BaseCredentialsFormProps = { onValidityChange?: (isValid: boolean) => void; submitButtonText?: string; showBackButton?: boolean; + validationMode?: "onSubmit" | "onChange"; }; export const BaseCredentialsForm = ({ @@ -81,6 +82,7 @@ export const BaseCredentialsForm = ({ onValidityChange, submitButtonText = "Next", showBackButton = true, + validationMode, }: BaseCredentialsFormProps) => { const { form, @@ -99,6 +101,7 @@ export const BaseCredentialsForm = ({ via, onSuccess, onBack, + validationMode, }); useEffect(() => { diff --git a/ui/hooks/use-credentials-form.ts b/ui/hooks/use-credentials-form.ts index 72fc4ab957..307095c2e9 100644 --- a/ui/hooks/use-credentials-form.ts +++ b/ui/hooks/use-credentials-form.ts @@ -24,6 +24,7 @@ type UseCredentialsFormProps = { via?: string | null; onSuccess?: () => void; onBack?: () => void; + validationMode?: "onSubmit" | "onChange"; }; export const useCredentialsForm = ({ @@ -35,6 +36,7 @@ export const useCredentialsForm = ({ via: viaOverride, onSuccess, onBack, + validationMode = "onChange", }: UseCredentialsFormProps) => { const router = useRouter(); const searchParamsObj = useSearchParams(); @@ -208,7 +210,7 @@ export const useCredentialsForm = ({ const form = useForm({ resolver: zodResolver(formSchema), defaultValues: defaultValues, - mode: "onChange", + mode: validationMode, reValidateMode: "onChange", criteriaMode: "all", // Show all errors for each field });