From 5fd8de576f3a7b67ccaabf23d5cb51e2bcef21c6 Mon Sep 17 00:00:00 2001
From: Pascal Vaccaro <pascal.vaccaro@gmail.com>
Date: Wed, 4 May 2022 14:58:45 +0200
Subject: [PATCH] Fix the example code for registering hooks

Code was broken several places:
- you need to return an object with the original arguments, not an array
- you cannot always write JSX directly in a .js file (according to your configuration)
---
 .../plugin-api-reference/admin-panel.md       | 45 ++++++++++---------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/docs/developer-docs/latest/developer-resources/plugin-api-reference/admin-panel.md b/docs/developer-docs/latest/developer-resources/plugin-api-reference/admin-panel.md
index 33ccd95a04..32dc6e250c 100644
--- a/docs/developer-docs/latest/developer-resources/plugin-api-reference/admin-panel.md
+++ b/docs/developer-docs/latest/developer-resources/plugin-api-reference/admin-panel.md
@@ -617,37 +617,42 @@ export default {
 
 #### Predefined hook
 
-Strapi includes a predefined `cm/inject-column-in-table` hook that can be used to add or mutate a column of the List View of the [Content Manager](/user-docs/latest/content-manager/introduction-to-content-manager.md).
+Strapi includes a predefined `Admin/CM/pages/ListView/inject-column-in-table` hook that can be used to add or mutate a column of the List View of the [Content Manager](/user-docs/latest/content-manager/introduction-to-content-manager.md).
 
-::: details Example: 'cm/inject-column-in-table' hook, as used by the Internationalization plugin to add the 'Content available in' column
+::: details Example: 'Admin/CM/pages/ListView/inject-column-in-table' hook, as used by the Internationalization plugin to add the 'Content available in' column
 
 ```jsx
 // ./plugins/my-plugin/admin/src/index.js
+import get from 'lodash/get';
+import cellFormatter from './components/cellFormatter';
 
 export default {
   bootstrap(app) {
-	  app.registerHook('cm/inject-column-in-table', ({ displayedHeaders, layout }) => {
-			const isFieldLocalized = get(layout, 'contentType.pluginOptions.i18n.localized', false);
+	  app.registerHook('Admin/CM/pages/ListView/inject-column-in-table', ({ displayedHeaders, layout }) => {
+      const isFieldLocalized = get(layout, 'contentType.pluginOptions.i18n.localized', false);
 
 			if (!isFieldLocalized) {
-			  return displayedHeaders;
+			  return { displayedHeaders, layout };
 			}
 
-			return [
-			  ...displayedHeaders,
-			  {
-			    key: '__locale_key__', // Needed for the table
-			    fieldSchema: { type: 'string' }, // Schema of the attribute
-			    metadatas: {
-						label: 'Content available in', // Label of the header,
-						sortable: false|true // Define in the column is sortable
-					}, // Metadatas for the label
-					// Name of the key in the data we will display
-			    name: 'locales',
-					// Custom renderer
-			    cellFormatter: props => <div>Object.keys(props).map(key => <p key={key}>key</p>)</div>,
-			  },
-			];
+			return {
+        layout,
+        displayedHeaders: [
+          ...displayedHeaders,
+          {
+            key: '__locale_key__', // Needed for the table
+            fieldSchema: { type: 'string' }, // Schema of the attribute
+            metadatas: {
+              label: 'Content available in', // Label of the header,
+              sortable: true|false // Define if the column is sortable
+            }, // Metadatas for the label
+            // Name of the key in the data we will display
+            name: 'locales',
+            // Custom renderer: props => Object.keys(props).map(key => <p key={key}>key</p>)
+            cellFormatter,
+          },
+			  ]
+      };
     });
   },
 }