[doc]: fix <WithPermissions /> and <IfCanAccess /> doc

docs/IfCanAccess.md

@@ -0,0 +1,33 @@
+---
+layout: default
+title: "IfCanAccess"
+---
+
+# `<IfCanAccess>`
+
+This component, part of [the ra-rbac module](https://marmelab.com/ra-enterprise/modules/ra-rbac#ifcanaccess)<img class="icon" src="./img/premium.svg" />, relies on the `authProvider` to render its child only if the user has the right permissions. It accepts the following props:
+
+- `action` (string, required): the action to check, e.g. 'read', 'list', 'export', 'delete', etc.
+- `resource` (string, optional): the resource to check, e.g. 'users', 'comments', 'posts', etc. Defaults to the current resource.
+- `record` (object, optional): the record to check. If passed, the child only renders if the user has permissions for that record, e.g. `{ id: 123, firstName: "John", lastName: "Doe" }`
+
+Additional props are passed down to the child element. 
+
+```jsx
+import { IfCanAccess } from '@react-admin/ra-rbac';
+import { Toolbar, DeleteButton, EditButton, ShowButton } from 'react-admin';
+
+const RecordToolbar = () => (
+    <Toolbar>
+        <IfCanAccess action="edit">
+            <EditButton />
+        </IfCanAccess>
+        <IfCanAccess action="show">
+            <ShowButton />
+        </IfCanAccess>
+        <IfCanAccess action="delete">
+            <DeleteButton />
+        </IfCanAccess>
+    </Toolbar>
+);
+```

docs/Reference.md

@@ -65,6 +65,7 @@ title: "Reference"
 * [`<FormDataConsumer>`](./Inputs.md#linking-two-inputs)
 * [`<FormTab>`](./TabbedForm.md)
 * [`<FunctionField>`](./FunctionField.md)
+* [`<IfCanAccess>`](./IfCanAccess.md)<img class="icon" src="./img/premium.svg" />
 * [`<ImageField>`](./ImageField.md)
 * [`<ImageInput>`](./ImageInput.md)
 * [`<ImageInputPreview>`](./ImageInput.md#imageinput)
@@ -142,7 +143,7 @@ title: "Reference"
 * `<TopToolbar>`
 * [`<UrlField>`](./UrlField.md)
 * [`<UserMenu>`](./Theming.md#usermenu-customization)
-* [`<WithPermissions>`](./WithPermissions.md)<img class="icon" src="./img/premium.svg" />
+* [`<WithPermissions>`](./WithPermissions.md)
 * [`<WithRecord>`](./WithRecord.md)
 * [`<WizardForm>`](https://marmelab.com/ra-enterprise/modules/ra-form-layout#wizardform)<img class="icon" src="./img/premium.svg" />
 * [`useAppLocationState`](https://marmelab.com/ra-enterprise/modules/ra-navigation#useapplocationstate-retrieve-and-define-app-location)<img class="icon" src="./img/premium.svg" />

docs/WithPermissions.md

@@ -5,29 +5,26 @@ title: "WithPermissions"
 
 # `<WithPermissions>`
 
-This component, part of [the ra-rbac module](https://marmelab.com/ra-rbac)<img class="icon" src="./img/premium.svg" />, relies on the `authProvider` to render its child only if the user has the right permissions. It accepts the following props:
-
-- `action` (string, required): the action to check, e.g. 'read', 'list', 'export', 'delete', etc.
-- `resource` (string, optional): the resource to check, e.g. 'users', 'comments', 'posts', etc. Defaults to the current resource.
-- `record` (object, optional): the record to check. If passed, the child only renders if the user has permissions for that record, e.g. `{ id: 123, firstName: "John", lastName: "Doe" }`
-
-Additional props are passed down to the child element. 
+The `<WithPermissions>` component calls `useAuthenticated()` and `useGetPermissions()` hooks, which relies on the `authProvider.getPermissions()` to retrieve the user's permissions, and injects `permissions` to its child component. Use it as an alternative to the `usePermissions()` hook when you can’t use a hook, e.g. inside a <Route element> commponent:
 
 ```jsx
-import { WithPermissions } from '@react-admin/ra-rbac';
-import { Toolbar, DeleteButton, EditButton, ShowButton } from 'react-admin';
+import { Admin, CustomRoutes, WithPermissions } from "react-admin";
+import { Route } from "react-router";
 
-const RecordToolbar = () => (
-    <Toolbar>
-        <WithPermissions action="edit">
-            <EditButton />
-        </WithPermissions>
-        <WithPermissions action="show">
-            <ShowButton />
-        </WithPermissions>
-        <WithPermissions action="delete">
-            <DeleteButton />
-        </WithPermissions>
-    </Toolbar>
+const App = () => (
+    <Admin authProvider={authProvider}>
+        <CustomRoutes>
+            <Route
+                path="/foo"
+                element={
+                    <WithPermissions
+                        authParams={{ foo: "bar" }}
+                        component={Foo}
+                        {...fooProps}
+                    />
+                }
+            />
+        </CustomRoutes>
+    </Admin>
 );
 ```

docs/navigation.html

@@ -40,7 +40,8 @@
   <li {% if page.path == 'Permissions.md' %} class="active" {% endif %}><a class="nav-link" href="./Permissions.html">Permissions</a></li>
   <li {% if page.path == 'AuthRBAC.md' %} class="active" {% endif %}><a class="nav-link" href="./AuthRBAC.html">RBAC<img class="premium" src="./img/premium.svg" /></a></li>
   <li {% if page.path == 'Authenticated.md' %} class="active" {% endif %}><a class="nav-link" href="./Authenticated.html"><code>&lt;Authenticated&gt;</code></a></li>
-  <li {% if page.path == 'WithPermissions.md' %} class="active" {% endif %}><a class="nav-link" href="./WithPermissions.html"><code>&lt;WithPermissions&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
+  <li {% if page.path == 'IfCanAccess.md' %} class="active" {% endif %}><a class="nav-link" href="./IfCanAccess.html"><code>&lt;IfCanAccess&gt;</code><img class="premium" src="./img/premium.svg" /></a></li>
+  <li {% if page.path == 'WithPermissions.md' %} class="active" {% endif %}><a class="nav-link" href="./WithPermissions.html"><code>&lt;WithPermissions&gt;</code></a></li>
   <li {% if page.path == 'useAuthProvider.md' %} class="active" {% endif %}><a class="nav-link" href="./useAuthProvider.html"><code>useAuthProvider</code></a></li>
   <li {% if page.path == 'useAuthenticated.md' %} class="active" {% endif %}><a class="nav-link" href="./useAuthenticated.html"><code>useAuthenticated</code></a></li>
   <li {% if page.path == 'useAuthState.md' %} class="active" {% endif %}><a class="nav-link" href="./useAuthState.html"><code>useAuthState</code></a></li>

packages/ra-core/src/auth/WithPermissions.tsx

@@ -38,24 +38,24 @@ const isEmptyChildren = children => Children.count(children) === 0;
  * requires it.
  *
  * @example
- *     import { WithPermissions } from 'react-admin';
+ *     import { Admin, CustomRoutes, WithPermissions } from 'react-admin';
  *
  *     const Foo = ({ permissions }) => (
  *         {permissions === 'admin' ? <p>Sensitive data</p> : null}
  *         <p>Not sensitive data</p>
  *     );
  *
  *     const customRoutes = [
- *         <Route path="/foo" render={() =>
+ *         <Route path="/foo" element={
  *             <WithPermissions
  *                  authParams={{ foo: 'bar' }}
- *                  render={({ permissions, ...props }) => <Foo permissions={permissions} {...props} />}
+ *                  component={({ permissions, ...props }) => <Foo permissions={permissions} {...props} />}
  *              />
  *         } />
  *     ];
  *     const App = () => (
- *         <Admin customRoutes={customRoutes}>
- *             ...
+ *         <Admin>
+ *             <CustomRoutes>{customRoutes}</CustomRoutes>
  *         </Admin>
  *     );
  */