ENGCOM-8047: FIx text and images are displayed cropped if folder has long name && Filters isn\`t applied on the 'Category' #29633

 - Merge Pull Request #29633 from Nazar65/magento2:ASI-1758
 - Merged commits:
   1. 9fd19aa
   2. 084f689
   3. 363a100
   4. 702d201
   5. 58b7d3b
   6. 3757078
   7. a246993
   8. 773c20c
   9. 523a8c9
   10. c7d50bb
   11. 18e7988
   12. 8c0e991
   13. 9a2880d
   14. 141434f
   15. 22e613c
   16. 338f510
   17. a572253
   18. 51188d9

Author: magento-engcom-team

app/code/Magento/Catalog/Test/Mftf/Test/AdminProductGridUrlFilterApplierTest.xml

@@ -31,11 +31,11 @@
             <actionGroup ref="AdminLogoutActionGroup" stepKey="logoutOfAdmin"/>
         </after>
 
-        <amOnPage url="{{AdminProductIndexPage.url}}?filters[name]=$createSimpleProduct.name$" stepKey="navigateToProductGridWithFilters"/>
+        <amOnPage url="{{AdminProductIndexPage.url}}?filters[sku]=$createSimpleProduct.sku$" stepKey="navigateToProductGridWithFilters"/>
         <waitForPageLoad stepKey="waitForProductGrid"/>
         <see selector="{{AdminProductGridSection.productGridNameProduct($createSimpleProduct.name$)}}" userInput="$createSimpleProduct.name$" stepKey="seeProduct"/>
         <waitForElementVisible selector="{{AdminProductGridFilterSection.enabledFilters}}" stepKey="waitForEnabledFilters"/>
         <seeElement selector="{{AdminProductGridFilterSection.enabledFilters}}" stepKey="seeEnabledFilters"/>
-        <see selector="{{AdminProductGridFilterSection.enabledFilters}}" userInput="Name: $createSimpleProduct.name$" stepKey="seeProductNameFilter"/>
+        <see selector="{{AdminProductGridFilterSection.enabledFilters}}" userInput="SKU: $createSimpleProduct.sku$" stepKey="seeProductNameFilter"/>
     </test>
 </tests>

app/code/Magento/MediaGalleryCatalogUi/Test/Mftf/Test/AdminMediaGalleryCatalogUiVerifyUsedInLinkCategoryGridTest.xml

@@ -60,5 +60,16 @@
         <actionGroup ref="AdminMediaGalleryAssertCategoryNameInCategoryGridActionGroup" stepKey="assertCategoryInGrid">
             <argument name="categoryName" value="$$category.name$$"/>
         </actionGroup>
+        <actionGroup ref="ClearFiltersAdminDataGridActionGroup" stepKey="clearFilters"/>
+        <actionGroup ref="AdminOpenCategoryGridPageActionGroup" stepKey="openCategoryPageToVerifyIfFilterCanBeApplied"/>
+        <actionGroup ref="AdminEnhancedMediaGalleryCategoryGridExpandFilterActionGroup" stepKey="expandFilters"/>
+        <actionGroup ref="AdminEnhancedMediaGallerySelectUsedInFilterActionGroup" stepKey="setAssetFilter">
+            <argument name="filterName" value="Asset"/>
+            <argument name="optionName" value="{{UpdatedImageDetails.title}}"/>
+        </actionGroup>
+        <actionGroup ref="AdminEnhancedMediaGalleryCategoryGridApplyFiltersActionGroup" stepKey="applyFilters"/>
+        <actionGroup ref="AssertAdminMediaGalleryAssetFilterPlaceHolderActionGroup" stepKey="assertFilterAppliedAfterUrlFilterApplier">
+            <argument name="filterPlaceholder" value="{{UpdatedImageDetails.title}}"/>
+        </actionGroup>
    </test>
 </tests>

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

@@ -18,7 +18,7 @@
 @color-media-gallery-buttons-border: #adadad;
 @color-media-gallery-buttons-text: #514943;
 @color-media-gallery-checkbox-background: #eee;
-
+@color-media-gallery-scrollbar-background: #fff;
 & when (@media-common = true) {
 
     .media-gallery-delete-image-action,
@@ -170,8 +170,9 @@
             height: 30px;
             margin: 1px;
             padding-left: 6px;
+            padding-right: 10px;
             padding-top: 6px;
-            width: 100%;
+            width: max-content;
         }
 
         .jstree-default .jstree-clicked {
@@ -272,8 +273,18 @@
         }
 
         .media-directory-container {
+            &::-webkit-scrollbar {
+                background-color: @color-media-gallery-scrollbar-background;
+            }
+            &::-webkit-scrollbar-thumb {
+                background-color: @color-masonry-grey;
+            }
             float: left;
+            max-width: 50%;
+            overflow-x: scroll;
+            overflow-y: hidden;
             padding-right: 40px;
+            scrollbar-color: @color-masonry-grey @color-media-gallery-scrollbar-background;
         }
 
         .media-gallery-image-block {

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

@@ -5,8 +5,9 @@
 
 define([
     'uiComponent',
-    'underscore'
-], function (Component, _) {
+    'underscore',
+    'jquery'
+], function (Component, _, $) {
     'use strict';
 
     return Component.extend({
@@ -36,7 +37,9 @@ define([
          * Apply filter
          */
         apply: function () {
-            var urlFilter = this.getFilterParam(this.searchString);
+            var urlFilter = this.getFilterParam(this.searchString),
+                applied,
+                filters;
 
             if (_.isUndefined(this.filterComponent())) {
                 setTimeout(function () {
@@ -47,8 +50,9 @@ define([
             }
 
             if (Object.keys(urlFilter).length) {
-                this.filterComponent().setData(urlFilter, false);
-                this.filterComponent().apply();
+                applied = this.filterComponent().get('applied');
+                filters = $.extend({}, applied, urlFilter);
+                this.filterComponent().set('applied', filters);
             }
         },
 

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

@@ -12,7 +12,8 @@ define([
     describe('Magento_Ui/js/grid/url-filter-applier', function () {
         var urlFilterApplierObj,
             filterComponentMock = {
-                setData: jasmine.createSpy(),
+                set: jasmine.createSpy(),
+                get: jasmine.createSpy(),
                 apply: jasmine.createSpy()
             };
 
@@ -64,11 +65,14 @@ define([
             it('applies url filter on filter component', function () {
                 urlFilterApplierObj.searchString = '?filters[name]=test&filters[qty]=1';
                 urlFilterApplierObj.apply();
-                expect(urlFilterApplierObj.filterComponent().setData).toHaveBeenCalledWith({
-                    'name': 'test',
-                    'qty': '1'
-                }, false);
-                expect(urlFilterApplierObj.filterComponent().apply).toHaveBeenCalled();
+                expect(urlFilterApplierObj.filterComponent().get).toHaveBeenCalled();
+                expect(urlFilterApplierObj.filterComponent().set).toHaveBeenCalledWith(
+                    'applied',
+                    {
+                        'name': 'test',
+                        'qty': '1'
+                    }
+                );
             });
         });
     });