fix(ui): add dynamic modal title and validation mode

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

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";
+}

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") {

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(() => {

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