Fix ResourceMenuItem should not render in case of access control error

Author: djhi

packages/ra-ui-materialui/src/layout/ResourceMenuItem.spec.tsx

@@ -19,6 +19,25 @@ describe('ResourceMenuItem', () => {
         await screen.findByText('resources.posts.name');
         expect(screen.queryByText('resources.users.name')).toBeNull();
     });
+    it('should not render when authProvider.canAccess throws', async () => {
+        render(
+            <AccessControl
+                authProvider={
+                    {
+                        checkAuth: () => Promise.resolve(),
+                        canAccess: ({ resource }) =>
+                            resource === 'posts'
+                                ? Promise.resolve(true)
+                                : Promise.reject(
+                                      new Error('access control error')
+                                  ),
+                    } as any
+                }
+            />
+        );
+        await screen.findByText('resources.posts.name');
+        expect(screen.queryByText('resources.users.name')).toBeNull();
+    });
     it('should not render when authProvider.canAccess returns false with a Function as <Admin> child', async () => {
         render(<AccessControlInsideAdminChildFunction />);
         await screen.findByText('resources.posts.name');

packages/ra-ui-materialui/src/layout/ResourceMenuItem.stories.tsx

@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { Resource, testDataProvider, TestMemoryRouter } from 'ra-core';
+import {
+    AuthProvider,
+    Resource,
+    testDataProvider,
+    TestMemoryRouter,
+} from 'ra-core';
 import { Menu } from './Menu';
 import { Layout, LayoutProps } from './Layout';
 import { AdminContext } from '../AdminContext';
@@ -100,12 +105,13 @@ export const AccessControlInsideAdminChildFunction = () => (
     </TestMemoryRouter>
 );
 
-export const AccessControl = () => (
+export const AccessControl = ({
+    authProvider = authProviderForAccessControl,
+}: {
+    authProvider?: AuthProvider;
+}) => (
     <TestMemoryRouter>
-        <AdminContext
-            dataProvider={dataProvider}
-            authProvider={authProviderForAccessControl}
-        >
+        <AdminContext dataProvider={dataProvider} authProvider={authProvider}>
             <AdminUI layout={CustomLayout}>
                 <Resource name="users" list={<p>The users page</p>} />
                 <Resource

packages/ra-ui-materialui/src/layout/ResourceMenuItem.tsx

@@ -13,13 +13,19 @@ import { MenuItemLink } from './MenuItemLink';
 
 export const ResourceMenuItem = ({ name }: { name: string }) => {
     const resources = useResourceDefinitions();
-    const { canAccess, isPending } = useCanAccess({
+    const { canAccess, error, isPending } = useCanAccess({
         action: 'list',
         resource: name,
     });
     const getResourceLabel = useGetResourceLabel();
     const createPath = useCreatePath();
-    if (!resources || !resources[name] || isPending || canAccess === false)
+    if (
+        !resources ||
+        !resources[name] ||
+        isPending ||
+        canAccess === false ||
+        error != null
+    )
         return null;
     return (
         <MenuItemLink