From e88cf5edf189522ecb71ec22b81a32b627b0418a Mon Sep 17 00:00:00 2001
From: alejandrobailo <alejandrobailo94@gmail.com>
Date: Tue, 24 Feb 2026 12:04:48 +0100
Subject: [PATCH] fix(ui): add dynamic modal title and validation mode

---
 .../provider-wizard-modal.utils.test.ts       | 20 ++++++++++++++++++-
 .../wizard/provider-wizard-modal.utils.ts     | 12 +++++++++++
 .../wizard/steps/credentials-step.tsx         |  1 +
 .../workflow/forms/base-credentials-form.tsx  |  3 +++
 ui/hooks/use-credentials-form.ts              |  4 +++-
 5 files changed, 38 insertions(+), 2 deletions(-)

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
   });