[MIG] web_help: Migration to 18.0

Changes for legacy view support

[FIX] web_help: Fix for handling change in the way doAction works in v18

Author: ByteMeAsap

web_help/__manifest__.py

@@ -4,7 +4,7 @@
     "author": "Onestein,Odoo Community Association (OCA)",
     "category": "Technical",
     "license": "AGPL-3",
-    "version": "16.0.2.0.0",
+    "version": "18.0.1.0.0",
     "website": "https://github.com/OCA/web",
     "depends": [
         "web",

web_help/static/src/change_password_trip.esm.js

@@ -1,17 +1,17 @@
-/** @odoo-module **/
 import {Trip} from "@web_help/trip.esm";
+import {_t} from "@web/core/l10n/translation";
 import {registry} from "@web/core/registry";
 
 export class ChangePasswordTrip extends Trip {
     setup() {
         this.addStep({
             selector: "th[data-name='new_passwd'], td[name='new_passwd']",
-            content: this.env._t("Change the password here, make sure it's secure."),
+            content: _t("Change the password here, make sure it's secure."),
         });
 
         this.addStep({
             selector: "button[name='change_password_button']",
-            content: this.env._t("Click here to confirm it."),
+            content: _t("Click here to confirm it."),
         });
     }
 }

web_help/static/src/components/help_button/help_button.esm.js

@@ -1,18 +1,30 @@
-/** @odoo-module **/
-import LegacyControlPanel from "web.ControlPanel";
-import {ControlPanel} from "@web/search/control_panel/control_panel";
-import {findTrip} from "@web_help/helpers.esm";
 import {Component, onWillStart, useState} from "@odoo/owl";
 import {ActionDialog} from "@web/webclient/actions/action_dialog";
+import {ControlPanel} from "@web/search/control_panel/control_panel";
+import {findTrip} from "@web_help/helpers.esm";
+import {useService} from "@web/core/utils/hooks";
 
 export class HelpButton extends Component {
+    static props = {
+        actionId: {type: [Number, String, Boolean], optional: true},
+        resModel: {type: String, optional: true},
+        viewType: {type: String, optional: true},
+        btnClass: {type: String, optional: true},
+    };
     setup() {
+        this.actionService = useService("action");
         this.state = useState({
             TripClass: null,
         });
         onWillStart(async () => {
-            const foundTrip = await findTrip(this.props.resModel, this.props.viewType);
-            this.state.TripClass = foundTrip;
+            const actionId = this.props.actionId;
+            const action = actionId
+                ? await this.actionService.loadAction(actionId)
+                : {};
+            if ("res_model" in action) {
+                const foundTrip = await findTrip(action.res_model, this.props.viewType);
+                this.state.TripClass = foundTrip;
+            }
         });
     }
 
@@ -27,5 +39,4 @@ export class HelpButton extends Component {
 HelpButton.template = "web_help.HelpButton";
 
 Object.assign(ControlPanel.components, {HelpButton});
-Object.assign(LegacyControlPanel.components, {HelpButton});
 Object.assign(ActionDialog.components, {HelpButton});

web_help/static/src/components/help_button/help_button.xml

@@ -11,21 +11,14 @@
             <i class="fa fa-question" />
         </button>
     </t>
-    <t t-inherit="web.ControlPanel.Regular" t-inherit-mode="extension">
-        <xpath expr="//div[hasclass('o_cp_bottom_right')]" t-operation="inside">
-            <nav class="btn-group">
-                <HelpButton
-                    resModel="env.searchModel.resModel"
-                    viewType="env.config.viewType"
-                />
-            </nav>
-        </xpath>
-    </t>
-    <t t-inherit="web.ControlPanel.Small" t-inherit-mode="extension">
-        <xpath expr="//div[hasclass('o_cp_bottom_right')]" t-operation="inside">
+    <t t-inherit="web.ControlPanel" t-inherit-mode="extension">
+        <xpath
+            expr="//div[hasclass('o_control_panel_navigation')]"
+            t-operation="inside"
+        >
             <nav class="btn-group">
                 <HelpButton
-                    resModel="env.searchModel.resModel"
+                    actionId="env.config.actionId"
                     viewType="env.config.viewType"
                 />
             </nav>

web_help/static/src/components/highlighter/highlighter.esm.js

@@ -1,13 +1,19 @@
-/** @odoo-module **/
 import {Component, EventBus, useRef, useState} from "@odoo/owl";
 import {registry} from "@web/core/registry";
+import {sprintf} from "@web/core/utils/strings";
 
 export class Highlighter extends Component {
+    static props = {
+        bus: {type: EventBus},
+    };
     setup() {
         this.state = useState({visible: false});
-        this.bus = this.props.bus;
-        this.bus.on("hide", this, () => this.hide());
-        this.bus.on("highlight", this, (options) => this.highlight(options));
+        this.props.bus.addEventListener("HIDE", this.hide.bind(this));
+        this.props.bus.addEventListener(
+            "HIGHLIGHT",
+            ({detail: {selector, content, animate, padding}}) =>
+                this.highlight(selector, content, animate, padding)
+        );
         this.highlightRef = useRef("highlightRef");
         this.overlayRef = useRef("overlay");
     }
@@ -47,7 +53,7 @@ export class Highlighter extends Component {
         return bounds;
     }
 
-    highlight({selector, content, animate = 250, padding = 10}) {
+    highlight(selector, content, animate = 250, padding = 10) {
         const selection = $(selector);
 
         if (!selection.length) {
@@ -64,15 +70,15 @@ export class Highlighter extends Component {
         $el.popover("dispose");
         $el.animate(
             {
-                top: _.str.sprintf("%spx", Math.floor(bounds.y) - padding),
-                left: _.str.sprintf("%spx", Math.floor(bounds.x) - padding),
-                width: _.str.sprintf("%spx", Math.floor(bounds.width) + padding * 2),
-                height: _.str.sprintf("%spx", Math.floor(bounds.height) + padding * 2),
+                top: sprintf("%spx", Math.floor(bounds.y) - padding),
+                left: sprintf("%spx", Math.floor(bounds.x) - padding),
+                width: sprintf("%spx", Math.floor(bounds.width) + padding * 2),
+                height: sprintf("%spx", Math.floor(bounds.height) + padding * 2),
             },
             animate ? animate : 0,
             function () {
                 $el.popover(
-                    _.extend(this._getPopoverOptions(), {
+                    Object.assign({}, this._getPopoverOptions(), {
                         content: content,
                     })
                 ).popover("show");
@@ -116,9 +122,9 @@ export const highlighterService = {
         });
 
         return {
-            hide: () => bus.trigger("hide"),
+            hide: () => bus.trigger("HIDE"),
             highlight: (selector, content, animate = 250, padding = 10) =>
-                bus.trigger("highlight", {
+                bus.trigger("HIGHLIGHT", {
                     selector: selector,
                     content: content,
                     animate: animate,

web_help/static/src/helpers.esm.js

@@ -1,6 +1,5 @@
-/** @odoo-module **/
-import {registry} from "@web/core/registry";
 import {Component} from "@odoo/owl";
+import {registry} from "@web/core/registry";
 
 export async function findTrip(model, viewType) {
     const trips = registry.category("trips").getAll();
@@ -9,7 +8,7 @@ export async function findTrip(model, viewType) {
     );
     const matchedTrips = trips.filter((trip, i) => selectorResults[i]);
     if (matchedTrips.length >= 1) {
-        if (matchedTrips.length != 1) {
+        if (matchedTrips.length !== 1) {
             console.warn("More than one trip found", model, viewType);
         }
         return matchedTrips[0].Trip;
@@ -33,8 +32,5 @@ export async function waitUntilAvailable(selector, ms = 50) {
 }
 
 export async function doAction(xmlId, options = {}) {
-    Component.env.bus.trigger("do-action", {
-        action: xmlId,
-        options: options,
-    });
+    Component.env.services.action.doAction(xmlId, options);
 }

web_help/static/src/trip.esm.js

@@ -1,4 +1,5 @@
-/** @odoo-module **/
+import {_t} from "@web/core/l10n/translation";
+import {ensureJQuery} from "@web/core/ensure_jquery";
 import {renderToString} from "@web/core/utils/render";
 
 export class Trip {
@@ -66,10 +67,8 @@ export class Trip {
         return Object.assign(
             {
                 content: step.content,
-                cbBtnText: this.isAtLastStep
-                    ? this.env._t("Finish")
-                    : this.env._t("Got it"),
-                closeBtnText: this.env._t("Close"),
+                cbBtnText: this.isAtLastStep ? _t("Finish") : _t("Got it"),
+                closeBtnText: _t("Close"),
             },
             step.renderContext
         );
@@ -82,7 +81,7 @@ export class Trip {
             cb = this.stop;
         }
         const step = this.steps[this.index];
-
+        await ensureJQuery();
         const $stepRender = $(
             renderToString(this._getStepTemplate(), this._getStepRenderContext())
         );

web_help/static/src/user_trip.esm.js

@@ -1,26 +1,26 @@
-/** @odoo-module **/
 import {Trip} from "@web_help/trip.esm";
+import {_t} from "@web/core/l10n/translation";
 import {registry} from "@web/core/registry";
 
 export class UserTrip extends Trip {
     setup() {
         this.addStep({
             selector: ".o_list_button_add, .o-kanban-button-new",
-            content: this.env._t("To create a new user click here."),
+            content: _t("To create a new user click here."),
         });
 
         this.addStep({
-            selector: ".o_cp_searchview, .o_enable_searchview",
-            content: this.env._t("Use the searchbar to find specific users."),
+            selector: ".o_cp_searchview",
+            content: _t("Use the searchbar to find specific users."),
             renderContext: {
-                cbBtnText: this.env._t("Next"),
-                closeBtnText: this.env._t("Cancel"),
+                cbBtnText: _t("Next"),
+                closeBtnText: _t("Cancel"),
             },
         });
 
         this.addStep({
             selector: ".o_cp_switch_buttons",
-            content: this.env._t("You can switch to different views here."),
+            content: _t("You can switch to different views here."),
         });
     }
 }