From 783a4f9764d3ca4bb3b5982f89b817ce8fd933b8 Mon Sep 17 00:00:00 2001
From: Ihor Melnychenko <imelnychenko@ebay.com>
Date: Mon, 2 Nov 2015 17:21:46 +0200
Subject: [PATCH 01/16] MAGETWO-44758: [MF] JS error on Category Management
 page

---
 .../adminhtml/templates/catalog/category/checkboxes/tree.phtml  | 2 +-
 .../view/adminhtml/templates/catalog/category/tree.phtml        | 2 +-
 .../view/adminhtml/templates/catalog/category/widget/tree.phtml | 2 +-
 .../templates/catalog/product/attribute/set/main.phtml          | 2 +-
 .../view/adminhtml/templates/catalog/category/widget/tree.phtml | 2 +-
 .../Widget/view/adminhtml/templates/instance/edit/layout.phtml  | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/code/Magento/Catalog/view/adminhtml/templates/catalog/category/checkboxes/tree.phtml b/app/code/Magento/Catalog/view/adminhtml/templates/catalog/category/checkboxes/tree.phtml
index 25aaaea0ffe2b..284f241b3ba54 100644
--- a/app/code/Magento/Catalog/view/adminhtml/templates/catalog/category/checkboxes/tree.phtml
+++ b/app/code/Magento/Catalog/view/adminhtml/templates/catalog/category/checkboxes/tree.phtml
@@ -10,7 +10,7 @@
 
 <?php $_divId = 'tree-div_' . time() ?>
 <div id="<?php /* @escapeNotVerified */ echo $_divId ?>" class="tree"></div>
-<script id="ie-deferred-loader" defer="defer" src=""></script>
+<script id="ie-deferred-loader" defer="defer" src="//:"></script>
 <script>
     require([
         'jquery',
diff --git a/app/code/Magento/Catalog/view/adminhtml/templates/catalog/category/tree.phtml b/app/code/Magento/Catalog/view/adminhtml/templates/catalog/category/tree.phtml
index 894a4d5bc63fc..51e849d760ed4 100644
--- a/app/code/Magento/Catalog/view/adminhtml/templates/catalog/category/tree.phtml
+++ b/app/code/Magento/Catalog/view/adminhtml/templates/catalog/category/tree.phtml
@@ -35,7 +35,7 @@
             <div><?php /* @escapeNotVerified */ echo __('This operation can take a long time'); ?></div>
         </div>
     </div>
-    <script id="ie-deferred-loader" defer="defer" src=""></script>
+    <script id="ie-deferred-loader" defer="defer" src="//:"></script>
     <script>
         var tree;
         require([
diff --git a/app/code/Magento/Catalog/view/adminhtml/templates/catalog/category/widget/tree.phtml b/app/code/Magento/Catalog/view/adminhtml/templates/catalog/category/widget/tree.phtml
index 9e303fe921dfd..ae65d2658978a 100644
--- a/app/code/Magento/Catalog/view/adminhtml/templates/catalog/category/widget/tree.phtml
+++ b/app/code/Magento/Catalog/view/adminhtml/templates/catalog/category/widget/tree.phtml
@@ -11,7 +11,7 @@
 <?php $_divId = 'tree' . $block->getId() ?>
 <div id="<?php /* @escapeNotVerified */ echo $_divId ?>" class="tree"></div>
 <!--[if IE]>
-<script id="ie-deferred-loader" defer="defer" src=""></script>
+<script id="ie-deferred-loader" defer="defer" src="//:"></script>
 <![endif]-->
 <script>
 require(['jquery', "prototype", "extjs/ext-tree-checkbox"], function(jQuery){
diff --git a/app/code/Magento/Catalog/view/adminhtml/templates/catalog/product/attribute/set/main.phtml b/app/code/Magento/Catalog/view/adminhtml/templates/catalog/product/attribute/set/main.phtml
index f1bba6cc3c07c..b3a7002ef417e 100644
--- a/app/code/Magento/Catalog/view/adminhtml/templates/catalog/product/attribute/set/main.phtml
+++ b/app/code/Magento/Catalog/view/adminhtml/templates/catalog/product/attribute/set/main.phtml
@@ -38,7 +38,7 @@
             <span class="title"><?php /* @escapeNotVerified */ echo __('Unassigned Attributes') ?></span>
         </div>
         <div id="tree-div2" class="attribute-set-tree"></div>
-        <script id="ie-deferred-loader" defer="defer" src=""></script>
+        <script id="ie-deferred-loader" defer="defer" src="//:"></script>
         <script>
             define("tree-panel",
                 [
diff --git a/app/code/Magento/Widget/view/adminhtml/templates/catalog/category/widget/tree.phtml b/app/code/Magento/Widget/view/adminhtml/templates/catalog/category/widget/tree.phtml
index 135880f5f3142..89d2b75a3b882 100644
--- a/app/code/Magento/Widget/view/adminhtml/templates/catalog/category/widget/tree.phtml
+++ b/app/code/Magento/Widget/view/adminhtml/templates/catalog/category/widget/tree.phtml
@@ -10,7 +10,7 @@
 
 <?php $_divId = 'tree' . $block->getId() ?>
 <div id="<?php /* @escapeNotVerified */ echo $_divId ?>" class="tree"></div>
-<script id="ie-deferred-loader" defer="defer" src=""></script>
+<script id="ie-deferred-loader" defer="defer" src="//:"></script>
 <script>
 require(['jquery', "prototype", "extjs/ext-tree-checkbox"], function(jQuery){
 
diff --git a/app/code/Magento/Widget/view/adminhtml/templates/instance/edit/layout.phtml b/app/code/Magento/Widget/view/adminhtml/templates/instance/edit/layout.phtml
index 6831ca32a007b..a98b8df1fd5de 100644
--- a/app/code/Magento/Widget/view/adminhtml/templates/instance/edit/layout.phtml
+++ b/app/code/Magento/Widget/view/adminhtml/templates/instance/edit/layout.phtml
@@ -15,7 +15,7 @@
         <div class="actions"><?php echo $block->getAddLayoutButtonHtml() ?></div>
     </div>
 </fieldset>
-<script id="ie-deferred-loader" defer="defer" src=""></script>
+<script id="ie-deferred-loader" defer="defer" src="//:"></script>
 <script>
 require([
     'jquery',

From e31fe15fee0adf37ac600c7afe397c42cd97a26d Mon Sep 17 00:00:00 2001
From: Volodymyr Zaets <vzaets@ebay.com>
Date: Fri, 11 Dec 2015 15:34:26 +0200
Subject: [PATCH 02/16] MAGETWO-46824: Add the ability to get inversion value
 to imports/exports/listens methods

---
 .../Magento/Ui/view/base/web/js/lib/core/element/links.js  | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/app/code/Magento/Ui/view/base/web/js/lib/core/element/links.js b/app/code/Magento/Ui/view/base/web/js/lib/core/element/links.js
index c769be3775f46..1ac9b45a46e86 100644
--- a/app/code/Magento/Ui/view/base/web/js/lib/core/element/links.js
+++ b/app/code/Magento/Ui/view/base/web/js/lib/core/element/links.js
@@ -51,7 +51,7 @@ define([
         }
 
         if (owner.component !== target.component) {
-            value = utils.copy(value);
+            value = data.inversionValue ? !utils.copy(value) : utils.copy(value);
         }
 
         component.set(property, value);
@@ -149,6 +149,11 @@ define([
     function transfer(owner, data) {
         var args = _.toArray(arguments);
 
+        if (data.target.substr(0,1) === '!') {
+            data.target = data.target.substr(1);
+            data.inversionValue = true;
+        }
+
         if (owner.name === data.target) {
             args.unshift(owner);
 

From eb621f70095f52f15784cb78ed4638826aaaf68e Mon Sep 17 00:00:00 2001
From: Olga Nakonechna <onakonechna@ebay.com>
Date: Wed, 23 Dec 2015 14:26:27 +0200
Subject: [PATCH 03/16] MAGETWO-45362: Adjust modal window to work with UI
 component

---
 app/code/Magento/Ui/etc/ui_components.xsd     |   9 +
 app/code/Magento/Ui/etc/ui_configuration.xsd  |  11 +
 app/code/Magento/Ui/etc/ui_definition.xsd     |   2 +
 .../view/base/ui_component/etc/definition.xml |  10 +
 .../js/form/components/component-trigger.js   |  61 ++++++
 .../view/base/web/js/modal/modal-component.js | 193 ++++++++++++++++++
 .../Ui/view/base/web/js/modal/modal.js        |   2 +-
 .../form/components/component-trigger.html    |   1 +
 .../web/templates/modal/modal-component.html  |  12 ++
 9 files changed, 300 insertions(+), 1 deletion(-)
 create mode 100644 app/code/Magento/Ui/view/base/web/js/form/components/component-trigger.js
 create mode 100644 app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
 create mode 100644 app/code/Magento/Ui/view/base/web/templates/form/components/component-trigger.html
 create mode 100644 app/code/Magento/Ui/view/base/web/templates/modal/modal-component.html

diff --git a/app/code/Magento/Ui/etc/ui_components.xsd b/app/code/Magento/Ui/etc/ui_components.xsd
index 70c84516adbb7..e2067d803d0b5 100644
--- a/app/code/Magento/Ui/etc/ui_components.xsd
+++ b/app/code/Magento/Ui/etc/ui_components.xsd
@@ -395,6 +395,15 @@
             </xs:extension>
         </xs:complexContent>
     </xs:complexType>
+    <xs:complexType name="modal">
+        <xs:complexContent>
+            <xs:extension base="ui_element">
+                <xs:choice minOccurs="0" maxOccurs="unbounded">
+                    <xs:group ref="configurable"/>
+                </xs:choice>
+            </xs:extension>
+        </xs:complexContent>
+    </xs:complexType>
     <!-- Simple types -->
     <xs:simpleType name="referenceAttributeType">
         <xs:annotation>
diff --git a/app/code/Magento/Ui/etc/ui_configuration.xsd b/app/code/Magento/Ui/etc/ui_configuration.xsd
index 9823de5b4f03d..b3356e96e899a 100644
--- a/app/code/Magento/Ui/etc/ui_configuration.xsd
+++ b/app/code/Magento/Ui/etc/ui_configuration.xsd
@@ -14,6 +14,7 @@
     <xs:include schemaLocation="urn:magento:module:Magento_Ui:etc/ui_components.xsd"/>
     <!-- Components list -->
     <xs:element type="formConfiguration" name="form"/>
+    <xs:element type="modalConfiguration" name="modal"/>
     <xs:element type="containerConfiguration" name="container"/>
     <xs:element type="listingConfiguration" name="listing"/>
     <!-- Custom configuration -->
@@ -38,6 +39,7 @@
                     <xs:element name="actionsColumn" type="actionsColumn" />
                     <xs:element name="selectionsColumn" type="selectionsColumn" />
                     <xs:element type="exportButton" name="exportButton"/>
+                    <xs:element type="modalConfiguration" name="modal"/>
                     <xs:element type="columnsControls" name="columnsControls"/>
                     <xs:element type="listingToolbarConfiguration" name="listingToolbar"/>
                 </xs:choice>
@@ -55,6 +57,7 @@
                 <xs:choice minOccurs="0" maxOccurs="unbounded">
                     <xs:element type="containerConfiguration" name="container"/>
                     <xs:element name="field" type="field" />
+                    <xs:element type="modalConfiguration" name="modal"/>
                 </xs:choice>
             </xs:extension>
         </xs:complexContent>
@@ -82,6 +85,7 @@
                     <xs:element type="fieldsetConfiguration" name="fieldset"/>
                     <xs:element type="containerConfiguration" name="container"/>
                     <xs:element type="dataSource" name="dataSource"/>
+                    <xs:element type="modalConfiguration" name="modal"/>
                 </xs:choice>
             </xs:extension>
         </xs:complexContent>
@@ -97,6 +101,13 @@
             </xs:extension>
         </xs:complexContent>
     </xs:complexType>
+    <xs:complexType name="modalConfiguration">
+        <xs:complexContent>
+            <xs:extension base="containerConfiguration">
+                <xs:choice minOccurs="0" maxOccurs="unbounded"/>
+            </xs:extension>
+        </xs:complexContent>
+    </xs:complexType>
     <xs:complexType name="massactionConfiguration">
         <xs:complexContent>
             <xs:extension base="massaction">
diff --git a/app/code/Magento/Ui/etc/ui_definition.xsd b/app/code/Magento/Ui/etc/ui_definition.xsd
index 2f5a2c587a8f7..0f32b0dd06c2a 100644
--- a/app/code/Magento/Ui/etc/ui_definition.xsd
+++ b/app/code/Magento/Ui/etc/ui_definition.xsd
@@ -60,6 +60,7 @@
             <xs:element name="component" type="component" />
             <xs:element name="actionsColumn" type="actionsColumn" />
             <xs:element name="selectionsColumn" type="selectionsColumn" />
+            <xs:element type="modal" name="modal"/>
         </xs:all>
     </xs:complexType>
     <!-- Custom configuration -->
@@ -83,6 +84,7 @@
                 <xs:choice minOccurs="0" maxOccurs="unbounded">
                     <xs:element type="fieldset" name="fieldset"/>
                     <xs:element type="dataSource" name="dataSource"/>
+                    <xs:element type="modal" name="modal"/>
                 </xs:choice>
             </xs:extension>
         </xs:complexContent>
diff --git a/app/code/Magento/Ui/view/base/ui_component/etc/definition.xml b/app/code/Magento/Ui/view/base/ui_component/etc/definition.xml
index 24df83fa1ba92..b91fb4ba096ff 100755
--- a/app/code/Magento/Ui/view/base/ui_component/etc/definition.xml
+++ b/app/code/Magento/Ui/view/base/ui_component/etc/definition.xml
@@ -349,6 +349,16 @@
             </item>
         </argument>
     </exportButton>
+    <modal class="Magento\Ui\Component\Container">
+        <argument name="data" xsi:type="array">
+            <item name="config" xsi:type="array">
+                <item name="component" xsi:type="string">Magento_Ui/js/modal/modal-component</item>
+                <item name="options" xsi:type="array">
+                    <item name="type" xsi:type="string">slide</item>
+                </item>
+            </item>
+        </argument>
+    </modal>
     <columnsControls class="Magento\Ui\Component\Container">
          <argument name="data" xsi:type="array">
             <item name="config" xsi:type="array">
diff --git a/app/code/Magento/Ui/view/base/web/js/form/components/component-trigger.js b/app/code/Magento/Ui/view/base/web/js/form/components/component-trigger.js
new file mode 100644
index 0000000000000..3b44a1ae2f1de
--- /dev/null
+++ b/app/code/Magento/Ui/view/base/web/js/form/components/component-trigger.js
@@ -0,0 +1,61 @@
+/**
+ * Copyright � 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'uiElement',
+    'uiRegistry',
+    'uiLayout',
+    'mageUtils'
+], function (Element, registry, layout, utils) {
+    'use strict';
+
+    return Element.extend({
+        defaults:{
+            template: 'ui/form/components/component-trigger'
+        },
+
+        /**
+         * Initializes component.
+         *
+         * @returns {Object} Chainable.
+         */
+        initialize: function () {
+            return this._super();
+        },
+
+        /**
+         * Perform configured action on target component,
+         * but previously create this component from template if it is not existed
+         */
+        action: function () {
+            var target = this.target,
+                targetName = this.targetName,
+                parentName = targetName.split('.'),
+                child,
+                index;
+
+            if (!target) {
+                if (registry.has(targetName)) {
+                    target = registry.async(targetName);
+                } else {
+                    index = parentName.pop();
+                    parentName = parentName.join('.');
+
+                    child = utils.template({
+                        parent: parentName,
+                        name: index,
+                        nodeTemplate: targetName
+                    });
+                    layout([child]);
+                    target = registry.async(this.targetName);
+                }
+            }
+
+            if (target && typeof target === 'function' && this.actionName) {
+                target(this.actionName);
+            }
+        }
+    });
+});
diff --git a/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js b/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
new file mode 100644
index 0000000000000..b01e805096bba
--- /dev/null
+++ b/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
@@ -0,0 +1,193 @@
+/**
+ * Copyright � 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+define([
+    'Magento_Ui/js/lib/view/utils/async',
+    'uiCollection',
+    'underscore',
+    './modal'
+], function ($, Collection, _) {
+    'use strict';
+
+    return Collection.extend({
+        defaults: {
+            template: 'ui/modal/modal-component',
+            options: {
+                title: '',
+                buttons: []
+            },
+            templateRootSelector: '.modal_component'
+        },
+
+        /**
+         * Initializes component.
+         *
+         * @returns {Object} Chainable.
+         */
+        initialize: function () {
+            this._super();
+            _.bindAll(this,
+                'initModal',
+                'openModal',
+                'closeModal',
+                'toggleModal',
+                'setPrevValues',
+                'actionCancel');
+            this.initializeContent();
+
+            return this;
+        },
+
+        /**
+         * Initialize modal's content components
+         */
+        initializeContent: function () {
+            $.async(this.templateRootSelector, this, this.initModal);
+        },
+
+        /**
+         * Reset data from provider
+         */
+        resetData: function () {
+            this.elems().forEach(this.resetValue, this);
+        },
+
+        /**
+         * Wrap content in a modal of certain type
+         *
+         * @param {HTMLElement} element
+         * @returns {Object} Chainable.
+         */
+        initModal: function (element) {
+            if (!this.modal) {
+                this.overrideModalButtonCallback();
+                this.options.modalCloseBtnHandler = this.actionCancel;
+                this.modal = $(element).modal(this.options);
+
+                if (this.waitCbk) {
+                    this.waitCbk();
+                    this.waitCbk = null;
+                }
+            }
+
+            return this;
+        },
+
+        /**
+         * Open modal
+         */
+        openModal: function () {
+            if (this.modal) {
+                this.modal.modal('openModal');
+                this.applyData();
+            } else {
+                this.waitCbk = this.openModal;
+            }
+        },
+
+        /**
+         * Close modal
+         */
+        closeModal: function () {
+            if (this.modal) {
+                this.modal.modal('closeModal');
+            } else {
+                this.waitCbk = this.closeModal;
+            }
+        },
+
+        /**
+         * Toggle modal
+         */
+        toggleModal: function () {
+            var state;
+
+            if (this.modal) {
+                state = this.modal.data('mage-modal').options.isOpen;
+
+                if (state) {
+                    this.closeModal();
+                } else {
+                    this.openModal();
+                }
+            } else {
+                this.waitCbk = this.toggleModal;
+            }
+        },
+
+        /**
+         * Update 'applied' property with data from modal content
+         */
+        applyData: function () {
+            var applied = {};
+
+            this.elems().forEach(this.gatherValues.bind(this, applied), this);
+            this.applied = applied;
+        },
+
+        /**
+         * Gather values from modal content
+         *
+         * @param {Array} applied
+         * @param {HTMLElement} elem
+         */
+        gatherValues: function (applied, elem) {
+            if (typeof elem.value === 'function') {
+                applied[elem.index] = elem.value();
+            } else if (elem.elems) {
+                elem.elems().forEach(this.gatherValues.bind(this, applied), this);
+            }
+        },
+
+        /**
+         * Set to previous values from modal content
+         *
+         * @param {HTMLElement} elem
+         */
+        setPrevValues: function (elem) {
+            if (typeof elem.value === 'function') {
+                elem.value(this.applied[elem.index]);
+            } else if (elem.elems) {
+                elem.elems().forEach(this.setPrevValues, this);
+            }
+        },
+
+        /**
+         * Override modal buttons callback placeholders with real callbacks
+         */
+        overrideModalButtonCallback: function () {
+            var buttons = this.options.buttons;
+
+            if (buttons && buttons.length) {
+                buttons.forEach(function (button) {
+                    button.click = (this[button.click] || this.actionNothing).bind(this);
+                }, this);
+            }
+        },
+
+        /**
+         * Placeholder for unrecognized action
+         */
+        actionNothing: function () {},
+
+        /**
+         * Cancels changes in modal:
+         * returning elems values to the previous state,
+         * and close modal
+         */
+        actionCancel: function () {
+            this.elems().forEach(this.setPrevValues, this);
+            this.closeModal();
+        },
+
+        /**
+         * Accept changes in modal by not preventing them.
+         * Can be extended by exporting 'gatherValues' result somewhere
+         */
+        actionDone: function () {
+            this.closeModal();
+        }
+    });
+});
diff --git a/app/code/Magento/Ui/view/base/web/js/modal/modal.js b/app/code/Magento/Ui/view/base/web/js/modal/modal.js
index 23011d607cdad..53c806648fa31 100644
--- a/app/code/Magento/Ui/view/base/web/js/modal/modal.js
+++ b/app/code/Magento/Ui/view/base/web/js/modal/modal.js
@@ -124,7 +124,7 @@ define([
             this._createButtons();
             $(this.options.trigger).on('click', _.bind(this.toggleModal, this));
             this._on(this.modal.find(this.options.modalCloseBtn), {
-                'click': this.closeModal
+                'click': this.options.modalCloseBtnHandler ? this.options.modalCloseBtnHandler : this.closeModal
             });
             this._on(this.element, {
                 'openModal': this.openModal,
diff --git a/app/code/Magento/Ui/view/base/web/templates/form/components/component-trigger.html b/app/code/Magento/Ui/view/base/web/templates/form/components/component-trigger.html
new file mode 100644
index 0000000000000..41891a33c8898
--- /dev/null
+++ b/app/code/Magento/Ui/view/base/web/templates/form/components/component-trigger.html
@@ -0,0 +1 @@
+<button type="button" data-bind="click: action, text: title"></button>
\ No newline at end of file
diff --git a/app/code/Magento/Ui/view/base/web/templates/modal/modal-component.html b/app/code/Magento/Ui/view/base/web/templates/modal/modal-component.html
new file mode 100644
index 0000000000000..d1f6e4938765c
--- /dev/null
+++ b/app/code/Magento/Ui/view/base/web/templates/modal/modal-component.html
@@ -0,0 +1,12 @@
+<!--
+/**
+ * Copyright � 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+
+<div class="modal_component">
+    <!-- ko foreach: { data: elems, as: 'element' } -->
+    <!-- ko template: element.getTemplate() --><!-- /ko -->
+    <!-- /ko -->
+</div>
\ No newline at end of file

From 8da30986169fd44d5d960c7afb5a8e6d5e4274f1 Mon Sep 17 00:00:00 2001
From: Oleksandr Miroshnichenko <omiroshnichenko@ebay.com>
Date: Mon, 28 Dec 2015 14:05:31 +0200
Subject: [PATCH 04/16] MAGETWO-47258: Actions are not available in grid if
 floating table header appear

---
 .../js/lib/knockout/bindings/outer_click.js   | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/outer_click.js b/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/outer_click.js
index 839a87481a386..7fa3ff22af897 100644
--- a/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/outer_click.js
+++ b/app/code/Magento/Ui/view/base/web/js/lib/knockout/bindings/outer_click.js
@@ -15,6 +15,30 @@ define([
         onlyIfVisible: true
     };
 
+    /**
+     * Checks if element sis visible.
+     *
+     * @param {Element} el
+     * @returns {Boolean}
+     */
+    function isVisible(el) {
+        var style = window.getComputedStyle(el),
+            visibility = {
+                display: 'none',
+                visibility: 'hidden',
+                opacity: '0'
+            },
+            visible = true;
+
+        _.each(visibility, function (val, key) {
+            if (style[key] === val) {
+                visible = false;
+            }
+        });
+
+        return visible;
+    }
+
     /**
      * Document click handler which in case if event target is not
      * a descendant of provided container element,
@@ -33,7 +57,7 @@ define([
         }
 
         if (config.onlyIfVisible) {
-            if (!_.isNull(container.offsetParent)) {
+            if (!_.isNull(container.offsetParent) && isVisible(container)) {
                 callback();
             }
         } else {

From 2e3f40ed01474411e7447324d03948efc3ecd95b Mon Sep 17 00:00:00 2001
From: Olga Nakonechna <onakonechna@ebay.com>
Date: Mon, 28 Dec 2015 20:45:01 +0200
Subject: [PATCH 05/16] MAGETWO-47380: Modal component improvement (for better
 work with grid inside form)

---
 .../js/form/components/component-trigger.js   | 68 ++++++++------
 .../view/base/web/js/modal/modal-component.js | 93 +++++++++++++++++--
 .../web/templates/modal/modal-component.html  |  2 +-
 3 files changed, 126 insertions(+), 37 deletions(-)

diff --git a/app/code/Magento/Ui/view/base/web/js/form/components/component-trigger.js b/app/code/Magento/Ui/view/base/web/js/form/components/component-trigger.js
index 3b44a1ae2f1de..bac8aab717133 100644
--- a/app/code/Magento/Ui/view/base/web/js/form/components/component-trigger.js
+++ b/app/code/Magento/Ui/view/base/web/js/form/components/component-trigger.js
@@ -12,7 +12,7 @@ define([
     'use strict';
 
     return Element.extend({
-        defaults:{
+        defaults: {
             template: 'ui/form/components/component-trigger'
         },
 
@@ -26,36 +26,52 @@ define([
         },
 
         /**
-         * Perform configured action on target component,
-         * but previously create this component from template if it is not existed
+         * Performs configured actions
          */
         action: function () {
-            var target = this.target,
-                targetName = this.targetName,
-                parentName = targetName.split('.'),
-                child,
-                index;
-
-            if (!target) {
-                if (registry.has(targetName)) {
-                    target = registry.async(targetName);
-                } else {
-                    index = parentName.pop();
-                    parentName = parentName.join('.');
-
-                    child = utils.template({
-                        parent: parentName,
-                        name: index,
-                        nodeTemplate: targetName
-                    });
-                    layout([child]);
-                    target = registry.async(this.targetName);
-                }
+            this.actions.forEach(this.applyAction, this);
+        },
+
+        /**
+         * Apply action on target component,
+         * but previously create this component from template if it is not existed
+         *
+         * @param {Object} action - action configuration
+         */
+        applyAction: function (action) {
+            var targetName = action.targetName,
+                params = action.params,
+                actionName = action.actionName,
+                target;
+
+            if (!registry.has(targetName)) {
+                this.getFromTemplate(targetName);
             }
+            target = registry.async(targetName);
 
-            if (target && typeof target === 'function' && this.actionName) {
-                target(this.actionName);
+            if (target && typeof target === 'function' && actionName) {
+                target(actionName, params);
             }
+        },
+
+        /**
+         * Create target component from template
+         *
+         * @param {Object} targetName - name of component,
+         * that supposed to be a template and need to be initialized
+         */
+        getFromTemplate: function (targetName) {
+            var parentName = targetName.split('.'),
+                index = parentName.pop(),
+                child;
+
+            parentName = parentName.join('.');
+            child = utils.template({
+                parent: parentName,
+                name: index,
+                nodeTemplate: targetName
+            });
+            layout([child]);
         }
     });
 });
diff --git a/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js b/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
index b01e805096bba..bbd870c847838 100644
--- a/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
+++ b/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
@@ -1,5 +1,5 @@
 /**
- * Copyright � 2015 Magento. All rights reserved.
+ * Copyright © 2015 Magento. All rights reserved.
  * See COPYING.txt for license details.
  */
 
@@ -18,7 +18,7 @@ define([
                 title: '',
                 buttons: []
             },
-            templateRootSelector: '.modal_component'
+            valid: true
         },
 
         /**
@@ -34,24 +34,42 @@ define([
                 'closeModal',
                 'toggleModal',
                 'setPrevValues',
-                'actionCancel');
+                'actionCancel',
+                'validate');
             this.initializeContent();
 
             return this;
         },
 
+        /**
+         * Initializes modal configuration
+         *
+         * @returns {Object} Chainable.
+         */
+        initConfig: function () {
+            this._super();
+            this.uniqueClass = this.name.replace(/\./g, '_');
+
+            return this;
+        },
+
         /**
          * Initialize modal's content components
          */
         initializeContent: function () {
-            $.async(this.templateRootSelector, this, this.initModal);
+            $.async('.' + this.uniqueClass(), this, this.initModal);
         },
 
         /**
-         * Reset data from provider
+         * Initializes observable properties.
+         *
+         * @returns {Massactions} Chainable.
          */
-        resetData: function () {
-            this.elems().forEach(this.resetValue, this);
+        initObservable: function () {
+            this._super()
+                .observe('uniqueClass');
+
+            return this;
         },
 
         /**
@@ -117,6 +135,24 @@ define([
             }
         },
 
+        /**
+         * Validate everything validatable in modal
+         */
+        validate: function (elem) {
+            if (typeof elem.validate === 'function') {
+                this.valid = this.valid & elem.validate().valid;
+            } else if (elem.elems) {
+                elem.elems().forEach(this.validate, this);
+            }
+        },
+
+        /**
+         * Reset data from provider
+         */
+        resetData: function () {
+            this.elems().forEach(this.resetValue, this);
+        },
+
         /**
          * Update 'applied' property with data from modal content
          */
@@ -154,6 +190,21 @@ define([
             }
         },
 
+        /**
+         * Triggers some method in every modal child elem, if this method is defined
+         *
+         * @param {String} actionName
+         * @param {String} targetName
+         * @param {HTMLElement} elem
+         */
+        triggerActionInChildElem: function (actionName, targetName, elem) {
+            if (typeof elem[actionName] === 'function' && (!targetName || elem.index === targetName)) {
+                elem[actionName]();
+            } else if (elem.elems) {
+                elem.elems().forEach(this.triggerActionInChildElem.bind(this, actionName, targetName), this);
+            }
+        },
+
         /**
          * Override modal buttons callback placeholders with real callbacks
          */
@@ -162,15 +213,32 @@ define([
 
             if (buttons && buttons.length) {
                 buttons.forEach(function (button) {
-                    button.click = (this[button.click] || this.actionNothing).bind(this);
+                    button.click = this.getButtonClickHandler(button.click);
                 }, this);
             }
         },
 
+        /**
+         * Override modal buttons callback placeholders with real callbacks
+         */
+        getButtonClickHandler: function (clickConfig) {
+            if (_.isObject(clickConfig)) {
+                return clickConfig.closeAfter ?
+                    function () {
+                        this.triggerActionInChildElem(clickConfig.actionName, clickConfig.targetName, this);
+                        this.closeModal();
+                    }.bind(this) :
+                    this.triggerActionInChildElem.bind(this, clickConfig.actionName, clickConfig.targetName, this);
+            }
+
+            return (this[clickConfig] || this.actionNothing).bind(this);
+        },
+
         /**
          * Placeholder for unrecognized action
          */
-        actionNothing: function () {},
+        actionNothing: function () {
+        },
 
         /**
          * Cancels changes in modal:
@@ -187,7 +255,12 @@ define([
          * Can be extended by exporting 'gatherValues' result somewhere
          */
         actionDone: function () {
-            this.closeModal();
+            this.valid = true;
+            this.elems().forEach(this.validate, this);
+
+            if (this.valid) {
+                this.closeModal();
+            }
         }
     });
 });
diff --git a/app/code/Magento/Ui/view/base/web/templates/modal/modal-component.html b/app/code/Magento/Ui/view/base/web/templates/modal/modal-component.html
index d1f6e4938765c..691bcad286728 100644
--- a/app/code/Magento/Ui/view/base/web/templates/modal/modal-component.html
+++ b/app/code/Magento/Ui/view/base/web/templates/modal/modal-component.html
@@ -5,7 +5,7 @@
  */
 -->
 
-<div class="modal_component">
+<div data-bind="css: uniqueClass">
     <!-- ko foreach: { data: elems, as: 'element' } -->
     <!-- ko template: element.getTemplate() --><!-- /ko -->
     <!-- /ko -->

From 2131b0e979f1779080fa8dffa1ac2b7fdee3cac0 Mon Sep 17 00:00:00 2001
From: Olga Nakonechna <onakonechna@ebay.com>
Date: Wed, 30 Dec 2015 14:09:24 +0200
Subject: [PATCH 06/16] MAGETWO-47380: Modal component improvement (for better
 work with grid inside form)

---
 .../view/base/web/js/modal/modal-component.js | 53 ++++++++++---------
 .../web/templates/modal/modal-component.html  |  2 +-
 2 files changed, 29 insertions(+), 26 deletions(-)

diff --git a/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js b/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
index bbd870c847838..1d131f98b343f 100644
--- a/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
+++ b/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
@@ -18,7 +18,10 @@ define([
                 title: '',
                 buttons: []
             },
-            valid: true
+            valid: true,
+            listens: {
+                state: 'onState'
+            }
         },
 
         /**
@@ -48,7 +51,8 @@ define([
          */
         initConfig: function () {
             this._super();
-            this.uniqueClass = this.name.replace(/\./g, '_');
+            this.modalClass = this.name.replace(/\./g, '_');
+            this.rootSelector = '.' + this.modalClass;
 
             return this;
         },
@@ -57,17 +61,17 @@ define([
          * Initialize modal's content components
          */
         initializeContent: function () {
-            $.async('.' + this.uniqueClass(), this, this.initModal);
+            $.async(this.rootSelector, this, this.initModal);
         },
 
         /**
          * Initializes observable properties.
          *
-         * @returns {Massactions} Chainable.
+         * @returns {Object} Chainable.
          */
         initObservable: function () {
-            this._super()
-                .observe('uniqueClass');
+            this._super();
+            this.observe('state');
 
             return this;
         },
@@ -98,8 +102,7 @@ define([
          */
         openModal: function () {
             if (this.modal) {
-                this.modal.modal('openModal');
-                this.applyData();
+                this.state(true);
             } else {
                 this.waitCbk = this.openModal;
             }
@@ -110,7 +113,7 @@ define([
          */
         closeModal: function () {
             if (this.modal) {
-                this.modal.modal('closeModal');
+                this.state(false);
             } else {
                 this.waitCbk = this.closeModal;
             }
@@ -120,21 +123,27 @@ define([
          * Toggle modal
          */
         toggleModal: function () {
-            var state;
-
             if (this.modal) {
-                state = this.modal.data('mage-modal').options.isOpen;
-
-                if (state) {
-                    this.closeModal();
-                } else {
-                    this.openModal();
-                }
+                this.state(!this.state());
             } else {
                 this.waitCbk = this.toggleModal;
             }
         },
 
+        /**
+         * Wrap content in a modal of certain type
+         *
+         * @param {Boolean} state
+         */
+        onState: function (state) {
+            if (state) {
+                this.modal.modal('openModal');
+                this.applyData();
+            } else {
+                this.modal.modal('closeModal');
+            }
+        },
+
         /**
          * Validate everything validatable in modal
          */
@@ -231,13 +240,7 @@ define([
                     this.triggerActionInChildElem.bind(this, clickConfig.actionName, clickConfig.targetName, this);
             }
 
-            return (this[clickConfig] || this.actionNothing).bind(this);
-        },
-
-        /**
-         * Placeholder for unrecognized action
-         */
-        actionNothing: function () {
+            return this[clickConfig] ? this[clickConfig].bind(this) : function () {};
         },
 
         /**
diff --git a/app/code/Magento/Ui/view/base/web/templates/modal/modal-component.html b/app/code/Magento/Ui/view/base/web/templates/modal/modal-component.html
index 691bcad286728..d3d7dc7f644c2 100644
--- a/app/code/Magento/Ui/view/base/web/templates/modal/modal-component.html
+++ b/app/code/Magento/Ui/view/base/web/templates/modal/modal-component.html
@@ -5,7 +5,7 @@
  */
 -->
 
-<div data-bind="css: uniqueClass">
+<div data-bind="css: modalClass">
     <!-- ko foreach: { data: elems, as: 'element' } -->
     <!-- ko template: element.getTemplate() --><!-- /ko -->
     <!-- /ko -->

From 469cdbb4ae874f2a3d7717538cb90ed2f0c6def7 Mon Sep 17 00:00:00 2001
From: Olga Nakonechna <onakonechna@ebay.com>
Date: Wed, 30 Dec 2015 19:05:27 +0200
Subject: [PATCH 07/16] MAGETWO-47380: Modal component improvement (for better
 work with grid inside form)

---
 app/code/Magento/Ui/etc/ui_components.xsd                | 9 +++++++++
 app/code/Magento/Ui/etc/ui_configuration.xsd             | 1 +
 app/code/Magento/Ui/etc/ui_definition.xsd                | 1 +
 .../Magento/Ui/view/base/ui_component/etc/definition.xml | 7 +++++++
 .../form/components/{component-trigger.js => button.js}  | 2 +-
 .../components/{component-trigger.html => button.html}   | 0
 6 files changed, 19 insertions(+), 1 deletion(-)
 rename app/code/Magento/Ui/view/base/web/js/form/components/{component-trigger.js => button.js} (97%)
 rename app/code/Magento/Ui/view/base/web/templates/form/components/{component-trigger.html => button.html} (100%)

diff --git a/app/code/Magento/Ui/etc/ui_components.xsd b/app/code/Magento/Ui/etc/ui_components.xsd
index e2067d803d0b5..546345f5869db 100644
--- a/app/code/Magento/Ui/etc/ui_components.xsd
+++ b/app/code/Magento/Ui/etc/ui_components.xsd
@@ -404,6 +404,15 @@
             </xs:extension>
         </xs:complexContent>
     </xs:complexType>
+    <xs:complexType name="button">
+        <xs:complexContent>
+            <xs:extension base="ui_element">
+                <xs:choice minOccurs="0" maxOccurs="unbounded">
+                    <xs:group ref="configurable"/>
+                </xs:choice>
+            </xs:extension>
+        </xs:complexContent>
+    </xs:complexType>
     <!-- Simple types -->
     <xs:simpleType name="referenceAttributeType">
         <xs:annotation>
diff --git a/app/code/Magento/Ui/etc/ui_configuration.xsd b/app/code/Magento/Ui/etc/ui_configuration.xsd
index b3356e96e899a..4795d4d01386c 100644
--- a/app/code/Magento/Ui/etc/ui_configuration.xsd
+++ b/app/code/Magento/Ui/etc/ui_configuration.xsd
@@ -58,6 +58,7 @@
                     <xs:element type="containerConfiguration" name="container"/>
                     <xs:element name="field" type="field" />
                     <xs:element type="modalConfiguration" name="modal"/>
+                    <xs:element type="button" name="button"/>
                 </xs:choice>
             </xs:extension>
         </xs:complexContent>
diff --git a/app/code/Magento/Ui/etc/ui_definition.xsd b/app/code/Magento/Ui/etc/ui_definition.xsd
index 0f32b0dd06c2a..0f6baaa045f67 100644
--- a/app/code/Magento/Ui/etc/ui_definition.xsd
+++ b/app/code/Magento/Ui/etc/ui_definition.xsd
@@ -61,6 +61,7 @@
             <xs:element name="actionsColumn" type="actionsColumn" />
             <xs:element name="selectionsColumn" type="selectionsColumn" />
             <xs:element type="modal" name="modal"/>
+            <xs:element type="button" name="button"/>
         </xs:all>
     </xs:complexType>
     <!-- Custom configuration -->
diff --git a/app/code/Magento/Ui/view/base/ui_component/etc/definition.xml b/app/code/Magento/Ui/view/base/ui_component/etc/definition.xml
index b91fb4ba096ff..65c564a462088 100755
--- a/app/code/Magento/Ui/view/base/ui_component/etc/definition.xml
+++ b/app/code/Magento/Ui/view/base/ui_component/etc/definition.xml
@@ -373,4 +373,11 @@
             </item>
         </argument>
     </listingToolbar>
+    <button class="Magento\Ui\Component\Container">
+        <argument name="data" xsi:type="array">
+            <item name="config" xsi:type="array">
+                <item name="component" xsi:type="string">Magento_Ui/js/form/components/button</item>
+            </item>
+        </argument>
+    </button>
 </components>
diff --git a/app/code/Magento/Ui/view/base/web/js/form/components/component-trigger.js b/app/code/Magento/Ui/view/base/web/js/form/components/button.js
similarity index 97%
rename from app/code/Magento/Ui/view/base/web/js/form/components/component-trigger.js
rename to app/code/Magento/Ui/view/base/web/js/form/components/button.js
index bac8aab717133..3bdc93b6584a4 100644
--- a/app/code/Magento/Ui/view/base/web/js/form/components/component-trigger.js
+++ b/app/code/Magento/Ui/view/base/web/js/form/components/button.js
@@ -13,7 +13,7 @@ define([
 
     return Element.extend({
         defaults: {
-            template: 'ui/form/components/component-trigger'
+            template: 'ui/form/components/button'
         },
 
         /**
diff --git a/app/code/Magento/Ui/view/base/web/templates/form/components/component-trigger.html b/app/code/Magento/Ui/view/base/web/templates/form/components/button.html
similarity index 100%
rename from app/code/Magento/Ui/view/base/web/templates/form/components/component-trigger.html
rename to app/code/Magento/Ui/view/base/web/templates/form/components/button.html

From 6e6464d242a74a4420407f2e5992d279f6548f21 Mon Sep 17 00:00:00 2001
From: Olga Nakonechna <onakonechna@ebay.com>
Date: Wed, 30 Dec 2015 19:32:11 +0200
Subject: [PATCH 08/16] MAGETWO-47380: Modal component improvement (for better
 work with grid inside form)

---
 app/code/Magento/Ui/etc/ui_configuration.xsd              | 1 +
 .../Magento/Ui/view/base/web/js/modal/modal-component.js  | 8 ++++++++
 2 files changed, 9 insertions(+)

diff --git a/app/code/Magento/Ui/etc/ui_configuration.xsd b/app/code/Magento/Ui/etc/ui_configuration.xsd
index 4795d4d01386c..0bdc851912fde 100644
--- a/app/code/Magento/Ui/etc/ui_configuration.xsd
+++ b/app/code/Magento/Ui/etc/ui_configuration.xsd
@@ -42,6 +42,7 @@
                     <xs:element type="modalConfiguration" name="modal"/>
                     <xs:element type="columnsControls" name="columnsControls"/>
                     <xs:element type="listingToolbarConfiguration" name="listingToolbar"/>
+                    <xs:element type="button" name="button"/>
                 </xs:choice>
             </xs:extension>
         </xs:complexContent>
diff --git a/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js b/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
index 1d131f98b343f..0251a8e368813 100644
--- a/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
+++ b/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
@@ -64,6 +64,13 @@ define([
             $.async(this.rootSelector, this, this.initModal);
         },
 
+        /**
+         * Init toolbar section so other components will be able to place something in it
+         */
+        initToolbarSection: function () {
+            this.set('toolbarSection', this.modal.data('modal').modal.find('header').get(0));
+        },
+
         /**
          * Initializes observable properties.
          *
@@ -87,6 +94,7 @@ define([
                 this.overrideModalButtonCallback();
                 this.options.modalCloseBtnHandler = this.actionCancel;
                 this.modal = $(element).modal(this.options);
+                this.initToolbarSection();
 
                 if (this.waitCbk) {
                     this.waitCbk();

From 31a71319c7cad5c5a2764685f27c1165dcdd4644 Mon Sep 17 00:00:00 2001
From: Olga Nakonechna <onakonechna@ebay.com>
Date: Mon, 4 Jan 2016 16:31:38 +0200
Subject: [PATCH 09/16] MAGETWO-47380: Modal component improvement (for better
 work with grid inside form)

---
 .../view/base/web/js/modal/modal-component.js | 28 +++++++++++--------
 1 file changed, 17 insertions(+), 11 deletions(-)

diff --git a/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js b/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
index 0251a8e368813..4994e8ed43f52 100644
--- a/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
+++ b/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
@@ -6,9 +6,10 @@
 define([
     'Magento_Ui/js/lib/view/utils/async',
     'uiCollection',
+    'uiRegistry',
     'underscore',
     './modal'
-], function ($, Collection, _) {
+], function ($, Collection, registry, _) {
     'use strict';
 
     return Collection.extend({
@@ -210,15 +211,20 @@ define([
         /**
          * Triggers some method in every modal child elem, if this method is defined
          *
-         * @param {String} actionName
-         * @param {String} targetName
-         * @param {HTMLElement} elem
+         * @param {Object} action - action configuration,
+         * must contain actionName and targetName and
+         * can contain params
          */
-        triggerActionInChildElem: function (actionName, targetName, elem) {
-            if (typeof elem[actionName] === 'function' && (!targetName || elem.index === targetName)) {
-                elem[actionName]();
-            } else if (elem.elems) {
-                elem.elems().forEach(this.triggerActionInChildElem.bind(this, actionName, targetName), this);
+        triggerAction: function (action) {
+            var targetName = action.targetName,
+                params = action.params,
+                actionName = action.actionName,
+                target;
+
+            target = registry.async(targetName);
+
+            if (target && typeof target === 'function' && actionName) {
+                target(actionName, params);
             }
         },
 
@@ -242,10 +248,10 @@ define([
             if (_.isObject(clickConfig)) {
                 return clickConfig.closeAfter ?
                     function () {
-                        this.triggerActionInChildElem(clickConfig.actionName, clickConfig.targetName, this);
+                        this.triggerAction(clickConfig);
                         this.closeModal();
                     }.bind(this) :
-                    this.triggerActionInChildElem.bind(this, clickConfig.actionName, clickConfig.targetName, this);
+                    this.triggerAction.bind(this, clickConfig);
             }
 
             return this[clickConfig] ? this[clickConfig].bind(this) : function () {};

From 745819b6651669421336b467d0281cc36f2f1dcb Mon Sep 17 00:00:00 2001
From: Olga Nakonechna <onakonechna@ebay.com>
Date: Tue, 5 Jan 2016 14:42:01 +0200
Subject: [PATCH 10/16] MAGETWO-47380: Modal component improvement (for better
 work with grid inside form)

---
 .../view/base/web/js/modal/modal-component.js | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js b/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
index 4994e8ed43f52..ce4433e306a40 100644
--- a/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
+++ b/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
@@ -236,25 +236,31 @@ define([
 
             if (buttons && buttons.length) {
                 buttons.forEach(function (button) {
-                    button.click = this.getButtonClickHandler(button.click);
+                    button.click = this.getButtonClickHandler(button.actions);
                 }, this);
             }
         },
 
         /**
-         * Override modal buttons callback placeholders with real callbacks
+         * Generate button click handler based on button's 'actions' configuration
          */
-        getButtonClickHandler: function (clickConfig) {
-            if (_.isObject(clickConfig)) {
-                return clickConfig.closeAfter ?
-                    function () {
-                        this.triggerAction(clickConfig);
-                        this.closeModal();
-                    }.bind(this) :
-                    this.triggerAction.bind(this, clickConfig);
-            }
+        getButtonClickHandler: function (actionsConfig) {
+            var actions = actionsConfig.map(
+                function (actionConfig) {
+                    if (_.isObject(actionConfig)) {
+                        return this.triggerAction.bind(this, actionConfig);
+                    }
+
+                    return this[actionConfig] ? this[actionConfig].bind(this) : function () {};
+                }, this);
 
-            return this[clickConfig] ? this[clickConfig].bind(this) : function () {};
+            return function () {
+                actions.forEach(
+                    function (action) {
+                        action();
+                    }
+                );
+            };
         },
 
         /**

From 9cb3dce00ce21c69492700a373ab5e239a085ede Mon Sep 17 00:00:00 2001
From: Olga Nakonechna <onakonechna@ebay.com>
Date: Tue, 5 Jan 2016 15:54:04 +0200
Subject: [PATCH 11/16] MAGETWO-47380: Modal component improvement (for better
 work with grid inside form)

---
 .../base/web/js/form/components/button.js     | 30 +++++++++++++++++--
 .../form/components/button/simple.html        |  7 +++++
 .../web/templates/form/element/button.html    | 14 +++++++++
 3 files changed, 49 insertions(+), 2 deletions(-)
 create mode 100644 app/code/Magento/Ui/view/base/web/templates/form/components/button/simple.html
 create mode 100644 app/code/Magento/Ui/view/base/web/templates/form/element/button.html

diff --git a/app/code/Magento/Ui/view/base/web/js/form/components/button.js b/app/code/Magento/Ui/view/base/web/js/form/components/button.js
index 3bdc93b6584a4..16e03d14689c9 100644
--- a/app/code/Magento/Ui/view/base/web/js/form/components/button.js
+++ b/app/code/Magento/Ui/view/base/web/js/form/components/button.js
@@ -13,7 +13,11 @@ define([
 
     return Element.extend({
         defaults: {
-            template: 'ui/form/components/button'
+            additionalClasses: {},
+            displayArea: 'outsideGroup',
+            displayAsLink: false,
+            elementTmpl: 'ui/form/element/button',
+            template: 'ui/form/components/button/simple'
         },
 
         /**
@@ -22,7 +26,8 @@ define([
          * @returns {Object} Chainable.
          */
         initialize: function () {
-            return this._super();
+            return this._super()
+                ._setClasses();
         },
 
         /**
@@ -72,6 +77,27 @@ define([
                 nodeTemplate: targetName
             });
             layout([child]);
+        },
+
+        /**
+         * Extends 'additionalClasses' object.
+         *
+         * @returns {Object} Chainable.
+         */
+        _setClasses: function () {
+            if (typeof this.additionalClasses === 'string') {
+                this.additionalClasses = this.additionalClasses
+                    .trim()
+                    .split(' ')
+                    .reduce(function (classes, name) {
+                        classes[name] = true;
+
+                        return classes;
+                    }, {}
+                );
+            }
+
+            return this;
         }
     });
 });
diff --git a/app/code/Magento/Ui/view/base/web/templates/form/components/button/simple.html b/app/code/Magento/Ui/view/base/web/templates/form/components/button/simple.html
new file mode 100644
index 0000000000000..d562e699c843a
--- /dev/null
+++ b/app/code/Magento/Ui/view/base/web/templates/form/components/button/simple.html
@@ -0,0 +1,7 @@
+<!--
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<render args="elementTmpl"/>
\ No newline at end of file
diff --git a/app/code/Magento/Ui/view/base/web/templates/form/element/button.html b/app/code/Magento/Ui/view/base/web/templates/form/element/button.html
new file mode 100644
index 0000000000000..8f337ce7acb96
--- /dev/null
+++ b/app/code/Magento/Ui/view/base/web/templates/form/element/button.html
@@ -0,0 +1,14 @@
+<!--
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+-->
+<button type="button"
+        css="
+            'action-advanced': $data.displayAsLink,
+            'action-secondary': !$data.displayAsLink
+        "
+        click="action"
+        text="title">
+</button>
\ No newline at end of file

From c0fc27a86f3c9321cb489d5123ceddd076229949 Mon Sep 17 00:00:00 2001
From: Olga Nakonechna <onakonechna@ebay.com>
Date: Tue, 5 Jan 2016 17:46:15 +0200
Subject: [PATCH 12/16] MAGETWO-47380: Modal component improvement (for better
 work with grid inside form)

---
 .../view/base/web/js/modal/modal-component.js | 28 +++++++++++++++++--
 .../Ui/view/base/web/js/modal/modal.js        |  6 ++--
 .../web/templates/form/components/button.html |  1 -
 3 files changed, 30 insertions(+), 5 deletions(-)
 delete mode 100644 app/code/Magento/Ui/view/base/web/templates/form/components/button.html

diff --git a/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js b/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
index ce4433e306a40..7f5346a99f6a0 100644
--- a/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
+++ b/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
@@ -17,7 +17,8 @@ define([
             template: 'ui/modal/modal-component',
             options: {
                 title: '',
-                buttons: []
+                buttons: [],
+                keyEventHandlers: {}
             },
             valid: true,
             listens: {
@@ -51,13 +52,35 @@ define([
          * @returns {Object} Chainable.
          */
         initConfig: function () {
-            this._super();
+            return this._super()
+                .initSelector()
+                .initModalEvents();
+        },
+
+        /**
+         * Configure modal selector
+         *
+         * @returns {Object} Chainable.
+         */
+        initSelector: function () {
             this.modalClass = this.name.replace(/\./g, '_');
             this.rootSelector = '.' + this.modalClass;
 
             return this;
         },
 
+        /**
+         * Configure modal keyboard handlers
+         * and outer click
+         *
+         * @returns {Object} Chainable.
+         */
+        initModalEvents: function () {
+            this.options.keyEventHandlers.escapeKey = this.options.outerClickHandler = this.actionCancel.bind(this);
+
+            return this;
+        },
+
         /**
          * Initialize modal's content components
          */
@@ -202,6 +225,7 @@ define([
          */
         setPrevValues: function (elem) {
             if (typeof elem.value === 'function') {
+                elem.focused(false);
                 elem.value(this.applied[elem.index]);
             } else if (elem.elems) {
                 elem.elems().forEach(this.setPrevValues, this);
diff --git a/app/code/Magento/Ui/view/base/web/js/modal/modal.js b/app/code/Magento/Ui/view/base/web/js/modal/modal.js
index 53c806648fa31..5dcfc53459baa 100644
--- a/app/code/Magento/Ui/view/base/web/js/modal/modal.js
+++ b/app/code/Magento/Ui/view/base/web/js/modal/modal.js
@@ -118,6 +118,7 @@ define([
                 'closeModal'
             );
 
+            _.extend(this.keyEventHandlers, this.options.keyEventHandlers);
             this.options.transitionEvent = transitionEvent;
             this._createWrapper();
             this._renderModal();
@@ -374,7 +375,8 @@ define([
          * Creates overlay, append it to wrapper, set previous click event on overlay.
          */
         _createOverlay: function () {
-            var events;
+            var events,
+                outerClickHandler = this.options.outerClickHandler || this.closeModal;
 
             this.overlay = $('.' + this.options.overlayClass);
 
@@ -386,7 +388,7 @@ define([
             }
             events = $._data(this.overlay.get(0), 'events');
             events ? this.prevOverlayHandler = events.click[0].handler : false;
-            this.options.clickableOverlay ? this.overlay.unbind().on('click', this.closeModal) : false;
+            this.options.clickableOverlay ? this.overlay.unbind().on('click', outerClickHandler) : false;
         },
 
         /**
diff --git a/app/code/Magento/Ui/view/base/web/templates/form/components/button.html b/app/code/Magento/Ui/view/base/web/templates/form/components/button.html
deleted file mode 100644
index 41891a33c8898..0000000000000
--- a/app/code/Magento/Ui/view/base/web/templates/form/components/button.html
+++ /dev/null
@@ -1 +0,0 @@
-<button type="button" data-bind="click: action, text: title"></button>
\ No newline at end of file

From 5ba7f06eb2989134bfe001fa1c94575f74298111 Mon Sep 17 00:00:00 2001
From: Olga Nakonechna <onakonechna@ebay.com>
Date: Wed, 6 Jan 2016 18:13:13 +0200
Subject: [PATCH 13/16] MAGETWO-47380: Modal component improvement (for better
 work with grid inside form)

---
 app/code/Magento/Ui/view/base/web/js/modal/modal-component.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js b/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
index 7f5346a99f6a0..7b26beb52706e 100644
--- a/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
+++ b/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
@@ -225,7 +225,7 @@ define([
          */
         setPrevValues: function (elem) {
             if (typeof elem.value === 'function') {
-                elem.focused(false);
+                this.modal.focus();
                 elem.value(this.applied[elem.index]);
             } else if (elem.elems) {
                 elem.elems().forEach(this.setPrevValues, this);

From bd5fa1d25572f29b3e9f330ffee0c044887d84af Mon Sep 17 00:00:00 2001
From: Olga Nakonechna <onakonechna@ebay.com>
Date: Fri, 8 Jan 2016 15:05:31 +0200
Subject: [PATCH 14/16] MAGETWO-47380: Modal component improvement (for better
 work with grid inside form)

---
 .../Ui/view/base/web/js/modal/modal-component.js       | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js b/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
index 7b26beb52706e..71fcebed9c5b8 100644
--- a/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
+++ b/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
@@ -23,7 +23,8 @@ define([
             valid: true,
             listens: {
                 state: 'onState'
-            }
+            },
+            modalClass: 'modal-component'
         },
 
         /**
@@ -63,8 +64,9 @@ define([
          * @returns {Object} Chainable.
          */
         initSelector: function () {
-            this.modalClass = this.name.replace(/\./g, '_');
-            this.rootSelector = '.' + this.modalClass;
+            this.contentSelector = '.' + this.modalClass;
+            this.options.modalClass = this.name.replace(/\./g, '_');
+            this.rootSelector = '.' + this.options.modalClass
 
             return this;
         },
@@ -85,7 +87,7 @@ define([
          * Initialize modal's content components
          */
         initializeContent: function () {
-            $.async(this.rootSelector, this, this.initModal);
+            $.async(this.contentSelector, this, this.initModal);
         },
 
         /**

From 239a12e17bb5e9dae51b9bd1fea9d27b0a2bc789 Mon Sep 17 00:00:00 2001
From: Olga Nakonechna <onakonechna@ebay.com>
Date: Fri, 8 Jan 2016 15:05:47 +0200
Subject: [PATCH 15/16] MAGETWO-47380: Modal component improvement (for better
 work with grid inside form)

---
 app/code/Magento/Ui/view/base/web/js/modal/modal-component.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js b/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
index 71fcebed9c5b8..cccf95e00bf54 100644
--- a/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
+++ b/app/code/Magento/Ui/view/base/web/js/modal/modal-component.js
@@ -66,7 +66,7 @@ define([
         initSelector: function () {
             this.contentSelector = '.' + this.modalClass;
             this.options.modalClass = this.name.replace(/\./g, '_');
-            this.rootSelector = '.' + this.options.modalClass
+            this.rootSelector = '.' + this.options.modalClass;
 
             return this;
         },

From ccff9221a4743bc1c08190c72ca2f1602c26269e Mon Sep 17 00:00:00 2001
From: Olga Nakonechna <onakonechna@ebay.com>
Date: Thu, 14 Jan 2016 15:35:20 +0200
Subject: [PATCH 16/16] MAGETWO-47380: Modal component improvement (for better
 work with grid inside form)

- fix copyright
---
 app/code/Magento/Ui/view/base/web/js/form/components/button.js  | 2 +-
 .../Ui/view/base/web/templates/modal/modal-component.html       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/code/Magento/Ui/view/base/web/js/form/components/button.js b/app/code/Magento/Ui/view/base/web/js/form/components/button.js
index 16e03d14689c9..b5373ff1648b7 100644
--- a/app/code/Magento/Ui/view/base/web/js/form/components/button.js
+++ b/app/code/Magento/Ui/view/base/web/js/form/components/button.js
@@ -1,5 +1,5 @@
 /**
- * Copyright � 2015 Magento. All rights reserved.
+ * Copyright © 2015 Magento. All rights reserved.
  * See COPYING.txt for license details.
  */
 
diff --git a/app/code/Magento/Ui/view/base/web/templates/modal/modal-component.html b/app/code/Magento/Ui/view/base/web/templates/modal/modal-component.html
index d3d7dc7f644c2..e39c27e074123 100644
--- a/app/code/Magento/Ui/view/base/web/templates/modal/modal-component.html
+++ b/app/code/Magento/Ui/view/base/web/templates/modal/modal-component.html
@@ -1,6 +1,6 @@
 <!--
 /**
- * Copyright � 2015 Magento. All rights reserved.
+ * Copyright © 2015 Magento. All rights reserved.
  * See COPYING.txt for license details.
  */
 -->