Merge pull request #10815 from marmelab/chore/update-tips

[chore] Sync tips from tips repository

Author: djhi

docs/assets/features.md_ignore

@@ -118,7 +118,7 @@ With your admin getting bigger, or if you have to manage many resources and/or s
 
 <video controls autoplay playsinline muted loop width="100%">
     <source
-        src="https://react-admin-ee.marmelab.com/assets/breadcumb-nested-resource.mp4"
+        src="https://react-admin-ee.marmelab.com/assets/ra-navigation/latest/breadcumb-nested-resource.webm"
         type="video/webm"
     />
     Your browser does not support the video tag.
@@ -177,6 +177,7 @@ Edition forms in react-admin have a built-in "Undo" feature, letting end users c
 `<Edit>` is designed to be a page component, passed to the edit prop of the `<Resource>` component. But you may want to let users edit a record in a dialiog without leaving the context of the list page. If so, you can use the `<EditDialog>` component. #form https://marmelab.com/react-admin/EditDialog.html
 
 <video controls autoplay playsinline muted loop>
+  <source src="https://react-admin-ee.marmelab.com/assets/edit-dialog.webm" type="video/webm">
   <source src="https://react-admin-ee.marmelab.com/assets/edit-dialog.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -186,6 +187,7 @@ Edition forms in react-admin have a built-in "Undo" feature, letting end users c
 If you want to let users edit a record from another page, use the `<EditInDialogButton>` component. #form https://marmelab.com/react-admin/EditInDialogButton.html
 
 <video controls autoplay playsinline muted loop>
+  <source src="https://react-admin-ee.marmelab.com/assets/ra-form-layout/latest/InDialogButtons.webm" type="video/webm">
   <source src="https://react-admin-ee.marmelab.com/assets/ra-form-layout/latest/InDialogButtons.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -215,6 +217,7 @@ Use `<ReferenceOneInput>` in an `<Edit>` or `<Create>` view to edit a record lin
 The `<Search>` component renders a global search input. It’s designed to be always accessible in the top `<AppBar>`. #ui https://marmelab.com/react-admin/Search.html
 
 <video controls autoplay playsinline muted loop>
+  <source src="https://react-admin-ee.marmelab.com/assets/ra-search-demo.webm" type="video/webm">
   <source src="https://react-admin-ee.marmelab.com/assets/ra-search-demo.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -231,9 +234,10 @@ The `<Configurable>` component makes another component configurable by the end u
 
 ---
 
-In the case you want keep track of user actions, and get an overview of the activity of your admin, you can display event lists and audit logs with `<TimeLine>`, `<RecordTimeline>` and with `<EventList>` components. #activitylog #timeline #eventlog https://marmelab.com/ra-enterprise/modules/ra-audit-log
+In the case you want keep track of user actions, and get an overview of the activity of your admin, you can display event lists and audit logs with `<TimeLine>`, `<RecordTimeline>` and with `<EventList>` components. #activitylog #timeline #eventlog https://react-admin-ee.marmelab.com/ra-audit-log
 
 <video controls autoplay playsinline muted loop>
+  <source src="https://react-admin-ee.marmelab.com/assets/ra-audit-log/latest/ra-audit-log-event-list.webm" type="video/webm">
   <source src="https://react-admin-ee.marmelab.com/assets/ra-audit-log/latest/ra-audit-log-event-list.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -261,6 +265,7 @@ With your admin getting bigger, the default sidebar menu might become too crowde
 If your app needs to display **events**, **appointments**, **time intervals**, or any other kind of time-based data, you can use the `<Calendar>` component. #ui https://marmelab.com/react-admin/Calendar.html
 
 <video controls autoplay playsinline muted loop>
+  <source src="https://react-admin-ee.marmelab.com/assets/ra-calendar.webm" type="video/webm">
   <source src="https://react-admin-ee.marmelab.com/assets/ra-calendar.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>
@@ -276,9 +281,10 @@ If your app needs to display **events**, **appointments**, **time intervals**, o
 
 ---
 
-The `<SearchWithResult>` component renders a search input and the search results directly below the input. It's ideal for dashboards or menu panels. #ui #search https://marmelab.com/ra-enterprise/modules/ra-search#searchwithresult
+The `<SearchWithResult>` component renders a search input and the search results directly below the input. It's ideal for dashboards or menu panels. #ui #search https://react-admin-ee.marmelab.com/ra-search#searchwithresult
 
 <video controls autoplay playsinline muted loop>
+  <source src="https://react-admin-ee.marmelab.com/assets/ra-search-with-result-overview.webm" type="video/webm">
   <source src="https://react-admin-ee.marmelab.com/assets/ra-search-with-result-overview.mp4" type="video/mp4">
   Your browser does not support the video tag.
 </video>

docs/assets/tips.md_ignore

@@ -1226,6 +1226,34 @@ export const PostList = () => (
 
 ---
 
+The `canAccess` helper function allows you to check if the current user has the permissions to execute an action. You can use it to disable desired links on a menu for instance. #Role-Based-Access-Control #RBAC https://react-admin-ee.marmelab.com/ra-rbac#canaccess 
+
+```tsx
+import { usePermissions, Menu } from "react-admin";
+import { canAccess } from "@react-admin/ra-rbac";
+
+const MyMenu = () => {
+  const { permissions } = usePermissions();
+  return (
+    <Menu>
+      <Menu.DashboardItem />
+      <Menu.Item
+        to="/categories"
+        primaryText="Categories"
+        disabled={
+          !canAccess({
+            permissions,
+            resource: "categories",
+          })
+        }
+      />
+    </Menu>
+  );
+};
+```
+
+---
+
 If you render more than one `<DatagridConfigurable>` on the same page, you must pass a unique preferenceKey prop to each one. Do not forget to link their `<SelectColumnsButton>` components by giving them the same preferenceKey. #datagrid https://marmelab.com/react-admin/Datagrid.html#configurable
 
 {% raw %}
@@ -2000,18 +2028,41 @@ You can add custom CSS classes to any column or cell in `DatagridAG` or `Datagri
 {% raw %}
 ```tsx
 const columnDefs = [
-  { field: 'static', cellClass: 'my-class' },
-  { field: 'staticArray', cellClass: ['my-class1','my-class2'] },
-  { field: 'function', cellClass: params => params.value === 'something' ? 'my-class-1' : 'my-class-2' },
-  { field: 'functionArray', cellClass: params => ['my-class-1','my-class-2'] },
+  // return same class for each row
+  {
+    field: 'static',
+    cellClass: 'my-class'
+  },
+  // return same array of classes for each row
+  {
+    field: 'staticArray',
+    cellClass: ['my-class1','my-class2'],
+  },
+  // return class based on function
+  {
+    field: 'function',
+    cellClass: params => {
+      return params.value === 'something' ? 'my-class-1' : 'my-class-2';
+    },
+  },
+  // return array of classes based on function
+  {
+    field: 'functionArray',
+    cellClass: params => ['my-class-1','my-class-2'],
+  },
+  // return array of classes based on many functions with `cellClassRules`
   {
     field: 'functionRules',
     cellClassRules: {
+      // apply green to 2008
       'rag-green-outer': params => params.value === 2008,
+      // apply blue to 2004
       'rag-blue-outer': params => params.value === 2004,
+      // apply red to 2000
       'rag-red-outer': params => params.value === 2000,
     }
-  },
+  }
+  // return array of classes based on many functions with `cellClassRules`
   {
     field: 'simplifiedFunctionRules',
     cellClassRules: {
@@ -2024,4 +2075,4 @@ const columnDefs = [
 ```
 {% endraw %}
 
-https://www.ag-grid.com/react-data-grid/cell-styles
+https://www.ag-grid.com/react-data-grid/cell-styles