#464 : Image name popup: displaying file extension separately

AdobeStockImageAdminUi/view/adminhtml/web/css/source/_module.less

@@ -123,7 +123,50 @@
     }
   }
 
+  //Start Save Prompt styling
+  .adobe-stock-save-preview-prompt {
+    .modal-inner-wrap {
+      max-width: 650px;
+      width: 100%;
+      .modal-header {
+        padding: 30px;
+        .modal-title {
+          margin: 0;
+        }
+        .action-close {
+          right: 30px;
+          top: 30px;
+          padding: 0;
+        }
+      }
 
+      .modal-content {
+        .prompt-message {
+          font-weight: bold;
+          margin-bottom: 15px;
+        }
+        .admin__field-wide {
+          margin-bottom: 0;
+        }
+        .image-ext {
+          position: absolute;
+          top: 0;
+          right: 0;
+          padding: 0.6rem 1rem 0.6rem;
+          color: #999;
+          cursor: default;
+        }
+      }
+      .modal-footer {
+        padding: 30px;
+        .action-dismiss {
+          margin-right: 35px;
+          color: #464646;
+        }
+      }
+    }
+  }
+  //End Save Prompt styling
   .admin__adobe-stock-image-checkbox {
     .admin__field-control._with-tooltip {
       .admin__form-field-label {

AdobeStockImageAdminUi/view/adminhtml/web/js/components/grid/column/image-preview.js

@@ -13,10 +13,11 @@ define([
     'Magento_AdobeStockImageAdminUi/js/media-gallery',
     'Magento_Ui/js/modal/confirm',
     'Magento_Ui/js/modal/prompt',
+    'text!Magento_AdobeStockImageAdminUi/template/modal/adobe-modal-prompt-content.html',
     'Magento_AdobeIms/js/user',
     'Magento_AdobeStockAdminUi/js/config',
     'mage/backend/tabs'
-], function (_, $, ko, translate, authorizationAction, imagePreview, messages, mediaGallery, confirmation, prompt, user, config) {
+], function (_, $, ko, translate, authorizationAction, imagePreview, messages, mediaGallery, confirmation, prompt, adobePromptContentTmpl, user, config) {
     'use strict';
 
     return imagePreview.extend({
@@ -383,6 +384,9 @@ define([
                 title: 'Save Preview',
                 content: 'File Name',
                 value: this.generateImageName(record),
+                imageExtension: this.getImageExtension(record),
+                promptContentTmpl : adobePromptContentTmpl,
+                modalClass: 'adobe-stock-save-preview-prompt',
                 validation: true,
                 promptField: '[data-role="promptField"]',
                 validationRules: ['required-entry'],
@@ -401,7 +405,14 @@ define([
                     confirm: function (fileName) {
                         this.save(record, fileName, config.downloadPreviewUrl);
                     }.bind(this)
-                }
+                },
+                buttons: [{
+                    text: $.mage.__('Cancel'),
+                    class: 'action-secondary action-dismiss'
+                }, {
+                    text: $.mage.__('Confirm'),
+                    class: 'action-primary action-accept'
+                }]
             });
         },
 
@@ -415,7 +426,7 @@ define([
          */
         save: function (record, fileName, actionURI) {
             var mediaBrowser = $(config.mediaGallerySelector).data('mageMediabrowser'),
-                destinationPath = (mediaBrowser.activeNode.path || '') + '/' + fileName;
+                destinationPath = (mediaBrowser.activeNode.path || '') + '/' + fileName + '.' + this.getImageExtension(record);
 
             $(config.adobeStockModalSelector).trigger('processStart');
 
@@ -450,9 +461,13 @@ define([
          * @return string
          */
         generateImageName: function (record) {
-            var imageType = record.content_type.match(/[^/]{1,4}$/),
-                imageName = record.title.substring(0, 32).replace(/\s+/g, '-').toLowerCase();
-            return imageName + '.' + imageType;
+            var imageName = record.title.substring(0, 32).replace(/\s+/g, '-').toLowerCase();
+            return imageName;
+        },
+
+        getImageExtension: function (record) {
+            var imageType = record.content_type.match(/[^/]{1,4}$/);
+            return imageType;
         },
 
         /**

AdobeStockImageAdminUi/view/adminhtml/web/template/modal/adobe-modal-prompt-content.html

@@ -0,0 +1,21 @@
+<!--
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<form <%= formAttr %>>
+<fieldset class="admin__fieldset">
+    <div class="admin__field admin__field-wide">
+        <% if(data.label){ %>
+        <label for="prompt-field-<%- data.id %>" class="admin__field-label">
+            <span><%= data.label %></span>
+        </label>
+        <% } %>
+        <div class="admin__field-control">
+            <input type="text" data-role="promptField" id="prompt-field-<%- data.id %>" class="admin__control-text" <%= inputAttr %>/>
+            <span class="image-ext">.<%= data.imageExtension %></span>
+        </div>
+    </div>
+</fieldset>
+</form>