From 2c7afe7fe2f413cb4515f895dfee2f94a7637d6c Mon Sep 17 00:00:00 2001 From: Bruno Boi Date: Mon, 2 Oct 2023 12:10:12 +0200 Subject: [PATCH] [REF] web_tour: use OverlayContainer for pointers **Before this commit** The tour_service make use of a custom main component TourPointerContainer. But there is really no good reason it does. **After this commit** The tour_service now make use of the overlay service. Advangates: - same place in DOM for all piece of UI that overlays the other elements. - should avoid potential stacking context issues - removal of a useless component, less code to maintain Part-of: odoo/odoo#137139 --- .../tour_service/tour_pointer_container.js | 11 ---- .../static/src/tour_service/tour_service.js | 13 ++--- .../static/tests/tour_service_tests.js | 50 +++++++++---------- 3 files changed, 30 insertions(+), 44 deletions(-) delete mode 100644 addons/web_tour/static/src/tour_service/tour_pointer_container.js diff --git a/addons/web_tour/static/src/tour_service/tour_pointer_container.js b/addons/web_tour/static/src/tour_service/tour_pointer_container.js deleted file mode 100644 index 58be7eb4333..00000000000 --- a/addons/web_tour/static/src/tour_service/tour_pointer_container.js +++ /dev/null @@ -1,11 +0,0 @@ -/** @odoo-module **/ - -import { Component, xml } from "@odoo/owl"; - -export class TourPointerContainer extends Component {} -TourPointerContainer.props = { pointers: Object }; -TourPointerContainer.template = xml` - - - -`; diff --git a/addons/web_tour/static/src/tour_service/tour_service.js b/addons/web_tour/static/src/tour_service/tour_service.js index 23d7a3e791a..6380af3fae7 100644 --- a/addons/web_tour/static/src/tour_service/tour_service.js +++ b/addons/web_tour/static/src/tour_service/tour_service.js @@ -8,7 +8,6 @@ import { registry } from "@web/core/registry"; import { config as transitionConfig } from "@web/core/transition"; import { session } from "@web/session"; import { TourPointer } from "../tour_pointer/tour_pointer"; -import { TourPointerContainer } from "./tour_pointer_container"; import { compileStepAuto, compileStepManual, compileTourToMacro } from "./tour_compilers"; import { createPointerState } from "./tour_pointer_state"; import { tourState } from "./tour_state"; @@ -56,8 +55,8 @@ import { callWithUnloadCheck } from "./tour_utils"; export const tourService = { // localization dependency to make sure translations used by tours are loaded - dependencies: ["orm", "effect", "ui", "localization"], - start: async (_env, { orm, effect, ui }) => { + dependencies: ["orm", "effect", "ui", "overlay", "localization"], + start: async (_env, { orm, effect, ui, overlay }) => { await whenReady(); /** @type {{ [k: string]: Tour }} */ @@ -108,13 +107,9 @@ export const tourService = { const pointers = reactive({}); - registry.category("main_components").add("TourPointerContainer", { - Component: TourPointerContainer, - props: { pointers }, - }); - function createPointer(tourName, config) { const { state: pointerState, methods } = createPointerState(); + let remove; return { start() { pointers[tourName] = { @@ -122,8 +117,10 @@ export const tourService = { component: TourPointer, props: { pointerState, ...config }, }; + remove = overlay.add(pointers[tourName].component, pointers[tourName].props); }, stop() { + remove?.(); delete pointers[tourName]; methods.destroy(); }, diff --git a/addons/web_tour/static/tests/tour_service_tests.js b/addons/web_tour/static/tests/tour_service_tests.js index e58b2aa5651..4f4fb1eb8c5 100644 --- a/addons/web_tour/static/tests/tour_service_tests.js +++ b/addons/web_tour/static/tests/tour_service_tests.js @@ -112,21 +112,21 @@ QUnit.module("Tour service", (hooks) => { }); const env = await makeTestEnv({}); - const { Component: TourPointerContainer, props: tourPointerProps } = registry + const { Component: OverlayContainer, props: overlayContainerProps } = registry .category("main_components") - .get("TourPointerContainer"); + .get("OverlayContainer"); class Root extends Component { - static components = { TourPointerContainer, Counter }; + static components = { OverlayContainer, Counter }; static template = xml/*html*/ ` - + `; } - await mount(Root, target, { env, props: { tourPointerProps } }); + await mount(Root, target, { env, props: { overlayContainerProps } }); env.services.tour_service.startTour("tour1", { mode: "manual" }); await mock.advanceTime(800); assert.containsOnce(document.body, ".o_tour_pointer"); @@ -149,21 +149,21 @@ QUnit.module("Tour service", (hooks) => { }); const env = await makeTestEnv({}); - const { Component: TourPointerContainer, props: tourPointerProps } = registry + const { Component: OverlayContainer, props: overlayContainerProps } = registry .category("main_components") - .get("TourPointerContainer"); + .get("OverlayContainer"); class Root extends Component { - static components = { TourPointerContainer, Counter }; + static components = { OverlayContainer, Counter }; static template = xml/*html*/ ` - + `; } - await mount(Root, target, { env, props: { tourPointerProps } }); + await mount(Root, target, { env, props: { overlayContainerProps } }); env.services.tour_service.startTour("tour1", { mode: "manual" }); await mock.advanceTime(750); assert.containsOnce(document.body, ".o_tour_pointer"); @@ -182,21 +182,21 @@ QUnit.module("Tour service", (hooks) => { }); const env = await makeTestEnv({}); - const { Component: TourPointerContainer, props: tourPointerProps } = registry + const { Component: OverlayContainer, props: overlayContainerProps } = registry .category("main_components") - .get("TourPointerContainer"); + .get("OverlayContainer"); class Root extends Component { - static components = { TourPointerContainer, Counter }; + static components = { OverlayContainer, Counter }; static template = xml/*html*/ ` - + `; } - await mount(Root, target, { env, props: { tourPointerProps } }); + await mount(Root, target, { env, props: { overlayContainerProps } }); env.services.tour_service.startTour("tour1", { mode: "manual" }); env.services.tour_service.bus.addEventListener("STEP-CONSUMMED", ({ detail }) => { assert.step(`Tour ${detail.tour.name}, step ${detail.step.trigger}`); @@ -226,21 +226,21 @@ QUnit.module("Tour service", (hooks) => { }); const env = await makeTestEnv({}); - const { Component: TourPointerContainer, props: tourPointerProps } = registry + const { Component: OverlayContainer, props: overlayContainerProps } = registry .category("main_components") - .get("TourPointerContainer"); + .get("OverlayContainer"); class Root extends Component { - static components = { TourPointerContainer, Counter }; + static components = { OverlayContainer, Counter }; static template = xml/*html*/ ` - + `; } - await mount(Root, target, { env, props: { tourPointerProps } }); + await mount(Root, target, { env, props: { overlayContainerProps } }); env.services.tour_service.startTour("tour1", { mode: "manual" }); env.services.tour_service.startTour("tour2", { mode: "manual" }); await mock.advanceTime(750); @@ -263,21 +263,21 @@ QUnit.module("Tour service", (hooks) => { }); const env = await makeTestEnv({}); - const { Component: TourPointerContainer, props: tourPointerProps } = registry + const { Component: OverlayContainer, props: overlayContainerProps } = registry .category("main_components") - .get("TourPointerContainer"); + .get("OverlayContainer"); class Root extends Component { - static components = { TourPointerContainer, Counter }; + static components = { OverlayContainer, Counter }; static template = xml/*html*/ ` - + `; } - await mount(Root, target, { env, props: { tourPointerProps } }); + await mount(Root, target, { env, props: { overlayContainerProps } }); env.services.tour_service.startTour("tour1", { mode: "manual" }); await mock.advanceTime(750); assert.containsOnce(target, ".o_tour_pointer");