From 5a5f3da58b7ca5b058d4e240526dc661df0af356 Mon Sep 17 00:00:00 2001 From: Younn Olivier Date: Thu, 4 Nov 2021 10:44:10 +0000 Subject: [PATCH] [FIX] web_editor, website: fix existing links edition via link tools Before this commit, there was an issue with the edition of links that were already in the page, via the link tools. 1/ In edit mode, drag and drop the s_image_text snippet and save, 2/ Click on edit, click on the "learn more" button, 3/ From the link tools, change the style to secondary, 4/ Click on save again, the button is still styled with as primary. [1] added a history step to the link creation via the link tools. As the editor observer is set to unactive at the start of the link tools, the changes made to the link with the link tools were not processed by the EditPageMenu observer, and the block was not set as .o_dirty (the changes were therefore not saved). This bug was hidden by our use of bootstrap popovers. The aria-describedby attribute, managed by bootstrap when showing/hiding a popover, would be recorded as a change from the EditPageMenu observer, which would set the view as dirty. Also, changing any other element of the page would set the page as dirty and hide the bug. It only became visible when [2] changed the popover initialization from 'focus' to 'manual'. With that, the aria-describedby attribute was modified inbetween the LinkTools.start and LinkTools.destroy (and was therefore not recorded at the EditPageMenu level). To record correctly the changes made from the link tools to the link, we activate the editor observer when applying the changes to the DOM. This commit also introduces some tests for the link tools. The listener on customizable links from the wysiwyg was changed from mousedown to click for simpler tests. task-2680461 [1]: 6db6134f97b603030ea71c1137f7ff971d3bed35 [2]: 161c5fc8e742294e8d85c889b4bf8d3d8cd484f5 closes odoo/odoo#80763 X-original-commit: c29fe9fa8fc8ff4a5e6f042607ef9b3070d1d339 Signed-off-by: Quentin Smetz (qsm) --- .../src/js/wysiwyg/widgets/link_tools.js | 2 + .../static/src/js/wysiwyg/wysiwyg.js | 2 +- .../website/static/tests/tours/link_tools.js | 69 +++++++++++++++++++ addons/website/tests/test_ui.py | 3 + 4 files changed, 75 insertions(+), 1 deletion(-) create mode 100644 addons/website/static/tests/tours/link_tools.js diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js index 0dd67dcebd9..0e4d19516b1 100644 --- a/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js +++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js @@ -78,7 +78,9 @@ const LinkTools = Link.extend({ applyLinkToDom() { this._observer.disconnect(); + this.options.wysiwyg.odooEditor.observerActive(); this._super(...arguments); + this.options.wysiwyg.odooEditor.observerUnactive(); this._observer.observe(this._link, {subtree: true, childList: true, characterData: true}); }, diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js index b54e3a04fb7..0451e5a73cf 100644 --- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js +++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js @@ -245,7 +245,7 @@ const Wysiwyg = Widget.extend({ // Ensure the Toolbar always have the correct layout in note. this._updateEditorUI(); - this.$root.on('mousedown', (ev) => { + this.$root.on('click', (ev) => { const $target = $(ev.target); // Keep popover open if clicked inside it, but not on a button diff --git a/addons/website/static/tests/tours/link_tools.js b/addons/website/static/tests/tours/link_tools.js new file mode 100644 index 00000000000..69ef7599b04 --- /dev/null +++ b/addons/website/static/tests/tours/link_tools.js @@ -0,0 +1,69 @@ +/** @odoo-module */ + +import tour from 'web_tour.tour'; +import wTourUtils from 'website.tour_utils'; + +const clickOnImgStep = { + content: "Click somewhere else to save.", + trigger: '#wrap .s_text_image img', +}; + +tour.register('link_tools', { + test: true, + url: '/?enable_editor=1', +}, [ + // 1. Create a new link from scratch. + wTourUtils.dragNDrop({ + id: 's_text_image', + name: 'Text - Image', + }), + { + content: "Replace first paragraph, to insert a new link", + trigger: '#wrap .s_text_image p', + run: 'text Go to odoo: ' + }, + { + content: "Open link tools", + trigger: "#toolbar #create-link", + }, + { + content: "Type the link URL odoo.com", + trigger: '#o_link_dialog_url_input', + run: 'text odoo.com' + }, + clickOnImgStep, + // 2. Edit the link with the link tools. + { + content: "Click on the newly created link, change content to odoo website", + trigger: '.s_text_image a[href="http://odoo.com"]:contains("odoo.com")', + run: 'text odoo website', + }, + { + content: "Link tools, should be open, change the url", + trigger: '#o_link_dialog_url_input', + run: 'text odoo.be' + }, + clickOnImgStep, + ...wTourUtils.clickOnSave(), + // 3. Edit a link after saving the page. + wTourUtils.clickOnEdit(), + { + content: "The new link content should be odoo website and url odoo.be", + extra_trigger: "#oe_snippets.o_loaded", + trigger: '.s_text_image a[href="http://odoo.be"]:contains("odoo website")', + }, + { + content: "The new link content should be odoo website and url odoo.be", + trigger: '#toolbar button[data-original-title="Link Style"]', + }, + { + content: "Click on the secondary style button.", + trigger: '#toolbar we-button[data-value="secondary"]', + }, + ...wTourUtils.clickOnSave(), + { + content: "The link should have the secondary button style.", + trigger: '.s_text_image a.btn.btn-secondary[href="http://odoo.be"]:contains("odoo website")', + run: () => {}, // It's a check. + } +]); diff --git a/addons/website/tests/test_ui.py b/addons/website/tests/test_ui.py index 9d9f192d42f..ae516f90482 100644 --- a/addons/website/tests/test_ui.py +++ b/addons/website/tests/test_ui.py @@ -275,3 +275,6 @@ class TestUi(odoo.tests.HttpCase): def test_14_carousel_snippet_content_removal(self): self.start_tour("/", "carousel_content_removal", login='admin') + + def test_15_website_link_tools(self): + self.start_tour("/", "link_tools", login="admin")