fix: Add visibility to box for viewing menu items

[maloun96]

SUMMARY

Add visibility to filter box for viewing menu items

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

BEFORE

AFTER

TEST PLAN

Go to dashboard
Set window size small that 3 dots menu can not fit into the box
See that menu is not visible at all.

ADDITIONAL INFORMATION

• Has associated issue:
• Changes UI
• Requires DB Migration.
• Confirm DB Migration upgrade and downgrade tested.
• Introduces new feature or API
• Removes existing feature or API
• Fix: [cosmetic][dashboard] Expanding three dots on filter box is rendered behind, not all options visible #12108

[codecov-io]

Codecov Report

Merging #12153 (573ab6e) into master (d204b02) will increase coverage by 1.32%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master   #12153      +/-   ##
==========================================
+ Coverage   65.77%   67.09%   +1.32%     
==========================================
  Files        1002     1002              
  Lines       49230    49231       +1     
  Branches     5000     4957      -43     
==========================================
+ Hits        32379    33032     +653     
+ Misses      16699    16076     -623     
+ Partials      152      123      -29     

Flag	Coverage Δ
cypress	51.48% <ø> (+5.73%)	⬆️
javascript	61.25% <ø> (ø)
python	64.04% <ø> (-0.16%)	⬇️

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

Impacted Files	Coverage Δ
superset/db_engine_specs/presto.py	74.67% <0.00%> (-8.66%)	⬇️
superset/examples/world_bank.py	97.10% <0.00%> (-2.90%)	⬇️
superset/examples/birth_names.py	96.51% <0.00%> (-2.33%)	⬇️
...et-frontend/src/SqlLab/components/LimitControl.tsx	89.36% <0.00%> (-1.95%)	⬇️
superset/models/core.py	88.58% <0.00%> (-0.28%)	⬇️
superset/connectors/sqla/models.py	91.37% <0.00%> (-0.14%)	⬇️
...c/dashboard/components/nativeFilters/FilterBar.tsx	51.79% <0.00%> (+0.71%)	⬆️
...perset-frontend/src/views/CRUD/chart/ChartList.tsx	81.88% <0.00%> (+0.78%)	⬆️
...rontend/src/SqlLab/components/AceEditorWrapper.tsx	60.75% <0.00%> (+1.26%)	⬆️
...set-frontend/src/dashboard/util/getDropPosition.js	92.06% <0.00%> (+1.58%)	⬆️
... and 79 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 d204b02...573ab6e. Read the comment docs.

[rusackas]

@kkucharc This changes something you touched just a couple weeks ago... could you quickly verify this doesn't break the changes you made? I think it was around the Filter Box "Apply" scrolling.

[junlincc]

thanks for the fix! i can't fully test it due to this error, not sure rebasing will help? not seeing this error elsewhere @maloun96

[villebro]

thanks for the fix! i can't fully test it due to this error, not sure rebasing will help?

@junlincc do you have GLOBAL_ASYNC_QUERIES feature flag turned on?

[kkucharc]

I just added my comment, but maybe it's better to solve this issue and find another solution for Region Filter.

[kkucharc]

Unfortunately this change will affect Region Filter:
overflow-y: visible (now):

and overflow-y: auto (was):

I changed scroll solution back here but I believe there must be some better solution here.

[maloun96]

@kkucharc @junlincc

[rusackas]

@kkucharc I just pulled this, and confirm that what I see looks like @maloun96 's video above. While the scrolling is... weird, it seems comparable to what was there before. I think we're OK, though I hope to find a better design solution to tiny charts/filters like this, as the scrolling is goofy.

I think we're OK here, but let me know if you see any remaining issue.

[kkucharc]

I totally fine with that :) Thank you for double checking! 👍

[junlincc]

This PR fixes the original issue but it seems introduce 2 critical issues below.
@maloun96 please take another look, thanks!

1. can not resize filter box individually, it drags the chart near by as resizing

Screen.Recording.2021-01-04.at.10.07.25.PM.mov

2. all other charts(not filter box)can not be resized at all.

Screen.Recording.2021-01-04.at.10.07.41.PM.mov

[rusackas]

This PR fixes the original issue but it seems introduce 2 critical issues below.
@maloun96 please take another look, thanks!

1. can not resize filter box individually, it drags the chart near by as resizing

Screen.Recording.2021-01-04.at.10.07.25.PM.mov

1. all other charts(not filter box)can not be resized at all.

Screen.Recording.2021-01-04.at.10.07.41.PM.mov

I believe issue #1 is due to the two charts being part of a "Column" and you're resizing that column. If I take them out of the column, they resize individually just fine.

I also see #2, but I also see it on master. Interestingly, the resize cursor on the right edge doesn't show, but if you try the bottom right hand corner, you'll see the diagonal resize cursor, and it works just fine.

Therefore, I'm approving this PR, but will hold off from merging without your thumbs up, @junlincc

[junlincc]

@rusackas you are right about issue 1, my mistake!
i can also confirm issue 2 is on master. let's address it in a separate PR