IMprove url filter applier to catch multiselect filters options

Author: Nazar65

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

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

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

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

app/code/Magento/MediaGalleryCmsUi/composer.json

@@ -5,7 +5,8 @@
         "php": "~7.3.0||~7.4.0",
         "magento/framework": "*",
         "magento/module-cms": "*",
-        "magento/module-backend": "*"
+        "magento/module-backend": "*",
+        "magento/module-ui": "*"
     },
     "type": "magento2-module",
     "license": [

app/code/Magento/MediaGalleryUi/view/adminhtml/web/css/source/_module.less

@@ -29,7 +29,8 @@
         }
     }
 
-    .media-gallery-asset-ui-select-filter, .edit-image-details {
+    .media-gallery-asset-ui-select-filter,
+    .edit-image-details {
 
         .admin__action-multiselect-crumb {
             max-width: 70%;
@@ -49,7 +50,8 @@
         }
     }
 
-    .media-gallery-asset-ui-select-filter, .edit-image-details {
+    .media-gallery-asset-ui-select-filter,
+    .edit-image-details {
         .admin__action-multiselect-item-path {
             float: right;
             max-height: 70px;
@@ -418,11 +420,13 @@
                         }
 
                         .value {
+                            margin-left: 1px;
                             display: inline;
                             float: right;
                         }
 
                         .title {
+                            height: 100px
                             color: @color-very-dark-gray;
                         }
                     }

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

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

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

@@ -12,11 +12,15 @@ define([
     return Component.extend({
         defaults: {
             listingNamespace: null,
+            selectComponentName: null,
+            selectProvider: 'index = ${ $.selectComponentName }, ns = ${ $.listingNamespace }',
             filterProvider: 'componentType = filters, ns = ${ $.listingNamespace }',
             filterKey: 'filters',
+            optionsKey: 'options',
             searchString: location.search,
             modules: {
-                filterComponent: '${ $.filterProvider }'
+                filterComponent: '${ $.filterProvider }',
+                selectComponent: '${ $.selectProvider }'
             }
         },
 
@@ -36,16 +40,23 @@ define([
          * Apply filter
          */
         apply: function () {
-            var urlFilter = this.getFilterParam(this.searchString);
+            var urlFilter = this.getFilterParam(this.searchString),
+                options = this.getOptionsParam(this.searchString);
 
-            if (_.isUndefined(this.filterComponent())) {
+            if (_.isUndefined(this.filterComponent()) ||
+                !_.isNull(this.selectComponentName) && _.isUndefined(this.selectComponent())) {
                 setTimeout(function () {
                     this.apply();
                 }.bind(this), 100);
 
                 return;
             }
 
+            if (Object.keys(options).length) {
+                this.selectComponent().options(options);
+                this.selectComponent().cacheOptions.plain = [options];
+            }
+
             if (Object.keys(urlFilter).length) {
                 this.filterComponent().setData(urlFilter, false);
                 this.filterComponent().apply();
@@ -63,12 +74,14 @@ define([
 
             return _.chain(searchString.slice(1).split('&'))
                 .map(function (item) {
+
                     if (item && item.search(this.filterKey) !== -1) {
                         itemArray = item.split('=');
 
                         if (itemArray[1].search('\\[') === 0) {
                             itemArray[1] = itemArray[1].replace(/[\[\]]/g, '').split(',');
                         }
+
                         itemArray[0] = itemArray[0].replace(this.filterKey, '')
                                 .replace(/[\[\]]/g, '');
 
@@ -78,6 +91,30 @@ define([
                 .compact()
                 .object()
                 .value();
+        },
+
+        /**
+         * Get Filter options
+         *
+         * @param {String} url
+         */
+        getOptionsParam: function (url) {
+            var searchString = decodeURI(url),
+                options;
+            options = Object.fromEntries(new URLSearchParams(searchString));
+            delete options['filters[asset_id]'];
+
+            return options;
+        },
+
+        /**
+         * Set select component options
+         *
+         * @param {Array} options
+         */
+        setOptions: function (options) {
+            this.selectComponent().options(options);
+
         }
     });
 });