fix: Dropdown menu not closing on Dashboard view

[kgabryje]

SUMMARY

Fixes Menus not closing automatically. It turned out that Antd Menu doesn't work that well with react-bootstrap's DropdownButton, so I replaced it with Antd's Dropdown. We should do the same for other mixes of Menu with DropdownButton soon, as the same issue might occur.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TEST PLAN

ADDITIONAL INFORMATION

• Has associated issue: [dashboard]menuItems antd component regression #11645
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API

[kgabryje]

CC @junlincc
@ktmud Can you please take a look?

[ktmud]

I remember before the change the menu for charts would open on the left side of the trigger, now it opens on the right side. Can we make sure it always opens on the left side as the menu could be considered part of the chart and overlaying within the chart container makes sense.

[kgabryje]

@ktmud Done

[codecov-io]

Codecov Report

Merging #11671 (49ada5e) into master (2718909) will increase coverage by 0.48%.
The diff coverage is 65.62%.

@@            Coverage Diff             @@
##           master   #11671      +/-   ##
==========================================
+ Coverage   62.36%   62.84%   +0.48%     
==========================================
  Files         874      887      +13     
  Lines       42336    42931     +595     
  Branches     3972     3989      +17     
==========================================
+ Hits        26402    26980     +578     
- Misses      15754    15772      +18     
+ Partials      180      179       -1     

Flag	Coverage Δ
javascript	62.76% <65.62%> (-0.09%)	⬇️
python	62.89% <ø> (+0.82%)	⬆️

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

Impacted Files	Coverage Δ
superset-frontend/src/components/ModalTrigger.jsx	91.30% <ø> (ø)
...d/src/dashboard/components/SliceHeaderControls.jsx	11.94% <8.33%> (+0.64%)	⬆️
superset-frontend/src/common/components/index.tsx	100.00% <100.00%> (ø)
...src/dashboard/components/HeaderActionsDropdown.jsx	54.41% <100.00%> (+2.10%)	⬆️
...et-frontend/src/dashboard/components/SaveModal.jsx	9.09% <0.00%> (-31.82%)	⬇️
...rset-frontend/src/components/URLShortLinkModal.jsx	70.00% <0.00%> (-10.00%)	⬇️
...src/explore/components/controls/MetricsControl.jsx	85.05% <0.00%> (-0.91%)	⬇️
superset/views/base_api.py	97.61% <0.00%> (-0.42%)	⬇️
...tend/src/dashboard/components/DashboardBuilder.jsx	80.88% <0.00%> (-0.28%)	⬇️
superset/models/dashboard.py	75.37% <0.00%> (-0.21%)	⬇️
... and 21 more

---

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 2718909...49ada5e. Read the comment docs.

[ktmud]

Thanks, @kgabryje ! Could you fix the Cypress test, too? Then this one is good to go!