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.

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

fix(cosmetic): Fix Datasource Modal Out Of Box #20237

Merged
merged 1 commit into from
Jun 3, 2022

Conversation

Renderz
Copy link
Contributor

@Renderz Renderz commented Jun 2, 2022

SUMMARY

remove 'overflow: visible' from DatasourceModal component, to fit with the height limit, and show the scrollbar.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before
before

After
after

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

  • Has associated issue: Fixed #20236
  • 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

@stephenLYZ
Copy link
Member

stephenLYZ commented Jun 2, 2022

Thanks for the contribution! Actually this css snippet can be found in the context of this issue, so we probably can't remove it easily, but if we verify that the issue is working correctly, I think it's okay to remove it. I think the problem is probably related to this issue, which is about maxHeight of the modal. cc @rusackas

@Renderz
Copy link
Contributor Author

Renderz commented Jun 3, 2022

Thanks for the contribution! Actually this css snippet can be found in the context of this issue, so we probably can't remove it easily, but if we verify that the issue is working correctly, I think it's okay to remove it. I think the problem is probably related to this issue, which is about maxHeight of the modal. cc @rusackas

Thanks for reviewing.
I think other modals may facing the same issue(when actual height is more than max height).

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.

Approving since this works for the modal in question. As per @stephenLYZ 's point, this might indeed be an issue on other modals. I'm on the fence between just reverting mine to minimize my PR to minimize fallout, or taking this PR and attempting to do a quick audit and fix-forward the others that might be affected.

@rusackas rusackas requested a review from AAfghahi June 3, 2022 05:21
Copy link
Member

@stephenLYZ stephenLYZ left a comment

Choose a reason for hiding this comment

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

LGTM! Thanks for the work!

@rusackas
Copy link
Member

rusackas commented Jun 3, 2022

FWIW, when I run this locally, I'm not seeing the issue that @AAfghahi was tackling in his earlier PR, but I'm spinning up an ephemeral environment, and pinging him for a review, just in case :)

image

image

@rusackas
Copy link
Member

rusackas commented Jun 3, 2022

/testenv up

@github-actions
Copy link
Contributor

github-actions bot commented Jun 3, 2022

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

@rusackas
Copy link
Member

rusackas commented Jun 3, 2022

Looked at the other two modals that allow overflow, and they don't seem so problematic. I think this fix is the better way forward than the revert, but I'll let it simmer for a moment for discussion.

@codecov
Copy link

codecov bot commented Jun 3, 2022

Codecov Report

Merging #20237 (948b641) into master (e5f2631) will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master   #20237   +/-   ##
=======================================
  Coverage   66.50%   66.50%           
=======================================
  Files        1726     1726           
  Lines       64790    64790           
  Branches     6829     6829           
=======================================
  Hits        43087    43087           
  Misses      19967    19967           
  Partials     1736     1736           
Flag Coverage Δ
javascript 51.33% <ø> (ø)

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

Impacted Files Coverage Δ
...tend/src/components/Datasource/DatasourceModal.tsx 69.04% <ø> (ø)

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 e5f2631...948b641. Read the comment docs.

@rusackas rusackas merged commit 5c02ab7 into apache:master Jun 3, 2022
@github-actions
Copy link
Contributor

github-actions bot commented Jun 3, 2022

Ephemeral environment shutdown and build artifacts deleted.

@rusackas
Copy link
Member

rusackas commented Jun 3, 2022

Thanks for fixing this. The Save Chart modal has overflow visible, but looks OK since it's short. Same with the Dashboard's Refresh Interval Modal. We can do this same fix on either, but it makes matters worse on the Refresh Interval modal. If you do this fix on the Save Chart modal, it works fine, but looks a bit goofy as the bottom Select menu goes upward to cover the Input above it. I'll leave them both alone, but I'm open to ideas/consideration.

@Renderz Renderz deleted the pr-datasource-modal-style branch June 3, 2022 14:13
@mistercrunch mistercrunch added 🏷️ 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
Labels
🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels size/XS 🚢 2.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants