Refactor useFirstResourceWithListAccess

docs/useCanAccessResources.md

@@ -0,0 +1,47 @@
+---
+layout: default
+title: "useCanAccessResources"
+---
+
+# `useCanAccessResources`
+
+This hook calls the `authProvider.canAccess()` method on mount for an array of resources, an action, and optionally a record. It's ideal for checking the access to several resources in parallel (e.g. all the columns of a `<Datagrid>`). 
+
+`useCanAccessResources` returns an object containing a `canAccess` object, which is a map of the provided resources where the value is set to `true` when users have access to it. 
+
+## Usage
+
+`useCanAccessResources` takes an object `{ action, resource, record, sources }` as argument. The `source` parameter is an array of the record properties names for which to check the access permission. In addition to react-query result properties, it returns a `canAccess` object that has a property for each provided source determining whether the user has access to it.
+
+```jsx
+import { useCanAccessResources, SimpleList } from 'react-admin';
+
+const UserList = ({ record }) => {
+    const { isPending, canAccess } = useCanAccessResources({
+        action: 'delete',
+        resource: ['users.id', 'users.name', 'users.email'],
+        record,
+    });
+    if (isPending) {
+        return null;
+    }
+    return (
+        <SimpleList
+             primaryText={record => canAccess.name ? record.name : ''}
+             secondaryText={record => canAccess.email ? record.email : ''}
+             tertiaryText={record => canAccess.id ? record.id : ''}
+         />
+    );
+};
+```
+
+## Parameters
+
+`useCanAccessResources` expects a single parameter object with the following properties:
+
+| Name | Required | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `resources` | Required | `string[]` | - | An array of the resources for which to check access, e.g `['users.id', 'users.title']` |
+| `action` | Required | `string` | - | The action to check, e.g. 'read', 'list', 'export', 'delete', etc. |
+| `record` | Optional | `object` | - | The record to check. If passed, the child only renders if the user has permissions for that record, e.g. `{ id: 123, firstName: "John", lastName: "Doe" }` |
+

packages/ra-core/src/auth/useCanAccessResources.spec.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import expect from 'expect';
+import { render, screen } from '@testing-library/react';
+import { Basic } from './useCanAccessResources.stories';
+
+describe('useCanAccessResources', () => {
+    it('should call authProvider.canAccess for every resources', async () => {
+        const canAccess = jest.fn().mockImplementation(async () => true);
+        const authProvider = {
+            login: () => Promise.reject('bad method'),
+            logout: () => Promise.reject('bad method'),
+            checkAuth: () => Promise.reject('bad method'),
+            checkError: () => Promise.reject('bad method'),
+            getPermissions: () => Promise.reject('bad method'),
+            canAccess,
+        };
+        render(<Basic authProvider={authProvider} />);
+
+        screen.getByText('LOADING');
+
+        expect(canAccess).toBeCalledTimes(3);
+        expect(canAccess).toBeCalledWith({
+            action: 'read',
+            resource: 'posts.id',
+            signal: undefined,
+        });
+        expect(canAccess).toBeCalledWith({
+            action: 'read',
+            resource: 'posts.title',
+            signal: undefined,
+        });
+        expect(canAccess).toBeCalledWith({
+            action: 'read',
+            resource: 'posts.author',
+            signal: undefined,
+        });
+
+        await screen.findByText(
+            JSON.stringify({
+                'posts.id': true,
+                'posts.title': true,
+                'posts.author': true,
+            })
+        );
+
+        expect(screen.queryByText('LOADING')).toBeNull();
+    });
+
+    it('should grant access to each resource based on canAccess result', async () => {
+        const canAccess = jest
+            .fn()
+            .mockImplementation(
+                async ({ resource }) => resource !== 'posts.id'
+            );
+        const authProvider = {
+            login: () => Promise.reject('bad method'),
+            logout: () => Promise.reject('bad method'),
+            checkAuth: () => Promise.reject('bad method'),
+            checkError: () => Promise.reject('bad method'),
+            getPermissions: () => Promise.reject('bad method'),
+            canAccess,
+        };
+        render(<Basic authProvider={authProvider} />);
+
+        screen.getByText('LOADING');
+
+        await screen.findByText(
+            JSON.stringify({
+                'posts.id': false,
+                'posts.title': true,
+                'posts.author': true,
+            })
+        );
+        expect(screen.queryByText('LOADING')).toBeNull();
+    });
+
+    it('should grant access to all resources if no authProvider', async () => {
+        render(<Basic authProvider={null} />);
+        expect(screen.queryByText('LOADING')).toBeNull();
+
+        screen.getByText(
+            JSON.stringify({
+                'posts.id': true,
+                'posts.title': true,
+                'posts.author': true,
+            })
+        );
+    });
+
+    it('should grant access to all resources if no authProvider.canAccess', async () => {
+        const authProvider = {
+            login: () => Promise.reject('bad method'),
+            logout: () => Promise.reject('bad method'),
+            checkAuth: () => Promise.reject('bad method'),
+            checkError: () => Promise.reject('bad method'),
+            getPermissions: () => Promise.reject('bad method'),
+        };
+        render(<Basic authProvider={authProvider} />);
+        expect(screen.queryByText('LOADING')).toBeNull();
+
+        screen.getByText(
+            JSON.stringify({
+                'posts.id': true,
+                'posts.title': true,
+                'posts.author': true,
+            })
+        );
+    });
+});

packages/ra-core/src/auth/useCanAccessResources.stories.tsx

@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { AuthProvider } from '../types';
+import { CoreAdminContext } from '../core';
+import { QueryClient } from '@tanstack/react-query';
+import {
+    useCanAccessResources,
+    UseCanAccessResourcesResult,
+} from './useCanAccessResources';
+
+export default {
+    title: 'ra-core/auth/useCanAccessResources',
+};
+
+const UseCanAccessResources = ({
+    children,
+    action,
+    resources,
+}: {
+    children: any;
+    action: string;
+    resources: string[];
+}) => {
+    const { canAccess, isPending } = useCanAccessResources({
+        action,
+        resources,
+    });
+
+    return children({ canAccess, isPending });
+};
+
+const StateInspector = ({ state }: { state: UseCanAccessResourcesResult }) => {
+    return (
+        <div>
+            <span>{state.isPending && 'LOADING'}</span>
+            {state.canAccess !== undefined && (
+                <span>{JSON.stringify(state.canAccess)}</span>
+            )}
+            <span>{state.error && 'ERROR'}</span>
+        </div>
+    );
+};
+
+const defaultAuthProvider: AuthProvider = {
+    login: () => Promise.reject('bad method'),
+    logout: () => Promise.reject('bad method'),
+    checkAuth: () => Promise.reject('bad method'),
+    checkError: () => Promise.reject('bad method'),
+    getPermissions: () => Promise.reject('bad method'),
+    canAccess: ({ action }) =>
+        new Promise(resolve => setTimeout(resolve, 500, action === 'read')),
+};
+
+export const Basic = ({
+    authProvider = defaultAuthProvider,
+    queryClient,
+}: {
+    authProvider?: AuthProvider | null;
+    queryClient?: QueryClient;
+}) => (
+    <CoreAdminContext
+        authProvider={authProvider != null ? authProvider : undefined}
+        queryClient={queryClient}
+    >
+        <UseCanAccessResources
+            action="read"
+            resources={['posts.id', 'posts.title', 'posts.author']}
+        >
+            {result => <StateInspector state={result} />}
+        </UseCanAccessResources>
+    </CoreAdminContext>
+);
+
+export const NoAuthProvider = ({
+    queryClient,
+}: {
+    queryClient?: QueryClient;
+}) => (
+    <CoreAdminContext queryClient={queryClient}>
+        <UseCanAccessResources
+            action="read"
+            resources={['posts.id', 'posts.title', 'posts.author']}
+        >
+            {result => <StateInspector state={result} />}
+        </UseCanAccessResources>
+    </CoreAdminContext>
+);