Move fixes for url-filter component to separate PR

Author: Nazar65

app/code/Magento/Catalog/view/adminhtml/templates/product/grid/url_filter_applier.phtml

@@ -10,8 +10,7 @@
     {
         "*": {
             "Magento_Ui/js/grid/url-filter-applier": {
-                "listingNamespace": "product_listing",
-                "filterComponentName": "asset_id"
+                "listingNamespace": "product_listing"
             }
         }
     }

app/code/Magento/Cms/view/adminhtml/templates/url_filter_applier.phtml

@@ -11,8 +11,7 @@
     {
         "*": {
             "Magento_Ui/js/grid/url-filter-applier": {
-                "listingNamespace": "<?= $escaper->escapeJs($block->getListingNamespace()) ?>",
-                "filterComponentName": "asset_id"
+                "listingNamespace": "<?= $escaper->escapeJs($block->getListingNamespace()) ?>"
             }
         }
     }

app/code/Magento/MediaGalleryUi/Controller/Adminhtml/Asset/Search.php

@@ -137,9 +137,9 @@ public function execute()
             if (!empty($assets)) {
                 foreach ($assets as $asset) {
                     $responseContent['options'][] = [
-                        'value' => (string) $asset->getId(),
+                        'value' => $asset->getId(),
                         'label' => $asset->getTitle(),
-                        'src' => $this->storage->getThumbnailUrl($this->images->getStorageRoot() . $asset->getPath())
+                        'path' => $this->storage->getThumbnailUrl($this->images->getStorageRoot() . $asset->getPath())
                     ];
                     $responseContent['total'] = count($responseContent['options']);
                 }

app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/image/image-details.js

@@ -161,10 +161,7 @@ define([
          * @param {String} link
          */
         getFilterUrl: function (link) {
-            return link + '?filters[asset_id]=[' + this.image().id + ']' +
-                '&options[]=[value=' + this.image().id +
-                ',label="' + this.image().title +
-                '",src=' + this.image()['image_url'] + ']';
+            return link + '?filters[asset_id]=[' + this.image().id + ']';
         },
 
         /**

app/code/Magento/MediaGalleryUi/view/adminhtml/web/template/grid/filters/elements/ui-select.html

@@ -108,8 +108,9 @@
                         </if>
                         <label class="admin__action-multiselect-label">
                             <span text="option.label"></span>
-                            <img class="admin__action-multiselect-item-path"
-                                 attr="{ src: option.src }"/>
+                            <img if="$parent.getPath(option)"
+                                 class="admin__action-multiselect-item-path"
+                                 attr="{ src: option.path }"/>
                         </label>
                     </div>
                     <if args="$data.optgroup">

app/code/Magento/Ui/view/base/web/js/grid/url-filter-applier.js

@@ -12,15 +12,11 @@ define([
     return Component.extend({
         defaults: {
             listingNamespace: null,
-            filterComponentName: null,
-            selectProvider: 'index = ${ $.filterComponentName }, ns = ${ $.listingNamespace }',
             filterProvider: 'componentType = filters, ns = ${ $.listingNamespace }',
             filterKey: 'filters',
-            optionsKey: 'options',
             searchString: location.search,
             modules: {
-                filterComponent: '${ $.filterProvider }',
-                selectComponent: '${ $.selectProvider }'
+                filterComponent: '${ $.filterProvider }'
             }
         },
 
@@ -40,22 +36,16 @@ define([
          * Apply filter
          */
         apply: function () {
-            var urlFilter = this.getFilterParam(this.searchString),
-                options = this.getOptionsParam(this.searchString);
+            var urlFilter = this.getFilterParam(this.searchString);
 
-            if (_.isUndefined(this.filterComponent()) ||
-                !_.isNull(this.filterComponentName) && _.isUndefined(this.selectComponent())) {
+            if (_.isUndefined(this.filterComponent())) {
                 setTimeout(function () {
                     this.apply();
                 }.bind(this), 100);
 
                 return;
             }
 
-            if (Object.keys(options).length) {
-                this.selectComponent().options(options);
-            }
-
             if (Object.keys(urlFilter).length) {
                 this.filterComponent().setData(urlFilter, false);
                 this.filterComponent().apply();
@@ -90,55 +80,6 @@ define([
                 .compact()
                 .object()
                 .value();
-        },
-
-        /**
-         * Get Filter options
-         *
-         * @param {String} url
-         */
-        getOptionsParam: function (url) {
-            var params = [],
-                chunks,
-                values,
-                i,
-                options,
-                searchString = decodeURI(url);
-
-            _.chain(searchString.slice(1).split('&'))
-                .map(function (item, k) {
-                    if (item && item.search(this.optionsKey) !== -1) {
-                        chunks = item.substring(item.indexOf('?') + 1).split('&');
-
-                        for (i = 0; i < chunks.length; i++) {
-                            options = chunks[i].substring(item.indexOf('[]') + 3)
-                                .replace(/[\[\]]/g, '')
-                                .split(/,(?=(?:(?:[^"]*"){2})*[^"]*$)/);
-                            values = this.getOptionsValues(options);
-
-                        }
-                        params[k - 1] = values;
-                    }
-                }.bind(this));
-
-            return params;
-        },
-
-        /**
-         * Return options values as array
-         *
-         * @param {Array} options
-         * @return {Array}
-         */
-        getOptionsValues: function (options) {
-            var values = {},
-                j;
-
-            for (j = 0; j < options.length; j++) {
-                values[options[j].split('=')[0]] = options[j].split('=')[1];
-            }
-
-            return values;
         }
     });
 });

dev/tests/js/jasmine/tests/app/code/Magento/Ui/base/js/grid/url-filter-applier.test.js

@@ -14,15 +14,11 @@ define([
             filterComponentMock = {
                 setData: jasmine.createSpy(),
                 apply: jasmine.createSpy()
-            },
-            selectComponentMock = {
-                options: jasmine.createSpy()
             };
 
         beforeEach(function () {
             urlFilterApplierObj = new UrlFilterApplier({});
             urlFilterApplierObj.filterComponent = jasmine.createSpy().and.returnValue(filterComponentMock);
-            urlFilterApplierObj.selectComponent = jasmine.createSpy().and.returnValue(selectComponentMock);
         });
 
         describe('"getFilterParam" method', function () {
@@ -57,21 +53,6 @@ define([
                     'qty': '1'
                 });
             });
-            it('return object from url with multiple options for select filters', function () {
-                var urlSearch = '?filters[name]=[27,23]&options[]=[value=27,' +
-                    'label=Label]&options[]=[value=23,label=Label2]&filters[qty]=1&anotherparam=1';
-
-                expect(urlFilterApplierObj.getOptionsParam(urlSearch)).toEqual([
-                    {
-                        value: '27',
-                        label: 'Label'
-                    },
-                    {
-                        value: '23',
-                        label: 'Label2'
-                    }
-                ]);
-            });
             it('return object from url with another parameter', function () {
                 var urlSearch = '?anotherparam=1';
 
@@ -81,21 +62,12 @@ define([
 
         describe('"apply" method', function () {
             it('applies url filter on filter component', function () {
-                urlFilterApplierObj.searchString = '?filters[name]=test' +
-                    '&options[]=[value=23,label=Label]&filters[qty]=1';
+                urlFilterApplierObj.searchString = '?filters[name]=test&filters[qty]=1';
                 urlFilterApplierObj.apply();
                 expect(urlFilterApplierObj.filterComponent().setData).toHaveBeenCalledWith({
                     'name': 'test',
                     'qty': '1'
                 }, false);
-                expect(urlFilterApplierObj.selectComponent().options).toHaveBeenCalledWith(
-                    [
-                        {
-                            value: '23',
-                            label: 'Label'
-                        }
-                    ]
-                );
                 expect(urlFilterApplierObj.filterComponent().apply).toHaveBeenCalled();
             });
         });