diff --git a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImage.js b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImage.js
index 8d2713515236..2e726c6fae15 100644
--- a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImage.js
+++ b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImage.js
@@ -18,10 +18,10 @@ 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);
@@ -29,7 +29,7 @@ define([
confirmation({
title: title,
modalClass: 'media-gallery-delete-image-action',
- content: baseContent.replace('%s', record.path),
+ content: confirmationContent,
buttons: [
{
text: cancelText,
diff --git a/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js b/MediaGalleryUi/view/adminhtml/web/js/action/deleteImageWithDetailConfirmation.js
new file mode 100644
index 000000000000..e399f5ae4180
--- /dev/null
+++ b/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 '';
+ }
+ };
+});
diff --git a/MediaGalleryUi/view/adminhtml/web/js/grid/columns/image/actions.js b/MediaGalleryUi/view/adminhtml/web/js/grid/columns/image/actions.js
index 4a980115400b..d629e30bceab 100644
--- a/MediaGalleryUi/view/adminhtml/web/js/grid/columns/image/actions.js
+++ b/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);
},
/**
diff --git a/MediaGalleryUi/view/adminhtml/web/js/image/image-actions.js b/MediaGalleryUi/view/adminhtml/web/js/image/image-actions.js
index 32d674d83201..67354b175ae5 100644
--- a/MediaGalleryUi/view/adminhtml/web/js/image/image-actions.js
+++ b/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
+ );
},
/**