Rename appLayout prop to layout in <Admin> component

docs/Admin.md

@@ -34,7 +34,7 @@ Here are all the props accepted by the component:
     - [`catchAll`](#catchall)
     - [`menu`](#menu)
     - [`theme`](#theme)
-    - [`appLayout`](#applayout)
+    - [`layout`](#layout)
     - [`customReducers`](#customreducers)
     - [`customSagas`](#customsagas)
     - [`customRoutes`](#customroutes)
@@ -153,7 +153,7 @@ const App = () => (
 
 ## `menu`
 
-**Tip**: This prop is deprecated. To override the menu component, use a [custom layout](#applayout) instead.
+**Tip**: This prop is deprecated. To override the menu component, use a [custom layout](#layout) instead.
 
 React-admin uses the list of `<Resource>` components passed as children of `<Admin>` to build a menu to each resource with a `list` component.
 
@@ -243,7 +243,7 @@ const App = () => (
 
 For more details on predefined themes and custom themes, refer to the [Material UI Customization documentation](https://material-ui.com/customization/themes/).
 
-## `appLayout`
+## `layout`
 
 If you want to deeply customize the app header, the menu, or the notifications, the best way is to provide a custom layout component. It must contain a `{children}` placeholder, where react-admin will render the resources. If you use material UI fields and inputs, it should contain a `<ThemeProvider>` element. And finally, if you want to show the spinner in the app header when the app fetches data in the background, the Layout should connect to the redux store.
 
@@ -254,7 +254,7 @@ Use the [default layout](https://github.com/marmelab/react-admin/blob/master/pac
 import MyLayout from './MyLayout';
 
 const App = () => (
-    <Admin appLayout={MyLayout} dataProvider={simpleRestProvider('http://path.to.my.api')}>
+    <Admin layout={MyLayout} dataProvider={simpleRestProvider('http://path.to.my.api')}>
         // ...
     </Admin>
 );

docs/Theming.md

@@ -352,14 +352,14 @@ const App = () => (
 
 ## Using a Custom Layout
 
-Instead of the default layout, you can use your own component as the admin layout. Just use the `appLayout` prop of the `<Admin>` component:
+Instead of the default layout, you can use your own component as the admin layout. Just use the `layout` prop of the `<Admin>` component:
 
 ```jsx
 // in src/App.js
 import MyLayout from './MyLayout';
 
 const App = () => (
-    <Admin appLayout={MyLayout} dataProvider={simpleRestProvider('http://path.to.my.api')}>
+    <Admin layout={MyLayout} dataProvider={simpleRestProvider('http://path.to.my.api')}>
         // ...
     </Admin>
 );
@@ -606,14 +606,14 @@ const MyLayout = (props) => <Layout {...props} appBar={MyAppBar} />;
 export default MyLayout;
 ```
 
-Then, use this layout in the `<Admin>` with the `appLayout` prop:
+Then, use this layout in the `<Admin>` with the `layout` prop:
 
 ```jsx
 // in src/App.js
 import MyLayout from './MyLayout';
 
 const App = () => (
-    <Admin appLayout={MyLayout} dataProvider={simpleRestProvider('http://path.to.my.api')}>
+    <Admin layout={MyLayout} dataProvider={simpleRestProvider('http://path.to.my.api')}>
         // ...
     </Admin>
 );
@@ -710,14 +710,14 @@ const MyLayout = (props) => <Layout {...props} menu={MyMenu} />;
 export default MyLayout;
 ```
 
-Then, use this layout in the `<Admin>` `appLayout` prop:
+Then, use this layout in the `<Admin>` `layout` prop:
 
 ```jsx
 // in src/App.js
 import MyLayout from './MyLayout';
 
 const App = () => (
-    <Admin appLayout={MyLayout} dataProvider={simpleRestProvider('http://path.to.my.api')}>
+    <Admin layout={MyLayout} dataProvider={simpleRestProvider('http://path.to.my.api')}>
         // ...
     </Admin>
 );
@@ -808,14 +808,14 @@ const MyLayout = (props) => <Layout {...props} notification={MyNotification} />;
 export default MyLayout;
 ```
 
-Then, use this layout in the `<Admin>` `applayout` prop:
+Then, use this layout in the `<Admin>` `layout` prop:
 
 ```jsx
 // in src/App.js
 import MyLayout from './MyLayout';
 
 const App = () => (
-    <Admin appLayout={MyLayout} dataProvider={simpleRestProvider('http://path.to.my.api')}>
+    <Admin layout={MyLayout} dataProvider={simpleRestProvider('http://path.to.my.api')}>
         // ...
     </Admin>
 );
@@ -875,14 +875,14 @@ const MyLayout = (props) => <Layout {...props} error={MyError} />;
 export default MyLayout;
 ```
 
-Then, use this layout in the `<Admin>` `applayout` prop:
+Then, use this layout in the `<Admin>` `layout` prop:
 
 ```jsx
 // in src/App.js
 import MyLayout from './MyLayout';
 
 const App = () => (
-    <Admin appLayout={MyLayout} dataProvider={simpleRestProvider('http://path.to.my.api')}>
+    <Admin layout={MyLayout} dataProvider={simpleRestProvider('http://path.to.my.api')}>
         // ...
     </Admin>
 );

docs/_layouts/default.html

@@ -152,8 +152,8 @@
                         </a>
                         <ul class="articles" {% if page.path !='Admin.md' %}style="display:none" {% endif %}>
                             <li class="chapter">
-                                <a href="#applayout">
-                                    <code>appLayout</code>
+                                <a href="#layout">
+                                    <code>layout</code>
                                 </a>
                             </li>
                             <li class="chapter">

packages/ra-core/src/CoreAdmin.tsx

@@ -29,7 +29,8 @@ export type ChildrenFunction = () => ComponentType[];
 const DefaultLayout: SFC<LayoutProps> = ({ children }) => <>{children}</>;
 
 export interface AdminProps {
-    appLayout: LayoutComponent;
+    layout: LayoutComponent;
+    appLayout?: LayoutComponent;
     authProvider?: AuthProvider;
     children?: AdminChildren;
     catchAll: CatchAllComponent;
@@ -61,7 +62,8 @@ class CoreAdminBase extends Component<AdminProps> {
 
     static defaultProps: Partial<AdminProps> = {
         catchAll: () => null,
-        appLayout: DefaultLayout,
+        layout: DefaultLayout,
+        appLayout: undefined,
         loading: () => null,
         loginPage: false,
     };
@@ -90,6 +92,7 @@ React-admin requires a valid dataProvider function to work.`);
 
     renderCore() {
         const {
+            layout,
             appLayout,
             authProvider,
             children,
@@ -106,6 +109,11 @@ React-admin requires a valid dataProvider function to work.`);
 
         const logout = authProvider ? createElement(logoutButton) : null;
 
+        if (appLayout) {
+            console.warn(
+                'You are using deprecated prop "appLayout", it was replaced by "layout", see https://github.com/marmelab/react-admin/issues/2918'
+            );
+        }
         if (loginPage === true && process.env.NODE_ENV !== 'production') {
             console.warn(
                 'You passed true to the loginPage prop. You must either pass false to disable it or a component class to customize it'
@@ -133,7 +141,7 @@ React-admin requires a valid dataProvider function to work.`);
                             path="/"
                             render={props => (
                                 <CoreAdminRouter
-                                    appLayout={appLayout}
+                                    layout={appLayout || layout}
                                     catchAll={catchAll}
                                     customRoutes={customRoutes}
                                     dashboard={dashboard}

packages/ra-core/src/CoreAdminRouter.tsx

@@ -37,7 +37,7 @@ const welcomeStyles: CSSProperties = {
 };
 
 export interface AdminRouterProps extends LayoutProps {
-    appLayout: LayoutComponent;
+    layout: LayoutComponent;
     catchAll: CatchAllComponent;
     children?: AdminChildren;
     customRoutes?: CustomRoutes;
@@ -139,7 +139,7 @@ export class CoreAdminRouter extends Component<
 
     render() {
         const {
-            appLayout,
+            layout,
             catchAll,
             children,
             customRoutes,
@@ -208,7 +208,7 @@ export class CoreAdminRouter extends Component<
                         path="/"
                         render={() =>
                             createElement(
-                                appLayout,
+                              layout,
                                 {
                                     dashboard,
                                     logout,

packages/react-admin/src/Admin.ts

@@ -10,7 +10,7 @@ import {
 const Admin = CoreAdmin;
 
 Admin.defaultProps = {
-    appLayout: DefaultLayout,
+    layout: DefaultLayout,
     catchAll: NotFound,
     loading: Loading,
     loginPage: Login,