Remove permissions prop injection from main views

examples/simple/src/users/UserCreate.tsx

@@ -9,6 +9,7 @@ import {
     TextInput,
     Toolbar,
     required,
+    usePermissions,
 } from 'react-admin';
 
 import Aside from './Aside';
@@ -38,32 +39,35 @@ const isValidName = async value =>
         )
     );
 
-const UserCreate = ({ permissions, ...props }) => (
-    <Create {...props} aside={<Aside />}>
-        <TabbedForm toolbar={<UserEditToolbar permissions={permissions} />}>
-            <FormTab label="user.form.summary" path="">
-                <TextInput
-                    source="name"
-                    defaultValue="Slim Shady"
-                    autoFocus
-                    validate={[required(), isValidName]}
-                />
-            </FormTab>
-            {permissions === 'admin' && (
-                <FormTab label="user.form.security" path="security">
-                    <AutocompleteInput
-                        source="role"
-                        choices={[
-                            { id: '', name: 'None' },
-                            { id: 'admin', name: 'Admin' },
-                            { id: 'user', name: 'User' },
-                            { id: 'user_simple', name: 'UserSimple' },
-                        ]}
+const UserCreate = () => {
+    const { permissions } = usePermissions();
+    return (
+        <Create aside={<Aside />}>
+            <TabbedForm toolbar={<UserEditToolbar permissions={permissions} />}>
+                <FormTab label="user.form.summary" path="">
+                    <TextInput
+                        source="name"
+                        defaultValue="Slim Shady"
+                        autoFocus
+                        validate={[required(), isValidName]}
                     />
                 </FormTab>
-            )}
-        </TabbedForm>
-    </Create>
-);
+                {permissions === 'admin' && (
+                    <FormTab label="user.form.security" path="security">
+                        <AutocompleteInput
+                            source="role"
+                            choices={[
+                                { id: '', name: 'None' },
+                                { id: 'admin', name: 'Admin' },
+                                { id: 'user', name: 'User' },
+                                { id: 'user_simple', name: 'UserSimple' },
+                            ]}
+                        />
+                    </FormTab>
+                )}
+            </TabbedForm>
+        </Create>
+    );
+};
 
 export default UserCreate;

package.json

@@ -50,7 +50,7 @@
         "eslint-plugin-jsx-a11y": "^6.3.1",
         "eslint-plugin-prettier": "^3.1.4",
         "eslint-plugin-react": "^7.20.6",
-        "eslint-plugin-react-hooks": "^4.1.0",
+        "eslint-plugin-react-hooks": "^4.3.0",
         "express": "~4.16.3",
         "full-icu": "~1.3.1",
         "husky": "^2.3.0",

packages/ra-core/src/auth/Authenticated.tsx

@@ -1,6 +1,6 @@
 import { cloneElement, ReactElement } from 'react';
 
-import useAuthenticated from './useAuthenticated';
+import { useAuthenticated } from './useAuthenticated';
 
 export interface AuthenticatedProps {
     children: ReactElement<any>;
@@ -43,7 +43,7 @@ const Authenticated = (props: AuthenticatedProps) => {
         location, // kept for backwards compatibility, unused
         ...rest
     } = props;
-    useAuthenticated(authParams);
+    useAuthenticated({ params: authParams });
     // render the child even though the useAuthenticated() call isn't finished (optimistic rendering)
     // the above hook will log out if the authProvider doesn't validate that the user is authenticated
     return cloneElement(children, rest);

packages/ra-core/src/auth/WithPermissions.tsx

@@ -2,7 +2,7 @@ import { Children, ReactElement, ComponentType, createElement } from 'react';
 import { Location } from 'history';
 
 import warning from '../util/warning';
-import useAuthenticated from './useAuthenticated';
+import { useAuthenticated } from './useAuthenticated';
 import usePermissionsOptimized from './usePermissionsOptimized';
 
 export interface WithPermissionsChildrenParams {

packages/ra-core/src/auth/index.ts

@@ -4,16 +4,17 @@ import useAuthProvider from './useAuthProvider';
 import useAuthState from './useAuthState';
 import usePermissions from './usePermissions';
 import usePermissionsOptimized from './usePermissionsOptimized';
-import useAuthenticated from './useAuthenticated';
 import WithPermissions, { WithPermissionsProps } from './WithPermissions';
 import useLogin from './useLogin';
 import useLogout from './useLogout';
-import useCheckAuth from './useCheckAuth';
 import useGetIdentity from './useGetIdentity';
 import useGetPermissions from './useGetPermissions';
 import useLogoutIfAccessDenied from './useLogoutIfAccessDenied';
 import convertLegacyAuthProvider from './convertLegacyAuthProvider';
+
 export * from './types';
+export * from './useAuthenticated';
+export * from './useCheckAuth';
 
 export {
     AuthContext,
@@ -22,15 +23,13 @@ export {
     // low-level hooks for calling a particular verb on the authProvider
     useLogin,
     useLogout,
-    useCheckAuth,
     useGetIdentity,
     useGetPermissions,
     // hooks with state management
     usePermissions,
     usePermissionsOptimized,
     useAuthState,
     // hook with immediate effect
-    useAuthenticated,
     useLogoutIfAccessDenied,
     // components
     Authenticated,

packages/ra-core/src/auth/useAuthState.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import useCheckAuth from './useCheckAuth';
+import { useCheckAuth } from './useCheckAuth';
 import { useSafeSetState } from '../util/hooks';
 
 interface State {

packages/ra-core/src/auth/useAuthenticated.tsx → packages/ra-core/src/auth/useAuthenticated.ts

@@ -1,7 +1,5 @@
 import { useEffect } from 'react';
-import useCheckAuth from './useCheckAuth';
-
-const emptyParams = {};
+import { useCheckAuth } from './useCheckAuth';
 
 /**
  * Restrict access to authenticated users.
@@ -28,9 +26,21 @@ const emptyParams = {};
  *         </Admin>
  *     );
  */
-export default (params: any = emptyParams) => {
+export const useAuthenticated = <ParamsType = any>(
+    options: UseAuthenticatedOptions<ParamsType> = {}
+) => {
+    const { enabled = true, params = emptyParams } = options;
     const checkAuth = useCheckAuth();
     useEffect(() => {
-        checkAuth(params).catch(() => {});
-    }, [checkAuth, params]);
+        if (enabled) {
+            checkAuth(params).catch(() => {});
+        }
+    }, [checkAuth, enabled, params]);
+};
+
+export type UseAuthenticatedOptions<ParamsType> = {
+    enabled?: boolean;
+    params?: ParamsType;
 };
+
+const emptyParams = {};

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

@@ -3,7 +3,7 @@ import { useState, useEffect } from 'react';
 import expect from 'expect';
 import { render, waitFor } from '@testing-library/react';
 
-import useCheckAuth from './useCheckAuth';
+import { useCheckAuth } from './useCheckAuth';
 import AuthContext from './AuthContext';
 import useLogout from './useLogout';
 import useNotify from '../sideEffect/useNotify';

packages/ra-core/src/auth/useCheckAuth.ts

@@ -40,7 +40,7 @@ import useNotify from '../sideEffect/useNotify';
  *     return authenticated ? <Bar /> : <BarNotAuthenticated />;
  * } // tip: use useAuthState() hook instead
  */
-const useCheckAuth = (): CheckAuth => {
+export const useCheckAuth = (): CheckAuth => {
     const authProvider = useAuthProvider();
     const notify = useNotify();
     const logout = useLogout();
@@ -104,5 +104,3 @@ const getErrorMessage = (error, defaultMessage) =>
         : typeof error === 'undefined' || !error.message
         ? defaultMessage
         : error.message;
-
-export default useCheckAuth;

packages/ra-core/src/controller/create/index.ts

@@ -1,18 +1,6 @@
-import {
-    CreateControllerResult,
-    useCreateController,
-} from './useCreateController';
-
 export * from './CreateBase';
 export * from './CreateContext';
 export * from './CreateContextProvider';
 export * from './CreateController';
-
 export * from './useCreateContext';
-export * from '../show/useShowContext';
-
-// We don't want to export CreateProps and EditProps as they should
-// not be used outside ra-core, since it would conflict with ra-ui-materialui types,
-// hence the named imports/exports
-export type { CreateControllerResult as CreateControllerProps };
-export { useCreateController };
+export * from './useCreateController';

packages/ra-core/src/controller/create/useCreateController.spec.tsx

@@ -1,60 +1,49 @@
 import React from 'react';
 import expect from 'expect';
 import { act } from '@testing-library/react';
+import { Location } from 'history';
 
-import { getRecord } from './useCreateController';
+import { getRecordFromLocation } from './useCreateController';
 import { CreateController } from './CreateController';
 import { renderWithRedux } from 'ra-test';
 import { DataProviderContext } from '../../dataProvider';
 import { DataProvider } from '../../types';
 
 describe('useCreateController', () => {
-    describe('getRecord', () => {
-        const location = {
+    describe('getRecordFromLocation', () => {
+        const location: Location = {
+            key: 'a_key',
             pathname: '/foo',
             search: undefined,
             state: undefined,
             hash: undefined,
         };
 
-        it('should return an empty record by default', () => {
-            expect(getRecord(location, undefined)).toEqual({});
-        });
-
         it('should return location state record when set', () => {
             expect(
-                getRecord(
-                    {
-                        ...location,
-                        state: { record: { foo: 'bar' } },
-                    },
-                    undefined
-                )
+                getRecordFromLocation({
+                    ...location,
+                    state: { record: { foo: 'bar' } },
+                })
             ).toEqual({ foo: 'bar' });
         });
 
         it('should return location search when set', () => {
             expect(
-                getRecord(
-                    {
-                        ...location,
-                        search: '?source={"foo":"baz","array":["1","2"]}',
-                    },
-                    undefined
-                )
+                getRecordFromLocation({
+                    ...location,
+                    search: '?source={"foo":"baz","array":["1","2"]}',
+                })
             ).toEqual({ foo: 'baz', array: ['1', '2'] });
         });
 
         it('should return location state record when both state and search are set', () => {
             expect(
-                getRecord(
-                    {
-                        ...location,
-                        state: { record: { foo: 'bar' } },
-                        search: '?foo=baz',
-                    },
-                    undefined
-                )
+                getRecordFromLocation({
+                    ...location,
+                    state: { record: { foo: 'bar' } },
+                    search: '?foo=baz',
+                })
             ).toEqual({ foo: 'bar' });
         });
     });

packages/ra-core/src/controller/create/useCreateController.ts

@@ -2,7 +2,9 @@ import { useCallback, MutableRefObject } from 'react';
 // @ts-ignore
 import { parse } from 'query-string';
 import { useLocation } from 'react-router-dom';
+import { Location } from 'history';
 
+import { useAuthenticated } from '../../auth';
 import { useCreate } from '../../dataProvider';
 import {
     useNotify,
@@ -49,20 +51,23 @@ export const useCreateController = <
     props: CreateControllerProps = {}
 ): CreateControllerResult<RecordType> => {
     const {
-        record = {},
-        successMessage,
+        disableAuthentication,
         onSuccess,
         onFailure,
+        record,
+        successMessage,
         transform,
     } = props;
 
+    useAuthenticated({ enabled: !disableAuthentication });
     const resource = useResourceContext(props);
     const { hasEdit, hasShow } = useResourceDefinition(props);
     const location = useLocation();
     const translate = useTranslate();
     const notify = useNotify();
     const redirect = useRedirect();
-    const recordToUse = getRecord(location, record);
+    const recordToUse =
+        record ?? getRecordFromLocation(location) ?? emptyRecord;
     const version = useVersion();
 
     if (process.env.NODE_ENV !== 'production' && successMessage) {
@@ -190,12 +195,13 @@ export const useCreateController = <
 export interface CreateControllerProps<
     RecordType extends Omit<Record, 'id'> = Record
 > {
+    disableAuthentication?: boolean;
     record?: Partial<RecordType>;
     resource?: string;
     onSuccess?: OnSuccess;
     onFailure?: OnFailure;
-    transform?: TransformData;
     successMessage?: string;
+    transform?: TransformData;
 }
 
 export interface CreateControllerResult<
@@ -230,7 +236,12 @@ export interface CreateControllerResult<
     version: number;
 }
 
-export const getRecord = ({ state, search }, record: any = {}) => {
+const emptyRecord = {};
+/**
+ * Get the initial record from the location, whether it comes from the location
+ * state or is serialized in the url search part.
+ */
+export const getRecordFromLocation = ({ state, search }: Location) => {
     if (state && state.record) {
         return state.record;
     }
@@ -252,7 +263,7 @@ export const getRecord = ({ state, search }, record: any = {}) => {
             );
         }
     }
-    return record;
+    return null;
 };
 
 const getDefaultRedirectRoute = (hasShow, hasEdit) => {