chore: Split Select component into Async and Sync components

[cccs-RyanK]

SUMMARY

Splits the Synchronous and Asynchronous behaviour of the Select component into two separate components. It's very clear that the behaviors are different and we can significantly reduce code complexity if we treat them as different components.

This task was outlined as a part of this PR by @michael-s-molina : #20143

Most of the use cases for the select component are synchronous at the moment, so the default "Select" component will remain the synchronous Select. "AsyncSelect" is the new component for asynchronous use cases. For this PR, the files remain identical to ensure nothing will be broken, but references to the Select Component that have asynchronous options have been changed to reference AsyncSelect.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

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

[michael-s-molina]

Thanks for the PR @cccs-RyanK!

Some suggestions to complete this PR and the first phase:

1 - You can include this line in src/components/index.ts to be able to import the AsyncSelect directly from src/components:

export { default as AsyncSelect } from './Select/AsyncSelect';

And then import the component with:

import { AsyncSelect } from 'src/components';

2 - Don't forget to remove the imports of the sync Select when changing to AsyncSelect.

3 - Remove the async - prefix of the tests in AsyncSelect.test.tsx

4 - Remove the static - prefix of the tests in Select.test.tsx

5 - Remove the tests in Select.test.tsx that contain the async - prefix

6 - Split the Select Storybook (Select.stories.tsx and AsyncSelect.stories.tsx)

Thanks again! This will really reduce code complexity!

[michael-s-molina]

For anyone interested, here are the phases for improving the component:
1 - Split the component into sync and async versions while preserving the code (this PR)
2 - Remove the unnecessary code from the sync version (next PR)
3 - Remove the unnecessary code from the async version
4 - Implement the "Select all" feature for the sync version (90% of the codebase)
5 - Implement the "Select all" feature for the async version

My suggestion is that we implement each phase in a specific PR.

@rusackas @cccs-RyanK

[michael-s-molina]

Second review completed 👍🏼

We also need to remove any references to loadOptions (async) in the Select.test.tsx 😉

[michael-s-molina]

Thanks for the changes @cccs-RyanK! I think it's just a matter of fixing CI errors now.

[codecov]

Codecov Report

Merging #20466 (c5d9829) into master (e7b965a) will decrease coverage by 0.01%.
The diff coverage is 82.84%.

❗ Current head c5d9829 differs from pull request most recent head e43cdd3. Consider uploading reports for the commit e43cdd3 to get more accurate results

@@            Coverage Diff             @@
##           master   #20466      +/-   ##
==========================================
- Coverage   66.85%   66.84%   -0.02%     
==========================================
  Files        1754     1755       +1     
  Lines       65757    65996     +239     
  Branches     6952     7030      +78     
==========================================
+ Hits        43964    44115     +151     
- Misses      20029    20092      +63     
- Partials     1764     1789      +25     

Flag	Coverage Δ
javascript	51.94% <82.84%> (+0.07%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

Impacted Files	Coverage Δ
...perset-frontend/src/addSlice/AddSliceContainer.tsx	66.66% <ø> (ø)
...frontend/src/components/DatabaseSelector/index.tsx	88.88% <ø> (ø)
...end/src/components/Datasource/DatasourceEditor.jsx	65.61% <ø> (ø)
...src/dashboard/components/PropertiesModal/index.tsx	62.98% <ø> (ø)
...ersConfigModal/FiltersConfigForm/DatasetSelect.tsx	40.00% <ø> (ø)
...d/src/explore/components/PropertiesModal/index.tsx	63.93% <ø> (ø)
...frontend/src/views/CRUD/alert/AlertReportModal.tsx	52.08% <ø> (ø)
...set-frontend/src/components/Select/AsyncSelect.tsx	82.84% <82.84%> (ø)
superset-frontend/src/components/Select/Select.tsx	67.78% <0.00%> (-19.67%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e7b965a...e43cdd3. Read the comment docs.

[michael-s-molina]

LGTM. Thank you for all the work @cccs-RyanK! I can't wait for the next phases!