Twig Components (#2739)

* Twig Components

* Rebuild

* Added `admin-ui` prefix

* Review suggestions

* Make Symfony Profiler more visible

* Updated screenshot

* Applied suggestions from code review

Co-authored-by: Adrien Dupuis <[email protected]>

* Manual fixes

* Fixed broken link

* Fixed syntac typo

* Marked Dashboard as Experience feature and mentioned Twig Components (#2741)

* Marked Dashboard as Experience feature and mentioned Twig Components

* Update docs/administration/dashboard/customize_dashboard.md

Co-authored-by: Adrien Dupuis <[email protected]>

---------

Co-authored-by: Adrien Dupuis <[email protected]>

* Removed mentions of Storefront Twig Component groups

---------

Co-authored-by: Adrien Dupuis <[email protected]>

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.admin_ui.component, group: 'content-edit-sections' }
+            - { name: ibexa.twig.component, group: 'admin-ui-content-edit-sections' }

code_samples/back_office/dashboard/article_tab/config/custom_services.yaml

@@ -10,4 +10,4 @@ services:
         arguments:
             $groupIdentifier: 'custom_group'
         tags:
-            - { name: ibexa.admin_ui.component, group: 'dashboard-blocks' }
+            - { name: ibexa.twig.component, group: 'admin-ui-dashboard-blocks' }

code_samples/back_office/search/config/append_to_services.yaml

@@ -25,7 +25,7 @@ services:
             $template: '@@ibexadesign/ui/global_search_autocomplete_product_template.html.twig'
             $groupIdentifier: 'global-search-autocomplete-product'
         tags:
-            - { name: ibexa.admin_ui.component, group: global-search-autocomplete-templates }
+            - { name: ibexa.twig.component, group: global-search-autocomplete-templates }
 
     App\Search\SortingDefinition\Provider\SectionNameSortingDefinitionProvider:
         tags:

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.admin_ui.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,85 +2,118 @@
 description: Back office components allow you to inject any custom widgets into selected places of the user interface.
 ---
 
-# Custom components
-
-The back office has designated places where you can use your own components.
-
-Components enable you to inject widgets (for example, **My dashboard** blocks) and HTML code (for example, a tag for loading JS or CSS files).
-A component is any class that implements the `Renderable` interface.
-It must be tagged as a service in `config/services.yaml`:
-
-``` yaml
-App\Component\MyNewComponent:
-    tags:
-        - { name: ibexa.admin_ui.component, group: content-edit-form-before }
-```
-
-`group` indicates where the widget is displayed. The available groups are:
-
-- [`stylesheet-head`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/layout.html.twig#L101)
-- [`script-head`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/layout.html.twig#L102)
-- [`stylesheet-body`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/layout.html.twig#L210)
-- [`script-body`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/layout.html.twig#L211)
-- [`content-edit-form-before`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/user/edit.html.twig#L37)
-- [`content-edit-form-after`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/user/edit.html.twig#L47)
-- [`content-create-form-before`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/user/create.html.twig#L37)
-- [`content-create-form-after`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/user/create.html.twig#L45)
-- [`dashboard-blocks`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/dashboard/dashboard.html.twig#L30)
-- [`dashboard-all-tab-groups`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/dashboard/block/all.html.twig#L6)
-- [`dashboard-my-tab-groups`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/dashboard/block/me.html.twig#L6)
-- [`content-type-tab-groups`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/content_type/index.html.twig#L37)
-- `calendar-widget-before`
-- [`login-form-before`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/account/login/index.html.twig#L7)
-- [`login-form-after`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/account/login/index.html.twig#L70)
-- [`global-search`](https://github.com/ibexa/admin-ui/blob/main/src/bundle/Resources/views/themes/admin/ui/layout.html.twig#L129)
-
-## Base component classes
-
-If you only need to inject a short element (for example, a Twig template or a CSS link) without writing a class, you can make use of the following base classes:
-
-- `TwigComponent` renders a Twig template.
-- `LinkComponent` renders the HTML `<link>` tag.
-- `ScriptComponent` renders the HTML `<script>` tag.
-
-In this case, all you have to do is add a service definition (with proper parameters), for example:
-
-``` yaml
-appbundle.components.my_twig_component:
-    parent: Ibexa\AdminUi\Component\TwigComponent
-    autowire: true
-    autoconfigure: false
-    arguments:
-        $template: path/to/file.html.twig
-        $parameters:
-            first_param: first_value
-            second_param: second_value
-    tags:
-        - { name: ibexa.admin_ui.component, group: dashboard-blocks }
-```
-
-This renders the `path/to/file.html.twig` template with `first_param` and `second_param` as parameters.
-
-With `LinkComponent` and `ScriptComponent` you provide `$href` and `$src` as arguments:
-
-``` yaml
-app.components.my_link_component:
-    parent: Ibexa\AdminUi\Component\LinkComponent
-    autowire: true
-    autoconfigure: false
-    arguments:
-        $href: 'http://address.of/file.css'
-    tags:
-        - { name: ibexa.admin_ui.component, group: stylesheet-head }
-```
-
-``` yaml
-app.components.my_script_component:
-    parent: Ibexa\AdminUi\Component\ScriptComponent
-    autowire: true
-    autoconfigure: false
-    arguments:
-        $src: 'http://address.of/file.js'
-    tags:
-        - { name: ibexa.admin_ui.component, group: script-body }
-```
+# 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.
+
+The available groups for the back office are:
+
+## Admin UI
+
+| Group name | Template file |
+|---|---|
+|`admin-ui-login-form-after` | `vendor/ibexa/admin-ui/src/bundle/Resources/views/themes/admin/account/login/index.html.twig` |
+|`admin-ui-login-form-before` | `vendor/ibexa/admin-ui/src/bundle/Resources/views/themes/admin/account/login/index.html.twig` |
+|`admin-ui-content-create-form-before`| <ul><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/create/create.html.twig`</li><li> `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/on_the_fly/create_on_the_fly.html.twig`</li><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/user/create.html.twig` </li></ul>|
+|`admin-ui-content-create-form-after`|  <ul><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/create/create.html.twig`</li><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/on_the_fly/create_on_the_fly.html.twig`</li><li> `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/user/create.html.twig`</li></ul> |
+|`admin-ui-content-edit-form-after`| <ul><li> `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/edit/edit.html.twig` </li><li>  `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/on_the_fly/edit_on_the_fly.html.twig`</li><li> `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/user/edit.html.twig`</li></ul> |
+|`admin-ui-content-edit-form-before`| <ul><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/edit/edit.html.twig`</li><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/on_the_fly/edit_on_the_fly.html.twig`</li><li> `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/user/edit.html.twig`</li></ul>  |
+|`admin-ui-content-edit-sections`| <ul><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/edit/edit.html.twig`</li><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/on_the_fly/create_on_the_fly.html.twig`</li><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/on_the_fly/edit_on_the_fly.html.twig`</li></ul> |
+|`admin-ui-content-form-create-header-actions`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/create/create.html.twig` |
+|`admin-ui-content-form-edit-header-actions`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/edit/edit.html.twig` |
+|`admin-ui-content-tree-after`| `vendor/ibexa/admin-ui/src/bundle/Resources/views/themes/admin/content/location_view.html.twig` |
+|`admin-ui-content-tree-before`| `vendor/ibexaadmin-ui/src/bundle/Resources/views/themes/admin/content/location_view.html.twig` |
+|`admin-ui-content-type-edit-sections`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content_type/edit.html.twig` |
+|`admin-ui-content-type-tab-groups`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content_type/index.html.twig` |
+|`admin-ui-dashboard-all-tab-groups`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/dashboard/block/all.html.twig` |
+|`admin-ui-dashboard-blocks`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/dashboard/dashboard.html.twig` |
+|`admin-ui-dashboard-my-tab-groups`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/dashboard/block/me.html.twig` |
+|`admin-ui-distraction-free-mode-extras`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/form_fields.html.twig` |
+|`admin-ui-form-content-add-translation-body`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/content/modal/add_translation.html.twig` |
+|`admin-ui-global-search-autocomplete-templates`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/global_search.html.twig` |
+|`admin-ui-global-search`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout.html.twig` |
+|`admin-ui-header-user-menu-middle`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/menu/user.html.twig` |
+|`admin-ui-image-edit-actions-after`| <ul><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ezimage.html.twig` </li><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/field_type/edit/ezimageasset.html.twig` </li></ul>|
+|`admin-ui-layout-content-after`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout.html.twig` |
+|`admin-ui-link-manager-block`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/url_management/url_management.html.twig` |
+|`admin-ui-location-view-content-alerts`| `vendor/ibexa/admin-ui/src/bundle/Resources/views/themes/admin/content/location_view.html.twig` |
+|`admin-ui-location-view-tab-groups`| `vendor/ibexa/admin-ui/src/bundle/Resources/views/themes/admin/content/location_view.html.twig` |
+|`admin-ui-location-view-tabs-after`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/tab/location_view.html.twig` |
+|`admin-ui-script-body`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout.html.twig` |
+|`admin-ui-script-head`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout.html.twig` |
+|`admin-ui-stylesheet-body`| <ul><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout_error.html.twig`</li><li>`vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout.html.twig`</li> |
+|`admin-ui-stylesheet-head`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout.html.twig` |
+|`admin-ui-systeminfo-tab-groups`| `vendor/ibexa/system-info/src/bundle/Resources/views/themes/admin/system_info/info.html.twig` |
+|`admin-ui-user-menu`| `vendor/ibexa/admin-ui-ui/src/bundle/Resources/views/themes/admin/ui/layout.html.twig` |
+|`admin-ui-user-profile-blocks`| `vendor/ibexa/admin-ui/src/bundle/Resources/views/themes/admin/account/profile/view.html.twig` |
+
+For more information, see [this example using few of those components](components.md#example).
+
+## Calendar
+
+| Group name | Template file |
+|---|---|
+|`admin-ui-calendar-widget-before`| `vendor/ibexa/calendar/src/bundle/Resources/views/themes/admin/calendar/view.html.twig` |
+
+## Site Context
+
+| Group name | Template file |
+|---|---|
+|`admin-ui-content-tree-before`| `vendor/ibexa/site-context/src/bundle/Resources/views/themes/admin/content/fullscreen.html.twig` |
+|`admin-ui-content-tree-after`| `vendor/ibexa/site-context/src/bundle/Resources/views/themes/admin/content/fullscreen.html.twig` |
+
+## Product Catalog
+
+| Group name | Template file |
+|---|---|
+|`admin-ui-attribute-definition-block`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/attribute_definition/view.html.twig` |
+|`admin-ui-attribute-definition-options-block`| `pvendor/ibexa/roduct-catalog/src/bundle/Resources/views/themes/admin/product_catalog/attribute_definition/tab/details.html.twig` |
+|`admin-ui-attribute-group-block`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/attribute_group/view.html.twig` |
+|`admin-ui-catalog-block`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/catalog/view.html.twig` |
+|`admin-ui-customer-group-block`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/customer_group/view.html.twig` |
+|`admin-ui-product-create-form-header-actions`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/product/create.html.twig` |
+|`admin-ui-product-create-form-after`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/product/create.html.twig` |
+|`admin-ui-product-edit-form-header-actions`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/product/edit.html.twig` |
+|`admin-ui-product-edit-form-after`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/product/edit.html.twig` |
+|`admin-ui-product-block`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/product/view.html.twig` |
+|`admin-ui-product-type-block`| `vendor/ibexa/product-catalog/src/bundle/Resources/views/themes/admin/product_catalog/product_type/view.html.twig` |
+
+## Taxonomy
+
+| Group name | Template file |
+|---|---|
+|`admin-ui-location-view-tab-groups`| `vendor/ibexa/taxonomy/src/bundle/Resources/views/themes/admin/ibexa/taxonomy/taxonomy_entry/show.html.twig` |
+
+## Page Builder [[% include 'snippets/experience_badge.md' %]]
+
+| Group name | Template file |
+|---|---|
+|`admin-ui-infobar-options-before`| `vendor/ibexa/page-builder/src/bundle/Resources/views/page_builder/infobar/base.html.twig` |
+
+## Order Management [[% include 'snippets/commerce_badge.md' %]]
+
+| Group name | Template file |
+|---|---|
+|`admin-ui-order-details-summary-stats`| `vendor/ibexa/order-management/src/bundle/Resources/views/themes/admin/order_management/order/details_summary.html.twig` |
+|`admin-ui-order-details-summary-grid`| `vendor/ibexa/order-management/src/bundle/Resources/views/themes/admin/order_management/order/details_summary.html.twig` |
+
+## Payments [[% include 'snippets/commerce_badge.md' %]]
+
+| Group name | Template file |
+|---|---|
+|`admin-ui-payment-method-tabs`| `vendor/ibexa/payment/src/bundle/Resources/views/themes/admin/payment_method/view.html.twig` |
+
+## Shipping [[% include 'snippets/commerce_badge.md' %]]
+
+| Group name | Template file |
+|---|---|
+|`admin-ui-shipment-summary-grid`| `vendor/ibexa/shipping/src/bundle/Resources/views/themes/admin/shipment/tab/summary.html.twig` |
+|`admin-ui-shipping-method-block`| `vendor/ibexa/shipping/src/bundle/Resources/views/themes/admin/shipping/shipping_method/view.html.twig` |
+
+## AI Actions [[% include 'snippets/lts-update_badge.md' %]]
+
+| Group name | Template file |
+|---|---|
+|`admin-ui-action-configuration-tabs`| `vendor/ibexa/connector-ai/src/bundle/Resources/views/themes/admin/connector_ai/action_configuration/view.html.twig` |
+

docs/administration/back_office/back_office_tabs/back_office_tabs.md

@@ -71,7 +71,8 @@ To create a tab group, register it as a service:
 [[= include_file('code_samples/back_office/dashboard/article_tab/config/custom_services.yaml', 0, 1) =]][[= include_file('code_samples/back_office/dashboard/article_tab/config/custom_services.yaml', 7, 13) =]]
 ```
 
-Tag the group with `ibexa.admin_ui.component`.
+Tag the group with `ibexa.twig.component`.
 `group` indicates where the group is rendered.
 
-For a list of possible rendering places, see [Injecting custom components](custom_components.md).
+To learn more about this mechanism, see [Twig Components](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/administration/dashboard/configure_default_dashboard.md

@@ -1,6 +1,7 @@
 ---
 title: Default dashboard configuration
 description: Configure default dashboard.
+edition: experience
 ---
 
 # Configure default dashboard
@@ -83,4 +84,4 @@ ibexa:
                 container_content_type_identifier: user_dashboard_container
 ```
 
-The custom content type should be a container and needs to have a field type with `name` identifier.
+The custom content type should be a container and needs to have a field type with `name` identifier.