fix(sso): clear the required-error when a secret replacement is backed out

Author: waleedlatif1

apps/sim/ee/sso/components/sso-settings.test.tsx

@@ -298,6 +298,27 @@ describe('SSO client secret preservation', () => {
     expect(container).toHaveTextContent('Client Secret is required.')
   })
 
+  /**
+   * Backing out has to revalidate as "keeping the saved secret". Validating against
+   * the pre-toggle value would leave a required-error stranded on the masked row,
+   * where there is no longer an input to fix it in.
+   */
+  it('clears a stranded required-error when the replacement is backed out', async () => {
+    renderSso('org-a')
+    startEditing()
+    act(() => findButton('Replace')?.click())
+    typeSecret('   ')
+    await act(async () => {
+      findButton('Update')?.click()
+    })
+    expect(container).toHaveTextContent('Client Secret is required.')
+
+    act(() => findButton('Keep saved')?.click())
+
+    expect(container).not.toHaveTextContent('Client Secret is required.')
+    expect(secretInput()?.value).toBe('••••••••••••4f2a')
+  })
+
   /**
    * The label is deliberately not "Cancel": the header already uses that to discard
    * the whole edit, and matching it here would make two very different actions

apps/sim/ee/sso/components/sso-settings.tsx

@@ -331,7 +331,12 @@ function OrganizationSsoSettings({ organizationId }: SSOProps) {
     return out
   }
 
-  const validateAll = (data: typeof formData) => {
+  /**
+   * `isReplacingSecret` is a parameter rather than a closure read: callers that
+   * validate in the same tick as toggling it would otherwise see the previous
+   * value and leave a stale "required" error on a field that is no longer an input.
+   */
+  const validateAll = (data: typeof formData, isReplacingSecret = isReplacingClientSecret) => {
     const newErrors: Record<string, string[]> = {
       providerType: [],
       providerId: validateProviderId(data.providerId),
@@ -354,7 +359,7 @@ function OrganizationSsoSettings({ organizationId }: SSOProps) {
       // clicked the field is a real input again, so a blank or whitespace-only
       // value has to fail rather than quietly overwrite a working secret.
       newErrors.clientSecret =
-        hasStoredClientSecret && !isReplacingClientSecret
+        hasStoredClientSecret && !isReplacingSecret
           ? []
           : validateRequired('Client Secret', data.clientSecret)
       if (!data.scopes || !data.scopes.trim()) {
@@ -483,6 +488,18 @@ function OrganizationSsoSettings({ organizationId }: SSOProps) {
     validateAll(next)
   }
 
+  /**
+   * Backs out of a replacement: drops what was typed and revalidates as "keeping
+   * the saved secret", so a required-error from a failed submit does not linger on
+   * a row that is no longer an input.
+   */
+  const handleKeepSavedSecret = () => {
+    setIsReplacingClientSecret(false)
+    const next = { ...formData, clientSecret: '' }
+    setFormData(next)
+    validateAll(next, false)
+  }
+
   const isSaml = formData.providerType === 'saml'
   const mappingDefaults = isSaml ? SAML_DEFAULT_MAPPING : OIDC_DEFAULT_MAPPING
   const callbackUrl = `${getBaseUrl()}/api/auth/${isSaml ? 'sso/saml2/callback' : 'sso/callback'}/${formData.providerId || existingProvider?.providerId || 'provider-id'}`
@@ -822,10 +839,7 @@ function OrganizationSsoSettings({ organizationId }: SSOProps) {
                     storedHint={storedClientSecretHint}
                     isReplacing={isReplacingClientSecret}
                     onReplace={() => setIsReplacingClientSecret(true)}
-                    onCancelReplace={() => {
-                      setIsReplacingClientSecret(false)
-                      handleInputChange('clientSecret', '')
-                    }}
+                    onCancelReplace={handleKeepSavedSecret}
                     value={formData.clientSecret}
                     onChange={(next) => handleInputChange('clientSecret', next)}
                     hasError={showErrors && errors.clientSecret.length > 0}