Fix useCanAccess causes extra rerender + use useCanAccess in the simple demo
#10278
Conversation
slax57
changed the title
useCanAccess in the simple demouseCanAccess causes extra rerender + use useCanAccess in the simple demo
| @@ -70,7 +76,7 @@ const UserCreate = () => { | |||
| validate={[required(), isValidName, unique()]} | |||
| /> | |||
| </TabbedForm.Tab> | |||
| {permissions === 'admin' && ( | |||
| {canManageUsers ? ( | |||
There was a problem hiding this comment.
Could not use <CanAccess> here because <TabbedForm> still scans its children, so having <CanAccess> as one of its child couldn't work.
| @@ -153,7 +152,7 @@ const PostCreate = () => { | |||
| <TextInput source="url" defaultValue="" /> | |||
| </SimpleFormIterator> | |||
| </ArrayInput> | |||
| {permissions === 'admin' && ( | |||
| <CanAccess action="manage_post_authors"> | |||
There was a problem hiding this comment.
This action name is actually an action and a resource... Why not use action="edit" resource="users"?
There was a problem hiding this comment.
In my first implementation I did this, but then I realized that for such simple access rules we don't need that much complexity, and it allows me to omit the resource prop completely, making the code easier to read.
There was a problem hiding this comment.
I ended up implementing a mixed approach: keeping a 'custom' action for things like 'batch_create', and using resource for fields like 'posts.authors' and 'users.role'.
|
Seems I need to fix the E2E tests. Back to WIP. |
|
All green, back to RFR! |
examples/simple/src/authProvider.tsx
Outdated
| getPermissions: () => { | ||
| const role = localStorage.getItem('role'); | ||
| return Promise.resolve(role ?? ''); | ||
| return Promise.resolve(); | ||
| }, |
There was a problem hiding this comment.
You can remove this now, right? The getPermissions method is optional now
Problems
usePermissions. But React Admin v5.3 will bring a better replacement feature calleduseCanAccess, which we should demonstrate in this demo.useCanAccesscauses an unnecessary extra rerender to components using it (e.g.EditButtonorShowButton) when there is noauthProvideror noauthProvider.canAccessimplementation.Solution
usePermissionsbyuseCanAccess/<CanAccess>in the simple demo.useCanAccessonly when there is an actualauthProvider.canAccessimplementation (otherwise it creates an extra rerender because of the query status update).How To Test
make run).Try signing in as:
useCanAccessunit testsTodo
useCanAccessquery when there is noauthProvider.canAccessas it causes unnecessary rerenders!authProvider.canAccessis implemented to returntrueby default, and call a fn stored in memory that will actually implement thecanAccessfor a given roleAdditional Checks
masterfor a bugfix, ornextfor a featureAlso, please make sure to read the contributing guidelines.
Additional Notes
Current use of the permissions in the demo
role
<Resource name="users" {...users} /><Resource name="users" {...users} /><ArrayInput source="authors"><ArrayInput source="authors"><SaveButton label="user.action.save_and_add" /><TabbedForm.Tab label="user.form.security" path="security"><TextInput source="id" InputProps={{ disabled: true }} /><TabbedForm.Tab label="user.form.security" path="security">filters.push(<TextInput source="role" />)rowClick = 'edit'<SimpleList secondaryText={record.role}><TextField source="role" /><TabbedShowLayout.Tab label="user.form.security">Issues found while testing
<TabbedForm.Tab label="user.form.security" path="security">the value prop is required at runtime<CanAccess>, because it still clones childrenuseCanAccessinsteadmaster