ENGCOM-7975: Refactor massactionView, remove adobe-stock references #29438

Author: lenaorobei

app/code/Magento/MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryEnableMassActionModeActionGroup.xml

@@ -13,7 +13,7 @@
             <description>Activate massaction mode by click on Delete Selected..</description>
         </annotations>
 
-        <waitForElementVisible selector="{{AdminEnhancedMediaGalleryMassActionSection.deleteSelected}}" stepKey="waitForMassActionButton"/>
-        <click selector="{{AdminEnhancedMediaGalleryMassActionSection.deleteSelected}}" stepKey="clickOnMassActionButton"/>
+        <waitForElementVisible selector="{{AdminEnhancedMediaGalleryMassActionSection.deleteImages}}" stepKey="waitForMassActionButton"/>
+        <click selector="{{AdminEnhancedMediaGalleryMassActionSection.deleteImages}}" stepKey="clickOnMassActionButton"/>
     </actionGroup>
 </actionGroups>

app/code/Magento/MediaGalleryUi/Test/Mftf/Section/AdminEnhancedMediaGalleryMassActionSection.xml

@@ -11,6 +11,7 @@
         <element name="massActionCheckbox" type="button" selector="//input[@type='checkbox'][@data-ui-id ='{{imageName}}']" parameterized="true"/>
         <element name="totalSelected" type="text" selector=".mediagallery-massaction-items-count > .selected_count_text"/>
         <element name="cancelMassActionMode" type="button" selector="#cancel_massaction"/>
-        <element name="deleteSelected" type="button" selector="#delete_massaction"/>
+        <element name="deleteImages" type="button" selector="#delete_massaction"/>
+        <element name="deleteSelected" type="button" selector="#delete_selected_massaction"/>
     </section>
 </sections>

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

@@ -311,7 +311,7 @@
             }
         }
 
-        .adobe-stock-icon {
+        .media-gallery-source-icon {
             margin-bottom: -6px;
             width: 29px;
         }
@@ -370,7 +370,7 @@
         }
 
         .image-type {
-            .adobe-stock-icon {
+            .media-gallery-source-icon {
                 margin-bottom: -6px;
                 width: 29px;
             }

app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/grid/columns/image.js

@@ -103,6 +103,7 @@ define([
          */
         updateSelected: function () {
             this.selected({});
+            this.hideAddSelectedAndDeleteButon();
         },
 
         /**

app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactionView.js

@@ -7,33 +7,23 @@ define([
     'jquery',
     'uiComponent',
     'mage/translate',
-    'text!Magento_MediaGalleryUi/template/grid/massactions/cancelButton.html'
-], function ($, Component, $t, cancelMassActionButton) {
+    'text!Magento_MediaGalleryUi/template/grid/massactions/massactionButtons.html'
+], function ($, Component, $t, massactionButtons) {
     'use strict';
 
     return Component.extend({
         defaults: {
-            pageActionsSelector: '.page-actions-buttons',
             gridSelector: '[data-id="media-gallery-masonry-grid"]',
-            originDeleteSelector: null,
-            originCancelEvent: null,
-            cancelMassactionButton: cancelMassActionButton,
-            isCancelButtonInserted: false,
-            deleteButtonSelector: '#delete_massaction',
-            addSelectedButtonSelector: '#add_selected',
-            cancelMassactionButtonSelector: '#cancel',
             standAloneTitle: 'Manage Gallery',
             slidePanelTitle: 'Media Gallery',
             defaultTitle: null,
-            contextButtonSelector: '.three-dots',
-            buttonsIds: [
-                '#delete_folder',
-                '#create_folder',
-                '#upload_image',
-                '#search_adobe_stock',
-                '.three-dots',
-                '#add_selected'
-            ],
+            are: null,
+            standAloneArea: 'standalone',
+            slidepanelArea: 'slidepanel',
+            massactionButtonsSelector: '.massaction-buttons',
+            buttonsSelectorStandalone: '.page-actions-buttons',
+            buttonsSelectorSlidePanel: '.page-actions.floating-header',
+            buttons: '.page-main-actions :button',
             massactionModeTitle: $t('Select Images to Delete')
         },
 
@@ -62,7 +52,6 @@ define([
          * Hide or show buttons per active mode.
          */
         switchButtons: function () {
-
             if (this.massActionMode()) {
                 this.activateMassactionButtonView();
             } else {
@@ -74,66 +63,40 @@ define([
          * Sets buttons to default regular -mode view.
          */
         revertButtonsToDefaultView: function () {
-            $(this.deleteButtonSelector).replaceWith(this.originDeleteSelector);
-
-            if (!this.isCancelButtonInserted) {
-                $('#cancel_massaction').replaceWith(this.originCancelEvent);
-            } else {
-                $(this.cancelMassactionButtonSelector).addClass('no-display');
-                $('#cancel_massaction').remove();
-            }
-
-            $.each(this.buttonsIds, function (key, value) {
-                $(value).removeClass('no-display');
-            });
-
-            $(this.addSelectedButtonSelector).addClass('no-display');
-            $(this.deleteButtonSelector)
-                .addClass('media-gallery-actions-buttons')
-                .removeClass('primary');
+            $(this.buttons).removeClass('no-display');
+            $(this.massactionButtonsSelector).remove();
         },
 
         /**
           * Activate mass action buttons view
           */
         activateMassactionButtonView: function () {
-            this.originDeleteSelector = $(this.deleteButtonSelector).clone();
-            $(this.originDeleteSelector).click(function () {
-                $(window).trigger('massAction.MediaGallery');
-            });
-            this.originCancelEvent = $('#cancel').clone(true, true);
+            var buttonsContainer;
 
-            $.each(this.buttonsIds, function (key, value) {
-                $(value).addClass('no-display');
-            });
+            $(this.buttons).addClass('no-display');
 
-            $(this.deleteButtonSelector)
-                .removeClass('media-gallery-actions-buttons')
-                .text($t('Delete Selected'))
-                .addClass('primary');
-
-            if (!$(this.cancelMassactionButtonSelector).length) {
-                $(this.pageActionsSelector).append(this.cancelMassactionButton);
-                this.isCancelButtonInserted = true;
-            } else {
-                $(this.cancelMassactionButtonSelector).replaceWith(this.cancelMassactionButton);
-            }
-            $('#cancel_massaction').on('click', function () {
-                $(window).trigger('terminateMassAction.MediaGallery');
-            }).applyBindings();
-
-            $(this.deleteButtonSelector).off('click').on('click', function () {
-                $(this.deleteButtonSelector).trigger('massDelete');
-            }.bind(this));
+            buttonsContainer =  this.area === this.standAloneArea ?
+                this.buttonsSelectorStandalone :
+                this.buttonsSelectorSlidePanel;
 
+            $(buttonsContainer).append(massactionButtons);
+            $(this.massactionButtonsSelector).applyBindings();
         },
 
         /**
          * Change page title per active mode.
          */
         changePageTitle: function () {
             var title = $('h1:contains(' + this.standAloneTitle + ')'),
-                  titleSelector = title.length === 1 ? title : $('h1:contains(' + this.slidePanelTitle + ')');
+                titleSelector;
+
+            if (title.length === 1)  {
+                titleSelector = title;
+                this.area = this.standAloneArea;
+            } else {
+                titleSelector = $('h1:contains(' + this.slidePanelTitle + ')');
+                this.area = this.slidepanelArea;
+            }
 
             if (this.massActionMode()) {
                 this.defaultTitle = titleSelector.text();

app/code/Magento/MediaGalleryUi/view/adminhtml/web/js/grid/massaction/massactions.js

@@ -16,6 +16,7 @@ define([
 
     return Component.extend({
         defaults: {
+            deleteButtonSelector: '#delete_selected_massaction',
             deleteImagesSelector: '#delete_massaction',
             mediaGalleryImageDetailsName: 'mediaGalleryImageDetails',
             modules: {
@@ -86,6 +87,7 @@ define([
 
                 this.massActionMode(false);
                 this.switchMode();
+                this.imageModel().updateSelected();
             }.bind(this));
         },
 
@@ -124,7 +126,7 @@ define([
          */
         handleDeleteAction: function () {
             if (this.massActionMode()) {
-                $(this.massactionView().deleteButtonSelector).on('massDelete', function () {
+                $(this.deleteButtonSelector).on('massDelete.MediaGallery', function () {
                     if (this.getSelectedCount() < 1) {
                         uiAlert({
                             content: $t('You need to select at least one image')

app/code/Magento/MediaGalleryUi/view/adminhtml/web/template/grid/columns/image.html

@@ -29,7 +29,7 @@
         <ul class="media-gallery-image-details">
             <li class="name" data-ui-id="title" text="$row().title"></li>
             <li class="source">
-                <img if="$row().source" class="adobe-stock-icon" attr="{ src: $row().source }"/>
+                <img if="$row().source" class="media-gallery-source-icon" attr="{ src: $row().source }"/>
             </li>
             <li class="type" data-ui-id="content-type" text="$row().content_type"></li> &#8226;
             <li class="dimensions" data-ui-id="dimensions" text="$row().width + 'x' + $row().height"></li>

app/code/Magento/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/cancelButton.html

@@ -0,0 +1,13 @@
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+
+<button id="cancel_massaction" type="button" onclick="jQuery(window).trigger('terminateMassAction.MediaGallery')" class="massaction-buttons cancel">
+  <span data-bind="i18n: 'Cancel'"/>
+</button>
+<button id="delete_selected_massaction" onclick="jQuery('#delete_selected_massaction').trigger('massDelete.MediaGallery')"  type="button" class="primary massaction-buttons cancel">
+  <span data-bind="i18n: 'Delete Selected'"/>
+</button>

app/code/Magento/MediaGalleryUi/view/adminhtml/web/template/grid/massactions/massactionButtons.html

@@ -12,7 +12,7 @@
         <div class="image-details-section">
             <h3 class="image-title" text="image().title"></h3>
             <div class="image-type">
-                <span class="source"><img if="image().source" class="adobe-stock-icon" attr="{ src: image().source }" /></span>
+                <span class="source"><img if="image().source" class="media-gallery-source-icon" attr="{ src: image().source }" /></span>
                 <span class="type" data-ui-id="content-type" text="image().content_type"></span>
             </div>
         </div>