Skip to content

Commit 7f60ef3

Browse files
fzaninottofzaninotto
committed
Move RBAC buttons doc to the Buttons chapter
1 parent 3011173 commit 7f60ef3

File tree

2 files changed

+110
-74
lines changed

2 files changed

+110
-74
lines changed

‎docs/AuthRBAC.md

Lines changed: 53 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -109,8 +109,8 @@ React-admin already does page-level access control with actions like "list", "sh
109109
| `create` | Allow to access the Create page | [`<Create>`](./Create.md), [`<CreateButton>`](./Buttons.md#createbutton), [`<List>`](./List.md#access-control) |
110110
| `edit` | Allow to access the Edit page | [`<Edit>`](./Edit.md), [`<EditButton>`](./Buttons.md#editbutton), [`<Datagrid>`](./Datagrid.md#access-control), [`<Show>`](./Show.md) |
111111
| `delete` | Allow to delete data | [`<DeleteButton>`](./Buttons.md#deletebutton), [`<BulkDeleteButton>`](./Buttons.md#bulkdeletebutton), [`<Datagrid>`](./Datagrid.md#access-control), [`<SimpleForm>`](./SimpleForm.md#access-control), [`<TabbedForm>`](#tabform) |
112-
| `export` | Allow to export data | [`<ExportButton>`](#exportbutton), [`<List>`](./List.md#access-control) |
113-
| `clone` | Allow to clone a record | [`<CloneButton>`](#clonebutton), [`<Edit>`](./Edit.md) |
112+
| `export` | Allow to export data | [`<ExportButton>`](./Buttons.md#exportbutton), [`<List>`](./List.md#access-control) |
113+
| `clone` | Allow to clone a record | [`<CloneButton>`](./Buttons.md#clonebutton), [`<Edit>`](./Edit.md) |
114114
| `read` | Allow to view a field (or a tab) | [`<Datagrid>`](./Datagrid.md#access-control), [`<SimpleShowLayout>`](./SimpleShowLayout.md#access-control), [`<TabbedShowLayout>`](./TabbedShowLayout.md#access-control) |
115115
| `write` | Allow to edit a field (or a tab) | [`<SimpleForm>`](./SimpleForm.md#access-control), [`<TabbedForm>`](./TabbedForm.md#access-control), [`<WizardForm>`](./WizardForm.md#enableaccesscontrol), [`<LongForm>`](./LongForm.md#enableaccesscontrol), [`<AccordionForm>`](./AccordionForm.md#enableaccesscontrol) |
116116

@@ -365,80 +365,71 @@ Ra-rbac provides alternative components to react-admin base components. These al
365365
- List
366366
- [`<List>`](./List.md#access-control)
367367
- [`<Datagrid>`](./Datagrid.md#access-control)
368+
- [`<ExportButton>`](./Buttons.md#exportbutton)
368369
- Detail
369370
- [`<SimpleShowLayout>`](./SimpleShowLayout.md#access-control)
370371
- [`<TabbedShowLayout>`](./TabbedShowLayout.md#access-control)
372+
- [`<CloneButton>`](./Buttons.md#clonebutton)
371373
- Form
372374
- [`<SimpleForm>`](./SimpleForm.md#access-control)
373375
- [`<TabbedForm>`](./TabbedForm.md#access-control)
374376

375-
## `<ExportButton>`
376-
377-
Replacement for react-admin's [`<ExportButton>`](./Buttons.md#exportbutton) that checks users have the `'export'` permission before rendering. Use it if you want to provide your own `actions` to the `<List>`:
377+
Here is an example of `<Datagrid>` with RBAC:
378378

379379
```tsx
380-
import { CreateButton, List, TopToolbar } from 'react-admin';
381-
import { ExportButton } from '@react-admin/ra-rbac';
382-
383-
const PostListActions = () => (
384-
<TopToolbar>
385-
<PostFilter context="button" />
386-
<CreateButton />
387-
<ExportButton />
388-
</TopToolbar>
389-
);
390-
391-
export const PostList = () => (
392-
<List actions={<PostListActions />}>
393-
{/* ... */}
394-
</List>
395-
);
396-
```
397-
398-
It accepts the following props in addition to the default [`<ExportButton>` props](./Buttons.md#props-8):
399-
400-
| Prop | Required | Type | Default | Description |
401-
| -------------------- | -------- | ----------------- | ---------- | ---------------------------------------------------------------------- |
402-
| `accessDenied` | Optional | ReactNode | null | The content to display when users don't have the `'export'` permission |
403-
| `action` | Optional | String | `"export"` | The action to call `authProvider.canAccess` with |
404-
| `authorizationError` | Optional | ReactNode | null | The content to display when an error occurs while checking permission |
405-
406-
**Tip**: Don't forget to give read permissions on all the fields you want to allow in exports
407-
```jsx
408-
{ action: "read", resource: `${resource}.${source}` }.
409-
// or
410-
{ action: "read", resource: `${resource}.*` }.
411-
```
412-
413-
## `<CloneButton>`
414-
415-
Replacement for react-admin's [`<CloneButton>`](./Buttons.md#clonebutton) that checks users have the `'clone'` permission before rendering. Use it if you want to provide your own `actions` to the `<Edit>`:
380+
import { canAccessWithPermissions, List, Datagrid } from '@react-admin/ra-rbac';
381+
import {
382+
ImageField,
383+
TextField,
384+
ReferenceField,
385+
NumberField,
386+
} from 'react-admin';
416387

417-
```tsx
418-
import { Edit, TopToolbar } from 'react-admin';
419-
import { CloneButton } from '@react-admin/ra-rbac';
420-
421-
const PostEditActions = () => (
422-
<TopToolbar>
423-
<CloneButton />
424-
</TopToolbar>
425-
);
388+
const authProvider = {
389+
// ...
390+
canAccess: async ({ action, record, resource }) =>
391+
canAccessWithPermissions({
392+
permissions: [
393+
{ action: 'list', resource: 'products' },
394+
{ action: 'read', resource: 'products.thumbnail' },
395+
{ action: 'read', resource: 'products.reference' },
396+
{ action: 'read', resource: 'products.category_id' },
397+
{ action: 'read', resource: 'products.width' },
398+
{ action: 'read', resource: 'products.height' },
399+
{ action: 'read', resource: 'products.price' },
400+
{ action: 'read', resource: 'products.description' },
401+
// { action: 'read', resource: 'products.stock' },
402+
// { action: 'read', resource: 'products.sales' },
403+
// { action: 'delete', resource: 'products' },
404+
{ action: 'show', resource: 'products' },
405+
],
406+
action,
407+
record,
408+
resource
409+
}),
410+
};
426411

427-
export const PostEdit = () => (
428-
<Edit actions={<PostEditActions />}>
429-
{/* ... */}
430-
</Edit>
412+
const ProductList = () => (
413+
<List>
414+
{/* The datagrid has no bulk actions as the user doesn't have the 'delete' permission */}
415+
<Datagrid>
416+
<ImageField source="thumbnail" />
417+
<TextField source="reference" />
418+
<ReferenceField source="category_id" reference="categories">
419+
<TextField source="name" />
420+
</ReferenceField>
421+
<NumberField source="width" />
422+
<NumberField source="height" />
423+
<NumberField source="price" />
424+
<TextField source="description" />
425+
{/** These two columns are not visible to the user **/}
426+
<NumberField source="stock" />
427+
<NumberField source="sales" />
428+
</Datagrid>
429+
</List>
431430
);
432431
```
433432

434-
It accepts the following props in addition to the default `<CloneButton>` props:
435-
436-
| Prop | Required | Type | Default | Description |
437-
| -------------------- | -------- | ----------------- | ---------- | ---------------------------------------------------------------------- |
438-
| `accessDenied` | Optional | ReactNode | null | The content to display when users don't have the `'clone'` permission |
439-
| `action` | Optional | String | `"clone"` | The action to call `authProvider.canAccess` with |
440-
| `authorizationError` | Optional | ReactNode | null | The content to display when an error occurs while checking permission |
441-
442433
## Performance
443434

444435
`authProvider.canAccess()` can return a promise, which in theory allows to rely on the authentication server for permissions. The downside is that this slows down the app a great deal, as each page may contain dozens of calls to these methods.

‎docs/Buttons.md

Lines changed: 57 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -600,26 +600,48 @@ It also supports [all the other `<Button>` props](#button).
600600

601601
### Access Control
602602

603-
If you want to control whether this button should be displayed based on users permissions, you can leverage the `<CloneButton>` exported by the `@react-admin/ra-rbac` Enterprise package.
603+
If you want to control whether this button should be displayed based on users permissions, use the `<CloneButton>` exported by the `@react-admin/ra-rbac` Enterprise package.
604604

605-
This `<CloneButton>` will call `authProvider.canAccess()` using the following parameters:
605+
```diff
606+
-import { CloneButton } from 'react-admin';
607+
+import { CloneButton } from '@react-admin/ra-rbac';
608+
```
606609

607-
```txt
610+
This component adds the following [RBAC](./AuthRBAC.md) controls:
611+
612+
- It will only render if the user has the `'clone'` permission on the current resource.
613+
614+
```js
608615
{ action: "clone", resource: [current resource] }
609616
```
610617

611-
```jsx
612-
import { TopToolbar, List } from 'react-admin';
618+
Here is an example of how to use the `<CloneButton>` with RBAC:
619+
620+
```tsx
621+
import { Edit, TopToolbar } from 'react-admin';
613622
import { CloneButton } from '@react-admin/ra-rbac';
614623

615-
const PostList = () => (
616-
<List>
617-
<TextField source="title" />
624+
const PostEditActions = () => (
625+
<TopToolbar>
618626
<CloneButton />
619-
</List>
627+
</TopToolbar>
628+
);
629+
630+
export const PostEdit = () => (
631+
<Edit actions={<PostEditActions />}>
632+
{/* ... */}
633+
</Edit>
620634
);
621635
```
622636

637+
This component accepts additional props:
638+
639+
| Prop | Required | Type | Default | Description |
640+
| -------------------- | -------- | ----------------- | ---------- | ---------------------------------------------------------------------- |
641+
| `accessDenied` | Optional | ReactNode | null | The content to display when users don't have the `'clone'` permission |
642+
| `action` | Optional | String | `"clone"` | The action to call `authProvider.canAccess` with |
643+
| `authorizationError` | Optional | ReactNode | null | The content to display when an error occurs while checking permission |
644+
623645
## `<CreateButton>`
624646

625647
Opens the Create view of the current resource:
@@ -996,14 +1018,29 @@ export const PostList = () => (
9961018

9971019
### Access Control
9981020

999-
If you want to control whether this button should be displayed based on users permissions, you can leverage the `<ExportButton>` exported by the `@react-admin/ra-rbac` Enterprise package.
1021+
If you want to control whether this button should be displayed based on users permissions, use the `<ExportButton>` exported by the `@react-admin/ra-rbac` Enterprise package.
10001022

1001-
This `<ExportButton>` will call `authProvider.canAccess()` using the following parameters:
1023+
```diff
1024+
-import { ExportButton } from 'react-admin';
1025+
+import { ExportButton } from '@react-admin/ra-rbac';
1026+
```
10021027

1003-
```txt
1028+
This component adds the following [RBAC](./AuthRBAC.md) controls:
1029+
1030+
- It will only render if the user has the `'export'` permission on the current resource.
1031+
1032+
```js
10041033
{ action: "export", resource: [current resource] }
10051034
```
10061035

1036+
- It will only export the fields the user has the `'read'` permission on.
1037+
1038+
```js
1039+
{ action: "read", resource: `${resource}.${source}` }
1040+
```
1041+
1042+
Here is an example usage:
1043+
10071044
```jsx
10081045
import { CreateButton, TopToolbar } from 'react-admin';
10091046
import { ExportButton } from '@react-admin/ra-rbac';
@@ -1023,6 +1060,14 @@ export const PostList = () => (
10231060
);
10241061
```
10251062

1063+
This component accepts additional props:
1064+
1065+
| Prop | Required | Type | Default | Description |
1066+
| -------------------- | -------- | ----------------- | ---------- | ---------------------------------------------------------------------- |
1067+
| `accessDenied` | Optional | ReactNode | null | The content to display when users don't have the `'export'` permission |
1068+
| `action` | Optional | String | `"export"` | The action to call `authProvider.canAccess` with |
1069+
| `authorizationError` | Optional | ReactNode | null | The content to display when an error occurs while checking permission |
1070+
10261071
## `<FilterButton>`
10271072

10281073
This button is an internal component used by react-admin in [the Filter button/form combo](./FilteringTutorial.md#the-filter-buttonform-combo).

0 commit comments

Comments
 (0)