fix: Clear database form errors

[msyavuz]

SUMMARY

When creating a database connection with validation errors (e.g., duplicate database name), users had to manually dismiss error messages before being able to successfully connect, even
after fixing the underlying issue.

Added handleClearValidationErrors() calls to all form field onChange handlers in DatabaseModal/index.tsx. Now when users modify any form field after encountering validation errors, the
errors are automatically cleared, allowing immediate reconnection once the issue is resolved.

Reproduction steps:

1. Create a Google Sheets database and save it
2. Create a new Google Sheets database with the same name
3. Get validation error (expected)
4. Change the display name to fix the issue
5. Try to connect again → Connection appears to fail because errors aren't cleared

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before (first click of the button without clearing errors does nothing):

gsheets-before.mp4

After:

gsheets-after.mp4

TESTING INSTRUCTIONS

Run testing suite or follow repro steps

ADDITIONAL INFORMATION

• Has associated issue:
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[github-actions]

🎪 Showtime is building environment on GHA for 8bd0edf

[geido]

Just a nit

[bito-code-review]

Wrapping the onChange calls in a single handler that includes handleClearValidationErrors would reduce code duplication and centralize the error-clearing logic, making the code cleaner and easier to maintain.

superset-frontend/src/features/databases/DatabaseModal/index.tsx

const handleChangeWithClear = (actionType: ActionType, { name, value }: { name: string; value: any }) => {
  onChange(actionType, { name, value });
  handleClearValidationErrors();
};

[github-actions]

🎪 Showtime deployed environment on GHA for 8bd0edf

• Environment: http://34.217.32.154:8080 (admin/admin)
• Lifetime: 48h auto-cleanup
• Updates: New commits create fresh environments automatically

[github-actions]

🎪 Showtime is building environment on GHA for 7aa7b50

[github-actions]

🎪 Showtime is building environment on GHA for a7172b9

[msyavuz]

Testing user behaviour here is much more complex so i went with just testing the implementation. Otherwise we need to create e2e tests.

[github-actions]

🎪 Showtime deployed environment on GHA for a7172b9

• Environment: http://54.202.150.0:8080 (admin/admin)
• Lifetime: 48h auto-cleanup
• Updates: New commits create fresh environments automatically

[bito-code-review]

Code Review Agent Run #88e1e0

Actionable Suggestions - 0

Additional Suggestions - 5

• superset-frontend/src/features/databases/DatabaseModal/index.tsx - 4

  • Validation Clearing Refactor · Line 793-802
    Adding handleChangeWithValidation ensures that validation errors are cleared whenever the database state changes, improving user experience by preventing stale error messages from persisting after user input.
  • Consistent Change Handling · Line 1771-1803
    These prop definitions now use handleChangeWithValidation instead of onChange, ensuring validation errors are cleared on user changes in the database connection form.
  • Consistent Change Handling · Line 1826-1855
    These prop definitions in the ExtraOptions component now use handleChangeWithValidation, ensuring validation errors are cleared when users modify extra database options.
  • useCallback Dependency Fix · Line 779-779
    The useCallback for handleClearValidationErrors was missing clearError in its dependency array, which could lead to stale closure issues if clearError changes. This fix ensures the callback always uses the latest clearError function.
• superset-frontend/src/features/databases/DatabaseModal/index.test.tsx - 1

  • TypeScript any types in tests · Line 1602-1602
    The test functions at lines 1602 and 1637 use `any` types for parameters, which violates the project's coding standards prohibiting `any` in favor of proper TypeScript typing. This reduces type safety, even in test code. Consider updating to use ActionType and the appropriate payload union type.

Review Details

• Files reviewed - 2 · Commit Range: fcaf8bf..a7172b9

  • superset-frontend/src/features/databases/DatabaseModal/index.test.tsx
  • superset-frontend/src/features/databases/DatabaseModal/index.tsx
• Files skipped - 0
• Tools

  • Whispers (Secret Scanner) - ✔︎ Successful
  • Detect-secrets (Secret Scanner) - ✔︎ Successful

---

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

• /review - Manually triggers a full AI review.

• /pause - Pauses automatic reviews on this pull request.

• /resume - Resumes automatic reviews.

• /resolve - Marks all Bito-posted review comments as resolved.

• /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

• Customize agent settings
• Review rules
• General documentation
• FAQ

AI Code Review powered by

[github-actions]

🎪 Showtime is building environment on GHA for a7172b9

[github-actions]

🎪 Showtime is building environment on GHA for a7172b9

[github-actions]

⚠️ DEPRECATED WORKFLOW ⚠️

@EnxDev This workflow is deprecated! Please use the new Superset Showtime system instead:

• Replace "testenv-up" label with "🎪 trigger-start"
• Better reliability and easier management
• See https://github.com/mistercrunch/superset-showtime for details

Processing your ephemeral environment request here. Action: up. More information on how to use or configure ephemeral environments

[github-actions]

@EnxDev Ephemeral environment spinning up at http://34.209.81.157:8080. Credentials are 'admin'/'admin'. Please allow several minutes for bootstrapping and startup.

[EnxDev]

LGTM! I’m just wondering whether we should also add the isValidating prop here, similar to the Postgres database connection, which shows a loading spinner inside the field while validation is in progress.

[msyavuz]

LGTM! I’m just wondering whether we should also add the isValidating prop here, similar to the Postgres database connection, which shows a loading spinner inside the field while validation is in progress.

Validation here works after user clicks connect (for the Display Name field). So the loading spinner inside the input doesn't happen

[EnxDev]

LGTM! I’m just wondering whether we should also add the isValidating prop here, similar to the Postgres database connection, which shows a loading spinner inside the field while validation is in progress.

Validation here works after user clicks connect (for the Display Name field). So the loading spinner inside the input doesn't happen

I might be missing something, but as shown in the video, in both cases the validation is triggered when clicking outside the field.

From the moment validation starts to when the “Connect” button becomes enabled, there’s a short delay. I thought it might be useful to provide some loading feedback so users understand that the field is being validated.

Recording.2025-12-31.111139.mp4

[msyavuz]

I might be missing something, but as shown in the video, in both cases the validation is triggered when clicking outside the field.

From the moment validation starts to when the “Connect” button becomes enabled, there’s a short delay. I thought it might be useful to provide some loading feedback so users understand that the field is being validated.

That's not what i am fixing here. What this pr does is to make it so that users don't have to close little error box that pops up at the bottom there.

[EnxDev]

I might be missing something, but as shown in the video, in both cases the validation is triggered when clicking outside the field.

From the moment validation starts to when the “Connect” button becomes enabled, there’s a short delay. I thought it might be useful to provide some loading feedback so users understand that the field is being validated.

That's not what i am fixing here. What this pr does is to make it so that users don't have to close little error box that pops up at the bottom there.

Ok, then we can add it in a separate PR

[EnxDev]

I might be missing something, but as shown in the video, in both cases the validation is triggered when clicking outside the field.

From the moment validation starts to when the “Connect” button becomes enabled, there’s a short delay. I thought it might be useful to provide some loading feedback so users understand that the field is being validated.

That's not what i am fixing here. What this pr does is to make it so that users don't have to close little error box that pops up at the bottom there.

Ok, then we can add it in a separate PR

This is addressed in #36880