IBX-10990: Introduced ibexa.Table component

composer.json

@@ -50,6 +50,7 @@
         "symfony/security-core": "^7.3",
         "symfony/security-http": "^7.3",
         "symfony/translation": "^7.3",
+        "symfony/ux-twig-component": "^2.32",
         "symfony/validator": "^7.3",
         "symfony/webpack-encore-bundle": "^2.2",
         "symfony/yaml": "^7.3",

src/bundle/Resources/config/services/twig.yaml

@@ -37,3 +37,5 @@ services:
     Ibexa\Bundle\AdminUi\Templating\Twig\LocationExtension:
         tags:
             - { name: twig.extension }
+
+    Ibexa\Bundle\AdminUi\Templating\Twig\Components\Table: ~

src/bundle/Resources/translations/ibexa_admin_ui.en.xliff

@@ -81,6 +81,11 @@
         <target state="new">Cancel</target>
         <note>key: side_panel.btn.cancel_label</note>
       </trans-unit>
+      <trans-unit id="a7db7bdf24af93f89438dd90a1405a7daf51276b" resname="table.component.default.empty_title">
+        <source>Empty table title</source>
+        <target state="new">Empty table title</target>
+        <note>key: table.component.default.empty_title</note>
+      </trans-unit>
       <trans-unit id="e4b8188e898e654dae14fc6b18133958f8e56084" resname="translation.remove.success">
         <source>Removed '%languageCode%' translation from '%name%'.</source>
         <target state="new">Removed '%languageCode%' translation from '%name%'.</target>

src/bundle/Resources/views/themes/admin/components/table.html.twig

@@ -0,0 +1,47 @@
+{% trans_default_domain 'ibexa_admin_ui' %}
+
+<div class="ibexa-scrollable-wrapper">
+    <table class="ibexa-table table ibexa-table--last-column-sticky">
+        <thead>
+            <tr class="ibexa-table__row ibexa-table__row--header">
+                {% for column in columns %}
+                    <th class="ibexa-table__header-cell {{ loop.last ? 'ibexa-table__header-cell--no-min-width' }}">
+                        <span class="ibexa-table__header-cell-content">
+                            {{ column.label|raw }}
+                        </span>
+                    </th>
+                {% endfor %}
+            </tr>
+        </thead>
+        <tbody class="ibexa-table__body">
+            {% for item in data %}
+                <tr class="ibexa-table__row">
+                    {% for column in columns %}
+                        <td class="ibexa-table__cell {{ loop.last ? 'ibexa-table__cell--has-action-btns' }}">
+                            {{ this.renderCell(column, item)|raw }}
+                        </td>
+                    {% endfor %}
+                </tr>
+            {% else %}
+                <tr class="ibexa-table__row ibexa-table__row--empty">
+                    <td class="ibexa-table__cell" colspan="{{ columns|length }}">
+                        <div class="ibexa-empty-state">
+                            <div class="ibexa-empty-state__image">
+                                <img src="{{ asset('/bundles/ibexaadminui/img/ibexa-empty-table.svg') }}" alt="">
+                            </div>
+                            <h2 class="ibexa-empty-state__title">{{ this.emptyStateTitle|trans }}</h2>
+                            {% if this.emptyStateDescription %}
+                                <p class="ibexa-empty-state__description">{{ this.emptyStateDescription|trans }}</p>
+                            {% endif %}
+                            {% if this.emptyStateExtraActions %}
+                                <div class="ibexa-empty-state__extra-actions">
+                                    {{ this.emptyStateExtraActions|raw }}
+                                </div>
+                            {% endif %}
+                        </div>
+                    </td>
+                </tr>
+            {% endfor %}
+        </tbody>
+    </table>
+</div>

src/bundle/Templating/Twig/Components/Table.php

@@ -0,0 +1,140 @@
+<?php
+
+/**
+ * @copyright Copyright (C) Ibexa AS. All rights reserved.
+ * @license For full copyright and license information view LICENSE file distributed with this source code.
+ */
+declare(strict_types=1);
+
+namespace Ibexa\Bundle\AdminUi\Templating\Twig\Components;
+
+use Ibexa\Bundle\AdminUi\Templating\Twig\Components\Table\Column;
+use JMS\TranslationBundle\Model\Message;
+use JMS\TranslationBundle\Translation\TranslationContainerInterface;
+use Symfony\Component\Translation\TranslatableMessage;
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+use Symfony\UX\TwigComponent\Attribute\ExposeInTemplate;
+
+#[AsTwigComponent(
+    name: 'ibexa.Table',
+    template: '@ibexadesign/components/table.html.twig',
+)]
+final class Table implements TranslationContainerInterface
+{
+    /**
+     * @var iterable<object>
+     */
+    public iterable $data = [];
+
+    /** @var class-string|null */
+    private ?string $dataType = null;
+
+    public TranslatableMessage $emptyStateTitle;
+
+    public ?TranslatableMessage $emptyStateDescription = null;
+
+    public ?string $emptyStateExtraActions = null;
+
+    /** @var array<string, mixed> */
+    public array $parameters = [];
+
+    /**
+     * @var array<string, Column>
+     */
+    private array $columns = [];
+
+    public function __construct()
+    {
+        $this->emptyStateTitle = new TranslatableMessage('table.component.default.empty_title', [], 'ibexa_admin_ui');
+    }
+
+    /**
+     * @param iterable<object> $data
+     */
+    public function mount(iterable $data = []): void
+    {
+        if ($data !== []) {
+            $this->data = $data;
+        }
+    }
+
+    public function getDataType(): ?string
+    {
+        return $this->dataType ??= $this->inferDataType();
+    }
+
+    /**
+     * @return array<string, Column>
+     */
+    #[ExposeInTemplate('columns')]
+    public function getColumns(): array
+    {
+        uasort($this->columns, static fn (Column $a, Column $b): int => $b->priority <=> $a->priority);
+
+        return $this->columns;
+    }
+
+    /**
+     * @param callable(mixed): string $renderer
+     */
+    public function addColumn(string $identifier, string $label, callable $renderer, int $priority = 0): self
+    {
+        $this->columns[$identifier] = new Column($identifier, $label, $renderer, $priority);
+
+        return $this;
+    }
+
+    public function removeColumn(string $identifier): self
+    {
+        unset($this->columns[$identifier]);
+
+        return $this;
+    }
+
+    /**
+     * @return class-string|null
+     */
+    private function inferDataType(): ?string
+    {
+        $firstItem = null;
+        foreach ($this->data as $item) {
+            $firstItem = $item;
+            break;
+        }
+
+        if (!is_object($firstItem)) {
+            return null;
+        }
+
+        $candidates = array_merge(
+            [get_class($firstItem)],
+            class_parents($firstItem),
+            class_implements($firstItem)
+        );
+
+        foreach ($this->data as $item) {
+            $candidates = array_filter($candidates, static fn ($candidate): bool => $item instanceof $candidate);
+            if (empty($candidates)) {
+                return null;
+            }
+        }
+
+        /** @var class-string|null $inferredType */
+        $inferredType = reset($candidates);
+
+        return $inferredType;
+    }
+
+    public function renderCell(Column $column, mixed $item): string
+    {
+        return (string) ($column->renderer)($item);
+    }
+
+    public static function getTranslationMessages(): array
+    {
+        return [
+            Message::create('table.component.default.empty_title', 'ibexa_admin_ui')
+                ->setDesc('Empty table title'),
+        ];
+    }
+}

src/bundle/Templating/Twig/Components/Table/Column.php

@@ -0,0 +1,23 @@
+<?php
+
+/**
+ * @copyright Copyright (C) Ibexa AS. All rights reserved.
+ * @license For full copyright and license information view LICENSE file distributed with this source code.
+ */
+declare(strict_types=1);
+
+namespace Ibexa\Bundle\AdminUi\Templating\Twig\Components\Table;
+
+final class Column
+{
+    /**
+     * @param callable(mixed): string $renderer
+     */
+    public function __construct(
+        public string $identifier,
+        public string $label,
+        public $renderer,
+        public int $priority = 0,
+    ) {
+    }
+}

tests/integration/AdminUiIbexaTestKernel.php

@@ -23,13 +23,17 @@
 use Ibexa\Contracts\AdminUi\ContentType\ContentTypeFieldsByExpressionServiceInterface;
 use Ibexa\Contracts\Core\Persistence\Content\Type\Handler as ContentTypeHandler;
 use Ibexa\Contracts\Core\Repository\BookmarkService;
+use Ibexa\Contracts\Core\SiteAccess\ConfigResolverInterface;
 use Ibexa\Contracts\Test\Core\IbexaTestKernel;
+use Ibexa\Core\MVC\Symfony\SiteAccess\SiteAccessServiceInterface;
 use Ibexa\Rest\Server\Controller\JWT;
 use Knp\Bundle\MenuBundle\KnpMenuBundle;
 use Symfony\Component\Config\Loader\LoaderInterface;
 use Symfony\Component\Config\Resource\FileResource;
 use Symfony\Component\DependencyInjection\ContainerBuilder;
+use Symfony\Component\EventDispatcher\EventDispatcherInterface;
 use Symfony\Component\Yaml\Yaml;
+use Symfony\UX\TwigComponent\TwigComponentBundle;
 use Symfony\WebpackEncoreBundle\WebpackEncoreBundle;
 
 /**
@@ -45,6 +49,7 @@ public function registerBundles(): iterable
         yield new KnpMenuBundle();
         yield new WebpackEncoreBundle();
         yield new DAMADoctrineTestBundle();
+        yield new TwigComponentBundle();
 
         yield new IbexaContentFormsBundle();
         yield new IbexaDesignEngineBundle();
@@ -58,23 +63,24 @@ public function registerBundles(): iterable
         yield new IbexaAdminUiBundle();
     }
 
-    protected static function getExposedServicesByClass(): iterable
-    {
-        yield from parent::getExposedServicesByClass();
+        protected static function getExposedServicesByClass(): iterable
+        {
+            yield from parent::getExposedServicesByClass();
 
-        yield BookmarkService::class;
+            yield BookmarkService::class;
 
-        yield ContentTypeFieldsExtractorInterface::class;
+            yield ContentTypeFieldsExtractorInterface::class;
 
-        yield ContentTypeHandler::class;
+            yield ContentTypeHandler::class;
 
-        yield ContentTypeFieldsByExpressionServiceInterface::class;
-    }
+            yield ContentTypeFieldsByExpressionServiceInterface::class;
 
-    protected static function getExposedServicesById(): iterable
-    {
-        yield from parent::getExposedServicesById();
-    }
+            yield SiteAccessServiceInterface::class;
+
+            yield EventDispatcherInterface::class;
+
+            yield ConfigResolverInterface::class;
+        }
 
     public function registerContainerConfiguration(LoaderInterface $loader): void
     {