Merge branch '4.6' into IBX-6554-location-view-null-checks

Author: tbialcz

.github/workflows/ci.yaml

@@ -16,7 +16,7 @@ jobs:
         php:
           - '8.0'
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Setup PHP Action
         uses: shivammathur/setup-php@v2
@@ -26,7 +26,7 @@ jobs:
           extensions: 'pdo_sqlite, gd'
           tools: cs2pr
 
-      - uses: ramsey/composer-install@v2
+      - uses: "ramsey/composer-install@v3"
         with:
           dependency-versions: "highest"
 
@@ -47,7 +47,7 @@ jobs:
           - '8.1'
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Setup PHP Action
         uses: shivammathur/setup-php@v2
@@ -57,7 +57,7 @@ jobs:
           extensions: pdo_sqlite, gd
           tools: cs2pr
 
-      - uses: ramsey/composer-install@v2
+      - uses: "ramsey/composer-install@v3"
         with:
           dependency-versions: "highest"
           composer-options: "--prefer-dist --no-progress"

src/bundle/Resources/public/js/scripts/admin.search.autocomplete.content.js

@@ -20,7 +20,9 @@
                 return total;
             }
 
-            return index === 0 ? parentLocation.name : `${total} / ${parentLocation.name}`;
+            const parentLocationNameHTMLEscaped = escapeHTML(parentLocation.name);
+
+            return index === 0 ? parentLocationNameHTMLEscaped : `${total} / ${parentLocationNameHTMLEscaped}`;
         }, '');
         const breadcrumbsClass = !breadcrumb ? 'ibexa-global-search__autocomplete-item-breadcrumbs--empty' : '';
         const autocompleteItemTemplate = autocompleteContentTemplateNode.dataset.templateItem;

src/bundle/Resources/public/js/scripts/admin.search.filters.js

@@ -1,4 +1,6 @@
 (function (global, doc, ibexa, flatpickr, React, ReactDOM) {
+    const { escapeHTML, escapeHTMLAttribute } = ibexa.helpers.text;
+    const { dangerouslySetInnerHTML } = ibexa.helpers.dom;
     let getUsersTimeout;
     const CLASS_DATE_RANGE = 'ibexa-filters__range-wrapper';
     const CLASS_VISIBLE_DATE_RANGE = 'ibexa-filters__range-wrapper--visible';
@@ -118,11 +120,11 @@
     };
     const filterByContentType = () => {
         const selectedCheckboxes = [...contentTypeCheckboxes].filter((checkbox) => checkbox.checked);
-        const contentTypesText = selectedCheckboxes.map((checkbox) => checkbox.dataset.name).join(', ');
+        const contentTypesText = selectedCheckboxes.map((checkbox) => escapeHTML(checkbox.dataset.name)).join(', ');
         const [option] = contentTypeSelect;
         const defaultText = option.dataset.default;
 
-        option.innerHTML = contentTypesText || defaultText;
+        dangerouslySetInnerHTML(option, contentTypesText || defaultText);
 
         toggleDisabledStateOnApplyBtn();
     };
@@ -186,14 +188,17 @@
             .then(showUsersList);
     };
     const createUsersListItem = (user) => {
-        return `<li data-id="${user._id}" data-name="${user.TranslatedName}" class="ibexa-filters__user-item">${user.TranslatedName}</li>`;
+        const userNameHtmlEscaped = escapeHTML(user.TranslatedName);
+        const userNameHtmlAttributeEscaped = escapeHTMLAttribute(user.TranslatedName);
+
+        return `<li data-id="${user._id}" data-name="${userNameHtmlAttributeEscaped}" class="ibexa-filters__user-item">${userNameHtmlEscaped}</li>`;
     };
     const showUsersList = (data) => {
         const hits = data.View.Result.searchHits.searchHit;
         const users = hits.reduce((total, hit) => total + createUsersListItem(hit.value.Content), '');
         const methodName = users ? 'addEventListener' : 'removeEventListener';
 
-        usersList.innerHTML = users;
+        dangerouslySetInnerHTML(usersList, users);
         usersList.classList.remove('ibexa-filters__user-list--hidden');
 
         doc.querySelector('body')[methodName]('click', handleClickOutsideUserList, false);

src/bundle/Resources/public/js/scripts/admin.trash.list.js

@@ -1,4 +1,6 @@
 (function (global, doc, ibexa, React, ReactDOM, Translator) {
+    const { escapeHTML, escapeHTMLAttribute } = ibexa.helpers.text;
+    const { dangerouslySetInnerHTML } = ibexa.helpers.dom;
     let getUsersTimeout;
     const CLASS_SORTED_ASC = 'ibexa-table__sort-column--asc';
     const CLASS_SORTED_DESC = 'ibexa-table__sort-column--desc';
@@ -150,14 +152,17 @@
             .catch(() => ibexa.helpers.notification.showErrorNotification(errorMessage));
     };
     const createUsersListItem = (user) => {
-        return `<li data-id="${user._id}" data-name="${user.TranslatedName}" class="ibexa-trash-search-form__user-item">${user.TranslatedName}</li>`;
+        const userNameHtmlEscaped = escapeHTML(user.TranslatedName);
+        const userNameHtmlAttributeEscaped = escapeHTMLAttribute(user.TranslatedName);
+
+        return `<li data-id="${user._id}" data-name="${userNameHtmlAttributeEscaped}" class="ibexa-trash-search-form__user-item">${userNameHtmlEscaped}</li>`;
     };
     const showUsersList = (data) => {
         const hits = data.View.Result.searchHits.searchHit;
         const users = hits.reduce((total, hit) => total + createUsersListItem(hit.value.Content), '');
         const methodName = users ? 'addEventListener' : 'removeEventListener';
 
-        usersList.innerHTML = users;
+        dangerouslySetInnerHTML(usersList, users);
         usersList.classList.remove('ibexa-trash-search-form__user-list--hidden');
 
         doc.querySelector('body')[methodName]('click', handleClickOutsideUserList, false);

src/bundle/Resources/public/js/scripts/core/doughnut.chart.js

@@ -1,4 +1,6 @@
 (function (global, doc, ibexa, ChartDataLabels) {
+    const { escapeHTML } = ibexa.helpers.text;
+    const { dangerouslyInsertAdjacentHTML } = ibexa.helpers.dom;
     const IBEXA_WHITE = '#fff';
     const IBEXA_COLOR_BASE_DARK = '#878b90';
     const dataLabelsMap = new Map();
@@ -71,13 +73,14 @@
                         data.legend.forEach((legendItem, index) => {
                             dataLabelsMap.set(index, true);
 
+                            const legendItemHtmlEscaped = escapeHTML(legendItem);
                             const container = doc.createElement('div');
                             const renderedItemTemplate = itemTemplate
                                 .replace('{{ checked_color }}', data.backgroundColor[index])
                                 .replace('{{ dataset_index }}', index)
-                                .replace('{{ label }}', legendItem);
+                                .replace('{{ label }}', legendItemHtmlEscaped);
 
-                            container.insertAdjacentHTML('beforeend', renderedItemTemplate);
+                            dangerouslyInsertAdjacentHTML(container, 'beforeend', renderedItemTemplate);
 
                             const checkboxNode = container.querySelector('.ibexa-chart-legend__item-wrapper');
 

src/bundle/Resources/public/js/scripts/core/dropdown.js

@@ -1,4 +1,7 @@
 (function (global, doc, ibexa, bootstrap, Translator) {
+    const { escapeHTML, escapeHTMLAttribute } = ibexa.helpers.text;
+    const { dangerouslySetInnerHTML, dangerouslyInsertAdjacentHTML } = ibexa.helpers.dom;
+
     const EVENT_VALUE_CHANGED = 'change';
     const RESTRICTED_AREA_ITEMS_CONTAINER = 190;
     const MINIMUM_LETTERS_TO_FILTER = 3;
@@ -104,10 +107,10 @@
         createSelectedItem(value, label, icon) {
             const container = doc.createElement('div');
             const selectedItemRendered = this.selectedItemTemplate
-                .replaceAll('{{ value }}', ibexa.helpers.text.escapeHTMLAttribute(value))
+                .replaceAll('{{ value }}', escapeHTMLAttribute(value))
                 .replaceAll('{{ label }}', label);
 
-            container.insertAdjacentHTML('beforeend', selectedItemRendered);
+            dangerouslyInsertAdjacentHTML(container, 'beforeend', selectedItemRendered);
 
             const selectedItemNode = container.querySelector('.ibexa-dropdown__selected-item');
             const removeSelectionBtn = selectedItemNode.querySelector('.ibexa-dropdown__remove-selection');
@@ -341,7 +344,7 @@
             const separator = this.itemsListContainer.querySelector('.ibexa-dropdown__separator');
             const emptyMessage = Translator.trans(
                 /*@Desc("No results found for "%phrase%"")*/ 'dropdown.no_results',
-                { phrase: searchedTerm },
+                { phrase: escapeHTML(searchedTerm) },
                 'ibexa_dropdown',
             );
             let hideSeparator = true;
@@ -378,7 +381,10 @@
 
             this.itemsListContainer.toggleAttribute('hidden', !anyItemVisible);
             this.itemsListFilterEmptyContainer.toggleAttribute('hidden', anyItemVisible);
-            this.itemsListFilterEmptyContainer.querySelector('.ibexa-dropdown__items-list-filter-empty-message').innerHTML = emptyMessage;
+
+            const emptyMessageNode = this.itemsListFilterEmptyContainer.querySelector('.ibexa-dropdown__items-list-filter-empty-message');
+
+            dangerouslySetInnerHTML(emptyMessageNode, emptyMessage);
         }
 
         itemsPopoverContent() {
@@ -434,9 +440,7 @@
 
         createOption(value, label) {
             const container = doc.createElement('div');
-            const itemRendered = this.itemTemplate
-                .replaceAll('{{ value }}', ibexa.helpers.text.escapeHTMLAttribute(value))
-                .replaceAll('{{ label }}', label);
+            const itemRendered = this.itemTemplate.replaceAll('{{ value }}', escapeHTMLAttribute(value)).replaceAll('{{ label }}', label);
 
             container.insertAdjacentHTML('beforeend', itemRendered);
 

src/bundle/Resources/public/js/scripts/core/tag.view.select.js

@@ -1,4 +1,7 @@
 (function (global, doc, ibexa) {
+    const { escapeHTML } = ibexa.helpers.text;
+    const { dangerouslyAppend } = ibexa.helpers.dom;
+
     class TagViewSelect {
         constructor(config) {
             this.inputSelector = config.inputSelector || 'input';
@@ -74,14 +77,14 @@
 
             items.forEach((item) => {
                 const { id, name } = item;
-                const itemTemplate = this.selectedItemTemplate.replace('{{ id }}', id).replaceAll('{{ name }}', name);
+                const itemTemplate = this.selectedItemTemplate.replace('{{ id }}', id).replaceAll('{{ name }}', escapeHTML(name));
                 const range = doc.createRange();
                 const itemHtmlWidget = range.createContextualFragment(itemTemplate);
                 const deleteButton = itemHtmlWidget.querySelector('.ibexa-tag-view-select__selected-item-tag-remove-btn');
 
                 deleteButton.toggleAttribute('disabled', false);
                 deleteButton.addEventListener('click', () => this.removeItem(String(id)), false);
-                this.listContainer.append(itemHtmlWidget);
+                dangerouslyAppend(this.listContainer, itemHtmlWidget);
             });
 
             this.inputField.dispatchEvent(new Event('change'));

src/bundle/Resources/public/js/scripts/core/taggify.js

@@ -1,4 +1,7 @@
 (function (global, doc, ibexa) {
+    const { escapeHTML, escapeHTMLAttribute } = ibexa.helpers.text;
+    const { dangerouslyInsertAdjacentHTML } = ibexa.helpers.dom;
+
     class Taggify {
         constructor(config) {
             this.container = config.container;
@@ -10,6 +13,7 @@
 
             this.attachEventsToTag = this.attachEventsToTag.bind(this);
             this.handleInputKeyUp = this.handleInputKeyUp.bind(this);
+            this.handleInputBlur = this.handleInputBlur.bind(this);
             this.addElementAttributes = this.addElementAttributes.bind(this);
         }
 
@@ -19,6 +23,14 @@
             return this.acceptKeys.includes(key);
         }
 
+        removeAcceptKey(name) {
+            if (this.acceptKeys.includes(name.at(-1))) {
+                return name.slice(0, -1);
+            }
+
+            return name;
+        }
+
         addElementAttributes(element, attrs) {
             const getValue = (value) => (typeof value === 'object' ? JSON.stringify(value) : value);
 
@@ -36,23 +48,37 @@
         }
 
         addTag(name, value, attrs = {}, tooltipAttrs = {}) {
+            if (!value || this.tags.has(value)) {
+                return;
+            }
+
             const tagTemplate = this.listNode.dataset.template;
-            const renderedTemplate = tagTemplate.replace('{{ name }}', name).replace('{{ value }}', value);
+            const nameHtmlEscaped = escapeHTML(name);
+            const valueHtmlAttributeEscaped = escapeHTMLAttribute(value);
+            const renderedTemplate = tagTemplate.replace('{{ name }}', nameHtmlEscaped).replace('{{ value }}', valueHtmlAttributeEscaped);
             const div = doc.createElement('div');
 
-            div.insertAdjacentHTML('beforeend', renderedTemplate);
+            dangerouslyInsertAdjacentHTML(div, 'beforeend', renderedTemplate);
 
             const tag = div.querySelector('.ibexa-taggify__list-tag');
             const tagNameNode = tag.querySelector('.ibexa-taggify__list-tag-name');
 
-            this.addElementAttributes(tag, attrs);
+            this.addElementAttributes(tag, { ...attrs, dataset: { ...attrs.dataset, value } });
             this.addElementAttributes(tagNameNode, tooltipAttrs);
             this.attachEventsToTag(tag, value);
             this.listNode.insertBefore(tag, this.inputNode);
             this.tags.add(value);
             this.afterTagsUpdate();
         }
 
+        removeTagWithValue(value) {
+            const tag = this.listNode.querySelector(`.ibexa-taggify__list-tag[data-value="${value}"]`);
+
+            if (tag) {
+                this.removeTag(tag, value);
+            }
+        }
+
         removeTag(tag, value) {
             this.tags.delete(value);
 
@@ -61,26 +87,49 @@
             this.afterTagsUpdate();
         }
 
+        removeAllTags() {
+            this.tags.forEach((tag) => {
+                const tagNode = this.listNode.querySelector(`.ibexa-taggify__list-tag[data-value="${tag}"]`);
+
+                if (tagNode) {
+                    tagNode.remove();
+                }
+            });
+
+            this.tags.clear();
+            this.afterTagsUpdate();
+        }
+
         attachEventsToTag(tag, value) {
             const removeBtn = tag.querySelector('.ibexa-taggify__btn--remove');
 
             removeBtn.addEventListener('click', () => this.removeTag(tag, value), false);
         }
 
+        handleInputBlur() {
+            const inputValue = this.inputNode.value.trim();
+
+            this.addTag(inputValue, inputValue);
+            this.inputNode.value = '';
+        }
+
         handleInputKeyUp(event) {
             if (this.tagsPattern && !this.tagsPattern.test(this.inputNode.value)) {
                 return;
             }
 
-            if (this.isAcceptKeyPressed(event.key) && this.inputNode.value && !this.tags.has(this.inputNode.value)) {
-                this.addTag(this.inputNode.value, this.inputNode.value);
+            if (this.isAcceptKeyPressed(event.key)) {
+                const nameWithoutAcceptKey = this.removeAcceptKey(this.inputNode.value);
+
+                this.addTag(nameWithoutAcceptKey, nameWithoutAcceptKey);
 
                 this.inputNode.value = '';
             }
         }
 
         init() {
             this.inputNode.addEventListener('keyup', this.handleInputKeyUp, false);
+            this.inputNode.addEventListener('blur', this.handleInputBlur, false);
         }
     }