Merge pull request #7981 from marmelab/fix-admin-children-function-type

[TypeScript] Fix `<Admin>` used with function child and fragment does not compile

packages/ra-core/src/core/CoreAdmin.spec.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { CoreAdmin } from './CoreAdmin';
+import { Resource } from './Resource';
+
+describe('CoreAdmin', () => {
+    describe('children', () => {
+        it('should accept Resources as children', async () => {
+            const Foo = () => <div>Foo</div>;
+            const App = () => (
+                <CoreAdmin>
+                    <Resource name="posts" list={Foo} />
+                    <Resource name="comments" list={Foo} />
+                </CoreAdmin>
+            );
+            render(<App />);
+            await screen.findByText('Foo');
+        });
+        it('should accept a function returning an array of Resources as children', async () => {
+            const Foo = () => <div>Foo</div>;
+            const App = () => (
+                <CoreAdmin>
+                    {() => [
+                        <Resource name="posts" key="posts" list={Foo} />,
+                        <Resource name="comments" key="comments" list={Foo} />,
+                    ]}
+                </CoreAdmin>
+            );
+            render(<App />);
+            await screen.findByText('Foo');
+        });
+        it('should accept a function returning a fragment of Resources as children', async () => {
+            const Foo = () => <div>Foo</div>;
+            const App = () => (
+                <CoreAdmin>
+                    {() => (
+                        <>
+                            <Resource name="posts" list={Foo} />
+                            <Resource name="comments" list={Foo} />
+                        </>
+                    )}
+                </CoreAdmin>
+            );
+            render(<App />);
+            await screen.findByText('Foo');
+        });
+        it('should accept a function returning a promise for an array of Resources as children', async () => {
+            const Foo = () => <div>Foo</div>;
+            const App = () => (
+                <CoreAdmin>
+                    {() =>
+                        Promise.resolve([
+                            <Resource name="posts" key="posts" list={Foo} />,
+                            <Resource
+                                name="comments"
+                                key="comments"
+                                list={Foo}
+                            />,
+                        ])
+                    }
+                </CoreAdmin>
+            );
+            render(<App />);
+            await screen.findByText('Foo');
+        });
+        it('should accept a function returning a promise for a fragment of Resources as children', async () => {
+            const Foo = () => <div>Foo</div>;
+            const App = () => (
+                <CoreAdmin>
+                    {() =>
+                        Promise.resolve(
+                            <>
+                                <Resource name="posts" list={Foo} />
+                                <Resource name="comments" list={Foo} />
+                            </>
+                        )
+                    }
+                </CoreAdmin>
+            );
+            render(<App />);
+            await screen.findByText('Foo');
+        });
+    });
+});

packages/ra-core/src/types.ts

@@ -278,7 +278,11 @@ export type Dispatch<T> = T extends (...args: infer A) => any
 export type ResourceElement = ReactElement<ResourceProps>;
 export type RenderResourcesFunction = (
     permissions: any
-) => ResourceElement[] | Promise<ResourceElement[]>;
+) =>
+    | ReactNode // (permissions) => <><Resource /><Resource /><Resource /></>
+    | Promise<ReactNode> // (permissions) => fetch().then(() => <><Resource /><Resource /><Resource /></>)
+    | ResourceElement[] // // (permissions) => [<Resource />, <Resource />, <Resource />]
+    | Promise<ResourceElement[]>; // (permissions) => fetch().then(() => [<Resource />, <Resource />, <Resource />])
 export type AdminChildren = RenderResourcesFunction | ReactNode;
 
 export type TitleComponent = string | ReactElement<any>;