Customize icons & subheaders on all CRUD pages (#212)

![Capture d’écran du 2025-01-08 17-10-20](https://github.com/user-attachments/assets/519773f9-688f-4757-953a-909021f5d325) ![Capture d’écran du 2025-01-08 17-01-59](https://github.com/user-attachments/assets/6f596c9d-42fa-4640-ae0a-eabc27b74f37) ![image](https://github.com/user-attachments/assets/b76b1dd1-34a2-478b-9631-3f0b382ffaad)
Sylius · Jan 8, 2025 · 0663b87 · 0663b87
2 parents 2379fe9 + ee2ae8a
commit 0663b87
Show file tree

Hide file tree

Showing 18 changed files with 138 additions and 65 deletions.
diff --git a/config/packages/sylius_twig_hooks.yaml b/config/packages/sylius_twig_hooks.yaml
@@ -19,9 +19,27 @@ sylius_twig_hooks:
 
         'sylius_admin.book.show.content.header.title_block':
             title:
-                template: '@SyliusBootstrapAdminUi/shared/crud/common/content/header/title_block/title.html.twig'
+                template: '@SyliusBootstrapAdminUi/shared/crud/show/content/header/title_block/title.html.twig'
                 configuration:
                     title: '@=_context.book.getTitle()'
+                    icon: 'tabler:book'
+                    subheader: '@=_context.book.getAuthorName()'
+
+        'sylius_admin.conference.create.content.header.title_block':
+            title:
+                template: '@SyliusBootstrapAdminUi/shared/crud/create/content/header/title_block/title.html.twig'
+                configuration:
+                    title: 'app.ui.new_conference'
+                    icon: 'tabler:plus'
+                    subheader: app.ui.managing_your_conferences
+
+        'sylius_admin.conference.update.content.header.title_block':
+            title:
+                template: '@SyliusBootstrapAdminUi/shared/crud/update/content/header/title_block/title.html.twig'
+                configuration:
+                    title: app.ui.edit_conference
+                    icon: 'tabler:pencil'
+                    subheader: app.ui.managing_your_conferences
 
         'sylius_admin.talk.create.content':
             form:

diff --git a/src/AdminUi/tests/Functional/.application/src/State/Provider/BookCollectionProvider.php b/src/AdminUi/tests/Functional/.application/src/State/Provider/BookCollectionProvider.php
@@ -23,7 +23,7 @@ class BookCollectionProvider implements ProviderInterface
     public function provide(Operation $operation, Context $context): array
     {
         return [
-            new BookResource('shinning', 'Shinning'),
+            new BookResource('the-shining', 'The Shining'),
             new BookResource('carrie', 'Carrie'),
         ];
     }

diff --git a/src/AdminUi/tests/Functional/.application/src/State/Provider/BookItemProvider.php b/src/AdminUi/tests/Functional/.application/src/State/Provider/BookItemProvider.php
@@ -22,6 +22,6 @@ class BookItemProvider implements ProviderInterface
 {
     public function provide(Operation $operation, Context $context): BookResource
     {
-        return new BookResource('shinning', 'Shinning');
+        return new BookResource('the shining', 'The Shining');
     }
 }
diff --git a/src/AdminUi/tests/Functional/TemplatesTest.php b/src/AdminUi/tests/Functional/TemplatesTest.php
@@ -40,7 +40,7 @@ public function testIndexTemplate(): void
         self::assertResponseIsSuccessful();
         self::assertSelectorTextContains('[data-test-title]', 'Books');
         self::assertSelectorTextContains('[data-test-description]', 'List of books');
-        self::assertSelectorTextContains('[data-test-book-name-shinning]', 'Shinning');
+        self::assertSelectorTextContains('[data-test-book-name-the-shining]', 'The Shining');
         self::assertSelectorTextContains('[data-test-book-name-carrie]', 'Carrie');
     }
 
@@ -53,7 +53,7 @@ public function testCreateTemplate(): void
 
     public function testUpdateTemplate(): void
     {
-        $this->client->request('GET', '/books/shinning/edit');
+        $this->client->request('GET', '/books/the-shining/edit');
 
         self::assertResponseIsSuccessful();
     }

diff --git a/src/BootstrapAdminUi/templates/shared/crud/create/content/header/title_block/title.html.twig b/src/BootstrapAdminUi/templates/shared/crud/create/content/header/title_block/title.html.twig
@@ -5,14 +5,18 @@
     {% set metadata = hookable_metadata.context.metadata %}
 
     {% set singular_name = hookable_metadata.configuration.resource_name|default(metadata.applicationName ~ '.ui.' ~ _context.metadata.name) %}
-    {% set header = hookable_metadata.configuration.header|default(null) %}
+    {% set header = hookable_metadata.configuration.title|default(hookable_metadata.configuration.header|default(null)) %}
 {% else %}
     {% set singular_name = hookable_metadata.configuration.resource_name %}
-    {% set header = hookable_metadata.configuration.header %}
+    {% set header = hookable_metadata.configuration.title|default(hookable_metadata.configuration.header) %}
 {% endif %}
 
+{% set icon = hookable_metadata.configuration.icon|default(null) %}
+{% set subheader = hookable_metadata.configuration.subheader|default(null) %}
+{% set test_attribute = hookable_metadata.configuration.sylius_test_html_attribute is defined ? sylius_test_html_attribute(hookable_metadata.configuration.sylius_test_html_attribute) : null %}
+
 <div class="col-12 col-md-6">
     <div class="d-md-flex gap-2 align-items-center">
-        {{ header.h1(header is not null ? header|trans : 'sylius.ui.new'|trans ~ ' ' ~ singular_name|trans) }}
+        {{ header.h1(header is not null ? header|trans : 'sylius.ui.new'|trans ~ ' ' ~ singular_name|trans, icon, subheader|trans) }}
     </div>
 </div>
diff --git a/src/BootstrapAdminUi/templates/shared/crud/index/content/header/title_block/title.html.twig b/src/BootstrapAdminUi/templates/shared/crud/index/content/header/title_block/title.html.twig
diff --git a/src/BootstrapAdminUi/templates/shared/crud/show/content/header/title_block/title.html.twig b/src/BootstrapAdminUi/templates/shared/crud/show/content/header/title_block/title.html.twig
@@ -5,14 +5,18 @@
     {% set metadata = hookable_metadata.context.metadata %}
 
     {% set singular_name = hookable_metadata.configuration.resource_name|default(metadata.applicationName ~ '.ui.' ~ _context.metadata.name) %}
-    {% set header = hookable_metadata.configuration.header|default(null) %}
+    {% set header = hookable_metadata.configuration.title|default(hookable_metadata.configuration.header|default(null)) %}
 {% else %}
     {% set singular_name = hookable_metadata.configuration.resource_name %}
-    {% set header = hookable_metadata.configuration.header %}
+    {% set header = hookable_metadata.configuration.title|default(hookable_metadata.configuration.header) %}
 {% endif %}
 
+{% set icon = hookable_metadata.configuration.icon|default(null) %}
+{% set subheader = hookable_metadata.configuration.subheader|default(null) %}
+{% set test_attribute = hookable_metadata.configuration.sylius_test_html_attribute is defined ? sylius_test_html_attribute(hookable_metadata.configuration.sylius_test_html_attribute) : null %}
+
 <div class="col-12 col-md-6">
     <div class="d-md-flex gap-2 align-items-center">
-        {{ header.h1(header is not null ? header|trans : 'sylius.ui.show'|trans ~ ' ' ~ singular_name|trans) }}
+        {{ header.h1(header is not null ? header|trans : 'sylius.ui.show'|trans ~ ' ' ~ singular_name|trans, icon, subheader|trans) }}
     </div>
 </div>
diff --git a/src/BootstrapAdminUi/templates/shared/crud/update/content/header/title_block/title.html.twig b/src/BootstrapAdminUi/templates/shared/crud/update/content/header/title_block/title.html.twig
@@ -5,14 +5,18 @@
     {% set metadata = hookable_metadata.context.metadata %}
 
     {% set singular_name = hookable_metadata.configuration.resource_name|default(metadata.applicationName ~ '.ui.' ~ _context.metadata.name) %}
-    {% set header = hookable_metadata.configuration.header|default(null) %}
+    {% set header = hookable_metadata.configuration.title|default(hookable_metadata.configuration.header|default(null)) %}
 {% else %}
     {% set singular_name = hookable_metadata.configuration.resource_name %}
-    {% set header = hookable_metadata.configuration.header %}
+    {% set header = hookable_metadata.configuration.title|default(hookable_metadata.configuration.header) %}
 {% endif %}
 
-<div class="col-12 col-md-6">
+{% set icon = hookable_metadata.configuration.icon|default(null) %}
+{% set subheader = hookable_metadata.configuration.subheader|default(null) %}
+{% set test_attribute = hookable_metadata.configuration.sylius_test_html_attribute is defined ? sylius_test_html_attribute(hookable_metadata.configuration.sylius_test_html_attribute) : null %}
+
+<div class="col-12 col-md-6" {{ test_attribute }}>
     <div class="d-md-flex gap-2 align-items-center">
-        {{ header.h1(header is not null ? header|trans : 'sylius.ui.edit'|trans ~ ' ' ~ singular_name|trans) }}
+        {{ header.h1(header is not null ? header|trans : 'sylius.ui.edit'|trans ~ ' ' ~ singular_name|trans, icon, subheader|trans) }}
     </div>
 </div>
diff --git a/src/BootstrapAdminUi/tests/Functional/.application/src/Grid/Provider/BookGridProvider.php b/src/BootstrapAdminUi/tests/Functional/.application/src/Grid/Provider/BookGridProvider.php
@@ -25,7 +25,7 @@ class BookGridProvider implements DataProviderInterface
     public function getData(Grid $grid, Parameters $parameters): Pagerfanta
     {
         return new Pagerfanta(new ArrayAdapter([
-            new BookResource('shinning', 'Shinning'),
+            new BookResource('the-shining', 'The Shining'),
             new BookResource('carrie', 'Carrie'),
         ]));
     }

diff --git a/src/BootstrapAdminUi/tests/Functional/.application/src/State/Provider/BookItemProvider.php b/src/BootstrapAdminUi/tests/Functional/.application/src/State/Provider/BookItemProvider.php
@@ -22,6 +22,6 @@ class BookItemProvider implements ProviderInterface
 {
     public function provide(Operation $operation, Context $context): BookResource
     {
-        return new BookResource('shinning', 'Shinning');
+        return new BookResource('the-shining', 'The Shining');
     }
 }
diff --git a/src/BootstrapAdminUi/tests/Functional/TemplatesTest.php b/src/BootstrapAdminUi/tests/Functional/TemplatesTest.php
@@ -31,7 +31,7 @@ public function testIndexTemplate(): void
 
         self::assertResponseIsSuccessful();
         self::assertSelectorTextContains('title', 'app.ui.books | Sylius');
-        self::assertSelectorTextContains('tr.item:first-child[data-test-resource-id]', 'Shinning');
+        self::assertSelectorTextContains('tr.item:first-child[data-test-resource-id]', 'The Shining');
         self::assertSelectorTextContains('tr.item:last-child[data-test-resource-id]', 'Carrie');
     }
 }
diff --git a/tests/Functional/BookTest.php b/tests/Functional/BookTest.php
@@ -36,7 +36,7 @@ protected function setUp(): void
     public function testShowingBook(): void
     {
         $book = BookFactory::new()
-            ->withTitle('Shinning')
+            ->withTitle('The Shining')
             ->withAuthorName('Stephen King')
             ->create()
         ;
@@ -46,7 +46,9 @@ public function testShowingBook(): void
         self::assertResponseIsSuccessful();
 
         // Validate Header
-        self::assertSelectorTextContains('[data-test-page-title]', 'Shinning');
+        self::assertSelectorTextContains('[data-test-page-title]', 'The Shining');
+        self::assertSelectorTextContains('[data-test-subheader]', 'Stephen King');
+        self::assertSelectorExists('[data-test-icon="tabler:book"]');
 
         // Validate page body
         self::assertSelectorTextContains('[data-test-author-name]', 'Stephen King');
@@ -55,7 +57,7 @@ public function testShowingBook(): void
     public function testBrowsingBooks(): void
     {
         BookFactory::new()
-            ->withTitle('Shinning')
+            ->withTitle('The Shining')
             ->withAuthorName('Stephen King')
             ->create()
         ;
@@ -89,7 +91,7 @@ public function testBrowsingBooks(): void
         self::assertSelectorExists('tr.item:first-child [data-bs-title=Edit]');
         self::assertSelectorExists('tr.item:first-child [data-bs-title=Delete]');
 
-        self::assertSelectorTextContains('tr.item:last-child', 'Shinning');
+        self::assertSelectorTextContains('tr.item:last-child', 'The Shining');
         self::assertSelectorTextContains('tr.item:last-child', 'Stephen King');
         self::assertSelectorExists('tr.item:last-child [data-bs-title=Show]');
         self::assertSelectorExists('tr.item:last-child [data-bs-title=Edit]');
@@ -99,7 +101,7 @@ public function testBrowsingBooks(): void
     public function testSortingBooks(): void
     {
         BookFactory::new()
-            ->withTitle('Shinning')
+            ->withTitle('The Shining')
             ->withAuthorName('Stephen King')
             ->create();
 
@@ -116,14 +118,14 @@ public function testSortingBooks(): void
         self::assertResponseIsSuccessful();
 
         // Validate it's sorted by title desc
-        self::assertSelectorTextContains('tr.item:first-child', 'Shinning');
+        self::assertSelectorTextContains('tr.item:first-child', 'The Shining');
         self::assertSelectorTextContains('tr.item:last-child', 'Carrie');
     }
 
     public function testFilteringBooks(): void
     {
         BookFactory::new()
-            ->withTitle('Shinning')
+            ->withTitle('The Shining')
             ->withAuthorName('Stephen King')
             ->create();
 
@@ -135,13 +137,13 @@ public function testFilteringBooks(): void
         $this->client->request('GET', '/admin/books');
 
         $this->client->submitForm(button: 'Filter', fieldValues: [
-            'criteria[search][value]' => 'Shinn',
+            'criteria[search][value]' => 'Shin',
         ], method: 'GET');
 
         self::assertResponseIsSuccessful();
 
         self::assertSelectorCount(1, 'tr.item');
-        self::assertSelectorTextContains('tr.item:first-child', 'Shinning');
+        self::assertSelectorTextContains('tr.item:first-child', 'The Shining');
     }
 
     public function testAddingBookContent(): void
@@ -159,7 +161,7 @@ public function testAddingBook(): void
         $this->client->request('GET', '/admin/books/new');
 
         $this->client->submitForm('Create', [
-            'sylius_resource[title]' => 'Shinning',
+            'sylius_resource[title]' => 'The Shining',
             'sylius_resource[authorName]' => 'Stephen King',
         ]);
 
@@ -171,9 +173,9 @@ public function testAddingBook(): void
         self::assertSelectorTextContains('[data-test-sylius-flash-message]', 'Book has been successfully created.');
 
         /** @var Proxy<Book> $book */
-        $book = BookFactory::find(['title' => 'Shinning']);
+        $book = BookFactory::find(['title' => 'The Shining']);
 
-        self::assertSame('Shinning', $book->getTitle());
+        self::assertSame('The Shining', $book->getTitle());
         self::assertSame('Stephen King', $book->getAuthorName());
     }
 
@@ -195,22 +197,22 @@ public function testValidationErrorsWhenAddingBook(): void
     public function testEditingBookContent(): void
     {
         $book = BookFactory::new()
-            ->withTitle('Shinning')
+            ->withTitle('The Shining')
             ->withAuthorName('Stephen King')
             ->create();
 
         $this->client->request('GET', sprintf('/admin/books/%s/edit', $book->getId()));
 
         self::assertResponseIsSuccessful();
 
-        self::assertInputValueSame('sylius_resource[title]', 'Shinning');
+        self::assertInputValueSame('sylius_resource[title]', 'The Shining');
         self::assertInputValueSame('sylius_resource[authorName]', 'Stephen King');
     }
 
     public function testEditingBook(): void
     {
         $book = BookFactory::new()
-            ->withTitle('Shinning')
+            ->withTitle('The Shining')
             ->withAuthorName('Stephen King')
             ->create();
 
@@ -238,7 +240,7 @@ public function testEditingBook(): void
     public function testValidationErrorsWhenEditingBook(): void
     {
         $book = BookFactory::new()
-            ->withTitle('Shinning')
+            ->withTitle('The Shining')
             ->withAuthorName('Stephen King')
             ->create();
 
@@ -258,7 +260,7 @@ public function testValidationErrorsWhenEditingBook(): void
     public function testRemovingBook(): void
     {
         BookFactory::new()
-            ->withTitle('Shinning')
+            ->withTitle('The Shining')
             ->withAuthorName('Stephen King')
             ->create();
 

diff --git a/tests/Functional/ConferenceTest.php b/tests/Functional/ConferenceTest.php
@@ -75,6 +75,16 @@ public function testBrowsingConferences(): void
         self::assertSelectorExists('tr.item:last-child [data-bs-title=Delete]');
     }
 
+    public function testAddingConferenceContent(): void
+    {
+        $this->client->request('GET', '/admin/conferences/new');
+
+        // Test header
+        self::assertSelectorTextContains('[data-test-page-title]', 'New conference');
+        self::assertSelectorExists('[data-test-icon="tabler:plus"]');
+        self::assertSelectorTextContains('[data-test-subheader]', 'Managing your conferences');
+    }
+
     public function testAddingConference(): void
     {
         $this->client->request('GET', '/admin/conferences/new');
@@ -99,6 +109,20 @@ public function testAddingConference(): void
         self::assertSame('2024-11-13 18:00', $conference->getEndsAt()?->format('Y-m-d H:i'));
     }
 
+    public function testEditingConferenceContent(): void
+    {
+        $conference = ConferenceFactory::new()
+            ->withName('SyliusCon 2023')
+            ->create();
+
+        $this->client->request('GET', sprintf('/admin/conferences/%s/edit', $conference->getId()));
+
+        // Test header
+        self::assertSelectorTextContains('[data-test-page-title]', 'Edit conference');
+        self::assertSelectorExists('[data-test-icon="tabler:pencil"]');
+        self::assertSelectorTextContains('[data-test-subheader]', 'Managing your conferences');
+    }
+
     public function testEditingConference(): void
     {
         $conference = ConferenceFactory::new()

diff --git a/tests/Functional/LegacyBookTest.php b/tests/Functional/LegacyBookTest.php
@@ -33,7 +33,7 @@ protected function setUp(): void
     public function testBrowsingBooks(): void
     {
         BookFactory::new()
-            ->withTitle('Shinning')
+            ->withTitle('The Shining')
             ->withAuthorName('Stephen King')
             ->create()
         ;
@@ -59,7 +59,7 @@ public function testAddingBookContent(): void
     public function testEditingBookContent(): void
     {
         $book = BookFactory::new()
-            ->withTitle('Shinning')
+            ->withTitle('The Shining')
             ->withAuthorName('Stephen King')
             ->create();