[IMP] web: add offline UI support

This commit introduces the first offline features in the webclient.
For that matter, an "offline" service has been created. The service
exposes a reactive containing the offline state such that components
that want to render differently in offline can easily do so and be
automatically re-rendered when switching from/to offline mode.

A systray item has been added to indicate when we are offline.

By default, all buttons and checkboxes are disabled in offline. The
attribute `data-available-offline` can be set on those elements
that want to be available offline (e.g. breadcrumbs, menus...).

When offline, views that have an offline support (for now form,
list and kanban), take the priority over other views, as we know
the other views won't be able to fetch their data and render.

task~5106517

Part-of: odoo#229492
Related: odoo/enterprise#96626
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>

Author: jpp-odoo

addons/web/models/ir_ui_view.py

@@ -13,6 +13,7 @@ def get_view_info(self):
                 'display_name': display_name,
                 'icon': _view_info[type_]['icon'],
                 'multi_record': _view_info[type_].get('multi_record', True),
+                'available_offline': _view_info[type_].get('available_offline', False),
             }
             for (type_, display_name)
             in self.fields_get(['type'], ['selection'])['type']['selection']
@@ -21,11 +22,11 @@ def get_view_info(self):
 
     def _get_view_info(self):
         return {
-            'list': {'icon': 'oi oi-view-list'},
-            'form': {'icon': 'fa fa-address-card', 'multi_record': False},
+            'list': {'icon': 'oi oi-view-list', 'available_offline': True},
+            'form': {'icon': 'fa fa-address-card', 'multi_record': False, 'available_offline': True},
             'graph': {'icon': 'fa fa-area-chart'},
             'pivot': {'icon': 'oi oi-view-pivot'},
-            'kanban': {'icon': 'oi oi-view-kanban'},
+            'kanban': {'icon': 'oi oi-view-kanban', 'available_offline': True},
             'calendar': {'icon': 'fa fa-calendar'},
             'search': {'icon': 'oi oi-search'},
         }

addons/web/static/src/@types/services.d.ts

@@ -14,6 +14,7 @@ declare module "services" {
     import { nameService } from "@web/core/name_service";
     import { httpService } from "@web/core/network/http_service";
     import { notificationService } from "@web/core/notifications/notification_service";
+    import { offlineService } from "@web/core/offline/offline_service";
     import { ormService } from "@web/core/orm_service";
     import { overlayService } from "@web/core/overlay/overlay_service";
     import { popoverService } from "@web/core/popover/popover_service";
@@ -54,6 +55,7 @@ declare module "services" {
         menu: typeof menuService;
         name: typeof nameService;
         notification: typeof notificationService;
+        offline: typeof offlineService;
         orm: typeof ormService;
         overlay: typeof overlayService;
         popover: typeof popoverService;

addons/web/static/src/core/dialog/dialog.xml

@@ -33,16 +33,16 @@
 
     <t t-name="web.Dialog.header">
         <t t-if="fullscreen">
-            <button class="btn oi oi-arrow-left oi-large" aria-label="Close" tabindex="-1" t-on-click="dismiss" />
+            <button class="btn oi oi-arrow-left oi-large" aria-label="Close" tabindex="-1" t-on-click="dismiss" data-available-offline=""/>
         </t>
         <h4 class="modal-title text-break flex-grow-1" t-att-class="{ 'me-auto': fullscreen, 'fs-5': props.size == 'sm' }">
             <t t-esc="props.title"/>
         </h4>
         <t t-if="onExpand">
-            <button type="button" class="fa fa-expand btn opacity-75 opacity-100-hover o_expand_button" aria-label="Expand" tabindex="-1" t-on-click="onExpand"/>
+            <button type="button" class="fa fa-expand btn opacity-75 opacity-100-hover o_expand_button" aria-label="Expand" tabindex="-1" t-on-click="onExpand" data-available-offline=""/>
         </t>
         <t t-if="!fullscreen">
-            <button type="button" class="btn-close" t-att-class="{'position-absolute top-0 end-0 mt-1 me-1': design == 'minimal' and !onExpand  }" aria-label="Close" tabindex="-1" t-on-click="dismiss"/>
+            <button type="button" class="btn-close" t-att-class="{'position-absolute top-0 end-0 mt-1 me-1': design == 'minimal' and !onExpand  }" aria-label="Close" tabindex="-1" t-on-click="dismiss" data-available-offline=""/>
         </t>
     </t>
 </templates>

addons/web/static/src/core/errors/error_dialogs.xml

@@ -7,7 +7,7 @@
                 <p t-esc="message" class="text-prewrap"/>
             </div>
             <t t-set-slot="footer">
-                <button class="btn btn-primary o-default-button" t-on-click="props.close">Close</button>
+                <button class="btn btn-primary o-default-button" t-on-click="props.close" data-available-offline="">Close</button>
             </t>
         </Dialog>
     </t>
@@ -19,7 +19,7 @@
             </div>
             <t t-set-slot="footer">
                 <button class="btn btn-primary" t-on-click="onClick" t-esc="buttonText"/>
-                <button class="btn btn-secondary" t-on-click="props.close">Close</button>
+                <button class="btn btn-secondary" t-on-click="props.close" data-available-offline="">Close</button>
             </t>
         </Dialog>
     </t>
@@ -32,7 +32,7 @@
                 </p>
             </div>
             <t t-set-slot="footer">
-                <button class="btn btn-primary o-default-button" t-on-click="props.close">Close</button>
+                <button class="btn btn-primary o-default-button" t-on-click="props.close" data-available-offline="">Close</button>
             </t>
         </Dialog>
     </t>
@@ -45,7 +45,7 @@
                 </p>
             </div>
             <t t-set-slot="footer">
-                <button class="btn btn-primary o-default-button" t-on-click="onClick">Close</button>
+                <button class="btn btn-primary o-default-button" t-on-click="onClick" data-available-offline="">Close</button>
             </t>
         </Dialog>
     </t>
@@ -59,7 +59,7 @@
                 <details t-on-toggle="() => { state.showTraceback = !state.showTraceback }">
                     <summary t-esc="state.showTraceback ? this.constructor.hideTracebackButtonText : this.constructor.showTracebackButtonText" class="mb-1 link-info"/>
                     <div class="text-bg-100 clearfix mt-2 position-relative o_error_detail pb-2">
-                        <button class="btn position-absolute top-0 end-0 pt-2 btn-link link-body-emphasis" t-ref="copyButton" t-on-click="onClickClipboard">
+                        <button class="btn position-absolute top-0 end-0 pt-2 btn-link link-body-emphasis" t-ref="copyButton" t-on-click="onClickClipboard" data-available-offline="">
                             <span class="fa fa-clipboard"/>
                         </button>
                         <div class="ps-1 pt-1 ps-md-3 pt-md-3">
@@ -73,7 +73,7 @@
                 </details>
             </div>
             <t t-set-slot="footer">
-                <button class="btn btn-primary o-default-button" t-on-click="props.close">Close</button>
+                <button class="btn btn-primary o-default-button" t-on-click="props.close" data-available-offline="">Close</button>
             </t>
         </Dialog>
     </t>

addons/web/static/src/core/errors/error_handlers.js

@@ -1,6 +1,4 @@
-import { _t } from "@web/core/l10n/translation";
-import { browser } from "../browser/browser";
-import { ConnectionLostError, RPCError, rpc } from "../network/rpc";
+import { RPCError } from "../network/rpc";
 import { registry } from "../registry";
 import { session } from "@web/session";
 import { user } from "@web/core/user";
@@ -81,54 +79,6 @@ export function rpcErrorHandler(env, error, originalError) {
 
 errorHandlerRegistry.add("rpcErrorHandler", rpcErrorHandler, { sequence: 97 });
 
-// -----------------------------------------------------------------------------
-// Lost connection errors
-// -----------------------------------------------------------------------------
-
-let connectionLostNotifRemove = null;
-/**
- * @param {OdooEnv} env
- * @param {UncaughError} error
- * @param {Error} originalError
- * @returns {boolean}
- */
-export function lostConnectionHandler(env, error, originalError) {
-    if (!(error instanceof UncaughtPromiseError)) {
-        return false;
-    }
-    if (originalError instanceof ConnectionLostError) {
-        if (connectionLostNotifRemove) {
-            // notification already displayed (can occur if there were several
-            // concurrent rpcs when the connection was lost)
-            return true;
-        }
-        connectionLostNotifRemove = env.services.notification.add(
-            _t("Connection lost. Trying to reconnect..."),
-            { sticky: true }
-        );
-        let delay = 2000;
-        browser.setTimeout(function checkConnection() {
-            rpc("/web/webclient/version_info", {})
-                .then(function () {
-                    if (connectionLostNotifRemove) {
-                        connectionLostNotifRemove();
-                        connectionLostNotifRemove = null;
-                    }
-                    env.services.notification.add(_t("Connection restored. You are back online."), {
-                        type: "info",
-                    });
-                })
-                .catch(() => {
-                    // exponential backoff, with some jitter
-                    delay = delay * 1.5 + 500 * Math.random();
-                    browser.setTimeout(checkConnection, delay);
-                });
-        }, delay);
-        return true;
-    }
-}
-errorHandlerRegistry.add("lostConnectionHandler", lostConnectionHandler, { sequence: 98 });
-
 // -----------------------------------------------------------------------------
 // Default handler
 // -----------------------------------------------------------------------------
@@ -182,5 +132,7 @@ if (user.isInternalUser === undefined) {
         );
     }
 } else {
-    registry.category("error_handlers").add("swallowAllVisitorErrors", swallowAllVisitorErrors, { sequence: 0 });
+    registry
+        .category("error_handlers")
+        .add("swallowAllVisitorErrors", swallowAllVisitorErrors, { sequence: 0 });
 }

addons/web/static/src/core/notifications/notification.xml

@@ -5,7 +5,7 @@
         <div t-on-mouseenter="freeze" t-on-mouseleave="refresh" t-attf-class="o_notification {{props.className}} d-flex mb-2 position-relative rounded shadow-lg" role="alert" aria-live="assertive" aria-atomic="true">
             <span t-attf-class="o_notification_bar bg-{{props.type}} rounded-start"/>
             <div class="w-100 py-2 ps-3 pe-5 border border-start-0 rounded-end text-break">
-                <button type="button" class="o_notification_close btn-close position-absolute top-0 end-0 mt-2 me-2" aria-label="Close" t-on-click="close"/>
+                <button type="button" class="o_notification_close btn-close position-absolute top-0 end-0 mt-2 me-2" aria-label="Close" t-on-click="close" data-available-offline=""/>
                 <div class="o_notification_body d-flex align-items-center">
                     <span class="me-auto o_notification_content w-100">
                         <!-- TODO-IPB: at the end, title has to be removed, but the change is too important to do all in once now -->

addons/web/static/src/core/offline/offline.scss

@@ -0,0 +1,11 @@
+.o_disabled_offline {
+    cursor: not-allowed !important;
+    pointer-events: auto !important;
+    opacity: 0.5 !important;
+}
+
+// must override this rule https://github.com/odoo/odoo/blob/9e3b9bd085483ba0e0e956762fc0ad7d759eec73/addons/web/static/src/webclient/webclient.scss#L140
+.o_disabled_offline[type="action"],
+.o_disabled_offline[type="toggle"] {
+    cursor: not-allowed !important;
+}

addons/web/static/src/core/offline/offline_error.js

@@ -0,0 +1,26 @@
+import { UncaughtPromiseError } from "../errors/error_service";
+import { ConnectionLostError } from "../network/rpc";
+import { registry } from "../registry";
+
+const errorHandlerRegistry = registry.category("error_handlers");
+
+// -----------------------------------------------------------------------------
+// Lost connection errors
+// -----------------------------------------------------------------------------
+
+/**
+ * @param {OdooEnv} env
+ * @param {UncaughError} error
+ * @param {Error} originalError
+ * @returns {boolean}
+ */
+export function lostConnectionHandler(env, error, originalError) {
+    if (!(error instanceof UncaughtPromiseError)) {
+        return false;
+    }
+    if (originalError instanceof ConnectionLostError) {
+        env.services.offline.status.offline = true;
+        return true;
+    }
+}
+errorHandlerRegistry.add("lostConnectionHandler", lostConnectionHandler, { sequence: 98 });

addons/web/static/src/core/offline/offline_service.js

@@ -0,0 +1,96 @@
+import { reactive, useState } from "@odoo/owl";
+import { browser } from "@web/core/browser/browser";
+import { ConnectionLostError, rpc, rpcBus } from "@web/core/network/rpc";
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+
+const SELECTORS_TO_DISABLE = [
+    "button:not([data-available-offline]):not([disabled])",
+    "input[type='checkbox']:not([disabled])",
+];
+
+function offlineUI() {
+    document.querySelectorAll(SELECTORS_TO_DISABLE.join(", ")).forEach((el) => {
+        el.setAttribute("disabled", "");
+        el.classList.add("o_disabled_offline");
+    });
+}
+
+function onlineUI() {
+    document.querySelectorAll(".o_disabled_offline").forEach((el) => {
+        el.removeAttribute("disabled");
+        el.classList.remove("o_disabled_offline");
+    });
+}
+
+export const offlineService = {
+    async start() {
+        let timeout;
+        let observer;
+
+        async function checkConnection() {
+            try {
+                await rpc("/web/webclient/version_info", {});
+            } catch {
+                status.offline = true;
+                return;
+            }
+            status.offline = false;
+        }
+
+        const status = reactive(
+            {
+                offline: false,
+            },
+            () => {
+                if (status.offline) {
+                    // Disable everything in the UI that isn't marked as available offline
+                    offlineUI();
+                    // Create an observer instance linked to the callback function to keep disabling
+                    // buttons that would appear in the DOM while being offline
+                    observer = new MutationObserver((mutationList) => {
+                        if (status.offline && mutationList.find((m) => m.addedNodes.length > 0)) {
+                            offlineUI();
+                        }
+                    });
+                    observer.observe(document.body, {
+                        childList: true, // listen for direct children being added/removed
+                        subtree: true, // also observe descendants (not just direct children)
+                    });
+
+                    // Repeatedly check if connection is back
+                    let delay = 2000;
+                    const _checkConnection = async () => {
+                        if (status.offline) {
+                            await checkConnection();
+                            // exponential backoff, with some jitter
+                            delay = delay * 1.5 + 500 * Math.random();
+                            timeout = browser.setTimeout(_checkConnection, delay);
+                        }
+                    };
+                    timeout = browser.setTimeout(_checkConnection, delay);
+                } else {
+                    onlineUI();
+                    observer?.disconnect();
+                    browser.clearTimeout(timeout);
+                }
+            }
+        );
+        status.offline; // activate the reactivity!
+
+        rpcBus.addEventListener("RPC:RESPONSE", (ev) => {
+            status.offline = ev.detail.error instanceof ConnectionLostError;
+        });
+
+        return {
+            status,
+            checkConnection,
+        };
+    },
+};
+
+registry.category("services").add("offline", offlineService);
+
+export function useOfflineStatus() {
+    return useState(useService("offline").status);
+}

addons/web/static/src/core/offline/offline_systray.js

@@ -0,0 +1,21 @@
+import { Component, useEffect } from "@odoo/owl";
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+import { useOfflineStatus } from "./offline_service";
+
+class OfflineSystray extends Component {
+    static template = "web.OfflineSystray";
+    static props = {};
+
+    setup() {
+        this.offlineService = useService("offline");
+        this.status = useOfflineStatus();
+        useEffect(this.env.redrawNavbar, () => [this.status.offline]);
+    }
+}
+
+const offlineSystrayItem = {
+    Component: OfflineSystray,
+};
+
+registry.category("systray").add("offline", offlineSystrayItem, { sequence: 1000 });