MAGETWO-52386: JS validation is absent for "Configurations" and "Images And Videos" panels

Author: Bohdan Korablov

app/code/Magento/Catalog/view/adminhtml/layout/catalog_product_form.xml

@@ -21,6 +21,11 @@
                     </argument>
                 </arguments>
                 <block class="Magento\Catalog\Block\Adminhtml\Product\Helper\Form\Gallery\Content" as="content">
+                    <arguments>
+                        <argument name="config" xsi:type="array">
+                            <item name="parentComponent" xsi:type="string">product_form.product_form.block_gallery.block_gallery</item>
+                        </argument>
+                    </arguments>
                     <block class="Magento\ProductVideo\Block\Adminhtml\Product\Edit\NewVideo" name="new-video"
                            template="Magento_ProductVideo::product/edit/slideout/form.phtml"/>
                 </block>

app/code/Magento/Catalog/view/adminhtml/templates/catalog/product/helper/gallery.phtml

@@ -9,10 +9,14 @@
 /** @var $block \Magento\Catalog\Block\Adminhtml\Product\Helper\Form\Gallery\Content */
 $elementName = $block->getElement()->getName() . '[images]';
 $formName = $block->getFormName();
+$parentComponent = $block->getData('config/parentComponent')
+    ? 'data-parent-component="' . $block->getData('config/parentComponent') . '"'
+    : '';
 ?>
 <div id="<?php echo $block->getHtmlId() ?>"
      class="gallery"
      data-mage-init='{"productGallery":{"template":"#<?php echo $block->getHtmlId() ?>-template"}}'
+     <?php echo $parentComponent ?>
      data-images="<?php echo $block->escapeHtml($block->getImagesJson()) ?>"
      data-types="<?php echo $block->escapeHtml(
          $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($block->getImageTypes())

app/code/Magento/Catalog/view/adminhtml/web/js/product-gallery.js

@@ -7,9 +7,10 @@ define([
     'jquery',
     'underscore',
     'mage/template',
+    'uiRegistry',
     'jquery/ui',
     'baseImage'
-], function ($, _, mageTemplate) {
+], function ($, _, mageTemplate, registry) {
     'use strict';
 
     /**
@@ -53,6 +54,7 @@ define([
         _create: function () {
             this.options.types = this.options.types || this.element.data('types');
             this.options.images = this.options.images || this.element.data('images');
+            this.options.parentComponent = this.options.parentComponent || this.element.data('parent-component');
 
             this.imgTmpl = mageTemplate(this.element.find(this.options.template).html().trim());
 
@@ -153,6 +155,19 @@ define([
             }).first();
         },
 
+        /**
+         * Mark parent fieldset that content was updated
+         */
+        _contentUpdated: function () {
+            if (this.options.initialized && this.options.parentComponent) {
+                registry.async(this.options.parentComponent)(
+                    function (parentComponent) {
+                        parentComponent.bubble('update', true);
+                    }
+                );
+            }
+        },
+
         /**
          * Add image
          * @param event
@@ -205,6 +220,7 @@ define([
             }, this));
 
             this._updateImagesRoles();
+            this._contentUpdated();
         },
 
         /**
@@ -284,6 +300,8 @@ define([
                 imageData.label;
 
             $title.text(value);
+
+            this._contentUpdated();
         },
 
         /**
@@ -297,6 +315,8 @@ define([
 
             imageData.isRemoved = true;
             $imageContainer.addClass('removed').hide().find('.is-removed').val(1);
+
+            this._contentUpdated();
         },
 
         /**
@@ -321,6 +341,7 @@ define([
             }
             this.element.find('.image-' + data.type).val(this.options.types[data.type].value || 'no_selection');
             this._updateImagesRoles();
+            this._contentUpdated();
         },
 
         /**
@@ -339,6 +360,8 @@ define([
                     $(element).val(index);
                 }
             }, this));
+
+            this._contentUpdated();
         },
 
         /**
@@ -362,6 +385,8 @@ define([
                 }
                 this.element.trigger('resort');
             }
+
+            this._contentUpdated();
         }
     });
 
@@ -572,6 +597,8 @@ define([
 
             $imageContainer.find('[name*="disabled"]').val(disabled);
             imageData.disabled = disabled;
+
+            this._contentUpdated();
         },
 
         /**

app/code/Magento/ProductVideo/view/adminhtml/layout/catalog_product_form.xml

@@ -19,6 +19,11 @@
                 </argument>
             </arguments>
             <block class="Magento\Catalog\Block\Adminhtml\Product\Helper\Form\Gallery\Content" as="content">
+                <arguments>
+                    <argument name="config" xsi:type="array">
+                        <item name="parentComponent" xsi:type="string">product_form.product_form.block_gallery.block_gallery</item>
+                    </argument>
+                </arguments>
                 <block class="Magento\ProductVideo\Block\Adminhtml\Product\Edit\NewVideo" name="new-video" template="Magento_ProductVideo::product/edit/slideout/form.phtml"/>
             </block>
         </block>

app/code/Magento/ProductVideo/view/adminhtml/templates/helper/gallery.phtml

@@ -9,6 +9,9 @@
 /** @var $block \Magento\Catalog\Block\Adminhtml\Product\Helper\Form\Gallery\Content */
 $elementName = $block->getElement()->getName() . '[images]';
 $formName = $block->getFormName();
+$parentComponent = $block->getData('config/parentComponent')
+    ? 'data-parent-component="' . $block->getData('config/parentComponent') . '"'
+    : '';
 ?>
 
 <div class="row">
@@ -33,6 +36,7 @@ $elementToggleCode = $element->getToggleCode() ? $element->getToggleCode() : 'to
 <div id="<?php echo $block->getHtmlId() ?>"
      class="gallery"
      data-mage-init='{"openVideoModal":{}}'
+     <?php echo $parentComponent ?>
      data-images="<?php echo $block->escapeHtml($block->getImagesJson()) ?>"
      data-types="<?php echo $block->escapeHtml(
          $this->helper('Magento\Framework\Json\Helper\Data')->jsonEncode($block->getImageTypes())