From 11ba58a311311b798a68183df18673e562bb97d3 Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Thu, 27 Feb 2020 14:55:44 +0000
Subject: [PATCH 01/10] [REF] web: Indent and reorganize generic files

The purpose of this commit is to correctly indent and order some generic files.
There is strictly no change in the code logic.
---
 .../web/static/src/js/chrome/action_mixin.js  | 426 ++++----
 .../web/static/tests/helpers/qunit_asserts.js | 435 ++++-----
 addons/web/static/tests/helpers/test_utils.js | 407 ++++----
 .../static/tests/helpers/test_utils_create.js | 784 +++++++--------
 .../static/tests/helpers/test_utils_dom.js    | 909 +++++++++---------
 .../static/tests/helpers/test_utils_fields.js | 423 ++++----
 6 files changed, 1699 insertions(+), 1685 deletions(-)

diff --git a/addons/web/static/src/js/chrome/action_mixin.js b/addons/web/static/src/js/chrome/action_mixin.js
index 1831f3998f8..1ca87c15ef3 100644
--- a/addons/web/static/src/js/chrome/action_mixin.js
+++ b/addons/web/static/src/js/chrome/action_mixin.js
@@ -1,222 +1,232 @@
 odoo.define('web.ActionMixin', function (require) {
-"use strict";
-
-/**
- * We define here the ActionMixin, the generic notion of action (from the point
- * of view of the web client).  In short, an action is a widget which controls
- * the main part of the screen (everything below the navbar).
- *
- * More precisely, the action manager is the component that coordinates a stack
- * of actions.  Whenever the user navigates in the interface, switches views,
- * open different menus, the action manager creates/updates/destroys special
- * widgets which implements the ActionMixin.  These actions need to answer to a
- * standardised API, which is the reason for this mixin.
- *
- * In practice, most actions are view controllers (coming from an
- * ir.action.act_window).  However, some actions are 'client actions'.  They
- * also need to implement the ActionMixin for a better cooperation with the
- * action manager.
- *
- * @module web.ActionMixin
- */
-
-var core = require('web.core');
-
-var ActionMixin = {
-    template: 'Action',
+    "use strict";
 
     /**
-     * The action mixin assumes that it is rendered with the 'Action' template.
-     * This template has a special zone ('.o_content') where the content should
-     * be added.  Actions that want to automatically render a template there
-     * should define the contentTemplate key.  In short, client actions should
-     * probably define a contentTemplate key, and not a template key.
+     * We define here the ActionMixin, the generic notion of action (from the point
+     * of view of the web client).  In short, an action is a widget which controls
+     * the main part of the screen (everything below the navbar).
+     *
+     * More precisely, the action manager is the component that coordinates a stack
+     * of actions.  Whenever the user navigates in the interface, switches views,
+     * open different menus, the action manager creates/updates/destroys special
+     * widgets which implements the ActionMixin.  These actions need to answer to a
+     * standardised API, which is the reason for this mixin.
+     *
+     * In practice, most actions are view controllers (coming from an
+     * ir.action.act_window).  However, some actions are 'client actions'.  They
+     * also need to implement the ActionMixin for a better cooperation with the
+     * action manager.
+     *
+     * @module web.ActionMixin
      */
-    contentTemplate: null,
 
-    /**
-     * Events built by and managed by Odoo Framework
-     *
-     * It is expected that any Widget Class implementing this mixin
-     * will also implement the ParentedMixin which actually manages those
-     */
-    custom_events: {
-        get_controller_query_params: '_onGetControllerQueryParams',
-    },
-    /**
-     * If an action wants to use a control panel, it will be created and
-     * registered in this _controlPanel key (the widget).  The way this control
-     * panel is created is up to the implementation (so, view controllers or
-     * client actions may have different needs).
-     *
-     * Note that most of the time, this key should be set by the framework, not
-     * by the code of the client action.
-     */
-    _controlPanel: null,
+    var core = require('web.core');
 
-    /**
-     * String containing the title of the client action (which may be needed to
-     * display in the breadcrumbs zone of the control panel).
-     *
-     * @see _setTitle
-     */
-    _title: '',
+    var ActionMixin = {
+        template: 'Action',
 
-    /**
-     * @override
-     */
-    renderElement: function () {
-        this._super.apply(this, arguments);
-        if (this.contentTemplate) {
-            var content = core.qweb.render(this.contentTemplate, {widget: this});
-            this.$('.o_content').append(content);
-        }
-    },
-    /**
-     * Called each time the action is attached into the DOM.
-     */
-    on_attach_callback: function () {},
-    /**
-     * Called each time the action is detached from the DOM.
-     */
-    on_detach_callback: function () {},
-    /**
-     * Called by the action manager when action is restored (typically, when the
-     * user clicks on the action in the breadcrumb)
-     *
-     * @returns {Promise|undefined}
-     */
-    willRestore: function () {},
+        /**
+         * The action mixin assumes that it is rendered with the 'Action' template.
+         * This template has a special zone ('.o_content') where the content should
+         * be added.  Actions that want to automatically render a template there
+         * should define the contentTemplate key.  In short, client actions should
+         * probably define a contentTemplate key, and not a template key.
+         */
+        contentTemplate: null,
 
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
+        /**
+         * Events built by and managed by Odoo Framework
+         *
+         * It is expected that any Widget Class implementing this mixin
+         * will also implement the ParentedMixin which actually manages those
+         */
+        custom_events: {
+            get_controller_query_params: '_onGetControllerQueryParams',
+        },
 
-    /**
-     * In some situations, we need confirmation from the controller that the
-     * current state can be destroyed without prejudice to the user.  For
-     * example, if the user has edited a form, maybe we should ask him if we
-     * can discard all his changes when we switch to another action.  In that
-     * case, the action manager will call this method.  If the returned
-     * promise is successfully resolved, then we can destroy the current action,
-     * otherwise, we need to stop.
-     *
-     * @returns {Promise} resolved if the action can be removed, rejected
-     *   otherwise
-     */
-    canBeRemoved: function () {
-        return Promise.resolve();
-    },
-    /**
-     * This function is called when the current state of the action
-     * should be known. For instance, if the action is a view controller,
-     * this may be useful to reinstantiate a view in the same state.
-     *
-     * Typically the state can (and should) be encoded in a query object of
-     * the form::
-     *
-     *     {
-     *          context: {...},
-     *          groupBy: [...],
-     *          domain = [...],
-     *          orderedBy = [...],
-     *     }
-     *
-     * where the context key can contain many information.
-     * This method is mainly called during the creation of a custom filter.
-     *
-     * @returns {Object}
-     */
-    getOwnedQueryParams: function () {
-        return {};
-    },
-    /**
-     * Returns a title that may be displayed in the breadcrumb area.  For
-     * example, the name of the record (for a form view). This is actually
-     * important for the action manager: this is the way it is able to give
-     * the proper titles for other actions.
-     *
-     * @returns {string}
-     */
-    getTitle: function () {
-        return this._title;
-    },
-    /**
-     * Returns a serializable state that will be pushed in the URL by
-     * the action manager, allowing the action to be restarted correctly
-     * upon refresh. This function should be overriden to add extra information.
-     * Note that some keys are reserved by the framework and will thus be
-     * ignored ('action', 'active_id', 'active_ids' and 'title', for all
-     * actions, and 'model' and 'view_type' for act_window actions).
-     *
-     * @returns {Object}
-     */
-    getState: function () {
-        return {};
-    },
-    /**
-     * Gives the focus to the action
-     */
-    giveFocus: function () {
-    },
-    /**
-     * Renders the buttons to append, in most cases, to the control panel (in
-     * the bottom left corner). When the action is rendered in a dialog, those
-     * buttons might be moved to the dialog's footer.
-     *
-     * @param {jQuery Node} $node
-     */
-    renderButtons: function ($node) {
-    },
-    /**
-     * This is the main method to customize the controlpanel content.
-     *
-     * @see updateContents method in ControlPanelRenderer for more info
-     *
-     * @param {Object} [status]
-     * @param {string} [status.title]
-     * @param {Object} [options]
-     * @param {boolean} [options.clear]
-     */
-    updateControlPanel: function (status, options) {
-        if (this._controlPanel) {
-            status = status || {};
-            status.title = status.title || this.getTitle();
-            this._controlPanel.updateContents(status, options || {});
-        }
-    },
-    // TODO: add hooks methods:
-    // - onRestoreHook (on_reverse_breadcrumbs)
+        /**
+         * If an action wants to use a control panel, it will be created and
+         * registered in this _controlPanel key (the widget).  The way this control
+         * panel is created is up to the implementation (so, view controllers or
+         * client actions may have different needs).
+         *
+         * Note that most of the time, this key should be set by the framework, not
+         * by the code of the client action.
+         */
+        _controlPanel: null,
 
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
+        /**
+         * String containing the title of the client action (which may be needed to
+         * display in the breadcrumbs zone of the control panel).
+         *
+         * @see _setTitle
+         */
+        _title: '',
 
-    /**
-     * @private
-     * @param {string} title
-     */
-    _setTitle: function (title) {
-        this._title = title;
-        this.updateControlPanel({title: this._title}, {clear: false});
-    },
-    /**
-     * FIXME: this logic should be rethought
-     *
-     * Handles a context request: provides to the caller the state of the
-     * current controller.
-     *
-     * @private
-     * @param {OdooEvent} ev
-     * @param {function} ev.data.callback used to send the requested state
-     */
-    _onGetControllerQueryParams: function (ev) {
-        ev.stopPropagation();
-        var state = this.getOwnedQueryParams();
-        ev.data.callback(state || {});
-    },
-};
+        /**
+         * Called each time the action is attached into the DOM.
+         */
+        on_attach_callback: function () { },
 
-return ActionMixin;
+        /**
+         * Called each time the action is detached from the DOM.
+         */
+        on_detach_callback: function () { },
 
+        /**
+         * @override
+         */
+        renderElement: function () {
+            this._super.apply(this, arguments);
+            if (this.contentTemplate) {
+                var content = core.qweb.render(this.contentTemplate, { widget: this });
+                this.$('.o_content').append(content);
+            }
+        },
+
+        /**
+         * Called by the action manager when action is restored (typically, when
+         * the user clicks on the action in the breadcrumb)
+         *
+         * @returns {Promise|undefined}
+         */
+        willRestore: function () { },
+
+        //---------------------------------------------------------------------
+        // Public
+        //---------------------------------------------------------------------
+
+        /**
+         * In some situations, we need confirmation from the controller that the
+         * current state can be destroyed without prejudice to the user.  For
+         * example, if the user has edited a form, maybe we should ask him if we
+         * can discard all his changes when we switch to another action.  In that
+         * case, the action manager will call this method.  If the returned
+         * promise is successfully resolved, then we can destroy the current action,
+         * otherwise, we need to stop.
+         *
+         * @returns {Promise} resolved if the action can be removed, rejected
+         *   otherwise
+         */
+        canBeRemoved: function () {
+            return Promise.resolve();
+        },
+
+        /**
+         * This function is called when the current state of the action
+         * should be known. For instance, if the action is a view controller,
+         * this may be useful to reinstantiate a view in the same state.
+         *
+         * Typically the state can (and should) be encoded in a query object of
+         * the form::
+         *
+         *     {
+         *          context: {...},
+         *          groupBy: [...],
+         *          domain = [...],
+         *          orderedBy = [...],
+         *     }
+         *
+         * where the context key can contain many information.
+         * This method is mainly called during the creation of a custom filter.
+         *
+         * @returns {Object}
+         */
+        getOwnedQueryParams: function () {
+            return {};
+        },
+
+        /**
+         * Returns a serializable state that will be pushed in the URL by
+         * the action manager, allowing the action to be restarted correctly
+         * upon refresh. This function should be overriden to add extra information.
+         * Note that some keys are reserved by the framework and will thus be
+         * ignored ('action', 'active_id', 'active_ids' and 'title', for all
+         * actions, and 'model' and 'view_type' for act_window actions).
+         *
+         * @returns {Object}
+         */
+        getState: function () {
+            return {};
+        },
+
+        /**
+         * Returns a title that may be displayed in the breadcrumb area.  For
+         * example, the name of the record (for a form view). This is actually
+         * important for the action manager: this is the way it is able to give
+         * the proper titles for other actions.
+         *
+         * @returns {string}
+         */
+        getTitle: function () {
+            return this._title;
+        },
+
+        /**
+         * Gives the focus to the action
+         */
+        giveFocus: function () { },
+
+        /**
+         * Renders the buttons to append, in most cases, to the control panel (in
+         * the bottom left corner). When the action is rendered in a dialog, those
+         * buttons might be moved to the dialog's footer.
+         *
+         * @param {jQuery Node} $node
+         */
+        renderButtons: function ($node) { },
+
+        /**
+         * This is the main method to customize the controlpanel content.
+         *
+         * @see updateContents method in ControlPanelRenderer for more info
+         *
+         * @param {Object} [status]
+         * @param {string} [status.title]
+         * @param {Object} [options]
+         * @param {boolean} [options.clear]
+         */
+        updateControlPanel: function (status, options) {
+            if (this._controlPanel) {
+                status = status || {};
+                status.title = status.title || this.getTitle();
+                this._controlPanel.updateContents(status, options || {});
+            }
+        },
+
+        //---------------------------------------------------------------------
+        // Private
+        //---------------------------------------------------------------------
+
+        /**
+         * @private
+         * @param {string} title
+         */
+        _setTitle: function (title) {
+            this._title = title;
+            this.updateControlPanel({ title: this._title }, { clear: false });
+        },
+
+        //---------------------------------------------------------------------
+        // Handlers
+        //---------------------------------------------------------------------
+
+        /**
+         * FIXME: this logic should be rethought
+         *
+         * Handles a context request: provides to the caller the state of the
+         * current controller.
+         *
+         * @private
+         * @param {OdooEvent} ev
+         * @param {function} ev.data.callback used to send the requested state
+         */
+        _onGetControllerQueryParams: function (ev) {
+            ev.stopPropagation();
+            var state = this.getOwnedQueryParams();
+            ev.data.callback(state || {});
+        },
+    };
+
+    return ActionMixin;
 });
diff --git a/addons/web/static/tests/helpers/qunit_asserts.js b/addons/web/static/tests/helpers/qunit_asserts.js
index bb4438eb4cc..a57154e416e 100644
--- a/addons/web/static/tests/helpers/qunit_asserts.js
+++ b/addons/web/static/tests/helpers/qunit_asserts.js
@@ -1,240 +1,241 @@
 odoo.define('web.qunit_asserts', function (require) {
-"use strict";
+    "use strict";
 
-/**
- * In this file, we extend QUnit by adding some specialized assertions. The goal
- * of these new assertions is twofold:
- * - ease of use: they should allow us to simplify some common complex assertions
- * - safer: these assertions will fail when some preconditions are not met.
- *
- * For example, the assert.isVisible assertion will also check that the target
- * matches exactly one element.
- */
+    /**
+     * In this file, we extend QUnit by adding some specialized assertions. The goal
+     * of these new assertions is twofold:
+     * - ease of use: they should allow us to simplify some common complex assertions
+     * - safer: these assertions will fail when some preconditions are not met.
+     *
+     * For example, the assert.isVisible assertion will also check that the target
+     * matches exactly one element.
+     */
 
-var Widget = require('web.Widget');
+    var Widget = require('web.Widget');
 
-//------------------------------------------------------------------------------
-// Private functions
-//------------------------------------------------------------------------------
+    //-------------------------------------------------------------------------
+    // Private functions
+    //-------------------------------------------------------------------------
 
-/**
- * Helper function, to check if a given element
- * - is unique (if it is a jquery node set)
- * - has (or has not) a css class
- *
- * @private
- * @param {Widget|jQuery|HTMLElement|owl.Component} w
- * @param {string} className
- * @param {boolean} shouldHaveClass
- * @param {string} [msg]
- */
-function _checkClass(w, className, shouldHaveClass, msg) {
-    if (w instanceof jQuery && w.length !== 1) {
-        const assertion = shouldHaveClass ? 'hasClass' : 'doesNotHaveClass';
-        QUnit.assert.ok(false, `Assertion '${assertion} ${className}' targets ${w.length} elements instead of 1`);
-    }
+    /**
+     * Helper function, to check if a given element
+     * - is unique (if it is a jquery node set)
+     * - has (or has not) a css class
+     *
+     * @private
+     * @param {Widget|jQuery|HTMLElement|owl.Component} w
+     * @param {string} className
+     * @param {boolean} shouldHaveClass
+     * @param {string} [msg]
+     */
+    function _checkClass(w, className, shouldHaveClass, msg) {
+        if (w instanceof jQuery && w.length !== 1) {
+            const assertion = shouldHaveClass ? 'hasClass' : 'doesNotHaveClass';
+            QUnit.assert.ok(false, `Assertion '${assertion} ${className}' targets ${w.length} elements instead of 1`);
+        }
 
-    const el = w instanceof Widget || w instanceof owl.Component ? w.el :
-              w instanceof jQuery ? w[0] : w;
-
-    msg = msg || `target should ${shouldHaveClass ? 'have' : 'not have'} class ${className}`;
-    const hasClass = className.split(" ").reduce((acc, cls) =>
-        acc && el.classList.contains(cls), true);
-    const condition = shouldHaveClass ? hasClass : !hasClass;
-    QUnit.assert.ok(condition, msg);
-}
-
-/**
- * Helper function, to check if a given element
- * - is unique (if it is a jquery node set)
- * - is (or not) visible
- *
- * @private
- * @param {Widget|jQuery|HTMLElement|owl.Component} w
- * @param {boolean} shouldBeVisible
- * @param {string} [msg]
- */
-function _checkVisible(w, shouldBeVisible, msg) {
-    if (w instanceof jQuery && w.length !== 1) {
-        const assertion = shouldHaveClass ? 'hasClass' : 'doesNotHaveClass';
-        QUnit.assert.ok(false, `Assertion '${assertion} ${className}' targets ${w.length} elements instead of 1`);
-    }
-
-    const el = w instanceof Widget || w instanceof owl.Component ? w.el :
+        const el = w instanceof Widget || w instanceof owl.Component ? w.el :
             w instanceof jQuery ? w[0] : w;
 
-    msg = msg || `target should ${shouldBeVisible ? '' : 'not'} be visible`;
-    let isVisible = el &&
-        el.offsetWidth &&
-        el.offsetHeight;
-    if (isVisible) {
-        // This computation is a little more heavy and we only want to perform it
-        // if the above assertion has failed.
-        const rect = el.getBoundingClientRect();
-        isVisible = rect.width + rect.height;
+        msg = msg || `target should ${shouldHaveClass ? 'have' : 'not have'} class ${className}`;
+        const hasClass = className.split(" ").reduce((acc, cls) =>
+            acc && el.classList.contains(cls), true);
+        const condition = shouldHaveClass ? hasClass : !hasClass;
+        QUnit.assert.ok(condition, msg);
     }
-    const condition = shouldBeVisible ? isVisible : !isVisible;
-    QUnit.assert.ok(condition, msg);
-}
 
-//------------------------------------------------------------------------------
-// Public functions
-//------------------------------------------------------------------------------
-
-/**
- * Checks that the target element (described by widget/jquery or html element)
- * contains exactly n matches for the selector.
- *
- * Example: assert.containsN(document.body, '.modal', 0)
- *
- * @param {Widget|jQuery|HTMLElement|owl.Component} w
- * @param {string} selector
- * @param {number} n
- * @param {string} [msg]
- */
-function containsN(w, selector, n, msg) {
-    if (typeof n !== 'number') {
-        throw new Error("containsN assert should be called with a number as third argument");
-    }
-    let matches = [];
-    if (w instanceof owl.Component) {
-        if (!w.el) {
-            throw new Error(`containsN assert with selector '${selector}' called on an unmounted component`);
+    /**
+     * Helper function, to check if a given element
+     * - is unique (if it is a jquery node set)
+     * - is (or not) visible
+     *
+     * @private
+     * @param {Widget|jQuery|HTMLElement|owl.Component} w
+     * @param {boolean} shouldBeVisible
+     * @param {string} [msg]
+     */
+    function _checkVisible(w, shouldBeVisible, msg) {
+        if (w instanceof jQuery && w.length !== 1) {
+            const assertion = shouldHaveClass ? 'hasClass' : 'doesNotHaveClass';
+            QUnit.assert.ok(false, `Assertion '${assertion} ${className}' targets ${w.length} elements instead of 1`);
         }
-        matches = w.el.querySelectorAll(selector);
-    } else {
-        const $el = w instanceof Widget ? w.$el :
+
+        const el = w instanceof Widget || w instanceof owl.Component ? w.el :
+            w instanceof jQuery ? w[0] : w;
+
+        msg = msg || `target should ${shouldBeVisible ? '' : 'not'} be visible`;
+        let isVisible = el &&
+            el.offsetWidth &&
+            el.offsetHeight;
+        if (isVisible) {
+            // This computation is a little more heavy and we only want to perform it
+            // if the above assertion has failed.
+            const rect = el.getBoundingClientRect();
+            isVisible = rect.width + rect.height;
+        }
+        const condition = shouldBeVisible ? isVisible : !isVisible;
+        QUnit.assert.ok(condition, msg);
+    }
+
+    //-------------------------------------------------------------------------
+    // Public functions
+    //-------------------------------------------------------------------------
+
+    /**
+     * Checks that the target element (described by widget/jquery or html element)
+     * contains exactly n matches for the selector.
+     *
+     * Example: assert.containsN(document.body, '.modal', 0)
+     *
+     * @param {Widget|jQuery|HTMLElement|owl.Component} w
+     * @param {string} selector
+     * @param {number} n
+     * @param {string} [msg]
+     */
+    function containsN(w, selector, n, msg) {
+        if (typeof n !== 'number') {
+            throw new Error("containsN assert should be called with a number as third argument");
+        }
+        let matches = [];
+        if (w instanceof owl.Component) {
+            if (!w.el) {
+                throw new Error(`containsN assert with selector '${selector}' called on an unmounted component`);
+            }
+            matches = w.el.querySelectorAll(selector);
+        } else {
+            const $el = w instanceof Widget ? w.$el :
+                w instanceof HTMLElement ? $(w) :
+                    w;  // jquery element
+            matches = $el.find(selector);
+        }
+        if (!msg) {
+            msg = `Selector '${selector}' should have exactly ${n} matches (inside the target)`;
+        }
+        QUnit.assert.strictEqual(matches.length, n, msg);
+    }
+
+    /**
+     * Checks that the target element (described by widget/jquery or html element)
+     * contains exactly 0 match for the selector.
+     *
+     * @param {Widget|jQuery|HTMLElement|owl.Component} w
+     * @param {string} selector
+     * @param {string} [msg]
+     */
+    function containsNone(w, selector, msg) {
+        containsN(w, selector, 0, msg);
+    }
+
+    /**
+     * Checks that the target element (described by widget/jquery or html element)
+     * contains exactly 1 match for the selector.
+     *
+     * @param {Widget|jQuery|HTMLElement|owl.Component} w
+     * @param {string} selector
+     * @param {string} [msg]
+     */
+    function containsOnce(w, selector, msg) {
+        containsN(w, selector, 1, msg);
+    }
+
+    /**
+     * Checks that the target element (described by widget/jquery or html element)
+     * - exists
+     * - is unique
+     * - has the given class (specified by className)
+     *
+     * Note that it uses the hasClass jQuery method, so it can be used to check the
+     * presence of more than one class ('some-class other-class'), but it is a
+     * little brittle, because it depends on the order of these classes:
+     *
+     *  div.a.b.c: has class 'a b c', but does not have class 'a c b'
+     *
+     * @param {Widget|jQuery|HTMLElement|owl.Component} w
+     * @param {string} className
+     * @param {string} [msg]
+     */
+    function hasClass(w, className, msg) {
+        _checkClass(w, className, true, msg);
+    }
+
+    /**
+     * Checks that the target element (described by widget/jquery or html element)
+     * - exists
+     * - is unique
+     * - does not have the given class (specified by className)
+     *
+     * @param {Widget|jQuery|HTMLElement|owl.Component} w
+     * @param {string} className
+     * @param {string} [msg]
+     */
+    function doesNotHaveClass(w, className, msg) {
+        _checkClass(w, className, false, msg);
+    }
+
+    /**
+     * Checks that the target element (described by widget/jquery or html element)
+     * - exists
+     * - is unique
+     * - has the given attribute with the proper value
+     *
+     * @param {Widget|jQuery|HTMLElement|owl.Component} w
+     * @param {string} attr
+     * @param {string} value
+     * @param {string} [msg]
+     */
+    function hasAttrValue(w, attr, value, msg) {
+        var $el = w instanceof Widget ? w.$el :
             w instanceof HTMLElement ? $(w) :
                 w;  // jquery element
-        matches = $el.find(selector);
+
+        if ($el.length !== 1) {
+            var descr = `hasAttrValue (${attr}: ${value})`;
+            QUnit.assert.ok(false,
+                `Assertion '${descr}' targets ${$el.length} elements instead of 1`
+            );
+        } else {
+            msg = msg || `attribute '${attr}' of target should be '${value}'`;
+            QUnit.assert.strictEqual($el.attr(attr), value, msg);
+        }
     }
-    if (!msg) {
-        msg = `Selector '${selector}' should have exactly ${n} matches (inside the target)`;
+
+    /**
+     * Checks that the target element (described by widget/jquery or html element)
+     * - exists
+     * - is visible (as far as jQuery can tell: not in display none, ...)
+     *
+     * @param {Widget|jQuery|HTMLElement|owl.Component} w
+     * @param {string} [msg]
+     */
+    function isVisible(w, msg) {
+        _checkVisible(w, true, msg);
     }
-    QUnit.assert.strictEqual(matches.length, n, msg);
-}
 
-/**
- * Checks that the target element (described by widget/jquery or html element)
- * contains exactly 1 match for the selector.
- *
- * @param {Widget|jQuery|HTMLElement|owl.Component} w
- * @param {string} selector
- * @param {string} [msg]
- */
-function containsOnce(w, selector, msg) {
-    containsN(w, selector, 1, msg);
-}
-
-/**
- * Checks that the target element (described by widget/jquery or html element)
- * contains exactly 0 match for the selector.
- *
- * @param {Widget|jQuery|HTMLElement|owl.Component} w
- * @param {string} selector
- * @param {string} [msg]
- */
-function containsNone(w, selector, msg) {
-    containsN(w, selector, 0, msg);
-}
-
-/**
- * Checks that the target element (described by widget/jquery or html element)
- * - exists
- * - is unique
- * - has the given class (specified by className)
- *
- * Note that it uses the hasClass jQuery method, so it can be used to check the
- * presence of more than one class ('some-class other-class'), but it is a
- * little brittle, because it depends on the order of these classes:
- *
- *  div.a.b.c: has class 'a b c', but does not have class 'a c b'
- *
- * @param {Widget|jQuery|HTMLElement|owl.Component} w
- * @param {string} className
- * @param {string} [msg]
- */
-function hasClass(w, className, msg) {
-    _checkClass(w, className, true, msg);
-}
-
-/**
- * Checks that the target element (described by widget/jquery or html element)
- * - exists
- * - is unique
- * - does not have the given class (specified by className)
- *
- * @param {Widget|jQuery|HTMLElement|owl.Component} w
- * @param {string} className
- * @param {string} [msg]
- */
-function doesNotHaveClass(w, className, msg) {
-    _checkClass(w, className, false, msg);
-}
-
-/**
- * Checks that the target element (described by widget/jquery or html element)
- * - exists
- * - is unique
- * - has the given attribute with the proper value
- *
- * @param {Widget|jQuery|HTMLElement|owl.Component} w
- * @param {string} attr
- * @param {string} value
- * @param {string} [msg]
- */
-function hasAttrValue(w, attr, value, msg) {
-    var $el = w instanceof Widget ? w.$el :
-              w instanceof HTMLElement ? $(w) :
-              w;  // jquery element
-
-    if ($el.length !== 1) {
-        var descr = `hasAttrValue (${attr}: ${value})`;
-        QUnit.assert.ok(false, `Assertion '${descr}' targets ${$el.length} elements instead of 1`);
-    } else {
-        msg = msg || `attribute '${attr}' of target should be '${value}'`;
-        QUnit.assert.strictEqual($el.attr(attr), value, msg);
+    /**
+     * Checks that the target element (described by widget/jquery or html element)
+     * - exists
+     * - is not visible (as far as jQuery can tell: display none, ...)
+     *
+     * @param {Widget|jQuery|HTMLElement|owl.Component} w
+     * @param {string} [msg]
+     */
+    function isNotVisible(w, msg) {
+        _checkVisible(w, false, msg);
     }
-}
 
-/**
- * Checks that the target element (described by widget/jquery or html element)
- * - exists
- * - is visible (as far as jQuery can tell: not in display none, ...)
- *
- * @param {Widget|jQuery|HTMLElement|owl.Component} w
- * @param {string} [msg]
- */
-function isVisible(w, msg) {
-    _checkVisible(w, true, msg);
-}
+    //-------------------------------------------------------------------------
+    // Exposed API
+    //-------------------------------------------------------------------------
 
-/**
- * Checks that the target element (described by widget/jquery or html element)
- * - exists
- * - is not visible (as far as jQuery can tell: display none, ...)
- *
- * @param {Widget|jQuery|HTMLElement|owl.Component} w
- * @param {string} [msg]
- */
-function isNotVisible(w, msg) {
-    _checkVisible(w, false, msg);
-}
+    QUnit.assert.containsN = containsN;
+    QUnit.assert.containsNone = containsNone;
+    QUnit.assert.containsOnce = containsOnce;
 
-//------------------------------------------------------------------------------
-// Exposed API
-//------------------------------------------------------------------------------
+    QUnit.assert.hasClass = hasClass;
+    QUnit.assert.doesNotHaveClass = doesNotHaveClass;
 
-QUnit.assert.containsOnce = containsOnce;
-QUnit.assert.containsNone = containsNone;
-QUnit.assert.containsN = containsN;
-
-QUnit.assert.hasClass = hasClass;
-QUnit.assert.doesNotHaveClass = doesNotHaveClass;
-
-QUnit.assert.hasAttrValue = hasAttrValue;
-
-QUnit.assert.isVisible = isVisible;
-QUnit.assert.isNotVisible = isNotVisible;
+    QUnit.assert.hasAttrValue = hasAttrValue;
 
+    QUnit.assert.isVisible = isVisible;
+    QUnit.assert.isNotVisible = isNotVisible;
 });
diff --git a/addons/web/static/tests/helpers/test_utils.js b/addons/web/static/tests/helpers/test_utils.js
index a9c07973566..f2b12eaf705 100644
--- a/addons/web/static/tests/helpers/test_utils.js
+++ b/addons/web/static/tests/helpers/test_utils.js
@@ -1,220 +1,219 @@
 odoo.define('web.test_utils', function (require) {
-"use strict";
+    "use strict";
 
-/**
- * Test Utils
- *
- * In this module, we define various utility functions to help simulate a mock
- * environment as close as possible as a real environment.  The main function is
- * certainly createView, which takes a bunch of parameters and give you back an
- * instance of a view, appended in the dom, ready to be tested.
- */
+    /**
+     * Test Utils
+     *
+     * In this module, we define various utility functions to help simulate a mock
+     * environment as close as possible as a real environment.  The main function is
+     * certainly createView, which takes a bunch of parameters and give you back an
+     * instance of a view, appended in the dom, ready to be tested.
+     */
 
-var ajax = require('web.ajax');
-var concurrency = require('web.concurrency');
-var core = require('web.core');
-var relationalFields = require('web.relational_fields');
-var session = require('web.session');
-var testUtilsCreate = require('web.test_utils_create');
-var testUtilsDom = require('web.test_utils_dom');
-var testUtilsFields = require('web.test_utils_fields');
-var testUtilsFile = require('web.test_utils_file');
-var testUtilsForm = require('web.test_utils_form');
-var testUtilsGraph = require('web.test_utils_graph');
-var testUtilsKanban = require('web.test_utils_kanban');
-var testUtilsMock = require('web.test_utils_mock');
-var testUtilsModal = require('web.test_utils_modal');
-var testUtilsPivot = require('web.test_utils_pivot');
-var tools = require('web.tools');
+    var ajax = require('web.ajax');
+    var concurrency = require('web.concurrency');
+    var core = require('web.core');
+    var relationalFields = require('web.relational_fields');
+    var session = require('web.session');
+    var testUtilsCreate = require('web.test_utils_create');
+    var testUtilsDom = require('web.test_utils_dom');
+    var testUtilsFields = require('web.test_utils_fields');
+    var testUtilsFile = require('web.test_utils_file');
+    var testUtilsForm = require('web.test_utils_form');
+    var testUtilsGraph = require('web.test_utils_graph');
+    var testUtilsKanban = require('web.test_utils_kanban');
+    var testUtilsMock = require('web.test_utils_mock');
+    var testUtilsModal = require('web.test_utils_modal');
+    var testUtilsPivot = require('web.test_utils_pivot');
+    var tools = require('web.tools');
 
 
-function deprecated(fn, type) {
-    var msg = `Helper 'testUtils.${fn.name}' is deprecated. ` +
-        `Please use 'testUtils.${type}.${fn.name}' instead.`;
-    return tools.deprecated(fn, msg);
-}
+    function deprecated(fn, type) {
+        var msg = `Helper 'testUtils.${fn.name}' is deprecated. ` +
+            `Please use 'testUtils.${type}.${fn.name}' instead.`;
+        return tools.deprecated(fn, msg);
+    }
 
-/**
- * Helper function, make a promise with a public resolve function. Note that
- * this is not standard and should not be used outside of tests...
- *
- * @returns {Promise + resolve and reject function}
- */
-function makeTestPromise() {
-    var resolve;
-    var reject;
-    var promise = new Promise(function (_resolve, _reject) {
-        resolve = _resolve;
-        reject = _reject;
-    });
-    promise.resolve = function () {
-        resolve.apply(null, arguments);
+    /**
+     * Helper function, make a promise with a public resolve function. Note that
+     * this is not standard and should not be used outside of tests...
+     *
+     * @returns {Promise + resolve and reject function}
+     */
+    function makeTestPromise() {
+        var resolve;
+        var reject;
+        var promise = new Promise(function (_resolve, _reject) {
+            resolve = _resolve;
+            reject = _reject;
+        });
+        promise.resolve = function () {
+            resolve.apply(null, arguments);
+            return promise;
+        };
+        promise.reject = function () {
+            reject.apply(null, arguments);
+            return promise;
+        };
         return promise;
-    };
-    promise.reject = function () {
-        reject.apply(null, arguments);
-        return promise;
-    };
-    return promise;
-}
+    }
 
-/**
- * Make a promise with public resolve and reject functions (see
- * @makeTestPromise). Perform an assert.step when the promise is
- * resolved/rejected.
- *
- * @param {Object} assert instance object with the assertion methods
- * @param {function} assert.step
- * @param {string} str message to pass to assert.step
- * @returns {Promise + resolve and reject function}
- */
-function makeTestPromiseWithAssert(assert, str) {
-    var prom = makeTestPromise();
-    prom.then(() => assert.step('ok ' + str)).catch(function () {});
-    prom.catch(() => assert.step('ko ' + str));
-    return prom;
-}
+    /**
+     * Make a promise with public resolve and reject functions (see
+     * @makeTestPromise). Perform an assert.step when the promise is
+     * resolved/rejected.
+     *
+     * @param {Object} assert instance object with the assertion methods
+     * @param {function} assert.step
+     * @param {string} str message to pass to assert.step
+     * @returns {Promise + resolve and reject function}
+     */
+    function makeTestPromiseWithAssert(assert, str) {
+        var prom = makeTestPromise();
+        prom.then(() => assert.step('ok ' + str)).catch(function () { });
+        prom.catch(() => assert.step('ko ' + str));
+        return prom;
+    }
 
-/**
- * Create a new promise that can be waited by the caller in order to execute
- * code after the next microtask tick and before the next jobqueue tick.
- *
- * @return {Promise} an already fulfilled promise
- */
-async function nextMicrotaskTick() {
-    return Promise.resolve();
-}
+    /**
+     * Create a new promise that can be waited by the caller in order to execute
+     * code after the next microtask tick and before the next jobqueue tick.
+     *
+     * @return {Promise} an already fulfilled promise
+     */
+    async function nextMicrotaskTick() {
+        return Promise.resolve();
+    }
 
-/**
- * Returns a promise that will be resolved after the tick after the
- * nextAnimationFrame
- *
- * This is usefull to guarantee that OWL has had the time to render
- *
- * @returns {Promise}
- */
-async function nextTick() {
-    return testUtilsDom.returnAfterNextAnimationFrame();
-}
+    /**
+     * Returns a promise that will be resolved after the tick after the
+     * nextAnimationFrame
+     *
+     * This is usefull to guarantee that OWL has had the time to render
+     *
+     * @returns {Promise}
+     */
+    async function nextTick() {
+        return testUtilsDom.returnAfterNextAnimationFrame();
+    }
 
-// Loading static files cannot be properly simulated when their real content is
-// really needed. This is the case for static XML files so we load them here,
-// before starting the qunit test suite.
-// (session.js is in charge of loading the static xml bundle and we also have
-// to load xml files that are normally lazy loaded by specific widgets).
-return Promise.all([
-    session.is_bound,
-    ajax.loadXML('/web/static/src/xml/debug.xml', core.qweb),
-    ajax.loadXML('/web/static/src/xml/dialog.xml', core.qweb),
-    ajax.loadXML('/web/static/src/xml/translation_dialog.xml', core.qweb),
-]).then(function () {
-    setTimeout(function () {
-        // jquery autocomplete refines the search in a setTimeout() parameterized
-        // with a delay, so we force this delay to 0 s.t. the dropdown is filtered
-        // directly on the next tick
-        relationalFields.FieldMany2One.prototype.AUTOCOMPLETE_DELAY = 0;
+    // Loading static files cannot be properly simulated when their real content is
+    // really needed. This is the case for static XML files so we load them here,
+    // before starting the qunit test suite.
+    // (session.js is in charge of loading the static xml bundle and we also have
+    // to load xml files that are normally lazy loaded by specific widgets).
+    return Promise.all([
+        session.is_bound,
+        ajax.loadXML('/web/static/src/xml/debug.xml', core.qweb),
+        ajax.loadXML('/web/static/src/xml/dialog.xml', core.qweb),
+        ajax.loadXML('/web/static/src/xml/translation_dialog.xml', core.qweb),
+    ]).then(function () {
+        setTimeout(function () {
+            // jquery autocomplete refines the search in a setTimeout() parameterized
+            // with a delay, so we force this delay to 0 s.t. the dropdown is filtered
+            // directly on the next tick
+            relationalFields.FieldMany2One.prototype.AUTOCOMPLETE_DELAY = 0;
 
-        // this is done with the hope that tests are
-        // only started all together...
-        QUnit.start();
-    }, 0);
-    return {
-        mock: {
-            addMockEnvironment: testUtilsMock.addMockEnvironment,
-            getMockedOwlEnv: testUtilsMock.getMockedOwlEnv,
-            intercept: testUtilsMock.intercept,
-            patch: testUtilsMock.patch,
-            patchDate: testUtilsMock.patchDate,
-            unpatch: testUtilsMock.unpatch,
-            fieldsViewGet: testUtilsMock.fieldsViewGet,
-            patchSetTimeout: testUtilsMock.patchSetTimeout,
-        },
-        dom: {
-            triggerKeypressEvent: testUtilsDom.triggerKeypressEvent,
-            triggerMouseEvent: testUtilsDom.triggerMouseEvent,
-            triggerPositionalMouseEvent: testUtilsDom.triggerPositionalMouseEvent,
-            dragAndDrop: testUtilsDom.dragAndDrop,
-            openDatepicker: testUtilsDom.openDatepicker,
-            click: testUtilsDom.click,
-            clickFirst: testUtilsDom.clickFirst,
-            clickLast: testUtilsDom.clickLast,
-            triggerEvents: testUtilsDom.triggerEvents,
-            triggerEvent: testUtilsDom.triggerEvent,
-        },
-        form: {
-            clickEdit: testUtilsForm.clickEdit,
-            clickSave: testUtilsForm.clickSave,
-            clickCreate: testUtilsForm.clickCreate,
-            clickDiscard: testUtilsForm.clickDiscard,
-            reload: testUtilsForm.reload,
-        },
-        graph: {
-            reload: testUtilsGraph.reload,
-        },
-        kanban: {
-            reload: testUtilsKanban.reload,
-            clickCreate: testUtilsKanban.clickCreate,
-            quickCreate: testUtilsKanban.quickCreate,
-            toggleGroupSettings: testUtilsKanban.toggleGroupSettings,
-            toggleRecordDropdown: testUtilsKanban.toggleRecordDropdown,
-        },
-        modal: {
-            clickButton: testUtilsModal.clickButton,
-        },
-        pivot: {
-            clickMeasure: testUtilsPivot.clickMeasure,
-            toggleMeasuresDropdown: testUtilsPivot.toggleMeasuresDropdown,
-            reload: testUtilsPivot.reload,
-        },
-        fields: {
-            many2one: {
-                clickOpenDropdown: testUtilsFields.clickOpenM2ODropdown,
-                clickHighlightedItem: testUtilsFields.clickM2OHighlightedItem,
-                clickItem: testUtilsFields.clickM2OItem,
-                searchAndClickItem: testUtilsFields.searchAndClickM2OItem,
+            // this is done with the hope that tests are
+            // only started all together...
+            QUnit.start();
+        }, 0);
+        return {
+            mock: {
+                addMockEnvironment: testUtilsMock.addMockEnvironment,
+                getMockedOwlEnv: testUtilsMock.getMockedOwlEnv,
+                intercept: testUtilsMock.intercept,
+                patch: testUtilsMock.patch,
+                patchDate: testUtilsMock.patchDate,
+                unpatch: testUtilsMock.unpatch,
+                fieldsViewGet: testUtilsMock.fieldsViewGet,
+                patchSetTimeout: testUtilsMock.patchSetTimeout,
+            },
+            dom: {
+                triggerKeypressEvent: testUtilsDom.triggerKeypressEvent,
+                triggerMouseEvent: testUtilsDom.triggerMouseEvent,
+                triggerPositionalMouseEvent: testUtilsDom.triggerPositionalMouseEvent,
+                dragAndDrop: testUtilsDom.dragAndDrop,
+                openDatepicker: testUtilsDom.openDatepicker,
+                click: testUtilsDom.click,
+                clickFirst: testUtilsDom.clickFirst,
+                clickLast: testUtilsDom.clickLast,
+                triggerEvents: testUtilsDom.triggerEvents,
+                triggerEvent: testUtilsDom.triggerEvent,
+            },
+            form: {
+                clickEdit: testUtilsForm.clickEdit,
+                clickSave: testUtilsForm.clickSave,
+                clickCreate: testUtilsForm.clickCreate,
+                clickDiscard: testUtilsForm.clickDiscard,
+                reload: testUtilsForm.reload,
+            },
+            graph: {
+                reload: testUtilsGraph.reload,
+            },
+            kanban: {
+                reload: testUtilsKanban.reload,
+                clickCreate: testUtilsKanban.clickCreate,
+                quickCreate: testUtilsKanban.quickCreate,
+                toggleGroupSettings: testUtilsKanban.toggleGroupSettings,
+                toggleRecordDropdown: testUtilsKanban.toggleRecordDropdown,
+            },
+            modal: {
+                clickButton: testUtilsModal.clickButton,
+            },
+            pivot: {
+                clickMeasure: testUtilsPivot.clickMeasure,
+                toggleMeasuresDropdown: testUtilsPivot.toggleMeasuresDropdown,
+                reload: testUtilsPivot.reload,
+            },
+            fields: {
+                many2one: {
+                    clickOpenDropdown: testUtilsFields.clickOpenM2ODropdown,
+                    clickHighlightedItem: testUtilsFields.clickM2OHighlightedItem,
+                    clickItem: testUtilsFields.clickM2OItem,
+                    searchAndClickItem: testUtilsFields.searchAndClickM2OItem,
+                },
+                editInput: testUtilsFields.editInput,
+                editSelect: testUtilsFields.editSelect,
+                editAndTrigger: testUtilsFields.editAndTrigger,
+                triggerKey: testUtilsFields.triggerKey,
+                triggerKeydown: testUtilsFields.triggerKeydown,
+                triggerKeyup: testUtilsFields.triggerKeyup,
+            },
+            file: {
+                createFile: testUtilsFile.createFile,
+                dragoverFile: testUtilsFile.dragoverFile,
+                dropFile: testUtilsFile.dropFile,
+                dropFiles: testUtilsFile.dropFiles,
             },
-            editInput: testUtilsFields.editInput,
-            editSelect: testUtilsFields.editSelect,
-            editAndTrigger: testUtilsFields.editAndTrigger,
-            triggerKey: testUtilsFields.triggerKey,
-            triggerKeydown: testUtilsFields.triggerKeydown,
-            triggerKeyup: testUtilsFields.triggerKeyup,
-        },
-        file: {
-            createFile: testUtilsFile.createFile,
-            dragoverFile: testUtilsFile.dragoverFile,
-            dropFile: testUtilsFile.dropFile,
-            dropFiles: testUtilsFile.dropFiles,
-        },
 
-        createActionManager: testUtilsCreate.createActionManager,
-        createDebugManager: testUtilsCreate.createDebugManager,
-        createAsyncView: testUtilsCreate.createView,
-        createCalendarView: testUtilsCreate.createCalendarView,
-        createControlPanel: testUtilsCreate.createControlPanel,
-        createView: testUtilsCreate.createView,
-        createModel: testUtilsCreate.createModel,
-        createParent: testUtilsCreate.createParent,
-        makeTestPromise: makeTestPromise,
-        makeTestPromiseWithAssert: makeTestPromiseWithAssert,
-        nextMicrotaskTick: nextMicrotaskTick,
-        nextTick: nextTick,
-        prepareTarget: testUtilsCreate.prepareTarget,
-        returnAfterNextAnimationFrame: testUtilsDom.returnAfterNextAnimationFrame,
-
-        // backward-compatibility
-        addMockEnvironment: deprecated(testUtilsMock.addMockEnvironment, 'mock'),
-        dragAndDrop: deprecated(testUtilsDom.dragAndDrop, 'dom'),
-        fieldsViewGet: deprecated(testUtilsMock.fieldsViewGet, 'mock'),
-        intercept: deprecated(testUtilsMock.intercept, 'mock'),
-        openDatepicker: deprecated(testUtilsDom.openDatepicker, 'dom'),
-        patch: deprecated(testUtilsMock.patch, 'mock'),
-        patchDate: deprecated(testUtilsMock.patchDate, 'mock'),
-        triggerKeypressEvent: deprecated(testUtilsDom.triggerKeypressEvent, 'dom'),
-        triggerMouseEvent: deprecated(testUtilsDom.triggerMouseEvent, 'dom'),
-        triggerPositionalMouseEvent: deprecated(testUtilsDom.triggerPositionalMouseEvent, 'dom'),
-        unpatch: deprecated(testUtilsMock.unpatch, 'mock'),
-    };
-});
+            createActionManager: testUtilsCreate.createActionManager,
+            createDebugManager: testUtilsCreate.createDebugManager,
+            createAsyncView: testUtilsCreate.createView,
+            createCalendarView: testUtilsCreate.createCalendarView,
+            createControlPanel: testUtilsCreate.createControlPanel,
+            createView: testUtilsCreate.createView,
+            createModel: testUtilsCreate.createModel,
+            createParent: testUtilsCreate.createParent,
+            makeTestPromise: makeTestPromise,
+            makeTestPromiseWithAssert: makeTestPromiseWithAssert,
+            nextMicrotaskTick: nextMicrotaskTick,
+            nextTick: nextTick,
+            prepareTarget: testUtilsCreate.prepareTarget,
+            returnAfterNextAnimationFrame: testUtilsDom.returnAfterNextAnimationFrame,
 
+            // backward-compatibility
+            addMockEnvironment: deprecated(testUtilsMock.addMockEnvironment, 'mock'),
+            dragAndDrop: deprecated(testUtilsDom.dragAndDrop, 'dom'),
+            fieldsViewGet: deprecated(testUtilsMock.fieldsViewGet, 'mock'),
+            intercept: deprecated(testUtilsMock.intercept, 'mock'),
+            openDatepicker: deprecated(testUtilsDom.openDatepicker, 'dom'),
+            patch: deprecated(testUtilsMock.patch, 'mock'),
+            patchDate: deprecated(testUtilsMock.patchDate, 'mock'),
+            triggerKeypressEvent: deprecated(testUtilsDom.triggerKeypressEvent, 'dom'),
+            triggerMouseEvent: deprecated(testUtilsDom.triggerMouseEvent, 'dom'),
+            triggerPositionalMouseEvent: deprecated(testUtilsDom.triggerPositionalMouseEvent, 'dom'),
+            unpatch: deprecated(testUtilsMock.unpatch, 'mock'),
+        };
+    });
 });
diff --git a/addons/web/static/tests/helpers/test_utils_create.js b/addons/web/static/tests/helpers/test_utils_create.js
index 684485347a4..717b845e80e 100644
--- a/addons/web/static/tests/helpers/test_utils_create.js
+++ b/addons/web/static/tests/helpers/test_utils_create.js
@@ -1,411 +1,411 @@
 odoo.define('web.test_utils_create', function (require) {
-"use strict";
+    "use strict";
 
-/**
- * Create Test Utils
- *
- * This module defines various utility functions to help creating mock widgets
- *
- * Note that all methods defined in this module are exported in the main
- * testUtils file.
- */
+    /**
+     * Create Test Utils
+     *
+     * This module defines various utility functions to help creating mock widgets
+     *
+     * Note that all methods defined in this module are exported in the main
+     * testUtils file.
+     */
 
-var ActionManager = require('web.ActionManager');
-var config = require('web.config');
-var ControlPanelView = require('web.ControlPanelView');
-var concurrency = require('web.concurrency');
-var DebugManager = require('web.DebugManager.Backend');
-var dom = require('web.dom');
-var testUtilsMock = require('web.test_utils_mock');
-var Widget = require('web.Widget');
+    var ActionManager = require('web.ActionManager');
+    var config = require('web.config');
+    var ControlPanelView = require('web.ControlPanelView');
+    var concurrency = require('web.concurrency');
+    var DebugManager = require('web.DebugManager.Backend');
+    var dom = require('web.dom');
+    var testUtilsMock = require('web.test_utils_mock');
+    var Widget = require('web.Widget');
 
-/**
- * create and return an instance of ActionManager with all rpcs going through a
- * mock method using the data, actions and archs objects as sources.
- *
- * @param {Object} [params]
- * @param {Object} [params.actions] the actions given to the mock server
- * @param {Object} [params.archs] this archs given to the mock server
- * @param {Object} [params.data] the business data given to the mock server
- * @param {function} [params.mockRPC]
- * @returns {ActionManager}
- */
-async function createActionManager(params) {
-    params = params || {};
-    const target = prepareTarget(params.debug);
+    /**
+     * create and return an instance of ActionManager with all rpcs going through a
+     * mock method using the data, actions and archs objects as sources.
+     *
+     * @param {Object} [params]
+     * @param {Object} [params.actions] the actions given to the mock server
+     * @param {Object} [params.archs] this archs given to the mock server
+     * @param {Object} [params.data] the business data given to the mock server
+     * @param {function} [params.mockRPC]
+     * @returns {ActionManager}
+     */
+    async function createActionManager(params) {
+        params = params || {};
+        const target = prepareTarget(params.debug);
 
-    var widget = new Widget();
-    // when 'document' addon is installed, the sidebar does a 'search_read' on
-    // model 'ir_attachment' each time a record is open, so we monkey-patch
-    // 'mockRPC' to mute those RPCs, so that the tests can be written uniformly,
-    // whether or not 'document' is installed
-    var mockRPC = params.mockRPC;
-    _.extend(params, {
-        mockRPC: function (route, args) {
-            if (args.model === 'ir.attachment') {
-                return Promise.resolve([]);
-            }
-            if (mockRPC) {
-                return mockRPC.apply(this, arguments);
-            }
-            return this._super.apply(this, arguments);
-        },
-    });
-    testUtilsMock.addMockEnvironment(widget, _.defaults(params, { debounce: false }));
-    await widget.prependTo(target);
-    widget.$el.addClass('o_web_client');
-    if (config.device.isMobile) {
-        widget.$el.addClass('o_touch_device');
-    }
-
-    var userContext = params.context && params.context.user_context || {};
-    var actionManager = new ActionManager(widget, userContext);
-
-    var originalDestroy = ActionManager.prototype.destroy;
-    actionManager.destroy = function () {
-        actionManager.destroy = originalDestroy;
-        widget.destroy();
-    };
-    var fragment = document.createDocumentFragment();
-    return actionManager.appendTo(fragment).then(function () {
-        dom.append(widget.$el, fragment, {
-            callbacks: [{ widget: actionManager }],
-            in_DOM: true,
-        });
-        return actionManager;
-    });
-}
-
-/**
- * create a view from various parameters.  Here, a view means a javascript
- * instance of an AbstractView class, such as a form view, a list view or a
- * kanban view.
- *
- * It returns the instance of the view, properly created, with all rpcs going
- * through a mock method using the data object as source, and already loaded/
- * started.
- *
- * @param {Object} params
- * @param {string} params.arch the xml (arch) of the view to be instantiated
- * @param {any[]} [params.domain] the initial domain for the view
- * @param {Object} [params.context] the initial context for the view
- * @param {string[]} [params.groupBy] the initial groupBy for the view
- * @param {integer} [params.fieldDebounce=0] the debounce value to use for the
- *   duration of the test.
- * @param {AbstractView} params.View the class that will be instantiated
- * @param {string} params.model a model name, will be given to the view
- * @param {Object} params.intercepts an object with event names as key, and
- *   callback as value.  Each key,value will be used to intercept the event.
- *   Note that this is particularly useful if you want to intercept events going
- *   up in the init process of the view, because there are no other way to do it
- *   after this method returns
- *  @param {Boolean} [params.doNotDisableAHref=false] will not preventDefault on the A elements of the view if true.
- *    Default is false.
- * @returns {Promise<AbstractController>} resolves with the instance of the view
- */
-async function createView(params) {
-    const target = prepareTarget(params.debug);
-    var widget = new Widget();
-    // reproduce the DOM environment of views
-    var $webClient = $('<div>').addClass('o_web_client').prependTo(target);
-    var $actionManager = $('<div>').addClass('o_action_manager').appendTo($webClient);
-
-
-    // add mock environment: mock server, session, fieldviewget, ...
-    var mockServer = testUtilsMock.addMockEnvironment(widget, params);
-    var viewInfo = testUtilsMock.fieldsViewGet(mockServer, params);
-
-    // create the view
-    var View = params.View;
-    var viewOptions = _.defaults({}, params.viewOptions, {
-        modelName: params.model || 'foo',
-        ids: 'res_id' in params ? [params.res_id] : undefined,
-        currentId: 'res_id' in params ? params.res_id : undefined,
-        domain: params.domain || [],
-        context: params.context || {},
-        hasSidebar: false,
-    });
-    // patch the View to handle the groupBy given in params, as we can't give it
-    // in init (unlike the domain and context which can be set in the action)
-    testUtilsMock.patch(View, {
-        _updateMVCParams: function () {
-            this._super.apply(this, arguments);
-            this.loadParams.groupedBy = params.groupBy || viewOptions.groupBy || [];
-            testUtilsMock.unpatch(View);
-        },
-    });
-    if ('hasSelectors' in params) {
-        viewOptions.hasSelectors = params.hasSelectors;
-    }
-
-    var view;
-    if (viewInfo.type === 'controlpanel' || viewInfo.type === 'search') {
-        // TODO: probably needs to create an helper just for that
-        view = new params.View({
-            viewInfo: viewInfo,
-            modelName: params.model || 'foo',
-        });
-    } else {
-        viewOptions.controlPanelFieldsView = testUtilsMock.fieldsViewGet(mockServer, {
-            arch: params.archs && params.archs[params.model + ',false,search'] || '<search/>',
-            fields: viewInfo.fields,
-            model: params.model,
-        });
-        view = new params.View(viewInfo, viewOptions);
-    }
-
-    if (params.interceptsPropagate) {
-        _.each(params.interceptsPropagate, function (cb, name) {
-            testUtilsMock.intercept(widget, name, cb, true);
-        });
-    }
-
-    return view.getController(widget).then(function (view) {
-        // override the view's 'destroy' so that it calls 'destroy' on the widget
-        // instead, as the widget is the parent of the view and the mockServer.
-        view.__destroy = view.destroy;
-        view.destroy = function () {
-            // remove the override to properly destroy the view and its children
-            // when it will be called the second time (by its parent)
-            delete view.destroy;
-            widget.destroy();
-            $webClient.remove();
-        };
-
-        // render the view in a fragment as they must be able to render correctly
-        // without being in the DOM
-        var fragment = document.createDocumentFragment();
-        return view.appendTo(fragment).then( () => {
-            dom.prepend($actionManager, fragment, {
-                callbacks: [{ widget: view }],
-                in_DOM: true,
-            });
-
-            if (!params.doNotDisableAHref) {
-                [...view.el.getElementsByTagName('A')].forEach((elem) => {
-                    elem.addEventListener('click', (ev) => {
-                        ev.preventDefault();
-                    });
-                });
-            }
-            return view;
-        });
-    });
-}
-
-/**
- * Similar as createView, but specific for calendar views. Some calendar
- * tests need to trigger positional clicks on the DOM produced by fullcalendar.
- * Those tests must use this helper with option positionalClicks set to true.
- * This will move the rendered calendar to the body (required to do positional
- * clicks), and wait for a setTimeout(0) before returning, because fullcalendar
- * makes the calendar scroll to 6:00 in a setTimeout(0), which might have an
- * impact according to where we want to trigger positional clicks.
- *
- * @param {Object} params see @createView
- * @param {Object} [options]
- * @param {boolean} [options.positionalClicks=false]
- * @returns {Promise<CalendarController>}
- */
-async function createCalendarView(params, options) {
-    var calendar = await createView(params);
-    if (!options || !options.positionalClicks) {
-        return calendar;
-    }
-    var $view = $('#qunit-fixture').contents();
-    $view.prependTo('body');
-    var destroy = calendar.destroy;
-    calendar.destroy = function () {
-        $view.remove();
-        destroy();
-    };
-    await concurrency.delay(0);
-    return calendar;
-}
-
-/**
- * create a controlPanel from various parameters.
- *
- * It returns an instance of ControlPanelController
- *
- * @param {Object} [params={}]
- * @param {Object} [params.action={}]
- * @param {Object} [params.context={}]
- * @param {string} [params.domain=[]]
- * @param {integer} [params.fieldDebounce=0] the debounce value to use for the
- *   duration of the test.
- * @param {Object} params.intercepts an object with event names as key, and
- *   callback as value.  Each key,value will be used to intercept the event.
- *   Note that this is particularly useful if you want to intercept events going
- *   up in the init process of the view, because there are no other way to do it
- *   after this method returns
- * @param {string} [params.modelName]
- * @param {string[]} [params.searchMenuTypes = ['filter', 'groupBy', 'favorite']]
- *   determines search menus displayed.
- * @param {string} [params.template] the QWeb template to render
- * @param {Object} [params.viewInfo={arch: '<controlpanel/>', fields: {}}]
-     a controlpanel (or search) fieldsview
- * @param {string} [params.viewInfo.arch]
- * @param {boolean} [params.context.no_breadcrumbs=false] if set to true,
- *   breadcrumbs won't be rendered
- * @param {boolean} [params.withBreadcrumbs=true] if set to false,
- *   breadcrumbs won't be rendered
- * @param {boolean} [params.withSearchBar=true] if set to false, no default
- *   search bar will be rendered
- *
- * @returns {Promise<ControlPanel>} resolves with an instance of the ControlPanelController
- */
-function createControlPanel(params) {
-    params = params || {};
-    const target = prepareTarget(params.debug);
-    // reproduce the DOM environment of a view control panel
-    var $webClient = $('<div>').addClass('o_web_client').prependTo(target);
-    var $actionManager = $('<div>').addClass('o_action_manager').appendTo($webClient);
-    var $action = $('<div>').addClass('o_action').appendTo($actionManager);
-
-    var widget = new Widget();
-    // add mock environment: mock server, session, fieldviewget, ...
-    var mockServer = testUtilsMock.addMockEnvironment(widget, params);
-    if (!params.viewInfo) {
-        try {
-            params.viewInfo = testUtilsMock.fieldsViewGet(mockServer, params);
-        } catch (e) {
-            // if an error occurs we keep params.viewInfo undefined.
-            // It will be set to {arch: '<controlpanel/>', fields: {}} in
-            // ControlPanelView init function.
-        }
-    }
-
-    var viewOptions = _.defaults({}, params.viewOptions, {
-        context: params.context,
-        modelName: params.model,
-        searchMenuTypes: params.searchMenuTypes,
-        viewInfo: params.viewInfo,
-    });
-    var controlPanelView = new ControlPanelView(viewOptions);
-    return controlPanelView.getController(widget).then(function (controlPanel) {
-        // override the controlPanel's 'destroy' so that it calls 'destroy' on
-        // the widget instead, as the widget is the parent of the controlPanel
-        // and the mockServer.
-        controlPanel.__destroy = controlPanel.destroy;
-        controlPanel.destroy = function () {
-            // remove the override to properly destroy the controlPanel and its
-            // children when it will be called the second time (by its parent)
-            delete controlPanel.destroy;
-            widget.destroy();
-            $webClient.remove();
-        };
-
-        // render the controlPanel in a fragment as it must be able to render
-        // correctly without being in the DOM
-        var fragment = document.createDocumentFragment();
-        return controlPanel.appendTo(fragment).then(function () {
-            dom.prepend($action, fragment, {
-                callbacks: [{ widget: controlPanel }],
-                in_DOM: true,
-            });
-            return controlPanel;
-        });
-    });
-}
-/**
- * Create and return an instance of DebugManager with all rpcs going through a
- * mock method, assuming that the user has access rights, and is an admin.
- *
- * @param {Object} [params={}]
- */
-var createDebugManager = function (params) {
-    params = params || {};
-    var mockRPC = params.mockRPC;
-    _.extend(params, {
-        mockRPC: function (route, args) {
-            if (args.method === 'check_access_rights') {
-                return Promise.resolve(true);
-            }
-            if (args.method === 'xmlid_to_res_id') {
-                return Promise.resolve(true);
-            }
-            if (mockRPC) {
-                return mockRPC.apply(this, arguments);
-            }
-            return this._super.apply(this, arguments);
-        },
-        session: {
-            user_has_group: function (group) {
-                if (group === 'base.group_no_one') {
-                    return Promise.resolve(true);
+        var widget = new Widget();
+        // when 'document' addon is installed, the sidebar does a 'search_read' on
+        // model 'ir_attachment' each time a record is open, so we monkey-patch
+        // 'mockRPC' to mute those RPCs, so that the tests can be written uniformly,
+        // whether or not 'document' is installed
+        var mockRPC = params.mockRPC;
+        _.extend(params, {
+            mockRPC: function (route, args) {
+                if (args.model === 'ir.attachment') {
+                    return Promise.resolve([]);
+                }
+                if (mockRPC) {
+                    return mockRPC.apply(this, arguments);
                 }
                 return this._super.apply(this, arguments);
             },
-        },
-    });
-    var debugManager = new DebugManager();
-    testUtilsMock.addMockEnvironment(debugManager, params);
-    return debugManager;
-};
+        });
+        testUtilsMock.addMockEnvironment(widget, _.defaults(params, { debounce: false }));
+        await widget.prependTo(target);
+        widget.$el.addClass('o_web_client');
+        if (config.device.isMobile) {
+            widget.$el.addClass('o_touch_device');
+        }
 
-/**
- * create a model from given parameters.
- *
- * @param {Object} params This object will be given to addMockEnvironment, so
- *   any parameters from that method applies
- * @param {Class} params.Model the model class to use
- * @returns {Model}
- */
-function createModel(params) {
-    var widget = new Widget();
+        var userContext = params.context && params.context.user_context || {};
+        var actionManager = new ActionManager(widget, userContext);
 
-    var model = new params.Model(widget);
+        var originalDestroy = ActionManager.prototype.destroy;
+        actionManager.destroy = function () {
+            actionManager.destroy = originalDestroy;
+            widget.destroy();
+        };
+        var fragment = document.createDocumentFragment();
+        return actionManager.appendTo(fragment).then(function () {
+            dom.append(widget.$el, fragment, {
+                callbacks: [{ widget: actionManager }],
+                in_DOM: true,
+            });
+            return actionManager;
+        });
+    }
 
-    testUtilsMock.addMockEnvironment(widget, params);
+    /**
+     * Similar as createView, but specific for calendar views. Some calendar
+     * tests need to trigger positional clicks on the DOM produced by fullcalendar.
+     * Those tests must use this helper with option positionalClicks set to true.
+     * This will move the rendered calendar to the body (required to do positional
+     * clicks), and wait for a setTimeout(0) before returning, because fullcalendar
+     * makes the calendar scroll to 6:00 in a setTimeout(0), which might have an
+     * impact according to where we want to trigger positional clicks.
+     *
+     * @param {Object} params see @createView
+     * @param {Object} [options]
+     * @param {boolean} [options.positionalClicks=false]
+     * @returns {Promise<CalendarController>}
+     */
+    async function createCalendarView(params, options) {
+        var calendar = await createView(params);
+        if (!options || !options.positionalClicks) {
+            return calendar;
+        }
+        var $view = $('#qunit-fixture').contents();
+        $view.prependTo('body');
+        var destroy = calendar.destroy;
+        calendar.destroy = function () {
+            $view.remove();
+            destroy();
+        };
+        await concurrency.delay(0);
+        return calendar;
+    }
 
-    // override the model's 'destroy' so that it calls 'destroy' on the widget
-    // instead, as the widget is the parent of the model and the mockServer.
-    model.destroy = function () {
-        // remove the override to properly destroy the model when it will be
-        // called the second time (by its parent)
-        delete model.destroy;
-        widget.destroy();
+    /**
+     * create a controlPanel from various parameters.
+     *
+     * It returns an instance of ControlPanelController
+     *
+     * @param {Object} [params={}]
+     * @param {Object} [params.action={}]
+     * @param {Object} [params.context={}]
+     * @param {string} [params.domain=[]]
+     * @param {integer} [params.fieldDebounce=0] the debounce value to use for the
+     *   duration of the test.
+     * @param {Object} params.intercepts an object with event names as key, and
+     *   callback as value.  Each key,value will be used to intercept the event.
+     *   Note that this is particularly useful if you want to intercept events going
+     *   up in the init process of the view, because there are no other way to do it
+     *   after this method returns
+     * @param {string} [params.modelName]
+     * @param {string[]} [params.searchMenuTypes = ['filter', 'groupBy', 'favorite']]
+     *   determines search menus displayed.
+     * @param {string} [params.template] the QWeb template to render
+     * @param {Object} [params.viewInfo={arch: '<controlpanel/>', fields: {}}]
+         a controlpanel (or search) fieldsview
+     * @param {string} [params.viewInfo.arch]
+     * @param {boolean} [params.context.no_breadcrumbs=false] if set to true,
+     *   breadcrumbs won't be rendered
+     * @param {boolean} [params.withBreadcrumbs=true] if set to false,
+     *   breadcrumbs won't be rendered
+     * @param {boolean} [params.withSearchBar=true] if set to false, no default
+     *   search bar will be rendered
+     *
+     * @returns {Promise<ControlPanel>} resolves with an instance of the ControlPanelController
+     */
+    function createControlPanel(params) {
+        params = params || {};
+        const target = prepareTarget(params.debug);
+        // reproduce the DOM environment of a view control panel
+        var $webClient = $('<div>').addClass('o_web_client').prependTo(target);
+        var $actionManager = $('<div>').addClass('o_action_manager').appendTo($webClient);
+        var $action = $('<div>').addClass('o_action').appendTo($actionManager);
+
+        var widget = new Widget();
+        // add mock environment: mock server, session, fieldviewget, ...
+        var mockServer = testUtilsMock.addMockEnvironment(widget, params);
+        if (!params.viewInfo) {
+            try {
+                params.viewInfo = testUtilsMock.fieldsViewGet(mockServer, params);
+            } catch (e) {
+                // if an error occurs we keep params.viewInfo undefined.
+                // It will be set to {arch: '<controlpanel/>', fields: {}} in
+                // ControlPanelView init function.
+            }
+        }
+
+        var viewOptions = _.defaults({}, params.viewOptions, {
+            context: params.context,
+            modelName: params.model,
+            searchMenuTypes: params.searchMenuTypes,
+            viewInfo: params.viewInfo,
+        });
+        var controlPanelView = new ControlPanelView(viewOptions);
+        return controlPanelView.getController(widget).then(function (controlPanel) {
+            // override the controlPanel's 'destroy' so that it calls 'destroy' on
+            // the widget instead, as the widget is the parent of the controlPanel
+            // and the mockServer.
+            controlPanel.__destroy = controlPanel.destroy;
+            controlPanel.destroy = function () {
+                // remove the override to properly destroy the controlPanel and its
+                // children when it will be called the second time (by its parent)
+                delete controlPanel.destroy;
+                widget.destroy();
+                $webClient.remove();
+            };
+
+            // render the controlPanel in a fragment as it must be able to render
+            // correctly without being in the DOM
+            var fragment = document.createDocumentFragment();
+            return controlPanel.appendTo(fragment).then(function () {
+                dom.prepend($action, fragment, {
+                    callbacks: [{ widget: controlPanel }],
+                    in_DOM: true,
+                });
+                return controlPanel;
+            });
+        });
+    }
+
+    /**
+     * Create and return an instance of DebugManager with all rpcs going through a
+     * mock method, assuming that the user has access rights, and is an admin.
+     *
+     * @param {Object} [params={}]
+     */
+    var createDebugManager = function (params) {
+        params = params || {};
+        var mockRPC = params.mockRPC;
+        _.extend(params, {
+            mockRPC: function (route, args) {
+                if (args.method === 'check_access_rights') {
+                    return Promise.resolve(true);
+                }
+                if (args.method === 'xmlid_to_res_id') {
+                    return Promise.resolve(true);
+                }
+                if (mockRPC) {
+                    return mockRPC.apply(this, arguments);
+                }
+                return this._super.apply(this, arguments);
+            },
+            session: {
+                user_has_group: function (group) {
+                    if (group === 'base.group_no_one') {
+                        return Promise.resolve(true);
+                    }
+                    return this._super.apply(this, arguments);
+                },
+            },
+        });
+        var debugManager = new DebugManager();
+        testUtilsMock.addMockEnvironment(debugManager, params);
+        return debugManager;
     };
 
-    return model;
-}
+    /**
+     * create a model from given parameters.
+     *
+     * @param {Object} params This object will be given to addMockEnvironment, so
+     *   any parameters from that method applies
+     * @param {Class} params.Model the model class to use
+     * @returns {Model}
+     */
+    function createModel(params) {
+        var widget = new Widget();
 
-/**
- * create a widget parent from given parameters.
- *
- * @param {Object} params This object will be given to addMockEnvironment, so
- *   any parameters from that method applies
- * @returns {Widget}
- */
-function createParent(params) {
-    var widget = new Widget();
-    testUtilsMock.addMockEnvironment(widget, params);
-    return widget;
-}
+        var model = new params.Model(widget);
 
-/**
- * Get the target (fixture or body) of the document and adds event listeners
- * to intercept custom or DOM events.
- *
- * @param {boolean} [debug=false] if true, the widget will be appended in
- *      the DOM. Also, RPCs and uncaught OdooEvent will be logged
- * @returns {HTMLElement}
- */
-function prepareTarget(debug=false) {
-    document.body.classList.toggle('debug', debug);
-    return debug ? document.body : document.querySelector("#qunit-fixture");
-}
+        testUtilsMock.addMockEnvironment(widget, params);
 
-return {
-    createActionManager: createActionManager,
-    createCalendarView: createCalendarView,
-    createControlPanel: createControlPanel,
-    createDebugManager: createDebugManager,
-    createModel: createModel,
-    createParent: createParent,
-    createView: createView,
-    prepareTarget: prepareTarget,
-};
+        // override the model's 'destroy' so that it calls 'destroy' on the widget
+        // instead, as the widget is the parent of the model and the mockServer.
+        model.destroy = function () {
+            // remove the override to properly destroy the model when it will be
+            // called the second time (by its parent)
+            delete model.destroy;
+            widget.destroy();
+        };
 
+        return model;
+    }
+
+    /**
+     * create a widget parent from given parameters.
+     *
+     * @param {Object} params This object will be given to addMockEnvironment, so
+     *   any parameters from that method applies
+     * @returns {Widget}
+     */
+    function createParent(params) {
+        var widget = new Widget();
+        testUtilsMock.addMockEnvironment(widget, params);
+        return widget;
+    }
+
+    /**
+     * create a view from various parameters.  Here, a view means a javascript
+     * instance of an AbstractView class, such as a form view, a list view or a
+     * kanban view.
+     *
+     * It returns the instance of the view, properly created, with all rpcs going
+     * through a mock method using the data object as source, and already loaded/
+     * started.
+     *
+     * @param {Object} params
+     * @param {string} params.arch the xml (arch) of the view to be instantiated
+     * @param {any[]} [params.domain] the initial domain for the view
+     * @param {Object} [params.context] the initial context for the view
+     * @param {string[]} [params.groupBy] the initial groupBy for the view
+     * @param {integer} [params.fieldDebounce=0] the debounce value to use for the
+     *   duration of the test.
+     * @param {AbstractView} params.View the class that will be instantiated
+     * @param {string} params.model a model name, will be given to the view
+     * @param {Object} params.intercepts an object with event names as key, and
+     *   callback as value.  Each key,value will be used to intercept the event.
+     *   Note that this is particularly useful if you want to intercept events going
+     *   up in the init process of the view, because there are no other way to do it
+     *   after this method returns
+     *  @param {Boolean} [params.doNotDisableAHref=false] will not preventDefault on the A elements of the view if true.
+     *    Default is false.
+     * @returns {Promise<AbstractController>} resolves with the instance of the view
+     */
+    async function createView(params) {
+        const target = prepareTarget(params.debug);
+        var widget = new Widget();
+        // reproduce the DOM environment of views
+        var $webClient = $('<div>').addClass('o_web_client').prependTo(target);
+        var $actionManager = $('<div>').addClass('o_action_manager').appendTo($webClient);
+
+
+        // add mock environment: mock server, session, fieldviewget, ...
+        var mockServer = testUtilsMock.addMockEnvironment(widget, params);
+        var viewInfo = testUtilsMock.fieldsViewGet(mockServer, params);
+
+        // create the view
+        var View = params.View;
+        var viewOptions = _.defaults({}, params.viewOptions, {
+            modelName: params.model || 'foo',
+            ids: 'res_id' in params ? [params.res_id] : undefined,
+            currentId: 'res_id' in params ? params.res_id : undefined,
+            domain: params.domain || [],
+            context: params.context || {},
+            hasSidebar: false,
+        });
+        // patch the View to handle the groupBy given in params, as we can't give it
+        // in init (unlike the domain and context which can be set in the action)
+        testUtilsMock.patch(View, {
+            _updateMVCParams: function () {
+                this._super.apply(this, arguments);
+                this.loadParams.groupedBy = params.groupBy || viewOptions.groupBy || [];
+                testUtilsMock.unpatch(View);
+            },
+        });
+        if ('hasSelectors' in params) {
+            viewOptions.hasSelectors = params.hasSelectors;
+        }
+
+        var view;
+        if (viewInfo.type === 'controlpanel' || viewInfo.type === 'search') {
+            // TODO: probably needs to create an helper just for that
+            view = new params.View({
+                viewInfo: viewInfo,
+                modelName: params.model || 'foo',
+            });
+        } else {
+            viewOptions.controlPanelFieldsView = testUtilsMock.fieldsViewGet(mockServer, {
+                arch: params.archs && params.archs[params.model + ',false,search'] || '<search/>',
+                fields: viewInfo.fields,
+                model: params.model,
+            });
+            view = new params.View(viewInfo, viewOptions);
+        }
+
+        if (params.interceptsPropagate) {
+            _.each(params.interceptsPropagate, function (cb, name) {
+                testUtilsMock.intercept(widget, name, cb, true);
+            });
+        }
+
+        return view.getController(widget).then(function (view) {
+            // override the view's 'destroy' so that it calls 'destroy' on the widget
+            // instead, as the widget is the parent of the view and the mockServer.
+            view.__destroy = view.destroy;
+            view.destroy = function () {
+                // remove the override to properly destroy the view and its children
+                // when it will be called the second time (by its parent)
+                delete view.destroy;
+                widget.destroy();
+                $webClient.remove();
+            };
+
+            // render the view in a fragment as they must be able to render correctly
+            // without being in the DOM
+            var fragment = document.createDocumentFragment();
+            return view.appendTo(fragment).then(() => {
+                dom.prepend($actionManager, fragment, {
+                    callbacks: [{ widget: view }],
+                    in_DOM: true,
+                });
+
+                if (!params.doNotDisableAHref) {
+                    [...view.el.getElementsByTagName('A')].forEach((elem) => {
+                        elem.addEventListener('click', (ev) => {
+                            ev.preventDefault();
+                        });
+                    });
+                }
+                return view;
+            });
+        });
+    }
+
+    /**
+     * Get the target (fixture or body) of the document and adds event listeners
+     * to intercept custom or DOM events.
+     *
+     * @param {boolean} [debug=false] if true, the widget will be appended in
+     *      the DOM. Also, RPCs and uncaught OdooEvent will be logged
+     * @returns {HTMLElement}
+     */
+    function prepareTarget(debug = false) {
+        document.body.classList.toggle('debug', debug);
+        return debug ? document.body : document.querySelector("#qunit-fixture");
+    }
+
+    return {
+        createActionManager: createActionManager,
+        createCalendarView: createCalendarView,
+        createControlPanel: createControlPanel,
+        createDebugManager: createDebugManager,
+        createModel: createModel,
+        createParent: createParent,
+        createView: createView,
+        prepareTarget: prepareTarget,
+    };
 });
diff --git a/addons/web/static/tests/helpers/test_utils_dom.js b/addons/web/static/tests/helpers/test_utils_dom.js
index a5745b83d2c..3511bb398ce 100644
--- a/addons/web/static/tests/helpers/test_utils_dom.js
+++ b/addons/web/static/tests/helpers/test_utils_dom.js
@@ -1,475 +1,480 @@
 odoo.define('web.test_utils_dom', function (require) {
-"use strict";
+    "use strict";
 
-var concurrency = require('web.concurrency');
+    var concurrency = require('web.concurrency');
 
-/**
- * DOM Test Utils
- *
- * This module defines various utility functions to help simulate DOM events.
- *
- * Note that all methods defined in this module are exported in the main
- * testUtils file.
- */
+    /**
+     * DOM Test Utils
+     *
+     * This module defines various utility functions to help simulate DOM events.
+     *
+     * Note that all methods defined in this module are exported in the main
+     * testUtils file.
+     */
 
-/**
- * Returns a promise that will be resolved after the nextAnimationFrame after
- * the next tick
- *
- * This is useful to guarantee that OWL has had the time to render
- *
- * @returns {Promise}
- */
-async function returnAfterNextAnimationFrame() {
-    await concurrency.delay(0);
-    await new Promise(resolve => {
-        window.requestAnimationFrame(resolve);
-    });
-}
+    //-------------------------------------------------------------------------
+    // Private
+    //-------------------------------------------------------------------------
 
-/**
- * Check if an object is an instance of EventTarget.
- *
- * @param {Object} node
- * @returns {boolean}
- */
-function isEventTarget(node) {
-    if (node instanceof window.top.EventTarget) {
-        return true;
-    }
-    const contextWindow = node.defaultView || // document
-        (node.ownerDocument && node.ownerDocument.defaultView); // iframe node
-    return contextWindow && node instanceof contextWindow.EventTarget;
-}
-
-/**
- * simulate a drag and drop operation between 2 jquery nodes: $el and $to.
- * This is a crude simulation, with only the mousedown, mousemove and mouseup
- * events, but it is enough to help test drag and drop operations with jqueryUI
- * sortable.
- *
- * @todo: remove the withTrailingClick option when the jquery update branch is
- *   merged.  This is not the default as of now, because handlers are triggered
- *   synchronously, which is not the same as the 'reality'.
- *
- * @param {jQuery|EventTarget} $el
- * @param {jQuery|EventTarget} $to
- * @param {Object} [options]
- * @param {string|Object} [options.position='center'] target position:
- *   can either be one of {'top', 'bottom', 'left', 'right'} or
- *   an object with two attributes (top and left))
- * @param {boolean} [options.disableDrop=false] whether to trigger the drop action
- * @param {boolean} [options.continueMove=false] whether to trigger the
- *   mousedown action (will only work after another call of this function with
- *   without this option)
- * @param {boolean} [options.withTrailingClick=false] if true, this utility
- *   function will also trigger a click on the target after the mouseup event
- *   (this is actually what happens when a drag and drop operation is done)
- * @param {jQuery|EventTarget} [options.mouseenterTarget=undefined] target of the mouseenter event
- * @param {jQuery|EventTarget} [options.mousedownTarget=undefined] target of the mousedown event
- * @param {jQuery|EventTarget} [options.mousemoveTarget=undefined] target of the mousemove event
- * @param {jQuery|EventTarget} [options.mouseupTarget=undefined] target of the mouseup event
- * @param {jQuery|EventTarget} [options.ctrlKey=undefined] if the ctrl key should be considered pressed at the time of mouseup
- * @returns {Promise}
- */
-async function dragAndDrop($el, $to, options) {
-    let el = null;
-    if (isEventTarget($el)) {
-        el = $el;
-        $el = $(el);
-    }
-    if (isEventTarget($to)) {
-        $to = $($to);
-    }
-    options = options || {};
-    var position = options.position || 'center';
-    var elementCenter = $el.offset();
-    var toOffset = $to.offset();
-
-    if (_.isObject(position)) {
-        toOffset.top += position.top + 1;
-        toOffset.left += position.left + 1;
-    } else {
-        toOffset.top += $to.outerHeight() / 2;
-        toOffset.left += $to.outerWidth() / 2;
-        var vertical_offset = (toOffset.top < elementCenter.top) ? -1 : 1;
-        if (position === 'top') {
-            toOffset.top -= $to.outerHeight() / 2 + vertical_offset;
-        } else if (position === 'bottom') {
-            toOffset.top += $to.outerHeight() / 2 - vertical_offset;
-        } else if (position === 'left') {
-            toOffset.left -= $to.outerWidth() / 2;
-        } else if (position === 'right') {
-            toOffset.left += $to.outerWidth() / 2;
-        }
+    function keyboardEventBubble(args) {
+        return Object.assign({}, args, { bubbles: true, keyCode: args.which });
     }
 
-    if ($to[0].ownerDocument !== document) {
-        // we are in an iframe
-        var bound = $('iframe')[0].getBoundingClientRect();
-        toOffset.left += bound.left;
-        toOffset.top += bound.top;
-    }
-    await triggerEvent(options.mouseenterTarget || el || $el, 'mouseover', {}, true);
-    if (!(options.continueMove)) {
-        elementCenter.left += $el.outerWidth() / 2;
-        elementCenter.top += $el.outerHeight() / 2;
-
-        await triggerEvent(options.mousedownTarget || el || $el, 'mousedown', {
-            which: 1,
-            pageX: elementCenter.left,
-            pageY: elementCenter.top
-        }, true);
-    }
-    await triggerEvent(options.mousemoveTarget || el || $el, 'mousemove', {
-        which: 1,
-        pageX: toOffset.left,
-        pageY: toOffset.top
-    }, true);
-
-    if (!options.disableDrop) {
-        await triggerEvent(options.mouseupTarget || el || $el, 'mouseup', {
-            which: 1,
-            pageX: toOffset.left,
-            pageY: toOffset.top,
-            ctrlKey: options.ctrlKey,
-        }, true);
-        if (options.withTrailingClick) {
-            await triggerEvent(options.mouseupTarget || el || $el, 'click', {}, true);
-        }
-    } else {
-        // It's impossible to drag another element when one is already
-        // being dragged. So it's necessary to finish the drop when the test is
-        // over otherwise it's impossible for the next tests to drag and
-        // drop elements.
-        $el.on('remove', function () {
-            triggerEvent($el, 'mouseup', {}, true);
+    function mouseEventMapping(args) {
+        return Object.assign({}, args, {
+            view: window,
+            bubbles: true,
+            cancelable: true,
+            clientX: args ? args.pageX : undefined,
+            clientY: args ? args.pageY : undefined,
         });
     }
-    return returnAfterNextAnimationFrame();
-}
 
-/**
- * simulate a mouse event with a custom event who add the item position. This is
- * sometimes necessary because the basic way to trigger an event (such as
- * $el.trigger('mousemove')); ) is too crude for some uses.
- *
- * @param {jQuery|EventTarget} $el
- * @param {string} type a mouse event type, such as 'mousedown' or 'mousemove'
- * @returns {Promise}
- */
-function triggerMouseEvent($el, type) {
-    const el = $el instanceof jQuery ? $el[0] : $el;
-    if (!el) {
-        throw new Error(`no target found to trigger MouseEvent`);
-    }
-    const rect = el.getBoundingClientRect();
-    // little fix since it seems on chrome, it triggers 1px too on the left
-    const left = rect.x + 1;
-    const top = rect.y;
-    return triggerEvent($el, type, {
-        which: 1,
-        pageX: left, layerX: left, screenX: left,
-        pageY: top, layerY: top, screenY: top,
-    });
-}
-
-/**
- * simulate a mouse event with a custom event on a position x and y. This is
- * sometimes necessary because the basic way to trigger an event (such as
- * $el.trigger('mousemove')); ) is too crude for some uses.
- *
- * @param {integer} x
- * @param {integer} y
- * @param {string} type a mouse event type, such as 'mousedown' or 'mousemove'
- * @returns {HTMLElement}
- */
-function triggerPositionalMouseEvent(x, y, type) {
-    var ev = document.createEvent("MouseEvent");
-    var el = document.elementFromPoint(x, y);
-    ev.initMouseEvent(
-        type,
-        true /* bubble */,
-        true /* cancelable */,
-        window, null,
-        x, y, x, y, /* coordinates */
-        false, false, false, false, /* modifier keys */
-        0 /*left button*/, null
-    );
-    el.dispatchEvent(ev);
-    return el;
-}
-
-/**
- * simulate a keypress event for a given character
- *
- * @param {string} char the character, or 'ENTER'
- * @returns {Promise}
- */
-function triggerKeypressEvent(char) {
-    var keycode;
-    if (char === 'Enter') {
-        keycode = $.ui.keyCode.ENTER;
-    } else if (char === "Tab") {
-        keycode = $.ui.keyCode.TAB;
-    } else {
-        keycode = char.charCodeAt(0);
-    }
-    return triggerEvent(document.body, 'keypress', {
-        key: char,
-        keyCode: keycode,
-        which: keycode,
-    });
-}
-
-/**
- * Click on a specified element. If the option first or last is not specified,
- * this method also check the unicity and the visibility of the target.
- *
- * @param {string|EventTarget|EventTarget[]} el (if string: it is a (jquery) selector)
- * @param {Object} [options={}] click options
- * @param {boolean} [options.allowInvisible=false] if true, clicks on the
- *   element event if it is invisible
- * @param {boolean} [options.first=false] if true, clicks on the first element
- * @param {boolean} [options.last=false] if true, clicks on the last element
- * @returns {Promise}
- */
-async function click(el, options = {}) {
-    let matches, target;
-    let selectorMsg = "";
-    if (typeof el === 'string') {
-        el = $(el);
-    }
-    if (isEventTarget(el)) {
-        // EventTarget
-        matches = [el];
-    } else {
-        // Any other iterable object containing EventTarget objects (jQuery, HTMLCollection, etc.)
-        matches = [...el];
+    function mouseEventNoBubble(args) {
+        return Object.assign({}, args, {
+            view: window,
+            bubbles: false,
+            cancelable: false,
+            clientX: args ? args.pageX : undefined,
+            clientY: args ? args.pageY : undefined,
+        });
     }
 
-    const validMatches = options.allowInvisible ?
-        matches : matches.filter(t => $(t).is(':visible'));
+    function onlyBubble(args) {
+        return Object.assign({}, args, {
+            bubbles: true
+        });
+    }
 
-    if (options.first) {
-        if (validMatches.length === 1) {
-            throw new Error(`There should be more than one visible target ${selectorMsg}.  If` +
-                ' you are sure that there is exactly one target, please use the ' +
-                'click function instead of the clickFirst function');
+    const eventTypes = {
+        auxclick: { constructor: MouseEvent, processParameters: mouseEventMapping },
+        click: { constructor: MouseEvent, processParameters: mouseEventMapping },
+        contextmenu: { constructor: MouseEvent, processParameters: mouseEventMapping },
+        dblclick: { constructor: MouseEvent, processParameters: mouseEventMapping },
+        mousedown: { constructor: MouseEvent, processParameters: mouseEventMapping },
+        mouseup: { constructor: MouseEvent, processParameters: mouseEventMapping },
+
+        mousemove: { constructor: MouseEvent, processParameters: mouseEventMapping },
+        mouseenter: { constructor: MouseEvent, processParameters: mouseEventNoBubble },
+        mouseleave: { constructor: MouseEvent, processParameters: mouseEventNoBubble },
+        mouseover: { constructor: MouseEvent, processParameters: mouseEventMapping },
+        mouseout: { constructor: MouseEvent, processParameters: mouseEventMapping },
+
+        focus: {
+            constructor: FocusEvent, processParameters: (args) => {
+                return Object.assign({}, args, { bubbles: false });
+            }
+        },
+        focusin: { constructor: FocusEvent, processParameters: onlyBubble },
+        blur: {
+            constructor: FocusEvent, processParameters: (args) => {
+                return Object.assign({}, args, { bubbles: false });
+            }
+        },
+
+        cut: { constructor: ClipboardEvent, processParameters: onlyBubble },
+        copy: { constructor: ClipboardEvent, processParameters: onlyBubble },
+        paste: { constructor: ClipboardEvent, processParameters: onlyBubble },
+
+        keydown: { constructor: KeyboardEvent, processParameters: keyboardEventBubble },
+        keypress: { constructor: KeyboardEvent, processParameters: keyboardEventBubble },
+        keyup: { constructor: KeyboardEvent, processParameters: keyboardEventBubble },
+
+        drag: { constructor: DragEvent, processParameters: onlyBubble },
+        dragend: { constructor: DragEvent, processParameters: onlyBubble },
+        dragenter: { constructor: DragEvent, processParameters: onlyBubble },
+        dragstart: { constructor: DragEvent, processParameters: onlyBubble },
+        dragleave: { constructor: DragEvent, processParameters: onlyBubble },
+        dragover: { constructor: DragEvent, processParameters: onlyBubble },
+        drop: { constructor: DragEvent, processParameters: onlyBubble },
+    };
+
+    /**
+     * Check if an object is an instance of EventTarget.
+     *
+     * @param {Object} node
+     * @returns {boolean}
+     */
+    function isEventTarget(node) {
+        if (node instanceof window.top.EventTarget) {
+            return true;
         }
-        target = validMatches[0];
-    } else if (options.last) {
-        if (validMatches.length === 1) {
-            throw new Error(`There should be more than one visible target ${selectorMsg}.  If` +
-                ' you are sure that there is exactly one target, please use the ' +
-                'click function instead of the clickLast function');
+        const contextWindow = node.defaultView || // document
+            (node.ownerDocument && node.ownerDocument.defaultView); // iframe node
+        return contextWindow && node instanceof contextWindow.EventTarget;
+    }
+
+    //-------------------------------------------------------------------------
+    // Public
+    //-------------------------------------------------------------------------
+
+    /**
+     * Click on a specified element. If the option first or last is not specified,
+     * this method also check the unicity and the visibility of the target.
+     *
+     * @param {string|EventTarget|EventTarget[]} el (if string: it is a (jquery) selector)
+     * @param {Object} [options={}] click options
+     * @param {boolean} [options.allowInvisible=false] if true, clicks on the
+     *   element event if it is invisible
+     * @param {boolean} [options.first=false] if true, clicks on the first element
+     * @param {boolean} [options.last=false] if true, clicks on the last element
+     * @returns {Promise}
+     */
+    async function click(el, options = {}) {
+        let matches, target;
+        let selectorMsg = "";
+        if (typeof el === 'string') {
+            el = $(el);
         }
-        target = validMatches[validMatches.length - 1];
-    } else if (validMatches.length !== 1) {
-        throw new Error(`Found ${validMatches.length} elements to click on, instead of 1 ${selectorMsg}`);
-    } else {
-        target = validMatches[0];
-    }
-    if (validMatches.length === 0 && matches.length > 0) {
-        throw new Error(`Element to click on is not visible ${selectorMsg}`);
-    }
-
-    return triggerEvent(target, 'click');
-}
-
-/**
- * Click on the first element of a list of elements.  Note that if the list has
- * only one visible element, we trigger an error. In that case, it is better to
- * use the click helper instead.
- *
- * @param {string|EventTarget|EventTarget[]} el (if string: it is a (jquery) selector)
- * @param {boolean} [options={}] click options
- * @param {boolean} [options.allowInvisible=false] if true, clicks on the
- *   element event if it is invisible
- * @returns {Promise}
- */
-function clickFirst(el, options) {
-    return click(el, _.extend({}, options, { first: true }));
-}
-
-/**
- * Click on the last element of a list of elements.  Note that if the list has
- * only one visible element, we trigger an error. In that case, it is better to
- * use the click helper instead.
- *
- * @param {string|EventTarget|EventTarget[]} el (if string: it is a (jquery) selector)
- * @param {boolean} [options={}] click options
- * @param {boolean} [options.allowInvisible=false] if true, clicks on the
- *   element event if it is invisible
- * @returns {Promise}
- */
-function clickLast(el, options) {
-    return click(el, _.extend({}, options, { last: true }));
-}
-
-/**
- * Triggers multiple events on the specified element.
- *
- * @param {EventTarget|EventTarget[]} el
- * @param {string[]} events the events you want to trigger
- * @returns {Promise}
- */
-async function triggerEvents(el, events) {
-    if (el instanceof jQuery) {
-        if (el.length !== 1) {
-            throw new Error(`target has length ${el.length} instead of 1`);
-        }
-    }
-    if (typeof events === 'string') {
-        events = [events];
-    }
-
-    for (let e = 0; e < events.length; e++) {
-        await triggerEvent(el, events[e], {});
-    }
-}
-
-function onlyBubble(args) {
-    return Object.assign({}, args, {
-        bubbles: true
-    });
-}
-
-function mouseEventMapping(args) {
-    return Object.assign({}, args, {
-        view: window,
-        bubbles: true,
-        cancelable: true,
-        clientX: args ? args.pageX : undefined,
-        clientY: args ? args.pageY : undefined,
-    });
-}
-
-function mouseEventNoBubble(args) {
-    return Object.assign({}, args, {
-        view: window,
-        bubbles: false,
-        cancelable: false,
-        clientX: args ? args.pageX : undefined,
-        clientY: args ? args.pageY : undefined,
-    });
-}
-
-function keyboardEventBubble(args) {
-    return Object.assign({}, args, { bubbles: true, keyCode: args.which });
-}
-
-const eventTypes = {
-    auxclick: { constructor: MouseEvent, processParameters: mouseEventMapping },
-    click: { constructor: MouseEvent, processParameters: mouseEventMapping },
-    contextmenu: { constructor: MouseEvent, processParameters: mouseEventMapping },
-    dblclick: { constructor: MouseEvent, processParameters: mouseEventMapping },
-    mousedown: { constructor: MouseEvent, processParameters: mouseEventMapping },
-    mouseup: { constructor: MouseEvent, processParameters: mouseEventMapping },
-
-    mousemove: { constructor: MouseEvent, processParameters: mouseEventMapping },
-    mouseenter: { constructor: MouseEvent, processParameters: mouseEventNoBubble },
-    mouseleave: { constructor: MouseEvent, processParameters: mouseEventNoBubble },
-    mouseover: { constructor: MouseEvent, processParameters: mouseEventMapping },
-    mouseout: { constructor: MouseEvent, processParameters: mouseEventMapping },
-
-    focus: {
-        constructor: FocusEvent, processParameters: (args) => {
-            return Object.assign({}, args, { bubbles: false });
-        }
-    },
-    focusin: { constructor: FocusEvent, processParameters: onlyBubble },
-    blur: {
-        constructor: FocusEvent, processParameters: (args) => {
-            return Object.assign({}, args, { bubbles: false });
-        }
-    },
-
-    cut: { constructor: ClipboardEvent, processParameters: onlyBubble },
-    copy: { constructor: ClipboardEvent, processParameters: onlyBubble },
-    paste: { constructor: ClipboardEvent, processParameters: onlyBubble },
-
-    keydown: { constructor: KeyboardEvent, processParameters: keyboardEventBubble },
-    keypress: { constructor: KeyboardEvent, processParameters: keyboardEventBubble },
-    keyup: { constructor: KeyboardEvent, processParameters: keyboardEventBubble },
-
-    drag: { constructor: DragEvent, processParameters: onlyBubble },
-    dragend: { constructor: DragEvent, processParameters: onlyBubble },
-    dragenter: { constructor: DragEvent, processParameters: onlyBubble },
-    dragstart: { constructor: DragEvent, processParameters: onlyBubble },
-    dragleave: { constructor: DragEvent, processParameters: onlyBubble },
-    dragover: { constructor: DragEvent, processParameters: onlyBubble },
-    drop: { constructor: DragEvent, processParameters: onlyBubble },
-};
-
-/**
- * Triggers an event on the specified target.
- * This function will dispatch a native event to an EventTarget or a
- * jQuery event to a jQuery object. This behaviour can be overridden by the
- * jquery option.
- *
- * @param {EventTarget|EventTarget[]} el
- * @param {string} eventType event type
- * @param {Object} [eventAttrs] event attributes
- *   on a jQuery element with the `$.fn.trigger` function
- * @param {Boolean} [fast=false] true if the trigger event have to wait for a single tick instead of waiting for the next animation frame
- * @returns {Promise}
- */
-async function triggerEvent(el, eventType, eventAttrs = {}, fast = false) {
-    let matches;
-    let selectorMsg = "";
-    if (isEventTarget(el)) {
-        matches = [el];
-    } else {
-        matches = [...el];
-    }
-
-    if (matches.length !== 1) {
-        throw new Error(`Found ${matches.length} elements to trigger "${eventType}" on, instead of 1 ${selectorMsg}`);
-    }
-
-    const target = matches[0];
-    let event;
-
-    if (!eventTypes[eventType] && !eventTypes[eventType.type]) {
-        event = new Event(eventType, Object.assign({}, eventAttrs, { bubbles: true }));
-    } else {
-        if (typeof eventType === "object") {
-            const { constructor, processParameters } = eventTypes[eventType.type];
-            const eventParameters = processParameters(eventType);
-            event = new constructor(eventType.type, eventParameters);
+        if (isEventTarget(el)) {
+            // EventTarget
+            matches = [el];
         } else {
-            const { constructor, processParameters } = eventTypes[eventType];
-            event = new constructor(eventType, processParameters(eventAttrs));
+            // Any other iterable object containing EventTarget objects (jQuery, HTMLCollection, etc.)
+            matches = [...el];
+        }
+
+        const validMatches = options.allowInvisible ?
+            matches : matches.filter(t => $(t).is(':visible'));
+
+        if (options.first) {
+            if (validMatches.length === 1) {
+                throw new Error(`There should be more than one visible target ${selectorMsg}.  If` +
+                    ' you are sure that there is exactly one target, please use the ' +
+                    'click function instead of the clickFirst function');
+            }
+            target = validMatches[0];
+        } else if (options.last) {
+            if (validMatches.length === 1) {
+                throw new Error(`There should be more than one visible target ${selectorMsg}.  If` +
+                    ' you are sure that there is exactly one target, please use the ' +
+                    'click function instead of the clickLast function');
+            }
+            target = validMatches[validMatches.length - 1];
+        } else if (validMatches.length !== 1) {
+            throw new Error(`Found ${validMatches.length} elements to click on, instead of 1 ${selectorMsg}`);
+        } else {
+            target = validMatches[0];
+        }
+        if (validMatches.length === 0 && matches.length > 0) {
+            throw new Error(`Element to click on is not visible ${selectorMsg}`);
+        }
+
+        return triggerEvent(target, 'click');
+    }
+
+    /**
+     * Click on the first element of a list of elements.  Note that if the list has
+     * only one visible element, we trigger an error. In that case, it is better to
+     * use the click helper instead.
+     *
+     * @param {string|EventTarget|EventTarget[]} el (if string: it is a (jquery) selector)
+     * @param {boolean} [options={}] click options
+     * @param {boolean} [options.allowInvisible=false] if true, clicks on the
+     *   element event if it is invisible
+     * @returns {Promise}
+     */
+    function clickFirst(el, options) {
+        return click(el, _.extend({}, options, { first: true }));
+    }
+
+    /**
+     * Click on the last element of a list of elements.  Note that if the list has
+     * only one visible element, we trigger an error. In that case, it is better to
+     * use the click helper instead.
+     *
+     * @param {string|EventTarget|EventTarget[]} el (if string: it is a (jquery) selector)
+     * @param {boolean} [options={}] click options
+     * @param {boolean} [options.allowInvisible=false] if true, clicks on the
+     *   element event if it is invisible
+     * @returns {Promise}
+     */
+    function clickLast(el, options) {
+        return click(el, _.extend({}, options, { last: true }));
+    }
+
+    /**
+     * simulate a drag and drop operation between 2 jquery nodes: $el and $to.
+     * This is a crude simulation, with only the mousedown, mousemove and mouseup
+     * events, but it is enough to help test drag and drop operations with jqueryUI
+     * sortable.
+     *
+     * @todo: remove the withTrailingClick option when the jquery update branch is
+     *   merged.  This is not the default as of now, because handlers are triggered
+     *   synchronously, which is not the same as the 'reality'.
+     *
+     * @param {jQuery|EventTarget} $el
+     * @param {jQuery|EventTarget} $to
+     * @param {Object} [options]
+     * @param {string|Object} [options.position='center'] target position:
+     *   can either be one of {'top', 'bottom', 'left', 'right'} or
+     *   an object with two attributes (top and left))
+     * @param {boolean} [options.disableDrop=false] whether to trigger the drop action
+     * @param {boolean} [options.continueMove=false] whether to trigger the
+     *   mousedown action (will only work after another call of this function with
+     *   without this option)
+     * @param {boolean} [options.withTrailingClick=false] if true, this utility
+     *   function will also trigger a click on the target after the mouseup event
+     *   (this is actually what happens when a drag and drop operation is done)
+     * @param {jQuery|EventTarget} [options.mouseenterTarget=undefined] target of the mouseenter event
+     * @param {jQuery|EventTarget} [options.mousedownTarget=undefined] target of the mousedown event
+     * @param {jQuery|EventTarget} [options.mousemoveTarget=undefined] target of the mousemove event
+     * @param {jQuery|EventTarget} [options.mouseupTarget=undefined] target of the mouseup event
+     * @param {jQuery|EventTarget} [options.ctrlKey=undefined] if the ctrl key should be considered pressed at the time of mouseup
+     * @returns {Promise}
+     */
+    async function dragAndDrop($el, $to, options) {
+        let el = null;
+        if (isEventTarget($el)) {
+            el = $el;
+            $el = $(el);
+        }
+        if (isEventTarget($to)) {
+            $to = $($to);
+        }
+        options = options || {};
+        var position = options.position || 'center';
+        var elementCenter = $el.offset();
+        var toOffset = $to.offset();
+
+        if (_.isObject(position)) {
+            toOffset.top += position.top + 1;
+            toOffset.left += position.left + 1;
+        } else {
+            toOffset.top += $to.outerHeight() / 2;
+            toOffset.left += $to.outerWidth() / 2;
+            var vertical_offset = (toOffset.top < elementCenter.top) ? -1 : 1;
+            if (position === 'top') {
+                toOffset.top -= $to.outerHeight() / 2 + vertical_offset;
+            } else if (position === 'bottom') {
+                toOffset.top += $to.outerHeight() / 2 - vertical_offset;
+            } else if (position === 'left') {
+                toOffset.left -= $to.outerWidth() / 2;
+            } else if (position === 'right') {
+                toOffset.left += $to.outerWidth() / 2;
+            }
+        }
+
+        if ($to[0].ownerDocument !== document) {
+            // we are in an iframe
+            var bound = $('iframe')[0].getBoundingClientRect();
+            toOffset.left += bound.left;
+            toOffset.top += bound.top;
+        }
+        await triggerEvent(options.mouseenterTarget || el || $el, 'mouseover', {}, true);
+        if (!(options.continueMove)) {
+            elementCenter.left += $el.outerWidth() / 2;
+            elementCenter.top += $el.outerHeight() / 2;
+
+            await triggerEvent(options.mousedownTarget || el || $el, 'mousedown', {
+                which: 1,
+                pageX: elementCenter.left,
+                pageY: elementCenter.top
+            }, true);
+        }
+        await triggerEvent(options.mousemoveTarget || el || $el, 'mousemove', {
+            which: 1,
+            pageX: toOffset.left,
+            pageY: toOffset.top
+        }, true);
+
+        if (!options.disableDrop) {
+            await triggerEvent(options.mouseupTarget || el || $el, 'mouseup', {
+                which: 1,
+                pageX: toOffset.left,
+                pageY: toOffset.top,
+                ctrlKey: options.ctrlKey,
+            }, true);
+            if (options.withTrailingClick) {
+                await triggerEvent(options.mouseupTarget || el || $el, 'click', {}, true);
+            }
+        } else {
+            // It's impossible to drag another element when one is already
+            // being dragged. So it's necessary to finish the drop when the test is
+            // over otherwise it's impossible for the next tests to drag and
+            // drop elements.
+            $el.on('remove', function () {
+                triggerEvent($el, 'mouseup', {}, true);
+            });
+        }
+        return returnAfterNextAnimationFrame();
+    }
+
+    /**
+     * Opens the datepicker of a given element.
+     *
+     * @param {jQuery} $datepickerEl element to which a datepicker is attached
+     */
+    function openDatepicker($datepickerEl) {
+        return click($datepickerEl.find('.o_datepicker_input'));
+    }
+
+    /**
+     * Returns a promise that will be resolved after the nextAnimationFrame after
+     * the next tick
+     *
+     * This is useful to guarantee that OWL has had the time to render
+     *
+     * @returns {Promise}
+     */
+    async function returnAfterNextAnimationFrame() {
+        await concurrency.delay(0);
+        await new Promise(resolve => {
+            window.requestAnimationFrame(resolve);
+        });
+    }
+
+    /**
+     * Triggers an event on the specified target.
+     * This function will dispatch a native event to an EventTarget or a
+     * jQuery event to a jQuery object. This behaviour can be overridden by the
+     * jquery option.
+     *
+     * @param {EventTarget|EventTarget[]} el
+     * @param {string} eventType event type
+     * @param {Object} [eventAttrs] event attributes
+     *   on a jQuery element with the `$.fn.trigger` function
+     * @param {Boolean} [fast=false] true if the trigger event have to wait for a single tick instead of waiting for the next animation frame
+     * @returns {Promise}
+     */
+    async function triggerEvent(el, eventType, eventAttrs = {}, fast = false) {
+        let matches;
+        let selectorMsg = "";
+        if (isEventTarget(el)) {
+            matches = [el];
+        } else {
+            matches = [...el];
+        }
+
+        if (matches.length !== 1) {
+            throw new Error(`Found ${matches.length} elements to trigger "${eventType}" on, instead of 1 ${selectorMsg}`);
+        }
+
+        const target = matches[0];
+        let event;
+
+        if (!eventTypes[eventType] && !eventTypes[eventType.type]) {
+            event = new Event(eventType, Object.assign({}, eventAttrs, { bubbles: true }));
+        } else {
+            if (typeof eventType === "object") {
+                const { constructor, processParameters } = eventTypes[eventType.type];
+                const eventParameters = processParameters(eventType);
+                event = new constructor(eventType.type, eventParameters);
+            } else {
+                const { constructor, processParameters } = eventTypes[eventType];
+                event = new constructor(eventType, processParameters(eventAttrs));
+            }
+        }
+        target.dispatchEvent(event);
+        return fast ? undefined : returnAfterNextAnimationFrame();
+    }
+
+    /**
+     * Triggers multiple events on the specified element.
+     *
+     * @param {EventTarget|EventTarget[]} el
+     * @param {string[]} events the events you want to trigger
+     * @returns {Promise}
+     */
+    async function triggerEvents(el, events) {
+        if (el instanceof jQuery) {
+            if (el.length !== 1) {
+                throw new Error(`target has length ${el.length} instead of 1`);
+            }
+        }
+        if (typeof events === 'string') {
+            events = [events];
+        }
+
+        for (let e = 0; e < events.length; e++) {
+            await triggerEvent(el, events[e], {});
         }
     }
-    target.dispatchEvent(event);
-    return fast ? undefined : returnAfterNextAnimationFrame();
-}
 
+    /**
+     * simulate a mouse event with a custom event who add the item position. This is
+     * sometimes necessary because the basic way to trigger an event (such as
+     * $el.trigger('mousemove')); ) is too crude for some uses.
+     *
+     * @param {jQuery|EventTarget} $el
+     * @param {string} type a mouse event type, such as 'mousedown' or 'mousemove'
+     * @returns {Promise}
+     */
+    function triggerMouseEvent($el, type) {
+        const el = $el instanceof jQuery ? $el[0] : $el;
+        if (!el) {
+            throw new Error(`no target found to trigger MouseEvent`);
+        }
+        const rect = el.getBoundingClientRect();
+        // little fix since it seems on chrome, it triggers 1px too on the left
+        const left = rect.x + 1;
+        const top = rect.y;
+        return triggerEvent($el, type, {
+            which: 1,
+            pageX: left, layerX: left, screenX: left,
+            pageY: top, layerY: top, screenY: top,
+        });
+    }
 
-/**
- * Opens the datepicker of a given element.
- *
- * @param {jQuery} $datepickerEl element to which a datepicker is attached
- */
-function openDatepicker($datepickerEl) {
-    return click($datepickerEl.find('.o_datepicker_input'));
-}
+    /**
+     * simulate a mouse event with a custom event on a position x and y. This is
+     * sometimes necessary because the basic way to trigger an event (such as
+     * $el.trigger('mousemove')); ) is too crude for some uses.
+     *
+     * @param {integer} x
+     * @param {integer} y
+     * @param {string} type a mouse event type, such as 'mousedown' or 'mousemove'
+     * @returns {HTMLElement}
+     */
+    function triggerPositionalMouseEvent(x, y, type) {
+        var ev = document.createEvent("MouseEvent");
+        var el = document.elementFromPoint(x, y);
+        ev.initMouseEvent(
+            type,
+            true /* bubble */,
+            true /* cancelable */,
+            window, null,
+            x, y, x, y, /* coordinates */
+            false, false, false, false, /* modifier keys */
+            0 /*left button*/, null
+        );
+        el.dispatchEvent(ev);
+        return el;
+    }
 
+    /**
+     * simulate a keypress event for a given character
+     *
+     * @param {string} char the character, or 'ENTER'
+     * @returns {Promise}
+     */
+    function triggerKeypressEvent(char) {
+        var keycode;
+        if (char === 'Enter') {
+            keycode = $.ui.keyCode.ENTER;
+        } else if (char === "Tab") {
+            keycode = $.ui.keyCode.TAB;
+        } else {
+            keycode = char.charCodeAt(0);
+        }
+        return triggerEvent(document.body, 'keypress', {
+            key: char,
+            keyCode: keycode,
+            which: keycode,
+        });
+    }
 
-return {
-    triggerKeypressEvent: triggerKeypressEvent,
-    triggerMouseEvent: triggerMouseEvent,
-    triggerPositionalMouseEvent: triggerPositionalMouseEvent,
-    dragAndDrop: dragAndDrop,
-    openDatepicker: openDatepicker,
-    click: click,
-    clickFirst: clickFirst,
-    clickLast: clickLast,
-    triggerEvents: triggerEvents,
-    triggerEvent: triggerEvent,
-    returnAfterNextAnimationFrame: returnAfterNextAnimationFrame,
-};
-
+    return {
+        click: click,
+        clickFirst: clickFirst,
+        clickLast: clickLast,
+        dragAndDrop: dragAndDrop,
+        openDatepicker: openDatepicker,
+        returnAfterNextAnimationFrame: returnAfterNextAnimationFrame,
+        triggerEvent: triggerEvent,
+        triggerEvents: triggerEvents,
+        triggerKeypressEvent: triggerKeypressEvent,
+        triggerMouseEvent: triggerMouseEvent,
+        triggerPositionalMouseEvent: triggerPositionalMouseEvent,
+    };
 });
diff --git a/addons/web/static/tests/helpers/test_utils_fields.js b/addons/web/static/tests/helpers/test_utils_fields.js
index 6532aa7033c..4646fd98d83 100644
--- a/addons/web/static/tests/helpers/test_utils_fields.js
+++ b/addons/web/static/tests/helpers/test_utils_fields.js
@@ -1,231 +1,230 @@
 odoo.define('web.test_utils_fields', function (require) {
-"use strict";
+    "use strict";
 
-/**
- * Field Test Utils
- *
- * This module defines various utility functions to help testing field widgets.
- *
- * Note that all methods defined in this module are exported in the main
- * testUtils file.
- */
+    /**
+     * Field Test Utils
+     *
+     * This module defines various utility functions to help testing field widgets.
+     *
+     * Note that all methods defined in this module are exported in the main
+     * testUtils file.
+     */
 
-var concurrency = require('web.concurrency');
-var domUtils = require('web.test_utils_dom');
+    var concurrency = require('web.concurrency');
+    var domUtils = require('web.test_utils_dom');
 
-//------------------------------------------------------------------------------
-// Public functions
-//------------------------------------------------------------------------------
+    //-------------------------------------------------------------------------
+    // Public functions
+    //-------------------------------------------------------------------------
 
-/**
- * Sets the value of an element and then, trigger all specified events.
- * Note that this helper also checks the unicity of the target.
- *
- * Example:
- *     testUtils.fields.editAndTrigger($('selector'), 'test', ['input', 'change']);
- *
- * @param {jQuery|EventTarget} el should target an input, textarea or select
- * @param {string|number} value
- * @param {string[]} events
- * @returns {Promise}
- */
-function editAndTrigger(el, value, events) {
-    if (el instanceof jQuery) {
-        if (el.length !== 1) {
-            throw new Error(`target ${el.selector} has length ${el.length} instead of 1`);
+    /**
+     * Click on the active (highlighted) selection in a m2o dropdown.
+     *
+     * @param {string} fieldName
+     * @param {[string]} selector if set, this will restrict the search for the m2o
+     *    input
+     */
+    function clickM2OHighlightedItem(fieldName, selector) {
+        var m2oSelector = `${selector || ''} .o_field_many2one[name=${fieldName}] input`;
+        var $dropdown = $(m2oSelector).autocomplete('widget');
+        // clicking on an li (no matter which one), will select the focussed one
+        $dropdown.find('li:first()').click();
+        return concurrency.delay(0);
+    }
+
+    /**
+     * Click on a menuitem in the m2o dropdown.  This helper will target an element
+     * which contains some specific text. Note that it assumes that the dropdown
+     * is currently open.
+     *
+     * Example:
+     *    testUtils.fields.many2one.clickM2OItem('partner_id', 'George');
+     *
+     * @param {string} fieldName
+     * @param {string} searchText
+     * @returns {Promise}
+     */
+    function clickM2OItem(fieldName, searchText) {
+        var m2oSelector = `.o_field_many2one[name=${fieldName}] input`;
+        var $dropdown = $(m2oSelector).autocomplete('widget');
+        var $target = $dropdown.find(`li:contains(${searchText})`).first();
+        if ($target.length !== 1 || !$target.is(':visible')) {
+            throw new Error('Menu item should be unique and visible');
         }
-        el.val(value);
-    } else {
-        el.value = value;
-    }
-    return domUtils.triggerEvents(el, events);
-}
+        $target.mouseenter();
+        $target.click();
 
-/**
- * Sets the value of an input.
- *
- * Note that this helper also checks the unicity of the target.
- *
- * Example:
- *     testUtils.fields.editInput($('selector'), 'somevalue');
- *
- * @param {jQuery|EventTarget} el should target an input, textarea or select
- * @param {string|number} value
- * @returns {Promise}
- */
-function editInput(el, value) {
-    return editAndTrigger(el, value, ['input']);
-}
-
-/**
- * Sets the value of a select.
- *
- * Note that this helper also checks the unicity of the target.
- *
- * Example:
- *     testUtils.fields.editSelect($('selector'), 'somevalue');
- *
- * @param {jQuery|EventTarget} el should target an input, textarea or select
- * @param {string|number} value
- * @returns {Promise}
- */
-function editSelect(el, value) {
-    return editAndTrigger(el, value, ['change']);
-}
-
-/**
- * Click to open the dropdown on a many2one
- *
- * @param {string} fieldName
- * @param {[string]} selector if set, this will restrict the search for the m2o
- *    input
- * @returns {HTMLInputElement} the main many2one input
- */
-async function clickOpenM2ODropdown(fieldName, selector) {
-    var m2oSelector = `${selector || ''} .o_field_many2one[name=${fieldName}] input`;
-    var matches = document.querySelectorAll(m2oSelector);
-    if (matches.length !== 1) {
-        throw new Error(`cannot open m2o: selector ${selector} has been found ${matches.length} instead of 1`);
+        return concurrency.delay(0);
     }
 
-    await domUtils.click(matches[0]);
-    return matches[0];
-}
-
-/**
- * Click on the active (highlighted) selection in a m2o dropdown.
- *
- * @param {string} fieldName
- * @param {[string]} selector if set, this will restrict the search for the m2o
- *    input
- */
-function clickM2OHighlightedItem(fieldName, selector) {
-    var m2oSelector = `${selector || ''} .o_field_many2one[name=${fieldName}] input`;
-    var $dropdown = $(m2oSelector).autocomplete('widget');
-    // clicking on an li (no matter which one), will select the focussed one
-    $dropdown.find('li:first()').click();
-    return concurrency.delay(0);
-}
-
-/**
- * Click on a menuitem in the m2o dropdown.  This helper will target an element
- * which contains some specific text. Note that it assumes that the dropdown
- * is currently open.
- *
- * Example:
- *    testUtils.fields.many2one.clickM2OItem('partner_id', 'George');
- *
- * @param {string} fieldName
- * @param {string} searchText
- * @returns {Promise}
- */
-function clickM2OItem(fieldName, searchText) {
-    var m2oSelector = `.o_field_many2one[name=${fieldName}] input`;
-    var $dropdown = $(m2oSelector).autocomplete('widget');
-    var $target = $dropdown.find(`li:contains(${searchText})`).first();
-    if ($target.length !== 1 || !$target.is(':visible')) {
-        throw new Error('Menu item should be unique and visible');
-    }
-    $target.mouseenter();
-    $target.click();
-
-    return concurrency.delay(0);
-}
-
-/**
- * This helper is useful to test many2one fields. Here is what it does:
- * - click to open the dropdown
- * - enter a search string in the input
- * - wait for the selection
- * - click on the requested menuitem, or the active one by default
- *
- * Example:
- *    testUtils.fields.many2one.searchAndClickM2OItem('partner_id', {search: 'George'});
- *
- * @param {string} fieldName
- * @param {[Object]} options
- * @param {[string]} options.selector
- * @param {[string]} options.search
- * @param {[string]} options.item
- * @returns {Promise}
- */
-function searchAndClickM2OItem(fieldName, options) {
-    options = options || {};
-
-    return clickOpenM2ODropdown(fieldName, options.selector).then(function (input) {
-        var def;
-        if (options.search) {
-            input.value = options.search;
-            input.dispatchEvent(new Event('input'));
-            def = concurrency.delay(0);
+    /**
+     * Click to open the dropdown on a many2one
+     *
+     * @param {string} fieldName
+     * @param {[string]} selector if set, this will restrict the search for the m2o
+     *    input
+     * @returns {HTMLInputElement} the main many2one input
+     */
+    async function clickOpenM2ODropdown(fieldName, selector) {
+        var m2oSelector = `${selector || ''} .o_field_many2one[name=${fieldName}] input`;
+        var matches = document.querySelectorAll(m2oSelector);
+        if (matches.length !== 1) {
+            throw new Error(`cannot open m2o: selector ${selector} has been found ${matches.length} instead of 1`);
         }
-        return Promise.resolve(def).then(function () {
-            if (options.item) {
-                return clickM2OItem(fieldName, options.item);
-            } else {
-                return clickM2OHighlightedItem(fieldName, options.selector);
+
+        await domUtils.click(matches[0]);
+        return matches[0];
+    }
+
+    /**
+     * Sets the value of an element and then, trigger all specified events.
+     * Note that this helper also checks the unicity of the target.
+     *
+     * Example:
+     *     testUtils.fields.editAndTrigger($('selector'), 'test', ['input', 'change']);
+     *
+     * @param {jQuery|EventTarget} el should target an input, textarea or select
+     * @param {string|number} value
+     * @param {string[]} events
+     * @returns {Promise}
+     */
+    function editAndTrigger(el, value, events) {
+        if (el instanceof jQuery) {
+            if (el.length !== 1) {
+                throw new Error(`target ${el.selector} has length ${el.length} instead of 1`);
             }
-        });
-    });
-}
-
-/**
- * Helper to trigger a key event on an element.
- *
- * @param {string} type type of key event ('press', 'up' or 'down')
- * @param {jQuery} $el
- * @param {number|string} keyCode used as number, but if string, it'll check if
- *   the string corresponds to a key -otherwise it will keep only the first
- *   char to get a letter key- and convert it into a keyCode.
- * @returns {Promise}
- */
-function triggerKey(type, $el, keyCode) {
-    type = 'key' + type;
-    if (typeof keyCode === 'string') {
-        if (keyCode.length > 1) {
-            keyCode = keyCode.toUpperCase();
-            keyCode = $.ui.keyCode[keyCode];
+            el.val(value);
         } else {
-            keyCode = keyCode.charCodeAt(0);
+            el.value = value;
         }
+        return domUtils.triggerEvents(el, events);
     }
-    $el.trigger({type: type, which: keyCode, keyCode: keyCode});
-    return concurrency.delay(0);
-}
 
-/**
- * Helper to trigger a keydown event on an element.
- *
- * @param {jQuery} $el
- * @param {number|string} keyCode @see triggerKey
- * @returns {Promise}
- */
-function triggerKeydown($el, keyCode) {
-    return triggerKey('down', $el, keyCode);
-}
+    /**
+     * Sets the value of an input.
+     *
+     * Note that this helper also checks the unicity of the target.
+     *
+     * Example:
+     *     testUtils.fields.editInput($('selector'), 'somevalue');
+     *
+     * @param {jQuery|EventTarget} el should target an input, textarea or select
+     * @param {string|number} value
+     * @returns {Promise}
+     */
+    function editInput(el, value) {
+        return editAndTrigger(el, value, ['input']);
+    }
 
-/**
- * Helper to trigger a keyup event on an element.
- *
- * @param {jQuery} $el
- * @param {number|string} keyCode @see triggerKey
- * @returns {Promise}
- */
-function triggerKeyup($el, keyCode) {
-    return triggerKey('up', $el, keyCode);
-}
+    /**
+     * Sets the value of a select.
+     *
+     * Note that this helper also checks the unicity of the target.
+     *
+     * Example:
+     *     testUtils.fields.editSelect($('selector'), 'somevalue');
+     *
+     * @param {jQuery|EventTarget} el should target an input, textarea or select
+     * @param {string|number} value
+     * @returns {Promise}
+     */
+    function editSelect(el, value) {
+        return editAndTrigger(el, value, ['change']);
+    }
 
-return {
-    clickOpenM2ODropdown: clickOpenM2ODropdown,
-    clickM2OHighlightedItem: clickM2OHighlightedItem,
-    clickM2OItem: clickM2OItem,
-    editAndTrigger: editAndTrigger,
-    editInput: editInput,
-    editSelect: editSelect,
-    searchAndClickM2OItem: searchAndClickM2OItem,
-    triggerKey: triggerKey,
-    triggerKeydown: triggerKeydown,
-    triggerKeyup: triggerKeyup,
-};
+    /**
+     * This helper is useful to test many2one fields. Here is what it does:
+     * - click to open the dropdown
+     * - enter a search string in the input
+     * - wait for the selection
+     * - click on the requested menuitem, or the active one by default
+     *
+     * Example:
+     *    testUtils.fields.many2one.searchAndClickM2OItem('partner_id', {search: 'George'});
+     *
+     * @param {string} fieldName
+     * @param {[Object]} options
+     * @param {[string]} options.selector
+     * @param {[string]} options.search
+     * @param {[string]} options.item
+     * @returns {Promise}
+     */
+    function searchAndClickM2OItem(fieldName, options) {
+        options = options || {};
 
+        return clickOpenM2ODropdown(fieldName, options.selector).then(function (input) {
+            var def;
+            if (options.search) {
+                input.value = options.search;
+                input.dispatchEvent(new Event('input'));
+                def = concurrency.delay(0);
+            }
+            return Promise.resolve(def).then(function () {
+                if (options.item) {
+                    return clickM2OItem(fieldName, options.item);
+                } else {
+                    return clickM2OHighlightedItem(fieldName, options.selector);
+                }
+            });
+        });
+    }
+
+    /**
+     * Helper to trigger a key event on an element.
+     *
+     * @param {string} type type of key event ('press', 'up' or 'down')
+     * @param {jQuery} $el
+     * @param {number|string} keyCode used as number, but if string, it'll check if
+     *   the string corresponds to a key -otherwise it will keep only the first
+     *   char to get a letter key- and convert it into a keyCode.
+     * @returns {Promise}
+     */
+    function triggerKey(type, $el, keyCode) {
+        type = 'key' + type;
+        if (typeof keyCode === 'string') {
+            if (keyCode.length > 1) {
+                keyCode = keyCode.toUpperCase();
+                keyCode = $.ui.keyCode[keyCode];
+            } else {
+                keyCode = keyCode.charCodeAt(0);
+            }
+        }
+        $el.trigger({ type: type, which: keyCode, keyCode: keyCode });
+        return concurrency.delay(0);
+    }
+
+    /**
+     * Helper to trigger a keydown event on an element.
+     *
+     * @param {jQuery} $el
+     * @param {number|string} keyCode @see triggerKey
+     * @returns {Promise}
+     */
+    function triggerKeydown($el, keyCode) {
+        return triggerKey('down', $el, keyCode);
+    }
+
+    /**
+     * Helper to trigger a keyup event on an element.
+     *
+     * @param {jQuery} $el
+     * @param {number|string} keyCode @see triggerKey
+     * @returns {Promise}
+     */
+    function triggerKeyup($el, keyCode) {
+        return triggerKey('up', $el, keyCode);
+    }
+
+    return {
+        clickM2OHighlightedItem: clickM2OHighlightedItem,
+        clickM2OItem: clickM2OItem,
+        clickOpenM2ODropdown: clickOpenM2ODropdown,
+        editAndTrigger: editAndTrigger,
+        editInput: editInput,
+        editSelect: editSelect,
+        searchAndClickM2OItem: searchAndClickM2OItem,
+        triggerKey: triggerKey,
+        triggerKeydown: triggerKeydown,
+        triggerKeyup: triggerKeyup,
+    };
 });

From 384e516218375000461aa3fcb0ac1b9eaa960fb3 Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Tue, 25 Feb 2020 12:52:41 +0000
Subject: [PATCH 02/10] [REF] web: Update generic files

General cleaning of some helpers and generic files. The idea is that they are
less likely to be entirely re-written in the near future so this is a way to
keep the code clean, readable and compliant to the current standards. Changes include:
- Use of async/await when possible
- Use of const/let instead of var
- Removal of underscore.js
- Use of native JS instead of jQuery when possible

The logic of the affected code remains the same.
---
 .../mail/static/tests/helpers/test_utils.js   |   2 +-
 .../web/static/src/js/chrome/action_mixin.js  |   8 +-
 addons/web/static/src/js/core/custom_hooks.js |  10 +-
 addons/web/static/src/js/main.js              |   1 +
 .../web/static/tests/helpers/qunit_asserts.js |  10 +-
 addons/web/static/tests/helpers/test_utils.js | 254 ++++++++-------
 .../static/tests/helpers/test_utils_create.js | 290 +++++++++---------
 .../static/tests/helpers/test_utils_dom.js    | 194 ++++++------
 .../static/tests/helpers/test_utils_fields.js | 119 +++----
 .../static/tests/helpers/test_utils_mock.js   |   2 +-
 .../static/tests/helpers/test_utils_modal.js  |  48 ++-
 addons/web_editor/static/tests/test_utils.js  | 226 +++++---------
 12 files changed, 541 insertions(+), 623 deletions(-)

diff --git a/addons/mail/static/tests/helpers/test_utils.js b/addons/mail/static/tests/helpers/test_utils.js
index d3f7081eef6..90317900660 100644
--- a/addons/mail/static/tests/helpers/test_utils.js
+++ b/addons/mail/static/tests/helpers/test_utils.js
@@ -26,7 +26,7 @@ var Widget = require('web.Widget');
  * This is async due to mail_manager/mail_service that needs to be ready.
  *
  * @param {Object} params
- * @return {Promise} resolved with the discuss widget
+ * @returns {Promise<Discuss>}
  */
 async function createDiscuss(params) {
     var Parent = Widget.extend({
diff --git a/addons/web/static/src/js/chrome/action_mixin.js b/addons/web/static/src/js/chrome/action_mixin.js
index 1ca87c15ef3..a704e5736a0 100644
--- a/addons/web/static/src/js/chrome/action_mixin.js
+++ b/addons/web/static/src/js/chrome/action_mixin.js
@@ -20,9 +20,9 @@ odoo.define('web.ActionMixin', function (require) {
      * @module web.ActionMixin
      */
 
-    var core = require('web.core');
+    const core = require('web.core');
 
-    var ActionMixin = {
+    const ActionMixin = {
         template: 'Action',
 
         /**
@@ -79,7 +79,7 @@ odoo.define('web.ActionMixin', function (require) {
         renderElement: function () {
             this._super.apply(this, arguments);
             if (this.contentTemplate) {
-                var content = core.qweb.render(this.contentTemplate, { widget: this });
+                const content = core.qweb.render(this.contentTemplate, { widget: this });
                 this.$('.o_content').append(content);
             }
         },
@@ -223,7 +223,7 @@ odoo.define('web.ActionMixin', function (require) {
          */
         _onGetControllerQueryParams: function (ev) {
             ev.stopPropagation();
-            var state = this.getOwnedQueryParams();
+            const state = this.getOwnedQueryParams();
             ev.data.callback(state || {});
         },
     };
diff --git a/addons/web/static/src/js/core/custom_hooks.js b/addons/web/static/src/js/core/custom_hooks.js
index c196dd7f900..69750066a8c 100644
--- a/addons/web/static/src/js/core/custom_hooks.js
+++ b/addons/web/static/src/js/core/custom_hooks.js
@@ -14,18 +14,18 @@ odoo.define('web.custom_hooks', function () {
      */
     function useFocusOnUpdate() {
         const component = Component.current;
-        component.__willFocus = null;
+        let willFocus = null;
 
         function _focusSelector() {
-            if (component.__willFocus) {
-                const target = component.el.querySelector(component.__willFocus);
+            if (willFocus) {
+                const target = component.el.querySelector(willFocus);
                 if (target) {
                     target.focus();
                     if (['INPUT', 'TEXTAREA'].includes(target.tagName)) {
                         target.selectionStart = target.selectionEnd = target.value.length;
                     }
                 }
-                component.__willFocus = null;
+                willFocus = null;
             }
         }
 
@@ -33,7 +33,7 @@ odoo.define('web.custom_hooks', function () {
         onPatched(_focusSelector);
 
         return function focusOnUpdate(selector = '[autofocus]') {
-            component.__willFocus = selector;
+            willFocus = selector;
         };
     }
 
diff --git a/addons/web/static/src/js/main.js b/addons/web/static/src/js/main.js
index 35f00254ba8..49b90228ba2 100644
--- a/addons/web/static/src/js/main.js
+++ b/addons/web/static/src/js/main.js
@@ -1,4 +1,5 @@
 odoo.define('web.web_client', function (require) {
+    "use strict";
 
     const env = require('web.env');
     const session = require("web.session");
diff --git a/addons/web/static/tests/helpers/qunit_asserts.js b/addons/web/static/tests/helpers/qunit_asserts.js
index a57154e416e..0f22acbbf78 100644
--- a/addons/web/static/tests/helpers/qunit_asserts.js
+++ b/addons/web/static/tests/helpers/qunit_asserts.js
@@ -11,7 +11,7 @@ odoo.define('web.qunit_asserts', function (require) {
      * matches exactly one element.
      */
 
-    var Widget = require('web.Widget');
+    const Widget = require('web.Widget');
 
     //-------------------------------------------------------------------------
     // Private functions
@@ -56,8 +56,8 @@ odoo.define('web.qunit_asserts', function (require) {
      */
     function _checkVisible(w, shouldBeVisible, msg) {
         if (w instanceof jQuery && w.length !== 1) {
-            const assertion = shouldHaveClass ? 'hasClass' : 'doesNotHaveClass';
-            QUnit.assert.ok(false, `Assertion '${assertion} ${className}' targets ${w.length} elements instead of 1`);
+            const assertion = shouldBeVisible ? 'isVisible' : 'isNotVisible';
+            QUnit.assert.ok(false, `Assertion '${assertion}' targets ${w.length} elements instead of 1`);
         }
 
         const el = w instanceof Widget || w instanceof owl.Component ? w.el :
@@ -184,12 +184,12 @@ odoo.define('web.qunit_asserts', function (require) {
      * @param {string} [msg]
      */
     function hasAttrValue(w, attr, value, msg) {
-        var $el = w instanceof Widget ? w.$el :
+        const $el = w instanceof Widget ? w.$el :
             w instanceof HTMLElement ? $(w) :
                 w;  // jquery element
 
         if ($el.length !== 1) {
-            var descr = `hasAttrValue (${attr}: ${value})`;
+            const descr = `hasAttrValue (${attr}: ${value})`;
             QUnit.assert.ok(false,
                 `Assertion '${descr}' targets ${$el.length} elements instead of 1`
             );
diff --git a/addons/web/static/tests/helpers/test_utils.js b/addons/web/static/tests/helpers/test_utils.js
index f2b12eaf705..2ff77de4e49 100644
--- a/addons/web/static/tests/helpers/test_utils.js
+++ b/addons/web/static/tests/helpers/test_utils.js
@@ -1,4 +1,4 @@
-odoo.define('web.test_utils', function (require) {
+odoo.define('web.test_utils', async function (require) {
     "use strict";
 
     /**
@@ -10,26 +10,25 @@ odoo.define('web.test_utils', function (require) {
      * instance of a view, appended in the dom, ready to be tested.
      */
 
-    var ajax = require('web.ajax');
-    var concurrency = require('web.concurrency');
-    var core = require('web.core');
-    var relationalFields = require('web.relational_fields');
-    var session = require('web.session');
-    var testUtilsCreate = require('web.test_utils_create');
-    var testUtilsDom = require('web.test_utils_dom');
-    var testUtilsFields = require('web.test_utils_fields');
-    var testUtilsFile = require('web.test_utils_file');
-    var testUtilsForm = require('web.test_utils_form');
-    var testUtilsGraph = require('web.test_utils_graph');
-    var testUtilsKanban = require('web.test_utils_kanban');
-    var testUtilsMock = require('web.test_utils_mock');
-    var testUtilsModal = require('web.test_utils_modal');
-    var testUtilsPivot = require('web.test_utils_pivot');
-    var tools = require('web.tools');
+    const ajax = require('web.ajax');
+    const core = require('web.core');
+    const relationalFields = require('web.relational_fields');
+    const session = require('web.session');
+    const testUtilsCreate = require('web.test_utils_create');
+    const testUtilsDom = require('web.test_utils_dom');
+    const testUtilsFields = require('web.test_utils_fields');
+    const testUtilsFile = require('web.test_utils_file');
+    const testUtilsForm = require('web.test_utils_form');
+    const testUtilsGraph = require('web.test_utils_graph');
+    const testUtilsKanban = require('web.test_utils_kanban');
+    const testUtilsMock = require('web.test_utils_mock');
+    const testUtilsModal = require('web.test_utils_modal');
+    const testUtilsPivot = require('web.test_utils_pivot');
+    const tools = require('web.tools');
 
 
     function deprecated(fn, type) {
-        var msg = `Helper 'testUtils.${fn.name}' is deprecated. ` +
+        const msg = `Helper 'testUtils.${fn.name}' is deprecated. ` +
             `Please use 'testUtils.${type}.${fn.name}' instead.`;
         return tools.deprecated(fn, msg);
     }
@@ -41,9 +40,9 @@ odoo.define('web.test_utils', function (require) {
      * @returns {Promise + resolve and reject function}
      */
     function makeTestPromise() {
-        var resolve;
-        var reject;
-        var promise = new Promise(function (_resolve, _reject) {
+        let resolve;
+        let reject;
+        const promise = new Promise(function (_resolve, _reject) {
             resolve = _resolve;
             reject = _reject;
         });
@@ -69,7 +68,7 @@ odoo.define('web.test_utils', function (require) {
      * @returns {Promise + resolve and reject function}
      */
     function makeTestPromiseWithAssert(assert, str) {
-        var prom = makeTestPromise();
+        const prom = makeTestPromise();
         prom.then(() => assert.step('ok ' + str)).catch(function () { });
         prom.catch(() => assert.step('ko ' + str));
         return prom;
@@ -102,118 +101,117 @@ odoo.define('web.test_utils', function (require) {
     // before starting the qunit test suite.
     // (session.js is in charge of loading the static xml bundle and we also have
     // to load xml files that are normally lazy loaded by specific widgets).
-    return Promise.all([
+    await Promise.all([
         session.is_bound,
         ajax.loadXML('/web/static/src/xml/debug.xml', core.qweb),
         ajax.loadXML('/web/static/src/xml/dialog.xml', core.qweb),
         ajax.loadXML('/web/static/src/xml/translation_dialog.xml', core.qweb),
-    ]).then(function () {
-        setTimeout(function () {
-            // jquery autocomplete refines the search in a setTimeout() parameterized
-            // with a delay, so we force this delay to 0 s.t. the dropdown is filtered
-            // directly on the next tick
-            relationalFields.FieldMany2One.prototype.AUTOCOMPLETE_DELAY = 0;
+    ]);
+    setTimeout(function () {
+        // jquery autocomplete refines the search in a setTimeout() parameterized
+        // with a delay, so we force this delay to 0 s.t. the dropdown is filtered
+        // directly on the next tick
+        relationalFields.FieldMany2One.prototype.AUTOCOMPLETE_DELAY = 0;
 
-            // this is done with the hope that tests are
-            // only started all together...
-            QUnit.start();
-        }, 0);
-        return {
-            mock: {
-                addMockEnvironment: testUtilsMock.addMockEnvironment,
-                getMockedOwlEnv: testUtilsMock.getMockedOwlEnv,
-                intercept: testUtilsMock.intercept,
-                patch: testUtilsMock.patch,
-                patchDate: testUtilsMock.patchDate,
-                unpatch: testUtilsMock.unpatch,
-                fieldsViewGet: testUtilsMock.fieldsViewGet,
-                patchSetTimeout: testUtilsMock.patchSetTimeout,
-            },
-            dom: {
-                triggerKeypressEvent: testUtilsDom.triggerKeypressEvent,
-                triggerMouseEvent: testUtilsDom.triggerMouseEvent,
-                triggerPositionalMouseEvent: testUtilsDom.triggerPositionalMouseEvent,
-                dragAndDrop: testUtilsDom.dragAndDrop,
-                openDatepicker: testUtilsDom.openDatepicker,
-                click: testUtilsDom.click,
-                clickFirst: testUtilsDom.clickFirst,
-                clickLast: testUtilsDom.clickLast,
-                triggerEvents: testUtilsDom.triggerEvents,
-                triggerEvent: testUtilsDom.triggerEvent,
-            },
-            form: {
-                clickEdit: testUtilsForm.clickEdit,
-                clickSave: testUtilsForm.clickSave,
-                clickCreate: testUtilsForm.clickCreate,
-                clickDiscard: testUtilsForm.clickDiscard,
-                reload: testUtilsForm.reload,
-            },
-            graph: {
-                reload: testUtilsGraph.reload,
-            },
-            kanban: {
-                reload: testUtilsKanban.reload,
-                clickCreate: testUtilsKanban.clickCreate,
-                quickCreate: testUtilsKanban.quickCreate,
-                toggleGroupSettings: testUtilsKanban.toggleGroupSettings,
-                toggleRecordDropdown: testUtilsKanban.toggleRecordDropdown,
-            },
-            modal: {
-                clickButton: testUtilsModal.clickButton,
-            },
-            pivot: {
-                clickMeasure: testUtilsPivot.clickMeasure,
-                toggleMeasuresDropdown: testUtilsPivot.toggleMeasuresDropdown,
-                reload: testUtilsPivot.reload,
-            },
-            fields: {
-                many2one: {
-                    clickOpenDropdown: testUtilsFields.clickOpenM2ODropdown,
-                    clickHighlightedItem: testUtilsFields.clickM2OHighlightedItem,
-                    clickItem: testUtilsFields.clickM2OItem,
-                    searchAndClickItem: testUtilsFields.searchAndClickM2OItem,
-                },
-                editInput: testUtilsFields.editInput,
-                editSelect: testUtilsFields.editSelect,
-                editAndTrigger: testUtilsFields.editAndTrigger,
-                triggerKey: testUtilsFields.triggerKey,
-                triggerKeydown: testUtilsFields.triggerKeydown,
-                triggerKeyup: testUtilsFields.triggerKeyup,
-            },
-            file: {
-                createFile: testUtilsFile.createFile,
-                dragoverFile: testUtilsFile.dragoverFile,
-                dropFile: testUtilsFile.dropFile,
-                dropFiles: testUtilsFile.dropFiles,
+        // this is done with the hope that tests are
+        // only started all together...
+        QUnit.start();
+    }, 0);
+    return {
+        mock: {
+            addMockEnvironment: testUtilsMock.addMockEnvironment,
+            getMockedOwlEnv: testUtilsMock.getMockedOwlEnv,
+            intercept: testUtilsMock.intercept,
+            patch: testUtilsMock.patch,
+            patchDate: testUtilsMock.patchDate,
+            unpatch: testUtilsMock.unpatch,
+            fieldsViewGet: testUtilsMock.fieldsViewGet,
+            patchSetTimeout: testUtilsMock.patchSetTimeout,
+        },
+        dom: {
+            triggerKeypressEvent: testUtilsDom.triggerKeypressEvent,
+            triggerMouseEvent: testUtilsDom.triggerMouseEvent,
+            triggerPositionalMouseEvent: testUtilsDom.triggerPositionalMouseEvent,
+            dragAndDrop: testUtilsDom.dragAndDrop,
+            openDatepicker: testUtilsDom.openDatepicker,
+            click: testUtilsDom.click,
+            clickFirst: testUtilsDom.clickFirst,
+            clickLast: testUtilsDom.clickLast,
+            triggerEvents: testUtilsDom.triggerEvents,
+            triggerEvent: testUtilsDom.triggerEvent,
+        },
+        form: {
+            clickEdit: testUtilsForm.clickEdit,
+            clickSave: testUtilsForm.clickSave,
+            clickCreate: testUtilsForm.clickCreate,
+            clickDiscard: testUtilsForm.clickDiscard,
+            reload: testUtilsForm.reload,
+        },
+        graph: {
+            reload: testUtilsGraph.reload,
+        },
+        kanban: {
+            reload: testUtilsKanban.reload,
+            clickCreate: testUtilsKanban.clickCreate,
+            quickCreate: testUtilsKanban.quickCreate,
+            toggleGroupSettings: testUtilsKanban.toggleGroupSettings,
+            toggleRecordDropdown: testUtilsKanban.toggleRecordDropdown,
+        },
+        modal: {
+            clickButton: testUtilsModal.clickButton,
+        },
+        pivot: {
+            clickMeasure: testUtilsPivot.clickMeasure,
+            toggleMeasuresDropdown: testUtilsPivot.toggleMeasuresDropdown,
+            reload: testUtilsPivot.reload,
+        },
+        fields: {
+            many2one: {
+                clickOpenDropdown: testUtilsFields.clickOpenM2ODropdown,
+                clickHighlightedItem: testUtilsFields.clickM2OHighlightedItem,
+                clickItem: testUtilsFields.clickM2OItem,
+                searchAndClickItem: testUtilsFields.searchAndClickM2OItem,
             },
+            editInput: testUtilsFields.editInput,
+            editSelect: testUtilsFields.editSelect,
+            editAndTrigger: testUtilsFields.editAndTrigger,
+            triggerKey: testUtilsFields.triggerKey,
+            triggerKeydown: testUtilsFields.triggerKeydown,
+            triggerKeyup: testUtilsFields.triggerKeyup,
+        },
+        file: {
+            createFile: testUtilsFile.createFile,
+            dragoverFile: testUtilsFile.dragoverFile,
+            dropFile: testUtilsFile.dropFile,
+            dropFiles: testUtilsFile.dropFiles,
+        },
 
-            createActionManager: testUtilsCreate.createActionManager,
-            createDebugManager: testUtilsCreate.createDebugManager,
-            createAsyncView: testUtilsCreate.createView,
-            createCalendarView: testUtilsCreate.createCalendarView,
-            createControlPanel: testUtilsCreate.createControlPanel,
-            createView: testUtilsCreate.createView,
-            createModel: testUtilsCreate.createModel,
-            createParent: testUtilsCreate.createParent,
-            makeTestPromise: makeTestPromise,
-            makeTestPromiseWithAssert: makeTestPromiseWithAssert,
-            nextMicrotaskTick: nextMicrotaskTick,
-            nextTick: nextTick,
-            prepareTarget: testUtilsCreate.prepareTarget,
-            returnAfterNextAnimationFrame: testUtilsDom.returnAfterNextAnimationFrame,
+        createActionManager: testUtilsCreate.createActionManager,
+        createDebugManager: testUtilsCreate.createDebugManager,
+        createAsyncView: testUtilsCreate.createView,
+        createCalendarView: testUtilsCreate.createCalendarView,
+        createControlPanel: testUtilsCreate.createControlPanel,
+        createView: testUtilsCreate.createView,
+        createModel: testUtilsCreate.createModel,
+        createParent: testUtilsCreate.createParent,
+        makeTestPromise: makeTestPromise,
+        makeTestPromiseWithAssert: makeTestPromiseWithAssert,
+        nextMicrotaskTick: nextMicrotaskTick,
+        nextTick: nextTick,
+        prepareTarget: testUtilsCreate.prepareTarget,
+        returnAfterNextAnimationFrame: testUtilsDom.returnAfterNextAnimationFrame,
 
-            // backward-compatibility
-            addMockEnvironment: deprecated(testUtilsMock.addMockEnvironment, 'mock'),
-            dragAndDrop: deprecated(testUtilsDom.dragAndDrop, 'dom'),
-            fieldsViewGet: deprecated(testUtilsMock.fieldsViewGet, 'mock'),
-            intercept: deprecated(testUtilsMock.intercept, 'mock'),
-            openDatepicker: deprecated(testUtilsDom.openDatepicker, 'dom'),
-            patch: deprecated(testUtilsMock.patch, 'mock'),
-            patchDate: deprecated(testUtilsMock.patchDate, 'mock'),
-            triggerKeypressEvent: deprecated(testUtilsDom.triggerKeypressEvent, 'dom'),
-            triggerMouseEvent: deprecated(testUtilsDom.triggerMouseEvent, 'dom'),
-            triggerPositionalMouseEvent: deprecated(testUtilsDom.triggerPositionalMouseEvent, 'dom'),
-            unpatch: deprecated(testUtilsMock.unpatch, 'mock'),
-        };
-    });
+        // backward-compatibility
+        addMockEnvironment: deprecated(testUtilsMock.addMockEnvironment, 'mock'),
+        dragAndDrop: deprecated(testUtilsDom.dragAndDrop, 'dom'),
+        fieldsViewGet: deprecated(testUtilsMock.fieldsViewGet, 'mock'),
+        intercept: deprecated(testUtilsMock.intercept, 'mock'),
+        openDatepicker: deprecated(testUtilsDom.openDatepicker, 'dom'),
+        patch: deprecated(testUtilsMock.patch, 'mock'),
+        patchDate: deprecated(testUtilsMock.patchDate, 'mock'),
+        triggerKeypressEvent: deprecated(testUtilsDom.triggerKeypressEvent, 'dom'),
+        triggerMouseEvent: deprecated(testUtilsDom.triggerMouseEvent, 'dom'),
+        triggerPositionalMouseEvent: deprecated(testUtilsDom.triggerPositionalMouseEvent, 'dom'),
+        unpatch: deprecated(testUtilsMock.unpatch, 'mock'),
+    };
 });
diff --git a/addons/web/static/tests/helpers/test_utils_create.js b/addons/web/static/tests/helpers/test_utils_create.js
index 717b845e80e..21bc6cc7850 100644
--- a/addons/web/static/tests/helpers/test_utils_create.js
+++ b/addons/web/static/tests/helpers/test_utils_create.js
@@ -10,70 +10,68 @@ odoo.define('web.test_utils_create', function (require) {
      * testUtils file.
      */
 
-    var ActionManager = require('web.ActionManager');
-    var config = require('web.config');
-    var ControlPanelView = require('web.ControlPanelView');
-    var concurrency = require('web.concurrency');
-    var DebugManager = require('web.DebugManager.Backend');
-    var dom = require('web.dom');
-    var testUtilsMock = require('web.test_utils_mock');
-    var Widget = require('web.Widget');
+    const ActionManager = require('web.ActionManager');
+    const concurrency = require('web.concurrency');
+    const config = require('web.config');
+    const ControlPanelView = require('web.ControlPanelView');
+    const DebugManager = require('web.DebugManager.Backend');
+    const dom = require('web.dom');
+    const testUtilsMock = require('web.test_utils_mock');
+    const Widget = require('web.Widget');
 
     /**
-     * create and return an instance of ActionManager with all rpcs going through a
+     * Create and return an instance of ActionManager with all rpcs going through a
      * mock method using the data, actions and archs objects as sources.
      *
-     * @param {Object} [params]
+     * @param {Object} [params={}]
      * @param {Object} [params.actions] the actions given to the mock server
      * @param {Object} [params.archs] this archs given to the mock server
      * @param {Object} [params.data] the business data given to the mock server
      * @param {function} [params.mockRPC]
-     * @returns {ActionManager}
+     * @returns {Promise<ActionManager>}
      */
-    async function createActionManager(params) {
-        params = params || {};
+    async function createActionManager(params = {}) {
         const target = prepareTarget(params.debug);
 
-        var widget = new Widget();
+        const widget = new Widget();
         // when 'document' addon is installed, the sidebar does a 'search_read' on
         // model 'ir_attachment' each time a record is open, so we monkey-patch
         // 'mockRPC' to mute those RPCs, so that the tests can be written uniformly,
         // whether or not 'document' is installed
-        var mockRPC = params.mockRPC;
-        _.extend(params, {
-            mockRPC: function (route, args) {
+        const mockRPC = params.mockRPC;
+        Object.assign(params, {
+            async mockRPC(route, args) {
                 if (args.model === 'ir.attachment') {
-                    return Promise.resolve([]);
+                    return [];
                 }
                 if (mockRPC) {
                     return mockRPC.apply(this, arguments);
                 }
-                return this._super.apply(this, arguments);
+                return this._super(...arguments);
             },
         });
-        testUtilsMock.addMockEnvironment(widget, _.defaults(params, { debounce: false }));
+        testUtilsMock.addMockEnvironment(widget, Object.assign({ debounce: false }, params));
         await widget.prependTo(target);
-        widget.$el.addClass('o_web_client');
+        widget.el.classList.add('o_web_client');
         if (config.device.isMobile) {
-            widget.$el.addClass('o_touch_device');
+            widget.el.classList.add('o_touch_device');
         }
 
-        var userContext = params.context && params.context.user_context || {};
-        var actionManager = new ActionManager(widget, userContext);
+        const userContext = params.context && params.context.user_context || {};
+        const actionManager = new ActionManager(widget, userContext);
 
-        var originalDestroy = ActionManager.prototype.destroy;
+        const originalDestroy = ActionManager.prototype.destroy;
         actionManager.destroy = function () {
             actionManager.destroy = originalDestroy;
             widget.destroy();
         };
-        var fragment = document.createDocumentFragment();
-        return actionManager.appendTo(fragment).then(function () {
-            dom.append(widget.$el, fragment, {
-                callbacks: [{ widget: actionManager }],
-                in_DOM: true,
-            });
-            return actionManager;
+        const fragment = document.createDocumentFragment();
+        await actionManager.appendTo(fragment);
+        dom.append(widget.el, fragment, {
+            callbacks: [{ widget: actionManager }],
+            in_DOM: true,
         });
+        return actionManager;
     }
 
     /**
@@ -85,21 +83,22 @@ odoo.define('web.test_utils_create', function (require) {
      * makes the calendar scroll to 6:00 in a setTimeout(0), which might have an
      * impact according to where we want to trigger positional clicks.
      *
-     * @param {Object} params see @createView
+     * @param {Object} params @see createView
      * @param {Object} [options]
      * @param {boolean} [options.positionalClicks=false]
      * @returns {Promise<CalendarController>}
      */
     async function createCalendarView(params, options) {
-        var calendar = await createView(params);
+        const calendar = await createView(params);
         if (!options || !options.positionalClicks) {
             return calendar;
         }
-        var $view = $('#qunit-fixture').contents();
-        $view.prependTo('body');
-        var destroy = calendar.destroy;
-        calendar.destroy = function () {
-            $view.remove();
+        const viewElements = [...document.getElementById('qunit-fixture').children];
+        viewElements.forEach(el => document.body.prepend(el));
+
+        const destroy = calendar.destroy;
+        calendar.destroy = () => {
+            viewElements.forEach(el => el.remove());
             destroy();
         };
         await concurrency.delay(0);
@@ -107,7 +106,7 @@ odoo.define('web.test_utils_create', function (require) {
     }
 
     /**
-     * create a controlPanel from various parameters.
+     * Create a controlPanel from various parameters.
      *
      * It returns an instance of ControlPanelController
      *
@@ -138,17 +137,17 @@ odoo.define('web.test_utils_create', function (require) {
      *
      * @returns {Promise<ControlPanel>} resolves with an instance of the ControlPanelController
      */
-    function createControlPanel(params) {
+    async function createControlPanel(params) {
         params = params || {};
         const target = prepareTarget(params.debug);
         // reproduce the DOM environment of a view control panel
-        var $webClient = $('<div>').addClass('o_web_client').prependTo(target);
-        var $actionManager = $('<div>').addClass('o_action_manager').appendTo($webClient);
-        var $action = $('<div>').addClass('o_action').appendTo($actionManager);
+        const $webClient = $('<div>').addClass('o_web_client').prependTo(target);
+        const $actionManager = $('<div>').addClass('o_action_manager').appendTo($webClient);
+        const $action = $('<div>').addClass('o_action').appendTo($actionManager);
 
-        var widget = new Widget();
+        const widget = new Widget();
         // add mock environment: mock server, session, fieldviewget, ...
-        var mockServer = testUtilsMock.addMockEnvironment(widget, params);
+        const mockServer = testUtilsMock.addMockEnvironment(widget, params);
         if (!params.viewInfo) {
             try {
                 params.viewInfo = testUtilsMock.fieldsViewGet(mockServer, params);
@@ -159,37 +158,35 @@ odoo.define('web.test_utils_create', function (require) {
             }
         }
 
-        var viewOptions = _.defaults({}, params.viewOptions, {
+        const viewOptions = Object.assign({
             context: params.context,
             modelName: params.model,
             searchMenuTypes: params.searchMenuTypes,
             viewInfo: params.viewInfo,
-        });
-        var controlPanelView = new ControlPanelView(viewOptions);
-        return controlPanelView.getController(widget).then(function (controlPanel) {
-            // override the controlPanel's 'destroy' so that it calls 'destroy' on
-            // the widget instead, as the widget is the parent of the controlPanel
-            // and the mockServer.
-            controlPanel.__destroy = controlPanel.destroy;
-            controlPanel.destroy = function () {
-                // remove the override to properly destroy the controlPanel and its
-                // children when it will be called the second time (by its parent)
-                delete controlPanel.destroy;
-                widget.destroy();
-                $webClient.remove();
-            };
+        }, params.viewOptions);
+        const controlPanelView = new ControlPanelView(viewOptions);
+        const controlPanel = await controlPanelView.getController(widget);
+        // override the controlPanel's 'destroy' so that it calls 'destroy' on
+        // the widget instead, as the widget is the parent of the controlPanel
+        // and the mockServer.
+        controlPanel.__destroy = controlPanel.destroy;
+        controlPanel.destroy = function () {
+            // remove the override to properly destroy the controlPanel and its
+            // children when it will be called the second time (by its parent)
+            delete controlPanel.destroy;
+            widget.destroy();
+            $webClient.remove();
+        };
 
-            // render the controlPanel in a fragment as it must be able to render
-            // correctly without being in the DOM
-            var fragment = document.createDocumentFragment();
-            return controlPanel.appendTo(fragment).then(function () {
-                dom.prepend($action, fragment, {
-                    callbacks: [{ widget: controlPanel }],
-                    in_DOM: true,
-                });
-                return controlPanel;
-            });
+        // render the controlPanel in a fragment as it must be able to render
+        // correctly without being in the DOM
+        const fragment = document.createDocumentFragment();
+        await controlPanel.appendTo(fragment);
+        dom.prepend($action, fragment, {
+            callbacks: [{ widget: controlPanel }],
+            in_DOM: true,
         });
+        return controlPanel;
     }
 
     /**
@@ -197,39 +194,39 @@ odoo.define('web.test_utils_create', function (require) {
      * mock method, assuming that the user has access rights, and is an admin.
      *
      * @param {Object} [params={}]
+     * @returns {DebugManager}
      */
-    var createDebugManager = function (params) {
-        params = params || {};
-        var mockRPC = params.mockRPC;
-        _.extend(params, {
-            mockRPC: function (route, args) {
+    function createDebugManager(params = {}) {
+        const mockRPC = params.mockRPC;
+        Object.assign(params, {
+            async mockRPC(route, args) {
                 if (args.method === 'check_access_rights') {
-                    return Promise.resolve(true);
+                    return true;
                 }
                 if (args.method === 'xmlid_to_res_id') {
-                    return Promise.resolve(true);
+                    return true;
                 }
                 if (mockRPC) {
                     return mockRPC.apply(this, arguments);
                 }
-                return this._super.apply(this, arguments);
+                return this._super(...arguments);
             },
             session: {
-                user_has_group: function (group) {
+                async user_has_group(group) {
                     if (group === 'base.group_no_one') {
-                        return Promise.resolve(true);
+                        return true;
                     }
-                    return this._super.apply(this, arguments);
+                    return this._super(...arguments);
                 },
             },
         });
-        var debugManager = new DebugManager();
+        const debugManager = new DebugManager();
         testUtilsMock.addMockEnvironment(debugManager, params);
         return debugManager;
-    };
+    }
 
     /**
-     * create a model from given parameters.
+     * Create a model from given parameters.
      *
      * @param {Object} params This object will be given to addMockEnvironment, so
      *   any parameters from that method applies
@@ -237,9 +234,9 @@ odoo.define('web.test_utils_create', function (require) {
      * @returns {Model}
      */
     function createModel(params) {
-        var widget = new Widget();
+        const widget = new Widget();
 
-        var model = new params.Model(widget);
+        const model = new params.Model(widget);
 
         testUtilsMock.addMockEnvironment(widget, params);
 
@@ -256,20 +253,20 @@ odoo.define('web.test_utils_create', function (require) {
     }
 
     /**
-     * create a widget parent from given parameters.
+     * Create a widget parent from given parameters.
      *
      * @param {Object} params This object will be given to addMockEnvironment, so
      *   any parameters from that method applies
      * @returns {Widget}
      */
     function createParent(params) {
-        var widget = new Widget();
+        const widget = new Widget();
         testUtilsMock.addMockEnvironment(widget, params);
         return widget;
     }
 
     /**
-     * create a view from various parameters.  Here, a view means a javascript
+     * Create a view from various parameters.  Here, a view means a javascript
      * instance of an AbstractView class, such as a form view, a list view or a
      * kanban view.
      *
@@ -291,37 +288,42 @@ odoo.define('web.test_utils_create', function (require) {
      *   Note that this is particularly useful if you want to intercept events going
      *   up in the init process of the view, because there are no other way to do it
      *   after this method returns
-     *  @param {Boolean} [params.doNotDisableAHref=false] will not preventDefault on the A elements of the view if true.
+     * @param {Boolean} [params.doNotDisableAHref=false] will not preventDefault on the A elements of the view if true.
      *    Default is false.
-     * @returns {Promise<AbstractController>} resolves with the instance of the view
+     * @returns {Promise<AbstractController>} the instance of the view
      */
     async function createView(params) {
         const target = prepareTarget(params.debug);
-        var widget = new Widget();
+        const widget = new Widget();
         // reproduce the DOM environment of views
-        var $webClient = $('<div>').addClass('o_web_client').prependTo(target);
-        var $actionManager = $('<div>').addClass('o_action_manager').appendTo($webClient);
-
+        const webClient = Object.assign(document.createElement('div'), {
+            className: 'o_web_client',
+        });
+        const actionManager = Object.assign(document.createElement('div'), {
+            className: 'o_action_manager',
+        });
+        target.prepend(webClient);
+        webClient.append(actionManager);
 
         // add mock environment: mock server, session, fieldviewget, ...
-        var mockServer = testUtilsMock.addMockEnvironment(widget, params);
-        var viewInfo = testUtilsMock.fieldsViewGet(mockServer, params);
+        const mockServer = testUtilsMock.addMockEnvironment(widget, params);
+        const viewInfo = testUtilsMock.fieldsViewGet(mockServer, params);
 
         // create the view
-        var View = params.View;
-        var viewOptions = _.defaults({}, params.viewOptions, {
+        const View = params.View;
+        const viewOptions = Object.assign({
             modelName: params.model || 'foo',
             ids: 'res_id' in params ? [params.res_id] : undefined,
             currentId: 'res_id' in params ? params.res_id : undefined,
             domain: params.domain || [],
             context: params.context || {},
             hasSidebar: false,
-        });
+        }, params.viewOptions);
         // patch the View to handle the groupBy given in params, as we can't give it
         // in init (unlike the domain and context which can be set in the action)
         testUtilsMock.patch(View, {
-            _updateMVCParams: function () {
-                this._super.apply(this, arguments);
+            _updateMVCParams() {
+                this._super(...arguments);
                 this.loadParams.groupedBy = params.groupBy || viewOptions.groupBy || [];
                 testUtilsMock.unpatch(View);
             },
@@ -330,7 +332,7 @@ odoo.define('web.test_utils_create', function (require) {
             viewOptions.hasSelectors = params.hasSelectors;
         }
 
-        var view;
+        let view;
         if (viewInfo.type === 'controlpanel' || viewInfo.type === 'search') {
             // TODO: probably needs to create an helper just for that
             view = new params.View({
@@ -347,42 +349,40 @@ odoo.define('web.test_utils_create', function (require) {
         }
 
         if (params.interceptsPropagate) {
-            _.each(params.interceptsPropagate, function (cb, name) {
-                testUtilsMock.intercept(widget, name, cb, true);
-            });
+            for (const name in params.interceptsPropagate) {
+                testUtilsMock.intercept(widget, name, params.interceptsPropagate[name], true);
+            }
         }
 
-        return view.getController(widget).then(function (view) {
-            // override the view's 'destroy' so that it calls 'destroy' on the widget
-            // instead, as the widget is the parent of the view and the mockServer.
-            view.__destroy = view.destroy;
-            view.destroy = function () {
-                // remove the override to properly destroy the view and its children
-                // when it will be called the second time (by its parent)
-                delete view.destroy;
-                widget.destroy();
-                $webClient.remove();
-            };
+        const viewController = await view.getController(widget);
+        // override the view's 'destroy' so that it calls 'destroy' on the widget
+        // instead, as the widget is the parent of the view and the mockServer.
+        viewController.__destroy = viewController.destroy;
+        viewController.destroy = function () {
+            // remove the override to properly destroy the viewController and its children
+            // when it will be called the second time (by its parent)
+            delete viewController.destroy;
+            widget.destroy();
+            webClient.remove();
+        };
 
-            // render the view in a fragment as they must be able to render correctly
-            // without being in the DOM
-            var fragment = document.createDocumentFragment();
-            return view.appendTo(fragment).then(() => {
-                dom.prepend($actionManager, fragment, {
-                    callbacks: [{ widget: view }],
-                    in_DOM: true,
-                });
-
-                if (!params.doNotDisableAHref) {
-                    [...view.el.getElementsByTagName('A')].forEach((elem) => {
-                        elem.addEventListener('click', (ev) => {
-                            ev.preventDefault();
-                        });
-                    });
-                }
-                return view;
-            });
+        // render the viewController in a fragment as they must be able to render correctly
+        // without being in the DOM
+        const fragment = document.createDocumentFragment();
+        await viewController.appendTo(fragment);
+        dom.prepend(actionManager, fragment, {
+            callbacks: [{ widget: viewController }],
+            in_DOM: true,
         });
+
+        if (!params.doNotDisableAHref) {
+            [...viewController.el.getElementsByTagName('A')].forEach(elem => {
+                elem.addEventListener('click', ev => {
+                    ev.preventDefault();
+                });
+            });
+        }
+        return viewController;
     }
 
     /**
@@ -395,17 +395,17 @@ odoo.define('web.test_utils_create', function (require) {
      */
     function prepareTarget(debug = false) {
         document.body.classList.toggle('debug', debug);
-        return debug ? document.body : document.querySelector("#qunit-fixture");
+        return debug ? document.body : document.getElementById('qunit-fixture');
     }
 
     return {
-        createActionManager: createActionManager,
-        createCalendarView: createCalendarView,
-        createControlPanel: createControlPanel,
-        createDebugManager: createDebugManager,
-        createModel: createModel,
-        createParent: createParent,
-        createView: createView,
-        prepareTarget: prepareTarget,
+        createActionManager,
+        createCalendarView,
+        createControlPanel,
+        createDebugManager,
+        createModel,
+        createParent,
+        createView,
+        prepareTarget,
     };
 });
diff --git a/addons/web/static/tests/helpers/test_utils_dom.js b/addons/web/static/tests/helpers/test_utils_dom.js
index 3511bb398ce..ceca0d21fc9 100644
--- a/addons/web/static/tests/helpers/test_utils_dom.js
+++ b/addons/web/static/tests/helpers/test_utils_dom.js
@@ -1,7 +1,7 @@
 odoo.define('web.test_utils_dom', function (require) {
     "use strict";
 
-    var concurrency = require('web.concurrency');
+    const concurrency = require('web.concurrency');
 
     /**
      * DOM Test Utils
@@ -13,40 +13,29 @@ odoo.define('web.test_utils_dom', function (require) {
      */
 
     //-------------------------------------------------------------------------
-    // Private
+    // Private functions
     //-------------------------------------------------------------------------
 
-    function keyboardEventBubble(args) {
-        return Object.assign({}, args, { bubbles: true, keyCode: args.which });
-    }
-
-    function mouseEventMapping(args) {
-        return Object.assign({}, args, {
-            view: window,
-            bubbles: true,
-            cancelable: true,
-            clientX: args ? args.pageX : undefined,
-            clientY: args ? args.pageY : undefined,
-        });
-    }
-
-    function mouseEventNoBubble(args) {
-        return Object.assign({}, args, {
-            view: window,
-            bubbles: false,
-            cancelable: false,
-            clientX: args ? args.pageX : undefined,
-            clientY: args ? args.pageY : undefined,
-        });
-    }
-
-    function onlyBubble(args) {
-        return Object.assign({}, args, {
-            bubbles: true
-        });
-    }
-
-    const eventTypes = {
+    // TriggerEvent helpers
+    const keyboardEventBubble = args => Object.assign({}, args, { bubbles: true, keyCode: args.which });
+    const mouseEventMapping = args => Object.assign({}, args, {
+        bubbles: true,
+        cancelable: true,
+        clientX: args ? args.pageX : undefined,
+        clientY: args ? args.pageY : undefined,
+        view: window,
+    });
+    const mouseEventNoBubble = args => Object.assign({}, args, {
+        bubbles: false,
+        cancelable: false,
+        clientX: args ? args.pageX : undefined,
+        clientY: args ? args.pageY : undefined,
+        view: window,
+    });
+    const noBubble = args => Object.assign({}, args, { bubbles: false });
+    const onlyBubble = args => Object.assign({}, args, { bubbles: true });
+    // TriggerEvent constructor/args processor mapping
+    const EVENT_TYPES = {
         auxclick: { constructor: MouseEvent, processParameters: mouseEventMapping },
         click: { constructor: MouseEvent, processParameters: mouseEventMapping },
         contextmenu: { constructor: MouseEvent, processParameters: mouseEventMapping },
@@ -60,17 +49,9 @@ odoo.define('web.test_utils_dom', function (require) {
         mouseover: { constructor: MouseEvent, processParameters: mouseEventMapping },
         mouseout: { constructor: MouseEvent, processParameters: mouseEventMapping },
 
-        focus: {
-            constructor: FocusEvent, processParameters: (args) => {
-                return Object.assign({}, args, { bubbles: false });
-            }
-        },
+        focus: { constructor: FocusEvent, processParameters: noBubble },
         focusin: { constructor: FocusEvent, processParameters: onlyBubble },
-        blur: {
-            constructor: FocusEvent, processParameters: (args) => {
-                return Object.assign({}, args, { bubbles: false });
-            }
-        },
+        blur: { constructor: FocusEvent, processParameters: noBubble },
 
         cut: { constructor: ClipboardEvent, processParameters: onlyBubble },
         copy: { constructor: ClipboardEvent, processParameters: onlyBubble },
@@ -95,7 +76,10 @@ odoo.define('web.test_utils_dom', function (require) {
      * @param {Object} node
      * @returns {boolean}
      */
-    function isEventTarget(node) {
+    function _isEventTarget(node) {
+        if (!node) {
+            throw new Error(`Provided node is ${node}.`);
+        }
         if (node instanceof window.top.EventTarget) {
             return true;
         }
@@ -105,7 +89,7 @@ odoo.define('web.test_utils_dom', function (require) {
     }
 
     //-------------------------------------------------------------------------
-    // Public
+    // Public functions
     //-------------------------------------------------------------------------
 
     /**
@@ -126,7 +110,7 @@ odoo.define('web.test_utils_dom', function (require) {
         if (typeof el === 'string') {
             el = $(el);
         }
-        if (isEventTarget(el)) {
+        if (_isEventTarget(el)) {
             // EventTarget
             matches = [el];
         } else {
@@ -174,8 +158,8 @@ odoo.define('web.test_utils_dom', function (require) {
      *   element event if it is invisible
      * @returns {Promise}
      */
-    function clickFirst(el, options) {
-        return click(el, _.extend({}, options, { first: true }));
+    async function clickFirst(el, options) {
+        return click(el, Object.assign({}, options, { first: true }));
     }
 
     /**
@@ -189,12 +173,12 @@ odoo.define('web.test_utils_dom', function (require) {
      *   element event if it is invisible
      * @returns {Promise}
      */
-    function clickLast(el, options) {
-        return click(el, _.extend({}, options, { last: true }));
+    async function clickLast(el, options) {
+        return click(el, Object.assign({}, options, { last: true }));
     }
 
     /**
-     * simulate a drag and drop operation between 2 jquery nodes: $el and $to.
+     * Simulate a drag and drop operation between 2 jquery nodes: $el and $to.
      * This is a crude simulation, with only the mousedown, mousemove and mouseup
      * events, but it is enough to help test drag and drop operations with jqueryUI
      * sortable.
@@ -225,25 +209,25 @@ odoo.define('web.test_utils_dom', function (require) {
      */
     async function dragAndDrop($el, $to, options) {
         let el = null;
-        if (isEventTarget($el)) {
+        if (_isEventTarget($el)) {
             el = $el;
             $el = $(el);
         }
-        if (isEventTarget($to)) {
+        if (_isEventTarget($to)) {
             $to = $($to);
         }
         options = options || {};
-        var position = options.position || 'center';
-        var elementCenter = $el.offset();
-        var toOffset = $to.offset();
+        const position = options.position || 'center';
+        const elementCenter = $el.offset();
+        const toOffset = $to.offset();
 
-        if (_.isObject(position)) {
+        if (typeof position === 'object') {
             toOffset.top += position.top + 1;
             toOffset.left += position.left + 1;
         } else {
             toOffset.top += $to.outerHeight() / 2;
             toOffset.left += $to.outerWidth() / 2;
-            var vertical_offset = (toOffset.top < elementCenter.top) ? -1 : 1;
+            const vertical_offset = (toOffset.top < elementCenter.top) ? -1 : 1;
             if (position === 'top') {
                 toOffset.top -= $to.outerHeight() / 2 + vertical_offset;
             } else if (position === 'bottom') {
@@ -257,7 +241,7 @@ odoo.define('web.test_utils_dom', function (require) {
 
         if ($to[0].ownerDocument !== document) {
             // we are in an iframe
-            var bound = $('iframe')[0].getBoundingClientRect();
+            const bound = $('iframe')[0].getBoundingClientRect();
             toOffset.left += bound.left;
             toOffset.top += bound.top;
         }
@@ -301,11 +285,11 @@ odoo.define('web.test_utils_dom', function (require) {
     }
 
     /**
-     * Opens the datepicker of a given element.
+     * Open the datepicker of a given element.
      *
      * @param {jQuery} $datepickerEl element to which a datepicker is attached
      */
-    function openDatepicker($datepickerEl) {
+    async function openDatepicker($datepickerEl) {
         return click($datepickerEl.find('.o_datepicker_input'));
     }
 
@@ -325,7 +309,7 @@ odoo.define('web.test_utils_dom', function (require) {
     }
 
     /**
-     * Triggers an event on the specified target.
+     * Trigger an event on the specified target.
      * This function will dispatch a native event to an EventTarget or a
      * jQuery event to a jQuery object. This behaviour can be overridden by the
      * jquery option.
@@ -340,7 +324,7 @@ odoo.define('web.test_utils_dom', function (require) {
     async function triggerEvent(el, eventType, eventAttrs = {}, fast = false) {
         let matches;
         let selectorMsg = "";
-        if (isEventTarget(el)) {
+        if (_isEventTarget(el)) {
             matches = [el];
         } else {
             matches = [...el];
@@ -353,15 +337,15 @@ odoo.define('web.test_utils_dom', function (require) {
         const target = matches[0];
         let event;
 
-        if (!eventTypes[eventType] && !eventTypes[eventType.type]) {
+        if (!EVENT_TYPES[eventType] && !EVENT_TYPES[eventType.type]) {
             event = new Event(eventType, Object.assign({}, eventAttrs, { bubbles: true }));
         } else {
             if (typeof eventType === "object") {
-                const { constructor, processParameters } = eventTypes[eventType.type];
+                const { constructor, processParameters } = EVENT_TYPES[eventType.type];
                 const eventParameters = processParameters(eventType);
                 event = new constructor(eventType.type, eventParameters);
             } else {
-                const { constructor, processParameters } = eventTypes[eventType];
+                const { constructor, processParameters } = EVENT_TYPES[eventType];
                 event = new constructor(eventType, processParameters(eventAttrs));
             }
         }
@@ -370,7 +354,7 @@ odoo.define('web.test_utils_dom', function (require) {
     }
 
     /**
-     * Triggers multiple events on the specified element.
+     * Trigger multiple events on the specified element.
      *
      * @param {EventTarget|EventTarget[]} el
      * @param {string[]} events the events you want to trigger
@@ -387,10 +371,32 @@ odoo.define('web.test_utils_dom', function (require) {
         }
 
         for (let e = 0; e < events.length; e++) {
-            await triggerEvent(el, events[e], {});
+            await triggerEvent(el, events[e]);
         }
     }
 
+    /**
+     * Simulate a keypress event for a given character
+     *
+     * @param {string} char the character, or 'ENTER'
+     * @returns {Promise}
+     */
+    async function triggerKeypressEvent(char) {
+        let keycode;
+        if (char === 'Enter') {
+            keycode = $.ui.keyCode.ENTER;
+        } else if (char === "Tab") {
+            keycode = $.ui.keyCode.TAB;
+        } else {
+            keycode = char.charCodeAt(0);
+        }
+        return triggerEvent(document.body, 'keypress', {
+            key: char,
+            keyCode: keycode,
+            which: keycode,
+        });
+    }
+
     /**
      * simulate a mouse event with a custom event who add the item position. This is
      * sometimes necessary because the basic way to trigger an event (such as
@@ -400,7 +406,7 @@ odoo.define('web.test_utils_dom', function (require) {
      * @param {string} type a mouse event type, such as 'mousedown' or 'mousemove'
      * @returns {Promise}
      */
-    function triggerMouseEvent($el, type) {
+    async function triggerMouseEvent($el, type) {
         const el = $el instanceof jQuery ? $el[0] : $el;
         if (!el) {
             throw new Error(`no target found to trigger MouseEvent`);
@@ -426,9 +432,9 @@ odoo.define('web.test_utils_dom', function (require) {
      * @param {string} type a mouse event type, such as 'mousedown' or 'mousemove'
      * @returns {HTMLElement}
      */
-    function triggerPositionalMouseEvent(x, y, type) {
-        var ev = document.createEvent("MouseEvent");
-        var el = document.elementFromPoint(x, y);
+    async function triggerPositionalMouseEvent(x, y, type) {
+        const ev = document.createEvent("MouseEvent");
+        const el = document.elementFromPoint(x, y);
         ev.initMouseEvent(
             type,
             true /* bubble */,
@@ -442,39 +448,17 @@ odoo.define('web.test_utils_dom', function (require) {
         return el;
     }
 
-    /**
-     * simulate a keypress event for a given character
-     *
-     * @param {string} char the character, or 'ENTER'
-     * @returns {Promise}
-     */
-    function triggerKeypressEvent(char) {
-        var keycode;
-        if (char === 'Enter') {
-            keycode = $.ui.keyCode.ENTER;
-        } else if (char === "Tab") {
-            keycode = $.ui.keyCode.TAB;
-        } else {
-            keycode = char.charCodeAt(0);
-        }
-        return triggerEvent(document.body, 'keypress', {
-            key: char,
-            keyCode: keycode,
-            which: keycode,
-        });
-    }
-
     return {
-        click: click,
-        clickFirst: clickFirst,
-        clickLast: clickLast,
-        dragAndDrop: dragAndDrop,
-        openDatepicker: openDatepicker,
-        returnAfterNextAnimationFrame: returnAfterNextAnimationFrame,
-        triggerEvent: triggerEvent,
-        triggerEvents: triggerEvents,
-        triggerKeypressEvent: triggerKeypressEvent,
-        triggerMouseEvent: triggerMouseEvent,
-        triggerPositionalMouseEvent: triggerPositionalMouseEvent,
+        click,
+        clickFirst,
+        clickLast,
+        dragAndDrop,
+        openDatepicker,
+        returnAfterNextAnimationFrame,
+        triggerEvent,
+        triggerEvents,
+        triggerKeypressEvent,
+        triggerMouseEvent,
+        triggerPositionalMouseEvent,
     };
 });
diff --git a/addons/web/static/tests/helpers/test_utils_fields.js b/addons/web/static/tests/helpers/test_utils_fields.js
index 4646fd98d83..060cfc1d437 100644
--- a/addons/web/static/tests/helpers/test_utils_fields.js
+++ b/addons/web/static/tests/helpers/test_utils_fields.js
@@ -10,8 +10,14 @@ odoo.define('web.test_utils_fields', function (require) {
      * testUtils file.
      */
 
-    var concurrency = require('web.concurrency');
-    var domUtils = require('web.test_utils_dom');
+    const testUtilsDom = require('web.test_utils_dom');
+
+    const ARROW_KEYS_MAPPING = {
+        down: 'ArrowDown',
+        left: 'ArrowLeft',
+        right: 'ArrowRight',
+        up: 'ArrowUp',
+    };
 
     //-------------------------------------------------------------------------
     // Public functions
@@ -23,13 +29,13 @@ odoo.define('web.test_utils_fields', function (require) {
      * @param {string} fieldName
      * @param {[string]} selector if set, this will restrict the search for the m2o
      *    input
+     * @returns {Promise}
      */
-    function clickM2OHighlightedItem(fieldName, selector) {
-        var m2oSelector = `${selector || ''} .o_field_many2one[name=${fieldName}] input`;
-        var $dropdown = $(m2oSelector).autocomplete('widget');
+    async function clickM2OHighlightedItem(fieldName, selector) {
+        const m2oSelector = `${selector || ''} .o_field_many2one[name=${fieldName}] input`;
+        const $dropdown = $(m2oSelector).autocomplete('widget');
         // clicking on an li (no matter which one), will select the focussed one
-        $dropdown.find('li:first()').click();
-        return concurrency.delay(0);
+        return testUtilsDom.click($dropdown[0].querySelector('li'));
     }
 
     /**
@@ -44,17 +50,15 @@ odoo.define('web.test_utils_fields', function (require) {
      * @param {string} searchText
      * @returns {Promise}
      */
-    function clickM2OItem(fieldName, searchText) {
-        var m2oSelector = `.o_field_many2one[name=${fieldName}] input`;
-        var $dropdown = $(m2oSelector).autocomplete('widget');
-        var $target = $dropdown.find(`li:contains(${searchText})`).first();
+    async function clickM2OItem(fieldName, searchText) {
+        const m2oSelector = `.o_field_many2one[name=${fieldName}] input`;
+        const $dropdown = $(m2oSelector).autocomplete('widget');
+        const $target = $dropdown.find(`li:contains(${searchText})`).first();
         if ($target.length !== 1 || !$target.is(':visible')) {
-            throw new Error('Menu item should be unique and visible');
+            throw new Error('Menu item should be visible');
         }
-        $target.mouseenter();
-        $target.click();
-
-        return concurrency.delay(0);
+        $target.mouseenter(); // This is NOT a mouseenter event. See jquery.js:5516 for more headaches.
+        return testUtilsDom.click($target);
     }
 
     /**
@@ -63,16 +67,16 @@ odoo.define('web.test_utils_fields', function (require) {
      * @param {string} fieldName
      * @param {[string]} selector if set, this will restrict the search for the m2o
      *    input
-     * @returns {HTMLInputElement} the main many2one input
+     * @returns {Promise<HTMLInputElement>} the main many2one input
      */
     async function clickOpenM2ODropdown(fieldName, selector) {
-        var m2oSelector = `${selector || ''} .o_field_many2one[name=${fieldName}] input`;
-        var matches = document.querySelectorAll(m2oSelector);
+        const m2oSelector = `${selector || ''} .o_field_many2one[name=${fieldName}] input`;
+        const matches = document.querySelectorAll(m2oSelector);
         if (matches.length !== 1) {
             throw new Error(`cannot open m2o: selector ${selector} has been found ${matches.length} instead of 1`);
         }
 
-        await domUtils.click(matches[0]);
+        await testUtilsDom.click(matches[0]);
         return matches[0];
     }
 
@@ -88,7 +92,7 @@ odoo.define('web.test_utils_fields', function (require) {
      * @param {string[]} events
      * @returns {Promise}
      */
-    function editAndTrigger(el, value, events) {
+    async function editAndTrigger(el, value, events) {
         if (el instanceof jQuery) {
             if (el.length !== 1) {
                 throw new Error(`target ${el.selector} has length ${el.length} instead of 1`);
@@ -97,7 +101,7 @@ odoo.define('web.test_utils_fields', function (require) {
         } else {
             el.value = value;
         }
-        return domUtils.triggerEvents(el, events);
+        return testUtilsDom.triggerEvents(el, events);
     }
 
     /**
@@ -112,7 +116,7 @@ odoo.define('web.test_utils_fields', function (require) {
      * @param {string|number} value
      * @returns {Promise}
      */
-    function editInput(el, value) {
+    async function editInput(el, value) {
         return editAndTrigger(el, value, ['input']);
     }
 
@@ -143,30 +147,22 @@ odoo.define('web.test_utils_fields', function (require) {
      *    testUtils.fields.many2one.searchAndClickM2OItem('partner_id', {search: 'George'});
      *
      * @param {string} fieldName
-     * @param {[Object]} options
-     * @param {[string]} options.selector
-     * @param {[string]} options.search
-     * @param {[string]} options.item
+     * @param {[Object]} [options = {}]
+     * @param {[string]} [options.selector]
+     * @param {[string]} [options.search]
+     * @param {[string]} [options.item]
      * @returns {Promise}
      */
-    function searchAndClickM2OItem(fieldName, options) {
-        options = options || {};
-
-        return clickOpenM2ODropdown(fieldName, options.selector).then(function (input) {
-            var def;
-            if (options.search) {
-                input.value = options.search;
-                input.dispatchEvent(new Event('input'));
-                def = concurrency.delay(0);
-            }
-            return Promise.resolve(def).then(function () {
-                if (options.item) {
-                    return clickM2OItem(fieldName, options.item);
-                } else {
-                    return clickM2OHighlightedItem(fieldName, options.selector);
-                }
-            });
-        });
+    async function searchAndClickM2OItem(fieldName, options = {}) {
+        const input = await clickOpenM2ODropdown(fieldName, options.selector);
+        if (options.search) {
+            await editInput(input, options.search);
+        }
+        if (options.item) {
+            return clickM2OItem(fieldName, options.item);
+        } else {
+            return clickM2OHighlightedItem(fieldName, options.selector);
+        }
     }
 
     /**
@@ -181,7 +177,15 @@ odoo.define('web.test_utils_fields', function (require) {
      */
     function triggerKey(type, $el, keyCode) {
         type = 'key' + type;
+        const params = {};
         if (typeof keyCode === 'string') {
+            // Key (new API)
+            if (keyCode in ARROW_KEYS_MAPPING) {
+                params.key = ARROW_KEYS_MAPPING[keyCode];
+            } else {
+                params.key = keyCode[0].toUpperCase() + keyCode.slice(1).toLowerCase();
+            }
+            // KeyCode/which (jQuery)
             if (keyCode.length > 1) {
                 keyCode = keyCode.toUpperCase();
                 keyCode = $.ui.keyCode[keyCode];
@@ -189,8 +193,9 @@ odoo.define('web.test_utils_fields', function (require) {
                 keyCode = keyCode.charCodeAt(0);
             }
         }
-        $el.trigger({ type: type, which: keyCode, keyCode: keyCode });
-        return concurrency.delay(0);
+        params.keyCode = keyCode;
+        params.which = keyCode;
+        return testUtilsDom.triggerEvent($el, type, params);
     }
 
     /**
@@ -216,15 +221,15 @@ odoo.define('web.test_utils_fields', function (require) {
     }
 
     return {
-        clickM2OHighlightedItem: clickM2OHighlightedItem,
-        clickM2OItem: clickM2OItem,
-        clickOpenM2ODropdown: clickOpenM2ODropdown,
-        editAndTrigger: editAndTrigger,
-        editInput: editInput,
-        editSelect: editSelect,
-        searchAndClickM2OItem: searchAndClickM2OItem,
-        triggerKey: triggerKey,
-        triggerKeydown: triggerKeydown,
-        triggerKeyup: triggerKeyup,
+        clickM2OHighlightedItem,
+        clickM2OItem,
+        clickOpenM2ODropdown,
+        editAndTrigger,
+        editInput,
+        editSelect,
+        searchAndClickM2OItem,
+        triggerKey,
+        triggerKeydown,
+        triggerKeyup,
     };
 });
diff --git a/addons/web/static/tests/helpers/test_utils_mock.js b/addons/web/static/tests/helpers/test_utils_mock.js
index e72dcc0d692..bb2d1ef24a5 100644
--- a/addons/web/static/tests/helpers/test_utils_mock.js
+++ b/addons/web/static/tests/helpers/test_utils_mock.js
@@ -465,7 +465,7 @@ function intercept(widget, eventName, fn, propagate) {
  * @param {integer} hours the digits for hours (24h)
  * @param {integer} minutes
  * @param {integer} seconds
- * @returns {function} a callback to unpatch window.Date.
+ * @returns {Function} a callback to unpatch window.Date.
  */
 function patchDate(year, month, day, hours, minutes, seconds) {
     var RealDate = window.Date;
diff --git a/addons/web/static/tests/helpers/test_utils_modal.js b/addons/web/static/tests/helpers/test_utils_modal.js
index 5587eecfc01..ca3eeef11a7 100644
--- a/addons/web/static/tests/helpers/test_utils_modal.js
+++ b/addons/web/static/tests/helpers/test_utils_modal.js
@@ -1,36 +1,26 @@
 odoo.define('web.test_utils_modal', function (require) {
-"use strict";
+    "use strict";
 
-/**
- * Modal Test Utils
- *
- * This module defines various utility functions to help test pivot views.
- *
- * Note that all methods defined in this module are exported in the main
- * testUtils file.
- */
+    /**
+     * Modal Test Utils
+     *
+     * This module defines various utility functions to help test pivot views.
+     *
+     * Note that all methods defined in this module are exported in the main
+     * testUtils file.
+     */
 
-var core = require('web.core');
-var concurrency = require('web.concurrency');
+    const { _t } = require('web.core');
+    const testUtilsDom = require('web.test_utils_dom');
 
-/**
- * Click on a button in the footer of a modal (which contains a given string).
- * Note that this method checks the unicity of the button.
- *
- * @param {string} text (in english: this method will perform the translation)
- */
-function clickButton(text) {
-    var selector = `.modal-footer button:contains(${core._t(text)})`;
-    var $button = $(selector);
-    if ($button.length !== 1) {
-        throw new Error(`Found ${$button.length} button(s) containing '${text}'`);
+    /**
+     * Click on a button in the footer of a modal (which contains a given string).
+     *
+     * @param {string} text (in english: this method will perform the translation)
+     */
+    function clickButton(text) {
+        return testUtilsDom.click($(`.modal-footer button:contains(${_t(text)})`));
     }
-    $button.click();
-    return concurrency.delay(0);
-}
-
-return {
-    clickButton: clickButton,
-};
 
+    return { clickButton };
 });
diff --git a/addons/web_editor/static/tests/test_utils.js b/addons/web_editor/static/tests/test_utils.js
index a4e814a0f68..b5b14d82d03 100644
--- a/addons/web_editor/static/tests/test_utils.js
+++ b/addons/web_editor/static/tests/test_utils.js
@@ -8,6 +8,80 @@ var Widget = require('web.Widget');
 var Wysiwyg = require('web_editor.wysiwyg');
 var options = require('web_editor.snippets.options');
 
+const COLOR_PICKER_TEMPLATE = `
+    <t t-name="web_editor.colorpicker">
+        <colorpicker>
+            <div class="o_colorpicker_section" data-name="theme" data-display="Theme Colors" data-icon-class="fa fa-flask">
+                <button data-color="alpha"/>
+                <button data-color="beta"/>
+                <button data-color="gamma"/>
+                <button data-color="delta"/>
+                <button data-color="epsilon"/>
+            </div>
+            <div class="o_colorpicker_section" data-name="transparent_grayscale" data-display="Transparent Colors" data-icon-class="fa fa-eye-slash">
+                <button class="o_btn_transparent"/>
+                <button data-color="black-25"/>
+                <button data-color="black-50"/>
+                <button data-color="black-75"/>
+                <button data-color="white-25"/>
+                <button data-color="white-50"/>
+                <button data-color="white-75"/>
+            </div>
+            <div class="o_colorpicker_section" data-name="common" data-display="Common Colors" data-icon-class="fa fa-paint-brush"/>
+        </colorpicker>
+    </t>`;
+const SNIPPETS_TEMPLATE = `
+    <h2 id="snippets_menu">Add blocks</h2>
+    <div id="o_scroll">
+        <div id="snippet_structure" class="o_panel">
+            <div class="o_panel_header">
+                <i class="fa fa-th-large"/> First Panel
+            </div>
+            <div class="o_panel_body">
+                <div name="Separator" data-oe-type="snippet" data-oe-thumbnail="/website/static/src/img/snippets_thumbs/s_separator.png">
+                    <div class="s_hr pt32 pb32">
+                        <hr class="s_hr_1px s_hr_solid w-100 mx-auto"/>
+                    </div>
+                </div>
+                <div name="Content" data-oe-type="snippet" data-oe-thumbnail="/website/static/src/img/snippets_thumbs/s_text_block.png">
+                    <section name="Content+Options" class="test_option_all pt32 pb32" data-oe-type="snippet" data-oe-thumbnail="/website/static/src/img/snippets_thumbs/s_text_block.png">
+                        <div class="container">
+                            <div class="row">
+                                <div class="col-lg-10 offset-lg-1 pt32 pb32">
+                                    <h2>Title</h2>
+                                    <p class="lead o_default_snippet_text">Content</p>
+                                </div>
+                            </div>
+                        </div>
+                    </section>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="snippet_options" class="d-none">
+        <div data-js="many2one" data-selector="[data-oe-many2one-model]:not([data-oe-readonly])" data-no-check="true"/>
+        <div data-js="content"
+            data-selector=".s_hr, .test_option_all"
+            data-drop-in=".note-editable"
+            data-drop-near="p, h1, h2, h3, blockquote, .s_hr"/>
+        <div data-js="sizing_y" data-selector=".s_hr, .test_option_all"/>
+        <div data-selector=".test_option_all">
+            <we-colorpicker string="Background Color" data-select-style="true" data-css-property="background-color" data-color-prefix="bg-"/>
+        </div>
+        <div data-js="background" data-selector=".test_option_all">
+            <we-button data-choose-image="true" data-no-preview="true">
+                <i class="fa fa-picture-o"/> Background Image
+            </we-button>
+        </div>
+        <div data-js="option_test" data-selector=".s_hr">
+            <we-select string="Alignment">
+                <we-button data-select-class="align-items-start">Top</we-button>
+                <we-button data-select-class="align-items-center">Middle</we-button>
+                <we-button data-select-class="align-items-end">Bottom</we-button>
+                <we-button data-select-class="align-items-stretch">Equal height</we-button>
+            </we-select>
+        </div>
+    </div>`;
 
 MockServer.include({
     //--------------------------------------------------------------------------
@@ -19,84 +93,16 @@ MockServer.include({
      * @private
      * @returns {Promise}
      */
-    _performRpc: function (route, args) {
+    async _performRpc(route, args) {
         if (args.model === "ir.ui.view") {
             if (args.method === 'read_template' && args.args[0] === "web_editor.colorpicker") {
-                var template = '<templates><t t-name="web_editor.colorpicker">' +
-                        '<colorpicker>' +
-                        '    <div class="o_colorpicker_section" data-name="theme" data-display="Theme Colors" data-icon-class="fa fa-flask">' +
-                        '        <button data-color="alpha"></button>' +
-                        '        <button data-color="beta"></button>' +
-                        '        <button data-color="gamma"></button>' +
-                        '        <button data-color="delta"></button>' +
-                        '        <button data-color="epsilon"></button>' +
-                        '    </div>' +
-                        '    <div class="o_colorpicker_section" data-name="transparent_grayscale" data-display="Transparent Colors" data-icon-class="fa fa-eye-slash">' +
-                        '        <button class="o_btn_transparent"></button>' +
-                        '        <button data-color="black-25"></button>' +
-                        '        <button data-color="black-50"></button>' +
-                        '        <button data-color="black-75"></button>' +
-                        '        <button data-color="white-25"></button>' +
-                        '        <button data-color="white-50"></button>' +
-                        '        <button data-color="white-75"></button>' +
-                        '    </div>' +
-                        '    <div class="o_colorpicker_section" data-name="common" data-display="Common Colors" data-icon-class="fa fa-paint-brush"></div>' +
-                        '</colorpicker>' +
-                        '</t></templates>';
-                return Promise.resolve(template);
+                return COLOR_PICKER_TEMPLATE;
             }
             if (args.method === 'render_template' && args.args[0] === "web_editor.snippets") {
-                var template = '<h2 id="snippets_menu">Add blocks</h2>' +
-                        '<div id="o_scroll">' +
-                        '    <div id="snippet_structure" class="o_panel">' +
-                        '        <div class="o_panel_header">' +
-                        '            <i class="fa fa-th-large"></i> First Panel' +
-                        '        </div>' +
-                        '        <div class="o_panel_body">' +
-                        '            <div name="Separator" data-oe-type="snippet" data-oe-thumbnail="/website/static/src/img/snippets_thumbs/s_separator.png">' +
-                        '                <div class="s_hr pt32 pb32">' +
-                        '                    <hr class="s_hr_1px s_hr_solid w-100 mx-auto"/>' +
-                        '                </div>' +
-                        '            </div>' +
-                        '            <div name="Content" data-oe-type="snippet" data-oe-thumbnail="/website/static/src/img/snippets_thumbs/s_text_block.png">' +
-                        '                <section name="Content+Options" class="test_option_all pt32 pb32" data-oe-type="snippet" data-oe-thumbnail="/website/static/src/img/snippets_thumbs/s_text_block.png">' +
-                        '                    <div class="container">' +
-                        '                        <div class="row">' +
-                        '                            <div class="col-lg-10 offset-lg-1 pt32 pb32">' +
-                        '                                <h2>Title</h2>' +
-                        '                                 <p class="lead o_default_snippet_text">Content</p>' +
-                        '                             </div>' +
-                        '                         </div>' +
-                        '                     </div>' +
-                        '                </section>' +
-                        '            </div>' +
-                        '        </div>' +
-                        '    </div>' +
-                        '</div>' +
-                        '<div id="snippet_options" class="d-none">' +
-                        '    <div data-js="many2one" data-selector="[data-oe-many2one-model]:not([data-oe-readonly])" data-no-check="true"></div>' +
-                        '    <div data-js="content" data-selector=".s_hr, .test_option_all" ' +
-                        'data-drop-in=".note-editable" data-drop-near="p, h1, h2, h3, blockquote, .s_hr"></div>' +
-                        '    <div data-js="sizing_y" data-selector=".s_hr, .test_option_all"></div>' +
-                        '    <div data-selector=".test_option_all">' +
-                        '        <we-colorpicker string="Background Color" data-select-style="true" data-css-property="background-color" data-color-prefix="bg-"/>' +
-                        '    </div>' +
-                        '    <div data-js="background" data-selector=".test_option_all">' +
-                        '       <we-button data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/> Background Image</we-button>' +
-                        '    </div>' +
-                        '    <div data-js="option_test" data-selector=".s_hr">' +
-                        '        <we-select string="Alignment">' +
-                        '            <we-button data-select-class="align-items-start">Top</we-button>' +
-                        '            <we-button data-select-class="align-items-center">Middle</we-button>' +
-                        '            <we-button data-select-class="align-items-end">Bottom</we-button>' +
-                        '            <we-button data-select-class="align-items-stretch">Equal height</we-button>' +
-                        '        </we-select>' +
-                        '    </div>' +
-                        '</div>';
-                return Promise.resolve(template);
+                return SNIPPETS_TEMPLATE;
             }
         }
-        return this._super.apply(this, arguments);
+        return this._super(...arguments);
     },
 });
 
@@ -188,80 +194,14 @@ function wysiwygData(data) {
                 },
             },
             records: [],
-            read_template: function (args) {
+            read_template(args) {
                 if (args[0] === 'web_editor.colorpicker') {
-                    return '<templates><t t-name="web_editor.colorpicker">' +
-                        '<colorpicker>' +
-                        '    <div class="o_colorpicker_section" data-name="theme" data-display="Theme Colors" data-icon-class="fa fa-flask">' +
-                        '        <button data-color="alpha"></button>' +
-                        '        <button data-color="beta"></button>' +
-                        '        <button data-color="gamma"></button>' +
-                        '        <button data-color="delta"></button>' +
-                        '        <button data-color="epsilon"></button>' +
-                        '    </div>' +
-                        '    <div class="o_colorpicker_section" data-name="transparent_grayscale" data-display="Transparent Colors" data-icon-class="fa fa-eye-slash">' +
-                        '        <button class="o_btn_transparent"></button>' +
-                        '        <button data-color="black-25"></button>' +
-                        '        <button data-color="black-50"></button>' +
-                        '        <button data-color="black-75"></button>' +
-                        '        <button data-color="white-25"></button>' +
-                        '        <button data-color="white-50"></button>' +
-                        '        <button data-color="white-75"></button>' +
-                        '    </div>' +
-                        '    <div class="o_colorpicker_section" data-name="common" data-display="Common Colors" data-icon-class="fa fa-paint-brush"></div>' +
-                        '</colorpicker>' +
-                        '</t></templates>';
+                    return COLOR_PICKER_TEMPLATE;
                 }
             },
-            render_template: function (args) {
+            render_template(args) {
                 if (args[0] === 'web_editor.snippets') {
-                    return '<h2 id="snippets_menu">Add blocks</h2>' +
-                        '<div id="o_scroll">' +
-                        '    <div id="snippet_structure" class="o_panel">' +
-                        '        <div class="o_panel_header">' +
-                        '            <i class="fa fa-th-large"></i> First Panel' +
-                        '        </div>' +
-                        '        <div class="o_panel_body">' +
-                        '            <div name="Separator" data-oe-type="snippet" data-oe-thumbnail="/website/static/src/img/snippets_thumbs/s_separator.png">' +
-                        '                <div class="s_hr pt32 pb32">' +
-                        '                    <hr class="s_hr_1px s_hr_solid w-100 mx-auto"/>' +
-                        '                </div>' +
-                        '            </div>' +
-                        '            <div name="Content" data-oe-type="snippet" data-oe-thumbnail="/website/static/src/img/snippets_thumbs/s_text_block.png">' +
-                        '                <section name="Content+Options" class="test_option_all pt32 pb32" data-oe-type="snippet" data-oe-thumbnail="/website/static/src/img/snippets_thumbs/s_text_block.png">' +
-                        '                    <div class="container">' +
-                        '                        <div class="row">' +
-                        '                            <div class="col-lg-10 offset-lg-1 pt32 pb32">' +
-                        '                                <h2>Title</h2>' +
-                        '                                 <p class="lead o_default_snippet_text">Content</p>' +
-                        '                             </div>' +
-                        '                         </div>' +
-                        '                     </div>' +
-                        '                </section>' +
-                        '            </div>' +
-                        '        </div>' +
-                        '    </div>' +
-                        '</div>' +
-                        '<div id="snippet_options" class="d-none">' +
-                        '    <div data-js="many2one" data-selector="[data-oe-many2one-model]:not([data-oe-readonly])" data-no-check="true"></div>' +
-                        '    <div data-js="content" data-selector=".s_hr, .test_option_all" ' +
-                        'data-drop-in=".note-editable" data-drop-near="p, h1, h2, h3, blockquote, .s_hr"></div>' +
-                        '    <div data-js="sizing_y" data-selector=".s_hr, .test_option_all"></div>' +
-                        '    <div data-selector=".test_option_all">' +
-                        '        <we-colorpicker string="Background Color" data-select-style="true" data-css-property="background-color" data-color-prefix="bg-"/>' +
-                        '    </div>' +
-                        '    <div data-js="background" data-selector=".test_option_all">' +
-                        '       <we-button data-choose-image="true" data-no-preview="true"><i class="fa fa-picture-o"/> Background Image</we-button>' +
-                        '    </div>' +
-                        '    <div data-js="option_test" data-selector=".s_hr">' +
-                        '        <we-select string="Alignment">' +
-                        '            <we-button data-select-class="align-items-start">Top</we-button>' +
-                        '            <we-button data-select-class="align-items-center">Middle</we-button>' +
-                        '            <we-button data-select-class="align-items-end">Bottom</we-button>' +
-                        '            <we-button data-select-class="align-items-stretch">Equal height</we-button>' +
-                        '        </we-select>' +
-                        '    </div>' +
-                        '</div>';
+                    return SNIPPETS_TEMPLATE;
                 }
             },
         },
@@ -758,7 +698,7 @@ var textInput = function (target, char) {
     if (!ev.defaultPrevented) {
         document.execCommand("insertText", 0, ev.data);
     }
-}
+};
 
 return {
     wysiwygData: wysiwygData,

From da8790f0bb3d561cda9a9db95a3e980f91a8e7fd Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Tue, 14 Jan 2020 10:45:41 +0000
Subject: [PATCH 03/10] [IMP] web: Dialog: add option to stop click propagation

There are situations where we don't want clicks to be detected behind an opened
dialog: for example, when a dialog is opened by a dropdown, we may want to keep the
dropdown open while we interact with the dialog.

There is now an option (default: true) to stop clicks propagation when
they arrive at the dialog container.
---
 addons/web/static/src/js/core/owl_dialog.js | 28 +++++++++++++++------
 addons/web/static/src/xml/base.xml          |  2 +-
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/addons/web/static/src/js/core/owl_dialog.js b/addons/web/static/src/js/core/owl_dialog.js
index 41b0dbf4562..d376e042ae4 100644
--- a/addons/web/static/src/js/core/owl_dialog.js
+++ b/addons/web/static/src/js/core/owl_dialog.js
@@ -31,6 +31,8 @@ odoo.define('web.OwlDialog', function () {
          *      should be rendered.
          * @param {string} [props.size='large'] 'extra-large', 'large', 'medium'
          *      or 'small'.
+         * @param {string} [props.stopClicks=true] whether the dialog should stop
+         *      the clicks propagation outside of itself.
          * @param {string} [props.subtitle='']
          * @param {string} [props.title='Odoo']
          * @param {boolean} [props.technical=true] If set to false, the modal will have
@@ -71,7 +73,7 @@ odoo.define('web.OwlDialog', function () {
             this._removeTooltips();
         }
 
-        async willUnmount() {
+        willUnmount() {
             this.env.bus.off('close_dialogs', this, this._close);
 
             this._removeTooltips();
@@ -129,6 +131,16 @@ odoo.define('web.OwlDialog', function () {
             }
         }
 
+        /**
+         * @private
+         * @param {MouseEvent} ev
+         */
+        _onClick(ev) {
+            if (this.props.stopClicks) {
+                ev.stopPropagation();
+            }
+        }
+
         /**
          * @private
          */
@@ -235,19 +247,21 @@ odoo.define('web.OwlDialog', function () {
         renderFooter: true,
         renderHeader: true,
         size: 'large',
+        stopClicks: true,
         technical: true,
         title: "Odoo",
     };
     Dialog.props = {
-        backdrop: { validate: b => ['static', true, false].includes(b), optional: 1 },
+        backdrop: { validate: b => ['static', true, false].includes(b) },
         contentClass: { type: String, optional: 1 },
         fullscreen: { type: Boolean, optional: 1 },
-        renderFooter: { type: Boolean, optional: 1 },
-        renderHeader: { type: Boolean, optional: 1 },
-        size: { validate: s => ['extra-large', 'large', 'medium', 'small'].includes(s), optional: 1 },
+        renderFooter: Boolean,
+        renderHeader: Boolean,
+        size: { validate: s => ['extra-large', 'large', 'medium', 'small'].includes(s) },
+        stopClicks: Boolean,
         subtitle: { type: String, optional: 1 },
-        technical: { type: Boolean, optional: 1 },
-        title: { type: String, optional: 1 },
+        technical: Boolean,
+        title: String,
     };
     Dialog.template = 'OwlDialog';
 
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 363097c6d89..07919bcfa84 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -28,7 +28,7 @@
 
 <t t-name="OwlDialog" owl="1">
     <Portal target="'body'">
-        <div class="o_dialog" t-on-focus="_onFocus">
+        <div class="o_dialog" t-on-focus="_onFocus" t-on-click="_onClick">
             <div t-if="props.backdrop" class="modal-backdrop show" t-on-click="_onBackdropClick"/>
             <div role="dialog" class="modal"
                 tabindex="-1"

From 72f1633532a586e1ccee4d2a961d745553b9d8b8 Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Wed, 11 Mar 2020 09:38:26 +0000
Subject: [PATCH 04/10] [REF] web: Move control panel mobile to enterprise

Now that mobile is not supported anymore in community, the mobile layout of the
control panel has been entirely moved to enterprise. This caused some conflicts
with the community mobile test suite (which does not make sense anyway). The failing
tests and related style sheets have been moved as well.

Part of task 2196029

Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
---
 .../mobile_control_panel_controller.js        |  34 ----
 .../mobile_control_panel_renderer.js          | 122 ------------
 .../static/src/scss/search_view_mobile.scss   |  90 ---------
 .../static/src/scss/web_calendar_mobile.scss  |  18 --
 .../chrome/action_manager_mobile_tests.js     | 188 ------------------
 .../tests/views/calendar_mobile_tests.js      |  65 ------
 .../tests/views/mobile_control_panel_tests.js | 141 -------------
 addons/web/views/webclient_templates.xml      |   7 -
 8 files changed, 665 deletions(-)
 delete mode 100644 addons/web/static/src/js/views/control_panel/mobile_control_panel_controller.js
 delete mode 100644 addons/web/static/src/js/views/control_panel/mobile_control_panel_renderer.js
 delete mode 100644 addons/web/static/src/scss/search_view_mobile.scss
 delete mode 100644 addons/web/static/src/scss/web_calendar_mobile.scss
 delete mode 100644 addons/web/static/tests/chrome/action_manager_mobile_tests.js
 delete mode 100644 addons/web/static/tests/views/calendar_mobile_tests.js
 delete mode 100644 addons/web/static/tests/views/mobile_control_panel_tests.js

diff --git a/addons/web/static/src/js/views/control_panel/mobile_control_panel_controller.js b/addons/web/static/src/js/views/control_panel/mobile_control_panel_controller.js
deleted file mode 100644
index 92537c4d8e0..00000000000
--- a/addons/web/static/src/js/views/control_panel/mobile_control_panel_controller.js
+++ /dev/null
@@ -1,34 +0,0 @@
- odoo.define('web.MobileControlPanelController', function (require) {
-"use strict";
-
-var config = require('web.config');
-var ControlPanelController = require('web.ControlPanelController');
-
-if (!config.device.isMobile) {
-    return;
-}
-
-ControlPanelController.include({
-    custom_events:_.extend({}, ControlPanelController.prototype.custom_events, {
-        'search_bar_cleared': '_onSearchBarCleared',
-    }),
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * There is a 'Clear' button in the mobile control panel view.
-     *
-     * @private
-     */
-    _onSearchBarCleared: function () {
-        var self = this;
-        this.model.get().query.forEach(function (groupId) {
-            self.model.deactivateGroup(groupId);
-        });
-        this._reportNewQueryAndRender();
-    },
-});
-
-});
diff --git a/addons/web/static/src/js/views/control_panel/mobile_control_panel_renderer.js b/addons/web/static/src/js/views/control_panel/mobile_control_panel_renderer.js
deleted file mode 100644
index 2110fcb2ca1..00000000000
--- a/addons/web/static/src/js/views/control_panel/mobile_control_panel_renderer.js
+++ /dev/null
@@ -1,122 +0,0 @@
- odoo.define('web.MobileControlPanelRenderer', function (require) {
-"use strict";
-
-var config = require('web.config');
-var ControlPanelRenderer = require('web.ControlPanelRenderer');
-
-if (!config.device.isMobile) {
-    return;
-}
-
-ControlPanelRenderer.include({
-    events:_.extend({}, ControlPanelRenderer.prototype.events, {
-        'click .o_mobile_search_close, .o_mobile_search_show_result, .o_toggle_searchview_full': '_toggleMobileSearchView',
-        'click .o_enable_searchview': '_toggleMobileQuickSearchView',
-        'click .o_toggle_searchview_full': '_onOpenMobileSearchView',
-        'click .o_mobile_search_clear_facets': '_onEmptyAll',
-        'show.bs.dropdown .o_mobile_search_filter .o_dropdown': '_onDropdownToggle',
-        'hide.bs.dropdown .o_mobile_search_filter .o_dropdown': '_onDropdownToggle',
-    }),
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Overridden to correctly place submenu inside the mobile section.
-     *
-     * @private
-     * @override
-     */
-    _getSubMenusPlace: function () {
-        return this.$('.o_mobile_search_filter');
-    },
-    /**
-     * @private
-     * @override
-     */
-    _render: function () {
-        var self = this;
-        return this._super.apply(this, arguments).then(function () {
-            self.$('.o_mobile_search_clear_facets')
-                .toggleClass('o_hidden', !self.state.query.length);
-        });
-    },
-    /**
-     * @private
-     * @override
-     */
-    _renderSearchBar: function () {
-        var self = this;
-        return this._super.apply(this, arguments).then(function () {
-            self._renderSearchviewInput();
-        });
-    },
-    _renderSearchviewInput: function () {
-        if (this.$('.o_toggle_searchview_full').is(':visible') && !this.$('.o_mobile_search').is(':visible')) {
-            this.$('.o_toggle_searchview_full').toggleClass('btn-secondary', !!this.state.query.length);
-            this.searchBar.$el.detach().insertAfter(this.$('.o_mobile_search'));
-        } else {
-            this.searchBar.$el.detach().insertAfter(this.$('.o_mobile_search_header'));
-        }
-    },
-    /**
-     * Toggles mobile search view screen.
-     *
-     * @private
-     */
-    _toggleMobileSearchView: function () {
-        this.$('.o_mobile_search').toggleClass('o_hidden');
-        this._renderSearchviewInput();
-    },
-    /**
-     * Toggles mobile quick search view on screen.
-     *
-     * @private
-     */
-    _toggleMobileQuickSearchView: function () {
-        this.$('.o_cp_searchview').toggleClass('o_searchview_quick');
-        this.$('.breadcrumb').toggleClass('o_hidden',
-            this.$('.o_cp_searchview').hasClass('o_searchview_quick'));
-        this.$('.o_toggle_searchview_full')
-            .toggleClass('o_hidden')
-            .toggleClass('btn-secondary', !!this.state.query.length);
-        this._renderSearchviewInput();
-        this.$('.o_enable_searchview').toggleClass("fa-search").toggleClass("fa-close");
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * Toggles the little arrow in main buttons.
-     *
-     * @private
-     * @param {BootstrapEvent} ev
-     */
-    _onDropdownToggle: function (ev) {
-        $(ev.currentTarget).find('.fa-chevron-right').toggleClass('fa-chevron-down');
-    },
-    /**
-     * Clears all filters from the search view.
-     *
-     * @private
-     */
-    _onEmptyAll: function () {
-        this.trigger_up('search_bar_cleared');
-    },
-    /**
-     * Opens the mobile search view screen.
-     *
-     * @private
-     * @param {MouseEvent} ev
-     */
-    _onOpenMobileSearchView: function (ev) {
-        if (ev.target === this.el) {
-            this._toggleMobileSearchView();
-        }
-    },
-});
-
-});
diff --git a/addons/web/static/src/scss/search_view_mobile.scss b/addons/web/static/src/scss/search_view_mobile.scss
deleted file mode 100644
index bf68732b2e5..00000000000
--- a/addons/web/static/src/scss/search_view_mobile.scss
+++ /dev/null
@@ -1,90 +0,0 @@
-.o_web_client {
-    .o_mobile_search {
-        position: fixed;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        padding: 0;
-        width: 100%;
-        background-color: white;
-        z-index: $zindex-modal;
-        overflow: auto;
-        .o_mobile_search_header {
-            height: 46px;
-            margin-bottom: 10px;
-            width: 100%;
-            background-color: $o-brand-odoo;
-            color: white;
-            span:active {
-                background-color: darken($o-brand-primary, 10%);
-            }
-        }
-        .o_searchview_input_container {
-            display: flex;
-            padding: 15px 20px 0 20px;
-            position: relative;
-            .o_searchview_input {
-                width: 100%;
-                margin-bottom: 15px;
-                border-bottom: 1px solid $o-brand-secondary;
-            }
-           .o_searchview_facet {
-                border-radius: 10px;
-                display: inline-flex;
-                order:1;
-                .o_searchview_facet_label {
-                    border-radius: 2em 0em 0em 2em;
-                }
-            }
-            .o_searchview_autocomplete {
-                top:100%;
-                > li {
-                    margin: 5px 0px;
-                }
-            }
-        }
-        .o_mobile_search_filter {
-            padding-bottom: 15%;
-            .o_dropdown {
-                width: 100%;
-                margin: 15px 5px 0px 5px;
-                border: solid 1px darken(gray('200'), 20%);
-
-            }
-            .o_dropdown_toggler_btn {
-                width: 100%;
-                text-align: left;
-
-                &:after {
-                    display: none;
-                }
-            }
-
-            // We disable the backdrop in this case because it prevents any
-            // interaction outside of a dropdown while it is open.
-            .dropdown-backdrop {
-                z-index: -1;
-            }
-            .dropdown-menu {
-                // Here we use !important because of popper js adding custom style
-                // to element so to override it use !important
-                position: relative !important;
-                width: 100% !important;
-                transform: translate3d(0, 0, 0) !important;
-                box-shadow: none;
-                border: none;
-                color: gray('600');
-                .divider {
-                    margin: 0px;
-                }
-                > li > a  {
-                    padding: 10px 26px;
-                }
-            }
-        }
-        .o_mobile_search_show_result {
-            padding: 15px;
-            font-size: 17px;
-        }
-    }
-}
diff --git a/addons/web/static/src/scss/web_calendar_mobile.scss b/addons/web/static/src/scss/web_calendar_mobile.scss
deleted file mode 100644
index de4c10fa12f..00000000000
--- a/addons/web/static/src/scss/web_calendar_mobile.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-@include media-breakpoint-down(sm) {
-    .o_control_panel {
-        .o_calendar_button_today {
-            font-size: 0.7em;
-            line-height: 1.9em;
-            > .o_calendar_text {
-                margin-top: 3px;
-            }
-        }
-    }
-
-    .o_calendar_view {
-        .fc-day-header {
-            word-spacing: 1000px; // force line break in week mode
-        }
-    }
-
-}
diff --git a/addons/web/static/tests/chrome/action_manager_mobile_tests.js b/addons/web/static/tests/chrome/action_manager_mobile_tests.js
deleted file mode 100644
index 74f579e6dac..00000000000
--- a/addons/web/static/tests/chrome/action_manager_mobile_tests.js
+++ /dev/null
@@ -1,188 +0,0 @@
-odoo.define('web.action_manager_mobile_tests', function (require) {
-"use strict";
-
-var ActionManager = require('web.ActionManager');
-var testUtils = require('web.test_utils');
-
-var createActionManager = testUtils.createActionManager;
-
-QUnit.module('ActionManager', {
-    beforeEach: function () {
-        this.data = {
-            partner: {
-                fields: {
-                    foo: {string: "Foo", type: "char"},
-                },
-                records: [
-                    {id: 1, display_name: "First record", foo: "yop"},
-                ],
-            },
-        };
-
-        this.actions = [{
-            id: 1,
-            name: 'Partners Action 1',
-            res_model: 'partner',
-            type: 'ir.actions.act_window',
-            views: [[false, 'list'], [false, 'kanban'], [false, 'form']],
-        }, {
-            id: 2,
-            name: 'Partners Action 2',
-            res_model: 'partner',
-            type: 'ir.actions.act_window',
-            views: [[false, 'list'], [false, 'form']],
-        }];
-
-        this.archs = {
-            // kanban views
-            'partner,false,kanban': '<kanban><templates><t t-name="kanban-box">' +
-                    '<div class="oe_kanban_global_click"><field name="foo"/></div>' +
-                '</t></templates></kanban>',
-
-            // list views
-            'partner,false,list': '<tree><field name="foo"/></tree>',
-
-            // form views
-            'partner,false,form': '<form>' +
-                    '<group>' +
-                        '<field name="display_name"/>' +
-                    '</group>' +
-                '</form>',
-
-            // search views
-            'partner,false,search': '<search><field name="foo" string="Foo"/></search>',
-        };
-    },
-}, function () {
-    QUnit.test('uses a mobile-friendly view by default (if possible)', async function (assert) {
-        assert.expect(4);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-        });
-
-        // should default on a mobile-friendly view (kanban) for action 1
-        await actionManager.doAction(1);
-
-        assert.containsNone(actionManager, '.o_list_view');
-        assert.containsOnce(actionManager, '.o_kanban_view');
-
-        // there is no mobile-friendly view for action 2, should use the first one (list)
-        await actionManager.doAction(2);
-
-        assert.containsOnce(actionManager, '.o_list_view');
-        assert.containsNone(actionManager, '.o_kanban_view');
-
-        actionManager.destroy();
-    });
-
-    QUnit.test('lazy load mobile-friendly view', async function (assert) {
-        assert.expect(11);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-            mockRPC: function (route, args) {
-                assert.step(args.method || route);
-                return this._super.apply(this, arguments);
-            },
-        });
-        await actionManager.loadState({
-            action: 1,
-            view_type: 'form',
-        });
-
-        assert.containsNone(actionManager, '.o_list_view');
-        assert.containsNone(actionManager, '.o_kanban_view');
-        assert.containsOnce(actionManager, '.o_form_view');
-
-        // go back to lazy loaded view
-        await testUtils.dom.click(actionManager.$('.o_control_panel .breadcrumb .breadcrumb-item:first'));
-        assert.containsNone(actionManager, '.o_form_view');
-        assert.containsNone(actionManager, '.o_list_view');
-        assert.containsOnce(actionManager, '.o_kanban_view');
-
-        assert.verifySteps([
-            '/web/action/load',
-            'load_views',
-            'default_get', // default_get to open form view
-            '/web/dataset/search_read', // search read when coming back to Kanban
-        ]);
-
-        actionManager.destroy();
-    });
-
-    QUnit.test('view switcher button should be displayed in dropdown on mobile screens', async function (assert) {
-        assert.expect(3);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-        });
-
-        await actionManager.doAction(1);
-
-        assert.containsOnce(actionManager.$('.o_control_panel'), '.o_cp_switch_buttons button[data-toggle="dropdown"]');
-        assert.hasClass(actionManager.$('.o_cp_switch_buttons .o_cp_switch_kanban'), 'active');
-        assert.hasClass(actionManager.$('.o_cp_switch_buttons .o_switch_view_button_icon'), 'fa-th-large');
-
-        actionManager.destroy();
-    });
-
-    QUnit.test('data-mobile attribute on action button, in mobile', async function (assert) {
-        assert.expect(2);
-
-        testUtils.mock.patch(ActionManager, {
-            doAction(action, options) {
-                if (typeof action !== 'number' && action.id === 1) {
-                    assert.strictEqual(options.plop, 28);
-                } else {
-                    assert.strictEqual(options.plop, undefined);
-                }
-                return this._super(...arguments);
-            },
-        });
-
-        this.archs['partner,75,kanban'] = `
-            <kanban>
-                <templates>
-                    <t t-name="kanban-box">
-                        <div class="oe_kanban_global_click">
-                            <field name="display_name"/>
-                            <button 
-                                name="1"
-                                string="Execute action"
-                                type="action"
-                                data-mobile='{"plop": 28}'/>
-                        </div>
-                    </t>
-                </templates>
-            </kanban>`;
-
-        this.actions.push({
-            id: 100,
-            name: 'action 100',
-            res_model: 'partner',
-            type: 'ir.actions.act_window',
-            views: [[75, 'kanban']],
-        });
-
-        const actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data
-        });
-
-        await actionManager.doAction(100, {});
-        await testUtils.dom.click(actionManager.$('button[data-mobile]:first'));
-
-        actionManager.destroy();
-        testUtils.mock.unpatch(ActionManager);
-    });
-});
-
-});
diff --git a/addons/web/static/tests/views/calendar_mobile_tests.js b/addons/web/static/tests/views/calendar_mobile_tests.js
deleted file mode 100644
index 60b5ed5f85f..00000000000
--- a/addons/web/static/tests/views/calendar_mobile_tests.js
+++ /dev/null
@@ -1,65 +0,0 @@
-odoo.define('web.calendar_mobile_tests', function (require) {
-"use strict";
-
-var CalendarView = require('web.CalendarView');
-var testUtils = require('web.test_utils');
-
-var createView = testUtils.createView;
-
-var initialDate = new Date(2016, 11, 12, 8, 0, 0);
-initialDate = new Date(initialDate.getTime() - initialDate.getTimezoneOffset()*60*1000);
-
-
-QUnit.module('Views', {
-    beforeEach: function () {
-        this.data = {
-            event: {
-                fields: {
-                    id: {string: "ID", type: "integer"},
-                    name: {string: "name", type: "char"},
-                    start: {string: "start datetime", type: "datetime"},
-                    stop: {string: "stop datetime", type: "datetime"},
-                },
-                records: [
-                    {id: 1, name: "event 1", start: "2016-12-11 00:00:00", stop: "2016-12-11 00:00:00"},
-                ],
-                check_access_rights: function () {
-                    return Promise.resolve(true);
-                }
-            },
-        };
-    }
-}, function () {
-
-    QUnit.module('CalendarView Mobile');
-
-    QUnit.test('simple calendar rendering in mobile', function (assert) {
-        assert.expect(3);
-        var done = assert.async();
-
-        createView({
-            View: CalendarView,
-            model: 'event',
-            data: this.data,
-            arch: '<calendar date_start="start" date_stop="stop">' +
-                    '<field name="name"/>' +
-                '</calendar>',
-            viewOptions: {
-                initialDate: initialDate,
-            },
-        }).then(function (calendar) {
-
-            assert.notOk(calendar.$buttons.find('.o_calendar_button_prev').is(':visible'),
-                "prev button should be hidden");
-            assert.notOk(calendar.$buttons.find('.o_calendar_button_next').is(':visible'),
-                "next button should be hidden");
-            assert.ok($('.o_control_panel .o_cp_pager .o_calendar_button_today').is(':visible'),
-                "today button should be visible in the pager area (bottom right corner)");
-
-            calendar.destroy();
-            done();
-        });
-    });
-});
-
-});
diff --git a/addons/web/static/tests/views/mobile_control_panel_tests.js b/addons/web/static/tests/views/mobile_control_panel_tests.js
deleted file mode 100644
index be0d197ef44..00000000000
--- a/addons/web/static/tests/views/mobile_control_panel_tests.js
+++ /dev/null
@@ -1,141 +0,0 @@
-odoo.define('web.search_tests', function (require) {
-"use strict";
-
-var testUtils = require('web.test_utils');
-
-var createActionManager = testUtils.createActionManager;
-
-QUnit.module('Mobile Search view Screen', {
-    beforeEach: function () {
-        this.data = {
-            partner: {
-                fields: {
-                    foo: {string: "Foo", type: "char"},
-                    boolean_field: {string: "I am a boolean", type: "boolean"},
-                },
-                records: [
-                    {id: 1, display_name: "First record", foo: "yop"},
-                ],
-            },
-        };
-
-        this.actions = [{
-            id: 1,
-            name: 'Partners Action 1',
-            res_model: 'partner',
-            type: 'ir.actions.act_window',
-            views: [[false, 'list']],
-        }];
-
-        this.archs = {
-            // list views
-            'partner,false,list': '<tree><field name="foo"/></tree>',
-
-            // search views
-            'partner,false,search': '<search>' +
-                    '<filter string="Active" name="my_projects" domain="[(\'boolean_field\', \'=\', True)]"/>' +
-                    '<field name="foo" string="Foo"/>' +
-                '</search>',
-        };
-    },
-}, function () {
-    QUnit.test('can activate a filter with mobile search view in quick search mode', async function (assert) {
-        assert.expect(7);
-
-        var searchRPCFlag = false;
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-            mockRPC: function (route, args) {
-                if (searchRPCFlag) {
-                    assert.deepEqual(args.domain, [['foo', 'ilike', 'A']],
-                        "domain should have been properly transferred to list view");
-                }
-                return this._super.apply(this, arguments);
-            },
-        });
-
-        await actionManager.doAction(1);
-
-        assert.strictEqual($('button.o_enable_searchview.fa-search').length, 1,
-            "should display a button to open the searchview");
-        assert.deepEqual($('.o_searchview_input_container:visible').length, 0,
-            "Quick search input should be hidden");
-
-        // open the search view
-        await testUtils.dom.click($('button.o_enable_searchview'));
-        assert.deepEqual($('.o_toggle_searchview_full:visible').length, 1,
-            "should display a button to expand the searchview");
-        assert.deepEqual($('.o_searchview_input_container:visible').length, 1,
-            "Quick search input should now be visible");
-
-        searchRPCFlag = true;
-
-        // use quick search input
-        $('.o_searchview_input')
-            .val("A")
-            .trigger($.Event('keypress', { which: 65, keyCode: 65 }));
-        await testUtils.nextTick();
-        actionManager.$('.o_searchview_input')
-            .trigger($.Event('keydown', { which: $.ui.keyCode.ENTER, keyCode: $.ui.keyCode.ENTER }));
-        await testUtils.nextTick();
-
-        // close quick search
-        await testUtils.dom.click($('button.o_enable_searchview.fa-close'));
-        assert.deepEqual($('.o_toggle_searchview_full:visible').length, 0,
-            "Expand icon shoud be hidden");
-        assert.deepEqual($('.o_searchview_input_container:visible').length, 0,
-            "Quick search input should be hidden");
-
-        actionManager.destroy();
-    });
-
-    QUnit.test('can activate a filter with mobile search view in full screen mode', async function (assert) {
-        assert.expect(4);
-
-        var filterActiveFlag = false;
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-            mockRPC: function (route, args) {
-                if (filterActiveFlag) {
-                    assert.deepEqual(args.domain, [['boolean_field', '=', true]],
-                        "domain should have been properly transferred to list view");
-                }
-                return this._super.apply(this, arguments);
-            },
-        });
-
-        await actionManager.doAction(1);
-
-        assert.ok(!$('.o_mobile_search').is(':visible'),
-            'mobile search view is not visible');
-
-        // open the search view
-        await testUtils.dom.click($('button.o_enable_searchview'));
-        // open it in full screen
-        await testUtils.dom.click($('.o_toggle_searchview_full'));
-        assert.ok($('.o_mobile_search').is(':visible'),
-            'mobile search view is visible');
-
-        // open filter sub menu
-        await testUtils.dom.click($('button.o_dropdown_toggler_btn').first());
-        filterActiveFlag = true;
-        // click on Active filter
-        await testUtils.dom.click($('.o_filters_menu a:contains(Active)'));
-
-        // closing search view
-        await testUtils.dom.click($('.o_mobile_search_close'));
-        assert.ok(!$('.o_mobile_search').is(':visible'),
-            'mobile search view is not visible');
-
-        actionManager.destroy();
-    });
-
-});
-
-});
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index a638cd3956b..369b7cbe836 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -213,10 +213,8 @@
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/kanban_column_progressbar.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/kanban_view.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/web_calendar.scss"/>
-        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/web_calendar_mobile.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/search_view.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/search_panel.scss"/>
-        <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/search_view_mobile.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/dropdown_menu.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/search_view_extra.scss"/>
         <link rel="stylesheet" type="text/scss" href="/web/static/src/scss/data_export.scss"/>
@@ -315,8 +313,6 @@
         <script type="text/javascript" src="/web/static/src/js/views/control_panel/control_panel_model.js"></script>
         <script type="text/javascript" src="/web/static/src/js/views/control_panel/control_panel_renderer.js"></script>
         <script type="text/javascript" src="/web/static/src/js/views/control_panel/control_panel_view.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/views/control_panel/mobile_control_panel_controller.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/views/control_panel/mobile_control_panel_renderer.js"></script>
         <script type="text/javascript" src="/web/static/src/js/views/control_panel/search/search_bar_autocomplete_sources.js"></script>
         <script type="text/javascript" src="/web/static/src/js/views/control_panel/search/search_bar_autocomplete_sources_registry.js"></script>
         <script type="text/javascript" src="/web/static/src/js/views/control_panel/search/search_facet.js"></script>
@@ -758,9 +754,6 @@
 
                 <script type="text/javascript" src="/base/static/tests/base_settings_mobile_tests.js"></script>
 
-                <script type="text/javascript" src="/web/static/tests/chrome/action_manager_mobile_tests.js"></script>
-                <script type="text/javascript" src="/web/static/tests/views/calendar_mobile_tests.js"></script>
-                <script type="text/javascript" src="/web/static/tests/views/mobile_control_panel_tests.js"></script>
                 <script type="text/javascript" src="/web/static/tests/fields/basic_fields_mobile_tests.js"></script>
                 <script type="text/javascript" src="/web/static/tests/fields/relational_fields_mobile_tests.js"></script>
             </t>

From 0a129284e4856b6485c48a194fd86c3ab5c736e7 Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Wed, 11 Mar 2020 09:38:27 +0000
Subject: [PATCH 05/10] [IMP] web,*: Enhance test helpers

1. Test utils helpers adapted to properly instantiate the new Owl control panel
2. New file 'test_utils_control_panel' to create a control panel and use helpers
3. New helper: createComponent (creates a generic component, see jsdoc)
4. Use of the new helpers in the current tests (more in sibling commits)
5. Helper 'addMockEnvironment' is now asynchronous
6. Owl config mode set to 'dev' in test suite (props validation)

Part of task 2196029

Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
---
 .../static/tests/helpers/test_utils.js        |   4 +-
 .../mail/static/tests/helpers/test_utils.js   |  14 +-
 addons/web/static/src/js/core/utils.js        |  22 +
 addons/web/static/src/js/tools/test_menus.js  |   4 +-
 .../web/static/tests/helpers/qunit_asserts.js |   2 +
 addons/web/static/tests/helpers/test_env.js   |  52 +-
 addons/web/static/tests/helpers/test_utils.js |  53 ++-
 .../tests/helpers/test_utils_control_panel.js | 446 ++++++++++++++++++
 .../static/tests/helpers/test_utils_create.js | 234 +++++----
 .../static/tests/helpers/test_utils_dom.js    |  45 ++
 .../static/tests/helpers/test_utils_mock.js   |  44 +-
 addons/web/static/tests/main_tests.js         |   2 +
 addons/web/views/webclient_templates.xml      |   1 +
 .../web_tour/static/src/js/tour_step_utils.js |   6 +-
 14 files changed, 778 insertions(+), 151 deletions(-)
 create mode 100644 addons/web/static/tests/helpers/test_utils_control_panel.js

diff --git a/addons/im_support/static/tests/helpers/test_utils.js b/addons/im_support/static/tests/helpers/test_utils.js
index dece9e2c361..370d66098b9 100644
--- a/addons/im_support/static/tests/helpers/test_utils.js
+++ b/addons/im_support/static/tests/helpers/test_utils.js
@@ -24,7 +24,7 @@ mailTestUtils.MockMailService.include({
  * @param {function} [params.mockSupportRPC]
  * @param {boolean} [params.enableSupportPoll=false]
  */
-function addMockSupportEnvironment(widget, params) {
+async function addMockSupportEnvironment(widget, params) {
     // mock CORS RPCs
     var originalRPC = supportSession.rpc;
     var defaultMockSupportRPC = function (route, args) {
@@ -58,7 +58,7 @@ function addMockSupportEnvironment(widget, params) {
         }
         return result;
     };
-    testUtils.mock.addMockEnvironment(widget, params);
+    await testUtils.mock.addMockEnvironment(widget, params);
     var widgetDestroy = widget.destroy;
     widget.destroy = function () {
         supportSession.rpc = originalRPC;
diff --git a/addons/mail/static/tests/helpers/test_utils.js b/addons/mail/static/tests/helpers/test_utils.js
index 90317900660..f3328c9a1a9 100644
--- a/addons/mail/static/tests/helpers/test_utils.js
+++ b/addons/mail/static/tests/helpers/test_utils.js
@@ -9,11 +9,12 @@ var mailUtils = require('mail.utils');
 
 var AbstractStorageService = require('web.AbstractStorageService');
 var Class = require('web.Class');
-var ControlPanelView = require('web.ControlPanelView');
 var RamStorage = require('web.RamStorage');
+const makeTestEnvironment = require('web.test_env');
 var testUtils = require('web.test_utils');
 var Widget = require('web.Widget');
 
+const { prepareTarget, nextTick } = testUtils;
 /**
  * Test Utils
  *
@@ -37,8 +38,11 @@ async function createDiscuss(params) {
         'mail.message,false,search': '<search/>',
     };
     testUtils.mock.addMockEnvironment(parent, params);
+
+    const env = params.env || {};
+    owl.Component.env = makeTestEnvironment(env);
+
     var discuss = new Discuss(parent, params);
-    var selector = params.debug ? 'body' : '#qunit-fixture';
 
     // override 'destroy' of discuss so that it calls 'destroy' on the parent
     // instead, which is the parent of discuss and the mockServer.
@@ -49,9 +53,9 @@ async function createDiscuss(params) {
         parent.destroy();
     };
 
-    return discuss.appendTo($(selector)).then(function () {
-        return discuss;
-    });
+    await discuss.appendTo(prepareTarget(params.debug));
+    await nextTick();
+    return discuss;
 }
 
 
diff --git a/addons/web/static/src/js/core/utils.js b/addons/web/static/src/js/core/utils.js
index 243f3f51cd0..699a912ccc3 100644
--- a/addons/web/static/src/js/core/utils.js
+++ b/addons/web/static/src/js/core/utils.js
@@ -628,6 +628,28 @@ var utils = {
             'expires=' + new Date(new Date().getTime() + ttl*1000).toGMTString()
         ].join(';');
     },
+    /**
+     * Returns a string formatted using given values.
+     * If the value is an object, its keys will replace `%(key)s` expressions.
+     * If the values are a set of strings, they will replace `%s` expressions.
+     * If no value is given, the string will not be formatted.
+     *
+     * @param {string} string
+     * @param  {(Object|...string)} values
+     */
+    sprintf: function (string, ...values) {
+        if (values.length === 1 && typeof values[0] === 'object') {
+            const valuesDict = values[0];
+            for (const value in valuesDict) {
+                string = string.replace(`%(${value})s`, valuesDict[value]);
+            }
+        } else {
+            for (const value of values) {
+                string = string.replace(/%s/, value);
+            }
+        }
+        return string;
+    },
     /**
      * Sort an array in place, keeping the initial order for identical values.
      *
diff --git a/addons/web/static/src/js/tools/test_menus.js b/addons/web/static/src/js/tools/test_menus.js
index 9767aa29fed..0f91cab4c60 100644
--- a/addons/web/static/src/js/tools/test_menus.js
+++ b/addons/web/static/src/js/tools/test_menus.js
@@ -216,8 +216,8 @@
     function testFilters() {
         if (appsMenusOnly === true) return Promise.resolve();
         var filterProm = Promise.resolve();
-        // var $filters = $('div.o_control_panel div.btn-group.o_dropdown > ul.o_filters_menu > li:not(.o_add_custom_filter)');
-        var $filters = $('.o_filters_menu > .o_menu_item:not(.d-none)');
+        // var $filters = $('div.o_control_panel div.btn-group.o_dropdown > ul.o_filter_menu > li:not(.o_add_custom_filter)');
+        var $filters = $('.o_filter_menu > .o_menu_item:not(.d-none)');
         console.log("Testing " + $filters.length + " filters");
         var filter_ids = _.compact(_.map($filters, function(f) { return f.dataset.id}));
         filter_ids.forEach(function(filter_id){
diff --git a/addons/web/static/tests/helpers/qunit_asserts.js b/addons/web/static/tests/helpers/qunit_asserts.js
index 0f22acbbf78..8a5948dc676 100644
--- a/addons/web/static/tests/helpers/qunit_asserts.js
+++ b/addons/web/static/tests/helpers/qunit_asserts.js
@@ -13,6 +13,8 @@ odoo.define('web.qunit_asserts', function (require) {
 
     const Widget = require('web.Widget');
 
+    /** @todo use testUtilsDom.getNode to extract the element from the 'w' argument */
+
     //-------------------------------------------------------------------------
     // Private functions
     //-------------------------------------------------------------------------
diff --git a/addons/web/static/tests/helpers/test_env.js b/addons/web/static/tests/helpers/test_env.js
index d934bd3ac84..68659e366c3 100644
--- a/addons/web/static/tests/helpers/test_env.js
+++ b/addons/web/static/tests/helpers/test_env.js
@@ -7,35 +7,6 @@ odoo.define('web.test_env', async function (require) {
     const { buildQuery } = require("web.rpc");
     const session = require('web.session');
 
-    /**
-     * Wrap the target object in a Proxy, giving it a generic getter that will
-     * throw an error instead of returning `undefined` in case the property has
-     * not been set.
-     *
-     * @param {Object} target
-     * @param {string} name
-     * @returns {Proxy}
-     */
-    function _proxify(target, name) {
-        for (const prop in target) {
-            if (
-                target.hasOwnProperty(prop) &&
-                typeof target[prop] === 'object' &&
-                target[prop] !== null
-            ) {
-                target[prop] = _proxify(target[prop], `${name}.${prop}`);
-            }
-        }
-        return new Proxy(target, {
-            get(object, property) {
-                if (typeof property === 'string' && !(property in object)) {
-                    throw new Error(`Property "${property}" not implemented in "${name}".`);
-                }
-                return object[property];
-            },
-        });
-    }
-
     /**
      * Creates a test environment with the given environment object.
      * Any access to a key that has not been explicitly defined in the given environment object
@@ -46,18 +17,26 @@ odoo.define('web.test_env', async function (require) {
      * @returns {Proxy}
      */
     function makeTestEnvironment(env = {}, providedRPC = null) {
-        const proxiedEnv = _proxify(env, 'env');
         const RamStorageService = AbstractStorageService.extend({
             storage: new RamStorage(),
         });
+        const database = {
+            parameters: {
+                code: "en_US",
+                date_format: '%m/%d/%Y',
+                decimal_point: ".",
+                direction: 'ltr',
+                grouping: [],
+                thousands_sep: ",",
+                time_format: '%H:%M:%S',
+            },
+        };
         let testEnv = {};
         const defaultEnv = {
-            _t: env._t || (s => s),
-            _lt: env._lt || (s => s),
+            _t: env._t || Object.assign((s => s), { database }),
+            _lt: env._lt || Object.assign((s => s), { database }),
             bus: new Bus(),
-            device: Object.assign({
-                isMobile: false,
-            }, env.device),
+            device: Object.assign({ isMobile: false }, env.device),
             isDebug: env.isDebug || (() => false),
             qweb: new owl.QWeb({ templates: session.owlTemplates }),
             services: Object.assign({
@@ -77,6 +56,7 @@ odoo.define('web.test_env', async function (require) {
                 },
                 local_storage: new RamStorageService(),
                 session_storage: new RamStorageService(),
+                notification: { notify() { } },
             }, env.services),
             session: Object.assign({
                 rpc(route, params, options) {
@@ -87,7 +67,7 @@ odoo.define('web.test_env', async function (require) {
                 },
             }, env.session),
         };
-        testEnv = Object.assign(proxiedEnv, defaultEnv);
+        testEnv = Object.assign(env, defaultEnv);
         return testEnv;
     }
 
diff --git a/addons/web/static/tests/helpers/test_utils.js b/addons/web/static/tests/helpers/test_utils.js
index 2ff77de4e49..f462df514a1 100644
--- a/addons/web/static/tests/helpers/test_utils.js
+++ b/addons/web/static/tests/helpers/test_utils.js
@@ -15,6 +15,7 @@ odoo.define('web.test_utils', async function (require) {
     const relationalFields = require('web.relational_fields');
     const session = require('web.session');
     const testUtilsCreate = require('web.test_utils_create');
+    const testUtilsControlPanel = require('web.test_utils_control_panel');
     const testUtilsDom = require('web.test_utils_dom');
     const testUtilsFields = require('web.test_utils_fields');
     const testUtilsFile = require('web.test_utils_file');
@@ -128,11 +129,60 @@ odoo.define('web.test_utils', async function (require) {
             fieldsViewGet: testUtilsMock.fieldsViewGet,
             patchSetTimeout: testUtilsMock.patchSetTimeout,
         },
+        controlPanel: {
+            // Generic interactions
+            toggleMenu: testUtilsControlPanel.toggleMenu,
+            toggleMenuItem: testUtilsControlPanel.toggleMenuItem,
+            toggleMenuItemOption: testUtilsControlPanel.toggleMenuItemOption,
+            isItemSelected: testUtilsControlPanel.isItemSelected,
+            isOptionSelected: testUtilsControlPanel.isOptionSelected,
+            getMenuItemTexts: testUtilsControlPanel.getMenuItemTexts,
+            // Button interactions
+            getButtons: testUtilsControlPanel.getButtons,
+            // FilterMenu interactions
+            toggleFilterMenu: testUtilsControlPanel.toggleFilterMenu,
+            toggleAddCustomFilter: testUtilsControlPanel.toggleAddCustomFilter,
+            applyFilter: testUtilsControlPanel.applyFilter,
+            // GroupByMenu interactions
+            toggleGroupByMenu: testUtilsControlPanel.toggleGroupByMenu,
+            toggleAddCustomGroup: testUtilsControlPanel.toggleAddCustomGroup,
+            selectGroup: testUtilsControlPanel.selectGroup,
+            applyGroup: testUtilsControlPanel.applyGroup,
+            // FavoriteMenu interactions
+            toggleFavoriteMenu: testUtilsControlPanel.toggleFavoriteMenu,
+            toggleSaveFavorite: testUtilsControlPanel.toggleSaveFavorite,
+            editFavoriteName: testUtilsControlPanel.editFavoriteName,
+            saveFavorite: testUtilsControlPanel.saveFavorite,
+            deleteFavorite: testUtilsControlPanel.deleteFavorite,
+            // TimeRangeMenu interactions
+            toggleTimeRangeMenu: testUtilsControlPanel.toggleTimeRangeMenu,
+            selectField: testUtilsControlPanel.selectField,
+            selectRange: testUtilsControlPanel.selectRange,
+            selectComparisonRange: testUtilsControlPanel.selectComparisonRange,
+            toggleTimeRangeMenuBox: testUtilsControlPanel.toggleTimeRangeMenuBox,
+            applyTimeRange: testUtilsControlPanel.applyTimeRange,
+            // SearchBar interactions
+            getFacetTexts: testUtilsControlPanel.getFacetTexts,
+            removeFacet: testUtilsControlPanel.removeFacet,
+            editSearch: testUtilsControlPanel.editSearch,
+            validateSearch: testUtilsControlPanel.validateSearch,
+            // Action menus interactions
+            toggleActionMenu: testUtilsControlPanel.toggleActionMenu,
+            // Pager interactions
+            pagerPrevious: testUtilsControlPanel.pagerPrevious,
+            pagerNext: testUtilsControlPanel.pagerNext,
+            getPagerValue: testUtilsControlPanel.getPagerValue,
+            getPagerSize: testUtilsControlPanel.getPagerSize,
+            setPagerValue: testUtilsControlPanel.setPagerValue,
+            // View switcher
+            switchView: testUtilsControlPanel.switchView,
+        },
         dom: {
             triggerKeypressEvent: testUtilsDom.triggerKeypressEvent,
             triggerMouseEvent: testUtilsDom.triggerMouseEvent,
             triggerPositionalMouseEvent: testUtilsDom.triggerPositionalMouseEvent,
             dragAndDrop: testUtilsDom.dragAndDrop,
+            getNode: testUtilsDom.getNode,
             openDatepicker: testUtilsDom.openDatepicker,
             click: testUtilsDom.click,
             clickFirst: testUtilsDom.clickFirst,
@@ -187,10 +237,11 @@ odoo.define('web.test_utils', async function (require) {
         },
 
         createActionManager: testUtilsCreate.createActionManager,
+        createComponent: testUtilsCreate.createComponent,
+        createControlPanel: testUtilsCreate.createControlPanel,
         createDebugManager: testUtilsCreate.createDebugManager,
         createAsyncView: testUtilsCreate.createView,
         createCalendarView: testUtilsCreate.createCalendarView,
-        createControlPanel: testUtilsCreate.createControlPanel,
         createView: testUtilsCreate.createView,
         createModel: testUtilsCreate.createModel,
         createParent: testUtilsCreate.createParent,
diff --git a/addons/web/static/tests/helpers/test_utils_control_panel.js b/addons/web/static/tests/helpers/test_utils_control_panel.js
new file mode 100644
index 00000000000..36a0a6b9bbf
--- /dev/null
+++ b/addons/web/static/tests/helpers/test_utils_control_panel.js
@@ -0,0 +1,446 @@
+odoo.define('web.test_utils_control_panel', function (require) {
+    "use strict";
+
+    const { click, triggerEvent, getNode } = require('web.test_utils_dom');
+    const { editInput, editSelect, editAndTrigger } = require('web.test_utils_fields');
+
+    //-------------------------------------------------------------------------
+    // Private functions
+    //-------------------------------------------------------------------------
+
+    /**
+     * Helper method to retrieve a distinct item from a collection of elements defined
+     * by the given 'selector' string. It can either be the index of the item or its
+     * inner text.
+     * @private
+     * @param {HTMLElement} el
+     * @param {string} selector
+     * @param {(number|string)} elFinder
+     */
+    function findItem(el, selector, elFinder) {
+        const elements = [...el.querySelectorAll(selector)];
+        if (!elements.length) {
+            throw new Error(`No element found with selector "${selector}".`);
+        }
+        switch (typeof elFinder) {
+            case 'number':
+                const element = elements[elFinder];
+                if (!element) {
+                    throw new Error(`No element with selector "${selector}" at index ${elFinder}.`);
+                }
+                return element;
+            case 'string':
+                const stringMatch = elements.find(
+                    e => e.innerText.trim().toLowerCase() === elFinder.toLowerCase()
+                );
+                if (!stringMatch) {
+                    throw new Error(`No element with selector "${selector}" containing "${elFinder}".`);
+                }
+                return stringMatch;
+            default:
+                throw new Error(`Invalid provided element finder: must be a number|string|function.`);
+        }
+    }
+
+    //-------------------------------------------------------------------------
+    // Exported functions
+    //-------------------------------------------------------------------------
+
+    /**
+     * @param {EventTarget} el
+     * @param {(number|string)} menuFinder
+     * @returns {Promise}
+     */
+    async function toggleMenu(el, menuFinder) {
+        const menu = findItem(getNode(el), `.o_dropdown > button`, menuFinder);
+        await click(menu);
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @param {(number|string)} itemFinder
+     * @returns {Promise}
+     */
+    async function toggleMenuItem(el, itemFinder) {
+        const item = findItem(getNode(el), `.o_menu_item > a`, itemFinder);
+        await click(item);
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @param {(number|string)} itemFinder
+     * @param {(number|string)} optionFinder
+     * @returns {Promise}
+     */
+    async function toggleMenuItemOption(el, itemFinder, optionFinder) {
+        const item = findItem(getNode(el), `.o_menu_item > a`, itemFinder);
+        const option = findItem(item.parentNode, '.o_item_option > a', optionFinder);
+        await click(option);
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @param {(number|string)} itemFinder
+     * @returns {boolean}
+     */
+    function isItemSelected(el, itemFinder) {
+        const item = findItem(getNode(el), `.o_menu_item > a`, itemFinder);
+        return item.classList.contains('selected');
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @param {(number|string)} itemuFinder
+     * @param {(number|string)} optionFinder
+     * @returns {boolean}
+     */
+    function isOptionSelected(el, itemFinder, optionFinder) {
+        const item = findItem(getNode(el), `.o_menu_item > a`, itemFinder);
+        const option = findItem(item.parentNode, '.o_item_option > a', optionFinder);
+        return option.classList.contains('selected');
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @returns {string[]}
+     */
+    function getMenuItemTexts(el) {
+        return [...getNode(el).querySelectorAll(`.o_dropdown ul .o_menu_item`)].map(
+            e => e.innerText.trim()
+        );
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @returns {HTMLButtonElement[]}
+     */
+    function getButtons(el) {
+        return [...getNode(el).querySelector((`div.o_cp_bottom div.o_cp_buttons`)).children];
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @returns {Promise}
+     */
+    async function toggleFilterMenu(el) {
+        await click(getNode(el).querySelector(`.o_filter_menu button`));
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @returns {Promise}
+     */
+    async function toggleAddCustomFilter(el) {
+        await click(getNode(el).querySelector(`button.o_add_custom_filter`));
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @returns {Promise}
+     */
+    async function applyFilter(el) {
+        await click(getNode(el).querySelector(`div.o_add_filter_menu > button.o_apply_filter`));
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @returns {Promise}
+     */
+    async function toggleGroupByMenu(el) {
+        await click(getNode(el).querySelector(`.o_group_by_menu button`));
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @returns {Promise}
+     */
+    async function toggleAddCustomGroup(el) {
+        await click(getNode(el).querySelector(`button.o_add_custom_group_by`));
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @param {string} fieldName
+     * @returns {Promise}
+     */
+    async function selectGroup(el, fieldName) {
+        await editSelect(
+            getNode(el).querySelector(`select.o_group_by_selector`),
+            fieldName
+        );
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @returns {Promise}
+     */
+    async function applyGroup(el) {
+        await click(getNode(el).querySelector(`div.o_add_group_by_menu > button.o_apply_group_by`));
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @returns {Promise}
+     */
+    async function toggleFavoriteMenu(el) {
+        await click(getNode(el).querySelector(`.o_favorite_menu button`));
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @returns {Promise}
+     */
+    async function toggleSaveFavorite(el) {
+        await click(getNode(el).querySelector(`.o_favorite_menu .o_add_favorite button`));
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @param {string} name
+     * @returns {Promise}
+     */
+    async function editFavoriteName(el, name) {
+        await editInput(getNode(el).querySelector(`.o_favorite_menu .o_add_favorite input[type="text"]`), name);
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @returns {Promise}
+     */
+    async function saveFavorite(el) {
+        await click(getNode(el).querySelector(`.o_favorite_menu .o_add_favorite button.o_save_favorite`));
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @param {(string|number)} favoriteFinder
+     * @returns {Promise}
+     */
+    async function deleteFavorite(el, favoriteFinder) {
+        const favorite = findItem(getNode(el), `.o_favorite_menu .o_menu_item`, favoriteFinder);
+        await click(favorite.querySelector('i.fa-trash-o'));
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @returns {Promise}
+     */
+    async function toggleTimeRangeMenu(el) {
+        await click(getNode(el).querySelector(`div.o_time_range_menu > button`));
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @param {string} fieldName
+     * @returns {Promise}
+     */
+    async function selectField(el, fieldName) {
+        await editSelect(
+            findItem(getNode(el), `div.o_time_range_section select`, 0),
+            fieldName
+        );
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @param {string} range
+     * @returns {Promise}
+     */
+    async function selectRange(el, range) {
+        await editSelect(
+            findItem(getNode(el), `div.o_time_range_section select`, 1),
+            range
+        );
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @param {string} comparisonRange
+     * @returns {Promise}
+     */
+    async function selectComparisonRange(el, comparisonRange) {
+        await editSelect(
+            findItem(getNode(el), `div.o_time_range_section select`, 2),
+            comparisonRange
+        );
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @returns {Promise}
+     */
+    async function toggleTimeRangeMenuBox(el) {
+        await click(getNode(el).querySelector(`div.o_time_range_section input`));
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @returns {Promise}
+     */
+    async function applyTimeRange(el) {
+        await click(getNode(el).querySelector(`div.o_time_range_menu ul button`));
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @returns {Promise}
+     */
+    function getFacetTexts(el) {
+        return [...getNode(el).querySelectorAll(`.o_searchview .o_searchview_facet`)].map(
+            facet => facet.innerText.trim()
+        );
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @param {(string|number)} facetFinder
+     * @returns {Promise}
+     */
+    async function removeFacet(el, facetFinder = 0) {
+        const facet = findItem(getNode(el), `.o_searchview .o_searchview_facet`, facetFinder);
+        await click(facet.querySelector('.o_facet_remove'));
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @param {string} value
+     * @returns {Promise}
+     */
+    async function editSearch(el, value) {
+        await editInput(getNode(el).querySelector(`.o_searchview_input`), value);
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @returns {Promise}
+     */
+    async function validateSearch(el) {
+        await triggerEvent(
+            getNode(el).querySelector(`.o_searchview_input`),
+            'keydown', { key: 'Enter' }
+        );
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @param {string} [menuFinder="Action"]
+     * @returns {Promise}
+     */
+    async function toggleActionMenu(el, menuFinder = "Action") {
+        const dropdown = findItem(getNode(el), `.o_cp_action_menus button`, menuFinder);
+        await click(dropdown);
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @returns {Promise}
+     */
+    async function pagerPrevious(el) {
+        await click(getNode(el).querySelector(`.o_pager button.o_pager_previous`));
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @returns {Promise}
+     */
+    async function pagerNext(el) {
+        await click(getNode(el).querySelector(`.o_pager button.o_pager_next`));
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @returns {string}
+     */
+    function getPagerValue(el) {
+        const pagerValue = getNode(el).querySelector(`.o_pager_counter .o_pager_value`);
+        switch (pagerValue.tagName) {
+            case 'INPUT':
+                return pagerValue.value;
+            case 'SPAN':
+                return pagerValue.innerText.trim();
+        }
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @returns {string}
+     */
+    function getPagerSize(el) {
+        return getNode(el).querySelector(`.o_pager_counter span.o_pager_limit`).innerText.trim();
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @param {string} value
+     * @returns {Promise}
+     */
+    async function setPagerValue(el, value) {
+        let pagerValue = getNode(el).querySelector(`.o_pager_counter .o_pager_value`);
+        if (pagerValue.tagName === 'SPAN') {
+            await click(pagerValue);
+        }
+        pagerValue = getNode(el).querySelector(`.o_pager_counter input.o_pager_value`);
+        if (!pagerValue) {
+            throw new Error("Pager value is being edited and cannot be changed.");
+        }
+        await editAndTrigger(pagerValue, value, ['change', 'blur']);
+    }
+
+    /**
+     * @param {EventTarget} el
+     * @param {string} viewType
+     * @returns {Promise}
+     */
+    async function switchView(el, viewType) {
+        await click(getNode(el).querySelector(`button.o_switch_view.o_${viewType}`));
+    }
+
+    return {
+        // Generic interactions
+        toggleMenu,
+        toggleMenuItem,
+        toggleMenuItemOption,
+        isItemSelected,
+        isOptionSelected,
+        getMenuItemTexts,
+        // Button interactions
+        getButtons,
+        // FilterMenu interactions
+        toggleFilterMenu,
+        toggleAddCustomFilter,
+        applyFilter,
+        // GroupByMenu interactions
+        toggleGroupByMenu,
+        toggleAddCustomGroup,
+        selectGroup,
+        applyGroup,
+        // FavoriteMenu interactions
+        toggleFavoriteMenu,
+        toggleSaveFavorite,
+        editFavoriteName,
+        saveFavorite,
+        deleteFavorite,
+        // TimeRangeMenu interactions
+        toggleTimeRangeMenu,
+        selectField,
+        selectRange,
+        selectComparisonRange,
+        toggleTimeRangeMenuBox,
+        applyTimeRange,
+        // SearchBar interactions
+        getFacetTexts,
+        removeFacet,
+        editSearch,
+        validateSearch,
+        // Action menus interactions
+        toggleActionMenu,
+        // Pager interactions
+        pagerPrevious,
+        pagerNext,
+        getPagerValue,
+        getPagerSize,
+        setPagerValue,
+        // View switcher
+        switchView,
+    };
+});
diff --git a/addons/web/static/tests/helpers/test_utils_create.js b/addons/web/static/tests/helpers/test_utils_create.js
index 21bc6cc7850..8130e74ba03 100644
--- a/addons/web/static/tests/helpers/test_utils_create.js
+++ b/addons/web/static/tests/helpers/test_utils_create.js
@@ -11,14 +11,23 @@ odoo.define('web.test_utils_create', function (require) {
      */
 
     const ActionManager = require('web.ActionManager');
+    const ActionMenus = require('web.ActionMenus');
     const concurrency = require('web.concurrency');
     const config = require('web.config');
-    const ControlPanelView = require('web.ControlPanelView');
+    const ControlPanel = require('web.ControlPanel');
+    const ControlPanelModel = require('web.ControlPanelModel');
+    const customHooks = require('web.custom_hooks');
     const DebugManager = require('web.DebugManager.Backend');
     const dom = require('web.dom');
+    const makeTestEnvironment = require('web.test_env');
+    const Registry = require('web.Registry');
     const testUtilsMock = require('web.test_utils_mock');
     const Widget = require('web.Widget');
 
+    const { Component } = owl;
+    const { useRef, useState } = owl.hooks;
+    const { xml } = owl.tags;
+
     /**
      * Create and return an instance of ActionManager with all rpcs going through a
      * mock method using the data, actions and archs objects as sources.
@@ -50,13 +59,16 @@ odoo.define('web.test_utils_create', function (require) {
                 return this._super(...arguments);
             },
         });
-        testUtilsMock.addMockEnvironment(widget, Object.assign({ debounce: false }, params));
+        const mockServer = await testUtilsMock.addMockEnvironment(widget, Object.assign({ debounce: false }, params));
         await widget.prependTo(target);
         widget.el.classList.add('o_web_client');
         if (config.device.isMobile) {
             widget.el.classList.add('o_touch_device');
         }
 
+        params.server = mockServer;
+        Component.env = testUtilsMock.getMockedOwlEnv(params);
+
         const userContext = params.context && params.context.user_context || {};
         const actionManager = new ActionManager(widget, userContext);
 
@@ -106,86 +118,116 @@ odoo.define('web.test_utils_create', function (require) {
     }
 
     /**
-     * Create a controlPanel from various parameters.
-     *
-     * It returns an instance of ControlPanelController
-     *
-     * @param {Object} [params={}]
-     * @param {Object} [params.action={}]
-     * @param {Object} [params.context={}]
-     * @param {string} [params.domain=[]]
-     * @param {integer} [params.fieldDebounce=0] the debounce value to use for the
-     *   duration of the test.
-     * @param {Object} params.intercepts an object with event names as key, and
-     *   callback as value.  Each key,value will be used to intercept the event.
-     *   Note that this is particularly useful if you want to intercept events going
-     *   up in the init process of the view, because there are no other way to do it
-     *   after this method returns
-     * @param {string} [params.modelName]
-     * @param {string[]} [params.searchMenuTypes = ['filter', 'groupBy', 'favorite']]
-     *   determines search menus displayed.
-     * @param {string} [params.template] the QWeb template to render
-     * @param {Object} [params.viewInfo={arch: '<controlpanel/>', fields: {}}]
-         a controlpanel (or search) fieldsview
-     * @param {string} [params.viewInfo.arch]
-     * @param {boolean} [params.context.no_breadcrumbs=false] if set to true,
-     *   breadcrumbs won't be rendered
-     * @param {boolean} [params.withBreadcrumbs=true] if set to false,
-     *   breadcrumbs won't be rendered
-     * @param {boolean} [params.withSearchBar=true] if set to false, no default
-     *   search bar will be rendered
-     *
-     * @returns {Promise<ControlPanel>} resolves with an instance of the ControlPanelController
+     * Create a simple component environment with a basic Parent component, an
+     * extensible env and a mocked server. The returned value is the instance of
+     * the given constructor.
+     * @param {class} constructor Component class to instantiate
+     * @param {Object} [params = {}]
+     * @param {boolean} [params.debug]
+     * @param {Object} [params.env]
+     * @param {Object} [params.intercepts] object in which the keys represent the
+     *      intercepted event names and the values are their callbacks.
+     * @param {Object} [params.props]
+     * @returns {Promise<Component>} instance of `constructor`
      */
-    async function createControlPanel(params) {
-        params = params || {};
-        const target = prepareTarget(params.debug);
-        // reproduce the DOM environment of a view control panel
-        const $webClient = $('<div>').addClass('o_web_client').prependTo(target);
-        const $actionManager = $('<div>').addClass('o_action_manager').appendTo($webClient);
-        const $action = $('<div>').addClass('o_action').appendTo($actionManager);
-
-        const widget = new Widget();
-        // add mock environment: mock server, session, fieldviewget, ...
-        const mockServer = testUtilsMock.addMockEnvironment(widget, params);
-        if (!params.viewInfo) {
-            try {
-                params.viewInfo = testUtilsMock.fieldsViewGet(mockServer, params);
-            } catch (e) {
-                // if an error occurs we keep params.viewInfo undefined.
-                // It will be set to {arch: '<controlpanel/>', fields: {}} in
-                // ControlPanelView init function.
+    async function createComponent(constructor, params = {}) {
+        if (!constructor) {
+            throw new Error(`Missing argument "constructor".`);
+        }
+        if (!(constructor.prototype instanceof Component)) {
+            throw new Error(`Argument "constructor" must be an Owl Component.`);
+        }
+        const env = Object.assign(testUtilsMock.getMockedOwlEnv(params), params.env);
+        class Parent extends Component {
+            constructor() {
+                super(...arguments);
+                this.Component = constructor;
+                this.state = useState(params.props || {});
+                this.component = useRef('component');
+                for (const eventName in params.intercepts || {}) {
+                    customHooks.useListener(eventName, params.intercepts[eventName]);
+                }
             }
         }
-
-        const viewOptions = Object.assign({
-            context: params.context,
-            modelName: params.model,
-            searchMenuTypes: params.searchMenuTypes,
-            viewInfo: params.viewInfo,
-        }, params.viewOptions);
-        const controlPanelView = new ControlPanelView(viewOptions);
-        const controlPanel = await controlPanelView.getController(widget);
-        // override the controlPanel's 'destroy' so that it calls 'destroy' on
-        // the widget instead, as the widget is the parent of the controlPanel
-        // and the mockServer.
-        controlPanel.__destroy = controlPanel.destroy;
-        controlPanel.destroy = function () {
-            // remove the override to properly destroy the controlPanel and its
-            // children when it will be called the second time (by its parent)
-            delete controlPanel.destroy;
-            widget.destroy();
-            $webClient.remove();
+        Parent.env = env;
+        Parent.template = xml`<t t-component="Component" t-props="state" t-ref="component"/>`;
+        const parent = new Parent();
+        await parent.mount(prepareTarget(params.debug), { position: 'first-child' });
+        const child = parent.component.comp;
+        const originalDestroy = child.destroy;
+        child.destroy = function () {
+            child.destroy = originalDestroy;
+            parent.destroy();
         };
+        return child;
+    }
+
+    /**
+     * Create a Control Panel instance, with an extensible environment and
+     * its related Control Panel Model. Event interception is done through
+     * params['get-controller-query-params'] and params.search, for the two
+     * available event handlers respectively.
+     * @param {Object} [params={}]
+     * @param {Object} [params.cpProps]
+     * @param {Object} [params.cpStoreConfig]
+     * @param {boolean} [params.debug]
+     * @param {Object} [params.env]
+     * @returns {Object} useful control panel testing elements:
+     *  - controlPanel: the control panel instance
+     *  - el: the control panel HTML element
+     *  - helpers: a suite of bound helpers (see above functions for all
+     *    available helpers)
+     */
+    async function createControlPanel(params = {}) {
+        const config = params.cpStoreConfig || {};
+        const debug = params.debug || false;
+        const env = params.env || {};
+        const props = Object.assign({
+            action: {},
+            fields: {},
+        }, params.cpProps);
+
+        class Parent extends Component {
+            constructor() {
+                super();
+                config.env = this.env;
+                this._controlPanelModel = new ControlPanelModel(config);
+                this.state = useState(props);
+                this.controlPanel = useRef("controlPanel");
+            }
+            async willStart() {
+                await this._controlPanelModel.isReady;
+            }
+            mounted() {
+                if (params['get-controller-query-params']) {
+                    this._controlPanelModel.on('get-controller-query-params', this,
+                        params['get-controller-query-params']);
+                }
+                if (params.search) {
+                    this._controlPanelModel.on('search', this, params.search);
+                }
+            }
+        }
+        Parent.components = { ControlPanel };
+        Parent.env = makeTestEnvironment(env);
+        Parent.template = xml`
+            <ControlPanel
+                t-ref="controlPanel"
+                t-props="state"
+                controlPanelModel="_controlPanelModel"
+            />`;
+
+        const parent = new Parent();
+        await parent.mount(prepareTarget(debug), { position: 'first-child' });
+
+        const controlPanel = parent.controlPanel.comp;
+        const destroy = controlPanel.destroy;
+        controlPanel.destroy = function () {
+            controlPanel.destroy = destroy;
+            parent.destroy();
+        };
+        controlPanel.getQuery = () => parent._controlPanelModel.getQuery();
 
-        // render the controlPanel in a fragment as it must be able to render
-        // correctly without being in the DOM
-        const fragment = document.createDocumentFragment();
-        await controlPanel.appendTo(fragment);
-        dom.prepend($action, fragment, {
-            callbacks: [{ widget: controlPanel }],
-            in_DOM: true,
-        });
         return controlPanel;
     }
 
@@ -279,6 +321,7 @@ odoo.define('web.test_utils_create', function (require) {
      * @param {any[]} [params.domain] the initial domain for the view
      * @param {Object} [params.context] the initial context for the view
      * @param {string[]} [params.groupBy] the initial groupBy for the view
+     * @param {Object[]} [params.favoriteFilters] the favorite filters one would like to have at initialization
      * @param {integer} [params.fieldDebounce=0] the debounce value to use for the
      *   duration of the test.
      * @param {AbstractView} params.View the class that will be instantiated
@@ -306,18 +349,29 @@ odoo.define('web.test_utils_create', function (require) {
         webClient.append(actionManager);
 
         // add mock environment: mock server, session, fieldviewget, ...
-        const mockServer = testUtilsMock.addMockEnvironment(widget, params);
+        const mockServer = await testUtilsMock.addMockEnvironment(widget, params);
         const viewInfo = testUtilsMock.fieldsViewGet(mockServer, params);
 
+        params.server = mockServer;
+        const env = Object.assign(testUtilsMock.getMockedOwlEnv(params));
+        Component.env = env;
+
         // create the view
         const View = params.View;
+        const modelName = params.model || 'foo';
+        const defaultAction = {
+            res_model: modelName,
+            context: {},
+        };
         const viewOptions = Object.assign({
-            modelName: params.model || 'foo',
+            action: Object.assign(defaultAction, params.action),
+            view: viewInfo,
+            modelName: modelName,
             ids: 'res_id' in params ? [params.res_id] : undefined,
             currentId: 'res_id' in params ? params.res_id : undefined,
             domain: params.domain || [],
             context: params.context || {},
-            hasSidebar: false,
+            hasActionMenus: false,
         }, params.viewOptions);
         // patch the View to handle the groupBy given in params, as we can't give it
         // in init (unlike the domain and context which can be set in the action)
@@ -335,16 +389,14 @@ odoo.define('web.test_utils_create', function (require) {
         let view;
         if (viewInfo.type === 'controlpanel' || viewInfo.type === 'search') {
             // TODO: probably needs to create an helper just for that
-            view = new params.View({
-                viewInfo: viewInfo,
-                modelName: params.model || 'foo',
-            });
+            view = new params.View({ viewInfo, modelName });
         } else {
-            viewOptions.controlPanelFieldsView = testUtilsMock.fieldsViewGet(mockServer, {
+            viewOptions.controlPanelFieldsView = Object.assign(testUtilsMock.fieldsViewGet(mockServer, {
                 arch: params.archs && params.archs[params.model + ',false,search'] || '<search/>',
                 fields: viewInfo.fields,
                 model: params.model,
-            });
+            }), { favoriteFilters: params.favoriteFilters });
+
             view = new params.View(viewInfo, viewOptions);
         }
 
@@ -354,6 +406,12 @@ odoo.define('web.test_utils_create', function (require) {
             }
         }
 
+        // Override the ActionMenus registry unless told otherwise.
+        let actionMenusRegistry = ActionMenus.registry;
+        if (params.actionMenusRegistry !== true) {
+            ActionMenus.registry = new Registry();
+        }
+
         const viewController = await view.getController(widget);
         // override the view's 'destroy' so that it calls 'destroy' on the widget
         // instead, as the widget is the parent of the view and the mockServer.
@@ -364,6 +422,9 @@ odoo.define('web.test_utils_create', function (require) {
             delete viewController.destroy;
             widget.destroy();
             webClient.remove();
+            if (params.actionMenusRegistry !== true) {
+                ActionMenus.registry = actionMenusRegistry;
+            }
         };
 
         // render the viewController in a fragment as they must be able to render correctly
@@ -401,6 +462,7 @@ odoo.define('web.test_utils_create', function (require) {
     return {
         createActionManager,
         createCalendarView,
+        createComponent,
         createControlPanel,
         createDebugManager,
         createModel,
diff --git a/addons/web/static/tests/helpers/test_utils_dom.js b/addons/web/static/tests/helpers/test_utils_dom.js
index ceca0d21fc9..8a7d3553d9e 100644
--- a/addons/web/static/tests/helpers/test_utils_dom.js
+++ b/addons/web/static/tests/helpers/test_utils_dom.js
@@ -2,6 +2,7 @@ odoo.define('web.test_utils_dom', function (require) {
     "use strict";
 
     const concurrency = require('web.concurrency');
+    const Widget = require('web.Widget');
 
     /**
      * DOM Test Utils
@@ -68,6 +69,11 @@ odoo.define('web.test_utils_dom', function (require) {
         dragleave: { constructor: DragEvent, processParameters: onlyBubble },
         dragover: { constructor: DragEvent, processParameters: onlyBubble },
         drop: { constructor: DragEvent, processParameters: onlyBubble },
+
+        input: { constructor: InputEvent, processParameters: onlyBubble },
+
+        compositionstart: { constructor: CompositionEvent, processParameters: onlyBubble },
+        compositionend: { constructor: CompositionEvent, processParameters: onlyBubble },
     };
 
     /**
@@ -284,6 +290,44 @@ odoo.define('web.test_utils_dom', function (require) {
         return returnAfterNextAnimationFrame();
     }
 
+    /**
+     * Helper function used to extract an HTML EventTarget element from a given
+     * target. The extracted element will depend on the target type:
+     * - Component|Widget -> el
+     * - jQuery -> associated element (must have 1)
+     * - HTMLCollection (or similar) -> first element (must have 1)
+     * - string -> result of document.querySelector with string
+     * - else -> as is
+     * @private
+     * @param {(Component|Widget|jQuery|HTMLCollection|HTMLElement|string)} target
+     * @returns {EventTarget}
+     */
+    function getNode(target) {
+        let nodes;
+        if (target instanceof owl.Component || target instanceof Widget) {
+            nodes = [target.el];
+        } else if (typeof target === 'string') {
+            nodes = document.querySelectorAll(target);
+        } else if (target === jQuery) { // jQuery (or $)
+            nodes = [document.body];
+        } else if (target.length) { // jQuery instance, HTMLCollection or array
+            nodes = target;
+        } else {
+            nodes = [target];
+        }
+        if (nodes.length !== 1) {
+            throw new Error(`Found ${nodes.length} nodes instead of 1.`);
+        }
+        const node = nodes[0];
+        if (!node) {
+            throw new Error(`Expected a node and got ${node}.`);
+        }
+        if (!_isEventTarget(node)) {
+            throw new Error(`Expected node to be an instance of EventTarget and got ${node.constructor.name}.`);
+        }
+        return node;
+    }
+
     /**
      * Open the datepicker of a given element.
      *
@@ -453,6 +497,7 @@ odoo.define('web.test_utils_dom', function (require) {
         clickFirst,
         clickLast,
         dragAndDrop,
+        getNode,
         openDatepicker,
         returnAfterNextAnimationFrame,
         triggerEvent,
diff --git a/addons/web/static/tests/helpers/test_utils_mock.js b/addons/web/static/tests/helpers/test_utils_mock.js
index bb2d1ef24a5..45b5dd6abcf 100644
--- a/addons/web/static/tests/helpers/test_utils_mock.js
+++ b/addons/web/static/tests/helpers/test_utils_mock.js
@@ -125,11 +125,11 @@ function removeSrcAttribute(el, widget) {
  * @param {boolean} [throttle=false] set to true to keep the throttling, which
  *   is completely removed by default.
  *
- * @returns {MockServer} the instance of the mock server, created by this
+ * @returns {Promise<MockServer>} the instance of the mock server, created by this
  *   function. It is necessary for createView so that method can call some
  *   other methods on it.
  */
-function addMockEnvironment(widget, params) {
+async function addMockEnvironment(widget, params) {
     var Server = MockServer;
     params.services = params.services || {};
     if (params.mockRPC) {
@@ -287,6 +287,9 @@ function addMockEnvironment(widget, params) {
             views = _.mapObject(views, function (viewParams) {
                 return fieldsViewGet(mockServer, viewParams);
             });
+            if ('search' in views && params.favoriteFilters) {
+                views.search.favoriteFilters = params.favoriteFilters;
+            }
             event.data.on_success(views);
         });
     });
@@ -312,6 +315,7 @@ function addMockEnvironment(widget, params) {
     // Deploy services
     var done = false;
     var servicesToDeploy = _.clone(params.services);
+    const servicePromises = [];
     if (!servicesToDeploy.ajax) {
         services.ajax = null; // use mocked ajax from mocked server
     }
@@ -329,8 +333,7 @@ function addMockEnvironment(widget, params) {
             intercept(service, "get_session", function (event) {
                 event.data.callback(session);
             });
-
-            service.start();
+            servicePromises.push(service.start());
         } else {
             var serviceNames = _.keys(servicesToDeploy);
             if (serviceNames.length) {
@@ -340,6 +343,8 @@ function addMockEnvironment(widget, params) {
         }
     }
 
+    await Promise.all(servicePromises);
+
     return mockServer;
 }
 
@@ -368,21 +373,28 @@ function fieldsViewGet(server, params) {
  * @param {Object} [params.archs] this archs given to the mock server
  * @param {Object} [params.data] the business data given to the mock server
  * @param {boolean} [params.debug]
+ * @param {Object} [params.env]
  * @param {function} [params.mockRPC]
+ * @param {function} [params.server] an already instantiated server to avoid
+ *      creating another one.
  * @returns {Object}
  */
-function getMockedOwlEnv(params) {
-    params = params || {};
-    let Server = MockServer;
-    if (params.mockRPC) {
-        Server = MockServer.extend({ _performRpc: params.mockRPC });
+function getMockedOwlEnv(params = {}) {
+    let server;
+    if (params.server) {
+        server = params.server;
+    } else {
+        let Server = MockServer;
+        if (params.mockRPC) {
+            Server = MockServer.extend({ _performRpc: params.mockRPC });
+        }
+        server = new Server(params.data, {
+            actions: params.actions,
+            archs: params.archs,
+            debug: params.debug,
+        });
     }
-    const server = new Server(params.data, {
-        actions: params.actions,
-        archs: params.archs,
-        debug: params.debug,
-    });
-    const env = {
+    const env = Object.assign({
         dataManager: {
             load_action: (actionID, context) => {
                 return server.performRpc('/web/action/load', {
@@ -416,7 +428,7 @@ function getMockedOwlEnv(params) {
             },
         },
         session: params.session || {},
-    };
+    }, params.env);
     return makeTestEnvironment(env, server.performRpc.bind(server));
 }
 
diff --git a/addons/web/static/tests/main_tests.js b/addons/web/static/tests/main_tests.js
index 079a14573d2..97d9b051bbb 100644
--- a/addons/web/static/tests/main_tests.js
+++ b/addons/web/static/tests/main_tests.js
@@ -5,6 +5,8 @@ odoo.define('web.web_client', async function (require) {
     const session = require("web.session");
     const WebClient = require('web.WebClient');
 
+    owl.config.mode = "dev";
+
     const webClient = new WebClient();
 
     await session.is_bound;
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 369b7cbe836..6111f0e5732 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -638,6 +638,7 @@
         </style>
 
         <script type="text/javascript" src="/web/static/tests/helpers/test_utils_create.js"></script>
+        <script type="text/javascript" src="/web/static/tests/helpers/test_utils_control_panel.js"></script>
         <script type="text/javascript" src="/web/static/tests/helpers/test_utils_dom.js"></script>
         <script type="text/javascript" src="/web/static/tests/helpers/test_utils_fields.js"></script>
         <script type="text/javascript" src="/web/static/tests/helpers/test_utils_file.js"></script>
diff --git a/addons/web_tour/static/src/js/tour_step_utils.js b/addons/web_tour/static/src/js/tour_step_utils.js
index cd92f6fe019..2c3b7726dac 100644
--- a/addons/web_tour/static/src/js/tour_step_utils.js
+++ b/addons/web_tour/static/src/js/tour_step_utils.js
@@ -121,15 +121,15 @@ return core.Class.extend({
             extra_trigger: '.modal:not(.o_inactive_modal) .dropdown-menu.o_searchview_autocomplete',
             position: 'bottom',
             run: action => {
-                const keyboardEventUp = new KeyboardEvent('keyup', {
+                const keyEventEnter = new KeyboardEvent('keydown', {
                     bubbles: true,
                     cancelable: true,
                     key: 'Enter',
                     code: 'Enter',
                     which: 13,
-                    keyCode: 13
+                    keyCode: 13,
                 });
-                action.tip_widget.$anchor[0].dispatchEvent(keyboardEventUp);
+                action.tip_widget.$anchor[0].dispatchEvent(keyEventEnter);
             },
             debugHelp: this._getHelpMessage('simulateEnterKeyboardInSearchModal'),
         };

From fbf347498f1cc7b74ef373179b7bcae201715c24 Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Wed, 11 Mar 2020 09:38:28 +0000
Subject: [PATCH 06/10] [REF] web: Control panel Owl

Refactoring of the control panel with the Owl framework.

The MVC structure of the control panel has been changed to a 'component <-> model'
relationship. As such:
- Removed the old control panel: view/model/controller/renderer
- Created a new Owl Component (ControlPanel)
- Created a new class: the Model (an Owl Store did not fit here) and a newly
  designed ControlPanelModel extending it

Refactored all inner subcomponents, including:
- Pager
- ActionMenus (peviously SideBar)
- Filter menu
    > Custom filter item
- Group by menu
    > Custom group by item
    > Removal of groupby_menu_mixin (and refactored graph controller in sibling commit)
- Time range menu
- Favorite menu
    > Custom favorite item
    > Moved the favorite menu registry to the favorite_menu file
- Search bar
    > Removed and splitted auto-completion dropdown logic between the new SearchBar
      Component (descriptions) and to the new ControlPanelModel (domains).

The templates (all in web/base.xml) have been adapted to the new standards. Most
of the DOM structure remains unchanged with some occasional improvements (replace
hiding with not rendering, removed pointless wrapper divs, etc.).

Part of task 2196029

Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
---
 addons/web/static/src/js/chrome/pager.js      |  276 ---
 addons/web/static/src/js/chrome/sidebar.js    |  219 ---
 .../static/src/js/components/action_menus.js  |  171 ++
 .../static/src/js/components/datepicker.js    |  244 +++
 .../static/src/js/components/dropdown_menu.js |  133 ++
 .../src/js/components/dropdown_menu_item.js   |   98 +
 addons/web/static/src/js/components/pager.js  |  221 +++
 .../src/js/control_panel/control_panel.js     |  225 +++
 .../js/control_panel/control_panel_model.js   | 1721 +++++++++++++++++
 .../js/control_panel/control_panel_x2many.js  |   40 +
 .../js/control_panel/custom_favorite_item.js  |  153 ++
 .../js/control_panel/custom_filter_item.js    |  258 +++
 .../js/control_panel/custom_group_by_item.js  |   46 +
 .../src/js/control_panel/favorite_menu.js     |  101 +
 .../src/js/control_panel/filter_menu.js       |   74 +
 .../src/js/control_panel/groupby_menu.js      |   94 +
 .../static/src/js/control_panel/search_bar.js |  480 +++++
 .../src/js/control_panel/search_utils.js      |  161 ++
 .../src/js/control_panel/time_range_menu.js   |  109 ++
 addons/web/static/src/js/model.js             |  157 ++
 .../control_panel/control_panel_controller.js |  269 ---
 .../control_panel/control_panel_model.js      | 1269 ------------
 .../control_panel/control_panel_renderer.js   |  387 ----
 .../views/control_panel/control_panel_view.js |  343 ----
 .../search/add_new_favorite_menu.js           |  177 --
 .../search/control_panel_view_parameters.js   |   80 -
 .../control_panel/search/favorite_menu.js     |  134 --
 .../search/favorites_submenus_registry.js     |    8 -
 .../views/control_panel/search/filter_menu.js |  186 --
 .../control_panel/search/groupby_menu.js      |  206 --
 .../search/groupby_menu_mixin.js              |  147 --
 .../views/control_panel/search/search_bar.js  |  260 ---
 .../search/search_bar_autocomplete_sources.js |  485 -----
 ...earch_bar_autocomplete_sources_registry.js |   37 -
 .../control_panel/search/search_facet.js      |  172 --
 .../control_panel/search/search_filters.js    |  418 ----
 .../search/search_filters_registry.js         |   30 -
 .../control_panel/search/time_range_menu.js   |  106 -
 .../static/src/js/widgets/auto_complete.js    |  268 ---
 .../static/src/js/widgets/dropdown_menu.js    |  145 --
 addons/web/static/src/scss/control_panel.scss |   25 +-
 addons/web/static/src/scss/dropdown_menu.scss |    3 -
 addons/web/static/src/scss/search_view.scss   |  239 ++-
 .../static/src/scss/search_view_extra.scss    |    2 +-
 .../web/static/src/scss/webclient_layout.scss |    2 +-
 addons/web/static/src/xml/base.xml            |  993 ++++++----
 addons/web/views/webclient_templates.xml      |   40 +-
 47 files changed, 5249 insertions(+), 6163 deletions(-)
 delete mode 100644 addons/web/static/src/js/chrome/pager.js
 delete mode 100644 addons/web/static/src/js/chrome/sidebar.js
 create mode 100644 addons/web/static/src/js/components/action_menus.js
 create mode 100644 addons/web/static/src/js/components/datepicker.js
 create mode 100644 addons/web/static/src/js/components/dropdown_menu.js
 create mode 100644 addons/web/static/src/js/components/dropdown_menu_item.js
 create mode 100644 addons/web/static/src/js/components/pager.js
 create mode 100644 addons/web/static/src/js/control_panel/control_panel.js
 create mode 100644 addons/web/static/src/js/control_panel/control_panel_model.js
 create mode 100644 addons/web/static/src/js/control_panel/control_panel_x2many.js
 create mode 100644 addons/web/static/src/js/control_panel/custom_favorite_item.js
 create mode 100644 addons/web/static/src/js/control_panel/custom_filter_item.js
 create mode 100644 addons/web/static/src/js/control_panel/custom_group_by_item.js
 create mode 100644 addons/web/static/src/js/control_panel/favorite_menu.js
 create mode 100644 addons/web/static/src/js/control_panel/filter_menu.js
 create mode 100644 addons/web/static/src/js/control_panel/groupby_menu.js
 create mode 100644 addons/web/static/src/js/control_panel/search_bar.js
 create mode 100644 addons/web/static/src/js/control_panel/search_utils.js
 create mode 100644 addons/web/static/src/js/control_panel/time_range_menu.js
 create mode 100644 addons/web/static/src/js/model.js
 delete mode 100644 addons/web/static/src/js/views/control_panel/control_panel_controller.js
 delete mode 100644 addons/web/static/src/js/views/control_panel/control_panel_model.js
 delete mode 100644 addons/web/static/src/js/views/control_panel/control_panel_renderer.js
 delete mode 100644 addons/web/static/src/js/views/control_panel/control_panel_view.js
 delete mode 100644 addons/web/static/src/js/views/control_panel/search/add_new_favorite_menu.js
 delete mode 100644 addons/web/static/src/js/views/control_panel/search/control_panel_view_parameters.js
 delete mode 100644 addons/web/static/src/js/views/control_panel/search/favorite_menu.js
 delete mode 100644 addons/web/static/src/js/views/control_panel/search/favorites_submenus_registry.js
 delete mode 100644 addons/web/static/src/js/views/control_panel/search/filter_menu.js
 delete mode 100644 addons/web/static/src/js/views/control_panel/search/groupby_menu.js
 delete mode 100644 addons/web/static/src/js/views/control_panel/search/groupby_menu_mixin.js
 delete mode 100644 addons/web/static/src/js/views/control_panel/search/search_bar.js
 delete mode 100644 addons/web/static/src/js/views/control_panel/search/search_bar_autocomplete_sources.js
 delete mode 100644 addons/web/static/src/js/views/control_panel/search/search_bar_autocomplete_sources_registry.js
 delete mode 100644 addons/web/static/src/js/views/control_panel/search/search_facet.js
 delete mode 100644 addons/web/static/src/js/views/control_panel/search/search_filters.js
 delete mode 100644 addons/web/static/src/js/views/control_panel/search/search_filters_registry.js
 delete mode 100644 addons/web/static/src/js/views/control_panel/search/time_range_menu.js
 delete mode 100644 addons/web/static/src/js/widgets/auto_complete.js
 delete mode 100644 addons/web/static/src/js/widgets/dropdown_menu.js

diff --git a/addons/web/static/src/js/chrome/pager.js b/addons/web/static/src/js/chrome/pager.js
deleted file mode 100644
index 86700d93374..00000000000
--- a/addons/web/static/src/js/chrome/pager.js
+++ /dev/null
@@ -1,276 +0,0 @@
-odoo.define('web.Pager', function (require) {
-"use strict";
-
-var utils = require('web.utils');
-var Widget = require('web.Widget');
-
-var direction = {
-    previous: -1,
-    next: 1,
-};
-
-var Pager = Widget.extend({
-    template: "Pager",
-    events: {
-        'click .o_pager_next': '_onNext',
-        'click .o_pager_previous': '_onPrevious',
-        'click .o_pager_value': '_onEdit',
-    },
-    /**
-     * The pager goes from 1 to size (included).
-     * The current value is current_min if limit === 1
-     *          or the interval [current_min, current_min + limit[ if limit > 1
-     *
-     * @param {Widget} [parent] the parent widget
-     * @param {int} [size] the total number of elements
-     * @param {int} [current_min] the first element of the current_page
-     * @param {int} [limit] the number of elements per page
-     * @param {boolean} [options.can_edit] editable feature of the pager
-     * @param {boolean} [options.single_page_hidden] (not) to display the pager
-     *   if only one page
-     * @param {function} [options.validate] callback returning a Promise to
-     *   validate changes
-     */
-    init: function (parent, size, current_min, limit, options) {
-        this.state = {
-            size: size,
-            current_min: current_min,
-            limit: limit,
-        };
-        Object.defineProperty(this.state, 'current_max', {
-            get: function() {
-                return Math.min(this.current_min + this.limit - 1, this.size);
-            }
-        });
-        this.options = _.defaults({}, options, {
-            can_edit: true, // editable
-            single_page_hidden: false, // displayed even if there is a single page
-            validate: function() {
-                return Promise.resolve();
-            },
-            withAccessKey: true,  // can be disabled, for example, for x2m widgets
-        });
-        this._super(parent);
-    },
-    /**
-     * Renders the pager
-     *
-     * @returns {Promise}
-     */
-    start: function () {
-        this.$value = this.$('.o_pager_value');
-        this.$limit = this.$('.o_pager_limit');
-        this._render();
-        return this._super();
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * Disables the pager's arrows and the edition
-     */
-    disable: function () {
-        this.disabled = true;
-        this._updateArrows();
-    },
-    /**
-     * Enables the pager's arrows and the edition
-     */
-    enable: function () {
-        this.disabled = false;
-        this._updateArrows();
-    },
-    /**
-     * Executes the next action on the pager
-     */
-    next: function () {
-        this._changeSelection(direction.next);
-    },
-    /**
-     * Executes the previous action on the pager
-     */
-    previous: function () {
-        this._changeSelection(direction.previous);
-    },
-    /**
-     * Sets the state of the pager and renders it
-     * @param {Object} [state] the values to update (size, current_min and limit)
-     * @param {Object} [options]
-     * @param {boolean} [options.notifyChange] set to true to make the pager
-     *   notify the environment that its state changed
-     */
-    updateState: function (state, options) {
-        _.extend(this.state, state);
-        this._render();
-        if (options && options.notifyChange) {
-            this.trigger('pager_changed', _.clone(this.state));
-        }
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Private function that updates the pager's state according to a pager action
-     *
-     * @param {int} [direction] the action (previous or next) on the pager
-     */
-    _changeSelection: function (direction) {
-        var self = this;
-        this.options.validate().then(function() {
-            var size = self.state.size;
-            var current_min = self.state.current_min;
-            var limit = self.state.limit;
-
-            // Compute the new current_min
-            current_min = (current_min + limit*direction);
-            if (current_min > size) {
-                current_min = 1;
-            } else if ((current_min < 1) && (limit === 1)) {
-                current_min = size;
-            } else if ((current_min < 1) && (limit > 1)) {
-                current_min = size - ((size % limit) || limit) + 1;
-            }
-
-            self.state.current_min = current_min;
-            // The re-rendering of the pager must be done before the trigger of
-            // event 'pager_changed' as the rendering may enable the pager
-            // (and a common use is to disable the pager when this event is
-            // triggered, and to re-enable it when the data have been reloaded)
-            self._render();
-            self.trigger('pager_changed', _.clone(self.state));
-        });
-    },
-    /**
-     * Private function that displays an input to edit the pager's state
-     */
-    _edit: function () {
-        if (this.options.can_edit) {
-            var self = this;
-            var $input = $('<input>', {class: 'o_input', type: 'text', value: this.$value.html()});
-
-            this.$value.html($input);
-            $input.focus();
-
-            // Event handlers
-            $input.click(function(ev) {
-                ev.stopPropagation(); // ignore clicks on the input
-            });
-            $input.blur(function(ev) {
-                self._save($(ev.target)); // save the state when leaving the input
-            });
-            $input.on('keydown', function (ev) {
-                ev.stopPropagation();
-                if (ev.which === $.ui.keyCode.ENTER) {
-                    self._save($(ev.target)); // save on enter
-                } else if (ev.which === $.ui.keyCode.ESCAPE) {
-                    self._render(); // leave on escape
-                }
-            });
-        }
-    },
-    /**
-     * Private function that renders the pager's state
-     */
-    _render: function () {
-        var size = this.state.size;
-        var current_min = this.state.current_min;
-        var current_max = this.state.current_max;
-
-        if (size === 0 || (this.options.single_page_hidden && this._singlePage())) {
-            this.do_hide();
-        } else {
-            this.do_show();
-            this._updateArrows();
-
-            var value = "" + current_min;
-            if (this.state.limit > 1) {
-                value += "-" + current_max;
-            }
-            this.$value.html(value);
-            this.$limit.html(size);
-        }
-    },
-    /**
-     * Private function that saves the state from the content of the input
-     *
-     * @param {jQuery} [$input] the jQuery element containing the new state
-     */
-    _save: function ($input) {
-        var self = this;
-        this.options.validate().then(function() {
-            var value = $input.val().split("-");
-            var min = utils.confine(parseInt(value[0], 10), 1, self.state.size);
-            var max = utils.confine(parseInt(value[1], 10), 1, self.state.size);
-
-            if (!isNaN(min)) {
-                self.state.current_min = min;
-                if (!isNaN(max)) {
-                    self.state.limit = utils.confine(max-min+1, 1, self.state.size);
-                } else {
-                    // The state has been given as a single value -> set the limit to 1
-                    self.state.limit = 1;
-                }
-                self.trigger('pager_changed', _.clone(self.state));
-            }
-            // Render the pager's new state (removes the input)
-            self._render();
-        });
-    },
-    /**
-     * @private
-     * @returns {boolean} true iff there is only one page
-     */
-    _singlePage: function () {
-        var state = this.state;
-        return (1 === state.current_min) && (state.current_max === state.size);
-    },
-    /**
-     * Updates the arrows' disable attribute: true iff the pager is disabed or
-     * if there is only one page
-     *
-     * @private
-     */
-    _updateArrows: function () {
-        var disabled = this.disabled || this._singlePage();
-        this.$('button').prop('disabled', disabled);
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @param {MouseEvent} event
-     */
-    _onEdit: function (event) {
-        event.stopPropagation();
-        if (!this.disabled) {
-            this._edit();
-        }
-    },
-    /**
-     * @private
-     * @param {MouseEvent} event
-     */
-    _onNext: function (event) {
-        event.stopPropagation();
-        this.next();
-    },
-    /**
-     * @private
-     * @param {MouseEvent} event
-     */
-    _onPrevious: function (event) {
-        event.stopPropagation();
-        this.previous();
-    },
-});
-
-return Pager;
-
-});
diff --git a/addons/web/static/src/js/chrome/sidebar.js b/addons/web/static/src/js/chrome/sidebar.js
deleted file mode 100644
index ce24bf31f60..00000000000
--- a/addons/web/static/src/js/chrome/sidebar.js
+++ /dev/null
@@ -1,219 +0,0 @@
-odoo.define('web.Sidebar', function (require) {
-"use strict";
-
-var Context = require('web.Context');
-var core = require('web.core');
-var pyUtils = require('web.py_utils');
-var Widget = require('web.Widget');
-
-var QWeb = core.qweb;
-var _t = core._t;
-
-var Sidebar = Widget.extend({
-    events: {
-        "click a.dropdown-item": "_onDropdownClicked"
-    },
-    /**
-     * @override
-     *
-     * @param {Object} options
-     * @param {Object} options.items
-     * @param {Object} options.sections
-     * @param {Object} options.env
-     * @param {Object} options.actions
-     *
-     */
-    init: function (parent, options) {
-        this._super.apply(this, arguments);
-        this.options = _.defaults(options || {}, {
-            'editable': true
-        });
-        this.env = options.env;
-        this.sections = options.sections || [
-            {name: 'print', label: _t('Print')},
-            {name: 'other', label: _t('Action')},
-        ];
-        this.items = options.items || {
-            print: [],
-            other: [],
-        };
-        if (options.actions) {
-            this._addToolbarActions(options.actions);
-        }
-    },
-    /**
-     * @override
-     */
-    start: function () {
-        this._super.apply(this, arguments);
-        this.$el.addClass('btn-group');
-        this._redraw();
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * Update the env for the sidebar then rerender it.
-     *
-     * @param  {Object} env
-     */
-    updateEnv: function (env) {
-        this.env = env;
-        this._redraw();
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * For each item added to the section:
-     *
-     * ``label``
-     *     will be used as the item's name in the sidebar, can be html
-     *
-     * ``action``
-     *     descriptor for the action which will be executed, ``action`` and
-     *     ``callback`` should be exclusive
-     *
-     * ``callback``
-     *     function to call when the item is clicked in the sidebar, called
-     *     with the item descriptor as its first argument (so information
-     *     can be stored as additional keys on the object passed to
-     *     ``_addItems``)
-     *
-     * ``classname`` (optional)
-     *     ``@class`` set on the sidebar serialization of the item
-     *
-     * ``title`` (optional)
-     *     will be set as the item's ``@title`` (tooltip)
-     *
-     * @private
-     * @param {String} sectionCode
-     * @param {Array<{label, action | callback[, classname][, title]}>} items
-     */
-    _addItems: function (sectionCode, items) {
-        if (items) {
-            this.items[sectionCode].unshift.apply(this.items[sectionCode], items);
-        }
-    },
-    /**
-     * Method that will add the custom actions to the toolbar
-     *
-     * @private
-     * @param {Object} toolbarActions
-     */
-    _addToolbarActions: function (toolbarActions) {
-        var self = this;
-        _.each(['print','action','relate'], function (type) {
-            if (type in toolbarActions) {
-                var actions = toolbarActions[type];
-                if (actions && actions.length) {
-                    var items = _.map(actions, function (action) {
-                        return {
-                            label: action.name,
-                            action: action,
-                        };
-                    });
-                    self._addItems(type === 'print' ? 'print' : 'other', items);
-                }
-            }
-        });
-        if ('other' in toolbarActions) {
-            this._addItems('other', toolbarActions.other);
-        }
-    },
-    /**
-     * Performs the action for the item clicked after getting the data
-     * necessary with a trigger up
-     *
-     * @private
-     * @param  {Object} item
-     */
-    _onItemActionClicked: function (item) {
-        var self = this;
-        this.trigger_up('sidebar_data_asked', {
-            callback: function (env) {
-                self.env = env;
-                var activeIdsContext = {
-                    active_id: env.activeIds[0],
-                    active_ids: env.activeIds,
-                    active_model: env.model,
-                    select_all: !!env.selectAll,
-                };
-                if (env.domain) {
-                    activeIdsContext.active_domain = env.domain;
-                }
-
-                var context = pyUtils.eval('context', new Context(env.context, activeIdsContext));
-                self._rpc({
-                    route: '/web/action/load',
-                    params: {
-                        action_id: item.action.id,
-                        context: context,
-                    },
-                }).then(function (result) {
-                    result.context = new Context(
-                        result.context || {}, activeIdsContext)
-                            .set_eval_context(context);
-                    result.flags = result.flags || {};
-                    result.flags.new_window = true;
-                    self.do_action(result, {
-                        on_close: function () {
-                            self.trigger_up('reload');
-                        },
-                    });
-                });
-            }
-        });
-    },
-    /**
-     * Method that renders the sidebar when there is a data update
-     *
-     * @private
-     */
-    _redraw: function () {
-        this.$el.html(QWeb.render('Sidebar', {widget: this}));
-
-        // Hides Sidebar sections when item list is empty
-        _.each(this.$('.o_dropdown'), function (el) {
-            var $dropdown = $(el);
-            if (!$dropdown.find('.dropdown-item').length) {
-                $dropdown.hide();
-            }
-        });
-        this.$("[title]").tooltip({
-            delay: { show: 500, hide: 0}
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * Method triggered when the user clicks on a toolbar dropdown
-     *
-     * @private
-     * @param  {MouseEvent} event
-     */
-    _onDropdownClicked: function (event) {
-        var section = $(event.currentTarget).data('section');
-        var index = $(event.currentTarget).data('index');
-        var item = this.items[section][index];
-        if (item.callback) {
-            item.callback.apply(this, [item]);
-        } else if (item.action) {
-            this._onItemActionClicked(item);
-        } else if (item.url) {
-            return true;
-        }
-        event.preventDefault();
-    },
-});
-
-return Sidebar;
-
-});
diff --git a/addons/web/static/src/js/components/action_menus.js b/addons/web/static/src/js/components/action_menus.js
new file mode 100644
index 00000000000..d94e162ca44
--- /dev/null
+++ b/addons/web/static/src/js/components/action_menus.js
@@ -0,0 +1,171 @@
+odoo.define('web.ActionMenus', function (require) {
+    "use strict";
+
+    const Context = require('web.Context');
+    const DropdownMenu = require('web.DropdownMenu');
+    const pyUtils = require('web.py_utils');
+    const Registry = require('web.Registry');
+
+    const { Component } = owl;
+
+    /**
+     * Action menus (or Action/Print bar, previously called 'Sidebar')
+     *
+     * The side bar is the group of dropdown menus located on the left side of the
+     * control panel. Its role is to display a list of items depending on the view
+     * type and selected records and to execute a set of actions on active records.
+     * It is made out of 2 dropdown menus: Print and Action.
+     *
+     * This component also provides a registry to use custom components in the ActionMenus's
+     * Action menu.
+     * @extends Component
+     */
+    class ActionMenus extends Component {
+
+        mounted() {
+            this._addTooltips();
+        }
+
+        patched() {
+            this._addTooltips();
+        }
+
+        //---------------------------------------------------------------------
+        // Getters
+        //---------------------------------------------------------------------
+
+        /**
+         * @returns {Object[]}
+         */
+        get actionItems() {
+            // Callback based actions
+            const callbackActions = (this.props.items.other || []).map(
+                action => Object.assign({ key: `action-${action.description}` }, action)
+            );
+            // Action based actions
+            const actionActions = this.props.items.action || [];
+            const relateActions = this.props.items.relate || [];
+            const formattedActions = [...actionActions, ...relateActions].map(
+                action => ({ action, description: action.name, key: action.id })
+            );
+            // ActionMenus action registry components
+            const registryActions = this.constructor.registry.values().map(
+                ({ Component, getProps }, index) => ({
+                    key: `registry-action-${index}`,
+                    Component,
+                    props: getProps(this.props),
+                })
+            );
+            return [...callbackActions, ...formattedActions, ...registryActions];
+        }
+
+        /**
+         * @returns {Object[]}
+         */
+        get printItems() {
+            const printActions = this.props.items.print || [];
+            const printItems = printActions.map(
+                action => ({ action, description: action.name, key: action.id })
+            );
+            return printItems;
+        }
+
+        //---------------------------------------------------------------------
+        // Private
+        //---------------------------------------------------------------------
+
+        /**
+         * Add teh tooltips to the items
+         * @private
+         */
+        _addTooltips() {
+            $(this.el.querySelectorAll('[title]')).tooltip({
+                delay: { show: 500, hide: 0 }
+            });
+        }
+
+        //---------------------------------------------------------------------
+        // Handlers
+        //---------------------------------------------------------------------
+
+        /**
+         * Perform the action for the item clicked after getting the data
+         * necessary with a trigger.
+         * @private
+         * @param {OwlEvent} ev
+         */
+        async _executeAction(action) {
+            const activeIdsContext = {
+                active_id: this.props.activeIds[0],
+                active_ids: this.props.activeIds,
+                active_model: this.env.action.res_model,
+                select_all: this.props.selectAll,
+            };
+            if (this.props.domain) {
+                activeIdsContext.active_domain = this.props.domain;
+            }
+
+            const context = pyUtils.eval('context', new Context(this.props.context, activeIdsContext));
+            const result = await this.rpc({
+                route: '/web/action/load',
+                params: {
+                    action_id: action.id,
+                    context: context,
+                },
+            });
+            result.context = new Context(result.context || {}, activeIdsContext)
+                .set_eval_context(context);
+            result.flags = result.flags || {};
+            result.flags.new_window = true;
+            this.trigger('do-action', {
+                action: result,
+                options: {
+                    on_close: () => this.trigger('reload'),
+                },
+            });
+        }
+
+        /**
+         * Handler used to determine which way must be used to execute a selected
+         * action: it will be either:
+         * - a callback (function given by the view controller);
+         * - an action ID (string);
+         * - an URL (string).
+         * @private
+         * @param {OwlEvent} ev
+         */
+        _onItemSelected(ev) {
+            ev.stopPropagation();
+            const { item } = ev.detail;
+            if (item.callback) {
+                item.callback([item]);
+            } else if (item.action) {
+                this._executeAction(item.action);
+            } else if (item.url) {
+                // Event has been prevented at its source: we need to redirect manually.
+                this.env.services.navigate(item.url);
+            }
+        }
+    }
+
+    ActionMenus.registry = new Registry();
+
+    ActionMenus.components = { DropdownMenu };
+    ActionMenus.props = {
+        activeIds: { type: Array, element: [Number|String] }, // virtual IDs are strings.
+        context: Object,
+        domain: { type: Array, optional: 1 },
+        items: {
+            type: Object,
+            shape: {
+                action: { type: Array, optional: 1 },
+                print: { type: Array, optional: 1 },
+                other: { type: Array, optional: 1 },
+            },
+        },
+        selectAll: { type: Boolean, optional: 1 },
+    };
+    ActionMenus.template = 'web.ActionMenus';
+
+    return ActionMenus;
+});
diff --git a/addons/web/static/src/js/components/datepicker.js b/addons/web/static/src/js/components/datepicker.js
new file mode 100644
index 00000000000..715e594e077
--- /dev/null
+++ b/addons/web/static/src/js/components/datepicker.js
@@ -0,0 +1,244 @@
+odoo.define('web.DatePickerOwl', function (require) {
+    "use strict";
+
+    const field_utils = require('web.field_utils');
+    const time = require('web.time');
+    const { useAutofocus } = require('web.custom_hooks');
+
+    const { Component, hooks } = owl;
+    const { useExternalListener, useRef, useState } = hooks;
+
+    let datePickerId = 0;
+
+    /**
+     * Date picker
+     *
+     * This component exposes the API of the tempusdominus datepicker library.
+     * As such, its template is a simple input that will open the TD datepicker
+     * when clicked on. The component will also synchronize any user-input value
+     * with the library widget and vice-vera.
+     *
+     * For further details regarding the implementation of the picker itself, please
+     * refer to the official tempusdominus documentation (note: all props given
+     * to this component will be passed as arguments to instantiate the picker widget).
+     * @extends Component
+     */
+    class DatePicker extends Component {
+        constructor() {
+            super(...arguments);
+
+            this.inputRef = useRef('input');
+            this.state = useState({ warning: false });
+
+            this.datePickerId = `o_datepicker_${datePickerId++}`;
+            this.typeOfDate = 'date';
+
+            useAutofocus();
+            useExternalListener(window, 'scroll', this._onWindowScroll);
+        }
+
+        mounted() {
+            $(this.el).on('show.datetimepicker', this._onDateTimePickerShow.bind(this));
+            $(this.el).on('hide.datetimepicker', this._onDateTimePickerHide.bind(this));
+            $(this.el).on('error.datetimepicker', () => false);
+
+            this._datetimepicker(this.props);
+            this.inputRef.el.value = this._formatDate(this.props.date);
+        }
+
+        willUnmount() {
+            this._datetimepicker('destroy');
+        }
+
+        willUpdateProps(nextProps) {
+            if (nextProps.date) {
+                this._datetimepicker('date', nextProps.date);
+                this.inputRef.el.value = this._formatDate(nextProps.date);
+            }
+        }
+
+        //---------------------------------------------------------------------
+        // Private
+        //---------------------------------------------------------------------
+
+        /**
+         * Handle bootstrap datetimepicker calls.
+         * @private
+         * @param {...any} args anything that will be passed to the datetimepicker function.
+         */
+        _datetimepicker(...args) {
+            $(this.el).datetimepicker(...args);
+        }
+
+        /**
+         * @private
+         * @param {moment} date
+         * @returns {string}
+         */
+        _formatDate(date) {
+            try {
+                return field_utils.format[this.typeOfDate](date, null, { timezone: false });
+            } catch (err) {
+                return false;
+            }
+        }
+
+        /**
+         * @private
+         * @param {string|false} value
+         * @returns {moment}
+         */
+        _parseInput(inputValue) {
+            try {
+                return field_utils.parse[this.typeOfDate](inputValue, null, { timezone: false });
+            } catch (err) {
+                return false;
+            }
+        }
+
+        //---------------------------------------------------------------------
+        // Handlers
+        //---------------------------------------------------------------------
+
+        /**
+         * Reacts to the datetimepicker being hidden
+         * Used to unbind the scroll event from the datetimepicker
+         * @private
+         */
+        _onDateTimePickerHide() {
+            const date = this._parseInput(this.inputRef.el.value);
+            this.state.warning = date.format('YYYY-MM-DD') > moment().format('YYYY-MM-DD');
+            this.trigger('datetime-changed', { date });
+        }
+
+        /**
+         * Reacts to the datetimepicker being shown
+         * Could set/verify our widget value
+         * And subsequently update the datetimepicker
+         * @private
+         */
+        _onDateTimePickerShow() {
+            this.inputRef.el.select();
+        }
+
+        /**
+         * @private
+         */
+        _onInputClick() {
+            this._datetimepicker('toggle');
+        }
+
+        /**
+         * @private
+         */
+        _onInputChange() {
+            const date = this._parseInput(this.inputRef.el.value);
+            if (date) {
+                this.state.warning = date.format('YYYY-MM-DD') > moment().format('YYYY-MM-DD');
+                this.trigger('datetime-changed', { date });
+            } else {
+                this.inputRef.el.value = this._formatDate(this.props.date);
+            }
+        }
+
+        /**
+         * @private
+         */
+        _onWindowScroll(ev) {
+            if (ev.target !== this.inputRef.el) {
+                this._datetimepicker('hide');
+            }
+        }
+    }
+
+    DatePicker.defaultProps = {
+        calendarWeeks: true,
+        format: time.getLangDateFormat(),
+        icons: {
+            clear: 'fa fa-delete',
+            close: 'fa fa-check primary',
+            date: 'fa fa-calendar',
+            down: 'fa fa-chevron-down',
+            next: 'fa fa-chevron-right',
+            previous: 'fa fa-chevron-left',
+            time: 'fa fa-clock-o',
+            today: 'fa fa-calendar-check-o',
+            up: 'fa fa-chevron-up',
+        },
+        locale: moment.locale(),
+        maxDate: moment({ y: 9999, M: 11, d: 31 }),
+        minDate: moment({ y: 1900 }),
+        useCurrent: false,
+        widgetParent: 'body',
+    };
+    DatePicker.props = {
+        // Actual date value
+        date: moment,
+        // Other props
+        buttons: {
+            type: Object,
+            shape: {
+                showClear: Boolean,
+                showClose: Boolean,
+                showToday: Boolean,
+            },
+            optional: 1,
+        },
+        calendarWeeks: Boolean,
+        format: String,
+        icons: {
+            type: Object,
+            shape: {
+                clear: String,
+                close: String,
+                date: String,
+                down: String,
+                next: String,
+                previous: String,
+                time: String,
+                today: String,
+                up: String,
+            },
+        },
+        keyBinds: { validate: kb => typeof kb === 'object' || kb === null, optional: 1 },
+        locale: String,
+        maxDate: moment,
+        minDate: moment,
+        readonly: { type: Boolean, optional: 1 },
+        useCurrent: Boolean,
+        widgetParent: String,
+    };
+    DatePicker.template = 'web.DatePicker';
+
+    /**
+     * Date/time picker
+     *
+     * Similar to the DatePicker component, adding the handling of more specific
+     * time values: hour-minute-second.
+     *
+     * Once again, refer to the tempusdominus documentation for implementation
+     * details.
+     * @extends DatePicker
+     */
+    class DateTimePicker extends DatePicker {
+        constructor() {
+            super(...arguments);
+
+            this.typeOfDate = 'datetime';
+        }
+    }
+
+    DateTimePicker.defaultProps = Object.assign({}, DatePicker.defaultProps, {
+        buttons: {
+            showClear: false,
+            showClose: true,
+            showToday: false,
+        },
+        format: time.getLangDatetimeFormat(),
+    });
+
+    return {
+        DatePicker,
+        DateTimePicker,
+    };
+});
diff --git a/addons/web/static/src/js/components/dropdown_menu.js b/addons/web/static/src/js/components/dropdown_menu.js
new file mode 100644
index 00000000000..df7172ae1d4
--- /dev/null
+++ b/addons/web/static/src/js/components/dropdown_menu.js
@@ -0,0 +1,133 @@
+odoo.define('web.DropdownMenu', function (require) {
+    "use strict";
+
+    const DropdownMenuItem = require('web.DropdownMenuItem');
+
+    const { Component, hooks } = owl;
+    const { useExternalListener, useRef, useState } = hooks;
+
+    /**
+     * Dropdown menu
+     *
+     * Generic component used to generate a list of interactive items. It uses some
+     * bootstrap classes but most interactions are handled in here or in the dropdown
+     * menu item class definition, including some keyboard navigation and escaping
+     * system (click outside to close the dropdown).
+     *
+     * The layout of a dropdown menu is as following:
+     * > a Button (always rendered) with a `title` and an optional `icon`;
+     * > a Dropdown (rendered when open) containing a collection of given items.
+     *   These items must be objects and can have two shapes:
+     *   1. item.Component & item.props > will instantiate the given Component with
+     *      the given props. Any additional key will be useless.
+     *   2. any other shape > will instantiate a DropdownMenuItem with the item
+     *      object being its props. There is no props validation as this object
+     *      will be passed as-is when `selected` and can contain additional meta-keys
+     *      that will not affect the displayed item. For more information regarding
+     *      the behaviour of these items, @see DropdownMenuItem.
+     * @extends Component
+     */
+    class DropdownMenu extends Component {
+        constructor() {
+            super(...arguments);
+
+            this.dropdownMenu = useRef('dropdown');
+            this.state = useState({ open: false });
+
+            this.symbol = this.env.device.isMobile ? 'fa fa-chevron-right float-right mt4' : false;
+
+            useExternalListener(window, 'click', this._onWindowClick);
+            useExternalListener(window, 'keydown', this._onWindowKeydown);
+        }
+
+        //---------------------------------------------------------------------
+        // Getters
+        //---------------------------------------------------------------------
+
+        /**
+         * Overriden in case we want to keep the caret style on the button in mobile.
+         * @returns {boolean}
+         */
+        get displayCaret() {
+            return !this.env.device.isMobile;
+        }
+
+        /**
+         * Meant to be overriden to provide the list of items to display.
+         * @returns {Object[]}
+         */
+        get items() {
+            return this.props.items;
+        }
+
+        /**
+         * @returns {string}
+         */
+        get title() {
+            return this.props.title;
+        }
+
+        //---------------------------------------------------------------------
+        // Handlers
+        //---------------------------------------------------------------------
+
+        /**
+         * @private
+         * @param {KeyboardEvent} ev
+         */
+        _onButtonKeydown(ev) {
+            switch (ev.key) {
+                case 'ArrowLeft':
+                case 'ArrowRight':
+                case 'ArrowUp':
+                case 'ArrowDown':
+                    const firstItem = this.el.querySelector('.dropdown-item');
+                    if (firstItem) {
+                        ev.preventDefault();
+                        firstItem.focus();
+                    }
+            }
+        }
+
+        /**
+         * @private
+         * @param {OwlEvent} ev
+         */
+        _onItemSelected(ev) { }
+
+        /**
+         * @private
+         * @param {MouseEvent} ev
+         */
+        _onWindowClick(ev) {
+            if (this.state.open && !this.el.contains(ev.target)) {
+                this.state.open = false;
+            }
+        }
+
+        /**
+         * @private
+         * @param {KeyboardEvent} ev
+         */
+        _onWindowKeydown(ev) {
+            if (this.state.open && ev.key === 'Escape') {
+                this.state.open = false;
+            }
+        }
+    }
+
+    DropdownMenu.components = { DropdownMenuItem };
+    DropdownMenu.defaultProps = { items: [] };
+    DropdownMenu.props = {
+        icon: { type: String, optional: 1 },
+        items: {
+            type: Array,
+            element: Object,
+            optional: 1,
+        },
+        title: { type: String, optional: 1 },
+    };
+    DropdownMenu.template = 'web.DropdownMenu';
+
+    return DropdownMenu;
+});
diff --git a/addons/web/static/src/js/components/dropdown_menu_item.js b/addons/web/static/src/js/components/dropdown_menu_item.js
new file mode 100644
index 00000000000..bc028e17719
--- /dev/null
+++ b/addons/web/static/src/js/components/dropdown_menu_item.js
@@ -0,0 +1,98 @@
+odoo.define('web.DropdownMenuItem', function (require) {
+    "use strict";
+
+    const { useListener } = require('web.custom_hooks');
+
+    const { Component, hooks } = owl;
+    const { useExternalListener, useRef, useState } = hooks;
+
+    /**
+     * Dropdown menu item
+     *
+     * Generic component instantiated by a dropdown menu (@see DropdownMenu) in
+     * the absence of `Component` and `props` keys in a given item object.
+     *
+     * In its simplest form, a dropdown menu item will be given a description (optional,
+     * but highly recommended) and will trigger a 'select-item' when clicked on.
+     * Additionaly it can receive the following props:
+     * - isActive: will add a `checked` symbol on the left side of the item
+     * - removable: will add a `remove` trash icon on the right side of the item.
+     *              when clicked, will trigger a 'remove-item' event.
+     * - options: will change the behaviour of the item ; instead of triggering
+     *            an event, the item will act as a nested dropdown menu and display
+     *            its given options. These will have the same definition as another
+     *            dropdown item but cannot have options of their own.
+     *
+     * It is recommended to extend this class when defining a Component which will
+     * be put inside of a dropdown menu (@see CustomFilterItem as example).
+     * @extends Component
+     */
+    class DropdownMenuItem extends Component {
+        constructor() {
+            super(...arguments);
+
+            this.canBeOpened = Boolean(this.props.options && this.props.options.length);
+
+            this.fallbackFocusRef = useRef('fallback-focus');
+            this.state = useState({ open: false });
+
+            useExternalListener(window, 'click', this._onWindowClick);
+            useListener('keydown', this._onKeydown);
+        }
+
+        //---------------------------------------------------------------------
+        // Handlers
+        //---------------------------------------------------------------------
+
+        /**
+         * @private
+         * @param {KeyboardEvent} ev
+         */
+        _onKeydown(ev) {
+            if (['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName)) {
+                return;
+            }
+            switch (ev.key) {
+                case 'ArrowLeft':
+                    if (this.canBeOpened && this.state.open) {
+                        ev.preventDefault();
+                        if (this.fallbackFocusRef.el) {
+                            this.fallbackFocusRef.el.focus();
+                        }
+                        this.state.open = false;
+                    }
+                    break;
+                case 'ArrowRight':
+                    if (this.canBeOpened && !this.state.open) {
+                        ev.preventDefault();
+                        this.state.open = true;
+                    }
+                    break;
+                case 'Escape':
+                    ev.target.blur();
+                    if (this.canBeOpened && this.state.open) {
+                        ev.preventDefault();
+                        ev.stopPropagation();
+                        if (this.fallbackFocusRef.el) {
+                            this.fallbackFocusRef.el.focus();
+                        }
+                        this.state.open = false;
+                    }
+            }
+        }
+
+        /**
+         * @private
+         * @param {MouseEvent} ev
+         */
+        _onWindowClick(ev) {
+            if (this.state.open && !this.el.contains(ev.target)) {
+                this.state.open = false;
+            }
+        }
+    }
+
+    DropdownMenuItem.template = 'web.DropdownMenuItem';
+
+    return DropdownMenuItem;
+});
diff --git a/addons/web/static/src/js/components/pager.js b/addons/web/static/src/js/components/pager.js
new file mode 100644
index 00000000000..cada405ac7d
--- /dev/null
+++ b/addons/web/static/src/js/components/pager.js
@@ -0,0 +1,221 @@
+odoo.define('web.Pager', function (require) {
+    "use strict";
+
+    const { useAutofocus } = require('web.custom_hooks');
+
+    const { Component, hooks } = owl;
+    const { useState } = hooks;
+
+    /**
+     * Pager
+     *
+     * The pager goes from 1 to size (included).
+     * The current value is currentMinimum if limit === 1 or the interval:
+     *      [currentMinimum, currentMinimum + limit[ if limit > 1].
+     * The value can be manually changed by clicking on the pager value and giving
+     * an input matching the pattern: min[,max] (in which the comma can be a dash
+     * or a semicolon).
+     * The pager also provides two buttons to quickly change the current page (next
+     * or previous).
+     * @extends Component
+     */
+    class Pager extends Component {
+        /**
+         * @param {Object} [props]
+         * @param {int} [props.size] the total number of elements
+         * @param {int} [props.currentMinimum] the first element of the current_page
+         * @param {int} [props.limit] the number of elements per page
+         * @param {boolean} [props.editable] editable feature of the pager
+         * @param {function} [props.validate] callback returning a Promise to
+         *   validate changes
+         * @param {boolean} [props.withAccessKey] can be disabled, for example,
+         *   for x2m widgets
+         */
+        constructor() {
+            super(...arguments);
+
+            this.state = useState({
+                disabled: false,
+                editing: false,
+            });
+
+            useAutofocus();
+        }
+
+        async willUpdateProps(nextProps) {
+            this.state.editing = false;
+            if (
+                this.props.currentMinimum !== nextProps.currentMinimum ||
+                this.props.limit !== nextProps.limit ||
+                this.props.size !== nextProps.size
+            ) {
+                this.state.disabled = false;
+            }
+        }
+
+        //---------------------------------------------------------------------
+        // Getters
+        //---------------------------------------------------------------------
+
+        /**
+         * @returns {number}
+         */
+        get maximum() {
+            return Math.min(this.props.currentMinimum + this.props.limit - 1, this.props.size);
+        }
+
+        /**
+         * @returns {boolean} true iff there is only one page
+         */
+        get singlePage() {
+            const { currentMinimum, size } = this.props;
+            return (1 === currentMinimum) && (this.maximum === size);
+        }
+
+        /**
+         * @returns {number}
+         */
+        get value() {
+            return this.props.currentMinimum + (this.props.limit > 1 ? `-${this.maximum}` : '');
+        }
+
+        //---------------------------------------------------------------------
+        // Private
+        //---------------------------------------------------------------------
+
+        /**
+         * Update the pager's state according to a pager action
+         * @private
+         * @param {number} [direction] the action (previous or next) on the pager
+         */
+        async _changeSelection(direction) {
+            try {
+                await this.props.validate();
+            } catch (err) {
+                return;
+            }
+            const { limit, size } = this.props;
+
+            // Compute the new currentMinimum
+            let currentMinimum = (this.props.currentMinimum + limit * direction);
+            if (currentMinimum > size) {
+                currentMinimum = 1;
+            } else if ((currentMinimum < 1) && (limit === 1)) {
+                currentMinimum = size;
+            } else if ((currentMinimum < 1) && (limit > 1)) {
+                currentMinimum = size - ((size % limit) || limit) + 1;
+            }
+
+            // The re-rendering of the pager must be done before the trigger of
+            // event 'pager-changed' as the rendering may enable the pager
+            // (and a common use is to disable the pager when this event is
+            // triggered, and to re-enable it when the data have been reloaded).
+            this._updateAndDisable(currentMinimum, limit);
+        }
+
+        /**
+         * Save the state from the content of the input
+         * @private
+         * @param {string} value the new raw pager value
+         * @returns {Promise}
+         */
+        async _saveValue(value) {
+            try {
+                await this.props.validate();
+            } catch (err) {
+                return;
+            }
+            const [min, max] = value.trim().split(/\s*[\-\s,;]\s*/);
+
+            let currentMinimum = Math.max(Math.min(parseInt(min, 10), this.props.size), 1);
+            let maximum = max ? Math.max(Math.min(parseInt(max, 10), this.props.size), 1) : min;
+
+            if (
+                !isNaN(currentMinimum) &&
+                !isNaN(maximum) &&
+                currentMinimum <= maximum
+            ) {
+                const limit = Math.max(maximum - currentMinimum) + 1;
+                this._updateAndDisable(currentMinimum, limit);
+            }
+        }
+
+        /**
+         * @private
+         * @param {Object} payload
+         */
+        _updateAndDisable(currentMinimum, limit) {
+            if (
+                currentMinimum !== this.props.currentMinimum ||
+                limit !== this.props.limit
+            ) {
+                this.state.disabled = true;
+                this.trigger('pager-changed', { currentMinimum, limit });
+            }
+        }
+
+        //---------------------------------------------------------------------
+        // Handlers
+        //---------------------------------------------------------------------
+
+        /**
+         * @private
+         */
+        _onEdit() {
+            if (
+                this.props.editable && // editable
+                !this.state.editing && // not already editing
+                !this.state.disabled // not being changed already
+            ) {
+                this.state.editing = true;
+            }
+        }
+
+        /**
+         * @private
+         * @param {InputEvent} ev
+         */
+        _onValueChange(ev) {
+            this._saveValue(ev.currentTarget.value);
+            if (!this.state.disabled) {
+                ev.preventDefault();
+            }
+        }
+
+        /**
+         * @private
+         * @param {KeyboardEvent} ev
+         */
+        _onValueKeydown(ev) {
+            switch (ev.key) {
+                case 'Enter':
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    this._saveValue(ev.currentTarget.value);
+                    break;
+                case 'Escape':
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    this.state.editing = false;
+                    break;
+            }
+        }
+    }
+
+    Pager.defaultProps = {
+        editable: true,
+        validate: async () => { },
+        withAccessKey: true,
+    };
+    Pager.props = {
+        currentMinimum: { type: Number, optional: 1 },
+        editable: Boolean,
+        limit: { validate: l => !isNaN(l), optional: 1 },
+        size: { type: Number, optional: 1 },
+        validate: Function,
+        withAccessKey: Boolean,
+    };
+    Pager.template = 'web.Pager';
+
+    return Pager;
+});
diff --git a/addons/web/static/src/js/control_panel/control_panel.js b/addons/web/static/src/js/control_panel/control_panel.js
new file mode 100644
index 00000000000..d7105806de4
--- /dev/null
+++ b/addons/web/static/src/js/control_panel/control_panel.js
@@ -0,0 +1,225 @@
+odoo.define('web.ControlPanel', function (require) {
+    "use strict";
+
+    const ActionMenus = require('web.ActionMenus');
+    const ControlPanelModel = require('web.ControlPanelModel');
+    const FavoriteMenu = require('web.FavoriteMenu');
+    const FilterMenu = require('web.FilterMenu');
+    const GroupByMenu = require('web.GroupByMenu');
+    const Pager = require('web.Pager');
+    const SearchBar = require('web.SearchBar');
+    const TimeRangeMenu = require('web.TimeRangeMenu');
+    const { useModel } = require('web.model');
+
+    const { Component, hooks } = owl;
+    const { useRef, useState, useSubEnv } = hooks;
+
+    /**
+     * TODO: remove this whole mechanism as soon as `cp_content` is completely removed.
+     * Extract the 'cp_content' key of the given props and return them as well as
+     * the extracted content.
+     * @param {Object} props
+     * @returns {Object}
+     */
+    function getAdditionalContent(props) {
+        const additionalContent = {};
+        if ('cp_content' in props) {
+            const content = props.cp_content || {};
+            if ('$buttons' in content) {
+                additionalContent.buttons = content.$buttons;
+            }
+            if ('$searchview' in content) {
+                additionalContent.searchView = content.$searchview;
+            }
+            if ('$pager' in content) {
+                additionalContent.pager = content.$pager;
+            }
+            if ('$searchview_buttons' in content) {
+                additionalContent.searchViewButtons = content.$searchview_buttons;
+            }
+        }
+        return additionalContent;
+    }
+
+    /**
+     * Control panel
+     *
+     * The control panel of the action|view. In its standard form, it is composed of
+     * several sections/subcomponents. Here is a simplified graph representing the
+     * action|view and its control panel:
+     *
+     * ┌ View Controller | Action ----------------------------------------------------------┐
+     * | ┌ Control Panel ──────────────┬──────────────────────────────────────────────────┐ |
+     * | │ ┌ Breadcrumbs ────────────┐ │ ┌ Search View ─────────────────────────────────┐ │ |
+     * | │ │ [1] / [2]               │ │ │ [3] [ ============== 4 =============== ] [5] │ │ |
+     * | │ └─────────────────────────┘ │ └──────────────────────────────────────────────┘ │ |
+     * | ├─────────────────────────────┼──────────────────────────────────────────────────┤ |
+     * | │ ┌ Buttons ┐ ┌ ActionMenus ┐ │ ┌ Search Menus ─────┐ ┌ Pager ┐┌ View switcher ┐ │ |
+     * | │ │ [6]     │ │ [7]         │ │ │ [8] [9] [10] [11] │ │ [12]  ││ [13]          │ │ |
+     * | │ └─────────┘ └─────────────┘ │ └───────────────────┘ └───────┘└───────────────┘ │ |
+     * | └─────────────────────────────┴──────────────────────────────────────────────────┘ |
+     * | ┌ View Renderer | Action content ────────────────────────────────────────────────┐ |
+     * | │                                                                                │ |
+     * | │  ...                                                                           │ |
+     * | │                                                                                │ |
+     * | │                                                                                │ |
+     * | │                                                                                │ |
+     * | └────────────────────────────────────────────────────────────────────────────────┘ |
+     * └------------------------------------------------------------------------------------┘
+     *
+     * 1. Breadcrumbs: list of links composed by the `props.breadcrumbs` collection.
+     * 2. Title: the title of the action|view. Can be empty and will yield 'Unnamed'.
+     * 3. Search facets: a collection of facet components generated by the `ControlPanelModel`
+     *    and handled by the `SearchBar` component. @see SearchFacet
+     * 4. SearchBar: @see SearchBar
+     * 5. Advanced search: small buttons used to toggle the [Search Menus] section.
+     *    Will not be displayed if the allowed `props.searchMenuTypes` list is empty.
+     * 6. Buttons: section in which the action|controller is meant to inject its control
+     *             buttons. The template provides a slot for this purpose.
+     * 7. Action menus: @see ActionMenus
+     * 8. Filter menu: @see FilterMenu
+     * 9. Group by menu: @see GroupByMenu
+     * 10. Time range menu: @see TimeRangeMenu
+     * 11. Favorite menu: @see FavoriteMenu
+     * 12. Pager: @see Pager
+     * 13. View switcher buttons: list of buttons composed by the `props.views` collection.
+     *
+     * Subcomponents (especially in the [Search Menus] section) will call
+     * the ControlPanelModel to get processed information about the current view|action.
+     * @see ControlPanelModel for more details.
+     *
+     * Note: an additional temporary (and ugly) mechanic allows to inject a jQuery element
+     * given in `props.cp_content` in a related section:
+     *      $buttons -> [Buttons]
+     *      $searchview -> [Search View]
+     *      $searchview_buttons -> [Search Menus]
+     *      $pager -> [Pager]
+     * This system must be replaced by proper slot usage and the static template
+     * inheritance mechanism when converting the views/actions.
+     * @extends Component
+     */
+    class ControlPanel extends Component {
+        constructor() {
+            super(...arguments);
+
+            this.additionalContent = getAdditionalContent(this.props);
+
+            useSubEnv({
+                action: this.props.action,
+                controlPanelModel: this.props.controlPanelModel,
+                view: this.props.view,
+            });
+
+            // Connect to the model
+            // TODO: move this in enterprise whenever possible
+            if (this.env.controlPanelModel) {
+                this.model = useModel('controlPanelModel');
+            }
+            this.state = useState({
+                displayDropdowns: true,
+            });
+
+            // Reference hooks
+            this.contentRefs = {
+                buttons: useRef('buttons'),
+                pager: useRef('pager'),
+                searchView: useRef('searchView'),
+                searchViewButtons: useRef('searchViewButtons'),
+            };
+
+            this.fields = this._formatFields(this.props.fields);
+        }
+
+        mounted() {
+            this._attachAdditionalContent();
+        }
+
+        patched() {
+            this._attachAdditionalContent();
+        }
+
+        async willUpdateProps(nextProps) {
+            // Note: action and controlPanelModel are not likely to change during
+            // the lifespan of a ControlPanel instance, so we only need to update
+            // the view information.
+            if ('view' in nextProps) {
+                this.env.view = nextProps.view;
+            }
+            if ('fields' in nextProps) {
+                this.fields = this._formatFields(nextProps.fields);
+            }
+            this.additionalContent = getAdditionalContent(nextProps);
+        }
+
+        //---------------------------------------------------------------------
+        // Private
+        //---------------------------------------------------------------------
+
+        /**
+         * Attach additional content extracted from the props 'cp_content' key, if any.
+         * @private
+         */
+        _attachAdditionalContent() {
+            for (const key in this.additionalContent) {
+                if (this.additionalContent[key] && this.additionalContent[key].length) {
+                    const target = this.contentRefs[key].el;
+                    if (target) {
+                        target.innerHTML = "";
+                        target.append(...this.additionalContent[key]);
+                    }
+                }
+            }
+        }
+
+        /**
+         * Give `name` and `description` keys to the fields given to the control
+         * panel.
+         * @private
+         * @param {Object} fields
+         * @returns {Object}
+         */
+        _formatFields(fields) {
+            const formattedFields = {};
+            for (const fieldName in fields) {
+                formattedFields[fieldName] = Object.assign({
+                    description: fields[fieldName].string,
+                    name: fieldName,
+                }, fields[fieldName]);
+            }
+            return formattedFields;
+        }
+    }
+
+    ControlPanel.components = {
+        SearchBar,
+        ActionMenus, Pager,
+        FilterMenu, GroupByMenu, TimeRangeMenu, FavoriteMenu,
+    };
+    ControlPanel.defaultProps = {
+        breadcrumbs: [],
+        fields: {},
+        searchMenuTypes: [],
+        views: [],
+        withBreadcrumbs: true,
+        withSearchBar: true,
+    };
+    ControlPanel.props = {
+        action: Object,
+        breadcrumbs: Array,
+        controlPanelModel: ControlPanelModel,
+        cp_content: { type: Object, optional: 1 },
+        fields: Object,
+        pager: { validate: p => typeof p === 'object' || p === null, optional: 1 },
+        searchMenuTypes: Array,
+        actionMenus: { validate: s => typeof s === 'object' || s === null, optional: 1 },
+        title: { type: String, optional: 1 },
+        view: { type: Object, optional: 1 },
+        views: Array,
+        withBreadcrumbs: Boolean,
+        withSearchBar: Boolean,
+    };
+
+    ControlPanel.template = 'web.ControlPanel';
+
+    return ControlPanel;
+});
diff --git a/addons/web/static/src/js/control_panel/control_panel_model.js b/addons/web/static/src/js/control_panel/control_panel_model.js
new file mode 100644
index 00000000000..8ffe53ced6f
--- /dev/null
+++ b/addons/web/static/src/js/control_panel/control_panel_model.js
@@ -0,0 +1,1721 @@
+odoo.define('web.ControlPanelModel', function (require) {
+    "use strict";
+
+    const Domain = require('web.Domain');
+    const { Model } = require('web.model');
+    const { parseArch } = require('web.viewUtils');
+    const pyUtils = require('web.py_utils');
+
+    const { COMPARISON_TIME_RANGE_OPTIONS,
+        DEFAULT_INTERVAL, DEFAULT_PERIOD, FACET_ICONS,
+        INTERVAL_OPTIONS, OPTION_GENERATORS,
+        TIME_RANGE_OPTIONS, YEAR_OPTIONS,
+        rankPeriod, rankInterval } = require('web.searchUtils');
+
+    const FAVORITE_PRIVATE_GROUP = 1;
+    const FAVORITE_SHARED_GROUP = 2;
+
+    let filterId = 0;
+    let groupId = 0;
+    let groupNumber = 0;
+
+    /**
+     * Control panel model
+     *
+     * The control panel model state is an object structured in the following way:
+     *
+     *  {
+     *      filters: Object{},
+     *      query: Object[],
+     *  }
+     *
+     *-------------------------------------------------------------------------
+     * Filters
+     *-------------------------------------------------------------------------
+     *
+     * The keys are stringified numbers called 'filter ids'.
+     * The values are objects called 'filters'.
+     *
+     * Each filter has the following properties:
+     *      @prop {number} id unique identifier, also the filter's corresponding key
+     *      @prop {number} groupId the id of some group, actually the group itself,
+     *                     the (active) 'groups' are reconstructed in _getGroups.
+     *      @prop {string} description the description of the filter
+     *      @prop {string} type 'filter'|'groupBy'|'timeRange'|'field'|'favorite'
+     *
+     * Other properties can be present according to the corresponding filter type:
+     *
+     * • type 'filter':
+     *      @prop {number} groupNumber used to separate items in the 'Filters' menu
+     *      @prop {string} [context] context
+     *      @prop {boolean} [invisible] determine if the filter is accessible in the interface
+     *      @prop {boolean} [isDefault]
+     *      @if isDefault = true:
+     *          > @prop {number} [defaultRank=-5] used to determine the order of
+     *          >                activation of default filters
+     *      @prop {boolean} [hasOptions] true if the filter comes from an arch node
+     *                      with a valid 'date' attribute.
+     *      @if hasOptions = true
+     *          > @prop {string} defaultOptionId option identifier determined by
+     *          >                default_period attribute (@see OPTION_GENERATORS).
+     *          >                Default set to DEFAULT_PERIOD.
+     *          > @prop {string} fieldName determined by the value of 'date' attribute
+     *          > @prop {string} fieldType 'date' or 'datetime', type of the corresponding field
+     *          > @prop {Objecŧ[]} basicDomains of the form { description, domain }[]
+     *      @else
+     *          > @prop {string} domain
+     *
+     * • type 'groupBy':
+     *      @prop {string} fieldName
+     *      @prop {string} fieldType
+     *      @prop {number} groupNumber used to separate items in the 'Group by' menu
+     *      @prop {boolean} [isDefault]
+     *      @if isDefault = true:
+     *          > @prop {number} defaultRank used to determine the order of activation
+     *          >                of default filters
+     *      @prop {boolean} [invisible] determine if the filter is accessible in the interface
+     *      @prop {boolean} [hasOptions] true if field type is 'date' or 'datetime'
+     *      @if hasOptions=true
+     *          > @prop {string} defaultOptionId option identifier (see INTERVAL_OPTIONS)
+     *                           default set to DEFAULT_INTERVAL.
+     *
+     * • type 'timeRange':
+     *      no extra key, a single filter has that type
+     *
+     * • type 'field':
+     *      @prop {string} fieldName
+     *      @prop {string} fieldType
+     *      @prop {string} [context]
+     *      @prop {string} [domain]
+     *      @prop {string} [filterDomain]
+     *      @prop {boolean} [invisible] determine if the filter is accessible in the interface
+     *      @prop {boolean} [isDefault]
+     *      @prop {string} [operator]
+     *      @if isDefault = true:
+     *          > @prop {number} [defaultRank=-10] used to determine the order of
+     *          >                activation of filters
+     *          > @prop {Object} defaultAutocompleteValue of the form { value, label, operator }
+     *
+     * • type: 'favorite':
+     *      @prop {Object} context
+     *      @prop {string} domain
+     *      @prop {string[]} groupBys
+     *      @prop {number} groupNumber 1 | 2, 2 if the favorite is shared
+     *      @prop {string[]} orderedBy
+     *      @prop {boolean} [removable=true] indicates that the favorite can be deleted
+     *      @prop {number} serverSideId
+     *      @prop {number} userId
+     *      @prop {boolean} [isDefault]
+     *      @prop {Object} [timeRanges] of the form { fieldName, rangeId[, comparisonRangeId] }
+     *
+     *-------------------------------------------------------------------------
+     * Query
+     *-------------------------------------------------------------------------
+     *
+     * The query elements are objects called 'query elements'.
+     *
+     * Each query element has the following properties:
+     *      @prop {number} filterId the id of some filter
+     *      @prop {number} groupId the id of some group (actually the group itself)
+     *
+     * Other properties must be defined according to the corresponding filter type.
+     *
+     * • type 'filter' with hasOptions=true:
+     *      @prop {string} optionId option identifier (@see OPTION_GENERATORS)
+     *
+     * • type 'groupBy' with hasOptions=true:
+     *      @prop {string} optionId option identifier (@see INTERVAL_OPTIONS)
+     *
+     * • type 'timeRange':
+     *      @prop {string} fieldName name of a field
+     *      @prop {string} rangeId option identifier (see TIME_RANGE_OPTIONS)
+     *      @prop {string} [comparisonRangeId] option identifier (see COMPARISON_TIME_RANGE_OPTIONS)
+     *
+     * • type 'field':
+     *      @prop {string} label description put in the facet (can be temporarilly missing)
+     *      @prop {(string|number)} value used as the value of the generated domain
+     *      @prop {string} operator used as the operator of the generated domain
+     *
+     * The query elements indicates what are the active filters and 'how' they are active.
+     * The key groupId has been added for simplicity. It could have been removed from query elements
+     * since the information is available on the corresponding filters.
+     * @extends Model
+     */
+    class ControlPanelModel extends Model {
+        /**
+         * @param {Object} config
+         * @param {(string|number)} config.actionId
+         * @param {Object} config.env
+         * @param {string} config.modelName
+         * @param {Object} [config.importedState]
+         * @param {Array[]} [config.actionDomain=[]]
+         * @param {Object} [config.actionContext={}]
+         * @param {Object[]} [config.dynamicFilters=[]]
+         * @param {string[]} [config.searchMenuTypes=[]]
+         * @param {Object} [config.viewInfo={}]
+         * @param {boolean} [config.withSearchBar=true]
+         *
+         */
+        constructor(config) {
+            super();
+
+            this._setProperties(config);
+
+            if (this.withSearchBar) {
+                if (config.importedState) {
+                    this.importState(config.importedState);
+                } else {
+                    this._prepareInitialState();
+                }
+            }
+
+            this.isReady = Promise.all(this.labelPromises);
+        }
+
+        //---------------------------------------------------------------------
+        // Public
+        //---------------------------------------------------------------------
+
+        /**
+         * Activate a filter of type 'field' with given filterId with
+         * 'autocompleteValues' value, label, and operator.
+         * @param {Object}
+         */
+        addAutoCompletionValues({ filterId, label, value, operator }) {
+            const queryElem = this.state.query.find(queryElem =>
+                queryElem.filterId === filterId &&
+                queryElem.value === value &&
+                queryElem.operator === operator
+            );
+            if (!queryElem) {
+                const { groupId } = this.state.filters[filterId];
+                this.state.query.push({ filterId, groupId, label, value, operator });
+            } else {
+                queryElem.label = label;
+            }
+        }
+
+        /**
+         * Activate the unique filter of type 'timeRange' with provided 'options' fieldName, rangeId,
+         * and optional comparisonRangeId.
+         * @param {string} fieldName
+         * @param {string} rangeId
+         * @param {string} [comparisonRangeId]
+         */
+        activateTimeRange(fieldName, rangeId, comparisonRangeId) {
+            const filter = Object.values(this.state.filters).find(f => f.type === 'timeRange');
+            const detail = { fieldName, rangeId };
+            if (comparisonRangeId) {
+                detail.comparisonRangeId = comparisonRangeId;
+            }
+            const queryElem = this.state.query.find(queryElem => queryElem.filterId === filter.id);
+            if (queryElem) {
+                Object.assign(queryElem, detail);
+                if (!comparisonRangeId) {
+                    delete queryElem.comparisonRangeId;
+                }
+            } else {
+                this.state.query.push(Object.assign({ groupId: filter.groupId, filterId: filter.id }, detail));
+            }
+        }
+
+        /**
+         * Remove all the query elements from query.
+         */
+        clearQuery() {
+            this.state.query = [];
+        }
+
+        /**
+         * Create a new filter of type 'favorite' and activate it.
+         * A new group containing only that filter is created.
+         * The query is emptied before activating the new favorite.
+         * @param {Object} preFilter
+         * @returns {Promise}
+         */
+        async createNewFavorite(preFilter) {
+            const preFavorite = await this._saveQuery(preFilter);
+            this.clearQuery();
+            const filter = Object.assign(preFavorite, {
+                groupId,
+                id: filterId,
+            });
+            this.state.filters[filterId] = filter;
+            this.state.query.push({ groupId, filterId });
+            groupId++;
+            filterId++;
+        }
+
+        /**
+         * Create new filters of type 'filter' and activate them.
+         * A new group containing only those filters is created.
+         * @param {Object[]} filters
+         * @returns {number[]}
+         */
+        createNewFilters(prefilters) {
+            if (!prefilters.length) {
+                return [];
+            }
+            const newFilterIdS = [];
+            prefilters.forEach(preFilter => {
+                const filter = Object.assign(preFilter, {
+                    groupId,
+                    groupNumber,
+                    id: filterId,
+                    type: 'filter',
+                });
+                this.state.filters[filterId] = filter;
+                this.state.query.push({ groupId, filterId });
+                newFilterIdS.push(filterId);
+                filterId++;
+            });
+            groupId++;
+            groupNumber++;
+            return newFilterIdS;
+        }
+
+        /**
+         * Create a new filter of type 'groupBy' and activate it.
+         * It is added to the unique group of groupbys.
+         * @param {Object} field
+         */
+        createNewGroupBy(field) {
+            const groupBy = Object.values(this.state.filters).find(f => f.type === 'groupBy');
+            const filter = {
+                description: field.string || field.name,
+                fieldName: field.name,
+                fieldType: field.type,
+                groupId: groupBy ? groupBy.groupId : groupId++,
+                groupNumber,
+                id: filterId,
+                type: 'groupBy',
+            };
+            this.state.filters[filterId] = filter;
+            if (['date', 'datetime'].includes(field.type)) {
+                filter.hasOptions = true;
+                filter.defaultOptionId = DEFAULT_INTERVAL;
+                this.toggleFilterWithOptions(filterId);
+            } else {
+                this.toggleFilter(filterId);
+            }
+            groupNumber++;
+            filterId++;
+        }
+
+        /**
+         * Deactivate a group with provided groupId, i.e. delete the query elements
+         * with given groupId.
+         * @param {number} groupId
+         */
+        deactivateGroup(groupId) {
+            this.state.query = this.state.query.filter(
+                queryElem => queryElem.groupId !== groupId
+            );
+        }
+
+        /**
+         * Delete a filter of type 'favorite' with given filterId server side and
+         * in control panel model. Of course the filter is also removed
+         * from the search query.
+         * @param {number} filterId
+         */
+        async deleteFavorite(filterId) {
+            const { serverSideId } = this.state.filters[filterId];
+            await this.env.dataManager.delete_filter(serverSideId);
+            const index = this.state.query.findIndex(
+                queryElem => queryElem.filterId === filterId
+            );
+            delete this.state.filters[filterId];
+            if (index >= 0) {
+                this.state.query.splice(index, 1);
+            }
+        }
+
+        /**
+         * Return the state of the control panel model (the filters and the
+         * current query). This state can then be used in an other control panel
+         * model (with same key modelName). See importedState.
+         * @returns {Object}
+         */
+        exportState() {
+            return JSON.parse(JSON.stringify(this.state));
+        }
+
+        /**
+         * Called by search bar to render the facets
+         * @returns {Object[]}
+         */
+        getFacets() {
+            const groups = this._getGroups();
+            return groups.map(group => {
+                const { activities, type, id } = group;
+                const facet = {
+                    groupId: id,
+                    separator: type === 'groupBy' ? ">" : this.env._t("or"),
+                    values: this._getFacetDescriptions(activities, type),
+                };
+                const icon = FACET_ICONS[type];
+                if (icon) {
+                    facet.icon = icon;
+                } else {
+                    facet.title = activities[0].filter.description;
+                }
+                return facet;
+            });
+        }
+
+        /**
+         * Return an array containing enriched copies of the filters of the provided type.
+         * @param {string} type
+         * @returns {Object[]}
+         */
+        getFiltersOfType(type) {
+            const filters = Object.values(this.state.filters).reduce(
+                (filters, filter) => {
+                    if (filter.type === type && !filter.invisible) {
+                        const activities = this.state.query.filter(
+                            queryElem => queryElem.filterId === filter.id
+                        );
+                        const enrichedFilter = this._enrichFilterCopy(filter, activities);
+                        filters.push(enrichedFilter);
+                    }
+                    return filters;
+                },
+                []
+            );
+            if (type === 'favorite') {
+                filters.sort((f1, f2) => f1.groupNumber - f2.groupNumber);
+            }
+            return filters;
+        }
+
+        /**
+         * Principal objects used by controllers/models to fetch data.
+         * @returns {Object} An object called search query with keys domain, groupBy,
+         *      context, orderedBy, and (optionally) timeRanges.
+         */
+        getQuery() {
+            const requireEvaluation = true;
+            const groups = this._getGroups();
+            const query = {
+                context: this._getContext(groups),
+                domain: this._getDomain(groups, requireEvaluation),
+                groupBy: this._getGroupBy(groups),
+                orderedBy: this._getOrderedBy(groups)
+            };
+            if (this.searchMenuTypes.includes('timeRange')) {
+                const timeRanges = this._getTimeRanges(requireEvaluation);
+                query.timeRanges = timeRanges || {};
+            }
+            return query;
+        }
+
+        /**
+         * Allow to reuse the state of a previous control panel model with same modelName.
+         * This is mainly used when switching views.
+         * @param {Object} state
+         */
+        importState(state) {
+            Object.assign(this.state, state);
+        }
+
+        /**
+         * This function won't do anything: its purpose is to call the dispatch
+         * method to trigger a 'search' event + reload the components.
+         */
+        search() { }
+
+        /**
+         * Activate or deactivate the simple filter with given filterId, i.e.
+         * add or remove a corresponding query element.
+         * @param {string} filterId
+         */
+        toggleFilter(filterId) {
+            const index = this.state.query.findIndex(
+                queryElem => queryElem.filterId === filterId
+            );
+            if (index >= 0) {
+                this.state.query.splice(index, 1);
+            } else {
+                const { groupId, type } = this.state.filters[filterId];
+                if (type === 'favorite') {
+                    this.state.query = [];
+                }
+                this.state.query.push({ groupId, filterId });
+            }
+        }
+
+        /**
+         * Used to toggle a query element { filterId, optionId, (groupId) }.
+         * This can impact the query in various form, e.g. add/remove other query elements
+         * in case the filter is of type 'filter'.
+         * @param {string} filterId
+         * @param {string} [optionId]
+         */
+        toggleFilterWithOptions(filterId, optionId) {
+            const filter = this.state.filters[filterId];
+            optionId = optionId || filter.defaultOptionId;
+
+            const noYearSelected = (filterId) => !this.state.query.some(queryElem => {
+                return queryElem.filterId === filterId && YEAR_OPTIONS[queryElem.optionId];
+            });
+
+            const defaultYearId = (optionId) => {
+                const year = this.optionGenerators.find(o => o.id === optionId).defaultYear;
+                return this.optionGenerators.find(o => o.setParam.year === year).id;
+            };
+
+            const index = this.state.query.findIndex(
+                queryElem => queryElem.filterId === filterId && queryElem.optionId === optionId
+            );
+            if (index >= 0) {
+                this.state.query.splice(index, 1);
+                if (filter.type === 'filter' && noYearSelected(filterId)) {
+                    // This is the case where optionId was the last option
+                    // of type 'year' to be there before being removed above.
+                    // Since other options of type 'month' or 'quarter' do
+                    // not make sense without a year we deactivate all options.
+                    this.state.query = this.state.query.filter(
+                        queryElem => queryElem.filterId !== filterId
+                    );
+                }
+            } else {
+                this.state.query.push({ groupId: filter.groupId, filterId, optionId });
+                if (filter.type === 'filter' && noYearSelected(filterId)) {
+                    // Here we add 'this_year' as options if no option of type
+                    // year is already selected.
+                    this.state.query.push({
+                        groupId: filter.groupId,
+                        filterId,
+                        optionId: defaultYearId(optionId),
+                    });
+                }
+            }
+        }
+
+        /**
+         * TODO: the way it is done could be improved, but the actual state of the
+         * searchView doesn't allow to do much better.
+         *
+         * Update the domain of the search view by adding and/or removing filters.
+         * @param {Object[]} newFilters list of filters to add, described by
+         *   objects with keys domain (the domain as an Array), description (the text
+         *   to display in the facet) and type with value 'filter'.
+         * @param {number[]} filtersToRemove list of filter ids to remove
+         *   (previously added ones)
+         * @returns {number[]} list of added filter ids (to pass as filtersToRemove
+         *   for a further call to this function)
+         */
+        updateFilters(newFilters, filtersToRemove) {
+            const newFilterIdS = this.createNewFilters(newFilters);
+            this.state.query = this.state.query.filter(
+                queryElem => !filtersToRemove.includes(queryElem.filterId)
+            );
+            return newFilterIdS;
+        }
+
+        //---------------------------------------------------------------------
+        // Private
+        //---------------------------------------------------------------------
+
+        /**
+         * Activate the filter of type timeRange with the options set in the key
+         * time_ranges of actionContext (if any).
+         * @private
+         */
+        _activateDefaultTimeRanges() {
+            const { field, range, comparisonRange } = this.actionContext.time_ranges;
+            this.activateTimeRange(field, range, comparisonRange);
+        }
+
+        /**
+         * Activate the default favorite (if any) or all default filters.
+         * @private
+         */
+        _activateDefaultFilters() {
+            const defaultFilters = [];
+            const defaultFavorites = [];
+            for (const fId in this.state.filters) {
+                if (this.state.filters[fId].isDefault) {
+                    if (this.state.filters[fId].type === 'favorite') {
+                        defaultFavorites.push(this.state.filters[fId]);
+                    } else {
+                        defaultFilters.push(this.state.filters[fId]);
+                    }
+                }
+            }
+            if (this.activateDefaultFavorite && defaultFavorites.length) {
+                // Activate default favorite
+                this.toggleFilter(defaultFavorites[0].id);
+            } else {
+                // Activate default filters
+                defaultFilters
+                    .sort((f1, f2) => (f1.defaultRank || 100) - (f2.defaultRank || 100))
+                    .forEach(f => {
+                        if (f.hasOptions) {
+                            this.toggleFilterWithOptions(f.id);
+                        } else if (f.type === 'field') {
+                            let { operator, label, value } = f.defaultAutocompleteValue;
+                            this.addAutoCompletionValues({
+                                filterId: f.id,
+                                value,
+                                operator,
+                                label,
+                            });
+                        } else {
+                            this.toggleFilter(f.id);
+                        }
+                    });
+            }
+            if (this.actionContext.time_ranges) {
+                this._activateDefaultTimeRanges();
+            }
+        }
+
+        /**
+         * This function populates the 'filters' object at initialization.
+         * The filters come from:
+         *     - config.viewInfo.arch (types 'filter', 'groupBy', 'field'),
+         *     - config.dynamicFilters (type 'filter'),
+         *     - config.viewInfo.favoriteFilters (type 'favorite'),
+         *     - code itself (type 'timeRange')
+         * @private
+         */
+        _addFilters() {
+            this._createGroupOfFiltersFromArch();
+            this._createGroupOfDynamicFilters();
+            this._createGroupOfFavorites();
+            this._createGroupOfTimeRanges();
+        }
+
+        /**
+         * Add filters of type 'filter' determined by the key array this.dynamicFilters.
+         * @private
+         */
+        _createGroupOfDynamicFilters() {
+            const pregroup = this.dynamicFilters.map(filter => {
+                return {
+                    description: filter.description,
+                    domain: JSON.stringify(filter.domain),
+                    isDefault: true,
+                    type: 'filter',
+                };
+            });
+            this._createGroupOfFilters(pregroup);
+        }
+
+        /**
+         * Add filters of type 'favorite' determined by array this.favoriteFilters.
+         * @private
+         */
+        _createGroupOfFavorites() {
+            this.favoriteFilters.forEach(irFilter => {
+                const favorite = this._irFilterToFavorite(irFilter);
+                this._createGroupOfFilters([favorite]);
+            });
+        }
+
+        /**
+         * Using a list (a 'pregroup') of 'prefilters', create new filters in `state.filters`
+         * for each prefilter. The new filters belong to a same new group.
+         * @private
+         * @param {Object[]} pregroup, list of 'prefilters'
+         * @param {string} type
+         */
+        _createGroupOfFilters(pregroup) {
+            pregroup.forEach(preFilter => {
+                const filter = Object.assign(preFilter, { groupId, id: filterId });
+                this.state.filters[filterId] = filter;
+                if (filter.isDefault && filter.type === 'field') {
+                    this._prepareDefaultLabel(filter);
+                }
+                filterId++;
+            });
+            groupId++;
+        }
+
+        /**
+         * Parse the arch of a 'search' view and create corresponding filters and groups.
+         *
+         * A searchview arch may contain a 'searchpanel' node, but this isn't
+         * the concern of the ControlPanel (the SearchPanel will handle it).
+         * Ideally, this code should whitelist the tags to take into account
+         * instead of blacklisting the others, but with the current (messy)
+         * structure of a searchview arch, it's way simpler to do it that way.
+         * @private
+         */
+        _createGroupOfFiltersFromArch() {
+            const children = this.parsedArch.children.filter(
+                child => child instanceof Object && child.tag !== 'searchpanel'
+            );
+            const preFilters = children.reduce(
+                (preFilters, child) => {
+                    if (child.tag === 'group') {
+                        return [...preFilters, ...child.children.map(c => this._evalArchChild(c))];
+                    } else {
+                        return [...preFilters, this._evalArchChild(child)];
+                    }
+                },
+                []
+            );
+            preFilters.push({ tag: 'separator' });
+
+            // create groups and filters
+            let currentTag;
+            let currentGroup = [];
+            let pregroupOfGroupBys = [];
+
+            preFilters.forEach(preFilter => {
+                if (
+                    preFilter.tag !== currentTag ||
+                    ['separator', 'field'].includes(preFilter.tag)
+                ) {
+                    if (currentGroup.length) {
+                        if (currentTag === 'groupBy') {
+                            pregroupOfGroupBys = [...pregroupOfGroupBys, ...currentGroup];
+                        } else {
+                            this._createGroupOfFilters(currentGroup);
+                        }
+                    }
+                    currentTag = preFilter.tag;
+                    currentGroup = [];
+                    groupNumber++;
+                }
+                if (preFilter.tag !== 'separator') {
+                    const filter = {
+                        type: preFilter.tag,
+                        // we need to codify here what we want to keep from attrs
+                        // and how, for now I put everything.
+                        // In some sence, some filter are active (totally determined, given)
+                        // and others are passive (require input(s) to become determined)
+                        // What is the right place to process the attrs?
+                    };
+                    if (filter.type === 'filter' || filter.type === 'groupBy') {
+                        filter.groupNumber = groupNumber;
+                    }
+                    this._extractAttributes(filter, preFilter.attrs);
+                    currentGroup.push(filter);
+                }
+            });
+
+            if (pregroupOfGroupBys.length) {
+                this._createGroupOfFilters(pregroupOfGroupBys);
+            }
+        }
+
+        /**
+         * Add a single filter of type 'timeRange' to filters.
+         * @private
+         */
+        _createGroupOfTimeRanges() {
+            const pregroup = [{ type: 'timeRange' }];
+            this._createGroupOfFilters(pregroup);
+        }
+
+        /**
+         * The parent of the control panel (an action or a controller) is not
+         * necessarily a component. So we need to notify it through a
+         * mechanism different from __notifyComponents. Here we use the fact
+         * that the controlPanelModel is an (owl) EventBus to communicate with
+         * the parent.
+         */
+        _dispatch() {
+            this.trigger('search', this.getQuery());
+        }
+
+        /**
+         * Returns a copy of the provided filter with additional information
+         * used only outside of the control panel model, like in search bar or in the
+         * various menus.
+         * @private
+         * @param {Object} filter
+         * @param {Object[]} filterQueryElements
+         * @returns {Object}
+         */
+        _enrichFilterCopy(filter, filterQueryElements) {
+            const isActive = Boolean(filterQueryElements.length);
+            const f = Object.assign({ isActive }, filter);
+
+            function _enrichOptions(options) {
+                return options.map(o => {
+                    const { description, id, groupNumber } = o;
+                    const isActive = filterQueryElements.some(a => a.optionId === id);
+                    return { description, id, groupNumber, isActive };
+                });
+            }
+
+            switch (f.type) {
+                case 'filter':
+                    if (f.hasOptions) {
+                        f.options = _enrichOptions(this.optionGenerators);
+                    }
+                    break;
+                case 'groupBy':
+                    if (f.hasOptions) {
+                        f.options = _enrichOptions(this.intervalOptions);
+                    }
+                    break;
+                case 'field':
+                    f.autoCompleteValues = filterQueryElements.map(
+                        ({ label, value, operator }) => ({ label, value, operator })
+                    );
+                    break;
+                case 'timeRange':
+                    if (filterQueryElements.length) {
+                        const timeRange = this._extractTimeRange(filterQueryElements[0]);
+                        Object.assign(f, timeRange);
+                    }
+                    break;
+            }
+            return f;
+        }
+
+        /**
+         * Process a given arch node and enrich it.
+         * @private
+         * @param {Object} child
+         * @returns {Object}
+         */
+        _evalArchChild(child) {
+            if (child.attrs.context) {
+                try {
+                    const context = pyUtils.eval('context', child.attrs.context);
+                    child.attrs.context = context;
+                    if (context.group_by) {
+                        // let us extract basic data since we just evaluated context
+                        // and use a correct tag!
+                        child.attrs.fieldName = context.group_by.split(':')[0];
+                        child.attrs.defaultInterval = context.group_by.split(':')[1];
+                        child.tag = 'groupBy';
+                    }
+                } catch (e) { }
+            }
+            if (this.searchDefaults.hasOwnProperty(child.attrs.name)) {
+                child.attrs.isDefault = true;
+                let value = this.searchDefaults[child.attrs.name];
+                if (child.tag === 'field') {
+                    if (value instanceof Array) {
+                        value = value[0];
+                    }
+                    child.attrs.defaultAutocompleteValue = { value, operator: '=' };
+                } else if (child.tag === 'groupBy') {
+                    child.attrs.defaultRank = typeof value === 'number' ? value : 100;
+                }
+            }
+            return child;
+        }
+
+        /**
+         * Process the attributes set on an arch node and adds various keys to
+         * the given filter.
+         * @private
+         * @param {Object} filter
+         * @param {Object} attrs
+         */
+        _extractAttributes(filter, attrs) {
+            if (attrs.isDefault) {
+                filter.isDefault = attrs.isDefault;
+            }
+            filter.description = attrs.string || attrs.help || attrs.name || attrs.domain || 'Ω';
+            if (attrs.invisible) {
+                filter.invisible = true;
+            }
+            switch (filter.type) {
+                case 'filter':
+                    if (attrs.context) {
+                        filter.context = attrs.context;
+                    }
+                    if (attrs.date) {
+                        filter.hasOptions = true;
+                        filter.fieldName = attrs.date;
+                        filter.fieldType = this.fields[attrs.date].type;
+                        filter.defaultOptionId = attrs.default_period || DEFAULT_PERIOD;
+                        filter.basicDomains = this._getDateFilterBasicDomains(filter);
+                    } else {
+                        filter.domain = attrs.domain || '[]';
+                    }
+                    if (filter.isDefault) {
+                        filter.defaultRank = -5;
+                    }
+                    break;
+                case 'groupBy':
+                    filter.fieldName = attrs.fieldName;
+                    filter.fieldType = this.fields[attrs.fieldName].type;
+                    if (['date', 'datetime'].includes(filter.fieldType)) {
+                        filter.hasOptions = true;
+                        filter.defaultOptionId = attrs.defaultInterval || DEFAULT_INTERVAL;
+                    }
+                    if (filter.isDefault) {
+                        filter.defaultRank = attrs.defaultRank;
+                    }
+                    break;
+                case 'field':
+                    const field = this.fields[attrs.name];
+                    filter.fieldName = attrs.name;
+                    filter.fieldType = field.type;
+                    if (attrs.domain) {
+                        filter.domain = attrs.domain;
+                    }
+                    if (attrs.filter_domain) {
+                        filter.filterDomain = attrs.filter_domain;
+                    } else if (attrs.operator) {
+                        filter.operator = attrs.operator;
+                    }
+                    if (attrs.context) {
+                        filter.context = attrs.context;
+                    }
+                    if (filter.isDefault) {
+                        filter.defaultRank = -10;
+                        filter.defaultAutocompleteValue = attrs.defaultAutocompleteValue;
+                    }
+                    break;
+            }
+            if (filter.fieldName && !attrs.string) {
+                const { string } = this.fields[filter.fieldName];
+                filter.description = string;
+            }
+        }
+
+        /**
+         * For filter of type 'filter' with hasOptions=true,
+         * returns an array of domains or descriptions according to key.
+         * @param {Object} filter
+         * @param {Object[]} filterQueryElements
+         * @param {'domain'|'description'} key
+         * @returns {string[]}
+         */
+        _extractInfoFromBasicDomains(filter, filterQueryElements, key) {
+            const results = [];
+            const yearIds = [];
+            const otherOptionIds = [];
+            filterQueryElements.forEach(({ optionId }) => {
+                if (YEAR_OPTIONS[optionId]) {
+                    yearIds.push(optionId);
+                } else {
+                    otherOptionIds.push(optionId);
+                }
+            });
+
+            const sortOptionIds = (a, b) => rankPeriod(a) - rankPeriod(b);
+            yearIds.sort(sortOptionIds);
+            otherOptionIds.sort(sortOptionIds);
+
+            // the following case corresponds to years selected only
+            if (otherOptionIds.length === 0) {
+                yearIds.forEach(yearId => {
+                    const d = filter.basicDomains[yearId];
+                    results.push(d[key]);
+                });
+            } else {
+                otherOptionIds.forEach(optionId => {
+                    yearIds.forEach(yearId => {
+                        const d = filter.basicDomains[`${yearId}__${optionId}`];
+                        results.push(d[key]);
+                    });
+                });
+            }
+            return results;
+        }
+
+        /**
+         * Construct a timeRange object from the given fieldName, rangeId, comparisonRangeId
+         * parameters.
+         * @private
+         * @param {string} fieldName
+         * @param {string} rangeId
+         * @param {string} comparisonRangeId
+         * @returns {Object}
+         */
+        _extractTimeRange({ fieldName, rangeId, comparisonRangeId }) {
+            const field = this.fields[fieldName];
+            const timeRange = {
+                fieldName,
+                fieldDescription: field.string || fieldName,
+                rangeId,
+                range: Domain.prototype.constructDomain(fieldName, rangeId, field.type),
+                rangeDescription: TIME_RANGE_OPTIONS[rangeId].description.toString(),
+            };
+            if (comparisonRangeId) {
+                timeRange.comparisonRangeId = comparisonRangeId;
+                timeRange.comparisonRange = Domain.prototype.constructDomain(
+                    fieldName, rangeId, field.type, comparisonRangeId
+                );
+                const { description } = COMPARISON_TIME_RANGE_OPTIONS[comparisonRangeId];
+                timeRange.comparisonRangeDescription = description.toString();
+            }
+            return timeRange;
+        }
+
+        /**
+         * Returns an object irFilter serving to create an ir_filte in db
+         * starting from a filter of type 'favorite'.
+         * @private
+         * @param {Object} favorite
+         * @returns {Object}
+         */
+        _favoriteToIrFilter(favorite) {
+            const irFilter = {
+                action_id: this.actionId,
+                model_id: this.modelName,
+            };
+
+            // ir.filter fields
+            if ('description' in favorite) {
+                irFilter.name = favorite.description;
+            }
+            if ('domain' in favorite) {
+                irFilter.domain = favorite.domain;
+            }
+            if ('isDefault' in favorite) {
+                irFilter.is_default = favorite.isDefault;
+            }
+            if ('orderedBy' in favorite) {
+                const sort = favorite.orderedBy.map(
+                    ob => ob.name + (ob.asc === false ? " desc" : "")
+                );
+                irFilter.sort = JSON.stringify(sort);
+            }
+            if ('serverSideId' in favorite) {
+                irFilter.id = favorite.serverSideId;
+            }
+            if ('userId' in favorite) {
+                irFilter.user_id = favorite.userId;
+            }
+
+            // Context
+            const context = Object.assign({}, favorite.context);
+            if ('groupBys' in favorite) {
+                context.group_by = favorite.groupBys;
+            }
+            if ('timeRanges' in favorite) {
+                const { fieldName, rangeId, comparisonRangeId } = favorite.timeRanges;
+                context.time_ranges = {
+                    field: fieldName,
+                    range: rangeId,
+                    comparisonRange: comparisonRangeId,
+                };
+            }
+            if (Object.keys(context).length) {
+                irFilter.context = context;
+            }
+
+            return irFilter;
+        }
+
+        /**
+         * Return the domain resulting from the combination of the auto-completion
+         * values of a filter of type 'field'.
+         * @private
+         * @param {Object} filter
+         * @param {Object[]} filterQueryElements
+         * @returns {string}
+         */
+        _getAutoCompletionFilterDomain(filter, filterQueryElements) {
+            const domains = filterQueryElements.map(({ label, value, operator }) => {
+                let domain;
+                if (filter.filterDomain) {
+                    domain = Domain.prototype.stringToArray(
+                        filter.filterDomain,
+                        {
+                            self: label,
+                            raw_value: value,
+                        }
+                    );
+                } else {
+                    // Create new domain
+                    domain = [[filter.fieldName, operator, value]];
+                }
+                return Domain.prototype.arrayToString(domain);
+            });
+            return pyUtils.assembleDomains(domains, 'OR');
+        }
+
+        /**
+         * Construct a single context from the contexts of
+         * filters of type 'filter', 'favorite', and 'field'.
+         * @private
+         * @returns {Object}
+         */
+        _getContext(groups, withActionContext = true) {
+            const types = ['filter', 'favorite', 'field'];
+            const contexts = groups.reduce(
+                (contexts, group) => {
+                    if (types.includes(group.type)) {
+                        contexts.push(...this._getGroupContexts(group));
+                    }
+                    return contexts;
+                },
+                []
+            );
+            if (withActionContext) {
+                contexts.unshift(this.actionContext);
+            }
+            const evaluationContext = this.env.session.user_context;
+            try {
+                return pyUtils.eval('contexts', contexts, evaluationContext);
+            } catch (err) {
+                throw new Error(
+                    this.env._t("Failed to evaluate search context") + ":\n" +
+                    JSON.stringify(err)
+                );
+            }
+        }
+
+        /**
+         * Construct an object containing domains based on this.referenceMoment and
+         * the field associated with the provided date filter.
+         * @private
+         * @param {Object} filter
+         * @returns {Object}
+         */
+        _getDateFilterBasicDomains({ fieldName, fieldType }) {
+            const _constructBasicDomain = (y, o) => {
+                const setParam = Object.assign({}, y.setParam, o ? o.setParam : {});
+                const granularity = o ? o.granularity : y.granularity;
+                const date = this.referenceMoment.clone().set(setParam);
+                let leftBound = date.clone().startOf(granularity).locale('en');
+                let rightBound = date.clone().endOf(granularity).locale('en');
+                if (fieldType === 'date') {
+                    leftBound = leftBound.format('YYYY-MM-DD');
+                    rightBound = rightBound.format('YYYY-MM-DD');
+                } else {
+                    leftBound = leftBound.utc().format('YYYY-MM-DD HH:mm:ss');
+                    rightBound = rightBound.utc().format('YYYY-MM-DD HH:mm:ss');
+                }
+                const domain = Domain.prototype.arrayToString([
+                    '&',
+                    [fieldName, '>=', leftBound],
+                    [fieldName, '<=', rightBound]
+                ]);
+                const description = o ? o.description + " " + y.description : y.description;
+                return { domain, description };
+            };
+
+            const domains = {};
+            this.optionGenerators.filter(y => y.groupNumber === 2).forEach(y => {
+                domains[y.id] = _constructBasicDomain(y);
+                this.optionGenerators.filter(y => y.groupNumber === 1).forEach(o => {
+                    domains[y.id + '__' + o.id] = _constructBasicDomain(y, o);
+                });
+            });
+            return domains;
+        }
+
+        /**
+         * Compute the string representation of the current domain associated to a date filter
+         * starting from its corresponding query elements.
+         * @private
+         * @param {Object} filter
+         * @param {Objec[]} filterQueryElements
+         * @returns {string}
+         */
+        _getDateFilterDomain(filter, filterQueryElements) {
+            const domains = this._extractInfoFromBasicDomains(filter, filterQueryElements, 'domain');
+            return pyUtils.assembleDomains(domains, 'OR');
+        }
+
+        /**
+         * Return the string or array representation of a domain created by combining
+         * appropriately (with an 'AND') the domains coming from the active groups
+         * of type 'filter', 'favorite', and 'field'.
+         * @private
+         * @param {Object[]} groups
+         * @param {boolean} [evaluation=true]
+         * @returns {string}
+         */
+        _getDomain(groups, evaluation = true) {
+            const types = ['filter', 'favorite', 'field'];
+            const domains = groups.reduce(
+                (domains, group) => {
+                    if (types.includes(group.type)) {
+                        domains.push(this._getGroupDomain(group));
+                    }
+                    return domains;
+                },
+                []
+            );
+            let filterDomain = pyUtils.assembleDomains(domains, 'AND');
+
+            if (evaluation) {
+                const userContext = this.env.session.user_context;
+                try {
+                    return pyUtils.eval('domains', [this.actionDomain, filterDomain], userContext);
+                } catch (err) {
+                    throw new Error(
+                        this.env._t("Failed to evaluate search domain") + ":\n" +
+                        JSON.stringify(err)
+                    );
+                }
+            } else {
+                return filterDomain;
+            }
+        }
+
+        /**
+        * Return the context of the provided (active) filter.
+        * @private
+        * @param {Object} filter
+        * @param {Object[]} filterQueryElements
+        * @returns {Object}
+        */
+        _getFilterContext(filter, filterQueryElements) {
+            let context = filter.context || {};
+            // for <field> nodes, a dynamic context (like context="{'field1': self}")
+            // should set {'field1': [value1, value2]} in the context
+            if (filter.type === 'field' && filter.context) {
+                context = pyUtils.eval('context',
+                    filter.context,
+                    { self: filterQueryElements.map(({ value }) => value) },
+                );
+            }
+            // the following code aims to remodel this:
+            // https://github.com/odoo/odoo/blob/12.0/addons/web/static/src/js/views/search/search_inputs.js#L498
+            // this is required for the helpdesk tour to pass
+            // this seems weird to only do that for m2o fields, but a test fails if
+            // we do it for other fields (my guess being that the test should simply
+            // be adapted)
+            if (filter.type === 'field' && filter.isDefault && filter.fieldType === 'many2one') {
+                context[`default_${filter.fieldName}`] = filter.defaultAutocompleteValue.value;
+            }
+            return context;
+        }
+
+        /**
+         * Return the domain of the provided filter.
+         * @private
+         * @param {Object} filter
+         * @param {Object[]} filterQueryElements
+         * @returns {string} domain, string representation of a domain
+         */
+        _getFilterDomain(filter, filterQueryElements) {
+            if (filter.type === 'filter' && filter.hasOptions) {
+                return this._getDateFilterDomain(filter, filterQueryElements);
+            } else if (filter.type === 'field') {
+                return this._getAutoCompletionFilterDomain(filter, filterQueryElements);
+            }
+            return filter.domain;
+        }
+
+        /**
+         * Return the groupBys of the provided filter.
+         * @private
+         * @param {Object} filter
+         * @param {Object[]} filterQueryElements
+         * @returns {string[]} groupBys
+         */
+        _getFilterGroupBys(filter, filterQueryElements) {
+            if (filter.type === 'groupBy') {
+                const fieldName = filter.fieldName;
+                if (filter.hasOptions) {
+                    return filterQueryElements.map(
+                        ({ optionId }) => `${fieldName}:${optionId}`
+                    );
+                } else {
+                    return [fieldName];
+                }
+            } else {
+                return filter.groupBys;
+            }
+        }
+
+        /**
+         * Return the concatenation of groupBys comming from the active filters of
+         * type 'favorite' and 'groupBy'.
+         * The result respects the appropriate logic: the groupBys
+         * coming from an active favorite (if any) come first, then come the
+         * groupBys comming from the active filters of type 'groupBy' in the order
+         * defined in this.state.query. If no groupBys are found, one tries to
+         * find some grouBys in the action context.
+         * @private
+         * @param {Object[]} groups
+         * @returns {string[]}
+         */
+        _getGroupBy(groups) {
+            const groupBys = groups.reduce(
+                (groupBys, group) => {
+                    if (['groupBy', 'favorite'].includes(group.type)) {
+                        groupBys.push(...this._getGroupGroupBys(group));
+                    }
+                    return groupBys;
+                },
+                []
+            );
+            const groupBy = groupBys.length ? groupBys : (this.actionContext.group_by || []);
+            return typeof groupBy === 'string' ? [groupBy] : groupBy;
+        }
+
+        /**
+         * Return the list of the contexts of the filters active in the given
+         * group.
+         * @private
+         * @param {Object} group
+         * @returns {Object[]}
+         */
+        _getGroupContexts(group) {
+            const contexts = group.activities.reduce(
+                (ctx, qe) => [...ctx, this._getFilterContext(qe.filter, qe.filterQueryElements)],
+                []
+            );
+            return contexts;
+        }
+
+        /**
+         * Return the string representation of a domain created by combining
+         * appropriately (with an 'OR') the domains coming from the filters
+         * active in the given group.
+         * @private
+         * @param {Object} group
+         * @returns {string} string representation of a domain
+         */
+        _getGroupDomain(group) {
+            const domains = group.activities.map(({ filter, filterQueryElements }) => {
+                return this._getFilterDomain(filter, filterQueryElements);
+            });
+            return pyUtils.assembleDomains(domains, 'OR');
+        }
+
+        /**
+         * Return the groupBys coming form the filters active in the given group.
+         * @private
+         * @param {Object} group
+         * @returns {string[]}
+         */
+        _getGroupGroupBys(group) {
+            const groupBys = group.activities.reduce(
+                (gb, qe) => [...gb, ...this._getFilterGroupBys(qe.filter, qe.filterQueryElements)],
+                []
+            );
+            return groupBys;
+        }
+
+        /**
+         * Reconstruct the (active) groups from the query elements.
+         * @private
+         * @returns {Objec[]}
+         */
+        _getGroups() {
+            const groups = this.state.query.reduce(
+                (groups, queryElem) => {
+                    const { groupId, filterId } = queryElem;
+                    let group = groups.find(group => group.id === groupId);
+                    const filter = this.state.filters[filterId];
+                    if (!group) {
+                        const { type } = filter;
+                        group = {
+                            id: groupId,
+                            type,
+                            activities: []
+                        };
+                        groups.push(group);
+                    }
+                    group.activities.push(queryElem);
+                    return groups;
+                },
+                []
+            );
+            groups.forEach(g => this._mergeActivities(g));
+            return groups;
+        }
+
+        /**
+         * Used to get the key orderedBy of the active favorite.
+         * @private
+         * @param {Object[]} groups
+         * @returns {string[]} orderedBy
+         */
+        _getOrderedBy(groups) {
+            return groups.reduce(
+                (orderedBy, group) => {
+                    if (group.type === 'favorite') {
+                        const favoriteOrderedBy = group.activities[0].filter.orderedBy;
+                        if (favoriteOrderedBy) {
+                            // Group order is reversed but inner order is kept
+                            orderedBy = [...favoriteOrderedBy, ...orderedBy];
+                        }
+                    }
+                    return orderedBy;
+                },
+                []
+            );
+        }
+
+        /**
+         * Returns the last timeRanges object found in the query.
+         * TimeRanges objects can be associated with filters of type 'favorite'
+         * or 'timeRange'.
+         * @private
+         * @param {boolean} [evaluation=false]
+         * @returns {(Object|undefined)}
+         */
+        _getTimeRanges(evaluation = false) {
+            let timeRanges;
+            for (const queryElem of this.state.query.slice().reverse()) {
+                const filter = this.state.filters[queryElem.filterId];
+                if (filter.type === 'timeRange') {
+                    timeRanges = this._extractTimeRange(queryElem);
+                    break;
+                } else if (filter.type === 'favorite' && filter.timeRanges) {
+                    // we want to make sure that last is not observed! (it is change below in case of evaluation)
+                    timeRanges = this._extractTimeRange(filter.timeRanges);
+                    break;
+                }
+            }
+            if (timeRanges) {
+                if (evaluation) {
+                    timeRanges.range = Domain.prototype.stringToArray(timeRanges.range);
+                    if (timeRanges.comparisonRangeId) {
+                        timeRanges.comparisonRange = Domain.prototype.stringToArray(
+                            timeRanges.comparisonRange
+                        );
+                    }
+                }
+                return timeRanges;
+            }
+        }
+
+        /**
+         * Returns a filter of type 'favorite' starting from an ir_filter comming from db.
+         * @private
+         * @param {Object} irFilter
+         * @returns {Object}
+         */
+        _irFilterToFavorite(irFilter) {
+            let userId = irFilter.user_id || false;
+            if (Array.isArray(userId)) {
+                userId = userId[0];
+            }
+            const groupNumber = userId ? FAVORITE_PRIVATE_GROUP : FAVORITE_SHARED_GROUP;
+            const context = pyUtils.eval('context', irFilter.context, this.env.session.user_context);
+            let groupBys = [];
+            if (context.group_by) {
+                groupBys = context.group_by;
+                delete context.group_by;
+            }
+            let timeRanges;
+            if (context.time_ranges) {
+                const { field, range, comparisonRange } = context.time_ranges;
+                timeRanges = this._extractTimeRange({
+                    fieldName: field,
+                    rangeId: range,
+                    comparisonRangeId: comparisonRange,
+                });
+                delete context.time_ranges;
+            }
+            let sort;
+            try {
+                sort = JSON.parse(irFilter.sort);
+            } catch (err) {
+                if (err instanceof SyntaxError) {
+                    sort = [];
+                } else {
+                    throw err;
+                }
+            }
+            const orderedBy = sort.map(order => {
+                let fieldName;
+                let asc;
+                const sqlNotation = order.split(' ');
+                if (sqlNotation.length > 1) {
+                    // regex: \fieldName (asc|desc)?\
+                    fieldName = sqlNotation[0];
+                    asc = sqlNotation[1] === 'asc';
+                } else {
+                    // legacy notation -- regex: \-?fieldName\
+                    fieldName = order[0] === '-' ? order.slice(1) : order;
+                    asc = order[0] === '-' ? false : true;
+                }
+                return {
+                    asc: asc,
+                    name: fieldName,
+                };
+            });
+            const favorite = {
+                context,
+                description: irFilter.name,
+                domain: irFilter.domain,
+                groupBys,
+                groupNumber,
+                orderedBy,
+                removable: true,
+                serverSideId: irFilter.id,
+                type: 'favorite',
+                userId,
+            };
+            if (irFilter.is_default) {
+                favorite.isDefault = irFilter.is_default;
+            }
+            if (timeRanges) {
+                favorite.timeRanges = timeRanges;
+            }
+            return favorite;
+        }
+
+        /**
+         * Group the query elements in group.activities by qe -> qe.filterId
+         * and changes the form of group.activities to make it more suitable for further
+         * computations.
+         * @param {Object} group
+         */
+        _mergeActivities(group) {
+            const { activities, type } = group;
+            let res = [];
+            switch (type) {
+                case 'filter':
+                case 'groupBy':
+                    for (const activity of activities) {
+                        const { filterId } = activity;
+                        let a = res.find(({ filter }) => filter.id === filterId);
+                        if (!a) {
+                            a = {
+                                filter: this.state.filters[filterId],
+                                filterQueryElements: []
+                            };
+                            res.push(a);
+                        }
+                        a.filterQueryElements.push(activity);
+                    }
+                    break;
+                case 'favorite':
+                case 'field':
+                case 'timeRange':
+                    // all activities in the group have same filterId
+                    const { filterId } = group.activities[0];
+                    const filter = this.state.filters[filterId];
+                    res.push({
+                        filter,
+                        filterQueryElements: group.activities
+                    });
+                    break;
+            }
+            if (type === 'groupBy') {
+                res.forEach(activity => {
+                    activity.filterQueryElements.sort(
+                        (qe1, qe2) => rankInterval(qe1.optionId) - rankInterval(qe2.optionId)
+                    );
+                });
+            }
+            group.activities = res;
+        }
+
+        /**
+         * Set the key label in defaultAutocompleteValue used by default filters of
+         * type 'field'.
+         * @private
+         * @param {Object} filter
+         */
+        _prepareDefaultLabel(filter) {
+            const { id, fieldType, fieldName, defaultAutocompleteValue } = filter;
+            const { selection, context, relation } = this.fields[fieldName];
+            if (fieldType === 'selection') {
+                defaultAutocompleteValue.label = selection.find(
+                    sel => sel[0] === defaultAutocompleteValue.value
+                )[1];
+            } else if (fieldType === 'many2one') {
+                const updateLabel = label => {
+                    const queryElem = this.state.query.find(({ filterId }) => filterId === id);
+                    queryElem.label = label;
+                    defaultAutocompleteValue.label = label;
+                };
+                const promise = this.env.services.rpc({
+                    args: [defaultAutocompleteValue.value],
+                    context: context,
+                    method: 'name_get',
+                    model: relation,
+                })
+                    .then(results => updateLabel(results[0][1]))
+                    .guardedCatch(() => updateLabel(defaultAutocompleteValue.value));
+                this.labelPromises.push(promise);
+            } else {
+                defaultAutocompleteValue.label = defaultAutocompleteValue.value;
+            }
+        }
+
+        /**
+         * @private
+         */
+        _prepareInitialState() {
+            this._addFilters();
+            this._activateDefaultFilters();
+        }
+
+        /**
+         * Compute the search Query and save it as an ir_filter in db.
+         * No evaluation of domains is done in order to keep them dynamic.
+         * If the operation is successful, a new filter of type 'favorite' is
+         * created and activated.
+         * @private
+         * @param {Object} preFilter
+         * @returns {Promise<Object>}
+         */
+        async _saveQuery(preFilter) {
+            const groups = this._getGroups();
+
+            const userContext = this.env.session.user_context;
+            let controllerQueryParams;
+            this.trigger(
+                'get-controller-query-params',
+                p => {
+                    controllerQueryParams = p;
+                }
+            );
+            controllerQueryParams = controllerQueryParams || {};
+            controllerQueryParams.context = controllerQueryParams.context || {};
+
+            const withoutActiveContext = false;
+            const queryContext = this._getContext(groups, withoutActiveContext);
+            const context = pyUtils.eval(
+                'contexts',
+                [userContext, controllerQueryParams.context, queryContext]
+            );
+            for (const key in userContext) {
+                delete context[key];
+            }
+
+            const requireEvaluation = false;
+            const domain = this._getDomain(groups, requireEvaluation);
+            const groupBys = this._getGroupBy(groups);
+            const timeRanges = this._getTimeRanges(requireEvaluation);
+            const orderedBy = controllerQueryParams.orderedBy ?
+                controllerQueryParams.orderedBy :
+                (this._getOrderedBy(groups) || []);
+
+            const userId = preFilter.isShared ? false : this.env.session.uid;
+            delete preFilter.isShared;
+
+            Object.assign(preFilter, {
+                context,
+                domain,
+                groupBys,
+                groupNumber: userId ? FAVORITE_PRIVATE_GROUP : FAVORITE_SHARED_GROUP,
+                orderedBy,
+                removable: true,
+                userId,
+            });
+            if (timeRanges) {
+                preFilter.timeRanges = timeRanges;
+            }
+            const irFilter = this._favoriteToIrFilter(preFilter);
+            const serverSideId = await this.env.dataManager.create_filter(irFilter);
+
+            preFilter.serverSideId = serverSideId;
+
+            return preFilter;
+        }
+
+        /**
+         * Get the filter description to use in the search bar as a facet.
+         * @private
+         * @param {Object} activity
+         * @param {Object} activity.filter
+         * @param {Object[]} activity.filterQueryElements
+         * @returns {string}
+         */
+        _getFacetDescriptions(activities, type) {
+            const facetDescriptions = [];
+            if (type === 'field') {
+                for (const queryElem of activities[0].filterQueryElements) {
+                    facetDescriptions.push(queryElem.label);
+                }
+            } else if (type === 'groupBy') {
+                for (const { filter, filterQueryElements } of activities) {
+                    if (filter.hasOptions) {
+                        for (const queryElem of filterQueryElements) {
+                            const option = this.intervalOptions.find(
+                                o => o.id === queryElem.optionId
+                            );
+                            facetDescriptions.push(filter.description + ': ' + option.description);
+                        }
+                    } else {
+                        facetDescriptions.push(filter.description);
+                    }
+                }
+            } else {
+                let facetDescription;
+                for (const { filter, filterQueryElements } of activities) {
+                    if (type === 'timeRange') {
+                        const tr = this._extractTimeRange(filterQueryElements[0]);
+                        facetDescription = `${tr.fieldDescription}: ${tr.rangeDescription}`;
+                        if (tr.comparisonRangeDescription) {
+                            facetDescription += ` / ${tr.comparisonRangeDescription}`;
+                        }
+                    } else { // filter and favorite
+                        facetDescription = filter.description;
+                        if (filter.hasOptions) {
+                            const descriptions = this._extractInfoFromBasicDomains(
+                                filter, filterQueryElements, 'description'
+                            );
+                            facetDescription += `: ${descriptions.join(" / ")}`;
+                        }
+                    }
+                    facetDescriptions.push(facetDescription);
+                }
+            }
+            return facetDescriptions;
+        }
+
+        /**
+         * Using the constructor parameter object config, set most of the properties
+         * of the control panel model.
+         * @private
+         * @param {Object} config
+         */
+        _setProperties(config) {
+            this.state = {
+                filters: {},
+                query: [],
+            };
+            this.env = config.env;
+            this.modelName = config.modelName;
+            this.actionDomain = config.actionDomain || [];
+            this.actionContext = config.actionContext || {};
+            this.actionId = config.actionId;
+            this.withSearchBar = 'withSearchBar' in config ? config.withSearchBar : true;
+            this.searchMenuTypes = config.searchMenuTypes || [];
+
+            this.searchDefaults = [];
+            for (const key in this.actionContext) {
+                const match = /^search_default_(.*)$/.exec(key);
+                if (match) {
+                    this.searchDefaults[match[1]] = this.actionContext[key];
+                    delete this.actionContext[key];
+                }
+            }
+            this.labelPromises = [];
+
+            const viewInfo = config.viewInfo || {};
+
+            this.parsedArch = parseArch(viewInfo.arch || '<search/>');
+            this.fields = viewInfo.fields || {};
+            this.favoriteFilters = viewInfo.favoriteFilters || [];
+            this.activateDefaultFavorite = 'search_disable_custom_filters' in this.actionContext ?
+                !this.actionContext.search_disable_custom_filters :
+                true;
+
+            this.dynamicFilters = config.dynamicFilters || [];
+
+            this.referenceMoment = moment();
+            const setDescriptions = options => {
+                return Object.values(options).map(o => {
+                    const oClone = JSON.parse(JSON.stringify(o));
+                    const description = o.description ?
+                        o.description.toString() :
+                        this.referenceMoment.clone().add(o.addParam).format(o.format);
+                    return Object.assign(oClone, { description });
+                });
+            };
+            const process = (options) => {
+                return options.map(o => {
+                    const date = this.referenceMoment.clone().set(o.setParam).add(o.addParam);
+                    delete o.addParam;
+                    o.setParam[o.granularity] = date[o.granularity]();
+                    o.defaultYear = date.year();
+                    return o;
+                });
+            };
+            this.optionGenerators = process(setDescriptions(OPTION_GENERATORS));
+            this.intervalOptions = setDescriptions(INTERVAL_OPTIONS);
+        }
+    }
+
+    return ControlPanelModel;
+});
diff --git a/addons/web/static/src/js/control_panel/control_panel_x2many.js b/addons/web/static/src/js/control_panel/control_panel_x2many.js
new file mode 100644
index 00000000000..22b4ae565da
--- /dev/null
+++ b/addons/web/static/src/js/control_panel/control_panel_x2many.js
@@ -0,0 +1,40 @@
+odoo.define('web.ControlPanelX2Many', function (require) {
+
+    const ControlPanel = require('web.ControlPanel');
+
+    /**
+     * Control panel (adaptation for x2many fields)
+     *
+     * Smaller version of the control panel with an abridged template (buttons and
+     * pager only). We still extend the main version for the injection of `cp_content`
+     * keys.
+     * The pager of this control panel is only displayed if the amount of records
+     * cannot be displayed in a single page.
+     * @extends ControlPanel
+     */
+    class ControlPanelX2Many extends ControlPanel {
+
+        /**
+         * @private
+         * @returns {boolean}
+         */
+        _shouldShowPager() {
+            if (!this.props.pager || !this.props.pager.limit) {
+                return false;
+            }
+            const { currentMinimum, limit, size } = this.props.pager;
+            const maximum = Math.min(currentMinimum + limit - 1, size);
+            const singlePage = (1 === currentMinimum) && (maximum === size);
+            return !singlePage;
+        }
+    }
+
+    ControlPanelX2Many.defaultProps = {};
+    ControlPanelX2Many.props = {
+        cp_content: { type: Object, optional: 1 },
+        pager: Object,
+    };
+    ControlPanelX2Many.template = 'web.ControlPanelX2Many';
+
+    return ControlPanelX2Many;
+});
diff --git a/addons/web/static/src/js/control_panel/custom_favorite_item.js b/addons/web/static/src/js/control_panel/custom_favorite_item.js
new file mode 100644
index 00000000000..f8493d73c69
--- /dev/null
+++ b/addons/web/static/src/js/control_panel/custom_favorite_item.js
@@ -0,0 +1,153 @@
+odoo.define('web.CustomFavoriteItem', function (require) {
+    "use strict";
+
+    const DropdownMenuItem = require('web.DropdownMenuItem');
+    const FavoriteMenu = require('web.FavoriteMenu');
+    const { useAutofocus } = require('web.custom_hooks');
+    const { useModel } = require('web.model');
+
+    const { useRef } = owl.hooks;
+
+    let favoriteId = 0;
+
+    /**
+     * Favorite generator menu
+     *
+     * This component is used to add a new favorite linked which will take every
+     * information out of the current context and save it to a new `ir.filter`.
+     *
+     * There are 3 additional inputs to modify the filter:
+     * - a text input (mandatory): the name of the favorite (must be unique)
+     * - 'use by default' checkbox: if checked, the favorite will be the default
+     *                              filter of the current model (and will bypass
+     *                              any existing default filter). Cannot be checked
+     *                              along with 'share with all users' checkbox.
+     * - 'share with all users' checkbox: if checked, the favorite will be available
+     *                                    with all users instead of the current
+     *                                    one.Cannot be checked along with 'use
+     *                                    by default' checkbox.
+     * Finally, there is a 'Save' button used to apply the current configuration
+     * and save the context to a new filter.
+     * @extends DropdownMenuItem
+     */
+    class CustomFavoriteItem extends DropdownMenuItem {
+        constructor() {
+            super(...arguments);
+
+            const favId = favoriteId++;
+            this.useByDefaultId = `o_favorite_use_by_default_${favId}`;
+            this.shareAllUsersId = `o_favorite_share_all_users_${favId}`;
+
+            this.descriptionRef = useRef('description');
+            this.model = useModel('controlPanelModel');
+            this.interactive = true;
+            Object.assign(this.state, {
+                description: this.env.action.name || "",
+                isDefault: false,
+                isShared: false,
+            });
+
+            useAutofocus();
+        }
+
+        //---------------------------------------------------------------------
+        // Private
+        //---------------------------------------------------------------------
+
+        /**
+         * @private
+         */
+        _saveFavorite() {
+            if (!this.state.description.length) {
+                this.env.services.notification.notify({
+                    title: this.env._t("Error"),
+                    message: this.env._t("A name for your favorite filter is required."),
+                    type: 'danger',
+                });
+                return this.descriptionRef.el.focus();
+            }
+            const favorites = this.model.getFiltersOfType('favorite');
+            if (favorites.some(f => f.description === this.state.description)) {
+                this.env.services.notification.notify({
+                    title: this.env._t("Error"),
+                    message: this.env._t("Filter with same name already exists."),
+                    type: 'danger',
+                });
+                return this.descriptionRef.el.focus();
+            }
+            this.model.dispatch('createNewFavorite', {
+                type: 'favorite',
+                description: this.state.description,
+                isDefault: this.state.isDefault,
+                isShared: this.state.isShared,
+            });
+            // Reset state
+            Object.assign(this.state, {
+                description: this.env.action.name || "",
+                isDefault: false,
+                isShared: false,
+                open: false,
+            });
+        }
+
+        //---------------------------------------------------------------------
+        // Handlers
+        //---------------------------------------------------------------------
+
+        /**
+         * @private
+         * @param {Event} ev change Event
+         */
+        _onCheckboxChange(ev) {
+            const { checked, id } = ev.target;
+            if (this.useByDefaultId === id) {
+                this.state.isDefault = checked;
+                if (checked) {
+                    this.state.isShared = false;
+                }
+            } else {
+                this.state.isShared = checked;
+                if (checked) {
+                    this.state.isDefault = false;
+                }
+            }
+        }
+
+        /**
+         * @private
+         * @param {jQueryEvent} ev
+         */
+        _onInputKeydown(ev) {
+            switch (ev.key) {
+                case 'Enter':
+                    ev.preventDefault();
+                    this._saveFavorite();
+                    break;
+                case 'Escape':
+                    // Gives the focus back to the component.
+                    ev.preventDefault();
+                    ev.target.blur();
+                    break;
+            }
+        }
+
+        //---------------------------------------------------------------------
+        // Static
+        //---------------------------------------------------------------------
+
+        /**
+         * @param {Object} env
+         * @returns {boolean}
+         */
+        static shouldBeDisplayed(env) {
+            return true;
+        }
+    }
+
+    CustomFavoriteItem.props = {};
+    CustomFavoriteItem.template = 'web.CustomFavoriteItem';
+
+    FavoriteMenu.registry.add('favorite-generator-menu', CustomFavoriteItem, 0);
+
+    return CustomFavoriteItem;
+});
diff --git a/addons/web/static/src/js/control_panel/custom_filter_item.js b/addons/web/static/src/js/control_panel/custom_filter_item.js
new file mode 100644
index 00000000000..40265e95fe2
--- /dev/null
+++ b/addons/web/static/src/js/control_panel/custom_filter_item.js
@@ -0,0 +1,258 @@
+odoo.define('web.CustomFilterItem', function (require) {
+    "use strict";
+
+    const { DatePicker, DateTimePicker } = require('web.DatePickerOwl');
+    const Domain = require('web.Domain');
+    const DropdownMenuItem = require('web.DropdownMenuItem');
+    const { FIELD_OPERATORS, FIELD_TYPES } = require('web.searchUtils');
+    const field_utils = require('web.field_utils');
+    const { useModel } = require('web.model');
+
+    /**
+     * Filter generator menu
+     *
+     * Component which purpose is to generate new filters from a set of inputs.
+     * It is made of one or several `condition` objects that will be used to generate
+     * filters which will be added in the filter menu. Each condition is composed
+     * of 2, 3 or 4 inputs:
+     *
+     * 1. FIELD (select): the field used to form the base of the domain condition;
+     *
+     * 2. OPERATOR (select): the symbol determining the operator(s) of the domain
+     *                       condition, linking the field to one or several value(s).
+     *                       Some operators can have pre-defined values that will replace user inputs.
+     *                       @see searchUtils for the list of operators.
+     *
+     * 3. [VALUE] (input|select): the value of the domain condition. it will be parsed
+     *                            according to the selected field's type. Note that
+     *                            it is optional as some operators have defined values.
+     *                            The generated condition domain will be as following:
+     *                            [
+     *                                [field, operator, (operator_value|input_value)]
+     *                            ]
+     *
+     * 4. [VALUE] (input): for now, only date-typed fields with the 'between' operator
+     *                     allow for a second value. The given input values will then
+     *                     be taken as the borders of the date range (between x and y)
+     *                     and will be translated as the following domain form:
+     *                     [
+     *                         [date_field, '>=', x],
+     *                         [date_field, '<=', y],
+     *                     ]
+     * @extends DropdownMenuItem
+     */
+    class CustomFilterItem extends DropdownMenuItem {
+        constructor() {
+            super(...arguments);
+
+            this.model = useModel('controlPanelModel');
+
+            this.canBeOpened = true;
+            this.state.conditions = [];
+            // Format, filter and sort the fields props
+            this.fields = Object.values(this.props.fields)
+                .filter(field => this._validateField(field))
+                .concat({ string: 'ID', type: 'id', name: 'id' })
+                .sort(({ string: a }, { string: b }) => a > b ? 1 : a < b ? -1 : 0);
+
+            // Give access to constants variables to the template.
+            this.DECIMAL_POINT = this.env._t.database.parameters.decimal_point;
+            this.OPERATORS = FIELD_OPERATORS;
+            this.FIELD_TYPES = FIELD_TYPES;
+
+            // Add default empty condition
+            this._addDefaultCondition();
+        }
+
+        //---------------------------------------------------------------------
+        // Private
+        //---------------------------------------------------------------------
+
+        /**
+         * Populate the conditions list with a default condition having as properties:
+         * - the first available field
+         * - the first available operator
+         * - a null or empty array value
+         * @private
+         */
+        _addDefaultCondition() {
+            const condition = {
+                field: 0,
+                operator: 0,
+            };
+            this._setDefaultValue(condition);
+            this.state.conditions.push(condition);
+        }
+
+        /**
+         * @private
+         * @param {Object} field
+         * @returns {boolean}
+         */
+        _validateField(field) {
+            return !field.deprecated &&
+                field.searchable &&
+                FIELD_TYPES[field.type] &&
+                field.name !== 'id';
+        }
+
+        /**
+         * @private
+         * @param {Object} condition
+         */
+        _setDefaultValue(condition) {
+            const fieldType = this.fields[condition.field].type;
+            const genericType = FIELD_TYPES[fieldType];
+            const operator = FIELD_OPERATORS[genericType][condition.operator];
+            switch (genericType) {
+                case 'id':
+                case 'number':
+                    condition.value = 0;
+                    break;
+                case 'date':
+                    condition.value = [moment()];
+                    if (operator.symbol === 'between') {
+                        condition.value.push(moment());
+                    }
+                    break;
+                case 'datetime':
+                    condition.value = [moment('00:00:00', 'hh:mm:ss')];
+                    if (operator.symbol === 'between') {
+                        condition.value.push(moment('23:59:59', 'hh:mm:ss'));
+                    }
+                    break;
+                default:
+                    condition.value = "";
+            }
+        }
+
+        //---------------------------------------------------------------------
+        // Handlers
+        //---------------------------------------------------------------------
+
+        /**
+         * Convert all conditions to prefilters.
+         * @private
+         */
+        _onApply() {
+            const preFilters = this.state.conditions.map(condition => {
+                const field = this.fields[condition.field];
+                const type = this.FIELD_TYPES[field.type];
+                const operator = this.OPERATORS[type][condition.operator];
+                const descriptionArray = [field.string, operator.description];
+                const domainArray = [];
+                let domainValue;
+                // Field type specifics
+                if ('value' in operator) {
+                    domainValue = [operator.value];
+                    // No description to push here
+                } else if (['date', 'datetime'].includes(type)) {
+                    domainValue = condition.value.map(
+                        val => field_utils.parse[type](val, { type }, { timezone: true })
+                    );
+                    const dateValue = condition.value.map(
+                        val => field_utils.format[type](val, { type }, { timezone: false })
+                    );
+                    descriptionArray.push(`"${dateValue.join(" " + this.env._t("and") + " ")}"`);
+                } else {
+                    domainValue = [condition.value];
+                    descriptionArray.push(`"${condition.value}"`);
+                }
+                // Operator specifics
+                if (operator.symbol === 'between') {
+                    domainArray.push(
+                        [field.name, '>=', domainValue[0]],
+                        [field.name, '<=', domainValue[1]]
+                    );
+                } else {
+                    domainArray.push([field.name, operator.symbol, domainValue[0]]);
+                }
+                const preFilter = {
+                    description: descriptionArray.join(" "),
+                    domain: Domain.prototype.arrayToString(domainArray),
+                    type: 'filter',
+                };
+                return preFilter;
+            });
+
+            this.model.dispatch('createNewFilters', preFilters);
+
+            // Reset state
+            this.state.open = false;
+            this.state.conditions = [];
+            this._addDefaultCondition();
+        }
+
+        /**
+         * @private
+         * @param {Object} condition
+         * @param {number} valueIndex
+         * @param {OwlEvent} ev
+         */
+        _onDateChanged(condition, valueIndex, ev) {
+            condition.value[valueIndex] = ev.detail.date;
+        }
+
+        /**
+         * @private
+         * @param {Object} condition
+         * @param {Event} ev
+         */
+        _onFieldSelect(condition, ev) {
+            Object.assign(condition, {
+                field: ev.target.selectedIndex,
+                operator: 0,
+            });
+            this._setDefaultValue(condition);
+        }
+
+        /**
+         * @private
+         * @param {Object} condition
+         * @param {Event} ev
+         */
+        _onOperatorSelect(condition, ev) {
+            condition.operator = ev.target.selectedIndex;
+            this._setDefaultValue(condition);
+        }
+
+        /**
+         * @private
+         * @param {Object} condition
+         */
+        _onRemoveCondition(conditionIndex) {
+            this.state.conditions.splice(conditionIndex, 1);
+        }
+
+        /**
+         * @private
+         * @param {Object} condition
+         * @param {Event} ev
+         */
+        _onValueInput(condition, ev) {
+            const type = this.fields[condition.field].type;
+            if (['float', 'integer', 'id'].includes(type)) {
+                const previousValue = condition.value;
+                const parser = field_utils.parse[type === 'float' ? 'float' : 'integer'];
+                try {
+                    const parsed = parser(ev.target.value || 0);
+                    // Force parsed value in the input.
+                    ev.target.value = condition.value = (parsed || 0);
+                } catch (err) {
+                    // Force previous value if non-parseable.
+                    ev.target.value = previousValue || 0;
+                }
+            } else {
+                condition.value = ev.target.value || "";
+            }
+        }
+    }
+
+    CustomFilterItem.components = { DatePicker, DateTimePicker };
+    CustomFilterItem.props = {
+        fields: Object,
+    };
+    CustomFilterItem.template = 'web.CustomFilterItem';
+
+    return CustomFilterItem;
+});
diff --git a/addons/web/static/src/js/control_panel/custom_group_by_item.js b/addons/web/static/src/js/control_panel/custom_group_by_item.js
new file mode 100644
index 00000000000..8082608d3ff
--- /dev/null
+++ b/addons/web/static/src/js/control_panel/custom_group_by_item.js
@@ -0,0 +1,46 @@
+odoo.define('web.CustomGroupByItem', function (require) {
+    "use strict";
+
+    const DropdownMenuItem = require('web.DropdownMenuItem');
+    const { useModel } = require('web.model');
+
+    /**
+     * Group by generator menu
+     *
+     * Component used to generate new filters of type 'groupBy'. It is composed
+     * of a button (used to toggle the rendering of the rest of the component) and
+     * an input (select) used to choose a new field name which will be used as a
+     * new groupBy value.
+     * @extends DropdownMenuItem
+     */
+    class CustomGroupByItem extends DropdownMenuItem {
+        constructor() {
+            super(...arguments);
+
+            this.canBeOpened = true;
+            this.state.fieldName = this.props.fields[0].name;
+
+            this.model = useModel('controlPanelModel');
+        }
+
+        //---------------------------------------------------------------------
+        // Handlers
+        //---------------------------------------------------------------------
+
+        /**
+         * @private
+         */
+        _onApply() {
+            const field = this.props.fields.find(f => f.name === this.state.fieldName);
+            this.model.dispatch('createNewGroupBy', field);
+            this.state.open = false;
+        }
+    }
+
+    CustomGroupByItem.template = 'web.CustomGroupByItem';
+    CustomGroupByItem.props = {
+        fields: Array,
+    };
+
+    return CustomGroupByItem;
+});
diff --git a/addons/web/static/src/js/control_panel/favorite_menu.js b/addons/web/static/src/js/control_panel/favorite_menu.js
new file mode 100644
index 00000000000..8ebf910da08
--- /dev/null
+++ b/addons/web/static/src/js/control_panel/favorite_menu.js
@@ -0,0 +1,101 @@
+odoo.define('web.FavoriteMenu', function (require) {
+    "use strict";
+
+    const Dialog = require('web.OwlDialog');
+    const DropdownMenu = require('web.DropdownMenu');
+    const Registry = require('web.Registry');
+    const { useModel } = require('web.model');
+
+    /**
+     * 'Favorites' menu
+     *
+     * Simple rendering of the filters of type `favorites` given by the control panel
+     * model. It uses most of the behaviours implemented by the dropdown menu Component,
+     * with the addition of a submenu registry used to display additional components.
+     * Only the favorite generator (@see CustomFavoriteItem) is registered in
+     * the `web` module.
+     * @see DropdownMenu for additional details.
+     * @extends DropdownMenu
+     */
+    class FavoriteMenu extends DropdownMenu {
+        constructor() {
+            super(...arguments);
+
+            this.model = useModel('controlPanelModel');
+            this.state.deletedFavorite = false;
+        }
+
+        //---------------------------------------------------------------------
+        // Getters
+        //---------------------------------------------------------------------
+
+        /**
+         * @override
+         */
+        get items() {
+            const favorites = this.model.getFiltersOfType('favorite');
+            const registryMenus = this.constructor.registry.values().reduce(
+                (menus, Component) => {
+                    if (Component.shouldBeDisplayed(this.env)) {
+                        menus.push({
+                            key: Component.name,
+                            Component,
+                        });
+                    }
+                    return menus;
+                },
+                []
+            );
+            return [...favorites, ...registryMenus];
+        }
+
+        /**
+         * @override
+         */
+        get title() {
+            return this.env._t("Favorites");
+        }
+
+        //---------------------------------------------------------------------
+        // Handlers
+        //---------------------------------------------------------------------
+
+        /**
+         * @private
+         * @param {OwlEvent} ev
+         */
+        _onItemRemoved(ev) {
+            const favorite = this.items.find(fav => fav.id === ev.detail.item.id);
+            this.state.deletedFavorite = favorite;
+        }
+
+        /**
+         * @private
+         * @param {OwlEvent} ev
+         */
+        _onItemSelected(ev) {
+            ev.stopPropagation();
+            this.model.dispatch('toggleFilter', ev.detail.item.id);
+        }
+
+        /**
+         * @private
+         */
+        async _onRemoveFavorite() {
+            await this.model.dispatch('deleteFavorite', this.state.deletedFavorite.id);
+            this.state.deletedFavorite = false;
+        }
+    }
+
+    FavoriteMenu.registry = new Registry();
+
+    FavoriteMenu.components = Object.assign({}, DropdownMenu.components, {
+        Dialog,
+    });
+    FavoriteMenu.defaultProps = Object.assign({}, DropdownMenu.defaultProps, {
+        icon: 'fa fa-star',
+    });
+    FavoriteMenu.template = 'web.FavoriteMenu';
+
+    return FavoriteMenu;
+});
diff --git a/addons/web/static/src/js/control_panel/filter_menu.js b/addons/web/static/src/js/control_panel/filter_menu.js
new file mode 100644
index 00000000000..47f01d22681
--- /dev/null
+++ b/addons/web/static/src/js/control_panel/filter_menu.js
@@ -0,0 +1,74 @@
+odoo.define('web.FilterMenu', function (require) {
+    "use strict";
+
+    const DropdownMenu = require('web.DropdownMenu');
+    const CustomFilterItem = require('web.CustomFilterItem');
+    const { useModel } = require('web.model');
+
+    /**
+     * 'Filters' menu
+     *
+     * Simple rendering of the filters of type `filter` given by the control panel
+     * model. It uses most of the behaviours implemented by the dropdown menu Component,
+     * with the addition of a filter generator (@see CustomFilterItem).
+     * @see DropdownMenu for additional details.
+     * @extends DropdownMenu
+     */
+    class FilterMenu extends DropdownMenu {
+
+        constructor() {
+            super(...arguments);
+
+            this.model = useModel('controlPanelModel');
+        }
+
+        //---------------------------------------------------------------------
+        // Getters
+        //---------------------------------------------------------------------
+
+        /**
+         * @override
+         */
+        get items() {
+            return this.model.getFiltersOfType('filter');
+        }
+
+        /**
+         * @override
+         */
+        get title() {
+            return this.env._t("Filters");
+        }
+
+        //---------------------------------------------------------------------
+        // Handlers
+        //---------------------------------------------------------------------
+
+        /**
+         * @private
+         * @param {OwlEvent} ev
+         */
+        _onItemSelected(ev) {
+            ev.stopPropagation();
+            const { item, option } = ev.detail;
+            if (option) {
+                this.model.dispatch('toggleFilterWithOptions', item.id, option.id);
+            } else {
+                this.model.dispatch('toggleFilter', item.id);
+            }
+        }
+    }
+
+    FilterMenu.components = Object.assign({}, DropdownMenu.components, {
+        CustomFilterItem,
+    });
+    FilterMenu.defaultProps = Object.assign({}, DropdownMenu.defaultProps, {
+        icon: 'fa fa-filter',
+    });
+    FilterMenu.props = Object.assign({}, DropdownMenu.props, {
+        fields: Object,
+    });
+    FilterMenu.template = 'web.FilterMenu';
+
+    return FilterMenu;
+});
diff --git a/addons/web/static/src/js/control_panel/groupby_menu.js b/addons/web/static/src/js/control_panel/groupby_menu.js
new file mode 100644
index 00000000000..858f2a7953e
--- /dev/null
+++ b/addons/web/static/src/js/control_panel/groupby_menu.js
@@ -0,0 +1,94 @@
+odoo.define('web.GroupByMenu', function (require) {
+    "use strict";
+
+    const { GROUPABLE_TYPES } = require('web.searchUtils');
+    const DropdownMenu = require('web.DropdownMenu');
+    const CustomGroupByItem = require('web.CustomGroupByItem');
+    const { useModel } = require('web.model');
+
+    /**
+     * 'Group by' menu
+     *
+     * Simple rendering of the filters of type `groupBy` given by the control panel
+     * model. It uses most of the behaviours implemented by the dropdown menu Component,
+     * with the addition of a groupBy filter generator (@see CustomGroupByItem).
+     * @see DropdownMenu for additional details.
+     * @extends DropdownMenu
+     */
+    class GroupByMenu extends DropdownMenu {
+
+        constructor() {
+            super(...arguments);
+
+            this.fields = Object.values(this.props.fields)
+                .filter(field => this._validateField(field))
+                .sort(({ string: a }, { string: b }) => a > b ? 1 : a < b ? -1 : 0);
+
+            this.model = useModel('controlPanelModel');
+        }
+
+        //---------------------------------------------------------------------
+        // Getters
+        //---------------------------------------------------------------------
+
+        /**
+         * @override
+         */
+        get items() {
+            return this.model.getFiltersOfType('groupBy');
+        }
+
+        /**
+         * @override
+         */
+        get title() {
+            return this.env._t("Group By");
+        }
+
+        //---------------------------------------------------------------------
+        // Private
+        //---------------------------------------------------------------------
+
+        /**
+         * @private
+         * @param {Object} field
+         * @returns {boolean}
+         */
+        _validateField(field) {
+            return field.sortable &&
+                field.name !== "id" &&
+                GROUPABLE_TYPES.includes(field.type);
+        }
+
+        //---------------------------------------------------------------------
+        // Handlers
+        //---------------------------------------------------------------------
+
+        /**
+         * @private
+         * @param {OwlEvent} ev
+         */
+        _onItemSelected(ev) {
+            ev.stopPropagation();
+            const { item, option } = ev.detail;
+            if (option) {
+                this.model.dispatch('toggleFilterWithOptions', item.id, option.id);
+            } else {
+                this.model.dispatch('toggleFilter', item.id);
+            }
+        }
+    }
+
+    GroupByMenu.components = Object.assign({}, DropdownMenu.components, {
+        CustomGroupByItem,
+    });
+    GroupByMenu.defaultProps = Object.assign({}, DropdownMenu.defaultProps, {
+        icon: 'fa fa-bars',
+    });
+    GroupByMenu.props = Object.assign({}, DropdownMenu.props, {
+        fields: Object,
+    });
+    GroupByMenu.template = 'web.GroupByMenu';
+
+    return GroupByMenu;
+});
diff --git a/addons/web/static/src/js/control_panel/search_bar.js b/addons/web/static/src/js/control_panel/search_bar.js
new file mode 100644
index 00000000000..45ad67e2fb7
--- /dev/null
+++ b/addons/web/static/src/js/control_panel/search_bar.js
@@ -0,0 +1,480 @@
+odoo.define('web.SearchBar', function (require) {
+    "use strict";
+
+    const Domain = require('web.Domain');
+    const field_utils = require('web.field_utils');
+    const { useAutofocus } = require('web.custom_hooks');
+    const { useModel } = require('web.model');
+
+    const CHAR_FIELDS = ['char', 'html', 'many2many', 'many2one', 'one2many', 'text'];
+    const { Component, hooks } = owl;
+    const { useExternalListener, useRef, useState } = hooks;
+
+    let sourceId = 0;
+
+    /**
+     * Search bar
+     *
+     * This component has two main roles:
+     * 1) Display the current search facets
+     * 2) Create new search filters using an input and an autocompletion values
+     *    generator.
+     *
+     * For the first bit, the core logic can be found in the XML template of this
+     * component, searchfacet components or in the ControlPanelModel itself.
+     *
+     * The autocompletion mechanic works with transient subobjects called 'sources'.
+     * Sources contain the information that will be used to generate new search facets.
+     * A source is generated either:
+     * a. From an undetermined user input: the user will give a string and select
+     *    a field from the autocompletion dropdown > this will search the selected
+     *    field records with the given pattern (with an 'ilike' operator);
+     * b. From a given selection: when given an input by the user, the searchbar
+     *    will pre-fetch 'many2one' field records matching the input value and filter
+     *    'select' fields with the same value. If the user clicks on one of these
+     *    fetched/filtered values, it will generate a matching search facet targeting
+     *    records having this exact value.
+     * @extends Component
+     */
+    class SearchBar extends Component {
+        constructor() {
+            super(...arguments);
+
+            this.focusOnUpdate = useAutofocus();
+            this.inputRef = useRef('search-input');
+            this.model = useModel('controlPanelModel');
+            this.state = useState({
+                sources: [],
+                focusedItem: 0,
+                inputValue: "",
+            });
+
+            this.autoCompleteSources = this.model.getFiltersOfType('field').map(
+                filter => this._createSource(filter)
+            );
+            this.noResultItem = [null, this.env._t("(no result)")];
+
+            useExternalListener(window, 'click', this._onWindowClick);
+            useExternalListener(window, 'keydown', this._onWindowKeydown);
+        }
+
+        mounted() {
+            // 'search' will always patch the search bar, 'focus' will never.
+            this.env.controlPanelModel.on('search', this, this.focusOnUpdate);
+            this.env.controlPanelModel.on('focus-control-panel', this, () => {
+                this.inputRef.el.focus();
+            });
+        }
+
+        willUnmount() {
+            this.env.controlPanelModel.off('search', this);
+            this.env.controlPanelModel.off('focus-control-panel', this);
+        }
+
+        //---------------------------------------------------------------------
+        // Private
+        //---------------------------------------------------------------------
+
+        /**
+         * @private
+         */
+        _closeAutoComplete() {
+            this.state.sources = [];
+            this.state.focusedItem = 0;
+            this.focusOnUpdate();
+        }
+
+        /**
+         * @private
+         * @param {Object} filter
+         * @returns {Object}
+         */
+        _createSource(filter) {
+            const source = {
+                active: true,
+                description: filter.description,
+                fieldName: filter.fieldName,
+                filterId: filter.id,
+                filterOperator: filter.operator,
+                id: sourceId ++,
+                operator: CHAR_FIELDS.includes(filter.fieldType) ? 'ilike' : '=',
+                parent: false,
+            };
+            switch (filter.fieldType) {
+                case 'selection':
+                    source.active = false;
+                    source.selection = this.props.fields[filter.fieldName].selection;
+                    break;
+                case 'boolean':
+                    source.active = false;
+                    source.selection = [
+                        [true, this.env._t("Yes")],
+                        [false, this.env._t("No")],
+                    ];
+                    break;
+                case 'many2one':
+                    source.expand = true;
+                    source.expanded = false;
+                    if (filter.domain) {
+                        source.domain = filter.domain;
+                    }
+            }
+            return source;
+        }
+
+        /**
+         * @private
+         * @param {Object} source
+         * @param {[any, string]} values
+         * @param {boolean} [active=true]
+         */
+        _createSubSource(source, [value, label], active = true) {
+            const subSource = {
+                active,
+                fieldName: source.fieldName,
+                filterId: source.filterId,
+                filterOperator: source.filterOperator,
+                id: sourceId ++,
+                label,
+                operator: '=',
+                parent: source,
+                value,
+            };
+            return subSource;
+        }
+
+        /**
+         * @private
+         * @param {Object} source
+         * @param {boolean} shouldExpand
+         */
+        async _expandSource(source, shouldExpand) {
+            source.expanded = shouldExpand;
+            if (shouldExpand) {
+                let args = source.domain;
+                if (typeof args === 'string') {
+                    try {
+                        args = Domain.prototype.stringToArray(args);
+                    } catch (err) {
+                        args = [];
+                    }
+                }
+                const { context, relation } = this.props.fields[source.fieldName];
+                const results = await this.rpc({
+                    kwargs: {
+                        args,
+                        context,
+                        limit: 8,
+                        name: this.state.inputValue.trim(),
+                    },
+                    method: 'name_search',
+                    model: relation,
+                });
+                const options = results.map(result => this._createSubSource(source, result));
+                const parentIndex = this.state.sources.indexOf(source);
+                if (!options.length) {
+                    options.push(this._createSubSource(source, this.noResultItem, false));
+                }
+                this.state.sources.splice(parentIndex + 1, 0, ...options);
+            } else {
+                this.state.sources = this.state.sources.filter(src => src.parent !== source);
+            }
+        }
+
+        /**
+         * @private
+         * @param {string} query
+         */
+        _filterSources(query) {
+            return this.autoCompleteSources.reduce(
+                (sources, source) => {
+                    // Field selection or boolean.
+                    if (source.selection) {
+                        const options = [];
+                        source.selection.forEach(result => {
+                            if (fuzzy.test(query, result[1].toLowerCase())) {
+                                options.push(this._createSubSource(source, result));
+                            }
+                        });
+                        if (options.length) {
+                            sources.push(source, ...options);
+                        }
+                    // Any other type.
+                    } else if (this._validateSource(query, source)) {
+                        sources.push(source);
+                    }
+                    // Fold any expanded item.
+                    if (source.expanded) {
+                        source.expanded = false;
+                    }
+                    return sources;
+                },
+                []
+            );
+        }
+
+        /**
+         * Focus the search facet at the designated index if any.
+         * @private
+         */
+        _focusFacet(index) {
+            const facets = this.el.getElementsByClassName('o_searchview_facet');
+            if (facets.length) {
+                facets[index].focus();
+            }
+        }
+
+        /**
+         * Try to parse the given rawValue according to the type of the given
+         * source field type. The returned formatted value is the one that will
+         * supposedly be sent to the server.
+         * @private
+         * @param {string} rawValue
+         * @param {Object} source
+         * @returns {string}
+         */
+        _parseWithSource(rawValue, source) {
+            const { type } = this.props.fields[source.fieldName];
+            const parser = field_utils.parse[type];
+            let parsedValue;
+            if (['date', 'datetime'].includes(type)) {
+                const parsedDate = parser(rawValue, { type }, { timezone: true });
+                const dateFormat = type === 'datetime' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD';
+                const momentValue = moment(parsedDate, dateFormat);
+                if (!momentValue.isValid()) {
+                    throw new Error('Invalid date');
+                }
+                parsedValue = parsedDate.toJSON();
+            } else {
+                parsedValue = parser(rawValue);
+            }
+            return parsedValue;
+        }
+
+        /**
+         * @private
+         * @param {Object} source
+         */
+        _selectSource(source) {
+            // Inactive sources are:
+            // - Selection sources
+            // - "no result" items
+            if (source.active) {
+                const labelValue = source.label || this.state.inputValue;
+                this.model.dispatch('addAutoCompletionValues', {
+                    filterId: source.filterId,
+                    value: source.value || this._parseWithSource(labelValue, source),
+                    label: labelValue,
+                    operator: source.filterOperator || source.operator,
+                });
+            }
+            this.state.inputValue = "";
+            this.inputRef.el.value = "";
+            this._closeAutoComplete();
+        }
+
+        /**
+         * @private
+         * @param {string} query
+         * @param {Object} source
+         * @returns {boolean}
+         */
+        _validateSource(query, source) {
+            try {
+                this._parseWithSource(query, source);
+            } catch (err) {
+                return false;
+            }
+            return true;
+        }
+
+        //---------------------------------------------------------------------
+        // Handlers
+        //---------------------------------------------------------------------
+
+        /**
+         * @private
+         * @param {Object} facet
+         * @param {number} facetIndex
+         * @param {KeyboardEvent} ev
+         */
+        _onFacetKeydown(facet, facetIndex, ev) {
+            switch (ev.key) {
+                case 'ArrowLeft':
+                    if (facetIndex === 0) {
+                        this.inputRef.el.focus();
+                    } else {
+                        this._focusFacet(facetIndex - 1);
+                    }
+                    break;
+                case 'ArrowRight':
+                    const facets = this.el.getElementsByClassName('o_searchview_facet');
+                    if (facetIndex === facets.length - 1) {
+                        this.inputRef.el.focus();
+                    } else {
+                        this._focusFacet(facetIndex + 1);
+                    }
+                    break;
+                case 'Backspace':
+                    this._onFacetRemove(facet);
+                    break;
+            }
+        }
+
+        /**
+         * @private
+         * @param {Object} facet
+         */
+        _onFacetRemove(facet) {
+            this.model.dispatch('deactivateGroup', facet.groupId);
+        }
+
+        /**
+         * @private
+         * @param {KeyboardEvent} ev
+         */
+        _onSearchKeydown(ev) {
+            if (ev.isComposing) {
+                // This case happens with an IME for example: we let it handle all key events.
+                return;
+            }
+            const currentItem = this.state.sources[this.state.focusedItem] || {};
+            switch (ev.key) {
+                case 'ArrowDown':
+                    ev.preventDefault();
+                    if (Object.keys(this.state.sources).length) {
+                        let nextIndex = this.state.focusedItem + 1;
+                        if (nextIndex >= this.state.sources.length) {
+                            nextIndex = 0;
+                        }
+                        this.state.focusedItem = nextIndex;
+                    } else {
+                        this.env.bus.trigger('focus-view');
+                    }
+                    break;
+                case 'ArrowLeft':
+                    if (currentItem.expanded) {
+                        // Priority 1: fold expanded item.
+                        ev.preventDefault();
+                        this._expandSource(currentItem, false);
+                    } else if (currentItem.parent) {
+                        // Priority 2: focus parent item.
+                        ev.preventDefault();
+                        this.state.focusedItem = this.state.sources.indexOf(currentItem.parent);
+                        // Priority 3: Do nothing (navigation inside text).
+                    } else if (ev.target.selectionStart === 0) {
+                        const facets = this.model.getFacets();
+                        // Priority 4: navigate to rightmost facet.
+                        this._focusFacet(facets.length - 1);
+                    }
+                    break;
+                case 'ArrowRight':
+                    if (ev.target.selectionStart === this.state.inputValue.length) {
+                        // Priority 1: Do nothing (navigation inside text).
+                        if (currentItem.expand) {
+                            // Priority 2: go to first child or expand item.
+                            ev.preventDefault();
+                            if (currentItem.expanded) {
+                                this.state.focusedItem ++;
+                            } else {
+                                this._expandSource(currentItem, true);
+                            }
+                        } else if (ev.target.selectionStart === this.state.inputValue.length) {
+                            // Priority 3: navigate to leftmost facet.
+                            this._focusFacet(0);
+                        }
+                    }
+                    break;
+                case 'ArrowUp':
+                    ev.preventDefault();
+                    let previousIndex = this.state.focusedItem - 1;
+                    if (previousIndex < 0) {
+                        previousIndex = this.state.sources.length - 1;
+                    }
+                    this.state.focusedItem = previousIndex;
+                    break;
+                case 'Backspace':
+                    if (!this.state.inputValue.length) {
+                        const facets = this.model.getFacets();
+                        if (facets.length) {
+                            this._onFacetRemove(facets[facets.length - 1]);
+                        }
+                    }
+                    break;
+                case 'Enter':
+                    if (!this.state.inputValue.length) {
+                        this.model.dispatch('search');
+                        break;
+                    }
+                    /* falls through */
+                case 'Tab':
+                    if (this.state.inputValue.length) {
+                        this._selectSource(currentItem);
+                    }
+                    break;
+                case 'Escape':
+                    if (this.state.sources.length) {
+                        this._closeAutoComplete();
+                    }
+                    break;
+            }
+        }
+
+        /**
+         * @private
+         * @param {InputEvent} ev
+         */
+        _onSearchInput(ev) {
+            this.state.inputValue = ev.target.value;
+            const wasVisible = this.state.sources.length;
+            const query = this.state.inputValue.trim().toLowerCase();
+            if (query.length) {
+                this.state.sources = this._filterSources(query);
+            } else if (wasVisible) {
+                this._closeAutoComplete();
+            }
+        }
+
+        /**
+         * Only handled if the user has moved its cursor at least once after the
+         * results are loaded and displayed.
+         * @private
+         * @param {number} resultIndex
+         */
+        _onSourceMousemove(resultIndex) {
+            this.state.focusedItem = resultIndex;
+        }
+
+        /**
+         * @private
+         * @param {MouseEvent} ev
+         */
+        _onWindowClick(ev) {
+            if (this.state.sources.length && !this.el.contains(ev.target)) {
+                this._closeAutoComplete();
+            }
+        }
+
+        /**
+         * @private
+         * @param {KeyboardEvent} ev
+         */
+        _onWindowKeydown(ev) {
+            if (ev.key === 'Escape' && this.state.sources.length) {
+                ev.preventDefault();
+                ev.stopPropagation();
+                this._closeAutoComplete();
+            }
+        }
+    }
+
+    SearchBar.defaultProps = {
+        fields: {},
+    };
+    SearchBar.props = {
+        fields: Object,
+    };
+    SearchBar.template = 'web.SearchBar';
+
+    return SearchBar;
+});
diff --git a/addons/web/static/src/js/control_panel/search_utils.js b/addons/web/static/src/js/control_panel/search_utils.js
new file mode 100644
index 00000000000..da886004669
--- /dev/null
+++ b/addons/web/static/src/js/control_panel/search_utils.js
@@ -0,0 +1,161 @@
+odoo.define('web.searchUtils', function (require) {
+    "use strict";
+
+    const { _lt } = require('web.core');
+
+    // Filter menu parameters
+    const FIELD_OPERATORS = {
+        boolean: [
+            { symbol: "=", description: _lt("is true"), value: true },
+            { symbol: "!=", description: _lt("is false"), value: true },
+        ],
+        char: [
+            { symbol: "ilike", description:_lt("contains") },
+            { symbol: "not ilike", description: _lt("doesn't contain") },
+            { symbol: "=", description: _lt("is equal to") },
+            { symbol: "!=", description: _lt("is not equal to") },
+            { symbol: "!=", description: _lt("is set"), value: false },
+            { symbol: "=", description: _lt("is not set"), value: false },
+        ],
+        date: [
+            { symbol: "=", description: _lt("is equal to") },
+            { symbol: "!=", description: _lt("is not equal to") },
+            { symbol: ">", description: _lt("is after") },
+            { symbol: "<", description: _lt("is before") },
+            { symbol: ">=", description: _lt("is after or equal to") },
+            { symbol: "<=", description: _lt("is before or equal to") },
+            { symbol: "between", description: _lt("is between") },
+            { symbol: "!=", description: _lt("is set"), value: false },
+            { symbol: "=", description: _lt("is not set"), value: false },
+        ],
+        datetime: [
+            { symbol: "between", description: _lt("is between") },
+            { symbol: "=", description: _lt("is equal to") },
+            { symbol: "!=", description: _lt("is not equal to") },
+            { symbol: ">", description: _lt("is after") },
+            { symbol: "<", description: _lt("is before") },
+            { symbol: ">=", description: _lt("is after or equal to") },
+            { symbol: "<=", description: _lt("is before or equal to") },
+            { symbol: "!=", description: _lt("is set"), value: false },
+            { symbol: "=", description: _lt("is not set"), value: false },
+        ],
+        id: [
+            { symbol: "=", description:_lt("is")},
+        ],
+        number: [
+            { symbol: "=", description: _lt("is equal to") },
+            { symbol: "!=", description: _lt("is not equal to") },
+            { symbol: ">", description: _lt("greater than") },
+            { symbol: "<", description: _lt("less than") },
+            { symbol: ">=", description: _lt("greater than or equal to") },
+            { symbol: "<=", description: _lt("less than or equal to") },
+            { symbol: "!=", description: _lt("is set"), value: false },
+            { symbol: "=", description: _lt("is not set"), value: false },
+        ],
+        selection: [
+            { symbol: "=", description:_lt("is")},
+            { symbol: "!=", description: _lt("is not") },
+            { symbol: "!=", description: _lt("is set"), value: false },
+            { symbol: "=", description: _lt("is not set"), value: false },
+        ],
+    };
+    const FIELD_TYPES = {
+        boolean: 'boolean',
+        char: 'char',
+        date: 'date',
+        datetime: 'datetime',
+        float: 'number',
+        id: 'id',
+        integer: 'number',
+        html: 'char',
+        many2many: 'char',
+        many2one: 'char',
+        monetary: 'number',
+        one2many: 'char',
+        text: 'char',
+        selection: 'selection',
+    };
+    const DEFAULT_PERIOD = 'this_month';
+    const MONTH_OPTIONS = {
+        this_month: { id: 'this_month', groupNumber: 1, format: 'MMMM', addParam: {}, setParam: {}, granularity: 'month' },
+        last_month: { id: 'last_month', groupNumber: 1, format: 'MMMM', addParam: { months: -1 }, setParam: {}, granularity: 'month' },
+        antepenultimate_month: { id: 'antepenultimate_month', groupNumber: 1, format: 'MMMM', addParam: { months: -2 }, setParam: {}, granularity: 'month' },
+    };
+    const QUARTER_OPTIONS = {
+        fourth_quarter: { id: 'fourth_quarter', groupNumber: 1, description: _lt("Q4"), addParam: {}, setParam: { quarter: 4 }, granularity: 'quarter' },
+        third_quarter: { id: 'third_quarter', groupNumber: 1, description: _lt("Q3"), addParam: {}, setParam: { quarter: 3 }, granularity: 'quarter' },
+        second_quarter: { id: 'second_quarter', groupNumber: 1, description: _lt("Q2"), addParam: {}, setParam: { quarter: 2 }, granularity: 'quarter' },
+        first_quarter: { id: 'first_quarter', groupNumber: 1, description: _lt("Q1"), addParam: {}, setParam: { quarter: 1 }, granularity: 'quarter' },
+    };
+    const YEAR_OPTIONS = {
+        this_year: { id: 'this_year', groupNumber: 2, format: 'YYYY', addParam: {}, setParam: {}, granularity: 'year' },
+        last_year: { id: 'last_year', groupNumber: 2, format: 'YYYY', addParam: { years: -1 }, setParam: {}, granularity: 'year' },
+        antepenultimate_year: { id: 'antepenultimate_year', groupNumber: 2, format: 'YYYY', addParam: { years: -2 }, setParam: {}, granularity: 'year' },
+    };
+    const OPTION_GENERATORS = Object.assign({}, MONTH_OPTIONS, QUARTER_OPTIONS, YEAR_OPTIONS);
+
+    function rankPeriod(oId) {
+        return Object.keys(OPTION_GENERATORS).indexOf(oId);
+    }
+
+    // GroupBy menu parameters
+    const GROUPABLE_TYPES = ['many2one', 'char', 'boolean', 'selection', 'date', 'datetime', 'integer'];
+    const DEFAULT_INTERVAL = 'month';
+    const INTERVAL_OPTIONS = {
+        year: { description: _lt("Year"), id: 'year', groupNumber: 1 },
+        quarter: { description: _lt("Quarter"), id: 'quarter', groupNumber: 1 },
+        month: { description: _lt("Month"), id: 'month', groupNumber: 1 },
+        week: { description: _lt("Week"), id: 'week', groupNumber: 1 },
+        day: { description: _lt("Day"), id: 'day', groupNumber: 1 }
+    };
+    function rankInterval(oId) {
+        return Object.keys(INTERVAL_OPTIONS).indexOf(oId);
+    }
+
+    // TimeRange menu parameters
+    const TIME_RANGE_OPTIONS = {
+        last_7_days: { description: _lt("Last 7 Days"), id: 'last_7_days', groupNumber: 1 },
+        last_30_days: { description: _lt("Last 30 Days"), id: 'last_30_days', groupNumber: 1 },
+        last_365_days: { description: _lt("Last 365 Days"), id: 'last_365_days', groupNumber: 1 },
+        last_5_years: { description: _lt("Last 5 Years"), id: 'last_5_years', groupNumber: 1 },
+        today: { description: _lt("Today"), id: 'today', groupNumber: 2 },
+        this_week: { description: _lt("This Week"), id: 'this_week', groupNumber: 2 },
+        this_month: { description: _lt("This Month"), id: 'this_month', groupNumber: 2 },
+        this_quarter: { description: _lt("This Quarter"), id: 'this_quarter', groupNumber: 2 },
+        this_year: { description: _lt("This Year"), id: 'this_year', groupNumber: 2 },
+        yesterday: { description: _lt("Yesterday"), id: 'yesterday', groupNumber: 3 },
+        last_week: { description: _lt("Last Week"), id: 'last_week', groupNumber: 3 },
+        last_month: { description: _lt("Last Month"), id: 'last_month', groupNumber: 3 },
+        last_quarter: { description: _lt("Last Quarter"), id: 'last_quarter', groupNumber: 3 },
+        last_year: { description: _lt("Last Year"), id: 'last_year', groupNumber: 3 },
+    };
+    const COMPARISON_TIME_RANGE_OPTIONS = {
+        previous_period: { description: _lt("Previous Period"), id: 'previous_period' },
+        previous_year: { description: _lt("Previous Year"), id: 'previous_year' },
+    };
+
+    // Search bar
+    const FACET_ICONS = {
+        filter: 'fa-filter',
+        groupBy: 'fa-bars',
+        favorite: 'fa-star',
+        timeRange: 'fa-calendar',
+    };
+
+    return {
+        COMPARISON_TIME_RANGE_OPTIONS,
+        DEFAULT_INTERVAL,
+        DEFAULT_PERIOD,
+        FACET_ICONS,
+        FIELD_OPERATORS,
+        FIELD_TYPES,
+        GROUPABLE_TYPES,
+        INTERVAL_OPTIONS,
+        OPTION_GENERATORS,
+        TIME_RANGE_OPTIONS,
+        YEAR_OPTIONS,
+
+        rankInterval,
+        rankPeriod,
+    };
+});
diff --git a/addons/web/static/src/js/control_panel/time_range_menu.js b/addons/web/static/src/js/control_panel/time_range_menu.js
new file mode 100644
index 00000000000..b18b376d40b
--- /dev/null
+++ b/addons/web/static/src/js/control_panel/time_range_menu.js
@@ -0,0 +1,109 @@
+odoo.define('web.TimeRangeMenu', function (require) {
+    "use strict";
+
+    const { COMPARISON_TIME_RANGE_OPTIONS, DEFAULT_PERIOD, TIME_RANGE_OPTIONS } = require('web.searchUtils');
+    const DropdownMenu = require('web.DropdownMenu');
+    const { useModel } = require('web.model');
+
+    // Used to provide unique ids to its template elements.
+    let timeRangeMenuId = 0;
+
+    /**
+     * 'Time ranges' menu
+     *
+     * Component used to create a time range from a field, a given range and optionally
+     * another field to make a comparison.
+     *
+     * The component template overrides the dropdownmenu to keep the basic behaviours
+     * (opening/closing, layout). The template itself iis a set of labels/inputs
+     * used to select the field and range. There is also a checkbox used to determine
+     * whether to render the comparison range field selection (input).
+     * @extends DropdownMenu
+     */
+    class TimeRangeMenu extends DropdownMenu {
+        constructor() {
+            super(...arguments);
+            this.model = useModel('controlPanelModel');
+
+            this.domId = timeRangeMenuId++;
+            this.fields = Object.values(this.props.fields)
+                .filter(field => this._validateField(field));
+            this.periodOptions = TIME_RANGE_OPTIONS;
+            this.comparisonTimeRangeOptions = COMPARISON_TIME_RANGE_OPTIONS;
+            this.periodGroups = Object.values(this.periodOptions).reduce((acc, o) => {
+                if (!acc.includes(o.groupNumber)) {
+                    acc.push(o.groupNumber);
+                }
+                return acc;
+            }, []);
+            const activeTimeRange = this.model.getFiltersOfType('timeRange').find(
+                timeRange => timeRange.isActive
+            );
+            Object.assign(this.state, {
+                fieldName: this.fields[0] && this.fields[0].name,
+                rangeId: DEFAULT_PERIOD,
+            }, activeTimeRange);
+        }
+
+        //---------------------------------------------------------------------
+        // Getters
+        //---------------------------------------------------------------------
+
+        /**
+         * @override
+         */
+        get title() {
+            return this.env._t("Time Ranges");
+        }
+
+        //---------------------------------------------------------------------
+        // Private
+        //---------------------------------------------------------------------
+
+        /**
+         * @private
+         * @param {Object} field
+         * @returns {boolean}
+         */
+        _validateField(field) {
+            return field.sortable &&
+                ['date', 'datetime'].includes(field.type);
+        }
+
+        //---------------------------------------------------------------------
+        // Handlers
+        //---------------------------------------------------------------------
+
+        /**
+         * @private
+         */
+        _onApply() {
+            this.model.dispatch('activateTimeRange',
+                this.state.fieldName,
+                this.state.rangeId,
+                this.state.comparisonRangeId
+            );
+        }
+
+        /**
+         * @private
+         */
+        _onCheckboxClick() {
+            if (!this.state.comparisonRangeId) {
+                this.state.comparisonRangeId = 'previous_period'; // default
+            } else {
+                delete this.state.comparisonRangeId;
+            }
+        }
+    }
+
+    TimeRangeMenu.defaultProps = Object.assign({}, DropdownMenu.defaultProps, {
+        icon: 'fa fa-calendar',
+    });
+    TimeRangeMenu.props = Object.assign({}, DropdownMenu.props, {
+        fields: Object,
+    });
+    TimeRangeMenu.template = 'web.TimeRangeMenu';
+
+    return TimeRangeMenu;
+});
diff --git a/addons/web/static/src/js/model.js b/addons/web/static/src/js/model.js
new file mode 100644
index 00000000000..8e3842e5175
--- /dev/null
+++ b/addons/web/static/src/js/model.js
@@ -0,0 +1,157 @@
+odoo.define('web.model', function () {
+    "use strict";
+
+    const { Component, core } = owl;
+    const { EventBus, Observer } = core;
+
+    // TODO: remove this if made available in owl.utils
+    function partitionBy(arr, fn) {
+        let lastGroup = false;
+        let lastValue;
+        return arr.reduce((acc, cur) => {
+            let curVal = fn(cur);
+            if (lastGroup) {
+                if (curVal === lastValue) {
+                    lastGroup.push(cur);
+                }
+                else {
+                    lastGroup = false;
+                }
+            }
+            if (!lastGroup) {
+                lastGroup = [cur];
+                acc.push(lastGroup);
+            }
+            lastValue = curVal;
+            return acc;
+        }, []);
+    }
+
+    /**
+     * Model
+     *
+     * The purpose of the class Model and the associated hook useModel
+     * is to offer something similar to an owl store but with no automatic
+     * notification (and rendering) of components when the 'state' used in the model
+     * would change. Instead, one should call the __notifyComponents function whenever
+     * it is useful to alert registered component. Nevertheless,
+     * when calling a method throught the dispatch method, a notifcation
+     * does take place automatically, and registered components (via useModel) are rendered.
+     *
+     * it is highly expected that this class will change in a near future. We don't have
+     * the necessary hindsight to be sure its actual form is good.
+     * @extends EventBus
+     */
+    class Model extends EventBus {
+
+        constructor() {
+            super();
+            this.rev = 1;
+            this.mapping = {}; // could be a weak map
+        }
+
+        //---------------------------------------------------------------------
+        // Public
+        //---------------------------------------------------------------------
+
+        /**
+         * Call the base model method with given name with the arguments
+         * determined by the dispatch extra arguments.
+         *
+         * @param {string} action
+         * @param {...any} args
+         * @returns {Promise<any>}
+         */
+        async dispatch(action, ...args) {
+            const result = await this[action](...args);
+            // TODO try to put it in promise.resolve()
+            this._dispatch(...arguments);
+            let rev = this.rev;
+            await Promise.resolve();
+            if (rev === this.rev) {
+                await this._notifyComponents();
+            }
+            return result;
+        }
+
+        //---------------------------------------------------------------------
+        // Private
+        //---------------------------------------------------------------------
+
+        /**
+         * @private
+         * @param {string} action
+         * @param {...any} args
+         */
+        _dispatch(action, ...args) { }
+
+        /**
+         * see Context method in owl.js for explanation
+         * @private
+         */
+        async _notifyComponents() {
+            const rev = ++this.rev;
+            const subscriptions = this.subscriptions.update;
+            const groups = partitionBy(subscriptions, s => (s.owner ? s.owner.__owl__.depth : -1));
+            for (let group of groups) {
+                const proms = group.map(sub => sub.callback.call(sub.owner, rev));
+                Component.scheduler.flush();
+                await Promise.all(proms);
+            }
+        }
+    }
+
+    /**
+     * This is more or less the hook 'useContextWithCB' from owl only slightly simplified.
+     *
+     * @param {string} modelName
+     */
+    function useModel(modelName) {
+        const component = Component.current;
+        const model = component.env[modelName];
+        if (!(model instanceof Model)) {
+            throw new Error(`No Model found when connecting '${component.constructor.name}'`);
+        }
+
+        const mapping = model.mapping;
+        const __owl__ = component.__owl__;
+        const componentId = __owl__.id;
+        if (!__owl__.observer) {
+            __owl__.observer = new Observer();
+            __owl__.observer.notifyCB = component.render.bind(component);
+        }
+        const currentCB = __owl__.observer.notifyCB;
+        __owl__.observer.notifyCB = function () {
+            if (model.rev > mapping[componentId]) {
+                return;
+            }
+            currentCB();
+        };
+        mapping[componentId] = 0;
+        const renderFn = __owl__.renderFn;
+        __owl__.renderFn = function (comp, params) {
+            mapping[componentId] = model.rev;
+            return renderFn(comp, params);
+        };
+
+        model.on('update', component, async modelRev => {
+            if (mapping[componentId] < modelRev) {
+                mapping[componentId] = modelRev;
+                await component.render();
+            }
+        });
+
+        const __destroy = component.__destroy;
+        component.__destroy = parent => {
+            model.off("update", component);
+            __destroy.call(component, parent);
+        };
+
+        return model;
+    }
+
+    return {
+        Model,
+        useModel,
+    };
+});
diff --git a/addons/web/static/src/js/views/control_panel/control_panel_controller.js b/addons/web/static/src/js/views/control_panel/control_panel_controller.js
deleted file mode 100644
index 3c23e681631..00000000000
--- a/addons/web/static/src/js/views/control_panel/control_panel_controller.js
+++ /dev/null
@@ -1,269 +0,0 @@
-odoo.define('web.ControlPanelController', function (require) {
-"use strict";
-
-var mvc = require('web.mvc');
-
-var ControlPanelController = mvc.Controller.extend({
-    className: 'o_cp_controller',
-    custom_events: {
-        facet_removed: '_onFacetRemoved',
-        get_search_query: '_onGetSearchQuery',
-        item_option_clicked: '_onItemOptionClicked',
-        item_trashed: '_onItemTrashed',
-        menu_item_clicked: '_onMenuItemClicked',
-        new_favorite: '_onNewFavorite',
-        new_filters: '_onNewFilters',
-        new_groupBy: '_onNewGroupBy',
-        activate_time_range: '_onActivateTimeRange',
-        autocompletion_filter: '_onAutoCompletionFilter',
-        reload: '_onReload',
-        reset: '_onReset',
-    },
-
-    /**
-     * @override
-     * @param {Object} params
-     * @param {string} params.modelName
-     */
-    init: function (parent, model, renderer, params) {
-        this._super.apply(this, arguments);
-
-        this.modelName = params.modelName;
-    },
-    /**
-     * Called when the control panel is inserted into the DOM.
-     */
-    on_attach_callback: function () {
-        this.renderer.on_attach_callback();
-    },
-    /**
-     * Called when the control panel is remove form the DOM.
-     */
-    on_detach_callback: function () {
-        this.renderer.on_detach_callback();
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @see ControlPanelModel (exportState)
-     * @returns {Object}
-     */
-    exportState: function () {
-        return this.model.exportState();
-    },
-    /**
-     * Called by the abstract controller to give focus to the searchbar
-     */
-    focusSearchBar: function () {
-        if (this.renderer.searchBar) {
-            this.renderer.searchBar.focus();
-        }
-    },
-    /**
-     * Compute the search related values that will be used to fetch data.
-     *
-     * @returns {Object} object with keys 'context', 'domain', 'groupBy'
-     */
-    getSearchQuery: function () {
-        return this.model.getQuery();
-    },
-    /**
-     * @param {Object} state a ControlPanelModel state
-     * @returns {Promise<Object>} the result of `getSearchState`
-     */
-    importState: function (state) {
-        var defs = [];
-        this.model.importState(state);
-        defs.push(this.getSearchQuery());
-        defs.push(this.renderer.updateState(this.model.get()));
-        return Promise.all(defs).then(function (defsResults) {
-            return defsResults[0];
-        });
-    },
-    /**
-     * Called at each switch view. This is required until the control panel is
-     * shared between controllers of an action.
-     *
-     * @param {string} controllerID
-     */
-    setControllerID: function (controllerID) {
-        this.controllerID = controllerID;
-    },
-    /**
-     * Update the content and displays the ControlPanel.
-     *
-     * @see  ControlPanelRenderer (updateContents)
-     * @param {Object} status
-     * @param {Object} [options]
-     */
-    updateContents: function (status, options) {
-        this.renderer.updateContents(status, options);
-    },
-    /**
-     * Update the domain of the search view by adding and/or removing filters.
-     *
-     * @todo: the way it is done could be improved, but the actual state of the
-     * searchview doesn't allow to do much better.
-
-     * @param {Object[]} newFilters list of filters to add, described by
-     *   objects with keys domain (the domain as an Array), description (the text
-     *   to display in the facet) and type with value 'filter'.
-     * @param {string[]} filtersToRemove list of filter ids to remove
-     *   (previously added ones)
-     * @returns {string[]} list of added filters (to pass as filtersToRemove
-     *   for a further call to this function)
-     */
-    updateFilters: function (newFilters, filtersToRemove) {
-        var newFilterIDS = this.model.createNewFilters(newFilters);
-        this.model.deactivateFilters(filtersToRemove);
-        this._reportNewQueryAndRender();
-        return newFilterIDS;
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @returns {jQuery}
-     */
-    _getSubMenus: function () {
-        return this.renderer.$subMenus;
-    },
-    /**
-     * @private
-     * @returns {Promise}
-     */
-    _reportNewQueryAndRender: function () {
-        this.trigger_up('search', this.model.getQuery());
-        var state = this.model.get();
-        return this.renderer.updateState(state);
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onActivateTimeRange: function (ev) {
-        ev.stopPropagation();
-        this.model.activateTimeRange(
-            ev.data.id,
-            ev.data.timeRangeId,
-            ev.data.comparisonTimeRangeId
-        );
-        this._reportNewQueryAndRender();
-    },
-    /**
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onAutoCompletionFilter: function (ev) {
-        ev.stopPropagation();
-        this.model.toggleAutoCompletionFilter(ev.data);
-        this._reportNewQueryAndRender();
-    },
-    /**
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onFacetRemoved: function (ev) {
-        ev.stopPropagation();
-        var group = ev.data.group || this.renderer.getLastFacet();
-        if (group) {
-            this.model.deactivateGroup(group.id);
-            this._reportNewQueryAndRender();
-        }
-    },
-    /**
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onGetSearchQuery: function (ev) {
-        ev.stopPropagation();
-        var query = this.getSearchQuery();
-        ev.data.callback(query);
-    },
-    /**
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onItemOptionClicked: function (ev) {
-        ev.stopPropagation();
-        this.model.toggleFilterWithOptions(ev.data.id, ev.data.optionId);
-        this._reportNewQueryAndRender();
-    },
-    /**
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onItemTrashed: function (ev) {
-        ev.stopPropagation();
-        var def = this.model.deleteFilterEverywhere(ev.data.id);
-        def.then(this._reportNewQueryAndRender.bind(this));
-    },
-    /**
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onMenuItemClicked: function (ev) {
-        ev.stopPropagation();
-        this.model.toggleFilter(ev.data.id);
-        this._reportNewQueryAndRender();
-    },
-    /**
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onNewFavorite: function (ev) {
-        ev.stopPropagation();
-        var def = this.model.createNewFavorite(ev.data);
-        def.then(this._reportNewQueryAndRender.bind(this));
-    },
-    /**
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onNewFilters: function (ev) {
-        ev.stopPropagation();
-        this.model.createNewFilters(ev.data.filters);
-        this._reportNewQueryAndRender();
-    },
-    /**
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onNewGroupBy: function (ev) {
-        ev.stopPropagation();
-        this.model.createNewGroupBy(ev.data);
-        this._reportNewQueryAndRender();
-    },
-    /**
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onReload: function (ev) {
-        ev.stopPropagation();
-        this.trigger_up('search', this.model.getQuery());
-    },
-    /**
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onReset: function (ev) {
-        ev.stopPropagation();
-        var state = this.model.get();
-        this.renderer.updateState(state);
-    },
-});
-
-return ControlPanelController;
-
-});
diff --git a/addons/web/static/src/js/views/control_panel/control_panel_model.js b/addons/web/static/src/js/views/control_panel/control_panel_model.js
deleted file mode 100644
index 40a84db99c6..00000000000
--- a/addons/web/static/src/js/views/control_panel/control_panel_model.js
+++ /dev/null
@@ -1,1269 +0,0 @@
-odoo.define('web.ControlPanelModel', function (require) {
-"use strict";
-
-var controlPanelViewParameters = require('web.controlPanelViewParameters');
-var core = require('web.core');
-var Domain = require('web.Domain');
-var mvc = require('web.mvc');
-var pyUtils = require('web.py_utils');
-var searchBarAutocompleteRegistry = require('web.search_bar_autocomplete_sources_registry');
-var session = require('web.session');
-
-var _t = core._t;
-
-const DEFAULT_TIMERANGE = controlPanelViewParameters.DEFAULT_TIMERANGE;
-let TIME_RANGE_OPTIONS = controlPanelViewParameters.TIME_RANGE_OPTIONS;
-let COMPARISON_TIME_RANGE_OPTIONS = controlPanelViewParameters.COMPARISON_TIME_RANGE_OPTIONS;
-const OPTION_GENERATORS = controlPanelViewParameters.OPTION_GENERATORS;
-const YEAR_OPTIONS = controlPanelViewParameters.YEAR_OPTIONS;
-const { rank } = controlPanelViewParameters;
-
-// Returns a predicate used to test if two arrays (of maximal length 2) have the same basic content.
-function isEqualTo (array1) {
-    if (array1.length === 1) {
-        return array2 => array2.length === 1 && array2[0] === array1[0];
-    } else {
-        return array2 => array2.length === 2 && array2[0] === array1[0] && array2[1] === array1[1];
-    }
-}
-
-var ControlPanelModel = mvc.Model.extend({
-    /**
-     * @override
-     * @param {string} [params.actionId]
-     * @param {string} [params.context={}]
-     * @param {string} [params.domain=[]]
-     * @param {string} [params.field={}]
-     * @param {string} [params.modelName]
-     */
-    init: function (parent, params) {
-        this._super.apply(this, arguments);
-
-        // Tricks to avoid losing information on filter descriptions in control panel model configuration
-        TIME_RANGE_OPTIONS = TIME_RANGE_OPTIONS.map(function (option) {
-            return _.extend({}, option, {description: option.description.toString()});
-        });
-        COMPARISON_TIME_RANGE_OPTIONS = COMPARISON_TIME_RANGE_OPTIONS.map(function (option) {
-            return _.extend({}, option, {description: option.description.toString()});
-        });
-
-
-        this.modelName = params.modelName;
-        // info on fields of model this.modelName
-        this.fields = params.fields || {};
-
-        // info on current action
-        this.actionId = params.actionId;
-        this.actionContext = params.context || {};
-        this.actionDomain = params.domain || [];
-
-        // triple determining a control panel model configuration
-        this.filters = {};
-        this.groups = {};
-        this.query = [];
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * Activate a given filter of type 'timeRange' with a timeRangeId
-     * and optionaly a comparsionTimeRangeId
-     *
-     * @param {string} filterId
-     * @param {string} timeRangeId
-     * @param {string} [comparisonTimeRangeId]
-     */
-    activateTimeRange: function (filterId, timeRangeId, comparisonTimeRangeId) {
-        var filter = this.filters[filterId];
-        filter.timeRangeId = timeRangeId || filter.defaultTimeRangeId;
-        filter.comparisonTimeRangeId = comparisonTimeRangeId;
-        var group = this.groups[filter.groupId];
-        var groupActive = group.activeFilterIds.length;
-        if (groupActive) {
-            group.activeFilterIds = [[filterId]];
-        } else {
-            this.toggleFilter(filterId);
-        }
-    },
-    /**
-     * Ccreate an ir_filter server side. If the operation is successful, a new
-     * filter of type 'favorite' is created and activated.
-     *
-     * @param {Object} newFavorite
-     */
-    createNewFavorite: function (newFavorite) {
-        return this._saveQuery(_.pick(
-            newFavorite,
-            ['description', 'isDefault', 'isShared', 'type']
-        )).then(function () {
-            newFavorite.on_success();
-        });
-    },
-    /**
-     * Create new filters of type 'filter' with same new groupId and groupNumber.
-     * They are activated.
-     *
-     * @param {Object[]} newFilters
-     * @returns {string[]} filterIds, ids of the newly created filters
-     */
-    createNewFilters: function (newFilters) {
-        var self = this;
-        var filterIds = [];
-        var groupNumber = this._generateNewGroupNumber();
-        this._createGroupOfFilters(newFilters);
-        newFilters.forEach(function (filter) {
-            filter.groupNumber = groupNumber;
-            self.toggleFilter(filter.id);
-            filterIds.push(filter.id);
-        });
-        return filterIds;
-    },
-    /**
-     * Create a new groupBy with the groupId shared by all filters of type 'groupBy'
-     * but a new groupNumber
-     * It is activated.
-     *
-     * @param {Object} newGroupBy
-     */
-    createNewGroupBy: function (newGroupBy) {
-        var id = _.uniqueId('__filter__');
-        newGroupBy.id = id;
-        newGroupBy.groupId = this._getGroupIdOfType('groupBy');
-        newGroupBy.groupNumber = this._generateNewGroupNumber();
-        this.filters[id] = newGroupBy;
-        if (_.contains(['date', 'datetime'], newGroupBy.fieldType)) {
-            this.toggleFilterWithOptions(newGroupBy.id);
-        } else {
-            this.toggleFilter(newGroupBy.id);
-        }
-    },
-    /**
-     * Ensure that the filters determined by the given filterIds are
-     * deactivated (if one or many of them are already deactivated, nothing bad happens)
-     *
-     * @param {string[]} filterIds
-     */
-    deactivateFilters: function (filterIds) {
-        var self = this;
-        filterIds.forEach(function (filterId) {
-            var filter = self.filters[filterId];
-            var group = self.groups[filter.groupId];
-            if (group.activeFilterIds.some(isEqualTo([filterId]))) {
-                self.toggleFilter(filterId);
-            }
-        });
-    },
-    /**
-     * Deactivate all filters in a given group with given id.
-     *
-     * @param {string} groupId
-     */
-    deactivateGroup: function (groupId) {
-        var self = this;
-        var group = this.groups[groupId];
-        _.each(group.activeFilterIds, id => {
-            var filter = self.filters[id[0]];
-            // TODO: put this logic in toggleFilter 'field' type
-            if (filter.autoCompleteValues) {
-                filter.autoCompleteValues = [];
-            }
-            if (filter.currentOptionIds) {
-                filter.currentOptionIds.clear();
-            }
-        });
-        // TODO: use toggleFilter here
-        group.activeFilterIds = [];
-        this.query.splice(this.query.indexOf(groupId), 1);
-    },
-    /**
-     * Delete a filter of type 'favorite' with given filterId server side and in control panel model.
-     * Of course this forces the filter to be removed from the search query.
-     *
-     * @param {string} filterId
-     */
-    deleteFilterEverywhere: function (filterId) {
-        var self = this;
-        var filter = this.filters[filterId];
-        var def = this.deleteFilter(filter.serverSideId).then(function () {
-            const groupOfFavorites = self.groups[filter.groupId];
-            const isActive = groupOfFavorites.activeFilterIds.some(isEqualTo([filterId]));
-            if (isActive) {
-                self.toggleFilter(filterId);
-            }
-            delete self.filters[filterId];
-        });
-        return def;
-    },
-    /**
-     * Return the state of the control panel (the filters, groups and the
-     * current query). This state can then be used in an other control panel
-     * model (with same key modelName) via the importState method.
-     *
-     * @returns {Object}
-     */
-    exportState: function () {
-        return {
-            filters: this.filters,
-            groups: this.groups,
-            query: this.query,
-        };
-    },
-    /**
-     * @override
-     *
-     * @returns {Object}
-     */
-    get: function () {
-        var self = this;
-        // we maintain a unique source activeFilterIds that contain information
-        // on active filters. But the renderer can have more information since
-        // it does not modifies filters activity.
-        // We thus give a different structure to renderer that may contain duplicated
-        // information.
-        // Note that filters are filters of filter type only, groupbys are groupbys,...!
-        var filterFields = [];
-        var filters = [];
-        var groupBys = [];
-        var timeRanges = [];
-        var favorites = [];
-        Object.keys(this.filters).forEach(function (filterId) {
-            var filter = _.extend({}, self.filters[filterId]);
-            if (filter.invisible) {
-                return;
-            }
-            var group = self.groups[filter.groupId];
-            filter.isActive = group.activeFilterIds.some(id => id[0] === filterId);
-            if (filter.type === 'field') {
-                filterFields.push(filter);
-            }
-            if (filter.type === 'filter') {
-                filters.push(filter);
-            }
-            if (filter.type === 'groupBy') {
-                groupBys.push(filter);
-            }
-            if (filter.type === 'favorite') {
-                favorites.push(filter);
-            }
-            if (filter.type === 'timeRange') {
-                timeRanges.push(filter);
-            }
-        });
-        var facets = this._getFacets();
-        favorites = _.sortBy(favorites, 'groupNumber');
-        return {
-            facets: facets,
-            filterFields: filterFields,
-            filters: filters,
-            groupBys: groupBys,
-            timeRanges: timeRanges,
-            favorites: favorites,
-            groups: this.groups,
-            query: _.extend([], this.query),
-            fields: this.fields,
-        };
-    },
-    /**
-     * @returns {Object} An object called search query with keys domain, groupBy,
-     *                   context, orderedBy.
-     */
-    getQuery: function () {
-        var userContext = session.user_context;
-        var context = _.extend(
-            pyUtils.eval('contexts', this._getQueryContext(), userContext),
-            this._getTimeRangeMenuData(true)
-        );
-        var domain = Domain.prototype.stringToArray(this._getDomain(), userContext);
-        // this must be done because pyUtils.eval does not know that it needs to evaluate domains within contexts
-        if (context.timeRangeMenuData) {
-            if (typeof context.timeRangeMenuData.timeRange === 'string') {
-                context.timeRangeMenuData.timeRange = pyUtils.eval('domain', context.timeRangeMenuData.timeRange);
-            }
-            if (typeof context.timeRangeMenuData.comparisonTimeRange === 'string') {
-                context.timeRangeMenuData.comparisonTimeRange = pyUtils.eval('domain', context.timeRangeMenuData.comparisonTimeRange);
-            }
-        }
-        var action_context = this.actionContext;
-        var results = pyUtils.eval_domains_and_contexts({
-            domains: [this.actionDomain].concat([domain] || []),
-            contexts: [action_context].concat(context || []),
-            eval_context: session.user_context,
-        });
-        if (results.error) {
-            throw new Error(_.str.sprintf(_t("Failed to evaluate search criterions")+": \n%s",
-                            JSON.stringify(results.error)));
-        }
-
-        var groupBys = this._getGroupBy();
-        var groupBy = groupBys.length ?
-                        groupBys :
-                        (this.actionContext.group_by || []);
-        groupBy = (typeof groupBy === 'string') ? [groupBy] : groupBy;
-
-        context = _.omit(results.context, 'time_ranges');
-
-        return {
-            context: context,
-            domain: results.domain,
-            groupBy: groupBy,
-            orderedBy: this._getOrderedBy(),
-        };
-    },
-    /**
-     * Set filters, groups, and query keys according to the given state.
-     *
-     * @param {Object} state
-     */
-    importState: function (state) {
-        this.filters = state.filters;
-        this.groups = state.groups;
-        this.query = state.query;
-    },
-    /**
-     * The load method is the place where the favorites are also loaded and
-     * the model state is first established.
-     * The computation of the active filters at initialization is accomplished
-     * here.
-     *
-     * @param {Object} params
-     * @param {boolean} [params.activateDefaultFavorite=false]
-     * @param {Array[]} [params.groups=[]]
-     * @param {Object} [params.initialState]
-     * @param {string[]} [params.searchMenuTypes=[]]
-     * @param {Object} [params.timeRanges]
-     * @param {boolean} [params.withSearchBar]
-     * @returns {Promise}
-     */
-    load: function (params) {
-        var self = this;
-        this.searchMenuTypes = params.searchMenuTypes || [];
-        this.activateDefaultFavorite = params.activateDefaultFavorite;
-
-        if (!params.withSearchBar && params.searchMenuTypes.length === 0) {
-            // The model state will remain as set in init method
-            // and the info comming from arch put in params.groups (if any)
-            // will be lost. This is not a problem because the state
-            // won't be use elsewhere.
-            return Promise.resolve();
-        }
-        if (params.initialState) {
-            this.importState(params.initialState);
-            return Promise.resolve();
-        } else {
-            var groups = params.groups || [];
-            groups.forEach(function (group) {
-                self._createGroupOfFilters(group);
-            });
-            if (this._getGroupIdOfType('groupBy') === undefined) {
-                this._createEmptyGroup('groupBy');
-            }
-            this._createGroupOfTimeRanges();
-            return Promise.all(self._loadSearchDefaults()).then(function () {
-                return self._loadFavorites().then(function () {
-                    if (self.query.length === 0) {
-                        self._activateDefaultFilters();
-                        self._activateDefaultTimeRanges(params.timeRanges);
-                    }
-                });
-            });
-        }
-    },
-    /**
-     * Toggle a filter with given id in a way appropriate to its type.
-     *
-     * @param {Object} params
-     * @param {string} params.filterId
-     * @param {Object} params.autoCompleteValues
-     */
-    toggleAutoCompletionFilter: function (params) {
-        var filter = this.filters[params.filterId];
-        if (filter.type === 'field') {
-            filter.autoCompleteValues = params.autoCompleteValues;
-            // the autocompletion filter is dynamic
-            filter.domain = this._getAutoCompletionFilterDomain(filter);
-            // active the filter
-            var group = this.groups[filter.groupId];
-            if (!group.activeFilterIds.some(isEqualTo([filter.id]))) {
-                group.activeFilterIds.push([filter.id]);
-                this.query.push(group.id);
-            }
-        } else {
-            if (filter.hasOptions) {
-                this.toggleFilterWithOptions(filter.id);
-            } else {
-                this.toggleFilter(filter.id);
-            }
-        }
-    },
-    /**
-     * Toggle a filter throught the modification of this.groups and potentially
-     * of this.query and this.filters.
-     *
-     * @param {string} filterId
-     */
-    toggleFilter: function (filterId) {
-        var self = this;
-        var filter = this.filters[filterId];
-        var group = this.groups[filter.groupId];
-        var index = group.activeFilterIds.findIndex(isEqualTo([filterId]));
-        var initiaLength = group.activeFilterIds.length;
-        if (index === -1) {
-            // we need to deactivate all groups when activating a favorite
-            if (filter.type === 'favorite') {
-                this.query.forEach(function (groupId) {
-                    const group = self.groups[groupId];
-                    group.activeFilterIds.forEach(id => {
-                        const filter = self.filters[id[0]];
-                        if (filter.autoCompleteValues) {
-                            filter.autoCompleteValues = [];
-                        }
-                        if (filter.currentOptionIds) {
-                            filter.currentOptionIds.clear();
-                        }
-                    })
-                    group.activeFilterIds = [];
-                });
-                this.query = [];
-            }
-            group.activeFilterIds.push([filterId]);
-            // if initiaLength is 0, the group was not active.
-            if (filter.type === 'favorite' || initiaLength === 0) {
-                this.query.push(group.id);
-            }
-        } else {
-            if (filter.type === 'field' && filter.autoCompleteValues) {
-                filter.autoCompleteValues = [];
-            }
-            group.activeFilterIds.splice(index, 1);
-            // if initiaLength is 1, the group is now inactive.
-            if (initiaLength === 1) {
-                this.query.splice(this.query.indexOf(group.id), 1);
-            }
-        }
-    },
-    /**
-     * Used to toggle a given filter(Id) that has options with a given option(Id).
-     *
-     * @param {string} filterId
-     * @param {string} [optionId]
-     */
-    toggleFilterWithOptions: function (filterId, optionId) {
-        const filter = this.filters[filterId];
-        optionId = optionId || filter.defaultOptionId;
-        const group = this.groups[filter.groupId];
-
-        const selectedYears = () => YEAR_OPTIONS.reduce(
-            (acc, y) => {
-                if (filter.currentOptionIds.has(y.optionId)) {
-                    acc.push(y.optionId);
-                }
-                return acc;
-            },
-            []
-        );
-        const defaultYearId = (optionId) => {
-            const year = filter.options.find(o => o.optionId === optionId).defaultYear;
-            return filter.options.find(o => o.setParam.year === year).optionId;
-        };
-
-        if (filter.type === 'filter') {
-            const alreadyActive = group.activeFilterIds.some(isEqualTo([filterId]));
-            if (alreadyActive) {
-                if (filter.currentOptionIds.has(optionId)) {
-                    filter.currentOptionIds.delete(optionId);
-                    if (!selectedYears().length) {
-                        // This is the case where optionId was the last option of type 'year' to be there before being removed above.
-                        // Since other options of type 'month' or 'quarter' do not make sense without a year
-                        // we deactivate all options.
-                        filter.currentOptionIds.clear();
-                    }
-                    if (!filter.currentOptionIds.size) {
-                        // Here no option is selected so that the filter becomes inactive.
-                        this.toggleFilter(filterId);
-                    }
-                } else {
-                    filter.currentOptionIds.add(optionId);
-                }
-            } else {
-                this.toggleFilter(filterId);
-                filter.currentOptionIds.add(optionId);
-                if (!selectedYears().length) {
-                    // Here we add 'this_year' as options if no option of type year is already selected.
-                    filter.currentOptionIds.add(defaultYearId(optionId));
-                }
-            }
-        } else if (filter.type === 'groupBy') {
-            const combinationId = [filterId, optionId];
-            const initiaLength = group.activeFilterIds.length;
-            const index = group.activeFilterIds.findIndex(isEqualTo(combinationId));
-
-            if (index === -1) {
-                group.activeFilterIds = this._insert(group.activeFilterIds, combinationId);
-                filter.currentOptionIds.add(optionId);
-                if (initiaLength === 0) {
-                    this.query.push(group.id);
-                }
-            } else {
-                group.activeFilterIds.splice(index, 1);
-                filter.currentOptionIds.delete(optionId);
-                if (initiaLength === 1) {
-                    this.query.splice(this.query.indexOf(group.id), 1);
-                }
-            }
-        }
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Activate all filters (but favorites) with key isDefault=true
-     *
-     * @private
-     */
-    _activateDefaultFilters: function () {
-        Object.values(this.filters)
-            .filter(f => f.isDefault && f.type !== 'favorite')
-            .sort((f1, f2) => (f1.defaultRank || 100) - (f2.defaultRank || 100))
-            .forEach(f => {
-                if (f.hasOptions) {
-                    this.toggleFilterWithOptions(f.id);
-                } else {
-                    this.toggleFilter(f.id);
-                }
-            });
-    },
-    /**
-     * If defaultTimeRanges param is provided, activate the filter of type
-     * 'timeRange' it determines with the correct options.
-     *
-     * @private
-     * @param {Object} [defaultTimeRanges]
-     * @param {string} [defaultTimeRanges.field], field of type 'date' or 'datetime'
-     * @param {string} [defaultTimeRanges.range], to choose among the following:
-     *  'last_7_days', 'last_30_days', 'last_365_days', 'today', 'this_week',
-     *  'this_month', 'this_quarter', 'this_year', 'yesterday', 'last_week',
-     *  'last_month', 'last_quarter', 'last_year'
-     * @param {'previous_period'|'previous_year'} [defaultTimeRanges.comparisonRange]
-     */
-    _activateDefaultTimeRanges: function (defaultTimeRanges) {
-        if (defaultTimeRanges) {
-            var filter = _.find(this.filters, function (filter) {
-                return filter.type === 'timeRange' && filter.fieldName === defaultTimeRanges.field;
-            });
-            if (filter) {
-                this.activateTimeRange(
-                    filter.id,
-                    defaultTimeRanges.range,
-                    defaultTimeRanges.comparisonRange
-                );
-            }
-        }
-    },
-    /**
-     * Create a new filter of type 'favorite' and toggle it.
-     * It belongs to the unique group of favorites.
-     *
-     * @private
-     * @param {Object} favorite
-     */
-    _addNewFavorite: function (favorite) {
-        var id = _.uniqueId('__filter__');
-        favorite.id = id;
-        favorite.groupId = this._getGroupIdOfType('favorite');
-        this.filters[id] = favorite;
-        this.toggleFilter(favorite.id);
-    },
-    /**
-     * Computes the string representation of the current domain associated to a date filter
-     * starting from its currentOptionIds.
-     *
-     * @param {Object} filter
-     * @returns {string}
-     */
-    _computeDateFilterDomain: function (filter) {
-        const domains = [];
-        const p = _.partition([...filter.currentOptionIds], optionId =>
-            OPTION_GENERATORS.find(o => o.optionId === optionId).groupId === 1);
-        const yearIds = p[1];
-        const otherOptionIds = p[0];
-        // the following case corresponds to years selected only
-        if (otherOptionIds.length === 0) {
-            yearIds.forEach(yearId => {
-                const d = filter.basicDomains[yearId];
-                domains.push(d.domain);
-            });
-        } else {
-            otherOptionIds.forEach(optionId => {
-                yearIds.forEach(yearId => {
-                    const d = filter.basicDomains[yearId + '__' + optionId];
-                    domains.push(d.domain);
-                });
-            });
-        }
-        return pyUtils.assembleDomains(domains, 'OR');
-    },
-    /**
-     * Add a new empty group to this.groups of a specified type.
-     *
-     * @private
-     * @param {string} type
-     */
-    _createEmptyGroup: function (type) {
-        var id = _.uniqueId('__group__');
-        this.groups[id] = {
-            id: id,
-            type: type,
-            activeFilterIds: [],
-        };
-    },
-    /**
-     * Using a list of 'prefilters', create a new group in this.groups and a new
-     * filter for each prefilter. The new filters are put in the new group.
-     *
-     * @private
-     * @param {Object[]} group, list of 'prefilters'
-     */
-    _createGroupOfFilters: function (group) {
-        var self= this;
-        var type;
-        var groupId = _.uniqueId('__group__');
-        group.forEach(function (filter) {
-            var id = _.uniqueId('__filter__');
-            filter.id = id;
-            filter.groupId = groupId;
-            type = filter.type;
-            self.filters[id] = filter;
-        });
-        this.groups[groupId] = {
-            id: groupId,
-            type: type,
-            activeFilterIds: [],
-        };
-    },
-    /**
-     * Add a group of type 'timeRange' in this.groups and generate a filter
-     * of the same type for each suitable field in this.fields. The new filters
-     * are put in the new group.
-     *
-     * @private
-     */
-    _createGroupOfTimeRanges: function () {
-        var self = this;
-        var timeRanges = [];
-        Object.keys(this.fields).forEach(function (fieldName) {
-            var field = self.fields[fieldName];
-            var fieldType = field.type;
-            if (_.contains(['date', 'datetime'], fieldType) && field.sortable) {
-                timeRanges.push({
-                    type: 'timeRange',
-                    description: field.string,
-                    fieldName : fieldName,
-                    fieldType: fieldType,
-                    timeRangeId: false,
-                    comparisonTimeRangeId: false,
-                    defaultTimeRangeId: DEFAULT_TIMERANGE,
-                    timeRangeOptions: TIME_RANGE_OPTIONS,
-                    comparisonTimeRangeOptions: COMPARISON_TIME_RANGE_OPTIONS
-                });
-            }
-        });
-        if (timeRanges.length) {
-            this._createGroupOfFilters(timeRanges);
-        } else {
-            // create empty timeRange group
-            this._createEmptyGroup('timeRange');
-        }
-    },
-    /**
-     * Create a new groupNumber not already used elsewhere.
-     * Group numbers are used to separate graphically groups of items  in the
-     * search menus (filter menu, groupBy menu,...).
-     *
-     * @private
-     * @returns {number} groupNumber
-     */
-    _generateNewGroupNumber: function () {
-        var self = this;
-        var groupNumber = 1 + Object.keys(this.filters).reduce(
-            function (max, filterId) {
-                var filter = self.filters[filterId];
-                if (filter.groupNumber) {
-                    max = Math.max(filter.groupNumber, max);
-                }
-                return max;
-            },
-            1
-        );
-        return groupNumber;
-    },
-    /**
-     * @private
-     * @param {Object} filter
-     * @returns {string} domain
-     */
-    _getAutoCompletionFilterDomain: function (filter) {
-        var domain = "";
-        var field = this.fields[filter.attrs.name];
-        // TODO: should not do that, the domain logic should be put somewhere else
-        var Obj = searchBarAutocompleteRegistry.getAny([filter.attrs.widget, field.type]);
-        if (Obj) {
-            var obj = new (Obj) (this, filter, field, this.actionContext);
-            domain = obj.getDomain(filter.autoCompleteValues);
-        }
-        return domain;
-    },
-    /**
-     * Return the string representation of a domain created by combining
-     * appropriately (with an 'AND') the domains coming from the active groups.
-     *
-     * @private
-     * @returns {string} the string representation of a domain
-     */
-    _getDomain: function () {
-        var self = this;
-        var domains = this.query.map(function (groupId) {
-            var group = self.groups[groupId];
-            return self._getGroupDomain(group);
-        });
-        return pyUtils.assembleDomains(domains, 'AND');
-    },
-    /**
-     * Return an array containing 'facets' used to create the content of the search bar.
-     *
-     * @returns {Object}
-     */
-    _getFacets: function () {
-        var self = this;
-        // resolve active filters for facets
-        return this.query.map(groupId => {
-            var group = self.groups[groupId];
-            var facet = _.extend({}, group);
-            if (group.type === 'groupBy') {
-                facet.filters = group.activeFilterIds.map(id => {
-                    let filter = _.extend({}, self.filters[id[0]]);
-                    if (filter.hasOptions) {
-                        filter.optionId = id[1];
-                    }
-                    return filter;
-                });
-            } else {
-                facet.filters = _.compact(group.activeFilterIds.map(id => self.filters[id[0]]));
-            }
-            return facet;
-        });
-    },
-    /**
-     * Return the context of the provided filter.
-     *
-     * @private
-     * @param {Object} filter
-     * @returns {Object} context
-     */
-    _getFilterContext: function (filter) {
-        var context = filter.context || {};
-
-        // for <field> nodes, a dynamic context (like context="{'field1': self}")
-        // should set {'field1': [value1, value2]} in the context
-        if (filter.type === 'field' && filter.attrs.context) {
-            context = pyUtils.eval('context', filter.attrs.context, {
-                self: _.map(filter.autoCompleteValues, function (autoCompleteValue) {
-                    return autoCompleteValue.value;
-                }),
-            });
-        }
-        // the following code aims to restore this:
-        // https://github.com/odoo/odoo/blob/12.0/addons/web/static/src/js/views/search/search_inputs.js#L498
-        // this is required for the helpdesk tour to pass
-        // this seems weird to only do that for m2o fields, but a test fails if
-        // we do it for other fields (my guess being that the test should simply
-        // be adapted)
-        if (filter.type === 'field' && filter.isDefault) {
-            if (this.fields[filter.attrs.name].type === 'many2one') {
-                var value = filter.defaultValue;
-                // the following if required to make the main_flow_tour pass (see
-                // https://github.com/odoo/odoo/blob/12.0/addons/web/static/src/js/views/search/search_inputs.js#L461)
-                if (_.isArray(filter.defaultValue)) {
-                    value = filter.defaultValue[0];
-                }
-                context['default_' + filter.attrs.name] = value;
-            }
-        }
-        return context;
-    },
-    /**
-     * Compute (if possible) the domain of the provided filter.
-     *
-     * @private
-     * @param {Object} filter
-     * @returns {string|undefined} domain, string representation of a domain
-     */
-    _getFilterDomain: function (filter) {
-        let domain;
-        if (filter.type === 'filter') {
-            domain = filter.domain;
-            if (filter.hasOptions) {
-                domain = this._computeDateFilterDomain(filter);
-            }
-        } else if (filter.type === 'favorite') {
-            domain = filter.domain;
-        } else if (filter.type === 'field') {
-            domain = filter.domain;
-        }
-        return domain;
-    },
-    /**
-     * Compute the groupBys (if possible) of the provided filter.
-     *
-     * @private
-     * @param {Array} filterId
-     * @returns {string[]|undefined} groupBys
-     */
-    _getFilterGroupBys: function (filterId) {
-        var groupBys;
-        var filter = this.filters[filterId[0]];
-        if (filter.type === 'groupBy') {
-            var optionId = filterId[1];
-            var groupBy = filter.fieldName;
-            if (optionId) {
-                groupBy = groupBy + ':' + optionId;
-            }
-            groupBys = [groupBy];
-        }
-        if (filter.type === 'favorite') {
-            groupBys = filter.groupBys;
-        }
-        return groupBys;
-    },
-    /**
-     * Return the concatenation of groupBys comming from the active filters.
-     * The array this.query encoding the order in which the groups have been
-     * activated, the results respect the appropriate logic: the groupBys
-     * coming from an active favorite (if any) come first, then come the
-     * groupBys comming from the active filters of type 'groupBy'.
-     *
-     * @private
-     * @returns {string[]} groupBys
-     */
-    _getGroupBy: function () {
-        var self = this;
-        var groupBys = this.query.reduce(
-            function (acc, groupId) {
-                var group = self.groups[groupId];
-                return acc.concat(self._getGroupGroupBys(group));
-            },
-            []
-        );
-        return groupBys;
-    },
-    /**
-     * Return the list of the contexts of the filters acitve in the given
-     * group.
-     *
-     * @private
-     * @param {Object} group
-     * @returns {Object[]}
-     */
-    _getGroupContexts: function (group) {
-        var self = this;
-        var contexts = group.activeFilterIds.map(function (filterId) {
-            var filter = self.filters[filterId[0]];
-            return self._getFilterContext(filter);
-        });
-        return _.compact(contexts);
-    },
-    /**
-     * Return the string representation of a domain created by combining
-     * appropriately (with an 'OR') the domains coming from the filters
-     * active in the given group.
-     *
-     * @private
-     * @param {Object} group
-     * @returns {string} string representation of a domain
-     */
-    _getGroupDomain: function (group) {
-        var self = this;
-        var domains = group.activeFilterIds.map(function (filterId) {
-            var filter = self.filters[filterId[0]];
-            return self._getFilterDomain(filter);
-        });
-        return pyUtils.assembleDomains(_.compact(domains), 'OR');
-    },
-    /**
-     * Return the groupBys coming form the filters active in the given group.
-     *
-     * @private
-     * @param {Object} group
-     * @returns {string[]}
-     */
-    _getGroupGroupBys: function (group) {
-        var self = this;
-        var groupBys = group.activeFilterIds.reduce(
-            function (acc, filterId) {
-                acc = acc.concat(self._getFilterGroupBys(filterId));
-                return acc;
-            },
-            []
-        );
-        return _.compact(groupBys);
-    },
-    /**
-     * Return the id of the group with the provided type.
-     *
-     * @private
-     * @param {'groupBy'|'favorite'|'timeRange'} type
-     * @returns {string}
-     */
-    _getGroupIdOfType: function (type) {
-        var self = this;
-        return _.find(Object.keys(this.groups), function (groupId) {
-            var group = self.groups[groupId];
-            return group.type === type;
-        });
-    },
-    /**
-     * Used to get the key orderedBy of a favorite.
-     *
-     * @private
-     * @returns {Object[]|undefined} orderedBy
-     */
-    _getOrderedBy: function () {
-        var orderedBy;
-        var id = this._getGroupIdOfType('favorite');
-        if (this.query.indexOf(id) !== -1) {
-            // if we are here, this means that the group of favorite is
-            // active and activeFilterIds is a list of length one.
-            var group = this.groups[id];
-            var activeFavoriteId = group.activeFilterIds[0][0];
-            var favorite = this.filters[activeFavoriteId];
-            if (favorite.orderedBy && favorite.orderedBy.length) {
-                orderedBy = favorite.orderedBy;
-            }
-        }
-        return orderedBy;
-    },
-    /**
-     * Return the list of the contexts of active filters.
-     *
-     * @private
-     * @returns {Object[]}
-     */
-    _getQueryContext: function () {
-        var self = this;
-        var contexts = this.query.reduce(
-            function (acc, groupId) {
-                var group = self.groups[groupId];
-                acc = acc.concat(self._getGroupContexts(group));
-                return acc;
-            },
-            []
-        );
-        return _.compact(contexts);
-    },
-    /**
-     * Return an empty object or an object with a key timeRangeMenuData
-     * containing info on time ranges and their descriptions if a filter of type
-     * 'timeRange' is activated (only one can be).
-     * The key timeRange and comparisonTimeRange will be string or array
-     * representation of domains according to the value of evaluation:
-     * array if evaluation is true, string if false.
-     *
-     * @private
-     * @param {boolean} [evaluation=false]
-     * @returns {Object}
-     */
-    _getTimeRangeMenuData: function (evaluation) {
-        var context = {};
-        // groupOfTimeRanges can be undefined in case with withSearchBar is false
-        var groupOfTimeRanges = this.groups[this._getGroupIdOfType('timeRange')];
-        if (groupOfTimeRanges && groupOfTimeRanges.activeFilterIds.length) {
-            var filter = this.filters[groupOfTimeRanges.activeFilterIds[0][0]];
-
-            var comparisonTimeRange = "[]";
-            var comparisonTimeRangeDescription;
-
-            var timeRange = Domain.prototype.constructDomain(
-                    filter.fieldName,
-                    filter.timeRangeId,
-                    filter.fieldType
-                );
-            var timeRangeDescription = _.find(filter.timeRangeOptions, function (option) {
-                return option.optionId === filter.timeRangeId;
-            }).description.toString();
-            if (filter.comparisonTimeRangeId) {
-                comparisonTimeRange = Domain.prototype.constructDomain(
-                    filter.fieldName,
-                    filter.timeRangeId,
-                    filter.fieldType,
-                    filter.comparisonTimeRangeId
-                );
-                comparisonTimeRangeDescription = _.find(filter.comparisonTimeRangeOptions, function (comparisonOption) {
-                    return comparisonOption.optionId === filter.comparisonTimeRangeId;
-                }).description.toString();
-            }
-            if (evaluation) {
-                timeRange = Domain.prototype.stringToArray(timeRange);
-                comparisonTimeRange = Domain.prototype.stringToArray(comparisonTimeRange);
-            }
-            context = {
-                timeRangeMenuData: {
-                    comparisonField: filter.fieldName,
-                    timeRange: timeRange,
-                    timeRangeDescription: timeRangeDescription,
-                    comparisonTimeRange: comparisonTimeRange,
-                    comparisonTimeRangeDescription: comparisonTimeRangeDescription,
-                }
-            };
-        }
-        return context;
-    },
-    /**
-     * Insert a combination of type [filterId, optionId] in activeFilterIds for
-     * a corresponding filter of type 'groupBy' with options.
-     * The array activeFilterIds is by construction of the form
-     *
-     * A1 'concat' A2 'concat' A3
-     *
-     * where filterId does not occur in the arrays A1 and A3 (possibly empty) and
-     * A2 = [[filterId, optionId_1], ..., [filterId, optionId_n]] (possibly empty).
-     *
-     * The idea of the function below is to insert [filterId, optionId] at the end
-     * of activeFilterIds if A2 is empty and inside A2 otherwise while keeping A2 ordered
-     * for the natural order on option ids: 'year' < 'quarter' < ... < 'day'.
-     *
-     * @private
-     * @param {Array[]} activeFilterIds
-     * @param {Array} combinationId
-     * @returns {Array[]}
-     */
-    _insert(activeFilterIds, combinationId) {
-        const filterId = combinationId[0];
-        let firstIndex = -1;
-        let lastIndex = -1;
-        activeFilterIds.forEach((cId, i) => {
-            if (cId[0] === filterId) {
-                firstIndex = firstIndex === -1 ? i : firstIndex;
-                lastIndex = i;
-            }
-        });
-        if (firstIndex === -1) { // case A2 empty
-            activeFilterIds.push(combinationId);
-        } else { // case A2 non empty
-            const a1 = activeFilterIds.slice(0, firstIndex);
-            const a2 = activeFilterIds.slice(firstIndex, lastIndex + 1);
-            const a3 = activeFilterIds.slice(lastIndex + 1);
-
-            a2.push(combinationId);
-            a2.sort((c1, c2) => rank(c1[1]) - rank(c2[1]));
-
-            activeFilterIds = [].concat(a1, a2, a3);
-        }
-        return activeFilterIds;
-    },
-    /**
-     * Load custom filters in db, then create a group of type 'favorite' and a
-     * filter of type 'favorite' for each loaded custom filters.
-     * The new filters are put in the new group.
-     * Finally, if there exists (a necessarily unique) default favorite, it is activated
-     * if this.activateDefaultFavorite is true.
-     *
-     * @private
-     * @returns {Promise}
-     */
-    _loadFavorites: function () {
-        var self = this;
-        var def = this.loadFilters(this.modelName,this.actionId).then(function (favorites) {
-            if (favorites.length) {
-                favorites = favorites.map(function (favorite) {
-                    var userId = favorite.user_id ? favorite.user_id[0] : false;
-                    var groupNumber = userId ? 1 : 2;
-                    var context = pyUtils.eval('context', favorite.context, session.user_context);
-                    var groupBys = [];
-                    if (context.group_by) {
-                        groupBys = context.group_by;
-                        delete context.group_by;
-                    }
-                    var sort = JSON.parse(favorite.sort);
-                    var orderedBy = sort.map(function (order) {
-                        var fieldName;
-                        var asc;
-                        var sqlNotation = order.split(' ');
-                        if (sqlNotation.length > 1) {
-                            // regex: \fieldName (asc|desc)?\
-                            fieldName = sqlNotation[0];
-                            asc = sqlNotation[1] === 'asc';
-                        } else {
-                            // legacy notation -- regex: \-?fieldName\
-                            fieldName = order[0] === '-' ? order.slice(1) : order;
-                            asc = order[0] === '-' ? false : true;
-                        }
-                        return {
-                            name: fieldName,
-                            asc: asc,
-                        };
-                    });
-                    return {
-                        type: 'favorite',
-                        description: favorite.name,
-                        isRemovable: true,
-                        groupNumber: groupNumber,
-                        isDefault: favorite.is_default,
-                        domain: favorite.domain,
-                        groupBys: groupBys,
-                        // we want to keep strings as long as possible
-                        context: favorite.context,
-                        orderedBy: orderedBy,
-                        userId: userId,
-                        serverSideId: favorite.id,
-                    };
-                });
-                self._createGroupOfFilters(favorites);
-                if (self.activateDefaultFavorite) {
-                    var defaultFavorite = _.find(self.filters, function (filter) {
-                        return filter.type === 'favorite' && filter.isDefault;
-                    });
-                    if (defaultFavorite) {
-                        self.toggleFilter(defaultFavorite.id);
-                    }
-                }
-            } else {
-                self._createEmptyGroup('favorite');
-            }
-        });
-        return def;
-    },
-    /**
-     * Load search defaults and set the `domain` key on filter (of type `field`).
-     * Some search defaults need to fetch data (like m2o for example) so this
-     * is asynchronous.
-     *
-     * @private
-     * @returns {Promise[]}
-     */
-    _loadSearchDefaults: function () {
-        var self = this;
-        var defs = [];
-        _.each(this.filters, function (filter) {
-            if (filter.type === 'field' && filter.isDefault) {
-                var def;
-                var field = self.fields[filter.attrs.name];
-                var value = filter.defaultValue;
-                if (field.type === 'many2one') {
-                    if (value instanceof Array) {
-                        // M2O search fields do not currently handle multiple default values
-                        // there are many cases of {search_default_$m2ofield: [id]}, need
-                        // to handle this as if it were a single value.
-                        value = value[0];
-                    }
-                    def = self._rpc({
-                        model: field.relation,
-                        method: 'name_get',
-                        args: [value],
-                        context: self.actionContext,
-                    }).then(function (result) {
-                        var autocompleteValue = {
-                            label: result[0][1],
-                            value: value,
-                        };
-                        filter.autoCompleteValues.push(autocompleteValue);
-                        filter.domain = self._getAutoCompletionFilterDomain(filter);
-                    });
-                } else {
-                    var autocompleteValue;
-                    if (field.type === 'selection') {
-                        var match = _.find(field.selection, function (sel) {
-                            return sel[0] === value;
-                        });
-                        autocompleteValue = {
-                            label: match[1],
-                            value: match[0],
-                        };
-                    } else {
-                        autocompleteValue = {
-                            label: String(value),
-                            value: value,
-                        };
-                    }
-                    filter.autoCompleteValues.push(autocompleteValue);
-                    filter.domain = self._getAutoCompletionFilterDomain(filter);
-                }
-                if (def) {
-                    defs.push(def);
-                }
-            }
-        });
-        return defs;
-    },
-    /**
-     * Compute the search Query and save it as an ir.filter in db.
-     * No evaluation of domains is done in order to keep them dynamic.
-     * If the operatio is successful, a new filter of type 'favorite' is
-     * created and activated.
-     *
-     * @private
-     * @param {Object} favorite
-     * @returns {Promise}
-     */
-    _saveQuery: function (favorite) {
-        var self = this;
-        var userContext = session.user_context;
-        var controllerQueryParams;
-        this.trigger_up('get_controller_query_params', {
-            callback: function (state) {
-                controllerQueryParams = state;
-            },
-        });
-        var queryContext = this._getQueryContext();
-        var timeRangeMenuInfo = this._getTimeRangeMenuData(false);
-        var context = pyUtils.eval(
-            'contexts',
-            [userContext, controllerQueryParams.context, timeRangeMenuInfo].concat(queryContext)
-        );
-        context = _.omit(context, Object.keys(userContext));
-        var groupBys = this._getGroupBy();
-        if (groupBys.length) {
-            context.group_by = groupBys;
-        }
-        var domain = this._getDomain();
-        var userId = favorite.isShared ? false : session.uid;
-        var orderedBy = this._getOrderedBy() || [];
-        if (controllerQueryParams.orderedBy) {
-            orderedBy = controllerQueryParams.orderedBy;
-        }
-        var sort = orderedBy.map(function (order) {
-                return order.name + ((order.asc === false) ? " desc" : "");
-        });
-
-        var irFilter = {
-            name: favorite.description,
-            context: context,
-            domain: domain,
-            is_default: favorite.isDefault,
-            user_id: userId,
-            model_id: this.modelName,
-            action_id: this.actionId,
-            sort: JSON.stringify(sort),
-        };
-        return this.createFilter(irFilter).then(function (serverSideId) {
-            // we don't want the groupBys to be located in the context in control panel model
-            delete context.group_by;
-            favorite.isRemovable = true;
-            favorite.groupNumber = userId ? 1 : 2;
-            favorite.context = context;
-            favorite.groupBys = groupBys;
-            favorite.domain = domain;
-            favorite.orderedBy = orderedBy;
-            // not sure keys are usefull
-            favorite.userId = userId;
-            favorite.serverSideId = serverSideId;
-            self._addNewFavorite(favorite);
-        });
-    },
-});
-
-return ControlPanelModel;
-
-});
diff --git a/addons/web/static/src/js/views/control_panel/control_panel_renderer.js b/addons/web/static/src/js/views/control_panel/control_panel_renderer.js
deleted file mode 100644
index 12d120b53ab..00000000000
--- a/addons/web/static/src/js/views/control_panel/control_panel_renderer.js
+++ /dev/null
@@ -1,387 +0,0 @@
-odoo.define('web.ControlPanelRenderer', function (require) {
-"use strict";
-
-var config = require('web.config');
-var data = require('web.data');
-var FavoriteMenu = require('web.FavoriteMenu');
-var FilterMenu = require('web.FilterMenu');
-var GroupByMenu = require('web.GroupByMenu');
-var mvc = require('web.mvc');
-var SearchBar = require('web.SearchBar');
-var TimeRangeMenu = require('web.TimeRangeMenu');
-
-var Renderer = mvc.Renderer;
-
-var ControlPanelRenderer = Renderer.extend({
-    template: 'ControlPanel',
-    custom_events: {
-        get_action_info: '_onGetActionInfo',
-    },
-    events: _.extend({}, Renderer.prototype.events, {
-        'click .o_searchview_more': '_onMore',
-    }),
-
-    /**
-     * @override
-     * @param {Object} [params.action] current action if any
-     * @param {Object} [params.context]
-     * @param {Object[]} [params.breadcrumbs=[]] list of breadcrumbs elements
-     * @param {boolean} [params.withBreadcrumbs=false] if false, breadcrumbs
-     *   won't be rendered
-     * @param {boolean} [params.withSearchBar=false] if false, no search bar
-     *   is rendered
-     * @param {string[]} [params.searchMenuTypes=[]] determines the search menus
-     *   that are displayed.
-     * @param {String} [params.template] the QWeb template to render the
-     *   ControlPanel. By default, the template 'ControlPanel' will be used.
-     * @param {string} [params.title=''] the title visible in control panel
-     */
-    init: function (parent, state, params) {
-        this._super.apply(this, arguments);
-        this._breadcrumbs = params.breadcrumbs || [];
-        this._title = params.title || '';
-        this.withBreadcrumbs = params.withBreadcrumbs;
-        this.withSearchBar = params.withSearchBar;
-        if (params.template) {
-            this.template = params.template;
-        }
-        this.context = params.context;
-
-        this.$subMenus = null;
-        this.action = params.action;
-        this.displaySearchMenu = true;
-        this.isMobile = config.device.isMobile;
-        this.menusSetup = false;
-        this.searchMenuTypes = params.searchMenuTypes || [];
-        this.subMenus = {};
-    },
-    /**
-     * Render the control panel and create a dictionnary of its exposed elements.
-     *
-     * @override
-     */
-    start: function () {
-        var self = this;
-
-        // exposed jQuery nodesets
-        this.nodes = {
-            $buttons: this.$('.o_cp_buttons'),
-            $pager: this.$('.o_cp_pager'),
-            $sidebar: this.$('.o_cp_sidebar'),
-            $switch_buttons: this.$('.o_cp_switch_buttons'),
-        };
-
-        // if we don't use the default search bar and buttons, we expose the
-        // corresponding areas for custom content
-        if (!this.withSearchBar) {
-            this.nodes.$searchview = this.$('.o_cp_searchview');
-        }
-        if (this.searchMenuTypes.length === 0) {
-            this.nodes.$searchview_buttons = this.$('.o_search_options');
-        }
-
-        if (this.withBreadcrumbs) {
-            this._renderBreadcrumbs();
-        }
-
-        var superDef = this._super.apply(this, arguments);
-        var searchDef = this._renderSearch();
-        return Promise.all([superDef, searchDef]).then(function () {
-            self._setSearchMenusVisibility();
-        });
-    },
-    /**
-     * @override
-     */
-    on_attach_callback: function () {
-        this._focusSearchInput();
-    },
-    /**
-     * @override
-     */
-    on_detach_callback: function () {
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @returns {Object|undefined}
-     */
-    getLastFacet: function () {
-        return this.state.facets.slice(-1)[0];
-    },
-    /**
-     * This function is called when actions call 'updateControlPanel' with
-     * custom contents to insert in the exposed areas.
-     *
-     * @param {Object} status
-     * @param {Object} [status.cp_content] dictionnary containing the jQuery
-     *   elements to insert in the exposed areas
-     * @param {string} [status.breadcrumbs] the breadcrumbs to display before
-     *   the current controller
-     * @param {string} [status.title] the title of the current controller, to
-     *   display at the end of the breadcrumbs
-     * @param {Object} [options]
-     * @param {Boolean} [options.clear=true] set to false to keep control panel
-     *   elements that are not in status.cp_content (useful for partial updates)
-     */
-    updateContents: function (status, options) {
-        var new_cp_content = status.cp_content || {};
-        var clear = 'clear' in (options || {}) ? options.clear : true;
-
-        if (this.withBreadcrumbs) {
-            this._breadcrumbs = status.breadcrumbs || this._breadcrumbs;
-            this._title = status.title || this._title;
-            this._renderBreadcrumbs();
-        }
-
-        if (clear) {
-            this._detachContent(this.nodes);
-        } else {
-            this._detachContent(_.pick(this.nodes, _.keys(new_cp_content)));
-        }
-        this._attachContent(new_cp_content);
-    },
-    /**
-     * Update the state of the renderer state. It retriggers a full rerendering.
-     *
-     * @param {Object} state
-     * @returns {Promise}
-     */
-    updateState: function (state) {
-        this.state = state;
-        return this._renderSearch();
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @param {Object} content dictionnary of jQuery elements to attach, whose
-     *   keys are jQuery nodes identifiers in this.nodes
-     */
-    _attachContent: function (content) {
-        for (var $element in content) {
-            var $nodeset = content[$element];
-            if ($nodeset && this.nodes[$element]) {
-                this.nodes[$element].append($nodeset);
-            }
-        }
-    },
-    /**
-     * @private
-     * @param {Object} content subset of this.nodes to detach
-     */
-    _detachContent: function (content) {
-        for (var $element in content) {
-            content[$element].contents().detach();
-        }
-    },
-    /**
-     * @private
-     */
-    _focusSearchInput: function () {
-        if (this.withSearchBar && !config.device.isMobileDevice) {
-            // in mobile mode, we would rather not focus manually the
-            // input, because it opens up the integrated keyboard, which is
-            // not what you expect when you just selected a filter.
-            this.searchBar.focus();
-        }
-    },
-    /**
-     * @private
-     * @param {string} menuType
-     * @returns {Objects[]} menuItems
-     */
-    _getMenuItems: function (menuType) {
-        var menuItems;
-        if (menuType === 'filter') {
-            menuItems = this.state.filters;
-        }
-        if (menuType === 'groupBy') {
-            menuItems = this.state.groupBys;
-        }
-        if (menuType === 'timeRange') {
-            menuItems = this.state.timeRanges;
-        }
-        if (menuType === 'favorite') {
-            menuItems = this.state.favorites;
-        }
-        return menuItems;
-    },
-    /**
-     * @private
-     * @returns {jQueryElement}
-     */
-    _getSubMenusPlace: function () {
-        return $('<div>').appendTo(this.$('.o_search_options'));
-    },
-    /**
-     * @private
-     */
-    _renderBreadcrumbs: function () {
-        var self = this;
-        var breadcrumbsDescriptors = this._breadcrumbs.concat({title: this._title});
-        var breadcrumbs = breadcrumbsDescriptors.map(function (bc, index) {
-            return self._renderBreadcrumbsItem(bc, index, breadcrumbsDescriptors.length);
-        });
-        this.$('.breadcrumb').html(breadcrumbs);
-    },
-    /**
-     * Render a breadcrumbs' li jQuery element.
-     *
-     * @private
-     * @param {Object} bc
-     * @param {string} bc.title
-     * @param {string} bc.controllerID
-     * @param {integer} index
-     * @param {integer} length
-     * @returns {jQueryElement} $bc
-     */
-    _renderBreadcrumbsItem: function (bc, index, length) {
-        var self = this;
-        var is_last = (index === length-1);
-        var li_content = bc.title && _.escape(bc.title.trim()) || data.noDisplayContent;
-        var $bc = $('<li>', {class: 'breadcrumb-item'})
-            .append(is_last ? li_content : $('<a>', {href: '#'}).html(li_content))
-            .toggleClass('active', is_last);
-        if (!is_last) {
-            $bc.click(function (ev) {
-                ev.preventDefault();
-                self.trigger_up('breadcrumb_clicked', {controllerID: bc.controllerID});
-            });
-        }
-
-        var secondLast = index === length - 2;
-        if (secondLast) {
-            $bc.attr('accessKey', 'b');
-        }
-
-        return $bc;
-    },
-    /**
-     * Renderer the search bar and the search menus
-     *
-     * @private
-     * @returns {Promise}
-     */
-    _renderSearch: function () {
-        var defs = [];
-        if (this.menusSetup) {
-            this._updateMenus();
-        } else {
-            this.menusSetup = true;
-            defs = defs.concat(this._setupMenus());
-        }
-        if (this.withSearchBar) {
-            defs.push(this._renderSearchBar());
-        }
-        return Promise.all(defs).then(this._focusSearchInput.bind(this));
-    },
-    /**
-     * @private
-     * @returns {Promise}
-     */
-    _renderSearchBar: function () {
-        // TODO: might need a reload instead of a destroy/instantiate
-        var oldSearchBar = this.searchBar;
-        this.searchBar = new SearchBar(this, {
-            context: this.context,
-            facets: this.state.facets,
-            fields: this.state.fields,
-            filterFields: this.state.filterFields,
-        });
-        return this.searchBar.appendTo(this.$('.o_searchview')).then(function () {
-            if (oldSearchBar) {
-                oldSearchBar.destroy();
-            }
-        });
-    },
-    /**
-     * Hide or show the search menus according to this.displaySearchMenu.
-     *
-     * @private
-     */
-    _setSearchMenusVisibility: function () {
-        this.$('.o_searchview_more')
-            .toggleClass('fa-search-plus', !this.displaySearchMenu)
-            .toggleClass('fa-search-minus', this.displaySearchMenu);
-        this.$('.o_search_options')
-            .toggleClass('o_hidden', !this.displaySearchMenu);
-    },
-    /**
-     * Create a new menu of the given type and append it to this.$subMenus.
-     * This menu is also added to this.subMenus.
-     *
-     * @private
-     * @param {string} menuType
-     * @returns {Promise}
-     */
-    _setupMenu: function (menuType) {
-        var Menu;
-        var menu;
-        if (menuType === 'filter') {
-            Menu = FilterMenu;
-        }
-        if (menuType === 'groupBy') {
-            Menu = GroupByMenu;
-        }
-        if (menuType === 'timeRange') {
-            Menu = TimeRangeMenu;
-        }
-        if (menuType === 'favorite') {
-            Menu = FavoriteMenu;
-        }
-        if (_.contains(['filter', 'groupBy', 'timeRange'], menuType)) {
-            menu = new Menu(this, this._getMenuItems(menuType), this.state.fields);
-        }
-        if (menuType === 'favorite') {
-            menu = new Menu(this, this._getMenuItems(menuType), this.action);
-        }
-        this.subMenus[menuType] = menu;
-        return menu.appendTo(this.$subMenus);
-    },
-    /**
-     * Instantiate the search menu determined by this.searchMenuTypes.
-     *
-     * @private
-     * @returns {Promise[]}
-     */
-    _setupMenus: function () {
-        this.$subMenus = this._getSubMenusPlace();
-        return this.searchMenuTypes.map(this._setupMenu.bind(this));
-    },
-    /**
-     * Update the search menus.
-     *
-     * @private
-     */
-    _updateMenus: function () {
-        var self = this;
-        this.searchMenuTypes.forEach(function (menuType) {
-            self.subMenus[menuType].update(self._getMenuItems(menuType));
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * Toggle the search menus visibility.
-     *
-     * @private
-     */
-    _onMore: function () {
-        this.displaySearchMenu = !this.displaySearchMenu;
-        this._setSearchMenusVisibility();
-    },
-});
-
-return ControlPanelRenderer;
-
-});
diff --git a/addons/web/static/src/js/views/control_panel/control_panel_view.js b/addons/web/static/src/js/views/control_panel/control_panel_view.js
deleted file mode 100644
index c2d4e3ebf33..00000000000
--- a/addons/web/static/src/js/views/control_panel/control_panel_view.js
+++ /dev/null
@@ -1,343 +0,0 @@
-odoo.define('web.ControlPanelView', function (require) {
-"use strict";
-
-var ControlPanelController = require('web.ControlPanelController');
-var ControlPanelModel = require('web.ControlPanelModel');
-var ControlPanelRenderer = require('web.ControlPanelRenderer');
-var controlPanelViewParameters = require('web.controlPanelViewParameters');
-var mvc = require('web.mvc');
-var pyUtils = require('web.py_utils');
-var viewUtils = require('web.viewUtils');
-var Domain = require('web.Domain');
-
-var DEFAULT_INTERVAL = controlPanelViewParameters.DEFAULT_INTERVAL;
-var DEFAULT_PERIOD = controlPanelViewParameters.DEFAULT_PERIOD;
-var INTERVAL_OPTIONS = controlPanelViewParameters.INTERVAL_OPTIONS;
-const OPTION_GENERATORS = controlPanelViewParameters.OPTION_GENERATORS;
-
-var Factory = mvc.Factory;
-
-var ControlPanelView = Factory.extend({
-    config: _.extend({}, Factory.prototype.config, {
-        Controller: ControlPanelController,
-        Model: ControlPanelModel,
-        Renderer: ControlPanelRenderer,
-    }),
-
-    /**
-     * @override
-     * @param {Object} [params={}]
-     * @param {Object} [params.action={}]
-     * @param {Object} [params.context={}]
-     * @param {string} [params.domain=[]]
-     * @param {string} [params.modelName]
-     * @param {string[]} [params.searchMenuTypes=[]]
-     *   determines search menus displayed.
-     * @param {Object} [params.state] used to determine the control panel model
-     *   essential content at load. For instance, state can be the state of an
-     *   other control panel model that we want to use.
-     * @param {string} [params.title] the name of the action, to display in the
-     *   breadcrumb
-     * @param {string} [params.template] the QWeb template to render
-     * @param {Object} [params.viewInfo={arch: '<search/>', fields: {}}] a
-     *   search fieldsview
-     * @param {string} [params.viewInfo.arch]
-     * @param {boolean} [params.withBreadcrumbs=true] if set to false,
-     *   breadcrumbs won't be rendered
-     * @param {boolean} [params.withSearchBar=true] if set to false, no default
-     *   search bar will be rendered
-     * @param {Object[]} [params.dynamicFilters=[]] filters to add to the
-     *   search (in addition to those described in the arch), each filter being
-     *   an object with keys 'description' (what is displayed in the searchbar)
-     *   and 'domain'
-     */
-    init: function (params) {
-        var self = this;
-        this._super();
-        params = params || {};
-        var viewInfo = params.viewInfo || {arch: '<search/>', fields: {}};
-        var context = _.extend({}, params.context);
-        var domain = params.domain || [];
-        var action = params.action || {};
-
-        this.searchDefaults = {};
-        Object.keys(context).forEach(function (key) {
-            var match = /^search_default_(.*)$/.exec(key);
-            if (match) {
-                self.searchDefaults[match[1]] = context[key];
-                delete context[key];
-            }
-        });
-
-        this.arch = viewUtils.parseArch(viewInfo.arch);
-        this.fields = viewInfo.fields;
-
-        this.referenceMoment = moment();
-
-        const setDescriptions = (options) => {
-            return options.map(o => {
-                const oClone = JSON.parse(JSON.stringify(o));
-                const description = o.description ?
-                                    o.description.toString () :
-                                    this.referenceMoment.clone().add(o.addParam).format(o.format);
-                return _.extend(oClone, {description:  description});
-            });
-        };
-        const process = (options) => {
-            return options.map(o => {
-                const date = this.referenceMoment.clone().set(o.setParam).add(o.addParam);
-                delete o.addParam;
-                o.setParam[o.granularity] = date[o.granularity]();
-                o.defaultYear = date.year();
-                return o;
-            });
-        }
-
-        this.optionGenerators = process(setDescriptions(OPTION_GENERATORS));
-        this.intervalOptions = setDescriptions(INTERVAL_OPTIONS);
-
-        this.controllerParams.modelName = params.modelName;
-
-        this.modelParams.context = context;
-        this.modelParams.domain = domain;
-        this.modelParams.modelName = params.modelName;
-        this.modelParams.actionId = action.id;
-        this.modelParams.fields = this.fields;
-
-        this.rendererParams.action = action;
-        this.rendererParams.breadcrumbs = params.breadcrumbs;
-        this.rendererParams.context = context;
-        this.rendererParams.searchMenuTypes = params.searchMenuTypes || [];
-        this.rendererParams.template = params.template;
-        this.rendererParams.title = params.title;
-        this.rendererParams.withBreadcrumbs = params.withBreadcrumbs !== false;
-        this.rendererParams.withSearchBar = 'withSearchBar' in params ? params.withSearchBar : true;
-
-        this.loadParams.withSearchBar = 'withSearchBar' in params ? params.withSearchBar : true;
-        this.loadParams.searchMenuTypes = params.searchMenuTypes || [];
-        this.loadParams.activateDefaultFavorite = params.activateDefaultFavorite;
-        if (this.loadParams.withSearchBar) {
-            if (params.state) {
-                this.loadParams.initialState = params.state;
-            } else {
-                // groups are determined in _parseSearchArch
-                this.loadParams.groups = [];
-                this.loadParams.timeRanges = context.time_ranges;
-                this._parseSearchArch(this.arch);
-            }
-        }
-
-        // add a filter group with the dynamic filters, if any
-        if (params.dynamicFilters && params.dynamicFilters.length) {
-            var dynamicFiltersGroup = params.dynamicFilters.map(function (filter) {
-                return {
-                    description: filter.description,
-                    domain: JSON.stringify(filter.domain),
-                    isDefault: true,
-                    type: 'filter',
-                };
-            });
-            this.loadParams.groups.unshift(dynamicFiltersGroup);
-        }
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @param {Object} child parsed arch node
-     * @returns {Object}
-     */
-    _evalArchChild: function (child) {
-        if (child.attrs.context) {
-            try {
-                var context = pyUtils.eval('context', child.attrs.context);
-                if (context.group_by) {
-                    // let us extract basic data since we just evaluated context
-                    // and use a correct tag!
-                    child.tag = 'groupBy';
-                    child.attrs.fieldName = context.group_by.split(':')[0];
-                    child.attrs.defaultInterval = context.group_by.split(':')[1];
-                }
-            } catch (e) {}
-        }
-        return child;
-    },
-    /**
-     * @private
-     * @param {Object} filter
-     * @param {Object} attrs
-     */
-    _extractAttributes: function (filter, attrs) {
-        filter.isDefault = this.searchDefaults[attrs.name] ? true : false;
-        filter.description = attrs.string ||
-                                attrs.help ||
-                                attrs.name ||
-                                attrs.domain ||
-                                'Ω';
-        if (attrs.invisible) {
-            filter.invisible = true;
-        }
-        if (filter.type === 'filter') {
-            if (filter.isDefault) {
-                filter.defaultRank = -5;
-            }
-            filter.domain = attrs.domain;
-            filter.context = pyUtils.eval('context', attrs.context);
-            if (attrs.date) {
-                filter.fieldName = attrs.date;
-                filter.fieldType = this.fields[attrs.date].type;
-                filter.hasOptions = true;
-                filter.options = this.optionGenerators;
-                filter.defaultOptionId = attrs.default_period ||
-                                            DEFAULT_PERIOD;
-                filter.currentOptionIds = new Set();
-                filter.basicDomains = this._getDateFilterBasicDomains(filter);
-            }
-        } else if (filter.type === 'groupBy') {
-            if (filter.isDefault) {
-                const val = this.searchDefaults[attrs.name];
-                filter.defaultRank = typeof val === 'number' ? val : 100;
-            }
-            filter.fieldName = attrs.fieldName;
-            filter.fieldType = this.fields[attrs.fieldName].type;
-            if (_.contains(['date', 'datetime'], filter.fieldType)) {
-                filter.hasOptions = true;
-                filter.options = this.intervalOptions;
-                filter.defaultOptionId = attrs.defaultInterval ||
-                                            DEFAULT_INTERVAL;
-                filter.currentOptionIds = new Set();
-            }
-        } else if (filter.type === 'field') {
-            if (filter.isDefault) {
-                filter.defaultRank = -10;
-            }
-            var field = this.fields[attrs.name];
-            filter.attrs = attrs;
-            filter.autoCompleteValues = [];
-            if (filter.isDefault) {
-                // on field, default can be used with a value
-                filter.defaultValue = this.searchDefaults[filter.attrs.name];
-            }
-            if (!attrs.string) {
-                attrs.string = field.string;
-            }
-        }
-    },
-    /**
-     * Constructs an object containing various domains based on this.referenceMoment and
-     * the field associated with the provided date filter.
-     *
-     * @private
-     * @param {Object} filter
-     * @returns {Object}
-     */
-    _getDateFilterBasicDomains: function (filter) {
-        const _constructBasicDomain = (y, o) => {
-            const setParam = Object.assign({}, y.setParam, o ? o.setParam : {});
-            const granularity = o ? o.granularity : y.granularity;
-            const date = this.referenceMoment.clone().set(setParam);
-            let leftBound = date.clone().startOf(granularity).locale('en');
-            let rightBound = date.clone().endOf(granularity).locale('en');
-
-            if (filter.fieldType === 'date') {
-                leftBound = leftBound.format("YYYY-MM-DD");
-                rightBound = rightBound.format("YYYY-MM-DD");
-            } else {
-                leftBound = leftBound.utc().format("YYYY-MM-DD HH:mm:ss");
-                rightBound = rightBound.utc().format("YYYY-MM-DD HH:mm:ss");
-            }
-            const domain = Domain.prototype.arrayToString([
-                '&',
-                [filter.fieldName, ">=", leftBound],
-                [filter.fieldName, "<=", rightBound]
-            ]);
-
-            let description;
-            if (o) {
-                description = o.description + " " + y.description;
-            } else {
-                description = y.description;
-            }
-
-            return { domain, description };
-        };
-
-        const domains = {};
-        this.optionGenerators.filter(y => y.groupId === 2).forEach(y => {
-            domains[y.optionId] = _constructBasicDomain(y);
-            this.optionGenerators.filter(y => y.groupId === 1).forEach(o => {
-                domains[y.optionId + "__" + o.optionId] = _constructBasicDomain(y, o);
-            });
-        });
-        return domains;
-    },
-    /**
-     * Parse the arch of a 'search' view.
-     *
-     * @private
-     * @param {Object} arch arch with root node <search>
-     */
-    _parseSearchArch: function (arch) {
-        var self = this;
-        // a searchview arch may contain a 'searchpanel' node, but this isn't
-        // the concern of the ControlPanelView (the SearchPanel will handle it).
-        // Ideally, this code should whitelist the tags to take into account
-        // instead of blacklisting the others, but with the current (messy)
-        // structure of a searchview arch, it's way simpler to do it that way.
-        var children = arch.children.filter(function (child) {
-            return child.tag !== 'searchpanel';
-        });
-        var preFilters = _.flatten(children.map(function (child) {
-            return child.tag !== 'group' ?
-                    self._evalArchChild(child) :
-                    child.children.map(self._evalArchChild);
-        }));
-        preFilters.push({tag: 'separator'});
-
-        var filter;
-        var currentTag;
-        var currentGroup = [];
-        var groupOfGroupBys = [];
-        var groupNumber = 1;
-
-        _.each(preFilters, function (preFilter) {
-            if (preFilter.tag !== currentTag || _.contains(['separator', 'field'], preFilter.tag)) {
-                if (currentGroup.length) {
-                    if (currentTag === 'groupBy') {
-                        groupOfGroupBys = groupOfGroupBys.concat(currentGroup);
-                    } else {
-                        self.loadParams.groups.push(currentGroup);
-                    }
-                }
-                currentTag = preFilter.tag;
-                currentGroup = [];
-                groupNumber++;
-            }
-            if (preFilter.tag !== 'separator') {
-                filter = {
-                    type: preFilter.tag,
-                    // we need to codify here what we want to keep from attrs
-                    // and how, for now I put everything.
-                    // In some sence, some filter are active (totally determined, given)
-                    // and others are passive (require input(s) to become determined)
-                    // What is the right place to process the attrs?
-                };
-                if (filter.type === 'filter' || filter.type === 'groupBy') {
-                    filter.groupNumber = groupNumber;
-                }
-                self._extractAttributes(filter, preFilter.attrs);
-                currentGroup.push(filter);
-            }
-        });
-        if (groupOfGroupBys.length) {
-            this.loadParams.groups.push(groupOfGroupBys);
-        }
-    },
-});
-
-return ControlPanelView;
-
-});
diff --git a/addons/web/static/src/js/views/control_panel/search/add_new_favorite_menu.js b/addons/web/static/src/js/views/control_panel/search/add_new_favorite_menu.js
deleted file mode 100644
index 6897b596471..00000000000
--- a/addons/web/static/src/js/views/control_panel/search/add_new_favorite_menu.js
+++ /dev/null
@@ -1,177 +0,0 @@
-odoo.define('web.AddNewFavoriteMenu', function (require) {
-"use strict";
-
-var core = require('web.core');
-var favoritesSubmenusRegistry = require('web.favorites_submenus_registry');
-var Widget = require('web.Widget');
-
-var _t = core._t;
-
-var AddNewFavoriteMenu = Widget.extend({
-    template: 'AddNewFavoriteMenu',
-    events: _.extend({}, Widget.prototype.events, {
-        'click .o_save_favorite': '_onSaveFavoriteClick',
-        'click .o_add_favorite.o_menu_header': '_onMenuHeaderClick',
-        'click input[type="checkbox"]': '_onCheckboxClick',
-        'keyup .o_save_name input': '_onKeyUp',
-    }),
-    /**
-     * @override
-     * @param {Object} params
-     * @param {Object} params.action
-     * @param {Object} params.favorites
-     */
-    init: function (parent, params) {
-        this._super(parent);
-        this.favorites = params.favorites;
-        this.action = params.action;
-        this.isOpen = false;
-    },
-    /**
-     * @override
-     */
-    start: function () {
-        this._render();
-        return this._super.apply(this, arguments);
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @param {Object} params
-     */
-    update: function (params) {
-        this.favorites = params.favorites;
-    },
-    /**
-     * Close the menu and re-render the widget.
-     */
-    closeMenu: function () {
-        this.isOpen = false;
-        this._render();
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     */
-    _render: function () {
-        this.renderElement();
-        if (this.isOpen) {
-            var $input = this.$('.o_favorite_name input.o_input');
-            $input.val(this.action.name);
-            $input.focus();
-        }
-    },
-    /**
-     * @private
-     */
-    _saveFavorite: function () {
-        var self = this;
-        var $inputs = this.$('input');
-        var description = $inputs[0].value;
-        var isDefault = $inputs[1].checked;
-        var isShared = $inputs[2].checked;
-
-        if (!description.length){
-            this.do_warn(_t("Error"), _t("A name for your favorite is required."));
-            $inputs[0].focus();
-            return;
-        }
-        var descriptionAlreadyExists = !!this.favorites.find(function (favorite) {
-            return favorite.description === description;
-        });
-        if (descriptionAlreadyExists) {
-            this.do_warn(_t("Error"), _t("Filter with same name already exists."));
-            $inputs[0].focus();
-            return;
-        }
-        this.trigger_up('new_favorite', {
-            type: 'favorite',
-            description: description,
-            isDefault: isDefault,
-            isShared: isShared,
-            on_success: function () {self.generatorMenuIsOpen = false;},
-        });
-        this.closeMenu();
-    },
-    /**
-     * Hide and display the submenu which allows adding custom filters.
-     *
-     * @private
-     */
-    _toggleMenu: function () {
-        this.isOpen = !this.isOpen;
-        this._render();
-        this.trigger_up('favorite_submenu_toggled');
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * Additional behavior when a checkbox is clicked upon
-     * Namely, some checkbox are mutually exclusive
-     * this function allows this
-     *
-     * @private
-     * @param {jQueryEvent} ev
-     */
-    _onCheckboxClick: function (ev) {
-        function mutuallyExclusive (elem) {
-            if (!elem.id) return false;
-            return ['use_by_default', 'share_all_users'].some(function (str) {
-                return elem.id.indexOf(str);
-            });
-        }
-        var $checkboxes = this.$('input[type="checkbox"]');
-        var currentCheckBox = ev.target;
-
-        if (mutuallyExclusive(currentCheckBox)) {
-            for (var i=0; i < $checkboxes.length; i++) {
-                var checkbox = $checkboxes[i];
-                if (checkbox !== currentCheckBox && mutuallyExclusive(checkbox)) {
-                    checkbox.checked = false;
-                }
-            }
-        }
-    },
-    /**
-     * @private
-     * @param {jQueryEvent} ev
-     */
-    _onKeyUp: function (ev) {
-        if (ev.which === $.ui.keyCode.ENTER) {
-            this._saveFavorite();
-        }
-    },
-    /**
-     * @private
-     * @param {jQueryEvent} ev
-     */
-    _onMenuHeaderClick: function (ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-        this._toggleMenu();
-    },
-    /**
-     * @private
-     * @param {jQueryEvent} ev
-     */
-    _onSaveFavoriteClick: function (ev) {
-        ev.stopPropagation();
-        this._saveFavorite();
-    },
-});
-
-favoritesSubmenusRegistry.add('add_new_favorite_menu', AddNewFavoriteMenu, 0);
-
-return AddNewFavoriteMenu;
-
-});
diff --git a/addons/web/static/src/js/views/control_panel/search/control_panel_view_parameters.js b/addons/web/static/src/js/views/control_panel/search/control_panel_view_parameters.js
deleted file mode 100644
index ca493935156..00000000000
--- a/addons/web/static/src/js/views/control_panel/search/control_panel_view_parameters.js
+++ /dev/null
@@ -1,80 +0,0 @@
-odoo.define('web.controlPanelViewParameters', function (require) {
-"use strict";
-
-var core = require('web.core');
-
-var _lt = core._lt;
-
-// for FilterMenu
-const DEFAULT_PERIOD = 'this_month';
-const PERIOD_OPTIONS = [
-    { description: _lt('Last 7 Days'), optionId: 'last_7_days', groupId: 1 },
-    { description: _lt('Last 30 Days'), optionId: 'last_30_days', groupId: 1 },
-    { description: _lt('Last 365 Days'), optionId: 'last_365_days', groupId: 1 },
-    { description: _lt('Last 5 Years'), optionId: 'last_5_years', groupId: 1 },
-    { description: _lt('Today'), optionId: 'today', groupId: 2 },
-    { description: _lt('This Week'), optionId: 'this_week', groupId: 2 },
-    { description: _lt('This Month'), optionId: 'this_month', groupId: 2 },
-    { description: _lt('This Quarter'), optionId: 'this_quarter', groupId: 2 },
-    { description: _lt('This Year'), optionId: 'this_year', groupId: 2 },
-    { description: _lt('Yesterday'), optionId: 'yesterday', groupId: 3 },
-    { description: _lt('Last Week'), optionId: 'last_week', groupId: 3 },
-    { description: _lt('Last Month'), optionId: 'last_month', groupId: 3 },
-    { description: _lt('Last Quarter'), optionId: 'last_quarter', groupId: 3 },
-    { description: _lt('Last Year'), optionId: 'last_year', groupId: 3 },
-];
-const MONTH_OPTIONS = [
-    { optionId: 'this_month', groupId: 1, format: 'MMMM', addParam: {}, setParam: {}, granularity: 'month' },
-    { optionId: 'last_month', groupId: 1, format: 'MMMM', addParam: { months: -1 }, setParam: {}, granularity: 'month' },
-    { optionId: 'antepenultimate_month', groupId: 1, format: 'MMMM', addParam: { months: -2 }, setParam: {}, granularity: 'month' }
-]
-const QUARTER_OPTIONS = [
-    { optionId: 'fourth_quarter', groupId: 1, description: _lt("Q4"), addParam: {}, setParam: { quarter: 4 }, granularity: 'quarter' },
-    { optionId: 'third_quarter', groupId: 1, description: _lt("Q3"), addParam: {}, setParam: { quarter: 3 }, granularity: 'quarter' },
-    { optionId: 'second_quarter', groupId: 1, description: _lt("Q2"), addParam: {}, setParam: { quarter: 2 }, granularity: 'quarter' },
-    { optionId: 'first_quarter', groupId: 1, description: _lt("Q1"), addParam: {}, setParam: { quarter: 1 }, granularity: 'quarter' }
-]
-const YEAR_OPTIONS = [
-    { optionId: 'this_year', groupId: 2, format: 'YYYY', addParam: {}, setParam: {}, granularity: 'year' },
-    { optionId: 'last_year', groupId: 2, format: 'YYYY', addParam: { years: -1 }, setParam: {}, granularity: 'year' },
-    { optionId: 'antepenultimate_year', groupId: 2, format: 'YYYY', addParam: { years: -2 }, setParam: {}, granularity: 'year' },
-];
-const OPTION_GENERATORS =  [...MONTH_OPTIONS, ...QUARTER_OPTIONS, ...YEAR_OPTIONS];
-
-// for GroupBy menu
-const GROUPABLE_TYPES = ['many2one', 'char', 'boolean', 'selection', 'date', 'datetime', 'integer'];
-const DEFAULT_INTERVAL = 'month';
-const INTERVAL_OPTIONS = [
-    { description: _lt('Year'), optionId: 'year', groupId: 1 },
-    { description: _lt('Quarter'), optionId: 'quarter', groupId: 1 },
-    { description: _lt('Month'), optionId: 'month', groupId: 1 },
-    { description: _lt('Week'), optionId: 'week', groupId: 1 },
-    { description: _lt('Day'), optionId: 'day', groupId: 1 },
-];
-function rank(oId) {
-    return INTERVAL_OPTIONS.findIndex(o => o.optionId === oId);
-}
-
-// for TimeRangeMenu
-const DEFAULT_TIMERANGE = DEFAULT_PERIOD;
-const TIME_RANGE_OPTIONS = PERIOD_OPTIONS;
-const COMPARISON_TIME_RANGE_OPTIONS = [
-    { description: _lt('Previous Period'), optionId: 'previous_period' },
-    { description: _lt('Previous Year'), optionId: 'previous_year' }
-];
-
-return {
-    COMPARISON_TIME_RANGE_OPTIONS: COMPARISON_TIME_RANGE_OPTIONS,
-    DEFAULT_INTERVAL: DEFAULT_INTERVAL,
-    DEFAULT_PERIOD: DEFAULT_PERIOD,
-    DEFAULT_TIMERANGE: DEFAULT_TIMERANGE,
-    GROUPABLE_TYPES: GROUPABLE_TYPES,
-    INTERVAL_OPTIONS: INTERVAL_OPTIONS,
-    OPTION_GENERATORS: OPTION_GENERATORS,
-    PERIOD_OPTIONS: PERIOD_OPTIONS,
-    TIME_RANGE_OPTIONS: TIME_RANGE_OPTIONS,
-    YEAR_OPTIONS: YEAR_OPTIONS,
-    rank: rank,
-};
-
-});
\ No newline at end of file
diff --git a/addons/web/static/src/js/views/control_panel/search/favorite_menu.js b/addons/web/static/src/js/views/control_panel/search/favorite_menu.js
deleted file mode 100644
index b2dc25d9327..00000000000
--- a/addons/web/static/src/js/views/control_panel/search/favorite_menu.js
+++ /dev/null
@@ -1,134 +0,0 @@
-odoo.define('web.FavoriteMenu', function (require) {
-"use strict";
-
-var config = require('web.config');
-var core = require('web.core');
-var Dialog = require('web.Dialog');
-var DropdownMenu = require('web.DropdownMenu');
-var favorites_submenus_registry = require('web.favorites_submenus_registry');
-
-var _t = core._t;
-
-var FavoriteMenu = DropdownMenu.extend({
-    custom_events: _.extend({}, DropdownMenu.prototype.custom_events, {
-        favorite_submenu_toggled: '_onSubMenuToggled',
-    }),
-    /**
-     * @override
-     * @param {Object} action
-     */
-    init: function (parent, favorites, action) {
-        this._super(parent, favorites);
-        this.action = action;
-        this.isMobile = config.device.isMobile;
-        this.dropdownCategory = 'favorite';
-        this.dropdownTitle = _t('Favorites');
-        this.dropdownIcon = 'fa fa-star';
-        this.dropdownSymbol = this.isMobile ? 'fa fa-chevron-right float-right mt4' : false;
-        this.dropdownStyle.mainButton.class = 'o_favorites_menu_button ' +
-                                                this.dropdownStyle.mainButton.class;
-
-    },
-    /**
-     * Render the template used to register a new favorite and append it
-     * to the basic dropdown menu.
-     *
-     * @override
-     */
-    start: function () {
-        var self = this;
-        var params = {
-            favorites: this.items,
-            action: this.action,
-        };
-        var superProm = this._super.apply(this, arguments);
-        this.$menu.addClass('o_favorites_menu');
-        this.subMenus = [];
-        favorites_submenus_registry.values().forEach(function (SubMenu) {
-            var subMenu = new SubMenu(self, params);
-            subMenu.appendTo(self.$menu);
-            self.subMenus.push(subMenu);
-        });
-        return superProm;
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    update: function (items) {
-        this._super.apply(this, arguments);
-        _.invoke(this.subMenus, 'update', { favorites: this.items });
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     */
-     _closeSubMenus: function () {
-        _.invoke(this.subMenus, 'closeMenu');
-     },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     * @private
-     */
-    _onBootstrapClose: function () {
-        this._super.apply(this, arguments);
-        this._closeSubMenus();
-    },
-    /**
-     * Reacts to a submenu being toggled
-     *
-     * When a submenu is toggled, it has changed the position
-     * and size of the Favorite's dropdown. This method
-     * repositions the current dropdown
-     *
-     * @private
-     * @param {OdooEvent} ev
-     *
-     */
-    _onSubMenuToggled: function (ev) {
-        ev.stopPropagation();
-        this.$dropdownReference.dropdown('update');
-    },
-    /**
-     * @override
-     * @private
-     * @param {MouseEvent} event
-     */
-    _onTrashButtonClick: function (event) {
-        event.preventDefault();
-        event.stopPropagation();
-        var self = this;
-        var id = $(event.currentTarget).data('id');
-        var favorite = this.items.find(function (favorite) {
-            return favorite.id === id;
-        });
-        var globalWarning = _t("This filter is global and will be removed for everybody if you continue.");
-        var warning = _t("Are you sure that you want to remove this filter?");
-        var message = favorite.userId ? warning : globalWarning;
-
-        Dialog.confirm(self, message, {
-            title: _t("Warning"),
-            confirm_callback: function () {
-                self.trigger_up('item_trashed', {id: id});
-            },
-        });
-
-    },
-});
-
-return FavoriteMenu;
-
-});
\ No newline at end of file
diff --git a/addons/web/static/src/js/views/control_panel/search/favorites_submenus_registry.js b/addons/web/static/src/js/views/control_panel/search/favorites_submenus_registry.js
deleted file mode 100644
index b05f8dfe268..00000000000
--- a/addons/web/static/src/js/views/control_panel/search/favorites_submenus_registry.js
+++ /dev/null
@@ -1,8 +0,0 @@
-odoo.define('web.favorites_submenus_registry', function (require) {
-"use strict";
-
-var Registry = require('web.Registry');
-
-return new Registry();
-
-});
diff --git a/addons/web/static/src/js/views/control_panel/search/filter_menu.js b/addons/web/static/src/js/views/control_panel/search/filter_menu.js
deleted file mode 100644
index 1c81701a8e0..00000000000
--- a/addons/web/static/src/js/views/control_panel/search/filter_menu.js
+++ /dev/null
@@ -1,186 +0,0 @@
-odoo.define('web.FilterMenu', function (require) {
-"use strict";
-
-var config = require('web.config');
-var core = require('web.core');
-var Domain = require('web.Domain');
-var DropdownMenu = require('web.DropdownMenu');
-var search_filters = require('web.search_filters');
-
-var _t = core._t;
-var QWeb = core.qweb;
-
-var FilterMenu = DropdownMenu.extend({
-    custom_events: {
-        confirm_proposition: '_onConfirmProposition',
-        remove_proposition: '_onRemoveProposition',
-    },
-    events: _.extend({}, DropdownMenu.prototype.events, {
-        'click .o_add_custom_filter': '_onAddCustomFilterClick',
-        'click .o_add_condition': '_onAddCondition',
-        'click .o_apply_filter': '_onApplyClick',
-    }),
-    /**
-     * @override
-     * @param {Object} fields
-     */
-    init: function (parent, filters, fields) {
-        this._super(parent, filters);
-
-        // determines where the filter menu is displayed and its style
-        this.isMobile = config.device.isMobile;
-        // determines when the 'Add custom filter' submenu is open
-        this.generatorMenuIsOpen = false;
-        this.propositions = [];
-        this.fields = _.pick(fields, function (field, name) {
-            return field.selectable !== false && name !== 'id';
-        });
-        this.fields.id = {string: 'ID', type: 'id', searchable: true};
-        this.dropdownCategory = 'filter';
-        this.dropdownTitle = _t('Filters');
-        this.dropdownIcon = 'fa fa-filter';
-        this.dropdownSymbol = this.isMobile ?
-                                'fa fa-chevron-right float-right mt4' :
-                                false;
-        this.dropdownStyle.mainButton.class = 'o_filters_menu_button ' +
-                                                this.dropdownStyle.mainButton.class;
-    },
-    /**
-     * Render the template used to add a new custom filter and append it
-     * to the basic dropdown menu.
-     *
-     * @override
-     */
-    start: function () {
-        var superProm = this._super.apply(this, arguments);
-        this.$menu.addClass('o_filters_menu');
-        this._renderGeneratorMenu();
-        return superProm;
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Add a proposition inside the custom filter edition menu.
-     *
-     * @private
-     * @returns {Promise}
-     */
-    _appendProposition: function () {
-        // make modern sear_filters code!!! It works but...
-        var prop = new search_filters.ExtendedSearchProposition(this, this.fields);
-        this.propositions.push(prop);
-        this.$('.o_apply_filter').prop('disabled', false);
-        return prop.insertBefore(this.$addFilterMenu);
-    },
-    /**
-     * Confirm a filter proposition, creates it and add it to the menu.
-     *
-     * @private
-     */
-    _commitSearch: function () {
-        var filters = _.invoke(this.propositions, 'get_filter').map(function (preFilter) {
-            return {
-                type: 'filter',
-                description: preFilter.attrs.string,
-                domain: Domain.prototype.arrayToString(preFilter.attrs.domain),
-            };
-        });
-        this.trigger_up('new_filters', {filters: filters});
-        _.invoke(this.propositions, 'destroy');
-        this.propositions = [];
-        this._toggleCustomFilterMenu();
-    },
-    /**
-     * @private
-     */
-    _renderGeneratorMenu: function () {
-        this.$el.find('.o_generator_menu').remove();
-        if (!this.generatorMenuIsOpen) {
-            _.invoke(this.propositions, 'destroy');
-            this.propositions = [];
-        }
-        var $generatorMenu = QWeb.render('FilterMenuGenerator', {widget: this});
-        this.$menu.append($generatorMenu);
-        this.$addFilterMenu = this.$menu.find('.o_add_filter_menu');
-        if (this.generatorMenuIsOpen && !this.propositions.length) {
-            this._appendProposition();
-        }
-        this.$dropdownReference.dropdown('update');
-    },
-    /**
-     * Hide and display the submenu which allows adding custom filters.
-     *
-     * @private
-     */
-    _toggleCustomFilterMenu: function () {
-        this.generatorMenuIsOpen = !this.generatorMenuIsOpen;
-        this._renderGeneratorMenu();
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @param {MouseEvent} ev
-     */
-    _onAddCondition: function (ev) {
-        ev.stopPropagation();
-        this._appendProposition();
-    },
-    /**
-     * @private
-     * @param {MouseEvent} ev
-     */
-    _onAddCustomFilterClick: function (ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-        this._toggleCustomFilterMenu();
-    },
-    /**
-     * @private
-     * @param {MouseEvent} ev
-     */
-    _onApplyClick: function (ev) {
-        ev.stopPropagation();
-        this._commitSearch();
-    },
-    /**
-     * @override
-     * @private
-     * @param {jQueryEvent} ev
-     */
-    _onBootstrapClose: function () {
-        this._super.apply(this, arguments);
-        this.generatorMenuIsOpen = false;
-        this._renderGeneratorMenu();
-    },
-    /**
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onConfirmProposition: function (ev) {
-        ev.stopPropagation();
-        this._commitSearch();
-    },
-    /**
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onRemoveProposition: function (ev) {
-        ev.stopPropagation();
-        this.propositions = _.without(this.propositions, ev.target);
-        if (!this.propositions.length) {
-            this.$('.o_apply_filter').prop('disabled', true);
-        }
-        ev.target.destroy();
-    },
-});
-
-return FilterMenu;
-
-});
diff --git a/addons/web/static/src/js/views/control_panel/search/groupby_menu.js b/addons/web/static/src/js/views/control_panel/search/groupby_menu.js
deleted file mode 100644
index 17c158dde87..00000000000
--- a/addons/web/static/src/js/views/control_panel/search/groupby_menu.js
+++ /dev/null
@@ -1,206 +0,0 @@
-odoo.define('web.GroupByMenu', function (require) {
-"use strict";
-
-var config = require('web.config');
-var controlPanelViewParameters = require('web.controlPanelViewParameters');
-var core = require('web.core');
-var DropdownMenu = require('web.DropdownMenu');
-
-var _t = core._t;
-var QWeb = core.qweb;
-
-var DEFAULT_INTERVAL = controlPanelViewParameters.DEFAULT_INTERVAL;
-var GROUPABLE_TYPES = controlPanelViewParameters.GROUPABLE_TYPES;
-var INTERVAL_OPTIONS = controlPanelViewParameters.INTERVAL_OPTIONS;
-
-var GroupByMenu = DropdownMenu.extend({
-    events: _.extend({}, DropdownMenu.prototype.events, {
-        'click .o_add_custom_group': '_onAddCustomGroupClick',
-        'click button.o_apply_group': '_onButtonApplyClick',
-        'click .o_group_selector': '_onGroupSelectorClick',
-    }),
-    /**
-     * @override
-     * @param {Widget} parent
-     * @param {Object[]} groupBys list of groupBys
-     *   }
-     * @param {Object} fields 'field_get' of a model: mapping from field name
-     *   to an object with its properties
-     * @param {Object} options
-     * @param {string} options.headerStyle conditions the style of the main button
-     */
-    init: function (parent, groupBys, fields, options) {
-        var self = this;
-        options = options || {};
-        this._super(parent, groupBys);
-        this.fields = fields;
-        // determines when the 'Add custom groupby' submenu is open
-        this.generatorMenuIsOpen = false;
-        // determines list of options used by groupBys of type 'date'
-        this.groupableFields = [];
-        _.each(fields, function (field, name) {
-            if (field.sortable && name !== "id" && _.contains(GROUPABLE_TYPES, field.type)) {
-                self.groupableFields.push(_.extend({}, field, {
-                    name: name,
-                }));
-            }
-        });
-        this.groupableFields = _.sortBy(this.groupableFields, 'string');
-        // determines the list of field names that can be added to the menu
-        // via the 'Add Custom Groupby' menu
-        this.presentedFields = this._setPresentedFields(groupBys);
-
-        // determines where the filter menu is displayed and partly its style
-        this.isMobile = config.device.isMobile;
-
-        this.dropdownCategory = 'groupby';
-        this.dropdownTitle = _t('Group By');
-        this.dropdownIcon = 'fa fa-bars';
-        this.dropdownSymbol = this.isMobile && !options.noSymbol ? 'fa fa-chevron-right float-right mt4' : false;
-        // the default style of the groupby menu can be changed here using the options key 'headerStyle'
-        if (options.headerStyle === 'primary') {
-            this.dropdownStyle = {
-                el: {class: 'btn-group o_group_by_menu o_dropdown', attrs: {'role': 'group'}},
-                mainButton: {class: 'btn btn-primary dropdown-toggle'},
-            };
-        }
-        INTERVAL_OPTIONS = INTERVAL_OPTIONS.map(function (option) {
-            return _.extend(option, {description: option.description.toString()});
-        });
-    },
-
-    /**
-     * Render the template used to add a new custom groupby and append it
-     * to the basic dropdown menu.
-     *
-     * @override
-     */
-    start: function () {
-        var superProm = this._super.apply(this, arguments);
-        this.$menu.addClass('o_group_by_menu');
-        this._renderGeneratorMenu();
-        return superProm;
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     * @param {Object[]} groupBys
-     */
-    update: function (groupBys) {
-        this._super.apply(this, arguments);
-        this.presentedFields = this._setPresentedFields(groupBys);
-        this._renderGeneratorMenu();
-    },
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Method called via the 'Add Custom Groupby' menu to create a new groupby
-     * and add it (activated) to the menu. In case the field is of type date, it
-     * is activated using the option determined by the parameter
-     * 'DEFAULT_INTERVAL'.
-     *
-     * @private
-     * @param {string} fieldName
-     */
-    _addGroupby: function (fieldName) {
-        var field = this.presentedFields.find(function (field) {
-            return field.name === fieldName;
-        });
-        var groupBy = {
-            type: 'groupBy',
-            description: field.string,
-            fieldName: fieldName,
-            fieldType: field.type,
-        };
-        if (_.contains(['date', 'datetime'], field.type)) {
-            groupBy.hasOptions = true;
-            groupBy.options = INTERVAL_OPTIONS;
-            groupBy.defaultOptionId = DEFAULT_INTERVAL;
-            groupBy.currentOptionIds = new Set([]);
-        }
-        this.trigger_up('new_groupBy', groupBy);
-    },
-    /**
-     * @private
-     */
-    _renderGeneratorMenu: function () {
-        this.$el.find('.o_generator_menu').remove();
-        var $generatorMenu = QWeb.render('GroupByMenuGenerator', {widget: this});
-        this.$menu.append($generatorMenu);
-        this.$addCustomGroup = this.$menu.find('.o_add_custom_group');
-        this.$groupSelector = this.$menu.find('.o_group_selector');
-        this.$dropdownReference.dropdown('update');
-    },
-    /**
-     * @private
-     */
-    _setPresentedFields: function (groupBys) {
-        return this.groupableFields.filter(function (field) {
-            var groupByFields = _.pluck(groupBys, 'fieldName');
-            return !_.contains(groupByFields, field.name);
-        });
-    },
-    /**
-     * @private
-     */
-    _toggleCustomGroupMenu: function () {
-        this.generatorMenuIsOpen = !this.generatorMenuIsOpen;
-        this._renderGeneratorMenu();
-        if (this.generatorMenuIsOpen) {
-            this.$groupSelector.focus();
-        }
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * Toggle the 'Add Custom Group'.
-     *
-     * @private
-     * @param {MouseEvent} ev
-     */
-    _onAddCustomGroupClick: function (ev) {
-        ev.preventDefault();
-        ev.stopPropagation();
-        this._toggleCustomGroupMenu();
-    },
-    /*
-     * @override
-     * @private
-     * @param {jQueryEvent} ev
-     */
-    _onBootstrapClose: function () {
-        this._super.apply(this, arguments);
-        this.generatorMenuIsOpen = false;
-        this._renderGeneratorMenu();
-    },
-    /**
-     * @private
-     * @param {MouseEvent} ev
-     */
-    _onButtonApplyClick: function (ev) {
-        ev.stopPropagation();
-        var fieldName = this.$groupSelector.val();
-        this.generatorMenuIsOpen = false;
-        this._addGroupby(fieldName);
-    },
-    /**
-     * @private
-     * @param {MouseEvent} ev
-     */
-    _onGroupSelectorClick: function (ev) {
-        ev.stopPropagation();
-    },
-});
-
-return GroupByMenu;
-
-});
diff --git a/addons/web/static/src/js/views/control_panel/search/groupby_menu_mixin.js b/addons/web/static/src/js/views/control_panel/search/groupby_menu_mixin.js
deleted file mode 100644
index a51386d20aa..00000000000
--- a/addons/web/static/src/js/views/control_panel/search/groupby_menu_mixin.js
+++ /dev/null
@@ -1,147 +0,0 @@
-odoo.define('web.GroupByMenuMixin', function (require) {
-"use strict";
-
-var GroupByMenu = require('web.GroupByMenu');
-var controlPanelViewParameters = require('web.controlPanelViewParameters');
-
-/**
- * The aim of this mixin is to facilitate the interaction between
- * a view controller and a dropdown menu with its control panel
- * TO DO: the pivot subview has two types of groupbys so that it will not
- * understand the current implementation of this mixin
- *
- * @mixin
- * @name GroupByMenuMixin
- */
-var GroupByMenuMixin = {
-    init: function () {
-        this.custom_events = _.extend({}, this.custom_events, {
-            menu_item_clicked: '_onMenuItemClicked',
-            item_option_clicked: '_onItemOptionClicked',
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Instantiate a widget GroupByMenu and incorporate it to the control panel
-     * of an embedded view. This is used for instance in the dashboard view in
-     * enterprise where there is no GroupBy menu in the search view because it
-     * would not make sense to have one at the global level.
-     * This function is called by renderButtons when the parameter
-     * 'this.isEmbedded' is set to true.
-     *
-     * private
-     * @param {jQuery} $node
-     * @param {Object} groupableFields
-     * @param {Promise}
-     */
-    _addGroupByMenu: function ($node, groupableFields) {
-        this.sortedFieldNames = Object.keys(groupableFields).sort();
-        this.groupableFields = groupableFields;
-        const groupBys = this._getGroupBys(this.model.get().groupBy);
-        this.groupByMenu = new GroupByMenu(this, groupBys, this.groupableFields, {noSymbol: true});
-        return this.groupByMenu.insertAfter($node.find('div:first'));
-    },
-    /**
-     * This method puts the active groupBys in a convenient form.
-     *
-     * @private
-     * @param {string[]} activeGroupBys
-     * returns {Object[]} groupBysNormalized
-     */
-    _normalizeActiveGroupBys: function (activeGroupBys) {
-        return activeGroupBys.map(gb => {
-            const fieldName = gb.split(':')[0];
-            const field = this.groupableFields[fieldName];
-            const ngb = {fieldName: fieldName};
-            if (_.contains(['date', 'datetime'], field.type)) {
-                ngb.interval = gb.split(':')[1] || controlPanelViewParameters.DEFAULT_INTERVAL;
-            }
-            return ngb;
-        });
-    },
-    /**
-     * This method has to be implemented by the view controller that needs to
-     * interpret the click in an appropriate manner.
-     *
-     * @private
-     * @param {string[]} groupBys
-     */
-    _setGroupby: function (groupBys) {},
-    /**
-     * Return the list of groupBys in a form suitable for the groupByMenu. We do
-     * this each time because we want to be synchronized with the view model.
-     *
-     * @private
-     * @param {string[]} activeGroupBys
-     * returns {Object[]} groupBys
-     */
-    _getGroupBys: function (activeGroupBys) {
-        const groupBysNormalized = this._normalizeActiveGroupBys(activeGroupBys);
-        return this.sortedFieldNames.map(fieldName => {
-            const field = this.groupableFields[fieldName];
-            const groupByActivity = groupBysNormalized.filter(gb => (gb.fieldName === fieldName));
-            const groupBy = {
-                id: fieldName,
-                isActive: groupByActivity.length ? true : false,
-                description: field.string,
-            };
-            if (_.contains(['date', 'datetime'], field.type)) {
-                groupBy.hasOptions = true;
-                groupBy.options = controlPanelViewParameters.INTERVAL_OPTIONS;
-                groupBy.currentOptionIds = groupByActivity.length ?
-                                            new Set(groupByActivity.map(gb => gb.interval)) :
-                                            new Set([]);
-            }
-            return groupBy;
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onItemOptionClicked: function (ev) {
-        const fieldName = ev.data.id;
-        const optionId = ev.data.optionId;
-        const activeGroupBys = this.model.get().groupBy;
-        const groupBysNormalized = this._normalizeActiveGroupBys(activeGroupBys);
-        const index = groupBysNormalized.findIndex(ngb =>
-            ngb.fieldName === fieldName && ngb.interval === optionId);
-        if (index === -1) {
-            activeGroupBys.push(fieldName + ':' + optionId);
-        } else {
-            activeGroupBys.splice(index, 1);
-        }
-        this._setGroupby(activeGroupBys);
-        this.groupByMenu.update(this._getGroupBys(activeGroupBys));
-    },
-    /**
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onMenuItemClicked: function (ev) {
-        const fieldName = ev.data.id;
-        const activeGroupBys = this.model.get().groupBy;
-        const groupByFieldNames = activeGroupBys.map(gb => gb.split(':')[0]);
-        const indexOfGroupby = groupByFieldNames.indexOf(fieldName);
-        if (indexOfGroupby === -1) {
-            activeGroupBys.push(fieldName);
-        } else {
-            activeGroupBys.splice(indexOfGroupby, 1);
-        }
-        this._setGroupby(activeGroupBys);
-        this.groupByMenu.update(this._getGroupBys(activeGroupBys));
-    },
-};
-
-return GroupByMenuMixin;
-
-});
diff --git a/addons/web/static/src/js/views/control_panel/search/search_bar.js b/addons/web/static/src/js/views/control_panel/search/search_bar.js
deleted file mode 100644
index 42b156beed7..00000000000
--- a/addons/web/static/src/js/views/control_panel/search/search_bar.js
+++ /dev/null
@@ -1,260 +0,0 @@
-odoo.define('web.SearchBar', function (require) {
-"use strict";
-
-var AutoComplete = require('web.AutoComplete');
-var searchBarAutocompleteRegistry = require('web.search_bar_autocomplete_sources_registry');
-var SearchFacet = require('web.SearchFacet');
-var Widget = require('web.Widget');
-
-var SearchBar = Widget.extend({
-    template: 'SearchView.SearchBar',
-    events: _.extend({}, Widget.prototype.events, {
-        'compositionend .o_searchview_input': '_onCompositionendInput',
-        'compositionstart .o_searchview_input': '_onCompositionstartInput',
-        'keydown': '_onKeydown',
-    }),
-    /**
-     * @override
-     * @param {Object} [params]
-     * @param {Object} [params.context]
-     * @param {Object[]} [params.facets]
-     * @param {Object} [params.fields]
-     * @param {Object[]} [params.filterFields]
-     * @param {Object[]} [params.filters]
-     * @param {Object[]} [params.groupBys]
-     */
-    init: function (parent, params) {
-        this._super.apply(this, arguments);
-
-        this.context = params.context;
-
-        this.facets = params.facets;
-        this.fields = params.fields;
-        this.filterFields = params.filterFields;
-
-        this.autoCompleteSources = [];
-        this.searchFacets = [];
-        this._isInputComposing = false;
-    },
-    /**
-     * @override
-     */
-    start: function () {
-        this.$input = this.$('input');
-        var self = this;
-        var defs = [this._super.apply(this, arguments)];
-        _.each(this.facets, function (facet) {
-            defs.push(self._renderFacet(facet));
-        });
-        defs.push(this._setupAutoCompletion());
-        return Promise.all(defs);
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * Focus the searchbar.
-     */
-    focus: function () {
-      this.$input.focus();
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     */
-    _focusFollowing: function () {
-        var focusedIndex = this._getFocusedFacetIndex();
-        var $toFocus;
-        if (focusedIndex === this.searchFacets.length - 1) {
-            $toFocus = this.$input;
-        } else {
-            $toFocus = this.searchFacets.length && this.searchFacets[focusedIndex + 1].$el;
-        }
-
-        if ($toFocus.length) {
-            $toFocus.focus();
-        }
-    },
-    /**
-     * @private
-     */
-    _focusPreceding: function () {
-        var focusedIndex = this._getFocusedFacetIndex();
-        var $toFocus;
-        if (focusedIndex === -1) {
-            $toFocus = this.searchFacets.length && _.last(this.searchFacets).$el;
-        } else if (focusedIndex === 0) {
-            $toFocus = this.$input;
-        } else {
-            $toFocus = this.searchFacets.length && this.searchFacets[focusedIndex - 1].$el;
-        }
-
-        if ($toFocus.length) {
-            $toFocus.focus();
-        }
-    },
-    /**
-     * @private
-     * @returns {integer}
-     */
-    _getFocusedFacetIndex: function () {
-        return _.findIndex(this.searchFacets, function (searchFacet) {
-            return searchFacet.$el[0] === document.activeElement;
-        });
-    },
-    /**
-     * Provide auto-completion result for req.term.
-     *
-     * @private
-     * @param {Object} req request to complete
-     * @param {String} req.term searched term to complete
-     * @param {Function} callback
-     */
-    _getAutoCompleteSources: function (req, callback) {
-        var defs = this.autoCompleteSources.map(function (source) {
-            return source.getAutocompletionValues(req.term);
-        });
-        Promise.all(defs).then(function (result) {
-            var resultCleaned = _(result).chain()
-                .compact()
-                .flatten(true)
-                .value();
-            callback(resultCleaned);
-        });
-    },
-    /**
-     * @private
-     * @param {Object} facet
-     * @returns {Promise}
-     */
-    _renderFacet: function (facet) {
-        var searchFacet = new SearchFacet(this, facet);
-        this.searchFacets.push(searchFacet);
-        return searchFacet.insertBefore(this.$('input'));
-    },
-    /**
-     * @private
-     * @returns {Promise}
-     */
-    _setupAutoCompletion: function () {
-        var self = this;
-        this._setupAutoCompletionWidgets();
-        this.autoComplete = new AutoComplete(this, {
-            $input: this.$('input'),
-            source: this._getAutoCompleteSources.bind(this),
-            select: this._onAutoCompleteSelected.bind(this),
-            get_search_string: function () {
-                return self.$input.val().trim();
-            },
-        });
-        return this.autoComplete.appendTo(this.$el);
-    },
-    /**
-     * @private
-     */
-    _setupAutoCompletionWidgets: function () {
-        var self = this;
-        var registry = searchBarAutocompleteRegistry;
-        _.each(this.filterFields, function (filter) {
-            var field = self.fields[filter.attrs.name];
-            var Obj = registry.getAny([filter.attrs.widget, field.type]);
-            if (Obj) {
-                self.autoCompleteSources.push(new (Obj) (self, filter, field, self.context));
-            }
-        });
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @param {Event} e
-     * @param {Object} ui
-     * @param {Object} ui.item selected completion item
-     */
-    _onAutoCompleteSelected: function (e, ui) {
-        e.preventDefault();
-        var facet = ui.item.facet;
-        if (!facet) {
-            // this happens when selecting "(no result)" item
-            this.trigger_up('reset');
-            return;
-        }
-        var filter = facet.filter;
-        if (filter.type === 'field') {
-            var values = filter.autoCompleteValues;
-            values.push(facet.values[0]);
-            this.trigger_up('autocompletion_filter', {
-                filterId: filter.id,
-                autoCompleteValues: values,
-            });
-        } else {
-            this.trigger_up('autocompletion_filter', {
-                filterId: filter.id,
-            });
-        }
-    },
-    /**
-     * @rivate
-     * @param {CompositionEvent} ev
-     */
-    _onCompositionendInput: function () {
-        this._isInputComposing = false;
-    },
-    /**
-     * @rivate
-     * @param {CompositionEvent} ev
-     */
-    _onCompositionstartInput: function () {
-        this._isInputComposing = true;
-    },
-    /**
-     * @private
-     * @param {KeyEvent} e
-     */
-    _onKeydown: function (e) {
-        if (this._isInputComposing) {
-            return;
-        }
-        switch(e.which) {
-            case $.ui.keyCode.LEFT:
-                this._focusPreceding();
-                e.preventDefault();
-                break;
-            case $.ui.keyCode.RIGHT:
-                this._focusFollowing();
-                e.preventDefault();
-                break;
-            case $.ui.keyCode.DOWN:
-                // if the searchbar dropdown is closed, try to focus the renderer
-                const $dropdown = this.$('.o_searchview_autocomplete:visible');
-                if (!$dropdown.length) {
-                    this.trigger_up('navigation_move', { direction: 'down' });
-                    e.preventDefault();
-                }
-                break;
-            case $.ui.keyCode.BACKSPACE:
-                if (this.$input.val() === '') {
-                    this.trigger_up('facet_removed');
-                }
-                break;
-            case $.ui.keyCode.ENTER:
-                if (this.$input.val() === '') {
-                    this.trigger_up('reload');
-                }
-                break;
-        }
-    },
-});
-
-return SearchBar;
-
-});
diff --git a/addons/web/static/src/js/views/control_panel/search/search_bar_autocomplete_sources.js b/addons/web/static/src/js/views/control_panel/search/search_bar_autocomplete_sources.js
deleted file mode 100644
index 8adc385a789..00000000000
--- a/addons/web/static/src/js/views/control_panel/search/search_bar_autocomplete_sources.js
+++ /dev/null
@@ -1,485 +0,0 @@
-odoo.define('web.SearchBarAutoCompleteSources', function (require) {
-"use strict";
-
-var Class = require('web.Class');
-var core = require('web.core');
-var Domain = require('web.Domain');
-var field_utils = require('web.field_utils');
-var mixins = require('web.mixins');
-var pyUtils = require('web.py_utils');
-var ServicesMixin = require('web.ServicesMixin');
-var time = require('web.time');
-
-var _t = core._t;
-var _lt = core._lt;
-
-var FilterInterface = Class.extend(mixins.EventDispatcherMixin, {
-    completion_label: _lt("%s"),
-    /**
-     * @override
-     * @param {Object} filter
-     */
-    init: function (parent, filter) {
-        mixins.EventDispatcherMixin.init.call(this);
-        this.setParent(parent);
-
-        this.filter = filter;
-    },
-    /**
-     * Fetch auto-completion values for the widget.
-     *
-     * The completion values should be an array of objects with keys facet and
-     * label. They will be used by search_bar in @_onAutoCompleteSelected.
-     *
-     * @param {string} value value to getAutocompletionValues
-     * @returns {Promise<null|Array>}
-     */
-    getAutocompletionValues: function (value) {
-        var result;
-        value = value.toLowerCase();
-        if (fuzzy.test(value, this.filter.description)) {
-            result = [{
-                label: _.str.sprintf(this.completion_label.toString(),
-                                         _.escape(this.filter.description)),
-                facet: {
-                    filter: this.filter,
-                },
-            }];
-        }
-        return Promise.resolve(result);
-    },
-});
-
-var Filter = FilterInterface.extend({
-    completion_label: _lt("Filter on: %s"),
-});
-
-var GroupBy = FilterInterface.extend({
-    completion_label: _lt("Group by: %s"),
-});
-
-var Field = FilterInterface.extend(ServicesMixin, {
-    default_operator: '=',
-    /**
-     * @override
-     * @param {Object} field
-     * @param {Object} filter
-     * @param {Object} context needed for extra rpc (i.e. m2o)
-     */
-    init: function (parent, filter, field, context) {
-        this._super.apply(this, arguments);
-
-        this.field = field;
-        this.filter = filter;
-        this.attrs = _.extend({}, field, filter.attrs);
-        this.context = context;
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    getAutocompletionValues: function (value) {
-        return Promise.resolve([{
-            label: this._getAutocompletionLabel(value),
-            facet: this._getFacetValue(value),
-        }]);
-    },
-    /**
-     * TODO: the domain logic (getDomain, operator, etc.) should not be put here
-     * (this has nothing to do with the autocomplete sources).
-     *
-     * This method is used by the ControlPanelModel when setting the
-     * `filter_domain`.
-     *
-     * @param {Object[]} values
-     * @returns {string}
-     */
-    getDomain: function (values) {
-        if (!values.length) { return; }
-
-        var valueToDomain;
-        var self = this;
-        var domain = this.attrs.filter_domain;
-        if (domain) {
-            valueToDomain = function (facetValue) {
-                return Domain.prototype.stringToArray(
-                    domain,
-                    {
-                        // these are the values that can be used in search view
-                        // fields `filter_domain` attribute
-                        self: self._valueFrom(facetValue),
-                        raw_value: facetValue.value,
-                    }
-                );
-            };
-        } else {
-            valueToDomain = function (facetValue) {
-                return self._makeDomain(
-                    self.attrs.name,
-                    self.attrs.operator || self.default_operator,
-                    facetValue
-                );
-            };
-        }
-        var domains = values.map(valueToDomain);
-
-        domains = domains.map(Domain.prototype.arrayToString);
-        return pyUtils.assembleDomains(domains, 'OR');
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @param {any} value
-     * @returns {string}
-     */
-    _getAutocompletionLabel: function (value) {
-        return _.str.sprintf(_.str.escapeHTML(
-            _t("Search %(field)s for: %(value)s")), {
-                field: '<em>' + _.escape(this.attrs.string) + '</em>',
-                value: '<strong>' + _.escape(value) + '</strong>'});
-    },
-    /**
-     * @private
-     * @param {any} value
-     * @returns {Object}
-     */
-    _getFacetValue: function (value) {
-        return {
-            filter: this.filter,
-            values: [{label: value, value: value}],
-        };
-    },
-    /**
-     * Function creating the returned domain for the field, override this
-     * methods in children if you only need to customize the field's domain
-     * without more complex alterations or tests (and without the need to
-     * change override the handling of filter_domain)
-     *
-     * @private
-     * @param {String} name the field's name
-     * @param {String} operator the field's operator (either attribute-specified or default operator for the field
-     * @param {Number|String} facet parsed value for the field
-     * @returns {Array<Array>} domain to include in the resulting search
-     */
-    _makeDomain: function (name, operator, facet) {
-        return [[name, operator, this._valueFrom(facet)]];
-    },
-    /**
-     * @private
-     * @param {Object} facetValue
-     * @param {any} facetValue.value
-     * @returns {any}
-     */
-    _valueFrom: function (facetValue) {
-        return facetValue.value;
-    },
-});
-
-var CharField = Field.extend({
-    default_operator: 'ilike',
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    getAutocompletionValues: function (value) {
-        if (_.isEmpty(value)) { return Promise.resolve(null); }
-        return this._super.apply(this, arguments);
-    },
-});
-
-var NumberField = Field.extend({
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    getAutocompletionValues: function (value) {
-        var val = this.parse(value);
-        if (isNaN(val)) { return Promise.resolve(); }
-        return this._super.apply(this, arguments);
-    },
-});
-
-var IntegerField = NumberField.extend({
-    error_message: _t("not a valid integer"),
-    parse: function (value) {
-        try {
-            return field_utils.parse.integer(value);
-        } catch (e) {
-            return NaN;
-        }
-    },
-});
-
-var FloatField = NumberField.extend({
-    error_message: _t("not a valid number"),
-    parse: function (value) {
-        try {
-            return field_utils.parse.float(value);
-        } catch (e) {
-            return NaN;
-        }
-    },
-});
-
-var SelectionField = Field.extend({
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    getAutocompletionValues: function (value) {
-        var self = this;
-        var results = _(this.attrs.selection).chain()
-            .filter(function (sel) {
-                var selValue = sel[0], label = sel[1];
-                if (selValue === undefined || !label) { return false; }
-                return label.toLowerCase().indexOf(value.toLowerCase()) !== -1;
-            })
-            .map(function (sel) {
-                return {
-                    label: _.escape(sel[1]),
-                    indent: true,
-                    facet: self._getFacetValue(sel)
-                };
-            }).value();
-        if (_.isEmpty(results)) { return Promise.resolve(null); }
-        return Promise.resolve([{
-            label: _.escape(this.attrs.string)
-        }].concat(results));
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @param {any} value
-     * @returns {Object}
-     */
-    _getFacetValue: function (value) {
-        return {
-            filter: this.filter,
-            values: [{label: value[1], value: value[0]}],
-        };
-    },
-});
-
-var BooleanField = SelectionField.extend({
-    /**
-     * @override
-     */
-    init: function () {
-        this._super.apply(this, arguments);
-
-        this.attrs.selection = [
-            [true, _t("Yes")],
-            [false, _t("No")]
-        ];
-    },
-});
-
-var DateField = Field.extend({
-    /**
-     * @override
-     */
-    getAutocompletionValues: function (value) {
-        // Make sure the value has a correct format before the creation of the moment object. See
-        // issue https://github.com/moment/moment/issues/1407
-        var t, v;
-        try {
-            t = (this.attrs && this.attrs.type === 'datetime') ? 'datetime' : 'date';
-            v = field_utils.parse[t](value, {type: t}, {timezone: true});
-        } catch (e) {
-            return Promise.resolve(null);
-        }
-
-        var m = moment(v, t === 'datetime' ? 'YYYY-MM-DD HH:mm:ss' : 'YYYY-MM-DD');
-        if (!m.isValid()) { return Promise.resolve(null); }
-        var dateString = field_utils.format[t](m, {type: t});
-        var label = this._getAutocompletionLabel(dateString);
-        var facet = this._getFacetValue(dateString, m.toDate());
-        return Promise.resolve([{
-            label: label,
-            facet: facet,
-        }]);
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    _getAutocompletionLabel: function (value) {
-        return _.str.sprintf(_.str.escapeHTML(
-            _t("Search %(field)s at: %(value)s")), {
-                field: '<em>' + _.escape(this.attrs.string) + '</em>',
-                value: '<strong>' + value + '</strong>'});
-    },
-    /**
-     * @override
-     * @param {any} rawValue
-     */
-    _getFacetValue: function (value, rawValue) {
-        var facet = this._super.apply(this, arguments);
-        facet.values[0].value = rawValue;
-        return facet;
-    },
-    /**
-     * @override
-     */
-    _valueFrom: function (facetValue) {
-        return time.date_to_str(facetValue.value);
-    },
-});
-
-var DateTimeField = DateField.extend({
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    _valueFrom: function (facetValue) {
-        return time.datetime_to_str(facetValue.value);
-    },
-});
-
-var ManyToOneField = CharField.extend({
-    default_operator: {},
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    getAutocompletionValues: function (value) {
-        if (_.isEmpty(value)) { return Promise.resolve(null); }
-        var label = this._getAutocompletionLabel(value);
-        return Promise.resolve([{
-            label: label,
-            facet: this._getFacetValue(value),
-            expand: this._expand.bind(this),
-        }]);
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    _getExpandedFacetValue: function (value) {
-        return {
-            filter: this.filter,
-            values: [{label: value[1], value: value[0]}],
-        };
-    },
-    /**
-     * @override
-     */
-    _getFacetValue: function (value) {
-        return {
-            filter: this.filter,
-            values: [{label: value, value: value, operator: 'ilike'}],
-        };
-    },
-    /**
-     * @override
-     */
-    _expand: function (value) {
-        var self = this;
-        var args = this.attrs.domain;
-        if (typeof args === 'string') {
-            try {
-                args = Domain.prototype.stringToArray(args);
-            } catch(e) {
-                args = [];
-            }
-        }
-        return this._rpc({
-                model: this.attrs.relation,
-                method: 'name_search',
-                kwargs: {
-                    name: value,
-                    args: args,
-                    limit: 8,
-                    context: this.context,
-                },
-            })
-            .then(function (results) {
-                if (_.isEmpty(results)) { return null; }
-                return _(results).map(function (result) {
-                    return {
-                        label: _.escape(result[1]),
-                        facet: self._getExpandedFacetValue(result)
-                    };
-                });
-            });
-    },
-    /**
-     * @override
-     */
-    _makeDomain: function (name, operator, facetValue) {
-        operator = facetValue.operator || operator;
-
-        switch(operator){
-        case this.default_operator:
-            return [[name, '=', facetValue.value]];
-        case 'ilike':
-            return [[name, 'ilike', facetValue.value]];
-        case 'child_of':
-            return [[name, 'child_of', facetValue.value]];
-        }
-        return this._super(name, operator, facetValue);
-    },
-    /**
-     * @override
-     */
-    _valueFrom: function (facetValue) {
-        return facetValue.label;
-    },
-});
-
-return {
-    BooleanField: BooleanField,
-    CharField: CharField,
-    DateField: DateField,
-    DateTimeField: DateTimeField,
-    Field: Field,
-    Filter: Filter,
-    FloatField: FloatField,
-    GroupBy: GroupBy,
-    IntegerField: IntegerField,
-    ManyToOneField: ManyToOneField,
-    NumberField: NumberField,
-    SelectionField: SelectionField,
-};
-
-});
diff --git a/addons/web/static/src/js/views/control_panel/search/search_bar_autocomplete_sources_registry.js b/addons/web/static/src/js/views/control_panel/search/search_bar_autocomplete_sources_registry.js
deleted file mode 100644
index fd5d1052b0b..00000000000
--- a/addons/web/static/src/js/views/control_panel/search/search_bar_autocomplete_sources_registry.js
+++ /dev/null
@@ -1,37 +0,0 @@
-odoo.define('web.search_bar_autocomplete_sources_registry', function (require) {
-"use strict";
-
-var Registry = require('web.Registry');
-
-return new Registry();
-
-});
-
-odoo.define('web._search_bar_autocomplete_sources_registry', function(require) {
-"use strict";
-
-var registry = require('web.search_bar_autocomplete_sources_registry');
-var SearchBarAutoCompleteSources = require('web.SearchBarAutoCompleteSources');
-
-// fields
-registry
-    .add('char', SearchBarAutoCompleteSources.CharField)
-    .add('text', SearchBarAutoCompleteSources.CharField)
-    .add('html', SearchBarAutoCompleteSources.CharField)
-    .add('boolean', SearchBarAutoCompleteSources.BooleanField)
-    .add('integer', SearchBarAutoCompleteSources.IntegerField)
-    .add('id', SearchBarAutoCompleteSources.IntegerField)
-    .add('float', SearchBarAutoCompleteSources.FloatField)
-    .add('monetary', SearchBarAutoCompleteSources.FloatField)
-    .add('selection', SearchBarAutoCompleteSources.SelectionField)
-    .add('datetime', SearchBarAutoCompleteSources.DateTimeField)
-    .add('date', SearchBarAutoCompleteSources.DateField)
-    .add('many2one', SearchBarAutoCompleteSources.ManyToOneField)
-    .add('many2many', SearchBarAutoCompleteSources.CharField)
-    .add('one2many', SearchBarAutoCompleteSources.CharField);
-
-// others
-registry.add('filter', SearchBarAutoCompleteSources.Filter);
-registry.add('groupby', SearchBarAutoCompleteSources.GroupBy);
-
-});
diff --git a/addons/web/static/src/js/views/control_panel/search/search_facet.js b/addons/web/static/src/js/views/control_panel/search/search_facet.js
deleted file mode 100644
index 22d957c030b..00000000000
--- a/addons/web/static/src/js/views/control_panel/search/search_facet.js
+++ /dev/null
@@ -1,172 +0,0 @@
-odoo.define('web.SearchFacet', function (require) {
-"use strict";
-
-var core = require('web.core');
-var Widget = require('web.Widget');
-
-var _t = core._t;
-
-var SearchFacet = Widget.extend({
-    template: 'SearchView.SearchFacet',
-    events: _.extend({}, Widget.prototype.events, {
-        'click .o_facet_remove': '_onFacetRemove',
-        'compositionend': '_onCompositionend',
-        'compositionstart': '_onCompositionstart',
-        'keydown': '_onKeydown',
-    }),
-    /**
-     * @override
-     * @param {Object} facet
-     */
-    init: function (parent, facet) {
-        this._super.apply(this, arguments);
-
-        var self = this;
-        this.facet = facet;
-        this.facetValues = _.map(this.facet.filters, function (filter) {
-            return self._getFilterDescription(filter);
-        });
-        this.separator = this._getSeparator();
-        this.icon = this._getIcon();
-        this._isComposing = false;
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * Get the correct description according to filter.
-     *
-     * @private
-     * @returns {string}
-     */
-    _getFilterDescription: function (filter) {
-        if (filter.type === 'field') {
-            var values = _.pluck(filter.autoCompleteValues, 'label');
-            return values.join(_t(' or '));
-        }
-        var description = filter.description;
-        if (filter.hasOptions) {
-            if (filter.type === 'filter') {
-                const optionDescriptions = [];
-                const sortFunction = (o1, o2) =>
-                    filter.options.findIndex(o => o.optionId === o1) - filter.options.findIndex(o => o.optionId === o2);
-                const p = _.partition([...filter.currentOptionIds], optionId =>
-                    filter.options.find(o => o.optionId === optionId).groupId === 1);
-                const yearIds = p[1].sort(sortFunction);
-                const otherOptionIds = p[0].sort(sortFunction);
-                // the following case corresponds to years selected only
-                if (otherOptionIds.length === 0) {
-                    yearIds.forEach(yearId => {
-                        const d = filter.basicDomains[yearId];
-                        optionDescriptions.push(d.description);
-                    });
-                } else {
-                    otherOptionIds.forEach(optionId => {
-                        yearIds.forEach(yearId => {
-                            const d = filter.basicDomains[yearId + '__' + optionId];
-                            optionDescriptions.push(d.description);
-                        });
-                    });
-                }
-                description += ': ' + optionDescriptions.join('/');
-            } else {
-                description = description += ': ' +
-                                filter.options.find(o => o.optionId === filter.optionId).description;
-            }
-        }
-        if (filter.type === 'timeRange') {
-            var timeRangeValue =_.findWhere(filter.timeRangeOptions, {
-                optionId: filter.timeRangeId,
-            });
-            description += ': ' + timeRangeValue.description;
-            if (filter.comparisonTimeRangeId) {
-                var comparisonTimeRangeValue =_.findWhere(filter.comparisonTimeRangeOptions, {
-                    optionId: filter.comparisonTimeRangeId,
-                });
-                description += ' / ' + comparisonTimeRangeValue.description;
-            }
-        }
-        return description;
-    },
-    /**
-     * Get the correct icon according to facet type.
-     *
-     * @private
-     * @returns {string}
-     */
-    _getIcon: function () {
-        var icon;
-        if (this.facet.type === 'filter') {
-            icon = 'fa-filter';
-        } else if (this.facet.type === 'groupBy') {
-            icon = 'fa-bars';
-        } else if (this.facet.type === 'favorite') {
-            icon = 'fa-star';
-        } else if (this.facet.type === 'timeRange') {
-            icon = 'fa-calendar';
-        }
-        return icon;
-    },
-    /**
-     * Get the correct separator according to facet type.
-     *
-     * @private
-     * @returns {string}
-     */
-    _getSeparator: function () {
-        var separator;
-        if (this.facet.type === 'filter') {
-            separator = _t('or');
-        } else if (this.facet.type === 'field') {
-            separator = _t('or');
-        } else if (this.facet.type === 'groupBy') {
-            separator = '>';
-        }
-        return separator;
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @param {CompositionEvent} ev
-     */
-    _onCompositionend: function (ev) {
-        this._isComposing = false;
-    },
-    /**
-     * @private
-     * @param {CompositionEvent} ev
-     */
-    _onCompositionstart: function (ev) {
-        this._isComposing = true;
-    },
-    /**
-     * @private
-     */
-    _onFacetRemove: function () {
-        this.trigger_up('facet_removed', {group: this.facet});
-    },
-    /**
-     * @private
-     * @param {KeyboardEvent} ev
-     */
-    _onKeydown: function (ev) {
-        if (this._isComposing) {
-            return;
-        }
-        switch (ev.which) {
-            case $.ui.keyCode.BACKSPACE:
-                this.trigger_up('facet_removed', {group: this.facet});
-                break;
-        }
-    },
-});
-
-return SearchFacet;
-
-});
diff --git a/addons/web/static/src/js/views/control_panel/search/search_filters.js b/addons/web/static/src/js/views/control_panel/search/search_filters.js
deleted file mode 100644
index f6b4bc13f6b..00000000000
--- a/addons/web/static/src/js/views/control_panel/search/search_filters.js
+++ /dev/null
@@ -1,418 +0,0 @@
-odoo.define('web.search_filters', function (require) {
-"use strict";
-
-var core = require('web.core');
-var datepicker = require('web.datepicker');
-var field_utils = require('web.field_utils');
-var search_filters_registry = require('web.search_filters_registry');
-var Widget = require('web.Widget');
-
-var _t = core._t;
-var _lt = core._lt;
-
-var ExtendedSearchProposition = Widget.extend({
-    template: 'SearchView.extended_search.proposition',
-    events: {
-        'change .o_searchview_extended_prop_field': 'changed',
-        'change .o_searchview_extended_prop_op': 'operator_changed',
-        'click .o_searchview_extended_delete_prop': function (e) {
-            e.stopPropagation();
-            this.trigger_up('remove_proposition');
-        },
-        'keyup .o_searchview_extended_prop_value': function (ev) {
-            if (ev.which === $.ui.keyCode.ENTER) {
-                this.trigger_up('confirm_proposition');
-            }
-        },
-    },
-    /**
-     * @override
-     * @param fields
-     */
-    init: function (parent, fields) {
-        this._super(parent);
-        this.fields = _(fields).chain()
-            .map(function (val, key) { return _.extend({}, val, {'name': key}); })
-            .filter(function (field) { return !field.deprecated && field.searchable; })
-            .sortBy(function (field) {return field.string;})
-            .value();
-        this.attrs = {_: _, fields: this.fields, selected: null};
-        this.value = null;
-    },
-    start: function () {
-        var parent =  this._super();
-        parent.then(this.proxy('changed'));
-        return parent;
-    },
-    changed: function () {
-        var nval = this.$(".o_searchview_extended_prop_field").val();
-        if(this.attrs.selected === null || this.attrs.selected === undefined || nval !== this.attrs.selected.name) {
-            this.select_field(_.detect(this.fields, function (x) {return x.name === nval;}));
-        }
-    },
-    operator_changed: function (e) {
-        this.value.show_inputs($(e.target));
-    },
-    /**
-     * Selects the provided field object
-     *
-     * @param field a field descriptor object (as returned by fields_get, augmented by the field name)
-     */
-    select_field: function (field) {
-        var self = this;
-        if(this.attrs.selected !== null && this.attrs.selected !== undefined) {
-            this.value.destroy();
-            this.value = null;
-            this.$('.o_searchview_extended_prop_op').html('');
-        }
-        this.attrs.selected = field;
-        if(field === null || field === undefined) {
-            return;
-        }
-
-        var type = field.type;
-        var Field = search_filters_registry.getAny([type, "char"]);
-
-        this.value = new Field(this, field);
-        _.each(this.value.operators, function (operator) {
-            $('<option>', {value: operator.value})
-                .text(String(operator.text))
-                .appendTo(self.$('.o_searchview_extended_prop_op'));
-        });
-        var $value_loc = this.$('.o_searchview_extended_prop_value').show().empty();
-        this.value.appendTo($value_loc);
-
-    },
-    get_filter: function () {
-        if (this.attrs.selected === null || this.attrs.selected === undefined) {
-            return null;
-        }
-        var field = this.attrs.selected,
-            op_select = this.$('.o_searchview_extended_prop_op')[0],
-            operator = op_select.options[op_select.selectedIndex];
-
-        return {
-            attrs: {
-                domain: this.value.get_domain(field, operator),
-                string: this.value.get_label(field, operator),
-            },
-            children: [],
-            tag: 'filter',
-        };
-    },
-});
-
-var Field = Widget.extend({
-    init: function (parent, field) {
-        this._super(parent);
-        this.field = field;
-    },
-    get_label: function (field, operator) {
-        var format;
-        switch (operator.value) {
-        case '∃': case '∄': format = _t('%(field)s %(operator)s'); break;
-        default: format = _t('%(field)s %(operator)s "%(value)s"'); break;
-        }
-        return this.format_label(format, field, operator);
-    },
-    format_label: function (format, field, operator) {
-        return _.str.sprintf(format, {
-            field: field.string,
-            // According to spec, HTMLOptionElement#label should return
-            // HTMLOptionElement#text when not defined/empty, but it does
-            // not in older Webkit (between Safari 5.1.5 and Chrome 17) and
-            // Gecko (pre Firefox 7) browsers, so we need a manual fallback
-            // for those
-            operator: operator.label || operator.text,
-            value: this
-        });
-    },
-    get_domain: function (field, operator) {
-        switch (operator.value) {
-        case '∃': return [[field.name, '!=', false]];
-        case '∄': return [[field.name, '=', false]];
-        default: return [[field.name, operator.value, this.get_value()]];
-        }
-    },
-    show_inputs: function ($operator) {
-        var $value = this.$el.parent();
-        switch ($operator.val()) {
-            case '∃':
-            case '∄':
-                $value.hide();
-                break;
-            default:
-                $value.show();
-        }
-    },
-    /**
-     * Returns a human-readable version of the value, in case the "logical"
-     * and the "semantic" values of a field differ (as for selection fields,
-     * for instance).
-     *
-     * The default implementation simply returns the value itself.
-     *
-     * @return {String} human-readable version of the value
-     */
-    toString: function () {
-        return this.get_value();
-    }
-});
-
-var Char = Field.extend({
-    tagName: 'input',
-    className: 'o_input',
-    attributes: {
-        type: 'text'
-    },
-    operators: [
-        {value: "ilike", text: _lt("contains")},
-        {value: "not ilike", text: _lt("doesn't contain")},
-        {value: "=", text: _lt("is equal to")},
-        {value: "!=", text: _lt("is not equal to")},
-        {value: "∃", text: _lt("is set")},
-        {value: "∄", text: _lt("is not set")}
-    ],
-    get_value: function () {
-        return this.$el.val();
-    }
-});
-
-var DateTime = Field.extend({
-    tagName: 'span',
-    serverFormat: 'YYYY-MM-DD HH:mm:ss',
-    attributes: {
-        type: 'datetime'
-    },
-    operators: [
-        {value: "between", text: _lt("is between")},
-        {value: "=", text: _lt("is equal to")},
-        {value: "!=", text: _lt("is not equal to")},
-        {value: ">", text: _lt("is after")},
-        {value: "<", text: _lt("is before")},
-        {value: ">=", text: _lt("is after or equal to")},
-        {value: "<=", text: _lt("is before or equal to")},
-        {value: "∃", text: _lt("is set")},
-        {value: "∄", text: _lt("is not set")}
-    ],
-    /**
-     * Gets the value of the datepicker
-     *
-     * @public
-     * @param {Integer} [index] The datepicker's index.
-     *  0 for the lower boundary (default)
-     *  1 for the higher boundary
-     *
-     * @return {Moment} The value in UTC
-     */
-    get_value: function (index) {
-        // retrieve the datepicker value
-        var value = this["datewidget_" + (index || 0)].getValue().clone();
-        // convert to utc
-        return value.add(-this.getSession().getTZOffset(value), 'minutes');
-    },
-    get_domain: function (field, operator) {
-        switch (operator.value) {
-        case '∃':
-            return [[field.name, '!=', false]];
-        case '∄':
-            return [[field.name, '=', false]];
-        case 'between':
-            return [
-                [field.name, '>=', this._formatMomentToServer(this.get_value(0))],
-                [field.name, '<=', this._formatMomentToServer(this.get_value(1))]
-            ];
-        default:
-            return [[field.name, operator.value, this._formatMomentToServer(this.get_value())]];
-        }
-    },
-    show_inputs: function ($operator) {
-        this._super.apply(this, arguments);
-
-        if ($operator.val() === "between") {
-            this.datewidget_1.do_show();
-        } else {
-            this.datewidget_1.do_hide();
-        }
-    },
-    toString: function () {
-        var str = field_utils.format[this.attributes.type](this.get_value(), {type: this.attributes.type});
-        // the second datewidget might have been hidden because the operator has changed
-        var date_1_value = this.datewidget_1 && !this.datewidget_1.$el.hasClass('o_hidden') && this.get_value(1);
-        if (date_1_value) {
-            str += _lt(" and ") + field_utils.format[this.attributes.type](date_1_value, {type: this.attributes.type});
-        }
-        return str;
-    },
-    start: function () {
-        return Promise.all([
-            this._super.apply(this, arguments),
-            this._create_new_widget("datewidget_0", '00:00:00', 'hh:mm:ss'),
-            this._create_new_widget("datewidget_1", '23:59:59', 'hh:mm:ss'),
-        ]).then(() => {
-            if (this.operators[0].value !== "between") {
-                this.datewidget_1.do_hide();
-            }
-        });
-    },
-    _create_new_widget: function (name, ...time) {
-        this[name] = new (this._get_widget_class())(this);
-        return this[name].appendTo(this.$el).then((function () {
-            this[name].setValue(moment(...time));
-        }).bind(this));
-    },
-    _get_widget_class: function () {
-        return datepicker.DateTimeWidget;
-    },
-    /**
-     * Transform a Moment in a server acceptable format
-     *
-     * @private
-     * @param {Moment} momentValue The moment to get the string for
-     *
-     * @return {String} Represents the value in UTC
-     */
-    _formatMomentToServer: function (momentValue) {
-        return momentValue.locale('en').format(this.serverFormat);
-    },
-});
-
-var Date = DateTime.extend({
-    serverFormat: 'YYYY-MM-DD',
-    attributes: {
-        type: 'date'
-    },
-    operators: [
-        {value: "=", text: _lt("is equal to")},
-        {value: "!=", text: _lt("is not equal to")},
-        {value: ">", text: _lt("is after")},
-        {value: "<", text: _lt("is before")},
-        {value: ">=", text: _lt("is after or equal to")},
-        {value: "<=", text: _lt("is before or equal to")},
-        {value: "between", text: _lt("is between")},
-        {value: "∃", text: _lt("is set")},
-        {value: "∄", text: _lt("is not set")}
-    ],
-    /**
-     * @override
-     */
-    get_value: function (index) {
-        // retrieve the datepicker value
-        var value = this["datewidget_" + (index || 0)].getValue();
-        return value && value.clone();
-    },
-    _get_widget_class: function () {
-        return datepicker.DateWidget;
-    },
-});
-
-var Integer = Field.extend({
-    tagName: 'input',
-    className: 'o_input',
-    attributes: {
-        type: 'number',
-        value: '0',
-    },
-    operators: [
-        {value: "=", text: _lt("is equal to")},
-        {value: "!=", text: _lt("is not equal to")},
-        {value: ">", text: _lt("greater than")},
-        {value: "<", text: _lt("less than")},
-        {value: ">=", text: _lt("greater than or equal to")},
-        {value: "<=", text: _lt("less than or equal to")},
-        {value: "∃", text: _lt("is set")},
-        {value: "∄", text: _lt("is not set")}
-    ],
-    toString: function () {
-        return this.$el.val();
-    },
-    get_value: function () {
-        try {
-            var val =this.$el.val();
-            return field_utils.parse.integer(val === "" ? 0 : val);
-        } catch (e) {
-            return "";
-        }
-    }
-});
-
-var Id = Integer.extend({
-    operators: [{value: "=", text: _lt("is")}]
-});
-
-var Float = Field.extend({
-    template: 'SearchView.extended_search.proposition.float',
-    operators: [
-        {value: "=", text: _lt("is equal to")},
-        {value: "!=", text: _lt("is not equal to")},
-        {value: ">", text: _lt("greater than")},
-        {value: "<", text: _lt("less than")},
-        {value: ">=", text: _lt("greater than or equal to")},
-        {value: "<=", text: _lt("less than or equal to")},
-        {value: "∃", text: _lt("is set")},
-        {value: "∄", text: _lt("is not set")}
-    ],
-    init: function (parent) {
-        this._super(parent);
-        this.decimal_point = _t.database.parameters.decimal_point;
-    },
-    toString: function () {
-        return this.$el.val();
-    },
-    get_value: function () {
-        try {
-            var val =this.$el.val();
-            return field_utils.parse.float(val === "" ? 0.0 : val);
-        } catch (e) {
-            return "";
-        }
-    }
-});
-
-var Selection = Field.extend({
-    template: 'SearchView.extended_search.proposition.selection',
-    operators: [
-        {value: "=", text: _lt("is")},
-        {value: "!=", text: _lt("is not")},
-        {value: "∃", text: _lt("is set")},
-        {value: "∄", text: _lt("is not set")}
-    ],
-    toString: function () {
-        var select = this.$el[0];
-        var option = select.options[select.selectedIndex];
-        return option.label || option.text;
-    },
-    get_value: function () {
-        return this.$el.val();
-    }
-});
-
-var Boolean = Field.extend({
-    tagName: 'span',
-    operators: [
-        {value: "=", text: _lt("is true")},
-        {value: "!=", text: _lt("is false")}
-    ],
-    get_label: function (field, operator) {
-        return this.format_label(
-            _t('%(field)s %(operator)s'), field, operator);
-    },
-    get_value: function () {
-        return true;
-    }
-});
-
-return {
-    Boolean: Boolean,
-    Char: Char,
-    Date: Date,
-    DateTime: DateTime,
-    ExtendedSearchProposition: ExtendedSearchProposition,
-    Field: Field,
-    Float: Float,
-    Id: Id,
-    Integer: Integer,
-    Selection: Selection,
-};
-
-});
diff --git a/addons/web/static/src/js/views/control_panel/search/search_filters_registry.js b/addons/web/static/src/js/views/control_panel/search/search_filters_registry.js
deleted file mode 100644
index d6cbb9be2d0..00000000000
--- a/addons/web/static/src/js/views/control_panel/search/search_filters_registry.js
+++ /dev/null
@@ -1,30 +0,0 @@
-odoo.define('web.search_filters_registry', function (require) {
-"use strict";
-
-var Registry = require('web.Registry');
-
-return new Registry();
-
-});
-
-odoo.define('web._search_filters_registry', function(require) {
-"use strict";
-
-var registry = require('web.search_filters_registry');
-var search_filters = require('web.search_filters');
-
-registry
-    .add('boolean', search_filters.Boolean)
-    .add('char', search_filters.Char)
-    .add('date', search_filters.Date)
-    .add('datetime', search_filters.DateTime)
-    .add('float', search_filters.Float)
-    .add('id', search_filters.Id)
-    .add('integer', search_filters.Integer)
-    .add('many2many', search_filters.Char)
-    .add('many2one', search_filters.Char)
-    .add('monetary', search_filters.Float)
-    .add('one2many', search_filters.Char)
-    .add('text', search_filters.Char)
-    .add('selection', search_filters.Selection);
-});
diff --git a/addons/web/static/src/js/views/control_panel/search/time_range_menu.js b/addons/web/static/src/js/views/control_panel/search/time_range_menu.js
deleted file mode 100644
index 8b6c6552c47..00000000000
--- a/addons/web/static/src/js/views/control_panel/search/time_range_menu.js
+++ /dev/null
@@ -1,106 +0,0 @@
-odoo.define('web.TimeRangeMenu', function (require) {
-"use strict";
-
-var config = require('web.config');
-var controlPanelViewParameters = require('web.controlPanelViewParameters');
-var Widget = require('web.Widget');
-
-var COMPARISON_TIME_RANGE_OPTIONS = controlPanelViewParameters.COMPARISON_TIME_RANGE_OPTIONS;
-var PERIOD_OPTIONS = controlPanelViewParameters.PERIOD_OPTIONS;
-
-var TimeRangeMenu = Widget.extend({
-    template: 'web.TimeRangeMenu',
-    events: {
-        'click .o_apply_range': '_onApplyButtonClick',
-        'click .o_comparison_checkbox': '_onCheckBoxClick',
-    },
-    /**
-     * @override
-     * @param {Widget} parent
-     * @param {Object[]} timeRanges
-     *
-     */
-    init: function (parent, timeRanges) {
-        this._super.apply(this, arguments);
-        // determine header style
-        this.isMobile = config.device.isMobile;
-        this.symbol = this.isMobile ? 'fa fa-chevron-right float-right mt4' : 'caret';
-        // fixed parameters
-        this.periodOptions = PERIOD_OPTIONS;
-        this.comparisonTimeRangeOptions = COMPARISON_TIME_RANGE_OPTIONS;
-        this.periodGroups = _.uniq(PERIOD_OPTIONS.map(function (option) {
-            return option.groupId;
-        }));
-        // variable parameters
-        this.timeRanges = timeRanges;
-        this.configuration = {
-            comparisonIsSelected: false,
-            comparisonTimeRangeId: false,
-            id: false,
-            timeRangeId: false,
-        };
-        this._configure();
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @param {Object[]} timeRanges
-     */
-    update: function (timeRanges) {
-        this.timeRanges = timeRanges;
-        this._configure();
-        this.renderElement();
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     */
-    _configure: function () {
-        this.configuration = this.timeRanges.find(function (timeRange) {
-            return timeRange.isActive;
-        }) || this.configuration;
-        this.configuration.comparisonIsSelected = !!this.configuration.comparisonTimeRangeId;
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     */
-    _onApplyButtonClick: function () {
-        var id = this.$('.o_date_field_selector').val();
-        var timeRangeId = this.$('.o_time_range_selector').val();
-        var comparisonTimeRangeId = false;
-        if (this.configuration.comparisonIsSelected) {
-            comparisonTimeRangeId = this.$('.o_comparison_time_range_selector').val();
-        }
-        this.trigger_up('activate_time_range', {
-            id: id,
-            timeRangeId: timeRangeId,
-            comparisonTimeRangeId: comparisonTimeRangeId
-        });
-    },
-    /**
-     * @private
-     * @param {MouseEvent} ev
-     */
-    _onCheckBoxClick: function (ev) {
-        ev.stopPropagation();
-        this.configuration.comparisonIsSelected = this.$('.o_comparison_checkbox').prop('checked');
-        this.$('.o_comparison_time_range_selector').toggleClass('o_hidden');
-        this.$el.addClass('open');
-    }
-});
-
-return TimeRangeMenu;
-
-});
diff --git a/addons/web/static/src/js/widgets/auto_complete.js b/addons/web/static/src/js/widgets/auto_complete.js
deleted file mode 100644
index fef24527e46..00000000000
--- a/addons/web/static/src/js/widgets/auto_complete.js
+++ /dev/null
@@ -1,268 +0,0 @@
-odoo.define('web.AutoComplete', function (require) {
-"use strict";
-
-var Widget = require('web.Widget');
-
-return Widget.extend({
-    template: "SearchView.autocomplete",
-
-    // Parameters for autocomplete constructor:
-    //
-    // parent: this is used to detect keyboard events
-    //
-    // options.source: function ({term:query}, callback).  This function will be called to
-    //      obtain the search results corresponding to the query string.  It is assumed that
-    //      options.source will call callback with the results.
-    // options.select: function (ev, {item: {facet:facet}}).  Autocomplete widget will call
-    //      that function when a selection is made by the user
-    // options.get_search_string: function ().  This function will be called by autocomplete
-    //      to obtain the current search string.
-    init: function (parent, options) {
-        this._super(parent);
-        this.$input = options.$input;
-        this.source = options.source;
-        this.select = options.select;
-        this.get_search_string = options.get_search_string;
-
-        this.current_result = null;
-
-        this.searching = true;
-        this.search_string = '';
-        this.current_search = null;
-        this._isInputComposing = false;
-    },
-    start: function () {
-        var self = this;
-        this.$input.on('compositionend', function (ev) {
-            self._isInputComposing = false;
-        });
-        this.$input.on('compositionstart', function (ev) {
-            self._isInputComposing = true;
-        });
-        this.$input.on('keyup', function (ev) {
-            if (ev.which === $.ui.keyCode.RIGHT && !self._isInputComposing) {
-                self.searching = true;
-                ev.preventDefault();
-                return;
-            }
-            if (ev.which === $.ui.keyCode.ENTER && !self._isInputComposing) {
-                if (self.search_string.length) {
-                    self.select_item(ev);
-                }
-                return;
-            }
-            self._updateSearch();
-        });
-        this.$input.on('input', function (ev) {
-            if (ev.originalEvent.inputType === 'insertCompositionText') {
-                // click inside keyboard IME suggestions menu
-                self._updateSearch();
-            }
-        });
-        this.$input.on('keypress', function (ev) {
-            if (ev.which > 31 && ev.which !== 127) {
-                // we filter control character out of the search string
-                self.search_string = self.search_string + String.fromCharCode(ev.which);
-            }
-            if (self.search_string.length) {
-                self.searching = true;
-                var search_string = self.search_string;
-                self.initiate_search(search_string);
-            } else {
-                self.close();
-            }
-        });
-        this.$input.on('keydown', function (ev) {
-            if (self._isInputComposing) {
-                return;
-            }
-            switch (ev.which) {
-                case $.ui.keyCode.ENTER:
-
-                // TAB and direction keys are handled at KeyDown because KeyUp
-                // is not guaranteed to fire.
-                // See e.g. https://github.com/aef-/jquery.masterblaster/issues/13
-                case $.ui.keyCode.TAB:
-                    if (self.search_string.length) {
-                        self.select_item(ev);
-                    }
-                    break;
-                case $.ui.keyCode.DOWN:
-                    self.move('down');
-                    self.searching = false;
-                    ev.preventDefault();
-                    break;
-                case $.ui.keyCode.UP:
-                    self.move('up');
-                    self.searching = false;
-                    ev.preventDefault();
-                    break;
-                case $.ui.keyCode.RIGHT:
-                    if(self.$input[0].selectionStart < self.search_string.length) {
-                        ev.stopPropagation();
-                        return;
-                    }
-                    self.searching = false;
-                    var current = self.current_result;
-                    if (current && current.expand && !current.expanded) {
-                        self.expand();
-                        self.searching = true;
-                        ev.stopPropagation();
-                    }
-                    ev.preventDefault();
-                    break;
-                case $.ui.keyCode.LEFT:
-                     if(self.$input[0].selectionStart > 0) {
-                        ev.stopPropagation();
-                     }
-                     break;
-                case $.ui.keyCode.ESCAPE:
-                    self.close();
-                    self.searching = false;
-                    break;
-            }
-        });
-    },
-    initiate_search: function (query) {
-        if (query === this.search_string && query !== this.current_search) {
-            this.search(query);
-        }
-    },
-    search: function (query) {
-        var self = this;
-        this.current_search = query;
-        this.source({term:query}, function (results) {
-            if (results.length) {
-                self.render_search_results(results);
-                self.focus_element(self.$('li:first-child'));
-            } else {
-                self.close();
-            }
-        });
-    },
-    render_search_results: function (results) {
-        var self = this;
-        var $list = this.$el;
-        $list.empty();
-        results.forEach(function (result) {
-            var $item = self.make_list_item(result).appendTo($list);
-            result.$el = $item;
-        });
-        // IE9 doesn't support addEventListener with option { once: true }
-        this.el.onmousemove = function (ev) {
-            self.$('li').each(function (index, li) {
-                li.onmouseenter = self.focus_element.bind(self, $(li));
-            });
-            var targetFocus = ev.target.tagName === 'LI' ?
-                ev.target :
-                ev.target.closest('li');
-            self.focus_element($(targetFocus));
-            self.el.onmousemove = null;
-        };
-        this.show();
-    },
-    make_list_item: function (result) {
-        var self = this;
-        var $li = $('<li>')
-            .mousedown(function (ev) {
-                if (ev.button === 0) { // left button
-                    self.select(ev, {item: {facet: result.facet}});
-                    self.close();
-                }
-            })
-            .data('result', result);
-        if (result.expand) {
-            var $expand = $('<a class="o-expand" href="#">').appendTo($li);
-            $expand.mousedown(function (ev) {
-                ev.stopPropagation();
-                ev.preventDefault(); // to prevent dropdown from closing
-                if (result.expanded) {
-                    self.fold();
-                } else {
-                    self.expand();
-                }
-            });
-            $expand.click(function(ev) {
-                ev.preventDefault(); // to prevent url from changing due to href="#"
-            });
-            result.expanded = false;
-        }
-        if (result.indent) $li.addClass('o-indent');
-        $li.append($('<a href="#">').html(result.label));
-        return $li;
-    },
-    expand: function () {
-        var self = this;
-        var current_result = this.current_result;
-        current_result.expand(this.get_search_string()).then(function (results) {
-            (results || [{label: '(no result)'}]).reverse().forEach(function (result) {
-                result.indent = true;
-                var $li = self.make_list_item(result);
-                current_result.$el.after($li);
-            });
-            self.current_result.expanded = true;
-            self.current_result.$el.find('a.o-expand').removeClass('o-expand').addClass('o-expanded');
-        });
-    },
-    fold: function () {
-        var $next = this.current_result.$el.next();
-        while ($next.hasClass('o-indent')) {
-            $next.remove();
-            $next = this.current_result.$el.next();
-        }
-        this.current_result.expanded = false;
-        this.current_result.$el.find('a.o-expanded').removeClass('o-expanded').addClass('o-expand');
-    },
-    focus_element: function ($li) {
-        this.$('li').removeClass('o-selection-focus');
-        $li.addClass('o-selection-focus');
-        this.current_result = $li.data('result');
-    },
-    select_item: function (ev) {
-        this.select(ev, {item: {facet: this.current_result.facet}});
-        this.close();
-    },
-    show: function () {
-        this.$el.show();
-    },
-    close: function () {
-        this.current_search = null;
-        this.search_string = '';
-        this.searching = true;
-        this.$el.hide();
-    },
-    move: function (direction) {
-        var $next;
-        if (direction === 'down') {
-            $next = this.$('li.o-selection-focus').next();
-            if (!$next.length) $next = this.$('li').first();
-        } else {
-            $next = this.$('li.o-selection-focus').prev();
-            if (!$next.length) $next = this.$('li').last();
-        }
-        this.focus_element($next);
-    },
-    is_expandable: function () {
-        return !!this.$('.o-selection-focus .o-expand').length;
-    },
-    is_expanded: function() {
-        return this.$el[0].style.display === "block";
-    },
-    /**
-     * Update search dropdown menu based on new input content.
-     *
-     * @private
-     */
-    _updateSearch: function () {
-        var search_string = this.get_search_string();
-        if (this.search_string !== search_string) {
-            if (search_string.length) {
-                this.search_string = search_string;
-                this.initiate_search(search_string);
-            } else {
-                this.close();
-            }
-        }
-    },
-});
-});
diff --git a/addons/web/static/src/js/widgets/dropdown_menu.js b/addons/web/static/src/js/widgets/dropdown_menu.js
deleted file mode 100644
index d8663731c67..00000000000
--- a/addons/web/static/src/js/widgets/dropdown_menu.js
+++ /dev/null
@@ -1,145 +0,0 @@
-odoo.define('web.DropdownMenu', function (require) {
-"use strict";
-
-var core = require('web.core');
-var Widget = require('web.Widget');
-
-var QWeb = core.qweb;
-
-var _t = core._t;
-
-var DropdownMenu = Widget.extend({
-    template: 'web.DropdownMenu',
-
-    events: {
-        'click .o_menu_item': '_onItemClick',
-        'click .o_item_option': '_onOptionClick',
-        'click span.o_trash_button': '_onTrashButtonClick',
-        'hidden.bs.dropdown': '_onBootstrapClose',
-        'click .dropdown-item-text': '_onDropDownItemTextClick',
-    },
-
-    init: function (parent, items) {
-        this._super(parent);
-        // should be specified
-        this.dropdownCategory = null;
-        this.dropdownTitle = null;
-        this.dropdownIcon = null;
-        this.dropdownSymbol = false;
-        // this parameter fixes the menu style. By default,
-        // the style used is the one used in the search view
-        this.dropdownStyle = {
-                el: {class: 'btn-group o_dropdown', attrs: {}},
-                mainButton: {
-                    class: 'o_dropdown_toggler_btn btn btn-secondary ' +
-                        'dropdown-toggle ' +
-                        (this.dropdownSymbol ? 'o-no-caret' : '')
-                },
-        };
-        this.items = items;
-        this.openItems = {};
-    },
-    /**
-     * @override
-     */
-    start: function () {
-        this.$menu = this.$('.o_dropdown_menu');
-        this.$dropdownReference = this.$('.o_dropdown_toggler_btn');
-
-         if (_t.database.parameters.direction === 'rtl') {
-            this.$menu.addClass('dropdown-menu-right');
-        }
-        return this._super.apply(this, arguments);
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @param {Object} items
-     */
-    update: function (items) {
-        this.items = items;
-        this._renderMenuItems();
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     */
-    _renderMenuItems: function () {
-        var newMenuItems = QWeb.render('DropdownMenu.MenuItems', {widget: this});
-        this.$el.find('.o_menu_item, .dropdown-divider[data-removable="1"]').remove();
-        this.$('.o_dropdown_menu').prepend(newMenuItems);
-    },
-
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * This method is called when Bootstrap trigger a 'close' event (for example
-     * when the user clicks outside the dropdown menu).
-     *
-     * @private
-     * @param {jQueryEvent} event
-     */
-    _onBootstrapClose: function () {
-        this.openItems = {};
-        this._renderMenuItems();
-    },
-    /**
-     * Reacts to click on bootstrap's dropdown-item-text
-     * Protects against Bootstrap dropdown close from inside click
-     *
-     * @private
-     */
-    _onDropDownItemTextClick: function (ev) {
-        ev.stopPropagation();
-    },
-    /**
-     * @private
-     * @param {MouseEvent} event
-     */
-    _onItemClick: function (event) {
-        event.preventDefault();
-        event.stopPropagation();
-        var id = $(event.currentTarget).data('id');
-        var item = this.items.find(function (item) {
-            return item.id === id;
-        });
-        if (item.hasOptions) {
-            this.openItems[id] = !this.openItems[id];
-            this._renderMenuItems();
-        } else {
-            this.trigger_up('menu_item_clicked', {id: id});
-        }
-    },
-    /**
-     * @private
-     * @param {MouseEvent} event
-     */
-    _onOptionClick: function (event) {
-        event.preventDefault();
-        event.stopPropagation();
-        var optionId = $(event.currentTarget).data('option_id');
-        var id = $(event.currentTarget).data('item_id');
-        this.trigger_up('item_option_clicked', {id: id, optionId: optionId});
-    },
-    /**
-     * @private
-     * @param {MouseEvent} event
-     *
-     * To implement in child
-     */
-     _onTrashButtonClick: function (event) {
-     },
-});
-
-return DropdownMenu;
-
-});
\ No newline at end of file
diff --git a/addons/web/static/src/scss/control_panel.scss b/addons/web/static/src/scss/control_panel.scss
index 490b6a1d8ac..77def271d55 100644
--- a/addons/web/static/src/scss/control_panel.scss
+++ b/addons/web/static/src/scss/control_panel.scss
@@ -45,7 +45,7 @@
         display: flex;
         justify-content: space-between;
 
-        > .o_cp_sidebar {
+        > .o_cp_action_menus {
             padding-right: 10px;
 
             .o_hidden_input_file {
@@ -83,14 +83,14 @@
             text-align: center;
             user-select: none;
 
-            > div {
+            .o_pager {
                 display: flex;
                 align-items: center;
-            }
 
-            .o_pager_counter {
-                margin-right: 5px;
-                min-width: $o-statbutton-height;
+                .o_pager_counter {
+                    margin-right: 5px;
+                    min-width: $o-statbutton-height;
+                }
             }
         }
 
@@ -123,12 +123,17 @@
     }
 }
 
-// Pager input (to edit pager values)
-.o_pager_value > input {
+.o_pager_value {
     display: inline-block;
-    width: 60px;
-    text-align: right;
+}
 
+span.o_pager_value {
+    border-bottom: 1px solid transparent;
+}
+
+input.o_pager_value {
+    text-align: right;
+    width: 60px;
     &:focus {
         outline: none;
     }
diff --git a/addons/web/static/src/scss/dropdown_menu.scss b/addons/web/static/src/scss/dropdown_menu.scss
index 7ce7412b6d0..d2da44a3125 100644
--- a/addons/web/static/src/scss/dropdown_menu.scss
+++ b/addons/web/static/src/scss/dropdown_menu.scss
@@ -17,9 +17,6 @@
                 color: darken($o-main-text-color, 10%);
             }
         }
-        .dropdown-divider:first-child {
-            display: none;
-        }
     }
 }
 
diff --git a/addons/web/static/src/scss/search_view.scss b/addons/web/static/src/scss/search_view.scss
index 3a4aaae28dc..a2a8e80669a 100644
--- a/addons/web/static/src/scss/search_view.scss
+++ b/addons/web/static/src/scss/search_view.scss
@@ -1,93 +1,88 @@
-@mixin o-search-options-dropdown-custom-item {
-    width: auto;
-    max-width: 250px;
-}
-
 .o_searchview {
     align-items: flex-end;
-    position: relative;
     padding: 0 20px 1px 0;
+    position: relative;
 
     .o_searchview_more {
-        font-size: 16px;
         cursor: pointer;
+        font-size: 16px;
     }
 
     .o_searchview_input_container {
-        position: relative;
         display: flex;
         flex-flow: row wrap;
+        position: relative;
 
         .o_searchview_facet {
-            $o-searchview-facet-remove-width: 18px;
-            flex: 0 0 auto;
-            max-width: 100%;
             display: flex;
-            position: relative;
+            flex: 0 0 auto;
             margin: 1px 3px 0 0;
+            max-width: 100%;
+            position: relative;
+            $o-searchview-facet-remove-width: 18px;
 
             .o_searchview_facet_label {
-                flex: 0 0 auto;
-                @include o-text-overflow;
-                padding: 0 3px;
-                color: white;
-
-                display: flex;
                 align-items: center;
+                color: white;
+                flex: 0 0 auto;
+                padding: 0 3px;
+                @include o-text-overflow($display: flex);
             }
 
             .o_facet_values {
                 direction: ltr#{"/*rtl:ignore*/"};
                 padding: 0 $o-searchview-facet-remove-width 0 5px;
+
                 .o_facet_values_sep {
                     font-style: italic;
+                    margin: 0 0.3rem;
                 }
             }
+
             .o_facet_remove {
-                flex: 0 0 auto;
-                display: flex;
-                justify-content: center;
                 align-items: center;
-                @include o-position-absolute(0, 0, 0);
-                width: $o-searchview-facet-remove-width;
                 cursor: pointer;
+                display: flex;
+                flex: 0 0 auto;
+                justify-content: center;
+                width: $o-searchview-facet-remove-width;
+                @include o-position-absolute(0, 0, 0);
             }
         }
+
         .o_searchview_input {
-            width: 100px;
             flex: 1 0 auto;
+            width: 100px;
         }
 
         .o_searchview_more {
-            font-size: 16px;
             cursor: pointer;
+            font-size: 16px;
         }
 
         .o_searchview_autocomplete {
-            @include o-position-absolute(100%, $left: auto);
             width: 100%;
+            @include o-position-absolute(100%, $left: auto);
 
-            li {
+            .o_menu_item {
+                align-items: center;
+                display: flex;
                 padding-left: 25px;
-                position: relative;
-                &.o-indent {
+
+                &.o_indent {
                     padding-left: 50px;
                 }
+
                 a {
-                    display: inline-block;
-                    padding-left: 0px;
-                    padding-right: 0px;
                     &:hover {
                         background-color: inherit;
                     }
-                    &.o-expand, &.o-expanded { // caret
-                        @include o-position-absolute($left: 6px);
-                    }
-                    &.o-expand:before {
-                        @include o-caret-right;
-                    }
-                    &.o-expanded:before {
-                        @include o-caret-down;
+
+                    &.o_expand {
+                        display: flex;
+                        justify-content: center;
+                        width: 25px;
+                        @include o-position-absolute($left: 0);
                     }
                 }
             }
@@ -95,127 +90,131 @@
     }
 }
 
-// Searchview and Sidebar dropdowns
-// FIXME: move me out of here
+.o_search_options .o_dropdown_toggler_btn:first-child {
+    // apply the padding to the first element so that when the `favorites` menu goes under
+    // the `filters` menu, they're still aligned
+    margin-right: 10px;
+}
+
+// Dropdowns
 .o_dropdown {
+    color: $o-main-text-color;
+    cursor: pointer;
+    display: inline-block;
+    user-select: none;  // Prevent text selection when toggling the dropdowns
     white-space: nowrap;  // prevent the arrow from going under the dropdown when too little space
-    .dropdown-toggle:first-child {
-        // apply the padding to the first element so that when the `favorites` menu goes under
-        // the `filters` menu, they're still aligned
-        padding-right: 10px;
+
+    .o_dropdown_title {
+        padding: 0 0.3rem;
     }
 
-    display: inline-block;
-    cursor: pointer;
-    user-select: none;  // Prevent text selection when toggling the dropdowns
-    > a { // dropdown togglers
-        color: $o-main-text-color;
-        &:hover {
-            text-decoration: none;
-            font-weight: bold;
+    .o_dropdown_caret {
+        font-size: 12px;
+        width: 1rem;
+    }
+
+    &:hover,
+    &.show {
+
+        .o_dropdown_toggler_btn {
             color: darken($o-main-text-color, 10%);
         }
     }
-    &.show > a {
-        font-weight: bold;
-        color: darken($o-main-text-color, 10%);
+
+    .o_dropdown_menu {
+
+        ul.o_embed_menu {
+            padding: 0;
+        }
+
+        a.dropdown-item {
+            align-items: center;
+            display: flex;
+            position: relative;
+
+            .o_item_description {
+                flex: 1;
+            }
+
+            .o_icon_right {
+                @include o-position-absolute($right: $dropdown-item-padding-x * 0.5);
+            }
+
+            .o_icon_right + .o_icon_right {
+                @include o-position-absolute($right: $dropdown-item-padding-x * 1.25);
+            }
+        }
+
+        .o_menu_item_options {
+            list-style: none;
+            margin-bottom: 1rem;
+            padding: 0;
+        }
     }
 }
 
-
-
 // Open and closed carets in dropdowns
 .o_closed_menu {
     position: relative;
+
     &:before {
+        margin-top: (-$caret-width);
         @include o-caret-right;
         @include o-position-absolute($top: 50%, $left: 10px);
-        margin-top: (-$caret-width);
     }
 }
 .o_open_menu {
     position: relative;
+
     &:before {
+        margin-top: (-$caret-width);
         @include o-caret-down;
         @include o-position-absolute($top: 50%, $left: 10px);
-        margin-top: (-$caret-width);
     }
 }
 
-.o_filters_menu, .o_group_by_menu, .o_time_range_menu {
-    max-height: calc(100vh - 125px);
-    overflow: auto;
-}
+// Filter menu
+.o_filter_menu {
 
-.o_filters_menu, .o_group_by_menu {
-    .o_submenu_switcher {
-        @include o-position-absolute($right: $dropdown-item-padding-x * 0.5);
-    }
-}
-
-// Filters
-.o_filters_menu {
     .o_filter_condition {
-        @include o-search-options-dropdown-custom-item;
         margin-bottom: 8px;
+        position: relative;
+
         .o_or_filter { // or between conditions
-            display: none;  // hidden for the first condition
             @include o-position-absolute($top: 3px, $left: 4px);
         }
-    }
-    .o_filter_condition + .o_filter_condition {
-        .o_or_filter {
-            display: block; // displayed from second condition
+
+        .o_generator_menu_operator {
+            margin: 3px 0px; // vertical gap between selects
         }
-    }
-    .o_searchview_extended_prop_op {
-        margin: 3px 0px; // vertical gap between selects
-    }
-    .o_searchview_extended_prop_value { // date fields: datepicker position
-        .datepickerbutton {
-            @include o-position-absolute(3px, -20px);
+
+        .o_generator_menu_value { // date fields: datepicker position
+            .datepickerbutton {
+                cursor: pointer;
+                @include o-position-absolute(3px, -20px);
+            }
+        }
+
+        .o_generator_menu_delete { // delete condition button position
             cursor: pointer;
+            @include o-position-absolute($top: 6px, $right: 4px);
         }
     }
-    .o_searchview_extended_delete_prop { // delete condition button position
-        @include o-position-absolute($top: 6px, $right: 4px);
-        cursor: pointer;
-    }
+
     .o_add_filter_menu { // apply and add buttons
-        @include o-search-options-dropdown-custom-item;
+        display: flex;
+        justify-content: space-between;
     }
 }
 
-// Favorites
-.o_favorites_menu {
-    max-height: 75vh;
-    overflow-y: auto;
+// Time range menu
+.o_time_range_editor {
 
-    max-height: calc(100vh - 125px);
-    overflow: auto;
-
-    .o-searchview-custom-private, .o-searchview-custom-public {
-        .o-remove-filter {
-            @include o-position-absolute(50%, 12px);
-            margin-top: -6px;
-            cursor: pointer;
-        }
-    }
-    .o-searchview-custom-public a:after {
-        font-family: FontAwesome;
-        content: "\f0c0";
-        margin-left: 5px;
-        font-weight: normal;
-    }
-    .o_save_name { // save button
-        display: none; // hidden by default
-        @include o-search-options-dropdown-custom-item;
-    }
-}
-
-// Time Ranges
-.o_time_range_menu {
-    .dropdown-item-text > label,  .custom-control-label {
+    label {
         font-weight: bold;
     }
+
+    .o_time_range_section:not(:first-child) {
+        padding-top: 0.5rem;
+    }
 }
diff --git a/addons/web/static/src/scss/search_view_extra.scss b/addons/web/static/src/scss/search_view_extra.scss
index a0ff4db908a..11107f2ad02 100644
--- a/addons/web/static/src/scss/search_view_extra.scss
+++ b/addons/web/static/src/scss/search_view_extra.scss
@@ -27,7 +27,7 @@
     .o_searchview_more {
         @include o-position-absolute($top: 6px, $right: 5px);
     }
-    .o_searchview_autocomplete li.o-selection-focus {
+    .o_searchview_autocomplete li.o_selection_focus {
         background-color: $o-brand-odoo;
         > a {
             color: white;
diff --git a/addons/web/static/src/scss/webclient_layout.scss b/addons/web/static/src/scss/webclient_layout.scss
index a030ac88535..4d2a7b44374 100644
--- a/addons/web/static/src/scss/webclient_layout.scss
+++ b/addons/web/static/src/scss/webclient_layout.scss
@@ -19,7 +19,7 @@ html {
                 height: 100%;
                 display: flex;
                 flex-flow: column nowrap;
-                > .o_cp_controller {
+                > .o_control_panel {
                     flex: 0 0 auto;
                 }
                 > .o_content {
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 07919bcfa84..9e799e44e38 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -3,7 +3,97 @@
 
 <!-- Owl Templates -->
 
-<t t-name="CustomFileInput" owl="1">
+<t t-name="web.ControlPanel" owl="1">
+    <div class="o_control_panel">
+        <div class="o_cp_top">
+            <ol t-if="props.withBreadcrumbs" class="breadcrumb" role="navigation">
+                <li t-foreach="props.breadcrumbs" t-as="bc" t-key="bc.controllerID"
+                    class="breadcrumb-item"
+                    t-att-class="{ o_back_button: bc_index === props.breadcrumbs.length - 1 }"
+                    t-att-accesskey="bc_last and 'b'"
+                    t-on-click.prevent="trigger('breadcrumb-clicked', { controllerID: bc.controllerID })"
+                    >
+                    <a t-if="bc.title" href="#" t-esc="bc.title"/>
+                    <em t-else="" class="text-warning">Unnamed</em>
+                </li>
+                <li class="breadcrumb-item active">
+                    <t t-if="props.title" t-esc="props.title"/>
+                    <em t-else="" class="text-warning">Unnamed</em>
+                </li>
+            </ol>
+            <div class="o_cp_searchview"
+                role="search"
+                t-ref="searchView"
+                >
+                <div t-if="props.withSearchBar" class="o_searchview" role="search" aria-autocomplete="list" >
+                    <i t-if="props.searchMenuTypes.length"
+                        t-attf-class="o_searchview_more fa fa-search-{{ state.displayDropdowns ? 'minus' : 'plus' }}"
+                        title="Advanced Search..."
+                        role="img"
+                        aria-label="Advanced Search..."
+                        t-on-click.prevent="state.displayDropdowns = !state.displayDropdowns"
+                    />
+                    <SearchBar t-if="props.withSearchBar" fields="fields"/>
+                </div>
+            </div>
+        </div>
+        <div class="o_cp_bottom">
+            <div class="o_cp_left">
+                <div class="o_cp_buttons" role="toolbar" aria-label="Control panel buttons" t-ref="buttons">
+                    <t t-slot="buttons"/>
+                </div>
+                <ActionMenus t-if="props.actionMenus and props.actionMenus.items"
+                    t-props="props.actionMenus"
+                />
+            </div>
+            <div class="o_cp_right">
+                <div class="btn-group o_search_options position-static"
+                    role="search"
+                    t-ref="searchViewButtons"
+                    >
+                    <t t-if="props.withSearchBar and state.displayDropdowns">
+                        <FilterMenu t-if="props.searchMenuTypes.includes('filter')"
+                            class="o_filter_menu"
+                            fields="fields"
+                        />
+                        <GroupByMenu t-if="props.searchMenuTypes.includes('groupBy')"
+                            class="o_group_by_menu"
+                            fields="fields"
+                        />
+                        <TimeRangeMenu t-if="props.searchMenuTypes.includes('timeRange')"
+                            class="o_time_range_menu"
+                            fields="fields"
+                        />
+                        <FavoriteMenu t-if="props.searchMenuTypes.includes('favorite')"
+                            class="o_favorite_menu"
+                        />
+                    </t>
+                </div>
+                <div class="o_cp_pager" role="search" t-ref="pager">
+                    <Pager t-if="props.pager and props.pager.limit" t-props="props.pager"/>
+                </div>
+                <nav t-if="props.views.length gt 1" class="btn-group o_cp_switch_buttons" role="toolbar" aria-label="View switcher">
+                    <t t-foreach="props.views" t-as="view" t-key="view.type">
+                        <t t-call="web.ViewSwitcherButton"/>
+                    </t>
+                </nav>
+            </div>
+        </div>
+    </div>
+</t>
+
+<t t-name="web.ControlPanelX2Many" owl="1">
+    <div class="o_x2m_control_panel">
+        <div class="o_cp_buttons" role="toolbar" aria-label="Control panel buttons" t-ref="buttons">
+            <t t-slot="buttons"/>
+        </div>
+        <div class="o_cp_pager" role="search" t-ref="pager">
+            <Pager t-if="_shouldShowPager()" t-props="props.pager"/>
+        </div>
+    </div>
+</t>
+
+<t t-name="web.CustomFileInput" owl="1">
     <span class="o_file_input" aria-atomic="true">
         <span class="o_file_input_trigger" t-on-click.prevent="_onTriggerClicked">
             <t t-slot="default">
@@ -18,15 +108,350 @@
     </span>
 </t>
 
-<t t-name="DialogButton.tooltip" owl="1">
+<t t-name="web.DatePicker" owl="1">
+    <div class="o_datepicker" aria-atomic="true" t-att-id="datePickerId" data-target-input="nearest">
+        <input type="text" class="o_datepicker_input o_input datetimepicker-input" autofocus=""
+            t-att-name="props.name"
+            t-att-placeholder="props.placeholder"
+            t-attf-data-target="#{{ datePickerId }}"
+            t-att-readonly="props.readonly"
+            t-ref="input"
+            t-on-change="_onInputChange"
+            t-on-click="_onInputClick"
+        />
+        <span t-if="props.warn_future and state.warning" class="fa fa-exclamation-triangle o_tz_warning o_datepicker_warning">
+            <t>This date is on the future. Make sure it is what you expected.</t>
+        </span>
+        <span class="o_datepicker_button"/>
+    </div>
+</t>
+
+<t t-name="web.DialogButton.tooltip" owl="1">
     <div class="oe_tooltip_string" role="tooltip">
         <div class="tooltip-inner">
-            Hit ENTER to <t t-esc="title"/>
+            <t>Hit ENTER to <t t-esc="title"/></t>
         </div>
     </div>
 </t>
 
-<t t-name="OwlDialog" owl="1">
+<t t-name="web.DropdownMenu" owl="1">
+    <div class="btn-group o_dropdown" t-att-class="{ show: state.open }">
+        <button type="button"
+            class="o_dropdown_toggler_btn btn btn-secondary"
+            t-att-aria-expanded="state.open ? 'true' : 'false'"
+            tabindex="-1"
+            t-on-click="state.open = !state.open"
+            t-on-keydown="_onButtonKeydown"
+            >
+            <i t-if="props.icon" t-att-class="props.icon"/>
+            <span class="o_dropdown_title" t-esc="title"/>
+            <i t-if="displayCaret" t-attf-class="o_dropdown_caret fa fa-caret-{{ state.open ? 'down' : 'right' }}"/>
+            <i t-else="" t-attf-class="fa fa-chevron-{{ state.open ? 'down' : 'right' }} float-right mt4"/>
+        </button>
+        <ul t-if="state.open" class="o_dropdown_menu dropdown-menu show" role="menu"
+            t-on-item-selected="_onItemSelected"
+            >
+            <t t-set="currentGroup" t-value="null"/>
+            <t t-foreach="items" t-as="item" t-key="item.key || item.id || ('item-' + item_index)">
+                <li t-if="currentGroup !== null and currentGroup !== item.groupNumber" class="dropdown-divider" role="separator"/>
+                <t t-if="item.Component" t-component="item.Component" t-props="item.props"/>
+                <DropdownMenuItem t-else="" t-props="item"/>
+                <t t-set="currentGroup" t-value="item.groupNumber"/>
+            </t>
+        </ul>
+    </div>
+</t>
+
+<t t-name="web.FavoriteMenu" t-inherit="web.DropdownMenu" t-inherit-mode="primary" owl="1">
+    <xpath expr="//DropdownMenuItem" position="attributes">
+        <attribute name="t-on-remove-item.stop">_onItemRemoved</attribute>
+    </xpath>
+    <xpath expr="//div[1]" position="inside">
+        <Dialog t-if="state.deletedFavorite"
+            title="'Warning'"
+            size="'medium'"
+            t-on-dialog-closed="state.deletedFavorite = false"
+            >
+            <t t-if="state.deletedFavorite.userId">Are you sure that you want to remove this filter?</t>
+            <t t-else="">This filter is global and will be removed for everybody if you continue.</t>
+            <t t-set="buttons">
+                <button type="button" class="btn btn-primary" t-on-click="_onRemoveFavorite">
+                    <t>Ok</t>
+                </button>
+                <button type="button" class="btn btn-secondary" t-on-click.stop="state.deletedFavorite = false">
+                    <t>Cancel</t>
+                </button>
+            </t>
+        </Dialog>
+    </xpath>
+</t>
+
+<t t-name="web.FilterMenu" t-inherit="web.DropdownMenu" t-inherit-mode="primary" owl="1">
+    <xpath expr="//ul[@role='menu']" position="inside">
+        <li t-if="items.length" class="dropdown-divider" role="separator"/>
+        <CustomFilterItem fields="props.fields"/>
+    </xpath>
+</t>
+
+<t t-name="web.GroupByMenu" t-inherit="web.DropdownMenu" t-inherit-mode="primary" owl="1">
+    <xpath expr="//ul[@role='menu']" position="inside">
+        <t t-if="fields.length">
+            <li t-if="items.length" class="dropdown-divider" role="separator"/>
+            <CustomGroupByItem fields="fields"/>
+        </t>
+    </xpath>
+</t>
+
+<t t-name="web.TimeRangeMenu" t-inherit="web.DropdownMenu" t-inherit-mode="primary" owl="1">
+    <xpath expr="//ul[@role='menu']/t[@t-foreach]" position="replace">
+        <li class="o_menu_item dropdown-item-text" role="menuitem">
+            <t t-if="fields.length" t-call="web.TimeRangeEditor"/>
+            <t t-else="">No date field available.</t>
+        </li>
+        <li class="o_menu_item dropdown-item-text" role="menuitem">
+            <button type="button" class="btn btn-primary" t-on-click="_onApply">Apply</button>
+        </li>
+    </xpath>
+</t>
+
+<t t-name="web.DropdownMenuItem" owl="1">
+    <li class="o_menu_item" role="menuitem" t-on-keydown="_onKeydown">
+        <t t-if="canBeOpened">
+            <a class="o_menu_item_parent dropdown-item"
+                t-att-class="{ selected: props.isActive }"
+                role="menuitem"
+                href="#"
+                t-ref="fallback-focus"
+                t-on-click.prevent="state.open = !state.open"
+                >
+                <t t-esc="props.description"/>
+                <i t-attf-class="o_icon_right fa fa-caret-{{ state.open ? 'down' : 'right' }}"/>
+            </a>
+            <ul t-if="state.open" class="o_menu_item_options">
+                <t t-set="currentGroup" t-value="null"/>
+                <t t-foreach="props.options" t-as="option" t-key="option_index">
+                    <li t-if="currentGroup !== null and currentGroup !== option.groupNumber"
+                        class="dropdown-divider"
+                        role="separator"
+                    />
+                    <li class="o_item_option" role="menuitem">
+                        <a class="dropdown-item pl-5"
+                            t-att-class="{ selected: option.isActive }"
+                            role="menuitem"
+                            t-att-href="option.url or '#'"
+                            t-esc="option.description"
+                            t-on-click.prevent="trigger('item-selected', { item: props, option: option })"
+                        />
+                    </li>
+                    <t t-set="currentGroup" t-value="option.groupNumber"/>
+                </t>
+            </ul>
+        </t>
+        <a t-else="" class="dropdown-item"
+            t-att-class="{ selected: props.isActive, [props.className]: props.className }"
+            role="menuitem"
+            t-att-href="props.url or '#'"
+            t-on-click.prevent="trigger('item-selected', { item: props })"
+            >
+            <t t-esc="props.description"/>
+            <i t-if="props.removable"
+                class="o_icon_right fa fa-trash-o"
+                title="Delete item"
+                t-on-click.stop.prevent="trigger('remove-item', { item: props })"
+            />
+        </a>
+    </li>
+</t>
+
+<t t-name="web.CustomFavoriteItem" owl="1">
+    <li class="o_menu_item o_add_favorite" role="menuitem">
+        <button type="button"
+            class="dropdown-item"
+            t-ref="fallback-focus"
+            t-on-click="state.open = !state.open"
+            >
+            <t>Save Current Search</t>
+        </button>
+        <div t-if="state.open" class="dropdown-item-text">
+            <div role="menuitem" class="dropdown-item-text">
+                <input type="text"
+                    class="o_input"
+                    autofocus=""
+                    t-ref="description"
+                    t-model.trim="state.description"
+                    t-on-keydown="_onInputKeydown"
+                />
+            </div>
+            <div class="custom-control custom-checkbox">
+                <input type="checkbox"
+                    t-att-id="useByDefaultId"
+                    class="custom-control-input"
+                    t-att-checked="state.isDefault"
+                    t-on-change="_onCheckboxChange"
+                />
+                <label class="custom-control-label" t-att-for="useByDefaultId">
+                    <t>Use by default</t>
+                </label>
+            </div>
+            <div class="custom-control custom-checkbox">
+                <input type="checkbox"
+                    t-att-id="shareAllUsersId"
+                    class="custom-control-input"
+                    t-att-checked="state.isShared"
+                    t-on-change="_onCheckboxChange"
+                />
+                <label class="custom-control-label" t-att-for="shareAllUsersId">
+                    <t>Share with all users</t>
+                    <i class="fa fa-users" role="img" aria-label="Users" title="Users"/>
+                </label>
+            </div>
+            <div class="dropdown-item-text">
+                <button type="button" class="o_save_favorite btn btn-primary" t-on-click="_saveFavorite">Save</button>
+            </div>
+        </div>
+    </li>
+</t>
+
+<t t-name="web.CustomFilterItem" owl="1">
+    <div class="o_generator_menu">
+        <button type="button"
+            class="o_add_custom_filter dropdown-item"
+            aria-expanded="false"
+            t-ref="fallback-focus"
+            t-on-click="state.open = !state.open"
+            t-on-keydown="_onKeydown"
+            >
+            <t>Add Custom Filter</t>
+        </button>
+        <t t-if="state.open">
+            <div t-foreach="state.conditions" t-as="condition" t-key="condition_index"
+                class=" o_filter_condition dropdown-item-text"
+                >
+                <t t-set="fieldType" t-value="fields[condition.field].type"/>
+                <t t-set="selectedOperator" t-value="OPERATORS[FIELD_TYPES[fieldType]][condition.operator]"/>
+                <span t-if="!condition_first" class="o_or_filter">or</span>
+                <select class="o_input o_generator_menu_field"
+                    t-on-change="_onFieldSelect(condition)"
+                    >
+                    <option t-foreach="fields" t-as="field" t-key="field_index"
+                        t-att-value="field.name"
+                        t-att-selected="field_index === condition.field"
+                        t-esc="field.string"
+                    />
+                </select>
+                <select class="o_input o_generator_menu_operator"
+                    t-on-change="_onOperatorSelect(condition)"
+                    >
+                    <option t-foreach="OPERATORS[FIELD_TYPES[fieldType]]" t-as="operator" t-key="operator_index"
+                        t-att-value="operator.symbol"
+                        t-att-selected="operator_index === condition.operator"
+                        t-esc="operator.description"
+                    />
+                </select>
+                <span t-if="!('value' in selectedOperator)" class="o_generator_menu_value">
+                    <t t-if="fieldType === 'date'">
+                        <DatePicker
+                            date="condition.value[0]"
+                            t-on-datetime-changed="_onDateChanged(condition, 0)"
+                        />
+                        <DatePicker t-if="selectedOperator.symbol === 'between'"
+                            date="condition.value[1]"
+                            t-on-datetime-changed="_onDateChanged(condition, 1)"
+                        />
+                    </t>
+                    <t t-elif="fieldType === 'datetime'">
+                        <DateTimePicker
+                            date="condition.value[0]"
+                            t-on-datetime-changed="_onDateChanged(condition, 0)"
+                        />
+                        <DateTimePicker t-if="selectedOperator.symbol === 'between'"
+                            date="condition.value[1]"
+                            t-on-datetime-changed="_onDateChanged(condition, 1)"
+                        />
+                    </t>
+                    <select t-elif="fieldType === 'selection'" class="o_input"
+                        t-on-change="_onValueInput(condition)"
+                        >
+                        <option t-foreach="fields[condition.field].selection" t-as="option" t-key="option_index"
+                            t-att-value="option[0]"
+                            t-esc="option[1]"
+                        />
+                    </select>
+                    <input t-elif="fieldType === 'float'"
+                        class="o_input"
+                        step="0.01"
+                        t-att-type="DECIMAL_POINT === '.' ? 'number' : 'text'"
+                        t-attf-title="Number using {{ DECIMAL_POINT }} as decimal separator."
+                        t-attf-pattern="[0-9]+([\\{{ DECIMAL_POINT }}][0-9]+)?"
+                        t-att-value="condition.value or (0 + DECIMAL_POINT + 0)"
+                        t-on-input="_onValueInput(condition)"
+                    />
+                    <input t-elif="['integer', 'id'].includes(fieldType)"
+                        class="o_input"
+                        step="1"
+                        type="number"
+                        t-att-value="condition.value or 0"
+                        t-on-input="_onValueInput(condition)"
+                    />
+                    <input t-else=""
+                        type="text"
+                        class="o_input"
+                        t-att-value="condition.value or ''"
+                        t-on-input="_onValueInput(condition)"
+                    />
+                </span>
+                <i t-if="state.conditions.length gt 1"
+                    class="fa fa-trash-o o_generator_menu_delete"
+                    role="image"
+                    aria-label="Delete"
+                    title="Delete"
+                    t-on-click="_onRemoveCondition(condition_index)"
+                />
+            </div>
+            <div class="o_add_filter_menu dropdown-item-text">
+                <button type="button" class="btn btn-primary o_apply_filter" t-on-click="_onApply">
+                    <t>Apply</t>
+                </button>
+                <button type="button"
+                    class="btn btn-secondary o_add_condition"
+                    t-on-click="_addDefaultCondition"
+                    >
+                    <i class="fa fa-plus-circle"/>
+                    <t>Add a condition</t>
+                </button>
+            </div>
+        </t>
+    </div>
+</t>
+
+<t t-name="web.CustomGroupByItem" owl="1">
+    <div class="o_generator_menu">
+        <button type="button"
+            class="o_add_custom_group_by dropdown-item"
+            aria-expanded="false"
+            t-ref="fallback-focus"
+            t-on-click="state.open = !state.open"
+            t-on-keydown="_onKeydown"
+            >
+            <t>Add Custom Group</t>
+        </button>
+        <div t-if="state.open" class="dropdown-item-text">
+            <select class="w-auto o_input o_group_by_selector" t-model="state.fieldName">
+                <option t-foreach="props.fields" t-as="field" t-key="field.name"
+                    t-att-value="field.name"
+                    t-esc="field.string"
+                />
+            </select>
+        </div>
+        <div t-if="state.open" class="o_add_group_by_menu dropdown-item-text">
+            <button type="button" class="btn btn-primary o_apply_group_by" t-on-click="_onApply">
+                <t>Apply</t>
+            </button>
+        </div>
+    </div>
+</t>
+
+<t t-name="web.OwlDialog" owl="1">
     <Portal target="'body'">
         <div class="o_dialog" t-on-focus="_onFocus" t-on-click="_onClick">
             <div t-if="props.backdrop" class="modal-backdrop show" t-on-click="_onBackdropClick"/>
@@ -51,7 +476,7 @@
                         <footer t-if="props.renderFooter" class="modal-footer" t-ref="modal-footer">
                             <t t-slot="buttons">
                                 <button class="btn btn-primary" t-on-click.prevent="_close">
-                                    Ok
+                                    <t>Ok</t>
                                 </button>
                             </t>
                         </footer>
@@ -62,6 +487,182 @@
     </Portal>
 </t>
 
+<t t-name="web.Pager" owl="1">
+    <nav class="o_pager" aria-label="Pager">
+        <span class="o_pager_counter" t-on-click.stop="">
+            <input t-if="state.editing" type="text"
+                class="o_pager_value o_input"
+                autofocus=""
+                t-att-value="value"
+                t-on-blur="state.editing = false"
+                t-on-change="_onValueChange"
+                t-on-keydown.stop="_onValueKeydown"
+            />
+            <span t-else=""
+                class="o_pager_value"
+                t-esc="value"
+                t-on-click="_onEdit"
+            />
+            <span> / </span>
+            <span class="o_pager_limit" t-esc="props.size"/>
+        </span>
+        <span class="btn-group" aria-atomic="true">
+            <!-- accesskeys not wanted in X2Many widgets -->
+            <button type="button"
+                class="fa fa-chevron-left btn btn-secondary o_pager_previous"
+                t-att-disabled="state.disabled || singlePage"
+                t-att-accesskey="props.withAccessKey ? 'p' : false"
+                aria-label="Previous"
+                title="Previous"
+                tabindex="-1"
+                t-on-click="_changeSelection(-1)"
+            />
+            <button type="button"
+                class="fa fa-chevron-right btn btn-secondary o_pager_next"
+                t-att-disabled="state.disabled || singlePage"
+                t-att-accesskey="props.withAccessKey ? 'n' : false"
+                aria-label="Next"
+                title="Next"
+                tabindex="-1"
+                t-on-click="_changeSelection(1)"
+            />
+        </span>
+    </nav>
+</t>
+
+<t t-name="web.SearchBar" owl="1">
+    <div class="o_searchview_input_container">
+        <div t-foreach="model.getFacets()" t-as="facet" t-key="facet_index"
+            tabindex="0"
+            class="o_searchview_facet"
+            role="img"
+            aria-label="search"
+            t-on-keydown="_onFacetKeydown(facet, facet_index)"
+            >
+            <span t-if="facet.title" class="o_searchview_facet_label" t-esc="facet.title"/>
+            <span t-else="" t-attf-class="o_searchview_facet_label fa {{ facet.icon }}"/>
+            <div class="o_facet_values">
+                <t t-foreach="facet.values" t-as="facetValue" t-key="facetValue_index">
+                    <span t-if="!facetValue_first" class="o_facet_values_sep" t-esc="facet.separator"/>
+                    <span class="o_facet_value" t-esc="facetValue"/>
+                </t>
+            </div>
+            <i class="fa fa-sm fa-remove o_facet_remove"
+                role="img"
+                aria-label="Remove"
+                title="Remove"
+                t-on-click="_onFacetRemove(facet)"
+            />
+        </div>
+        <input type="text"
+            class="o_searchview_input"
+            autofocus=""
+            accesskey="Q"
+            placeholder="Search..."
+            role="searchbox"
+            t-ref="search-input"
+            t-on-keydown="_onSearchKeydown"
+            t-on-input="_onSearchInput"
+        />
+        <ul t-if="state.sources.length" class="o_dropdown_menu o_searchview_autocomplete dropdown-menu show" role="menu">
+            <li t-foreach="state.sources" t-as="src" t-key="src.id"
+                t-att-id="src.id"
+                class="o_menu_item"
+                t-att-class="{ o_indent: src.parent, o_selection_focus: src_index === state.focusedItem }"
+                t-on-click="_selectSource(src)"
+                t-on-mousemove="_onSourceMousemove(src_index)"
+                >
+                <a t-if="src.expand"
+                    href="#"
+                    class="o_expand"
+                    t-on-click.stop.prevent="_expandSource(src, !src.expanded)"
+                    >
+                    <i t-attf-class="fa fa-caret-{{ src.expanded ? 'down' : 'right' }}"/>
+                </a>
+                <a href="#" t-on-click.prevent="">
+                    <t t-if="src.label" t-esc="src.label"/>
+                    <t t-elif="['date', 'datetime'].includes(props.fields[src.fieldName].type)">
+                        <t>Search <em t-esc="src.description"/> at: <strong t-esc="state.inputValue"/></t>
+                    </t>
+                    <t t-else="">Search <em t-esc="src.description"/> for: <strong t-esc="state.inputValue"/></t>
+                </a>
+            </li>
+        </ul>
+    </div>
+</t>
+
+<t t-name="web.ActionMenus" owl="1">
+    <div class="o_cp_action_menus" t-on-item-selected.stop="_onItemSelected">
+        <DropdownMenu t-if="printItems.length"
+            title="env._t('Print')"
+            items="printItems"
+        />
+        <DropdownMenu t-if="actionItems.length"
+            title="env._t('Action')"
+            items="actionItems"
+        />
+    </div>
+</t>
+
+<t t-name="web.TimeRangeEditor" owl="1">
+    <div class="o_time_range_editor">
+        <div class="o_time_range_section">
+            <label t-attf-for="field_select_{{ domId }}">Based On</label>
+            <select t-attf-id="field_select_{{ domId }}" class="o_input" t-model="state.fieldName">
+                <option t-foreach="fields" t-as="field" t-key="field.name"
+                    t-att-selected="state.fieldName === field.name"
+                    t-att-value="field.name"
+                    t-esc="field.description"
+                />
+            </select>
+        </div>
+        <div class="o_time_range_section">
+            <label t-attf-for="range_select_{{ domId }}">Range</label>
+            <select t-attf-id="range_select_{{ domId }}" class="o_input" t-model="state.rangeId">
+                <optgroup t-foreach="periodGroups" t-as="group" t-key="group" label="">
+                    <t t-foreach="Object.values(periodOptions)" t-as="option" t-key="option_index">
+                        <option t-if="option.groupNumber === group"
+                            t-att-selected="state.rangeId === option.id"
+                            t-att-value="option.id"
+                            t-esc="option.description"
+                        />
+                    </t>
+                </optgroup>
+            </select>
+        </div>
+        <div class="o_time_range_section">
+            <div class="custom-control custom-checkbox">
+                <input type="checkbox" t-attf-id="checkbox_select_{{ domId }}"
+                    class="custom-control-input"
+                    t-att-checked="state.comparisonRangeId"
+                    t-on-click="_onCheckboxClick"
+                />
+                <label t-attf-for="checkbox_select_{{ domId }}" class="custom-control-label">Compare To</label>
+            </div>
+            <select t-if="state.comparisonRangeId" class="o_input" t-model="state.comparisonRangeId">
+                <option t-foreach="Object.values(comparisonTimeRangeOptions)" t-as="option" t-key="option_index"
+                    t-att-selected="state.comparisonRangeId === option.id"
+                    t-att-value="option.id"
+                    t-esc="option.description"
+                />
+            </select>
+        </div>
+    </div>
+</t>
+
+<t t-name="web.ViewSwitcherButton" owl="1">
+    <button type="button"
+        t-att-accesskey="view.accessKey"
+        t-attf-class="btn btn-secondary fa fa-lg o_switch_view o_{{ view.type }} {{ view.icon }}"
+        t-att-class="{ active: env.view.type === view.type }"
+        t-attf-aria-label="View {{ view.type }}"
+        t-attf-title="View {{ view.type }}"
+        data-toggle="tooltip"
+        tabindex="-1"
+        t-on-click="trigger('switch-view', { view_type: view.type })"
+    />
+</t>
+
 <!-- Legacy Templates -->
 
 <div t-name="EmptyComponent"/>
@@ -205,112 +806,9 @@
 </form>
 
 <div t-name="Action" class="o_action">
-    <!-- CP -->
     <div class="o_content"/>
 </div>
 
-<t t-name="ControlPanel">
-    <div class="o_control_panel">
-        <div>
-            <ol class="breadcrumb" role="navigation"/>
-            <div class="o_cp_searchview" role="search">
-                <t t-if="widget.withSearchBar" t-call="SearchView"/>
-            </div>
-        </div>
-        <div>
-            <div class="o_cp_left">
-                <div class="o_cp_buttons" role="toolbar" aria-label="Control panel toolbar"/>
-                <aside class="o_cp_sidebar"/>
-            </div>
-            <div class="o_cp_right">
-                <div class="btn-group o_search_options position-static" role="search"/>
-                <nav class="o_cp_pager" role="search" aria-label="Pager"/>
-                <nav class="btn-group o_cp_switch_buttons" role="toolbar" aria-label="View switcher"/>
-            </div>
-        </div>
-    </div>
-</t>
-<t t-name="X2ManyControlPanel">
-    <div class="o_x2m_control_panel">
-        <nav class="o_cp_buttons" aria-label="Control panel toolbar" role="toolbar"/>
-        <nav class="o_cp_pager" aria-label="Pager" role="toolbar"/>
-    </div>
-</t>
-
-<t t-name="ControlPanel.SwitchButton">
-    <button type="button" t-att-accesskey="view.accessKey"
-        t-attf-class="btn btn-secondary fa fa-lg #{view.icon} o_cp_switch_#{view.type} #{viewType === view.type ? ' active' : ''}"
-        t-attf-aria-label="View #{view.type}"
-        t-att-data-view-type="view.type" t-attf-title="View #{view.type}" tabindex="-1"/>
-</t>
-
-<t t-name="ControlPanel.SwitchButtons.Mobile">
-    <button class="btn btn-link btn-sm" data-toggle="dropdown" aria-expanded="false">
-        <span class="o_switch_view_button_icon"/>
-    </button>
-    <ul class="dropdown-menu dropdown-menu-right list-inline">
-        <li t-foreach="views" t-as="view">
-            <t t-call="ControlPanel.SwitchButton"/>
-        </li>
-    </ul>
-</t>
-
-<t t-name="ControlPanel.SwitchButtons">
-    <t t-foreach="views" t-as="view">
-        <t t-call="ControlPanel.SwitchButton"/>
-    </t>
-</t>
-
-<t t-name="Sidebar">
-    <t t-foreach="widget.sections" t-as="section">
-        <div class="btn-group o_dropdown">
-            <button t-if="section.name != 'buttons'" class="o_dropdown_toggler_btn btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-                <t t-if="section.name == 'files'" t-raw="widget.items[section.name].length || ''"/>
-                <t t-esc="section.label"/>
-            </button>
-            <t t-if="section.name == 'buttons'" t-foreach="widget.items[section.name]" t-as="item" t-att-class="item.classname">
-                <a t-att-title="item.title or None" t-att-data-section="section.name" t-att-data-index="item_index" t-att-href="item.url or '#'" target="_blank">
-                    <t t-raw="item.label"/>
-                </a>
-            </t>
-            <div class="dropdown-menu o_dropdown_menu" role="menu">
-                <t t-foreach="widget.items[section.name]" t-as="item">
-                    <t t-if="section.name == 'files'">
-                        <t t-set="item.title">
-                            <b>Attachment : </b><br/>
-                            <t t-raw="item.name"/>
-                        </t>
-                        <t t-if="item.create_uid and item.create_uid[0]" t-set="item.title">
-                            <t t-raw="item.title"/><br/>
-                            <b>Created by : </b><br/>
-                            <t t-raw="item.create_uid[1]"/>  <t t-esc="item.create_date_string" />
-                        </t>
-                        <t t-if="item.create_uid and item.write_uid and item.create_uid[0] != item.write_uid[0]" t-set="item.title">
-                            <t t-raw="item.title"/><br/>
-                            <b>Modified by : </b><br/>
-                            <t t-raw="item.write_uid[1]"/>  <t t-esc="item.write_date_string"/>
-                        </t>
-                    </t>
-                    <a t-attf-class="dropdown-item #{item.classname}" role="menuitem" t-att-title="item.title or None" t-att-data-section="section.name" t-att-data-index="item_index" t-att-href="item.url or '#'">
-                        <t t-raw="item.label"/>
-                        <span t-if="section.name == 'files' and widget.options.editable and !item.callback" class="fa fa-trash-o o_sidebar_delete_attachment" t-att-data-id="item.id" title="Delete this attachment" role="img" aria-label="Delete this attachment"/>
-                    </a>
-                </t>
-                <div role="menuitem" t-if="section.name == 'files' and widget.options.editable" class="dropdown-item o_sidebar_add_attachment">
-                    <t t-call="HiddenInputFile">
-                        <t t-set="fileupload_id" t-value="widget.fileuploadId"/>
-                        <t t-set="fileupload_action" t-translation="off">/web/binary/upload_attachment</t>
-                        <t t-set="multi_upload" t-value="true"/>
-                        <input type="hidden" name="model" t-att-value="widget.env and widget.env.model"/>
-                        <input type="hidden" name="id" t-att-value="widget.env.activeIds[0]"/>
-                        <span>Add...</span>
-                    </t>
-                </div>
-            </div>
-        </div>
-    </t>
-</t>
-
 <div t-name="web.NoContentHelper" class="o_view_nocontent" role="alert" owl="1">
     <div class="o_nocontent_help">
         <p class="o_view_nocontent_empty_folder">
@@ -489,18 +987,7 @@
     </table>
 </form>
 <t t-name="GraphView.buttons">
-    <div class="btn-group" role="toolbar" aria-label="Main actions">
-        <button class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-            Measures
-        </button>
-        <div class="dropdown-menu o_graph_measures_list" role="menu">
-            <t t-foreach="measures" t-as="measure">
-                <a role="menuitem" href="#" class="dropdown-item" t-att-data-field="measure[0]"><t t-esc="measure[1].string"/><t t-if="measure[1].type === 'many2one'"> (count)</t></a>
-            </t>
-            <div role="separator" class="dropdown-divider"/>
-            <a role="menuitem" href="#" class="dropdown-item" data-field="__count__">Count</a>
-        </div>
-    </div>
+    <div class="btn-group" role="toolbar" aria-label="Main actions"/>
     <div class="btn-group" role="toolbar" aria-label="Change graph">
         <button class="btn btn-secondary fa fa-bar-chart-o o_graph_button" title="Bar Chart" aria-label="Bar Chart" data-mode="bar"/>
         <button class="btn btn-secondary fa fa-area-chart o_graph_button" title="Line Chart" aria-label="Line Chart" data-mode="line"/>
@@ -579,6 +1066,7 @@
     </div>
     <div t-else="">Select a model to add a filter.</div>
 </t>
+
 <t t-name="DomainNode.ControlPanel">
     <div t-if="!widget.readonly &amp;&amp; !widget.noControlPanel" class="o_domain_node_control_panel" role="toolbar" aria-label="Domain node">
         <button class="btn o_domain_delete_node_button" title="Delete node" aria-label="Delete node"><i class="fa fa-times"/></button>
@@ -753,6 +1241,7 @@
         </li>
     </t>
 </ul>
+
 <t t-name="web.datepicker">
     <t t-set="placeholder" t-value="widget.getParent().node and widget.getParent().node.attrs.placeholder"/>
     <t t-set="datepickerID" t-value="_.uniqueId('datepicker')"/>
@@ -1098,255 +1587,6 @@
     </t>
 </div>
 
-<t t-name="DropdownMenu.MenuItems">
-    <t t-if="widget.items.length !== 0">
-        <t t-set="group" t-value="0"/>
-        <t t-foreach="widget.items" t-as="item">
-            <div t-if="group !== item.groupNumber" role="separator" class="dropdown-divider" data-removable="1"/>
-            <div t-attf-class="o_menu_item"
-                t-att-data-id="item.id">
-                <a role="menuitem" href="#" t-attf-class="dropdown-item#{item.isActive ? ' selected ' : ''}">
-                    <t t-esc="item.description"/>
-                    <span t-if="item.isRemovable" t-att-data-id="item.id" class="o_trash_button" > <span class="fa fa-trash-o"></span> </span>
-                    <span t-if="item.hasOptions" t-att-data-id="item.id" class="o_submenu_switcher">
-                        <span t-att-class="widget.openItems[item.id] ? 'fa fa-caret-down' : 'fa fa-caret-right'"></span>
-                    </span>
-                </a>
-                <ul t-if="item.hasOptions &amp;&amp; widget.openItems[item.id]" class="list-unstyled">
-                    <t t-set="subgroup" t-value="0"/>
-                    <t t-foreach="item.options" t-as="option">
-                        <li t-if="subgroup !== option.groupId" role="separator" class="dropdown-divider" data-removable="1"/>
-                        <li class="o_item_option"
-                            t-att-data-item_id="item.id" t-att-data-option_id="option.optionId">
-                            <a role="menuitem" href="#" t-attf-class="dropdown-item#{item.currentOptionIds.has(option.optionId) ? ' selected': ''} pl-5"><t t-esc="option.description"/></a>
-                        </li>
-                        <t t-set="subgroup" t-value="option.groupId"/>
-                    </t>
-                </ul>
-            </div>
-            <t t-set="group" t-value="item.groupNumber"/>
-        </t>
-    </t>
-</t>
-
-<div t-name="web.DropdownMenu" t-att-class="widget.dropdownStyle.el.class" t-att="widget.dropdownStyle.el.attrs">
-    <button t-att-class="widget.dropdownStyle.mainButton.class" data-toggle="dropdown" aria-expanded="false" tabindex="-1" data-flip="false" data-boundary="viewport">
-        <span t-att-class="widget.dropdownIcon"/> <t t-esc="widget.dropdownTitle"/> <span t-if="widget.dropdownSymbol" t-att-class="widget.dropdownSymbol"/>
-    </button>
-    <div class="dropdown-menu o_dropdown_menu" role="menu">
-        <t t-call="DropdownMenu.MenuItems"/>
-    </div>
-</div>
-
-<t t-name="GroupByMenuGenerator">
-    <div t-if="widget.presentedFields.length !== 0 &amp;&amp; widget.items.length !== 0" role="separator" class="dropdown-divider o_generator_menu"/>
-    <button t-if="widget.presentedFields.length !== 0" type="button" class="dropdown-item o_generator_menu o_add_custom_group" aria-expanded="false">Add Custom Group</button>
-    <div t-if="widget.generatorMenuIsOpen" class="dropdown-item-text o_generator_menu">
-        <select class="w-auto o_input o_group_selector o_add_group">
-            <t t-foreach="widget.presentedFields" t-as="field">
-                <option t-att-value="field.name"><t t-esc="field.string"/></option>
-            </t>
-        </select>
-    </div>
-    <div t-if="widget.generatorMenuIsOpen" class="dropdown-item-text o_generator_menu">
-        <button type="button" class="btn btn-primary o_apply_group o_add_group">Apply</button>
-    </div>
-</t>
-
-<t t-name="FilterMenuGenerator">
-    <div t-if="Object.keys(widget.fields).length !== 0 &amp;&amp; widget.items.length !== 0" role="separator" class="dropdown-divider o_generator_menu"/>
-    <button t-if="Object.keys(widget.fields).length !== 0" type="button" class="dropdown-item o_generator_menu o_add_custom_filter" aria-expanded="false">Add Custom Filter</button>
-    <div t-if="widget.generatorMenuIsOpen" class="dropdown-item-text o_generator_menu o_add_filter_menu">
-        <button class="btn btn-primary o_apply_filter" type="button">Apply</button>
-        <button class="btn btn-secondary o_add_condition" type="button">
-            <span class="fa fa-plus-circle"/>
-            Add a condition
-        </button>
-    </div>
-</t>
-
-<div t-name="web.TimeRangeMenu" class="btn-group o_dropdown">
-    <button t-att-class="'o_dropdown_toggler_btn btn btn-secondary dropdown-toggle o_time_range_menu_button' + (widget.isMobile ? ' o-no-caret' : '')" data-toggle="dropdown"
-        aria-expanded="false" tabindex="-1">
-        <span class="fa fa-calendar"/> Time Ranges <span t-att-class="widget.symbol"/>
-    </button>
-    <div class="dropdown-menu o_dropdown_menu o_time_range_menu" role="menu">
-        <div class="dropdown-item-text">
-            <label for="date_field_selector">Based On</label>
-            <select id="date_field_selector" class="o_input o_date_field_selector">
-                <t t-foreach="widget.timeRanges" t-as="timeRange">
-                    <t t-if="widget.configuration.id === timeRange.id">
-                    <option t-att-value="timeRange.id" selected="selected">
-                        <t t-esc="timeRange.description"/>
-                    </option>
-                    </t>
-                    <t t-else="">
-                        <option t-att-value="timeRange.id">
-                            <t t-esc="timeRange.description"/>
-                        </option>
-                    </t>
-                </t>
-            </select>
-        </div>
-        <div class="dropdown-item-text">
-            <label for="time_range_selector">Range</label>
-            <select id="time_range_selector" class="o_input o_time_range_selector">
-                <t t-foreach="widget.periodGroups" t-as="group">
-                    <optgroup t-if="group !== 1"/>
-                        <t t-foreach="widget.periodOptions" t-as="option">
-                            <t t-if="option.groupId === group">
-                                <t t-if="widget.configuration.timeRangeId === option.optionId">
-                                    <option t-att-value="option.optionId" selected="selected">
-                                        <t t-esc="option.description"/>
-                                    </option>
-                                </t>
-                                <t t-else="">
-                                    <option t-att-value="option.optionId">
-                                        <t t-esc="option.description"/>
-                                    </option>
-                                </t>
-                            </t>
-                        </t>
-                </t>
-            </select>
-        </div>
-        <div class="dropdown-item-text">
-            <t t-set="isSelected" t-value="widget.configuration.comparisonIsSelected"/>
-            <div class="custom-control custom-checkbox">
-                <input type="checkbox" id="comparison_checkbox" class="custom-control-input o_comparison_checkbox" t-att-checked="isSelected ? 'checked' : undefined"/>
-                <label for="comparison_checkbox" class="custom-control-label">Compare To</label>
-            </div>
-            <select t-att-class="'o_input o_comparison_time_range_selector' + (widget.configuration.comparisonIsSelected ? '' : ' o_hidden')">
-                <t t-foreach="widget.comparisonTimeRangeOptions" t-as="option">
-                    <t t-if="widget.configuration.comparisonTimeRangeId === option.optionId">
-                        <option t-att-value="option.optionId" selected="selected">
-                            <t t-esc="option.description"/>
-                        </option>
-                    </t>
-                    <t t-else="">
-                        <option t-att-value="option.optionId">
-                            <t t-esc="option.description"/>
-                        </option>
-                    </t>
-                </t>
-            </select>
-        </div>
-        <div class="dropdown-item-text">
-            <button class="btn btn-primary o_apply_range" type="button">Apply</button>
-        </div>
-    </div>
-</div>
-
-<div t-name="SearchView" class="o_searchview" role="search" aria-autocomplete="list">
-    <t t-if="widget.isMobile">
-        <t t-call="MobileSearchView"/>
-        <button class="o_toggle_searchview_full o_hidden btn fa fa-filter"/>
-        <button class="o_enable_searchview btn btn-link fa fa-search"/>
-    </t>
-    <t t-else="">
-        <span class="o_searchview_more fa" title="Advanced Search..." role="img" aria-label="Advanced Search..."/>
-    </t>
-</div>
-
-<div t-name="SearchView.SearchBar" class="o_searchview_input_container">
-    <input type="text" class="o_searchview_input" accesskey="Q" placeholder="Search..." role="searchbox" aria-haspopup="true"/>
-</div>
-
-<div t-name="SearchView.SearchFacet" tabindex="0" class="o_searchview_facet" role="img" aria-label="search">
-    <span t-if="widget.facet.type === 'field'" class="o_searchview_facet_label">
-        <t t-esc="widget.facet.filters[0].attrs.string"/>
-    </span>
-    <span t-else="1" t-att-class="'fa ' + widget.icon + ' o_searchview_facet_label'"/>
-    <div class="o_facet_values">
-        <t t-foreach="widget.facetValues" t-as="facetValue">
-            <span t-if="facetValue_index > 0" class="o_facet_values_sep" t-esc="widget.separator"/> <span t-esc="facetValue"/>
-        </t>
-    </div>
-    <div class="fa fa-sm fa-remove o_facet_remove" role="img" aria-label="Remove" title="Remove"/>
-</div>
-
-<t t-name="SearchView.autocomplete">
-    <div class="dropdown-menu o_searchview_autocomplete" role="menu"/>
-</t>
-
-<t t-name="SearchView.filters">
-    <t t-foreach="widget.filters" t-as="filter">
-        <a t-if="!filter.visible || filter.visible()"
-           href="#"
-           class="dropdown-item"
-           t-att-title="filter.attrs.string ? filter.attrs.help : undefined"
-           t-att-data-index="filter_index"
-           role="menuitem">
-            <t t-esc="filter.attrs.string or filter.attrs.help or filter.attrs.name or 'Ω'"/>
-        </a>
-    </t>
-</t>
-<t t-name="SearchView.extended_search.proposition">
-    <div role="menuitem" class="dropdown-item-text o_filter_condition">
-        <span class="o_or_filter">or</span>
-        <span>
-            <select class="o_input o_searchview_extended_prop_field">
-                <t t-foreach="widget.attrs.fields" t-as="field">
-                    <option t-att="{'selected': field === widget.attrs.selected ? 'selected' : null}"
-                            t-att-value="field.name">
-                        <t t-esc="field.string"/>
-                    </option>
-                </t>
-            </select>
-            <span class="o_searchview_extended_delete_prop fa fa-trash-o" role="img" aria-label="Delete" title="Delete"/>
-        </span>
-        <select class="o_input o_searchview_extended_prop_op"/>
-        <span class="o_searchview_extended_prop_value"/>
-    </div>
-</t>
-<t t-name="SearchView.extended_search.proposition.float">
-    <input class="o_input"
-        t-att-type="widget.decimal_point === '.' ? 'number' : 'text'"
-        t-attf-title="Number using #{widget.decimal_point  || '.' } as decimal separator."
-        t-attf-pattern="[0-9]+([\\#{widget.decimal_point || '.' }][0-9]+)?"
-        t-attf-value="0#{widget.decimal_point || '.' }0" step="0.01"/>
-</t>
-<t t-name="SearchView.extended_search.proposition.selection">
-    <select class="o_input">
-        <option t-foreach="widget.field.selection" t-as="element" t-att-value="element[0]">
-            <t t-esc="element[1]"/>
-        </option>
-    </select>
-</t>
-
-<div t-name="MobileSearchView" class="o_mobile_search o_hidden">
-    <div class="o_mobile_search_header">
-        <span class="o_mobile_search_close float-left mt16 mb16 mr8 ml16">
-            <i class="fa fa-arrow-left"/>
-            <strong class="float-right ml8">FILTER</strong>
-        </span>
-        <span class="float-right o_mobile_search_clear_facets mt16 mr16">CLEAR</span>
-    </div>
-    <div class="o_mobile_search_filter o_search_options mb8 mt8 ml16 mr16"/>
-    <div class="btn btn-primary o_mobile_search_show_result fixed-bottom">SEE RESULT</div>
-</div>
-
-<div t-name="AddNewFavoriteMenu">
-    <button type="button" class="dropdown-item o_generator_menu o_add_favorite o_menu_header">Save Current Search</button>
-    <div t-if="widget.isOpen" class="dropdown-item-text o_generator_menu">
-        <div role="menuitem" class="dropdown-item-text o_favorite_name">
-            <input type="text" class="o_input"></input>
-        </div>
-        <t t-set="favId" t-value="_.uniqueId('_checkbox_')" />
-        <div class="custom-control custom-checkbox">
-            <input type="checkbox" t-attf-id="o_favorite_use_by_default#{favId}" class="custom-control-input"/>
-            <label t-attf-for="o_favorite_use_by_default#{favId}" class="custom-control-label">Use by default</label>
-        </div>
-        <div class="custom-control custom-checkbox">
-            <input type="checkbox" t-attf-id="o_favorite_share_all_users#{favId}" class="custom-control-input"/>
-            <label t-attf-for="o_favorite_share_all_users#{favId}" class="custom-control-label">Share with all users <span class="fa fa-users" role="img" aria-label="Users" title="Users"/></label>
-        </div>
-        <div class="dropdown-item-text o_save_favorite">
-            <button type="button" class="btn btn-primary">Save</button>
-        </div>
-    </div>
-</div>
-
 <div t-name="ExportDialog" class="o_export">
     <div class="row o-export-panel no-gutters">
         <div class="col-6 d-flex o_left_panel">
@@ -1459,21 +1699,6 @@
     </button>
 </t>
 
-<div t-name="Pager" class="o_pager">
-    <span class="o_pager_counter">
-        <span class="o_pager_value"></span> / <span class="o_pager_limit"></span>
-    </span>
-    <span class="btn-group" aria-atomic="true">
-        <!-- accesskeys not wanted in X2Many widgets -->
-        <t t-if="widget.options.withAccessKey">
-            <t t-set="att_prev" t-value="{'accesskey': 'p'}" />
-            <t t-set="att_next" t-value="{'accesskey': 'n'}" />
-        </t>
-        <button type="button" class="fa fa-chevron-left btn btn-secondary o_pager_previous" t-att="att_prev" aria-label="Previous" title="Previous" tabindex="-1"/>
-        <button type="button" class="fa fa-chevron-right btn btn-secondary o_pager_next" t-att="att_next" aria-label="Next" title="Next" tabindex="-1"/>
-    </span>
-</div>
-
 <t t-name="AceEditor">
     <div class="oe_form_field o_ace_view_editor oe_ace_open">
         <div class="ace-view-editor"/>
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 6111f0e5732..8928ab3b210 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -260,7 +260,6 @@
         <script type="text/javascript" src="/web/static/src/js/services/data_manager.js"></script>
         <script type="text/javascript" src="/web/static/src/js/services/report_service.js"></script>
         <script type="text/javascript" src="/web/static/src/js/services/session.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/widgets/auto_complete.js"></script>
         <script type="text/javascript" src="/web/static/src/js/widgets/change_password.js"></script>
         <script type="text/javascript" src="/web/static/src/js/tools/test_menus_loader.js"/>
         <script type="text/javascript" src="/web/static/src/js/tools/debug_manager_backend.js"></script>
@@ -273,19 +272,21 @@
         <script type="text/javascript" src="/web/static/src/js/widgets/iframe_widget.js"></script>
         <script type="text/javascript" src="/web/static/src/js/chrome/loading.js"></script>
         <script type="text/javascript" src="/web/static/src/js/widgets/model_field_selector.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/chrome/sidebar.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/chrome/pager.js"></script>
         <script type="text/javascript" src="/web/static/src/js/chrome/systray_menu.js"></script>
         <script type="text/javascript" src="/web/static/src/js/widgets/switch_company_menu.js"></script>
         <script type="text/javascript" src="/web/static/src/js/chrome/user_menu.js"></script>
         <script type="text/javascript" src="/web/static/src/js/chrome/menu.js"></script>
         <script type="text/javascript" src="/web/static/src/js/chrome/apps_menu.js"></script>
 
-        <script type="text/javascript" src="/web/static/src/js/widgets/dropdown_menu.js"></script>
         <script type="text/javascript" src="/web/static/src/js/widgets/pie_chart.js"></script>
         <script type="text/javascript" src="/web/static/src/js/widgets/ribbon.js"></script>
         <script type="text/javascript" src="/web/static/src/js/widgets/signature.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/components/action_menus.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/components/dropdown_menu.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/components/dropdown_menu_item.js"></script>
         <script type="text/javascript" src="/web/static/src/js/components/custom_file_input.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/components/datepicker.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/components/pager.js"></script>
         <script type="text/javascript" src="/web/static/src/js/apps.js"></script>
 
         <script type="text/javascript" src="/web/static/src/js/fields/abstract_field.js"></script>
@@ -303,30 +304,25 @@
         <script type="text/javascript" src="/web/static/src/js/views/abstract_renderer.js"></script>
         <script type="text/javascript" src="/web/static/src/js/views/abstract_renderer_owl.js"></script>
         <script type="text/javascript" src="/web/static/src/js/views/abstract_model.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/model.js"></script>
         <script type="text/javascript" src="/web/static/src/js/views/abstract_controller.js"></script>
         <script type="text/javascript" src="/web/static/src/js/views/renderer_wrapper.js"></script>
         <script type="text/javascript" src="/web/static/src/js/views/basic/basic_model.js"></script>
         <script type="text/javascript" src="/web/static/src/js/views/basic/basic_view.js"></script>
         <script type="text/javascript" src="/web/static/src/js/views/basic/basic_controller.js"></script>
         <script type="text/javascript" src="/web/static/src/js/views/basic/basic_renderer.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/views/control_panel/control_panel_controller.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/views/control_panel/control_panel_model.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/views/control_panel/control_panel_renderer.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/views/control_panel/control_panel_view.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/views/control_panel/search/search_bar_autocomplete_sources.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/views/control_panel/search/search_bar_autocomplete_sources_registry.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/views/control_panel/search/search_facet.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/views/control_panel/search/search_bar.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/views/control_panel/search/filter_menu.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/views/control_panel/search/groupby_menu.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/views/control_panel/search/groupby_menu_mixin.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/views/control_panel/search/time_range_menu.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/views/control_panel/search/favorite_menu.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/views/control_panel/search/add_new_favorite_menu.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/views/control_panel/search/control_panel_view_parameters.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/views/control_panel/search/favorites_submenus_registry.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/views/control_panel/search/search_filters.js"></script>
-        <script type="text/javascript" src="/web/static/src/js/views/control_panel/search/search_filters_registry.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/control_panel/control_panel.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/control_panel/control_panel_model.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/control_panel/control_panel_x2many.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/control_panel/custom_favorite_item.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/control_panel/favorite_menu.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/control_panel/custom_filter_item.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/control_panel/filter_menu.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/control_panel/groupby_menu.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/control_panel/custom_group_by_item.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/control_panel/search_bar.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/control_panel/search_utils.js"></script>
+        <script type="text/javascript" src="/web/static/src/js/control_panel/time_range_menu.js"></script>
         <script type="text/javascript" src="/web/static/src/js/views/search_panel.js"></script>
         <script type="text/javascript" src="/web/static/src/js/views/field_manager_mixin.js"></script>
         <script type="text/javascript" src="/web/static/src/js/views/file_upload_mixin.js"></script>

From 18e5416636b19b0953b1e6e26bfaeab1ebecce4c Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Wed, 11 Mar 2020 09:38:28 +0000
Subject: [PATCH 07/10] [REF] web: Adapt views/actions to new control panel

Some web actions/controllers/viewsl have been adapted to properly instantiate the
newly refactored control panel and update it accordingly. We needed to adapt the
starting mechanism of actions and controllers to ensure that the control panel
instantiation did not delay the loading of any widget.

Part of task 2196029

Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
---
 .../static/src/js/chrome/abstract_action.js   | 115 +++--
 .../src/js/chrome/abstract_web_client.js      |  14 +-
 .../static/src/js/chrome/action_manager.js    |   2 +-
 .../js/chrome/action_manager_act_window.js    |  11 +-
 .../web/static/src/js/chrome/action_mixin.js  |  72 ++--
 .../src/js/components/custom_file_input.js    |   2 +-
 addons/web/static/src/js/core/custom_hooks.js |  52 +--
 addons/web/static/src/js/core/owl_dialog.js   |   4 +-
 .../static/src/js/fields/relational_fields.js | 155 +++----
 .../web/static/src/js/report/client_action.js |  22 +-
 .../static/src/js/services/data_manager.js    |  10 +-
 .../src/js/tools/debug_manager_backend.js     |   2 +-
 .../src/js/views/abstract_controller.js       | 403 ++++++++----------
 .../web/static/src/js/views/abstract_view.js  | 175 ++++----
 .../src/js/views/basic/basic_controller.js    | 154 +++----
 .../static/src/js/views/basic/basic_model.js  |   2 +-
 .../src/js/views/basic/basic_renderer.js      |  14 +
 .../js/views/calendar/calendar_controller.js  |  54 +--
 .../src/js/views/form/form_controller.js      | 322 ++++++--------
 .../static/src/js/views/form/form_renderer.js |   3 -
 .../web/static/src/js/views/form/form_view.js |  12 +-
 .../src/js/views/graph/graph_controller.js    | 268 ++++++++----
 .../static/src/js/views/graph/graph_model.js  | 112 +++--
 .../static/src/js/views/graph/graph_view.js   |  79 ++--
 .../src/js/views/kanban/kanban_controller.js  |  83 ++--
 .../src/js/views/kanban/kanban_model.js       |   2 +-
 .../static/src/js/views/kanban/kanban_view.js |   7 +-
 .../src/js/views/list/list_controller.js      | 227 +++++-----
 .../static/src/js/views/list/list_renderer.js | 121 +++---
 .../web/static/src/js/views/list/list_view.js |   6 +-
 .../src/js/views/pivot/pivot_controller.js    |  67 ++-
 .../static/src/js/views/pivot/pivot_model.js  |  87 ++--
 .../static/src/js/views/pivot/pivot_view.js   |   6 +-
 .../web/static/src/js/views/qweb/qweb_view.js |  13 +-
 .../web/static/src/js/views/search_panel.js   |  33 +-
 .../web/static/src/js/views/view_dialogs.js   |   1 +
 addons/web/static/src/js/widgets/pie_chart.js |   3 +
 addons/web/static/src/xml/debug.xml           |   2 +-
 38 files changed, 1304 insertions(+), 1413 deletions(-)

diff --git a/addons/web/static/src/js/chrome/abstract_action.js b/addons/web/static/src/js/chrome/abstract_action.js
index e28fd896182..b300cb22cf4 100644
--- a/addons/web/static/src/js/chrome/abstract_action.js
+++ b/addons/web/static/src/js/chrome/abstract_action.js
@@ -9,12 +9,14 @@ odoo.define('web.AbstractAction', function (require) {
  */
 
 var ActionMixin = require('web.ActionMixin');
-var ControlPanelView = require('web.ControlPanelView');
+var ControlPanel = require('web.ControlPanel');
+var ControlPanelModel = require('web.ControlPanelModel');
 var Widget = require('web.Widget');
+const { ComponentWrapper } = require('web.OwlCompatibility');
 
 var AbstractAction = Widget.extend(ActionMixin, {
     config: {
-        ControlPanelView: ControlPanelView,
+        ControlPanel: ControlPanel,
     },
 
     /**
@@ -33,7 +35,7 @@ var AbstractAction = Widget.extend(ActionMixin, {
      * For example, the Discuss application adds the following line in its
      * constructor::
      *
-     *      this.controlPanelParams.modelName = 'mail.message';
+     *      this.controlPanelModelConfig.modelName = 'mail.message';
      *
      * @type boolean
      */
@@ -73,15 +75,25 @@ var AbstractAction = Widget.extend(ActionMixin, {
     init: function (parent, action, options) {
         this._super(parent);
         this._title = action.display_name || action.name;
-        this.controlPanelParams = {
-            actionId: action.id,
-            context: action.context,
-            breadcrumbs: options && options.breadcrumbs || [],
-            title: this.getTitle(),
-            viewId: action.search_view_id && action.search_view_id[0],
-            withSearchBar: this.withSearchBar,
-            searchMenuTypes: this.searchMenuTypes,
-        };
+
+        if (this.hasControlPanel) {
+            this.controlPanelModelConfig = {
+                actionId: action.id,
+                actionContext: action.context || {},
+                actionDomain: action.domain || [],
+                env: owl.Component.env,
+                withSearchBar: this.withSearchBar,
+            };
+
+            this.viewId = action.search_view_id && action.search_view_id[0];
+
+            this.controlPanelProps = {
+                action,
+                breadcrumbs: options && options.breadcrumbs,
+                withSearchBar: this.withSearchBar,
+                searchMenuTypes: this.searchMenuTypes,
+            };
+        }
     },
     /**
      * The willStart method is actually quite complicated if the client action
@@ -89,40 +101,73 @@ var AbstractAction = Widget.extend(ActionMixin, {
      *
      * @override
      */
-    willStart: function () {
-        var self = this;
-        var proms = [this._super.apply(this, arguments)];
+    willStart: async function () {
+        const proms = [this._super(...arguments)];
         if (this.hasControlPanel) {
-            var params = this.controlPanelParams;
             if (this.loadControlPanel) {
-                proms.push(this
-                    .loadFieldView(params.modelName, params.context || {}, params.viewId, 'search')
-                    .then(function (fieldsView) {
-                        params.viewInfo = {
-                            arch: fieldsView.arch,
-                            fields: fieldsView.fields,
-                        };
-                    }));
+                const { context, searchMenuTypes } = this.controlPanelProps;
+                const { modelName } = this.controlPanelModelConfig;
+                const options = { load_filters: searchMenuTypes.includes('favorite') };
+                const args = [modelName, context || {}, this.viewId, 'search', options];
+                const loadFieldViewPromise = this.loadFieldView(...args);
+                const {arch, fields, favoriteFilters } = await loadFieldViewPromise;
+                this.controlPanelModelConfig.viewInfo = {arch, fields, favoriteFilters };
+                this.controlPanelProps.fields = fields;
             }
-            return Promise.all(proms).then(function () {
-                var controlPanelView = new self.config.ControlPanelView(params);
-                return controlPanelView.getController(self).then(function (controlPanel) {
-                    self._controlPanel = controlPanel;
-                    return self._controlPanel.appendTo(document.createDocumentFragment());
-                });
-            });
+            this._controlPanelModel = new ControlPanelModel(this.controlPanelModelConfig);
+            this.controlPanelProps.controlPanelModel = this._controlPanelModel;
+            proms.push(this._controlPanelModel.isReady);
         }
         return Promise.all(proms);
     },
     /**
      * @override
      */
-    start: function () {
-        if (this._controlPanel) {
-            this._controlPanel.$el.prependTo(this.$el);
+    start: async function () {
+        await this._super(...arguments);
+        if (this.hasControlPanel) {
+            if ('title' in this.controlPanelProps) {
+                this._setTitle(this.controlPanelProps.title);
+            }
+            this.controlPanelProps.title = this.getTitle();
+            this._controlPanelWrapper = new ComponentWrapper(this, ControlPanel, this.controlPanelProps);
+            await this._controlPanelWrapper.mount(this.el, { position: 'first-child' });
+
         }
-        return this._super.apply(this, arguments);
     },
+    /**
+     * @override
+     */
+    destroy: function() {
+        this._super.apply(this, arguments);
+        ActionMixin.destroy.call(this);
+    },
+    /**
+     * @override
+     */
+    on_attach_callback: function () {
+        ActionMixin.on_attach_callback.call(this);
+        if (this.hasControlPanel) {
+            this._controlPanelModel.on('search', this, this._onSearch);
+            this._controlPanelModel.on('get-controller-query-params', this, this._onGetOwnedQueryParams);
+        }
+    },
+    /**
+     * @override
+     */
+    on_detach_callback: function () {
+        ActionMixin.on_detach_callback.call(this);
+        if (this.hasControlPanel) {
+            this._controlPanelModel.off('search', this);
+            this._controlPanelModel.off('get-controller-query-params', this);
+        }
+    },
+
+    /**
+     * @private
+     * @param {Object} [searchQuery]
+     */
+    _onSearch: function () {},
 });
 
 return AbstractAction;
diff --git a/addons/web/static/src/js/chrome/abstract_web_client.js b/addons/web/static/src/js/chrome/abstract_web_client.js
index 8837ffe813e..9012b7f53fd 100644
--- a/addons/web/static/src/js/chrome/abstract_web_client.js
+++ b/addons/web/static/src/js/chrome/abstract_web_client.js
@@ -32,9 +32,7 @@ var _t = core._t;
 
 var AbstractWebClient = Widget.extend(KeyboardNavigationMixin, {
     dependencies: ['notification'],
-    events: _.extend({}, KeyboardNavigationMixin.events, {
-        'click .o_search_options .dropdown-menu': '_onClickDropDownMenu',
-    }),
+    events: _.extend({}, KeyboardNavigationMixin.events),
     custom_events: {
         call_service: '_onCallService',
         clear_uncommitted_changes: function (e) {
@@ -356,16 +354,6 @@ var AbstractWebClient = Widget.extend(KeyboardNavigationMixin, {
         const result = service[payload.method].apply(service, args);
         payload.callback(result);
     },
-    /**
-     * When clicking inside a dropdown to modify search options
-     * prevents the bootstrap dropdown to close on itself
-     *
-     * @private
-     * @param {Event} ev
-     */
-    _onClickDropDownMenu: function (ev) {
-        ev.stopPropagation();
-    },
     /**
      * Whenever the connection is lost, we need to notify the user.
      *
diff --git a/addons/web/static/src/js/chrome/action_manager.js b/addons/web/static/src/js/chrome/action_manager.js
index ee108c94326..92c090827d8 100644
--- a/addons/web/static/src/js/chrome/action_manager.js
+++ b/addons/web/static/src/js/chrome/action_manager.js
@@ -877,7 +877,7 @@ var ActionManager = Widget.extend({
     /**
      * @private
      * @param {OdooEvent} ev
-     * @param {OdooEvent} ev.data.controllerID
+     * @param {string} ev.data.controllerID
      */
     _onBreadcrumbClicked: function (ev) {
         ev.stopPropagation();
diff --git a/addons/web/static/src/js/chrome/action_manager_act_window.js b/addons/web/static/src/js/chrome/action_manager_act_window.js
index ff060153f27..f6c5661eb8e 100644
--- a/addons/web/static/src/js/chrome/action_manager_act_window.js
+++ b/addons/web/static/src/js/chrome/action_manager_act_window.js
@@ -546,6 +546,7 @@ ActionManager.include({
                     return Promise.resolve(controller.widget.willRestore()).then(function () {
                         viewOptions = _.extend({}, viewOptions, {
                             breadcrumbs: self._getBreadcrumbs(self.controllerStack.slice(0, index)),
+                            shouldUpdateControlPanel: true,
                         });
                         return controller.widget.reload(viewOptions).then(function () {
                             return controller;
@@ -708,15 +709,15 @@ ActionManager.include({
      */
     _onSwitchView: function (ev) {
         ev.stopPropagation();
-        var viewType = ev.data.view_type;
-        var currentController = this.getCurrentController();
+        const viewType = ev.data.view_type;
+        const currentController = this.getCurrentController();
         if (currentController.jsID === ev.data.controllerID) {
             // only switch to the requested view if the controller that
             // triggered the request is the current controller
-            var action = this.actions[currentController.actionID];
-            var currentControllerState = currentController.widget.exportState();
+            const action = this.actions[currentController.actionID];
+            const currentControllerState = currentController.widget.exportState();
             action.controllerState = _.extend({}, action.controllerState, currentControllerState);
-            var options = {
+            const options = {
                 controllerState: action.controllerState,
                 currentId: ev.data.res_id,
             };
diff --git a/addons/web/static/src/js/chrome/action_mixin.js b/addons/web/static/src/js/chrome/action_mixin.js
index a704e5736a0..99f45405c72 100644
--- a/addons/web/static/src/js/chrome/action_mixin.js
+++ b/addons/web/static/src/js/chrome/action_mixin.js
@@ -18,11 +18,13 @@ odoo.define('web.ActionMixin', function (require) {
      * action manager.
      *
      * @module web.ActionMixin
+     * @extends WidgetAdapterMixin
      */
 
     const core = require('web.core');
+    const { WidgetAdapterMixin } = require('web.OwlCompatibility');
 
-    const ActionMixin = {
+    const ActionMixin = Object.assign({}, WidgetAdapterMixin, {
         template: 'Action',
 
         /**
@@ -41,7 +43,7 @@ odoo.define('web.ActionMixin', function (require) {
          * will also implement the ParentedMixin which actually manages those
          */
         custom_events: {
-            get_controller_query_params: '_onGetControllerQueryParams',
+            get_controller_query_params: '_onGetOwnedQueryParams',
         },
 
         /**
@@ -63,16 +65,6 @@ odoo.define('web.ActionMixin', function (require) {
          */
         _title: '',
 
-        /**
-         * Called each time the action is attached into the DOM.
-         */
-        on_attach_callback: function () { },
-
-        /**
-         * Called each time the action is detached from the DOM.
-         */
-        on_detach_callback: function () { },
-
         /**
          * @override
          */
@@ -177,21 +169,40 @@ odoo.define('web.ActionMixin', function (require) {
         renderButtons: function ($node) { },
 
         /**
-         * This is the main method to customize the controlpanel content.
-         *
-         * @see updateContents method in ControlPanelRenderer for more info
-         *
-         * @param {Object} [status]
-         * @param {string} [status.title]
-         * @param {Object} [options]
-         * @param {boolean} [options.clear]
+         * Method used to update the widget buttons state.
          */
-        updateControlPanel: function (status, options) {
-            if (this._controlPanel) {
-                status = status || {};
-                status.title = status.title || this.getTitle();
-                this._controlPanel.updateContents(status, options || {});
+        updateButtons: function () { },
+
+        /**
+         * The parameter newProps is used to update the props of
+         * the controlPanelWrapper before render it. The key 'cp_content'
+         * is not a prop of the control panel itself. One should if possible use
+         * the slot mechanism.
+         *
+         * @param {Object} [newProps={}]
+         * @returns {Promise}
+         */
+        updateControlPanel: async function (newProps = {}) {
+            if (!this.withControlPanel && !this.hasControlPanel) {
+                return;
             }
+            const props = Object.assign({}, newProps); // Work with a clean new object
+            if ('title' in props) {
+                this._setTitle(props.title);
+                this.controlPanelProps.title = this.getTitle();
+                delete props.title;
+            }
+            if ('cp_content' in props) {
+                // cp_content has been updated: refresh it.
+                this.controlPanelProps.cp_content = Object.assign({},
+                    this.controlPanelProps.cp_content,
+                    props.cp_content,
+                );
+                delete props.cp_content;
+            }
+            // Update props state
+            Object.assign(this.controlPanelProps, props);
+            return this._controlPanelWrapper.update(this.controlPanelProps);
         },
 
         //---------------------------------------------------------------------
@@ -204,7 +215,6 @@ odoo.define('web.ActionMixin', function (require) {
          */
         _setTitle: function (title) {
             this._title = title;
-            this.updateControlPanel({ title: this._title }, { clear: false });
         },
 
         //---------------------------------------------------------------------
@@ -218,15 +228,13 @@ odoo.define('web.ActionMixin', function (require) {
          * current controller.
          *
          * @private
-         * @param {OdooEvent} ev
-         * @param {function} ev.data.callback used to send the requested state
+         * @param {function} callback used to send the requested state
          */
-        _onGetControllerQueryParams: function (ev) {
-            ev.stopPropagation();
+        _onGetOwnedQueryParams: function (callback) {
             const state = this.getOwnedQueryParams();
-            ev.data.callback(state || {});
+            callback(state || {});
         },
-    };
+    });
 
     return ActionMixin;
 });
diff --git a/addons/web/static/src/js/components/custom_file_input.js b/addons/web/static/src/js/components/custom_file_input.js
index eb9c4267cfc..14f521a4ed6 100644
--- a/addons/web/static/src/js/components/custom_file_input.js
+++ b/addons/web/static/src/js/components/custom_file_input.js
@@ -82,7 +82,7 @@ odoo.define('web.CustomFileInput', function (require) {
         model: { type: String, optional: 1 },
         multi_upload: { type: Boolean, optional: 1 },
     };
-    CustomFileInput.template = 'CustomFileInput';
+    CustomFileInput.template = 'web.CustomFileInput';
 
     return CustomFileInput;
 });
diff --git a/addons/web/static/src/js/core/custom_hooks.js b/addons/web/static/src/js/core/custom_hooks.js
index 69750066a8c..883f385ac3c 100644
--- a/addons/web/static/src/js/core/custom_hooks.js
+++ b/addons/web/static/src/js/core/custom_hooks.js
@@ -5,35 +5,37 @@ odoo.define('web.custom_hooks', function () {
     const { onMounted, onPatched, onWillUnmount } = hooks;
 
     /**
-     * Returns a function which purpose is to focus the given selector on the next
-     * repaint (mount or patch). Its default selector is the first element having
-     * an `autofocus' attribute. Text selection will be set at the end of the value
-     * if the target is a text element. The action is lost if no element was found.
-     *
-     * @returns {Function}
+     * Focus a given selector as soon as it appears in the DOM and if it was not
+     * displayed before. If the selected target is an input|textarea, set the selection
+     * at the end.
+     * @param {Object} [params]
+     * @param {string} [params.selector='autofocus'] default: select the first element
+     *                 with an `autofocus` attribute.
+     * @returns {Function} function that forces the focus on the next update if visible.
      */
-    function useFocusOnUpdate() {
-        const component = Component.current;
-        let willFocus = null;
-
-        function _focusSelector() {
-            if (willFocus) {
-                const target = component.el.querySelector(willFocus);
-                if (target) {
-                    target.focus();
-                    if (['INPUT', 'TEXTAREA'].includes(target.tagName)) {
-                        target.selectionStart = target.selectionEnd = target.value.length;
-                    }
+    function useAutofocus(params = {}) {
+        const comp = Component.current;
+        // Prevent autofocus in mobile
+        if (comp.env.device.isMobile) {
+            return () => {};
+        }
+        const selector = params.selector || '[autofocus]';
+        let target = null;
+        function autofocus() {
+            const prevTarget = target;
+            target = comp.el.querySelector(selector);
+            if (target && target !== prevTarget) {
+                target.focus();
+                if (['INPUT', 'TEXTAREA'].includes(target.tagName)) {
+                    target.selectionStart = target.selectionEnd = target.value.length;
                 }
-                willFocus = null;
             }
         }
+        onMounted(autofocus);
+        onPatched(autofocus);
 
-        onMounted(_focusSelector);
-        onPatched(_focusSelector);
-
-        return function focusOnUpdate(selector = '[autofocus]') {
-            willFocus = selector;
+        return function focusOnUpdate() {
+            target = null;
         };
     }
 
@@ -110,7 +112,7 @@ odoo.define('web.custom_hooks', function () {
     }
 
     return {
-        useFocusOnUpdate,
+        useAutofocus,
         useListener,
     };
 });
diff --git a/addons/web/static/src/js/core/owl_dialog.js b/addons/web/static/src/js/core/owl_dialog.js
index d376e042ae4..daa29468934 100644
--- a/addons/web/static/src/js/core/owl_dialog.js
+++ b/addons/web/static/src/js/core/owl_dialog.js
@@ -163,7 +163,7 @@ odoo.define('web.OwlDialog', function () {
                 $(this.mainButton)
                     .tooltip({
                         delay: { show: 200, hide: 0 },
-                        title: () => this.env.qweb.renderToString('DialogButton.tooltip', {
+                        title: () => this.env.qweb.renderToString('web.DialogButton.tooltip', {
                             title: this.mainButton.innerText.toUpperCase(),
                         }),
                         trigger: 'manual',
@@ -263,7 +263,7 @@ odoo.define('web.OwlDialog', function () {
         technical: Boolean,
         title: String,
     };
-    Dialog.template = 'OwlDialog';
+    Dialog.template = 'web.OwlDialog';
 
     return Dialog;
 });
diff --git a/addons/web/static/src/js/fields/relational_fields.js b/addons/web/static/src/js/fields/relational_fields.js
index 705a0c872fa..667c2a1b6ca 100644
--- a/addons/web/static/src/js/fields/relational_fields.js
+++ b/addons/web/static/src/js/fields/relational_fields.js
@@ -16,7 +16,7 @@ odoo.define('web.relational_fields', function (require) {
 var AbstractField = require('web.AbstractField');
 var basicFields = require('web.basic_fields');
 var concurrency = require('web.concurrency');
-var ControlPanelView = require('web.ControlPanelView');
+const ControlPanelX2Many = require('web.ControlPanelX2Many');
 var core = require('web.core');
 var data = require('web.data');
 var Dialog = require('web.Dialog');
@@ -26,7 +26,7 @@ const Domain = require('web.Domain');
 var KanbanRecord = require('web.KanbanRecord');
 var KanbanRenderer = require('web.KanbanRenderer');
 var ListRenderer = require('web.ListRenderer');
-var Pager = require('web.Pager');
+const { ComponentWrapper, WidgetAdapterMixin } = require('web.OwlCompatibility');
 
 var _t = core._t;
 var _lt = core._lt;
@@ -963,7 +963,7 @@ var KanbanFieldMany2One = AbstractField.extend({
 // X2Many widgets
 //------------------------------------------------------------------------------
 
-var FieldX2Many = AbstractField.extend({
+var FieldX2Many = AbstractField.extend(WidgetAdapterMixin, {
     tagName: 'div',
     custom_events: _.extend({}, AbstractField.prototype.custom_events, {
         add_record: '_onAddRecord',
@@ -980,6 +980,7 @@ var FieldX2Many = AbstractField.extend({
         navigation_move: '_onNavigationMove',
         save_optional_fields: '_onSaveOrLoadOptionalFields',
         load_optional_fields: '_onSaveOrLoadOptionalFields',
+        pager_changed: '_onPagerChanged',
     }),
 
     // We need to trigger the reset on every changes to be aware of the parent changes
@@ -1006,6 +1007,21 @@ var FieldX2Many = AbstractField.extend({
         this.isMany2Many = this.field.type === 'many2many' || this.attrs.widget === 'many2many';
         this.activeActions = {};
         this.recordParams = {fieldName: this.name, viewType: this.viewType};
+        // The limit is fixed so it cannot be changed by adding/removing lines in
+        // the widget. It will only change through a hard reload or when manually
+        // changing the pager (see _onPagerChanged).
+        this.pagingState = {
+            currentMinimum: this.value.offset + 1,
+            limit: this.value.limit,
+            size: this.value.count,
+            validate: () => {
+                // TODO: we should have some common method in the basic renderer...
+                return this.view.arch.tag === 'tree' ?
+                    this.renderer.unselectRow() :
+                    Promise.resolve();
+            },
+            withAccessKey: false,
+        };
         var arch = this.view && this.view.arch;
         if (arch) {
             this.activeActions.create = arch.attrs.create ?
@@ -1024,8 +1040,21 @@ var FieldX2Many = AbstractField.extend({
     /**
      * @override
      */
-    start: function () {
-        return this._renderControlPanel().then(this._super.bind(this));
+    start: async function () {
+        const _super = this._super.bind(this);
+        if (this.view) {
+            this._renderButtons();
+            this._controlPanelWrapper = new ComponentWrapper(this, ControlPanelX2Many, {
+                cp_content: { $buttons: this.$buttons },
+                pager: this.pagingState,
+            });
+            await this._controlPanelWrapper.mount(this.el, { position: 'first-child' });
+        }
+        return _super(...arguments);
+    },
+    destroy: function () {
+        WidgetAdapterMixin.destroy.call(this);
+        this._super();
     },
     /**
      * For the list renderer to properly work, it must know if it is in the DOM,
@@ -1033,6 +1062,7 @@ var FieldX2Many = AbstractField.extend({
      */
     on_attach_callback: function () {
         this.isInDOM = true;
+        WidgetAdapterMixin.on_attach_callback.call(this);
         if (this.renderer) {
             this.renderer.on_attach_callback();
         }
@@ -1042,6 +1072,10 @@ var FieldX2Many = AbstractField.extend({
      */
     on_detach_callback: function () {
         this.isInDOM = false;
+        WidgetAdapterMixin.on_detach_callback.call(this);
+        if (this.renderer) {
+            this.renderer.on_detach_callback();
+        }
     },
 
     //--------------------------------------------------------------------------
@@ -1116,7 +1150,10 @@ var FieldX2Many = AbstractField.extend({
             }
         }
         return this._super.apply(this, arguments).then(() => {
-            this._updateControlPanel();
+            if (this.view) {
+                this._renderButtons();
+                this._updateControlPanel();
+            }
         });
     },
 
@@ -1249,8 +1286,8 @@ var FieldX2Many = AbstractField.extend({
                 addTrashIcon: this._hasTrashIcon(),
                 columnInvisibleFields: this.currentColInvisibleFields,
                 keepWidths: true,
-            }).then(function () {
-                self.pager.updateState({ size: self.value.count });
+            }).then(() => {
+                this._updateControlPanel({ size: this.value.count });
             });
         }
         var arch = this.view.arch;
@@ -1302,59 +1339,6 @@ var FieldX2Many = AbstractField.extend({
             return this._super();
         }
     },
-    /**
-     * Instanciates a control panel with the appropriate buttons and a pager.
-     * Prepends the control panel's $el to this widget's $el.
-     *
-     * @private
-     * @returns {Promise}
-     */
-    _renderControlPanel: function () {
-        if (!this.view) {
-            return Promise.resolve();
-        }
-        var self = this;
-        var defs = [];
-        var controlPanelView = new ControlPanelView({
-            template: 'X2ManyControlPanel',
-            withSearchBar: false,
-        });
-        var cpDef = controlPanelView.getController(this).then(function (controlPanel) {
-            self._controlPanel = controlPanel;
-            return self._controlPanel.prependTo(self.$el);
-        });
-        this.pager = new Pager(this, this.value.count, this.value.offset + 1, this.value.limit, {
-            single_page_hidden: true,
-            withAccessKey: false,
-            validate: function () {
-                var isList = self.view.arch.tag === 'tree';
-                // TODO: we should have some common method in the basic renderer...
-                return isList ? self.renderer.unselectRow() : Promise.resolve();
-            },
-        });
-        this.pager.on('pager_changed', this, function (new_state) {
-            self.trigger_up('load', {
-                id: self.value.id,
-                limit: new_state.limit,
-                offset: new_state.current_min - 1,
-                on_success: function (value) {
-                    self.value = value;
-                    self._render();
-                },
-            });
-        });
-        this._renderButtons();
-        defs.push(this.pager.appendTo($('<div>'))); // start the pager
-        defs.push(cpDef);
-        return Promise.all(defs).then(function () {
-            self._controlPanel.updateContents({
-                cp_content: {
-                    $buttons: self.$buttons,
-                    $pager: self.pager.$el,
-                }
-            });
-        });
-    },
     /**
      * Renders the buttons and sets this.$buttons.
      *
@@ -1395,8 +1379,8 @@ var FieldX2Many = AbstractField.extend({
             } else {
                 self.renderer.setRowMode(recordID, 'readonly').then(resolve);
             }
-        }).then(function () {
-            self.pager.updateState({ size: self.value.count });
+        }).then(async function () {
+            self._updateControlPanel({ size: self.value.count });
             var newEval = self._evalColumnInvisibleFields();
             if (!_.isEqual(self.currentColInvisibleFields, newEval)) {
                 self.currentColInvisibleFields = newEval;
@@ -1409,18 +1393,17 @@ var FieldX2Many = AbstractField.extend({
     /**
      * Re-renders buttons and updates the control panel. This method is called
      * when the widget is reset, as the available buttons might have changed.
+     * The only mutable element in X2Many fields will be the pager.
      *
      * @private
      */
-    _updateControlPanel: function () {
-        if (this._controlPanel) {
-            this._renderButtons();
-            const params = {
-                cp_content: {
-                    $buttons: this.$buttons,
-                }
+    _updateControlPanel: function (pagingState) {
+        if (this._controlPanelWrapper) {
+            const newProps = {
+                cp_content: { $buttons: this.$buttons },
+                pager: Object.assign(this.pagingState, pagingState),
             };
-            this._controlPanel.updateContents(params, { clear: false });
+            return this._controlPanelWrapper.update(newProps);
         }
     },
     /**
@@ -1576,6 +1559,30 @@ var FieldX2Many = AbstractField.extend({
     _onOpenRecord: function () {
         // to implement
     },
+    /**
+     * We re-render the pager immediately with the new event values to allow
+     * it to request another pager change while another one is still ongoing.
+     * @see field_manager_mixin for concurrency handling.
+     *
+     * @private
+     * @param {OdooEvent} ev
+     */
+    _onPagerChanged: function (ev) {
+        ev.stopPropagation();
+        const { currentMinimum, limit } = ev.data;
+        this._updateControlPanel({ currentMinimum, limit });
+        this.trigger_up('load', {
+            id: this.value.id,
+            limit,
+            offset: currentMinimum - 1,
+            on_success: value => {
+                this.value = value;
+                this.pagingState.limit = value.limit;
+                this.pagingState.size = value.count;
+                this._render();
+            },
+        });
+    },
     /**
      * Called when the renderer ask to save a line (the user tries to leave it)
      * -> Nothing is to "save" here, the model was already notified of the line
@@ -1777,7 +1784,7 @@ var FieldOne2Many = FieldX2Many.extend({
      */
     reset: function (record, ev) {
         var self = this;
-        return this._super.apply(this, arguments).then(function () {
+        return this._super.apply(this, arguments).then(() => {
             if (ev && ev.target === self && ev.data.changes && self.view.arch.tag === 'tree') {
                 if (ev.data.changes[self.name] && ev.data.changes[self.name].operation === 'CREATE') {
                     var index = 0;
@@ -1792,7 +1799,7 @@ var FieldOne2Many = FieldX2Many.extend({
                         // have 3 records, and we click on add, we will see the
                         // 4 records on the same page, but we do not want a
                         // pager.
-                        self.pager.updateState({ size: self.value.count - 1});
+                        self._updateControlPanel({ size: self.value.count - 1 });
                     }
                     var newID = self.value.data[index].id;
                     self.renderer.editRecord(newID);
@@ -1832,7 +1839,7 @@ var FieldOne2Many = FieldX2Many.extend({
      */
     _renderButtons: function () {
         if (this.activeActions.create) {
-            this._super.apply(this, arguments);
+            return this._super(...arguments);
         }
     },
     /**
diff --git a/addons/web/static/src/js/report/client_action.js b/addons/web/static/src/js/report/client_action.js
index c8b5621e6de..9bd7c037d6e 100644
--- a/addons/web/static/src/js/report/client_action.js
+++ b/addons/web/static/src/js/report/client_action.js
@@ -37,7 +37,7 @@ var ReportAction = AbstractAction.extend({
     start: function () {
         var self = this;
         this.iframe = this.$('iframe')[0];
-        return Promise.all([this._super.apply(this, arguments), session.is_bound]).then(function () {
+        return Promise.all([this._super.apply(this, arguments), session.is_bound]).then(async function () {
             var web_base_url = session['web.base.url'];
             var trusted_host = utils.get_host_from_url(web_base_url);
             var trusted_protocol = utils.get_protocol_from_url(web_base_url);
@@ -46,7 +46,11 @@ var ReportAction = AbstractAction.extend({
             self.$buttons = $(QWeb.render('report.client_action.ControlButtons', {}));
             self.$buttons.on('click', '.o_report_print', self.on_click_print);
 
-            self._update_control_panel();
+            await self.updateControlPanel({
+                cp_content: {
+                    $buttons: self.$buttons,
+                },
+            });
 
             // Load the report in the iframe. Note that we use a relative URL.
             self.iframe.src = self.report_url;
@@ -54,7 +58,11 @@ var ReportAction = AbstractAction.extend({
     },
 
     do_show: function () {
-        this._update_control_panel();
+        this.updateControlPanel({
+            cp_content: {
+                $buttons: this.$buttons,
+            },
+        });
         return this._super.apply(this, arguments);
     },
 
@@ -69,14 +77,6 @@ var ReportAction = AbstractAction.extend({
         $(window).off('message', this.on_message_received);
     },
 
-    _update_control_panel: function () {
-        this.updateControlPanel({
-            cp_content: {
-                $buttons: this.$buttons,
-            },
-        });
-    },
-
     /**
      * Event handler of the message post. We only handle them if they're from
      * `web.base.url` host and protocol and if they're part of `AUTHORIZED_MESSAGES`.
diff --git a/addons/web/static/src/js/services/data_manager.js b/addons/web/static/src/js/services/data_manager.js
index 45374d4833b..12d7ce24f8d 100644
--- a/addons/web/static/src/js/services/data_manager.js
+++ b/addons/web/static/src/js/services/data_manager.js
@@ -99,26 +99,28 @@ return core.Class.extend({
                 },
                 model: model,
                 method: 'load_views',
-            }).then(function (result) {
+            }).then(async result => {
                 // Freeze the fields dict as it will be shared between views and
                 // no one should edit it
                 utils.deepFreeze(result.fields);
 
                 // Insert views into the fields_views cache
-                _.each(views_descr, function (view_descr) {
+                for (const view_descr of views_descr) {
                     var toolbar = options.toolbar && view_descr[1] !== 'search';
                     var fv_key = self._gen_key(model, view_descr[0], view_descr[1], toolbar, context);
                     var fvg = result.fields_views[view_descr[1]];
+                    if (view_descr[1] === 'search') {
+                        fvg.favoriteFilters = result.filters;
+                    }
                     fvg.viewFields = fvg.fields;
                     fvg.fields = result.fields;
                     self._cache.fields_views[fv_key] = Promise.resolve(fvg);
-                });
+                }
 
                 // Insert filters, if any, into the filters cache
                 if (result.filters) {
                     self._cache.filters[filters_key] = Promise.resolve(result.filters);
                 }
-
                 return result.fields_views;
             }, this._invalidate.bind(this, this._cache.views, key));
         }
diff --git a/addons/web/static/src/js/tools/debug_manager_backend.js b/addons/web/static/src/js/tools/debug_manager_backend.js
index 2c445ff745e..b9f211872eb 100644
--- a/addons/web/static/src/js/tools/debug_manager_backend.js
+++ b/addons/web/static/src/js/tools/debug_manager_backend.js
@@ -245,7 +245,7 @@ DebugManager.include({
                 action: this._action,
                 can_edit: this._can_edit_views,
                 controller: this._controller,
-                controlPanelView: this._controller && this._controller._controlPanel,
+                withControlPanel: this._controller && this._controller.withControlPanel,
                 manager: this,
                 view: this._controller && _.findWhere(this._action.views, {
                     type: this._controller.viewType,
diff --git a/addons/web/static/src/js/views/abstract_controller.js b/addons/web/static/src/js/views/abstract_controller.js
index aa612cbea01..09451cdcbfa 100644
--- a/addons/web/static/src/js/views/abstract_controller.js
+++ b/addons/web/static/src/js/views/abstract_controller.js
@@ -15,86 +15,93 @@ odoo.define('web.AbstractController', function (require) {
 var ActionMixin = require('web.ActionMixin');
 var ajax = require('web.ajax');
 var concurrency = require('web.concurrency');
-var config = require('web.config');
-var core = require('web.core');
+const { ComponentWrapper } = require('web.OwlCompatibility');
+const ControlPanel = require('web.ControlPanel');
 var mvc = require('web.mvc');
-var { WidgetAdapterMixin } = require('web.OwlCompatibility');
-
 var session = require('web.session');
 
-var QWeb = core.qweb;
 
-var AbstractController = mvc.Controller.extend(ActionMixin, WidgetAdapterMixin, {
+var AbstractController = mvc.Controller.extend(ActionMixin, {
     custom_events: _.extend({}, ActionMixin.custom_events, {
         navigation_move: '_onNavigationMove',
         open_record: '_onOpenRecord',
-        search: '_onSearch',
-        switch_view: '_onSwitchView',
         search_panel_domain_updated: '_onSearchPanelDomainUpdated',
+        switch_view: '_onSwitchView',
     }),
     events: {
         'click a[type="action"]': '_onActionClicked',
     },
 
     /**
-     * @override
-     * @param {string} params.modelName
-     * @param {string} [params.controllerID] an id to ease the communication
-     *   with upstream components
-     * @param {ControlPanelController} [params.controlPanel]
-     * @param {any} [params.handle] a handle that will be given to the model (some id)
-     * @param {boolean} params.isMultiRecord
+     * @param {Object} param
      * @param {Object[]} params.actionViews
+     * @param {string} params.activeActions
+     * @param {string} params.bannerRoute
+     * @param {Array[]} params.controlPanelDomain
+     * @param {ControlPanelModel} [params.controlPanelModel]
+     * @param {Object} [params.controlPanelProps]
+     * @param {string} params.controllerID an id to ease the communication with
+     *      upstream components
+     * @param {string} params.displayName
+     * @param {Object} params.initialState
+     * @param {string} params.modelName
+     * @param {string} [params.searchPanel]
      * @param {string} params.viewType
+     * @param {boolean} [params.withControlPanel]
+     * @param {boolean} [params.withSearchPanel]
      */
     init: function (parent, model, renderer, params) {
         this._super.apply(this, arguments);
-        this._controlPanel = params.controlPanel;
         this._title = params.displayName;
         this.modelName = params.modelName;
         this.activeActions = params.activeActions;
         this.controllerID = params.controllerID;
         this.initialState = params.initialState;
         this.bannerRoute = params.bannerRoute;
-        this.isMultiRecord = params.isMultiRecord;
         this.actionViews = params.actionViews;
         this.viewType = params.viewType;
         // use a DropPrevious to correctly handle concurrent updates
         this.dp = new concurrency.DropPrevious();
 
+        this.withControlPanel = params.withControlPanel;
+        if (this.withControlPanel) {
+            this.controlPanelProps = params.controlPanelProps;
+            this._controlPanelModel = params.controlPanelModel;
+        }
+
+        this.withSearchPanel = params.withSearchPanel && params.searchPanel;
         // the following attributes are used when there is a searchPanel
-        this._searchPanel = params.searchPanel;
+        if (this.withSearchPanel) {
+            this._searchPanel = params.searchPanel;
+        }
         this.controlPanelDomain = params.controlPanelDomain || [];
         this.searchPanelDomain = this._searchPanel ? this._searchPanel.getDomain() : [];
     },
+
     /**
      * Simply renders and updates the url.
      *
      * @returns {Promise}
      */
-    start: function () {
-        var self = this;
-        if (this._searchPanel) {
+    start: async function () {
+        if (this.withSearchPanel) {
             this.$('.o_content')
                 .addClass('o_controller_with_searchpanel')
                 .prepend(this._searchPanel.$el);
         }
-
         this.$el.addClass('o_view_controller');
 
-        return this._super.apply(this, arguments).then(function () {
-            var prom;
-            if (self._controlPanel) {
-                // render the ControlPanel elements (buttons, pager, sidebar...)
-                prom = self._renderControlPanelElements().then(function (elements) {
-                    self.controlPanelElements = elements;
-                    self._controlPanel.$el.prependTo(self.$el);
-                });
-            }
-            return Promise.resolve(prom);
-        }).then(function () {
-            return self._update(self.initialState);
-        });
+        this.renderButtons();
+        const promises = [this._super(...arguments)];
+        if (this.withControlPanel) {
+            this._updateControlPanelProps(this.initialState);
+            this._controlPanelWrapper = new ComponentWrapper(this, ControlPanel, this.controlPanelProps);
+            this._controlPanelWrapper.env.bus.on('focus-view', this, () => this.renderer.giveFocus());
+            promises.push(this._controlPanelWrapper.mount(this.el, { position: 'first-child' }));
+        }
+        await Promise.all(promises);
+        await this._update(this.initialState, { shouldUpdateControlPanel: false });
+        this.updateButtons();
     },
     /**
      * @override
@@ -103,34 +110,33 @@ var AbstractController = mvc.Controller.extend(ActionMixin, WidgetAdapterMixin,
         if (this.$buttons) {
             this.$buttons.off();
         }
-        if (this.controlPanelElements && this.controlPanelElements.$switch_buttons) {
-            this.controlPanelElements.$switch_buttons.off();
-        }
+        ActionMixin.destroy.call(this);
         this._super.apply(this, arguments);
-        WidgetAdapterMixin.destroy.call(this, ...arguments);
     },
     /**
      * Called each time the controller is attached into the DOM.
      */
     on_attach_callback: function () {
-        if (this._controlPanel) {
-            this._controlPanel.on_attach_callback();
-        }
-        if (this._searchPanel) {
+        ActionMixin.on_attach_callback.call(this);
+        if (this.withSearchPanel) {
             this._searchPanel.on_attach_callback();
         }
+        if (this.withControlPanel) {
+            this._controlPanelModel.on('search', this, this._onSearch);
+            this._controlPanelModel.on('get-controller-query-params', this, this._onGetOwnedQueryParams);
+        }
         this.renderer.on_attach_callback();
-        WidgetAdapterMixin.on_attach_callback.call(this, ...arguments);
     },
     /**
      * Called each time the controller is detached from the DOM.
      */
     on_detach_callback: function () {
-        if (this._controlPanel) {
-            this._controlPanel.on_detach_callback();
+        ActionMixin.on_detach_callback.call(this);
+        if (this.withControlPanel) {
+            this._controlPanelModel.off('search', this);
+            this._controlPanelModel.off('get-controller-query-params', this);
         }
         this.renderer.on_detach_callback();
-        WidgetAdapterMixin.on_detach_callback.call(this, ...arguments);
     },
 
     //--------------------------------------------------------------------------
@@ -174,10 +180,10 @@ var AbstractController = mvc.Controller.extend(ActionMixin, WidgetAdapterMixin,
      */
     exportState: function () {
         var state = {};
-        if (this._controlPanel) {
-            state.cpState = this._controlPanel.exportState();
+        if (this.withControlPanel) {
+            state.cpState = this._controlPanelModel.exportState();
         }
-        if (this._searchPanel) {
+        if (this.withSearchPanel) {
             state.spState = this._searchPanel.exportState();
         }
         return state;
@@ -203,21 +209,20 @@ var AbstractController = mvc.Controller.extend(ActionMixin, WidgetAdapterMixin,
     /**
      * Short helper method to reload the view
      *
-     * @param {Object} [params] This object will simply be given to the update
+     * @param {Object} [params={}] This object will simply be given to the update
      * @returns {Promise}
      */
-    reload: async function (params) {
-        params = params || {};
-        var searchPanelUpdateProm;
-        var controllerState = params.controllerState || {};
-        var cpState = controllerState.cpState;
-        if (this._controlPanel && cpState) {
-            await this._controlPanel.importState(cpState).then(function (searchQuery) {
-                params = _.extend({}, params, searchQuery);
-            });
+    reload: async function (params = {}) {
+        let searchPanelUpdateProm;
+        const controllerState = params.controllerState || {};
+        const cpState = controllerState.cpState;
+        if (this.withControlPanel && cpState) {
+            this._controlPanelModel.importState(cpState);
+            const searchQuery = this._controlPanelModel.getQuery();
+            params = Object.assign({}, params, searchQuery);
         }
-        var postponeRendering = false;
-        if (this._searchPanel) {
+        let postponeRendering = false;
+        if (this.withSearchPanel) {
             this.controlPanelDomain = params.domain || this.controlPanelDomain;
             if (controllerState.spState) {
                 this._searchPanel.importState(controllerState.spState);
@@ -234,28 +239,6 @@ var AbstractController = mvc.Controller.extend(ActionMixin, WidgetAdapterMixin,
             return this.renderer._render();
         }
     },
-    /**
-     * For views that require a pager, this method will be called to allow the
-     * controller to instantiate and render a pager. Note that in theory, the
-     * controller can actually render whatever he wants in the pager zone.  If
-     * your view does not want a pager, just let this method empty.
-     *
-     * @param {jQuery Node} $node
-     * @return {Promise}
-     */
-    renderPager: function ($node) {
-        return Promise.resolve();
-    },
-    /**
-     * Same as renderPager, but for the 'sidebar' zone (the zone with the menu
-     * dropdown in the control panel next to the buttons)
-     *
-     * @param {jQuery Node} $node
-     * @return {Promise}
-     */
-    renderSidebar: function ($node) {
-        return Promise.resolve();
-    },
     /**
      * This is the main entry point for the controller.  Changes from the search
      * view arrive in this method, and internal changes can sometimes also call
@@ -271,34 +254,21 @@ var AbstractController = mvc.Controller.extend(ActionMixin, WidgetAdapterMixin,
      *
      * @returns {Promise}
      */
-    update: function (params, options) {
-        var self = this;
-        var shouldReload = (options && 'reload' in options) ? options.reload : true;
-        var def = shouldReload ? this.model.reload(this.handle, params) : Promise.resolve();
-        // we check here that the updateIndex of the control panel hasn't changed
-        // between the start of the update request and the moment the controller
-        // asks the control panel to update itself ; indeed, it could happen that
-        // another action/controller is executed during this one reloads itself,
-        // and if that one finishes first, it replaces this controller in the DOM,
-        // and this controller should no longer update the control panel.
-        // note that this won't be necessary as soon as each controller will have
-        // its own control panel
-        var cpUpdateIndex = this._controlPanel && this._controlPanel.updateIndex;
-        return this.dp.add(def).then(function (handle) {
-            if (self._controlPanel && cpUpdateIndex !== self._controlPanel.updateIndex) {
-                return;
-            }
-            self.handle = handle || self.handle; // update handle if we reloaded
-            var state = self.model.get(self.handle);
-            var localState = self.renderer.getLocalState();
-            return self.dp.add(self.updateRendererState(state, params)).then(function () {
-                if (self._controlPanel && cpUpdateIndex !== self._controlPanel.updateIndex) {
-                    return;
-                }
-                self.renderer.setLocalState(localState);
-                return self._update(state, params);
-            });
-        });
+    update: async function (params, options = {}) {
+        const shouldReload = 'reload' in options ? options.reload : true;
+        if (shouldReload) {
+            this.handle = await this.dp.add(this.model.reload(this.handle, params));
+        }
+        const localState = this.renderer.getLocalState();
+        const state = this.model.get(this.handle);
+        const promises = [
+            this.updateRendererState(state, params).then(() => {
+                this.renderer.setLocalState(localState);
+            }),
+            this._update(state, params),
+        ];
+        await this.dp.add(Promise.all(promises));
+        this.updateButtons();
     },
     /**
      * Update the state of the renderer (handle both Widget and Component
@@ -318,6 +288,16 @@ var AbstractController = mvc.Controller.extend(ActionMixin, WidgetAdapterMixin,
     // Private
     //--------------------------------------------------------------------------
 
+
+    /**
+     * Meant to be overriden to return a proper object.
+     * @private
+     * @param {Object} [state]
+     * @return {(Object|null)}
+     */
+    _getPagingInfo: function (state) {
+        return null;
+    },
     /**
      * Return the current search domain. This is the searchDomain used to update
      * the searchpanel. It returns the domain coming from the controlpanel. This
@@ -330,6 +310,15 @@ var AbstractController = mvc.Controller.extend(ActionMixin, WidgetAdapterMixin,
     _getSearchDomain: function () {
         return this.controlPanelDomain;
     },
+    /**
+     * Meant to be overriden to return a proper object.
+     * @private
+     * @param {Object} [state]
+     * @return {(Object|null)}
+     */
+    _getActionMenuItems: function (state) {
+        return null;
+    },
     /**
      * This method is the way a view can notifies the outside world that
      * something has changed.  The main use for this is to update the url, for
@@ -360,107 +349,33 @@ var AbstractController = mvc.Controller.extend(ActionMixin, WidgetAdapterMixin,
      * @private
      * @returns {Promise}
      */
-    _renderBanner: function () {
+    _renderBanner: async function () {
         if (this.bannerRoute !== undefined) {
-            var self = this;
-            return this.dp
-                .add(this._rpc({route: this.bannerRoute}))
-                .then(function (response) {
-                    if (!response.html) {
-                        self.$el.removeClass('o_has_banner');
-                        return Promise.resolve();
-                    }
-                    self.$el.addClass('o_has_banner');
-                    var $banner = $(response.html);
-                    // we should only display one banner at a time
-                    if (self._$banner && self._$banner.remove) {
-                        self._$banner.remove();
-                    }
-                    // Css and js are moved to <head>
-                    var defs = [];
-                    $('link[rel="stylesheet"]', $banner).each(function (i, link) {
-                        defs.push(ajax.loadCSS(link.href));
-                        link.remove();
-                    });
-                    $('script[type="text/javascript"]', $banner).each(function (i, js) {
-                        defs.push(ajax.loadJS(js.src));
-                        js.remove();
-                    });
-                    return Promise.all(defs).then(function () {
-                        $banner.insertBefore(self.$('> .o_content'));
-                        self._$banner = $banner;
-                    });
-                });
-        }
-        return Promise.resolve();
-    },
-    /**
-     * Renders the control elements (buttons, pager and sidebar) of the current
-     * view.
-     *
-     * @private
-     * @returns {Promise<Object>} resolved with an object containing the control
-     *   panel jQuery elements
-     */
-    _renderControlPanelElements: function () {
-        var self = this;
-        var elements = {
-            $buttons: $('<div>'),
-            $sidebar: $('<div>'),
-            $pager: $('<div>'),
-        };
-
-        this.renderButtons(elements.$buttons);
-        var sidebarProm = this.renderSidebar(elements.$sidebar);
-        var pagerProm = this.renderPager(elements.$pager);
-
-        return Promise.all([sidebarProm, pagerProm]).then(function () {
-            // remove the unnecessary outer div
-            elements = _.mapObject(elements, function ($node) {
-                return $node && $node.contents();
+            const response = await this._rpc({route: this.bannerRoute});
+            if (!response.html) {
+                this.$el.removeClass('o_has_banner');
+                return Promise.resolve();
+            }
+            this.$el.addClass('o_has_banner');
+            var $banner = $(response.html);
+            // we should only display one banner at a time
+            if (this._$banner && this._$banner.remove) {
+                this._$banner.remove();
+            }
+            // Css and js are moved to <head>
+            var defs = [];
+            $('link[rel="stylesheet"]', $banner).each(function (i, link) {
+                defs.push(ajax.loadCSS(link.href));
+                link.remove();
             });
-            elements.$switch_buttons = self._renderSwitchButtons();
-
-            return elements;
-        });
-    },
-    /**
-     * Renders the switch buttons and binds listeners on them.
-     *
-     * @private
-     * @returns {jQuery}
-     */
-    _renderSwitchButtons: function () {
-        var self = this;
-        var views = _.filter(this.actionViews, {multiRecord: this.isMultiRecord});
-
-        if (views.length <= 1) {
-            return $();
+            $('script[type="text/javascript"]', $banner).each(function (i, js) {
+                defs.push(ajax.loadJS(js.src));
+                js.remove();
+            });
+            await Promise.all(defs);
+            $banner.insertBefore(this.$('> .o_content'));
+            this._$banner = $banner;
         }
-
-        var template = config.device.isMobile ? 'ControlPanel.SwitchButtons.Mobile' : 'ControlPanel.SwitchButtons';
-        var $switchButtons = $(QWeb.render(template, {
-            viewType: this.viewType,
-            views: views,
-        }));
-        // create bootstrap tooltips
-        _.each(views, function (view) {
-            $switchButtons.filter('.o_cp_switch_' + view.type).tooltip();
-        });
-        // add onclick event listener
-        var $switchButtonsFiltered = config.device.isMobile ? $switchButtons.find('button') : $switchButtons.filter('button');
-        $switchButtonsFiltered.click(_.debounce(function (event) {
-            var viewType = $(event.target).data('view-type');
-            self.trigger_up('switch_view', {view_type: viewType});
-        }, 200, true));
-
-        // set active view's icon as view switcher button's icon in mobile
-        if (config.device.isMobile) {
-            var activeView = _.findWhere(views, {type: this.viewType});
-            $switchButtons.find('.o_switch_view_button_icon').addClass('fa fa-lg ' + activeView.icon);
-        }
-
-        return $switchButtons;
     },
     /**
      * @override
@@ -483,21 +398,57 @@ var AbstractController = mvc.Controller.extend(ActionMixin, WidgetAdapterMixin,
      *
      * @private
      * @param {Object} state the state given by the model
-     * @param {Object} [params]
-     * @param {Object[]} [params.breadcrumbs]
+     * @param {Object} [params={}]
+     * @param {Object} [params.shouldUpdateControlPanel]
      * @returns {Promise}
      */
     _update: function (state, params) {
         // AAB: update the control panel -> this will be moved elsewhere at some point
-        var cpContent = _.extend({}, this.controlPanelElements);
-        this.updateControlPanel({
-            breadcrumbs: params && params.breadcrumbs,
-            cp_content: cpContent,
+        if (!this.$buttons) {
+            this.renderButtons();
+        }
+        const promises = [this._renderBanner()];
+        if (this.withControlPanel && params.shouldUpdateControlPanel !== false) {
+            this._updateControlPanelProps(state);
+            if (params.breadcrumbs) {
+                this.controlPanelProps.breadcrumbs = params.breadcrumbs;
+            }
+            promises.push(this.updateControlPanel());
+        }
+        this._pushState();
+        return Promise.all(promises);
+    },
+    /**
+     * Can be used to update the key 'cp_content'. This method is called in start and _update methods.
+     *
+     * @private
+     * @param {Object} state the state given by the model
+     */
+     _updateControlPanelProps(state) {
+        if (!this.controlPanelProps.cp_content) {
+            this.controlPanelProps.cp_content = {};
+        }
+        if (this.$buttons) {
+            this.controlPanelProps.cp_content.$buttons = this.$buttons;
+        }
+        Object.assign(this.controlPanelProps, {
+            actionMenus: this._getActionMenuItems(state),
+            pager: this._getPagingInfo(state),
             title: this.getTitle(),
         });
-
-        this._pushState();
-        return this._renderBanner();
+    },
+    /**
+     * @private
+     * @param {Object} state
+     * @param {Object} newProps
+     * @returns {Promise}
+     */
+    _updatePaging: async function (state, newProps) {
+        const pagingInfo = this._getPagingInfo(state);
+        if (pagingInfo) {
+            Object.assign(pagingInfo, newProps);
+            return this.updateControlPanel({ pager: pagingInfo });
+        }
     },
 
     //--------------------------------------------------------------------------
@@ -574,7 +525,7 @@ var AbstractController = mvc.Controller.extend(ActionMixin, WidgetAdapterMixin,
         switch (ev.data.direction) {
             case 'up':
                 ev.stopPropagation();
-                this._controlPanel.focusSearchBar();
+                this._controlPanelModel.trigger('focus-control-panel');
                 break;
             case 'down':
                 ev.stopPropagation();
@@ -608,17 +559,13 @@ var AbstractController = mvc.Controller.extend(ActionMixin, WidgetAdapterMixin,
     },
     /**
      * Called when there is a change in the search view, so the current action's
-     * environment needs to be updated with the new domain, context and groupby.
+     * environment needs to be updated with the new domain, context, groupby,...
      *
      * @private
-     * @param {OdooEvent} ev
-     * @param {Array[]} ev.data.domain
-     * @param {Object} ev.data.context
-     * @param {string[]} ev.data.groupby
+     * @param {Object} searchQuery
      */
-    _onSearch: function (ev) {
-        ev.stopPropagation();
-        this.reload(_.extend({offset: 0, groupsOffset: 0}, ev.data));
+    _onSearch: function (searchQuery) {
+        this.reload(_.extend({ offset: 0, groupsOffset: 0 }, searchQuery));
     },
     /**
      * @private
diff --git a/addons/web/static/src/js/views/abstract_view.js b/addons/web/static/src/js/views/abstract_view.js
index 7dc3cc30563..c720a2a515e 100644
--- a/addons/web/static/src/js/views/abstract_view.js
+++ b/addons/web/static/src/js/views/abstract_view.js
@@ -26,11 +26,13 @@ odoo.define('web.AbstractView', function (require) {
 var AbstractModel = require('web.AbstractModel');
 var AbstractRenderer = require('web.AbstractRenderer');
 var AbstractController = require('web.AbstractController');
-var ControlPanelView = require('web.ControlPanelView');
+const ControlPanelModel = require('web.ControlPanelModel');
 var mvc = require('web.mvc');
 var SearchPanel = require('web.SearchPanel');
 var viewUtils = require('web.viewUtils');
 
+const { Component } = owl;
+
 var Factory = mvc.Factory;
 
 var AbstractView = Factory.extend({
@@ -83,7 +85,7 @@ var AbstractView = Factory.extend({
      * @param {string} [params.displayName]
      * @param {Array[]} [params.domain=[]]
      * @param {Object[]} [params.dynamicFilters] transmitted to the
-     *   ControlPanelView
+     *   ControlPanel
      * @param {number[]} [params.ids]
      * @param {boolean} [params.isEmbedded=false]
      * @param {Object} [params.searchQuery={}]
@@ -143,9 +145,10 @@ var AbstractView = Factory.extend({
             controllerID: params.controllerID,
             displayName: params.displayName,
             isEmbedded: isEmbedded,
-            isMultiRecord: this.multi_record,
             modelName: params.modelName,
             viewType: this.viewType,
+            withControlPanel: this.withControlPanel,
+            withSearchPanel: this.withSearchPanel,
         };
 
         var controllerState = params.controllerState || {};
@@ -159,10 +162,6 @@ var AbstractView = Factory.extend({
             res_id: currentId,
             res_ids: controllerState.resIds || params.ids || (currentId ? [currentId] : undefined),
         };
-        // default_order is like:
-        //   'name,id desc'
-        // but we need it like:
-        //   [{name: 'id', asc: false}, {name: 'name', asc: true}]
         var defaultOrder = this.arch.attrs.default_order;
         if (defaultOrder) {
             this.loadParams.orderedBy = _.map(defaultOrder.split(','), function (order) {
@@ -174,26 +173,50 @@ var AbstractView = Factory.extend({
             this._updateMVCParams(params.searchQuery);
         }
 
-        this.controlPanelParams = {
-            action: action,
-            activateDefaultFavorite: params.activateDefaultFavorite,
-            dynamicFilters: params.dynamicFilters,
-            breadcrumbs: params.breadcrumbs,
-            context: this.loadParams.context,
-            domain: this.loadParams.domain,
-            modelName: params.modelName,
-            searchMenuTypes: params.searchMenuTypes,
-            state: controllerState.cpState,
-            viewInfo: params.controlPanelFieldsView,
-            withBreadcrumbs: params.withBreadcrumbs,
-            withSearchBar: params.withSearchBar,
-        };
-        this.searchPanelParams = {
-            defaultNoFilter: params.searchPanelDefaultNoFilter,
-            fields: this.fields,
-            model: this.loadParams.modelName,
-            state: controllerState.spState,
-        };
+        if (this.withControlPanel) {
+            this.controlPanelModelConfig = {
+                env: Component.env,
+                actionId: action.id,
+                actionContext: Object.assign({}, this.loadParams.context || {}),
+                actionDomain: this.loadParams.domain || [],
+                modelName: params.modelName,
+                // control initialization
+                activateDefaultFavorite: params.activateDefaultFavorite,
+                dynamicFilters: params.dynamicFilters,
+                viewInfo: params.controlPanelFieldsView,
+                withSearchBar: params.withSearchBar,
+                // used to avoid timeRanges in query
+                searchMenuTypes: params.searchMenuTypes,
+                // avoid work to initialize
+                importedState: controllerState.cpState,
+            };
+
+            const controlPanelModel = new ControlPanelModel(this.controlPanelModelConfig);
+
+            const controlPanelProps = {
+                action,
+                breadcrumbs: params.breadcrumbs,
+                controlPanelModel,
+                fields: this.fields,
+                searchMenuTypes: params.searchMenuTypes,
+                view: this.fieldsView,
+                views: action.views && action.views.filter(v => v.multiRecord === this.multi_record),
+                withBreadcrumbs: params.withBreadcrumbs,
+                withSearchBar: params.withSearchBar,
+            };
+            this.controllerParams.controlPanelModel = controlPanelModel;
+            this.controllerParams.controlPanelProps = controlPanelProps;
+        }
+
+        if (this.withSearchPanel) {
+            this.searchPanelParams = {
+                arch: (params.controlPanelFieldsView || {}).arch,
+                defaultNoFilter: params.searchPanelDefaultNoFilter,
+                fields: this.fields,
+                model: this.loadParams.modelName,
+                state: controllerState.spState,
+            };
+        }
     },
 
     //--------------------------------------------------------------------------
@@ -203,41 +226,36 @@ var AbstractView = Factory.extend({
     /**
      * @override
      */
-    getController: function (parent) {
-        var self = this;
-        var cpDef = this.withControlPanel && this._createControlPanel(parent);
-        var spDef;
+    getController: async function (parent) {
+        const _super = this._super.bind(this);
+        if (this.withControlPanel) {
+            await this.controllerParams.controlPanelModel.isReady;
+            const query = this.controllerParams.controlPanelModel.getQuery();
+            this._updateMVCParams(query);
+        }
+        let searchPanel = false;
         if (this.withSearchPanel) {
-            var spProto = this.config.SearchPanel.prototype;
-            var viewInfo = this.controlPanelParams.viewInfo;
-            var searchPanelParams = spProto.computeSearchPanelParams(viewInfo, this.viewType);
+            const spProto = this.config.SearchPanel.prototype;
+            const { arch, fields } = this.searchPanelParams;
+            const searchPanelParams = spProto.computeSearchPanelParams(arch, fields, this.viewType);
             if (searchPanelParams.sections) {
                 this.searchPanelParams.sections = searchPanelParams.sections;
                 this.rendererParams.withSearchPanel = true;
-                spDef = Promise.resolve(cpDef).then(this._createSearchPanel.bind(this, parent, searchPanelParams));
+                searchPanel = await this._createSearchPanel(parent, searchPanelParams);
             }
         }
-
-        var _super = this._super.bind(this);
-        return Promise.all([cpDef, spDef]).then(function ([controlPanel, searchPanel]) {
-            // get the parent of the model if it already exists, as _super will
-            // set the new controller as parent, which we don't want
-            var modelParent = self.model && self.model.getParent();
-            var prom = _super(parent);
-            prom.then(function (controller) {
-                if (controlPanel) {
-                    controlPanel.setParent(controller);
-                }
-                if (searchPanel) {
-                    searchPanel.setParent(controller);
-                }
-                if (modelParent) {
-                    // if we already add a model, restore its parent
-                    self.model.setParent(modelParent);
-                }
-            });
-            return prom;
-        });
+        // get the parent of the model if it already exists, as _super will
+        // set the new controller as parent, which we don't want
+        const modelParent = this.model && this.model.getParent();
+        const controller = await _super(...arguments);
+        if (searchPanel) {
+            searchPanel.setParent(controller);
+        }
+        if (modelParent) {
+            // if we already add a model, restore its parent
+            this.model.setParent(modelParent);
+        }
+        return controller;
     },
     /**
      * Ensures that only one instance of AbstractModel is created
@@ -264,25 +282,6 @@ var AbstractView = Factory.extend({
     // Private
     //--------------------------------------------------------------------------
 
-    /**
-     * Instantiates and starts a ControlPanelController.
-     *
-     * @private
-     * @param {Widget} parent
-     * @returns {Promise<ControlPanelController>} resolved when the controlPanel
-     *   is ready
-     */
-    _createControlPanel: function (parent) {
-        var self = this;
-        var controlPanelView = new ControlPanelView(this.controlPanelParams);
-        return controlPanelView.getController(parent).then(function (controlPanel) {
-            self.controllerParams.controlPanel = controlPanel;
-            return controlPanel.appendTo(document.createDocumentFragment()).then(function () {
-                self._updateMVCParams(controlPanel.getSearchQuery());
-                return controlPanel;
-            });
-        });
-    },
     /**
      * @private
      * @param {Widget} parent
@@ -373,33 +372,23 @@ var AbstractView = Factory.extend({
      * @private
      * @param {Object} searchQuery
      * @param {Object} searchQuery.context
-     * @param {Object} [searchQuery.context.timeRangeMenuData={}]
-     * @param {Array[]} [searchQuery.context.timeRangeMenuData.comparisonTimeRange=[]]
-     * @param {string} [searchQuery.context.timeRangeMenuData.comparisonTimeRangeDescription='']
-     * @param {string} [searchQuery.context.timeRangeMenuData.timeRangeDescription='']
-     * @param {Array[]} [searchQuery.context.timeRangeMenuData.timeRange=[]]
+     * @param {Object} [searchQuery.timeRanges]
      * @param {Array[]} searchQuery.domain
      * @param {string[]} searchQuery.groupBy
      */
     _updateMVCParams: function (searchQuery) {
-        var timeRangeMenuData = searchQuery.context.timeRangeMenuData || {};
-        var comparisonTimeRange = timeRangeMenuData.comparisonTimeRange || [];
-        var comparisonTimeRangeDescription = timeRangeMenuData.comparisonTimeRangeDescription || '';
-        var timeRangeDescription = timeRangeMenuData.timeRangeDescription || '';
         this.loadParams = _.extend(this.loadParams, {
-            compare: comparisonTimeRange.length > 0,
-            comparisonField: timeRangeMenuData.comparisonField,
-            comparisonTimeRange: comparisonTimeRange,
-            comparisonTimeRangeDescription: comparisonTimeRangeDescription,
             context: searchQuery.context,
             domain: searchQuery.domain,
             groupedBy: searchQuery.groupBy,
-            timeRange: timeRangeMenuData.timeRange || [],
-            timeRangeDescription: timeRangeMenuData.timeRangeDescription || '',
         });
-        this.loadParams.orderedBy = searchQuery.orderedBy ? searchQuery.orderedBy : this.loadParams.orderedBy;
-        this.rendererParams.timeRangeDescription = timeRangeDescription;
-        this.rendererParams.comparisonTimeRangeDescription = comparisonTimeRangeDescription;
+        this.loadParams.orderedBy = Array.isArray(searchQuery.orderedBy) && searchQuery.orderedBy.length ?
+                                        searchQuery.orderedBy :
+                                        this.loadParams.orderedBy;
+        if (searchQuery.timeRanges) {
+            this.loadParams.timeRanges = searchQuery.timeRanges;
+            this.rendererParams.timeRanges = searchQuery.timeRanges;
+        }
     },
 });
 
diff --git a/addons/web/static/src/js/views/basic/basic_controller.js b/addons/web/static/src/js/views/basic/basic_controller.js
index 58e03efb94a..8b4672bc291 100644
--- a/addons/web/static/src/js/views/basic/basic_controller.js
+++ b/addons/web/static/src/js/views/basic/basic_controller.js
@@ -11,7 +11,6 @@ var AbstractController = require('web.AbstractController');
 var core = require('web.core');
 var Dialog = require('web.Dialog');
 var FieldManagerMixin = require('web.FieldManagerMixin');
-var Pager = require('web.Pager');
 var TranslationDialog = require('web.TranslationDialog');
 
 var _t = core._t;
@@ -19,12 +18,12 @@ var _t = core._t;
 var BasicController = AbstractController.extend(FieldManagerMixin, {
     custom_events: _.extend({}, AbstractController.prototype.custom_events, FieldManagerMixin.custom_events, {
         discard_changes: '_onDiscardChanges',
+        pager_changed: '_onPagerChanged',
         reload: '_onReload',
         resequence_records: '_onResequenceRecords',
         set_dirty: '_onSetDirty',
         load_optional_fields: '_onLoadOptionalFields',
         save_optional_fields: '_onSaveOptionalFields',
-        sidebar_data_asked: '_onSidebarDataAsked',
         translate: '_onTranslate',
     }),
     /**
@@ -52,12 +51,11 @@ var BasicController = AbstractController.extend(FieldManagerMixin, {
      * @override
      * @returns {Promise}
      */
-    start: function () {
+    start: async function () {
         // add classname to reflect the (absence of) access rights (used to
         // correctly display the nocontent helper)
         this.$el.toggleClass('o_cannot_create', !this.activeActions.create);
-        return this._super.apply(this, arguments)
-                          .then(this._updateEnv.bind(this));
+        await this._super(...arguments);
     },
 
     //--------------------------------------------------------------------------
@@ -148,35 +146,6 @@ var BasicController = AbstractController.extend(FieldManagerMixin, {
     isDirty: function (recordID) {
         return this.model.isDirty(recordID || this.handle);
     },
-    /**
-     * @override
-     */
-    renderPager: function ($node, options) {
-        var self = this;
-        var params = this._getPagerParams();
-        this.pager = new Pager(this, params.size, params.current_min, params.limit, options);
-
-        this.pager.on('pager_changed', this, function (newState) {
-            this.pager.disable();
-            var data = this.model.get(this.handle, {raw: true});
-            var limitChanged = (data.limit !== newState.limit);
-            var reloadParams;
-            if (data.groupedBy && data.groupedBy.length) {
-                reloadParams = {groupsLimit: newState.limit, groupsOffset: newState.current_min - 1};
-            } else {
-                reloadParams = {limit: newState.limit, offset: newState.current_min - 1};
-            }
-            this.reload(reloadParams).then(function () {
-                // reset the scroll position to the top on page changed only
-                if (!limitChanged) {
-                    self.trigger_up('scrollTo', {top: 0});
-                }
-            }).then(this.pager.enable.bind(this.pager));
-        });
-        return this.pager.appendTo($node).then(function () {
-            self._updatePager(); // to force proper visibility
-        });
-    },
     /**
      * Saves the record whose ID is given if necessary (@see _saveRecord).
      *
@@ -218,13 +187,9 @@ var BasicController = AbstractController.extend(FieldManagerMixin, {
      * @override
      * @returns {Promise}
      */
-    update: function (params, options) {
-        var self = this;
+    update: async function (params, options) {
         this.mode = params.mode || this.mode;
-        return this._super(params, options).then(function () {
-            self._updateEnv();
-            self._updatePager();
-        });
+        return this._super(params, options);
     },
     /**
      * @override
@@ -486,44 +451,32 @@ var BasicController = AbstractController.extend(FieldManagerMixin, {
         return viewIdentifier;
     },
     /**
-     * Return the params (current_min, limit and size) to pass to the pager,
+     * Return the params (currentMinimum, limit and size) to pass to the pager,
      * according to the current state.
      *
      * @private
      * @returns {Object}
      */
-    _getPagerParams: function () {
-        var state = this.model.get(this.handle, {raw: true});
-        var isGrouped = state.groupedBy && state.groupedBy.length;
+    _getPagingInfo: function (state) {
+        const isGrouped = state.groupedBy && state.groupedBy.length;
         return {
-            current_min: (isGrouped ? state.groupsOffset : state.offset) + 1,
+            currentMinimum: (isGrouped ? state.groupsOffset : state.offset) + 1,
             limit: isGrouped ? state.groupsLimit : state.limit,
             size: isGrouped ? state.groupsCount : state.count,
         };
     },
     /**
-     * Returns the new sidebar env
+     * Return the new actionMenus props.
      *
+     * @override
      * @private
-     * @return {Object} the new sidebar env
      */
-    _getSidebarEnv: function () {
+    _getActionMenuItems: function (state) {
         return {
-            context: this.model.get(this.handle).getContext(),
             activeIds: this.getSelectedIds(),
-            model: this.modelName,
+            context: state.getContext(),
         };
     },
-    /**
-     * Determine whether or not the pager must be displayed (probably depending
-     * on the current state). Controllers must override this to implement their
-     * own logic.
-     *
-     * @private
-     */
-    _isPagerVisible: function () {
-        return true;
-    },
     /**
      *  Sort function used to sort the fields by names, to compute the optional fields keys
      *
@@ -633,24 +586,16 @@ var BasicController = AbstractController.extend(FieldManagerMixin, {
      * and notifies the component chain (by bubbling an event up)
      *
      * @private
+     * @param {Object} [newProps={}]
      */
-    _updateEnv: function () {
-        var env = this.model.get(this.handle, {env: true});
-        if (this.sidebar) {
-            var sidebarEnv = this._getSidebarEnv();
-            this.sidebar.updateEnv(sidebarEnv);
-        }
-    },
-    /**
-     * Update the pager with the current state.
-     *
-     * @private
-     */
-    _updatePager: function () {
-        if (this.pager) {
-            this.pager.updateState(this._getPagerParams());
-            this.pager.do_toggle(this._isPagerVisible());
-        }
+    _updateControlPanel: function (newProps = {}) {
+        const state = this.model.get(this.handle);
+        const props = Object.assign(newProps, {
+            actionMenus: this._getActionMenuItems(state),
+            pager: this._getPagingInfo(state),
+            title: this.getTitle(),
+        });
+        return this.updateControlPanel(props);
     },
 
     //--------------------------------------------------------------------------
@@ -693,6 +638,27 @@ var BasicController = AbstractController.extend(FieldManagerMixin, {
         }
         FieldManagerMixin._onFieldChanged.apply(this, arguments);
     },
+    /**
+     * @private
+     * @param {OdooEvent} ev
+     */
+    _onPagerChanged: async function (ev) {
+        ev.stopPropagation();
+        const { currentMinimum, limit } = ev.data;
+        const state = this.model.get(this.handle, { raw: true });
+        const reloadParams = state.groupedBy && state.groupedBy.length ? {
+                groupsLimit: limit,
+                groupsOffset: currentMinimum - 1,
+            } : {
+                limit,
+                offset: currentMinimum - 1,
+            };
+        await this.reload(reloadParams);
+        // reset the scroll position to the top on page changed only
+        if (state.limit === limit) {
+            this.trigger_up('scrollTo', { top: 0 });
+        }
+    },
     /**
      * When a reload event triggers up, we need to reload the full view.
      * For example, after a form view dialog saved some data.
@@ -735,24 +701,19 @@ var BasicController = AbstractController.extend(FieldManagerMixin, {
      * @param {string} ev.data.handleField
      */
     _onResequenceRecords: function (ev) {
-        var self = this;
-
         this.trigger_up('mutexify', {
-            action: function () {
-                var state = self.model.get(self.handle);
-                var resIDs = _.map(ev.data.recordIds, function (recordID) {
-                    return _.findWhere(state.data, {id: recordID}).res_id;
-                });
-                var options = {
+            action: async () => {
+                let state = this.model.get(this.handle);
+                const resIDs = ev.data.recordIds
+                    .map(recordID => state.data.find(d => d.id === recordID).res_id);
+                const options = {
                     offset: ev.data.offset,
                     field: ev.data.handleField,
                 };
-                return self.model.resequence(self.modelName, resIDs, self.handle, options)
-                    .then(function () {
-                        self._updateEnv();
-                        state = self.model.get(self.handle);
-                        return self.renderer.updateState(state, {noRender: true});
-                    });
+                await this.model.resequence(this.modelName, resIDs, this.handle, options);
+                this._updateControlPanel();
+                state = this.model.get(this.handle);
+                return this.renderer.updateState(state, { noRender: true });
             },
         });
     },
@@ -797,17 +758,6 @@ var BasicController = AbstractController.extend(FieldManagerMixin, {
         ev.stopPropagation(); // prevent other controllers from handling this request
         this.model.setDirty(ev.data.dataPointID);
     },
-    /**
-     * Handler used to get all the data necessary when a custom action is
-     * performed through the sidebar.
-     *
-     * @private
-     * @param {OdooEvent} ev
-     */
-    _onSidebarDataAsked: function (ev) {
-        var sidebarEnv = this._getSidebarEnv();
-        ev.data.callback(sidebarEnv);
-    },
     /**
      * open the translation view for the current field
      *
diff --git a/addons/web/static/src/js/views/basic/basic_model.js b/addons/web/static/src/js/views/basic/basic_model.js
index 9ba7d39b8dc..a69f6878023 100644
--- a/addons/web/static/src/js/views/basic/basic_model.js
+++ b/addons/web/static/src/js/views/basic/basic_model.js
@@ -4798,7 +4798,7 @@ var BasicModel = AbstractModel.extend({
             element.context = options.context;
         }
         if (options.orderedBy !== undefined) {
-            element.orderedBy = options.orderedBy || element.orderedBy;
+            element.orderedBy = (options.orderedBy.length && options.orderedBy) || element.orderedBy;
         }
         if (options.domain !== undefined) {
             element.domain = options.domain;
diff --git a/addons/web/static/src/js/views/basic/basic_renderer.js b/addons/web/static/src/js/views/basic/basic_renderer.js
index ba407b766c1..c0d3e415321 100644
--- a/addons/web/static/src/js/views/basic/basic_renderer.js
+++ b/addons/web/static/src/js/views/basic/basic_renderer.js
@@ -49,12 +49,26 @@ var BasicRenderer = AbstractRenderer.extend(WidgetAdapterMixin, {
      * Called each time the renderer is attached into the DOM.
      */
     on_attach_callback: function () {
+        for (const handle in this.allFieldWidgets) {
+            this.allFieldWidgets[handle].forEach(widget => {
+                if (widget.on_attach_callback) {
+                    widget.on_attach_callback();
+                }
+            });
+        }
         WidgetAdapterMixin.on_attach_callback.call(this);
     },
     /**
      * Called each time the renderer is detached from the DOM.
      */
     on_detach_callback: function () {
+        for (const handle in this.allFieldWidgets) {
+            this.allFieldWidgets[handle].forEach(widget => {
+                if (widget.on_detach_callback) {
+                    widget.on_detach_callback();
+                }
+            });
+        }
         WidgetAdapterMixin.on_detach_callback.call(this);
     },
 
diff --git a/addons/web/static/src/js/views/calendar/calendar_controller.js b/addons/web/static/src/js/views/calendar/calendar_controller.js
index d59ea076188..dddfc122c00 100644
--- a/addons/web/static/src/js/views/calendar/calendar_controller.js
+++ b/addons/web/static/src/js/views/calendar/calendar_controller.js
@@ -37,6 +37,9 @@ var CalendarController = AbstractController.extend({
         updateRecord: '_onUpdateRecord',
         viewUpdated: '_onViewUpdated',
     }),
+    events: _.extend({}, AbstractController.prototype.events, {
+        today_button_click: '_onTodayButtonClicked'
+    }),
     /**
      * @override
      * @param {Widget} parent
@@ -60,34 +63,16 @@ var CalendarController = AbstractController.extend({
         // The quickCreating attribute ensures that we don't do several create
         this.quickCreating = false;
     },
-    /**
-     * Overrides to unbind handler on the control panel mobile 'Today' button.
-     *
-     * @override
-     */
-    destroy: function () {
-        this._super.apply(this, arguments);
-        if (this.$todayButton) {
-            this.$todayButton.off();
-        }
-    },
 
     //--------------------------------------------------------------------------
     // Public
     //--------------------------------------------------------------------------
 
-    /**
-     * @override
-     * @returns {string}
-     */
-    getTitle: function () {
-        return this._title;
-    },
     /**
      * Render the buttons according to the CalendarView.buttons template and
      * add listeners on it. Set this.$buttons with the produced jQuery element
      *
-     * @param {jQueryElement} [$node] a jQuery node where the rendered buttons
+     * @param {jQuery} [$node] a jQuery node where the rendered buttons
      *   should be inserted. $node may be undefined, in which case the Calendar
      *   inserts them into this.options.$buttons or into a div of its template
      */
@@ -120,25 +105,6 @@ var CalendarController = AbstractController.extend({
             this.$('.o_calendar_buttons').replaceWith(this.$buttons);
         }
     },
-    /**
-     * In mobile, we want to display a special 'Today' button on the bottom
-     * right corner of the control panel. This is the pager area, and as there
-     * is no pager in Calendar views, we fool the system by defining a fake
-     * pager (which is actually our button) such that it will be inserted in the
-     * desired place.
-     *
-     * @todo get rid of this hack once the ControlPanel layout will be reworked
-     *
-     * @param {jQueryElement} $node the button should be appended to this
-     *   element to be displayed in the bottom right corner of the control panel
-     */
-    renderPager: function ($node) {
-        if (config.device.isMobile) {
-            this.$todayButton = $(QWeb.render('CalendarView.TodayButtonMobile'));
-            this.$todayButton.on('click', this._move.bind(this, 'today'));
-            $node.append(this.$todayButton);
-        }
-    },
 
     //--------------------------------------------------------------------------
     // Private
@@ -424,7 +390,14 @@ var CalendarController = AbstractController.extend({
                 event.data.data.on_save = self.quick.destroy.bind(self.quick);
                 self._onOpenCreate(event.data);
                 self.quickCreating = false;
-            })
+            });
+    },
+    /**
+     * In mobile, we display a special 'Today' button on the bottom right corner
+     * of the control panel. Its click events are handled here.
+     */
+    _onTodayButtonClicked: function () {
+        this._move('today');
     },
     /**
      * @private
@@ -446,7 +419,8 @@ var CalendarController = AbstractController.extend({
             this.$buttons.find('.active').removeClass('active');
             this.$buttons.find('.o_calendar_button_' + this.mode).addClass('active');
         }
-        this._setTitle(this.displayName + ' (' + event.data.title + ')');
+        const title = `${this.displayName} (${event.data.title})`;
+        return this.updateControlPanel({ title });
     },
 });
 
diff --git a/addons/web/static/src/js/views/form/form_controller.js b/addons/web/static/src/js/views/form/form_controller.js
index 9d361693595..5c54afb7e41 100644
--- a/addons/web/static/src/js/views/form/form_controller.js
+++ b/addons/web/static/src/js/views/form/form_controller.js
@@ -5,7 +5,6 @@ var BasicController = require('web.BasicController');
 var core = require('web.core');
 var Dialog = require('web.Dialog');
 var dialogs = require('web.view_dialogs');
-var Sidebar = require('web.Sidebar');
 
 var _t = core._t;
 var qweb = core.qweb;
@@ -24,7 +23,7 @@ var FormController = BasicController.extend({
     /**
      * @override
      *
-     * @param {boolean} params.hasSidebar
+     * @param {boolean} params.hasActionMenus
      * @param {Object} params.toolbarActions
      */
     init: function (parent, model, renderer, params) {
@@ -34,7 +33,7 @@ var FormController = BasicController.extend({
         this.disableAutofocus = params.disableAutofocus;
         this.footerToButtons = params.footerToButtons;
         this.defaultButtons = params.defaultButtons;
-        this.hasSidebar = params.hasSidebar;
+        this.hasActionMenus = params.hasActionMenus;
         this.toolbarActions = params.toolbarActions || {};
     },
     /**
@@ -88,10 +87,9 @@ var FormController = BasicController.extend({
      *                            for the new record.
      * @returns {Promise}
      */
-    createRecord: function (parentID) {
-        var self = this;
-        var record = this.model.get(this.handle, {raw: true});
-        return this.model.load({
+    createRecord: async function (parentID) {
+        const record = this.model.get(this.handle, { raw: true });
+        const handle = await this.model.load({
             context: record.getContext(),
             fields: record.fields,
             fieldsInfo: record.fieldsInfo,
@@ -100,15 +98,14 @@ var FormController = BasicController.extend({
             res_ids: record.res_ids,
             type: 'record',
             viewType: 'form',
-        }).then(function (handle) {
-            self.handle = handle;
-            self._updateEnv();
-            return self._setMode('edit');
         });
+        this.handle = handle;
+        this._updateControlPanel();
+        return this._setMode('edit');
     },
     /**
      * Returns the current res_id, wrapped in a list. This is only used by the
-     * sidebar (and the debugmanager)
+     * action menus (and the debugmanager)
      *
      * @override
      *
@@ -142,35 +139,34 @@ var FormController = BasicController.extend({
      * have to use them instead of the standard buttons.
      *
      * @override method from AbstractController
-     * @param {jQueryElement} $node
+     * @param {jQuery} [$node]
      */
     renderButtons: function ($node) {
-        var $footer = this.footerToButtons ? this.renderer.$('footer') : null;
+        var $footer = this.footerToButtons ? this.renderer.$el && this.renderer.$('footer') : null;
         var mustRenderFooterButtons = $footer && $footer.length;
-        if (!this.defaultButtons && !mustRenderFooterButtons) {
-            return;
+        if ((this.defaultButtons && !this.$buttons) || mustRenderFooterButtons) {
+            this.$buttons = $('<div/>');
+            if (mustRenderFooterButtons) {
+                this.$buttons.append($footer);
+            } else {
+                this.$buttons.append(qweb.render("FormView.buttons", {widget: this}));
+                this.$buttons.on('click', '.o_form_button_edit', this._onEdit.bind(this));
+                this.$buttons.on('click', '.o_form_button_create', this._onCreate.bind(this));
+                this.$buttons.on('click', '.o_form_button_save', this._onSave.bind(this));
+                this.$buttons.on('click', '.o_form_button_cancel', this._onDiscard.bind(this));
+                this._assignSaveCancelKeyboardBehavior(this.$buttons.find('.o_form_buttons_edit'));
+                this.$buttons.find('.o_form_buttons_edit').tooltip({
+                    delay: {show: 200, hide:0},
+                    title: function(){
+                        return qweb.render('SaveCancelButton.tooltip');
+                    },
+                    trigger: 'manual',
+                });
+            }
         }
-        this.$buttons = $('<div/>');
-        if (mustRenderFooterButtons) {
-            this.$buttons.append($footer);
-
-        } else {
-            this.$buttons.append(qweb.render("FormView.buttons", {widget: this}));
-            this.$buttons.on('click', '.o_form_button_edit', this._onEdit.bind(this));
-            this.$buttons.on('click', '.o_form_button_create', this._onCreate.bind(this));
-            this.$buttons.on('click', '.o_form_button_save', this._onSave.bind(this));
-            this.$buttons.on('click', '.o_form_button_cancel', this._onDiscard.bind(this));
-            this._assignSaveCancelKeyboardBehavior(this.$buttons.find('.o_form_buttons_edit'));
-            this.$buttons.find('.o_form_buttons_edit').tooltip({
-                delay: {show: 200, hide:0},
-                title: function(){
-                    return qweb.render('SaveCancelButton.tooltip');
-                },
-                trigger: 'manual',
-            });
-            this._updateButtons();
+        if (this.$buttons && $node) {
+            this.$buttons.appendTo($node);
         }
-        this.$buttons.appendTo($node);
     },
     /**
      * The form view has to prevent a click on the pager if the form is dirty
@@ -180,71 +176,58 @@ var FormController = BasicController.extend({
      * @param {Object} options
      * @returns {Promise}
      */
-    renderPager: function ($node, options) {
-        options = _.extend({}, options, {
+    _getPagingInfo: function () {
+        // Only display the pager if we are not on a new record.
+        if (this.model.isNew(this.handle)) {
+            return null;
+        }
+        return Object.assign(this._super(...arguments), {
             validate: this.canBeDiscarded.bind(this),
         });
-        return this._super($node, options);
     },
     /**
-     * Instantiate and render the sidebar if a sidebar is requested
-     * Sets this.sidebar
-     * @param {jQuery} [$node] a jQuery node where the sidebar should be
-     *   inserted
-     * @return {Promise}
+     * @override
+     * @private
      **/
-    renderSidebar: function ($node) {
-        var self = this;
-        if (this.hasSidebar) {
-            var otherItems = [];
-            const activeField = this.model.getActiveField(this.initialState);
-            const activeFieldValue = this.initialState.data[activeField];
-            if (this.archiveEnabled && activeField) {
-                var classname = "o_sidebar_item_archive" + (activeFieldValue ? "" : " o_hidden")
-                otherItems.push({
-                    label: _t("Archive"),
-                    callback: function () {
-                        Dialog.confirm(self, _t("Are you sure that you want to archive this record?"), {
-                            confirm_callback: self._toggleArchiveState.bind(self, true),
+    _getActionMenuItems: function () {
+        if (!this.hasActionMenus || this.mode === 'edit') {
+            return null;
+        }
+        const props = this._super(...arguments);
+        const activeField = this.model.getActiveField(this.initialState);
+        const otherActionItems = [];
+        if (this.archiveEnabled && activeField) {
+            if (this.initialState.data[activeField]) {
+                otherActionItems.push({
+                    description: _t("Archive"),
+                    callback: () => {
+                        Dialog.confirm(this, _t("Are you sure that you want to archive this record?"), {
+                            confirm_callback: () => this._toggleArchiveState(true),
                         });
                     },
-                    classname: classname,
                 });
-                classname = "o_sidebar_item_unarchive" + (activeFieldValue ? " o_hidden" : "")
-                otherItems.push({
-                    label: _t("Unarchive"),
-                    callback: this._toggleArchiveState.bind(this, false),
-                    classname: classname,
+            } else {
+                otherActionItems.push({
+                    description: _t("Unarchive"),
+                    callback: () => this._toggleArchiveState(false),
                 });
             }
-            if (this.is_action_enabled('delete')) {
-                otherItems.push({
-                    label: _t('Delete'),
-                    callback: this._onDeleteRecord.bind(this),
-                });
-            }
-            if (this.is_action_enabled('create') && this.is_action_enabled('duplicate')) {
-                otherItems.push({
-                    label: _t('Duplicate'),
-                    callback: this._onDuplicateRecord.bind(this),
-                });
-            }
-            this.sidebar = new Sidebar(this, {
-                editable: this.is_action_enabled('edit'),
-                viewType: 'form',
-                env: {
-                    context: this.model.get(this.handle).getContext(),
-                    activeIds: this.getSelectedIds(),
-                    model: this.modelName,
-                },
-                actions: _.extend(this.toolbarActions, {other: otherItems}),
-            });
-            return this.sidebar.appendTo($node).then(function() {
-                 // Show or hide the sidebar according to the view mode
-                self._updateSidebar();
+        }
+        if (this.activeActions.create && this.activeActions.duplicate) {
+            otherActionItems.push({
+                description: _t("Duplicate"),
+                callback: () => this._onDuplicateRecord(this),
             });
         }
-        return Promise.resolve();
+        if (this.activeActions.delete) {
+            otherActionItems.push({
+                description: _t("Delete"),
+                callback: () => this._onDeleteRecord(this),
+            });
+        }
+        return Object.assign(props, {
+            items: Object.assign(this.toolbarActions, { other: otherActionItems }),
+        });
     },
     /**
      * Show a warning message if the user modified a translated field.  For each
@@ -252,32 +235,29 @@ var FormController = BasicController.extend({
      *
      * @override
      */
-    saveRecord: function () {
-        var self = this;
-        return this._super.apply(this, arguments).then(function (changedFields) {
-            // the title could have been changed
-            self._setTitle(self.getTitle());
-            self._updateEnv();
+    saveRecord: async function () {
+        const changedFields = await this._super(...arguments);
+        // the title could have been changed
+        this._updateControlPanel();
 
-            if (_t.database.multi_lang && changedFields.length) {
-                // need to make sure changed fields that should be translated
-                // are displayed with an alert
-                var fields = self.renderer.state.fields;
-                var data = self.renderer.state.data;
-                var alertFields = {};
-                for (var k = 0; k < changedFields.length; k++) {
-                    var field = fields[changedFields[k]];
-                    var fieldData = data[changedFields[k]];
-                    if (field.translate && fieldData) {
-                        alertFields[changedFields[k]] = field;
-                    }
-                }
-                if (!_.isEmpty(alertFields)) {
-                    self.renderer.updateAlertFields(alertFields);
+        if (_t.database.multi_lang && changedFields.length) {
+            // need to make sure changed fields that should be translated
+            // are displayed with an alert
+            var fields = this.renderer.state.fields;
+            var data = this.renderer.state.data;
+            var alertFields = {};
+            for (var k = 0; k < changedFields.length; k++) {
+                var field = fields[changedFields[k]];
+                var fieldData = data[changedFields[k]];
+                if (field.translate && fieldData) {
+                    alertFields[changedFields[k]] = field;
                 }
             }
-            return changedFields;
-        });
+            if (!_.isEmpty(alertFields)) {
+                this.renderer.updateAlertFields(alertFields);
+            }
+        }
+        return changedFields;
     },
     /**
      * Overrides to force the viewType to 'form', so that we ensure that the
@@ -285,12 +265,32 @@ var FormController = BasicController.extend({
      *
      * @override
      */
-    update: function (params, options) {
+    update: async function (params, options) {
         if ('currentId' in params && !params.currentId) {
             this.mode = 'edit'; // if there is no record, we are in 'edit' mode
         }
         params = _.extend({viewType: 'form', mode: this.mode}, params);
-        return this._super(params, options);
+        await this._super(params, options);
+        this.autofocus();
+    },
+    /**
+     * @override
+     */
+    updateButtons: function () {
+        if (!this.$buttons) {
+            return;
+        }
+        if (this.footerToButtons) {
+            var $footer = this.renderer.$el && this.renderer.$('footer');
+            if ($footer && $footer.length) {
+                this.$buttons.empty().append($footer);
+            }
+        }
+        var edit_mode = (this.mode === 'edit');
+        this.$buttons.find('.o_form_buttons_edit')
+            .toggleClass('o_hidden', !edit_mode);
+        this.$buttons.find('.o_form_buttons_view')
+            .toggleClass('o_hidden', edit_mode);
     },
 
     //--------------------------------------------------------------------------
@@ -412,15 +412,6 @@ var FormController = BasicController.extend({
         this._super.apply(this, arguments);
         this.renderer.enableButtons();
     },
-    /**
-     * Only display the pager if we are not on a new record.
-     *
-     * @override
-     * @private
-     */
-    _isPagerVisible: function () {
-        return !this.model.isNew(this.handle);
-    },
     /**
      * Hook method, called when record(s) has been deleted.
      *
@@ -464,74 +455,6 @@ var FormController = BasicController.extend({
         }
         return this._super.apply(this, arguments);
     },
-    /**
-     * Updates the controller's title according to the new state
-     *
-     * @override
-     * @private
-     * @param {Object} state
-     * @returns {Promise}
-     */
-    _update: function () {
-        var self = this;
-
-        return this._super.apply(this, arguments).then(function() {
-            var title = self.getTitle();
-            self._setTitle(title);
-            self._updateButtons();
-            self._updateSidebar();
-            self.autofocus();
-        });
-    },
-    /**
-     * @private
-     */
-    _updateButtons: function () {
-        if (this.$buttons) {
-            if (this.footerToButtons) {
-                var $footer = this.renderer.$('footer');
-                if ($footer.length) {
-                    this.$buttons.empty().append($footer);
-                }
-            }
-            var edit_mode = (this.mode === 'edit');
-            this.$buttons.find('.o_form_buttons_edit')
-                         .toggleClass('o_hidden', !edit_mode);
-            this.$buttons.find('.o_form_buttons_view')
-                         .toggleClass('o_hidden', edit_mode);
-        }
-    },
-    /**
-     * Show or hide the sidebar according to the actual_mode
-     * @private
-     */
-    _updateSidebar: function () {
-        if (this.sidebar) {
-            this.sidebar.do_toggle(this.mode === 'readonly');
-            // Hide/Show Archive/Unarchive dropdown items
-            // We could have toggled the o_hidden class on the
-            // item theirselves, but the items are redrawed
-            // at each update, based on the initial definition
-            var archive_item = _.find(this.sidebar.items.other, function(item) {
-                return item.classname && item.classname.includes('o_sidebar_item_archive')
-            })
-            var unarchive_item = _.find(this.sidebar.items.other, function(item) {
-                return item.classname && item.classname.includes('o_sidebar_item_unarchive')
-            })
-            const state = this.model.get(this.handle, {raw: true});
-            const activeField = this.model.getActiveField(state);
-            const activeFieldValue = this.renderer.state.data[activeField];
-            if (archive_item && unarchive_item) {
-                if (activeFieldValue) {
-                    archive_item.classname = 'o_sidebar_item_archive';
-                    unarchive_item.classname = 'o_sidebar_item_unarchive o_hidden';
-                } else {
-                    archive_item.classname = 'o_sidebar_item_archive o_hidden';
-                    unarchive_item.classname = 'o_sidebar_item_unarchive';
-                }
-            }
-        }
-    },
 
     //--------------------------------------------------------------------------
     // Handlers
@@ -623,18 +546,15 @@ var FormController = BasicController.extend({
         this._discardChanges();
     },
     /**
-     * Called when the user clicks on 'Duplicate Record' in the sidebar
+     * Called when the user clicks on 'Duplicate Record' in the action menus
      *
      * @private
      */
-    _onDuplicateRecord: function () {
-        var self = this;
-        this.model.duplicateRecord(this.handle)
-            .then(function (handle) {
-                self.handle = handle;
-                self._updateEnv();
-                self._setMode('edit');
-            });
+    _onDuplicateRecord: async function () {
+        const handle = await this.model.duplicateRecord(this.handle);
+        this.handle = handle;
+        this._updateControlPanel();
+        this._setMode('edit');
     },
     /**
      * Called when the user wants to edit the current record -> @see _setMode
@@ -777,7 +697,7 @@ var FormController = BasicController.extend({
         });
     },
     /**
-     * Called when clicking on 'Archive' or 'Unarchive' in the sidebar.
+     * Called when clicking on 'Archive' or 'Unarchive' in the action menus.
      *
      * @private
      * @param {boolean} archive
diff --git a/addons/web/static/src/js/views/form/form_renderer.js b/addons/web/static/src/js/views/form/form_renderer.js
index f3c663891b0..1af48aabf73 100644
--- a/addons/web/static/src/js/views/form/form_renderer.js
+++ b/addons/web/static/src/js/views/form/form_renderer.js
@@ -49,9 +49,6 @@ var FormRenderer = BasicRenderer.extend({
      */
     on_attach_callback: function () {
         this._isInDom = true;
-        _.forEach(this.allFieldWidgets, function (widgets){
-            _.invoke(widgets, 'on_attach_callback');
-        });
         this._super.apply(this, arguments);
     },
     /**
diff --git a/addons/web/static/src/js/views/form/form_view.js b/addons/web/static/src/js/views/form/form_view.js
index 13d73cf37c2..9d13fd36b16 100644
--- a/addons/web/static/src/js/views/form/form_view.js
+++ b/addons/web/static/src/js/views/form/form_view.js
@@ -25,19 +25,19 @@ var FormView = BasicView.extend({
      * @override
      */
     init: function (viewInfo, params) {
-        var hasSidebar = params.hasSidebar;
+        var hasActionMenus = params.hasActionMenus;
         this._super.apply(this, arguments);
 
         var mode = params.mode || (params.currentId ? 'readonly' : 'edit');
         this.loadParams.type = 'record';
 
         // this is kind of strange, but the param object is modified by
-        // AbstractView, so we only need to use its hasSidebar value if it was
+        // AbstractView, so we only need to use its hasActionMenus value if it was
         // not already present in the beginning of this method
-        if (hasSidebar === undefined) {
-            hasSidebar = params.hasSidebar;
+        if (hasActionMenus === undefined) {
+            hasActionMenus = params.hasActionMenus;
         }
-        this.controllerParams.hasSidebar = hasSidebar;
+        this.controllerParams.hasActionMenus = hasActionMenus;
         this.controllerParams.disableAutofocus = params.disable_autofocus;
         this.controllerParams.toolbarActions = viewInfo.toolbar;
         this.controllerParams.footerToButtons = params.footerToButtons;
@@ -75,7 +75,7 @@ var FormView = BasicView.extend({
         params.withControlPanel = !(inDialog || inline);
         params.footerToButtons = inDialog;
         params.hasSearchView = inDialog ? false : params.hasSearchView;
-        params.hasSidebar = !inDialog && !inline;
+        params.hasActionMenus = !inDialog && !inline;
         params.searchMenuTypes = inDialog ? [] : params.searchMenuTypes;
         if (inDialog || inline || fullscreen) {
             params.mode = 'edit';
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 1c580a25bd6..f47bfaeb5bb 100644
--- a/addons/web/static/src/js/views/graph/graph_controller.js
+++ b/addons/web/static/src/js/views/graph/graph_controller.js
@@ -1,16 +1,30 @@
 odoo.define('web.GraphController', function (require) {
 "use strict";
+
 /*---------------------------------------------------------
  * Odoo Graph view
  *---------------------------------------------------------*/
 
-var core = require('web.core');
-var AbstractController = require('web.AbstractController');
-var GroupByMenuMixin = require('web.GroupByMenuMixin');
+const AbstractController = require('web.AbstractController');
+const { ComponentWrapper } = require('web.OwlCompatibility');
+const DropdownMenu = require('web.DropdownMenu');
+const { DEFAULT_INTERVAL, INTERVAL_OPTIONS } = require('web.searchUtils');
+const { qweb } = require('web.core');
 
-var qweb = core.qweb;
+class CarretDropdownMenu extends DropdownMenu {
+    /**
+     * @override
+     */
+    get displayCaret() {
+        return true;
+    }
+}
+
+var GraphController = AbstractController.extend({
+    custom_events: _.extend({}, AbstractController.prototype.custom_events, {
+        item_selected: '_onItemSelected',
+    }),
 
-var GraphController = AbstractController.extend(GroupByMenuMixin,{
     /**
      * @override
      * @param {Widget} parent
@@ -22,12 +36,12 @@ var GraphController = AbstractController.extend(GroupByMenuMixin,{
      * @param {string[]} params.groupableFields,
      */
     init: function (parent, model, renderer, params) {
-        GroupByMenuMixin.init.call(this);
         this._super.apply(this, arguments);
         this.measures = params.measures;
         // this parameter condition the appearance of a 'Group By'
         // button in the control panel owned by the graph view.
         this.isEmbedded = params.isEmbedded;
+        this.withButtons = params.withButtons;
 
         // this parameter determines what is the list of fields
         // that may be used within the groupby menu available when
@@ -75,6 +89,18 @@ var GraphController = AbstractController.extend(GroupByMenuMixin,{
             }
         };
     },
+    /**
+     * @override
+     */
+    reload: async function () {
+        const promises = [this._super(...arguments)];
+        if (this.withButtons) {
+            const state = this.model.get();
+            this.measures.forEach(m => m.isActive = m.fieldName === state.measure);
+            promises.push(this.measureMenu.update({ items: this.measures }));
+        }
+        return Promise.all(promises);
+    },
     /**
      * Render the buttons according to the GraphView.buttons and
      * add listeners on it.
@@ -85,86 +111,62 @@ var GraphController = AbstractController.extend(GroupByMenuMixin,{
      * nothing
      */
     renderButtons: function ($node) {
-        if ($node) {
-            var context = {
-                measures: _.sortBy(_.pairs(_.omit(this.measures, '__count__')), function (x) { return x[1].string.toLowerCase(); }),
-            };
-            this.$buttons = $(qweb.render('GraphView.buttons', context));
-            this.$measureList = this.$buttons.find('.o_graph_measures_list');
-            this.$buttons.find('button').tooltip();
-            this.$buttons.click(this._onButtonClick.bind(this));
-            this._updateButtons();
-            this.$buttons.appendTo($node);
-            if (this.isEmbedded) {
-                this._addGroupByMenu($node, this.groupableFields).then(function(){
-                    var groupByButton = $node.find('.o_dropdown_toggler_btn');
-                    groupByButton.removeClass("o_dropdown_toggler_btn btn btn-secondary dropdown-toggle");
-                    groupByButton.addClass("btn dropdown-toggle btn-outline-secondary");
-                });
-            }
+        this.$buttons = $(qweb.render('GraphView.buttons'));
+        this.$buttons.find('button').tooltip();
+        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
+            this.measures.forEach(m => m.isActive = m.fieldName === state.measure);
+            this.measureMenu = new ComponentWrapper(this, CarretDropdownMenu, {
+                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');
+            }));
+            if ($node) {
+                if (this.isEmbedded) {
+                    // Instantiate and append GroupBy menu
+                    this.groupByMenu = new ComponentWrapper(this, CarretDropdownMenu, {
+                        title: "Group By",
+                        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.$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;
+                    }
+                }
+            });
         }
     },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
-
-    /*
-     * override
-     *
-     * @private
-     * @param {string[]} groupBy
-     */
-    _setGroupby: function (groupBy) {
-        this.update({groupBy: groupBy});
-    },
     /**
-     * @todo remove this and directly calls update. Update should be overridden
-     * and modified to call _updateButtons
+     * Makes sure that the buttons in the control panel matches the current
+     * state (so, correct active buttons and stuff like that).
      *
-     * @private
-     *
-     * @param {'pie'|'line'|'bar'} mode
+     * @override
      */
-    _setMode: function (mode) {
-        this.update({mode: mode});
-        this._updateButtons();
-    },
-    /**
-     * @todo same as _setMode
-     *
-     * @param {string} measure should be a valid (and aggregatable) field name
-     */
-    _setMeasure: function (measure) {
-        var self = this;
-        this.update({measure: measure}).then(function () {
-            self._updateButtons();
-        });
-    },
-    /**
-     * @private
-     *
-     * @param {boolean} stacked
-     */
-    _toggleStackMode: function (stacked) {
-        this.update({stacked: stacked});
-        this._updateButtons();
-    },
-    /**
-     * override
-     *
-     * @private
-     */
-    _update: function () {
-        this._updateButtons();
-        return this._super.apply(this, arguments);
-    },
-    /**
-     * makes sure that the buttons in the control panel matches the current
-     * state (so, correct active buttons and stuff like that)
-     */
-    _updateButtons: function () {
+    updateButtons: function () {
         if (!this.$buttons) {
             return;
         }
@@ -178,9 +180,60 @@ var GraphController = AbstractController.extend(GroupByMenuMixin,{
             .data('stacked', state.stacked)
             .toggleClass('active', state.stacked)
             .toggleClass('o_hidden', state.mode !== 'bar');
-        _.each(this.$measureList.find('.dropdown-item'), function (item) {
-            var $item = $(item);
-            $item.toggleClass('selected', $item.data('field') === state.measure);
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Returns the items used by the Group By menu in embedded mode.
+     *
+     * @private
+     * @param {string[]} activeGroupBys
+     * @returns {Object[]}
+     */
+    _getGroupBys(activeGroupBys) {
+        const normalizedGroupBys = this._normalizeActiveGroupBys(activeGroupBys);
+        const groupBys = Object.keys(this.groupableFields).map(fieldName => {
+            const field = this.groupableFields[fieldName];
+            const groupByActivity = normalizedGroupBys.filter(gb => gb.fieldName === fieldName);
+            const groupBy = {
+                id: fieldName,
+                isActive: Boolean(groupByActivity.length),
+                description: field.string,
+                itemType: 'groupBy',
+            };
+            if (['date', 'datetime'].includes(field.type)) {
+                groupBy.hasOptions = true;
+                const activeOptionIds = groupByActivity.map(gb => gb.interval);
+                groupBy.options = Object.values(INTERVAL_OPTIONS).map(o => {
+                    return Object.assign({}, o, { isActive: activeOptionIds.includes(o.id) });
+                });
+            }
+            return groupBy;
+        }).sort((gb1, gb2) => {
+            return gb1.description.localeCompare(gb2.description);
+        });
+        return groupBys;
+    },
+
+    /**
+     * This method puts the active groupBys in a convenient form.
+     *
+     * @private
+     * @param {string[]} activeGroupBys
+     * @returns {Object[]} normalizedGroupBys
+     */
+    _normalizeActiveGroupBys(activeGroupBys) {
+        return activeGroupBys.map(groupBy => {
+            const fieldName = groupBy.split(':')[0];
+            const field = this.groupableFields[fieldName];
+            const normalizedGroupBy = { fieldName };
+            if (['date', 'datetime'].includes(field.type)) {
+                normalizedGroupBy.interval = groupBy.split(':')[1] || DEFAULT_INTERVAL;
+            }
+            return normalizedGroupBy;
         });
     },
 
@@ -196,18 +249,51 @@ var GraphController = AbstractController.extend(GroupByMenuMixin,{
      */
     _onButtonClick: function (ev) {
         var $target = $(ev.target);
-        var field;
         if ($target.hasClass('o_graph_button')) {
             if (_.contains(['bar','line', 'pie'], $target.data('mode'))) {
-                this._setMode($target.data('mode'));
+                this.update({ mode: $target.data('mode') });
             } else if ($target.data('mode') === 'stack') {
-                this._toggleStackMode(!$target.data('stacked'));
+                this.update({ stacked: !$target.data('stacked') });
             }
-        } else if ($target.parents('.o_graph_measures_list').length) {
-            ev.preventDefault();
-            ev.stopPropagation();
-            field = $target.data('field');
-            this._setMeasure(field);
+        }
+    },
+
+    /**
+     * @private
+     * @param {OdooEvent} ev
+     */
+    _onItemSelected(ev) {
+        const item = ev.data.item;
+        if (this.isEmbedded && item.itemType === 'groupBy') {
+            const fieldName = item.id;
+            const optionId = ev.data.option && ev.data.option.id;
+            const activeGroupBys = this.model.get().groupBy;
+            if (optionId) {
+                const normalizedGroupBys = this._normalizeActiveGroupBys(activeGroupBys);
+                const index = normalizedGroupBys.findIndex(ngb =>
+                    ngb.fieldName === fieldName && ngb.interval === optionId);
+                if (index === -1) {
+                    activeGroupBys.push(fieldName + ':' + optionId);
+                } else {
+                    activeGroupBys.splice(index, 1);
+                }
+            } else {
+                const groupByFieldNames = activeGroupBys.map(gb => gb.split(':')[0]);
+                const indexOfGroupby = groupByFieldNames.indexOf(fieldName);
+                if (indexOfGroupby === -1) {
+                    activeGroupBys.push(fieldName);
+                } else {
+                    activeGroupBys.splice(indexOfGroupby, 1);
+                }
+            }
+            this.update({ groupBy: activeGroupBys });
+            this.groupByMenu.update({
+                items: this._getGroupBys(activeGroupBys),
+            });
+        } else if (item.itemType === 'measure') {
+            this.update({ measure: item.fieldName });
+            this.measures.forEach(m => m.isActive = m.fieldName === item.fieldName);
+            this.measureMenu.update({ items: this.measures });
         }
     },
 });
diff --git a/addons/web/static/src/js/views/graph/graph_model.js b/addons/web/static/src/js/views/graph/graph_model.js
index d8b8df2f1fd..8dcb241ae9c 100644
--- a/addons/web/static/src/js/views/graph/graph_model.js
+++ b/addons/web/static/src/js/views/graph/graph_model.js
@@ -2,7 +2,7 @@ odoo.define('web.GraphModel', function (require) {
 "use strict";
 
 var core = require('web.core');
-const { DEFAULT_INTERVAL, rank } = require('web.controlPanelViewParameters');
+const { DEFAULT_INTERVAL, rankInterval } = require('web.searchUtils');
 
 var _t = core._t;
 
@@ -35,10 +35,7 @@ return AbstractModel.extend({
      * @returns {Object}
      */
     get: function () {
-        var self = this;
-        return _.extend({}, this.chart, {
-            comparisonFieldIndex: self._getComparisonFieldIndex(),
-        });
+        return _.extend({}, this.chart);
     },
     /**
      * Initial loading.
@@ -47,21 +44,16 @@ return AbstractModel.extend({
      * should be done by the graphView I think.
      *
      * @param {Object} params
-     * @param {boolean} params.compare
      * @param {Object} params.context
      * @param {Object} params.fields
-     * @param {string[]} params.comparisonTimeRange
      * @param {string[]} params.domain
      * @param {string[]} params.groupBys a list of valid field names
      * @param {string[]} params.groupedBy a list of valid field names
      * @param {boolean} params.stacked
-     * @param {string[]} params.timeRange
-     * @param {string} params.comparisonField
-     * @param {string} params.comparisonTimeRangeDescription
      * @param {string} params.measure a valid field name
      * @param {'pie'|'bar'|'line'} params.mode
      * @param {string} params.modelName
-     * @param {string} params.timeRangeDescription
+     * @param {Object} params.timeRanges
      * @returns {Promise} The promise does not return a handle, we don't need
      *   to keep track of various entities.
      */
@@ -70,11 +62,7 @@ return AbstractModel.extend({
         this.initialGroupBys = groupBys;
         this.fields = params.fields;
         this.modelName = params.modelName;
-        this.chart = {
-            comparisonField: params.comparisonField,
-            comparisonTimeRange: params.comparisonTimeRange,
-            comparisonTimeRangeDescription: params.comparisonTimeRangeDescription,
-            compare: params.compare,
+        this.chart = Object.assign({
             context: params.context,
             dataPoints: [],
             domain: params.domain,
@@ -83,11 +71,12 @@ return AbstractModel.extend({
             mode: params.context.graph_mode || params.mode,
             origins: [],
             stacked: params.stacked,
-            timeRange: params.timeRange,
-            timeRangeDescription: params.timeRangeDescription,
-        };
-        this.chart.processedGroupBy = this._processGroupBy(this.chart.groupBy);
-        return this._loadGraph(this._getDomains());
+            timeRanges: params.timeRanges,
+        });
+
+        this._computeDerivedParams();
+
+        return this._loadGraph();
     },
     /**
      * Reload data.  It is similar to the load function. Note that we ignore the
@@ -104,6 +93,7 @@ return AbstractModel.extend({
      * @param {string[]} [params.groupBy]
      * @param {string} [params.measure] a valid field name
      * @param {string} [params.mode] one of 'bar', 'pie', 'line'
+     * @param {Object} [params.timeRanges]
      * @returns {Promise}
      */
     reload: function (handle, params) {
@@ -112,22 +102,6 @@ return AbstractModel.extend({
             this.chart.groupBy = params.context.graph_groupbys || this.chart.groupBy;
             this.chart.measure = params.context.graph_measure || this.chart.measure;
             this.chart.mode = params.context.graph_mode || this.chart.mode;
-            var timeRangeMenuData = params.context.timeRangeMenuData;
-            if (timeRangeMenuData) {
-                this.chart.comparisonField = timeRangeMenuData.comparisonField || undefined;
-                this.chart.comparisonTimeRange = timeRangeMenuData.comparisonTimeRange || [];
-                this.chart.compare = this.chart.comparisonTimeRange.length > 0;
-                this.chart.comparisonTimeRangeDescription = timeRangeMenuData.comparisonTimeRangeDescription;
-                this.chart.timeRange = timeRangeMenuData.timeRange || [];
-                this.chart.timeRangeDescription = timeRangeMenuData.timeRangeDescription;
-            } else {
-                this.chart.comparisonField = undefined;
-                this.chart.comparisonTimeRange = [];
-                this.chart.compare = false;
-                this.chart.comparisonTimeRangeDescription = undefined;
-                this.chart.timeRange = [];
-                this.chart.timeRangeDescription = undefined;
-            }
         }
         if ('domain' in params) {
             this.chart.domain = params.domain;
@@ -138,7 +112,12 @@ return AbstractModel.extend({
         if ('measure' in params) {
             this.chart.measure = params.measure;
         }
-        this.chart.processedGroupBy = this._processGroupBy(this.chart.groupBy);
+        if ('timeRanges' in params) {
+            this.chart.timeRanges = params.timeRanges;
+        }
+
+        this._computeDerivedParams();
+
         if ('mode' in params) {
             this.chart.mode = params.mode;
             return Promise.resolve();
@@ -147,7 +126,7 @@ return AbstractModel.extend({
             this.chart.stacked = params.stacked;
             return Promise.resolve();
         }
-        return this._loadGraph(this._getDomains());
+        return this._loadGraph();
     },
 
     //--------------------------------------------------------------------------
@@ -155,28 +134,34 @@ return AbstractModel.extend({
     //--------------------------------------------------------------------------
 
     /**
+     * Compute this.chart.processedGroupBy, this.chart.domains, this.chart.origins,
+     * and this.chart.comparisonFieldIndex.
+     * Those parameters are determined by this.chart.timeRanges, this.chart.groupBy, and this.chart.domain.
+     *
      * @private
-     * @returns {number}
      */
-    _getComparisonFieldIndex: function () {
-        var groupBys = this.chart.processedGroupBy.map(function (gb) {
-            return gb.split(":")[0];
-        });
-        return groupBys.indexOf(this.chart.comparisonField);
-    },
-    /**
-     * @private
-     * @returns {Array[]}
-     */
-    _getDomains: function () {
-        var domains = [this.chart.domain.concat(this.chart.timeRange)];
-        this.chart.origins = [this.chart.timeRangeDescription || ""];
-        if (this.chart.compare) {
-            domains.push(this.chart.domain.concat(this.chart.comparisonTimeRange));
-            this.chart.origins.push(this.chart.comparisonTimeRangeDescription);
+    _computeDerivedParams: function () {
+        this.chart.processedGroupBy = this._processGroupBy(this.chart.groupBy);
+
+        const { range, rangeDescription, comparisonRange, comparisonRangeDescription, fieldName } = this.chart.timeRanges;
+        if (range) {
+            this.chart.domains = [this.chart.domain.concat(range)];
+            this.chart.origins = [rangeDescription];
+            if (comparisonRange) {
+                this.chart.domains.push(this.chart.domain.concat(comparisonRange));
+                this.chart.origins.push(comparisonRangeDescription);
+            }
+            const groupBys = this.chart.processedGroupBy.map(function (gb) {
+                return gb.split(":")[0];
+            });
+            this.chart.comparisonFieldIndex = groupBys.indexOf(fieldName);
+        } else {
+            this.chart.domains = [this.chart.domain];
+            this.chart.origins = [""];
+            this.chart.comparisonFieldIndex = -1;
         }
-        return domains;
     },
+
     /**
      * Fetch and process graph data.  It is basically a(some) read_group(s)
      * with correct fields for each domain.  We have to do some light processing
@@ -184,10 +169,9 @@ return AbstractModel.extend({
      * with an aggregation function, such as my_date:week.
      *
      * @private
-     * @param {Array[]} domains
      * @returns {Promise}
      */
-    _loadGraph: function (domains) {
+    _loadGraph: function () {
         var self = this;
         this.chart.dataPoints = [];
         var groupBy = this.chart.processedGroupBy;
@@ -205,10 +189,10 @@ return AbstractModel.extend({
         }
 
         var context = _.extend({fill_temporal: true}, this.chart.context);
-        var defs = [];
 
-        domains.forEach(function (domain, originIndex) {
-            defs.push(self._rpc({
+        var proms = [];
+        this.chart.domains.forEach(function (domain, originIndex) {
+            proms.push(self._rpc({
                 model: self.modelName,
                 method: 'read_group',
                 context: context,
@@ -218,7 +202,7 @@ return AbstractModel.extend({
                 lazy: false,
             }).then(self._processData.bind(self, originIndex)));
         });
-        return Promise.all(defs);
+        return Promise.all(proms);
     },
     /**
      * Since read_group is insane and returns its result on different keys
@@ -286,7 +270,7 @@ return AbstractModel.extend({
             }
             if (groupBysMap.has(fieldName)) {
                 const registeredInterval = groupBysMap.get(fieldName);
-                if (rank(registeredInterval) < rank(interval)) {
+                if (rankInterval(registeredInterval) < rankInterval(interval)) {
                     groupBysMap.set(fieldName, interval);
                 }
             } else {
diff --git a/addons/web/static/src/js/views/graph/graph_view.js b/addons/web/static/src/js/views/graph/graph_view.js
index 64c65694784..488424536e6 100644
--- a/addons/web/static/src/js/views/graph/graph_view.js
+++ b/addons/web/static/src/js/views/graph/graph_view.js
@@ -16,8 +16,8 @@ var GraphRenderer = require('web.GraphRenderer');
 var _t = core._t;
 var _lt = core._lt;
 
-var controlPanelViewParameters = require('web.controlPanelViewParameters');
-var GROUPABLE_TYPES = controlPanelViewParameters.GROUPABLE_TYPES;
+var searchUtils = require('web.searchUtils');
+var GROUPABLE_TYPES = searchUtils.GROUPABLE_TYPES;
 
 var GraphView = AbstractView.extend({
     display_name: _lt('Graph'),
@@ -39,54 +39,81 @@ var GraphView = AbstractView.extend({
     init: function (viewInfo, params) {
         this._super.apply(this, arguments);
 
-        var self = this;
-        var measure;
-        var groupBys = [];
-        var measures = {__count__: {string: _t("Count"), type: "integer"}};
-        var groupableFields = {};
-        this.fields.__count__ = {string: _t("Count"), type: "integer"};
+        const additionalMeasures = params.additionalMeasures || [];
+        let measure;
+        const measures = {};
+        const measureStrings = {};
+        const groupBys = [];
+        const groupableFields = {};
+        this.fields.__count__ = { string: _t("Count"), type: 'integer' };
 
-        var measureString = {};
-
-        this.arch.children.forEach(function (field) {
-            var fieldName = field.attrs.name;
+        this.arch.children.forEach(field => {
+            let fieldName = field.attrs.name;
             if (fieldName === "id") {
                 return;
             }
-            var interval = field.attrs.interval;
+            const interval = field.attrs.interval;
             if (interval) {
                 fieldName = fieldName + ':' + interval;
             }
             if (field.attrs.type === 'measure') {
+                const { string } = this.fields[fieldName];
                 measure = fieldName;
-                measures[fieldName] = self.fields[fieldName];
+                measures[fieldName] = {
+                    description: string,
+                    fieldName,
+                    groupNumber: 0,
+                    isActive: false,
+                    itemType: 'measure',
+                };
             } else {
                 groupBys.push(fieldName);
             }
             if (field.attrs.string) {
-                measureString[fieldName] = field.attrs.string;
+                measureStrings[fieldName] = field.attrs.string;
             }
         });
 
-        _.each(this.fields, function (field, name) {
+        for (const name in this.fields) {
+            const field = this.fields[name];
             if (name !== 'id' && field.store === true) {
-                if (_.contains(['integer', 'float', 'monetary'], field.type) ||
-                    _.contains(params.additionalMeasures, name)) {
-                        measures[name] = field;
+                if (
+                    ['integer', 'float', 'monetary'].includes(field.type) ||
+                    additionalMeasures.includes(name)
+                ) {
+                    measures[name] = {
+                        description: field.string,
+                        fieldName: name,
+                        groupNumber: 0,
+                        isActive: false,
+                        itemType: 'measure',
+                    };
                 }
-                if (_.contains(GROUPABLE_TYPES, field.type)) {
+                if (GROUPABLE_TYPES.includes(field.type)) {
                     groupableFields[name] = field;
                 }
             }
-        });
-
-        _.each(measureString, function (string, name) {
+        }
+        for (const name in measureStrings) {
             if (measures[name]) {
-                measures[name].string = string;
+                measures[name].description = measureStrings[name];
             }
-        });
+        }
 
-        this.controllerParams.measures = measures;
+        const sortedMeasures = Object.values(measures).sort((a, b) => {
+                const descA = a.description.toLowerCase();
+                const descB = b.description.toLowerCase();
+                return descA > descB ? 1 : descA < descB ? -1 : 0;
+            });
+        const countMeasure = {
+            description: _t("Count"),
+            fieldName: '__count__',
+            groupNumber: 1,
+            isActive: false,
+            itemType: 'measure',
+        };
+        this.controllerParams.withButtons = params.withButtons !== false;
+        this.controllerParams.measures = [...sortedMeasures, countMeasure];
         this.controllerParams.groupableFields = groupableFields;
         this.rendererParams.fields = this.fields;
         this.rendererParams.title = this.arch.attrs.title; // TODO: use attrs.string instead
diff --git a/addons/web/static/src/js/views/kanban/kanban_controller.js b/addons/web/static/src/js/views/kanban/kanban_controller.js
index 95012eeebfc..cca0a43cb5e 100644
--- a/addons/web/static/src/js/views/kanban/kanban_controller.js
+++ b/addons/web/static/src/js/views/kanban/kanban_controller.js
@@ -58,21 +58,35 @@ var KanbanController = BasicController.extend({
     //--------------------------------------------------------------------------
 
     /**
-     * @param {jQueryElement} $node
-     * @returns {Promise}
+     * @param {jQuery} [$node]
      */
     renderButtons: function ($node) {
-        if (this.hasButtons && this.is_action_enabled('create')) {
-            this.$buttons = $(qweb.render(this.buttons_template, {
-                btnClass: 'btn-primary',
-                widget: this,
-            }));
-            this.$buttons.on('click', 'button.o-kanban-button-new', this._onButtonNew.bind(this));
-            this.$buttons.on('keydown', this._onButtonsKeyDown.bind(this));
-            this._updateButtons();
-            return Promise.resolve(this.$buttons.appendTo($node));
+        if (!this.hasButtons || !this.is_action_enabled('create')) {
+            return;
         }
-        return Promise.resolve();
+        this.$buttons = $(qweb.render(this.buttons_template, {
+            btnClass: 'btn-primary',
+            widget: this,
+        }));
+        this.$buttons.on('click', 'button.o-kanban-button-new', this._onButtonNew.bind(this));
+        this.$buttons.on('keydown', this._onButtonsKeyDown.bind(this));
+        if ($node) {
+            this.$buttons.appendTo($node);
+        }
+    },
+    /**
+     * In grouped mode, set 'Create' button as btn-secondary if there is no column
+     * (except if we can't create new columns)
+     *
+     * @override
+     */
+    updateButtons: function () {
+        if (!this.$buttons) {
+            return;
+        }
+        var state = this.model.get(this.handle, {raw: true});
+        var createHidden = this.is_action_enabled('group_create') && state.isGroupedByM2ONoColumn;
+        this.$buttons.find('.o-kanban-button-new').toggleClass('o_hidden', createHidden);
     },
 
     //--------------------------------------------------------------------------
@@ -100,9 +114,11 @@ var KanbanController = BasicController.extend({
      * @override
      * @private
      */
-    _isPagerVisible: function () {
-        var state = this.model.get(this.handle, {raw: true});
-        return !!(state.count && !state.groupedBy.length);
+    _getPagingInfo: function (state) {
+        if (!(state.count && !state.groupedBy.length)) {
+            return null;
+        }
+        return this._super(...arguments);
     },
     /**
      * @private
@@ -185,33 +201,7 @@ var KanbanController = BasicController.extend({
      */
     _resequenceRecords: function (column_id, ids) {
         var self = this;
-        return this.model.resequence(this.modelName, ids, column_id).then(function () {
-            self._updateEnv();
-        });
-    },
-    /**
-     * Overrides to update the control panel buttons when the state is updated.
-     *
-     * @override
-     * @private
-     */
-    _update: function () {
-        this._updateButtons();
-        return this._super.apply(this, arguments);
-    },
-    /**
-     * In grouped mode, set 'Create' button as btn-secondary if there is no column
-     * (except if we can't create new columns)
-     *
-     * @private
-     * @override from abstract controller
-     */
-    _updateButtons: function () {
-        if (this.$buttons) {
-            var state = this.model.get(this.handle, {raw: true});
-            var createHidden = this.is_action_enabled('group_create') && state.isGroupedByM2ONoColumn;
-            this.$buttons.find('.o-kanban-button-new').toggleClass('o_hidden', createHidden);
-        }
+        return this.model.resequence(this.modelName, ids, column_id);
     },
 
     //--------------------------------------------------------------------------
@@ -236,7 +226,6 @@ var KanbanController = BasicController.extend({
             }).then(function () {
                 return self.update({}, {reload: false});
             }).then(function () {
-                self._updateButtons();
                 self.renderer.quickCreateToggleFold();
                 self.renderer.trigger_up("quick_create_column_created");
             });
@@ -389,7 +378,6 @@ var KanbanController = BasicController.extend({
         this.model.loadMore(column.db_id).then(function (db_id) {
             var data = self.model.get(db_id);
             self.renderer.updateColumn(db_id, data);
-            self._updateEnv();
         });
     },
     /**
@@ -412,7 +400,6 @@ var KanbanController = BasicController.extend({
         // function that updates the kanban view once the record has been added
         // it receives the local id of the created record in arguments
         var update = function (db_id) {
-            self._updateEnv();
 
             var columnState = self.model.getColumn(db_id);
             var state = self.model.get(self.handle);
@@ -459,9 +446,7 @@ var KanbanController = BasicController.extend({
      */
     _onResequenceColumn: function (ev) {
         var self = this;
-        this._resequenceColumns(ev.data.ids).then(function () {
-            self._updateEnv();
-        });
+        this._resequenceColumns(ev.data.ids);
     },
     /**
      * @private
@@ -481,7 +466,6 @@ var KanbanController = BasicController.extend({
                 return self.renderer.updateColumn(db_id, data, options);
             })
             .then(function () {
-                self._updateEnv();
                 if (ev.data.onSuccess) {
                     ev.data.onSuccess();
                 }
@@ -520,7 +504,6 @@ var KanbanController = BasicController.extend({
             prom.then(function (dbID) {
                 var data = self.model.get(dbID);
                 self.renderer.updateColumn(dbID, data);
-                self._updateEnv();
             });
         }
     },
diff --git a/addons/web/static/src/js/views/kanban/kanban_model.js b/addons/web/static/src/js/views/kanban/kanban_model.js
index 2f2def8d850..3025adde2cb 100644
--- a/addons/web/static/src/js/views/kanban/kanban_model.js
+++ b/addons/web/static/src/js/views/kanban/kanban_model.js
@@ -179,7 +179,7 @@ var KanbanModel = BasicModel.extend({
      * @override
      */
     load: function (params) {
-        this.defaultGroupedBy = params.groupBy;
+        this.defaultGroupedBy = params.groupBy || [];
         params.groupedBy = (params.groupedBy && params.groupedBy.length) ? params.groupedBy : this.defaultGroupedBy;
         return this._super(params);
     },
diff --git a/addons/web/static/src/js/views/kanban/kanban_view.js b/addons/web/static/src/js/views/kanban/kanban_view.js
index 7159dda9618..d49b4a73c4e 100644
--- a/addons/web/static/src/js/views/kanban/kanban_view.js
+++ b/addons/web/static/src/js/views/kanban/kanban_view.js
@@ -108,11 +108,8 @@ var KanbanView = BasicView.extend({
      */
     _updateMVCParams: function () {
         this._super.apply(this, arguments);
-        if (!this.noDefaultGroupby) {
-            var defaultGroupBy = this.arch.attrs.default_group_by;
-            this.loadParams.groupBy = defaultGroupBy ?
-                                        [defaultGroupBy] :
-                                        (this.loadParams.groupedBy || []);
+        if (!this.noDefaultGroupby && this.arch.attrs.default_group_by) {
+            this.loadParams.groupBy = [this.arch.attrs.default_group_by];
         }
     },
 });
diff --git a/addons/web/static/src/js/views/list/list_controller.js b/addons/web/static/src/js/views/list/list_controller.js
index d6b42ee1043..41dfa18c8bc 100644
--- a/addons/web/static/src/js/views/list/list_controller.js
+++ b/addons/web/static/src/js/views/list/list_controller.js
@@ -12,7 +12,6 @@ var BasicController = require('web.BasicController');
 var DataExport = require('web.DataExport');
 var Dialog = require('web.Dialog');
 var ListConfirmDialog = require('web.ListConfirmDialog');
-var Sidebar = require('web.Sidebar');
 
 var _t = core._t;
 var qweb = core.qweb;
@@ -42,19 +41,20 @@ var ListController = BasicController.extend({
      * @override
      * @param {Object} params
      * @param {boolean} params.editable
-     * @param {boolean} params.hasSidebar
+     * @param {boolean} params.hasActionMenus
      * @param {Object} params.toolbarActions
      * @param {boolean} params.noLeaf
      */
     init: function (parent, model, renderer, params) {
         this._super.apply(this, arguments);
-        this.hasSidebar = params.hasSidebar;
+        this.hasActionMenus = params.hasActionMenus;
         this.toolbarActions = params.toolbarActions || {};
         this.editable = params.editable;
         this.noLeaf = params.noLeaf;
         this.selectedRecords = params.selectedRecords || [];
         this.multipleRecordsSavingPromise = null;
         this.fieldChangedPrevented = false;
+        this.selectAll = false;
         Object.defineProperty(this, 'mode', {
             get: () => this.renderer.isEditable() ? 'edit' : 'readonly',
             set: () => {},
@@ -78,8 +78,8 @@ var ListController = BasicController.extend({
      */
     getActiveDomain: function () {
         var self = this;
-        if (this.$('thead .o_list_record_selector input').prop('checked')) {
-            var searchQuery = this._controlPanel ? this._controlPanel.getSearchQuery() : {};
+        if (this.selectAll) {
+            var searchQuery = this._controlPanelModel ? this._controlPanelModel.getQuery() : {};
             var record = self.model.get(self.handle, {raw: true});
             return record.getDomain().concat(searchQuery.domain || []);
         }
@@ -125,75 +125,27 @@ var ListController = BasicController.extend({
      * induce the leaving of the current row.
      *
      * @override
-     * @param {jQuery} $node
      */
     renderButtons: function ($node) {
-        if (!this.noLeaf && this.hasButtons) {
-            this.$buttons = $(qweb.render(this.buttons_template, {widget: this}));
-            this.$buttons.on('click', '.o_list_button_add', this._onCreateRecord.bind(this));
-
-            this._assignCreateKeyboardBehavior(this.$buttons.find('.o_list_button_add'));
-            this.$buttons.find('.o_list_button_add').tooltip({
-                delay: {show: 200, hide: 0},
-                title: function () {
-                    return qweb.render('CreateButton.tooltip');
-                },
-                trigger: 'manual',
-            });
-            this.$buttons.on('mousedown', '.o_list_button_discard', this._onDiscardMousedown.bind(this));
-            this.$buttons.on('click', '.o_list_button_discard', this._onDiscard.bind(this));
+        if (this.noLeaf || !this.hasButtons) {
+            return;
+        }
+        this.$buttons = $(qweb.render(this.buttons_template, {widget: this}));
+        this.$buttons.on('click', '.o_list_button_add', this._onCreateRecord.bind(this));
+        this._assignCreateKeyboardBehavior(this.$buttons.find('.o_list_button_add'));
+        this.$buttons.find('.o_list_button_add').tooltip({
+            delay: {show: 200, hide: 0},
+            title: function () {
+                return qweb.render('CreateButton.tooltip');
+            },
+            trigger: 'manual',
+        });
+        this.$buttons.on('mousedown', '.o_list_button_discard', this._onDiscardMousedown.bind(this));
+        this.$buttons.on('click', '.o_list_button_discard', this._onDiscard.bind(this));
+        if ($node) {
             this.$buttons.appendTo($node);
         }
     },
-    /**
-     * Render the sidebar (the 'action' menu in the control panel, right of the
-     * main buttons)
-     *
-     * @param {jQuery Node} $node
-     * @returns {Promise}
-     */
-    renderSidebar: function ($node) {
-        var self = this;
-        if (this.hasSidebar) {
-            var other = [{
-                label: _t("Export"),
-                callback: this._onExportData.bind(this)
-            }];
-            if (this.archiveEnabled) {
-                other.push({
-                    label: _t("Archive"),
-                    callback: function () {
-                        Dialog.confirm(self, _t("Are you sure that you want to archive all the selected records?"), {
-                            confirm_callback: self._toggleArchiveState.bind(self, true),
-                        });
-                    }
-                });
-                other.push({
-                    label: _t("Unarchive"),
-                    callback: this._toggleArchiveState.bind(this, false)
-                });
-            }
-            if (this.is_action_enabled('delete')) {
-                other.push({
-                    label: _t('Delete'),
-                    callback: this._onDeleteSelectedRecords.bind(this)
-                });
-            }
-            this.sidebar = new Sidebar(this, {
-                editable: this.is_action_enabled('edit'),
-                env: {
-                    context: this.model.get(this.handle, {raw: true}).getContext(),
-                    activeIds: this.getSelectedIds(),
-                    model: this.modelName,
-                },
-                actions: _.extend(this.toolbarActions, {other: other}),
-            });
-            return this.sidebar.appendTo($node).then(function() {
-                self._toggleSidebar();
-            });
-        }
-        return Promise.resolve();
-    },
     /**
      * Overrides to update the list of selected records
      *
@@ -214,6 +166,25 @@ var ListController = BasicController.extend({
         params.selectedRecords = this.selectedRecords;
         return this._super.apply(this, arguments);
     },
+    /**
+     * This helper simply makes sure that the control panel buttons matches the
+     * current mode.
+     *
+     * @override
+     * @param {string} mode either 'readonly' or 'edit'
+     */
+    updateButtons: function (mode) {
+        if (!this.$buttons) {
+            return;
+        }
+        this.$buttons.toggleClass('o-editing', mode === 'edit');
+        const state = this.model.get(this.handle, {raw: true});
+        if (state.count) {
+            this.$('.o_list_export_xlsx').show();
+        } else {
+            this.$('.o_list_export_xlsx').hide();
+        }
+    },
 
     //--------------------------------------------------------------------------
     // Private
@@ -233,7 +204,7 @@ var ListController = BasicController.extend({
         if ((recordID || this.handle) !== this.handle) {
             var state = this.model.get(this.handle);
             this.renderer.removeLine(state, recordID);
-            this._updatePager();
+            this._updatePaging(state);
         }
     },
     /**
@@ -257,7 +228,10 @@ var ListController = BasicController.extend({
             self.renderer.updateState(state, {keepWidths: true})
                 .then(function () {
                     self.renderer.editRecord(recordID);
-                }).then(self._updatePager.bind(self));
+                })
+                .then(() => {
+                    self._updatePaging(state);
+                });
         }).then(this._enableButtons.bind(this)).guardedCatch(this._enableButtons.bind(this));
     },
     /**
@@ -342,7 +316,7 @@ var ListController = BasicController.extend({
         }
         var self = this;
         return this._super(recordID).then(function () {
-            self._updateButtons('readonly');
+            self.updateButtons('readonly');
         });
     },
     /**
@@ -356,27 +330,56 @@ var ListController = BasicController.extend({
         return new DataExport(this, state, defaultExportFields, groupedBy,
             this.getActiveDomain(), this.getSelectedIds());
     },
-    /**
-     * @override
-     * @private
-     */
-    _getSidebarEnv: function () {
-        var env = this._super.apply(this, arguments);
-        var record = this.model.get(this.handle);
-        return _.extend(env, {
-            domain: record.getDomain(),
-            selectAll: !!this.$('thead .o_list_record_selector input').prop('checked'),
-        });
-    },
     /**
      * Only display the pager when there are data to display.
      *
      * @override
      * @private
      */
-    _isPagerVisible: function () {
-        var state = this.model.get(this.handle, {raw: true});
-        return !!state.count;
+    _getPagingInfo: function (state) {
+        if (!state.count) {
+            return null;
+        }
+        return this._super(...arguments);
+    },
+    /**
+     * @override
+     * @private
+     */
+    _getActionMenuItems: function (state) {
+        if (!this.hasActionMenus || !this.selectedRecords.length) {
+            return null;
+        }
+        const props = this._super(...arguments);
+        const otherActionItems = [{
+            description: _t("Export"),
+            callback: () => this._onExportData(),
+        }];
+        if (this.archiveEnabled) {
+            otherActionItems.push({
+                description: _t("Archive"),
+                callback: () => {
+                    Dialog.confirm(this, _t("Are you sure that you want to archive all the selected records?"), {
+                        confirm_callback: () => this._toggleArchiveState(true),
+                    });
+                }
+            }, {
+                description: _t("Unarchive"),
+                callback: () => this._toggleArchiveState(false)
+            });
+        }
+        if (this.activeActions.delete) {
+            otherActionItems.push({
+                description: _t("Delete"),
+                callback: () => this._onDeleteSelectedRecords()
+            });
+        }
+        return Object.assign(props, {
+            items: Object.assign({}, this.toolbarActions, { other: otherActionItems }),
+            context: this.model.get(this.handle, { raw: true }).getContext(),
+            domain: state.getDomain(),
+            selectAll: this.selectAll,
+        });
     },
     /**
      * Saves multiple records at once. This method is called by the _onFieldChanged method
@@ -406,7 +409,7 @@ var ListController = BasicController.extend({
             const saveRecords = () => {
                 this.model.saveRecords(this.handle, recordId, validRecordIds, fieldName)
                     .then(async () => {
-                        this._updateButtons('readonly');
+                        this.updateButtons('readonly');
                         const state = this.model.get(this.handle);
                         // We need to check the current multi-editable state here
                         // in case the selection is changed. If there are changes
@@ -481,7 +484,7 @@ var ListController = BasicController.extend({
      */
     _setMode: function (mode, recordID) {
         if ((recordID || this.handle) !== this.handle) {
-            this._updateButtons(mode);
+            this.updateButtons(mode);
             return this.renderer.setRowMode(recordID, mode);
         } else {
             return this._super.apply(this, arguments);
@@ -509,41 +512,14 @@ var ListController = BasicController.extend({
             this.$buttons.find('.o_list_button_add').toggleClass('o_hidden', !!createHidden);
         }
     },
-    /**
-     * Display the sidebar (the 'action' menu in the control panel) if we have
-     * some selected records.
-     */
-    _toggleSidebar: function () {
-        if (this.sidebar) {
-            this.sidebar.do_toggle(this.selectedRecords.length > 0);
-        }
-    },
     /**
      * @override
      * @returns {Promise}
      */
-    _update: function () {
-        return this._super.apply(this, arguments)
-            .then(this._toggleSidebar.bind(this))
-            .then(this._toggleCreateButton.bind(this))
-            .then(this._updateButtons.bind(this, 'readonly'));
-    },
-    /**
-     * This helper simply makes sure that the control panel buttons matches the
-     * current mode.
-     *
-     * @param {string} mode either 'readonly' or 'edit'
-     */
-    _updateButtons: function (mode) {
-        if (this.$buttons) {
-            this.$buttons.toggleClass('o-editing', mode === 'edit');
-            const state = this.model.get(this.handle, {raw: true});
-            if (state.count) {
-                this.$('.o_list_export_xlsx').show();
-            } else {
-                this.$('.o_list_export_xlsx').hide();
-            }
-        }
+    _update: async function () {
+        await this._super(...arguments);
+        this._toggleCreateButton();
+        this.updateButtons('readonly');
     },
 
     //--------------------------------------------------------------------------
@@ -745,7 +721,8 @@ var ListController = BasicController.extend({
      */
     _onSelectionChanged: function (ev) {
         this.selectedRecords = ev.data.selection;
-        this._toggleSidebar();
+        this.selectAll = ev.data.allChecked;
+        this._updateControlPanel();
     },
     /**
      * If the record is set as dirty while in multiple record edition,
@@ -780,12 +757,12 @@ var ListController = BasicController.extend({
      */
     _onToggleColumnOrder: function (ev) {
         ev.stopPropagation();
-        var data = this.model.get(this.handle);
-        if (!data.groupedBy) {
-            this.pager.updateState({current_min: 1});
+        var state = this.model.get(this.handle);
+        if (!state.groupedBy) {
+            this._updatePaging(state, { currentMinimum: 1 });
         }
         var self = this;
-        this.model.setSort(data.id, ev.data.name).then(function () {
+        this.model.setSort(state.id, ev.data.name).then(function () {
             self.update({});
         });
     },
diff --git a/addons/web/static/src/js/views/list/list_renderer.js b/addons/web/static/src/js/views/list/list_renderer.js
index cf47c997597..418c39b14e0 100644
--- a/addons/web/static/src/js/views/list/list_renderer.js
+++ b/addons/web/static/src/js/views/list/list_renderer.js
@@ -2,6 +2,7 @@ odoo.define('web.ListRenderer', function (require) {
 "use strict";
 
 var BasicRenderer = require('web.BasicRenderer');
+const { ComponentWrapper } = require('web.OwlCompatibility');
 var config = require('web.config');
 var core = require('web.core');
 var dom = require('web.dom');
@@ -83,6 +84,7 @@ var ListRenderer = BasicRenderer.extend({
     //--------------------------------------------------------------------------
     // Public
     //--------------------------------------------------------------------------
+
     /**
      * Order to focus to be given to the content of the current view
      * @override
@@ -570,41 +572,6 @@ var ListRenderer = BasicRenderer.extend({
         }
         return $buttons;
     },
-    /**
-     * Renders the pager for a given group
-     *
-     * @private
-     * @param {Object} group
-     * @returns {jQueryElement} the pager's $el
-     */
-    _renderGroupPager: function (group) {
-        var pager = new Pager(this, group.count, group.offset + 1, group.limit);
-        pager.on('pager_changed', this, function (newState) {
-            var self = this;
-            pager.disable();
-            this.trigger_up('load', {
-                id: group.id,
-                limit: newState.limit,
-                offset: newState.current_min - 1,
-                on_success: function (reloadedGroup) {
-                    _.extend(group, reloadedGroup);
-                    self._renderView();
-                },
-                on_fail: pager.enable.bind(pager),
-            });
-        });
-        // register the pager so that it can be destroyed on next rendering
-        this.pagers.push(pager);
-
-        var pagerProm = pager._widgetRenderAndInsert(function () {}); // start the pager
-        this.defs.push(pagerProm);
-        var $el = $('<div>');
-        pagerProm.then(function () {
-            $el.replaceWith(pager.$el);
-        });
-
-        return $el;
-    },
     /**
      * Render the row that represent a group
      *
@@ -670,9 +637,8 @@ var ListRenderer = BasicRenderer.extend({
         $th.attr('colspan', colspanBeforeAggregate);
 
         if (group.isOpen && !group.groupedBy.length && (group.count > group.data.length)) {
-            var $pager = this._renderGroupPager(group);
-            var $lastCell = cells[cells.length - 1];
-            $lastCell.append($pager);
+            const lastCell = cells[cells.length - 1][0];
+            this._renderGroupPager(group, lastCell);
         }
         if (group.isOpen && this.groupbys[groupBy]) {
             var $buttons = this._renderGroupButtons(group, this.groupbys[groupBy]);
@@ -711,6 +677,30 @@ var ListRenderer = BasicRenderer.extend({
             return [$('<tbody>').append($records)];
         }
     },
+    /**
+     * Renders the pager for a given group
+     *
+     * @private
+     * @param {Object} group
+     * @param {HTMLElement} target
+     */
+    _renderGroupPager: function (group, target) {
+        const currentMinimum = group.offset + 1;
+        const limit = group.limit;
+        const size = group.count;
+        if (!this._shouldRenderPager(currentMinimum, limit, size)) {
+            return;
+        }
+        const pager = new ComponentWrapper(this, Pager, { currentMinimum, limit, size });
+        const pagerMounting = pager.mount(target).then(() => {
+            // Event binding is done here to get the related group and wrapper.
+            pager.el.addEventListener('pager-changed', ev => this._onPagerChanged(ev, group));
+            // Prevent pager clicks to toggle the group.
+            pager.el.addEventListener('click', ev => ev.stopPropagation());
+        });
+        this.defs.push(pagerMounting);
+        this.pagers.push(pager);
+    },
     /**
      * Render all groups in the view.  We assume that the view is in grouped
      * mode.
@@ -937,7 +927,7 @@ var ListRenderer = BasicRenderer.extend({
     _renderView: function () {
         var self = this;
 
-        var oldPagers = this.pagers;
+        const oldPagers = this.pagers;
         this.pagers = [];
 
         // display the no content helper if there is no data to display
@@ -945,7 +935,7 @@ var ListRenderer = BasicRenderer.extend({
         this.$el.toggleClass('o_list_view', !displayNoContentHelper);
         if (displayNoContentHelper) {
             // destroy the previously instantiated pagers, if any
-            _.invoke(oldPagers, 'destroy');
+            oldPagers.forEach(pager => pager.destroy());
 
             this.$el.removeClass('table-responsive');
             this.$el.html(this._renderNoContentHelper());
@@ -971,16 +961,22 @@ var ListRenderer = BasicRenderer.extend({
             $table.append(this._renderBody());
             $table.append(this._renderFooter());
         }
+        const tableWrapper = Object.assign(document.createElement('div'), {
+            className: 'table-responsive',
+        });
+        tableWrapper.appendChild($table[0]);
         delete this.defs;
 
-        var prom = Promise.all(defs).then(function () {
+        var prom = Promise.all(defs).then(() => {
             // destroy the previously instantiated pagers, if any
-            _.invoke(oldPagers, 'destroy');
+            oldPagers.forEach(pager => pager.destroy());
 
-            self.$el.html($('<div>', {
-                class: 'table-responsive',
-                html: $table
-            }));
+            // Append the table to the main element
+            self.el.innerHTML = "";
+            dom.append(self.el, tableWrapper, {
+                callbacks: [{ widget: this }],
+                in_DOM: document.body.contains(self.el),
+            });
 
             if (self.optionalColumns.length) {
                 self.$el.addClass('o_list_optional_columns');
@@ -1015,6 +1011,18 @@ var ListRenderer = BasicRenderer.extend({
             $tr.toggleClass(cssClass, py.PY_isTrue(py.evaluate(expr, record.evalContext)));
         });
     },
+    /**
+     * @private
+     * @returns {boolean}
+     */
+    _shouldRenderPager: function (currentMinimum, limit, size) {
+        if (!limit || !size) {
+            return false;
+        }
+        const maximum = Math.min(currentMinimum + limit - 1, size);
+        const singlePage = (1 === currentMinimum) && (maximum === size);
+        return !singlePage;
+    },
     /**
      * Update the footer aggregate values.  This method should be called each
      * time the state of some field is changed, to make sure their sum are kept
@@ -1046,7 +1054,7 @@ var ListRenderer = BasicRenderer.extend({
             }
         });
         this.$('thead .o_list_record_selector input').prop('checked', allChecked);
-        this.trigger_up('selection_changed', { selection: this.selection });
+        this.trigger_up('selection_changed', { allChecked, selection: this.selection });
         this._updateFooter();
     },
 
@@ -1210,6 +1218,24 @@ var ListRenderer = BasicRenderer.extend({
     _onMouseDown: function () {
         $('.o_keyboard_navigation').removeClass('o_keyboard_navigation');
     },
+    /**
+     * @private
+     * @param {OwlEvent} ev
+     * @param {Object} group
+     */
+    _onPagerChanged: async function (ev, group) {
+        ev.stopPropagation();
+        const { currentMinimum, limit } = ev.detail;
+        this.trigger_up('load', {
+            id: group.id,
+            limit: limit,
+            offset: currentMinimum - 1,
+            on_success: reloadedGroup => {
+                Object.assign(group, reloadedGroup);
+                this._renderView();
+            },
+        });
+    },
     /**
      * @private
      * @param {MouseEvent} ev
@@ -1246,7 +1272,6 @@ var ListRenderer = BasicRenderer.extend({
      */
     _onToggleGroup: function (ev) {
         ev.preventDefault();
-        ev.stopPropagation();
         var group = $(ev.currentTarget).closest('tr').data('group');
         if (group.count) {
             this.trigger_up('toggle_group', {
diff --git a/addons/web/static/src/js/views/list/list_view.js b/addons/web/static/src/js/views/list/list_view.js
index bb6dfed8116..5845375fd70 100644
--- a/addons/web/static/src/js/views/list/list_view.js
+++ b/addons/web/static/src/js/views/list/list_view.js
@@ -33,7 +33,7 @@ var ListView = BasicView.extend({
      *
      * @param {Object} viewInfo
      * @param {Object} params
-     * @param {boolean} params.hasSidebar
+     * @param {boolean} params.hasActionMenus
      * @param {boolean} [params.hasSelectors=true]
      */
     init: function (viewInfo, params) {
@@ -58,7 +58,7 @@ var ListView = BasicView.extend({
 
         this.controllerParams.activeActions.export_xlsx = this.arch.attrs.export_xlsx ? !!JSON.parse(this.arch.attrs.export_xlsx): true;
         this.controllerParams.editable = editable;
-        this.controllerParams.hasSidebar = params.hasSidebar;
+        this.controllerParams.hasActionMenus = params.hasActionMenus;
         this.controllerParams.toolbarActions = viewInfo.toolbar;
         this.controllerParams.mode = editable ? 'edit' : 'readonly';
         this.controllerParams.selectedRecords = selectedRecords;
@@ -101,7 +101,7 @@ var ListView = BasicView.extend({
         var params = this._super.apply(this, arguments);
         var inDialog = action.target === 'new';
         var inline = action.target === 'inline';
-        params.hasSidebar = !inDialog && !inline;
+        params.hasActionMenus = !inDialog && !inline;
         return params;
     },
     /**
diff --git a/addons/web/static/src/js/views/pivot/pivot_controller.js b/addons/web/static/src/js/views/pivot/pivot_controller.js
index c54c6affedc..ee37aba3ce5 100644
--- a/addons/web/static/src/js/views/pivot/pivot_controller.js
+++ b/addons/web/static/src/js/views/pivot/pivot_controller.js
@@ -85,25 +85,44 @@ odoo.define('web.PivotController', function (require) {
          * add listeners on it.
          * Set this.$buttons with the produced jQuery element
          *
+         * @override
          * @param {jQuery} [$node] a jQuery node where the rendered buttons should
          *   be inserted. $node may be undefined, in which case the PivotView
          *   does nothing
          */
         renderButtons: function ($node) {
+            const context = {
+                measures: Object.entries(this.measures)
+                    .filter(x => x[0] !== '__count')
+                    .sort((a, b) => a[1].string.toLowerCase() > b[1].string.toLowerCase() ? 1 : -1),
+            };
+            this.$buttons = $(QWeb.render('PivotView.buttons', context));
+            this.$buttons.click(this._onButtonClick.bind(this));
+            this.$buttons.find('button').tooltip();
             if ($node) {
-                const context = {
-                    measures: Object.entries(this.measures)
-                        .filter(x => x[0] !== '__count')
-                        .sort((a, b) => a[1].string.toLowerCase() > b[1].string.toLowerCase() ? 1 : -1),
-                };
-                this.$buttons = $(QWeb.render('PivotView.buttons', context));
-                this.$buttons.click(this._onButtonClick.bind(this));
-                this.$buttons.find('button').tooltip();
-
                 this.$buttons.appendTo($node);
-                this._updateButtons();
             }
         },
+        /**
+         * @override
+         */
+        updateButtons: function () {
+            if (!this.$buttons) {
+                return;
+            }
+            const state = this.model.get({ raw: true });
+            Object.entries(this.measures).forEach(elt => {
+                const name = elt[0];
+                const isSelected = state.measures.includes(name);
+                this.$buttons.find('.dropdown-item[data-field="' + name + '"]')
+                    .toggleClass('selected', isSelected);
+
+            });
+            const noDataDisplayed = !state.hasData || !state.measures.length;
+            this.$buttons.find('.o_pivot_flip_button').prop('disabled', noDataDisplayed);
+            this.$buttons.find('.o_pivot_expand_button').prop('disabled', noDataDisplayed);
+            this.$buttons.find('.o_pivot_download').prop('disabled', noDataDisplayed);
+        },
 
         //--------------------------------------------------------------------------
         // Private
@@ -131,34 +150,6 @@ odoo.define('web.PivotController', function (require) {
                 error: (error) => this.call('crash_manager', 'rpc_error', error),
             });
         },
-        /**
-         * @override
-         * @private
-         */
-        _update: function () {
-            this._updateButtons();
-            return this._super.apply(this, arguments);
-        },
-        /**
-         * @private
-         */
-        _updateButtons: function () {
-            if (!this.$buttons) {
-                return;
-            }
-            const state = this.model.get({ raw: true });
-            Object.entries(this.measures).forEach(elt => {
-                const name = elt[0];
-                const isSelected = state.measures.includes(name);
-                this.$buttons.find('.dropdown-item[data-field="' + name + '"]')
-                    .toggleClass('selected', isSelected);
-
-            });
-            const noDataDisplayed = !state.hasData || !state.measures.length;
-            this.$buttons.find('.o_pivot_flip_button').prop('disabled', noDataDisplayed);
-            this.$buttons.find('.o_pivot_expand_button').prop('disabled', noDataDisplayed);
-            this.$buttons.find('.o_pivot_download').prop('disabled', noDataDisplayed);
-        },
 
         //--------------------------------------------------------------------------
         // Handlers
diff --git a/addons/web/static/src/js/views/pivot/pivot_model.js b/addons/web/static/src/js/views/pivot/pivot_model.js
index 67122ceb40d..8e4f92a4d75 100644
--- a/addons/web/static/src/js/views/pivot/pivot_model.js
+++ b/addons/web/static/src/js/views/pivot/pivot_model.js
@@ -530,18 +530,15 @@ var PivotModel = AbstractModel.extend({
      * @param {boolean} [params.compare=false]
      * @param {Object} params.context
      * @param {Object} params.fields
-     * @param {Array[]} [params.comparisonTimeRange=[]]
      * @param {string[]} [params.groupedBy]
-     * @param {Array[]} [params.timeRange=[]]
      * @param {string[]} params.colGroupBys
      * @param {Array[]} params.domain
      * @param {string[]} params.measures
      * @param {string[]} params.rowGroupBys
-     * @param {string} [params.comparisonTimeRangeDescription=""]
      * @param {string} [params.default_order]
-     * @param {string} [params.timeRangeDescription=""]
      * @param {string} params.modelName
      * @param {Object[]} params.groupableFields
+     * @param {Object} params.timeRanges
      * @returns {Promise}
      */
     load: function (params) {
@@ -556,19 +553,14 @@ var PivotModel = AbstractModel.extend({
             expandedRowGroupBys: [],
             expandedColGroupBys: [],
             domain: this.initialDomain,
-            timeRange: params.timeRange || [],
-            timeRangeDescription: params.timeRangeDescription || "",
-            comparisonTimeRange: params.comparisonTimeRange || [],
-            comparisonTimeRangeDescription: params.comparisonTimeRangeDescription || "",
-            compare: params.compare || false,
             context: _.extend({}, session.user_context, params.context),
             groupedBy: params.context.pivot_row_groupby || params.groupedBy,
             colGroupBys: params.context.pivot_column_groupby || params.colGroupBys,
             measures: this._processMeasures(params.context.pivot_measures) || params.measures,
+            timeRanges: params.timeRanges,
         };
+        this._computeDerivedParams();
 
-        this.data.domains = this._getDomains();
-        this.data.origins = this._getOrigins();
         this.data.rowGroupBys = !_.isEmpty(this.data.groupedBy) ? this.data.groupedBy : this.initialRowGroupBys;
 
         var defaultOrder = params.default_order && params.default_order.split(' ');
@@ -588,14 +580,11 @@ var PivotModel = AbstractModel.extend({
      * @param {Object} params
      * @param {boolean} [params.compare=false]
      * @param {Object} params.context
-     * @param {Array[]} [params.comparisonTimeRange=[]]
      * @param {string[]} [params.groupedBy]
-     * @param {Array[]} [params.timeRange=[]]
      * @param {Array[]} params.domain
      * @param {string[]} params.groupBy
      * @param {string[]} params.measures
-     * @param {string} [params.comparisonTimeRangeDescription=""]
-     * @param {string} [params.timeRangeDescription=""]
+     * @param {Object} [params.timeRanges]
      * @returns {Promise}
      */
     reload: function (handle, params) {
@@ -608,21 +597,6 @@ var PivotModel = AbstractModel.extend({
             this.data.groupedBy = params.context.pivot_row_groupby || this.data.groupedBy;
             this.data.measures = this._processMeasures(params.context.pivot_measures) || this.data.measures;
             this.defaultGroupedBy = this.data.groupedBy.length ? this.data.groupedBy : this.defaultGroupedBy;
-            var timeRangeMenuData = params.context.timeRangeMenuData;
-            if (timeRangeMenuData) {
-                this.data.timeRange = timeRangeMenuData.timeRange || [];
-                this.data.timeRangeDescription = timeRangeMenuData.timeRangeDescription || "";
-                this.data.comparisonTimeRange = timeRangeMenuData.comparisonTimeRange || [];
-                this.data.comparisonTimeRangeDescription = timeRangeMenuData.comparisonTimeRangeDescription || "";
-                this.data.compare = this.data.comparisonTimeRange.length > 0;
-            } else {
-                this.data.timeRange = [];
-                this.data.timeRangeDescription = "";
-                this.data.comparisonTimeRange = [];
-                this.data.comparisonTimeRangeDescription = "";
-                this.data.compare = false;
-                this.data.context = _.omit(this.data.context, 'timeRangeMenuData');
-            }
         }
         if ('domain' in params) {
             this.data.domain = params.domain;
@@ -633,9 +607,11 @@ var PivotModel = AbstractModel.extend({
         if ('groupBy' in params) {
             this.data.groupedBy = params.groupBy.length ? params.groupBy : this.defaultGroupedBy;
         }
+        if ('timeRanges' in params) {
+            this.data.timeRanges = params.timeRanges;
+        }
+        this._computeDerivedParams();
 
-        this.data.domains = this._getDomains();
-        this.data.origins = this._getOrigins();
         this.data.rowGroupBys = !_.isEmpty(this.data.groupedBy) ? this.data.groupedBy : this.initialRowGroupBys;
 
         if (!_.isEqual(oldRowGroupBys, self.data.rowGroupBys)) {
@@ -791,20 +767,6 @@ var PivotModel = AbstractModel.extend({
             return values[0];
         }
     },
-    /**
-     * Returns the principal domains used by the pivot model to fetch data.
-     * The domains represent two main groups of records.
-     *
-     * @private
-     * @returns {Array[][]}
-     */
-    _getDomains: function () {
-        var domains = [this.data.domain.concat(this.data.timeRange)];
-        if (this.data.compare) {
-            domains.push(this.data.domain.concat(this.data.comparisonTimeRange));
-        }
-        return domains;
-    },
     /**
      * Returns the rowGroupBys and colGroupBys arrays that
      * are actually used by the pivot view internally
@@ -1083,19 +1045,6 @@ var PivotModel = AbstractModel.extend({
 
         return originRow;
     },
-    /**
-     * Create an array with the origin descriptions.
-     *
-     * @private
-     * @returns {string[]}
-     */
-    _getOrigins: function () {
-        var origins = [this.data.timeRangeDescription || ""];
-        if (this.data.compare) {
-            origins.push(this.data.comparisonTimeRangeDescription);
-        }
-        return origins;
-    },
 
     /**
      * Get the selection needed to display the group by dropdown
@@ -1437,6 +1386,26 @@ var PivotModel = AbstractModel.extend({
             });
         }
     },
+    /**
+     * Determine this.data.domains and this.data.origins from
+     * this.data.domain and this.data.timeRanges;
+     *
+     * @private
+     */
+    _computeDerivedParams: function () {
+        const { range, rangeDescription, comparisonRange, comparisonRangeDescription } = this.data.timeRanges;
+        if (range) {
+            this.data.domains = [this.data.domain.concat(range)];
+            this.data.origins = [rangeDescription];
+            if (comparisonRange) {
+                this.data.domains.push(this.data.domain.concat(comparisonRange));
+                this.data.origins.push(comparisonRangeDescription);
+            }
+        } else {
+            this.data.domains = [this.data.domain];
+            this.data.origins = [""];
+        }
+    },
     /**
      * Make any group in tree a leaf if it was a leaf in oldTree.
      *
diff --git a/addons/web/static/src/js/views/pivot/pivot_view.js b/addons/web/static/src/js/views/pivot/pivot_view.js
index bd259d9d0aa..1fca1e14487 100644
--- a/addons/web/static/src/js/views/pivot/pivot_view.js
+++ b/addons/web/static/src/js/views/pivot/pivot_view.js
@@ -18,8 +18,8 @@ odoo.define('web.PivotView', function (require) {
     const _t = core._t;
     const _lt = core._lt;
 
-    const controlPanelViewParameters = require('web.controlPanelViewParameters');
-    const GROUPABLE_TYPES = controlPanelViewParameters.GROUPABLE_TYPES;
+    const searchUtils = require('web.searchUtils');
+    const GROUPABLE_TYPES = searchUtils.GROUPABLE_TYPES;
 
     const PivotView = AbstractView.extend({
         display_name: _lt('Pivot'),
@@ -141,7 +141,7 @@ odoo.define('web.PivotView', function (require) {
          */
         getRenderer(parent, state) {
             state = Object.assign(state || {}, this.rendererParams);
-            return new RendererWrapper(null, this.config.Renderer, state);
+            return new RendererWrapper(parent, this.config.Renderer, state);
         },
     });
 
diff --git a/addons/web/static/src/js/views/qweb/qweb_view.js b/addons/web/static/src/js/views/qweb/qweb_view.js
index 0c858b5eb6c..21ad867c286 100644
--- a/addons/web/static/src/js/views/qweb/qweb_view.js
+++ b/addons/web/static/src/js/views/qweb/qweb_view.js
@@ -91,16 +91,21 @@ var Renderer = AbstractRenderer.extend({
 var Controller = AbstractController.extend({
     events: _.extend({}, AbstractController.prototype.events, {
         'click [type="toggle"]': '_onLazyToggle',
+        'click [type="action"]' : '_onActionClicked',
     }),
 
     init: function () {
         this._super.apply(this, arguments);
-        this._$buttons = $('<nav>').on('click', '[type="action"]', this.proxy('_onActionClicked'));
     },
 
+    /**
+     * @override
+     */
     renderButtons: function ($node) {
-        this._super($node);
-        $node.append(this._$buttons);
+        this.$buttons = $('<nav/>');
+        if ($node) {
+            $node.append(this.$buttons);
+        }
     },
     _update: function () {
         var self = this;
@@ -108,7 +113,7 @@ var Controller = AbstractController.extend({
             // move control panel buttons from the view to the control panel
             // area
             var $cp_buttons = self.renderer.$('nav.o_qweb_cp_buttons');
-            $cp_buttons.children().appendTo(self._$buttons.empty());
+            $cp_buttons.children().appendTo(self.$buttons.empty());
             $cp_buttons.remove();
         });
     },
diff --git a/addons/web/static/src/js/views/search_panel.js b/addons/web/static/src/js/views/search_panel.js
index 4f8c42325db..590d52e4941 100644
--- a/addons/web/static/src/js/views/search_panel.js
+++ b/addons/web/static/src/js/views/search_panel.js
@@ -165,27 +165,26 @@ var SearchPanel = Widget.extend({
      * @params {string} viewType the type of the current view (e.g. 'kanban')
      * @returns {Object|undefined}
      */
-    computeSearchPanelParams: function (viewInfo, viewType) {
+    computeSearchPanelParams: function (arch, fields, viewType) {
         var searchPanelSections;
         var classes;
-        if (viewInfo) {
-            var arch = viewUtils.parseArch(viewInfo.arch);
+        if (arch && fields) {
             viewType = viewType === 'list' ? 'tree' : viewType;
-            arch.children.forEach(function (node) {
-                if (node.tag === 'searchpanel') {
-                    var attrs = node.attrs;
-                    var viewTypes = defaultViewTypes;
-                    if (attrs.view_types) {
-                        viewTypes = attrs.view_types.split(',');
-                    }
-                    if (attrs.class) {
-                        classes = attrs.class.split(' ');
-                    }
-                    if (viewTypes.indexOf(viewType) !== -1) {
-                        searchPanelSections = _processSearchPanelNode(node, viewInfo.fields);
-                    }
+            arch  = viewUtils.parseArch(arch);
+            const searchPanelNode = arch.children.find(child => child.tag === 'searchpanel');
+            if (searchPanelNode) {
+                var attrs = searchPanelNode.attrs;
+                var viewTypes = defaultViewTypes;
+                if (attrs.view_types) {
+                    viewTypes = attrs.view_types.split(',');
                 }
-            });
+                if (attrs.class) {
+                    classes = attrs.class.split(' ');
+                }
+                if (viewTypes.includes(viewType)) {
+                    searchPanelSections = _processSearchPanelNode(searchPanelNode, fields);
+                }
+            }
         }
         return {
             sections: searchPanelSections,
diff --git a/addons/web/static/src/js/views/view_dialogs.js b/addons/web/static/src/js/views/view_dialogs.js
index 47e3a5309d9..6f00b60d2a4 100644
--- a/addons/web/static/src/js/views/view_dialogs.js
+++ b/addons/web/static/src/js/views/view_dialogs.js
@@ -220,6 +220,7 @@ var FormViewDialog = ViewDialog.extend({
                             callbacks: [{widget: self.form_view}],
                             in_DOM: true,
                         });
+                        self.form_view.updateButtons();
                     });
                     return _super();
                 });
diff --git a/addons/web/static/src/js/widgets/pie_chart.js b/addons/web/static/src/js/widgets/pie_chart.js
index a9b0bc01e45..7cfc3fdacce 100644
--- a/addons/web/static/src/js/widgets/pie_chart.js
+++ b/addons/web/static/src/js/widgets/pie_chart.js
@@ -41,7 +41,9 @@ var PieChart = Widget.extend({
 
         this.subViewParams = {
             modelName: record.model,
+            withButtons: false,
             withControlPanel: false,
+            withSearchPanel: false,
             isEmbedded: true,
             mode: 'pie',
         };
@@ -49,6 +51,7 @@ var PieChart = Widget.extend({
             context: pieChartContext,
             domain: domain,
             groupBy: [],
+            timeRanges: {},
         };
 
         this.viewInfo = {
diff --git a/addons/web/static/src/xml/debug.xml b/addons/web/static/src/xml/debug.xml
index 4a53168c84b..0caf3da010e 100644
--- a/addons/web/static/src/xml/debug.xml
+++ b/addons/web/static/src/xml/debug.xml
@@ -59,7 +59,7 @@
             <a role="menuitem" href="#" data-action="edit" data-model="ir.ui.view" t-att-data-id="view.fieldsView.view_id" class="dropdown-item">
                 Edit View: <t t-esc="view.displayName"/>
             </a>
-            <a t-if="controlPanelView and controlPanelView.$el.is(':visible')" role="menuitem" href="#" data-action="edit" data-model="ir.ui.view" t-att-data-id="action.controlPanelFieldsView.view_id" class="dropdown-item">Edit ControlPanelView</a>
+            <a t-if="withControlPanel" role="menuitem" href="#" data-action="edit" data-model="ir.ui.view" t-att-data-id="action.controlPanelFieldsView.view_id" class="dropdown-item">Edit ControlPanelView</a>
         </t>
     </t>
 </t>

From e68d3bb09d1f844387ceb20aa76022ace48507d9 Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Wed, 11 Mar 2020 09:38:29 +0000
Subject: [PATCH 08/10] [REF] *: Adapt all modules to new control panel

Adaptation of the code throughout all modules to properly instantiate the newly
refactored control panel and update it accordingly.

Part of task 2196029

Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
---
 .../static/src/js/barcode_form_view.js        |  79 +++--
 .../src/js/action_manager_board_action.js     |   2 +-
 .../board/static/src/js/add_to_board_menu.js  | 315 +++++++-----------
 addons/board/static/src/js/board_view.js      |  40 ++-
 addons/board/static/src/scss/dashboard.scss   |   3 +-
 addons/board/static/src/xml/board.xml         |  30 +-
 addons/google_drive/__manifest__.py           |   1 +
 addons/google_drive/static/src/js/gdrive.js   | 174 +++++-----
 addons/google_drive/static/src/xml/gdrive.xml |  14 +
 .../src/js/add_to_google_spreadsheet_menu.js  | 147 +++-----
 .../static/src/xml/addtospreadsheet.xml       |   8 +-
 .../mail/static/src/js/custom_filter_item.js  |  22 ++
 addons/mail/static/src/js/discuss.js          |  83 ++---
 addons/mail/static/src/js/filter_menu.js      |  16 -
 .../js/views/activity/activity_controller.js  |   9 +-
 addons/mail/views/mail_templates.xml          |   2 +-
 addons/mrp/static/src/js/mrp_bom_report.js    |   4 +-
 .../static/src/js/product_pricelist_report.js |  30 +-
 .../js/inventory_report_list_controller.js    |   3 +-
 .../static/src/js/theme_preview_form.js       |  30 +-
 .../static/src/js/theme_preview_kanban.js     |  27 +-
 21 files changed, 475 insertions(+), 564 deletions(-)
 create mode 100644 addons/google_drive/static/src/xml/gdrive.xml
 create mode 100644 addons/mail/static/src/js/custom_filter_item.js
 delete mode 100644 addons/mail/static/src/js/filter_menu.js

diff --git a/addons/barcodes/static/src/js/barcode_form_view.js b/addons/barcodes/static/src/js/barcode_form_view.js
index 08463f2b997..82ca913d752 100644
--- a/addons/barcodes/static/src/js/barcode_form_view.js
+++ b/addons/barcodes/static/src/js/barcode_form_view.js
@@ -88,60 +88,69 @@ FormController.include({
     /**
      * @private
      */
-    _barcodePagerFirst: function () {
-        var self = this;
-        return this.mutex.exec(function () {}).then(function () {
-            if (!self.pager) {
-                self.do_warn(_t('Error: Pager not available'));
-                return;
-            }
-            self.pager.updateState({
-                current_min: 1,
-            }, {notifyChange: true});
-        });
+    _barcodePagerFirst: async function () {
+        return this._updatePage(() => 1);
     },
     /**
      * @private
      */
-    _barcodePagerLast: function () {
-        var self = this;
-        return this.mutex.exec(function () {}).then(function () {
-            if (!self.pager) {
-                self.do_warn(_t('Error: Pager not available'));
-                return;
-            }
-            var state = self.model.get(self.handle, {raw: true});
-            self.pager.updateState({
-                current_min: state.count,
-            }, {notifyChange: true});
-        });
+    _barcodePagerLast: async function () {
+        return this._updatePage((min, state) => state.count);
     },
     /**
      * @private
      */
     _barcodePagerNext: function () {
-        var self = this;
-        return this.mutex.exec(function () {}).then(function () {
-            if (!self.pager) {
-                self.do_warn(_t('Error: Pager not available'));
-                return;
+        return this._updatePage((min, state) => {
+            min += 1;
+            if (min > state.count) {
+                min = 1;
             }
-            self.pager.next();
+            return min;
         });
     },
     /**
      * @private
      */
     _barcodePagerPrevious: function () {
-        var self = this;
-        return this.mutex.exec(function () {}).then(function () {
-            if (!self.pager) {
-                self.do_warn(_t('Error: Pager not available'));
-                return;
+        return this._updatePage((min, state) => {
+            min -= 1;
+            if (min < 1) {
+                min = state.count;
             }
-            self.pager.previous();
+            return min;
         });
     },
+    /**
+     * Change the current minimum value of the pager using provided function.
+     * This function will be given the current minimum and state and must return
+     * the updated value.
+     *
+     * @private
+     * @param {Function(currentMin: Number, state: Object)} updater
+     */
+    _updatePage: async function (updater) {
+        await this.mutex.exec(() => {});
+        const state = this.model.get(this.handle, { raw: true });
+        const pagingInfo = this._getPagingInfo(state);
+        if (!pagingInfo) {
+            return this.do_warn(_t('Error: Pager not available'));
+        }
+        const currentMinimum = updater(pagingInfo.currentMinimum, state);
+        const limit = pagingInfo.limit;
+        const reloadParams = state.groupedBy && state.groupedBy.length ? {
+                groupsLimit: limit,
+                groupsOffset: currentMinimum - 1,
+            } : {
+                limit,
+                offset: currentMinimum - 1,
+            };
+        await this.reload(reloadParams);
+        // reset the scroll position to the top on page changed only
+        if (state.limit === limit) {
+            this.trigger_up('scrollTo', { top: 0 });
+        }
+    },
     /**
      * Returns true iff the given barcode matches the given record (candidate).
      *
diff --git a/addons/board/static/src/js/action_manager_board_action.js b/addons/board/static/src/js/action_manager_board_action.js
index 3036ac0f328..05414572311 100644
--- a/addons/board/static/src/js/action_manager_board_action.js
+++ b/addons/board/static/src/js/action_manager_board_action.js
@@ -21,8 +21,8 @@ ActionManager.include({
         if (action.res_model === 'board.board' && action.view_mode === 'form') {
             action.target = 'inline';
             _.extend(action.flags, {
+                hasActionMenus: false,
                 hasSearchView: false,
-                hasSidebar: false,
                 headless: true,
             });
         }
diff --git a/addons/board/static/src/js/add_to_board_menu.js b/addons/board/static/src/js/add_to_board_menu.js
index 57e98ca87d7..dd5158c6d50 100644
--- a/addons/board/static/src/js/add_to_board_menu.js
+++ b/addons/board/static/src/js/add_to_board_menu.js
@@ -1,211 +1,154 @@
 odoo.define('board.AddToBoardMenu', function (require) {
-"use strict";
+    "use strict";
 
-var ActionManager = require('web.ActionManager');
-var Context = require('web.Context');
-var core = require('web.core');
-var Domain = require('web.Domain');
-var favorites_submenus_registry = require('web.favorites_submenus_registry');
-var pyUtils = require('web.py_utils');
-var Widget = require('web.Widget');
+    const Context = require('web.Context');
+    const Domain = require('web.Domain');
+    const DropdownMenuItem = require('web.DropdownMenuItem');
+    const FavoriteMenu = require('web.FavoriteMenu');
+    const pyUtils = require('web.py_utils');
+    const { sprintf } = require('web.utils');
+    const { useAutofocus } = require('web.custom_hooks');
 
-var _t = core._t;
-var QWeb = core.qweb;
-
-var AddToBoardMenu = Widget.extend({
-    events: _.extend({}, Widget.prototype.events, {
-        'click .o_add_to_board.o_menu_header': '_onMenuHeaderClick',
-        'click .o_add_to_board_confirm_button': '_onAddToBoardConfirmButtonClick',
-        'click .o_add_to_board_input': '_onAddToBoardInputClick',
-        'keyup .o_add_to_board_input': '_onKeyUp',
-    }),
-    /**
-     * @override
-     * @param {Object} params
-     * @param {Object} params.action an ir.actions description
-     */
-    init: function (parent, params) {
-        this._super(parent);
-        this.action = params.action;
-        this.isOpen = false;
-    },
-    /**
-     * @override
-     */
-    start: function () {
-        if (this.action.id && this.action.type === 'ir.actions.act_window') {
-            this._render();
-        }
-        return this._super.apply(this, arguments);
-    },
-
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
+    const { useState } = owl.hooks;
 
     /**
-     * Closes the menu and render it.
+     * 'Add to board' menu
      *
+     * Component consisiting of a toggle button, a text input and an 'Add' button.
+     * The first button is simply used to toggle the component and will determine
+     * whether the other elements should be rendered.
+     * The input will be given the name (or title) of the view that will be added.
+     * Finally, the last button will send the name as well as some of the action
+     * properties to the server to add the current view (and its context) to the
+     * user's dashboard.
+     * This component is only available in actions of type 'ir.actions.act_window'.
+     * @extends DropdownMenuItem
      */
-    closeMenu: function () {
-        this.isOpen = false;
-        this._render();
-    },
+    class AddToBoardMenu extends DropdownMenuItem {
+        constructor() {
+            super(...arguments);
 
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
+            this.interactive = true;
+            this.state = useState({
+                name: this.env.action.name || "",
+                open: false,
+            });
 
-    /**
-     * This is the main function for actually saving the dashboard.  This method
-     * is supposed to call the route /board/add_to_dashboard with proper
-     * information.
-     *
-     * @private
-     * @returns {Promise}
-     */
-    _addToBoard: function () {
-        var self = this;
-        var searchQuery;
-        // TO DO: for now the domains in query are evaluated.
-        // This should be changed I think.
-        this.trigger_up('get_search_query', {
-            callback: function (query) {
-                searchQuery = query;
-            }
-        });
-        // TO DO: replace direct reference to action manager, controller, and currentAction in code below
-
-        // AAB: trigger_up an event that will be intercepted by the controller,
-        // as soon as the controller is the parent of the control panel
-        var actionManager = this.findAncestor(function (ancestor) {
-            return ancestor instanceof ActionManager;
-        });
-        var controller = actionManager.getCurrentController();
-
-        var context = new Context(this.action.context);
-        context.add(searchQuery.context);
-        context.add({
-            group_by: searchQuery.groupBy,
-            orderedBy: searchQuery.orderedBy,
-        });
-
-        this.trigger_up('get_controller_query_params', {
-            callback: function (controllerQueryParams) {
-                var queryContext = controllerQueryParams.context;
-                var allContext = _.extend(
-                    _.omit(controllerQueryParams, ['context']),
-                    queryContext
-                );
-                context.add(allContext);
-            }
-        });
-
-        var domain = new Domain(this.action.domain || []);
-        domain = Domain.prototype.normalizeArray(domain.toArray().concat(searchQuery.domain));
-
-        var evalutatedContext = pyUtils.eval('context', context);
-        for (var key in evalutatedContext) {
-            if (evalutatedContext.hasOwnProperty(key) && /^search_default_/.test(key)) {
-                delete evalutatedContext[key];
-            }
+            useAutofocus();
         }
-        evalutatedContext.dashboard_merge_domains_contexts = false;
 
-        var name = this.$input.val();
+        //---------------------------------------------------------------------
+        // Private
+        //---------------------------------------------------------------------
 
-        this.closeMenu();
+        /**
+         * This is the main function for actually saving the dashboard.  This method
+         * is supposed to call the route /board/add_to_dashboard with proper
+         * information.
+         * @private
+         */
+        async _addToBoard() {
+            const searchQuery = this.env.controlPanelModel.getQuery();
+            const context = new Context(this.env.action.context);
+            context.add(searchQuery.context);
+            context.add({
+                group_by: searchQuery.groupBy,
+                orderedBy: searchQuery.orderedBy,
+            });
+            if (searchQuery.timeRanges && searchQuery.timeRanges.hasOwnProperty('fieldName')) {
+                const { fieldName: field, range, comparisonRange } = searchQuery.timeRanges;
+                context.add({
+                    time_ranges : { field, range, comparisonRange },
+                });
+            }
+            let controllerQueryParams;
+            this.env.controlPanelModel.trigger('get-controller-query-params', params => {
+                controllerQueryParams = params || {};
+            });
+            controllerQueryParams.context = controllerQueryParams.context || {};
+            const queryContext = controllerQueryParams.context;
+            delete controllerQueryParams.context;
+            context.add(Object.assign(controllerQueryParams, queryContext));
 
-        return self._rpc({
+            const domainArray = new Domain(this.env.action.domain || []);
+            const domain = Domain.prototype.normalizeArray(domainArray.toArray().concat(searchQuery.domain));
+
+            const evalutatedContext = context.eval();
+            for (const key in evalutatedContext) {
+                if (evalutatedContext.hasOwnProperty(key) && /^search_default_/.test(key)) {
+                    delete evalutatedContext[key];
+                }
+            }
+            evalutatedContext.dashboard_merge_domains_contexts = false;
+
+            Object.assign(this.state, {
+                name: this.env.action.name || "",
+                open: false,
+            });
+
+            const result = await this.rpc({
                 route: '/board/add_to_dashboard',
                 params: {
-                    action_id: self.action.id || false,
+                    action_id: this.env.action.id || false,
                     context_to_save: evalutatedContext,
                     domain: domain,
-                    view_mode: controller.viewType,
-                    name: name,
+                    view_mode: this.env.view.type,
+                    name: this.state.name,
                 },
-            })
-            .then(function (r) {
-                if (r) {
-                    self.do_notify(
-                        _.str.sprintf(_t("'%s' added to dashboard"), name),
-                        _t('Please refresh your browser for the changes to take effect.')
-                    );
-                } else {
-                    self.do_warn(_t("Could not add filter to dashboard"));
-                }
             });
-    },
-    /**
-     * Renders and focuses the unique input if it is visible.
-     *
-     * @private
-     */
-    _render: function () {
-        var $el = QWeb.render('AddToBoardMenu', {widget: this});
-        this._replaceElement($el);
-        if (this.isOpen) {
-            this.$input = this.$('.o_add_to_board_input');
-            this.$input.val(this.action.name);
-            this.$input.focus();
+            if (result) {
+                this.env.services.notification.notify({
+                    title: sprintf(this.env._t("'%s' added to dashboard"), this.state.name),
+                    message: this.env._t("Please refresh your browser for the changes to take effect."),
+                    type: 'warning',
+                });
+            } else {
+                this.env.services.notification.notify({
+                    message: this.env._t("Could not add filter to dashboard"),
+                    type: 'danger',
+                });
+            }
         }
-    },
-    /**
-     * Hides and displays the submenu which allows adding custom filters.
-     *
-     * @private
-     */
-    _toggleMenu: function () {
-        this.isOpen = !this.isOpen;
-        this._render();
-    },
 
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
+        //---------------------------------------------------------------------
+        // Handlers
+        //---------------------------------------------------------------------
 
-    /**
-     * @private
-     * @param {jQueryEvent} event
-     */
-    _onAddToBoardInputClick: function (event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this.$input.focus();
-    },
-    /**
-     * @private
-     * @param {jQueryEvent} event
-     */
-    _onAddToBoardConfirmButtonClick: function (event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this._addToBoard();
-    },
-    /**
-     * @private
-     * @param {jQueryEvent} event
-     */
-    _onKeyUp: function (event) {
-        if (event.which === $.ui.keyCode.ENTER) {
-            this._addToBoard();
+        /**
+         * @private
+         * @param {KeyboardEvent} ev
+         */
+        _onInputKeydown(ev) {
+            switch (ev.key) {
+                case 'Enter':
+                    ev.preventDefault();
+                    this._addToBoard();
+                    break;
+                case 'Escape':
+                    // Gives the focus back to the component.
+                    ev.preventDefault();
+                    ev.target.blur();
+                    break;
+            }
         }
-    },
-    /**
-     * @private
-     * @param {jQueryEvent} event
-     */
-    _onMenuHeaderClick: function (event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this._toggleMenu();
-    },
-
-});
-
-favorites_submenus_registry.add('add_to_board_menu', AddToBoardMenu, 10);
-
-return AddToBoardMenu;
 
+        //---------------------------------------------------------------------
+        // Static
+        //---------------------------------------------------------------------
+
+        /**
+         * @param {Object} env
+         * @returns {boolean}
+         */
+        static shouldBeDisplayed(env) {
+            return env.action.type === 'ir.actions.act_window';
+        }
+    }
+
+    AddToBoardMenu.props = {};
+    AddToBoardMenu.template = 'AddToBoardMenu';
+
+    FavoriteMenu.registry.add('add-to-board-menu', AddToBoardMenu, 10);
+
+    return AddToBoardMenu;
 });
diff --git a/addons/board/static/src/js/board_view.js b/addons/board/static/src/js/board_view.js
index ffdcfbeb7ed..fab64783073 100644
--- a/addons/board/static/src/js/board_view.js
+++ b/addons/board/static/src/js/board_view.js
@@ -42,10 +42,7 @@ var BoardController = FormController.extend({
      * @override
      */
     getTitle: function () {
-        if (this.inDashboard) {
-            return _t("My Dashboard");
-        }
-        return this._super.apply(this, arguments);
+        return _t("My Dashboard");
     },
 
     //--------------------------------------------------------------------------
@@ -93,12 +90,6 @@ var BoardController = FormController.extend({
         });
         dialog.open();
     },
-    /**
-     * @private
-     */
-    _onEnableDashboard: function () {
-        this.inDashboard = true;
-    },
     /**
      * We need to intercept switch_view event coming from sub views, because we
      * don't actually want to switch view in dashboard, we want to do a
@@ -255,6 +246,7 @@ var BoardRenderer = FormRenderer.extend({
                 var rawContext = new Context(action.context, evalContext, {lang: session.user_context.lang});
                 var context = pyUtils.eval('context', rawContext, evalContext);
                 var domain = params.domain || pyUtils.eval('domain', action.domain || '[]', action.context);
+
                 action.context = context;
                 action.domain = domain;
                 var viewType = params.viewType || action.views[0][1];
@@ -265,17 +257,32 @@ var BoardRenderer = FormRenderer.extend({
                            .then(function (viewsInfo) {
                     var viewInfo = viewsInfo[viewType];
                     var View = viewRegistry.get(viewType);
+
+                    const searchQuery = {
+                        context: context,
+                        domain: domain,
+                        groupBy: typeof context.group_by === 'string' && context.group_by ?
+                                    [context.group_by] :
+                                    context.group_by || [],
+                        orderedBy: context.orderedBy || [],
+                    };
+
+                    if (['pivot', 'dashboard', 'graph', 'cohort'].includes(viewType)) {
+                        if (context.time_ranges) {
+                            const { field: fieldName, range, comparisonRange } = context.time_ranges;
+                            searchQuery.timeRanges = { fieldName, range, comparisonRange };
+                        } else {
+                            searchQuery.timeRanges = {};
+                        }
+                    }
+
                     var view = new View(viewInfo, {
                         action: action,
                         hasSelectors: false,
                         modelName: action.res_model,
-                        searchQuery: {
-                            context: context,
-                            domain: domain,
-                            groupBy: typeof context.group_by === 'string' && context.group_by ? [context.group_by] : context.group_by || [],
-                            orderedBy: context.orderedBy || [],
-                        },
+                        searchQuery,
                         withControlPanel: false,
+                        withSearchPanel: false,
                     });
                     return view.getController(self).then(function (controller) {
                         self._boardFormViewIDs[controller.handle] = _.first(
@@ -300,7 +307,6 @@ var BoardRenderer = FormRenderer.extend({
         // this function has a side effect.  This is ok because we assume that
         // once we have a '<board>' tag, we are in a special dashboard mode.
         this.$el.addClass('o_dashboard');
-        this.trigger_up('enable_dashboard');
 
         var hasAction = _.detect(node.children, function (column) {
             return _.detect(column.children,function (element){
diff --git a/addons/board/static/src/scss/dashboard.scss b/addons/board/static/src/scss/dashboard.scss
index 518849cde0a..69d1511761b 100644
--- a/addons/board/static/src/scss/dashboard.scss
+++ b/addons/board/static/src/scss/dashboard.scss
@@ -151,7 +151,8 @@
 // Favorites menu in control panel
 .o_add_to_dashboard {
     display: none; // hidden by default
-    @include o-search-options-dropdown-custom-item;
+    max-width: 250px;
+    width: auto;
 }
 
 @include media-breakpoint-down(sm) {
diff --git a/addons/board/static/src/xml/board.xml b/addons/board/static/src/xml/board.xml
index bd2ec9fe605..c81892aca07 100644
--- a/addons/board/static/src/xml/board.xml
+++ b/addons/board/static/src/xml/board.xml
@@ -80,15 +80,27 @@
     <iframe width="100%" frameborder="0" t-att-src="url"/>
 </t>
 
-<div t-name="AddToBoardMenu">
-    <button type="button" class="dropdown-item o_add_to_board o_menu_header">Add to my Dashboard</button>
-    <div t-if="widget.isOpen" class="dropdown-item-text o_add_to_board">
-        <input class="o_input o_add_to_board_input" type="text"/>
-    </div>
-    <div t-if="widget.isOpen"  class="dropdown-item-text o_add_to_board">
-        <button type="button" class="btn btn-primary o_add_to_board_confirm_button">Add</button>
-    </div>
-</div>
+<t t-name="AddToBoardMenu" owl="1">
+    <li class="o_menu_item o_add_to_board" role="menuitem">
+        <button type="button" class="dropdown-item"
+            t-ref="fallback-focus"
+            t-on-click="state.open = !state.open"
+            >
+            <t>Add to my Dashboard</t>
+        </button>
+        <t t-if="state.open">
+            <div class="dropdown-item-text">
+                <input type="text" class="o_input" autofocus=""
+                    t-model.trim="state.name"
+                    t-on-keydown="_onInputKeydown"
+                />
+            </div>
+            <div class="dropdown-item-text">
+                <button type="button" class="btn btn-primary" t-on-click="_addToBoard">Add</button>
+            </div>
+        </t>
+    </li>
+</t>
 
 <t t-name="SearchView.addtodashboard">
     <a href="#" class="dropdown-item o_add_to_dashboard_link o_closed_menu">Add to my Dashboard</a>
diff --git a/addons/google_drive/__manifest__.py b/addons/google_drive/__manifest__.py
index abcd383341b..e04750d507f 100644
--- a/addons/google_drive/__manifest__.py
+++ b/addons/google_drive/__manifest__.py
@@ -14,6 +14,7 @@
         'views/google_drive_templates.xml',
         'views/res_config_settings_views.xml',
     ],
+    'qweb': ['static/src/xml/*.xml'],
     'demo': [
         'data/google_drive_demo.xml'
     ],
diff --git a/addons/google_drive/static/src/js/gdrive.js b/addons/google_drive/static/src/js/gdrive.js
index 7ed0487e84d..03d8e798229 100644
--- a/addons/google_drive/static/src/js/gdrive.js
+++ b/addons/google_drive/static/src/js/gdrive.js
@@ -1,110 +1,90 @@
-odoo.define('google_drive.sidebar', function (require) {
-"use strict";
+odoo.define('google_drive.ActionMenus', function (require) {
+    "use strict";
 
-/**
- * The purpose of this file is to include the Sidebar widget to add Google
- * Drive related items.
- */
-
-var Sidebar = require('web.Sidebar');
-
-
-Sidebar.include({
-    // TO DO: clean me in master
-    /**
-     * @override
-     */
-    start: function () {
-        var def;
-        if (this.options.viewType === "form") {
-            def = this._addGoogleDocItems(this.env.model, this.env.activeIds[0]);
-        }
-        return Promise.resolve(def).then(this._super.bind(this));
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
+    const ActionMenus = require('web.ActionMenus');
+    const DropdownMenuItem = require('web.DropdownMenuItem');
 
     /**
-     * @private
-     * @param {string} model
-     * @param {integer} resID
-     * @returns {Promise}
+     * Google drive menu
+     *
+     * This component is actually a set of list items used to enrich the ActionMenus's
+     * "Action" dropdown list (@see ActionMenus). It will fetch
+     * the current user's google drive configuration and set the result as its
+     * items if any.
+     * @extends DropdownMenuItem
      */
-    _addGoogleDocItems: function (model, resID) {
-        var self = this;
-        if (!resID) {
-            return Promise.resolve();
-        }
-        var gdoc_item = _.indexOf(_.pluck(self.items.other, 'classname'), 'oe_share_gdoc');
-        if (gdoc_item !== -1) {
-            self.items.other.splice(gdoc_item, 1);
-        }
-        return this._rpc({
-            args: [this.env.model, resID],
-            context: this.env.context,
-            method: 'get_google_drive_config',
-            model: 'google.drive.config',
-        }).then(function (r) {
-            if (!_.isEmpty(r)) {
-                _.each(r, function (res) {
-                    var already_there = false;
-                    for (var i = 0; i < self.items.other.length; i++) {
-                        var item = self.items.other[i];
-                        if (item.classname === 'oe_share_gdoc' && item.label.indexOf(res.name) > -1) {
-                            already_there = true;
-                            break;
-                        }
-                    }
-                    if (!already_there) {
-                        self._addItems('other', [{
-                            callback: self._onGoogleDocItemClicked.bind(self, res.id),
-                            classname: 'oe_share_gdoc',
-                            config_id: res.id,
-                            label: res.name,
-                            res_id: resID,
-                            res_model: model,
-                        }]);
-                    }
-                });
+    class GoogleDriveMenu extends DropdownMenuItem {
+
+        async willStart() {
+            if (this.env.view.type === "form" && this.props.activeIds[0]) {
+                this.gdriveItems = await this._getGoogleDocItems();
+            } else {
+                this.gdriveItems = [];
             }
-        });
-    },
+        }
 
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
+        //---------------------------------------------------------------------
+        // Private
+        //---------------------------------------------------------------------
 
-    /**
-     * @private
-     * @param {integer} configID
-     * @param {integer} resID
-     */
-    _onGoogleDocItemClicked: function (configID) {
-        var self = this;
-        var resID = this.env.activeIds[0];
-        var domain = [['id', '=', configID]];
-        var fields = ['google_drive_resource_id', 'google_drive_client_id'];
-        this._rpc({
-            args: [domain, fields],
-            method: 'search_read',
-            model: 'google.drive.config',
-        }).then(function (configs) {
-            self._rpc({
-                args: [configID, resID, configs[0].google_drive_resource_id],
-                context: self.env.context,
+        /**
+         * @private
+         * @returns {Promise<Object[]>}
+         */
+        async _getGoogleDocItems() {
+            const items = await this.rpc({
+                args: [this.env.action.res_model, this.props.activeIds[0]],
+                context: this.props.context,
+                method: 'get_google_drive_config',
+                model: 'google.drive.config',
+            });
+            return items;
+        }
+
+        //---------------------------------------------------------------------
+        // Handlers
+        //---------------------------------------------------------------------
+
+        /**
+         * @private
+         * @param {number} itemId
+         * @returns {Promise}
+         */
+        async _onGoogleDocItemClick(itemId) {
+            const resID = this.props.activeIds[0];
+            const domain = [['id', '=', itemId]];
+            const fields = ['google_drive_resource_id', 'google_drive_client_id'];
+            const configs = await this.rpc({
+                args: [domain, fields],
+                method: 'search_read',
+                model: 'google.drive.config',
+            });
+            const url = await this.rpc({
+                args: [itemId, resID, configs[0].google_drive_resource_id],
+                context: this.props.context,
                 method: 'get_google_drive_url',
                 model: 'google.drive.config',
-            }).then(function (url) {
-                if (url){
-                    window.open(url, '_blank');
-                }
             });
-        });
-    },
+            if (url) {
+                window.open(url, '_blank');
+            }
+        }
+    }
+    GoogleDriveMenu.props = {
+        activeIds: Array,
+        context: Object,
+    };
+    GoogleDriveMenu.template = 'GoogleDriveMenu';
 
-});
+    ActionMenus.registry.add('google-drive-menu', {
+        Component: GoogleDriveMenu,
+        getProps(parentProps) {
+            return {
+                activeIds: parentProps.activeIds,
+                context: parentProps.context,
+            };
+        },
+    });
 
-return Sidebar;
+    return GoogleDriveMenu;
 });
diff --git a/addons/google_drive/static/src/xml/gdrive.xml b/addons/google_drive/static/src/xml/gdrive.xml
new file mode 100644
index 00000000000..48ce57494c9
--- /dev/null
+++ b/addons/google_drive/static/src/xml/gdrive.xml
@@ -0,0 +1,14 @@
+<templates>
+    <t t-name="GoogleDriveMenu" owl="1">
+        <li>
+            <ul class="o_embed_menu">
+                <li t-foreach="gdriveItems" t-as="gdriveItem" t-key="gdriveItem.id"
+                    role="menuitem"
+                    class="o_menu_item oe_share_gdoc_item dropdown-item"
+                    >
+                    <a href="#" t-esc="gdriveItem.name" t-on-click.prevent="_onGoogleDocItemClick(gdriveItem.id)"/>
+                </li>
+            </ul>
+        </li>
+    </t>
+</templates>
diff --git a/addons/google_spreadsheet/static/src/js/add_to_google_spreadsheet_menu.js b/addons/google_spreadsheet/static/src/js/add_to_google_spreadsheet_menu.js
index d0b608f4f36..4d8ac9552cc 100644
--- a/addons/google_spreadsheet/static/src/js/add_to_google_spreadsheet_menu.js
+++ b/addons/google_spreadsheet/static/src/js/add_to_google_spreadsheet_menu.js
@@ -1,102 +1,63 @@
 odoo.define('board.AddToGoogleSpreadsheetMenu', function (require) {
-"use strict";
+    "use strict";
 
-var ActionManager = require('web.ActionManager');
-var core = require('web.core');
-var data = require('web.data');
-var Domain = require('web.Domain');
-var favorites_submenus_registry = require('web.favorites_submenus_registry');
-var pyUtils = require('web.py_utils');
-var Widget = require('web.Widget');
-
-var QWeb = core.qweb;
-
-var AddToGoogleSpreadsheetMenu = Widget.extend({
-    events: _.extend({}, Widget.prototype.events, {
-        'click .add_to_spreadsheet': '_onAddToSpreadsheetClick',
-    }),
-    /**
-     * @override
-     * @param {Object} params
-     * @param {Object} params.action an ir.actions description
-     */
-    init: function (parent, params) {
-        this._super(parent);
-        this.action = params.action;
-    },
-    /**
-     * @override
-     */
-    start: function () {
-        if (this.action.type === 'ir.actions.act_window') {
-            this._render();
-        }
-        return this._super.apply(this, arguments);
-    },
-
-    //--------------------------------------------------------------------------
-    // Private
-    //--------------------------------------------------------------------------
+    const Domain = require('web.Domain');
+    const DropdownMenuItem = require('web.DropdownMenuItem');
+    const FavoriteMenu = require('web.FavoriteMenu');
 
     /**
-     * @private
-     */
-    _addToSpreadsheet: function () {
-        // AAB: trigger_up an event that will be intercepted by the controller,
-        // as soon as the controller is the parent of the control panel
-        var actionManager = this.findAncestor(function (ancestor) {
-            return ancestor instanceof ActionManager;
-        });
-        var controller = actionManager.getCurrentController();
-        var searchQuery;
-        // TO DO: for now the domains in query are evaluated.
-        // This should be changed I think.
-        this.trigger_up('get_search_query', {
-            callback: function (query) {
-                searchQuery = query;
-            }
-        });
-        var modelName = this.action.res_model;
-        var list_view = _.findWhere(controller.widget.actionViews, {type: 'list'});
-        var list_view_id = list_view ? list_view.viewID : false;
-        var domain = searchQuery.domain;
-        var groupBys = pyUtils.eval('groupbys', searchQuery.groupBys).join(" ");
-        var ds = new data.DataSet(this, 'google.drive.config');
-
-        ds.call('set_spreadsheet', [modelName, Domain.prototype.arrayToString(domain), groupBys, list_view_id])
-            .then(function (res) {
-                if (res.url){
-                    window.open(res.url, '_blank');
-                }
-            });
-    },
-    /**
-     * Renders the `SearchView.addtogooglespreadsheet` template.
+     * 'Add to Google spreadsheet' menu
      *
-     * @private
+     * Component consisting only of a button calling the server to add the current
+     * view to the user's spreadsheet configuration.
+     * This component is only available in actions of type 'ir.actions.act_window'.
+     * @extends DropdownMenuItem
      */
-    _render: function () {
-        var $el = QWeb.render('SearchView.addtogooglespreadsheet', {widget: this});
-        this._replaceElement($el);
-    },
+    class AddToGoogleSpreadsheetMenu extends DropdownMenuItem {
 
-    //--------------------------------------------------------------------------
-    // Handlers
-    //--------------------------------------------------------------------------
-
-    /**
-     * @private
-     * @param {jQueryEvent} event
-     */
-     _onAddToSpreadsheetClick: function (event) {
-        event.preventDefault();
-        event.stopPropagation();
-        this._addToSpreadsheet();
-     },
-});
-
-favorites_submenus_registry.add('add_to_google_spreadsheet_menu', AddToGoogleSpreadsheetMenu, 20);
-
-return AddToGoogleSpreadsheetMenu;
+        //---------------------------------------------------------------------
+        // Handlers
+        //---------------------------------------------------------------------
 
+        /**
+         * @private
+         */
+        async _onAddToSpreadsheet() {
+            const searchQuery = this.env.controlPanelModel.getQuery();
+            const listView = this.env.action.views.find(view => view.type === 'list');
+            const modelName = this.env.action.res_model;
+            const domain = Domain.prototype.arrayToString(searchQuery.domain);
+            const groupBys = searchQuery.groupBy.join(" ");
+            const listViewId = listView ? listView.viewID : false;
+            const result = await this.rpc({
+                model: 'google.drive.config',
+                method: 'set_spreadsheet',
+                args: [modelName, domain, groupBys, listViewId],
+            });
+            if (result.url) {
+                // According to MDN doc, one should not use _blank as title.
+                // todo: find a good name for the new window
+                window.open(result.url, '_blank');
+            }
+        }
+
+        //---------------------------------------------------------------------
+        // Static
+        //---------------------------------------------------------------------
+
+        /**
+         * @param {Object} env
+         * @returns {boolean}
+         */
+        static shouldBeDisplayed(env) {
+            return env.action.type === 'ir.actions.act_window';
+        }
+    }
+
+    AddToGoogleSpreadsheetMenu.props = {};
+    AddToGoogleSpreadsheetMenu.template = 'AddToGoogleSpreadsheetMenu';
+
+    FavoriteMenu.registry.add('add-to-google-spreadsheet-menu', AddToGoogleSpreadsheetMenu, 20);
+
+    return AddToGoogleSpreadsheetMenu;
 });
diff --git a/addons/google_spreadsheet/static/src/xml/addtospreadsheet.xml b/addons/google_spreadsheet/static/src/xml/addtospreadsheet.xml
index c86afe0b3fd..12fe663cb4e 100644
--- a/addons/google_spreadsheet/static/src/xml/addtospreadsheet.xml
+++ b/addons/google_spreadsheet/static/src/xml/addtospreadsheet.xml
@@ -1,5 +1,7 @@
 <template>
-    <div t-name="SearchView.addtogooglespreadsheet">
-        <a class="add_to_spreadsheet dropdown-item">Add to Google Spreadsheet</a>
-    </div>
+    <t t-name="AddToGoogleSpreadsheetMenu" owl="1">
+        <li class="o_menu_item o_add_to_spreadsheet" role="menuitem">
+            <a class="dropdown-item" href="#" t-on-click.prevent="_onAddToSpreadsheet">Add to Google Spreadsheet</a>
+        </li>
+    </t>
 </template>
diff --git a/addons/mail/static/src/js/custom_filter_item.js b/addons/mail/static/src/js/custom_filter_item.js
new file mode 100644
index 00000000000..b828d0f44f6
--- /dev/null
+++ b/addons/mail/static/src/js/custom_filter_item.js
@@ -0,0 +1,22 @@
+odoo.define('mail.CustomFilterItem', function (require) {
+    "use strict";
+
+    const CustomFilterItem = require('web.CustomFilterItem');
+    const utils = require('web.utils');
+
+    utils.patch(CustomFilterItem, 'mail.CustomFilterItem', {
+
+        /**
+         * With the `mail` module installed, we want to filter out some of the
+         * available fields in 'Add custom filter' menu (@see CustomFilterItem).
+         * @override
+         */
+        _validateField(field) {
+            return this._super(...arguments) &&
+                field.relation !== 'mail.message' &&
+                field.name !== 'message_ids';
+        },
+    });
+
+    return CustomFilterItem;
+});
diff --git a/addons/mail/static/src/js/discuss.js b/addons/mail/static/src/js/discuss.js
index 8a4606cc814..79a13c307c8 100644
--- a/addons/mail/static/src/js/discuss.js
+++ b/addons/mail/static/src/js/discuss.js
@@ -243,7 +243,6 @@ var Discuss = AbstractAction.extend({
     custom_events: _.extend({}, AbstractAction.prototype.custom_events, {
         discard_extended_composer: '_onDiscardExtendedComposer',
         message_moderation: '_onMessageModeration',
-        search: '_onSearch',
         update_moderation_buttons: '_onUpdateModerationButtons',
     }),
     events: {
@@ -292,7 +291,7 @@ var Discuss = AbstractAction.extend({
         this._throttledUpdateThreads = _.throttle(
             this._updateThreads.bind(this), 100, { leading: false });
 
-        this.controlPanelParams.modelName = 'mail.message';
+        this.controlPanelModelConfig.modelName = 'mail.message';
         this.call('mail_service', 'getMailBus').on('messaging_ready', this, this._onMessagingReady);
     },
     /**
@@ -313,7 +312,7 @@ var Discuss = AbstractAction.extend({
      */
     do_show: function () {
         this._super.apply(this, arguments);
-        this._updateControlPanel();
+        this.updateControlPanel();
         this.action_manager.do_push_state({
             action: this.action.id,
             active_id: this._thread.getID(),
@@ -332,6 +331,7 @@ var Discuss = AbstractAction.extend({
      * @override
      */
     on_attach_callback: function () {
+        this._super();
         this.call('mail_service', 'getMailBus').trigger('discuss_open', true);
         if (this._thread) {
             this._threadWidget.scrollToPosition(this._threadsScrolltop[this._thread.getID()]);
@@ -342,6 +342,7 @@ var Discuss = AbstractAction.extend({
      * @override
      */
     on_detach_callback: function () {
+        this._super();
         this.call('mail_service', 'getMailBus').trigger('discuss_open', false);
         this._threadsScrolltop[this._thread.getID()] = this._threadWidget.getScrolltop();
     },
@@ -937,9 +938,7 @@ var Discuss = AbstractAction.extend({
      * @param {integer} threadID a thread with such ID
      * @returns {Promise}
      */
-    _setThread: function (threadID) {
-        var self = this;
-
+    _setThread: async function (threadID) {
         this.$('.o_out_of_office').remove();
         // Store scroll position and composer state of the previous thread
         this._storeThreadState();
@@ -960,36 +959,39 @@ var Discuss = AbstractAction.extend({
         this._basicComposer.setThread(this._thread);
         this._extendedComposer.setThread(this._thread);
 
-        return this._fetchAndRenderThread().then(function () {
-            // Mark thread's messages as read and clear needactions
-            if (self._thread.getType() !== 'mailbox') {
-                self._thread.markAsRead();
-            }
-            // Restore scroll position and composer of the new current thread
-            self._restoreThreadState();
+        await this._fetchAndRenderThread();
+        // Mark thread's messages as read and clear needactions
+        if (this._thread.getType() !== 'mailbox') {
+            this._thread.markAsRead();
+        }
+        // Restore scroll position and composer of the new current thread
+        this._restoreThreadState();
 
-            // Update control panel before focusing the composer, otherwise
-            // focus is on the searchview
-            self._setTitle('#' + self._thread.getName());
-            self._updateControlPanel();
-            self._updateControlPanelButtons(self._thread);
+        // Update control panel before focusing the composer, otherwise
+        // focus is on the searchview
+        await this.updateControlPanel({
+            title: '#' + this._thread.getName(),
+            cp_content: {
+                $buttons: this.$buttons,
+            },
+        });
+        this._updateControlPanelButtons(this._thread);
 
-            // Display and focus the adequate composer, and unselect possibly
-            // selected message to prevent sending messages as reply to that
-            // message
-            self._unselectMessage();
+        // Display and focus the adequate composer, and unselect possibly
+        // selected message to prevent sending messages as reply to that
+        // message
+        this._unselectMessage();
 
-            if (self._thread.hasOutOfOffice()) {
-                const $outOfOffice = $(QWeb.render('mail.thread.OutOfOffice', {
-                    thread: self._thread
-                }));
-                $outOfOffice.prependTo(self.$('.o_mail_discuss_content'));
-            }
+        if (this._thread.hasOutOfOffice()) {
+            const $outOfOffice = $(QWeb.render('mail.thread.OutOfOffice', {
+                thread: this._thread
+            }));
+            $outOfOffice.prependTo(this.$('.o_mail_discuss_content'));
+        }
 
-            self.action_manager.do_push_state({
-                action: self.action.id,
-                active_id: self._thread.getID(),
-            });
+        this.action_manager.do_push_state({
+            action: this.action.id,
+            active_id: this._thread.getID(),
         });
     },
     /**
@@ -1097,16 +1099,6 @@ var Discuss = AbstractAction.extend({
             this._updateModerationButtons();
         }
     },
-    /**
-     * @private
-     */
-    _updateControlPanel: function () {
-        this.updateControlPanel({
-            cp_content: {
-                $buttons: this.$buttons,
-            },
-        });
-    },
     /**
      * Updates the control panel buttons visibility based on thread type
      *
@@ -1530,11 +1522,10 @@ var Discuss = AbstractAction.extend({
     },
     /**
      * @private
-     * @param {OdooEvent} ev
+     * @param {Object} searchQuery
      */
-    _onSearch: function (ev) {
-        ev.stopPropagation();
-        this.domain = ev.data.domain;
+    _onSearch: function (searchQuery) {
+        this.domain = searchQuery.domain;
         if (this._thread) {
             // initially (when _onSearch is called manually), there is no
             // thread set yet, so don't try to fetch and render the thread as
diff --git a/addons/mail/static/src/js/filter_menu.js b/addons/mail/static/src/js/filter_menu.js
deleted file mode 100644
index dbf2428bda9..00000000000
--- a/addons/mail/static/src/js/filter_menu.js
+++ /dev/null
@@ -1,16 +0,0 @@
-odoo.define('mail.FilterMenu', function (require) {
-"use strict";
-
-var FilterMenu = require('web.FilterMenu');
-
-FilterMenu.include({
-    init: function () {
-        this._super.apply(this, arguments);
-        //remove messages from custom filters
-        this.fields = _.pick(this.fields, function (field, name) {
-            return field.relation !== 'mail.message' && name !== 'message_ids';
-        });
-    },
-});
-
-});
diff --git a/addons/mail/static/src/js/views/activity/activity_controller.js b/addons/mail/static/src/js/views/activity/activity_controller.js
index 8de28d65cc9..106c5ee90f1 100644
--- a/addons/mail/static/src/js/views/activity/activity_controller.js
+++ b/addons/mail/static/src/js/views/activity/activity_controller.js
@@ -33,13 +33,18 @@ var ActivityController = BasicController.extend({
         this._super.apply(this, arguments);
         this.title = params.title;
     },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
     /**
      * Overridden to remove the pager as it makes no sense in this view.
      *
      * @override
      */
-    renderPager: function () {
-        return Promise.resolve();
+    _getPagingInfo: function () {
+        return null;
     },
 
     //--------------------------------------------------------------------------
diff --git a/addons/mail/views/mail_templates.xml b/addons/mail/views/mail_templates.xml
index beddb29cadf..f1ef1e2947b 100644
--- a/addons/mail/views/mail_templates.xml
+++ b/addons/mail/views/mail_templates.xml
@@ -68,7 +68,7 @@
                 <!-- tools -->
                 <script type="text/javascript" src="/mail/static/src/js/tools/debug_manager.js"></script>
                 <!-- filter menu -->
-                <script type="text/javascript" src="/mail/static/src/js/filter_menu.js"></script>
+                <script type="text/javascript" src="/mail/static/src/js/custom_filter_item.js"></script>
                 <!-- utils -->
                 <script type="text/javascript" src="/mail/static/src/js/utils.js"></script>
                 <script type="text/javascript" src="/mail/static/src/js/activity.js"></script>
diff --git a/addons/mrp/static/src/js/mrp_bom_report.js b/addons/mrp/static/src/js/mrp_bom_report.js
index 1f6aaa42773..64f1621bc79 100644
--- a/addons/mrp/static/src/js/mrp_bom_report.js
+++ b/addons/mrp/static/src/js/mrp_bom_report.js
@@ -101,7 +101,7 @@ var MrpBomReport = stock_report_generic.extend({
         var status = {
             cp_content: {
                 $buttons: this.$buttonPrint,
-                $searchview_buttons: this.$searchView
+                $searchview: this.$searchView
             },
         };
         return this.updateControlPanel(status);
@@ -132,7 +132,7 @@ var MrpBomReport = stock_report_generic.extend({
         var action = {
             'type': 'ir.actions.report',
             'report_type': 'qweb-pdf',
-            'report_name': reportname,                                
+            'report_name': reportname,
             'report_file': 'mrp.report_bom_structure',
         };
         return this.do_action(action).then(function (){
diff --git a/addons/product/static/src/js/product_pricelist_report.js b/addons/product/static/src/js/product_pricelist_report.js
index 5c437f07498..fa19e0c8a3a 100644
--- a/addons/product/static/src/js/product_pricelist_report.js
+++ b/addons/product/static/src/js/product_pricelist_report.js
@@ -30,7 +30,7 @@ var QtyTagWidget = Widget.extend({
 
     /**
      * Add a quantity when add(+) button clicked.
-     * 
+     *
      * @private
      */
     _onClickAddQty: function () {
@@ -143,9 +143,8 @@ var GeneratePriceList = AbstractAction.extend(StandaloneFieldManagerMixin, {
      * @override
      */
     start: function () {
+        this.controlPanelProps.cp_content = this._renderComponent();
         return this._super.apply(this, arguments).then(() => {
-            this._renderComponent();
-            this.update_cp();
             this.$('.o_content').html(this.reportHtml);
         });
     },
@@ -163,22 +162,6 @@ var GeneratePriceList = AbstractAction.extend(StandaloneFieldManagerMixin, {
         return _t('Pricelist Report');
     },
 
-    //--------------------------------------------------------------------------
-    // Public
-    //--------------------------------------------------------------------------
-
-    /**
-     * @override
-     */
-    update_cp: function () {
-        this.updateControlPanel({
-            cp_content: {
-                $buttons: this.$buttonPrint,
-                $searchview_buttons: this.$searchView,
-            },
-        });
-    },
-
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
@@ -215,16 +198,17 @@ var GeneratePriceList = AbstractAction.extend(StandaloneFieldManagerMixin, {
      * @private
      */
     _renderComponent: function () {
-        this.$buttonPrint = $('<button>', {
+        const $buttons = $('<button>', {
             class: 'btn btn-primary',
             text: _t("Print"),
         }).on('click', this._onClickPrint.bind(this));
 
-        this.$searchView = $(QWeb.render('product.report_pricelist_search'));
-        this.many2one.appendTo(this.$searchView.find('.o_pricelist'));
+        const $searchview = $(QWeb.render('product.report_pricelist_search'));
+        this.many2one.appendTo($searchview.find('.o_pricelist'));
 
         this.qtyTagWidget = new QtyTagWidget(this, this.context.quantities);
-        this.qtyTagWidget.replace(this.$searchView.find('.o_product_qty'));
+        this.qtyTagWidget.replace($searchview.find('.o_product_qty'));
+        return { $buttons, $searchview };
     },
 
     //--------------------------------------------------------------------------
diff --git a/addons/stock/static/src/js/inventory_report_list_controller.js b/addons/stock/static/src/js/inventory_report_list_controller.js
index b3e55ac9afa..eb6a3ed6f46 100644
--- a/addons/stock/static/src/js/inventory_report_list_controller.js
+++ b/addons/stock/static/src/js/inventory_report_list_controller.js
@@ -28,8 +28,7 @@ var InventoryReportListController = ListController.extend({
         }
         var $buttonToDate = $(qweb.render('InventoryReport.Buttons'));
         $buttonToDate.on('click', this._onOpenWizard.bind(this));
-
-        $buttonToDate.prependTo($node.find('.o_list_buttons'));
+        this.$buttons.prepend($buttonToDate);
     },
 
     // -------------------------------------------------------------------------
diff --git a/addons/website/static/src/js/theme_preview_form.js b/addons/website/static/src/js/theme_preview_form.js
index a271457267d..b074494648e 100644
--- a/addons/website/static/src/js/theme_preview_form.js
+++ b/addons/website/static/src/js/theme_preview_form.js
@@ -24,13 +24,24 @@ var ThemePreviewController = FormController.extend({
     // -------------------------------------------------------------------------
     // Public
     // -------------------------------------------------------------------------
+
     /**
      * @override
      */
     renderButtons: function ($node) {
-        var $previewButton = $(qweb.render('website.ThemePreview.Buttons'));
-        $node.html($previewButton);
+        this.$buttons = $(qweb.render('website.ThemePreview.Buttons'));
+        if ($node) {
+            $node.html(this.$buttons);
+        }
     },
+    /**
+     * Overriden to prevent the controller from hiding the buttons
+     * @see FormController
+     *
+     * @override
+     */
+    updateButtons: function () { },
+
     // -------------------------------------------------------------------------
     // Private
     // -------------------------------------------------------------------------
@@ -39,16 +50,11 @@ var ThemePreviewController = FormController.extend({
      *
      * @private
      */
-    _updatePager: function () {
-        this._super(...arguments);
-
-        const $buttonSwitch = $(qweb.render('website.ThemePreview.SwitchModeButton'));
-        if (!this.$switcherButton) {
-            $buttonSwitch.appendTo(this.pager.$el);
-        } else {
-            this.$switcherButton.replaceWith($buttonSwitch);
-        }
-        this.$switcherButton = $buttonSwitch;
+    _updateControlPanelProps: async function () {
+        const props = this._super(...arguments);
+        const $switchModeButton = $(qweb.render('website.ThemePreview.SwitchModeButton'));
+        this.controlPanelProps.cp_content.$pager = $switchModeButton;
+        return props;
     },
 
     // -------------------------------------------------------------------------
diff --git a/addons/website/static/src/js/theme_preview_kanban.js b/addons/website/static/src/js/theme_preview_kanban.js
index 570c75fba02..738f640d5fa 100644
--- a/addons/website/static/src/js/theme_preview_kanban.js
+++ b/addons/website/static/src/js/theme_preview_kanban.js
@@ -9,9 +9,15 @@ var ThemePreviewKanbanController = KanbanController.extend({
     /**
      * @override
      */
-    start: function () {
-        this.$el.addClass('o_view_kanban_theme_preview_controller');
-        return this._super.apply(this, arguments);
+    start: async function () {
+        await this._super(...arguments);
+        this.el.classList.add('o_view_kanban_theme_preview_controller');
+        const websiteLink = Object.assign(document.createElement('a'), {
+            className: 'btn btn-secondary ml-3',
+            href: '/',
+            innerHTML: '<i class="fa fa-close"></i>',
+        });
+        this._controlPanelWrapper.el.querySelector('.o_cp_top').appendChild(websiteLink);
     },
 });
 
@@ -21,21 +27,6 @@ var ThemePreviewKanbanView = KanbanView.extend({
     config: _.extend({}, KanbanView.prototype.config, {
         Controller: ThemePreviewKanbanController,
     }),
-
-    // -------------------------------------------------------------------------
-    // Private
-    // -------------------------------------------------------------------------
-    /**
-     * @override
-     *
-     */
-    _createControlPanel: function (parent) {
-        return this._super.apply(this, arguments).then(controlPanel => {
-            var websiteLink = '<a class="btn btn-secondary ml-3" href="/"><i class="fa fa-close"></i></a>';
-            controlPanel.$('div.o_cp_searchview').after(websiteLink);
-            return controlPanel;
-        });
-    },
 });
 
 ViewRegistry.add('theme_preview_kanban', ThemePreviewKanbanView);

From bb8eb766a84b9fd06007d3fb4ab9a29b70097738 Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Wed, 11 Mar 2020 09:38:29 +0000
Subject: [PATCH 09/10] [REF] web: Control panel tests

Use of the new helpers in control panel (and subcomponents) tests and addition
of new tests.

Part of task 2196029

Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
---
 .../tests/components/action_menus_tests.js    | 231 +++++++
 .../tests/components/datepicker_tests.js      | 215 +++++++
 .../tests/components/dropdown_menu_tests.js   | 345 +++++++++++
 .../static/tests/components/pager_tests.js    | 163 +++++
 .../control_panel_model_tests.js              | 294 +++++++++
 .../control_panel/control_panel_tests.js      | 129 ++++
 .../control_panel/custom_filter_item_tests.js | 355 +++++++++++
 .../custom_group_by_item_tests.js             |  72 +++
 .../control_panel/favorite_menu_tests.js      | 572 +++++++++++++++++
 .../tests/control_panel/filter_menu_tests.js  | 496 +++++++++++++++
 .../tests/control_panel/groupby_menu_tests.js | 447 ++++++++++++++
 .../tests/control_panel/search_bar_tests.js   | 415 +++++++++++++
 .../control_panel/time_range_menu_tests.js    | 333 ++++++++++
 .../static/tests/views/control_panel_tests.js | 584 ------------------
 addons/web/views/webclient_templates.xml      |  20 +-
 15 files changed, 4081 insertions(+), 590 deletions(-)
 create mode 100644 addons/web/static/tests/components/action_menus_tests.js
 create mode 100644 addons/web/static/tests/components/datepicker_tests.js
 create mode 100644 addons/web/static/tests/components/dropdown_menu_tests.js
 create mode 100644 addons/web/static/tests/components/pager_tests.js
 create mode 100644 addons/web/static/tests/control_panel/control_panel_model_tests.js
 create mode 100644 addons/web/static/tests/control_panel/control_panel_tests.js
 create mode 100644 addons/web/static/tests/control_panel/custom_filter_item_tests.js
 create mode 100644 addons/web/static/tests/control_panel/custom_group_by_item_tests.js
 create mode 100644 addons/web/static/tests/control_panel/favorite_menu_tests.js
 create mode 100644 addons/web/static/tests/control_panel/filter_menu_tests.js
 create mode 100644 addons/web/static/tests/control_panel/groupby_menu_tests.js
 create mode 100644 addons/web/static/tests/control_panel/search_bar_tests.js
 create mode 100644 addons/web/static/tests/control_panel/time_range_menu_tests.js
 delete mode 100644 addons/web/static/tests/views/control_panel_tests.js

diff --git a/addons/web/static/tests/components/action_menus_tests.js b/addons/web/static/tests/components/action_menus_tests.js
new file mode 100644
index 00000000000..e17ae95ba78
--- /dev/null
+++ b/addons/web/static/tests/components/action_menus_tests.js
@@ -0,0 +1,231 @@
+odoo.define('web.action_menus_tests', function (require) {
+    "use strict";
+
+    const ActionMenus = require('web.ActionMenus');
+    const Registry = require('web.Registry');
+    const testUtils = require('web.test_utils');
+
+    const cpHelpers = testUtils.controlPanel;
+    const { createComponent } = testUtils;
+
+    QUnit.module('Components', {
+        beforeEach() {
+            this.action = {
+                res_model: 'hobbit',
+            };
+            this.view = {
+                // needed by google_drive module, makes sense to give a view anyway.
+                type: 'form',
+            };
+            this.props = {
+                activeIds: [23],
+                context: {},
+                items: {
+                    action: [
+                        { action: { id: 1 }, name: "What's taters, precious ?", id: 1 },
+                    ],
+                    print: [
+                        { action: { id: 2 }, name: "Po-ta-toes", id: 2 },
+                    ],
+                    other: [
+                        { description: "Boil'em", callback() { } },
+                        { description: "Mash'em", callback() { } },
+                        { description: "Stick'em in a stew", url: '#stew' },
+                    ],
+                },
+            };
+            // Patch the registry of the action menus
+            this.actionMenusRegistry = ActionMenus.registry;
+            ActionMenus.registry = new Registry();
+        },
+        afterEach() {
+            ActionMenus.registry = this.actionMenusRegistry;
+        },
+    }, function () {
+
+        QUnit.module('ActionMenus');
+
+        QUnit.test('basic interactions', async function (assert) {
+            assert.expect(10);
+
+            const actionMenus = await createComponent(ActionMenus, {
+                env: {
+                    action: this.action,
+                    view: this.view,
+                },
+                props: this.props,
+            });
+
+            const dropdowns = actionMenus.el.getElementsByClassName('o_dropdown');
+            assert.strictEqual(dropdowns.length, 2, "ActionMenus should contain 2 menus");
+            assert.strictEqual(dropdowns[0].querySelector('.o_dropdown_title').innerText.trim(), "Print");
+            assert.strictEqual(dropdowns[1].querySelector('.o_dropdown_title').innerText.trim(), "Action");
+            assert.containsNone(actionMenus, '.o_dropdown_menu');
+
+            await cpHelpers.toggleActionMenu(actionMenus, "Action");
+
+            assert.containsOnce(actionMenus, '.o_dropdown_menu');
+            assert.containsN(actionMenus, '.o_dropdown_menu .o_menu_item', 4);
+            const actionsTexts = [...dropdowns[1].querySelectorAll('.o_menu_item')].map(el => el.innerText.trim());
+            assert.deepEqual(actionsTexts, [
+                "Boil'em",
+                "Mash'em",
+                "Stick'em in a stew",
+                "What's taters, precious ?",
+            ], "callbacks should appear before actions");
+
+            await cpHelpers.toggleActionMenu(actionMenus, "Print");
+
+            assert.containsOnce(actionMenus, '.o_dropdown_menu');
+            assert.containsN(actionMenus, '.o_dropdown_menu .o_menu_item', 1);
+
+            await cpHelpers.toggleActionMenu(actionMenus, "Print");
+
+            assert.containsNone(actionMenus, '.o_dropdown_menu');
+
+            actionMenus.destroy();
+        });
+
+        QUnit.test('execute action', async function (assert) {
+            assert.expect(4);
+
+            const actionMenus = await createComponent(ActionMenus, {
+                env: {
+                    action: this.action,
+                    view: this.view,
+                },
+                props: this.props,
+                intercepts: {
+                    'do-action': ev => assert.step('do-action'),
+                },
+                async mockRPC(route, args) {
+                    switch (route) {
+                        case '/web/action/load':
+                            const expectedContext = {
+                                active_id: 23,
+                                active_ids: [23],
+                                active_model: 'hobbit',
+                            };
+                            assert.deepEqual(args.context, expectedContext);
+                            assert.step('load-action');
+                            return { context: {}, flags: {} };
+                        default:
+                            return this._super(...arguments);
+
+                    }
+                },
+            });
+
+            await cpHelpers.toggleActionMenu(actionMenus, "Action");
+            await cpHelpers.toggleMenuItem(actionMenus, "What's taters, precious ?");
+
+            assert.verifySteps(['load-action', 'do-action']);
+
+            actionMenus.destroy();
+        });
+
+        QUnit.test('execute callback action', async function (assert) {
+            assert.expect(2);
+
+            const callbackPromise = testUtils.makeTestPromise();
+            this.props.items.other[0].callback = function (items) {
+                assert.strictEqual(items.length, 1);
+                assert.strictEqual(items[0].description, "Boil'em");
+                callbackPromise.resolve();
+            };
+
+            const actionMenus = await createComponent(ActionMenus, {
+                env: {
+                    action: this.action,
+                    view: this.view,
+                },
+                props: this.props,
+                async mockRPC(route, args) {
+                    switch (route) {
+                        case '/web/action/load':
+                            throw new Error("No action should be loaded.");
+                        default:
+                            return this._super(...arguments);
+                    }
+                },
+            });
+
+            await cpHelpers.toggleActionMenu(actionMenus, "Action");
+            await cpHelpers.toggleMenuItem(actionMenus, "Boil'em");
+
+            await callbackPromise;
+
+            actionMenus.destroy();
+        });
+
+        QUnit.test('execute print action', async function (assert) {
+            assert.expect(4);
+
+            const actionMenus = await createComponent(ActionMenus, {
+                env: {
+                    action: this.action,
+                    view: this.view,
+                },
+                intercepts: {
+                    'do-action': ev => assert.step('do-action'),
+                },
+                props: this.props,
+                async mockRPC(route, args) {
+                    switch (route) {
+                        case '/web/action/load':
+                            const expectedContext = {
+                                active_id: 23,
+                                active_ids: [23],
+                                active_model: 'hobbit',
+                            };
+                            assert.deepEqual(args.context, expectedContext);
+                            assert.step('load-action');
+                            return { context: {}, flags: {} };
+                        default:
+                            return this._super(...arguments);
+
+                    }
+                },
+            });
+
+            await cpHelpers.toggleActionMenu(actionMenus, "Print");
+            await cpHelpers.toggleMenuItem(actionMenus, "Po-ta-toes");
+
+            assert.verifySteps(['load-action', 'do-action']);
+
+            actionMenus.destroy();
+        });
+
+        QUnit.test('execute url action', async function (assert) {
+            assert.expect(2);
+
+            const actionMenus = await createComponent(ActionMenus, {
+                env: {
+                    action: this.action,
+                    services: {
+                        navigate(url) {
+                            assert.step(url);
+                        },
+                    },
+                    view: this.view,
+                },
+                props: this.props,
+                async mockRPC(route, args) {
+                    switch (route) {
+                        case '/web/action/load':
+                            throw new Error("No action should be loaded.");
+                        default:
+                            return this._super(...arguments);
+                    }
+                },
+            });
+
+            await cpHelpers.toggleActionMenu(actionMenus, "Action");
+            await cpHelpers.toggleMenuItem(actionMenus, "Stick'em in a stew");
+
+            assert.verifySteps(['#stew']);
+
+            actionMenus.destroy();
+        });
+    });
+});
diff --git a/addons/web/static/tests/components/datepicker_tests.js b/addons/web/static/tests/components/datepicker_tests.js
new file mode 100644
index 00000000000..995521259a1
--- /dev/null
+++ b/addons/web/static/tests/components/datepicker_tests.js
@@ -0,0 +1,215 @@
+odoo.define('web.datepicker_tests', function (require) {
+    "use strict";
+
+    const { DatePicker, DateTimePicker } = require('web.DatePickerOwl');
+    const testUtils = require('web.test_utils');
+
+    const { createComponent } = testUtils;
+
+    QUnit.module('Components', {}, function () {
+
+        QUnit.module('DatePicker');
+
+        QUnit.test("basic rendering", async function (assert) {
+            assert.expect(8);
+
+            const picker = await createComponent(DatePicker, {
+                props: { date: moment('01/09/1997') },
+            });
+
+            assert.containsOnce(picker, 'input.o_input.o_datepicker_input');
+            assert.containsOnce(picker, 'span.o_datepicker_button');
+            assert.containsNone(document.body, 'div.bootstrap-datetimepicker-widget');
+
+            const input = picker.el.querySelector('input.o_input.o_datepicker_input');
+            assert.strictEqual(input.value, '01/09/1997',
+                "Value should be the one given")
+                ;
+            assert.strictEqual(input.dataset.target, `#${picker.el.id}`,
+                "DatePicker id should match its input target");
+
+            await testUtils.dom.click(input);
+
+            assert.containsOnce(document.body, 'div.bootstrap-datetimepicker-widget .datepicker');
+            assert.containsNone(document.body, 'div.bootstrap-datetimepicker-widget .timepicker');
+            assert.strictEqual(
+                document.querySelector('.datepicker .day.active').dataset.day,
+                '01/09/1997',
+                "Datepicker should have set the correct day"
+            );
+
+            picker.destroy();
+        });
+
+        QUnit.test("pick a date", async function (assert) {
+            assert.expect(5);
+
+            const picker = await createComponent(DatePicker, {
+                props: { date: moment('01/09/1997') },
+                intercepts: {
+                    'datetime-changed': ev => {
+                        assert.step('datetime-changed');
+                        assert.strictEqual(ev.detail.date.format('MM/DD/YYYY'), '02/08/1997',
+                            "Event should transmit the correct date");
+                    },
+                }
+            });
+            const input = picker.el.querySelector('.o_datepicker_input');
+
+            await testUtils.dom.click(input);
+            await testUtils.dom.click(document.querySelector('.datepicker th.next')); // next month
+
+            assert.verifySteps([]);
+
+            await testUtils.dom.click(document.querySelectorAll('.datepicker table td')[15]); // previous day
+
+            assert.strictEqual(input.value, '02/08/1997');
+            assert.verifySteps(['datetime-changed']);
+
+            picker.destroy();
+        });
+
+        QUnit.test("enter a date value", async function (assert) {
+            assert.expect(5);
+
+            const picker = await createComponent(DatePicker, {
+                props: { date: moment('01/09/1997') },
+                intercepts: {
+                    'datetime-changed': ev => {
+                        assert.step('datetime-changed');
+                        assert.strictEqual(ev.detail.date.format('MM/DD/YYYY'), '02/08/1997',
+                            "Event should transmit the correct date");
+                    },
+                }
+            });
+            const input = picker.el.querySelector('.o_datepicker_input');
+
+            assert.verifySteps([]);
+
+            await testUtils.fields.editAndTrigger(input, '02/08/1997', ['change']);
+
+            assert.verifySteps(['datetime-changed']);
+
+            await testUtils.dom.click(input);
+
+            assert.strictEqual(
+                document.querySelector('.datepicker .day.active').dataset.day,
+                '02/08/1997',
+                "Datepicker should have set the correct day"
+            );
+
+            picker.destroy();
+        });
+
+        QUnit.module('DateTimePicker');
+
+        QUnit.test("basic rendering", async function (assert) {
+            assert.expect(11);
+
+            const picker = await createComponent(DateTimePicker, {
+                props: { date: moment('01/09/1997 12:30:01') },
+            });
+
+            assert.containsOnce(picker, 'input.o_input.o_datepicker_input');
+            assert.containsOnce(picker, 'span.o_datepicker_button');
+            assert.containsNone(document.body, 'div.bootstrap-datetimepicker-widget');
+
+            const input = picker.el.querySelector('input.o_input.o_datepicker_input');
+            assert.strictEqual(input.value, '01/09/1997 12:30:01', "Value should be the one given");
+            assert.strictEqual(input.dataset.target, `#${picker.el.id}`,
+                "DateTimePicker id should match its input target");
+
+            await testUtils.dom.click(input);
+
+            assert.containsOnce(document.body, 'div.bootstrap-datetimepicker-widget .datepicker');
+            assert.containsOnce(document.body, 'div.bootstrap-datetimepicker-widget .timepicker');
+            assert.strictEqual(
+                document.querySelector('.datepicker .day.active').dataset.day,
+                '01/09/1997',
+                "Datepicker should have set the correct day");
+
+            assert.strictEqual(document.querySelector('.timepicker .timepicker-hour').innerText.trim(), '12',
+                "Datepicker should have set the correct hour");
+            assert.strictEqual(document.querySelector('.timepicker .timepicker-minute').innerText.trim(), '30',
+                "Datepicker should have set the correct minute");
+            assert.strictEqual(document.querySelector('.timepicker .timepicker-second').innerText.trim(), '01',
+                "Datepicker should have set the correct second");
+
+            picker.destroy();
+        });
+
+        QUnit.test("pick a date and time", async function (assert) {
+            assert.expect(5);
+
+            const picker = await createComponent(DateTimePicker, {
+                props: { date: moment('01/09/1997 12:30:01') },
+                intercepts: {
+                    'datetime-changed': ev => {
+                        assert.step('datetime-changed');
+                        assert.strictEqual(ev.detail.date.format('MM/DD/YYYY HH:mm:ss'), '02/08/1997 15:45:05',
+                            "Event should transmit the correct date");
+                    },
+                }
+            });
+            const input = picker.el.querySelector('input.o_input.o_datepicker_input');
+
+            await testUtils.dom.click(input);
+            await testUtils.dom.click(document.querySelector('.datepicker th.next')); // February
+            await testUtils.dom.click(document.querySelectorAll('.datepicker table td')[15]); // 08
+            await testUtils.dom.click(document.querySelector('a[title="Select Time"]'));
+            await testUtils.dom.click(document.querySelector('.timepicker .timepicker-hour'));
+            await testUtils.dom.click(document.querySelectorAll('.timepicker .hour')[15]); // 15h
+            await testUtils.dom.click(document.querySelector('.timepicker .timepicker-minute'));
+            await testUtils.dom.click(document.querySelectorAll('.timepicker .minute')[9]); // 45m
+            await testUtils.dom.click(document.querySelector('.timepicker .timepicker-second'));
+
+            assert.verifySteps([]);
+
+            await testUtils.dom.click(document.querySelectorAll('.timepicker .second')[1]); // 05s
+
+            assert.strictEqual(input.value, '02/08/1997 15:45:05');
+            assert.verifySteps(['datetime-changed']);
+
+            picker.destroy();
+        });
+
+        QUnit.test("enter a datetime value", async function (assert) {
+            assert.expect(9);
+
+            const picker = await createComponent(DateTimePicker, {
+                props: { date: moment('01/09/1997 12:30:01') },
+                intercepts: {
+                    'datetime-changed': ev => {
+                        assert.step('datetime-changed');
+                        assert.strictEqual(ev.detail.date.format('MM/DD/YYYY HH:mm:ss'), '02/08/1997 15:45:05',
+                            "Event should transmit the correct date");
+                    },
+                }
+            });
+            const input = picker.el.querySelector('.o_datepicker_input');
+
+            assert.verifySteps([]);
+
+            await testUtils.fields.editAndTrigger(input, '02/08/1997 15:45:05', ['change']);
+
+            assert.verifySteps(['datetime-changed']);
+
+            await testUtils.dom.click(input);
+
+            assert.strictEqual(input.value, '02/08/1997 15:45:05');
+            assert.strictEqual(
+                document.querySelector('.datepicker .day.active').dataset.day,
+                '02/08/1997',
+                "Datepicker should have set the correct day"
+            );
+            assert.strictEqual(document.querySelector('.timepicker .timepicker-hour').innerText.trim(), '15',
+                "Datepicker should have set the correct hour");
+            assert.strictEqual(document.querySelector('.timepicker .timepicker-minute').innerText.trim(), '45',
+                "Datepicker should have set the correct minute");
+            assert.strictEqual(document.querySelector('.timepicker .timepicker-second').innerText.trim(), '05',
+                "Datepicker should have set the correct second");
+
+            picker.destroy();
+        });
+    });
+});
diff --git a/addons/web/static/tests/components/dropdown_menu_tests.js b/addons/web/static/tests/components/dropdown_menu_tests.js
new file mode 100644
index 00000000000..bf91fa9c04d
--- /dev/null
+++ b/addons/web/static/tests/components/dropdown_menu_tests.js
@@ -0,0 +1,345 @@
+odoo.define('web.dropdown_menu_tests', function (require) {
+    "use strict";
+
+    const DropdownMenu = require('web.DropdownMenu');
+    const testUtils = require('web.test_utils');
+
+    const { createComponent } = testUtils;
+
+    QUnit.module('Components', {
+        beforeEach: function () {
+            this.items = [
+                {
+                    isActive: false,
+                    description: 'Some Item',
+                    id: 1,
+                    groupId: 1,
+                    groupNumber: 1,
+                    options: [
+                        { description: "First Option", groupNumber: 1, id: 1 },
+                        { description: "Second Option", groupNumber: 2, id: 2 },
+                    ],
+                }, {
+                    isActive: true,
+                    description: 'Some other Item',
+                    id: 2,
+                    groupId: 2,
+                    groupNumber: 2,
+                },
+            ];
+        },
+    }, function () {
+        QUnit.module('DropdownMenu');
+
+        QUnit.test('simple rendering and basic interactions', async function (assert) {
+            assert.expect(10);
+
+            const dropdown = await createComponent(DropdownMenu, {
+                props: {
+                    items: this.items,
+                    title: "Dropdown",
+                },
+            });
+
+            assert.strictEqual(dropdown.el.querySelector('button').innerText.trim(), "Dropdown");
+            assert.containsOnce(dropdown, 'button i.fa.fa-caret-right');
+            assert.containsNone(dropdown, 'ul.o_dropdown_menu');
+
+            await testUtils.dom.click(dropdown.el.querySelector('button'));
+
+            assert.containsN(dropdown, '.dropdown-divider, .dropdown-item', 3,
+                'should have 3 elements counting the divider');
+            assert.containsOnce(dropdown, 'button i.fa.fa-caret-down');
+            const itemEls = dropdown.el.querySelectorAll('.o_menu_item > .dropdown-item');
+            assert.strictEqual(itemEls[0].innerText.trim(), 'Some Item');
+            assert.doesNotHaveClass(itemEls[0], 'selected');
+            assert.hasClass(itemEls[1], 'selected');
+
+            const dropdownElements = dropdown.el.querySelectorAll('.o_menu_item *');
+            for (const dropdownEl of dropdownElements) {
+                await testUtils.dom.click(dropdownEl);
+            }
+            assert.containsOnce(dropdown, 'ul.o_dropdown_menu',
+                "Clicking on any item of the dropdown should not close it");
+
+            await testUtils.dom.click(document.body);
+
+            assert.containsNone(dropdown, 'ul.o_dropdown_menu',
+                "Clicking outside of the dropdown should close it");
+
+            dropdown.destroy();
+        });
+
+        QUnit.test('click on an item without options should toggle it', async function (assert) {
+            assert.expect(7);
+
+            delete this.items[0].options;
+
+            const dropdown = await createComponent(DropdownMenu, {
+                props: { items: this.items },
+                intercepts: {
+                    'item-selected': function (ev) {
+                        assert.strictEqual(ev.detail.item.id, 1);
+                        this.state.items[0].isActive = !this.state.items[0].isActive;
+                    },
+                }
+            });
+
+            await testUtils.dom.click(dropdown.el.querySelector('button'));
+
+            const firstItemEl = dropdown.el.querySelector('.o_menu_item > a');
+            assert.doesNotHaveClass(firstItemEl, 'selected');
+            await testUtils.dom.click(firstItemEl);
+            assert.hasClass(firstItemEl, 'selected');
+            assert.isVisible(firstItemEl);
+            await testUtils.dom.click(firstItemEl);
+            assert.doesNotHaveClass(firstItemEl, 'selected');
+            assert.isVisible(firstItemEl);
+
+            dropdown.destroy();
+        });
+
+        QUnit.test('click on an item should not change url', async function (assert) {
+            assert.expect(1);
+
+            delete this.items[0].options;
+
+            const initialHref = window.location.href;
+            const dropdown = await createComponent(DropdownMenu, {
+                props: { items: this.items },
+            });
+
+            await testUtils.dom.click(dropdown.el.querySelector('button'));
+            await testUtils.dom.click(dropdown.el.querySelector('.o_menu_item > a'));
+            assert.strictEqual(window.location.href, initialHref,
+                "the url should not have changed after a click on an item");
+
+            dropdown.destroy();
+        });
+
+        QUnit.test('options rendering', async function (assert) {
+            assert.expect(6);
+
+            const dropdown = await createComponent(DropdownMenu, {
+                props: { items: this.items },
+            });
+
+            await testUtils.dom.click(dropdown.el.querySelector('button'));
+            assert.containsN(dropdown, '.dropdown-divider, .dropdown-item', 3);
+
+            const firstItemEl = dropdown.el.querySelector('.o_menu_item > a');
+            assert.hasClass(firstItemEl.querySelector('i'), 'o_icon_right fa fa-caret-right');
+            // open options menu
+            await testUtils.dom.click(firstItemEl);
+            assert.hasClass(firstItemEl.querySelector('i'), 'o_icon_right fa fa-caret-down');
+            assert.containsN(dropdown, '.dropdown-divider, .dropdown-item', 6);
+
+            // close options menu
+            await testUtils.dom.click(firstItemEl);
+            assert.hasClass(firstItemEl.querySelector('i'), 'o_icon_right fa fa-caret-right');
+            assert.containsN(dropdown, '.dropdown-divider, .dropdown-item', 3);
+
+            dropdown.destroy();
+        });
+
+        QUnit.test('close menu closes also submenus', async function (assert) {
+            assert.expect(2);
+
+            const dropdown = await createComponent(DropdownMenu, {
+                props: { items: this.items },
+            });
+
+            // open dropdown menu
+            await testUtils.dom.click(dropdown.el.querySelector('button'));
+            // open options menu of first item
+            await testUtils.dom.click(dropdown.el.querySelector('.o_menu_item a'));
+
+            assert.containsN(dropdown, '.dropdown-divider, .dropdown-item', 6);
+            await testUtils.dom.click(dropdown.el.querySelector('button'));
+
+            await testUtils.dom.click(dropdown.el.querySelector('button'));
+            assert.containsN(dropdown, '.dropdown-divider, .dropdown-item', 3);
+
+            dropdown.destroy();
+        });
+
+        QUnit.test('click on an option should trigger the event "item_option_clicked" with appropriate data', async function (assert) {
+            assert.expect(18);
+
+            let eventNumber = 0;
+            const dropdown = await createComponent(DropdownMenu, {
+                props: { items: this.items },
+                intercepts: {
+                    'item-selected': function (ev) {
+                        eventNumber++;
+                        const { option } = ev.detail;
+                        assert.strictEqual(ev.detail.item.id, 1);
+                        if (eventNumber === 1) {
+                            assert.strictEqual(option.id, 1);
+                            this.state.items[0].isActive = true;
+                            this.state.items[0].options[0].isActive = true;
+                        }
+                        if (eventNumber === 2) {
+                            assert.strictEqual(option.id, 2);
+                            this.state.items[0].options[1].isActive = true;
+                        }
+                        if (eventNumber === 3) {
+                            assert.strictEqual(option.id, 1);
+                            this.state.items[0].options[0].isActive = false;
+                        }
+                        if (eventNumber === 4) {
+                            assert.strictEqual(option.id, 2);
+                            this.state.items[0].isActive = false;
+                            this.state.items[0].options[1].isActive = false;
+                        }
+                    },
+                }
+            });
+
+            // open dropdown menu
+            await testUtils.dom.click(dropdown.el.querySelector('button'));
+            assert.containsN(dropdown, '.dropdown-divider, .o_menu_item', 3);
+
+            // open menu options of first item
+            await testUtils.dom.click(dropdown.el.querySelector('.o_menu_item > a'));
+            let optionELs = dropdown.el.querySelectorAll('.o_menu_item .o_item_option > a');
+
+            // click on first option
+            await testUtils.dom.click(optionELs[0]);
+            assert.hasClass(dropdown.el.querySelector('.o_menu_item > a'), 'selected');
+            optionELs = dropdown.el.querySelectorAll('.o_menu_item .o_item_option > a');
+            assert.hasClass(optionELs[0], 'selected');
+            assert.doesNotHaveClass(optionELs[1], 'selected');
+
+            // click on second option
+            await testUtils.dom.click(optionELs[1]);
+            assert.hasClass(dropdown.el.querySelector('.o_menu_item > a'), 'selected');
+            optionELs = dropdown.el.querySelectorAll('.o_menu_item .o_item_option > a');
+            assert.hasClass(optionELs[0], 'selected');
+            assert.hasClass(optionELs[1], 'selected');
+
+            // click again on first option
+            await testUtils.dom.click(optionELs[0]);
+            // click again on second option
+            await testUtils.dom.click(optionELs[1]);
+            assert.doesNotHaveClass(dropdown.el.querySelector('.o_menu_item > a'), 'selected');
+            optionELs = dropdown.el.querySelectorAll('.o_menu_item .o_item_option > a');
+            assert.doesNotHaveClass(optionELs[0], 'selected');
+            assert.doesNotHaveClass(optionELs[1], 'selected');
+
+            dropdown.destroy();
+        });
+
+        QUnit.test('keyboard navigation', async function (assert) {
+            assert.expect(12);
+
+            // Shorthand method to trigger a specific keydown.
+            // Note that BootStrap handles some of the navigation moves (up and down)
+            // so we need to give the event the proper "which" property. We also give
+            // it when it's not required to check if it has been correctly prevented.
+            async function navigate(key, global) {
+                const which = {
+                    Enter: 13,
+                    Escape: 27,
+                    ArrowLeft: 37,
+                    ArrowUp: 38,
+                    ArrowRight: 39,
+                    ArrowDown: 40,
+                }[key];
+                const target = global ? document.body : document.activeElement;
+                await testUtils.dom.triggerEvent(target, 'keydown', { key, which });
+                if (key === 'Enter') {
+                    // Pressing "Enter" on a focused element triggers a click (HTML5 specs)
+                    await testUtils.dom.click(target);
+                }
+            }
+
+            const dropdown = await createComponent(DropdownMenu, {
+                props: { items: this.items },
+            });
+
+            // Initialize active element (start at toggle button)
+            dropdown.el.querySelector('button').focus();
+            await testUtils.dom.click(dropdown.el.querySelector('button'));
+
+            await navigate('ArrowDown'); // Go to next item
+
+            assert.strictEqual(document.activeElement, dropdown.el.querySelector('.o_menu_item a'));
+            assert.containsNone(dropdown, '.o_item_option');
+
+            await navigate('ArrowRight'); // Unfold first item's options (w/ Right)
+
+            assert.strictEqual(document.activeElement, dropdown.el.querySelector('.o_menu_item a'));
+            assert.containsN(dropdown, '.o_item_option', 2);
+
+            await navigate('ArrowDown'); // Go to next option
+
+            assert.strictEqual(document.activeElement, dropdown.el.querySelector('.o_item_option a'));
+
+            await navigate('ArrowLeft'); // Fold first item's options (w/ Left)
+
+            assert.strictEqual(document.activeElement, dropdown.el.querySelector('.o_menu_item a'));
+            assert.containsNone(dropdown, '.o_item_option');
+
+            await navigate('Enter'); // Unfold first item's options (w/ Enter)
+
+            assert.strictEqual(document.activeElement, dropdown.el.querySelector('.o_menu_item a'));
+            assert.containsN(dropdown, '.o_item_option', 2);
+
+            await navigate('ArrowDown'); // Go to next option
+            await navigate('Escape'); // Fold first item's options (w/ Escape)
+            await testUtils.nextTick();
+
+            assert.strictEqual(dropdown.el.querySelector('.o_menu_item a'), document.activeElement);
+            assert.containsNone(dropdown, '.o_item_option');
+
+            await navigate('Escape', true); // Close the dropdown
+
+            assert.containsNone(dropdown, 'ul.o_dropdown_menu', "Dropdown should be folded");
+
+            dropdown.destroy();
+        });
+
+        QUnit.test('interactions between multiple dropdowns', async function (assert) {
+            assert.expect(7);
+
+            const props = { items: this.items };
+            class Parent extends owl.Component {
+                constructor() {
+                    super(...arguments);
+                    this.state = owl.useState(props);
+                }
+            }
+            Parent.components = { DropdownMenu };
+            Parent.template = owl.tags.xml`
+                <div>
+                    <DropdownMenu class="first" title="'First'" items="state.items"/>
+                    <DropdownMenu class="second" title="'Second'" items="state.items"/>
+                </div>`;
+            const parent = new Parent();
+            await parent.mount(testUtils.prepareTarget(), { position: 'first-child' });
+
+            const [menu1, menu2] = parent.el.querySelectorAll('.o_dropdown');
+
+            assert.containsNone(parent, '.o_dropdown_menu');
+
+            await testUtils.dom.click(menu1.querySelector('button'));
+
+            assert.containsOnce(parent, '.o_dropdown_menu');
+            assert.containsOnce(parent, '.o_dropdown.first .o_dropdown_menu');
+
+            await testUtils.dom.click(menu2.querySelector('button'));
+
+            assert.containsOnce(parent, '.o_dropdown_menu');
+            assert.containsOnce(parent, '.o_dropdown.second .o_dropdown_menu');
+
+            await testUtils.dom.click(menu2.querySelector('.o_menu_item a'));
+            await testUtils.dom.click(menu1.querySelector('button'));
+
+            assert.containsOnce(parent, '.o_dropdown_menu');
+            assert.containsOnce(parent, '.o_dropdown.first .o_dropdown_menu');
+
+            parent.destroy();
+        });
+    });
+});
diff --git a/addons/web/static/tests/components/pager_tests.js b/addons/web/static/tests/components/pager_tests.js
new file mode 100644
index 00000000000..424bdde1eaa
--- /dev/null
+++ b/addons/web/static/tests/components/pager_tests.js
@@ -0,0 +1,163 @@
+odoo.define('web.pager_tests', function (require) {
+    "use strict";
+
+    const Pager = require('web.Pager');
+    const testUtils = require('web.test_utils');
+
+    const cpHelpers = testUtils.controlPanel;
+    const { createComponent } = testUtils;
+
+    QUnit.module('Components', {}, function () {
+
+        QUnit.module('Pager');
+
+        QUnit.test('basic interactions', async function (assert) {
+            assert.expect(2);
+
+            const pager = await createComponent(Pager, {
+                props: {
+                    currentMinimum: 1,
+                    limit: 4,
+                    size: 10,
+                },
+                intercepts: {
+                    'pager-changed': function (ev) {
+                        Object.assign(this.state, ev.detail);
+                    },
+                },
+            });
+
+            assert.strictEqual(cpHelpers.getPagerValue(pager), "1-4",
+                "currentMinimum should be set to 1");
+
+            await cpHelpers.pagerNext(pager);
+
+            assert.strictEqual(cpHelpers.getPagerValue(pager), "5-8",
+                "currentMinimum should now be 5");
+
+            pager.destroy();
+        });
+
+        QUnit.test('edit the pager', async function (assert) {
+            assert.expect(4);
+
+            const pager = await createComponent(Pager, {
+                props: {
+                    currentMinimum: 1,
+                    limit: 4,
+                    size: 10,
+                },
+                intercepts: {
+                    'pager-changed': function (ev) {
+                        Object.assign(this.state, ev.detail);
+                    },
+                },
+            });
+
+            await testUtils.dom.click(pager.el.querySelector('.o_pager_value'));
+
+            assert.containsOnce(pager, 'input',
+                "the pager should contain an input");
+            assert.strictEqual(cpHelpers.getPagerValue(pager), "1-4",
+                "the input should have correct value");
+
+            // change the limit
+            await cpHelpers.setPagerValue(pager, "1-6");
+
+            assert.containsNone(pager, 'input',
+                "the pager should not contain an input anymore");
+            assert.strictEqual(cpHelpers.getPagerValue(pager), "1-6",
+                "the limit should have been updated");
+
+            pager.destroy();
+        });
+
+        QUnit.test('pager value formatting', async function (assert) {
+            assert.expect(8);
+
+            const pager = await createComponent(Pager, {
+                props: {
+                    currentMinimum: 1,
+                    limit: 4,
+                    size: 10,
+                },
+                intercepts: {
+                    'pager-changed': function (ev) {
+                        Object.assign(this.state, ev.detail);
+                    },
+                },
+            });
+
+            assert.strictEqual(cpHelpers.getPagerValue(pager), "1-4", "Initial value should be correct");
+
+            async function inputAndAssert(input, expected, reason) {
+                await cpHelpers.setPagerValue(pager, input);
+                assert.strictEqual(cpHelpers.getPagerValue(pager), expected,
+                    `Pager value should be "${expected}" when given "${input}": ${reason}`);
+            }
+
+            await inputAndAssert("4-4", "4", "values are squashed when minimum = maximum");
+            await inputAndAssert("1-11", "1-10", "maximum is floored to size when out of range");
+            await inputAndAssert("20-15", "10", "combination of the 2 assertions above");
+            await inputAndAssert("6-5", "10", "fallback to previous value when minimum > maximum");
+            await inputAndAssert("definitelyValidNumber", "10", "fallback to previous value if not a number");
+            await inputAndAssert(" 1 ,  2   ", "1-2", "value is normalized and accepts several separators");
+            await inputAndAssert("3  8", "3-8", "value accepts whitespace(s) as a separator");
+
+            pager.destroy();
+        });
+
+        QUnit.test('pager disabling', async function (assert) {
+            assert.expect(9);
+
+            const reloadPromise = testUtils.makeTestPromise();
+            const pager = await createComponent(Pager, {
+                props: {
+                    currentMinimum: 1,
+                    limit: 4,
+                    size: 10,
+                },
+                intercepts: {
+                    // The goal here is to test the reactivity of the pager; in a
+                    // typical views, we disable the pager after switching page
+                    // to avoid switching twice with the same action (double click).
+                    'pager-changed': async function (ev) {
+                        // 1. Simulate a (long) server action
+                        await reloadPromise;
+                        // 2. Update the view with loaded data
+                        Object.assign(this.state, ev.detail);
+                    },
+                },
+            });
+            const pagerButtons = pager.el.querySelectorAll('button');
+
+            // Click twice
+            await cpHelpers.pagerNext(pager);
+            await cpHelpers.pagerNext(pager);
+            // Try to edit the pager value
+            await testUtils.dom.click(pager.el.querySelector('.o_pager_value'));
+
+            assert.strictEqual(pagerButtons.length, 2, "the two buttons should be displayed");
+            assert.ok(pagerButtons[0].disabled, "'previous' is disabled");
+            assert.ok(pagerButtons[1].disabled, "'next' is disabled");
+            assert.strictEqual(pager.el.querySelector('.o_pager_value').tagName, 'SPAN',
+                "pager edition is prevented");
+
+            // Server action is done
+            reloadPromise.resolve();
+            await testUtils.nextTick();
+
+            assert.strictEqual(pagerButtons.length, 2, "the two buttons should be displayed");
+            assert.notOk(pagerButtons[0].disabled, "'previous' is enabled");
+            assert.notOk(pagerButtons[1].disabled, "'next' is enabled");
+            assert.strictEqual(cpHelpers.getPagerValue(pager), "5-8", "value has been updated");
+
+            await testUtils.dom.click(pager.el.querySelector('.o_pager_value'));
+
+            assert.strictEqual(pager.el.querySelector('.o_pager_value').tagName, 'INPUT',
+                "pager edition is re-enabled");
+
+            pager.destroy();
+        });
+    });
+});
diff --git a/addons/web/static/tests/control_panel/control_panel_model_tests.js b/addons/web/static/tests/control_panel/control_panel_model_tests.js
new file mode 100644
index 00000000000..bfde57ee082
--- /dev/null
+++ b/addons/web/static/tests/control_panel/control_panel_model_tests.js
@@ -0,0 +1,294 @@
+odoo.define('web.control_panel_model_tests', function (require) {
+    "use strict";
+
+    const ControlPanelModel = require('web.ControlPanelModel');
+    const makeTestEnvironment = require('web.test_env');
+
+    function createControlPanelModel(config = {}) {
+        return new ControlPanelModel(Object.assign(
+            { env: makeTestEnvironment() },
+            config
+        ));
+    }
+    function sanitizeFilters(model) {
+        return Object.values(model.state.filters).map(filter => {
+            const copy = Object.assign({}, filter);
+            delete copy.groupId;
+            delete copy.groupNumber;
+            delete copy.id;
+            return copy;
+        });
+    }
+
+    QUnit.module('ControlPanelModel', {
+        beforeEach() {
+            this.fields = {
+                display_name: { string: "Displayed name", type: 'char' },
+                foo: { string: "Foo", type: "char", default: "My little Foo Value", store: true, sortable: true },
+                date_field: { string: "Date", type: "date", store: true, sortable: true },
+                float_field: { string: "Float", type: "float" },
+                bar: { string: "Bar", type: "many2one", relation: 'partner' },
+            };
+        }
+    }, function () {
+        QUnit.module('Arch parsing');
+
+        QUnit.test('empty arch', function (assert) {
+            assert.expect(1);
+
+            const model = createControlPanelModel();
+            assert.deepEqual(sanitizeFilters(model), [{ type: 'timeRange' }]);
+        });
+
+        QUnit.test('one field tag', function (assert) {
+            assert.expect(1);
+            const arch = `
+                <search>
+                    <field name="bar"/>
+                </search>`;
+            const fields = this.fields;
+            const model = createControlPanelModel({ viewInfo: { arch, fields } });
+            assert.deepEqual(sanitizeFilters(model), [
+                {
+                    description: "Bar",
+                    fieldName: "bar",
+                    fieldType: "many2one",
+                    type: "field"
+                },
+                { type: 'timeRange' },
+            ]);
+        });
+
+        QUnit.test('one separator tag', function (assert) {
+            assert.expect(1);
+            const arch = `
+            <search>
+                <separator/>
+            </search>`;
+            const fields = this.fields;
+            const model = createControlPanelModel({ viewInfo: { arch, fields } });
+            assert.deepEqual(sanitizeFilters(model), [{ type: 'timeRange' }]);
+        });
+
+        QUnit.test('one separator tag and one field tag', function (assert) {
+            assert.expect(1);
+            const arch = `
+                <search>
+                    <separator/>
+                    <field name="bar"/>
+                </search>`;
+            const fields = this.fields;
+            const model = createControlPanelModel({ viewInfo: { arch, fields } });
+            assert.deepEqual(sanitizeFilters(model), [
+                {
+                    description: "Bar",
+                    fieldName: "bar",
+                    fieldType: "many2one",
+                    type: "field"
+                },
+                { type: 'timeRange' },
+            ]);
+        });
+
+        QUnit.test('one filter tag', function (assert) {
+            assert.expect(1);
+            const arch = `
+                <search>
+                    <filter name="filter" string="Hello" domain="[]"/>
+                </search>`;
+            const fields = this.fields;
+            const model = createControlPanelModel({ viewInfo: { arch, fields } });
+            assert.deepEqual(sanitizeFilters(model), [
+                {
+                    description: "Hello",
+                    domain: "[]",
+                    type: "filter",
+                },
+                { type: 'timeRange' },
+            ]);
+        });
+
+        QUnit.test('one groupBy tag', function (assert) {
+            assert.expect(1);
+            const arch = `
+                <search>
+                    <filter name="groupby" string="Hi" context="{ 'group_by': 'date_field:day'}"/>
+                </search>`;
+            const fields = this.fields;
+            const model = createControlPanelModel({ viewInfo: { arch, fields } });
+            assert.deepEqual(sanitizeFilters(model), [
+                {
+                    defaultOptionId: "day",
+                    description: "Hi",
+                    fieldName: "date_field",
+                    fieldType: "date",
+                    hasOptions: true,
+                    type: "groupBy",
+                },
+                { type: 'timeRange' },
+            ]);
+        });
+
+        QUnit.test('two filter tags', function (assert) {
+            assert.expect(1);
+            const arch = `
+                <search>
+                    <filter name="filter_1" string="Hello One" domain="[]"/>
+                    <filter name="filter_2" string="Hello Two" domain="[('bar', '=', 3)]"/>
+                </search>`;
+            const fields = this.fields;
+            const model = createControlPanelModel({ viewInfo: { arch, fields } });
+            assert.deepEqual(sanitizeFilters(model), [
+                {
+                    description: "Hello One",
+                    domain: "[]",
+                    type: "filter",
+                },
+                {
+                    description: "Hello Two",
+                    domain: "[('bar', '=', 3)]",
+                    type: "filter",
+                },
+                { type: 'timeRange' },
+            ]);
+        });
+
+        QUnit.test('two filter tags separated by a separator', function (assert) {
+            assert.expect(1);
+            const arch = `
+                <search>
+                    <filter name="filter_1" string="Hello One" domain="[]"/>
+                    <separator/>
+                    <filter name="filter_2" string="Hello Two" domain="[('bar', '=', 3)]"/>
+                </search>`;
+            const fields = this.fields;
+            const model = createControlPanelModel({ viewInfo: { arch, fields } });
+            assert.deepEqual(sanitizeFilters(model), [
+                {
+                    description: "Hello One",
+                    domain: "[]",
+                    type: "filter",
+                },
+                {
+                    description: "Hello Two",
+                    domain: "[('bar', '=', 3)]",
+                    type: "filter",
+                },
+                { type: 'timeRange' },
+            ]);
+        });
+
+        QUnit.test('one filter tag and one field', function (assert) {
+            assert.expect(1);
+            const arch = `
+                <search>
+                    <filter name="filter" string="Hello" domain="[]"/>
+                    <field name="bar"/>
+                </search>`;
+            const fields = this.fields;
+            const model = createControlPanelModel({ viewInfo: { arch, fields } });
+            assert.deepEqual(sanitizeFilters(model), [
+                {
+                    description: "Hello",
+                    domain: "[]",
+                    type: "filter",
+                },
+                {
+                    description: "Bar",
+                    fieldName: "bar",
+                    fieldType: "many2one",
+                    type: "field",
+                },
+                { type: 'timeRange' },
+            ]);
+        });
+
+        QUnit.test('two field tags', function (assert) {
+            assert.expect(1);
+            const arch = `
+                <search>
+                    <field name="foo"/>
+                    <field name="bar"/>
+                </search>`;
+            const fields = this.fields;
+            const model = createControlPanelModel({ viewInfo: { arch, fields } });
+            assert.deepEqual(sanitizeFilters(model), [
+                {
+                    description: "Foo",
+                    fieldName: "foo",
+                    fieldType: "char",
+                    type: "field"
+                },
+                {
+                    description: "Bar",
+                    fieldName: "bar",
+                    fieldType: "many2one",
+                    type: "field"
+                },
+                { type: 'timeRange' },
+            ]);
+        });
+
+        QUnit.module('Preparing initial state');
+
+        QUnit.test('process favorite filters', async function (assert) {
+            assert.expect(1);
+            const favoriteFilters = [{
+                user_id: [2, "Mitchell Admin"],
+                name: 'Sorted filter',
+                id: 5,
+                context: {
+                    group_by: ['foo', 'bar']
+                },
+                sort: '["foo", "-bar"]',
+                domain: "[('user_id', '=', uid)]",
+            }];
+
+            const model = createControlPanelModel({ viewInfo: { favoriteFilters } });
+            assert.deepEqual(sanitizeFilters(model), [
+                {
+                    context: {},
+                    description: "Sorted filter",
+                    domain: "[('user_id', '=', uid)]",
+                    groupBys: ['foo', 'bar'],
+                    orderedBy: [
+                        {
+                            asc: true,
+                            name: "foo"
+                        },
+                        {
+                            asc: false,
+                            name: "bar"
+                        }
+                    ],
+                    removable: true,
+                    serverSideId: 5,
+                    type: "favorite",
+                    userId: 2
+                },
+                { type: 'timeRange' }
+            ]);
+
+        });
+
+        QUnit.test('process dynamic filters', async function (assert) {
+            assert.expect(1);
+            const dynamicFilters = [{
+                description: 'Quick search',
+                domain: [['id', 'in', [1, 3, 4]]]
+            }];
+
+            const model = createControlPanelModel({ dynamicFilters });
+            assert.deepEqual(sanitizeFilters(model), [
+                {
+                    description: 'Quick search',
+                    domain: "[[\"id\",\"in\",[1,3,4]]]",
+                    isDefault: true,
+                    type: 'filter'
+                },
+                { type: 'timeRange' },
+            ]);
+
+        });
+    });
+});
diff --git a/addons/web/static/tests/control_panel/control_panel_tests.js b/addons/web/static/tests/control_panel/control_panel_tests.js
new file mode 100644
index 00000000000..560063cefb2
--- /dev/null
+++ b/addons/web/static/tests/control_panel/control_panel_tests.js
@@ -0,0 +1,129 @@
+odoo.define('web.control_panel_tests', function (require) {
+    "use strict";
+
+    const testUtils = require('web.test_utils');
+
+    const cpHelpers = testUtils.controlPanel;
+    const { createControlPanel } = testUtils;
+
+    QUnit.module('ControlPanel', {
+        beforeEach() {
+            this.fields = {
+                display_name: { string: "Displayed name", type: 'char', searchable: true },
+                foo: { string: "Foo", type: "char", default: "My little Foo Value", store: true, sortable: true, searchable: true },
+                date_field: { string: "Date", type: "date", store: true, sortable: true, searchable: true },
+                float_field: { string: "Float", type: "float", searchable: true },
+                bar: { string: "Bar", type: "many2one", relation: 'partner', searchable: true },
+            };
+        }
+    }, function () {
+
+        QUnit.module('Keyboard navigation');
+
+        QUnit.test('remove a facet with backspace', async function (assert) {
+            assert.expect(2);
+
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: {
+                        arch: `<search> <field name="foo"/></search>`,
+                        fields: this.fields,
+                    },
+                    actionContext: { search_default_foo: "a" },
+                },
+                cpProps: { fields: this.fields },
+            };
+
+            const controlPanel = await createControlPanel(params);
+
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Foo\na']);
+
+            // delete a facet
+            const searchInput = controlPanel.el.querySelector('input.o_searchview_input');
+            await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'Backspace' });
+
+            assert.containsNone(controlPanel, 'div.o_searchview div.o_searchview_facet');
+
+            // delete nothing (should not crash)
+            await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'Backspace' });
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('fields and filters with groups/invisible attribute', async function (assert) {
+            // navigation and automatic menu closure don't work here (i don't know why yet) -->
+            // should be tested separatly
+            assert.expect(14);
+
+            const arch = `
+                <search>
+                    <field name="display_name" string="Foo B" invisible="1"/>
+                    <field name="foo" string="Foo A"/>
+                    <filter name="filterA" string="FA" domain="[]"/>
+                    <filter name="filterB" string="FB" invisible="1" domain="[]"/>
+                    <filter name="groupByA" string="GA" context="{ 'group_by': 'date_field:day' }"/>
+                    <filter name="groupByB" string="GB" context="{ 'group_by': 'date_field:day' }" invisible="1"/>
+                </search>`;
+            const searchMenuTypes = ['filter', 'groupBy'];
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: { arch, fields: this.fields },
+                    actionContext: {
+                        search_default_display_name: 'value',
+                        search_default_filterB: true,
+                        search_default_groupByB: true
+                    },
+                    searchMenuTypes
+                },
+                cpProps: { fields: this.fields, searchMenuTypes },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            function selectorContainsValue(selector, value, shouldContain) {
+                const elements = [...controlPanel.el.querySelectorAll(selector)];
+                const regExp = new RegExp(value);
+                const matches = elements.filter(el => regExp.test(el.innerText.replace(/\s/g, "")));
+                assert.strictEqual(matches.length, shouldContain ? 1 : 0,
+                    `${selector} in the control panel should${shouldContain ? '' : ' not'} contain "${value}".`
+                );
+            }
+
+            // default filters/fields should be activated even if invisible
+            assert.containsN(controlPanel, 'div.o_searchview_facet', 3);
+            selectorContainsValue('.o_searchview_facet', "FooBvalue", true);
+            selectorContainsValue('.o_searchview_facet .o_facet_values', "FB", true);
+            selectorContainsValue('.o_searchview_facet .o_facet_values', "GB", true);
+
+            await cpHelpers.toggleFilterMenu(controlPanel);
+
+            selectorContainsValue('.o_menu_item a', "FA", true);
+            selectorContainsValue('.o_menu_item a', "FB", false);
+
+            await cpHelpers.toggleGroupByMenu(controlPanel);
+
+            selectorContainsValue('.o_menu_item a', "GA", true);
+            selectorContainsValue('.o_menu_item a', "GB", false);
+
+            // 'a' to filter nothing on bar
+            await cpHelpers.editSearch(controlPanel, 'a');
+
+            // the only item in autocomplete menu should be FooA: a
+            selectorContainsValue('.o_searchview_autocomplete', "SearchFooAfor:a", true);
+            await cpHelpers.validateSearch(controlPanel);
+            selectorContainsValue('.o_searchview_facet', "FooAa", true);
+
+            // The items in the Filters menu and the Group By menu should be the same as before
+            await cpHelpers.toggleFilterMenu(controlPanel);
+
+            selectorContainsValue('.o_menu_item a', "FA", true);
+            selectorContainsValue('.o_menu_item a', "FB", false);
+
+            await cpHelpers.toggleGroupByMenu(controlPanel);
+
+            selectorContainsValue('.o_menu_item a', "GA", true);
+            selectorContainsValue('.o_menu_item a', "GB", false);
+
+            controlPanel.destroy();
+        });
+    });
+});
diff --git a/addons/web/static/tests/control_panel/custom_filter_item_tests.js b/addons/web/static/tests/control_panel/custom_filter_item_tests.js
new file mode 100644
index 00000000000..0d9cfac7bf2
--- /dev/null
+++ b/addons/web/static/tests/control_panel/custom_filter_item_tests.js
@@ -0,0 +1,355 @@
+odoo.define('web.filter_menu_generator_tests', function (require) {
+    "use strict";
+
+    const Domain = require('web.Domain');
+    const CustomFilterItem = require('web.CustomFilterItem');
+    const { Model } = require('web.model');
+    const pyUtils = require('web.py_utils');
+    const testUtils = require('web.test_utils');
+    const session = require('web.session');
+
+    const cpHelpers = testUtils.controlPanel;
+    const { createComponent } = testUtils;
+
+    function patchSession(newSession) {
+        // We have to patch the "legacy" session because field_utils is using it.
+        // TODO: remove it when the field_utils are re-written.
+        const initialSession = session;
+        Object.assign(session, newSession);
+        return function () {
+            Object.assign(session, initialSession);
+        };
+    }
+
+    QUnit.module('Components', {
+        beforeEach: function () {
+            this.fields = {
+                date_field: { name: 'date_field', string: "A date", type: 'date', searchable: true },
+                date_time_field: { name: 'date_time_field', string: "DateTime", type: 'datetime', searchable: true },
+                boolean_field: { name: 'boolean_field', string: "Boolean Field", type: 'boolean', default: true, searchable: true },
+                char_field: { name: 'char_field', string: "Char Field", type: 'char', default: "foo", trim: true, searchable: true },
+                float_field: { name: 'float_field', string: "Floaty McFloatface", type: 'float', searchable: true },
+            };
+        },
+    }, function () {
+
+        QUnit.module('CustomFilterItem');
+
+        QUnit.test('basic rendering', async function (assert) {
+            assert.expect(17);
+
+            const cfi = await createComponent(CustomFilterItem, {
+                props: {
+                    fields: this.fields,
+                },
+                env: {
+                    controlPanelModel: new Model(),
+                },
+            });
+
+            assert.strictEqual(cfi.el.innerText.trim(), "Add Custom Filter");
+            assert.hasClass(cfi.el, 'o_generator_menu');
+            assert.strictEqual(cfi.el.children.length, 1);
+
+            await cpHelpers.toggleAddCustomFilter(cfi);
+
+            // Single condition
+            assert.containsOnce(cfi, 'div.o_filter_condition');
+            assert.containsOnce(cfi, 'div.o_filter_condition > select.o_generator_menu_field');
+            assert.containsOnce(cfi, 'div.o_filter_condition > select.o_generator_menu_operator');
+            assert.containsOnce(cfi, 'div.o_filter_condition > span.o_generator_menu_value');
+            assert.containsNone(cfi, 'div.o_filter_condition .o_or_filter');
+            assert.containsNone(cfi, 'div.o_filter_condition .o_generator_menu_delete');
+
+            // no deletion allowed on single condition
+            assert.containsNone(cfi, 'div.o_filter_condition > i.o_generator_menu_delete');
+
+            // Buttons
+            assert.containsOnce(cfi, 'div.o_add_filter_menu');
+            assert.containsOnce(cfi, 'div.o_add_filter_menu > button.o_apply_filter');
+            assert.containsOnce(cfi, 'div.o_add_filter_menu > button.o_add_condition');
+
+            assert.containsOnce(cfi, 'div.o_filter_condition');
+
+            await testUtils.dom.click('button.o_add_condition');
+
+            assert.containsN(cfi, 'div.o_filter_condition', 2);
+            assert.containsOnce(cfi, 'div.o_filter_condition .o_or_filter');
+            assert.containsN(cfi, 'div.o_filter_condition .o_generator_menu_delete', 2);
+
+            cfi.destroy();
+        });
+
+        QUnit.test('adding a simple filter works', async function (assert) {
+            assert.expect(5);
+
+            delete this.fields.date_field;
+            class MockedControlPanelModel extends Model {
+                createNewFilters(preFilters) {
+                    const preFilter = preFilters[0];
+                    assert.strictEqual(preFilter.type, 'filter');
+                    assert.strictEqual(preFilter.description, 'Boolean Field is true');
+                    assert.strictEqual(preFilter.domain, '[["boolean_field","=",True]]');
+                }
+            }
+            const controlPanelModel = new MockedControlPanelModel();
+            const cfi = await createComponent(CustomFilterItem, {
+                props: {
+                    fields: this.fields,
+                },
+                env: { controlPanelModel },
+            });
+
+            await cpHelpers.toggleAddCustomFilter(cfi);
+            await cpHelpers.applyFilter(cfi);
+
+            // The only thing visible should be the button 'Add Custome Filter';
+            assert.strictEqual(cfi.el.children.length, 1);
+            assert.containsOnce(cfi, 'button.o_add_custom_filter');
+
+            cfi.destroy();
+        });
+
+        QUnit.test('commit search with an extended proposition with field char does not cause a crash', async function (assert) {
+            assert.expect(6);
+
+            this.fields.many2one_field = { name: 'many2one_field', string: "Trululu", type: "many2one", searchable: true };
+            const expectedDomains = [
+                [['many2one_field', 'ilike', `a`]],
+                [['many2one_field', 'ilike', `"a"`]],
+                [['many2one_field', 'ilike', `'a'`]],
+                [['many2one_field', 'ilike', `'`]],
+                [['many2one_field', 'ilike', `"`]],
+                [['many2one_field', 'ilike', `\\`]],
+            ];
+            const testedValues = [`a`, `"a"`, `'a'`, `'`, `"`, `\\`];
+            class MockedControlPanelModel extends Model {
+                createNewFilters(preFilters) {
+                    const preFilter = preFilters[0];
+                    // this step combine a tokenization/parsing followed by a string formatting
+                    let domain = pyUtils.assembleDomains([preFilter.domain]);
+                    domain = Domain.prototype.stringToArray(domain);
+                    assert.deepEqual(domain, expectedDomains.shift());
+                }
+            }
+            const controlPanelModel = new MockedControlPanelModel();
+            const cfi = await createComponent(CustomFilterItem, {
+                props: {
+                    fields: this.fields,
+                },
+                env: { controlPanelModel },
+            });
+
+            async function testValue(value) {
+                // open filter menu generator, select trululu field and enter string `a`, then click apply
+                await cpHelpers.toggleAddCustomFilter(cfi);
+                await testUtils.fields.editSelect(cfi.el.querySelector('select.o_generator_menu_field'), 'many2one_field');
+                await testUtils.fields.editInput(cfi.el.querySelector(
+                    'div.o_filter_condition > span.o_generator_menu_value input'),
+                    value
+                );
+                await cpHelpers.applyFilter(cfi);
+            }
+
+            for (const value of testedValues) {
+                await testValue(value);
+            }
+
+            cfi.destroy();
+        });
+
+        QUnit.test('custom filter datetime with equal operator', async function (assert) {
+            assert.expect(4);
+
+            patchSession({
+                getTZOffset: function () {
+                    return -240;
+                },
+            });
+            class MockedControlPanelModel extends Model {
+                createNewFilters(preFilters) {
+                    const preFilter = preFilters[0];
+                    assert.strictEqual(preFilter.description,
+                        'DateTime is equal to "02/22/2017 11:00:00"',
+                        "description should be in localized format");
+                    assert.deepEqual(preFilter.domain,
+                        '[["date_time_field","=","2017-02-22 15:00:00"]]',
+                        "domain should be in UTC format");
+                }
+            }
+            const controlPanelModel = new MockedControlPanelModel();
+            const cfi = await createComponent(CustomFilterItem, {
+                props: {
+                    fields: this.fields,
+                },
+                env: { controlPanelModel },
+            });
+
+            await cpHelpers.toggleAddCustomFilter(cfi);
+            await testUtils.fields.editSelect(cfi.el.querySelector('.o_generator_menu_field'), 'date_time_field');
+
+            assert.strictEqual(cfi.el.querySelector('.o_generator_menu_field').value, 'date_time_field');
+            assert.strictEqual(cfi.el.querySelector('.o_generator_menu_operator').value, 'between');
+
+            await testUtils.fields.editSelect(cfi.el.querySelector('.o_generator_menu_operator'), '=');
+            await testUtils.fields.editSelect(cfi.el.querySelector('div.o_filter_condition > span.o_generator_menu_value input'), '02/22/2017 11:00:00'); // in TZ
+            await cpHelpers.applyFilter(cfi);
+
+            cfi.destroy();
+        });
+
+        QUnit.test('custom filter datetime between operator', async function (assert) {
+            assert.expect(4);
+
+            patchSession({
+                getTZOffset: function () {
+                    return -240;
+                },
+            });
+            class MockedControlPanelModel extends Model {
+                createNewFilters(preFilters) {
+                    const preFilter = preFilters[0];
+                    assert.strictEqual(preFilter.description,
+                        'DateTime is between "02/22/2017 11:00:00 and 02/22/2017 17:00:00"',
+                        "description should be in localized format");
+                    assert.deepEqual(preFilter.domain,
+                        '[["date_time_field",">=","2017-02-22 15:00:00"]' +
+                        ',["date_time_field","<=","2017-02-22 21:00:00"]]',
+                        "domain should be in UTC format");
+                }
+            }
+            const controlPanelModel = new MockedControlPanelModel();
+            const cfi = await createComponent(CustomFilterItem, {
+                props: {
+                    fields: this.fields,
+                },
+                env: { controlPanelModel },
+            });
+
+            await cpHelpers.toggleAddCustomFilter(cfi);
+            await testUtils.fields.editSelect(cfi.el.querySelector('.o_generator_menu_field'), 'date_time_field');
+
+            assert.strictEqual(cfi.el.querySelector('.o_generator_menu_field').value, 'date_time_field');
+            assert.strictEqual(cfi.el.querySelector('.o_generator_menu_operator').value, 'between');
+
+            const valueInputs = cfi.el.querySelectorAll('.o_generator_menu_value .o_input');
+            await testUtils.fields.editSelect(valueInputs[0], '02/22/2017 11:00:00'); // in TZ
+            await testUtils.fields.editSelect(valueInputs[1], '02-22-2017 17:00:00'); // in TZ
+            await cpHelpers.applyFilter(cfi);
+
+            cfi.destroy();
+        });
+
+        QUnit.test('input value parsing', async function (assert) {
+            assert.expect(6);
+
+            const cfi = await createComponent(CustomFilterItem, {
+                props: {
+                    fields: this.fields,
+                },
+                env: {
+                    controlPanelModel: new Model(),
+                },
+            });
+
+            await cpHelpers.toggleAddCustomFilter(cfi);
+            await testUtils.dom.click('button.o_add_condition');
+
+            const [floatSelect, idSelect] = cfi.el.querySelectorAll('.o_generator_menu_field');
+            await testUtils.fields.editSelect(floatSelect, 'float_field');
+            await testUtils.fields.editSelect(idSelect, 'id');
+
+            const [floatInput, idInput] = cfi.el.querySelectorAll('.o_generator_menu_value .o_input');
+
+            // Default values
+            assert.strictEqual(floatInput.value, "0.0");
+            assert.strictEqual(idInput.value, "0");
+
+            // Float parsing
+            await testUtils.fields.editInput(floatInput, 4.2);
+            assert.strictEqual(floatInput.value, "4.2");
+            await testUtils.fields.editInput(floatInput, "DefinitelyValidFloat");
+            assert.strictEqual(floatInput.value, "4.2");
+
+            // Number parsing
+            await testUtils.fields.editInput(idInput, 4);
+            assert.strictEqual(idInput.value, "4");
+            await testUtils.fields.editInput(idInput, "DefinitelyValidID");
+            assert.strictEqual(idInput.value, "4");
+
+            cfi.destroy();
+        });
+
+        QUnit.test('add custom filter with multiple values', async function (assert) {
+            assert.expect(1);
+
+            class MockedControlPanelModel extends Model {
+                createNewFilters(preFilters) {
+                    const expected = [
+                        {
+                            description: 'A date is equal to "01/09/1997"',
+                            domain: '[["date_field","=","1997-01-09"]]',
+                            type: "filter",
+                        },
+                        {
+                            description: 'Boolean Field is true',
+                            domain: '[["boolean_field","=",True]]',
+                            type: "filter",
+                        },
+                        {
+                            description: 'Floaty McFloatface is equal to "7.2"',
+                            domain: '[["float_field","=",7.2]]',
+                            type: "filter",
+                        },
+                        {
+                            description: 'ID is "9"',
+                            domain: '[["id","=",9]]',
+                            type: "filter",
+                        },
+                    ];
+                    assert.deepEqual(preFilters, expected,
+                        "Conditions should be in the correct order witht the right values.");
+                }
+            }
+            const controlPanelModel = new MockedControlPanelModel();
+            const cfi = await createComponent(CustomFilterItem, {
+                props: {
+                    fields: this.fields,
+                },
+                env: { controlPanelModel },
+            });
+
+            await cpHelpers.toggleAddCustomFilter(cfi);
+            await testUtils.dom.click('button.o_add_condition');
+            await testUtils.dom.click('button.o_add_condition');
+            await testUtils.dom.click('button.o_add_condition');
+            await testUtils.dom.click('button.o_add_condition');
+
+            function getCondition(index, selector) {
+                const condition = cfi.el.querySelectorAll('.o_filter_condition')[index];
+                return condition.querySelector(selector);
+            }
+
+            await testUtils.fields.editSelect(getCondition(0, '.o_generator_menu_field'), 'date_field');
+            await testUtils.fields.editSelect(getCondition(0, '.o_generator_menu_value .o_input'), '01/09/1997');
+
+            await testUtils.fields.editSelect(getCondition(1, '.o_generator_menu_field'), 'boolean_field');
+            await testUtils.fields.editInput(getCondition(1, '.o_generator_menu_operator'), '!=');
+
+            await testUtils.fields.editSelect(getCondition(2, '.o_generator_menu_field'), 'char_field');
+            await testUtils.fields.editInput(getCondition(2, '.o_generator_menu_value .o_input'), "I will be deleted anyway");
+
+            await testUtils.fields.editSelect(getCondition(3, '.o_generator_menu_field'), 'float_field');
+            await testUtils.fields.editInput(getCondition(3, '.o_generator_menu_value .o_input'), 7.2);
+
+            await testUtils.fields.editSelect(getCondition(4, '.o_generator_menu_field'), 'id');
+            await testUtils.fields.editInput(getCondition(4, '.o_generator_menu_value .o_input'), 9);
+
+            await testUtils.dom.click(getCondition(2, '.o_generator_menu_delete'));
+
+            await cpHelpers.applyFilter(cfi);
+
+            cfi.destroy();
+        });
+    });
+});
diff --git a/addons/web/static/tests/control_panel/custom_group_by_item_tests.js b/addons/web/static/tests/control_panel/custom_group_by_item_tests.js
new file mode 100644
index 00000000000..957668a2dae
--- /dev/null
+++ b/addons/web/static/tests/control_panel/custom_group_by_item_tests.js
@@ -0,0 +1,72 @@
+odoo.define('web.groupby_menu_generator_tests', function (require) {
+    "use strict";
+
+    const CustomGroupByItem = require('web.CustomGroupByItem');
+    const { Model } = require('web.model');
+    const testUtils = require('web.test_utils');
+
+    const { createComponent } = testUtils;
+
+    QUnit.module('Components', {}, function () {
+
+        QUnit.module('CustomGroupByItem');
+
+        QUnit.test('click on add custom group toggle group selector', async function (assert) {
+            assert.expect(6);
+
+            const cgi = await createComponent(CustomGroupByItem, {
+                props: {
+                    fields: [
+                        { sortable: true, name: "date", string: 'Super Date', type: 'date' },
+                    ],
+                },
+                env: {
+                    controlPanelModel: new Model(),
+                },
+            });
+
+            assert.strictEqual(cgi.el.innerText.trim(), "Add Custom Group");
+            assert.hasClass(cgi.el, 'o_generator_menu');
+            assert.strictEqual(cgi.el.children.length, 1);
+
+            await testUtils.dom.click(cgi.el.querySelector('.o_generator_menu button.o_add_custom_group_by'));
+
+            // Single select node with a single option
+            assert.containsOnce(cgi, 'div > select.o_group_by_selector');
+            assert.strictEqual(cgi.el.querySelector('div > select.o_group_by_selector option').innerText.trim(),
+                "Super Date");
+
+            // Button apply
+            assert.containsOnce(cgi, 'button.o_apply_group_by');
+
+            cgi.destroy();
+        });
+
+        QUnit.test('select a field name in Add Custom Group menu properly trigger the corresponding field', async function (assert) {
+            assert.expect(3);
+
+            const fields = [
+                { sortable: true, name: 'candlelight', string: 'Candlelight', type: 'boolean' },
+            ];
+            class MockedControlPanelModel extends Model {
+                createNewGroupBy(field) {
+                    assert.deepEqual(field, fields[0]);
+                }
+            }
+            const controlPanelModel = new MockedControlPanelModel();
+            const cgi = await createComponent(CustomGroupByItem, {
+                props: { fields },
+                env: { controlPanelModel },
+            });
+
+            await testUtils.dom.click(cgi.el.querySelector('.o_generator_menu button.o_add_custom_group_by'));
+            await testUtils.dom.click(cgi.el.querySelector('.o_generator_menu button.o_apply_group_by'));
+
+            // The only thing visible should be the button 'Add Custome Group';
+            assert.strictEqual(cgi.el.children.length, 1);
+            assert.containsOnce(cgi, 'button.o_add_custom_group_by');
+
+            cgi.destroy();
+        });
+    });
+});
diff --git a/addons/web/static/tests/control_panel/favorite_menu_tests.js b/addons/web/static/tests/control_panel/favorite_menu_tests.js
new file mode 100644
index 00000000000..5aadc99f619
--- /dev/null
+++ b/addons/web/static/tests/control_panel/favorite_menu_tests.js
@@ -0,0 +1,572 @@
+odoo.define('web.favorite_menu_tests', function (require) {
+    "use strict";
+
+    const FormView = require('web.FormView');
+    const testUtils = require('web.test_utils');
+
+    const cpHelpers = testUtils.controlPanel;
+    const { createControlPanel, createView, mock } = testUtils;
+    const { patchDate } = mock;
+
+    const searchMenuTypes = ['favorite'];
+
+    QUnit.module('Components', {
+        beforeEach: function () {
+            this.fields = {
+                bar: { string: "Bar", type: "many2one", relation: 'partner' },
+                birthday: { string: "Birthday", type: "date", store: true, sortable: true },
+                date_field: { string: "Date", type: "date", store: true, sortable: true },
+                float_field: { string: "Float", type: "float", group_operator: 'sum' },
+                foo: { string: "Foo", type: "char", store: true, sortable: true },
+            };
+        },
+    }, function () {
+
+        QUnit.module('FavoriteMenu');
+
+        QUnit.test('simple rendering with no favorite', async function (assert) {
+            assert.expect(8);
+
+            const params = {
+                cpStoreConfig: { searchMenuTypes },
+                cpProps: { fields: this.fields, searchMenuTypes, action: { name: "Action Name" } },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            assert.containsOnce(controlPanel, 'div.o_favorite_menu > button i.fa.fa-star');
+            assert.strictEqual(controlPanel.el.querySelector('div.o_favorite_menu > button span').innerText.trim(), "Favorites");
+
+            await cpHelpers.toggleFavoriteMenu(controlPanel);
+            assert.containsNone(controlPanel, '.dropdown-divider');
+            assert.containsOnce(controlPanel, '.o_add_favorite');
+            assert.strictEqual(controlPanel.el.querySelector('.o_add_favorite > button').innerText.trim(),
+                "Save Current Search");
+
+            await cpHelpers.toggleSaveFavorite(controlPanel);
+            assert.strictEqual(
+                controlPanel.el.querySelector('.o_add_favorite input[type="text"]').value,
+                'Action Name'
+            );
+            assert.containsN(controlPanel, '.o_add_favorite .custom-checkbox input[type="checkbox"]', 2);
+            const labelEls = controlPanel.el.querySelectorAll('.o_add_favorite .custom-checkbox label');
+            assert.deepEqual(
+                [...labelEls].map(e => e.innerText.trim()),
+                ["Use by default", "Share with all users"]
+            );
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('favorites use by default and share are exclusive', async function (assert) {
+            assert.expect(11);
+
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: { fields: this.fields },
+                    searchMenuTypes
+                },
+                cpProps: {
+                    fields: this.fields,
+                    searchMenuTypes,
+                    action: {},
+                },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleFavoriteMenu(controlPanel);
+            await cpHelpers.toggleSaveFavorite(controlPanel);
+            const checkboxes = controlPanel.el.querySelectorAll('input[type="checkbox"]');
+
+            assert.strictEqual(checkboxes.length, 2, '2 checkboxes are present');
+
+            assert.notOk(checkboxes[0].checked, 'Start: None of the checkboxes are checked (1)');
+            assert.notOk(checkboxes[1].checked, 'Start: None of the checkboxes are checked (2)');
+
+            await testUtils.dom.click(checkboxes[0]);
+            assert.ok(checkboxes[0].checked, 'The first checkbox is checked');
+            assert.notOk(checkboxes[1].checked, 'The second checkbox is not checked');
+
+            await testUtils.dom.click(checkboxes[1]);
+            assert.notOk(checkboxes[0].checked,
+                'Clicking on the second checkbox checks it, and unchecks the first (1)');
+            assert.ok(checkboxes[1].checked,
+                'Clicking on the second checkbox checks it, and unchecks the first (2)');
+
+            await testUtils.dom.click(checkboxes[0]);
+            assert.ok(checkboxes[0].checked,
+                'Clicking on the first checkbox checks it, and unchecks the second (1)');
+            assert.notOk(checkboxes[1].checked,
+                'Clicking on the first checkbox checks it, and unchecks the second (2)');
+
+            await testUtils.dom.click(checkboxes[0]);
+            assert.notOk(checkboxes[0].checked, 'End: None of the checkboxes are checked (1)');
+            assert.notOk(checkboxes[1].checked, 'End: None of the checkboxes are checked (2)');
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('save filter', async function (assert) {
+            assert.expect(1);
+
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: { fields: this.fields },
+                    searchMenuTypes
+                },
+                cpProps: {
+                    fields: this.fields,
+                    searchMenuTypes,
+                    action: {},
+                },
+                'get-controller-query-params': function (callback) {
+                    callback({
+                        orderedBy: [
+                            { asc: true, name: 'foo' },
+                            { asc: false, name: 'bar' }
+                        ]
+                    });
+                },
+                env: {
+                    dataManager: {
+                        create_filter: async function (filter) {
+                            assert.strictEqual(filter.sort, '["foo","bar desc"]',
+                                'The right format for the string "sort" should be sent to the server'
+                            );
+                        }
+                    }
+                },
+            };
+
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleFavoriteMenu(controlPanel);
+            await cpHelpers.toggleSaveFavorite(controlPanel);
+            await cpHelpers.editFavoriteName(controlPanel, "aaa");
+            await cpHelpers.saveFavorite(controlPanel);
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('dynamic filters are saved dynamic', async function (assert) {
+            assert.expect(3);
+
+            const arch = `
+            <search>
+                <filter string="Float" name="positive" domain="[('date_field', '>=', (context_today() + relativedelta()).strftime('%Y-%m-%d'))]"/>
+            </search>
+        `;
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: { fields: {}, arch },
+                    searchMenuTypes,
+                    actionContext: {
+                        search_default_positive: true,
+                    }
+                },
+                cpProps: {
+                    fields: {},
+                    searchMenuTypes,
+                    action: {},
+                },
+                'get-controller-query-params': function (callback) {
+                    callback();
+                },
+                env: {
+                    dataManager: {
+                        create_filter: async function (filter) {
+                            assert.strictEqual(
+                                filter.domain,
+                                "[(\"date_field\", \">=\", (context_today() + relativedelta()).strftime(\"%Y-%m-%d\"))]"
+                            );
+                            return 1; // serverSideId
+                        }
+                    }
+                },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Float']);
+
+            await cpHelpers.toggleFavoriteMenu(controlPanel);
+            await cpHelpers.toggleSaveFavorite(controlPanel);
+            await cpHelpers.editFavoriteName(controlPanel, "My favorite");
+            await cpHelpers.saveFavorite(controlPanel);
+
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ["My favorite"]);
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('save filters created via autocompletion works', async function (assert) {
+            assert.expect(4);
+
+            const arch = `<search><field name="foo"/></search>`;
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: { fields: this.fields, arch },
+                    searchMenuTypes,
+                },
+                cpProps: {
+                    fields: this.fields,
+                    searchMenuTypes,
+                    action: {},
+                },
+                'get-controller-query-params': function (callback) {
+                    callback();
+                },
+                env: {
+                    dataManager: {
+                        create_filter: async function (filter) {
+                            assert.strictEqual(
+                                filter.domain,
+                                `[["foo", "ilike", "a"]]`
+                            );
+                            return 1; // serverSideId
+                        }
+                    }
+                },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
+
+            await cpHelpers.editSearch(controlPanel, "a");
+            await cpHelpers.validateSearch(controlPanel);
+
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ["Foo\na"]);
+
+            await cpHelpers.toggleFavoriteMenu(controlPanel);
+            await cpHelpers.toggleSaveFavorite(controlPanel);
+            await cpHelpers.editFavoriteName(controlPanel, "My favorite");
+            await cpHelpers.saveFavorite(controlPanel);
+
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ["My favorite"]);
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('delete an active favorite remove it both in list of favorite and in search bar', async function (assert) {
+            assert.expect(6);
+
+            const favoriteFilters = [{
+                context: "{}",
+                domain: "[['foo', '=', 'qsdf']]",
+                id: 7,
+                is_default: true,
+                name: "My favorite",
+                sort: "[]",
+                user_id: [2, "Mitchell Admin"],
+            }];
+            const params = {
+                cpStoreConfig: { viewInfo: { favoriteFilters }, searchMenuTypes },
+                cpProps: { searchMenuTypes, action: {} },
+                search: function (searchQuery) {
+                    const { domain } = searchQuery;
+                    assert.deepEqual(domain, []);
+                },
+                env: {
+                    dataManager: {
+                        delete_filter: function () {
+                            return Promise.resolve();
+                        }
+                    }
+                },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleFavoriteMenu(controlPanel);
+
+            const { domain } = controlPanel.getQuery();
+            assert.deepEqual(domain, [["foo", "=", "qsdf"]]);
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ["My favorite"]);
+            assert.hasClass(controlPanel.el.querySelector('.o_favorite_menu .o_menu_item > a'), 'selected');
+
+            await cpHelpers.deleteFavorite(controlPanel, 0);
+
+            // confirm deletion
+            await testUtils.dom.click(document.querySelector('div.o_dialog footer button'));
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
+            const itemEls = controlPanel.el.querySelectorAll('.o_favorite_menu .o_menu_item');
+            assert.deepEqual([...itemEls].map(e => e.innerText.trim()), ["Save Current Search"]);
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('default favorite is not activated if key search_disable_custom_filters is set to true', async function (assert) {
+            assert.expect(2);
+
+            const favoriteFilters = [{
+                context: "{}",
+                domain: "",
+                id: 7,
+                is_default: true,
+                name: "My favorite",
+                sort: "[]",
+                user_id: [2, "Mitchell Admin"],
+            }];
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: { favoriteFilters },
+                    searchMenuTypes,
+                    actionContext: { search_disable_custom_filters: true }
+                },
+                cpProps: { searchMenuTypes, action: {} },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleFavoriteMenu(controlPanel);
+
+            const { domain } = controlPanel.getQuery();
+            assert.deepEqual(domain, []);
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('toggle favorite correctly clears filter, groupbys, time ranges and field "options"', async function (assert) {
+            assert.expect(8);
+
+            const unpatchDate = patchDate(2019, 6, 31, 13, 43, 0);
+
+            const favoriteFilters = [{
+                context: "{'group_by': ['foo'], 'time_ranges': {'field': 'birthday', 'range': 'this_year'}}",
+                domain: "['!', ['foo', '=', 'qsdf']]",
+                id: 7,
+                is_default: false,
+                name: "My favorite",
+                sort: "[]",
+                user_id: [2, "Mitchell Admin"],
+            }];
+            const arch = `
+            <search>
+                <field string="Foo" name="foo"/>
+                <filter string="Date Field Filter" name="positive" date="date_field"/>
+                <filter string="Date Field Groupby" name="coolName" context="{'group_by': 'date_field'}"/>
+            </search>
+        `;
+            const searchMenuTypes = ['filter', 'groupBy', 'timeRange', 'favorite'];
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: { favoriteFilters, arch, fields: this.fields },
+                    searchMenuTypes,
+                    actionContext: {
+                        search_default_positive: true,
+                        search_default_coolName: true,
+                        search_default_foo: "a",
+                        time_ranges: { field: 'date_field', range: 'today', comparisonRange: 'previous_period' }
+                    }
+                },
+                cpProps: { searchMenuTypes, action: {}, fields: this.fields },
+                search: function (searchQuery) {
+                    const { domain, groupBy, timeRanges } = searchQuery;
+                    assert.deepEqual(domain, ['!', ['foo', '=', 'qsdf']]);
+                    assert.deepEqual(groupBy, ['foo']);
+                    assert.deepEqual(timeRanges, {
+                        fieldDescription: "Birthday",
+                        fieldName: "birthday",
+                        range: [
+                            "&", ["birthday", ">=", "2019-01-01"], ["birthday", "<", "2020-01-01"]
+                        ],
+                        rangeDescription: "This Year",
+                        rangeId: "this_year"
+                    });
+                }
+            };
+            const controlPanel = await createControlPanel(params);
+
+            const { domain, groupBy, timeRanges } = controlPanel.getQuery();
+            assert.deepEqual(domain, [
+                "&",
+                ["foo", "=", "a"],
+                "&",
+                ["date_field", ">=", "2019-07-01"],
+                ["date_field", "<=", "2019-07-31"]
+            ]);
+            assert.deepEqual(groupBy, ['date_field:month']);
+            assert.deepEqual(timeRanges, {
+                comparisonRange: [
+                    "&", ["date_field", ">=", "2019-07-30"], ["date_field", "<", "2019-07-31"]
+                ],
+                comparisonRangeDescription: "Previous Period",
+                comparisonRangeId: "previous_period",
+                fieldDescription: "Date",
+                fieldName: "date_field",
+                range: [
+                    "&", ["date_field", ">=", "2019-07-31"], ["date_field", "<", "2019-08-01"]
+                ],
+                rangeDescription: "Today",
+                rangeId: "today"
+            });
+
+            assert.deepEqual(
+                cpHelpers.getFacetTexts(controlPanel),
+                [
+                    'Foo\na',
+                    'Date Field Filter: July 2019',
+                    'Date Field Groupby: Month',
+                    'Date: Today / Previous Period'
+                ]
+            );
+
+            await cpHelpers.toggleFavoriteMenu(controlPanel);
+            await cpHelpers.toggleMenuItem(controlPanel, 0);
+
+            assert.deepEqual(
+                cpHelpers.getFacetTexts(controlPanel),
+                ["My favorite"]
+            );
+
+            controlPanel.destroy();
+            unpatchDate();
+        });
+
+        QUnit.test('favorites have unique descriptions (the submenus of the favorite menu are correctly updated)', async function (assert) {
+            assert.expect(3);
+
+            const favoriteFilters = [{
+                context: "{}",
+                domain: "[]",
+                id: 1,
+                is_default: false,
+                name: "My favorite",
+                sort: "[]",
+                user_id: [2, "Mitchell Admin"],
+            }];
+            const params = {
+                cpStoreConfig: { viewInfo: { favoriteFilters }, searchMenuTypes },
+                cpProps: { searchMenuTypes, action: {} },
+                'get-controller-query-params': function (callback) {
+                    callback();
+                },
+                env: {
+                    session: { uid: 4 },
+                    services: {
+                        notification: {
+                            notify: function (params) {
+                                assert.deepEqual(params, {
+                                    title: "Error",
+                                    message: "Filter with same name already exists.",
+                                    type: "danger"
+                                });
+                            },
+                        }
+                    },
+                    dataManager: {
+                        create_filter: async function (irFilter) {
+                            assert.deepEqual(irFilter, {
+                                "action_id": undefined,
+                                "context": { "group_by": [] },
+                                "domain": "[]",
+                                "is_default": false,
+                                "model_id": undefined,
+                                "name": "My favorite 2",
+                                "sort": "[]",
+                                "user_id": 4,
+                            });
+                            return 2; // serverSideId
+                        }
+                    }
+                },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleFavoriteMenu(controlPanel);
+            await cpHelpers.toggleSaveFavorite(controlPanel);
+
+            // first try: should fail
+            await cpHelpers.editFavoriteName(controlPanel, "My favorite");
+            await cpHelpers.saveFavorite(controlPanel);
+
+            // second try: should succeed
+            await cpHelpers.editFavoriteName(controlPanel, "My favorite 2");
+            await cpHelpers.saveFavorite(controlPanel);
+            await cpHelpers.toggleSaveFavorite(controlPanel);
+
+            // third try: should fail
+            await cpHelpers.editFavoriteName(controlPanel, "My favorite 2");
+            await cpHelpers.saveFavorite(controlPanel);
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('save search filter in modal', async function (assert) {
+            assert.expect(5);
+            const data = {
+                partner: {
+                    fields: {
+                        date_field: { string: "Date", type: "date", store: true, sortable: true, searchable: true },
+                        birthday: { string: "Birthday", type: "date", store: true, sortable: true },
+                        foo: { string: "Foo", type: "char", store: true, sortable: true },
+                        bar: { string: "Bar", type: "many2one", relation: 'partner' },
+                        float_field: { string: "Float", type: "float", group_operator: 'sum' },
+                    },
+                    records: [
+                        { id: 1, display_name: "First record", foo: "yop", bar: 2, date_field: "2017-01-25", birthday: "1983-07-15", float_field: 1 },
+                        { id: 2, display_name: "Second record", foo: "blip", bar: 1, date_field: "2017-01-24", birthday: "1982-06-04", float_field: 2 },
+                        { id: 3, display_name: "Third record", foo: "gnap", bar: 1, date_field: "2017-01-13", birthday: "1985-09-13", float_field: 1.618 },
+                        { id: 4, display_name: "Fourth record", foo: "plop", bar: 2, date_field: "2017-02-25", birthday: "1983-05-05", float_field: -1 },
+                        { id: 5, display_name: "Fifth record", foo: "zoup", bar: 2, date_field: "2016-01-25", birthday: "1800-01-01", float_field: 13 },
+                        { id: 7, display_name: "Partner 6", },
+                        { id: 8, display_name: "Partner 7", },
+                        { id: 9, display_name: "Partner 8", },
+                        { id: 10, display_name: "Partner 9", }
+                    ],
+                },
+            };
+            const form = await createView({
+                arch: `
+                <form string="Partners">
+                    <sheet>
+                        <group>
+                            <field name="bar"/>
+                        </group>
+                    </sheet>
+                </form>`,
+                archs: {
+                    'partner,false,list': '<tree><field name="display_name"/></tree>',
+                    'partner,false,search': '<search><field name="date_field"/></search>',
+                },
+                data,
+                model: 'partner',
+                res_id: 1,
+                View: FormView,
+                env: {
+                    dataManager: {
+                        create_filter(filter) {
+                            assert.strictEqual(filter.name, "Awesome Test Customer Filter",
+                                "filter name should be correct");
+                        },
+                    }
+                },
+            });
+
+            await testUtils.form.clickEdit(form);
+
+            await testUtils.fields.many2one.clickOpenDropdown('bar');
+            await testUtils.fields.many2one.clickItem('bar', 'Search');
+
+            assert.containsN(document.body, 'tr.o_data_row', 9, "should display 9 records");
+
+            await cpHelpers.toggleFilterMenu('.modal');
+            await cpHelpers.toggleAddCustomFilter('.modal');
+            assert.strictEqual(document.querySelector('.o_filter_condition select.o_generator_menu_field').value,
+                'date_field',
+                "date field should be selected");
+            await cpHelpers.applyFilter('.modal');
+
+            assert.containsNone(document.body, 'tr.o_data_row', "should display 0 records");
+
+            // Save this search
+            await cpHelpers.toggleFavoriteMenu('.modal');
+            await cpHelpers.toggleSaveFavorite('.modal');
+
+            const filterNameInput = document.querySelector('.o_add_favorite input[type="text"]');
+            assert.isVisible(filterNameInput, "should display an input field for the filter name");
+
+            await testUtils.fields.editInput(filterNameInput, 'Awesome Test Customer Filter');
+            await testUtils.dom.click(document.querySelector('.o_add_favorite button.btn-primary'));
+
+            form.destroy();
+        });
+    });
+});
\ No newline at end of file
diff --git a/addons/web/static/tests/control_panel/filter_menu_tests.js b/addons/web/static/tests/control_panel/filter_menu_tests.js
new file mode 100644
index 00000000000..4728c356728
--- /dev/null
+++ b/addons/web/static/tests/control_panel/filter_menu_tests.js
@@ -0,0 +1,496 @@
+odoo.define('web.filter_menu_tests', function (require) {
+    "use strict";
+
+    const testUtils = require('web.test_utils');
+
+    const { controlPanel: cpHelpers, createControlPanel, mock } = testUtils;
+    const { patchDate } = mock;
+
+    const searchMenuTypes = ['filter'];
+
+    QUnit.module('Components', {
+        beforeEach: function () {
+            this.fields = {
+                date_field: { string: "Date", type: "date", store: true, sortable: true, searchable: true },
+                foo: { string: "Foo", type: "char", store: true, sortable: true },
+            };
+        },
+    }, function () {
+
+        QUnit.module('FilterMenu');
+
+        QUnit.test('simple rendering with no filter', async function (assert) {
+            assert.expect(2);
+
+            const params = {
+                cpStoreConfig: { searchMenuTypes },
+                cpProps: { fields: this.fields, searchMenuTypes },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleFilterMenu(controlPanel);
+            assert.containsNone(controlPanel, '.o_menu_item, .dropdown-divider');
+            assert.containsOnce(controlPanel, 'div.o_generator_menu');
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('simple rendering with a single filter', async function (assert) {
+            assert.expect(3);
+
+            const arch = `
+                <search>
+                    <filter string="Foo" name="foo" domain="[]"/>
+                </search>`;
+            const params = {
+                cpStoreConfig: { viewInfo: { arch, fields: this.fields }, searchMenuTypes },
+                cpProps: { fields: this.fields, searchMenuTypes },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleFilterMenu(controlPanel);
+            assert.containsOnce(controlPanel, '.o_menu_item');
+            assert.containsOnce(controlPanel, '.dropdown-divider');
+            assert.containsOnce(controlPanel, 'div.o_generator_menu');
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('should have Date and ID field proposed in that order in "Add custom Filter" submenu', async function (assert) {
+            assert.expect(2);
+
+            const params = {
+                cpStoreConfig: { viewInfo: { fields: this.fields }, searchMenuTypes },
+                cpProps: { fields: this.fields, searchMenuTypes },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleFilterMenu(controlPanel);
+            await cpHelpers.toggleAddCustomFilter(controlPanel);
+            const optionEls = controlPanel.el.querySelectorAll('div.o_filter_condition > select.o_generator_menu_field option');
+            assert.strictEqual(optionEls[0].innerText.trim(), 'Date');
+            assert.strictEqual(optionEls[1].innerText.trim(), 'ID');
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('toggle a "simple" filter in filter menu works', async function (assert) {
+            assert.expect(9);
+
+            const domains = [
+                [['foo', '=', 'qsdf']],
+                []
+            ];
+            const arch = `
+                <search>
+                    <filter string="Foo" name="foo" domain="[['foo', '=', 'qsdf']]"/>
+                </search>`;
+            const params = {
+                cpStoreConfig: { viewInfo: { arch }, searchMenuTypes },
+                cpProps: { fields: {}, searchMenuTypes },
+                search: function (searchQuery) {
+                    const { domain } = searchQuery;
+                    assert.deepEqual(domain, domains.shift());
+                }
+            };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleFilterMenu(controlPanel);
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
+
+            assert.notOk(cpHelpers.isItemSelected(controlPanel, 0));
+            await cpHelpers.toggleMenuItem(controlPanel, "Foo");
+
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Foo']);
+            assert.containsOnce(controlPanel.el.querySelector('.o_searchview .o_searchview_facet'),
+                'span.fa.fa-filter.o_searchview_facet_label');
+
+            assert.ok(cpHelpers.isItemSelected(controlPanel, "Foo"));
+
+            await cpHelpers.toggleMenuItem(controlPanel, "Foo");
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
+            assert.notOk(cpHelpers.isItemSelected(controlPanel, "Foo"));
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('add a custom filter works', async function (assert) {
+            assert.expect(1);
+
+            const params = {
+                cpStoreConfig: { viewInfo: { fields: this.fields }, searchMenuTypes },
+                cpProps: { fields: this.fields, searchMenuTypes },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleFilterMenu(controlPanel);
+            await cpHelpers.toggleAddCustomFilter(controlPanel);
+            // choose ID field in 'Add Custome filter' menu and value 1
+            await testUtils.fields.editSelect(
+                controlPanel.el.querySelector('div.o_filter_condition > select.o_generator_menu_field'), 'id');
+            await testUtils.fields.editInput(
+                controlPanel.el.querySelector('div.o_filter_condition > span.o_generator_menu_value > input'), 1);
+
+            await cpHelpers.applyFilter(controlPanel);
+
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['ID is "1"']);
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('deactivate a new custom filter works', async function (assert) {
+            assert.expect(4);
+
+            const unpatchDate = patchDate(2020, 1, 5, 12, 20, 0);
+
+            const params = {
+                cpStoreConfig: { viewInfo: { fields: this.fields }, searchMenuTypes },
+                cpProps: { fields: this.fields, searchMenuTypes },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleFilterMenu(controlPanel);
+            await cpHelpers.toggleAddCustomFilter(controlPanel);
+            await cpHelpers.applyFilter(controlPanel);
+
+            assert.ok(cpHelpers.isItemSelected(controlPanel, 'Date is equal to "02/05/2020"'));
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Date is equal to "02/05/2020"']);
+
+            await cpHelpers.toggleMenuItem(controlPanel, 'Date is equal to "02/05/2020"');
+
+            assert.notOk(cpHelpers.isItemSelected(controlPanel, 'Date is equal to "02/05/2020"'));
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
+
+            controlPanel.destroy();
+            unpatchDate();
+        });
+
+        QUnit.test('filter by a date field using period works', async function (assert) {
+            assert.expect(56);
+
+            const unpatchDate = patchDate(2017, 2, 22, 1, 0, 0);
+
+            const basicDomains = [
+                ["&", ["date_field", ">=", "2017-01-01"], ["date_field", "<=", "2017-12-31"]],
+                ["&", ["date_field", ">=", "2017-02-01"], ["date_field", "<=", "2017-02-28"]],
+                ["&", ["date_field", ">=", "2017-01-01"], ["date_field", "<=", "2017-12-31"]],
+                ["&", ["date_field", ">=", "2017-01-01"], ["date_field", "<=", "2017-01-31"]],
+                ["|",
+                    "&", ["date_field", ">=", "2017-01-01"], ["date_field", "<=", "2017-01-31"],
+                    "&", ["date_field", ">=", "2017-10-01"], ["date_field", "<=", "2017-12-31"]
+                ],
+                ["&", ["date_field", ">=", "2017-10-01"], ["date_field", "<=", "2017-12-31"]],
+                ["&", ["date_field", ">=", "2017-01-01"], ["date_field", "<=", "2017-12-31"]],
+                ["&", ["date_field", ">=", "2017-01-01"], ["date_field", "<=", "2017-03-31"]],
+                ["&", ["date_field", ">=", "2017-01-01"], ["date_field", "<=", "2017-12-31"]],
+                ["&", ["date_field", ">=", "2017-01-01"], ["date_field", "<=", "2017-12-31"]],
+                ["|",
+                    "&", ["date_field", ">=", "2017-01-01"], ["date_field", "<=", "2017-12-31"],
+                    "&", ["date_field", ">=", "2016-01-01"], ["date_field", "<=", "2016-12-31"]
+                ],
+                ["|",
+                    "|",
+                    "&", ["date_field", ">=", "2017-01-01"], ["date_field", "<=", "2017-12-31"],
+                    "&", ["date_field", ">=", "2016-01-01"], ["date_field", "<=", "2016-12-31"],
+                    "&", ["date_field", ">=", "2015-01-01"], ["date_field", "<=", "2015-12-31"]
+                ],
+                ["|",
+                    "|",
+                    "&", ["date_field", ">=", "2017-03-01"], ["date_field", "<=", "2017-03-31"],
+                    "&", ["date_field", ">=", "2016-03-01"], ["date_field", "<=", "2016-03-31"],
+                    "&", ["date_field", ">=", "2015-03-01"], ["date_field", "<=", "2015-03-31"]
+                ]
+            ];
+
+            const arch = `
+                <search>
+                    <filter string="Date" name="date_field" date="date_field"/>
+                </search>`;
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: { arch, fields: this.fields },
+                    searchMenuTypes,
+                    actionContext: { search_default_date_field: 1 },
+                },
+                cpProps: { fields: this.fields, searchMenuTypes },
+                search: function (searchQuery) {
+                    // we inspect query domain
+                    const { domain } = searchQuery;
+                    if (domain.length) {
+                        assert.deepEqual(domain, basicDomains.shift());
+                    }
+                },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleFilterMenu(controlPanel);
+            await cpHelpers.toggleMenuItem(controlPanel, "Date");
+
+            const optionEls = controlPanel.el.querySelectorAll('ul.o_menu_item_options > li.o_item_option > a');
+
+            // default filter should be activated with the global default period 'this_month'
+            const { domain } = controlPanel.getQuery();
+            assert.deepEqual(
+                domain,
+                ["&", ["date_field", ">=", "2017-03-01"], ["date_field", "<=", "2017-03-31"]]
+            );
+            assert.ok(cpHelpers.isItemSelected(controlPanel, "Date"));
+            assert.ok(cpHelpers.isOptionSelected(controlPanel, "Date", 0));
+
+            // check option descriptions
+            const optionDescriptions = [...optionEls].map(e => e.innerText.trim());
+            const expectedDescriptions = [
+                'March', 'February', 'January',
+                'Q4', 'Q3', 'Q2', 'Q1',
+                '2017', '2016', '2015'
+            ];
+            assert.deepEqual(optionDescriptions, expectedDescriptions);
+
+            // check generated domains
+            const steps = [
+                { description: 'March', facetContent: 'Date: 2017', selectedoptions: [7] },
+                { description: 'February', facetContent: 'Date: February 2017', selectedoptions: [1, 7] },
+                { description: 'February', facetContent: 'Date: 2017', selectedoptions: [7] },
+                { description: 'January', facetContent: 'Date: January 2017', selectedoptions: [2, 7] },
+                { description: 'Q4', facetContent: 'Date: January 2017 / Q4 2017', selectedoptions: [2, 3, 7] },
+                { description: 'January', facetContent: 'Date: Q4 2017', selectedoptions: [3, 7] },
+                { description: 'Q4', facetContent: 'Date: 2017', selectedoptions: [7] },
+                { description: 'Q1', facetContent: 'Date: Q1 2017', selectedoptions: [6, 7] },
+                { description: 'Q1', facetContent: 'Date: 2017', selectedoptions: [7] },
+                { description: '2017', selectedoptions: [] },
+                { description: '2017', facetContent: 'Date: 2017', selectedoptions: [7] },
+                { description: '2016', facetContent: 'Date: 2017 / 2016', selectedoptions: [7, 8] },
+                { description: '2015', facetContent: 'Date: 2017 / 2016 / 2015', selectedoptions: [7, 8, 9] },
+                { description: 'March', facetContent: 'Date: March 2017 / March 2016 / March 2015', selectedoptions: [0, 7, 8, 9] }
+            ];
+            for (const s of steps) {
+                const index = expectedDescriptions.indexOf(s.description);
+                await cpHelpers.toggleMenuItemOption(controlPanel, 0, index);
+                if (s.facetContent) {
+                    assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), [s.facetContent]);
+                } else {
+                    assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
+                }
+                s.selectedoptions.forEach(index => {
+                    assert.ok(cpHelpers.isOptionSelected(controlPanel, 0, index),
+                        `at step ${steps.indexOf(s) + 1}, option ${expectedDescriptions[index]} should be selected`);
+                });
+            }
+
+            controlPanel.destroy();
+            unpatchDate();
+        });
+
+        QUnit.test('filter by a date field using period works even in January', async function (assert) {
+            assert.expect(5);
+
+            const unpatchDate = patchDate(2017, 0, 7, 3, 0, 0);
+
+            const arch = `
+                <search>
+                    <filter string="Date" name="some_filter" date="date_field" default_period="last_month"/>
+                </search>`;
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: { arch, fields: this.fields },
+                    searchMenuTypes,
+                    actionContext: { search_default_some_filter: 1 },
+                },
+                cpProps: { fields: this.fields, searchMenuTypes },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            const { domain } = controlPanel.getQuery();
+            assert.deepEqual(domain, [
+                '&',
+                ["date_field", ">=", "2016-12-01"],
+                ["date_field", "<=", "2016-12-31"]
+            ]);
+
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ["Date: December 2016"]);
+
+            await cpHelpers.toggleFilterMenu(controlPanel);
+            await cpHelpers.toggleMenuItem(controlPanel, "Date");
+
+            assert.ok(cpHelpers.isItemSelected(controlPanel, "Date"));
+            assert.ok(cpHelpers.isOptionSelected(controlPanel, "Date", 'December'));
+            assert.ok(cpHelpers.isOptionSelected(controlPanel, "Date", '2016'));
+
+            controlPanel.destroy();
+            unpatchDate();
+        });
+
+        QUnit.test('`context` key in <filter> is used', async function (assert) {
+            assert.expect(1);
+
+            const arch = `
+                <search>
+                    <filter string="Filter" name="some_filter" domain="[]" context="{'coucou_1': 1}"/>
+                </search>`;
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: { arch, fields: this.fields },
+                    searchMenuTypes
+                },
+                cpProps: { fields: this.fields, searchMenuTypes },
+                search: function (searchQuery) {
+                    // we inspect query context
+                    const { context } = searchQuery;
+                    assert.deepEqual(context, { coucou_1: 1 });
+                },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleFilterMenu(controlPanel);
+            await cpHelpers.toggleMenuItem(controlPanel, 0);
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('Filter with JSON-parsable domain works', async function (assert) {
+            assert.expect(1);
+
+            const originalDomain = [['foo', '=', 'Gently Weeps']];
+            const xml_domain = JSON.stringify(originalDomain);
+
+            const arch =
+                `<search>
+                    <filter string="Foo" name="gently_weeps" domain="${_.escape(xml_domain)}"/>
+                </search>`;
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: { arch, fields: this.fields },
+                    searchMenuTypes,
+                },
+                cpProps: { fields: this.fields, searchMenuTypes },
+                search: function (searchQuery) {
+                    const { domain } = searchQuery;
+                    assert.deepEqual(domain, originalDomain,
+                        'A JSON parsable xml domain should be handled just like any other'
+                    );
+                },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleFilterMenu(controlPanel);
+            await cpHelpers.toggleMenuItem(controlPanel, 0);
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('filter with date attribute set as search_default', async function (assert) {
+            assert.expect(1);
+
+            const unpatchDate = patchDate(2019, 6, 31, 13, 43, 0);
+
+            const arch =
+                `<search>
+                    <filter string="Date" name="date_field" date="date_field" default_period="last_month"/>
+                </search>`,
+                params = {
+                    cpStoreConfig: {
+                        viewInfo: { arch, fields: this.fields },
+                        searchMenuTypes,
+                        actionContext: {
+                            search_default_date_field: true
+                        }
+                    },
+                    cpProps: { fields: this.fields, searchMenuTypes },
+                };
+            const controlPanel = await createControlPanel(params);
+
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ["Date: June 2019"]);
+
+            controlPanel.destroy();
+            unpatchDate();
+        });
+
+        QUnit.test('filter domains are correcly combined by OR and AND', async function (assert) {
+            assert.expect(2);
+
+            const arch =
+                `<search>
+                    <filter string="Filter Group 1" name="f_1_g1" domain="[['foo', '=', 'f1_g1']]"/>
+                    <separator/>
+                    <filter string="Filter 1 Group 2" name="f1_g2" domain="[['foo', '=', 'f1_g2']]"/>
+                    <filter string="Filter 2 GROUP 2" name="f2_g2" domain="[['foo', '=', 'f2_g2']]"/>
+                </search>`,
+                params = {
+                    cpStoreConfig: {
+                        viewInfo: { arch, fields: this.fields },
+                        searchMenuTypes,
+                        actionContext: {
+                            search_default_f_1_g1: true,
+                            search_default_f1_g2: true,
+                            search_default_f2_g2: true,
+                        }
+                    },
+                    cpProps: { fields: this.fields, searchMenuTypes },
+                };
+            const controlPanel = await createControlPanel(params);
+
+            const { domain } = controlPanel.getQuery();
+            assert.deepEqual(domain, [
+                '&',
+                ['foo', '=', 'f1_g1'],
+                '|',
+                ['foo', '=', 'f1_g2'],
+                ['foo', '=', 'f2_g2']
+            ]);
+
+            assert.deepEqual(
+                cpHelpers.getFacetTexts(controlPanel),
+                ["Filter Group 1", "Filter 1 Group 2orFilter 2 GROUP 2"]
+            );
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('arch order of groups of filters preserved', async function (assert) {
+            assert.expect(12);
+
+            const arch =
+                `<search>
+                    <filter string="1" name="coolName1" date="date_field"/>
+                    <separator/>
+                    <filter string="2" name="coolName2" date="date_field"/>
+                    <separator/>
+                    <filter string="3" name="coolName3" domain="[]"/>
+                    <separator/>
+                    <filter string="4" name="coolName4" domain="[]"/>
+                    <separator/>
+                    <filter string="5" name="coolName5" domain="[]"/>
+                    <separator/>
+                    <filter string="6" name="coolName6" domain="[]"/>
+                    <separator/>
+                    <filter string="7" name="coolName7" domain="[]"/>
+                    <separator/>
+                    <filter string="8" name="coolName8" domain="[]"/>
+                    <separator/>
+                    <filter string="9" name="coolName9" domain="[]"/>
+                    <separator/>
+                    <filter string="10" name="coolName10" domain="[]"/>
+                    <separator/>
+                    <filter string="11" name="coolName11" domain="[]"/>
+                </search>`,
+                params = {
+                    cpStoreConfig: {
+                        viewInfo: { arch, fields: this.fields },
+                        searchMenuTypes,
+                    },
+                    cpProps: { fields: this.fields, searchMenuTypes },
+                };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleFilterMenu(controlPanel);
+            assert.containsN(controlPanel, '.o_filter_menu .o_menu_item', 11);
+
+            const menuItemEls = controlPanel.el.querySelectorAll('.o_filter_menu .o_menu_item');
+            [...menuItemEls].forEach((e, index) => {
+                assert.strictEqual(e.innerText.trim(), String(index + 1));
+            });
+
+            controlPanel.destroy();
+        });
+    });
+});
\ No newline at end of file
diff --git a/addons/web/static/tests/control_panel/groupby_menu_tests.js b/addons/web/static/tests/control_panel/groupby_menu_tests.js
new file mode 100644
index 00000000000..abaaeceeaf3
--- /dev/null
+++ b/addons/web/static/tests/control_panel/groupby_menu_tests.js
@@ -0,0 +1,447 @@
+odoo.define('web.groupby_menu_tests', function (require) {
+    "use strict";
+
+    const testUtils = require('web.test_utils');
+
+    const cpHelpers = testUtils.controlPanel;
+    const { createControlPanel } = testUtils;
+
+    const searchMenuTypes = ['groupBy'];
+
+    QUnit.module('Components', {
+        beforeEach: function () {
+            this.fields = {
+                bar: { string: "Bar", type: "many2one", relation: 'partner' },
+                birthday: { string: "Birthday", type: "date", store: true, sortable: true },
+                date_field: { string: "Date", type: "date", store: true, sortable: true },
+                float_field: { string: "Float", type: "float", group_operator: 'sum' },
+                foo: { string: "Foo", type: "char", store: true, sortable: true },
+            };
+        },
+    }, function () {
+
+        QUnit.module('GroupByMenu');
+
+        QUnit.test('simple rendering with neither groupbys nor groupable fields', async function (assert) {
+
+            assert.expect(1);
+            const params = {
+                cpStoreConfig: { searchMenuTypes },
+                cpProps: { fields: {}, searchMenuTypes },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            assert.containsNone(controlPanel, '.o_menu_item, .dropdown-divider, div.o_generator_menu');
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('simple rendering with no groupby', async function (assert) {
+            assert.expect(5);
+
+            const params = {
+                cpStoreConfig: { searchMenuTypes },
+                cpProps: { fields: this.fields, searchMenuTypes },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleGroupByMenu(controlPanel);
+            assert.containsNone(controlPanel, '.o_menu_item, .dropdown-divider');
+            assert.containsOnce(controlPanel, 'div.o_generator_menu');
+
+            await cpHelpers.toggleAddCustomGroup(controlPanel);
+
+            const optionEls = controlPanel.el.querySelectorAll('div.o_generator_menu select.o_group_by_selector option');
+            assert.strictEqual(optionEls[0].innerText.trim(), 'Birthday');
+            assert.strictEqual(optionEls[1].innerText.trim(), 'Date');
+            assert.strictEqual(optionEls[2].innerText.trim(), 'Foo');
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('simple rendering with a single groupby', async function (assert) {
+            assert.expect(4);
+
+            const arch = `
+                <search>
+                    <filter string="Groupby Foo" name="gb_foo" context="{'group_by': 'foo'}"/>
+                </search>`;
+            const params = {
+                cpStoreConfig: { viewInfo: { arch, fields: this.fields }, searchMenuTypes },
+                cpProps: { fields: this.fields, searchMenuTypes },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleGroupByMenu(controlPanel);
+            assert.containsOnce(controlPanel, '.o_menu_item');
+            assert.strictEqual(controlPanel.el.querySelector('.o_menu_item').innerText.trim(), "Groupby Foo");
+            assert.containsOnce(controlPanel, '.dropdown-divider');
+            assert.containsOnce(controlPanel, 'div.o_generator_menu');
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('toggle a "simple" groupby in groupby menu works', async function (assert) {
+            assert.expect(9);
+
+            const groupBys = [['foo'], []];
+            const arch = `
+                <search>
+                    <filter string="Groupby Foo" name="gb_foo" context="{'group_by': 'foo'}"/>
+                </search>`;
+            const params = {
+                cpStoreConfig: { viewInfo: { arch, fields: this.fields }, searchMenuTypes },
+                cpProps: { fields: this.fields, searchMenuTypes },
+                search: function (searchQuery) {
+                    const { groupBy } = searchQuery;
+                    assert.deepEqual(groupBy, groupBys.shift());
+                },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleGroupByMenu(controlPanel);
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
+
+            assert.notOk(cpHelpers.isItemSelected(controlPanel, 0));
+
+            await cpHelpers.toggleMenuItem(controlPanel, 0);
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Groupby Foo']);
+            assert.containsOnce(controlPanel.el.querySelector('.o_searchview .o_searchview_facet'),
+                'span.fa.fa-bars.o_searchview_facet_label');
+            assert.ok(cpHelpers.isItemSelected(controlPanel, 0));
+
+            await cpHelpers.toggleMenuItem(controlPanel, 0);
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
+            assert.notOk(cpHelpers.isItemSelected(controlPanel, 0));
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('toggle a "simple" groupby quickly does not crash', async function (assert) {
+            assert.expect(1);
+
+            const arch = `
+                <search>
+                    <filter string="Groupby Foo" name="gb_foo" context="{'group_by': 'foo'}"/>
+                </search>`;
+            const params = {
+                cpStoreConfig: { viewInfo: { arch, fields: this.fields }, searchMenuTypes },
+                cpProps: { fields: this.fields, searchMenuTypes },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleGroupByMenu(controlPanel);
+
+            cpHelpers.toggleMenuItem(controlPanel, 0);
+            cpHelpers.toggleMenuItem(controlPanel, 0);
+
+            assert.ok(true);
+            controlPanel.destroy();
+        });
+
+        QUnit.test('remove a "Group By" facet properly unchecks groupbys in groupby menu', async function (assert) {
+            assert.expect(5);
+
+            const arch = `
+                <search>
+                    <filter string="Groupby Foo" name="gb_foo" context="{'group_by': 'foo'}"/>
+                </search>`;
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: { arch, fields: this.fields },
+                    searchMenuTypes,
+                    actionContext: { search_default_gb_foo: 1 }
+                },
+                cpProps: { fields: this.fields, searchMenuTypes },
+                search: function (searchQuery) {
+                    const { groupBy } = searchQuery;
+                    assert.deepEqual(groupBy, []);
+                },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleGroupByMenu(controlPanel);
+            const facetEl = controlPanel.el.querySelector('.o_searchview .o_searchview_facet');
+            assert.strictEqual(facetEl.innerText.trim(), "Groupby Foo");
+            assert.ok(cpHelpers.isItemSelected(controlPanel, 0));
+
+            await testUtils.dom.click(facetEl.querySelector('i.o_facet_remove'));
+            assert.containsNone(controlPanel, '.o_searchview .o_searchview_facet');
+            await cpHelpers.toggleGroupByMenu(controlPanel);
+            assert.notOk(cpHelpers.isItemSelected(controlPanel, 0));
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('group by a date field using interval works', async function (assert) {
+            assert.expect(21);
+
+            const groupBys = [
+                ['date_field:year', 'date_field:week' ],
+                ['date_field:year', 'date_field:month', 'date_field:week'],
+                ['date_field:year', 'date_field:month'],
+                ['date_field:year'],
+                []
+            ];
+
+            const arch = `
+                <search>
+                    <filter string="Date" name="date" context="{'group_by': 'date_field:week'}"/>
+                </search>`;
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: { arch, fields: this.fields },
+                    searchMenuTypes,
+                    actionContext: { search_default_date: 1 }
+                },
+                cpProps: { fields: this.fields, searchMenuTypes },
+                search: function (searchQuery) {
+                    const { groupBy } = searchQuery;
+                    assert.deepEqual(groupBy, groupBys.shift());
+                },
+            };
+
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleGroupByMenu(controlPanel);
+            await cpHelpers.toggleMenuItem(controlPanel, 0);
+
+            const optionEls = controlPanel.el.querySelectorAll('ul.o_menu_item_options > li.o_item_option > a');
+
+            // default groupby should be activated with the  default inteval 'week'
+            const { groupBy } = controlPanel.getQuery();
+            assert.deepEqual(groupBy, ['date_field:week']);
+
+            assert.ok(cpHelpers.isOptionSelected(controlPanel, 0, 3));
+
+            // check option descriptions
+            const optionDescriptions = [...optionEls].map(e => e.innerText.trim());
+            const expectedDescriptions = ['Year', 'Quarter', 'Month', 'Week', 'Day'];
+            assert.deepEqual(optionDescriptions, expectedDescriptions);
+
+            const steps = [
+                { description: 'Year', facetContent: 'Date: Year>Date: Week', selectedoptions: [0, 3] },
+                { description: 'Month', facetContent: 'Date: Year>Date: Month>Date: Week', selectedoptions: [0, 2, 3] },
+                { description: 'Week', facetContent: 'Date: Year>Date: Month', selectedoptions: [0, 2] },
+                { description: 'Month', facetContent: 'Date: Year', selectedoptions: [0] },
+                { description: 'Year', selectedoptions: [] },
+            ];
+            for (const s of steps) {
+                const index = expectedDescriptions.indexOf(s.description);
+                await cpHelpers.toggleMenuItemOption(controlPanel, 0, index);
+                if (s.facetContent) {
+                    assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), [s.facetContent]);
+                } else {
+                    assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
+                }
+                s.selectedoptions.forEach(index => {
+                    assert.ok(cpHelpers.isOptionSelected(controlPanel, 0, index));
+                });
+            }
+            controlPanel.destroy();
+        });
+
+        QUnit.test('interval options are correctly grouped and ordered', async function (assert) {
+            assert.expect(8);
+
+            const arch = `
+                <search>
+                    <filter string="Bar" name="bar" context="{'group_by': 'bar'}"/>
+                    <filter string="Date" name="date" context="{'group_by': 'date_field'}"/>
+                    <filter string="Foo" name="foo" context="{'group_by': 'foo'}"/>
+                </search>`;
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: { arch, fields: this.fields },
+                    searchMenuTypes,
+                    actionContext: { search_default_bar: 1 }
+                },
+                cpProps: { fields: this.fields, searchMenuTypes },
+            };
+
+            const controlPanel = await createControlPanel(params);
+
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Bar']);
+
+            // open menu 'Group By'
+            await cpHelpers.toggleGroupByMenu(controlPanel);
+
+            // Open the groupby 'Date'
+            await cpHelpers.toggleMenuItem(controlPanel, 'Date');
+            // select option 'week'
+            await cpHelpers.toggleMenuItemOption(controlPanel, 'Date', 'Week');
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Bar>Date: Week']);
+
+            // select option 'day'
+            await cpHelpers.toggleMenuItemOption(controlPanel, 'Date', 'Day');
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Bar>Date: Week>Date: Day']);
+
+            // select option 'year'
+            await cpHelpers.toggleMenuItemOption(controlPanel, 'Date', 'Year');
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Bar>Date: Year>Date: Week>Date: Day']);
+
+            // select 'Foo'
+            await cpHelpers.toggleMenuItem(controlPanel, 'Foo');
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Bar>Date: Year>Date: Week>Date: Day>Foo']);
+
+            // select option 'quarter'
+            await cpHelpers.toggleMenuItem(controlPanel, 'Date');
+            await cpHelpers.toggleMenuItemOption(controlPanel, 'Date', 'Quarter');
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Bar>Date: Year>Date: Quarter>Date: Week>Date: Day>Foo']);
+
+            // unselect 'Bar'
+            await cpHelpers.toggleMenuItem(controlPanel, 'Bar');
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Date: Year>Date: Quarter>Date: Week>Date: Day>Foo']);
+
+            // unselect option 'week'
+            await cpHelpers.toggleMenuItem(controlPanel, 'Date');
+            await cpHelpers.toggleMenuItemOption(controlPanel, 'Date', 'Week');
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Date: Year>Date: Quarter>Date: Day>Foo']);
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('the ID field should not be proposed in "Add Custom Group" menu', async function (assert) {
+            assert.expect(2);
+
+            const fields = {
+                foo: { string: "Foo", type: "char", store: true, sortable: true },
+                id: { sortable: true, string: 'ID', type: 'integer' }
+            };
+            const params = {
+                cpStoreConfig: { searchMenuTypes },
+                cpProps: { fields, searchMenuTypes },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleGroupByMenu(controlPanel);
+            await cpHelpers.toggleAddCustomGroup(controlPanel);
+
+            const optionEls = controlPanel.el.querySelectorAll('div.o_generator_menu select.o_group_by_selector option');
+            assert.strictEqual(optionEls.length, 1);
+            assert.strictEqual(optionEls[0].innerText.trim(), "Foo");
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('add a date field in "Add Custome Group" activate a groupby with global default option "month"', async function (assert) {
+            assert.expect(4);
+
+            const fields = {
+                date_field: { string: "Date", type: "date", store: true, sortable: true },
+                id: { sortable: true, string: 'ID', type: 'integer' }
+            };
+            const params = {
+                cpStoreConfig: { viewInfo: { fields }, searchMenuTypes },
+                cpProps: { fields, searchMenuTypes },
+                search: function (searchQuery) {
+                    const { groupBy } = searchQuery;
+                    assert.deepEqual(groupBy, ['date_field:month']);
+                }
+            };
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleGroupByMenu(controlPanel);
+            await cpHelpers.toggleAddCustomGroup(controlPanel);
+            await cpHelpers.applyGroup(controlPanel);
+
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Date: Month']);
+
+            assert.ok(cpHelpers.isItemSelected(controlPanel, "Date"));
+            await cpHelpers.toggleMenuItem(controlPanel, "Date");
+            assert.ok(cpHelpers.isOptionSelected(controlPanel, "Date", "Month"));
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('default groupbys can be ordered', async function (assert) {
+            assert.expect(2);
+
+            const arch = `
+                <search>
+                    <filter string="Birthday" name="birthday" context="{'group_by': 'birthday'}"/>
+                    <filter string="Date" name="date" context="{'group_by': 'date_field:week'}"/>
+                </search>`;
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: { arch, fields: this.fields },
+                    searchMenuTypes,
+                    actionContext: { search_default_birthday: 2, search_default_date: 1 }
+                },
+                cpProps: { fields: this.fields, searchMenuTypes },
+            };
+
+            const controlPanel = await createControlPanel(params);
+
+            // the defautl groupbys should be activated in the right order
+            const { groupBy } = controlPanel.getQuery();
+            assert.deepEqual(groupBy, ['date_field:week', 'birthday:month']);
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Date: Week>Birthday: Month']);
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('a separator in groupbys does not cause problems', async function (assert) {
+            assert.expect(23);
+
+            const arch = `
+                <search>
+                    <filter string="Date" name="coolName" context="{'group_by': 'date_field'}"/>
+                    <separator/>
+                    <filter string="Bar" name="superName" context="{'group_by': 'bar'}"/>
+                </search>`;
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: { arch, fields: this.fields },
+                    searchMenuTypes,
+                },
+                cpProps: { fields: this.fields, searchMenuTypes },
+            };
+
+            const controlPanel = await createControlPanel(params);
+
+            await cpHelpers.toggleGroupByMenu(controlPanel);
+            await cpHelpers.toggleMenuItem(controlPanel, 0);
+            await cpHelpers.toggleMenuItemOption(controlPanel, 0, 4);
+
+            assert.ok(cpHelpers.isItemSelected(controlPanel, 0));
+            assert.notOk(cpHelpers.isItemSelected(controlPanel, 1));
+            assert.ok(cpHelpers.isOptionSelected(controlPanel, 0, 4), 'selected');
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Date: Day']);
+
+            await cpHelpers.toggleMenuItem(controlPanel, 1);
+            await cpHelpers.toggleMenuItem(controlPanel, 0);
+            assert.ok(cpHelpers.isItemSelected(controlPanel, 0));
+            assert.ok(cpHelpers.isItemSelected(controlPanel, 1));
+            assert.ok(cpHelpers.isOptionSelected(controlPanel, 0, 4), 'selected');
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Date: Day>Bar']);
+
+            await cpHelpers.toggleMenuItemOption(controlPanel, 0, 1);
+            assert.ok(cpHelpers.isItemSelected(controlPanel, 0));
+            assert.ok(cpHelpers.isItemSelected(controlPanel, 1));
+            assert.ok(cpHelpers.isOptionSelected(controlPanel, 0, 1), 'selected');
+            assert.ok(cpHelpers.isOptionSelected(controlPanel, 0, 4), 'selected');
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Date: Quarter>Date: Day>Bar']);
+
+            await cpHelpers.toggleMenuItem(controlPanel, 1);
+            await cpHelpers.toggleMenuItem(controlPanel, 0);
+            assert.ok(cpHelpers.isItemSelected(controlPanel, 0));
+            assert.notOk(cpHelpers.isItemSelected(controlPanel, 1));
+            assert.ok(cpHelpers.isOptionSelected(controlPanel, 0, 1), 'selected');
+            assert.ok(cpHelpers.isOptionSelected(controlPanel, 0, 4), 'selected');
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Date: Quarter>Date: Day']);
+
+            await cpHelpers.removeFacet(controlPanel);
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
+
+            await cpHelpers.toggleGroupByMenu(controlPanel);
+            await cpHelpers.toggleMenuItem(controlPanel, 0);
+            assert.notOk(cpHelpers.isItemSelected(controlPanel, 0));
+            assert.notOk(cpHelpers.isItemSelected(controlPanel, 1));
+            assert.notOk(cpHelpers.isOptionSelected(controlPanel, 0, 1), 'selected');
+            assert.notOk(cpHelpers.isOptionSelected(controlPanel, 0, 4), 'selected');
+
+            controlPanel.destroy();
+        });
+    });
+});
\ No newline at end of file
diff --git a/addons/web/static/tests/control_panel/search_bar_tests.js b/addons/web/static/tests/control_panel/search_bar_tests.js
new file mode 100644
index 00000000000..0678e77e9c6
--- /dev/null
+++ b/addons/web/static/tests/control_panel/search_bar_tests.js
@@ -0,0 +1,415 @@
+odoo.define('web.search_bar_tests', function (require) {
+    "use strict";
+
+    const testUtils = require('web.test_utils');
+
+    const cpHelpers = testUtils.controlPanel;
+    const { createActionManager } = testUtils;
+
+    QUnit.module('Components', {
+        beforeEach: function () {
+            this.data = {
+                partner: {
+                    fields: {
+                        bar: { string: "Bar", type: 'many2one', relation: 'partner' },
+                        birthday: { string: "Birthday", type: 'date' },
+                        birth_datetime: { string: "Birth DateTime", type: 'datetime' },
+                        foo: { string: "Foo", type: 'char' },
+                    },
+                    records: [
+                        { id: 1, display_name: "First record", foo: "yop", bar: 2, birthday: '1983-07-15', birth_datetime: '1983-07-15 01:00:00' },
+                        { id: 2, display_name: "Second record", foo: "blip", bar: 1, birthday: '1982-06-04', birth_datetime: '1982-06-04 02:00:00' },
+                        { id: 3, display_name: "Third record", foo: "gnap", bar: 1, birthday: '1985-09-13', birth_datetime: '1985-09-13 03:00:00' },
+                        { id: 4, display_name: "Fourth record", foo: "plop", bar: 2, birthday: '1983-05-05', birth_datetime: '1983-05-05 04:00:00' },
+                        { id: 5, display_name: "Fifth record", foo: "zoup", bar: 2, birthday: '1800-01-01', birth_datetime: '1800-01-01 05:00:00' },
+                    ],
+                },
+            };
+
+            this.actions = [{
+                id: 1,
+                name: "Partners Action",
+                res_model: 'partner',
+                search_view_id: [false, 'search'],
+                type: 'ir.actions.act_window',
+                views: [[false, 'list']],
+            }];
+
+            this.archs = {
+                'partner,false,list': `
+                <tree>
+                    <field name="foo"/>
+                </tree>`,
+                'partner,false,search': `
+                <search>
+                    <field name="foo"/>
+                    <field name="birthday"/>
+                    <field name="birth_datetime"/>
+                    <field name="bar" context="{'bar': self}"/>
+                    <filter string="Date Field Filter" name="positive" date="birthday"/>
+                    <filter string="Date Field Groupby" name="coolName" context="{'group_by': 'birthday:day'}"/>
+                </search>`,
+            };
+        },
+    }, function () {
+
+        QUnit.module('SearchBar');
+
+        QUnit.test('basic rendering', async function (assert) {
+            assert.expect(1);
+
+            const actionManager = await createActionManager({
+                actions: this.actions,
+                archs: this.archs,
+                data: this.data,
+            });
+            await actionManager.doAction(1);
+
+            assert.strictEqual(document.activeElement,
+                actionManager.el.querySelector('.o_searchview input.o_searchview_input'),
+                "searchview input should be focused");
+
+            actionManager.destroy();
+        });
+
+        QUnit.test('navigation with facets', async function (assert) {
+            assert.expect(4);
+
+            const actionManager = await createActionManager({
+                actions: this.actions,
+                archs: this.archs,
+                data: this.data,
+            });
+            await actionManager.doAction(1);
+
+            // add a facet
+            await cpHelpers.toggleGroupByMenu(actionManager);
+            await cpHelpers.toggleMenuItem(actionManager, 0);
+            await cpHelpers.toggleMenuItemOption(actionManager, 0, 0);
+            assert.containsOnce(actionManager, '.o_searchview .o_searchview_facet',
+                "there should be one facet");
+            assert.strictEqual(document.activeElement,
+                actionManager.el.querySelector('.o_searchview input.o_searchview_input'));
+
+            // press left to focus the facet
+            await testUtils.dom.triggerEvent(document.activeElement, 'keydown', { key: 'ArrowLeft' });
+            assert.strictEqual(document.activeElement, actionManager.el.querySelector('.o_searchview .o_searchview_facet'));
+
+            // press right to focus the input
+            await testUtils.dom.triggerEvent(document.activeElement, 'keydown', { key: 'ArrowRight' });
+            assert.strictEqual(document.activeElement, actionManager.el.querySelector('.o_searchview input.o_searchview_input'));
+
+            actionManager.destroy();
+        });
+
+        QUnit.test('search date and datetime fields. Support of timezones', async function (assert) {
+            assert.expect(4);
+
+            let searchReadCount = 0;
+            const actionManager = await createActionManager({
+                actions: this.actions,
+                archs: this.archs,
+                data: this.data,
+                session: {
+                    getTZOffset() {
+                        return 360;
+                    }
+                },
+                async mockRPC(route, args) {
+                    if (route === '/web/dataset/search_read') {
+                        switch (searchReadCount) {
+                            case 0:
+                                // Done on loading
+                                break;
+                            case 1:
+                                assert.deepEqual(args.domain, [["birthday", "=", "1983-07-15"]],
+                                    "A date should stay what the user has input, but transmitted in server's format");
+                                break;
+                            case 2:
+                                // Done on closing the first facet
+                                break;
+                            case 3:
+                                assert.deepEqual(args.domain, [["birth_datetime", "=", "1983-07-14 18:00:00"]],
+                                    "A datetime should be transformed in UTC and transmitted in server's format");
+                                break;
+                        }
+                        searchReadCount++;
+                    }
+                    return this._super(...arguments);
+                },
+            });
+            await actionManager.doAction(1);
+
+            // Date case
+            let searchInput = actionManager.el.querySelector('.o_searchview_input');
+            await testUtils.fields.editInput(searchInput, '07/15/1983');
+            await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'ArrowDown' });
+            await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'Enter' });
+
+            assert.strictEqual(actionManager.el.querySelector('.o_searchview_facet .o_facet_values').innerText.trim(),
+                '07/15/1983',
+                'The format of the date in the facet should be in locale');
+
+            // Close Facet
+            await testUtils.dom.click($('.o_searchview_facet .o_facet_remove'));
+
+            // DateTime case
+            searchInput = actionManager.el.querySelector('.o_searchview_input');
+            await testUtils.fields.editInput(searchInput, '07/15/1983 00:00:00');
+            await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'ArrowDown' });
+            await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'ArrowDown' });
+            await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'Enter' });
+
+            assert.strictEqual(actionManager.el.querySelector('.o_searchview_facet .o_facet_values').innerText.trim(),
+                '07/15/1983 00:00:00',
+                'The format of the datetime in the facet should be in locale');
+
+            actionManager.destroy();
+        });
+
+        QUnit.test('select an autocomplete field', async function (assert) {
+            assert.expect(3);
+
+            let searchReadCount = 0;
+            const actionManager = await createActionManager({
+                actions: this.actions,
+                archs: this.archs,
+                data: this.data,
+                async mockRPC(route, args) {
+                    if (route === '/web/dataset/search_read') {
+                        switch (searchReadCount) {
+                            case 0:
+                                // Done on loading
+                                break;
+                            case 1:
+                                assert.deepEqual(args.domain, [["foo", "ilike", "a"]]);
+                                break;
+                        }
+                        searchReadCount++;
+                    }
+                    return this._super(...arguments);
+                },
+            });
+            await actionManager.doAction(1);
+
+            const searchInput = actionManager.el.querySelector('.o_searchview_input');
+            await testUtils.fields.editInput(searchInput, 'a');
+            assert.containsN(actionManager, '.o_searchview_autocomplete li', 2,
+                "there should be 2 result for 'a' in search bar autocomplete");
+
+            await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'Enter' });
+            assert.strictEqual(actionManager.el.querySelector('.o_searchview_input_container .o_facet_values').innerText.trim(),
+                "a", "There should be a field facet with label 'a'");
+
+            actionManager.destroy();
+        });
+
+        QUnit.test('select an autocomplete field with `context` key', async function (assert) {
+            assert.expect(9);
+
+            let searchReadCount = 0;
+            const firstLoading = testUtils.makeTestPromise();
+            const actionManager = await createActionManager({
+                actions: this.actions,
+                archs: this.archs,
+                data: this.data,
+                async mockRPC(route, args) {
+                    if (route === '/web/dataset/search_read') {
+                        switch (searchReadCount) {
+                            case 0:
+                                firstLoading.resolve();
+                                break;
+                            case 1:
+                                assert.deepEqual(args.domain, [["bar", "=", 1]]);
+                                assert.deepEqual(args.context.bar, [1]);
+                                break;
+                            case 2:
+                                assert.deepEqual(args.domain, ["|", ["bar", "=", 1], ["bar", "=", 2]]);
+                                assert.deepEqual(args.context.bar, [1, 2]);
+                                break;
+                        }
+                        searchReadCount++;
+                    }
+                    return this._super(...arguments);
+                },
+            });
+            await actionManager.doAction(1);
+            await firstLoading;
+            assert.strictEqual(searchReadCount, 1, "there should be 1 search_read");
+            const searchInput = actionManager.el.querySelector('.o_searchview_input');
+
+            // 'r' key to filter on bar "First Record"
+            await testUtils.fields.editInput(searchInput, 'record');
+            await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'ArrowDown' });
+            await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'ArrowRight' });
+            await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'ArrowDown' });
+            await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'Enter' });
+
+            assert.strictEqual(actionManager.el.querySelector('.o_searchview_input_container .o_facet_values').innerText.trim(),
+                "First record",
+                "the autocompletion facet should be correct");
+            assert.strictEqual(searchReadCount, 2, "there should be 2 search_read");
+
+            // 'r' key to filter on bar "Second Record"
+            await testUtils.fields.editInput(searchInput, 'record');
+            await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'ArrowDown' });
+            await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'ArrowRight' });
+            await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'ArrowDown' });
+            await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'ArrowDown' });
+            await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'Enter' });
+
+            assert.strictEqual(actionManager.el.querySelector('.o_searchview_input_container .o_facet_values').innerText.trim(),
+                "First recordorSecond record",
+                "the autocompletion facet should be correct");
+            assert.strictEqual(searchReadCount, 3, "there should be 3 search_read");
+
+            actionManager.destroy();
+        });
+
+        QUnit.test('no search text triggers a reload', async function (assert) {
+            assert.expect(2);
+
+            // Switch to pivot to ensure that the event comes from the control panel
+            // (pivot does not have a handler on "reload" event).
+            this.actions[0].views = [[false, 'pivot']];
+            this.archs['partner,false,pivot'] = `
+            <pivot>
+                <field name="foo" type="row"/>
+            </pivot>`;
+
+            let rpcs;
+            const actionManager = await createActionManager({
+                actions: this.actions,
+                archs: this.archs,
+                data: this.data,
+                mockRPC: function () {
+                    rpcs++;
+                    return this._super.apply(this, arguments);
+                },
+            });
+            await actionManager.doAction(1);
+
+            const searchInput = actionManager.el.querySelector('.o_searchview_input');
+            rpcs = 0;
+            await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'Enter' });
+
+            assert.containsNone(actionManager, '.o_searchview_facet_label');
+            assert.strictEqual(rpcs, 2, "should have reloaded");
+
+            actionManager.destroy();
+        });
+
+        QUnit.test('selecting (no result) triggers a re-render', async function (assert) {
+            assert.expect(3);
+
+            const actionManager = await createActionManager({
+                actions: this.actions,
+                archs: this.archs,
+                data: this.data,
+            });
+
+            await actionManager.doAction(1);
+
+            const searchInput = actionManager.el.querySelector('.o_searchview_input');
+
+            // 'a' key to filter nothing on bar
+            await testUtils.fields.editInput(searchInput, 'hello there');
+            await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'ArrowDown' });
+            await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'ArrowRight' });
+            await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'ArrowDown' });
+
+            assert.strictEqual(actionManager.el.querySelector('.o_searchview_autocomplete .o_selection_focus').innerText.trim(), "(no result)",
+                "there should be no result for 'a' in bar");
+
+            await testUtils.dom.triggerEvent(searchInput, 'keydown', { key: 'Enter' });
+
+            assert.containsNone(actionManager, '.o_searchview_facet_label');
+            assert.strictEqual(actionManager.el.querySelector('.o_searchview_input').value, "",
+                "the search input should be re-rendered");
+
+            actionManager.destroy();
+        });
+
+        QUnit.test('update suggested filters in autocomplete menu with Japanese IME', async function (assert) {
+            assert.expect(4);
+
+            // The goal here is to simulate as many events happening during an IME
+            // assisted composition session as possible. Some of these events are
+            // not handled but are triggered to ensure they do not interfere.
+            const TEST = "TEST";
+            const テスト = "テスト";
+            const actionManager = await createActionManager({
+                actions: this.actions,
+                archs: this.archs,
+                data: this.data,
+            });
+            await actionManager.doAction(1);
+            const searchInput = actionManager.el.querySelector('.o_searchview_input');
+
+            // Simulate typing "TEST" on search view.
+            for (let i = 0; i < TEST.length; i++) {
+                const key = TEST[i].toUpperCase();
+                await testUtils.dom.triggerEvent(searchInput, 'keydown',
+                    { key, isComposing: true });
+                if (i === 0) {
+                    // Composition is initiated after the first keydown
+                    await testUtils.dom.triggerEvent(searchInput, 'compositionstart');
+                }
+                await testUtils.dom.triggerEvent(searchInput, 'keypress',
+                    { key, isComposing: true });
+                searchInput.value = TEST.slice(0, i + 1);
+                await testUtils.dom.triggerEvent(searchInput, 'keyup',
+                    { key, isComposing: true });
+                await testUtils.dom.triggerEvent(searchInput, 'input',
+                    { inputType: 'insertCompositionText', isComposing: true });
+            }
+            assert.containsOnce(actionManager.el, '.o_searchview_autocomplete',
+                "should display autocomplete dropdown menu on typing something in search view"
+            );
+            assert.strictEqual(
+                actionManager.el.querySelector('.o_searchview_autocomplete li').innerText.trim(),
+                "Search Foo for: TEST",
+                `1st filter suggestion should be based on typed word "TEST"`
+            );
+
+            // Simulate soft-selection of another suggestion from IME through keyboard navigation.
+            await testUtils.dom.triggerEvent(searchInput, 'keydown',
+                { key: 'ArrowDown', isComposing: true });
+            await testUtils.dom.triggerEvent(searchInput, 'keypress',
+                { key: 'ArrowDown', isComposing: true });
+            searchInput.value = テスト;
+            await testUtils.dom.triggerEvent(searchInput, 'keyup',
+                { key: 'ArrowDown', isComposing: true });
+            await testUtils.dom.triggerEvent(searchInput, 'input',
+                { inputType: 'insertCompositionText', isComposing: true });
+
+            assert.strictEqual(
+                actionManager.el.querySelector('.o_searchview_autocomplete li').innerText.trim(),
+                "Search Foo for: テスト",
+                `1st filter suggestion should be updated with soft-selection typed word "テスト"`
+            );
+
+            // Simulate selection on suggestion item "TEST" from IME.
+            await testUtils.dom.triggerEvent(searchInput, 'keydown',
+                { key: 'Enter', isComposing: true });
+            await testUtils.dom.triggerEvent(searchInput, 'keypress',
+                { key: 'Enter', isComposing: true });
+            searchInput.value = TEST;
+            await testUtils.dom.triggerEvent(searchInput, 'keyup',
+                { key: 'Enter', isComposing: true });
+            await testUtils.dom.triggerEvent(searchInput, 'input',
+                { inputType: 'insertCompositionText', isComposing: true });
+
+            // End of the composition
+            await testUtils.dom.triggerEvent(searchInput, 'compositionend');
+
+            assert.strictEqual(
+                actionManager.el.querySelector('.o_searchview_autocomplete li').innerText.trim(),
+                "Search Foo for: TEST",
+                `1st filter suggestion should finally be updated with click selection on word "TEST" from IME`
+            );
+
+            actionManager.destroy();
+        });
+    });
+});
diff --git a/addons/web/static/tests/control_panel/time_range_menu_tests.js b/addons/web/static/tests/control_panel/time_range_menu_tests.js
new file mode 100644
index 00000000000..17b6936c9ca
--- /dev/null
+++ b/addons/web/static/tests/control_panel/time_range_menu_tests.js
@@ -0,0 +1,333 @@
+odoo.define('web.time_range_menu_tests', function (require) {
+    "use strict";
+
+    const testUtils = require('web.test_utils');
+    const { TIME_RANGE_OPTIONS, COMPARISON_TIME_RANGE_OPTIONS } = require('web.searchUtils');
+
+    const { controlPanel: cpHelpers, createControlPanel, mock } = testUtils;
+    const { patchDate } = mock;
+
+    const searchMenuTypes = ['timeRange'];
+
+    QUnit.module('Components', {
+        beforeEach: function () {
+            this.fields = {
+                birthday: { string: "Birthday", type: "date", store: true, sortable: true },
+                date_field: { string: "Date", type: "date", store: true, sortable: true },
+                float_field: { string: "Float", type: "float", group_operator: 'sum' },
+                foo: { string: "Foo", type: "char", store: true, sortable: true },
+            };
+        },
+    }, function () {
+
+        QUnit.module('TimeRangeMenu');
+
+        QUnit.test('simple rendering', async function (assert) {
+            assert.expect(12);
+
+            const params = {
+                cpStoreConfig: { viewInfo: { fields: this.fields }, searchMenuTypes },
+                cpProps: { fields: this.fields, searchMenuTypes },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            assert.containsOnce(controlPanel, 'div.o_time_range_menu > button i.fa.fa-calendar');
+            assert.strictEqual(controlPanel.el.querySelector('div.o_time_range_menu > button span').innerText.trim(), 'Time Ranges');
+
+            await cpHelpers.toggleTimeRangeMenu(controlPanel);
+
+            assert.containsN(controlPanel, 'div.o_time_range_section', 3);
+
+            let selectEls = [...controlPanel.el.querySelectorAll('div.o_time_range_section select')];
+            assert.strictEqual(selectEls.length, 2);
+            assert.deepEqual(selectEls.map(e => e.value), ['birthday', 'this_month']);
+            assert.containsN(controlPanel, 'div.o_time_range_section label', 3);
+
+            const labelEls = [...controlPanel.el.querySelectorAll('div.o_time_range_section label')];
+            assert.deepEqual(labelEls.map(e => e.innerText.trim()), ['Based On', 'Range', 'Compare To']);
+            assert.containsOnce(controlPanel, 'div.o_time_range_section input[type="checkbox"]');
+
+            assert.containsOnce(controlPanel, 'div.o_time_range_menu ul button');
+            assert.strictEqual(
+                // text is upper cased in enterprise
+                controlPanel.el.querySelector('div.o_time_range_menu ul button').innerText.trim().toUpperCase(),
+                'APPLY'
+            );
+
+            await cpHelpers.toggleTimeRangeMenuBox(controlPanel);
+
+            selectEls = controlPanel.el.querySelectorAll('div.o_time_range_section select');
+            assert.strictEqual(selectEls.length, 3);
+            assert.strictEqual(selectEls[2].value, 'previous_period');
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('initialization with default time range without comparisonRange', async function (assert) {
+            assert.expect(5);
+
+            const unpatchDate = patchDate(2020, 0, 29, 15, 0, 0);
+
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: { fields: this.fields },
+                    searchMenuTypes,
+                    actionContext: {
+                        time_ranges: { field: 'date_field', range: 'this_week' }
+                    }
+                },
+                cpProps: { fields: this.fields, searchMenuTypes },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            const { timeRanges } = controlPanel.getQuery();
+            assert.deepEqual(timeRanges, {
+                fieldDescription: "Date",
+                fieldName: "date_field",
+                range: [
+                    "&",
+                    ["date_field", ">=", "2020-01-27"],
+                    ["date_field", "<", "2020-02-03"]
+                ],
+                rangeDescription: "This Week",
+                rangeId: "this_week"
+            });
+
+            await cpHelpers.toggleTimeRangeMenu(controlPanel);
+
+            const selectEls = controlPanel.el.querySelectorAll('div.o_time_range_section select');
+            assert.strictEqual(selectEls.length, 2);
+            assert.deepEqual(
+                [...selectEls].map(e => e.value),
+                ['date_field', 'this_week']
+            );
+
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Date: This Week']);
+            assert.containsOnce(controlPanel.el.querySelector('.o_searchview .o_searchview_facet'),
+                'span.fa.fa-calendar.o_searchview_facet_label');
+
+            controlPanel.destroy();
+            unpatchDate();
+        });
+
+        QUnit.test('initialization with default time range with comparisonRange', async function (assert) {
+            assert.expect(4);
+
+            const unpatchDate = patchDate(2020, 0, 29, 15, 0, 0);
+
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: { fields: this.fields },
+                    searchMenuTypes,
+                    actionContext: {
+                        time_ranges: { field: 'date_field', range: 'today', comparisonRange: 'previous_year' }
+                    }
+                },
+                cpProps: { fields: this.fields, searchMenuTypes },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            const { timeRanges } = controlPanel.getQuery();
+            assert.deepEqual(timeRanges, {
+                comparisonRange: [
+                    "&",
+                    ["date_field", ">=", "2019-01-29"],
+                    ["date_field", "<", "2019-01-30"]
+                ],
+                comparisonRangeDescription: "Previous Year",
+                comparisonRangeId: "previous_year",
+                fieldDescription: "Date",
+                fieldName: "date_field",
+                range: [
+                    "&",
+                    ["date_field", ">=", "2020-01-29"],
+                    ["date_field", "<", "2020-01-30"]
+                ],
+                rangeDescription: "Today",
+                rangeId: "today"
+            });
+
+            await cpHelpers.toggleTimeRangeMenu(controlPanel);
+
+            const selectEls = controlPanel.el.querySelectorAll('div.o_time_range_section select');
+            assert.strictEqual(selectEls.length, 3);
+            assert.deepEqual(
+                [...selectEls].map(e => e.value),
+                ['date_field', 'today', 'previous_year']
+            );
+
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Date: Today / Previous Year']);
+
+            controlPanel.destroy();
+            unpatchDate();
+        });
+
+        QUnit.test('activate a time range works', async function (assert) {
+            assert.expect(3);
+
+            const unpatchDate = patchDate(2020, 0, 29, 1, 0, 0);
+
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: { fields: this.fields },
+                    searchMenuTypes,
+                },
+                cpProps: { fields: this.fields, searchMenuTypes },
+                search: function (searchQuery) {
+                    const { timeRanges } = searchQuery;
+                    assert.deepEqual(timeRanges, {
+                        comparisonRange: [
+                            "&",
+                            ["birthday", ">=", "2019-01-29"],
+                            ["birthday", "<", "2019-01-30"]
+                        ],
+                        comparisonRangeDescription: "Previous Year",
+                        comparisonRangeId: "previous_year",
+                        fieldDescription: "Birthday",
+                        fieldName: "birthday",
+                        range: [
+                            "&",
+                            ["birthday", ">=", "2020-01-29"],
+                            ["birthday", "<", "2020-01-30"]
+                        ],
+                        rangeDescription: "Today",
+                        rangeId: "today"
+                    });
+                }
+            };
+            const controlPanel = await createControlPanel(params);
+
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
+
+            await cpHelpers.toggleTimeRangeMenu(controlPanel);
+            await cpHelpers.toggleTimeRangeMenuBox(controlPanel);
+
+            await cpHelpers.selectField(controlPanel, 'birthday');
+            await cpHelpers.selectRange(controlPanel, 'today');
+            await cpHelpers.selectComparisonRange(controlPanel, 'previous_year');
+
+            await cpHelpers.applyTimeRange(controlPanel);
+
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), ['Birthday: Today / Previous Year']);
+
+            controlPanel.destroy();
+            unpatchDate();
+        });
+
+        QUnit.test('no timeRanges key in search query if "timeRange" not in searchMenuTypes', async function (assert) {
+            assert.expect(1);
+
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: { fields: this.fields },
+                    actionContext: {
+                        time_ranges: { field: 'date_field', range: 'this_week' }
+                    }
+                },
+                cpProps: { fields: this.fields },
+            };
+            const controlPanel = await createControlPanel(params);
+
+            const { timeRanges } = controlPanel.getQuery();
+            assert.strictEqual(timeRanges, undefined);
+
+            controlPanel.destroy();
+        });
+
+        QUnit.test('time ranges generated are correct', async function (assert) {
+            assert.expect(85);
+
+            const unpatchDate = patchDate(2017, 2, 22, 1, 0, 0);
+
+            const ranges = {
+                last_7_days: ['&', ["birthday", ">=", "2017-03-15"], ["birthday", "<", "2017-03-22"]],
+                last_30_days: ['&', ["birthday", ">=", "2017-02-20"], ["birthday", "<", "2017-03-22"]],
+                last_365_days: ['&', ["birthday", ">=", "2016-03-22"], ["birthday", "<", "2017-03-22"]],
+                last_5_years: ['&', ["birthday", ">=", "2012-03-22"], ["birthday", "<", "2017-03-22"]],
+                today: ['&', ["birthday", ">=", "2017-03-22"], ["birthday", "<", "2017-03-23"]],
+                this_week: ['&', ["birthday", ">=", "2017-03-20"], ["birthday", "<", "2017-03-27"]],
+                this_month: ['&', ["birthday", ">=", "2017-03-01"], ["birthday", "<", "2017-04-01"]],
+                this_quarter: ['&', ["birthday", ">=", "2017-01-01"], ["birthday", "<", "2017-04-01"]],
+                this_year: ['&', ["birthday", ">=", "2017-01-01"], ["birthday", "<", "2018-01-01"]],
+                yesterday: ['&', ["birthday", ">=", "2017-03-21"], ["birthday", "<", "2017-03-22"]],
+                last_week: ['&', ["birthday", ">=", "2017-03-13"], ["birthday", "<", "2017-03-20"]],
+                last_month: ['&', ["birthday", ">=", "2017-02-01"], ["birthday", "<", "2017-03-01"]],
+                last_quarter: ['&', ["birthday", ">=", "2016-10-01"], ["birthday", "<", "2017-01-01"]],
+                last_year: ['&', ["birthday", ">=", "2016-01-01"], ["birthday", "<", "2017-01-01"]],
+            };
+            const comparisonRanges = {
+                previous_period: {
+                    last_7_days: ['&', ["birthday", ">=", "2017-03-08"], ["birthday", "<", "2017-03-15"]],
+                    last_30_days: ['&', ["birthday", ">=", "2017-01-21"], ["birthday", "<", "2017-02-20"]],
+                    last_365_days: ['&', ["birthday", ">=", "2015-03-23"], ["birthday", "<", "2016-03-22"]],
+                    last_5_years: ['&', ["birthday", ">=", "2007-03-22"], ["birthday", "<", "2012-03-22"]],
+                    today: ['&', ["birthday", ">=", "2017-03-21"], ["birthday", "<", "2017-03-22"]],
+                    this_week: ['&', ["birthday", ">=", "2017-03-13"], ["birthday", "<", "2017-03-20"]],
+                    this_month: ['&', ["birthday", ">=", "2017-02-01"], ["birthday", "<", "2017-03-01"]],
+                    this_quarter: ['&', ["birthday", ">=", "2016-10-01"], ["birthday", "<", "2017-01-01"]],
+                    this_year: ['&', ["birthday", ">=", "2016-01-01"], ["birthday", "<", "2017-01-01"]],
+                    yesterday: ['&', ["birthday", ">=", "2017-03-20"], ["birthday", "<", "2017-03-21"]],
+                    last_week: ['&', ["birthday", ">=", "2017-03-06"], ["birthday", "<", "2017-03-13"]],
+                    last_month: ['&', ["birthday", ">=", "2017-01-01"], ["birthday", "<", "2017-02-01"]],
+                    last_quarter: ['&', ["birthday", ">=", "2016-07-01"], ["birthday", "<", "2016-10-01"]],
+                    last_year: ['&', ["birthday", ">=", "2015-01-01"], ["birthday", "<", "2016-01-01"]],
+                },
+                previous_year: {
+                    last_7_days: ["&", ["birthday", ">=", "2016-03-15"], ["birthday", "<", "2016-03-22"]],
+                    last_30_days: ["&", ["birthday", ">=", "2016-02-21"], ["birthday", "<", "2016-03-22"]],
+                    last_365_days: ["&", ["birthday", ">=", "2015-03-23"], ["birthday", "<", "2016-03-22"]],
+                    last_5_years: ["&", ["birthday", ">=", "2011-03-22"], ["birthday", "<", "2016-03-22"]],
+                    today: ["&", ["birthday", ">=", "2016-03-22"], ["birthday", "<", "2016-03-23"]],
+                    this_week: ["&", ["birthday", ">=", "2016-03-21"], ["birthday", "<", "2016-03-28"]],
+                    this_month: ["&", ["birthday", ">=", "2016-03-01"], ["birthday", "<", "2016-04-01"]],
+                    this_quarter: ["&", ["birthday", ">=", "2016-01-01"], ["birthday", "<", "2016-04-01"]],
+                    this_year: ["&", ["birthday", ">=", "2016-01-01"], ["birthday", "<", "2017-01-01"]],
+                    yesterday: ["&", ["birthday", ">=", "2016-03-21"], ["birthday", "<", "2016-03-22"]],
+                    last_week: ["&", ["birthday", ">=", "2016-03-14"], ["birthday", "<", "2016-03-21"]],
+                    last_month: ["&", ["birthday", ">=", "2016-02-01"], ["birthday", "<", "2016-03-01"]],
+                    last_quarter: ["&", ["birthday", ">=", "2015-10-01"], ["birthday", "<", "2016-01-01"]],
+                    last_year: ["&", ["birthday", ">=", "2015-01-01"], ["birthday", "<", "2016-01-01"]],
+                }
+            };
+
+            const params = {
+                cpStoreConfig: {
+                    viewInfo: { fields: this.fields },
+                    searchMenuTypes,
+                },
+                cpProps: { fields: this.fields, searchMenuTypes },
+                search: function (searchQuery) {
+                    const { timeRanges } = searchQuery;
+                    const { range, comparisonRange, rangeId, comparisonRangeId } = timeRanges;
+                    if (!comparisonRangeId) {
+                        assert.deepEqual(range, ranges[rangeId]);
+                    } else {
+                        assert.deepEqual(comparisonRange, comparisonRanges[comparisonRangeId][rangeId]);
+                    }
+                }
+            };
+            const controlPanel = await createControlPanel(params);
+
+            assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), []);
+
+            await cpHelpers.toggleTimeRangeMenu(controlPanel);
+
+            for (const o of Object.values(TIME_RANGE_OPTIONS)) {
+                await cpHelpers.selectRange(controlPanel, o.id);
+                await cpHelpers.applyTimeRange(controlPanel);
+                assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), [`Birthday: ${o.description}`]);
+
+                await cpHelpers.toggleTimeRangeMenuBox(controlPanel);
+                for (const co of Object.values(COMPARISON_TIME_RANGE_OPTIONS)) {
+                    await cpHelpers.selectComparisonRange(controlPanel, co.id);
+                    await cpHelpers.applyTimeRange(controlPanel);
+                    assert.deepEqual(cpHelpers.getFacetTexts(controlPanel), [`Birthday: ${o.description} / ${co.description}`]);
+                }
+                await cpHelpers.toggleTimeRangeMenuBox(controlPanel);
+            }
+
+            controlPanel.destroy();
+            unpatchDate();
+        });
+    });
+});
diff --git a/addons/web/static/tests/views/control_panel_tests.js b/addons/web/static/tests/views/control_panel_tests.js
deleted file mode 100644
index 557811b39c3..00000000000
--- a/addons/web/static/tests/views/control_panel_tests.js
+++ /dev/null
@@ -1,584 +0,0 @@
-odoo.define('web.control_panel_tests', function (require) {
-"use strict";
-
-const AbstractAction = require('web.AbstractAction');
-const ControlPanelView = require('web.ControlPanelView');
-const core = require('web.core');
-const testUtils = require('web.test_utils');
-
-const createActionManager = testUtils.createActionManager;
-const createControlPanel = testUtils.createControlPanel;
-
-function createControlPanelFactory(arch, fields) {
-    arch = arch || "<search></search>";
-    fields = fields || {};
-    var viewInfo = {arch: arch, fields: fields};
-    var controlPanelFactory = new ControlPanelView({viewInfo: viewInfo, context: {}});
-    return controlPanelFactory;
-}
-
-QUnit.module('Views', {
-    beforeEach: function () {
-        this.data = {
-            partner: {
-                fields: {
-                    display_name: { string: "Displayed name", type: 'char' },
-                    foo: {string: "Foo", type: "char", default: "My little Foo Value", store: true, sortable: true},
-                    date_field: {string: "Date", type: "date", store: true, sortable: true},
-                    float_field: {string: "Float", type: "float"},
-                    bar: {string: "Bar", type: "many2one", relation: 'partner'},
-                },
-                records: [],
-                onchanges: {},
-            },
-        };
-    }
-}, function () {
-    QUnit.module('ControlPanelView');
-
-    QUnit.module('Control Panel Arch Parsing');
-
-    QUnit.test('empty arch', function (assert) {
-        assert.expect(1);
-
-        var controlPanelFactory = createControlPanelFactory();
-        assert.deepEqual(
-            controlPanelFactory.loadParams.groups,
-            [],
-            "there should be no group at all"
-        );
-    });
-
-    QUnit.test('parse one field tag', function (assert) {
-        assert.expect(1);
-        var arch = "<search>" +
-                        "<field name=\"bar\"/>" +
-                    "</search>";
-        var fields = this.data.partner.fields;
-        var controlPanelFactory = createControlPanelFactory(arch, fields);
-        assert.deepEqual(
-            controlPanelFactory.loadParams.groups,
-            [[{
-                attrs: {
-                    name: "bar",
-                    string: "Bar"
-                },
-                autoCompleteValues: [],
-                description: "bar",
-                isDefault: false,
-                type: "field"
-            }]],
-            "there should be one group with one field"
-        );
-    });
-
-    QUnit.test('parse one separator tag', function (assert) {
-        assert.expect(1);
-        var arch = "<search>" +
-                        "<separator/>" +
-                    "</search>";
-        var fields = this.data.partner.fields;
-        var controlPanelFactory = createControlPanelFactory(arch, fields);
-        assert.deepEqual(
-            controlPanelFactory.loadParams.groups,
-            [],
-            "there should be no group at all");
-    });
-
-    QUnit.test('parse one separator tag and one field tag', function (assert) {
-        assert.expect(1);
-        var arch = "<search>" +
-                        "<separator/>" +
-                        "<field name=\"bar\"/>" +
-                    "</search>";
-        var fields = this.data.partner.fields;
-        var controlPanelFactory = createControlPanelFactory(arch, fields);
-        assert.deepEqual(
-            controlPanelFactory.loadParams.groups,
-            [[
-                {
-                  attrs: {
-                    name: "bar",
-                    string: "Bar"
-                  },
-                  autoCompleteValues: [],
-                  description: "bar",
-                  isDefault: false,
-                  type: "field"
-                }
-            ]],
-            "there should be one group with one field"
-        );
-    });
-
-    QUnit.test('parse one filter tag', function (assert) {
-        assert.expect(1);
-        var arch = "<search>" +
-                        "<filter name=\"filter\" string=\"Hello\" " +
-                        "domain=\"[]\"/>" +
-                    "</search>";
-        var fields = this.data.partner.fields;
-        var controlPanelFactory = createControlPanelFactory(arch, fields);
-        assert.deepEqual(
-            controlPanelFactory.loadParams.groups,
-            [[{
-                context: {},
-                description: "Hello",
-                groupNumber: 2,
-                domain: "[]",
-                isDefault: false,
-                type: "filter"
-            }]],
-            "there should be one group with one filter"
-        );
-    });
-
-    QUnit.test('parse one groupBy tag', function (assert) {
-        assert.expect(1);
-        var arch = "<search>" +
-                        "<groupBy name=\"groupby\" string=\"Hi\" " +
-                        "context=\"{\'group_by\': \'date_field:day\'}\"/>" +
-                    "</search>";
-        var fields = this.data.partner.fields;
-        var controlPanelFactory = createControlPanelFactory(arch, fields);
-        assert.deepEqual(
-            controlPanelFactory.loadParams.groups,
-            [[
-                {
-                    currentOptionIds: new Set(),
-                    defaultOptionId: "day",
-                    description: "Hi",
-                    fieldName: "date_field",
-                    fieldType: "date",
-                    groupNumber: 2,
-                    hasOptions: true,
-                    isDefault: false,
-                    options: [
-                        {
-                          description: "Year",
-                          groupId: 1,
-                          optionId: "year"
-                        },
-                        {
-                          description: "Quarter",
-                          groupId: 1,
-                          optionId: "quarter"
-                        },
-                        {
-                          description: "Month",
-                          groupId: 1,
-                          optionId: "month"
-                        },
-                        {
-                          description: "Week",
-                          groupId: 1,
-                          optionId: "week"
-                        },
-                        {
-                          description: "Day",
-                          groupId: 1,
-                          optionId: "day"
-                        }
-                      ],
-                    type: "groupBy"
-                }
-            ]],
-            "there should be one group with one groupBy with options"
-        );
-    });
-
-    QUnit.test('parse two filter tags', function (assert) {
-        assert.expect(1);
-        var arch = "<search>" +
-                        "<filter name=\"filter_1\" string=\"Hello One\" " +
-                        "domain=\"[]\"/>" +
-                        "<filter name=\"filter_2\" string=\"Hello Two\" " +
-                        "domain=\"[(\'bar\', \'=\', 3)]\"/>" +
-                    "</search>";
-        var fields = this.data.partner.fields;
-        var controlPanelFactory = createControlPanelFactory(arch, fields);
-        assert.deepEqual(
-            controlPanelFactory.loadParams.groups,
-            [[
-                {
-                  "context": {},
-                  "description": "Hello One",
-                  "domain": "[]",
-                  "groupNumber": 2,
-                  "isDefault": false,
-                  "type": "filter"
-                },
-                {
-                  "context": {},
-                  "description": "Hello Two",
-                  "domain": "[('bar', '=', 3)]",
-                  "groupNumber": 2,
-                  "isDefault": false,
-                  "type": "filter"
-                }
-            ]],
-            'there should be one group of two filters'
-        );
-    });
-
-    QUnit.test('parse two filter tags separated by a separator', function (assert) {
-        assert.expect(1);
-        var arch = "<search>" +
-                        "<filter name=\"filter_1\" string=\"Hello One\" " +
-                        "domain=\"[]\"/>" +
-                        "<separator/>" +
-                        "<filter name=\"filter_2\" string=\"Hello Two\" " +
-                        "domain=\"[(\'bar\', \'=\', 3)]\"/>" +
-                    "</search>";
-
-        var fields = this.data.partner.fields;
-        var controlPanelFactory = createControlPanelFactory(arch, fields);
-        assert.deepEqual(
-            controlPanelFactory.loadParams.groups,
-            [
-                [
-                    {
-                      context: {},
-                      description: "Hello One",
-                      domain: "[]",
-                      groupNumber: 2,
-                      isDefault: false,
-                      type: "filter"
-                    }
-                ],
-                [
-                    {
-                      context: {},
-                      description: "Hello Two",
-                      domain: "[('bar', '=', 3)]",
-                      groupNumber: 4,
-                      isDefault: false,
-                      type: "filter"
-                    }
-                ]
-            ],
-            "there should be two groups of one filter"
-        );
-    });
-
-    QUnit.test('parse one filter tag and one field', function (assert) {
-        assert.expect(1);
-        var arch = "<search>" +
-                        "<filter name=\"filter\" string=\"Hello\" domain=\"[]\"/>" +
-                        "<field name=\"bar\"/>" +
-                    "</search>";
-        var fields = this.data.partner.fields;
-        var controlPanelFactory = createControlPanelFactory(arch, fields);
-        assert.deepEqual(
-            controlPanelFactory.loadParams.groups,
-            [
-                [
-                    {
-                        context: {},
-                        description: "Hello",
-                        domain: "[]",
-                        groupNumber: 2,
-                        isDefault: false,
-                        type: "filter"
-                    }
-                ],
-                [
-                    {
-                        attrs: {
-                            name: "bar",
-                            string: "Bar"
-                        },
-                        autoCompleteValues: [],
-                        description: "bar",
-                        isDefault: false,
-                        type: "field"
-                    }
-                ]
-            ],
-            "there should be one group with a filter and one group with a field"
-        );
-    });
-
-    QUnit.test('parse two field tags', function (assert) {
-        assert.expect(1);
-        var arch = "<search>" +
-                        "<field name=\"foo\"/>" +
-                        "<field name=\"bar\"/>" +
-                    "</search>";
-        var fields = this.data.partner.fields;
-        var controlPanelFactory = createControlPanelFactory(arch, fields);
-        assert.deepEqual(
-            controlPanelFactory.loadParams.groups,
-            [
-                [
-                    {
-                        attrs: {
-                            name: "foo",
-                            string: "Foo"
-                        },
-                        autoCompleteValues: [],
-                        description: "foo",
-                        isDefault: false,
-                        type: "field"
-                    }
-                ],
-                [
-                    {
-                        attrs: {
-                            name: "bar",
-                            string: "Bar"
-                        },
-                        autoCompleteValues: [],
-                        description: "bar",
-                        isDefault: false,
-                        type: "field"
-                    }
-                ]
-            ],
-            "there should be two groups of a single field"
-        );
-    });
-
-    QUnit.module('Control Panel behaviour');
-
-    QUnit.test('remove a facet with backspace', async function (assert) {
-        assert.expect(2);
-
-        var controlPanel = await createControlPanel({
-            model: 'partner',
-            arch: "<search><filter name=\"filterA\" string=\"A\" domain=\"[]\"/></search>",
-            data: this.data,
-            searchMenuTypes: ['filter'],
-        });
-        await testUtils.dom.click(controlPanel.$('.o_filters_menu_button'));
-        await testUtils.dom.click($('.o_menu_item a'));
-        assert.strictEqual($('.o_searchview .o_searchview_facet .o_facet_values span').text().trim(), 'A',
-            'should have a facet with A');
-
-        // delete a facet
-        controlPanel.$('input.o_searchview_input').trigger($.Event('keydown', {
-            which: $.ui.keyCode.BACKSPACE,
-            keyCode: $.ui.keyCode.BACKSPACE,
-        }));
-        await testUtils.nextTick();
-        assert.strictEqual($('.o_searchview .o_searchview_facet .o_facet_values span').length, 0,
-        'there should be no facet');
-
-        // delete nothing (should not crash)
-        controlPanel.$('input.o_searchview_input').trigger($.Event('keydown', {
-            which: $.ui.keyCode.BACKSPACE,
-            keyCode: $.ui.keyCode.BACKSPACE,
-        }));
-        await testUtils.nextTick();
-
-        controlPanel.destroy();
-    });
-
-    QUnit.module('Control Panel Rendering');
-
-    QUnit.test('default breadcrumb in abstract action', async function (assert) {
-        assert.expect(1);
-
-        const ConcreteAction = AbstractAction.extend({
-            hasControlPanel: true,
-        });
-        core.action_registry.add('ConcreteAction', ConcreteAction);
-
-        const actionManager = await createActionManager();
-        await actionManager.doAction({id: 1,
-            name: 'A Concrete Action',
-            tag: 'ConcreteAction',
-            type: 'ir.actions.client',
-        });
-
-        assert.strictEqual(actionManager.$('.breadcrumb').text(), 'A Concrete Action');
-
-        actionManager.destroy();
-    });
-
-    QUnit.test('fiels and filters with groups/invisible attribute are not always rendered but activable as search default', async function (assert) {
-        assert.expect(13);
-        var controlPanel = await createControlPanel({
-            model: 'partner',
-            arch: "<search>" +
-                        "<field name=\"display_name\" string=\"Foo B\" invisible=\"1\"/>" +
-                        "<field name=\"foo\" string=\"Foo A\"/>" +
-                        "<filter name=\"filterA\" string=\"FA\" domain=\"[]\"/>" +
-                        "<filter name=\"filterB\" string=\"FB\" invisible=\"1\" domain=\"[]\"/>" +
-                        "<filter name=\"groupByA\" string=\"GA\" context=\"{'group_by': 'date_field:day'}\"/>" +
-                        "<filter name=\"groupByB\" string=\"GB\" context=\"{'group_by': 'date_field:day'}\" invisible=\"1\"/>" +
-                    "</search>",
-            data: this.data,
-            searchMenuTypes: ['filter', 'groupBy'],
-            context: {
-                search_default_display_name: 'value',
-                search_default_filterB: true,
-                search_default_groupByB: true,
-            },
-        });
-
-        // default filters/fields should be activated even if invisible
-        assert.containsN(controlPanel, '.o_searchview_facet', 3);
-
-
-        await testUtils.dom.click(controlPanel.$('.o_filters_menu_button'));
-        assert.containsOnce(controlPanel, '.o_menu_item a:contains("FA")');
-        assert.containsNone(controlPanel, '.o_menu_item a:contains("FB")');
-        // default filter should be activated even if invisible
-        assert.containsOnce(controlPanel, '.o_searchview_facet .o_facet_values:contains(FB)');
-
-        await testUtils.dom.click(controlPanel.$('button span.fa-bars'));
-        assert.containsOnce(controlPanel, '.o_menu_item a:contains("GA")');
-        assert.containsNone(controlPanel, '.o_menu_item a:contains("GB")');
-        // default filter should be activated even if invisible
-        assert.containsOnce(controlPanel, '.o_searchview_facet .o_facet_values:contains(GB)');
-
-        assert.strictEqual(controlPanel.$('.o_searchview_facet').eq(0).text().replace(/[\s\t]+/g, ""), "FooBvalue");
-
-
-        // 'a' key to filter nothing on bar
-        controlPanel.$('.o_searchview_input').val('a');
-        controlPanel.$('.o_searchview_input').trigger($.Event('keypress', { which: 65, keyCode: 65 }));
-        await testUtils.nextTick();
-        // the only item in autocomplete menu should be FooA: a
-        assert.strictEqual(controlPanel.$('div.o_searchview_autocomplete').text().replace(/[\s\t]+/g, ""), "SearchFooAfor:A");
-        controlPanel.$('.o_searchview_input').trigger($.Event('keydown', { which: $.ui.keyCode.ENTER, keyCode: $.ui.keyCode.ENTER }));
-        await testUtils.nextTick();
-
-
-        // The items in the Filters menu and the Group By menu should be the same as before
-        await testUtils.dom.click(controlPanel.$('.o_filters_menu_button'));
-        assert.containsOnce(controlPanel, '.o_menu_item a:contains("FA")');
-        assert.containsNone(controlPanel, '.o_menu_item a:contains("FB")');
-
-        await testUtils.dom.click(controlPanel.$('button span.fa-bars'));
-        assert.containsOnce(controlPanel, '.o_menu_item a:contains("GA")');
-        assert.containsNone(controlPanel, '.o_menu_item a:contains("GB")');
-
-
-        controlPanel.destroy();
-    });
-
-    QUnit.test('Favorites Use by Default and Share are exclusive', async function (assert) {
-        assert.expect(11);
-        var controlPanel = await createControlPanel({
-            model: 'partner',
-            arch: "<search></search>",
-            data: this.data,
-            searchMenuTypes: ['favorite'],
-        });
-        testUtils.dom.click(controlPanel.$('.o_favorites_menu_button'));
-        testUtils.dom.click(controlPanel.$('button.o_add_favorite'));
-        var $checkboxes = controlPanel.$('input[type="checkbox"]');
-
-        assert.strictEqual($checkboxes.length, 2,
-            '2 checkboxes are present')
-
-        assert.notOk($checkboxes[0].checked, 'Start: None of the checkboxes are checked (1)');
-        assert.notOk($checkboxes[1].checked, 'Start: None of the checkboxes are checked (2)');
-
-        testUtils.dom.click($checkboxes.eq(0));
-        assert.ok($checkboxes[0].checked, 'The first checkbox is checked');
-        assert.notOk($checkboxes[1].checked, 'The second checkbox is not checked');
-
-        testUtils.dom.click($checkboxes.eq(1));
-        assert.notOk($checkboxes[0].checked,
-            'Clicking on the second checkbox checks it, and unchecks the first (1)');
-        assert.ok($checkboxes[1].checked,
-            'Clicking on the second checkbox checks it, and unchecks the first (2)');
-
-        testUtils.dom.click($checkboxes.eq(0));
-        assert.ok($checkboxes[0].checked,
-            'Clicking on the first checkbox checks it, and unchecks the second (1)');
-        assert.notOk($checkboxes[1].checked,
-            'Clicking on the first checkbox checks it, and unchecks the second (2)');
-
-        testUtils.dom.click($checkboxes.eq(0));
-        assert.notOk($checkboxes[0].checked, 'End: None of the checkboxes are checked (1)');
-        assert.notOk($checkboxes[1].checked, 'End: None of the checkboxes are checked (2)');
-
-        controlPanel.destroy();
-    });
-
-    QUnit.test('load filter', async function (assert) {
-        assert.expect(1);
-
-        var controlPanel = await createControlPanel({
-            model: 'partner',
-            arch: "<search></search>",
-            data: this.data,
-            searchMenuTypes: ['filter'],
-            intercepts: {
-                load_filters: function (ev) {
-                    ev.data.on_success([
-                        {
-                            user_id: [2,"Mitchell Admin"],
-                            name: 'sorted filter',
-                            id: 5,
-                            context: {},
-                            sort: "[\"foo\", \"-bar\"]",
-                            domain: "[('user_id', '=', uid)]",
-                        }
-                    ]);
-                }
-            }
-        });
-
-         _.each(controlPanel.exportState().filters, function (filter) {
-            if (filter.type === 'favorite') {
-                assert.deepEqual(filter.orderedBy, 
-                    [{
-                        name: 'foo',
-                        asc: true,
-                    }, {
-                        name: 'bar',
-                        asc: false,
-                    }],
-                    'the filter should have the right orderedBy values');
-            }
-        });
-
-        controlPanel.destroy();
-    });
-
-    QUnit.test('save filter', async function (assert) {
-        assert.expect(1);
-
-        var controlPanel = await createControlPanel({
-            model: 'partner',
-            arch: "<search></search>",
-            data: this.data,
-            searchMenuTypes: ['filter'],
-            intercepts: {
-                create_filter: function (ev) {
-                    assert.strictEqual(ev.data.filter.sort, "[\"foo\",\"bar desc\"]",
-                        'The right format for the string "sort" should be sent to the server');
-                },
-                get_controller_query_params: function (ev) {
-                    ev.data.callback({
-                        orderedBy: [
-                            {
-                                name: 'foo',
-                                asc: true,
-                            }, {
-                                name: 'bar',
-                                asc: false,
-                            }
-                        ]
-                    });
-                }
-            }
-        });
-
-        controlPanel._onNewFavorite({
-            data: {
-                description: 'Morbier',
-                type: 'favorite',
-            },
-            stopPropagation: function () {return;}
-        });
-
-        controlPanel.destroy();
-    });
-});
-});
diff --git a/addons/web/views/webclient_templates.xml b/addons/web/views/webclient_templates.xml
index 8928ab3b210..b251bf20138 100644
--- a/addons/web/views/webclient_templates.xml
+++ b/addons/web/views/webclient_templates.xml
@@ -679,7 +679,6 @@
 
                 <script type="text/javascript" src="/web/static/tests/views/abstract_controller_tests.js"></script>
                 <script type="text/javascript" src="/web/static/tests/views/abstract_view_tests.js"></script>
-                <script type="text/javascript" src="/web/static/tests/views/control_panel_tests.js"></script>
                 <script type="text/javascript" src="/web/static/tests/views/form_tests.js"></script>
                 <script type="text/javascript" src="/web/static/tests/views/graph_tests.js"></script>
                 <script type="text/javascript" src="/web/static/tests/views/list_tests.js"></script>
@@ -691,11 +690,7 @@
                 <script type="text/javascript" src="/web/static/tests/views/abstract_view_banner_tests.js"></script>
                 <script type="text/javascript" src="/web/static/tests/views/kanban_model_tests.js"></script>
                 <script type="text/javascript" src="/web/static/tests/views/view_dialogs_tests.js"></script>
-                <script type="text/javascript" src="/web/static/tests/views/search_filter_menu_tests.js"></script>
-                <script type="text/javascript" src="/web/static/tests/views/search_groupby_menu_tests.js"></script>
-                <script type="text/javascript" src="/web/static/tests/widgets/dropdown_menu_tests.js"></script>
                 <script type="text/javascript" src="/web/static/tests/views/search_panel_tests.js"></script>
-                <script type="text/javascript" src="/web/static/tests/views/search_view_tests.js"></script>
                 <script type="text/javascript" src="/web/static/tests/core/ajax_tests.js"></script>
                 <script type="text/javascript" src="/web/static/tests/core/registry_tests.js"></script>
                 <script type="text/javascript" src="/web/static/tests/core/py_utils_tests.js"></script>
@@ -714,13 +709,26 @@
                 <script type="text/javascript" src="/web/static/tests/core/dom_tests.js"></script>
 
                 <script type="text/javascript" src="/web/static/tests/chrome/action_manager_tests.js"></script>
-                <script type="text/javascript" src="/web/static/tests/chrome/pager_tests.js"></script>
                 <script type="text/javascript" src="/web/static/tests/chrome/keyboard_navigation_mixin_tests.js"></script>
                 <script type="text/javascript" src="/web/static/tests/chrome/menu_tests.js"></script>
                 <script type="text/javascript" src="/web/static/tests/chrome/user_menu_tests.js"></script>
                 <script type="text/javascript" src="/web/static/tests/chrome/systray_tests.js"></script>
 
                 <script type="text/javascript" src="/web/static/tests/components/custom_file_input_tests.js"></script>
+                <script type="text/javascript" src="/web/static/tests/components/datepicker_tests.js"></script>
+                <script type="text/javascript" src="/web/static/tests/components/pager_tests.js"></script>
+                <script type="text/javascript" src="/web/static/tests/components/action_menus_tests.js"></script>
+                <script type="text/javascript" src="/web/static/tests/components/dropdown_menu_tests.js"></script>
+
+                <script type="text/javascript" src="/web/static/tests/control_panel/control_panel_model_tests.js"></script>
+                <script type="text/javascript" src="/web/static/tests/control_panel/control_panel_tests.js"></script>
+                <script type="text/javascript" src="/web/static/tests/control_panel/favorite_menu_tests.js"></script>
+                <script type="text/javascript" src="/web/static/tests/control_panel/custom_filter_item_tests.js"></script>
+                <script type="text/javascript" src="/web/static/tests/control_panel/filter_menu_tests.js"></script>
+                <script type="text/javascript" src="/web/static/tests/control_panel/custom_group_by_item_tests.js"></script>
+                <script type="text/javascript" src="/web/static/tests/control_panel/groupby_menu_tests.js"></script>
+                <script type="text/javascript" src="/web/static/tests/control_panel/search_bar_tests.js"></script>
+                <script type="text/javascript" src="/web/static/tests/control_panel/time_range_menu_tests.js"></script>
 
                 <script type="text/javascript" src="/web/static/tests/widgets/company_switcher_tests.js"/>
                 <script type="text/javascript" src="/web/static/tests/widgets/data_export_tests.js"/>

From 804507ef4925cafdf5349a3b7fa1e41dbca87ff7 Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Wed, 11 Mar 2020 09:38:30 +0000
Subject: [PATCH 10/10] [REF] *: Adapt all module tests to the new control
 panel

Use of the new control panel helpers to increase consistency and change the assertions
according to the new DOM/behaviour (e.g. components removed instead of turning invisible).

Part of task 2196029

Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
---
 .../account_dashboard_setup_bar_tests.js      |    2 +-
 addons/board/static/tests/dashboard_tests.js  |   84 +-
 .../google_drive/static/tests/gdrive_test.js  |  257 +--
 .../static/tests/systray_no_support_tests.js  |    2 +-
 .../im_support/static/tests/systray_tests.js  |   18 +-
 addons/mail/static/tests/activity_tests.js    |    5 +-
 addons/mail/static/tests/discuss_tests.js     |  107 +-
 .../tests/document_thread_window_tests.js     |   10 +-
 ...stray_messaging_menu_mail_failure_tests.js |    6 +-
 .../systray/systray_messaging_menu_tests.js   |   86 +-
 .../tests/systray_messaging_menu_tests.js     |    8 +-
 .../tests/chrome/action_manager_tests.js      |  206 +-
 addons/web/static/tests/chrome/pager_tests.js |   93 -
 .../components/custom_file_input_tests.js     |  137 +-
 .../static/tests/fields/basic_fields_tests.js |   91 +-
 .../field_many2many_tests.js                  |    6 +-
 .../relational_fields/field_many2one_tests.js |   22 +-
 .../relational_fields/field_one2many_tests.js |   33 +-
 .../tests/fields/relational_fields_tests.js   |   31 +-
 .../web/static/tests/views/calendar_tests.js  |    2 +
 addons/web/static/tests/views/form_tests.js   |  199 +-
 addons/web/static/tests/views/graph_tests.js  |  150 +-
 addons/web/static/tests/views/kanban_tests.js |   33 +-
 addons/web/static/tests/views/list_tests.js   |  285 ++-
 addons/web/static/tests/views/pivot_tests.js  |  198 +-
 addons/web/static/tests/views/qweb_tests.js   |    1 -
 .../tests/views/search_filter_menu_tests.js   |  206 --
 .../tests/views/search_groupby_menu_tests.js  |  200 --
 .../static/tests/views/search_panel_tests.js  |   45 +-
 .../static/tests/views/search_view_tests.js   | 1928 -----------------
 .../static/tests/views/view_dialogs_tests.js  |   68 +-
 .../static/tests/widgets/data_export_tests.js |   38 +-
 .../tests/widgets/dropdown_menu_tests.js      |  203 --
 .../tours/website_sale_shop_cart_recovery.js  |    2 +-
 .../test_new_api/static/tests/tours/x2many.js |    5 +
 35 files changed, 1076 insertions(+), 3691 deletions(-)
 delete mode 100644 addons/web/static/tests/chrome/pager_tests.js
 delete mode 100644 addons/web/static/tests/views/search_filter_menu_tests.js
 delete mode 100644 addons/web/static/tests/views/search_groupby_menu_tests.js
 delete mode 100644 addons/web/static/tests/views/search_view_tests.js
 delete mode 100644 addons/web/static/tests/widgets/dropdown_menu_tests.js

diff --git a/addons/account/static/tests/tours/account_dashboard_setup_bar_tests.js b/addons/account/static/tests/tours/account_dashboard_setup_bar_tests.js
index a212e1761ef..0d11b027163 100644
--- a/addons/account/static/tests/tours/account_dashboard_setup_bar_tests.js
+++ b/addons/account/static/tests/tours/account_dashboard_setup_bar_tests.js
@@ -20,7 +20,7 @@ odoo.define('account.dashboard.setup.tour', function (require) {
     }, {
         trigger: '.o_control_panel button:contains("' + _t('Print') + '")',
     }, {
-        trigger: '.o_control_panel div.o_dropdown_menu a:contains("' + _t('Invoices without Payment') + '")',
+        trigger: '.o_control_panel .o_dropdown_menu a:contains("' + _t('Invoices without Payment') + '")',
     }, {
         trigger: 'iframe .o_report_layout_standard h2',
         content: 'Primary color is correct',
diff --git a/addons/board/static/tests/dashboard_tests.js b/addons/board/static/tests/dashboard_tests.js
index 41cc5928c6a..f192f743997 100644
--- a/addons/board/static/tests/dashboard_tests.js
+++ b/addons/board/static/tests/dashboard_tests.js
@@ -8,6 +8,7 @@ var testUtils = require('web.test_utils');
 var ListRenderer = require('web.ListRenderer');
 var pyUtils = require('web.py_utils');
 
+const cpHelpers = testUtils.controlPanel;
 var createActionManager = testUtils.createActionManager;
 var createView = testUtils.createView;
 
@@ -701,7 +702,7 @@ QUnit.test('save actions to dashboard', async function (assert) {
             var result = this._super.apply(this, arguments);
             result.context = {
                 'fire': 'on the bayou',
-            }
+            };
             return result;
         }
     });
@@ -733,7 +734,7 @@ QUnit.test('save actions to dashboard', async function (assert) {
                 return Promise.resolve(true);
             }
             return this._super.apply(this, arguments);
-        },
+        }
     });
 
     await actionManager.doAction({
@@ -750,15 +751,16 @@ QUnit.test('save actions to dashboard', async function (assert) {
     await testUtils.dom.click($('.o_column_sortable'));
 
     // Group It
-    await testUtils.dom.click($('.o_search_options .o_dropdown button:contains(Group By)'));
-    await testUtils.dom.click($('.o_search_options .o_group_by_menu button'));
-    await testUtils.dom.click($('.o_search_options .o_group_by_menu button.o_apply_group'));
+    await cpHelpers.toggleGroupByMenu(actionManager);
+    await cpHelpers.toggleAddCustomGroup(actionManager);
+    await cpHelpers.applyGroup(actionManager);
 
     // add this action to dashboard
-    await testUtils.dom.click($('.o_search_options .o_dropdown button:contains(Favorites)'));
-    await testUtils.dom.click($('.o_add_to_board.o_menu_header'));
-    testUtils.fields.editInput($('input.o_add_to_board_input'), 'a name');
-    await testUtils.dom.click($('.o_add_to_board_confirm_button'));
+    await cpHelpers.toggleFavoriteMenu(actionManager);
+
+    await testUtils.dom.click($('.o_add_to_board > button'));
+    await testUtils.fields.editInput($('.o_add_to_board input'), 'a name');
+    await testUtils.dom.click($('.o_add_to_board div button'));
 
     testUtils.unpatch(ListController);
 
@@ -802,38 +804,28 @@ QUnit.test('save two searches to dashboard', async function (assert) {
 
     var filter_count = 0;
     // Add a first filter
-    await testUtils.dom.click(actionManager.$('.o_filters_menu_button'));
-    await testUtils.dom.click(actionManager.$('.o_add_custom_filter'));
-    actionManager.$('.o_searchview_extended_prop_value .o_input').val('a');
-    await testUtils.dom.click(actionManager.$('.o_apply_filter'));
+    await cpHelpers.toggleFilterMenu(actionManager);
+    await cpHelpers.toggleAddCustomFilter(actionManager);
+    await testUtils.fields.editInput(actionManager.el.querySelector('.o_generator_menu_value .o_input'), 'a');
+    await cpHelpers.applyFilter(actionManager);
+
     // Add it to dashboard
-    await testUtils.dom.click(actionManager.$('.o_favorites_menu_button'));
-    $('.o_search_options .dropdown-menu.o_favorites_menu').one('click', function (ev) {
-        // This handler is on the webClient
-        // But since the test suite doesn't have one
-        // We manually set it here
-        ev.stopPropagation();
-    });
-    await testUtils.dom.click(actionManager.$('.o_add_to_board'));
-    await testUtils.dom.click(actionManager.$('.o_add_to_board_confirm_button'));
+    await cpHelpers.toggleFavoriteMenu(actionManager);
+    await testUtils.dom.click($('.o_add_to_board > button'));
+    await testUtils.dom.click($('.o_add_to_board div button'));
+
     // Remove it
-    await testUtils.dom.click(actionManager.$('.o_facet_remove'));
+    await testUtils.dom.click(actionManager.el.querySelector('.o_facet_remove'));
 
     // Add the second filter
-    await testUtils.dom.click(actionManager.$('.o_filters_menu_button'));
-    await testUtils.dom.click(actionManager.$('.o_add_custom_filter'));
-    actionManager.$('.o_searchview_extended_prop_value .o_input').val('b');
-    await testUtils.dom.click(actionManager.$('.o_apply_filter'));
+    await cpHelpers.toggleFilterMenu(actionManager);
+    await cpHelpers.toggleAddCustomFilter(actionManager);
+    await testUtils.fields.editInput(actionManager.el.querySelector('.o_generator_menu_value .o_input'), "b");
+    await cpHelpers.applyFilter(actionManager);
     // Add it to dashboard
-    await testUtils.dom.click(actionManager.$('.o_favorites_menu_button'));
-    $('.o_search_options .dropdown-menu.o_favorites_menu').one('click', function (ev) {
-        // This handler is on the webClient
-        // But since the test suite doesn't have one
-        // We manually set it here
-        ev.stopPropagation();
-    });
-    await testUtils.dom.click(actionManager.$('.o_add_to_board'));
-    await testUtils.dom.click(actionManager.$('.o_add_to_board_confirm_button'));
+    await cpHelpers.toggleFavoriteMenu(actionManager);
+    await testUtils.dom.click(actionManager.el.querySelector('.o_add_to_board > button'));
+    await testUtils.dom.click(actionManager.el.querySelector('.o_add_to_board div button'));
 
     actionManager.destroy();
 });
@@ -846,7 +838,7 @@ QUnit.test('save a action domain to dashboard', async function (assert) {
     var filter_domain = ["display_name", "ilike", "b"];
 
     // The filter domain already contains the view domain, but is always added by dashboard..,
-    var expected_domain = ['&', '&', view_domain, view_domain, filter_domain]
+    var expected_domain = ['&', '&', view_domain, view_domain, filter_domain];
 
     var actionManager = await createActionManager({
         data: this.data,
@@ -873,14 +865,18 @@ QUnit.test('save a action domain to dashboard', async function (assert) {
     });
 
     // Add a filter
-    await testUtils.dom.click(actionManager.$('.o_filters_menu_button'));
-    await testUtils.dom.click(actionManager.$('.o_add_custom_filter'));
-    actionManager.$('.o_searchview_extended_prop_value .o_input').val('b');
-    await testUtils.dom.click(actionManager.$('.o_apply_filter'));
+    await cpHelpers.toggleFilterMenu(actionManager);
+    await cpHelpers.toggleAddCustomFilter(actionManager);
+    await testUtils.fields.editInput(
+        actionManager.el.querySelector('.o_generator_menu_value .o_input'),
+        "b"
+    );
+    await cpHelpers.applyFilter(actionManager);
     // Add it to dashboard
-    await testUtils.dom.click(actionManager.$('.o_favorites_menu_button'));
-    await testUtils.dom.click(actionManager.$('.o_add_to_board'));
-    await testUtils.dom.click(actionManager.$('.o_add_to_board_confirm_button'));
+    await cpHelpers.toggleFavoriteMenu(actionManager);
+    await testUtils.dom.click(actionManager.el.querySelector('.o_add_to_board > button'));
+    // add
+    await testUtils.dom.click(actionManager.el.querySelector('.o_add_to_board div button'));
 
     actionManager.destroy();
 });
diff --git a/addons/google_drive/static/tests/gdrive_test.js b/addons/google_drive/static/tests/gdrive_test.js
index 158330376bd..b04ebf27c26 100644
--- a/addons/google_drive/static/tests/gdrive_test.js
+++ b/addons/google_drive/static/tests/gdrive_test.js
@@ -1,166 +1,129 @@
 odoo.define('google_drive.gdrive_integration', function (require) {
-"use strict";
-//rebuild
-var FormView = require('web.FormView');
-var testUtils = require('web.test_utils');
-var GoogleDriveSideBar = require('google_drive.sidebar');
+    "use strict";
 
-var createView = testUtils.createView;
+    const FormView = require('web.FormView');
+    const testUtils = require('web.test_utils');
 
-/*
- * @override
- * Avoid breaking other tests because of the new route
- * that the module introduces
- */
-var _addGoogleDocItemsOriginal = GoogleDriveSideBar.prototype._addGoogleDocItems;
+    const cpHelpers = testUtils.controlPanel;
 
-var _addGoogleDocItemsMocked = function (model, resID) {
-    return Promise.resolve();
-};
-
-GoogleDriveSideBar.prototype._addGoogleDocItems = _addGoogleDocItemsMocked;
-
-QUnit.module('gdrive_integration', {
-    beforeEach: function () {
-        // For our test to work, the _addGoogleDocItems function needs to be the original
-        GoogleDriveSideBar.prototype._addGoogleDocItems = _addGoogleDocItemsOriginal;
-
-        this.data = {
-            partner: {
-                fields: {
-                    display_name: {string: "Displayed name", type: "char", searchable: true},
+    QUnit.module('Google Drive Integration', {
+        beforeEach() {
+            this.data = {
+                partner: {
+                    fields: {
+                        display_name: { string: "Displayed name", type: "char", searchable: true },
+                    },
+                    records: [
+                        { id: 1, display_name: "Locomotive Breath" },
+                        { id: 2, display_name: "Hey Macarena" },
+                    ],
                 },
-                records: [{
-                    id: 1,
-                    display_name: "Locomotive Breath",
-                }, {
-                    id: 2,
-                    display_name: "Hey Macarena",
-                }],
-            },
-            'google.drive.config': {
-                fields: {
-                    model_id: {string: 'Model', type: 'int'},
-                    name: {string: 'Name', type: 'char'},
-                    google_drive_resource_id: {string: 'Resource ID', type: 'char'},
+            };
+        },
+    }, function () {
+
+        QUnit.module('Google Drive ActionMenus');
+
+        QUnit.test('rendering of the google drive attachments in action menus', async function (assert) {
+            assert.expect(3);
+
+            const form = await testUtils.createView({
+                actionMenusRegistry: true,
+                arch:
+                    `<form string="Partners">
+                        <field name="display_name"/>
+                    </form>`,
+                data: this.data,
+                async mockRPC(route, args) {
+                    switch (route) {
+                        case '/web/dataset/call_kw/google.drive.config/get_google_drive_config':
+                            assert.deepEqual(args.args, ['partner', 1],
+                                'The route to get google drive config should have been called');
+                            return [{
+                                id: 27,
+                                name: 'Cyberdyne Systems',
+                            }];
+                        case '/web/dataset/call_kw/google.drive.config/search_read':
+                            return [{
+                                google_drive_resource_id: "T1000",
+                                google_drive_client_id: "cyberdyne.org",
+                                id: 1,
+                            }];
+                        case '/web/dataset/call_kw/google.drive.config/get_google_drive_url':
+                            assert.deepEqual(args.args, [27, 1, 'T1000'],
+                                'The route to get the Google url should have been called');
+                            return; // do not return anything or it will open a new tab.
+                    }
                 },
-                records: [{
-                    id: 27,
-                    name: 'Cyberdyne Systems',
-                    model_id: 1,
-                    google_drive_resource_id: 'T1000',
-                }],
-            },
-            'ir.attachment': {
-                fields: {
-                    name: {string: 'Name', type:'char'}
+                model: 'partner',
+                res_id: 1,
+                View: FormView,
+                viewOptions: {
+                    hasActionMenus: true,
                 },
-                records: [],
-            }
-        };
-    },
+            });
+            await cpHelpers.toggleActionMenu(form);
 
-    afterEach: function() {
-        GoogleDriveSideBar.prototype._addGoogleDocItems = _addGoogleDocItemsMocked;
-    }
+            assert.containsOnce(form, '.oe_share_gdoc_item',
+                "The button to the google action should be present");
 
-}, function () {
-    QUnit.module('Google Drive Sidebar');
+            await cpHelpers.toggleMenuItem(form, "Cyberdyne Systems");
 
-    QUnit.test('rendering of the google drive attachments in Sidebar', async function (assert) {
-        assert.expect(3);
-
-        var form = await createView({
-            View: FormView,
-            model: 'partner',
-            data: this.data,
-            arch: '<form string="Partners">' +
-                    '<field name="display_name"/>' +
-                '</form>',
-            res_id: 1,
-            viewOptions: {hasSidebar: true},
-            mockRPC: function (route, args) {
-                if (route === '/web/dataset/call_kw/google.drive.config/get_google_drive_config') {
-                    assert.deepEqual(args.args, ['partner', 1],
-                        'The route to get google drive config should have been called');
-                    return Promise.resolve([{id: 27, name: 'Cyberdyne Systems'}]);
-                }
-                if (route === '/web/dataset/call_kw/google.drive.config/search_read'){
-                    return Promise.resolve([{google_drive_resource_id: "T1000",
-                                    google_drive_client_id: "cyberdyne.org",
-                                    id: 1}]);
-                }
-                if (route === '/web/dataset/call_kw/google.drive.config/get_google_drive_url') {
-                    assert.deepEqual(args.args, [27, 1, 'T1000'],
-                        'The route to get the Google url should have been called');
-                    // We don't return anything useful, otherwise it will open a new tab
-                    return Promise.resolve();
-                }
-                return this._super.apply(this, arguments);
-            },
+            form.destroy();
         });
 
-        var $googleAction = form.sidebar.$('.oe_share_gdoc');
+        QUnit.test('click on the google drive attachments after switching records', async function (assert) {
+            assert.expect(4);
 
-        assert.strictEqual($googleAction.length, 1,
-            'The button to the google action should be present');
+            let currentID;
+            const form = await testUtils.createView({
+                actionMenusRegistry: true,
+                arch:
+                    `<form string="Partners">
+                        <field name="display_name"/>
+                    </form>`,
+                data: this.data,
+                async mockRPC(route, args) {
+                    switch (route) {
+                        case '/web/dataset/call_kw/google.drive.config/get_google_drive_config':
+                            assert.deepEqual(args.args, ['partner', currentID],
+                                'The route to get google drive config should have been called');
+                            return [{
+                                id: 27,
+                                name: 'Cyberdyne Systems',
+                            }];
+                        case '/web/dataset/call_kw/google.drive.config/search_read':
+                            return [{
+                                google_drive_resource_id: "T1000",
+                                google_drive_client_id: "cyberdyne.org",
+                                id: 1,
+                            }];
+                        case '/web/dataset/call_kw/google.drive.config/get_google_drive_url':
+                            assert.deepEqual(args.args, [27, currentID, 'T1000'],
+                                'The route to get the Google url should have been called');
+                            return; // do not return anything or it will open a new tab.
+                    }
+                },
+                model: 'partner',
+                res_id: 1,
+                View: FormView,
+                viewOptions: {
+                    hasActionMenus: true,
+                    ids: [1, 2],
+                    index: 0,
+                },
+            });
+            currentID = 1;
+            await cpHelpers.toggleActionMenu(form);
+            await cpHelpers.toggleMenuItem(form, "Cyberdyne Systems");
 
-        // click on gdrive sidebar item
-        await testUtils.dom.click(form.sidebar.$('.o_dropdown_toggler_btn:contains(Action)'));
-        await testUtils.dom.click($googleAction);
+            await cpHelpers.pagerNext(form);
 
-        form.destroy();
-    });
+            currentID = 2;
+            await cpHelpers.toggleActionMenu(form);
+            await cpHelpers.toggleMenuItem(form, "Cyberdyne Systems");
 
-    QUnit.test('click on the google drive attachments after switching records', async function (assert) {
-        assert.expect(3);
-
-        var currentID;
-        var form = await createView({
-            View: FormView,
-            model: 'partner',
-            data: this.data,
-            arch: '<form string="Partners">' +
-                    '<field name="display_name"/>' +
-                '</form>',
-            res_id: 1,
-            viewOptions: {
-                hasSidebar: true,
-                ids: [1, 2],
-                index: 0,
-            },
-            mockRPC: function (route, args) {
-                if (route === '/web/dataset/call_kw/google.drive.config/get_google_drive_config') {
-                    assert.deepEqual(args.args, ['partner', 1],
-                        'The route to get google drive config should have been called');
-                    return Promise.resolve([{id: 27, name: 'Cyberdyne Systems'}]);
-                }
-                if (route === '/web/dataset/call_kw/google.drive.config/search_read'){
-                    return Promise.resolve([{google_drive_resource_id: "T1000",
-                                    google_drive_client_id: "cyberdyne.org",
-                                    id: 1}]);
-                }
-                if (route === '/web/dataset/call_kw/google.drive.config/get_google_drive_url') {
-                    assert.deepEqual(args.args, [27, currentID, 'T1000'],
-                        'The route to get the Google url should have been called');
-                    // We don't return anything useful, otherwise it will open a new tab
-                    return Promise.resolve();
-                }
-                return this._super.apply(this, arguments);
-            },
+            form.destroy();
         });
-
-        currentID = 1;
-        await testUtils.dom.click(form.sidebar.$('.o_dropdown_toggler_btn:contains(Action)'));
-        await testUtils.dom.click(form.sidebar.$('.oe_share_gdoc'));
-
-        await testUtils.dom.click(form.pager.$('.o_pager_next'));
-        currentID = 2;
-        await testUtils.dom.click(form.sidebar.$('.o_dropdown_toggler_btn:contains(Action)'));
-        await testUtils.dom.click(form.sidebar.$('.oe_share_gdoc'));
-
-        form.destroy();
     });
 });
-
-});
diff --git a/addons/im_support/static/tests/systray_no_support_tests.js b/addons/im_support/static/tests/systray_no_support_tests.js
index 80e3d443597..c56e371bc0e 100644
--- a/addons/im_support/static/tests/systray_no_support_tests.js
+++ b/addons/im_support/static/tests/systray_no_support_tests.js
@@ -38,7 +38,7 @@ QUnit.test('messaging menu does not display the Support channel if not available
     assert.expect(1);
 
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         data: this.data,
         services: this.services,
     });
diff --git a/addons/im_support/static/tests/systray_tests.js b/addons/im_support/static/tests/systray_tests.js
index 9df4c3b2bd8..75358276bc3 100644
--- a/addons/im_support/static/tests/systray_tests.js
+++ b/addons/im_support/static/tests/systray_tests.js
@@ -33,7 +33,7 @@ QUnit.test('messaging menu displays the Support channel', async function (assert
     assert.expect(1);
 
     var messagingMenu = new MessagingMenu();
-    addMockSupportEnvironment(messagingMenu, {
+    await addMockSupportEnvironment(messagingMenu, {
         data: this.data,
         services: this.services,
         session: this.supportParams,
@@ -51,7 +51,7 @@ QUnit.test('clicking on Support channel: channel not available', async function
     assert.expect(9);
 
     var messagingMenu = new MessagingMenu();
-    addMockSupportEnvironment(messagingMenu, {
+    await addMockSupportEnvironment(messagingMenu, {
         data: this.data,
         mockRPC: function (route, args) {
             if (!_.string.endsWith(route, '.png')) { // ignore images
@@ -100,7 +100,7 @@ QUnit.test('clicking on Support channel: channel available', async function (ass
     assert.expect(9);
 
     var messagingMenu = new MessagingMenu();
-    addMockSupportEnvironment(messagingMenu, {
+    await addMockSupportEnvironment(messagingMenu, {
         data: this.data,
         mockRPC: function (route, args) {
             if (!_.string.endsWith(route, '.png')) { // ignore images
@@ -145,7 +145,7 @@ QUnit.test('post messages in Support channel', async function (assert) {
     assert.expect(8);
 
     var messagingMenu = new MessagingMenu();
-    addMockSupportEnvironment(messagingMenu, {
+    await addMockSupportEnvironment(messagingMenu, {
         data: this.data,
         mockRPC: function (route, args) {
             if (!_.string.endsWith(route, '.png')) { // ignore images
@@ -190,7 +190,7 @@ QUnit.test('fold Support channel', async function (assert) {
     assert.expect(11);
 
     var messagingMenu = new MessagingMenu();
-    addMockSupportEnvironment(messagingMenu, {
+    await addMockSupportEnvironment(messagingMenu, {
         data: this.data,
         mockRPC: function (route, args) {
             if (!_.string.endsWith(route, '.png')) { // ignore images
@@ -245,7 +245,7 @@ QUnit.test('restore Support channel if necessary', async function (assert) {
     assert.expect(5);
 
     var messagingMenu = new MessagingMenu();
-    addMockSupportEnvironment(messagingMenu, {
+    await addMockSupportEnvironment(messagingMenu, {
         data: this.data,
         enableSupportPoll: true,
         mockRPC: function (route, args) {
@@ -270,8 +270,8 @@ QUnit.test('restore Support channel if necessary', async function (assert) {
         "should have open a chat window");
 
     assert.verifySteps([
-        'cors: /odoo_im_support/get_support_channel',
         '/mail/init_messaging',
+        'cors: /odoo_im_support/get_support_channel',
         'cors: /odoo_im_support/fetch_messages',
     ]);
 
@@ -284,7 +284,7 @@ QUnit.test('receive messages in the Support channel', async function (assert) {
     var supportChannelID;
 
     var messagingMenu = new MessagingMenu();
-    addMockSupportEnvironment(messagingMenu, {
+    await addMockSupportEnvironment(messagingMenu, {
         data: this.data,
         enableSupportPoll: true,
         mockRPC: function (route, args) {
@@ -330,8 +330,8 @@ QUnit.test('receive messages in the Support channel', async function (assert) {
         'A message', "message is correct");
 
     assert.verifySteps([
-        'cors: /odoo_im_support/get_support_channel',
         '/mail/init_messaging',
+        'cors: /odoo_im_support/get_support_channel',
         'cors: /odoo_im_support/fetch_messages',
     ]);
 
diff --git a/addons/mail/static/tests/activity_tests.js b/addons/mail/static/tests/activity_tests.js
index c32702d8c45..570bf2165af 100644
--- a/addons/mail/static/tests/activity_tests.js
+++ b/addons/mail/static/tests/activity_tests.js
@@ -316,7 +316,6 @@ QUnit.test('activity view: activity widget', async function (assert) {
         },
     };
 
-    owl.Component.env = testUtils.mock.getMockedOwlEnv(params);
     var activity = await createView(params);
     var today = activity.$('table tbody tr:first td:nth-child(2).today');
     var dropdown = today.find('.dropdown-menu.o_activity');
@@ -391,9 +390,9 @@ QUnit.test('activity view: no group_by_menu and no time_range_menu', async funct
 
     assert.containsN(actionManager, '.o_search_options .o_dropdown button:visible', 2,
         "only two elements should be available in view search");
-    assert.isVisible(actionManager.$('.o_search_options .o_dropdown button.o_filters_menu_button'),
+    assert.isVisible(actionManager.$('.o_search_options .o_dropdown.o_filter_menu > button'),
         "filter should be available in view search");
-    assert.isVisible(actionManager.$('.o_search_options .o_dropdown button.o_favorites_menu_button'),
+    assert.isVisible(actionManager.$('.o_search_options .o_dropdown.o_favorite_menu > button'),
         "favorites should be available in view search");
     actionManager.destroy();
 });
diff --git a/addons/mail/static/tests/discuss_tests.js b/addons/mail/static/tests/discuss_tests.js
index b12b4b1d9b3..8cf73248754 100644
--- a/addons/mail/static/tests/discuss_tests.js
+++ b/addons/mail/static/tests/discuss_tests.js
@@ -7,6 +7,7 @@ var mailTestUtils = require('mail.testUtils');
 var testUtils = require('web.test_utils');
 
 var createDiscuss = mailTestUtils.createDiscuss;
+const cpHelpers = testUtils.controlPanel;
 
 QUnit.module('mail', {}, function () {
 QUnit.module('Discuss', {
@@ -139,6 +140,7 @@ QUnit.test('basic rendering', async function (assert) {
     var $history = $sidebar.find('.o_mail_discuss_item[data-thread-id=mailbox_history]');
     assert.strictEqual($history.length, 1,
         "should have the mailbox item 'mailbox_history' in the sidebar");
+
     discuss.destroy();
 });
 
@@ -305,43 +307,44 @@ QUnit.test('searchview filter messages', async function (assert) {
                 '</search>',
         },
     });
-        assert.containsN(discuss, '.o_thread_message', 2,
-            "there should be two messages in the inbox mailbox");
-        assert.strictEqual($('.o_searchview_input').length, 1,
-            "there should be a searchview on discuss");
-        assert.strictEqual($('.o_searchview_input').val(), '',
-            "the searchview should be empty initially");
+    // needed to handle events triggered by the controlPanelModel
+    discuss.on_attach_callback();
+    await testUtils.nextTick();
 
-        // interact with searchview so that there is only once message
-        $('.o_searchview_input').val("ab").trigger('keyup');
-        await testUtils.nextTick();
-        $('.o_searchview_input').trigger($.Event('keydown', { which: $.ui.keyCode.ENTER }));
-        await testUtils.nextTick();
-        assert.strictEqual($('.o_searchview_facet').length, 1,
-            "the searchview should have a facet");
-        assert.strictEqual($('.o_facet_values').text().trim(), 'ab',
-            "the facet should be a search on 'ab'");
-        assert.containsOnce(discuss, '.o_thread_message',
-            "there should be a single message after filter");
+    assert.containsN(discuss, '.o_thread_message', 2,
+        "there should be two messages in the inbox mailbox");
+    assert.strictEqual($('.o_searchview_input').length, 1,
+        "there should be a searchview on discuss");
+    assert.strictEqual($('.o_searchview_input').val(), '',
+        "the searchview should be empty initially");
 
-        // interact with search view so that there are no matching messages
-        await testUtils.dom.click($('.o_facet_remove'));
-        $('.o_searchview_input').val("abcd").trigger('keyup');
-        await testUtils.nextTick();
-        $('.o_searchview_input').trigger($.Event('keydown', { which: $.ui.keyCode.ENTER }));
-        await testUtils.nextTick();
+    // interact with searchview so that there is only once message
+    await cpHelpers.editSearch(discuss, "ab");
+    await cpHelpers.validateSearch(discuss);
+    assert.strictEqual($('.o_searchview_facet').length, 1,
+        "the searchview should have a facet");
+    assert.strictEqual($('.o_facet_values').text().trim(), 'ab',
+        "the facet should be a search on 'ab'");
+    assert.containsOnce(discuss, '.o_thread_message',
+        "there should be a single message after filter");
 
-        assert.strictEqual($('.o_searchview_facet').length, 1,
-            "the searchview should have a facet");
-        assert.strictEqual($('.o_facet_values').text().trim(), 'abcd',
-            "the facet should be a search on 'abcd'");
-        assert.containsNone(discuss, '.o_thread_message',
-            "there should be no message after 2nd filter");
-        assert.strictEqual(discuss.$('.o_thread_title').text().trim(),
-            "No matches found",
-            "should display that there are no matching messages");
+    // interact with search view so that there are no matching messages
+    await testUtils.dom.click($('.o_facet_remove'));
+    await cpHelpers.editSearch(discuss, "abcd");
+    await cpHelpers.validateSearch(discuss);
 
-        discuss.destroy();
+    assert.strictEqual($('.o_searchview_facet').length, 1,
+        "the searchview should have a facet");
+    assert.strictEqual($('.o_facet_values').text().trim(), 'abcd',
+        "the facet should be a search on 'abcd'");
+    assert.containsNone(discuss, '.o_thread_message',
+        "there should be no message after 2nd filter");
+    assert.strictEqual(discuss.$('.o_thread_title').text().trim(),
+        "No matches found",
+        "should display that there are no matching messages");
+
+    discuss.on_detach_callback();
+    discuss.destroy();
 
 });
 
@@ -1147,6 +1150,7 @@ QUnit.test('mark all messages as read from Inbox', async function (assert) {
 
     await testUtils.dom.click($markAllReadButton);
 
+
     markAllReadDef.then(function () {
         // immediately jump to end of the fadeout animation on messages
         $inbox = discuss.$('.o_mail_discuss_item[data-thread-id="mailbox_inbox"]');
@@ -1964,33 +1968,38 @@ QUnit.test('save filter discuss', async function (assert) {
             }
             return this._super.apply(this,arguments);
         },
-        intercepts: {
-            create_filter: function (ev) {
-                assert.deepEqual(
-                    JSON.parse(ev.data.filter.domain), [
-                        "|",
-                        ["subject", "ilike", "she was born in a hurricane"],
-                        ["body", "ilike", "she was born in a hurricane"]
-                    ], 'The filter should have been saved with the right domain');
+        env: {
+            dataManager: {
+                create_filter: async function (filter) {
+                    assert.deepEqual(
+                        JSON.parse(filter.domain), [
+                            "|",
+                            ["subject", "ilike", "she was born in a hurricane"],
+                            ["body", "ilike", "she was born in a hurricane"]
+                        ], 'The filter should have been saved with the right domain');
+                }
             }
         }
     });
+    // needed to handle events triggered by the controlPanelModel
+    discuss.on_attach_callback();
+    await testUtils.nextTick();
 
     assert.containsOnce(discuss, '.o_searchview_input_container', 'search view input present');
 
-    $('.o_searchview_input').val("she was born in a hurricane").trigger('keyup');
-    await testUtils.nextTick();
+    await cpHelpers.editSearch(discuss, "she was born in a hurricane");
 
     messageFetchCount = 1;
-    $('.o_searchview_input').trigger($.Event('keydown', { which: $.ui.keyCode.ENTER }));
-    await testUtils.nextTick();
 
-    await testUtils.dom.click(discuss.$('.o_favorites_menu_button'));
-    await testUtils.dom.click(discuss.$('.o_add_favorite'));
+    await cpHelpers.validateSearch(discuss);
 
-    await testUtils.fields.editInput(discuss.$('.o_favorite_name input'), 'War');
-    await testUtils.dom.click(discuss.$('.o_save_favorite button'));
+    await cpHelpers.toggleFavoriteMenu(discuss);
+    await cpHelpers.toggleSaveFavorite(discuss);
 
+    await cpHelpers.editFavoriteName(discuss, "War");
+    await cpHelpers.saveFavorite(discuss);
+
+    discuss.on_detach_callback();
     discuss.destroy();
 });
 
diff --git a/addons/mail/static/tests/document_thread_window_tests.js b/addons/mail/static/tests/document_thread_window_tests.js
index d10f32c1e89..f01ab0925f2 100644
--- a/addons/mail/static/tests/document_thread_window_tests.js
+++ b/addons/mail/static/tests/document_thread_window_tests.js
@@ -91,7 +91,7 @@ QUnit.test('open a document thread in a thread window', async function (assert)
     assert.expect(6);
 
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         data: this.data,
         session: this.session,
@@ -129,7 +129,7 @@ QUnit.test('expand a document thread window', async function (assert) {
     assert.expect(4);
 
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         data: this.data,
         session: this.session,
@@ -177,7 +177,7 @@ QUnit.test('post messages in a document thread window', async function (assert)
         res_id: 1,
     };
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         data: this.data,
         session: this.session,
@@ -229,7 +229,7 @@ QUnit.test('post messages in a document thread window', async function (assert)
 QUnit.test('open, fold, unfold and close a document thread window', async function (assert) {
     assert.expect(20);
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         data: this.data,
         session: this.session,
@@ -285,7 +285,7 @@ QUnit.test('do not open thread window on fetch message failure', async function
     assert.expect(4);
 
     var messagingMenu = new MessagingMenu();
-    testUtils.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         data: this.data,
         session: this.session,
diff --git a/addons/mail/static/tests/systray/systray_messaging_menu_mail_failure_tests.js b/addons/mail/static/tests/systray/systray_messaging_menu_mail_failure_tests.js
index f2c8e95ac29..3f07f84cbfd 100644
--- a/addons/mail/static/tests/systray/systray_messaging_menu_mail_failure_tests.js
+++ b/addons/mail/static/tests/systray/systray_messaging_menu_mail_failure_tests.js
@@ -82,7 +82,7 @@ QUnit.test('preview of mail failure', async function (assert) {
     }];
 
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         data: this.data,
         services: this.services,
     });
@@ -138,7 +138,7 @@ QUnit.test('preview grouped failures by document', async function (assert) {
     }];
 
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         data: this.data,
         services: this.services,
     });
@@ -194,7 +194,7 @@ QUnit.test('preview grouped failures by document model', async function (assert)
     }];
 
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         data: this.data,
         services: this.services,
     });
diff --git a/addons/mail/static/tests/systray/systray_messaging_menu_tests.js b/addons/mail/static/tests/systray/systray_messaging_menu_tests.js
index 5cca1454b95..f3e2131862c 100644
--- a/addons/mail/static/tests/systray/systray_messaging_menu_tests.js
+++ b/addons/mail/static/tests/systray/systray_messaging_menu_tests.js
@@ -105,7 +105,7 @@ QUnit.test('messaging menu widget: menu with no records', async function (assert
     assert.expect(1);
 
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
             services: this.services,
             mockRPC: function (route, args) {
                 if (args.method === 'message_fetch') {
@@ -114,7 +114,7 @@ QUnit.test('messaging menu widget: menu with no records', async function (assert
                 return this._super.apply(this, arguments);
             }
         });
-    await messagingMenu.appendTo($('#qunit-fixture'));
+    await messagingMenu.appendTo(testUtils.prepareTarget());
     await testUtils.dom.click(messagingMenu.$('.dropdown-toggle'));
     assert.hasClass(messagingMenu.$('.o_no_activity'),'o_no_activity', "should not have instance of widget");
     messagingMenu.destroy();
@@ -126,7 +126,7 @@ QUnit.test('messaging menu widget: messaging not ready', async function (assert)
     const messagingReadyProm = testUtils.makeTestPromise();
 
     const messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         async mockRPC(route, args) {
             if (route === '/mail/init_messaging') {
@@ -142,7 +142,7 @@ QUnit.test('messaging menu widget: messaging not ready', async function (assert)
             return this._super(...arguments);
         },
     });
-    await messagingMenu.appendTo($('#qunit-fixture'));
+    await messagingMenu.appendTo(testUtils.prepareTarget());
     assert.verifySteps(['/mail/init_messaging:pending']);
     assert.ok(
         messagingMenu.el,
@@ -170,11 +170,11 @@ QUnit.test('messaging menu widget: messaging not ready', async function (assert)
 QUnit.test('messaging menu widget: messaging menu with 1 record', async function (assert) {
     assert.expect(3);
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         data: this.data,
     });
-    await messagingMenu.appendTo($('#qunit-fixture'));
+    await messagingMenu.appendTo(testUtils.prepareTarget());
 
     await testUtils.dom.click(messagingMenu.$('.dropdown-toggle'));
 
@@ -197,14 +197,14 @@ QUnit.test('messaging menu widget: open inbox for needaction not linked to any d
     assert.expect(4);
 
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         data: this.data,
         session: {
             partner_id: 1,
         },
     });
-    await messagingMenu.appendTo($('#qunit-fixture'));
+    await messagingMenu.appendTo(testUtils.prepareTarget());
 
     // Simulate received needaction message without associated document,
     // so that we have a message in inbox without a model and a resID
@@ -272,12 +272,12 @@ QUnit.test("messaging menu widget: mark as read on thread preview", async functi
     }];
 
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         data: this.data,
     });
 
-    await messagingMenu.appendTo($('#qunit-fixture'));
+    await messagingMenu.appendTo(testUtils.prepareTarget());
     await testUtils.dom.click(messagingMenu.$('.dropdown-toggle'));
     assert.hasClass(messagingMenu.$el,'o_mail_systray_item',
         'should be the instance of widget');
@@ -335,14 +335,14 @@ QUnit.test('needaction messages in channels should appear, in addition to channe
     this.data['mail.message'].records = [needactionMessage, lastMessage];
 
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         data: this.data,
         session: {
             partner_id: partnerID,
         },
     });
-    await messagingMenu.appendTo($('#qunit-fixture'));
+    await messagingMenu.appendTo(testUtils.prepareTarget());
 
     await testUtils.dom.click(messagingMenu.$('.dropdown-toggle'));
 
@@ -391,14 +391,15 @@ QUnit.test('preview of message on a document + mark as read', async function (as
     this.data['mail.message'].records.push(needactionMessage);
 
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         data: this.data,
         session: {
             partner_id: partnerID,
         },
     });
-    await messagingMenu.appendTo($('#qunit-fixture'));
+    await messagingMenu.appendTo(testUtils.prepareTarget());
+    await testUtils.nextTick();
     assert.strictEqual(messagingMenu.$('.o_notification_counter').text(), '1',
         "should display a counter of 1 on the messaging menu icon");
 
@@ -427,11 +428,11 @@ QUnit.test('update messaging preview on receiving a new message in channel previ
     assert.expect(8);
 
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         data: this.data,
     });
-    await messagingMenu.appendTo($('#qunit-fixture'));
+    await messagingMenu.appendTo(testUtils.prepareTarget());
 
     await testUtils.dom.click(messagingMenu.$('.dropdown-toggle'));
 
@@ -478,11 +479,11 @@ QUnit.test('new message of type "notification" are not considered as unread mess
     assert.expect(8);
 
     const messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         data: this.data,
         services: this.services,
     });
-    await messagingMenu.appendTo($('#qunit-fixture'));
+    await messagingMenu.appendTo(testUtils.prepareTarget());
     // open messaging menu
     await testUtils.dom.click(messagingMenu.$('.dropdown-toggle'));
     assert.containsOnce(
@@ -580,7 +581,7 @@ QUnit.test('preview of inbox message not linked to document + mark as read', asy
         this.data['mail.message'].records.concat(needactionMessages);
 
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         data: this.data,
         session: {
@@ -593,7 +594,9 @@ QUnit.test('preview of inbox message not linked to document + mark as read', asy
             return this._super.apply(this, arguments);
         },
     });
-    await messagingMenu.appendTo($('#qunit-fixture'));
+    await messagingMenu.appendTo(testUtils.prepareTarget());
+    await testUtils.nextTick();
+
     assert.strictEqual(messagingMenu.$('.o_notification_counter').text(), '2',
         "should display a counter of 2 on the messaging menu icon");
 
@@ -673,14 +676,14 @@ QUnit.test('grouped preview for needaction messages linked to same document', as
     this.data.initMessaging.needaction_inbox_counter = 2;
 
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         data: this.data,
         session: {
             partner_id: 44,
         },
     });
-    await messagingMenu.appendTo($('#qunit-fixture'));
+    await messagingMenu.appendTo(testUtils.prepareTarget());
 
     await testUtils.dom.click(messagingMenu.$('.dropdown-toggle'));
     var $previews = messagingMenu.$('.o_mail_preview');
@@ -719,13 +722,13 @@ QUnit.test("messaging menu widget: channel seen notification", async function (a
     };
 
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         data: this.data,
         session: { partner_id: 3 },
     });
 
-    await messagingMenu.appendTo($('#qunit-fixture'));
+    await messagingMenu.appendTo(testUtils.prepareTarget());
     await testUtils.dom.click(messagingMenu.$('.dropdown-toggle'));
 
     assert.strictEqual(messagingMenu.$('.o_notification_counter').text(), '1',
@@ -767,13 +770,13 @@ QUnit.test("messaging menu widget: no traceback when receiving channel_fetched n
     };
 
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         data: this.data,
         session: { partner_id: 3 },
     });
 
-    await messagingMenu.appendTo($('#qunit-fixture'));
+    await messagingMenu.appendTo(testUtils.prepareTarget());
     await testUtils.dom.click(messagingMenu.$('.dropdown-toggle'));
     assert.containsOnce(messagingMenu, '.o_new_message',
         "should have button to open blank thread window");
@@ -806,12 +809,12 @@ QUnit.test("messaging menu widget: preview with no message should be undated", a
     this.data['mail.message'].records[0].channel_ids = [];
 
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         data: this.data,
     });
 
-    await messagingMenu.appendTo($('#qunit-fixture'));
+    await messagingMenu.appendTo(testUtils.prepareTarget());
     await testUtils.dom.click(messagingMenu.$('.dropdown-toggle'));
 
     assert.strictEqual(messagingMenu.$('.o_mail_preview').length, 1,
@@ -836,12 +839,12 @@ QUnit.test("messaging menu widget: sort dated previews before undated previews",
     this.data.initMessaging.channel_slots.direct_message = [dm];
 
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         data: this.data,
     });
 
-    await messagingMenu.appendTo($('#qunit-fixture'));
+    await messagingMenu.appendTo(testUtils.prepareTarget());
     await testUtils.dom.click(messagingMenu.$('.dropdown-toggle'));
 
     assert.strictEqual(messagingMenu.$('.o_mail_preview').length, 2,
@@ -924,16 +927,19 @@ QUnit.test('global counter with channel previews', async function (assert) {
     this.data['mail.message'].records = messages;
 
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         data: this.data,
         session: {
             partner_id: 3,
         },
     });
-    await messagingMenu.appendTo($('#qunit-fixture'));
+    await messagingMenu.appendTo(testUtils.prepareTarget());
+    await testUtils.nextTick();
+
     assert.strictEqual(messagingMenu.$('.o_notification_counter').text(), '2',
         "should display a counter of 2 on the messaging menu icon");
+
     await testUtils.dom.click(messagingMenu.$('.dropdown-toggle'));
 
     assert.strictEqual(messagingMenu.$('.o_mail_preview').length, 3,
@@ -965,7 +971,7 @@ QUnit.test('messaging menu widget: do not open chat window twice on preview clic
     var messageFetchDef = testUtils.makeTestPromise();
 
     var messagingMenu = new MessagingMenu();
-    testUtils.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         data: this.data,
         session: { partner_id: 1 },
@@ -991,7 +997,7 @@ QUnit.test('messaging menu widget: do not open chat window twice on preview clic
             return this._super.apply(this, arguments);
         },
     });
-    await messagingMenu.appendTo($('#qunit-fixture'));
+    await messagingMenu.appendTo(testUtils.prepareTarget());
 
     // Opening chat window from messaging menu (pending from `messageFetchDef`)
     await testUtils.dom.click(messagingMenu.$('.dropdown-toggle'));
@@ -1023,7 +1029,7 @@ QUnit.test('messaging menu widget: expand on thread preview', async function (as
     });
 
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         data: this.data,
         session: { partner_id: 44 },
@@ -1036,7 +1042,7 @@ QUnit.test('messaging menu widget: expand on thread preview', async function (as
             },
         },
     });
-    await messagingMenu.appendTo($('#qunit-fixture'));
+    await messagingMenu.appendTo(testUtils.prepareTarget());
 
     await testUtils.dom.click(messagingMenu.$('.dropdown-toggle'));
     var $preview = messagingMenu.$('.o_mail_preview');
@@ -1062,7 +1068,7 @@ QUnit.test('messaging menu widget: click twice preview on slow message_fetch sho
     const messageFetchProm = testUtils.makeTestPromise();
 
     const messagingMenu = new MessagingMenu();
-    testUtils.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         data: this.data,
         session: { partner_id: 1 },
@@ -1086,7 +1092,7 @@ QUnit.test('messaging menu widget: click twice preview on slow message_fetch sho
             return this._super(...arguments);
         },
     });
-    await messagingMenu.appendTo($('#qunit-fixture'));
+    await messagingMenu.appendTo(testUtils.prepareTarget());
 
     // Opening chat window 1st time from messaging menu (pending from `messageFetchDef`)
     await testUtils.dom.click(messagingMenu.$('.dropdown-toggle'));
@@ -1113,11 +1119,11 @@ QUnit.test('no code injection in message body preview', async function (assert)
         `<p><script>throw new Error('CodeInjectionError');</script></p>`;
 
     const messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         services: this.services,
         data: this.data,
     });
-    await messagingMenu.appendTo($('#qunit-fixture'));
+    await messagingMenu.appendTo(testUtils.prepareTarget());
     await testUtils.dom.click(messagingMenu.$('.dropdown-toggle'));
     assert.containsOnce(
         messagingMenu,
diff --git a/addons/mail_bot/static/tests/systray_messaging_menu_tests.js b/addons/mail_bot/static/tests/systray_messaging_menu_tests.js
index e2d4af883bf..2494d639b29 100644
--- a/addons/mail_bot/static/tests/systray_messaging_menu_tests.js
+++ b/addons/mail_bot/static/tests/systray_messaging_menu_tests.js
@@ -70,7 +70,7 @@ QUnit.test('messaging menu widget: rendering with OdooBot has a request', async
     assert.expect(5);
 
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         data: this.data,
         services: this.services,
     });
@@ -99,7 +99,7 @@ QUnit.test('messaging menu widget: rendering without OdooBot has a request (deni
     window.Notification.permission = 'denied';
 
     var messagingMenu = new MessagingMenu();
-    testUtils.mock.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         data: this.data,
         services: this.services,
     });
@@ -122,7 +122,7 @@ QUnit.test('messaging menu widget: rendering without OdooBot has a request (acce
     window.Notification.permission = 'granted';
 
     var messagingMenu = new MessagingMenu();
-    testUtils.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         data: this.data,
         services: this.services,
     });
@@ -143,7 +143,7 @@ QUnit.test('messaging menu widget: respond to notification prompt', async functi
     assert.expect(4);
 
     var messagingMenu = new MessagingMenu();
-    testUtils.addMockEnvironment(messagingMenu, {
+    await testUtils.mock.addMockEnvironment(messagingMenu, {
         data: this.data,
         services: this.services,
     });
diff --git a/addons/web/static/tests/chrome/action_manager_tests.js b/addons/web/static/tests/chrome/action_manager_tests.js
index 6af38ce02de..2c987215d43 100644
--- a/addons/web/static/tests/chrome/action_manager_tests.js
+++ b/addons/web/static/tests/chrome/action_manager_tests.js
@@ -16,7 +16,9 @@ var ReportService = require('web.ReportService');
 var SessionStorageService = require('web.SessionStorageService');
 var testUtils = require('web.test_utils');
 var Widget = require('web.Widget');
+
 var createActionManager = testUtils.createActionManager;
+const cpHelpers = testUtils.controlPanel;
 
 QUnit.module('ActionManager', {
     beforeEach: function () {
@@ -198,8 +200,9 @@ QUnit.module('ActionManager', {
 
         var n = delta;
         await actionManager.doAction(4);
+
         // kanban view is loaded, switch to list view
-        await testUtils.dom.click($('.o_control_panel .o_cp_switch_list'));
+        await cpHelpers.switchView(actionManager, 'list');
         // open a record in form view
         await testUtils.dom.click(actionManager.$('.o_list_view .o_data_row:first'));
         // go back to action 7 in breadcrumbs
@@ -1336,12 +1339,13 @@ QUnit.module('ActionManager', {
             },
         });
         await actionManager.doAction(4);
+
         // kanban view is loaded, switch to list view
-        await testUtils.dom.click($('.o_control_panel .o_cp_switch_list'));
+        await cpHelpers.switchView(actionManager, 'list');
 
         // here, list view is not ready yet, because def is not resolved
         // switch back to kanban view
-        await testUtils.dom.click($('.o_control_panel .o_cp_switch_kanban'));
+        await cpHelpers.switchView(actionManager, 'kanban');
 
         // here, we want the kanban view to reload itself, regardless of list view
         assert.verifySteps([
@@ -1607,8 +1611,8 @@ QUnit.module('ActionManager', {
             'load_views', // action 3
             '/web/dataset/search_read', // search read of list view of action 3
             '/web/action/load', // action 4
-            'load_views', // action 4
             'read', // read the opened record of action 3 (this request is blocked)
+            'load_views', // action 4
             '/web/dataset/search_read', // search read action 4
         ]);
 
@@ -1753,7 +1757,7 @@ QUnit.module('ActionManager', {
         // reload (the search_read RPC will be blocked)
         def = testUtils.makeTestPromise();
         await testUtils.nextTick();
-        await testUtils.dom.click($('.o_control_panel .o_cp_switch_list'));
+        await cpHelpers.switchView(actionManager, 'list');
 
         assert.containsN(actionManager, '.o_list_view .o_data_row', 5,
             "list view should still contain 5 records");
@@ -1822,11 +1826,11 @@ QUnit.module('ActionManager', {
 
         var ClientAction = AbstractAction.extend({
             hasControlPanel: true,
-            start: function () {
+            start: async function () {
                 this.$('.o_content').text('Hello World');
                 this.$el.addClass('o_client_action_test');
-                this._setTitle('Hello');
-                return this._super.apply(this, arguments);
+                this.controlPanelProps.title = 'Hello';
+                await this._super.apply(this, arguments);
             },
         });
         core.action_registry.add('HelloWorldTest', ClientAction);
@@ -1885,14 +1889,14 @@ QUnit.module('ActionManager', {
             hasControlPanel: true,
             events: {
                 click: function () {
-                    this._setTitle('new title');
+                    this.updateControlPanel({ title: 'new title' });
                 },
             },
-            start: function () {
-                this._setTitle('initial title');
+            start: async function () {
                 this.$('.o_content').text('Hello World');
                 this.$el.addClass('o_client_action_test');
-                return this._super.apply(this, arguments);
+                this.controlPanelProps.title = 'initial title';
+                await this._super.apply(this, arguments);
             },
         });
         var actionManager = await createActionManager();
@@ -1902,7 +1906,7 @@ QUnit.module('ActionManager', {
         assert.strictEqual($('ol.breadcrumb').text(), "initial title",
             "should have initial title as breadcrumb content");
 
-        testUtils.dom.click(actionManager.$('.o_client_action_test'));
+        await testUtils.dom.click(actionManager.$('.o_client_action_test'));
         assert.strictEqual($('ol.breadcrumb').text(), "new title",
             "should have updated title as breadcrumb content");
 
@@ -2322,7 +2326,7 @@ QUnit.module('ActionManager', {
     });
 
     QUnit.test('sidebar is present in list view', async function (assert) {
-        assert.expect(5);
+        assert.expect(4);
 
         var actionManager = await createActionManager({
             actions: this.actions,
@@ -2345,11 +2349,11 @@ QUnit.module('ActionManager', {
         });
         await actionManager.doAction(3);
 
-        assert.isNotVisible(actionManager.$('.o_cp_sidebar button.o_dropdown_toggler_btn:contains("Print")'));
-        assert.isNotVisible(actionManager.$('.o_cp_sidebar button.o_dropdown_toggler_btn:contains("Action")'));
+        assert.containsNone(actionManager, '.o_cp_action_menus');
+
         await testUtils.dom.clickFirst(actionManager.$('input.custom-control-input'));
-        assert.isVisible(actionManager.$('.o_cp_sidebar button.o_dropdown_toggler_btn:contains("Print")'));
-        assert.isVisible(actionManager.$('.o_cp_sidebar button.o_dropdown_toggler_btn:contains("Action")'));
+        assert.isVisible(actionManager.$('.o_cp_action_menus button.o_dropdown_toggler_btn:contains("Print")'));
+        assert.isVisible(actionManager.$('.o_cp_action_menus button.o_dropdown_toggler_btn:contains("Action")'));
 
         actionManager.destroy();
     });
@@ -2372,14 +2376,14 @@ QUnit.module('ActionManager', {
             "should display the list view");
 
         // switch to kanban view
-        await testUtils.dom.click($('.o_control_panel .o_cp_switch_kanban'));
+        await cpHelpers.switchView(actionManager, 'kanban');
         assert.containsNone(actionManager, '.o_list_view',
             "should no longer display the list view");
         assert.containsOnce(actionManager, '.o_kanban_view',
             "should display the kanban view");
 
         // switch back to list view
-        await testUtils.dom.click($('.o_control_panel .o_cp_switch_list'));
+        await cpHelpers.switchView(actionManager, 'list');
         assert.containsOnce(actionManager, '.o_list_view',
             "should display the list view");
         assert.containsNone(actionManager, '.o_kanban_view',
@@ -2486,7 +2490,7 @@ QUnit.module('ActionManager', {
             "breadcrumbs should display the display_name of the action");
 
         // switch to kanban view
-        await testUtils.dom.click($('.o_control_panel .o_cp_switch_kanban'));
+        await cpHelpers.switchView(actionManager, 'kanban');
         assert.strictEqual($('.o_control_panel .breadcrumb-item').length, 1,
             "there should still be one controller in the breadcrumbs");
         assert.strictEqual($('.o_control_panel .breadcrumb-item').text(), 'Partners',
@@ -2508,7 +2512,7 @@ QUnit.module('ActionManager', {
             "breadcrumbs should display the display_name of the action");
 
         // switch back to list view
-        await testUtils.dom.click($('.o_control_panel .o_cp_switch_list'));
+        await cpHelpers.switchView(actionManager, 'list');
         assert.strictEqual($('.o_control_panel .breadcrumb-item').length, 1,
             "there should still be one controller in the breadcrumbs");
         assert.strictEqual($('.o_control_panel .breadcrumb-item').text(), 'Partners',
@@ -2543,43 +2547,43 @@ QUnit.module('ActionManager', {
         });
         await actionManager.doAction(3);
 
-        assert.strictEqual($('.o_control_panel .o_cp_switch_buttons button').length, 2,
+        assert.containsN(actionManager, '.o_control_panel button.o_switch_view', 2,
             "should have two switch buttons (list and kanban)");
-        assert.strictEqual($('.o_control_panel .o_cp_switch_buttons button.active').length, 1,
+        assert.containsOnce(actionManager, '.o_control_panel button.o_switch_view.active',
             "should have only one active button");
-        assert.hasClass($('.o_control_panel .o_cp_switch_buttons button:first'),'o_cp_switch_list',
+        assert.hasClass($('.o_control_panel .o_switch_view:first'),'o_list',
             "list switch button should be the first one");
-        assert.hasClass($('.o_control_panel .o_cp_switch_list'),'active',
+        assert.hasClass($('.o_control_panel .o_switch_view.o_list'), 'active',
             "list should be the active view");
 
         // switch to kanban view
-        await testUtils.dom.click($('.o_control_panel .o_cp_switch_kanban'));
-        assert.strictEqual($('.o_control_panel .o_cp_switch_buttons button').length, 2,
+        await cpHelpers.switchView(actionManager, 'kanban');
+        assert.containsN(actionManager, '.o_control_panel .o_switch_view', 2,
             "should still have two switch buttons (list and kanban)");
-        assert.strictEqual($('.o_control_panel .o_cp_switch_buttons button.active').length, 1,
+        assert.containsOnce(actionManager, '.o_control_panel .o_switch_view.active',
             "should still have only one active button");
-        assert.hasClass($('.o_control_panel .o_cp_switch_buttons button:first'),'o_cp_switch_list',
+        assert.hasClass($('.o_control_panel .o_switch_view:first'), 'o_list',
             "list switch button should still be the first one");
-        assert.hasClass($('.o_control_panel .o_cp_switch_kanban'),'active',
+        assert.hasClass($('.o_control_panel .o_switch_view.o_kanban'),'active',
             "kanban should now be the active view");
 
         // switch back to list view
-        await testUtils.dom.click($('.o_control_panel .o_cp_switch_list'));
-        assert.strictEqual($('.o_control_panel .o_cp_switch_buttons button').length, 2,
+        await cpHelpers.switchView(actionManager, 'list');
+        assert.containsN(actionManager, '.o_control_panel .o_switch_view', 2,
             "should still have two switch buttons (list and kanban)");
-        assert.hasClass($('.o_control_panel .o_cp_switch_list'),'active',
+        assert.hasClass($('.o_control_panel .o_switch_view.o_list'),'active',
             "list should now be the active view");
 
         // open a record in form view
         await testUtils.dom.click(actionManager.$('.o_list_view .o_data_row:first'));
-        assert.strictEqual($('.o_control_panel .o_cp_switch_buttons button').length, 0,
+        assert.containsNone(actionManager, '.o_control_panel .o_switch_view',
             "should not have any switch buttons");
 
         // go back to list view using the breadcrumbs
         await testUtils.dom.click($('.o_control_panel .breadcrumb a'));
-        assert.strictEqual($('.o_control_panel .o_cp_switch_buttons button').length, 2,
+        assert.containsN(actionManager, '.o_control_panel .o_switch_view', 2,
             "should have two switch buttons (list and kanban)");
-        assert.hasClass($('.o_control_panel .o_cp_switch_list'),'active',
+        assert.hasClass($('.o_control_panel .o_switch_view.o_list'),'active',
             "list should be the active view");
 
         actionManager.destroy();
@@ -2601,7 +2605,7 @@ QUnit.module('ActionManager', {
             "limit should be correct for kanban");
 
         // switch to list view
-        await testUtils.dom.click($('.o_control_panel .o_cp_switch_list'));
+        await cpHelpers.switchView(actionManager, 'list');
         assert.strictEqual($('.o_control_panel .o_pager_value').text(), '1-3',
             "value should be correct for list");
         assert.strictEqual($('.o_control_panel .o_pager_limit').text(), '5',
@@ -2622,7 +2626,7 @@ QUnit.module('ActionManager', {
             "limit should be correct for list");
 
         // switch back to kanban view
-        await testUtils.dom.click($('.o_control_panel .o_cp_switch_kanban'));
+        await cpHelpers.switchView(actionManager, 'kanban');
         assert.strictEqual($('.o_control_panel .o_pager_value').text(), '1-5',
             "value should be correct for kanban");
         assert.strictEqual($('.o_control_panel .o_pager_limit').text(), '5',
@@ -2646,12 +2650,12 @@ QUnit.module('ActionManager', {
         assert.containsN(actionManager, '.o_data_row', 5);
 
         // activate a domain
-        await testUtils.dom.click(actionManager.$('.o_search_options .o_filters_menu_button'));
-        await testUtils.dom.click(actionManager.$('.o_search_options .o_filters_menu a:contains(Bar)'));
+        await cpHelpers.toggleFilterMenu(actionManager);
+        await cpHelpers.toggleMenuItem(actionManager, "Bar");
         assert.containsN(actionManager, '.o_data_row', 2);
 
         // switch to kanban
-        await testUtils.dom.click(actionManager.$('.o_control_panel .o_cp_switch_kanban'));
+        await cpHelpers.switchView(actionManager, 'kanban');
         assert.containsN(actionManager, '.o_kanban_record:not(.o_kanban_ghost)', 2);
 
         // remove the domain
@@ -2659,7 +2663,7 @@ QUnit.module('ActionManager', {
         assert.containsN(actionManager, '.o_kanban_record:not(.o_kanban_ghost)', 5);
 
         // switch back to list
-        await testUtils.dom.click(actionManager.$('.o_control_panel .o_cp_switch_list'));
+        await cpHelpers.switchView(actionManager, 'list');
         assert.containsN(actionManager, '.o_data_row', 5);
 
         actionManager.destroy();
@@ -2682,7 +2686,7 @@ QUnit.module('ActionManager', {
 
         // switch to kanban view
         def = testUtils.makeTestPromise();
-        await testUtils.dom.click($('.o_control_panel .o_cp_switch_kanban'));
+        await cpHelpers.switchView(actionManager, 'kanban');
         assert.containsOnce(actionManager, '.o_list_view',
             "should still display the list view");
         assert.containsNone(actionManager, '.o_kanban_view',
@@ -2696,7 +2700,7 @@ QUnit.module('ActionManager', {
 
         // switch back to list view
         def = testUtils.makeTestPromise();
-        await testUtils.dom.click($('.o_control_panel .o_cp_switch_list'));
+        await cpHelpers.switchView(actionManager, 'list');
         assert.containsOnce(actionManager, '.o_kanban_view',
             "should still display the kanban view");
         assert.containsNone(actionManager, '.o_list_view',
@@ -3044,11 +3048,11 @@ QUnit.module('ActionManager', {
             "line chart button is now active");
 
         // switch to kanban and back to graph view
-        await testUtils.dom.click($('.o_control_panel .o_cp_switch_kanban'));
+        await cpHelpers.switchView(actionManager, 'kanban');
         assert.strictEqual($('.o_control_panel  .fa-area-chart').length, 0,
             "graph buttons are no longer in control panel");
 
-        await testUtils.dom.click($('.o_control_panel .o_cp_switch_graph'));
+        await cpHelpers.switchView(actionManager, 'graph');
         assert.hasClass($('.o_control_panel  .fa-area-chart'),'active',
             "line chart button is still active");
         actionManager.destroy();
@@ -3069,16 +3073,16 @@ QUnit.module('ActionManager', {
         });
         await actionManager.doAction(3);
 
-        assert.hasClass($('.o_control_panel .o_cp_switch_list'),'active',
+        assert.hasClass($('.o_control_panel .o_switch_view.o_list'),'active',
             "list button in control panel is active");
-        assert.doesNotHaveClass($('.o_control_panel .o_cp_switch_graph'), 'active',
+        assert.doesNotHaveClass($('.o_control_panel .o_switch_view.o_graph'), 'active',
             "graph button in control panel is not active");
 
         // switch to graph view
-        await testUtils.dom.click($('.o_control_panel .o_cp_switch_graph'));
-        assert.doesNotHaveClass($('.o_control_panel .o_cp_switch_list'), 'active',
+        await cpHelpers.switchView(actionManager, 'graph');
+        assert.doesNotHaveClass($('.o_control_panel .o_switch_view.o_list'), 'active',
             "list button in control panel is not active");
-        assert.hasClass($('.o_control_panel .o_cp_switch_graph'),'active',
+        assert.hasClass($('.o_control_panel .o_switch_view.o_graph'),'active',
             "graph button in control panel is active");
         actionManager.destroy();
     });
@@ -3222,7 +3226,7 @@ QUnit.module('ActionManager', {
             "should only display 2 record");
 
         // switch to kanban view
-        await testUtils.dom.click($('.o_control_panel .o_cp_switch_kanban'));
+        await cpHelpers.switchView(actionManager, 'kanban');
 
         assert.strictEqual(actionManager.$('.o_kanban_record:not(.o_kanban_ghost)').length, 2,
             "should only display 2 record");
@@ -3412,14 +3416,19 @@ QUnit.module('ActionManager', {
             actions: this.actions,
             archs: this.archs,
             data: this.data,
-            intercepts: {
-                create_filter: function (event) {
-                    var filter = event.data.filter;
-                    assert.deepEqual(filter.domain, `[("bar", "=", 1)]`,
-                        "should save the correct domain");
-                    assert.deepEqual(filter.context, {shouldBeInFilterContext: true},
-                        "should save the correct context");
-                },
+            env: {
+                dataManager: {
+                    create_filter: function (filter) {
+                        assert.strictEqual(filter.domain, `[("bar", "=", 1)]`,
+                            "should save the correct domain");
+                        const expectedContext = {
+                            group_by: [], // default groupby is an empty list
+                            shouldBeInFilterContext: true,
+                        };
+                        assert.deepEqual(filter.context, expectedContext,
+                            "should save the correct context");
+                    },
+                }
             },
         });
         await actionManager.doAction(33);
@@ -3428,16 +3437,16 @@ QUnit.module('ActionManager', {
             "should contain 5 records");
 
         // filter on bar
-        await testUtils.dom.click($('.o_control_panel .o_search_options .o_dropdown_toggler_btn:contains(Filters)'));
-        await testUtils.dom.click($('.o_control_panel .o_filters_menu a:contains(Bar)'));
+        await cpHelpers.toggleFilterMenu(actionManager);
+        await cpHelpers.toggleMenuItem(actionManager, "Bar");
 
         assert.containsN(actionManager, '.o_data_row', 2);
 
         // save filter
-        await testUtils.dom.click($('.o_control_panel .o_search_options .o_dropdown_toggler_btn:contains(Favorites)'));
-        await testUtils.dom.click($('.o_control_panel .o_add_favorite'));
-        $('.o_control_panel .o_favorite_name input[type=text]').val('some name'); // name the filter
-        await testUtils.dom.click($('.o_control_panel .o_save_favorite button'));
+        await cpHelpers.toggleFavoriteMenu(actionManager);
+        await cpHelpers.toggleSaveFavorite(actionManager);
+        await cpHelpers.editFavoriteName(actionManager, "some name");
+        await cpHelpers.saveFavorite(actionManager);
 
         testUtils.mock.unpatch(ListController);
         actionManager.destroy();
@@ -3460,29 +3469,23 @@ QUnit.module('ActionManager', {
             actions: this.actions,
             archs: this.archs,
             data: this.data,
-            intercepts: {
-                load_filters: function (ev) {
-                    ev.data.on_success([
-                        {
-                            user_id: [2, "Mitchell Admin"],
-                            name: 'favorite filter',
-                            id: 5,
-                            context: {},
-                            sort: '[]',
-                            domain: '[("bar", "=", 1)]'
-                        }
-                    ]);
-                },
-            },
+            favoriteFilters: [{
+                user_id: [2, "Mitchell Admin"],
+                name: 'favorite filter',
+                id: 5,
+                context: {},
+                sort: '[]',
+                domain: '[("bar", "=", 1)]'
+            }],
         });
-
         await actionManager.doAction(12);
+
         assert.strictEqual(actionManager.$('.o_list_view tr.o_data_row .o_data_cell').text(), 'zoupyopplopgnapblip',
             'record should be in descending order as default_order applies');
 
-        // apply favorite filter
-        await testUtils.dom.click(actionManager.$('.o_favorites_menu_button'));
-        await testUtils.dom.click(actionManager.$('.o_menu_item a:contains("favorite filter")'));
+        await cpHelpers.toggleFavoriteMenu(actionManager);
+        await cpHelpers.toggleMenuItem(actionManager, "favorite filter");
+
         assert.strictEqual(actionManager.$('.o_control_panel .o_facet_values').text().trim(),
             'favorite filter', 'favorite filter should be applied');
         assert.strictEqual(actionManager.$('.o_list_view tr.o_data_row .o_data_cell').text(), 'gnapblip',
@@ -3495,7 +3498,7 @@ QUnit.module('ActionManager', {
             'order of records should not be changed, while coming back through breadcrumb');
 
         // remove filter
-        await testUtils.dom.click(actionManager.$('.o_searchview .o_facet_remove'));
+        await cpHelpers.removeFacet(actionManager, 0);
         assert.strictEqual(actionManager.$('.o_list_view tr.o_data_row .o_data_cell').text(),
             'zoupyopplopgnapblip', 'order of records should not be changed, after removing current filter');
 
@@ -3512,16 +3515,16 @@ QUnit.module('ActionManager', {
         });
 
         await actionManager.doAction(1);
-        assert.strictEqual($('.o_search_options .o_dropdown:visible .o_filters_menu').length, 1,
+        assert.isVisible(actionManager.el.querySelector('.o_search_options .o_dropdown.o_filter_menu'),
             "the search options should be available");
 
         await actionManager.doAction(3);
-        assert.strictEqual($('.o_search_options .o_dropdown:visible .o_filters_menu').length, 1,
+        assert.isVisible(actionManager.el.querySelector('.o_search_options .o_dropdown.o_filter_menu'),
             "the search options should be available");
 
         // go back using the breadcrumbs
         await testUtils.dom.click($('.o_control_panel .breadcrumb a:first'));
-        assert.strictEqual($('.o_search_options .o_dropdown:visible .o_filters_menu').length, 1,
+        assert.isVisible(actionManager.el.querySelector('.o_search_options .o_dropdown.o_filter_menu'),
             "the search options should be available");
 
         actionManager.destroy();
@@ -3772,11 +3775,11 @@ QUnit.module('ActionManager', {
         });
         await actionManager.doAction(5);
 
-        assert.strictEqual($('.o_technical_modal .modal-body button.infooter').length, 0,
+        assert.containsNone($('.o_technical_modal .modal-body'), 'button.infooter',
             "the button should not be in the body");
-        assert.strictEqual($('.o_technical_modal .modal-footer button.infooter').length, 1,
+        assert.containsOnce($('.o_technical_modal .modal-footer'), 'button.infooter',
             "the button should be in the footer");
-        assert.strictEqual($('.o_technical_modal .modal-footer button').length, 1,
+        assert.containsOnce($('.o_technical_modal .modal-footer'), 'button',
             "the modal footer should only contain one button");
 
         actionManager.destroy();
@@ -4235,7 +4238,7 @@ QUnit.module('ActionManager', {
                     <t t-name="kanban-box">
                         <div class="oe_kanban_global_click">
                             <field name="display_name"/>
-                            <button 
+                            <button
                                 name="1"
                                 string="Execute action"
                                 type="action"
@@ -4294,28 +4297,21 @@ QUnit.module('ActionManager', {
                 return this._super.apply(this, arguments);
             },
         });
-
         await actionManager.doAction(3);
 
-        var $searchInput = $('.o_searchview input');
-        $searchInput.val('m'); // the searchbar checks the contents of the input on keypress events
-        await testUtils.fields.triggerKey('press', $searchInput, 'm');
-        await testUtils.fields.triggerKeydown($searchInput, 'enter');
+        await cpHelpers.editSearch(actionManager, "m");
+        await cpHelpers.validateSearch(actionManager);
 
-        assert.verifySteps(["search_read ",
-                            "search_read foo,ilike,m"]);
+        assert.verifySteps(["search_read ", "search_read foo,ilike,m"]);
 
         // Triggering the do_search above will kill the current searchview Input
-        $searchInput = $('.o_searchview input');
-        $searchInput.val('o'); // the searchbar checks the contents of the input on keypress events
-        await testUtils.fields.triggerKey('press', $searchInput, 'o');
+        await cpHelpers.editSearch(actionManager, "o");
 
         // We have something in the input of the search view. Making the search_read
         // return at this point will trigger the redraw of the view.
         // However we want to hold on to what we just typed
         searchPromise.resolve();
-        await testUtils.nextTick();
-        await testUtils.fields.triggerKeydown($searchInput, 'enter');
+        await cpHelpers.validateSearch(actionManager);
 
         assert.verifySteps(["search_read |,foo,ilike,m,foo,ilike,o"]);
 
diff --git a/addons/web/static/tests/chrome/pager_tests.js b/addons/web/static/tests/chrome/pager_tests.js
deleted file mode 100644
index 18a4ae7fc37..00000000000
--- a/addons/web/static/tests/chrome/pager_tests.js
+++ /dev/null
@@ -1,93 +0,0 @@
-odoo.define('web.pager_tests', function (require) {
-"use strict";
-
-var Pager = require('web.Pager');
-var concurrency = require('web.concurrency');
-var testUtils = require('web.test_utils');
-
-QUnit.module('chrome', {}, function () {
-
-    QUnit.module('Pager');
-
-    QUnit.test('basic stuff', async function (assert) {
-        assert.expect(2);
-
-        var pager = new Pager(null, 10, 1, 4);
-        pager.appendTo($('#qunit-fixture'));
-        await testUtils.nextTick();
-
-        assert.strictEqual(pager.state.current_min, 1,
-            "current_min should be set to 1");
-
-        // click on next
-        await testUtils.dom.click(pager.$('.o_pager_next'));
-        assert.strictEqual(pager.state.current_min, 5,
-            "current_min should now be 5");
-
-        pager.destroy();
-    });
-
-    QUnit.test('edit the pager', async function (assert) {
-        assert.expect(5);
-
-        var pager = new Pager(null, 10, 1, 4);
-        pager.appendTo($('#qunit-fixture'));
-        await testUtils.nextTick();
-
-        // enter edition
-        await testUtils.dom.click(pager.$('.o_pager_value'));
-        assert.containsOnce(pager, 'input',
-            "the pager should contain an input");
-        assert.strictEqual(pager.$('input').val(), '1-4',
-            "the input should have correct value");
-
-        // change the limit
-        await testUtils.fields.editInput(pager.$('input'), '1-6');
-        await testUtils.fields.triggerKeydown(pager.$('input'), 'enter');
-        assert.strictEqual(pager.state.limit, 6,
-            "the limit should have been updated");
-        assert.strictEqual(pager.state.current_min, 1,
-            "the current_min should not have changed");
-        assert.strictEqual(pager.$('.o_pager_value').text(), '1-6',
-            "the input should have correct value");
-
-        pager.destroy();
-    });
-
-    QUnit.test('disabling the pager', async function (assert) {
-        assert.expect(4);
-
-        var pager = new Pager(null, 10, 1, 4);
-        pager.appendTo($('#qunit-fixture'));
-        await testUtils.nextTick();
-        await pager.disable();
-
-        // try to go to the next or previous pages
-        await testUtils.dom.click(pager.$('.o_pager_next'));
-        assert.strictEqual(pager.state.current_min, 1,
-            "current_min should still be 1");
-        await testUtils.dom.click(pager.$('.o_pager_previous'));
-        assert.strictEqual(pager.state.current_min, 1,
-            "current_min should still be 1");
-
-        // try to change the limit
-        await testUtils.dom.click(pager.$('.o_pager_value'));
-        assert.containsNone(pager, 'input',
-            "the pager should not contain an input");
-
-        // a common use is to disable the pager before reloading the data, and
-        // re-enable it once they have been loaded
-        // the following emulates this situation
-        pager.on('pager_changed', null, function () {
-            pager.disable();
-            concurrency.delay(0).then(function () {
-                assert.ok(pager.disabled, "pager should still be disabled");
-                pager.destroy();
-            });
-        });
-        pager.enable();
-        await testUtils.dom.click(pager.$('.o_pager_next'));
-    });
-});
-
-});
diff --git a/addons/web/static/tests/components/custom_file_input_tests.js b/addons/web/static/tests/components/custom_file_input_tests.js
index 0131213f6e9..279bf67f11b 100644
--- a/addons/web/static/tests/components/custom_file_input_tests.js
+++ b/addons/web/static/tests/components/custom_file_input_tests.js
@@ -2,102 +2,89 @@ odoo.define('web.custom_file_input_tests', function (require) {
     "use strict";
 
     const CustomFileInput = require('web.CustomFileInput');
-    const makeTestEnvironment = require('web.test_env');
     const testUtils = require('web.test_utils');
 
-    const { Component, tags, useState } = owl;
-    const { xml } = tags;
+    const { createComponent } = testUtils;
 
     QUnit.module('Components', {}, function () {
 
         // This module cannot be tested as thoroughly as we want it to be:
         // browsers do not let scripts programmatically assign values to inputs
         // of type file
-        QUnit.module('CustomFileInput', {}, function () {
-            QUnit.test("Rendering of all props", async function (assert) {
-                assert.expect(12);
+        QUnit.module('CustomFileInput');
 
-                class Parent extends Component {
-                    constructor() {
-                        super(...arguments);
-                        this.state = useState({ innerContent: '<a href="#">Trigger</a>' });
-                    }
-                    // Handlers
-                    _onFileUploaded(ev) {
-                        assert.strictEqual(ev.detail.files.length, 0,
-                            "'files' property should be an empty array");
-                    }
-                }
-                Parent.components = { CustomFileInput };
-                Parent.env = makeTestEnvironment({
+        QUnit.test("Upload a file: default props", async function (assert) {
+            assert.expect(6);
+
+            const customFileInput = await createComponent(CustomFileInput, {
+                env: {
                     services: {
-                        httpRequest: (route, params) => {
-                            if (route === '/web/binary/upload') {
-                                assert.deepEqual(params, {
-                                    csrf_token: odoo.csrf_token,
-                                    ufile: [],
-                                });
-                                assert.step(route);
-                                return Promise.resolve('[]');
-                            } else if (route === '/web/binary/upload_attachment') {
-                                assert.deepEqual(params, {
-                                    id: 5,
-                                    model: 'res.model',
-                                    csrf_token: odoo.csrf_token,
-                                    ufile: [],
-                                });
-                                assert.step(route);
-                                return Promise.resolve('[]');
-                            }
+                        async httpRequest(route, params) {
+                            assert.deepEqual(params, {
+                                csrf_token: odoo.csrf_token,
+                                ufile: [],
+                            });
+                            assert.step(route);
+                            return '[]';
                         },
                     },
-                });
-                Parent.template = xml`
-                    <CustomFileInput
-                        accepted_file_extensions="state.accepted_file_extensions"
-                        action="state.action"
-                        id="state.id"
-                        model="state.model"
-                        multi_upload="state.multi_upload"
-                        t-on-uploaded="_onFileUploaded"
-                        >
-                        <t t-raw="state.innerContent"/>
-                    </CustomFileInput>`;
+                },
+            });
+            const input = customFileInput.el.querySelector('input');
 
-                const parent = new Parent();
-                await parent.mount(testUtils.prepareTarget());
-                const fileInput = parent.el;
-                const input = fileInput.querySelector('input');
+            assert.strictEqual(customFileInput.el.innerText.trim().toUpperCase(), "CHOOSE FILE",
+                "File input total text should match its given inner element's text");
+            assert.strictEqual(input.accept, '*',
+                "Input should accept all files by default");
 
-                // Default props
-                assert.strictEqual(fileInput.innerText.trim(), "Trigger",
-                    "File input total text should match its given inner element's text");
-                assert.strictEqual(input.accept, '*',
-                    "Input should accept all files by default");
-                await testUtils.dom.triggerEvent(input, 'change');
-                assert.notOk(input.multiple,
-                    "'multiple' attribute should not be set");
+            await testUtils.dom.triggerEvent(input, 'change');
 
-                // Change props
-                Object.assign(parent.state, {
+            assert.notOk(input.multiple, "'multiple' attribute should not be set");
+            assert.verifySteps(['/web/binary/upload']);
+
+            customFileInput.destroy();
+        });
+
+        QUnit.test("Upload a file: custom attachment", async function (assert) {
+            assert.expect(6);
+
+            const customFileInput = await createComponent(CustomFileInput, {
+                env: {
+                    services: {
+                        async httpRequest(route, params) {
+                            assert.deepEqual(params, {
+                                id: 5,
+                                model: 'res.model',
+                                csrf_token: odoo.csrf_token,
+                                ufile: [],
+                            });
+                            assert.step(route);
+                            return '[]';
+                        },
+                    },
+                },
+                props: {
                     accepted_file_extensions: '.png',
                     action: '/web/binary/upload_attachment',
                     id: 5,
                     model: 'res.model',
                     multi_upload: true,
-                });
-                await testUtils.nextTick();
-
-                assert.strictEqual(input.accept, '.png',
-                    "Input should now only accept pngs");
-                await testUtils.dom.triggerEvent(input, 'change');
-                assert.ok(input.multiple,
-                    "'multiple' attribute should be set");
-
-                assert.verifySteps(['/web/binary/upload', '/web/binary/upload_attachment']);
-
-                parent.destroy();
+                },
+                intercepts: {
+                    'uploaded': ev => assert.strictEqual(ev.detail.files.length, 0,
+                        "'files' property should be an empty array"),
+                },
             });
+            const input = customFileInput.el.querySelector('input');
+
+            assert.strictEqual(input.accept, '.png', "Input should now only accept pngs");
+
+            await testUtils.dom.triggerEvent(input, 'change');
+
+            assert.ok(input.multiple, "'multiple' attribute should be set");
+            assert.verifySteps(['/web/binary/upload_attachment']);
+
+            customFileInput.destroy();
         });
     });
 });
diff --git a/addons/web/static/tests/fields/basic_fields_tests.js b/addons/web/static/tests/fields/basic_fields_tests.js
index ada71b91429..eaa41651c20 100644
--- a/addons/web/static/tests/fields/basic_fields_tests.js
+++ b/addons/web/static/tests/fields/basic_fields_tests.js
@@ -19,6 +19,10 @@ var DebouncedField = basicFields.DebouncedField;
 var JournalDashboardGraph = basicFields.JournalDashboardGraph;
 var _t = core._t;
 
+// Base64 images for testing purpose
+const MY_IMAGE = 'iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==';
+const PRODUCT_IMAGE = 'R0lGODlhDAAMAKIFAF5LAP/zxAAAANyuAP/gaP///wAAAAAAACH5BAEAAAUALAAAAAAMAAwAAAMlWLPcGjDKFYi9lxKBOaGcF35DhWHamZUW0K4mAbiwWtuf0uxFAgA7';
+
 QUnit.module('fields', {}, function () {
 
 QUnit.module('basic_fields', {
@@ -2516,7 +2520,7 @@ QUnit.module('basic_fields', {
         assert.expect(7);
 
         this.data.partner.records[0].__last_update = '2017-02-08 10:00:00';
-        this.data.partner.records[0].document = 'myimage';
+        this.data.partner.records[0].document = MY_IMAGE;
 
         var form = await createView({
             View: FormView,
@@ -2526,13 +2530,13 @@ QUnit.module('basic_fields', {
                     '<field name="document" widget="image" options="{\'size\': [90, 90]}"/> ' +
                 '</form>',
             res_id: 1,
-            mockRPC: function (route, args) {
+            async mockRPC(route, args) {
                 if (route === '/web/dataset/call_kw/partner/read') {
                     assert.deepEqual(args.args[1], ['document', '__last_update', 'display_name'], "The fields document, display_name and __last_update should be present when reading an image");
                 }
-                if (route === 'data:image/png;base64,myimage') {
+                if (route === `data:image/png;base64,${MY_IMAGE}`) {
                     assert.ok(true, "should called the correct route");
-                    return Promise.resolve('wow');
+                    return 'wow';
                 }
                 return this._super.apply(this, arguments);
             },
@@ -2551,6 +2555,59 @@ QUnit.module('basic_fields', {
         form.destroy();
     });
 
+    QUnit.test('image fields are correctly replaced when given an incorrect value', async function (assert) {
+        assert.expect(7);
+
+        this.data.partner.records[0].__last_update = '2017-02-08 10:00:00';
+        this.data.partner.records[0].document = 'incorrect_base64_value';
+
+        testUtils.mock.patch(basicFields.FieldBinaryImage, {
+            // Delay the _render function: this will ensure that the error triggered
+            // by the incorrect base64 value is dispatched before the src is replaced
+            // (see test_utils_mock.removeSrcAttribute), since that function is called
+            // when the element is inserted into the DOM.
+            async _render() {
+                const result = this._super.apply(this, arguments);
+                await concurrency.delay(100);
+                return result;
+            },
+        });
+
+        const form = await createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch: `
+                <form string="Partners">
+                    <field name="document" widget="image" options="{'size': [90, 90]}"/>
+                </form>`,
+            res_id: 1,
+            async mockRPC(route, args) {
+                const _super = this._super;
+                if (route === '/web/static/src/img/placeholder.png') {
+                    assert.step('call placeholder route');
+                }
+                return _super.apply(this, arguments);
+            },
+        });
+
+        assert.hasClass(form.$('div[name="document"]'),'o_field_image',
+            "the widget should have the correct class");
+        assert.containsOnce(form, 'div[name="document"] > img',
+            "the widget should contain an image");
+        assert.hasClass(form.$('div[name="document"] > img'), 'img-fluid',
+            "the image should have the correct class");
+        assert.hasAttrValue(form.$('div[name="document"] > img'), 'width', "90",
+            "the image should correctly set its attributes");
+        assert.strictEqual(form.$('div[name="document"] > img').css('max-width'), "90px",
+            "the image should correctly set its attributes");
+
+        assert.verifySteps(['call placeholder route']);
+
+        form.destroy();
+        testUtils.mock.unpatch(basicFields.FieldBinaryImage);
+    });
+
     QUnit.test('image: option accepted_file_extensions', async function (assert) {
         assert.expect(2);
 
@@ -2583,9 +2640,9 @@ QUnit.module('basic_fields', {
         assert.expect(6);
 
         this.data.partner.records[0].__last_update = '2017-02-08 10:00:00';
-        this.data.partner.records[0].document = 'myimage';
+        this.data.partner.records[0].document = MY_IMAGE;
         this.data.partner_type.fields.image = {name: 'image', type: 'binary'};
-        this.data.partner_type.records[0].image = 'product_image';
+        this.data.partner_type.records[0].image = PRODUCT_IMAGE;
         this.data.partner.records[0].timmy = [12];
 
         var form = await createView({
@@ -2604,14 +2661,14 @@ QUnit.module('basic_fields', {
                     '</field>' +
                 '</form>',
             res_id: 1,
-            mockRPC: function (route) {
-                if (route === 'data:image/png;base64,myimage') {
+            async mockRPC(route) {
+                if (route === `data:image/png;base64,${MY_IMAGE}`) {
                     assert.step("The view's image should have been fetched");
-                    return Promise.resolve('wow');
+                    return 'wow';
                 }
-                if (route === 'data:image/png;base64,product_image') {
+                if (route === `data:image/gif;base64,${PRODUCT_IMAGE}`) {
                     assert.step("The dialog's image should have been fetched");
-                    return Promise.resolve();
+                    return;
                 }
                 return this._super.apply(this, arguments);
             },
@@ -2634,7 +2691,7 @@ QUnit.module('basic_fields', {
         assert.expect(2);
 
         this.data.partner_type.fields.image = {name: 'image', type: 'binary'};
-        this.data.partner_type.records[0].image = 'product_image';
+        this.data.partner_type.records[0].image = PRODUCT_IMAGE;
         this.data.partner.records[0].timmy = [12];
 
         var form = await createView({
@@ -2649,10 +2706,10 @@ QUnit.module('basic_fields', {
                     '</field>' +
                 '</form>',
             res_id: 1,
-            mockRPC: function (route) {
-                if (route === 'data:image/png;base64,product_image') {
+            async mockRPC(route) {
+                if (route === `data:image/gif;base64,${PRODUCT_IMAGE}`) {
                     assert.ok(true, "The list's image should have been fetched");
-                    return Promise.resolve();
+                    return;
                 }
                 return this._super.apply(this, arguments);
             },
@@ -2961,7 +3018,7 @@ QUnit.module('basic_fields', {
 
     QUnit.module('FieldDateRange');
 
-    QUnit.test('Datetime field', async function (assert) {
+    QUnit.test('Datetime field [REQUIRE FOCUS]', async function (assert) {
         assert.expect(20);
 
         this.data.partner.fields.datetime_end = {string: 'Datetime End', type: 'datetime'};
@@ -3039,7 +3096,7 @@ QUnit.module('basic_fields', {
         form.destroy();
     });
 
-    QUnit.test('Date field', async function (assert) {
+    QUnit.test('Date field [REQUIRE FOCUS]', async function (assert) {
         assert.expect(18);
 
         this.data.partner.fields.date_end = {string: 'Date End', type: 'date'};
diff --git a/addons/web/static/tests/fields/relational_fields/field_many2many_tests.js b/addons/web/static/tests/fields/relational_fields/field_many2many_tests.js
index a1c306a432c..47fe687d773 100644
--- a/addons/web/static/tests/fields/relational_fields/field_many2many_tests.js
+++ b/addons/web/static/tests/fields/relational_fields/field_many2many_tests.js
@@ -3,6 +3,8 @@ odoo.define('web.field_many_to_many_tests', function (require) {
 
 var FormView = require('web.FormView');
 var testUtils = require('web.test_utils');
+
+const cpHelpers = testUtils.controlPanel;
 var createView = testUtils.createView;
 
 QUnit.module('fields', {}, function () {
@@ -1003,8 +1005,8 @@ QUnit.module('fields', {}, function () {
             assert.strictEqual($('.modal .o_data_row').length, 1,
                 "should contain only one row (gold)");
 
-            await testUtils.fields.triggerKey('press', $('.modal .o_searchview_input'), 's');
-            await testUtils.fields.triggerKeydown($('.modal .o_searchview_input'), 'enter');
+            await cpHelpers.editSearch('.modal', 's');
+            await cpHelpers.validateSearch('.modal');
 
             assert.strictEqual($('.modal .o_data_row').length, 0, "should contain no row");
 
diff --git a/addons/web/static/tests/fields/relational_fields/field_many2one_tests.js b/addons/web/static/tests/fields/relational_fields/field_many2one_tests.js
index 21d74bf0d99..04c934290a1 100644
--- a/addons/web/static/tests/fields/relational_fields/field_many2one_tests.js
+++ b/addons/web/static/tests/fields/relational_fields/field_many2one_tests.js
@@ -9,6 +9,7 @@ var StandaloneFieldManagerMixin = require('web.StandaloneFieldManagerMixin');
 var testUtils = require('web.test_utils');
 var Widget = require('web.Widget');
 
+const cpHelpers = testUtils.controlPanel;
 var createView = testUtils.createView;
 
 QUnit.module('fields', {}, function () {
@@ -244,11 +245,11 @@ QUnit.module('fields', {}, function () {
             // save form
             await testUtils.form.clickSave(form);
             // click next on pager
-            await testUtils.dom.click(form.pager.$('.o_pager_next'));
+            await testUtils.dom.click(form.el.querySelector('.o_pager .o_pager_next'));
 
             // this checks that the view did not ask for confirmation that the
             // record is dirty
-            assert.strictEqual(form.pager.$el.text().trim(), '2 / 2',
+            assert.strictEqual(form.el.querySelector('.o_pager').innerText.trim(), '2 / 2',
                 'pager should be at second page');
             form.destroy();
         });
@@ -316,11 +317,11 @@ QUnit.module('fields', {}, function () {
             // save form
             await testUtils.form.clickSave(form);
             // click next on pager
-            await testUtils.dom.click(form.pager.$('.o_pager_next'));
+            await testUtils.dom.click(form.el.querySelector('.o_pager .o_pager_next'));
 
             // this checks that the view did not ask for confirmation that the
             // record is dirty
-            assert.strictEqual(form.pager.$el.text().trim(), '2 / 2',
+            assert.strictEqual(form.el.querySelector('.o_pager').innerText.trim(), '2 / 2',
                 'pager should be at second page');
             form.destroy();
         });
@@ -506,11 +507,11 @@ QUnit.module('fields', {}, function () {
 
             assert.strictEqual($('tr.o_data_row').length, 9, "should display 9 records");
 
-            await testUtils.dom.click($('button:contains(Filters)'));
-            await testUtils.dom.click($('.o_add_custom_filter:visible'));
-            assert.strictEqual($('.o_filter_condition select.o_searchview_extended_prop_field').val(), 'datetime',
+            await cpHelpers.toggleFilterMenu('.modal');
+            await cpHelpers.toggleAddCustomFilter('.modal');
+            assert.strictEqual(document.querySelector('.modal .o_generator_menu_field').value, 'datetime',
                 "datetime field should be selected");
-            await testUtils.dom.click($('.o_apply_filter'));
+            await cpHelpers.applyFilter('.modal');
 
             assert.strictEqual($('tr.o_data_row').length, 0, "should display 0 records");
             form.destroy();
@@ -592,7 +593,6 @@ QUnit.module('fields', {}, function () {
             assert.containsNone(document.body, '.modal',
                 "No save should be triggered when removing value");
 
-            await testUtils.fields.many2one.clickOpenDropdown('trululu');
             await testUtils.fields.many2one.clickHighlightedItem('trululu');
 
             assert.containsOnce(document.body, '.modal',
@@ -741,8 +741,8 @@ QUnit.module('fields', {}, function () {
             assert.ok(!$('.modal .modal-footer .o_select_button').length,
                 "there should be no 'Select' button in the footer");
             assert.ok($('.modal tbody tr').length > 10, "list should contain more than 10 records");
-            await testUtils.fields.triggerKey('press', $('.modal .o_searchview_input'), 'P'),
-            await testUtils.fields.triggerKeydown($('.modal .o_searchview_input'), 'enter');
+            await cpHelpers.editSearch('.modal', "P");
+            await cpHelpers.validateSearch('.modal');
             assert.strictEqual($('.modal tbody tr').length, 10,
                 "list should be restricted to records containing a P (10 records)");
             // choose a record
diff --git a/addons/web/static/tests/fields/relational_fields/field_one2many_tests.js b/addons/web/static/tests/fields/relational_fields/field_one2many_tests.js
index e24341b1019..e93dc2f39ca 100644
--- a/addons/web/static/tests/fields/relational_fields/field_one2many_tests.js
+++ b/addons/web/static/tests/fields/relational_fields/field_one2many_tests.js
@@ -12,6 +12,7 @@ var relationalFields = require('web.relational_fields');
 var testUtils = require('web.test_utils');
 var fieldUtils = require('web.field_utils');
 
+const cpHelpers = testUtils.controlPanel;
 var createView = testUtils.createView;
 
 QUnit.module('fields', {}, function () {
@@ -1505,7 +1506,7 @@ QUnit.module('fields', {}, function () {
                 "second dialog should be closed");
             assert.strictEqual($('.modal .o_data_row').length, 1,
                 "there should be one record in the one2many in the dialog");
-            assert.notOk($('.modal .o_x2m_control_panel .o_cp_pager div').is(':visible'),
+            assert.containsNone($('.modal'), '.o_x2m_control_panel .o_pager',
                 'm2m pager should be hidden');
 
             // click on 'Save & Close'
@@ -1756,16 +1757,14 @@ QUnit.module('fields', {}, function () {
             // move to record 2, which has 3 related records (and shouldn't contain the
             // related records of record 1 anymore). Two additional RPCs should have
             // been done
-            form.pager.next();
-            await testUtils.nextTick();
+            await cpHelpers.pagerNext(form);
             assert.strictEqual(count, 4, 'two RPCs should have been done');
             assert.strictEqual(form.$('.o_kanban_record:not(".o_kanban_ghost")').length, 3,
                 'one2many kanban should contain 3 cards for record 2');
 
             // move back to record 1, which should contain again its first 40 related
             // records
-            form.pager.previous();
-            await testUtils.nextTick();
+            await cpHelpers.pagerPrevious(form);
             assert.strictEqual(count, 6, 'two RPCs should have been done');
             assert.strictEqual(form.$('.o_kanban_record:not(".o_kanban_ghost")').length, 40,
                 'one2many kanban should contain 40 cards for record 1');
@@ -1778,16 +1777,14 @@ QUnit.module('fields', {}, function () {
                 'one2many kanban should contain 2 cards for record 1 at page 2');
 
             // move to record 2 again and check that everything is correctly updated
-            form.pager.next();
-            await testUtils.nextTick();
+            await cpHelpers.pagerNext(form);
             assert.strictEqual(count, 9, 'two RPCs should have been done');
             assert.strictEqual(form.$('.o_kanban_record:not(".o_kanban_ghost")').length, 3,
                 'one2many kanban should contain 3 cards for record 2');
 
             // move back to record 1 and move to page 2 again: all data should have
             // been correctly reloaded
-            form.pager.previous();
-            await testUtils.nextTick();
+            await cpHelpers.pagerPrevious(form);
             assert.strictEqual(count, 11, 'two RPCs should have been done');
             await testUtils.dom.click(form.$('.o_x2m_control_panel .o_pager_next'));
             assert.strictEqual(count, 12, 'one RPC should have been done');
@@ -2565,7 +2562,7 @@ QUnit.module('fields', {}, function () {
             await testUtils.dom.click(form.$('.o_field_x2many_list_row_add a'));
             await testUtils.dom.click(form.$el);
 
-            assert.strictEqual(form.$('.o_field_widget[name=turtles] .o_cp_pager').text().trim(), '1-3 / 5',
+            assert.strictEqual(form.$('.o_field_widget[name=turtles] .o_pager').text().trim(), '1-3 / 5',
                 "pager should display the correct total");
             form.destroy();
         });
@@ -2898,7 +2895,7 @@ QUnit.module('fields', {}, function () {
             await testUtils.form.clickEdit(form);
             await testUtils.dom.click(form.$('.o_field_x2many_list_row_add a'));
             // the record currently being added should not count in the pager
-            assert.isNotVisible(form.$('.o_field_widget[name=turtles] .o_cp_pager'));
+            assert.containsNone(form, '.o_field_widget[name=turtles] .o_pager');
 
             form.destroy();
         });
@@ -2931,8 +2928,8 @@ QUnit.module('fields', {}, function () {
             // confirm the discard operation
             await testUtils.dom.click($('.modal .modal-footer .btn-primary'));
 
-            assert.isVisible(form.$('.o_field_widget[name=turtles] .o_cp_pager'));
-            assert.strictEqual(form.$('.o_field_widget[name=turtles] .o_cp_pager').text().trim(), '1-3 / 4',
+            assert.isVisible(form.$('.o_field_widget[name=turtles] .o_pager'));
+            assert.strictEqual(form.$('.o_field_widget[name=turtles] .o_pager').text().trim(), '1-3 / 4',
                 "pager should display correct values");
 
             form.destroy();
@@ -3001,13 +2998,13 @@ QUnit.module('fields', {}, function () {
             // see a confirm dialog
             await testUtils.dom.click(form.$('.o_field_widget[name=turtles] .o_pager_next'));
 
-            assert.strictEqual(form.$('.o_field_widget[name=turtles] .o_cp_pager').text().trim(), '1-3 / 4',
+            assert.strictEqual(form.$('.o_field_widget[name=turtles] .o_pager').text().trim(), '1-3 / 4',
                 "pager should still display the correct total");
 
             // click on cancel
             await testUtils.dom.click($('.modal .modal-footer .btn-secondary'));
 
-            assert.strictEqual(form.$('.o_field_widget[name=turtles] .o_cp_pager').text().trim(), '1-3 / 4',
+            assert.strictEqual(form.$('.o_field_widget[name=turtles] .o_pager').text().trim(), '1-3 / 4',
                 "pager should again display the correct total");
             assert.containsOnce(form, '.o_field_one2many input.o_field_invalid',
                 "there should be an invalid input in the one2many");
@@ -3048,7 +3045,7 @@ QUnit.module('fields', {}, function () {
             await testUtils.dom.click($('.modal .modal-footer .btn-primary'));
 
             assert.containsOnce(form, 'tr.o_data_row');
-            assert.isNotVisible(form.$('.o_field_widget[name=turtles] .o_cp_pager'));
+            assert.containsNone(form, '.o_field_widget[name=turtles] .o_pager');
 
             form.destroy();
         });
@@ -3911,14 +3908,14 @@ QUnit.module('fields', {}, function () {
                     '</form>',
             });
 
-            assert.ok(!form.$('.o_x2m_control_panel .o_cp_pager div').is(':visible'),
+            assert.containsNone(form, '.o_x2m_control_panel .o_pager',
                 'o2m pager should be hidden');
 
             // click to create a subrecord
             await testUtils.dom.click(form.$('tbody td.o_field_x2many_list_row_add a'));
             assert.containsOnce(form, 'tr.o_data_row');
 
-            assert.ok(!form.$('.o_x2m_control_panel .o_cp_pager div').is(':visible'),
+            assert.containsNone(form, '.o_x2m_control_panel .o_pager',
                 'o2m pager should be hidden');
             form.destroy();
         });
diff --git a/addons/web/static/tests/fields/relational_fields_tests.js b/addons/web/static/tests/fields/relational_fields_tests.js
index 11d67bd3752..47703a4ce1f 100644
--- a/addons/web/static/tests/fields/relational_fields_tests.js
+++ b/addons/web/static/tests/fields/relational_fields_tests.js
@@ -8,6 +8,7 @@ var RamStorage = require('web.RamStorage');
 var relationalFields = require('web.relational_fields');
 var testUtils = require('web.test_utils');
 
+const cpHelpers = testUtils.controlPanel;
 var createView = testUtils.createView;
 
 QUnit.module('fields', {}, function () {
@@ -153,24 +154,10 @@ QUnit.module('relational_fields', {
 
     QUnit.test('search more pager is reset when doing a new search', async function (assert) {
         assert.expect(6);
-        for(var i = 10; i < 180; i++) {
-            this.data.partner.records.push({
-                id: i,
-                display_name: "Partner " + i,
-            });
-        }
-
-        async function stringToEvent ($element, string) {
-            for (var i = 0; i < string.length; i++) {
-                var keyAscii = string.charCodeAt(i);
-                $element.val($element.val()+string[i]);
-                $element.trigger($.Event('keyup', {which: keyAscii, keyCode:keyAscii}));
-                await testUtils.nextTick();
-            }
-            $element.trigger($.Event('keyup', {which: $.ui.keyCode.ENTER, keyCode:$.ui.keyCode.ENTER}));
-            await testUtils.nextTick();
-        }
 
+        this.data.partner.records.push(
+            ...new Array(170).fill().map((_, i) => ({ id: i + 10, name: "Partner " + i }))
+        );
         this.data.partner.fields.datetime.searchable = true;
         var form = await createView({
             View: FormView,
@@ -192,7 +179,6 @@ QUnit.module('relational_fields', {
 
         await testUtils.form.clickEdit(form);
 
-
         await testUtils.fields.many2one.clickOpenDropdown('trululu');
         await testUtils.fields.many2one.clickItem('trululu','Search');
         await testUtils.dom.click($('.modal .o_pager_next'));
@@ -201,7 +187,8 @@ QUnit.module('relational_fields', {
         assert.strictEqual($('.o_pager_value').text(), "181-160", "should display the second page");
         assert.strictEqual($('tr.o_data_row').length, 80, "should display 80 record");
 
-        await stringToEvent($('.modal .o_searchview_input'), 'first');
+        await cpHelpers.editSearch('.modal', "first");
+        await cpHelpers.validateSearch('.modal');
 
         assert.strictEqual($('.o_pager_limit').text(), "11", "there should be 1 record");
         assert.strictEqual($('.o_pager_value').text(), "11-1", "should display the first page");
@@ -1708,8 +1695,8 @@ QUnit.module('relational_fields', {
         });
         await testUtils.fields.many2one.clickOpenDropdown('trululu');
         await testUtils.fields.many2one.clickItem('trululu', 'Search');
-        await testUtils.dom.click($('.modal .o_search_options .fa-bars'));
-        await testUtils.dom.click($('.modal .o_search_options .o_group_by_menu a:contains(Bar)'));
+        await cpHelpers.toggleGroupByMenu('.modal');
+        await cpHelpers.toggleMenuItem('.modal', "Bar");
 
         await testUtils.dom.click($('.modal .o_group_header:first'));
 
@@ -1977,7 +1964,7 @@ QUnit.module('relational_fields', {
 
         await testUtils.form.clickSave(form);
 
-        assert.strictEqual(form.el.querySelector('.o_field_many2manytags').innerText, 'new value');
+        assert.strictEqual(form.el.querySelector('.o_field_many2manytags').innerText.trim(), "new value");
 
         form.destroy();
     });
diff --git a/addons/web/static/tests/views/calendar_tests.js b/addons/web/static/tests/views/calendar_tests.js
index a58c857d49e..5865d4be80b 100644
--- a/addons/web/static/tests/views/calendar_tests.js
+++ b/addons/web/static/tests/views/calendar_tests.js
@@ -305,6 +305,8 @@ QUnit.module('Views', {
         });
 
         await actionManager.doAction(1);
+        await testUtils.nextTick();
+
         // displays month mode by default
         assert.strictEqual($('.o_control_panel .breadcrumb-item').text(),
             'Meetings Test (Dec 11 – 17, 2016)', "should display the current week");
diff --git a/addons/web/static/tests/views/form_tests.js b/addons/web/static/tests/views/form_tests.js
index 52e2e3354c5..00a73d9a6fd 100644
--- a/addons/web/static/tests/views/form_tests.js
+++ b/addons/web/static/tests/views/form_tests.js
@@ -16,6 +16,7 @@ var widgetRegistry = require('web.widget_registry');
 var Widget = require('web.Widget');
 
 var _t = core._t;
+const cpHelpers = testUtils.controlPanel;
 var createView = testUtils.createView;
 var createActionManager = testUtils.createActionManager;
 
@@ -213,7 +214,7 @@ QUnit.module('Views', {
             bar: true,
             foo: "blip",
             int_field: 9,
-        })
+        });
         var form = await createView({
             View: FormView,
             viewOptions: { mode: 'edit' },
@@ -249,7 +250,7 @@ QUnit.module('Views', {
         this.data.partner.records.push({
             id: 6,
             p: [1],
-        })
+        });
         var form = await createView({
             View: FormView,
             viewOptions: { mode: 'edit' },
@@ -1858,7 +1859,7 @@ QUnit.module('Views', {
         form.destroy();
     });
 
-    QUnit.test('sidebar is hidden when switching to edit mode', async function (assert) {
+    QUnit.test('toolbar is hidden when switching to edit mode', async function (assert) {
         assert.expect(3);
 
         var form = await createView({
@@ -1870,15 +1871,19 @@ QUnit.module('Views', {
                         '<field name="foo"/>' +
                     '</sheet>' +
                 '</form>',
-            viewOptions: {hasSidebar: true},
+            viewOptions: {hasActionMenus: true},
             res_id: 1,
         });
 
-        assert.isVisible(form.sidebar);
+        assert.containsOnce(form, '.o_cp_action_menus');
+
         await testUtils.form.clickEdit(form);
-        assert.isNotVisible(form.sidebar);
+
+        assert.containsNone(form, '.o_cp_action_menus');
+
         await testUtils.form.clickDiscard(form);
-        assert.isVisible(form.sidebar);
+
+        assert.containsOnce(form, '.o_cp_action_menus');
 
         form.destroy();
     });
@@ -2013,14 +2018,14 @@ QUnit.module('Views', {
                         '<field name="foo"/>' +
                 '</form>',
             res_id: 1,
-            viewOptions: {hasSidebar: true},
+            viewOptions: {hasActionMenus: true},
         });
 
         assert.strictEqual(form.$('.o_control_panel .breadcrumb').text(), 'first record',
             "should have the display name of the record as  title");
 
-        await testUtils.dom.click(form.sidebar.$('.o_dropdown_toggler_btn:contains(Action)'));
-        await testUtils.dom.click(form.sidebar.$('a:contains(Duplicate)'));
+        await cpHelpers.toggleActionMenu(form);
+        await cpHelpers.toggleMenuItem(form, "Duplicate");
 
         assert.strictEqual(form.$('.o_control_panel .breadcrumb').text(), 'first record (copy)',
             "should have duplicated the record");
@@ -2040,7 +2045,7 @@ QUnit.module('Views', {
                         '<field name="foo"/>' +
                 '</form>',
             res_id: 1,
-            viewOptions: {hasSidebar: true, context: {hey: 'hoy'}},
+            viewOptions: {hasActionMenus: true, context: {hey: 'hoy'}},
             mockRPC: function (route, args) {
                 if (args.method === 'read') {
                     // should have 2 read, one for initial load, second for
@@ -2052,8 +2057,8 @@ QUnit.module('Views', {
             },
         });
 
-        await testUtils.dom.click(form.sidebar.$('.o_dropdown_toggler_btn:contains(Action)'));
-        await testUtils.dom.click(form.sidebar.$('a:contains(Duplicate)'));
+        await cpHelpers.toggleActionMenu(form);
+        await cpHelpers.toggleMenuItem(form, "Duplicate");
 
         form.destroy();
     });
@@ -2069,12 +2074,12 @@ QUnit.module('Views', {
                         '<field name="foo"/>' +
                 '</form>',
             res_id: 1,
-            viewOptions: {hasSidebar: true},
+            viewOptions: {hasActionMenus: true},
         });
 
         assert.strictEqual(form.$('.o_control_panel .breadcrumb').text(), 'first record',
             "should have the display name of the record as  title");
-        assert.containsNone(form.sidebar, 'a:contains(Duplicate)',
+        assert.containsNone(form, '.o_cp_action_menus a:contains(Duplicate)',
             "should not contains a 'Duplicate' action");
         form.destroy();
     });
@@ -2603,14 +2608,14 @@ QUnit.module('Views', {
             data: this.data,
             arch: '<form string="Partners"><field name="foo"></field></form>',
             res_id: 1,
-            viewOptions: {hasSidebar: true},
+            viewOptions: {hasActionMenus: true},
         });
         await testUtils.form.clickEdit(form);
         await testUtils.fields.editInput(form.$('input[name=foo]'), 'tralala');
         await testUtils.form.clickSave(form);
 
-        await testUtils.dom.click(form.sidebar.$('.o_dropdown_toggler_btn:contains(Action)'));
-        await testUtils.dom.click(form.sidebar.$('a:contains(Duplicate)'));
+        await cpHelpers.toggleActionMenu(form);
+        await cpHelpers.toggleMenuItem(form, "Duplicate");
 
         assert.strictEqual(form.$('input[name=foo]').val(), 'tralala', 'input should contain ABC');
 
@@ -2643,8 +2648,8 @@ QUnit.module('Views', {
             },
         });
 
-        assert.strictEqual(form.$('.o_pager_value').text(), '1', "pager value should be 1");
-        assert.strictEqual(form.$('.o_pager_limit').text(), '2', "pager limit should be 2");
+        assert.strictEqual(cpHelpers.getPagerValue(form), '1', "pager value should be 1");
+        assert.strictEqual(cpHelpers.getPagerSize(form), '2', "pager limit should be 2");
 
         // switch to edit mode
         await testUtils.form.clickEdit(form);
@@ -2655,19 +2660,19 @@ QUnit.module('Views', {
         assert.strictEqual(form.$('input').val(), 'new value', 'input should contain new value');
 
         // click on the pager to switch to the next record and cancel the confirm request
-        await testUtils.dom.click('.o_pager_next'); // click on next
+        await cpHelpers.pagerNext(form);
         assert.containsOnce(document.body, '.modal', "a confirm modal should be displayed");
         await testUtils.dom.click('.modal-footer .btn-secondary'); // click on cancel
         assert.strictEqual(form.$('input[name=foo]').val(), 'new value',
             "input should still contain new value");
-        assert.strictEqual(form.$('.o_pager_value').text(), '1', "pager value should still be 1");
+        assert.strictEqual(cpHelpers.getPagerValue(form), '1', "pager value should still be 1");
 
         // click on the pager to switch to the next record and confirm
-        await testUtils.dom.click('.o_pager_next'); // click on next
+        await cpHelpers.pagerNext(form);
         assert.containsOnce(document.body, '.modal', "a confirm modal should be displayed");
         await testUtils.dom.click('.modal-footer .btn-primary'); // click on confirm
         assert.strictEqual(form.$('input[name=foo]').val(), 'blip', "input should contain blip");
-        assert.strictEqual(form.$('.o_pager_value').text(), '2', "pager value should be 2");
+        assert.strictEqual(cpHelpers.getPagerValue(form), '2', "pager value should be 2");
 
         assert.strictEqual(nbWrite, 0, 'no write RPC should have been done');
         form.destroy();
@@ -2690,7 +2695,8 @@ QUnit.module('Views', {
             },
             res_id: 1,
         });
-        assert.strictEqual(form.$('.o_pager_value').text(), '1', "pager value should be 1");
+
+        assert.strictEqual(cpHelpers.getPagerValue(form), '1', "pager value should be 1");
 
         // switch to edit mode
         await testUtils.form.clickEdit(form);
@@ -2704,10 +2710,10 @@ QUnit.module('Views', {
         await testUtils.form.clickSave(form);
 
         // click on the pager to switch to the next record and cancel the confirm request
-        await testUtils.dom.click('.o_pager_next'); // click on next
+        await cpHelpers.pagerNext(form);
         assert.containsNone(document.body, '.modal:visible',
             "no confirm modal should be displayed");
-        assert.strictEqual(form.$('.o_pager_value').text(), '2', "pager value should be 2");
+        assert.strictEqual(cpHelpers.getPagerValue(form), '2', "pager value should be 2");
 
         assert.containsN(form, '.o_priority .fa-star-o', 2,
             'priority widget should have been rendered with correct value');
@@ -2717,10 +2723,10 @@ QUnit.module('Views', {
         assert.containsOnce(form, '.o_priority .fa-star',
             'priority widget should have been updated');
 
-        await testUtils.dom.click('.o_pager_next'); // click on next
-        assert.containsNone(document.body, '.modal:visible',
+        await cpHelpers.pagerNext(form);
+            assert.containsNone(document.body, '.modal:visible',
             "no confirm modal should be displayed");
-        assert.strictEqual(form.$('.o_pager_value').text(), '1', "pager value should be 1");
+        assert.strictEqual(cpHelpers.getPagerValue(form), '1', "pager value should be 1");
 
         // switch to edit mode
         await testUtils.form.clickEdit(form);
@@ -2733,8 +2739,8 @@ QUnit.module('Views', {
         await testUtils.form.clickDiscard(form);
         assert.containsOnce(document.body, '.modal', "a confirm modal should be displayed");
         await testUtils.dom.click('.modal-footer .btn-primary'); // click on confirm
-        await testUtils.dom.click('.o_pager_next'); // click on next
-        assert.strictEqual(form.$('.o_pager_value').text(), '2', "pager value should be 2");
+        await cpHelpers.pagerNext(form);
+        assert.strictEqual(cpHelpers.getPagerValue(form), '2', "pager value should be 2");
         form.destroy();
     });
 
@@ -2769,7 +2775,7 @@ QUnit.module('Views', {
         assert.hasClass(form.$('.o_notebook .nav-link:eq(1)'), 'active');
 
         // click on the pager to switch to the next record
-        await testUtils.dom.click('.o_pager_next');
+        await cpHelpers.pagerNext(form);
 
         assert.doesNotHaveClass(form.$('.o_notebook .nav-link:eq(0)'), 'active');
         assert.hasClass(form.$('.o_notebook .nav-link:eq(1)'), 'active');
@@ -2793,20 +2799,22 @@ QUnit.module('Views', {
             },
         });
 
-        assert.isVisible(form.pager);
-        assert.strictEqual(form.pager.$('.o_pager_value').text(), "1",
+        assert.containsOnce(form, '.o_pager');
+        assert.strictEqual(cpHelpers.getPagerValue(form), "1",
             "current pager value should be 1");
-        assert.strictEqual(form.pager.$('.o_pager_limit').text(), "2",
+        assert.strictEqual(cpHelpers.getPagerSize(form), "2",
             "current pager limit should be 1");
 
         await testUtils.form.clickCreate(form);
-        assert.isNotVisible(form.pager);
+
+        assert.containsNone(form, '.o_pager');
 
         await testUtils.form.clickSave(form);
-        assert.isVisible(form.pager);
-        assert.strictEqual(form.pager.$('.o_pager_value').text(), "3",
+
+        assert.containsOnce(form, '.o_pager');
+        assert.strictEqual(cpHelpers.getPagerValue(form), "3",
             "current pager value should be 3");
-        assert.strictEqual(form.pager.$('.o_pager_limit').text(), "3",
+        assert.strictEqual(cpHelpers.getPagerSize(form), "3",
             "current pager limit should be 3");
 
         form.destroy();
@@ -2835,10 +2843,11 @@ QUnit.module('Views', {
         });
 
         assert.strictEqual(form.mode, 'readonly', 'form view should be in readonly mode');
-        assert.strictEqual(form.pager.$('.o_pager_value').text(), "1", 'pager value should be 1');
-        await testUtils.dom.click(form.pager.$('.o_pager_next'));
+        assert.strictEqual(cpHelpers.getPagerValue(form), "1", 'pager value should be 1');
 
-        assert.strictEqual(form.pager.$('.o_pager_value').text(), "2", 'pager value should be 2');
+        await cpHelpers.pagerNext(form);
+
+        assert.strictEqual(cpHelpers.getPagerValue(form), "2", 'pager value should be 2');
         assert.strictEqual(form.mode, 'readonly', 'form view should be in readonly mode');
 
         assert.strictEqual(pushStateCount, 2, "should have triggered 2 push_state");
@@ -2935,28 +2944,28 @@ QUnit.module('Views', {
             viewOptions: {
                 ids: [1, 2, 4],
                 index: 0,
-                hasSidebar: true,
+                hasActionMenus: true,
             },
             res_id: 1,
         });
 
-        assert.strictEqual(form.pager.$('.o_pager_value').text(), "1", 'pager value should be 1');
-        assert.strictEqual(form.pager.$('.o_pager_limit').text(), "3", 'pager limit should be 3');
+        assert.strictEqual(cpHelpers.getPagerValue(form), "1", 'pager value should be 1');
+        assert.strictEqual(cpHelpers.getPagerSize(form), "3", 'pager limit should be 3');
         assert.strictEqual(form.$('span:contains(yop)').length, 1,
             'should have a field with foo value for record 1');
         assert.ok(!$('.modal:visible').length, 'no confirm modal should be displayed');
 
-        // open sidebar and delete
-        await testUtils.dom.click(form.sidebar.$('.o_dropdown_toggler_btn:contains(Action)'));
-        await testUtils.dom.click(form.sidebar.$('a:contains(Delete)'));
+        // open action menu and delete
+        await cpHelpers.toggleActionMenu(form);
+        await cpHelpers.toggleMenuItem(form, "Delete");
 
         assert.ok($('.modal').length, 'a confirm modal should be displayed');
 
         // confirm the delete
         await testUtils.dom.click($('.modal-footer button.btn-primary'));
 
-        assert.strictEqual(form.pager.$('.o_pager_value').text(), "1", 'pager value should be 1');
-        assert.strictEqual(form.pager.$('.o_pager_limit').text(), "2", 'pager limit should be 2');
+        assert.strictEqual(cpHelpers.getPagerValue(form), "1", 'pager value should be 1');
+        assert.strictEqual(cpHelpers.getPagerSize(form), "2", 'pager limit should be 2');
         assert.strictEqual(form.$('span:contains(blip)').length, 1,
             'should have a field with foo value for record 2');
         form.destroy();
@@ -2973,7 +2982,7 @@ QUnit.module('Views', {
             viewOptions: {
                 ids: [1],
                 index: 0,
-                hasSidebar: true,
+                hasActionMenus: true,
             },
             res_id: 1,
             mockRPC: function (route, args) {
@@ -2982,9 +2991,8 @@ QUnit.module('Views', {
             }
         });
 
-        // open sidebar, click on delete and confirm
-        await testUtils.dom.click(form.sidebar.$('.o_dropdown_toggler_btn:contains(Action)'));
-        await testUtils.dom.click(form.sidebar.$('a:contains(Delete)'));
+        await cpHelpers.toggleActionMenu(form);
+        await cpHelpers.toggleMenuItem(form, "Delete");
 
         await testUtils.mock.intercept(form, 'history_back', function () {
             assert.step('history_back');
@@ -5209,13 +5217,13 @@ QUnit.module('Views', {
                     device: {size_class: size_class},
                 },
             });
-        }
+        };
 
         var assertFormContainsNButtonsWithSizeClass = async function (size_class, n) {
             var form = await createFormWithDeviceSizeClass(size_class);
             assert.containsN(form, statButtonSelector, n, 'The form has the expected amount of buttons');
             form.destroy();
-        }
+        };
 
         await assertFormContainsNButtonsWithSizeClass(0, 2);
         await assertFormContainsNButtonsWithSizeClass(1, 2);
@@ -5510,7 +5518,7 @@ QUnit.module('Views', {
                 print: [],
             },
             viewOptions: {
-                hasSidebar: true,
+                hasActionMenus: true,
             },
             mockRPC: function (route, args) {
                 if (route === '/web/action/load') {
@@ -5524,17 +5532,15 @@ QUnit.module('Views', {
             },
         });
 
-        var $printMenu = form.$('.o_cp_sidebar .o_dropdown:contains(Print)');
-        assert.isNotVisible($printMenu);
-        var $actionMenu = form.$('.o_cp_sidebar .o_dropdown:contains(Action)');
-        assert.isVisible($actionMenu);
+        assert.containsNone(form, '.o_cp_action_menus .o_dropdown:contains(Print)');
+        assert.containsOnce(form, '.o_cp_action_menus .o_dropdown:contains(Action)');
 
-        testUtils.dom.click($actionMenu.find('button')); // open Action menu
-        assert.strictEqual($actionMenu.find('.dropdown-item').length, 3,
-            'there should be 3 actions');
-        var $customAction = $actionMenu.find('.dropdown-item:last');
-        assert.strictEqual($customAction.text().trim(), 'Action partner',
+        await cpHelpers.toggleActionMenu(form);
+
+        assert.containsN(form, '.o_cp_action_menus .dropdown-item', 3, "there should be 3 actions");
+        assert.strictEqual(form.$('.o_cp_action_menus .dropdown-item:last').text().trim(), 'Action partner',
             "the custom action should have 'Action partner' as name");
+
         await testUtils.mock.intercept(form, 'do_action', function (event) {
             var context = event.data.action.context.__contexts[1];
             assert.strictEqual(context.active_id, 1,
@@ -5542,7 +5548,7 @@ QUnit.module('Views', {
             assert.deepEqual(context.active_ids, [1],
                 "the active_ids should be an array with 1 inside.");
         });
-        await testUtils.dom.click($customAction);
+        await cpHelpers.toggleMenuItem(form, "Action partner");
 
         form.destroy();
     });
@@ -5687,14 +5693,16 @@ QUnit.module('Views', {
             "first tab should be active");
 
         // click on the pager to switch to the next record
-        await testUtils.dom.click(form.pager.$('.o_pager_next'));
+        await cpHelpers.pagerNext(form);
+
         assert.strictEqual(form.$('.o_notebook .nav-item:not(.o_invisible_modifier)').length, 1,
             "only the second tab should be visible");
         assert.hasClass(form.$('.o_notebook .nav-item:not(.o_invisible_modifier) .nav-link'),'active',
             "the visible tab should be active");
 
         // click on the pager to switch back to the previous record
-        await testUtils.dom.click(form.pager.$('.o_pager_previous'));
+        await cpHelpers.pagerPrevious(form);
+
         assert.strictEqual(form.$('.o_notebook .nav-item:not(.o_invisible_modifier)').length, 2,
             "both tabs should be visible again");
         assert.hasClass(form.$('.o_notebook .nav-link:nth(1)'),'active',
@@ -6205,24 +6213,22 @@ QUnit.module('Views', {
         await testUtils.fields.editInput(form.$('input[name="foo"]'), "test");
         await testUtils.form.clickSave(form);
 
-        assert.containsOnce(form, '.o_form_view .alert > div',"should have a translation alert");
+        assert.containsOnce(form, '.o_form_view .alert > div', "should have a translation alert");
 
         // click on the pager to switch to the next record
-        await testUtils.dom.click(form.pager.$('.o_pager_next'));
-        assert.strictEqual(form.$('.o_form_view .alert > div').length, 0,
-            "should not have a translation alert");
+        await cpHelpers.pagerNext(form);
+        assert.containsNone(form, '.o_form_view .alert > div', "should not have a translation alert");
 
         // click on the pager to switch back to the previous record
-        await testUtils.dom.click(form.pager.$('.o_pager_previous'));
-        assert.containsOnce(form, '.o_form_view .alert > div',"should have a translation alert");
+        await cpHelpers.pagerPrevious(form);
+        assert.containsOnce(form, '.o_form_view .alert > div', "should have a translation alert");
 
         // remove translation alert by click X and check alert even after form reload
         await testUtils.dom.click(form.$('.o_form_view .alert > .close'));
-        assert.strictEqual(form.$('.o_form_view > .alert > div').length, 0,
-            "should not have a translation alert");
+        assert.containsNone(form, '.o_form_view .alert > div', "should not have a translation alert");
+
         await form.reload();
-        assert.strictEqual(form.$('.o_form_view .alert > div').length, 0,
-            "should not have a translation alert after reload");
+        assert.containsNone(form, '.o_form_view .alert > div', "should not have a translation alert after reload");
 
         form.destroy();
         _t.database.multi_lang = multi_lang;
@@ -7017,7 +7023,7 @@ QUnit.module('Views', {
                         '<field name="display_name"/>' +
                 '</form>',
             res_id: 1,
-            viewOptions: {hasSidebar: true},
+            viewOptions: {hasActionMenus: true},
             mockRPC: function (route, args) {
                 var result = this._super.apply(this, arguments);
                 if (args.method === 'copy') {
@@ -7035,8 +7041,9 @@ QUnit.module('Views', {
         });
 
         // duplicate record 1
-        await testUtils.dom.click(form.sidebar.$('.o_dropdown_toggler_btn:contains(Action)'));
-        await testUtils.dom.click(form.sidebar.$('a:contains(Duplicate)'));
+        await cpHelpers.toggleActionMenu(form);
+        await cpHelpers.toggleMenuItem(form, "Duplicate");
+
         assert.containsOnce(form, '.o_form_editable',
             "form should be in edit mode");
         assert.strictEqual(form.$('.o_field_widget').val(), 'first record (copy)',
@@ -7044,8 +7051,8 @@ QUnit.module('Views', {
         await testUtils.form.clickSave(form); // save duplicated record
 
         // delete duplicated record
-        await testUtils.dom.click(form.sidebar.$('.o_dropdown_toggler_btn:contains(Action)'));
-        await testUtils.dom.click(form.sidebar.$('a:contains(Delete)'));
+        await cpHelpers.toggleActionMenu(form);
+        await cpHelpers.toggleMenuItem(form, "Delete");
 
         assert.strictEqual($('.modal').length, 1, "should have opened a confirm dialog");
         await testUtils.dom.click($('.modal-footer .btn-primary'));
@@ -7320,7 +7327,7 @@ QUnit.module('Views', {
                 '</form>',
         });
 
-        var onFileLoadedEventName = form.$('.o_form_binary_form').attr('target')
+        var onFileLoadedEventName = form.$('.o_form_binary_form').attr('target');
         // trigger _onFileLoaded function
         $(window).trigger(onFileLoadedEventName, [{id: 5}, {id:2}]);
 
@@ -7629,7 +7636,7 @@ QUnit.module('Views', {
     });
 
     QUnit.test('do not change pager when discarding current record', async function (assert) {
-        assert.expect(2);
+        assert.expect(4);
 
         var form = await createView({
             View: FormView,
@@ -7645,14 +7652,18 @@ QUnit.module('Views', {
             res_id: 2,
         });
 
-        assert.strictEqual(form.pager.$('.o_pager_counter').text().trim(), '2 / 2',
+        assert.strictEqual(cpHelpers.getPagerValue(form), "2",
+            'pager should indicate that we are on second record');
+        assert.strictEqual(cpHelpers.getPagerSize(form), "2",
             'pager should indicate that we are on second record');
 
         await testUtils.form.clickEdit(form);
         await testUtils.form.clickDiscard(form);
 
-        assert.strictEqual(form.pager.$('.o_pager_counter').text().trim(), '2 / 2',
-            'pager should not have changed');
+        assert.strictEqual(cpHelpers.getPagerValue(form), "2",
+            'pager value should not have changed');
+        assert.strictEqual(cpHelpers.getPagerSize(form), "2",
+            'pager limit should not have changed');
 
         form.destroy();
     });
@@ -7801,13 +7812,13 @@ QUnit.module('Views', {
             },
             res_id: 1,
             viewOptions: {
-                hasSidebar: true,
+                hasActionMenus: true,
             },
         });
         core.bus.on('clear_cache', form, assert.step.bind(assert, 'clear_cache'));
 
-        await testUtils.dom.click(form.sidebar.$('.o_dropdown_toggler_btn:contains(Action)'));
-        await testUtils.dom.click(form.sidebar.$('a:contains(Delete)'));
+        await cpHelpers.toggleActionMenu(form);
+        await cpHelpers.toggleMenuItem(form, "Delete");
         await testUtils.dom.click($('.modal-footer .btn-primary'));
 
         assert.verifySteps(['unlink', 'clear_cache']);
@@ -8166,7 +8177,7 @@ QUnit.module('Views', {
         await testUtils.fields.many2one.clickOpenDropdown('trululu');
 
         // switch to another record (should ask to discard changes, and reset the domain)
-        await testUtils.dom.click(form.pager.$('.o_pager_next'));
+        await cpHelpers.pagerNext(form);
 
         // discard changes by clicking on confirm in the dialog
         await testUtils.dom.click($('.modal .modal-footer .btn-primary:first'));
diff --git a/addons/web/static/tests/views/graph_tests.js b/addons/web/static/tests/views/graph_tests.js
index d0cbe9d7a2e..05d490927ea 100644
--- a/addons/web/static/tests/views/graph_tests.js
+++ b/addons/web/static/tests/views/graph_tests.js
@@ -1,24 +1,26 @@
 odoo.define('web.graph_view_tests', function (require) {
 "use strict";
 
-var concurrency = require('web.concurrency');
-var controlPanelViewParameters = require('web.controlPanelViewParameters');
+var searchUtils = require('web.searchUtils');
 var GraphView = require('web.GraphView');
 var testUtils = require('web.test_utils');
 
+const cpHelpers = testUtils.controlPanel;
 var createActionManager = testUtils.createActionManager;
 var createView = testUtils.createView;
 var patchDate = testUtils.mock.patchDate;
 
-var INTERVAL_OPTIONS = controlPanelViewParameters.INTERVAL_OPTIONS.map(o => o.optionId);
-var TIME_RANGE_OPTIONS = controlPanelViewParameters.TIME_RANGE_OPTIONS.map(o => o.optionId);
-var COMPARISON_TIME_RANGE_OPTIONS = controlPanelViewParameters.COMPARISON_TIME_RANGE_OPTIONS.map(o => o.optionId);
+const { INTERVAL_OPTIONS, TIME_RANGE_OPTIONS, COMPARISON_TIME_RANGE_OPTIONS } = searchUtils;
+
+var INTERVAL_OPTION_IDS = Object.keys(INTERVAL_OPTIONS);
+var TIME_RANGE_OPTION_IDS = Object.keys(TIME_RANGE_OPTIONS);
+var COMPARISON_TIME_RANGE_OPTION_IDS = Object.keys(COMPARISON_TIME_RANGE_OPTIONS);
 
 var f = (a, b) => [].concat(...a.map(d => b.map(e => [].concat(d, e))));
 var cartesian = (a, b, ...c) => (b ? cartesian(f(a, b), ...c) : a);
 
-var COMBINATIONS = cartesian(TIME_RANGE_OPTIONS, COMPARISON_TIME_RANGE_OPTIONS);
-var COMBINATIONS_WITH_DATE = cartesian(TIME_RANGE_OPTIONS, COMPARISON_TIME_RANGE_OPTIONS, INTERVAL_OPTIONS);
+var COMBINATIONS = cartesian(TIME_RANGE_OPTION_IDS, COMPARISON_TIME_RANGE_OPTION_IDS);
+var COMBINATIONS_WITH_DATE = cartesian(TIME_RANGE_OPTION_IDS, COMPARISON_TIME_RANGE_OPTION_IDS, INTERVAL_OPTION_IDS);
 
 QUnit.assert.checkDatasets = function (graph, keys, expectedDatasets) {
     keys = keys instanceof Array ? keys : [keys];
@@ -192,7 +194,7 @@ QUnit.module('Views', {
                         'groupby should not contain id field');
                 }
                 return this._super.apply(this, arguments);
-            }
+            },
         });
         graph.destroy();
     });
@@ -298,9 +300,9 @@ QUnit.module('Views', {
                 return this._super(route, args);
             },
         });
+        await cpHelpers.toggleMenu(graph, "Measures");
+        await cpHelpers.toggleMenuItem(graph, "Foo");
 
-        testUtils.dom.click(graph.$buttons.find('.dropdown-toggle:contains(Measures)'));
-        await testUtils.dom.click(graph.$buttons.find('.dropdown-item[data-field="foo"]'));
         assert.checkLegend(graph, 'Foo');
         assert.strictEqual(rpcCount, 2, "should have done 2 rpcs (2 readgroups)");
 
@@ -330,7 +332,7 @@ QUnit.module('Views', {
 
     QUnit.test('no content helper (pie chart)', async function (assert) {
         assert.expect(2);
-        this.data.foo.records =  []
+        this.data.foo.records =  [];
 
         var graph = await createView({
             View: GraphView,
@@ -357,14 +359,11 @@ QUnit.module('Views', {
             model: "foo",
             data: this.data,
             context: {
-                timeRangeMenuData: {
-                    //Q3 2018
-                    timeRange: ['&', ["date", ">=", "2018-07-01"],["date", "<=", "2018-09-30"]],
-                    timeRangeDescription: 'This Quarter',
-                    //Q4 2018
-                    comparisonTimeRange: ['&', ["date", ">=", "2018-10-01"],["date", "<=", "2018-12-31"]],
-                    comparisonTimeRangeDescription: 'Previous Period',
-                },
+                time_ranges: {
+                    field: 'date',
+                    range: 'this_quarter',
+                    comparisonRange: 'previous_period',
+                }
             },
             arch: '<graph type="pie">' +
                         '<field name="product_id"/>' +
@@ -443,8 +442,9 @@ QUnit.module('Views', {
             }
         }, "context should be correct");
 
-        testUtils.dom.click(graph.$buttons.find('.dropdown-toggle:contains(Measures)'));
-        await testUtils.dom.click(graph.$buttons.find('.dropdown-item[data-field="foo"]'));
+        await cpHelpers.toggleMenu(graph, "Measures");
+        await cpHelpers.toggleMenuItem(graph, "Foo");
+
         assert.deepEqual(graph.getOwnedQueryParams(), {
             context: {
                 graph_mode: 'bar',
@@ -567,7 +567,7 @@ QUnit.module('Views', {
         assert.hasClass(graph.$buttons.find('button[data-mode="line"]'),'active',
             'line chart button should be active');
         // check groupby values ('Undefined' is rejected in line chart) are in labels
-        assert.checkLabels(graph, [['red'], ['black']])
+        assert.checkLabels(graph, [['red'], ['black']]);
 
         graph.destroy();
     });
@@ -687,10 +687,11 @@ QUnit.module('Views', {
                 additionalMeasures: ['product_id'],
             },
         });
+
         // need to set the measure this way because it cannot be set in the
         // arch.
-        await testUtils.dom.click(graph.$buttons.find('.dropdown-toggle:contains(Measures)'));
-        await testUtils.dom.click(graph.$buttons.find('.dropdown-item[data-field="product_id"]'));
+        await cpHelpers.toggleMenu(graph, "Measures");
+        await cpHelpers.toggleMenuItem(graph, "Product");
 
         assert.checkLabels(graph, [['xphone'], ['xpad']]);
         assert.checkLegend(graph, 'Product');
@@ -729,8 +730,10 @@ QUnit.module('Views', {
                 additionalMeasures: ['product_id'],
             },
         });
-        assert.ok(graph.measures.product_id,
+
+        assert.ok(graph.measures.find(m => m.fieldName === 'product_id'),
             "should have product_id as measure");
+
         graph.destroy();
     });
 
@@ -766,9 +769,10 @@ QUnit.module('Views', {
                   '</graph>',
         });
 
-        assert.strictEqual(graph.$buttons.find('.o_graph_measures_list .dropdown-item:first').data('field'), 'bouh',
+        await cpHelpers.toggleMenu(graph, "Measures");
+        assert.strictEqual(graph.$buttons.find('.o_graph_measures_list .dropdown-item:first').text(), 'bouh',
             "Bouh should be the first measure");
-        assert.strictEqual(graph.$buttons.find('.o_graph_measures_list .dropdown-item:last').data('field'), '__count__',
+        assert.strictEqual(graph.$buttons.find('.o_graph_measures_list .dropdown-item:last').text(), 'Count',
             "Count should be the last measure");
 
         graph.destroy();
@@ -788,7 +792,7 @@ QUnit.module('Views', {
         });
 
         function _indexOf (label) {
-            return graph.renderer._indexOf(graph.renderer.chart.data.labels, label)
+            return graph.renderer._indexOf(graph.renderer.chart.data.labels, label);
         }
 
         assert.strictEqual(_indexOf(['Undefined']), -1);
@@ -816,7 +820,7 @@ QUnit.module('Views', {
         });
 
         function _indexOf (label) {
-            return graph.renderer._indexOf(graph.renderer.chart.data.labels, label)
+            return graph.renderer._indexOf(graph.renderer.chart.data.labels, label);
         }
 
         assert.strictEqual(_indexOf(['Undefined']), -1);
@@ -825,7 +829,7 @@ QUnit.module('Views', {
         assert.ok(_indexOf(['Undefined']) >= 0);
 
         await testUtils.dom.click(graph.$buttons.find('.o_graph_button[data-mode=pie]'));
-        var labels = graph.renderer.chart.data.labels
+        var labels = graph.renderer.chart.data.labels;
         assert.ok(labels.filter(label => /Undefined/.test(label.join(''))).length >= 1);
 
         // Undefined should not appear after switching back to line chart
@@ -908,7 +912,7 @@ QUnit.module('Views', {
             groupBy: ['product_id', 'color_id'],
         });
 
-        assert.checkLabels(graph, [['xphone'], ['xpad']])
+        assert.checkLabels(graph, [['xphone'], ['xpad']]);
         assert.checkLegend(graph, ['Undefined', 'red']);
         assert.checkDatasets(graph, ['label', 'data'], [
             {
@@ -922,7 +926,7 @@ QUnit.module('Views', {
         ]);
 
         await testUtils.dom.click(graph.$('.o_graph_button[data-mode=line]'));
-        assert.checkLabels(graph, [['xphone'], ['xpad']])
+        assert.checkLabels(graph, [['xphone'], ['xpad']]);
         assert.checkLegend(graph, ['Undefined', 'red']);
         assert.checkDatasets(graph, ['label', 'data'], [
             {
@@ -936,7 +940,7 @@ QUnit.module('Views', {
         ]);
 
         await testUtils.dom.click(graph.$('.o_graph_button[data-mode=pie]'));
-        assert.checkLabels(graph, [['xphone', 'Undefined'], ['xphone', 'red'], ['xpad', 'Undefined']])
+        assert.checkLabels(graph, [['xphone', 'Undefined'], ['xphone', 'red'], ['xpad', 'Undefined']]);
         assert.checkLegend(graph, ['xphone/Undefined', 'xphone/red', 'xpad/Undefined']);
         assert.checkDatasets(graph, ['label', 'data'], {
                 label: '',
@@ -1015,7 +1019,7 @@ QUnit.module('Views', {
                     if (exhaustiveTest) {
                         i++;
                     } else {
-                        i += Math.floor(1 + Math.random() * 20)
+                        i += Math.floor(1 + Math.random() * 20);
                     }
                     yield combination;
                 }
@@ -1033,7 +1037,7 @@ QUnit.module('Views', {
                                 self.combinationsToCheck[combination].errorMessage
                             );
                         } else {
-                            assert.checkLabels(graph, self.combinationsToCheck[combination].labels)
+                            assert.checkLabels(graph, self.combinationsToCheck[combination].labels);
                             assert.checkLegend(graph, self.combinationsToCheck[combination].legend);
                             assert.checkDatasets(graph, ['label', 'data'], self.combinationsToCheck[combination].datasets);
                         }
@@ -1041,76 +1045,62 @@ QUnit.module('Views', {
                 }
             };
 
+            const GROUPBY_NAMES = ['Date', 'Bar', 'Product', 'Color'];
+
             // time range menu is assumed to be closed
             this.selectTimeRanges = async function (timeRangeOption, comparisonTimeRangeOption) {
                 comparisonTimeRangeOption = comparisonTimeRangeOption || 'previous_period';
-                // open time range menu
-                await testUtils.dom.click($('.o_control_panel .o_time_range_menu_button'));
-                // select range
-                await testUtils.fields.editInput($('.o_control_panel .o_time_range_selector'), timeRangeOption);
-                // check checkbox 'Compare To'
-                if (!$('.o_control_panel .o_time_range_menu .o_comparison_checkbox').prop('checked')) {
-                    await testUtils.dom.click($('.o_control_panel .o_time_range_menu .o_comparison_checkbox'));
+                await cpHelpers.toggleTimeRangeMenu(document);
+                await cpHelpers.selectRange(document, timeRangeOption);
+                if (!document.querySelector('div.o_time_range_section input').checked) {
+                    await cpHelpers.toggleTimeRangeMenuBox(document);
                 }
-                // select 'Previous period' or 'Previous year' acording to comparisonTimeRangeOption
-                await testUtils.fields.editInput($('.o_control_panel .o_comparison_time_range_selector'), comparisonTimeRangeOption);
-                // Click on 'Apply' button
-                await testUtils.dom.click($('.o_control_panel .o_time_range_menu .o_apply_range'));
+                await cpHelpers.selectComparisonRange(document, comparisonTimeRangeOption);
+                await cpHelpers.applyTimeRange(document);
+                await cpHelpers.toggleTimeRangeMenu(document);
             };
 
             // groupby menu is assumed to be closed
             this.selectDateIntervalOption = async function (intervalOption) {
-                const self = this;
                 intervalOption = intervalOption || 'month';
+                const optionIndex = INTERVAL_OPTION_IDS.indexOf(intervalOption);
 
-                // open group by menu
-                await testUtils.dom.click($('.o_control_panel .o_dropdown span.fa-bars'));
-
+                await cpHelpers.toggleGroupByMenu(document);
                 let wasSelected = false;
                 if (this.keepFirst) {
-                    if ($('.o_control_panel .o_group_by_menu .o_menu_item:contains(Product) a').hasClass('selected')) {
+                    if (cpHelpers.isItemSelected(document, 2)) {
                         wasSelected = true;
-                        await testUtils.dom.click($('.o_control_panel .o_group_by_menu .o_menu_item:contains(Product)'));
+                        await cpHelpers.toggleMenuItem(document, 2);
                     }
                 }
-
-                // open option submenu
-                await testUtils.dom.click($('.o_control_panel .o_group_by_menu .o_menu_item:contains("Date")'));
-                // check interval option if not already selected
-                if (!$('.o_control_panel .o_group_by_menu .o_item_option[data-option_id="' + intervalOption + '"] a').hasClass('selected')) {
-                    await testUtils.dom.click($('.o_control_panel .o_group_by_menu .o_item_option[data-option_id="' + intervalOption + '"]'));
+                await cpHelpers.toggleMenuItem(document, 0);
+                if (!cpHelpers.isOptionSelected(document, 0, optionIndex)) {
+                    await cpHelpers.toggleMenuItemOption(document, 0, optionIndex);
                 }
-                await INTERVAL_OPTIONS.filter(oId => oId !== intervalOption).forEach(async function(oId) {
-                    if ($('.o_control_panel .o_group_by_menu .o_item_option[data-option_id="' + oId + '"] a').hasClass('selected')) {
-                        await testUtils.dom.click($('.o_control_panel .o_group_by_menu .o_item_option[data-option_id="' + oId + '"]'));
+                for (let i = 0; i < INTERVAL_OPTION_IDS.length; i++) {
+                    const oId = INTERVAL_OPTION_IDS[i];
+                    if (oId !== intervalOption && cpHelpers.isOptionSelected(document, 0, i)) {
+                        await cpHelpers.toggleMenuItemOption(document, 0, i);
                     }
-                });
+                }
 
                 if (this.keepFirst) {
-                    if (wasSelected && !$('.o_control_panel .o_group_by_menu .o_menu_item:contains(Product) a').hasClass('selected')) {
-                        await testUtils.dom.click($('.o_control_panel .o_group_by_menu .o_menu_item:contains(Product)'));
+                    if (wasSelected && !cpHelpers.isItemSelected(document, 2)) {
+                        await cpHelpers.toggleMenuItem(document, 2);
                     }
                 }
+                await cpHelpers.toggleGroupByMenu(document);
 
-                // close group by menu
-                await testUtils.dom.click($('.o_control_panel .o_dropdown span.fa-bars'));
             };
 
             // groupby menu is assumed to be closed
             this.selectGroupBy = async function (groupByName) {
-                // open group by menu
-                await testUtils.dom.click($('.o_control_panel .o_dropdown span.fa-bars'));
-                // check groupBy if not already selected
-                if (!$('.o_control_panel .o_group_by_menu .o_menu_item:contains(' + groupByName + ') a').hasClass('selected')) {
-                    await testUtils.dom.click($('.o_control_panel .o_group_by_menu .o_menu_item:contains(' + groupByName + ')'));
+                await cpHelpers.toggleGroupByMenu(document);
+                const index = GROUPBY_NAMES.indexOf(groupByName);
+                if (!cpHelpers.isItemSelected(document, index)) {
+                    await cpHelpers.toggleMenuItem(document, index);
                 }
-                // close group by menu
-                await testUtils.dom.click($('.o_control_panel .o_dropdown span.fa-bars'));
-            };
-            // groupby menu is assumed to be closed
-            this.unselectGroupBy = async function (groupByName) {
-                // check groupBy if already selected
-
+                await cpHelpers.toggleGroupByMenu(document);
             };
 
             this.setConfig = async function (combination) {
@@ -1121,7 +1111,7 @@ QUnit.module('Views', {
             };
 
             this.setMode = async function (mode) {
-                await testUtils.dom.click($('.o_control_panel .o_graph_button[data-mode=' + mode + ']'));
+                await testUtils.dom.click($(`.o_control_panel .o_graph_button[data-mode="${mode}"]`));
             };
 
             // // create an action manager to test the interactions with the search view
@@ -1148,7 +1138,7 @@ QUnit.module('Views', {
                     graph: {
                         additionalMeasures: ['product_id'],
                     }
-                }
+                },
             });
         },
         afterEach: function () {
diff --git a/addons/web/static/tests/views/kanban_tests.js b/addons/web/static/tests/views/kanban_tests.js
index 47c3862ba8f..9adc2f00069 100644
--- a/addons/web/static/tests/views/kanban_tests.js
+++ b/addons/web/static/tests/views/kanban_tests.js
@@ -14,6 +14,7 @@ var widgetRegistry = require('web.widget_registry');
 
 var makeTestPromise = testUtils.makeTestPromise;
 var nextTick = testUtils.nextTick;
+const cpHelpers = testUtils.controlPanel;
 var createView = testUtils.createView;
 
 QUnit.module('Views', {
@@ -345,10 +346,9 @@ QUnit.module('Views', {
                     '</t></templates></kanban>',
             groupBy: ['bar'],
         });
-        await kanban.renderPager();
 
-        assert.isNotVisible(kanban.pager.$el,
-                        "pager should be hidden in grouped kanban");
+        assert.containsNone(kanban, '.o_pager');
+
         kanban.destroy();
     });
 
@@ -369,9 +369,8 @@ QUnit.module('Views', {
             },
         });
 
-        assert.isVisible(kanban.pager.$el,
-                        "pager should be visible in ungrouped kanban");
-        assert.strictEqual(kanban.pager.state.size, 4, "pager's size should be 4");
+        assert.containsOnce(kanban, '.o_pager');
+        assert.strictEqual(cpHelpers.getPagerSize(kanban), "4", "pager's size should be 4");
         kanban.destroy();
     });
 
@@ -395,8 +394,8 @@ QUnit.module('Views', {
             },
         });
 
-        assert.strictEqual(kanban.pager.state.limit, 2, "pager's limit should be 2");
-        assert.strictEqual(kanban.pager.state.size, 4, "pager's size should be 4");
+        assert.strictEqual(cpHelpers.getPagerValue(kanban), "1-2", "pager's limit should be 2");
+        assert.strictEqual(cpHelpers.getPagerSize(kanban), "4", "pager's size should be 4");
         kanban.destroy();
     });
 
@@ -421,8 +420,8 @@ QUnit.module('Views', {
             },
         });
 
-        assert.strictEqual(kanban.pager.state.limit, 3, "pager's limit should be 3");
-        assert.strictEqual(kanban.pager.state.size, 4, "pager's size should be 4");
+        assert.strictEqual(cpHelpers.getPagerValue(kanban), "1-3", "pager's limit should be 3");
+        assert.strictEqual(cpHelpers.getPagerSize(kanban), "4", "pager's size should be 4");
         kanban.destroy();
     });
 
@@ -577,7 +576,7 @@ QUnit.module('Views', {
             },
         });
 
-        assert.containsOnce(kanban, '.o_cp_controller', 'should have one control panel');
+        assert.containsOnce(kanban, '.o_control_panel', 'should have one control panel');
         assert.containsOnce(kanban, '.o_kanban_group:first .o_kanban_record',
             "first column should contain one record");
 
@@ -589,7 +588,7 @@ QUnit.module('Views', {
             "should have a quick create element in the first column");
         assert.strictEqual($quickCreate.find('.o_form_view.o_xxs_form_view').length, 1,
             "should have rendered an XXS form view");
-        assert.containsOnce(kanban, '.o_cp_controller', 'should not have instantiated an extra control panel');
+        assert.containsOnce(kanban, '.o_control_panel', 'should not have instantiated an extra control panel');
         assert.strictEqual($quickCreate.find('input').length, 2,
             "should have two inputs");
         assert.strictEqual($quickCreate.find('.o_field_widget').length, 3,
@@ -1160,7 +1159,7 @@ QUnit.module('Views', {
                     assert.step('onchange');
                     if (shouldDelayOnchange) {
                         return Promise.resolve(prom).then(function () {
-                            return result
+                            return result;
                         });
                     }
                 }
@@ -1255,7 +1254,7 @@ QUnit.module('Views', {
                     assert.step('onchange');
                     if (shouldDelayOnchange) {
                         return Promise.resolve(prom).then(function () {
-                            return result
+                            return result;
                         });
                     }
                 }
@@ -4836,7 +4835,7 @@ QUnit.module('Views', {
                     '</t></templates>' +
                 '</kanban>',
             mockRPC: function (route, args) {
-                assert.step(route)
+                assert.step(route);
                 return this._super(route, args);
             },
         });
@@ -4971,12 +4970,12 @@ QUnit.module('Views', {
             mockRPC: function (route, args) {
                 if (route === '/web/dataset/call_kw/partner/action_archive') {
                     var partnerIDS = args.args[0];
-                    var records = this.data.partner.records
+                    var records = this.data.partner.records;
                     _.each(partnerIDS, function(partnerID) {
                         _.find(records, function (record) {
                             return record.id === partnerID;
                         }).active = false;
-                    })
+                    });
                     this.data.partner.records[0].active;
                     return Promise.resolve();
                 }
diff --git a/addons/web/static/tests/views/list_tests.js b/addons/web/static/tests/views/list_tests.js
index 19648bfb44b..b5ae51af648 100644
--- a/addons/web/static/tests/views/list_tests.js
+++ b/addons/web/static/tests/views/list_tests.js
@@ -15,11 +15,12 @@ var testUtils = require('web.test_utils');
 var widgetRegistry = require('web.widget_registry');
 var Widget = require('web.Widget');
 
+
 var _t = core._t;
+const cpHelpers = testUtils.controlPanel;
 var createActionManager = testUtils.createActionManager;
 var createView = testUtils.createView;
 
-
 QUnit.module('Views', {
     beforeEach: function () {
         this.data = {
@@ -178,20 +179,26 @@ QUnit.module('Views', {
     QUnit.test('list with delete="0"', async function (assert) {
         assert.expect(4);
 
-        var list = await createView({
+        const list = await createView({
             View: ListView,
             model: 'foo',
             data: this.data,
-            viewOptions: {hasSidebar: true},
+            viewOptions: {hasActionMenus: true},
             arch: '<tree delete="0"><field name="foo"/></tree>',
         });
 
-        assert.isNotVisible(list.sidebar.$el, 'sidebar should be invisible');
+
+        assert.containsNone(list.el, 'div.o_control_panel .o_cp_action_menus');
         assert.ok(list.$('tbody td.o_list_record_selector').length, 'should have at least one record');
 
         await testUtils.dom.click(list.$('tbody td.o_list_record_selector:first input'));
-        assert.isVisible(list.sidebar.$el, 'sidebar should be visible');
-        assert.notOk(list.sidebar.$('a:contains(Delete)').length, 'sidebar should not have Delete button');
+        assert.containsOnce(list.el, 'div.o_control_panel .o_cp_action_menus');
+        await cpHelpers.toggleActionMenu(list);
+        assert.deepEqual(
+            cpHelpers.getMenuItemTexts(list),
+            ['Export'],
+            'action menu should not have Delete button'
+        );
 
         list.destroy();
     });
@@ -203,7 +210,7 @@ QUnit.module('Views', {
             View: ListView,
             model: 'foo',
             data: this.data,
-            viewOptions: {hasSidebar: true},
+            viewOptions: {hasActionMenus: true},
             arch: '<tree editable="top" edit="0"><field name="foo"/></tree>',
         });
 
@@ -762,33 +769,31 @@ QUnit.module('Views', {
                 }
                 return this._super.apply(this,arguments);
             },
-            intercepts: {
-                load_filters: function (event) {
-                    return Promise.resolve([
-                        {
-                            context: "{}",
-                            domain: "[]",
-                            id: 7,
-                            is_default: true,
-                            name: "My favorite",
-                            sort: "[\"date asc\", \"foo desc\"]",
-                            user_id: [2, "Mitchell Admin"],
-                        }, {
-                            context: "{}",
-                            domain: "[]",
-                            id: 8,
-                            is_default: false,
-                            name: "My second favorite",
-                            sort: "[\"date desc\", \"foo asc\"]",
-                            user_id: [2, "Mitchell Admin"],
-                        }
-                    ]).then(event.data.on_success);
-                },
-            },
+            favoriteFilters : [
+                {
+                    context: "{}",
+                    domain: "[]",
+                    id: 7,
+                    is_default: true,
+                    name: "My favorite",
+                    sort: "[\"date asc\", \"foo desc\"]",
+                    user_id: [2, "Mitchell Admin"],
+                }, {
+                    context: "{}",
+                    domain: "[]",
+                    id: 8,
+                    is_default: false,
+                    name: "My second favorite",
+                    sort: "[\"date desc\", \"foo asc\"]",
+                    user_id: [2, "Mitchell Admin"],
+                }
+            ]
         });
 
-        await testUtils.dom.click(list.$('.o_control_panel .o_search_options button.o_favorites_menu_button'));
-        await testUtils.dom.click(list.$('.o_control_panel .o_search_options .o_favorites_menu .o_menu_item').eq(1));
+
+        await cpHelpers.toggleFavoriteMenu(list);
+        await cpHelpers.toggleMenuItem(list, "My second favorite");
+
         list.destroy();
     });
 
@@ -843,9 +848,10 @@ QUnit.module('Views', {
             assert.ok("list view should trigger 'open_record' event");
         });
 
-        testUtils.dom.click(list.$('tr td:not(.o_list_record_selector)').first());
+        await testUtils.dom.click(list.$('tr td:not(.o_list_record_selector)').first());
         list.update({groupBy: ['foo']});
         await testUtils.nextTick();
+
         assert.containsN(list, 'tr.o_group_header', 3, "list should be grouped");
         await testUtils.dom.click(list.$('th.o_group_name').first());
 
@@ -1007,11 +1013,13 @@ QUnit.module('Views', {
             domain: [['foo', '=', 'yop']],
         });
 
+
         assert.containsN(list, 'tbody tr', 4,
             "list should contain 4 rows");
         assert.containsOnce(list, '.o_data_row',
             "list should contain one record (and thus 3 empty rows)");
-        assert.strictEqual(list.pager.$('.o_pager_value').text(), '1-1',
+
+        assert.strictEqual(cpHelpers.getPagerValue(list), '1-1',
             "pager should be correct");
 
         await testUtils.dom.click(list.$buttons.find('.o_list_button_add'));
@@ -1020,7 +1028,7 @@ QUnit.module('Views', {
             "list should still contain 4 rows");
         assert.containsN(list, '.o_data_row', 2,
             "list should contain two record (and thus 2 empty rows)");
-        assert.strictEqual(list.pager.$('.o_pager_value').text(), '1-2',
+        assert.strictEqual(cpHelpers.getPagerValue(list), '1-2',
             "pager should be correct");
 
         await testUtils.dom.click(list.$buttons.find('.o_list_button_discard'));
@@ -1029,7 +1037,7 @@ QUnit.module('Views', {
             "list should still contain 4 rows");
         assert.containsOnce(list, '.o_data_row',
             "list should contain one record (and thus 3 empty rows)");
-        assert.strictEqual(list.pager.$('.o_pager_value').text(), '1-1',
+        assert.strictEqual(cpHelpers.getPagerValue(list), '1-1',
             "pager should be correct");
         assert.verifySteps(['destroy'],
             "should have destroyed the widget of the removed line");
@@ -1285,32 +1293,32 @@ QUnit.module('Views', {
             model: 'foo',
             data: this.data,
             groupBy: ['foo'],
-            viewOptions: {hasSidebar: true},
+            viewOptions: {hasActionMenus: true},
             arch: '<tree>' +
                     '<field name="foo"/>' +
                     '<field name="int_field" sum="Sum"/>' +
                 '</tree>',
         });
 
-        assert.isNotVisible(list.sidebar);
+        assert.containsNone(list.el, 'div.o_control_panel .o_cp_action_menus');
 
         // open blip grouping and check all lines
         await testUtils.dom.click(list.$('.o_group_header:contains("blip (2)")'));
         await testUtils.dom.click(list.$('.o_data_row:first input'));
-        assert.isVisible(list.sidebar);
+        assert.containsOnce(list.el, 'div.o_control_panel .o_cp_action_menus');
 
         // open yop grouping and verify blip are still checked
         await testUtils.dom.click(list.$('.o_group_header:contains("yop (1)")'));
         assert.containsOnce(list, '.o_data_row input:checked',
             "opening a grouping does not uncheck others");
-        assert.isVisible(list.sidebar);
+        assert.containsOnce(list.el, 'div.o_control_panel .o_cp_action_menus');
 
         // close and open blip grouping and verify blip are unchecked
         await testUtils.dom.click(list.$('.o_group_header:contains("blip (2)")'));
         await testUtils.dom.click(list.$('.o_group_header:contains("blip (2)")'));
         assert.containsNone(list, '.o_data_row input:checked',
             "opening and closing a grouping uncheck its elements");
-        assert.isNotVisible(list.sidebar);
+        assert.containsNone(list.el, 'div.o_control_panel .o_cp_action_menus');
 
         list.destroy();
     });
@@ -1599,10 +1607,9 @@ QUnit.module('Views', {
                 limit: 2,
             },
         });
-
         var widthPage1 = list.$(`th[data-name=foo]`)[0].offsetWidth;
 
-        await testUtils.dom.click(list.$('.o_pager_next'));
+        await cpHelpers.pagerNext(list);
 
         var widthPage2 = list.$(`th[data-name=foo]`)[0].offsetWidth;
         assert.ok(widthPage1 > widthPage2,
@@ -2477,19 +2484,20 @@ QUnit.module('Views', {
             View: ListView,
             model: 'foo',
             data: this.data,
-            viewOptions: {hasSidebar: true},
+            viewOptions: {hasActionMenus: true},
             arch: '<tree><field name="foo"/></tree>',
         });
 
-        assert.isNotVisible(list.sidebar.$el, 'sidebar should be invisible');
+
+        assert.containsNone(list.el, 'div.o_control_panel .o_cp_action_menus');
         assert.containsN(list, 'tbody td.o_list_record_selector', 4, "should have 4 records");
 
         await testUtils.dom.click(list.$('tbody td.o_list_record_selector:first input'));
 
-        assert.isVisible(list.sidebar.$el, 'sidebar should be visible');
+        assert.containsOnce(list.el, 'div.o_control_panel .o_cp_action_menus');
 
-        await testUtils.dom.click(list.sidebar.$('.o_dropdown_toggler_btn:contains(Action)'));
-        await testUtils.dom.click(list.sidebar.$('a:contains(Delete)'));
+        await cpHelpers.toggleActionMenu(list);
+        await cpHelpers.toggleMenuItem(list, "Delete");
         assert.hasClass($('body'),'modal-open', 'body should have modal-open clsss');
 
         await testUtils.dom.click($('body .modal button span:contains(Ok)'));
@@ -2508,7 +2516,7 @@ QUnit.module('Views', {
             View: ListView,
             model: 'foo',
             data: this.data,
-            viewOptions: {hasSidebar: true},
+            viewOptions: {hasActionMenus: true},
             arch: '<tree><field name="foo"/></tree>',
             mockRPC: function (route) {
                 assert.step(route);
@@ -2520,22 +2528,23 @@ QUnit.module('Views', {
             },
         });
 
-        assert.isNotVisible(list.sidebar.$el, 'sidebar should be invisible');
+
+        assert.containsNone(list.el, 'div.o_control_panel .o_cp_action_menus');
         assert.containsN(list, 'tbody td.o_list_record_selector', 4, "should have 4 records");
 
         await testUtils.dom.click(list.$('tbody td.o_list_record_selector:first input'));
 
-        assert.isVisible(list.sidebar.$el, 'sidebar should be visible');
+        assert.containsOnce(list.el, 'div.o_control_panel .o_cp_action_menus');
 
         assert.verifySteps(['/web/dataset/search_read']);
-        await testUtils.dom.click(list.sidebar.$('.o_dropdown_toggler_btn:contains(Action)'));
-        await testUtils.dom.click(list.sidebar.$('a:contains(Archive)'));
+        await cpHelpers.toggleActionMenu(list);
+        await cpHelpers.toggleMenuItem(list, "Archive");
         assert.strictEqual($('.modal').length, 1, 'a confirm modal should be displayed');
         await testUtils.dom.click($('.modal-footer .btn-secondary'));
         assert.containsN(list, 'tbody td.o_list_record_selector', 4, "still should have 4 records");
 
-        await testUtils.dom.click(list.sidebar.$('.o_dropdown_toggler_btn:contains(Action)'));
-        await testUtils.dom.click(list.sidebar.$('a:contains(Archive)'));
+        await cpHelpers.toggleActionMenu(list);
+        await cpHelpers.toggleMenuItem(list, "Archive");
         assert.strictEqual($('.modal').length, 1, 'a confirm modal should be displayed');
         await testUtils.dom.click($('.modal-footer .btn-primary'));
         assert.containsN(list, 'tbody td.o_list_record_selector', 3, "should have 3 records");
@@ -2559,10 +2568,10 @@ QUnit.module('Views', {
             },
         });
 
-        assert.isVisible(list.pager.$el, "pager should be visible");
-        assert.strictEqual(list.pager.state.size, 4, "pager's size should be 4");
+        assert.containsOnce(list.el, 'div.o_control_panel .o_cp_pager');
+        assert.strictEqual(cpHelpers.getPagerSize(list), "4", "pager's size should be 4");
         await list.update({ groupBy: ['bar']});
-        assert.strictEqual(list.pager.state.size, 2, "pager's size should be 2");
+        assert.strictEqual(cpHelpers.getPagerSize(list), "2", "pager's size should be 2");
         list.destroy();
     });
 
@@ -2803,8 +2812,7 @@ QUnit.module('Views', {
             res_id: 1,
         });
 
-        // Change page
-        await testUtils.dom.click(form.$('.o_field_widget[name=o2m] .o_pager_next'));
+        await cpHelpers.pagerNext('.o_field_widget[name=o2m]');
         assert.strictEqual(form.$('tbody tr:first').text(), 'Value 44',
             "record 44 should be first");
         assert.strictEqual(form.$('tbody tr:eq(4)').text(), 'Value 48',
@@ -3819,23 +3827,23 @@ QUnit.module('Views', {
                 limit: 3,
             },
         });
-
         var headerHeight = list.$('.o_group_header').css('height');
 
         // basic rendering checks
         await testUtils.dom.click(list.$('.o_group_header'));
         assert.strictEqual(list.$('.o_group_header').css('height'), headerHeight,
             "height of group header shouldn't have changed");
-        assert.hasClass(list.$('.o_group_header th:eq(1) > div'), 'o_pager',
+        assert.hasClass(list.$('.o_group_header th:eq(1) > nav'), 'o_pager',
             "last cell of open group header should have classname 'o_pager'");
-        assert.strictEqual(list.$('.o_group_header .o_pager_value').text(), '1-3',
+
+        assert.strictEqual(cpHelpers.getPagerValue('.o_group_header'), '1-3',
             "pager's value should be correct");
         assert.containsN(list, '.o_data_row', 3,
             "open group should display 3 records");
 
         // go to next page
-        await testUtils.dom.click(list.$('.o_group_header .o_pager_next'));
-        assert.strictEqual(list.$('.o_group_header .o_pager_value').text(), '4-4',
+        await cpHelpers.pagerNext('.o_group_header');
+        assert.strictEqual(cpHelpers.getPagerValue('.o_group_header'), '4-4',
             "pager's value should be correct");
         assert.containsOnce(list, '.o_data_row',
             "open group should display 1 record");
@@ -4109,14 +4117,14 @@ QUnit.module('Views', {
             "3rd row should be selected");
 
         // press enter in input
-        await testUtils.fields.triggerKeydown(list.$('tr.o_selected_row input'), 'enter');
+        await testUtils.fields.triggerKeydown(list.$('tr.o_selected_row input[name="foo"]'), 'enter');
         assert.hasClass(list.$('tr.o_data_row:eq(3)'),'o_selected_row',
             "4rd row should be selected");
         assert.doesNotHaveClass(list.$('tr.o_data_row:eq(2)'), 'o_selected_row',
             "3rd row should no longer be selected");
 
         // press enter on last row
-        await testUtils.fields.triggerKeydown(list.$('tr.o_selected_row input'), 'enter');
+        await testUtils.fields.triggerKeydown(list.$('tr.o_selected_row input[name="foo"]'), 'enter');
         assert.containsN(list, 'tr.o_data_row', 5, "should have created a 5th row");
 
         assert.verifySteps(['/web/dataset/search_read', '/web/dataset/call_kw/foo/default_get']);
@@ -4220,7 +4228,7 @@ QUnit.module('Views', {
     });
 
     QUnit.test('display toolbar', async function (assert) {
-        assert.expect(6);
+        assert.expect(2);
 
         var list = await createView({
             View: ListView,
@@ -4237,31 +4245,22 @@ QUnit.module('Views', {
                 print: [],
             },
             viewOptions: {
-                hasSidebar: true,
+                hasActionMenus: true,
             },
         });
 
-        var $printMenu = list.$('.o_cp_sidebar .o_dropdown:contains(Print)');
-        assert.isNotVisible($printMenu);
-        var $actionMenu = list.$('.o_cp_sidebar .o_dropdown:contains(Action)');
-        assert.isNotVisible($actionMenu);
 
-        testUtils.dom.click(list.$('.o_list_record_selector:first input'));
+        assert.containsNone(list.el, 'div.o_control_panel .o_cp_action_menus');
 
-        assert.isNotVisible($printMenu);
-        assert.isVisible($actionMenu);
+        await testUtils.dom.click(list.$('.o_list_record_selector:first input'));
 
-        testUtils.dom.click($actionMenu.find('button')); // open Action menu
-        assert.strictEqual($actionMenu.find('.dropdown-item').length, 3,
-            "there should be 3 actions");
-        var $customAction = $actionMenu.find('.dropdown-item:last');
-        assert.strictEqual($customAction.text().trim(), 'Action event',
-            "the custom action should have 'Action event' as name");
+        await cpHelpers.toggleActionMenu(list);
+        assert.deepEqual(cpHelpers.getMenuItemTexts(list), ['Export', 'Delete', 'Action event']);
 
         list.destroy();
     });
 
-    QUnit.test('execute a sidebar actions with correct params', async function (assert) {
+    QUnit.test('execute ActionMenus actions with correct params', async function (assert) {
         assert.expect(12);
 
         const list = await createView({
@@ -4285,39 +4284,40 @@ QUnit.module('Views', {
                 return this._super(...arguments);
             },
             viewOptions: {
-                hasSidebar: true,
+                hasActionMenus: true,
             },
         });
 
-        let $actionMenu = list.$('.o_cp_sidebar .o_dropdown:contains(Action)');
-        assert.isNotVisible($actionMenu);
+        assert.containsNone(list.el, 'div.o_control_panel .o_cp_action_menus');
+
         assert.containsN(list, '.o_data_row', 4);
 
         // select all records
         await testUtils.dom.click(list.$('thead .o_list_record_selector input'));
         assert.containsN(list, '.o_list_record_selector input:checked', 5);
 
-        assert.isVisible($actionMenu);
+        assert.containsOnce(list.el, 'div.o_control_panel .o_cp_action_menus');
 
-        await testUtils.dom.click($actionMenu.find('button')); // open Action menu
-        await testUtils.dom.click($actionMenu.find('.dropdown-item:contains(Custom Action)'));
+        await cpHelpers.toggleActionMenu(list);
+        await cpHelpers.toggleMenuItem(list, "Custom Action");
 
         // unselect first record (will unselect the thead checkbox as well)
         await testUtils.dom.click(list.$('tbody .o_list_record_selector:first input'));
         assert.containsN(list, '.o_list_record_selector input:checked', 3);
-        await testUtils.dom.click($actionMenu.find('button')); // open Action menu
-        await testUtils.dom.click($actionMenu.find('.dropdown-item:contains(Custom Action)'));
+        await cpHelpers.toggleActionMenu(list);
+        await cpHelpers.toggleMenuItem(list, "Custom Action");
 
         // add a domain and select first two records
         await list.reload({ domain: [['bar', '=', true]] });
         assert.containsN(list, '.o_data_row', 3);
         assert.containsNone(list, '.o_list_record_selector input:checked');
-        $actionMenu = list.$('.o_cp_sidebar .o_dropdown:contains(Action)');
+
         await testUtils.dom.click(list.$('tbody .o_list_record_selector:nth(0) input'));
         await testUtils.dom.click(list.$('tbody .o_list_record_selector:nth(1) input'));
         assert.containsN(list, '.o_list_record_selector input:checked', 2);
-        await testUtils.dom.click($actionMenu.find('button')); // open Action menu
-        await testUtils.dom.click($actionMenu.find('.dropdown-item:contains(Custom Action)'));
+
+        await cpHelpers.toggleActionMenu(list);
+        await cpHelpers.toggleMenuItem(list, "Custom Action");
 
         assert.verifySteps([
             '{"action_id":44,"context":{"active_id":1,"active_ids":[1,2,3,4],"active_model":"foo","select_all":true,"active_domain":[]}}',
@@ -4374,13 +4374,13 @@ QUnit.module('Views', {
         assert.hasClass(list.$('.o_data_row:first'), 'o_selected_row');
         assert.strictEqual(document.activeElement, list.$('.o_data_row:first .o_data_cell:first input')[0]);
 
-        // Press 'Tab' -> should go to next cell (still in first row)
-        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input'), 'tab');
+        // // Press 'Tab' -> should go to next cell (still in first row)
+        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input[name="foo"]'), 'tab');
         assert.hasClass(list.$('.o_data_row:first'), 'o_selected_row');
         assert.strictEqual(document.activeElement, list.$('.o_data_row:first .o_data_cell:last input')[0]);
 
-        // Press 'Tab' -> should go to next line (first cell)
-        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input'), 'tab');
+        // // Press 'Tab' -> should go to next line (first cell)
+        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input[name="int_field"]'), 'tab');
         assert.hasClass(list.$('.o_data_row:nth(1)'), 'o_selected_row');
         assert.strictEqual(document.activeElement, list.$('.o_data_row:nth(1) .o_data_cell:first input')[0]);
 
@@ -4507,13 +4507,13 @@ QUnit.module('Views', {
         // Press 'Tab' -> should go to next line
         // add a value in the cell because the Tab on an empty first cell would activate the next widget in the view
         await testUtils.fields.editInput(list.$('.o_selected_row input').eq(1), 11);
-        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input'), 'tab');
+        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input[name="display_name"]'), 'tab');
         assert.hasClass(list.$('.o_data_row:nth(3)'),'o_selected_row',
             "fourth row should be in edition");
 
         // Press 'Tab' -> should go back to first line as the create action isn't available
         await testUtils.fields.editInput(list.$('.o_selected_row input').eq(1), 11);
-        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input'), 'tab');
+        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input[name="display_name"]'), 'tab');
         assert.hasClass(list.$('.o_data_row:first'),'o_selected_row',
             "first row should be in edition");
 
@@ -6080,7 +6080,7 @@ QUnit.module('Views', {
             "the second row should be selected");
 
         // Keyboard navigation only interracts with selected elements
-        await testUtils.fields.triggerKeydown(list.$('tr.o_selected_row input.o_field_widget'), 'enter');
+        await testUtils.fields.triggerKeydown(list.$('tr.o_selected_row input.o_field_widget[name="int_field"]'), 'enter');
         assert.hasClass(list.$('.o_data_row:eq(3)'), 'o_selected_row',
             "the fourth row should be selected");
 
@@ -6493,7 +6493,7 @@ QUnit.module('Views', {
     });
 
     QUnit.test('use the limit attribute in arch', async function (assert) {
-        assert.expect(3);
+        assert.expect(4);
 
         var list = await createView({
             View: ListView,
@@ -6507,8 +6507,9 @@ QUnit.module('Views', {
             },
         });
 
-        assert.strictEqual(list.pager.$el.text().trim(), '1-2 / 4',
-            "pager should be correct");
+
+        assert.strictEqual(cpHelpers.getPagerValue(list), '1-2');
+        assert.strictEqual(cpHelpers.getPagerSize(list), '4');
 
         assert.containsN(list, '.o_data_row', 2,
             'should display 2 data rows');
@@ -6641,7 +6642,7 @@ QUnit.module('Views', {
                 return this._super.apply(this, arguments);
             },
             viewOptions: {
-                hasSidebar: true,
+                hasActionMenus: true,
             },
         });
         core.bus.on('clear_cache', list, assert.step.bind(assert, 'clear_cache'));
@@ -6658,8 +6659,8 @@ QUnit.module('Views', {
 
         // delete a record
         await testUtils.dom.click(list.$('.o_data_row:first .o_list_record_selector input'));
-        await testUtils.dom.click(list.sidebar.$('.o_dropdown_toggler_btn:contains(Action)'));
-        await testUtils.dom.click(list.sidebar.$('a:contains(Delete)'));
+        await cpHelpers.toggleActionMenu(list);
+        await cpHelpers.toggleMenuItem(list, "Delete");
         await testUtils.dom.click($('.modal-footer .btn-primary'));
 
         assert.verifySteps([
@@ -6696,23 +6697,21 @@ QUnit.module('Views', {
             },
         });
 
+
         // switch pages (should ask to scroll)
-        await testUtils.dom.click(list.pager.$('.o_pager_next'));
-        await testUtils.dom.click(list.pager.$('.o_pager_previous'));
+        await cpHelpers.pagerNext(list);
+        await cpHelpers.pagerPrevious(list);
         assert.verifySteps(['scroll', 'scroll'],
             "should ask to scroll when switching pages");
 
         // change the limit (should not ask to scroll)
-        await testUtils.dom.click(list.pager.$('.o_pager_value'));
-        await testUtils.fields.editAndTrigger(list.pager.$('.o_pager_value input'),
-            '1-2', ['blur']);
-        assert.strictEqual(list.pager.$('.o_pager_value').text(), '1-2',
-            "should have changed the limit");
-
+        await cpHelpers.setPagerValue(list, '1-2');
+        await testUtils.nextTick();
+        assert.strictEqual(cpHelpers.getPagerValue(list), '1-2');
         assert.verifySteps([], "should not ask to scroll when changing the limit");
 
         // switch pages again (should still ask to scroll)
-        await testUtils.dom.click(list.pager.$('.o_pager_next'));
+        await cpHelpers.pagerNext(list);
 
         assert.verifySteps(['scroll'], "this is still working after a limit change");
 
@@ -6895,9 +6894,9 @@ QUnit.module('Views', {
 
         assert.containsN(list, '.o_group_header', 3); // page 1
         assert.containsNone(list, '.o_data_row');
-        assert.containsOnce(list, '.o_pager_counter'); // has a pager
+        assert.containsOnce(list, '.o_pager'); // has a pager
 
-        await testUtils.dom.click(list.$('.o_pager_next')); // switch to page 2
+        await cpHelpers.pagerNext(list); // switch to page 2
 
         assert.containsN(list, '.o_group_header', 1); // page 2
         assert.containsNone(list, '.o_data_row');
@@ -6986,9 +6985,9 @@ QUnit.module('Views', {
 
         assert.containsN(list, '.o_group_header', 10); // page 1
         assert.containsN(list, '.o_data_row', 11); // one group contains two records
-        assert.containsOnce(list, '.o_pager_counter'); // has a pager
+        assert.containsOnce(list, '.o_pager'); // has a pager
 
-        await testUtils.dom.click(list.$('.o_pager_next')); // switch to page 2
+        await cpHelpers.pagerNext(list); // switch to page 2
 
         assert.containsN(list, '.o_group_header', 7); // page 2
         assert.containsN(list, '.o_data_row', 7);
@@ -7044,8 +7043,8 @@ QUnit.module('Views', {
         assert.containsN(actionManager, '.o_group_header', 1); // page 2
 
         // toggle a filter -> there should be only one group left (on page 1)
-        await testUtils.dom.click(actionManager.$('.o_control_panel .o_search_options .o_filters_menu_button'));
-        await testUtils.dom.click(actionManager.$('.o_control_panel .o_search_options .o_filters_menu .o_menu_item:first'));
+        await cpHelpers.toggleFilterMenu(actionManager);
+        await cpHelpers.toggleMenuItem(actionManager, 0);
 
         assert.strictEqual(actionManager.$('.o_pager_counter').text().trim(), '1-1 / 1');
         assert.containsN(actionManager, '.o_group_header', 1); // page 1
@@ -7314,19 +7313,19 @@ QUnit.module('Views', {
         assert.hasClass(list.$('.o_data_row:first'), 'o_selected_row');
 
         // Press 'Tab' -> should go to next line (still in first group)
-        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input'), 'tab');
+        await testUtils.fields.triggerKeydown(list.$('.o_selected_row .o_input'), 'tab');
         assert.hasClass(list.$('.o_data_row:nth(1)'), 'o_selected_row');
 
         // Press 'Tab' -> should go to next line (still in first group)
-        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input'), 'tab');
+        await testUtils.fields.triggerKeydown(list.$('.o_selected_row .o_input'), 'tab');
         assert.hasClass(list.$('.o_data_row:nth(2)'), 'o_selected_row');
 
         // Press 'Tab' -> should go to first line of next group
-        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input'), 'tab');
+        await testUtils.fields.triggerKeydown(list.$('.o_selected_row .o_input'), 'tab');
         assert.hasClass(list.$('.o_data_row:nth(3)'), 'o_selected_row');
 
         // Press 'Tab' -> should go back to first line of first group
-        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input'), 'tab');
+        await testUtils.fields.triggerKeydown(list.$('.o_selected_row .o_input'), 'tab');
         assert.hasClass(list.$('.o_data_row:first'), 'o_selected_row');
 
         list.destroy();
@@ -7354,19 +7353,19 @@ QUnit.module('Views', {
         assert.hasClass(list.$('.o_data_row:first'), 'o_selected_row');
 
         // Press 'Tab' -> should go to next line (still in first group)
-        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input'), 'tab');
+        await testUtils.fields.triggerKeydown(list.$('.o_selected_row .o_input'), 'tab');
         assert.hasClass(list.$('.o_data_row:nth(1)'), 'o_selected_row');
 
         // Press 'Tab' -> should go to next line (still in first group)
-        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input'), 'tab');
+        await testUtils.fields.triggerKeydown(list.$('.o_selected_row .o_input'), 'tab');
         assert.hasClass(list.$('.o_data_row:nth(2)'), 'o_selected_row');
 
         // Press 'Tab' -> should go to first line of next group
-        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input'), 'tab');
+        await testUtils.fields.triggerKeydown(list.$('.o_selected_row .o_input'), 'tab');
         assert.hasClass(list.$('.o_data_row:nth(3)'), 'o_selected_row');
 
         // Press 'Tab' -> should go back to first line of first group
-        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input'), 'tab');
+        await testUtils.fields.triggerKeydown(list.$('.o_selected_row .o_input'), 'tab');
         assert.hasClass(list.$('.o_data_row:first'), 'o_selected_row');
 
         list.destroy();
@@ -7394,19 +7393,19 @@ QUnit.module('Views', {
         assert.hasClass(list.$('.o_data_row:first'), 'o_selected_row');
 
         // Press 'Tab' -> should go to next line (still in first group)
-        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input'), 'tab');
+        await testUtils.fields.triggerKeydown(list.$('.o_selected_row .o_input'), 'tab');
         assert.hasClass(list.$('.o_data_row:nth(1)'), 'o_selected_row');
 
         // Press 'Tab' -> should go to next line (still in first group)
-        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input'), 'tab');
+        await testUtils.fields.triggerKeydown(list.$('.o_selected_row .o_input'), 'tab');
         assert.hasClass(list.$('.o_data_row:nth(2)'), 'o_selected_row');
 
         // Press 'Tab' -> should go to first line of next group
-        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input'), 'tab');
+        await testUtils.fields.triggerKeydown(list.$('.o_selected_row .o_input'), 'tab');
         assert.hasClass(list.$('.o_data_row:nth(3)'), 'o_selected_row');
 
         // Press 'Tab' -> should go back to first line of first group
-        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input'), 'tab');
+        await testUtils.fields.triggerKeydown(list.$('.o_selected_row .o_input'), 'tab');
         assert.hasClass(list.$('.o_data_row:first'), 'o_selected_row');
 
         list.destroy();
@@ -7550,20 +7549,20 @@ QUnit.module('Views', {
         await testUtils.fields.editInput(list.$('.o_selected_row input[name="foo"]'), 'new value');
 
         // Press 'Tab' -> should create a new record as we edited the previous one
-        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input'), 'tab');
+        await testUtils.fields.triggerKeydown(list.$('.o_selected_row .o_input'), 'tab');
         assert.containsN(list, '.o_data_row', 5);
         assert.hasClass(list.$('.o_data_row:nth(3)'), 'o_selected_row');
 
         // fill foo field for the new record and press 'tab' -> should create another record
         await testUtils.fields.editInput(list.$('.o_selected_row input[name="foo"]'), 'new record');
-        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input'), 'tab');
+        await testUtils.fields.triggerKeydown(list.$('.o_selected_row .o_input'), 'tab');
 
         assert.containsN(list, '.o_data_row', 6);
         assert.hasClass(list.$('.o_data_row:nth(4)'), 'o_selected_row');
 
         // leave this new row empty and press tab -> should discard the new record and move to the
         // next group
-        await testUtils.fields.triggerKeydown(list.$('.o_selected_row input'), 'tab');
+        await testUtils.fields.triggerKeydown(list.$('.o_selected_row .o_input'), 'tab');
         assert.containsN(list, '.o_data_row', 5);
         assert.hasClass(list.$('.o_data_row:nth(4)'), 'o_selected_row');
 
@@ -7637,13 +7636,13 @@ QUnit.module('Views', {
         assert.hasClass(list.$('tr.o_data_row:eq(1)'), 'o_selected_row');
 
         // press enter in input should move to next record
-        await testUtils.fields.triggerKeydown(list.$('tr.o_selected_row input'), 'enter');
+        await testUtils.fields.triggerKeydown(list.$('tr.o_selected_row .o_input'), 'enter');
 
         assert.hasClass(list.$('tr.o_data_row:eq(2)'), 'o_selected_row');
         assert.doesNotHaveClass(list.$('tr.o_data_row:eq(1)'), 'o_selected_row');
 
         // press enter on last row should create a new record
-        await testUtils.fields.triggerKeydown(list.$('tr.o_selected_row input'), 'enter');
+        await testUtils.fields.triggerKeydown(list.$('tr.o_selected_row .o_input'), 'enter');
 
         assert.containsN(list, 'tr.o_data_row', 5);
         assert.hasClass(list.$('tr.o_data_row:eq(3)'), 'o_selected_row');
@@ -7680,13 +7679,13 @@ QUnit.module('Views', {
         assert.hasClass(list.$('tr.o_data_row:eq(1)'), 'o_selected_row');
 
         // press enter in input should move to next record
-        await testUtils.fields.triggerKeydown(list.$('tr.o_selected_row input'), 'enter');
+        await testUtils.fields.triggerKeydown(list.$('tr.o_selected_row .o_input'), 'enter');
 
         assert.hasClass(list.$('tr.o_data_row:eq(2)'), 'o_selected_row');
         assert.doesNotHaveClass(list.$('tr.o_data_row:eq(1)'), 'o_selected_row');
 
         // press enter on last row should move to first record of next group
-        await testUtils.fields.triggerKeydown(list.$('tr.o_selected_row input'), 'enter');
+        await testUtils.fields.triggerKeydown(list.$('tr.o_selected_row .o_input'), 'enter');
 
         assert.hasClass(list.$('tr.o_data_row:eq(3)'), 'o_selected_row');
         assert.doesNotHaveClass(list.$('tr.o_data_row:eq(2)'), 'o_selected_row');
@@ -7722,13 +7721,13 @@ QUnit.module('Views', {
         assert.hasClass(list.$('tr.o_data_row:eq(1)'), 'o_selected_row');
 
         // press enter in input should move to next record
-        await testUtils.fields.triggerKeydown(list.$('tr.o_selected_row input'), 'enter');
+        await testUtils.fields.triggerKeydown(list.$('tr.o_selected_row .o_input'), 'enter');
 
         assert.hasClass(list.$('tr.o_data_row:eq(2)'), 'o_selected_row');
         assert.doesNotHaveClass(list.$('tr.o_data_row:eq(1)'), 'o_selected_row');
 
         // press enter on last row should move to first record of next group
-        await testUtils.fields.triggerKeydown(list.$('tr.o_selected_row input'), 'enter');
+        await testUtils.fields.triggerKeydown(list.$('tr.o_selected_row .o_input'), 'enter');
 
         assert.hasClass(list.$('tr.o_data_row:eq(3)'), 'o_selected_row');
         assert.doesNotHaveClass(list.$('tr.o_data_row:eq(2)'), 'o_selected_row');
diff --git a/addons/web/static/tests/views/pivot_tests.js b/addons/web/static/tests/views/pivot_tests.js
index 8ab46a0ca8d..0d17797ad74 100644
--- a/addons/web/static/tests/views/pivot_tests.js
+++ b/addons/web/static/tests/views/pivot_tests.js
@@ -3,11 +3,11 @@ odoo.define('web.pivot_tests', function (require) {
 
 var core = require('web.core');
 var PivotView = require('web.PivotView');
-var PivotRenderer = require('web.PivotRenderer');
 var testUtils = require('web.test_utils');
 var testUtilsDom = require('web.test_utils_dom');
 
 var _t = core._t;
+const cpHelpers = testUtils.controlPanel;
 var createActionManager = testUtils.createActionManager;
 var createView = testUtils.createView;
 var patchDate = testUtils.mock.patchDate;
@@ -388,10 +388,9 @@ QUnit.module('Views', {
 
         var unpatchDate = patchDate(2016, 11, 20, 1, 0, 0);
         var context = {
-            timeRangeMenuData: {
-                timeRange: ["&",["date",">=","2016-12-01"],["date","<","2017-01-01"]],
-                timeRangeDescription: 'This Month',
-                comparisonTimeRange: [],
+            time_ranges: {
+                field: 'date',
+                range: 'this_month'
             }
         };
         var pivot = await createView({
@@ -411,7 +410,7 @@ QUnit.module('Views', {
             viewOptions: {
                 context: context,
                 title: 'Partners',
-            }
+            },
         });
 
         assert.hasClass(pivot.$('table'), 'o_enable_linking',
@@ -433,11 +432,10 @@ QUnit.module('Views', {
         this.data.partner.records[3].date = '2016-11-03';
 
         var context = {
-            timeRangeMenuData: {
-                timeRange: ["&",["date",">=","2016-12-01"],["date","<","2017-01-01"]],
-                timeRangeDescription: 'This Month',
-                comparisonTimeRange: ["&",["date",">=","2016-11-01"],["date","<","2017-12-01"]],
-                comparisonTimeRangeDescription: 'Previous Period'
+            time_ranges: {
+                field: 'date',
+                range: 'this_month',
+                comparisonRange: 'previous_period',
             }
         };
 
@@ -470,7 +468,7 @@ QUnit.module('Views', {
             viewOptions: {
                 context: context,
                 title: 'Partners',
-            }
+            },
         });
         assert.hasClass(pivot.$('table'), 'o_enable_linking',
             "root node should have classname 'o_enable_linking'");
@@ -1945,7 +1943,7 @@ QUnit.module('Views', {
     });
 
     QUnit.test('rendering of pivot view with comparison', async function (assert) {
-        assert.expect(7);
+        assert.expect(8);
 
         this.data.partner.records[0].date = '2016-12-15';
         this.data.partner.records[1].date = '2016-12-17';
@@ -1966,31 +1964,40 @@ QUnit.module('Views', {
             viewOptions: {
                 additionalMeasures: ['product_id'],
             },
-            intercepts: {
-                create_filter: function (ev) {
-                    var data = ev.data;
-                    assert.deepEqual(data.filter.context.timeRangeMenuData, {
-                        timeRange: ["&", ["date", ">=", "2016-12-01"], ["date", "<", "2017-01-01"]],
-                        timeRangeDescription: 'This Month',
-                        comparisonTimeRange: ["&", ["date", ">=", "2016-11-01"], ["date", "<", "2016-12-01"]],
-                        comparisonTimeRangeDescription: 'Previous Period',
-                    });
+            mockRPC: function () {
+                return this._super.apply(this, arguments);
+            },
+            env: {
+                dataManager: {
+                    create_filter: async function (filter) {
+                        assert.deepEqual(filter.context, {
+                            pivot_measures: ['__count'],
+                            pivot_column_groupby: [],
+                            pivot_row_groupby: ['product_id'],
+                            group_by: [],
+                            time_ranges: {
+                                field: 'date',
+                                range: 'this_month',
+                                comparisonRange: 'previous_period',
+                            }
+                        })
+                    }
                 }
             },
         });
 
+
         // with no data
-        await testUtils.dom.click(pivot.$('.o_time_range_menu_button'));
-        await testUtils.dom.click(pivot.$('.o_time_range_menu .o_comparison_checkbox'));
-        pivot.$('.o_time_range_selector').val('today');
-        await testUtils.dom.click(pivot.$('.o_time_range_menu .o_apply_range'));
+        await cpHelpers.toggleTimeRangeMenu(pivot);
+        await cpHelpers.toggleTimeRangeMenuBox(pivot);
+        await cpHelpers.selectRange(pivot, 'today');
+        await cpHelpers.applyTimeRange(pivot);
 
         assert.strictEqual(pivot.$('.o_pivot p.o_view_nocontent_empty_folder').length, 1);
 
         // with data, no row groupby
-        await testUtils.dom.click(pivot.$('.o_time_range_menu_button'));
-        pivot.$('.o_time_range_selector').val('this_month');
-        await testUtils.dom.click(pivot.$('.o_time_range_menu .o_apply_range'));
+        await cpHelpers.selectRange(pivot, 'this_month');
+        await cpHelpers.applyTimeRange(pivot);
         assert.containsN(pivot, '.o_pivot thead tr:last th', 9,
             "last header row should contains 9 cells (3*[This month, Previous Period, Variation]");
         var values = [
@@ -2035,11 +2042,10 @@ QUnit.module('Views', {
         ];
         assert.strictEqual(getCurrentValues(pivot), values.join());
 
-        pivot.$('.o_search_options button:contains("Favorites")').click();
-        var $favorites = pivot.$('.dropdown-menu.o_favorites_menu');
-        $favorites.find('a.o_save_search').click();
-        $favorites.find('.o_input').val('Fav').trigger('input');
-        $favorites.find('button').click();
+        await cpHelpers.toggleFavoriteMenu(pivot);
+        await cpHelpers.toggleSaveFavorite(pivot);
+        await cpHelpers.editFavoriteName(pivot, 'Fav');
+        await cpHelpers.saveFavorite(pivot);
 
         unpatchDate();
         pivot.destroy();
@@ -2093,14 +2099,15 @@ QUnit.module('Views', {
             },
         });
 
+
         // open time range menu
-        await testUtils.dom.click(pivot.$('.o_control_panel .o_time_range_menu_button'));
+        await cpHelpers.toggleTimeRangeMenu(pivot);
         // select 'Today' as range
-        pivot.$('.o_control_panel .o_time_range_selector').val('today');
+        await cpHelpers.selectRange(pivot, 'today');
         // check checkbox 'Compare To'
-        await testUtils.dom.click(pivot.$('.o_control_panel .o_time_range_menu .o_comparison_checkbox'));
+        await cpHelpers.toggleTimeRangeMenuBox(pivot);
         // Click on 'Apply' button
-        await testUtils.dom.click(pivot.$('.o_control_panel .o_time_range_menu .o_apply_range'));
+        await cpHelpers.applyTimeRange(pivot);
 
         // the time range menu configuration is by now: Date, Today, checkbox checked, Previous Period
         // With the data above, the time ranges contain no record.
@@ -2109,13 +2116,11 @@ QUnit.module('Views', {
         // are deactivated (exception: the 'Measures' button).
         assert.ok(pivot.$('.o_control_panel button.o_pivot_download').prop('disabled'));
 
-        // open time range menu
-        await testUtils.dom.click(pivot.$('.o_control_panel .o_time_range_menu_button'));
         // select 'This Month' as date range
-        pivot.$('.o_control_panel .o_time_range_selector').val('this_month');
+        await cpHelpers.selectRange(pivot, 'this_month');
 
         // Click on 'Apply' button
-        await testUtils.dom.click(pivot.$('.o_control_panel .o_time_range_menu .o_apply_range'));
+        await cpHelpers.applyTimeRange(pivot);
         // the time range menu configuration is by now: Date, This Month, checkbox checked, Previous Period
         // With the data above, the time ranges contain some records.
         // export data. Should execute 'get_file'
@@ -2177,11 +2182,12 @@ QUnit.module('Views', {
 
         mockMock = true;
 
+
         // activate 'This Month' and 'Previous Period' in time range menu
-        await testUtils.dom.click(pivot.$('.o_control_panel .o_time_range_menu_button'));
-        pivot.$('.o_control_panel .o_time_range_selector').val('this_month');
-        await testUtils.dom.click(pivot.$('.o_control_panel .o_time_range_menu .o_comparison_checkbox'));
-        await testUtils.dom.click(pivot.$('.o_control_panel .o_time_range_menu .o_apply_range'));
+        await cpHelpers.toggleTimeRangeMenu(pivot);
+        await cpHelpers.selectRange(pivot, 'this_month');
+        await cpHelpers.toggleTimeRangeMenuBox(pivot);
+        await cpHelpers.applyTimeRange(pivot);
 
         var values = [
             "4", "0", "100%",
@@ -2219,16 +2225,12 @@ QUnit.module('Views', {
             },
         });
 
+
         // enable comparison mode
-        var $cp = pivot.$('.o_control_panel');
-        // open time range menu
-        await testUtils.dom.click($cp.find('.o_time_range_menu_button'));
-        // select 'This month' as range
-        await testUtils.fields.editInput($cp.find('.o_time_range_selector'), 'this_month');
-        // check checkbox 'Compare To'
-        await testUtils.dom.click($cp.find('.o_time_range_menu .o_comparison_checkbox'));
-        // click on 'Apply' button
-        await testUtils.dom.click($cp.find('.o_time_range_menu .o_apply_range'));
+        await cpHelpers.toggleTimeRangeMenu(pivot);
+        await cpHelpers.selectRange(pivot, 'this_month');
+        await cpHelpers.toggleTimeRangeMenuBox(pivot);
+        await cpHelpers.applyTimeRange(pivot);
 
         // initial sanity check
         var values = [
@@ -2303,6 +2305,7 @@ QUnit.module('Views', {
         assert.expect(16);
         // create an action manager to test the interactions with the search view
         var readGroupCount = 0;
+
         var actionManager = await createActionManager({
             data: this.data,
             archs: {
@@ -2322,9 +2325,9 @@ QUnit.module('Views', {
             mockRPC: function (route, args) {
                 if (args.method === 'read_group') {
                     assert.step('read_group');
-                    var domain = args.kwargs.domain;
+                    const domain = args.kwargs.domain;
                     if ([0,1].indexOf(readGroupCount) !== -1) {
-                        assert.deepEqual(domain, [], 'initial domain empty');
+                        assert.deepEqual(domain, [], 'domain empty');
                     } else if ([2,3,4,5].indexOf(readGroupCount) !== -1) {
                         assert.deepEqual(domain, [['foo', '=', 12]],
                             'domain conserved when back with breadcrumbs');
@@ -2333,12 +2336,12 @@ QUnit.module('Views', {
                 }
                 if (route === '/web/dataset/search_read') {
                     assert.step('search_read');
-                    var domain = args.domain;
+                    const domain = args.domain;
                     assert.deepEqual(domain, [['customer', '=', 1], ['foo', '=', 12]],
                         'list domain is correct');
                 }
                 return this._super.apply(this, arguments);
-            }
+            },
         });
 
         await actionManager.doAction({
@@ -2347,20 +2350,23 @@ QUnit.module('Views', {
             views: [[false, 'pivot']],
         });
 
-        await testUtilsDom.click(actionManager.$('.o_filters_menu_button'));
-        await testUtilsDom.click(actionManager.$('.o_menu_item:contains("Bayou")'));
 
-        await testUtilsDom.click(actionManager.$('.o_pivot_cell_value:nth(1)'))
+        await cpHelpers.toggleFilterMenu(actionManager);
+        await cpHelpers.toggleMenuItem(actionManager, 0);
+        await testUtils.nextTick();
+
+        await testUtilsDom.click(actionManager.$('.o_pivot_cell_value:nth(1)'));
+        await testUtils.nextTick();
 
         assert.containsOnce(actionManager, '.o_list_view');
 
-        await testUtilsDom.click(actionManager.$('.o_control_panel .breadcrumb-item:first() a'));
+        await testUtilsDom.click(actionManager.$('.o_control_panel ol.breadcrumb li.breadcrumb-item').eq(0));
 
         assert.verifySteps([
             'read_group', 'read_group',
             'read_group', 'read_group',
             'search_read',
-            'read_group', 'read_group'])
+            'read_group', 'read_group']);
         actionManager.destroy();
     });
 
@@ -2387,16 +2393,12 @@ QUnit.module('Views', {
             },
         });
 
+
         // enable comparison mode
-        var $cp = pivot.$('.o_control_panel');
-        // open time range menu
-        await testUtils.dom.click($cp.find('.o_time_range_menu_button'));
-        // select 'This month' as range
-        await testUtils.fields.editInput($cp.find('.o_time_range_selector'), 'this_month');
-        // check checkbox 'Compare To'
-        await testUtils.dom.click($cp.find('.o_time_range_menu .o_comparison_checkbox'));
-        // click on 'Apply' button
-        await testUtils.dom.click($cp.find('.o_time_range_menu .o_apply_range'));
+        await cpHelpers.toggleTimeRangeMenu(pivot);
+        await cpHelpers.selectRange(pivot, 'this_month');
+        await cpHelpers.toggleTimeRangeMenuBox(pivot);
+        await cpHelpers.applyTimeRange(pivot);
 
         // initial sanity check
         var values = [
@@ -2474,8 +2476,7 @@ QUnit.module('Views', {
             [
                 '', 'Total',                                                '',
                     '2016-12-15', '2016-12-17', '2016-11-22', '2016-11-03',
-            ].join('')
-            ,
+            ].join(''),
             "The col headers should be as expected"
         );
         assert.strictEqual(
@@ -2489,24 +2490,19 @@ QUnit.module('Views', {
             "The row headers should be as expected"
         );
 
+
         // enable comparison mode
-        var $cp = pivot.$('.o_control_panel');
-        // open time range menu
-        await testUtils.dom.click($cp.find('.o_time_range_menu_button'));
-        // select 'This month' as range
-        await testUtils.fields.editInput($cp.find('.o_time_range_selector'), 'this_month');
-        // check checkbox 'Compare To'
-        await testUtils.dom.click($cp.find('.o_time_range_menu .o_comparison_checkbox'));
-        // click on 'Apply' button
-        await testUtils.dom.click($cp.find('.o_time_range_menu .o_apply_range'));
+        await cpHelpers.toggleTimeRangeMenu(pivot);
+        await cpHelpers.selectRange(pivot, 'this_month');
+        await cpHelpers.toggleTimeRangeMenuBox(pivot);
+        await cpHelpers.applyTimeRange(pivot);
 
         assert.strictEqual(
             pivot.$('th').slice(0, 7).text(),
             [
                 '', 'Total',                                                '',
                     '2016-12-15', '2016-12-17', '2016-11-22', '2016-11-03',
-            ].join('')
-            ,
+            ].join(''),
             "The col headers should be as expected"
         );
         assert.strictEqual(
@@ -2551,10 +2547,10 @@ QUnit.module('Views', {
     QUnit.test('Does not identify "false" with false as keys when creating group trees', async function (assert) {
         assert.expect(2);
 
-        this.data.partner.fields['favorite_animal'] = {string: "Favorite animal", type: "char", store: true}
-        this.data.partner.records[0]['favorite_animal'] = 'Dog'
-        this.data.partner.records[1]['favorite_animal'] = 'false'
-        this.data.partner.records[2]['favorite_animal'] = 'Undefined'
+        this.data.partner.fields.favorite_animal = {string: "Favorite animal", type: "char", store: true};
+        this.data.partner.records[0].favorite_animal = 'Dog';
+        this.data.partner.records[1].favorite_animal = 'false';
+        this.data.partner.records[2].favorite_animal = 'Undefined';
 
         var unpatchDate = patchDate(2016, 11, 20, 1, 0, 0);
         var pivot = await createView({
@@ -2571,8 +2567,7 @@ QUnit.module('Views', {
             pivot.$('th').slice(0, 2).text(),
             [
                 '', 'Total',                                                '',
-            ].join('')
-            ,
+            ].join(''),
             "The col headers should be as expected"
         );
         assert.strictEqual(
@@ -2595,7 +2590,7 @@ QUnit.module('Views', {
     QUnit.test('group bys added via control panel and expand Header do not stack', async function (assert) {
         assert.expect(8);
 
-        delete this.data.partner.fields['date'];
+        delete this.data.partner.fields.date;
 
         var pivot = await createView({
             View: PivotView,
@@ -2624,11 +2619,11 @@ QUnit.module('Views', {
             "The row headers should be as expected"
         );
 
-        var $cp = pivot.$('.o_control_panel');
+
         // open group by menu and add new groupby
-        await testUtils.dom.click($cp.find('button span.fa-bars'));
-        await testUtils.dom.click($cp.find('button.o_add_custom_group'));
-        await testUtils.dom.click($cp.find('button.o_apply_group'));
+        await cpHelpers.toggleGroupByMenu(pivot);
+        await cpHelpers.toggleAddCustomGroup(pivot);
+        await cpHelpers.applyGroup(pivot);
 
         assert.strictEqual(
             pivot.$('th').slice(0, 2).text(),
@@ -2670,10 +2665,11 @@ QUnit.module('Views', {
             "The row headers should be as expected"
         );
 
-        // open group by menu and add new groupby
-        await testUtils.dom.click($cp.find('button span.fa-bars'));
-        await testUtils.dom.click($cp.find('button.o_add_custom_group'));
-        await testUtils.dom.click($cp.find('button.o_apply_group'));
+        // open groupby menu generator and add a new groupby
+        await cpHelpers.toggleGroupByMenu(pivot);
+        await cpHelpers.toggleAddCustomGroup(pivot);
+        await cpHelpers.selectGroup(pivot, 'bar');
+        await cpHelpers.applyGroup(pivot);
 
         assert.strictEqual(
             pivot.$('th').slice(0, 2).text(),
diff --git a/addons/web/static/tests/views/qweb_tests.js b/addons/web/static/tests/views/qweb_tests.js
index c7872690e49..19acf9b06c3 100644
--- a/addons/web/static/tests/views/qweb_tests.js
+++ b/addons/web/static/tests/views/qweb_tests.js
@@ -1,7 +1,6 @@
 odoo.define('web.qweb_view_tests', function (require) {
 "use strict";
 
-var qweb = require('web.qweb');
 var utils = require('web.test_utils');
 
 QUnit.module("Views", {
diff --git a/addons/web/static/tests/views/search_filter_menu_tests.js b/addons/web/static/tests/views/search_filter_menu_tests.js
deleted file mode 100644
index 62cfaccdc93..00000000000
--- a/addons/web/static/tests/views/search_filter_menu_tests.js
+++ /dev/null
@@ -1,206 +0,0 @@
-odoo.define('web.search_filters_menu_tests', function (require) {
-"use strict";
-
-var Domain = require('web.Domain');
-var FilterMenu = require('web.FilterMenu');
-var pyUtils = require('web.py_utils');
-var testUtils = require('web.test_utils');
-
-function createFilterMenu(filters, fields, params) {
-    params = params || {};
-    var target = params.debug ? document.body :  $('#qunit-fixture');
-    var menu = new FilterMenu(null, filters, fields);
-    testUtils.mock.addMockEnvironment(menu, params);
-    return menu.appendTo(target).then(function() {
-        return menu;
-    });
-}
-
-QUnit.module('FilterMenu', {
-    beforeEach: function () {
-        this.filters = [
-            {
-                isActive: false,
-                description: 'some filter',
-                domain: '',
-                groupNumber: 1,
-            },
-        ];
-        this.fields = {
-            boolean_field: {string: "Boolean Field", type: "boolean", default: true, searchable: true},
-            date_field: {string: "A date", type: "date", searchable: true},
-            char_field: {string: "Char Field", type: "char", default: "foo", searchable: true, trim: true},
-        };
-    },
-}, function () {
-
-    QUnit.test('simple rendering with no filter', async function (assert) {
-        assert.expect(3);
-
-        var filterMenu = await createFilterMenu([], this.fields);
-        await testUtils.dom.click(filterMenu.$('span.fa-filter'));
-        assert.containsNone(filterMenu, '.dropdown-divider');
-        assert.containsNone(filterMenu, '.o_add_filter_menu');
-        assert.containsOnce(filterMenu, '.o_add_custom_filter',
-            'should have one element: a add custom filter item');
-        filterMenu.destroy();
-    });
-
-    QUnit.test('simple rendering with a filter', async function (assert) {
-        assert.expect(2);
-
-        var filterMenu = await createFilterMenu(this.filters, this.fields);
-        assert.containsN(filterMenu, '.dropdown-divider, .dropdown-item, .o_add_custom_filter', 4,
-            'should have 4 elements: a hidden separator, a filter, a separator, a add custom filter item');
-        assert.containsOnce(filterMenu, '.o_add_custom_filter');
-        filterMenu.destroy();
-    });
-
-    QUnit.test('click on add custom filter opens the submenu', async function (assert) {
-        assert.expect(3);
-
-        var filterMenu = await createFilterMenu([], this.fields);
-        // open menu dropdown
-        await testUtils.dom.click(filterMenu.$('span.fa-filter'));
-        // open add custom filter submenu
-        await testUtils.dom.click(filterMenu.$('.o_add_custom_filter'));
-        assert.containsNone(filterMenu, '.dropdown-divider');
-        assert.isVisible(filterMenu.$('.o_add_filter_menu'));
-        assert.containsN(filterMenu, '.dropdown-item, .dropdown-item-text', 3,
-            'should have 3 elements: a add custom filter item, a proposition, a apply button + add condition button');
-
-        filterMenu.destroy();
-    });
-
-    QUnit.test('removing last prop disable the apply button', async function (assert) {
-        assert.expect(2);
-
-        var filterMenu = await createFilterMenu([], this.fields);
-        // open menu dropdown and custom filter submenu
-        await testUtils.dom.click(filterMenu.$('span.fa-filter'));
-        await testUtils.dom.click(filterMenu.$('.o_add_custom_filter'));
-
-        // remove the current unique proposition
-        await testUtils.dom.click(filterMenu.$('.o_searchview_extended_delete_prop'));
-
-        assert.containsNone(filterMenu, '.dropdown-divider');
-        assert.containsN(filterMenu, '.dropdown-item, .dropdown-item-text', 2,
-            'should have 2 elements: a add custom filter item, a apply button + add condition button');
-
-        filterMenu.destroy();
-    });
-
-    QUnit.test('readding a proposition reenable apply button', async function (assert) {
-        assert.expect(1);
-
-        var filterMenu = await createFilterMenu([], this.fields);
-        // open menu dropdown and custom filter submenu, remove existing prop
-        await testUtils.dom.click(filterMenu.$('span.fa-filter'));
-        await testUtils.dom.click(filterMenu.$('.o_add_custom_filter'));
-        await testUtils.dom.click(filterMenu.$('.o_searchview_extended_delete_prop'));
-        // read a proposition
-        await testUtils.dom.click(filterMenu.$('.o_add_condition'));
-        assert.ok(!filterMenu.$('.o_apply_filter').attr('disabled'));
-
-        filterMenu.destroy();
-    });
-
-    QUnit.test('adding a simple filter works', async function (assert) {
-        assert.expect(6);
-
-        delete this.fields.date_field;
-        var filterMenu = await createFilterMenu([], this.fields, {
-            intercepts: {
-                new_filters: function (ev) {
-                    var filter = ev.data.filters[0];
-                    assert.strictEqual(filter.type, 'filter');
-                    assert.strictEqual(filter.description, 'Boolean Field is true');
-                    assert.strictEqual(filter.domain, '[[\"boolean_field\",\"=\",True]]');
-                    filterMenu.update([{
-                        isActive: true,
-                        description: '?',
-                        domain: '?',
-                        groupNumber: 1,
-                    }]);
-                },
-            },
-        });
-        // open menu dropdown and custom filter submenu, remove existing prop
-        await testUtils.dom.click(filterMenu.$('span.fa-filter'));
-        await testUtils.dom.click(filterMenu.$('.o_add_custom_filter'));
-        // click on apply to activate filter
-        await testUtils.dom.click(filterMenu.$('.o_apply_filter'));
-        assert.containsNone(filterMenu, '.o_filter_condition');
-        assert.containsN(filterMenu, '.dropdown-divider', 2);
-        assert.isNotVisible(filterMenu.$('.dropdown-divider').eq(0));
-        filterMenu.destroy();
-    });
-
-    QUnit.test('commit search with an extended proposition with field char does not cause a crash', async function (assert) {
-        assert.expect(6);
-
-        this.fields = {many2one_field: {string: "Trululu", type: "many2one", relation: 'partner', selectable: true, searchable: true}};
-
-        var expectedDomains = [
-            [['many2one_field','ilike', `a`]],
-            [['many2one_field','ilike', `"a"`]],
-            [['many2one_field','ilike', `'a'`]],
-            [['many2one_field','ilike', `'`]],
-            [['many2one_field','ilike', `"`]],
-            [['many2one_field','ilike', `\\`]],
-        ];
-
-        var filterMenu = await createFilterMenu([], this.fields, {
-            intercepts: {
-                new_filters: function (ev) {
-                    var filter = ev.data.filters[0];
-                    // this step combine a tokenization/parsing followed by a string formatting
-                    var domain = pyUtils.assembleDomains([filter.domain]);
-                    domain = Domain.prototype.stringToArray(domain);
-                    assert.deepEqual(domain, expectedDomains.shift());
-                },
-            }
-        });
-
-        // open menu dropdown and custom filter submenu, select trululu field and enter string `a`, then click apply
-        await testUtils.dom.click(filterMenu.$('span.fa-filter'));
-        await testUtils.dom.click(filterMenu.$('.o_add_custom_filter'));
-        await testUtils.fields.editSelect(filterMenu.$('.o_filter_condition select.o_input.o_searchview_extended_prop_field'), 'many2one_field');
-        await testUtils.fields.editInput(filterMenu.$('.o_filter_condition .o_searchview_extended_prop_value input'), `a`);
-        await testUtils.dom.click(filterMenu.$('.o_apply_filter'));
-
-
-        // open custom filter submenu, select trululu field and enter string `"a"`, then click apply
-        await testUtils.dom.click(filterMenu.$('.o_add_custom_filter'));
-        await testUtils.fields.editSelect(filterMenu.$('.o_filter_condition select.o_input.o_searchview_extended_prop_field'), 'many2one_field');
-        await testUtils.fields.editInput(filterMenu.$('.o_filter_condition .o_searchview_extended_prop_value input'), `"a"`);
-        await testUtils.dom.click(filterMenu.$('.o_apply_filter'));
-
-        // open custom filter submenu, select trululu field and enter string `'a'`, then click apply
-        await testUtils.dom.click(filterMenu.$('.o_add_custom_filter'));
-        await testUtils.fields.editSelect(filterMenu.$('.o_filter_condition select.o_input.o_searchview_extended_prop_field'), 'many2one_field');
-        await testUtils.fields.editInput(filterMenu.$('.o_filter_condition .o_searchview_extended_prop_value input'), `'a'`);
-        await testUtils.dom.click(filterMenu.$('.o_apply_filter'));
-
-        // open custom filter submenu, select trululu field and enter string `'`, then click apply
-        await testUtils.dom.click(filterMenu.$('.o_add_custom_filter'));
-        await testUtils.fields.editSelect(filterMenu.$('.o_filter_condition select.o_input.o_searchview_extended_prop_field'), 'many2one_field');
-        await testUtils.fields.editInput(filterMenu.$('.o_filter_condition .o_searchview_extended_prop_value input'), `'`);
-        await testUtils.dom.click(filterMenu.$('.o_apply_filter'));
-
-        // open custom filter submenu, select trululu field and enter string `"`, then click apply
-        await testUtils.dom.click(filterMenu.$('.o_add_custom_filter'));
-        await testUtils.fields.editSelect(filterMenu.$('.o_filter_condition select.o_input.o_searchview_extended_prop_field'), 'many2one_field');
-        await testUtils.fields.editInput(filterMenu.$('.o_filter_condition .o_searchview_extended_prop_value input'), `"`);
-        await testUtils.dom.click(filterMenu.$('.o_apply_filter'));
-
-        // open custom filter submenu, select trululu field and enter string `\`, then click apply
-        await testUtils.dom.click(filterMenu.$('.o_add_custom_filter'));
-        await testUtils.fields.editSelect(filterMenu.$('.o_filter_condition select.o_input.o_searchview_extended_prop_field'), 'many2one_field');
-        await testUtils.fields.editInput(filterMenu.$('.o_filter_condition .o_searchview_extended_prop_value input'), `\\`);
-        await testUtils.dom.click(filterMenu.$('.o_apply_filter'));
-
-        filterMenu.destroy();
-    });
-});
-});
diff --git a/addons/web/static/tests/views/search_groupby_menu_tests.js b/addons/web/static/tests/views/search_groupby_menu_tests.js
deleted file mode 100644
index 6ff0e7eaf13..00000000000
--- a/addons/web/static/tests/views/search_groupby_menu_tests.js
+++ /dev/null
@@ -1,200 +0,0 @@
-odoo.define('web.search_groupby_menu_tests', function (require) {
-"use strict";
-
-var GroupByMenu = require('web.GroupByMenu');
-var testUtils = require('web.test_utils');
-var controlPanelViewParameters = require('web.controlPanelViewParameters');
-var INTERVAL_OPTIONS = controlPanelViewParameters.INTERVAL_OPTIONS;
-
-function createGroupByMenu(groupBys, fields, params) {
-    params = params || {};
-    var target = params.debug ? document.body :  $('#qunit-fixture');
-    var menu = new GroupByMenu(null, groupBys, fields);
-    testUtils.mock.addMockEnvironment(menu, params);
-    return menu.appendTo(target).then(function() {
-        return menu;
-    });
-}
-
-QUnit.module('GroupByMenu', {
-    beforeEach: function () {
-        this.groupBys = [
-            {
-                description: 'some group by',
-                groupNumber: 1,
-                isActive: false,
-            },
-        ];
-        this.fields = {
-            fieldName: {sortable: true, string: 'Super Date', type: 'date'}
-        };
-    },
-}, function () {
-
-    QUnit.test('simple rendering with no filter and no field', async function (assert) {
-        assert.expect(1);
-
-        var groupByMenu = await createGroupByMenu([], {});
-        // open groupBy menu
-        testUtils.dom.click(groupByMenu.$('button:first'));
-        assert.containsNone(groupByMenu, '.dropdown-divider, .dropdown-item, .dropdown-item-text',
-            'should have 0 element');
-
-        groupByMenu.destroy();
-    });
-
-    QUnit.test('simple rendering', async function (assert) {
-        assert.expect(2);
-
-        var groupByMenu = await createGroupByMenu(this.groupBys, this.fields);
-        // open groupBy menu
-        await testUtils.dom.click(groupByMenu.$('button:first'));
-        assert.containsN(groupByMenu, '.dropdown-divider, .dropdown-item', 4);
-        assert.strictEqual(groupByMenu.$('.o_menu_item').text().trim(), 'some group by',
-            'should have proper filter name');
-
-        groupByMenu.destroy();
-    });
-
-    QUnit.test('simple rendering with no filter but fields', async function (assert) {
-        assert.expect(1);
-
-        var groupByMenu = await createGroupByMenu(
-            [],
-            {fieldName: {sortable: true, string: 'Super Date', type: 'date'}}
-            );
-        await testUtils.nextTick();
-        await testUtils.dom.click(groupByMenu.$('button:first'));
-        assert.containsOnce(groupByMenu, '.dropdown-divider, .dropdown-item, .dropdown-item-text', 'should have 1 element');
-
-        groupByMenu.destroy();
-    });
-
-    QUnit.test('click on add custom group toggle group selector', async function (assert) {
-        assert.expect(2);
-
-        var groupByMenu = await createGroupByMenu([],
-            {fieldName: {sortable: true, string: 'Super Date', type: 'date'}}
-        );
-        await testUtils.dom.click(groupByMenu.$('button:first'));
-        var selector = groupByMenu.$('select.o_group_selector');
-        assert.ok(!selector.is(":visible"), 'should be invisible');
-        await testUtils.dom.click(groupByMenu.$('.o_add_custom_group'));
-        selector = groupByMenu.$('select.o_group_selector');
-        assert.ok(selector.is(":visible"), 'should be visible');
-
-        groupByMenu.destroy();
-    });
-
-    QUnit.test('select a groupBy of no date type in Add Custom Group menu add properly that groupBy to menu', async function (assert) {
-        assert.expect(6);
-
-        var groupByMenu = await createGroupByMenu(
-            [],
-            {
-                fieldName: {sortable: true, name: 'candlelight', string: 'Candlelight', type: 'boolean'},
-            },
-            {
-                intercepts: {
-                    new_groupBy: function (ev) {
-                        assert.strictEqual(ev.data.description, 'Candlelight');
-                        assert.strictEqual(ev.data.fieldName, 'fieldName');
-                        assert.strictEqual(ev.data.fieldType, 'boolean');
-                        assert.strictEqual(ev.data.type, 'groupBy');
-                        groupByMenu.update([{
-                            description: 'Candlelight',
-                            groupNumber: 1,
-                            isActive: true,
-                        }]);
-                    },
-                },
-            }
-        );
-        await testUtils.nextTick();
-        await testUtils.dom.click(groupByMenu.$('button:first'));
-        await testUtils.dom.click(groupByMenu.$('.o_add_custom_group'));
-        assert.strictEqual(groupByMenu.$('select').val(), 'fieldName',
-            'the select value should be "fieldName"');
-        await testUtils.dom.click(groupByMenu.$('button.o_apply_group'));
-        assert.containsOnce(groupByMenu, '.o_menu_item > .dropdown-item.selected', 'there should be a groupby selected');
-        groupByMenu.destroy();
-    });
-
-    QUnit.test('select a groupBy of date type in Add Custom Group menu add properly that groupBy to menu', async function (assert) {
-        assert.expect(13);
-
-        INTERVAL_OPTIONS = INTERVAL_OPTIONS.map(function (option) {
-            return _.extend(option, {description: option.description.toString()});
-        });
-
-        var groupByMenu = await createGroupByMenu(
-            [],
-            this.fields,
-            {
-                intercepts: {
-                    new_groupBy: function (ev) {
-                        assert.strictEqual(ev.data.description, 'Super Date');
-                        assert.strictEqual(ev.data.fieldName, 'fieldName');
-                        assert.strictEqual(ev.data.fieldType, 'date');
-                        assert.strictEqual(ev.data.type, 'groupBy');
-                        assert.strictEqual(ev.data.hasOptions, true);
-                        assert.deepEqual(ev.data.options, controlPanelViewParameters.INTERVAL_OPTIONS);
-                        assert.strictEqual(ev.data.defaultOptionId, controlPanelViewParameters.DEFAULT_INTERVAL);
-                        assert.strictEqual(ev.data.currentOptionIds.size, 0);
-                        groupByMenu.update([{
-                            description: 'Super Date',
-                            fieldName: 'fieldName',
-                            groupNumber: 1,
-                            isActive: true,
-                            hasOptions: true,
-                            options: controlPanelViewParameters.INTERVAL_OPTIONS,
-                            currentOptionIds: new Set([controlPanelViewParameters.DEFAULT_INTERVAL]),
-                        }]);
-                    },
-                },
-            }
-        );
-        // open groupBy menu
-        await testUtils.dom.click(groupByMenu.$('button:first'));
-        // open Add Custom Group submenu
-        await testUtils.dom.click(groupByMenu.$('.o_add_custom_group'));
-        // select fieldName
-        assert.strictEqual(groupByMenu.$('select').val(), 'fieldName',
-            'the select value should be "fieldName"');
-        // create new groupBy of type date
-        await testUtils.dom.click(groupByMenu.$('button.o_apply_group'));
-        assert.strictEqual(groupByMenu.$('.o_menu_item > .dropdown-item.selected').length, 1,
-            'there should be a groupby selected');
-        assert.strictEqual(groupByMenu.$('.o_menu_item .o_submenu_switcher').length, 1,
-            'there should be options available');
-        // open options submenu
-        await testUtils.dom.click(groupByMenu.$('.o_menu_item .o_submenu_switcher'));
-        assert.strictEqual(groupByMenu.$('.o_item_option').length, 5,
-            'there should be five options available');
-        assert.strictEqual(groupByMenu.$('.o_add_custom_group').length, 0,
-            'there should be no more a Add Custome Group submenu');
-
-        groupByMenu.destroy();
-    });
-
-    QUnit.test('custom group by dropdown should not have ID field', async function (assert) {
-        assert.expect(2);
-
-        this.fields.id = {sortable: true, string: 'ID', type: 'integer'};
-
-        var groupByMenu = await createGroupByMenu([], this.fields);
-        // open groupBy menu
-        await testUtils.dom.click(groupByMenu.$('button:first'));
-        // open Add Custom Group submenu
-        await testUtils.dom.click(groupByMenu.$('.o_add_custom_group'))
-
-        assert.containsOnce(groupByMenu, '.o_group_selector option',
-            'groupby menu should have only one option');
-        // custom group by should not have 'ID' field
-        assert.containsNone(groupByMenu, '.o_group_selector option[value="id"]',
-            'id field should not be in custom group by');
-
-        groupByMenu.destroy();
-    });
-});
-});
diff --git a/addons/web/static/tests/views/search_panel_tests.js b/addons/web/static/tests/views/search_panel_tests.js
index 632158d9b1e..11cf8b03513 100644
--- a/addons/web/static/tests/views/search_panel_tests.js
+++ b/addons/web/static/tests/views/search_panel_tests.js
@@ -7,6 +7,7 @@ var KanbanView = require('web.KanbanView');
 var RamStorage = require('web.RamStorage');
 var testUtils = require('web.test_utils');
 
+const cpHelpers = testUtils.controlPanel;
 var createActionManager = testUtils.createActionManager;
 var createView = testUtils.createView;
 
@@ -1396,7 +1397,7 @@ QUnit.module('Views', {
         ]);
 
         // go to page 2 (the domain doesn't change, so the filters should not be reloaded)
-        await testUtils.dom.click(kanban.$('.o_pager_next'));
+        await cpHelpers.pagerNext(kanban);
 
         assert.verifySteps([
             '/web/dataset/search_read',
@@ -1935,16 +1936,17 @@ QUnit.module('Views', {
             archs: this.archs,
             data: this.data,
         });
-
         await actionManager.doAction(1);
+
         assert.containsOnce(actionManager, '.o_content.o_controller_with_searchpanel .o_kanban_view');
         assert.containsOnce(actionManager, '.o_content.o_controller_with_searchpanel .o_search_panel');
 
-        await testUtils.dom.click(actionManager.$('.o_cp_switch_pivot'));
+        await cpHelpers.switchView(actionManager, 'pivot');
+        await testUtils.nextTick();
         assert.containsOnce(actionManager, '.o_content .o_pivot');
         assert.containsNone(actionManager, '.o_content .o_search_panel');
 
-        await testUtils.dom.click(actionManager.$('.o_cp_switch_list'));
+        await cpHelpers.switchView(actionManager, 'list');
         assert.containsOnce(actionManager, '.o_content.o_controller_with_searchpanel .o_list_view');
         assert.containsOnce(actionManager, '.o_content.o_controller_with_searchpanel .o_search_panel');
 
@@ -1972,16 +1974,16 @@ QUnit.module('Views', {
             archs: this.archs,
             data: this.data,
         });
-
         await actionManager.doAction(1);
+
         assert.containsOnce(actionManager, '.o_content.o_controller_with_searchpanel .o_kanban_view');
         assert.containsOnce(actionManager, '.o_content.o_controller_with_searchpanel .o_search_panel');
 
-        await testUtils.dom.click(actionManager.$('.o_cp_switch_list'));
+        await cpHelpers.switchView(actionManager, 'list');
         assert.containsOnce(actionManager, '.o_content .o_list_view');
         assert.containsNone(actionManager, '.o_content .o_search_panel');
 
-        await testUtils.dom.click(actionManager.$('.o_cp_switch_pivot'));
+        await cpHelpers.switchView(actionManager, 'pivot');
         assert.containsOnce(actionManager, '.o_content.o_controller_with_searchpanel .o_pivot');
         assert.containsOnce(actionManager, '.o_content.o_controller_with_searchpanel .o_search_panel');
 
@@ -2003,8 +2005,8 @@ QUnit.module('Views', {
                 return this._super.apply(this, arguments);
             },
         });
-
         await actionManager.doAction(1);
+
         assert.hasClass(actionManager.$('.o_search_panel_category_value:first header'), 'active');
         assert.containsN(actionManager, '.o_kanban_record:not(.o_kanban_ghost)', 4);
 
@@ -2013,7 +2015,7 @@ QUnit.module('Views', {
         assert.hasClass(actionManager.$('.o_search_panel_category_value:nth(1) header'), 'active');
         assert.containsN(actionManager, '.o_kanban_record:not(.o_kanban_ghost)', 2);
 
-        await testUtils.dom.click(actionManager.$('.o_cp_switch_list'));
+        await cpHelpers.switchView(actionManager, 'list');
         assert.hasClass(actionManager.$('.o_search_panel_category_value:nth(1) header'), 'active');
         assert.containsN(actionManager, '.o_data_row', 2);
 
@@ -2022,7 +2024,7 @@ QUnit.module('Views', {
         assert.hasClass(actionManager.$('.o_search_panel_category_value:nth(2) header'), 'active');
         assert.containsN(actionManager, '.o_data_row', 2);
 
-        await testUtils.dom.click(actionManager.$('.o_cp_switch_kanban'));
+        await cpHelpers.switchView(actionManager, 'kanban');
         assert.hasClass(actionManager.$('.o_search_panel_category_value:nth(2) header'), 'active');
         assert.containsN(actionManager, '.o_kanban_record:not(.o_kanban_ghost)', 2);
 
@@ -2052,8 +2054,8 @@ QUnit.module('Views', {
                 return this._super.apply(this, arguments);
             },
         });
-
         await actionManager.doAction(1);
+
         assert.containsNone(actionManager, '.o_search_panel_filter_value input:checked');
         assert.containsN(actionManager, '.o_kanban_record:not(.o_kanban_ghost)', 4);
 
@@ -2062,7 +2064,7 @@ QUnit.module('Views', {
         assert.containsOnce(actionManager, '.o_search_panel_filter_value input:checked');
         assert.containsN(actionManager, '.o_kanban_record:not(.o_kanban_ghost)', 1);
 
-        await testUtils.dom.click(actionManager.$('.o_cp_switch_list'));
+        await cpHelpers.switchView(actionManager, 'list');
         assert.containsOnce(actionManager, '.o_search_panel_filter_value input:checked');
         assert.containsN(actionManager, '.o_data_row', 1);
 
@@ -2071,7 +2073,7 @@ QUnit.module('Views', {
         assert.containsN(actionManager, '.o_search_panel_filter_value input:checked', 2);
         assert.containsN(actionManager, '.o_data_row', 4);
 
-        await testUtils.dom.click(actionManager.$('.o_cp_switch_kanban'));
+        await cpHelpers.switchView(actionManager, 'kanban');
         assert.containsN(actionManager, '.o_search_panel_filter_value input:checked', 2);
         assert.containsN(actionManager, '.o_kanban_record:not(.o_kanban_ghost)', 4);
 
@@ -2094,8 +2096,8 @@ QUnit.module('Views', {
             archs: this.archs,
             data: this.data,
         });
-
         await actionManager.doAction(1);
+
         assert.containsOnce(actionManager, '.o_content.o_controller_with_searchpanel .o_kanban_view');
         assert.containsOnce(actionManager, '.o_content.o_controller_with_searchpanel .o_search_panel');
         assert.containsNone(actionManager, '.o_search_panel_filter_value input:checked');
@@ -2107,13 +2109,13 @@ QUnit.module('Views', {
         assert.containsN(actionManager, '.o_kanban_record:not(.o_kanban_ghost)', 1);
 
         // switch to pivot
-        await testUtils.dom.click(actionManager.$('.o_cp_switch_pivot'));
+        await cpHelpers.switchView(actionManager, 'pivot');
         assert.containsOnce(actionManager, '.o_content .o_pivot');
         assert.containsNone(actionManager, '.o_content .o_search_panel');
         assert.strictEqual(actionManager.$('.o_pivot_cell_value').text(), '15');
 
         // switch to list
-        await testUtils.dom.click(actionManager.$('.o_cp_switch_list'));
+        await cpHelpers.switchView(actionManager, 'list');
         assert.containsOnce(actionManager, '.o_content.o_controller_with_searchpanel .o_list_view');
         assert.containsOnce(actionManager, '.o_content.o_controller_with_searchpanel .o_search_panel');
         assert.containsOnce(actionManager, '.o_search_panel_filter_value input:checked');
@@ -2192,10 +2194,10 @@ QUnit.module('Views', {
                 return this._super.apply(this, arguments);
             },
         });
-
         await actionManager.doAction(1);
-        await testUtils.dom.click(actionManager.$('.o_cp_switch_list'));
-        await testUtils.dom.click(actionManager.$('.o_cp_switch_kanban'));
+
+        await cpHelpers.switchView(actionManager, 'list');
+        await cpHelpers.switchView(actionManager, 'kanban');
 
         assert.verifySteps([
             '/web/action/load',
@@ -2226,18 +2228,19 @@ QUnit.module('Views', {
         actionManager.$el.css('max-height', 300);
 
         await actionManager.doAction(1);
+
         assert.containsOnce(actionManager, '.o_content .o_kanban_view');
         assert.strictEqual(actionManager.$('.o_search_panel').scrollTop(), 0);
 
         // simulate a scroll in the search panel and switch into list
         actionManager.$('.o_search_panel').scrollTop(50);
-        await testUtils.dom.click(actionManager.$('.o_cp_switch_list'));
+        await cpHelpers.switchView(actionManager, 'list');
         assert.containsOnce(actionManager, '.o_content .o_list_view');
         assert.strictEqual(actionManager.$('.o_search_panel').scrollTop(), 50);
 
         // simulate another scroll and switch back to kanban
         actionManager.$('.o_search_panel').scrollTop(30);
-        await testUtils.dom.click(actionManager.$('.o_cp_switch_kanban'));
+        await cpHelpers.switchView(actionManager, 'kanban');
         assert.containsOnce(actionManager, '.o_content .o_kanban_view');
         assert.strictEqual(actionManager.$('.o_search_panel').scrollTop(), 30);
 
diff --git a/addons/web/static/tests/views/search_view_tests.js b/addons/web/static/tests/views/search_view_tests.js
deleted file mode 100644
index 5dbf8361628..00000000000
--- a/addons/web/static/tests/views/search_view_tests.js
+++ /dev/null
@@ -1,1928 +0,0 @@
-odoo.define('web.search_view_tests', function (require) {
-"use strict";
-
-var FormView = require('web.FormView');
-var GraphView = require('web.GraphView');
-var testUtils = require('web.test_utils');
-
-var createActionManager = testUtils.createActionManager;
-var createControlPanel = testUtils.createControlPanel;
-var createView = testUtils.createView;
-var patchDate = testUtils.mock.patchDate;
-var session = require('web.session');
-
-var controlPanelViewParameters = require('web.controlPanelViewParameters');
-const PERIOD_OPTIONS_IDS = controlPanelViewParameters.PERIOD_OPTIONS.map(o => o.optionId);
-const OPTION_GENERATOR_IDS = controlPanelViewParameters.OPTION_GENERATORS.map(o => o.optionId);
-
-QUnit.module('Search View', {
-    beforeEach: function () {
-        this.data = {
-            partner: {
-                fields: {
-                    date_field: {string: "Date", type: "date", store: true, sortable: true},
-                    birthday: {string: "Birthday", type: "date", store: true, sortable: true},
-                    foo: {string: "Foo", type: "char", store: true, sortable: true},
-                    bar: {string: "Bar", type: "many2one", relation: 'partner'},
-                    float_field: {string: "Float", type: "float", group_operator: 'sum'},
-                },
-                records: [
-                    {id: 1, display_name: "First record", foo: "yop", bar: 2, date_field: "2017-01-25", birthday: "1983-07-15", float_field: 1},
-                    {id: 2, display_name: "Second record", foo: "blip", bar: 1, date_field: "2017-01-24", birthday: "1982-06-04",float_field: 2},
-                    {id: 3, display_name: "Third record", foo: "gnap", bar: 1, date_field: "2017-01-13", birthday: "1985-09-13",float_field: 1.618},
-                    {id: 4, display_name: "Fourth record", foo: "plop", bar: 2, date_field: "2017-02-25", birthday: "1983-05-05",float_field: -1},
-                    {id: 5, display_name: "Fifth record", foo: "zoup", bar: 2, date_field: "2016-01-25", birthday: "1800-01-01",float_field: 13},
-                ],
-            },
-            pony: {
-                fields: {
-                    name: {string: 'Name', type: 'char'},
-                },
-                records: [
-                    {id: 4, name: 'Twilight Sparkle'},
-                    {id: 6, name: 'Applejack'},
-                    {id: 9, name: 'Fluttershy'}
-                ],
-            },
-        };
-
-        this.actions = [{
-            id: 1,
-            name: 'Partners Action 1',
-            res_model: 'partner',
-            type: 'ir.actions.act_window',
-            views: [[false, 'list']],
-        }, {
-            id: 2,
-            name: 'Partners Action 2',
-            res_model: 'partner',
-            type: 'ir.actions.act_window',
-            views: [[false, 'list']],
-            search_view_id: [2, 'search'],
-        }, {
-            id: 3,
-            name: 'Partners Action 3',
-            res_model: 'partner',
-            type: 'ir.actions.act_window',
-            views: [[false, 'kanban']],
-            search_view_id: [2, 'search'],
-        }, {
-            id: 4,
-            name: 'Partners Action 4',
-            res_model: 'partner',
-            type: 'ir.actions.act_window',
-            views: [[false, 'graph']],
-            search_view_id: [3, 'search'],
-        }, {
-            id: 5,
-            name: 'Partners Action 5',
-            res_model: 'partner',
-            type: 'ir.actions.act_window',
-            views: [[2, 'list']],
-            search_view_id: [4, 'search'],
-        }, {
-            id: 6,
-            name: 'Partners Action 6',
-            res_model: 'partner',
-            type: 'ir.actions.act_window',
-            views: [[2, 'list']],
-            search_view_id: [5, 'search'],
-        }, {
-            id: 7,
-            name: 'Partners Action 7',
-            res_model: 'partner',
-            type: 'ir.actions.act_window',
-            views: [[2, 'list']],
-            search_view_id: [6, 'search'],
-        }, {
-            id: 8,
-            name: 'Partners Action 8',
-            res_model: 'partner',
-            type: 'ir.actions.act_window',
-            views: [[2, 'list']],
-            search_view_id: [7, 'search'],
-        }, {
-            id: 9,
-            name: 'Partners Action 9',
-            res_model: 'partner',
-            type: 'ir.actions.act_window',
-            views: [[false, 'pivot']],
-            search_view_id: [5, 'search'],
-        }, {
-            id: 10,
-            name: 'Partners Action 10',
-            res_model: 'partner',
-            type: 'ir.actions.act_window',
-            views: [[false, 'pivot']],
-            search_view_id: [8, 'search'],
-        }, {
-            id: 11,
-            name: 'Partners Action 11',
-            res_model: 'partner',
-            type: 'ir.actions.act_window',
-            views: [[2, 'list']],
-            search_view_id: [8, 'search'],
-        }, {
-            id: 12,
-            name: 'Partners Action 12',
-            res_model: 'partner',
-            type: 'ir.actions.act_window',
-            views: [[2, 'list']],
-            search_view_id: [9, 'search'],
-        }
-        ];
-
-        this.archs = {
-            // list views
-            'partner,false,list': '<tree><field name="foo"/></tree>',
-            'partner,2,list': '<tree><field name="foo"/></tree>',
-
-            // kanban views
-            'partner,false,kanban': '<kanban><templates><t t-name="kanban-box">' +
-                    '<div class="oe_kanban_global_click"><field name="foo"/></div>' +
-                '</t></templates></kanban>',
-
-            // graph views
-            'partner,false,graph': '<graph>' +
-                        '<field name="date_field" type="row" interval="day"/>' +
-                        '<field name="float_field" type="measure"/>' +
-                    '</graph>',
-
-            // pivot views
-            'partner,false,pivot': '<pivot>' +
-                        '<field name="date_field" type="row" interval="day"/>' +
-                        '<field name="float_field" type="measure"/>' +
-                '</pivot>',
-
-            // search views
-            'partner,false,search': '<search>'+
-                    '<filter string="candle" name="itsName" context="{\'group_by\': \'foo\'}"/>' +
-                '</search>',
-            'partner,2,search': '<search>'+
-                    '<filter string="Date" name="coolName" context="{\'group_by\': \'date_field\'}"/>' +
-                '</search>',
-            'partner,3,search': '<search>'+
-                    '<filter string="float" name="positive" domain="[(\'float_field\', \'>=\', 0)]"/>' +
-                '</search>',
-            'partner,4,search': '<search>'+
-                    '<filter string="Date" name="coolName" context="{\'group_by\': \'date_field:day\'}"/>' +
-                '</search>',
-            'partner,5,search': '<search>'+
-                    '<filter string="Date Field Filter" name="positive" date="date_field"/>' +
-                    '<filter string="Date Field Groupby" name="coolName" context="{\'group_by\': \'date_field:day\'}"/>' +
-                '</search>',
-            'partner,6,search': '<search>'+
-                    '<filter string="Date" name="coolName" context="{\'group_by\': \'date_field:day\'}"/>' +
-                    '<separator/>' +
-                    '<filter string="Bar" name="superName" context="{\'group_by\': \'bar\'}"/>' +
-                '</search>',
-            'partner,7,search': '<search>'+
-                    '<filter string="1" name="coolName1" date="date_field"/>' +
-                    '<separator/>' +
-                    '<filter string="2" name="coolName2" date="birthday"/>' +
-                    '<separator/>' +
-                    '<filter string="3" name="coolName3" domain="[]"/>' +
-                    '<separator/>' +
-                    '<filter string="4" name="coolName4" domain="[]"/>' +
-                    '<separator/>' +
-                    '<filter string="5" name="coolName5" domain="[]"/>' +
-                    '<separator/>' +
-                    '<filter string="6" name="coolName6" domain="[]"/>' +
-                    '<separator/>' +
-                    '<filter string="7" name="coolName7" domain="[]"/>' +
-                    '<separator/>' +
-                    '<filter string="8" name="coolName8" domain="[]"/>' +
-                    '<separator/>' +
-                    '<filter string="9" name="coolName9" domain="[]"/>' +
-                    '<separator/>' +
-                    '<filter string="10" name="coolName10" domain="[]"/>' +
-                    '<separator/>' +
-                    '<filter string="11" name="coolName11" domain="[]"/>' +
-                '</search>',
-            'partner,8,search': '<search>'+
-                    '<field name="foo"/>' +
-                    '<field name="date_field"/>' +
-                    '<field name="birthday"/>' +
-                    '<field name="bar" context="{\'bar\': self}"/>' +
-                    '<field name="float_field"/>' +
-                    '<filter string="Date Field Filter" name="positive" date="date_field"/>' +
-                    '<filter string="Date Field Groupby" name="coolName" context="{\'group_by\': \'date_field:day\'}"/>' +
-                '</search>',
-            'partner,9,search': '<search>'+
-                '<filter string="float" name="positive" domain="[(\'date_field\', \'>=\', (context_today() + relativedelta()).strftime(\'%Y-%m-%d\'))]"/>' +
-            '</search>',
-            'partner,10,search': '<search>'+
-                    '<field string="Foo" name="foo"/>' +
-                    '<filter string="Date Field Filter" name="positive" date="date_field"/>' +
-                    '<filter string="Date Field Groupby" name="coolName" context="{\'group_by\': \'date_field:day\'}"/>' +
-                '</search>',
-        };
-
-
-        // assuming that the current time is: 2017-03-22:01:00:00
-        this.periodDomains = [
-            // last 7 days (whole days)
-            ['&', ["date_field", ">=", "2017-03-15"],["date_field", "<", "2017-03-22"]],
-            // last 30 days
-            ['&', ["date_field", ">=", "2017-02-20"],["date_field", "<", "2017-03-22"]],
-            // last 365 days
-            ['&', ["date_field", ">=", "2016-03-22"],["date_field", "<", "2017-03-22"]],
-            // last 5 years
-            ['&', ["date_field", ">=", "2012-03-22"],["date_field", "<", "2017-03-22"]],
-            // today
-            ['&', ["date_field", ">=", "2017-03-22"],["date_field", "<", "2017-03-23"]],
-            // this week
-            ['&', ["date_field", ">=", "2017-03-20"],["date_field", "<", "2017-03-27"]],
-            // this month
-            ['&', ["date_field", ">=", "2017-03-01"],["date_field", "<", "2017-04-01"]],
-            // this quarter
-            ['&', ["date_field", ">=", "2017-01-01"],["date_field", "<", "2017-04-01"]],
-            // this year
-            ['&', ["date_field", ">=", "2017-01-01"],["date_field", "<", "2018-01-01"]],
-            // yesterday
-            ['&', ["date_field", ">=", "2017-03-21"],["date_field", "<", "2017-03-22"]],
-            // last week
-            ['&', ["date_field", ">=", "2017-03-13"],["date_field", "<", "2017-03-20"]],
-            // last month
-            ['&', ["date_field", ">=", "2017-02-01"],["date_field", "<", "2017-03-01"]],
-            // last quarter
-            ['&', ["date_field", ">=", "2016-10-01"],["date_field", "<", "2017-01-01"]],
-            // last year
-            ['&', ["date_field", ">=", "2016-01-01"],["date_field", "<", "2017-01-01"]],
-        ];
-
-        this.basicDomains = [
-            ["&",["date_field",">=","2017-03-01"],["date_field","<=","2017-03-31"]],
-            ["&",["date_field",">=","2017-01-01"],["date_field","<=","2017-12-31"]],
-            ["&",["date_field",">=","2017-02-01"],["date_field","<=","2017-02-28"]],
-            ["&",["date_field",">=","2017-01-01"],["date_field","<=","2017-12-31"]],
-            ["&",["date_field",">=","2017-01-01"],["date_field","<=","2017-01-31"]],
-            ["|",
-                "&",["date_field",">=","2017-01-01"],["date_field","<=","2017-01-31"],
-                "&",["date_field",">=","2017-10-01"],["date_field","<=","2017-12-31"]
-            ],
-            ["&",["date_field",">=","2017-10-01"],["date_field","<=","2017-12-31"]],
-  	        ["&",["date_field",">=","2017-01-01"],["date_field","<=","2017-12-31"]],
-            ["&",["date_field",">=","2017-01-01"],["date_field","<=","2017-03-31"]],
-            ["&",["date_field",">=","2017-01-01"],["date_field","<=","2017-12-31"]],
-            ["&",["date_field",">=","2017-01-01"],["date_field","<=","2017-12-31"]],
-            ["|",
-                "&",["date_field",">=","2017-01-01"],["date_field","<=","2017-12-31"],
-                "&",["date_field",">=","2016-01-01"],["date_field","<=","2016-12-31"]
-            ],
-            ["|",
-                "|",
-                    "&",["date_field",">=","2017-01-01"],["date_field","<=","2017-12-31"],
-                    "&",["date_field",">=","2016-01-01"],["date_field","<=","2016-12-31"],
-                "&",["date_field",">=","2015-01-01"],["date_field","<=","2015-12-31"]
-            ],
-            ["|",
-                "|",
-                    "&", ["date_field",">=","2017-03-01"],["date_field","<=","2017-03-31"],
-                    "&",["date_field",">=","2016-03-01"],["date_field","<=","2016-03-31"],
-                "&",["date_field",">=","2015-03-01"],["date_field","<=","2015-03-31"]
-            ]
-        ];
-
-        // assuming that the current time is: 2017-03-22:01:00:00
-        this.previousPeriodDomains = [
-            // last 7 days (whole days) - 1 week
-            ['&', ["date_field", ">=", "2017-03-08"],["date_field", "<", "2017-03-15"]],
-            // last 30 days - 30 days
-            ['&', ["date_field", ">=", "2017-01-21"],["date_field", "<", "2017-02-20"]],
-            // last 365 days
-            ['&', ["date_field", ">=", "2015-03-23"],["date_field", "<", "2016-03-22"]],
-            // last 5 years
-            ['&', ["date_field", ">=", "2007-03-22"],["date_field", "<", "2012-03-22"]],
-            // today - 1 day
-            ['&', ["date_field", ">=", "2017-03-21"],["date_field", "<", "2017-03-22"]],
-            // this week - 1 week
-            ['&', ["date_field", ">=", "2017-03-13"],["date_field", "<", "2017-03-20"]],
-            // this month - 1 month
-            ['&', ["date_field", ">=", "2017-02-01"],["date_field", "<", "2017-03-01"]],
-            // this quarter - 3 months
-            ['&', ["date_field", ">=", "2016-10-01"],["date_field", "<", "2017-01-01"]],
-            // this year - 1 year
-            ['&', ["date_field", ">=", "2016-01-01"],["date_field", "<", "2017-01-01"]],
-            // yesterday - 1 day
-            ['&', ["date_field", ">=", "2017-03-20"],["date_field", "<", "2017-03-21"]],
-            // last week - 1 week
-            ['&', ["date_field", ">=", "2017-03-06"],["date_field", "<", "2017-03-13"]],
-            // last month - 1 month
-            ['&', ["date_field", ">=", "2017-01-01"],["date_field", "<", "2017-02-01"]],
-            // last quarter - 3 months
-            ['&', ["date_field", ">=", "2016-07-01"],["date_field", "<", "2016-10-01"]],
-            // last year - 1 year
-            ['&', ["date_field", ">=", "2015-01-01"],["date_field", "<", "2016-01-01"]],
-        ];
-    },
-}, function () {
-    QUnit.test('basic rendering', async function (assert) {
-        assert.expect(1);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-        });
-        await actionManager.doAction(1);
-
-        assert.strictEqual($('.o_searchview input.o_searchview_input')[0], document.activeElement,
-            "searchview input should be focused");
-
-        actionManager.destroy();
-    });
-    QUnit.test('navigation with facets', async function (assert) {
-        assert.expect(4);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-        });
-        await actionManager.doAction(1);
-
-        // add a facet
-        await testUtils.dom.click(actionManager.$('.o_dropdown_toggler_btn:contains(Group By)'));
-        await testUtils.dom.click(actionManager.$('.o_menu_item a'));
-        assert.strictEqual(actionManager.$('.o_searchview .o_searchview_facet').length, 1,
-            "there should be one facet");
-        assert.strictEqual(actionManager.$('.o_searchview input.o_searchview_input')[0], document.activeElement,
-            "searchview input should be focused");
-
-        // press left to focus the facet
-        actionManager.$('.o_searchview_input_container').trigger($.Event('keydown', {
-            which: $.ui.keyCode.LEFT,
-            keyCode: $.ui.keyCode.LEFT,
-        }));
-        assert.strictEqual(actionManager.$('.o_searchview .o_searchview_facet')[0], document.activeElement,
-            "the facet should be focused");
-
-        // press right to focus the facet
-        actionManager.$('.o_searchview_input_container').trigger($.Event('keydown', {
-            which: $.ui.keyCode.RIGHT,
-            keyCode: $.ui.keyCode.RIGHT,
-        }));
-        assert.strictEqual(actionManager.$('.o_searchview input.o_searchview_input')[0], document.activeElement,
-            "searchview input should be focused");
-
-        actionManager.destroy();
-    });
-
-    QUnit.test('default groupbys can be ordered', async function (assert) {
-        assert.expect(7);
-
-        const unpatchDate = patchDate(2019,6,31,13,43,0);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-        });
-
-        this.archs['partner,5,search'] =
-            '<search>'+
-                '<field name="bar"/>' +
-                '<filter string="Foo" name="foo" domain="[]" />' +
-                '<filter string="Foo 2" name="foo_2" domain="[]" />' +
-                '<filter string="Filter Date Field" name="date" date="date_field"/>' +
-                '<filter string="Groupby Date Field Day" name="gb_day" context="{\'group_by\': \'date_field:day\'}"/>' +
-                '<filter string="Groupby Foo" name="gb_foo" context="{\'group_by\': \'foo\'}"/>' +
-                '<filter string="Groupby Bar" name="gb_bar" context="{\'group_by\': \'bar\'}"/>' +
-            '</search>';
-        this.actions[0].views = [[false, 'graph']],
-        this.actions[0].search_view_id = [5, 'search'];
-        this.actions[0].context = {
-            search_default_foo: true,
-            search_default_date: true,
-            search_default_bar: 3,
-            search_default_gb_foo: 1,
-            search_default_gb_day: 5,
-            search_default_gb_bar: true,
-            time_ranges: {field: 'date_field', range: 'this_week'},
-        };
-        await actionManager.doAction(1);
-
-        const $facetValues = $('.o_searchview .o_searchview_facet .o_facet_values span:not(.o_facet_values_sep)');
-        const expectedLabels = [
-            "Third record",
-            "Foo",
-            "Filter Date Field: July 2019",
-            "Groupby Foo",
-            "Groupby Date Field Day: Day",
-            "Groupby Bar",
-            "Date: This Week"
-        ];
-
-        for (let i = 0; i < expectedLabels.length; i++) {
-            assert.strictEqual($facetValues.eq(i).text(), expectedLabels[i],
-            `first facet value should be ${expectedLabels[i]}`);
-        }
-        actionManager.destroy();
-        unpatchDate();
-    });
-
-    QUnit.module('GroupByMenu');
-
-    QUnit.test('click on groupby filter adds a facet', async function (assert) {
-        assert.expect(1);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-        });
-
-        await actionManager.doAction(1);
-        await testUtils.dom.click($('.o_dropdown_toggler_btn:contains(Group By)'));
-        await testUtils.dom.click($('.o_menu_item a'));
-        assert.strictEqual($('.o_searchview .o_searchview_facet .o_facet_values span').text().trim(), 'candle',
-            'should have a facet with candle name');
-
-        actionManager.destroy();
-    });
-
-    QUnit.test('remove a "Group By" facet properly unchecks groupbys in groupby menu', async function (assert) {
-        assert.expect(2);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-        });
-
-        await actionManager.doAction(1);
-        await testUtils.dom.click($('.o_dropdown_toggler_btn:contains(Group By)'));
-        await testUtils.dom.click($('.o_menu_item a'));
-        assert.strictEqual($('.o_searchview .o_searchview_facet .o_facet_values span').text().trim(), 'candle',
-            'should have a facet with candle name');
-        await testUtils.dom.click($('.o_facet_remove:first'));
-        assert.strictEqual($('.o_searchview .o_searchview_facet .o_facet_values span').length, 0,
-            'there should be no facet');
-        actionManager.destroy();
-    });
-
-    QUnit.test('change option of a "Group By" does not remove groupy in facet "Group By"', async function (assert) {
-        assert.expect(3);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-        });
-
-        await actionManager.doAction(2);
-        await testUtils.dom.click($('span.fa-bars'));
-        await testUtils.dom.click($('.o_submenu_switcher'));
-        // Don't forget there is a hidden li.divider element at first place among children
-        await testUtils.dom.click($('.o_item_option:nth-child(2)'));
-        assert.strictEqual($('.o_searchview .o_searchview_facet .o_facet_values span').length, 1,
-        'should have a facet');
-        await testUtils.dom.click($('.o_item_option:nth-child(3)'));
-        assert.strictEqual($('.o_searchview .o_searchview_facet .o_facet_values span').length, 3,
-            'should have three facet spans (two options and a separator between them)');
-        await testUtils.dom.click($('.o_item_option:nth-child(2)'));
-        await testUtils.dom.click($('.o_item_option:nth-child(3)'));
-        assert.strictEqual($('.o_searchview .o_searchview_facet .o_facet_values span').length, 0,
-            'should have no facet');
-        actionManager.destroy();
-    });
-
-    QUnit.test('select and unselect quickly groupby does not crash', async function (assert) {
-        assert.expect(1);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-        });
-
-        await actionManager.doAction(3);
-        await testUtils.dom.click($('span.fa-bars'));
-        await testUtils.dom.click($('.o_menu_item:first'));
-        await testUtils.dom.click($('.o_menu_item:first'));
-        assert.strictEqual($('.o_searchview .o_searchview_facet .o_facet_values span').length, 0,
-            'should have a facet');
-        actionManager.destroy();
-    });
-
-    QUnit.test('groupby selected within graph subview are not deleted when modifying search view content', async function (assert) {
-        assert.expect(2);
-
-        this.actions[3].flags = {isEmbedded: true};
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-        });
-        await actionManager.doAction(4);
-        await testUtils.dom.click($('.o_graph_controller .o_control_panel .o_cp_buttons button').eq(1));
-        await testUtils.dom.click($('.o_graph_controller .o_group_by_menu .o_menu_item').eq(1));
-        await testUtils.dom.click($('.o_graph_controller .o_group_by_menu .o_menu_item .o_item_option > .dropdown-item').eq(4));
-        assert.doesNotHaveClass($('.o_graph_controller .o_group_by_menu .o_menu_item > .dropdown-item').eq(1), 'selected',
-            'groupby should be unselected');
-        await testUtils.dom.click($('.o_search_options button span.fa-filter'));
-        await testUtils.dom.click($('.o_filters_menu .o_menu_item a').first());
-        await testUtils.dom.click($('.o_graph_controller .o_control_panel .o_cp_buttons button').eq(1));
-        await testUtils.dom.click($('.o_graph_controller .o_group_by_menu .o_menu_item').eq(1));
-        assert.doesNotHaveClass($('.o_graph_controller .o_group_by_menu .o_menu_item > .dropdown-item').eq(1), 'selected',
-            'groupby should be still unselected');
-        actionManager.destroy();
-    });
-
-    QUnit.test('group by a date field using interval works', async function (assert) {
-            assert.expect(13);
-
-
-        var groupbys = [
-            ["date_field:day"],
-            ["date_field:month"],
-            ["birthday:month"],
-            ["birthday:year"],
-        ];
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-            mockRPC: function (route, args) {
-                if (route === '/web/dataset/call_kw/partner/web_read_group') {
-                    assert.deepEqual(args.kwargs.groupby, groupbys.shift());
-                }
-                return this._super.apply(this, arguments);
-            },
-        });
-
-        await actionManager.doAction(5);
-        // open menu 'Group By'
-        await testUtils.dom.click($('.o_search_options .fa-bars'));
-        // Open the groupby 'Date'
-        await testUtils.dom.click($('.o_group_by_menu .o_menu_item'));
-        // select option 'day'
-        await testUtils.dom.click($('.o_group_by_menu .o_menu_item .o_item_option[data-option_id="day"]'));
-        assert.strictEqual($('div.o_facet_values span').text().trim(),'Date: Day');
-        assert.strictEqual($('.o_content tr.o_group_header').length, 5);
-        // select option 'month'
-        await testUtils.dom.click($('.o_group_by_menu .o_menu_item .o_item_option[data-option_id="day"]'));
-        await testUtils.dom.click($('.o_group_by_menu .o_menu_item .o_item_option[data-option_id="month"]'));
-        // data should be grouped by the field 'Date' using the interval 'month'
-        assert.strictEqual($('div.o_facet_values span').text().trim(),'Date: Month');
-        assert.strictEqual($('.o_content tr.o_group_header').length, 3);
-        // deactivate option 'month'
-        await testUtils.dom.click($('.o_group_by_menu .o_menu_item .o_item_option[data-option_id="month"]'));
-        // no groupby is applied
-        assert.strictEqual($('div.o_facet_values span').length, 0);
-        // open 'Add custom Groupby' menu
-        await testUtils.dom.click($('.o_group_by_menu .o_add_custom_group'));
-        // click on 'Apply' button
-        await testUtils.dom.click($('.o_group_by_menu .o_generator_menu button'));
-        // data should be grouped by the field 'Birthday' using the interval 'month'
-        assert.strictEqual($('div.o_facet_values span').text().trim(),'Birthday: Month');
-        assert.strictEqual($('.o_content tr.o_group_header').length, 5);
-        // close first submenu
-        await testUtils.dom.click($('.o_group_by_menu .o_menu_item .o_submenu_switcher').eq(0));
-        // open submenu with interval options
-        await testUtils.dom.click($('.o_group_by_menu .o_menu_item .o_submenu_switcher').eq(1));
-        // deselect option 'month'
-        await testUtils.dom.click($('.o_group_by_menu .o_menu_item .o_item_option[data-option_id="month"]'));
-        // select option 'year'
-        await testUtils.dom.click($('.o_group_by_menu .o_menu_item .o_item_option').eq(0));
-        // data should be grouped by the field 'Birthday' using the interval 'year'
-        assert.strictEqual($('div.o_facet_values span').text().trim(),'Birthday: Year');
-        assert.strictEqual($('.o_content tr.o_group_header').length, 4);
-
-        actionManager.destroy();
-    });
-
-    QUnit.test('group by a date field using interval works', async function (assert) {
-        assert.expect(8);
-
-        var pivot = await createView({
-            View: GraphView,
-            model: "partner",
-            groupBy:['bar'],
-            data: this.data,
-            arch: '<graph/>',
-            archs: {
-                'partner,false,search': `<search>
-                <filter string="Bar" name="superName" context="{'group_by': 'bar'}"/>
-                    <filter string="Date" name="coolName" context="{'group_by': 'date_field'}"/>
-                    <filter string="Foo" name="superName" context="{'group_by': 'foo'}"/>
-                </search>`
-            },
-        });
-
-        function getFacetTexts() {
-            return [...pivot.el.querySelectorAll('div.o_facet_values span')].map(
-                e => e.innerText
-            ).join(' ');
-        };
-
-        // open menu 'Group By'
-        await testUtils.dom.click(pivot.el.querySelector('.o_search_options .fa-bars'));
-        // select 'Bar'
-        await testUtils.dom.click(pivot.el.querySelectorAll('.o_group_by_menu .o_menu_item')[0]);
-        assert.strictEqual(getFacetTexts(), 'Bar');
-
-        // Open the groupby 'Date'
-        await testUtils.dom.click(pivot.el.querySelectorAll('.o_group_by_menu .o_menu_item')[1]);
-        // select option 'week'
-        await testUtils.dom.click(pivot.el.querySelector('.o_group_by_menu .o_menu_item .o_item_option[data-option_id="week"]'));
-        assert.strictEqual(getFacetTexts(), 'Bar > Date: Week');
-
-        // select option 'day'
-        await testUtils.dom.click(pivot.el.querySelector('.o_group_by_menu .o_menu_item .o_item_option[data-option_id="day"]'));
-        assert.strictEqual(getFacetTexts(), 'Bar > Date: Week > Date: Day');
-
-        // select option 'year'
-        await testUtils.dom.click(pivot.el.querySelector('.o_group_by_menu .o_menu_item .o_item_option[data-option_id="year"]'));
-        assert.strictEqual(getFacetTexts(), 'Bar > Date: Year > Date: Week > Date: Day');
-
-        // select 'Foo'
-        await testUtils.dom.click(pivot.el.querySelectorAll('.o_group_by_menu .o_menu_item')[2]);
-        assert.strictEqual(getFacetTexts(), 'Bar > Date: Year > Date: Week > Date: Day > Foo');
-
-        // select option 'quarter'
-        await testUtils.dom.click(pivot.el.querySelector('.o_group_by_menu .o_menu_item .o_item_option[data-option_id="quarter"]'));
-        assert.strictEqual(getFacetTexts(), 'Bar > Date: Year > Date: Quarter > Date: Week > Date: Day > Foo');
-
-        // unselect 'Bar'
-        await testUtils.dom.click(pivot.el.querySelectorAll('.o_group_by_menu .o_menu_item')[0]);
-        assert.strictEqual(getFacetTexts(), 'Date: Year > Date: Quarter > Date: Week > Date: Day > Foo');
-
-        // unselect option 'week'
-        await testUtils.dom.click(pivot.el.querySelector('.o_group_by_menu .o_menu_item .o_item_option[data-option_id="week"]'));
-        assert.strictEqual(getFacetTexts(), 'Date: Year > Date: Quarter > Date: Day > Foo');
-
-        pivot.destroy();
-    });
-
-    QUnit.test('a separator in groupbys does not cause problems', async function (assert) {
-        assert.expect(6);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-        });
-
-        await actionManager.doAction(7);
-        // open menu 'Group By'
-        await testUtils.dom.click($('span.fa-bars'));
-        // open options menu
-        await testUtils.dom.click($('.o_group_by_menu .o_menu_item a:first'));
-        // activate groupby with 'day' option
-        await testUtils.dom.click($('.o_group_by_menu .o_menu_item .o_item_option[data-option_id="day"]'));
-        // activate the second groupby
-        await testUtils.dom.click($('.o_group_by_menu .o_menu_item > a').eq(1));
-        assert.strictEqual($('.o_group_by_menu .o_menu_item').length, 2);
-        assert.strictEqual($('.o_group_by_menu .o_menu_item > .dropdown-item.selected').length, 2);
-        // deactivate second groupby
-        await testUtils.dom.click($('.o_group_by_menu .o_menu_item > a').eq(1));
-        assert.hasClass($('.o_group_by_menu .o_menu_item > .dropdown-item').eq(0), 'selected');
-        assert.doesNotHaveClass($('.o_group_by_menu .o_menu_item > .dropdown-item').eq(1), 'selected');
-        // remove facet
-        await testUtils.dom.click($('.o_facet_remove'));
-        assert.doesNotHaveClass($('.o_group_by_menu .o_menu_item > .dropdown-item').eq(0), 'selected');
-        assert.doesNotHaveClass($('.o_group_by_menu .o_menu_item > .dropdown-item').eq(1), 'selected');
-        actionManager.destroy();
-    });
-
-    QUnit.module('FilterMenu');
-
-    QUnit.test('Search date and datetime fields. Support of timezones', async function (assert) {
-        assert.expect(4);
-
-        this.data.partner.fields.birth_datetime = {string: "Birth DateTime", type: "datetime", store: true, sortable: true};
-        this.data.partner.records = this.data.partner.records.slice(0,-1); // exclude wrong date record
-
-        async function stringToEvent ($element, string) {
-            for (var i = 0; i < string.length; i++) {
-                var keyAscii = string.charCodeAt(i);
-                $element.val($element.val()+string[i]);
-                await testUtils.nextTick();
-                $element.trigger($.Event('keyup', {which: keyAscii, keyCode:keyAscii}));
-                await testUtils.nextTick();
-            }
-        }
-
-        var searchReadSequence = 0;
-        var actionManager = await createActionManager({
-            actions: [{
-                id: 11,
-                name: 'Partners Action 11',
-                res_model: 'partner',
-                type: 'ir.actions.act_window',
-                views: [[3, 'list']],
-                search_view_id: [9, 'search'],
-            }],
-            archs:  {
-                'partner,3,list': '<tree>' +
-                                      '<field name="foo"/>' +
-                                      '<field name="birthday" />' +
-                                      '<field name="birth_datetime" />' +
-                                '</tree>',
-
-                'partner,9,search': '<search>'+
-                                        '<field name="birthday"/>' +
-                                        '<field name="birth_datetime" />' +
-                                    '</search>',
-            },
-            data: this.data,
-            session: {
-                getTZOffset: function() {
-                    return 360;
-                }
-            },
-            mockRPC: function (route, args) {
-                if (route === '/web/dataset/search_read') {
-                    if (searchReadSequence === 1) { // The 0th time is at loading
-                        assert.deepEqual(args.domain, [["birthday", "=", "1983-07-15"]],
-                            'A date should stay what the user has input, but transmitted in server\'s format');
-                    } else if (searchReadSequence === 3) { // the 2nd time is at closing the first facet
-                        assert.deepEqual(args.domain, [["birth_datetime", "=", "1983-07-14 18:00:00"]],
-                            'A datetime should be transformed in UTC and transmitted in server\'s format');
-                    }
-                    searchReadSequence+=1;
-                }
-                return this._super.apply(this, arguments);
-            },
-        });
-
-        await actionManager.doAction(11);
-
-        // Date case
-        var $autocomplete = $('.o_searchview_input');
-        await stringToEvent($autocomplete, '07/15/1983');
-        await testUtils.fields.triggerKey('up', $autocomplete, 'enter');
-
-        assert.equal($('.o_searchview_facet .o_facet_values').text().trim(), '07/15/1983',
-            'The format of the date in the facet should be in locale');
-
-        // Close Facet
-        await testUtils.dom.click($('.o_searchview_facet .o_facet_remove'));
-
-        // DateTime case
-        $autocomplete = $('.o_searchview_input');
-        await stringToEvent($autocomplete, '07/15/1983 00:00:00');
-        await testUtils.fields.triggerKey('down', $autocomplete, 'down');
-        await testUtils.fields.triggerKey('up', $autocomplete, 'enter');
-
-        assert.equal($('.o_searchview_facet .o_facet_values').text().trim(), '07/15/1983 00:00:00',
-            'The format of the datetime in the facet should be in locale');
-
-        actionManager.destroy();
-    });
-
-    QUnit.test('add a custom filter works', async function (assert) {
-        assert.expect(1);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-        });
-
-        await actionManager.doAction(1);
-        await testUtils.dom.click($('span.fa-filter'));
-        await testUtils.dom.click($('.o_add_custom_filter'));
-        await testUtils.dom.click($('.o_apply_filter'));
-        assert.strictEqual($('.o_searchview .o_searchview_facet .o_facet_values span').text().trim(), 'ID is \"0\"',
-            'should have a facet with candle name');
-        actionManager.destroy();
-    });
-
-    QUnit.test('deactivate a new custom filter works', async function (assert) {
-        assert.expect(1);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-        });
-
-        await actionManager.doAction(1);
-        await testUtils.dom.click($('span.fa-filter'));
-        await testUtils.dom.click($('.o_add_custom_filter'));
-        await testUtils.dom.click($('.o_apply_filter'));
-        await testUtils.dom.click($('.o_menu_item'));
-        assert.strictEqual($('.o_searchview .o_searchview_facet .o_facet_values span').length, 0,
-            'no facet should be in the search view');
-        actionManager.destroy();
-    });
-
-    QUnit.test('filter by a date field using period works', async function (assert) {
-        assert.expect(15);
-
-        var self = this;
-
-        this.archs['partner,4,search'] = '<search>'+
-            '<filter string="AAA" name="some_filter" date="date_field"></filter>' +
-        '</search>';
-
-        var unpatchDate = patchDate(2017,2,22,1,0,0);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-            mockRPC: function(route, args) {
-                if (route === '/web/dataset/search_read' && args.domain.length) {
-                    assert.deepEqual(args.domain, self.basicDomains.shift());
-                }
-                return this._super.apply(this, arguments);
-            },
-        });
-
-        await actionManager.doAction(5);
-
-        // open menu 'Filter'
-        await testUtils.dom.click($('.o_search_options .fa-filter'));
-        // open menu options
-        await testUtils.dom.click($('.o_menu_item'));
-
-        var generatorIds = $('.o_menu_item .o_item_option')
-                                .map(function() {return $(this).data('option_id');})
-                                .toArray();
-
-        assert.deepEqual(generatorIds, OPTION_GENERATOR_IDS,
-            "10 basic period options should be available:");
-
-        await testUtils.dom.click($('.o_menu_item .o_item_option[data-option_id="this_month"]'));
-        await testUtils.dom.click($('.o_menu_item .o_item_option[data-option_id="this_month"]'));
-        await testUtils.dom.click($('.o_menu_item .o_item_option[data-option_id="last_month"]'));
-        await testUtils.dom.click($('.o_menu_item .o_item_option[data-option_id="last_month"]'));
-        await testUtils.dom.click($('.o_menu_item .o_item_option[data-option_id="antepenultimate_month"]'));
-        await testUtils.dom.click($('.o_menu_item .o_item_option[data-option_id="fourth_quarter"]'));
-        await testUtils.dom.click($('.o_menu_item .o_item_option[data-option_id="antepenultimate_month"]'));
-        await testUtils.dom.click($('.o_menu_item .o_item_option[data-option_id="fourth_quarter"]'));
-        await testUtils.dom.click($('.o_menu_item .o_item_option[data-option_id="first_quarter"]'));
-        await testUtils.dom.click($('.o_menu_item .o_item_option[data-option_id="first_quarter"]'));
-        await testUtils.dom.click($('.o_menu_item .o_item_option[data-option_id="this_year"]'));
-        await testUtils.dom.click($('.o_menu_item .o_item_option[data-option_id="this_year"]'));
-        await testUtils.dom.click($('.o_menu_item .o_item_option[data-option_id="last_year"]'));
-        await testUtils.dom.click($('.o_menu_item .o_item_option[data-option_id="antepenultimate_year"]'));
-        await testUtils.dom.click($('.o_menu_item .o_item_option[data-option_id="this_month"]'));
-        actionManager.destroy();
-        unpatchDate();
-    });
-
-    QUnit.test('filter by a date field using period works even in January', async function (assert) {
-        assert.expect(3);
-
-        this.archs['partner,4,search'] = '<search>'+
-            '<filter string="AAA" name="some_filter" date="date_field" default_period="last_month"></filter>' +
-        '</search>';
-
-        var unpatchDate = patchDate(2017,0,7,3,0,0);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-            mockRPC: function(route, args) {
-                if (route === '/web/dataset/search_read' && args.domain.length) {
-                    assert.deepEqual(args.domain,
-                        ['&', ["date_field", ">=", "2016-12-01"], ["date_field", "<=", "2016-12-31"]]
-                    );
-                }
-                return this._super.apply(this, arguments);
-            },
-        });
-
-        this.actions[4].context = {search_default_some_filter: true};
-
-        await actionManager.doAction(5);
-
-        // open menu 'Filter'
-        await testUtils.dom.click($('.o_search_options .fa-filter'));
-        // open menu options
-        await testUtils.dom.click($('.o_menu_item'));
-
-        assert.hasClass($('.o_item_option[data-option_id="last_month"] a'), 'selected');
-        assert.hasClass($('.o_item_option[data-option_id="last_year"] a'), 'selected');
-
-        actionManager.destroy();
-        unpatchDate();
-    });
-
-    QUnit.test('`context` key in <filter> is used', async function (assert) {
-        assert.expect(3);
-
-        this.archs['partner,4,search'] = '<search>'+
-            '<filter string="AAA" name="some_filter" context="{\'coucou_1\': 1}"></filter>' +
-        '</search>';
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-            mockRPC: function (route, args) {
-                if (route === '/web/dataset/search_read') {
-                    assert.step(JSON.stringify(args.context));
-                }
-                return this._super.apply(this, arguments);
-            },
-        });
-
-        await actionManager.doAction(5);
-
-        // select filter
-        await testUtils.dom.click($('.o_search_options .fa-filter'));
-        await testUtils.dom.click($('.o_menu_item:contains(AAA)'));
-
-        assert.verifySteps([
-            "{\"bin_size\":true}",
-            "{\"coucou_1\":1,\"bin_size\":true}",
-        ]);
-
-        actionManager.destroy();
-    });
-
-    QUnit.test('Filter with JSON-parsable domain works', async function (assert) {
-        assert.expect(1);
-
-        var domain = [['foo' ,'=', 'Gently Weeps']];
-        var xml_domain = JSON.stringify(domain);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-            mockRPC: function (route, args) {
-                if (route === '/web/dataset/search_read') {
-                    assert.deepEqual(args.domain, domain,
-                        'A JSON parsable xml domain should be handled just like any other');
-                }
-                return this._super.apply(this, arguments);
-            }
-        });
-
-        this.archs['partner,5,search'] =
-            '<search>'+
-                '<filter string="Foo" name="gently_weeps" domain="' + _.escape(xml_domain) + '" />' +
-            '</search>';
-        this.actions[0].search_view_id = [5, 'search'];
-        this.actions[0].context = {search_default_gently_weeps: true};
-
-        await actionManager.doAction(1);
-
-        actionManager.destroy();
-    });
-
-    QUnit.test('filter with date attribute set as search_default', async function (assert) {
-        assert.expect(1);
-
-        const unpatchDate = patchDate(2019,6,31,13,43,0);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-        });
-
-        this.archs['partner,5,search'] =
-            '<search>'+
-                '<filter string="Date" name="date_field" date="date_field" />' +
-            '</search>';
-        this.actions[0].search_view_id = [5, 'search'];
-        this.actions[0].context = {search_default_date_field: true};
-
-        await actionManager.doAction(1);
-
-        assert.strictEqual($('.o_searchview_input_container .o_facet_values').eq(0).text().trim(),
-            "Date: July 2019",
-            "There should be a filter facet with label 'Date: July 2019'");
-
-        actionManager.destroy();
-        unpatchDate();
-    });
-
-    QUnit.test('Custom Filter datetime with equal operator', async function (assert) {
-        assert.expect(5);
-
-        this.data.partner.fields.date_time_field = {string: "DateTime", type: "datetime", store: true, searchable: true};
-
-        var searchReadCount = 0;
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-            session: {
-                getTZOffset: function () {
-                    return -240;
-                },
-            },
-            mockRPC: async function (route, args) {
-                if (route === '/web/dataset/search_read') {
-                    if (searchReadCount === 1) {
-                        assert.deepEqual(args.domain,
-                            [['date_time_field', '=', '2017-02-22 15:00:00']], // In UTC
-                            'domain is correct'
-                        );
-                    }
-                }
-                return this._super.apply(this, arguments);
-            },
-        });
-        // List view
-        await actionManager.doAction(2);
-
-        await testUtils.dom.click($('button:contains(Filters)'));
-        await testUtils.dom.click($('.o_dropdown_menu .o_add_custom_filter'));
-        assert.strictEqual($('.o_dropdown_menu select.o_searchview_extended_prop_field').val(), 'date_time_field',
-            'the date_time_field should be selected in the custom filter');
-
-        assert.strictEqual($('.o_dropdown_menu select.o_searchview_extended_prop_op').val(), 'between',
-            'The between operator is selected');
-
-        await testUtils.fields.editSelect($('.o_dropdown_menu select.o_searchview_extended_prop_op'), '=');
-
-        assert.strictEqual($('.o_dropdown_menu select.o_searchview_extended_prop_op').val(), '=',
-            'The equal operator is selected');
-
-        await testUtils.fields.editAndTrigger($('.o_searchview_extended_prop_value input:first'), '02/22/2017 11:00:00', ['change']); // in TZ
-
-        searchReadCount = 1;
-        await testUtils.dom.click($('.o_dropdown_menu .o_apply_filter'));
-
-        assert.strictEqual($('.o_dropdown_menu .dropdown-item.selected').text().trim(), 'DateTime is equal to "02/22/2017 11:00:00"',
-            'Label of Filter is correct');
-
-        actionManager.destroy();
-    });
-
-    QUnit.test('Custom Filter datetime between operator', async function (assert) {
-        assert.expect(4);
-
-        this.data.partner.fields.date_time_field = {string: "DateTime", type: "datetime", store: true, searchable: true};
-
-        var searchReadCount = 0;
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-            session: {
-                getTZOffset: function () {
-                    return -240;
-                },
-            },
-            mockRPC: async function (route, args) {
-                if (route === '/web/dataset/search_read') {
-                    if (searchReadCount === 1) {
-                        assert.deepEqual(args.domain,
-                            [
-                                '&', ['date_time_field', '>=', '2017-02-22 15:00:00'], ['date_time_field', '<=', '2017-02-22 21:00:00']  // In UTC
-                            ],
-                            'domain is correct'
-                        );
-                    }
-                }
-                return this._super.apply(this, arguments);
-            },
-        });
-        // List view
-        await actionManager.doAction(2);
-
-        await testUtils.dom.click($('button:contains(Filters)'));
-        await testUtils.dom.click($('.o_dropdown_menu .o_add_custom_filter'));
-        assert.strictEqual($('.o_dropdown_menu select.o_searchview_extended_prop_field').val(), 'date_time_field',
-            'the date_time_field should be selected in the custom filter');
-
-        assert.strictEqual($('.o_dropdown_menu select.o_searchview_extended_prop_op').val(), 'between',
-            'The between operator is selected');
-
-        await testUtils.fields.editAndTrigger($('.o_searchview_extended_prop_value input:first'), '02/22/2017 11:00:00', ['change']); // in TZ
-        await testUtils.fields.editAndTrigger($('.o_searchview_extended_prop_value input:last'), '02/22/2017 17:00:00', ['change']); // in TZ
-
-        searchReadCount = 1;
-        await testUtils.dom.click($('.o_dropdown_menu .o_apply_filter'));
-
-        assert.strictEqual($('.o_dropdown_menu .dropdown-item.selected').text().trim(), 'DateTime is between "02/22/2017 11:00:00 and 02/22/2017 17:00:00"',
-            'Label of Filter is correct');
-
-        actionManager.destroy();
-    });
-
-    QUnit.module('Favorites Menu');
-
-    QUnit.test('dynamic filters are saved dynamic', async function (assert) {
-        assert.expect(1);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-            intercepts: {
-                create_filter: function (ev) {
-                    assert.equal(
-                        ev.data.filter.domain,
-                        `[("date_field", ">=", (context_today() + relativedelta()).strftime("%Y-%m-%d"))]`);
-                },
-            },
-        });
-
-        await actionManager.doAction(12);
-        await testUtils.dom.click($('span.fa-filter'));
-        await testUtils.dom.click($('.o_filters_menu .o_menu_item a'));
-        await testUtils.dom.click($('span.fa-star'));
-        await testUtils.dom.click($('.o_favorites_menu .o_add_favorite'));
-        await testUtils.fields.editInput($('div.o_favorite_name input'), 'name for favorite');
-        await testUtils.dom.click($('.o_favorites_menu .o_save_favorite button'));
-        actionManager.destroy();
-    });
-
-    QUnit.test('save search filter in modal', async function (assert) {
-        assert.expect(5);
-        this.data.partner.records.push({
-            id: 7,
-            display_name: "Partner 6",
-        }, {
-            id: 8,
-            display_name: "Partner 7",
-        }, {
-            id: 9,
-            display_name: "Partner 8",
-        }, {
-            id: 10,
-            display_name: "Partner 9",
-        });
-        this.data.partner.fields.date_field.searchable = true;
-        var form = await createView({
-            View: FormView,
-            model: 'partner',
-            data: this.data,
-            arch: '<form string="Partners">' +
-                '<sheet>' +
-                '<group>' +
-                '<field name="bar"/>' +
-                '</group>' +
-                '</sheet>' +
-                '</form>',
-            archs: {
-                'partner,false,list': '<tree><field name="display_name"/></tree>',
-                'partner,false,search': '<search><field name="date_field"/></search>',
-            },
-            res_id: 1,
-        });
-
-        await testUtils.form.clickEdit(form);
-
-        await testUtils.fields.many2one.clickOpenDropdown('bar');
-        await testUtils.fields.many2one.clickItem('bar','Search');
-
-        assert.strictEqual($('tr.o_data_row').length, 9, "should display 9 records");
-
-        await testUtils.dom.click($('button:contains(Filters)'));
-        await testUtils.dom.click($('.o_add_custom_filter:visible'));
-        assert.strictEqual($('.o_filter_condition select.o_searchview_extended_prop_field').val(), 'date_field',
-            "date field should be selected");
-        await testUtils.dom.click($('.o_apply_filter'));
-
-        assert.strictEqual($('tr.o_data_row').length, 0, "should display 0 records");
-
-        // Save this search
-        await testUtils.mock.intercept(form, 'create_filter', function (event) {
-            assert.strictEqual(event.data.filter.name, "Awesome Test Customer Filter", "filter name should be correct");
-        });
-        await testUtils.dom.click($('button:contains(Favorites)'));
-        await testUtils.dom.click($('.o_add_favorite'));
-        var filterNameInput = $('.o_favorite_name .o_input[type="text"]:visible');
-        assert.strictEqual(filterNameInput.length, 1, "should display an input field for the filter name");
-        await testUtils.fields.editInput(filterNameInput, 'Awesome Test Customer Filter');
-        await testUtils.dom.click($('.o_save_favorite button'));
-
-        form.destroy();
-    });
-
-    QUnit.test('save filters created via autocompletion works', async function (assert) {
-        assert.expect(2);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-            intercepts: {
-                create_filter: function (ev) {
-                    assert.ok(ev.data.filter.domain === `[["foo", "ilike", "a"]]`);
-                },
-            },
-        });
-
-        await actionManager.doAction(10);
-
-        $('.o_searchview_input').trigger($.Event('keypress', {
-            which: 97,
-        }));
-        await testUtils.nextTick();
-        $('.o_searchview_input').trigger($.Event('keyup', {
-            which: $.ui.keyCode.ENTER,
-            keyCode: $.ui.keyCode.ENTER,
-        }));
-        await testUtils.nextTick();
-
-        await testUtils.nextTick();
-
-        assert.strictEqual($('.o_searchview_input_container .o_facet_values span').text().trim(), "a");
-
-        await testUtils.dom.click($('button .fa-star'));
-        await testUtils.dom.click($('.o_favorites_menu .o_add_favorite'));
-        await testUtils.fields.editInput($('div.o_favorite_name input'), 'name for favorite');
-        await testUtils.dom.click($('.o_favorites_menu div.o_save_favorite button'));
-
-        actionManager.destroy();
-    });
-
-    QUnit.test('delete an active favorite remove it both in list of favorite and in search bar', async function (assert) {
-        assert.expect(2);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-            intercepts: {
-                load_filters: function (event) {
-                    return Promise.resolve([{
-                        context: "{}",
-                        domain: "[]",
-                        id: 7,
-                        is_default: true,
-                        name: "My favorite",
-                        sort: "[]",
-                        user_id: [2, "Mitchell Admin"],
-                    }]).then(event.data.on_success);
-                },
-                delete_filter: function (event) {
-                    event.data.on_success();
-                }
-            },
-        });
-
-        await actionManager.doAction(6);
-        await testUtils.dom.click(actionManager.$('.o_control_panel .o_search_options button.o_favorites_menu_button'));
-        assert.containsOnce(actionManager, '.o_control_panel .o_searchview_input_container .o_facet_values');
-        await testUtils.dom.click(actionManager.$('.o_control_panel .o_search_options .o_favorites_menu span.o_trash_button'));
-        await testUtils.modal.clickButton('Ok');
-        assert.containsNone(actionManager, '.o_control_panel .o_searchview_input_container .o_facet_values');
-        actionManager.destroy();
-    });
-
-    QUnit.test('default favorite is not activated if key search_disable_custom_filters is set to true', async function (assert) {
-        assert.expect(1);
-
-        var controlPanel = await createControlPanel({
-            model: 'partner',
-            arch: '<controlpanel/>',
-            data: this.data,
-            intercepts: {
-                load_filters: function (event) {
-                    return Promise.resolve([{
-                        context: "{}",
-                        domain: "[]",
-                        id: 7,
-                        is_default: true,
-                        name: "My favorite",
-                        sort: "[]",
-                        user_id: [2, "Mitchell Admin"],
-                    }]).then(event.data.on_success);
-                },
-            },
-            context: {
-                search_disable_custom_filters: true,
-            },
-        });
-
-        assert.containsNone(controlPanel, '.o_facet_values');
-        controlPanel.destroy();
-    });
-
-    QUnit.test('toggle favorite correctly clears filter, groupbys and field "options"', async function (assert) {
-        assert.expect(8);
-
-        const unpatchDate = patchDate(2019,6,31,13,43,0);
-
-        const actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-            intercepts: {
-                load_filters: function (event) {
-                    return Promise.resolve([{
-                        context: "{}",
-                        domain: "[]",
-                        id: 7,
-                        is_default: false,
-                        name: "My favorite",
-                        sort: "[]",
-                        user_id: [2, "Mitchell Admin"],
-                    }]).then(event.data.on_success);
-                },
-            },
-        });
-
-        this.actions[11].search_view_id = [10, 'search'];
-        await actionManager.doAction(12);
-
-        // activate Foo a
-        await testUtils.fields.triggerKey('press', $('.o_searchview_input'), 97);
-        await testUtils.fields.triggerKey('up', $('.o_searchview_input'), 'enter');
-
-        // activate Date Filter with This Month
-        await testUtils.dom.click($('button .fa-filter'));
-        await testUtils.dom.click($('.o_filters_menu .o_menu_item a'));
-        await testUtils.dom.click($('.o_item_option[data-option_id="this_month"]'));
-
-        // activate Date Groupby with Year
-        await testUtils.dom.click($('button .fa-bars'));
-        await testUtils.dom.click($('.o_group_by_menu .o_menu_item a'));
-        await testUtils.dom.click($('.o_item_option[data-option_id="year"]'));
-
-        assert.strictEqual($('.o_searchview_input_container .o_facet_values').eq(0).text().trim(),
-            "a",
-            "There should be a filter Foo a");
-
-        assert.strictEqual($('.o_searchview_input_container .o_facet_values').eq(1).text().trim(),
-            "Date Field Filter: July 2019",
-            "There should be a filter facet with label 'Date Field Filter: July 2019'");
-
-        assert.strictEqual($('.o_searchview_input_container .o_facet_values').eq(2).text().trim(),
-            "Date Field Groupby: Year",
-            "There should be a groupby facet with label 'Date Field Groupby: Year'");
-
-        // activate the favorite
-        await testUtils.dom.click($('button .fa-star'));
-        await testUtils.dom.click($('.o_favorites_menu .o_menu_item a'));
-
-        assert.containsOnce(actionManager, '.o_searchview_input_container .o_facet_values',
-            "There should be a unique facet in the search bar");
-        assert.strictEqual($('.o_searchview_input_container .o_facet_values').eq(0).text().trim(),
-            "My favorite",
-            "There should be a facet with label 'My favorite''");
-
-        await testUtils.dom.click($('button .fa-filter'));
-        await testUtils.dom.click($('.o_filters_menu .o_menu_item a'));
-        assert.doesNotHaveClass($('.o_item_option[data-option_id="this_month"]'), 'selected',
-            "The Date Filter option 'This Month' should be deactivated");
-
-        await testUtils.dom.click($('button .fa-bars'));
-        await testUtils.dom.click($('.o_group_by_menu .o_menu_item a'));
-        assert.doesNotHaveClass($('.o_item_option[data-option_id="year"]'), 'selected',
-        "The Date Groupby option 'Year' should be deactivated");
-
-        await testUtils.fields.triggerKey('press', $('.o_searchview_input'), 98);
-        await testUtils.fields.triggerKey('up', $('.o_searchview_input'), 'enter');
-        assert.strictEqual($('.o_searchview_input_container .o_facet_values').eq(1).text().trim(),
-            "b",
-            "There should be a filter Foo b");
-
-        actionManager.destroy();
-        unpatchDate();
-    });
-
-    QUnit.test('favorites have unique descriptions (the submenus of the favorite menu are correctly updated)', async function (assert) {
-        assert.expect(7);
-
-        const UID = session.uid;
-
-        const actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-            intercepts: {
-                load_filters: function (event) {
-                    return Promise.resolve([{
-                        context: "{}",
-                        domain: "[]",
-                        id: 7,
-                        is_default: false,
-                        name: "My favorite",
-                        sort: "[]",
-                        user_id: [2, "Mitchell Admin"],
-                    }]).then(event.data.on_success);
-                },
-                create_filter: function (event) {
-                    assert.step('create_filter');
-                    assert.deepEqual(event.data.filter, {
-                        "action_id": 1,
-                        "context": {},
-                        "domain": "[]",
-                        "is_default": false,
-                        "model_id": "partner",
-                        "name": "My favorite 2",
-                        "sort": "[]",
-                        "user_id": UID,
-                      });
-                    return Promise.resolve(1).then(event.data.on_success);
-                }
-            },
-        });
-        testUtils.mock.intercept(actionManager, 'call_service', function (ev) {
-            if (ev.data.service === 'notification') {
-                // A notification alerting that another favorite with same name exists
-                // should be triggered
-                assert.step('notification');
-                assert.deepEqual(ev.data.args[0], {
-                    "className": undefined,
-                    "message": "Filter with same name already exists.",
-                    "sticky": undefined,
-                    "title": "Error",
-                    "type": "danger"
-                  });
-            }
-        }, true);
-
-        await actionManager.doAction(1);
-        await testUtils.dom.click($('button .fa-star'));
-        await testUtils.dom.click($('.o_favorites_menu .o_add_favorite'));
-        await testUtils.fields.editInput($('div.o_favorite_name input'), 'My favorite');
-        await testUtils.dom.click($('.o_favorites_menu div.o_save_favorite button'));
-
-        await testUtils.fields.editInput($('div.o_favorite_name input'), 'My favorite 2');
-        await testUtils.dom.click($('.o_favorites_menu div.o_save_favorite button'));
-
-        await testUtils.dom.click($('.o_favorites_menu .o_add_favorite'));
-        await testUtils.fields.editInput($('div.o_favorite_name input'), 'My favorite 2');
-        await testUtils.dom.click($('.o_favorites_menu div.o_save_favorite button'));
-
-        assert.verifySteps([
-            'notification',
-            'create_filter',
-            'notification'
-        ])
-
-        actionManager.destroy();
-    });
-
-    QUnit.module('Search Arch');
-
-    QUnit.test('arch order of groups of filters preserved', async function (assert) {
-        assert.expect(12);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-        });
-
-        await actionManager.doAction(8);
-        await testUtils.dom.click($('span.fa-filter'));
-        assert.strictEqual($('.o_filters_menu .o_menu_item').length, 11);
-        for (var i = 0;  i < 11; i++) {
-            assert.strictEqual($('.o_filters_menu .o_menu_item').eq(i).text().trim(), (i+1).toString());
-        }
-        actionManager.destroy();
-    });
-
-    QUnit.module('Autocompletion');
-
-    QUnit.test('select an autocomplete field', async function (assert) {
-        assert.expect(3);
-
-        var searchRead = 0;
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-            mockRPC: function (route, args) {
-                if (route === '/web/dataset/search_read') {
-                    if (searchRead === 1) {
-                        assert.deepEqual(args.domain, [["foo", "ilike", "a"]]);
-                    }
-                    searchRead++;
-                }
-                return this._super.apply(this, arguments);
-            },
-        });
-
-        await actionManager.doAction(11);
-
-        await testUtils.fields.triggerKey('press', $('.o_searchview_input'), 97);
-        assert.strictEqual(actionManager.$('.o_searchview_autocomplete li').length, 2,
-            "there should be 2 result for 'a' in search bar autocomplete");
-
-        await testUtils.fields.triggerKey('up', $('.o_searchview_input'), 'enter');
-        assert.strictEqual($('.o_searchview_input_container .o_facet_values').eq(0).text().trim(),
-            "a", "There should be a field facet with label 'a'");
-
-        actionManager.destroy();
-    });
-
-    QUnit.test('select an autocomplete field with `context` key', async function (assert) {
-        assert.expect(9);
-
-        var searchRead = 0;
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-            mockRPC: function (route, args) {
-                if (route === '/web/dataset/search_read') {
-                    if (searchRead === 1) {
-                        assert.deepEqual(args.domain, [["bar", "=", 1]]);
-                        assert.deepEqual(args.context.bar, [1]);
-                    } else if (searchRead === 2) {
-                        assert.deepEqual(args.domain, ["|", ["bar", "=", 1], ["bar", "=", 2]]);
-                        assert.deepEqual(args.context.bar, [1, 2]);
-                    }
-                    searchRead++;
-                }
-                return this._super.apply(this, arguments);
-            },
-        });
-
-        await actionManager.doAction(11);
-        await testUtils.nextTick();
-        assert.strictEqual(searchRead, 1, "there should be 1 search_read");
-
-        // 'r' key to filter on bar "First Record"
-        $('.o_searchview_input').val('r');
-        $('.o_searchview_input').trigger($.Event('keypress', { which: 82, keyCode: 82 }));
-        await testUtils.nextTick();
-        $('.o_searchview_input').trigger($.Event('keydown', { which: $.ui.keyCode.DOWN, keyCode: $.ui.keyCode.DOWN }));
-        await testUtils.nextTick();
-        $('.o_searchview_input').trigger($.Event('keydown', { which: $.ui.keyCode.RIGHT, keyCode: $.ui.keyCode.RIGHT }));
-        await testUtils.nextTick();
-        $('.o_searchview_input').trigger($.Event('keydown', { which: $.ui.keyCode.DOWN, keyCode: $.ui.keyCode.DOWN }));
-        await testUtils.nextTick();
-        $('.o_searchview_input').trigger($.Event('keydown', { which: $.ui.keyCode.ENTER, keyCode: $.ui.keyCode.ENTER }));
-        await testUtils.nextTick();
-
-        await testUtils.nextTick();
-        assert.strictEqual($('.o_searchview_input_container .o_facet_values').eq(0).text().trim(), "First record",
-            "the autocompletion facet should be correct");
-        assert.strictEqual(searchRead, 2, "there should be 2 search_read");
-
-        // 'r' key to filter on bar "Second Record"
-        $('.o_searchview_input').val('r');
-        $('.o_searchview_input').trigger($.Event('keypress', { which: 82, keyCode: 82 }));
-        await testUtils.nextTick();
-        $('.o_searchview_input').trigger($.Event('keydown', { which: $.ui.keyCode.DOWN, keyCode: $.ui.keyCode.DOWN }));
-        await testUtils.nextTick();
-        $('.o_searchview_input').trigger($.Event('keydown', { which: $.ui.keyCode.RIGHT, keyCode: $.ui.keyCode.RIGHT }));
-        await testUtils.nextTick();
-        $('.o_searchview_input').trigger($.Event('keydown', { which: $.ui.keyCode.DOWN, keyCode: $.ui.keyCode.DOWN }));
-        await testUtils.nextTick();
-        $('.o_searchview_input').trigger($.Event('keydown', { which: $.ui.keyCode.DOWN, keyCode: $.ui.keyCode.DOWN }));
-        $('.o_searchview_input').trigger($.Event('keydown', { which: $.ui.keyCode.ENTER, keyCode: $.ui.keyCode.ENTER }));
-        await testUtils.nextTick();
-
-        assert.strictEqual($('.o_searchview_input_container .o_facet_values').eq(0).text().trim(), "First record or Second record",
-            "the autocompletion facet should be correct");
-        assert.strictEqual(searchRead, 3, "there should be 3 search_read");
-
-        actionManager.destroy();
-    });
-
-    QUnit.test('no search text triggers a reload', async function (assert) {
-        assert.expect(2);
-        var rpcs = 0;
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-            mockRPC: function () {
-                rpcs++;
-                return this._super.apply(this, arguments);
-            },
-        });
-
-        await actionManager.doAction(10);
-        rpcs = 0;
-        $('.o_searchview_input').trigger($.Event('keydown', {
-            which: $.ui.keyCode.ENTER,
-            keyCode: $.ui.keyCode.ENTER,
-        }));
-        await testUtils.nextTick();
-
-        $('.o_searchview_input').trigger($.Event('keyup', {
-            which: $.ui.keyCode.ENTER,
-            keyCode: $.ui.keyCode.ENTER,
-        }));
-        await testUtils.nextTick();
-
-        assert.containsNone(actionManager, '.o_searchview_facet_label');
-        assert.strictEqual(rpcs, 2, "should have reloaded");
-
-        actionManager.destroy();
-    });
-
-    QUnit.test('selecting (no result) triggers a re-render', async function (assert) {
-        assert.expect(3);
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-        });
-
-        actionManager.doAction(10);
-        await testUtils.nextTick();
-
-        // 'a' key to filter nothing on bar
-        actionManager.$('.o_searchview_input').val('a');
-        actionManager.$('.o_searchview_input').trigger($.Event('keypress', { which: 65, keyCode: 65 }));
-        await testUtils.nextTick();
-        actionManager.$('.o_searchview_input').trigger($.Event('keydown', { which: $.ui.keyCode.DOWN, keyCode: $.ui.keyCode.DOWN }));
-        await testUtils.nextTick();
-        actionManager.$('.o_searchview_input').trigger($.Event('keydown', { which: $.ui.keyCode.RIGHT, keyCode: $.ui.keyCode.RIGHT }));
-        await testUtils.nextTick();
-        actionManager.$('.o_searchview_input').trigger($.Event('keydown', { which: $.ui.keyCode.DOWN, keyCode: $.ui.keyCode.DOWN }));
-        await testUtils.nextTick();
-
-        assert.strictEqual(actionManager.$('.o_searchview_autocomplete .o-selection-focus').text(), "(no result)",
-            "there should be no result for 'a' in bar");
-
-        actionManager.$('.o_searchview_input').trigger($.Event('keydown', { which: $.ui.keyCode.ENTER, keyCode: $.ui.keyCode.ENTER }));
-        await testUtils.nextTick();
-
-        assert.containsNone(actionManager, '.o_searchview_facet_label');
-        assert.strictEqual(actionManager.$('.o_searchview_input').val(), "",
-            "the search input should be re-rendered");
-
-        actionManager.destroy();
-    });
-
-    QUnit.test('update suggested filters in autocomplete menu with Japanese IME', async function (assert) {
-        assert.expect(4);
-
-        this.actions.push({
-            id: 13,
-            name: 'Partners Action 11',
-            res_model: 'partner',
-            type: 'ir.actions.act_window',
-            views: [[false, 'list']],
-            search_view_id: [13, 'search'],
-        });
-        this.archs['partner,13,search'] = `
-            <search>
-                <field name="foo"/>
-                <field name="bar"/>
-            </search>`;
-
-        const actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-        });
-        actionManager.doAction(13);
-        await testUtils.nextTick();
-
-        // Simulate typing "Test" on search view.
-        const TEST = "TEST";
-        $('.o_searchview_input').val(TEST);
-        for (const char of TEST) {
-            $('.o_searchview_input').trigger($.Event('keypress', {
-                which: char.charCodeAt(0),
-                keyCode: char.charCodeAt(0),
-            }));
-        }
-        $('.o_searchview_input').trigger($.Event('keyup'));
-        await testUtils.nextTick();
-        assert.containsOnce(
-            $,
-            '.o_searchview_autocomplete',
-            "should display autocomplete dropdown menu on typing something in search view"
-        );
-        assert.strictEqual(
-            $('.o_searchview_autocomplete li:first').text(),
-            "Search Foo for: TEST",
-            `1st filter suggestion should be based on typed word "TEST"`
-        );
-
-        // Simulate soft-selection of another suggestion from IME.
-        const テスト = "テスト";
-        $('.o_searchview_input').val(テスト);
-        for (const char of テスト) {
-            $('.o_searchview_input').trigger($.Event('keypress', {
-                which: char.charCodeAt(0),
-                keyCode: char.charCodeAt(0),
-            }));
-        }
-        $('.o_searchview_input').trigger($.Event('keyup'));
-        await testUtils.nextTick();
-        assert.strictEqual(
-            $('.o_searchview_autocomplete li:first').text(),
-            "Search Foo for: テスト",
-            `1st filter suggestion should be updated with soft-selection typed word "テスト"`
-        );
-
-        // Simulate selection on suggestion item "Test" from IME.
-        $('.o_searchview_input').val("TEST");
-        const nativeInputEvent = new window.InputEvent('input', { inputType: 'insertCompositionText' });
-        const jqueryInputEvent = $.Event('input', { bubbles: true });
-        jqueryInputEvent.originalEvent = nativeInputEvent;
-        $('.o_searchview_input').trigger(jqueryInputEvent);
-        await testUtils.nextTick();
-        assert.strictEqual(
-            $('.o_searchview_autocomplete li:first').text(),
-            "Search Foo for: TEST",
-            `1st filter suggestion should finally be updated with click selection on word "TEST" from IME`
-        );
-
-        actionManager.destroy();
-    });
-
-    QUnit.module('TimeRangeMenu');
-
-    QUnit.test('time range menu stays hidden', async function (assert) {
-        assert.expect(4);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-        });
-
-        await actionManager.doAction(1);
-
-        // check that there is no time range menu
-        assert.containsNone(actionManager, '.o_control_panel .o_search_options .o_time_range_menu');
-        // check if search view has no facets
-        assert.strictEqual($('.o_facet_values').length, 0);
-
-        // activate groupby
-        await testUtils.dom.click($('button .fa-bars'));
-        await testUtils.dom.click($('.o_menu_item a').eq(0));
-        // check that there is a facet
-        assert.strictEqual($('div.o_facet_values').length, 1);
-        // check that there is still no time range menu
-        assert.containsNone(actionManager, '.o_control_panel .o_search_options .o_time_range_menu');
-        actionManager.destroy();
-    });
-
-    QUnit.test('time range menu in comparison mode', async function (assert) {
-        assert.expect(46);
-
-        var self = this;
-        var nbrReadGroup = 0;
-
-        var periodOptionText, periodOptionValue;
-        var unpatchDate = patchDate(2017, 2, 22, 1, 0, 0);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-            mockRPC: function (route, args) {
-                if (route === '/web/dataset/call_kw/partner/read_group') {
-                    nbrReadGroup++;
-                    var timeRangeMenuData = args.kwargs.context.timeRangeMenuData;
-                    if (timeRangeMenuData) {
-                        // nbrReadGroup % 2 === 0 is true when the read group is for data, false
-                        // for comparison data
-                        if (nbrReadGroup % 2 === 0) {
-                            assert.deepEqual(timeRangeMenuData.timeRange,
-                                self.periodDomains.shift(),
-                                "time range domain for " + periodOptionText);
-                        } else {
-                            assert.deepEqual(timeRangeMenuData.comparisonTimeRange,
-                                self.previousPeriodDomains.shift(),
-                                "comparaison time range domain for " + periodOptionText);
-                        }
-                    }
-                }
-                return this._super.apply(this, arguments);
-            },
-        });
-        // time range menu should be available in graph view
-        await actionManager.doAction(4);
-
-        var $timeRangeMenu = $('.o_time_range_menu');
-        assert.strictEqual($timeRangeMenu.not('.o_hidden').length, 1,
-            "Time range menu should be visible");
-        assert.strictEqual($('.o_facet_values').length, 0,
-            "Search view has no facet");
-
-        var $periodOptions = $timeRangeMenu.find('.o_time_range_selector option');
-        var periodOptions = $periodOptions.map(function () {
-            return $(this).val();
-        }).toArray();
-        assert.deepEqual(periodOptions, PERIOD_OPTIONS_IDS,
-            "13 period options should be available:");
-
-        for (var option of $periodOptions) {
-            periodOptionText = $(option).text().trim();
-            periodOptionValue = $(option).val();
-            // opens time range menu dropdown
-            await testUtils.dom.click($('.o_time_range_menu_button'));
-            var $timeRangeMenu = $('.o_time_range_menu');
-            // comparison is not checked by default
-            if (!$timeRangeMenu.find('.o_comparison_checkbox').is(':checked')) {
-                await testUtils.dom.click($timeRangeMenu.find('.o_comparison_checkbox'));
-                assert.strictEqual($('.o_comparison_time_range_selector:visible').length, 1,
-                    "Comparison has to be checked (only at the first time)");
-            }
-            // select one period option to test it
-            $timeRangeMenu.find('.o_time_range_selector').val(periodOptionValue);
-            // apply
-            await testUtils.dom.click($timeRangeMenu.find('.o_apply_range'));
-            assert.strictEqual($('.o_facet_values').text().trim(),
-                "Date: " + periodOptionText + " / Previous Period",
-                "Facet should be updated with this period: " + periodOptionValue);
-        }
-        unpatchDate();
-        actionManager.destroy();
-    });
-
-    QUnit.test('a default time range only in context is taken into account', async function (assert) {
-        assert.expect(1);
-
-        var actionManager = await createActionManager({
-            actions: this.actions,
-            archs: this.archs,
-            data: this.data,
-            mockRPC: function (route, args) {
-                // there are only one read_group call (for the groupby lists [])
-                // the read group for the list ["date_field:day"] is not done since no data is available for today)
-                if (route === '/web/dataset/call_kw/partner/read_group') {
-                    var timeRangeMenuData = args.kwargs.context.timeRangeMenuData;
-                    assert.ok(timeRangeMenuData.timeRange.length > 0, "time range should be non empty");
-                }
-                return this._super.apply(this, arguments);
-            },
-        });
-
-        await actionManager.doAction({
-            res_model: 'partner',
-            type: 'ir.actions.act_window',
-            views: [[false, 'pivot']],
-            context: {time_ranges: {range: 'today', field: 'date_field'}}
-        });
-        actionManager.destroy();
-    });
-
-    QUnit.test('Customizing filter does not close the filter dropdown', async function (assert) {
-        assert.expect(5);
-        var self = this;
-
-        _.each(this.data.partner.records.slice(), function (rec) {
-            var copy = _.defaults({}, rec, {id: rec.id + 10 });
-            self.data.partner.records.push(copy);
-        });
-
-        this.data.partner.fields.date_field.searchable = true;
-        var form = await createView({
-            View: FormView,
-            model: 'partner',
-            data: this.data,
-            arch: '<form string="Partners">' +
-                    '<field name="bar"/>' +
-                '</form>',
-            viewOptions: {
-                mode: 'edit',
-            },
-            archs: {
-                'partner,false,list': '<tree><field name="display_name"/></tree>',
-                'partner,false,search': '<search><field name="date_field"/></search>',
-            },
-            res_id: 1,
-            intercepts: {
-                create_filter: function (ev) {
-                    var data = ev.data;
-                    assert.strictEqual(data.filter.name, 'Fire on the bayou');
-                    assert.strictEqual(data.filter.is_default, true);
-                },
-            },
-        });
-
-        await testUtils.fields.many2one.clickOpenDropdown('bar');
-        await testUtils.fields.many2one.clickItem('bar', 'Search More');
-
-        assert.containsOnce(document.body, '.modal');
-
-        await testUtils.dom.click($('.modal .o_filters_menu_button'));
-
-        var $filterDropdown = $('.modal .o_filters_menu');
-        await testUtils.dom.click($filterDropdown.find('.o_add_custom_filter'));
-
-        assert.containsN($filterDropdown, '.o_input', 4);
-
-        // We really are interested in the click event
-        // We do it twice on each input to make sure
-        // the parent dropdown doesn't react to any of it
-        _.each($filterDropdown.find('input'), async function (input) {
-            var $input = $(input);
-            $input.click();
-            $input.click();
-            await testUtils.nextTick();
-        });
-        assert.isVisible($filterDropdown);
-
-        // Favorites Menu
-        var $modal = $('.modal');
-        await testUtils.dom.click($modal.find('.o_favorites_menu_button'));
-        await testUtils.dom.click($modal.find('.o_add_favorite'));
-        $modal.find('.o_search_options .dropdown-menu').one('click', function (ev) {
-            // This handler is on the webClient
-            // But since the test suite doesn't have one
-            // We manually set it here
-            ev.stopPropagation();
-        });
-        await testUtils.fields.editInput($modal.find('div.o_favorite_name input'), 'Fire on the bayou');
-        await testUtils.dom.click($modal.find('.o_add_favorite ~ div label:contains(Use by default)'));
-        await testUtils.dom.click($modal.find('.o_save_favorite button'));
-
-        form.destroy();
-    });
-});
-});
diff --git a/addons/web/static/tests/views/view_dialogs_tests.js b/addons/web/static/tests/views/view_dialogs_tests.js
index 4e205c420a1..e86d0f53297 100644
--- a/addons/web/static/tests/views/view_dialogs_tests.js
+++ b/addons/web/static/tests/views/view_dialogs_tests.js
@@ -7,8 +7,16 @@ var testUtils = require('web.test_utils');
 var Widget = require('web.Widget');
 var FormView = require('web.FormView');
 
+const cpHelpers = testUtils.controlPanel;
 var createView = testUtils.createView;
 
+async function createParent(params) {
+    var widget = new Widget();
+    params.server =  await testUtils.mock.addMockEnvironment(widget, params);
+    owl.Component.env = testUtils.mock.getMockedOwlEnv(params);
+    return widget;
+}
+
 QUnit.module('Views', {
     beforeEach: function () {
         this.data = {
@@ -56,17 +64,10 @@ QUnit.module('Views', {
 
     QUnit.module('view_dialogs');
 
-    function createParent(params) {
-        var widget = new Widget();
-
-        testUtils.mock.addMockEnvironment(widget, params);
-        return widget;
-    }
-
     QUnit.test('formviewdialog buttons in footer are positioned properly', async function (assert) {
         assert.expect(2);
 
-        var parent = createParent({
+        var parent = await createParent({
             data: this.data,
             archs: {
                 'partner,false,form':
@@ -97,7 +98,7 @@ QUnit.module('Views', {
         this.data.partner.fields.poney_ids = {string: "Poneys", type: "one2many", relation: 'partner'};
         this.data.partner.records[0].poney_ids = [];
 
-        var parent = createParent({
+        var parent = await createParent({
             data: this.data,
             archs: {
                 'partner,false,form':
@@ -129,7 +130,7 @@ QUnit.module('Views', {
         assert.expect(3);
 
         var search = 0;
-        var parent = createParent({
+        var parent = await createParent({
             data: this.data,
             archs: {
                 'partner,false,list':
@@ -196,9 +197,8 @@ QUnit.module('Views', {
             dialog = result;
         });
         await testUtils.nextTick();
-
-        await testUtils.dom.click(dialog.$('.o_searchview_facet:contains(groupby_bar) .o_facet_remove'));
-        await testUtils.dom.click(dialog.$('.o_searchview_facet .o_facet_remove'));
+        await cpHelpers.removeFacet('.modal', "Bar");
+        await cpHelpers.removeFacet('.modal');
 
         parent.destroy();
     });
@@ -206,7 +206,7 @@ QUnit.module('Views', {
     QUnit.test('SelectCreateDialog correctly evaluates domains', async function (assert) {
         assert.expect(1);
 
-        var parent = createParent({
+        var parent = await createParent({
             data: this.data,
             archs: {
                 'partner,false,list':
@@ -245,7 +245,7 @@ QUnit.module('Views', {
     QUnit.test('SelectCreateDialog list view in readonly', async function (assert) {
         assert.expect(1);
 
-        var parent = createParent({
+        var parent = await createParent({
             data: this.data,
             archs: {
                 'partner,false,list':
@@ -437,7 +437,7 @@ QUnit.module('Views', {
             },
         });
 
-        var parent = createParent({
+        var parent = await createParent({
             data: this.data,
             archs: {
                 'partner,false,list':
@@ -450,14 +450,19 @@ QUnit.module('Views', {
                     '</search>',
 
             },
-            intercepts: {
-                create_filter: function (event) {
-                    var filter = event.data.filter;
-                    assert.deepEqual(filter.domain, `[("bar", "=", True)]`,
-                        "should save the correct domain");
-                    assert.deepEqual(filter.context, {shouldBeInFilterContext: true},
-                        "should save the correct context");
-                },
+            env: {
+                dataManager: {
+                    create_filter: function (filter) {
+                        assert.strictEqual(filter.domain, `[("bar", "=", True)]`,
+                            "should save the correct domain");
+                        const expectedContext = {
+                            group_by: [], // default groupby is an empty list
+                            shouldBeInFilterContext: true,
+                        };
+                        assert.deepEqual(filter.context, expectedContext,
+                            "should save the correct context");
+                    },
+                }
             },
         });
 
@@ -470,19 +475,20 @@ QUnit.module('Views', {
         });
         await testUtils.nextTick();
 
+
         assert.containsN(dialog, '.o_data_row', 3, "should contain 3 records");
 
         // filter on bar
-        await testUtils.dom.click(dialog.$('.o_dropdown_toggler_btn:contains(Filters)'));
-        await testUtils.dom.click(dialog.$('.o_filters_menu a:contains(Bar)'));
+        await cpHelpers.toggleFilterMenu('.modal');
+        await cpHelpers.toggleMenuItem('.modal', "Bar");
 
         assert.containsN(dialog, '.o_data_row', 2, "should contain 2 records");
 
         // save filter
-        await testUtils.dom.click(dialog.$('.o_dropdown_toggler_btn:contains(Favorites)'));
-        await testUtils.dom.click(dialog.$('.o_add_favorite'));
-        await testUtils.fields.editInput(dialog.$('.o_favorite_name input[type=text]'), 'some name'); // name the filter
-        await testUtils.dom.click(dialog.$('.o_save_favorite button'));
+        await cpHelpers.toggleFavoriteMenu('.modal');
+        await cpHelpers.toggleSaveFavorite('.modal');
+        await cpHelpers.editFavoriteName('.modal', "some name");
+        await cpHelpers.saveFavorite('.modal');
 
         testUtils.mock.unpatch(ListController);
         parent.destroy();
@@ -555,7 +561,7 @@ QUnit.module('Views', {
         this.data.partner.records[0].poney_ids = [];
         var reject = true;
 
-        var parent = createParent({
+        var parent = await createParent({
             data: this.data,
             archs: {
                 'partner,false,form':
diff --git a/addons/web/static/tests/widgets/data_export_tests.js b/addons/web/static/tests/widgets/data_export_tests.js
index c9c51219571..2d3488f5891 100644
--- a/addons/web/static/tests/widgets/data_export_tests.js
+++ b/addons/web/static/tests/widgets/data_export_tests.js
@@ -1,12 +1,13 @@
 odoo.define('web.data_export_tests', function (require) {
 "use strict";
 
-var framework = require('web.framework');
-var ListView = require('web.ListView');
-var testUtils = require('web.test_utils');
-var data = require('web.data');
+const framework = require('web.framework');
+const ListView = require('web.ListView');
+const testUtils = require('web.test_utils');
+const data = require('web.data');
 
-var createView = testUtils.createView;
+const cpHelpers = testUtils.controlPanel;
+const createView = testUtils.createView;
 
 QUnit.module('widgets', {
     beforeEach: function () {
@@ -63,7 +64,7 @@ QUnit.module('widgets', {
             data: this.data,
             arch: '<tree><field name="foo"/></tree>',
             viewOptions: {
-                hasSidebar: true,
+                hasActionMenus: true,
             },
             mockRPC: function (route) {
                 if (route === '/web/export/formats') {
@@ -104,9 +105,11 @@ QUnit.module('widgets', {
             },
         });
 
+
         await testUtils.dom.click(list.$('thead th.o_list_record_selector input'));
-        await testUtils.dom.click(list.sidebar.$('.o_dropdown_toggler_btn:contains(Action)'));
-        await testUtils.dom.click(list.sidebar.$('a:contains(Export)'));
+
+        await cpHelpers.toggleActionMenu(list);
+        await cpHelpers.toggleMenuItem(list, 'Export');
 
         assert.strictEqual($('.modal').length, 1, "a modal dialog should be open");
         assert.strictEqual($('div.o_tree_column:contains(Activities)').length, 1,
@@ -144,7 +147,7 @@ QUnit.module('widgets', {
             data: this.data,
             arch: '<tree><field name="foo"/></tree>',
             viewOptions: {
-                hasSidebar: true,
+                hasActionMenus: true,
             },
             mockRPC: function (route) {
                 if (route === '/web/export/formats') {
@@ -179,10 +182,12 @@ QUnit.module('widgets', {
             },
         });
 
+
         // Open the export modal
         await testUtils.dom.click(list.$('thead th.o_list_record_selector input'));
-        await testUtils.dom.click(list.sidebar.$('.o_dropdown_toggler_btn:contains(Action)'));
-        await testUtils.dom.click(list.sidebar.$('a:contains(Export)'));
+        await cpHelpers.toggleActionMenu(list);
+        await cpHelpers.toggleMenuItem(list, 'Export');
+
         assert.strictEqual($('.modal').length, 1,
             "a modal dialog should be open");
 
@@ -214,7 +219,7 @@ QUnit.module('widgets', {
             data: this.data,
             arch: '<tree><field name="foo"/></tree>',
             viewOptions: {
-                hasSidebar: true,
+                hasActionMenus: true,
             },
             mockRPC: function (route) {
                 if (route === '/web/export/formats') {
@@ -248,10 +253,12 @@ QUnit.module('widgets', {
                 return this._super.apply(this, arguments);
             },
         });
+
+
         // Open the export modal
-        await testUtils.dom.click(list.$('thead .o_list_record_selector input'));
-        await testUtils.dom.click(list.sidebar.$('.o_dropdown_toggler_btn:contains(Action)'));
-        await testUtils.dom.click(list.sidebar.$('a:contains(Export)'));
+        await testUtils.dom.click(list.$('thead th.o_list_record_selector input'));
+        await cpHelpers.toggleActionMenu(list);
+        await cpHelpers.toggleMenuItem(list, 'Export');
 
         assert.strictEqual($('.modal .o_export_tree_item:visible').length, 2, "There should be only two items visible");
         await testUtils.dom.click($('.modal .o_export_search_input'));
@@ -333,7 +340,6 @@ QUnit.module('widgets', {
             View: ListView,
             model: 'partner',
             data: this.data,
-            debug: true,
             arch: `
                 <tree>
                     <field name="foo"/>
diff --git a/addons/web/static/tests/widgets/dropdown_menu_tests.js b/addons/web/static/tests/widgets/dropdown_menu_tests.js
deleted file mode 100644
index ff53b3d77e8..00000000000
--- a/addons/web/static/tests/widgets/dropdown_menu_tests.js
+++ /dev/null
@@ -1,203 +0,0 @@
-odoo.define('web.dropdown_menu_tests', function (require) {
-"use strict";
-
-var DropdownMenu = require('web.DropdownMenu');
-var testUtils = require('web.test_utils');
-
-function createDropdownMenu(items, params) {
-    params = params || {};
-    var target = params.debug ? document.body :  $('#qunit-fixture');
-    var menu = new DropdownMenu(null, items);
-    testUtils.mock.addMockEnvironment(menu, params);
-    return menu.appendTo(target).then(function() {
-        return menu;
-    });
-}
-
-QUnit.module('Web', {
-    beforeEach: function () {
-        this.items = [
-            {
-                isActive: false,
-                description: 'Some Item',
-                id: 1,
-                groupId: 1,
-                groupNumber: 1,
-            },
-            {
-                isActive: true,
-                description: 'Some other Item',
-                id: 2,
-                groupId: 2,
-                groupNumber: 2,
-            },
-        ];
-    },
-}, function () {
-    QUnit.module('DropdownMenu');
-
-    QUnit.test('simple rendering', async function (assert) {
-        assert.expect(4);
-
-        var dropdownMenu = await createDropdownMenu(this.items);
-        assert.containsN(dropdownMenu, '.dropdown-divider, .dropdown-item, .dropdown-item-text', 4,
-            'should have 4 elements counting the dividers');
-        assert.strictEqual(dropdownMenu.$('.o_menu_item').first().text().trim(), 'Some Item',
-            'first element should have "Some Item" description');
-        assert.ok(!dropdownMenu.$('.o_menu_item > .dropdown-item').eq(0).hasClass('selected'),
-            'first element should not be selected');
-        assert.ok(dropdownMenu.$('.o_menu_item > .dropdown-item').eq(1).hasClass('selected'),
-            'second element should be selected');
-
-        dropdownMenu.destroy();
-    });
-
-    QUnit.test('click on an item without options should toggle it', async function (assert) {
-        assert.expect(7);
-
-        var self = this;
-        var dropdownMenu = await createDropdownMenu(this.items, {
-            intercepts: {
-                menu_item_clicked: function (ev) {
-                    assert.strictEqual(ev.data.id, 1);
-                    self.items[0].isActive = !self.items[0].isActive;
-                    dropdownMenu.update(self.items);
-                },
-            },
-        });
-        await testUtils.dom.click(dropdownMenu.$('button:first'));
-        assert.doesNotHaveClass(dropdownMenu.$('.o_menu_item:first > .dropdown-item').first(), 'selected');
-        await testUtils.dom.click(dropdownMenu.$('.o_menu_item a').first());
-        assert.hasClass(dropdownMenu.$('.o_menu_item:first > .dropdown-item'), 'selected');
-        assert.ok(dropdownMenu.$('.o_menu_item:first').is(':visible'),
-            'item should still be visible');
-        await testUtils.dom.click(dropdownMenu.$('.o_menu_item a').first());
-        assert.doesNotHaveClass(dropdownMenu.$('.o_menu_item:first > .dropdown-item').first(), 'selected');
-        assert.ok(dropdownMenu.$('.o_menu_item:first').is(':visible'),
-            'item should still be visible');
-        dropdownMenu.destroy();
-    });
-
-    QUnit.test('click on an item should not change url', async function (assert) {
-        assert.expect(0);
-
-        var dropdownMenu = await createDropdownMenu(this.items);
-        await testUtils.dom.click(dropdownMenu.$('.o_dropdown_toggler_btn'));
-        dropdownMenu.$el.click(function () {
-            // we do not want a click to get out and change the url, for example
-            throw new Error('No click should get out of the dropdown menu');
-        });
-        await testUtils.dom.click(dropdownMenu.$('.o_menu_item a').first());
-
-        dropdownMenu.destroy();
-    });
-
-    QUnit.test('options rendering', async function (assert) {
-        assert.expect(3);
-
-        this.items[0].hasOptions = true;
-        this.items[0].options = [
-            {optionId: 1, description: "First Option", groupId: 1},
-            {optionId: 2, description: "Second Option", groupId: 1}
-        ];
-        this.items[0].currentOptionIds = new Set();
-        var dropdownMenu = await createDropdownMenu(this.items);
-        testUtils.dom.click(dropdownMenu.$('button:first'));
-        assert.containsN(dropdownMenu, '.dropdown-divider, .dropdown-item, .dropdown-item-text', 4);
-        // open options menu
-        await testUtils.dom.click(dropdownMenu.$('span.fa-caret-right'));
-        assert.containsN(dropdownMenu, '.dropdown-divider, .dropdown-item, .dropdown-item-text', 7);
-        // close options menu
-        await testUtils.dom.click(dropdownMenu.$('span.fa-caret-down'));
-        assert.containsN(dropdownMenu, '.dropdown-divider, .dropdown-item, .dropdown-item-text', 4);
-
-        dropdownMenu.destroy();
-    });
-
-    QUnit.test('close menu closes also submenus', async function (assert) {
-        assert.expect(2);
-
-        this.items[0].hasOptions = true;
-        this.items[0].options = [
-            {optionId: 1, description: "First Option"},
-            {optionId: 2, description: "Second Option"}
-        ];
-        this.items[0].currentOptionIds = new Set();
-        var dropdownMenu = await createDropdownMenu(this.items);
-        // open dropdown menu
-        testUtils.dom.click(dropdownMenu.$('button:first'));
-        // open options menu
-        await testUtils.dom.click(dropdownMenu.$('span.fa-caret-right'));
-        assert.containsN(dropdownMenu, '.dropdown-divider, .dropdown-item, .dropdown-item-text', 7);
-        await testUtils.dom.click(dropdownMenu.$('button:first'));
-        await testUtils.dom.click(dropdownMenu.$('button:first'));
-        assert.containsN(dropdownMenu, '.dropdown-divider, .dropdown-item, .dropdown-item-text', 4);
-
-        dropdownMenu.destroy();
-    });
-
-    QUnit.test('click on an option should trigger the event "item_option_clicked" with appropriate data', async function (assert) {
-        assert.expect(18);
-
-        var self = this;
-        var eventNumber = 0;
-        this.items[0].hasOptions = true;
-        this.items[0].options = [
-            {optionId: 1, description: "First Option"},
-            {optionId: 2, description: "Second Option"}
-        ];
-        this.items[0].currentOptionIds = new Set();
-        var dropdownMenu = await createDropdownMenu(this.items, {
-            intercepts: {
-                item_option_clicked: function (ev) {
-                    eventNumber++;
-                    assert.strictEqual(ev.data.id, 1);
-                    if (eventNumber === 1) {
-                        assert.strictEqual(ev.data.optionId, 1);
-                        self.items[0].isActive = true;
-                        self.items[0].currentOptionIds.add(1);
-                    }
-                    if (eventNumber === 2) {
-                        assert.strictEqual(ev.data.optionId, 2);
-                        self.items[0].currentOptionIds = new Set([1,2]);
-                    }
-                    if (eventNumber === 3) {
-                        assert.strictEqual(ev.data.optionId, 1);
-                        self.items[0].currentOptionIds = new Set([2]);
-                    }
-                    if (eventNumber === 4) {
-                        assert.strictEqual(ev.data.optionId, 2);
-                        self.items[0].isActive = false;
-                        self.items[0].currentOptionIds.clear();
-                    }
-                    dropdownMenu.update(self.items);
-                },
-            },
-        });
-        await testUtils.nextTick();
-        // open dropdown menu
-        await testUtils.dom.click(dropdownMenu.$('button:first'));
-        assert.containsN(dropdownMenu, '.dropdown-divider, .o_menu_item', 4);
-        await testUtils.dom.clickFirst(dropdownMenu.$('.o_menu_item'));
-        // click on first option
-        await testUtils.dom.click(dropdownMenu.$('.o_item_option > .dropdown-item').eq(0));
-        assert.hasClass(dropdownMenu.$('.o_menu_item > .dropdown-item').first(), 'selected');
-        assert.hasClass(dropdownMenu.$('.o_item_option> .dropdown-item').eq(0),'selected');
-        assert.doesNotHaveClass(dropdownMenu.$('.o_item_option > .dropdown-item').eq(1), 'selected');
-        // click on second option
-        await testUtils.dom.click($('.o_item_option > .dropdown-item').eq(1));
-        assert.hasClass(dropdownMenu.$('.o_menu_item > .dropdown-item').first(), 'selected');
-        assert.hasClass(dropdownMenu.$('.o_item_option > .dropdown-item').eq(0), 'selected');
-        assert.hasClass(dropdownMenu.$('.o_item_option > .dropdown-item').eq(1), 'selected');
-        // click again on first option
-        await testUtils.dom.click(dropdownMenu.$('.o_item_option > .dropdown-item').eq(0));
-        // click again on second option
-        await testUtils.dom.click($('.o_item_option > .dropdown-item').eq(1));
-        assert.doesNotHaveClass(dropdownMenu.$('.o_menu_item > .dropdown-item').first(), 'selected');
-        assert.doesNotHaveClass(dropdownMenu.$('.o_item_option > .dropdown-item').eq(0), 'selected');
-        assert.doesNotHaveClass(dropdownMenu.$('.o_item_option > .dropdown-item').eq(1), 'selected');
-
-        dropdownMenu.destroy();
-    });
-});
-});
diff --git a/addons/website_sale/static/tests/tours/website_sale_shop_cart_recovery.js b/addons/website_sale/static/tests/tours/website_sale_shop_cart_recovery.js
index 079029ee4e3..aeae75fc0b8 100644
--- a/addons/website_sale/static/tests/tours/website_sale_shop_cart_recovery.js
+++ b/addons/website_sale/static/tests/tours/website_sale_shop_cart_recovery.js
@@ -46,7 +46,7 @@ tour.register('shop_cart_recovery', {
     },
     {
         content: "click action",
-        trigger: '.btn:containsExact("Action")',
+        trigger: '.o_dropdown_toggler_btn:contains("Action")',
     },
     {
         content: "click Send a Cart Recovery Email",
diff --git a/odoo/addons/test_new_api/static/tests/tours/x2many.js b/odoo/addons/test_new_api/static/tests/tours/x2many.js
index f1683d09c69..a9ad0a7fecc 100644
--- a/odoo/addons/test_new_api/static/tests/tours/x2many.js
+++ b/odoo/addons/test_new_api/static/tests/tours/x2many.js
@@ -77,6 +77,11 @@ odoo.define('web.test.x2many', function (require) {
     }, { // add message a
         content: "Select First Tab",
         trigger: 'a[role=tab]:first',
+        // We check the "Save" button is in the DOM to ensure that the form renderer
+        // is fully loaded and is on the right pane (right now the renderer dispatches
+        // a click on its last active pane header. We can remove this assert once the
+        // form renderer behaves properly).
+        extra_trigger: 'button.o_form_button_save',
     }, {
         content: "create new message a",
         trigger: '.o_form_sheet .tab-pane:eq(0) .o_field_x2many_list_row_add a'