#1515: Add keywords field to the edit image description slide panel

MediaGalleryUi/Test/Mftf/ActionGroup/AdminEnhancedMediaGalleryVerifyImageKeywordsActionGroup.xml

@@ -13,12 +13,12 @@
             <description>Verifies image keywords on the View Details panel</description>
         </annotations>
         <arguments>
-            <argument name="keywords" />
+            <argument name="keywords"/>
         </arguments>
 
-        <grabTextFrom selector="{{AdminEnhancedMediaGalleryViewDetailsSection.keywords}}" stepKey="grabDescription"/>
-        <assertStringContainsString stepKey="verifyDescription">
-            <actualResult type="variable">grabDescription</actualResult>
+        <grabTextFrom selector="{{AdminEnhancedMediaGalleryViewDetailsSection.keywords}}" stepKey="grabKeywords"/>
+        <assertStringContainsString stepKey="verifyKeywords">
+            <actualResult type="variable">grabKeywords</actualResult>
             <expectedResult type="string">{{keywords}}</expectedResult>
         </assertStringContainsString>
     </actionGroup>

MediaGalleryUi/Test/Mftf/ActionGroup/AdminMediaGalleryEditAssetAddKeywordActionGroup.xml

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ /**
+  * Copyright © Magento, Inc. All rights reserved.
+  * See COPYING.txt for license details.
+  */
+-->
+
+<actionGroups xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+              xsi:noNamespaceSchemaLocation="urn:magento:mftf:Test/etc/actionGroupSchema.xsd">
+    <actionGroup name="AdminMediaGalleryEditAssetAddKeywordActionGroup">
+        <annotations>
+            <description>Set Keywords on the Edit Details panel</description>
+        </annotations>
+        <arguments>
+            <argument name="keyword"/>
+        </arguments>
+
+        <fillField selector="{{AdminEnhancedMediaGalleryEditDetailsSection.newKeyword}}" userInput="{{keyword}}" stepKey="enterKeyword"/>
+        <click selector="{{AdminEnhancedMediaGalleryEditDetailsSection.addNewKeyword}}" stepKey="addKeyword"/>
+    </actionGroup>
+</actionGroups>

MediaGalleryUi/Test/Mftf/Data/AdminEnhancedMediaGalleryImageData.xml

@@ -14,6 +14,7 @@
         <data key="file">magento.jpg</data>
         <data key="fileName">renamed title</data>
         <data key="extension">jpg</data>
+        <data key="keyword">newkeyword</data>
     </entity>
      <entity name="ImageUploadPng" type="uploadImage">
         <data key="title" unique="suffix">Image1</data>

MediaGalleryUi/Test/Mftf/Section/AdminEnhancedMediaGalleryEditDetailsSection.xml

@@ -12,6 +12,8 @@
         <element name="title" type="input" selector="#title"/>
         <element name="fileName" type="text" selector="#path"/>
         <element name="description" type="textarea" selector="#description"/>
+        <element name="newKeyword" type="input" selector="[data-ui-id='keyword']"/>
+        <element name="addNewKeyword" type="input" selector="[data-ui-id='add-keyword']"/>
         <element name="cancel" type="button" selector="#image-details-action-cancel"/>
         <element name="save" type="button" selector="#image-details-action-save"/>
     </section>

MediaGalleryUi/Test/Mftf/Test/AdminStandaloneMediaGalleryViewDetailsEditTest.xml

@@ -30,6 +30,9 @@
         </actionGroup>
         <actionGroup ref="AdminEnhancedMediaGalleryViewImageDetails" stepKey="viewImageDetails"/>
         <actionGroup ref="AdminEnhancedMediaGalleryImageDetailsEditActionGroup" stepKey="editImage"/>
+        <actionGroup ref="AdminMediaGalleryEditAssetAddKeywordActionGroup" stepKey="setKeywords">
+            <argument name="keyword" value="UpdatedImageDetails.keyword"/>
+        </actionGroup>
         <actionGroup ref="AdminEnhancedMediaGalleryImageDetailsSaveActionGroup" stepKey="saveImage">
             <argument name="image" value="UpdatedImageDetails"/>
         </actionGroup>
@@ -42,5 +45,11 @@
         <actionGroup ref="AdminEnhancedMediaGalleryVerifyImageDescriptionActionGroup" stepKey="verifyImageDescription">
             <argument name="description" value="UpdatedImageDetails.description"/>
         </actionGroup>
+        <actionGroup ref="AdminEnhancedMediaGalleryVerifyImageKeywordsActionGroup" stepKey="verifyAddedKeywords">
+            <argument name="keywords" value="UpdatedImageDetails.keyword"/>
+        </actionGroup>
+        <actionGroup ref="AdminEnhancedMediaGalleryVerifyImageKeywordsActionGroup" stepKey="verifyMetadataKeywords">
+            <argument name="keywords" value="ImageMetadata.keywords"/>
+        </actionGroup>
     </test>
 </tests>

MediaGalleryUi/view/adminhtml/templates/image_edit_details.phtml

@@ -47,13 +47,13 @@ use Magento\Backend\Block\Template;
                         "component": "Magento_MediaGalleryUi/js/image/image-edit",
                         "imageEditDetailsUrl": "<?= $escaper->escapeJs($block->getData('imageEditDetailsUrl')); ?>",
                         "saveDetailsUrl": "<?= $escaper->escapeJs($block->getData('saveDetailsUrl')); ?>",
-                        "modalSelector": ".media-gallery-edit-image-details-modal",
                         "mediaGridMessages": "standalone_media_gallery_listing.standalone_media_gallery_listing.messages"
                     }
                 }
             },
             "Magento_MediaGalleryUi/js/validation/validate-image-title": {},
-            "Magento_MediaGalleryUi/js/validation/validate-image-description": {}
+            "Magento_MediaGalleryUi/js/validation/validate-image-description": {},
+            "Magento_MediaGalleryUi/js/validation/validate-image-keyword": {}
         },
         "#media-gallery-image-edit-details-messages": {
             "Magento_Ui/js/core/app": {

MediaGalleryUi/view/adminhtml/templates/image_edit_details_standalone.phtml

@@ -33,9 +33,11 @@ use Magento\Backend\Block\Template;
     <div id="media-gallery-image-edit-details-messages" data-bind="scope: 'mediaGalleryEditDetailsMessages'">
         <!-- ko template: getTemplate() --><!-- /ko -->
     </div>
-    <div id="media-gallery-image-edit-details" data-bind="scope: 'mediaGalleryEditDetails'">
-        <!-- ko template: getTemplate() --><!-- /ko -->
-    </div>
+    <form data-bind="mageInit:{'validation':{}}" id="image-edit-details-form" method="post" enctype="multipart/form-data">
+        <div id="media-gallery-image-edit-details" data-bind="scope: 'mediaGalleryEditDetails'">
+            <!-- ko template: getTemplate() --><!-- /ko -->
+        </div>
+    </form>
 </div>
 
 <script type="text/x-magento-init">
@@ -47,13 +49,13 @@ use Magento\Backend\Block\Template;
                         "component": "Magento_MediaGalleryUi/js/image/image-edit",
                         "imageEditDetailsUrl": "<?= $escaper->escapeJs($block->getData('imageEditDetailsUrl')); ?>",
                         "saveDetailsUrl": "<?= $escaper->escapeJs($block->getData('saveDetailsUrl')); ?>",
-                        "modalSelector": ".media-gallery-edit-image-details-modal",
                         "mediaGridMessages": "standalone_media_gallery_listing.standalone_media_gallery_listing.messages"
                     }
                 }
             },
             "Magento_MediaGalleryUi/js/validation/validate-image-title": {},
-            "Magento_MediaGalleryUi/js/validation/validate-image-description": {}
+            "Magento_MediaGalleryUi/js/validation/validate-image-description": {},
+            "Magento_MediaGalleryUi/js/validation/validate-image-keyword": {}
         },
         "#media-gallery-image-edit-details-messages": {
             "Magento_Ui/js/core/app": {

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

@@ -343,6 +343,16 @@
     .media-gallery-image-details-modal,
     .media-gallery-edit-image-details-modal {
 
+        .admin__action-multiselect-crumb {
+            .action-close {
+                padding: 0;
+
+                &:before {
+                    font-size: .5em;
+                }
+            }
+        }
+
         .edit-image-details {
             padding: 50px;
         }

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

@@ -7,17 +7,16 @@ define([
 ], function ($) {
     'use strict';
 
-    return function (saveImageDetailsUrl, formElement) {
+    return function (saveImageDetailsUrl, data) {
         var deferred = $.Deferred(),
-            message,
-            formData = formElement.serialize();
+            message;
 
         $.ajax({
             type: 'POST',
             url: saveImageDetailsUrl,
             dataType: 'json',
             showLoader: true,
-            data: formData,
+            data: data,
 
             /**
              * Resolve with image details if success, reject with response message otherwise
@@ -40,7 +39,6 @@ define([
              * @param {Object} response
              */
             error: function (response) {
-
                 if (typeof response.responseJSON === 'undefined' ||
                     typeof response.responseJSON.message === 'undefined'
                 ) {

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

@@ -83,14 +83,17 @@ define([
         saveImageDetailsAction: function () {
             var saveDetailsUrl = this.mediaGalleryEditDetails().saveDetailsUrl,
                 modalElement = $(this.modalSelector),
-                dataForm = modalElement.find('#image-edit-details-form'),
+                form = modalElement.find('#image-edit-details-form'),
                 imageId = this.imageModel().getSelected().id,
+                keywords = this.mediaGalleryEditDetails().selectedKeywords(),
                 imageDetails = this.mediaGalleryImageDetails();
 
-            if (dataForm.validation('isValid')) {
+            if (form.validation('isValid')) {
                 saveDetails(
                     saveDetailsUrl,
-                    dataForm
+                    [form.serialize(), $.param({
+                        'keywords': keywords
+                    })].join('&')
                 ).then(function () {
                     this.closeModal();
                     this.imageModel().reloadGrid();

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

@@ -7,24 +7,120 @@ define([
     'jquery',
     'underscore',
     'uiComponent',
+    'uiLayout',
     'Magento_Ui/js/lib/key-codes',
-    'Magento_MediaGalleryUi/js/action/getDetails'
-], function ($, _, Component, keyCodes, getDetails) {
+    'Magento_MediaGalleryUi/js/action/getDetails',
+    'mage/validation'
+], function ($, _, Component, layout, keyCodes, getDetails) {
     'use strict';
 
     return Component.extend({
         defaults: {
             template: 'Magento_MediaGalleryUi/image/image-edit',
-            modalSelector: '',
+            modalSelector: '.media-gallery-edit-image-details-modal',
             imageEditDetailsUrl: '/media_gallery/image/details',
             saveDetailsUrl: '/media_gallery/image/saveDetails',
             images: [],
             image: null,
+            keywordOptions: [],
+            selectedKeywords: [],
+            newKeyword: '',
+            newKeywordSelector: '#keyword',
             modules: {
-                mediaGridMessages: '${ $.mediaGridMessages }'
+                mediaGridMessages: '${ $.mediaGridMessages }',
+                keywordsSelect: '${ $.name }_keywords'
+            },
+            viewConfig: [
+                {
+                    component: 'Magento_Ui/js/form/element/ui-select',
+                    name: '${ $.name }_keywords',
+                    template: 'ui/grid/filters/elements/ui-select',
+                    disableLabel: true
+                }
+            ],
+            exports: {
+                keywordOptions: '${ $.name }_keywords:options'
+            },
+            links: {
+                selectedKeywords: '${ $.name }_keywords:value'
             }
         },
 
+        /**
+         * Initialize the component
+         *
+         * @returns {Object}
+         */
+        initialize: function () {
+            this._super().initView();
+
+            return this;
+        },
+
+        /**
+         * Add a new keyword to select
+         */
+        addKeyword: function () {
+            var options = this.keywordOptions(),
+                selected = this.selectedKeywords(),
+                newKeywordField = $(this.newKeywordSelector);
+
+            newKeywordField.validation();
+
+            if (!newKeywordField.validation('isValid') || this.newKeyword() === '') {
+                return;
+            }
+
+            options.push(this.getOptionForKeyword(this.newKeyword()));
+            selected.push(this.newKeyword());
+            this.newKeyword('');
+
+            this.keywordOptions(options);
+            this.selectedKeywords(selected);
+        },
+
+        /**
+         * Create an option object based on keyword string
+         *
+         * @param {String} keyword
+         * @returns {Object}
+         */
+        getOptionForKeyword: function(keyword) {
+            return {
+                is_active: 1,
+                level: 1,
+                value: keyword,
+                label: keyword
+            };
+        },
+
+        /**
+         * Convert array of keywords to options format
+         *
+         * @param {Array} tags
+         */
+        setKeywordOptions: function (tags) {
+            var options = [];
+
+            tags.forEach(function (tag) {
+                options.push(this.getOptionForKeyword(tag));
+            }.bind(this));
+
+            this.keywordOptions(options);
+            this.selectedKeywords(tags);
+        },
+
+        /**
+         * Initialize child components
+         *
+         * @returns {Object}
+         */
+        initView: function () {
+            layout(this.viewConfig);
+
+            return this;
+        },
+
         /**
          * Init observable variables
          *
@@ -33,7 +129,10 @@ define([
         initObservable: function () {
             this._super()
                 .observe([
-                    'image'
+                    'image',
+                    'keywordOptions',
+                    'selectedKeywords',
+                    'newKeyword'
                 ]);
 
             return this;
@@ -76,6 +175,10 @@ define([
             if (!modalElement.length || _.isUndefined(modalElement.modal)) {
                 return;
             }
+
+            this.setKeywordOptions(this.image().tags);
+            this.newKeyword('');
+
             modalElement.modal('openModal');
         },
 

MediaGalleryUi/view/adminhtml/web/js/validation/validate-image-keyword.js

@@ -0,0 +1,19 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'jquery',
+    'jquery/validate',
+    'mage/translate'
+], function ($, validate, $t) {
+    'use strict';
+
+    $.validator.addMethod(
+        'validate-image-keyword', function (value) {
+            return /^[a-zA-Z0-9\-\_\.\,]+$|^$/i.test(value);
+
+        }, $t('Please use only letters (a-z or A-Z), numbers (0-9), dots (.), commas(,), ' +
+            'underscores (_) and dashes(-) on this field.'));
+});