chore: Replaces the select for a dropdown button in the CSS editor

[michael-s-molina]

SUMMARY

Replaces the select for a dropdown button in the CSS editor. The dropdown button is more adequate to the current behavior where a user loads a template in the editor. In the previous version, the selection was not being preserved while interacting with the select and it shouldn't because the user is not editing the template but only copying its content to the editor. This was an indication that we were using the wrong component for the desired functionality.

I also changed the editor border to use the theme colors and anchored the menu to the right to display CSS templates with big names.

@junlincc @jinghua-qa @rusackas

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Screen.Recording.2021-08-03.at.10.51.14.AM.mov

Screen.Recording.2021-08-03.at.11.36.01.AM.mov

TESTING INSTRUCTIONS

See the videos for instructions.

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

[codecov]

Codecov Report

Merging #16043 (d129868) into master (4cb79e5) will decrease coverage by 0.00%.
The diff coverage is 100.00%.

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

@@            Coverage Diff             @@
##           master   #16043      +/-   ##
==========================================
- Coverage   76.90%   76.90%   -0.01%     
==========================================
  Files         995      995              
  Lines       52842    52846       +4     
  Branches     6709     6709              
==========================================
+ Hits        40640    40641       +1     
- Misses      11976    11979       +3     
  Partials      226      226              

Flag	Coverage Δ
javascript	71.31% <100.00%> (-0.01%)	⬇️

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

Impacted Files	Coverage Δ
...ntend/src/dashboard/components/CssEditor/index.jsx	96.42% <100.00%> (+0.59%)	⬆️
superset-frontend/src/components/Select/Select.tsx	73.05% <0.00%> (-1.37%)	⬇️

---

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 4cb79e5...bbf2026. Read the comment docs.

[michael-s-molina]

/testenv up

[github-actions]

@michael-s-molina Ephemeral environment spinning up at http://54.218.158.159:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

[junlincc]

Thanks for the PR, I love the new UI!
There is a bug in CSS template. the editor should only affect the dashboard styling, not the rest of the product. as i switch between two layout, even the menu and modal font got changed. That is probably a bigger issue.

Screen.Recording.2021-08-03.at.12.11.24.PM.mov

[michael-s-molina]

There is a bug in CSS template. the editor should only affect the dashboard styling, not the rest of the product. as i switch between two layout, even the menu and modal font got changed. That is probably a bigger issue.

Yes, we should open another PR to fix this bigger issue.

[geido]

LGTM! Manual tested as well

[junlincc]

lgtm! thanks for the PR!

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.