fix: Consolidating dropdown/NavDropdown user experience (removing React-bootstrap, using AntD) #14557

michael-s-molina · 2021-05-10T20:07:52Z

SUMMARY

Migrates NavDropdown from Bootstrap to AntD.
Changes language selection from Menu to Select.

See: #10254

@rusackas @junlincc @pkdotson

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TEST PLAN

1 - Enable multiple languages feature flag
2 - Check language picker at the top right corner

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

rusackas · 2021-05-10T20:13:33Z

/testenv up

github-actions · 2021-05-10T20:14:16Z

@rusackas Container image not yet published for this PR. Please try again when build is complete.

github-actions · 2021-05-10T20:14:17Z

@rusackas Ephemeral environment creation failed. Please check the Actions logs for details.

junlincc · 2021-05-10T21:27:07Z

thanks for the PR!
not related, but let's remove "-" between flag and language name in a separate PR. 🙏

geido

LGTM! Just need to fix those broken tests

superset-frontend/src/components/Menu/MenuRight.tsx

rusackas · 2021-05-11T20:21:22Z

@michael-s-molina please check up on the failing unit tests when you're able. Appreciate this PR though - so close to the end of the tunnel!

michael-s-molina · 2021-05-12T14:54:44Z

thanks for the PR!
not related, but let's remove "-" between flag and language name in a separate PR. 🙏

Done.

codecov · 2021-05-12T15:52:46Z

Codecov Report

Merging #14557 (69286ee) into master (3f6bd1e) will increase coverage by 0.00%.
The diff coverage is 87.23%.

@@           Coverage Diff           @@
##           master   #14557   +/-   ##
=======================================
  Coverage   77.38%   77.39%           
=======================================
  Files         959      958    -1     
  Lines       48465    48461    -4     
  Branches     5678     5676    -2     
=======================================
- Hits        37506    37504    -2     
+ Misses      10759    10757    -2     
  Partials      200      200

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

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

Impacted Files	Coverage Δ
...et-frontend/src/components/EditableTitle/index.tsx	`83.95% <ø> (ø)`
...et-frontend/src/components/Menu/LanguagePicker.tsx	`85.00% <82.35%> (+20.71%)`	⬆️
...uperset-frontend/src/components/Menu/MenuRight.tsx	`93.18% <88.88%> (+0.32%)`	⬆️
superset-frontend/src/components/Menu/Menu.tsx	`63.63% <100.00%> (ø)`
...d/components/DashboardBuilder/DashboardBuilder.tsx	`86.95% <100.00%> (ø)`
...-frontend/src/visualizations/presets/MainPreset.js	`0.00% <0.00%> (ø)`
...plore/components/controls/OptionControls/index.tsx	`90.52% <0.00%> (ø)`
...controls/FilterControl/AdhocFilterOption/index.jsx	`100.00% <0.00%> (ø)`
...onents/controls/FilterControl/AdhocFilter/index.js	`97.01% <0.00%> (+0.09%)`	⬆️

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 3f6bd1e...69286ee. Read the comment docs.

michael-s-molina · 2021-05-12T16:53:14Z

@michael-s-molina please check up on the failing unit tests when you're able. Appreciate this PR though - so close to the end of the tunnel!

Done.

junlincc · 2021-05-13T01:14:22Z

/testenv up

github-actions · 2021-05-13T01:16:28Z

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

rusackas · 2021-05-13T06:16:11Z

Sorry to be a stickler, but wondering about two things, based just on the screenshot:

Can the caret on the dropdown match the other menu items? We've been getting a lot of grief over this particular inconsistency
Does it need to scroll like we see there? That's far less of a dealbreaker than (1)

michael-s-molina · 2021-05-13T18:46:16Z

Sorry to be a stickler, but wondering about two things, based just on the screenshot:

Can the caret on the dropdown match the other menu items? We've been getting a lot of grief over this particular inconsistency

Does it need to scroll like we see there? That's far less of a dealbreaker than (1)

Both done.

rusackas · 2021-05-13T18:52:27Z

/testenv up

github-actions · 2021-05-13T18:56:48Z

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

rusackas · 2021-05-13T18:58:13Z

superset-frontend/src/components/Menu/LanguagePicker.tsx

-    </NavDropdown>
+      listHeight={400}
+      dropdownAlign={{
+        offset: [-135, 0],


could also do some styling to reposition this, e.g.:

transform: translateX(-100%);

@rusackas I changed to make the component wrap big texts in multiple lines instead of using transform to avoid fat dropdowns 😉. Since the width is fixed, the offset is always correctly positioned. If you agree, you can remove the need:followup label.

rusackas · 2021-05-13T19:04:20Z

Let's get that CSS transform added in separate PR. I don't see it as blocking for now.

rusackas

Appreciate the width/offset change! LGTM!

github-actions · 2021-05-13T21:54:38Z

Ephemeral environment shutdown and build artifacts deleted.

superset-github-bot bot added the Turing label May 10, 2021

pull-request-size bot added the size/L label May 10, 2021

rusackas changed the title ~~refactor: Bootstrap to AntD - NavDropdown~~ chore: Consolidating dropdown/NavDropdown user experience (removing React-bootstrap, using AntD) May 10, 2021

rusackas changed the title ~~chore: Consolidating dropdown/NavDropdown user experience (removing React-bootstrap, using AntD)~~ fix: Consolidating dropdown/NavDropdown user experience (removing React-bootstrap, using AntD) May 10, 2021

junlincc added the hold:testing! On hold for testing label May 10, 2021

geido approved these changes May 11, 2021

View reviewed changes

superset-frontend/src/components/Menu/MenuRight.tsx Outdated Show resolved Hide resolved

michael-s-molina force-pushed the bootstrap-to-antd-nav-dropdown branch 2 times, most recently from c3d7169 to c6a7d05 Compare May 12, 2021 14:54

junlincc requested a review from rusackas May 13, 2021 01:14

junlincc added need:review Requires a code review and removed hold:testing! On hold for testing labels May 13, 2021

michael-s-molina force-pushed the bootstrap-to-antd-nav-dropdown branch from c6a7d05 to 458c3ee Compare May 13, 2021 18:25

rusackas reviewed May 13, 2021

View reviewed changes

rusackas added the need:followup Requires followup label May 13, 2021

refactor: Bootstrap to AntD - NavDropdown

69286ee

michael-s-molina force-pushed the bootstrap-to-antd-nav-dropdown branch from 458c3ee to 69286ee Compare May 13, 2021 19:34

rusackas approved these changes May 13, 2021

View reviewed changes

rusackas merged commit e4d2424 into apache:master May 13, 2021

michael-s-molina mentioned this pull request May 14, 2021

chore: Adjust language picker theme to match other menus #14644

Merged

8 tasks

pkdotson mentioned this pull request May 14, 2021

Right menu drops to full column on page resize #14649

Closed

michael-s-molina mentioned this pull request May 17, 2021

[setting] edges were cutting on settings menu #14599

Closed

michael-s-molina added this to In progress in AntD Transition (SIP-48) via automation Jun 28, 2021

michael-s-molina moved this from In progress to Done in AntD Transition (SIP-48) Jun 28, 2021

cccs-RyanS pushed a commit to CybercentreCanada/superset that referenced this pull request Dec 17, 2021

refactor: Bootstrap to AntD - NavDropdown (apache#14557)

05aae2f

QAlexBall pushed a commit to QAlexBall/superset that referenced this pull request Dec 29, 2021

refactor: Bootstrap to AntD - NavDropdown (apache#14557)

7358eee

cccs-rc pushed a commit to CybercentreCanada/superset that referenced this pull request Mar 6, 2024

refactor: Bootstrap to AntD - NavDropdown (apache#14557)

d95a4d3

mistercrunch added 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 1.3.0 labels Mar 12, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Consolidating dropdown/NavDropdown user experience (removing React-bootstrap, using AntD) #14557

fix: Consolidating dropdown/NavDropdown user experience (removing React-bootstrap, using AntD) #14557

michael-s-molina commented May 10, 2021

rusackas commented May 10, 2021

github-actions bot commented May 10, 2021

github-actions bot commented May 10, 2021

junlincc commented May 10, 2021

geido left a comment •

edited

rusackas commented May 11, 2021

michael-s-molina commented May 12, 2021

codecov bot commented May 12, 2021 •

edited

michael-s-molina commented May 12, 2021

junlincc commented May 13, 2021

github-actions bot commented May 13, 2021

rusackas commented May 13, 2021

michael-s-molina commented May 13, 2021

rusackas commented May 13, 2021

github-actions bot commented May 13, 2021

rusackas May 13, 2021

michael-s-molina May 13, 2021

rusackas commented May 13, 2021

rusackas left a comment

github-actions bot commented May 13, 2021

fix: Consolidating dropdown/NavDropdown user experience (removing React-bootstrap, using AntD) #14557

fix: Consolidating dropdown/NavDropdown user experience (removing React-bootstrap, using AntD) #14557

Conversation

michael-s-molina commented May 10, 2021

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TEST PLAN

ADDITIONAL INFORMATION

rusackas commented May 10, 2021

github-actions bot commented May 10, 2021

github-actions bot commented May 10, 2021

junlincc commented May 10, 2021

geido left a comment • edited

Choose a reason for hiding this comment

rusackas commented May 11, 2021

michael-s-molina commented May 12, 2021

codecov bot commented May 12, 2021 • edited

Codecov Report

michael-s-molina commented May 12, 2021

junlincc commented May 13, 2021

github-actions bot commented May 13, 2021

rusackas commented May 13, 2021

michael-s-molina commented May 13, 2021

rusackas commented May 13, 2021

github-actions bot commented May 13, 2021

rusackas May 13, 2021

Choose a reason for hiding this comment

michael-s-molina May 13, 2021

Choose a reason for hiding this comment

rusackas commented May 13, 2021

rusackas left a comment

Choose a reason for hiding this comment

github-actions bot commented May 13, 2021

geido left a comment •

edited

codecov bot commented May 12, 2021 •

edited