fix: Loading overlay bugfix and cleanup #10105
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
rusackas
changed the title
etr2460
reviewed
Jun 19, 2020
etr2460
reviewed
Jun 19, 2020
villebro
approved these changes
Jun 20, 2020
Codecov Report
@@ Coverage Diff @@
## master #10105 +/- ##
==========================================
- Coverage 70.56% 70.46% -0.10%
==========================================
Files 590 590
Lines 31150 31209 +59
Branches 3164 3192 +28
==========================================
+ Hits 21981 21992 +11
- Misses 9060 9101 +41
- Partials 109 116 +7
Continue to review full report at Codecov.
|
|
@etr2460 This PR is like pulling a loose thread on a sweater... I simplified a few more things, by consolidating some global LESS into the component, and removing the className in favor of additional "position" options. I hope this all makes sense. It seems simpler to me, anyway. I think the only recognizable visual diff is that the "inline" style is 10px narrower, which looks better to my eye, in the one place it's used:
|
etr2460
approved these changes
Jun 24, 2020
|
Looks like this instance needs to be updated too: https://github.com/preset-io/incubator-superset/blob/master/superset-frontend/src/components/ListView/ListView.tsx#L120 |
rusackas
force-pushed
the
loading-overlay-bugfix-and-cleanup
branch
from
d9f598b to
22f0381
Compare
john-bodley
pushed a commit
to airbnb/superset-fork
that referenced
this pull request
Jun 24, 2020
* fix: reordering DOM output, simplifying styles, Emotionalizing * simplification * converting RefreshChartOverlay to TS * Loading -> TS, stripping unused size prop * simplification... * just letting "position" prop act as a class name. Simpler! * consolidating styles, changing a className prop to a position prop. * nixing (unused) classname prop * replacing inline loading img with the proper Loading component * BY THERE. * position prop is optional! (cherry picked from commit 36ea42f)
auxten
pushed a commit
to auxten/incubator-superset
that referenced
this pull request
Nov 20, 2020
* fix: reordering DOM output, simplifying styles, Emotionalizing * simplification * converting RefreshChartOverlay to TS * Loading -> TS, stripping unused size prop * simplification... * just letting "position" prop act as a class name. Simpler! * consolidating styles, changing a className prop to a position prop. * nixing (unused) classname prop * replacing inline loading img with the proper Loading component * BY THERE. * position prop is optional!
6 tasks
mistercrunch
added
🏷️ bot
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
SUMMARY
Initial report:
Issue uncovered:
The loader was indeed there, but buried (z-index-wise) below the controls.
The fix:
Could this be fixed with one line of CSS? Yep! But that's not the right way. This PR does the following:
Reverses the rendering order of the three key layers in
chart.jsxso the Loader is atop the Refresh overlay atop the Chart itself. Not sure why it would be the other way, but if anyone has some idea, let me know!Touches up a bunch of CSS to make the positioning of those re-stacked elements work
Moves the CSS out of LESS and into Emotion 👩🎤
Migrates
LoadingandRefreshChartOverlaycomponents to tsx.Removes the
sizeprop from Loading, which sure seems to be unusedRemoves some unused css for a "dismiss" button that no longer seems to exist.
BEFORE
AFTER
TEST PLAN
ADDITIONAL INFORMATION