Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Doc] Improve description of rbac tab, panel, section, and step #9030

Merged
merged 12 commits into from
Jun 23, 2023
Merged

[Doc] Improve description of rbac tab, panel, section, and step #9030

Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
c197e47
fix a typo: section instead of Section
adguernier Jun 20, 2023
befa445
remove import WizardFormStep because is useless
adguernier Jun 20, 2023
22eee07
added comment to make clearer the use of permissions on tabs, panel, …
adguernier Jun 20, 2023
2d82229
add a paragraph to explain permission with Tab name prop
adguernier Jun 20, 2023
3f7a645
change sentence structure as suggested
adguernier Jun 20, 2023
22a5e3c
add explication text for tab, panel, step, section
adguernier Jun 20, 2023
9330e7b
example with WizardFormStep instead WizardForm.Step as previous examples
adguernier Jun 20, 2023
40ed219
replace WizardFormStep by WizardForm.Step
adguernier Jun 20, 2023
ee460e3
replace panel in LongFormSection by section
adguernier Jun 20, 2023
c177f80
renamen LongFormSection to LongForm.Section
adguernier Jun 20, 2023
6cc584c
fix typo in LongForm.Section
adguernier Jun 20, 2023
29c02f0
resource products in plural form
adguernier Jun 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 69 additions & 26 deletions docs/AuthRBAC.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -632,7 +632,11 @@ const ProductShow = () => (

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

Add a `name` prop to the Tab to define the resource on which the user needs to have the 'read' permissions for.
Add a `name` prop to the `<Tab>` so you can reference it in the permissions.
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>`.

> 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' }`.


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

Expand All @@ -651,7 +655,9 @@ const authProvider = {
// 'products.description' is missing
{ action: 'read', resource: 'products.thumbnail' },
// 'products.image' is missing
// note that the tab with the name 'description' will be displayed
{ action: 'read', resource: 'products.tab.description' },
// note that the tab with the name 'images' will be displayed
{ action: 'read', resource: 'products.tab.images' },
// 'products.tab.stock' is missing
],
Expand Down Expand Up @@ -758,7 +764,9 @@ const authProvider = {
// 'products.description' is missing
{ action: 'write', resource: 'products.thumbnail' },
// 'products.image' is missing
// note that the tab with the name 'description' will be displayed
{ action: 'write', resource: 'products.tab.description' },
// note that the tab with the name 'images' will be displayed
{ action: 'write', resource: 'products.tab.images' },
// 'products.tab.stock' is missing
],
Expand Down Expand Up @@ -794,7 +802,10 @@ const ProductEdit = () => (

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

Add a `name` prop to the `FormTab` to define the sub-resource that the user needs to have the right permissions for.
Add a `name` prop to the `<FormTab>` so you can reference it in the permissions.
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>`.

> 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' }`.

`<FormTab>` also only renders the child inputs for which the user has the 'write' permissions.

Expand All @@ -813,7 +824,9 @@ const authProvider = {
// 'products.description' is missing
{ action: 'write', resource: 'products.thumbnail' },
// 'products.image' is missing
// note that the tab with the name 'description' will be displayed
{ action: 'write', resource: 'products.tab.description' },
// note that the tab with the name 'images' will be displayed
{ action: 'write', resource: 'products.tab.images' },
// 'products.tab.stock' is missing
],
Expand Down Expand Up @@ -870,7 +883,9 @@ const authProvider = {
// 'products.description' is missing
{ action: 'write', resource: 'products.thumbnail' },
// 'products.image' is missing
// note that the panel with the name 'description' will be displayed
{ action: 'write', resource: 'products.panel.description' },
// note that the panel with the name 'images' will be displayed
{ action: 'write', resource: 'products.panel.images' },
// 'products.panel.stock' is missing
]),
Expand Down Expand Up @@ -902,7 +917,12 @@ const ProductEdit = () => (
### `<AccordionFormPanel>`

Replacement for the default `<AccordionFormPanel>` that only renders a section if the user has the right permissions.
Add a `name` prop to the `AccordionFormPanel` to define the sub-resource that the user needs to have the right permissions for.

Add a `name` prop to the `<AccordionFormPanel>` so you can reference it in the permissions.
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>`.

> 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' }`.

`<AccordionFormPanel>` also only renders the child inputs for which the user has the 'write' permissions.

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

Replacement for the default `<AccordionSection>` that only renders a section if the user has the right permissions.
Add a `name` prop to the `AccordionSection` to define the sub-resource that the user needs to have the right permissions for.

Add a `name` prop to the `<AccordionSection>` so you can reference it in the permissions.
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>`.

> 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' }`.

`<AccordionSection>` also only renders the child inputs for which the user has the 'write' permissions.

This component is provided by the `@react-admin/ra-enterprise` package.
Expand All @@ -977,7 +1004,9 @@ const authProvider = {
// 'products.description' is missing
{ action: 'write', resource: 'products.thumbnail' },
// 'products.image' is missing
// note that the section with the name 'description' will be displayed
{ action: 'write', resource: 'products.section.description' },
// note that the section with the name 'images' will be displayed
{ action: 'write', resource: 'products.section.images' },
// 'products.section.stock' is missing
]),
Expand Down Expand Up @@ -1036,8 +1065,10 @@ const authProvider = {
// 'products.description' is missing
{ action: 'write', resource: 'products.thumbnail' },
// 'products.image' is missing
{ action: 'write', resource: 'products.Section.description' },
{ action: 'write', resource: 'products.Section.images' },
// note that the section with the name 'description' will be displayed
{ action: 'write', resource: 'products.section.description' },
// note that the section with the name 'images' will be displayed
{ action: 'write', resource: 'products.section.images' },
// 'products.Section.stock' is missing
]),
};
Expand Down Expand Up @@ -1065,19 +1096,23 @@ const ProductEdit = () => (
```
{% endraw %}

### `<LongFormSection>`
### `<LongForm.Section>`

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

This component is provided by the `@react-admin/ra-enterprise` package.
Add a `name` prop to the `<LongForm.Section>` so you can reference it in the permissions.
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>`.

> 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' }`.

`<LongForm.Section>` also only renders the child inputs for which the user has the 'write' permissions.

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

{% raw %}
```tsx
import { LongForm, LongFormSection } from '@react-admin/ra-enterprise';
import { LongForm } from '@react-admin/ra-enterprise';

const authProvider = {
// ...
Expand All @@ -1089,31 +1124,33 @@ const authProvider = {
// 'products.description' is missing
{ action: 'write', resource: 'products.thumbnail' },
// 'products.image' is missing
{ action: 'write', resource: 'products.panel.description' },
{ action: 'write', resource: 'products.panel.images' },
// note that the section with the name 'description' will be displayed
{ action: 'write', resource: 'products.section.description' },
// note that the section with the name 'images' will be displayed
{ action: 'write', resource: 'products.section.images' },
// 'products.panel.stock' is missing
]),
};

const ProductEdit = () => (
<Edit>
<LongForm>
<LongFormSection name="description" label="Description">
<LongForm.Section name="description" label="Description">
<TextInput source="reference" />
<TextInput source="width" />
<TextInput source="height" />
// not displayed
<TextInput source="description" />
</LongFormSection>
<LongFormSection name="images" label="Images">
</LongForm.Section>
<LongForm.Section name="images" label="Images">
// not displayed
<TextInput source="image" />
<TextInput source="thumbnail" />
</LongFormSection>
</LongForm.Section>
// not displayed
<LongFormSection name="stock" label="Stock">
<LongForm.Section name="stock" label="Stock">
<TextInput source="stock" />
</LongFormSection>
</LongForm.Section>
</LongForm>
</Edit>
);
Expand Down Expand Up @@ -1147,7 +1184,9 @@ const authProvider = {
// 'products.description' is missing
{ action: 'write', resource: 'products.thumbnail' },
// 'products.image' is missing
// note that the step with the name 'description' will be displayed
{ action: 'write', resource: 'products.step.description' },
// note that the step with the name 'images' will be displayed
{ action: 'write', resource: 'products.step.images' },
// 'products.step.stock' is missing
]),
Expand Down Expand Up @@ -1178,22 +1217,24 @@ const ProductCreate = () => (
```
{% endraw %}

### `<WizardFormStep>`
### `<WizardForm.Step>`

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

This component is provided by the `@react-admin/ra-enterprise` package.
Add a `name` prop to the `<WizardForm.Step>` so you can reference it in the permissions.
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>`.

> 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' }`.

Add a `name` prop to the WizardFormStep to define the sub-resource that the user needs to have the right permissions for.
`<WizardFormStep>` also only renders the child inputs for which the user has the 'write' permissions.
`<WizardForm.Step>` also only renders the child inputs for which the user has the 'write' permissions.

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

{% raw %}
```tsx
import { Edit, TextInput } from 'react-admin';
import { WizardForm, WizardFormStep } from '@react-admin/ra-enterprise';
import { WizardForm } from '@react-admin/ra-enterprise';

const authProvider = {
// ...
Expand All @@ -1205,7 +1246,9 @@ const authProvider = {
// 'products.description' is missing
{ action: 'write', resource: 'products.thumbnail' },
// 'products.image' is missing
// note that the step with the name 'description' will be displayed
{ action: 'write', resource: 'products.step.description' },
// note that the step with the name 'images' will be displayed
{ action: 'write', resource: 'products.step.images' },
// 'products.step.stock' is missing
]),
Expand Down