IBX-3381: languages list screen update (#507)

Co-authored-by: katarzynazawada <>
ezsystems · Jul 29, 2022 · 77dc20a · 77dc20a
1 parent 0340042
commit 77dc20a
Show file tree

Hide file tree

Showing 10 changed files with 28 additions and 31 deletions.
diff --git a/features/standard/Languages.feature b/features/standard/Languages.feature
@@ -10,7 +10,7 @@ Feature: Languages management
 
   @javascript
   Scenario: Changes can be discarded while creating new Language
-    When I create a new Language
+    When I click on the edit action bar button "Add language"
       And I set fields
         | label         | value   |
         | Name          | Deutsch |
@@ -21,7 +21,7 @@ Feature: Languages management
 
   @javascript
   Scenario: New Language can be added
-    When I create a new Language
+    When I click on the edit action bar button "Add language"
       And I set fields
         | label         | value   |
         | Name          | Deutsch |
@@ -34,7 +34,7 @@ Feature: Languages management
 
   @javascript
   Scenario: New Language with existing language code cannot be added
-    When I create a new Language
+    When I click on the edit action bar button "Add language"
       And I set fields
         | label         | value          |
         | Name          | Deutsch Second |

diff --git a/src/bundle/Resources/public/scss/_tables.scss b/src/bundle/Resources/public/scss/_tables.scss
@@ -91,6 +91,10 @@
         &--field-definitions-head {
             width: calc(100% / 3);
         }
+
+        &--content-center {
+            text-align: center;
+        }
     }
 
     &__header-cell-checkbox {
@@ -148,6 +152,10 @@
         &--limitation {
             width: 70%;
         }
+
+        &--content-center {
+            text-align: center;
+        }
     }
 
     .table &__cell--close-left,

diff --git a/src/bundle/Resources/translations/language.en.xliff b/src/bundle/Resources/translations/language.en.xliff
@@ -86,6 +86,11 @@
         <target state="new">Languages</target>
         <note>key: language.list</note>
       </trans-unit>
+      <trans-unit id="ce129521119cb2cd7bf10d1f95657390fb9cccfd" resname="language.list.number_of_results">
+        <source>List (%number_of_results%)</source>
+        <target state="new">List (%number_of_results%)</target>
+        <note>key: language.list.number_of_results</note>
+      </trans-unit>
       <trans-unit id="2a52961302ce7dfa4a21c5e0bcc239f5a9a36cfe" resname="language.modal.message">
         <source>Do you want to delete the language(s)?</source>
         <target state="new">Do you want to delete the language(s)?</target>

diff --git a/src/bundle/Resources/views/themes/admin/language/list.html.twig b/src/bundle/Resources/views/themes/admin/language/list.html.twig
@@ -29,9 +29,6 @@
                     href="{{ path('ibexa.language.create') }}"
                     class="btn ibexa-btn ibexa-btn--primary"
                 >
-                    <svg class="ibexa-icon ibexa-icon--small ibexa-icon--create">
-                        <use xlink:href="{{ ibexa_icon_path('create') }}"></use>
-                    </svg>
                     <span class="ibexa-btn__label">
                         {{ 'language.new'|trans|desc('Add language') }}
                     </span>
@@ -90,6 +87,7 @@
             {% endset %}
             {% set body_row_cols = body_row_cols|merge([{
                 content: col_raw,
+                center_content: true,
                 raw: true,
             }]) %}
 
@@ -116,13 +114,16 @@
         {% endfor %}
 
         {% embed '@ibexadesign/ui/component/table/table.html.twig' with {
-            headline: 'language.list'|trans|desc('Languages'),
+            headline: 'language.list.number_of_results'|trans({ '%number_of_results%': pager.nbResults })|desc('List (%number_of_results%)'),
             head_cols: [
                 { has_checkbox: true },
                 { content: 'language.name'|trans|desc('Name') },
                 { content: 'language.code'|trans|desc('Code') },
                 { content: 'language.id'|trans|desc('ID') },
-                { content: 'language.enabled'|trans|desc('Enabled') },
+                {
+                    content: 'language.enabled'|trans|desc('Enabled'),
+                    center_content: true,
+                },
                 { },
             ],
             body_rows,

diff --git a/src/bundle/Resources/views/themes/admin/ui/component/table/table_body_cell.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/table/table_body_cell.html.twig
@@ -7,6 +7,7 @@
         {%- if has_action_btns|default(false) %} ibexa-table__cell--has-action-btns{% endif -%}
         {%- if has_icon|default(false) %} ibexa-table__cell--has-icon{% endif -%}
         {%- if is_close_left|default(false) %} ibexa-table__cell--close-left {% endif %}
+        {%- if center_content|default(false) %} ibexa-table__cell--content-center {% endif %}
         {{ class|default('') -}}"
     {{ html.attributes(attr|default({})) }}
 >

diff --git a/src/bundle/Resources/views/themes/admin/ui/component/table/table_body_row.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/table/table_body_row.html.twig
@@ -12,6 +12,7 @@
                 has_action_btns: body_col.has_action_btns|default(false),
                 has_icon: body_col.has_icon|default(false),
                 is_close_left: body_col.is_close_left is defined ? body_col.is_close_left : next_is_close_left,
+                center_content: body_col.center_content|default(false),
                 content: body_col.content,
                 raw: body_col.raw|default(false),
                 class: body_col.class|default(null),

diff --git a/src/bundle/Resources/views/themes/admin/ui/component/table/table_head_cell.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/table/table_head_cell.html.twig
@@ -6,6 +6,7 @@
         {%- if has_checkbox|default(false) %} ibexa-table__header-cell--checkbox{%- endif -%}
         {%- if has_icon|default(false) %} ibexa-table__header-cell--has-icon{%- endif -%}
         {%- if is_close_left|default(false) %} ibexa-table__header-cell--close-left {% endif %}
+        {%- if center_content|default(false) %} ibexa-table__header-cell--content-center {% endif %}
         {{ class|default('') -}}"
     {{ html.attributes(attr|default({})) }}
 >

diff --git a/src/bundle/Resources/views/themes/admin/ui/component/table/table_head_row.html.twig b/src/bundle/Resources/views/themes/admin/ui/component/table/table_head_row.html.twig
@@ -6,6 +6,7 @@
                 is_custom_bulk: head_col.is_custom_bulk|default(false),
                 has_icon: head_col.has_icon|default(false),
                 is_close_left: head_col.is_close_left is defined ? head_col.is_close_left : next_is_close_left|default(false),
+                center_content: head_col.center_content|default(false),
                 content: head_col.content|default(''),
                 sort_column: head_col.sort_column|default(null),
                 class: head_col.class|default(null),

diff --git a/src/lib/Behat/BrowserContext/LanguageContext.php b/src/lib/Behat/BrowserContext/LanguageContext.php
@@ -28,14 +28,6 @@ public function __construct(LanguagePage $languagePage, LanguagesPage $languages
         $this->languagesPage = $languagesPage;
     }
 
-    /**
-     * @When I create a new Language
-     */
-    public function createNewLanguage(): void
-    {
-        $this->languagesPage->create();
-    }
-
     /**
      * @When  I delete the language
      */

diff --git a/src/lib/Behat/Page/LanguagesPage.php b/src/lib/Behat/Page/LanguagesPage.php
@@ -14,7 +14,6 @@
 use Ibexa\Behat\Browser\Locator\VisibleCSSLocator;
 use Ibexa\Behat\Browser\Page\Page;
 use Ibexa\Behat\Browser\Routing\Router;
-use PHPUnit\Framework\Assert;
 
 class LanguagesPage extends Page
 {
@@ -36,11 +35,6 @@ public function editLanguage(string $languageName): void
         $this->table->getTableRow(['Name' => $languageName])->edit();
     }
 
-    public function create(): void
-    {
-        $this->getHTMLPage()->find($this->getLocator('createButton'))->click();
-    }
-
     public function deleteLanguage(string $languageName): void
     {
         $this->table->getTableRow(['Name' => $languageName])->select();
@@ -56,14 +50,8 @@ public function isLanguageOnTheList(string $languageName)
 
     public function verifyIsLoaded(): void
     {
-        Assert::assertEquals(
-            'Languages',
-            $this->getHTMLPage()->find($this->getLocator('pageTitle'))->getText()
-        );
-        Assert::assertEquals(
-            'Languages',
-            $this->getHTMLPage()->find($this->getLocator('listHeader'))->getText()
-        );
+        $this->getHTMLPage()->find($this->getLocator('pageTitle'))->assert()->textEquals('Languages');
+        $this->getHTMLPage()->find($this->getLocator('listHeader'))->assert()->textContains('List');
     }
 
     public function getName(): string
@@ -81,7 +69,6 @@ protected function specifyLocators(): array
         return [
             new VisibleCSSLocator('pageTitle', '.ibexa-page-title h1'),
             new VisibleCSSLocator('listHeader', '.ibexa-table-header .ibexa-table-header__headline, header .ibexa-table__headline, header h5'),
-            new VisibleCSSLocator('createButton', '.ibexa-icon--create'),
             new VisibleCSSLocator('deleteButton', '.ibexa-icon--trash,button[data-bs-original-title^="Delete"]'),
         ];
     }