fix(DatasourceModal): replace imperative modal updates with declarative state

[eschutho]

Summary

Fixes DOM error NotFoundError: Failed to execute 'insertBefore' on 'Node' in DatasourceModal by replacing imperative modal updates with declarative React state management.

Problem

The DatasourceModal component was storing modal instances from Modal.useModal() and calling .update() on them imperatively. This caused DOM manipulation conflicts with React's reconciliation process, leading to the error when React tried to insert DOM nodes that were no longer children of their expected parents.

Solution

• Convert ref to state: Changed syncColumnsRef to syncColumns state variable for proper React reactivity
• Remove imperative updates: Eliminated confirmModal.update() calls that manipulated DOM outside React's control
• Simplify modal creation: Modal content now updates naturally through React re-renders
• Fix dependencies: Removed circular dependency in getSaveDialog callback
• Add tests: Created comprehensive tests to verify proper hook usage and prevent regressions

Test Plan

• All existing DatasourceModal tests pass (14/14)
• New tests verify Modal.useModal hook usage instead of direct Modal.confirm
• Tests confirm modal interactions work without DOM errors
• TypeScript compilation successful
• Pre-commit hooks pass (ESLint, type checking)

Technical Details

Before: Modal content was updated imperatively:

const [confirmModal, setConfirmModal] = useState(null);
// ...
confirmModal.update({ content: getSaveDialog() }); // ❌ DOM manipulation

After: Modal content updates declaratively:

const [syncColumns, setSyncColumns] = useState(false);
// Modal re-renders naturally when syncColumns state changes ✅

🤖 Generated with Claude Code

[korbit-ai]

I've completed my review and didn't find any issues.

Files scanned

​

File Path	Reviewed
superset-frontend/src/dashboard/components/EmbeddedModal/index.tsx	✅
superset-frontend/src/components/Datasource/DatasourceModal/index.tsx	✅
superset-frontend/src/pages/ThemeList/index.tsx	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

[github-actions]

🎪 Showtime is building environment on GHA for b44ec86

[github-actions]

🎪 Showtime deployed environment on GHA for b44ec86

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