MAGETWO-89383: [UI Component] URL Input: External Link

Author: irenelagno

app/code/Magento/Ui/view/base/ui_component/etc/definition.map.xml

@@ -421,6 +421,7 @@
                     <item name="settingLabel" type="string" translate="true" xsi:type="xpath">settings/settingLabel</item>
                     <item name="typeSelectorTemplate" type="string" translate="true" xsi:type="xpath">settings/typeSelectorTemplate</item>
                     <item name="settingTemplate" type="string" translate="true" xsi:type="xpath">settings/settingTemplate</item>
+                    <item name="settingValue" type="boolean" xsi:type="xpath">settings/settingValue</item>
                 </item>
             </argument>
         </schema>

app/code/Magento/Ui/view/base/ui_component/etc/definition/urlInput.xsd

@@ -62,6 +62,13 @@
                     </xs:documentation>
                 </xs:annotation>
             </xs:element>
+            <xs:element name="settingValue" type="xs:boolean">
+                <xs:annotation>
+                    <xs:documentation>
+                        Allows to specify default value for setting
+                    </xs:documentation>
+                </xs:annotation>
+            </xs:element>
         </xs:choice>
     </xs:group>
 </xs:schema>

app/code/Magento/Ui/view/base/web/js/form/element/url-input.js

@@ -36,9 +36,8 @@ define([
                 }
             },
             listens: {
-                checked: 'settingValue',
-                disabled: 'hideLinkedElement',
                 settingValue: 'checked',
+                disabled: 'hideLinkedElement',
                 linkType: 'createChildUrlInputComponent'
             },
             links: {
@@ -78,6 +77,7 @@ define([
                 baseLinkType = this.urlTypes.base;
 
             delete this.urlTypes.base;
+            console.log(this);
             _.each(this.urlTypes, function (linkSettingsArray, linkName) {
                 //add link name by link type
                 linkSettingsArray.name = baseLinkType.namePrefix + linkName;
@@ -170,7 +170,7 @@ define([
          */
         checkboxClick: function () {
             if (!this.disabled()) {
-                this.checked(!this.checked());
+                this.settingValue(!this.settingValue());
             }
         }
     });

app/code/Magento/Ui/view/base/web/templates/form/element/urlInput/setting.html

@@ -8,7 +8,7 @@
 <div class="admin__field admin__field-option url-input-setting" visible="visible" click="checkboxClick">
     <input type="checkbox"
            class="admin__control-checkbox"
-           ko-checked="$data.checked"
+           ko-checked="settingValue"
            disable="disabled"
            ko-value="settingValue"
            hasFocus="focused"

app/design/adminhtml/Magento/backend/web/css/source/components/_url_input.less

@@ -14,6 +14,13 @@
         min-width: 7.5em;
     }
 
+
+    .url-input-element-linked-element {
+        float: left;
+        margin-left: 1.5em;
+        width: calc(~'100% - 9em');
+    }
+
     .url-input-setting {
         clear: both;
         display: block;
@@ -22,10 +29,4 @@
             clear: both;
         }
     }
-
-    .url-input-element-linked-element {
-        float: left;
-        margin-left: 1.5em;
-        width: calc(~'100% - 9em');
-    }
 }

dev/tests/js/jasmine/tests/app/code/Magento/Ui/base/js/form/element/url-input.test.js

@@ -0,0 +1,82 @@
+/**
+ * Copyright © Magento, Inc. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+
+/*eslint max-nested-callbacks: 0*/
+
+define([
+    'jquery',
+    'Magento_Ui/js/form/element/url-input',
+], function ($, UrlInput) {
+    'use strict';
+
+    describe('Magento_Ui/js/form/element/url-input', function () {
+        var component;
+
+        beforeEach(function () {
+            var params = {
+                dataScope: 'urlInput',
+                urlTypes: {
+                    base: {
+                        namePrefix: '${$.name}.',
+                        dataScopePrefix: '${$.dataScope}.',
+                        provider: '${$.provider}'
+                    },
+                    url: {
+                        label: 'Test label',
+                        component: 'Magento_Ui/js/form/element/abstract',
+                        template: 'ui/form/element/input',
+                        sortOrder: 40
+                    },
+                    testUrl: {
+                        label: 'Test label 2',
+                        component: 'Magento_Ui/js/form/element/abstract',
+                        template: 'ui/form/element/input',
+                        sortOrder: 10
+                    }
+                }
+            };
+
+            component = new UrlInput(params);
+        });
+
+        describe('processLinkTypes method', function () {
+            it('check url types were set', function () {
+                expect(component.urlTypes).toBeDefined();
+                expect(component.urlTypes.hasOwnProperty('url'));
+                expect(component.urlTypes.hasOwnProperty('testUrl'));
+                expect(component.urlTypes.base).not.toBeDefined();
+            });
+        });
+
+        describe('setOptions method', function () {
+            it('check that optons were set', function () {
+                var expectedOptions = [
+                    {
+                        value: 'testUrl',
+                        label: 'Test label 2',
+                        sortOrder: 10
+                    },
+                    {
+                        value: 'url',
+                        label: 'Test label',
+                        sortOrder: 40
+                    }
+                ];
+
+                expect(component.options()).toEqual(expectedOptions);
+            });
+        });
+
+        describe('createChildUrlInputComponent method', function () {
+            it('check linked element was set', function () {
+                expect(component.linkedElementInstances.url).not.toBeDefined();
+                component.createChildUrlInputComponent('url');
+                expect(component.linkedElementInstances.url).toBeDefined();
+                expect(component.getLinkedElementName()).toEqual(component.linkedElementInstances.url);
+            });
+        });
+
+    });
+});