web_help: Improve helpers

web_help: Improve helpers

fix layout issue

fix layout issue

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

@@ -2,21 +2,24 @@
 import LegacyControlPanel from "web.ControlPanel";
 import {ControlPanel} from "@web/search/control_panel/control_panel";
 import {findTrip} from "@web_help/helpers.esm";
-import {Component, useState} from "@odoo/owl";
+import {Component, onWillStart, useState} from "@odoo/owl";
 import {ActionDialog} from "@web/webclient/actions/action_dialog";
 
 export class HelpButton extends Component {
     setup() {
-        const foundTrip = findTrip(this.props.resModel, this.props.viewType);
         this.state = useState({
-            TripClass: foundTrip,
+            TripClass: null,
+        });
+        onWillStart(async () => {
+            const foundTrip = await findTrip(this.props.resModel, this.props.viewType);
+            this.state.TripClass = foundTrip;
         });
     }
 
-    onClick() {
+    async onClick() {
         const TripClass = this.state.TripClass;
         const trip = new TripClass(this.env);
-        trip.setup();
+        await trip.setup();
         trip.start();
     }
 }

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

@@ -3,15 +3,16 @@
     <t t-name="web_help.HelpButton" owl="1">
         <button
             class="btn ml-2 js_web_help_btn"
-            t-att-class="props.btnClass || 'btn-secondary'"
+            t-att-class="props.btnClass || 'btn-light'"
             t-on-click="onClick"
+            tabindex="-1"
             t-if="state.TripClass"
         >
             <i class="fa fa-question" />
         </button>
     </t>
     <t t-inherit="web.ControlPanel.Regular" t-inherit-mode="extension">
-        <xpath expr="//div[hasclass('o_cp_bottom')]" t-operation="inside">
+        <xpath expr="//div[hasclass('o_cp_bottom_right')]" t-operation="inside">
             <nav class="btn-group">
                 <HelpButton
                     resModel="env.searchModel.resModel"
@@ -21,7 +22,7 @@
         </xpath>
     </t>
     <t t-inherit="web.ControlPanel.Small" t-inherit-mode="extension">
-        <xpath expr="//div[hasclass('o_cp_bottom')]" t-operation="inside">
+        <xpath expr="//div[hasclass('o_cp_bottom_right')]" t-operation="inside">
             <nav class="btn-group">
                 <HelpButton
                     resModel="env.searchModel.resModel"

web_help/static/src/helpers.esm.js

@@ -1,16 +1,40 @@
 /** @odoo-module **/
 import {registry} from "@web/core/registry";
+import {Component} from "@odoo/owl";
 
-export function findTrip(model, viewType) {
+export async function findTrip(model, viewType) {
     const trips = registry.category("trips").getAll();
-    const matchedTrips = _.filter(trips, function (trip) {
-        return trip.selector(model, viewType);
-    });
+    const selectorResults = await Promise.all(
+        trips.map((trip) => trip.selector(model, viewType))
+    );
+    const matchedTrips = trips.filter((trip, i) => selectorResults[i]);
     if (matchedTrips.length >= 1) {
         if (matchedTrips.length != 1) {
-            console.warning("More than one trip found", model, viewType);
+            console.warn("More than one trip found", model, viewType);
         }
         return matchedTrips[0].Trip;
     }
     return null;
 }
+
+export function wait(ms) {
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export async function waitUntilAvailable(selector, ms = 50) {
+    const selection = $(selector);
+
+    if (!selection.length) {
+        await wait(ms);
+        return await waitUntilAvailable(selector, ms);
+    }
+
+    return selection;
+}
+
+export async function doAction(xmlId, options = {}) {
+    Component.env.bus.trigger("do-action", {
+        action: xmlId,
+        options: options,
+    });
+}

web_help/static/src/trip.esm.js

@@ -86,7 +86,11 @@ export class Trip {
         const $stepRender = $(
             renderToString(this._getStepTemplate(), this._getStepRenderContext())
         );
-        $stepRender.find(".web_help_cb_button").click(cb.bind(this));
+        const $cbButton = $stepRender.find(".web_help_cb_button");
+        $cbButton.click(() => {
+            $cbButton.attr("disabled", "disabled");
+            cb.bind(this)();
+        });
         $stepRender.find(".web_help_close").click(this.stop.bind(this));
         await step.beforeHighlight();
         this.highlighterService.highlight(

web_help/static/src/trip.xml

@@ -3,7 +3,7 @@
     <t t-name="web_help.TripStep" owl="1">
         <div>
             <div class="pb-4">
-                <t t-raw="content" />
+                <t t-out="content" />
             </div>
 
             <button class="btn btn-lg btn-outline-light web_help_cb_button mr8"><t
@@ -18,7 +18,7 @@
     <t t-name="web_help.TripStepLast" owl="1">
         <div>
             <div class="pb-4">
-                <t t-raw="content" />
+                <t t-out="content" />
             </div>
 
             <button class="btn btn-lg btn-outline-light web_help_cb_button"><t