Fix "in progress" and "error" states of UpdateStatus component
#2794
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
This bug was likely introduced when upgrading to React Router 6. The `UpdateStatus` component needed access to the router's state in order to block navigation (and show a confirmation dialog to the user) when there are unsaved changes. With the upgrade to React Router 6, this required wrapping class components in a custom `withRouter` HOC. The `UpdateStatus` component exposes the different states (`SUCCESS`, `ERROR`, `IN_PROGRESS`) as static class fields (e.g. `UpdateStatus.IN_PROGRESS`). When wrapping the component in `withRouter`, those static class fields aren't forwarded, i.e. `UpdateStatus.IN_PROGRESS` is undefined. However, at the moment, blocking navigation isn't possible anyway (at least temporarily), as React Router v6 has removed support for relevant features required to implement this (although it will hopefully return soon [1]). So for now, I have simply removed `withRouter` altogether. Once blocking navigation is possible again, we should refactor this component to a function component and use the hooks provided by React Router. [1] remix-run/react-router#8139
tillprochaska
force-pushed
the
till/2793-fix-entityset-status-indicator
branch
from
9ff583b
to
1aeac51
Compare
Doing this as preparation to also display the browser online status.
tillprochaska
force-pushed
the
till/2793-fix-entityset-status-indicator
branch
from
c62997d
to
342c526
Compare
Rosencrantz
approved these changes
Jan 9, 2023
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.
This fixes the status indicators in network diagrams and timelines. See below for videos showing the behavior.
I think ideally, we should also implement further measures to prevent users from losing unsaved work:
Enable a read-only mode when the users browser is offline and show a more prominent, potentially blocking message. This may be slightly more complex to implement, and I’d suggest we look into this separately from this PR.
When a user tries to close the page or to navigate away while there are still unsaved changes, display a warning and ask the user to confirm. We had this behavior before, but it’s currently not possible to implement it, because React Router v6 has removed a relevant feature in v6. There is an active draft PR React Router by the projects maintainer, so it will probably be added back soon. I’d suggest we wait for that rather than working/hacking around it.
Closes #2793.
Error while saving changes:
default.mov
Saving changes on a slow internet connection:
Screen.Recording.2023-01-03.at.21.02.24.mov
Browser is offline:
Screen.Recording.2023-01-04.at.16.31.35.mov