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

Author: sidolov

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'
+                    }
+                );
             });
         });
     });