After CR

Author: OstafinL

src/bundle/Resources/public/js/scripts/admin.location.view.js

@@ -8,18 +8,22 @@
     const queryString = window.location.search;
     const urlParams = new URLSearchParams(queryString);
     const publishedContentId = urlParams.get('publishedContentId');
+    const sendForm = () => {
+        doc.querySelector('#form_subitems_content_edit_create').click();
+    };
+    const updateForm = (contentId, languageCode) => {
+        doc.querySelector('#form_subitems_content_edit_content_info').value = contentId;
+        doc.querySelector(`#form_subitems_content_edit_language_${languageCode}`).checked = true;
+    };
     const handleEditItem = (content, location, isLanguageSelectorOpened) => {
         const contentId = content._id;
         const locationId = location._id;
         const languageCode = content.mainLanguageCode;
         const checkVersionDraftLink = Routing.generate('ibexa.version_draft.has_no_conflict', { contentId, languageCode, locationId });
-        const updateForm = () => {
-            doc.querySelector('#form_subitems_content_edit_content_info').value = contentId;
-            doc.querySelector(`#form_subitems_content_edit_language_${languageCode}`).checked = true;
-        };
+
         const addDraft = () => {
-            updateForm();
-            doc.querySelector('#form_subitems_content_edit_create').click();
+            updateForm(contentId, languageCode);
+            sendForm();
             bootstrap.Modal.getOrCreateInstance(doc.querySelector('#version-draft-conflict-modal')).hide();
         };
         const attachModalListeners = (wrapper) => {
@@ -74,10 +78,10 @@
                 if (response.status === 409) {
                     response.text().then(showModal);
                 } else if (response.status === 200) {
-                    updateForm();
+                    updateForm(contentId, languageCode);
 
                     if (!isLanguageSelectorOpened) {
-                        doc.querySelector('#form_subitems_content_edit_create').click();
+                        sendForm();
                     }
                 }
             })
@@ -205,7 +209,7 @@
     doc.body.addEventListener(
         'ibexa-sub-items:submit-version-edit-form',
         () => {
-            doc.querySelector('#form_subitems_content_edit_create').click();
+            sendForm();
         },
         false,
     );

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

@@ -77,8 +77,8 @@
         <note>key: edit.languages.edit</note>
       </trans-unit>
       <trans-unit id="36c14ac08f24f86dbd38979c15f7ddaa9447d8c8" resname="instant.filter.languages.placeholder">
-        <source>instant.filter.languages.placeholder</source>
-        <target state="new">instant.filter.languages.placeholder</target>
+        <source>Search...</source>
+        <target state="new">Search...</target>
         <note>key: instant.filter.languages.placeholder</note>
       </trans-unit>
       <trans-unit id="de8bb1e6f538f44a79b62917155d15d17691211c" resname="instant.filter.languages.select_language.desc">

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

@@ -201,11 +201,6 @@
         <target state="new">Hide</target>
         <note>key: hide_locations_btn.label</note>
       </trans-unit>
-      <trans-unit id="36c14ac08f24f86dbd38979c15f7ddaa9447d8c8" resname="instant.filter.languages.placeholder">
-        <source>Search...</source>
-        <target state="new">Search...</target>
-        <note>key: instant.filter.languages.placeholder</note>
-      </trans-unit>
       <trans-unit id="de8bb1e6f538f44a79b62917155d15d17691211c" resname="instant.filter.languages.select_language.desc">
         <source>Languages</source>
         <target state="new">Languages</target>

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

@@ -191,6 +191,11 @@
         <target state="new">Items already added to the list are marked as selected and unable to deselect.</target>
         <note>key: init_selected_locations.alert.title</note>
       </trans-unit>
+      <trans-unit id="36c14ac08f24f86dbd38979c15f7ddaa9447d8c8" resname="instant.filter.languages.placeholder">
+        <source>Search...</source>
+        <target state="new">Search...</target>
+        <note>key: instant.filter.languages.placeholder</note>
+      </trans-unit>
       <trans-unit id="2d4febe56a341671c069ff47b6e6adfd2bba005c" resname="limitation.pick.error">
         <source>Could not fetch content names</source>
         <target state="new">Could not fetch content names</target>

src/bundle/Resources/views/themes/admin/ui/component/edit_content_translation_select.html.twig

@@ -12,8 +12,7 @@
     }|merge(data_attr|default({})) %}
 
 <div {{ html.attributes(container_attr) }}>
-    {% block before_body %}
-    {% endblock %}
+    {% block before_body %}{% endblock %}
 
     {% block header %}
         {% if title %}
@@ -40,8 +39,7 @@
                     </div>
                 {% endif %}
 
-                {% block content_items %}
-                {% endblock %}
+                {% block content_items %}{% endblock %}
             </div>
         </div>
     {% endblock %}
@@ -52,6 +50,5 @@
         </div>
     {% endblock %}
 
-    {% block after_body %}
-    {% endblock %}
-</div>
+    {% block after_body %}{% endblock %}
+</div>

src/bundle/ui-dev/src/modules/sub-items/components/sub-items-list/instant.filter.component.js

@@ -1,50 +1,32 @@
-import React, { useEffect, useState, useRef } from 'react';
+import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
 import { createCssClassNames } from '@ibexa-admin-ui-modules/common/helpers/css.class.names';
 
-const FILTER_TIMEOUT = 200;
-
 const InstantFilter = (props) => {
     const Translator = getTranslator();
-    const _refInstantFilter = useRef(null);
     const [filterQuery, setFilterQuery] = useState('');
-    const [itemsMap, setItemsMap] = useState([]);
     const searchInputWrapperClassName = createCssClassNames({
         'ibexa-instant-filter__input-wrapper': true,
-        'ibexa-instant-filter__input-wrapper--hidden': !props.hasSearchEnabled,
+        'ibexa-instant-filter__input-wrapper--hidden': !props.isSearchEnabled,
     });
-    let filterTimeout = null;
-
-    useEffect(() => {
-        const items = [..._refInstantFilter.current.querySelectorAll('.ibexa-instant-filter__item')];
-        const itemsMapNext = items.map((item) => ({
-            label: item.textContent.toLowerCase(),
-            element: item,
-        }));
+    const filteredItems = useMemo(() => {
+        if (!filterQuery) {
+            return props.items;
+        }
 
-        setItemsMap(itemsMapNext);
-    }, [props.items]);
-
-    useEffect(() => {
         const filterQueryLowerCase = filterQuery.toLowerCase();
 
-        filterTimeout = window.setTimeout(() => {
-            itemsMap.forEach((item) => {
-                const methodName = item.label.includes(filterQueryLowerCase) ? 'removeAttribute' : 'setAttribute';
-
-                item.element[methodName]('hidden', true);
-            });
-        }, FILTER_TIMEOUT);
+        return props.items.filter((item) => {
+            const itemLabelLowerCase = item.label.toLowerCase();
 
-        return () => {
-            window.clearTimeout(filterTimeout);
-        };
-    }, [filterQuery]);
+            return itemLabelLowerCase.includes(filterQueryLowerCase);
+        });
+    }, [props.items, filterQuery]);
 
     return (
-        <div className="ibexa-instant-filter" ref={_refInstantFilter}>
+        <div className="ibexa-instant-filter">
             <div className={searchInputWrapperClassName}>
                 <input
                     type="text"
@@ -58,7 +40,7 @@ const InstantFilter = (props) => {
                 {Translator.trans(/*@Desc("Languages")*/ 'instant.filter.languages.select_language.desc', {}, 'ibexa_sub_items')}
             </div>
             <div className="ibexa-instant-filter__items">
-                {props.items.map((item) => {
+                {filteredItems.map((item) => {
                     const radioId = `item_${item.value}`;
                     const labelClassName = createCssClassNames({
                         'form-check-label': true,
@@ -91,14 +73,14 @@ const InstantFilter = (props) => {
 };
 
 InstantFilter.propTypes = {
-    hasSearchEnabled: PropTypes.bool,
+    isSearchEnabled: PropTypes.bool,
     activeLanguage: PropTypes.string,
     items: PropTypes.array,
     handleItemChange: PropTypes.func,
 };
 
 InstantFilter.defaultProps = {
-    hasSearchEnabled: true,
+    isSearchEnabled: true,
     activeLanguage: '',
     items: [],
     handleItemChange: () => {},

src/bundle/ui-dev/src/modules/sub-items/components/sub-items-list/language.selector.compoment.js

@@ -13,13 +13,13 @@ const LanguageSelector = (props) => {
     const discardBtnRef = useRef(null);
     const submitBtnRef = useRef(null);
     const [activeLanguage, setActiveLanguage] = useState('');
-    const hasSearchEnabled = props.languageItems.length >= MIN_ITEMS_WITH_SEARCH;
+    const isSearchEnabled = props.languageItems.length >= MIN_ITEMS_WITH_SEARCH;
     const className = createCssClassNames({
         'c-language-selector': true,
         'ibexa-extra-actions': true,
         'ibexa-extra-actions--edit': true,
         'ibexa-extra-actions--hidden': !props.isOpen,
-        'ibexa-extra-actions--has-search': hasSearchEnabled,
+        'ibexa-extra-actions--has-search': isSearchEnabled,
     });
     const closeLanguageSelector = (event) => {
         if (!event.target.closest('.c-table-view-item__btn') && !event.target.classList.contains('ibexa-instant-filter__input')) {
@@ -60,7 +60,7 @@ const LanguageSelector = (props) => {
                     items={props.languageItems}
                     activeLanguage={activeLanguage}
                     handleItemChange={handleItemChange}
-                    hasSearchEnabled={hasSearchEnabled}
+                    isSearchEnabled={isSearchEnabled}
                 />
             </div>
             <div className="ibexa-extra-actions__confirm-wrapper">

src/bundle/ui-dev/src/modules/universal-discovery/components/translation-selector/translation.selector.js

@@ -1,22 +1,19 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { createCssClassNames } from '../../../common/helpers/css.class.names';
 
 import { getAdminUiConfig, getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
 
 const MIN_ITEMS_WITH_SEARCH = 10;
-const FILTER_TIMEOUT = 200;
 
 const TranslationSelectorButton = ({ hideTranslationSelector, selectTranslation, version, isOpen }) => {
     const Translator = getTranslator();
     const adminUiConfig = getAdminUiConfig();
-    const _refInstantFilter = useRef(null);
     const [filterQuery, setFilterQuery] = useState('');
-    const [itemsMap, setItemsMap] = useState([]);
     const [activeLanguage, setActiveLanguage] = useState('');
     const languageCodes = version ? version.VersionInfo.languageCodes.split(',') : [];
-    const hasSearchEnabled = languageCodes.length >= MIN_ITEMS_WITH_SEARCH;
+    const isSearchEnabled = languageCodes.length >= MIN_ITEMS_WITH_SEARCH;
     const editTranslationLabel = Translator.trans(
         /*@Desc("Select translation")*/ 'meta_preview.edit_translation',
         {},
@@ -26,33 +23,28 @@ const TranslationSelectorButton = ({ hideTranslationSelector, selectTranslation,
         setFilterQuery('');
         setActiveLanguage('');
     };
+    const getLanguageName = (languageCode, lowerCase = true) => {
+        const language = window.ibexa.adminUiConfig.languages.mappings[languageCode];
 
-    let filterTimeout = null;
+        if (!language) {
+            return null;
+        }
 
-    useEffect(() => {
-        const items = [..._refInstantFilter.current.querySelectorAll('.ibexa-instant-filter__item')];
-        const itemsMapNext = items.map((item) => ({
-            label: item.textContent.toLowerCase(),
-            element: item,
-        }));
+        return lowerCase ? language.name.toLowerCase() : language.name;
+    };
 
-        setItemsMap(itemsMapNext);
-    }, []);
+    const filteredLanguageCodes = useMemo(() => {
+        if (!filterQuery) {
+            return languageCodes;
+        }
 
-    useEffect(() => {
         const filterQueryLowerCase = filterQuery.toLowerCase();
 
-        filterTimeout = window.setTimeout(() => {
-            itemsMap.forEach((item) => {
-                const methodName = item.label.includes(filterQueryLowerCase) ? 'removeAttribute' : 'setAttribute';
-
-                item.element[methodName]('hidden', true);
-            });
-        }, FILTER_TIMEOUT);
+        return languageCodes.filter((languageCode) => {
+            const languageNameLowerCase = getLanguageName(languageCode);
 
-        return () => {
-            window.clearTimeout(filterTimeout);
-        };
+            return languageNameLowerCase.includes(filterQueryLowerCase);
+        });
     }, [filterQuery]);
 
     useEffect(() => {
@@ -61,20 +53,20 @@ const TranslationSelectorButton = ({ hideTranslationSelector, selectTranslation,
         }
     }, [isOpen]);
 
-    const className = createCssClassNames({
+    const containerClassName = createCssClassNames({
         'c-translation-selector': true,
         'ibexa-extra-actions': true,
         'ibexa-extra-actions--edit': true,
         'ibexa-extra-actions--full-height': true,
         'ibexa-extra-actions--hidden': !isOpen,
-        'ibexa-extra-actions--has-search': hasSearchEnabled,
+        'ibexa-extra-actions--has-search': isSearchEnabled,
     });
     const searchInputWrapperClassName = createCssClassNames({
         'ibexa-instant-filter__input-wrapper': true,
-        'ibexa-instant-filter__input-wrapper--hidden': !hasSearchEnabled,
+        'ibexa-instant-filter__input-wrapper--hidden': !isSearchEnabled,
     });
     const renderLanguages = () => {
-        return languageCodes.map((languageCode) => {
+        return filteredLanguageCodes.map((languageCode) => {
             const languageNodeClassName = createCssClassNames({
                 'ibexa-instant-filter__item': true,
                 'ibexa-instant-filter__item--active': activeLanguage === languageCode,
@@ -89,20 +81,20 @@ const TranslationSelectorButton = ({ hideTranslationSelector, selectTranslation,
     };
 
     return (
-        <div className={className}>
+        <div className={containerClassName}>
             <div className="ibexa-extra-actions__header">
                 <h2 className="ibexa-extra-actions__header-content">{editTranslationLabel}</h2>
             </div>
             <div className="ibexa-extra-actions__content">
-                <div className="ibexa-instant-filter" ref={_refInstantFilter}>
+                <div className="ibexa-instant-filter">
                     <div className={searchInputWrapperClassName}>
                         <input
                             type="text"
                             className="ibexa-instant-filter__input ibexa-input ibexa-input--text form-control"
                             placeholder={Translator.trans(
                                 /*@Desc("Search...")*/ 'instant.filter.languages.placeholder',
                                 {},
-                                'ibexa_sub_items',
+                                'ibexa_universal_discovery_widget',
                             )}
                             value={filterQuery}
                             onChange={(event) => setFilterQuery(event.target.value)}