[FIX] web: MEASURES button disappearing when switching back to graph

before this commit, when change view from graph view to pivot view or any other
view and come back to graph view, Measures button disappear, it's only
appearing if we refresh the page.

after this commit, restore previous view state when switching back to graph
view, this was because measures button is rendered in fragment and when
switching between views, as graph view element was destroyed and re-rendered
so measures button will be mounted in fragment as update method of
ComponentWrapper will render it from previous mountArgs, so to avoid this issue
push measures element in DOM.

task-2250051

closes odoo/odoo#55666

X-original-commit: 40c709fb0abe7721d1650af9bd1d17dc8453895a
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Co-authored-by: Julien Mougenot <jum@odoo.com>
Co-authored-by: Mohammed Shekha <msh@odoo.com>

2 files changed, 82 insertions, 23 deletions

diff --git a/addons/web/static/src/js/views/graph/graph_controller.js b/addons/web/static/src/js/views/graph/graph_controller.js
index f33db981667..5751c5b5805 100644
--- a/addons/web/static/src/js/views/graph/graph_controller.js
+++ b/addons/web/static/src/js/views/graph/graph_controller.js
@@ -51,6 +51,7 @@ var GraphController = AbstractController.extend({
         // that may be used within the groupby menu available when
         // the view is embedded
         this.groupableFields = params.groupableFields;
+        this.buttonDropdownPromises = [];
     },
     /**
      * @override
@@ -120,8 +121,6 @@ var GraphController = AbstractController.extend({
         this.$buttons.click(ev => this._onButtonClick(ev));
 
         if (this.withButtons) {
-            const actionsContainer = this.$buttons[0];
-            const promises = [];
             const state = this.model.get();
             const fragment = document.createDocumentFragment();
             // Instantiate and append MeasureMenu
@@ -130,10 +129,7 @@ var GraphController = AbstractController.extend({
                 title: "Measures",
                 items: this.measures,
             });
-            promises.push(this.measureMenu.mount(fragment).then(() => {
-                actionsContainer.appendChild(this.measureMenu.el);
-                this.measureMenu.el.classList.add('o_graph_measures_list');
-            }));
+            this.buttonDropdownPromises = [this.measureMenu.mount(fragment)];
             if ($node) {
                 if (this.isEmbedded) {
                     // Instantiate and append GroupBy menu
@@ -142,26 +138,10 @@ var GraphController = AbstractController.extend({
                         icon: 'fa fa-bars',
                         items: this._getGroupBys(state.groupBy),
                     });
-                    promises.push(this.groupByMenu.mount(fragment).then(() => {
-                        actionsContainer.appendChild(this.groupByMenu.el);
-                        this.groupByMenu.el.classList.add('o_group_by_menu');
-                    }));
+                    this.buttonDropdownPromises.push(this.groupByMenu.mount(fragment));
                 }
                 this.$buttons.appendTo($node);
             }
-            Promise.all(promises).then(() => {
-                // Similar behaviour for all buttons
-                const buttons = actionsContainer.querySelectorAll('.o_dropdown_toggler_btn');
-                for (const button of buttons) {
-                    button.classList.remove('o_dropdown_toggler_btn', 'btn-secondary');
-                    if (this.isEmbedded) {
-                        button.classList.add('btn-outline-secondary');
-                    } else {
-                        button.classList.add('btn-primary');
-                        button.tabIndex = 0;
-                    }
-                }
-            });
         }
     },
     /**
@@ -189,6 +169,10 @@ var GraphController = AbstractController.extend({
             .toggleClass('o_hidden', state.mode === 'pie' || !!Object.keys(state.timeRanges).length)
             .filter('.o_graph_button[data-order="' + state.orderBy + '"]')
             .toggleClass('active', !!state.orderBy);
+
+        if (this.withButtons) {
+            this._attachDropdownComponents();
+        }
     },
 
     //--------------------------------------------------------------------------
@@ -196,6 +180,35 @@ var GraphController = AbstractController.extend({
     //--------------------------------------------------------------------------
 
     /**
+     * Attaches the different dropdown components to the buttons container.
+     *
+     * @returns {Promise}
+     */
+    async _attachDropdownComponents() {
+        await Promise.all(this.buttonDropdownPromises);
+        const actionsContainer = this.$buttons[0];
+        // Attach "measures" button
+        actionsContainer.appendChild(this.measureMenu.el);
+        this.measureMenu.el.classList.add('o_graph_measures_list');
+        if (this.isEmbedded) {
+            // Attach "groupby" button
+            actionsContainer.appendChild(this.groupByMenu.el);
+            this.groupByMenu.el.classList.add('o_group_by_menu');
+        }
+        // Update button classes accordingly to the current mode
+        const buttons = actionsContainer.querySelectorAll('.o_dropdown_toggler_btn');
+        for (const button of buttons) {
+            button.classList.remove('o_dropdown_toggler_btn', 'btn-secondary');
+            if (this.isEmbedded) {
+                button.classList.add('btn-outline-secondary');
+            } else {
+                button.classList.add('btn-primary');
+                button.tabIndex = 0;
+            }
+        }
+    },
+
+    /**
      * Returns the items used by the Group By menu in embedded mode.
      *
      * @private
diff --git a/addons/web/static/tests/views/graph_tests.js b/addons/web/static/tests/views/graph_tests.js
index 9035fce355b..68c28952877 100644
--- a/addons/web/static/tests/views/graph_tests.js
+++ b/addons/web/static/tests/views/graph_tests.js
@@ -772,6 +772,52 @@ QUnit.module('Views', {
         graph.destroy();
     });
 
+    QUnit.test('measure dropdown consistency', async function (assert) {
+        assert.expect(2);
+
+        const actionManager = await testUtils.createActionManager({
+            archs: {
+                'foo,false,graph': `
+                    <graph string="Partners" type="bar">
+                        <field name="foo" type="measure"/>
+                    </graph>`,
+                'foo,false,search': `<search/>`,
+                'foo,false,kanban': `
+                    <kanban>
+                        <templates>
+                            <div t-name="kanban-box">
+                                <field name="foo"/>
+                            </div>
+                        </templates>
+                    </kanban>`,
+            },
+            data: this.data,
+        });
+        await actionManager.doAction({
+            res_model: 'foo',
+            type: 'ir.actions.act_window',
+            views: [[false, 'graph'], [false, 'kanban']],
+            flags: {
+                graph: {
+                    additionalMeasures: ['product_id'],
+                }
+            },
+        });
+
+        assert.containsOnce(actionManager, '.o_control_panel .o_graph_measures_list',
+            "Measures dropdown is present at init"
+        );
+
+        await cpHelpers.switchView(actionManager, 'kanban');
+        await cpHelpers.switchView(actionManager, 'graph');
+
+        assert.containsOnce(actionManager, '.o_control_panel .o_graph_measures_list',
+            "Measures dropdown is present after reload"
+        );
+
+        actionManager.destroy();
+    });
+
     QUnit.test('graph view crash when moving from search view using Down key', async function (assert) {
         assert.expect(1);