Merge branch '2.4-develop' into fix-for-issue-38315

Author: engcom-Hotel

app/code/Magento/Backend/view/adminhtml/templates/media/uploader.phtml

@@ -6,6 +6,7 @@
 
 // phpcs:disable PHPCompatibility.Miscellaneous.RemovedAlternativePHPTags.MaybeASPOpenTagFound
 /** @var $block \Magento\Backend\Block\Media\Uploader */
+/** @var \Magento\Framework\Escaper $escaper */
 ?>
 
 <div id="<?= $block->getHtmlId() ?>" class="uploader"
@@ -19,9 +20,8 @@
     }'
 >
     <div class="fileinput-button form-buttons button">
-        <span><?= $block->escapeHtml(__('Browse Files...')) ?></span>
-        <input id="fileupload" type="file" name="<?= $block->escapeHtmlAttr($block->getConfig()->getFileField()) ?>"
-            data-url="<?= $block->escapeHtmlAttr($block->getConfig()->getUrl()) ?>" multiple="multiple" />
+        <span><?= $escaper->escapeHtml(__('Browse Files...')) ?></span>
+        <div id="fileUploader" data-url="<?= $escaper->escapeHtmlAttr($block->getConfig()->getUrl()) ?>"></div>
     </div>
     <div class="clear"></div>
     <script id="<?= $block->getHtmlId() ?>-template" type="text/x-magento-template" data-template="uploader">

app/code/Magento/Backend/view/adminhtml/web/js/media-uploader.js

@@ -4,6 +4,8 @@
  * See COPYING.txt for license details.
  */
 
+/* eslint-disable no-undef */
+
 /**
  * @api
  */
@@ -15,11 +17,11 @@ define([
     'Magento_Ui/js/modal/alert',
     'Magento_Ui/js/form/element/file-uploader',
     'mage/translate',
-    'jquery/file-uploader'
+    'jquery/uppy-core'
 ], function ($, mageTemplate, alert, FileUploader) {
     'use strict';
 
-    var fileUploader = new FileUploader({
+    let fileUploader = new FileUploader({
         dataScope: '',
         isMultipleFiles: true
     });
@@ -33,113 +35,149 @@ define([
          * @private
          */
         _create: function () {
-            var self = this,
+            let self = this,
+                arrayFromObj = Array.from,
                 progressTmpl = mageTemplate('[data-template="uploader"]'),
-                isResizeEnabled = this.options.isResizeEnabled,
-                resizeConfiguration = {
-                    action: 'resizeImage',
-                    maxWidth: this.options.maxWidth,
-                    maxHeight: this.options.maxHeight
+                uploaderElement = '#fileUploader',
+                targetElement = this.element.find('.fileinput-button.form-buttons')[0],
+                uploadUrl = $(uploaderElement).attr('data-url'),
+                fileId = null,
+                allowedExt = ['jpeg', 'jpg', 'png', 'gif'],
+                allowedResize = false,
+                options = {
+                    proudlyDisplayPoweredByUppy: false,
+                    target: targetElement,
+                    hideUploadButton: true,
+                    hideRetryButton: true,
+                    hideCancelButton: true,
+                    inline: true,
+                    debug:true,
+                    showRemoveButtonAfterComplete: true,
+                    showProgressDetails: false,
+                    showSelectedFiles: false,
+                    hideProgressAfterFinish: true
                 };
 
-            if (!isResizeEnabled) {
-                resizeConfiguration = {
-                    action: 'resizeImage'
-                };
-            }
+            $(document).on('click', uploaderElement ,function () {
+                $(uploaderElement).closest('.fileinput-button.form-buttons')
+                    .find('.uppy-Dashboard-browse').trigger('click');
+            });
 
-            this.element.find('input[type=file]').fileupload({
-                dataType: 'json',
-                formData: {
-                    'form_key': window.FORM_KEY
-                },
-                dropZone: this.element.find('input[type=file]').closest('[role="dialog"]'),
-                sequentialUploads: true,
-                acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
-                maxFileSize: this.options.maxFileSize,
-
-                /**
-                 * @param {Object} e
-                 * @param {Object} data
-                 */
-                add: function (e, data) {
-                    var fileSize,
+            const uppy = new Uppy.Uppy({
+                autoProceed: true,
+
+                onBeforeFileAdded: (currentFile) => {
+                    let fileSize,
                         tmpl;
 
-                    $.each(data.files, function (index, file) {
-                        fileSize = typeof file.size == 'undefined' ?
-                            $.mage.__('We could not detect a size.') :
-                            byteConvert(file.size);
+                    fileSize = typeof currentFile.size == 'undefined' ?
+                        $.mage.__('We could not detect a size.') :
+                        byteConvert(currentFile.size);
 
-                        data.fileId = Math.random().toString(33).substr(2, 18);
+                    // check if file is allowed to upload and resize
+                    allowedResize = $.inArray(currentFile.extension, allowedExt) !== -1;
 
-                        tmpl = progressTmpl({
-                            data: {
-                                name: file.name,
-                                size: fileSize,
-                                id: data.fileId
-                            }
-                        });
+                    if (!allowedResize)  {
+                        fileUploader.aggregateError(currentFile.name,
+                            $.mage.__('Disallowed file type.'));
+                        fileUploader.onLoadingStop();
+                        return false;
+                    }
 
-                        $(tmpl).appendTo(self.element);
-                    });
+                    fileId = Math.random().toString(33).substr(2, 18);
 
-                    $(this).fileupload('process', data).done(function () {
-                        data.submit();
+                    tmpl = progressTmpl({
+                        data: {
+                            name: currentFile.name,
+                            size: fileSize,
+                            id: fileId
+                        }
                     });
+
+                    // code to allow duplicate files from same folder
+                    const modifiedFile = {
+                        ...currentFile,
+                        id:  currentFile.id + '-' + fileId,
+                        tempFileId:  fileId
+                    };
+
+                    $(tmpl).appendTo(self.element);
+                    return modifiedFile;
                 },
 
-                /**
-                 * @param {Object} e
-                 * @param {Object} data
-                 */
-                done: function (e, data) {
-                    if (data.result && !data.result.error) {
-                        self.element.trigger('addItem', data.result);
-                    } else {
-                        fileUploader.aggregateError(data.files[0].name, data.result.error);
+                meta: {
+                    'form_key': window.FORM_KEY,
+                    isAjax : true
+                }
+            });
+
+            // initialize Uppy upload
+            uppy.use(Uppy.Dashboard, options);
+
+            // Resize Image as per configuration
+            if (this.options.isResizeEnabled) {
+                uppy.use(Uppy.Compressor, {
+                    maxWidth: this.options.maxWidth,
+                    maxHeight: this.options.maxHeight,
+                    quality: 0.92,
+                    beforeDraw() {
+                        if (!allowedResize) {
+                            this.abort();
+                        }
                     }
+                });
+            }
 
-                    self.element.find('#' + data.fileId).remove();
+            // drop area for file upload
+            uppy.use(Uppy.DropTarget, {
+                target: targetElement,
+                onDragOver: () => {
+                    // override Array.from method of legacy-build.min.js file
+                    Array.from = null;
                 },
+                onDragLeave: () => {
+                    Array.from = arrayFromObj;
+                }
+            });
 
-                /**
-                 * @param {Object} e
-                 * @param {Object} data
-                 */
-                progress: function (e, data) {
-                    var progress = parseInt(data.loaded / data.total * 100, 10),
-                        progressSelector = '#' + data.fileId + ' .progressbar-container .progressbar';
+            // upload files on server
+            uppy.use(Uppy.XHRUpload, {
+                endpoint: uploadUrl,
+                fieldName: 'image'
+            });
 
-                    self.element.find(progressSelector).css('width', progress + '%');
-                },
+            uppy.on('upload-success', (file, response) => {
+                if (response.body && !response.body.error) {
+                    self.element.trigger('addItem', response.body);
+                } else {
+                    fileUploader.aggregateError(file.name, response.body.error);
+                }
 
-                /**
-                 * @param {Object} e
-                 * @param {Object} data
-                 */
-                fail: function (e, data) {
-                    var progressSelector = '#' + data.fileId;
-
-                    self.element.find(progressSelector).removeClass('upload-progress').addClass('upload-failure')
-                        .delay(2000)
-                        .hide('highlight')
-                        .remove();
-                },
+                self.element.find('#' + file.tempFileId).remove();
+            });
 
-                stop: fileUploader.uploaderConfig.stop
+            uppy.on('upload-progress', (file, progress) => {
+                let progressWidth = parseInt(progress.bytesUploaded / progress.bytesTotal * 100, 10),
+                    progressSelector = '#' + file.tempFileId + ' .progressbar-container .progressbar';
+
+                self.element.find(progressSelector).css('width', progressWidth + '%');
             });
 
-            this.element.find('input[type=file]').fileupload('option', {
-                processQueue: [{
-                    action: 'loadImage',
-                    fileTypes: /^image\/(gif|jpeg|png)$/
-                },
-                resizeConfiguration,
-                {
-                    action: 'saveImage'
-                }]
+            uppy.on('upload-error', (error, file) => {
+                let progressSelector = '#' + file.tempFileId;
+
+                self.element.find(progressSelector).removeClass('upload-progress').addClass('upload-failure')
+                    .delay(2000)
+                    .hide('highlight')
+                    .remove();
             });
+
+            uppy.on('complete', () => {
+                fileUploader.uploaderConfig.stop();
+                $(window).trigger('reload.MediaGallery');
+                Array.from = arrayFromObj;
+            });
+
         }
     });
 

app/code/Magento/Catalog/Test/Fixture/Product.php

@@ -53,7 +53,7 @@ class Product implements RevertibleDataFixtureInterface
         'media_gallery_entries' => [],
         'tier_prices' => [],
         'created_at' => null,
-        'updated_at' => null,
+        'updated_at' => null
     ];
 
     private const DEFAULT_PRODUCT_LINK_DATA = [

app/code/Magento/Catalog/Test/Fixture/ProductStock.php

@@ -26,7 +26,8 @@ class ProductStock implements DataFixtureInterface
 {
     private const DEFAULT_DATA = [
         'prod_id' => null,
-        'prod_qty' => 1
+        'prod_qty' => 1,
+        'is_in_stock' => 1
     ];
 
     /**
@@ -67,8 +68,8 @@ public function apply(array $data = []): ?DataObject
     {
         $data = $this->dataMerger->merge(self::DEFAULT_DATA, $data);
         $stockItem = $this->stockRegistry->getStockItem($data['prod_id']);
-        $stockItem->setData('is_in_stock', 1);
-        $stockItem->setData('qty', 90);
+        $stockItem->setData('is_in_stock', $data['is_in_stock']);
+        $stockItem->setData('qty', $data['prod_qty']);
         $stockItem->setData('manage_stock', 1);
         $stockItem->save();
 

app/code/Magento/Catalog/Test/Mftf/ActionGroup/AdminAddCustomAttributeToSelectedProductActionGroup.xml

@@ -25,7 +25,7 @@
         <checkOption selector="{{AdminProductAttributeSetGridSection.selectFromAttributeResult(attributeCode)}}" stepKey="selectAttributeFromDisplayedResult"/>
         <click selector="{{AdminProductAttributeSetGridSection.addSelected}}" stepKey="clickAddSelectedButton" />
         <waitForPageLoad stepKey="waitForAttributesToBeAdded"/>
-        <scrollTo selector="{{AdminProductFormSection.attributeTab}}" stepKey="scrollToAttributeTab" />
+        <scrollTo selector="{{AdminProductFormSection.attributeTab}}" x="0" y="-100" stepKey="scrollToAttributeTab" />
         <click selector="{{AdminProductFormSection.attributeTab}}" stepKey="expandAttributeTab" />
         <selectOption selector="{{AdminProductFormSection.customSelectField(attributeCode)}}" userInput="{{adminOption1}}" stepKey="selectAvalueFromDropdown"/>
         <click selector="{{AdminProductFormSection.save}}" stepKey="saveTheProduct" />

app/code/Magento/Catalog/Test/Mftf/Section/AdminCategoryContentSection.xml

@@ -12,7 +12,7 @@
         <element name="sectionHeader" type="button" selector="div[data-index='content']" timeout="30"/>
         <element name="uploadButton" type="button" selector="//*[@class='file-uploader-area']/label[text()='Upload']"/>
         <element name="selectFromGalleryButton" type="button" selector="//*[@class='file-uploader-area']/label[text()='Select from Gallery']"/>
-        <element name="uploadImageFile" type="input" selector=".file-uploader-area>input"/>
+        <element name="uploadImageFile" type="input" selector=".file-uploader-area .uppy-Dashboard-input"/>
         <element name="imageFileName" type="text" selector=".file-uploader-filename"/>
         <element name="imageFileMeta" type="text" selector=".file-uploader-meta"/>
         <element name="removeImageButton" type="button" selector=".file-uploader-summary .action-remove"/>

app/code/Magento/Catalog/Test/Mftf/Section/AdminProductImagesSection.xml

@@ -10,7 +10,7 @@
         xsi:noNamespaceSchemaLocation="urn:magento:mftf:Page/etc/SectionObject.xsd">
     <section name="AdminProductImagesSection">
         <element name="productImagesToggle" type="button" selector="div[data-index=gallery] .admin__collapsible-title"/>
-        <element name="imageFileUpload" type="input" selector="#fileupload"/>
+        <element name="imageFileUpload" type="input" selector="div.image div.fileinput-button .uppy-Dashboard-input"/>
         <element name="imageUploadButton" type="button" selector="div.image div.fileinput-button"/>
         <element name="imageFile" type="text" selector="//*[@id='media_gallery_content']//img[contains(@src, '{{url}}')]" parameterized="true"/>
         <element name="imageFileRoleByImage" type="text" selector="//*[@id='media_gallery_content']//img[contains(@src, '{{url}}')]/ancestor::div[@data-role='image']//*[@data-role-code='{{roleCode}}']" parameterized="true"/>

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

@@ -47,9 +47,15 @@
             <actionGroup ref="NavigateToEditProductAttributeActionGroup" stepKey="goToAttributeEditPage">
                 <argument name="ProductAttribute" value="Test Attribute"/>
             </actionGroup>
-            <click selector="{{AttributePropertiesSection.DeleteAttribute}}"  stepKey="clickDeleteAttribute" />
-            <click selector="{{AttributeDeleteModalSection.confirm}}" stepKey="clickOkToConfirmDelete" />
-            <waitForPageLoad stepKey="waitForDeletion"/>
+            <actionGroup ref="DeleteProductAttributeByAttributeCodeActionGroup" stepKey="deleteProductAttribute"/>
+            <comment userInput="BIC workaround" stepKey="clickDeleteAttribute"/>
+            <comment userInput="BIC workaround" stepKey="clickOkToConfirmDelete"/>
+            <comment userInput="BIC workaround" stepKey="waitForDeletion"/>
+
+            <!-- Reindex invalidated indices after product attribute has been created/deleted -->
+            <actionGroup ref="CliIndexerReindexActionGroup" stepKey="reindexInvalidatedIndices">
+                <argument name="indices" value=""/>
+            </actionGroup>
 
             <!-- Select the Default Category for Main Webstore -->
             <actionGroup ref="UpdateRootCategoryForStoresActionGroup" stepKey="UpdateRootCategoryForStores">

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

@@ -27,9 +27,16 @@
             <actionGroup ref="NavigateToEditProductAttributeActionGroup" stepKey="goToEditPage">
                 <argument name="ProductAttribute" value="{{textSwatchProductAttribute.attribute_code}}"/>
             </actionGroup>
-            <click stepKey="clickDelete" selector="{{AttributePropertiesSection.DeleteAttribute}}"/>
-            <click stepKey="clickOk" selector="{{AttributeDeleteModalSection.confirm}}"/>
-            <waitForPageLoad stepKey="waitForDeletion"/>
+
+            <actionGroup ref="DeleteProductAttributeByAttributeCodeActionGroup" stepKey="deleteProductAttribute"/>
+            <comment userInput="BIC workaround" stepKey="clickDelete"/>
+            <comment userInput="BIC workaround" stepKey="clickOk"/>
+            <comment userInput="BIC workaround" stepKey="waitForDeletion"/>
+            <!-- Reindex invalidated indices after product attribute has been created/deleted -->
+            <actionGroup ref="CliIndexerReindexActionGroup" stepKey="reindexInvalidatedIndices">
+                <argument name="indices" value=""/>
+            </actionGroup>
+
             <actionGroup ref="AdminLogoutActionGroup" stepKey="logout"/>
         </after>
 

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

@@ -27,9 +27,14 @@
             <actionGroup ref="NavigateToEditProductAttributeActionGroup" stepKey="goToEditPage">
                 <argument name="ProductAttribute" value="{{visualSwatchProductAttribute.attribute_code}}"/>
             </actionGroup>
-            <click stepKey="clickDelete" selector="{{AttributePropertiesSection.DeleteAttribute}}"/>
-            <click stepKey="clickOk" selector="{{AttributeDeleteModalSection.confirm}}"/>
-            <waitForPageLoad stepKey="waitForDeletion"/>
+            <actionGroup ref="DeleteProductAttributeByAttributeCodeActionGroup" stepKey="deleteProductAttribute"/>
+            <comment userInput="BIC workaround" stepKey="clickDelete"/>
+            <comment userInput="BIC workaround" stepKey="clickOk"/>
+            <comment userInput="BIC workaround" stepKey="waitForDeletion"/>
+            <!-- Reindex invalidated indices after product attribute has been created/deleted -->
+            <actionGroup ref="CliIndexerReindexActionGroup" stepKey="reindexInvalidatedIndices">
+                <argument name="indices" value=""/>
+            </actionGroup>
             <actionGroup ref="AdminLogoutActionGroup" stepKey="logout"/>
         </after>