fix: Fixes right menu layout in different screen sizes

[michael-s-molina]

SUMMARY

Fixes #14649.

@rusackas @junlincc @pkdotson

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

screen-recording-2021-05-18-at-81831-am_PsMjueN7.mov

screen-recording-2021-05-18-at-81303-am_sYloDaxy.mov

TEST PLAN

1 - Resize screen
2 - Check the right menu behaviour

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

[junlincc]

/testenv up

[pkdotson]

I pulled the code and LGTM! Thanks for the fix.

[pkdotson]

I do notice however when the language selector is not in the right menu there is a lot of padding in betweeen the plus icon and settings.

[pkdotson]

I do notice however when the language selector is not in the right menu there is a lot of padding in betweeen the plus icon and settings.

[codecov]

Codecov Report

Merging #14689 (4b91a42) into master (be8c176) will increase coverage by 0.00%.
The diff coverage is 100.00%.

@@           Coverage Diff           @@
##           master   #14689   +/-   ##
=======================================
  Coverage   77.53%   77.53%           
=======================================
  Files         959      959           
  Lines       48648    48655    +7     
  Branches     5734     5735    +1     
=======================================
+ Hits        37718    37725    +7     
  Misses      10729    10729           
  Partials      201      201           

Flag	Coverage Δ
javascript	72.50% <100.00%> (+<0.01%)	⬆️

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

Impacted Files	Coverage Δ
superset-frontend/src/common/components/index.tsx	100.00% <ø> (ø)
superset-frontend/src/components/Menu/Menu.tsx	66.26% <100.00%> (+1.26%)	⬆️
...uperset-frontend/src/components/Menu/MenuRight.tsx	93.75% <100.00%> (+0.56%)	⬆️

---

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 be8c176...4b91a42. Read the comment docs.

[github-actions]

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

[michael-s-molina]

I do notice however when the language selector is not in the right menu there is a lot of padding in betweeen the plus icon and settings.

@pkdotson To fix this I changed the style of src/common/components/index.tsx -> StyledNav. Since you worked on the menus, please let me know if this won't introduce any regression.
https://github.com/apache/superset/pull/14689/files#diff-3cb5009f3350abc77ce448ae6bfc6e9dcd99b461136ac4beaf53f0f843ecfccc

[junlincc]

hi!menu items seem not aligned on resize?

[michael-s-molina]

hi!menu items seem not aligned on resize?

My last commit fixed @pkdotson comment. The ephemeral env was not updated though.

[rusackas]

/testenv up

[github-actions]

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

[rusackas]

LGTM, works with and without the language menu displayed.

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.