Manual fixes

Author: mnocon

code_samples/back_office/components/twig_components.yaml

@@ -0,0 +1,41 @@
+ibexa_twig_components:
+    admin-ui-user-menu:
+        custom-html-component:
+            type: html
+            arguments:
+                content: '<b>Hello world!</b>'
+        custom-template-component:
+            type: template
+            arguments:
+                template: '@ibexadesign/ui/component/user_thumbnail/user_thumbnail.html.twig'
+                parameters:
+                    user_content:
+                        name: "Thumbnail"
+                        thumbnail:
+                            resource: https://placecats.com/100/100
+        custom-controller-component:
+            type: controller
+            arguments:
+                controller: '\App\Controller\MyController::requestAction'
+                parameters:
+                    parameter1: 'custom'
+                    parameter2: true
+    admin-ui-stylesheet-head:
+        custom-link-component:
+            type: stylesheet
+            arguments:
+                href: 'https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&amp;display=fallback'
+                rel: stylesheet
+                crossorigin: anonymous
+                integrity: sha384-LN/mLhO/GN6Ge8ZPvI7uRsZpiXmtSkep+aFlJcHa8by4TvA34o1am9sa88eUzKTD
+                type: text/css
+    admin-ui-script-head:
+        custom-script-component:
+            type: script
+            arguments:
+                src: 'https://doc.ibexa.co/en/latest/js/custom.js'
+                crossorigin: anonymous
+                defer: false
+                async: true
+                integrity: sha384-Ewi2bBDtPbbu4/+fs8sIbBJ3zVl0LDOSznfhFR/JBK+SzggdRdX8XQKauWmI9HH2
+                type: text/javascript

code_samples/back_office/content_type/config/custom_services.yaml

@@ -4,4 +4,4 @@ services:
         arguments:
             $template: '@@ibexadesign/content_type/edit/custom_tab.html.twig'
         tags:
-            - { name: ibexa.twig.component, group: 'content-edit-sections' }
+            - { name: ibexa.twig.component, group: 'admin-ui-content-edit-sections' }

code_samples/user_management/oauth_google/config/custom_services.yaml

@@ -10,4 +10,4 @@ services:
         arguments:
             $template: '@@ibexadesign/account/login/oauth2_login.html.twig'
         tags:
-            - { name: ibexa.twig.component, group: login-form-after }
+            - { name: ibexa.twig.component, group: admin-ui-login-form-after }

docs/administration/back_office/back_office_elements/custom_components.md

@@ -2,7 +2,7 @@
 description: Back office components allow you to inject any custom widgets into selected places of the user interface.
 ---
 
-# Customizing the back office
+# Customizing the back office with Twig Components
 
 You can customize many of the back office views by using [Twig components](components.md).
 This allows you to inject your own custom logic and extend the templates.

docs/administration/back_office/back_office_tabs/back_office_tabs.md

@@ -75,4 +75,4 @@ Tag the group with `ibexa.twig.component`.
 `group` indicates where the group is rendered.
 
 To learn more about this mechanism, see [Twig Components](components.md).
-And for the groups available in the back office, see [Back office elements > Custom components](custom_components.md).
+And for the groups available in the back office, see [custom components in the back office](custom_components.md).

docs/administration/back_office/customize_search_suggestion.md

@@ -135,7 +135,7 @@ The example template for this wrapping node is stored in `templates/themes/admin
 - At Twig level, it includes the item template, replaces Twig variables with the strings used by the JS renderer,
   and passes it to the [`escape` filter](https://twig.symfony.com/doc/3.x/filters/escape.html) with the HTML attribute strategy.
 
-To be present, this wrapping node template must be added to the `global-search-autocomplete-templates` group of tabs components:
+To be present, this wrapping node template must be added to the `admin-ui-global-search-autocomplete-templates` group of tabs components:
 
 ``` yaml
 services:

docs/templating/components.md

@@ -66,53 +66,10 @@ You can use an unique group name when creating a Twig Component to create your o
 
 ## Example
 
-In the example below
+The following example shows how you can use each of the built-in components to customize the back office:
 
-- A "Hello world!" is added to the user menu.
-- The current user thumbnail is a random cat.
-- …
 ``` yaml
-ibexa_twig_components:
-    admin-ui-user-menu:
-        custom-html-component:
-            type: html
-            arguments:
-                content: '<b>Hello world!</b>'
-        custom-template-component:
-            type: template
-            arguments:
-                template: '@ibexadesign/ui/component/user_thumbnail/user_thumbnail.html.twig'
-                parameters:
-                    user_content:
-                        name: "Thumbnail"
-                        thumbnail:
-                            resource: https://placecats.com/100/100
-        custom-controller-component:
-            type: controller
-            arguments:
-                controller: '\App\Controller\MyController::requestAction'
-                parameters:
-                    parameter1: 'custom'
-                    parameter2: true
-    admin-ui-stylesheet-head:
-        custom-link-component:
-            type: stylesheet
-            arguments:
-                href: 'https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&amp;display=fallback'
-                rel: stylesheet
-                crossorigin: anonymous
-                integrity: sha384-LN/mLhO/GN6Ge8ZPvI7uRsZpiXmtSkep+aFlJcHa8by4TvA34o1am9sa88eUzKTD
-                type: text/css
-    admin-ui-script-head:
-        custom-script-component:
-            type: script
-            arguments:
-                src: 'https://doc.ibexa.co/en/latest/js/custom.js'
-                crossorigin: anonymous
-                defer: false
-                async: true
-                integrity: sha384-Ewi2bBDtPbbu4/+fs8sIbBJ3zVl0LDOSznfhFR/JBK+SzggdRdX8XQKauWmI9HH2
-                type: text/javascript
+[[= include_file('code_samples/back_office/components/twig_components.yaml') =]]
 ```
 
 ## Render Twig Components

docs/users/oauth_client.md

@@ -110,7 +110,7 @@ Create the following template file in `templates/themes/admin/account/login/oaut
 
 For more information about the OAuth connection URL Twig functions, see [`ibexa_oauth2_connect_path`](url_twig_functions.md#ibexa_oauth2_connect_path) and [`ibexa_oauth2_connect_url`](url_twig_functions.md#ibexa_oauth2_connect_url).
 
-Finally, add the template to the login form by using the `login-form-after` [component](custom_components.md):
+Finally, add the template to the login form by using the `admin-ui-login-form-after` [Twig component group](components.md):
 
 ``` yaml
 services: