MAGETWO-89383: Introduce Url input ui component

Author: irenelagno

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

@@ -25,6 +25,7 @@ define([
             isDisplayAdditionalSettings: true,
             settingValue: false,
             settingLabel: $t('Open in new tab'),
+
             //observable object(without functional call)
             tracks: {
                 linkedElement: true
@@ -37,16 +38,29 @@ define([
                 }
             },
             listens: {
-                checked: 'updateSettingValue',
-                disabled: 'hideLinkedElement'
+                checked: 'settingValue',
+                disabled: 'hideLinkedElement',
+                settingValue: 'checked',
+                linkType: 'createChildUrlInputComponent'
             },
             links: {
                 linkType: '${$.provider}:${$.dataScope}.type',
-                settingValue: '${$.provider}:${$.dataScope}.setting',
-                value: false
+                settingValue: '${$.provider}:${$.dataScope}.setting'
             }
         },
 
+        /**
+         *
+         * @inheritdoc
+         */
+        initialize: function () {
+
+            this._super()
+                .setOptions();
+
+            return this;
+        },
+
         /**
          * Initializes observable properties of instance
          *
@@ -55,8 +69,7 @@ define([
         initObservable: function () {
             this._super()
                 .observe('componentTemplate options value linkType settingValue checked isDisplayAdditionalSettings')
-                .processLinkTypes()
-                .setOptions();
+                .processLinkTypes();
 
             return this;
         },
@@ -135,35 +148,6 @@ define([
             this._super();
         },
 
-        /**
-         * Set url setting value to datasource
-         *
-         * @param {Boolean} checked
-         *
-         * @return void
-         */
-        updateSettingValue: function (checked) {
-            this.source.set(this.dataScope + '.setting', checked);
-        },
-
-        /**
-         * Initialize linked input field based on linked type
-         *
-         * @param {String} value
-         *
-         * @return void
-         */
-        setDifferedFromDefault: function (value) {
-            this._super();
-
-            if (!_.isUndefined(value) && value) {
-                this.createChildUrlInputComponent(value);
-                //to store current element
-                this.linkedElement = this.linkedElementInstances[value];
-                this.linkType(value);
-            }
-        },
-
         /**
          * Create child component by value
          *
@@ -178,6 +162,8 @@ define([
                 layout([elementConfig]);
                 this.linkedElementInstances[value] = this.requestModule(elementConfig.name);
             }
+            this.linkedElement = this.linkedElementInstances[value];
+
         },
 
         /**

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

@@ -11,10 +11,9 @@
     <label class="admin__field-label" if="$data.label" visible="$data.labelVisible" attr="for: uid">
         <span translate="label" attr="'data-config-scope': $data.scopeLabel"/>
     </label>
-    <div class="admin__field-control url-input-element"
+    <div class="admin__field-control"
          css="'_with-tooltip': $data.tooltip, '_with-reset': $data.showFallbackReset && $data.isDifferedFromDefault">
 
-        <div>
             <!--render link types select-->
             <render args="typeSelectorTemplate"/>
 
@@ -23,7 +22,6 @@
                 <render/>
                 <label class="admin__field-error" visible="error" attr="for: uid" text="error"/>
             </div>
-        </div>
 
         <!--display container to specify url options(Example: open in new tab)-->
         <div render="settingTemplate" if="isDisplayAdditionalSettings"/>

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

@@ -10,7 +10,7 @@
            class="admin__control-checkbox"
            ko-checked="$data.checked"
            disable="disabled"
-           ko-value="value"
+           ko-value="settingValue"
            hasFocus="focused"
            attr="id: uid, name: inputName"/>
 

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

@@ -14,6 +14,6 @@
     },
     hasFocus: focused,
     optgroup: options,
-    value: value,
+    value: linkType,
     optionsValue: 'value',
     optionsText: 'label'"/>

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

@@ -6,14 +6,12 @@
 //
 //  Components -> Url Input
 //  _____________________________________________
-.url-input-container .url-input-element {
-    & > div:after {
-        clear: both;
-    }
+.url-input-container {
 
     .url-input-select {
         float: left;
-        margin-right: 20px;
+        max-width: 7.5em;
+        min-width: 7.5em;
     }
 
     .url-input-setting {
@@ -27,7 +25,9 @@
 
     .url-input-element-linked-element {
         float: left;
-        max-width: 200px;
+        margin-left: 1.5em;
+        max-width: calc(79%);
+        min-width: calc(79%);
     }
 }