refactor(navbar): migrate Bootstrap navbar to AntD menus #14184

pkdotson · 2021-04-16T06:56:53Z

SUMMARY

This pr will migrate the old react-bootstraps navbar into ant-d menus. This pr will also update smaller screen navbar views to more user friendly views.

Changes affect the main menu and submenu components

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

before
https://user-images.githubusercontent.com/17326228/115632043-cbfef580-a2bb-11eb-8a49-e75b422bec85.mov

after

Screen.Recording.2021-04-21.at.3.45.50.PM.mov

TEST PLAN

Will update test and manually check that each submenu looks similar to existing specs.

ADDITIONAL INFORMATION

Has associated issue:
[x ] 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

pkdotson · 2021-04-20T21:04:49Z

/testenv up

github-actions · 2021-04-20T21:09:22Z

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

rusackas · 2021-04-22T06:53:16Z

/testenv up

github-actions · 2021-04-22T06:57:27Z

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

rusackas · 2021-04-22T19:53:09Z

A few little visual details remaining:

The padding to the right of the caret got smaller, and does not match the padding on the left of the text
There's still like 1px of space between the menu trigger, and the dropdown itself, which is easy to see with the little blue line.
The corners of the dropdown list are rounded. I don't mind it on the bottom corners, but the top corners again show the blue a little bit more than I think they should, so maybe we should un-round just those top ones.
The list items in the dropdown use do have a faint blue background and gray text... now they stay white, but the text color changes to blue. I don't mind it, but I want @Steejay and/or @mihir174 to take a look, so I'll tag this PR with a need for design input.

... there also seem to be an issues with linting that're holding up CI.

codecov · 2021-04-23T00:51:58Z

Codecov Report

Merging #14184 (7bbea48) into master (6871ad1) will increase coverage by 0.02%.
The diff coverage is 93.08%.

@@            Coverage Diff             @@
##           master   #14184      +/-   ##
==========================================
+ Coverage   77.09%   77.12%   +0.02%     
==========================================
  Files         959      958       -1     
  Lines       48309    48344      +35     
  Branches     5661     5676      +15     
==========================================
+ Hits        37243    37283      +40     
+ Misses      10866    10861       -5     
  Partials      200      200

Flag	Coverage Δ
javascript	`72.46% <93.08%> (+0.06%)`	⬆️

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

Impacted Files	Coverage Δ
...ews/CRUD/annotationlayers/AnnotationLayersList.tsx	`77.35% <ø> (ø)`
...d/src/views/CRUD/csstemplates/CssTemplatesList.tsx	`78.26% <ø> (ø)`
superset-frontend/src/components/Menu/Menu.tsx	`63.63% <88.63%> (-5.84%)`	⬇️
...uperset-frontend/src/components/Menu/MenuRight.tsx	`92.85% <92.85%> (ø)`
superset-frontend/src/components/Menu/SubMenu.tsx	`95.71% <93.61%> (-4.29%)`	⬇️
superset-frontend/src/common/components/index.tsx	`100.00% <100.00%> (ø)`
...-frontend/src/views/CRUD/welcome/ActivityTable.tsx	`85.05% <100.00%> (ø)`
...perset-frontend/src/views/CRUD/welcome/Welcome.tsx	`84.44% <100.00%> (-0.18%)`	⬇️

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 6871ad1...7bbea48. Read the comment docs.

pkdotson · 2021-04-23T16:52:39Z

/testenv up

github-actions · 2021-04-23T16:57:30Z

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

junlincc

thank you for the PR. im seeing below

Nav bar jumpiness
Inconsistent caret style and position
are those intentional?

Screen.Recording.2021-04-23.at.11.28.21.AM.mov

Steejay · 2021-04-23T19:10:42Z

The list items in the dropdown use do have a faint blue background and gray text... now they stay white, but the text color changes to blue. I don't mind it, but I want @Steejay and/or @mihir174 to take a look, so I'll tag this PR with a need for design input.

im okay with the change here. @rusackas

Steejay · 2021-04-23T19:13:02Z

wondering if we can have the selected underline and the hover underline at the same weight so when they are side by side there isnt a jog

Steejay · 2021-04-23T19:13:54Z

Inconsistent caret style and position
are those intentional?

looks like a bug. caret style and position shouldnt be switching locations

…igrate-navbar

rusackas

Looking much better with new changes. Adding some styling questions just to make sure the approach makes sense.

rusackas · 2021-05-04T15:56:55Z

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

    font-weight: ${({ theme }) => theme.typography.weights.bold};
    margin-right: ${({ theme }) => theme.gridUnit * 3}px;
+    text-align: left;
+    font-size: 18px;


Suggested change

font-size: 18px;

font-size: 18px;

Ask @mihir174 about this - the design system includes 16px (l) and 21px (xl) font sizes... perhaps we should use one of these?

rusackas · 2021-05-04T16:02:05Z

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

    display: flex;
    align-items: center;
-    padding: 8px 0;
+    padding: 14px 0;


There are a few of these specific-pixel paddings in here. They're probably fine, but maybe @mihir174 would like to see what the next grid unit up or down looks like, particularly in combination with the font size adjustment mentioned above.

superset-frontend/src/views/CRUD/welcome/ActivityTable.test.tsx

rusackas · 2021-05-04T16:06:25Z

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

  }
-  .navbar-nav {
+
+  .ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item {


Just curious why we need the not(.ant-menu-dark) bit here... should this not be spaced the same if we did use the dark menu option?

Another override, because the default on the items were to large

superset-frontend/stylesheets/superset.less

rusackas · 2021-05-05T00:24:10Z

superset-frontend/stylesheets/superset.less

+  top: 51px !important;
+  border-radius: 0px !important;
+  @media (max-width: 767px) {
+    top: 269px !important;


This whole block of new styles contains a lot of highly specific pixel measurements. Is this introducing fragility by pinning things in particular locations? I just want to make sure that this doesn't look all broken if something else changes, like the height of a logo or something.

rusackas · 2021-05-05T00:25:47Z

/testenv up

github-actions · 2021-05-05T00:30:13Z

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

junlincc

approving as product sign-off

superset-frontend/stylesheets/superset.less

rusackas · 2021-05-05T06:38:56Z

Fixes #13492

mistercrunch · 2021-05-07T18:45:24Z

What do we need to do to get this through?

…igrate-navbar

pkdotson · 2021-05-07T21:46:28Z

What do we need to do to get this through?

@mistercrunch Evan and I were trying to figure out how to fix the overrides that we have to put in the less file. This will most likely end up as a follow up as this is not really a blocker.

rusackas · 2021-05-08T21:41:26Z

/testenv up

github-actions · 2021-05-08T21:45:45Z

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

rusackas

What do we need to do to get this through?

@mistercrunch Evan and I were trying to figure out how to fix the overrides that we have to put in the less file. This will most likely end up as a follow up as this is not really a blocker.

Indeed @mistercrunch and @pkdotson I've been holding this up over some concerns about styling:

There are some aspects of this layout that don't quite line up with our design system (font sizes/paddings) and don't use the theme variables from there
There are a lot of !important styles added to superset.less that seem antithetical to our attempts to move away from LESS and into Emotion.
There are some oddly specific pixel values in the styles to nudge things around, which look a bit fragile to me, and would be better served by rethinking how the layout styles flow.

That said, while I see the above concerns as some degree of tech debt, the net benefit of this PR outweighs these concerns. I think this can be merged as is, and we can follow up on these concerns later.

github-actions · 2021-05-08T21:58:20Z

Ephemeral environment shutdown and build artifacts deleted.

* initial commit * more polish * fix types and remove tests * fix tests, update menu css, add oetc * fix lint and precommit * fix test * update css, address comments * fix lint * update submenu for extra buttons * remove block and lint * fix lint * remove block * adjust margin * test round 2 * test round 3 * about section * src/components/Menu/Menu.test.tsx * remove redundant test * fmore pointed test * fix lint * remove unused css * fix dashboard nav view * update comments * use suggestion * lint-fix * move css, fix dropdown and text * lint * rearchitect main nav component * run lint fix * nit

initial commit

dee0fc7

superset-github-bot bot added the preset-io label Apr 16, 2021

pull-request-size bot added the size/XL label Apr 16, 2021

pkdotson changed the title ~~WIP refactor(navbar): migrate bootstraps nabar to ant-d menus~~ [WIP] refactor(navbar): migrate bootstraps nabar to ant-d menus Apr 16, 2021

pkdotson added 2 commits April 19, 2021 16:06

more polish

d741bc2

fix types and remove tests

c328299

fix tests, update menu css, add oetc

ee535c6

pull-request-size bot added size/XXL and removed size/XL labels Apr 21, 2021

pkdotson changed the title ~~[WIP] refactor(navbar): migrate bootstraps nabar to ant-d menus~~ refactor(navbar): migrate bootstraps nabar to ant-d menus Apr 21, 2021

pkdotson requested review from rusackas and junlincc April 21, 2021 23:10

Merge branch 'master' into migrate-navbar

efe414d

fix lint and precommit

4b5ad52

rusackas added the design:review label Apr 22, 2021

pkdotson added 3 commits April 22, 2021 12:56

fix test

7fb0cc7

update css, address comments

188615c

fix lint

12fafda

junlincc reviewed Apr 23, 2021

View reviewed changes

Merge branch 'master' of https://github.com/preset-io/superset into m…

a5dfc6b

…igrate-navbar

rusackas reviewed May 5, 2021

View reviewed changes

junlincc approved these changes May 5, 2021

View reviewed changes

rusackas reviewed May 5, 2021

View reviewed changes

superset-frontend/stylesheets/superset.less Outdated Show resolved Hide resolved

pkdotson added 2 commits May 5, 2021 17:48

rearchitect main nav component

2edb65b

run lint fix

22f55a2

pkdotson added 2 commits May 7, 2021 14:36

nit

f01f21b

Merge branch 'master' of https://github.com/preset-io/superset into m…

7bbea48

…igrate-navbar

rusackas approved these changes May 8, 2021

View reviewed changes

rusackas merged commit e16c4d8 into apache:master May 8, 2021

rusackas deleted the migrate-navbar branch May 8, 2021 21:58

rusackas added need:qa-review Requires QA review need:followup Requires followup labels May 8, 2021

geido mentioned this pull request May 11, 2021

fix: Menu does not appear on scroll in Dashboard #14566

Merged

8 tasks

rusackas mentioned this pull request May 11, 2021

Menu items have mouseover/highlighting display error #13492

Closed

rusackas added the bash! label May 12, 2021

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

refactor(navbar): migrate Bootstrap navbar to AntD menus #14184

refactor(navbar): migrate Bootstrap navbar to AntD menus #14184

pkdotson commented Apr 16, 2021 •

edited

Loading

pkdotson commented Apr 20, 2021

github-actions bot commented Apr 20, 2021

rusackas commented Apr 22, 2021

github-actions bot commented Apr 22, 2021

rusackas commented Apr 22, 2021

codecov bot commented Apr 23, 2021 •

edited

Loading

pkdotson commented Apr 23, 2021

github-actions bot commented Apr 23, 2021

junlincc left a comment •

edited

Loading

Steejay commented Apr 23, 2021

Steejay commented Apr 23, 2021

Steejay commented Apr 23, 2021

rusackas left a comment

rusackas May 4, 2021

rusackas May 4, 2021

rusackas May 4, 2021

pkdotson May 7, 2021

rusackas May 5, 2021

rusackas commented May 5, 2021

github-actions bot commented May 5, 2021

junlincc left a comment

rusackas commented May 5, 2021

mistercrunch commented May 7, 2021

pkdotson commented May 7, 2021 •

edited

Loading

rusackas commented May 8, 2021

github-actions bot commented May 8, 2021

rusackas left a comment

github-actions bot commented May 8, 2021

refactor(navbar): migrate Bootstrap navbar to AntD menus #14184

refactor(navbar): migrate Bootstrap navbar to AntD menus #14184

Conversation

pkdotson commented Apr 16, 2021 • edited Loading

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TEST PLAN

ADDITIONAL INFORMATION

pkdotson commented Apr 20, 2021

github-actions bot commented Apr 20, 2021

rusackas commented Apr 22, 2021

github-actions bot commented Apr 22, 2021

rusackas commented Apr 22, 2021

codecov bot commented Apr 23, 2021 • edited Loading

Codecov Report

pkdotson commented Apr 23, 2021

github-actions bot commented Apr 23, 2021

junlincc left a comment • edited Loading

Choose a reason for hiding this comment

Steejay commented Apr 23, 2021

Steejay commented Apr 23, 2021

Steejay commented Apr 23, 2021

rusackas left a comment

Choose a reason for hiding this comment

rusackas May 4, 2021

Choose a reason for hiding this comment

rusackas May 4, 2021

Choose a reason for hiding this comment

rusackas May 4, 2021

Choose a reason for hiding this comment

pkdotson May 7, 2021

Choose a reason for hiding this comment

rusackas May 5, 2021

Choose a reason for hiding this comment

rusackas commented May 5, 2021

github-actions bot commented May 5, 2021

junlincc left a comment

Choose a reason for hiding this comment

rusackas commented May 5, 2021

mistercrunch commented May 7, 2021

pkdotson commented May 7, 2021 • edited Loading

rusackas commented May 8, 2021

github-actions bot commented May 8, 2021

rusackas left a comment

Choose a reason for hiding this comment

github-actions bot commented May 8, 2021

pkdotson commented Apr 16, 2021 •

edited

Loading

codecov bot commented Apr 23, 2021 •

edited

Loading

junlincc left a comment •

edited

Loading

pkdotson commented May 7, 2021 •

edited

Loading