Add mention of built-in access control

marmelab · Dec 12, 2024 · 0c71fe8 · 0c71fe8
1 parent 7f60ef3
commit 0c71fe8
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 10 deletions.
diff --git a/docs/AccordionForm.md b/docs/AccordionForm.md
@@ -225,7 +225,13 @@ For each panel, react-admin will also call the `authProvider.canAccess` method f
 **Tip**: `<AccordionForm.Panel>` direct children that don't have a `source` will always be displayed.
 
 ```tsx
-import { ArrayInput, Edit, DateInput, SimpleFormIterator, TextInput } from 'react-admin';
+import {
+    ArrayInput,
+    Edit,
+    DateInput,
+    SimpleFormIterator,
+    TextInput
+} from 'react-admin';
 import { AccordionForm } from '@react-admin/ra-form-layout';
 
 const CustomerEdit = () => (
@@ -829,3 +835,40 @@ Note that you **must** set the `<AccordionForm resetOptions>` prop to `{ keepDir
 If you're using it in an `<Edit>` page, you must also use a `pessimistic` or `optimistic` [`mutationMode`](./Edit.md#mutationmode) - `<AutoSave>` doesn't work with the default `mutationMode="undoable"`.
 
 Check [the `<AutoSave>` component](./AutoSave.md) documentation for more details.
+
+## Access Control
+
+`<AccordionForm>` can use [Access Control](./AccessControl.md) to check permissions for each section and input. To enable this feature, set the `enableAccessControl` prop to `true`.
+
+Check the [`enableAccessControl` prop](#enableaccesscontrol) section for more details.
+
+```tsx
+import {
+    ArrayInput,
+    Edit,
+    DateInput,
+    SimpleFormIterator,
+    TextInput
+} from 'react-admin';
+import { AccordionForm } from '@react-admin/ra-form-layout';
+
+const CustomerEdit = () => (
+    <Edit>
+        <AccordionForm enableAccessControl>
+            <AccordionForm.Panel id="identity" defaultExpanded>
+                <TextInput source="first_name" validate={required()} />
+                <TextInput source="last_name" validate={required()} />
+            </AccordionForm.Panel>
+            <AccordionForm.Panel id="occupations">
+                <ArrayInput source="occupations" label="">
+                    <SimpleFormIterator>
+                        <TextInput source="name" validate={required()} />
+                        <DateInput source="from" validate={required()} />
+                        <DateInput source="to" />
+                    </SimpleFormIterator>
+                </ArrayInput>
+            </AccordionForm.Panel>
+        </AccordionForm>
+    </Edit>
+);
+```
diff --git a/docs/AuthRBAC.md b/docs/AuthRBAC.md
@@ -5,15 +5,13 @@ title: "RBAC"
 
 # Role-Based Access Control (RBAC)
 
-Building up on react-admin's [Access Control features](./Permissions.md#access-control), react-admin RBAC provides an implementation for `authProvider.canAccess()` to manage roles and fine-grained permissions, and exports alternative react-admin components that use these permissions.
+Building up on react-admin's [Access Control features](./Permissions.md#access-control), react-admin RBAC provides an implementation for `authProvider.canAccess()` to manage roles and fine-grained permissions, and exports alternative react-admin [components](#components) that use these permissions.
 
 <video controls="controls" style="max-width: 96%">
     <source src="./img/ra-rbac.mp4" type="video/mp4" />
 </video>
 
-Test it live in the [Enterprise Edition Storybook](https://react-admin.github.io/ra-enterprise/?path=/story/ra-rbac-full-app--full-app).
-
-The RBAC features are part of [ra-rbac](https://react-admin-ee.marmelab.com/documentation/ra-rbac), an [Enterprise Edition](https://react-admin-ee.marmelab.com)<img class="icon" src="./img/premium.svg" /> package.
+The RBAC features are part of [ra-rbac](https://react-admin-ee.marmelab.com/documentation/ra-rbac), an [Enterprise Edition](https://react-admin-ee.marmelab.com)<img class="icon" src="./img/premium.svg" /> package. Test them live in the [Enterprise Edition Storybook](https://react-admin.github.io/ra-enterprise/?path=/story/ra-rbac-full-app--full-app).
 
 ## At a Glance
 
@@ -358,7 +356,7 @@ const authProvider = {
 
 ## Components
 
-Ra-rbac provides alternative components to react-admin base components. These alternative components include role-based access control and are as follows:
+Ra-rbac provides alternative components to react-admin base components with RBAC support:
 
 - Main
     - [`<Menu>`](./Menu.md#access-control)
@@ -374,10 +372,20 @@ Ra-rbac provides alternative components to react-admin base components. These al
     - [`<SimpleForm>`](./SimpleForm.md#access-control)
     - [`<TabbedForm>`](./TabbedForm.md#access-control)
 
+In addition, the following components from te Enterprise edition have built-in RBAC support:
+
+- [`<AccordionForm>`](./AccordionForm.md#access-control)
+- [`<LongForm>`](./LongForm.md#access-control)
+- [`<WizardForm>`](./WizardForm.md#access-control)
+
 Here is an example of `<Datagrid>` with RBAC:
 
 ```tsx
-import { canAccessWithPermissions, List, Datagrid } from '@react-admin/ra-rbac';
+import { 
+    canAccessWithPermissions,
+    List,
+    Datagrid
+} from '@react-admin/ra-rbac';
 import {
     ImageField,
     TextField,

diff --git a/docs/LongForm.md b/docs/LongForm.md
@@ -209,7 +209,13 @@ For each section, react-admin will also call the `authProvider.canAccess` method
 **Tip**: `<LongForm.Section>` direct children that don't have a `source` will always be displayed.
 
 ```tsx
-import { ArrayInput, Edit, DateInput, SimpleFormIterator, TextInput } from 'react-admin';
+import {
+    ArrayInput,
+    Edit,
+    DateInput,
+    SimpleFormIterator,
+    TextInput
+} from 'react-admin';
 import { LongForm } from '@react-admin/ra-form-layout';
 
 const CustomerEdit = () => (
@@ -704,3 +710,40 @@ Note that you **must** set the `<LongForm resetOptions>` prop to `{ keepDirtyVal
 If you're using it in an `<Edit>` page, you must also use a `pessimistic` or `optimistic` [`mutationMode`](./Edit.md#mutationmode) - `<AutoSave>` doesn't work with the default `mutationMode="undoable"`.
 
 Check [the `<AutoSave>` component](./AutoSave.md) documentation for more details.
+
+## Access Control
+
+`<LongForm>` can use [Access Control](./AccessControl.md) to check permissions for each section and input. To enable this feature, set the `enableAccessControl` prop to `true`.
+
+Check the [`enableAccessControl` prop](#enableaccesscontrol) section for more details.
+
+```tsx
+import { 
+    ArrayInput,
+    Edit,
+    DateInput,
+    SimpleFormIterator,
+    TextInput
+} from 'react-admin';
+import { LongForm } from '@react-admin/ra-form-layout';
+
+const CustomerEdit = () => (
+    <Edit>
+        <LongForm enableAccessControl>
+            <LongForm.Section id="identity">
+                <TextInput source="first_name" validate={required()} />
+                <TextInput source="last_name" validate={required()} />
+            </LongForm.Section>
+            <LongForm.Section id="occupations">
+                <ArrayInput source="occupations" label="">
+                    <SimpleFormIterator>
+                        <TextInput source="name" validate={required()} />
+                        <DateInput source="from" validate={required()} />
+                        <DateInput source="to" />
+                    </SimpleFormIterator>
+                </ArrayInput>
+            </LongForm.Section>
+        </LongForm>
+    </Edit>
+);
+```
diff --git a/docs/Permissions.md b/docs/Permissions.md
@@ -171,7 +171,7 @@ If the current user tries to access a page they don't have access to, they are r
 
 If the `authProvider.canAccess()` method returns an error, the user is redirected to an "Access Control Error" page. You can customize this page by adding a custom route on the `/accessControlError` path.
 
-The **action buttons** (`<EditButton>`, `<CreateButton>`, `<DeleteButton>`, `<ShowButton>`, and `<ListButtoon>`) also have built-in access control. They are only displayed if the user can access the corresponding action on the resource.
+The **action buttons** (`<EditButton>`, `<CreateButton>`, `<DeleteButton>`, `<ShowButton>`, and `<ListButton>`) also have built-in access control. They are only displayed if the user can access the corresponding action on the resource.
 
 ```tsx
 const MyToolbar = () => (
@@ -190,6 +190,8 @@ const MyToolbar = () => (
 );
 ```
 
+The **list components** (`<Datagrid>`), **show components** (`<SimpleShowLayout>`, `<TabbedShowLayout>`), and **edit components** (`<SimpleForm>`, `<Tabbedform>`) also support access control provided you use the version from the `@react-admin/ra-rbac` Enterprise package. Check the [RBAC documentation](./AuthRBAC.md#components) for more information.
+
 ### `useCanAccess`
 
 If you need to control access on mount in your own components, use the `useCanAccess()` hook. Since `authProvider.canAccess()` is asynchronous, the hook returns an object with an `isPending` property set to `true` until the promise resolves. Make sure you don't use the result until `isPending` is `false`.

diff --git a/docs/WizardForm.md b/docs/WizardForm.md
@@ -171,7 +171,13 @@ For each panel, react-admin will also call the `authProvider.canAccess` method f
 **Tip**: `<WizardForm.Step>` direct children that don't have a `source` will always be displayed.
 
 ```tsx
-import { ArrayInput, Edit, DateInput, SimpleFormIterator, TextInput } from 'react-admin';
+import { 
+    ArrayInput,
+    Edit,
+    DateInput,
+    SimpleFormIterator,
+    TextInput
+} from 'react-admin';
 import { WizardForm } from '@react-admin/ra-form-layout';
 
 const CustomerEdit = () => (
@@ -719,3 +725,40 @@ const PostCreate = () => (
     </Create>
 );
 ```
+
+## Access Control
+
+`<WizardForm>` can use [Access Control](./AccessControl.md) to check permissions for each section and input. To enable this feature, set the `enableAccessControl` prop to `true`.
+
+Check the [`enableAccessControl` prop](#enableaccesscontrol) section for more details.
+
+```tsx
+import { 
+    ArrayInput,
+    Edit,
+    DateInput,
+    SimpleFormIterator,
+    TextInput
+} from 'react-admin';
+import { WizardForm } from '@react-admin/ra-form-layout';
+
+const CustomerEdit = () => (
+    <Edit>
+        <WizardForm enableAccessControl>
+            <WizardForm.Step id="identity">
+                <TextInput source="first_name" validate={required()} />
+                <TextInput source="last_name" validate={required()} />
+            </WizardForm.Step>
+            <WizardForm.Step id="occupations">
+                <ArrayInput source="occupations" label="">
+                    <SimpleFormIterator>
+                        <TextInput source="name" validate={required()} />
+                        <DateInput source="from" validate={required()} />
+                        <DateInput source="to" />
+                    </SimpleFormIterator>
+                </ArrayInput>
+            </WizardForm.Step>
+        </WizardForm>
+    </Edit>
+);
+```