chore: Extract common select component code

[cccs-RyanK]

Recently in the ongoing effort to clean up the select component, it was split into Sync and Async components. After splitting they shared alot of common code. This PR is to move some of the shared code into a new common file that each of the components can import from in order to better reuse code.

Overall task is outlined here: #20143

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

• [ x ] Has associated issue: feat: Adds the "Select all" option to the Select component #20143
• 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

[codecov]

Codecov Report

Merging #21094 (1f9ac36) into master (99a4f05) will increase coverage by 0.10%.
The diff coverage is 86.17%.

@@            Coverage Diff             @@
##           master   #21094      +/-   ##
==========================================
+ Coverage   66.45%   66.56%   +0.10%     
==========================================
  Files        1789     1791       +2     
  Lines       68296    68411     +115     
  Branches     7275     7302      +27     
==========================================
+ Hits        45387    45535     +148     
+ Misses      21034    20995      -39     
- Partials     1875     1881       +6     

Flag	Coverage Δ
javascript	52.74% <86.17%> (+0.24%)	⬆️

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

Impacted Files	Coverage Δ
.../src/dashboard/components/RefreshIntervalModal.tsx	80.00% <ø> (ø)
...c/filters/components/Select/SelectFilterPlugin.tsx	62.82% <ø> (ø)
...frontend/src/views/CRUD/alert/AlertReportModal.tsx	52.08% <ø> (ø)
superset-frontend/src/components/Select/utils.tsx	81.52% <81.52%> (ø)
...set-frontend/src/components/Select/AsyncSelect.tsx	84.61% <100.00%> (+1.14%)	⬆️
superset-frontend/src/components/Select/Select.tsx	92.55% <100.00%> (+5.13%)	⬆️
...e/components/controls/SelectAsyncControl/index.tsx	54.83% <100.00%> (ø)
...s/CRUD/data/dataset/AddDataset/LeftPanel/index.tsx	46.42% <0.00%> (-53.58%)	⬇️
...cy-preset-chart-nvd3/src/TimePivot/controlPanel.ts	33.33% <0.00%> (-16.67%)	⬇️
...t-controls/src/sections/echartsTimeSeriesQuery.tsx	33.33% <0.00%> (-16.67%)	⬇️
... and 54 more

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[geido]

Hi @cccs-RyanK. Thanks for this! Before I dive into the code I have a general comment.
I am not very fond of the idea of having constants, types and common components all within a common file. If we are opting for separation then I believe it makes sense to separate things a bit more.

I'd prefer to see a structure similar to this one:

• types.ts: Containing all the shared types
• utils.ts: Containing shared functions and constants
• BaseSelect.tsx: containing the shared component
• This is optional, but we could also have a styles.ts for the common styled components

@michael-s-molina what's your thought about this?

[michael-s-molina]

Thank you so much for PR @cccs-RyanK! I left some first-pass comments.

[michael-s-molina]

Hi @cccs-RyanK. Thanks for this! Before I dive into the code I have a general comment. I am not very fond of the idea of having constants, types and common components all within a common file. If we are opting for separation then I believe it makes sense to separate things a bit more.

I'd prefer to see a structure similar to this one:

• types.ts: Containing all the shared types
• utils.ts: Containing shared functions and constants
• BaseSelect.tsx: containing the shared component
• This is optional, but we could also have a styles.ts for the common styled components

@michael-s-molina what's your thought about this?

What I generally do is to keep things in context and depending on the size of things, break them into related submodules. One thing I don't like is mixing things that belong to different components. For example, I don't like to have a types.ts that contains all sync and async types because they are not shared. When things get bigger, and I have many types or styled-components, then I generally create your suggested structure but under each component folder like this:

AsyncSelect
  types.ts
  styles.ts
  test.ts
  index.ts
Select
  types.ts
  styles.ts
  test.ts
  index.ts
utils.ts (shared)
types.ts (shared)

If I have a few types or styled-components, I generally define them in the component.

[geido]

AsyncSelect
  types.ts
  styles.ts
  test.ts
  index.ts
Select
  types.ts
  styles.ts
  test.ts
  index.ts
utils.ts (shared)
types.ts (shared)

If I have a few types or styled-components, I generally define them in the component.

This makes sense but I still believe we should not have all the shared parts under one utils file even though this is not very big. For instance, I don't see why styles should be under utils.

[michael-s-molina]

This makes sense but I still believe we should not have all the shared parts under one utils file even though this is not very big. For instance, I don't see why styles should be under utils.

Maybe I was not clear but in my example styles would never be under utils. It would belong to the component file if we have a few of them, or to a styles submodule if we have many. So I think we're in agreement.

[michael-s-molina]

LGTM. Thanks for all the hard work @cccs-RyanK!