From f88e827126aa78b699f7fac176cd6a1ca9c5d9a8 Mon Sep 17 00:00:00 2001 From: divy-odoo Date: Fri, 12 May 2023 07:22:08 +0000 Subject: [PATCH] [IMP] web_editor: open internal link in edit mode Before this commit, when the user was clicking on a link to another page of the website, it was opening in another tab but in frontend mode. However, in most cases the user actually wanted it to open in backend mode. Here is an example of users who started an eCommerce trial. They are editing their homepage and want to create a product. They open the "/shop" page using popover but because they are in the frontend, they don't see the "+NEW" button. This behaviour seems a little odd. Therefore, this commit aims to open internal links in the edit(backend) mode instead of the frontend mode. task-3177126 closes odoo/odoo#128114 X-original-commit: f7dacce18bf44914972da292ff041505289d1e16 Signed-off-by: Divyesh Vyas (divy) Signed-off-by: Romain Derie (rde) --- .../src/js/widgets/link_popover_widget.js | 26 +++++++++++++++++ .../static/tests/tours/edit_link_popover.js | 28 +++++++++++-------- 2 files changed, 43 insertions(+), 11 deletions(-) diff --git a/addons/website/static/src/js/widgets/link_popover_widget.js b/addons/website/static/src/js/widgets/link_popover_widget.js index e39e3857fbb..ebac893de25 100644 --- a/addons/website/static/src/js/widgets/link_popover_widget.js +++ b/addons/website/static/src/js/widgets/link_popover_widget.js @@ -2,7 +2,12 @@ import weWidgets from 'wysiwyg.widgets'; import {_t} from 'web.core'; +import { browser } from "@web/core/browser/browser"; + weWidgets.LinkPopoverWidget.include({ + events: Object.assign({}, weWidgets.LinkPopoverWidget.prototype.events, { + 'click .o_we_full_url, .o_we_url_link': '_onPreviewLinkClick', + }), /** * @override */ @@ -19,6 +24,27 @@ weWidgets.LinkPopoverWidget.include({ return this._super(...arguments); }, + + //-------------------------------------------------------------------------- + // Handlers + //-------------------------------------------------------------------------- + + /** + * Opens website page links in backend mode by forcing the '/@/' controller. + * + * @private + * @param {Event} ev + */ + async _onPreviewLinkClick(ev) { + if (this.target.href) { + const currentUrl = new URL(this.target.href); + if (window.location.hostname === currentUrl.hostname && !currentUrl.pathname.startsWith('/@/')) { + ev.preventDefault(); + currentUrl.pathname = `/@${currentUrl.pathname}`; + browser.open(currentUrl); + } + } + } }); const NavbarLinkPopoverWidget = weWidgets.LinkPopoverWidget.extend({ diff --git a/addons/website/static/tests/tours/edit_link_popover.js b/addons/website/static/tests/tours/edit_link_popover.js index a14f5950933..e56ef33ad47 100644 --- a/addons/website/static/tests/tours/edit_link_popover.js +++ b/addons/website/static/tests/tours/edit_link_popover.js @@ -1,6 +1,8 @@ /** @odoo-module **/ import wTourUtils from "website.tour_utils"; +import { browser } from "@web/core/browser/browser"; +import { patch } from "@web/core/utils/patch"; const FIRST_PARAGRAPH = 'iframe #wrap .s_text_image p:nth-child(2)'; @@ -184,20 +186,24 @@ wTourUtils.registerWebsitePreviewTour('edit_link_popover', { run: function () {}, // it's a check }, { - content: "Ensure that a click on the link popover link opens a new window", + content: "Ensure that a click on the link popover link opens a new window in edit mode", trigger: 'iframe .o_edit_menu_popover a.o_we_url_link[target="_blank"]', extra_trigger: 'iframe .o_edit_menu_popover a.o_we_full_url[target="_blank"]', - run: function (actions) { - this.$anchor[0].addEventListener('click', (ev) => { - const originalPreventDefault = ev.preventDefault.bind(ev); - ev.preventDefault = () => { - throw new Error( - "The link popover should not be default prevented as to open a new tab" - ); - }; - originalPreventDefault(); // We do not want to open a new tab in a tour - }, {once: true, capture: true}); + run: (actions) => { + // We do not want to open a link in a tour + patch(browser, 'window_open_action', { + open: (url) => { + if (window.location.hostname === url.hostname && url.pathname.startsWith('/@/')) { + document.querySelector('body').classList.add('new_backend_window_opened'); + } + } + }, { pure: true }); actions.click(); }, }, + { + content: "Ensure that link is opened correctly in edit mode", + trigger: '.new_backend_window_opened', + run: () => {}, // it's a check + }, ]);