Add support for offline/local first applications #10545
Conversation
| EditPostPage.setInputValue( | ||
| 'input', | ||
| 'title', | ||
| 'Lorem Ipsum again{enter}' |
There was a problem hiding this comment.
Because react-query now persist queries and mutations for offline mode, the previous test now leaks into the second (e.g. this post has its title changed to Lorem Ipsum). I tried to configure testIsolation in Cypress but our version is probably too old
djhi
force-pushed
the
support-offline-mode
branch
from
d440e8e to
9d66e05
Compare
|
I can't see a way to test this except e2e. Not sure if we can simulate network loss with cypress though |
|
@djhi since the simple demo has the react-query DevTools enabled, you can use them to simulate network loss I believe (clicking on the 'Wifi' icon does the job). A bit ugly but it should work! |
packages/ra-core/src/controller/input/useReferenceInputController.ts
Outdated
Show resolved
Hide resolved
| actions?: ReactNode | false; | ||
| aside?: ReactNode; |
There was a problem hiding this comment.
No BC here ,ReactNode include ReactElement and false
|
When going offline, I don't understand why I can't go to the detail view of a post when I've already seen it in the list view. The |
|
The 'how to test' instructions must be updated, as the tester must select the optimistic mutation mode before submitting the form. |
|
When doing an optimistic offline mutation, the loader in the app bar keeps spinning forever even tough the optimistic update is already applied. Is it a good UI? Instead, I think we should have a way to mention the pending updates, e.g. using a badge on the loader icon. |
| </AppBar> | ||
| ); | ||
| const MyAppBar = () => { | ||
| const isOnline = useIsOnline(); |
There was a problem hiding this comment.
I'd name the hook useIsOffline instead, since you only ever check that it's false.
| ) | ||
| ``` | ||
| {% endraw %} | ||
|
|
There was a problem hiding this comment.
You're missing a sentence to explain that the setup is done here - the rest is only for developers with custom methods.
| @@ -95,6 +117,10 @@ const Root = styled('div', { | |||
| [`& .${EditClasses.noActions}`]: { | |||
| marginTop: '1em', | |||
| }, | |||
| [`& .${EditClasses.offline}`]: { | |||
There was a problem hiding this comment.
Code smell: The Offline component should work as is, without CSS customization.
| <div> | ||
| <Stack direction="row" alignItems="center" gap={1}> | ||
| <ErrorIcon role="presentation" color="error" fontSize="small" /> | ||
| <span style={visuallyHidden}> | ||
| {typeof error === 'string' ? error : error?.message} | ||
| </span> | ||
| </div> | ||
| <Typography | ||
| component="span" | ||
| variant="body2" | ||
| sx={{ color: 'error.main' }} | ||
| > | ||
| <Translate i18nKey="ra.notification.http_error"> | ||
| Server communication error | ||
| </Translate> | ||
| </Typography> | ||
| </Stack> |
There was a problem hiding this comment.
You've changed the content and design here. Can you elaborate on why you did that?
There was a problem hiding this comment.
We only had an icon for error before with no message for users not using assistive tools. We discussed this together
| } | ||
|
|
||
| if ( | ||
| !record || |
There was a problem hiding this comment.
this is already in the previous condition
| {...rest} | ||
| offline={ | ||
| offline ?? ( | ||
| <Labeled {...rest}> |
There was a problem hiding this comment.
It feels weird to repeat rest several times, plus some aren't compatible with Labeled. I wouldn't apply them here, and pass the source and label props explicitly instead.
| @@ -13,6 +13,7 @@ export * from './ListGuesser'; | |||
| export * from './ListNoResults'; | |||
| export * from './ListToolbar'; | |||
| export * from './ListView'; | |||
| export * from '../Offline'; | |||
There was a problem hiding this comment.
reexported from the wrong directory (the .. is weird here)
Co-authored-by: Francois Zaninotto <[email protected]>
Problem
React-admin currently don't handle well the loss of network connectivity: in any demo, if you go to a list page, then simulate being offline using the devtool and try to go to the second page of the same list, it will still display the first page data while the pagination will indeed indicate you are on page 2.
We handled it a bit better by at least showing users a notification when they try to load new data while offline but we can do better and allow for resumable mutations.
Solution
ListContextinclude theisPausedandisPlaceholderDataprops from react-query and update components/hooks accordinglyemptycomponent when those two props are true (ideally we should have a dedicated component for that or handle the case in the default empty but this is achievable in userland)mutationKeyto all mutations so that we can provide default functions for them at thequeryClientlevel (required by react-query: https://tanstack.com/query/latest/docs/framework/react/guides/mutations#persisting-offline-mutations)offlineprop to reference fields componentsofflineprop to list componentsofflineprop to show and edit viewsofflineprop to refenrenc inputs componentsScreenshots
Edit view
Show view
DataTable (same for all list child components
How To Test
Then:
optimisticoption in the form toolbar first.undoableoption in the form toolbar first.f00baras the post title to trigger an error once the network is online.In stories for list components, reference components and detail views, simply switch to
offlineand hit the storybook refresh buttonAdditional Checks
masterfor a bugfix, ornextfor a featureAlso, please make sure to read the contributing guidelines.