BAP-18542: Wrong rendering of translated labels (#31047)

 - fixed `<%=` usages in JS templates, replaced with `<%-`
 - translation caches are sanitized on build
 - removed `|raw` where not needed
 - enabled XSS checks in translations for XSS build

src/Oro/Bundle/ActivityListBundle/Resources/views/ActivityList/js/list.html.twig

@@ -1,6 +1,6 @@
 <script type="text/html" id="{{ id|e('html_attr')|raw }}">
     <div class="items list-box list-shaped"></div>
     <div class="no-data">
-        {{ "oro.activitylist.no_activities_exist"|trans|raw }}
+        {{ "oro.activitylist.no_activities_exist"|trans }}
     </div>
 </script>

src/Oro/Bundle/ActivityListBundle/Resources/views/ActivityList/js/view.html.twig

@@ -33,7 +33,7 @@
                     {% endblock %}
                 </div>
                 <div class="comment-count"<% if (!commentCount) { %> style="display:none"<% } %>
-                    title="<%= _.__('oro.activitylist.comment.quantity_label') %>">
+                    title="<%- _.__('oro.activitylist.comment.quantity_label') %>">
                     <span class="fa-comment" aria-hidden="true"></span><span class="count"><%= commentCount %></span>
                 </div>
             {% block activityDate %}

src/Oro/Bundle/AddressBundle/Resources/views/Include/javascript.html.twig

@@ -1,7 +1,7 @@
 {% block oro_region_updater_js %}
     <script type="text/template" id="region-chooser-template">
         <% _.each(regions, function(region, i) { %>
-            <option value="<%= region.get('combinedCode') %>"><%= region.get('name') %></option>
+            <option value="<%- region.get('combinedCode') %>"><%- region.get('name') %></option>
         <% }); %>
     </script>
 {% endblock oro_region_updater_js %}

src/Oro/Bundle/AddressBundle/Resources/views/Js/address.js.twig

@@ -3,11 +3,11 @@
         {% if address_edit_acl_resource is not defined or is_granted(address_edit_acl_resource) %}
         <div class="address-book-item__actions">
             <% if (!_.isMobile()) { %>
-                <button class="btn btn-icon btn-light item-edit-button address-book-item__action" title="<%= _.__('Edit') %>">
+                <button class="btn btn-icon btn-light item-edit-button address-book-item__action" title="<%- _.__('Edit') %>">
                     <span class="fa-pencil-square-o hide-text" aria-hidden='true'><%- _.__('Edit') %></span>
                 </button>
                 <% if (!primary) { %>
-                    <button class="btn btn-icon btn-light item-remove-button address-book-item__action" title="<%= _.__('Remove') %>"><span class="fa-trash-o hide-text"><%= _.__('Remove') %></span></button>
+                    <button class="btn btn-icon btn-light item-remove-button address-book-item__action" title="<%- _.__('Remove') %>"><span class="fa-trash-o hide-text"><%- _.__('Remove') %></span></button>
                 <% } %>
             <% } else { %>
                 <div class="dropdown">
@@ -44,11 +44,11 @@
             <% } %>
             </div>
          {% endif %}
-        <div class="address-book-item__title"><%= _.escape(label) %></div>
+        <div class="address-book-item__title"><%- label %></div>
         <ul class="address-book-item__labels">
             <% if (primary) { %> <li class="address-book-item__label-container"><span class="address-book-item__label label-info"><%- _.__('Primary') %></span></li> <% } %>
             <% _.each(types, function(type) { %>
-                <li class="address-book-item__label-container"><span class="address-book-item__label"><%= _.escape(type.label) %></span></li>
+                <li class="address-book-item__label-container"><span class="address-book-item__label"><%- type.label %></span></li>
             <% }) %>
         </ul>
         <address class="address-book-item__address">

src/Oro/Bundle/CommentBundle/Resources/public/templates/comment/comment-item-view.html

@@ -41,10 +41,10 @@
                 <ul class="dropdown-menu file-menu" role="menu" aria-labelledby="<%- attachmentTogglerId %>">
                     <li>
                     <a class="dropdown-item no-hash" tabindex="-1" href="<%- attachmentURL %>">
-                        <%= _.__('oro.comment.attachment.download') %><span>(<%- attachmentSize %>)</span>
+                        <%- _.__('oro.comment.attachment.download') %><span>(<%- attachmentSize %>)</span>
                     </a>
                     <% if (attachmentThumbnail) { %>
-                        <a class="dropdown-item view-image no-hash" tabindex="-1" data-gallery="comment-view-<%- relationId %>" href="<%- attachmentURL %>"><%= _.__('oro.comment.attachment.view') %></a>
+                        <a class="dropdown-item view-image no-hash" tabindex="-1" data-gallery="comment-view-<%- relationId %>" href="<%- attachmentURL %>"><%- _.__('oro.comment.attachment.view') %></a>
                     <% } %>
                     </li>
                 </ul>
@@ -73,15 +73,15 @@
                     <ul class="launchers-list">
                         <% if (editable) { %>
                         <li class="launcher-item mode-icon-only">
-                            <button class="btn btn-icon btn-light action mode-icon-only item-edit-button" title="<%= _.__('oro.comment.action.update') %>">
-                                <span class="fa-pencil-square-o hide-text" aria-hidden="true"><%= _.__('oro.comment.action.update') %></span>
+                            <button class="btn btn-icon btn-light action mode-icon-only item-edit-button" title="<%- _.__('oro.comment.action.update') %>">
+                                <span class="fa-pencil-square-o hide-text" aria-hidden="true"><%- _.__('oro.comment.action.update') %></span>
                             </button>
                         </li>
                         <% } %>
                         <% if (removable) { %>
                         <li class="launcher-item mode-icon-only">
-                            <button class="btn btn-icon btn-light action mode-icon-only item-remove-button" title="<%= _.__('oro.comment.action.delete') %>">
-                                <span class="fa-trash-o hide-text" aria-hidden="true"><%= _.__('oro.comment.action.delete') %></span>
+                            <button class="btn btn-icon btn-light action mode-icon-only item-remove-button" title="<%- _.__('oro.comment.action.delete') %>">
+                                <span class="fa-trash-o hide-text" aria-hidden="true"><%- _.__('oro.comment.action.delete') %></span>
                             </button>
                         </li>
                         <% } %>

src/Oro/Bundle/CommentBundle/Resources/public/templates/comment/comments-header-view.html

@@ -1,5 +1,5 @@
 <h5 class="comments-header-view-title">
-    <%= _.__('oro.comment.entity_plural_label') %>
+    <%- _.__('oro.comment.entity_plural_label') %>
     <% if (state.totalItemsQuantity !== 0) { %>
         (<%= state.totalItemsQuantity %>)
     <% } %>

src/Oro/Bundle/CommentBundle/Resources/public/templates/comment/comments-no-data.html

@@ -1,2 +1,2 @@
 <% var classNames = items.length ? 'no-data hide' : 'no-data' %>
-<div class="<%- classNames %>"><%= _.__('oro.comment.no_data_found') %></div>
+<div class="<%- classNames %>"><%- _.__('oro.comment.no_data_found') %></div>

src/Oro/Bundle/CommentBundle/Resources/public/templates/comment/comments-view.html

@@ -4,7 +4,7 @@
 <% if (canCreate) { %>
 <div class="comments-view-footer">
     <button class="btn btn-sm add-comment-button">
-        <%= _.__('oro.comment.from.button.add_comment.label') %>
+        <%- _.__('oro.comment.from.button.add_comment.label') %>
     </button>
 </div>
 <% } %>

src/Oro/Bundle/CommentBundle/Resources/views/Comment/form.html.twig

@@ -18,15 +18,15 @@
         <% } %>
         <div class="widget-actions">
             <button class="btn cancel-comment-button" type="reset">
-                <%= _.__('oro.comment.from.button.cancel_comment.label')  %>
+                <%- _.__('oro.comment.from.button.cancel_comment.label')  %>
             </button>
             <% if (!isNew) { %>
             <button class="btn btn-primary" type="submit">
-                <%= _.__('oro.comment.from.button.edit_comment.label') %>
+                <%- _.__('oro.comment.from.button.edit_comment.label') %>
             </button>
             <% } else { %>
             <button class="btn btn-primary" type="submit">
-                <%= _.__('oro.comment.from.button.send_comment.label') %>
+                <%- _.__('oro.comment.from.button.send_comment.label') %>
             </button>
             <% } %>
         </div>

src/Oro/Bundle/DashboardBundle/Resources/public/templates/widget/dashboard-item.html

@@ -55,5 +55,5 @@
             </div>
         </div>
     </div>
-    <div class="row-fluid <%= contentClasses.join(' ') %>"></div>
+    <div class="row-fluid <%- contentClasses.join(' ') %>"></div>
 </div>

src/Oro/Bundle/DashboardBundle/Resources/views/Js/default_templates.js.twig

@@ -4,17 +4,17 @@
     </div>
     <div>
         <div class="filter-start-date">
-            <input type="text" class="<%= inputClass %>"
-                   value="<%= value.value.start %>"
-                   name="<%= value.value.startEndPrefix %>[value][start]"
+            <input type="text" class="<%- inputClass %>"
+                   value="<%- value.value.start %>"
+                   name="<%- value.value.startEndPrefix %>[value][start]"
                    placeholder="<%- _.__('from') %>"
             />
         </div>
         <span class="filter-separator">-</span>
         <div class="filter-end-date">
-            <input type="text" class="<%= inputClass %>"
-                   value="<%= value.value.end %>"
-                   name="<%= value.value.startEndPrefix %>[value][end]"
+            <input type="text" class="<%- inputClass %>"
+                   value="<%- value.value.end %>"
+                   name="<%- value.value.startEndPrefix %>[value][end]"
                    placeholder="<%- _.__('to') %>"
             />
         </div>

src/Oro/Bundle/DashboardBundle/Resources/views/Js/items.html.twig

@@ -3,19 +3,19 @@
         <select class="item-select filter-select-oro">
             <option></option>
             <% items.each(function (item) { %>
-                <option value="<%= item.get('id') %>"><%= item.get('label') %></option>
+                <option value="<%- item.get('id') %>"><%= item.get('label') %></option>
             <% }); %>
         </select>
     </div>
 </script>
 
 <script id="widget-items-item-template" type="text/template">
-    <tr class="widget-items-item-row" data-cid="<%= cid %>">
+    <tr class="widget-items-item-row" data-cid="<%- cid %>">
         <td><%= label %></td>
         <td class="action-cell">
-            <input type="hidden" name="<%= namePrefix %>[id]" value="<%= id %>">
-            <input data-name="order" type="hidden" class="order" name="<%= namePrefix %>[order]" value="<%= order %>">
-            <input class="hide" data-name="show" type="checkbox" name="<%= namePrefix %>[show]" <%= show ? 'checked' : '' %>>
+            <input type="hidden" name="<%- namePrefix %>[id]" value="<%- id %>">
+            <input data-name="order" type="hidden" class="order" name="<%- namePrefix %>[order]" value="<%- order %>">
+            <input class="hide" data-name="show" type="checkbox" name="<%- namePrefix %>[show]" <%- show ? 'checked' : '' %>>
             <% if (_.isMobile()) { %>
             <span class="btn btn-icon delete-button" data-collection-action="delete" title="{{ 'oro.dashboard.datagrid.actions.move_column_up.label'|trans }}" aria-hidden="true">
                 <i class="fa-trash-o"></i>

src/Oro/Bundle/DataAuditBundle/Resources/public/templates/audit-filter.html

@@ -1,25 +1,25 @@
 <div>
     <% if (obj.popoverContent) { %>
     <div class="field-condition-date-popover">
-        <i class="fa-info-circle" data-content="<%= popoverContent %>" data-placement="bottom" data-toggle="popover"></i>
+        <i class="fa-info-circle" data-content="<%- popoverContent %>" data-placement="bottom" data-toggle="popover"></i>
     </div>
     <% } %>
-    <span> <%= _.__('oro.filter.embedded.choice.field_to_value') %> </span>
+    <span> <%- _.__('oro.filter.embedded.choice.field_to_value') %> </span>
     <span class="audit-type-filter-container"></span>
-    <span class="value-label"><%= _.__('oro.dataaudit.data_audit_condition.value') %></span>
-    <span class="value-that-label"><%= _.__('oro.dataaudit.data_audit_condition.value_that') %></span>
+    <span class="value-label"><%- _.__('oro.dataaudit.data_audit_condition.value') %></span>
+    <span class="value-that-label"><%- _.__('oro.dataaudit.data_audit_condition.value_that') %></span>
     <span class="inner-filter-container"></span>
     <div class="separator"></div>
     <span class="audit-filter">
-        <span> <%= _.__('oro.dataaudit.data_audit_condition.in_the_interval') %> </span>
+        <span> <%- _.__('oro.dataaudit.data_audit_condition.in_the_interval') %> </span>
         <span class="audit-filter-type"><%= parts.join('') %></span>:
         <div class="audit-filter-container">
             <div class="filter-start-date">
-                <input type="text" class="<%= inputClass %>" value="<%- value.value.start %>" name="start" placeholder="<%- _.__('from') %>">
+                <input type="text" class="<%- inputClass %>" value="<%- value.value.start %>" name="start" placeholder="<%- _.__('from') %>">
             </div>
             <span class="filter-separator">-</span>
             <div class="filter-end-date">
-                <input type="text" class="<%= inputClass %>" value="<%- value.value.end %>" name="end" placeholder="<%- _.__('to') %>">
+                <input type="text" class="<%- inputClass %>" value="<%- value.value.end %>" name="end" placeholder="<%- _.__('to') %>">
             </div>
             <input type="hidden" name="datetime_part" value="value">
         </div>

src/Oro/Bundle/DataGridBundle/Resources/public/js/app/plugins/grid/inline-editing-plugin.js

@@ -202,7 +202,7 @@ define(function(require) {
                         this.$el.append('<span class="inline-editor-edit-action">' +
                             '<button data-role="edit" ' +
                                     'class="inline-actions-btn skip-row-click hide-text"' +
-                                    'title="' + __('Edit') + '">' +
+                                    'title="' + _.escape(__('Edit')) + '">' +
                                 '<span class="fa-pencil" aria-hidden="true"></span>' +
                             '</button>' +
                         '</span>');

src/Oro/Bundle/DataGridBundle/Resources/public/templates/datagrid-settings/datagrid-settings-collection.html

@@ -2,11 +2,11 @@
     <table class="table-hover table table-condensed">
         <thead>
         <tr>
-            <th><span><%= _.__('oro.datagrid.settings.column.name') %></span></th>
+            <th><span><%- _.__('oro.datagrid.settings.column.name') %></span></th>
             <% if (addSorting) { %>
-            <th><span><%= _.__('oro.datagrid.settings.column.sort') %></span></th>
+            <th><span><%- _.__('oro.datagrid.settings.column.sort') %></span></th>
             <% } %>
-            <th><span><%= _.__('oro.datagrid.settings.column.show') %></span></th>
+            <th><span><%- _.__('oro.datagrid.settings.column.show') %></span></th>
         </tr>
         </thead>
     </table>
@@ -15,14 +15,14 @@
     <table class="table-hover table table-condensed">
         <thead class="thead-sizing">
         <tr>
-            <th><span><%= _.__('oro.datagrid.settings.column.name') %></span></th>
+            <th><span><%- _.__('oro.datagrid.settings.column.name') %></span></th>
             <% if (addSorting) { %>
-            <th><span><%= _.__('oro.datagrid.settings.column.sort') %></span></th>
+            <th><span><%- _.__('oro.datagrid.settings.column.sort') %></span></th>
             <% } %>
-            <th><span><%= _.__('oro.datagrid.settings.column.show') %></span></th>
+            <th><span><%- _.__('oro.datagrid.settings.column.show') %></span></th>
         </tr>
         </thead>
         <tbody></tbody>
     </table>
 </div>
-<div class="no-data"><%= _.__('oro.datagrid.settings.empty_list') %></div>
+<div class="no-data"><%- _.__('oro.datagrid.settings.empty_list') %></div>

src/Oro/Bundle/DataGridBundle/Resources/public/templates/datagrid-settings/datagrid-settings-dialog-widget-actions.html

@@ -1,5 +1,5 @@
 <div class="widget-actions form-actions">
     <button type="reset" class="btn">
-        <%= _.__('oro.datagrid.settings.close.label')%>
+        <%- _.__('oro.datagrid.settings.close.label')%>
     </button>
 </div>

src/Oro/Bundle/DataGridBundle/Resources/public/templates/datagrid-settings/datagrid-settings-filter.html

@@ -1,15 +1,15 @@
 <div class="datagrid-settings-search<% if (search.length === 0) { %> empty<% } %>"
      data-role="datagrid-settings-search-wrapper">
-    <input type="text" data-role="datagrid-settings-search" value="<%=search %>"
-            placeholder="<%= _.__('oro.datagrid.settings.filter.search_placeholder') %>" />
+    <input type="text" data-role="datagrid-settings-search" value="<%- search %>"
+            placeholder="<%- _.__('oro.datagrid.settings.filter.search_placeholder') %>" />
     <a href="#" class="clear fa-close" data-role="datagrid-settings-clear-search"
-       title="<%= _.__('oro.datagrid.settings.filter.clear_search_tooltip') %>"></a>
+       title="<%- _.__('oro.datagrid.settings.filter.clear_search_tooltip') %>"></a>
 </div>
 <a href="#" class="datagrid-settings-renderable-tab<% if (!renderable) { %> active<% } %>"
    data-role="datagrid-settings-show-all">
-    <%= _.__('oro.datagrid.settings.filter.all') %>
+    <%- _.__('oro.datagrid.settings.filter.all') %>
 </a>
 <a href="#" class="datagrid-settings-renderable-tab<% if (renderable) { %> active<% } %>"
    data-role="datagrid-settings-show-selected">
-    <%= _.__('oro.datagrid.settings.filter.selected') %>
+    <%- _.__('oro.datagrid.settings.filter.selected') %>
 </a>

src/Oro/Bundle/DataGridBundle/Resources/public/templates/datagrid-settings/datagrid-settings-item.html

@@ -1,5 +1,5 @@
 <td class="title-cell" title="<%- label %>">
-    <label for="column-<%= cid  %>"><%= label %></label>
+    <label for="column-<%- cid  %>"><%= label %></label>
 </td>
 <% if (addSorting) { %>
 <td class="sort-cell">
@@ -12,7 +12,7 @@
 </td>
 <% } %>
 <td class="visibility-cell" title="<%- label %>">
-    <input id="column-<%= cid  %>" type="checkbox" data-role="renderable"
+    <input id="column-<%- cid  %>" type="checkbox" data-role="renderable"
     <% if (disabledVisibilityChange) {%>disabled<% } %>
     <% if (renderable) {%>checked<% } %>/>
 </td>

src/Oro/Bundle/DataGridBundle/Resources/public/templates/datagrid-settings/datagrid-settings.html

@@ -1,10 +1,10 @@
 <div class="datagrid-settings-filter" data-role="datagrid-settings-filter"></div>
 <div class="datagrid-settings-actions">
     <a href="#" data-role="datagrid-settings-select-all" class="pull-right">
-        <%= _.__('oro.datagrid.settings.select_all')%>
+        <%- _.__('oro.datagrid.settings.select_all')%>
     </a>
     <a href="#" data-role="datagrid-settings-unselect-all" class="pull-right">
-        <%= _.__('oro.datagrid.settings.unselect_all')%>
+        <%- _.__('oro.datagrid.settings.unselect_all')%>
     </a>
 </div>
 <div class="datagrid-settings-table" data-role="datagrid-settings-table"></div>

src/Oro/Bundle/DataGridBundle/Resources/public/templates/datagrid/action-component-dropdown-launcher.html

@@ -24,8 +24,8 @@
 
 <% var togglerId = _.uniqueId('dropdown-') %>
 <div class="<%- wrapperClassName %> dropdown">
-    <a href="#" class="<%= actionClassNames.join(' ') %>"
-       title="<%= title %>"
+    <a href="#" class="<%- actionClassNames.join(' ') %>"
+       title="<%- title %>"
        role="button" id="<%- togglerId %>" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false"
        <% if (launcherMode == 'icon-only' && obj.ariaLabel) { %> aria-label="<%- ariaLabel %>" <% } %>
@@ -36,7 +36,7 @@
         <% } else if (launcherMode == 'icon-only') { %>
             <span class="<%- iconClassName ? iconClassName : 'fa-' + icon %> fa--no-offset" aria-hidden="true"></span>
         <% } else if (launcherMode == 'text-only') { %>
-            <% if (iconClassName) { %><span class="<%= iconClassName %>" aria-hidden="true"></span><% } %>
+            <% if (iconClassName) { %><span class="<%- iconClassName %>" aria-hidden="true"></span><% } %>
             <%- label %>
         <% } %>
     </a>

src/Oro/Bundle/DataGridBundle/Resources/public/templates/datagrid/action-launcher.html

@@ -32,8 +32,8 @@
 <% if (links) { %><div class="btn-group"><% } %>
 
 <<%- tagName %>
-    <% if (tagName === "a") { %> href="<%= link %>" role="button"<% } %>
-    class="<%= actionClassNames.join(' ') %>"
+    <% if (tagName === "a") { %> href="<%- link %>" role="button"<% } %>
+    class="<%- actionClassNames.join(' ') %>"
     title="<%- title %>"
     <% if (obj.ariaLabel) { %>
     aria-label="<%- ariaLabel %>"
@@ -51,7 +51,7 @@
         <% if (iconClassName) { %><span class="icon <%- iconClassName %>" aria-hidden="true"></span><% } %>
         <%- label %>
     <% } %>
-</<%= tagName %>>
+</<%- tagName %>>
 
 <% if (links) { %>
     <ul class="dropdown-menu" aria-labelledby="<%- togglerId %>">

src/Oro/Bundle/DataGridBundle/Resources/public/templates/datagrid/pagination-input.html

@@ -1,5 +1,5 @@
 <% if (!_.isMobile()) { %>
-    <span><%= _.__('oro.datagrid.pagination.label') %>:</span>
+    <span><%- _.__('oro.datagrid.pagination.label') %>:</span>
 <% } %>
 
 <% _.each(handles, function (handle) { %>

src/Oro/Bundle/DataGridBundle/Resources/public/templates/datagrid/pagination.html

@@ -1,5 +1,5 @@
 <% if (!_.isMobile()) { %>
-    <span><%= _.__('oro.datagrid.pagination.label') %>:</span>
+    <span><%- _.__('oro.datagrid.pagination.label') %>:</span>
 <% } %>
 
 <% _.each(handles, function (handle) { %>