fix(cosmetic): Fix Datasource Modal Out Of Box

[Renderz]

SUMMARY

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

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before

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]

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]

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).

[rusackas]

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.

[stephenLYZ]

LGTM! Thanks for the work!

[rusackas]

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 :)

[rusackas]

/testenv up

[github-actions]

@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]

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]

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.

[github-actions]

Ephemeral environment shutdown and build artifacts deleted.

[rusackas]

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.