chore: Improves the Select component UI/UX - iteration 3

[michael-s-molina]

SUMMARY

Improves the Select component UI/UX - iteration 3.

Storybook changes:

Interactive Select

• Adds the remaining properties
• Hides the options control
• Shows a radio group with no header, text header, and ControlHeader

Page Scroll

• Adds a panel to show how the Select behaves when there's a scroll on the page

Select component changes:

• Shows the loading indicator while scrolling
• Improves the error handling
• Removes unnecessary useEffects
• Paginates a few px before the bottom of the scroll for better UX
• Adds the invertSelection option
• Changes the API to only expose single and multiple modes
• Removes the usage of any from the implementation
• Improves the support for pagination

Improvements/tasks that will be done in the next iterations:

• Add RTL tests

@rusackas @geido @villebro @pkdotson @kgabryje @suddjian @zhaoyongjie
This component will be used by everyone. Please take the time to learn the API, play with the different controls, review and test.

PS: Sometimes the storybook is producing a 404 error. We need to investigate that in another PR and also update the Storybook version. For now, if you find the error, you only need to delete the .cache folder inside node_modules to make it work.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

122447300-fa2a4a00-cf79-11eb-951c-4a7892dd4fa5.mov

screen-recording-2021-06-24-at-85832-am_msBiKKsW.mov

TESTING INSTRUCTIONS

1- Start the storybook
2 - Open the Select panels
3 - Test the controls

ADDITIONAL INFORMATION

• Has associated issue:
• 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

[geido]

Code LGTM! Thanks for the improvements 👍

[codecov]

Codecov Report

Merging #15363 (9383d9c) into master (b3616d2) will decrease coverage by 0.03%.
The diff coverage is 0.00%.

@@            Coverage Diff             @@
##           master   #15363      +/-   ##
==========================================
- Coverage   77.25%   77.22%   -0.04%     
==========================================
  Files         975      975              
  Lines       50583    50604      +21     
  Branches     6202     6207       +5     
==========================================
  Hits        39079    39079              
- Misses      11297    11318      +21     
  Partials      207      207              

Flag	Coverage Δ
javascript	71.72% <0.00%> (-0.07%)	⬇️

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

Impacted Files	Coverage Δ
superset-frontend/src/components/Select/Select.tsx	0.00% <0.00%> (ø)

---

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 b3616d2...9383d9c. Read the comment docs.

[suddjian]

/testenv up

[github-actions]

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

[rusackas]

I noticed that if you turn on the allowNewOptions prop, the behavior is not as I'd expect.

If you type some gibberish into the input, and hit return, it DOES create the new list item, but it does NOT select it. I expected it would, but the prior selected value remains selected and displayed.

[rusackas]

Minor nit, or something for a future iteration: The Interactive Select might benefit from a separate "selected values" display, to prove that the invertSelection prop works as expected.

[rusackas]

Loving the improvements to the Storybook, and the code in general. This component is looking fantastic!!!

I could only find one thing that didn't behave quite as I'd expected, but since it seems like it could be handled in a future iteration, I'm marking this PR as approved!

[villebro]

This is looking really great, LGTM!

[michael-s-molina]

Minor nit, or something for a future iteration: The Interactive Select might benefit from a separate "selected values" display, to prove that the invertSelection prop works as expected.

@rusackas An interesting point here. Actually, the selected values are the same, we just change the icon from the checkmark to the forbidden one. It's just an indication that the selected items will be excluded. With this behavior in mind, do you think there is a more appropriate name for it or that's ok?

[rusackas]

Minor nit, or something for a future iteration: The Interactive Select might benefit from a separate "selected values" display, to prove that the invertSelection prop works as expected.

@rusackas An interesting point here. Actually, the selected values are the same, we just change the icon from the checkmark to the forbidden one. It's just an indication that the selected items will be excluded. With this behavior in mind, do you think there is a more appropriate name for it or that's ok?

Sounds reasonable to me for now!

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.