From 56dda82a5f865ff1110fbb0d9f1330ddf04e57d9 Mon Sep 17 00:00:00 2001
From: "Lucas Perais (lpe)" <lpe@odoo.com>
Date: Mon, 20 Sep 2021 12:52:25 +0000
Subject: [PATCH] [REF] web, *: legacy: lazy loading of legacy reporting views

Since commit 0134495ba55bea16c2d11d5eb5d832edad575694 the reporting
views pivot, graph, cohort are written in full new framework.

Some applications still need the legacy ones, so this commit just implements
the lazy loading of those views.

In stock, report_stock_forecasted has been adapted in order to avoid having
a GraphView override: we now modify the canvas' height in pure JS.

*: board, stock

closes odoo/odoo#76931

Related: odoo/enterprise#21054
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
---
 .../board/static/src/legacy/js/board_view.js  |  7 ++++
 .../static/src/js/report_stock_forecasted.js  | 34 ++++++++++++-------
 .../src/xml/report_stock_forecasted.xml       |  6 ----
 addons/web/__manifest__.py                    | 15 ++++++++
 .../src/legacy/js/views/graph/graph_view.js   |  2 ++
 .../src/legacy/js/views/pivot/pivot_view.js   |  2 ++
 .../src/legacy/js/views/view_registry.js      |  5 ---
 .../static/src/legacy/js/widgets/pie_chart.js |  7 ++--
 addons/web/static/src/legacy/legacy_views.js  | 13 +++++++
 .../web/static/tests/helpers/mock_server.js   |  3 ++
 .../tests/legacy/helpers/mock_server.js       |  3 ++
 .../static/tests/legacy/views/form_tests.js   |  9 ++++-
 addons/web/views/lazy_assets.xml              |  8 +++++
 13 files changed, 87 insertions(+), 27 deletions(-)
 create mode 100644 addons/web/views/lazy_assets.xml

diff --git a/addons/board/static/src/legacy/js/board_view.js b/addons/board/static/src/legacy/js/board_view.js
index d0cb35da927..e1125a2bd29 100644
--- a/addons/board/static/src/legacy/js/board_view.js
+++ b/addons/board/static/src/legacy/js/board_view.js
@@ -13,6 +13,7 @@ var FormView = require('web.FormView');
 var pyUtils = require('web.py_utils');
 var session  = require('web.session');
 var viewRegistry = require('web.view_registry');
+const { loadLegacyViews } = require("@web/legacy/legacy_views");
 
 var _t = core._t;
 var _lt = core._lt;
@@ -34,6 +35,12 @@ var BoardController = FormController.extend({
         this.customViewID = params.customViewID;
     },
 
+    async willStart() {
+        const _super = this._super.bind(this, ...arguments);
+        await loadLegacyViews({ rpc: this._rpc.bind(this) });
+        return _super();
+    },
+
     //--------------------------------------------------------------------------
     // Public
     //--------------------------------------------------------------------------
diff --git a/addons/stock/static/src/js/report_stock_forecasted.js b/addons/stock/static/src/js/report_stock_forecasted.js
index 017fb1e5332..4258c6c027d 100644
--- a/addons/stock/static/src/js/report_stock_forecasted.js
+++ b/addons/stock/static/src/js/report_stock_forecasted.js
@@ -1,24 +1,16 @@
 odoo.define('stock.ReplenishReport', function (require) {
 "use strict";
 
+const { loadLegacyViews } = require("@web/legacy/legacy_views");
+
 const clientAction = require('report.client_action');
 const core = require('web.core');
 const dom = require('web.dom');
-const GraphRenderer = require("web/static/src/js/views/graph/graph_renderer");
-const GraphView = require('web.GraphView');
 
 const qweb = core.qweb;
 const _t = core._t;
 
-class StockReportGraphRenderer extends GraphRenderer {}
-
-StockReportGraphRenderer.template = "stock.GraphRenderer";
-
-const StockReportGraphView = GraphView.extend({
-    config: Object.assign({}, GraphView.prototype.config, {
-        Renderer: StockReportGraphRenderer,
-    }),
-});
+const viewRegistry = require("web.view_registry");
 
 const ReplenishReport = clientAction.extend({
     /**
@@ -56,7 +48,8 @@ const ReplenishReport = clientAction.extend({
         });
         return Promise.all([
             this._super.apply(this, arguments),
-            loadWarehouses
+            loadWarehouses,
+            loadLegacyViews({ rpc: this._rpc.bind(this) }),
         ]);
     },
 
@@ -125,9 +118,24 @@ const ReplenishReport = clientAction.extend({
             noContentHelp: _t("Try to add some incoming or outgoing transfers."),
             withControlPanel: false,
         };
-        const graphView = new StockReportGraphView(viewInfo, params);
+        const GraphView = viewRegistry.get("graph");
+        const graphView = new GraphView(viewInfo, params);
         const graphController = await graphView.getController(this);
         await graphController.appendTo(document.createDocumentFragment());
+
+        // Since we render the container in a fragment, we may endup in this case:
+        // https://github.com/chartjs/Chart.js/issues/2210#issuecomment-204984449
+        // so, the canvas won't be resizing when it is relocated in the iframe.
+        // Also, since the iframe's position is absolute, chartJS reiszing may not work
+        //  (https://www.chartjs.org/docs/2.9.4/general/responsive.html -- #Important Note)
+        // Finally, we do want to set a height for the canvas rendering in chartJS.
+        // We do this via the chartJS API, that is legacy/graph_renderer.js:@_prepareOptions
+        //  (maintainAspectRatio = false) and with the *attribute* height (not the style).
+        //  (https://www.chartjs.org/docs/2.9.4/general/responsive.html -- #Responsive Charts)
+        // Luckily, the chartJS is not fully rendered, so changing the height here is relevant.
+        // It wouldn't be if we were after GraphRenderer@mounted.
+        graphController.el.querySelector(".o_graph_canvas_container canvas").height = "300";
+
         return graphController;
     },
 
diff --git a/addons/stock/static/src/xml/report_stock_forecasted.xml b/addons/stock/static/src/xml/report_stock_forecasted.xml
index 8f8110cc3d2..2c294cf4b09 100644
--- a/addons/stock/static/src/xml/report_stock_forecasted.xml
+++ b/addons/stock/static/src/xml/report_stock_forecasted.xml
@@ -1,12 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates id="template" xml:space="preserve">
 
-<t t-name="stock.GraphRenderer" owl="1" t-inherit="web.Legacy.GraphRenderer" t-inherit-mode="primary">
-    <xpath expr="//canvas[@t-ref='canvas']" position="attributes">
-        <attribute name="height">300</attribute>
-    </xpath>
-</t>
-
 <button t-name="replenish_report_buttons"
     class="btn btn-primary o_report_replenish_buy"
     type="button" title="Replenish">
diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py
index 84add579bda..d17c503c245 100644
--- a/addons/web/__manifest__.py
+++ b/addons/web/__manifest__.py
@@ -19,6 +19,7 @@ This module provides the core of the Odoo Web Client.
         'views/report_templates.xml',
         'views/base_document_layout_views.xml',
         'views/speedscope_template.xml',
+        'views/lazy_assets.xml',
         'data/report_layout.xml',
     ],
     'assets': {
@@ -183,6 +184,19 @@ This module provides the core of the Odoo Web Client.
             'web/static/src/legacy/js/env.js',
             'web/static/src/legacy/js/model.js',
             'web/static/src/legacy/js/owl_compatibility.js',
+            ("remove", 'web/static/src/legacy/js/views/graph/**/*'),
+            ("remove", 'web/static/src/legacy/scss/graph_view.scss'),
+            ("remove", 'web/static/src/legacy/js/views/pivot/**/*'),
+        ],
+        "web.assets_backend_legacy_lazy": [
+            ("include", "web._assets_helpers"),
+            ('include', 'web._assets_backend_helpers'),
+            'web/static/lib/bootstrap/scss/_variables.scss',
+            # graph
+            'web/static/src/legacy/js/views/graph/**/*',
+            'web/static/src/legacy/scss/graph_view.scss',
+            # pivot
+            'web/static/src/legacy/js/views/pivot/**/*',
         ],
         'web.assets_frontend_minimal': [
             'web/static/src/legacy/js/public/lazyloader.js',
@@ -471,6 +485,7 @@ This module provides the core of the Odoo Web Client.
             'web/static/lib/bootstrap/scss/_variables.scss',
 
             ('include', 'web.frontend_legacy'),
+            ("include", "web.assets_backend_legacy_lazy"),
         ],
         'web.qunit_suite_tests': [
             'base/static/tests/base_settings_tests.js',
diff --git a/addons/web/static/src/legacy/js/views/graph/graph_view.js b/addons/web/static/src/legacy/js/views/graph/graph_view.js
index 99863a9270c..41747f93fe4 100644
--- a/addons/web/static/src/legacy/js/views/graph/graph_view.js
+++ b/addons/web/static/src/legacy/js/views/graph/graph_view.js
@@ -13,6 +13,7 @@ var GraphModel = require('web.GraphModel');
 var Controller = require('web.GraphController');
 const GraphRenderer = require("web/static/src/js/views/graph/graph_renderer");
 const RendererWrapper = require("web.RendererWrapper");
+const viewRegistry = require("web.view_registry");
 
 var _t = core._t;
 var _lt = core._lt;
@@ -168,6 +169,7 @@ var GraphView = AbstractView.extend({
     },
 });
 
+viewRegistry.add("graph", GraphView);
 return GraphView;
 
 });
diff --git a/addons/web/static/src/legacy/js/views/pivot/pivot_view.js b/addons/web/static/src/legacy/js/views/pivot/pivot_view.js
index 889b5f36dff..3f410338ac2 100644
--- a/addons/web/static/src/legacy/js/views/pivot/pivot_view.js
+++ b/addons/web/static/src/legacy/js/views/pivot/pivot_view.js
@@ -14,6 +14,7 @@
     import PivotRenderer from './pivot_renderer';
     import RendererWrapper from 'web.RendererWrapper';
     import { sortBy } from 'web.utils';
+    import viewRegistry from "web.view_registry";
 
     const _t = core._t;
     const _lt = core._lt;
@@ -159,5 +160,6 @@
             return new RendererWrapper(parent, this.config.Renderer, state);
         },
     });
+    viewRegistry.add("pivot", PivotView);
 
     export default PivotView;
diff --git a/addons/web/static/src/legacy/js/views/view_registry.js b/addons/web/static/src/legacy/js/views/view_registry.js
index f936787ba1a..2e34705e830 100644
--- a/addons/web/static/src/legacy/js/views/view_registry.js
+++ b/addons/web/static/src/legacy/js/views/view_registry.js
@@ -26,10 +26,8 @@ odoo.define('web._view_registry', function (require) {
  */
 
 var FormView = require('web.FormView');
-var GraphView = require('web.GraphView');
 var KanbanView = require('web.KanbanView');
 var ListView = require('web.ListView');
-var PivotView = require('web.PivotView');
 var CalendarView = require('web.CalendarView');
 var view_registry = require('web.view_registry');
 
@@ -37,8 +35,5 @@ view_registry
     .add('form', FormView)
     .add('list', ListView)
     .add('kanban', KanbanView)
-    .add('graph', GraphView)
-    .add('pivot', PivotView)
     .add('calendar', CalendarView);
-
 });
diff --git a/addons/web/static/src/legacy/js/widgets/pie_chart.js b/addons/web/static/src/legacy/js/widgets/pie_chart.js
index 35ead6b4b38..4fafd7a5c64 100644
--- a/addons/web/static/src/legacy/js/widgets/pie_chart.js
+++ b/addons/web/static/src/legacy/js/widgets/pie_chart.js
@@ -10,6 +10,7 @@ var Domain = require('web.Domain');
 var viewRegistry = require('web.view_registry');
 var Widget = require('web.Widget');
 var widgetRegistry = require('web.widget_registry');
+const { loadLegacyViews } = require("@web/legacy/legacy_views");
 
 var qweb = core.qweb;
 
@@ -66,9 +67,11 @@ var PieChart = Widget.extend({
      *
      * @override
      */
-    willStart: function () {
+    willStart: async function () {
         var self = this;
-        var def1 = this._super.apply(this, arguments);
+        const _super = this._super.bind(this, ...arguments);
+        await loadLegacyViews({ rpc: this._rpc.bind(this) });
+        var def1 = _super();
 
         var SubView = viewRegistry.get('graph');
         var subView = new SubView(this.viewInfo, this.subViewParams);
diff --git a/addons/web/static/src/legacy/legacy_views.js b/addons/web/static/src/legacy/legacy_views.js
index 12d70f774f4..f0c02eafaf4 100644
--- a/addons/web/static/src/legacy/legacy_views.js
+++ b/addons/web/static/src/legacy/legacy_views.js
@@ -14,6 +14,7 @@ import {
 } from "./backend_utils";
 import { setScrollPosition } from "../core/utils/scrolling";
 import { registry } from "@web/core/registry";
+import { loadPublicAsset } from "@web/core/assets";
 
 const viewRegistry = registry.category("views");
 
@@ -159,3 +160,15 @@ for (const [name, action] of Object.entries(legacyViewRegistry.entries())) {
     registerView(name, action);
 }
 legacyViewRegistry.onAdd(registerView);
+
+export async function loadLegacyViews({ orm, rpc }) {
+    if (!orm && rpc) {
+        orm = {
+            call: (...callArgs) => {
+                const [model, method, args = [], kwargs = {}] = callArgs;
+                return rpc({ model, method, args, kwargs });
+            },
+        };
+    }
+    await loadPublicAsset("web.assets_backend_legacy_lazy", orm);
+}
diff --git a/addons/web/static/tests/helpers/mock_server.js b/addons/web/static/tests/helpers/mock_server.js
index 0158077add4..8ed615e7f83 100644
--- a/addons/web/static/tests/helpers/mock_server.js
+++ b/addons/web/static/tests/helpers/mock_server.js
@@ -416,6 +416,9 @@ export class MockServer {
             return;
         }
         switch (args.method) {
+            case "render_public_asset": {
+                return true;
+            }
             case "create":
                 return this.mockCreate(args.model, args.args[0]);
             case "fields_get":
diff --git a/addons/web/static/tests/legacy/helpers/mock_server.js b/addons/web/static/tests/legacy/helpers/mock_server.js
index 7b26051df9c..64ef35c9fcf 100644
--- a/addons/web/static/tests/legacy/helpers/mock_server.js
+++ b/addons/web/static/tests/legacy/helpers/mock_server.js
@@ -1957,6 +1957,9 @@ var MockServer = Class.extend({
             return;
         }
         switch (args.method) {
+            case "render_public_asset": {
+                return true;
+            }
             case 'copy':
                 return this._mockCopy(args.model, args.args[0]);
 
diff --git a/addons/web/static/tests/legacy/views/form_tests.js b/addons/web/static/tests/legacy/views/form_tests.js
index abfdbc7e525..dc454059e00 100644
--- a/addons/web/static/tests/legacy/views/form_tests.js
+++ b/addons/web/static/tests/legacy/views/form_tests.js
@@ -9807,7 +9807,7 @@ QUnit.module('Views', {
     });
 
     QUnit.test('reload a form view with a pie chart does not crash', async function (assert) {
-        assert.expect(2);
+        assert.expect(3);
 
         const form = await createView({
             View: FormView,
@@ -9816,6 +9816,13 @@ QUnit.module('Views', {
             arch: `<form>
                       <widget name="pie_chart" title="qux by product" attrs="{'measure': 'qux', 'groupby': 'product_id'}"/>
                   </form>`,
+            mockRPC(route, args) {
+                if (args.method === "render_public_asset") {
+                    assert.deepEqual(args.args, ["web.assets_backend_legacy_lazy"]);
+                    return Promise.resolve(true);
+                }
+                return this._super(...arguments);
+            }
         });
 
         assert.containsOnce(form, '.o_widget');
diff --git a/addons/web/views/lazy_assets.xml b/addons/web/views/lazy_assets.xml
new file mode 100644
index 00000000000..20b3a6792cb
--- /dev/null
+++ b/addons/web/views/lazy_assets.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+  <template id="assets_backend_legacy_lazy" name="Lazy assets for legacy Views" groups="base.group_user">
+    <t t-call-assets="web.assets_backend_legacy_lazy" />
+  </template>
+
+</odoo>