table sources provide table options as sorted typeahead

[pedroslopez]

Change description

Provides better experience for configuring the source when users have lots of tables in their database.
Also fixes typeaheads on the source edit page to play nicely alongside react-hook-form.

Checklists

Development

• Application changes have been tested appropriately

Impact

• Code follows company security practices and guidelines
• Security impact of change has been considered
• Performance impact of change has been considered
• Possible migration needs considered (model migrations, config migrations, etc.)

Please explain any security, performance, migration, or other impacts if relevant:

Code review

• Pull request has a descriptive title and context useful to a reviewer. Screenshots or screencasts are attached where applicable.
• Relevant tags have been added to the PR (bug, enhancement, internal, etc.)

[pedroslopez]

calling both react-hook-form's onChange and our updateOption

[pedroslopez]

Because Typeahead's props aren't compatible with the props react-hook-form's register function returns, we need to wrap it in a Controller with a custom render function

[pedroslopez]

On the first few renders until we get back the connectionOptions response, it falls back to a disabled text input. This was causing problems because register by default does not unregister on unmount, so sometimes the custom onChange function passed here stuck around and was still getting called whenever we changed the value on the typeahead. Passing shouldUnregister: true here correctly cleans up the old onChange on unmount as expected.

[krishnaglick]

Do you think you could write a test to test this? I feel like this is a touchy part of the codebase and could use the support.
Maybe it's worth putting this logic into its own component so it's more easily testable?

[pedroslopez]

@krishnaglick separated out this react-hook-form + react-bootstrap-typeahead integration into its own component and added some tests for it. I was able to reuse it in both the Source Edit and App Edit pages- the destination edit page also has a typeahead in it, but the page doesn't use react-hook-form. We can probably move to using this component later when we go all-in react-hook-form.

[krishnaglick]

Really love what you did here, nice job!