#1390 Add related content information to the delete asset warning

MediaGalleryUi/view/adminhtml/web/js/action/deleteImage.js

@@ -18,18 +18,18 @@ define([
          *
          * @param {Object} record
          * @param {String} deleteUrl
+         * @param {String} confirmationContent
          */
-        deleteImageAction: function (record, deleteUrl) {
-            var baseContent = $.mage.__('Are you sure you want to delete "%s" image?'),
-                title = $.mage.__('Delete image'),
+        deleteImageAction: function (record, deleteUrl, confirmationContent) {
+            var title = $.mage.__('Delete image'),
                 cancelText = $.mage.__('Cancel'),
                 deleteImageText = $.mage.__('Delete Image'),
                 deleteImageCallback = this.deleteImage.bind(this);
 
             confirmation({
                 title: title,
                 modalClass: 'media-gallery-delete-image-action',
-                content: baseContent.replace('%s', record.path),
+                content: confirmationContent,
                 buttons: [
                     {
                         text: cancelText,

MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js

@@ -0,0 +1,77 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+define([
+    'jquery',
+    'underscore',
+    'Magento_MediaGalleryUi/js/action/getDetails',
+    'Magento_MediaGalleryUi/js/action/deleteImage'
+], function ($, _, getDetails, deleteImage) {
+    'use strict';
+
+    return {
+
+        /**
+         * Get information about image use
+         *
+         * @param {Object} record
+         * @param {String} imageDetailsUrl
+         * @param {String} deleteImageUrl
+         */
+        deleteImageAction: function (record, imageDetailsUrl, deleteImageUrl) {
+            var confirmationContent = $.mage.__('%1 Are you sure you want to delete "%2" image?')
+                .replace('%2', record.path);
+
+            getDetails(imageDetailsUrl, record.id)
+                .then(function (imageDetails) {
+                    confirmationContent = confirmationContent.replace(
+                        '%1',
+                        this.getConfirmationContentByImageDetails(imageDetails)
+                    );
+                }.bind(this)).fail(function () {
+                confirmationContent = confirmationContent.replace('%1', '');
+            }).always(function () {
+                deleteImage.deleteImageAction(record, deleteImageUrl, confirmationContent);
+            });
+        },
+
+        /**
+         * Returns confirmation content with information about related content
+         *
+         * @param {Object} imageDetails
+         * @return String
+         */
+        getConfirmationContentByImageDetails: function (imageDetails) {
+            var details = imageDetails.details;
+
+            if (_.isObject(details) && !_.isUndefined(details['6'])) {
+                return this.getRecordRelatedContentMessage(details['6'].value);
+            }
+
+            return '';
+        },
+
+        /**
+         * Get information about image use
+         *
+         * @param {Object|String} value
+         * @return {String}
+         */
+        getRecordRelatedContentMessage: function (value) {
+            var usedInMessage = $.mage.__('This image is used in %s.'),
+                usedIn = '';
+
+            if (_.isObject(value) && !_.isEmpty(value)) {
+                _.each(value, function (numberOfTimeUsed, moduleName) {
+                    usedIn += numberOfTimeUsed + ' ' + moduleName + ', ';
+                });
+                usedIn = usedIn.replace(/,\s*$/, '');
+
+                return usedInMessage.replace('%s', usedIn);
+            }
+
+            return '';
+        }
+    };
+});

MediaGalleryUi/view/adminhtml/web/js/grid/columns/image/actions.js

@@ -6,9 +6,9 @@ define([
     'jquery',
     'underscore',
     'uiComponent',
-    'Magento_MediaGalleryUi/js/action/deleteImage',
+    'Magento_MediaGalleryUi/js/action/deleteImageWithDetailConfirmation',
     'Magento_MediaGalleryUi/js/grid/columns/image/insertImageAction'
-], function ($, _, Component, deleteImage, image) {
+], function ($, _, Component, deleteImageWithDetailConfirmation, image) {
     'use strict';
 
     return Component.extend({
@@ -51,7 +51,7 @@ define([
         initEvents: function () {
             $(this.imageModel().addSelectedBtnSelector).click(function () {
                 image.insertImage(
-                   this.imageModel().getSelected(),
+                    this.imageModel().getSelected(),
                     {
                         onInsertUrl: this.imageModel().onInsertUrl,
                         storeId: this.imageModel().storeId
@@ -70,7 +70,10 @@ define([
          * @param {Object} record
          */
         deleteImageAction: function (record) {
-            deleteImage.deleteImageAction(record, this.imageModel().deleteImageUrl);
+            var imageDetailsUrl = this.mediaGalleryImageDetails().imageDetailsUrl,
+                deleteImageUrl = this.imageModel().deleteImageUrl;
+
+            deleteImageWithDetailConfirmation.deleteImageAction(record, imageDetailsUrl, deleteImageUrl);
         },
 
         /**

MediaGalleryUi/view/adminhtml/web/js/image/image-actions.js

@@ -7,18 +7,20 @@ define([
     'jquery',
     'underscore',
     'uiElement',
-    'Magento_MediaGalleryUi/js/action/deleteImage',
+    'Magento_MediaGalleryUi/js/action/deleteImageWithDetailConfirmation',
     'Magento_MediaGalleryUi/js/grid/columns/image/insertImageAction'
-], function ($, _, Element, deleteImage, addSelected) {
+], function ($, _, Element, deleteImageWithDetailConfirmation, addSelected) {
     'use strict';
 
     return Element.extend({
         defaults: {
             modalSelector: '',
             modalWindowSelector: '',
+            mediaGalleryImageDetailsName: 'mediaGalleryImageDetails',
             template: 'Magento_MediaGalleryUi/image/actions',
             modules: {
-                imageModel: '${ $.imageModelName }'
+                imageModel: '${ $.imageModelName }',
+                mediaGalleryImageDetails: '${ $.mediaGalleryImageDetailsName }'
             }
         },
 
@@ -52,7 +54,14 @@ define([
          * Delete image action
          */
         deleteImageAction: function () {
-            deleteImage.deleteImageAction(this.imageModel().getSelected(), this.imageModel().deleteImageUrl);
+            var imageDetailsUrl = this.mediaGalleryImageDetails().imageDetailsUrl,
+                deleteImageUrl = this.imageModel().deleteImageUrl;
+
+            deleteImageWithDetailConfirmation.deleteImageAction(
+                this.imageModel().getSelected(),
+                imageDetailsUrl,
+                deleteImageUrl
+            );
         },
 
         /**