Skip to content

Commit 83b010b

Browse files
authored
Merge pull request #9030 from marmelab/doc-improve-description-of-rbac-tab-panel-section-step
[Doc] Improve description of rbac tab, panel, section, and step
2 parents 3ac5926 + 29c02f0 commit 83b010b

1 file changed

Lines changed: 69 additions & 26 deletions

File tree

docs/AuthRBAC.md

Lines changed: 69 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -632,7 +632,11 @@ const ProductShow = () => (
632632

633633
Replacement for the `<TabbedShowLayout.Tab>` that only renders a tab if the user has the right permissions.
634634

635-
Add a `name` prop to the Tab to define the resource on which the user needs to have the 'read' permissions for.
635+
Add a `name` prop to the `<Tab>` so you can reference it in the permissions.
636+
Then, to allow users to access a particular `<Tab>`, update the permissions definition as follows: `{ action: 'read', resource: '{RESOURCE}.tab.{NAME}' }`, where `RESOURCE` is the resource name, and `NAME` the name you provided to the `<Tab>`.
637+
638+
> For instance, to allow users access to the following tab `<Tab label="Description" name="description">` in `products` resource, add this line in permissions: `{ action: 'read', resource: 'products.tab.description' }`.
639+
636640

637641
`<Tab>` also only renders the child fields for which the user has the 'read' permissions.
638642

@@ -651,7 +655,9 @@ const authProvider = {
651655
// 'products.description' is missing
652656
{ action: 'read', resource: 'products.thumbnail' },
653657
// 'products.image' is missing
658+
// note that the tab with the name 'description' will be displayed
654659
{ action: 'read', resource: 'products.tab.description' },
660+
// note that the tab with the name 'images' will be displayed
655661
{ action: 'read', resource: 'products.tab.images' },
656662
// 'products.tab.stock' is missing
657663
],
@@ -758,7 +764,9 @@ const authProvider = {
758764
// 'products.description' is missing
759765
{ action: 'write', resource: 'products.thumbnail' },
760766
// 'products.image' is missing
767+
// note that the tab with the name 'description' will be displayed
761768
{ action: 'write', resource: 'products.tab.description' },
769+
// note that the tab with the name 'images' will be displayed
762770
{ action: 'write', resource: 'products.tab.images' },
763771
// 'products.tab.stock' is missing
764772
],
@@ -794,7 +802,10 @@ const ProductEdit = () => (
794802

795803
Replacement for the default `<FormTab>` that only renders a tab if the user has the right permissions.
796804

797-
Add a `name` prop to the `FormTab` to define the sub-resource that the user needs to have the right permissions for.
805+
Add a `name` prop to the `<FormTab>` so you can reference it in the permissions.
806+
Then, to allow users to access a particular `<FormTab>`, update the permissions definition as follows: `{ action: 'write', resource: '{RESOURCE}.tab.{NAME}' }`, where `RESOURCE` is the resource name, and `NAME` the name you provided to the `<FormTab>`.
807+
808+
> For instance, to allow users access to the following tab `<FormTab label="Description" name="description">` in `products` resource, add this line in permissions: `{ action: 'write', resource: 'products.tab.description' }`.
798809
799810
`<FormTab>` also only renders the child inputs for which the user has the 'write' permissions.
800811

@@ -813,7 +824,9 @@ const authProvider = {
813824
// 'products.description' is missing
814825
{ action: 'write', resource: 'products.thumbnail' },
815826
// 'products.image' is missing
827+
// note that the tab with the name 'description' will be displayed
816828
{ action: 'write', resource: 'products.tab.description' },
829+
// note that the tab with the name 'images' will be displayed
817830
{ action: 'write', resource: 'products.tab.images' },
818831
// 'products.tab.stock' is missing
819832
],
@@ -870,7 +883,9 @@ const authProvider = {
870883
// 'products.description' is missing
871884
{ action: 'write', resource: 'products.thumbnail' },
872885
// 'products.image' is missing
886+
// note that the panel with the name 'description' will be displayed
873887
{ action: 'write', resource: 'products.panel.description' },
888+
// note that the panel with the name 'images' will be displayed
874889
{ action: 'write', resource: 'products.panel.images' },
875890
// 'products.panel.stock' is missing
876891
]),
@@ -902,7 +917,12 @@ const ProductEdit = () => (
902917
### `<AccordionFormPanel>`
903918

904919
Replacement for the default `<AccordionFormPanel>` that only renders a section if the user has the right permissions.
905-
Add a `name` prop to the `AccordionFormPanel` to define the sub-resource that the user needs to have the right permissions for.
920+
921+
Add a `name` prop to the `<AccordionFormPanel>` so you can reference it in the permissions.
922+
Then, to allow users to access a particular `<AccordionFormPanel>`, update the permissions definition as follows: `{ action: 'write', resource: '{RESOURCE}.panel.{NAME}' }`, where `RESOURCE` is the resource name, and `NAME` the name you provided to the `<FormTab>`.
923+
924+
> For instance, to allow users access to the following tab `<AccordionFormPanel label="Description" name="description">` in `products` resource, add this line in permissions: `{ action: 'write', resource: 'products.panel.description' }`.
925+
906926
`<AccordionFormPanel>` also only renders the child inputs for which the user has the 'write' permissions.
907927

908928
To learn more about the permissions format, please refer to the [`@react-admin/ra-rbac` documentation](https://marmelab.com/ra-enterprise/modules/ra-rbac).
@@ -922,7 +942,9 @@ const authProvider = {
922942
// 'products.description' is missing
923943
{ action: 'write', resource: 'products.thumbnail' },
924944
// 'products.image' is missing
945+
// note that the panel with the name 'description' will be displayed
925946
{ action: 'write', resource: 'products.panel.description' },
947+
// note that the panel with the name 'images' will be displayed
926948
{ action: 'write', resource: 'products.panel.images' },
927949
// 'products.panel.stock' is missing
928950
]),
@@ -955,7 +977,12 @@ const ProductEdit = () => (
955977
### `<AccordionSection>`
956978

957979
Replacement for the default `<AccordionSection>` that only renders a section if the user has the right permissions.
958-
Add a `name` prop to the `AccordionSection` to define the sub-resource that the user needs to have the right permissions for.
980+
981+
Add a `name` prop to the `<AccordionSection>` so you can reference it in the permissions.
982+
Then, to allow users to access a particular `<AccordionSection>`, update the permissions definition as follows: `{ action: 'write', resource: '{RESOURCE}.section.{NAME}' }`, where `RESOURCE` is the resource name, and `NAME` the name you provided to the `<AccordionSection>`.
983+
984+
> For instance, to allow users access to the following tab `<AccordionSection label="Description" name="description">` in `products` resource, add this line in permissions: `{ action: 'write', resource: 'products.section.description' }`.
985+
959986
`<AccordionSection>` also only renders the child inputs for which the user has the 'write' permissions.
960987

961988
This component is provided by the `@react-admin/ra-enterprise` package.
@@ -977,7 +1004,9 @@ const authProvider = {
9771004
// 'products.description' is missing
9781005
{ action: 'write', resource: 'products.thumbnail' },
9791006
// 'products.image' is missing
1007+
// note that the section with the name 'description' will be displayed
9801008
{ action: 'write', resource: 'products.section.description' },
1009+
// note that the section with the name 'images' will be displayed
9811010
{ action: 'write', resource: 'products.section.images' },
9821011
// 'products.section.stock' is missing
9831012
]),
@@ -1036,8 +1065,10 @@ const authProvider = {
10361065
// 'products.description' is missing
10371066
{ action: 'write', resource: 'products.thumbnail' },
10381067
// 'products.image' is missing
1039-
{ action: 'write', resource: 'products.Section.description' },
1040-
{ action: 'write', resource: 'products.Section.images' },
1068+
// note that the section with the name 'description' will be displayed
1069+
{ action: 'write', resource: 'products.section.description' },
1070+
// note that the section with the name 'images' will be displayed
1071+
{ action: 'write', resource: 'products.section.images' },
10411072
// 'products.Section.stock' is missing
10421073
]),
10431074
};
@@ -1065,19 +1096,23 @@ const ProductEdit = () => (
10651096
```
10661097
{% endraw %}
10671098

1068-
### `<LongFormSection>`
1099+
### `<LongForm.Section>`
10691100

1070-
Replacement for the default `<LongFormSection>` that only renders a section if the user has the right permissions.
1071-
Add a `name` prop to the `LongFormSection` to define the sub-resource that the user needs to have the right permissions for.
1072-
`<LongFormSection>` also only renders the child inputs for which the user has the 'write' permissions.
1101+
Replacement for the default `<LongForm.Section>` that only renders a section if the user has the right permissions.
1102+
Use it with `<LongForm>` from `@react-admin/ra-enterprise` to only display the section the user has access to in the form.
10731103

1074-
This component is provided by the `@react-admin/ra-enterprise` package.
1104+
Add a `name` prop to the `<LongForm.Section>` so you can reference it in the permissions.
1105+
Then, to allow users to access a particular `<LongForm.Section>`, update the permissions definition as follows: `{ action: 'write', resource: '{RESOURCE}.section.{NAME}' }`, where `RESOURCE` is the resource name, and `NAME` the name you provided to the `<LongForm.Section>`.
1106+
1107+
> For instance, to allow users access to the following tab `<LongForm.Section label="Description" name="description">` in `products` resource, add this line in permissions: `{ action: 'write', resource: 'products.section.description' }`.
1108+
1109+
`<LongForm.Section>` also only renders the child inputs for which the user has the 'write' permissions.
10751110

10761111
To learn more about the permissions format, please refer to the [`@react-admin/ra-rbac` documentation](https://marmelab.com/ra-enterprise/modules/ra-rbac).
10771112

10781113
{% raw %}
10791114
```tsx
1080-
import { LongForm, LongFormSection } from '@react-admin/ra-enterprise';
1115+
import { LongForm } from '@react-admin/ra-enterprise';
10811116

10821117
const authProvider = {
10831118
// ...
@@ -1089,31 +1124,33 @@ const authProvider = {
10891124
// 'products.description' is missing
10901125
{ action: 'write', resource: 'products.thumbnail' },
10911126
// 'products.image' is missing
1092-
{ action: 'write', resource: 'products.panel.description' },
1093-
{ action: 'write', resource: 'products.panel.images' },
1127+
// note that the section with the name 'description' will be displayed
1128+
{ action: 'write', resource: 'products.section.description' },
1129+
// note that the section with the name 'images' will be displayed
1130+
{ action: 'write', resource: 'products.section.images' },
10941131
// 'products.panel.stock' is missing
10951132
]),
10961133
};
10971134

10981135
const ProductEdit = () => (
10991136
<Edit>
11001137
<LongForm>
1101-
<LongFormSection name="description" label="Description">
1138+
<LongForm.Section name="description" label="Description">
11021139
<TextInput source="reference" />
11031140
<TextInput source="width" />
11041141
<TextInput source="height" />
11051142
// not displayed
11061143
<TextInput source="description" />
1107-
</LongFormSection>
1108-
<LongFormSection name="images" label="Images">
1144+
</LongForm.Section>
1145+
<LongForm.Section name="images" label="Images">
11091146
// not displayed
11101147
<TextInput source="image" />
11111148
<TextInput source="thumbnail" />
1112-
</LongFormSection>
1149+
</LongForm.Section>
11131150
// not displayed
1114-
<LongFormSection name="stock" label="Stock">
1151+
<LongForm.Section name="stock" label="Stock">
11151152
<TextInput source="stock" />
1116-
</LongFormSection>
1153+
</LongForm.Section>
11171154
</LongForm>
11181155
</Edit>
11191156
);
@@ -1147,7 +1184,9 @@ const authProvider = {
11471184
// 'products.description' is missing
11481185
{ action: 'write', resource: 'products.thumbnail' },
11491186
// 'products.image' is missing
1187+
// note that the step with the name 'description' will be displayed
11501188
{ action: 'write', resource: 'products.step.description' },
1189+
// note that the step with the name 'images' will be displayed
11511190
{ action: 'write', resource: 'products.step.images' },
11521191
// 'products.step.stock' is missing
11531192
]),
@@ -1178,22 +1217,24 @@ const ProductCreate = () => (
11781217
```
11791218
{% endraw %}
11801219

1181-
### `<WizardFormStep>`
1220+
### `<WizardForm.Step>`
11821221

1183-
Replacement for the default `<WizardFormStep>` that only renders a step if the user has the right permissions.
1222+
Replacement for the default `<WizardForm.Step>` that only renders a step if the user has the right permissions.
11841223
Use it with `<WizardForm>` from `@react-admin/ra-enterprise` to only display the steps the user has access to in the stepper.
11851224

1186-
This component is provided by the `@react-admin/ra-enterprise` package.
1225+
Add a `name` prop to the `<WizardForm.Step>` so you can reference it in the permissions.
1226+
Then, to allow users to access a particular `<WizardForm.Step>`, update the permissions definition as follows: `{ action: 'write', resource: '{RESOURCE}.step.{NAME}' }`, where `RESOURCE` is the resource name, and `NAME` the name you provided to the `<WizardForm.Step>`.
1227+
1228+
> For instance, to allow users access to the following tab `<WizardForm.Step label="Description" name="description">` in `products` resource, add this line in permissions: `{ action: 'write', resource: 'products.step.description' }`.
11871229
1188-
Add a `name` prop to the WizardFormStep to define the sub-resource that the user needs to have the right permissions for.
1189-
`<WizardFormStep>` also only renders the child inputs for which the user has the 'write' permissions.
1230+
`<WizardForm.Step>` also only renders the child inputs for which the user has the 'write' permissions.
11901231

11911232
To learn more about the permissions format, please refer to the [`@react-admin/ra-rbac` documentation](https://marmelab.com/ra-enterprise/modules/ra-rbac).
11921233

11931234
{% raw %}
11941235
```tsx
11951236
import { Edit, TextInput } from 'react-admin';
1196-
import { WizardForm, WizardFormStep } from '@react-admin/ra-enterprise';
1237+
import { WizardForm } from '@react-admin/ra-enterprise';
11971238

11981239
const authProvider = {
11991240
// ...
@@ -1205,7 +1246,9 @@ const authProvider = {
12051246
// 'products.description' is missing
12061247
{ action: 'write', resource: 'products.thumbnail' },
12071248
// 'products.image' is missing
1249+
// note that the step with the name 'description' will be displayed
12081250
{ action: 'write', resource: 'products.step.description' },
1251+
// note that the step with the name 'images' will be displayed
12091252
{ action: 'write', resource: 'products.step.images' },
12101253
// 'products.step.stock' is missing
12111254
]),

0 commit comments

Comments
 (0)