Merge pull request #11165 from marmelab/guesser-i18n-translations

Add guesser empty i18n messages

Author: slax57

packages/ra-core/src/i18n/TranslationMessages.ts

@@ -194,6 +194,12 @@ export interface TranslationMessages extends StringMap {
             remove_message: string;
             help: string;
         };
+        guesser?: {
+            empty: {
+                title: string;
+                message: string;
+            };
+        };
         configurable?: {
             customize: string;
             configureMode: string;

packages/ra-language-english/src/index.ts

@@ -199,6 +199,12 @@ const englishMessages: TranslationMessages = {
                 'Are you sure you want to remove that item from your list of saved queries?',
             help: 'Filter the list and save this query for later',
         },
+        guesser: {
+            empty: {
+                title: 'No data to display',
+                message: 'Please check your data provider',
+            },
+        },
         configurable: {
             customize: 'Customize',
             configureMode: 'Configure this page',

packages/ra-language-french/src/index.ts

@@ -207,6 +207,12 @@ const frenchMessages: TranslationMessages = {
                 'Etes-vous sûr(e) de vouloir supprimer cette requête de votre liste de requêtes ?',
             help: 'Filtrez la liste et ajoutez cette requête à votre liste',
         },
+        guesser: {
+            empty: {
+                title: 'Aucune donnée à afficher',
+                message: 'Veuillez vérifier votre dataProvider',
+            },
+        },
         configurable: {
             customize: 'Personnaliser',
             configureMode: 'Configurer cette page',

packages/ra-ui-materialui/src/list/ListGuesser.spec.tsx

@@ -1,9 +1,18 @@
 import * as React from 'react';
 import expect from 'expect';
 import { fireEvent, render, screen } from '@testing-library/react';
-import { ManyResources } from './ListGuesser.stories';
+import { Empty, ManyResources } from './ListGuesser.stories';
 
 describe('<ListGuesser />', () => {
+    it('should render an empty state dedicated to guessers', async () => {
+        render(<Empty />);
+
+        await screen.findByText('No data to display');
+        expect(
+            screen.getByText('Please check your data provider')
+        ).toBeTruthy();
+    });
+
     it('should log the guessed List views based on the fetched records', async () => {
         const logSpy = jest.spyOn(console, 'log').mockImplementation(() => {});
         render(<ManyResources />);

packages/ra-ui-materialui/src/list/ListGuesser.stories.tsx

@@ -194,6 +194,10 @@ const delayedDataProvider = fakeRestProvider(
     process.env.NODE_ENV !== 'test',
     300
 );
+const emptyDataProvider = fakeRestProvider(
+    { products: [] },
+    process.env.NODE_ENV !== 'test'
+);
 
 const ListGuesserWithProdLogs = () => <ListGuesser enableLog />;
 
@@ -221,3 +225,18 @@ export const ManyResources = () => (
         </AdminUI>
     </AdminContext>
 );
+
+export const Empty = () => (
+    <AdminContext
+        dataProvider={emptyDataProvider}
+        i18nProvider={polyglotI18nProvider(() => defaultMessages, 'en')}
+    >
+        <AdminUI>
+            <Resource
+                name="products"
+                list={ListGuesser}
+                recordRepresentation="name"
+            />
+        </AdminUI>
+    </AdminContext>
+);

packages/ra-ui-materialui/src/list/ListGuesser.tsx

@@ -1,5 +1,8 @@
 import * as React from 'react';
 import { useState, useEffect } from 'react';
+import { styled, useThemeProps } from '@mui/material/styles';
+import { Box, Typography } from '@mui/material';
+import Inbox from '@mui/icons-material/Inbox';
 
 import {
     ListBase,
@@ -10,6 +13,7 @@ import {
     RaRecord,
     usePrevious,
     useLocation,
+    useTranslate,
 } from 'ra-core';
 
 import { ListProps } from './List';
@@ -44,6 +48,7 @@ export const ListGuesser = <RecordType extends RaRecord = any>(
         debounce,
         disableAuthentication,
         disableSyncWithLocation,
+        empty,
         exporter,
         filter,
         filterDefaultValues,
@@ -66,6 +71,7 @@ export const ListGuesser = <RecordType extends RaRecord = any>(
             debounce={debounce}
             disableAuthentication={disableAuthentication}
             disableSyncWithLocation={disableSyncWithLocation}
+            empty={empty === undefined ? <GuesserEmpty /> : empty}
             exporter={exporter}
             filter={filter}
             filterDefaultValues={filterDefaultValues}
@@ -150,3 +156,57 @@ ${inferredChild.getRepresentation()}
 
     return <ListView {...rest}>{child}</ListView>;
 };
+
+const GuesserEmpty = (inProps: GuesserEmptyProps) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: GUESSER_EMPTY_PREFIX,
+    });
+    const { className } = props;
+    const translate = useTranslate();
+
+    return (
+        <GuesserEmptyRoot className={className}>
+            <Box className={GuesserEmptyClasses.message}>
+                <Inbox className={GuesserEmptyClasses.icon} />
+                <Typography variant="h4" paragraph>
+                    {translate('ra.guesser.empty.title', {
+                        _: 'No data to display',
+                    })}
+                </Typography>
+                <Typography variant="body1">
+                    {translate('ra.guesser.empty.message', {
+                        _: 'Please check your data provider',
+                    })}
+                </Typography>
+            </Box>
+        </GuesserEmptyRoot>
+    );
+};
+
+interface GuesserEmptyProps {
+    className?: string;
+}
+
+const GUESSER_EMPTY_PREFIX = 'RaGuesserEmpty';
+
+const GuesserEmptyClasses = {
+    message: `${GUESSER_EMPTY_PREFIX}-message`,
+    icon: `${GUESSER_EMPTY_PREFIX}-icon`,
+};
+
+const GuesserEmptyRoot = styled('span', {
+    name: GUESSER_EMPTY_PREFIX,
+    overridesResolver: (props, styles) => styles.root,
+})(({ theme }) => ({
+    flex: 1,
+    [`& .${GuesserEmptyClasses.message}`]: {
+        textAlign: 'center',
+        margin: '0 1em',
+        color: (theme.vars || theme).palette.text.disabled,
+    },
+    [`& .${GuesserEmptyClasses.icon}`]: {
+        width: '9em',
+        height: '9em',
+    },
+}));