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

joweecaquicla · 2020-07-16T19:28:53Z

Description (*)

This PR will introduce the keywords field on the edit image details panel.

Fixed Issues (if relevant)

Fixes magento/adobe-stock-integration# Add keywords field to the edit image description slide panel #1515: Add keywords field to the edit image description slide panel
...

Manual testing scenarios (*)

...
...

…panel - initial implementation of ui-select for keywords field

sivaschenko · 2020-07-17T10:02:10Z

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

@@ -48,6 +50,7 @@ define([
                getDetails(this.imageEditDetailsUrl, [imageId]).then(function (imageDetails) {
                    this.images[imageId] = imageDetails[imageId];
                    this.image(this.images[imageId]);
+                    this.mediaGalleryEditKeywordsDetails().getKeywordsOp(this.image().tags);


Instead of setting keyword options - let's export the image from the image-edit component to the keywords-ui-select component

sivaschenko · 2020-07-17T10:12:24Z

MediaGalleryUi/view/adminhtml/templates/image_edit_details_standalone.phtml

+        "#media-gallery-image-edit-keywords-details": {
+            "Magento_Ui/js/core/app": {
+                "components": {
+                    "mediaGalleryEditKeywordsDetails": {


I think it would be better to declare and initialize this component as a child to the edit details component. Please see AdobeStockImageAdminUi/view/adminhtml/web/js/components/grid/column/image-preview.js - viewConfig for example

sivaschenko · 2020-07-17T10:14:15Z

MediaGalleryUi/view/adminhtml/web/js/image/edit/keyword-ui-select.js

+    return Select.extend({
+        defaults: {
+            template: 'Magento_MediaGalleryUi/image/edit/keyword-ui-select',
+            options: []


options property is already declared and observed in the inherited component

…panel - added keyword-ui-select as child component of image-edit, export image to keyword-ui-select, and modified getkeywordsop logic

…panel - modified getkeywordsop logic

sivaschenko

Thanks for the updates @joweecaquicla ! See my comments

sivaschenko · 2020-07-20T08:43:09Z

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

+            viewConfig: [
+                {
+                    component: 'Magento_MediaGalleryUi/js/image/edit/keyword-ui-select',
+                    name: '${ $.name }_select'


I'd use a more specific name for the keywords field/select

Suggested change

name: '${ $.name }_select'

name: '${ $.name }_keywords'

sivaschenko · 2020-07-20T08:55:59Z

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

@@ -49,6 +82,7 @@ define([
                    this.images[imageId] = imageDetails[imageId];
                    this.image(this.images[imageId]);
                    this.openEditImageDetailsModal();
+                    this.getKeywordsOp();


To avoid this call, simply make sure the keywords component is rendering options based on the imported image

…ion into 1515-add-keywords-field-to-edit-image

sivaschenko · 2020-07-27T08:24:56Z

@magento run all tests

sivaschenko · 2020-07-29T13:46:30Z

@magento run all tests

gabrieldagama

HI @joweecaquicla @sivaschenko, thanks for the PR, please follow below some comments.

MediaGalleryUi/view/adminhtml/templates/image_edit_details_standalone.phtml

MediaGalleryUi/view/adminhtml/templates/image_edit_details.phtml

gabrieldagama · 2020-07-29T14:53:08Z

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

+            viewConfig: [
+                {
+                    component: 'Magento_Ui/js/form/element/ui-select',
+                    name: '${ $.name }_keywords'
+                }
+            ],
+            exports: {
+                keywordOptions: '${ $.name }_keywords:options'
+            },
+            links: {
+                selectedKeywords: '${ $.name }_keywords:value'


I believe we should create a separate component like ui-keywords that extends ui-select, the way it is at the moment we have image-edit component changing linked properties and as consequence changing directly the ui-select state. By having separate component the component would have its own template and its own methods changing its own properties. What do you think?

That's not actually keywords ui-select responsibility to change it's options/value. We may introduce a separate component for add new keyword field and button. However, in this case image-edit will still needs to be a proxy between ui-select and add-keyword components, so in my opinion that might increase the complexity. I'd postpone extracting additional components from image-edit

As for adding the add keyword field to ui-select component approach - I wouldn't like to rewrite the ui-select component and template as that is a potential for conflicts on upgrades

gabrieldagama · 2020-07-29T14:55:36Z

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

+         */
+        getOptionForKeyword: function(keyword) {
+            return {
+                'is_active': 1,


Suggested change

'is_active': 1,

is_active: 1,

sivaschenko · 2020-07-30T10:12:23Z

@magento run all tests

…ion into 1515-add-keywords-field-to-edit-image

sivaschenko · 2020-08-02T15:49:37Z

Extracted task to use form ui component #1690

sivaschenko · 2020-08-02T15:49:47Z

@magento run all tests

sivaschenko · 2020-08-02T16:50:12Z

@magento run all tests

sivaschenko · 2020-08-02T17:31:42Z

@magento run all tests

sivaschenko · 2020-08-02T20:10:59Z

@magento run all tests

ghost · 2020-08-02T21:55:49Z

Hi @joweecaquicla, thank you for your contribution!
Please, complete Contribution Survey, it will take less than a minute.
Your feedback will help us to improve contribution process.

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

84de736

…panel - initial implementation of ui-select for keywords field

joweecaquicla linked an issue Jul 16, 2020 that may be closed by this pull request

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

Closed

sivaschenko reviewed Jul 17, 2020

View reviewed changes

m2-community-project bot assigned sivaschenko Jul 17, 2020

m2-community-project bot added the Progress: review label Jul 17, 2020

joweecaquicla added 2 commits July 18, 2020 04:06

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

507f503

…panel - added keyword-ui-select as child component of image-edit, export image to keyword-ui-select, and modified getkeywordsop logic

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

b3baefd

…panel - modified getkeywordsop logic

sivaschenko reviewed Jul 20, 2020

View reviewed changes

sivaschenko added 3 commits July 20, 2020 14:01

Merge branch '2.0-develop' of github.com:magento/adobe-stock-integrat…

69ebfbb

…ion into 1515-add-keywords-field-to-edit-image

magento#1605: Using the default ui-select component

e91c4be

Merge branch '2.0-develop' into 1515-add-keywords-field-to-edit-image

9bf8ac6

m2-community-project bot removed the Progress: review label Jul 24, 2020

sivaschenko added 4 commits July 26, 2020 17:11

Merge branch '2.0-develop' into 1515-add-keywords-field-to-edit-image

4b670d9

magento#1605: Added keywords to submit form data

837ded8

magento#1515: MFTF test coverage

daa221f

Merge branch '2.0-develop' into 1515-add-keywords-field-to-edit-image

23b5a79

m2-community-project bot added Priority: P1 Needs to be fixed before any other issues Severity: S1 Affects critical data or functionality and forces users to employ a workaround labels Jul 29, 2020

sivaschenko added 3 commits July 29, 2020 15:57

Merge branch '2.0-develop' into 1515-add-keywords-field-to-edit-image

f41bee6

Fixed static tests

75940bb

magento#1605: Added validation

dcd8913

sivaschenko changed the title ~~[WIP] #1515: Add keywords field to the edit image description slide panel~~ #1515: Add keywords field to the edit image description slide panel Jul 29, 2020

m2-community-project bot added the Progress: review label Jul 29, 2020

gabrieldagama reviewed Jul 29, 2020

View reviewed changes

m2-community-project bot assigned gabrieldagama Jul 29, 2020

gabrieldagama reviewed Jul 29, 2020

View reviewed changes

sivaschenko added 2 commits July 30, 2020 13:10

magento#1605: Moved generic config to component defaults

8282e1e

Merge branch '2.0-develop' into 1515-add-keywords-field-to-edit-image

2b9f86b

sivaschenko added 3 commits August 2, 2020 16:31

Fixed static tests

5307a5d

Merge branch '2.0-develop' of github.com:magento/adobe-stock-integrat…

50f5d8c

…ion into 1515-add-keywords-field-to-edit-image

Updated bindings

b9aa0c1

sivaschenko previously approved these changes Aug 2, 2020

View reviewed changes

m2-community-project bot added Progress: ready for delivery and removed Progress: review labels Aug 2, 2020

Fixed static tests

2eca30e

sivaschenko dismissed their stale review via 2eca30e August 2, 2020 16:49

Merge branch '2.0-develop' into 1515-add-keywords-field-to-edit-image

2fe992c

Fixed static tests

8c4c01e

sivaschenko added 2 commits August 2, 2020 21:10

Fixed tests for embedded media gallery

d27bfd5

Merge branch '2.0-develop' into 1515-add-keywords-field-to-edit-image

90c7bec

sivaschenko merged commit fa4c4f2 into magento:2.0-develop Aug 2, 2020

m2-community-project bot added Progress: done and removed Progress: ready for delivery labels Aug 2, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

joweecaquicla commented Jul 16, 2020

sivaschenko Jul 17, 2020

sivaschenko Jul 17, 2020

sivaschenko Jul 17, 2020

sivaschenko left a comment

sivaschenko Jul 20, 2020

sivaschenko Jul 20, 2020

sivaschenko commented Jul 27, 2020

sivaschenko commented Jul 29, 2020

gabrieldagama left a comment

gabrieldagama Jul 29, 2020

sivaschenko Jul 30, 2020

sivaschenko Jul 30, 2020 •

edited

Loading

gabrieldagama Jul 29, 2020

sivaschenko commented Jul 30, 2020

sivaschenko commented Aug 2, 2020

sivaschenko commented Aug 2, 2020

sivaschenko commented Aug 2, 2020

sivaschenko commented Aug 2, 2020

sivaschenko commented Aug 2, 2020

ghost commented Aug 2, 2020

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

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

Conversation

joweecaquicla commented Jul 16, 2020

Description (*)

Fixed Issues (if relevant)

Manual testing scenarios (*)

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sivaschenko left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sivaschenko commented Jul 27, 2020

sivaschenko commented Jul 29, 2020

gabrieldagama left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sivaschenko Jul 30, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sivaschenko commented Jul 30, 2020

sivaschenko commented Aug 2, 2020

sivaschenko commented Aug 2, 2020

sivaschenko commented Aug 2, 2020

sivaschenko commented Aug 2, 2020

sivaschenko commented Aug 2, 2020

ghost commented Aug 2, 2020

sivaschenko Jul 30, 2020 •

edited

Loading