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.

Sign up for GitHub

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 offline user experience #10555

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
+142 −1
Open

Fix offline user experience #10555

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
40421db
add Offline story
slax57 Feb 27, 2025
828c777
[no ci] add notification
slax57 Feb 27, 2025
d70e16b
Merge remote-tracking branch 'origin/master' into fix-offline-ux
slax57 Feb 28, 2025
0840e6f
i18n
slax57 Feb 28, 2025
0980fa0
add tests
slax57 Feb 28, 2025
4fa2335
fix leaking test
slax57 Feb 28, 2025
ab6ce4c
[no ci] change warning msg
slax57 Feb 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 36 additions & 1 deletion packages/ra-core/src/controller/list/useListController.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,11 @@ import {
CanAccess,
DisableAuthentication,
} from './useListController.security.stories';
import { Basic, defaultDataProvider } from './useListController.stories';
import {
Basic,
defaultDataProvider,
Offline,
} from './useListController.stories';

describe('useListController', () => {
const defaultProps = {
Expand Down Expand Up @@ -648,4 +652,35 @@ describe('useListController', () => {
});
});
});

describe('offline', () => {
it('should display a warning if showing placeholder data when offline', async () => {
render(<Offline />);
fireEvent.click(await screen.findByText('Go online'));
await screen.findByText('1 - Morbi suscipit malesuada');
fireEvent.click(await screen.findByText('Go offline'));
fireEvent.click(await screen.findByText('Page 2'));
await screen.findByText(
'ra.message.placeholder_data_warning - warning'
);
});

it('should not display a warning if showing stale data when offline', async () => {
render(<Offline />);
fireEvent.click(await screen.findByText('Go online'));
await screen.findByText('1 - Morbi suscipit malesuada');
fireEvent.click(await screen.findByText('Page 2'));
await screen.findByText('4 - Integer commodo est');
fireEvent.click(await screen.findByText('Page 1'));
await screen.findByText('1 - Morbi suscipit malesuada');
fireEvent.click(await screen.findByText('Go offline'));
fireEvent.click(await screen.findByText('Page 2'));
await screen.findByText('4 - Integer commodo est');
expect(
screen.queryByText(
'ra.message.placeholder_data_warning - warning'
)
).toBeNull();
});
});
});
89 changes: 89 additions & 0 deletions packages/ra-core/src/controller/list/useListController.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
import * as React from 'react';
import fakeDataProvider from 'ra-data-fakerest';
import { onlineManager } from '@tanstack/react-query';

import { CoreAdminContext } from '../../core';
import { ListController } from './ListController';
import type { DataProvider } from '../../types';
import type { ListControllerResult } from './useListController';
import { useNotificationContext } from '../../notification';

export default {
title: 'ra-core/controller/list/useListController',
Expand Down Expand Up @@ -97,3 +99,90 @@ export const Basic = ({
<ListController resource="posts">{children}</ListController>
</CoreAdminContext>
);

const OnlineManager = () => {
const [online, setOnline] = React.useState(onlineManager.isOnline());
React.useEffect(() => {
const unsubscribe = onlineManager.subscribe(isOnline => {
Copy link
Contributor

Choose a reason for hiding this comment

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

cool! didn't know we could manage the connection status programaticaly with react-query

setOnline(isOnline);
});
return unsubscribe;
}, []);
return (
<div>
<button
onClick={() => {
onlineManager.setOnline(true);
}}
>
Go online
</button>
<button
onClick={() => {
onlineManager.setOnline(false);
}}
>
Go offline
</button>
<p>{online ? 'Online' : 'Offline'}</p>
</div>
);
};

const Notifications = () => {
const { notifications, takeNotification } = useNotificationContext();
return (
<div>
<p>NOTIFICATIONS</p>
<ul>
{notifications.map(({ message, type }, id) => (
<li key={id}>
{message} - {type}
</li>
))}
</ul>
<button onClick={takeNotification}>Take notification</button>
</div>
);
};

export const Offline = () => (
<CoreAdminContext dataProvider={defaultDataProvider}>
<OnlineManager />
<ListController resource="posts" perPage={3}>
{params => (
<div>
<div
style={{
display: 'flex',
alignItems: 'center',
gap: '10px',
}}
>
<button onClick={() => params.setPage(1)}>
Page 1
</button>
<button onClick={() => params.setPage(2)}>
Page 2
</button>
<button onClick={() => params.setPage(3)}>
Page 3
</button>
</div>
<ul
style={{
listStyleType: 'none',
}}
>
{params.data?.map(record => (
<li key={record.id}>
{record.id} - {record.title}
</li>
))}
</ul>
</div>
)}
</ListController>
<Notifications />
</CoreAdminContext>
);
12 changes: 12 additions & 0 deletions packages/ra-core/src/controller/list/useListController.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,8 @@ export const useListController = <
isFetching,
isPending,
refetch,
isPaused,
isPlaceholderData,
} = useGetList<RecordType, ErrorType>(
resource,
{
Expand Down Expand Up @@ -147,6 +149,16 @@ export const useListController = <
...otherQueryOptions,
}
);
useEffect(() => {
if (isPaused && isPlaceholderData) {
notify('ra.message.placeholder_data_warning', {
type: 'warning',
messageArgs: {
_: 'Could not fetch: lost connection to server',
},
});
}
}, [isPaused, isPlaceholderData, notify]);

// change page if there is no data
useEffect(() => {
Expand Down
1 change: 1 addition & 0 deletions packages/ra-core/src/i18n/TranslationMessages.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ export interface TranslationMessages extends StringMap {
select_all_limit_reached: string;
unsaved_changes: string;
yes: string;
placeholder_data_warning: string;
};
navigation: {
[key: string]: StringMap | string;
Expand Down
2 changes: 2 additions & 0 deletions packages/ra-language-english/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,8 @@ const englishMessages: TranslationMessages = {
unsaved_changes:
"Some of your changes weren't saved. Are you sure you want to ignore them?",
yes: 'Yes',
placeholder_data_warning:
'Could not fetch: lost connection to server',
},
navigation: {
clear_filters: 'Clear filters',
Expand Down
2 changes: 2 additions & 0 deletions packages/ra-language-french/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,8 @@ const frenchMessages: TranslationMessages = {
unsaved_changes:
"Certains changements n'ont pas été enregistrés. Êtes-vous sûr(e) de vouloir quitter cette page ?",
yes: 'Oui',
placeholder_data_warning:
'Récupération impossible: connexion au serveur perdue',
},
navigation: {
clear_filters: 'Effacer les filtres',
Expand Down