Unify index actions

src/Sylius/Bundle/AdminBundle/Resources/assets/scripts/bootstrap.js

@@ -1,12 +1,25 @@
+/* eslint-env browser */
 import * as bootstrap from 'bootstrap';
 
-(function () {
-  const dropdowns = document.querySelectorAll('.dropdown-toggle.dropdown-static');
-  const dropdown = [...dropdowns].map((dropdownToggleEl) => new bootstrap.Dropdown(dropdownToggleEl, {
-    popperConfig(defaultBsPopperConfig) {
-      return { ...defaultBsPopperConfig, strategy: 'fixed' };
-    },
-  }));
-}());
+// Fix dropdowns
+(() => {
+  document.querySelectorAll('.dropdown-static').forEach((dropdownToggleEl) => {
+    const parent = dropdownToggleEl.closest('[data-bs-toggle="dropdown"]');
+    if (parent) {
+      let dropdown = new bootstrap.Dropdown(parent, {
+        popperConfig(defaultBsPopperConfig) {
+          return { ...defaultBsPopperConfig, strategy: 'fixed' };
+        },
+      });
+    }
+  });
+})();
+
+// Initialize tooltips
+(() => {
+  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach((tooltipTriggerEl) => {
+    let tooltip = new bootstrap.Tooltip(tooltipTriggerEl);
+  });
+})();
 
 window.bootstrap = bootstrap;

src/Sylius/Bundle/AdminBundle/Resources/config/app/config.yml

@@ -69,6 +69,7 @@ sylius_grid:
             default: '@SyliusAdmin/shared/grid/action/default.html.twig'
             delete: '@SyliusAdmin/shared/grid/action/delete.html.twig'
             links: '@SyliusAdmin/shared/grid/action/links.html.twig'
+            list: '@SyliusAdmin/shared/grid/action/list.html.twig'
             show: '@SyliusAdmin/shared/grid/action/show.html.twig'
             update: '@SyliusAdmin/shared/grid/action/update.html.twig'
             create_payment_method: "@SyliusAdmin/payment_method/grid/action/create.html.twig"

src/Sylius/Bundle/AdminBundle/Resources/config/grids/catalog_promotion.yaml

@@ -95,6 +95,7 @@ sylius_grid:
                         type: show
                     show_variants:
                         type: show
+                        icon: list-letters
                         label: sylius.ui.list_variants
                         options:
                             link:

src/Sylius/Bundle/AdminBundle/Resources/config/grids/customer.yml

@@ -66,6 +66,7 @@ sylius_grid:
                     show_orders:
                         type: show
                         label: sylius.ui.show_orders
+                        icon: shopping-bag
                         options:
                             link:
                                 route: sylius_admin_customer_order_index

src/Sylius/Bundle/AdminBundle/Resources/config/grids/product.yml

@@ -67,11 +67,9 @@ sylius_grid:
                             links:
                                 simple:
                                     label: sylius.ui.simple_product
-                                    icon: plus
                                     route: sylius_admin_product_create_simple
                                 configurable:
                                     label: sylius.ui.configurable_product
-                                    icon: plus
                                     route: sylius_admin_product_create
                 item:
                     details:
@@ -83,26 +81,22 @@ sylius_grid:
                         type: delete
                 subitem:
                     variants:
-                        type: links
-                        label: sylius.ui.manage_variants
+                        label: sylius.ui.variants
+                        type: list
                         options:
-                            icon: cubes
                             links:
                                 index:
                                     label: sylius.ui.list_variants
-                                    icon: list
                                     route: sylius_admin_product_variant_index
                                     parameters:
                                         productId: resource.id
                                 create:
                                     label: sylius.ui.create
-                                    icon: plus
                                     route: sylius_admin_product_variant_create
                                     parameters:
                                         productId: resource.id
                                 generate:
                                     label: sylius.ui.generate
-                                    icon: random
                                     route: sylius_admin_product_variant_generate
                                     visible: resource.hasOptions
                                     parameters:

src/Sylius/Bundle/AdminBundle/Resources/config/grids/product_review.yml

@@ -52,33 +52,33 @@ sylius_grid:
                             sylius.ui.accepted: accepted
                             sylius.ui.rejected: rejected
             actions:
-                item:
-                    update:
-                        type: update
+                item:                
                     accept:
                         type: apply_transition
                         label: sylius.ui.accept
-                        icon: checkmark
+                        icon: check
                         options:
                             link:
                                 route: sylius_admin_product_review_accept
                                 parameters:
                                     id: resource.id
-                            class: green
+                            class: btn-success btn-icon
                             transition: accept
                             graph: sylius_product_review
                     reject:
                         type: apply_transition
                         label: sylius.ui.reject
-                        icon: remove
+                        icon: x
                         options:
                             link:
                                 route: sylius_admin_product_review_reject
                                 parameters:
                                     id: resource.id
-                            class: yellow
+                            class: btn-warning btn-icon
                             transition: reject
                             graph: sylius_product_review
+                    update:
+                        type: update
                     delete:
                         type: delete
                 bulk:

src/Sylius/Bundle/AdminBundle/Resources/config/grids/promotion.yml

@@ -70,27 +70,23 @@ sylius_grid:
                         type: archive
                 subitem:
                     coupons:
-                        type: links
+                        type: list
                         label: sylius.ui.manage_coupons
                         options:
                             visible: resource.couponBased
-                            icon: ticket
                             links:
                                 index:
                                     label: sylius.ui.list_coupons
-                                    icon: list
                                     route: sylius_admin_promotion_coupon_index
                                     parameters:
                                         promotionId: resource.id
                                 create:
                                     label: sylius.ui.create
-                                    icon: plus
                                     route: sylius_admin_promotion_coupon_create
                                     parameters:
                                         promotionId: resource.id
                                 generate:
                                     label: sylius.ui.generate
-                                    icon: random
                                     route: sylius_admin_promotion_coupon_generate
                                     parameters:
                                         promotionId: resource.id

src/Sylius/Bundle/AdminBundle/templates/order/show/content/header/title_block/actions.html.twig

@@ -1,11 +1,11 @@
 {% set resource = hookable_metadata.context.resource %}
 
 <div class="col-12 col-md-auto ms-auto">
-    <div class="dropdown">
+    <div class="dropdown drop">
         <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
             {{ 'sylius.ui.actions'|trans }}
         </button>
-        <div class="dropdown-menu">
+        <div class="dropdown-menu dropdown-menu-end">
             {% hook 'actions' with { resource } %}
         </div>
     </div>

src/Sylius/Bundle/AdminBundle/templates/payment_method/grid/action/create.html.twig

@@ -2,7 +2,8 @@
 
 {{ _dropdown.list(
     {
-        button: { text: 'sylius.ui.create'|trans, class: 'btn-secondary' }
+        direction: 'down-end',
+        button: { text: 'sylius.ui.create'|trans, icon: 'plus' }
     },
     sylius_admin_get_payment_gateways()|map((gatewayName, gatewayServiceId) => {
         title: gatewayName|trans,

src/Sylius/Bundle/AdminBundle/templates/product/grid/action/generate_variants.html.twig

@@ -2,7 +2,7 @@
 
 {% set path = options.link.url|default(path('sylius_admin_product_variant_generate', {'productId': options.product.id})) %}
 
-<a href="{{ path }}" class="btn primary">
-    {{ icon({ icon: 'arrows-shuffle', class: 'icon icon-tabler dropdown-item-icon' }) }}
+<a href="{{ path }}" class="btn">
+    {{ icon({ icon: 'arrows-split', class: 'icon icon-tabler' }) }}
     {{ 'sylius.ui.generate'|trans }}
 </a>

src/Sylius/Bundle/AdminBundle/templates/product_attribute/grid/action/create.html.twig

@@ -1,9 +1,9 @@
-{#{% dump(sylius_attribute_types()) %}#}
 {% import '@SyliusAdmin/shared/helper/dropdown.html.twig' as _dropdown %}
 
 {{ _dropdown.list(
     {
-        button: { text: 'sylius.ui.create'|trans, class: 'btn-secondary' }
+        direction: 'down-end',
+        button: { text: 'sylius.ui.create'|trans, icon: 'plus' },
     },
     sylius_attribute_types()|map((value, key) => {
         title: ('sylius.form.attribute_type.' ~ value.type)|trans,

src/Sylius/Bundle/AdminBundle/templates/shared/grid/action/create.html.twig

@@ -7,7 +7,7 @@
     {% set message = 'sylius.ui.create' %}
 {% endif %}
 
-<a href="{{ path }}" class="btn primary">
+<a href="{{ path }}" class="btn">
     {{ icon({ icon: action.icon ?? 'plus', class: 'icon icon-tabler dropdown-item-icon' }) }}
     {{ message|trans }}
 </a>

src/Sylius/Bundle/AdminBundle/templates/shared/grid/action/links.html.twig

@@ -1,11 +1,16 @@
+{% from '@SyliusAdmin/shared/helper/icon.html.twig' import icon %}
+
 {% set visible = options.visible is defined ? options.visible : true %}
 
 {% if visible %}
     <div class="dropdown">
-        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
+        <button class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown">
+            {% if options.icon is defined %}
+                {{ icon({ icon: options.icon, class: 'icon icon-tabler' }) }}
+            {% endif %}
             {{ action.label|trans }}
         </button>
-        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
+        <ul class="dropdown-menu dropdown-menu-end">
             {% if options.header is defined %}
                 <li><h6 class="dropdown-header">{{ options.header.label|trans }}</h6></li>
             {% endif %}
@@ -15,7 +20,14 @@
                 {% if is_link_visible %}
                     {% set path = link.url is defined ? link.url : path(link.route, link.parameters|default([])) %}
 
-                    <li><a class="dropdown-item" href="{{ path }}">{% if link.icon is defined %}<i class="{{ link.icon }} icon"></i> {% endif %}{{ link.label|trans }}</a></li>
+                    <li>
+                        <a class="dropdown-item" href="{{ path }}">
+                            {% if link.icon is defined %}
+                                {{ icon({ icon: link.icon, class: 'icon icon-tabler dropdown-item-icon' }) }}
+                            {% endif %}
+                            {{ link.label|trans }}
+                        </a>
+                    </li>
                 {% endif %}
             {% endfor %}
         </ul>

src/Sylius/Bundle/AdminBundle/templates/shared/grid/action/list.html.twig

@@ -0,0 +1,25 @@
+{% from '@SyliusAdmin/shared/helper/icon.html.twig' import icon %}
+
+{% set visible = options.visible is defined ? options.visible : true %}
+
+{% if visible %}
+    <div>
+        {% if action.label %}
+            <span class="dropdown-header">{{ action.label|trans }}</span>
+        {% endif %}
+
+        {% for link in options.links %}
+            {% set is_link_visible = link.visible is defined ? link.visible : true %}
+
+            {% if is_link_visible %}
+                {% set path = link.url is defined ? link.url : path(link.route, link.parameters|default([])) %}
+                <a class="dropdown-item" href="{{ path }}">
+                    {% if link.icon is defined %}
+                        {{ icon({ icon: link.icon, class: 'icon icon-tabler dropdown-item-icon' }) }}
+                    {% endif %}
+                    {{ link.label|trans }}
+                </a>
+            {% endif %}
+        {% endfor %}
+    </div>
+{% endif %}

src/Sylius/Bundle/AdminBundle/templates/shared/grid/item_action/apply_transition.html.twig

@@ -6,14 +6,14 @@
     <form action="{{ path(options.link.route, options.link.parameters) }}" method="post">
         <input type="hidden" name="_csrf_token" value="{{ csrf_token(data.id) }}">
         <input type="hidden" name="_method" value="PUT">
-        <button class="dropdown-item">
+        <button class="btn {{ options.class ?? options.class }}" {% if labeled and 'btn-icon' in options.class %}data-bs-toggle="tooltip" data-bs-title="{{ action.label|trans }}"{% endif %}>
             {% if action.icon %}{{ icon({ icon: action.icon }) }}{% endif %}
-            {% if labeled %}{{ action.label|trans }}{% endif %}
+            {% if labeled and 'btn-icon' not in options.class %}{{ action.label|trans }}{% endif %}
         </button>
     </form>
 {% else %}
-    <button class="dropdown-item disabled">
-        {% if action.icon %}{{ icon({ icon: action.icon, class: 'icon icon-tabler dropdown-item-icon' }) }}{% endif %}
-        {% if labeled %}{{ action.label|trans }}{% endif %}
+    <button class="btn {{ options.class ?? options.class }} btn-ghost-dark disabled">
+        {% if action.icon %}{{ icon({ icon: action.icon, class: 'icon icon-tabler' }) }}{% endif %}
+        {% if labeled and 'btn-icon' not in options.class %}{{ action.label|trans }}{% endif %}
     </button>
 {% endif %}

src/Sylius/Bundle/AdminBundle/templates/shared/grid/item_action/archive.html.twig

@@ -1,17 +1,20 @@
 {% from '@SyliusAdmin/shared/helper/icon.html.twig' import icon %}
 
 {% set path = options.link.url|default(path(options.link.route|default(grid.requestConfiguration.getRouteName('archive')), options.link.parameters|default({'id': data.id}))) %}
+{% set message = action.label|default('sylius.ui.delete') %}
 
 <form action="{{ path }}" method="POST" name="sylius_archivable">
     <input type="hidden" name="_method" value="PATCH">
     <input type="hidden" name="sylius_archivable[_token]" value="{{ csrf_token('sylius_archivable') }}" />
 
-    <button class="dropdown-item" type="submit" data-confirm-btn-submit>
-        {{ icon({ icon: action.icon ?? 'archive', class: 'icon icon-tabler dropdown-item-icon' }) }}
-        {% if data.archivedAt is not null %}
+    {% if data.archivedAt is not null %}
+        <button class="btn" type="submit" data-confirm-btn-submit>
+            {{ icon({ icon: action.icon ?? 'archive', class: 'icon icon-tabler dropdown-item-icon' }) }}
             {{ action.options.restore_label|default('sylius.ui.restore')|trans }}
-        {% else %}
-            {{ action.label|default('sylius.ui.archive')|trans }}
-        {% endif %}
-    </button>
+        </button>
+    {% else %}
+        <button class="btn btn-icon" type="submit" data-confirm-btn-submit data-bs-toggle="tooltip" data-bs-title="{{ action.label|default('sylius.ui.archive')|trans }}">
+            {{ icon({ icon: action.icon ?? 'archive', class: 'icon icon-tabler dropdown-item-icon' }) }}
+        </button>
+    {% endif %}
 </form>

src/Sylius/Bundle/AdminBundle/templates/shared/grid/item_action/create.html.twig

@@ -7,7 +7,7 @@
     {% set message = 'sylius.ui.create' %}
 {% endif %}
 
-<a href="{{ path }}" class="dropdown-item">
+<a href="{{ path }}" class="btn">
     {{ icon({ icon: action.icon ?? 'plus', class: 'icon icon-tabler dropdown-item-icon' }) }}
     {{ message|trans }}
 </a>

src/Sylius/Bundle/AdminBundle/templates/shared/grid/item_action/default.html.twig

@@ -2,6 +2,6 @@
 
 {% set message = action.label %}
 
-<a href="{{ path }}" class="dropdown-item">
+<a href="{{ path }}" class="btn">
     {% if message %}{{ message|trans }}{% endif %}
 </a>

src/Sylius/Bundle/AdminBundle/templates/shared/grid/item_action/delete.html.twig

@@ -1,16 +1,12 @@
 {% from '@SyliusAdmin/shared/helper/icon.html.twig' import icon %}
 
 {% set path = options.link.url|default(path(options.link.route|default(grid.requestConfiguration.getRouteName('delete')), options.link.parameters|default({'id': data.id}))) %}
-{% set message = action.label %}
-
-{% if message is empty %}
-    {% set message = 'sylius.ui.delete' %}
-{% endif %}
+{% set message = action.label|default('sylius.ui.delete') %}
 
 <form action="{{ path }}" method="post">
     <input type="hidden" name="_method" value="DELETE">
-    <button class="dropdown-item" type="submit" data-confirm-btn-submit {{ sylius_test_html_attribute('delete-button') }}>
-        {{ icon({ icon: action.icon ?? 'trash-x', class: 'icon icon-tabler dropdown-item-icon' }) }} {{ message|trans }}
+    <button class="btn btn-icon" type="submit" data-confirm-btn-submit {{ sylius_test_html_attribute('delete-button') }} data-bs-toggle="tooltip" data-bs-title="{{ message|trans }}">
+        {{ icon({ icon: action.icon ?? 'trash-x', class: 'icon icon-tabler text-danger' }) }}
     </button>
     <input type="hidden" name="_csrf_token" value="{{ csrf_token(data.id) }}" />
 </form>

src/Sylius/Bundle/AdminBundle/templates/shared/grid/item_action/show.html.twig

@@ -1,13 +1,8 @@
 {% from '@SyliusAdmin/shared/helper/icon.html.twig' import icon %}
 
 {% set path = options.link.url|default(path(options.link.route|default(grid.requestConfiguration.getRouteName('show')), options.link.parameters|default({'id': data.id}))) %}
+{% set message = action.label|default('sylius.ui.show') %}
 
-{% set message = action.label %}
-{% if message is empty %}
-    {% set message = 'sylius.ui.show' %}
-{% endif %}
-
-<a href="{{ path }}" class="dropdown-item">
-    {{ icon({ icon: action.icon ?? 'eye', class: 'icon icon-tabler dropdown-item-icon' }) }}
-    {{ message|trans }}
+<a href="{{ path }}" class="btn btn-icon" data-bs-toggle="tooltip" data-bs-title="{{ message|trans }}">
+    {{ icon({ icon: action.icon|default('eye'), class: 'icon icon-tabler' }) }}
 </a>