From e8a9868605f3e7e7e2dc6582e4be6f7018b41bb4 Mon Sep 17 00:00:00 2001
From: luvi <luvi@odoo.com>
Date: Mon, 26 Sep 2022 12:05:09 +0000
Subject: [PATCH] [FIX] web: add a Go to URL button to UrlField in edition

This commit adds a Go to Url button next to the UrlField input. Since form
views are always set in edition mode, it was no longer possible to open
URLs by clicking on the link. Now, a button has been added directly after
the input to bring back the original feature.

Tests assert the right behavior regarding this button.

X-original-commit: e97215e78500a7b36aa0da073c767f5f96198d3f
Part-of: odoo/odoo#101786
---
 .../src/views/fields/phone/phone_field.xml    |  2 +-
 .../static/src/views/fields/url/url_field.js  |  4 +++
 .../static/src/views/fields/url/url_field.xml | 31 ++++++++++++++-----
 .../tests/views/fields/url_field_tests.js     |  8 +++++
 4 files changed, 36 insertions(+), 9 deletions(-)

diff --git a/addons/web/static/src/views/fields/phone/phone_field.xml b/addons/web/static/src/views/fields/phone/phone_field.xml
index 2d28ca010b6..99337bb2daf 100644
--- a/addons/web/static/src/views/fields/phone/phone_field.xml
+++ b/addons/web/static/src/views/fields/phone/phone_field.xml
@@ -19,7 +19,7 @@
     </t>
 
     <t t-name="web.FormPhoneField" t-inherit="web.PhoneField" t-inherit-mode="primary">
-        <xpath expr="//div[hasclass('o_phone_content')]//input" position="after">
+        <xpath expr="//input" position="after">
             <a
                 t-if="props.value"
                 t-att-href="'tel:'+props.value"
diff --git a/addons/web/static/src/views/fields/url/url_field.js b/addons/web/static/src/views/fields/url/url_field.js
index c79d8439ea9..3f6ef8180ee 100644
--- a/addons/web/static/src/views/fields/url/url_field.js
+++ b/addons/web/static/src/views/fields/url/url_field.js
@@ -45,4 +45,8 @@ UrlField.extractProps = ({ attrs }) => {
     };
 };
 
+class FormUrlField extends UrlField {}
+FormUrlField.template = "web.FormUrlField";
+
 registry.category("fields").add("url", UrlField);
+registry.category("fields").add("form.url", FormUrlField);
diff --git a/addons/web/static/src/views/fields/url/url_field.xml b/addons/web/static/src/views/fields/url/url_field.xml
index 7244d7f0618..22d234df2f7 100644
--- a/addons/web/static/src/views/fields/url/url_field.xml
+++ b/addons/web/static/src/views/fields/url/url_field.xml
@@ -6,15 +6,30 @@
             <a class="o_field_widget o_form_uri" t-on-click.stop="" t-att-href="formattedHref" t-esc="props.text || props.value || ''" target="_blank"/>
         </t>
         <t t-else="">
-            <input
-                class="o_input"
-                t-att-id="props.id"
-                type="text"
-                t-att-placeholder="props.placeholder"
-                t-att-required="props.required"
-                t-ref="input"
-            />
+            <div class="d-inline-flex w-100">
+                <input
+                    class="o_input"
+                    t-att-id="props.id"
+                    type="text"
+                    t-att-placeholder="props.placeholder"
+                    t-att-required="props.required"
+                    t-ref="input"
+                />
+            </div>
         </t>
     </t>
 
+    <t t-name="web.FormUrlField" t-inherit="web.UrlField" t-inherit-mode="primary">
+        <xpath expr="//input" position="after">
+            <a
+                t-if="props.value"
+                t-att-href="formattedHref"
+                class="ms-3 d-inline-flex align-items-center"
+                target="_blank"
+            >
+                <i class="fa fa-globe" data-tooltip="Go to URL" aria-label="Go to URL"></i>
+            </a>
+        </xpath>
+    </t>
+
 </templates>
diff --git a/addons/web/static/tests/views/fields/url_field_tests.js b/addons/web/static/tests/views/fields/url_field_tests.js
index e5692586571..2dfb84a1a9f 100644
--- a/addons/web/static/tests/views/fields/url_field_tests.js
+++ b/addons/web/static/tests/views/fields/url_field_tests.js
@@ -63,6 +63,14 @@ QUnit.module("Fields", (hooks) => {
             "input should contain field value"
         );
 
+        const webLink = target.querySelector(".o_field_url a");
+        assert.containsOnce(
+            target,
+            webLink,
+            "should have rendered the url button as a link with correct classes"
+        );
+        assert.hasAttrValue(webLink, "href", "http://yop", "should have proper href");
+
         await editInput(target, ".o_field_widget input[type='text']", "limbo");
 
         // save