fix(dashboard): Show the filters popover behind the dashboard header when scrolling #15933

geido · 2021-07-28T20:41:44Z

SUMMARY

This PR fixes the z-index of the dashboard header to make sure that the Filters Popover does not show over the Dashboard header.

Fixes: #15873

BEFORE

AFTER

FCC.New.Coder.Su.mp4

TESTING INSTRUCTIONS

Open a dashboard
Open the filters of a chart
Scroll down
Make sure the filters popover does not appear over the dashboard header

ADDITIONAL INFORMATION

Has associated issue: [dashboard][native-filter]Filter indicator overlay in Dashboard on scroll #15873
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

geido · 2021-07-28T20:42:22Z

@rosemarie-chiu @jinghua-qa

codecov · 2021-07-28T21:02:14Z

Codecov Report

Merging #15933 (b4c6cbb) into master (7b0acc4) will increase coverage by 0.00%.
The diff coverage is 83.33%.

@@           Coverage Diff           @@
##           master   #15933   +/-   ##
=======================================
  Coverage   76.92%   76.92%           
=======================================
  Files         988      988           
  Lines       52302    52307    +5     
  Branches     7123     7126    +3     
=======================================
+ Hits        40232    40238    +6     
+ Misses      11845    11844    -1     
  Partials      225      225

Flag	Coverage Δ
javascript	`71.57% <83.33%> (+<0.01%)`	⬆️

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

Impacted Files	Coverage Δ
...d/components/DashboardBuilder/DashboardBuilder.tsx	`89.71% <80.00%> (-0.67%)`	⬇️
superset-frontend/src/common/components/index.tsx	`100.00% <100.00%> (ø)`
...et-frontend/src/dashboard/components/Dashboard.jsx	`78.84% <0.00%> (-0.57%)`	⬇️
superset-frontend/src/components/Select/Select.tsx	`74.42% <0.00%> (+1.36%)`	⬆️

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 7b0acc4...b4c6cbb. Read the comment docs.

rusackas · 2021-07-28T22:12:19Z

/testenv up

github-actions · 2021-07-28T22:14:21Z

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

rusackas · 2021-07-28T22:49:45Z

Works for the second issue depicted in the topic as well:

rusackas · 2021-07-28T22:53:17Z

superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx

@@ -283,6 +285,13 @@ const DashboardBuilder: FC<DashboardBuilderProps> = () => {
        </DragDroppable>
      </StyledHeader>
      <StyledContent fullSizeChartId={fullSizeChartId}>
+        <Global
+          styles={css`


I wonder if styles is any more performant than css or if we should just make this css for future consistency/themability. ¯\_(ツ)_/¯

rusackas

One little nit, but not a blocker.

Really appreciate the inline comments for the rationale about the z-index values, btw. Seeing more need every day to add a z-index registry (a bunch of defined "layers") to the Theme.

geido · 2021-07-29T08:56:27Z

I will appreciate an eye from @michael-s-molina as well on this as he worked on similar issues in the past

michael-s-molina · 2021-07-29T11:32:49Z

/testenv up FEATURE_DASHBOARD_NATIVE_FILTERS=true

github-actions · 2021-07-29T11:37:08Z

@michael-s-molina Ephemeral environment spinning up at http://34.219.220.235:8080. Credentials are admin/admin. Please allow several minutes for bootstrapping and startup.

michael-s-molina

LGTM. I did some tests with the native filters enabled and it's working as intended.

rosemarie-chiu

LGTM on UI

github-actions · 2021-07-29T16:19:48Z

Ephemeral environment shutdown and build artifacts deleted.

…when scrolling (apache#15933) * Fix z-index * Fix z-index dropdown and maximized chart filters

Fix z-index

26c8369

superset-github-bot bot added the Flexiana label Jul 28, 2021

pull-request-size bot added the size/XS label Jul 28, 2021

geido requested review from michael-s-molina and junlincc July 28, 2021 20:41

geido added this to In Review in Community Usability Bash! 🐛🐞🕷 Jul 28, 2021

geido changed the title ~~fix(dashboard): Popover menu to show under the dashboard header~~ fix(dashboard): Show the filters popover behind the dashboard header when scrolling Jul 28, 2021

Fix z-index dropdown and maximized chart filters

b4c6cbb

pull-request-size bot added size/S and removed size/XS labels Jul 28, 2021

rusackas reviewed Jul 28, 2021

View reviewed changes

rusackas approved these changes Jul 28, 2021

View reviewed changes

michael-s-molina approved these changes Jul 29, 2021

View reviewed changes

rosemarie-chiu approved these changes Jul 29, 2021

View reviewed changes

geido merged commit 56dd2a3 into apache:master Jul 29, 2021

geido moved this from In Review to Done in Community Usability Bash! 🐛🐞🕷 Jul 29, 2021

opus-42 pushed a commit to opus-42/incubator-superset that referenced this pull request Nov 14, 2021

fix(dashboard): Show the filters popover behind the dashboard header …

a9a3442

…when scrolling (apache#15933) * Fix z-index * Fix z-index dropdown and maximized chart filters

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

fix(dashboard): Show the filters popover behind the dashboard header …

d27abaf

…when scrolling (apache#15933) * Fix z-index * Fix z-index dropdown and maximized chart filters

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

fix(dashboard): Show the filters popover behind the dashboard header …

8467f37

…when scrolling (apache#15933) * Fix z-index * Fix z-index dropdown and maximized chart filters

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

fix(dashboard): Show the filters popover behind the dashboard header …

ac9d53d

…when scrolling (apache#15933) * Fix z-index * Fix z-index dropdown and maximized chart filters

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

mistercrunch added the 🚢 1.3.0 label Mar 13, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(dashboard): Show the filters popover behind the dashboard header when scrolling #15933

fix(dashboard): Show the filters popover behind the dashboard header when scrolling #15933

geido commented Jul 28, 2021 •

edited

Loading

geido commented Jul 28, 2021

codecov bot commented Jul 28, 2021 •

edited

Loading

rusackas commented Jul 28, 2021

github-actions bot commented Jul 28, 2021

rusackas commented Jul 28, 2021

rusackas Jul 28, 2021

rusackas left a comment

geido commented Jul 29, 2021

michael-s-molina commented Jul 29, 2021

github-actions bot commented Jul 29, 2021

michael-s-molina left a comment

rosemarie-chiu left a comment

github-actions bot commented Jul 29, 2021

fix(dashboard): Show the filters popover behind the dashboard header when scrolling #15933

fix(dashboard): Show the filters popover behind the dashboard header when scrolling #15933

Conversation

geido commented Jul 28, 2021 • edited Loading

SUMMARY

BEFORE

AFTER

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

geido commented Jul 28, 2021

codecov bot commented Jul 28, 2021 • edited Loading

Codecov Report

rusackas commented Jul 28, 2021

github-actions bot commented Jul 28, 2021

rusackas commented Jul 28, 2021

rusackas Jul 28, 2021

Choose a reason for hiding this comment

rusackas left a comment

Choose a reason for hiding this comment

geido commented Jul 29, 2021

michael-s-molina commented Jul 29, 2021

github-actions bot commented Jul 29, 2021

michael-s-molina left a comment

Choose a reason for hiding this comment

rosemarie-chiu left a comment

Choose a reason for hiding this comment

github-actions bot commented Jul 29, 2021

geido commented Jul 28, 2021 •

edited

Loading

codecov bot commented Jul 28, 2021 •

edited

Loading