Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: Popovers in Explore not attached to the fields they are triggered by #19139

Merged
merged 4 commits into from
Mar 17, 2022
Merged

fix: Popovers in Explore not attached to the fields they are triggered by #19139

merged 4 commits into from
Mar 17, 2022

Conversation

diegomedina248
Copy link
Contributor

@diegomedina248 diegomedina248 commented Mar 14, 2022 •
edited
Loading

SUMMARY

Popovers are attached not to the triggers, but rather the overlay on the top of the page. This results in a few problems:

  • Pointers are not always accurate and do not point to the field they were triggered by
  • when user is scrolling through the control panel, the popover does not move and is floating in random places

The solution does two things:

  • Blocks scrolling in the panel container while the popup is opened
  • Calculates the popover placement based on the trigger location in the screen.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

Screen.Recording.2022-03-09.at.13.53.18.mov

After:

Screen.Recording.2022-03-14.at.11.37.18.mov

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

  • Has associated issue:
  • Required feature flags:
  • 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
Copy link
Member

/testenv up

@github-actions
Copy link
Contributor

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

rusackas
rusackas approved these changes Mar 16, 2022
View reviewed changes
Copy link
Member

@rusackas rusackas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well done! This looks great. The only quirk I noticed is that if you have a popover open and shrink the actual window (not a common occurrence I'm worried about) the popover becomes misaligned.

This could be fixed by using a debounced function on window resize to call calculatePlacement. But as I said, not too worried about this.

Approving, but also cc-ing @kgabryje since he knows these popovers and their fragilities quite well.

kgabryje
kgabryje reviewed Mar 16, 2022
View reviewed changes
...mponents/controls/FilterControl/AdhocFilterPopoverTrigger/AdhocFilterPopoverTrigger.test.tsx Outdated
@@ -73,7 +73,10 @@ test('should be visible when controlled', async () => {
Click
</AdhocFilterPopoverTrigger>,
);
expect(screen.getByRole('tooltip')).toBeInTheDocument();

await waitFor(() => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can replace waitFor + getByRole with findByRole

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed, thanks!

kgabryje
kgabryje approved these changes Mar 16, 2022
View reviewed changes
Copy link
Member

@kgabryje kgabryje left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Amazing work! That's been an issue for SUCH a long time, I'm super happy to see it fixed. Approving, I just left 1 minor comment (feel free to ignore it if the CI passes 😄)

@codecov
Copy link

codecov bot commented Mar 16, 2022 •
edited
Loading

Codecov Report

Merging #19139 (6065cf0) into master (8d53db1) will increase coverage by 0.01%.
The diff coverage is 87.80%.

❗ Current head 6065cf0 differs from pull request most recent head fe351fe. Consider uploading reports for the commit fe351fe to get more accurate results

@@            Coverage Diff             @@
##           master   #19139      +/-   ##
==========================================
+ Coverage   66.54%   66.55%   +0.01%     
==========================================
  Files        1646     1647       +1     
  Lines       63630    63669      +39     
  Branches     6475     6485      +10     
==========================================
+ Hits        42343    42378      +35     
- Misses      19607    19609       +2     
- Partials     1680     1682       +2
Flag Coverage Δ
javascript 51.34% <87.80%> (+0.04%) ⬆️

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

Impacted Files Coverage Δ
...mponents/controls/AnnotationLayerControl/index.jsx 10.16% <0.00%> (ø)
...ColumnSelectControl/ColumnSelectPopoverTrigger.tsx 65.51% <ø> (ø)
...components/controls/FilterBoxItemControl/index.jsx 63.63% <ø> (ø)
.../FilterControl/AdhocFilterPopoverTrigger/index.tsx 83.33% <ø> (ø)
...ntrols/MetricControl/AdhocMetricPopoverTrigger.tsx 70.27% <ø> (ø)
...ponents/controls/TimeSeriesColumnControl/index.jsx 90.19% <ø> (ø)
...ponents/controls/ControlPopover/ControlPopover.tsx 89.74% <89.74%> (ø)
...nts/controls/DateFilterControl/DateFilterLabel.tsx 41.83% <100.00%> (ø)

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 8d53db1...fe351fe. Read the comment docs.

@diegomedina248 diegomedina248 force-pushed the fix/popovers-in-explore-not-attached-to-the-triggering-fields branch from 752ee43 to fe351fe Compare March 16, 2022 22:49
@rusackas rusackas merged commit 0277ebc into apache:master Mar 17, 2022
@github-actions
Copy link
Contributor

Ephemeral environment shutdown and build artifacts deleted.

villebro pushed a commit that referenced this pull request Apr 3, 2022
@diegomedina248 @villebro
fix: Popovers in Explore not attached to the fields they are triggere…
28be231 
…d by (#19139)

* fix: Popovers in Explore not attached to the fields they are triggered by

* fix

* PR comment

* remove unused import

(cherry picked from commit 0277ebc)
@geido geido mentioned this pull request Dec 6, 2022
Merged
8 tasks
@mistercrunch mistercrunch added 🍒 1.5.0 🍒 1.5.1 🍒 1.5.2 🍒 1.5.3 🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels 🚢 2.0.0 labels Mar 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kgabryje kgabryje kgabryje approved these changes

@rusackas rusackas rusackas approved these changes

Assignees
No one assigned
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels lts-v1 Preset-Patch size/L 🍒 1.5.0 🍒 1.5.1 🍒 1.5.2 🍒 1.5.3 🚢 2.0.0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@diegomedina248 @rusackas @kgabryje @mistercrunch @villebro