From 1316dc53ab1e171f6ff9d82285a820239ad5d322 Mon Sep 17 00:00:00 2001
From: "stefanorigano (SRI)" <sri@odoo.com>
Date: Tue, 7 Sep 2021 06:22:08 +0000
Subject: [PATCH 01/31] [FIX] web: correctly target 'o_dropdown_item' child

Partially revert b0c325 removing rules defining '<a>' children as
exceptions. Indeed, to have a child wrapping the entry's content (either
<a> or <span>) is now considered the norm.

This commit will extend bootstrap 'dropdown-item' design to any
'o_dropdown_item' child rather than on 'o_dropdown_item' itself.

Part-of: odoo/odoo#73311
---
 addons/web/static/src/core/dropdown/dropdown.scss | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/addons/web/static/src/core/dropdown/dropdown.scss b/addons/web/static/src/core/dropdown/dropdown.scss
index 7cbacae0411..b77fd883020 100644
--- a/addons/web/static/src/core/dropdown/dropdown.scss
+++ b/addons/web/static/src/core/dropdown/dropdown.scss
@@ -122,6 +122,14 @@
     }
   }
 
+  &_item > *:first-child:last-child {
+    @extend .dropdown-item;
+  }
+
+  &_item.o_dropdown_active > *:first-child:last-child {
+    @extend .dropdown-item:hover;
+  }
+
   &_menu_group {
     @extend .dropdown-header;
   }

From 7f025503aedd88f0480e43799ec0a225ee0b2512 Mon Sep 17 00:00:00 2001
From: Stefano Rigano <sri@odoo.com>
Date: Tue, 7 Sep 2021 06:22:10 +0000
Subject: [PATCH 02/31] [IMP] web: handle owl nested dropdowns

Part-of: odoo/odoo#73311
---
 .../static/src/core/dropdown/dropdown.scss    | 71 +++++++++++++++++++
 .../src/webclient/webclient_layout.scss       | 12 ++++
 2 files changed, 83 insertions(+)

diff --git a/addons/web/static/src/core/dropdown/dropdown.scss b/addons/web/static/src/core/dropdown/dropdown.scss
index b77fd883020..ebd3bffa123 100644
--- a/addons/web/static/src/core/dropdown/dropdown.scss
+++ b/addons/web/static/src/core/dropdown/dropdown.scss
@@ -135,6 +135,77 @@
   }
 }
 
+// = Owl Nested Dropdowns
+// ----------------------------------------------------------------------------
+
+.o_dropdown .o_dropdown {
+
+  // Define submenus 'inline' design (nested into the parent menu)
+  @mixin -o-inline-dropdown-menu {
+    .o_dropdown_toggler.o_dropdown_active:after {
+      content: "\f0d7";
+    }
+
+    .o_dropdown_menu {
+      left: 0;
+      position: relative;
+      max-height: none;
+      box-shadow: none;
+      margin-top: 0;
+      margin-bottom: $dropdown-padding-y;
+      padding-top: 0;
+      background: rgba(#000, .01);
+      border-width: 0 0 1px 0;
+
+      &:last-child {
+        border-bottom-width: 0;
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  // The toggler looks like a regular menu entry
+  .o_dropdown_toggler {
+    @extend .dropdown-item;
+
+    &:after {
+      @include o-position-absolute($right: 0);
+      transform: translate(-.6em, .3em);
+      font: .9em/1em FontAwesome;
+      content: "\f0da";
+    }
+  }
+
+  // Small screen: all submenus are inline
+  @include media-breakpoint-down('lg') {
+    @include -o-inline-dropdown-menu ;
+  }
+
+  // Large screen: submenus floats...
+  @include media-breakpoint-up('lg') {
+    .o_dropdown_menu {
+      top: 0;
+      left: 100%;
+    }
+
+    //... except when specified otherwise
+    &.o_dropdown_inline {
+      @include -o-inline-dropdown-menu ;
+    }
+  }
+}
+
+// Unfortunately is not possible to set the parent menu's overflow to be 'visible'
+// horizontally (to show floating submenus) and 'auto/scroll' vertically (to hide
+// menu entries when the menu is very long).
+// We will set it 'visible' letting 'o_view_controller' handling scrollbars.
+@include media-breakpoint-up('lg') {
+  .o_dropdown_menu {
+    overflow: visible;
+    max-height: none;
+  }
+}
+
 // = Owl components specific rules
 // -----------------------------------------------------------------------------
 .o_dropdown_item:not(.disabled):not(:disabled) {
diff --git a/addons/web/static/src/webclient/webclient_layout.scss b/addons/web/static/src/webclient/webclient_layout.scss
index daaebf51f40..0a9094809d5 100644
--- a/addons/web/static/src/webclient/webclient_layout.scss
+++ b/addons/web/static/src/webclient/webclient_layout.scss
@@ -19,6 +19,18 @@ html {
         height: 100%;
         display: flex;
         flex-flow: column nowrap;
+
+        @include media-breakpoint-up(lg) {
+          overflow: auto;
+
+          -ms-overflow-style: none; // IE and Edge
+          scrollbar-width: none;    // Firefox
+
+          &::-webkit-scrollbar {    // Chrome, Safari and Opera
+            display: none;
+          }
+        }
+
         > .o_control_panel {
           flex: 0 0 auto;
         }

From 627c7768c9ab2357b3380c5c963e9c7dee9cdc9b Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Tue, 7 Sep 2021 06:22:12 +0000
Subject: [PATCH 03/31] [FIX] web: Support primitives for 'in' in domains

Before this commit, the new webclient 'Domain' module only supported
arrays for domains constructed with an 'in' operator.

Now, it also supports any primitive, that will then be wrapped in an
array.

Part-of: odoo/odoo#73311
---
 addons/web/static/src/core/domain.js         | 20 ++++++++++----------
 addons/web/static/tests/core/domain_tests.js |  4 ++++
 2 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/addons/web/static/src/core/domain.js b/addons/web/static/src/core/domain.js
index fa92462d090..af1e0f5c3a4 100644
--- a/addons/web/static/src/core/domain.js
+++ b/addons/web/static/src/core/domain.js
@@ -203,16 +203,16 @@ function matchCondition(record, condition) {
             return fieldValue > value;
         case ">=":
             return fieldValue >= value;
-        case "in":
-            if (Array.isArray(fieldValue)) {
-                return fieldValue.some((fv) => value.includes(fv));
-            }
-            return value.includes(fieldValue);
-        case "not in":
-            if (Array.isArray(fieldValue)) {
-                return !fieldValue.some((fv) => value.includes(fv));
-            }
-            return !value.includes(fieldValue);
+        case "in": {
+            const val = Array.isArray(value) ? value : [value];
+            const fieldVal = Array.isArray(fieldValue) ? fieldValue : [fieldValue];
+            return fieldVal.some((fv) => val.includes(fv));
+        }
+        case "not in": {
+            const val = Array.isArray(value) ? value : [value];
+            const fieldVal = Array.isArray(fieldValue) ? fieldValue : [fieldValue];
+            return !fieldVal.some((fv) => val.includes(fv));
+        }
         case "like":
             if (fieldValue === false) {
                 return false;
diff --git a/addons/web/static/tests/core/domain_tests.js b/addons/web/static/tests/core/domain_tests.js
index d3c7edc76b7..f7534d6b4fa 100644
--- a/addons/web/static/tests/core/domain_tests.js
+++ b/addons/web/static/tests/core/domain_tests.js
@@ -205,12 +205,16 @@ QUnit.module("domain", {}, () => {
     });
 
     QUnit.test("other operators", function (assert) {
+        assert.ok(new Domain([["a", "in", 3]]).contains({ a: 3 }));
         assert.ok(new Domain([["a", "in", [1, 2, 3]]]).contains({ a: 3 }));
         assert.ok(new Domain([["a", "in", [1, 2, 3]]]).contains({ a: [3] }));
+        assert.notOk(new Domain([["a", "in", 3]]).contains({ a: 5 }));
         assert.notOk(new Domain([["a", "in", [1, 2, 3]]]).contains({ a: 5 }));
         assert.notOk(new Domain([["a", "in", [1, 2, 3]]]).contains({ a: [5] }));
+        assert.notOk(new Domain([["a", "not in", 3]]).contains({ a: 3 }));
         assert.notOk(new Domain([["a", "not in", [1, 2, 3]]]).contains({ a: 3 }));
         assert.notOk(new Domain([["a", "not in", [1, 2, 3]]]).contains({ a: [3] }));
+        assert.ok(new Domain([["a", "not in", 3]]).contains({ a: 5 }));
         assert.ok(new Domain([["a", "not in", [1, 2, 3]]]).contains({ a: 5 }));
         assert.ok(new Domain([["a", "not in", [1, 2, 3]]]).contains({ a: [5] }));
         assert.ok(new Domain([["a", "like", "abc"]]).contains({ a: "abc" }));

From 659e7ca9757d786763b5fb2c6affc548894ce1cb Mon Sep 17 00:00:00 2001
From: "Lucas Perais (lpe)" <lpe@odoo.com>
Date: Tue, 7 Sep 2021 06:22:13 +0000
Subject: [PATCH 04/31] [IMP] web: core: deepCopy function for Objects

Part-of: odoo/odoo#73311
---
 addons/web/static/src/core/utils/objects.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/addons/web/static/src/core/utils/objects.js b/addons/web/static/src/core/utils/objects.js
index 7962bdf01e3..4e7638b0b53 100644
--- a/addons/web/static/src/core/utils/objects.js
+++ b/addons/web/static/src/core/utils/objects.js
@@ -10,3 +10,14 @@ export function shallowEqual(obj1, obj2) {
         obj1Keys.every((key) => obj1[key] === obj2[key])
     );
 }
+
+/**
+ * Deep copies an object. As it relies on JSON this function as some limitations
+ * - no support for circular objects
+ * - no support for specific classes, that will at best be lost and at worst crash (Map, Set etc...)
+ * @param  {Object} An object that is fully JSON stringifiable
+ * @return {Object}
+ */
+export function deepCopy(obj) {
+    return JSON.parse(JSON.stringify(obj));
+}

From 6cfe05ae4bbfeae41a79e8eb902e4660c11f19f2 Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Tue, 7 Sep 2021 06:22:15 +0000
Subject: [PATCH 05/31] [REV] web: do not close dropdowns on active el change

This is actually not what we want. It changes the behavior of
the favorite menu: when the user deletes an item, a confirm dialog
opens, but we want the dropdown to remain visible.

Part-of: odoo/odoo#73311
---
 .../web/static/src/core/dropdown/dropdown.js  |  6 --
 .../web/static/tests/core/dropdown_tests.js   | 66 -------------------
 2 files changed, 72 deletions(-)

diff --git a/addons/web/static/src/core/dropdown/dropdown.js b/addons/web/static/src/core/dropdown/dropdown.js
index 6b15cda3461..fdaaec9f9bf 100644
--- a/addons/web/static/src/core/dropdown/dropdown.js
+++ b/addons/web/static/src/core/dropdown/dropdown.js
@@ -48,12 +48,6 @@ export class Dropdown extends Component {
 
         // Set up UI active element related behavior ---------------------------
         this.ui = useService("ui");
-        useBus(this.ui.bus, "active-element-changed", (activeElement) => {
-            if (activeElement !== this.myActiveEl && this.state.open) {
-                // Close when UI active element changes to something different
-                this.close();
-            }
-        });
         useEffect(
             () => {
                 Promise.resolve().then(() => {
diff --git a/addons/web/static/tests/core/dropdown_tests.js b/addons/web/static/tests/core/dropdown_tests.js
index 910fc7e6739..c6d1f5b8a3d 100644
--- a/addons/web/static/tests/core/dropdown_tests.js
+++ b/addons/web/static/tests/core/dropdown_tests.js
@@ -146,32 +146,6 @@ QUnit.module("Components", ({ beforeEach }) => {
         assert.containsNone(parent.el, "ul.o_dropdown_menu");
     });
 
-    QUnit.test("close on activeElement change", async (assert) => {
-        class Parent extends owl.Component {
-            setup() {
-                this.dc = mainComponentsRegistry.get("DialogContainer");
-            }
-        }
-        Parent.template = owl.tags.xml`
-            <div>
-                <Dropdown />
-                <t t-component="dc.Component" t-props="dc.props" />
-            </div>
-        `;
-        class CustomDialog extends Dialog {}
-        CustomDialog.title = "Dropdown Killer";
-        serviceRegistry.add("dialog", dialogService);
-        env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
-        await click(parent.el, "button.o_dropdown_toggler");
-        await nextTick(); // await that the dropdown sets its active element
-        assert.containsOnce(parent.el, "ul.o_dropdown_menu");
-        env.services.dialog.add(CustomDialog);
-        await nextTick(); // await that the dropdown starts to close
-        await nextTick(); // await that the dropdown is closed
-        assert.containsNone(parent.el, "ul.o_dropdown_menu");
-    });
-
     QUnit.test("close on item selection", async (assert) => {
         class Parent extends owl.Component {}
         Parent.template = owl.tags.xml`
@@ -256,46 +230,6 @@ QUnit.module("Components", ({ beforeEach }) => {
         assert.containsNone(parent.el, "ul.o_dropdown_menu");
     });
 
-    QUnit.test("multi-level dropdown: close on activeElement change", async (assert) => {
-        patchWithCleanup(Dropdown.prototype, {
-            close() {
-                assert.step("closed");
-                this._super();
-            },
-        });
-        class Parent extends owl.Component {
-            setup() {
-                this.dc = mainComponentsRegistry.get("DialogContainer");
-            }
-        }
-        Parent.template = owl.tags.xml`
-            <div>
-                <Dropdown>
-                    <Dropdown>
-                        <Dropdown/>
-                    </Dropdown>
-                </Dropdown>
-                <t t-component="dc.Component" t-props="dc.props" />
-            </div>
-        `;
-        class CustomDialog extends Dialog {}
-        CustomDialog.title = "Dropdown Killer";
-        serviceRegistry.add("dialog", dialogService);
-        env = await makeTestEnv();
-        parent = await mount(Parent, { env, target });
-        await click(parent.el, "button.o_dropdown_toggler:last-child");
-        await click(parent.el, "button.o_dropdown_toggler:last-child");
-        await click(parent.el, "button.o_dropdown_toggler:last-child");
-        assert.containsN(parent.el, "ul.o_dropdown_menu", 3);
-        await nextTick(); // await that the dropdowns set their active elements
-        env.services.dialog.add(CustomDialog);
-        assert.verifySteps([]);
-        await nextTick(); // await that the dropdowns start to close
-        await nextTick(); // await that the dropdowns are closed
-        assert.containsNone(parent.el, "ul.o_dropdown_menu");
-        assert.verifySteps(["closed", "closed", "closed"]);
-    });
-
     QUnit.test("multi-level dropdown: close on item selection", async (assert) => {
         class Parent extends owl.Component {}
         Parent.template = owl.tags.xml`

From 1fd54eeae715fc445e9f9bb1be3b74c879635003 Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Tue, 7 Sep 2021 06:22:17 +0000
Subject: [PATCH 06/31] [IMP] web: introduce useTooltip hook

This hook automatically generates custom tooltips (instead of
native ones) for all elements with the "data-tooltip" attribute
set, inside the component using it. The optional attribute
"data-tooltip-position" can be used to enforce a specific tooltip
position.

This commit also makes the WebClient use this hook.

Part-of: odoo/odoo#73311
Co-authored-by: Lucas Perais (lpe) <lpe@odoo.com>
---
 addons/web/static/src/core/tooltip/tooltip.js |  11 +
 .../web/static/src/core/tooltip/tooltip.scss  |  25 +++
 .../web/static/src/core/tooltip/tooltip.xml   |  11 +
 .../static/src/core/tooltip/tooltip_hook.js   | 102 +++++++++
 addons/web/static/src/core/utils/hooks.js     |  78 +++++++
 addons/web/static/src/webclient/webclient.js  |   2 +
 ...{popover_hook.js => popover_hook_tests.js} |   0
 .../tests/core/tooltip/tooltip_hook_tests.js  | 206 ++++++++++++++++++
 .../static/tests/core/utils/hooks_tests.js    |  92 +++++++-
 odoo/tools/translate.py                       |   2 +-
 10 files changed, 526 insertions(+), 3 deletions(-)
 create mode 100644 addons/web/static/src/core/tooltip/tooltip.js
 create mode 100644 addons/web/static/src/core/tooltip/tooltip.scss
 create mode 100644 addons/web/static/src/core/tooltip/tooltip.xml
 create mode 100644 addons/web/static/src/core/tooltip/tooltip_hook.js
 rename addons/web/static/tests/core/popover/{popover_hook.js => popover_hook_tests.js} (100%)
 create mode 100644 addons/web/static/tests/core/tooltip/tooltip_hook_tests.js

diff --git a/addons/web/static/src/core/tooltip/tooltip.js b/addons/web/static/src/core/tooltip/tooltip.js
new file mode 100644
index 00000000000..f35de09b408
--- /dev/null
+++ b/addons/web/static/src/core/tooltip/tooltip.js
@@ -0,0 +1,11 @@
+/** @odoo-module **/
+
+const { Component } = owl;
+
+export class Tooltip extends Component {}
+Tooltip.template = "web.Tooltip";
+Tooltip.props = {
+    tooltip: String,
+    Component: { optional: true },
+    props: { optional: true },
+};
diff --git a/addons/web/static/src/core/tooltip/tooltip.scss b/addons/web/static/src/core/tooltip/tooltip.scss
new file mode 100644
index 00000000000..98933b8ad56
--- /dev/null
+++ b/addons/web/static/src/core/tooltip/tooltip.scss
@@ -0,0 +1,25 @@
+.o-tooltip {
+    font-size: smaller;
+
+    .o-tooltip--string {
+        background-color: $o-tooltip-title-background-color;
+        font-weight: bold;
+        padding: 5px 8px;
+    }
+
+    .o-tooltip--help {
+        white-space: pre-line;
+        padding: 8px;
+        margin-bottom: 0px;
+    }
+
+    .o-tooltip--technical {
+        padding: 8px;
+        margin: 0 0 0 15px;
+        list-style-type: circle;
+
+        .o-tooltip--technical--title {
+            font-weight: bold;
+        }
+    }
+}
diff --git a/addons/web/static/src/core/tooltip/tooltip.xml b/addons/web/static/src/core/tooltip/tooltip.xml
new file mode 100644
index 00000000000..d9c74413ede
--- /dev/null
+++ b/addons/web/static/src/core/tooltip/tooltip.xml
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.Tooltip" owl="1">
+        <div class="o-tooltip px-2 py-1">
+            <t t-if="props.Component" t-component="props.Component" t-props="props.props" />
+            <small t-else="" t-esc="props.tooltip"/>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/core/tooltip/tooltip_hook.js b/addons/web/static/src/core/tooltip/tooltip_hook.js
new file mode 100644
index 00000000000..96c6d0065cb
--- /dev/null
+++ b/addons/web/static/src/core/tooltip/tooltip_hook.js
@@ -0,0 +1,102 @@
+/** @odoo-module **/
+
+import { browser } from "@web/core/browser/browser";
+import { useListener } from "@web/core/utils/hooks";
+import { usePopover } from "@web/core/popover/popover_hook";
+import { Tooltip } from "./tooltip";
+import { registry } from "@web/core/registry";
+
+/**
+ * The useTooltip hook allows to display custom tooltips on every elements with
+ * a "data-tooltip" attribute inside the Component using the hook. This attribute
+ * can be set on elements for which we prefer a custom tooltip instead of the
+ * native one displaying the value of the "title" attribute.
+ *
+ * Usage (with a parent somewhere using the useTooltip hook):
+ *   <button data-tooltip="This is a tooltip">Do something</button>
+ *
+ * The ideal position of the tooltip can be specified thanks to the attribute
+ * "data-tooltip-position":
+ *   <button data-tooltip="This is a tooltip" data-tooltip-position="left">Do something</button>
+ */
+const OPEN_DELAY = 400;
+const CLOSE_DELAY = 200;
+export function useTooltip() {
+    const popover = usePopover();
+    let openTooltipTimeout;
+    let closeTooltip;
+    let target = null;
+
+    /**
+     * Closes the currently opened tooltip if any, or prevent it from opening.
+     */
+    function cleanup() {
+        browser.clearTimeout(openTooltipTimeout);
+        if (closeTooltip) {
+            closeTooltip();
+        }
+    }
+
+    /**
+     * Opens the tooltip after a delay, if the event's target has a data-tooltip
+     * attribute.
+     *
+     * @param {MouseEvent} ev a "mouseenter" event
+     */
+    function onMouseEnter(ev) {
+        const dataset = ev.target.dataset;
+        const tooltip = dataset.tooltip;
+
+        let Component, props;
+        if ("tooltipComponent" in dataset) {
+            ({ Component, props } = JSON.parse(dataset["tooltipComponent"]));
+            Component = registry.category("tooltips").get(Component, null);
+        }
+        if (tooltip || Component) {
+            cleanup();
+            target = ev.target;
+            openTooltipTimeout = browser.setTimeout(() => {
+                const position = dataset.tooltipPosition;
+                closeTooltip = popover.add(
+                    target,
+                    Tooltip,
+                    { tooltip, Component, props },
+                    { position }
+                );
+            }, OPEN_DELAY);
+        }
+    }
+
+    // Track mouse position to be able to detect that we are no longer hovering
+    // the target, thus that we should close the tooltip
+    let positionX;
+    let positionY;
+    useListener("mousemove", (ev) => {
+        positionX = ev.x;
+        positionY = ev.y;
+    });
+
+    // Regularly check that the target is still in the DOM and we're still
+    // hovering it, because if not, we have to close the tooltip
+    browser.setInterval(() => {
+        if (!target) {
+            return;
+        }
+        if (!document.body.contains(target)) {
+            return cleanup(); // target is no longer in the DOM
+        }
+        const targetRect = target.getBoundingClientRect();
+        if (
+            positionX < targetRect.left ||
+            positionX > targetRect.right ||
+            positionY < targetRect.top ||
+            positionY > targetRect.bottom
+        ) {
+            return cleanup(); // mouse is no longer hovering the target
+        }
+    }, CLOSE_DELAY);
+
+    // Listen (using event delegation) to "mouseenter" events on all nodes with
+    // the "data-tooltip" attribute, to open the tooltip.
+    useListener("mouseenter", "[data-tooltip]", onMouseEnter, { capture: true });
+}
diff --git a/addons/web/static/src/core/utils/hooks.js b/addons/web/static/src/core/utils/hooks.js
index fabcf18aeeb..c870d5e8659 100644
--- a/addons/web/static/src/core/utils/hooks.js
+++ b/addons/web/static/src/core/utils/hooks.js
@@ -130,6 +130,84 @@ export function useEffect(effect, computeDependencies = () => [NaN]) {
     onWillUnmount(() => cleanup());
 }
 
+// -----------------------------------------------------------------------------
+// useListener
+// -----------------------------------------------------------------------------
+
+/**
+ * The useListener hook offers an alternative to Owl's classical event
+ * registration mechanism (with attribute 't-on-eventName' in xml).
+ *
+ * It is especially useful for abstract components, meant to be extended by
+ * specific ones. If those abstract components need to define event handlers,
+ * but don't have any template (because the template completely depends on
+ * specific cases), then using the 't-on' mechanism isn't adequate, as the
+ * handlers would be lost by the template override. In this case, using this
+ * hook instead is more convenient.
+ *
+ * Usage: like all Owl hooks, this function has to be called in the
+ * constructor of an Owl component:
+ *
+ *   useListener('click', () => { console.log('clicked'); });
+ *
+ * It also allows to do event delegation, by specifying a native query selector
+ * as second argument. In this case, the handler is only called if the event
+ * is triggered on an element matching the given selector.
+ *
+ *   useListener('click', 'button', () => { console.log('clicked'); });
+ *
+ * Note: components that alter the event's target (e.g. Portal) are not
+ * expected to behave as expected with event delegation.
+ *
+ * @param {string} eventName the name of the event
+ * @param {string} [querySelector] a JS native selector for event delegation
+ * @param {function} handler the event handler (will be bound to the component)
+ * @param {Object} [options] to be passed to addEventListener as options.
+ *   Useful for listening in the capture phase
+ */
+export function useListener(eventName, querySelector, handler, options = {}) {
+    if (typeof arguments[1] !== "string") {
+        querySelector = null;
+        handler = arguments[1];
+        options = arguments[2] || {};
+    }
+    if (typeof handler !== "function") {
+        throw new Error("The handler must be a function");
+    }
+
+    const comp = useComponent();
+    let boundHandler;
+    if (querySelector) {
+        boundHandler = function (ev) {
+            let el = ev.target;
+            let target;
+            while (el && !target) {
+                if (el.matches(querySelector)) {
+                    target = el;
+                } else if (el === comp.el) {
+                    el = null;
+                } else {
+                    el = el.parentElement;
+                }
+            }
+            if (el) {
+                handler.call(comp, ev);
+            }
+        };
+    } else {
+        boundHandler = handler.bind(comp);
+    }
+    useEffect(
+        () => {
+            comp.el.addEventListener(eventName, boundHandler, options);
+            return () => {
+                comp.el.removeEventListener(eventName, boundHandler, options);
+            };
+        },
+        () => []
+    );
+}
+
 // -----------------------------------------------------------------------------
 // useService
 // -----------------------------------------------------------------------------
diff --git a/addons/web/static/src/webclient/webclient.js b/addons/web/static/src/webclient/webclient.js
index 3bcd54e6fdb..0d15fbf5b79 100644
--- a/addons/web/static/src/webclient/webclient.js
+++ b/addons/web/static/src/webclient/webclient.js
@@ -3,6 +3,7 @@
 import { ActionContainer } from "./actions/action_container";
 import { NavBar } from "./navbar/navbar";
 import { useBus, useEffect, useService } from "@web/core/utils/hooks";
+import { useTooltip } from "@web/core/tooltip/tooltip_hook";
 import { NotUpdatable } from "../core/utils/components";
 import { MainComponentsContainer } from "../core/main_components_container";
 import { useOwnDebugContext } from "../core/debug/debug_context";
@@ -44,6 +45,7 @@ export class WebClient extends Component {
             () => []
         );
         useExternalListener(window, "click", this.onGlobalClick, { capture: true });
+        useTooltip();
     }
 
     mounted() {
diff --git a/addons/web/static/tests/core/popover/popover_hook.js b/addons/web/static/tests/core/popover/popover_hook_tests.js
similarity index 100%
rename from addons/web/static/tests/core/popover/popover_hook.js
rename to addons/web/static/tests/core/popover/popover_hook_tests.js
diff --git a/addons/web/static/tests/core/tooltip/tooltip_hook_tests.js b/addons/web/static/tests/core/tooltip/tooltip_hook_tests.js
new file mode 100644
index 00000000000..252fae3e06d
--- /dev/null
+++ b/addons/web/static/tests/core/tooltip/tooltip_hook_tests.js
@@ -0,0 +1,206 @@
+/** @odoo-module **/
+
+import { browser } from "@web/core/browser/browser";
+import { PopoverContainer } from "@web/core/popover/popover_container";
+import { popoverService } from "@web/core/popover/popover_service";
+import { useTooltip } from "@web/core/tooltip/tooltip_hook";
+import { registry } from "@web/core/registry";
+import { registerCleanup } from "../../helpers/cleanup";
+import { clearRegistryWithCleanup, makeTestEnv } from "../../helpers/mock_env";
+import { getFixture, nextTick, patchWithCleanup, triggerEvent } from "../../helpers/utils";
+
+const { Component, mount, useState } = owl;
+const { xml } = owl.tags;
+
+const mainComponents = registry.category("main_components");
+
+/**
+ * Creates and mounts a parent component that use the "useTooltip" hook.
+ *
+ * @param {Component} Child a child Component that contains nodes with "data-tooltip" attribute
+ * @param {Object} [options]
+ * @param {Object} options.mockSetTimeout the mocked setTimeout to use (by default, calls the
+ *   callback directly)
+ * @returns {Promise<Component>}
+ */
+async function makeParent(Child, options = {}) {
+    const fixture = getFixture();
+
+    // add the popover service to the registry -> will add the PopoverContainer
+    // to the mainComponentRegistry
+    clearRegistryWithCleanup(mainComponents);
+    registry.category("services").add("popover", popoverService);
+    const env = await makeTestEnv();
+
+    class Parent extends Component {
+        setup() {
+            this.Components = mainComponents.getEntries();
+            useTooltip();
+        }
+    }
+    Parent.template = xml`
+        <div>
+            <Child/>
+            <div>
+                <t t-foreach="Components" t-as="Component" t-key="Component[0]">
+                    <t t-component="Component[1].Component" t-props="Component[1].props"/>
+                </t>
+            </div>
+        </div>`;
+    Parent.components = { PopoverContainer, Child };
+
+    patchWithCleanup(browser, {
+        setTimeout: options.mockSetTimeout || ((fn) => fn()),
+        setInterval: options.mockSetInterval || ((fn) => fn()),
+    });
+
+    const comp = await mount(Parent, { env, target: fixture });
+    registerCleanup(() => comp.destroy());
+    return comp;
+}
+
+QUnit.module("Tooltip hook", () => {
+    QUnit.test("basic rendering", async (assert) => {
+        class MyComponent extends Component {}
+        MyComponent.template = xml`<button data-tooltip="hello">Action</button>`;
+        let simulateTimeout;
+        const mockSetTimeout = (fn) => {
+            simulateTimeout = fn;
+        };
+        let simulateInterval;
+        const mockSetInterval = (fn) => {
+            simulateInterval = fn;
+        };
+        const parent = await makeParent(MyComponent, { mockSetTimeout, mockSetInterval });
+
+        assert.containsNone(parent, ".o_popover_container .o_popover");
+        parent.el.querySelector("button").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        assert.containsNone(parent, ".o_popover_container .o_popover");
+
+        simulateTimeout();
+        await nextTick();
+        assert.containsOnce(parent, ".o_popover_container .o_popover");
+        assert.strictEqual(
+            parent.el.querySelector(".o_popover_container .o_popover").innerText,
+            "hello"
+        );
+
+        const buttonRect = parent.el.querySelector("button").getBoundingClientRect();
+        const x = buttonRect.right + 10;
+        const y = buttonRect.bottom + 10;
+        await triggerEvent(parent.el, "button", "mousemove", {
+            pageX: x,
+            layerX: x,
+            screenX: x,
+            pageY: y,
+            layerY: y,
+            screenY: y,
+        });
+        assert.containsOnce(parent, ".o_popover_container .o_popover");
+        simulateInterval();
+        await nextTick();
+        assert.containsNone(parent, ".o_popover_container .o_popover");
+    });
+
+    QUnit.test("remove element with opened tooltip", async (assert) => {
+        let compState;
+        class MyComponent extends Component {
+            setup() {
+                this.state = useState({ visible: true });
+                compState = this.state;
+            }
+        }
+        MyComponent.template = xml`
+            <div>
+                <button t-if="state.visible" data-tooltip="hello">Action</button>
+            </div>`;
+        let simulateInterval;
+        const mockSetInterval = (fn) => {
+            simulateInterval = fn;
+        };
+        const parent = await makeParent(MyComponent, { mockSetInterval });
+
+        assert.containsOnce(parent, "button");
+        assert.containsNone(parent, ".o_popover_container .o_popover");
+        parent.el.querySelector("button").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        assert.containsOnce(parent, ".o_popover_container .o_popover");
+
+        compState.visible = false;
+        await nextTick();
+        assert.containsNone(parent, "button");
+        simulateInterval();
+        await nextTick();
+        assert.containsNone(parent, ".o_popover_container .o_popover");
+    });
+
+    QUnit.test("rendering with several tooltips", async (assert) => {
+        class MyComponent extends Component {}
+        MyComponent.template = xml`
+            <div>
+                <button class="button_1" data-tooltip="tooltip 1">Action 1</button>
+                <button class="button_2" data-tooltip="tooltip 2">Action 2</button>
+            </div>`;
+        const parent = await makeParent(MyComponent);
+
+        assert.containsNone(parent, ".o_popover_container .o_popover");
+        parent.el.querySelector("button.button_1").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        assert.containsOnce(parent, ".o_popover_container .o_popover");
+        assert.strictEqual(parent.el.querySelector(".o_popover").innerText, "tooltip 1");
+        parent.el.querySelector("button.button_1").dispatchEvent(new Event("mouseleave"));
+        parent.el.querySelector("button.button_2").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        assert.containsOnce(parent, ".o_popover_container .o_popover");
+        assert.strictEqual(parent.el.querySelector(".o_popover").innerText, "tooltip 2");
+    });
+
+    QUnit.test("positionning", async (assert) => {
+        class MyComponent extends Component {}
+        MyComponent.template = xml`
+            <div style="height: 400px; padding: 40px">
+                <button class="default" data-tooltip="default">Default</button>
+                <button class="top" data-tooltip="top" data-tooltip-position="top">Top</button>
+                <button class="right" data-tooltip="right" data-tooltip-position="right">Right</button>
+                <button class="bottom" data-tooltip="bottom" data-tooltip-position="bottom">Bottom</button>
+                <button class="left" data-tooltip="left" data-tooltip-position="left">Left</button>
+            </div>`;
+        const parent = await makeParent(MyComponent);
+
+        // default
+        parent.el.querySelector("button.default").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        assert.containsOnce(parent, ".o_popover_container .o_popover");
+        assert.strictEqual(parent.el.querySelector(".o_popover").innerText, "default");
+        assert.hasClass(parent.el.querySelector(".o_popover"), "o-popper-position--bm");
+
+        // top
+        parent.el.querySelector("button.top").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        assert.containsOnce(parent, ".o_popover_container .o_popover");
+        assert.strictEqual(parent.el.querySelector(".o_popover").innerText, "top");
+        assert.hasClass(parent.el.querySelector(".o_popover"), "o-popper-position--tm");
+
+        // right
+        parent.el.querySelector("button.right").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        assert.containsOnce(parent, ".o_popover_container .o_popover");
+        assert.strictEqual(parent.el.querySelector(".o_popover").innerText, "right");
+        assert.hasClass(parent.el.querySelector(".o_popover"), "o-popper-position--rm");
+
+        // bottom
+        parent.el.querySelector("button.bottom").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        assert.containsOnce(parent, ".o_popover_container .o_popover");
+        assert.strictEqual(parent.el.querySelector(".o_popover").innerText, "bottom");
+        assert.hasClass(parent.el.querySelector(".o_popover"), "o-popper-position--bm");
+
+        // left
+        parent.el.querySelector("button.left").dispatchEvent(new Event("mouseenter"));
+        await nextTick();
+        assert.containsOnce(parent, ".o_popover_container .o_popover");
+        assert.strictEqual(parent.el.querySelector(".o_popover").innerText, "left");
+        assert.hasClass(parent.el.querySelector(".o_popover"), "o-popper-position--lm");
+    });
+});
diff --git a/addons/web/static/tests/core/utils/hooks_tests.js b/addons/web/static/tests/core/utils/hooks_tests.js
index 901ea18fa80..632b35ed537 100644
--- a/addons/web/static/tests/core/utils/hooks_tests.js
+++ b/addons/web/static/tests/core/utils/hooks_tests.js
@@ -1,9 +1,10 @@
 /** @odoo-module **/
 
-import { useBus, useEffect, useService } from "@web/core/utils/hooks";
+import { useBus, useEffect, useListener, useService } from "@web/core/utils/hooks";
 import { registry } from "@web/core/registry";
 import { makeTestEnv } from "../../helpers/mock_env";
-import { getFixture, nextTick } from "../../helpers/utils";
+import { click, getFixture, nextTick } from "../../helpers/utils";
+import { registerCleanup } from "../../helpers/cleanup";
 
 const { Component, mount, tags, useState } = owl;
 const serviceRegistry = registry.category("services");
@@ -230,6 +231,93 @@ QUnit.module("utils", () => {
             }
         );
 
+        QUnit.module("useListener");
+
+        QUnit.test("useListener: simple usecase", async function (assert) {
+            class MyComponent extends Component {
+                setup() {
+                    useListener("click", () => assert.step("click"));
+                }
+            }
+            MyComponent.template = tags.xml`<button>Click Me</button>`;
+
+            const env = await makeTestEnv();
+            const target = getFixture();
+            const comp = await mount(MyComponent, { env, target });
+            registerCleanup(() => {
+                comp.destroy();
+            });
+
+            await click(comp.el);
+            assert.verifySteps(["click"]);
+        });
+
+        QUnit.test("useListener: event delegation", async function (assert) {
+            class MyComponent extends Component {
+                setup() {
+                    this.flag = true;
+                    useListener("click", "button", () => assert.step("click"));
+                }
+            }
+            MyComponent.template = tags.xml`
+                <div>
+                    <button t-if="flag">Click Here</button>
+                    <button t-else="">
+                        <span>or Here</span>
+                    </button>
+                </div>`;
+
+            const env = await makeTestEnv();
+            const target = getFixture();
+            const comp = await mount(MyComponent, { env, target });
+            registerCleanup(() => {
+                comp.destroy();
+            });
+
+            await click(comp.el);
+            assert.verifySteps([]);
+            await click(comp.el.querySelector("button"));
+            assert.verifySteps(["click"]);
+
+            comp.flag = false;
+            await comp.render();
+            await click(comp.el.querySelector("button span"));
+            assert.verifySteps(["click"]);
+        });
+
+        QUnit.test("useListener: event delegation with capture option", async function (assert) {
+            class MyComponent extends Component {
+                setup() {
+                    this.flag = false;
+                    useListener("click", "button", () => assert.step("click"), { capture: true });
+                }
+            }
+            MyComponent.template = tags.xml`
+                <div>
+                    <button t-if="flag">Click Here</button>
+                    <button t-else="">
+                        <span>or Here</span>
+                    </button>
+                </div>`;
+
+            const env = await makeTestEnv();
+            const target = getFixture();
+            const comp = await mount(MyComponent, { env, target });
+            registerCleanup(() => {
+                comp.destroy();
+            });
+
+            await click(comp.el);
+            assert.verifySteps([]);
+            await click(comp.el.querySelector("button"));
+            assert.verifySteps(["click"]);
+
+            comp.flag = false;
+            await comp.render();
+            await click(comp.el.querySelector("button span"));
+            assert.verifySteps(["click"]);
+        });
+
         QUnit.module("useService");
 
         QUnit.test("useService: unavailable service", async function (assert) {
diff --git a/odoo/tools/translate.py b/odoo/tools/translate.py
index f76e813a438..95736b80790 100644
--- a/odoo/tools/translate.py
+++ b/odoo/tools/translate.py
@@ -149,7 +149,7 @@ TRANSLATED_ELEMENTS = {
 TRANSLATED_ATTRS = dict.fromkeys({
     'string', 'add-label', 'help', 'sum', 'avg', 'confirm', 'placeholder', 'alt', 'title', 'aria-label',
     'aria-keyshortcuts', 'aria-placeholder', 'aria-roledescription', 'aria-valuetext',
-    'value_label',
+    'value_label', 'data-tooltip',
 }, lambda e: True)
 
 def translate_attrib_value(node):

From 57992c51b5b223d2ecae887f108629dea7698f11 Mon Sep 17 00:00:00 2001
From: Jorge Pinna Puissant <jpp@odoo.com>
Date: Tue, 7 Sep 2021 06:22:19 +0000
Subject: [PATCH 07/31] [IMP] web: add archParseBoolean util function

This function must be used to parse boolean attributes from archs.
If returns false if the attribute is set to "False", "false", "0"
or "", true otherwise.

Part-of: odoo/odoo#73311
---
 addons/web/static/src/views/helpers/utils.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)
 create mode 100644 addons/web/static/src/views/helpers/utils.js

diff --git a/addons/web/static/src/views/helpers/utils.js b/addons/web/static/src/views/helpers/utils.js
new file mode 100644
index 00000000000..8b0c0ff1ff1
--- /dev/null
+++ b/addons/web/static/src/views/helpers/utils.js
@@ -0,0 +1,13 @@
+/** @odoo-module **/
+
+/**
+ * Parse the arch to check if is true or false
+ * If the string is empyt, 0, False or false it's considered as false
+ * The rest is considered as true
+ *
+ * @param {string} str
+ * @returns {boolean}
+ */
+export function archParseBoolean(str) {
+    return str !== "False" && str !== "false" && str !== "0" && str !== "";
+}

From c67b9f9907e85019b6adac80976569553f5e6b7a Mon Sep 17 00:00:00 2001
From: Mathieu Duckerts-Antoine <dam@odoo.com>
Date: Tue, 7 Sep 2021 06:22:21 +0000
Subject: [PATCH 08/31] [IMP] web: new SampleServer class

Reintroduce the SampleServer class with some modifications:
    - it uses luxon instead of moment
    - it uses the registry from core folder instead of a dedicated one

A util function is also provided to help the construction of a fake orm
using the sample server in order to get sample data.

Part-of: odoo/odoo#73311
Co-authored-by: Samuel Degueldre <sad@odoo.com>
Co-authored-by: Lucas Perais (lpe) <lpe@odoo.com>
Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
Co-authored-by: Jorge Pinna Puissant <jpp@odoo.com>
---
 addons/web/static/src/core/orm_service.js     |   2 +-
 .../static/src/views/helpers/sample_server.js | 711 ++++++++++++++++++
 2 files changed, 712 insertions(+), 1 deletion(-)
 create mode 100644 addons/web/static/src/views/helpers/sample_server.js

diff --git a/addons/web/static/src/core/orm_service.js b/addons/web/static/src/core/orm_service.js
index b3c2f053fbc..fea150e4452 100644
--- a/addons/web/static/src/core/orm_service.js
+++ b/addons/web/static/src/core/orm_service.js
@@ -87,7 +87,7 @@ function validateArray(name, array) {
     }
 }
 
-class ORM {
+export class ORM {
     constructor(rpc, user) {
         this.rpc = rpc;
         this.user = user;
diff --git a/addons/web/static/src/views/helpers/sample_server.js b/addons/web/static/src/views/helpers/sample_server.js
new file mode 100644
index 00000000000..63b090149c1
--- /dev/null
+++ b/addons/web/static/src/views/helpers/sample_server.js
@@ -0,0 +1,711 @@
+/** @odoo-module **/
+
+import { groupBy as arrayGroupBy, sortBy as arraySortBy } from "@web/core/utils/arrays";
+import { registry } from "@web/core/registry";
+import { ORM } from "../../core/orm_service";
+import { parseDate } from "@web/core/l10n/dates";
+
+class UnimplementedRouteError extends Error {}
+
+/**
+ * Helper function returning the value from a list of sample strings
+ * corresponding to the given ID.
+ * @param {number} id
+ * @param {string[]} sampleTexts
+ * @returns {string}
+ */
+function getSampleFromId(id, sampleTexts) {
+    return sampleTexts[(id - 1) % sampleTexts.length];
+}
+
+/**
+ * Helper function returning a regular expression specifically matching
+ * a given 'term' in a fieldName. For example `fieldNameRegex('abc')`:
+ * will match:
+ * - "abc"
+ * - "field_abc__def"
+ * will not match:
+ * - "aabc"
+ * - "abcd_ef"
+ * @param {...string} term
+ * @returns {RegExp}
+ */
+function fieldNameRegex(...terms) {
+    return new RegExp(`\\b((\\w+)?_)?(${terms.join("|")})(_(\\w+)?)?\\b`);
+}
+
+const MEASURE_SPEC_REGEX = /(?<measure>\w+):(?<aggregateFunction>\w+)(\((?<fieldName>\w+)\))?/;
+const DESCRIPTION_REGEX = fieldNameRegex("description", "label", "title", "subject", "message");
+const EMAIL_REGEX = fieldNameRegex("email");
+const PHONE_REGEX = fieldNameRegex("phone");
+const URL_REGEX = fieldNameRegex("url");
+
+/**
+ * Sample server class
+ *
+ * Represents a static instance of the server used when a RPC call sends
+ * empty values/groups while the attribute 'sample' is set to true on the
+ * view.
+ *
+ * This server will generate fake data and send them in the adequate format
+ * according to the route/method used in the RPC.
+ */
+export class SampleServer {
+    /**
+     * @param {string} modelName
+     * @param {Object} fields
+     */
+    constructor(modelName, fields) {
+        this.mainModel = modelName;
+        this.data = {};
+        this.data[modelName] = {
+            fields,
+            records: [],
+        };
+        // Generate relational fields' co models
+        for (const fieldName in fields) {
+            const field = fields[fieldName];
+            if (["many2one", "one2many", "many2many"].includes(field.type)) {
+                this.data[field.relation] = this.data[field.relation] || {
+                    fields: {
+                        display_name: { type: "char" },
+                        id: { type: "integer" },
+                        color: { type: "integer" },
+                    },
+                    records: [],
+                };
+            }
+        }
+        // On some models, empty grouped Kanban or List view still contain
+        // real (empty) groups. In this case, we re-use the result of the
+        // web_read_group rpc to tweak sample data s.t. those real groups
+        // contain sample records.
+        this.existingGroups = null;
+        // Sample records generation is only done if necessary, so we delay
+        // it to the first "mockRPC" call. These flags allow us to know if
+        // the records have been generated or not.
+        this.populated = false;
+        this.existingGroupsPopulated = false;
+    }
+
+    //---------------------------------------------------------------------
+    // Public
+    //---------------------------------------------------------------------
+
+    /**
+     * This is the main entry point of the SampleServer. Mocks a request to
+     * the server with sample data.
+     * @param {Object} params
+     * @returns {any} the result obtained with the sample data
+     * @throws {Error} If called on a route/method we do not handle
+     */
+    mockRpc(params) {
+        if (!(params.model in this.data)) {
+            throw new Error(`SampleServer: unknown model ${params.model}`);
+        }
+        this._populateModels();
+        switch (params.method || params.route) {
+            case "/web/dataset/search_read":
+                return this._mockSearchReadController(params);
+            case "web_read_group":
+                return this._mockWebReadGroup(params);
+            case "read_group":
+                return this._mockReadGroup(params);
+            case "read_progress_bar":
+                return this._mockReadProgressBar(params);
+            case "read":
+                return this._mockRead(params);
+        }
+        // this rpc can't be mocked by the SampleServer itself, so check if there is an handler
+        // in the registry: either specific for this model (with key 'model/method'), or
+        // global (with key 'method')
+        const method = params.method || params.route;
+        // This allows to register mock version of methods or routes,
+        // for all models:
+        // registry.category("sample_server").add('some_route', () => "abcd");
+        // for a specific model (e.g. 'res.partner'):
+        // registry.category("sample_server").add('res.partner/some_method', () => 23);
+        const mockFunction =
+            registry.category("sample_server").get(`${params.model}/${method}`, null) ||
+            registry.category("sample_server").get(method, null);
+        if (mockFunction) {
+            return mockFunction.call(this, params);
+        }
+        console.log(`SampleServer: unimplemented route "${params.method || params.route}"`);
+        throw new SampleServer.UnimplementedRouteError();
+    }
+
+    setExistingGroups(groups) {
+        this.existingGroups = groups;
+    }
+
+    //---------------------------------------------------------------------
+    // Private
+    //---------------------------------------------------------------------
+
+    /**
+     * @param {Object[]} measures, each measure has the form { fieldName, type }
+     * @param {Object[]} records
+     * @returns {Object}
+     */
+    _aggregateFields(measures, records) {
+        const values = {};
+        for (const { fieldName, type } of measures) {
+            if (["float", "integer", "monetary"].includes(type)) {
+                if (records.length) {
+                    let value = 0;
+                    for (const record of records) {
+                        value += record[fieldName];
+                    }
+                    values[fieldName] = this._sanitizeNumber(value);
+                } else {
+                    values[fieldName] = null;
+                }
+            }
+            if (type === "many2one") {
+                const ids = new Set(records.map((r) => r[fieldName]));
+                values.fieldName = ids.size || null;
+            }
+        }
+        return values;
+    }
+
+    /**
+     * @param {any} value
+     * @param {Object} options
+     * @param {string} [options.interval]
+     * @param {string} [options.relation]
+     * @param {string} [options.type]
+     * @returns {any}
+     */
+    _formatValue(value, options) {
+        if (!value) {
+            return false;
+        }
+        const { type, interval, relation } = options;
+        if (["date", "datetime"].includes(type)) {
+            const fmt = SampleServer.FORMATS[interval];
+            return parseDate(value).toFormat(fmt);
+        } else if (type === "many2one") {
+            const rec = this.data[relation].records.find(({ id }) => id === value);
+            return [value, rec.display_name];
+        } else {
+            return value;
+        }
+    }
+
+    /**
+     * Generates field values based on heuristics according to field types
+     * and names.
+     *
+     * @private
+     * @param {string} modelName
+     * @param {string} fieldName
+     * @param {number} id the record id
+     * @returns {any} the field value
+     */
+    _generateFieldValue(modelName, fieldName, id) {
+        const field = this.data[modelName].fields[fieldName];
+        switch (field.type) {
+            case "boolean":
+                return fieldName === "active" ? true : this._getRandomBool();
+            case "char":
+            case "text":
+                if (["display_name", "name"].includes(fieldName)) {
+                    if (SampleServer.PEOPLE_MODELS.includes(modelName)) {
+                        return getSampleFromId(id, SampleServer.SAMPLE_PEOPLE);
+                    } else if (modelName === "res.country") {
+                        return getSampleFromId(id, SampleServer.SAMPLE_COUNTRIES);
+                    }
+                }
+                if (fieldName === "display_name") {
+                    return getSampleFromId(id, SampleServer.SAMPLE_TEXTS);
+                } else if (["name", "reference"].includes(fieldName)) {
+                    return `REF${String(id).padStart(4, "0")}`;
+                } else if (DESCRIPTION_REGEX.test(fieldName)) {
+                    return getSampleFromId(id, SampleServer.SAMPLE_TEXTS);
+                } else if (EMAIL_REGEX.test(fieldName)) {
+                    const emailName = getSampleFromId(id, SampleServer.SAMPLE_PEOPLE)
+                        .replace(/ /, ".")
+                        .toLowerCase();
+                    return `${emailName}@sample.demo`;
+                } else if (PHONE_REGEX.test(fieldName)) {
+                    return `+1 555 754 ${String(id).padStart(4, "0")}`;
+                } else if (URL_REGEX.test(fieldName)) {
+                    return `http://sample${id}.com`;
+                }
+                return false;
+            case "date":
+            case "datetime": {
+                const format = field.type === "date" ? "yyyy-MM-dd" : "yyyy-MM-dd HH:mm:ss";
+                return this._getRandomDate(format);
+            }
+            case "float":
+                return this._getRandomFloat(SampleServer.MAX_FLOAT);
+            case "integer": {
+                let max = SampleServer.MAX_INTEGER;
+                if (fieldName.includes("color")) {
+                    max = this._getRandomBool() ? SampleServer.MAX_COLOR_INT : 0;
+                }
+                return this._getRandomInt(max);
+            }
+            case "monetary":
+                return this._getRandomInt(SampleServer.MAX_MONETARY);
+            case "many2one":
+                if (field.relation === "res.currency") {
+                    /** @todo return session.company_currency_id */
+                    return 1;
+                }
+                if (field.relation === "ir.attachment") {
+                    return false;
+                }
+                return this._getRandomSubRecordId();
+            case "one2many":
+            case "many2many": {
+                const ids = [this._getRandomSubRecordId(), this._getRandomSubRecordId()];
+                return [...new Set(ids)];
+            }
+            case "selection": {
+                // I hoped we wouldn't have to implement such special cases, but here it is.
+                // If this (mail) field is set, 'Warning' is displayed instead of the last
+                // activity, and we don't want to see a bunch of 'Warning's in a list. In the
+                // future, if we have to implement several special cases like that, we'll setup
+                // a proper hook to allow external modules to define extensions of this function.
+                // For now, as we have only one use case, I guess that doing it here is fine.
+                if (fieldName === "activity_exception_decoration") {
+                    return false;
+                }
+                if (field.selection.length > 0) {
+                    return this._getRandomArrayEl(field.selection)[0];
+                }
+                return false;
+            }
+            default:
+                return false;
+        }
+    }
+
+    /**
+     * @private
+     * @param {any[]} array
+     * @returns {any}
+     */
+    _getRandomArrayEl(array) {
+        return array[Math.floor(Math.random() * array.length)];
+    }
+
+    /**
+     * @private
+     * @returns {boolean}
+     */
+    _getRandomBool() {
+        return Math.random() < 0.5;
+    }
+
+    /**
+     * @private
+     * @param {string} format
+     * @returns {moment}
+     */
+    _getRandomDate(format) {
+        const delta = Math.floor((Math.random() - Math.random()) * SampleServer.DATE_DELTA);
+        return luxon.DateTime.local().plus({ hours: delta }).toFormat(format);
+    }
+
+    /**
+     * @private
+     * @param {number} max
+     * @returns {number} float in [O, max[
+     */
+    _getRandomFloat(max) {
+        return this._sanitizeNumber(Math.random() * max);
+    }
+
+    /**
+     * @private
+     * @param {number} max
+     * @returns {number} int in [0, max[
+     */
+    _getRandomInt(max) {
+        return Math.floor(Math.random() * max);
+    }
+
+    /**
+     * @private
+     * @returns {number} id in [1, SUB_RECORDSET_SIZE]
+     */
+    _getRandomSubRecordId() {
+        return Math.floor(Math.random() * SampleServer.SUB_RECORDSET_SIZE) + 1;
+    }
+    /**
+     * Mocks calls to the read method.
+     * @private
+     * @param {Object} params
+     * @param {string} params.model
+     * @param {Array[]} params.args (args[0] is the list of ids, args[1] is
+     *   the list of fields)
+     * @returns {Object[]}
+     */
+    _mockRead(params) {
+        const model = this.data[params.model];
+        const ids = params.args[0];
+        const fieldNames = params.args[1];
+        const records = [];
+        for (const r of model.records) {
+            if (!ids.includes(r.id)) {
+                continue;
+            }
+            const record = { id: r.id };
+            for (const fieldName of fieldNames) {
+                const field = model.fields[fieldName];
+                if (!field) {
+                    record[fieldName] = false; // unknown field
+                } else if (field.type === "many2one") {
+                    const relModel = this.data[field.relation];
+                    const relRecord = relModel.records.find((relR) => r[fieldName] === relR.id);
+                    record[fieldName] = relRecord ? [relRecord.id, relRecord.display_name] : false;
+                } else {
+                    record[fieldName] = r[fieldName];
+                }
+            }
+            records.push(record);
+        }
+        return records;
+    }
+
+    /**
+     * Mocks calls to the read_group method.
+     *
+     * @param {Object} params
+     * @param {string} params.model
+     * @param {string[]} [params.fields] defaults to the list of all fields
+     * @param {string[]} params.groupBy
+     * @param {boolean} [params.lazy=true]
+     * @returns {Object[]} Object with keys groups and length
+     */
+    _mockReadGroup(params) {
+        const lazy = "lazy" in params ? params.lazy : true;
+        const model = params.model;
+        const fields = this.data[model].fields;
+        const records = this.data[model].records;
+
+        const normalizedGroupBys = [];
+        let groupBy = [];
+        if (params.groupBy.length) {
+            groupBy = lazy ? [params.groupBy[0]] : params.groupBy;
+        }
+        for (const groupBySpec of groupBy) {
+            let [fieldName, interval] = groupBySpec.split(":");
+            interval = interval || "month";
+            const { type, relation } = fields[fieldName];
+            if (type) {
+                const gb = { fieldName, type, interval, relation, alias: groupBySpec };
+                normalizedGroupBys.push(gb);
+            }
+        }
+        const groups = arrayGroupBy(records, (record) => {
+            const vals = {};
+            for (const gb of normalizedGroupBys) {
+                const { fieldName, type } = gb;
+                let value;
+                if (["date", "datetime"].includes(type)) {
+                    value = this._formatValue(record[fieldName], gb);
+                } else {
+                    value = record[fieldName];
+                }
+                vals[fieldName] = value;
+            }
+            return JSON.stringify(vals);
+        });
+        const measures = [];
+        for (const measureSpec of params.fields || Object.keys(fields)) {
+            const matches = measureSpec.match(MEASURE_SPEC_REGEX);
+            const { fieldName, aggregateFunction, measure } = (matches && matches.groups) || {};
+            if (!fieldName && !measure) {
+                continue; // this is for _count measure
+            }
+            const fName = fieldName || measure;
+            const { type } = fields[fName];
+            if (
+                !params.groupBy.includes(fName) &&
+                type &&
+                (type !== "many2one" || aggregateFunction !== "count_distinct")
+            ) {
+                measures.push({ fieldName: fName, type });
+            }
+        }
+
+        let result = [];
+        for (const id in groups) {
+            const records = groups[id];
+            const group = { __domain: [] };
+            let countKey = `__count`;
+            if (normalizedGroupBys.length && lazy) {
+                countKey = `${normalizedGroupBys[0].fieldName}_count`;
+            }
+            group[countKey] = records.length;
+            const firstElem = records[0];
+            for (const gb of normalizedGroupBys) {
+                const { alias, fieldName } = gb;
+                group[alias] = this._formatValue(firstElem[fieldName], gb);
+            }
+            Object.assign(group, this._aggregateFields(measures, records));
+            result.push(group);
+        }
+        if (normalizedGroupBys.length > 0) {
+            const { alias, interval, type } = normalizedGroupBys[0];
+            result = arraySortBy(result, (group) => {
+                const val = group[alias];
+                if (["date", "datetime"].includes(type)) {
+                    return parseDate(val, { format: SampleServer.FORMATS[interval] });
+                }
+                return val;
+            });
+        }
+        return result;
+    }
+
+    /**
+     * Mocks calls to the read_progress_bar method.
+     * @private
+     * @param {Object} params
+     * @param {string} params.model
+     * @param {Object} params.kwargs
+     * @return {Object}
+     */
+    _mockReadProgressBar(params) {
+        const groupBy = params.kwargs.group_by;
+        const progress_bar = params.kwargs.progress_bar;
+        const groupByField = this.data[params.model].fields[groupBy];
+        const data = {};
+        for (const record of this.data[params.model].records) {
+            let groupByValue = record[groupBy];
+            if (groupByField.type === "many2one") {
+                const relatedRecords = this.data[groupByField.relation].records;
+                const relatedRecord = relatedRecords.find((r) => r.id === groupByValue);
+                groupByValue = relatedRecord.display_name;
+            }
+            if (!(groupByValue in data)) {
+                data[groupByValue] = {};
+                for (const key in progress_bar.colors) {
+                    data[groupByValue][key] = 0;
+                }
+            }
+            const fieldValue = record[progress_bar.field];
+            if (fieldValue in data[groupByValue]) {
+                data[groupByValue][fieldValue]++;
+            }
+        }
+        return data;
+    }
+
+    /**
+     * Mocks calls to the /web/dataset/search_read route to return sample
+     * records.
+     * @private
+     * @param {Object} params
+     * @param {string} params.model
+     * @param {string[]} params.fields
+     * @returns {{ records: Object[], length: number }}
+     */
+    _mockSearchReadController(params) {
+        const model = this.data[params.model];
+        const rawRecords = model.records.slice(0, SampleServer.SEARCH_READ_LIMIT);
+        const records = this._mockRead({
+            model: params.model,
+            args: [rawRecords.map((r) => r.id), params.fields],
+        });
+        return { records, length: records.length };
+    }
+
+    /**
+     * Mocks calls to the web_read_group method to return groups populated
+     * with sample records. Only handles the case where the real call to
+     * web_read_group returned groups, but none of these groups contain
+     * records. In this case, we keep the real groups, and populate them
+     * with sample records.
+     * @private
+     * @param {Object} params
+     * @param {Object} [result] the result of a real call to web_read_group
+     * @returns {{ groups: Object[], length: number }}
+     */
+    _mockWebReadGroup(params) {
+        let groups;
+        if (this.existingGroups) {
+            this._tweakExistingGroups(params);
+            groups = this.existingGroups;
+        } else {
+            groups = this._mockReadGroup(params);
+        }
+        return {
+            groups,
+            length: groups.length,
+        };
+    }
+
+    /**
+     * Updates the sample data such that the existing groups (in database)
+     * also exists in the sample, and such that there are sample records in
+     * those groups.
+     * @private
+     * @param {Object[]} groups empty groups returned by the server
+     * @param {Object} params
+     * @param {string} params.model
+     * @param {string[]} params.groupBy
+     */
+    _populateExistingGroups(params) {
+        if (!this.existingGroupsPopulated) {
+            const groups = this.existingGroups;
+            this.groupsInfo = groups;
+            const groupBy = params.groupBy[0];
+            const values = groups.map((g) => g[groupBy]);
+            const groupByField = this.data[params.model].fields[groupBy];
+            const groupedByM2O = groupByField.type === "many2one";
+            if (groupedByM2O) {
+                // re-populate co model with relevant records
+                this.data[groupByField.relation].records = values.map((v) => {
+                    return { id: v[0], display_name: v[1] };
+                });
+            }
+            for (const r of this.data[params.model].records) {
+                const value = getSampleFromId(r.id, values);
+                r[groupBy] = groupedByM2O ? value[0] : value;
+            }
+            this.existingGroupsPopulated = true;
+        }
+    }
+
+    /**
+     * Generates sample records for the models in this.data. Records will be
+     * generated once, and subsequent calls to this function will be skipped.
+     * @private
+     */
+    _populateModels() {
+        if (!this.populated) {
+            for (const modelName in this.data) {
+                const model = this.data[modelName];
+                const fieldNames = Object.keys(model.fields).filter((f) => f !== "id");
+                const size =
+                    modelName === this.mainModel
+                        ? SampleServer.MAIN_RECORDSET_SIZE
+                        : SampleServer.SUB_RECORDSET_SIZE;
+                for (let id = 1; id <= size; id++) {
+                    const record = { id };
+                    for (const fieldName of fieldNames) {
+                        record[fieldName] = this._generateFieldValue(modelName, fieldName, id);
+                    }
+                    model.records.push(record);
+                }
+            }
+            this.populated = true;
+        }
+    }
+
+    /**
+     * Rounds the given number value according to the configured precision.
+     * @private
+     * @param {number} value
+     * @returns {number}
+     */
+    _sanitizeNumber(value) {
+        return parseFloat(value.toFixed(SampleServer.FLOAT_PRECISION));
+    }
+
+    /**
+     * A real (web_)read_group call has been done, and it has returned groups,
+     * but they are all empty. This function updates the sample data such
+     * that those group values exist and those groups contain sample records.
+     * @private
+     * @param {Object[]} groups empty groups returned by the server
+     * @param {Object} params
+     * @param {string} params.model
+     * @param {string[]} params.fields
+     * @param {string[]} params.groupBy
+     * @returns {Object[]} groups with count and aggregate values updated
+     *
+     * TODO: rename
+     */
+    _tweakExistingGroups(params) {
+        const groups = this.existingGroups;
+        this._populateExistingGroups(params);
+
+        // update count and aggregates for each group
+        const groupBy = params.groupBy[0].split(":")[0];
+        const groupByField = this.data[params.model].fields[groupBy];
+        const groupedByM2O = groupByField.type === "many2one";
+        const records = this.data[params.model].records;
+        for (const g of groups) {
+            const groupValue = groupedByM2O ? g[groupBy][0] : g[groupBy];
+            const recordsInGroup = records.filter((r) => r[groupBy] === groupValue);
+            g[`${groupBy}_count`] = recordsInGroup.length;
+            for (const field of params.fields) {
+                const fieldType = this.data[params.model].fields[field].type;
+                if (["integer, float", "monetary"].includes(fieldType)) {
+                    g[field] = recordsInGroup.reduce((acc, r) => acc + r[field], 0);
+                }
+            }
+            g.__data = {
+                records: this._mockRead({
+                    model: params.model,
+                    args: [recordsInGroup.map((r) => r.id), params.fields],
+                }),
+                length: recordsInGroup.length,
+            };
+        }
+    }
+}
+
+SampleServer.FORMATS = {
+    day: "yyyy-MM-dd",
+    week: "'W'WW kkkk",
+    month: "MMMM yyyy",
+    quarter: "'Q'q yyyy",
+    year: "y",
+};
+SampleServer.DISPLAY_FORMATS = Object.assign({}, SampleServer.FORMATS, { day: "dd MMM yyyy" });
+
+SampleServer.MAIN_RECORDSET_SIZE = 16;
+SampleServer.SUB_RECORDSET_SIZE = 5;
+SampleServer.SEARCH_READ_LIMIT = 10;
+
+SampleServer.MAX_FLOAT = 100;
+SampleServer.MAX_INTEGER = 50;
+SampleServer.MAX_COLOR_INT = 7;
+SampleServer.MAX_MONETARY = 100000;
+SampleServer.DATE_DELTA = 24 * 60; // in hours -> 60 days
+SampleServer.FLOAT_PRECISION = 2;
+
+SampleServer.SAMPLE_COUNTRIES = ["Belgium", "France", "Portugal", "Singapore", "Australia"];
+SampleServer.SAMPLE_PEOPLE = [
+    "John Miller",
+    "Henry Campbell",
+    "Carrie Helle",
+    "Wendi Baltz",
+    "Thomas Passot",
+];
+SampleServer.SAMPLE_TEXTS = [
+    "Laoreet id",
+    "Volutpat blandit",
+    "Integer vitae",
+    "Viverra nam",
+    "In massa",
+];
+SampleServer.PEOPLE_MODELS = [
+    "res.users",
+    "res.partner",
+    "hr.employee",
+    "mail.followers",
+    "mailing.contact",
+];
+
+SampleServer.UnimplementedRouteError = UnimplementedRouteError;
+
+export function buildSampleORM(resModel, fields, user) {
+    const sampleServer = new SampleServer(resModel, fields);
+    const fakeRPC = async (_, params) => {
+        const { kwargs, method, model } = params;
+        const { groupby: groupBy } = kwargs;
+        return sampleServer.mockRpc({ method, model, ...kwargs, groupBy });
+    };
+    return new ORM(fakeRPC, user);
+}

From e0294887ec00ec2aa47c386b3a5ad2562eada7b5 Mon Sep 17 00:00:00 2001
From: Mathieu Duckerts-Antoine <dam@odoo.com>
Date: Tue, 7 Sep 2021 06:22:23 +0000
Subject: [PATCH 09/31] [REF] web: debug manager

We refactor some items in the debug registry. In particular, we want to
make them usable in the legacy and new contexts.

Part-of: odoo/odoo#73311
---
 .../static/src/core/debug/debug_context.js    |  14 +-
 .../static/src/core/debug/debug_menu_items.js |   6 +-
 .../web/static/src/core/debug/debug_utils.js  |  14 +
 addons/web/static/src/legacy/debug_manager.js | 291 +-----------------
 addons/web/static/src/views/debug_items.js    |  94 ++++++
 .../src/webclient/actions/action_service.js   |   3 +-
 .../src/webclient/actions/debug_items.js      | 196 ++++++++++++
 .../tests/core/debug/debug_manager_tests.js   |   2 +-
 .../webclient/actions/window_action_tests.js  |   2 +-
 9 files changed, 327 insertions(+), 295 deletions(-)
 create mode 100644 addons/web/static/src/core/debug/debug_utils.js
 create mode 100644 addons/web/static/src/views/debug_items.js
 create mode 100644 addons/web/static/src/webclient/actions/debug_items.js

diff --git a/addons/web/static/src/core/debug/debug_context.js b/addons/web/static/src/core/debug/debug_context.js
index d8f6987bcf4..a7593ec6131 100644
--- a/addons/web/static/src/core/debug/debug_context.js
+++ b/addons/web/static/src/core/debug/debug_context.js
@@ -1,4 +1,5 @@
 /** @odoo-module **/
+
 import { registry } from "../registry";
 import { memoize } from "../utils/functions";
 import { useEffect } from "@web/core/utils/hooks";
@@ -78,9 +79,12 @@ export function useEnvDebugContext() {
 }
 
 export function useDebugCategory(category, context = {}) {
-    const debugContext = useEnvDebugContext();
-    useEffect(
-        () => debugContext.activateCategory(category, context),
-        () => []
-    );
+    const env = useEnv();
+    if (env.debug) {
+        const debugContext = useEnvDebugContext();
+        useEffect(
+            () => debugContext.activateCategory(category, context),
+            () => []
+        );
+    }
 }
diff --git a/addons/web/static/src/core/debug/debug_menu_items.js b/addons/web/static/src/core/debug/debug_menu_items.js
index 6ef2c887d35..b01286079c9 100644
--- a/addons/web/static/src/core/debug/debug_menu_items.js
+++ b/addons/web/static/src/core/debug/debug_menu_items.js
@@ -1,8 +1,8 @@
 /** @odoo-module **/
 
-import { browser } from "../browser/browser";
-import { routeToUrl } from "../browser/router_service";
-import { registry } from "../registry";
+import { browser } from "@web/core/browser/browser";
+import { routeToUrl } from "@web/core/browser/router_service";
+import { registry } from "@web/core/registry";
 
 function activateAssetsDebugging({ env }) {
     return {
diff --git a/addons/web/static/src/core/debug/debug_utils.js b/addons/web/static/src/core/debug/debug_utils.js
new file mode 100644
index 00000000000..bd91c81db55
--- /dev/null
+++ b/addons/web/static/src/core/debug/debug_utils.js
@@ -0,0 +1,14 @@
+/** @odoo-module **/
+
+export function editModelDebug(env, title, model, id) {
+    return env.services.action.doAction({
+        res_model: model,
+        res_id: id,
+        name: title,
+        type: "ir.actions.act_window",
+        views: [[false, "form"]],
+        view_mode: "form",
+        target: "new",
+        flags: { action_buttons: true, headless: true },
+    });
+}
diff --git a/addons/web/static/src/legacy/debug_manager.js b/addons/web/static/src/legacy/debug_manager.js
index 090892acad7..1264ca824e6 100644
--- a/addons/web/static/src/legacy/debug_manager.js
+++ b/addons/web/static/src/legacy/debug_manager.js
@@ -1,212 +1,15 @@
 /** @odoo-module **/
 
-import { Dialog } from "../core/dialog/dialog";
-import { formatDateTime, parseDateTime } from "../core/l10n/dates";
-import { _lt } from "../core/l10n/translation";
-import { registry } from "../core/registry";
+import { _lt } from "@web/core/l10n/translation";
+import { Dialog } from "@web/core/dialog/dialog";
+import { formatDateTime, parseDateTime } from "@web/core/l10n/dates";
 import { formatMany2one } from "@web/fields/formatters";
+import { registry } from "@web/core/registry";
 
-const { hooks, tags } = owl;
+const { hooks } = owl;
 const { useState } = hooks;
 
-function editModelDebug(env, title, model, id) {
-    return env.services.action.doAction({
-        res_model: model,
-        res_id: id,
-        name: title,
-        type: "ir.actions.act_window",
-        views: [[false, "form"]],
-        view_mode: "form",
-        target: "new",
-        flags: { action_buttons: true, headless: true },
-    });
-}
-
-// Action items
-
-function actionSeparator() {
-    return {
-        type: "separator",
-        sequence: 100,
-    };
-}
-
-function accessSeparator({ accessRights, action }) {
-    const { canSeeModelAccess, canSeeRecordRules } = accessRights;
-    if (!action.res_model || (!canSeeModelAccess && !canSeeRecordRules)) {
-        return null;
-    }
-    return {
-        type: "separator",
-        sequence: 200,
-    };
-}
-
-function editAction({ action, env }) {
-    if (!action.id) {
-        return null;
-    }
-    const description = env._t("Edit Action");
-    return {
-        type: "item",
-        description,
-        callback: () => {
-            editModelDebug(env, description, action.type, action.id);
-        },
-        sequence: 110,
-    };
-}
-
-function viewFields({ action, env }) {
-    if (!action.res_model) {
-        return null;
-    }
-    const description = env._t("View Fields");
-    return {
-        type: "item",
-        description,
-        callback: async () => {
-            const modelId = (
-                await env.services.orm.search("ir.model", [["model", "=", action.res_model]], {
-                    limit: 1,
-                })
-            )[0];
-            env.services.action.doAction({
-                res_model: "ir.model.fields",
-                name: description,
-                views: [
-                    [false, "list"],
-                    [false, "form"],
-                ],
-                domain: [["model_id", "=", modelId]],
-                type: "ir.actions.act_window",
-                context: {
-                    default_model_id: modelId,
-                },
-            });
-        },
-        sequence: 120,
-    };
-}
-
-function manageFilters({ action, env }) {
-    if (!action.res_model) {
-        return null;
-    }
-    const description = env._t("Manage Filters");
-    return {
-        type: "item",
-        description,
-        callback: () => {
-            // manage_filters
-            env.services.action.doAction({
-                res_model: "ir.filters",
-                name: description,
-                views: [
-                    [false, "list"],
-                    [false, "form"],
-                ],
-                type: "ir.actions.act_window",
-                context: {
-                    search_default_my_filters: true,
-                    search_default_model_id: action.res_model,
-                },
-            });
-        },
-        sequence: 130,
-    };
-}
-
-function technicalTranslation({ action, env }) {
-    if (!action.res_model) {
-        return null;
-    }
-    return {
-        type: "item",
-        description: env._t("Technical Translation"),
-        callback: async () => {
-            const result = await env.services.orm.call(
-                "ir.translation",
-                "get_technical_translations",
-                [action.res_model]
-            );
-            env.services.action.doAction(result);
-        },
-        sequence: 140,
-    };
-}
-
-function viewAccessRights({ accessRights, action, env }) {
-    if (!action.res_model || !accessRights.canSeeModelAccess) {
-        return null;
-    }
-    const description = env._t("View Access Rights");
-    return {
-        type: "item",
-        description,
-        callback: async () => {
-            const modelId = (
-                await env.services.orm.search("ir.model", [["model", "=", action.res_model]], {
-                    limit: 1,
-                })
-            )[0];
-            env.services.action.doAction({
-                res_model: "ir.model.access",
-                name: description,
-                views: [
-                    [false, "list"],
-                    [false, "form"],
-                ],
-                domain: [["model_id", "=", modelId]],
-                type: "ir.actions.act_window",
-                context: {
-                    default_model_id: modelId,
-                },
-            });
-        },
-        sequence: 210,
-    };
-}
-
-function viewRecordRules({ accessRights, action, env }) {
-    if (!action.res_model || !accessRights.canSeeRecordRules) {
-        return null;
-    }
-    const description = env._t("Model Record Rules");
-    return {
-        type: "item",
-        description: env._t("View Record Rules"),
-        callback: async () => {
-            const modelId = (
-                await env.services.orm.search("ir.model", [["model", "=", action.res_model]], {
-                    limit: 1,
-                })
-            )[0];
-            env.services.action.doAction({
-                res_model: "ir.rule",
-                name: description,
-                views: [
-                    [false, "list"],
-                    [false, "form"],
-                ],
-                domain: [["model_id", "=", modelId]],
-                type: "ir.actions.act_window",
-                context: {
-                    default_model_id: modelId,
-                },
-            });
-        },
-        sequence: 220,
-    };
-}
-
-class FieldViewGetDialog extends Dialog {}
-FieldViewGetDialog.props = Object.assign({}, Dialog.props, {
-    arch: { type: String },
-    close: Function,
-});
-FieldViewGetDialog.bodyTemplate = tags.xml`<pre t-esc="props.arch"/>`;
-FieldViewGetDialog.title = _lt("Fields View Get");
+const debugRegistry = registry.category("debug");
 
 class GetMetadataDialog extends Dialog {
     setup() {
@@ -243,7 +46,6 @@ class GetMetadataDialog extends Dialog {
 }
 GetMetadataDialog.bodyTemplate = "web.DebugMenu.getMetadataBody";
 GetMetadataDialog.title = _lt("View Metadata");
-
 class SetDefaultDialog extends Dialog {
     setup() {
         super.setup();
@@ -389,66 +191,7 @@ SetDefaultDialog.bodyTemplate = "web.DebugMenu.setDefaultBody";
 SetDefaultDialog.footerTemplate = "web.DebugMenu.SetDefaultFooter";
 SetDefaultDialog.title = _lt("Set Default");
 
-function viewSeparator() {
-    return {
-        type: "separator",
-        sequence: 300,
-    };
-}
-
-function fieldsViewGet({ component, env }) {
-    return {
-        type: "item",
-        description: env._t("Fields View Get"),
-        callback: () => {
-            const props = {
-                arch: component.props.viewInfo.arch,
-            };
-            env.services.dialog.add(FieldViewGetDialog, props);
-        },
-        sequence: 340,
-    };
-}
-
-export function editView({ accessRights, action, component, env }) {
-    if (!accessRights.canEditView) {
-        return null;
-    }
-    let { view_id: viewId, type: viewType } = component.props.viewInfo;
-    viewType = viewType === "tree" ? "list" : viewType;
-    const displayName = action.views.find((v) => v.type === viewType).name.toString();
-    const description = env._t("Edit View: ") + displayName;
-    return {
-        type: "item",
-        description,
-        callback: () => {
-            editModelDebug(env, description, "ir.ui.view", viewId);
-        },
-        sequence: 350,
-    };
-}
-
-export function editSearchView({ accessRights, component, env }) {
-    if (!accessRights.canEditView) {
-        return null;
-    }
-    const description = env._t("Edit SearchView");
-    return {
-        type: "item",
-        description,
-        callback: () => {
-            editModelDebug(
-                env,
-                description,
-                "ir.ui.view",
-                component.props.viewParams.controlPanelFieldsView.view_id
-            );
-        },
-        sequence: 360,
-    };
-}
-
-// Form view itemss
+// Form view items
 
 function setDefaults({ action, component, env }) {
     return {
@@ -515,26 +258,6 @@ function manageAttachments({ action, component, env }) {
     };
 }
 
-const debugRegistry = registry.category("debug");
-
-debugRegistry
-    .category("action")
-    .add("actionSeparator", actionSeparator)
-    .add("editAction", editAction)
-    .add("viewFields", viewFields)
-    .add("manageFilters", manageFilters)
-    .add("technicalTranslation", technicalTranslation)
-    .add("accessSeparator", accessSeparator)
-    .add("viewAccessRights", viewAccessRights)
-    .add("viewRecordRules", viewRecordRules);
-
-debugRegistry
-    .category("view")
-    .add("viewSeparator", viewSeparator)
-    .add("fieldsViewGet", fieldsViewGet)
-    .add("editView", editView)
-    .add("editSearchView", editSearchView);
-
 debugRegistry
     .category("form")
     .add("setDefaults", setDefaults)
diff --git a/addons/web/static/src/views/debug_items.js b/addons/web/static/src/views/debug_items.js
new file mode 100644
index 00000000000..0a37e9f64d3
--- /dev/null
+++ b/addons/web/static/src/views/debug_items.js
@@ -0,0 +1,94 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+import { Dialog } from "@web/core/dialog/dialog";
+import { editModelDebug } from "@web/core/debug/debug_utils";
+import { registry } from "@web/core/registry";
+
+const { tags } = owl;
+
+const debugRegistry = registry.category("debug");
+
+class FieldViewGetDialog extends Dialog {}
+FieldViewGetDialog.props = Object.assign({}, Dialog.props, {
+    arch: { type: String },
+    close: Function,
+});
+FieldViewGetDialog.bodyTemplate = tags.xml`<pre t-esc="props.arch"/>`;
+FieldViewGetDialog.title = _lt("Fields View Get");
+
+function viewSeparator() {
+    return {
+        type: "separator",
+        sequence: 300,
+    };
+}
+
+function fieldsViewGet({ component, env }) {
+    let { arch } = component.props;
+    if ("viewInfo" in component.props) {
+        //legacy
+        arch = component.props.viewInfo.arch;
+    }
+    return {
+        type: "item",
+        description: env._t("Fields View Get"),
+        callback: () => {
+            env.services.dialog.add(FieldViewGetDialog, { arch });
+        },
+        sequence: 340,
+    };
+}
+
+export function editView({ accessRights, component, env }) {
+    if (!accessRights.canEditView) {
+        return null;
+    }
+    let type;
+    let { viewId } = component.props.info || {}; // fallback is there for legacy
+    if ("viewInfo" in component.props) {
+        // legacy
+        viewId = component.props.viewInfo.view_id;
+        type = component.props.viewInfo.type;
+        type = type === "tree" ? "list" : type;
+    } else {
+        type = component.constructor.type;
+    }
+    const displayName = type[0].toUpperCase() + type.slice(1);
+    const description = env._t("Edit View: ") + displayName;
+    return {
+        type: "item",
+        description,
+        callback: () => {
+            editModelDebug(env, description, "ir.ui.view", viewId);
+        },
+        sequence: 350,
+    };
+}
+
+export function editSearchView({ accessRights, component, env }) {
+    if (!accessRights.canEditView) {
+        return null;
+    }
+    let { searchViewId } = component.props.info || {}; // fallback is there for legacy
+    if ("viewParams" in component.props) {
+        //legacy
+        searchViewId = component.props.viewParams.action.controlPanelFieldsView.view_id;
+    }
+    const description = env._t("Edit ControlPanelView");
+    return {
+        type: "item",
+        description,
+        callback: () => {
+            editModelDebug(env, description, "ir.ui.view", searchViewId);
+        },
+        sequence: 360,
+    };
+}
+
+debugRegistry
+    .category("view")
+    .add("viewSeparator", viewSeparator)
+    .add("fieldsViewGet", fieldsViewGet)
+    .add("editView", editView)
+    .add("editSearchView", editSearchView);
diff --git a/addons/web/static/src/webclient/actions/action_service.js b/addons/web/static/src/webclient/actions/action_service.js
index 7a063912cd2..c7795644ed0 100644
--- a/addons/web/static/src/webclient/actions/action_service.js
+++ b/addons/web/static/src/webclient/actions/action_service.js
@@ -9,6 +9,7 @@ import { evaluateExpr } from "@web/core/py_js/py";
 import { registry } from "@web/core/registry";
 import { KeepLast } from "@web/core/utils/concurrency";
 import { sprintf } from "@web/core/utils/strings";
+import { useDebugCategory } from "@web/core/debug/debug_context";
 import { ActionDialog } from "./action_dialog";
 
 /** @typedef {number|false} ActionId */
@@ -465,7 +466,7 @@ function makeActionManager(env) {
             setup() {
                 this.Component = controller.Component;
                 this.componentRef = hooks.useRef("component");
-                this.registerCallback = null;
+                useDebugCategory("action", { action });
                 if (action.target !== "new") {
                     let beforeLeaveFn;
                     this.registerCallback = (type, fn) => {
diff --git a/addons/web/static/src/webclient/actions/debug_items.js b/addons/web/static/src/webclient/actions/debug_items.js
new file mode 100644
index 00000000000..87ab7ec8b7b
--- /dev/null
+++ b/addons/web/static/src/webclient/actions/debug_items.js
@@ -0,0 +1,196 @@
+/** @odoo-module **/
+
+import { editModelDebug } from "@web/core/debug/debug_utils";
+import { registry } from "@web/core/registry";
+
+const debugRegistry = registry.category("debug");
+
+function actionSeparator({ action }) {
+    if (!action.id || !action.res_model) {
+        return null;
+    }
+    return {
+        type: "separator",
+        sequence: 100,
+    };
+}
+
+function accessSeparator({ accessRights, action }) {
+    const { canSeeModelAccess, canSeeRecordRules } = accessRights;
+    if (!action.res_model || (!canSeeModelAccess && !canSeeRecordRules)) {
+        return null;
+    }
+    return {
+        type: "separator",
+        sequence: 200,
+    };
+}
+
+function editAction({ action, env }) {
+    if (!action.id) {
+        return null;
+    }
+    const description = env._t("Edit Action");
+    return {
+        type: "item",
+        description,
+        callback: () => {
+            editModelDebug(env, description, action.type, action.id);
+        },
+        sequence: 110,
+    };
+}
+
+function viewFields({ action, env }) {
+    if (!action.res_model) {
+        return null;
+    }
+    const description = env._t("View Fields");
+    return {
+        type: "item",
+        description,
+        callback: async () => {
+            const modelId = (
+                await env.services.orm.search("ir.model", [["model", "=", action.res_model]], {
+                    limit: 1,
+                })
+            )[0];
+            env.services.action.doAction({
+                res_model: "ir.model.fields",
+                name: description,
+                views: [
+                    [false, "list"],
+                    [false, "form"],
+                ],
+                domain: [["model_id", "=", modelId]],
+                type: "ir.actions.act_window",
+                context: {
+                    default_model_id: modelId,
+                },
+            });
+        },
+        sequence: 120,
+    };
+}
+
+function manageFilters({ action, env }) {
+    if (!action.res_model) {
+        return null;
+    }
+    const description = env._t("Manage Filters");
+    return {
+        type: "item",
+        description,
+        callback: () => {
+            // manage_filters
+            env.services.action.doAction({
+                res_model: "ir.filters",
+                name: description,
+                views: [
+                    [false, "list"],
+                    [false, "form"],
+                ],
+                type: "ir.actions.act_window",
+                context: {
+                    search_default_my_filters: true,
+                    search_default_model_id: action.res_model,
+                },
+            });
+        },
+        sequence: 130,
+    };
+}
+
+function technicalTranslation({ action, env }) {
+    if (!action.res_model) {
+        return null;
+    }
+    return {
+        type: "item",
+        description: env._t("Technical Translation"),
+        callback: async () => {
+            const result = await env.services.orm.call(
+                "ir.translation",
+                "get_technical_translations",
+                [action.res_model]
+            );
+            env.services.action.doAction(result);
+        },
+        sequence: 140,
+    };
+}
+
+function viewAccessRights({ accessRights, action, env }) {
+    if (!action.res_model || !accessRights.canSeeModelAccess) {
+        return null;
+    }
+    const description = env._t("View Access Rights");
+    return {
+        type: "item",
+        description,
+        callback: async () => {
+            const modelId = (
+                await env.services.orm.search("ir.model", [["model", "=", action.res_model]], {
+                    limit: 1,
+                })
+            )[0];
+            env.services.action.doAction({
+                res_model: "ir.model.access",
+                name: description,
+                views: [
+                    [false, "list"],
+                    [false, "form"],
+                ],
+                domain: [["model_id", "=", modelId]],
+                type: "ir.actions.act_window",
+                context: {
+                    default_model_id: modelId,
+                },
+            });
+        },
+        sequence: 210,
+    };
+}
+
+function viewRecordRules({ accessRights, action, env }) {
+    if (!action.res_model || !accessRights.canSeeRecordRules) {
+        return null;
+    }
+    const description = env._t("Model Record Rules");
+    return {
+        type: "item",
+        description: env._t("View Record Rules"),
+        callback: async () => {
+            const modelId = (
+                await env.services.orm.search("ir.model", [["model", "=", action.res_model]], {
+                    limit: 1,
+                })
+            )[0];
+            env.services.action.doAction({
+                res_model: "ir.rule",
+                name: description,
+                views: [
+                    [false, "list"],
+                    [false, "form"],
+                ],
+                domain: [["model_id", "=", modelId]],
+                type: "ir.actions.act_window",
+                context: {
+                    default_model_id: modelId,
+                },
+            });
+        },
+        sequence: 220,
+    };
+}
+
+debugRegistry
+    .category("action")
+    .add("actionSeparator", actionSeparator)
+    .add("editAction", editAction)
+    .add("viewFields", viewFields)
+    .add("manageFilters", manageFilters)
+    .add("technicalTranslation", technicalTranslation)
+    .add("accessSeparator", accessSeparator)
+    .add("viewAccessRights", viewAccessRights)
+    .add("viewRecordRules", viewRecordRules);
diff --git a/addons/web/static/tests/core/debug/debug_manager_tests.js b/addons/web/static/tests/core/debug/debug_manager_tests.js
index 4d09b8f31d8..3d725c4112e 100644
--- a/addons/web/static/tests/core/debug/debug_manager_tests.js
+++ b/addons/web/static/tests/core/debug/debug_manager_tests.js
@@ -19,7 +19,7 @@ import {
 import { click, getFixture, legacyExtraNextTick, patchWithCleanup } from "../../helpers/utils";
 import { createWebClient, doAction, getActionManagerServerData } from "../../webclient/helpers";
 import { openViewItem } from "@web/webclient/debug_items";
-import { editView, editSearchView } from "@web/legacy/debug_manager";
+import { editSearchView, editView } from "@web/views/debug_items";
 
 const { Component, mount, tags } = owl;
 const { xml } = tags;
diff --git a/addons/web/static/tests/webclient/actions/window_action_tests.js b/addons/web/static/tests/webclient/actions/window_action_tests.js
index 81066885e67..a0fb9733bbf 100644
--- a/addons/web/static/tests/webclient/actions/window_action_tests.js
+++ b/addons/web/static/tests/webclient/actions/window_action_tests.js
@@ -2,7 +2,7 @@
 
 import { browser } from "@web/core/browser/browser";
 import { registry } from "@web/core/registry";
-import { editView } from "@web/legacy/debug_manager";
+import { editView } from "@web/views/debug_items";
 import { clearUncommittedChanges } from "@web/webclient/actions/action_service";
 import AbstractView from "web.AbstractView";
 import FormView from "web.FormView";

From c064eb068195825c86e09f52168aca6b0585e16c Mon Sep 17 00:00:00 2001
From: Mathieu Duckerts-Antoine <dam@odoo.com>
Date: Tue, 7 Sep 2021 06:22:25 +0000
Subject: [PATCH 10/31] [IMP] web: add XMLParser class

This class can be used by views to parse their arch.

Part-of: odoo/odoo#73311
---
 addons/web/static/src/core/utils/xml.js | 35 +++++++++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 addons/web/static/src/core/utils/xml.js

diff --git a/addons/web/static/src/core/utils/xml.js b/addons/web/static/src/core/utils/xml.js
new file mode 100644
index 00000000000..7d618bc566f
--- /dev/null
+++ b/addons/web/static/src/core/utils/xml.js
@@ -0,0 +1,35 @@
+/** @odoo-module **/
+
+export class XMLParser {
+    /**
+     * to override. Should return the parsed content of the arch.
+     * It can call the visitArch function if desired
+     */
+    parse() {}
+
+    visitXML(xml, callback) {
+        function visit(xml) {
+            if (xml) {
+                let didVisitChildren = false;
+                const visitChildren = () => {
+                    for (let child of xml.children) {
+                        visit(child);
+                    }
+                    didVisitChildren = true;
+                };
+                const shouldVisitChildren = callback(xml, visitChildren);
+                if (shouldVisitChildren !== false && !didVisitChildren) {
+                    visitChildren();
+                }
+            }
+        }
+        const xmlDoc = typeof xml === "string" ? this.parseXML(xml) : xml;
+        visit(xmlDoc);
+    }
+
+    parseXML(arch) {
+        const parser = new DOMParser();
+        const xml = parser.parseFromString(arch, "text/xml");
+        return xml.documentElement;
+    }
+}

From 205bb172baf67ca29b0424529ba74da4410f3198 Mon Sep 17 00:00:00 2001
From: Mathieu Duckerts-Antoine <dam@odoo.com>
Date: Tue, 7 Sep 2021 06:22:27 +0000
Subject: [PATCH 11/31] [IMP] web: orm service: add webReadGroup function

Before this commit readGroup was actually calling web_read_group.
With this commit, readGroup calls read_group, and webReadGroup
calls web_read_group, as expected.

Part-of: odoo/odoo#73311
---
 addons/web/static/src/core/orm_service.js     | 18 ++++++++--
 .../static/tests/core/orm_service_tests.js    | 34 +++++++++++++++++--
 2 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/addons/web/static/src/core/orm_service.js b/addons/web/static/src/core/orm_service.js
index fea150e4452..8c3024c487d 100644
--- a/addons/web/static/src/core/orm_service.js
+++ b/addons/web/static/src/core/orm_service.js
@@ -129,9 +129,9 @@ export class ORM {
     }
 
     readGroup(model, domain, fields, groupby, options = {}, ctx = {}) {
+        validateArray("domain", domain);
         validatePrimitiveList("fields", "string", fields);
         validatePrimitiveList("groupby", "string", groupby);
-        validateArray("domain", domain);
         const kwargs = {
             domain,
             groupby,
@@ -139,7 +139,7 @@ export class ORM {
             context: ctx,
         };
         assignOptions(kwargs, options, ["lazy", "offset", "orderby", "limit"]);
-        return this.call(model, "web_read_group", [], kwargs);
+        return this.call(model, "read_group", [], kwargs);
     }
 
     search(model, domain, options = {}, ctx = {}) {
@@ -169,6 +169,20 @@ export class ORM {
         return this.call(model, "unlink", [ids], { context: ctx });
     }
 
+    webReadGroup(model, domain, fields, groupby, options = {}, ctx = {}) {
+        validateArray("domain", domain);
+        validatePrimitiveList("fields", "string", fields);
+        validatePrimitiveList("groupby", "string", groupby);
+        const kwargs = {
+            domain,
+            groupby,
+            fields,
+            context: ctx,
+        };
+        assignOptions(kwargs, options, ["lazy", "offset", "orderby", "limit"]);
+        return this.call(model, "web_read_group", [], kwargs);
+    }
+
     webSearchRead(model, domain, fields, options = {}, ctx = {}) {
         validateArray("domain", domain);
         validatePrimitiveList("fields", "string", fields);
diff --git a/addons/web/static/tests/core/orm_service_tests.js b/addons/web/static/tests/core/orm_service_tests.js
index c8e7d11fcc2..12843cd3179 100644
--- a/addons/web/static/tests/core/orm_service_tests.js
+++ b/addons/web/static/tests/core/orm_service_tests.js
@@ -155,11 +155,11 @@ QUnit.test("write method", async (assert) => {
     });
 });
 
-QUnit.test("readGroup method", async (assert) => {
+QUnit.test("webReadGroup method", async (assert) => {
     const [query, rpc] = makeFakeRPC();
     serviceRegistry.add("rpc", rpc);
     const env = await makeTestEnv();
-    await env.services.orm.readGroup(
+    await env.services.orm.webReadGroup(
         "sale.order",
         [["user_id", "=", 2]],
         ["amount_total:sum"],
@@ -185,6 +185,36 @@ QUnit.test("readGroup method", async (assert) => {
     });
 });
 
+QUnit.test("readGroup method", async (assert) => {
+    const [query, rpc] = makeFakeRPC();
+    serviceRegistry.add("rpc", rpc);
+    const env = await makeTestEnv();
+    await env.services.orm.readGroup(
+        "sale.order",
+        [["user_id", "=", 2]],
+        ["amount_total:sum"],
+        ["date_order"],
+        { offset: 1 }
+    );
+    assert.strictEqual(query.route, "/web/dataset/call_kw/sale.order/read_group");
+    assert.deepEqual(query.params, {
+        args: [],
+        kwargs: {
+            domain: [["user_id", "=", 2]],
+            fields: ["amount_total:sum"],
+            groupby: ["date_order"],
+            context: {
+                lang: "en",
+                uid: 7,
+                tz: "taht",
+            },
+            offset: 1,
+        },
+        method: "read_group",
+        model: "sale.order",
+    });
+});
+
 QUnit.test("searchRead method", async (assert) => {
     const [query, rpc] = makeFakeRPC();
     serviceRegistry.add("rpc", rpc);

From 0008067ee56e8227e8b27dc34f51caf5e0a33a26 Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Tue, 7 Sep 2021 06:22:29 +0000
Subject: [PATCH 12/31] [IMP] web: add date formatter

This commit re-introduces the date formatter to go along with its
datetime counterpart, as well as a few tests.

It also refactors the date parsers to make proper use of the arguments
passed to the functions, namely to alter the timezone.

Part-of: odoo/odoo#73311
---
 addons/web/static/src/core/l10n/dates.js      |   92 +-
 addons/web/static/src/fields/formatters.js    |    3 +-
 addons/web/static/src/fields/parsers.js       |    1 +
 .../web/static/tests/core/l10n/dates_tests.js | 1307 +++++++++--------
 4 files changed, 769 insertions(+), 634 deletions(-)

diff --git a/addons/web/static/src/core/l10n/dates.js b/addons/web/static/src/core/l10n/dates.js
index e2cfa3c6cc5..4dbda3c7566 100644
--- a/addons/web/static/src/core/l10n/dates.js
+++ b/addons/web/static/src/core/l10n/dates.js
@@ -1,18 +1,14 @@
 /** @odoo-module **/
 
-import { memoize } from "../utils/functions";
-import { sprintf } from "../utils/strings";
-import { localization } from "./localization";
-import { _t } from "./translation";
+import { localization } from "@web/core/l10n/localization";
+import { _t } from "@web/core/l10n/translation";
+import { memoize } from "@web/core/utils/functions";
+import { sprintf } from "@web/core/utils/strings";
 
 const { DateTime } = luxon;
 
-/**
- * Change the method toJSON to return the formated value to send server side.
- */
-DateTime.prototype.toJSON = function () {
-    return this.toFormat("yyyy-MM-dd HH:mm:ss");
-};
+const SERVER_DATE_FORMAT = "yyyy-MM-dd";
+const SERVER_TIME_FORMAT = "HH:mm:ss";
 
 // -----------------------------------------------------------------------------
 // Helpers
@@ -146,7 +142,24 @@ export const strftimeToLuxonFormat = memoize(function strftimeToLuxonFormat(valu
 // -----------------------------------------------------------------------------
 
 /**
- * Format a DateTime object
+ * Formats a DateTime object to a date string
+ *
+ * `options.timezone` is defaulted to false on dates since we assume they
+ * shouldn't be affected by timezones like datetimes.
+ *
+ * @see formatDateTime
+ * @returns {string}
+ */
+export function formatDate(value, options = {}) {
+    return formatDateTime(value, {
+        timezone: false, // Timezone should never alter a 'date' value.
+        ...options,
+        format: options.format || localization.dateFormat,
+    });
+}
+
+/**
+ * Formats a DateTime object to a datetime string
  *
  * @param {DateTime | false} value
  * @param {Object} options
@@ -178,28 +191,21 @@ export function formatDateTime(value, options = {}) {
 // -----------------------------------------------------------------------------
 
 /**
- * Parses a string value to an UTC Luxon DateTime object.
+ * Parses a string value to a Luxon DateTime object.
  *
- * @param {string} value value to parse.
- *  - Value can take the form of a smart date:
- *    e.g. "+3w" for three weeks from now.
- *    (`options.format` and `options.timezone` are ignored in this case)
+ * `options.timezone` is defaulted to false on dates since we assume they
+ * shouldn't be affected by timezones like datetimes.
  *
- *  - If value cannot be parsed within the provided format,
- *    ISO8601 and SQL formats are then tried.
- *
- * @param {object} options
- * @param {string} [options.format]
- *  Provided format used to parse the input value.
- *  Default=the session localization format
- * @returns {DateTime|false} Luxon DateTime object (in the UTC timezone)
+ * @see parseDateTime (Note: since we're only interested by the date itself, the
+ *  returned value will always be set at the start of the day)
+ * @returns {DateTime | false} Luxon DateTime object
  */
 export function parseDate(value, options = {}) {
-    return parseDateTime(value, { dateOnly: true, format: options.format });
+    return parseDateTime(value, { timezone: false, ...options }).startOf("day");
 }
 
 /**
- * Parses a string value to an UTC Luxon DateTime object.
+ * Parses a string value to a Luxon DateTime object.
  *
  * @param {string} value value to parse.
  *  - Value can take the form of a smart date:
@@ -210,11 +216,6 @@ export function parseDate(value, options = {}) {
  *    ISO8601 and SQL formats are then tried.
  *
  * @param {object} options
- * @param {boolean} [options.dateOnly]
- *  The output date will represent the start of day (time is truncated).
- *
- *  Default=false.
- *
  * @param {string} [options.format]
  *  Provided format used to parse the input value.
  *
@@ -222,19 +223,18 @@ export function parseDate(value, options = {}) {
  *
  * @param {boolean} [options.timezone]
  *  - True = input value is considered being in localtime.
- *  - False = input value is considered being in utc time.
+ *  - False = input value is considered being in utc time, and the returned
+ *            value will have the UTC zone.
  *
  *  NB: ISO strings containing timezone information
  *      will have priority over this option.
  *
  *  Default=false.
  *
- * @returns {DateTime|false} Luxon DateTime object (in the UTC timezone)
+ * @returns {DateTime | false} Luxon DateTime object
  */
 export function parseDateTime(value, options = {}) {
     if (!value) {
-        // BOI: is {DateTime|false} really what we want ?
-        // I think we  should return a DateTime.invalid when falsy.
         return false;
     }
 
@@ -242,6 +242,7 @@ export function parseDateTime(value, options = {}) {
     const parseOpts = {
         setZone: true,
         zone: options.timezone ? "local" : "utc",
+        locale: options.locale,
     };
 
     let result = constrain(parseSmartDateInput(value));
@@ -279,6 +280,23 @@ export function parseDateTime(value, options = {}) {
         throw new Error(sprintf(_t("'%s' is not a correct date or datetime"), value));
     }
 
-    result = result.toUTC();
-    return options.dateOnly ? result.startOf("day") : result;
+    return options.timezone ? result : result.toUTC();
 }
+
+/**
+ * Returns a serialized string representing the given date.
+ * @param {DateTime} value
+ * @returns {string}
+ */
+export const serializeDate = (value) => {
+    return formatDate(value, { format: SERVER_DATE_FORMAT });
+};
+
+/**
+ * Returns a serialized string representing the given datetime.
+ * @param {DateTime} value
+ * @returns {string}
+ */
+export const serializeDateTime = (value) => {
+    return formatDateTime(value, { format: `${SERVER_DATE_FORMAT} ${SERVER_TIME_FORMAT}` });
+};
diff --git a/addons/web/static/src/fields/formatters.js b/addons/web/static/src/fields/formatters.js
index cec5c4ef1a4..e8d6395aa4c 100644
--- a/addons/web/static/src/fields/formatters.js
+++ b/addons/web/static/src/fields/formatters.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import { formatDateTime } from "@web/core/l10n/dates";
+import { formatDate, formatDateTime } from "@web/core/l10n/dates";
 import { localization as l10n } from "@web/core/l10n/localization";
 import { _lt } from "@web/core/l10n/translation";
 import { registry } from "@web/core/registry";
@@ -312,6 +312,7 @@ export function formatPercentage(value, options = {}) {
 
 registry
     .category("formatters")
+    .add("date", formatDate)
     .add("datetime", formatDateTime)
     .add("float", formatFloat)
     .add("float_factor", formatFloatFactor)
diff --git a/addons/web/static/src/fields/parsers.js b/addons/web/static/src/fields/parsers.js
index 9b391bbbf58..68d61aa716c 100644
--- a/addons/web/static/src/fields/parsers.js
+++ b/addons/web/static/src/fields/parsers.js
@@ -152,4 +152,5 @@ registry
     .add("float", parseFloat)
     .add("float_time", parseFloatTime)
     .add("integer", parseInteger)
+    .add("monetary", parseMonetary)
     .add("percentage", parsePercentage);
diff --git a/addons/web/static/tests/core/l10n/dates_tests.js b/addons/web/static/tests/core/l10n/dates_tests.js
index e535bc12688..f5729a5de61 100644
--- a/addons/web/static/tests/core/l10n/dates_tests.js
+++ b/addons/web/static/tests/core/l10n/dates_tests.js
@@ -1,6 +1,7 @@
 /** @odoo-module **/
 
 import {
+    formatDate,
     formatDateTime,
     parseDate,
     parseDateTime,
@@ -59,654 +60,768 @@ function runTestSet(assert, testSet, options) {
     }
 }
 
+QUnit.module(
+    "utils",
+    {
+        before() {
+            moment.suppressDeprecationWarnings = true;
+        },
+        after() {
+            moment.suppressDeprecationWarnings = false;
+        },
+    },
+    () => {
+        QUnit.module("dates");
 
-QUnit.module("utils", {
-        before() {moment.suppressDeprecationWarnings = true;},
-        after() {moment.suppressDeprecationWarnings = false;},
-    }, () => {
-    QUnit.module("dates");
+        QUnit.test("formatDate", async (assert) => {
+            patch(localization, "dateformat", { dateFormat: "MM/dd/yyyy" });
 
-    QUnit.test("formatDateTime", async (assert) => {
-        patch(localization, "datetimeformat", { dateTimeFormat: "MM/dd/yyyy HH:mm:ss" });
+            let formatted = formatDate(DateTime.utc(2009, 5, 4, 12, 34, 23));
+            let expected = "05/04/2009";
+            assert.strictEqual(formatted, expected);
 
-        let formatted = formatDateTime(DateTime.utc(2009, 5, 4, 12, 34, 23));
-        let expected = "05/04/2009 12:34:23";
-        assert.strictEqual(formatted, expected);
+            formatted = formatDate(DateTime.utc(2009, 5, 4, 12, 34, 23), { timezone: false });
+            assert.strictEqual(formatted, expected);
 
-        formatted = formatDateTime(DateTime.utc(2009, 5, 4, 12, 34, 23), { timezone: false });
-        assert.strictEqual(formatted, expected);
+            formatted = formatDate(DateTime.utc(2009, 5, 4, 12, 34, 23), { timezone: true });
+            expected = "05/04/2009";
+            assert.strictEqual(formatted, expected);
 
-        formatted = formatDateTime(DateTime.utc(2009, 5, 4, 12, 34, 23), { timezone: true });
-        expected = "05/04/2009 14:34:23";
-        assert.strictEqual(formatted, expected);
-
-        unpatch(localization, "datetimeformat");
-    });
-
-    QUnit.test("formatDateTime (with different timezone offset)", async (assert) => {
-        patch(localization, "datetimeformat", { dateTimeFormat: "MM/dd/yyyy HH:mm:ss" });
-
-        let str = formatDateTime(DateTime.utc(2017, 1, 1, 10, 0, 0, 0));
-        assert.strictEqual(str, "01/01/2017 10:00:00");
-        str = formatDateTime(DateTime.utc(2017, 6, 1, 10, 0, 0, 0));
-        assert.strictEqual(str, "06/01/2017 10:00:00");
-
-        str = formatDateTime(DateTime.utc(2017, 1, 1, 10, 0, 0, 0), { timezone: false });
-        assert.strictEqual(str, "01/01/2017 10:00:00");
-        str = formatDateTime(DateTime.utc(2017, 6, 1, 10, 0, 0, 0), { timezone: false });
-        assert.strictEqual(str, "06/01/2017 10:00:00");
-
-        str = formatDateTime(DateTime.utc(2017, 1, 1, 10, 0, 0, 0), { timezone: true });
-        assert.strictEqual(str, "01/01/2017 11:00:00");
-        str = formatDateTime(DateTime.utc(2017, 6, 1, 10, 0, 0, 0), { timezone: true });
-        assert.strictEqual(str, "06/01/2017 12:00:00");
-
-        unpatch(localization, "datetimeformat");
-    });
-
-    QUnit.test("parseDateTime", async (assert) => {
-        patch(localization, "default loc", defaultLocalization);
-
-        assert.throws(
-            function () {
-                parseDateTime("13/01/2019 12:00:00");
-            },
-            /is not a correct/,
-            "Wrongly formated dates should be invalid"
-        );
-        assert.throws(
-            function () {
-                parseDateTime("01/01/0999 12:00:00");
-            },
-            /is not a correct/,
-            "Dates before 1000 should be invalid"
-        );
-        assert.throws(
-            function () {
-                parseDateTime("01/01/10000 12:00:00");
-            },
-            /is not a correct/,
-            "Dates after 9999 should be invalid"
-        );
-        assert.throws(function () {
-            parseDateTime("invalid value");
-        }, /is not a correct/);
-
-        let expected = "2019-01-13T10:05:45.000Z";
-        let dateStr = "01/13/2019 10:05:45";
-        assert.equal(parseDateTime(dateStr).toISO(), expected, "Date with leading 0");
-        dateStr = "1/13/2019 10:5:45";
-        assert.equal(parseDateTime(dateStr).toISO(), expected, "Date without leading 0");
-
-        unpatch(localization, "default loc");
-    });
-
-    QUnit.test("parseDateTime (norwegian locale)", async (assert) => {
-        const dateFormat = strftimeToLuxonFormat("%d. %b %Y");
-        const timeFormat = strftimeToLuxonFormat("%H:%M:%S");
-        patch(localization, "weird loc", {
-            dateFormat,
-            timeFormat,
-            dateTimeFormat: `${dateFormat} ${timeFormat}`,
+            unpatch(localization, "dateformat");
         });
 
-        // Before WOWL we were using MomentJS.
-        // Now it has been replaced by luxon.js, we cannot declare customized locales.
-        // In legacy web, parseDateTime tests were originally defining custom locales
-        // for english and norwegian.
-        // Here, we simply use the vanilla Intl support to switch locale.
-        const originalLocale = Settings.defaultLocale;
-        Settings.defaultLocale = "no"; // Norwegian
+        QUnit.test("formatDate (with different timezone offset)", async (assert) => {
+            patch(localization, "dateformat", { dateFormat: "MM/dd/yyyy" });
 
-        const dateStr = "16. des 2019 10:05:45";
-        const expected = "2019-12-16T10:05:45.000Z";
-        assert.equal(parseDateTime(dateStr).toISO(), expected, "Day/month inverted + month i18n");
+            let str = formatDate(DateTime.utc(2017, 1, 1, 10, 0, 0, 0));
+            assert.strictEqual(str, "01/01/2017");
+            str = formatDate(DateTime.utc(2017, 6, 1, 10, 0, 0, 0));
+            assert.strictEqual(str, "06/01/2017");
 
-        Settings.defaultLocale = originalLocale;
-        unpatch(localization, "weird loc");
-    });
+            str = formatDate(DateTime.utc(2017, 1, 1, 10, 0, 0, 0), { timezone: false });
+            assert.strictEqual(str, "01/01/2017");
+            str = formatDate(DateTime.utc(2017, 6, 1, 10, 0, 0, 0), { timezone: false });
+            assert.strictEqual(str, "06/01/2017");
 
-    QUnit.test("parseDate without separator", async (assert) => {
-        const dateFormat = strftimeToLuxonFormat("%d.%m/%Y");
-        const timeFormat = strftimeToLuxonFormat("%H:%M:%S");
-        patch(localization, "patch loc", {
-            dateFormat,
-            timeFormat,
-            dateTimeFormat: `${dateFormat} ${timeFormat}`,
+            str = formatDate(DateTime.utc(2017, 1, 1, 10, 0, 0, 0), { timezone: true });
+            assert.strictEqual(str, "01/01/2017");
+            str = formatDate(DateTime.utc(2017, 6, 1, 10, 0, 0, 0), { timezone: true });
+            assert.strictEqual(str, "06/01/2017");
+
+            unpatch(localization, "dateformat");
         });
 
-        const testDateFormat = "dd.MM/yyyy";
+        QUnit.test("formatDateTime", async (assert) => {
+            patch(localization, "datetimeformat", { dateTimeFormat: "MM/dd/yyyy HH:mm:ss" });
 
-        assert.throws(
-            function () {
-                parseDate("1137");
-            },
-            /is not a correct/,
-            "Wrongly formated dates should be invalid"
-        );
-        assert.throws(
-            function () {
-                parseDate("1197");
-            },
-            /is not a correct/,
-            "Wrongly formated dates should be invalid"
-        );
-        assert.throws(
-            function () {
-                parseDate("0131");
-            },
-            /is not a correct/,
-            "Wrongly formated dates should be invalid"
-        );
-        assert.throws(
-            function () {
-                parseDate("970131");
-            },
-            /is not a correct/,
-            "Wrongly formated dates should be invalid"
-        );
-        assert.equal(parseDate("2001").toFormat(testDateFormat), "20.01/" + DateTime.utc().year);
-        assert.equal(parseDate("3101").toFormat(testDateFormat), "31.01/" + DateTime.utc().year);
-        assert.equal(parseDate("31.01").toFormat(testDateFormat), "31.01/" + DateTime.utc().year);
-        assert.equal(parseDate("310197").toFormat(testDateFormat), "31.01/1997");
-        assert.equal(parseDate("310117").toFormat(testDateFormat), "31.01/2017");
-        assert.equal(parseDate("31011985").toFormat(testDateFormat), "31.01/1985");
-        unpatch(localization, "patch loc");
-    });
+            let formatted = formatDateTime(DateTime.utc(2009, 5, 4, 12, 34, 23));
+            let expected = "05/04/2009 12:34:23";
+            assert.strictEqual(formatted, expected);
 
-    QUnit.test("parseDateTime without separator", async (assert) => {
-        const dateFormat = strftimeToLuxonFormat("%d.%m/%Y");
-        const timeFormat = strftimeToLuxonFormat("%H:%M:%S");
-        patch(localization, "patch loc", {
-            dateFormat,
-            timeFormat,
-            dateTimeFormat: `${dateFormat} ${timeFormat}`,
+            formatted = formatDateTime(DateTime.utc(2009, 5, 4, 12, 34, 23), { timezone: false });
+            assert.strictEqual(formatted, expected);
+
+            formatted = formatDateTime(DateTime.utc(2009, 5, 4, 12, 34, 23), { timezone: true });
+            expected = "05/04/2009 14:34:23";
+            assert.strictEqual(formatted, expected);
+
+            unpatch(localization, "datetimeformat");
         });
 
-        const dateTimeFormat = "dd.MM/yyyy HH:mm/ss";
-        assert.equal(parseDateTime("3101198508").toFormat(dateTimeFormat), "31.01/1985 08:00/00");
-        assert.equal(parseDateTime("310119850833").toFormat(dateTimeFormat), "31.01/1985 08:33/00");
-        assert.equal(
-            parseDateTime("31/01/1985 08").toFormat(dateTimeFormat),
-            "31.01/1985 08:00/00"
-        );
-        unpatch(localization, "patch loc");
-    });
+        QUnit.test("formatDateTime (with different timezone offset)", async (assert) => {
+            patch(localization, "datetimeformat", { dateTimeFormat: "MM/dd/yyyy HH:mm:ss" });
 
-    QUnit.test("parse smart date input", async (assert) => {
-        const format = "dd MM yyyy";
-        assert.strictEqual(
-            parseDate("+1d").toFormat(format),
-            DateTime.utc().plus({ days: 1 }).toFormat(format)
-        );
-        assert.strictEqual(
-            parseDateTime("+2w").toFormat(format),
-            DateTime.utc().plus({ weeks: 2 }).toFormat(format)
-        );
-        assert.strictEqual(
-            parseDate("+3m").toFormat(format),
-            DateTime.utc().plus({ months: 3 }).toFormat(format)
-        );
-        assert.strictEqual(
-            parseDateTime("+4y").toFormat(format),
-            DateTime.utc().plus({ years: 4 }).toFormat(format)
-        );
-        assert.strictEqual(
-            parseDate("+5").toFormat(format),
-            DateTime.utc().plus({ days: 5 }).toFormat(format)
-        );
-        assert.strictEqual(
-            parseDateTime("-5").toFormat(format),
-            DateTime.utc().minus({ days: 5 }).toFormat(format)
-        );
-        assert.strictEqual(
-            parseDate("-4y").toFormat(format),
-            DateTime.utc().minus({ years: 4 }).toFormat(format)
-        );
-        assert.strictEqual(
-            parseDateTime("-3m").toFormat(format),
-            DateTime.utc().minus({ months: 3 }).toFormat(format)
-        );
-        assert.strictEqual(
-            parseDate("-2w").toFormat(format),
-            DateTime.utc().minus({ weeks: 2 }).toFormat(format)
-        );
-        assert.strictEqual(
-            parseDateTime("-1d").toFormat(format),
-            DateTime.utc().minus({ days: 1 }).toFormat(format)
-        );
-    });
+            let str = formatDateTime(DateTime.utc(2017, 1, 1, 10, 0, 0, 0));
+            assert.strictEqual(str, "01/01/2017 10:00:00");
+            str = formatDateTime(DateTime.utc(2017, 6, 1, 10, 0, 0, 0));
+            assert.strictEqual(str, "06/01/2017 10:00:00");
 
-    QUnit.test("parseDateTime SQL Format", async (assert) => {
-        patch(localization, "default loc", defaultLocalization);
+            str = formatDateTime(DateTime.utc(2017, 1, 1, 10, 0, 0, 0), { timezone: false });
+            assert.strictEqual(str, "01/01/2017 10:00:00");
+            str = formatDateTime(DateTime.utc(2017, 6, 1, 10, 0, 0, 0), { timezone: false });
+            assert.strictEqual(str, "06/01/2017 10:00:00");
 
-        let dateStr = "2017-05-15 09:12:34";
-        let expected = "2017-05-15T09:12:34.000Z";
-        assert.equal(parseDateTime(dateStr).toISO(), expected, "Date with SQL format");
+            str = formatDateTime(DateTime.utc(2017, 1, 1, 10, 0, 0, 0), { timezone: true });
+            assert.strictEqual(str, "01/01/2017 11:00:00");
+            str = formatDateTime(DateTime.utc(2017, 6, 1, 10, 0, 0, 0), { timezone: true });
+            assert.strictEqual(str, "06/01/2017 12:00:00");
 
-        dateStr = "2017-05-08 09:12:34";
-        expected = "2017-05-08T09:12:34.000Z";
-        assert.equal(
-            parseDateTime(dateStr).toISO(),
-            expected,
-            "Date SQL format, check date is not confused with month"
-        );
+            unpatch(localization, "datetimeformat");
+        });
 
-        unpatch(localization, "default loc");
-    });
+        QUnit.test("parseDateTime", async (assert) => {
+            patch(localization, "default loc", defaultLocalization);
 
-    QUnit.module("dates utils compatibility with legacy", {
-        beforeEach() {
-            patchWithCleanup(localization, {
+            assert.throws(
+                function () {
+                    parseDateTime("13/01/2019 12:00:00");
+                },
+                /is not a correct/,
+                "Wrongly formated dates should be invalid"
+            );
+            assert.throws(
+                function () {
+                    parseDateTime("01/01/0999 12:00:00");
+                },
+                /is not a correct/,
+                "Dates before 1000 should be invalid"
+            );
+            assert.throws(
+                function () {
+                    parseDateTime("01/01/10000 12:00:00");
+                },
+                /is not a correct/,
+                "Dates after 9999 should be invalid"
+            );
+            assert.throws(function () {
+                parseDateTime("invalid value");
+            }, /is not a correct/);
+
+            let expected = "2019-01-13T10:05:45.000Z";
+            let dateStr = "01/13/2019 10:05:45";
+            assert.equal(parseDateTime(dateStr).toISO(), expected, "Date with leading 0");
+            dateStr = "1/13/2019 10:5:45";
+            assert.equal(parseDateTime(dateStr).toISO(), expected, "Date without leading 0");
+
+            unpatch(localization, "default loc");
+        });
+
+        QUnit.test("parseDateTime (norwegian locale)", async (assert) => {
+            const dateFormat = strftimeToLuxonFormat("%d. %b %Y");
+            const timeFormat = strftimeToLuxonFormat("%H:%M:%S");
+            patch(localization, "weird loc", {
                 dateFormat,
                 timeFormat,
                 dateTimeFormat: `${dateFormat} ${timeFormat}`,
             });
 
-            patchWithCleanup(legacy.core._t.database.parameters, {
-                date_format: formats.date,
-                time_format: formats.time,
+            // Before WOWL we were using MomentJS.
+            // Now it has been replaced by luxon.js, we cannot declare customized locales.
+            // In legacy web, parseDateTime tests were originally defining custom locales
+            // for english and norwegian.
+            // Here, we simply use the vanilla Intl support to switch locale.
+            const originalLocale = Settings.defaultLocale;
+            Settings.defaultLocale = "no"; // Norwegian
+
+            const dateStr = "16. des 2019 10:05:45";
+            const expected = "2019-12-16T10:05:45.000Z";
+            assert.equal(
+                parseDateTime(dateStr).toISO(),
+                expected,
+                "Day/month inverted + month i18n"
+            );
+
+            Settings.defaultLocale = originalLocale;
+            unpatch(localization, "weird loc");
+        });
+
+        QUnit.test("parseDate without separator", async (assert) => {
+            const dateFormat = strftimeToLuxonFormat("%d.%m/%Y");
+            const timeFormat = strftimeToLuxonFormat("%H:%M:%S");
+            patch(localization, "patch loc", {
+                dateFormat,
+                timeFormat,
+                dateTimeFormat: `${dateFormat} ${timeFormat}`,
             });
 
-            // Patch legacy session
-            const initialSession = Object.assign({}, legacy.session);
-            const sessionPatch = {
-                getTZOffset(date) {
-                    const offset = DateTime.local().zone.offset(date.valueOf());
-                    return offset;
+            const testDateFormat = "dd.MM/yyyy";
+
+            assert.throws(
+                function () {
+                    parseDate("1137");
                 },
-            };
-            Object.assign(legacy.session, sessionPatch);
-            registerCleanup(() => {
-                for (let key in sessionPatch) {
-                    delete legacy.session[key];
-                }
-                Object.assign(legacy.session, initialSession);
+                /is not a correct/,
+                "Wrongly formated dates should be invalid"
+            );
+            assert.throws(
+                function () {
+                    parseDate("1197");
+                },
+                /is not a correct/,
+                "Wrongly formated dates should be invalid"
+            );
+            assert.throws(
+                function () {
+                    parseDate("0131");
+                },
+                /is not a correct/,
+                "Wrongly formated dates should be invalid"
+            );
+            assert.throws(
+                function () {
+                    parseDate("970131");
+                },
+                /is not a correct/,
+                "Wrongly formated dates should be invalid"
+            );
+            assert.equal(
+                parseDate("2001").toFormat(testDateFormat),
+                "20.01/" + DateTime.utc().year
+            );
+            assert.equal(
+                parseDate("3101").toFormat(testDateFormat),
+                "31.01/" + DateTime.utc().year
+            );
+            assert.equal(
+                parseDate("31.01").toFormat(testDateFormat),
+                "31.01/" + DateTime.utc().year
+            );
+            assert.equal(parseDate("310197").toFormat(testDateFormat), "31.01/1997");
+            assert.equal(parseDate("310117").toFormat(testDateFormat), "31.01/2017");
+            assert.equal(parseDate("31011985").toFormat(testDateFormat), "31.01/1985");
+            unpatch(localization, "patch loc");
+        });
+
+        QUnit.test("parseDateTime without separator", async (assert) => {
+            const dateFormat = strftimeToLuxonFormat("%d.%m/%Y");
+            const timeFormat = strftimeToLuxonFormat("%H:%M:%S");
+            patch(localization, "patch loc", {
+                dateFormat,
+                timeFormat,
+                dateTimeFormat: `${dateFormat} ${timeFormat}`,
             });
 
-            // Patch legacy date (will also work for new dates utils): 15th July 2020 12h30
-            const unpatchDate = legacy.test_utils.mock.patchDate(2020, 6, 15, 12, 30, 0);
-            registerCleanup(() => {
-                if (unpatchDate) {
-                    unpatchDate();
-                }
+            const dateTimeFormat = "dd.MM/yyyy HH:mm/ss";
+            assert.equal(
+                parseDateTime("3101198508").toFormat(dateTimeFormat),
+                "31.01/1985 08:00/00"
+            );
+            assert.equal(
+                parseDateTime("310119850833").toFormat(dateTimeFormat),
+                "31.01/1985 08:33/00"
+            );
+            assert.equal(
+                parseDateTime("31/01/1985 08").toFormat(dateTimeFormat),
+                "31.01/1985 08:00/00"
+            );
+            unpatch(localization, "patch loc");
+        });
+
+        QUnit.test("parse smart date input", async (assert) => {
+            const format = "dd MM yyyy";
+            assert.strictEqual(
+                parseDate("+1d").toFormat(format),
+                DateTime.utc().plus({ days: 1 }).toFormat(format)
+            );
+            assert.strictEqual(
+                parseDateTime("+2w").toFormat(format),
+                DateTime.utc().plus({ weeks: 2 }).toFormat(format)
+            );
+            assert.strictEqual(
+                parseDate("+3m").toFormat(format),
+                DateTime.utc().plus({ months: 3 }).toFormat(format)
+            );
+            assert.strictEqual(
+                parseDateTime("+4y").toFormat(format),
+                DateTime.utc().plus({ years: 4 }).toFormat(format)
+            );
+            assert.strictEqual(
+                parseDate("+5").toFormat(format),
+                DateTime.utc().plus({ days: 5 }).toFormat(format)
+            );
+            assert.strictEqual(
+                parseDateTime("-5").toFormat(format),
+                DateTime.utc().minus({ days: 5 }).toFormat(format)
+            );
+            assert.strictEqual(
+                parseDate("-4y").toFormat(format),
+                DateTime.utc().minus({ years: 4 }).toFormat(format)
+            );
+            assert.strictEqual(
+                parseDateTime("-3m").toFormat(format),
+                DateTime.utc().minus({ months: 3 }).toFormat(format)
+            );
+            assert.strictEqual(
+                parseDate("-2w").toFormat(format),
+                DateTime.utc().minus({ weeks: 2 }).toFormat(format)
+            );
+            assert.strictEqual(
+                parseDateTime("-1d").toFormat(format),
+                DateTime.utc().minus({ days: 1 }).toFormat(format)
+            );
+        });
+
+        QUnit.test("parseDateTime SQL Format", async (assert) => {
+            patch(localization, "default loc", defaultLocalization);
+
+            let dateStr = "2017-05-15 09:12:34";
+            let expected = "2017-05-15T09:12:34.000Z";
+            assert.equal(parseDateTime(dateStr).toISO(), expected, "Date with SQL format");
+
+            dateStr = "2017-05-08 09:12:34";
+            expected = "2017-05-08T09:12:34.000Z";
+            assert.equal(
+                parseDateTime(dateStr).toISO(),
+                expected,
+                "Date SQL format, check date is not confused with month"
+            );
+
+            unpatch(localization, "default loc");
+        });
+
+        QUnit.module("dates utils compatibility with legacy", {
+            beforeEach() {
+                patchWithCleanup(localization, {
+                    dateFormat,
+                    timeFormat,
+                    dateTimeFormat: `${dateFormat} ${timeFormat}`,
+                });
+
+                patchWithCleanup(legacy.core._t.database.parameters, {
+                    date_format: formats.date,
+                    time_format: formats.time,
+                });
+
+                // Patch legacy session
+                const initialSession = Object.assign({}, legacy.session);
+                const sessionPatch = {
+                    getTZOffset(date) {
+                        const offset = DateTime.local().zone.offset(date.valueOf());
+                        return offset;
+                    },
+                };
+                Object.assign(legacy.session, sessionPatch);
+                registerCleanup(() => {
+                    for (let key in sessionPatch) {
+                        delete legacy.session[key];
+                    }
+                    Object.assign(legacy.session, initialSession);
+                });
+
+                // Patch legacy date (will also work for new dates utils): 15th July 2020 12h30
+                const unpatchDate = legacy.test_utils.mock.patchDate(2020, 6, 15, 12, 30, 0);
+                registerCleanup(() => {
+                    if (unpatchDate) {
+                        unpatchDate();
+                    }
+                });
+            },
+        });
+
+        QUnit.test("parseDate", async (assert) => {
+            /**
+             * Type of testSet key: string
+             * Type of testSet value: [newExpected: string, legacyExpected: string]
+             */
+            const testSet = new Map([
+                ["10101010101010", ["1010-10-10T00:00:00.000Z"]],
+                ["1191111", ["1191-04-21T00:00:00.000Z"]], // day 111 of year 1191
+                ["11911111", ["1191-11-11T00:00:00.000Z"]],
+                ["3101", ["2020-01-31T00:00:00.000Z"]],
+                ["310160", ["2060-01-31T00:00:00.000Z"]],
+                ["311260", ["2060-12-31T00:00:00.000Z"]],
+
+                ["310161", ["1961-01-31T00:00:00.000Z", "2061-01-31T00:00:00.000Z"]], // moment vs luxon 19xx/20xx thresholds
+                ["310165", ["1965-01-31T00:00:00.000Z", "2065-01-31T00:00:00.000Z"]], // moment vs luxon 19xx/20xx thresholds
+                ["310168", ["1968-01-31T00:00:00.000Z", "2068-01-31T00:00:00.000Z"]], // moment vs luxon 19xx/20xx thresholds
+                ["311268", ["1968-12-31T00:00:00.000Z", "2068-12-31T00:00:00.000Z"]], // moment vs luxon 19xx/20xx thresholds
+
+                ["310169", ["1969-01-31T00:00:00.000Z"]],
+                ["310170", ["1970-01-31T00:00:00.000Z"]],
+                ["310197", ["1997-01-31T00:00:00.000Z"]],
+                ["310117", ["2017-01-31T00:00:00.000Z"]],
+                ["31011985", ["1985-01-31T00:00:00.000Z"]],
+                ["3101198508", ["1985-01-31T00:00:00.000Z"]],
+                ["310119850833", ["1985-01-31T00:00:00.000Z"]],
+
+                ["1137", [undefined]],
+                ["1197", [undefined]],
+                ["0131", [undefined]],
+                ["0922", [undefined]],
+                ["2020", [undefined]],
+
+                ["199901", ["1999-01-01T00:00:00.000Z", undefined]],
+                ["30100210", ["3010-02-10T00:00:00.000Z", undefined]],
+                ["3010210", ["3010-07-29T00:00:00.000Z", undefined]],
+
+                ["970131", [undefined]],
+                ["31.01", ["2020-01-31T00:00:00.000Z"]],
+                ["31/01/1985 08", ["1985-01-31T00:00:00.000Z"]],
+
+                ["01121934", ["1934-12-01T00:00:00.000Z"]],
+                ["011234", ["2034-12-01T00:00:00.000Z"]],
+                ["011260", ["2060-12-01T00:00:00.000Z"]],
+                ["2", ["2020-07-02T00:00:00.000Z"]],
+                ["02", ["2020-07-02T00:00:00.000Z"]],
+                ["20", ["2020-07-20T00:00:00.000Z"]],
+                ["202", ["2020-02-20T00:00:00.000Z"]],
+                ["2002", ["2020-02-20T00:00:00.000Z"]],
+                ["0202", ["2020-02-02T00:00:00.000Z"]],
+                ["02/02", ["2020-02-02T00:00:00.000Z"]],
+                ["02/13", [undefined]],
+                ["02/1313", [undefined]],
+                ["09990101", [undefined]],
+                ["19990101", ["1999-01-01T00:00:00.000Z"]],
+                ["19990130", ["1999-01-30T00:00:00.000Z"]],
+                ["19991230", ["1999-12-30T00:00:00.000Z"]],
+                ["19993012", [undefined]],
+                ["2016-200", ["2016-07-18T00:00:00.000Z"]],
+                ["2016200", ["2016-07-18T00:00:00.000Z"]], // day 200 of year 2016
+                ["2020-", [undefined]],
+                ["2020-W2", [undefined]],
+                ["2020W23", ["2020-06-01T00:00:00.000Z"]],
+                ["2020-W02", ["2020-01-06T00:00:00.000Z"]],
+                ["2020-W32", ["2020-08-03T00:00:00.000Z"]],
+                ["2020-W32-3", ["2020-08-05T00:00:00.000Z"]],
+                ["2016-W21-3", ["2016-05-25T00:00:00.000Z"]],
+                ["2016W213", ["2016-05-25T00:00:00.000Z"]],
+                ["2209", ["2020-09-22T00:00:00.000Z"]],
+                ["22:09", ["2020-09-22T00:00:00.000Z"]],
+                ["2012", ["2020-12-20T00:00:00.000Z"]],
+
+                [
+                    "2016-01-03 09:24:15.123",
+                    ["2016-01-03T00:00:00.000Z", "2016-01-03T09:24:15.123Z"],
+                ],
+                [
+                    "2016-01-03T09:24:15.123",
+                    ["2016-01-03T00:00:00.000Z", "2016-01-03T09:24:15.123Z"],
+                ],
+                [
+                    "2016-01-03T09:24:15.123+06:00",
+                    ["2016-01-03T00:00:00.000Z", "2016-01-03T03:24:15.123Z"],
+                ],
+                [
+                    "2016-01-03T09:24:15.123+16:00",
+                    ["2016-01-02T00:00:00.000Z", "2016-01-02T17:24:15.123Z"],
+                ],
+                [
+                    "2016-01-03T09:24:15.123Z",
+                    ["2016-01-03T00:00:00.000Z", "2016-01-03T09:24:15.123Z"],
+                ],
+                [
+                    "2016-W21-3T09:24:15.123",
+                    ["2016-05-25T00:00:00.000Z", "2016-05-25T09:24:15.123Z"],
+                ],
+                ["2016-W21-3 09:24:15.123", [undefined, "2016-05-25T09:24:15.123Z"]],
+
+                ["2016-03-27T02:00:00.000+02:00", ["2016-03-27T00:00:00.000Z"]],
+                [
+                    "2016-03-27T03:00:00.000+02:00",
+                    ["2016-03-27T00:00:00.000Z", "2016-03-27T01:00:00.000Z"],
+                ],
+                [
+                    "2016-03-27T02:00:00.000",
+                    ["2016-03-27T00:00:00.000Z", "2016-03-27T02:00:00.000Z"],
+                ],
+                [
+                    "2016-03-27T03:00:00.000",
+                    ["2016-03-27T00:00:00.000Z", "2016-03-27T03:00:00.000Z"],
+                ],
+                [
+                    "2016-03-27T02:00:00.000Z",
+                    ["2016-03-27T00:00:00.000Z", "2016-03-27T02:00:00.000Z"],
+                ],
+                [
+                    "2016-03-27T03:00:00.000Z",
+                    ["2016-03-27T00:00:00.000Z", "2016-03-27T03:00:00.000Z"],
+                ],
+
+                ["09:22", [undefined]],
+                ["2013", [undefined]],
+                ["011261", ["1961-12-01T00:00:00.000Z", "2061-12-01T00:00:00.000Z"]],
+            ]);
+
+            runTestSet(assert, testSet, {
+                newFn: (input) => parseDate(input).toISO(),
+                legacyFn: (input) => legacy.field_utils.parse.date(input).toISOString(),
             });
-        },
-    });
-
-    QUnit.test("parseDate", async (assert) => {
-        /**
-         * Type of testSet key: string
-         * Type of testSet value: [newExpected: string, legacyExpected: string]
-         */
-        const testSet = new Map([
-            ["10101010101010", ["1010-10-10T00:00:00.000Z"]],
-            ["1191111", ["1191-04-21T00:00:00.000Z"]], // day 111 of year 1191
-            ["11911111", ["1191-11-11T00:00:00.000Z"]],
-            ["3101", ["2020-01-31T00:00:00.000Z"]],
-            ["310160", ["2060-01-31T00:00:00.000Z"]],
-            ["311260", ["2060-12-31T00:00:00.000Z"]],
-
-            ["310161", ["1961-01-31T00:00:00.000Z", "2061-01-31T00:00:00.000Z"]], // moment vs luxon 19xx/20xx thresholds
-            ["310165", ["1965-01-31T00:00:00.000Z", "2065-01-31T00:00:00.000Z"]], // moment vs luxon 19xx/20xx thresholds
-            ["310168", ["1968-01-31T00:00:00.000Z", "2068-01-31T00:00:00.000Z"]], // moment vs luxon 19xx/20xx thresholds
-            ["311268", ["1968-12-31T00:00:00.000Z", "2068-12-31T00:00:00.000Z"]], // moment vs luxon 19xx/20xx thresholds
-
-            ["310169", ["1969-01-31T00:00:00.000Z"]],
-            ["310170", ["1970-01-31T00:00:00.000Z"]],
-            ["310197", ["1997-01-31T00:00:00.000Z"]],
-            ["310117", ["2017-01-31T00:00:00.000Z"]],
-            ["31011985", ["1985-01-31T00:00:00.000Z"]],
-            ["3101198508", ["1985-01-31T00:00:00.000Z"]],
-            ["310119850833", ["1985-01-31T00:00:00.000Z"]],
-
-            ["1137", [undefined]],
-            ["1197", [undefined]],
-            ["0131", [undefined]],
-            ["0922", [undefined]],
-            ["2020", [undefined]],
-
-            ["199901", ["1999-01-01T00:00:00.000Z", undefined]],
-            ["30100210", ["3010-02-10T00:00:00.000Z", undefined]],
-            ["3010210", ["3010-07-29T00:00:00.000Z", undefined]],
-
-            ["970131", [undefined]],
-            ["31.01", ["2020-01-31T00:00:00.000Z"]],
-            ["31/01/1985 08", ["1985-01-31T00:00:00.000Z"]],
-
-            ["01121934", ["1934-12-01T00:00:00.000Z"]],
-            ["011234", ["2034-12-01T00:00:00.000Z"]],
-            ["011260", ["2060-12-01T00:00:00.000Z"]],
-            ["2", ["2020-07-02T00:00:00.000Z"]],
-            ["02", ["2020-07-02T00:00:00.000Z"]],
-            ["20", ["2020-07-20T00:00:00.000Z"]],
-            ["202", ["2020-02-20T00:00:00.000Z"]],
-            ["2002", ["2020-02-20T00:00:00.000Z"]],
-            ["0202", ["2020-02-02T00:00:00.000Z"]],
-            ["02/02", ["2020-02-02T00:00:00.000Z"]],
-            ["02/13", [undefined]],
-            ["02/1313", [undefined]],
-            ["09990101", [undefined]],
-            ["19990101", ["1999-01-01T00:00:00.000Z"]],
-            ["19990130", ["1999-01-30T00:00:00.000Z"]],
-            ["19991230", ["1999-12-30T00:00:00.000Z"]],
-            ["19993012", [undefined]],
-            ["2016-200", ["2016-07-18T00:00:00.000Z"]],
-            ["2016200", ["2016-07-18T00:00:00.000Z"]], // day 200 of year 2016
-            ["2020-", [undefined]],
-            ["2020-W2", [undefined]],
-            ["2020W23", ["2020-06-01T00:00:00.000Z"]],
-            ["2020-W02", ["2020-01-06T00:00:00.000Z"]],
-            ["2020-W32", ["2020-08-03T00:00:00.000Z"]],
-            ["2020-W32-3", ["2020-08-05T00:00:00.000Z"]],
-            ["2016-W21-3", ["2016-05-25T00:00:00.000Z"]],
-            ["2016W213", ["2016-05-25T00:00:00.000Z"]],
-            ["2209", ["2020-09-22T00:00:00.000Z"]],
-            ["22:09", ["2020-09-22T00:00:00.000Z"]],
-            ["2012", ["2020-12-20T00:00:00.000Z"]],
-
-            ["2016-01-03 09:24:15.123", ["2016-01-03T00:00:00.000Z", "2016-01-03T09:24:15.123Z"]],
-            ["2016-01-03T09:24:15.123", ["2016-01-03T00:00:00.000Z", "2016-01-03T09:24:15.123Z"]],
-            [
-                "2016-01-03T09:24:15.123+06:00",
-                ["2016-01-03T00:00:00.000Z", "2016-01-03T03:24:15.123Z"],
-            ],
-            [
-                "2016-01-03T09:24:15.123+16:00",
-                ["2016-01-02T00:00:00.000Z", "2016-01-02T17:24:15.123Z"],
-            ],
-            ["2016-01-03T09:24:15.123Z", ["2016-01-03T00:00:00.000Z", "2016-01-03T09:24:15.123Z"]],
-            ["2016-W21-3T09:24:15.123", ["2016-05-25T00:00:00.000Z", "2016-05-25T09:24:15.123Z"]],
-            ["2016-W21-3 09:24:15.123", [undefined, "2016-05-25T09:24:15.123Z"]],
-
-            ["2016-03-27T02:00:00.000+02:00", ["2016-03-27T00:00:00.000Z"]],
-            [
-                "2016-03-27T03:00:00.000+02:00",
-                ["2016-03-27T00:00:00.000Z", "2016-03-27T01:00:00.000Z"],
-            ],
-            ["2016-03-27T02:00:00.000", ["2016-03-27T00:00:00.000Z", "2016-03-27T02:00:00.000Z"]],
-            ["2016-03-27T03:00:00.000", ["2016-03-27T00:00:00.000Z", "2016-03-27T03:00:00.000Z"]],
-            ["2016-03-27T02:00:00.000Z", ["2016-03-27T00:00:00.000Z", "2016-03-27T02:00:00.000Z"]],
-            ["2016-03-27T03:00:00.000Z", ["2016-03-27T00:00:00.000Z", "2016-03-27T03:00:00.000Z"]],
-
-            ["09:22", [undefined]],
-            ["2013", [undefined]],
-            ["011261", ["1961-12-01T00:00:00.000Z", "2061-12-01T00:00:00.000Z"]],
-        ]);
-
-        runTestSet(assert, testSet, {
-            newFn: (input) => parseDate(input).toISO(),
-            legacyFn: (input) => legacy.field_utils.parse.date(input).toISOString(),
         });
-    });
 
-    QUnit.test("parseDate (with legacy options.isUTC = true)", async (assert) => {
-        /**
-         * Type of testSet key: string
-         * Type of testSet value: [newExpected: string, legacyExpected: string]
-         */
-        const testSet = new Map([
-            ["932-10-10", [undefined]], // year < 1000 are not supported
-            ["1932-10-10", ["1932-10-10T00:00:00.000Z"]],
-            ["09990101", [undefined]], // year < 1000 are not supported
-            ["19993012", [undefined]], // there is no 30th month
-            ["19990101", ["1999-01-01T00:00:00.000Z", undefined]],
-            ["19990130", ["1999-01-30T00:00:00.000Z", undefined]],
-            ["19991230", ["1999-12-30T00:00:00.000Z", undefined]],
-            ["2016-01-03 09:24:15.123", ["2016-01-03T00:00:00.000Z", "2016-01-03T09:24:15.123Z"]], // Outputting the time was weird in legacy anyway
-            ["2016-01-03T09:24:15.123", ["2016-01-03T00:00:00.000Z", "2016-01-03T09:24:15.123Z"]], // Outputting the time was weird in legacy anyway
-            [
-                "2016-01-03 09:24:15.123+06:00",
-                ["2016-01-03T00:00:00.000Z", "2016-01-03T03:24:15.123Z"],
-            ], // Outputting the time was weird in legacy anyway
-            [
-                "2016-01-03T09:24:15.123+06:00",
-                ["2016-01-03T00:00:00.000Z", "2016-01-03T03:24:15.123Z"],
-            ], // Outputting the time was weird in legacy anyway
-            [
-                "2016-01-03 09:24:15.123+16:00",
-                ["2016-01-02T00:00:00.000Z", "2016-01-02T17:24:15.123Z"],
-            ], // Outputting the time was weird in legacy anyway
-            [
-                "2016-01-03T09:24:15.123+16:00",
-                ["2016-01-02T00:00:00.000Z", "2016-01-02T17:24:15.123Z"],
-            ], // Outputting the time was weird in legacy anyway
-            ["2016-01-03 09:24:15.123Z", ["2016-01-03T00:00:00.000Z", "2016-01-03T09:24:15.123Z"]], // Outputting the time was weird in legacy anyway
-            ["2016-01-03T09:24:15.123Z", ["2016-01-03T00:00:00.000Z", "2016-01-03T09:24:15.123Z"]], // Outputting the time was weird in legacy anyway
-        ]);
+        QUnit.test("parseDate (with legacy options.isUTC = true)", async (assert) => {
+            /**
+             * Type of testSet key: string
+             * Type of testSet value: [newExpected: string, legacyExpected: string]
+             */
+            const testSet = new Map([
+                ["932-10-10", [undefined]], // year < 1000 are not supported
+                ["1932-10-10", ["1932-10-10T00:00:00.000Z"]],
+                ["09990101", [undefined]], // year < 1000 are not supported
+                ["19993012", [undefined]], // there is no 30th month
+                ["19990101", ["1999-01-01T00:00:00.000Z", undefined]],
+                ["19990130", ["1999-01-30T00:00:00.000Z", undefined]],
+                ["19991230", ["1999-12-30T00:00:00.000Z", undefined]],
+                [
+                    "2016-01-03 09:24:15.123",
+                    ["2016-01-03T00:00:00.000Z", "2016-01-03T09:24:15.123Z"],
+                ], // Outputting the time was weird in legacy anyway
+                [
+                    "2016-01-03T09:24:15.123",
+                    ["2016-01-03T00:00:00.000Z", "2016-01-03T09:24:15.123Z"],
+                ], // Outputting the time was weird in legacy anyway
+                [
+                    "2016-01-03 09:24:15.123+06:00",
+                    ["2016-01-03T00:00:00.000Z", "2016-01-03T03:24:15.123Z"],
+                ], // Outputting the time was weird in legacy anyway
+                [
+                    "2016-01-03T09:24:15.123+06:00",
+                    ["2016-01-03T00:00:00.000Z", "2016-01-03T03:24:15.123Z"],
+                ], // Outputting the time was weird in legacy anyway
+                [
+                    "2016-01-03 09:24:15.123+16:00",
+                    ["2016-01-02T00:00:00.000Z", "2016-01-02T17:24:15.123Z"],
+                ], // Outputting the time was weird in legacy anyway
+                [
+                    "2016-01-03T09:24:15.123+16:00",
+                    ["2016-01-02T00:00:00.000Z", "2016-01-02T17:24:15.123Z"],
+                ], // Outputting the time was weird in legacy anyway
+                [
+                    "2016-01-03 09:24:15.123Z",
+                    ["2016-01-03T00:00:00.000Z", "2016-01-03T09:24:15.123Z"],
+                ], // Outputting the time was weird in legacy anyway
+                [
+                    "2016-01-03T09:24:15.123Z",
+                    ["2016-01-03T00:00:00.000Z", "2016-01-03T09:24:15.123Z"],
+                ], // Outputting the time was weird in legacy anyway
+            ]);
 
-        runTestSet(assert, testSet, {
-            newFn: (input) => parseDate(input, { format: "YYYY-MM-DD" }).toISO(),
-            legacyFn: (input) =>
-                legacy.field_utils.parse.date(input, null, { isUTC: true }).toISOString(),
+            runTestSet(assert, testSet, {
+                newFn: (input) => parseDate(input, { format: "YYYY-MM-DD" }).toISO(),
+                legacyFn: (input) =>
+                    legacy.field_utils.parse.date(input, null, { isUTC: true }).toISOString(),
+            });
         });
-    });
 
-    QUnit.test("parseDateTime", async (assert) => {
-        /**
-         * Type of testSet key: string
-         * Type of testSet value: [newExpected: string, legacyExpected: string]
-         */
-        const testSet = new Map([
-            ["10101010101010", ["1010-10-10T10:10:10.000Z"]],
-            ["1191111", ["1191-04-21T00:00:00.000Z"]], // day 111 of year 1191
-            ["11911111", ["1191-11-11T00:00:00.000Z"]],
-            ["3101", ["2020-01-31T00:00:00.000Z"]],
-            ["310160", ["2060-01-31T00:00:00.000Z"]],
-            ["311260", ["2060-12-31T00:00:00.000Z"]],
-            ["310161", ["1961-01-31T00:00:00.000Z", "2061-01-31T00:00:00.000Z"]],
-            ["310165", ["1965-01-31T00:00:00.000Z", "2065-01-31T00:00:00.000Z"]],
-            ["310168", ["1968-01-31T00:00:00.000Z", "2068-01-31T00:00:00.000Z"]],
-            ["311268", ["1968-12-31T00:00:00.000Z", "2068-12-31T00:00:00.000Z"]],
-            ["310169", ["1969-01-31T00:00:00.000Z"]],
-            ["310170", ["1970-01-31T00:00:00.000Z"]],
-            ["310197", ["1997-01-31T00:00:00.000Z"]],
-            ["310117", ["2017-01-31T00:00:00.000Z"]],
-            ["31011985", ["1985-01-31T00:00:00.000Z"]],
-            ["3101198508", ["1985-01-31T08:00:00.000Z"]],
-            ["310119850833", ["1985-01-31T08:33:00.000Z"]],
-            ["1137", [undefined]],
-            ["1197", [undefined]],
-            ["0131", [undefined]],
-            ["0922", [undefined]],
-            ["2020", [undefined]],
-            ["199901", ["1999-01-01T00:00:00.000Z", undefined]],
-            ["30100210", ["3010-02-10T00:00:00.000Z"]],
-            ["3010210", ["3010-07-29T00:00:00.000Z"]],
-            ["970131", [undefined]],
-            ["31.01", ["2020-01-31T00:00:00.000Z"]],
-            ["31/01/1985 08", ["1985-01-31T08:00:00.000Z"]],
+        QUnit.test("parseDateTime", async (assert) => {
+            /**
+             * Type of testSet key: string
+             * Type of testSet value: [newExpected: string, legacyExpected: string]
+             */
+            const testSet = new Map([
+                ["10101010101010", ["1010-10-10T10:10:10.000Z"]],
+                ["1191111", ["1191-04-21T00:00:00.000Z"]], // day 111 of year 1191
+                ["11911111", ["1191-11-11T00:00:00.000Z"]],
+                ["3101", ["2020-01-31T00:00:00.000Z"]],
+                ["310160", ["2060-01-31T00:00:00.000Z"]],
+                ["311260", ["2060-12-31T00:00:00.000Z"]],
+                ["310161", ["1961-01-31T00:00:00.000Z", "2061-01-31T00:00:00.000Z"]],
+                ["310165", ["1965-01-31T00:00:00.000Z", "2065-01-31T00:00:00.000Z"]],
+                ["310168", ["1968-01-31T00:00:00.000Z", "2068-01-31T00:00:00.000Z"]],
+                ["311268", ["1968-12-31T00:00:00.000Z", "2068-12-31T00:00:00.000Z"]],
+                ["310169", ["1969-01-31T00:00:00.000Z"]],
+                ["310170", ["1970-01-31T00:00:00.000Z"]],
+                ["310197", ["1997-01-31T00:00:00.000Z"]],
+                ["310117", ["2017-01-31T00:00:00.000Z"]],
+                ["31011985", ["1985-01-31T00:00:00.000Z"]],
+                ["3101198508", ["1985-01-31T08:00:00.000Z"]],
+                ["310119850833", ["1985-01-31T08:33:00.000Z"]],
+                ["1137", [undefined]],
+                ["1197", [undefined]],
+                ["0131", [undefined]],
+                ["0922", [undefined]],
+                ["2020", [undefined]],
+                ["199901", ["1999-01-01T00:00:00.000Z", undefined]],
+                ["30100210", ["3010-02-10T00:00:00.000Z"]],
+                ["3010210", ["3010-07-29T00:00:00.000Z"]],
+                ["970131", [undefined]],
+                ["31.01", ["2020-01-31T00:00:00.000Z"]],
+                ["31/01/1985 08", ["1985-01-31T08:00:00.000Z"]],
 
-            ["01121934", ["1934-12-01T00:00:00.000Z"]],
-            ["011234", ["2034-12-01T00:00:00.000Z"]],
-            ["011260", ["2060-12-01T00:00:00.000Z"]],
-            ["2", ["2020-07-02T00:00:00.000Z"]],
-            ["02", ["2020-07-02T00:00:00.000Z"]],
-            ["20", ["2020-07-20T00:00:00.000Z"]],
-            ["202", ["2020-02-20T00:00:00.000Z"]],
-            ["2002", ["2020-02-20T00:00:00.000Z"]],
-            ["0202", ["2020-02-02T00:00:00.000Z"]],
-            ["02/02", ["2020-02-02T00:00:00.000Z"]],
-            ["02/13", [undefined]],
-            ["02/1313", [undefined]],
-            ["09990101", [undefined]],
-            ["19990101", ["1999-01-01T00:00:00.000Z"]],
-            ["19990130", ["1999-01-30T00:00:00.000Z"]],
-            ["19991230", ["1999-12-30T00:00:00.000Z"]],
-            ["19993012", [undefined]],
-            ["2016-200", ["2016-07-18T00:00:00.000Z"]],
-            ["2016200", ["2016-07-18T00:00:00.000Z"]], // day 200 of year 2016
-            ["2020-", [undefined]],
-            ["2020-W2", [undefined]],
-            ["2020W23", ["2020-06-01T00:00:00.000Z"]],
-            ["2020-W02", ["2020-01-06T00:00:00.000Z"]],
-            ["2020-W32", ["2020-08-03T00:00:00.000Z"]],
-            ["2020-W32-3", ["2020-08-05T00:00:00.000Z"]],
-            ["2016-W21-3", ["2016-05-25T00:00:00.000Z"]],
-            ["2016W213", ["2016-05-25T00:00:00.000Z"]],
-            ["2209", ["2020-09-22T00:00:00.000Z"]],
-            ["22:09", ["2020-09-22T00:00:00.000Z"]],
-            ["2012", ["2020-12-20T00:00:00.000Z"]],
+                ["01121934", ["1934-12-01T00:00:00.000Z"]],
+                ["011234", ["2034-12-01T00:00:00.000Z"]],
+                ["011260", ["2060-12-01T00:00:00.000Z"]],
+                ["2", ["2020-07-02T00:00:00.000Z"]],
+                ["02", ["2020-07-02T00:00:00.000Z"]],
+                ["20", ["2020-07-20T00:00:00.000Z"]],
+                ["202", ["2020-02-20T00:00:00.000Z"]],
+                ["2002", ["2020-02-20T00:00:00.000Z"]],
+                ["0202", ["2020-02-02T00:00:00.000Z"]],
+                ["02/02", ["2020-02-02T00:00:00.000Z"]],
+                ["02/13", [undefined]],
+                ["02/1313", [undefined]],
+                ["09990101", [undefined]],
+                ["19990101", ["1999-01-01T00:00:00.000Z"]],
+                ["19990130", ["1999-01-30T00:00:00.000Z"]],
+                ["19991230", ["1999-12-30T00:00:00.000Z"]],
+                ["19993012", [undefined]],
+                ["2016-200", ["2016-07-18T00:00:00.000Z"]],
+                ["2016200", ["2016-07-18T00:00:00.000Z"]], // day 200 of year 2016
+                ["2020-", [undefined]],
+                ["2020-W2", [undefined]],
+                ["2020W23", ["2020-06-01T00:00:00.000Z"]],
+                ["2020-W02", ["2020-01-06T00:00:00.000Z"]],
+                ["2020-W32", ["2020-08-03T00:00:00.000Z"]],
+                ["2020-W32-3", ["2020-08-05T00:00:00.000Z"]],
+                ["2016-W21-3", ["2016-05-25T00:00:00.000Z"]],
+                ["2016W213", ["2016-05-25T00:00:00.000Z"]],
+                ["2209", ["2020-09-22T00:00:00.000Z"]],
+                ["22:09", ["2020-09-22T00:00:00.000Z"]],
+                ["2012", ["2020-12-20T00:00:00.000Z"]],
 
-            ["2016-01-03 09:24:15.123", ["2016-01-03T09:24:15.123Z"]],
-            ["2016-01-03T09:24:15.123", ["2016-01-03T09:24:15.123Z"]],
-            ["2016-01-03T09:24:15.123+06:00", ["2016-01-03T03:24:15.123Z"]],
-            ["2016-01-03T09:24:15.123+16:00", ["2016-01-02T17:24:15.123Z"]],
-            ["2016-01-03T09:24:15.123Z", ["2016-01-03T09:24:15.123Z"]],
-            ["2016-W21-3T09:24:15.123", ["2016-05-25T09:24:15.123Z"]],
-            ["2016-W21-3 09:24:15.123", [undefined, "2016-05-25T09:24:15.123Z"]],
+                ["2016-01-03 09:24:15.123", ["2016-01-03T09:24:15.123Z"]],
+                ["2016-01-03T09:24:15.123", ["2016-01-03T09:24:15.123Z"]],
+                ["2016-01-03T09:24:15.123+06:00", ["2016-01-03T03:24:15.123Z"]],
+                ["2016-01-03T09:24:15.123+16:00", ["2016-01-02T17:24:15.123Z"]],
+                ["2016-01-03T09:24:15.123Z", ["2016-01-03T09:24:15.123Z"]],
+                ["2016-W21-3T09:24:15.123", ["2016-05-25T09:24:15.123Z"]],
+                ["2016-W21-3 09:24:15.123", [undefined, "2016-05-25T09:24:15.123Z"]],
 
-            ["2016-03-27T02:00:00.000+02:00", ["2016-03-27T00:00:00.000Z"]],
-            ["2016-03-27T03:00:00.000+02:00", ["2016-03-27T01:00:00.000Z"]],
-            ["2016-03-27T02:00:00.000", ["2016-03-27T02:00:00.000Z"]],
-            ["2016-03-27T03:00:00.000", ["2016-03-27T03:00:00.000Z"]],
-            ["2016-03-27T02:00:00.000Z", ["2016-03-27T02:00:00.000Z"]],
-            ["2016-03-27T03:00:00.000Z", ["2016-03-27T03:00:00.000Z"]],
+                ["2016-03-27T02:00:00.000+02:00", ["2016-03-27T00:00:00.000Z"]],
+                ["2016-03-27T03:00:00.000+02:00", ["2016-03-27T01:00:00.000Z"]],
+                ["2016-03-27T02:00:00.000", ["2016-03-27T02:00:00.000Z"]],
+                ["2016-03-27T03:00:00.000", ["2016-03-27T03:00:00.000Z"]],
+                ["2016-03-27T02:00:00.000Z", ["2016-03-27T02:00:00.000Z"]],
+                ["2016-03-27T03:00:00.000Z", ["2016-03-27T03:00:00.000Z"]],
 
-            ["09:22", [undefined]],
-            ["2013", [undefined]],
-            ["011261", ["1961-12-01T00:00:00.000Z", "2061-12-01T00:00:00.000Z"]],
-        ]);
+                ["09:22", [undefined]],
+                ["2013", [undefined]],
+                ["011261", ["1961-12-01T00:00:00.000Z", "2061-12-01T00:00:00.000Z"]],
+            ]);
 
-        runTestSet(assert, testSet, {
-            newFn: (input) => parseDateTime(input).toISO(),
-            legacyFn: (input) => legacy.field_utils.parse.datetime(input).toISOString(),
+            runTestSet(assert, testSet, {
+                newFn: (input) => parseDateTime(input).toISO(),
+                legacyFn: (input) => legacy.field_utils.parse.datetime(input).toISOString(),
+            });
         });
-    });
 
-    QUnit.test("parseDateTime (with legacy options.isUTC = true)", async (assert) => {
-        /**
-         * Type of testSet key: string
-         * Type of testSet value: [newExpected: string, legacyExpected: string]
-         */
-        const testSet = new Map([
-            ["932-10-10", [undefined, "2000-10-10T00:00:00.000Z"]], // weird behaviour in legacy
-            ["1932-10-10", ["1932-10-10T00:00:00.000Z", "2000-10-10T00:00:00.000Z"]], // weird behaviour in legacy
-            ["09990101", [undefined, "2000-01-01T00:00:00.000Z"]], // weird behaviour in legacy
-            ["19993012", [undefined, "2000-01-01T00:00:00.000Z"]], // weird behaviour in legacy
+        QUnit.test("parseDateTime (with legacy options.isUTC = true)", async (assert) => {
+            /**
+             * Type of testSet key: string
+             * Type of testSet value: [newExpected: string, legacyExpected: string]
+             */
+            const testSet = new Map([
+                ["932-10-10", [undefined, "2000-10-10T00:00:00.000Z"]], // weird behaviour in legacy
+                ["1932-10-10", ["1932-10-10T00:00:00.000Z", "2000-10-10T00:00:00.000Z"]], // weird behaviour in legacy
+                ["09990101", [undefined, "2000-01-01T00:00:00.000Z"]], // weird behaviour in legacy
+                ["19993012", [undefined, "2000-01-01T00:00:00.000Z"]], // weird behaviour in legacy
 
-            ["19990101", ["1999-01-01T00:00:00.000Z", "2000-01-01T00:00:00.000Z"]], // weird behaviour in legacy
-            ["19990130", ["1999-01-30T00:00:00.000Z", "2000-01-01T00:00:00.000Z"]], // weird behaviour in legacy
-            ["19991230", ["1999-12-30T00:00:00.000Z", "2000-01-01T00:00:00.000Z"]], // weird behaviour in legacy
-            ["2016-01-03 09:24:15.123", ["2016-01-03T09:24:15.123Z"]],
-            ["2016-01-03T09:24:15.123", ["2016-01-03T09:24:15.123Z"]],
-            ["2016-01-03 09:24:15.123+06:00", ["2016-01-03T03:24:15.123Z", undefined]],
-            ["2016-01-03T09:24:15.123+06:00", ["2016-01-03T03:24:15.123Z", undefined]],
-            ["2016-01-03 09:24:15.123+16:00", ["2016-01-02T17:24:15.123Z", undefined]],
-            ["2016-01-03T09:24:15.123+16:00", ["2016-01-02T17:24:15.123Z", undefined]],
-            ["2016-01-03 09:24:15.123Z", ["2016-01-03T09:24:15.123Z", undefined]], // weird behaviour in legacy
-            ["2016-01-03T09:24:15.123Z", ["2016-01-03T09:24:15.123Z", undefined]], // weird behaviour in legacy
-        ]);
+                ["19990101", ["1999-01-01T00:00:00.000Z", "2000-01-01T00:00:00.000Z"]], // weird behaviour in legacy
+                ["19990130", ["1999-01-30T00:00:00.000Z", "2000-01-01T00:00:00.000Z"]], // weird behaviour in legacy
+                ["19991230", ["1999-12-30T00:00:00.000Z", "2000-01-01T00:00:00.000Z"]], // weird behaviour in legacy
+                ["2016-01-03 09:24:15.123", ["2016-01-03T09:24:15.123Z"]],
+                ["2016-01-03T09:24:15.123", ["2016-01-03T09:24:15.123Z"]],
+                ["2016-01-03 09:24:15.123+06:00", ["2016-01-03T03:24:15.123Z", undefined]],
+                ["2016-01-03T09:24:15.123+06:00", ["2016-01-03T03:24:15.123Z", undefined]],
+                ["2016-01-03 09:24:15.123+16:00", ["2016-01-02T17:24:15.123Z", undefined]],
+                ["2016-01-03T09:24:15.123+16:00", ["2016-01-02T17:24:15.123Z", undefined]],
+                ["2016-01-03 09:24:15.123Z", ["2016-01-03T09:24:15.123Z", undefined]], // weird behaviour in legacy
+                ["2016-01-03T09:24:15.123Z", ["2016-01-03T09:24:15.123Z", undefined]], // weird behaviour in legacy
+            ]);
 
-        runTestSet(assert, testSet, {
-            newFn: (input) => parseDateTime(input, { format: "YYYY-MM-DD HH:mm:ss" }).toISO(),
-            legacyFn: (input) =>
-                legacy.field_utils.parse.datetime(input, null, { isUTC: true }).toISOString(),
+            runTestSet(assert, testSet, {
+                newFn: (input) => parseDateTime(input, { format: "YYYY-MM-DD HH:mm:ss" }).toISO(),
+                legacyFn: (input) =>
+                    legacy.field_utils.parse.datetime(input, null, { isUTC: true }).toISOString(),
+            });
         });
-    });
 
-    QUnit.test("parseDateTime (with options.timezone = true)", async (assert) => {
-        /**
-         * Type of testSet key: string
-         * Type of testSet value: [newExpected: string, legacyExpected: string]
-         */
-        const testSet = new Map([
-            ["10101010101010", ["1010-10-10T09:52:40.000Z"]],
-            ["1191111", ["1191-04-20T23:42:30.000Z"]], // day 111 of year 1191
-            ["11911111", ["1191-11-10T23:42:30.000Z"]],
-            ["3101", ["2020-01-30T23:00:00.000Z"]],
-            ["310160", ["2060-01-30T23:00:00.000Z"]],
-            ["311260", ["2060-12-30T23:00:00.000Z"]],
-            ["310161", ["1961-01-30T23:00:00.000Z", "2061-01-30T23:00:00.000Z"]],
-            ["310165", ["1965-01-30T23:00:00.000Z", "2065-01-30T23:00:00.000Z"]],
-            ["310168", ["1968-01-30T23:00:00.000Z", "2068-01-30T23:00:00.000Z"]],
-            ["311268", ["1968-12-30T23:00:00.000Z", "2068-12-30T23:00:00.000Z"]],
-            ["310169", ["1969-01-30T23:00:00.000Z"]],
-            ["310170", ["1970-01-30T23:00:00.000Z"]],
-            ["310197", ["1997-01-30T23:00:00.000Z"]],
-            ["310117", ["2017-01-30T23:00:00.000Z"]],
-            ["31011985", ["1985-01-30T23:00:00.000Z"]],
-            ["3101198508", ["1985-01-31T07:00:00.000Z"]],
-            ["310119850833", ["1985-01-31T07:33:00.000Z"]],
-            ["1137", [undefined]],
-            ["1197", [undefined]],
-            ["0131", [undefined]],
-            ["0922", [undefined]],
-            ["2020", [undefined]],
-            ["199901", ["1998-12-31T23:00:00.000Z", undefined]],
-            ["30100210", ["3010-02-09T23:00:00.000Z"]],
-            ["3010210", ["3010-07-28T22:00:00.000Z"]],
-            ["970131", [undefined]],
-            ["31.01", ["2020-01-30T23:00:00.000Z"]],
-            ["31/01/1985 08", ["1985-01-31T07:00:00.000Z"]],
+        QUnit.test("parseDateTime (with options.timezone = true)", async (assert) => {
+            /**
+             * Type of testSet key: string
+             * Type of testSet value: [newExpected: string, legacyExpected: string]
+             */
+            const testSet = new Map([
+                ["10101010101010", ["1010-10-10T09:52:40.000Z"]],
+                ["1191111", ["1191-04-20T23:42:30.000Z"]], // day 111 of year 1191
+                ["11911111", ["1191-11-10T23:42:30.000Z"]],
+                ["3101", ["2020-01-30T23:00:00.000Z"]],
+                ["310160", ["2060-01-30T23:00:00.000Z"]],
+                ["311260", ["2060-12-30T23:00:00.000Z"]],
+                ["310161", ["1961-01-30T23:00:00.000Z", "2061-01-30T23:00:00.000Z"]],
+                ["310165", ["1965-01-30T23:00:00.000Z", "2065-01-30T23:00:00.000Z"]],
+                ["310168", ["1968-01-30T23:00:00.000Z", "2068-01-30T23:00:00.000Z"]],
+                ["311268", ["1968-12-30T23:00:00.000Z", "2068-12-30T23:00:00.000Z"]],
+                ["310169", ["1969-01-30T23:00:00.000Z"]],
+                ["310170", ["1970-01-30T23:00:00.000Z"]],
+                ["310197", ["1997-01-30T23:00:00.000Z"]],
+                ["310117", ["2017-01-30T23:00:00.000Z"]],
+                ["31011985", ["1985-01-30T23:00:00.000Z"]],
+                ["3101198508", ["1985-01-31T07:00:00.000Z"]],
+                ["310119850833", ["1985-01-31T07:33:00.000Z"]],
+                ["1137", [undefined]],
+                ["1197", [undefined]],
+                ["0131", [undefined]],
+                ["0922", [undefined]],
+                ["2020", [undefined]],
+                ["199901", ["1998-12-31T23:00:00.000Z", undefined]],
+                ["30100210", ["3010-02-09T23:00:00.000Z"]],
+                ["3010210", ["3010-07-28T22:00:00.000Z"]],
+                ["970131", [undefined]],
+                ["31.01", ["2020-01-30T23:00:00.000Z"]],
+                ["31/01/1985 08", ["1985-01-31T07:00:00.000Z"]],
 
-            ["01121934", ["1934-12-01T00:00:00.000Z"]],
-            ["011234", ["2034-11-30T23:00:00.000Z"]],
-            ["011260", ["2060-11-30T23:00:00.000Z"]],
-            ["2", ["2020-07-01T22:00:00.000Z"]],
-            ["02", ["2020-07-01T22:00:00.000Z"]],
-            ["20", ["2020-07-19T22:00:00.000Z"]],
-            ["202", ["2020-02-19T23:00:00.000Z"]],
-            ["2002", ["2020-02-19T23:00:00.000Z"]],
-            ["0202", ["2020-02-01T23:00:00.000Z"]],
-            ["02/02", ["2020-02-01T23:00:00.000Z"]],
-            ["02/13", [undefined]],
-            ["02/1313", [undefined]],
-            ["09990101", [undefined]],
-            ["19990101", ["1998-12-31T23:00:00.000Z"]],
-            ["19990130", ["1999-01-29T23:00:00.000Z"]],
-            ["19991230", ["1999-12-29T23:00:00.000Z"]],
-            ["19993012", [undefined]],
-            ["2016-200", ["2016-07-17T22:00:00.000Z"]],
-            ["2016200", ["2016-07-17T22:00:00.000Z"]], // day 200 of year 2016
-            ["2020-", [undefined]],
-            ["2020-W2", [undefined]],
-            ["2020W23", ["2020-05-31T22:00:00.000Z"]],
-            ["2020-W02", ["2020-01-05T23:00:00.000Z"]],
-            ["2020-W32", ["2020-08-02T22:00:00.000Z"]],
-            ["2020-W32-3", ["2020-08-04T22:00:00.000Z"]],
-            ["2016-W21-3", ["2016-05-24T22:00:00.000Z"]],
-            ["2016W213", ["2016-05-24T22:00:00.000Z"]],
-            ["2209", ["2020-09-21T22:00:00.000Z"]],
-            ["22:09", ["2020-09-21T22:00:00.000Z"]], // FIXME ? Is this weird ?
-            ["2012", ["2020-12-19T23:00:00.000Z"]],
+                ["01121934", ["1934-12-01T00:00:00.000Z"]],
+                ["011234", ["2034-11-30T23:00:00.000Z"]],
+                ["011260", ["2060-11-30T23:00:00.000Z"]],
+                ["2", ["2020-07-01T22:00:00.000Z"]],
+                ["02", ["2020-07-01T22:00:00.000Z"]],
+                ["20", ["2020-07-19T22:00:00.000Z"]],
+                ["202", ["2020-02-19T23:00:00.000Z"]],
+                ["2002", ["2020-02-19T23:00:00.000Z"]],
+                ["0202", ["2020-02-01T23:00:00.000Z"]],
+                ["02/02", ["2020-02-01T23:00:00.000Z"]],
+                ["02/13", [undefined]],
+                ["02/1313", [undefined]],
+                ["09990101", [undefined]],
+                ["19990101", ["1998-12-31T23:00:00.000Z"]],
+                ["19990130", ["1999-01-29T23:00:00.000Z"]],
+                ["19991230", ["1999-12-29T23:00:00.000Z"]],
+                ["19993012", [undefined]],
+                ["2016-200", ["2016-07-17T22:00:00.000Z"]],
+                ["2016200", ["2016-07-17T22:00:00.000Z"]], // day 200 of year 2016
+                ["2020-", [undefined]],
+                ["2020-W2", [undefined]],
+                ["2020W23", ["2020-05-31T22:00:00.000Z"]],
+                ["2020-W02", ["2020-01-05T23:00:00.000Z"]],
+                ["2020-W32", ["2020-08-02T22:00:00.000Z"]],
+                ["2020-W32-3", ["2020-08-04T22:00:00.000Z"]],
+                ["2016-W21-3", ["2016-05-24T22:00:00.000Z"]],
+                ["2016W213", ["2016-05-24T22:00:00.000Z"]],
+                ["2209", ["2020-09-21T22:00:00.000Z"]],
+                ["22:09", ["2020-09-21T22:00:00.000Z"]], // FIXME ? Is this weird ?
+                ["2012", ["2020-12-19T23:00:00.000Z"]],
 
-            ["2016-01-03 09:24:15.123", ["2016-01-03T08:24:15.123Z"]],
-            ["2016-01-03T09:24:15.123", ["2016-01-03T08:24:15.123Z"]],
-            [
-                "2016-01-03T09:24:15.123+06:00",
-                ["2016-01-03T03:24:15.123Z", "2016-01-03T02:24:15.123Z"],
-            ],
-            [
-                "2016-01-03T09:24:15.123+16:00",
-                ["2016-01-02T17:24:15.123Z", "2016-01-02T16:24:15.123Z"],
-            ],
-            ["2016-01-03T09:24:15.123Z", ["2016-01-03T09:24:15.123Z", "2016-01-03T08:24:15.123Z"]],
-            ["2016-W21-3T09:24:15.123", ["2016-05-25T07:24:15.123Z"]],
-            ["2016-W21-3 09:24:15.123", [undefined, "2016-05-25T07:24:15.123Z"]],
+                ["2016-01-03 09:24:15.123", ["2016-01-03T08:24:15.123Z"]],
+                ["2016-01-03T09:24:15.123", ["2016-01-03T08:24:15.123Z"]],
+                [
+                    "2016-01-03T09:24:15.123+06:00",
+                    ["2016-01-03T03:24:15.123Z", "2016-01-03T02:24:15.123Z"],
+                ],
+                [
+                    "2016-01-03T09:24:15.123+16:00",
+                    ["2016-01-02T17:24:15.123Z", "2016-01-02T16:24:15.123Z"],
+                ],
+                [
+                    "2016-01-03T09:24:15.123Z",
+                    ["2016-01-03T09:24:15.123Z", "2016-01-03T08:24:15.123Z"],
+                ],
+                ["2016-W21-3T09:24:15.123", ["2016-05-25T07:24:15.123Z"]],
+                ["2016-W21-3 09:24:15.123", [undefined, "2016-05-25T07:24:15.123Z"]],
 
-            [
-                "2016-03-27T02:00:00.000+02:00",
-                ["2016-03-27T00:00:00.000Z", "2016-03-26T23:00:00.000Z"],
-            ],
-            [
-                "2016-03-27T03:00:00.000+02:00",
-                ["2016-03-27T01:00:00.000Z", "2016-03-26T23:00:00.000Z"],
-            ],
-            ["2016-03-27T02:00:00.000", ["2016-03-27T01:00:00.000Z", "2016-03-27T00:00:00.000Z"]],
-            ["2016-03-27T03:00:00.000", ["2016-03-27T01:00:00.000Z"]],
-            ["2016-03-27T02:00:00.000Z", ["2016-03-27T02:00:00.000Z", "2016-03-27T00:00:00.000Z"]],
-            ["2016-03-27T03:00:00.000Z", ["2016-03-27T03:00:00.000Z", "2016-03-27T01:00:00.000Z"]],
+                [
+                    "2016-03-27T02:00:00.000+02:00",
+                    ["2016-03-27T00:00:00.000Z", "2016-03-26T23:00:00.000Z"],
+                ],
+                [
+                    "2016-03-27T03:00:00.000+02:00",
+                    ["2016-03-27T01:00:00.000Z", "2016-03-26T23:00:00.000Z"],
+                ],
+                [
+                    "2016-03-27T02:00:00.000",
+                    ["2016-03-27T01:00:00.000Z", "2016-03-27T00:00:00.000Z"],
+                ],
+                ["2016-03-27T03:00:00.000", ["2016-03-27T01:00:00.000Z"]],
+                [
+                    "2016-03-27T02:00:00.000Z",
+                    ["2016-03-27T02:00:00.000Z", "2016-03-27T00:00:00.000Z"],
+                ],
+                [
+                    "2016-03-27T03:00:00.000Z",
+                    ["2016-03-27T03:00:00.000Z", "2016-03-27T01:00:00.000Z"],
+                ],
 
-            ["09:22", [undefined]],
-            ["2013", [undefined]],
-            ["011261", ["1961-11-30T23:00:00.000Z", "2061-11-30T23:00:00.000Z"]],
-        ]);
+                ["09:22", [undefined]],
+                ["2013", [undefined]],
+                ["011261", ["1961-11-30T23:00:00.000Z", "2061-11-30T23:00:00.000Z"]],
+            ]);
 
-        runTestSet(assert, testSet, {
-            newFn: (input) => parseDateTime(input, { timezone: true }).toISO(),
-            legacyFn: (input) =>
-                legacy.field_utils.parse.datetime(input, null, { timezone: true }).toISOString(),
+            runTestSet(assert, testSet, {
+                newFn: (input) => parseDateTime(input, { timezone: true }).toUTC().toISO(),
+                legacyFn: (input) =>
+                    legacy.field_utils.parse
+                        .datetime(input, null, { timezone: true })
+                        .toISOString(),
+            });
         });
-    });
-});
+    }
+);

From a19ad0fe24b37fbd4414fcdde960a8881d1160bf Mon Sep 17 00:00:00 2001
From: "Lucas Perais (lpe)" <lpe@odoo.com>
Date: Tue, 7 Sep 2021 06:22:31 +0000
Subject: [PATCH 13/31] [FIX] web: formatter: monetary with human number

HumanNumber now correctly rounds the number according to decimals (bug with value < 1000 eg: 0.02)
It also correctly keeps `decimals` significant figures whatever powers of 10^3 it should keep

The monetary formatter now passes the currency's digits to human number

Part-of: odoo/odoo#73311
---
 addons/web/static/src/fields/formatters.js    | 19 ++++++++---
 .../static/tests/fields/formatters_tests.js   | 34 ++++++++++++++-----
 2 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/addons/web/static/src/fields/formatters.js b/addons/web/static/src/fields/formatters.js
index e8d6395aa4c..e7f98f9b611 100644
--- a/addons/web/static/src/fields/formatters.js
+++ b/addons/web/static/src/fields/formatters.js
@@ -36,7 +36,9 @@ function insertThousandsSep(number, thousandsSep = ",", grouping = [3, 0]) {
  * @private
  * @param {number} number to format
  * @param {Object} [options] Options to format
- * @param {number} [options.decimals=0] maximum number of decimals to use
+ * @param {number} [options.decimals=0] number of decimals to use
+ *    if minDigits > 1 is used and effective on the number then decimals
+ *    will be shrunk to zero, to avoid displaying irrelevant figures ( 0.01 compared to 1000 )
  * @param {number} [options.minDigits=1]
  *    the minimum number of digits to preserve when switching to another
  *    level of thousands (e.g. with a value of '2', 4321 will still be
@@ -44,11 +46,11 @@ function insertThousandsSep(number, thousandsSep = ",", grouping = [3, 0]) {
  * @returns {string}
  */
 function humanNumber(number, options = { decimals: 0, minDigits: 1 }) {
-    number = Math.round(number);
     const decimals = options.decimals || 0;
     const minDigits = options.minDigits || 1;
     const d2 = Math.pow(10, decimals);
     const numberMagnitude = +number.toExponential().split("e+")[1];
+    number = Math.round(number * d2) / d2;
     // the case numberMagnitude >= 21 corresponds to a number
     // better expressed in the scientific format.
     if (numberMagnitude >= 21) {
@@ -72,7 +74,10 @@ function humanNumber(number, options = { decimals: 0, minDigits: 1 }) {
         }
     }
     const { decimalPoint, grouping, thousandsSep } = l10n;
-    const [integerPart, decimalPart] = String(number).split(".");
+
+    // determine if we should keep the decimals (we don't want to display 1,020.02k for 1020020)
+    const decimalsToKeep = number >= 1000 ? 0 : decimals;
+    const [integerPart, decimalPart] = number.toFixed(decimalsToKeep).split(".");
     const int = insertThousandsSep(sign * Number(integerPart), thousandsSep, grouping);
     if (!decimalPart) {
         return int + symbol;
@@ -282,7 +287,13 @@ export function formatMonetary(value, options = {}) {
     const currency = session.currencies[currencyId];
     const digits = (currency && currency.digits) || options.digits;
 
-    const formatted = options.humanReadable ? humanNumber(value) : formatFloat(value, { digits });
+    let formatted;
+    if (options.humanReadable) {
+        formatted = humanNumber(value, { decimals: digits ? digits[1] : 2 });
+    } else {
+        formatted = formatFloat(value, { digits });
+    }
+
     if (!currency || options.noSymbol) {
         return formatted;
     }
diff --git a/addons/web/static/tests/fields/formatters_tests.js b/addons/web/static/tests/fields/formatters_tests.js
index 86bd0391164..152052b9453 100644
--- a/addons/web/static/tests/fields/formatters_tests.js
+++ b/addons/web/static/tests/fields/formatters_tests.js
@@ -61,7 +61,7 @@ QUnit.module("Fields", (hooks) => {
         );
         assert.strictEqual(
             formatFloat(10200000, { humanReadable: true, decimals: 2, minDigits: 2 }),
-            "10.2M"
+            "10.20M"
         );
         assert.strictEqual(
             formatFloat(1020, { humanReadable: true, decimals: 2, minDigits: 1 }),
@@ -69,15 +69,15 @@ QUnit.module("Fields", (hooks) => {
         );
         assert.strictEqual(
             formatFloat(1002, { humanReadable: true, decimals: 2, minDigits: 1 }),
-            "1k"
+            "1.00k"
         );
         assert.strictEqual(
             formatFloat(101, { humanReadable: true, decimals: 2, minDigits: 1 }),
-            "101"
+            "101.00"
         );
         assert.strictEqual(
             formatFloat(64.2, { humanReadable: true, decimals: 2, minDigits: 1 }),
-            "64"
+            "64.20"
         );
         assert.strictEqual(formatFloat(1e18, { humanReadable: true }), "1E");
         assert.strictEqual(
@@ -110,7 +110,7 @@ QUnit.module("Fields", (hooks) => {
         );
         assert.strictEqual(
             formatFloat(-10200000, { humanReadable: true, decimals: 2, minDigits: 2 }),
-            "-10.2M"
+            "-10.20M"
         );
         assert.strictEqual(
             formatFloat(-1020, { humanReadable: true, decimals: 2, minDigits: 1 }),
@@ -118,15 +118,15 @@ QUnit.module("Fields", (hooks) => {
         );
         assert.strictEqual(
             formatFloat(-1002, { humanReadable: true, decimals: 2, minDigits: 1 }),
-            "-1k"
+            "-1.00k"
         );
         assert.strictEqual(
             formatFloat(-101, { humanReadable: true, decimals: 2, minDigits: 1 }),
-            "-101"
+            "-101.00"
         );
         assert.strictEqual(
             formatFloat(-64.2, { humanReadable: true, decimals: 2, minDigits: 1 }),
-            "-64"
+            "-64.20"
         );
         assert.strictEqual(formatFloat(-1e18, { humanReadable: true }), "-1E");
         assert.strictEqual(
@@ -235,9 +235,14 @@ QUnit.module("Fields", (hooks) => {
             formatMonetary(1234567.654, { currencyId: 10, noSymbol: true }),
             "1,234,567.65"
         );
+        assert.deepEqual(formatMonetary(8.0, { currencyId: 10, humanReadable: true }), "8.00 €");
         assert.deepEqual(
             formatMonetary(1234567.654, { currencyId: 10, humanReadable: true }),
-            "1M €"
+            "1.23M €"
+        );
+        assert.deepEqual(
+            formatMonetary(1990000.001, { currencyId: 10, humanReadable: true }),
+            "1.99M €"
         );
         assert.deepEqual(
             formatMonetary(1234567.654, { currencyId: 44, digits: [69, 1] }),
@@ -269,6 +274,17 @@ QUnit.module("Fields", (hooks) => {
         assert.strictEqual(formatMonetary(200, { field: floatField, data }), "$ 200.00");
     });
 
+    QUnit.test("formatMonetary without currency", function (assert) {
+        patchWithCleanup(session, {
+            currencies: {},
+        });
+        assert.deepEqual(
+            formatMonetary(1234567.654, { currencyId: 10, humanReadable: true }),
+            "1.23M"
+        );
+        assert.deepEqual(formatMonetary(1234567.654, { currencyId: 10 }), "1,234,567.65");
+    });
+
     QUnit.test("formatPercentage", function (assert) {
         assert.strictEqual(formatPercentage(false), "0%");
         assert.strictEqual(formatPercentage(0), "0%");

From 42cbcad9c8173c1b8d23b98f2c3fb8515b0c3992 Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Tue, 7 Sep 2021 06:22:33 +0000
Subject: [PATCH 14/31] [IMP] web: datepicker WOWL

This commit adapts the "old" Owl Datepicker to work with the new Owl
web client. The behaviors have been mostly preserved (i.e. working
with the bootstrap datepicker) and simply adapted to make use of the
new services and registries.

The previous datepicker template and tests have been marked as "legacy".

Part-of: odoo/odoo#73311
---
 .../static/src/core/datepicker/datepicker.js  | 287 ++++++++++++
 .../static/src/core/datepicker/datepicker.xml |  25 ++
 .../src/legacy/js/components/datepicker.js    |   2 +-
 addons/web/static/src/legacy/xml/base.xml     |   2 +-
 .../web/static/tests/core/datepicker_tests.js | 408 ++++++++++++++++++
 .../legacy/components/datepicker_tests.js     |   4 +-
 6 files changed, 724 insertions(+), 4 deletions(-)
 create mode 100644 addons/web/static/src/core/datepicker/datepicker.js
 create mode 100644 addons/web/static/src/core/datepicker/datepicker.xml
 create mode 100644 addons/web/static/tests/core/datepicker_tests.js

diff --git a/addons/web/static/src/core/datepicker/datepicker.js b/addons/web/static/src/core/datepicker/datepicker.js
new file mode 100644
index 00000000000..82d96f5c615
--- /dev/null
+++ b/addons/web/static/src/core/datepicker/datepicker.js
@@ -0,0 +1,287 @@
+/** @odoo-module **/
+
+import { localization } from "@web/core/l10n/localization";
+import { registry } from "@web/core/registry";
+import { useAutofocus } from "@web/core/utils/hooks";
+
+const { Component, hooks } = owl;
+const { DateTime } = luxon;
+const { useExternalListener, useRef, useState } = hooks;
+
+const formatters = registry.category("formatters");
+const parsers = registry.category("parsers");
+
+let datePickerId = 0;
+
+/**
+ * @param {DateTime} date
+ * @returns {moment}
+ */
+const luxonDateToMomentDate = (date) => {
+    return window.moment(String(date));
+};
+
+/**
+ * @param {string} format
+ * @returns {string}
+ */
+const luxonFormatToMomentFormat = (format) => {
+    return format.replace(/[dy]/g, (x) => x.toUpperCase());
+};
+
+/**
+ * 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-versa.
+ *
+ * Note that all props given to this component will be passed as arguments to
+ * instantiate the picker widget. Also any luxon date is automatically
+ * stringified since tempusdominus only works with moment objects.
+ * @extends Component
+ */
+export class DatePicker extends Component {
+    setup() {
+        this.inputRef = useRef("input");
+        this.state = useState({ warning: false });
+
+        this.datePickerId = `o_datepicker_${datePickerId++}`;
+
+        this.initFormat();
+        this.setDate(this.props);
+
+        useAutofocus();
+        useExternalListener(window, "scroll", this.onWindowScroll);
+    }
+
+    mounted() {
+        window.$(this.el).on("show.datetimepicker", () => this.inputRef.el.select());
+        window.$(this.el).on("hide.datetimepicker", () => this.onDateChange());
+        window.$(this.el).on("error.datetimepicker", () => false); // Ignores datepicker errors
+
+        this.bootstrapDateTimePicker(this.props);
+        this.updateInput();
+    }
+
+    willUpdateProps(nextProps) {
+        const pickerParams = {};
+        for (const prop in nextProps) {
+            if (this.props[prop] !== nextProps[prop]) {
+                pickerParams[prop] = nextProps[prop];
+                if (prop === "date") {
+                    this.setDate(nextProps);
+                    this.updateInput();
+                }
+            }
+        }
+        this.bootstrapDateTimePicker(pickerParams);
+    }
+
+    willUnmount() {
+        window.$(this.el).off(); // Removes all jQuery events
+
+        this.bootstrapDateTimePicker("destroy");
+    }
+
+    //---------------------------------------------------------------------
+    // Getters
+    //---------------------------------------------------------------------
+
+    get options() {
+        return {
+            // Fallback to default localization format in `core/l10n/dates.js`.
+            format: this.props.format,
+            locale: this.props.locale || this.date.locale,
+            timezone: this.isLocal,
+        };
+    }
+
+    //---------------------------------------------------------------------
+    // Protected
+    //---------------------------------------------------------------------
+
+    /**
+     * Initialises formatting and parsing parameters
+     */
+    initFormat() {
+        this.defaultFormat = localization.dateFormat;
+        this.format = formatters.get("date");
+        this.parse = parsers.get("date");
+        this.isLocal = false;
+    }
+
+    /**
+     * Sets the current date value. If a locale is provided, the given date
+     * will first be set in that locale.
+     * @param {object} params
+     * @param {DateTime} params.date
+     * @param {string} [params.locale]
+     */
+    setDate({ date, locale }) {
+        this.date = locale ? date.setLocale(locale) : date;
+    }
+
+    /**
+     * Updates the input element with the current formatted date value.
+     */
+    updateInput() {
+        try {
+            this.inputRef.el.value = this.format(this.date, this.options);
+        } catch (err) {
+            // Do nothing
+        }
+    }
+
+    //---------------------------------------------------------------------
+    // Bootstrap datepicker
+    //---------------------------------------------------------------------
+
+    /**
+     * Handles bootstrap datetimepicker calls.
+     * @param {string | Object} commandOrParams
+     */
+    bootstrapDateTimePicker(commandOrParams) {
+        if (typeof commandOrParams === "object") {
+            const format = luxonFormatToMomentFormat(this.props.format || this.defaultFormat);
+            const params = { ...commandOrParams, format };
+            for (const prop in params) {
+                if (params[prop] instanceof DateTime) {
+                    const luxonDate = params[prop];
+                    const momentDate = luxonDateToMomentDate(luxonDate);
+                    if (momentDate.locale() !== luxonDate.locale) {
+                        momentDate.locale(params.locale);
+                    }
+                    params[prop] = momentDate;
+                }
+            }
+            commandOrParams = params;
+        }
+        window.$(this.el).datetimepicker(commandOrParams);
+    }
+
+    //---------------------------------------------------------------------
+    // Handlers
+    //---------------------------------------------------------------------
+
+    onInputClick() {
+        this.bootstrapDateTimePicker("toggle");
+    }
+
+    /**
+     * Called either when the input value has changed or when the boostrap
+     * datepicker is closed. The actual "datetime-changed" emitted by the
+     * component is only triggered if the date value has changed.
+     */
+    onDateChange() {
+        try {
+            const date = this.parse(this.inputRef.el.value, this.options);
+            if (!date.equals(this.props.date)) {
+                this.state.warning = date > DateTime.local();
+                this.trigger("datetime-changed", { date });
+            }
+        } catch (err) {
+            // Reset to default (= given) date.
+            this.updateInput();
+        }
+    }
+
+    /**
+     * @param {Event} ev
+     */
+    onWindowScroll(ev) {
+        if (ev.target !== this.inputRef.el) {
+            this.bootstrapDateTimePicker("hide");
+        }
+    }
+}
+
+DatePicker.defaultProps = {
+    calendarWeeks: true,
+    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",
+    },
+    maxDate: DateTime.fromObject({ year: 9999, month: 12, day: 31 }),
+    minDate: DateTime.fromObject({ year: 1000 }),
+    useCurrent: false,
+    widgetParent: "body",
+};
+DatePicker.props = {
+    // Components props
+    date: DateTime,
+    warn_future: { type: Boolean, optional: true },
+    // Bootstrap datepicker options
+    buttons: {
+        type: Object,
+        shape: {
+            showClear: Boolean,
+            showClose: Boolean,
+            showToday: Boolean,
+        },
+        optional: true,
+    },
+    calendarWeeks: Boolean,
+    format: { type: String, optional: true },
+    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: true },
+    locale: { type: String, optional: true },
+    maxDate: DateTime,
+    minDate: DateTime,
+    readonly: { type: Boolean, optional: true },
+    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
+ */
+export class DateTimePicker extends DatePicker {
+    /**
+     * @override
+     */
+    initFormat() {
+        this.defaultFormat = localization.dateTimeFormat;
+        this.format = formatters.get("datetime");
+        this.parse = parsers.get("datetime");
+        this.isLocal = true;
+    }
+}
+
+DateTimePicker.defaultProps = {
+    ...DatePicker.defaultProps,
+    buttons: {
+        showClear: false,
+        showClose: true,
+        showToday: false,
+    },
+};
diff --git a/addons/web/static/src/core/datepicker/datepicker.xml b/addons/web/static/src/core/datepicker/datepicker.xml
new file mode 100644
index 00000000000..b72e3a216b0
--- /dev/null
+++ b/addons/web/static/src/core/datepicker/datepicker.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+
+    <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="onDateChange"
+                t-on-click="onInputClick"
+            />
+            <span t-if="props.warn_future and state.warning" class="fa fa-exclamation-triangle text-danger 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>
+
+</templates>
diff --git a/addons/web/static/src/legacy/js/components/datepicker.js b/addons/web/static/src/legacy/js/components/datepicker.js
index 94ce7ece4fe..2c27a55d5f4 100644
--- a/addons/web/static/src/legacy/js/components/datepicker.js
+++ b/addons/web/static/src/legacy/js/components/datepicker.js
@@ -221,7 +221,7 @@ odoo.define('web.DatePickerOwl', function (require) {
         useCurrent: Boolean,
         widgetParent: String,
     };
-    DatePicker.template = 'web.DatePicker';
+    DatePicker.template = "web.Legacy.DatePicker";
 
     /**
      * Date/time picker
diff --git a/addons/web/static/src/legacy/xml/base.xml b/addons/web/static/src/legacy/xml/base.xml
index ed071fc1583..aa1e34787d0 100644
--- a/addons/web/static/src/legacy/xml/base.xml
+++ b/addons/web/static/src/legacy/xml/base.xml
@@ -125,7 +125,7 @@
     </span>
 </t>
 
-<t t-name="web.DatePicker" owl="1">
+<t t-name="web.Legacy.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"
diff --git a/addons/web/static/tests/core/datepicker_tests.js b/addons/web/static/tests/core/datepicker_tests.js
new file mode 100644
index 00000000000..f0da030c8b7
--- /dev/null
+++ b/addons/web/static/tests/core/datepicker_tests.js
@@ -0,0 +1,408 @@
+/** @odoo-module **/
+
+import { DatePicker, DateTimePicker } from "@web/core/datepicker/datepicker";
+import { registry } from "@web/core/registry";
+import { uiService } from "@web/core/ui/ui_service";
+import { registerCleanup } from "../helpers/cleanup";
+import { makeTestEnv } from "../helpers/mock_env";
+import { makeFakeLocalizationService } from "../helpers/mock_services";
+import { click, getFixture, triggerEvent } from "../helpers/utils";
+
+const { DateTime } = luxon;
+const { Component, mount, tags } = owl;
+const { xml } = tags;
+const serviceRegistry = registry.category("services");
+
+/**
+ * @param {typeof DatePicker} Picker
+ * @param {{ props: any, onDateChange: () => any }} [params={}]
+ * @returns {Promise<DatePicker>}
+ */
+const mountPicker = async (Picker, { props, onDateChange } = {}) => {
+    serviceRegistry
+        .add(
+            "localization",
+            makeFakeLocalizationService({
+                dateFormat: "dd/MM/yyyy",
+                dateTimeFormat: "dd/MM/yyyy HH:mm:ss",
+            })
+        )
+        .add("ui", uiService);
+
+    class Parent extends Component {}
+    Parent.template = xml/* xml */ `
+        <t t-component="props.Picker" t-props="props.props" t-on-datetime-changed="props.onDateChange" />
+    `;
+
+    const env = await makeTestEnv();
+    const target = getFixture();
+    const parent = await mount(Parent, { env, props: { Picker, props, onDateChange }, target });
+    registerCleanup(() => parent.destroy());
+    return parent;
+};
+
+const useFRLocale = () => {
+    if (!window.moment.locales().includes("fr")) {
+        // Mocks the FR locale if not loaded
+        const originalLocale = window.moment.locale();
+        window.moment.defineLocale("fr", {
+            months: "janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split(
+                "_"
+            ),
+            monthsShort: "janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split(
+                "_"
+            ),
+            code: "fr",
+            monthsParseExact: true,
+            week: { dow: 1, doy: 4 },
+        });
+        // Moment automatically assigns newly defined locales.
+        window.moment.locale(originalLocale);
+        registerCleanup(() => window.moment.updateLocale("fr", null));
+    }
+    return "fr";
+};
+
+QUnit.module("Components", () => {
+    QUnit.module("DatePicker");
+
+    QUnit.test("basic rendering", async function (assert) {
+        assert.expect(8);
+
+        const picker = await mountPicker(DatePicker, {
+            props: {
+                date: DateTime.fromFormat("09/01/1997", "dd/MM/yyyy", { zone: "utc" }),
+            },
+        });
+
+        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, "09/01/1997", "Value should be the one given");
+        assert.strictEqual(
+            input.dataset.target,
+            `#${picker.el.id}`,
+            "DatePicker id should match its input target"
+        );
+
+        await 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"
+        );
+    });
+
+    QUnit.test("pick a date", async function (assert) {
+        assert.expect(5);
+
+        const picker = await mountPicker(DatePicker, {
+            props: {
+                date: DateTime.fromFormat("09/01/1997", "dd/MM/yyyy", { zone: "utc" }),
+            },
+            onDateChange: (ev) => {
+                assert.step("datetime-changed");
+                assert.strictEqual(
+                    ev.detail.date.toFormat("dd/MM/yyyy"),
+                    "08/02/1997",
+                    "Event should transmit the correct date"
+                );
+            },
+        });
+        const input = picker.el.querySelector(".o_datepicker_input");
+
+        await click(input);
+        await click(document.querySelector(".datepicker th.next")); // next month
+
+        assert.verifySteps([]);
+
+        await click(document.querySelectorAll(".datepicker table td")[15]); // previous day
+
+        assert.strictEqual(input.value, "08/02/1997");
+        assert.verifySteps(["datetime-changed"]);
+    });
+
+    QUnit.test("pick a date with locale", async function (assert) {
+        assert.expect(5);
+
+        const picker = await mountPicker(DatePicker, {
+            props: {
+                date: DateTime.fromFormat("09/01/1997", "dd/MM/yyyy", { zone: "utc" }),
+                format: "dd MMM, yyyy",
+                locale: useFRLocale(),
+            },
+            onDateChange: (ev) => {
+                assert.step("datetime-changed");
+                assert.strictEqual(
+                    ev.detail.date.toFormat("dd/MM/yyyy"),
+                    "01/09/1997",
+                    "Event should transmit the correct date"
+                );
+            },
+        });
+        const input = picker.el.querySelector(".o_datepicker_input");
+
+        assert.strictEqual(input.value, "09 janv., 1997");
+
+        await click(input);
+        await click(document.querySelector(".datepicker .picker-switch")); // month picker
+        await click(document.querySelectorAll(".datepicker .month")[8]); // september
+        await click(document.querySelector(".datepicker .day")); // first day
+
+        assert.strictEqual(input.value, "01 sept., 1997");
+        assert.verifySteps(["datetime-changed"]);
+    });
+
+    QUnit.test("enter a date value", async function (assert) {
+        assert.expect(5);
+
+        const picker = await mountPicker(DatePicker, {
+            props: {
+                date: DateTime.fromFormat("09/01/1997", "dd/MM/yyyy", { zone: "utc" }),
+            },
+            onDateChange: (ev) => {
+                assert.step("datetime-changed");
+                assert.strictEqual(
+                    ev.detail.date.toFormat("dd/MM/yyyy"),
+                    "08/02/1997",
+                    "Event should transmit the correct date"
+                );
+            },
+        });
+        const input = picker.el.querySelector(".o_datepicker_input");
+
+        assert.verifySteps([]);
+
+        input.value = "08/02/1997";
+        await triggerEvent(picker.el, ".o_datepicker_input", "change");
+
+        assert.verifySteps(["datetime-changed"]);
+
+        await click(input);
+
+        assert.strictEqual(
+            document.querySelector(".datepicker .day.active").dataset.day,
+            "02/08/1997",
+            "Datepicker should have set the correct day"
+        );
+    });
+
+    QUnit.test("Date format is correctly set", async function (assert) {
+        assert.expect(2);
+
+        const picker = await mountPicker(DatePicker, {
+            props: {
+                date: DateTime.fromFormat("09/01/1997", "dd/MM/yyyy", { zone: "utc" }),
+                format: "yyyy/MM/dd",
+            },
+        });
+        const input = picker.el.querySelector(".o_datepicker_input");
+
+        assert.strictEqual(input.value, "1997/01/09");
+
+        // Forces an update to assert that the registered format is the correct one
+        await click(input);
+
+        assert.strictEqual(input.value, "1997/01/09");
+    });
+
+    QUnit.module("DateTimePicker");
+
+    QUnit.test("basic rendering", async function (assert) {
+        assert.expect(11);
+
+        const picker = await mountPicker(DateTimePicker, {
+            props: {
+                date: DateTime.fromFormat("09/01/1997 12:30:01", "dd/MM/yyyy HH:mm:ss"),
+            },
+        });
+
+        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, "09/01/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 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"
+        );
+    });
+
+    QUnit.test("pick a date and time", async function (assert) {
+        assert.expect(5);
+
+        const picker = await mountPicker(DateTimePicker, {
+            props: { date: DateTime.fromFormat("09/01/1997 12:30:01", "dd/MM/yyyy HH:mm:ss") },
+            onDateChange: (ev) => {
+                assert.step("datetime-changed");
+                assert.strictEqual(
+                    ev.detail.date.toFormat("dd/MM/yyyy HH:mm:ss"),
+                    "08/02/1997 15:45:05",
+                    "Event should transmit the correct date"
+                );
+            },
+        });
+        const input = picker.el.querySelector("input.o_input.o_datepicker_input");
+
+        await click(input);
+        await click(document.querySelector(".datepicker th.next")); // February
+        await click(document.querySelectorAll(".datepicker table td")[15]); // 08
+        await click(document.querySelector('a[title="Select Time"]'));
+        await click(document.querySelector(".timepicker .timepicker-hour"));
+        await click(document.querySelectorAll(".timepicker .hour")[15]); // 15h
+        await click(document.querySelector(".timepicker .timepicker-minute"));
+        await click(document.querySelectorAll(".timepicker .minute")[9]); // 45m
+        await click(document.querySelector(".timepicker .timepicker-second"));
+
+        assert.verifySteps([]);
+
+        await click(document.querySelectorAll(".timepicker .second")[1]); // 05s
+
+        assert.strictEqual(input.value, "08/02/1997 15:45:05");
+        assert.verifySteps(["datetime-changed"]);
+    });
+
+    QUnit.test("pick a date and time with locale", async function (assert) {
+        assert.expect(6);
+
+        const picker = await mountPicker(DateTimePicker, {
+            props: {
+                date: DateTime.fromFormat("09/01/1997 12:30:01", "dd/MM/yyyy HH:mm:ss"),
+                format: "dd MMM, yyyy HH:mm:ss",
+                locale: useFRLocale(),
+            },
+            onDateChange: (ev) => {
+                assert.step("datetime-changed");
+                assert.strictEqual(
+                    ev.detail.date.toFormat("dd/MM/yyyy HH:mm:ss"),
+                    "01/09/1997 15:45:05",
+                    "Event should transmit the correct date"
+                );
+            },
+        });
+
+        const input = picker.el.querySelector("input.o_input.o_datepicker_input");
+
+        assert.strictEqual(input.value, "09 janv., 1997 12:30:01");
+
+        await click(input);
+
+        await click(document.querySelector(".datepicker .picker-switch")); // month picker
+        await click(document.querySelectorAll(".datepicker .month")[8]); // september
+        await click(document.querySelector(".datepicker .day")); // first day
+
+        await click(document.querySelector('a[title="Select Time"]'));
+        await click(document.querySelector(".timepicker .timepicker-hour"));
+        await click(document.querySelectorAll(".timepicker .hour")[15]); // 15h
+        await click(document.querySelector(".timepicker .timepicker-minute"));
+        await click(document.querySelectorAll(".timepicker .minute")[9]); // 45m
+        await click(document.querySelector(".timepicker .timepicker-second"));
+
+        assert.verifySteps([]);
+
+        await click(document.querySelectorAll(".timepicker .second")[1]); // 05s
+
+        assert.strictEqual(input.value, "01 sept., 1997 15:45:05");
+        assert.verifySteps(["datetime-changed"]);
+    });
+
+    QUnit.test("enter a datetime value", async function (assert) {
+        assert.expect(9);
+
+        const picker = await mountPicker(DateTimePicker, {
+            props: { date: DateTime.fromFormat("09/01/1997 12:30:01", "dd/MM/yyyy HH:mm:ss") },
+            onDateChange: (ev) => {
+                assert.step("datetime-changed");
+                assert.strictEqual(
+                    ev.detail.date.toFormat("dd/MM/yyyy HH:mm:ss"),
+                    "08/02/1997 15:45:05",
+                    "Event should transmit the correct date"
+                );
+            },
+        });
+        const input = picker.el.querySelector(".o_datepicker_input");
+
+        assert.verifySteps([]);
+
+        input.value = "08/02/1997 15:45:05";
+        await triggerEvent(picker.el, ".o_datepicker_input", "change");
+
+        assert.verifySteps(["datetime-changed"]);
+
+        await click(input);
+
+        assert.strictEqual(input.value, "08/02/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"
+        );
+    });
+
+    QUnit.test("Date time format is correctly set", async function (assert) {
+        assert.expect(2);
+
+        const picker = await mountPicker(DateTimePicker, {
+            props: {
+                date: DateTime.fromFormat("09/01/1997 12:30:01", "dd/MM/yyyy HH:mm:ss"),
+                format: "HH:mm:ss yyyy/MM/dd",
+            },
+        });
+        const input = picker.el.querySelector(".o_datepicker_input");
+
+        assert.strictEqual(input.value, "12:30:01 1997/01/09");
+
+        // Forces an update to assert that the registered format is the correct one
+        await click(input);
+
+        assert.strictEqual(input.value, "12:30:01 1997/01/09");
+    });
+});
diff --git a/addons/web/static/tests/legacy/components/datepicker_tests.js b/addons/web/static/tests/legacy/components/datepicker_tests.js
index 78908bd911f..b55d66ec3e1 100644
--- a/addons/web/static/tests/legacy/components/datepicker_tests.js
+++ b/addons/web/static/tests/legacy/components/datepicker_tests.js
@@ -9,7 +9,7 @@ odoo.define('web.datepicker_tests', function (require) {
 
     QUnit.module('Components', {}, function () {
 
-        QUnit.module('DatePicker');
+        QUnit.module('DatePicker (legacy)');
 
         QUnit.test("basic rendering", async function (assert) {
             assert.expect(8);
@@ -164,7 +164,7 @@ odoo.define('web.datepicker_tests', function (require) {
             testUtils.mock.unpatch(time);
         });
 
-        QUnit.module('DateTimePicker');
+        QUnit.module('DateTimePicker (legacy)');
 
         QUnit.test("basic rendering", async function (assert) {
             assert.expect(11);

From b98637e19c49b2ea7f20130df0c7d233c4b0d73b Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Tue, 7 Sep 2021 06:22:35 +0000
Subject: [PATCH 15/31] [REF] board: Move legacy files

This commit moves the content of the static board files to a dedicated
`legacy` folder to mark the transition with the new Owl environment.

Part-of: odoo/odoo#73311
---
 addons/board/__manifest__.py                        |   7 +++----
 .../static/src/{ => legacy}/img/layout_1-1-1.png    | Bin
 .../static/src/{ => legacy}/img/layout_1-1.png      | Bin
 .../static/src/{ => legacy}/img/layout_1-2.png      | Bin
 .../board/static/src/{ => legacy}/img/layout_1.png  | Bin
 .../static/src/{ => legacy}/img/layout_2-1.png      | Bin
 .../static/src/{ => legacy}/img/view_todo_arrow.png | Bin
 .../static/src/{ => legacy}/js/add_to_board_menu.js |   0
 .../board/static/src/{ => legacy}/js/board_view.js  |   0
 .../static/src/{ => legacy}/scss/dashboard.scss     |   0
 addons/board/static/src/{ => legacy}/xml/board.xml  |   4 ++--
 11 files changed, 5 insertions(+), 6 deletions(-)
 rename addons/board/static/src/{ => legacy}/img/layout_1-1-1.png (100%)
 rename addons/board/static/src/{ => legacy}/img/layout_1-1.png (100%)
 rename addons/board/static/src/{ => legacy}/img/layout_1-2.png (100%)
 rename addons/board/static/src/{ => legacy}/img/layout_1.png (100%)
 rename addons/board/static/src/{ => legacy}/img/layout_2-1.png (100%)
 rename addons/board/static/src/{ => legacy}/img/view_todo_arrow.png (100%)
 rename addons/board/static/src/{ => legacy}/js/add_to_board_menu.js (100%)
 rename addons/board/static/src/{ => legacy}/js/board_view.js (100%)
 rename addons/board/static/src/{ => legacy}/scss/dashboard.scss (100%)
 rename addons/board/static/src/{ => legacy}/xml/board.xml (95%)

diff --git a/addons/board/__manifest__.py b/addons/board/__manifest__.py
index 8346386c692..c9b8dae28d5 100644
--- a/addons/board/__manifest__.py
+++ b/addons/board/__manifest__.py
@@ -21,15 +21,14 @@ Allows users to create custom dashboard.
     'application': True,
     'assets': {
         'web.assets_backend': [
-            'board/static/src/scss/dashboard.scss',
-            'board/static/src/js/board_view.js',
-            'board/static/src/js/add_to_board_menu.js',
+            'board/static/src/**/*.scss',
+            'board/static/src/**/*.js',
         ],
         'web.qunit_suite_tests': [
             'board/static/tests/**/*',
         ],
         'web.assets_qweb': [
-            'board/static/src/xml/**/*',
+            'board/static/src/**/*.xml',
         ],
     },
     'license': 'LGPL-3',
diff --git a/addons/board/static/src/img/layout_1-1-1.png b/addons/board/static/src/legacy/img/layout_1-1-1.png
similarity index 100%
rename from addons/board/static/src/img/layout_1-1-1.png
rename to addons/board/static/src/legacy/img/layout_1-1-1.png
diff --git a/addons/board/static/src/img/layout_1-1.png b/addons/board/static/src/legacy/img/layout_1-1.png
similarity index 100%
rename from addons/board/static/src/img/layout_1-1.png
rename to addons/board/static/src/legacy/img/layout_1-1.png
diff --git a/addons/board/static/src/img/layout_1-2.png b/addons/board/static/src/legacy/img/layout_1-2.png
similarity index 100%
rename from addons/board/static/src/img/layout_1-2.png
rename to addons/board/static/src/legacy/img/layout_1-2.png
diff --git a/addons/board/static/src/img/layout_1.png b/addons/board/static/src/legacy/img/layout_1.png
similarity index 100%
rename from addons/board/static/src/img/layout_1.png
rename to addons/board/static/src/legacy/img/layout_1.png
diff --git a/addons/board/static/src/img/layout_2-1.png b/addons/board/static/src/legacy/img/layout_2-1.png
similarity index 100%
rename from addons/board/static/src/img/layout_2-1.png
rename to addons/board/static/src/legacy/img/layout_2-1.png
diff --git a/addons/board/static/src/img/view_todo_arrow.png b/addons/board/static/src/legacy/img/view_todo_arrow.png
similarity index 100%
rename from addons/board/static/src/img/view_todo_arrow.png
rename to addons/board/static/src/legacy/img/view_todo_arrow.png
diff --git a/addons/board/static/src/js/add_to_board_menu.js b/addons/board/static/src/legacy/js/add_to_board_menu.js
similarity index 100%
rename from addons/board/static/src/js/add_to_board_menu.js
rename to addons/board/static/src/legacy/js/add_to_board_menu.js
diff --git a/addons/board/static/src/js/board_view.js b/addons/board/static/src/legacy/js/board_view.js
similarity index 100%
rename from addons/board/static/src/js/board_view.js
rename to addons/board/static/src/legacy/js/board_view.js
diff --git a/addons/board/static/src/scss/dashboard.scss b/addons/board/static/src/legacy/scss/dashboard.scss
similarity index 100%
rename from addons/board/static/src/scss/dashboard.scss
rename to addons/board/static/src/legacy/scss/dashboard.scss
diff --git a/addons/board/static/src/xml/board.xml b/addons/board/static/src/legacy/xml/board.xml
similarity index 95%
rename from addons/board/static/src/xml/board.xml
rename to addons/board/static/src/legacy/xml/board.xml
index 127c9b3a2f4..306bf590ec0 100644
--- a/addons/board/static/src/xml/board.xml
+++ b/addons/board/static/src/legacy/xml/board.xml
@@ -8,7 +8,7 @@
         <div class="oe_dashboard_links">
             <button type="button" class="button oe_dashboard_link_change_layout btn btn-secondary"
                 title="Change Layout..">
-                <img src="/board/static/src/img/layout_1-1-1.png" width="16" height="16" alt=""/>
+                <img src="/board/static/src/legacy/img/layout_1-1-1.png" width="16" height="16" alt=""/>
                 <span> Change Layout </span>
             </button>
         </div>
@@ -43,7 +43,7 @@
         </p>
         <ul>
             <li t-foreach="'1 1-1 1-1-1 1-2 2-1'.split(' ')" t-as="layout" t-att-data-layout="layout">
-                <img t-attf-src="/board/static/src/img/layout_#{layout}.png" alt=""/>
+                <img t-attf-src="/board/static/src/legacy/img/layout_#{layout}.png" alt=""/>
                 <i t-if="layout == currentLayout" class="oe_dashboard_selected_layout fa fa-check fa-lg text-success" aria-label='Layout' role="img" title="Layout"/>
             </li>
         </ul>

From 9b9d3c8c36a4b8274141c97e9863970e7ae6e6d3 Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Tue, 7 Sep 2021 06:22:37 +0000
Subject: [PATCH 16/31] [REF] google_spreadsheet: Move legacy files

This commit moves the content of the static google_spreadsheet files to
a dedicated `legacy` folder to mark the transition with the new Owl
environment.

Part-of: odoo/odoo#73311
---
 addons/google_spreadsheet/__manifest__.py                     | 4 ++--
 .../src/{ => legacy}/js/add_to_google_spreadsheet_menu.js     | 0
 .../static/src/{ => legacy}/xml/addtospreadsheet.xml          | 0
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename addons/google_spreadsheet/static/src/{ => legacy}/js/add_to_google_spreadsheet_menu.js (100%)
 rename addons/google_spreadsheet/static/src/{ => legacy}/xml/addtospreadsheet.xml (100%)

diff --git a/addons/google_spreadsheet/__manifest__.py b/addons/google_spreadsheet/__manifest__.py
index 4a1540897b5..b15df26d6a8 100644
--- a/addons/google_spreadsheet/__manifest__.py
+++ b/addons/google_spreadsheet/__manifest__.py
@@ -20,10 +20,10 @@ The module adds the possibility to display data from Odoo in Google Spreadsheets
     'auto_install': False,
     'assets': {
         'web.assets_backend': [
-            'google_spreadsheet/static/src/js/**/*',
+            'google_spreadsheet/static/src/**/*.js',
         ],
         'web.assets_qweb': [
-            'google_spreadsheet/static/src/xml/*.xml',
+            'google_spreadsheet/static/src/**/*.xml',
         ],
     },
     'license': 'LGPL-3',
diff --git a/addons/google_spreadsheet/static/src/js/add_to_google_spreadsheet_menu.js b/addons/google_spreadsheet/static/src/legacy/js/add_to_google_spreadsheet_menu.js
similarity index 100%
rename from addons/google_spreadsheet/static/src/js/add_to_google_spreadsheet_menu.js
rename to addons/google_spreadsheet/static/src/legacy/js/add_to_google_spreadsheet_menu.js
diff --git a/addons/google_spreadsheet/static/src/xml/addtospreadsheet.xml b/addons/google_spreadsheet/static/src/legacy/xml/addtospreadsheet.xml
similarity index 100%
rename from addons/google_spreadsheet/static/src/xml/addtospreadsheet.xml
rename to addons/google_spreadsheet/static/src/legacy/xml/addtospreadsheet.xml

From add86e4abdc33717b7215359c70834c9771b3a18 Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Tue, 7 Sep 2021 06:22:39 +0000
Subject: [PATCH 17/31] [REF] base_import: Move legacy files

This commit moves the content of the static base_import files to a
dedicated `legacy` folder to mark the transition with the new Owl
environment.

Part-of: odoo/odoo#73311
---
 addons/base_import/__manifest__.py                  |   8 +++-----
 .../{ => legacy}/img/ui/dropdown_arrow_small.png    | Bin
 .../static/src/{ => legacy}/img/ui/studio_icons.png | Bin
 .../static/src/{ => legacy}/js/import_action.js     |   0
 .../static/src/{ => legacy}/js/import_menu.js       |   0
 .../static/src/{ => legacy}/scss/base_import.scss   |   2 +-
 .../static/src/{ => legacy}/scss/icons.scss         |   2 +-
 .../static/src/{ => legacy}/xml/base_import.xml     |   0
 8 files changed, 5 insertions(+), 7 deletions(-)
 rename addons/base_import/static/src/{ => legacy}/img/ui/dropdown_arrow_small.png (100%)
 rename addons/base_import/static/src/{ => legacy}/img/ui/studio_icons.png (100%)
 rename addons/base_import/static/src/{ => legacy}/js/import_action.js (100%)
 rename addons/base_import/static/src/{ => legacy}/js/import_menu.js (100%)
 rename addons/base_import/static/src/{ => legacy}/scss/base_import.scss (98%)
 rename addons/base_import/static/src/{ => legacy}/scss/icons.scss (95%)
 rename addons/base_import/static/src/{ => legacy}/xml/base_import.xml (100%)

diff --git a/addons/base_import/__manifest__.py b/addons/base_import/__manifest__.py
index aea0774bac5..5a0f33b46ca 100644
--- a/addons/base_import/__manifest__.py
+++ b/addons/base_import/__manifest__.py
@@ -31,14 +31,12 @@ Re-implement Odoo's file import system:
     ],
     'assets': {
         'web.assets_qweb': [
-            'base_import/static/src/xml/**/*',
+            'base_import/static/src/**/*.xml',
         ],
         'web.assets_backend': [
-            'base_import/static/src/scss/base_import.scss',
-            'base_import/static/src/scss/icons.scss',
             'base_import/static/lib/javascript-state-machine/state-machine.js',
-            'base_import/static/src/js/import_action.js',
-            'base_import/static/src/js/import_menu.js',
+            'base_import/static/src/**/*.scss',
+            'base_import/static/src/**/*.js',
         ],
         'web.qunit_suite_tests': [
             'base_import/static/tests/**/*',
diff --git a/addons/base_import/static/src/img/ui/dropdown_arrow_small.png b/addons/base_import/static/src/legacy/img/ui/dropdown_arrow_small.png
similarity index 100%
rename from addons/base_import/static/src/img/ui/dropdown_arrow_small.png
rename to addons/base_import/static/src/legacy/img/ui/dropdown_arrow_small.png
diff --git a/addons/base_import/static/src/img/ui/studio_icons.png b/addons/base_import/static/src/legacy/img/ui/studio_icons.png
similarity index 100%
rename from addons/base_import/static/src/img/ui/studio_icons.png
rename to addons/base_import/static/src/legacy/img/ui/studio_icons.png
diff --git a/addons/base_import/static/src/js/import_action.js b/addons/base_import/static/src/legacy/js/import_action.js
similarity index 100%
rename from addons/base_import/static/src/js/import_action.js
rename to addons/base_import/static/src/legacy/js/import_action.js
diff --git a/addons/base_import/static/src/js/import_menu.js b/addons/base_import/static/src/legacy/js/import_menu.js
similarity index 100%
rename from addons/base_import/static/src/js/import_menu.js
rename to addons/base_import/static/src/legacy/js/import_menu.js
diff --git a/addons/base_import/static/src/scss/base_import.scss b/addons/base_import/static/src/legacy/scss/base_import.scss
similarity index 98%
rename from addons/base_import/static/src/scss/base_import.scss
rename to addons/base_import/static/src/legacy/scss/base_import.scss
index 46369769d07..5fddbbbaab2 100644
--- a/addons/base_import/static/src/scss/base_import.scss
+++ b/addons/base_import/static/src/legacy/scss/base_import.scss
@@ -186,7 +186,7 @@
             padding-right: 24px;
             border-bottom-right-radius: 4px;
             border-top-right-radius: 4px;
-            background-image: url('/base_import/static/src/img/ui/dropdown_arrow_small.png');
+            background-image: url('/base_import/static/src/legacy/img/ui/dropdown_arrow_small.png');
             background-position: center right;
             background-repeat: no-repeat;
             appearance: none;
diff --git a/addons/base_import/static/src/scss/icons.scss b/addons/base_import/static/src/legacy/scss/icons.scss
similarity index 95%
rename from addons/base_import/static/src/scss/icons.scss
rename to addons/base_import/static/src/legacy/scss/icons.scss
index 09e40c6b3cd..12e23fd7e9f 100644
--- a/addons/base_import/static/src/scss/icons.scss
+++ b/addons/base_import/static/src/legacy/scss/icons.scss
@@ -33,7 +33,7 @@
             border: 1px solid darkgrey;
         }
         &:after{
-            background-image: url('/base_import/static/src/img/ui/studio_icons.png');
+            background-image: url('/base_import/static/src/legacy/img/ui/studio_icons.png');
             background-repeat: no-repeat;
             content: '';
             width: 20px;
diff --git a/addons/base_import/static/src/xml/base_import.xml b/addons/base_import/static/src/legacy/xml/base_import.xml
similarity index 100%
rename from addons/base_import/static/src/xml/base_import.xml
rename to addons/base_import/static/src/legacy/xml/base_import.xml

From aeb8e49972f871b0c9b07c507987ee77cf5e8abd Mon Sep 17 00:00:00 2001
From: Mathieu Duckerts-Antoine <dam@odoo.com>
Date: Tue, 7 Sep 2021 06:22:41 +0000
Subject: [PATCH 18/31] [IMP] web,*: view infrastructure
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We refactor the action service and allow the legacy and new views to share
a global state within a same action.

We introduce two new components View and WithSearch along with
the search infrastructure: ControlPanel, FilterMenu,...

Part-of: odoo/odoo#73311
Co-authored-by: Aaron Bohy <aab@odoo.com>
Co-authored-by: Bruno Boi <boi@odoo.com>
Co-authored-by: Géry Debongnie <ged@odoo.com>
Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
Co-authored-by: Michaël Mattiello <mcm@odoo.com>
Co-authored-by: Julien Mougenot <jum@odoo.com>
Co-authored-by: Lucas Perais <lpe@odoo.com>
Co-authored-by: Jorge Pinna Puissant <jpp@odoo.com>
Co-authored-by: Stefano Rigano <sri@odoo.com>
---
 .../src/import_records/import_records.js      |   48 +
 .../src/import_records/import_records.xml     |   10 +
 .../static/src/add_to_board/add_to_board.js   |  112 +
 .../static/src/add_to_board/add_to_board.xml  |   16 +
 .../add_to_google_spreadsheet.js              |   51 +
 .../add_to_google_spreadsheet.xml             |   10 +
 addons/web/__manifest__.py                    |    8 +-
 .../web/static/src/legacy/action_adapters.js  |   20 +-
 addons/web/static/src/legacy/backend_utils.js |  265 ++
 .../control_panel_model_extension.js          |   65 +-
 addons/web/static/src/legacy/js/model.js      |    2 +-
 .../src/legacy/js/views/search_panel.js       |   10 +-
 .../src/legacy/legacy_client_actions.js       |    4 +-
 .../src/legacy/legacy_service_provider.js     |    2 +-
 addons/web/static/src/legacy/legacy_setup.js  |    2 +-
 addons/web/static/src/legacy/legacy_views.js  |   34 +-
 addons/web/static/src/legacy/utils.js         |   56 -
 addons/web/static/src/legacy/xml/base.xml     |   20 -
 .../static/src/legacy/xml/search_panel.xml    |   16 +-
 .../search/comparison_menu/comparison_menu.js |   33 +
 .../comparison_menu/comparison_menu.xml       |   25 +
 .../src/search/control_panel/control_panel.js |   53 +-
 .../search/control_panel/control_panel.xml    |   12 +-
 .../favorite_menu/custom_favorite_item.js     |  100 +
 .../favorite_menu/custom_favorite_item.xml    |   32 +
 .../src/search/favorite_menu/favorite_menu.js |   68 +
 .../search/favorite_menu/favorite_menu.xml    |   41 +
 .../search/filter_menu/custom_filter_item.js  |  317 ++
 .../search/filter_menu/custom_filter_item.xml |  112 +
 .../src/search/filter_menu/filter_menu.js     |   39 +
 .../src/search/filter_menu/filter_menu.xml    |   57 +
 .../group_by_menu/custom_group_by_item.js     |   19 +
 .../group_by_menu/custom_group_by_item.xml    |   24 +
 .../src/search/group_by_menu/group_by_menu.js |   72 +
 .../search/group_by_menu/group_by_menu.xml    |   58 +
 .../static/src/search/search_arch_parser.js   |  353 ++
 .../src/search/search_bar/search_bar.js       |  459 +++
 .../src/search/search_bar/search_bar.xml      |   98 +
 addons/web/static/src/search/search_model.js  | 2086 ++++++++++
 .../src/search/search_panel/search_panel.js   |  206 +
 .../search_panel}/search_panel.scss           |    2 +
 .../src/search/search_panel/search_panel.xml  |  132 +
 .../search_panel}/search_view.scss            |    0
 .../search_panel}/search_view_extra.scss      |    0
 addons/web/static/src/search/utils/dates.js   |  429 +++
 .../web/static/src/search/utils/group_by.js   |   62 +
 addons/web/static/src/search/utils/misc.js    |   18 +
 .../src/search/with_search/with_search.js     |  144 +
 .../src/search/with_search/with_search.xml    |    8 +
 addons/web/static/src/views/helpers/model.js  |   77 +
 .../src/views/helpers/no_content_helpers.xml  |   28 +
 .../src/views/helpers/standard_view_props.js  |   33 +
 .../web/static/src/views/helpers/view_hook.js |   12 +
 addons/web/static/src/views/view.js           |  331 ++
 addons/web/static/src/views/view.xml          |    8 +
 .../src/webclient/actions/action_hook.js      |   92 +-
 .../src/webclient/actions/action_service.js   |  140 +-
 .../web/static/tests/helpers/mock_server.js   | 1471 ++++----
 .../control_panel/comparison_menu_tests.js    |    2 +-
 .../control_panel/custom_filter_item_tests.js |    2 +-
 .../custom_group_by_item_tests.js             |    2 +-
 .../control_panel/favorite_menu_tests.js      |    2 +-
 .../legacy/control_panel/filter_menu_tests.js |    2 +-
 .../control_panel/groupby_menu_tests.js       |    2 +-
 .../tests/legacy/views/search_panel_tests.js  |    5 +-
 .../tests/legacy/views/state_mapping_tests.js |  352 ++
 .../tests/search/comparison_menu_tests.js     |  115 +
 .../web/static/tests/search/control_panel.js  |  187 +-
 .../search/custom_favorite_item_tests.js      |  462 +++
 .../tests/search/custom_filter_item_tests.js  |  685 ++++
 .../search/custom_group_by_item_tests.js      |  200 +
 .../tests/search/favorite_menu_tests.js       |  341 ++
 .../static/tests/search/filter_menu_tests.js  |  549 +++
 .../tests/search/group_by_menu_tests.js       |  452 +++
 .../web/static/tests/search/group_by_tests.js |   99 +
 addons/web/static/tests/search/helpers.js     |  275 ++
 .../static/tests/search/search_bar_tests.js   |  700 ++++
 .../static/tests/search/search_model_tests.js |  780 ++++
 .../static/tests/search/search_panel_tests.js | 3353 +++++++++++++++++
 .../static/tests/search/search_utils_tests.js |  490 +++
 .../static/tests/search/with_search_tests.js  |  335 ++
 addons/web/static/tests/views/helpers.js      |   84 +
 addons/web/static/tests/views/view_tests.js   | 1109 ++++++
 .../webclient/actions/concurrency_tests.js    |   86 +-
 .../webclient/actions/window_action_tests.js  |   49 +-
 addons/web/static/tests/webclient/helpers.js  |    4 +-
 86 files changed, 17684 insertions(+), 1042 deletions(-)
 create mode 100644 addons/base_import/static/src/import_records/import_records.js
 create mode 100644 addons/base_import/static/src/import_records/import_records.xml
 create mode 100644 addons/board/static/src/add_to_board/add_to_board.js
 create mode 100644 addons/board/static/src/add_to_board/add_to_board.xml
 create mode 100644 addons/google_spreadsheet/static/src/add_to_google_spreadsheet/add_to_google_spreadsheet.js
 create mode 100644 addons/google_spreadsheet/static/src/add_to_google_spreadsheet/add_to_google_spreadsheet.xml
 create mode 100644 addons/web/static/src/legacy/backend_utils.js
 create mode 100644 addons/web/static/src/search/comparison_menu/comparison_menu.js
 create mode 100644 addons/web/static/src/search/comparison_menu/comparison_menu.xml
 create mode 100644 addons/web/static/src/search/favorite_menu/custom_favorite_item.js
 create mode 100644 addons/web/static/src/search/favorite_menu/custom_favorite_item.xml
 create mode 100644 addons/web/static/src/search/favorite_menu/favorite_menu.js
 create mode 100644 addons/web/static/src/search/favorite_menu/favorite_menu.xml
 create mode 100644 addons/web/static/src/search/filter_menu/custom_filter_item.js
 create mode 100644 addons/web/static/src/search/filter_menu/custom_filter_item.xml
 create mode 100644 addons/web/static/src/search/filter_menu/filter_menu.js
 create mode 100644 addons/web/static/src/search/filter_menu/filter_menu.xml
 create mode 100644 addons/web/static/src/search/group_by_menu/custom_group_by_item.js
 create mode 100644 addons/web/static/src/search/group_by_menu/custom_group_by_item.xml
 create mode 100644 addons/web/static/src/search/group_by_menu/group_by_menu.js
 create mode 100644 addons/web/static/src/search/group_by_menu/group_by_menu.xml
 create mode 100644 addons/web/static/src/search/search_arch_parser.js
 create mode 100644 addons/web/static/src/search/search_bar/search_bar.js
 create mode 100644 addons/web/static/src/search/search_bar/search_bar.xml
 create mode 100644 addons/web/static/src/search/search_model.js
 create mode 100644 addons/web/static/src/search/search_panel/search_panel.js
 rename addons/web/static/src/{legacy/scss => search/search_panel}/search_panel.scss (98%)
 create mode 100644 addons/web/static/src/search/search_panel/search_panel.xml
 rename addons/web/static/src/{legacy/scss => search/search_panel}/search_view.scss (100%)
 rename addons/web/static/src/{legacy/scss => search/search_panel}/search_view_extra.scss (100%)
 create mode 100644 addons/web/static/src/search/utils/dates.js
 create mode 100644 addons/web/static/src/search/utils/group_by.js
 create mode 100644 addons/web/static/src/search/utils/misc.js
 create mode 100644 addons/web/static/src/search/with_search/with_search.js
 create mode 100644 addons/web/static/src/search/with_search/with_search.xml
 create mode 100644 addons/web/static/src/views/helpers/model.js
 create mode 100644 addons/web/static/src/views/helpers/no_content_helpers.xml
 create mode 100644 addons/web/static/src/views/helpers/standard_view_props.js
 create mode 100644 addons/web/static/src/views/helpers/view_hook.js
 create mode 100644 addons/web/static/src/views/view.js
 create mode 100644 addons/web/static/src/views/view.xml
 create mode 100644 addons/web/static/tests/legacy/views/state_mapping_tests.js
 create mode 100644 addons/web/static/tests/search/comparison_menu_tests.js
 create mode 100644 addons/web/static/tests/search/custom_favorite_item_tests.js
 create mode 100644 addons/web/static/tests/search/custom_filter_item_tests.js
 create mode 100644 addons/web/static/tests/search/custom_group_by_item_tests.js
 create mode 100644 addons/web/static/tests/search/favorite_menu_tests.js
 create mode 100644 addons/web/static/tests/search/filter_menu_tests.js
 create mode 100644 addons/web/static/tests/search/group_by_menu_tests.js
 create mode 100644 addons/web/static/tests/search/group_by_tests.js
 create mode 100644 addons/web/static/tests/search/helpers.js
 create mode 100644 addons/web/static/tests/search/search_bar_tests.js
 create mode 100644 addons/web/static/tests/search/search_model_tests.js
 create mode 100644 addons/web/static/tests/search/search_panel_tests.js
 create mode 100644 addons/web/static/tests/search/search_utils_tests.js
 create mode 100644 addons/web/static/tests/search/with_search_tests.js
 create mode 100644 addons/web/static/tests/views/helpers.js
 create mode 100644 addons/web/static/tests/views/view_tests.js

diff --git a/addons/base_import/static/src/import_records/import_records.js b/addons/base_import/static/src/import_records/import_records.js
new file mode 100644
index 00000000000..7ffa17660fe
--- /dev/null
+++ b/addons/base_import/static/src/import_records/import_records.js
@@ -0,0 +1,48 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+
+const { Component } = owl;
+const favoriteMenuRegistry = registry.category("favoriteMenu");
+
+/**
+ * 'Import records' menu
+ *
+ * This component is used to import the records for particular model.
+ * @extends Component
+ */
+export class ImportRecords extends Component {
+    setup() {
+        this.action = useService("action");
+    }
+
+    //---------------------------------------------------------------------
+    // Protected
+    //---------------------------------------------------------------------
+
+    importRecords() {
+        const { context, resModel } = this.env.searchModel;
+        this.action.doAction({
+            type: "ir.actions.client",
+            tag: "import",
+            params: { model: resModel, context }
+        });
+    }
+}
+
+ImportRecords.template = "base_import.ImportRecords";
+
+const importRecordsItem = {
+    Component: ImportRecords,
+    groupNumber: 4,
+    isDisplayed: ({ isSmall, searchModel }) =>
+        !isSmall &&
+        searchModel.action.type === "ir.actions.act_window" &&
+        ["kanban", "list"].includes(searchModel.view.type)
+        // TODO: add arch info to searchModel?
+        // !!JSON.parse(env.view.arch.attrs.import || "1") &&
+        // !!JSON.parse(env.view.arch.attrs.create || "1"),
+};
+
+favoriteMenuRegistry.add("import-menu", importRecordsItem, { sequence: 1 });
diff --git a/addons/base_import/static/src/import_records/import_records.xml b/addons/base_import/static/src/import_records/import_records.xml
new file mode 100644
index 00000000000..a16a5f9f2f4
--- /dev/null
+++ b/addons/base_import/static/src/import_records/import_records.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="base_import.ImportRecords" owl="1">
+        <DropdownItem class="o_import_menu dropdown-item" t-on-click="importRecords">
+            Import records
+        </DropdownItem>
+    </t>
+
+</templates>
diff --git a/addons/board/static/src/add_to_board/add_to_board.js b/addons/board/static/src/add_to_board/add_to_board.js
new file mode 100644
index 00000000000..69c28cc4eda
--- /dev/null
+++ b/addons/board/static/src/add_to_board/add_to_board.js
@@ -0,0 +1,112 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { useAutofocus, useService } from "@web/core/utils/hooks";
+import { sprintf } from "@web/core/utils/strings";
+
+const { Component, useState } = owl;
+const favoriteMenuRegistry = registry.category("favoriteMenu");
+
+/**
+ * '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 Component
+ */
+export class AddToBoard extends Component {
+    setup() {
+        this.notification = useService("notification");
+        this.rpc = useService("rpc");
+        this.state = useState({ name: this.env.searchModel.displayName });
+
+        useAutofocus();
+    }
+
+    //---------------------------------------------------------------------
+    // Protected
+    //---------------------------------------------------------------------
+
+    async addToBoard() {
+        const {
+            action,
+            displayName,
+            domain,
+            comparison,
+            context,
+            groupBy,
+            orderedBy,
+            view
+        } = this.env.searchModel;
+
+        // Retrieves view context
+        const fns = this.env.__saveParams__.callbacks;
+        const { context: viewContext } = Object.assign({}, ...fns.map((fn) => fn()));
+
+        const contextToSave = {
+            ...context,
+            group_by: groupBy,
+            orderedBy,
+            dashboard_merge_domains_contexts: false,
+            ...viewContext,
+        };
+
+        if (comparison) {
+            contextToSave.comparison = comparison;
+        }
+
+        const result = await this.rpc("/board/add_to_dashboard", {
+            action_id: action.id,
+            context_to_save: contextToSave,
+            domain,
+            name: this.state.name,
+            view_mode: view.type,
+        });
+
+        if (result) {
+            this.notification.add(
+                this.env._t("Please refresh your browser for the changes to take effect."),
+                {
+                    title: sprintf(this.env._t(`"%s" added to dashboard`), this.state.name),
+                    type: "warning",
+                }
+            );
+            this.state.name = displayName;
+        } else {
+            this.notification.add(
+                this.env._t("Could not add filter to dashboard"),
+                { type: "danger" }
+            );
+        }
+    }
+
+    //---------------------------------------------------------------------
+    // Handlers
+    //---------------------------------------------------------------------
+
+    /**
+     * @param {KeyboardEvent} ev
+     */
+    onInputKeydown(ev) {
+        if (ev.key === "Enter") {
+            ev.preventDefault();
+            this.addToBoard();
+        }
+    }
+}
+
+AddToBoard.template = "board.AddToBoard";
+
+const addToBoardItem = {
+    Component: AddToBoard,
+    groupNumber: 4,
+    isDisplayed: ({ searchModel }) => searchModel.action.type === "ir.actions.act_window",
+};
+
+favoriteMenuRegistry.add("add-to-board", addToBoardItem, { sequence: 10 });
diff --git a/addons/board/static/src/add_to_board/add_to_board.xml b/addons/board/static/src/add_to_board/add_to_board.xml
new file mode 100644
index 00000000000..6419bd154af
--- /dev/null
+++ b/addons/board/static/src/add_to_board/add_to_board.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="board.AddToBoard" owl="1">
+        <Dropdown class="o_add_to_board">
+            <t t-set-slot="toggler">Add to my dashboard</t>
+            <li class="px-3 py-2">
+                <input type="text" class="o_input" autofocus="" t-model.trim="state.name" t-on-keydown="onInputKeydown" />
+            </li>
+            <li class="px-3 py-2">
+                <button type="button" class="btn btn-primary" t-on-click="addToBoard">Add</button>
+            </li>
+        </Dropdown>
+    </t>
+
+</templates>
diff --git a/addons/google_spreadsheet/static/src/add_to_google_spreadsheet/add_to_google_spreadsheet.js b/addons/google_spreadsheet/static/src/add_to_google_spreadsheet/add_to_google_spreadsheet.js
new file mode 100644
index 00000000000..49c0e988001
--- /dev/null
+++ b/addons/google_spreadsheet/static/src/add_to_google_spreadsheet/add_to_google_spreadsheet.js
@@ -0,0 +1,51 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+
+const { Component } = owl;
+const favoriteMenuRegistry = registry.category("favoriteMenu");
+
+/**
+ * 'Add to Google spreadsheet' menu item
+ *
+ * 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 Component
+ */
+export class AddToGoogleSpreadsheet extends Component {
+    setup() {
+        this.orm = useService("orm");
+    }
+
+    //---------------------------------------------------------------------
+    // Protected
+    //---------------------------------------------------------------------
+
+    async addToGoogleSpreadsheet() {
+        const { domain, groupBy, resModel, view } = this.env.searchModel;
+
+        const result = await this.orm.call(
+            "google.drive.config",
+            "set_spreadsheet",
+            [resModel, domain, groupBy, view.id]
+        );
+
+        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");
+        }
+    }
+}
+
+AddToGoogleSpreadsheet.template = "google_spreadsheet.AddToGoogleSpreadsheet";
+
+const addToGoogleSpreadsheetItem = {
+    Component: AddToGoogleSpreadsheet,
+    groupNumber: 4,
+    isDisplayed: ({ searchModel }) => searchModel.action.type === "ir.actions.act_window",
+};
+
+favoriteMenuRegistry.add("add-to-google-spreadsheet", addToGoogleSpreadsheetItem, { sequence: 20 });
diff --git a/addons/google_spreadsheet/static/src/add_to_google_spreadsheet/add_to_google_spreadsheet.xml b/addons/google_spreadsheet/static/src/add_to_google_spreadsheet/add_to_google_spreadsheet.xml
new file mode 100644
index 00000000000..b5ce85aa399
--- /dev/null
+++ b/addons/google_spreadsheet/static/src/add_to_google_spreadsheet/add_to_google_spreadsheet.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="google_spreadsheet.AddToGoogleSpreadsheet" owl="1">
+        <DropdownItem class="o_add_to_spreadsheet dropdown-item" t-on-click="addToGoogleSpreadsheet">
+            Add to Google Spreadsheet
+        </DropdownItem>
+    </t>
+
+</templates>
diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py
index 63b0a7d7f47..0133195d3cc 100644
--- a/addons/web/__manifest__.py
+++ b/addons/web/__manifest__.py
@@ -48,9 +48,9 @@ This module provides the core of the Odoo Web Client.
             'web/static/src/legacy/xml/kanban.xml',
             'web/static/src/legacy/xml/pivot.xml',
             'web/static/src/legacy/xml/report.xml',
-            'web/static/src/legacy/xml/search_panel.xml',
             'web/static/src/legacy/xml/web_calendar.xml',
             'web/static/src/legacy/xml/graph.xml',
+            'web/static/src/legacy/xml/search_panel.xml',
             'web/static/src/legacy/xml/week_days.xml',
         ],
         'web.assets_common_minimal': [
@@ -123,8 +123,6 @@ This module provides the core of the Odoo Web Client.
             'web/static/src/legacy/scss/kanban_column_progressbar.scss',
             'web/static/src/legacy/scss/kanban_view.scss',
             'web/static/src/legacy/scss/web_calendar.scss',
-            'web/static/src/legacy/scss/search_view.scss',
-            'web/static/src/legacy/scss/search_panel.scss',
             'web/static/src/legacy/scss/data_export.scss',
             'base/static/src/scss/onboarding.scss',
             'web/static/src/legacy/scss/attachment_preview.scss',
@@ -137,7 +135,6 @@ This module provides the core of the Odoo Web Client.
             'web/static/src/legacy/scss/fields_extra.scss',
             'web/static/src/legacy/scss/form_view_extra.scss',
             'web/static/src/legacy/scss/list_view_extra.scss',
-            'web/static/src/legacy/scss/search_view_extra.scss',
 
             'web/static/src/legacy/action_adapters.js',
             'web/static/src/legacy/debug_manager.js',
@@ -150,6 +147,7 @@ This module provides the core of the Odoo Web Client.
             'web/static/src/legacy/root_widget.js',
             'web/static/src/legacy/systray_menu.js',
             'web/static/src/legacy/systray_menu_item.js',
+            'web/static/src/legacy/backend_utils.js',
             'web/static/src/legacy/utils.js',
             'web/static/src/legacy/web_client.js',
             'web/static/src/legacy/js/_deprecated/*',
@@ -460,6 +458,7 @@ This module provides the core of the Odoo Web Client.
 
             # 'web/static/tests/legacy/main_tests.js',
             'web/static/tests/helpers/**/*.js',
+            'web/static/tests/search/helpers.js',
             'web/static/tests/webclient/**/helpers.js',
             'web/static/tests/qunit.js',
             'web/static/tests/main.js',
@@ -481,6 +480,7 @@ This module provides the core of the Odoo Web Client.
             'web/static/tests/core/**/*.js',
             'web/static/tests/fields/**/*.js',
             'web/static/tests/search/**/*.js',
+            ('remove', 'web/static/tests/search/helpers.js'),
             'web/static/tests/views/**/*.js',
             'web/static/tests/webclient/**/*.js',
             ('remove', 'web/static/tests/webclient/**/helpers.js'),
diff --git a/addons/web/static/src/legacy/action_adapters.js b/addons/web/static/src/legacy/action_adapters.js
index a414c6482ac..2a6fb3dff59 100644
--- a/addons/web/static/src/legacy/action_adapters.js
+++ b/addons/web/static/src/legacy/action_adapters.js
@@ -8,7 +8,8 @@ import { useDebugCategory } from "../core/debug/debug_context";
 import { Dialog } from "../core/dialog/dialog";
 import { useEffect, useService } from "@web/core/utils/hooks";
 import { ViewNotFoundError } from "../webclient/actions/action_service";
-import { cleanDomFromBootstrap, wrapSuccessOrFail, mapDoActionOptionAPI } from "./utils";
+import { cleanDomFromBootstrap, wrapSuccessOrFail } from "./utils";
+import { mapDoActionOptionAPI } from "./backend_utils";
 
 const { Component, tags, hooks } = owl;
 
@@ -335,15 +336,16 @@ export class ViewAdapter extends ActionAdapter {
     async _trigger_up(ev) {
         const payload = ev.data;
         if (ev.name === "switch_view") {
-            const state = ev.target.exportState();
             try {
-                await this.actionService.switchView(payload.view_type, {
-                    resId: payload.res_id,
-                    resIds: state.resIds,
-                    searchModel: state.searchModel,
-                    searchPanel: state.searchPanel,
-                    mode: payload.mode,
-                });
+                const props = {};
+                if (payload.mode) {
+                    props.mode = payload.mode;
+                }
+                // if (payload.res_id) {
+                // if make 'open a record, come back, and create a new record' crash
+                props.resId = payload.res_id;
+                // }
+                await this.actionService.switchView(payload.view_type, props);
             } catch (e) {
                 if (e instanceof ViewNotFoundError) {
                     return;
diff --git a/addons/web/static/src/legacy/backend_utils.js b/addons/web/static/src/legacy/backend_utils.js
new file mode 100644
index 00000000000..d1c014158cf
--- /dev/null
+++ b/addons/web/static/src/legacy/backend_utils.js
@@ -0,0 +1,265 @@
+/** @odoo-module **/
+
+import ActionModel from "@web/legacy/js/views/action_model";
+
+/**
+ * @param {string} state
+ * @returns {string}
+ */
+function searchModelStateFromLegacy(state) {
+    /**
+     * Possible problem if only one of ControlPanelModelExtension or SearchPanelModelExtension is installed.
+     * We might need to do something in SearchModel.
+     * @todo (DAM) check when search panel is reworked.
+     */
+    const parsedState = JSON.parse(state);
+    const newState = {};
+
+    if (parsedState.ControlPanelModelExtension) {
+        const {
+            query,
+            filters,
+            nextGroupId,
+            nextGroupNumber,
+            nextId,
+        } = parsedState.ControlPanelModelExtension;
+
+        newState.nextGroupId = nextGroupId;
+        newState.nextGroupNumber = nextGroupNumber;
+        newState.nextId = nextId;
+        newState.query = [];
+        newState.searchItems = {};
+
+        for (const queryElem of query) {
+            const filterId = queryElem.filterId;
+            const filter = filters[filterId];
+            const newQueryElem = { searchItemId: filterId };
+            switch (filter.type) {
+                case "filter":
+                    if (filter.hasOptions) {
+                        newQueryElem.generatorId = queryElem.optionId;
+                    }
+                    break;
+                case "groupBy":
+                    if (filter.hasOptions) {
+                        newQueryElem.intervalId = queryElem.optionId;
+                    }
+                    break;
+                case "field":
+                    newQueryElem.autocompleteValue = {
+                        value: queryElem.value,
+                        label: queryElem.label,
+                        operator: queryElem.operator,
+                    };
+                    break;
+            }
+            newState.query.push(newQueryElem);
+        }
+
+        for (const filter of Object.values(filters)) {
+            const item = Object.assign({}, filter);
+            switch (item.type) {
+                case "groupBy":
+                    if (filter.hasOptions) {
+                        item.type = "dateGroupBy";
+                        item.defaultIntervalId = item.defaultOptionId;
+                        delete item.hasOptions;
+                        delete item.defaultOptionId;
+                    }
+                    break;
+                case "filter":
+                    if (filter.hasOptions) {
+                        item.type = "dateFilter";
+                        item.defaultGeneratorId = item.defaultOptionId;
+                        delete item.hasOptions;
+                        delete item.isDateFilter;
+                        delete item.defaultOptionId;
+                    }
+                    break;
+                case "favorite":
+                    item.orderBy = item.orderedBy;
+                    delete item.orderedBy;
+                    break;
+            }
+            newState.searchItems[filter.id] = item;
+        }
+    }
+
+    if (parsedState.SearchPanelModelExtension) {
+        const { sections, searchPanelInfo } = parsedState.SearchPanelModelExtension;
+        newState.sections = sections;
+        //! Can be undefined. See search_model.__legacyParseSearchPanelArchAnyway
+        newState.searchPanelInfo = searchPanelInfo;
+    }
+
+    for (const [key, extension] of Object.entries(ActionModel.registry.entries())) {
+        if (
+            !["ControlPanel", "SearchPanel"].includes(key) &&
+            parsedState[extension.name] !== undefined
+        ) {
+            newState[key] = parsedState[extension.name];
+        }
+    }
+
+    if (!Object.keys(newState).length) {
+        return;
+    }
+
+    return JSON.stringify(newState);
+}
+
+/**
+ * @param {string} state
+ * @returns {string}
+ */
+export function searchModelStateToLegacy(state) {
+    if (!state) {
+        return;
+    }
+
+    const parsedState = JSON.parse(state);
+    const query = [];
+    for (const queryElem of parsedState.query) {
+        const searchItemId = queryElem.searchItemId;
+        const searchItem = parsedState.searchItems[searchItemId];
+        const groupId = searchItem.groupId;
+        const legacyQueryElem = { filterId: searchItemId, groupId };
+        switch (searchItem.type) {
+            case "dateFilter":
+                legacyQueryElem.optionId = queryElem.generatorId;
+                break;
+            case "dateGroupBy":
+                legacyQueryElem.optionId = queryElem.intervalId;
+                break;
+            case "comparison":
+                legacyQueryElem.type = "comparison";
+                legacyQueryElem.dateFilterId = searchItem.dateFilterId;
+                break;
+            case "field":
+                legacyQueryElem.value = queryElem.autocompleteValue.value;
+                legacyQueryElem.label = queryElem.autocompleteValue.label;
+                legacyQueryElem.operator = queryElem.autocompleteValue.operator;
+                break;
+        }
+        query.push(legacyQueryElem);
+    }
+
+    const filters = {};
+    for (const item of Object.values(parsedState.searchItems)) {
+        const filter = Object.assign({}, item);
+        switch (item.type) {
+            case "dateGroupBy":
+                filter.type = "groupBy";
+                filter.hasOptions = true;
+                filter.defaultOptionId = item.defaultIntervalId;
+                delete filter.defaultIntervalId;
+                break;
+            case "dateFilter":
+                filter.type = "filter";
+                filter.isDateFilter = true;
+                filter.hasOptions = true;
+                filter.defaultOptionId = item.defaultGeneratorId;
+                delete filter.defaultGeneratorId;
+                break;
+            case "favorite":
+                filter.orderedBy = item.orderBy;
+                delete filter.orderBy;
+                break;
+        }
+        filters[item.id] = filter;
+    }
+
+    const { nextGroupId, nextGroupNumber, nextId, sections, searchPanelInfo } = parsedState;
+    const legacyState = {};
+    legacyState.ControlPanelModelExtension = {
+        query,
+        filters,
+        nextGroupId,
+        nextGroupNumber,
+        nextId,
+    };
+    legacyState.SearchPanelModelExtension = { sections, searchPanelInfo };
+
+    for (const [key, extension] of Object.entries(ActionModel.registry.entries())) {
+        if (!["ControlPanel", "SearchPanel"].includes(key) && parsedState[key] !== undefined) {
+            legacyState[extension.name] = parsedState[key];
+        }
+    }
+
+    return JSON.stringify(legacyState);
+}
+
+export function exportGlobalState(legacyControllerState) {
+    const { resIds, searchModel, searchPanel } = legacyControllerState;
+    const globalState = {};
+    if (searchPanel) {
+        globalState.searchPanel = searchPanel;
+    }
+    if (resIds) {
+        globalState.resIds = resIds;
+    }
+    const newSearchModel = searchModelStateFromLegacy(searchModel);
+    if (newSearchModel) {
+        globalState.searchModel = newSearchModel;
+    }
+    return globalState;
+}
+
+export function exportLocalState(legacyControllerState) {
+    const state = Object.assign({}, legacyControllerState);
+    delete state.searchModel;
+    delete state.searchPanel;
+    delete state.resIds;
+    return state;
+}
+
+export function mapDoActionOptionAPI(legacyOptions) {
+    legacyOptions = legacyOptions || {};
+    // use camelCase instead of snake_case for some keys
+    Object.assign(legacyOptions, {
+        additionalContext: legacyOptions.additional_context,
+        clearBreadcrumbs: legacyOptions.clear_breadcrumbs,
+        viewType: legacyOptions.view_type,
+        onClose: legacyOptions.on_close,
+        props: {
+            resId: legacyOptions.res_id,
+        },
+    });
+    if (legacyOptions.controllerState) {
+        legacyOptions.props.globalState = exportGlobalState(legacyOptions.controllerState);
+    }
+    delete legacyOptions.additional_context;
+    delete legacyOptions.clear_breadcrumbs;
+    delete legacyOptions.view_type;
+    delete legacyOptions.res_id;
+    delete legacyOptions.on_close;
+    return legacyOptions;
+}
+
+export function makeLegacyActionManagerService(legacyEnv) {
+    // add a service to redirect 'do-action' events triggered on the bus in the
+    // legacy env to the action-manager service in the wowl env
+    return {
+        dependencies: ["action"],
+        start(env) {
+            function do_action(action, options) {
+                const legacyOptions = mapDoActionOptionAPI(options);
+                return env.services.action.doAction(action, legacyOptions);
+            }
+            legacyEnv.bus.on("do-action", null, (payload) => {
+                const { action, options } = payload;
+                do_action(action, options);
+            });
+            return { do_action };
+        },
+    };
+}
+
+export function breadcrumbsToLegacy(breadcrumbs) {
+    if (!breadcrumbs) {
+        return;
+    }
+    return breadcrumbs.slice().map((bc) => {
+        return { title: bc.name, controllerID: bc.jsId };
+    });
+}
diff --git a/addons/web/static/src/legacy/js/control_panel/control_panel_model_extension.js b/addons/web/static/src/legacy/js/control_panel/control_panel_model_extension.js
index 08e54983eee..b97b6f2fe65 100644
--- a/addons/web/static/src/legacy/js/control_panel/control_panel_model_extension.js
+++ b/addons/web/static/src/legacy/js/control_panel/control_panel_model_extension.js
@@ -13,10 +13,6 @@ odoo.define("web/static/src/js/control_panel/control_panel_model_extension.js",
     const FAVORITE_SHARED_GROUP = 2;
     const DISABLE_FAVORITE = "search_disable_custom_filters";
 
-    let filterId = 1;
-    let groupId = 1;
-    let groupNumber = 0;
-
     /**
      * Control panel model
      *
@@ -215,6 +211,9 @@ odoo.define("web/static/src/js/control_panel/control_panel_model_extension.js",
          */
         prepareState() {
             Object.assign(this.state, {
+                nextGroupId: 1,
+                nextGroupNumber: 1,
+                nextId: 1,
                 filters: {},
                 query: [],
             });
@@ -318,13 +317,13 @@ odoo.define("web/static/src/js/control_panel/control_panel_model_extension.js",
             const preFavorite = await this._saveQuery(preFilter);
             this.clearQuery();
             const filter = Object.assign(preFavorite, {
-                groupId,
-                id: filterId,
+                groupId: this.state.nextGroupId,
+                id: this.state.nextId,
             });
-            this.state.filters[filterId] = filter;
-            this.state.query.push({ groupId, filterId });
-            groupId++;
-            filterId++;
+            this.state.filters[this.state.nextId] = filter;
+            this.state.query.push({ groupId: this.state.nextGroupId, filterId: this.state.nextId });
+            this.state.nextGroupId++;
+            this.state.nextId++;
         }
 
         /**
@@ -340,18 +339,18 @@ odoo.define("web/static/src/js/control_panel/control_panel_model_extension.js",
             const newFilterIdS = [];
             prefilters.forEach(preFilter => {
                 const filter = Object.assign(preFilter, {
-                    groupId,
-                    groupNumber,
-                    id: filterId,
+                    groupId: this.state.nextGroupId,
+                    groupNumber: this.state.nextGroupNumber,
+                    id: this.state.nextId,
                     type: 'filter',
                 });
-                this.state.filters[filterId] = filter;
-                this.state.query.push({ groupId, filterId });
-                newFilterIdS.push(filterId);
-                filterId++;
+                this.state.filters[this.state.nextId] = filter;
+                this.state.query.push({ groupId: this.state.nextGroupId, filterId: this.state.nextId });
+                newFilterIdS.push(this.state.nextId);
+                this.state.nextId++;
             });
-            groupId++;
-            groupNumber++;
+            this.state.nextGroupId++;
+            this.state.nextGroupNumber++;
             return newFilterIdS;
         }
 
@@ -366,22 +365,22 @@ odoo.define("web/static/src/js/control_panel/control_panel_model_extension.js",
                 description: field.string || field.name,
                 fieldName: field.name,
                 fieldType: field.type,
-                groupId: groupBy ? groupBy.groupId : groupId++,
-                groupNumber,
-                id: filterId,
+                groupId: groupBy ? groupBy.groupId : this.state.nextGroupId++,
+                groupNumber: this.state.nextGroupNumber,
+                id: this.state.nextId,
                 type: 'groupBy',
                 custom: true,
             };
-            this.state.filters[filterId] = filter;
+            this.state.filters[this.state.nextId] = filter;
             if (['date', 'datetime'].includes(field.type)) {
                 filter.hasOptions = true;
                 filter.defaultOptionId = DEFAULT_INTERVAL;
-                this.toggleFilterWithOptions(filterId);
+                this.toggleFilterWithOptions(this.state.nextId);
             } else {
-                this.toggleFilter(filterId);
+                this.toggleFilter(this.state.nextId);
             }
-            groupNumber++;
-            filterId++;
+            this.state.nextGroupNumber++;
+            this.state.nextId++;
         }
 
         /**
@@ -732,14 +731,14 @@ odoo.define("web/static/src/js/control_panel/control_panel_model_extension.js",
          */
         _createGroupOfFilters(pregroup) {
             pregroup.forEach(preFilter => {
-                const filter = Object.assign(preFilter, { groupId, id: filterId });
-                this.state.filters[filterId] = filter;
+                const filter = Object.assign(preFilter, { groupId: this.state.nextGroupId, id: this.state.nextId });
+                this.state.filters[this.state.nextId] = filter;
                 if (!this.defaultFavoriteId && filter.isDefault && filter.type === 'field') {
                     this._prepareDefaultLabel(filter);
                 }
-                filterId++;
+                this.state.nextId++;
             });
-            groupId++;
+            this.state.nextGroupId++;
         }
 
         /**
@@ -784,7 +783,7 @@ odoo.define("web/static/src/js/control_panel/control_panel_model_extension.js",
                     }
                     currentTag = preFilter.tag;
                     currentGroup = [];
-                    groupNumber++;
+                    this.state.nextGroupNumber++;
                 }
                 if (preFilter.tag !== 'separator') {
                     const filter = {
@@ -811,7 +810,7 @@ odoo.define("web/static/src/js/control_panel/control_panel_model_extension.js",
                         }
                     }
                     if (filter.type === 'filter' || filter.type === 'groupBy') {
-                        filter.groupNumber = groupNumber;
+                        filter.groupNumber = this.state.nextGroupNumber;
                     }
                     this._extractAttributes(filter, preFilter.attrs);
                     currentGroup.push(filter);
diff --git a/addons/web/static/src/legacy/js/model.js b/addons/web/static/src/legacy/js/model.js
index a367706ea4c..46aff673cbb 100644
--- a/addons/web/static/src/legacy/js/model.js
+++ b/addons/web/static/src/legacy/js/model.js
@@ -151,7 +151,7 @@ odoo.define("web.Model", function (require) {
      * 3. Registration of the extension into the main model
      * @see Registry()
      * ```
-     *  ActionModel.registry.add("SearchPanel", ControlPanelModelExtension, 10);
+     *  ActionModel.registry.add("ControlPanel", ControlPanelModelExtension, 10);
      * ```
      *
      *-------------------------------------------------------------------------
diff --git a/addons/web/static/src/legacy/js/views/search_panel.js b/addons/web/static/src/legacy/js/views/search_panel.js
index e5936260e86..c8e5f8c7f1c 100644
--- a/addons/web/static/src/legacy/js/views/search_panel.js
+++ b/addons/web/static/src/legacy/js/views/search_panel.js
@@ -46,6 +46,14 @@
             this._updateActiveValues();
         }
 
+        //---------------------------------------------------------------------
+        // Getters
+        //---------------------------------------------------------------------
+
+        get sections() {
+            return this.model.get("sections", s => !s.empty);
+        }
+
         //---------------------------------------------------------------------
         // Public
         //---------------------------------------------------------------------
@@ -204,6 +212,6 @@
         importedState: { type: String, optional: 1 },
         searchModel: Model,
     };
-    SearchPanel.template = "web.SearchPanel";
+    SearchPanel.template = "web.Legacy.SearchPanel";
 
     export default SearchPanel;
diff --git a/addons/web/static/src/legacy/legacy_client_actions.js b/addons/web/static/src/legacy/legacy_client_actions.js
index 38d33c805a3..e33a50980ae 100644
--- a/addons/web/static/src/legacy/legacy_client_actions.js
+++ b/addons/web/static/src/legacy/legacy_client_actions.js
@@ -6,7 +6,7 @@ import Widget from "web.Widget";
 import { setScrollPosition } from "../core/utils/scrolling";
 import { useSetupAction } from "../webclient/actions/action_hook";
 import { ClientActionAdapter } from "./action_adapters";
-import { breadcrumbsToLegacy } from "./utils";
+import { breadcrumbsToLegacy } from "./backend_utils";
 
 const { Component, hooks, tags } = owl;
 const actionRegistry = registry.category("actions");
@@ -42,7 +42,7 @@ function registerClientAction(name, action) {
                     this.props.state && this.props.state.__on_reverse_breadcrumb__;
                 useSetupAction({
                     beforeLeave: () => this.controllerRef.comp.__widget.canBeRemoved(),
-                    export: () => this.controllerRef.comp.exportState(),
+                    exportLocalState: () => this.controllerRef.comp.exportState(),
                 });
                 this.onScrollTo = (ev) => {
                     setScrollPosition(this, { left: ev.detail.left, top: ev.detail.top });
diff --git a/addons/web/static/src/legacy/legacy_service_provider.js b/addons/web/static/src/legacy/legacy_service_provider.js
index ce4e291f1c3..b8efe0125b1 100644
--- a/addons/web/static/src/legacy/legacy_service_provider.js
+++ b/addons/web/static/src/legacy/legacy_service_provider.js
@@ -5,7 +5,7 @@ import Context from "web.Context";
 
 import { browser } from "../core/browser/browser";
 import { registry } from "../core/registry";
-import { mapDoActionOptionAPI } from "./utils";
+import { mapDoActionOptionAPI } from "./backend_utils";
 
 export const legacyServiceProvider = {
     dependencies: ["effect", "action"],
diff --git a/addons/web/static/src/legacy/legacy_setup.js b/addons/web/static/src/legacy/legacy_setup.js
index b29673ba33f..5eee8f2774b 100644
--- a/addons/web/static/src/legacy/legacy_setup.js
+++ b/addons/web/static/src/legacy/legacy_setup.js
@@ -3,13 +3,13 @@
 import { registry } from "../core/registry";
 import {
     makeLegacyNotificationService,
-    makeLegacyActionManagerService,
     makeLegacyRpcService,
     makeLegacySessionService,
     makeLegacyDialogMappingService,
     makeLegacyCrashManagerService,
     makeLegacyCommandService,
 } from "./utils";
+import { makeLegacyActionManagerService } from "./backend_utils";
 import * as AbstractService from "web.AbstractService";
 import * as legacyEnv from "web.env";
 import * as session from "web.session";
diff --git a/addons/web/static/src/legacy/legacy_views.js b/addons/web/static/src/legacy/legacy_views.js
index 01a752db645..681295e9198 100644
--- a/addons/web/static/src/legacy/legacy_views.js
+++ b/addons/web/static/src/legacy/legacy_views.js
@@ -6,7 +6,12 @@ import { useSetupAction } from "../webclient/actions/action_hook";
 import legacyViewRegistry from "web.view_registry";
 import { ViewAdapter } from "./action_adapters";
 import Widget from "web.Widget";
-import { breadcrumbsToLegacy } from "./utils";
+import {
+    breadcrumbsToLegacy,
+    exportGlobalState,
+    exportLocalState,
+    searchModelStateToLegacy,
+} from "./backend_utils";
 import { setScrollPosition } from "../core/utils/scrolling";
 import { registry } from "@web/core/registry";
 
@@ -34,6 +39,17 @@ function registerView(name, LegacyView) {
             this.Widget = Widget; // fool the ComponentAdapter with a simple Widget
             this.View = LegacyView;
             this.viewInfo = {};
+
+            let resIds;
+            let searchModel;
+            let searchPanel;
+            const { globalState } = this.props;
+            if (globalState) {
+                resIds = globalState.resIds;
+                searchModel = searchModelStateToLegacy(globalState.searchModel);
+                searchPanel = globalState.searchPanel;
+            }
+
             this.viewParams = Object.assign({}, this.props.actionFlags, {
                 action: this.props.action,
                 // legacy views automatically add the last part of the breadcrumbs
@@ -45,13 +61,9 @@ function registerView(name, LegacyView) {
                         "resId" in this.props
                             ? this.props.resId
                             : this.props.state && this.props.state.currentId,
-                    resIds: this.props.resIds || (this.props.state && this.props.state.resIds),
-                    searchModel:
-                        this.props.searchModel ||
-                        (this.props.state && this.props.state.searchModel),
-                    searchPanel:
-                        this.props.searchPanel ||
-                        (this.props.state && this.props.state.searchPanel),
+                    resIds: this.props.resIds || resIds,
+                    searchModel,
+                    searchPanel,
                 },
             });
 
@@ -71,7 +83,8 @@ function registerView(name, LegacyView) {
                 this.props.state && this.props.state.__on_reverse_breadcrumb__;
             useSetupAction({
                 beforeLeave: () => this.controllerRef.comp.__widget.canBeRemoved(),
-                export: () => this.controllerRef.comp.exportState(),
+                exportGlobalState: () => exportGlobalState(this.controllerRef.comp.exportState()),
+                exportLocalState: () => exportLocalState(this.controllerRef.comp.exportState()),
             });
             this.onScrollTo = (ev) => {
                 setScrollPosition(this, { left: ev.detail.left, top: ev.detail.top });
@@ -85,8 +98,7 @@ function registerView(name, LegacyView) {
                 context: this.props.context,
             };
             const options = {
-                actionId: this.props.actionId,
-                context: this.props.context,
+                actionId: this.props.action.id,
                 loadActionMenus: this.props.loadActionMenus,
                 loadIrFilters: this.props.loadIrFilters,
             };
diff --git a/addons/web/static/src/legacy/utils.js b/addons/web/static/src/legacy/utils.js
index 5310281cdf7..0ab1e395dda 100644
--- a/addons/web/static/src/legacy/utils.js
+++ b/addons/web/static/src/legacy/utils.js
@@ -10,53 +10,6 @@ import {
 } from "../core/network/rpc_service";
 import { ErrorDialog } from "../core/errors/error_dialogs";
 
-export function mapDoActionOptionAPI(legacyOptions) {
-    legacyOptions = legacyOptions || {};
-    // use camelCase instead of snake_case for some keys
-    Object.assign(legacyOptions, {
-        additionalContext: legacyOptions.additional_context,
-        clearBreadcrumbs: legacyOptions.clear_breadcrumbs,
-        viewType: legacyOptions.view_type,
-        onClose: legacyOptions.on_close,
-        props: {
-            resId: legacyOptions.res_id,
-        },
-    });
-    if (legacyOptions.controllerState) {
-        if (legacyOptions.controllerState.searchModel) {
-            legacyOptions.props.searchModel = legacyOptions.controllerState.searchModel;
-        }
-        if (legacyOptions.controllerState.searchPanel) {
-            legacyOptions.props.searchPanel = legacyOptions.controllerState.searchPanel;
-        }
-    }
-    delete legacyOptions.additional_context;
-    delete legacyOptions.clear_breadcrumbs;
-    delete legacyOptions.view_type;
-    delete legacyOptions.res_id;
-    delete legacyOptions.on_close;
-    return legacyOptions;
-}
-
-export function makeLegacyActionManagerService(legacyEnv) {
-    // add a service to redirect 'do-action' events triggered on the bus in the
-    // legacy env to the action-manager service in the wowl env
-    return {
-        dependencies: ["action"],
-        start(env) {
-            function do_action(action, options) {
-                const legacyOptions = mapDoActionOptionAPI(options);
-                return env.services.action.doAction(action, legacyOptions);
-            }
-            legacyEnv.bus.on("do-action", null, (payload) => {
-                const { action, options } = payload;
-                do_action(action, options);
-            });
-            return { do_action };
-        },
-    };
-}
-
 export function makeLegacyRpcService(legacyEnv) {
     return {
         start(env) {
@@ -218,15 +171,6 @@ export function mapLegacyEnvToWowlEnv(legacyEnv, wowlEnv) {
     });
 }
 
-export function breadcrumbsToLegacy(breadcrumbs) {
-    if (!breadcrumbs) {
-        return;
-    }
-    return breadcrumbs.slice().map((bc) => {
-        return { title: bc.name, controllerID: bc.jsId };
-    });
-}
-
 const reBSTooltip = /^bs-.*$/;
 
 export function cleanDomFromBootstrap() {
diff --git a/addons/web/static/src/legacy/xml/base.xml b/addons/web/static/src/legacy/xml/base.xml
index aa1e34787d0..87f31711859 100644
--- a/addons/web/static/src/legacy/xml/base.xml
+++ b/addons/web/static/src/legacy/xml/base.xml
@@ -810,26 +810,6 @@
     <div class="o_content"/>
 </div>
 
-<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">
-            <t t-if="title" t-esc="title"/>
-            <t t-else="1">No data to display</t>
-        </p>
-        <p>
-            <t t-if="description" t-esc="description"/>
-            <t t-else="1">Try to add some records, or make sure that there is no
-                active filter in the search bar.</t>
-        </p>
-    </div>
-</div>
-
-<div t-name="web.ActionHelper" class="o_view_nocontent" owl="1">
-    <div class="o_nocontent_help">
-        <t t-raw="noContentHelp"/>
-    </div>
-</div>
-
 <t t-name="ListView.buttons">
     <div class="o_list_buttons d-flex" role="toolbar" aria-label="Main actions">
         <button type="button" class="btn btn-primary o_list_button_save" title="Save record" accesskey="s">
diff --git a/addons/web/static/src/legacy/xml/search_panel.xml b/addons/web/static/src/legacy/xml/search_panel.xml
index 4b6dc4d7a60..6397e5ae807 100644
--- a/addons/web/static/src/legacy/xml/search_panel.xml
+++ b/addons/web/static/src/legacy/xml/search_panel.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates id="template" xml:space="preserve">
 
-<t t-name="web.SearchPanel" owl="1">
+<t t-name="web.Legacy.SearchPanel" owl="1">
     <div class="o_search_panel" t-att-class="props.className">
         <section t-foreach="model.get('sections', s => !s.empty)" t-as="section" t-key="section.id"
             t-attf-class="o_search_panel_section o_search_panel_{{ section.type }}"
@@ -16,7 +16,7 @@
                 <span><t t-esc="section.errorMsg"/></span>
             </div>
             <ul t-else="" class="list-group d-block o_search_panel_field">
-                <t t-if="section.type === 'category'" t-call="web.SearchPanel.Category">
+                <t t-if="section.type === 'category'" t-call="web.Legacy.SearchPanel.Category">
                     <t t-set="values" t-value="section.rootIds"/>
                 </t>
                 <t t-elif="section.groups">
@@ -49,7 +49,7 @@
                             </div>
                         </header>
                         <ul class="list-group d-block">
-                            <t t-call="web.SearchPanel.FiltersGroup">
+                            <t t-call="web.Legacy.SearchPanel.FiltersGroup">
                                 <t t-set="values" t-value="group.values"/>
                                 <!-- TODO: this is a workaround for issue https://github.com/odoo/owl/issues/695 (remove when solved) -->
                                 <t t-set="section" t-value="_section"/>
@@ -57,7 +57,7 @@
                         </ul>
                     </li>
                     <ul t-if="section.groups.get(false)" class="list-group d-block">
-                        <t t-call="web.SearchPanel.FiltersGroup">
+                        <t t-call="web.Legacy.SearchPanel.FiltersGroup">
                             <t t-set="group" t-value="section.groups.get(false)"/>
                             <t t-set="values" t-value="group.values"/>
                             <!-- TODO: this is a workaround for issue https://github.com/odoo/owl/issues/695 (remove when solved) -->
@@ -65,7 +65,7 @@
                         </t>
                     </ul>
                 </t>
-                <t t-else="" t-call="web.SearchPanel.FiltersGroup">
+                <t t-else="" t-call="web.Legacy.SearchPanel.FiltersGroup">
                     <t t-set="values" t-value="section.values"/>
                 </t>
             </ul>
@@ -73,7 +73,7 @@
     </div>
 </t>
 
-<t t-name="web.SearchPanel.Category" owl="1">
+<t t-name="web.Legacy.SearchPanel.Category" owl="1">
     <t t-foreach="values" t-as="valueId" t-key="valueId">
         <t t-set="value" t-value="section.values.get(valueId)"/>
         <li class="o_search_panel_category_value list-group-item border-0">
@@ -96,7 +96,7 @@
                 />
             </header>
             <ul t-if="value.childrenIds.length and state.expanded[section.id][valueId]" class="list-group d-block">
-                <t t-call="web.SearchPanel.Category">
+                <t t-call="web.Legacy.SearchPanel.Category">
                     <t t-set="values" t-value="value.childrenIds"/>
                 </t>
             </ul>
@@ -104,7 +104,7 @@
     </t>
 </t>
 
-<t t-name="web.SearchPanel.FiltersGroup" owl="1">
+<t t-name="web.Legacy.SearchPanel.FiltersGroup" owl="1">
     <li t-foreach="[...values.keys()]" t-as="valueId" t-key="valueId"
         class="o_search_panel_filter_value list-group-item border-0"
         >
diff --git a/addons/web/static/src/search/comparison_menu/comparison_menu.js b/addons/web/static/src/search/comparison_menu/comparison_menu.js
new file mode 100644
index 00000000000..450e833932c
--- /dev/null
+++ b/addons/web/static/src/search/comparison_menu/comparison_menu.js
@@ -0,0 +1,33 @@
+/** @odoo-module **/
+
+import { FACET_ICONS } from "../utils/misc";
+import { useBus } from "@web/core/utils/hooks";
+
+const { Component } = owl;
+
+export class ComparisonMenu extends Component {
+    setup() {
+        this.icon = FACET_ICONS.comparison;
+
+        useBus(this.env.searchModel, "update", this.render);
+    }
+
+    /**
+     * @returns {Object[]}
+     */
+    get items() {
+        return this.env.searchModel.getSearchItems(
+            (searchItem) => searchItem.type === "comparison"
+        );
+    }
+
+    /**
+     * @param {CustomEvent}
+     */
+    onComparisonSelected(ev) {
+        const { itemId } = ev.detail.payload;
+        this.env.searchModel.toggleSearchItem(itemId);
+    }
+}
+
+ComparisonMenu.template = "web.ComparisonMenu";
diff --git a/addons/web/static/src/search/comparison_menu/comparison_menu.xml b/addons/web/static/src/search/comparison_menu/comparison_menu.xml
new file mode 100644
index 00000000000..0c676e49ee8
--- /dev/null
+++ b/addons/web/static/src/search/comparison_menu/comparison_menu.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.ComparisonMenu" owl="1">
+        <Dropdown class="o_comparison_menu"
+            togglerClass="'btn btn-secondary'"
+            t-on-dropdown-item-selected="onComparisonSelected"
+            >
+            <t t-set-slot="toggler">
+                <i class="mr-1" t-att-class="icon"/>
+                <span class="o_dropdown_title">Comparison</span>
+            </t>
+            <t t-foreach="items" t-as="item" t-key="item.id">
+                <DropdownItem class="o_menu_item dropdown-item"
+                    t-att-class="{ selected: item.isActive }"
+                    payload="{ itemId: item.id }"
+                    parentClosingMode="'none'"
+                    >
+                    <t t-esc="item.description"/>
+                </DropdownItem>
+            </t>
+        </Dropdown>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/search/control_panel/control_panel.js b/addons/web/static/src/search/control_panel/control_panel.js
index 7a15102ed59..dac80643c39 100644
--- a/addons/web/static/src/search/control_panel/control_panel.js
+++ b/addons/web/static/src/search/control_panel/control_panel.js
@@ -1,9 +1,21 @@
 /** @odoo-module **/
 
+import { ComparisonMenu } from "../comparison_menu/comparison_menu";
+import { FavoriteMenu } from "../favorite_menu/favorite_menu";
+import { FilterMenu } from "../filter_menu/filter_menu";
+import { GroupByMenu } from "../group_by_menu/group_by_menu";
+import { SearchBar } from "../search_bar/search_bar";
 import { useService } from "@web/core/utils/hooks";
 
 const { Component } = owl;
 
+const MAPPING = {
+    filter: FilterMenu,
+    groupBy: GroupByMenu,
+    comparison: ComparisonMenu,
+    favorite: FavoriteMenu,
+};
+
 export class ControlPanel extends Component {
     setup() {
         this.actionService = useService("action");
@@ -20,13 +32,31 @@ export class ControlPanel extends Component {
                 "bottom-left": true,
                 "bottom-right": true,
             },
-            this.props.display
+            this.props.display || this.env.searchModel.display.controlPanel
         );
         display.top = display["top-left"] || display["top-right"];
         display.bottom = display["bottom-left"] || display["bottom-right"];
         return display;
     }
 
+    /**
+     * @returns {Component[]}
+     */
+    get searchMenus() {
+        const searchMenus = [];
+        for (const key of this.env.searchModel.searchMenuTypes) {
+            // look in display instead?
+            if (
+                key === "comparison" &&
+                this.env.searchModel.getSearchItems((i) => i.type === "comparison").length === 0
+            ) {
+                continue;
+            }
+            searchMenus.push({ Component: MAPPING[key], key });
+        }
+        return searchMenus;
+    }
+
     /**
      * Called when an element of the breadcrumbs is clicked.
      *
@@ -46,8 +76,27 @@ export class ControlPanel extends Component {
     }
 }
 
+ControlPanel.components = { ComparisonMenu, FavoriteMenu, FilterMenu, GroupByMenu, SearchBar };
 ControlPanel.template = "web.ControlPanel";
+// ControlPanel.props = {
+//     breadcrumbs: { type: Array, element: { jsId: String, name: String }, optional: true },
+//     display: { type: Object, optional: true },
+//     displayName: { type: String, optional: true },
+//     viewSwitcherEntries: {
+//         type: Array,
+//         element: {
+//             type: Object,
+//             shape: {
+//                 active: { type: Boolean, optional: true },
+//                 icon: String,
+//                 multiRecord: { type: Boolean, optional: true },
+//                 name: [Object, String],
+//                 type: String,
+//             },
+//         },
+//         optional: true,
+//     },
+// };
 ControlPanel.defaultProps = {
     breadcrumbs: [],
-    display: {},
 };
diff --git a/addons/web/static/src/search/control_panel/control_panel.xml b/addons/web/static/src/search/control_panel/control_panel.xml
index fb3a87ea024..617c77b2d98 100644
--- a/addons/web/static/src/search/control_panel/control_panel.xml
+++ b/addons/web/static/src/search/control_panel/control_panel.xml
@@ -10,7 +10,9 @@
                     </t>
                 </div>
                 <div t-if="display['top-right']" class="o_cp_top_right">
-                    <t t-slot="control-panel-top-right"/>
+                    <t t-slot="control-panel-top-right">
+                        <SearchBar/>
+                    </t>
                 </div>
             </div>
             <div t-if="display['bottom']" class="o_cp_bottom">
@@ -18,7 +20,13 @@
                     <t t-slot="control-panel-bottom-left"/>
                 </div>
                 <div t-if="display['bottom-right']" class="o_cp_bottom_right">
-                    <t t-slot="control-panel-bottom-right"/>
+                    <t t-slot="control-panel-bottom-right">
+                        <div class="btn-group o_search_options position-static" role="search">
+                            <t t-foreach="searchMenus" t-as="menu" t-key="menu.key">
+                                <t t-component="menu.Component"/>
+                            </t>
+                        </div>
+                    </t>
 
                     <div class="o_cp_pager"/>
 
diff --git a/addons/web/static/src/search/favorite_menu/custom_favorite_item.js b/addons/web/static/src/search/favorite_menu/custom_favorite_item.js
new file mode 100644
index 00000000000..f66b017f422
--- /dev/null
+++ b/addons/web/static/src/search/favorite_menu/custom_favorite_item.js
@@ -0,0 +1,100 @@
+/** @odoo-module **/
+
+import { registry } from "@web/core/registry";
+import { useAutofocus, useService } from "@web/core/utils/hooks";
+
+const { Component, hooks } = owl;
+const { useRef, useState } = hooks;
+
+const favoriteMenuRegistry = registry.category("favoriteMenu");
+
+export class CustomFavoriteItem extends Component {
+    setup() {
+        this.notificationService = useService("notification");
+        this.descriptionRef = useRef("description");
+        useAutofocus();
+        this.state = useState({
+            description: this.env.searchModel.displayName,
+            isDefault: false,
+            isShared: false,
+        });
+    }
+
+    /**
+     * @param {Event} ev
+     */
+    saveFavorite(ev) {
+        if (!this.state.description.length) {
+            this.notificationService.add(
+                this.env._t("A name for your favorite filter is required."),
+                { type: "danger" }
+            );
+            ev.stopPropagation();
+            return this.descriptionRef.el.focus();
+        }
+        const favorites = this.env.searchModel.getSearchItems(
+            (s) => s.type === "favorite" && s.description === this.state.description
+        );
+        if (favorites.length) {
+            this.notificationService.add(this.env._t("A filter with same name already exists."), {
+                type: "danger",
+            });
+            ev.stopPropagation();
+            return this.descriptionRef.el.focus();
+        }
+        const { description, isDefault, isShared } = this.state;
+        this.env.searchModel.createNewFavorite({ description, isDefault, isShared });
+
+        Object.assign(this.state, {
+            description: this.env.searchModel.displayName,
+            isDefault: false,
+            isShared: false,
+        });
+    }
+
+    /**
+     * @param {Event} ev
+     */
+    onDefaultCheckboxChange(ev) {
+        const { checked } = ev.target;
+        this.state.isDefault = checked;
+        if (checked) {
+            this.state.isShared = false;
+        }
+    }
+
+    /**
+     * @param {Event} ev
+     */
+    onShareCheckboxChange(ev) {
+        const { checked } = ev.target;
+        this.state.isShared = checked;
+        if (checked) {
+            this.state.isDefault = false;
+        }
+    }
+
+    /**
+     * @param {KeyboardEvent} 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;
+        }
+    }
+}
+
+CustomFavoriteItem.template = "web.CustomFavoriteItem";
+favoriteMenuRegistry.add(
+    "custom-favorite-item",
+    { Component: CustomFavoriteItem, groupNumber: 3 },
+    { sequence: 0 }
+);
diff --git a/addons/web/static/src/search/favorite_menu/custom_favorite_item.xml b/addons/web/static/src/search/favorite_menu/custom_favorite_item.xml
new file mode 100644
index 00000000000..82b7aa92cee
--- /dev/null
+++ b/addons/web/static/src/search/favorite_menu/custom_favorite_item.xml
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.CustomFavoriteItem" owl="1" >
+        <Dropdown class="o_add_favorite">
+            <t t-set-slot="toggler">
+                Save current search
+            </t>
+            <li class="px-3 py-2">
+                <input type="text"
+                    class="o_input"
+                    autofocus=""
+                    t-ref="description"
+                    t-model.trim="state.description"
+                    t-on-keydown="onInputKeydown"
+                    />
+                <CheckBox value="state.isDefault" t-on-change="onDefaultCheckboxChange">
+                    Use by default
+                </CheckBox>
+                <CheckBox value="state.isShared" t-on-change="onShareCheckboxChange">
+                    Share with all users
+                </CheckBox>
+            </li>
+            <li class="px-3 py-2">
+                <button class="o_save_favorite btn btn-primary" t-on-click="saveFavorite">
+                    Save
+                </button>
+            </li>
+        </Dropdown>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/search/favorite_menu/favorite_menu.js b/addons/web/static/src/search/favorite_menu/favorite_menu.js
new file mode 100644
index 00000000000..38e36f9a515
--- /dev/null
+++ b/addons/web/static/src/search/favorite_menu/favorite_menu.js
@@ -0,0 +1,68 @@
+/** @odoo-module **/
+
+import { ConfirmationDialog } from "@web/core/confirmation_dialog/confirmation_dialog";
+import { FACET_ICONS } from "../utils/misc";
+import { registry } from "@web/core/registry";
+import { useBus } from "@web/core/utils/hooks";
+import { useService } from "@web/core/utils/hooks";
+
+const favoriteMenuRegistry = registry.category("favoriteMenu");
+
+const { Component } = owl;
+
+export class FavoriteMenu extends Component {
+    setup() {
+        this.icon = FACET_ICONS.favorite;
+        this.dialogService = useService("dialog");
+
+        useBus(this.env.searchModel, "update", this.render);
+    }
+
+    /**
+     * @returns {Array}
+     */
+    get items() {
+        const favorites = this.env.searchModel.getSearchItems(
+            (searchItem) => searchItem.type === "favorite"
+        );
+        const registryMenus = [];
+        for (const item of favoriteMenuRegistry.getAll()) {
+            if ("isDisplayed" in item ? item.isDisplayed(this.env) : true) {
+                registryMenus.push({
+                    Component: item.Component,
+                    groupNumber: item.groupNumber,
+                    key: item.Component.name,
+                });
+            }
+        }
+        return [...favorites, ...registryMenus];
+    }
+
+    /**
+     * @param {CustomEvent} ev
+     */
+    onFavoriteSelected(ev) {
+        const { itemId } = ev.detail.payload;
+        this.env.searchModel.toggleSearchItem(itemId);
+    }
+
+    /**
+     * @param {number} itemId
+     */
+    openConfirmationDialog(itemId) {
+        const { userId } = this.items.find((item) => item.id === itemId);
+        const dialogProps = {
+            title: this.env._t("Warning"),
+            body: userId
+                ? this.env._t("Are you sure that you want to remove this filter?")
+                : this.env._t(
+                      "This filter is global and will be removed for everybody if you continue."
+                  ),
+            confirm: () => this.env.searchModel.deleteFavorite(itemId),
+            cancel: () => {},
+        };
+        this.dialogService.add(ConfirmationDialog, dialogProps);
+    }
+}
+
+FavoriteMenu.template = "web.FavoriteMenu";
diff --git a/addons/web/static/src/search/favorite_menu/favorite_menu.xml b/addons/web/static/src/search/favorite_menu/favorite_menu.xml
new file mode 100644
index 00000000000..690925e8cc4
--- /dev/null
+++ b/addons/web/static/src/search/favorite_menu/favorite_menu.xml
@@ -0,0 +1,41 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.FavoriteMenu" owl="1">
+        <Dropdown class="o_favorite_menu"
+            togglerClass="'btn btn-secondary'"
+            t-on-dropdown-item-selected="onFavoriteSelected"
+            >
+            <t t-set-slot="toggler">
+                <i class="mr-1" t-att-class="icon"/>
+                <span class="o_dropdown_title">Favorites</span>
+            </t>
+            <t t-set="currentGroup" t-value="null"/>
+            <t t-foreach="items" t-as="item" t-key="item.id or item.key">
+                <t t-if="currentGroup !== null and currentGroup !== item.groupNumber">
+                    <li role="separator" class="dropdown-divider"/>
+                </t>
+                <t t-if="item.type ==='favorite'">
+                    <DropdownItem class="o_menu_item dropdown-item"
+                        t-att-class="{ selected: item.isActive }"
+                        payload="{ itemId: item.id }"
+                        parentClosingMode="'none'"
+                    >
+                        <span class="d-flex p-0 align-items-center justify-content-between">
+                            <t t-esc="item.description"/>
+                            <i class="o_icon_right fa fa-trash-o"
+                                title="Delete item"
+                                t-on-click.stop="openConfirmationDialog(item.id)"
+                            />
+                        </span>
+                    </DropdownItem>
+                </t>
+                <t t-else="">
+                    <t t-component="item.Component" t-on-dropdown-item-selected.stop=""/>
+                </t>
+                <t t-set="currentGroup" t-value="item.groupNumber"/>
+            </t>
+        </Dropdown>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/search/filter_menu/custom_filter_item.js b/addons/web/static/src/search/filter_menu/custom_filter_item.js
new file mode 100644
index 00000000000..0c89c16d970
--- /dev/null
+++ b/addons/web/static/src/search/filter_menu/custom_filter_item.js
@@ -0,0 +1,317 @@
+/** @odoo-module **/
+
+import { DatePicker, DateTimePicker } from "@web/core/datepicker/datepicker";
+import { Domain } from "@web/core/domain";
+import { serializeDate, serializeDateTime } from "@web/core/l10n/dates";
+import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+
+const { Component, hooks } = owl;
+const { useState } = hooks;
+
+const { DateTime } = luxon;
+
+const formatters = registry.category("formatters");
+const parsers = registry.category("parsers");
+
+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",
+};
+
+// FilterMenu 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 parseField = (field, value, opts = {}) => {
+    if (FIELD_TYPES[field.type] === "char") {
+        return value;
+    }
+    const type = field.type === "id" ? "integer" : field.type;
+    const parse = parsers.contains(type) ? parsers.get(type) : (v) => v;
+    return parse(value, { field, ...opts });
+};
+
+const formatField = (field, value, opts = {}) => {
+    if (FIELD_TYPES[field.type] === "char") {
+        return value;
+    }
+    const type = field.type === "id" ? "integer" : field.type;
+    const format = formatters.contains(type) ? formatters.get(type) : (v) => v;
+    return format(value, { field, ...opts });
+};
+
+export class CustomFilterItem extends Component {
+    setup() {
+        this.conditions = useState([]);
+        // Format, filter and sort the fields props
+        this.fields = Object.values(this.env.searchModel.searchViewFields)
+            .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.OPERATORS = FIELD_OPERATORS;
+        this.FIELD_TYPES = FIELD_TYPES;
+
+        // Add first condition
+        this.addNewCondition();
+    }
+
+    //---------------------------------------------------------------------
+    // Protected
+    //---------------------------------------------------------------------
+
+    /**
+     * Populate the conditions list with a new condition having as properties:
+     * - the last condition or the first available field
+     * - the last condition or the first available operator
+     * - a null or empty array value
+     */
+    addNewCondition() {
+        const lastCondition = [...this.conditions].pop();
+        const condition = lastCondition
+            ? Object.assign({}, lastCondition)
+            : {
+                  field: 0,
+                  operator: 0,
+              };
+        this.setDefaultValue(condition);
+        this.conditions.push(condition);
+    }
+
+    /**
+     * @param {Object} field
+     * @returns {boolean}
+     */
+    validateField(field) {
+        return (
+            !field.deprecated && field.searchable && FIELD_TYPES[field.type] && field.name !== "id"
+        );
+    }
+
+    /**
+     * @param {Object} condition
+     */
+    setDefaultValue(condition) {
+        const field = this.fields[condition.field];
+        const genericType = FIELD_TYPES[field.type];
+        const operator = FIELD_OPERATORS[genericType][condition.operator];
+        // Logical value
+        switch (genericType) {
+            case "id":
+            case "number": {
+                condition.value = 0;
+                break;
+            }
+            case "date": {
+                condition.value = [DateTime.local()];
+                if (operator.symbol === "between") {
+                    condition.value.push(DateTime.local());
+                }
+                break;
+            }
+            case "datetime": {
+                condition.value = [DateTime.fromFormat("00:00:00", "hh:mm:ss")];
+                if (operator.symbol === "between") {
+                    condition.value.push(DateTime.fromFormat("23:59:59", "hh:mm:ss"));
+                }
+                break;
+            }
+            case "selection": {
+                const [firstValue] = this.fields[condition.field].selection[0];
+                condition.value = firstValue;
+                break;
+            }
+            default: {
+                condition.value = "";
+            }
+        }
+        // Displayed value (no needed for dates: they are handled by the DatePicker component)
+        if (!["date", "datetime"].includes(field.type)) {
+            condition.displayedValue = formatField(field, condition.value);
+        }
+    }
+
+    //---------------------------------------------------------------------
+    // Handlers
+    //---------------------------------------------------------------------
+
+    /**
+     * Convert all conditions to prefilters.
+     */
+    onApply() {
+        const preFilters = this.conditions.map((condition) => {
+            const field = this.fields[condition.field];
+            const genericType = this.FIELD_TYPES[field.type];
+            const operator = this.OPERATORS[genericType][condition.operator];
+            const descriptionArray = [field.string, operator.description.toString()];
+            const domainArray = [];
+            let domainValue;
+            // Field type specifics
+            if ("value" in operator) {
+                domainValue = [operator.value];
+                // No description to push here
+            } else if (["date", "datetime"].includes(genericType)) {
+                const serialize = genericType === "date" ? serializeDate : serializeDateTime;
+                domainValue = condition.value.map(serialize);
+                descriptionArray.push(
+                    `"${condition.value
+                        .map((val) => formatField(field, val, { timezone: true }))
+                        .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: new Domain(domainArray).toString(),
+                type: "filter",
+            };
+            return preFilter;
+        });
+
+        this.env.searchModel.createNewFilters(preFilters);
+
+        // remove conditions
+        while (this.conditions.length) {
+            this.conditions.pop();
+        }
+
+        this.addNewCondition();
+    }
+
+    /**
+     * @param {Object} condition
+     * @param {number} valueIndex
+     * @param {OwlEvent} ev
+     */
+    onDateChanged(condition, valueIndex, ev) {
+        condition.value[valueIndex] = ev.detail.date;
+    }
+
+    /**
+     * @param {Object} condition
+     * @param {Event} ev
+     */
+    onFieldSelect(condition, ev) {
+        Object.assign(condition, {
+            field: ev.target.selectedIndex,
+            operator: 0,
+        });
+        this.setDefaultValue(condition);
+    }
+
+    /**
+     * @param {Object} condition
+     * @param {Event} ev
+     */
+    onOperatorSelect(condition, ev) {
+        condition.operator = ev.target.selectedIndex;
+        this.setDefaultValue(condition);
+    }
+
+    /**
+     * @param {Object} condition
+     */
+    onRemoveCondition(conditionIndex) {
+        this.conditions.splice(conditionIndex, 1);
+    }
+
+    /**
+     * @param {Object} condition
+     * @param {Event} ev
+     */
+    onValueChange(condition, ev) {
+        if (!ev.target.value) {
+            return this.setDefaultValue(condition);
+        }
+        const field = this.fields[condition.field];
+        try {
+            const parsed = parseField(field, ev.target.value);
+            const formatted = formatField(field, parsed);
+            // Only updates values if it can be correctly parsed and formatted.
+            condition.value = parsed;
+            condition.displayedValue = formatted;
+        } catch (err) {
+            // Parsing error: nothing is done
+        }
+        ev.target.value = condition.displayedValue;
+    }
+}
+
+CustomFilterItem.components = { DatePicker, DateTimePicker };
+CustomFilterItem.template = "web.CustomFilterItem";
diff --git a/addons/web/static/src/search/filter_menu/custom_filter_item.xml b/addons/web/static/src/search/filter_menu/custom_filter_item.xml
new file mode 100644
index 00000000000..1eed5f24e19
--- /dev/null
+++ b/addons/web/static/src/search/filter_menu/custom_filter_item.xml
@@ -0,0 +1,112 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.CustomFilterItem" owl="1">
+        <Dropdown class="o_add_custom_filter_menu">
+            <t t-set-slot="toggler">
+                Add Custom Filter
+            </t>
+            <t t-foreach="conditions" t-as="condition" t-key="condition_index">
+                <li 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="onValueChange(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>
+                        <!-- @todo (DAM) I think that the localization should be better consisered below -->
+                        <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.displayedValue"
+                            t-on-change="onValueChange(condition)"
+                        />
+                        <input t-elif="['integer', 'id'].includes(fieldType)"
+                            class="o_input"
+                            step="1"
+                            type="number"
+                            t-att-value="condition.displayedValue"
+                            t-on-change="onValueChange(condition)"
+                        />
+                        <input t-else=""
+                            type="text"
+                            class="o_input"
+                            t-att-value="condition.displayedValue"
+                            t-on-change="onValueChange(condition)"
+                        />
+                    </span>
+                    <i t-if="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)"
+                    />
+                </li>
+            </t>
+            <DropdownItem class="px-3 py-2" t-att-class="{ o_dropdown_item: false }">
+                <button type="button"
+                    class="btn btn-primary o_apply_filter mr-2"
+                    t-on-click="onApply"
+                >
+                    Apply
+                </button>
+                <button type="button"
+                    class="btn btn-secondary o_add_condition"
+                    t-on-click.stop="addNewCondition"
+                >
+                    <i class="fa fa-plus-circle"/>
+                    <t>Add a condition</t>
+                </button>
+            </DropdownItem>
+        </Dropdown>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/search/filter_menu/filter_menu.js b/addons/web/static/src/search/filter_menu/filter_menu.js
new file mode 100644
index 00000000000..ea450285e57
--- /dev/null
+++ b/addons/web/static/src/search/filter_menu/filter_menu.js
@@ -0,0 +1,39 @@
+/** @odoo-module **/
+
+import { CustomFilterItem } from "./custom_filter_item";
+import { FACET_ICONS } from "../utils/misc";
+import { useBus } from "@web/core/utils/hooks";
+
+const { Component } = owl;
+
+export class FilterMenu extends Component {
+    setup() {
+        this.icon = FACET_ICONS.filter;
+
+        useBus(this.env.searchModel, "update", this.render);
+    }
+
+    /**
+     * @returns {Object[]}
+     */
+    get items() {
+        return this.env.searchModel.getSearchItems((searchItem) =>
+            ["filter", "dateFilter"].includes(searchItem.type)
+        );
+    }
+
+    /**
+     * @param {CustomEvent} ev
+     */
+    onFilterSelected(ev) {
+        const { itemId, optionId } = ev.detail.payload;
+        if (optionId) {
+            this.env.searchModel.toggleDateFilter(itemId, optionId);
+        } else {
+            this.env.searchModel.toggleSearchItem(itemId);
+        }
+    }
+}
+
+FilterMenu.components = { CustomFilterItem };
+FilterMenu.template = "web.FilterMenu";
diff --git a/addons/web/static/src/search/filter_menu/filter_menu.xml b/addons/web/static/src/search/filter_menu/filter_menu.xml
new file mode 100644
index 00000000000..f562887e5cf
--- /dev/null
+++ b/addons/web/static/src/search/filter_menu/filter_menu.xml
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.FilterMenu" owl="1">
+        <Dropdown class="o_filter_menu"
+            togglerClass="'btn btn-secondary'"
+            t-on-dropdown-item-selected="onFilterSelected"
+            >
+            <t t-set-slot="toggler">
+                <i class="mr-1" t-att-class="icon"/>
+                <span class="o_dropdown_title">Filters</span>
+            </t>
+            <t t-set="currentGroup" t-value="null"/>
+            <t t-foreach="items" t-as="item" t-key="item.id">
+                <t t-if="currentGroup !== null and currentGroup !== item.groupNumber">
+                    <li class="dropdown-divider" role="separator"/>
+                </t>
+                <t t-if="item.options">
+                    <Dropdown tag="'li'" togglerClass="'o_menu_item dropdown-item' + (item.isActive ? ' selected' : '')">
+                        <t t-set-slot="toggler">
+                            <t t-esc="item.description"/>
+                        </t>
+                        <t t-set="subGroup" t-value="null"/>
+                        <t t-foreach="item.options" t-as="option" t-key="option.id">
+                            <t t-if="subGroup !== null and subGroup !== option.groupNumber">
+                                <li class="dropdown-divider" role="separator"/>
+                            </t>
+                            <DropdownItem class="o_item_option dropdown-item"
+                                t-att-class="{ selected: option.isActive }"
+                                payload="{ itemId: item.id, optionId: option.id }"
+                                parentClosingMode="'none'"
+                                >
+                                <t t-esc="option.description"/>
+                            </DropdownItem>
+                            <t t-set="subGroup" t-value="option.groupNumber"/>
+                        </t>
+                    </Dropdown>
+                </t>
+                <t t-else="">
+                    <DropdownItem class="o_menu_item dropdown-item"
+                        t-att-class="{ selected: item.isActive }"
+                        payload="{ itemId: item.id }"
+                        parentClosingMode="'none'"
+                        >
+                        <t t-esc="item.description"/>
+                    </DropdownItem>
+                </t>
+                <t t-set="currentGroup" t-value="item.groupNumber"/>
+            </t>
+            <t t-if="items.length">
+                <li role="separator" class="dropdown-divider"/>
+            </t>
+            <CustomFilterItem t-on-dropdown-item-selected.stop=""/>
+        </Dropdown>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/search/group_by_menu/custom_group_by_item.js b/addons/web/static/src/search/group_by_menu/custom_group_by_item.js
new file mode 100644
index 00000000000..aa9659dbefc
--- /dev/null
+++ b/addons/web/static/src/search/group_by_menu/custom_group_by_item.js
@@ -0,0 +1,19 @@
+/** @odoo-module **/
+
+const { Component, hooks } = owl;
+const { useState } = hooks;
+
+export class CustomGroupByItem extends Component {
+    setup() {
+        this.state = useState({});
+        if (this.props.fields.length) {
+            this.state.fieldName = this.props.fields[0].name;
+        }
+    }
+
+    onApply() {
+        this.trigger("add-custom-group", { fieldName: this.state.fieldName });
+    }
+}
+
+CustomGroupByItem.template = "web.CustomGroupByItem";
diff --git a/addons/web/static/src/search/group_by_menu/custom_group_by_item.xml b/addons/web/static/src/search/group_by_menu/custom_group_by_item.xml
new file mode 100644
index 00000000000..b00d2f79393
--- /dev/null
+++ b/addons/web/static/src/search/group_by_menu/custom_group_by_item.xml
@@ -0,0 +1,24 @@
+<templates xml:space="preserve">
+
+    <t t-name="web.CustomGroupByItem" owl="1">
+        <Dropdown class="o_add_custom_group_menu">
+            <t t-set-slot="toggler">
+                Add Custom Group
+            </t>
+            <li class="px-3 py-2">
+                <select class="w-100 o_input" 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>
+            </li>
+            <DropdownItem class="px-3 py-2" t-att-class="{ o_dropdown_item: false }">
+                <button class="btn btn-primary w-100" t-on-click="onApply">
+                    Apply
+                </button>
+            </DropdownItem>
+        </Dropdown>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/search/group_by_menu/group_by_menu.js b/addons/web/static/src/search/group_by_menu/group_by_menu.js
new file mode 100644
index 00000000000..d9426bbbf32
--- /dev/null
+++ b/addons/web/static/src/search/group_by_menu/group_by_menu.js
@@ -0,0 +1,72 @@
+/** @odoo-module **/
+
+import { CustomGroupByItem } from "./custom_group_by_item";
+import { FACET_ICONS, GROUPABLE_TYPES } from "../utils/misc";
+import { Dropdown } from "@web/core/dropdown/dropdown";
+import { sortBy } from "@web/core/utils/arrays";
+import { useBus } from "@web/core/utils/hooks";
+
+const { Component } = owl;
+
+export class GroupByMenu extends Component {
+    setup() {
+        this.icon = FACET_ICONS.groupBy;
+        this.dropdownProps = Object.keys(this.props)
+            .filter((key) => key in Dropdown.props)
+            .reduce((obj, key) => ({ ...obj, [key]: this.props[key] }), {});
+        const fields = [];
+        for (const [fieldName, field] of Object.entries(this.env.searchModel.searchViewFields)) {
+            if (this.validateField(fieldName, field)) {
+                fields.push(Object.assign({ name: fieldName }, field));
+            }
+        }
+        this.fields = sortBy(fields, "string");
+
+        useBus(this.env.searchModel, "update", this.render);
+    }
+
+    /**
+     * @returns {Object[]}
+     */
+    get items() {
+        return this.env.searchModel.getSearchItems((searchItem) =>
+            ["groupBy", "dateGroupBy"].includes(searchItem.type)
+        );
+    }
+
+    /**
+     * @param {string} fieldName
+     * @param {Object} field
+     * @returns {boolean}
+     */
+    validateField(fieldName, field) {
+        const { sortable, type } = field;
+        return fieldName !== "id" && sortable && GROUPABLE_TYPES.includes(type);
+    }
+
+    /**
+     * @param {CustomEvent} ev
+     */
+    onGroupBySelected(ev) {
+        const { itemId, optionId } = ev.detail.payload;
+        if (optionId) {
+            this.env.searchModel.toggleDateGroupBy(itemId, optionId);
+        } else {
+            this.env.searchModel.toggleSearchItem(itemId);
+        }
+    }
+
+    /**
+     * @param {CustomEvent} ev
+     */
+    onAddCustomGroup(ev) {
+        const { fieldName } = ev.detail;
+        this.env.searchModel.createNewGroupBy(fieldName);
+    }
+}
+
+GroupByMenu.components = { CustomGroupByItem };
+GroupByMenu.template = "web.GroupByMenu";
+GroupByMenu.defaultProps = {
+    showActiveItems: true,
+};
diff --git a/addons/web/static/src/search/group_by_menu/group_by_menu.xml b/addons/web/static/src/search/group_by_menu/group_by_menu.xml
new file mode 100644
index 00000000000..384a15337a4
--- /dev/null
+++ b/addons/web/static/src/search/group_by_menu/group_by_menu.xml
@@ -0,0 +1,58 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.GroupByMenu" owl="1">
+        <Dropdown class="o_group_by_menu"
+            togglerClass="'btn btn-secondary'"
+            t-props="dropdownProps"
+            t-on-dropdown-item-selected="onGroupBySelected"
+            >
+            <t t-set-slot="toggler">
+                <i class="mr-1" t-att-class="icon"/>
+                <span class="o_dropdown_title">Group By</span>
+            </t>
+            <t t-set="currentGroup" t-value="null"/>
+            <t t-foreach="items" t-as="item" t-key="item.id">
+                <t t-if="currentGroup !== null and currentGroup !== item.groupNumber">
+                    <li class="dropdown-divider" role="separator"/>
+                </t>
+                <t t-if="item.options">
+                    <Dropdown tag="'li'" togglerClass="'o_menu_item dropdown-item' + (item.isActive ? ' selected' : '')">
+                        <t t-set-slot="toggler">
+                            <t t-esc="item.description"/>
+                        </t>
+                        <t t-set="subGroup" t-value="null"/>
+                        <t t-foreach="item.options" t-as="option" t-key="option.id">
+                            <t t-if="subGroup !== null and subGroup !== option.groupNumber">
+                                <li class="dropdown-divider" role="separator"/>
+                            </t>
+                            <DropdownItem class="o_item_option dropdown-item"
+                                t-att-class="{ selected: option.isActive }"
+                                payload="{ itemId: item.id, optionId: option.id }"
+                                parentClosingMode="'none'"
+                                >
+                                <t t-esc="option.description"/>
+                            </DropdownItem>
+                            <t t-set="subGroup" t-value="option.groupNumber"/>
+                        </t>
+                    </Dropdown>
+                </t>
+                <t t-else="">
+                    <DropdownItem class="o_menu_item dropdown-item"
+                        t-att-class="{ selected: item.isActive }"
+                        payload="{ itemId: item.id }"
+                        parentClosingMode="'none'"
+                        >
+                        <t t-esc="item.description"/>
+                    </DropdownItem>
+                </t>
+                <t t-set="currentGroup" t-value="item.groupNumber"/>
+            </t>
+            <t t-if="fields.length">
+                <li t-if="items.length" role="separator" class="dropdown-divider"/>
+                <CustomGroupByItem fields="fields"  t-on-dropdown-item-selected.stop="" t-on-add-custom-group="onAddCustomGroup"/>
+            </t>
+        </Dropdown>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/search/search_arch_parser.js b/addons/web/static/src/search/search_arch_parser.js
new file mode 100644
index 00000000000..56e672e3062
--- /dev/null
+++ b/addons/web/static/src/search/search_arch_parser.js
@@ -0,0 +1,353 @@
+/** @odoo-module **/
+
+import { makeContext } from "@web/core/context";
+import { _lt } from "@web/core/l10n/translation";
+import { evaluateExpr } from "@web/core/py_js/py";
+import { XMLParser } from "@web/core/utils/xml";
+import { DEFAULT_INTERVAL, DEFAULT_PERIOD } from "@web/search/utils/dates";
+
+const ALL = _lt("All");
+const DEFAULT_LIMIT = 200;
+const DEFAULT_VIEWS_WITH_SEARCH_PANEL = ["kanban", "list"];
+
+/**
+ * Returns the split 'group_by' key from the given context attribute.
+ * This helper accepts any invalid context or one that does not have
+ * a valid 'group_by' key, and falls back to an empty list.
+ * @param {string} context
+ * @returns {string[]}
+ */
+const getContextGroubBy = (context) => {
+    try {
+        return makeContext(context).group_by.split(":");
+    } catch (err) {
+        return [];
+    }
+};
+
+export class SearchArchParser extends XMLParser {
+    constructor(searchViewDescription, searchDefaults = {}, searchPanelDefaults = {}) {
+        super();
+
+        const { fields, irFilters, arch } = searchViewDescription;
+
+        this.fields = fields || {};
+        this.irFilters = irFilters || [];
+        this.arch = arch || "<search/>";
+
+        this.labels = [];
+        this.preSearchItems = [];
+        this.searchPanelInfo = {
+            className: "",
+            viewTypes: DEFAULT_VIEWS_WITH_SEARCH_PANEL,
+        };
+        this.sections = [];
+
+        this.searchDefaults = searchDefaults;
+        this.searchPanelDefaults = searchPanelDefaults;
+
+        this.currentGroup = [];
+        this.currentTag = null;
+        this.groupNumber = 0;
+        this.pregroupOfGroupBys = [];
+    }
+
+    parse() {
+        this.visitXML(this.arch, (node, visitChildren) => {
+            switch (node.tagName) {
+                case "search":
+                    this.visitSearch(node, visitChildren);
+                    break;
+                case "searchpanel":
+                    this.visitSearchPanel(node);
+                    break;
+                case "group":
+                    this.visitGroup(node, visitChildren);
+                    break;
+                case "separator":
+                    this.visitSeparator();
+                    break;
+                case "field":
+                    this.visitField(node);
+                    break;
+                case "filter":
+                    this.visitFilter(node);
+                    break;
+            }
+        });
+
+        return {
+            labels: this.labels,
+            preSearchItems: this.preSearchItems,
+            searchPanelInfo: this.searchPanelInfo,
+            sections: this.sections,
+        };
+    }
+
+    pushGroup(tag = null) {
+        if (this.currentGroup.length) {
+            if (this.currentTag && ["groupBy", "dateGroupBy"].includes(this.currentTag)) {
+                this.pregroupOfGroupBys.push(...this.currentGroup);
+            } else {
+                this.preSearchItems.push(this.currentGroup);
+            }
+        }
+        this.currentTag = tag;
+        this.currentGroup = [];
+        this.groupNumber++;
+    }
+
+    visitField(node) {
+        this.pushGroup("field");
+        const preField = { type: "field" };
+        if (node.hasAttribute("modifiers")) {
+            const modifiers = JSON.parse(node.getAttribute("modifiers"));
+            if (modifiers.invisible) {
+                preField.invisible = true;
+            }
+        }
+        if (node.hasAttribute("domain")) {
+            preField.domain = node.getAttribute("domain");
+        }
+        if (node.hasAttribute("filter_domain")) {
+            preField.filterDomain = node.getAttribute("filter_domain");
+        } else if (node.hasAttribute("operator")) {
+            preField.operator = node.getAttribute("operator");
+        }
+        if (node.hasAttribute("context")) {
+            preField.context = node.getAttribute("context");
+        }
+        if (node.hasAttribute("name")) {
+            const name = node.getAttribute("name");
+            preField.fieldName = name;
+            preField.fieldType = this.fields[name].type;
+            if (name in this.searchDefaults) {
+                preField.isDefault = true;
+                let value = this.searchDefaults[name];
+                value = Array.isArray(value) ? value[0] : value;
+                let operator = preField.operator;
+                if (!operator) {
+                    let type = preField.fieldType;
+                    if (node.hasAttribute("widget")) {
+                        type = node.getAttribute("widget");
+                    }
+                    // Note: many2one as a default filter will have a
+                    // numeric value instead of a string => we want "="
+                    // instead of "ilike".
+                    if (["char", "html", "many2many", "one2many", "text"].includes(type)) {
+                        operator = "ilike";
+                    } else {
+                        operator = "=";
+                    }
+                }
+                preField.defaultRank = -10;
+                const { fieldType, fieldName } = preField;
+                const { selection, context, relation } = this.fields[fieldName];
+                preField.defaultAutocompleteValue = { label: value, operator, value };
+                if (fieldType === "selection") {
+                    const option = selection.find((sel) => sel[0] === value);
+                    if (!option) {
+                        throw Error();
+                    }
+                    preField.defaultAutocompleteValue.label = option[1];
+                } else if (fieldType === "many2one") {
+                    this.labels.push((orm) => {
+                        orm.call(relation, "name_get", [value], { context }).then((results) => {
+                            preField.defaultAutocompleteValue.label = results[0][1];
+                        });
+                    });
+                }
+            }
+        } else {
+            throw Error(); //but normally this should have caught earlier with view arch validation server side
+        }
+        if (node.hasAttribute("string")) {
+            preField.description = node.getAttribute("string");
+        } else if (preField.fieldName) {
+            preField.description = this.fields[preField.fieldName].string;
+        } else {
+            preField.description = "Ω";
+        }
+        this.currentGroup.push(preField);
+    }
+
+    visitFilter(node) {
+        const preSearchItem = { type: "filter" };
+        if (node.hasAttribute("context")) {
+            const context = node.getAttribute("context");
+            const [fieldName, defaultInterval] = getContextGroubBy(context);
+            const groupByField = this.fields[fieldName];
+            if (groupByField) {
+                preSearchItem.type = "groupBy";
+                preSearchItem.fieldName = fieldName;
+                preSearchItem.fieldType = groupByField.type;
+                if (["date", "datetime"].includes(groupByField.type)) {
+                    preSearchItem.type = "dateGroupBy";
+                    preSearchItem.defaultIntervalId = defaultInterval || DEFAULT_INTERVAL;
+                }
+            } else {
+                preSearchItem.context = context;
+            }
+        }
+        if (preSearchItem.type !== this.currentTag) {
+            this.pushGroup(preSearchItem.type);
+        }
+        if (preSearchItem.type === "filter") {
+            if (node.hasAttribute("date")) {
+                const fieldName = node.getAttribute("date");
+                preSearchItem.type = "dateFilter";
+                preSearchItem.fieldName = fieldName;
+                preSearchItem.fieldType = this.fields[fieldName].type;
+                preSearchItem.defaultGeneratorId = DEFAULT_PERIOD;
+                if (node.hasAttribute("default_period")) {
+                    preSearchItem.defaultGeneratorId = node.getAttribute("default_period");
+                }
+            } else {
+                let stringRepr = "[]";
+                if (node.hasAttribute("domain")) {
+                    stringRepr = node.getAttribute("domain");
+                }
+                preSearchItem.domain = stringRepr;
+            }
+        }
+        if (node.hasAttribute("modifiers")) {
+            const modifiers = JSON.parse(node.getAttribute("modifiers"));
+            if (modifiers.invisible) {
+                preSearchItem.invisible = true;
+                let fieldName = preSearchItem.fieldName;
+                if (fieldName && !this.fields[fieldName]) {
+                    // In some case when a field is limited to specific groups
+                    // on the model, we need to ensure to discard related filter
+                    // as it may still be present in the view (in 'invisible' state)
+                    return;
+                }
+            }
+        }
+        preSearchItem.groupNumber = this.groupNumber;
+        if (node.hasAttribute("name")) {
+            const name = node.getAttribute("name");
+            if (name in this.searchDefaults) {
+                preSearchItem.isDefault = true;
+                if (["groupBy", "dateGroupBy"].includes(preSearchItem.type)) {
+                    const value = this.searchDefaults[name];
+                    preSearchItem.defaultRank = typeof value === "number" ? value : 100;
+                } else {
+                    preSearchItem.defaultRank = -5;
+                }
+            }
+        }
+        if (node.hasAttribute("string")) {
+            preSearchItem.description = node.getAttribute("string");
+        } else if (preSearchItem.fieldName) {
+            preSearchItem.description = this.fields[preSearchItem.fieldName].string;
+        } else if (node.hasAttribute("help")) {
+            preSearchItem.description = node.getAttribute("help");
+        } else if (node.hasAttribute("name")) {
+            preSearchItem.description = node.getAttribute("name");
+        } else {
+            preSearchItem.description = "Ω";
+        }
+        this.currentGroup.push(preSearchItem);
+    }
+
+    visitGroup(node, visitChildren) {
+        this.pushGroup();
+        visitChildren();
+        this.pushGroup();
+    }
+
+    visitSearch(node, visitChildren) {
+        visitChildren();
+        this.pushGroup();
+        if (this.pregroupOfGroupBys.length) {
+            this.preSearchItems.push(this.pregroupOfGroupBys);
+        }
+    }
+
+    visitSearchPanel(searchPanelNode) {
+        let hasCategoryWithCounters = false;
+        let hasFilterWithDomain = false;
+        let nextSectionId = 1;
+
+        if (searchPanelNode.hasAttribute("class")) {
+            this.searchPanelInfo.className = searchPanelNode.getAttribute("class");
+        }
+        if (searchPanelNode.hasAttribute("view_types")) {
+            this.searchPanelInfo.viewTypes = searchPanelNode.getAttribute("view_types").split(",");
+        }
+
+        for (const node of searchPanelNode.children) {
+            if (node.nodeType !== 1 || node.tagName !== "field") {
+                continue;
+            }
+            const isInvisible = Boolean(evaluateExpr(node.getAttribute("invisible") || "0"));
+            if (isInvisible) {
+                continue;
+            }
+            const attrs = {};
+            for (const attrName of node.getAttributeNames()) {
+                attrs[attrName] = node.getAttribute(attrName);
+            }
+
+            const type = attrs.select === "multi" ? "filter" : "category";
+            const section = {
+                color: attrs.color || null,
+                description: attrs.string || this.fields[attrs.name].string,
+                enableCounters: Boolean(evaluateExpr(attrs.enable_counters || "0")),
+                expand: Boolean(evaluateExpr(attrs.expand || "0")),
+                fieldName: attrs.name,
+                icon: attrs.icon || null,
+                id: nextSectionId++,
+                limit: evaluateExpr(attrs.limit || String(DEFAULT_LIMIT)),
+                type,
+                values: new Map(),
+            };
+            if (type === "category") {
+                section.activeValueId = this.searchPanelDefaults[attrs.name];
+                section.icon = section.icon || "fa-folder";
+                section.hierarchize = Boolean(evaluateExpr(attrs.hierarchize || "1"));
+                section.values.set(false, {
+                    childrenIds: [],
+                    display_name: ALL.toString(),
+                    id: false,
+                    bold: true,
+                    parentId: false,
+                });
+                hasCategoryWithCounters = hasCategoryWithCounters || section.enableCounters;
+            } else {
+                section.domain = attrs.domain || "[]";
+                section.groupBy = attrs.groupby || null;
+                section.icon = section.icon || "fa-filter";
+                hasFilterWithDomain = hasFilterWithDomain || section.domain !== "[]";
+            }
+            this.sections.push([section.id, section]);
+        }
+
+        /**
+         * Category counters are automatically disabled if a filter domain is found
+         * to avoid inconsistencies with the counters. The underlying problem could
+         * actually be solved by reworking the search panel and the way the
+         * counters are computed, though this is not the current priority
+         * considering the time it would take, hence this quick "fix".
+         */
+        if (hasCategoryWithCounters && hasFilterWithDomain) {
+            // If incompatibilities are found -> disables all category counters
+            for (const section of this.sections) {
+                if (section.type === "category") {
+                    section.enableCounters = false;
+                }
+            }
+            // ... and triggers a warning
+            console.warn(
+                "Warning: categories with counters are incompatible with filters having a domain attribute.",
+                "All category counters have been disabled to avoid inconsistencies."
+            );
+        }
+
+        return false; // we do not want to let the parser keep visiting children
+    }
+
+    visitSeparator() {
+        this.pushGroup();
+    }
+}
diff --git a/addons/web/static/src/search/search_bar/search_bar.js b/addons/web/static/src/search/search_bar/search_bar.js
new file mode 100644
index 00000000000..f238b4bfb81
--- /dev/null
+++ b/addons/web/static/src/search/search_bar/search_bar.js
@@ -0,0 +1,459 @@
+/** @odoo-module **/
+
+import { Domain } from "@web/core/domain";
+import { serializeDate, serializeDateTime } from "@web/core/l10n/dates";
+import { registry } from "@web/core/registry";
+import { KeepLast } from "@web/core/utils/concurrency";
+import { useAutofocus, useBus, useService } from "@web/core/utils/hooks";
+import { fuzzyTest } from "@web/core/utils/search";
+
+const { Component, hooks } = owl;
+const { useExternalListener, useRef, useState } = hooks;
+const parsers = registry.category("parsers");
+
+const CHAR_FIELDS = ["char", "html", "many2many", "many2one", "one2many", "text"];
+
+let nextItemId = 1;
+
+export class SearchBar extends Component {
+    setup() {
+        this.fields = this.env.searchModel.searchViewFields;
+        this.searchItems = this.env.searchModel.getSearchItems((f) => f.type === "field");
+
+        // core state
+        this.state = useState({
+            expanded: [],
+            focusedIndex: 0,
+            query: "",
+        });
+
+        // derived state
+        this.items = [];
+        this.subItems = {};
+
+        this.orm = useService("orm");
+
+        this.keepLast = new KeepLast();
+
+        this.focusOnUpdate = useAutofocus();
+
+        this.inputRef = useRef("search-input");
+
+        useBus(this.env.bus, "FOCUS-SEARCH-BAR", () => {
+            this.inputRef.el.focus();
+        });
+
+        useBus(this.env.searchModel, "update", this.render);
+
+        useExternalListener(window, "click", this.onWindowClick);
+        useExternalListener(window, "keydown", this.onWindowKeydown);
+    }
+
+    //---------------------------------------------------------------------
+    // Private
+    //---------------------------------------------------------------------
+
+    /**
+     * @param {Object} [options={}]
+     * @param {number[]} [options.expanded]
+     * @param {number} [options.focusedIndex]
+     * @param {string} [options.query]
+     * @param {Object[]} [options.subItems]
+     * @returns {Object[]}
+     */
+    async computeState(options = {}) {
+        const query = "query" in options ? options.query : this.state.query;
+        const expanded = "expanded" in options ? options.expanded : this.state.expanded;
+        const focusedIndex =
+            "focusedIndex" in options ? options.focusedIndex : this.state.focusedIndex;
+        const subItems = "subItems" in options ? options.subItems : this.subItems;
+
+        const tasks = [];
+        for (const id of expanded) {
+            if (!subItems[id]) {
+                tasks.push({ id, prom: this.computeSubItems(id, query) });
+            }
+        }
+
+        const prom = this.keepLast.add(Promise.all(tasks.map((task) => task.prom)));
+
+        if (tasks.length) {
+            const taskResults = await prom;
+            tasks.forEach((task, index) => {
+                subItems[task.id] = taskResults[index];
+            });
+        }
+
+        this.state.expanded = expanded;
+        this.state.query = query;
+        this.state.focusedIndex = focusedIndex;
+        this.subItems = subItems;
+
+        this.inputRef.el.value = query;
+
+        const trimmedQuery = this.state.query.trim();
+
+        this.items = [];
+
+        if (!trimmedQuery) {
+            return;
+        }
+
+        for (const searchItem of this.searchItems) {
+            const field = this.fields[searchItem.fieldName];
+            const type = field.type === "reference" ? "char" : field.type;
+            /** @todo do something with respect to localization (rtl) */
+            const preposition = this.env._t(["date", "datetime"].includes(type) ? "at" : "for");
+
+            if (["selection", "boolean"].includes(type)) {
+                const options = field.selection || [
+                    [true, this.env._t("Yes")],
+                    [false, this.env._t("No")],
+                ];
+                for (const [value, label] of options) {
+                    if (fuzzyTest(trimmedQuery.toLowerCase(), label.toLowerCase())) {
+                        this.items.push({
+                            id: nextItemId++,
+                            searchItemDescription: searchItem.description,
+                            preposition,
+                            searchItemId: searchItem.id,
+                            label,
+                            /** @todo check if searchItem.operator is fine (here and elsewhere) */
+                            operator: searchItem.operator || "=",
+                            value,
+                        });
+                    }
+                }
+                continue;
+            }
+
+            const parser = parsers.contains(type) ? parsers.get(type) : (str) => str;
+            let value;
+            try {
+                switch (type) {
+                    case "date": {
+                        value = serializeDate(parser(trimmedQuery, { timezone: false }));
+                        break;
+                    }
+                    case "datetime": {
+                        value = serializeDateTime(parser(trimmedQuery, { timezone: true }));
+                        break;
+                    }
+                    case "many2one": {
+                        value = trimmedQuery;
+                        break;
+                    }
+                    default: {
+                        value = parser(trimmedQuery);
+                    }
+                }
+            } catch (e) {
+                continue;
+            }
+
+            const item = {
+                id: nextItemId++,
+                searchItemDescription: searchItem.description,
+                preposition,
+                searchItemId: searchItem.id,
+                label: this.state.query,
+                operator: searchItem.operator || (CHAR_FIELDS.includes(type) ? "ilike" : "="),
+                value,
+            };
+
+            if (type === "many2one") {
+                item.isParent = true;
+                item.isExpanded = this.state.expanded.includes(item.searchItemId);
+            }
+
+            this.items.push(item);
+
+            if (item.isExpanded) {
+                this.items.push(...this.subItems[searchItem.id]);
+            }
+        }
+    }
+
+    /**
+     * @param {number} searchItemId
+     * @param {string} query
+     * @returns {Object[]}
+     */
+    async computeSubItems(searchItemId, query) {
+        const searchItem = this.searchItems.find((i) => i.id === searchItemId);
+        const field = this.fields[searchItem.fieldName];
+        let domain = [];
+        if (searchItem.domain) {
+            try {
+                domain = new Domain(searchItem.domain).toList();
+            } catch (e) {
+                // Pass
+            }
+        }
+        const options = await this.orm.call(field.relation, "name_search", domain, {
+            context: field.context,
+            limit: 8,
+            name: query.trim(),
+        });
+        let subItems = [];
+        if (options.length) {
+            const operator = searchItem.operator || "=";
+            for (const [value, label] of options) {
+                subItems.push({
+                    id: nextItemId++,
+                    isChild: true,
+                    searchItemId,
+                    value,
+                    label,
+                    operator,
+                });
+            }
+        } else {
+            subItems.push({
+                id: nextItemId++,
+                isChild: true,
+                searchItemId,
+                label: this.env._t("(no result)"),
+                unselectable: true,
+            });
+        }
+        return subItems;
+    }
+
+    /**
+     * @param {number} [index]
+     */
+    focusFacet(index) {
+        const facets = this.el.getElementsByClassName("o_searchview_facet");
+        if (facets.length) {
+            if (!index) {
+                facets[facets.length - 1].focus();
+            } else {
+                facets[index].focus();
+            }
+        }
+    }
+
+    /**
+     * @param {Object} facet
+     */
+    removeFacet(facet) {
+        this.env.searchModel.deactivateGroup(facet.groupId);
+        this.focusOnUpdate();
+    }
+
+    resetState() {
+        this.computeState({ expanded: [], focusedIndex: 0, query: "", subItems: [] });
+        this.focusOnUpdate();
+    }
+
+    /**
+     * @param {Object} item
+     */
+    selectItem(item) {
+        if (!item.unselectable) {
+            const { searchItemId, label, operator, value } = item;
+            this.env.searchModel.addAutoCompletionValues(searchItemId, { label, operator, value });
+        }
+        this.resetState();
+    }
+
+    /**
+     * @param {Object} item
+     * @param {boolean} shouldExpand
+     */
+    toggleItem(item, shouldExpand) {
+        const id = item.searchItemId;
+        const expanded = [...this.state.expanded];
+        const index = expanded.findIndex((id0) => id0 === id);
+        if (shouldExpand === true) {
+            if (index < 0) {
+                expanded.push(id);
+            }
+        } else {
+            if (index >= 0) {
+                expanded.splice(index, 1);
+            }
+        }
+        this.computeState({ expanded });
+    }
+
+    //---------------------------------------------------------------------
+    // Handlers
+    //---------------------------------------------------------------------
+
+    /**
+     * @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.removeFacet(facet);
+                break;
+            }
+        }
+    }
+
+    /**
+     * @param {Object} facet
+     */
+    onFacetRemove(facet) {
+        this.removeFacet(facet);
+    }
+
+    /**
+     * @param {number} index
+     */
+    onItemMousemove(focusedIndex) {
+        this.computeState({ focusedIndex }); /** @todo review that */
+        this.inputRef.el.focus();
+    }
+
+    /**
+     * @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 focusedItem = this.items[this.state.focusedIndex];
+        let focusedIndex;
+        switch (ev.key) {
+            case "ArrowDown":
+                ev.preventDefault();
+                if (this.items.length) {
+                    if (this.state.focusedIndex === this.items.length - 1) {
+                        focusedIndex = 0;
+                    } else {
+                        focusedIndex = this.state.focusedIndex + 1;
+                    }
+                } else {
+                    this.env.bus.trigger("FOCUS-VIEW");
+                }
+                break;
+            case "ArrowUp":
+                ev.preventDefault();
+                if (this.items.length) {
+                    if (this.state.focusedIndex === 0) {
+                        focusedIndex = this.items.length - 1;
+                    } else {
+                        focusedIndex = this.state.focusedIndex - 1;
+                    }
+                }
+                break;
+            case "ArrowLeft":
+                if (focusedItem && focusedItem.isParent && focusedItem.isExpanded) {
+                    ev.preventDefault();
+                    this.toggleItem(focusedItem, false);
+                } else if (focusedItem && focusedItem.isChild) {
+                    ev.preventDefault();
+                    focusedIndex = this.items.findIndex(
+                        (item) => item.isParent && item.searchItemId === focusedItem.searchItemId
+                    );
+                } else if (ev.target.selectionStart === 0) {
+                    // focus rightmost facet if any.
+                    this.focusFacet();
+                } else {
+                    // do nothing and navigate inside text
+                }
+                break;
+            case "ArrowRight":
+                if (ev.target.selectionStart === this.state.query.length) {
+                    if (focusedItem && focusedItem.isParent) {
+                        ev.preventDefault();
+                        if (focusedItem.isExpanded) {
+                            focusedIndex = this.state.focusedIndex + 1;
+                        } else {
+                            this.toggleItem(focusedItem, true);
+                        }
+                    } else if (ev.target.selectionStart === this.state.query.length) {
+                        // Priority 3: focus leftmost facet if any.
+                        this.focusFacet(0);
+                    }
+                }
+                break;
+            case "Backspace":
+                if (!this.state.query.length) {
+                    const facets = this.env.searchModel.facets;
+                    if (facets.length) {
+                        this.removeFacet(facets[facets.length - 1]);
+                    }
+                }
+                break;
+            case "Enter":
+                if (!this.state.query.length) {
+                    this.env.searchModel.search(); /** @todo keep this thing ?*/
+                    break;
+                } else if (focusedItem) {
+                    ev.preventDefault(); // keep the focus inside the search bar
+                    this.selectItem(focusedItem);
+                }
+                break;
+            case "Tab":
+                if (this.state.query.length && focusedItem) {
+                    ev.preventDefault(); // keep the focus inside the search bar
+                    this.selectItem(focusedItem);
+                }
+                break;
+            case "Escape":
+                this.resetState();
+                break;
+        }
+
+        if (focusedIndex !== undefined) {
+            this.computeState({ focusedIndex });
+        }
+    }
+
+    /**
+     * @param {InputEvent} ev
+     */
+    onSearchInput(ev) {
+        const query = ev.target.value;
+        if (query.trim()) {
+            this.computeState({ query, expanded: [], focusedIndex: 0, subItems: [] });
+        } else if (this.items.length) {
+            this.resetState();
+        }
+    }
+
+    /**
+     * @param {MouseEvent} ev
+     */
+    onWindowClick(ev) {
+        if (this.items.length && !this.el.contains(ev.target)) {
+            this.resetState();
+        }
+    }
+
+    /**
+     * @param {KeyboardEvent} ev
+     */
+    onWindowKeydown(ev) {
+        if (this.items.length && ev.key === "Escape") {
+            this.resetState();
+        }
+    }
+}
+
+SearchBar.template = "web.SearchBar";
diff --git a/addons/web/static/src/search/search_bar/search_bar.xml b/addons/web/static/src/search/search_bar/search_bar.xml
new file mode 100644
index 00000000000..4cd5e7525f5
--- /dev/null
+++ b/addons/web/static/src/search/search_bar/search_bar.xml
@@ -0,0 +1,98 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.SearchBar.Facets" owl="1">
+        <t t-foreach="env.searchModel.facets" t-as="facet" t-key="facet_index">
+            <div class="o_searchview_facet"
+                role="img"
+                aria-label="search"
+                tabindex="0"
+                t-on-keydown="onFacetKeydown(facet, facet_index)"
+                >
+                <t t-if="facet.icon">
+                    <span t-attf-class="o_searchview_facet_label {{ facet.icon }}"/>
+                </t>
+                <t t-else="">
+                    <span class="o_searchview_facet_label" t-esc="facet.title"/>
+                </t>
+                <div class="o_facet_values">
+                    <t t-foreach="facet.values" t-as="facetValue" t-key="facetValue_index">
+                        <t t-if="!facetValue_first">
+                            <span class="o_facet_values_sep" t-esc="facet.separator"/>
+                        </t>
+                        <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>
+        </t>
+    </t>
+
+    <t t-name="web.SearchBar.Input" owl="1">
+        <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"
+        />
+    </t>
+
+    <t t-name="web.SearchBar.Items" owl="1">
+        <ul class="o_dropdown_menu o_searchview_autocomplete dropdown-menu show" role="menu">
+            <t t-foreach="items" t-as="item" t-key="item.id">
+                <li class="o_menu_item"
+                    t-att-class="{ o_indent: item.isChild, o_selection_focus: item_index === state.focusedIndex}"
+                    t-att-id="item.id"
+                    t-on-click="selectItem(item)"
+                    t-on-mousemove="onItemMousemove(item_index)"
+                    >
+                    <t t-if="item.isParent">
+                        <a class="o_expand"
+                            href="#"
+                            t-on-click.stop.prevent="toggleItem(item, !item.isExpanded)"
+                            >
+                            <i t-attf-class="fa fa-caret-{{ item.isExpanded ? 'down' : 'right' }}"/>
+                        </a>
+                    </t>
+                    <a href="#" t-on-click.prevent="">
+                        <t t-if="item.isChild">
+                            <t t-esc="item.label"/>
+                        </t>
+                        <t t-else="">
+                            Search <em t-esc="item.searchItemDescription"/> <t t-esc="item.preposition"/>: <strong t-esc="item.label"/>
+                        </t>
+                    </a>
+                </li>
+            </t>
+        </ul>
+    </t>
+
+    <t t-name="web.SearchBar" owl="1">
+        <div class="o_cp_searchview" role="search">
+            <div class="o_searchview" role="search" aria-autocomplete="list">
+                <i class="o_searchview_icon fa fa-search"
+                    role="img"
+                    aria-label="Search..."
+                    title="Search..."
+                />
+                <div class="o_searchview_input_container">
+                    <t t-call="web.SearchBar.Facets"/>
+                    <t t-call="web.SearchBar.Input"/>
+                    <t t-if="items.length">
+                        <t t-call="web.SearchBar.Items"/>
+                    </t>
+                </div>
+            </div>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/search/search_model.js b/addons/web/static/src/search/search_model.js
new file mode 100644
index 00000000000..c6d69f4bb18
--- /dev/null
+++ b/addons/web/static/src/search/search_model.js
@@ -0,0 +1,2086 @@
+/** @odoo-module **/
+
+import { makeContext } from "@web/core/context";
+import { Domain } from "@web/core/domain";
+import { evaluateExpr } from "@web/core/py_js/py";
+import { sortBy } from "@web/core/utils/arrays";
+import { SearchArchParser } from "./search_arch_parser";
+import {
+    constructDateDomain,
+    DEFAULT_INTERVAL,
+    getComparisonOptions,
+    getIntervalOptions,
+    getPeriodOptions,
+    rankInterval,
+    yearSelected,
+} from "./utils/dates";
+import { FACET_ICONS } from "./utils/misc";
+import { deepCopy } from "@web/core/utils/objects";
+
+const { DateTime } = luxon;
+const EventBus = owl.core.EventBus;
+
+/** @todo rework doc */
+// interface SectionCommon { // check optional keys
+//     color: string;
+//     description: string;
+//     errorMsg: [string];
+//     enableCounters: boolean;
+//     expand: boolean;
+//     fieldName: string;
+//     icon: string;
+//     id: number;
+//     limit: number;
+//     values: Map<any,any>;
+//   }
+
+//   export interface Category extends SectionCommon {
+//     type: "category";
+//     hierarchize: boolean;
+//   }
+
+//   export interface Filter extends SectionCommon {
+//     type: "filter";
+//     domain: string;
+//     groupBy: string;
+//     groups: Map<any,any>;
+//   }
+
+//   export type Section = Category | Filter;
+
+//   export type SectionPredicate = (section: Section) => boolean;
+
+/**
+ * @param {Section} section
+ * @returns {boolean}
+ */
+function hasValues(section) {
+    const { errorMsg, type, values } = section;
+    if (errorMsg) {
+        return true;
+    }
+    switch (type) {
+        case "category": {
+            return values && values.size > 1; // false item ignored
+        }
+        case "filter": {
+            return values && values.size > 0;
+        }
+    }
+}
+
+/**
+ * Returns a serialised array of the given map with its values being the
+ * shallow copies of the original values.
+ * @param {Map<any, Object>} map
+ * @return {Array[]}
+ */
+function mapToArray(map) {
+    const result = [];
+    for (const [key, val] of map) {
+        const valCopy = Object.assign({}, val);
+        result.push([key, valCopy]);
+    }
+    return result;
+}
+/**
+ * @param {Array[]}
+ * @returns {Map<any, Object>} map
+ */
+function arraytoMap(array) {
+    return new Map(array);
+}
+
+/**
+ * @param {Function} op
+ * @param {Object} source
+ * @param {Object} target
+ */
+function execute(op, source, target) {
+    const {
+        query,
+        nextId,
+        nextGroupId,
+        nextGroupNumber,
+        searchItems,
+        searchPanelInfo,
+        sections,
+    } = source;
+
+    target.nextGroupId = nextGroupId;
+    target.nextGroupNumber = nextGroupNumber;
+    target.nextId = nextId;
+
+    target.query = query;
+    target.searchItems = searchItems;
+
+    target.searchPanelInfo = searchPanelInfo;
+
+    target.sections = op(sections);
+    for (const [, section] of target.sections) {
+        section.values = op(section.values);
+        if (section.groups) {
+            section.groups = op(section.groups);
+            for (const [, group] of section.groups) {
+                group.values = op(group.values);
+            }
+        }
+    }
+}
+
+//--------------------------------------------------------------------------
+// Global constants/variables
+//--------------------------------------------------------------------------
+
+const FAVORITE_PRIVATE_GROUP = 1;
+const FAVORITE_SHARED_GROUP = 2;
+
+export class SearchModel extends EventBus {
+    constructor(env, services) {
+        super();
+        this.env = env;
+        this.setup(services);
+    }
+    /**
+     * @override
+     */
+    setup(services) {
+        // services
+        const { orm, user, view } = services;
+        this.orm = orm;
+        this.userService = user;
+        this.viewService = view;
+
+        // used to manage search items related to date/datetime fields
+        this.referenceMoment = DateTime.local();
+        this.comparisonOptions = getComparisonOptions();
+        this.intervalOptions = getIntervalOptions();
+        this.optionGenerators = getPeriodOptions(this.referenceMoment);
+    }
+
+    /**
+     *
+     * @param {Object} config
+     * @param {string} config.resModel
+     *
+     * @param {string} [config.searchViewArch="<search/>"]
+     * @param {Object} [config.searchViewFields={}]
+     * @param {number|false} [config.searchViewId=false]
+     * @param {Object[]} [config.irFilters=[]]
+     *
+     * @param {Object} [config.action={id:false,views:[]}]
+     * @param {boolean} [config.activateFavorite=true]
+     * @param {Object} [config.context={}]
+     * @param {String} [config.displayName=""]
+     * @param {Array} [config.domain=[]]
+     * @param {Array} [config.domains]
+     * @param {Array} [config.dynamicFilters=[]]
+     * @param {string[]} [config.groupBy=[]]
+     * @param {boolean} [config.loadIrFilters=false]
+     * @param {boolean} [config.display.searchPanel=true]
+     * @param {string[]} [config.orderBy=[]]
+     * @param {string[]} [config.searchMenuTypes=["filter", "groupBy", "favorite"]]
+     * @param {Object} [config.state]
+     * @param {Object} [config.view={id:false}]
+     */
+    async load(config) {
+        const { resModel } = config;
+        if (!resModel) {
+            throw Error(`SearchPanel config should have a "resModel" key`);
+        }
+        this.resModel = resModel;
+
+        const { action, displayName, view } = config;
+
+        this.action = action || { id: false, views: [] };
+        this.displayName = displayName || "";
+        this.view = view || { id: false };
+
+        // used to avoid useless recomputations
+        this._context = null;
+        this._domain = null;
+        this._domains = null;
+        this._groupBy = null;
+        this._orderBy = null;
+
+        const { context, domain, domains, groupBy, orderBy } = config;
+
+        this.globalContext = context || {};
+        this.globalDomain = domain || [];
+        this.globalDomains = domains; // rework that part
+        this.globalGroupBy = groupBy || [];
+        this.globalOrderBy = orderBy || [];
+
+        this.searchMenuTypes = new Set(config.searchMenuTypes || ["filter", "groupBy", "favorite"]);
+
+        let { irFilters, loadIrFilters, searchViewArch, searchViewFields, searchViewId } = config;
+        const loadSearchView =
+            searchViewId !== undefined &&
+            (!searchViewArch || !searchViewFields || (!irFilters && loadIrFilters));
+
+        const searchViewDescription = {};
+        if (loadSearchView) {
+            const viewDescriptions = await this.viewService.loadViews(
+                {
+                    context: this.globalContext,
+                    resModel,
+                    views: [[searchViewId, "search"]],
+                },
+                {
+                    actionId: this.action.id,
+                    loadIrFilters: loadIrFilters || false,
+                }
+            );
+            Object.assign(searchViewDescription, viewDescriptions.search);
+        }
+        if (searchViewArch) {
+            searchViewDescription.arch = searchViewArch;
+        }
+        if (searchViewFields) {
+            searchViewDescription.fields = searchViewFields;
+        }
+        if (irFilters) {
+            searchViewDescription.irFilters = irFilters;
+        }
+        if (searchViewId !== undefined) {
+            searchViewDescription.viewId = searchViewId;
+        }
+
+        this.searchViewArch = searchViewDescription.arch || "<search/>";
+        this.searchViewFields = searchViewDescription.fields || {};
+        if (searchViewDescription.irFilters) {
+            this.irFilters = searchViewDescription.irFilters;
+        }
+        if (searchViewDescription.viewId !== undefined) {
+            this.searchViewId = searchViewDescription.viewId;
+        }
+
+        if (config.state) {
+            this._importState(config.state);
+            this.__legacyParseSearchPanelArchAnyway(searchViewDescription);
+            this.domainParts = {};
+            this.display = this._getDisplay(config.display);
+
+            return this._reloadSections();
+        }
+
+        this.blockNotification = true;
+
+        this.searchItems = {};
+        this.query = [];
+
+        this.nextId = 1;
+        this.nextGroupId = 1;
+        this.nextGroupNumber = 1;
+
+        // ... to rework (API for external domain, groupBy, facet)
+        this.domainParts = {}; // put in state?
+
+        const searchDefaults = {};
+        const searchPanelDefaults = {};
+
+        for (const key in this.globalContext) {
+            const defaultValue = this.globalContext[key];
+            const searchDefaultMatch = /^search_default_(.*)$/.exec(key);
+            if (searchDefaultMatch) {
+                if (defaultValue) {
+                    searchDefaults[searchDefaultMatch[1]] = defaultValue;
+                }
+                delete this.globalContext[key];
+                continue;
+            }
+            const searchPanelDefaultMatch = /^searchpanel_default_(.*)$/.exec(key);
+            if (searchPanelDefaultMatch) {
+                searchPanelDefaults[searchPanelDefaultMatch[1]] = defaultValue;
+                delete this.globalContext[key];
+            }
+        }
+
+        const parser = new SearchArchParser(
+            searchViewDescription,
+            searchDefaults,
+            searchPanelDefaults
+        );
+        const { labels, preSearchItems, searchPanelInfo, sections } = parser.parse();
+
+        this.searchPanelInfo = { ...searchPanelInfo, shouldReload: false };
+        this.display = this._getDisplay(config.display);
+
+        await Promise.all(labels.map((cb) => cb(this.orm)));
+
+        // prepare search items (populate this.searchItems)
+        for (const preGroup of preSearchItems || []) {
+            this._createGroupOfSearchItems(preGroup);
+        }
+        this.nextGroupNumber =
+            1 + Math.max(...Object.values(this.searchItems).map((i) => i.groupNumber || 0), 0);
+
+        const dateFilters = Object.values(this.searchItems).filter(
+            (searchElement) => searchElement.type === "dateFilter"
+        );
+        if (dateFilters.length) {
+            this._createGroupOfComparisons(dateFilters);
+        }
+
+        const { dynamicFilters } = config;
+        if (dynamicFilters) {
+            this._createGroupOfDynamicFilters(dynamicFilters);
+        }
+
+        const defaultFavoriteId = this._createGroupOfFavorites(this.irFilters || []);
+        const activateFavorite = "activateFavorite" in config ? config.activateFavorite : true;
+
+        // activate default search items (populate this.query)
+        this._activateDefaultSearchItems(activateFavorite ? defaultFavoriteId : null);
+
+        // prepare search panel sections
+
+        /** @type Map<number,Section> */
+        this.sections = new Map(sections || []);
+
+        if (this.display.searchPanel) {
+            /** @type DomainListRepr */
+            this.searchDomain = this._getDomain({ withSearchPanel: false });
+            this.sectionsPromise = this._fetchSections(this.categories, this.filters).then(() => {
+                for (const { fieldName, values } of this.filters) {
+                    const filterDefaults = searchPanelDefaults[fieldName] || [];
+                    for (const valueId of filterDefaults) {
+                        const value = values.get(valueId);
+                        if (value) {
+                            value.checked = true;
+                        }
+                    }
+                }
+            });
+            if (Object.keys(searchPanelDefaults).length || this._shouldWaitForData(false)) {
+                await this.sectionsPromise;
+            }
+        }
+
+        this.blockNotification = false;
+    }
+
+    /**
+     * @param {Object} [config={}]
+     * @param {Object} [config.context={}]
+     * @param {Array} [config.domain=[]]
+     * @param {Object[]} [config.domains]
+     * @param {string[]} [config.groupBy=[]]
+     * @param {string[]} [config.orderBy=[]]
+     */
+    async reload(config = {}) {
+        // used to avoid useless recomputations
+        this._context = null;
+        this._domain = null;
+        this._domains = null;
+        this._groupBy = null;
+        this._orderBy = null;
+
+        const { context, domain, domains, groupBy, orderBy } = config;
+
+        this.globalContext = context || {};
+        this.globalDomain = domain || [];
+        this.globalDomains = domains; // how to use this?
+        this.globalGroupBy = groupBy || [];
+        this.globalOrderBy = orderBy || [];
+
+        await this._reloadSections();
+    }
+
+    //--------------------------------------------------------------------------
+    // Getters
+    //--------------------------------------------------------------------------
+
+    /**
+     * @returns {Category[]}
+     */
+    get categories() {
+        return [...this.sections.values()].filter((s) => s.type === "category");
+    }
+
+    /**
+     * @returns {Object}
+     */
+    get comparison() {
+        return this._getComparison();
+    }
+
+    /**
+     * @returns {Context} should be imported from context.js?
+     */
+    get context() {
+        if (!this._context) {
+            this._context = this._getContext();
+        }
+        return this._context;
+    }
+
+    /**
+     * @returns {DomainListRepr} should be imported from domain.js?
+     */
+    get domain() {
+        if (!this._domain) {
+            this._domain = this._getDomain();
+        }
+        return this._domain;
+    }
+
+    get domains() {
+        if (!this._domains) {
+            if (this.globalDomains) {
+                this._domains = this.globalDomains;
+            } else {
+                const comparison = this._getComparison();
+                if (comparison) {
+                    const {
+                        fieldName,
+                        range,
+                        rangeDescription,
+                        comparisonRange,
+                        comparisonRangeDescription,
+                    } = comparison;
+                    this._domains = [
+                        {
+                            arrayRepr: Domain.and([this.domain, range]).toList(),
+                            description: rangeDescription,
+                        },
+                        {
+                            arrayRepr: Domain.and([this.domain, comparisonRange]).toList(),
+                            description: comparisonRangeDescription,
+                        },
+                    ];
+                    this._domains.fieldName = fieldName; // bad but for now okay
+                } else {
+                    this._domains = [{ arrayRepr: this.domain, description: null }];
+                }
+            }
+        }
+        return this._domains;
+    }
+
+    get facets() {
+        const isValidType = (type) =>
+            !["groupBy", "comparison"].includes(type) || this.searchMenuTypes.has(type);
+        const facets = [];
+        for (const facet of this._getFacets()) {
+            if (!isValidType(facet.type)) {
+                continue;
+            }
+            facets.push(facet);
+        }
+        return facets;
+    }
+
+    /**
+     * @returns {Filter[]}
+     */
+    get filters() {
+        return [...this.sections.values()].filter((s) => s.type === "filter");
+    }
+
+    /**
+     * @returns {string[]}
+     */
+    get groupBy() {
+        if (!this._groupBy) {
+            this._groupBy = this._getGroupBy();
+        }
+        return this._groupBy;
+    }
+
+    /**
+     * @returns {string[]}
+     */
+    get orderBy() {
+        if (!this._orderBy) {
+            this._orderBy = this._getOrderBy();
+        }
+        return this._orderBy;
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * Activate a filter of type 'field' with given filterId with
+     * 'autocompleteValues' value, label, and operator.
+     * @param {Object}
+     */
+    addAutoCompletionValues(searchItemId, autocompleteValue) {
+        const searchItem = this.searchItems[searchItemId];
+        if (searchItem.type !== "field") {
+            return;
+        }
+        const { label, value, operator } = autocompleteValue;
+        const queryElem = this.query.find(
+            (queryElem) =>
+                queryElem.searchItemId === searchItemId &&
+                "autocompleteValue" in queryElem &&
+                queryElem.autocompleteValue.value === value &&
+                queryElem.autocompleteValue.operator === operator
+        );
+        if (!queryElem) {
+            this.query.push({ searchItemId, autocompleteValue });
+        } else {
+            queryElem.autocompleteValue.label = label; // seems related to old stuff --> should be useless now
+        }
+        this._notify();
+    }
+
+    /**
+     * Remove all the query elements from query.
+     */
+    clearQuery() {
+        this.query = [];
+        this._notify();
+    }
+
+    /**
+     * 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} params
+     * @returns {Promise}
+     */
+    async createNewFavorite(params) {
+        const { preFavorite, irFilter } = this._getIrFilterDescription(params);
+        const serverSideId = await this.orm.call("ir.filters", "create_or_replace", [irFilter]);
+
+        // before the filter cache was cleared!
+        this.blockNotification = true;
+        this.clearQuery();
+        const favorite = {
+            ...preFavorite,
+            type: "favorite",
+            id: this.nextId,
+            groupId: this.nextGroupId,
+            groupNumber: preFavorite.userId ? FAVORITE_PRIVATE_GROUP : FAVORITE_SHARED_GROUP,
+            removable: true,
+            serverSideId,
+        };
+        this.searchItems[this.nextId] = favorite;
+        this.query.push({ searchItemId: this.nextId });
+        this.nextGroupId++;
+        this.nextId++;
+        this.blockNotification = false;
+        this._notify();
+    }
+
+    /**
+     * Create new search items of type 'filter' and activate them.
+     * A new group containing only those filters is created.
+     */
+    createNewFilters(prefilters) {
+        if (!prefilters.length) {
+            return [];
+        }
+        prefilters.forEach((preFilter) => {
+            const filter = Object.assign(preFilter, {
+                groupId: this.nextGroupId,
+                groupNumber: this.nextGroupNumber,
+                id: this.nextId,
+                type: "filter",
+            });
+            this.searchItems[this.nextId] = filter;
+            this.query.push({ searchItemId: this.nextId });
+            this.nextId++;
+        });
+        this.nextGroupId++;
+        this.nextGroupNumber++;
+        this._notify();
+    }
+
+    /**
+     * Create a new filter of type 'groupBy' or 'dateGroupBy' and activate it.
+     * It is added to the unique group of groupbys.
+     * @param {string} fieldName
+     */
+    createNewGroupBy(fieldName) {
+        const field = this.searchViewFields[fieldName];
+        const { string, type: fieldType } = field;
+        const firstGroupBy = Object.values(this.searchItems).find((f) => f.type === "groupBy");
+        const preSearchItem = {
+            description: string || fieldName,
+            fieldName,
+            fieldType,
+            groupId: firstGroupBy ? firstGroupBy.groupId : this.nextGroupId++,
+            groupNumber: this.nextGroupNumber,
+            id: this.nextId,
+            custom: true,
+        };
+        if (["date", "datetime"].includes(fieldType)) {
+            this.searchItems[this.nextId] = Object.assign(
+                { type: "dateGroupBy", defaultIntervalId: DEFAULT_INTERVAL },
+                preSearchItem
+            );
+            this.toggleDateGroupBy(this.nextId);
+        } else {
+            this.searchItems[this.nextId] = Object.assign({ type: "groupBy" }, preSearchItem);
+            this.toggleSearchItem(this.nextId);
+        }
+        this.nextGroupNumber++; // FIXME: with this, all subsequent added groups are in different groups (visually)
+        this.nextId++;
+        this._notify();
+    }
+
+    /**
+     * Deactivate a group with provided groupId, i.e. delete the query elements
+     * with given groupId.
+     */
+    deactivateGroup(groupId) {
+        this.query = this.query.filter((queryElem) => {
+            const searchItem = this.searchItems[queryElem.searchItemId];
+            return searchItem.groupId !== groupId;
+        });
+
+        for (const partName in this.domainParts) {
+            const part = this.domainParts[partName];
+            if (part.groupId === groupId) {
+                this.setDomainParts({ [partName]: null });
+            }
+        }
+        this._checkComparisonStatus();
+        this._notify();
+    }
+
+    /**
+     * Delete a filter of type 'favorite' with given this.nextId server side and
+     * in control panel model. Of course the filter is also removed
+     * from the search query.
+     */
+    async deleteFavorite(favoriteId) {
+        const searchItem = this.searchItems[favoriteId];
+        if (searchItem.type !== "favorite") {
+            return;
+        }
+        const { serverSideId } = searchItem;
+        await this.orm.unlink("ir.filters", [
+            serverSideId,
+        ]); /** @todo we should maybe expose some method in view_manager: before, the filter cache was invalidated */
+        const index = this.query.findIndex((queryElem) => queryElem.searchItemId === favoriteId);
+        delete this.searchItems[favoriteId];
+        if (index >= 0) {
+            this.query.splice(index, 1);
+        }
+        this._notify();
+    }
+
+    /**
+     * @returns {Object}
+     */
+    exportState() {
+        const state = {};
+        execute(mapToArray, this, state);
+        return state;
+    }
+
+    getDomainPart(partName) {
+        let part = this.domainParts[partName] || null;
+        if (part) {
+            return deepCopy(part);
+        }
+        return part;
+    }
+
+    getDomainParts() {
+        const copy = deepCopy(this.domainParts);
+        return sortBy(Object.values(copy), (part) => part.groupId);
+    }
+
+    getIrFilterValues(params) {
+        const { irFilter } = this._getIrFilterDescription(params);
+        return irFilter;
+    }
+
+    /**
+     * Return an array containing enriched copies of all searchElements or of those
+     * satifying the given predicate if any
+     * @param {Function} [predicate]
+     * @returns {Object[]}
+     */
+    getSearchItems(predicate) {
+        const searchItems = [];
+        Object.values(this.searchItems).forEach((searchItem) => {
+            if (
+                (!("invisible" in searchItem) || !searchItem.invisible) &&
+                (!predicate || predicate(searchItem))
+            ) {
+                const enrichedSearchitem = this._enrichItem(searchItem);
+                if (enrichedSearchitem) {
+                    searchItems.push(enrichedSearchitem);
+                }
+            }
+        });
+        if (searchItems.some((f) => f.type === "favorite")) {
+            searchItems.sort((f1, f2) => f1.groupNumber - f2.groupNumber);
+        }
+        return searchItems;
+    }
+
+    /**
+     * Returns a sorted list of a copy of all sections. This list can be
+     * filtered by a given predicate.
+     * @param {SectionPredicate} [predicate] used to determine
+     *      which subsets of sections is wanted
+     * @returns {Section[]}
+     */
+    getSections(predicate) {
+        let sections = [...this.sections.values()].map((section) =>
+            Object.assign({}, section, { empty: !hasValues(section) })
+        );
+        if (predicate) {
+            sections = sections.filter(predicate);
+        }
+        return sections.sort((s1, s2) => s1.index - s2.index);
+    }
+
+    search() {
+        this.trigger("update");
+    }
+
+    setDomainParts(parts) {
+        for (const key in parts) {
+            const val = parts[key];
+
+            if (!val) {
+                delete this.domainParts[key];
+            } else {
+                this.domainParts[key] = val;
+                val.groupId = this.nextGroupId++;
+            }
+        }
+        this._notify();
+    }
+
+    /**
+     * Set the active value id of a given category.
+     * @param {number} sectionId
+     * @param {number} valueId
+     */
+    toggleCategoryValue(sectionId, valueId) {
+        const category = this.sections.get(sectionId);
+        category.activeValueId = valueId;
+        this._notify();
+    }
+
+    /**
+     * Toggle a filter value of a given section. The value will be set
+     * to "forceTo" if provided, else it will be its own opposed value.
+     * @param {number} sectionId
+     * @param {number[]} valueIds
+     * @param {boolean} [forceTo=null]
+     */
+    toggleFilterValues(sectionId, valueIds, forceTo = null) {
+        const filter = this.sections.get(sectionId);
+        for (const valueId of valueIds) {
+            const value = filter.values.get(valueId);
+            value.checked = forceTo === null ? !value.checked : forceTo;
+        }
+        this._notify();
+    }
+
+    /**
+     * Activate or deactivate the simple filter with given filterId, i.e.
+     * add or remove a corresponding query element.
+     */
+    toggleSearchItem(searchItemId) {
+        const searchItem = this.searchItems[searchItemId];
+        switch (searchItem.type) {
+            case "dateFilter":
+            case "dateGroupBy":
+            case "field": {
+                return;
+            }
+        }
+        const index = this.query.findIndex((queryElem) => queryElem.searchItemId === searchItemId);
+        if (index >= 0) {
+            this.query.splice(index, 1);
+        } else {
+            if (searchItem.type === "favorite") {
+                this.query = [];
+            } else if (searchItem.type === "comparison") {
+                // make sure only one comparison can be active
+                this.query = this.query.filter((queryElem) => {
+                    const { type } = this.searchItems[queryElem.searchItemId];
+                    return type !== "comparison";
+                });
+            }
+            this.query.push({ searchItemId });
+        }
+        this._notify();
+    }
+
+    /**
+     * Used to toggle a query element.
+     * This can impact the query in various form, e.g. add/remove other query elements
+     * in case the filter is of type 'filter'.
+     */
+    toggleDateFilter(searchItemId, generatorId) {
+        const searchItem = this.searchItems[searchItemId];
+        if (searchItem.type !== "dateFilter") {
+            return;
+        }
+        generatorId = generatorId || searchItem.defaultGeneratorId;
+        const index = this.query.findIndex(
+            (queryElem) =>
+                queryElem.searchItemId === searchItemId &&
+                "generatorId" in queryElem &&
+                queryElem.generatorId === generatorId
+        );
+        if (index >= 0) {
+            this.query.splice(index, 1);
+            if (!yearSelected(this._getSelectedGeneratorIds(searchItemId))) {
+                // This is the case where generatorId 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.query = this.query.filter(
+                    (queryElem) => queryElem.searchItemId !== searchItemId
+                );
+            }
+        } else {
+            this.query.push({ searchItemId, generatorId });
+            if (!yearSelected(this._getSelectedGeneratorIds(searchItemId))) {
+                // Here we add 'this_year' as options if no option of type
+                // year is already selected.
+                const { defaultYearId } = this.optionGenerators.find((o) => o.id === generatorId);
+                this.query.push({ searchItemId, generatorId: defaultYearId });
+            }
+        }
+        this._checkComparisonStatus();
+        this._notify();
+    }
+
+    toggleDateGroupBy(searchItemId, intervalId) {
+        const searchItem = this.searchItems[searchItemId];
+        if (searchItem.type !== "dateGroupBy") {
+            return;
+        }
+        intervalId = intervalId || searchItem.defaultIntervalId;
+        const index = this.query.findIndex(
+            (queryElem) =>
+                queryElem.searchItemId === searchItemId &&
+                "intervalId" in queryElem &&
+                queryElem.intervalId === intervalId
+        );
+        if (index >= 0) {
+            this.query.splice(index, 1);
+        } else {
+            this.query.push({ searchItemId, intervalId });
+        }
+        this._notify();
+    }
+
+    //--------------------------------------------------------------------------
+    // Private methods
+    //--------------------------------------------------------------------------
+
+    /**
+     * Activate the default favorite (if any) or all default filters.
+     */
+    _activateDefaultSearchItems(defaultFavoriteId) {
+        if (defaultFavoriteId) {
+            // Activate default favorite
+            this.toggleSearchItem(defaultFavoriteId);
+        } else {
+            // Activate default filters
+            Object.values(this.searchItems)
+                .filter((f) => f.isDefault && f.type !== "favorite")
+                .sort((f1, f2) => (f1.defaultRank || 100) - (f2.defaultRank || 100))
+                .forEach((f) => {
+                    if (f.type === "dateFilter") {
+                        this.toggleDateFilter(f.id);
+                    } else if (f.type === "dateGroupBy") {
+                        this.toggleDateGroupBy(f.id);
+                    } else if (f.type === "field") {
+                        this.addAutoCompletionValues(f.id, f.defaultAutocompleteValue);
+                    } else {
+                        this.toggleSearchItem(f.id);
+                    }
+                });
+        }
+    }
+
+    /**
+     * If a comparison is active, check if it should become inactive.
+     * The comparison should become inactive if the corresponding date filter has become
+     * inactive.
+     */
+    _checkComparisonStatus() {
+        const activeComparison = this._getActiveComparison();
+        if (!activeComparison) {
+            return;
+        }
+        const { dateFilterId, id } = activeComparison;
+        const dateFilterIsActive = this.query.some(
+            (queryElem) => queryElem.searchItemId === dateFilterId
+        );
+        if (!dateFilterIsActive) {
+            this.query = this.query.filter((queryElem) => queryElem.searchItemId !== id);
+        }
+    }
+
+    /**
+     * @param {string} sectionId
+     * @param {Object} result
+     */
+    _createCategoryTree(sectionId, result) {
+        const category = this.sections.get(sectionId);
+
+        let { error_msg, parent_field: parentField, values } = result;
+        if (error_msg) {
+            category.errorMsg = error_msg;
+            values = [];
+        }
+        if (category.hierarchize) {
+            category.parentField = parentField;
+        }
+        for (const value of values) {
+            category.values.set(
+                value.id,
+                Object.assign({}, value, {
+                    childrenIds: [],
+                    parentId: value[parentField] || false,
+                })
+            );
+        }
+        for (const value of values) {
+            const { parentId } = category.values.get(value.id);
+            if (parentId && category.values.has(parentId)) {
+                category.values.get(parentId).childrenIds.push(value.id);
+            }
+        }
+        // collect rootIds
+        category.rootIds = [false];
+        for (const value of values) {
+            const { parentId } = category.values.get(value.id);
+            if (!parentId) {
+                category.rootIds.push(value.id);
+            }
+        }
+        // Set active value from context
+        const valueIds = [false, ...values.map((val) => val.id)];
+        this._ensureCategoryValue(category, valueIds);
+    }
+
+    /**
+     * @param {string} sectionId
+     * @param {Object} result
+     */
+    _createFilterTree(sectionId, result) {
+        const filter = this.sections.get(sectionId);
+
+        let { error_msg, values } = result;
+        if (error_msg) {
+            filter.errorMsg = error_msg;
+            values = [];
+        }
+
+        // restore checked property
+        values.forEach((value) => {
+            const oldValue = filter.values.get(value.id);
+            value.checked = oldValue ? oldValue.checked : false;
+        });
+
+        filter.values = new Map();
+        const groupIds = [];
+        if (filter.groupBy) {
+            const groups = new Map();
+            for (const value of values) {
+                const groupId = value.group_id;
+                if (!groups.has(groupId)) {
+                    if (groupId) {
+                        groupIds.push(groupId);
+                    }
+                    groups.set(groupId, {
+                        id: groupId,
+                        name: value.group_name,
+                        values: new Map(),
+                        tooltip: value.group_tooltip,
+                        sequence: value.group_sequence,
+                        hex_color: value.group_hex_color,
+                    });
+                    // restore former checked state
+                    const oldGroup = filter.groups && filter.groups.get(groupId);
+                    groups.get(groupId).state = (oldGroup && oldGroup.state) || false;
+                }
+                groups.get(groupId).values.set(value.id, value);
+            }
+            filter.groups = groups;
+            filter.sortedGroupIds = sortBy(
+                groupIds,
+                (id) => groups.get(id).sequence || groups.get(id).name
+            );
+            for (const group of filter.groups.values()) {
+                for (const [valueId, value] of group.values) {
+                    filter.values.set(valueId, value);
+                }
+            }
+        } else {
+            for (const value of values) {
+                filter.values.set(value.id, value);
+            }
+        }
+    }
+
+    /**
+     * Starting from the array of date filters, create the filters of type
+     * 'comparison'.
+     * @param {Object[]} dateFilters
+     */
+    _createGroupOfComparisons(dateFilters) {
+        const preSearchItem = [];
+        for (const dateFilter of dateFilters) {
+            for (const comparisonOption of this.comparisonOptions) {
+                const { id: dateFilterId, description } = dateFilter;
+                const preFilter = {
+                    type: "comparison",
+                    comparisonOptionId: comparisonOption.id,
+                    description: `${description}: ${comparisonOption.description}`,
+                    dateFilterId,
+                };
+                preSearchItem.push(preFilter);
+            }
+        }
+        this._createGroupOfSearchItems(preSearchItem);
+    }
+
+    /**
+     * Add filters of type 'filter' determined by the key array dynamicFilters.
+     */
+    _createGroupOfDynamicFilters(dynamicFilters) {
+        const pregroup = dynamicFilters.map((filter) => {
+            return {
+                groupNumber: this.nextGroupNumber,
+                description: filter.description,
+                domain: filter.domain,
+                isDefault: true,
+                type: "filter",
+            };
+        });
+        this.nextGroupNumber++;
+        this._createGroupOfSearchItems(pregroup);
+    }
+
+    /**
+     * Add filters of type 'favorite' determined by the array this.favoriteFilters.
+     */
+    _createGroupOfFavorites(irFilters) {
+        let defaultFavoriteId = null;
+        irFilters.forEach((irFilter) => {
+            const favorite = this._irFilterToFavorite(irFilter);
+            this._createGroupOfSearchItems([favorite]);
+            if (favorite.isDefault) {
+                defaultFavoriteId = favorite.id;
+            }
+        });
+        return defaultFavoriteId;
+    }
+
+    /**
+     * Using a list (a 'pregroup') of 'prefilters', create new filters in `searchItems`
+     * for each prefilter. The new filters belong to a same new group.
+     */
+    _createGroupOfSearchItems(pregroup) {
+        pregroup.forEach((preSearchItem) => {
+            const searchItem = Object.assign(preSearchItem, {
+                groupId: this.nextGroupId,
+                id: this.nextId,
+            });
+            this.searchItems[this.nextId] = searchItem;
+            this.nextId++;
+        });
+        this.nextGroupId++;
+    }
+
+    /**
+     * Returns null or 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. The value null is returned if the filter should not appear
+     * for some reason.
+     */
+    _enrichItem(searchItem) {
+        const queryElements = this.query.filter(
+            (queryElem) => queryElem.searchItemId === searchItem.id
+        );
+        const isActive = Boolean(queryElements.length);
+        const enrichSearchItem = Object.assign({ isActive }, searchItem);
+        function _enrichOptions(options, selectedIds) {
+            return options.map((o) => {
+                const { description, id, groupNumber } = o;
+                const isActive = selectedIds.some((optionId) => optionId === id);
+                return { description, id, groupNumber, isActive };
+            });
+        }
+        switch (searchItem.type) {
+            case "comparison": {
+                const { dateFilterId } = searchItem;
+                const dateFilterIsActive = this.query.some(
+                    (queryElem) => queryElem.searchItemId === dateFilterId
+                );
+                if (!dateFilterIsActive) {
+                    return null;
+                }
+                break;
+            }
+            case "dateFilter":
+                enrichSearchItem.options = _enrichOptions(
+                    this.optionGenerators,
+                    queryElements.map((queryElem) => queryElem.generatorId)
+                );
+                break;
+            case "dateGroupBy":
+                enrichSearchItem.options = _enrichOptions(
+                    this.intervalOptions,
+                    queryElements.map((queryElem) => queryElem.intervalId)
+                );
+                break;
+            case "field":
+                enrichSearchItem.autocompleteValues = queryElements.map(
+                    (queryElem) => queryElem.autocompleteValue
+                );
+                break;
+        }
+        return enrichSearchItem;
+    }
+
+    /**
+     * Ensures that the active value of a category is one of its own
+     * existing values.
+     * @param {Category} category
+     * @param {number[]} valueIds
+     */
+    _ensureCategoryValue(category, valueIds) {
+        if (!valueIds.includes(category.activeValueId)) {
+            category.activeValueId = valueIds[0];
+        }
+    }
+
+    /**
+     * Fetches values for each category at startup. At reload a category is
+     * only fetched if needed.
+     * @param {Category[]} categories
+     * @returns {Promise} resolved when all categories have been fetched
+     */
+    async _fetchCategories(categories) {
+        const filterDomain = this._getFilterDomain();
+        const searchDomain = this.searchDomain;
+        await Promise.all(
+            categories.map(async (category) => {
+                const result = await this.orm.call(
+                    this.resModel,
+                    "search_panel_select_range",
+                    [category.fieldName],
+                    {
+                        category_domain: this._getCategoryDomain(category.id),
+                        enable_counters: category.enableCounters,
+                        expand: category.expand,
+                        filter_domain: filterDomain,
+                        hierarchize: category.hierarchize,
+                        limit: category.limit,
+                        search_domain: searchDomain,
+                    }
+                );
+                this._createCategoryTree(category.id, result);
+            })
+        );
+    }
+
+    /**
+     * Fetches values for each filter. This is done at startup and at each
+     * reload if needed.
+     * @param {Filter[]} filters
+     * @returns {Promise} resolved when all filters have been fetched
+     */
+    async _fetchFilters(filters) {
+        const evalContext = {};
+        for (const category of this.categories) {
+            evalContext[category.fieldName] = category.activeValueId;
+        }
+        const categoryDomain = this._getCategoryDomain();
+        const searchDomain = this.searchDomain;
+        await Promise.all(
+            filters.map(async (filter) => {
+                const result = await this.orm.call(
+                    this.resModel,
+                    "search_panel_select_multi_range",
+                    [filter.fieldName],
+                    {
+                        category_domain: categoryDomain,
+                        comodel_domain: new Domain(filter.domain).toList(evalContext),
+                        enable_counters: filter.enableCounters,
+                        filter_domain: this._getFilterDomain(filter.id),
+                        expand: filter.expand,
+                        group_by: filter.groupBy || false,
+                        group_domain: this._getGroupDomain(filter),
+                        limit: filter.limit,
+                        search_domain: searchDomain,
+                    }
+                );
+                this._createFilterTree(filter.id, result);
+            })
+        );
+    }
+
+    /**
+     * Fetches values for the given categories and filters.
+     * @param {Category[]} categoriesToLoad
+     * @param {Filter[]} filtersToLoad
+     * @returns {Promise} resolved when all categories have been fetched
+     */
+    async _fetchSections(categoriesToLoad, filtersToLoad) {
+        await this._fetchCategories(categoriesToLoad);
+        await this._fetchFilters(filtersToLoad);
+    }
+
+    _getActiveComparison() {
+        for (const queryElem of this.query) {
+            const searchItem = this.searchItems[queryElem.searchItemId];
+            if (searchItem.type === "comparison") {
+                return searchItem;
+            }
+        }
+        return null;
+    }
+
+    /**
+     * Computes and returns the domain based on the current active
+     * categories. If "excludedCategoryId" is provided, the category with
+     * that id is not taken into account in the domain computation.
+     * @param {string} [excludedCategoryId]
+     * @returns {Array[]}
+     */
+    _getCategoryDomain(excludedCategoryId) {
+        const domain = [];
+        for (const category of this.categories) {
+            if (category.id === excludedCategoryId || !category.activeValueId) {
+                continue;
+            }
+            const field = this.searchViewFields[category.fieldName];
+            const operator = field.type === "many2one" && category.parentField ? "child_of" : "=";
+            domain.push([category.fieldName, operator, category.activeValueId]);
+        }
+        return domain;
+    }
+
+    _getComparison() {
+        let searchItem = null;
+        for (const queryElem of this.query.slice().reverse()) {
+            const item = this.searchItems[queryElem.searchItemId];
+            if (item.type === "comparison") {
+                searchItem = item;
+                break;
+            } else if (item.type === "favorite" && item.comparison) {
+                searchItem = item;
+                break;
+            }
+        }
+        if (!searchItem) {
+            return null;
+        } else if (searchItem.type === "favorite") {
+            return searchItem.comparison;
+        }
+        const { dateFilterId, comparisonOptionId } = searchItem;
+        const { fieldName, fieldType, description: dateFilterDescription } = this.searchItems[
+            dateFilterId
+        ];
+        const selectedGeneratorIds = this._getSelectedGeneratorIds(dateFilterId);
+        // compute range and range description
+        const { domain: range, description: rangeDescription } = constructDateDomain(
+            this.referenceMoment,
+            fieldName,
+            fieldType,
+            selectedGeneratorIds
+        );
+        // compute comparisonRange and comparisonRange description
+        const {
+            domain: comparisonRange,
+            description: comparisonRangeDescription,
+        } = constructDateDomain(
+            this.referenceMoment,
+            fieldName,
+            fieldType,
+            selectedGeneratorIds,
+            comparisonOptionId
+        );
+        return {
+            comparisonId: comparisonOptionId,
+            fieldName,
+            fieldDescription: dateFilterDescription,
+            range: range.toList(),
+            rangeDescription,
+            comparisonRange: comparisonRange.toList(),
+            comparisonRangeDescription,
+        };
+    }
+
+    /**
+     * Construct a single context from the contexts of
+     * filters of type 'filter', 'favorite', and 'field'.
+     * @returns {Object}
+     */
+    _getContext() {
+        const groups = this._getGroups();
+        const contexts = [this.userService.context, this.globalContext];
+        for (const group of groups) {
+            for (const activeItem of group.activeItems) {
+                const context = this._getSearchItemContext(activeItem);
+                if (context) {
+                    contexts.push(context);
+                }
+            }
+        }
+        let context;
+        try {
+            context = makeContext(...contexts); // what we want?
+            return context;
+        } catch (error) {
+            throw new Error(
+                `${this.env._t("Failed to evaluate the context")} ${context}.\n${error.message}`
+            );
+        }
+    }
+
+    /**
+     * Compute the string representation or the description of the current domain associated
+     * with a date filter starting from its corresponding query elements.
+     */
+    _getDateFilterDomain(dateFilter, generatorIds, key = "domain") {
+        const { fieldName, fieldType } = dateFilter;
+        const dateFilterRange = constructDateDomain(
+            this.referenceMoment,
+            fieldName,
+            fieldType,
+            generatorIds
+        );
+        return dateFilterRange[key];
+    }
+
+    /**
+     * Returns which components are displayed in the current action. Components
+     * are opt-out, meaning that they will be displayed as long as a falsy
+     * value is not provided. With the search panel, the view type must also
+     * match the given (or default) search panel view types if the search model
+     * is instanciated in a view (this doesn't apply for any other action type).
+     * @private
+     * @param {Object} [display={}]
+     * @returns {{ controlPanel: Object | false, searchPanel: boolean }}
+     */
+    _getDisplay(display = {}) {
+        const { viewTypes } = this.searchPanelInfo;
+        return {
+            controlPanel: "controlPanel" in display ? display.controlPanel : {},
+            searchPanel:
+                (!this.view.type || viewTypes.includes(this.view.type)) &&
+                ("searchPanel" in display ? display.searchPanel : true),
+        };
+    }
+
+    /**
+     * Return a domain created by combinining appropriately (with an 'AND') the domains
+     * coming from the active groups of type 'filter', 'dateFilter', 'favorite', and 'field'.
+     * @param {Object} [params]
+     * @param {boolean} [params.raw=false]
+     * @param {boolean} [params.withSearchPanel=true]
+     * @param {boolean} [params.withGlobal=true]
+     * @returns {DomainListRepr | string} AST domain if 'raw', else the evaluated list domain
+     */
+    _getDomain(params = {}) {
+        const withSearchPanel = "withSearchPanel" in params ? params.withSearchPanel : true;
+        const withGlobal = "withGlobal" in params ? params.withGlobal : true;
+
+        const groups = this._getGroups();
+        const domains = [];
+        if (withGlobal) {
+            domains.push(this.globalDomain);
+        }
+        for (const group of groups) {
+            const groupActiveItemDomains = [];
+            for (const activeItem of group.activeItems) {
+                const domain = this._getSearchItemDomain(activeItem);
+                if (domain) {
+                    groupActiveItemDomains.push(domain);
+                }
+            }
+            const groupDomain = Domain.or(groupActiveItemDomains);
+            domains.push(groupDomain);
+        }
+
+        for (const { domain } of this.getDomainParts()) {
+            domains.push(domain);
+        }
+        // we need to manage (optional) facets, deactivateGroup, clearQuery,...
+
+        if (this.display.searchPanel && withSearchPanel) {
+            domains.push(this._getSearchPanelDomain());
+        }
+
+        let domain;
+        try {
+            domain = Domain.and(domains);
+            return params.raw ? domain : domain.toList(this.userService.context);
+        } catch (error) {
+            throw new Error(
+                `${this.env._t("Failed to evaluate the domain")} ${domain.toString()}.\n${
+                    error.message
+                }`
+            );
+        }
+    }
+
+    _getFacets() {
+        const facets = [];
+        const groups = this._getGroups();
+        for (const group of groups) {
+            const values = [];
+            let title;
+            let type;
+            for (const activeItem of group.activeItems) {
+                const searchItem = this.searchItems[activeItem.searchItemId];
+                switch (searchItem.type) {
+                    case "field": {
+                        type = "field";
+                        title = searchItem.description;
+                        for (const autocompleteValue of activeItem.autocompletValues) {
+                            values.push(autocompleteValue.label);
+                        }
+                        break;
+                    }
+                    case "groupBy": {
+                        type = "groupBy";
+                        values.push(searchItem.description);
+                        break;
+                    }
+                    case "dateGroupBy": {
+                        type = "groupBy";
+                        for (const intervalId of activeItem.intervalIds) {
+                            const option = this.intervalOptions.find((o) => o.id === intervalId);
+                            values.push(`${searchItem.description}: ${option.description}`);
+                        }
+                        break;
+                    }
+                    case "dateFilter": {
+                        type = "filter";
+                        const periodDescription = this._getDateFilterDomain(
+                            searchItem,
+                            activeItem.generatorIds,
+                            "description"
+                        );
+                        values.push(`${searchItem.description}: ${periodDescription}`);
+                        break;
+                    }
+                    default: {
+                        type = searchItem.type;
+                        values.push(searchItem.description);
+                    }
+                }
+            }
+            const facet = {
+                groupId: group.id,
+                type: type,
+                values,
+                separator: type === "groupBy" ? ">" : this.env._t("or"),
+            };
+            if (type === "field") {
+                facet.title = title;
+            } else {
+                facet.icon = FACET_ICONS[type];
+            }
+            facets.push(facet);
+        }
+
+        for (const { facetLabel, groupId } of this.getDomainParts()) {
+            const type = "filter";
+            facets.push({
+                groupId,
+                type,
+                values: [facetLabel],
+                icon: FACET_ICONS[type],
+            });
+        }
+
+        return facets;
+    }
+
+    /**
+     * Return the domain resulting from the combination of the autocomplete values
+     * of a search item of type 'field'.
+     */
+    _getFieldDomain(field, autocompleteValues) {
+        const domains = autocompleteValues.map(({ label, value, operator }) => {
+            let domain;
+            if (field.filterDomain) {
+                domain = new Domain(field.filterDomain).toList({ self: label, raw_value: value });
+            } else {
+                domain = [[field.fieldName, operator, value]];
+            }
+            return new Domain(domain);
+        });
+        return Domain.or(domains);
+    }
+
+    /**
+     * Computes and returns the domain based on the current checked
+     * filters. The values of a single filter are combined using a simple
+     * rule: checked values within a same group are combined with an "OR"
+     * operator (this is expressed as single condition using a list) and
+     * groups are combined with an "AND" operator (expressed by
+     * concatenation of conditions).
+     * If a filter has no group, its checked values are implicitely
+     * considered as forming a group (and grouped using an "OR").
+     * If excludedFilterId is provided, the filter with that id is not
+     * taken into account in the domain computation.
+     * @param {string} [excludedFilterId]
+     * @returns {Array[]}
+     */
+    _getFilterDomain(excludedFilterId) {
+        const domain = [];
+
+        function addCondition(fieldName, valueMap) {
+            const ids = [];
+            for (const [valueId, value] of valueMap) {
+                if (value.checked) {
+                    ids.push(valueId);
+                }
+            }
+            if (ids.length) {
+                domain.push([fieldName, "in", ids]);
+            }
+        }
+
+        for (const filter of this.filters) {
+            if (filter.id === excludedFilterId) {
+                continue;
+            }
+            const { fieldName, groups, values } = filter;
+            if (groups) {
+                for (const group of groups.values()) {
+                    addCondition(fieldName, group.values);
+                }
+            } else {
+                addCondition(fieldName, values);
+            }
+        }
+        return domain;
+    }
+
+    /**
+     * 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.query. If no groupBys are found, one tries to
+     * find some grouBys in this.globalContext.
+     */
+    _getGroupBy() {
+        const groups = this._getGroups();
+        const groupBys = [];
+        for (const group of groups) {
+            for (const activeItem of group.activeItems) {
+                const activeItemGroupBys = this._getSearchItemGroupBys(activeItem);
+                if (activeItemGroupBys) {
+                    groupBys.push(...activeItemGroupBys);
+                }
+            }
+        }
+        const groupBy = groupBys.length ? groupBys : this.globalGroupBy.slice();
+        return typeof groupBy === "string" ? [groupBy] : groupBy;
+    }
+
+    /**
+     * Returns a domain or an object of domains used to complement
+     * the filter domains to accurately describe the constrains on
+     * records when computing record counts associated to the filter
+     * values (if a groupBy is provided). The idea is that the checked
+     * values within a group should not impact the counts for the other
+     * values in the same group.
+     * @param {Filter} filter
+     * @returns {Object<string, Array[]> | Array[] | null}
+     */
+    _getGroupDomain(filter) {
+        const { fieldName, groups, enableCounters } = filter;
+        const { type: fieldType } = this.searchViewFields[fieldName];
+
+        if (!enableCounters || !groups) {
+            return {
+                many2one: [],
+                many2many: {},
+            }[fieldType];
+        }
+        let groupDomain = null;
+        if (fieldType === "many2one") {
+            for (const group of groups.values()) {
+                const valueIds = [];
+                let active = false;
+                for (const [valueId, value] of group.values) {
+                    const { checked } = value;
+                    valueIds.push(valueId);
+                    if (checked) {
+                        active = true;
+                    }
+                }
+                if (active) {
+                    if (groupDomain) {
+                        groupDomain = [[0, "=", 1]];
+                        break;
+                    } else {
+                        groupDomain = [[fieldName, "in", valueIds]];
+                    }
+                }
+            }
+        } else if (fieldType === "many2many") {
+            const checkedValueIds = new Map();
+            groups.forEach(({ values }, groupId) => {
+                values.forEach(({ checked }, valueId) => {
+                    if (checked) {
+                        if (!checkedValueIds.has(groupId)) {
+                            checkedValueIds.set(groupId, []);
+                        }
+                        checkedValueIds.get(groupId).push(valueId);
+                    }
+                });
+            });
+            groupDomain = {};
+            for (const [gId, ids] of checkedValueIds.entries()) {
+                for (const groupId of groups.keys()) {
+                    if (gId !== groupId) {
+                        const key = JSON.stringify(groupId);
+                        if (!groupDomain[key]) {
+                            groupDomain[key] = [];
+                        }
+                        groupDomain[key].push([fieldName, "in", ids]);
+                    }
+                }
+            }
+        }
+        return groupDomain;
+    }
+
+    /**
+     * Reconstruct the (active) groups from the query elements.
+     * @returns {Object[]}
+     */
+    _getGroups() {
+        const preGroups = [];
+        for (const queryElem of this.query) {
+            const { searchItemId } = queryElem;
+            const { groupId } = this.searchItems[searchItemId];
+            let preGroup = preGroups.find((group) => group.id === groupId);
+            if (!preGroup) {
+                preGroup = { id: groupId, queryElements: [] };
+                preGroups.push(preGroup);
+            }
+            preGroup.queryElements.push(queryElem);
+        }
+        const groups = [];
+        for (const preGroup of preGroups) {
+            const { queryElements, id } = preGroup;
+            let activeItems = [];
+            for (const queryElem of queryElements) {
+                const { searchItemId } = queryElem;
+                let activeItem = activeItems.find(({ searchItemId: id }) => id === searchItemId);
+                if ("generatorId" in queryElem) {
+                    if (!activeItem) {
+                        activeItem = { searchItemId, generatorIds: [] };
+                        activeItems.push(activeItem);
+                    }
+                    activeItem.generatorIds.push(queryElem.generatorId);
+                } else if ("intervalId" in queryElem) {
+                    if (!activeItem) {
+                        activeItem = { searchItemId, intervalIds: [] };
+                        activeItems.push(activeItem);
+                    }
+                    activeItem.intervalIds.push(queryElem.intervalId);
+                } else if ("autocompleteValue" in queryElem) {
+                    if (!activeItem) {
+                        activeItem = { searchItemId, autocompletValues: [] };
+                        activeItems.push(activeItem);
+                    }
+                    activeItem.autocompletValues.push(queryElem.autocompleteValue);
+                } else {
+                    if (!activeItem) {
+                        activeItem = { searchItemId };
+                        activeItems.push(activeItem);
+                    }
+                }
+            }
+            for (const activeItem of activeItems) {
+                if ("intervalIds" in activeItem) {
+                    activeItem.intervalIds.sort((g1, g2) => rankInterval(g1) - rankInterval(g2));
+                }
+            }
+            groups.push({ id, activeItems });
+        }
+        return groups;
+    }
+
+    /**
+     *
+     * @private
+     * @param {Object} [params={}]
+     * @returns {{ preFavorite: Object, irFilter: Object }}
+     */
+    _getIrFilterDescription(params = {}) {
+        const { description, isDefault, isShared } = params;
+        const fns = this.env.__saveParams__.callbacks;
+        const saveParams = Object.assign({}, ...fns.map((fn) => fn()));
+        const context = makeContext(this._getContext(), saveParams.context);
+        const userContext = this.userService.context;
+        for (const key in context) {
+            if (key in userContext || /^search(panel)?_default_/.test(key)) {
+                // clean search defaults and user context keys
+                delete context[key];
+            }
+        }
+        const rawDomain = this._getDomain({ raw: true, withGlobal: false });
+        const groupBys = this._getGroupBy();
+        const comparison = this._getComparison();
+        const orderBy = saveParams.orderBy ? saveParams.orderBy : this._getOrderBy() || [];
+        const userId = isShared ? false : this.userService.userId;
+
+        const preFavorite = {
+            description,
+            isDefault,
+            domain: rawDomain.toList(userContext),
+            context,
+            groupBys,
+            orderBy,
+            userId,
+        };
+        const irFilter = {
+            name: description,
+            action_id: this.action.id,
+            model_id: this.resModel,
+            domain: rawDomain.toString(),
+            is_default: isDefault,
+            sort: JSON.stringify(orderBy.map((o) => `${o.name}${o.asc === false ? " desc" : ""}`)),
+            user_id: userId,
+            context: { group_by: groupBys, ...context },
+        };
+
+        if (comparison) {
+            preFavorite.comparison = comparison;
+            irFilter.context.comparison = comparison;
+        }
+
+        return { preFavorite, irFilter };
+    }
+
+    /**
+     * @returns {string[]}
+     */
+    _getOrderBy() {
+        const groups = this._getGroups();
+        let orderBy = [];
+        for (const group of groups) {
+            for (const activeItem of group.activeItems) {
+                const { searchItemId } = activeItem;
+                const searchItem = this.searchItems[searchItemId];
+                if (searchItem.type === "favorite") {
+                    orderBy.push(...searchItem.orderBy);
+                }
+            }
+        }
+        orderBy = orderBy.length ? orderBy : this.globalOrderBy;
+        return typeof orderBy === "string" ? [orderBy] : orderBy;
+    }
+
+    /**
+     * Return the context of the provided (active) filter.
+     */
+    _getSearchItemContext(activeItem) {
+        const { searchItemId } = activeItem;
+        const searchItem = this.searchItems[searchItemId];
+        switch (searchItem.type) {
+            case "field": {
+                // for <field> nodes, a dynamic context (like context="{'field1': self}")
+                // should set {'field1': [value1, value2]} in the context
+                let context = {};
+                if (searchItem.context) {
+                    try {
+                        const self = activeItem.autocompletValues.map(
+                            (autocompleValue) => autocompleValue.value
+                        );
+                        context = evaluateExpr(searchItem.context, { self });
+                        if (typeof context !== "object") {
+                            throw Error();
+                        }
+                    } catch (error) {
+                        throw new Error(
+                            `${this.env._t("Failed to evaluate the context")} "${
+                                searchItem.context
+                            }".\n${error.message}`
+                        );
+                    }
+                }
+                // 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 (searchItem.isDefault && searchItem.fieldType === "many2one") {
+                    context[`default_${searchItem.fieldName}`] =
+                        searchItem.defaultAutocompleteValue.value;
+                }
+                return context;
+            }
+            case "favorite":
+            case "filter": {
+                //Return a deep copy of the filter/favorite to avoid the view to modify the context
+                return makeContext(
+                    searchItem.context && JSON.parse(JSON.stringify(searchItem.context))
+                );
+            }
+            default: {
+                return null;
+            }
+        }
+    }
+
+    /**
+     * Return the domain of the provided filter.
+     */
+    _getSearchItemDomain(activeItem) {
+        const { searchItemId } = activeItem;
+        const searchItem = this.searchItems[searchItemId];
+        switch (searchItem.type) {
+            case "field": {
+                return this._getFieldDomain(searchItem, activeItem.autocompletValues);
+            }
+            case "dateFilter": {
+                const { dateFilterId } = this._getActiveComparison() || {};
+                if (this.searchMenuTypes.has("comparison") && dateFilterId === searchItemId) {
+                    return new Domain([]);
+                }
+                return this._getDateFilterDomain(searchItem, activeItem.generatorIds);
+            }
+            case "filter":
+            case "favorite": {
+                return searchItem.domain;
+            }
+            default: {
+                return null;
+            }
+        }
+    }
+
+    _getSearchItemGroupBys(activeItem) {
+        const { searchItemId } = activeItem;
+        const searchItem = this.searchItems[searchItemId];
+        switch (searchItem.type) {
+            case "dateGroupBy": {
+                const { fieldName } = searchItem;
+                return activeItem.intervalIds.map((intervalId) => `${fieldName}:${intervalId}`);
+            }
+            case "groupBy": {
+                return [searchItem.fieldName];
+            }
+            case "favorite": {
+                return searchItem.groupBys;
+            }
+            default: {
+                return null;
+            }
+        }
+    }
+
+    /**
+     * Starting from a date filter id, returns the array of option ids currently selected
+     * for the corresponding date filter.
+     */
+    _getSelectedGeneratorIds(dateFilterId) {
+        const selectedOptionIds = [];
+        for (const queryElem of this.query) {
+            if (queryElem.searchItemId === dateFilterId && "generatorId" in queryElem) {
+                selectedOptionIds.push(queryElem.generatorId);
+            }
+        }
+        return selectedOptionIds;
+    }
+
+    /**
+     * @returns {Domain}
+     */
+    _getSearchPanelDomain() {
+        return Domain.and([this._getCategoryDomain(), this._getFilterDomain()]);
+    }
+
+    /**
+     * @param {Object} state
+     */
+    _importState(state) {
+        execute(arraytoMap, state, this);
+    }
+
+    /**
+     * @param {Object} irFilter
+     */
+    _irFilterToFavorite(irFilter) {
+        let userId = false;
+        if (Array.isArray(irFilter.user_id)) {
+            userId = irFilter.user_id[0];
+        }
+        const groupNumber = userId ? FAVORITE_PRIVATE_GROUP : FAVORITE_SHARED_GROUP;
+        const context = evaluateExpr(irFilter.context, this.userService.context);
+        let groupBys = [];
+        if (context.group_by) {
+            groupBys = context.group_by;
+            delete context.group_by;
+        }
+        let comparison;
+        if (context.comparison) {
+            comparison = context.comparison;
+            if (typeof comparison.range === "string") {
+                // legacy case
+                comparison.range = new Domain(comparison.range).toList();
+            }
+            if (typeof comparison.comparisonRange === "string") {
+                // legacy case
+                comparison.comparisonRange = new Domain(comparison.comparisonRange).toList();
+            }
+            delete context.comparison;
+        }
+        let sort;
+        try {
+            sort = JSON.parse(irFilter.sort);
+        } catch (err) {
+            if (err instanceof SyntaxError) {
+                sort = [];
+            } else {
+                throw err;
+            }
+        }
+        const orderBy = 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,
+            orderBy,
+            removable: true,
+            serverSideId: irFilter.id,
+            type: "favorite",
+            userId,
+        };
+        if (irFilter.is_default) {
+            favorite.isDefault = irFilter.is_default;
+        }
+        if (comparison) {
+            favorite.comparison = comparison;
+        }
+        return favorite;
+    }
+
+    async _notify() {
+        if (this.blockNotification) {
+            return;
+        }
+        this._context = null;
+        this._domain = null;
+        this._domains = null;
+        this._groupBy = null;
+        this._orderBy = null;
+
+        await this._reloadSections();
+
+        this.trigger("update");
+    }
+
+    /**
+     * Updates the search domain and reloads sections if:
+     * - the current search domain is different from the previous, or...
+     * - a `shouldReload` flag has been set to true on the searchPanelInfo.
+     * The latter means that the search domain has been modified while the
+     * search panel was not displayed (and thus not reloaded) and the reload
+     * should occur as soon as the search panel is visible again.
+     * @private
+     * @returns {Promise<void>}
+     */
+    async _reloadSections() {
+        this.blockNotification = true;
+
+        // Check whether the search domain changed
+        const searchDomain = this._getDomain({ withSearchPanel: false });
+        const searchDomainChanged =
+            this.searchPanelInfo.shouldReload ||
+            JSON.stringify(this.searchDomain) !== JSON.stringify(searchDomain);
+        this.searchDomain = searchDomain;
+
+        // Check whether categories/filters will force a reload of the sections
+        const toFetch = (section) =>
+            section.enableCounters || (searchDomainChanged && !section.expand);
+        const categoriesToFetch = this.categories.filter(toFetch);
+        const filtersToFetch = this.filters.filter(toFetch);
+
+        if (searchDomainChanged || Boolean(categoriesToFetch.length + filtersToFetch.length)) {
+            if (this.display.searchPanel) {
+                this.sectionsPromise = this._fetchSections(categoriesToFetch, filtersToFetch);
+                if (this._shouldWaitForData(searchDomainChanged)) {
+                    await this.sectionsPromise;
+                }
+            }
+            // If no current search panel: will try to reload on next model update
+            this.searchPanelInfo.shouldReload = !this.display.searchPanel;
+        }
+
+        this.blockNotification = false;
+    }
+
+    /**
+     * Returns whether the query informations should be considered as ready
+     * before or after having (re-)fetched the sections data.
+     * @param {boolean} searchDomainChanged
+     * @returns {boolean}
+     */
+    _shouldWaitForData(searchDomainChanged) {
+        if (this.categories.length && this.filters.some((filter) => filter.domain !== "[]")) {
+            // Selected category value might affect the filter values
+            return true;
+        }
+        if (!this.searchDomain.length) {
+            // No search domain -> no need to check for expand
+            return false;
+        }
+        return [...this.sections.values()].some(
+            (section) => !section.expand && searchDomainChanged
+        );
+    }
+
+    /**
+     * Legacy compatibility: the imported state of a legacy search panel model
+     * extension doesn't include the arch information, i.e. the class name and
+     * view types. We have to extract those if they are not given.
+     * @param {Object} searchViewDescription
+     */
+    __legacyParseSearchPanelArchAnyway(searchViewDescription) {
+        if (this.searchPanelInfo) {
+            return;
+        }
+
+        const parser = new SearchArchParser(searchViewDescription);
+        const { searchPanelInfo } = parser.parse();
+
+        this.searchPanelInfo = { ...searchPanelInfo, shouldReload: false };
+    }
+}
diff --git a/addons/web/static/src/search/search_panel/search_panel.js b/addons/web/static/src/search/search_panel/search_panel.js
new file mode 100644
index 00000000000..f896c8414a3
--- /dev/null
+++ b/addons/web/static/src/search/search_panel/search_panel.js
@@ -0,0 +1,206 @@
+/** @odoo-module **/
+
+const { Component, hooks } = owl;
+const { useState } = hooks;
+
+/**
+ * Search panel
+ *
+ * Represent an extension of the search interface located on the left side of
+ * the view. It is divided in sections defined in a "<searchpanel>" node located
+ * inside of a "<search>" arch. Each section is represented by a list of different
+ * values (categories or ungrouped filters) or groups of values (grouped filters).
+ * Its state is directly affected by its model (@see SearchModel).
+ */
+export class SearchPanel extends Component {
+    setup() {
+        this.state = useState({
+            active: {},
+            expanded: {},
+        });
+        this.scrollTop = 0;
+        this.hasImportedState = false;
+
+        this.importState(this.props.importedState);
+    }
+
+    async willStart() {
+        await this.env.searchModel.sectionsPromise;
+        this.expandDefaultValue();
+        this.updateActiveValues();
+    }
+
+    mounted() {
+        this.updateGroupHeadersChecked();
+        if (this.hasImportedState) {
+            this.el.scroll({ top: this.scrollTop });
+        }
+    }
+
+    async willUpdateProps() {
+        await this.env.searchModel.sectionsPromise;
+        this.updateActiveValues();
+    }
+
+    //---------------------------------------------------------------------
+    // Getters
+    //---------------------------------------------------------------------
+
+    get sections() {
+        return this.env.searchModel.getSections((s) => !s.empty);
+    }
+
+    //---------------------------------------------------------------------
+    // Public
+    //---------------------------------------------------------------------
+
+    exportState() {
+        const exported = {
+            expanded: this.state.expanded,
+            scrollTop: this.el.scrollTop,
+        };
+        return JSON.stringify(exported);
+    }
+
+    importState(stringifiedState) {
+        this.hasImportedState = Boolean(stringifiedState);
+        if (this.hasImportedState) {
+            const state = JSON.parse(stringifiedState);
+            this.state.expanded = state.expanded;
+            this.scrollTop = state.scrollTop;
+        }
+    }
+
+    //---------------------------------------------------------------------
+    // Protected
+    //---------------------------------------------------------------------
+
+    /**
+     * Expands category values holding the default value of a category.
+     */
+    expandDefaultValue() {
+        if (this.hasImportedState) {
+            return;
+        }
+        const categories = this.env.searchModel.getSections((s) => s.type === "category");
+        for (const category of categories) {
+            this.state.expanded[category.id] = {};
+            if (category.activeValueId) {
+                const ancestorIds = this.getAncestorValueIds(category, category.activeValueId);
+                for (const ancestorId of ancestorIds) {
+                    this.state.expanded[category.id][ancestorId] = true;
+                }
+            }
+        }
+    }
+
+    /**
+     * @param {Object} category
+     * @param {number} categoryValueId
+     * @returns {number[]} list of ids of the ancestors of the given value in
+     *   the given category.
+     */
+    getAncestorValueIds(category, categoryValueId) {
+        const { parentId } = category.values.get(categoryValueId);
+        return parentId ? [...this.getAncestorValueIds(category, parentId), parentId] : [];
+    }
+
+    /**
+     * Prevent unnecessary calls to the model by ensuring a different category
+     * is clicked.
+     * @param {Object} category
+     * @param {Object} value
+     */
+    async toggleCategory(category, value) {
+        if (value.childrenIds.length) {
+            const categoryState = this.state.expanded[category.id];
+            if (categoryState[value.id] && category.activeValueId === value.id) {
+                delete categoryState[value.id];
+            } else {
+                categoryState[value.id] = true;
+            }
+        }
+        if (category.activeValueId !== value.id) {
+            this.state.active[category.id] = value.id;
+            this.env.searchModel.toggleCategoryValue(category.id, value.id);
+        }
+    }
+
+    /**
+     * @param {number} filterId
+     * @param {{ values: Map<Object> }} group
+     */
+    toggleFilterGroup(filterId, { values }) {
+        const valueIds = [];
+        const checked = [...values.values()].every(
+            (value) => this.state.active[filterId][value.id]
+        );
+        values.forEach(({ id }) => {
+            valueIds.push(id);
+            this.state.active[filterId][id] = !checked;
+        });
+        this.env.searchModel.toggleFilterValues(filterId, valueIds, !checked);
+    }
+
+    /**
+     * @param {number} filterId
+     * @param {Object} [group]
+     * @param {number} valueId
+     * @param {MouseEvent} ev
+     */
+    toggleFilterValue(filterId, valueId, { currentTarget }) {
+        this.state.active[filterId][valueId] = currentTarget.checked;
+        this.updateGroupHeadersChecked();
+        this.env.searchModel.toggleFilterValues(filterId, [valueId]);
+    }
+
+    updateActiveValues() {
+        for (const section of this.sections) {
+            if (section.type === "category") {
+                this.state.active[section.id] = section.activeValueId;
+            } else {
+                this.state.active[section.id] = {};
+                if (section.groups) {
+                    for (const group of section.groups.values()) {
+                        for (const value of group.values.values()) {
+                            this.state.active[section.id][value.id] = value.checked;
+                        }
+                    }
+                }
+                if (section && section.values) {
+                    for (const value of section.values.values()) {
+                        this.state.active[section.id][value.id] = value.checked;
+                    }
+                }
+            }
+        }
+    }
+
+    /**
+     * Updates the "checked" or "indeterminate" state of each of the group
+     * headers according to the state of their values.
+     */
+    updateGroupHeadersChecked() {
+        const groups = this.el.querySelectorAll(":scope .o_search_panel_filter_group");
+        for (const group of groups) {
+            const header = group.querySelector(":scope .o_search_panel_group_header input");
+            const vals = [...group.querySelectorAll(":scope .o_search_panel_filter_value input")];
+            header.checked = false;
+            header.indeterminate = false;
+            if (vals.every((v) => v.checked)) {
+                header.checked = true;
+            } else if (vals.some((v) => v.checked)) {
+                header.indeterminate = true;
+            }
+        }
+    }
+}
+
+SearchPanel.props = {
+    importedState: { type: String, optional: true },
+};
+SearchPanel.subTemplates = {
+    category: "web.SearchPanel.Category",
+    filtersGroup: "web.SearchPanel.FiltersGroup",
+};
+SearchPanel.template = "web.SearchPanel";
diff --git a/addons/web/static/src/legacy/scss/search_panel.scss b/addons/web/static/src/search/search_panel/search_panel.scss
similarity index 98%
rename from addons/web/static/src/legacy/scss/search_panel.scss
rename to addons/web/static/src/search/search_panel/search_panel.scss
index 0a25d53a81d..cc629ce9e23 100644
--- a/addons/web/static/src/legacy/scss/search_panel.scss
+++ b/addons/web/static/src/search/search_panel/search_panel.scss
@@ -7,10 +7,12 @@ $o-searchpanel-p-tiny: $o-searchpanel-p-small*0.5;
 $o-searchpanel-category-default-color: $o-brand-primary;
 $o-searchpanel-filter-default-color: #D59244;
 
+.o_component_with_search_panel,
 .o_controller_with_searchpanel {
     display: flex;
     align-items: flex-start;
 
+    .o_renderer,
     .o_renderer_with_searchpanel {
         flex: 1 1 100%;
         overflow: auto; // make the renderer and search panel scroll individually
diff --git a/addons/web/static/src/search/search_panel/search_panel.xml b/addons/web/static/src/search/search_panel/search_panel.xml
new file mode 100644
index 00000000000..c9e6d827864
--- /dev/null
+++ b/addons/web/static/src/search/search_panel/search_panel.xml
@@ -0,0 +1,132 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates id="template" xml:space="preserve">
+
+<t t-name="web.SearchPanel" owl="1">
+    <div class="o_search_panel" t-att-class="env.searchModel.searchPanelInfo.className">
+        <section t-foreach="sections" t-as="section" t-key="section.id"
+            t-attf-class="o_search_panel_section o_search_panel_{{ section.type }}"
+            >
+            <header class="o_search_panel_section_header text-uppercase">
+                <i t-attf-class="fa {{ section.icon }} o_search_panel_section_icon mr-2"
+                    t-att-style="section.color and ('color: ' + section.color)"
+                />
+                <b t-esc="section.description"/>
+            </header>
+            <div t-if="section.errorMsg" class="alert alert-warning">
+                <span><t t-esc="section.errorMsg"/></span>
+            </div>
+            <ul t-else="" class="list-group d-block o_search_panel_field">
+                <t t-if="section.type === 'category'" t-call="{{ constructor.subTemplates.category }}">
+                    <t t-set="values" t-value="section.rootIds"/>
+                </t>
+                <t t-elif="section.groups">
+                    <li t-foreach="section.sortedGroupIds" t-as="groupId" t-key="groupId"
+                        class="o_search_panel_filter_group list-group-item border-0"
+                        >
+                        <!-- TODO: this is a workaround for issue https://github.com/odoo/owl/issues/695 (remove when solved) -->
+                        <t t-set="_section" t-value="section"/>
+                        <t t-set="group" t-value="section.groups.get(groupId)"/>
+                        <header class="o_search_panel_group_header">
+                            <div class="custom-control custom-checkbox">
+                                <!-- TODO: "indeterminate" could not be set in the template and had to be set in
+                                     JS manually. See https://github.com/odoo/owl/issues/713 (adapt when solved)
+                                -->
+                                <input type="checkbox"
+                                    class="custom-control-input"
+                                    t-attf-id="{{ section.id }}_input_{{ groupId }})"
+                                    t-on-click="toggleFilterGroup(section.id, group)"
+                                />
+                                <label t-attf-for="{{ section.id }}_input_{{ groupId }})"
+                                    class="o_search_panel_label custom-control-label"
+                                    t-att-class="{ o_with_counters: group.enableCounters }"
+                                    t-att-title="group.tooltip or false"
+                                    >
+                                    <span class="o_search_panel_label_title">
+                                        <span t-if="group.hex_color" class="mr-1" t-attf-style="color: {{ group.hex_color }};">●</span>
+                                        <t t-esc="group.name"/>
+                                    </span>
+                                </label>
+                            </div>
+                        </header>
+                        <ul class="list-group d-block">
+                            <t t-call="{{ constructor.subTemplates.filtersGroup }}">
+                                <t t-set="values" t-value="group.values"/>
+                                <!-- TODO: this is a workaround for issue https://github.com/odoo/owl/issues/695 (remove when solved) -->
+                                <t t-set="section" t-value="_section"/>
+                            </t>
+                        </ul>
+                    </li>
+                    <ul t-if="section.groups.get(false)" class="list-group d-block">
+                        <t t-call="{{ constructor.subTemplates.filtersGroup }}">
+                            <t t-set="group" t-value="section.groups.get(false)"/>
+                            <t t-set="values" t-value="group.values"/>
+                            <!-- TODO: this is a workaround for issue https://github.com/odoo/owl/issues/695 (remove when solved) -->
+                            <t t-set="section" t-value="section"/>
+                        </t>
+                    </ul>
+                </t>
+                <t t-else="" t-call="{{ constructor.subTemplates.filtersGroup }}">
+                    <t t-set="values" t-value="section.values"/>
+                </t>
+            </ul>
+        </section>
+    </div>
+</t>
+
+<t t-name="web.SearchPanel.Category" owl="1">
+    <t t-foreach="values" t-as="valueId" t-key="valueId">
+        <t t-set="value" t-value="section.values.get(valueId)"/>
+        <li class="o_search_panel_category_value list-group-item border-0">
+            <header class="list-group-item-action"
+                t-att-class="{ active: state.active[section.id] === valueId }"
+                t-on-click="toggleCategory(section, value)"
+                >
+                <label class="o_search_panel_label mb0" t-att-class="{ o_with_counters: section.enableCounters }">
+                    <div class="o_toggle_fold">
+                        <i t-if="value.childrenIds.length"
+                            t-attf-class="fa fa-caret-{{ state.expanded[section.id][valueId] ? 'down' : 'right' }}"
+                        />
+                    </div>
+                    <b t-if="value.bold" class="o_search_panel_label_title" t-esc="value.display_name"/>
+                    <span t-else="" class="o_search_panel_label_title" t-esc="value.display_name"/>
+                </label>
+                <span t-if="section.enableCounters and value.__count gt 0"
+                    class="o_search_panel_counter text-muted ml-2 small"
+                    t-esc="value.__count"
+                />
+            </header>
+            <ul t-if="value.childrenIds.length and state.expanded[section.id][valueId]" class="list-group d-block">
+                <t t-call="{{ constructor.subTemplates.category }}">
+                    <t t-set="values" t-value="value.childrenIds"/>
+                </t>
+            </ul>
+        </li>
+    </t>
+</t>
+
+<t t-name="web.SearchPanel.FiltersGroup" owl="1">
+    <li t-foreach="[...values.keys()]" t-as="valueId" t-key="valueId"
+        class="o_search_panel_filter_value list-group-item border-0"
+        >
+        <t t-set="value" t-value="values.get(valueId)"/>
+        <div class="custom-control custom-checkbox w-100">
+            <input type="checkbox"
+                t-attf-id="{{ section.id }}_input_{{ valueId }}"
+                t-att-checked="state.active[section.id][valueId]"
+                class="custom-control-input"
+                t-on-click="toggleFilterValue(section.id, valueId)"
+            />
+            <label class="o_search_panel_label custom-control-label"
+                t-attf-for="{{ section.id }}_input_{{ valueId }}"
+                t-att-title="(group and group.tooltip) or false">
+                <span class="o_search_panel_label_title" t-esc="value.display_name"/>
+                <span t-if="section.enableCounters and value.__count gt 0"
+                    class="o_search_panel_counter text-muted ml-2 small"
+                    t-esc="value.__count"
+                />
+            </label>
+        </div>
+    </li>
+</t>
+
+</templates>
diff --git a/addons/web/static/src/legacy/scss/search_view.scss b/addons/web/static/src/search/search_panel/search_view.scss
similarity index 100%
rename from addons/web/static/src/legacy/scss/search_view.scss
rename to addons/web/static/src/search/search_panel/search_view.scss
diff --git a/addons/web/static/src/legacy/scss/search_view_extra.scss b/addons/web/static/src/search/search_panel/search_view_extra.scss
similarity index 100%
rename from addons/web/static/src/legacy/scss/search_view_extra.scss
rename to addons/web/static/src/search/search_panel/search_view_extra.scss
diff --git a/addons/web/static/src/search/utils/dates.js b/addons/web/static/src/search/utils/dates.js
new file mode 100644
index 00000000000..864cbf8f9c2
--- /dev/null
+++ b/addons/web/static/src/search/utils/dates.js
@@ -0,0 +1,429 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+import { Domain } from "@web/core/domain";
+import { localization } from "@web/core/l10n/localization";
+
+export const DEFAULT_PERIOD = "this_month";
+
+export const QUARTERS = {
+    1: { description: _lt("Q1"), coveredMonths: [1, 2, 3] },
+    2: { description: _lt("Q2"), coveredMonths: [4, 5, 6] },
+    3: { description: _lt("Q3"), coveredMonths: [7, 8, 9] },
+    4: { description: _lt("Q4"), coveredMonths: [10, 11, 12] },
+};
+
+export const MONTH_OPTIONS = {
+    this_month: {
+        id: "this_month",
+        groupNumber: 1,
+        format: "MMMM",
+        plusParam: {},
+        granularity: "month",
+    },
+    last_month: {
+        id: "last_month",
+        groupNumber: 1,
+        format: "MMMM",
+        plusParam: { months: -1 },
+        granularity: "month",
+    },
+    antepenultimate_month: {
+        id: "antepenultimate_month",
+        groupNumber: 1,
+        format: "MMMM",
+        plusParam: { months: -2 },
+        granularity: "month",
+    },
+};
+
+export const QUARTER_OPTIONS = {
+    fourth_quarter: {
+        id: "fourth_quarter",
+        groupNumber: 1,
+        description: QUARTERS[4].description,
+        setParam: { quarter: 4 },
+        granularity: "quarter",
+    },
+    third_quarter: {
+        id: "third_quarter",
+        groupNumber: 1,
+        description: QUARTERS[3].description,
+        setParam: { quarter: 3 },
+        granularity: "quarter",
+    },
+    second_quarter: {
+        id: "second_quarter",
+        groupNumber: 1,
+        description: QUARTERS[2].description,
+        setParam: { quarter: 2 },
+        granularity: "quarter",
+    },
+    first_quarter: {
+        id: "first_quarter",
+        groupNumber: 1,
+        description: QUARTERS[1].description,
+        setParam: { quarter: 1 },
+        granularity: "quarter",
+    },
+};
+
+export const YEAR_OPTIONS = {
+    this_year: {
+        id: "this_year",
+        groupNumber: 2,
+        format: "yyyy",
+        plusParam: {},
+        granularity: "year",
+    },
+    last_year: {
+        id: "last_year",
+        groupNumber: 2,
+        format: "yyyy",
+        plusParam: { years: -1 },
+        granularity: "year",
+    },
+    antepenultimate_year: {
+        id: "antepenultimate_year",
+        groupNumber: 2,
+        format: "yyyy",
+        plusParam: { years: -2 },
+        granularity: "year",
+    },
+};
+
+export const PERIOD_OPTIONS = Object.assign({}, MONTH_OPTIONS, QUARTER_OPTIONS, YEAR_OPTIONS);
+
+export const DEFAULT_INTERVAL = "month";
+
+export 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 },
+};
+
+// ComparisonMenu parameters
+export const COMPARISON_OPTIONS = {
+    previous_period: {
+        description: _lt("Previous Period"),
+        id: "previous_period",
+    },
+    previous_year: {
+        description: _lt("Previous Year"),
+        id: "previous_year",
+        plusParam: { years: -1 },
+    },
+};
+
+export const PER_YEAR = {
+    year: 1,
+    quarter: 4,
+    month: 12,
+};
+
+//-------------------------------------------------------------------------
+// Functions
+//-------------------------------------------------------------------------
+
+/**
+ * Constructs the string representation of a domain and its description. The
+ * domain is of the form:
+ *      ['|', d_1 ,..., '|', d_n]
+ * where d_i is a time range of the form
+ *      ['&', [fieldName, >=, leftBound_i], [fieldName, <=, rightBound_i]]
+ * where leftBound_i and rightBound_i are date or datetime computed accordingly
+ * to the given options and reference moment.
+ */
+export function constructDateDomain(
+    referenceMoment,
+    fieldName,
+    fieldType,
+    selectedOptionIds,
+    comparisonOptionId
+) {
+    let plusParam;
+    let selectedOptions;
+    if (comparisonOptionId) {
+        [plusParam, selectedOptions] = getComparisonParams(
+            referenceMoment,
+            selectedOptionIds,
+            comparisonOptionId
+        );
+    } else {
+        selectedOptions = getSelectedOptions(referenceMoment, selectedOptionIds);
+    }
+    const yearOptions = selectedOptions.year;
+    const otherOptions = [...(selectedOptions.quarter || []), ...(selectedOptions.month || [])];
+    sortPeriodOptions(yearOptions);
+    sortPeriodOptions(otherOptions);
+    const ranges = [];
+    for (const yearOption of yearOptions) {
+        const constructRangeParams = {
+            referenceMoment,
+            fieldName,
+            fieldType,
+            plusParam,
+        };
+        if (otherOptions.length) {
+            for (const option of otherOptions) {
+                const setParam = Object.assign(
+                    {},
+                    yearOption.setParam,
+                    option ? option.setParam : {}
+                );
+                const { granularity } = option;
+                const range = constructDateRange(
+                    Object.assign({ granularity, setParam }, constructRangeParams)
+                );
+                ranges.push(range);
+            }
+        } else {
+            const { granularity, setParam } = yearOption;
+            const range = constructDateRange(
+                Object.assign({ granularity, setParam }, constructRangeParams)
+            );
+            ranges.push(range);
+        }
+    }
+    const domain = Domain.combine(
+        ranges.map((range) => range.domain),
+        "OR"
+    );
+    const description = ranges.map((range) => range.description).join("/");
+    return { domain, description };
+}
+
+/**
+ * Constructs the string representation of a domain and its description. The
+ * domain is a time range of the form:
+ *      ['&', [fieldName, >=, leftBound],[fieldName, <=, rightBound]]
+ * where leftBound and rightBound are some date or datetime determined by setParam,
+ * plusParam, granularity and the reference moment.
+ */
+export function constructDateRange(params) {
+    const { referenceMoment, fieldName, fieldType, granularity, setParam, plusParam } = params;
+    if ("quarter" in setParam) {
+        // Luxon does not consider quarter key in setParam (like moment did)
+        setParam.month = QUARTERS[setParam.quarter].coveredMonths[0];
+        delete setParam.quarter;
+    }
+    const date = referenceMoment.set(setParam).plus(plusParam || {});
+    // compute domain
+    let leftDate = date.startOf(granularity);
+    let rightDate = date.endOf(granularity);
+    let leftBound;
+    let rightBound;
+    if (fieldType === "date") {
+        leftBound = leftDate.toFormat("yyyy-MM-dd");
+        rightBound = rightDate.toFormat("yyyy-MM-dd");
+    } else {
+        leftBound = leftDate.toUTC().toFormat("yyyy-MM-dd HH:mm:ss");
+        rightBound = rightDate.toUTC().toFormat("yyyy-MM-dd HH:mm:ss");
+    }
+    const domain = new Domain(["&", [fieldName, ">=", leftBound], [fieldName, "<=", rightBound]]);
+    // compute description
+    const descriptions = [date.toFormat("yyyy")];
+    const method = localization.direction === "rtl" ? "push" : "unshift";
+    if (granularity === "month") {
+        descriptions[method](date.toFormat("MMMM"));
+    } else if (granularity === "quarter") {
+        const quarter = date.quarter;
+        descriptions[method](QUARTERS[quarter].description.toString());
+    }
+    const description = descriptions.join(" ");
+    return { domain, description };
+}
+
+/**
+ * Returns a version of the options in COMPARISON_OPTIONS with translated descriptions.
+ * @see getOptionsWithDescriptions
+ */
+export function getComparisonOptions() {
+    return getOptionsWithDescriptions(COMPARISON_OPTIONS);
+}
+
+/**
+ * Returns the params plusParam and selectedOptions necessary for the computation
+ * of a comparison domain.
+ */
+export function getComparisonParams(referenceMoment, selectedOptionIds, comparisonOptionId) {
+    const comparisonOption = COMPARISON_OPTIONS[comparisonOptionId];
+    const selectedOptions = getSelectedOptions(referenceMoment, selectedOptionIds);
+    if (comparisonOption.plusParam) {
+        return [comparisonOption.plusParam, selectedOptions];
+    }
+    let plusParam = {};
+    let globalGranularity = "year";
+    if (selectedOptions.month) {
+        globalGranularity = "month";
+    } else if (selectedOptions.quarter) {
+        globalGranularity = "quarter";
+    }
+    const granularityFactor = PER_YEAR[globalGranularity];
+    const years = selectedOptions.year.map((o) => o.setParam.year);
+    const yearMin = Math.min(...years);
+    const yearMax = Math.max(...years);
+    let optionMin = 0;
+    let optionMax = 0;
+    if (selectedOptions.quarter) {
+        const quarters = selectedOptions.quarter.map((o) => o.setParam.quarter);
+        if (globalGranularity === "month") {
+            delete selectedOptions.quarter;
+            for (const quarter of quarters) {
+                for (const month of QUARTERS[quarter].coveredMonths) {
+                    const monthOption = selectedOptions.month.find(
+                        (o) => o.setParam.month === month
+                    );
+                    if (!monthOption) {
+                        selectedOptions.month.push({
+                            setParam: { month },
+                            granularity: "month",
+                        });
+                    }
+                }
+            }
+        } else {
+            optionMin = Math.min(...quarters);
+            optionMax = Math.max(...quarters);
+        }
+    }
+    if (selectedOptions.month) {
+        const months = selectedOptions.month.map((o) => o.setParam.month);
+        optionMin = Math.min(...months);
+        optionMax = Math.max(...months);
+    }
+    const num = -1 + granularityFactor * (yearMin - yearMax) + optionMin - optionMax;
+    const key =
+        globalGranularity === "year"
+            ? "years"
+            : globalGranularity === "month"
+            ? "months"
+            : "quarters";
+    plusParam[key] = num;
+    return [plusParam, selectedOptions];
+}
+
+/**
+ * Returns a version of the options in INTERVAL_OPTIONS with translated descriptions.
+ * @see getOptionsWithDescriptions
+ */
+export function getIntervalOptions() {
+    return getOptionsWithDescriptions(INTERVAL_OPTIONS);
+}
+
+/**
+ * Returns a version of the options in PERIOD_OPTIONS with translated descriptions
+ * and a key defautlYearId used in the control panel model when toggling a period option.
+ */
+export function getPeriodOptions(referenceMoment) {
+    // adapt when solution for moment is found...
+    const options = [];
+    const originalOptions = Object.values(PERIOD_OPTIONS);
+    for (const option of originalOptions) {
+        const { id, groupNumber } = option;
+        let description;
+        let defaultYear;
+        switch (option.granularity) {
+            case "quarter":
+                description = option.description.toString();
+                defaultYear = referenceMoment.set(option.setParam).year;
+                break;
+            case "month":
+            case "year":
+                const date = referenceMoment.plus(option.plusParam);
+                description = date.toFormat(option.format);
+                defaultYear = date.year;
+                break;
+        }
+        const setParam = getSetParam(option, referenceMoment);
+        options.push({ id, groupNumber, description, defaultYear, setParam });
+    }
+    const periodOptions = [];
+    for (const option of options) {
+        const { id, groupNumber, description, defaultYear } = option;
+        const yearOption = options.find((o) => o.setParam && o.setParam.year === defaultYear);
+        periodOptions.push({
+            id,
+            groupNumber,
+            description,
+            defaultYearId: yearOption.id,
+        });
+    }
+    return periodOptions;
+}
+
+/**
+ * Returns a version of the options in OPTIONS with translated descriptions (if any).
+ * @param {Object{}} OPTIONS
+ * @returns {Object[]}
+ */
+export function getOptionsWithDescriptions(OPTIONS) {
+    const options = [];
+    for (const option of Object.values(OPTIONS)) {
+        options.push(Object.assign({}, option, { description: option.description.toString() }));
+    }
+    return options;
+}
+
+/**
+ * Returns a partial version of the period options whose ids are in selectedOptionIds
+ * partitioned by granularity.
+ */
+export function getSelectedOptions(referenceMoment, selectedOptionIds) {
+    const selectedOptions = { year: [] };
+    for (const optionId of selectedOptionIds) {
+        const option = PERIOD_OPTIONS[optionId];
+        const setParam = getSetParam(option, referenceMoment);
+        const granularity = option.granularity;
+        if (!selectedOptions[granularity]) {
+            selectedOptions[granularity] = [];
+        }
+        selectedOptions[granularity].push({ granularity, setParam });
+    }
+    return selectedOptions;
+}
+
+/**
+ * Returns the setParam object associated with the given periodOption and
+ * referenceMoment.
+ */
+export function getSetParam(periodOption, referenceMoment) {
+    if (periodOption.granularity === "quarter") {
+        return periodOption.setParam;
+    }
+    const date = referenceMoment.plus(periodOption.plusParam);
+    const granularity = periodOption.granularity;
+    const setParam = { [granularity]: date[granularity] };
+    return setParam;
+}
+
+export function rankInterval(intervalOptionId) {
+    return Object.keys(INTERVAL_OPTIONS).indexOf(intervalOptionId);
+}
+
+/**
+ * Sorts in place an array of 'period' options.
+ */
+export function sortPeriodOptions(options) {
+    options.sort((o1, o2) => {
+        var _a, _b;
+        const granularity1 = o1.granularity;
+        const granularity2 = o2.granularity;
+        if (granularity1 === granularity2) {
+            return (
+                ((_a = o1.setParam[granularity1]) !== null && _a !== void 0 ? _a : 0) -
+                ((_b = o2.setParam[granularity1]) !== null && _b !== void 0 ? _b : 0)
+            );
+        }
+        return granularity1 < granularity2 ? -1 : 1;
+    });
+}
+
+/**
+ * Checks if a year id is among the given array of period option ids.
+ */
+export function yearSelected(selectedOptionIds) {
+    return selectedOptionIds.some((optionId) => Object.keys(YEAR_OPTIONS).includes(optionId));
+}
diff --git a/addons/web/static/src/search/utils/group_by.js b/addons/web/static/src/search/utils/group_by.js
new file mode 100644
index 00000000000..1404a2619f8
--- /dev/null
+++ b/addons/web/static/src/search/utils/group_by.js
@@ -0,0 +1,62 @@
+/** @odoo-module **/
+
+import { DEFAULT_INTERVAL, INTERVAL_OPTIONS } from "./dates";
+
+/**
+ * @param {string} descr
+ */
+function errorMsg(descr) {
+    return `Invalid groupBy description: ${descr}`;
+}
+
+/**
+ * @param {string} descr
+ * @param {Object} fields
+ * @returns {Object}
+ */
+export function getGroupBy(descr, fields) {
+    let fieldName;
+    let interval;
+    let spec;
+    [fieldName, interval] = descr.split(":");
+    if (!fieldName) {
+        throw Error();
+    }
+    if (fields) {
+        if (!fields[fieldName]) {
+            throw Error(errorMsg(descr));
+        }
+        const fieldType = fields[fieldName].type;
+        if (["date", "datetime"].includes(fieldType)) {
+            if (!interval) {
+                interval = DEFAULT_INTERVAL;
+            } else if (!Object.keys(INTERVAL_OPTIONS).includes(interval)) {
+                throw Error(errorMsg(descr));
+            }
+            spec = `${fieldName}:${interval}`;
+        } else if (interval) {
+            throw Error(errorMsg(descr));
+        } else {
+            spec = fieldName;
+            interval = null;
+        }
+    } else {
+        if (interval) {
+            if (!Object.keys(INTERVAL_OPTIONS).includes(interval)) {
+                throw Error(errorMsg(descr));
+            }
+            spec = `${fieldName}:${interval}`;
+        } else {
+            spec = fieldName;
+            interval = null;
+        }
+    }
+    return {
+        fieldName,
+        interval,
+        spec,
+        toJSON() {
+            return spec;
+        },
+    };
+}
diff --git a/addons/web/static/src/search/utils/misc.js b/addons/web/static/src/search/utils/misc.js
new file mode 100644
index 00000000000..79e470b70df
--- /dev/null
+++ b/addons/web/static/src/search/utils/misc.js
@@ -0,0 +1,18 @@
+/** @odoo-module **/
+
+export const FACET_ICONS = {
+    filter: "fa fa-filter",
+    groupBy: "fa fa-bars",
+    favorite: "fa fa-star",
+    comparison: "fa fa-adjust",
+};
+
+export const GROUPABLE_TYPES = [
+    "boolean",
+    "char",
+    "date",
+    "datetime",
+    "integer",
+    "many2one",
+    "selection",
+];
diff --git a/addons/web/static/src/search/with_search/with_search.js b/addons/web/static/src/search/with_search/with_search.js
new file mode 100644
index 00000000000..f4342a50652
--- /dev/null
+++ b/addons/web/static/src/search/with_search/with_search.js
@@ -0,0 +1,144 @@
+/** @odoo-module **/
+
+import { useBus, useEffect, useService } from "@web/core/utils/hooks";
+import { SearchModel } from "@web/search/search_model";
+import { CallbackRecorder, useSetupAction } from "@web/webclient/actions/action_hook";
+
+const { Component, hooks } = owl;
+const { useSubEnv } = hooks;
+
+export const SEARCH_KEYS = ["context", "domain", "domains", "groupBy", "orderBy"];
+const OTHER_SEARCH_KEYS = ["irFilters", "searchViewArch", "searchViewFields", "searchViewId"];
+
+export class WithSearch extends Component {
+    setup() {
+        this.Component = this.props.Component;
+
+        if (!this.env.__saveParams__) {
+            useSubEnv({
+                __saveParams__: new CallbackRecorder(),
+            });
+        }
+
+        const SearchModelClass = this.Component.SearchModel || SearchModel;
+        this.searchModel = new SearchModelClass(this.env, {
+            user: useService("user"),
+            orm: useService("orm"),
+            view: useService("view"),
+        });
+        useBus(this.searchModel, "update", () => this.render());
+        useSubEnv({
+            searchModel: this.searchModel,
+        });
+
+        useSetupAction({
+            exportGlobalState: () => {
+                return {
+                    searchModel: JSON.stringify(this.searchModel.exportState()),
+                };
+            },
+        });
+
+        useEffect(() => {
+            if (!this.searchModel.display.searchPanel) {
+                return;
+            }
+            // TODO: add better way to retrieve o_content
+            const [content] = this.el.getElementsByClassName("o_content");
+            if (content) {
+                content.classList.add("o_component_with_search_panel");
+            }
+        });
+    }
+
+    async willStart() {
+        const config = { ...this.props };
+        if (config.globalState && config.globalState.searchModel) {
+            config.state = JSON.parse(config.globalState.searchModel);
+            delete config.globalState;
+        }
+        await this.searchModel.load(config);
+    }
+
+    async willUpdateProps(nextProps) {
+        const config = {};
+        for (const key of SEARCH_KEYS) {
+            if (nextProps[key]) {
+                config[key] = nextProps[key];
+            }
+        }
+        await this.searchModel.reload(config);
+    }
+
+    //-------------------------------------------------------------------------
+    // Getters
+    //-------------------------------------------------------------------------
+
+    get componentProps() {
+        const componentProps = { ...this.props.componentProps };
+        for (const key of SEARCH_KEYS) {
+            componentProps[key] = this.searchModel[key];
+        }
+        componentProps.info = componentProps.info || {};
+        for (const key of OTHER_SEARCH_KEYS) {
+            componentProps.info[key] = this.searchModel[key];
+        }
+        return componentProps;
+    }
+}
+
+WithSearch.defaultProps = {
+    action: { id: false, views: [] },
+    componentProps: {},
+    view: { id: false },
+};
+WithSearch.props = {
+    Component: Function,
+    componentProps: { type: Object, optional: true },
+
+    resModel: String,
+
+    action: {
+        type: Object,
+        shape: {
+            id: [Number, false],
+            type: { type: [String, false], optional: true },
+            views: { type: Array, element: [Number, String, false], optional: true },
+        },
+        optional: true,
+    },
+    displayName: { type: String, optional: true },
+    view: {
+        type: Object,
+        shape: {
+            id: [Number, false],
+            type: { type: [String, false], optional: true },
+        },
+        optional: true,
+    },
+
+    globalState: { type: Object, optional: true },
+
+    display: { type: Object, optional: true },
+
+    // search query elements
+    context: { type: Object, optional: true },
+    domain: { type: Array, element: [String, Array], optional: true },
+    domains: { type: Array, element: Object, optional: true },
+    groupBy: { type: Array, element: String, optional: true },
+    orderBy: { type: Array, element: String, optional: true },
+
+    // search view description
+    searchViewArch: { type: String, optional: true },
+    searchViewFields: { type: Object, optional: true },
+    searchViewId: { type: [Number, false], optional: true },
+
+    irFilters: { type: Array, element: Object, optional: true },
+    loadIrFilters: { type: Boolean, optional: true },
+
+    // extra options
+    activateFavorite: { type: Boolean, optional: true },
+    dynamicFilters: { type: Array, element: Object, optional: true },
+    searchMenuTypes: { type: Array, element: String, optional: true },
+};
+WithSearch.template = "web.WithSearch";
diff --git a/addons/web/static/src/search/with_search/with_search.xml b/addons/web/static/src/search/with_search/with_search.xml
new file mode 100644
index 00000000000..ec650abaf5c
--- /dev/null
+++ b/addons/web/static/src/search/with_search/with_search.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+  <t t-name="web.WithSearch" owl="1">
+    <t t-component="Component" t-props="componentProps" />
+  </t>
+
+</templates>
diff --git a/addons/web/static/src/views/helpers/model.js b/addons/web/static/src/views/helpers/model.js
new file mode 100644
index 00000000000..fc464da5675
--- /dev/null
+++ b/addons/web/static/src/views/helpers/model.js
@@ -0,0 +1,77 @@
+/** @odoo-module **/
+
+import { SEARCH_KEYS } from "@web/search/with_search/with_search";
+import { useBus, useService } from "@web/core/utils/hooks";
+
+const { core, hooks } = owl;
+const { EventBus } = core;
+const { onWillStart, onWillUpdateProps, useComponent } = hooks;
+
+export class Model extends EventBus {
+    /**
+     * @param {Object} env
+     * @param {Object} services
+     */
+    constructor(env, params, services) {
+        super();
+        this.env = env;
+        this.setup(params, services);
+    }
+
+    /**
+     * @param {Object} params
+     * @param {Object} services
+     */
+    setup(params, services) {}
+
+    /**
+     * @param {Object} searchParams
+     */
+    load(searchParams) {}
+
+    notify() {
+        this.trigger("update");
+    }
+}
+Model.services = [];
+
+function getSearchParams(props) {
+    const params = {};
+    for (const key of SEARCH_KEYS) {
+        params[key] = props[key];
+    }
+    return params;
+}
+
+/**
+ * @template {Model} T
+ * @param {new (env: Object, params: Object, services: Object) => T} ModelClass
+ * @param {Object} params
+ * @param {Object} [options]
+ * @param {Function} [options.onUpdate]
+ * @returns {T}
+ */
+export function useModel(ModelClass, params, options = {}) {
+    const component = useComponent();
+    if (!(ModelClass.prototype instanceof Model)) {
+        throw new Error(`the model class should extend Model`);
+    }
+    const services = {};
+    for (const key of ModelClass.services) {
+        services[key] = useService(key);
+    }
+    const model = new ModelClass(component.env, params, services);
+    useBus(model, "update", options.onUpdate || component.render);
+
+    onWillStart(() => {
+        const searchParams = getSearchParams(component.props);
+        return model.load(searchParams);
+    });
+
+    onWillUpdateProps((nextProps) => {
+        const searchParams = getSearchParams(nextProps);
+        searchParams.useSampleModel = false; // not sure it is good --> we'll know when implementing dashboard
+        return model.load(searchParams);
+    });
+    return model;
+}
diff --git a/addons/web/static/src/views/helpers/no_content_helpers.xml b/addons/web/static/src/views/helpers/no_content_helpers.xml
new file mode 100644
index 00000000000..4bb96ce8e46
--- /dev/null
+++ b/addons/web/static/src/views/helpers/no_content_helpers.xml
@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.ActionHelper" owl="1">
+        <div class="o_view_nocontent">
+            <div class="o_nocontent_help">
+                <t t-raw="noContentHelp"/>
+            </div>
+        </div>
+    </t>
+
+    <t t-name="web.NoContentHelper" owl="1">
+        <div class="o_view_nocontent" role="alert">
+            <div class="o_nocontent_help">
+                <p class="o_view_nocontent_empty_folder">
+                    <t t-if="title" t-esc="title"/>
+                    <t t-else="">No data to display</t>
+                </p>
+                <p>
+                <t t-if="description" t-esc="description"/>
+                <t t-else="">Try to add some records, or make sure that there is no
+                    active filter in the search bar.</t>
+                </p>
+            </div>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/helpers/standard_view_props.js b/addons/web/static/src/views/helpers/standard_view_props.js
new file mode 100644
index 00000000000..34156f95ec2
--- /dev/null
+++ b/addons/web/static/src/views/helpers/standard_view_props.js
@@ -0,0 +1,33 @@
+/** @odoo-module **/
+
+// TODO: add this in info props description
+
+// breadcrumbs: { type: Array, optional: 1 },
+// __exportLocalState__: { type: CallbackRecorder, optional: 1 },
+// __saveParams__: { type: CallbackRecorder, optional: 1 },
+// display: { type: Object, optional: 1 },
+// displayName: { type: String, optional: 1 },
+// noContentHelp: { type: String, optional: 1 },
+// searchViewId: { type: [Number, false], optional: 1 },
+// viewId: { type: [Number, false], optional: 1 },
+// views: { type: Array, element: Array, optional: 1 },
+// viewSwitcherEntries: { type: Array, optional: 1 },
+
+export const standardViewProps = {
+    info: {
+        type: Object,
+    },
+    resModel: String,
+    arch: { type: String },
+    context: { type: Object },
+    domain: { type: Array },
+    domains: { type: Array, elements: Object },
+    fields: { type: Object, elements: Object },
+    groupBy: { type: Array, elements: String },
+    limit: { type: Number, optional: 1 },
+    orderBy: { type: Array, elements: String },
+    useSampleModel: { type: Boolean },
+    state: { type: Object, optional: 1 },
+    resId: { type: Number, optional: 1 },
+    resIds: { type: Array, optional: 1 },
+};
diff --git a/addons/web/static/src/views/helpers/view_hook.js b/addons/web/static/src/views/helpers/view_hook.js
new file mode 100644
index 00000000000..8e14e9e04d8
--- /dev/null
+++ b/addons/web/static/src/views/helpers/view_hook.js
@@ -0,0 +1,12 @@
+/** @odoo-module **/
+
+import { useDebugCategory } from "@web/core/debug/debug_context";
+import { useSetupAction } from "@web/webclient/actions/action_hook";
+
+const { useComponent } = owl.hooks;
+
+export function useSetupView(params) {
+    const component = useComponent();
+    useDebugCategory("view", { component });
+    useSetupAction(params);
+}
diff --git a/addons/web/static/src/views/view.js b/addons/web/static/src/views/view.js
new file mode 100644
index 00000000000..b346adabfea
--- /dev/null
+++ b/addons/web/static/src/views/view.js
@@ -0,0 +1,331 @@
+/** @odoo-module **/
+
+import { evaluateExpr } from "@web/core/py_js/py";
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+import { WithSearch } from "@web/search/with_search/with_search";
+
+const viewRegistry = registry.category("views");
+
+const { Component } = owl;
+
+/** @typedef {Object} ViewProps
+ *  @property {string} resModel
+ *  @property {string} type
+ *
+ *  @property {Array[]} [views]
+ *
+ *  @property {string} [arch] if given, fields must be given too /\ no post processing is done (evaluation of "groups" attribute,...)
+ *  @property {Object} [fields] if given, arch must be given too
+ *  @property {number|false} [viewId]
+ *  @property {Object} [actionMenus]
+ *  @property {boolean} [loadActionMenus=false]
+ *
+ *  @property {string} [searchViewArch] if given, searchViewFields must be given too
+ *  @property {Object} [searchViewFields] if given, searchViewArch must be given too
+ *  @property {number|false} [searchViewId]
+ *  @property {Object[]} [irFilters]
+ *  @property {boolean} [loadIrFilters=false]
+ *
+ *  @property {Object} [context={}]
+ *  @property {DomainRepr} [domain]
+ *  @property {Object[]} [domains]
+ *  @property {string[]} [groupBy]
+ *  @property {string[]} [orderBy]
+ *
+ *  @property {Object} [action={}]
+ *  @property {Object} [actionFlags={}]
+ *  @property {string} [displayName]
+ *
+ *  @property {boolean} [useSampleModel]
+ *  @property {string} [noContentHelp]
+ *
+ *  @property {Object} [display={}] to rework
+ *
+ *  @property {Object[]} [breadcrumbs]
+ *  @property {Object[]} [viewSwitcherEntries]
+ *
+ *  manipulated by withSearch
+ *
+ *  @property {boolean} [activateFavorite]
+ *  @property {Object[]} [dynamicFilters]
+ *  @property {string[]} [searchMenuTypes]
+ *  @property {Object} [globalState]
+ */
+
+const STANDARD_PROPS = new Set([
+    "resModel",
+    "type",
+
+    "views",
+
+    "arch",
+    "fields",
+    "viewId",
+    "actionMenus",
+    "loadActionMenus",
+
+    "searchViewArch",
+    "searchViewFields",
+    "searchViewId",
+    "irFilters",
+    "loadIrFilters",
+
+    "context",
+    "domain",
+    "domains",
+    "groupBy",
+    "orderBy",
+
+    "action",
+    "actionFlags",
+    "displayName",
+
+    "useSampleModel",
+    "noContentHelp",
+
+    "breadcrumbs",
+    "viewSwitcherEntries",
+
+    "globalState",
+
+    "activateFavorite",
+
+    // LEGACY: remove this later (clean when mappings old state <-> new state are established)
+    "searchPanel",
+    "searchModel",
+]);
+
+export class View extends Component {
+    setup() {
+        const { arch, fields, resModel, searchViewArch, searchViewFields, type } = this.props;
+
+        if (!resModel) {
+            throw Error(`View props should have a "resModel" key`);
+        }
+        if (!type) {
+            throw Error(`View props should have a "type" key`);
+        }
+        if ((arch && !fields) || (!arch && fields)) {
+            throw new Error(`"arch" and "fields" props must be given together`);
+        }
+        if ((searchViewArch && !searchViewFields) || (!searchViewArch && searchViewFields)) {
+            throw new Error(`"searchViewArch" and "searchViewFields" props must be given together`);
+        }
+
+        this.viewService = useService("view");
+
+        this.withSearchProps = null;
+    }
+
+    async willStart() {
+        // determine view type
+        let ViewClass = viewRegistry.get(this.props.type);
+        const type = ViewClass.type;
+
+        // determine views for which descriptions should be obtained
+        let { views, viewId, searchViewId } = this.props;
+
+        views = JSON.parse(JSON.stringify(views));
+
+        const view = views.find((v) => v[1] === type);
+        if (view) {
+            view[0] = viewId !== undefined ? viewId : view[0];
+            viewId = view[0];
+        } else {
+            views.push([viewId || false, type]); // viewId will remain undefined if not specified and loadView=false
+        }
+
+        const searchView = views.find((v) => v[1] === "search");
+        if (searchView) {
+            searchView[0] = searchViewId !== undefined ? searchViewId : searchView[0];
+            searchViewId = searchView[0];
+        } else if (searchViewId !== undefined) {
+            views.push([searchViewId, "search"]);
+        }
+        // searchViewId will remains undefined if loadSearchView=false
+
+        // prepare view description
+        const { action, context, resModel, loadActionMenus, loadIrFilters } = this.props;
+        let { arch, fields, searchViewArch, searchViewFields, irFilters, actionMenus } = this.props;
+
+        let loadView = !arch || (!actionMenus && loadActionMenus);
+        let loadSearchView =
+            (searchViewId !== undefined && !searchViewArch) || (!irFilters && loadIrFilters);
+
+        let viewDescription = { resModel, type };
+        let searchViewDescription;
+        if (loadView || loadSearchView) {
+            // view description (or search view description if required) is incomplete
+            // a loadViews is done to complete the missing information
+            const viewDescriptions = await this.viewService.loadViews(
+                { context, resModel, views },
+                { actionId: action.id, loadActionMenus, loadIrFilters }
+            );
+            // Note: if this.props.views is different from views, the cached descriptions
+            // will certainly not be reused! (but for the standard flow this will work as
+            // before)
+            viewDescription = viewDescriptions[type];
+            searchViewDescription = viewDescriptions.search;
+            if (loadSearchView) {
+                if (!searchViewArch) {
+                    searchViewArch = searchViewDescription.arch;
+                    searchViewFields = searchViewDescription.fields;
+                }
+                if (!irFilters) {
+                    irFilters = searchViewDescription.irFilters;
+                }
+            }
+        }
+
+        if (!arch) {
+            arch = viewDescription.arch;
+            fields = viewDescription.fields;
+        }
+        if (!actionMenus) {
+            actionMenus = viewDescription.actionMenus;
+        }
+
+        const parser = new DOMParser();
+        const xml = parser.parseFromString(arch, "text/xml");
+        const rootNode = xml.documentElement;
+        const rootAttrs = {};
+        for (const attrName of rootNode.getAttributeNames()) {
+            rootAttrs[attrName] = rootNode.getAttribute(attrName);
+        }
+
+        //////////////////////////////////////////////////////////////////
+        /** @todo take care of banner_route rootAttribute*/
+        //////////////////////////////////////////////////////////////////
+
+        // determine ViewClass to instantiate (if not already done)
+
+        if (rootAttrs.js_class) {
+            ViewClass = viewRegistry.get(rootAttrs.js_class);
+        }
+
+        // prepare the view props
+        let viewProps = {
+            info: {
+                actionFlags: this.props.actionFlags,
+                action: this.props.action,
+                viewId: viewDescription.viewId,
+                views,
+                mode: this.props.display.mode,
+                actionMenus,
+                breadcrumbs: this.props.breadcrumbs,
+                viewSwitcherEntries: this.props.viewSwitcherEntries,
+                displayName: this.props.displayName,
+            },
+            arch,
+            fields,
+            resModel,
+            useSampleModel: false,
+        };
+
+        if ("useSampleModel" in this.props) {
+            viewProps.useSampleModel = this.props.useSampleModel;
+        } else if (rootAttrs.sample) {
+            viewProps.useSampleModel = Boolean(evaluateExpr(rootAttrs.sample));
+        }
+
+        for (const key in this.props) {
+            if (!STANDARD_PROPS.has(key)) {
+                viewProps[key] = this.props[key];
+            }
+        }
+
+        let { noContentHelp } = this.props;
+        if (noContentHelp !== undefined) {
+            const htmlHelp = document.createElement("div");
+            htmlHelp.innerHTML = noContentHelp;
+            if (htmlHelp.innerText.trim()) {
+                viewProps.info.noContentHelp = noContentHelp;
+            }
+        }
+
+        // prepare the WithSearh component props
+        this.withSearchProps = { ...this.props };
+
+        Object.assign(this.withSearchProps, {
+            Component: ViewClass,
+            componentProps: viewProps,
+            view: { id: viewId, type },
+        });
+
+        if (searchViewId !== undefined) {
+            this.withSearchProps.searchViewId = searchViewId;
+        }
+        if (searchViewArch) {
+            this.withSearchProps.searchViewArch = searchViewArch;
+            this.withSearchProps.searchViewFields = searchViewFields;
+        }
+        if (irFilters) {
+            this.withSearchProps.irFilters = irFilters;
+        }
+
+        if (!this.withSearchProps.searchMenuTypes) {
+            this.withSearchProps.searchMenuTypes =
+                this.props.searchMenuTypes ||
+                ViewClass.searchMenuTypes ||
+                this.constructor.searchMenuTypes;
+        }
+
+        for (const key in this.withSearchProps) {
+            if (!(key in WithSearch.props)) {
+                delete this.withSearchProps[key];
+            }
+        }
+    }
+
+    async willUpdateProps(nextProps) {
+        // we assume that nextProps can only vary in the search keys:
+        // context, domain, domains, groupBy, orderBy
+        const { context, domain, domains, groupBy, orderBy } = nextProps;
+        Object.assign(this.withSearchProps, { context, domain, domains, groupBy, orderBy });
+    }
+}
+
+View.template = "web.View";
+View.components = { WithSearch };
+View.defaultProps = {
+    action: { id: false, views: [] },
+    display: {},
+    context: {},
+    actionFlags: {},
+    loadActionMenus: false,
+    loadIrFilters: false,
+    views: [],
+};
+
+View.searchMenuTypes = ["filter", "groupBy", "favorite"];
+
+/** @todo rework doc */
+
+// - create a fakeORM service? --> use sampleServer and mockServer parts?
+
+// - action service uses View comp --> see if things cannot be simplified (we will use also maybe a ClientAction comp similar to view)
+
+// - see if we want to simplify things related to callback recorders --> the class should be put elsewhere too (maybe in core along registry?)
+
+/**
+ * To manage (how?):
+ *
+  Relate to search
+      searchModel // search model state (searchItems, query)
+      searchPanel // search panel component state (expanded (hierarchy), scrollbar)
+
+  Related to config/display/layout
+      breadcrumbs
+      withBreadcrumbs // 'no_breadcrumbs' in context ? !context.no_breadcrumbs : true,
+      withControlPanel // this.withControlPanel from constructor
+      withSearchBar // 'no_breadcrumbs' in context ? !context.no_breadcrumbs : true,
+      withSearchPanel // this.withSearchPanel from constructor
+      search_panel // = params.search_panel or context.search_panel
+
+  Prepare for concrete view ???
+      activeActions
+
+  Do stuff in View comp ???
+      banner // from arch = this.arch.attrs.banner_route
+*/
diff --git a/addons/web/static/src/views/view.xml b/addons/web/static/src/views/view.xml
new file mode 100644
index 00000000000..8244ace2980
--- /dev/null
+++ b/addons/web/static/src/views/view.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+  <t t-name="web.View" owl="1">
+    <WithSearch t-props="withSearchProps" class="o_action o_view_controller"/>
+  </t>
+
+</templates>
diff --git a/addons/web/static/src/webclient/actions/action_hook.js b/addons/web/static/src/webclient/actions/action_hook.js
index f64fedf2f4c..d363b9e717f 100644
--- a/addons/web/static/src/webclient/actions/action_hook.js
+++ b/addons/web/static/src/webclient/actions/action_hook.js
@@ -10,30 +10,86 @@ const { useComponent } = owl.hooks;
 // -----------------------------------------------------------------------------
 const scrollSymbol = Symbol("scroll");
 
+export class CallbackRecorder {
+    constructor() {
+        this.setup();
+    }
+    setup() {
+        this._callbacks = [];
+    }
+    /**
+     * @returns {Function[]}
+     */
+    get callbacks() {
+        return this._callbacks.map(({ callback }) => callback);
+    }
+    /**
+     * @param {any} owner
+     * @param {Function} callback
+     */
+    add(owner, callback) {
+        if (!callback) {
+            throw new Error("Missing callback");
+        }
+        this._callbacks.push({ owner, callback });
+    }
+    /**
+     * @param {any} owner
+     */
+    remove(owner) {
+        this._callbacks = this._callbacks.filter((s) => s.owner !== owner);
+    }
+}
+
 /**
- * This hooks should be used by Action Components (client actions or views). It
- * allows to implement the 'export' feature which aims at restoring the state
- * of the Component when we come back to it (e.g. using the breadcrumbs).
+ * @param {CallbackRecorder} callbackRecorder
+ * @param {Function} callback
  */
-export function useSetupAction(params) {
+export function useCallbackRecorder(callbackRecorder, callback) {
     const component = useComponent();
+    useEffect(
+        () => {
+            callbackRecorder.add(component, callback);
+            return () => callbackRecorder.remove(component);
+        },
+        () => []
+    );
+}
+
+/**
+ */
+export function useSetupAction(params = {}) {
+    const component = useComponent();
+    const {
+        __beforeLeave__,
+        __exportGlobalState__,
+        __exportLocalState__,
+        __saveParams__,
+    } = component.env;
+
+    if (__beforeLeave__ && params.beforeLeave) {
+        useCallbackRecorder(__beforeLeave__, params.beforeLeave);
+    }
+    if (__exportGlobalState__ && params.exportGlobalState) {
+        useCallbackRecorder(__exportGlobalState__, params.exportGlobalState);
+    }
+    if (__exportLocalState__) {
+        useCallbackRecorder(__exportLocalState__, () => {
+            const state = {};
+            state[scrollSymbol] = getScrollPosition(component);
+            if (params.exportLocalState) {
+                Object.assign(state, params.exportLocalState());
+            }
+            return state;
+        });
+    }
+    if (__saveParams__ && params.saveParams) {
+        useCallbackRecorder(__saveParams__, params.saveParams);
+    }
 
     useEffect(
         () => {
-            if (component.props.registerCallback) {
-                if (params.beforeLeave) {
-                    component.props.registerCallback("beforeLeave", params.beforeLeave);
-                }
-                component.props.registerCallback("export", () => {
-                    const state = {};
-                    state[scrollSymbol] = getScrollPosition(component);
-                    if (params.export) {
-                        Object.assign(state, params.export());
-                    }
-                    return state;
-                });
-            }
-            if (component.props.state) {
+            if (component.props.state && component.props.state[scrollSymbol]) {
                 setScrollPosition(component, component.props.state[scrollSymbol]);
             }
         },
diff --git a/addons/web/static/src/webclient/actions/action_service.js b/addons/web/static/src/webclient/actions/action_service.js
index c7795644ed0..2747e2dc423 100644
--- a/addons/web/static/src/webclient/actions/action_service.js
+++ b/addons/web/static/src/webclient/actions/action_service.js
@@ -11,6 +11,15 @@ import { KeepLast } from "@web/core/utils/concurrency";
 import { sprintf } from "@web/core/utils/strings";
 import { useDebugCategory } from "@web/core/debug/debug_context";
 import { ActionDialog } from "./action_dialog";
+import { CallbackRecorder } from "./action_hook";
+import { View } from "@web/views/view";
+
+const { Component, hooks, tags } = owl;
+const { useRef, useSubEnv } = hooks;
+
+const actionHandlersRegistry = registry.category("action_handlers");
+const actionRegistry = registry.category("actions");
+const viewRegistry = registry.category("views");
 
 /** @typedef {number|false} ActionId */
 /** @typedef {Object} ActionDescription */
@@ -32,12 +41,6 @@ import { ActionDialog } from "./action_dialog";
  * @property {ViewType} [viewType]
  */
 
-const { Component, hooks, tags } = owl;
-
-const viewRegistry = registry.category("views");
-const actionHandlersRegistry = registry.category("action_handlers");
-const actionRegistry = registry.category("actions");
-
 export function clearUncommittedChanges(env) {
     const callbacks = [];
     env.bus.trigger("CLEAR-UNCOMMITTED-CHANGES", callbacks);
@@ -72,7 +75,6 @@ const CTX_KEY_REGEX = /^(?:(?:default_|search_default_|show_).+|.+_view_ref|grou
 
 // only register this template once for all dynamic classes ControllerComponent
 const ControllerComponentTemplate = tags.xml`<t t-component="Component" t-props="props"
-    registerCallback="registerCallback"
     t-ref="component"
     t-on-history-back="onHistoryBack"
     t-on-controller-title-updated.stop="onTitleUpdated"/>`;
@@ -382,21 +384,59 @@ function makeActionManager(env) {
                 }
                 return viewSwitcherEntry;
             });
+        const context = action.context || {};
         const flags = action.flags || {};
-        const viewProps = Object.assign(_getActionProps(action, props), {
-            actionFlags: Object.assign({}, flags, flags[view.type]),
-            context: action.context,
+        const viewProps = Object.assign({}, props, {
+            actionFlags: Object.assign({}, flags, flags[view.type]), // review system
+            action: {
+                id: action.id || false,
+                type: action.type || false,
+                views: action.views || [],
+            },
+            context,
+            display: { mode: target === "new" ? "inDialog" : target },
+            displayName: action.display_name || action.name,
             domain: action.domain || [],
+            groupBy: action.context.group_by || [],
+            loadActionMenus: target !== "new" && target !== "inline",
+            loadIrFilters: action.views.some((v) => v[1] === "search"),
             resModel: action.res_model,
             type: view.type,
             views: action.views,
             viewSwitcherEntries,
-            loadActionMenus: target !== "new" && target !== "inline",
-            loadIrFilters: action.views.some((v) => v[1] === "search"),
         });
+
+        if (target === "inline") {
+            viewProps.searchMenuTypes = [];
+        }
+
+        const specialKeys = ["help", "useSampleModel", "limit", "count"];
+        for (const key of specialKeys) {
+            if (key in action) {
+                if (key === "help") {
+                    viewProps.noContentHelp = action.help;
+                } else {
+                    viewProps[key] = action[key];
+                }
+            }
+        }
+
+        if (context.active_id || context.active_ids || context.search_disable_custom_filters) {
+            viewProps.activateFavorite = false; // not sure --> check logic
+        }
+
+        // view specific
         if (action.res_id) {
             viewProps.resId = action.res_id;
         }
+
+        // LEGACY CODE COMPATIBILITY: remove when all views will be written in owl
+        if (view.isLegacy) {
+            const legacyActionInfo = { ...action, ...viewProps.action };
+            Object.assign(viewProps, { action: legacyActionInfo, View: view });
+        }
+        // END LEGACY CODE COMPATIBILITY
+
         return viewProps;
     }
 
@@ -465,24 +505,20 @@ function makeActionManager(env) {
         class ControllerComponent extends Component {
             setup() {
                 this.Component = controller.Component;
-                this.componentRef = hooks.useRef("component");
+                this.componentRef = useRef("component");
                 useDebugCategory("action", { action });
                 if (action.target !== "new") {
-                    let beforeLeaveFn;
-                    this.registerCallback = (type, fn) => {
-                        switch (type) {
-                            case "export":
-                                controller.getState = fn;
-                                break;
-                            case "beforeLeave":
-                                beforeLeaveFn = fn;
-                                break;
-                        }
-                    };
+                    this.__beforeLeave__ = new CallbackRecorder();
+                    this.__exportGlobalState__ = new CallbackRecorder();
+                    this.__exportLocalState__ = new CallbackRecorder();
                     useBus(env.bus, "CLEAR-UNCOMMITTED-CHANGES", (callbacks) => {
-                        if (beforeLeaveFn) {
-                            callbacks.push(beforeLeaveFn);
-                        }
+                        const beforeLeaveFns = this.__beforeLeave__.callbacks;
+                        callbacks.push(...beforeLeaveFns);
+                    });
+                    useSubEnv({
+                        __beforeLeave__: this.__beforeLeave__,
+                        __exportGlobalState__: this.__exportGlobalState__,
+                        __exportLocalState__: this.__exportLocalState__,
                     });
                 }
             }
@@ -523,6 +559,19 @@ function makeActionManager(env) {
                     });
                     dialog = nextDialog;
                 } else {
+                    controller.getGlobalState = () => {
+                        const exportFns = this.__exportGlobalState__.callbacks;
+                        if (exportFns.length) {
+                            return Object.assign({}, ...exportFns.map((fn) => fn()));
+                        }
+                    };
+                    controller.getLocalState = () => {
+                        const exportFns = this.__exportLocalState__.callbacks;
+                        if (exportFns.length) {
+                            return Object.assign({}, ...exportFns.map((fn) => fn()));
+                        }
+                    };
+
                     // LEGACY CODE COMPATIBILITY: remove when controllers will be written in owl
                     // we determine here which actions no longer occur in the nextStack,
                     // and we manually destroy all their controller's widgets
@@ -532,7 +581,10 @@ function makeActionManager(env) {
                         if (!nextStackActionIds.includes(c.action.jsId)) {
                             if (c.action.type === "ir.actions.act_window") {
                                 for (const viewType in c.action.controllers) {
-                                    toDestroy.add(c.action.controllers[viewType]);
+                                    const controller = c.action.controllers[viewType];
+                                    if (controller.Component.isLegacy) {
+                                        toDestroy.add(controller);
+                                    }
                                 }
                             } else {
                                 toDestroy.add(c);
@@ -540,7 +592,7 @@ function makeActionManager(env) {
                         }
                     }
                     for (const c of toDestroy) {
-                        if (c.exportedState) {
+                        if (c.exportedState && c.exportedState.__legacy_widget__) {
                             c.exportedState.__legacy_widget__.destroy();
                         }
                     }
@@ -603,14 +655,30 @@ function makeActionManager(env) {
         }
 
         const currentController = _getCurrentController();
-        if (currentController && currentController.getState) {
-            currentController.exportedState = currentController.getState();
+        if (currentController && currentController.getLocalState) {
+            currentController.exportedState = currentController.getLocalState();
         }
-
         if (controller.exportedState) {
             controller.props.state = controller.exportedState;
         }
 
+        // TODO DAM Remarks:
+        // this thing seems useless for client actions.
+        // restore and switchView (at least) use this --> cannot be done in switchView only
+        // if prop globalState has been passed in doAction, since the action is new the prop won't be overridden in l655.
+        // if globalState is not useful for client actions --> maybe use that thing in useSetupView instead of useSetupAction?
+        // a good thing: the Object.assign seems to reflect the use of "externalState" in legacy Model class --> things should be fine.
+        if (currentController && currentController.getGlobalState) {
+            currentController.action.globalState = Object.assign(
+                {},
+                currentController.action.globalState,
+                currentController.getGlobalState() // what if this = {}?
+            );
+        }
+        if (controller.action.globalState) {
+            controller.props.globalState = controller.action.globalState;
+        }
+
         const index = _computeStackIndex(options);
         const controllerArray = [controller];
         if (options.lazyController) {
@@ -700,7 +768,7 @@ function makeActionManager(env) {
 
         const controller = {
             jsId: `controller_${++id}`,
-            Component: view,
+            Component: view.isLegacy ? view : View,
             action,
             view,
             views,
@@ -717,7 +785,7 @@ function makeActionManager(env) {
         if (lazyView) {
             updateUIOptions.lazyController = {
                 jsId: `controller_${++id}`,
-                Component: lazyView,
+                Component: lazyView.isLegacy ? lazyView : View,
                 action,
                 view: lazyView,
                 views,
@@ -1111,7 +1179,7 @@ function makeActionManager(env) {
         }
         const newController = controller.action.controllers[viewType] || {
             jsId: `controller_${++id}`,
-            Component: view,
+            Component: view.isLegacy ? view : View,
             action: controller.action,
             views: controller.views,
             view,
@@ -1120,7 +1188,7 @@ function makeActionManager(env) {
         // LEGACY CODE COMPATIBILITY: remove when controllers will be written in owl
         if (view.isLegacy && newController.jsId === controller.jsId) {
             // case where a legacy view is reloaded via the view switcher
-            const { __legacy_widget__ } = controller.getState();
+            const { __legacy_widget__ } = controller.getLocalState();
             const params = {};
             if ("resId" in props) {
                 params.currentId = props.resId;
diff --git a/addons/web/static/tests/helpers/mock_server.js b/addons/web/static/tests/helpers/mock_server.js
index 5f79066c810..a90d6f047fb 100644
--- a/addons/web/static/tests/helpers/mock_server.js
+++ b/addons/web/static/tests/helpers/mock_server.js
@@ -22,6 +22,197 @@ function traverseElementTree(tree, cb) {
     }
 }
 
+export function _fieldsViewGet(params) {
+    let processedNodes = params.processedNodes || [];
+    const { arch, context, fields, modelName } = params;
+    function isNodeProcessed(node) {
+        return processedNodes.findIndex((n) => n.isSameNode(node)) > -1;
+    }
+    const modifiersNames = ["invisible", "readonly", "required"];
+    const onchanges = params.models[modelName].onchanges || {};
+    const fieldNodes = {};
+    const groupbyNodes = {};
+    let doc;
+    if (typeof arch === "string") {
+        const domParser = new DOMParser();
+        doc = domParser.parseFromString(arch, "text/xml").documentElement;
+    } else {
+        doc = arch;
+    }
+    const inTreeView = doc.tagName === "tree";
+    // mock _postprocess_access_rights
+    const isBaseModel = !context.base_model_name || modelName === context.base_model_name;
+    const views = ["kanban", "tree", "form", "gantt", "activity"];
+    if (isBaseModel && views.indexOf(doc.tagName) !== -1) {
+        for (const action of ["create", "delete", "edit", "write"]) {
+            if (!doc.getAttribute(action) && action in context && !context[action]) {
+                doc.setAttribute(action, "false");
+            }
+        }
+    }
+
+    traverseElementTree(doc, (node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            return false;
+        }
+        const modifiers = {};
+        const isField = node.tagName === "field";
+        const isGroupby = node.tagName === "groupby";
+        if (isField) {
+            const fieldName = node.getAttribute("name");
+            fieldNodes[fieldName] = node;
+            // 'transfer_field_to_modifiers' simulation
+            const field = fields[fieldName];
+            if (!field) {
+                throw new Error("Field " + fieldName + " does not exist");
+            }
+            const defaultValues = {};
+            const stateExceptions = {}; // what is this ?
+            modifiersNames.forEach((attr) => {
+                stateExceptions[attr] = [];
+                defaultValues[attr] = !!field[attr];
+            });
+            // LPE: what is this ?
+            /*                _.each(field.states || {}, function (modifs, state) {
+                        _.each(modifs, function (modif) {
+                            if (defaultValues[modif[0]] !== modif[1]) {
+                                stateExceptions[modif[0]].append(state);
+                            }
+                        });
+                    });*/
+            Object.entries(defaultValues).forEach(([attr, defaultValue]) => {
+                if (stateExceptions[attr].length) {
+                    modifiers[attr] = [
+                        ["state", defaultValue ? "not in" : "in", stateExceptions[attr]],
+                    ];
+                } else {
+                    modifiers[attr] = defaultValue;
+                }
+            });
+        } else if (isGroupby && !isNodeProcessed(node)) {
+            const groupbyName = node.getAttribute("name");
+            fieldNodes[groupbyName] = node;
+            groupbyNodes[groupbyName] = node;
+        }
+        // 'transfer_node_to_modifiers' simulation
+        let attrs = node.getAttribute("attrs");
+        if (attrs) {
+            attrs = evaluateExpr(attrs);
+            Object.assign(modifiers, attrs);
+        }
+        const states = node.getAttribute("states");
+        if (states) {
+            if (!modifiers.invisible) {
+                modifiers.invisible = [];
+            }
+            modifiers.invisible.push(["state", "not in", states.split(",")]);
+        }
+        const inListHeader = inTreeView && node.closest("header");
+        modifiersNames.forEach((attr) => {
+            const mod = node.getAttribute(attr);
+            if (mod) {
+                // TODO
+                // const pyevalContext = window.py.dict.fromJSON(context || {});
+                // var v = pyUtils.py_eval(mod, {context: pyevalContext}) ? true : false;
+                console.info(
+                    "MockServer: naive parse of modifier value in",
+                    QUnit.config.current.testName
+                );
+                const v = JSON.parse(mod);
+                if (inTreeView && !inListHeader && attr === "invisible") {
+                    modifiers.column_invisible = v;
+                } else if (v || !(attr in modifiers) || !Array.isArray(modifiers[attr])) {
+                    modifiers[attr] = v;
+                }
+            }
+        });
+        modifiersNames.forEach((attr) => {
+            if (
+                attr in modifiers &&
+                (!!modifiers[attr] === false ||
+                    (Array.isArray(modifiers[attr]) && !modifiers[attr].length))
+            ) {
+                delete modifiers[attr];
+            }
+        });
+        if (Object.keys(modifiers).length) {
+            node.setAttribute("modifiers", JSON.stringify(modifiers));
+        }
+        if (isGroupby && !isNodeProcessed(node)) {
+            return false;
+        }
+        return !isField;
+    });
+    let relModel, relFields;
+    Object.entries(fieldNodes).forEach(([name, node]) => {
+        const field = fields[name];
+        if (field.type === "many2one" || field.type === "many2many") {
+            const canCreate = node.getAttribute("can_create");
+            node.setAttribute("can_create", canCreate || "true");
+            const canWrite = node.getAttribute("can_write");
+            node.setAttribute("can_write", canWrite || "true");
+        }
+        if (field.type === "one2many" || field.type === "many2many") {
+            field.views = {};
+            Array.from(node.children).forEach((children) => {
+                if (children.tagName) {
+                    // skip text nodes
+                    relModel = field.relation;
+                    relFields = Object.assign({}, params.models[relModel].fields);
+                    field.views[children.tagName] = _fieldsViewGet({
+                        models: params.models,
+                        arch: children,
+                        modelName: relModel,
+                        fields: relFields,
+                        context: Object.assign({}, context, { base_model_name: modelName }),
+                        processedNodes,
+                    });
+                }
+            });
+        }
+        // add onchanges
+        if (name in onchanges) {
+            node.setAttribute("on_change", "1");
+        }
+    });
+    Object.entries(groupbyNodes).forEach(([name, node]) => {
+        const field = fields[name];
+        if (field.type !== "many2one") {
+            throw new Error("groupby can only target many2one");
+        }
+        field.views = {};
+        relModel = field.relation;
+        relFields = Object.assign({}, params.models[relModel].fields);
+        processedNodes.push(node);
+        // postprocess simulation
+        field.views.groupby = _fieldsViewGet({
+            models: params.models,
+            arch: node,
+            modelName: relModel,
+            fields: relFields,
+            context,
+            processedNodes,
+        });
+        while (node.firstChild) {
+            node.removeChild(node.firstChild);
+        }
+    });
+    const xmlSerializer = new XMLSerializer();
+    const processedArch = xmlSerializer.serializeToString(doc);
+    const fieldsInView = {};
+    Object.entries(fields).forEach(([fname, field]) => {
+        if (fname in fieldNodes) {
+            fieldsInView[fname] = field;
+        }
+    });
+    return {
+        arch: processedArch,
+        fields: fieldsInView,
+        model: modelName,
+        type: doc.tagName === "tree" ? "list" : doc.tagName,
+    };
+}
+
 // -----------------------------------------------------------------------------
 // MockServer
 // -----------------------------------------------------------------------------
@@ -126,7 +317,7 @@ export class MockServer {
         let arch = this.archs[key];
         if (!arch) {
             const genericViewKey = Object.keys(this.archs).find((fullKey) => {
-                const [_model, _viewID, _viewType] = fullKey.split(",");
+                const [_model, , _viewType] = fullKey.split(",");
                 return _model === modelName && _viewType === viewType;
             });
             if (genericViewKey) {
@@ -140,206 +331,23 @@ export class MockServer {
         // generate a field_view_get result
         const fields = Object.assign({}, this.models[modelName].fields);
         // var viewOptions = params.viewOptions || {};
-        const fvg = this._fieldsViewGet({ arch, modelName, fields, context: kwargs.context || {} });
+        const fvg = _fieldsViewGet({
+            arch,
+            modelName,
+            fields,
+            context: kwargs.context || {},
+            models: this.models,
+        });
         if (kwargs.options.toolbar) {
             fvg.toolbar = this.models[modelName].toolbar || {};
         }
-        if (viewId) {
+        if (viewId !== undefined) {
             fvg.view_id = viewId;
             fvg.name = key;
         }
         return fvg;
     }
 
-    _fieldsViewGet(params) {
-        let processedNodes = params.processedNodes || [];
-        const { arch, context, fields, modelName } = params;
-        function isNodeProcessed(node) {
-            return processedNodes.findIndex((n) => n.isSameNode(node)) > -1;
-        }
-        const modifiersNames = ["invisible", "readonly", "required"];
-        const onchanges = this.models[modelName].onchanges || {};
-        const fieldNodes = {};
-        const groupbyNodes = {};
-        let doc;
-        if (typeof arch === "string") {
-            const domParser = new DOMParser();
-            doc = domParser.parseFromString(arch, "text/xml").documentElement;
-        } else {
-            doc = arch;
-        }
-        const inTreeView = doc.tagName === "tree";
-        // mock _postprocess_access_rights
-        const isBaseModel = !context.base_model_name || modelName === context.base_model_name;
-        const views = ["kanban", "tree", "form", "gantt", "activity"];
-        if (isBaseModel && views.indexOf(doc.tagName) !== -1) {
-            for (const action of ["create", "delete", "edit", "write"]) {
-                if (!doc.getAttribute(action) && action in context && !context[action]) {
-                    doc.setAttribute(action, "false");
-                }
-            }
-        }
-
-        traverseElementTree(doc, (node) => {
-            if (node.nodeType === Node.TEXT_NODE) {
-                return false;
-            }
-            const modifiers = {};
-            const isField = node.tagName === "field";
-            const isGroupby = node.tagName === "groupby";
-            if (isField) {
-                const fieldName = node.getAttribute("name");
-                fieldNodes[fieldName] = node;
-                // 'transfer_field_to_modifiers' simulation
-                const field = fields[fieldName];
-                if (!field) {
-                    throw new Error("Field " + fieldName + " does not exist");
-                }
-                const defaultValues = {};
-                const stateExceptions = {}; // what is this ?
-                modifiersNames.forEach((attr) => {
-                    stateExceptions[attr] = [];
-                    defaultValues[attr] = !!field[attr];
-                });
-                // LPE: what is this ?
-                /*                _.each(field.states || {}, function (modifs, state) {
-                            _.each(modifs, function (modif) {
-                                if (defaultValues[modif[0]] !== modif[1]) {
-                                    stateExceptions[modif[0]].append(state);
-                                }
-                            });
-                        });*/
-                Object.entries(defaultValues).forEach(([attr, defaultValue]) => {
-                    if (stateExceptions[attr].length) {
-                        modifiers[attr] = [
-                            ["state", defaultValue ? "not in" : "in", stateExceptions[attr]],
-                        ];
-                    } else {
-                        modifiers[attr] = defaultValue;
-                    }
-                });
-            } else if (isGroupby && !isNodeProcessed(node)) {
-                const groupbyName = node.getAttribute("name");
-                fieldNodes[groupbyName] = node;
-                groupbyNodes[groupbyName] = node;
-            }
-            // 'transfer_node_to_modifiers' simulation
-            let attrs = node.getAttribute("attrs");
-            if (attrs) {
-                attrs = evaluateExpr(attrs);
-                Object.assign(modifiers, attrs);
-            }
-            const states = node.getAttribute("states");
-            if (states) {
-                if (!modifiers.invisible) {
-                    modifiers.invisible = [];
-                }
-                modifiers.invisible.push(["state", "not in", states.split(",")]);
-            }
-            const inListHeader = inTreeView && node.closest("header");
-            modifiersNames.forEach((attr) => {
-                const mod = node.getAttribute(attr);
-                if (mod) {
-                    // TODO
-                    // const pyevalContext = window.py.dict.fromJSON(context || {});
-                    // var v = pyUtils.py_eval(mod, {context: pyevalContext}) ? true : false;
-                    console.info(
-                        "MockServer: naive parse of modifier value in",
-                        QUnit.config.current.testName
-                    );
-                    const v = JSON.parse(mod);
-                    if (inTreeView && !inListHeader && attr === "invisible") {
-                        modifiers.column_invisible = v;
-                    } else if (v || !(attr in modifiers) || !Array.isArray(modifiers[attr])) {
-                        modifiers[attr] = v;
-                    }
-                }
-            });
-            modifiersNames.forEach((attr) => {
-                if (
-                    attr in modifiers &&
-                    (!!modifiers[attr] === false ||
-                        (Array.isArray(modifiers[attr]) && !modifiers[attr].length))
-                ) {
-                    delete modifiers[attr];
-                }
-            });
-            if (Object.keys(modifiers).length) {
-                node.setAttribute("modifiers", JSON.stringify(modifiers));
-            }
-            if (isGroupby && !isNodeProcessed(node)) {
-                return false;
-            }
-            return !isField;
-        });
-        let relModel, relFields;
-        Object.entries(fieldNodes).forEach(([name, node]) => {
-            const field = fields[name];
-            if (field.type === "many2one" || field.type === "many2many") {
-                const canCreate = node.getAttribute("can_create");
-                node.setAttribute("can_create", canCreate || "true");
-                const canWrite = node.getAttribute("can_write");
-                node.setAttribute("can_write", canWrite || "true");
-            }
-            if (field.type === "one2many" || field.type === "many2many") {
-                field.views = {};
-                Array.from(node.children).forEach((children) => {
-                    if (children.tagName) {
-                        // skip text nodes
-                        relModel = field.relation;
-                        relFields = Object.assign({}, this.models[relModel].fields);
-                        field.views[children.tagName] = this._fieldsViewGet({
-                            arch: children,
-                            modelName: relModel,
-                            fields: relFields,
-                            context: Object.assign({}, context, { base_model_name: modelName }),
-                            processedNodes,
-                        });
-                    }
-                });
-            }
-            // add onchanges
-            if (name in onchanges) {
-                node.setAttribute("on_change", "1");
-            }
-        });
-        Object.entries(groupbyNodes).forEach(([name, node]) => {
-            const field = fields[name];
-            if (field.type !== "many2one") {
-                throw new Error("groupby can only target many2one");
-            }
-            field.views = {};
-            relModel = field.relation;
-            relFields = Object.assign({}, this.models[relModel].fields);
-            processedNodes.push(node);
-            // postprocess simulation
-            field.views.groupby = this._fieldsViewGet({
-                arch: node,
-                modelName: relModel,
-                fields: relFields,
-                context,
-                processedNodes,
-            });
-            while (node.firstChild) {
-                node.removeChild(node.firstChild);
-            }
-        });
-        const xmlSerializer = new XMLSerializer();
-        const processedArch = xmlSerializer.serializeToString(doc);
-        const fieldsInView = {};
-        Object.entries(fields).forEach(([fname, field]) => {
-            if (fname in fieldNodes) {
-                fieldsInView[fname] = field;
-            }
-        });
-        return {
-            arch: processedArch,
-            fields: fieldsInView,
-            model: modelName,
-            type: doc.tagName === "tree" ? "list" : doc.tagName,
-        };
-    }
-
     /**
      * Converts an Object representing a record to actual return Object of the
      * python `onchange` method.
@@ -377,7 +385,7 @@ export class MockServer {
         return values;
     }
 
-    _performRPC(route, args) {
+    async _performRPC(route, args) {
         // Check if there is an handler in the mockRegistry: either specific for this model
         // (with key 'model/method'), or global (with key 'method')
         // This allows to mock routes/methods defined outside web.
@@ -391,64 +399,60 @@ export class MockServer {
 
         switch (route) {
             case "/web/webclient/load_menus":
-                return Promise.resolve(this.mockLoadMenus());
+                return this.mockLoadMenus();
             case "/web/action/load":
-                return Promise.resolve(this.mockLoadAction(args));
+                return this.mockLoadAction(args);
             case "/web/dataset/search_read":
-                return Promise.resolve(this.mockSearchReadController(args));
+                return this.mockSearchReadController(args);
             case "/web/dataset/search":
-                return Promise.resolve(this.mockSearchController(args));
+                return this.mockSearchController(args);
         }
         if (
             route.indexOf("/web/image") >= 0 ||
             [".png", ".jpg"].includes(route.substr(route.length - 4))
         ) {
-            return Promise.resolve();
+            return;
         }
         switch (args.method) {
             case "create":
-                return Promise.resolve(this.mockCreate(args.model, args.args[0]));
+                return this.mockCreate(args.model, args.args[0]);
             case "fields_get":
-                return Promise.resolve(this.mockFieldsGet(args.model));
+                return this.mockFieldsGet(args.model);
             case "load_views":
-                return Promise.resolve(this.mockLoadViews(args.model, args.kwargs));
+                return this.mockLoadViews(args.model, args.kwargs);
             case "name_create":
-                return Promise.resolve(this.mockNameCreate(args.model, args.args[0]));
+                return this.mockNameCreate(args.model, args.args[0]);
             case "name_get":
-                return Promise.resolve(this.mockNameGet(args.model, args.args));
+                return this.mockNameGet(args.model, args.args);
             case "name_search":
-                return Promise.resolve(this.mockNameSearch(args.model, args.args, args.kwargs));
+                return this.mockNameSearch(args.model, args.args, args.kwargs);
             case "onchange":
-                return Promise.resolve(this.mockOnchange(args.model, args.args, args.kwargs));
+                return this.mockOnchange(args.model, args.args, args.kwargs);
             case "read":
-                return Promise.resolve(this.mockRead(args.model, args.args));
+                return this.mockRead(args.model, args.args);
             case "search":
-                return Promise.resolve(this.mockSearch(args.model, args.args, args.kwargs));
+                return this.mockSearch(args.model, args.args, args.kwargs);
             case "search_count":
-                return Promise.resolve(this.mockSearchCount(args.model, args.args, args.kwargs));
-            case "search_read":
-                return Promise.resolve(this.mockSearchRead(args.model, args.args, args.kwargs));
+                return this.mockSearchCount(args.model, args.args, args.kwargs);
             case "search_panel_select_range":
-                return Promise.resolve(
-                    this.mockSearchPanelSelectRange(args.model, args.args, args.kwargs)
-                );
+                return this.mockSearchPanelSelectRange(args.model, args.args, args.kwargs);
             case "search_panel_select_multi_range":
-                return Promise.resolve(
-                    this.mockSearchPanelSelectMultiRange(args.model, args.args, args.kwargs)
-                );
+                return this.mockSearchPanelSelectMultiRange(args.model, args.args, args.kwargs);
+            case "search_read":
+                return this.mockSearchRead(args.model, args.args, args.kwargs);
             case "web_search_read":
-                return Promise.resolve(this.mockWebSearchRead(args.model, args.args, args.kwargs));
+                return this.mockWebSearchRead(args.model, args.args, args.kwargs);
             case "read_group":
-                return Promise.resolve(this.mockReadGroup(args.model, args.kwargs));
+                return this.mockReadGroup(args.model, args.kwargs);
             case "web_read_group":
-                return Promise.resolve(this.mockWebReadGroup(args.model, args.kwargs));
+                return this.mockWebReadGroup(args.model, args.kwargs);
             case "write":
-                return Promise.resolve(this.mockWrite(args.model, args.args));
+                return this.mockWrite(args.model, args.args);
         }
         const model = this.models[args.model];
         const method = model && model.methods[args.method];
         if (method) {
-            return Promise.resolve(method(args.model, args.args, args.kwargs));
+            return method(args.model, args.args, args.kwargs);
         }
         throw new Error(`Unimplemented route: ${route}`);
     }
@@ -905,6 +909,535 @@ export class MockServer {
         };
     }
 
+    /**
+     * Simulates a call to the server '_search_panel_field_image' method.
+     *
+     * @private
+     * @param {string} model
+     * @param {string} fieldName
+     * @param {Object} kwargs
+     * @see mockSearchPanelDomainImage()
+     */
+    mockSearchPanelFieldImage(model, fieldName, kwargs) {
+        const enableCounters = kwargs.enable_counters;
+        const onlyCounters = kwargs.only_counters;
+        const extraDomain = kwargs.extra_domain || [];
+        const normalizedExtra = new Domain(extraDomain).toList();
+        const noExtra = JSON.stringify(normalizedExtra) === "[]";
+        const modelDomain = kwargs.model_domain || [];
+        const countDomain = new Domain([...modelDomain, ...extraDomain]).toList();
+
+        const limit = kwargs.limit;
+        const setLimit = kwargs.set_limit;
+
+        if (onlyCounters) {
+            return this.mockSearchPanelDomainImage(model, fieldName, countDomain, true);
+        }
+
+        const modelDomainImage = this.mockSearchPanelDomainImage(
+            model,
+            fieldName,
+            modelDomain,
+            enableCounters && noExtra,
+            setLimit && limit
+        );
+        if (enableCounters && !noExtra) {
+            const countDomainImage = this.mockSearchPanelDomainImage(
+                model,
+                fieldName,
+                countDomain,
+                true
+            );
+            for (const [id, values] of modelDomainImage.entries()) {
+                const element = countDomainImage.get(id);
+                values.__count = element ? element.__count : 0;
+            }
+        }
+
+        return modelDomainImage;
+    }
+
+    /**
+     * Simulates a call to the server '_search_panel_domain_image' method.
+     *
+     * @private
+     * @param {string} model
+     * @param {Array[]} domain
+     * @param {string} fieldName
+     * @param {boolean} setCount
+     * @returns {Map}
+     */
+    mockSearchPanelDomainImage(model, fieldName, domain, setCount = false, limit = false) {
+        const field = this.models[model].fields[fieldName];
+        let groupIdName;
+        if (field.type === "many2one") {
+            groupIdName = (value) => value || [false, undefined];
+            // mockReadGroup does not take care of the condition [fieldName, '!=', false]
+            // in the domain defined below !!!
+        } else if (field.type === "selection") {
+            const selection = {};
+            for (const [value, label] of this.models[model].fields[fieldName].selection) {
+                selection[value] = label;
+            }
+            groupIdName = (value) => [value, selection[value]];
+        }
+        domain = new Domain([...domain, [fieldName, "!=", false]]).toList();
+        const groups = this.mockReadGroup(model, {
+            domain,
+            fields: [fieldName],
+            groupby: [fieldName],
+            limit,
+        });
+        const domainImage = new Map();
+        for (const group of groups) {
+            const [id, display_name] = groupIdName(group[fieldName]);
+            const values = { id, display_name };
+            if (setCount) {
+                values.__count = group[fieldName + "_count"];
+            }
+            domainImage.set(id, values);
+        }
+        return domainImage;
+    }
+    /**
+     * Simulates a call to the server '_search_panel_global_counters' method.
+     *
+     * @private
+     * @param {Map} valuesRange
+     * @param {(string|boolean)} parentName 'parent_id' or false
+     */
+    mockSearchPanelGlobalCounters(valuesRange, parentName) {
+        const localCounters = [...valuesRange.keys()].map((id) => valuesRange.get(id).__count);
+        for (let [id, values] of valuesRange.entries()) {
+            const count = localCounters[id];
+            if (count) {
+                let parent_id = values[parentName];
+                while (parent_id) {
+                    values = valuesRange.get(parent_id);
+                    values.__count += count;
+                    parent_id = values[parentName];
+                }
+            }
+        }
+    }
+    /**
+     * Simulates a call to the server '_search_panel_sanitized_parent_hierarchy' method.
+     *
+     * @private
+     * @param {Object[]} records
+     * @param {(string|boolean)} parentName 'parent_id' or false
+     * @param {number[]} ids
+     * @returns {Object[]}
+     */
+    mockSearchPanelSanitizedParentHierarchy(records, parentName, ids) {
+        const getParentId = (record) => record[parentName] && record[parentName][0];
+        const allowedRecords = {};
+        for (const record of records) {
+            allowedRecords[record.id] = record;
+        }
+        const recordsToKeep = {};
+        for (const id of ids) {
+            const ancestorChain = {};
+            let recordId = id;
+            let chainIsFullyIncluded = true;
+            while (chainIsFullyIncluded && recordId) {
+                const knownStatus = recordsToKeep[recordId];
+                if (knownStatus !== undefined) {
+                    chainIsFullyIncluded = knownStatus;
+                    break;
+                }
+                const record = allowedRecords[recordId];
+                if (record) {
+                    ancestorChain[recordId] = record;
+                    recordId = getParentId(record);
+                } else {
+                    chainIsFullyIncluded = false;
+                }
+            }
+            for (const id in ancestorChain) {
+                recordsToKeep[id] = chainIsFullyIncluded;
+            }
+        }
+        return records.filter((rec) => recordsToKeep[rec.id]);
+    }
+    /**
+     * Simulates a call to the server 'search_panel_selection_range' method.
+     *
+     * @private
+     * @param {string} model
+     * @param {string} fieldName
+     * @param {Object} kwargs
+     * @returns {Object[]}
+     */
+    mockSearchPanelSelectionRange(model, fieldName, kwargs) {
+        const enableCounters = kwargs.enable_counters;
+        const expand = kwargs.expand;
+        let domainImage;
+        if (enableCounters || !expand) {
+            const newKwargs = Object.assign({}, kwargs, {
+                only_counters: expand,
+            });
+            domainImage = this.mockSearchPanelFieldImage(model, fieldName, newKwargs);
+        }
+        if (!expand) {
+            return [...domainImage.values()];
+        }
+        const selection = this.models[model].fields[fieldName].selection;
+        const selectionRange = [];
+        for (const [value, label] of selection) {
+            const values = {
+                id: value,
+                display_name: label,
+            };
+            if (enableCounters) {
+                values.__count = domainImage.get(value) ? domainImage.get(value).__count : 0;
+            }
+            selectionRange.push(values);
+        }
+        return selectionRange;
+    }
+
+    /**
+     * Simulates a call to the server 'search_panel_select_range' method.
+     *
+     * @private
+     * @param {string} model
+     * @param {string[]} args
+     * @param {string} args[fieldName]
+     * @param {Object} [kwargs={}]
+     * @param {Array[]} [kwargs.category_domain] domain generated by categories
+     *      (this parameter is used in _search_panel_range)
+     * @param {Array[]} [kwargs.comodel_domain] domain of field values (if relational)
+     *      (this parameter is used in _search_panel_range)
+     * @param {boolean} [kwargs.enable_counters] whether to count records by value
+     * @param {Array[]} [kwargs.filter_domain] domain generated by filters
+     * @param {integer} [kwargs.limit] maximal number of values to fetch
+     * @param {Array[]} [kwargs.search_domain] base domain of search (this parameter
+     *      is used in _search_panel_range)
+     * @returns {Object}
+     */
+    mockSearchPanelSelectRange(model, [fieldName], kwargs) {
+        const field = this.models[model].fields[fieldName];
+        const supportedTypes = ["many2one", "selection"];
+        if (!supportedTypes.includes(field.type)) {
+            throw new Error(
+                `Only types ${supportedTypes} are supported for category (found type ${field.type})`
+            );
+        }
+
+        const modelDomain = kwargs.search_domain || [];
+        const extraDomain = new Domain([
+            ...(kwargs.category_domain || []),
+            ...(kwargs.filter_domain || []),
+        ]).toList();
+
+        if (field.type === "selection") {
+            const newKwargs = Object.assign({}, kwargs, {
+                model_domain: modelDomain,
+                extra_domain: extraDomain,
+            });
+            kwargs.model_domain = modelDomain;
+            return {
+                parent_field: false,
+                values: this.mockSearchPanelSelectionRange(model, fieldName, newKwargs),
+            };
+        }
+
+        const fieldNames = ["display_name"];
+        let hierarchize = "hierarchize" in kwargs ? kwargs.hierarchize : true;
+        let getParentId;
+        let parentName = false;
+        if (hierarchize && this.models[field.relation].fields.parent_id) {
+            parentName = "parent_id"; // in tests, parent field is always 'parent_id'
+            fieldNames.push(parentName);
+            getParentId = (record) => record.parent_id && record.parent_id[0];
+        } else {
+            hierarchize = false;
+        }
+        let comodelDomain = kwargs.comodel_domain || [];
+        const enableCounters = kwargs.enable_counters;
+        const expand = kwargs.expand;
+        const limit = kwargs.limit;
+        let domainImage;
+        if (enableCounters || !expand) {
+            const newKwargs = Object.assign({}, kwargs, {
+                model_domain: modelDomain,
+                extra_domain: extraDomain,
+                only_counters: expand,
+                set_limit: limit && !(expand || hierarchize || comodelDomain),
+            });
+            domainImage = this.mockSearchPanelFieldImage(model, fieldName, newKwargs);
+        }
+        if (!expand && !hierarchize && !comodelDomain.length) {
+            if (limit && domainImage.size === limit) {
+                return { error_msg: "Too many items to display." };
+            }
+            return {
+                parent_field: parentName,
+                values: [...domainImage.values()],
+            };
+        }
+        let imageElementIds;
+        if (!expand) {
+            imageElementIds = [...domainImage.keys()].map(Number);
+            let condition;
+            if (hierarchize) {
+                const records = this.models[field.relation].records;
+                const ancestorIds = new Set();
+                for (const id of imageElementIds) {
+                    let recordId = id;
+                    let record;
+                    while (recordId) {
+                        ancestorIds.add(recordId);
+                        record = records.find((rec) => rec.id === recordId);
+                        recordId = record[parentName];
+                    }
+                }
+                condition = ["id", "in", [...new Set(ancestorIds)]];
+            } else {
+                condition = ["id", "in", imageElementIds];
+            }
+            comodelDomain = new Domain([...comodelDomain, condition]).toList();
+        }
+        let comodelRecords = this.mockSearchRead(field.relation, [comodelDomain, fieldNames], {
+            limit,
+        });
+
+        if (hierarchize) {
+            const ids = expand ? comodelRecords.map((rec) => rec.id) : imageElementIds;
+            comodelRecords = this.mockSearchPanelSanitizedParentHierarchy(
+                comodelRecords,
+                parentName,
+                ids
+            );
+        }
+
+        if (limit && comodelRecords.length === limit) {
+            return { error_msg: "Too many items to display." };
+        }
+        // A map is used to keep the initial order.
+        const fieldRange = new Map();
+        for (const record of comodelRecords) {
+            const values = {
+                id: record.id,
+                display_name: record.display_name,
+            };
+            if (hierarchize) {
+                values[parentName] = getParentId(record);
+            }
+            if (enableCounters) {
+                values.__count = domainImage.get(record.id)
+                    ? domainImage.get(record.id).__count
+                    : 0;
+            }
+            fieldRange.set(record.id, values);
+        }
+
+        if (hierarchize && enableCounters) {
+            this.mockSearchPanelGlobalCounters(fieldRange, parentName);
+        }
+
+        return {
+            parent_field: parentName,
+            values: [...fieldRange.values()],
+        };
+    }
+
+    /**
+     * Simulates a call to the server 'search_panel_select_multi_range' method.
+     *
+     * @private
+     * @param {string} model
+     * @param {string[]} args
+     * @param {string} args[fieldName]
+     * @param {Object} [kwargs={}]
+     * @param {Array[]} [kwargs.category_domain] domain generated by categories
+     * @param {Array[]} [kwargs.comodel_domain] domain of field values (if relational)
+     *      (this parameter is used in _search_panel_range)
+     * @param {boolean} [kwargs.enable_counters] whether to count records by value
+     * @param {Array[]} [kwargs.filter_domain] domain generated by filters
+     * @param {string} [kwargs.group_by] extra field to read on comodel, to group
+     *      comodel records
+     * @param {Array[]} [kwargs.group_domain] dict, one domain for each activated
+     *      group for the group_by (if any). Those domains are used to fech accurate
+     *      counters for values in each group
+     * @param {integer} [kwargs.limit] maximal number of values to fetch
+     * @param {Array[]} [kwargs.search_domain] base domain of search
+     * @returns {Object}
+     */
+    mockSearchPanelSelectMultiRange(model, [fieldName], kwargs) {
+        const field = this.models[model].fields[fieldName];
+        const supportedTypes = ["many2one", "many2many", "selection"];
+        if (!supportedTypes.includes(field.type)) {
+            throw new Error(
+                `Only types ${supportedTypes} are supported for filter (found type ${field.type})`
+            );
+        }
+        let modelDomain = kwargs.search_domain || [];
+        let extraDomain = new Domain([
+            ...(kwargs.category_domain || []),
+            ...(kwargs.filter_domain || []),
+        ]).toList();
+        if (field.type === "selection") {
+            const newKwargs = Object.assign({}, kwargs, {
+                model_domain: modelDomain,
+                extra_domain: extraDomain,
+            });
+            return {
+                values: this.mockSearchPanelSelectionRange(model, fieldName, newKwargs),
+            };
+        }
+        const fieldNames = ["display_name"];
+        const groupBy = kwargs.group_by;
+        let groupIdName;
+        if (groupBy) {
+            const groupByField = this.models[field.relation].fields[groupBy];
+            fieldNames.push(groupBy);
+            if (groupByField.type === "many2one") {
+                groupIdName = (value) => value || [false, "Not set"];
+            } else if (groupByField.type === "selection") {
+                const groupBySelection = Object.assign(
+                    {},
+                    this.models[field.relation].fields[groupBy].selection
+                );
+                groupBySelection[false] = "Not Set";
+                groupIdName = (value) => [value, groupBySelection[value]];
+            } else {
+                groupIdName = (value) => (value ? [value, value] : [false, "Not set"]);
+            }
+        }
+        let comodelDomain = kwargs.comodel_domain || [];
+        const enableCounters = kwargs.enable_counters;
+        const expand = kwargs.expand;
+        const limit = kwargs.limit;
+        if (field.type === "many2many") {
+            const comodelRecords = this.mockSearchRead(
+                field.relation,
+                [comodelDomain, fieldNames],
+                {
+                    limit,
+                }
+            );
+            if (expand && limit && comodelRecords.length === limit) {
+                return { error_msg: "Too many items to display." };
+            }
+
+            const groupDomain = kwargs.group_domain;
+            const fieldRange = [];
+            for (const record of comodelRecords) {
+                const values = {
+                    id: record.id,
+                    display_name: record.display_name,
+                };
+                let groupId;
+                if (groupBy) {
+                    const [gId, gName] = groupIdName(record[groupBy]);
+                    values.group_id = groupId = gId;
+                    values.group_name = gName;
+                }
+                let count;
+                let inImage;
+                if (enableCounters || !expand) {
+                    const searchDomain = new Domain([
+                        ...modelDomain,
+                        [fieldName, "in", record.id],
+                    ]).toList();
+                    let localExtraDomain = extraDomain;
+                    if (groupBy && groupDomain) {
+                        localExtraDomain = new Domain([
+                            ...localExtraDomain,
+                            ...(groupDomain[JSON.stringify(groupId)] || []),
+                        ]).toList();
+                    }
+                    const searchCountDomain = new Domain([
+                        ...searchDomain,
+                        ...localExtraDomain,
+                    ]).toList();
+                    if (enableCounters) {
+                        count = this.mockSearchCount(model, [searchCountDomain]);
+                    }
+                    if (!expand) {
+                        if (enableCounters && JSON.stringify(localExtraDomain) === "[]") {
+                            inImage = count;
+                        } else {
+                            inImage = this.mockSearch(model, [searchDomain], { limit: 1 }).length;
+                        }
+                    }
+                }
+                if (expand || inImage) {
+                    if (enableCounters) {
+                        values.__count = count;
+                    }
+                    fieldRange.push(values);
+                }
+            }
+
+            if (!expand && limit && fieldRange.length === limit) {
+                return { error_msg: "Too many items to display." };
+            }
+
+            return { values: fieldRange };
+        }
+
+        if (field.type === "many2one") {
+            let domainImage;
+            if (enableCounters || !expand) {
+                extraDomain = new Domain([...extraDomain, ...(kwargs.group_domain || [])]).toList();
+                modelDomain = new Domain([...modelDomain, ...(kwargs.group_domain || [])]).toList();
+                const newKwargs = Object.assign({}, kwargs, {
+                    model_domain: modelDomain,
+                    extra_domain: extraDomain,
+                    only_counters: expand,
+                    set_limit: limit && !(expand || groupBy || comodelDomain),
+                });
+                domainImage = this.mockSearchPanelFieldImage(model, fieldName, newKwargs);
+            }
+            if (!expand && !groupBy && !comodelDomain.length) {
+                if (limit && domainImage.size === limit) {
+                    return { error_msg: "Too many items to display." };
+                }
+                return { values: [...domainImage.values()] };
+            }
+            if (!expand) {
+                const imageElementIds = [...domainImage.keys()].map(Number);
+                comodelDomain = new Domain([
+                    ...comodelDomain,
+                    ["id", "in", imageElementIds],
+                ]).toList();
+            }
+            const comodelRecords = this.mockSearchRead(
+                field.relation,
+                [comodelDomain, fieldNames],
+                {
+                    limit,
+                }
+            );
+            if (limit && comodelRecords.length === limit) {
+                return { error_msg: "Too many items to display." };
+            }
+
+            const fieldRange = [];
+            for (const record of comodelRecords) {
+                const values = {
+                    id: record.id,
+                    display_name: record.display_name,
+                };
+                if (groupBy) {
+                    const [groupId, groupName] = groupIdName(record[groupBy]);
+                    values.group_id = groupId;
+                    values.group_name = groupName;
+                }
+                if (enableCounters) {
+                    values.__count = domainImage.get(record.id)
+                        ? domainImage.get(record.id).__count
+                        : 0;
+                }
+                fieldRange.push(values);
+            }
+            return { values: fieldRange };
+        }
+    }
+
     mockSearch(modelName, args, kwargs) {
         const result = this.mockSearchController({
             model: modelName,
@@ -991,497 +1524,6 @@ export class MockServer {
         };
     }
 
-    /**
-     * Simulates a call to the server '_search_panel_domain_image' method.
-     *
-     * @private
-     * @param {string} model
-     * @param {Array[]} domain
-     * @param {string} fieldName
-     * @param {boolean} setCount
-     * @returns {Map}
-     */
-    mockSearchPanelDomainImage(model, fieldName, domain, setCount = false, limit = false) {
-        const field = this.models[model].fields[fieldName];
-        let groupIdName;
-        if (field.type === "many2one") {
-            groupIdName = (value) => value || [false, undefined];
-            // mockReadGroup does not take care of the condition [fieldName, '!=', false]
-            // in the domain defined below !!!
-        } else if (field.type === "selection") {
-            const selection = {};
-            for (const [value, label] of this.models[model].fields[fieldName].selection) {
-                selection[value] = label;
-            }
-            groupIdName = (value) => [value, selection[value]];
-        }
-        domain = Domain.combine([domain, [[fieldName, "!=", false]]]).toList();
-        const groups = this.mockReadGroup(model, {
-            domain,
-            fields: [fieldName],
-            groupby: [fieldName],
-            limit,
-        });
-        const domainImage = new Map();
-        for (const group of groups) {
-            const [id, display_name] = groupIdName(group[fieldName]);
-            const values = { id, display_name };
-            if (setCount) {
-                values.__count = group[fieldName + "_count"];
-            }
-            domainImage.set(id, values);
-        }
-        return domainImage;
-    }
-
-    /**
-     * Simulates a call to the server '_search_panel_field_image' method.
-     *
-     * @private
-     * @param {string} model
-     * @param {string} fieldName
-     * @param {Object} kwargs
-     * @see _mockSearchPanelDomainImage()
-     */
-    mockSearchPanelFieldImage(model, fieldName, kwargs) {
-        const enableCounters = kwargs.enable_counters;
-        const onlyCounters = kwargs.only_counters;
-        const extraDomain = kwargs.extra_domain || [];
-        const normalizedExtra = new Domain(extraDomain).toList();
-        const noExtra = JSON.stringify(normalizedExtra) === "[]";
-        const modelDomain = kwargs.model_domain || [];
-        const countDomain = Domain.combine([modelDomain, extraDomain]).toList();
-
-        const limit = kwargs.limit;
-        const setLimit = kwargs.set_limit;
-
-        if (onlyCounters) {
-            return this.mockSearchPanelDomainImage(model, fieldName, countDomain, true);
-        }
-
-        const modelDomainImage = this.mockSearchPanelDomainImage(
-            model,
-            fieldName,
-            modelDomain,
-            enableCounters && noExtra,
-            setLimit && limit
-        );
-        if (enableCounters && !noExtra) {
-            const countDomainImage = this.mockSearchPanelDomainImage(
-                model,
-                fieldName,
-                countDomain,
-                true
-            );
-            for (const [id, values] of modelDomainImage.entries()) {
-                const element = countDomainImage.get(id);
-                values.__count = element ? element.__count : 0;
-            }
-        }
-
-        return modelDomainImage;
-    }
-
-    /**
-     * Simulates a call to the server '_search_panel_global_counters' method.
-     *
-     * @private
-     * @param {Map} valuesRange
-     * @param {(string|boolean)} parentName 'parent_id' or false
-     */
-    mockSearchPanelGlobalCounters(valuesRange, parentName) {
-        const localCounters = [...valuesRange.keys()].map((id) => valuesRange.get(id).__count);
-        for (let [id, values] of valuesRange.entries()) {
-            const count = localCounters[id];
-            if (count) {
-                let parent_id = values[parentName];
-                while (parent_id) {
-                    values = valuesRange.get(parent_id);
-                    values.__count += count;
-                    parent_id = values[parentName];
-                }
-            }
-        }
-    }
-
-    /**
-     * Simulates a call to the server '_search_panel_sanitized_parent_hierarchy' method.
-     *
-     * @private
-     * @param {Object[]} records
-     * @param {(string|boolean)} parentName 'parent_id' or false
-     * @param {number[]} ids
-     * @returns {Object[]}
-     */
-    mockSearchPanelSanitizedParentHierarchy(records, parentName, ids) {
-        const getParentId = (record) => record[parentName] && record[parentName][0];
-        const allowedRecords = {};
-        for (const record of records) {
-            allowedRecords[record.id] = record;
-        }
-        const recordsToKeep = {};
-        for (const id of ids) {
-            const ancestorChain = {};
-            let recordId = id;
-            let chainIsFullyIncluded = true;
-            while (chainIsFullyIncluded && recordId) {
-                const knownStatus = recordsToKeep[recordId];
-                if (knownStatus !== undefined) {
-                    chainIsFullyIncluded = knownStatus;
-                    break;
-                }
-                const record = allowedRecords[recordId];
-                if (record) {
-                    ancestorChain[recordId] = record;
-                    recordId = getParentId(record);
-                } else {
-                    chainIsFullyIncluded = false;
-                }
-            }
-            for (const id in ancestorChain) {
-                recordsToKeep[id] = chainIsFullyIncluded;
-            }
-        }
-        return records.filter((rec) => recordsToKeep[rec.id]);
-    }
-
-    /**
-     * Simulates a call to the server 'search_panel_select_range' method.
-     *
-     * @private
-     * @param {string} model
-     * @param {string[]} args
-     * @param {string} args[fieldName]
-     * @param {Object} [kwargs={}]
-     * @param {Array[]} [kwargs.category_domain] domain generated by categories
-     *      (this parameter is used in _search_panel_range)
-     * @param {Array[]} [kwargs.comodel_domain] domain of field values (if relational)
-     *      (this parameter is used in _search_panel_range)
-     * @param {boolean} [kwargs.enable_counters] whether to count records by value
-     * @param {Array[]} [kwargs.filter_domain] domain generated by filters
-     * @param {integer} [kwargs.limit] maximal number of values to fetch
-     * @param {Array[]} [kwargs.search_domain] base domain of search (this parameter
-     *      is used in _search_panel_range)
-     * @returns {Object}
-     */
-    mockSearchPanelSelectRange(model, [fieldName], kwargs) {
-        const field = this.models[model].fields[fieldName];
-        const supportedTypes = ["many2one", "selection"];
-        if (!supportedTypes.includes(field.type)) {
-            throw new Error(
-                `Only types ${supportedTypes} are supported for category (found type ${field.type})`
-            );
-        }
-
-        const modelDomain = kwargs.search_domain || [];
-        const extraDomain = Domain.combine([
-            kwargs.category_domain || [],
-            kwargs.filter_domain || [],
-        ]).toList();
-
-        if (field.type === "selection") {
-            const newKwargs = Object.assign({}, kwargs, {
-                model_domain: modelDomain,
-                extra_domain: extraDomain,
-            });
-            kwargs.model_domain = modelDomain;
-            return {
-                parent_field: false,
-                values: this.mockSearchPanelSelectionRange(model, fieldName, newKwargs),
-            };
-        }
-
-        const fieldNames = ["display_name"];
-        let hierarchize = "hierarchize" in kwargs ? kwargs.hierarchize : true;
-        let getParentId;
-        let parentName = false;
-        if (hierarchize && this.models[field.relation].fields.parent_id) {
-            parentName = "parent_id"; // in tests, parent field is always 'parent_id'
-            fieldNames.push(parentName);
-            getParentId = (record) => record.parent_id && record.parent_id[0];
-        } else {
-            hierarchize = false;
-        }
-        let comodelDomain = kwargs.comodel_domain || [];
-        const enableCounters = kwargs.enable_counters;
-        const expand = kwargs.expand;
-        const limit = kwargs.limit;
-        let domainImage;
-        if (enableCounters || !expand) {
-            const newKwargs = Object.assign({}, kwargs, {
-                model_domain: modelDomain,
-                extra_domain: extraDomain,
-                only_counters: expand,
-                set_limit: limit && !(expand || hierarchize || comodelDomain),
-            });
-            domainImage = this.mockSearchPanelFieldImage(model, fieldName, newKwargs);
-        }
-        if (!expand && !hierarchize && !comodelDomain.length) {
-            if (limit && domainImage.size === limit) {
-                return { error_msg: "Too many items to display." };
-            }
-            return {
-                parent_field: parentName,
-                values: [...domainImage.values()],
-            };
-        }
-        let imageElementIds;
-        if (!expand) {
-            imageElementIds = [...domainImage.keys()].map(Number);
-            let condition;
-            if (hierarchize) {
-                const records = this.models[field.relation].records;
-                const ancestorIds = new Set();
-                for (const id of imageElementIds) {
-                    let recordId = id;
-                    let record;
-                    while (recordId) {
-                        ancestorIds.add(recordId);
-                        record = records.find((rec) => rec.id === recordId);
-                        recordId = record[parentName];
-                    }
-                }
-                condition = ["id", "in", [...new Set(ancestorIds)]];
-            } else {
-                condition = ["id", "in", imageElementIds];
-            }
-            comodelDomain = Domain.combine([comodelDomain, [condition]]).toList();
-        }
-        let comodelRecords = this.mockSearchRead(field.relation, [comodelDomain, fieldNames], {
-            limit,
-        });
-
-        if (hierarchize) {
-            const ids = expand ? comodelRecords.map((rec) => rec.id) : imageElementIds;
-            comodelRecords = this.mockSearchPanelSanitizedParentHierarchy(
-                comodelRecords,
-                parentName,
-                ids
-            );
-        }
-
-        if (limit && comodelRecords.length === limit) {
-            return { error_msg: "Too many items to display." };
-        }
-        // A map is used to keep the initial order.
-        const fieldRange = new Map();
-        for (const record of comodelRecords) {
-            const values = {
-                id: record.id,
-                display_name: record.display_name,
-            };
-            if (hierarchize) {
-                values[parentName] = getParentId(record);
-            }
-            if (enableCounters) {
-                values.__count = domainImage.get(record.id)
-                    ? domainImage.get(record.id).__count
-                    : 0;
-            }
-            fieldRange.set(record.id, values);
-        }
-
-        if (hierarchize && enableCounters) {
-            this.mockSearchPanelGlobalCounters(fieldRange, parentName);
-        }
-
-        return {
-            parent_field: parentName,
-            values: [...fieldRange.values()],
-        };
-    }
-
-    /**
-     * Simulates a call to the server 'search_panel_select_multi_range' method.
-     *
-     * @private
-     * @param {string} model
-     * @param {string[]} args
-     * @param {string} args[fieldName]
-     * @param {Object} [kwargs={}]
-     * @param {Array[]} [kwargs.category_domain] domain generated by categories
-     * @param {Array[]} [kwargs.comodel_domain] domain of field values (if relational)
-     *      (this parameter is used in _search_panel_range)
-     * @param {boolean} [kwargs.enable_counters] whether to count records by value
-     * @param {Array[]} [kwargs.filter_domain] domain generated by filters
-     * @param {string} [kwargs.group_by] extra field to read on comodel, to group
-     *      comodel records
-     * @param {Array[]} [kwargs.group_domain] dict, one domain for each activated
-     *      group for the group_by (if any). Those domains are used to fech accurate
-     *      counters for values in each group
-     * @param {integer} [kwargs.limit] maximal number of values to fetch
-     * @param {Array[]} [kwargs.search_domain] base domain of search
-     * @returns {Object}
-     */
-    mockSearchPanelSelectMultiRange(model, [fieldName], kwargs) {
-        const field = this.models[model].fields[fieldName];
-        const supportedTypes = ["many2one", "many2many", "selection"];
-        if (!supportedTypes.includes(field.type)) {
-            throw new Error(
-                `Only types ${supportedTypes} are supported for filter (found type ${field.type})`
-            );
-        }
-        let modelDomain = kwargs.search_domain || [];
-        let extraDomain = Domain.combine([
-            kwargs.category_domain || [],
-            kwargs.filter_domain || [],
-        ]).toList();
-        if (field.type === "selection") {
-            const newKwargs = Object.assign({}, kwargs, {
-                model_domain: modelDomain,
-                extra_domain: extraDomain,
-            });
-            return {
-                values: this.mockSearchPanelSelectionRange(model, fieldName, newKwargs),
-            };
-        }
-        const fieldNames = ["display_name"];
-        const groupBy = kwargs.group_by;
-        let groupIdName;
-        if (groupBy) {
-            const groupByField = this.models[field.relation].fields[groupBy];
-            fieldNames.push(groupBy);
-            if (groupByField.type === "many2one") {
-                groupIdName = (value) => value || [false, "Not set"];
-            } else if (groupByField.type === "selection") {
-                const groupBySelection = Object.assign(
-                    {},
-                    this.models[field.relation].fields[groupBy].selection
-                );
-                groupBySelection[false] = "Not Set";
-                groupIdName = (value) => [value, groupBySelection[value]];
-            } else {
-                groupIdName = (value) => (value ? [value, value] : [false, "Not set"]);
-            }
-        }
-        let comodelDomain = kwargs.comodel_domain || [];
-        const enableCounters = kwargs.enable_counters;
-        const expand = kwargs.expand;
-        const limit = kwargs.limit;
-        if (field.type === "many2many") {
-            const comodelRecords = this.mockSearchRead(
-                field.relation,
-                [comodelDomain, fieldNames],
-                { limit }
-            );
-            if (expand && limit && comodelRecords.length === limit) {
-                return { error_msg: "Too many items to display." };
-            }
-
-            const groupDomain = kwargs.group_domain;
-            const fieldRange = [];
-            for (const record of comodelRecords) {
-                const values = {
-                    id: record.id,
-                    display_name: record.display_name,
-                };
-                let groupId;
-                if (groupBy) {
-                    const [gId, gName] = groupIdName(record[groupBy]);
-                    values.group_id = groupId = gId;
-                    values.group_name = gName;
-                }
-                let count;
-                let inImage;
-                if (enableCounters || !expand) {
-                    const searchDomain = Domain.combine([
-                        modelDomain,
-                        [[fieldName, "in", record.id]],
-                    ]).toList();
-                    let localExtraDomain = extraDomain;
-                    if (groupBy && groupDomain) {
-                        localExtraDomain = Domain.combine([
-                            localExtraDomain,
-                            groupDomain[JSON.stringify(groupId)] || [],
-                        ]).toList();
-                    }
-                    const searchCountDomain = Domain.combine([
-                        searchDomain,
-                        localExtraDomain,
-                    ]).toList();
-                    if (enableCounters) {
-                        count = this.mockSearchCount(model, [searchCountDomain]);
-                    }
-                    if (!expand) {
-                        if (enableCounters && JSON.stringify(localExtraDomain) === "[]") {
-                            inImage = count;
-                        } else {
-                            inImage = this.mockSearch(model, [searchDomain], { limit: 1 }).length;
-                        }
-                    }
-                }
-                if (expand || inImage) {
-                    if (enableCounters) {
-                        values.__count = count;
-                    }
-                    fieldRange.push(values);
-                }
-            }
-
-            if (!expand && limit && fieldRange.length === limit) {
-                return { error_msg: "Too many items to display." };
-            }
-
-            return { values: fieldRange };
-        }
-
-        if (field.type === "many2one") {
-            let domainImage;
-            if (enableCounters || !expand) {
-                extraDomain = Domain.combine([extraDomain, kwargs.group_domain || []]).toList();
-                modelDomain = Domain.combine([modelDomain, kwargs.group_domain || []]).toList();
-                const newKwargs = Object.assign({}, kwargs, {
-                    model_domain: modelDomain,
-                    extra_domain: extraDomain,
-                    only_counters: expand,
-                    set_limit: limit && !(expand || groupBy || comodelDomain),
-                });
-                domainImage = this.mockSearchPanelFieldImage(model, fieldName, newKwargs);
-            }
-            if (!expand && !groupBy && !comodelDomain.length) {
-                if (limit && domainImage.size === limit) {
-                    return { error_msg: "Too many items to display." };
-                }
-                return { values: [...domainImage.values()] };
-            }
-            if (!expand) {
-                const imageElementIds = [...domainImage.keys()].map(Number);
-                comodelDomain = Domain.combine([
-                    comodelDomain,
-                    [["id", "in", imageElementIds]],
-                ]).toList();
-            }
-            const comodelRecords = this.mockSearchRead(
-                field.relation,
-                [comodelDomain, fieldNames],
-                { limit }
-            );
-            if (limit && comodelRecords.length === limit) {
-                return { error_msg: "Too many items to display." };
-            }
-
-            const fieldRange = [];
-            for (const record of comodelRecords) {
-                const values = {
-                    id: record.id,
-                    display_name: record.display_name,
-                };
-                if (groupBy) {
-                    const [groupId, groupName] = groupIdName(record[groupBy]);
-                    values.group_id = groupId;
-                    values.group_name = groupName;
-                }
-                if (enableCounters) {
-                    values.__count = domainImage.get(record.id)
-                        ? domainImage.get(record.id).__count
-                        : 0;
-                }
-                fieldRange.push(values);
-            }
-            return { values: fieldRange };
-        }
-    }
-
     mockWrite(modelName, args) {
         args[0].forEach((id) => this.writeRecord(modelName, args[1], id));
         return true;
@@ -1685,11 +1727,12 @@ export function makeMockServer(serverData, mockRPC) {
     });
     const _mockRPC = async (route, args = {}) => {
         let res;
+        const performRPC = (route, args) => mockServer.performRPC(route, args);
         if (mockRPC) {
-            res = await mockRPC(route, args);
+            res = await mockRPC(route, args, performRPC);
         }
         if (res === undefined) {
-            res = await mockServer.performRPC(route, args);
+            res = await performRPC(route, args);
         }
         return res;
     };
diff --git a/addons/web/static/tests/legacy/control_panel/comparison_menu_tests.js b/addons/web/static/tests/legacy/control_panel/comparison_menu_tests.js
index e376904f503..3e8e813f81f 100644
--- a/addons/web/static/tests/legacy/control_panel/comparison_menu_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/comparison_menu_tests.js
@@ -30,7 +30,7 @@ odoo.define('web.comparison_menu_tests', function (require) {
         },
     }, function () {
 
-        QUnit.module('ComparisonMenu');
+        QUnit.module('ComparisonMenu (legacy)');
 
         QUnit.test('simple rendering', async function (assert) {
             assert.expect(6);
diff --git a/addons/web/static/tests/legacy/control_panel/custom_filter_item_tests.js b/addons/web/static/tests/legacy/control_panel/custom_filter_item_tests.js
index a24f342a1aa..2240c0412a4 100644
--- a/addons/web/static/tests/legacy/control_panel/custom_filter_item_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/custom_filter_item_tests.js
@@ -24,7 +24,7 @@ odoo.define('web.filter_menu_generator_tests', function (require) {
         },
     }, function () {
 
-        QUnit.module('CustomFilterItem');
+        QUnit.module('CustomFilterItem (legacy)');
 
         QUnit.test('basic rendering', async function (assert) {
             assert.expect(17);
diff --git a/addons/web/static/tests/legacy/control_panel/custom_group_by_item_tests.js b/addons/web/static/tests/legacy/control_panel/custom_group_by_item_tests.js
index e5ea4cf59c5..8c024945457 100644
--- a/addons/web/static/tests/legacy/control_panel/custom_group_by_item_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/custom_group_by_item_tests.js
@@ -9,7 +9,7 @@ odoo.define('web.groupby_menu_generator_tests', function (require) {
 
     QUnit.module('Components', {}, function () {
 
-        QUnit.module('CustomGroupByItem');
+        QUnit.module('CustomGroupByItem (legacy)');
 
         QUnit.test('click on add custom group toggle group selector', async function (assert) {
             assert.expect(6);
diff --git a/addons/web/static/tests/legacy/control_panel/favorite_menu_tests.js b/addons/web/static/tests/legacy/control_panel/favorite_menu_tests.js
index b75a6d1dfd4..f3e5af3017f 100644
--- a/addons/web/static/tests/legacy/control_panel/favorite_menu_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/favorite_menu_tests.js
@@ -22,7 +22,7 @@ odoo.define('web.favorite_menu_tests', function (require) {
         },
     }, function () {
 
-        QUnit.module('FavoriteMenu');
+        QUnit.module('FavoriteMenu (legacy)');
 
         QUnit.test('simple rendering with no favorite', async function (assert) {
             assert.expect(8);
diff --git a/addons/web/static/tests/legacy/control_panel/filter_menu_tests.js b/addons/web/static/tests/legacy/control_panel/filter_menu_tests.js
index 2a25ad1a58d..e8a41139a05 100644
--- a/addons/web/static/tests/legacy/control_panel/filter_menu_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/filter_menu_tests.js
@@ -17,7 +17,7 @@ odoo.define('web.filter_menu_tests', function (require) {
         },
     }, function () {
 
-        QUnit.module('FilterMenu');
+        QUnit.module('FilterMenu (legacy)');
 
         QUnit.test('simple rendering with no filter', async function (assert) {
             assert.expect(2);
diff --git a/addons/web/static/tests/legacy/control_panel/groupby_menu_tests.js b/addons/web/static/tests/legacy/control_panel/groupby_menu_tests.js
index 1239f0885fb..27c101331b5 100644
--- a/addons/web/static/tests/legacy/control_panel/groupby_menu_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/groupby_menu_tests.js
@@ -20,7 +20,7 @@ odoo.define('web.groupby_menu_tests', function (require) {
         },
     }, function () {
 
-        QUnit.module('GroupByMenu');
+        QUnit.module('GroupByMenu (legacy)');
 
         QUnit.test('simple rendering with neither groupbys nor groupable fields', async function (assert) {
 
diff --git a/addons/web/static/tests/legacy/views/search_panel_tests.js b/addons/web/static/tests/legacy/views/search_panel_tests.js
index e8d29b76046..bdde2878fcf 100644
--- a/addons/web/static/tests/legacy/views/search_panel_tests.js
+++ b/addons/web/static/tests/legacy/views/search_panel_tests.js
@@ -2383,9 +2383,8 @@ QUnit.module('Views', {
         assert.containsNone(webClient, '.o_content .o_search_panel');
 
         await cpHelpers.switchView(webClient, 'pivot');
-        await legacyExtraNextTick();
-        assert.containsOnce(webClient, '.o_content.o_controller_with_searchpanel .o_pivot');
-        assert.containsOnce(webClient, '.o_content.o_controller_with_searchpanel .o_search_panel');
+        assert.containsOnce(webClient, '.o_content.o_component_with_search_panel .o_pivot');
+        assert.containsOnce(webClient, '.o_content.o_component_with_search_panel .o_search_panel');
     });
 
     QUnit.test('search panel state is shared between views', async function (assert) {
diff --git a/addons/web/static/tests/legacy/views/state_mapping_tests.js b/addons/web/static/tests/legacy/views/state_mapping_tests.js
new file mode 100644
index 00000000000..dbab676b13a
--- /dev/null
+++ b/addons/web/static/tests/legacy/views/state_mapping_tests.js
@@ -0,0 +1,352 @@
+/** @odoo-module **/
+
+import { legacyExtraNextTick } from "@web/../tests/helpers/utils";
+import {
+    getFacetTexts, removeFacet, setupControlPanelServiceRegistry, switchView,
+    toggleMenu,
+    toggleMenuItem
+} from "@web/../tests/search/helpers";
+import { createWebClient, doAction } from "@web/../tests/webclient/helpers";
+import { dialogService } from "@web/core/dialog/dialog_service";
+import { _lt } from "@web/core/l10n/translation";
+import { registry } from "@web/core/registry";
+import { ControlPanel } from "@web/search/control_panel/control_panel";
+import { SearchModel } from "@web/search/search_model";
+import AbstractView from "web.AbstractView";
+import ActionModel from "web.ActionModel";
+import { mock } from "web.test_utils";
+import legacyViewRegistry from "web.view_registry";
+
+const serviceRegistry = registry.category("services");
+const viewRegistry = registry.category("views");
+
+let serverData;
+QUnit.module("Views", (hooks) => {
+    hooks.beforeEach(async () => {
+        serverData = {
+            models: {
+                foo: {
+                    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",
+                            store: true,
+                            sortable: true,
+                        },
+                    },
+                    records: [],
+                },
+            },
+            views: {
+                "foo,false,legacy_toy": `<legacy_toy/>`,
+                "foo,false,toy": `<toy/>`,
+                "foo,false,search": `
+                    <search>
+                        <field name="foo" operator="="/>
+                        <filter name="true_domain" string="True Domain" domain="[(1, '=', 1)]"/>
+                        <filter name="date_domain" string="Date Filter" date="date_field" domain="[]"/>
+                        <filter name="group_by_bar" string="Bar" context="{ 'group_by': 'bar' }"/>
+                        <filter name="group_by_date_field" string="Date GroupBy" context="{ 'group_by': 'date_field' }"/>
+                    </search>
+                `,
+            },
+        };
+        setupControlPanelServiceRegistry();
+        serviceRegistry.add("dialog", dialogService);
+
+        class ToyView extends owl.Component {}
+        ToyView.components = { ControlPanel };
+        ToyView.display_name = _lt("Toy view");
+        ToyView.icon = "fab fa-android";
+        ToyView.multiRecord = true;
+        ToyView.searchMenuTypes = ["filter", "groupBy", "comparison", "favorite"];
+        ToyView.template = owl.tags.xml`
+            <div class="o_toy_view">
+                <ControlPanel t-props="props.info"/>
+            </div>
+        `;
+        ToyView.type = "toy";
+
+        const LegacyToyView = AbstractView.extend({
+            display_name: _lt("Legacy toy view"),
+            icon: "fa fa-bars",
+            multiRecord: true,
+            viewType: "legacy_toy",
+            searchMenuTypes: ["filter", "groupBy", "comparison", "favorite"],
+        });
+
+        viewRegistry.add("toy", ToyView);
+        legacyViewRegistry.add("legacy_toy", LegacyToyView);
+    });
+
+    QUnit.module("State Mappings");
+
+    QUnit.test(
+        "legacy and new views can share search model state (no favorite)",
+        async function (assert) {
+            assert.expect(10);
+
+            const unpatchDate = mock.patchDate(2021, 6, 1, 10, 0, 0);
+
+            const webClient = await createWebClient({ serverData });
+
+            await doAction(webClient, {
+                name: "Action name",
+                res_model: "foo",
+                type: "ir.actions.act_window",
+                views: [
+                    [false, "toy"],
+                    [false, "legacy_toy"],
+                ],
+                context: {
+                    search_default_foo: "ABC",
+                    search_default_true_domain: 1,
+                    search_default_date_domain: 1,
+                    search_default_group_by_bar: 50,
+                    search_default_group_by_date_field: 1,
+                },
+            });
+
+            assert.containsOnce(webClient, ".o_switch_view.o_toy.active");
+            assert.deepEqual(
+                getFacetTexts(webClient).map((s) => s.replace(/\s/, "")),
+                [
+                    "FooABC",
+                    "TrueDomainorDate Filter: July 2021",
+                    "DateGroupBy: Month>Bar",
+                ]
+            );
+
+            await toggleMenu(webClient, "Comparison");
+            await toggleMenuItem(webClient, "Date Filter: Previous Period");
+
+            assert.deepEqual(
+                getFacetTexts(webClient).map((s) => s.replace(/\s/, "")),
+                [
+                    "FooABC",
+                    "TrueDomainorDate Filter: July 2021",
+                    "DateGroupBy: Month>Bar",
+                    "DateFilter: Previous Period",
+                ]
+            );
+
+            await switchView(webClient, "legacy_toy");
+            await legacyExtraNextTick();
+
+            assert.containsOnce(webClient, ".o_switch_view.o_legacy_toy.active");
+            assert.deepEqual(
+                getFacetTexts(webClient).map((s) => s.replace(/\s/, "")),
+                [
+                    "FooABC",
+                    "TrueDomainorDate Filter: July 2021",
+                    "DateGroupBy: Month>Bar",
+                    "DateFilter: Previous Period",
+                ]
+            );
+
+            await removeFacet(webClient, 1);
+
+            assert.deepEqual(
+                getFacetTexts(webClient).map((s) => s.replace(/\s/, "")),
+                [
+                    "FooABC",
+                    "DateGroupBy: Month>Bar",
+                ]
+            );
+
+            await switchView(webClient, "toy");
+
+            assert.containsOnce(webClient, ".o_switch_view.o_toy.active");
+            assert.deepEqual(
+                getFacetTexts(webClient).map((s) => s.replace(/\s/, "")),
+                [
+                    "FooABC",
+                    "DateGroupBy: Month>Bar",
+                ]
+            );
+
+            // Check if update works
+            await removeFacet(webClient, 1);
+
+            assert.deepEqual(
+                getFacetTexts(webClient).map((s) => s.replace(/\s/, "")),
+                [
+                    "FooABC",
+                ]
+            );
+
+            await switchView(webClient, "legacy_toy");
+
+            assert.deepEqual(
+                getFacetTexts(webClient).map((s) => s.replace(/\s/, "")),
+                [
+                    "FooABC",
+                ]
+            );
+
+            unpatchDate();
+        }
+    );
+
+    QUnit.test(
+        "legacy and new views can share search model state (favorite)",
+        async function (assert) {
+            assert.expect(6);
+
+            serverData.models.foo.filters = [
+                {
+                    context: "{}",
+                    domain: "[['foo', '=', 'qsdf']]",
+                    id: 7,
+                    is_default: true,
+                    name: "My favorite",
+                    sort: "[]",
+                    user_id: [2, "Mitchell Admin"],
+                },
+            ];
+
+            const webClient = await createWebClient({ serverData });
+
+            await doAction(webClient, {
+                name: "Action name",
+                res_model: "foo",
+                type: "ir.actions.act_window",
+                views: [
+                    [false, "toy"],
+                    [false, "legacy_toy"],
+                ],
+            });
+
+            assert.containsOnce(webClient, ".o_switch_view.o_toy.active");
+            assert.deepEqual(getFacetTexts(webClient), ["My favorite"]);
+
+            await switchView(webClient, "legacy_toy");
+            await legacyExtraNextTick();
+
+            assert.containsOnce(webClient, ".o_switch_view.o_legacy_toy.active");
+            assert.deepEqual(getFacetTexts(webClient), ["My favorite"]);
+
+            await switchView(webClient, "toy");
+
+            assert.containsOnce(webClient, ".o_switch_view.o_toy.active");
+            assert.deepEqual(getFacetTexts(webClient), ["My favorite"]);
+        }
+    );
+
+    QUnit.test(
+        "legacy and new views with search model extensions can share search model state",
+        async function (assert) {
+            assert.expect(16);
+
+            serverData.views[
+                "foo,1,legacy_toy"
+            ] = `<legacy_toy js_class="legacy_toy_with_extension"/>`;
+
+            class SearchModelExtension extends SearchModel {
+                setup() {
+                    super.setup(...arguments);
+                    this.toyExtension = { locationId: "Grand-Rosière" };
+                }
+
+                exportState() {
+                    const exportedState = super.exportState(...arguments);
+                    exportedState.toyExtension = this.toyExtension;
+                    return exportedState;
+                }
+
+                _importState(state) {
+                    super._importState(state);
+                    this.toyExtension = state.toyExtension;
+                    assert.step(JSON.stringify(state.toyExtension));
+                }
+            }
+
+            const ToyView = viewRegistry.get("toy");
+            ToyView.SearchModel = SearchModelExtension;
+
+            class ToyExtension extends ActionModel.Extension {
+                importState(state) {
+                    super.importState(state); // done even if state is undefined in legacy code
+                    assert.step(JSON.stringify(state) || "no state");
+                }
+                prepareState() {
+                    Object.assign(this.state, {
+                        locationId: "The place to be",
+                    });
+                }
+            }
+            ActionModel.registry.add("toyExtension", ToyExtension);
+
+            const LegacyToyView = legacyViewRegistry.get("legacy_toy");
+
+            const LegacyToyViewWithExtension = LegacyToyView.extend({
+                _createSearchModel(params, extraExtensions = {}) {
+                    Object.assign(extraExtensions, { toyExtension: {} });
+                    return this._super(params, extraExtensions);
+                },
+            });
+            legacyViewRegistry.add("legacy_toy_with_extension", LegacyToyViewWithExtension);
+
+            const webClient = await createWebClient({ serverData });
+
+            await doAction(webClient, {
+                name: "Action name",
+                res_model: "foo",
+                type: "ir.actions.act_window",
+                views: [
+                    [false, "toy"],
+                    [1, "legacy_toy"],
+                ],
+            });
+
+            assert.containsOnce(webClient, ".o_switch_view.o_toy.active");
+
+            await switchView(webClient, "legacy_toy");
+            await legacyExtraNextTick();
+
+            assert.containsOnce(webClient, ".o_switch_view.o_legacy_toy.active");
+            assert.verifySteps([`{"locationId":"Grand-Rosière"}`]);
+
+            await switchView(webClient, "toy");
+
+            assert.containsOnce(webClient, ".o_switch_view.o_toy.active");
+            assert.verifySteps([`{"locationId":"Grand-Rosière"}`]);
+
+            await doAction(webClient, {
+                name: "Action name",
+                res_model: "foo",
+                type: "ir.actions.act_window",
+                views: [
+                    [1, "legacy_toy"],
+                    [false, "toy"],
+                ],
+            });
+            await legacyExtraNextTick();
+
+            assert.containsOnce(webClient, ".o_switch_view.o_legacy_toy.active");
+            assert.verifySteps([`no state`]);
+
+            await switchView(webClient, "toy");
+
+            assert.containsOnce(webClient, ".o_switch_view.o_toy.active");
+            assert.verifySteps([`{"locationId":"The place to be"}`]);
+
+            await switchView(webClient, "legacy_toy");
+            await legacyExtraNextTick();
+
+            assert.containsOnce(webClient, ".o_switch_view.o_legacy_toy.active");
+            assert.verifySteps([`{"locationId":"The place to be"}`]);
+        }
+    );
+});
diff --git a/addons/web/static/tests/search/comparison_menu_tests.js b/addons/web/static/tests/search/comparison_menu_tests.js
new file mode 100644
index 00000000000..8b518524cb0
--- /dev/null
+++ b/addons/web/static/tests/search/comparison_menu_tests.js
@@ -0,0 +1,115 @@
+/** @odoo-module **/
+
+import { patchDate } from "@web/../tests/helpers/utils";
+import { ControlPanel } from "@web/search/control_panel/control_panel";
+import {
+    getFacetTexts,
+    makeWithSearch,
+    removeFacet,
+    setupControlPanelServiceRegistry,
+    toggleComparisonMenu,
+    toggleFilterMenu,
+    toggleMenuItem,
+    toggleMenuItemOption,
+} from "./helpers";
+
+let serverData;
+QUnit.module("Search", (hooks) => {
+    hooks.beforeEach(async () => {
+        serverData = {
+            models: {
+                foo: {
+                    fields: {
+                        birthday: { string: "Birthday", type: "date", store: true, sortable: true },
+                        date_field: { string: "Date", type: "date", store: true, sortable: true },
+                    },
+                },
+            },
+            views: {
+                "foo,false,search": `
+          <search>
+            <filter name="birthday" date="birthday"/>
+            <filter name="date_field" date="date_field"/>
+          </search>
+        `,
+            },
+        };
+        setupControlPanelServiceRegistry();
+    });
+
+    QUnit.module("Comparison");
+
+    QUnit.test("simple rendering", async function (assert) {
+        assert.expect(6);
+        patchDate(1997, 0, 9, 12, 0, 0);
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchMenuTypes: ["filter", "comparison"],
+            searchViewId: false,
+        });
+        assert.containsOnce(controlPanel, ".o_dropdown.o_filter_menu");
+        assert.containsNone(controlPanel, ".o_dropdown.o_comparison_menu");
+        await toggleFilterMenu(controlPanel);
+        await toggleMenuItem(controlPanel, "Birthday");
+        await toggleMenuItemOption(controlPanel, "Birthday", "January");
+        assert.containsOnce(controlPanel, "div.o_comparison_menu > button i.fa.fa-adjust");
+        assert.strictEqual(
+            controlPanel.el
+                .querySelector("div.o_comparison_menu > button span")
+                .innerText.trim()
+                .toUpperCase() /** @todo why do I need to upperCase */,
+            "COMPARISON"
+        );
+        await toggleComparisonMenu(controlPanel);
+        const comparisonOptions = [...controlPanel.el.querySelectorAll(".o_comparison_menu li")];
+        assert.strictEqual(comparisonOptions.length, 2);
+        assert.deepEqual(
+            comparisonOptions.map((e) => e.innerText.trim()),
+            ["Birthday: Previous Period", "Birthday: Previous Year"]
+        );
+    });
+
+    QUnit.test("activate a comparison works", async function (assert) {
+        assert.expect(5);
+        patchDate(1997, 0, 9, 12, 0, 0);
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchMenuTypes: ["filter", "comparison"],
+            searchViewId: false,
+        });
+        await toggleFilterMenu(controlPanel);
+        await toggleMenuItem(controlPanel, "Birthday");
+        await toggleMenuItemOption(controlPanel, "Birthday", "January");
+        await toggleComparisonMenu(controlPanel);
+        await toggleMenuItem(controlPanel, "Birthday: Previous Period");
+        assert.deepEqual(getFacetTexts(controlPanel), [
+            "Birthday: January 1997",
+            "Birthday: Previous Period",
+        ]);
+        await toggleFilterMenu(controlPanel);
+        await toggleMenuItem(controlPanel, "Date");
+        await toggleMenuItemOption(controlPanel, "Date", "December");
+        await toggleComparisonMenu(controlPanel);
+        await toggleMenuItem(controlPanel, "Date: Previous Year");
+        assert.deepEqual(getFacetTexts(controlPanel), [
+            ["Birthday: January 1997", "Date: December 1996"].join("or"),
+            "Date: Previous Year",
+        ]);
+        await toggleFilterMenu(controlPanel);
+        await toggleMenuItem(controlPanel, "Date");
+        await toggleMenuItemOption(controlPanel, "Date", "1996");
+        assert.deepEqual(getFacetTexts(controlPanel), ["Birthday: January 1997"]);
+        await toggleComparisonMenu(controlPanel);
+        await toggleMenuItem(controlPanel, "Birthday: Previous Year");
+        assert.deepEqual(getFacetTexts(controlPanel), [
+            "Birthday: January 1997",
+            "Birthday: Previous Year",
+        ]);
+        await removeFacet(controlPanel);
+        assert.deepEqual(getFacetTexts(controlPanel), []);
+    });
+});
diff --git a/addons/web/static/tests/search/control_panel.js b/addons/web/static/tests/search/control_panel.js
index 6285de74c6d..589ccd875cf 100644
--- a/addons/web/static/tests/search/control_panel.js
+++ b/addons/web/static/tests/search/control_panel.js
@@ -1,108 +1,111 @@
 /** @odoo-module **/
 
-import { actionService } from "@web/webclient/actions/action_service";
 import { click } from "@web/../tests/helpers/utils";
 import { ControlPanel } from "@web/search/control_panel/control_panel";
-import { getFixture } from "@web/../tests/helpers/utils";
-import { makeTestEnv } from "@web/../tests/helpers/mock_env";
-import { notificationService } from "@web/core/notifications/notification_service";
-import { patchWithCleanup } from "@web/../tests/helpers/utils";
-import { registerCleanup } from "@web/../tests/helpers/cleanup";
-import { registry } from "@web/core/registry";
+import { makeWithSearch, setupControlPanelServiceRegistry } from "./helpers";
 
-const serviceRegistry = registry.category("services");
-
-const { mount } = owl;
-
-/**
- * @param {MakeViewParams} params
- * @returns {owl.Component}
- */
-export async function makeControlPanel(params = {}) {
-    const serverData = params.serverData;
-    const mockRPC = params.mockRPC;
-    const props = Object.assign({}, params);
-    delete props.serverData;
-    delete props.mockRPC;
-
-    const env = await makeTestEnv({ serverData, mockRPC });
-    const target = getFixture();
-
-    const controlPanel = await mount(ControlPanel, { env, props, target });
-
-    registerCleanup(() => controlPanel.destroy());
-
-    return controlPanel;
-}
-
-QUnit.module("ControlPanel", {
-    async beforeEach() {
-        serviceRegistry.add("action", actionService);
-        serviceRegistry.add("notification", notificationService);
-    },
-});
-
-QUnit.test("simple rendering", async (assert) => {
-    const controlPanel = await makeControlPanel({
-        display: {
-            "top-right": false,
-        },
-    });
-    assert.containsOnce(controlPanel, ".o_cp_top");
-    assert.containsOnce(controlPanel, ".o_cp_top_left");
-    assert.containsNone(controlPanel, ".o_cp_top_right");
-    assert.containsOnce(controlPanel, ".o_cp_bottom");
-    assert.containsOnce(controlPanel, ".o_cp_bottom_left");
-    assert.containsOnce(controlPanel, ".o_cp_bottom_right");
-
-    assert.containsNone(controlPanel, ".o_cp_switch_buttons");
-
-    assert.containsOnce(controlPanel, ".breadcrumb");
-    assert.containsOnce(controlPanel, ".breadcrumb li.breadcrumb-item");
-    assert.strictEqual(controlPanel.el.querySelector("li.breadcrumb-item").innerText, "Unnamed");
-});
-
-QUnit.test("breadcrumbs prop", async (assert) => {
-    const controlPanel = await makeControlPanel({
-        breadcrumbs: [{ jsId: "controller_7", name: "Previous" }],
-        displayName: "Current",
+let serverData;
+QUnit.module("Search", (hooks) => {
+    hooks.beforeEach(async () => {
+        serverData = {
+            models: {
+                foo: {
+                    fields: {},
+                },
+            },
+            views: {
+                "foo,false,search": `<search/>`,
+            },
+        };
+        setupControlPanelServiceRegistry();
     });
 
-    assert.containsN(controlPanel, ".breadcrumb li.breadcrumb-item", 2);
-    const breadcrumbItems = controlPanel.el.querySelectorAll("li.breadcrumb-item");
-    assert.strictEqual(breadcrumbItems[0].innerText, "Previous");
-    assert.hasClass(breadcrumbItems[1], "active");
-    assert.strictEqual(breadcrumbItems[1].innerText, "Current");
+    QUnit.module("ControlPanel");
 
-    controlPanel.env.services.action.restore = (jsId) => {
-        assert.step(jsId);
-    };
+    QUnit.test("simple rendering", async (assert) => {
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            componentProps: {
+                display: {
+                    "top-right": false,
+                },
+            },
+            searchMenuTypes: [],
+        });
 
-    await click(breadcrumbItems[0]);
-    assert.verifySteps(["controller_7"]);
-});
+        assert.containsOnce(controlPanel, ".o_cp_top");
+        assert.containsOnce(controlPanel, ".o_cp_top_left");
+        assert.containsNone(controlPanel, ".o_cp_top_right");
+        assert.containsOnce(controlPanel, ".o_cp_bottom");
+        assert.containsOnce(controlPanel, ".o_cp_bottom_left");
+        assert.containsOnce(controlPanel, ".o_cp_bottom_right");
 
-QUnit.test("viewSwitcherEntries prop", async (assert) => {
-    const controlPanel = await makeControlPanel({
-        viewSwitcherEntries: [
-            { type: "list", active: true, icon: "fa-list-ul", name: "List" },
-            { type: "kanban", icon: "fa-th-large", name: "Kanban" },
-        ],
+        assert.containsNone(controlPanel, ".o_cp_switch_buttons");
+
+        assert.containsOnce(controlPanel, ".breadcrumb");
+        assert.containsOnce(controlPanel, ".breadcrumb li.breadcrumb-item");
+        assert.strictEqual(
+            controlPanel.el.querySelector("li.breadcrumb-item").innerText,
+            "Unnamed"
+        );
     });
 
-    assert.containsOnce(controlPanel, ".o_cp_switch_buttons");
-    assert.containsN(controlPanel, ".o_switch_view", 2);
-    const views = controlPanel.el.querySelectorAll(".o_switch_view");
+    QUnit.test("breadcrumbs prop", async (assert) => {
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            componentProps: {
+                breadcrumbs: [{ jsId: "controller_7", name: "Previous" }],
+                displayName: "Current",
+            },
+            searchMenuTypes: [],
+        });
 
-    assert.strictEqual(views[0].getAttribute("data-tooltip"), "List");
-    assert.hasClass(views[0], "active");
-    assert.strictEqual(views[1].getAttribute("data-tooltip"), "Kanban");
-    assert.hasClass(views[1], "fa-th-large");
+        assert.containsN(controlPanel, ".breadcrumb li.breadcrumb-item", 2);
+        const breadcrumbItems = controlPanel.el.querySelectorAll("li.breadcrumb-item");
+        assert.strictEqual(breadcrumbItems[0].innerText, "Previous");
+        assert.hasClass(breadcrumbItems[1], "active");
+        assert.strictEqual(breadcrumbItems[1].innerText, "Current");
 
-    controlPanel.env.services.action.switchView = (viewType) => {
-        assert.step(viewType);
-    };
+        controlPanel.env.services.action.restore = (jsId) => {
+            assert.step(jsId);
+        };
 
-    await click(views[1]);
-    assert.verifySteps(["kanban"]);
+        await click(breadcrumbItems[0]);
+        assert.verifySteps(["controller_7"]);
+    });
+
+    QUnit.test("viewSwitcherEntries prop", async (assert) => {
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            componentProps: {
+                viewSwitcherEntries: [
+                    { type: "list", active: true, icon: "fa-list-ul", name: "List" },
+                    { type: "kanban", icon: "fa-th-large", name: "Kanban" },
+                ],
+            },
+            searchMenuTypes: [],
+        });
+
+        assert.containsOnce(controlPanel, ".o_cp_switch_buttons");
+        assert.containsN(controlPanel, ".o_switch_view", 2);
+        const views = controlPanel.el.querySelectorAll(".o_switch_view");
+
+        assert.strictEqual(views[0].getAttribute("data-tooltip"), "List");
+        assert.hasClass(views[0], "active");
+        assert.strictEqual(views[1].getAttribute("data-tooltip"), "Kanban");
+        assert.hasClass(views[1], "fa-th-large");
+
+        controlPanel.env.services.action.switchView = (viewType) => {
+            assert.step(viewType);
+        };
+
+        await click(views[1]);
+        assert.verifySteps(["kanban"]);
+    });
 });
diff --git a/addons/web/static/tests/search/custom_favorite_item_tests.js b/addons/web/static/tests/search/custom_favorite_item_tests.js
new file mode 100644
index 00000000000..117448e7d69
--- /dev/null
+++ b/addons/web/static/tests/search/custom_favorite_item_tests.js
@@ -0,0 +1,462 @@
+/** @odoo-module **/
+
+import { triggerEvent } from "@web/../tests/helpers/utils";
+import { dialogService } from "@web/core/dialog/dialog_service";
+import { registry } from "@web/core/registry";
+import { ControlPanel } from "@web/search/control_panel/control_panel";
+import { FavoriteMenu } from "@web/search/favorite_menu/favorite_menu";
+import { useSetupAction } from "@web/webclient/actions/action_hook";
+import {
+    editFavoriteName,
+    editSearch,
+    getFacetTexts,
+    makeWithSearch,
+    saveFavorite,
+    setupControlPanelServiceRegistry,
+    toggleFavoriteMenu,
+    toggleSaveFavorite,
+    validateSearch,
+} from "./helpers";
+
+const serviceRegistry = registry.category("services");
+
+/**
+ * @param {Component} comp
+ */
+async function toggleDefaultCheckBox(comp) {
+    const checkbox = comp.el.querySelector("input[type='checkbox']");
+    checkbox.checked = !checkbox.checked;
+    await triggerEvent(checkbox, null, "change");
+}
+
+/**
+ * @param {Component} comp
+ */
+async function toggleShareCheckBox(comp) {
+    const checkbox = comp.el.querySelectorAll("input[type='checkbox']")[1];
+    checkbox.checked = !checkbox.checked;
+    await triggerEvent(checkbox, null, "change");
+}
+
+let serverData;
+QUnit.module("Search", (hooks) => {
+    hooks.beforeEach(async () => {
+        serverData = {
+            models: {
+                foo: {
+                    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 },
+                    },
+                    records: {},
+                },
+            },
+            views: {
+                "foo,false,search": `<search/>`,
+            },
+        };
+        setupControlPanelServiceRegistry();
+        serviceRegistry.add("dialog", dialogService);
+    });
+
+    QUnit.module("CustomFavoriteItem");
+
+    QUnit.test("simple rendering", async function (assert) {
+        assert.expect(3);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchMenuTypes: ["favorite"],
+            searchViewId: false,
+            displayName: "Action Name",
+        });
+
+        await toggleFavoriteMenu(controlPanel);
+        await 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"]
+        );
+    });
+
+    QUnit.test("favorites use by default and share are exclusive", async function (assert) {
+        assert.expect(11);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchMenuTypes: ["favorite"],
+            searchViewId: false,
+        });
+
+        await toggleFavoriteMenu(controlPanel);
+        await 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 toggleDefaultCheckBox(controlPanel);
+
+        assert.ok(checkboxes[0].checked, "The first checkbox is checked");
+        assert.notOk(checkboxes[1].checked, "The second checkbox is not checked");
+
+        await toggleShareCheckBox(controlPanel);
+
+        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 toggleDefaultCheckBox(controlPanel);
+
+        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 toggleDefaultCheckBox(controlPanel);
+
+        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)");
+    });
+
+    QUnit.test("save filter", async function (assert) {
+        assert.expect(1);
+
+        class TestComponent extends owl.Component {
+            setup() {
+                useSetupAction({
+                    saveParams: () => {
+                        return {
+                            orderBy: [
+                                { asc: true, name: "foo" },
+                                { asc: false, name: "bar" },
+                            ],
+                        };
+                    },
+                });
+            }
+        }
+        TestComponent.components = { FavoriteMenu };
+        TestComponent.template = owl.tags.xml`<div><FavoriteMenu/></div>`;
+
+        const comp = await makeWithSearch({
+            serverData,
+            mockRPC: (_, args) => {
+                if (args.model === "ir.filters" && args.method === "create_or_replace") {
+                    const irFilter = args.args[0];
+                    assert.deepEqual(irFilter.sort, '["foo","bar desc"]');
+                    return 7; // fake serverSideId
+                }
+            },
+            resModel: "foo",
+            Component: TestComponent,
+            searchViewId: false,
+        });
+
+        await toggleFavoriteMenu(comp);
+        await toggleSaveFavorite(comp);
+        await editFavoriteName(comp, "aaa");
+        await saveFavorite(comp);
+    });
+
+    QUnit.test("dynamic filters are saved dynamic", async function (assert) {
+        assert.expect(3);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            mockRPC: (_, args) => {
+                if (args.model === "ir.filters" && args.method === "create_or_replace") {
+                    const irFilter = args.args[0];
+                    assert.deepEqual(
+                        irFilter.domain,
+                        '[("date_field", ">=", (context_today() + relativedelta()).strftime("%Y-%m-%d"))]'
+                    );
+                    return 7; // fake serverSideId
+                }
+            },
+            resModel: "foo",
+            Component: ControlPanel,
+            searchMenuTypes: ["favorite"],
+            searchViewId: false,
+            searchViewArch: `
+                    <search>
+                        <filter string="Filter" name="filter" domain="[('date_field', '>=', (context_today() + relativedelta()).strftime('%Y-%m-%d'))]"/>
+                    </search>
+                `,
+            context: { search_default_filter: 1 },
+        });
+
+        assert.deepEqual(getFacetTexts(controlPanel), ["Filter"]);
+
+        await toggleFavoriteMenu(controlPanel);
+        await toggleSaveFavorite(controlPanel);
+        await editFavoriteName(controlPanel, "My favorite");
+        await saveFavorite(controlPanel);
+
+        assert.deepEqual(getFacetTexts(controlPanel), ["My favorite"]);
+    });
+
+    QUnit.test("save filters created via autocompletion works", async function (assert) {
+        assert.expect(4);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            mockRPC: (_, args) => {
+                if (args.model === "ir.filters" && args.method === "create_or_replace") {
+                    const irFilter = args.args[0];
+                    assert.deepEqual(irFilter.domain, '[("foo", "ilike", "a")]');
+                    return 7; // fake serverSideId
+                }
+            },
+            resModel: "foo",
+            Component: ControlPanel,
+            searchMenuTypes: ["favorite"],
+            searchViewId: false,
+            searchViewArch: `
+                    <search>
+                        <field name="foo"/>
+                    </search>
+                `,
+        });
+
+        assert.deepEqual(getFacetTexts(controlPanel), []);
+
+        await editSearch(controlPanel, "a");
+        await validateSearch(controlPanel);
+
+        assert.deepEqual(getFacetTexts(controlPanel), ["Foo\na"]);
+
+        await toggleFavoriteMenu(controlPanel);
+        await toggleSaveFavorite(controlPanel);
+        await editFavoriteName(controlPanel, "My favorite");
+        await saveFavorite(controlPanel);
+
+        assert.deepEqual(getFacetTexts(controlPanel), ["My favorite"]);
+    });
+
+    QUnit.test(
+        "favorites have unique descriptions (the submenus of the favorite menu are correctly updated)",
+        async function (assert) {
+            assert.expect(5);
+
+            serviceRegistry.add(
+                "notification",
+                {
+                    start() {
+                        return {
+                            add(message, options) {
+                                assert.strictEqual(
+                                    message,
+                                    "A filter with same name already exists."
+                                );
+                                assert.deepEqual(options, { type: "danger" });
+                            },
+                        };
+                    },
+                },
+                { force: true }
+            );
+
+            const controlPanel = await makeWithSearch({
+                serverData,
+                mockRPC: (route, args) => {
+                    if (args.model === "ir.filters" && args.method === "create_or_replace") {
+                        const irFilter = args.args[0];
+                        assert.deepEqual(irFilter, {
+                            action_id: false,
+                            context: { group_by: [] },
+                            domain: "[]",
+                            is_default: false,
+                            model_id: "foo",
+                            name: "My favorite 2",
+                            sort: "[]",
+                            user_id: 7,
+                        });
+                        return 2; // serverSideId
+                    }
+                },
+                resModel: "foo",
+                Component: ControlPanel,
+                searchMenuTypes: ["favorite"],
+                searchViewId: false,
+                irFilters: [
+                    {
+                        context: "{}",
+                        domain: "[]",
+                        id: 1,
+                        is_default: false,
+                        name: "My favorite",
+                        sort: "[]",
+                        user_id: [2, "Mitchell Admin"],
+                    },
+                ],
+            });
+
+            await toggleFavoriteMenu(controlPanel);
+            await toggleSaveFavorite(controlPanel);
+
+            // first try: should fail
+            await editFavoriteName(controlPanel, "My favorite");
+            await saveFavorite(controlPanel);
+
+            // second try: should succeed
+            await editFavoriteName(controlPanel, "My favorite 2");
+            await saveFavorite(controlPanel);
+
+            // third try: should fail
+            await editFavoriteName(controlPanel, "My favorite 2");
+            await saveFavorite(controlPanel);
+        }
+    );
+
+    QUnit.skip("save search filter in modal", async function (assert) {
+        /** @todo I don't know yet how to convert this test */
+        // assert.expect(5);
+        // serverData.models = {
+        //     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 toggleFilterMenu(".modal");
+        // await toggleAddCustomFilter(".modal");
+        // assert.strictEqual(
+        //     document.querySelector(".o_filter_condition select.o_generator_menu_field").value,
+        //     "date_field",
+        //     "date field should be selected"
+        // );
+        // await applyFilter(".modal");
+        // assert.containsNone(document.body, "tr.o_data_row", "should display 0 records");
+        // // Save this search
+        // await toggleFavoriteMenu(".modal");
+        // await 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 click(document.querySelector(".o_add_favorite button.btn-primary"));
+        // form.destroy();
+    });
+});
diff --git a/addons/web/static/tests/search/custom_filter_item_tests.js b/addons/web/static/tests/search/custom_filter_item_tests.js
new file mode 100644
index 00000000000..918f5115eff
--- /dev/null
+++ b/addons/web/static/tests/search/custom_filter_item_tests.js
@@ -0,0 +1,685 @@
+/** @odoo-module **/
+
+import { registerCleanup } from "@web/../tests/helpers/cleanup";
+import { click, patchDate, patchWithCleanup } from "@web/../tests/helpers/utils";
+import { localization } from "@web/core/l10n/localization";
+import { ControlPanel } from "@web/search/control_panel/control_panel";
+import {
+    addCondition,
+    applyFilter,
+    editConditionField,
+    editConditionOperator,
+    editConditionValue,
+    getFacetTexts,
+    isItemSelected,
+    makeWithSearch,
+    removeFacet,
+    setupControlPanelServiceRegistry,
+    toggleAddCustomFilter,
+    toggleFilterMenu,
+    toggleMenuItem,
+} from "./helpers";
+
+function getDomain(controlPanel) {
+    return controlPanel.env.searchModel.domain;
+}
+
+let serverData;
+QUnit.module("Search", (hooks) => {
+    hooks.beforeEach(async () => {
+        serverData = {
+            models: {
+                foo: {
+                    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",
+                            digits: [999, 1],
+                            searchable: true,
+                        },
+                        color: {
+                            name: "color",
+                            string: "Color",
+                            type: "selection",
+                            selection: [
+                                ["black", "Black"],
+                                ["white", "White"],
+                            ],
+                            searchable: true,
+                        },
+                    },
+                    records: {},
+                },
+            },
+            views: {
+                "foo,false,search": `<search/>`,
+            },
+        };
+        setupControlPanelServiceRegistry();
+    });
+
+    QUnit.module("CustomFilterItem");
+
+    QUnit.test("basic rendering", async function (assert) {
+        assert.expect(14);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchViewId: false,
+            searchMenuTypes: ["filter"],
+        });
+
+        await toggleFilterMenu(controlPanel);
+
+        const customFilterItem = controlPanel.el.querySelector(".o_add_custom_filter_menu");
+
+        assert.strictEqual(customFilterItem.innerText.trim(), "Add Custom Filter");
+
+        await toggleAddCustomFilter(controlPanel);
+
+        // Single condition
+        assert.containsOnce(customFilterItem, ".o_filter_condition");
+        assert.containsOnce(
+            customFilterItem,
+            ".o_filter_condition > select.o_generator_menu_field"
+        );
+        assert.containsOnce(
+            customFilterItem,
+            ".o_filter_condition > select.o_generator_menu_operator"
+        );
+        assert.containsOnce(customFilterItem, ".o_filter_condition > span.o_generator_menu_value");
+        assert.containsNone(customFilterItem, ".o_filter_condition .o_or_filter");
+        assert.containsNone(customFilterItem, ".o_filter_condition .o_generator_menu_delete");
+
+        // no deletion allowed on single condition
+        assert.containsNone(customFilterItem, ".o_filter_condition > i.o_generator_menu_delete");
+
+        // Buttons
+        assert.containsOnce(customFilterItem, "button.o_apply_filter");
+        assert.containsOnce(customFilterItem, "button.o_add_condition");
+
+        assert.containsOnce(customFilterItem, ".o_filter_condition");
+
+        await click(customFilterItem, "button.o_add_condition");
+
+        assert.containsN(customFilterItem, ".o_filter_condition", 2);
+        assert.containsOnce(customFilterItem, ".o_filter_condition .o_or_filter");
+        assert.containsN(customFilterItem, ".o_filter_condition .o_generator_menu_delete", 2);
+    });
+
+    QUnit.test(
+        'should have Date and ID field proposed in that order in "Add custom Filter" submenu',
+        async function (assert) {
+            assert.expect(2);
+
+            const controlPanel = await makeWithSearch({
+                serverData,
+                resModel: "foo",
+                Component: ControlPanel,
+                searchViewId: false,
+                searchMenuTypes: ["filter"],
+                searchViewFields: {
+                    date_field: {
+                        name: "date_field",
+                        string: "Date",
+                        type: "date",
+                        store: true,
+                        sortable: true,
+                        searchable: true,
+                    },
+                    foo: { string: "Foo", type: "char", store: true, sortable: true },
+                },
+            });
+
+            await toggleFilterMenu(controlPanel);
+            await toggleAddCustomFilter(controlPanel);
+            const optionEls = controlPanel.el.querySelectorAll(
+                ".o_filter_condition > select.o_generator_menu_field option"
+            );
+            assert.strictEqual(optionEls[0].innerText.trim(), "Date");
+            assert.strictEqual(optionEls[1].innerText.trim(), "ID");
+        }
+    );
+
+    QUnit.test("deactivate a new custom filter works", async function (assert) {
+        assert.expect(4);
+
+        patchDate(2020, 1, 5, 12, 20, 0);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchViewId: false,
+            searchMenuTypes: ["filter"],
+            searchViewFields: {
+                date_field: {
+                    name: "date_field",
+                    string: "Date",
+                    type: "date",
+                    store: true,
+                    sortable: true,
+                    searchable: true,
+                },
+            },
+        });
+
+        await toggleFilterMenu(controlPanel);
+        await toggleAddCustomFilter(controlPanel);
+        await applyFilter(controlPanel);
+
+        assert.ok(isItemSelected(controlPanel, 'Date is equal to "02/05/2020"'));
+        assert.deepEqual(getFacetTexts(controlPanel), ['Date is equal to "02/05/2020"']);
+
+        await toggleMenuItem(controlPanel, 'Date is equal to "02/05/2020"');
+
+        assert.notOk(isItemSelected(controlPanel, 'Date is equal to "02/05/2020"'));
+        assert.deepEqual(getFacetTexts(controlPanel), []);
+    });
+
+    QUnit.test("custom OR filter presets new condition from preceding", async function (assert) {
+        assert.expect(4);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchViewId: false,
+            searchMenuTypes: ["filter"],
+        });
+
+        await toggleFilterMenu(controlPanel);
+        await toggleAddCustomFilter(controlPanel);
+
+        // Retrieve second selectable values for field and operator dropdowns
+        const secondFieldName = controlPanel.el.querySelector(
+            ".o_generator_menu_field option:nth-of-type(2)"
+        ).value;
+        const secondOperator = controlPanel.el.querySelector(
+            ".o_generator_menu_operator option:nth-of-type(2)"
+        ).value;
+
+        // Check if they really exist…
+        assert.ok(!!secondFieldName);
+        assert.ok(!!secondOperator);
+
+        // Add first filter condition
+        await editConditionField(controlPanel, 0, secondFieldName);
+        await editConditionOperator(controlPanel, 0, secondOperator);
+
+        // Add a second conditon on the filter being created
+        await addCondition(controlPanel);
+
+        // Check the defaults for field and operator dropdowns
+        assert.strictEqual(
+            controlPanel.el.querySelector(
+                ".o_filter_condition:nth-of-type(2) .o_generator_menu_field"
+            ).value,
+            secondFieldName
+        );
+        assert.strictEqual(
+            controlPanel.el.querySelector(
+                ".o_filter_condition:nth-of-type(2) .o_generator_menu_operator"
+            ).value,
+            secondOperator
+        );
+    });
+
+    QUnit.test("add a custom filter works", async function (assert) {
+        assert.expect(2);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchViewId: false,
+            searchMenuTypes: ["filter"],
+            searchViewFields: {},
+        });
+
+        await toggleFilterMenu(controlPanel);
+        await toggleAddCustomFilter(controlPanel);
+        // choose ID field in 'Add Custom filter' menu and value 1
+        await editConditionField(controlPanel, 0, "id");
+        await editConditionValue(controlPanel, 0, 1);
+
+        await applyFilter(controlPanel);
+
+        assert.deepEqual(getFacetTexts(controlPanel), ['ID is "1"']);
+        assert.deepEqual(getDomain(controlPanel), [["id", "=", 1]]);
+    });
+
+    QUnit.test("adding a simple filter works", async function (assert) {
+        assert.expect(11);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchViewId: false,
+            searchMenuTypes: ["filter"],
+            searchViewFields: {
+                boolean_field: {
+                    name: "boolean_field",
+                    string: "Boolean Field",
+                    type: "boolean",
+                    default: true,
+                    searchable: true,
+                },
+            },
+        });
+
+        await toggleFilterMenu(controlPanel);
+
+        assert.deepEqual(getFacetTexts(controlPanel), []);
+        assert.deepEqual(getDomain(controlPanel), []);
+
+        assert.containsNone(controlPanel, ".o_menu_item");
+        assert.containsOnce(controlPanel, ".o_add_custom_filter_menu button.o_dropdown_toggler");
+        // the 'Add Custom Filter' menu should be closed;
+        assert.containsNone(controlPanel, ".o_add_custom_filter_menu ul.o_dropdown_menu");
+
+        await toggleAddCustomFilter(controlPanel);
+        // the 'Add Custom Filter' menu should be open;
+        assert.containsOnce(controlPanel, ".o_add_custom_filter_menu ul.o_dropdown_menu");
+
+        await applyFilter(controlPanel);
+
+        assert.deepEqual(getFacetTexts(controlPanel), ["Boolean Field is true"]);
+        assert.deepEqual(getDomain(controlPanel), [["boolean_field", "=", true]]);
+
+        assert.containsOnce(controlPanel, ".o_menu_item");
+        assert.containsOnce(controlPanel, ".o_add_custom_filter_menu button.o_dropdown_toggler");
+        // the 'Add Custom Filter' menu should be closed;
+        assert.containsNone(controlPanel, ".o_add_custom_filter_menu ul.o_dropdown_menu");
+    });
+
+    QUnit.test("selection field: default and updated value", async function (assert) {
+        assert.expect(10);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchViewId: false,
+            searchMenuTypes: ["filter"],
+        });
+
+        // Default value
+        await toggleFilterMenu(controlPanel);
+
+        assert.containsN(controlPanel, ".o_menu_item", 0);
+        assert.containsN(controlPanel, ".dropdown-divider", 0);
+
+        await toggleAddCustomFilter(controlPanel);
+        await editConditionField(controlPanel, 0, "color");
+        await applyFilter(controlPanel);
+
+        assert.deepEqual(getFacetTexts(controlPanel), ['Color is "black"']);
+        assert.deepEqual(getDomain(controlPanel), [["color", "=", "black"]]);
+
+        assert.containsN(controlPanel, ".o_menu_item", 1);
+        assert.containsN(controlPanel, ".dropdown-divider", 1);
+
+        // deactivate custom filter
+        await removeFacet(controlPanel);
+
+        // Updated value
+        await toggleFilterMenu(controlPanel);
+        await toggleAddCustomFilter(controlPanel);
+        await editConditionField(controlPanel, 0, "color");
+        await editConditionValue(controlPanel, 0, "white");
+        await applyFilter(controlPanel);
+
+        assert.deepEqual(getFacetTexts(controlPanel), ['Color is "white"']);
+        assert.deepEqual(getDomain(controlPanel), [["color", "=", "white"]]);
+
+        assert.containsN(controlPanel, ".o_menu_item", 2);
+        assert.containsN(controlPanel, ".dropdown-divider", 2);
+    });
+
+    QUnit.test(
+        "commit search with an extended proposition with field char does not cause a crash",
+        async function (assert) {
+            assert.expect(12);
+
+            const controlPanel = await makeWithSearch({
+                serverData,
+                resModel: "foo",
+                Component: ControlPanel,
+                searchViewId: false,
+                searchMenuTypes: ["filter"],
+                searchViewFields: {
+                    many2one_field: {
+                        name: "many2one_field",
+                        string: "AAA",
+                        type: "many2one",
+                        searchable: true,
+                    },
+                },
+            });
+
+            const steps = [
+                {
+                    value: `a`,
+                    domain: [["many2one_field", "ilike", `a`]],
+                    facetContent: `AAA contains "a"`,
+                },
+                {
+                    value: `"a"`,
+                    domain: [["many2one_field", "ilike", `"a"`]],
+                    facetContent: `AAA contains ""a""`,
+                },
+                {
+                    value: `'a'`,
+                    domain: [["many2one_field", "ilike", `'a'`]],
+                    facetContent: `AAA contains "'a'"`,
+                },
+                {
+                    value: `'`,
+                    domain: [["many2one_field", "ilike", `'`]],
+                    facetContent: `AAA contains "'"`,
+                },
+                {
+                    value: `"`,
+                    domain: [["many2one_field", "ilike", `"`]],
+                    facetContent: `AAA contains """`,
+                },
+                {
+                    value: `\\`,
+                    domain: [["many2one_field", "ilike", `\\`]],
+                    facetContent: `AAA contains "\\"`,
+                },
+            ];
+
+            for (const step of steps) {
+                await toggleFilterMenu(controlPanel);
+                await toggleAddCustomFilter(controlPanel);
+                await editConditionValue(controlPanel, 0, step.value);
+                await applyFilter(controlPanel);
+
+                assert.deepEqual(getFacetTexts(controlPanel), [step.facetContent]);
+                assert.deepEqual(getDomain(controlPanel), step.domain);
+
+                await removeFacet(controlPanel);
+            }
+        }
+    );
+
+    QUnit.test("custom filter datetime with equal operator", async function (assert) {
+        assert.expect(4);
+
+        const originalZoneName = luxon.Settings.defaultZoneName;
+        luxon.Settings.defaultZoneName = new luxon.FixedOffsetZone.instance(-240);
+        registerCleanup(() => {
+            luxon.Settings.defaultZoneName = originalZoneName;
+        });
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchViewId: false,
+            searchMenuTypes: ["filter"],
+        });
+
+        await toggleFilterMenu(controlPanel);
+        await toggleAddCustomFilter(controlPanel);
+
+        await editConditionField(controlPanel, 0, "date_time_field");
+
+        assert.strictEqual(
+            controlPanel.el.querySelector(".o_generator_menu_field").value,
+            "date_time_field"
+        );
+        assert.strictEqual(
+            controlPanel.el.querySelector(".o_generator_menu_operator").value,
+            "between"
+        );
+
+        await editConditionOperator(controlPanel, 0, "=");
+        await editConditionValue(controlPanel, 0, "02/22/2017 11:00:00"); // in TZ
+        await applyFilter(controlPanel);
+
+        assert.deepEqual(
+            getFacetTexts(controlPanel),
+            ['DateTime is equal to "02/22/2017 11:00:00"'],
+            "description should be in localized format"
+        );
+        assert.deepEqual(
+            getDomain(controlPanel),
+            [["date_time_field", "=", "2017-02-22 15:00:00"]],
+            "domain should be in UTC format"
+        );
+    });
+
+    QUnit.test("custom filter datetime between operator", async function (assert) {
+        assert.expect(4);
+
+        const originalZoneName = luxon.Settings.defaultZoneName;
+        luxon.Settings.defaultZoneName = new luxon.FixedOffsetZone.instance(-240);
+        registerCleanup(() => {
+            luxon.Settings.defaultZoneName = originalZoneName;
+        });
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchViewId: false,
+            searchMenuTypes: ["filter"],
+        });
+
+        await toggleFilterMenu(controlPanel);
+        await toggleAddCustomFilter(controlPanel);
+        await editConditionField(controlPanel, 0, "date_time_field");
+
+        assert.strictEqual(
+            controlPanel.el.querySelector(".o_generator_menu_field").value,
+            "date_time_field"
+        );
+        assert.strictEqual(
+            controlPanel.el.querySelector(".o_generator_menu_operator").value,
+            "between"
+        );
+
+        await editConditionValue(controlPanel, 0, "02/22/2017 11:00:00", 0); // in TZ
+        await editConditionValue(controlPanel, 0, "02-22-2017 17:00:00", 1); // in TZ
+        await applyFilter(controlPanel);
+
+        assert.deepEqual(
+            getFacetTexts(controlPanel),
+            ['DateTime is between "02/22/2017 11:00:00 and 02/22/2017 17:00:00"'],
+            "description should be in localized format"
+        );
+        assert.deepEqual(
+            getDomain(controlPanel),
+            [
+                "&",
+                ["date_time_field", ">=", "2017-02-22 15:00:00"],
+                ["date_time_field", "<=", "2017-02-22 21:00:00"],
+            ],
+            "domain should be in UTC format"
+        );
+    });
+
+    QUnit.test("input value parsing", async function (assert) {
+        assert.expect(7);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchViewId: false,
+            searchMenuTypes: ["filter"],
+        });
+
+        await toggleFilterMenu(controlPanel);
+        await toggleAddCustomFilter(controlPanel);
+        await addCondition(controlPanel);
+
+        await editConditionField(controlPanel, 0, "float_field");
+        await editConditionField(controlPanel, 1, "id");
+
+        const [floatInput, idInput] = controlPanel.el.querySelectorAll(
+            ".o_generator_menu_value .o_input"
+        );
+
+        // Default values
+        await editConditionValue(controlPanel, 0, "0.0");
+        assert.strictEqual(floatInput.value, "0.0");
+
+        await editConditionValue(controlPanel, 1, "0");
+        assert.strictEqual(idInput.value, "0");
+
+        // Float parsing
+        await editConditionValue(controlPanel, 0, "4.2");
+        assert.strictEqual(floatInput.value, "4.2");
+
+        await editConditionValue(controlPanel, 0, "DefinitelyValidFloat");
+        // "DefinitelyValidFloat" cannot be entered in a input type number so that the input value is reset to 0
+        assert.strictEqual(floatInput.value, "4.2");
+
+        // Number parsing
+        await editConditionValue(controlPanel, 1, "4");
+        assert.strictEqual(idInput.value, "4");
+
+        await editConditionValue(controlPanel, 1, "4.2");
+        assert.strictEqual(idInput.value, "4");
+
+        await editConditionValue(controlPanel, 1, "DefinitelyValidID");
+        // "DefinitelyValidID" cannot be entered in a input type number so that the input value is reset to 0
+        assert.strictEqual(idInput.value, "0");
+    });
+
+    QUnit.test("input value parsing with language", async function (assert) {
+        assert.expect(5);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchViewId: false,
+            searchMenuTypes: ["filter"],
+        });
+
+        // Needs to be done after services have been started
+        patchWithCleanup(localization, {
+            decimalPoint: ",",
+            thousandsSep: "",
+            grouping: [3, 0],
+        });
+
+        await toggleFilterMenu(controlPanel);
+        await toggleAddCustomFilter(controlPanel);
+
+        await editConditionField(controlPanel, 0, "float_field");
+
+        const [floatInput] = controlPanel.el.querySelectorAll(".o_generator_menu_value .o_input");
+
+        // Default values
+        assert.strictEqual(floatInput.value, "0,0");
+
+        // Float parsing
+        await editConditionValue(controlPanel, 0, "4,");
+        assert.strictEqual(floatInput.value, "4,0");
+
+        await editConditionValue(controlPanel, 0, "4,2");
+        assert.strictEqual(floatInput.value, "4,2");
+
+        await editConditionValue(controlPanel, 0, "4,2,");
+        assert.strictEqual(floatInput.value, "4,2");
+
+        await editConditionValue(controlPanel, 0, "DefinitelyValidFloat");
+
+        // The input here is a string, resulting in a parsing error instead of 0
+        assert.strictEqual(floatInput.value, "4,2");
+    });
+
+    QUnit.test("add custom filter with multiple values", async function (assert) {
+        assert.expect(2);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchViewId: false,
+            searchMenuTypes: ["filter"],
+        });
+
+        await toggleFilterMenu(controlPanel);
+        await toggleAddCustomFilter(controlPanel);
+
+        for (let i = 0; i < 4; i++) {
+            await addCondition(controlPanel);
+        }
+
+        await editConditionField(controlPanel, 0, "date_field");
+        await editConditionValue(controlPanel, 0, "01/09/1997");
+
+        await editConditionField(controlPanel, 1, "boolean_field");
+        await editConditionOperator(controlPanel, 1, "!=");
+
+        await editConditionField(controlPanel, 2, "char_field");
+        await editConditionValue(controlPanel, 2, "I will be deleted anyway");
+
+        await editConditionField(controlPanel, 3, "float_field");
+        await editConditionValue(controlPanel, 3, 7.2);
+
+        await editConditionField(controlPanel, 4, "id");
+        await editConditionValue(controlPanel, 4, 9);
+
+        const thirdcondition = controlPanel.el.querySelectorAll(".o_filter_condition")[2];
+
+        await click(thirdcondition, ".o_generator_menu_delete");
+        await applyFilter(controlPanel);
+
+        assert.deepEqual(getFacetTexts(controlPanel), [
+            [
+                'A date is equal to "01/09/1997"',
+                "Boolean Field is false",
+                'Floaty McFloatface is equal to "7.2"',
+                'ID is "9"',
+            ].join("or"),
+        ]);
+        assert.deepEqual(getDomain(controlPanel), [
+            "|",
+            ["date_field", "=", "1997-01-09"],
+            "|",
+            ["boolean_field", "!=", true],
+            "|",
+            ["float_field", "=", 7.2],
+            ["id", "=", 9],
+        ]);
+    });
+});
diff --git a/addons/web/static/tests/search/custom_group_by_item_tests.js b/addons/web/static/tests/search/custom_group_by_item_tests.js
new file mode 100644
index 00000000000..896972959f9
--- /dev/null
+++ b/addons/web/static/tests/search/custom_group_by_item_tests.js
@@ -0,0 +1,200 @@
+/** @odoo-module **/
+
+import { ControlPanel } from "@web/search/control_panel/control_panel";
+import {
+    applyGroup,
+    getFacetTexts,
+    isItemSelected,
+    isOptionSelected,
+    makeWithSearch,
+    setupControlPanelServiceRegistry,
+    toggleAddCustomGroup,
+    toggleGroupByMenu,
+    toggleMenuItem,
+} from "./helpers";
+
+let serverData;
+QUnit.module("Search", (hooks) => {
+    hooks.beforeEach(async () => {
+        serverData = {
+            models: {
+                foo: {
+                    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 },
+                    },
+                    records: {},
+                },
+            },
+            views: {
+                "foo,false,search": `<search/>`,
+            },
+        };
+        setupControlPanelServiceRegistry();
+    });
+
+    QUnit.module("CustomGroupByItem");
+
+    QUnit.test("simple rendering", async function (assert) {
+        assert.expect(5);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchMenuTypes: ["groupBy"],
+            searchViewId: false,
+        });
+
+        await toggleGroupByMenu(controlPanel);
+
+        const customGroupByItem = controlPanel.el.querySelector(".o_add_custom_group_menu");
+        assert.strictEqual(customGroupByItem.innerText.trim(), "Add Custom Group");
+
+        assert.containsOnce(customGroupByItem, "button.o_dropdown_toggler");
+        assert.containsNone(customGroupByItem, "ul.o_dropdown_menu");
+
+        await toggleAddCustomGroup(controlPanel);
+
+        assert.containsOnce(customGroupByItem, "ul.o_dropdown_menu");
+
+        assert.deepEqual(
+            [...controlPanel.el.querySelectorAll(".o_add_custom_group_menu select option")].map(
+                (el) => el.innerText
+            ),
+            ["Birthday", "Date", "Foo"]
+        );
+    });
+
+    QUnit.test(
+        'the ID field should not be proposed in "Add Custom Group" menu',
+        async function (assert) {
+            assert.expect(1);
+
+            const controlPanel = await makeWithSearch({
+                serverData,
+                resModel: "foo",
+                Component: ControlPanel,
+                searchMenuTypes: ["groupBy"],
+                searchViewId: false,
+                searchViewFields: {
+                    foo: { string: "Foo", type: "char", store: true, sortable: true },
+                    id: { sortable: true, string: "ID", type: "integer" },
+                },
+            });
+
+            await toggleGroupByMenu(controlPanel);
+            await toggleAddCustomGroup(controlPanel);
+
+            assert.deepEqual(
+                [
+                    ...controlPanel.el.querySelectorAll(
+                        ".o_add_custom_group_menu .o_dropdown_menu select option"
+                    ),
+                ].map((el) => el.innerText),
+                ["Foo"]
+            );
+        }
+    );
+
+    QUnit.test(
+        'add a date field in "Add Custom Group" activate a groupby with global default option "month"',
+        async function (assert) {
+            assert.expect(6);
+
+            const controlPanel = await makeWithSearch({
+                serverData,
+                resModel: "foo",
+                Component: ControlPanel,
+                searchMenuTypes: ["groupBy"],
+                searchViewId: false,
+                searchViewFields: {
+                    date_field: { string: "Date", type: "date", store: true, sortable: true },
+                    id: { sortable: true, string: "ID", type: "integer" },
+                },
+            });
+            await toggleGroupByMenu(controlPanel);
+
+            assert.deepEqual(controlPanel.env.searchModel.groupBy, []);
+            assert.containsNone(controlPanel, ".o_menu_item");
+
+            await toggleAddCustomGroup(controlPanel);
+            await applyGroup(controlPanel);
+
+            assert.deepEqual(controlPanel.env.searchModel.groupBy, ["date_field:month"]);
+            assert.deepEqual(getFacetTexts(controlPanel), ["Date: Month"]);
+            assert.ok(isItemSelected(controlPanel, "Date"));
+
+            await toggleMenuItem(controlPanel, "Date");
+
+            assert.ok(isOptionSelected(controlPanel, "Date", "Month"));
+        }
+    );
+
+    QUnit.test("click on add custom group toggle group selector", async function (assert) {
+        assert.expect(4);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchMenuTypes: ["groupBy"],
+            searchViewFields: {
+                date: { sortable: true, name: "date", string: "Super Date", type: "date" },
+            },
+        });
+
+        await toggleGroupByMenu(controlPanel);
+
+        const addCustomGroupMenu = controlPanel.el.querySelector(".o_add_custom_group_menu");
+
+        assert.strictEqual(addCustomGroupMenu.innerText.trim(), "Add Custom Group");
+
+        await toggleAddCustomGroup(controlPanel);
+
+        // Single select node with a single option
+        assert.containsOnce(controlPanel, ".o_add_custom_group_menu .o_dropdown_menu select");
+        assert.strictEqual(
+            controlPanel.el
+                .querySelector(".o_add_custom_group_menu .o_dropdown_menu select option")
+                .innerText.trim(),
+            "Super Date"
+        );
+
+        // Button apply
+        assert.containsOnce(controlPanel, ".o_add_custom_group_menu .o_dropdown_menu .btn");
+    });
+
+    QUnit.test(
+        "select a field name in Add Custom Group menu properly trigger the corresponding field",
+        async function (assert) {
+            assert.expect(4);
+
+            const controlPanel = await makeWithSearch({
+                serverData,
+                resModel: "foo",
+                Component: ControlPanel,
+                searchMenuTypes: ["groupBy"],
+                searchViewFields: {
+                    candle_light: {
+                        sortable: true,
+                        string: "Candlelight",
+                        type: "boolean",
+                    },
+                },
+            });
+
+            await toggleGroupByMenu(controlPanel);
+            await toggleAddCustomGroup(controlPanel);
+            await applyGroup(controlPanel);
+
+            assert.containsOnce(controlPanel, ".o_group_by_menu .o_menu_item");
+            assert.containsOnce(controlPanel, ".o_add_custom_group_menu .o_dropdown_toggler");
+            assert.containsNone(controlPanel, ".o_add_custom_group_menu .o_dropdown_menu");
+            assert.deepEqual(getFacetTexts(controlPanel), ["Candlelight"]);
+        }
+    );
+});
diff --git a/addons/web/static/tests/search/favorite_menu_tests.js b/addons/web/static/tests/search/favorite_menu_tests.js
new file mode 100644
index 00000000000..94dc54dac0e
--- /dev/null
+++ b/addons/web/static/tests/search/favorite_menu_tests.js
@@ -0,0 +1,341 @@
+/** @odoo-module **/
+
+import { click, patchDate } from "@web/../tests/helpers/utils";
+import { createWebClient, doAction } from "@web/../tests/webclient/helpers";
+import { dialogService } from "@web/core/dialog/dialog_service";
+import { registry } from "@web/core/registry";
+import { ControlPanel } from "@web/search/control_panel/control_panel";
+import { FavoriteMenu } from "@web/search/favorite_menu/favorite_menu";
+import { SearchBar } from "@web/search/search_bar/search_bar";
+import {
+    deleteFavorite,
+    getFacetTexts,
+    isItemSelected,
+    makeWithSearch,
+    setupControlPanelServiceRegistry,
+    toggleComparisonMenu,
+    toggleFavoriteMenu,
+    toggleMenuItem,
+} from "./helpers";
+
+const serviceRegistry = registry.category("services");
+const viewRegistry = registry.category("views");
+
+function getDomain(comp) {
+    return comp.env.searchModel.domain;
+}
+
+let serverData;
+QUnit.module("Search", (hooks) => {
+    hooks.beforeEach(async () => {
+        serverData = {
+            models: {
+                foo: {
+                    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 },
+                    },
+                    records: {},
+                },
+            },
+            views: {
+                "foo,false,search": `<search/>`,
+            },
+        };
+        setupControlPanelServiceRegistry();
+        serviceRegistry.add("dialog", dialogService);
+    });
+
+    QUnit.module("FavoriteMenu");
+
+    QUnit.test("simple rendering with no favorite", async function (assert) {
+        assert.expect(5);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchMenuTypes: ["favorite"],
+            searchViewId: false,
+            displayName: "Action Name",
+        });
+
+        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()
+                .toUpperCase(),
+            "FAVORITES"
+        );
+
+        await 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"
+        );
+    });
+
+    QUnit.test(
+        "delete an active favorite remove it both in list of favorite and in search bar",
+        async function (assert) {
+            assert.expect(7);
+
+            class ToyView extends owl.Component {
+                setup() {
+                    assert.deepEqual(this.props.domain, [["foo", "=", "qsdf"]]);
+                }
+                willUpdateProps(nextProps) {
+                    assert.deepEqual(nextProps.domain, []);
+                }
+            }
+            ToyView.components = { FavoriteMenu, SearchBar };
+            ToyView.template = owl.tags.xml`
+                <div>
+                    <SearchBar/>
+                    <FavoriteMenu/>
+                </div>
+            `;
+            ToyView.type = "toy";
+            ToyView.display_name = "";
+
+            viewRegistry.add("toy", ToyView);
+
+            serverData.views["foo,false,toy"] = `<toy/>`;
+
+            serverData.models.foo.filters = [
+                {
+                    context: "{}",
+                    domain: "[['foo', '=', 'qsdf']]",
+                    id: 7,
+                    is_default: true,
+                    name: "My favorite",
+                    sort: "[]",
+                    user_id: [2, "Mitchell Admin"],
+                },
+            ];
+
+            const webClient = await createWebClient({
+                serverData,
+                mockRPC: async (_, args) => {
+                    if (args.model === "ir.filters" && args.method === "unlink") {
+                        return { result: true }; // mocked unlink result
+                    }
+                },
+            });
+            await doAction(webClient, {
+                name: "Action",
+                res_model: "foo",
+                type: "ir.actions.act_window",
+                views: [[false, "toy"]],
+            });
+
+            await toggleFavoriteMenu(webClient);
+
+            assert.deepEqual(getFacetTexts(webClient), ["My favorite"]);
+            assert.hasClass(
+                webClient.el.querySelector(".o_favorite_menu li.o_menu_item"),
+                "selected"
+            );
+
+            await deleteFavorite(webClient, 0);
+
+            await click(document.querySelector("div.o_dialog footer button"));
+
+            assert.deepEqual(getFacetTexts(webClient), []);
+            assert.containsNone(webClient, ".o_favorite_menu .o_menu_item");
+            assert.containsOnce(webClient, ".o_favorite_menu .o_add_favorite");
+        }
+    );
+
+    QUnit.test(
+        "default favorite is not activated if activateFavorite is set to false",
+        async function (assert) {
+            assert.expect(3);
+
+            const controlPanel = await makeWithSearch({
+                serverData,
+                resModel: "foo",
+                Component: ControlPanel,
+                searchMenuTypes: ["favorite"],
+                searchViewId: false,
+                irFilters: [
+                    {
+                        context: "{}",
+                        domain: "[('foo', '=', 'a')]",
+                        id: 7,
+                        is_default: true,
+                        name: "My favorite",
+                        sort: "[]",
+                        user_id: [2, "Mitchell Admin"],
+                    },
+                ],
+                activateFavorite: false,
+            });
+
+            await toggleFavoriteMenu(controlPanel);
+
+            assert.notOk(isItemSelected(controlPanel, "My favorite"));
+            assert.deepEqual(getDomain(controlPanel), []);
+            assert.deepEqual(getFacetTexts(controlPanel), []);
+        }
+    );
+
+    QUnit.test(
+        'toggle favorite correctly clears filter, groupbys, comparison and field "options"',
+        async function (assert) {
+            assert.expect(11);
+
+            patchDate(2019, 6, 31, 13, 43, 0);
+
+            const controlPanel = await makeWithSearch({
+                serverData,
+                resModel: "foo",
+                Component: ControlPanel,
+                searchMenuTypes: ["filter", "groupBy", "comparison", "favorite"],
+                searchViewId: false,
+                irFilters: [
+                    {
+                        context: `
+                                {
+                                    "group_by": ["foo"],
+                                    "comparison": {
+                                        "favorite comparison content": "bla bla..."
+                                    },
+                                 }
+                            `,
+                        domain: "['!', ['foo', '=', 'qsdf']]",
+                        id: 7,
+                        is_default: false,
+                        name: "My favorite",
+                        sort: "[]",
+                        user_id: [2, "Mitchell Admin"],
+                    },
+                ],
+                searchViewArch: `
+                        <search>
+                            <field string="Foo" name="foo"/>
+                            <filter string="Date Field Filter" name="positive" date="date_field" default_period="this_year"/>
+                            <filter string="Date Field Groupby" name="coolName" context="{'group_by': 'date_field'}"/>
+                        </search>
+                    `,
+                context: {
+                    search_default_positive: true,
+                    search_default_coolName: true,
+                    search_default_foo: "a",
+                },
+            });
+
+            let domain = controlPanel.env.searchModel.domain;
+            let groupBy = controlPanel.env.searchModel.groupBy;
+            let comparison = controlPanel.env.searchModel._getComparison();
+
+            assert.deepEqual(domain, [
+                "&",
+                ["foo", "ilike", "a"],
+                "&",
+                ["date_field", ">=", "2019-01-01"],
+                ["date_field", "<=", "2019-12-31"],
+            ]);
+            assert.deepEqual(groupBy, ["date_field:month"]);
+            assert.deepEqual(comparison, null);
+
+            assert.deepEqual(getFacetTexts(controlPanel), [
+                "Foo\na",
+                "Date Field Filter: 2019",
+                "Date Field Groupby: Month",
+            ]);
+
+            // activate a comparison
+            await toggleComparisonMenu(controlPanel);
+            await toggleMenuItem(controlPanel, "Date Field Filter: Previous Period");
+
+            domain = controlPanel.env.searchModel.domain;
+            groupBy = controlPanel.env.searchModel.groupBy;
+            comparison = controlPanel.env.searchModel._getComparison();
+
+            assert.deepEqual(domain, [["foo", "ilike", "a"]]);
+            assert.deepEqual(groupBy, ["date_field:month"]);
+            assert.deepEqual(comparison, {
+                comparisonId: "previous_period",
+                comparisonRange: [
+                    "&",
+                    ["date_field", ">=", "2018-01-01"],
+                    ["date_field", "<=", "2018-12-31"],
+                ],
+                comparisonRangeDescription: "2018",
+                fieldDescription: "Date Field Filter",
+                fieldName: "date_field",
+                range: [
+                    "&",
+                    ["date_field", ">=", "2019-01-01"],
+                    ["date_field", "<=", "2019-12-31"],
+                ],
+                rangeDescription: "2019",
+            });
+
+            // activate the unique existing favorite
+            await toggleFavoriteMenu(controlPanel);
+            await toggleMenuItem(controlPanel, 0);
+
+            domain = controlPanel.env.searchModel.domain;
+            groupBy = controlPanel.env.searchModel.groupBy;
+            comparison = controlPanel.env.searchModel._getComparison();
+
+            assert.deepEqual(domain, ["!", ["foo", "=", "qsdf"]]);
+            assert.deepEqual(groupBy, ["foo"]);
+            assert.deepEqual(comparison, {
+                "favorite comparison content": "bla bla...",
+            });
+
+            assert.deepEqual(getFacetTexts(controlPanel), ["My favorite"]);
+        }
+    );
+
+    QUnit.skip("modal loads saved search filters", async function (assert) {
+        /** @todo I don't know yet how to convert this test */
+        // assert.expect(1);
+        // const data = {
+        //     partner: {
+        //         fields: {
+        //             bar: { string: "Bar", type: "many2one", relation: "partner" },
+        //         },
+        //         // 10 records so that the Search button shows
+        //         records: Array.apply(null, Array(10)).map(function (_, i) {
+        //             return { id: i, display_name: "Record " + i, bar: 1 };
+        //         }),
+        //     },
+        // };
+        // const form = await createView({
+        //     arch: `
+        //     <form string="Partners">
+        //         <sheet>
+        //             <group>
+        //                 <field name="bar"/>
+        //             </group>
+        //         </sheet>
+        //     </form>`,
+        //     data,
+        //     model: "partner",
+        //     res_id: 1,
+        //     View: FormView,
+        //     interceptsPropagate: {
+        //         load_views: function (ev) {
+        //             assert.ok(
+        //                 ev.data.options.load_filters,
+        //                 "opening dialog should load the filters"
+        //             );
+        //         },
+        //     },
+        // });
+        // await testUtils.form.clickEdit(form);
+        // await testUtils.fields.many2one.clickOpenDropdown("bar");
+        // await testUtils.fields.many2one.clickItem("bar", "Search");
+        // form.destroy();
+    });
+});
diff --git a/addons/web/static/tests/search/filter_menu_tests.js b/addons/web/static/tests/search/filter_menu_tests.js
new file mode 100644
index 00000000000..d4738266870
--- /dev/null
+++ b/addons/web/static/tests/search/filter_menu_tests.js
@@ -0,0 +1,549 @@
+/** @odoo-module **/
+
+import { patchDate } from "@web/../tests/helpers/utils";
+import { ControlPanel } from "@web/search/control_panel/control_panel";
+import {
+    getFacetTexts,
+    isItemSelected,
+    isOptionSelected,
+    makeWithSearch,
+    setupControlPanelServiceRegistry,
+    toggleFilterMenu,
+    toggleMenuItem,
+    toggleMenuItemOption,
+} from "./helpers";
+
+function getDomain(controlPanel) {
+    return controlPanel.env.searchModel.domain;
+}
+
+function getContext(controlPanel) {
+    return controlPanel.env.searchModel.context;
+}
+
+let serverData;
+QUnit.module("Search", (hooks) => {
+    hooks.beforeEach(async () => {
+        serverData = {
+            models: {
+                foo: {
+                    fields: {
+                        date_field: {
+                            string: "Date",
+                            type: "date",
+                            store: true,
+                            sortable: true,
+                            searchable: true,
+                        },
+                        foo: { string: "Foo", type: "char", store: true, sortable: true },
+                    },
+                    records: {},
+                },
+            },
+            views: {
+                "foo,false,search": `<search/>`,
+            },
+        };
+        setupControlPanelServiceRegistry();
+    });
+
+    QUnit.module("FilterMenu");
+
+    QUnit.test("simple rendering with no filter", async function (assert) {
+        assert.expect(3);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchMenuTypes: ["filter"],
+        });
+
+        await toggleFilterMenu(controlPanel);
+        assert.containsNone(controlPanel, ".o_menu_item");
+        assert.containsNone(controlPanel, ".dropdown-divider");
+        assert.containsOnce(controlPanel, ".o_add_custom_filter_menu");
+    });
+
+    QUnit.test("simple rendering with a single filter", async function (assert) {
+        assert.expect(3);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchViewId: false,
+            searchMenuTypes: ["filter"],
+            searchViewArch: `
+                    <search>
+                        <filter string="Foo" name="foo" domain="[]"/>
+                    </search>
+                `,
+        });
+
+        await toggleFilterMenu(controlPanel);
+        assert.containsOnce(controlPanel, ".o_menu_item");
+        assert.containsOnce(controlPanel, ".dropdown-divider");
+        assert.containsOnce(controlPanel, ".o_add_custom_filter_menu");
+    });
+
+    QUnit.test('toggle a "simple" filter in filter menu works', async function (assert) {
+        assert.expect(10);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchViewId: false,
+            searchMenuTypes: ["filter"],
+            searchViewArch: `
+                    <search>
+                        <filter string="Foo" name="foo" domain="[('foo', '=', 'qsdf')]"/>
+                    </search>
+                `,
+        });
+
+        await toggleFilterMenu(controlPanel);
+        assert.deepEqual(getFacetTexts(controlPanel), []);
+        assert.notOk(isItemSelected(controlPanel, "Foo"));
+        assert.deepEqual(getDomain(controlPanel), []);
+
+        await toggleMenuItem(controlPanel, "Foo");
+
+        assert.deepEqual(getFacetTexts(controlPanel), ["Foo"]);
+        assert.containsOnce(
+            controlPanel.el.querySelector(".o_searchview .o_searchview_facet"),
+            "span.fa.fa-filter.o_searchview_facet_label"
+        );
+        assert.ok(isItemSelected(controlPanel, "Foo"));
+        assert.deepEqual(getDomain(controlPanel), [["foo", "=", "qsdf"]]);
+
+        await toggleMenuItem(controlPanel, "Foo");
+
+        assert.deepEqual(getFacetTexts(controlPanel), []);
+        assert.notOk(isItemSelected(controlPanel, "Foo"));
+        assert.deepEqual(getDomain(controlPanel), []);
+    });
+
+    QUnit.test("filter by a date field using period works", async function (assert) {
+        assert.expect(57);
+
+        patchDate(2017, 2, 22, 1, 0, 0);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchViewId: false,
+            searchMenuTypes: ["filter"],
+            searchViewArch: `
+                    <search>
+                        <filter string="Date" name="date_field" date="date_field"/>
+                    </search>
+                `,
+            context: { search_default_date_field: 1 },
+        });
+
+        await toggleFilterMenu(controlPanel);
+        await toggleMenuItem(controlPanel, "Date");
+
+        const optionEls = controlPanel.el.querySelectorAll(".o_dropdown .o_item_option");
+
+        // default filter should be activated with the global default period 'this_month'
+        assert.deepEqual(getDomain(controlPanel), [
+            "&",
+            ["date_field", ">=", "2017-03-01"],
+            ["date_field", "<=", "2017-03-31"],
+        ]);
+        assert.ok(isItemSelected(controlPanel, "Date"));
+        assert.ok(isOptionSelected(controlPanel, "Date", "March"));
+
+        // 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 = [
+            {
+                toggledOption: "March",
+                resultingFacet: "Date: 2017",
+                selectedoptions: ["2017"],
+                domain: [
+                    "&",
+                    ["date_field", ">=", "2017-01-01"],
+                    ["date_field", "<=", "2017-12-31"],
+                ],
+            },
+            {
+                toggledOption: "February",
+                resultingFacet: "Date: February 2017",
+                selectedoptions: ["February", "2017"],
+                domain: [
+                    "&",
+                    ["date_field", ">=", "2017-02-01"],
+                    ["date_field", "<=", "2017-02-28"],
+                ],
+            },
+            {
+                toggledOption: "February",
+                resultingFacet: "Date: 2017",
+                selectedoptions: ["2017"],
+                domain: [
+                    "&",
+                    ["date_field", ">=", "2017-01-01"],
+                    ["date_field", "<=", "2017-12-31"],
+                ],
+            },
+            {
+                toggledOption: "January",
+                resultingFacet: "Date: January 2017",
+                selectedoptions: ["January", "2017"],
+                domain: [
+                    "&",
+                    ["date_field", ">=", "2017-01-01"],
+                    ["date_field", "<=", "2017-01-31"],
+                ],
+            },
+            {
+                toggledOption: "Q4",
+                resultingFacet: "Date: January 2017/Q4 2017",
+                selectedoptions: ["January", "Q4", "2017"],
+                domain: [
+                    "|",
+                    "&",
+                    ["date_field", ">=", "2017-01-01"],
+                    ["date_field", "<=", "2017-01-31"],
+                    "&",
+                    ["date_field", ">=", "2017-10-01"],
+                    ["date_field", "<=", "2017-12-31"],
+                ],
+            },
+            {
+                toggledOption: "January",
+                resultingFacet: "Date: Q4 2017",
+                selectedoptions: ["Q4", "2017"],
+                domain: [
+                    "&",
+                    ["date_field", ">=", "2017-10-01"],
+                    ["date_field", "<=", "2017-12-31"],
+                ],
+            },
+            {
+                toggledOption: "Q4",
+                resultingFacet: "Date: 2017",
+                selectedoptions: ["2017"],
+                domain: [
+                    "&",
+                    ["date_field", ">=", "2017-01-01"],
+                    ["date_field", "<=", "2017-12-31"],
+                ],
+            },
+            {
+                toggledOption: "Q1",
+                resultingFacet: "Date: Q1 2017",
+                selectedoptions: ["Q1", "2017"],
+                domain: [
+                    "&",
+                    ["date_field", ">=", "2017-01-01"],
+                    ["date_field", "<=", "2017-03-31"],
+                ],
+            },
+            {
+                toggledOption: "Q1",
+                resultingFacet: "Date: 2017",
+                selectedoptions: ["2017"],
+                domain: [
+                    "&",
+                    ["date_field", ">=", "2017-01-01"],
+                    ["date_field", "<=", "2017-12-31"],
+                ],
+            },
+            {
+                toggledOption: "2017",
+                selectedoptions: [],
+                domain: [],
+            },
+            {
+                toggledOption: "2017",
+                resultingFacet: "Date: 2017",
+                selectedoptions: ["2017"],
+                domain: [
+                    "&",
+                    ["date_field", ">=", "2017-01-01"],
+                    ["date_field", "<=", "2017-12-31"],
+                ],
+            },
+            {
+                toggledOption: "2016",
+                resultingFacet: "Date: 2016/2017",
+                selectedoptions: ["2017", "2016"],
+                domain: [
+                    "|",
+                    "&",
+                    ["date_field", ">=", "2016-01-01"],
+                    ["date_field", "<=", "2016-12-31"],
+                    "&",
+                    ["date_field", ">=", "2017-01-01"],
+                    ["date_field", "<=", "2017-12-31"],
+                ],
+            },
+            {
+                toggledOption: "2015",
+                resultingFacet: "Date: 2015/2016/2017",
+                selectedoptions: ["2017", "2016", "2015"],
+                domain: [
+                    "|",
+                    "&",
+                    ["date_field", ">=", "2015-01-01"],
+                    ["date_field", "<=", "2015-12-31"],
+                    "|",
+                    "&",
+                    ["date_field", ">=", "2016-01-01"],
+                    ["date_field", "<=", "2016-12-31"],
+                    "&",
+                    ["date_field", ">=", "2017-01-01"],
+                    ["date_field", "<=", "2017-12-31"],
+                ],
+            },
+            {
+                toggledOption: "March",
+                resultingFacet: "Date: March 2015/March 2016/March 2017",
+                selectedoptions: ["March", "2017", "2016", "2015"],
+                domain: [
+                    "|",
+                    "&",
+                    ["date_field", ">=", "2015-03-01"],
+                    ["date_field", "<=", "2015-03-31"],
+                    "|",
+                    "&",
+                    ["date_field", ">=", "2016-03-01"],
+                    ["date_field", "<=", "2016-03-31"],
+                    "&",
+                    ["date_field", ">=", "2017-03-01"],
+                    ["date_field", "<=", "2017-03-31"],
+                ],
+            },
+        ];
+        for (const s of steps) {
+            await toggleMenuItemOption(controlPanel, "Date", s.toggledOption);
+            assert.deepEqual(getDomain(controlPanel), s.domain);
+            if (s.resultingFacet) {
+                assert.deepEqual(getFacetTexts(controlPanel), [s.resultingFacet]);
+            } else {
+                assert.deepEqual(getFacetTexts(controlPanel), []);
+            }
+            s.selectedoptions.forEach((option) => {
+                assert.ok(
+                    isOptionSelected(controlPanel, "Date", option),
+                    `at step ${steps.indexOf(s) + 1}, ${option} should be selected`
+                );
+            });
+        }
+    });
+
+    QUnit.test(
+        "filter by a date field using period works even in January",
+        async function (assert) {
+            assert.expect(5);
+
+            patchDate(2017, 0, 7, 3, 0, 0);
+
+            const controlPanel = await makeWithSearch({
+                serverData,
+                resModel: "foo",
+                Component: ControlPanel,
+                searchViewId: false,
+                searchMenuTypes: ["filter"],
+                searchViewArch: `
+                        <search>
+                            <filter string="Date" name="some_filter" date="date_field" default_period="last_month"/>
+                        </search>
+                    `,
+                context: { search_default_some_filter: 1 },
+            });
+
+            assert.deepEqual(getDomain(controlPanel), [
+                "&",
+                ["date_field", ">=", "2016-12-01"],
+                ["date_field", "<=", "2016-12-31"],
+            ]);
+
+            assert.deepEqual(getFacetTexts(controlPanel), ["Date: December 2016"]);
+
+            await toggleFilterMenu(controlPanel);
+            await toggleMenuItem(controlPanel, "Date");
+
+            assert.ok(isItemSelected(controlPanel, "Date"));
+            assert.ok(isOptionSelected(controlPanel, "Date", "December"));
+            assert.ok(isOptionSelected(controlPanel, "Date", "2016"));
+        }
+    );
+
+    QUnit.test("`context` key in <filter> is used", async function (assert) {
+        assert.expect(1);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchViewId: false,
+            searchMenuTypes: ["filter"],
+            searchViewArch: `
+                    <search>
+                        <filter string="Filter" name="some_filter" domain="[]" context="{'coucou_1': 1}"/>
+                    </search>
+                `,
+            context: { search_default_some_filter: 1 },
+        });
+
+        assert.deepEqual(getContext(controlPanel), {
+            coucou_1: 1,
+            lang: "en",
+            tz: "taht",
+            uid: 7,
+        });
+    });
+
+    QUnit.test("Filter with JSON-parsable domain works", async function (assert) {
+        assert.expect(1);
+
+        const xml_domain = "[[&quot;foo&quot;,&quot;=&quot;,&quot;Gently Weeps&quot;]]";
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchViewId: false,
+            searchMenuTypes: ["filter"],
+            searchViewArch: `
+                    <search>
+                        <filter string="Foo" name="gently_weeps" domain="${xml_domain}"/>
+                    </search>
+                `,
+            context: { search_default_gently_weeps: 1 },
+        });
+
+        assert.deepEqual(
+            getDomain(controlPanel),
+            [["foo", "=", "Gently Weeps"]],
+            "A JSON parsable xml domain should be handled just like any other"
+        );
+    });
+
+    QUnit.test("filter with date attribute set as search_default", async function (assert) {
+        assert.expect(1);
+
+        patchDate(2019, 6, 31, 13, 43, 0);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchViewId: false,
+            searchMenuTypes: ["filter"],
+            searchViewArch: `
+                    <search>
+                        <filter string="Date" name="date_field" date="date_field" default_period="last_month"/>
+                    </search>
+                `,
+            context: { search_default_date_field: true },
+        });
+
+        assert.deepEqual(getFacetTexts(controlPanel), ["Date: June 2019"]);
+    });
+
+    QUnit.test("filter domains are correcly combined by OR and AND", async function (assert) {
+        assert.expect(2);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchViewId: false,
+            searchMenuTypes: ["filter"],
+            searchViewArch: `
+                    <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>
+                `,
+            context: {
+                search_default_f_1_g1: true,
+                search_default_f1_g2: true,
+                search_default_f2_g2: true,
+            },
+        });
+
+        assert.deepEqual(getDomain(controlPanel), [
+            "&",
+            ["foo", "=", "f1_g1"],
+            "|",
+            ["foo", "=", "f1_g2"],
+            ["foo", "=", "f2_g2"],
+        ]);
+
+        assert.deepEqual(getFacetTexts(controlPanel), [
+            "Filter Group 1",
+            "Filter 1 Group 2orFilter 2 GROUP 2",
+        ]);
+    });
+
+    QUnit.test("arch order of groups of filters preserved", async function (assert) {
+        assert.expect(12);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchViewId: false,
+            searchMenuTypes: ["filter"],
+            searchViewArch: `
+                    <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>
+                `,
+        });
+
+        await 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));
+        });
+    });
+});
diff --git a/addons/web/static/tests/search/group_by_menu_tests.js b/addons/web/static/tests/search/group_by_menu_tests.js
new file mode 100644
index 00000000000..728a5dd87ed
--- /dev/null
+++ b/addons/web/static/tests/search/group_by_menu_tests.js
@@ -0,0 +1,452 @@
+/** @odoo-module **/
+
+import { ControlPanel } from "@web/search/control_panel/control_panel";
+import {
+    getFacetTexts,
+    isItemSelected,
+    isOptionSelected,
+    makeWithSearch,
+    removeFacet,
+    setupControlPanelServiceRegistry,
+    toggleGroupByMenu,
+    toggleMenuItem,
+    toggleMenuItemOption,
+} from "./helpers";
+
+let serverData;
+QUnit.module("Search", (hooks) => {
+    hooks.beforeEach(async () => {
+        serverData = {
+            models: {
+                foo: {
+                    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 },
+                    },
+                    records: {},
+                },
+            },
+            views: {
+                "foo,false,search": `<search/>`,
+            },
+        };
+        setupControlPanelServiceRegistry();
+    });
+
+    QUnit.module("GroupByMenu");
+
+    QUnit.test(
+        "simple rendering with neither groupbys nor groupable fields",
+        async function (assert) {
+            assert.expect(3);
+
+            const controlPanel = await makeWithSearch({
+                serverData,
+                resModel: "foo",
+                Component: ControlPanel,
+                searchMenuTypes: ["groupBy"],
+                searchViewId: false,
+                searchViewFields: {},
+            });
+
+            await toggleGroupByMenu(controlPanel);
+
+            assert.containsNone(controlPanel, ".o_menu_item");
+            assert.containsNone(controlPanel, ".dropdown-divider");
+            assert.containsNone(controlPanel, ".o_add_custom_group_menu");
+        }
+    );
+
+    QUnit.test("simple rendering with no groupby", async function (assert) {
+        assert.expect(3);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchMenuTypes: ["groupBy"],
+            searchViewId: false,
+        });
+
+        await toggleGroupByMenu(controlPanel);
+
+        assert.containsNone(controlPanel, ".o_menu_item");
+        assert.containsNone(controlPanel, ".dropdown-divider");
+        assert.containsOnce(controlPanel, ".o_add_custom_group_menu");
+    });
+
+    QUnit.test("simple rendering with a single groupby", async function (assert) {
+        assert.expect(4);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchMenuTypes: ["groupBy"],
+            searchViewId: false,
+            searchViewArch: `
+                    <search>
+                        <filter string="Foo" name="group_by_foo" context="{'group_by': 'foo'}"/>
+                    </search>
+                `,
+        });
+
+        await toggleGroupByMenu(controlPanel);
+
+        assert.containsOnce(controlPanel, ".o_menu_item");
+        assert.strictEqual(controlPanel.el.querySelector(".o_menu_item").innerText.trim(), "Foo");
+        assert.containsOnce(controlPanel, ".dropdown-divider");
+        assert.containsOnce(controlPanel, ".o_add_custom_group_menu");
+    });
+
+    QUnit.test('toggle a "simple" groupby in groupby menu works', async function (assert) {
+        assert.expect(10);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchMenuTypes: ["groupBy"],
+            searchViewId: false,
+            searchViewArch: `
+                    <search>
+                        <filter string="Foo" name="group_by_foo" context="{'group_by': 'foo'}"/>
+                    </search>
+                `,
+        });
+
+        await toggleGroupByMenu(controlPanel);
+
+        assert.deepEqual(controlPanel.env.searchModel.groupBy, []);
+        assert.deepEqual(getFacetTexts(controlPanel), []);
+        assert.notOk(isItemSelected(controlPanel, "Foo"));
+
+        await toggleMenuItem(controlPanel, "Foo");
+
+        assert.deepEqual(controlPanel.env.searchModel.groupBy, ["foo"]);
+        assert.deepEqual(getFacetTexts(controlPanel), ["Foo"]);
+        assert.containsOnce(
+            controlPanel.el.querySelector(".o_searchview .o_searchview_facet"),
+            "span.fa.fa-bars.o_searchview_facet_label"
+        );
+        assert.ok(isItemSelected(controlPanel, "Foo"));
+
+        await toggleMenuItem(controlPanel, "Foo");
+
+        assert.deepEqual(controlPanel.env.searchModel.groupBy, []);
+        assert.deepEqual(getFacetTexts(controlPanel), []);
+        assert.notOk(isItemSelected(controlPanel, "Foo"));
+    });
+
+    QUnit.test('toggle a "simple" groupby quickly does not crash', async function (assert) {
+        assert.expect(1);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchMenuTypes: ["groupBy"],
+            searchViewId: false,
+            searchViewArch: `
+                    <search>
+                        <filter string="Foo" name="group_by_foo" context="{'group_by': 'foo'}"/>
+                    </search>
+                `,
+        });
+
+        await toggleGroupByMenu(controlPanel);
+
+        toggleMenuItem(controlPanel, "Foo");
+        toggleMenuItem(controlPanel, "Foo");
+
+        assert.ok(true);
+    });
+
+    QUnit.test(
+        'remove a "Group By" facet properly unchecks groupbys in groupby menu',
+        async function (assert) {
+            assert.expect(6);
+
+            const controlPanel = await makeWithSearch({
+                serverData,
+                resModel: "foo",
+                Component: ControlPanel,
+                searchMenuTypes: ["groupBy"],
+                searchViewId: false,
+                searchViewArch: `
+                    <search>
+                        <filter string="Foo" name="group_by_foo" context="{'group_by': 'foo'}"/>
+                    </search>
+                `,
+                context: { search_default_group_by_foo: 1 },
+            });
+
+            await toggleGroupByMenu(controlPanel);
+
+            assert.deepEqual(getFacetTexts(controlPanel), ["Foo"]);
+            assert.deepEqual(controlPanel.env.searchModel.groupBy, ["foo"]);
+            assert.ok(isItemSelected(controlPanel, "Foo"));
+
+            await removeFacet(controlPanel, "Foo");
+
+            assert.deepEqual(getFacetTexts(controlPanel), []);
+            assert.deepEqual(controlPanel.env.searchModel.groupBy, []);
+
+            await toggleGroupByMenu(controlPanel);
+
+            assert.notOk(isItemSelected(controlPanel, "Foo"));
+        }
+    );
+
+    QUnit.test("group by a date field using interval works", async function (assert) {
+        assert.expect(21);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchMenuTypes: ["groupBy"],
+            searchViewId: false,
+            searchViewArch: `
+                    <search>
+                        <filter string="Date" name="date" context="{'group_by': 'date_field:week'}"/>
+                    </search>
+                `,
+            context: { search_default_date: 1 },
+        });
+
+        await toggleGroupByMenu(controlPanel);
+
+        assert.deepEqual(controlPanel.env.searchModel.groupBy, ["date_field:week"]);
+
+        await toggleMenuItem(controlPanel, "Date");
+
+        assert.ok(isOptionSelected(controlPanel, "Date", "Week"));
+
+        assert.deepEqual(
+            [...controlPanel.el.querySelectorAll(".o_item_option")].map((el) => el.innerText),
+            ["Year", "Quarter", "Month", "Week", "Day"]
+        );
+
+        const steps = [
+            {
+                description: "Year",
+                facetTexts: ["Date: Year>Date: Week"],
+                selectedoptions: ["Year", "Week"],
+                groupBy: ["date_field:year", "date_field:week"],
+            },
+            {
+                description: "Month",
+                facetTexts: ["Date: Year>Date: Month>Date: Week"],
+                selectedoptions: ["Year", "Month", "Week"],
+                groupBy: ["date_field:year", "date_field:month", "date_field:week"],
+            },
+            {
+                description: "Week",
+                facetTexts: ["Date: Year>Date: Month"],
+                selectedoptions: ["Year", "Month"],
+                groupBy: ["date_field:year", "date_field:month"],
+            },
+            {
+                description: "Month",
+                facetTexts: ["Date: Year"],
+                selectedoptions: ["Year"],
+                groupBy: ["date_field:year"],
+            },
+            { description: "Year", facetTexts: [], selectedoptions: [], groupBy: [] },
+        ];
+        for (const s of steps) {
+            await toggleMenuItemOption(controlPanel, "Date", s.description);
+
+            assert.deepEqual(controlPanel.env.searchModel.groupBy, s.groupBy);
+            assert.deepEqual(getFacetTexts(controlPanel), s.facetTexts);
+            s.selectedoptions.forEach((description) => {
+                assert.ok(isOptionSelected(controlPanel, "Date", description));
+            });
+        }
+    });
+
+    QUnit.test("interval options are correctly grouped and ordered", async function (assert) {
+        assert.expect(8);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchMenuTypes: ["groupBy"],
+            searchViewId: false,
+            searchViewArch: `
+                    <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>
+                `,
+            context: { search_default_bar: 1 },
+        });
+
+        assert.deepEqual(getFacetTexts(controlPanel), ["Bar"]);
+
+        // open menu 'Group By'
+        await toggleGroupByMenu(controlPanel);
+
+        // Open the groupby 'Date'
+        await toggleMenuItem(controlPanel, "Date");
+        // select option 'week'
+        await toggleMenuItemOption(controlPanel, "Date", "Week");
+
+        assert.deepEqual(getFacetTexts(controlPanel), ["Bar>Date: Week"]);
+
+        // select option 'day'
+        await toggleMenuItemOption(controlPanel, "Date", "Day");
+
+        assert.deepEqual(getFacetTexts(controlPanel), ["Bar>Date: Week>Date: Day"]);
+
+        // select option 'year'
+        await toggleMenuItemOption(controlPanel, "Date", "Year");
+
+        assert.deepEqual(getFacetTexts(controlPanel), ["Bar>Date: Year>Date: Week>Date: Day"]);
+
+        // select 'Foo'
+        await toggleMenuItem(controlPanel, "Foo");
+
+        assert.deepEqual(getFacetTexts(controlPanel), ["Bar>Date: Year>Date: Week>Date: Day>Foo"]);
+
+        // select option 'quarter'
+        await toggleMenuItem(controlPanel, "Date");
+        await toggleMenuItemOption(controlPanel, "Date", "Quarter");
+
+        assert.deepEqual(getFacetTexts(controlPanel), [
+            "Bar>Date: Year>Date: Quarter>Date: Week>Date: Day>Foo",
+        ]);
+
+        // unselect 'Bar'
+        await toggleMenuItem(controlPanel, "Bar");
+
+        assert.deepEqual(getFacetTexts(controlPanel), [
+            "Date: Year>Date: Quarter>Date: Week>Date: Day>Foo",
+        ]);
+
+        // unselect option 'week'
+        await toggleMenuItem(controlPanel, "Date");
+        await toggleMenuItemOption(controlPanel, "Date", "Week");
+
+        assert.deepEqual(getFacetTexts(controlPanel), ["Date: Year>Date: Quarter>Date: Day>Foo"]);
+    });
+
+    QUnit.test("default groupbys can be ordered", async function (assert) {
+        assert.expect(2);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchMenuTypes: ["groupBy"],
+            searchViewId: false,
+            searchViewArch: `
+                    <search>
+                        <filter string="Birthday" name="birthday" context="{'group_by': 'birthday'}"/>
+                        <filter string="Date" name="date" context="{'group_by': 'date_field:week'}"/>
+                    </search>
+                `,
+            context: { search_default_birthday: 2, search_default_date: 1 },
+        });
+
+        // the default groupbys should be activated in the right order
+        assert.deepEqual(controlPanel.env.searchModel.groupBy, [
+            "date_field:week",
+            "birthday:month",
+        ]);
+        assert.deepEqual(getFacetTexts(controlPanel), ["Date: Week>Birthday: Month"]);
+    });
+
+    QUnit.test("a separator in groupbys does not cause problems", async function (assert) {
+        assert.expect(23);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchMenuTypes: ["groupBy"],
+            searchViewId: false,
+            searchViewArch: `
+                    <search>
+                        <filter string="Date" name="coolName" context="{'group_by': 'date_field'}"/>
+                        <separator/>
+                        <filter string="Bar" name="superName" context="{'group_by': 'bar'}"/>
+                    </search>
+                `,
+        });
+
+        await toggleGroupByMenu(controlPanel);
+        await toggleMenuItem(controlPanel, "Date");
+        await toggleMenuItemOption(controlPanel, "Date", "Day");
+
+        assert.ok(isItemSelected(controlPanel, "Date"));
+        assert.notOk(isItemSelected(controlPanel, "Bar"));
+        assert.ok(isOptionSelected(controlPanel, "Date", "Day"), "selected");
+        assert.deepEqual(getFacetTexts(controlPanel), ["Date: Day"]);
+
+        await toggleMenuItem(controlPanel, "Bar");
+        await toggleMenuItem(controlPanel, "Date");
+
+        assert.ok(isItemSelected(controlPanel, "Date"));
+        assert.ok(isItemSelected(controlPanel, "Bar"));
+        assert.ok(isOptionSelected(controlPanel, "Date", "Day"), "selected");
+        assert.deepEqual(getFacetTexts(controlPanel), ["Date: Day>Bar"]);
+
+        await toggleMenuItemOption(controlPanel, "Date", "Quarter");
+
+        assert.ok(isItemSelected(controlPanel, "Date"));
+        assert.ok(isItemSelected(controlPanel, "Bar"));
+        assert.ok(isOptionSelected(controlPanel, "Date", "Quarter"), "selected");
+        assert.ok(isOptionSelected(controlPanel, "Date", "Day"), "selected");
+        assert.deepEqual(getFacetTexts(controlPanel), ["Date: Quarter>Date: Day>Bar"]);
+
+        await toggleMenuItem(controlPanel, "Bar");
+        await toggleMenuItem(controlPanel, "Date");
+
+        assert.ok(isItemSelected(controlPanel, "Date"));
+        assert.notOk(isItemSelected(controlPanel, "Bar"));
+        assert.ok(isOptionSelected(controlPanel, "Date", "Quarter"), "selected");
+        assert.ok(isOptionSelected(controlPanel, "Date", "Day"), "selected");
+        assert.deepEqual(getFacetTexts(controlPanel), ["Date: Quarter>Date: Day"]);
+
+        await removeFacet(controlPanel);
+
+        assert.deepEqual(getFacetTexts(controlPanel), []);
+
+        await toggleGroupByMenu(controlPanel);
+        await toggleMenuItem(controlPanel, "Date");
+
+        assert.notOk(isItemSelected(controlPanel, "Date"));
+        assert.notOk(isItemSelected(controlPanel, "Bar"));
+        assert.notOk(isOptionSelected(controlPanel, "Date", "Quarter"), "selected");
+        assert.notOk(isOptionSelected(controlPanel, "Date", "Day"), "selected");
+    });
+
+    QUnit.test("falsy search default groupbys are not activated", async function (assert) {
+        assert.expect(2);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "foo",
+            Component: ControlPanel,
+            searchMenuTypes: ["groupBy"],
+            searchViewId: false,
+            searchViewArch: `
+                    <search>
+                        <filter string="Birthday" name="birthday" context="{'group_by': 'birthday'}"/>
+                        <filter string="Date" name="date" context="{'group_by': 'foo'}"/>
+                    </search>
+                `,
+            context: { search_default_birthday: false, search_default_foo: 0 },
+        });
+
+        assert.deepEqual(controlPanel.env.searchModel.groupBy, []);
+        assert.deepEqual(getFacetTexts(controlPanel), []);
+    });
+});
diff --git a/addons/web/static/tests/search/group_by_tests.js b/addons/web/static/tests/search/group_by_tests.js
new file mode 100644
index 00000000000..fee7912d2a4
--- /dev/null
+++ b/addons/web/static/tests/search/group_by_tests.js
@@ -0,0 +1,99 @@
+/** @odoo-module **/
+
+import { getGroupBy } from "@web/search/utils/group_by";
+import { DEFAULT_INTERVAL } from "@web/search/utils/dates";
+
+let 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" },
+};
+
+QUnit.module("GroupBy Class", {}, () => {
+    QUnit.module("Without field validation");
+    QUnit.test("simple valid group by", async function (assert) {
+        assert.expect(6);
+        let groupBy = getGroupBy("display_name");
+        assert.strictEqual(groupBy.fieldName, "display_name");
+        assert.strictEqual(groupBy.interval, null);
+        assert.strictEqual(groupBy.spec, "display_name");
+        groupBy = getGroupBy("display_name:quarter");
+        assert.strictEqual(groupBy.fieldName, "display_name");
+        assert.strictEqual(groupBy.interval, "quarter");
+        assert.strictEqual(groupBy.spec, "display_name:quarter");
+    });
+    QUnit.test("simple invalid group by", async function (assert) {
+        assert.expect(3);
+        try {
+            getGroupBy(":day");
+        } catch (e) {
+            assert.step("Error 1");
+        }
+        try {
+            getGroupBy("diay_name:yar");
+        } catch (e) {
+            assert.step("Error 2");
+        }
+        assert.verifySteps(["Error 1", "Error 2"]);
+    });
+    QUnit.module("With field validation");
+    QUnit.test("simple valid group by", async function (assert) {
+        assert.expect(3);
+        let groupBy = getGroupBy("display_name", fields);
+        assert.strictEqual(groupBy.fieldName, "display_name");
+        assert.strictEqual(groupBy.interval, null);
+        assert.strictEqual(groupBy.spec, "display_name");
+    });
+    QUnit.test("simple invalid group by", async function (assert) {
+        assert.expect(5);
+        try {
+            getGroupBy("", fields);
+        } catch (e) {
+            assert.step("Error 1");
+        }
+        try {
+            getGroupBy("display_name:day", fields);
+        } catch (e) {
+            assert.step("Error 2");
+        }
+        try {
+            getGroupBy("diay_name:year", fields);
+        } catch (e) {
+            assert.step("Error 3");
+        }
+        try {
+            getGroupBy("diay_name:yar", fields);
+        } catch (e) {
+            assert.step("Error 4");
+        }
+        assert.verifySteps(["Error 1", "Error 2", "Error 3", "Error 4"]);
+    });
+    QUnit.test("simple valid date group by", async function (assert) {
+        assert.expect(6);
+        let groupBy = getGroupBy("date_field:year", fields);
+        assert.strictEqual(groupBy.fieldName, "date_field");
+        assert.strictEqual(groupBy.interval, "year");
+        assert.strictEqual(groupBy.spec, "date_field:year");
+        groupBy = getGroupBy("date_field", fields);
+        assert.strictEqual(groupBy.fieldName, "date_field");
+        assert.strictEqual(groupBy.interval, DEFAULT_INTERVAL);
+        assert.strictEqual(groupBy.spec, `date_field:${DEFAULT_INTERVAL}`);
+    });
+    QUnit.test("simple invalid date group by", async function (assert) {
+        assert.expect(2);
+        try {
+            getGroupBy("date_field:yar", fields);
+        } catch (e) {
+            assert.step("Error");
+        }
+        assert.verifySteps(["Error"]);
+    });
+});
diff --git a/addons/web/static/tests/search/helpers.js b/addons/web/static/tests/search/helpers.js
new file mode 100644
index 00000000000..56f39300800
--- /dev/null
+++ b/addons/web/static/tests/search/helpers.js
@@ -0,0 +1,275 @@
+/** @odoo-module **/
+
+import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
+import { notificationService } from "@web/core/notifications/notification_service";
+import { ormService } from "@web/core/orm_service";
+import { registry } from "@web/core/registry";
+import { WithSearch } from "@web/search/with_search/with_search";
+import { viewService } from "@web/views/view_service";
+import { actionService } from "@web/webclient/actions/action_service";
+import { registerCleanup } from "../helpers/cleanup";
+import { makeTestEnv } from "../helpers/mock_env";
+import { click, getFixture, triggerEvent } from "../helpers/utils";
+
+const serviceRegistry = registry.category("services");
+
+const { Component, mount } = owl;
+
+export const setupControlPanelServiceRegistry = () => {
+    serviceRegistry.add("action", actionService);
+    serviceRegistry.add("hotkey", hotkeyService);
+    serviceRegistry.add("notification", notificationService);
+    serviceRegistry.add("orm", ormService);
+    serviceRegistry.add("view", viewService);
+};
+
+export const makeWithSearch = async (params) => {
+    const serverData = params.serverData || undefined;
+    const mockRPC = params.mockRPC || undefined;
+    const props = { ...params };
+    delete props.serverData;
+    delete props.mockRPC;
+    const env = await makeTestEnv({ serverData, mockRPC });
+    const target = getFixture();
+    const withSearch = await mount(WithSearch, { env, props, target });
+    registerCleanup(() => withSearch.destroy());
+    const component = Object.values(withSearch.__owl__.children)[0];
+    return component;
+};
+
+const getNode = (target) => {
+    return target instanceof Component ? target.el : target;
+};
+
+const findItem = (target, selector, finder = 0) => {
+    const el = getNode(target);
+    const elems = [...el.querySelectorAll(selector)];
+    if (Number.isInteger(finder)) {
+        return elems[finder];
+    }
+    return elems.find((el) => el.innerText.trim().toLowerCase() === finder.toLowerCase());
+};
+
+/** Menu (generic) */
+
+export const toggleMenu = async (el, menuFinder) => {
+    const menu = findItem(el, `.o_dropdown button.o_dropdown_toggler`, menuFinder);
+    await click(menu);
+};
+
+export const toggleMenuItem = async (el, itemFinder) => {
+    const item = findItem(el, `.o_menu_item`, itemFinder);
+    await click(item);
+};
+export const toggleMenuItemOption = async (el, itemFinder, optionFinder) => {
+    const item = findItem(el, `.o_menu_item`, itemFinder);
+    const option = findItem(item.parentNode, ".o_item_option", optionFinder);
+    await click(option);
+};
+export const isItemSelected = (el, itemFinder) => {
+    const item = findItem(el, `.o_menu_item`, itemFinder);
+    return item.classList.contains("selected");
+};
+export const isOptionSelected = (el, itemFinder, optionFinder) => {
+    const item = findItem(el, `.o_menu_item`, itemFinder);
+    const option = findItem(item.parentNode, ".o_item_option", optionFinder);
+    return option.classList.contains("selected");
+};
+export const getMenuItemTexts = (target) => {
+    const el = getNode(target);
+    return [...el.querySelectorAll(`.o_dropdown ul .o_menu_item`)].map((e) => e.innerText.trim());
+};
+
+/** Filter menu */
+
+export const toggleFilterMenu = async (el) => {
+    await click(findItem(el, `.o_filter_menu button.o_dropdown_toggler`));
+};
+
+export const toggleAddCustomFilter = async (el) => {
+    await click(findItem(el, `.o_add_custom_filter_menu .o_dropdown_toggler`));
+};
+
+export const editConditionField = async (el, index, fieldName) => {
+    const condition = findItem(el, `.o_filter_condition`, index);
+    const select = findItem(condition, "select", 0);
+    select.value = fieldName;
+    await triggerEvent(select, null, "change");
+};
+
+export const editConditionOperator = async (el, index, operator) => {
+    const condition = findItem(el, `.o_filter_condition`, index);
+    const select = findItem(condition, "select", 1);
+    select.value = operator;
+    await triggerEvent(select, null, "change");
+};
+
+export const editConditionValue = async (el, index, value, valueIndex = 0) => {
+    const condition = findItem(el, `.o_filter_condition`, index);
+    const target = findItem(
+        condition,
+        ".o_generator_menu_value input,.o_generator_menu_value select",
+        valueIndex
+    );
+    target.value = value;
+    await triggerEvent(target, null, "change");
+};
+
+export const applyFilter = async (el) => {
+    await click(findItem(el, `.o_add_custom_filter_menu .o_dropdown_menu button.o_apply_filter`));
+};
+
+export const addCondition = async (el) => {
+    await click(findItem(el, `.o_add_custom_filter_menu .o_dropdown_menu button.o_add_condition`));
+};
+
+/** Group by menu */
+
+export const toggleGroupByMenu = async (el) => {
+    await click(findItem(el, `.o_group_by_menu .o_dropdown_toggler`));
+};
+
+export const toggleAddCustomGroup = async (el) => {
+    await click(findItem(el, `.o_add_custom_group_menu .o_dropdown_toggler`));
+};
+
+export const selectGroup = async (el, fieldName) => {
+    const select = findItem(el, `.o_add_custom_group_menu .o_dropdown_menu select`);
+    select.value = fieldName;
+    await triggerEvent(select, null, "change");
+};
+
+export const applyGroup = async (el) => {
+    await click(findItem(el, `.o_add_custom_group_menu .o_dropdown_menu .btn`));
+};
+
+/** Favorite menu */
+
+export const toggleFavoriteMenu = async (el) => {
+    await click(findItem(el, `.o_favorite_menu .o_dropdown_toggler`));
+};
+
+export const deleteFavorite = async (el, favoriteFinder) => {
+    const favorite = findItem(el, `.o_favorite_menu .o_menu_item`, favoriteFinder);
+    await click(findItem(favorite, "i.fa-trash-o"));
+};
+
+export const toggleSaveFavorite = async (el) => {
+    await click(findItem(el, `.o_favorite_menu .o_add_favorite .o_dropdown_toggler`));
+};
+
+export const editFavoriteName = async (el, name) => {
+    const input = findItem(
+        el,
+        `.o_favorite_menu .o_add_favorite .o_dropdown_menu input[type="text"]`
+    );
+    input.value = name;
+    await triggerEvent(input, null, "input");
+};
+
+export const saveFavorite = async (el) => {
+    await click(findItem(el, `.o_favorite_menu .o_add_favorite .o_dropdown_menu button`));
+};
+
+/** Comparison menu */
+
+export const toggleComparisonMenu = async (el) => {
+    await click(findItem(el, `.o_comparison_menu button.o_dropdown_toggler`));
+};
+
+/** Search bar */
+
+export const getFacetTexts = (target) => {
+    const el = getNode(target);
+    return [...el.querySelectorAll(`div.o_searchview_facet`)].map((facet) =>
+        facet.innerText.trim()
+    );
+};
+
+export const removeFacet = async (el, facetFinder = 0) => {
+    const facet = findItem(el, `div.o_searchview_facet`, facetFinder);
+    await click(facet.querySelector("i.o_facet_remove"));
+};
+
+export const editSearch = async (el, value) => {
+    const input = findItem(el, `.o_searchview input`);
+    input.value = value;
+    await triggerEvent(input, null, "input");
+};
+
+export const validateSearch = async (el) => {
+    const input = findItem(el, `.o_searchview input`);
+    await triggerEvent(input, null, "keydown", { key: "Enter" });
+};
+
+/** Switch View */
+
+export const switchView = async (el, viewType) => {
+    await click(findItem(el, `button.o_switch_view.o_${viewType}`));
+};
+
+/////////////////////////////////////
+// Action Menu
+/////////////////////////////////////
+// /**
+//  * @param {EventTarget} el
+//  * @param {string} [menuFinder="Action"]
+//  * @returns {Promise}
+//  */
+// export async function toggleActionMenu(el, menuFinder = "Action") {
+//     const dropdown = findItem(el, `.o_cp_action_menus button`, menuFinder);
+//     await click(dropdown);
+// }
+/////////////////////////////////////
+// Pager
+/////////////////////////////////////
+// /**
+//  * @param {EventTarget} el
+//  * @returns {Promise}
+//  */
+// export async function pagerPrevious(el) {
+//     await click(getNode(el).querySelector(`.o_pager button.o_pager_previous`));
+// }
+// /**
+//  * @param {EventTarget} el
+//  * @returns {Promise}
+//  */
+// export async function pagerNext(el) {
+//     await click(getNode(el).querySelector(`.o_pager button.o_pager_next`));
+// }
+// /**
+//  * @param {EventTarget} el
+//  * @returns {string}
+//  */
+// export 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}
+//  */
+// export function getPagerSize(el) {
+//     return getNode(el).querySelector(`.o_pager_counter span.o_pager_limit`).innerText.trim();
+// }
+// /**
+//  * @param {EventTarget} el
+//  * @param {string} value
+//  * @returns {Promise}
+//  */
+// export 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']);
+// }
diff --git a/addons/web/static/tests/search/search_bar_tests.js b/addons/web/static/tests/search/search_bar_tests.js
new file mode 100644
index 00000000000..60f43f15ec7
--- /dev/null
+++ b/addons/web/static/tests/search/search_bar_tests.js
@@ -0,0 +1,700 @@
+/** @odoo-module **/
+
+import { registerCleanup } from "@web/../tests/helpers/cleanup";
+import { ControlPanel } from "@web/search/control_panel/control_panel";
+import { click, patchWithCleanup, triggerEvent } from "../helpers/utils";
+import {
+    editSearch,
+    getFacetTexts,
+    makeWithSearch,
+    removeFacet,
+    setupControlPanelServiceRegistry,
+    validateSearch,
+} from "./helpers";
+
+function getDomain(controlPanel) {
+    return controlPanel.env.searchModel.domain;
+}
+
+let serverData;
+QUnit.module("Search", (hooks) => {
+    hooks.beforeEach(async () => {
+        serverData = {
+            models: {
+                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" },
+                        bool: { string: "Bool", type: "boolean" },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "First record",
+                            foo: "yop",
+                            bar: 2,
+                            bool: true,
+                            birthday: "1983-07-15",
+                            birth_datetime: "1983-07-15 01:00:00",
+                        },
+                        {
+                            id: 2,
+                            display_name: "Second record",
+                            foo: "blip",
+                            bar: 1,
+                            bool: false,
+                            birthday: "1982-06-04",
+                            birth_datetime: "1982-06-04 02:00:00",
+                        },
+                        {
+                            id: 3,
+                            display_name: "Third record",
+                            foo: "gnap",
+                            bar: 1,
+                            bool: false,
+                            birthday: "1985-09-13",
+                            birth_datetime: "1985-09-13 03:00:00",
+                        },
+                        {
+                            id: 4,
+                            display_name: "Fourth record",
+                            foo: "plop",
+                            bar: 2,
+                            bool: true,
+                            birthday: "1983-05-05",
+                            birth_datetime: "1983-05-05 04:00:00",
+                        },
+                        {
+                            id: 5,
+                            display_name: "Fifth record",
+                            foo: "zoup",
+                            bar: 2,
+                            bool: true,
+                            birthday: "1800-01-01",
+                            birth_datetime: "1800-01-01 05:00:00",
+                        },
+                    ],
+                },
+            },
+            views: {
+                "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="Birthday" name="date_filter" date="birthday"/>
+                        <filter string="Birthday" name="date_group_by" context="{'group_by': 'birthday:day'}"/>
+                    </search>
+                `,
+            },
+            actions: {
+                1: {
+                    id: 1,
+                    name: "Partners Action",
+                    res_model: "partner",
+                    search_view_id: [false, "search"],
+                    type: "ir.actions.act_window",
+                    views: [[false, "list"]],
+                },
+            },
+        };
+        setupControlPanelServiceRegistry();
+    });
+
+    QUnit.module("SearchBar");
+
+    QUnit.test("basic rendering", async function (assert) {
+        assert.expect(1);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "partner",
+            Component: ControlPanel,
+            searchMenuTypes: [],
+            searchViewId: false,
+        });
+
+        assert.strictEqual(
+            document.activeElement,
+            controlPanel.el.querySelector(".o_searchview input"),
+            "searchview input should be focused"
+        );
+    });
+
+    QUnit.test("navigation with facets", async function (assert) {
+        assert.expect(4);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "partner",
+            Component: ControlPanel,
+            searchMenuTypes: ["groupBy"],
+            searchViewId: false,
+            context: { search_default_date_group_by: 1 },
+        });
+
+        assert.containsOnce(
+            controlPanel,
+            ".o_searchview .o_searchview_facet",
+            "there should be one facet"
+        );
+        assert.strictEqual(
+            document.activeElement,
+            controlPanel.el.querySelector(".o_searchview input")
+        );
+
+        // press left to focus the facet
+        await triggerEvent(document.activeElement, null, "keydown", { key: "ArrowLeft" });
+        assert.strictEqual(
+            document.activeElement,
+            controlPanel.el.querySelector(".o_searchview .o_searchview_facet")
+        );
+
+        // press right to focus the input
+        await triggerEvent(document.activeElement, null, "keydown", { key: "ArrowRight" });
+        assert.strictEqual(
+            document.activeElement,
+            controlPanel.el.querySelector(".o_searchview input")
+        );
+    });
+
+    QUnit.test("search date and datetime fields. Support of timezones", async function (assert) {
+        assert.expect(4);
+
+        const originalZoneName = luxon.Settings.defaultZoneName;
+        luxon.Settings.defaultZoneName = new luxon.FixedOffsetZone.instance(360);
+        registerCleanup(() => {
+            luxon.Settings.defaultZoneName = originalZoneName;
+        });
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "partner",
+            Component: ControlPanel,
+            searchMenuTypes: [],
+            searchViewId: false,
+        });
+
+        // Date case
+        await editSearch(controlPanel, "07/15/1983");
+        let searchInput = controlPanel.el.querySelector(".o_searchview input");
+        await triggerEvent(searchInput, null, "keydown", { key: "ArrowDown" });
+        await triggerEvent(searchInput, null, "keydown", { key: "Enter" }); // select
+
+        assert.deepEqual(
+            getFacetTexts(controlPanel).map((str) => str.replace(/\s+/, " ")),
+            ["Birthday 07/15/1983"],
+            "The format of the date in the facet should be in locale"
+        );
+
+        assert.deepEqual(getDomain(controlPanel), [["birthday", "=", "1983-07-15"]]);
+
+        // Close Facet
+        await click(controlPanel.el.querySelector(".o_searchview_facet .o_facet_remove"));
+
+        // DateTime case
+        await editSearch(controlPanel, "07/15/1983 00:00:00");
+        searchInput = controlPanel.el.querySelector(".o_searchview input");
+        await triggerEvent(searchInput, null, "keydown", { key: "ArrowDown" });
+        await triggerEvent(searchInput, null, "keydown", { key: "ArrowDown" });
+        await triggerEvent(searchInput, null, "keydown", { key: "Enter" }); // select
+
+        assert.deepEqual(
+            getFacetTexts(controlPanel).map((str) => str.replace(/\s+/, " ")),
+            ["Birth DateTime\n07/15/1983 00:00:00"],
+            "The format of the datetime in the facet should be in locale"
+        );
+
+        assert.deepEqual(getDomain(controlPanel), [["birth_datetime", "=", "1983-07-14 18:00:00"]]);
+    });
+
+    QUnit.test("autocomplete menu clickout interactions", async function (assert) {
+        assert.expect(9);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "partner",
+            Component: ControlPanel,
+            searchMenuTypes: [],
+            searchViewId: false,
+            searchViewArch: `
+                    <search>
+                        <field name="bar"/>
+                        <field name="birthday"/>
+                        <field name="birth_datetime"/>
+                        <field name="foo"/>
+                        <field name="bool"/>
+                    </search>
+                `,
+        });
+
+        const input = controlPanel.el.querySelector(".o_searchview input");
+
+        assert.containsNone(controlPanel, ".o_searchview_autocomplete");
+
+        await editSearch(controlPanel, "Hello there");
+
+        assert.strictEqual(input.value, "Hello there", "input value should be updated");
+        assert.containsOnce(controlPanel, ".o_searchview_autocomplete");
+
+        await triggerEvent(input, null, "keydown", { key: "Escape" });
+
+        assert.strictEqual(input.value, "", "input value should be empty");
+        assert.containsNone(controlPanel, ".o_searchview_autocomplete");
+
+        await editSearch(controlPanel, "General Kenobi");
+
+        assert.strictEqual(input.value, "General Kenobi", "input value should be updated");
+        assert.containsOnce(controlPanel, ".o_searchview_autocomplete");
+
+        await click(document.body);
+
+        assert.strictEqual(input.value, "", "input value should be empty");
+        assert.containsNone(controlPanel, ".o_searchview_autocomplete");
+    });
+
+    QUnit.test("select an autocomplete field", async function (assert) {
+        assert.expect(3);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "partner",
+            Component: ControlPanel,
+            searchMenuTypes: [],
+            searchViewId: false,
+        });
+
+        await editSearch(controlPanel, "a");
+        assert.containsN(
+            controlPanel,
+            ".o_searchview_autocomplete li",
+            2,
+            "there should be 2 result for 'a' in search bar autocomplete"
+        );
+
+        const searchInput = controlPanel.el.querySelector(".o_searchview input");
+        await triggerEvent(searchInput, null, "keydown", { key: "Enter" });
+        assert.strictEqual(
+            controlPanel.el
+                .querySelector(".o_searchview_input_container .o_facet_values")
+                .innerText.trim(),
+            "a",
+            "There should be a field facet with label 'a'"
+        );
+
+        assert.deepEqual(getDomain(controlPanel), [["foo", "ilike", "a"]]);
+    });
+
+    QUnit.test("select an autocomplete field with `context` key", async function (assert) {
+        assert.expect(8);
+
+        let updateCount = 0;
+        patchWithCleanup(ControlPanel.prototype, {
+            async willUpdateProps() {
+                updateCount++;
+                await this._super(...arguments);
+            },
+        });
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "partner",
+            Component: ControlPanel,
+            searchMenuTypes: [],
+            searchViewId: false,
+        });
+
+        // 'r' key to filter on bar "First Record"
+        await editSearch(controlPanel, "record");
+        const searchInput = controlPanel.el.querySelector(".o_searchview input");
+        await triggerEvent(searchInput, null, "keydown", { key: "ArrowDown" });
+        await triggerEvent(searchInput, null, "keydown", { key: "ArrowRight" });
+        await triggerEvent(searchInput, null, "keydown", { key: "ArrowDown" });
+        await triggerEvent(searchInput, null, "keydown", { key: "Enter" });
+
+        assert.deepEqual(
+            getFacetTexts(controlPanel).map((str) => str.replace(/\s+/, "")),
+            ["BarFirst record"]
+        );
+
+        assert.strictEqual(updateCount, 1);
+
+        assert.deepEqual(getDomain(controlPanel), [["bar", "=", 1]]);
+        assert.deepEqual(controlPanel.env.searchModel.context.bar, [1]);
+
+        // 'r' key to filter on bar "Second Record"
+        await editSearch(controlPanel, "record");
+        await triggerEvent(searchInput, null, "keydown", { key: "ArrowDown" });
+        await triggerEvent(searchInput, null, "keydown", { key: "ArrowRight" });
+        await triggerEvent(searchInput, null, "keydown", { key: "ArrowDown" });
+        await triggerEvent(searchInput, null, "keydown", { key: "ArrowDown" });
+        await triggerEvent(searchInput, null, "keydown", { key: "Enter" });
+
+        assert.deepEqual(
+            getFacetTexts(controlPanel).map((str) => str.replace(/\s+/, "")),
+            ["BarFirst recordorSecond record"]
+        );
+
+        assert.strictEqual(updateCount, 2);
+
+        assert.deepEqual(getDomain(controlPanel), ["|", ["bar", "=", 1], ["bar", "=", 2]]);
+        assert.deepEqual(controlPanel.env.searchModel.context.bar, [1, 2]);
+    });
+
+    QUnit.test("no search text triggers a reload", async function (assert) {
+        assert.expect(2);
+
+        let updateCount = 0;
+        patchWithCleanup(ControlPanel.prototype, {
+            async willUpdateProps() {
+                updateCount++;
+                await this._super(...arguments);
+            },
+        });
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "partner",
+            Component: ControlPanel,
+            searchMenuTypes: [],
+            searchViewId: false,
+        });
+
+        const searchInput = controlPanel.el.querySelector(".o_searchview input");
+        await triggerEvent(searchInput, null, "keydown", { key: "Enter" });
+
+        assert.containsNone(controlPanel, ".o_searchview_facet_label");
+        assert.strictEqual(updateCount, 1, "should have been updated once");
+    });
+
+    QUnit.test("selecting (no result) triggers a search bar rendering", async function (assert) {
+        assert.expect(3);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "partner",
+            Component: ControlPanel,
+            searchMenuTypes: [],
+            searchViewId: false,
+            searchViewArch: `
+                    <search>
+                        <field name="bar"/>
+                    </search>
+                `,
+        });
+
+        await editSearch(controlPanel, "hello there");
+
+        // 'a' key to filter nothing on bar
+        const searchInput = controlPanel.el.querySelector(".o_searchview input");
+        await triggerEvent(searchInput, null, "keydown", { key: "ArrowDown" });
+        await triggerEvent(searchInput, null, "keydown", { key: "ArrowRight" });
+        await triggerEvent(searchInput, null, "keydown", { key: "ArrowDown" });
+
+        assert.strictEqual(
+            controlPanel.el
+                .querySelector(".o_searchview_autocomplete .o_selection_focus")
+                .innerText.trim(),
+            "(no result)",
+            "there should be no result for 'a' in bar"
+        );
+
+        await triggerEvent(searchInput, null, "keydown", { key: "Enter" });
+
+        assert.containsNone(controlPanel, ".o_searchview_facet_label");
+        assert.strictEqual(
+            controlPanel.el.querySelector(".o_searchview input").value,
+            "",
+            "the search input should be re-rendered"
+        );
+    });
+
+    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 controlPanel = await makeWithSearch({
+                serverData,
+                resModel: "partner",
+                Component: ControlPanel,
+                searchMenuTypes: [],
+                searchViewId: false,
+            });
+
+            const searchInput = controlPanel.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 triggerEvent(searchInput, null, "keydown", {
+                    key,
+                    isComposing: true,
+                });
+                if (i === 0) {
+                    // Composition is initiated after the first keydown
+                    await triggerEvent(searchInput, null, "compositionstart");
+                }
+                await triggerEvent(searchInput, null, "keypress", {
+                    key,
+                    isComposing: true,
+                });
+                searchInput.value = TEST.slice(0, i + 1);
+                await triggerEvent(searchInput, null, "keyup", { key, isComposing: true });
+                await triggerEvent(searchInput, null, "input", {
+                    inputType: "insertCompositionText",
+                    isComposing: true,
+                });
+            }
+            assert.containsOnce(
+                controlPanel.el,
+                ".o_searchview_autocomplete",
+                "should display autocomplete dropdown menu on typing something in search view"
+            );
+            assert.strictEqual(
+                controlPanel.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 triggerEvent(searchInput, null, "keydown", {
+                key: "ArrowDown",
+                isComposing: true,
+            });
+            await triggerEvent(searchInput, null, "keypress", {
+                key: "ArrowDown",
+                isComposing: true,
+            });
+            searchInput.value = テスト;
+            await triggerEvent(searchInput, null, "keyup", {
+                key: "ArrowDown",
+                isComposing: true,
+            });
+            await triggerEvent(searchInput, null, "input", {
+                inputType: "insertCompositionText",
+                isComposing: true,
+            });
+
+            assert.strictEqual(
+                controlPanel.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 triggerEvent(searchInput, null, "keydown", {
+                key: "Enter",
+                isComposing: true,
+            });
+            await triggerEvent(searchInput, null, "keypress", {
+                key: "Enter",
+                isComposing: true,
+            });
+            searchInput.value = TEST;
+            await triggerEvent(searchInput, null, "keyup", {
+                key: "Enter",
+                isComposing: true,
+            });
+            await triggerEvent(searchInput, null, "input", {
+                inputType: "insertCompositionText",
+                isComposing: true,
+            });
+
+            // End of the composition
+            await triggerEvent(searchInput, null, "compositionend");
+
+            assert.strictEqual(
+                controlPanel.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`
+            );
+        }
+    );
+
+    QUnit.test("open search view autocomplete on paste value using mouse", async function (assert) {
+        assert.expect(1);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "partner",
+            Component: ControlPanel,
+            searchMenuTypes: [],
+            searchViewId: false,
+        });
+
+        // Simulate paste text through the mouse.
+        const searchInput = controlPanel.el.querySelector(".o_searchview input");
+        searchInput.value = "ABC";
+        await triggerEvent(searchInput, null, "input", { inputType: "insertFromPaste" });
+        assert.containsOnce(
+            controlPanel,
+            ".o_searchview_autocomplete",
+            "should display autocomplete dropdown menu on paste in search view"
+        );
+    });
+
+    QUnit.test("select autocompleted many2one", async function (assert) {
+        assert.expect(4);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "partner",
+            Component: ControlPanel,
+            searchMenuTypes: [],
+            searchViewId: false,
+            searchViewArch: `
+                    <search>
+                        <field name="foo"/>
+                        <field name="birthday"/>
+                        <field name="birth_datetime"/>
+                        <field name="bar" operator="child_of"/>
+                    </search>
+                `,
+        });
+
+        assert.deepEqual(getDomain(controlPanel), []);
+
+        await editSearch(controlPanel, "rec");
+        await click(controlPanel.el.querySelector(".o_searchview_autocomplete li:last-child"));
+
+        assert.deepEqual(getDomain(controlPanel), [["bar", "child_of", "rec"]]);
+
+        await removeFacet(controlPanel);
+
+        assert.deepEqual(getDomain(controlPanel), []);
+
+        await editSearch(controlPanel, "rec");
+        await click(controlPanel.el.querySelector(".o_expand"));
+        await click(
+            controlPanel.el.querySelector(".o_searchview_autocomplete li.o_menu_item.o_indent")
+        );
+
+        assert.deepEqual(getDomain(controlPanel), [["bar", "child_of", 1]]);
+    });
+
+    QUnit.test('"null" as autocomplete value', async function (assert) {
+        assert.expect(3);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "partner",
+            Component: ControlPanel,
+            searchMenuTypes: [],
+            searchViewId: false,
+        });
+
+        assert.deepEqual(getDomain(controlPanel), []);
+
+        await editSearch(controlPanel, "null");
+
+        assert.strictEqual(
+            controlPanel.el.querySelector(".o_searchview_autocomplete .o_selection_focus")
+                .innerText,
+            "Search Foo for: null"
+        );
+
+        await click(
+            controlPanel.el.querySelector(".o_searchview_autocomplete li.o_selection_focus a")
+        );
+
+        assert.deepEqual(getDomain(controlPanel), [["foo", "ilike", "null"]]);
+    });
+
+    QUnit.test("autocompletion with a boolean field", async function (assert) {
+        assert.expect(8);
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "partner",
+            Component: ControlPanel,
+            searchMenuTypes: [],
+            searchViewId: false,
+            searchViewArch: `
+                    <search>
+                        <field name="bool"/>
+                    </search>
+                `,
+        });
+
+        assert.deepEqual(getDomain(controlPanel), []);
+
+        await editSearch(controlPanel, "y");
+
+        assert.containsN(controlPanel, ".o_searchview_autocomplete li", 1);
+        assert.strictEqual(
+            controlPanel.el.querySelector(".o_searchview_autocomplete li:last-child").innerText,
+            "Search Bool for: Yes"
+        );
+
+        // select "Yes"
+        await click(controlPanel.el.querySelector(".o_searchview_autocomplete li:last-child"));
+
+        assert.deepEqual(getDomain(controlPanel), [["bool", "=", true]]);
+
+        await removeFacet(controlPanel);
+
+        assert.deepEqual(getDomain(controlPanel), []);
+
+        await editSearch(controlPanel, "No");
+
+        assert.containsN(controlPanel, ".o_searchview_autocomplete li", 1);
+        assert.strictEqual(
+            controlPanel.el.querySelector(".o_searchview_autocomplete li:last-child").innerText,
+            "Search Bool for: No"
+        );
+
+        // select "No"
+        await click(controlPanel.el.querySelector(".o_searchview_autocomplete li:last-child"));
+
+        assert.deepEqual(getDomain(controlPanel), [["bool", "=", false]]);
+    });
+
+    QUnit.test("reference fields are supported in search view", async function (assert) {
+        assert.expect(4);
+
+        const partnerModel = serverData.models.partner;
+        partnerModel.fields.ref = { type: "reference", string: "Reference" };
+        partnerModel.records.forEach((record, i) => {
+            record.ref = `ref${String(i).padStart(3, "0")}`;
+        });
+
+        const controlPanel = await makeWithSearch({
+            serverData,
+            resModel: "partner",
+            Component: ControlPanel,
+            searchMenuTypes: [],
+            searchViewId: false,
+            searchViewArch: `
+                    <search>
+                        <field name="ref"/>
+                    </search>
+                `,
+        });
+
+        assert.deepEqual(getDomain(controlPanel), []);
+
+        await editSearch(controlPanel, "ref");
+        await validateSearch(controlPanel);
+
+        assert.deepEqual(getDomain(controlPanel), [["ref", "ilike", "ref"]]);
+
+        await removeFacet(controlPanel);
+
+        assert.deepEqual(getDomain(controlPanel), []);
+
+        await editSearch(controlPanel, "ref002");
+        await validateSearch(controlPanel);
+
+        assert.deepEqual(getDomain(controlPanel), [["ref", "ilike", "ref002"]]);
+    });
+});
diff --git a/addons/web/static/tests/search/search_model_tests.js b/addons/web/static/tests/search/search_model_tests.js
new file mode 100644
index 00000000000..ca723b54c91
--- /dev/null
+++ b/addons/web/static/tests/search/search_model_tests.js
@@ -0,0 +1,780 @@
+/** @odoo-module **/
+
+import { patchDate } from "@web/../tests/helpers/utils";
+import { makeWithSearch, setupControlPanelServiceRegistry } from "./helpers";
+
+const { Component, tags } = owl;
+const { xml } = tags;
+
+class TestComponent extends Component {}
+TestComponent.template = xml`<div class="o_test_component"/>`;
+
+async function makeSearchModel(params) {
+    const component = await makeWithSearch({
+        Component: TestComponent,
+        resModel: "foo",
+        searchViewId: false,
+        ...params,
+    });
+    return component.env.searchModel;
+}
+
+function sanitizeSearchItems(model) {
+    // We should not access searchItems but there is a problem with getSearchItems:
+    // comparisons are not sent back in some cases
+    const searchItems = Object.values(model.searchItems);
+    return searchItems.map((searchItem) => {
+        const copy = Object.assign({}, searchItem);
+        delete copy.groupId;
+        delete copy.groupNumber;
+        delete copy.id;
+        return copy;
+    });
+}
+
+let serverData;
+QUnit.module("Search", (hooks) => {
+    hooks.beforeEach(() => {
+        serverData = {
+            models: {
+                foo: {
+                    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: [],
+                },
+                partner: {
+                    fields: {
+                        foo: { string: "Foo", type: "char" },
+                        bar: { string: "Bar", type: "boolean" },
+                        int_field: { string: "Int Field", type: "integer", group_operator: "sum" },
+                        company_id: { string: "company", type: "many2one", relation: "company" },
+                        company_ids: {
+                            string: "Companies",
+                            type: "many2many",
+                            relation: "company",
+                        },
+                        category_id: { string: "category", type: "many2one", relation: "category" },
+                        state: {
+                            string: "State",
+                            type: "selection",
+                            selection: [
+                                ["abc", "ABC"],
+                                ["def", "DEF"],
+                                ["ghi", "GHI"],
+                            ],
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            bar: true,
+                            foo: "yop",
+                            int_field: 1,
+                            company_ids: [3],
+                            company_id: 3,
+                            state: "abc",
+                            category_id: 6,
+                        },
+                        {
+                            id: 2,
+                            bar: true,
+                            foo: "blip",
+                            int_field: 2,
+                            company_ids: [3],
+                            company_id: 5,
+                            state: "def",
+                            category_id: 7,
+                        },
+                        {
+                            id: 3,
+                            bar: true,
+                            foo: "gnap",
+                            int_field: 4,
+                            company_ids: [],
+                            company_id: 3,
+                            state: "ghi",
+                            category_id: 7,
+                        },
+                        {
+                            id: 4,
+                            bar: false,
+                            foo: "blip",
+                            int_field: 8,
+                            company_ids: [5],
+                            company_id: 5,
+                            state: "ghi",
+                            category_id: 7,
+                        },
+                    ],
+                },
+                company: {
+                    fields: {
+                        name: { string: "Display Name", type: "char" },
+                        parent_id: {
+                            string: "Parent company",
+                            type: "many2one",
+                            relation: "company",
+                        },
+                        category_id: { string: "Category", type: "many2one", relation: "category" },
+                    },
+                    records: [
+                        { id: 3, name: "asustek", category_id: 6 },
+                        { id: 5, name: "agrolait", category_id: 7 },
+                    ],
+                },
+                category: {
+                    fields: {
+                        name: { string: "Category Name", type: "char" },
+                    },
+                    records: [
+                        { id: 6, name: "gold" },
+                        { id: 7, name: "silver" },
+                    ],
+                },
+            },
+            views: {
+                "foo,false,search": `<search/>`,
+                "partner,false,search": `<search/>`,
+            },
+        };
+        setupControlPanelServiceRegistry();
+    });
+
+    QUnit.module("SearchModel");
+
+    QUnit.test("parsing empty arch", async function (assert) {
+        assert.expect(1);
+        const model = await makeSearchModel({ serverData });
+        assert.deepEqual(sanitizeSearchItems(model), []);
+    });
+
+    QUnit.test("parsing one field tag", async function (assert) {
+        assert.expect(1);
+        const model = await makeSearchModel({
+            serverData,
+            searchViewArch: `
+                    <search>
+                        <field name="bar"/>
+                    </search>
+                `,
+        });
+        assert.deepEqual(sanitizeSearchItems(model), [
+            {
+                description: "Bar",
+                fieldName: "bar",
+                fieldType: "many2one",
+                type: "field",
+            },
+        ]);
+    });
+
+    QUnit.test("parsing one separator tag", async function (assert) {
+        assert.expect(1);
+        const model = await makeSearchModel({
+            serverData,
+            searchViewArch: `
+                    <search>
+                        <separator/>
+                    </search>
+                `,
+        });
+        assert.deepEqual(sanitizeSearchItems(model), []);
+    });
+
+    QUnit.test("parsing one separator tag and one field tag", async function (assert) {
+        assert.expect(1);
+        const model = await makeSearchModel({
+            serverData,
+            searchViewArch: `
+                    <search>
+                        <separator/>
+                        <field name="bar"/>
+                    </search>
+                `,
+        });
+        assert.deepEqual(sanitizeSearchItems(model), [
+            {
+                description: "Bar",
+                fieldName: "bar",
+                fieldType: "many2one",
+                type: "field",
+            },
+        ]);
+    });
+
+    QUnit.test("parsing one filter tag", async function (assert) {
+        assert.expect(1);
+        const model = await makeSearchModel({
+            serverData,
+            searchViewArch: `
+                    <search>
+                        <filter name="filter" string="Hello" domain="[]"/>
+                    </search>
+                `,
+        });
+        assert.deepEqual(sanitizeSearchItems(model), [
+            {
+                description: "Hello",
+                domain: "[]",
+                type: "filter",
+            },
+        ]);
+    });
+
+    QUnit.test("parsing one filter tag with date attribute", async function (assert) {
+        assert.expect(1);
+        const model = await makeSearchModel({
+            serverData,
+            searchViewArch: `
+                    <search>
+                        <filter name="date_filter" string="Date" date="date_field"/>
+                    </search>
+                `,
+        });
+        const dateFilterId = model.getSearchItems((f) => f.type === "dateFilter")[0].id;
+        assert.deepEqual(sanitizeSearchItems(model), [
+            {
+                defaultGeneratorId: "this_month",
+                description: "Date",
+                fieldName: "date_field",
+                fieldType: "date",
+                type: "dateFilter",
+            },
+            {
+                comparisonOptionId: "previous_period",
+                dateFilterId,
+                description: "Date: Previous Period",
+                type: "comparison",
+            },
+            {
+                comparisonOptionId: "previous_year",
+                dateFilterId,
+                description: "Date: Previous Year",
+                type: "comparison",
+            },
+        ]);
+    });
+
+    QUnit.test("parsing one groupBy tag", async function (assert) {
+        assert.expect(1);
+        const model = await makeSearchModel({
+            serverData,
+            searchViewArch: `
+                    <search>
+                        <filter name="groupby" string="Hi" context="{ 'group_by': 'date_field:day'}"/>
+                    </search>
+                `,
+        });
+        assert.deepEqual(sanitizeSearchItems(model), [
+            {
+                defaultIntervalId: "day",
+                description: "Hi",
+                fieldName: "date_field",
+                fieldType: "date",
+                type: "dateGroupBy",
+            },
+        ]);
+    });
+
+    QUnit.test("parsing two filter tags", async function (assert) {
+        assert.expect(1);
+        const model = await makeSearchModel({
+            serverData,
+            searchViewArch: `
+                    <search>
+                        <filter name="filter_1" string="Hello One" domain="[]"/>
+                        <filter name="filter_2" string="Hello Two" domain="[('bar', '=', 3)]"/>
+                    </search>
+                `,
+        });
+        assert.deepEqual(sanitizeSearchItems(model), [
+            {
+                description: "Hello One",
+                domain: "[]",
+                type: "filter",
+            },
+            {
+                description: "Hello Two",
+                domain: "[('bar', '=', 3)]",
+                type: "filter",
+            },
+        ]);
+    });
+
+    QUnit.test("parsing two filter tags separated by a separator", async function (assert) {
+        assert.expect(1);
+        const model = await makeSearchModel({
+            serverData,
+            searchViewArch: `
+                    <search>
+                        <filter name="filter_1" string="Hello One" domain="[]"/>
+                        <separator/>
+                        <filter name="filter_2" string="Hello Two" domain="[('bar', '=', 3)]"/>
+                    </search>
+                `,
+        });
+        assert.deepEqual(sanitizeSearchItems(model), [
+            {
+                description: "Hello One",
+                domain: "[]",
+                type: "filter",
+            },
+            {
+                description: "Hello Two",
+                domain: "[('bar', '=', 3)]",
+                type: "filter",
+            },
+        ]);
+    });
+
+    QUnit.test("parsing one filter tag and one field", async function (assert) {
+        assert.expect(1);
+        const model = await makeSearchModel({
+            serverData,
+            searchViewArch: `
+                    <search>
+                        <filter name="filter" string="Hello" domain="[]"/>
+                        <field name="bar"/>
+                    </search>
+                `,
+        });
+        assert.deepEqual(sanitizeSearchItems(model), [
+            {
+                description: "Hello",
+                domain: "[]",
+                type: "filter",
+            },
+            {
+                description: "Bar",
+                fieldName: "bar",
+                fieldType: "many2one",
+                type: "field",
+            },
+        ]);
+    });
+
+    QUnit.test("parsing two field tags", async function (assert) {
+        assert.expect(1);
+        const model = await makeSearchModel({
+            serverData,
+            searchViewArch: `
+                    <search>
+                        <field name="foo"/>
+                        <field name="bar"/>
+                    </search>
+                `,
+        });
+        assert.deepEqual(sanitizeSearchItems(model), [
+            {
+                description: "Foo",
+                fieldName: "foo",
+                fieldType: "char",
+                type: "field",
+            },
+            {
+                description: "Bar",
+                fieldName: "bar",
+                fieldType: "many2one",
+                type: "field",
+            },
+        ]);
+    });
+
+    QUnit.test("parsing a searchpanel tag", async function (assert) {
+        assert.expect(1);
+        const model = await makeSearchModel({
+            serverData,
+            searchViewArch: `
+                    <search>
+                        <searchpanel/>
+                    </search>
+                `,
+            view: { type: "kanban" },
+        });
+        assert.deepEqual(model.getSections(), []);
+    });
+
+    QUnit.test("parsing a searchpanel field select one", async function (assert) {
+        assert.expect(1);
+        const model = await makeSearchModel({
+            serverData,
+            searchViewArch: `
+                    <search>
+                        <searchpanel>
+                            <field name="company_id"/>
+                        </searchpanel>
+                    </search>
+                `,
+            resModel: "partner",
+            view: { type: "kanban" },
+        });
+        const sections = model.getSections();
+        for (const section of sections) {
+            section.values = [...section.values];
+        }
+        assert.deepEqual(sections, [
+            {
+                activeValueId: false,
+                color: null,
+                description: "company",
+                empty: false,
+                enableCounters: false,
+                expand: false,
+                fieldName: "company_id",
+                hierarchize: true,
+                icon: "fa-folder",
+                id: 1,
+                limit: 200,
+                parentField: "parent_id",
+                rootIds: [false, 3, 5],
+                type: "category",
+                values: [
+                    [
+                        false,
+                        {
+                            bold: true,
+                            childrenIds: [],
+                            display_name: "All",
+                            id: false,
+                            parentId: false,
+                        },
+                    ],
+                    [
+                        3,
+                        {
+                            childrenIds: [],
+                            display_name: "asustek",
+                            id: 3,
+                            parentId: false,
+                            parent_id: false,
+                        },
+                    ],
+                    [
+                        5,
+                        {
+                            childrenIds: [],
+                            display_name: "agrolait",
+                            id: 5,
+                            parentId: false,
+                            parent_id: false,
+                        },
+                    ],
+                ],
+            },
+        ]);
+    });
+
+    QUnit.test("parsing a searchpanel field select multi", async function (assert) {
+        assert.expect(1);
+        const model = await makeSearchModel({
+            serverData,
+            searchViewArch: `
+                    <search>
+                        <searchpanel>
+                            <field name="company_id" select="multi"/>
+                        </searchpanel>
+                    </search>
+                `,
+            resModel: "partner",
+            view: { type: "kanban" },
+        });
+        const sections = model.getSections();
+        for (const section of sections) {
+            section.values = [...section.values];
+        }
+        assert.deepEqual(sections, [
+            {
+                color: null,
+                description: "company",
+                domain: "[]",
+                empty: false,
+                enableCounters: false,
+                expand: false,
+                fieldName: "company_id",
+                groupBy: null,
+                icon: "fa-filter",
+                id: 1,
+                limit: 200,
+                type: "filter",
+                values: [
+                    [
+                        3,
+                        {
+                            checked: false,
+                            display_name: "asustek",
+                            id: 3,
+                        },
+                    ],
+                    [
+                        5,
+                        {
+                            checked: false,
+                            display_name: "agrolait",
+                            id: 5,
+                        },
+                    ],
+                ],
+            },
+        ]);
+    });
+
+    QUnit.test("process search default group by", async function (assert) {
+        assert.expect(1);
+        const model = await makeSearchModel({
+            serverData,
+            searchViewArch: `
+                    <search>
+                        <filter name="group_by" context="{ 'group_by': 'foo'}"/>
+                    </search>
+                `,
+            context: { search_default_group_by: 14 },
+        });
+        assert.deepEqual(sanitizeSearchItems(model), [
+            {
+                defaultRank: 14,
+                description: "Foo",
+                fieldName: "foo",
+                fieldType: "char",
+                type: "groupBy",
+                isDefault: true,
+            },
+        ]);
+    });
+
+    QUnit.test("process and toggle a field with a context to evaluate", async function (assert) {
+        assert.expect(2);
+        const model = await makeSearchModel({
+            serverData,
+            searchViewArch: `
+                    <search>
+                        <field name="foo" context="{ 'a': self }"/>
+                    </search>
+                `,
+        });
+        assert.deepEqual(sanitizeSearchItems(model), [
+            {
+                context: "{ 'a': self }",
+                description: "Foo",
+                fieldName: "foo",
+                fieldType: "char",
+                type: "field",
+            },
+        ]);
+        model.addAutoCompletionValues(1, { label: "7", operator: "=", value: 7 });
+        assert.deepEqual(model.context, { a: [7], lang: "en", tz: "taht", uid: 7 });
+    });
+
+    QUnit.test("process favorite filters", async function (assert) {
+        assert.expect(1);
+        const model = await makeSearchModel({
+            serverData,
+            irFilters: [
+                {
+                    user_id: [2, "Mitchell Admin"],
+                    name: "Sorted filter",
+                    id: 5,
+                    context: `{"group_by":["foo","bar"]}`,
+                    sort: '["foo", "-bar"]',
+                    domain: "[('user_id', '=', uid)]",
+                    is_default: false,
+                    model_id: "res.partner",
+                    action_id: false,
+                },
+            ],
+        });
+        assert.deepEqual(sanitizeSearchItems(model), [
+            {
+                context: {},
+                description: "Sorted filter",
+                domain: "[('user_id', '=', uid)]",
+                groupBys: ["foo", "bar"],
+                orderBy: [
+                    {
+                        asc: true,
+                        name: "foo",
+                    },
+                    {
+                        asc: false,
+                        name: "bar",
+                    },
+                ],
+                removable: true,
+                serverSideId: 5,
+                type: "favorite",
+                userId: 2,
+            },
+        ]);
+    });
+
+    QUnit.test("process dynamic filters", async function (assert) {
+        assert.expect(1);
+        assert.expect(1);
+        const model = await makeSearchModel({
+            serverData,
+            dynamicFilters: [
+                {
+                    description: "Quick search",
+                    domain: [["id", "in", [1, 3, 4]]],
+                },
+            ],
+        });
+        assert.deepEqual(sanitizeSearchItems(model), [
+            {
+                description: "Quick search",
+                domain: [["id", "in", [1, 3, 4]]],
+                isDefault: true,
+                type: "filter",
+            },
+        ]);
+    });
+
+    QUnit.test("toggle a filter", async function (assert) {
+        assert.expect(1);
+        assert.expect(3);
+        const model = await makeSearchModel({
+            serverData,
+            searchViewArch: `
+                    <search>
+                        <filter name="filter" string="Filter" domain="[['foo', '=', 'a']]"/>
+                    </search>
+                `,
+        });
+        const filterId = Object.keys(model.searchItems).map((key) => Number(key))[0];
+        assert.deepEqual([], model.domain);
+        model.toggleSearchItem(filterId);
+        assert.deepEqual([["foo", "=", "a"]], model.domain);
+        model.toggleSearchItem(filterId);
+        assert.deepEqual([], model.domain);
+    });
+
+    QUnit.test("toggle a date filter", async function (assert) {
+        assert.expect(3);
+        patchDate(2019, 0, 6, 15, 0, 0);
+        const model = await makeSearchModel({
+            serverData,
+            searchViewArch: `
+                    <search>
+                        <filter name="date_filter" date="date_field" string="DateFilter"/>
+                    </search>
+                `,
+        });
+        const filterId = Object.keys(model.searchItems).map((key) => Number(key))[0];
+        model.toggleDateFilter(filterId);
+        assert.deepEqual(
+            ["&", ["date_field", ">=", "2019-01-01"], ["date_field", "<=", "2019-01-31"]],
+            model.domain
+        );
+        model.toggleDateFilter(filterId, "first_quarter");
+        assert.deepEqual(
+            [
+                "|",
+                "&",
+                ["date_field", ">=", "2019-01-01"],
+                ["date_field", "<=", "2019-01-31"],
+                "&",
+                ["date_field", ">=", "2019-01-01"],
+                ["date_field", "<=", "2019-03-31"],
+            ],
+            model.domain
+        );
+        model.toggleDateFilter(filterId, "this_year");
+        assert.deepEqual([], model.domain);
+    });
+
+    QUnit.test("toggle a groupBy", async function (assert) {
+        assert.expect(3);
+        const model = await makeSearchModel({
+            serverData,
+            searchViewArch: `
+                    <search>
+                        <filter name="groupBy" string="GroupBy" context="{'group_by': 'foo'}"/>
+                    </search>
+                `,
+        });
+        const filterId = Object.keys(model.searchItems).map((key) => Number(key))[0];
+        assert.deepEqual(model.groupBy, []);
+        model.toggleSearchItem(filterId);
+        assert.deepEqual(model.groupBy, ["foo"]);
+        model.toggleSearchItem(filterId);
+        assert.deepEqual(model.groupBy, []);
+    });
+
+    QUnit.test("toggle a date groupBy", async function (assert) {
+        assert.expect(5);
+        const model = await makeSearchModel({
+            serverData,
+            searchViewArch: `
+                    <search>
+                        <filter name="date_groupBy" string="DateGroupBy" context="{'group_by': 'date_field:day'}"/>
+                    </search>
+                `,
+        });
+        const filterId = Object.keys(model.searchItems).map((key) => Number(key))[0];
+        assert.deepEqual(model.groupBy, []);
+        model.toggleDateGroupBy(filterId);
+        assert.deepEqual(model.groupBy, ["date_field:day"]);
+        model.toggleDateGroupBy(filterId, "week");
+        assert.deepEqual(model.groupBy, ["date_field:week", "date_field:day"]);
+        model.toggleDateGroupBy(filterId);
+        assert.deepEqual(model.groupBy, ["date_field:week"]);
+        model.toggleDateGroupBy(filterId, "week");
+        assert.deepEqual(model.groupBy, []);
+    });
+
+    QUnit.test("create a new groupBy", async function (assert) {
+        assert.expect(2);
+        const model = await makeSearchModel({ serverData });
+        model.createNewGroupBy("foo");
+        assert.deepEqual(sanitizeSearchItems(model), [
+            {
+                custom: true,
+                description: "Foo",
+                fieldName: "foo",
+                fieldType: "char",
+                type: "groupBy",
+            },
+        ]);
+        assert.deepEqual(model.groupBy, ["foo"]);
+    });
+
+    QUnit.test("create a new dateGroupBy", async function (assert) {
+        assert.expect(2);
+        const model = await makeSearchModel({
+            serverData,
+            searchViewArch: `
+                    <search>
+                        <filter name="foo" string="Foo" context="{'group_by': 'foo'}"/>
+                    </search>
+                `,
+        });
+        model.createNewGroupBy("date_field");
+        assert.deepEqual(sanitizeSearchItems(model), [
+            {
+                description: "Foo",
+                fieldName: "foo",
+                fieldType: "char",
+                type: "groupBy",
+            },
+            {
+                custom: true,
+                defaultIntervalId: "month",
+                description: "Date",
+                fieldName: "date_field",
+                fieldType: "date",
+                type: "dateGroupBy",
+            },
+        ]);
+        assert.deepEqual(model.groupBy, ["date_field:month"]);
+    });
+});
diff --git a/addons/web/static/tests/search/search_panel_tests.js b/addons/web/static/tests/search/search_panel_tests.js
new file mode 100644
index 00000000000..77b594b590e
--- /dev/null
+++ b/addons/web/static/tests/search/search_panel_tests.js
@@ -0,0 +1,3353 @@
+/** @odoo-module **/
+
+import { makeFakeUserService } from "@web/../tests/helpers/mock_services";
+import { click, legacyExtraNextTick, makeDeferred, nextTick } from "@web/../tests/helpers/utils";
+import {
+    makeWithSearch,
+    setupControlPanelServiceRegistry,
+    switchView,
+    toggleFilterMenu,
+    toggleMenuItem,
+} from "@web/../tests/search/helpers";
+import { createWebClient, doAction } from "@web/../tests/webclient/helpers";
+import { registry } from "@web/core/registry";
+import { FilterMenu } from "@web/search/filter_menu/filter_menu";
+import { GroupByMenu } from "@web/search/group_by_menu/group_by_menu";
+import { SearchPanel } from "@web/search/search_panel/search_panel";
+
+const { Component, tags } = owl;
+const { xml } = tags;
+
+const serviceRegistry = registry.category("services");
+
+//-----------------------------------------------------------------------------
+// Helpers
+//-----------------------------------------------------------------------------
+
+const getValues = (comp, type) => {
+    const el = comp instanceof Component ? comp.el : comp;
+    switch (type) {
+        case "category": {
+            return [...el.querySelectorAll(".o_search_panel_category_value header")];
+        }
+        case "filter": {
+            return [...el.getElementsByClassName("o_search_panel_filter_value")];
+        }
+        case "filterGroup": {
+            return [...el.getElementsByClassName("o_search_panel_filter_group")];
+        }
+        case "groupHeader": {
+            return [...el.getElementsByClassName("o_search_panel_group_header")];
+        }
+    }
+};
+
+const getValue = (comp, type, content = 0, additionalSelector = null) => {
+    const values = getValues(comp, type);
+    let match = null;
+    if (Number.isInteger(content) && content < values.length) {
+        match = values[content];
+    } else {
+        const re = new RegExp(content, "i");
+        match = values.find((v) => re.test(v.innerText.trim()));
+    }
+    if (match && additionalSelector) {
+        match = match.querySelector(additionalSelector);
+    }
+    return match;
+};
+
+const parseContent = ([value, counter]) => (counter ? `${value}: ${counter}` : value);
+const getContent = (comp, type, parse = parseContent) => {
+    return getValues(comp, type)
+        .map((v) => parse(v.innerText.trim().split(/\s+/)))
+        .filter((v) => v !== null);
+};
+
+// Categories
+const getCategory = (comp, ...args) => getValue(comp, "category", ...args);
+const getCategoriesContent = (comp, ...args) => getContent(comp, "category", ...args);
+
+// Filters
+const getFilter = (comp, ...args) => getValue(comp, "filter", ...args);
+const getFiltersContent = (comp, ...args) => getContent(comp, "filter", ...args);
+
+// Filter groups
+const getFilterGroup = (comp, ...args) => getValue(comp, "filterGroup", ...args);
+const getFilterGroupContent = (comp, ...args) => {
+    const group = getFilterGroup(comp, ...args);
+    return [getContent(group, "groupHeader")[0], getFiltersContent(group)];
+};
+
+const getCounters = (v) => (isNaN(v[1]) ? null : Number(v[1]));
+
+const makeTestComponent = ({ onWillStart, onWillUpdateProps } = {}) => {
+    let domain;
+    class TestComponent extends Component {
+        async willStart() {
+            if (onWillStart) {
+                await onWillStart();
+            }
+            domain = this.props.domain;
+        }
+        async willUpdateProps(nextProps) {
+            if (onWillUpdateProps) {
+                await onWillUpdateProps();
+            }
+            domain = nextProps.domain;
+        }
+    }
+
+    TestComponent.components = { FilterMenu, GroupByMenu, SearchPanel };
+    TestComponent.template = xml`
+        <div class="o_test_component">
+            <SearchPanel />
+            <FilterMenu />
+            <GroupByMenu />
+        </div>`;
+
+    return { TestComponent, getDomain: () => domain };
+};
+
+let serverData;
+
+QUnit.module("Search", (hooks) => {
+    hooks.beforeEach(() => {
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        foo: { string: "Foo", type: "char" },
+                        bar: { string: "Bar", type: "boolean" },
+                        int_field: { string: "Int Field", type: "integer", group_operator: "sum" },
+                        company_id: { string: "company", type: "many2one", relation: "company" },
+                        company_ids: {
+                            string: "Companies",
+                            type: "many2many",
+                            relation: "company",
+                        },
+                        category_id: { string: "category", type: "many2one", relation: "category" },
+                        state: {
+                            string: "State",
+                            type: "selection",
+                            selection: [
+                                ["abc", "ABC"],
+                                ["def", "DEF"],
+                                ["ghi", "GHI"],
+                            ],
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            bar: true,
+                            foo: "yop",
+                            int_field: 1,
+                            company_ids: [3],
+                            company_id: 3,
+                            state: "abc",
+                            category_id: 6,
+                        },
+                        {
+                            id: 2,
+                            bar: true,
+                            foo: "blip",
+                            int_field: 2,
+                            company_ids: [3],
+                            company_id: 5,
+                            state: "def",
+                            category_id: 7,
+                        },
+                        {
+                            id: 3,
+                            bar: true,
+                            foo: "gnap",
+                            int_field: 4,
+                            company_ids: [],
+                            company_id: 3,
+                            state: "ghi",
+                            category_id: 7,
+                        },
+                        {
+                            id: 4,
+                            bar: false,
+                            foo: "blip",
+                            int_field: 8,
+                            company_ids: [5],
+                            company_id: 5,
+                            state: "ghi",
+                            category_id: 7,
+                        },
+                    ],
+                },
+                company: {
+                    fields: {
+                        name: { string: "Display Name", type: "char" },
+                        parent_id: {
+                            string: "Parent company",
+                            type: "many2one",
+                            relation: "company",
+                        },
+                        category_id: { string: "Category", type: "many2one", relation: "category" },
+                    },
+                    records: [
+                        { id: 3, name: "asustek", category_id: 6 },
+                        { id: 5, name: "agrolait", category_id: 7 },
+                    ],
+                },
+                category: {
+                    fields: {
+                        name: { string: "Category Name", type: "char" },
+                    },
+                    records: [
+                        { id: 6, name: "gold" },
+                        { id: 7, name: "silver" },
+                    ],
+                },
+            },
+            actions: {
+                1: {
+                    id: 1,
+                    name: "Partners",
+                    res_model: "partner",
+                    type: "ir.actions.act_window",
+                    views: [
+                        [false, "kanban"],
+                        [false, "list"],
+                        [false, "pivot"],
+                        [false, "form"],
+                    ],
+                },
+                2: {
+                    id: 2,
+                    name: "Partners",
+                    res_model: "partner",
+                    type: "ir.actions.act_window",
+                    views: [[false, "form"]],
+                },
+            },
+            views: {
+                "partner,false,toy": /* xml */ `<toy />`,
+                "partner,false,list": /* xml */ `
+                    <tree>
+                        <field name="foo"/>
+                    </tree>`,
+                "partner,false,kanban": /* xml */ `
+                    <kanban>
+                        <templates>
+                            <div t-name="kanban-box" class="oe_kanban_global_click">
+                                <field name="foo"/>
+                            </div>
+                        </templates>
+                    </kanban>`,
+                "partner,false,form": /* xml */ `
+                    <form>
+                        <button name="1" type="action" string="multi view"/>
+                        <field name="foo"/>
+                        <field name="company_id"/>
+                    </form>`,
+                "partner,false,pivot": /* xml */ `<pivot><field name="int_field" type="measure"/></pivot>`,
+                "partner,false,search": /* xml */ `
+                    <search>
+                        <filter name="false_domain" string="False Domain" domain="[(0, '=', 1)]"/>
+                        <filter name="filter" string="Filter" domain="[('bar', '=', true)]"/>
+                        <filter name="true_domain" string="True Domain" domain="[(1, '=', 1)]"/>
+                        <filter name="group_by_bar" string="Bar" context="{ 'group_by': 'bar' }"/>
+                        <searchpanel view_types="kanban,tree,toy">
+                            <field name="company_id" enable_counters="1" expand="1"/>
+                            <field name="category_id" select="multi" enable_counters="1" expand="1"/>
+                        </searchpanel>
+                    </search>`,
+            },
+        };
+        setupControlPanelServiceRegistry();
+        serviceRegistry.add("user", makeFakeUserService());
+    });
+
+    QUnit.module("SearchPanel");
+
+    QUnit.test("basic rendering of a component without search panel", async (assert) => {
+        assert.expect(2);
+
+        const { TestComponent, getDomain } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            async mockRPC(route, { method }) {
+                if (/search_panel_/.test(method || route)) {
+                    throw new Error("No search panel section should be loaded");
+                }
+            },
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+            display: { searchPanel: false },
+        });
+        assert.doesNotHaveClass(comp.el, "o_component_with_search_panel");
+        assert.deepEqual(getDomain(), []); // initial domain
+    });
+
+    QUnit.test("basic rendering of a component with search panel", async (assert) => {
+        assert.expect(15);
+        const { TestComponent, getDomain } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            async mockRPC(route, { method, model }) {
+                if (/search_panel_/.test(method || route)) {
+                    assert.step(`${method || route} on ${model}`);
+                }
+            },
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+            view: { type: "kanban" },
+        });
+
+        assert.containsOnce(comp, ".o_search_panel");
+        assert.containsN(comp, ".o_search_panel_section", 2);
+
+        const sections = comp.el.querySelectorAll(".o_search_panel_section");
+
+        const firstSection = sections[0];
+        assert.hasClass(
+            firstSection.querySelector(".o_search_panel_section_header i"),
+            "fa-folder"
+        );
+        assert.containsOnce(firstSection, ".o_search_panel_section_header:contains(company)");
+        assert.containsN(firstSection, ".o_search_panel_category_value", 3);
+        assert.containsOnce(firstSection, ".o_search_panel_category_value:first .active");
+        assert.deepEqual(
+            [...firstSection.querySelectorAll(".o_search_panel_category_value")].map((el) =>
+                el.innerText.replace(/\s/g, " ")
+            ),
+            ["All", "asustek 2", "agrolait 2"]
+        );
+
+        const secondSection = sections[1];
+        assert.hasClass(
+            secondSection.querySelector(".o_search_panel_section_header i"),
+            "fa-filter"
+        );
+        assert.containsOnce(secondSection, ".o_search_panel_section_header:contains(category)");
+        assert.containsN(secondSection, ".o_search_panel_filter_value", 2);
+        assert.deepEqual(
+            [...secondSection.querySelectorAll(".o_search_panel_filter_value")].map((el) =>
+                el.innerText.replace(/\s/g, " ")
+            ),
+            ["gold 1", "silver 3"]
+        );
+
+        assert.verifySteps([
+            "search_panel_select_range on partner",
+            "search_panel_select_multi_range on partner",
+        ]);
+        assert.deepEqual(getDomain(), []); // initial domain (does not need the sections to be loaded)
+    });
+
+    QUnit.test("sections with custom icon and color", async (assert) => {
+        assert.expect(5);
+
+        const { TestComponent, getDomain } = makeTestComponent();
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel view_types="toy">
+                    <field name="company_id" icon="fa-car" color="blue" enable_counters="1"/>
+                    <field name="state" select="multi" icon="fa-star" color="#000" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+            view: { type: "toy" },
+        });
+
+        const sectionHeaderIcons = comp.el.querySelectorAll(".o_search_panel_section_header i");
+        assert.hasClass(sectionHeaderIcons[0], "fa-car");
+        assert.hasAttrValue(sectionHeaderIcons[0], 'style="{color: blue}"');
+        assert.hasClass(sectionHeaderIcons[1], "fa-star");
+        assert.hasAttrValue(sectionHeaderIcons[1], 'style="{color: #000}"');
+
+        assert.deepEqual(getDomain(), []);
+    });
+
+    QUnit.test('sections with attr invisible="1" are ignored', async (assert) => {
+        // 'groups' attributes are converted server-side into invisible="1" when the user doesn't
+        // belong to the given group
+        assert.expect(3);
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" enable_counters="1"/>
+                    <field name="state" select="multi" invisible="1" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            async mockRPC(route, { method }) {
+                if (/search_panel_/.test(method || route)) {
+                    assert.step(method || route);
+                }
+            },
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+            view: { type: "kanban" },
+        });
+
+        assert.containsOnce(comp, ".o_search_panel_section");
+        assert.verifySteps(["search_panel_select_range"]);
+    });
+
+    QUnit.test("categories and filters order is kept", async (assert) => {
+        assert.expect(4);
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" enable_counters="1"/>
+                    <field name="category_id" select="multi" enable_counters="1"/>
+                    <field name="state" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+            view: { type: "kanban" },
+        });
+
+        const headers = comp.el.getElementsByClassName("o_search_panel_section_header");
+        assert.containsN(comp, ".o_search_panel_section", 3);
+        assert.strictEqual(headers[0].innerText.trim(), "COMPANY");
+        assert.strictEqual(headers[1].innerText.trim(), "CATEGORY");
+        assert.strictEqual(headers[2].innerText.trim(), "STATE");
+    });
+
+    QUnit.test(
+        "specify active category value in context and manually change category",
+        async (assert) => {
+            assert.expect(4);
+
+            serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" enable_counters="1"/>
+                    <field name="state" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+            const { TestComponent, getDomain } = makeTestComponent();
+            const comp = await makeWithSearch({
+                serverData,
+                Component: TestComponent,
+                resModel: "partner",
+                searchViewId: false,
+                context: {
+                    searchpanel_default_company_id: false,
+                    searchpanel_default_state: "ghi",
+                },
+            });
+
+            assert.deepEqual(
+                [
+                    ...comp.el.querySelectorAll(
+                        ".o_search_panel_category_value header.active label"
+                    ),
+                ].map((el) => el.innerText),
+                ["All", "GHI"]
+            );
+            assert.deepEqual(getDomain(), [["state", "=", "ghi"]]);
+
+            // select 'ABC' in the category 'state'
+            await click(comp.el.querySelectorAll(".o_search_panel_category_value header")[4]);
+
+            assert.deepEqual(
+                [
+                    ...comp.el.querySelectorAll(
+                        ".o_search_panel_category_value header.active label"
+                    ),
+                ].map((el) => el.innerText),
+                ["All", "ABC"]
+            );
+
+            assert.deepEqual(getDomain(), [["state", "=", "abc"]]);
+        }
+    );
+
+    QUnit.test("use category (on many2one) to refine search", async (assert) => {
+        assert.expect(10);
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" enable_counters="1"/>
+                </searchpanel>
+            </search>
+        `;
+
+        const { TestComponent, getDomain } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+            domain: [["bar", "=", true]],
+            context: {
+                searchpanel_default_company_id: false,
+                searchpanel_default_state: "ghi",
+            },
+        });
+
+        assert.deepEqual(getDomain(), [["bar", "=", true]]);
+
+        // select "asustek"
+        await click(comp.el.querySelectorAll(".o_search_panel_category_value header")[1]);
+
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:nth(1) .active");
+
+        assert.deepEqual(getDomain(), ["&", ["bar", "=", true], ["company_id", "child_of", 3]]);
+
+        // select "agrolait"
+        await click(comp.el.querySelectorAll(".o_search_panel_category_value header")[2]);
+
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:nth(2) .active");
+
+        assert.deepEqual(getDomain(), ["&", ["bar", "=", true], ["company_id", "child_of", 5]]);
+
+        // select "All"
+        await click(comp.el.querySelector(".o_search_panel_category_value header"));
+
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:first .active");
+
+        assert.deepEqual(getDomain(), [["bar", "=", true]]);
+    });
+
+    QUnit.test("use category (on selection) to refine search", async (assert) => {
+        assert.expect(10);
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="state" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent, getDomain } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.deepEqual(getDomain(), []);
+
+        // select 'abc'
+        await click(comp.el, ".o_search_panel_category_value:nth-of-type(2) header");
+
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:nth-of-type(2) .active");
+
+        assert.deepEqual(getDomain(), [["state", "=", "abc"]]);
+
+        // select 'ghi'
+        await click(comp.el, ".o_search_panel_category_value:nth-of-type(4) header");
+
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:nth-of-type(4) .active");
+
+        assert.deepEqual(getDomain(), [["state", "=", "ghi"]]);
+
+        // select 'All' again
+        await click(comp.el, ".o_search_panel_category_value:nth-of-type(1) header");
+
+        assert.containsOnce(comp, ".o_search_panel_category_value:nth-of-type(1) .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:first .active");
+
+        assert.deepEqual(getDomain(), []);
+    });
+
+    QUnit.test("category has been archived", async (assert) => {
+        assert.expect(2);
+
+        serverData.models.company.fields.active = { type: "boolean", string: "Archived" };
+        serverData.models.company.records = [
+            {
+                name: "Company 5",
+                id: 5,
+                active: true,
+            },
+            {
+                name: "child of 5 archived",
+                parent_id: 5,
+                id: 666,
+                active: false,
+            },
+            {
+                name: "child of 666",
+                parent_id: 666,
+                id: 777,
+                active: true,
+            },
+        ];
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(
+            comp,
+            ".o_search_panel_category_value",
+            2,
+            "The number of categories should be 2: All and Company 5"
+        );
+
+        assert.containsNone(
+            comp,
+            ".o_toggle_fold > i",
+            "None of the categories should have children"
+        );
+    });
+
+    QUnit.test("use two categories to refine search", async (assert) => {
+        assert.expect(7);
+
+        serverData.views["partner,false,search"] = /* xml */ `
+        <search>
+            <searchpanel>
+                <field name="company_id" enable_counters="1"/>
+                <field name="state" enable_counters="1"/>
+            </searchpanel>
+        </search>
+    `;
+
+        const { TestComponent, getDomain } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+            domain: [["bar", "=", true]],
+        });
+
+        assert.deepEqual(getDomain(), [["bar", "=", true]]);
+
+        assert.containsN(comp, ".o_search_panel_section", 2);
+
+        // select 'asustek'
+        await click(
+            [
+                ...comp.el.querySelectorAll(
+                    ".o_search_panel_category_value header .o_search_panel_label_title"
+                ),
+            ].find((el) => el.innerText === "asustek")
+        );
+        assert.deepEqual(getDomain(), ["&", ["bar", "=", true], ["company_id", "child_of", 3]]);
+
+        // select 'abc'
+        await click(
+            [
+                ...comp.el.querySelectorAll(
+                    ".o_search_panel_category_value header .o_search_panel_label_title"
+                ),
+            ].find((el) => el.innerText === "ABC")
+        );
+        assert.deepEqual(getDomain(), [
+            "&",
+            ["bar", "=", true],
+            "&",
+            ["company_id", "child_of", 3],
+            ["state", "=", "abc"],
+        ]);
+
+        // select 'ghi'
+        await click(
+            [
+                ...comp.el.querySelectorAll(
+                    ".o_search_panel_category_value header .o_search_panel_label_title"
+                ),
+            ].find((el) => el.innerText === "GHI")
+        );
+        assert.deepEqual(getDomain(), [
+            "&",
+            ["bar", "=", true],
+            "&",
+            ["company_id", "child_of", 3],
+            ["state", "=", "ghi"],
+        ]);
+
+        // select 'All' in first category (company_id)
+        let firstSection = comp.el.querySelector(".o_search_panel_section");
+        await click(firstSection.querySelector(".o_search_panel_category_value header"));
+        assert.deepEqual(getDomain(), ["&", ["bar", "=", true], ["state", "=", "ghi"]]);
+
+        firstSection = comp.el.querySelectorAll(".o_search_panel_section")[1];
+        // select 'All' in second category (state)
+        await click(firstSection.querySelector(".o_search_panel_category_value header"));
+        assert.deepEqual(getDomain(), [["bar", "=", true]]);
+    });
+
+    QUnit.test("category with parent_field", async (assert) => {
+        assert.expect(25);
+
+        serverData.models.company.records.push(
+            { id: 40, name: "child company 1", parent_id: 5 },
+            { id: 41, name: "child company 2", parent_id: 5 }
+        );
+        serverData.models.partner.records[1].company_id = 40;
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" enable_counters="1" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent, getDomain } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        // 'All' is selected by default
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:first .active");
+        assert.containsN(comp, ".o_search_panel_category_value", 3);
+        assert.containsOnce(comp, ".o_search_panel_category_value .o_toggle_fold > i");
+
+        // unfold parent category and select 'All' again
+        await click(getCategory(comp, 2));
+        await click(getCategory(comp, 0));
+
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:first .active");
+        assert.containsN(comp, ".o_search_panel_category_value", 5);
+        assert.containsN(comp, ".o_search_panel_category_value .o_search_panel_category_value", 2);
+
+        assert.deepEqual(getDomain(), []);
+
+        // click on first child company
+        await click(getCategory(comp, 3));
+
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(
+            comp,
+            ".o_search_panel_category_value .o_search_panel_category_value:first .active"
+        );
+
+        assert.deepEqual(getDomain(), [["company_id", "child_of", 40]]);
+
+        // click on parent company
+        await click(getCategory(comp, 2));
+
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:nth(2) .active");
+
+        assert.deepEqual(getDomain(), [["company_id", "child_of", 5]]);
+
+        // fold parent company by clicking on it
+        await click(getCategory(comp, 2));
+
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:nth(2) .active");
+
+        // parent company should be folded
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:nth(2) .active");
+        assert.containsN(comp, ".o_search_panel_category_value", 3);
+
+        assert.deepEqual(getDomain(), [["company_id", "child_of", 5]]);
+
+        // fold category with children
+        await click(getCategory(comp, 2));
+        await click(getCategory(comp, 2));
+
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:nth(2) .active");
+        assert.containsN(comp, ".o_search_panel_category_value", 3);
+
+        assert.deepEqual(getDomain(), [["company_id", "child_of", 5]]);
+    });
+
+    QUnit.test("category with no parent_field", async (assert) => {
+        assert.expect(7);
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="category_id" enable_counters="1"/>
+                </searchpanel>
+            </search>
+        `;
+
+        const { TestComponent, getDomain } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.deepEqual(getDomain(), []);
+
+        // 'All' is selected by default
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:first .active");
+        assert.containsN(comp, ".o_search_panel_category_value", 3);
+
+        // click on 'gold' category
+        await click(comp.el.querySelectorAll(".o_search_panel_category_value header")[1]);
+
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:nth(1) .active");
+
+        assert.deepEqual(getDomain(), [["category_id", "=", 6]]); // must use '=' operator (instead of 'child_of')
+    });
+
+    QUnit.test("can (un)fold parent category values", async (assert) => {
+        assert.expect(7);
+
+        serverData.models.company.records.push(
+            { id: 40, name: "child company 1", parent_id: 5 },
+            { id: 41, name: "child company 2", parent_id: 5 }
+        );
+        serverData.models.partner.records[1].company_id = 40;
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" enable_counters="1" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsOnce(
+            comp,
+            ".o_search_panel_category_value:contains(agrolait) .o_toggle_fold > i"
+        );
+        assert.hasClass(getCategory(comp, "agrolait", ".o_toggle_fold > i"), "fa-caret-right");
+        assert.containsN(comp, ".o_search_panel_category_value", 3);
+
+        // unfold agrolait
+        await click(getCategory(comp, "agrolait", ".o_toggle_fold > i"));
+        assert.hasClass(getCategory(comp, "agrolait", ".o_toggle_fold > i"), "fa-caret-down");
+        assert.containsN(comp, ".o_search_panel_category_value", 5);
+
+        // fold agrolait
+        await click(getCategory(comp, "agrolait", ".o_toggle_fold > i"));
+        assert.hasClass(getCategory(comp, "agrolait", ".o_toggle_fold > i"), "fa-caret-right");
+        assert.containsN(comp, ".o_search_panel_category_value", 3);
+    });
+
+    QUnit.test("fold status is kept at reload", async (assert) => {
+        assert.expect(4);
+
+        serverData.models.company.records.push(
+            { id: 40, name: "child company 1", parent_id: 5 },
+            { id: 41, name: "child company 2", parent_id: 5 }
+        );
+        serverData.models.partner.records[1].company_id = 40;
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <filter name="True Domain" domain="[(1, '=', 1)]"/>
+                <searchpanel>
+                    <field name="company_id" enable_counters="1" expand="1"/>
+                </searchpanel>
+            </search>
+        `;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        // unfold agrolait
+        function getAgrolaitElement() {
+            return [
+                ...comp.el.querySelectorAll(".o_search_panel_category_value > header"),
+            ].find((el) => el.innerText.includes("agrolait"));
+        }
+
+        await click(getAgrolaitElement());
+        assert.hasClass(
+            getAgrolaitElement().querySelector(".o_toggle_fold > i"),
+            "fa-caret-down",
+            "'agrolait' should be open"
+        );
+        assert.containsN(comp, ".o_search_panel_category_value", 5);
+
+        await toggleFilterMenu(comp);
+        await toggleMenuItem(comp, "True Domain");
+
+        assert.hasClass(
+            getAgrolaitElement().querySelector(".o_toggle_fold > i"),
+            "fa-caret-down",
+            "'agrolait' should be open"
+        );
+        assert.containsN(comp, ".o_search_panel_category_value", 5);
+    });
+
+    QUnit.test("concurrency: delayed component update", async (assert) => {
+        assert.expect(15);
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        let promise = makeDeferred();
+        const { TestComponent, getDomain } = makeTestComponent({
+            onWillUpdateProps: () => promise,
+        });
+        const comp = await makeWithSearch({
+            serverData,
+            async mockRPC(route) {
+                if (route === "/web/dataset/search_read") {
+                    await promise;
+                }
+            },
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+            domain: [["bar", "=", true]],
+        });
+
+        // 'All' should be selected by default
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:first .active");
+
+        assert.deepEqual(getDomain(), [["bar", "=", true]]);
+
+        // select 'asustek' (delay the reload)
+        const asustekPromise = promise;
+        await click(getCategory(comp, 1));
+
+        // 'asustek' should be selected, but there should still be 3 records
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:nth(1) .active");
+
+        assert.deepEqual(getDomain(), [["bar", "=", true]]);
+
+        // select 'agrolait' (delay the reload)
+        promise = makeDeferred();
+        const agrolaitPromise = promise;
+        await click(getCategory(comp, 2));
+
+        // 'agrolait' should be selected, but there should still be 3 records
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:nth(2) .active");
+
+        assert.deepEqual(getDomain(), [["bar", "=", true]]);
+
+        // unlock asustek search (should be ignored, so there should still be 3 records)
+        asustekPromise.resolve();
+        await nextTick();
+
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:nth(2) .active");
+
+        assert.deepEqual(getDomain(), ["&", ["bar", "=", true], ["company_id", "child_of", 3]]);
+
+        // unlock agrolait search, there should now be 1 record
+        agrolaitPromise.resolve();
+        await nextTick();
+
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:nth(2) .active");
+
+        assert.deepEqual(getDomain(), ["&", ["bar", "=", true], ["company_id", "child_of", 5]]);
+    });
+
+    QUnit.test("concurrency: single category", async (assert) => {
+        assert.expect(10);
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <filter name="Filter" domain="[('id', '=', 1)]"/>
+                <searchpanel>
+                    <field name="company_id" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        let promise = makeDeferred();
+        const { TestComponent } = makeTestComponent();
+        const compPromise = makeWithSearch({
+            serverData,
+            async mockRPC(route, { method }) {
+                await promise;
+                assert.step(method || route);
+            },
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+            context: {
+                searchpanel_default_company_id: [5],
+            },
+        });
+
+        // Case 1: search panel is awaited to build the query with search defaults
+        await nextTick();
+        assert.verifySteps([]);
+
+        promise.resolve();
+        const comp = await compPromise;
+
+        assert.verifySteps(["load_views", "search_panel_select_range"]);
+
+        // Case 2: search domain changed so we wait for the search panel once again
+        promise = makeDeferred();
+
+        await toggleFilterMenu(comp);
+        await toggleMenuItem(comp, 0);
+
+        assert.verifySteps([]);
+
+        promise.resolve();
+        await nextTick();
+
+        assert.verifySteps(["search_panel_select_range"]);
+
+        // Case 3: search domain is the same and default values do not matter anymore
+        promise = makeDeferred();
+
+        await click(getCategory(comp, 1));
+
+        // The search read is executed right away in this case
+        assert.verifySteps([]);
+
+        promise.resolve();
+        await nextTick();
+
+        assert.verifySteps(["search_panel_select_range"]);
+    });
+
+    QUnit.test("concurrency: category and filter", async (assert) => {
+        assert.expect(5);
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="category_id" enable_counters="1"/>
+                    <field name="company_id" select="multi" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        let promise = makeDeferred();
+        const { TestComponent } = makeTestComponent();
+        const compPromise = makeWithSearch({
+            serverData,
+            async mockRPC(route, { method }) {
+                await promise;
+                assert.step(method || route);
+            },
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+            context: {
+                searchpanel_default_company_id: [5],
+            },
+        });
+
+        await nextTick();
+        assert.verifySteps([]);
+
+        promise.resolve();
+        await compPromise;
+
+        assert.verifySteps([
+            "load_views",
+            "search_panel_select_range",
+            "search_panel_select_multi_range",
+        ]);
+    });
+
+    QUnit.test("concurrency: category and filter with a domain", async (assert) => {
+        assert.expect(5);
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="category_id"/>
+                    <field name="company_id" select="multi" domain="[['category_id', '=', category_id]]" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        let promise = makeDeferred();
+        const { TestComponent } = makeTestComponent();
+        const compPromise = makeWithSearch({
+            serverData,
+            async mockRPC(route, { method }) {
+                await promise;
+                assert.step(method || route);
+            },
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        await nextTick();
+        assert.verifySteps([]);
+
+        promise.resolve();
+        await compPromise;
+
+        assert.verifySteps([
+            "load_views",
+            "search_panel_select_range",
+            "search_panel_select_multi_range",
+        ]);
+    });
+
+    QUnit.test("concurrency: misordered get_filters", async (assert) => {
+        assert.expect(15);
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="state" enable_counters="1"/>
+                    <field name="company_id" select="multi" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        let promise;
+        const { TestComponent, getDomain } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            async mockRPC(route, { method }) {
+                if (method === "search_panel_select_multi_range") {
+                    await promise;
+                }
+            },
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:first .active");
+
+        assert.deepEqual(getDomain(), []);
+
+        // select 'abc' (delay the reload)
+        promise = makeDeferred();
+        const abcDef = promise;
+        await click(getCategory(comp, 1));
+
+        // 'All' should still be selected
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:first .active");
+
+        assert.deepEqual(getDomain(), [["state", "=", "abc"]]);
+
+        // select 'ghi' (delay the reload)
+        promise = makeDeferred();
+        const ghiDef = promise;
+        await click(getCategory(comp, 3));
+
+        // 'All' should still be selected
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:first .active");
+
+        assert.deepEqual(getDomain(), [["state", "=", "ghi"]]);
+
+        // unlock ghi search
+        ghiDef.resolve();
+        await nextTick();
+
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:nth(3) .active");
+
+        assert.deepEqual(getDomain(), [["state", "=", "ghi"]]);
+
+        // unlock abc search (should be ignored)
+        abcDef.resolve();
+        await nextTick();
+
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:nth(3) .active");
+
+        assert.deepEqual(getDomain(), [["state", "=", "ghi"]]);
+    });
+
+    QUnit.test("concurrency: delayed get_filter", async (assert) => {
+        assert.expect(3);
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <filter name="Filter" domain="[('id', '=', 1)]"/>
+                <searchpanel>
+                    <field name="company_id" select="multi" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        let promise;
+        const { TestComponent, getDomain } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            async mockRPC(route, { method }) {
+                if (method === "search_panel_select_multi_range") {
+                    await promise;
+                }
+            },
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.deepEqual(getDomain(), []);
+
+        // trigger a reload and delay the get_filter
+        promise = makeDeferred();
+
+        await toggleFilterMenu(comp);
+        await toggleMenuItem(comp, 0);
+
+        assert.deepEqual(getDomain(), []);
+
+        promise.resolve();
+        await nextTick();
+
+        assert.deepEqual(getDomain(), [["id", "=", 1]]);
+    });
+
+    QUnit.test("use filter (on many2one) to refine search", async (assert) => {
+        assert.expect(16);
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <filter name="Filter" domain="[('id', '=', 1)]"/>
+                <searchpanel>
+                    <field name="company_id" select="multi" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent, getDomain } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+            domain: [["bar", "=", true]],
+        });
+
+        assert.containsN(comp, ".o_search_panel_filter_value", 2);
+        assert.containsNone(comp, ".o_search_panel_filter_value input:checked");
+        assert.deepEqual(getFiltersContent(comp), ["asustek: 2", "agrolait: 1"]);
+        assert.deepEqual(getDomain(), [["bar", "=", true]]);
+
+        // check 'asustek'
+        await click(getFilter(comp, 0, "input"));
+
+        assert.containsOnce(comp, ".o_search_panel_filter_value input:checked");
+        assert.deepEqual(getFiltersContent(comp), ["asustek: 2", "agrolait: 1"]);
+        assert.deepEqual(getDomain(), ["&", ["bar", "=", true], ["company_id", "in", [3]]]);
+
+        // check 'agrolait'
+        await click(getFilter(comp, 1, "input"));
+
+        assert.containsN(comp, ".o_search_panel_filter_value input:checked", 2);
+        assert.deepEqual(getFiltersContent(comp), ["asustek: 2", "agrolait: 1"]);
+        assert.deepEqual(getDomain(), ["&", ["bar", "=", true], ["company_id", "in", [3, 5]]]);
+
+        // uncheck 'asustek'
+        await click(getFilter(comp, 0, "input"));
+
+        assert.containsOnce(comp, ".o_search_panel_filter_value input:checked");
+        assert.deepEqual(getFiltersContent(comp), ["asustek: 2", "agrolait: 1"]);
+        assert.deepEqual(getDomain(), ["&", ["bar", "=", true], ["company_id", "in", [5]]]);
+
+        // uncheck 'agrolait'
+        await click(getFilter(comp, 1, "input"));
+
+        assert.containsNone(comp, ".o_search_panel_filter_value input:checked");
+        assert.deepEqual(getFiltersContent(comp), ["asustek: 2", "agrolait: 1"]);
+        assert.deepEqual(getDomain(), [["bar", "=", true]]);
+    });
+
+    QUnit.test("use filter (on selection) to refine search", async (assert) => {
+        assert.expect(16);
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <filter name="Filter" domain="[('id', '=', 1)]"/>
+                <searchpanel>
+                    <field name="state" select="multi" enable_counters="1" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent, getDomain } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+            domain: [["bar", "=", true]],
+        });
+
+        assert.containsN(comp, ".o_search_panel_filter_value", 3);
+        assert.containsNone(comp, ".o_search_panel_filter_value input:checked");
+        assert.deepEqual(getFiltersContent(comp), ["ABC: 1", "DEF: 1", "GHI: 1"]);
+        assert.deepEqual(getDomain(), [["bar", "=", true]]);
+
+        // check 'abc'
+        await click(getFilter(comp, 0, "input"));
+
+        assert.containsOnce(comp, ".o_search_panel_filter_value input:checked");
+        assert.deepEqual(getFiltersContent(comp), ["ABC: 1", "DEF: 1", "GHI: 1"]);
+        assert.deepEqual(getDomain(), ["&", ["bar", "=", true], ["state", "in", ["abc"]]]);
+
+        // check 'def'
+        await click(getFilter(comp, 1, "input"));
+
+        assert.containsN(comp, ".o_search_panel_filter_value input:checked", 2);
+        assert.deepEqual(getFiltersContent(comp), ["ABC: 1", "DEF: 1", "GHI: 1"]);
+        assert.deepEqual(getDomain(), ["&", ["bar", "=", true], ["state", "in", ["abc", "def"]]]);
+
+        // uncheck 'abc'
+        await click(getFilter(comp, 0, "input"));
+
+        assert.containsOnce(comp, ".o_search_panel_filter_value input:checked");
+        assert.deepEqual(getFiltersContent(comp), ["ABC: 1", "DEF: 1", "GHI: 1"]);
+        assert.deepEqual(getDomain(), ["&", ["bar", "=", true], ["state", "in", ["def"]]]);
+
+        // uncheck 'def'
+        await click(getFilter(comp, 1, "input"));
+
+        assert.containsNone(comp, ".o_search_panel_filter_value input:checked");
+        assert.deepEqual(getFiltersContent(comp), ["ABC: 1", "DEF: 1", "GHI: 1"]);
+        assert.deepEqual(getDomain(), [["bar", "=", true]]);
+    });
+
+    QUnit.test(
+        "only reload categories and filters when domains change (counters disabled, selection)",
+        async (assert) => {
+            assert.expect(7);
+
+            serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <filter name="Filter" domain="[('id', '&lt;', 5)]"/>
+                <searchpanel>
+                    <field name="state" expand="1"/>
+                    <field name="company_id" select="multi" enable_counters="1" expand="1"/>
+                </searchpanel>
+                </search>`;
+
+            const { TestComponent } = makeTestComponent();
+            const comp = await makeWithSearch({
+                serverData,
+                async mockRPC(route, { method }) {
+                    if (/search_panel_/.test(method || route)) {
+                        assert.step(method || route);
+                    }
+                },
+                Component: TestComponent,
+                resModel: "partner",
+                searchViewId: false,
+            });
+
+            assert.verifySteps(["search_panel_select_range", "search_panel_select_multi_range"]);
+
+            // reload with another domain, so the filters should be reloaded
+            await toggleFilterMenu(comp);
+            await toggleMenuItem(comp, 0);
+
+            assert.verifySteps(["search_panel_select_multi_range"]);
+
+            // change category value, so the filters should be reloaded
+            await click(getCategory(comp, 1));
+
+            assert.verifySteps(["search_panel_select_multi_range"]);
+        }
+    );
+
+    QUnit.test(
+        "only reload categories and filters when domains change (counters disabled, many2one)",
+        async (assert) => {
+            assert.expect(7);
+
+            serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <filter name="domain" domain="[('id', '&lt;', 5)]"/>
+                <searchpanel>
+                    <field name="category_id" expand="1"/>
+                    <field name="company_id" select="multi" enable_counters="1" expand="1"/>
+                </searchpanel>
+                </search>`;
+
+            const { TestComponent } = makeTestComponent();
+            const comp = await makeWithSearch({
+                serverData,
+                async mockRPC(route, { method }) {
+                    if (/search_panel_/.test(method || route)) {
+                        assert.step(method || route);
+                    }
+                },
+                Component: TestComponent,
+                resModel: "partner",
+                searchViewId: false,
+            });
+
+            assert.verifySteps(["search_panel_select_range", "search_panel_select_multi_range"]);
+
+            // reload with another domain, so the filters should be reloaded
+            await toggleFilterMenu(comp);
+            await toggleMenuItem(comp, 0);
+
+            assert.verifySteps(["search_panel_select_multi_range"]);
+
+            // change category value, so the filters should be reloaded
+            await click(getCategory(comp, 1));
+
+            assert.verifySteps(["search_panel_select_multi_range"]);
+        }
+    );
+
+    QUnit.test("category counters", async (assert) => {
+        assert.expect(14);
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <filter name="Filter" domain="[('id', '&lt;', 3)]"/>
+                <searchpanel>
+                    <field name="state" enable_counters="1" expand="1"/>
+                    <field name="company_id" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            async mockRPC(route, { args, method }) {
+                if (/search_panel_/.test(method || route)) {
+                    assert.step(method || route);
+                }
+                if (route === "/web/dataset/call_kw/partner/search_panel_select_range") {
+                    assert.step(args[0]);
+                }
+            },
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.verifySteps([
+            "search_panel_select_range",
+            "state",
+            "search_panel_select_range",
+            "company_id",
+        ]);
+        assert.deepEqual(getCategoriesContent(comp), [
+            "All",
+            "ABC: 1",
+            "DEF: 1",
+            "GHI: 2",
+            "All",
+            "asustek",
+            "agrolait",
+        ]);
+
+        // reload with another domain, so the categories 'state' and 'company_id' should be reloaded
+        await toggleFilterMenu(comp);
+        await toggleMenuItem(comp, 0);
+
+        assert.verifySteps(["search_panel_select_range", "state"]);
+        assert.deepEqual(getCategoriesContent(comp), [
+            "All",
+            "ABC: 1",
+            "DEF: 1",
+            "GHI",
+            "All",
+            "asustek",
+            "agrolait",
+        ]);
+
+        // change category value, so the category 'state' should be reloaded
+        await click(getCategory(comp, 1));
+
+        assert.verifySteps(["search_panel_select_range", "state"]);
+        assert.deepEqual(getCategoriesContent(comp), [
+            "All",
+            "ABC: 1",
+            "DEF: 1",
+            "GHI",
+            "All",
+            "asustek",
+            "agrolait",
+        ]);
+    });
+
+    QUnit.test("category selection without counters", async (assert) => {
+        assert.expect(8);
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <filter name="Filter" domain="[('id', '&lt;', 3)]"/>
+                <searchpanel>
+                    <field name="state" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            async mockRPC(route, { args, method }) {
+                if (/search_panel_/.test(method || route)) {
+                    assert.step(method || route);
+                }
+                if (route === "/web/dataset/call_kw/partner/search_panel_select_range") {
+                    assert.step(args[0]);
+                }
+            },
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.verifySteps(["search_panel_select_range", "state"]);
+        assert.deepEqual(getCategoriesContent(comp), ["All", "ABC", "DEF", "GHI"]);
+
+        // reload with another domain, so the category 'state' should be reloaded
+        await toggleFilterMenu(comp);
+        await toggleMenuItem(comp, 0);
+
+        assert.verifySteps([]);
+        assert.deepEqual(getCategoriesContent(comp), ["All", "ABC", "DEF", "GHI"]);
+
+        // change category value, so the category 'state' should be reloaded
+        await click(getCategory(comp, 1));
+
+        assert.verifySteps([]);
+        assert.deepEqual(getCategoriesContent(comp), ["All", "ABC", "DEF", "GHI"]);
+    });
+
+    QUnit.test("filter with groupby", async (assert) => {
+        assert.expect(26);
+
+        serverData.models.company.records.push({ id: 11, name: "camptocamp", category_id: 7 });
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" select="multi" groupby="category_id" enable_counters="1" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent, getDomain } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+            domain: [["bar", "=", true]],
+        });
+
+        assert.containsN(comp, ".o_search_panel_filter_group", 2);
+        assert.containsOnce(
+            comp,
+            ".o_search_panel_filter_group:first .o_search_panel_filter_value"
+        );
+        assert.containsN(
+            comp,
+            ".o_search_panel_filter_group:nth(1) .o_search_panel_filter_value",
+            2
+        );
+        assert.containsNone(comp, ".o_search_panel_filter_value input:checked");
+        assert.deepEqual(getFilterGroupContent(comp, 0), ["gold", ["asustek: 2"]]);
+        assert.deepEqual(getFilterGroupContent(comp, 1), ["silver", ["agrolait: 1", "camptocamp"]]);
+        assert.deepEqual(getDomain(), [["bar", "=", true]]);
+
+        // check 'asustek'
+        await click(getFilter(comp, 0, "input"));
+
+        const firstGroupCheckbox = getFilterGroup(comp, 0, "header > div > input");
+
+        assert.containsOnce(comp, ".o_search_panel_filter_value input:checked");
+        assert.strictEqual(
+            firstGroupCheckbox.checked,
+            true,
+            "first group checkbox should be checked"
+        );
+        assert.deepEqual(getFiltersContent(comp), ["asustek: 2", "agrolait", "camptocamp"]);
+        assert.deepEqual(getDomain(), ["&", ["bar", "=", true], ["company_id", "in", [3]]]);
+
+        // check 'agrolait'
+        await click(getFilter(comp, 1, "input"));
+
+        assert.containsN(comp, ".o_search_panel_filter_value input:checked", 2);
+
+        const secondGroupCheckbox = getFilterGroup(comp, 1, "header > div > input");
+
+        assert.strictEqual(
+            secondGroupCheckbox.checked,
+            false,
+            "second group checkbox should not be checked"
+        );
+        assert.strictEqual(
+            secondGroupCheckbox.indeterminate,
+            true,
+            "second group checkbox should be indeterminate"
+        );
+        assert.deepEqual(getFiltersContent(comp), ["asustek", "agrolait", "camptocamp"]);
+        assert.deepEqual(getDomain(), [
+            "&",
+            ["bar", "=", true],
+            "&",
+            ["company_id", "in", [3]],
+            ["company_id", "in", [5]],
+        ]);
+
+        // check 'camptocamp'
+        await click(getFilter(comp, 2, "input"));
+
+        assert.containsN(comp, ".o_search_panel_filter_value input:checked", 3);
+        assert.strictEqual(
+            secondGroupCheckbox.checked,
+            true,
+            "second group checkbox should be checked"
+        );
+        assert.strictEqual(
+            secondGroupCheckbox.indeterminate,
+            false,
+            "second group checkbox should not be indeterminate"
+        );
+        assert.deepEqual(getFiltersContent(comp), ["asustek", "agrolait", "camptocamp"]);
+        assert.deepEqual(getDomain(), [
+            "&",
+            ["bar", "=", true],
+            "&",
+            ["company_id", "in", [3]],
+            ["company_id", "in", [5, 11]],
+        ]);
+
+        // uncheck second group
+        await click(getFilterGroup(comp, 1, "header > div > input"));
+
+        assert.containsOnce(comp, ".o_search_panel_filter_value input:checked");
+        assert.strictEqual(
+            secondGroupCheckbox.checked,
+            false,
+            "second group checkbox should not be checked"
+        );
+        assert.strictEqual(
+            secondGroupCheckbox.indeterminate,
+            false,
+            "second group checkbox should not be indeterminate"
+        );
+        assert.deepEqual(getFiltersContent(comp), ["asustek: 2", "agrolait", "camptocamp"]);
+        assert.deepEqual(getDomain(), ["&", ["bar", "=", true], ["company_id", "in", [3]]]);
+    });
+
+    QUnit.test("filter with domain", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.company.records.push({ id: 40, name: "child company 1", parent_id: 3 });
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" select="multi" domain="[('parent_id','=',False)]" enable_counters="1" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            async mockRPC(route, { kwargs, method }) {
+                if (method === "search_panel_select_multi_range") {
+                    const toCompare = { ...kwargs, context: {} };
+                    assert.deepEqual(toCompare, {
+                        group_by: false,
+                        category_domain: [],
+                        context: {},
+                        expand: true,
+                        filter_domain: [],
+                        search_domain: [],
+                        comodel_domain: [["parent_id", "=", false]],
+                        group_domain: [],
+                        enable_counters: true,
+                        limit: 200,
+                    });
+                }
+            },
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_filter_value", 2);
+        assert.deepEqual(getFiltersContent(comp), ["asustek: 2", "agrolait: 2"]);
+    });
+
+    QUnit.test("filter with domain depending on category", async (assert) => {
+        assert.expect(22);
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="category_id"/>
+                    <field name="company_id" select="multi" domain="[['category_id', '=', category_id]]" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            async mockRPC(route, { kwargs, method }) {
+                if (method === "search_panel_select_multi_range") {
+                    if (method === "search_panel_select_multi_range") {
+                        // the following keys should have same value for all calls to this route
+                        const { group_by, search_domain, filter_domain } = kwargs;
+                        assert.deepEqual(
+                            { group_by, search_domain, filter_domain },
+                            {
+                                group_by: false,
+                                filter_domain: [],
+                                search_domain: [],
+                            }
+                        );
+                        assert.step(JSON.stringify(kwargs.category_domain));
+                        assert.step(JSON.stringify(kwargs.comodel_domain));
+                    }
+                }
+            },
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        // select 'gold' category
+        await click(getCategory(comp, 1));
+
+        assert.containsOnce(comp, ".o_search_panel_category_value .active");
+        assert.containsOnce(comp, ".o_search_panel_category_value:nth(1) .active");
+        assert.containsOnce(comp, ".o_search_panel_filter_value");
+        assert.deepEqual(getFiltersContent(comp), ["asustek: 1"]);
+
+        // select 'silver' category
+        await click(getCategory(comp, 2));
+
+        assert.containsOnce(comp, ".o_search_panel_category_value:nth(2) .active");
+        assert.containsOnce(comp, ".o_search_panel_filter_value");
+        assert.deepEqual(getFiltersContent(comp), ["agrolait: 2"]);
+
+        // select All
+        await click(getCategory(comp, 0));
+
+        assert.containsOnce(comp, ".o_search_panel_category_value:first .active");
+        assert.containsNone(comp, ".o_search_panel_filter_value");
+
+        assert.verifySteps([
+            "[]", // category_domain (All)
+            '[["category_id","=",false]]', // comodel_domain (All)
+            '[["category_id","=",6]]', // category_domain ('gold')
+            '[["category_id","=",6]]', // comodel_domain ('gold')
+            '[["category_id","=",7]]', // category_domain ('silver')
+            '[["category_id","=",7]]', // comodel_domain ('silver')
+            "[]", // category_domain (All)
+            '[["category_id","=",false]]', // comodel_domain (All)
+        ]);
+    });
+
+    QUnit.test("specify active filter values in context", async (assert) => {
+        assert.expect(4);
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" select="multi" enable_counters="1"/>
+                    <field name="state" select="multi" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent, getDomain } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+            context: {
+                searchpanel_default_company_id: [5],
+                searchpanel_default_state: ["abc", "ghi"],
+            },
+        });
+
+        assert.containsN(comp, ".o_search_panel_filter_value input:checked", 3);
+        assert.deepEqual(getDomain(), [
+            "&",
+            ["company_id", "in", [5]],
+            ["state", "in", ["abc", "ghi"]],
+        ]);
+
+        // manually untick a default value
+        await click(getFilter(comp, 1, "input"));
+
+        assert.containsN(comp, ".o_search_panel_filter_value input:checked", 2);
+        assert.deepEqual(getDomain(), [["state", "in", ["abc", "ghi"]]]);
+    });
+
+    QUnit.test("retrieved filter value from context does not exist", async (assert) => {
+        assert.expect(1);
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" select="multi" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent, getDomain } = makeTestComponent();
+        await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+            context: {
+                searchpanel_default_company_id: [1, 3],
+            },
+        });
+
+        assert.deepEqual(getDomain(), [["company_id", "in", [3]]]);
+    });
+
+    QUnit.test("filter with groupby and default values in context", async (assert) => {
+        assert.expect(2);
+
+        serverData.models.company.records.push({ id: 11, name: "camptocamp", category_id: 7 });
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" select="multi" groupby="category_id" enable_counters="1" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent, getDomain } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+            context: {
+                searchpanel_default_company_id: [5],
+            },
+        });
+
+        const secondGroupCheckbox = getFilterGroup(comp, 1, "header > div > input");
+
+        assert.strictEqual(secondGroupCheckbox.indeterminate, true);
+        assert.deepEqual(getDomain(), [["company_id", "in", [5]]]);
+    });
+
+    QUnit.test('Does not confuse false and "false" groupby values', async (assert) => {
+        assert.expect(6);
+
+        serverData.models.company.fields.char_field = { string: "Char Field", type: "char" };
+        serverData.models.company.records = [
+            { id: 3, name: "A", char_field: false },
+            { id: 5, name: "B", char_field: "false" },
+        ];
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" select="multi" groupby="char_field"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+            context: {
+                searchpanel_default_company_id: [5],
+            },
+        });
+
+        assert.containsOnce(comp, ".o_search_panel_section");
+
+        // There should be a group 'false' displayed with only value B inside it.
+        assert.containsOnce(comp, ".o_search_panel_filter_group");
+        assert.deepEqual(getFilterGroupContent(comp), ["false", ["B"]]);
+        assert.containsOnce(getFilterGroup(comp), ".o_search_panel_filter_value");
+
+        // Globally, there should be two values, one displayed in the group 'false', and one at the end of the section
+        // (the group false is not displayed and its values are displayed at the first level)
+        assert.containsN(comp, ".o_search_panel_filter_value", 2);
+        assert.deepEqual(getFiltersContent(comp), ["B", "A"]);
+    });
+
+    QUnit.test("tests conservation of category record order", async (assert) => {
+        assert.expect(1);
+
+        serverData.models.company.records.push(
+            { id: 56, name: "highID", category_id: 6 },
+            { id: 2, name: "lowID", category_id: 6 }
+        );
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" enable_counters="1" expand="1"/>
+                    <field name="category_id" select="multi" enable_counters="1" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.deepEqual(getCategoriesContent(comp), [
+            "All",
+            "asustek: 2",
+            "agrolait: 2",
+            "highID",
+            "lowID",
+        ]);
+    });
+
+    QUnit.test("search panel is available on list and kanban by default", async (assert) => {
+        assert.expect(8);
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <filter name="false_domain" string="False Domain" domain="[(0, '=', 1)]"/>
+                <filter name="filter" string="Filter" domain="[('bar', '=', true)]"/>
+                <filter name="true_domain" string="True Domain" domain="[(1, '=', 1)]"/>
+                <filter name="group_by_bar" string="Bar" context="{ 'group_by': 'bar' }"/>
+                <searchpanel>
+                    <field name="company_id" enable_counters="1" expand="1"/>
+                    <field name="category_id" select="multi" enable_counters="1" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const webclient = await createWebClient({ serverData });
+
+        await doAction(webclient, 1);
+
+        assert.containsOnce(webclient, ".o_content.o_controller_with_searchpanel .o_kanban_view");
+        assert.containsOnce(webclient, ".o_content.o_controller_with_searchpanel .o_search_panel");
+
+        await switchView(webclient, "pivot");
+
+        assert.containsOnce(webclient, ".o_content .o_pivot");
+        assert.containsNone(webclient, ".o_content .o_search_panel");
+
+        await switchView(webclient, "list");
+        await legacyExtraNextTick();
+
+        assert.containsOnce(webclient, ".o_content.o_controller_with_searchpanel .o_list_view");
+        assert.containsOnce(webclient, ".o_content.o_controller_with_searchpanel .o_search_panel");
+
+        await click(webclient.el.querySelector(".o_data_row .o_data_cell"));
+        await legacyExtraNextTick();
+
+        assert.containsOnce(webclient, ".o_content .o_form_view");
+        assert.containsNone(webclient, ".o_content .o_search_panel");
+    });
+
+    QUnit.test("search panel with view_types attribute", async (assert) => {
+        assert.expect(6);
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <filter name="false_domain" string="False Domain" domain="[(0, '=', 1)]"/>
+                <filter name="filter" string="Filter" domain="[('bar', '=', true)]"/>
+                <filter name="true_domain" string="True Domain" domain="[(1, '=', 1)]"/>
+                <filter name="group_by_bar" string="Bar" context="{ 'group_by': 'bar' }"/>
+                <searchpanel view_types="kanban,pivot">
+                    <field name="company_id" enable_counters="1" expand="1"/>
+                    <field name="category_id" select="multi" enable_counters="1" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const webclient = await createWebClient({ serverData });
+
+        await doAction(webclient, 1);
+
+        assert.containsOnce(webclient, ".o_content.o_controller_with_searchpanel .o_kanban_view");
+        assert.containsOnce(webclient, ".o_content.o_controller_with_searchpanel .o_search_panel");
+
+        await switchView(webclient, "list");
+        await legacyExtraNextTick();
+
+        assert.containsOnce(webclient, ".o_content .o_list_view");
+        assert.containsNone(webclient, ".o_content .o_search_panel");
+
+        await switchView(webclient, "pivot");
+
+        assert.containsOnce(webclient, ".o_content.o_component_with_search_panel .o_pivot");
+        assert.containsOnce(webclient, ".o_content.o_component_with_search_panel .o_search_panel");
+    });
+
+    QUnit.test("search panel state is shared between views", async (assert) => {
+        assert.expect(16);
+
+        const webclient = await createWebClient({
+            serverData,
+            async mockRPC(route, { domain }) {
+                if (route === "/web/dataset/search_read") {
+                    assert.step(JSON.stringify(domain));
+                }
+            },
+        });
+
+        await doAction(webclient, 1);
+
+        assert.hasClass(getCategory(webclient, 0), "active");
+        assert.containsN(webclient, ".o_kanban_record:not(.o_kanban_ghost)", 4);
+
+        // select 'asustek' company
+        await click(getCategory(webclient, 1));
+
+        assert.hasClass(getCategory(webclient, 1), "active");
+        assert.containsN(webclient, ".o_kanban_record:not(.o_kanban_ghost)", 2);
+
+        await switchView(webclient, "list");
+        await legacyExtraNextTick();
+
+        assert.hasClass(getCategory(webclient, 1), "active");
+        assert.containsN(webclient, ".o_data_row", 2);
+
+        // select 'agrolait' company
+        await click(getCategory(webclient, 2));
+
+        assert.hasClass(getCategory(webclient, 2), "active");
+        assert.containsN(webclient, ".o_data_row", 2);
+
+        await switchView(webclient, "kanban");
+        await legacyExtraNextTick();
+
+        assert.hasClass(getCategory(webclient, 2), "active");
+        assert.containsN(webclient, ".o_kanban_record:not(.o_kanban_ghost)", 2);
+
+        assert.verifySteps([
+            "[]", // initial search_read
+            '[["company_id","child_of",3]]', // kanban, after selecting the first company
+            '[["company_id","child_of",3]]', // list
+            '[["company_id","child_of",5]]', // list, after selecting the other company
+            '[["company_id","child_of",5]]', // kanban
+        ]);
+    });
+
+    QUnit.test("search panel filters are kept between switch views", async (assert) => {
+        assert.expect(17);
+
+        const webclient = await createWebClient({
+            serverData,
+            async mockRPC(route, { domain }) {
+                if (route === "/web/dataset/search_read") {
+                    assert.step(JSON.stringify(domain));
+                }
+            },
+        });
+
+        await doAction(webclient, 1);
+
+        assert.containsNone(webclient, ".o_search_panel_filter_value input:checked");
+        assert.containsN(webclient, ".o_kanban_record:not(.o_kanban_ghost)", 4);
+
+        // select gold filter
+        await click(getFilter(webclient, 0, "input"));
+
+        assert.containsOnce(webclient, ".o_search_panel_filter_value input:checked");
+        assert.containsN(webclient, ".o_kanban_record:not(.o_kanban_ghost)", 1);
+
+        await switchView(webclient, "list");
+        await legacyExtraNextTick();
+
+        assert.containsOnce(webclient, ".o_search_panel_filter_value input:checked");
+        assert.containsN(webclient, ".o_data_row", 1);
+
+        // select silver filter
+        await click(getFilter(webclient, 1, "input"));
+
+        assert.containsN(webclient, ".o_search_panel_filter_value input:checked", 2);
+        assert.containsN(webclient, ".o_data_row", 4);
+
+        await switchView(webclient, "kanban");
+        await legacyExtraNextTick();
+
+        assert.containsN(webclient, ".o_search_panel_filter_value input:checked", 2);
+        assert.containsN(webclient, ".o_kanban_record:not(.o_kanban_ghost)", 4);
+
+        await click(webclient.el.querySelector(".o_kanban_record"));
+        await legacyExtraNextTick();
+        await click(webclient.el.querySelector(".breadcrumb-item"));
+        await legacyExtraNextTick();
+
+        assert.verifySteps([
+            "[]", // initial search_read
+            '[["category_id","in",[6]]]', // kanban, after selecting the gold filter
+            '[["category_id","in",[6]]]', // list
+            '[["category_id","in",[6,7]]]', // list, after selecting the silver filter
+            '[["category_id","in",[6,7]]]', // kanban
+            '[["category_id","in",[6,7]]]', // kanban, after switching back from form view
+        ]);
+    });
+
+    QUnit.test(
+        "search panel filters are kept when switching to a view with no search panel",
+        async (assert) => {
+            assert.expect(13);
+
+            const webclient = await createWebClient({ serverData });
+
+            await doAction(webclient, 1);
+
+            assert.containsOnce(
+                webclient,
+                ".o_content.o_controller_with_searchpanel .o_kanban_view"
+            );
+            assert.containsOnce(
+                webclient,
+                ".o_content.o_controller_with_searchpanel .o_search_panel"
+            );
+            assert.containsNone(webclient, ".o_search_panel_filter_value input:checked");
+            assert.containsN(webclient, ".o_kanban_record:not(.o_kanban_ghost)", 4);
+
+            // select gold filter
+            await click(getFilter(webclient, 0, "input"));
+
+            assert.containsOnce(webclient, ".o_search_panel_filter_value input:checked");
+            assert.containsN(webclient, ".o_kanban_record:not(.o_kanban_ghost)", 1);
+
+            // switch to pivot
+            await switchView(webclient, "pivot");
+
+            assert.containsOnce(webclient, ".o_content .o_pivot");
+            assert.containsNone(webclient, ".o_content .o_search_panel");
+            assert.strictEqual(
+                webclient.el.querySelector(".o_pivot_cell_value").innerText.trim(),
+                "15"
+            );
+
+            // switch to list
+            await switchView(webclient, "list");
+            await legacyExtraNextTick();
+
+            assert.containsOnce(webclient, ".o_content.o_controller_with_searchpanel .o_list_view");
+            assert.containsOnce(
+                webclient,
+                ".o_content.o_controller_with_searchpanel .o_search_panel"
+            );
+            assert.containsOnce(webclient, ".o_search_panel_filter_value input:checked");
+            assert.containsN(webclient, ".o_data_row", 1);
+        }
+    );
+
+    QUnit.test('after onExecuteAction, selects "All" as default category value', async (assert) => {
+        assert.expect(3);
+
+        const webclient = await createWebClient({ serverData });
+
+        await doAction(webclient, 1, { viewType: "form" });
+        await click(webclient.el.querySelector(".o_form_view button"));
+        await legacyExtraNextTick();
+
+        assert.containsOnce(webclient, ".o_kanban_view");
+        assert.containsOnce(webclient, ".o_search_panel");
+        assert.containsOnce(webclient, ".o_search_panel_category_value:first .active");
+    });
+
+    QUnit.test(
+        "categories and filters are not reloaded when switching between views",
+        async (assert) => {
+            assert.expect(3);
+
+            const webclient = await createWebClient({
+                serverData,
+                async mockRPC(route, { method }) {
+                    if (/search_panel_/.test(method || route)) {
+                        assert.step(method || route);
+                    }
+                },
+            });
+
+            await doAction(webclient, 1);
+
+            await switchView(webclient, "list");
+            await legacyExtraNextTick();
+            await switchView(webclient, "kanban");
+            await legacyExtraNextTick();
+
+            assert.verifySteps([
+                "search_panel_select_range", // kanban: categories
+                "search_panel_select_multi_range", // kanban: filters
+            ]);
+        }
+    );
+
+    QUnit.test("scroll position is kept when switching between controllers", async (assert) => {
+        assert.expect(6);
+
+        for (let i = 10; i < 20; i++) {
+            serverData.models.category.records.push({ id: i, name: "Cat " + i });
+        }
+
+        const webclient = await createWebClient({ serverData });
+
+        await doAction(webclient, 1);
+
+        webclient.el.style = "max-height: 300px";
+
+        const getSearchPanel = () => webclient.el.querySelector(".o_search_panel");
+
+        assert.containsOnce(webclient, ".o_content .o_kanban_view");
+        assert.strictEqual(getSearchPanel().scrollTop, 0);
+
+        // simulate a scroll in the search panel and switch into list
+        getSearchPanel().scrollTo(0, 100);
+        await switchView(webclient, "list");
+        await legacyExtraNextTick();
+
+        assert.containsOnce(webclient, ".o_content .o_list_view");
+        assert.strictEqual(getSearchPanel().scrollTop, 100);
+
+        // simulate another scroll and switch back to kanban
+        getSearchPanel().scrollTo(0, 25);
+        await switchView(webclient, "kanban");
+        await legacyExtraNextTick();
+
+        assert.containsOnce(webclient, ".o_content .o_kanban_view");
+        assert.strictEqual(getSearchPanel().scrollTop, 25);
+    });
+
+    QUnit.test("search panel is not instantiated in dialogs", async (assert) => {
+        assert.expect(2);
+
+        serverData.models.company.records = Array.from(Array(8), (_, i) => ({
+            id: i + 1,
+            name: `Company${i + 1}`,
+        }));
+        serverData.views["company,false,list"] = /* xml */ `<tree><field name="name"/></tree>`;
+        serverData.views["company,false,search"] = /* xml */ `
+            <search>
+                <field name="name"/>
+                <searchpanel>
+                    <field name="category_id" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        const webclient = await createWebClient({ serverData });
+
+        await doAction(webclient, 1, { viewType: "form" });
+
+        await click(webclient.el, "[name=company_id] .o_input");
+        await click(webclient.el, "[name=company_id] .o_input");
+        await click(document, ".o_m2o_dropdown_option");
+        await legacyExtraNextTick();
+
+        assert.containsOnce(document.body, ".modal .o_list_view");
+        assert.containsNone(document.body, ".modal .o_search_panel");
+    });
+
+    QUnit.test(
+        "Reload categories with counters when filter values are selected",
+        async (assert) => {
+            assert.expect(10);
+
+            serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="category_id" enable_counters="1"/>
+                    <field name="state" select="multi" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+            const { TestComponent } = makeTestComponent();
+            const comp = await makeWithSearch({
+                serverData,
+                async mockRPC(route, { method }) {
+                    if (/search_panel_/.test(method || route)) {
+                        assert.step(method || route);
+                    }
+                },
+                Component: TestComponent,
+                resModel: "partner",
+                searchViewId: false,
+            });
+
+            assert.verifySteps(["search_panel_select_range", "search_panel_select_multi_range"]);
+
+            assert.deepEqual(getCategoriesContent(comp, getCounters), [1, 3]);
+            assert.deepEqual(getFiltersContent(comp, getCounters), [1, 1, 2]);
+
+            await click(getFilter(comp, 0, "input"));
+
+            assert.deepEqual(getCategoriesContent(comp, getCounters), [1]);
+            assert.deepEqual(getFiltersContent(comp, getCounters), [1, 1, 2]);
+
+            assert.verifySteps(["search_panel_select_range", "search_panel_select_multi_range"]);
+        }
+    );
+
+    QUnit.test("many2one: select one, expand, hierarchize, counters", async (assert) => {
+        assert.expect(5);
+
+        serverData.models.company.records.push(
+            { id: 50, name: "agrobeurre", parent_id: 5 },
+            { id: 51, name: "agrocrèmefraiche", parent_id: 5 }
+        );
+        serverData.models.partner.records[1].company_id = 50;
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" enable_counters="1" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_field .o_search_panel_category_value", 3);
+        assert.containsOnce(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getCategoriesContent(comp, getCounters), [2, 1]);
+
+        await click(getCategory(comp, "agrolait"));
+
+        assert.containsN(comp, ".o_search_panel_field .o_search_panel_category_value", 5);
+        assert.deepEqual(getCategoriesContent(comp, getCounters), [2, 1, 1]);
+    });
+
+    QUnit.test("many2one: select one, no expand, hierarchize, counters", async (assert) => {
+        assert.expect(5);
+
+        serverData.models.company.records.push(
+            { id: 50, name: "agrobeurre", parent_id: 5 },
+            { id: 51, name: "agrocrèmefraiche", parent_id: 5 }
+        );
+        serverData.models.partner.records[1].company_id = 50;
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_field .o_search_panel_category_value", 3);
+        assert.containsOnce(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getCategoriesContent(comp, getCounters), [2, 1]);
+
+        await click(getCategory(comp, "agrolait"));
+
+        assert.containsN(comp, ".o_search_panel_field .o_search_panel_category_value", 4);
+        assert.deepEqual(getCategoriesContent(comp, getCounters), [2, 1, 1]);
+    });
+
+    QUnit.test("many2one: select one, expand, no hierarchize, counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.company.records.push(
+            { id: 50, name: "agrobeurre", parent_id: 5 },
+            { id: 51, name: "agrocrèmefraiche", parent_id: 5 }
+        );
+        serverData.models.partner.records[1].company_id = 50;
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" hierarchize="0" enable_counters="1" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_field .o_search_panel_category_value", 5);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getCategoriesContent(comp, getCounters), [2, 1, 1]);
+    });
+
+    QUnit.test("many2one: select one, no expand, no hierarchize, counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.company.records.push(
+            { id: 50, name: "agrobeurre", parent_id: 5 },
+            { id: 51, name: "agrocrèmefraiche", parent_id: 5 }
+        );
+        serverData.models.partner.records[1].company_id = 50;
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" hierarchize="0" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_field .o_search_panel_category_value", 4);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getCategoriesContent(comp, getCounters), [2, 1, 1]);
+    });
+
+    QUnit.test("many2one: select one, expand, hierarchize, no counters", async (assert) => {
+        assert.expect(5);
+
+        serverData.models.company.records.push(
+            { id: 50, name: "agrobeurre", parent_id: 5 },
+            { id: 51, name: "agrocrèmefraiche", parent_id: 5 }
+        );
+        serverData.models.partner.records[1].company_id = 50;
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_field .o_search_panel_category_value", 3);
+        assert.containsOnce(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getCategoriesContent(comp, getCounters), []);
+
+        await click(getCategory(comp, "agrolait"));
+
+        assert.containsN(comp, ".o_search_panel_field .o_search_panel_category_value", 5);
+        assert.deepEqual(getCategoriesContent(comp, getCounters), []);
+    });
+
+    QUnit.test("many2one: select one, no expand, hierarchize, no counters", async (assert) => {
+        assert.expect(5);
+
+        serverData.models.company.records.push(
+            { id: 50, name: "agrobeurre", parent_id: 5 },
+            { id: 51, name: "agrocrèmefraiche", parent_id: 5 }
+        );
+        serverData.models.partner.records[1].company_id = 50;
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_field .o_search_panel_category_value", 3);
+        assert.containsOnce(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getCategoriesContent(comp, getCounters), []);
+
+        await click(getCategory(comp, "agrolait"));
+
+        assert.containsN(comp, ".o_search_panel_field .o_search_panel_category_value", 4);
+        assert.deepEqual(getCategoriesContent(comp, getCounters), []);
+    });
+
+    QUnit.test("many2one: select one, expand, no hierarchize, no counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.company.records.push(
+            { id: 50, name: "agrobeurre", parent_id: 5 },
+            { id: 51, name: "agrocrèmefraiche", parent_id: 5 }
+        );
+        serverData.models.partner.records[1].company_id = 50;
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" hierarchize="0" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_field .o_search_panel_category_value", 5);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getCategoriesContent(comp, getCounters), []);
+    });
+
+    QUnit.test("many2one: select one, no expand, no hierarchize, no counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.company.records.push(
+            { id: 50, name: "agrobeurre", parent_id: 5 },
+            { id: 51, name: "agrocrèmefraiche", parent_id: 5 }
+        );
+        serverData.models.partner.records[1].company_id = 50;
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" hierarchize="0"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_field .o_search_panel_category_value", 4);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getCategoriesContent(comp, getCounters), []);
+    });
+
+    QUnit.test("many2one: select multi, expand, groupby, counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.company.records.push({ id: 666, name: "Mordor Inc.", category_id: 6 });
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" select="multi" groupby="category_id" enable_counters="1" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_label", 5);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getFiltersContent(comp, getCounters), [2, 2]);
+    });
+
+    QUnit.test("many2one: select multi, no expand, groupby, counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.company.records.push({ id: 666, name: "Mordor Inc.", category_id: 6 });
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" select="multi" groupby="category_id" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_label", 4);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getFiltersContent(comp, getCounters), [2, 2]);
+    });
+
+    QUnit.test("many2one: select multi, expand, no groupby, counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.company.records.push({ id: 666, name: "Mordor Inc.", category_id: 6 });
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" select="multi" enable_counters="1" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_label", 3);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getFiltersContent(comp, getCounters), [2, 2]);
+    });
+
+    QUnit.test("many2one: select multi, no expand, no groupby, counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.company.records.push({ id: 666, name: "Mordor Inc.", category_id: 6 });
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" select="multi" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_label", 2);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getFiltersContent(comp, getCounters), [2, 2]);
+    });
+
+    QUnit.test("many2one: select multi, expand, groupby, no counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.company.records.push({ id: 666, name: "Mordor Inc.", category_id: 6 });
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" select="multi" groupby="category_id" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_label", 5);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getFiltersContent(comp, getCounters), []);
+    });
+
+    QUnit.test("many2one: select multi, no expand, groupby, no counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.company.records.push({ id: 666, name: "Mordor Inc.", category_id: 6 });
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" select="multi" groupby="category_id"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_label", 4);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getFiltersContent(comp, getCounters), []);
+    });
+
+    QUnit.test("many2one: select multi, expand, no groupby, no counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.company.records.push({ id: 666, name: "Mordor Inc.", category_id: 6 });
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" select="multi" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_label", 3);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getFiltersContent(comp, getCounters), []);
+    });
+
+    QUnit.test("many2one: select multi, no expand, no groupby, no counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.company.records.push({ id: 666, name: "Mordor Inc.", category_id: 6 });
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" select="multi"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_label", 2);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getFiltersContent(comp, getCounters), []);
+    });
+
+    QUnit.test("many2many: select multi, expand, groupby, counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.company.records.push({ id: 666, name: "Mordor Inc.", category_id: 6 });
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_ids" select="multi" groupby="category_id" enable_counters="1" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_label", 5);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getFiltersContent(comp, getCounters), [2, 1]);
+    });
+
+    QUnit.test("many2many: select multi, no expand, groupby, counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.company.records.push({ id: 666, name: "Mordor Inc.", category_id: 6 });
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_ids" select="multi" groupby="category_id" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_label", 4);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getFiltersContent(comp, getCounters), [2, 1]);
+    });
+
+    QUnit.test("many2many: select multi, expand, no groupby, counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.company.records.push({ id: 666, name: "Mordor Inc.", category_id: 6 });
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_ids" select="multi" enable_counters="1" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_label", 3);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getFiltersContent(comp, getCounters), [2, 1]);
+    });
+
+    QUnit.test("many2many: select multi, no expand, no groupby, counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.company.records.push({ id: 666, name: "Mordor Inc.", category_id: 6 });
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_ids" select="multi" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_label", 2);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getFiltersContent(comp, getCounters), [2, 1]);
+    });
+
+    QUnit.test("many2many: select multi, expand, groupby, no counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.company.records.push({ id: 666, name: "Mordor Inc.", category_id: 6 });
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_ids" select="multi" groupby="category_id" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_label", 5);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getFiltersContent(comp, getCounters), []);
+    });
+
+    QUnit.test("many2many: select multi, no expand, groupby, no counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.company.records.push({ id: 666, name: "Mordor Inc.", category_id: 6 });
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_ids" select="multi" groupby="category_id"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_label", 4);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getFiltersContent(comp, getCounters), []);
+    });
+
+    QUnit.test("many2many: select multi, expand, no groupby, no counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.company.records.push({ id: 666, name: "Mordor Inc.", category_id: 6 });
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_ids" select="multi" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_label", 3);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getFiltersContent(comp, getCounters), []);
+    });
+
+    QUnit.test("many2many: select multi, no expand, no groupby, no counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.company.records.push({ id: 666, name: "Mordor Inc.", category_id: 6 });
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_ids" select="multi"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_label", 2);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getFiltersContent(comp, getCounters), []);
+    });
+
+    QUnit.test("selection: select one, expand, counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.partner.records.shift();
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="state" enable_counters="1" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_field .o_search_panel_category_value", 4);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getCategoriesContent(comp, getCounters), [1, 2]);
+    });
+
+    QUnit.test("selection: select one, no expand, counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.partner.records.shift();
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="state" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_field .o_search_panel_category_value", 3);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getCategoriesContent(comp, getCounters), [1, 2]);
+    });
+
+    QUnit.test("selection: select one, expand, no counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.partner.records.shift();
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="state" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_field .o_search_panel_category_value", 4);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getCategoriesContent(comp, getCounters), []);
+    });
+
+    QUnit.test("selection: select one, no expand, no counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.partner.records.shift();
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="state"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_field .o_search_panel_category_value", 3);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getCategoriesContent(comp, getCounters), []);
+    });
+
+    QUnit.test("selection: select multi, expand, counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.partner.records.shift();
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="state" select="multi" enable_counters="1" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_label", 3);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getFiltersContent(comp, getCounters), [1, 2]);
+    });
+
+    QUnit.test("selection: select multi, no expand, counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.partner.records.shift();
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="state" select="multi" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_label", 2);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getFiltersContent(comp, getCounters), [1, 2]);
+    });
+
+    QUnit.test("selection: select multi, expand, no counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.partner.records.shift();
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="state" select="multi" expand="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_label", 3);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getFiltersContent(comp, getCounters), []);
+    });
+
+    QUnit.test("selection: select multi, no expand, no counters", async (assert) => {
+        assert.expect(3);
+
+        serverData.models.partner.records.shift();
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="state" select="multi"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_label", 2);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getFiltersContent(comp, getCounters), []);
+    });
+
+    //-------------------------------------------------------------------------
+    // Model domain and count domain distinction
+    //-------------------------------------------------------------------------
+
+    QUnit.test("selection: select multi, no expand, counters, extra_domain", async (assert) => {
+        assert.expect(5);
+
+        serverData.models.partner.records.shift();
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id"/>
+                    <field name="state" select="multi" enable_counters="1"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsN(comp, ".o_search_panel_label", 5);
+        assert.containsNone(comp, ".o_toggle_fold > i");
+        assert.deepEqual(getFiltersContent(comp, getCounters), [1, 2]);
+
+        await click(getCategory(comp, "asustek"));
+
+        assert.containsN(comp, ".o_search_panel_label", 5);
+        assert.deepEqual(getFiltersContent(comp, getCounters), [1]);
+    });
+
+    //-------------------------------------------------------------------------
+    // Limit
+    //-------------------------------------------------------------------------
+
+    QUnit.test("reached limit for a category", async (assert) => {
+        assert.expect(6);
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" limit="2"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsOnce(comp, ".o_search_panel_section");
+        assert.containsOnce(comp, ".o_search_panel_section_header");
+        assert.strictEqual(
+            comp.el.querySelector(".o_search_panel_section_header").innerText,
+            "COMPANY"
+        );
+        assert.containsOnce(comp, "section div.alert.alert-warning");
+        assert.strictEqual(
+            comp.el.querySelector("section div.alert.alert-warning").innerText,
+            "Too many items to display."
+        );
+        assert.containsNone(comp, ".o_search_panel_category_value");
+    });
+
+    QUnit.test("reached limit for a filter", async (assert) => {
+        assert.expect(6);
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="company_id" select="multi" limit="2"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.containsOnce(comp, ".o_search_panel_section");
+        assert.containsOnce(comp, ".o_search_panel_section_header");
+        assert.strictEqual(
+            comp.el.querySelector(".o_search_panel_section_header").innerText,
+            "COMPANY"
+        );
+        assert.containsOnce(comp, "section div.alert.alert-warning");
+        assert.strictEqual(
+            comp.el.querySelector("section div.alert.alert-warning").innerText,
+            "Too many items to display."
+        );
+        assert.containsNone(comp, ".o_search_panel_filter_value");
+    });
+
+    QUnit.test(
+        "a selected value becomming invalid should no more impact the view",
+        async (assert) => {
+            assert.expect(8);
+            serverData.views["partner,false,search"] = /* xml */ `
+                <search>
+                    <filter name="filter_on_def" string="DEF" domain="[('state', '=', 'def')]"/>
+                    <searchpanel>
+                        <field name="state" enable_counters="1"/>
+                    </searchpanel>
+                </search>`;
+
+            const { TestComponent } = makeTestComponent();
+            const comp = await makeWithSearch({
+                serverData,
+                async mockRPC(route, { method }) {
+                    if (/search_panel_/.test(method || route)) {
+                        assert.step(method || route);
+                    }
+                },
+                Component: TestComponent,
+                resModel: "partner",
+                searchViewId: false,
+            });
+
+            assert.verifySteps(["search_panel_select_range"]);
+
+            // select 'ABC' in search panel
+            await click(getCategory(comp, 1));
+
+            assert.verifySteps(["search_panel_select_range"]);
+
+            // select DEF in filter menu
+            await toggleFilterMenu(comp);
+            await toggleMenuItem(comp, "DEF");
+
+            assert.verifySteps(["search_panel_select_range"]);
+
+            const firstCategoryValue = getCategory(comp, 0);
+            assert.strictEqual(firstCategoryValue.innerText, "All");
+            assert.hasClass(
+                firstCategoryValue,
+                "active",
+                "the value 'All' should be selected since ABC is no longer a valid value with respect to search domain"
+            );
+        }
+    );
+
+    QUnit.test(
+        "Categories with default attributes should be udpated when external domain changes",
+        async (assert) => {
+            assert.expect(8);
+
+            serverData.views["partner,false,search"] = /* xml */ `
+                <search>
+                    <filter name="filter_on_def" string="DEF" domain="[('state', '=', 'def')]"/>
+                    <searchpanel>
+                        <field name="state"/>
+                    </searchpanel>
+                </search>`;
+
+            const { TestComponent } = makeTestComponent();
+            const comp = await makeWithSearch({
+                serverData,
+                async mockRPC(route, { method }) {
+                    if (/search_panel_/.test(method || route)) {
+                        assert.step(method || route);
+                    }
+                },
+                Component: TestComponent,
+                resModel: "partner",
+                searchViewId: false,
+            });
+
+            assert.verifySteps(["search_panel_select_range"]);
+            assert.deepEqual(getCategoriesContent(comp), ["All", "ABC", "DEF", "GHI"]);
+
+            // select 'ABC' in search panel --> no need to update the category value
+            await click(getCategory(comp, 1));
+
+            assert.verifySteps([]);
+            assert.deepEqual(getCategoriesContent(comp), ["All", "ABC", "DEF", "GHI"]);
+
+            // select DEF in filter menu --> the external domain changes --> the values should be updated
+            await toggleFilterMenu(comp);
+            await toggleMenuItem(comp, "DEF");
+
+            assert.verifySteps(["search_panel_select_range"]);
+            assert.deepEqual(getCategoriesContent(comp), ["All", "DEF"]);
+        }
+    );
+
+    QUnit.test("Category with counters and filter with domain", async (assert) => {
+        assert.expect(1);
+
+        serverData.views["partner,false,search"] = /* xml */ `
+            <search>
+                <searchpanel>
+                    <field name="category_id"/>
+                    <field name="company_id" select="multi" domain="[['category_id', '=', category_id]]"/>
+                </searchpanel>
+            </search>`;
+
+        const { TestComponent } = makeTestComponent();
+        const comp = await makeWithSearch({
+            serverData,
+            Component: TestComponent,
+            resModel: "partner",
+            searchViewId: false,
+        });
+
+        assert.deepEqual(getCategoriesContent(comp), ["All", "gold", "silver"]);
+    });
+});
diff --git a/addons/web/static/tests/search/search_utils_tests.js b/addons/web/static/tests/search/search_utils_tests.js
new file mode 100644
index 00000000000..6e541a105d1
--- /dev/null
+++ b/addons/web/static/tests/search/search_utils_tests.js
@@ -0,0 +1,490 @@
+/** @odoo-module **/
+
+import { constructDateDomain } from "@web/search/utils/dates";
+import { defaultLocalization } from "@web/../tests/helpers/mock_services";
+import { Domain } from "@web/core/domain";
+import { localization } from "@web/core/l10n/localization";
+import { patch, unpatch } from "@web/core/utils/patch";
+import { patchDate } from "@web/../tests/helpers/utils";
+import { translatedTerms } from "@web/core/l10n/translation";
+
+const { DateTime } = luxon;
+
+QUnit.module("Search", () => {
+    QUnit.module("SearchUtils");
+
+    QUnit.test(
+        "construct simple domain based on date field (no comparisonOptionId)",
+        function (assert) {
+            patchDate(2020, 5, 1, 13, 0, 0);
+            const referenceMoment = DateTime.utc();
+            assert.deepEqual(constructDateDomain(referenceMoment, "date_field", "date", []), {
+                domain: new Domain(`[]`),
+                description: "",
+            });
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, "date_field", "date", [
+                    "this_month",
+                    "this_year",
+                ]),
+                {
+                    domain: new Domain(
+                        `["&", ("date_field", ">=", "2020-06-01"), ("date_field", "<=", "2020-06-30")]`
+                    ),
+                    description: "June 2020",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, "date_field", "date", [
+                    "second_quarter",
+                    "this_year",
+                ]),
+                {
+                    domain: new Domain(
+                        `["&", ("date_field", ">=", "2020-04-01"), ("date_field", "<=", "2020-06-30")]`
+                    ),
+                    description: "Q2 2020",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, "date_field", "date", ["this_year"]),
+                {
+                    domain: new Domain(
+                        `["&", ("date_field", ">=", "2020-01-01"), ("date_field", "<=", "2020-12-31")]`
+                    ),
+                    description: "2020",
+                }
+            );
+        }
+    );
+
+    QUnit.test(
+        "construct simple domain based on datetime field (no comparisonOptionId)",
+        function (assert) {
+            patchDate(2020, 5, 1, 13, 0, 0);
+            const referenceMoment = DateTime.utc();
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, "date_field", "datetime", [
+                    "this_month",
+                    "this_year",
+                ]),
+                {
+                    domain: new Domain(
+                        `["&", ("date_field", ">=", "2020-06-01 00:00:00"), ("date_field", "<=", "2020-06-30 23:59:59")]`
+                    ),
+                    description: "June 2020",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, "date_field", "datetime", [
+                    "second_quarter",
+                    "this_year",
+                ]),
+                {
+                    domain: new Domain(
+                        `["&", ("date_field", ">=", "2020-04-01 00:00:00"), ("date_field", "<=", "2020-06-30 23:59:59")]`
+                    ),
+                    description: "Q2 2020",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, "date_field", "datetime", ["this_year"]),
+                {
+                    domain: new Domain(
+                        `["&", ("date_field", ">=", "2020-01-01 00:00:00"), ("date_field", "<=", "2020-12-31 23:59:59")]`
+                    ),
+                    description: "2020",
+                }
+            );
+        }
+    );
+    QUnit.test("construct domain based on date field (no comparisonOptionId)", function (assert) {
+        patchDate(2020, 0, 1, 12, 0, 0);
+        const referenceMoment = DateTime.utc();
+        assert.deepEqual(
+            constructDateDomain(referenceMoment, "date_field", "date", [
+                "this_month",
+                "first_quarter",
+                "this_year",
+            ]),
+            {
+                domain: new Domain(
+                    "[" +
+                        `"|", ` +
+                        `"&", ("date_field", ">=", "2020-01-01"), ("date_field", "<=", "2020-01-31"), ` +
+                        `"&", ("date_field", ">=", "2020-01-01"), ("date_field", "<=", "2020-03-31")` +
+                        "]"
+                ),
+                description: "January 2020/Q1 2020",
+            }
+        );
+        assert.deepEqual(
+            constructDateDomain(referenceMoment, "date_field", "date", [
+                "second_quarter",
+                "this_year",
+                "last_year",
+            ]),
+            {
+                domain: new Domain(
+                    "[" +
+                        `"|", ` +
+                        `"&", ("date_field", ">=", "2019-04-01"), ("date_field", "<=", "2019-06-30"), ` +
+                        `"&", ("date_field", ">=", "2020-04-01"), ("date_field", "<=", "2020-06-30")` +
+                        "]"
+                ),
+                description: "Q2 2019/Q2 2020",
+            }
+        );
+        assert.deepEqual(
+            constructDateDomain(referenceMoment, "date_field", "date", [
+                "this_year",
+                "this_month",
+                "antepenultimate_month",
+            ]),
+            {
+                domain: new Domain(
+                    "[" +
+                        `"|", ` +
+                        `"&", ("date_field", ">=", "2020-01-01"), ("date_field", "<=", "2020-01-31"), ` +
+                        `"&", ("date_field", ">=", "2020-11-01"), ("date_field", "<=", "2020-11-30")` +
+                        "]"
+                ),
+                description: "January 2020/November 2020",
+            }
+        );
+    });
+
+    QUnit.test(
+        "construct domain based on datetime field (no comparisonOptionId)",
+        function (assert) {
+            patchDate(2020, 0, 1, 12, 0, 0);
+            const referenceMoment = DateTime.utc();
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, "date_field", "datetime", [
+                    "this_month",
+                    "first_quarter",
+                    "this_year",
+                ]),
+                {
+                    domain: new Domain(
+                        "[" +
+                            `"|", ` +
+                            `"&", ("date_field", ">=", "2020-01-01 00:00:00"), ("date_field", "<=", "2020-01-31 23:59:59"), ` +
+                            `"&", ("date_field", ">=", "2020-01-01 00:00:00"), ("date_field", "<=", "2020-03-31 23:59:59")` +
+                            "]"
+                    ),
+                    description: "January 2020/Q1 2020",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, "date_field", "datetime", [
+                    "second_quarter",
+                    "this_year",
+                    "last_year",
+                ]),
+                {
+                    domain: new Domain(
+                        "[" +
+                            `"|", ` +
+                            `"&", ("date_field", ">=", "2019-04-01 00:00:00"), ("date_field", "<=", "2019-06-30 23:59:59"), ` +
+                            `"&", ("date_field", ">=", "2020-04-01 00:00:00"), ("date_field", "<=", "2020-06-30 23:59:59")` +
+                            "]"
+                    ),
+                    description: "Q2 2019/Q2 2020",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, "date_field", "datetime", [
+                    "this_year",
+                    "this_month",
+                    "antepenultimate_month",
+                ]),
+                {
+                    domain: new Domain(
+                        "[" +
+                            `"|", ` +
+                            `"&", ("date_field", ">=", "2020-01-01 00:00:00"), ("date_field", "<=", "2020-01-31 23:59:59"), ` +
+                            `"&", ("date_field", ">=", "2020-11-01 00:00:00"), ("date_field", "<=", "2020-11-30 23:59:59")` +
+                            "]"
+                    ),
+                    description: "January 2020/November 2020",
+                }
+            );
+        }
+    );
+
+    QUnit.test(
+        'construct comparison domain based on date field and option "previous_period"',
+        function (assert) {
+            patchDate(2020, 0, 1, 12, 0, 0);
+            const referenceMoment = DateTime.utc();
+            assert.deepEqual(
+                constructDateDomain(
+                    referenceMoment,
+                    "date_field",
+                    "date",
+                    ["this_month", "first_quarter", "this_year"],
+                    "previous_period"
+                ),
+                {
+                    domain: new Domain(
+                        "[" +
+                            `"|",  ` +
+                            `"&", ("date_field", ">=", "2019-10-01"), ("date_field", "<=", "2019-10-31"), ` +
+                            `"|", ` +
+                            `"&", ("date_field", ">=", "2019-11-01"), ("date_field", "<=", "2019-11-30"), ` +
+                            `"&", ("date_field", ">=", "2019-12-01"), ("date_field", "<=", "2019-12-31")` +
+                            "]"
+                    ),
+                    description: "October 2019/November 2019/December 2019",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(
+                    referenceMoment,
+                    "date_field",
+                    "date",
+                    ["second_quarter", "this_year", "last_year"],
+                    "previous_period"
+                ),
+                {
+                    domain: new Domain(
+                        "[" +
+                            `"|", ` +
+                            `"&", ("date_field", ">=", "2018-01-01"), ("date_field", "<=", "2018-03-31"), ` +
+                            `"&", ("date_field", ">=", "2019-01-01"), ("date_field", "<=", "2019-03-31")` +
+                            "]"
+                    ),
+                    description: "Q1 2018/Q1 2019",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(
+                    referenceMoment,
+                    "date_field",
+                    "date",
+                    ["this_year", "antepenultimate_year", "this_month", "antepenultimate_month"],
+                    "previous_period"
+                ),
+                {
+                    domain: new Domain(
+                        "[" +
+                            `"|", ` +
+                            `"&", ("date_field", ">=", "2015-02-01"), ("date_field", "<=", "2015-02-28"), ` +
+                            `"|", ` +
+                            `"&", ("date_field", ">=", "2015-12-01"), ("date_field", "<=", "2015-12-31"), ` +
+                            `"|", ` +
+                            `"&", ("date_field", ">=", "2017-02-01"), ("date_field", "<=", "2017-02-28"), ` +
+                            `"&", ("date_field", ">=", "2017-12-01"), ("date_field", "<=", "2017-12-31")` +
+                            "]"
+                    ),
+                    description: "February 2015/December 2015/February 2017/December 2017",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(
+                    referenceMoment,
+                    "date_field",
+                    "date",
+                    ["this_year", "last_year"],
+                    "previous_period"
+                ),
+                {
+                    domain: new Domain(
+                        "[" +
+                            `"|", ` +
+                            `"&", ("date_field", ">=", "2017-01-01"), ("date_field", "<=", "2017-12-31"), ` +
+                            `"&", ("date_field", ">=", "2018-01-01"), ("date_field", "<=", "2018-12-31")` +
+                            "]"
+                    ),
+                    description: "2017/2018",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(
+                    referenceMoment,
+                    "date_field",
+                    "date",
+                    ["second_quarter", "third_quarter", "last_year"],
+                    "previous_period"
+                ),
+                {
+                    domain: new Domain(
+                        "[" +
+                            `"|", ` +
+                            `"&", ("date_field", ">=", "2018-10-01"), ("date_field", "<=", "2018-12-31"), ` +
+                            `"&", ("date_field", ">=", "2019-01-01"), ("date_field", "<=", "2019-03-31")` +
+                            "]"
+                    ),
+                    description: "Q4 2018/Q1 2019",
+                }
+            );
+        }
+    );
+
+    QUnit.test(
+        'construct comparison domain based on datetime field and option "previous_year"',
+        function (assert) {
+            patchDate(2020, 5, 1, 13, 0, 0);
+            const referenceMoment = DateTime.utc();
+            assert.deepEqual(
+                constructDateDomain(
+                    referenceMoment,
+                    "date_field",
+                    "datetime",
+                    ["this_month", "first_quarter", "this_year"],
+                    "previous_year"
+                ),
+                {
+                    domain: new Domain(
+                        "[" +
+                            `"|", ` +
+                            `"&", ("date_field", ">=", "2019-06-01 00:00:00"), ("date_field", "<=", "2019-06-30 23:59:59"), ` +
+                            `"&", ("date_field", ">=", "2019-01-01 00:00:00"), ("date_field", "<=", "2019-03-31 23:59:59")` +
+                            "]"
+                    ),
+                    description: "June 2019/Q1 2019",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(
+                    referenceMoment,
+                    "date_field",
+                    "datetime",
+                    ["second_quarter", "this_year", "last_year"],
+                    "previous_year"
+                ),
+                {
+                    domain: new Domain(
+                        "[" +
+                            `"|", ` +
+                            `"&", ("date_field", ">=", "2018-04-01 00:00:00"), ("date_field", "<=", "2018-06-30 23:59:59"), ` +
+                            `"&", ("date_field", ">=", "2019-04-01 00:00:00"), ("date_field", "<=", "2019-06-30 23:59:59")` +
+                            "]"
+                    ),
+                    description: "Q2 2018/Q2 2019",
+                }
+            );
+            assert.deepEqual(
+                constructDateDomain(
+                    referenceMoment,
+                    "date_field",
+                    "datetime",
+                    ["this_year", "antepenultimate_year", "this_month", "antepenultimate_month"],
+                    "previous_year"
+                ),
+                {
+                    domain: new Domain(
+                        "[" +
+                            `"|", ` +
+                            `"&", ("date_field", ">=", "2017-04-01 00:00:00"), ("date_field", "<=", "2017-04-30 23:59:59"), ` +
+                            `"|", ` +
+                            `"&", ("date_field", ">=", "2017-06-01 00:00:00"), ("date_field", "<=", "2017-06-30 23:59:59"), ` +
+                            `"|", ` +
+                            `"&", ("date_field", ">=", "2019-04-01 00:00:00"), ("date_field", "<=", "2019-04-30 23:59:59"), ` +
+                            `"&", ("date_field", ">=", "2019-06-01 00:00:00"), ("date_field", "<=", "2019-06-30 23:59:59")` +
+                            "]"
+                    ),
+                    description: "April 2017/June 2017/April 2019/June 2019",
+                }
+            );
+        }
+    );
+
+    QUnit.test("Quarter option: custom translation", async function (assert) {
+        patchDate(2020, 5, 1, 13, 0, 0);
+        const referenceMoment = DateTime.utc().setLocale("en");
+        patch(translatedTerms, "add_translations", { Q2: "Deuxième trimestre de l'an de grâce" });
+        assert.deepEqual(
+            constructDateDomain(referenceMoment, "date_field", "date", [
+                "second_quarter",
+                "this_year",
+            ]),
+            {
+                domain: new Domain(
+                    `["&", ("date_field", ">=", "2020-04-01"), ("date_field", "<=", "2020-06-30")]`
+                ),
+                description: "Deuxième trimestre de l'an de grâce 2020",
+            },
+            "Quarter term should be translated"
+        );
+        unpatch(translatedTerms, "add_translations");
+    });
+
+    QUnit.test("Quarter option: right to left", async function (assert) {
+        patchDate(2020, 5, 1, 13, 0, 0);
+        const referenceMoment = DateTime.utc().setLocale("en");
+        patch(
+            localization,
+            "rtl_localization",
+            Object.assign({}, defaultLocalization, { direction: "rtl" })
+        );
+        assert.deepEqual(
+            constructDateDomain(referenceMoment, "date_field", "date", [
+                "second_quarter",
+                "this_year",
+            ]),
+            {
+                domain: new Domain(
+                    `["&", ("date_field", ">=", "2020-04-01"), ("date_field", "<=", "2020-06-30")]`
+                ),
+                description: "2020 Q2",
+            },
+            "Notation should be right to left"
+        );
+        unpatch(localization, "rtl_localization");
+    });
+
+    QUnit.test("Quarter option: custom translation and right to left", async function (assert) {
+        patchDate(2020, 5, 1, 13, 0, 0);
+        const referenceMoment = DateTime.utc().setLocale("en");
+        patch(
+            localization,
+            "rtl_localization",
+            Object.assign({}, defaultLocalization, { direction: "rtl" })
+        );
+        patch(translatedTerms, "add_translations", { Q2: "2e Trimestre" });
+        assert.deepEqual(
+            constructDateDomain(referenceMoment, "date_field", "date", [
+                "second_quarter",
+                "this_year",
+            ]),
+            {
+                domain: new Domain(
+                    `["&", ("date_field", ">=", "2020-04-01"), ("date_field", "<=", "2020-06-30")]`
+                ),
+                description: "2020 2e Trimestre",
+            },
+            "Quarter term should be translated and notation should be right to left"
+        );
+        unpatch(localization, "rtl_localization");
+        unpatch(translatedTerms, "add_translations");
+    });
+
+    QUnit.skip(
+        "Moment.js localization does not affect formatted domain dates",
+        async function (assert) {
+            patchDate(2020, 5, 1, 13, 0, 0);
+            const initialLocale = moment.locale();
+            moment.defineLocale("addoneForTest", {
+                postformat: function (string) {
+                    return string.replace(/\d/g, (match) => (1 + parseInt(match)) % 10);
+                },
+            });
+            const referenceMoment = moment().locale("addoneForTest");
+            assert.deepEqual(
+                constructDateDomain(referenceMoment, "date_field", "date", [
+                    "this_month",
+                    "this_year",
+                ]),
+                {
+                    domain: `["&", ["date_field", ">=", "2020-06-01"], ["date_field", "<=", "2020-06-30"]]`,
+                    description: "June 3131",
+                },
+                "Numbers in domain should not use addoneForTest locale"
+            );
+            moment.locale(initialLocale);
+            moment.updateLocale("addoneForTest", null);
+        }
+    );
+});
diff --git a/addons/web/static/tests/search/with_search_tests.js b/addons/web/static/tests/search/with_search_tests.js
new file mode 100644
index 00000000000..97d18b94b9a
--- /dev/null
+++ b/addons/web/static/tests/search/with_search_tests.js
@@ -0,0 +1,335 @@
+/** @odoo-module **/
+
+import { makeTestEnv } from "@web/../tests/helpers/mock_env";
+import { getFixture, nextTick } from "@web/../tests/helpers/utils";
+import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
+import { ormService } from "@web/core/orm_service";
+import { registry } from "@web/core/registry";
+import { FilterMenu } from "@web/search/filter_menu/filter_menu";
+import { GroupByMenu } from "@web/search/group_by_menu/group_by_menu";
+import { WithSearch } from "@web/search/with_search/with_search";
+import { viewService } from "@web/views/view_service";
+import {
+    getMenuItemTexts,
+    makeWithSearch,
+    toggleFilterMenu,
+    toggleGroupByMenu,
+    toggleMenuItem,
+} from "./helpers";
+
+const { Component, hooks, mount, tags } = owl;
+const { useState } = hooks;
+const { xml } = tags;
+
+const serviceRegistry = registry.category("services");
+
+let serverData;
+
+QUnit.module("Search", (hooks) => {
+    hooks.beforeEach(async () => {
+        serverData = {
+            models: {
+                animal: {
+                    fields: {
+                        birthday: { string: "Birthday", type: "date", store: true },
+                        type: {
+                            string: "Type",
+                            type: "selection",
+                            selection: [
+                                ["omnivorous", "Omnivorous"],
+                                ["herbivorous", "Herbivorous"],
+                                ["carnivorous", "Carnivorous"],
+                            ],
+                            store: true,
+                        },
+                    },
+                },
+            },
+            views: {
+                "animal,false,search": `<search/>`,
+                "animal,1,search": `
+          <search>
+            <filter name="filter" string="True domain" domain="[(1, '=', 1)]"/>
+            <filter name="group_by" context="{ 'group_by': 'name' }"/>
+          </search>
+        `,
+            },
+        };
+        serviceRegistry.add("hotkey", hotkeyService);
+        serviceRegistry.add("orm", ormService);
+        serviceRegistry.add("view", viewService);
+    });
+
+    QUnit.module("WithSearch");
+
+    QUnit.test("simple rendering", async function (assert) {
+        assert.expect(2);
+
+        class TestComponent extends Component {}
+        TestComponent.template = xml`<div class="o_test_component">Test component content</div>`;
+
+        const component = await makeWithSearch({
+            serverData,
+            resModel: "animal",
+            Component: TestComponent,
+        });
+        assert.hasClass(component.el, "o_test_component");
+        assert.strictEqual(component.el.innerText, "Test component content");
+    });
+
+    QUnit.test("search model in sub env", async function (assert) {
+        assert.expect(1);
+
+        class TestComponent extends Component {}
+        TestComponent.template = xml`<div class="o_test_component">Test component content</div>`;
+
+        const component = await makeWithSearch({
+            serverData,
+            resModel: "animal",
+            Component: TestComponent,
+        });
+        assert.ok(component.env.searchModel);
+    });
+
+    QUnit.test(
+        "search query props are passed as props to concrete component",
+        async function (assert) {
+            assert.expect(4);
+
+            class TestComponent extends Component {
+                setup() {
+                    const { context, domain, groupBy, orderBy } = this.props;
+                    assert.deepEqual(context, {
+                        lang: "en",
+                        tz: "taht",
+                        uid: 7,
+                        key: "val",
+                    });
+                    assert.deepEqual(domain, [[0, "=", 1]]);
+                    assert.deepEqual(groupBy, ["birthday"]);
+                    assert.deepEqual(orderBy, ["bar"]);
+                }
+            }
+            TestComponent.template = xml`<div class="o_test_component">Test component content</div>`;
+
+            await makeWithSearch({
+                serverData,
+                resModel: "animal",
+                Component: TestComponent,
+                domain: [[0, "=", 1]],
+                groupBy: ["birthday"],
+                context: { key: "val" },
+                orderBy: ["bar"],
+            });
+        }
+    );
+
+    QUnit.test("do not load search view description by default", async function (assert) {
+        assert.expect(1);
+
+        class TestComponent extends Component {}
+        TestComponent.template = xml`<div class="o_test_component">Test component content</div>`;
+
+        await makeWithSearch({
+            serverData,
+            mockRPC: function (_, args) {
+                if (args.method === "load_views") {
+                    throw new Error("No load_views should be done");
+                }
+            },
+            resModel: "animal",
+            Component: TestComponent,
+        });
+
+        assert.ok(true);
+    });
+
+    QUnit.test(
+        "load search view description if not provided and loadSearchView=true",
+        async function (assert) {
+            assert.expect(1);
+
+            class TestComponent extends Component {}
+            TestComponent.template = xml`<div class="o_test_component">Test component content</div>`;
+
+            await makeWithSearch({
+                serverData,
+                mockRPC: function (_, args) {
+                    if (args.method === "load_views") {
+                        assert.deepEqual(args.kwargs, {
+                            context: {
+                                lang: "en",
+                                tz: "taht",
+                                uid: 7,
+                            },
+                            options: {
+                                action_id: false,
+                                load_filters: false,
+                                toolbar: false,
+                            },
+                            views: [[false, "search"]],
+                        });
+                    }
+                },
+                resModel: "animal",
+                Component: TestComponent,
+                searchViewId: false,
+            });
+        }
+    );
+
+    QUnit.test(
+        "do not load the search view description if provided even if loadSearchView=true",
+        async function (assert) {
+            assert.expect(1);
+
+            class TestComponent extends Component {}
+            TestComponent.template = xml`<div class="o_test_component">Test component content</div>`;
+
+            await makeWithSearch({
+                serverData,
+                mockRPC: function (_, args) {
+                    if (args.method === "load_views") {
+                        throw new Error("No load_views should be done");
+                    }
+                },
+                resModel: "animal",
+                Component: TestComponent,
+                searchViewArch: "<search/>",
+                searchViewFields: {},
+                searchViewId: false,
+            });
+            assert.ok(true);
+        }
+    );
+
+    QUnit.test(
+        "load view description if it is not complete and loadSearchView=true",
+        async function (assert) {
+            assert.expect(1);
+
+            class TestComponent extends Component {}
+            TestComponent.template = xml`<div class="o_test_component">Test component content</div>`;
+
+            await makeWithSearch({
+                serverData,
+                mockRPC: function (_, args) {
+                    if (args.method === "load_views") {
+                        assert.deepEqual(args.kwargs.options, {
+                            action_id: false,
+                            load_filters: true,
+                            toolbar: false,
+                        });
+                    }
+                },
+                resModel: "animal",
+                Component: TestComponent,
+                searchViewArch: "<search/>",
+                searchViewFields: {},
+                searchViewId: true,
+                loadIrFilters: true,
+            });
+        }
+    );
+
+    QUnit.test(
+        "load view description with given id if it is not provided and loadSearchView=true",
+        async function (assert) {
+            assert.expect(3);
+
+            class TestComponent extends Component {}
+            TestComponent.components = { FilterMenu, GroupByMenu };
+            TestComponent.template = xml`
+                <div class="o_test_component">
+                    <FilterMenu/>
+                    <GroupByMenu/>
+                </div>
+            `;
+
+            const component = await makeWithSearch({
+                serverData,
+                mockRPC: function (_, args) {
+                    if (args.method === "load_views") {
+                        assert.deepEqual(args.kwargs.views, [[1, "search"]]);
+                    }
+                },
+                resModel: "animal",
+                Component: TestComponent,
+                searchViewId: 1,
+            });
+            await toggleFilterMenu(component);
+            await assert.ok(getMenuItemTexts(component), ["True Domain"]);
+
+            await toggleGroupByMenu(component);
+            await assert.ok(getMenuItemTexts(component), ["Name"]);
+        }
+    );
+
+    QUnit.test(
+        "toggle a filter render the underlying component with an updated domain",
+        async function (assert) {
+            assert.expect(2);
+
+            class TestComponent extends Component {
+                async willStart() {
+                    assert.deepEqual(this.props.domain, []);
+                }
+                async willUpdateProps(nextProps) {
+                    assert.deepEqual(nextProps.domain, [[1, "=", 1]]);
+                }
+            }
+            TestComponent.components = { FilterMenu };
+            TestComponent.template = xml`
+                <div class="o_test_component">
+                    <FilterMenu/>
+                </div>
+            `;
+
+            const component = await makeWithSearch({
+                serverData,
+                resModel: "animal",
+                Component: TestComponent,
+                searchViewId: 1,
+            });
+            await toggleFilterMenu(component);
+            await toggleMenuItem(component, "True domain");
+        }
+    );
+
+    QUnit.test("react to prop 'domain' changes", async function (assert) {
+        assert.expect(2);
+
+        class TestComponent extends Component {
+            willStart() {
+                assert.deepEqual(this.props.domain, [["type", "=", "carnivorous"]]);
+            }
+            willUpdateProps(nextProps) {
+                assert.deepEqual(nextProps.domain, [["type", "=", "herbivorous"]]);
+            }
+        }
+        TestComponent.template = xml`<div class="o_test_component">Test component content</div>`;
+
+        const env = await makeTestEnv(serverData);
+        const target = getFixture();
+
+        class Parent extends Component {
+            setup() {
+                this.state = useState({
+                    resModel: "animal",
+                    Component: TestComponent,
+                    domain: [["type", "=", "carnivorous"]],
+                });
+            }
+        }
+        Parent.template = xml`<WithSearch t-props="state"/>`;
+        Parent.components = { WithSearch };
+
+        const parent = await mount(Parent, { env, target });
+
+        parent.state.domain = [["type", "=", "herbivorous"]];
+
+        await nextTick();
+
+        parent.destroy();
+    });
+});
diff --git a/addons/web/static/tests/views/helpers.js b/addons/web/static/tests/views/helpers.js
new file mode 100644
index 00000000000..e07cfb07a25
--- /dev/null
+++ b/addons/web/static/tests/views/helpers.js
@@ -0,0 +1,84 @@
+/** @odoo-module **/
+
+import { getFixture } from "@web/../tests/helpers/utils";
+import { makeTestEnv } from "@web/../tests/helpers/mock_env";
+import { registerCleanup } from "@web/../tests/helpers/cleanup";
+import { View } from "@web/views/view";
+import { _fieldsViewGet } from "../helpers/mock_server";
+import { addLegacyMockEnvironment } from "../webclient/helpers";
+
+const { mount } = owl;
+
+/**
+ * @typedef {{
+ *  serverData: Object,
+ *  mockRPC?: Function,
+ *  type: string,
+ *  resModel: string,
+ *  [prop:string]: any
+ * }} MakeViewParams
+ */
+
+/**
+ * @param {MakeViewParams} params
+ * @returns {owl.Component}
+ */
+export async function makeView(params) {
+    const serverData = params.serverData;
+    const mockRPC = params.mockRPC;
+    const legacyParams = params.legacyParams || {};
+    const props = Object.assign({}, params);
+    delete props.serverData;
+    delete props.mockRPC;
+    delete props.legacyParams;
+
+    const env = await makeTestEnv({ serverData, mockRPC });
+    const defaultFields = serverData.models[props.resModel].fields;
+    if (props.arch) {
+        if (!props.fields) {
+            props.fields = Object.assign({}, defaultFields);
+            // write the field name inside the field description (as done by fields_get)
+            for (const fieldName in props.fields) {
+                props.fields[fieldName].name = fieldName;
+            }
+        }
+        const fvg = _fieldsViewGet({
+            arch: props.arch,
+            modelName: props.resModel,
+            fields: props.fields,
+            context: props.context || {},
+            models: serverData.models,
+        });
+        props.arch = fvg.arch;
+        props.fields = Object.assign({}, props.fields, fvg.fields);
+        props.searchViewArch = props.searchViewArch || "<search/>";
+        props.searchViewFields = props.searchViewFields || Object.assign({}, props.fields);
+    }
+
+    /** Legacy Environment, for compatibility sakes
+     *  Remove this as soon as we drop the legacy support
+     */
+    const models = params.serverData.models;
+    if (legacyParams && legacyParams.withLegacyMockServer && models) {
+        legacyParams.models = Object.assign({}, 0);
+        // In lagacy, data may not be sole models, but can contain some other variables
+        // So we filter them out for our WOWL mockServer
+        Object.entries(legacyParams.models).forEach(([k, v]) => {
+            if (!(v instanceof Object) || !("fields" in v)) {
+                delete models[k];
+            }
+        });
+    }
+    addLegacyMockEnvironment(env, legacyParams);
+    //
+
+    const target = getFixture();
+    const view = await mount(View, { env, props, target });
+
+    registerCleanup(() => view.destroy());
+
+    const withSearch = Object.values(view.__owl__.children)[0];
+    const concreteView = Object.values(withSearch.__owl__.children)[0];
+
+    return concreteView;
+}
diff --git a/addons/web/static/tests/views/view_tests.js b/addons/web/static/tests/views/view_tests.js
new file mode 100644
index 00000000000..9dcc503e236
--- /dev/null
+++ b/addons/web/static/tests/views/view_tests.js
@@ -0,0 +1,1109 @@
+/** @odoo-module **/
+
+import { getFixture, nextTick, patchWithCleanup } from "@web/../tests/helpers/utils";
+import { makeTestEnv } from "@web/../tests/helpers/mock_env";
+import { ormService } from "@web/core/orm_service";
+import { registerCleanup } from "@web/../tests/helpers/cleanup";
+import { registry } from "@web/core/registry";
+import { View } from "@web/views/view";
+import { viewService } from "@web/views/view_service";
+
+const { Component, mount, hooks, tags } = owl;
+const { useState } = hooks;
+const { xml } = tags;
+
+const serviceRegistry = registry.category("services");
+const viewRegistry = registry.category("views");
+
+async function makeView(params) {
+    const serverData = params.serverData;
+    const mockRPC = params.mockRPC;
+    const env = await makeTestEnv({ serverData, mockRPC });
+
+    // we don't want "fields" to be added here !!!
+    const props = Object.assign({}, params);
+    delete props.serverData;
+    delete props.mockRPC;
+
+    const target = getFixture();
+
+    const view = await mount(View, { env, props, target });
+
+    registerCleanup(() => view.destroy());
+
+    const withSearch = Object.values(view.__owl__.children)[0];
+    const concreteView = Object.values(withSearch.__owl__.children)[0];
+
+    return concreteView;
+}
+
+let serverData;
+
+QUnit.module("Views", (hooks) => {
+    hooks.beforeEach(async () => {
+        serverData = {
+            models: {
+                animal: {
+                    fields: {
+                        birthday: { string: "Birthday", type: "date", store: true },
+                        type: {
+                            string: "Type",
+                            type: "selection",
+                            selection: [
+                                ["omnivorous", "Omnivorous"],
+                                ["herbivorous", "Herbivorous"],
+                                ["carnivorous", "Carnivorous"],
+                            ],
+                            store: true,
+                        },
+                    },
+                    filters: [
+                        // should be a model!
+                        {
+                            context: "{}",
+                            domain: "[('animal', 'ilike', 'o')]",
+                            id: 7,
+                            is_default: true,
+                            name: "My favorite",
+                            sort: "[]",
+                            user_id: [2, "Mitchell Admin"],
+                        },
+                    ],
+                },
+            },
+            views: {
+                "animal,false,toy": `<toy>Arch content (id=false)</toy>`,
+                "animal,1,toy": `<toy>Arch content (id=1)</toy>`,
+                "animal,2,toy": `<toy js_class="toy_imp">Arch content (id=2)</toy>`,
+                "animal,false,other": `<other/>`,
+                "animal,false,search": `<search/>`,
+                "animal,1,search": `
+                    <search>
+                        <filter name="filter" domain="[(1, '=', 1)]"/>
+                        <filter name="group_by" context="{ 'group_by': 'name' }"/>
+                    </search>
+                `,
+            },
+        };
+
+        class ToyView extends Component {
+            setup() {
+                this.class = "o_toy_view";
+                this.template = xml`${this.props.arch}`;
+            }
+        }
+        ToyView.template = xml`<div t-att-class="class"><t t-call="{{ template }}"/></div>`;
+        ToyView.type = "toy";
+
+        class ToyViewImp extends ToyView {
+            setup() {
+                super.setup();
+                this.class = "o_toy_view_imp";
+            }
+        }
+
+        viewRegistry.add("toy", ToyView);
+        viewRegistry.add("toy_imp", ToyViewImp);
+
+        serviceRegistry.add("orm", ormService);
+        serviceRegistry.add("view", viewService);
+    });
+
+    QUnit.module("View component");
+
+    ////////////////////////////////////////////////////////////////////////////
+    // load_views
+    ////////////////////////////////////////////////////////////////////////////
+
+    QUnit.test("simple rendering", async function (assert) {
+        assert.expect(10);
+
+        const ToyView = viewRegistry.get("toy");
+        patchWithCleanup(ToyView.prototype, {
+            setup() {
+                this._super();
+                const { arch, fields, info } = this.props;
+                assert.strictEqual(arch, serverData.views["animal,false,toy"]);
+                assert.deepEqual(fields, serverData.models.animal.fields);
+                assert.strictEqual(info.actionMenus, undefined);
+                assert.strictEqual(info.viewId, false);
+            },
+        });
+
+        const view = await makeView({
+            serverData,
+            mockRPC: (_, args) => {
+                assert.strictEqual(args.model, "animal");
+                assert.strictEqual(args.method, "load_views");
+                assert.deepEqual(args.kwargs.views, [[false, "toy"]]);
+                assert.deepEqual(args.kwargs.options, {
+                    action_id: false,
+                    load_filters: false,
+                    toolbar: false,
+                });
+            },
+            resModel: "animal",
+            type: "toy",
+        });
+        assert.hasClass(view.el, "o_action o_view_controller o_toy_view");
+        assert.strictEqual(view.el.innerHTML, serverData.views["animal,false,toy"]);
+    });
+
+    QUnit.test("rendering with given viewId", async function (assert) {
+        assert.expect(8);
+
+        const ToyView = viewRegistry.get("toy");
+        patchWithCleanup(ToyView.prototype, {
+            setup() {
+                this._super();
+                const { arch, fields, info } = this.props;
+                assert.strictEqual(arch, serverData.views["animal,1,toy"]);
+                assert.deepEqual(fields, serverData.models.animal.fields);
+                assert.strictEqual(info.actionMenus, undefined);
+                assert.strictEqual(info.viewId, 1);
+            },
+        });
+
+        const view = await makeView({
+            serverData,
+            mockRPC: (_, args) => {
+                assert.deepEqual(args.kwargs.views, [[1, "toy"]]);
+                assert.deepEqual(args.kwargs.options, {
+                    action_id: false,
+                    load_filters: false,
+                    toolbar: false,
+                });
+            },
+            resModel: "animal",
+            type: "toy",
+            viewId: 1,
+        });
+        assert.hasClass(view.el, "o_toy_view");
+        assert.strictEqual(view.el.innerHTML, serverData.views["animal,1,toy"]);
+    });
+
+    QUnit.test("rendering with given 'views' param", async function (assert) {
+        assert.expect(8);
+
+        const ToyView = viewRegistry.get("toy");
+        patchWithCleanup(ToyView.prototype, {
+            setup() {
+                this._super();
+                const { arch, fields, info } = this.props;
+                assert.strictEqual(arch, serverData.views["animal,1,toy"]);
+                assert.deepEqual(fields, serverData.models.animal.fields);
+                assert.strictEqual(info.actionMenus, undefined);
+                assert.strictEqual(info.viewId, 1);
+            },
+        });
+
+        const view = await makeView({
+            serverData,
+            mockRPC: (_, args) => {
+                assert.deepEqual(args.kwargs.views, [[1, "toy"]]);
+                assert.deepEqual(args.kwargs.options, {
+                    action_id: false,
+                    load_filters: false,
+                    toolbar: false,
+                });
+            },
+            resModel: "animal",
+            type: "toy",
+            views: [[1, "toy"]],
+        });
+        assert.hasClass(view.el, "o_toy_view");
+        assert.strictEqual(view.el.innerHTML, serverData.views["animal,1,toy"]);
+    });
+
+    QUnit.test(
+        "rendering with given 'views' param not containing view id",
+        async function (assert) {
+            assert.expect(8);
+
+            const ToyView = viewRegistry.get("toy");
+            patchWithCleanup(ToyView.prototype, {
+                setup() {
+                    this._super();
+                    const { arch, fields, info } = this.props;
+                    assert.strictEqual(arch, serverData.views["animal,false,toy"]);
+                    assert.deepEqual(fields, serverData.models.animal.fields);
+                    assert.strictEqual(info.actionMenus, undefined);
+                    assert.strictEqual(info.viewId, false);
+                },
+            });
+
+            const view = await makeView({
+                serverData,
+                mockRPC: (_, args) => {
+                    assert.deepEqual(args.kwargs.views, [
+                        [false, "other"],
+                        [false, "toy"],
+                    ]);
+                    assert.deepEqual(args.kwargs.options, {
+                        action_id: false,
+                        load_filters: false,
+                        toolbar: false,
+                    });
+                },
+                resModel: "animal",
+                type: "toy",
+                views: [[false, "other"]],
+            });
+            assert.hasClass(view.el, "o_toy_view");
+            assert.strictEqual(view.el.innerHTML, serverData.views["animal,false,toy"]);
+        }
+    );
+
+    QUnit.test("viewId defined as prop and in 'views' prop", async function (assert) {
+        assert.expect(8);
+
+        const ToyView = viewRegistry.get("toy");
+        patchWithCleanup(ToyView.prototype, {
+            setup() {
+                this._super();
+                const { arch, fields, info } = this.props;
+                assert.strictEqual(arch, serverData.views["animal,1,toy"]);
+                assert.deepEqual(fields, serverData.models.animal.fields);
+                assert.strictEqual(info.actionMenus, undefined);
+                assert.strictEqual(info.viewId, 1);
+            },
+        });
+
+        const view = await makeView({
+            serverData,
+            mockRPC: (_, args) => {
+                assert.deepEqual(args.kwargs.views, [
+                    [1, "toy"],
+                    [false, "other"],
+                ]);
+                assert.deepEqual(args.kwargs.options, {
+                    action_id: false,
+                    load_filters: false,
+                    toolbar: false,
+                });
+            },
+            resModel: "animal",
+            type: "toy",
+            viewId: 1,
+            views: [
+                [3, "toy"],
+                [false, "other"],
+            ],
+        });
+        assert.hasClass(view.el, "o_toy_view");
+        assert.strictEqual(view.el.innerHTML, serverData.views["animal,1,toy"]);
+    });
+
+    QUnit.test("rendering with given arch and fields", async function (assert) {
+        assert.expect(6);
+
+        const ToyView = viewRegistry.get("toy");
+        patchWithCleanup(ToyView.prototype, {
+            setup() {
+                this._super();
+                const { arch, fields, info } = this.props;
+                assert.strictEqual(arch, `<toy>Specific arch content</toy>`);
+                assert.deepEqual(fields, {});
+                assert.strictEqual(info.actionMenus, undefined);
+                assert.strictEqual(info.viewId, undefined);
+            },
+        });
+
+        const view = await makeView({
+            serverData,
+            mockRPC: () => {
+                throw new Error("no RPC expected");
+            },
+            resModel: "animal",
+            type: "toy",
+            arch: `<toy>Specific arch content</toy>`,
+            fields: {},
+        });
+        assert.hasClass(view.el, "o_toy_view");
+        assert.strictEqual(view.el.innerHTML, `<toy>Specific arch content</toy>`);
+    });
+
+    QUnit.test("rendering with loadActionMenus='true'", async function (assert) {
+        assert.expect(8);
+
+        const ToyView = viewRegistry.get("toy");
+        patchWithCleanup(ToyView.prototype, {
+            setup() {
+                this._super();
+                const { arch, fields, info } = this.props;
+                assert.strictEqual(arch, serverData.views["animal,false,toy"]);
+                assert.deepEqual(fields, serverData.models.animal.fields);
+                assert.deepEqual(info.actionMenus, {});
+                assert.strictEqual(info.viewId, false);
+            },
+        });
+
+        const view = await makeView({
+            serverData,
+            mockRPC: (_, args) => {
+                // the rpc is done for fields
+                assert.deepEqual(args.kwargs.views, [[false, "toy"]]);
+                assert.deepEqual(args.kwargs.options, {
+                    action_id: false,
+                    load_filters: false,
+                    toolbar: true,
+                });
+            },
+            resModel: "animal",
+            type: "toy",
+            loadActionMenus: true,
+        });
+        assert.hasClass(view.el, "o_toy_view");
+        assert.strictEqual(view.el.innerHTML, serverData.views["animal,false,toy"]);
+    });
+
+    QUnit.test(
+        "rendering with given arch, fields, and loadActionMenus='true'",
+        async function (assert) {
+            assert.expect(8);
+
+            const ToyView = viewRegistry.get("toy");
+            patchWithCleanup(ToyView.prototype, {
+                setup() {
+                    this._super();
+                    const { arch, fields, info } = this.props;
+                    assert.strictEqual(arch, `<toy>Specific arch content</toy>`);
+                    assert.deepEqual(fields, {});
+                    assert.deepEqual(info.actionMenus, {});
+                    assert.strictEqual(info.viewId, false);
+                },
+            });
+
+            const view = await makeView({
+                serverData,
+                mockRPC: (_, args) => {
+                    // the rpc is done for fields
+                    assert.deepEqual(args.kwargs.views, [[false, "toy"]]);
+                    assert.deepEqual(args.kwargs.options, {
+                        action_id: false,
+                        load_filters: false,
+                        toolbar: true,
+                    });
+                },
+                resModel: "animal",
+                type: "toy",
+                arch: `<toy>Specific arch content</toy>`,
+                fields: {},
+                loadActionMenus: true,
+            });
+            assert.hasClass(view.el, "o_toy_view");
+            assert.strictEqual(view.el.innerHTML, `<toy>Specific arch content</toy>`);
+        }
+    );
+
+    QUnit.test(
+        "rendering with given arch, fields, actionMenus, and loadActionMenus='true'",
+        async function (assert) {
+            assert.expect(6);
+
+            const ToyView = viewRegistry.get("toy");
+            patchWithCleanup(ToyView.prototype, {
+                setup() {
+                    this._super();
+                    const { arch, fields, info } = this.props;
+                    assert.strictEqual(arch, `<toy>Specific arch content</toy>`);
+                    assert.deepEqual(fields, {});
+                    assert.deepEqual(info.actionMenus, {});
+                    assert.strictEqual(info.viewId, undefined);
+                },
+            });
+
+            const view = await makeView({
+                serverData,
+                mockRPC: () => {
+                    throw new Error("no RPC expected");
+                },
+                resModel: "animal",
+                type: "toy",
+                arch: `<toy>Specific arch content</toy>`,
+                fields: {},
+                actionMenus: {
+                    /** ... */
+                },
+                loadActionMenus: true,
+            });
+            assert.hasClass(view.el, "o_toy_view");
+            assert.strictEqual(view.el.innerHTML, `<toy>Specific arch content</toy>`);
+        }
+    );
+
+    QUnit.test("rendering with given searchViewId", async function (assert) {
+        assert.expect(8);
+
+        const ToyView = viewRegistry.get("toy");
+        patchWithCleanup(ToyView.prototype, {
+            setup() {
+                this._super();
+                const {
+                    irFilters,
+                    searchViewArch,
+                    searchViewFields,
+                    searchViewId,
+                } = this.props.info;
+                assert.strictEqual(searchViewArch, serverData.views["animal,false,search"]);
+                assert.deepEqual(searchViewFields, serverData.models.animal.fields);
+                assert.strictEqual(searchViewId, false);
+                assert.strictEqual(irFilters, undefined);
+            },
+        });
+
+        const view = await makeView({
+            serverData,
+            mockRPC: (_, args) => {
+                // the rpc is done for fields
+                assert.deepEqual(args.kwargs.views, [
+                    [false, "toy"],
+                    [false, "search"],
+                ]);
+                assert.deepEqual(args.kwargs.options, {
+                    action_id: false,
+                    load_filters: false,
+                    toolbar: false,
+                });
+            },
+            resModel: "animal",
+            type: "toy",
+            searchViewId: false,
+        });
+        assert.hasClass(view.el, "o_toy_view");
+        assert.strictEqual(view.el.innerText, "Arch content (id=false)");
+    });
+
+    QUnit.test(
+        "rendering with given arch, fields, searchViewId, searchViewArch, and searchViewFields",
+        async function (assert) {
+            assert.expect(6);
+
+            const ToyView = viewRegistry.get("toy");
+            patchWithCleanup(ToyView.prototype, {
+                setup() {
+                    this._super();
+                    const {
+                        irFilters,
+                        searchViewArch,
+                        searchViewFields,
+                        searchViewId,
+                    } = this.props.info;
+                    assert.strictEqual(searchViewArch, `<search/>`);
+                    assert.deepEqual(searchViewFields, {});
+                    assert.strictEqual(searchViewId, false);
+                    assert.strictEqual(irFilters, undefined);
+                },
+            });
+
+            const view = await makeView({
+                serverData,
+                mockRPC: () => {
+                    throw new Error("no RPC expected");
+                },
+                resModel: "animal",
+                type: "toy",
+                arch: `<toy>Specific arch content</toy>`,
+                fields: {},
+                searchViewId: false,
+                searchViewArch: `<search/>`,
+                searchViewFields: {},
+            });
+            assert.hasClass(view.el, "o_toy_view");
+            assert.strictEqual(view.el.innerText, "Specific arch content");
+        }
+    );
+
+    QUnit.test(
+        "rendering with given arch, fields, searchViewArch, and searchViewFields",
+        async function (assert) {
+            assert.expect(6);
+
+            const ToyView = viewRegistry.get("toy");
+            patchWithCleanup(ToyView.prototype, {
+                setup() {
+                    this._super();
+                    const {
+                        irFilters,
+                        searchViewArch,
+                        searchViewFields,
+                        searchViewId,
+                    } = this.props.info;
+                    assert.strictEqual(searchViewArch, `<search/>`);
+                    assert.deepEqual(searchViewFields, {});
+                    assert.strictEqual(searchViewId, undefined);
+                    assert.strictEqual(irFilters, undefined);
+                },
+            });
+
+            const view = await makeView({
+                serverData,
+                mockRPC: () => {
+                    throw new Error("no RPC expected");
+                },
+                resModel: "animal",
+                type: "toy",
+                arch: `<toy>Specific arch content</toy>`,
+                fields: {},
+                searchViewArch: `<search/>`,
+                searchViewFields: {},
+            });
+            assert.hasClass(view.el, "o_toy_view");
+            assert.strictEqual(view.el.innerText, "Specific arch content");
+        }
+    );
+
+    QUnit.test(
+        "rendering with given arch, fields, searchViewId, searchViewArch, searchViewFields, and loadIrFilters='true'",
+        async function (assert) {
+            assert.expect(8);
+
+            const ToyView = viewRegistry.get("toy");
+            patchWithCleanup(ToyView.prototype, {
+                setup() {
+                    this._super();
+                    const {
+                        irFilters,
+                        searchViewArch,
+                        searchViewFields,
+                        searchViewId,
+                    } = this.props.info;
+                    assert.strictEqual(searchViewArch, `<search/>`);
+                    assert.deepEqual(searchViewFields, {});
+                    assert.strictEqual(searchViewId, false);
+                    assert.deepEqual(irFilters, serverData.models.animal.filters);
+                },
+            });
+
+            const view = await makeView({
+                serverData,
+                mockRPC: (_, args) => {
+                    // the rpc is done for fields
+                    assert.deepEqual(args.kwargs.views, [
+                        [false, "toy"],
+                        [false, "search"],
+                    ]);
+                    assert.deepEqual(args.kwargs.options, {
+                        action_id: false,
+                        load_filters: true,
+                        toolbar: false,
+                    });
+                },
+                resModel: "animal",
+                type: "toy",
+                arch: `<toy>Specific arch content</toy>`,
+                fields: {},
+                searchViewId: false,
+                searchViewArch: `<search/>`,
+                searchViewFields: {},
+                loadIrFilters: true,
+            });
+            assert.hasClass(view.el, "o_toy_view");
+            assert.strictEqual(view.el.innerText, "Specific arch content");
+        }
+    );
+
+    QUnit.test(
+        "rendering with given arch, fields, searchViewId, searchViewArch, searchViewFields, irFilters, and loadIrFilters='true'",
+        async function (assert) {
+            assert.expect(6);
+            const irFilters = [
+                {
+                    context: "{}",
+                    domain: "[]",
+                    id: 1,
+                    is_default: false,
+                    name: "My favorite",
+                    sort: "[]",
+                    user_id: [2, "Mitchell Admin"],
+                },
+            ];
+
+            const ToyView = viewRegistry.get("toy");
+            patchWithCleanup(ToyView.prototype, {
+                setup() {
+                    this._super();
+                    const {
+                        irFilters,
+                        searchViewArch,
+                        searchViewFields,
+                        searchViewId,
+                    } = this.props.info;
+                    assert.strictEqual(searchViewArch, `<search/>`);
+                    assert.deepEqual(searchViewFields, {});
+                    assert.strictEqual(searchViewId, undefined);
+                    assert.deepEqual(irFilters, irFilters);
+                },
+            });
+
+            const view = await makeView({
+                serverData,
+                mockRPC: () => {
+                    throw new Error("no RPC expected");
+                },
+                resModel: "animal",
+                type: "toy",
+                arch: `<toy>Specific arch content</toy>`,
+                fields: {},
+                searchViewArch: `<search/>`,
+                searchViewFields: {},
+                loadIrFilters: true,
+                irFilters,
+            });
+            assert.hasClass(view.el, "o_toy_view");
+            assert.strictEqual(view.el.innerText, "Specific arch content");
+        }
+    );
+
+    ////////////////////////////////////////////////////////////////////////////
+    // js_class
+    ////////////////////////////////////////////////////////////////////////////
+
+    QUnit.test("rendering with given jsClass", async function (assert) {
+        assert.expect(4);
+        const view = await makeView({
+            serverData,
+            mockRPC: (_, args) => {
+                assert.deepEqual(args.kwargs.views, [[false, "toy"]]);
+                assert.deepEqual(args.kwargs.options, {
+                    action_id: false,
+                    load_filters: false,
+                    toolbar: false,
+                });
+            },
+            resModel: "animal",
+            type: "toy_imp",
+        });
+        assert.hasClass(view.el, "o_toy_view_imp");
+        assert.strictEqual(view.el.innerText, "Arch content (id=false)");
+    });
+
+    QUnit.test("rendering with loaded arch attribute 'js_class'", async function (assert) {
+        assert.expect(4);
+        const view = await makeView({
+            serverData,
+            mockRPC: (_, args) => {
+                assert.deepEqual(args.kwargs.views, [[2, "toy"]]);
+                assert.deepEqual(args.kwargs.options, {
+                    action_id: false,
+                    load_filters: false,
+                    toolbar: false,
+                });
+            },
+            resModel: "animal",
+            type: "toy",
+            viewId: 2,
+        });
+        assert.hasClass(view.el, "o_toy_view_imp");
+        assert.strictEqual(view.el.innerText, "Arch content (id=2)");
+    });
+
+    QUnit.test("rendering with given arch attribute 'js_class'", async function (assert) {
+        assert.expect(2);
+        const view = await makeView({
+            serverData,
+            mockRPC: () => {
+                throw new Error("no RPC expected");
+            },
+            resModel: "animal",
+            type: "toy",
+            arch: `<toy js_class="toy_imp">Specific arch content for specific class</toy>`,
+            fields: {},
+        });
+        assert.hasClass(view.el, "o_toy_view_imp");
+        assert.strictEqual(view.el.innerText, "Specific arch content for specific class");
+    });
+
+    QUnit.test(
+        "rendering with loaded arch attribute 'js_class' and given jsClass",
+        async function (assert) {
+            assert.expect(3);
+
+            class ToyView2 extends Component {}
+            ToyView2.template = xml`<div class="o_toy_view_2"/>`;
+            ToyView2.type = "toy";
+            viewRegistry.add("toy_2", ToyView2);
+
+            const view = await makeView({
+                serverData,
+                mockRPC: (_, args) => {
+                    assert.deepEqual(args.kwargs.views, [[2, "toy"]]);
+                    assert.deepEqual(args.kwargs.options, {
+                        action_id: false,
+                        load_filters: false,
+                        toolbar: false,
+                    });
+                },
+                resModel: "animal",
+                type: "toy_2",
+                viewId: 2,
+            });
+            assert.hasClass(view.el, "o_toy_view_imp", "jsClass from arch prefered");
+        }
+    );
+
+    QUnit.test(
+        "rendering with given arch attribute 'js_class' and given jsClass",
+        async function (assert) {
+            assert.expect(1);
+
+            class ToyView2 extends Component {}
+            ToyView2.template = xml`<div class="o_toy_view_2"/>`;
+            ToyView2.type = "toy";
+            viewRegistry.add("toy_2", ToyView2);
+
+            const view = await makeView({
+                serverData,
+                mockRPC: () => {
+                    throw new Error("no RPC expected");
+                },
+                resModel: "animal",
+                type: "toy_2",
+                arch: `<toy js_class="toy_imp"/>`,
+                fields: {},
+            });
+            assert.hasClass(view.el, "o_toy_view_imp", "jsClass from arch prefered");
+        }
+    );
+
+    ////////////////////////////////////////////////////////////////////////////
+    // props validation
+    ////////////////////////////////////////////////////////////////////////////
+
+    QUnit.test("'resModel' must be passed as prop", async function (assert) {
+        assert.expect(2);
+        try {
+            await makeView({ serverData });
+        } catch (error) {
+            assert.step(error.message);
+        }
+        assert.verifySteps([`View props should have a "resModel" key`]);
+    });
+
+    QUnit.test("'type' must be passed as prop", async function (assert) {
+        assert.expect(2);
+        try {
+            await makeView({ serverData, resModel: "animal" });
+        } catch (error) {
+            assert.step(error.message);
+        }
+        assert.verifySteps([`View props should have a "type" key`]);
+    });
+
+    QUnit.test("'arch' cannot be passed as prop alone", async function (assert) {
+        assert.expect(2);
+        try {
+            await makeView({ serverData, resModel: "animal", type: "toy", arch: "<toy/>" });
+        } catch (error) {
+            assert.step(error.message);
+        }
+        assert.verifySteps([`"arch" and "fields" props must be given together`]);
+    });
+
+    QUnit.test("'fields' cannot be passed as prop alone", async function (assert) {
+        assert.expect(2);
+        try {
+            await makeView({ serverData, resModel: "animal", type: "toy", fields: {} });
+        } catch (error) {
+            assert.step(error.message);
+        }
+        assert.verifySteps([`"arch" and "fields" props must be given together`]);
+    });
+
+    QUnit.test("'searchViewArch' cannot be passed as prop alone", async function (assert) {
+        assert.expect(2);
+        try {
+            await makeView({
+                serverData,
+                resModel: "animal",
+                type: "toy",
+                searchViewArch: "<toy/>",
+            });
+        } catch (error) {
+            assert.step(error.message);
+        }
+        assert.verifySteps([
+            `"searchViewArch" and "searchViewFields" props must be given together`,
+        ]);
+    });
+
+    QUnit.test("'searchViewFields' cannot be passed as prop alone", async function (assert) {
+        assert.expect(2);
+        try {
+            await makeView({ serverData, resModel: "animal", type: "toy", searchViewFields: {} });
+        } catch (error) {
+            assert.step(error.message);
+        }
+        assert.verifySteps([
+            `"searchViewArch" and "searchViewFields" props must be given together`,
+        ]);
+    });
+
+    ////////////////////////////////////////////////////////////////////////////
+    // props
+    ////////////////////////////////////////////////////////////////////////////
+
+    QUnit.test(
+        "search query props are passed as props to concrete view (default search arch)",
+        async function (assert) {
+            assert.expect(4);
+
+            class ToyView extends Component {
+                setup() {
+                    const { context, domain, groupBy, orderBy } = this.props;
+                    assert.deepEqual(context, {
+                        lang: "en",
+                        tz: "taht",
+                        uid: 7,
+                        key: "val",
+                    });
+                    assert.deepEqual(domain, [[0, "=", 1]]);
+                    assert.deepEqual(groupBy, ["birthday"]);
+                    assert.deepEqual(orderBy, ["bar"]);
+                }
+            }
+            ToyView.template = xml`<div/>`;
+            ToyView.type = "toy";
+
+            viewRegistry.add("toy", ToyView, { force: true });
+
+            await makeView({
+                serverData,
+                resModel: "animal",
+                type: "toy",
+                domain: [[0, "=", 1]],
+                groupBy: ["birthday"],
+                context: { key: "val" },
+                orderBy: ["bar"],
+            });
+        }
+    );
+
+    QUnit.test("empty prop 'noContentHelp'", async function (assert) {
+        assert.expect(1);
+
+        class ToyView extends Component {
+            setup() {
+                assert.strictEqual(this.props.info.noContentHelp, undefined);
+            }
+        }
+        ToyView.template = xml`<div/>`;
+        ToyView.type = "toy";
+        viewRegistry.add("toy", ToyView, { force: true });
+
+        await makeView({ serverData, resModel: "animal", type: "toy", noContentHelp: "  " });
+    });
+
+    QUnit.test("non empty prop 'noContentHelp'", async function (assert) {
+        assert.expect(1);
+
+        class ToyView extends Component {
+            setup() {
+                assert.strictEqual(this.props.info.noContentHelp, "<div>Help</div>");
+            }
+        }
+        ToyView.template = xml`<div/>`;
+        ToyView.type = "toy";
+        viewRegistry.add("toy", ToyView, { force: true });
+
+        await makeView({
+            serverData,
+            resModel: "animal",
+            type: "toy",
+            noContentHelp: "<div>Help</div>",
+        });
+    });
+
+    QUnit.test("useSampleModel false by default", async function (assert) {
+        assert.expect(1);
+
+        class ToyView extends Component {
+            setup() {
+                assert.strictEqual(this.props.useSampleModel, false);
+            }
+        }
+        ToyView.template = xml`<div/>`;
+        ToyView.type = "toy";
+        viewRegistry.add("toy", ToyView, { force: true });
+
+        await makeView({ serverData, resModel: "animal", type: "toy" });
+    });
+
+    QUnit.test("sample='1' on arch", async function (assert) {
+        assert.expect(1);
+
+        class ToyView extends Component {
+            setup() {
+                assert.strictEqual(this.props.useSampleModel, true);
+            }
+        }
+        ToyView.template = xml`<div/>`;
+        ToyView.type = "toy";
+        viewRegistry.add("toy", ToyView, { force: true });
+
+        await makeView({
+            serverData,
+            resModel: "animal",
+            type: "toy",
+            arch: `<toy sample="1"/>`,
+            fields: {},
+        });
+    });
+
+    QUnit.test("sample='0' on arch and useSampleModel=true", async function (assert) {
+        assert.expect(1);
+
+        class ToyView extends Component {
+            setup() {
+                assert.strictEqual(this.props.useSampleModel, true);
+            }
+        }
+        ToyView.template = xml`<div/>`;
+        ToyView.type = "toy";
+        viewRegistry.add("toy", ToyView, { force: true });
+
+        await makeView({
+            serverData,
+            resModel: "animal",
+            type: "toy",
+            useSampleModel: true,
+            arch: `<toy sample="0"/>`,
+            fields: {},
+        });
+    });
+
+    QUnit.test("sample='1' on arch and useSampleModel=false", async function (assert) {
+        assert.expect(1);
+
+        class ToyView extends Component {
+            setup() {
+                assert.strictEqual(this.props.useSampleModel, false);
+            }
+        }
+        ToyView.template = xml`<div/>`;
+        ToyView.type = "toy";
+        viewRegistry.add("toy", ToyView, { force: true });
+
+        await makeView({
+            serverData,
+            resModel: "animal",
+            type: "toy",
+            useSampleModel: false,
+            arch: `<toy sample="1"/>`,
+            fields: {},
+        });
+    });
+
+    QUnit.test("useSampleModel=true", async function (assert) {
+        assert.expect(1);
+
+        class ToyView extends Component {
+            setup() {
+                assert.strictEqual(this.props.useSampleModel, true);
+            }
+        }
+        ToyView.template = xml`<div/>`;
+        ToyView.type = "toy";
+        viewRegistry.add("toy", ToyView, { force: true });
+
+        await makeView({ serverData, resModel: "animal", type: "toy", useSampleModel: true });
+    });
+
+    QUnit.test("rendering with given prop", async function (assert) {
+        assert.expect(1);
+
+        class ToyView extends Component {
+            setup() {
+                assert.strictEqual(this.props.specificProp, "specificProp");
+            }
+        }
+        ToyView.template = xml`<div/>`;
+        ToyView.type = "toy";
+        viewRegistry.add("toy", ToyView, { force: true });
+
+        await makeView({
+            serverData,
+            resModel: "animal",
+            type: "toy",
+            specificProp: "specificProp",
+        });
+    });
+
+    QUnit.test(
+        "search query props are passed as props to concrete view (specific search arch)",
+        async function (assert) {
+            assert.expect(4);
+
+            class ToyView extends Component {
+                setup() {
+                    const { context, domain, groupBy, orderBy } = this.props;
+                    assert.deepEqual(context, {
+                        lang: "en",
+                        tz: "taht",
+                        uid: 7,
+                    });
+                    assert.deepEqual(domain, ["&", [0, "=", 1], [1, "=", 1]]);
+                    assert.deepEqual(groupBy, ["name"]);
+                    assert.deepEqual(orderBy, ["bar"]);
+                }
+            }
+            ToyView.template = xml`<div/>`;
+            ToyView.type = "toy";
+            viewRegistry.add("toy", ToyView, { force: true });
+
+            await makeView({
+                serverData,
+                type: "toy",
+                resModel: "animal",
+                searchViewId: 1,
+                domain: [[0, "=", 1]],
+                groupBy: ["birthday"],
+                context: { search_default_filter: 1, search_default_group_by: 1 },
+                orderBy: ["bar"],
+            });
+        }
+    );
+
+    ////////////////////////////////////////////////////////////////////////////
+    // update props
+    ////////////////////////////////////////////////////////////////////////////
+
+    QUnit.test("react to prop 'domain' changes", async function (assert) {
+        assert.expect(2);
+
+        class ToyView extends Component {
+            willStart() {
+                assert.deepEqual(this.props.domain, [["type", "=", "carnivorous"]]);
+            }
+            willUpdateProps(nextProps) {
+                assert.deepEqual(nextProps.domain, [["type", "=", "herbivorous"]]);
+            }
+        }
+        ToyView.template = xml`<div/>`;
+        ToyView.type = "toy";
+        viewRegistry.add("toy", ToyView, { force: true });
+
+        const env = await makeTestEnv({ serverData });
+        const target = getFixture();
+
+        class Parent extends Component {
+            setup() {
+                this.state = useState({
+                    type: "toy",
+                    resModel: "animal",
+                    domain: [["type", "=", "carnivorous"]],
+                });
+            }
+        }
+        Parent.template = xml`<View t-props="state"/>`;
+        Parent.components = { View };
+
+        const parent = await mount(Parent, { env, target });
+
+        parent.state.domain = [["type", "=", "herbivorous"]];
+
+        await nextTick();
+
+        parent.destroy();
+    });
+});
diff --git a/addons/web/static/tests/webclient/actions/concurrency_tests.js b/addons/web/static/tests/webclient/actions/concurrency_tests.js
index e68b66cbae6..483882282a9 100644
--- a/addons/web/static/tests/webclient/actions/concurrency_tests.js
+++ b/addons/web/static/tests/webclient/actions/concurrency_tests.js
@@ -1,9 +1,13 @@
 /** @odoo-module **/
 
+import { click, makeDeferred } from "@web/../tests/helpers/utils";
+import { ControlPanel } from "@web/search/control_panel/control_panel";
+import { createWebClient, doAction, getActionManagerServerData } from "./../helpers";
+import { isItemSelected, toggleFilterMenu, toggleMenuItem } from "@web/../tests/search/helpers";
+import { legacyExtraNextTick, nextTick } from "../../helpers/utils";
 import { registry } from "@web/core/registry";
 import testUtils from "web.test_utils";
-import { legacyExtraNextTick, nextTick } from "../../helpers/utils";
-import { createWebClient, doAction, getActionManagerServerData } from "./../helpers";
+import { useSetupView } from "@web/views/helpers/view_hook";
 
 const { Component, tags } = owl;
 const actionRegistry = registry.category("actions");
@@ -617,4 +621,82 @@ QUnit.module("ActionManager", (hooks) => {
         await legacyExtraNextTick();
         assert.containsOnce(webClient, ".o_form_view");
     });
+
+    QUnit.test("local state, global state, and race conditions", async function (assert) {
+        serverData.views = {
+            "partner,false,toy": `<toy/>`,
+            "partner,false,list": `<list><field name="foo"/></list>`,
+            "partner,false,search": `
+                <search>
+                    <filter name="foo" string="Foo" domain="[]"/>
+                </search>
+            `,
+        };
+
+        let def = Promise.resolve();
+
+        let id = 1;
+        class ToyView extends Component {
+            setup() {
+                this.id = id++;
+                assert.step(JSON.stringify(this.props.state || "no state"));
+                useSetupView({
+                    exportLocalState: () => {
+                        return { fromId: this.id };
+                    },
+                });
+            }
+            async willStart() {
+                await def;
+            }
+        }
+        ToyView.components = { ControlPanel };
+        ToyView.display_name = "Toy";
+        ToyView.icon = "fab fa-android";
+        ToyView.multiRecord = true;
+        ToyView.searchMenuTypes = ["filter"];
+        ToyView.template = owl.tags.xml`
+            <div class="o_toy_view">
+                <ControlPanel t-props="props.info"/>
+            </div>
+        `;
+        ToyView.type = "toy";
+        registry.category("views").add("toy", ToyView);
+
+        const webClient = await createWebClient({ serverData });
+
+        await doAction(webClient, {
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            // list (or something else) must be added to have the view switcher displayed
+            views: [
+                [false, "toy"],
+                [false, "list"],
+            ],
+        });
+
+        await toggleFilterMenu(webClient);
+        await toggleMenuItem(webClient, "Foo");
+        assert.ok(isItemSelected(webClient, "Foo"));
+
+        // reload twice by clicking on toy view switcher
+        def = makeDeferred();
+        await click(webClient.el.querySelector(".o_control_panel .o_switch_view.o_toy"));
+        await click(webClient.el.querySelector(".o_control_panel .o_switch_view.o_toy"));
+
+        def.resolve();
+        await nextTick();
+
+        await toggleFilterMenu(webClient);
+        assert.ok(isItemSelected(webClient, "Foo"));
+        // this test is not able to detect that getGlobalState is put on the right place:
+        // currentController.action.globalState contains in any case the search state
+        // of the first instantiated toy view.
+
+        assert.verifySteps([
+            `"no state"`, // setup first view instantiated
+            `{"fromId":1}`, // setup second view instantiated
+            `{"fromId":1}`, // setup third view instantiated
+        ]);
+    });
 });
diff --git a/addons/web/static/tests/webclient/actions/window_action_tests.js b/addons/web/static/tests/webclient/actions/window_action_tests.js
index a0fb9733bbf..87db617e07a 100644
--- a/addons/web/static/tests/webclient/actions/window_action_tests.js
+++ b/addons/web/static/tests/webclient/actions/window_action_tests.js
@@ -2327,25 +2327,38 @@ QUnit.module("ActionManager", (hooks) => {
         ]);
     });
 
-    QUnit.test(
-        "doAction supports being passed controlletState (searchModel)",
-        async function (assert) {
-            assert.expect(1);
-            const mockRPC = async (route, args) => {
-                if (route === "/web/dataset/search_read") {
-                    assert.deepEqual(args.domain, [["id", "=", 99]]);
-                }
-            };
-
-            const webClient = await createWebClient({ serverData, mockRPC });
-            await doAction(webClient, 1, {
-                props: {
-                    searchModel:
-                        '{"ControlPanelModelExtension":{"filters":{"1":{"type":"field","description":"Foo","fieldName":"foo","fieldType":"char","groupId":1,"id":1},"2":{"description":"ID is \\"99\\"","domain":"[[\\"id\\",\\"=\\",99]]","type":"filter","groupId":3,"groupNumber":2,"id":2}},"query":[{"groupId":3,"filterId":2}]}}',
+    QUnit.test("doAction supports being passed globalState prop", async function (assert) {
+        assert.expect(1);
+        const searchModel = JSON.stringify({
+            nextGroupId: 2,
+            nextGroupNumber: 2,
+            nextId: 2,
+            searchItems: {
+                1: {
+                    description: `ID is "99"`,
+                    domain: `[("id","=",99)]`,
+                    type: "filter",
+                    groupId: 1,
+                    groupNumber: 1,
+                    id: 1,
                 },
-            });
-        }
-    );
+            },
+            query: [{ searchItemId: 1 }],
+            sections: [],
+        });
+        const mockRPC = async (route, args) => {
+            if (route === "/web/dataset/search_read") {
+                assert.deepEqual(args.domain, [["id", "=", 99]]);
+            }
+        };
+
+        const webClient = await createWebClient({ serverData, mockRPC });
+        await doAction(webClient, 1, {
+            props: {
+                globalState: { searchModel },
+            },
+        });
+    });
 
     QUnit.test("window action in target new fails (onchange)", async (assert) => {
         assert.expect(3);
diff --git a/addons/web/static/tests/webclient/helpers.js b/addons/web/static/tests/webclient/helpers.js
index 601c47bb1a0..04765605ed6 100644
--- a/addons/web/static/tests/webclient/helpers.js
+++ b/addons/web/static/tests/webclient/helpers.js
@@ -7,11 +7,11 @@ import { popoverService } from "@web/core/popover/popover_service";
 import { registry } from "@web/core/registry";
 import { legacyServiceProvider } from "@web/legacy/legacy_service_provider";
 import {
-    makeLegacyActionManagerService,
     makeLegacyNotificationService,
     mapLegacyEnvToWowlEnv,
     makeLegacySessionService,
 } from "@web/legacy/utils";
+import { makeLegacyActionManagerService } from "@web/legacy/backend_utils";
 import { viewService } from "@web/views/view_service";
 import { actionService } from "@web/webclient/actions/action_service";
 import { effectService } from "@web/core/effects/effect_service";
@@ -85,7 +85,7 @@ export function setupWebClientServiceRegistry() {
 /**
  * Remove this as soon as we drop the legacy support
  */
-function addLegacyMockEnvironment(env, legacyParams = {}) {
+export function addLegacyMockEnvironment(env, legacyParams = {}) {
     // setup a legacy env
     const dataManager = Object.assign(
         {

From 1f8d1973d58c2d47374bf95231f979617cd33ec9 Mon Sep 17 00:00:00 2001
From: "Lucas Perais (lpe)" <lpe@odoo.com>
Date: Tue, 7 Sep 2021 06:22:42 +0000
Subject: [PATCH 19/31] [REF] web: introduce ControlPanelBottomContent

The ControlPanel now supports being passed an object "bottom-content" in its display props.
That Object is constituted by a component and by props to pass to it.

The bottom content of the Control panel is rendered as a Slot within that component

If not present, the ControlPanel continues to display its bottom part as usual

Part-of: odoo/odoo#73311
---
 .../search/control_panel/control_panel.xml    | 59 +++++++++++--------
 1 file changed, 34 insertions(+), 25 deletions(-)

diff --git a/addons/web/static/src/search/control_panel/control_panel.xml b/addons/web/static/src/search/control_panel/control_panel.xml
index 617c77b2d98..0cc3a796d30 100644
--- a/addons/web/static/src/search/control_panel/control_panel.xml
+++ b/addons/web/static/src/search/control_panel/control_panel.xml
@@ -16,36 +16,45 @@
                 </div>
             </div>
             <div t-if="display['bottom']" class="o_cp_bottom">
-                <div t-if="display['bottom-left']" class="o_cp_bottom_left">
-                    <t t-slot="control-panel-bottom-left"/>
-                </div>
-                <div t-if="display['bottom-right']" class="o_cp_bottom_right">
-                    <t t-slot="control-panel-bottom-right">
-                        <div class="btn-group o_search_options position-static" role="search">
-                            <t t-foreach="searchMenus" t-as="menu" t-key="menu.key">
-                                <t t-component="menu.Component"/>
-                            </t>
-                        </div>
+                <t t-if="display['bottom-content']">
+                    <t t-component="display['bottom-content'].Component" t-props="display['bottom-content'].props" >
+                        <t t-call="web.ControlPanel.BottomContent" />
                     </t>
-
-                    <div class="o_cp_pager"/>
-
-                    <t t-if="props.viewSwitcherEntries and props.viewSwitcherEntries.length > 1">
-                        <nav class="btn-group o_cp_switch_buttons">
-                            <t t-foreach="props.viewSwitcherEntries" t-as="view" t-key="view.type">
-                                <button class="btn btn-secondary fa fa-lg o_switch_view "
-                                    t-attf-class="o_{{view.type}} {{view.icon}} {{view.active ? 'active' : ''}}"
-                                    t-att-data-tooltip="view.name"
-                                    t-on-click="onViewClicked(view.type)"
-                                    />
-                            </t>
-                        </nav>
-                    </t>
-                </div>
+                </t>
+                <t t-else="" t-call="web.ControlPanel.BottomContent" />
             </div>
         </div>
     </t>
 
+    <t t-name="web.ControlPanel.BottomContent" owl="1">
+        <div t-if="display['bottom-left']" class="o_cp_bottom_left">
+            <t t-slot="control-panel-bottom-left"/>
+        </div>
+        <div t-if="display['bottom-right']" class="o_cp_bottom_right">
+            <t t-slot="control-panel-bottom-right">
+                <div class="btn-group o_search_options position-static" role="search">
+                    <t t-foreach="searchMenus" t-as="menu" t-key="menu.key">
+                        <t t-component="menu.Component"/>
+                    </t>
+                </div>
+            </t>
+
+            <div class="o_cp_pager"/>
+
+            <t t-if="props.viewSwitcherEntries and props.viewSwitcherEntries.length > 1">
+                <nav class="btn-group o_cp_switch_buttons">
+                    <t t-foreach="props.viewSwitcherEntries" t-as="view" t-key="view.type">
+                        <button class="btn btn-secondary fa fa-lg o_switch_view "
+                            t-attf-class="o_{{view.type}} {{view.icon}} {{view.active ? 'active' : ''}}"
+                            t-att-data-tooltip="view.name"
+                            t-on-click="onViewClicked(view.type)"
+                            />
+                    </t>
+                </nav>
+            </t>
+        </div>
+    </t>
+
     <t t-name="web.Breadcrumbs" owl="1">
         <ol class="breadcrumb">
             <t t-foreach="props.breadcrumbs or []" t-as="breadcrumb" t-key="breadcrumb.jsId">

From 2bed0410ec7450832e062ab951440902110215a8 Mon Sep 17 00:00:00 2001
From: "Lucas Perais (lpe)" <lpe@odoo.com>
Date: Tue, 7 Sep 2021 06:22:44 +0000
Subject: [PATCH 20/31] [REF] web: introduce compilation building-blocks for
 views processing

This commit introduces lib-like functions to help transforming
a view arch to an owl template.

compile_lib contains standalone functions that for the most part
can be applied on individual XML nodes to retrieve information
or to apply standard behavior on them.

compile_nodes contains standalone function that transform a arch node
into a viable Owl template one.

Part-of: odoo/odoo#73311
---
 .../static/src/views/compile/compile_lib.js   | 282 ++++++++++++++++++
 .../static/src/views/compile/compile_nodes.js |  88 ++++++
 2 files changed, 370 insertions(+)
 create mode 100644 addons/web/static/src/views/compile/compile_lib.js
 create mode 100644 addons/web/static/src/views/compile/compile_nodes.js

diff --git a/addons/web/static/src/views/compile/compile_lib.js b/addons/web/static/src/views/compile/compile_lib.js
new file mode 100644
index 00000000000..41c45c95548
--- /dev/null
+++ b/addons/web/static/src/views/compile/compile_lib.js
@@ -0,0 +1,282 @@
+/* @odoo-module */
+import { evaluateExpr } from "@web/core/py_js/py";
+
+/**
+ * A helper to identify nodes in an arch to allow matching between
+ * the parsing of an arch, and the template compilation.
+ * Nodes with the same tag will be assigned an incrementing number.
+ * Note that, consequently every node of the same tag should be added to produce
+ * a reliable ID.
+ * @return {Function} An add function to execute on each node of a given tagName
+ *  Function.idFor: Produce an Id for the lastNode, or for the given node.
+ */
+export function nodeIdentifier() {
+    const mapping = {};
+    let lastNode;
+
+    function add(node) {
+        const nodeMap = mapping[node.tagName] || {
+            current: null,
+            id: 1,
+        };
+        mapping[node.tagName] = nodeMap;
+
+        if (node !== nodeMap.current) {
+            nodeMap.id++;
+        }
+        nodeMap.current = node;
+        lastNode = node;
+    }
+
+    function idFor(node) {
+        node = node || lastNode;
+        const nodeMap = mapping[node.tagName];
+        return `${node.tagName}_${nodeMap.id}`;
+    }
+
+    return Object.assign(add, {
+        idFor(node) {
+            return idFor(node);
+        },
+    });
+}
+
+/**
+ * Checks if a XML node will resolve to a component when rendered by OWL.
+ * @param  {Element} node Should be a node of a pre-compiled template.
+ * @return {boolean}
+ */
+function isComponentNode(node) {
+    return (
+        node.tagName.charAt(0).toUpperCase() === node.tagName.charAt(0) ||
+        (node.tagName === "t" && "t-component" in node.attributes)
+    );
+}
+
+/**
+ * Helper to add onto a Component node the information of the arch node (e.g. modifiers)
+ * This is almost exclusively the support of legacy Widgets.
+ * @param {Element} node A node from an arch
+ * @param {Element} compiled A node of a pre-compiled template
+ */
+export function addLegacyNodeInfo(node, compiled) {
+    const modifiers = getAllModifiers(node);
+    if (modifiers) {
+        const legacyNode = {
+            attrs: { modifiers },
+        };
+        compiled.setAttribute("_legacyNode_", `"${encodeObjectForTemplate(legacyNode)}"`);
+    }
+}
+
+/**
+ * Encodes an object into a string usable inside a pre-compiled template
+ * @param  {Object}
+ * @return {string}
+ */
+export function encodeObjectForTemplate(obj) {
+    return encodeURI(JSON.stringify(obj));
+}
+
+/**
+ * Decodes a string within an attribute into an Object
+ * @param  {string} str
+ * @return {Object}
+ */
+export function decodeObjectForTemplate(str) {
+    return JSON.parse(decodeURI(str));
+}
+
+/**
+ * Combines the existing value of a node attribute with new given parts. The glue
+ * is the string used to join the parts.
+ * @param {Element} node
+ * @param {string} attr
+ * @param {string | string[]} parts
+ * @param {string} [glue=" "]
+ */
+export const combineAttributes = (node, attr, parts, glue = " ") => {
+    const allValues = [];
+    if (node.hasAttribute(attr)) {
+        allValues.push(node.getAttribute(attr));
+    }
+    allValues.push(...(Array.isArray(parts) ? parts : [parts]));
+    node.setAttribute(attr, allValues.join(glue));
+};
+/**
+ * there is no particular expectation of what should be a boolean
+ * according to a view's arch
+ * Sometimes it is 0 or one, True or False ; true or false
+ * @return {boolean}
+ */
+function evalIrUiViewModifier(expr) {
+    if (!expr) {
+        return false;
+    }
+    return evaluateExpr(expr, {
+        true: true,
+        false: false,
+    });
+}
+
+/**
+ * Gets all the Odoo's dynamic modifiers (invisible, readonly etc...) of a Node coming from an arch.
+ * @param  {Element} node An arch's node
+ * @return {Object} The modifiers set on the node.
+ */
+export function getAllModifiers(node) {
+    const modifiers = node.getAttribute("modifiers");
+    if (!modifiers) {
+        return null;
+    }
+    const parsed = JSON.parse(modifiers);
+    return parsed;
+}
+
+/**
+ * Gets a specific modifier, either static or dynamic, on a Node.
+ * A static modifier is set as an attribute and is a boolean.
+ * A dynamuic modifier is set in the `modifiers` attribute and id a domain.`
+ * @param  {Element} node An arch's Node.
+ * @param  {string} modifierName
+ * @return {boolean|Array}
+ */
+export function getModifier(node, modifierName) {
+    /** @type {string|boolean|Array} (mod) */
+    let mod = node.getAttribute(modifierName);
+    if (mod === null) {
+        const modifiers = getAllModifiers(node);
+        mod = modifiers && modifierName in modifiers ? modifiers[modifierName] : null;
+    }
+
+    if (!Array.isArray(mod) && !(typeof mod === "boolean")) {
+        mod = !!evalIrUiViewModifier(mod);
+    }
+    return mod;
+}
+
+/**
+ * Specifically gets the "invisible" modifier.
+ * @param  {Element} node
+ * @return {boolean|Array}
+ */
+function getInvisible(node) {
+    const invisible = getModifier(node, "invisible");
+    return invisible || false;
+}
+
+/**
+ * An object containing various information about the current
+ * compilation from an Arch to a owl template.
+ * @typedef {Object} CompilationContext
+ */
+
+/**
+ * Determine if a node in an arch will always be invisible. Usually if it is the case,
+ * the node will not be compiled at all
+ * @param  {Element}  node   An arch's node
+ * @param  {CompilationContext}
+ * @return {boolean}
+ */
+export function isAlwaysInvisible(node, compilationContext) {
+    const invisibleModifer = getInvisible(node);
+    return (
+        !compilationContext.enableInvisible &&
+        typeof invisibleModifer === "boolean" &&
+        invisibleModifer
+    );
+}
+
+/**
+ * Appends a child node to a parent node
+ * @param  {Element} parent
+ * @param  {Element|Element[]} node  The future children nodes
+ */
+export function appendTo(parent, node) {
+    if (!node) {
+        return;
+    }
+    if (Array.isArray(node) && node.length) {
+        parent.append(...node);
+    } else {
+        parent.append(node);
+    }
+}
+
+/**
+ * A string representing an abject that will be evaluated by a t-attr
+ * eg.: `{ attr1: my_expression ? true : false, attr2: true }`
+ * @typedef {string} TAttrString
+ */
+
+/**
+ * A string that links an attribute to an expression
+ * eg.: `my_attribute: my_expression ? true : false`
+ * @typedef {string} TAttrStringPart
+ */
+
+/**
+ * Helper to push in a string representing an object
+ * @param  {TAttrString} originalTattr
+ * @param  {TAttrStringPart} string        string to add onto the object
+ * @return {TAttrString}               The new string.
+ */
+function appendToStringifiedObject(originalTattr, string) {
+    const re = /{(.*)}/;
+    const oldString = re.exec(originalTattr);
+
+    if (oldString) {
+        string = `${oldString[1]}, ${string}`;
+    }
+    return `{ ${string} }`;
+}
+
+/**
+ * Appends a string to an attibute (t-attr)
+ * @param  {Element} node
+ * @param  {string} attr   The attribute's name
+ * @param  {TAttrStringPart} string
+ */
+export function appendAttr(node, attr, string) {
+    const attrKey = `t-att-${attr}`;
+    const attrVal = node.getAttribute(attrKey);
+    node.setAttribute(attrKey, appendToStringifiedObject(attrVal, string));
+}
+
+/**
+ * Applies an arch's node invisible modifier onto a pre-compiled node
+ * That is, set an t-if on the pre-compiled node, evaluating to the right expression
+ * or, if enableInvisible is set in params, put the class o_invisible on the compiled node
+ * @param {Object} params
+ * @param  {Element} params.node     An arch's node
+ * @param  {Element} params.compiled A pre-compiled node
+ * @param  {CompilationContext} compilationContext
+ * @param  {boolean|Array} [invisible]        A node invisible modifier
+ * @return {Element|undefined}                Return the -pre-compiled
+ *   Element if it is not always invisible
+ */
+export function applyInvisibleModifier({ node, compiled }, compilationContext, invisible) {
+    if (invisible === undefined && node) {
+        invisible = getInvisible(node);
+    }
+    if (!invisible) {
+        return compiled;
+    }
+    if (typeof invisible === "boolean" && !compilationContext.enableInvisible) {
+        return;
+    }
+
+    const notInvisibleExpr = `!model.evalDomain(record,${JSON.stringify(invisible)})`;
+    if (!compilationContext.enableInvisible) {
+        combineAttributes(compiled, "t-if", `${notInvisibleExpr}`, " and ");
+    } else {
+        let expr;
+        if (Array.isArray(invisible)) {
+            expr = `${notInvisibleExpr}`;
+        } else {
+            expr = invisible;
+        }
+        appendAttr(compiled, "class", `o_invisible_modifier: ${expr}`);
+    }
+    return compiled;
+}
diff --git a/addons/web/static/src/views/compile/compile_nodes.js b/addons/web/static/src/views/compile/compile_nodes.js
new file mode 100644
index 00000000000..445e8f2aab5
--- /dev/null
+++ b/addons/web/static/src/views/compile/compile_nodes.js
@@ -0,0 +1,88 @@
+/* @odoo-module */
+import { appendTo, addLegacyNodeInfo } from "./compile_lib";
+
+/**
+ * An object containing various information about the current
+ * compilation from an Arch to a owl template.
+ * @typedef {Object} CompilationContext
+ */
+
+/**
+ * If a group node has a string, compile a title div for it
+ * @param  {Element} node an arch's node
+ * @return {Element}
+ */
+function makeGroupTitleRow(node) {
+    const titleDiv = this.document.createElement("div");
+    titleDiv.classList.add("o_horizontal_separator");
+    titleDiv.textContent = node.getAttribute("string");
+    return titleDiv;
+}
+
+/**
+ * Compiles a template node for a `<group>`arch's node. Only for first level
+ * @param {Object} config
+ * @param  {Document} config.document The document from which we can create elements
+ * @param  {Function} config.compileNode   A function to compile children nodes
+ * @param  {number} [config.outerGroupCol] the default group column
+ * @param {Object} params The execution parameters
+ * @param  {Element} params.node An arch's node
+ * @param  {CompilationContext} params.compilationContext
+ * @return {Element} The compiled group node
+ */
+export function compileGroup(
+    { document, compileNode, outerGroupCol },
+    { node, compilationContext }
+) {
+    outerGroupCol = outerGroupCol || 2;
+
+    const group = document.createElement("div");
+    group.setAttribute("class", "o_group");
+
+    if (node.hasAttribute("string")) {
+        appendTo(group, makeGroupTitleRow(node));
+    }
+
+    const nbCols =
+        "col" in node.attributes ? parseInt(node.getAttribute("col"), 10) : outerGroupCol;
+    const colSize = Math.max(1, Math.round(12 / nbCols));
+
+    compilationContext = Object.create(compilationContext);
+    compilationContext.groupLevel = (compilationContext.groupLevel || 1) + 1;
+    for (let child of node.children) {
+        if (child.tagName === "newline") {
+            appendTo(group, this.doc.createElement("br"));
+            continue;
+        }
+        const compiled = compileNode(child, compilationContext);
+        if (!compiled) {
+            continue;
+        }
+        const colspan =
+            "colspan" in child.attributes ? parseInt(node.getAttribute("colspan"), 10) : 1;
+
+        compiled.classList.add(`o_group_col_${colSize * colspan}`);
+        appendTo(group, compiled);
+    }
+    return group;
+}
+
+/**
+ * Compiles a template node for a `<widget>`arch's node
+ * @param {Object} config
+ * @param  {Document} config.document The document from which we can create elements
+ * @param {Object} params The execution parameters
+ * @param  {Element} params.node An arch's node
+ * @return {Element} The compiled ViewWidget node
+ */
+export function compileWidget({ document }, { node }) {
+    const viewWidget = document.createElement("ViewWidget");
+    viewWidget.setAttribute("model", "model");
+    viewWidget.setAttribute("widgetName", `"${node.getAttribute("name")}"`);
+    if ("title" in node.attributes) {
+        viewWidget.setAttribute("title", `"${node.getAttribute("title")}"`);
+    }
+    addLegacyNodeInfo(node, viewWidget);
+
+    return viewWidget;
+}

From 256d143c39d96b8c0ec8944757ca3127f9a61b15 Mon Sep 17 00:00:00 2001
From: "Lucas Perais (lpe)" <lpe@odoo.com>
Date: Tue, 7 Sep 2021 06:22:46 +0000
Subject: [PATCH 21/31] [REF] web: introduce the ViewWidget component

The component ViewWidget allows to deal with the "widget" attributes on view arch's nodes
It retrieves the actual widget component via the registry's category "view_widgets"

It is roughly equivalent to _renderWidget in legacy.

Part-of: odoo/odoo#73311
---
 addons/web/static/src/views/view_widget.js  | 52 +++++++++++++++++++++
 addons/web/static/tests/helpers/mock_env.js |  1 +
 2 files changed, 53 insertions(+)
 create mode 100644 addons/web/static/src/views/view_widget.js

diff --git a/addons/web/static/src/views/view_widget.js b/addons/web/static/src/views/view_widget.js
new file mode 100644
index 00000000000..c6ec040e940
--- /dev/null
+++ b/addons/web/static/src/views/view_widget.js
@@ -0,0 +1,52 @@
+/* @odoo-module */
+import widgetRegistry from "web.widget_registry";
+import widgetRegistryOwl from "web.widgetRegistry";
+import { registry } from "@web/core/registry";
+import { ComponentAdapter } from "web.OwlCompatibility";
+import { decodeObjectForTemplate } from "@web/views/compile/compile_lib";
+
+import { useEffect } from "@web/core/utils/hooks";
+
+export class ViewWidget extends owl.Component {
+    setup() {
+        this.wowlEnv = this.env;
+        this.renderId = 1;
+        useEffect(() => {
+            this.renderId++;
+        });
+        const widgetName = this.props.widgetName;
+        const Widget = registry.category("view_widgets").get(widgetName, null);
+        if (!Widget) {
+            this.isLegacyOwl = true;
+            this.env = owl.Component.env;
+        }
+        this.Widget = Widget || widgetRegistryOwl.get(widgetName) || widgetRegistry.get(widgetName);
+        this.isLegacy = !(this.Widget instanceof owl.Component);
+    }
+
+    get widgetProps() {
+        if (!this.isLegacyOwl) {
+            return this.props;
+        } else {
+            throw new Error("To implement ....");
+        }
+    }
+
+    get widgetArgs() {
+        const record = this.props.model._legacyRecord_;
+        const node = this.props._legacyNode_
+            ? decodeObjectForTemplate(this.props._legacyNode_)
+            : {};
+        node.name = this.props.widgetName;
+        if (this.props.title) {
+            node.attrs = Object.assign(node.attrs || {}, { title: this.props.title });
+        }
+        return [record, node];
+    }
+}
+ViewWidget.template = owl.tags.xml/*xml*/ `<t>
+    <ComponentAdapter t-if="isLegacy" Component="Widget" widgetArgs="widgetArgs" t-key="renderId" class="o_widget" />
+    <t t-else="" t-component="Widget" t-props="widgetProps" class="o_widget" />
+</t>
+`;
+ViewWidget.components = { ComponentAdapter };
diff --git a/addons/web/static/tests/helpers/mock_env.js b/addons/web/static/tests/helpers/mock_env.js
index c416171ccee..6b68897195b 100644
--- a/addons/web/static/tests/helpers/mock_env.js
+++ b/addons/web/static/tests/helpers/mock_env.js
@@ -48,6 +48,7 @@ export function prepareRegistriesWithCleanup() {
     cloneRegistryWithCleanup(registry.category("views"));
     cloneRegistryWithCleanup(registry.category("error_handlers"));
     cloneRegistryWithCleanup(registry.category("command_provider"));
+    cloneRegistryWithCleanup(registry.category("view_widgets"));
 
     cloneRegistryWithCleanup(registry.category("main_components"));
 

From 82588c57ea2f5ba5c039f44dae125344e9b851ba Mon Sep 17 00:00:00 2001
From: "Lucas Perais (lpe)" <lpe@odoo.com>
Date: Tue, 7 Sep 2021 06:22:48 +0000
Subject: [PATCH 22/31] [REF] web: introduce useViewArch hook

Part-of: odoo/odoo#73311
---
 .../web/static/src/views/helpers/view_hook.js | 26 +++++++++++++++++++
 addons/web/static/src/views/view_service.js   |  3 +++
 addons/web/static/tests/helpers/mock_env.js   |  1 +
 3 files changed, 30 insertions(+)

diff --git a/addons/web/static/src/views/helpers/view_hook.js b/addons/web/static/src/views/helpers/view_hook.js
index 8e14e9e04d8..55020fd0ffa 100644
--- a/addons/web/static/src/views/helpers/view_hook.js
+++ b/addons/web/static/src/views/helpers/view_hook.js
@@ -2,6 +2,7 @@
 
 import { useDebugCategory } from "@web/core/debug/debug_context";
 import { useSetupAction } from "@web/webclient/actions/action_hook";
+import { registry } from "@web/core/registry";
 
 const { useComponent } = owl.hooks;
 
@@ -10,3 +11,28 @@ export function useSetupView(params) {
     useDebugCategory("view", { component });
     useSetupAction(params);
 }
+
+export function useViewArch(arch, params = {}) {
+    const CATEGORY = "__processed_archs__";
+
+    arch = arch.trim();
+    const processedRegistry = registry.category(CATEGORY);
+
+    let processedArch;
+    if (!processedRegistry.contains(arch)) {
+        processedArch = {};
+        processedRegistry.add(arch, processedArch);
+    } else {
+        processedArch = processedRegistry.get(arch);
+    }
+
+    const { compile, extract } = params;
+    if (!("template" in processedArch) && compile) {
+        processedArch.template = owl.tags.xml`${compile(arch)}`;
+    }
+    if (!("extracted" in processedArch) && extract) {
+        processedArch.extracted = extract(arch);
+    }
+
+    return processedArch;
+}
diff --git a/addons/web/static/src/views/view_service.js b/addons/web/static/src/views/view_service.js
index 9bed00ca5d4..84feb891d7e 100644
--- a/addons/web/static/src/views/view_service.js
+++ b/addons/web/static/src/views/view_service.js
@@ -49,6 +49,9 @@ export const viewService = {
 
         env.bus.on("CLEAR-CACHES", null, () => {
             cache = {};
+            const processedArchs = registry.category("__processed_archs__");
+            processedArchs.content = {};
+            processedArchs.trigger("UPDATE");
         });
 
         /**
diff --git a/addons/web/static/tests/helpers/mock_env.js b/addons/web/static/tests/helpers/mock_env.js
index 6b68897195b..a89da1375df 100644
--- a/addons/web/static/tests/helpers/mock_env.js
+++ b/addons/web/static/tests/helpers/mock_env.js
@@ -62,6 +62,7 @@ export function prepareRegistriesWithCleanup() {
 
     clearRegistryWithCleanup(registry.category("systray"));
     clearRegistryWithCleanup(registry.category("user_menuitems"));
+    clearRegistryWithCleanup(registry.category("__processed_archs__"));
     // fun fact: at least one registry is missing... this shows that we need a
     // better design for the way we clear these registries...
 }

From 37ac2ec86b330ccc4a6e195f88eabea6ba5a5c4e Mon Sep 17 00:00:00 2001
From: "Lucas Perais (lpe)" <lpe@odoo.com>
Date: Tue, 7 Sep 2021 06:22:50 +0000
Subject: [PATCH 23/31] [REF] web: introduce Field component

A simple High Order component that is able to get the actual
Field class in the category "fields" registry

It takes as minimal props:
- record: an object containing the fields key: a meta description of fields
- name: the field name
- type: the widget type name that xould select the right key in the registry

closes odoo-dev/odoo#1018

Related: odoo-dev/enterprise#206
Signed-off-by: Mathieu Duckerts-Antoine <Polymorphe57@users.noreply.github.com>
Part-of: odoo/odoo#73311
---
 addons/web/static/src/fields/fields.js      | 115 ++++++++++++++++++++
 addons/web/static/tests/helpers/mock_env.js |   1 +
 2 files changed, 116 insertions(+)
 create mode 100644 addons/web/static/src/fields/fields.js

diff --git a/addons/web/static/src/fields/fields.js b/addons/web/static/src/fields/fields.js
new file mode 100644
index 00000000000..a21b13eadb0
--- /dev/null
+++ b/addons/web/static/src/fields/fields.js
@@ -0,0 +1,115 @@
+/** @odoo-module **/
+import { registry } from "@web/core/registry";
+import legacyFieldRegistry from "web.field_registry";
+import owlFieldRegistry from "web.field_registry_owl";
+import { ComponentAdapter } from "web.OwlCompatibility";
+import { useEffect } from "@web/core/utils/hooks";
+
+const { Component, tags, hooks } = owl;
+
+const fieldRegistry = registry.category("fields");
+
+function getFieldFromRegistry(registry, { fieldType, viewType, fieldName, fieldsDescription }) {
+    if (viewType && fieldType) {
+        const specificType = `${viewType}.${fieldType}`;
+        if (registry.contains(specificType)) {
+            return registry.get(specificType);
+        }
+    }
+    if (!registry.contains(fieldType)) {
+        const field = fieldsDescription[fieldName];
+        fieldType = field && field.type;
+    }
+    return registry.get(fieldType, null);
+}
+
+class Field extends Component {
+    static getTangibleField({ record, type, name }) {
+        const FieldClass = getFieldFromRegistry(fieldRegistry, {
+            fieldName: name,
+            fieldType: type,
+            viewType: record.viewtype,
+            fieldsDescription: record.fields,
+        });
+        return { FieldClass };
+    }
+
+    setup() {
+        const { record, type, name } = this.props;
+        this.fieldRef = hooks.useRef("fieldRef");
+        this.FieldComponent = Field.getTangibleField({ record, type, name }).FieldClass;
+    }
+}
+
+Field.template = tags.xml/* xml */ `
+    <t t-component="FieldComponent" t-props="props" class="o-field" t-key="props.record.id" t-ref="fieldRef"/>
+`;
+
+class FieldSupportsLegacy extends Field {
+    static getTangibleField({ record, type, fieldName }) {
+        let { FieldClass } = super.getTangibleField(...arguments);
+        if (!FieldClass) {
+            FieldClass = getFieldFromRegistry(owlFieldRegistry, {
+                fieldName,
+                fieldType: type,
+                viewType: record.viewType,
+                fieldsDescription: record.fields,
+            });
+            if (FieldClass) {
+                return { FieldClass, isOwlLegacy: true };
+            } else {
+                FieldClass = getFieldFromRegistry(legacyFieldRegistry, {
+                    fieldName,
+                    fieldType: type,
+                    viewType: record.viewType,
+                    fieldsDescription: record.fields,
+                });
+                return { FieldClass, isLegacy: true };
+            }
+        }
+        return {};
+    }
+
+    setup() {
+        super.setup();
+        this.renderId = 0;
+        useEffect(() => {
+            this.renderId++;
+        });
+        if (!this.FieldComponent) {
+            this.env = owl.Component.env;
+            const { record, type, name } = this.props;
+            const { FieldClass, isOwlLegacy, isLegacy } = FieldSupportsLegacy.getTangibleField({
+                record,
+                type,
+                name,
+            });
+            this.FieldComponent = FieldClass;
+            this.isOwlLegacy = isOwlLegacy;
+            this.isLegacy = isLegacy;
+        }
+    }
+
+    get legacyProps() {
+        const legacyRecord = Object.assign({}, this.props.model._legacyRecord_);
+        legacyRecord.data = Object.assign({}, legacyRecord.data, this.props.record.data);
+        return {
+            fieldName: this.props.name,
+            record: legacyRecord,
+        };
+    }
+
+    get widgetArgs() {
+        const { fieldName, record } = this.legacyProps;
+        return [fieldName, record];
+    }
+}
+FieldSupportsLegacy.template = tags.xml/* xml */ `<t>
+    <t t-if="!isOwlLegacy and !isLegacy" t-call="${Field.template}" />
+    <t t-elif="isOwlLegacy" t-component="FieldComponent" t-props="legacyProps" />
+    <t t-elif="isLegacy" t-component="ComponentAdapter" widgetArgs="widgetArgs" Component="FieldComponent" t-key="renderId" />
+</t>
+`;
+FieldSupportsLegacy.components = { ComponentAdapter };
+
+export { FieldSupportsLegacy as Field };
diff --git a/addons/web/static/tests/helpers/mock_env.js b/addons/web/static/tests/helpers/mock_env.js
index a89da1375df..ad999b66fb0 100644
--- a/addons/web/static/tests/helpers/mock_env.js
+++ b/addons/web/static/tests/helpers/mock_env.js
@@ -49,6 +49,7 @@ export function prepareRegistriesWithCleanup() {
     cloneRegistryWithCleanup(registry.category("error_handlers"));
     cloneRegistryWithCleanup(registry.category("command_provider"));
     cloneRegistryWithCleanup(registry.category("view_widgets"));
+    cloneRegistryWithCleanup(registry.category("fields"));
 
     cloneRegistryWithCleanup(registry.category("main_components"));
 

From 05143f9e50c65b2db43bb18c96894276429cc4d1 Mon Sep 17 00:00:00 2001
From: Jorge Pinna Puissant <jpp@odoo.com>
Date: Tue, 7 Sep 2021 06:22:52 +0000
Subject: [PATCH 24/31] [REF] web: measure menu for reporting views

The reporting views (cohort, graph, and pivot) currently compute and show
the measures in similar but slightly different ways. The present commit
brings some tools that will be used to harmonize their behavior and
factorize the code via a common template and a utility function.

Part-of: odoo/odoo#73311
---
 addons/web/static/src/views/helpers/utils.js | 51 +++++++++++++++++++-
 addons/web/static/src/views/view.xml         | 19 ++++++++
 2 files changed, 69 insertions(+), 1 deletion(-)

diff --git a/addons/web/static/src/views/helpers/utils.js b/addons/web/static/src/views/helpers/utils.js
index 8b0c0ff1ff1..d3b9de96fb4 100644
--- a/addons/web/static/src/views/helpers/utils.js
+++ b/addons/web/static/src/views/helpers/utils.js
@@ -1,5 +1,5 @@
 /** @odoo-module **/
-
+import { _t } from "@web/core/l10n/translation";
 /**
  * Parse the arch to check if is true or false
  * If the string is empyt, 0, False or false it's considered as false
@@ -11,3 +11,52 @@
 export function archParseBoolean(str) {
     return str !== "False" && str !== "false" && str !== "0" && str !== "";
 }
+
+export function computeReportMeasures(fields, fieldAttrs, activeMeasures, additionalMeasures = []) {
+    const measures = {
+        __count: { name: "__count", string: _t("Count"), type: "integer" },
+    };
+    for (const [fieldName, field] of Object.entries(fields)) {
+        if (fieldName === "id" || !field.store) {
+            continue;
+        }
+        const { isInvisible } = fieldAttrs[fieldName] || {};
+        if (isInvisible && !additionalMeasures.includes(fieldName)) {
+            continue;
+        }
+        if (
+            ["integer", "float", "monetary"].includes(field.type) ||
+            additionalMeasures.includes(fieldName)
+        ) {
+            measures[fieldName] = field;
+        }
+    }
+
+    // add active measures to the measure list.  This is very rarely
+    // necessary, but it can be useful if one is working with a
+    // functional field non stored, but in a model with an overridden
+    // read_group method.  In this case, the pivot view could work, and
+    // the measure should be allowed.  However, be careful if you define
+    // a measure in your pivot view: non stored functional fields will
+    // probably not work (their aggregate will always be 0).
+    for (const measure of activeMeasures) {
+        if (!measures[measure]) {
+            measures[measure] = fields[measure];
+        }
+    }
+
+    for (const fieldName in fieldAttrs) {
+        if (fieldAttrs[fieldName].string && fieldName in measures) {
+            measures[fieldName].string = fieldAttrs[fieldName].string;
+        }
+    }
+
+    const sortedMeasures = Object.entries(measures).sort(([m1, f1], [m2, f2]) => {
+        if (m1 === "__count" || m2 === "__count") {
+            return m1 === "__count" ? 1 : -1; // Count is always last
+        }
+        return f1.string.toLowerCase().localeCompare(f2.string.toLowerCase());
+    });
+
+    return Object.fromEntries(sortedMeasures);
+}
diff --git a/addons/web/static/src/views/view.xml b/addons/web/static/src/views/view.xml
index 8244ace2980..427bb2f4316 100644
--- a/addons/web/static/src/views/view.xml
+++ b/addons/web/static/src/views/view.xml
@@ -5,4 +5,23 @@
     <WithSearch t-props="withSearchProps" class="o_action o_view_controller"/>
   </t>
 
+  <t t-name="web.ReportViewMeasures" owl="1">
+    <Dropdown togglerClass="'btn btn-primary'">
+            <t t-set-slot="toggler">
+                Measures <i class="fa fa-caret-down ml-1"/>
+            </t>
+            <t t-foreach="measures"
+               t-as="measure"
+               t-key="measure_value.name">
+                <div t-if="!measure_first and measure == '__count'" role="separator" class="dropdown-divider"/>
+                <DropdownItem class="o_menu_item dropdown-item"
+                    t-att-class="{ selected: activeMeasures.includes(measure) }"
+                    payload="{ measure: measure_value.name }"
+                    parentClosingMode="'none'"
+                    >
+                    <t t-esc="measures[measure].string"/>
+                </DropdownItem>
+            </t>
+        </Dropdown>
+  </t>
 </templates>

From e7a9ebec3176c37485643fcda2381e489a1df86f Mon Sep 17 00:00:00 2001
From: Mathieu Duckerts-Antoine <dam@odoo.com>
Date: Tue, 7 Sep 2021 06:22:54 +0000
Subject: [PATCH 25/31] [IMP] web: introduce processMeasure helper

Both "__count__" and "__count" can be encountered as measure notations
in reporting views. Typically, "__count__" is used in legacy views and
"__count" in new views. The problem is that both can now be found on
legacy or new side (think of favorite contexts for example). It is thus
necessary to write some compatibility code on each side. Here me
introduce an helper to help in that task.

Part-of: odoo/odoo#73311
Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
Co-authored-by: Julien Mougenot <jum@odoo.com>
---
 addons/web/static/src/views/helpers/utils.js | 44 ++++++++++++++++++--
 1 file changed, 40 insertions(+), 4 deletions(-)

diff --git a/addons/web/static/src/views/helpers/utils.js b/addons/web/static/src/views/helpers/utils.js
index d3b9de96fb4..32f537b3fc5 100644
--- a/addons/web/static/src/views/helpers/utils.js
+++ b/addons/web/static/src/views/helpers/utils.js
@@ -8,11 +8,25 @@ import { _t } from "@web/core/l10n/translation";
  * @param {string} str
  * @returns {boolean}
  */
-export function archParseBoolean(str) {
+export const archParseBoolean = (str) => {
     return str !== "False" && str !== "false" && str !== "0" && str !== "";
-}
+};
 
-export function computeReportMeasures(fields, fieldAttrs, activeMeasures, additionalMeasures = []) {
+/**
+ * TODO: doc
+ *
+ * @param {Object} fields
+ * @param {Object} fieldAttrs
+ * @param {string[]} activeMeasures
+ * @param {string[]} [additionalMeasures=[]]
+ * @returns {Object}
+ */
+export const computeReportMeasures = (
+    fields,
+    fieldAttrs,
+    activeMeasures,
+    additionalMeasures = []
+) => {
     const measures = {
         __count: { name: "__count", string: _t("Count"), type: "integer" },
     };
@@ -59,4 +73,26 @@ export function computeReportMeasures(fields, fieldAttrs, activeMeasures, additi
     });
 
     return Object.fromEntries(sortedMeasures);
-}
+};
+
+/**
+ * In the preview implementation of reporting views, the virtual field used to
+ * display the number of records was named __count__, whereas __count is
+ * actually the one used in xml. So basically, activating a filter specifying
+ * __count as measures crashed. Unfortunately, as __count__ was used in the JS,
+ * all filters saved as favorite at that time were saved with __count__, and
+ * not __count. So in order the make them still work with the new
+ * implementation, we handle both __count__ and __count.
+ *
+ * This function replaces occurences of '__count__' by '__count' in the given
+ * element(s).
+ *
+ * @param {any | any[]} [measures]
+ * @returns {any}
+ */
+export const processMeasure = (measure) => {
+    if (Array.isArray(measure)) {
+        return measure.map(processMeasure);
+    }
+    return measure === "__count__" ? "__count" : measure;
+};

From 23e84c17508697d17d5a6433f6ea7f760aa314f4 Mon Sep 17 00:00:00 2001
From: Mathieu Duckerts-Antoine <dam@odoo.com>
Date: Tue, 7 Sep 2021 06:22:56 +0000
Subject: [PATCH 26/31] [IMP] project: new ProjectControlPanel class

The reporting views are going to be converted to OWL so that their extensions
(like the project_graph and project_pivot views) have to be converted too.
We thus need an owl version of the ProjectControlPanel class.

Here we introduce that control panel and refactor a bit the legacy code.

Part-of: odoo/odoo#73311
---
 addons/project/__manifest__.py                |  3 +-
 .../project_control_panel.js                  | 51 +++++++++++++++++++
 .../project_control_panel.xml                 | 34 +++++++++++++
 .../static/src/xml/project_templates.xml      | 23 ++-------
 4 files changed, 91 insertions(+), 20 deletions(-)
 create mode 100644 addons/project/static/src/project_control_panel/project_control_panel.js
 create mode 100644 addons/project/static/src/project_control_panel/project_control_panel.xml

diff --git a/addons/project/__manifest__.py b/addons/project/__manifest__.py
index d635e16c866..831a8482575 100644
--- a/addons/project/__manifest__.py
+++ b/addons/project/__manifest__.py
@@ -59,6 +59,7 @@
     'post_init_hook': '_project_post_init',
     'assets': {
         'web.assets_backend': [
+            'project/static/src/project_control_panel/*',
             'project/static/src/css/project.css',
             'project/static/src/js/project_activity.js',
             'project/static/src/js/project_control_panel.js',
@@ -85,7 +86,7 @@
             'project/static/src/js/portal_rating.js',
         ],
         'web.assets_qweb': [
-            'project/static/src/xml/**/*',
+            'project/static/src/**/*.xml',
         ],
         'web.qunit_suite_tests': [
             'project/static/tests/burndown_chart_tests.js',
diff --git a/addons/project/static/src/project_control_panel/project_control_panel.js b/addons/project/static/src/project_control_panel/project_control_panel.js
new file mode 100644
index 00000000000..6d415a547ff
--- /dev/null
+++ b/addons/project/static/src/project_control_panel/project_control_panel.js
@@ -0,0 +1,51 @@
+/** @odoo-module **/
+
+import { ControlPanel } from "@web/search/control_panel/control_panel";
+import { useService } from "@web/core/utils/hooks";
+
+export class ProjectControlPanel extends ControlPanel {
+    constructor() {
+        super(...arguments);
+        this.orm = useService("orm");
+        this.user = useService("user");
+        const { active_id, show_project_update } = this.env.searchModel.globalContext;
+        this.showProjectUpdate = this.env.searchModel.view.type === "form" || show_project_update;
+        this.projectId = this.showProjectUpdate ? active_id : false;
+    }
+
+    async willStart() {
+        const proms = [super.willStart(...arguments)];
+        if (this.showProjectUpdate) {
+            proms.push(this.loadData());
+        }
+        await Promise.all(proms);
+    }
+
+    async willUpdateProps() {
+        const proms = [super.willUpdateProps(...arguments)];
+        if (this.showProjectUpdate) {
+            proms.push(this.loadData());
+        }
+        await Promise.all(proms);
+    }
+
+    async loadData() {
+        const [data, isProjectUser] = await Promise.all([
+            this.orm.call("project.project", "get_last_update_or_default", [this.projectId]),
+            this.user.hasGroup("project.group_project_user"),
+        ]);
+        this.data = data;
+        this.isProjectUser = isProjectUser;
+    }
+
+    async onStatusClick(ev) {
+        ev.preventDefault();
+        this.actionService.doAction("project.project_update_all_action", {
+            additionalContext: {
+                default_project_id: this.projectId,
+                active_id: this.projectId,
+            },
+        });
+    }
+}
+ProjectControlPanel.template = "project.ProjectControlPanel";
diff --git a/addons/project/static/src/project_control_panel/project_control_panel.xml b/addons/project/static/src/project_control_panel/project_control_panel.xml
new file mode 100644
index 00000000000..44aa7941a7f
--- /dev/null
+++ b/addons/project/static/src/project_control_panel/project_control_panel.xml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="project.ProjectControlPanelContentBadge" owl="1">
+        <t t-tag="isProjectUser ? 'button' : 'span'" class="badge border d-flex p-2 ml-2 bg-white">
+            <span t-attf-class="o_status_bubble o_color_bubble_{{data.color}}"/>
+            <span class="font-weight-normal ml-1" t-esc="data.status"/>
+        </t>
+    </t>
+
+    <t t-name="project.ProjectControlPanelContent" owl="1">
+        <t t-if="showProjectUpdate">
+            <li t-if="isProjectUser" class="o_project_updates_breadcrumb pl-3" t-on-click="onStatusClick">
+                <t t-call="project.ProjectControlPanelContentBadge"></t>
+            </li>
+            <li t-else="" class="o_project_updates_breadcrumb pl-3">
+                <t t-call="project.ProjectControlPanelContentBadge"></t>
+            </li>
+        </t>
+    </t>
+
+    <t t-name="project.Breadcrumbs" t-inherit="web.Breadcrumbs" t-inherit-mode="primary" owl="1">
+        <xpath expr="//ol" position="inside">
+            <t t-call="project.ProjectControlPanelContent"/>
+        </xpath>
+    </t>
+
+    <t t-name="project.ProjectControlPanel" t-inherit="web.ControlPanel" t-inherit-mode="primary" owl="1">
+        <xpath expr="//t[@t-call='web.Breadcrumbs']" position="replace">
+            <t t-call="project.Breadcrumbs"/>
+        </xpath>
+    </t>
+
+</templates>
diff --git a/addons/project/static/src/xml/project_templates.xml b/addons/project/static/src/xml/project_templates.xml
index 55aad92746c..1369eefb859 100644
--- a/addons/project/static/src/xml/project_templates.xml
+++ b/addons/project/static/src/xml/project_templates.xml
@@ -19,28 +19,13 @@
 
     <div t-name="project.ControlPanel" t-inherit="web.Legacy.ControlPanel" t-inherit-mode="extension" owl="1">
         <xpath expr="//ol[hasclass('breadcrumb')]" position="inside">
-            <t t-call="project.ControlPanelContent"/>
+            <t t-call="project.ProjectControlPanelContent">
+                <t t-set="showProjectUpdate" t-value="show_project_update"/>
+                <t t-set="isProjectUser" t-value="is_project_user"/>
+            </t>
         </xpath>
     </div>
 
-    <t t-name="project.ControlPanelContentBadge" owl="1">
-        <t t-tag="is_project_user ? 'button' : 'span'" class="badge border d-flex p-2 ml-2 bg-white">
-            <span t-attf-class="o_status_bubble o_color_bubble_{{data.color}}"/>
-            <span class="font-weight-normal ml-1" t-esc="data.status"/>
-        </t>
-    </t>
-
-    <t t-name="project.ControlPanelContent" owl="1">
-        <t t-if="show_project_update">
-            <li t-if="is_project_user" class="o_project_updates_breadcrumb pl-3" t-on-click="onStatusClick">
-                <t t-call="project.ControlPanelContentBadge"></t>
-            </li>
-            <li t-else="" class="o_project_updates_breadcrumb pl-3">
-                <t t-call="project.ControlPanelContentBadge"></t>
-            </li>
-        </t>
-    </t>
-
     <t t-name="project.ProjectRightPanel" owl="1">
         <div class="o_rightpanel">
             <t t-call="project.StatButtonsSection"/>

From 242b1caa6543fcbf35591d5424a880a7a7969f83 Mon Sep 17 00:00:00 2001
From: Mathieu Duckerts-Antoine <dam@odoo.com>
Date: Tue, 7 Sep 2021 06:22:58 +0000
Subject: [PATCH 27/31] [IMP] web,*: new GraphView component

*hr_timesheet,project,stock

Part-of: odoo/odoo#73311
Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
Co-authored-by: Julien Mougenot <jum@odoo.com>
Co-authored-by: Jorge Pinna Puissant <jpp@odoo.com>
Co-authored-by: Stefano Rigano <sri@odoo.com>
---
 addons/hr_timesheet/__manifest__.py           |    3 +-
 .../static/src/js/timesheet_graph.js          |   40 -
 .../static/src/js/timesheet_graph_model.js    |   39 +
 .../static/src/js/timesheet_graph_view.js     |   12 +
 .../static/tests/timesheet_graph_tests.js     |  133 +-
 addons/project/__manifest__.py                |    5 +-
 .../burndown_chart/burndown_chart_renderer.js |   46 +
 .../src/burndown_chart/burndown_chart_view.js |   13 +
 .../burndown_chart/burndown_chart_view.xml    |   12 +
 .../src/js/burndown_chart/controller.js       |   23 -
 .../static/src/js/burndown_chart/renderer.js  |   49 -
 .../static/src/js/burndown_chart/view.js      |   14 -
 addons/project/static/src/js/project_graph.js |   13 -
 .../static/src/js/project_graph_view.js       |   12 +
 .../src/js/project_rating_graph_view.js       |   34 +
 .../static/src/js/project_rating_reporting.js |   28 -
 .../static/tests/burndown_chart_tests.js      |  175 +-
 .../src/xml/report_stock_forecasted.xml       |    2 +-
 addons/web/__manifest__.py                    |    1 -
 .../src/legacy/js/views/graph/graph_model.js  |    8 +
 .../legacy/js/views/graph/graph_renderer.js   |    2 +-
 addons/web/static/src/legacy/xml/graph.xml    |   23 +-
 addons/web/static/src/views/graph/colors.js   |   51 +
 .../src/views/graph/graph_arch_parser.js      |   80 +
 .../web/static/src/views/graph/graph_model.js |  535 +++
 .../static/src/views/graph/graph_renderer.js  |  636 ++++
 .../static/src/views/graph/graph_renderer.xml |   34 +
 .../web/static/src/views/graph/graph_view.js  |  177 +
 .../static/src/views/graph/graph_view.scss    |   81 +
 .../web/static/src/views/graph/graph_view.xml |   75 +
 .../static/tests/legacy/views/graph_tests.js  |   13 +-
 .../static/tests/views/graph_view_tests.js    | 3291 +++++++++++++++++
 32 files changed, 5315 insertions(+), 345 deletions(-)
 delete mode 100644 addons/hr_timesheet/static/src/js/timesheet_graph.js
 create mode 100644 addons/hr_timesheet/static/src/js/timesheet_graph_model.js
 create mode 100644 addons/hr_timesheet/static/src/js/timesheet_graph_view.js
 create mode 100644 addons/project/static/src/burndown_chart/burndown_chart_renderer.js
 create mode 100644 addons/project/static/src/burndown_chart/burndown_chart_view.js
 create mode 100644 addons/project/static/src/burndown_chart/burndown_chart_view.xml
 delete mode 100644 addons/project/static/src/js/burndown_chart/controller.js
 delete mode 100644 addons/project/static/src/js/burndown_chart/renderer.js
 delete mode 100644 addons/project/static/src/js/burndown_chart/view.js
 delete mode 100644 addons/project/static/src/js/project_graph.js
 create mode 100644 addons/project/static/src/js/project_graph_view.js
 create mode 100644 addons/project/static/src/js/project_rating_graph_view.js
 create mode 100644 addons/web/static/src/views/graph/colors.js
 create mode 100644 addons/web/static/src/views/graph/graph_arch_parser.js
 create mode 100644 addons/web/static/src/views/graph/graph_model.js
 create mode 100644 addons/web/static/src/views/graph/graph_renderer.js
 create mode 100644 addons/web/static/src/views/graph/graph_renderer.xml
 create mode 100644 addons/web/static/src/views/graph/graph_view.js
 create mode 100644 addons/web/static/src/views/graph/graph_view.scss
 create mode 100644 addons/web/static/src/views/graph/graph_view.xml
 create mode 100644 addons/web/static/tests/views/graph_view_tests.js

diff --git a/addons/hr_timesheet/__manifest__.py b/addons/hr_timesheet/__manifest__.py
index 65b65e27c7f..c88c3de9d29 100644
--- a/addons/hr_timesheet/__manifest__.py
+++ b/addons/hr_timesheet/__manifest__.py
@@ -54,7 +54,8 @@ up a management by affair.
             'hr_timesheet/static/src/js/timesheet_factor.js',
             'hr_timesheet/static/src/js/timesheet_config_form_view.js',
             'hr_timesheet/static/src/js/qr_code_action.js',
-            'hr_timesheet/static/src/js/timesheet_graph.js',
+            'hr_timesheet/static/src/js/timesheet_graph_view.js',
+            'hr_timesheet/static/src/js/timesheet_graph_model.js',
         ],
         'web.qunit_suite_tests': [
             'hr_timesheet/static/tests/**/*',
diff --git a/addons/hr_timesheet/static/src/js/timesheet_graph.js b/addons/hr_timesheet/static/src/js/timesheet_graph.js
deleted file mode 100644
index d4c87383151..00000000000
--- a/addons/hr_timesheet/static/src/js/timesheet_graph.js
+++ /dev/null
@@ -1,40 +0,0 @@
-odoo.define('hr_timesheet.GraphView', function (require) {
-    "use strict";
-
-    const viewRegistry = require('web.view_registry');
-    const GraphView = require('web.GraphView');
-    const GraphModel = require('web.GraphModel');
-
-    const hrTimesheetGraphModel = GraphModel.extend({
-        /*
-         * Override the _processData to take into account the analytic line uom.
-         */
-        _processData: function (originIndex, rawData) {
-            this._super.apply(this, arguments);
-            const session = this.getSession();
-            const currentCompanyId = session.user_context.allowed_company_ids[0];
-            const currentCompany = session.user_companies.allowed_companies[currentCompanyId];
-            const currentCompanyTimesheetUOMFactor = currentCompany.timesheet_uom_factor || 1;
-            const fields = ['unit_amount', 'effective_hours', 'planned_hours', 'remaining_hours', 'total_hours_spent', 'subtask_effective_hours',
-            'overtime', 'number_hours', 'difference', 'hours_effective', 'hours_planned', 'timesheet_unit_amount'];
-
-            if (fields.includes(this.chart.measure) && currentCompanyTimesheetUOMFactor !== 1) {
-                // recalculate the Duration values according to the timesheet_uom_factor
-                this.chart.dataPoints.forEach(function (dataPt) {
-                    dataPt.value *= currentCompanyTimesheetUOMFactor;
-                });
-            }
-        },
-    });
-
-
-    const hrTimesheetGraphView = GraphView.extend({
-        config: Object.assign({}, GraphView.prototype.config, {
-            Model: hrTimesheetGraphModel,
-        }),
-    });
-
-    viewRegistry.add('hr_timesheet_graphview', hrTimesheetGraphView);
-    return hrTimesheetGraphView;
-});
-
diff --git a/addons/hr_timesheet/static/src/js/timesheet_graph_model.js b/addons/hr_timesheet/static/src/js/timesheet_graph_model.js
new file mode 100644
index 00000000000..b65559a80d6
--- /dev/null
+++ b/addons/hr_timesheet/static/src/js/timesheet_graph_model.js
@@ -0,0 +1,39 @@
+/** @odoo-module **/
+
+import { GraphModel } from "@web/views/graph/graph_model";
+
+const FIELDS = [
+    'unit_amount', 'effective_hours', 'planned_hours', 'remaining_hours', 'total_hours_spent', 'subtask_effective_hours',
+    'overtime', 'number_hours', 'difference', 'hours_effective', 'hours_planned', 'timesheet_unit_amount'
+];
+
+export class hrTimesheetGraphModel extends GraphModel {
+    /**
+     * @override
+     */
+    setup(params, services) {
+        super.setup(...arguments);
+        this.companyService = services.company;
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Override processDataPoints to take into account the analytic line uom.
+     * @override
+     */
+    _getProcessedDataPoints() {
+        const currentCompany = this.companyService.currentCompany;
+        const factor = currentCompany.timesheet_uom_factor || 1;
+        if (factor !== 1 && FIELDS.includes(this.metaData.measure)) {
+            // recalculate the Duration values according to the timesheet_uom_factor
+            for (const dataPt of this.dataPoints) {
+                dataPt.value *= factor;
+            }
+        }
+        return super._getProcessedDataPoints(...arguments);
+    }
+}
+hrTimesheetGraphModel.services = [...GraphModel.services, "company"];
diff --git a/addons/hr_timesheet/static/src/js/timesheet_graph_view.js b/addons/hr_timesheet/static/src/js/timesheet_graph_view.js
new file mode 100644
index 00000000000..3745139699c
--- /dev/null
+++ b/addons/hr_timesheet/static/src/js/timesheet_graph_view.js
@@ -0,0 +1,12 @@
+/** @odoo-module **/
+
+import { GraphView } from "@web/views/graph/graph_view";
+import { hrTimesheetGraphModel } from "./timesheet_graph_model";
+import { registry } from "@web/core/registry";
+
+const viewRegistry = registry.category("views");
+
+export class hrTimesheetGraphView extends GraphView {}
+hrTimesheetGraphView.Model = hrTimesheetGraphModel;
+
+viewRegistry.add("hr_timesheet_graphview", hrTimesheetGraphView);
diff --git a/addons/hr_timesheet/static/tests/timesheet_graph_tests.js b/addons/hr_timesheet/static/tests/timesheet_graph_tests.js
index a6fd3bc690d..56a3dcf9275 100644
--- a/addons/hr_timesheet/static/tests/timesheet_graph_tests.js
+++ b/addons/hr_timesheet/static/tests/timesheet_graph_tests.js
@@ -1,73 +1,78 @@
-odoo.define('hr_timesheet.timesheet_graph_tests', function (require) {
-"use strict";
+/** @odoo-module **/
 
-const session = require('web.session');
-const SetupTimesheetUOMWidgetsTestEnvironment = require('hr_timesheet.timesheet_uom_tests_env');
-const GraphView = require('hr_timesheet.GraphView');
+import { companyService } from "@web/webclient/company_service";
+import { dialogService } from "@web/core/dialog/dialog_service";
+import { getGraphRenderer } from "@web/../tests/views/graph_view_tests";
+import { makeView } from "@web/../tests/views/helpers";
+import { patchWithCleanup } from "@web/../tests/helpers/utils";
+import { session } from "@web/session";
+import { registry } from "@web/core/registry";
+import { setupControlPanelServiceRegistry } from "@web/../tests/search/helpers";
 
-QUnit.module('Timesheet UOM Widgets', function (hooks) {
-    let env;
-    let sessionUserCompaniesBackup;
-    let sessionUserContextBackup;
-    let sessionUOMIdsBackup;
-    let sessionUIDBackup;
-    hooks.before(function (assert) {
-        env = new SetupTimesheetUOMWidgetsTestEnvironment();
-        // Backups session parts that this testing module will alter in order to restore it at the end.
-        sessionUserCompaniesBackup = session.user_companies || false;
-        sessionUserContextBackup = session.user_context || false;
-        sessionUOMIdsBackup = session.uom_ids || false;
-        sessionUIDBackup = session.uid || false;
-    });
-    hooks.after(async function (assert) {
-        // Restores the session
-        const sessionToApply = Object.assign(
-            { },
-            sessionUserCompaniesBackup && {
-                user_companies: sessionUserCompaniesBackup,
-            } || { },
-            sessionUserContextBackup && {
-                user_context: sessionUserContextBackup,
-            } || { },
-            sessionUOMIdsBackup && {
-                uom_ids: sessionUOMIdsBackup,
-            } || { },
-            sessionUIDBackup && {
-                uid: sessionUIDBackup,
-            } || { });
-        await env.patchSessionAndStartServices(sessionToApply, true);
-    });
-    QUnit.module('GraphView', function (hooks) {
-        QUnit.test('the timesheet_graph view data are multiplied by a factor that is company related', async function (assert) {
-            assert.expect(2);
+const serviceRegistry = registry.category("services");
 
-            let options = {
-                View: GraphView,
-                arch: '<graph><field name="unit_amount"/></graph>',
-                viewOptions: {
-                    context: {
-                        graph_measure: 'unit_amount',
+QUnit.module('Views', function (hooks) {
+    let serverData;
+    hooks.beforeEach(() => {
+        serverData = {
+            models: {
+                'account.analytic.line': {
+                    fields: {
+                        unit_amount: { string: "Unit Amount", type: "float", group_operator: "sum", store: true },
                     },
+                    records: [
+                        { id: 1, unit_amount: 8 }
+                    ],
                 },
-            };
-            let graph = await env.createView(options);
-            let renderedData = graph.renderer.componentRef.comp.chart.data.datasets[0].data[0];
-            assert.strictEqual(renderedData, 8, 'The timesheet_graph is taking the timesheet_uom_factor into account');
-            graph.destroy();
+            },
+            views: {
+                // unit_amount is used as group_by and measure
+                "account.analytic.line,false,graph": `
+                    <graph>
+                        <field name="unit_amount"/>
+                        <field name="unit_amount" type="measure"/>
+                    </graph>
+                `,
+            }
+        }
+        setupControlPanelServiceRegistry();
+        serviceRegistry.add("company", companyService);
+        serviceRegistry.add("dialog", dialogService);
+    });
 
-            options = Object.assign(
-                { },
-                options,
-                {
-                    session: {
-                        user_context: env.singleCompanyDayUOMUser,
-                    },
-                });
-            graph = await env.createView(options);
-            renderedData = graph.renderer.componentRef.comp.chart.data.datasets[0].data[0];
-            assert.strictEqual(renderedData, 1, 'The timesheet_graph is taking the timesheet_uom_factor into account');
-            graph.destroy();
+    QUnit.module("hrTimesheetGraphView");
+
+    QUnit.test('the timesheet graph view data are not multiplied by a factor that is company related (factor = 1)', async function (assert) {
+        assert.expect(1);
+
+        patchWithCleanup(session.user_companies.allowed_companies[1], {
+            timesheet_uom_factor: 1,
         });
+
+        const graph = await makeView({
+            serverData,
+            resModel: "account.analytic.line",
+            type: "hr_timesheet_graphview",
+        });
+
+        const renderedData = getGraphRenderer(graph).chart.data.datasets[0].data;
+        assert.deepEqual(renderedData, [8], 'The timesheet graph view is taking the timesheet_uom_factor into account (factor === 1)');
+    });
+
+    QUnit.test('the timesheet graph view data are multiplied by a factor that is company related (factor !== 1)', async function (assert) {
+        assert.expect(1);
+
+        patchWithCleanup(session.user_companies.allowed_companies[1], {
+            timesheet_uom_factor: 0.125,
+        });
+
+        const graph = await makeView({
+            serverData,
+            resModel: "account.analytic.line",
+            type: "hr_timesheet_graphview",
+        });
+
+        const renderedData = getGraphRenderer(graph).chart.data.datasets[0].data;
+        assert.deepEqual(renderedData, [1], 'The timesheet graph view is taking the timesheet_uom_factor into account (factor !== 1)');
     });
 });
-});
diff --git a/addons/project/__manifest__.py b/addons/project/__manifest__.py
index 831a8482575..2b659091cee 100644
--- a/addons/project/__manifest__.py
+++ b/addons/project/__manifest__.py
@@ -59,20 +59,21 @@
     'post_init_hook': '_project_post_init',
     'assets': {
         'web.assets_backend': [
+            'project/static/src/burndown_chart/*',
             'project/static/src/project_control_panel/*',
             'project/static/src/css/project.css',
             'project/static/src/js/project_activity.js',
             'project/static/src/js/project_control_panel.js',
             'project/static/src/js/project_form.js',
-            'project/static/src/js/project_graph.js',
+            'project/static/src/js/project_graph_view.js',
             'project/static/src/js/project_kanban.js',
             'project/static/src/js/project_list.js',
             'project/static/src/js/project_pivot.js',
+            'project/static/src/js/project_rating_graph_view.js',
             'project/static/src/js/project_rating_reporting.js',
             'project/static/src/js/project_task_kanban_examples.js',
             'project/static/src/js/tours/project.js',
             'project/static/src/js/project_calendar.js',
-            'project/static/src/js/burndown_chart/*',
             'project/static/src/js/right_panel/*',
             'project/static/src/js/update/*',
             'project/static/src/js/widgets/*',
diff --git a/addons/project/static/src/burndown_chart/burndown_chart_renderer.js b/addons/project/static/src/burndown_chart/burndown_chart_renderer.js
new file mode 100644
index 00000000000..ab977fde34b
--- /dev/null
+++ b/addons/project/static/src/burndown_chart/burndown_chart_renderer.js
@@ -0,0 +1,46 @@
+/** @odoo-module **/
+
+import { hexToRGBA } from "@web/views/graph/colors";
+import { GraphRenderer } from "@web/views/graph/graph_renderer";
+
+export class BurndownChartRenderer extends GraphRenderer {
+    /**
+     * @override
+     */
+    getLineChartData() {
+        const data = super.getLineChartData();
+        const { stacked } = this.props.metaData;
+        if (stacked) {
+            for (const dataset of data.datasets) {
+                dataset.backgroundColor = hexToRGBA(dataset.borderColor, 0.4);
+            }
+        }
+        return data;
+    }
+
+    /**
+     * @override
+     */
+    getElementOptions() {
+        const elementOptions = super.getElementOptions();
+        const { mode, stacked } = this.props.metaData;
+        if (mode === "line") {
+            elementOptions.line.fill = stacked;
+        }
+        return elementOptions;
+    }
+
+    /**
+     * @override
+     */
+    getScaleOptions() {
+        const { xAxes, yAxes } = super.getScaleOptions();
+        const { mode, stacked } = this.props.metaData;
+        if (mode === "line") {
+            for (const y of yAxes) {
+                y.stacked = stacked;
+            }
+        }
+        return { xAxes, yAxes };
+    }
+}
diff --git a/addons/project/static/src/burndown_chart/burndown_chart_view.js b/addons/project/static/src/burndown_chart/burndown_chart_view.js
new file mode 100644
index 00000000000..ccda4998d83
--- /dev/null
+++ b/addons/project/static/src/burndown_chart/burndown_chart_view.js
@@ -0,0 +1,13 @@
+/** @odoo-module **/
+
+import { BurndownChartRenderer } from "./burndown_chart_renderer";
+import { GraphView } from "@web/views/graph/graph_view";
+import { registry } from "@web/core/registry";
+
+const viewRegistry = registry.category("views");
+
+class BurndownChartView extends GraphView {}
+BurndownChartView.components = { ...GraphView.components, Renderer: BurndownChartRenderer };
+BurndownChartView.buttonTemplate = "project.BurndownChartView.Buttons";
+
+viewRegistry.add("burndown_chart", BurndownChartView);
diff --git a/addons/project/static/src/burndown_chart/burndown_chart_view.xml b/addons/project/static/src/burndown_chart/burndown_chart_view.xml
new file mode 100644
index 00000000000..75605aa1428
--- /dev/null
+++ b/addons/project/static/src/burndown_chart/burndown_chart_view.xml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="project.BurndownChartView.Buttons" t-inherit="web.GraphView.Buttons" t-inherit-mode="primary" owl="1">
+        <xpath expr="//button[@data-mode='pie']" position="replace">
+        </xpath>
+        <xpath expr="//div[@role='toolbar'][3]" position="attributes">
+            <attribute name="t-if">true</attribute>
+        </xpath>
+    </t>
+
+</templates>
diff --git a/addons/project/static/src/js/burndown_chart/controller.js b/addons/project/static/src/js/burndown_chart/controller.js
deleted file mode 100644
index 45b19a7105b..00000000000
--- a/addons/project/static/src/js/burndown_chart/controller.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/** @odoo-module alias=project.BurndownChartController **/
-import * as GraphController from 'web.GraphController';
-
-export default GraphController.extend({
-    /**
-     * @override
-     */
-    updateButtons: function() {
-        const result = this._super.apply(this, arguments);
-        if (this.$buttons) {
-            const state = this.model.get();
-            this.$buttons
-                .find('.o_graph_button[data-mode="pie"]')
-                .addClass('d-none');
-            this.$buttons
-                .find('.o_graph_button[data-mode="stack"]')
-                .data('stacked', state.stacked)
-                .toggleClass('active', state.stacked)
-                .toggleClass('o_hidden', state.mode === 'pie');
-        }
-        return result;
-    }
-});
diff --git a/addons/project/static/src/js/burndown_chart/renderer.js b/addons/project/static/src/js/burndown_chart/renderer.js
deleted file mode 100644
index 7eb4700a389..00000000000
--- a/addons/project/static/src/js/burndown_chart/renderer.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/** @odoo-module alias=project.BurndownChartRenderer **/
-import * as GraphRenderer from 'web/static/src/js/views/graph/graph_renderer';
-import { hexToRGBA } from "web/static/src/js/views/graph/graph_utils";
-
-export class BurndownChartRenderer extends GraphRenderer {
-    /**
-     * @override
-     * @private
-     */
-    _createLineChartConfig() {
-        const { data, options, type } = super._createLineChartConfig();
-        for (const dataset of data.datasets) {
-            if (this.props.stacked) {
-                dataset.backgroundColor = hexToRGBA(dataset.borderColor, 0.4);
-            }
-        }
-        return { data, options, type };
-    }
-
-    /**
-     * @override
-     * @private
-     * @returns {Object}
-     */
-    _getElementOptions() {
-        const elementOptions = super._getElementOptions();
-        if (this.props.mode === 'line') {
-            elementOptions.line.fill = this.props.stacked;
-        }
-        return elementOptions;
-    }
-
-    /**
-     * @override
-     * @private
-     */
-    _getScaleOptions() {
-        const scaleOptions = super._getScaleOptions();
-        if (this.props.mode !== "line") {
-            return scaleOptions;
-        }
-
-        const { xAxes, yAxes } = scaleOptions;
-        for (const y of yAxes) {
-            y.stacked = this.props.stacked;
-        }
-        return { xAxes, yAxes };
-    }
-}
diff --git a/addons/project/static/src/js/burndown_chart/view.js b/addons/project/static/src/js/burndown_chart/view.js
deleted file mode 100644
index 0c0bc235126..00000000000
--- a/addons/project/static/src/js/burndown_chart/view.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/** @odoo-module alias=project.BurndownChartView **/
-import GraphView from 'web.GraphView';
-import viewRegistry from 'web.view_registry';
-import BurndownChartController from './controller';
-import { BurndownChartRenderer } from './renderer';
-
-export const BurndownChartView = GraphView.extend({
-    config: Object.assign({}, GraphView.prototype.config, {
-        Controller: BurndownChartController,
-        Renderer: BurndownChartRenderer,
-    }),
-});
-
-viewRegistry.add('burndown_chart', BurndownChartView);
diff --git a/addons/project/static/src/js/project_graph.js b/addons/project/static/src/js/project_graph.js
deleted file mode 100644
index acfc5c79055..00000000000
--- a/addons/project/static/src/js/project_graph.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/** @odoo-module **/
-
-import GraphView from 'web.GraphView';
-import { ProjectControlPanel } from '@project/js/project_control_panel';
-import viewRegistry from 'web.view_registry';
-
-export const ProjectGraphView = GraphView.extend({
-    config: Object.assign({}, GraphView.prototype.config, {
-        ControlPanel: ProjectControlPanel,
-    }),
-});
-
-viewRegistry.add('project_graph', ProjectGraphView);
diff --git a/addons/project/static/src/js/project_graph_view.js b/addons/project/static/src/js/project_graph_view.js
new file mode 100644
index 00000000000..d7d711aafd4
--- /dev/null
+++ b/addons/project/static/src/js/project_graph_view.js
@@ -0,0 +1,12 @@
+/** @odoo-module **/
+
+import { GraphView } from "@web/views/graph/graph_view";
+import { ProjectControlPanel } from "@project/project_control_panel/project_control_panel";
+import { registry } from "@web/core/registry";
+
+const viewRegistry = registry.category("views");
+
+class ProjectGraphView extends GraphView {}
+ProjectGraphView.components = { ...GraphView, ControlPanel: ProjectControlPanel };
+
+viewRegistry.add("project_graph", ProjectGraphView);
diff --git a/addons/project/static/src/js/project_rating_graph_view.js b/addons/project/static/src/js/project_rating_graph_view.js
new file mode 100644
index 00000000000..4c98d62a001
--- /dev/null
+++ b/addons/project/static/src/js/project_rating_graph_view.js
@@ -0,0 +1,34 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+import { GraphView } from "@web/views/graph/graph_view";
+import { GraphArchParser } from "@web/views/graph/graph_arch_parser";
+import { registry } from "@web/core/registry";
+
+const viewRegistry = registry.category("views");
+
+const MEASURE_STRINGS = {
+    parent_res_id: _lt("Project"),
+    rating: _lt("Rating Value (/5)"),
+    res_id: _lt("Task"),
+};
+
+class ProjectRatingArchParser extends GraphArchParser {
+    parse() {
+        const archInfo = super.parse(...arguments);
+        for (const [key, val] of Object.entries(MEASURE_STRINGS)) {
+            archInfo.fieldAttrs[key] = {
+                ...archInfo.fieldAttrs[key],
+                string: val.toString(),
+            };
+        }
+        return archInfo;
+    }
+}
+
+// Would it be not better achiedved by using a proper arch directly?
+
+class ProjectRatingGraphView extends GraphView {}
+ProjectRatingGraphView.archParser = ProjectRatingArchParser;
+
+viewRegistry.add("project_rating_graph", ProjectRatingGraphView);
diff --git a/addons/project/static/src/js/project_rating_reporting.js b/addons/project/static/src/js/project_rating_reporting.js
index 737795c917e..164e751b5ad 100644
--- a/addons/project/static/src/js/project_rating_reporting.js
+++ b/addons/project/static/src/js/project_rating_reporting.js
@@ -1,8 +1,6 @@
 /** @odoo-module **/
 
 import { _t } from 'web.core';
-import GraphController from 'web.GraphController';
-import GraphView from 'web.GraphView';
 import PivotController from 'web.PivotController';
 import PivotView from 'web.PivotView';
 import viewRegistry from 'web.view_registry';
@@ -34,29 +32,3 @@ const ProjectPivotView = PivotView.extend({
 });
 
 viewRegistry.add('project_rating_pivot', ProjectPivotView);
-
-const ProjectGraphController = GraphController.extend({
-    /**
-     * @override
-     */
-    init: function () {
-        this._super.apply(this, arguments);
-        _.each(this.measures, measure => {
-            if (measure.fieldName === 'res_id') {
-                measure.description = _t('Task');
-            } else if (measure.fieldName === 'parent_res_id') {
-                measure.description = _t('Project');
-            } else if (measure.fieldName === 'rating') {
-                measure.description = _t('Rating Value (/5)');
-            }
-        });
-    },
-});
-
-const ProjectGraphView = GraphView.extend({
-    config: Object.assign({}, GraphView.prototype.config, {
-        Controller: ProjectGraphController,
-    }),
-});
-
-viewRegistry.add('project_rating_graph', ProjectGraphView);
diff --git a/addons/project/static/tests/burndown_chart_tests.js b/addons/project/static/tests/burndown_chart_tests.js
index 7c421affe88..b80ef82036e 100644
--- a/addons/project/static/tests/burndown_chart_tests.js
+++ b/addons/project/static/tests/burndown_chart_tests.js
@@ -1,74 +1,85 @@
-/** @odoo-module alias=project.BurndownView */
-import { dom, createView, nextTick } from 'web.test_utils';
-import { COLORS, hexToRGBA } from 'web/static/src/js/views/graph/graph_utils';
-import { BurndownChartView } from '../src/js/burndown_chart/view';
+/** @odoo-module */
 
-QUnit.module('Project', {}, function () {
-    QUnit.module('Views', {
-        beforeEach() {
-            this.data = {
-                burndown_chart: {
-                    fields: {
-                        date: { string: "Date", type: 'date', store: true, sortable: true },
-                        project_id: { string: "Project", type: "many2one", relation: 'project', store: true },
-                        stage_id: { string: "Stage", type: "many2one", relation: 'stage', store: true },
-                        nb_tasks: { string: "Number of Tasks", type: 'integer', store: true }
+import { click } from "@web/../tests/helpers/utils";
+import { COLORS, hexToRGBA } from "@web/views/graph/colors";
+import { dialogService } from "@web/core/dialog/dialog_service";
+import { getGraphRenderer } from "@web/../tests/views/graph_view_tests";
+import { makeView } from "@web/../tests/views/helpers";
+import { registry } from "@web/core/registry";
+import { setupControlPanelServiceRegistry } from "@web/../tests/search/helpers";
+
+const serviceRegistry = registry.category("services");
+QUnit.module("Project", {}, () => {
+    QUnit.module("Views", (hooks) => {
+        let serverData;
+        hooks.beforeEach(async () => {
+            serverData = {
+                models: {
+                    burndown_chart: {
+                        fields: {
+                            date: { string: "Date", type: "date", store: true, sortable: true },
+                            project_id: { string: "Project", type: "many2one", relation: "project", store: true },
+                            stage_id: { string: "Stage", type: "many2one", relation: "stage", store: true },
+                            nb_tasks: { string: "Number of Tasks", type: "integer", store: true, group_operator: "sum" }
+                        },
+                        records: [
+                            { id: 1, project_id: 1, stage_id: 1, date: "2020-01-01", nb_tasks: 10 },
+                            { id: 2, project_id: 1, stage_id: 2, date: "2020-02-01", nb_tasks: 5 },
+                            { id: 3, project_id: 1, stage_id: 3, date: "2020-03-01", nb_tasks: 2 },
+                        ],
                     },
-                    records: [
-                        { id: 1, project_id: 1, stage_id: 1, date: "2020-01-01", nb_tasks: 10 },
-                        { id: 2, project_id: 1, stage_id: 2, date: "2020-02-01", nb_tasks: 5 },
-                        { id: 3, project_id: 1, stage_id: 3, date: "2020-03-01", nb_tasks: 2 },
-                    ],
+                    project: {
+                        fields: {
+                            name: { string: "Project Name", type: "char" },
+                        },
+                        records: [{ id: 1, name: "Project A" }]
+                    },
+                    stage: {
+                        fields: {
+                            name: { string: "Stage Name", type: "char" },
+                        },
+                        records: [
+                            { id: 1, name: "Todo" },
+                            { id: 2, name: "In Progress" },
+                            { id: 3, name: "Done" },
+                        ],
+                    }
                 },
-                project: {
-                    fields: {
-                        name: { string: 'Project Name', type: "char" },
-                    },
-                    records: [
-                        { id: 1, name: 'Project A' },
-                    ]
+                views: {
+                    "burndown_chart,false,graph": `
+                        <graph type="line">
+                            <field name="date" string="Date" interval="month"/>
+                            <field name="stage_id"/>
+                            <field name="nb_tasks" type="measure"/>
+                        </graph>
+                    `,
                 },
-                stage: {
-                    fields: {
-                        name: {string: 'Stage Name', type: 'char' },
-                    },
-                    records: [
-                        { id: 1, name: 'Todo' },
-                        { id: 2, name: 'In Progress' },
-                        { id: 3, name: 'Done' },
-                    ]
-                }
             };
+            setupControlPanelServiceRegistry();
+            serviceRegistry.add("dialog", dialogService);
+        });
 
-            this.burndown_chart = {
-                View: BurndownChartView,
-                model: 'burndown_chart',
-                data: this.data,
-                arch: `<graph type="line">
-                    <field name="date" string="Date" interval="month" type="row"/>
-                    <field name="stage_id"/>
-                    <field name="nb_tasks" type="measure"/>
-                </graph>`,
-            };
-        }
-    }, function () {
-        QUnit.module('BurndownChart');
+        QUnit.module("BurndownChart");
 
-        QUnit.test('check if default mode is line chart and line chart is stacked for burndown chart', async function (assert) {
+        QUnit.test("check if default mode is line chart and line chart is stacked for burndown chart", async function (assert) {
             assert.expect(5);
 
-            const burndown_chart = await createView(this.burndown_chart);
+            const burndownChart = await makeView({
+                serverData,
+                resModel: "burndown_chart",
+                type: "burndown_chart",
+            });
 
-            assert.strictEqual(burndown_chart.renderer.props.mode, "line", "should be in line chart mode by default.");
-            assert.ok(burndown_chart.renderer.props.stacked, "should be stacked by default.");
+            assert.strictEqual(burndownChart.model.metaData.mode, "line", "should be in line chart mode.");
+            assert.ok(burndownChart.model.metaData.stacked, "should be stacked by default.");
 
-            assert.ok(burndown_chart.renderer.componentRef.comp._getScaleOptions().yAxes.every(y => y.stacked), "the stacked property in y axes should be true when the stacked is enabled in line chart");
-            assert.ok(burndown_chart.renderer.componentRef.comp._getElementOptions().line.fill, "The fill property should be true to add backgroundColor in line chart.");
+            assert.ok(getGraphRenderer(burndownChart).getScaleOptions().yAxes.every(y => y.stacked), "the stacked property in y axes should be true when the stacked is enabled in line chart");
+            assert.ok(getGraphRenderer(burndownChart).getElementOptions().line.fill, "The fill property should be true to add backgroundColor in line chart.");
 
             const actualDatasets = [];
             const expectedDatasets = [];
-            const keysToEvaluate = ['backgroundColor', 'borderColor', 'originIndex', 'pointBackgroundColor'];
-            const datasets = burndown_chart.renderer.componentRef.comp.chart.data.datasets;
+            const keysToEvaluate = ["backgroundColor", "borderColor", "originIndex", "pointBackgroundColor"];
+            const datasets = getGraphRenderer(burndownChart).chart.data.datasets;
 
             for (let i = 0; i < datasets.length; i++) {
                 const dataset = datasets[i];
@@ -88,43 +99,43 @@ QUnit.module('Project', {}, function () {
                     pointBackgroundColor: expectedColor,
                 });
             }
-
             assert.deepEqual(actualDatasets, expectedDatasets);
-
-            burndown_chart.destroy();
         });
 
-        QUnit.test('check if the stacked button is visible in the line chart', async function (assert) {
+        QUnit.test("check if the stacked button is visible in the line chart", async function (assert) {
             assert.expect(3);
-
-            const burndown_chart = await createView(this.burndown_chart);
-
-            assert.containsN(burndown_chart, '.o_graph_button[data-mode="stack"]', 1, "should find the stacked button in the controller of the view.");
-            const $stackButton = burndown_chart.$buttons.find('.o_graph_button[data-mode="stack"]');
-            assert.doesNotHaveClass($stackButton, 'o_hidden', "the stacked button should not have the .o_hidden class when we are in the line chart.");
-
-            await dom.click($stackButton);
-            assert.notOk(burndown_chart.renderer.props.stacked, "should be disabled and display a classic line chart.");
-
-            burndown_chart.destroy();
+            const burndownChart = await makeView({
+                serverData,
+                resModel: "burndown_chart",
+                type: "burndown_chart",
+            });
+            assert.ok(burndownChart.model.metaData.stacked, "graph should be a burndown chart.");
+            assert.containsOnce(burndownChart, `button.o_graph_button[data-tooltip="Stacked"]`);
+            const stackButton = burndownChart.el.querySelector(`button.o_graph_button[data-tooltip="Stacked"]`);
+            await click(stackButton);
+            assert.notOk(burndownChart.model.metaData.stacked, "graph should be a classic line chart.");
         });
 
-        QUnit.test('check if it is classic line chart when stacked prop is false in line chart', async function (assert) {
+        QUnit.test("check if it is classic line chart when stacked prop is false in line chart", async function (assert) {
             assert.expect(4);
 
-            const burndown_chart = await createView(this.burndown_chart);
+            const burndownChart = await makeView({
+                serverData,
+                resModel: "burndown_chart",
+                type: "burndown_chart",
+            });
 
-            const $stackButton = burndown_chart.$buttons.find('.o_graph_button[data-mode="stack"]');
-            await dom.click($stackButton);
-            assert.notOk(burndown_chart.renderer.props.stacked, "should be disabled and display a classic line chart.");
+            const stackButton = burndownChart.el.querySelector(`button.o_graph_button[data-tooltip="Stacked"]`);
+            await click(stackButton);
+            assert.notOk(burndownChart.model.metaData.stacked, "graph should be a classic line chart.");
 
-            assert.notOk(burndown_chart.renderer.componentRef.comp._getScaleOptions().yAxes.every(y => y.stacked), "the y axes should have a stacked property set to false since the stacked property in line chart is false.");
-            assert.notOk(burndown_chart.renderer.componentRef.comp._getElementOptions().line.fill, "The fill property should be false since the stacked property is false.");
+            assert.notOk(getGraphRenderer(burndownChart).getScaleOptions().yAxes.every(y => y.stacked), "the y axes should have a stacked property set to false since the stacked property in line chart is false.");
+            assert.notOk(getGraphRenderer(burndownChart).getElementOptions().line.fill, "The fill property should be false since the stacked property is false.");
 
             const actualDatasets = [];
             const expectedDatasets = [];
-            const keysToEvaluate = ['backgroundColor', 'borderColor', 'originIndex', 'pointBackgroundColor'];
-            const datasets = burndown_chart.renderer.componentRef.comp.chart.data.datasets;
+            const keysToEvaluate = ["backgroundColor", "borderColor", "originIndex", "pointBackgroundColor"];
+            const datasets = getGraphRenderer(burndownChart).chart.data.datasets;
 
             for (let i = 0; i < datasets.length; i++) {
                 const dataset = datasets[i];
@@ -145,8 +156,6 @@ QUnit.module('Project', {}, function () {
             }
 
             assert.deepEqual(actualDatasets, expectedDatasets);
-
-            burndown_chart.destroy();
         });
     });
 });
diff --git a/addons/stock/static/src/xml/report_stock_forecasted.xml b/addons/stock/static/src/xml/report_stock_forecasted.xml
index 7fad33ec827..8f8110cc3d2 100644
--- a/addons/stock/static/src/xml/report_stock_forecasted.xml
+++ b/addons/stock/static/src/xml/report_stock_forecasted.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates id="template" xml:space="preserve">
 
-<t t-name="stock.GraphRenderer" owl="1" t-inherit="web.GraphRenderer" t-inherit-mode="primary">
+<t t-name="stock.GraphRenderer" owl="1" t-inherit="web.Legacy.GraphRenderer" t-inherit-mode="primary">
     <xpath expr="//canvas[@t-ref='canvas']" position="attributes">
         <attribute name="height">300</attribute>
     </xpath>
diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py
index 0133195d3cc..29e0e0485bd 100644
--- a/addons/web/__manifest__.py
+++ b/addons/web/__manifest__.py
@@ -451,7 +451,6 @@ This module provides the core of the Odoo Web Client.
             'web/static/lib/ace/mode-python.js',
             'web/static/lib/ace/mode-xml.js',
             'web/static/lib/ace/mode-js.js',
-            'web/static/lib/Chart/Chart.js',
             'web/static/lib/nearest/jquery.nearest.js',
             'web/static/lib/daterangepicker/daterangepicker.js',
             'web/static/lib/stacktracejs/stacktrace.js',
diff --git a/addons/web/static/src/legacy/js/views/graph/graph_model.js b/addons/web/static/src/legacy/js/views/graph/graph_model.js
index b1bcddb47c2..1e02c729b40 100644
--- a/addons/web/static/src/legacy/js/views/graph/graph_model.js
+++ b/addons/web/static/src/legacy/js/views/graph/graph_model.js
@@ -75,6 +75,10 @@ return AbstractModel.extend({
             orderBy: params.orderBy
         });
 
+        if (this.chart.measure === "__count") {
+            this.chart.measure = "__count__";
+        }
+
         this._computeDerivedParams();
 
         return this._loadGraph();
@@ -117,6 +121,10 @@ return AbstractModel.extend({
             this.chart.timeRanges = params.timeRanges;
         }
 
+        if (this.chart.measure === "__count") {
+            this.chart.measure = "__count__";
+        }
+
         this._computeDerivedParams();
 
         if ('mode' in params) {
diff --git a/addons/web/static/src/legacy/js/views/graph/graph_renderer.js b/addons/web/static/src/legacy/js/views/graph/graph_renderer.js
index d14f52accf9..ba35e0d976b 100644
--- a/addons/web/static/src/legacy/js/views/graph/graph_renderer.js
+++ b/addons/web/static/src/legacy/js/views/graph/graph_renderer.js
@@ -956,7 +956,7 @@ odoo.define("web/static/src/js/views/graph/graph_renderer", function (require) {
         }
     }
 
-    GraphRenderer.template = "web.GraphRenderer";
+    GraphRenderer.template = "web.Legacy.GraphRenderer";
     GraphRenderer.props = {
         arch: {
             type: Object,
diff --git a/addons/web/static/src/legacy/xml/graph.xml b/addons/web/static/src/legacy/xml/graph.xml
index 01ba3d14379..d194f10dba7 100644
--- a/addons/web/static/src/legacy/xml/graph.xml
+++ b/addons/web/static/src/legacy/xml/graph.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates>
 
-    <t t-name="web.GraphRenderer" owl="1">
+    <t t-name="web.Legacy.GraphRenderer" owl="1">
         <div class="o_graph_renderer">
             <label t-if="props.title" t-esc="props.title"/>
             <t t-if="noContentHelperData" t-call="web.NoContentHelper">
@@ -22,25 +22,4 @@
         </div>
     </t>
 
-    <t t-name="web.GraphRenderer.CustomTooltip" owl="1">
-        <div class="o_graph_custom_tooltip">
-            <table>
-                <thead>
-                    <tr>
-                        <th class="o_measure" t-esc="measure"/>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr t-foreach="tooltipItems" t-as="tooltipItem" t-key="tooltipItem.id">
-                        <td>
-                            <span class="o_square" t-attf-style="background-color: {{ tooltipItem.boxColor }}"/>
-                            <span class="o_label" t-attf-style="max-width: {{ maxWidth }}" t-esc="tooltipItem.label"/>
-                        </td>
-                        <td class="o_value" t-esc="tooltipItem.value"/>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
-    </t>
-
 </templates>
diff --git a/addons/web/static/src/views/graph/colors.js b/addons/web/static/src/views/graph/colors.js
new file mode 100644
index 00000000000..ab0dff98cde
--- /dev/null
+++ b/addons/web/static/src/views/graph/colors.js
@@ -0,0 +1,51 @@
+/** @odoo-module **/
+
+export const COLORS = [
+    "#1f77b4",
+    "#ff7f0e",
+    "#aec7e8",
+    "#ffbb78",
+    "#2ca02c",
+    "#98df8a",
+    "#d62728",
+    "#ff9896",
+    "#9467bd",
+    "#c5b0d5",
+    "#8c564b",
+    "#c49c94",
+    "#e377c2",
+    "#f7b6d2",
+    "#7f7f7f",
+    "#c7c7c7",
+    "#bcbd22",
+    "#dbdb8d",
+    "#17becf",
+    "#9edae5",
+];
+
+/**
+ * @param {number} index
+ * @returns {string}
+ */
+export function getColor(index) {
+    return COLORS[index % COLORS.length];
+}
+
+export const DEFAULT_BG = "#d3d3d3";
+
+export const BORDER_WHITE = "rgba(255,255,255,0.6)";
+
+const RGB_REGEX = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
+
+/**
+ * @param {string} hex
+ * @param {number} opacity
+ * @returns {string}
+ */
+export function hexToRGBA(hex, opacity) {
+    const rgb = RGB_REGEX.exec(hex)
+        .slice(1, 4)
+        .map((n) => parseInt(n, 16))
+        .join(",");
+    return `rgba(${rgb},${opacity})`;
+}
diff --git a/addons/web/static/src/views/graph/graph_arch_parser.js b/addons/web/static/src/views/graph/graph_arch_parser.js
new file mode 100644
index 00000000000..a3f1180b5ec
--- /dev/null
+++ b/addons/web/static/src/views/graph/graph_arch_parser.js
@@ -0,0 +1,80 @@
+/** @odoo-module **/
+
+import { evaluateExpr } from "@web/core/py_js/py";
+import { GROUPABLE_TYPES } from "@web/search/utils/misc";
+import { XMLParser } from "@web/core/utils/xml";
+import { archParseBoolean } from "../helpers/utils";
+
+export const MODES = ["bar", "line", "pie"];
+export const ORDERS = ["ASC", "DESC", null];
+
+export class GraphArchParser extends XMLParser {
+    parse(arch, fields = {}) {
+        const archInfo = { fields, fieldAttrs: {}, groupBy: [] };
+        this.visitXML(arch, (node) => {
+            switch (node.tagName) {
+                case "graph":
+                    if (node.hasAttribute("disable_linking")) {
+                        archInfo.disableLinking = archParseBoolean(
+                            node.getAttribute("disable_linking")
+                        );
+                    }
+                    if (node.hasAttribute("stacked")) {
+                        archInfo.stacked = archParseBoolean(node.getAttribute("stacked"));
+                    }
+                    const mode = node.getAttribute("type");
+                    if (mode && MODES.includes(mode)) {
+                        archInfo.mode = mode;
+                    }
+                    const order = node.getAttribute("order");
+                    if (order && ORDERS.includes(order)) {
+                        archInfo.order = order;
+                    }
+                    const title = node.getAttribute("string");
+                    if (title) {
+                        archInfo.title = title;
+                    }
+                    break;
+                case "field":
+                    let fieldName = node.getAttribute("name"); // exists (rng validation)
+                    if (fieldName === "id") {
+                        break;
+                    }
+                    const string = node.getAttribute("string");
+                    if (string) {
+                        if (!archInfo.fieldAttrs[fieldName]) {
+                            archInfo.fieldAttrs[fieldName] = {};
+                        }
+                        archInfo.fieldAttrs[fieldName].string = string;
+                    }
+                    const isInvisible = Boolean(
+                        evaluateExpr(node.getAttribute("invisible") || "0")
+                    );
+                    if (isInvisible) {
+                        if (!archInfo.fieldAttrs[fieldName]) {
+                            archInfo.fieldAttrs[fieldName] = {};
+                        }
+                        archInfo.fieldAttrs[fieldName].isInvisible = true;
+                        break;
+                    }
+                    const isMeasure = node.getAttribute("type") === "measure";
+                    if (isMeasure) {
+                        // the last field with type="measure" (if any) will be used as measure else __count
+                        archInfo.measure = fieldName;
+                    } else {
+                        const { type } = archInfo.fields[fieldName]; // exists (rng validation)
+                        if (GROUPABLE_TYPES.includes(type)) {
+                            let groupBy = fieldName;
+                            const interval = node.getAttribute("interval");
+                            if (interval) {
+                                groupBy += `:${interval}`;
+                            }
+                            archInfo.groupBy.push(groupBy);
+                        }
+                    }
+                    break;
+            }
+        });
+        return archInfo;
+    }
+}
diff --git a/addons/web/static/src/views/graph/graph_model.js b/addons/web/static/src/views/graph/graph_model.js
new file mode 100644
index 00000000000..07fddc83516
--- /dev/null
+++ b/addons/web/static/src/views/graph/graph_model.js
@@ -0,0 +1,535 @@
+/** @odoo-module **/
+
+import { sortBy } from "@web/core/utils/arrays";
+import { KeepLast } from "@web/core/utils/concurrency";
+import { rankInterval } from "@web/search/utils/dates";
+import { getGroupBy } from "@web/search/utils/group_by";
+import { GROUPABLE_TYPES } from "@web/search/utils/misc";
+import { Model } from "@web/views/helpers/model";
+import { buildSampleORM } from "@web/views/helpers/sample_server";
+import { computeReportMeasures, processMeasure } from "@web/views/helpers/utils";
+
+export const SEP = " / ";
+
+class DateClasses {
+    // We view the param "array" as a matrix of values and undefined.
+    // An equivalence class is formed of defined values of a column.
+    // So nothing has to do with dates but we only use Dateclasses to manage
+    // identification of dates.
+    /**
+     * @param {(any[])[]} array
+     */
+    constructor(array) {
+        this.__referenceIndex = null;
+        this.__array = array;
+        for (let i = 0; i < this.__array.length; i++) {
+            const arr = this.__array[i];
+            if (arr.length && this.__referenceIndex === null) {
+                this.__referenceIndex = i;
+            }
+        }
+    }
+
+    /**
+     * @param {number} index
+     * @param {any} o
+     * @returns {string}
+     */
+    classLabel(index, o) {
+        return `${this.__array[index].indexOf(o)}`;
+    }
+
+    /**
+     * @param {string} classLabel
+     * @returns {any[]}
+     */
+    classMembers(classLabel) {
+        const classNumber = Number(classLabel);
+        const classMembers = new Set();
+        for (const arr of this.__array) {
+            if (arr[classNumber] !== undefined) {
+                classMembers.add(arr[classNumber]);
+            }
+        }
+        return [...classMembers];
+    }
+
+    /**
+     * @param {string} classLabel
+     * @param {number} [index]
+     * @returns {any}
+     */
+    representative(classLabel, index) {
+        const classNumber = Number(classLabel);
+        const i = index === undefined ? this.__referenceIndex : index;
+        if (i === null) {
+            return null;
+        }
+        return this.__array[i][classNumber];
+    }
+
+    /**
+     * @param {number} index
+     * @returns {number}
+     */
+    arrayLength(index) {
+        return this.__array[index].length;
+    }
+}
+
+export class GraphModel extends Model {
+    /**
+     * @override
+     */
+    setup(params, services) {
+        const { orm, user } = services;
+        this.orm = orm;
+        this.user = user;
+
+        this.keepLast = new KeepLast();
+        this._fakeORM = null;
+
+        this.initialGroupBy = null;
+
+        this.metaData = params;
+        this.data = null;
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * @param {Object} [searchParams]
+     * @param {Object} [searchParams.context]
+     * @param {Object[]} [searchParams.domains]
+     * @param {string[]} [searchParams.groupBy]
+     */
+    async load(searchParams) {
+        const { context, domains, groupBy } = searchParams;
+        const metaData = Object.assign({}, this.metaData, { context, domains });
+
+        metaData.measure = context.graph_measure || metaData.measure;
+        metaData.mode = context.graph_mode || metaData.mode;
+
+        if (!this.initialGroupBy) {
+            this.initialGroupBy = context.graph_groupbys || this.metaData.groupBy; // = arch groupBy --> change that
+        }
+        metaData.groupBy = groupBy.length ? groupBy : this.initialGroupBy;
+
+        this._normalize(metaData);
+
+        metaData.measures = computeReportMeasures(
+            metaData.fields,
+            metaData.fieldAttrs,
+            [metaData.measure],
+            metaData.additionalMeasures
+        );
+
+        await this._fetchDataPoints(metaData);
+
+        this._prepareData();
+    }
+
+    /**
+     * Only supposed to be called to change one or several parameters among
+     * "measure", "mode", "order", and "stacked".
+     * @param {Object} params
+     */
+    async updateMetaData(params) {
+        const metaData = Object.assign({}, this.metaData, params);
+
+        if ("measure" in params) {
+            await this._fetchDataPoints(metaData);
+        } else {
+            await this.keepLast.add(Promise.resolve());
+            this.metaData = metaData;
+        }
+
+        this._prepareData();
+
+        this.notify();
+    }
+
+    //--------------------------------------------------------------------------
+    // Protected
+    //--------------------------------------------------------------------------
+
+    /**
+     * Fetch the data points (possibly sample ones) determined by the metaData.
+     * This function has several side effects. It can alter metaData
+     * (e.g. change metaData.useSampleModel value) and set this.metaData and
+     * this.dataPoints (sometimes this._fakeORM).
+     * @protected
+     * @param {Object} metaData
+     */
+    async _fetchDataPoints(metaData) {
+        let dataPoints = await this.keepLast.add(this._loadDataPoints(metaData));
+        if (metaData.useSampleModel && dataPoints.length === 0) {
+            dataPoints = await this.keepLast.add(this._loadDataPoints(metaData, true));
+        } else {
+            metaData.useSampleModel = false;
+        }
+        this.metaData = metaData;
+        this.dataPoints = dataPoints;
+    }
+
+    /**
+     * Separates dataPoints coming from the read_group(s) into different
+     * datasets. This function returns the parameters data and labels used
+     * to produce the charts.
+     * @protected
+     * @param {Object[]}
+     * @returns {Object}
+     */
+    _getData(dataPoints) {
+        const { domains, groupBy, mode } = this.metaData;
+
+        let identify = false;
+        if (domains.length && groupBy.length && groupBy[0].fieldName === domains.fieldName) {
+            identify = true;
+        }
+        const dateClasses = identify ? this._getDateClasses(dataPoints) : null;
+
+        // dataPoints --> labels
+        let labels = [];
+        const labelMap = {};
+        for (const dataPt of dataPoints) {
+            const x = dataPt.labels.slice(0, mode === "pie" ? undefined : 1);
+            const trueLabel = x.length ? x.join(SEP) : this.env._t("Total");
+            if (dateClasses) {
+                x[0] = dateClasses.classLabel(dataPt.originIndex, x[0]);
+            }
+            const key = JSON.stringify(x);
+            if (labelMap[key] === undefined) {
+                labelMap[key] = labels.length;
+                if (dateClasses) {
+                    if (mode === "pie") {
+                        x[0] = dateClasses.classMembers(x[0]).join(", ");
+                    } else {
+                        x[0] = dateClasses.representative(x[0]);
+                    }
+                }
+                const label = x.length ? x.join(SEP) : this.env._t("Total");
+                labels.push(label);
+            }
+            dataPt.labelIndex = labelMap[key];
+            dataPt.trueLabel = trueLabel;
+        }
+
+        // dataPoints + labels --> datasetsTmp --> datasets
+        const datasetsTmp = {};
+        for (const dataPt of dataPoints) {
+            const { domain, labelIndex, originIndex, trueLabel, value } = dataPt;
+            const datasetLabel = this._getDatasetLabel(dataPt);
+            if (!(datasetLabel in datasetsTmp)) {
+                let dataLength = labels.length;
+                if (mode !== "pie" && dateClasses) {
+                    dataLength = dateClasses.arrayLength(originIndex);
+                }
+                datasetsTmp[datasetLabel] = {
+                    data: new Array(dataLength).fill(0),
+                    trueLabels: labels.slice(0, dataLength), // should be good // check this in case identify = true
+                    domains: new Array(dataLength).fill([]),
+                    label: datasetLabel,
+                    originIndex: originIndex,
+                };
+            }
+            datasetsTmp[datasetLabel].data[labelIndex] = value;
+            datasetsTmp[datasetLabel].domains[labelIndex] = domain;
+            datasetsTmp[datasetLabel].trueLabels[labelIndex] = trueLabel;
+        }
+        // sort by origin
+        let datasets = sortBy(Object.values(datasetsTmp), "originIndex");
+
+        if (mode === "pie") {
+            // We kinda have a matrix. We remove the zero columns and rows. This is a global operation.
+            // That's why it cannot be done before.
+            datasets = datasets.filter((dataset) => dataset.data.some((v) => Boolean(v)));
+            const labelsToKeepIndexes = {};
+            labels.forEach((_, index) => {
+                if (datasets.some((dataset) => Boolean(dataset.data[index]))) {
+                    labelsToKeepIndexes[index] = true;
+                }
+            });
+            labels = labels.filter((_, index) => labelsToKeepIndexes[index]);
+            for (const dataset of datasets) {
+                dataset.data = dataset.data.filter((_, index) => labelsToKeepIndexes[index]);
+                dataset.domains = dataset.domains.filter((_, index) => labelsToKeepIndexes[index]);
+                dataset.trueLabels = dataset.trueLabels.filter(
+                    (_, index) => labelsToKeepIndexes[index]
+                );
+            }
+        }
+
+        return { datasets, labels };
+    }
+
+    /**
+     * Determines the dataset to which the data point belongs.
+     * @protected
+     * @param {Object} dataPoint
+     * @returns {string}
+     */
+    _getDatasetLabel(dataPoint) {
+        const { measure, measures, domains, mode } = this.metaData;
+        const { labels, originIndex } = dataPoint;
+        if (mode === "pie") {
+            return domains[originIndex].description || "";
+        }
+        // ([origin] + second to last groupBys) or measure
+        let datasetLabel = labels.slice(1).join(SEP);
+        if (domains.length > 1) {
+            datasetLabel =
+                domains[originIndex].description + (datasetLabel ? SEP + datasetLabel : "");
+        }
+        datasetLabel = datasetLabel || measures[measure].string;
+        return datasetLabel;
+    }
+
+    /**
+     * @protected
+     * @param {Object[]} dataPoints
+     * @returns {DateClasses}
+     */
+    _getDateClasses(dataPoints) {
+        const { domains } = this.metaData;
+        const dateSets = domains.map(() => new Set());
+        for (const { labels, originIndex } of dataPoints) {
+            const date = labels[0];
+            dateSets[originIndex].add(date);
+        }
+        const arrays = dateSets.map((dateSet) => [...dateSet]);
+        return new DateClasses(arrays);
+    }
+
+    /**
+     * Eventually filters and sort data points.
+     * @protected
+     * @returns {Object[]}
+     */
+    _getProcessedDataPoints() {
+        const { domains, groupBy, mode, order } = this.metaData;
+        let processedDataPoints = [];
+        if (mode === "line") {
+            processedDataPoints = this.dataPoints.filter(
+                (dataPoint) => dataPoint.labels[0] !== this.env._t("Undefined")
+            );
+        } else {
+            processedDataPoints = this.dataPoints.filter((dataPoint) => dataPoint.count !== 0);
+        }
+
+        if (order !== null && mode !== "pie" && domains.length === 1 && groupBy.length > 0) {
+            // group data by their x-axis value, and then sort datapoints
+            // based on the sum of values by group in ascending/descending order
+            const groupedDataPoints = {};
+            for (const dataPt of processedDataPoints) {
+                const key = dataPt.labels[0]; // = x-axis value under the current assumptions
+                if (!groupedDataPoints[key]) {
+                    groupedDataPoints[key] = [];
+                }
+                groupedDataPoints[key].push(dataPt);
+            }
+            const groups = Object.values(groupedDataPoints);
+            const groupTotal = (group) => group.reduce((sum, dataPt) => sum + dataPt.value, 0);
+            processedDataPoints = sortBy(groups, groupTotal, order.toLowerCase()).flat();
+        }
+
+        return processedDataPoints;
+    }
+
+    /**
+     * Determines whether the set of data points is good. If not, this.data will be (re)set to null
+     * @protected
+     * @param {Object[]}
+     * @returns {boolean}
+     */
+    _isValidData(dataPoints) {
+        const { mode } = this.metaData;
+        let somePositive = false;
+        let someNegative = false;
+        if (mode === "pie") {
+            for (const dataPt of dataPoints) {
+                if (dataPt.value > 0) {
+                    somePositive = true;
+                } else if (dataPt.value < 0) {
+                    someNegative = true;
+                }
+            }
+            if (someNegative && somePositive) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    /**
+     * 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
+     * to separate date groups in the field list, because they can be defined
+     * with an aggregation function, such as my_date:week.
+     * @protected
+     * @param {Object} metaData
+     * @param {boolean} [sample=false]
+     * @returns {Object[]}
+     */
+    async _loadDataPoints(metaData, sample = false) {
+        const { measure, domains, fields, groupBy, resModel } = metaData;
+
+        if (sample && !this._fakeORM) {
+            this._fakeORM = buildSampleORM(
+                resModel,
+                Object.assign({ __count: { type: "integer" } }, fields),
+                this.user
+            );
+        }
+        const orm2use = sample ? this._fakeORM : this.orm;
+
+        const measures = ["__count"];
+        if (measure !== "__count") {
+            let { group_operator, type } = fields[measure];
+            if (type === "many2one") {
+                group_operator = "count_distinct";
+            }
+            if (group_operator === undefined) {
+                throw new Error(
+                    `No aggregate function has been provided for the measure '${measure}'`
+                );
+            }
+            measures.push(`${measure}:${group_operator}`);
+        }
+
+        const proms = [];
+        const numbering = {}; // used to avoid ambiguity with many2one with values with same labels:
+        // for instance [1, "ABC"] [3, "ABC"] should be distinguished.
+        domains.forEach((domain, originIndex) => {
+            proms.push(
+                orm2use
+                    .webReadGroup(
+                        resModel,
+                        domain.arrayRepr,
+                        measures,
+                        groupBy.map((gb) => gb.spec),
+                        { lazy: false }, // what is this thing???
+                        { fill_temporal: true } // + old this.chart.context
+                    )
+                    .then((data) => {
+                        const dataPoints = [];
+                        for (const group of data.groups) {
+                            const { __domain, __count } = group;
+                            const labels = [];
+
+                            for (const gb of groupBy) {
+                                let label;
+                                const val = group[gb.spec];
+                                const fieldName = gb.fieldName;
+                                const { type } = fields[fieldName];
+                                if (type === "boolean") {
+                                    label = `${val}`; // toUpperCase?
+                                } else if (val === false) {
+                                    label = this.env._t("Undefined");
+                                } else if (type === "many2one") {
+                                    const [id, name] = val;
+                                    const key = JSON.stringify([fieldName, name]);
+                                    if (!numbering[key]) {
+                                        numbering[key] = {};
+                                    }
+                                    const numbers = numbering[key];
+                                    if (!numbers[id]) {
+                                        numbers[id] = Object.keys(numbers).length + 1;
+                                    }
+                                    const num = numbers[id];
+                                    label = num === 1 ? name : `${name} (${num})`;
+                                } else if (type === "selection") {
+                                    const selected = fields[fieldName].selection.find(
+                                        (s) => s[0] === val
+                                    );
+                                    label = selected[1];
+                                } else {
+                                    label = val;
+                                }
+                                labels.push(label);
+                            }
+
+                            let value = group[measure];
+                            if (value instanceof Array) {
+                                // case where measure is a many2one and is used as groupBy
+                                value = 1;
+                            }
+                            if (!Number.isInteger(value)) {
+                                metaData.allIntegers = false;
+                            }
+                            dataPoints.push({
+                                count: __count,
+                                domain: __domain,
+                                value,
+                                labels,
+                                originIndex,
+                            });
+                        }
+                        return dataPoints;
+                    })
+            );
+        });
+        const promResults = await Promise.all(proms);
+        return promResults.flat();
+    }
+
+    /**
+     * Process metaData.groupBy in order to keep only the finest interval option for
+     * elements based on date/datetime field (e.g. 'date:year'). This means that
+     * 'week' is prefered to 'month'. The field stays at the place of its first occurence.
+     * For instance,
+     * ['foo', 'date:month', 'bar', 'date:week'] becomes ['foo', 'date:week', 'bar'].
+     * @protected
+     * @param {Object} metaData
+     */
+    _normalize(metaData) {
+        const { fields } = metaData;
+        const groupBy = [];
+        for (const gb of metaData.groupBy) {
+            let ngb = gb;
+            if (typeof gb === "string") {
+                ngb = getGroupBy(gb, fields);
+            }
+            groupBy.push(ngb);
+        }
+
+        const processedGroupBy = [];
+        for (const gb of groupBy) {
+            const { fieldName, interval } = gb;
+            const { store, type } = fields[fieldName];
+            if (
+                !store ||
+                ["id", "__count"].includes(fieldName) ||
+                !GROUPABLE_TYPES.includes(type)
+            ) {
+                continue;
+            }
+            const index = processedGroupBy.findIndex((gb) => gb.fieldName === fieldName);
+            if (index === -1) {
+                processedGroupBy.push(gb);
+            } else if (interval) {
+                const registeredInterval = processedGroupBy[index].interval;
+                if (rankInterval(registeredInterval) < rankInterval(interval)) {
+                    processedGroupBy.splice(index, 1, gb);
+                }
+            }
+        }
+        metaData.groupBy = processedGroupBy;
+
+        metaData.measure = processMeasure(metaData.measure);
+    }
+
+    /**
+     * @protected
+     */
+    async _prepareData() {
+        const processedDataPoints = this._getProcessedDataPoints();
+        this.data = null;
+        if (this._isValidData(processedDataPoints)) {
+            this.data = this._getData(processedDataPoints);
+        }
+    }
+}
+GraphModel.services = ["orm", "user"];
diff --git a/addons/web/static/src/views/graph/graph_renderer.js b/addons/web/static/src/views/graph/graph_renderer.js
new file mode 100644
index 00000000000..da53bed9c89
--- /dev/null
+++ b/addons/web/static/src/views/graph/graph_renderer.js
@@ -0,0 +1,636 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+import { BORDER_WHITE, DEFAULT_BG, getColor, hexToRGBA } from "./colors";
+import { formatFloat } from "@web/fields/formatters";
+import { SEP } from "./graph_model";
+import { sortBy } from "@web/core/utils/arrays";
+import { useAssets } from "@web/core/assets";
+
+const { Component, hooks } = owl;
+const { useRef } = hooks;
+
+const NO_DATA = _lt("No data");
+
+/**
+ * @param {Object} chartArea
+ * @returns {string}
+ */
+function getMaxWidth(chartArea) {
+    const { left, right } = chartArea;
+    return Math.floor((right - left) / 1.618) + "px";
+}
+
+/**
+ * Used to avoid too long legend items.
+ * @param {string|Strin} label
+ * @returns {string} shortened version of the input label
+ */
+function shortenLabel(label) {
+    // string returned could be wrong if a groupby value contain a " / "!
+    const groups = label.toString().split(SEP);
+    let shortLabel = groups.slice(0, 3).join(SEP);
+    if (shortLabel.length > 30) {
+        shortLabel = `${shortLabel.slice(0, 30)}...`;
+    } else if (groups.length > 3) {
+        shortLabel = `${shortLabel}${SEP}...`;
+    }
+    return shortLabel;
+}
+
+export class GraphRenderer extends Component {
+    setup() {
+        this.canvasRef = useRef("canvas");
+        this.containerRef = useRef("container");
+
+        this.chart = null;
+        this.tooltip = null;
+        this.legendTooltip = null;
+
+        useAssets({ jsLibs: ["/web/static/lib/Chart/Chart.js"] });
+    }
+
+    mounted() {
+        this.renderChart();
+    }
+
+    patched() {
+        this.renderChart();
+    }
+
+    willUnmount() {
+        if (this.chart) {
+            this.chart.destroy();
+        }
+    }
+
+    /**
+     * This function aims to remove a suitable number of lines from the
+     * tooltip in order to make it reasonably visible. A message indicating
+     * the number of lines is added if necessary.
+     * @param {HTMLElement} tooltip
+     * @param {number} maxTooltipHeight this the max height in pixels of the tooltip
+     */
+    adjustTooltipHeight(tooltip, maxTooltipHeight) {
+        const sizeOneLine = tooltip.querySelector("tbody tr").clientHeight;
+        const tbodySize = tooltip.querySelector("tbody").clientHeight;
+        const toKeep = Math.max(
+            0,
+            Math.floor((maxTooltipHeight - (tooltip.clientHeight - tbodySize)) / sizeOneLine) - 1
+        );
+        const lines = tooltip.querySelectorAll("tbody tr");
+        const toRemove = lines.length - toKeep;
+        if (toRemove > 0) {
+            for (let index = toKeep; index < lines.length; ++index) {
+                lines[index].remove();
+            }
+            const tr = document.createElement("tr");
+            const td = document.createElement("td");
+            tr.classList.add("o_show_more");
+            td.innerText = this.env._t("...");
+            tr.appendChild(td);
+            tooltip.querySelector("tbody").appendChild(tr);
+        }
+    }
+
+    /**
+     * Creates a custom HTML tooltip.
+     * @param {Object} data
+     * @param {Object} metaData
+     * @param {Object} tooltipModel see chartjs documentation
+     */
+    customTooltip(data, metaData, tooltipModel) {
+        const { measure, measures, disableLinking, mode } = metaData;
+        this.el.style.cursor = "";
+        this.removeTooltips();
+        if (tooltipModel.opacity === 0 || tooltipModel.dataPoints.length === 0) {
+            return;
+        }
+        if (!disableLinking && mode !== "line") {
+            this.el.style.cursor = "pointer";
+        }
+        const chartAreaTop = this.chart.chartArea.top;
+        const viewContentTop = this.el.getBoundingClientRect().top;
+        const innerHTML = this.env.qweb.renderToString("web.GraphRenderer.CustomTooltip", {
+            maxWidth: getMaxWidth(this.chart.chartArea),
+            measure: measures[measure].string,
+            tooltipItems: this.getTooltipItems(data, metaData, tooltipModel),
+        });
+        const template = Object.assign(document.createElement("template"), { innerHTML });
+        const tooltip = template.content.firstChild;
+        this.containerRef.el.prepend(tooltip);
+
+        let top;
+        const tooltipHeight = tooltip.clientHeight;
+        const minTopAllowed = Math.floor(chartAreaTop);
+        const maxTopAllowed = Math.floor(window.innerHeight - (viewContentTop + tooltipHeight)) - 2;
+        const y = Math.floor(tooltipModel.y);
+        if (minTopAllowed <= maxTopAllowed) {
+            // Here we know that the full tooltip can fit in the screen.
+            // We put it in the position where Chart.js would put it
+            // if two conditions are respected:
+            //  1: the tooltip is not cut (because we know it is possible to not cut it)
+            //  2: the tooltip does not hide the legend.
+            // If it is not possible to use the Chart.js proposition (y)
+            // we use the best approximated value.
+            if (y <= maxTopAllowed) {
+                if (y >= minTopAllowed) {
+                    top = y;
+                } else {
+                    top = minTopAllowed;
+                }
+            } else {
+                top = maxTopAllowed;
+            }
+        } else {
+            // Here we know that we cannot satisfy condition 1 above,
+            // so we position the tooltip at the minimal position and
+            // cut it the minimum possible.
+            top = minTopAllowed;
+            const maxTooltipHeight = window.innerHeight - (viewContentTop + chartAreaTop) - 2;
+            this.adjustTooltipHeight(tooltip, maxTooltipHeight);
+        }
+        this.fixTooltipLeftPosition(tooltip, tooltipModel.x);
+        tooltip.style.top = Math.floor(top) + "px";
+
+        this.tooltip = tooltip;
+    }
+
+    /**
+     * Sets best left position of a tooltip approaching the proposal x.
+     * @param {HTMLElement} tooltip
+     * @param {number} x
+     */
+    fixTooltipLeftPosition(tooltip, x) {
+        let left;
+        const tooltipWidth = tooltip.clientWidth;
+        const minLeftAllowed = Math.floor(this.chart.chartArea.left + 2);
+        const maxLeftAllowed = Math.floor(this.chart.chartArea.right - tooltipWidth - 2);
+        x = Math.floor(x);
+        if (x < minLeftAllowed) {
+            left = minLeftAllowed;
+        } else if (x > maxLeftAllowed) {
+            left = maxLeftAllowed;
+        } else {
+            left = x;
+        }
+        tooltip.style.left = `${left}px`;
+    }
+
+    /**
+     * Used to format correctly the values in tooltips and yAxes.
+     * @param {number} value
+     * @param {boolean} [allIntegers=true]
+     * @returns {string}
+     */
+    formatValue(value, allIntegers = true) {
+        const largeNumber = Math.abs(value) >= 1000;
+        if (allIntegers && !largeNumber) {
+            return String(value);
+        }
+        if (largeNumber) {
+            return formatFloat(value, { humanReadable: true, decimals: 2, minDigits: 1 });
+        }
+        return formatFloat(value);
+    }
+
+    /**
+     * Returns the bar chart data
+     * @returns {Object}
+     */
+    getBarChartData() {
+        // style data
+        const { domains, stacked } = this.props.metaData;
+        const { data } = this.props;
+        for (let index = 0; index < data.datasets.length; ++index) {
+            const dataset = data.datasets[index];
+            // used when stacked
+            if (stacked) {
+                dataset.stack = domains[dataset.originIndex].description || "";
+            }
+            // set dataset color
+            dataset.backgroundColor = getColor(index);
+        }
+
+        return data;
+    }
+
+    /**
+     * Returns the chart config.
+     * @returns {Object}
+     */
+    getChartConfig() {
+        const { mode } = this.props.metaData;
+        let data;
+        switch (mode) {
+            case "bar":
+                data = this.getBarChartData();
+                break;
+            case "line":
+                data = this.getLineChartData();
+                break;
+            case "pie":
+                data = this.getPieChartData();
+        }
+        const options = this.prepareOptions();
+        return { data, options, type: mode };
+    }
+
+    /**
+     * Returns an object used to style chart elements independently from
+     * the datasets.
+     * @returns {Object}
+     */
+    getElementOptions() {
+        const { mode } = this.props.metaData;
+        const elementOptions = {};
+        if (mode === "bar") {
+            elementOptions.rectangle = { borderWidth: 1 };
+        } else if (mode === "line") {
+            elementOptions.line = { fill: false, tension: 0 };
+        }
+        return elementOptions;
+    }
+
+    /**
+     * @returns {Object}
+     */
+    getLegendOptions() {
+        const { display, mode } = this.props.metaData;
+        const { data } = this.props;
+        const refLength = mode === "pie" ? data.labels.length : data.datasets.length;
+        const displayLegend = "legend" in display ? display.legend : true;
+        const legendOptions = {
+            display: refLength <= 20 && displayLegend,
+            position: "top",
+            onHover: this.onlegendHover.bind(this),
+            onLeave: this.onLegendLeave.bind(this),
+        };
+        if (mode === "line") {
+            legendOptions.onClick = this.onLegendClick.bind(this);
+        }
+        if (mode === "pie") {
+            legendOptions.labels = {
+                generateLabels: (chart) => {
+                    const { data } = chart;
+                    const metaData = data.datasets.map(
+                        (_, index) => chart.getDatasetMeta(index).data
+                    );
+                    const labels = data.labels.map((label, index) => {
+                        const hidden = metaData.some((data) => data[index] && data[index].hidden);
+                        const fullText = label;
+                        const text = shortenLabel(fullText);
+                        const fillStyle = label === NO_DATA ? DEFAULT_BG : getColor(index);
+                        return { text, fullText, fillStyle, hidden, index };
+                    });
+                    return labels;
+                },
+            };
+        } else {
+            const referenceColor = mode === "bar" ? "backgroundColor" : "borderColor";
+            legendOptions.labels = {
+                generateLabels: (chart) => {
+                    const { data } = chart;
+                    const labels = data.datasets.map((dataset, index) => {
+                        return {
+                            text: shortenLabel(dataset.label),
+                            fullText: dataset.label,
+                            fillStyle: dataset[referenceColor],
+                            hidden: !chart.isDatasetVisible(index),
+                            lineCap: dataset.borderCapStyle,
+                            lineDash: dataset.borderDash,
+                            lineDashOffset: dataset.borderDashOffset,
+                            lineJoin: dataset.borderJoinStyle,
+                            lineWidth: dataset.borderWidth,
+                            strokeStyle: dataset[referenceColor],
+                            pointStyle: dataset.pointStyle,
+                            datasetIndex: index,
+                        };
+                    });
+                    return labels;
+                },
+            };
+        }
+        return legendOptions;
+    }
+
+    /**
+     * Returns line chart data.
+     * @returns {Object}
+     */
+    getLineChartData() {
+        const { groupBy, domains } = this.props.metaData;
+        const { data } = this.props;
+        for (let index = 0; index < data.datasets.length; ++index) {
+            const dataset = data.datasets[index];
+            if (groupBy.length <= 1 && domains.length > 1) {
+                if (dataset.originIndex === 0) {
+                    dataset.fill = "origin";
+                    dataset.backgroundColor = hexToRGBA(getColor(0), 0.4);
+                    dataset.borderColor = getColor(0);
+                } else if (dataset.originIndex === 1) {
+                    dataset.borderColor = getColor(1);
+                } else {
+                    dataset.borderColor = getColor(index);
+                }
+            } else {
+                dataset.borderColor = getColor(index);
+            }
+            if (data.labels.length === 1) {
+                // shift of the real value to right. This is done to
+                // center the points in the chart. See data.labels below in
+                // Chart parameters
+                dataset.data.unshift(undefined);
+                dataset.trueLabels.unshift(undefined);
+                dataset.domains.unshift(undefined);
+            }
+            dataset.pointBackgroundColor = dataset.borderColor;
+            dataset.pointBorderColor = "rgba(0,0,0,0.2)";
+        }
+        if (data.datasets.length === 1) {
+            const dataset = data.datasets[0];
+            dataset.fill = "origin";
+            dataset.backgroundColor = hexToRGBA(getColor(0), 0.4);
+        }
+        // center the points in the chart (without that code they are put
+        // on the left and the graph seems empty)
+        data.labels = data.labels.length > 1 ? data.labels : ["", ...data.labels, ""];
+
+        return data;
+    }
+
+    /**
+     * Returns pie chart data.
+     * @returns {Object}
+     */
+    getPieChartData() {
+        const { domains } = this.props.metaData;
+        const { data } = this.props;
+        // style/complete data
+        // give same color to same groups from different origins
+        const colors = data.labels.map((_, index) => getColor(index));
+        for (const dataset of data.datasets) {
+            dataset.backgroundColor = colors;
+            dataset.borderColor = BORDER_WHITE;
+        }
+        // make sure there is a zone associated with every origin
+        const representedOriginIndexes = new Set(
+            data.datasets.map((dataset) => dataset.originIndex)
+        );
+        let addNoDataToLegend = false;
+        const fakeData = new Array(data.labels.length + 1);
+        fakeData[data.labels.length] = 1;
+        const fakeTrueLabels = new Array(data.labels.length + 1);
+        fakeTrueLabels[data.labels.length] = NO_DATA;
+        for (let index = 0; index < domains.length; ++index) {
+            if (!representedOriginIndexes.has(index)) {
+                data.datasets.push({
+                    label: domains[index].description,
+                    data: fakeData,
+                    trueLabels: fakeTrueLabels,
+                    backgroundColor: [...colors, DEFAULT_BG],
+                    borderColor: BORDER_WHITE,
+                });
+                addNoDataToLegend = true;
+            }
+        }
+        if (addNoDataToLegend) {
+            data.labels.push(NO_DATA);
+        }
+
+        return data;
+    }
+
+    /**
+     * Returns the options used to generate the chart axes.
+     * @returns {Object}
+     */
+    getScaleOptions() {
+        const {
+            allIntegers,
+            display,
+            fields,
+            groupBy,
+            measure,
+            measures,
+            mode,
+        } = this.props.metaData;
+        if (mode === "pie") {
+            return {};
+        }
+        const displayScaleLabels = "scaleLabels" in display ? display.scaleLabels : true;
+        const xAxe = {
+            type: "category",
+            scaleLabel: {
+                display: Boolean(groupBy.length && displayScaleLabels),
+                labelString: groupBy.length ? fields[groupBy[0].fieldName].string : "",
+            },
+        };
+        const yAxe = {
+            type: "linear",
+            scaleLabel: {
+                display: displayScaleLabels,
+                labelString: measures[measure].string,
+            },
+            ticks: {
+                callback: (value) => this.formatValue(value, allIntegers),
+                suggestedMax: 0,
+                suggestedMin: 0,
+            },
+        };
+        return { xAxes: [xAxe], yAxes: [yAxe] };
+    }
+
+    /**
+     * This function extracts the information from the data points in
+     * tooltipModel.dataPoints (corresponding to datapoints over a given
+     * label determined by the mouse position) that will be displayed in a
+     * custom tooltip.
+     * @param {Object} data
+     * @param {Object} metaData
+     * @param {Object} tooltipModel see chartjs documentation
+     * @returns {Object[]}
+     */
+    getTooltipItems(data, metaData, tooltipModel) {
+        const { allIntegers, domains, mode, groupBy } = metaData;
+        const sortedDataPoints = sortBy(tooltipModel.dataPoints, "yLabel", "desc");
+        const items = [];
+        for (const item of sortedDataPoints) {
+            const id = item.index;
+            const dataset = data.datasets[item.datasetIndex];
+            let label = dataset.trueLabels[id];
+            let value = this.formatValue(dataset.data[id], allIntegers);
+            let boxColor;
+            if (mode === "pie") {
+                if (label === NO_DATA) {
+                    value = this.formatValue(0, allIntegers);
+                }
+                if (domains.length > 1) {
+                    label = `${dataset.label} / ${label}`;
+                }
+                boxColor = dataset.backgroundColor[id];
+            } else {
+                if (groupBy.length > 1 || domains.length > 1) {
+                    label = `${label} / ${dataset.label}`;
+                }
+                boxColor = mode === "bar" ? dataset.backgroundColor : dataset.borderColor;
+            }
+            items.push({ id, label, value, boxColor });
+        }
+        return items;
+    }
+
+    /**
+     * Returns the options used to generate chart tooltips.
+     * @returns {Object}
+     */
+    getTooltipOptions() {
+        const { data, metaData } = this.props;
+        const { mode } = metaData;
+        const tooltipOptions = {
+            enabled: false,
+            custom: this.customTooltip.bind(this, data, metaData),
+        };
+        if (mode === "line") {
+            tooltipOptions.mode = "index";
+            tooltipOptions.intersect = false;
+        }
+        return tooltipOptions;
+    }
+
+    /**
+     * If a group has been clicked on, display a view of its records.
+     * @param {MouseEvent} ev
+     */
+    onGraphClicked(ev) {
+        const [activeElement] = this.chart.getElementAtEvent(ev);
+        if (!activeElement) {
+            return;
+        }
+        const { _datasetIndex, _index } = activeElement;
+        const { domains } = this.chart.data.datasets[_datasetIndex];
+        if (domains) {
+            const domain = domains[_index];
+            this.trigger("inspect-domain-records", { domain });
+        }
+    }
+
+    /**
+     * Overrides the default legend 'onClick' behaviour. This is done to
+     * remove all existing tooltips right before updating the chart.
+     * @param {Event} ev
+     * @param {Object} legendItem
+     */
+    onLegendClick(ev, legendItem) {
+        this.removeTooltips();
+        // Default 'onClick' fallback. See web/static/lib/Chart/Chart.js#15138
+        const index = legendItem.datasetIndex;
+        const meta = this.chart.getDatasetMeta(index);
+        meta.hidden = meta.hidden === null ? !this.chart.data.datasets[index].hidden : null;
+        this.chart.update();
+    }
+
+    /**
+     * If the text of a legend item has been shortened and the user mouse
+     * hovers that item (actually the event type is mousemove), a tooltip
+     * with the item full text is displayed.
+     * @param {Event} ev
+     * @param {Object} legendItem
+     */
+    onlegendHover(ev, legendItem) {
+        this.canvasRef.el.style.cursor = "pointer";
+        /**
+         * The string legendItem.text is an initial segment of legendItem.fullText.
+         * If the two coincide, no need to generate a tooltip. If a tooltip
+         * for the legend already exists, it is already good and does not
+         * need to be recreated.
+         */
+        const { fullText, text } = legendItem;
+        if (this.legendTooltip || text === fullText) {
+            return;
+        }
+        const viewContentTop = this.el.getBoundingClientRect().top;
+        const legendTooltip = Object.assign(document.createElement("div"), {
+            className: "o_tooltip_legend",
+            innerText: fullText,
+        });
+        legendTooltip.style.top = `${ev.clientY - viewContentTop}px`;
+        legendTooltip.style.maxWidth = getMaxWidth(this.chart.chartArea);
+        this.containerRef.el.appendChild(legendTooltip);
+        this.fixTooltipLeftPosition(legendTooltip, ev.clientX);
+        this.legendTooltip = legendTooltip;
+    }
+
+    /**
+     * If there's a legend tooltip and the user mouse out of the
+     * corresponding legend item, the tooltip is removed.
+     */
+    onLegendLeave() {
+        this.canvasRef.el.style.cursor = "";
+        this.removeLegendTooltip();
+    }
+
+    /**
+     * Prepares options for the chart according to the current mode
+     * (= chart type). This function returns the parameter options used to
+     * instantiate the chart.
+     */
+    prepareOptions() {
+        const { disableLinking, mode } = this.props.metaData;
+        const options = {
+            maintainAspectRatio: false,
+            scales: this.getScaleOptions(),
+            legend: this.getLegendOptions(),
+            tooltips: this.getTooltipOptions(),
+            elements: this.getElementOptions(),
+        };
+        if (!disableLinking && mode !== "line") {
+            options.onClick = this.onGraphClicked.bind(this);
+        }
+        return options;
+    }
+
+    /**
+     * Removes the legend tooltip (if any).
+     */
+    removeLegendTooltip() {
+        if (this.legendTooltip) {
+            this.legendTooltip.remove();
+            this.legendTooltip = null;
+        }
+    }
+
+    /**
+     * Removes all existing tooltips (if any).
+     */
+    removeTooltips() {
+        if (this.tooltip) {
+            this.tooltip.remove();
+            this.tooltip = null;
+        }
+        this.removeLegendTooltip();
+    }
+
+    /**
+     * Instantiates a Chart (Chart.js lib) to render the graph according to
+     * the current config.
+     */
+    renderChart() {
+        if (this.chart) {
+            this.chart.destroy();
+        }
+        const config = this.getChartConfig();
+        this.chart = new Chart(this.canvasRef.el, config);
+        // To perform its animations, ChartJS will perform each animation
+        // step in the next animation frame. The initial rendering itself
+        // is delayed for consistency. We can avoid this by manually
+        // advancing the animation service.
+        Chart.animationService.advance();
+    }
+}
+
+GraphRenderer.template = "web.GraphRenderer";
+GraphRenderer.props = {
+    data: Object,
+    metaData: Object,
+};
diff --git a/addons/web/static/src/views/graph/graph_renderer.xml b/addons/web/static/src/views/graph/graph_renderer.xml
new file mode 100644
index 00000000000..67eb1259550
--- /dev/null
+++ b/addons/web/static/src/views/graph/graph_renderer.xml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.GraphRenderer.CustomTooltip" owl="1">
+        <div class="o_graph_custom_tooltip">
+            <table>
+                <thead>
+                    <tr>
+                        <th class="o_measure" t-esc="measure"/>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr t-foreach="tooltipItems" t-as="tooltipItem" t-key="tooltipItem.id">
+                        <td>
+                            <span class="o_square" t-attf-style="background-color: {{ tooltipItem.boxColor }}"/>
+                            <span class="o_label" t-attf-style="max-width: {{ maxWidth }}" t-esc="tooltipItem.label"/>
+                        </td>
+                        <td class="o_value" t-esc="tooltipItem.value"/>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </t>
+
+    <t t-name="web.GraphRenderer" owl="1">
+        <div class="o_graph_renderer">
+            <!-- <label t-if="props.metaData.title" t-esc="props.metaData.title"/> -->
+            <div class="o_graph_canvas_container" t-ref="container">
+                <canvas t-ref="canvas"/>
+            </div>
+        </div>
+    </t>
+
+</templates>
\ No newline at end of file
diff --git a/addons/web/static/src/views/graph/graph_view.js b/addons/web/static/src/views/graph/graph_view.js
new file mode 100644
index 00000000000..512bb3ff9f8
--- /dev/null
+++ b/addons/web/static/src/views/graph/graph_view.js
@@ -0,0 +1,177 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+import { ControlPanel } from "@web/search/control_panel/control_panel";
+import { SearchPanel } from "@web/search/search_panel/search_panel";
+import { GraphArchParser, MODES, ORDERS } from "./graph_arch_parser";
+import { GraphModel } from "./graph_model";
+import { GraphRenderer } from "./graph_renderer";
+import { GroupByMenu } from "@web/search/group_by_menu/group_by_menu";
+import { registry } from "@web/core/registry";
+import { standardViewProps } from "@web/views/helpers/standard_view_props";
+import { useModel } from "../helpers/model";
+import { useService } from "@web/core/utils/hooks";
+import { useSetupView } from "@web/views/helpers/view_hook";
+
+const viewRegistry = registry.category("views");
+
+const { Component } = owl;
+
+const KEYS = [
+    "additionalMeasures",
+    "disableLinking",
+    "display",
+    "fields",
+    "fieldAttrs",
+    "groupBy",
+    "measure",
+    "mode",
+    "order",
+    "resModel",
+    "stacked",
+    "title",
+    "useSampleModel",
+];
+
+export class GraphView extends Component {
+    setup() {
+        this.actionService = useService("action");
+
+        let modelParams;
+        if (this.props.state) {
+            modelParams = this.props.state;
+        } else {
+            const { arch, fields } = this.props;
+            const parser = new this.constructor.archParser();
+            const archInfo = parser.parse(arch, fields);
+            modelParams = {};
+            for (const key of KEYS) {
+                modelParams[key] = key in archInfo ? archInfo[key] : this.props[key];
+            }
+        }
+
+        this.model = useModel(this.constructor.Model, modelParams);
+
+        useSetupView({
+            exportLocalState: () => this.model.metaData,
+            saveParams: () => this.saveParams(),
+        });
+    }
+
+    /**
+     * @param {CustomEvent} ev
+     */
+    onInspectDomainRecords(ev) {
+        const { domain } = ev.detail;
+        const { context, resModel, title } = this.model.metaData;
+
+        const views = {};
+        for (const [viewId, viewType] of this.props.info.views || []) {
+            views[viewType] = viewId;
+        }
+        function getView(viewType) {
+            return [views[viewType] || false, viewType];
+        }
+        const actionViews = [getView("list"), getView("form")];
+
+        this.actionService.doAction(
+            {
+                context,
+                domain,
+                name: title,
+                res_model: resModel,
+                target: "current",
+                type: "ir.actions.act_window",
+                views: actionViews,
+            },
+            {
+                viewType: "list",
+            }
+        );
+    }
+
+    /**
+     * @param {CustomEvent} ev
+     */
+    onMeasureSelected(ev) {
+        const { measure } = ev.detail.payload;
+        this.model.updateMetaData({ measure });
+    }
+
+    /**
+     * @param {"bar"|"line"|"pie"} mode
+     */
+    onModeSelected(mode) {
+        this.model.updateMetaData({ mode });
+    }
+
+    /**
+     * @returns {Object}
+     */
+    saveParams() {
+        // expand context object? change keys?
+        const { measure, groupBy, mode } = this.model.metaData;
+        return {
+            context: {
+                graph_measure: measure,
+                graph_mode: mode,
+                graph_groupbys: groupBy.map((gb) => gb.spec),
+            },
+        };
+    }
+
+    /**
+     * @param {"ASC"|"DESC"} order
+     */
+    toggleOrder(order) {
+        const { order: currentOrder } = this.model.metaData;
+        const nextOrder = currentOrder === order ? null : order;
+        this.model.updateMetaData({ order: nextOrder });
+    }
+
+    toggleStacked() {
+        const { stacked } = this.model.metaData;
+        this.model.updateMetaData({ stacked: !stacked });
+    }
+}
+
+GraphView.template = "web.GraphView";
+GraphView.buttonTemplate = "web.GraphView.Buttons";
+
+GraphView.components = { ControlPanel, GroupByMenu, Renderer: GraphRenderer, SearchPanel };
+
+GraphView.defaultProps = {
+    additionalMeasures: [],
+    disableLinking: false,
+    display: {},
+    measure: "__count",
+    mode: "bar",
+    order: null,
+    stacked: true,
+};
+
+GraphView.props = {
+    ...standardViewProps,
+    additionalMeasures: { type: Array, elements: String, optional: true },
+    disableLinking: { type: Boolean, optional: true },
+    display: { type: Object, optional: true },
+    measure: { type: String, optional: true },
+    mode: { validate: (m) => MODES.includes(m), optional: true },
+    order: { validate: (o) => ORDERS.includes(o), optional: true },
+    stacked: { type: Boolean, optional: true },
+    title: { type: String, optional: true },
+};
+
+GraphView.type = "graph";
+
+GraphView.display_name = _lt("Graph");
+GraphView.icon = "fa-bar-chart";
+GraphView.multiRecord = true;
+
+GraphView.Model = GraphModel;
+
+GraphView.archParser = GraphArchParser;
+
+GraphView.searchMenuTypes = ["filter", "groupBy", "comparison", "favorite"];
+
+viewRegistry.add("graph", GraphView);
diff --git a/addons/web/static/src/views/graph/graph_view.scss b/addons/web/static/src/views/graph/graph_view.scss
new file mode 100644
index 00000000000..e88aaaa2939
--- /dev/null
+++ b/addons/web/static/src/views/graph/graph_view.scss
@@ -0,0 +1,81 @@
+.o_graph_view {
+  height: 100%;
+
+  .o_graph_canvas_container {
+    padding-top: 5px;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    top: 0px;
+    left: 0px;
+    canvas {
+      background-color: $o-view-background-color;
+    }
+  }
+
+  div.o_tooltip_legend {
+    background-color: white;
+    color: black;
+    font-size: 12px;
+    border: black solid 0.5px;
+    border-radius: 3px;
+    opacity: 1;
+    position: absolute;
+    padding: 10px;
+    z-index: 2;
+    pointer-events: none;
+    word-break: break-all;
+  }
+
+  div.o_graph_custom_tooltip {
+    border-radius: 3px;
+    background-color: white;
+    border: black solid 0.5px;
+    position: absolute;
+    z-index: 1;
+    padding: 6px;
+    pointer-events: none;
+    opacity: 0.9;
+    font-family: Arial;
+    table {
+      font-size: 12px;
+      overflow: hidden;
+      display: block;
+      border-collapse: collapse;
+    }
+    th.o_measure {
+      color: black;
+      font-weight: bolder;
+      vertical-align: baseline;
+      padding-bottom: 1px;
+    }
+    td {
+      span.o_square {
+        height: 12px;
+        width: 12px;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 5px;
+      }
+      span.o_label {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        color: black;
+        display: inline-block;
+        vertical-align: middle;
+      }
+      &.o_value {
+        color: black;
+        padding-left: 5px;
+        text-align: right;
+        font-weight: bold;
+      }
+    }
+    tr.o_show_more {
+      text-align: center;
+      color: black;
+      font-weight: bolder;
+    }
+  }
+}
diff --git a/addons/web/static/src/views/graph/graph_view.xml b/addons/web/static/src/views/graph/graph_view.xml
new file mode 100644
index 00000000000..4a72f77dc7c
--- /dev/null
+++ b/addons/web/static/src/views/graph/graph_view.xml
@@ -0,0 +1,75 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.GraphView.Buttons" owl="1">
+        <div class="btn-group" role="toolbar" aria-label="Main actions">
+            <div t-on-dropdown-item-selected="onMeasureSelected">
+                <t t-call="web.ReportViewMeasures">
+                    <t t-set="measures" t-value="model.metaData.measures"/>
+                    <t t-set="activeMeasures" t-value="[model.metaData.measure]"/>
+                </t>
+            </div>
+            <GroupByMenu t-if="props.display and props.display['bottom-right'] === false"/>
+        </div>
+        <div class="btn-group ml-4" role="toolbar" aria-label="Change graph">
+            <button class="btn btn-secondary fa fa-bar-chart-o o_graph_button" data-tooltip="Bar Chart" aria-label="Bar Chart" data-mode="bar"
+                t-on-click="onModeSelected('bar')"
+                t-att-class="{ active: model.metaData.mode === 'bar' }"
+            />
+            <button class="btn btn-secondary fa fa-area-chart o_graph_button" data-tooltip="Line Chart" aria-label="Line Chart" data-mode="line"
+                t-on-click="onModeSelected('line')"
+                t-att-class="{ active: model.metaData.mode === 'line' }"
+            />
+            <button class="btn btn-secondary fa fa-pie-chart o_graph_button" data-tooltip="Pie Chart" aria-label="Pie Chart" data-mode="pie"
+                t-on-click="onModeSelected('pie')"
+                t-att-class="{ active: model.metaData.mode === 'pie' }"
+            />
+        </div>
+        <div t-if="model.metaData.mode === 'bar'" class="btn-group ml-3" role="toolbar" aria-label="Change graph">
+            <button class="btn btn-secondary fa fa-database o_graph_button" data-tooltip="Stacked" aria-label="Stacked"
+                t-on-click="toggleStacked"
+                t-att-class="{ active: model.metaData.stacked }"
+            />
+        </div>
+        <div t-if="model.metaData.mode !== 'pie' and env.searchModel.domains.length === 1" class="btn-group ml-3" role="toolbar" aria-label="Sort graph">
+            <button class="btn btn-secondary fa fa-sort-amount-desc o_graph_button" data-tooltip="Descending" aria-label="Descending"
+                t-on-click="toggleOrder('DESC')"
+                t-att-class="{ active: model.metaData.order === 'DESC' }"
+            />
+            <button class="btn btn-secondary fa fa-sort-amount-asc o_graph_button" data-tooltip="Ascending" aria-label="Ascending"
+                t-on-click="toggleOrder('ASC')"
+                t-att-class="{ active: model.metaData.order === 'ASC' }"
+            />
+        </div>
+    </t>
+
+    <t t-name="web.GraphView" owl="1">
+        <div class="o_graph_view" t-att-class="{ o_view_sample_data: model.metaData.useSampleModel }">
+            <ControlPanel t-if="env.searchModel.display.controlPanel" t-props="props.info">
+                <t t-set-slot="control-panel-bottom-left">
+                    <t t-call="{{ constructor.buttonTemplate }}"/>
+                </t>
+            </ControlPanel>
+            <div class="o_content">
+                <SearchPanel t-if="env.searchModel.display.searchPanel" />
+                <t t-if="model.data">
+                    <t t-if="model.metaData.useSampleModel and props.info.noContentHelp" t-call="web.ActionHelper">
+                        <t t-set="noContentHelp" t-value="props.info.noContentHelp"/>
+                    </t>
+                    <Renderer
+                        class="o_renderer"
+                        data="model.data"
+                        metaData="model.metaData"
+                        t-att-class="{ o_sample_data_disabled: model.metaData.useSampleModel }"
+                        t-on-inspect-domain-records="onInspectDomainRecords"
+                    />
+                </t>
+                <t t-else="" t-call="web.NoContentHelper">
+                    <t t-set="title">Invalid data</t>
+                    <t t-set="description">Pie chart cannot mix positive and negative numbers. Try to change your domain to only display positive results</t>
+                </t>
+            </div>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/tests/legacy/views/graph_tests.js b/addons/web/static/tests/legacy/views/graph_tests.js
index 6fe528c9961..ae16c812920 100644
--- a/addons/web/static/tests/legacy/views/graph_tests.js
+++ b/addons/web/static/tests/legacy/views/graph_tests.js
@@ -5,14 +5,17 @@ const searchUtils = require('web.searchUtils');
 const GraphView = require('web.GraphView');
 const testUtils = require('web.test_utils');
 const { sortBy } = require('web.utils');
-
 const { legacyExtraNextTick } = require("@web/../tests/helpers/utils");
 const { createWebClient, doAction } = require('@web/../tests/webclient/helpers');
+const legacyViewRegistry = require("web.view_registry");
+const { registry } = require("@web/core/registry");
 
 const { createView } = testUtils;
 const cpHelpers = testUtils.controlPanel;
 const patchDate = testUtils.mock.patchDate;
 
+const viewRegistry = registry.category("views");
+
 const { INTERVAL_OPTIONS, PERIOD_OPTIONS, COMPARISON_OPTIONS } = searchUtils;
 const INTERVAL_OPTION_IDS = Object.keys(INTERVAL_OPTIONS);
 
@@ -129,7 +132,7 @@ QUnit.module('Views', {
     }
 }, function () {
 
-    QUnit.module('GraphView');
+    QUnit.module('GraphView (legacy)');
 
     QUnit.test('simple graph rendering', async function (assert) {
         assert.expect(5);
@@ -808,6 +811,10 @@ QUnit.module('Views', {
                 </kanban>`,
         };
 
+        viewRegistry.remove("graph");
+        legacyViewRegistry.add("graph", GraphView); // We want to test the legacy view that was not added to viewRegistry!
+        // (see end of registerView in legacy_views.js)
+
         const webClient = await createWebClient({ serverData });
 
         await doAction(webClient, {
@@ -1555,7 +1562,7 @@ QUnit.module('Views', {
         graph.destroy();
     });
 
-    QUnit.module('GraphView: comparison mode', {
+    QUnit.module('GraphView: comparison mode (legacy)', {
         beforeEach: async function () {
             this.data.foo.records[0].date = '2016-12-15';
             this.data.foo.records[1].date = '2016-12-17';
diff --git a/addons/web/static/tests/views/graph_view_tests.js b/addons/web/static/tests/views/graph_view_tests.js
new file mode 100644
index 00000000000..0663027869f
--- /dev/null
+++ b/addons/web/static/tests/views/graph_view_tests.js
@@ -0,0 +1,3291 @@
+/** @odoo-module **/
+
+import { BORDER_WHITE, DEFAULT_BG } from "@web/views/graph/colors";
+import { click, triggerEvent } from "@web/../tests/helpers/utils";
+import { createWebClient, doAction } from "@web/../tests/webclient/helpers";
+import { dialogService } from "@web/core/dialog/dialog_service";
+import { GraphArchParser } from "@web/views/graph/graph_arch_parser";
+import { makeView } from "./helpers";
+import { registry } from "@web/core/registry";
+import { setupControlPanelServiceRegistry } from "@web/../tests/search/helpers";
+import {
+    editFavoriteName,
+    saveFavorite,
+    switchView,
+    toggleFavoriteMenu,
+    toggleFilterMenu,
+    toggleGroupByMenu,
+    toggleMenu,
+    toggleMenuItem,
+    toggleSaveFavorite,
+} from "@web/../tests/search/helpers";
+
+const serviceRegistry = registry.category("services");
+
+function getGraphModelMetaData(graph) {
+    return graph.model.metaData;
+}
+
+export function getGraphRenderer(graph) {
+    return Object.values(graph.__owl__.children).find((c) => c.chart);
+}
+
+function getChart(graph) {
+    return getGraphRenderer(graph).chart;
+}
+
+function checkDatasets(assert, graph, keys, expectedDatasets) {
+    keys = keys instanceof Array ? keys : [keys];
+    expectedDatasets = expectedDatasets instanceof Array ? expectedDatasets : [expectedDatasets];
+    const datasets = getChart(graph).data.datasets;
+    const actualValues = [];
+    for (const dataset of datasets) {
+        const partialDataset = {};
+        for (const key of keys) {
+            partialDataset[key] = dataset[key];
+        }
+        actualValues.push(partialDataset);
+    }
+    assert.deepEqual(actualValues, expectedDatasets);
+}
+
+function checkLabels(assert, graph, expectedLabels) {
+    const labels = getChart(graph).data.labels.map((l) => l.toString());
+    assert.deepEqual(labels, expectedLabels);
+}
+
+function checkLegend(assert, graph, expectedLegendLabels) {
+    expectedLegendLabels =
+        expectedLegendLabels instanceof Array ? expectedLegendLabels : [expectedLegendLabels];
+    const chart = getChart(graph);
+    const actualLegendLabels = chart.config.options.legend.labels
+        .generateLabels(chart)
+        .map((o) => o.text);
+    assert.deepEqual(actualLegendLabels, expectedLegendLabels);
+}
+
+function checkTooltip(assert, graph, expectedTooltipContent, index, datasetIndex) {
+    // If the tooltip options are changed, this helper should change: we construct the dataPoints
+    // similarly to Chart.js according to the values set for the tooltips options 'mode' and 'intersect'.
+    const { datasets } = getChart(graph).data;
+    const dataPoints = [];
+    for (let i = 0; i < datasets.length; i++) {
+        const dataset = datasets[i];
+        const yLabel = dataset.data[index];
+        if (yLabel !== undefined && (datasetIndex === undefined || datasetIndex === i)) {
+            dataPoints.push({
+                datasetIndex: i,
+                index,
+                yLabel,
+            });
+        }
+    }
+    const tooltipModel = { opacity: 1, x: 1, y: 1, dataPoints };
+    getChart(graph).config.options.tooltips.custom(tooltipModel);
+    const { title, lines } = expectedTooltipContent;
+    const lineLabels = [];
+    const lineValues = [];
+    for (const line of lines) {
+        lineLabels.push(line.label);
+        lineValues.push(`${line.value}`);
+    }
+    assert.containsOnce(graph, "div.o_graph_custom_tooltip");
+    const tooltipTitle = graph.el.querySelector("table thead tr th.o_measure");
+    assert.strictEqual(tooltipTitle.innerText, title || "Count", `Tooltip title`);
+    assert.deepEqual(
+        [...graph.el.querySelectorAll("table tbody tr td span.o_label")].map((td) => td.innerText),
+        lineLabels,
+        `Tooltip line labels`
+    );
+    assert.deepEqual(
+        [...graph.el.querySelectorAll("table tbody tr td.o_value")].map((td) => td.innerText),
+        lineValues,
+        `Tooltip line values`
+    );
+}
+
+function getModeButton(comp, mode) {
+    return comp.el.querySelector(`.o_graph_button[data-mode="${mode}"`);
+}
+
+async function selectMode(comp, mode) {
+    await click(getModeButton(comp, mode));
+}
+
+function checkModeIs(assert, graph, mode) {
+    assert.strictEqual(getGraphModelMetaData(graph).mode, mode);
+    assert.strictEqual(getChart(graph).config.type, mode);
+    assert.hasClass(getModeButton(graph, mode), "active");
+}
+
+function getXAxeLabel(graph) {
+    return getChart(graph).config.options.scales.xAxes[0].scaleLabel.labelString;
+}
+
+function getYAxeLabel(graph) {
+    return getChart(graph).config.options.scales.yAxes[0].scaleLabel.labelString;
+}
+
+async function clickOnDataset(graph) {
+    const chart = getChart(graph);
+    const meta = chart.getDatasetMeta(0);
+    const rectangle = chart.canvas.getBoundingClientRect();
+    const point = meta.data[0].getCenterPoint();
+    await triggerEvent(chart.canvas, null, "click", {
+        pageX: rectangle.left + point.x,
+        pageY: rectangle.top + point.y,
+    });
+}
+
+let serverData;
+QUnit.module("Views", (hooks) => {
+    hooks.beforeEach(async () => {
+        serverData = {
+            models: {
+                foo: {
+                    fields: {
+                        id: { string: "Id", type: "integer" },
+                        foo: { string: "Foo", type: "integer", store: true, group_operator: "sum" },
+                        bar: { string: "bar", type: "boolean", store: true },
+                        product_id: {
+                            string: "Product",
+                            type: "many2one",
+                            relation: "product",
+                            store: true,
+                        },
+                        color_id: {
+                            string: "Color",
+                            type: "many2one",
+                            relation: "color",
+                            store: true,
+                        },
+                        date: { string: "Date", type: "date", store: true, sortable: true },
+                        revenue: {
+                            string: "Revenue",
+                            type: "float",
+                            store: true,
+                            group_operator: "sum",
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            foo: 3,
+                            bar: true,
+                            product_id: 37,
+                            date: "2016-01-01",
+                            revenue: 1,
+                        },
+                        {
+                            id: 2,
+                            foo: 53,
+                            bar: true,
+                            product_id: 37,
+                            color_id: 7,
+                            date: "2016-01-03",
+                            revenue: 2,
+                        },
+                        {
+                            id: 3,
+                            foo: 2,
+                            bar: true,
+                            product_id: 37,
+                            date: "2016-03-04",
+                            revenue: 3,
+                        },
+                        {
+                            id: 4,
+                            foo: 24,
+                            bar: false,
+                            product_id: 37,
+                            date: "2016-03-07",
+                            revenue: 4,
+                        },
+                        {
+                            id: 5,
+                            foo: 4,
+                            bar: false,
+                            product_id: 41,
+                            date: "2016-05-01",
+                            revenue: 5,
+                        },
+                        { id: 6, foo: 63, bar: false, product_id: 41 },
+                        { id: 7, foo: 42, bar: false, product_id: 41 },
+                        {
+                            id: 8,
+                            foo: 48,
+                            bar: false,
+                            product_id: 41,
+                            date: "2016-04-01",
+                            revenue: 8,
+                        },
+                    ],
+                },
+                product: {
+                    fields: {
+                        id: { string: "Id", type: "integer" },
+                        name: { string: "Product Name", type: "char" },
+                    },
+                    records: [
+                        {
+                            id: 37,
+                            display_name: "xphone",
+                        },
+                        {
+                            id: 41,
+                            display_name: "xpad",
+                        },
+                    ],
+                },
+                color: {
+                    fields: {
+                        id: { string: "Id", type: "integer" },
+                        name: { string: "Color", type: "char" },
+                    },
+                    records: [
+                        {
+                            id: 7,
+                            display_name: "red",
+                        },
+                        {
+                            id: 14,
+                            display_name: "black",
+                        },
+                    ],
+                },
+            },
+            views: {
+                "foo,false,graph": `<graph/>`,
+                "foo,false,search": `
+                    <search>
+                        <filter name="false_domain" string="False Domain" domain="[(0, '=', 1)]"/>
+                        <filter name="filter_with_context"
+                            string="Filter With Context"
+                            domain="[]"
+                            context="{ 'graph_measure': 'foo', 'graph_mode': 'line', 'graph_groupbys': ['color_id'] }"
+                            />
+                        <filter name="group_by_color" string="Color" context="{ 'group_by': 'color_id' }"/>
+                        <filter name="group_by_product" string="Product" context="{ 'group_by': 'product_id' }"/>
+                    </search>
+                `,
+            },
+        };
+        setupControlPanelServiceRegistry();
+        serviceRegistry.add("dialog", dialogService);
+    });
+
+    QUnit.module("GraphView");
+
+    QUnit.test("simple bar chart rendering", async function (assert) {
+        assert.expect(12);
+        const graph = await makeView({ serverData, type: "graph", resModel: "foo" });
+        const { measure, mode, order, stacked } = getGraphModelMetaData(graph);
+        assert.containsOnce(graph, "div.o_graph_canvas_container canvas");
+        assert.strictEqual(measure, "__count", `the active measure should be "__count" by default`);
+        assert.strictEqual(mode, "bar", "should be in bar chart mode by default");
+        assert.strictEqual(order, null, "should not be ordered by default");
+        assert.strictEqual(stacked, true, "bar charts should be stacked by default");
+        checkLabels(assert, graph, ["Total"]);
+        checkDatasets(assert, graph, ["backgroundColor", "borderColor", "data", "label", "stack"], {
+            backgroundColor: "#1f77b4",
+            borderColor: undefined,
+            data: [8],
+            label: "Count",
+            stack: "",
+        });
+        checkLegend(assert, graph, "Count");
+        checkTooltip(assert, graph, { lines: [{ label: "Total", value: "8" }] }, 0);
+    });
+
+    QUnit.test("simple bar chart rendering with no data", async function (assert) {
+        assert.expect(4);
+        serverData.models.foo.records = [];
+        const graph = await makeView({ serverData, type: "graph", resModel: "foo" });
+        assert.containsOnce(graph, "div.o_graph_canvas_container canvas");
+        assert.containsNone(graph, ".o_nocontent_help");
+        checkLabels(assert, graph, []);
+        checkDatasets(assert, graph, [], []);
+    });
+
+    QUnit.test("simple bar chart rendering (one groupBy)", async function (assert) {
+        assert.expect(12);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `<graph><field name="bar"/></graph>`,
+        });
+        assert.containsOnce(graph.el, "div.o_graph_canvas_container canvas");
+        checkLabels(assert, graph, ["true", "false"]);
+        checkDatasets(assert, graph, ["backgroundColor", "borderColor", "data", "label"], {
+            backgroundColor: "#1f77b4",
+            borderColor: undefined,
+            data: [3, 5],
+            label: "Count",
+        });
+        checkLegend(assert, graph, "Count");
+        checkTooltip(assert, graph, { lines: [{ label: "true", value: "3" }] }, 0);
+        checkTooltip(assert, graph, { lines: [{ label: "false", value: "5" }] }, 1);
+    });
+
+    QUnit.test("simple bar chart rendering (two groupBy)", async function (assert) {
+        assert.expect(20);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph>
+                    <field name="bar"/>
+                    <field name="product_id"/>
+                </graph>
+            `,
+        });
+        assert.containsOnce(graph.el, "div.o_graph_canvas_container canvas");
+        checkLabels(assert, graph, ["true", "false"]);
+        checkDatasets(
+            assert,
+            graph,
+            ["backgroundColor", "borderColor", "data", "label"],
+            [
+                {
+                    backgroundColor: "#1f77b4",
+                    borderColor: undefined,
+                    data: [3, 1],
+                    label: "xphone",
+                },
+                {
+                    backgroundColor: "#ff7f0e",
+                    borderColor: undefined,
+                    data: [0, 4],
+                    label: "xpad",
+                },
+            ]
+        );
+        checkLegend(assert, graph, ["xphone", "xpad"]);
+        checkTooltip(assert, graph, { lines: [{ label: "true / xphone", value: "3" }] }, 0, 0);
+        checkTooltip(assert, graph, { lines: [{ label: "false / xphone", value: "1" }] }, 1, 0);
+        checkTooltip(assert, graph, { lines: [{ label: "true / xpad", value: "0" }] }, 0, 1);
+        checkTooltip(assert, graph, { lines: [{ label: "false / xpad", value: "4" }] }, 1, 1);
+    });
+
+    QUnit.test("bar chart rendering (no groupBy, several domains)", async function (assert) {
+        assert.expect(11);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph>
+                    <field name="revenue" type="measure"/>
+                </graph>
+            `,
+            groupBy: [],
+            domains: [
+                { arrayRepr: [["bar", "=", true]], description: "True group" },
+                { arrayRepr: [["bar", "=", false]], description: "False group" },
+            ],
+        });
+        checkLabels(assert, graph, ["Total"]);
+        checkDatasets(
+            assert,
+            graph,
+            ["backgroundColor", "borderColor", "data", "label"],
+            [
+                {
+                    backgroundColor: "#1f77b4",
+                    borderColor: undefined,
+                    data: [6],
+                    label: "True group",
+                },
+                {
+                    backgroundColor: "#ff7f0e",
+                    borderColor: undefined,
+                    data: [17],
+                    label: "False group",
+                },
+            ]
+        );
+        checkLegend(assert, graph, ["True group", "False group"]);
+        checkTooltip(
+            assert,
+            graph,
+            {
+                title: "Revenue",
+                lines: [{ label: "Total / True group", value: "6" }],
+            },
+            0,
+            0
+        );
+        checkTooltip(
+            assert,
+            graph,
+            {
+                title: "Revenue",
+                lines: [{ label: "Total / False group", value: "17" }],
+            },
+            0,
+            1
+        );
+    });
+
+    QUnit.test("bar chart rendering (one groupBy, several domains)", async function (assert) {
+        assert.expect(19);
+        serverData.models.foo.records = [
+            { bar: true, foo: 1, revenue: 14 },
+            { bar: true, foo: 2, revenue: false },
+            { bar: false, foo: 1, revenue: 12 },
+            { bar: false, foo: 2, revenue: -4 },
+            { bar: false, foo: 3, revenue: 2 },
+            { bar: false, foo: 4, revenue: 0 },
+        ];
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph>
+                    <field name="revenue" type="measure"/>
+                    <field name="foo"/>
+                </graph>
+            `,
+            domains: [
+                { arrayRepr: [["bar", "=", true]], description: "True group" },
+                { arrayRepr: [["bar", "=", false]], description: "False group" },
+            ],
+        });
+        checkLabels(assert, graph, ["1", "2", "3", "4"]);
+        checkDatasets(
+            assert,
+            graph,
+            ["backgroundColor", "borderColor", "data", "label"],
+            [
+                {
+                    backgroundColor: "#1f77b4",
+                    borderColor: undefined,
+                    data: [14, 0, 0, 0],
+                    label: "True group",
+                },
+                {
+                    backgroundColor: "#ff7f0e",
+                    borderColor: undefined,
+                    data: [12, -4, 2, 0],
+                    label: "False group",
+                },
+            ]
+        );
+        checkLegend(assert, graph, ["True group", "False group"]);
+        checkTooltip(
+            assert,
+            graph,
+            {
+                title: "Revenue",
+                lines: [{ label: "1 / True group", value: "14" }],
+            },
+            0,
+            0
+        );
+        checkTooltip(
+            assert,
+            graph,
+            {
+                title: "Revenue",
+                lines: [{ label: "1 / False group", value: "12" }],
+            },
+            0,
+            1
+        );
+        checkTooltip(
+            assert,
+            graph,
+            {
+                title: "Revenue",
+                lines: [{ label: "2 / False group", value: "-4" }],
+            },
+            1,
+            1
+        );
+        checkTooltip(
+            assert,
+            graph,
+            {
+                title: "Revenue",
+                lines: [{ label: "3 / False group", value: "2" }],
+            },
+            2,
+            1
+        );
+    });
+
+    QUnit.test(
+        "bar chart rendering (one groupBy, several domains with date identification)",
+        async function (assert) {
+            assert.expect(23);
+            serverData.models.foo.records = [
+                { date: "2021-01-04", revenue: 12 },
+                { date: "2021-01-12", revenue: 5 },
+                { date: "2021-01-19", revenue: 15 },
+                { date: "2021-01-26", revenue: 2 },
+                { date: "2021-02-04", revenue: 14 },
+                { date: "2021-02-17", revenue: false },
+                { date: false, revenue: 0 },
+            ];
+            const domains = [
+                {
+                    arrayRepr: [
+                        ["date", ">=", "2021-02-01"],
+                        ["date", "<=", "2021-02-28"],
+                    ],
+                    description: "February 2021",
+                },
+                {
+                    arrayRepr: [
+                        ["date", ">=", "2021-01-01"],
+                        ["date", "<=", "2021-01-31"],
+                    ],
+                    description: "January 2021",
+                },
+            ];
+            domains.fieldName = "date";
+            const graph = await makeView({
+                serverData,
+                type: "graph",
+                resModel: "foo",
+                arch: `
+                    <graph>
+                        <field name="revenue" type="measure"/>
+                        <field name="date" interval="week"/>
+                    </graph>
+                `,
+                domains,
+            });
+            checkLabels(assert, graph, ["W05 2021", "W07 2021", "", ""]);
+            checkDatasets(
+                assert,
+                graph,
+                ["backgroundColor", "borderColor", "data", "label"],
+                [
+                    {
+                        backgroundColor: "#1f77b4",
+                        borderColor: undefined,
+                        data: [14, 0],
+                        label: "February 2021",
+                    },
+                    {
+                        backgroundColor: "#ff7f0e",
+                        borderColor: undefined,
+                        data: [12, 5, 15, 2],
+                        label: "January 2021",
+                    },
+                ]
+            );
+            checkLegend(assert, graph, ["February 2021", "January 2021"]);
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    title: "Revenue",
+                    lines: [{ label: "W05 2021 / February 2021", value: "14" }],
+                },
+                0,
+                0
+            );
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    title: "Revenue",
+                    lines: [{ label: "W01 2021 / January 2021", value: "12" }],
+                },
+                0,
+                1
+            );
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    title: "Revenue",
+                    lines: [{ label: "W02 2021 / January 2021", value: "5" }],
+                },
+                1,
+                1
+            );
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    title: "Revenue",
+                    lines: [{ label: "W03 2021 / January 2021", value: "15" }],
+                },
+                2,
+                1
+            );
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    title: "Revenue",
+                    lines: [{ label: "W04 2021 / January 2021", value: "2" }],
+                },
+                3,
+                1
+            );
+        }
+    );
+
+    QUnit.test(
+        "bar chart rendering (two groupBy, several domains with no date identification)",
+        async function (assert) {
+            assert.expect(15);
+            serverData.models.foo.records = [
+                { date: "2021-01-04", bar: true, revenue: 12 },
+                { date: "2021-01-12", bar: false, revenue: 5 },
+                { date: "2021-02-04", bar: true, revenue: 14 },
+                { date: "2021-02-17", bar: false, revenue: false },
+                { date: false, bar: true, revenue: 0 },
+            ];
+            const domains = [
+                {
+                    arrayRepr: [
+                        ["date", ">=", "2021-02-01"],
+                        ["date", "<=", "2021-02-28"],
+                    ],
+                    description: "February 2021",
+                },
+                {
+                    arrayRepr: [
+                        ["date", ">=", "2021-01-01"],
+                        ["date", "<=", "2021-01-31"],
+                    ],
+                    description: "January 2021",
+                },
+            ];
+            domains.fieldName = "date";
+            const graph = await makeView({
+                serverData,
+                type: "graph",
+                resModel: "foo",
+                arch: `
+                    <graph>
+                        <field name="revenue" type="measure"/>
+                        <field name="bar"/>
+                        <field name="date" interval="week"/>
+                    </graph>
+                `,
+                domains,
+            });
+            checkLabels(assert, graph, ["true", "false"]);
+            checkDatasets(
+                assert,
+                graph,
+                ["backgroundColor", "borderColor", "data", "label"],
+                [
+                    {
+                        backgroundColor: "#1f77b4",
+                        borderColor: undefined,
+                        data: [14, 0],
+                        label: "February 2021 / W05 2021",
+                    },
+                    {
+                        backgroundColor: "#ff7f0e",
+                        borderColor: undefined,
+                        data: [0, 0],
+                        label: "February 2021 / W07 2021",
+                    },
+                    {
+                        backgroundColor: "#aec7e8",
+                        borderColor: undefined,
+                        data: [12, 0],
+                        label: "January 2021 / W01 2021",
+                    },
+                    {
+                        backgroundColor: "#ffbb78",
+                        borderColor: undefined,
+                        data: [0, 5],
+                        label: "January 2021 / W02 2021",
+                    },
+                ]
+            );
+            checkLegend(assert, graph, [
+                "February 2021 / W05 2021",
+                "February 2021 / W07 2021",
+                "January 2021 / W01 2021",
+                "January 2021 / W02 2021",
+            ]);
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    title: "Revenue",
+                    lines: [{ label: "true / February 2021 / W05 2021", value: "14" }],
+                },
+                0,
+                0
+            );
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    title: "Revenue",
+                    lines: [{ label: "true / January 2021 / W01 2021", value: "12" }],
+                },
+                0,
+                2
+            );
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    title: "Revenue",
+                    lines: [{ label: "false / January 2021 / W02 2021", value: "5" }],
+                },
+                1,
+                3
+            );
+        }
+    );
+
+    QUnit.test("line chart rendering (no groupBy)", async function (assert) {
+        assert.expect(9);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `<graph type="line"/>`,
+        });
+        assert.containsOnce(graph.el, "div.o_graph_canvas_container canvas");
+        const { mode } = getGraphModelMetaData(graph);
+        assert.strictEqual(mode, "line");
+        checkLabels(assert, graph, ["", "Total", ""]);
+        checkDatasets(assert, graph, ["backgroundColor", "borderColor", "data", "label", "stack"], {
+            backgroundColor: "rgba(31,119,180,0.4)",
+            borderColor: "#1f77b4",
+            data: [undefined, 8],
+            label: "Count",
+            stack: undefined,
+        });
+        checkLegend(assert, graph, "Count");
+        checkTooltip(assert, graph, { lines: [{ label: "Total", value: "8" }] }, 1);
+    });
+
+    QUnit.test("line chart rendering (one groupBy)", async function (assert) {
+        assert.expect(12);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph type="line">
+                    <field name="bar"/>
+                </graph>
+            `,
+        });
+        assert.containsOnce(graph.el, "div.o_graph_canvas_container canvas");
+        checkLabels(assert, graph, ["true", "false"]);
+        checkDatasets(assert, graph, ["backgroundColor", "borderColor", "data", "label"], {
+            backgroundColor: "rgba(31,119,180,0.4)",
+            borderColor: "#1f77b4",
+            data: [3, 5],
+            label: "Count",
+        });
+        checkLegend(assert, graph, "Count");
+        checkTooltip(assert, graph, { lines: [{ label: "true", value: "3" }] }, 0);
+        checkTooltip(assert, graph, { lines: [{ label: "false", value: "5" }] }, 1);
+    });
+
+    QUnit.test("line chart rendering (two groupBy)", async function (assert) {
+        assert.expect(12);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph type="line">
+                    <field name="bar"/>
+                    <field name="product_id"/>
+                </graph>
+            `,
+        });
+        assert.containsOnce(graph.el, "div.o_graph_canvas_container canvas");
+        checkLabels(assert, graph, ["true", "false"]);
+        checkDatasets(
+            assert,
+            graph,
+            ["backgroundColor", "borderColor", "data", "label"],
+            [
+                {
+                    backgroundColor: undefined,
+                    borderColor: "#1f77b4",
+                    data: [3, 1],
+                    label: "xphone",
+                },
+                {
+                    backgroundColor: undefined,
+                    borderColor: "#ff7f0e",
+                    data: [0, 4],
+                    label: "xpad",
+                },
+            ]
+        );
+        checkLegend(assert, graph, ["xphone", "xpad"]);
+        checkTooltip(
+            assert,
+            graph,
+            {
+                lines: [
+                    { label: "true / xphone", value: "3" },
+                    { label: "true / xpad", value: "0" },
+                ],
+            },
+            0
+        );
+        checkTooltip(
+            assert,
+            graph,
+            {
+                lines: [
+                    { label: "false / xpad", value: "4" },
+                    { label: "false / xphone", value: "1" },
+                ],
+            },
+            1
+        );
+    });
+
+    QUnit.test("line chart rendering (no groupBy, several domains)", async function (assert) {
+        assert.expect(7);
+        const graph = await makeView({
+            serverData,
+            resModel: "foo",
+            type: "graph",
+            arch: `
+                <graph type="line">
+                    <field name="revenue" type="measure"/>
+                </graph>
+            `,
+            domains: [
+                { arrayRepr: [["bar", "=", true]], description: "True group" },
+                { arrayRepr: [["bar", "=", false]], description: "False group" },
+            ],
+        });
+        checkLabels(assert, graph, ["", "Total", ""]);
+        checkDatasets(
+            assert,
+            graph,
+            ["backgroundColor", "borderColor", "data", "label"],
+            [
+                {
+                    backgroundColor: "rgba(31,119,180,0.4)",
+                    borderColor: "#1f77b4",
+                    data: [undefined, 6],
+                    label: "True group",
+                },
+                {
+                    backgroundColor: undefined,
+                    borderColor: "#ff7f0e",
+                    data: [undefined, 17],
+                    label: "False group",
+                },
+            ]
+        );
+        checkLegend(assert, graph, ["True group", "False group"]);
+        checkTooltip(
+            assert,
+            graph,
+            {
+                title: "Revenue",
+                lines: [
+                    { label: "Total / False group", value: "17" },
+                    { label: "Total / True group", value: "6" },
+                ],
+            },
+            1
+        );
+    });
+
+    QUnit.test("line chart rendering (one groupBy, several domains)", async function (assert) {
+        assert.expect(19);
+        serverData.models.foo.records = [
+            { bar: true, foo: 1, revenue: 14 },
+            { bar: true, foo: 2, revenue: false },
+            { bar: false, foo: 1, revenue: 12 },
+            { bar: false, foo: 2, revenue: -4 },
+            { bar: false, foo: 3, revenue: 2 },
+            { bar: false, foo: 4, revenue: 0 },
+        ];
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph type="line">
+                    <field name="revenue" type="measure"/>
+                    <field name="foo"/>
+                </graph>
+            `,
+            domains: [
+                { arrayRepr: [["bar", "=", true]], description: "True group" },
+                { arrayRepr: [["bar", "=", false]], description: "False group" },
+            ],
+        });
+        checkLabels(assert, graph, ["1", "2", "3", "4"]);
+        checkDatasets(
+            assert,
+            graph,
+            ["backgroundColor", "borderColor", "data", "label"],
+            [
+                {
+                    backgroundColor: "rgba(31,119,180,0.4)",
+                    borderColor: "#1f77b4",
+                    data: [14, 0, 0, 0],
+                    label: "True group",
+                },
+                {
+                    backgroundColor: undefined,
+                    borderColor: "#ff7f0e",
+                    data: [12, -4, 2, 0],
+                    label: "False group",
+                },
+            ]
+        );
+        checkLegend(assert, graph, ["True group", "False group"]);
+        checkTooltip(
+            assert,
+            graph,
+            {
+                title: "Revenue",
+                lines: [
+                    { label: "1 / True group", value: "14" },
+                    { label: "1 / False group", value: "12" },
+                ],
+            },
+            0
+        );
+        checkTooltip(
+            assert,
+            graph,
+            {
+                title: "Revenue",
+                lines: [
+                    { label: "2 / True group", value: "0" },
+                    { label: "2 / False group", value: "-4" },
+                ],
+            },
+            1
+        );
+        checkTooltip(
+            assert,
+            graph,
+            {
+                title: "Revenue",
+                lines: [
+                    { label: "3 / False group", value: "2" },
+                    { label: "3 / True group", value: "0" },
+                ],
+            },
+            2
+        );
+        checkTooltip(
+            assert,
+            graph,
+            {
+                title: "Revenue",
+                lines: [
+                    { label: "4 / True group", value: "0" },
+                    { label: "4 / False group", value: "0" },
+                ],
+            },
+            3
+        );
+    });
+
+    QUnit.test(
+        "line chart rendering (one groupBy, several domains with date identification)",
+        async function (assert) {
+            assert.expect(19);
+            serverData.models.foo.records = [
+                { date: "2021-01-04", revenue: 12 },
+                { date: "2021-01-12", revenue: 5 },
+                { date: "2021-01-19", revenue: 15 },
+                { date: "2021-01-26", revenue: 2 },
+                { date: "2021-02-04", revenue: 14 },
+                { date: "2021-02-17", revenue: false },
+                { date: false, revenue: 0 },
+            ];
+            const domains = [
+                {
+                    arrayRepr: [
+                        ["date", ">=", "2021-02-01"],
+                        ["date", "<=", "2021-02-28"],
+                    ],
+                    description: "February 2021",
+                },
+                {
+                    arrayRepr: [
+                        ["date", ">=", "2021-01-01"],
+                        ["date", "<=", "2021-01-31"],
+                    ],
+                    description: "January 2021",
+                },
+            ];
+            domains.fieldName = "date";
+            const graph = await makeView({
+                serverData,
+                type: "graph",
+                resModel: "foo",
+                arch: `
+                    <graph type="line">
+                        <field name="revenue" type="measure"/>
+                        <field name="date" interval="week"/>
+                    </graph>
+                `,
+                domains,
+            });
+            checkLabels(assert, graph, ["W05 2021", "W07 2021", "", ""]);
+            checkDatasets(
+                assert,
+                graph,
+                ["backgroundColor", "borderColor", "data", "label"],
+                [
+                    {
+                        backgroundColor: "rgba(31,119,180,0.4)",
+                        borderColor: "#1f77b4",
+                        data: [14, 0],
+                        label: "February 2021",
+                    },
+                    {
+                        backgroundColor: undefined,
+                        borderColor: "#ff7f0e",
+                        data: [12, 5, 15, 2],
+                        label: "January 2021",
+                    },
+                ]
+            );
+            checkLegend(assert, graph, ["February 2021", "January 2021"]);
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    title: "Revenue",
+                    lines: [
+                        { label: "W05 2021 / February 2021", value: "14" },
+                        { label: "W01 2021 / January 2021", value: "12" },
+                    ],
+                },
+                0
+            );
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    title: "Revenue",
+                    lines: [
+                        { label: "W02 2021 / January 2021", value: "5" },
+                        { label: "W07 2021 / February 2021", value: "0" },
+                    ],
+                },
+                1
+            );
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    title: "Revenue",
+                    lines: [{ label: "W03 2021 / January 2021", value: "15" }],
+                },
+                2
+            );
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    title: "Revenue",
+                    lines: [{ label: "W04 2021 / January 2021", value: "2" }],
+                },
+                3
+            );
+        }
+    );
+
+    QUnit.test(
+        "line chart rendering (two groupBy, several domains with no date identification)",
+        async function (assert) {
+            assert.expect(11);
+            serverData.models.foo.records = [
+                { date: "2021-01-04", bar: true, revenue: 12 },
+                { date: "2021-01-12", bar: false, revenue: 5 },
+                { date: "2021-02-04", bar: true, revenue: 14 },
+                { date: "2021-02-17", bar: false, revenue: false },
+                { date: false, bar: true, revenue: 0 },
+            ];
+            const domains = [
+                {
+                    arrayRepr: [
+                        ["date", ">=", "2021-02-01"],
+                        ["date", "<=", "2021-02-28"],
+                    ],
+                    description: "February 2021",
+                },
+                {
+                    arrayRepr: [
+                        ["date", ">=", "2021-01-01"],
+                        ["date", "<=", "2021-01-31"],
+                    ],
+                    description: "January 2021",
+                },
+            ];
+            domains.fieldName = "date";
+            const graph = await makeView({
+                serverData,
+                type: "graph",
+                resModel: "foo",
+                arch: `
+                    <graph type="line">
+                        <field name="revenue" type="measure"/>
+                        <field name="bar"/>
+                        <field name="date" interval="week"/>
+                    </graph>
+                `,
+                domains,
+            });
+            checkLabels(assert, graph, ["true", "false"]);
+            checkDatasets(
+                assert,
+                graph,
+                ["backgroundColor", "borderColor", "data", "label"],
+                [
+                    {
+                        backgroundColor: undefined,
+                        borderColor: "#1f77b4",
+                        data: [14, 0],
+                        label: "February 2021 / W05 2021",
+                    },
+                    {
+                        backgroundColor: undefined,
+                        borderColor: "#ff7f0e",
+                        data: [0, 0],
+                        label: "February 2021 / W07 2021",
+                    },
+                    {
+                        backgroundColor: undefined,
+                        borderColor: "#aec7e8",
+                        data: [12, 0],
+                        label: "January 2021 / W01 2021",
+                    },
+                    {
+                        backgroundColor: undefined,
+                        borderColor: "#ffbb78",
+                        data: [0, 5],
+                        label: "January 2021 / W02 2021",
+                    },
+                ]
+            );
+            checkLegend(assert, graph, [
+                "February 2021 / W05 2021",
+                "February 2021 / W07 2021",
+                "January 2021 / W01 2021",
+                "January 2021 / W02 2021",
+            ]);
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    title: "Revenue",
+                    lines: [
+                        { label: "true / February 2021 / W05 2021", value: "14" },
+                        { label: "true / January 2021 / W01 2021", value: "12" },
+                        { label: "true / February 2021 / W07 2021", value: "0" },
+                        { label: "true / January 2021 / W02 2021", value: "0" },
+                    ],
+                },
+                0
+            );
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    title: "Revenue",
+                    lines: [
+                        { label: "false / January 2021 / W02 2021", value: "5" },
+                        { label: "false / February 2021 / W05 2021", value: "0" },
+                        { label: "false / February 2021 / W07 2021", value: "0" },
+                        { label: "false / January 2021 / W01 2021", value: "0" },
+                    ],
+                },
+                1
+            );
+        }
+    );
+
+    QUnit.test("displaying line chart with only 1 data point", async function (assert) {
+        assert.expect(1);
+        // this test makes sure the line chart does not crash when only one data
+        // point is displayed.
+        serverData.models.foo.records = serverData.models.foo.records.slice(0, 1);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `<graph type="line"/>`,
+        });
+        assert.containsOnce(graph, "canvas", "should have a canvas");
+    });
+
+    QUnit.test("pie chart rendering (no groupBy)", async function (assert) {
+        assert.expect(9);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `<graph type="pie"/>`,
+        });
+        assert.containsOnce(graph.el, "div.o_graph_canvas_container canvas");
+        const { mode } = getGraphModelMetaData(graph);
+        assert.strictEqual(mode, "pie");
+        checkLabels(assert, graph, ["Total"]);
+        checkDatasets(assert, graph, ["backgroundColor", "borderColor", "data", "label", "stack"], {
+            backgroundColor: ["#1f77b4"],
+            borderColor: BORDER_WHITE,
+            data: [8],
+            label: "",
+            stack: undefined,
+        });
+        checkLegend(assert, graph, "Total");
+        checkTooltip(assert, graph, { lines: [{ label: "Total", value: "8" }] }, 0);
+    });
+
+    QUnit.test("pie chart rendering (one groupBy)", async function (assert) {
+        assert.expect(12);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph type="pie">
+                    <field name="bar"/>
+                </graph>
+            `,
+        });
+        assert.containsOnce(graph.el, "div.o_graph_canvas_container canvas");
+        checkLabels(assert, graph, ["true", "false"]);
+        checkDatasets(assert, graph, ["backgroundColor", "borderColor", "data"], {
+            backgroundColor: ["#1f77b4", "#ff7f0e"],
+            borderColor: BORDER_WHITE,
+            data: [3, 5],
+        });
+        checkLegend(assert, graph, ["true", "false"]);
+        checkTooltip(assert, graph, { lines: [{ label: "true", value: "3" }] }, 0);
+        checkTooltip(assert, graph, { lines: [{ label: "false", value: "5" }] }, 1);
+    });
+
+    QUnit.test("pie chart rendering (two groupBy)", async function (assert) {
+        assert.expect(16);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph type="pie">
+                    <field name="bar"/>
+                    <field name="product_id"/>
+                </graph>
+            `,
+        });
+        assert.containsOnce(graph.el, "div.o_graph_canvas_container canvas");
+        checkLabels(assert, graph, ["true / xphone", "false / xphone", "false / xpad"]);
+        checkDatasets(assert, graph, ["backgroundColor", "borderColor", "data", "label"], {
+            backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8"],
+            borderColor: BORDER_WHITE,
+            data: [3, 1, 4],
+            label: "",
+        });
+        checkLegend(assert, graph, ["true / xphone", "false / xphone", "false / xpad"]);
+        checkTooltip(assert, graph, { lines: [{ label: "true / xphone", value: "3" }] }, 0);
+        checkTooltip(assert, graph, { lines: [{ label: "false / xphone", value: "1" }] }, 1);
+        checkTooltip(assert, graph, { lines: [{ label: "false / xpad", value: "4" }] }, 2);
+    });
+
+    QUnit.test("pie chart rendering (no groupBy, several domains)", async function (assert) {
+        assert.expect(11);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph type="pie">
+                    <field name="revenue" type="measure"/>
+                </graph>
+            `,
+            domains: [
+                { arrayRepr: [["bar", "=", true]], description: "True group" },
+                { arrayRepr: [["bar", "=", false]], description: "False group" },
+            ],
+        });
+        checkLabels(assert, graph, ["Total"]);
+        checkDatasets(
+            assert,
+            graph,
+            ["backgroundColor", "borderColor", "data", "label"],
+            [
+                {
+                    backgroundColor: ["#1f77b4"],
+                    borderColor: BORDER_WHITE,
+                    data: [6],
+                    label: "True group",
+                },
+                {
+                    backgroundColor: ["#1f77b4"],
+                    borderColor: BORDER_WHITE,
+                    data: [17],
+                    label: "False group",
+                },
+            ]
+        );
+        checkLegend(assert, graph, ["Total"]);
+        checkTooltip(
+            assert,
+            graph,
+            {
+                title: "Revenue",
+                lines: [{ label: "True group / Total", value: "6" }],
+            },
+            0,
+            0
+        );
+        checkTooltip(
+            assert,
+            graph,
+            {
+                title: "Revenue",
+                lines: [{ label: "False group / Total", value: "17" }],
+            },
+            0,
+            1
+        );
+    });
+
+    QUnit.test("pie chart rendering (one groupBy, several domains)", async function (assert) {
+        assert.expect(19);
+        serverData.models.foo.records = [
+            { bar: true, foo: 1, revenue: 14 },
+            { bar: true, foo: 2, revenue: false },
+            { bar: false, foo: 1, revenue: 12 },
+            { bar: false, foo: 2, revenue: 5 },
+            { bar: false, foo: 3, revenue: 0 },
+            { bar: false, foo: 4, revenue: 2 },
+        ];
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph type="pie">
+                    <field name="revenue" type="measure"/>
+                    <field name="foo"/>
+                </graph>
+            `,
+            domains: [
+                { arrayRepr: [["bar", "=", true]], description: "True group" },
+                { arrayRepr: [["bar", "=", false]], description: "False group" },
+            ],
+        });
+        checkLabels(assert, graph, ["1", "2", "4"]);
+        checkDatasets(
+            assert,
+            graph,
+            ["backgroundColor", "borderColor", "data", "label"],
+            [
+                {
+                    backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8"],
+                    borderColor: BORDER_WHITE,
+                    data: [14, 0, 0],
+                    label: "True group",
+                },
+                {
+                    backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8"],
+                    borderColor: BORDER_WHITE,
+                    data: [12, 5, 2],
+                    label: "False group",
+                },
+            ]
+        );
+        checkLegend(assert, graph, ["1", "2", "4"]);
+        checkTooltip(
+            assert,
+            graph,
+            {
+                title: "Revenue",
+                lines: [{ label: "True group / 1", value: "14" }],
+            },
+            0,
+            0
+        );
+        checkTooltip(
+            assert,
+            graph,
+            {
+                title: "Revenue",
+                lines: [{ label: "False group / 1", value: "12" }],
+            },
+            0,
+            1
+        );
+        checkTooltip(
+            assert,
+            graph,
+            {
+                title: "Revenue",
+                lines: [{ label: "False group / 2", value: "5" }],
+            },
+            1,
+            1
+        );
+        checkTooltip(
+            assert,
+            graph,
+            {
+                title: "Revenue",
+                lines: [{ label: "False group / 4", value: "2" }],
+            },
+            2,
+            1
+        );
+    });
+
+    QUnit.test(
+        "pie chart rendering (one groupBy, several domains with date identification)",
+        async function (assert) {
+            assert.expect(27);
+            serverData.models.foo.records = [
+                { date: "2021-01-04" },
+                { date: "2021-01-12" },
+                { date: "2021-01-19" },
+                { date: "2021-01-26" },
+                { date: "2021-02-04" },
+                { date: "2021-02-17" },
+                { date: false },
+            ];
+            const domains = [
+                {
+                    arrayRepr: [
+                        ["date", ">=", "2021-02-01"],
+                        ["date", "<=", "2021-02-28"],
+                    ],
+                    description: "February 2021",
+                },
+                {
+                    arrayRepr: [
+                        ["date", ">=", "2021-01-01"],
+                        ["date", "<=", "2021-01-31"],
+                    ],
+                    description: "January 2021",
+                },
+            ];
+            domains.fieldName = "date";
+            const graph = await makeView({
+                serverData,
+                type: "graph",
+                resModel: "foo",
+                arch: `
+                    <graph type="pie">
+                        <field name="date" interval="week"/>
+                    </graph>
+                `,
+                domains,
+            });
+            checkLabels(assert, graph, [
+                "W05 2021, W01 2021",
+                "W07 2021, W02 2021",
+                "W03 2021",
+                "W04 2021",
+            ]);
+            checkDatasets(
+                assert,
+                graph,
+                ["backgroundColor", "borderColor", "data", "label"],
+                [
+                    {
+                        backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8", "#ffbb78"],
+                        borderColor: BORDER_WHITE,
+                        data: [1, 1, 0, 0],
+                        label: "February 2021",
+                    },
+                    {
+                        backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8", "#ffbb78"],
+                        borderColor: BORDER_WHITE,
+                        data: [1, 1, 1, 1],
+                        label: "January 2021",
+                    },
+                ]
+            );
+            checkLegend(assert, graph, [
+                "W05 2021, W01 2021",
+                "W07 2021, W02 2021",
+                "W03 2021",
+                "W04 2021",
+            ]);
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    lines: [{ label: "February 2021 / W05 2021", value: "1" }],
+                },
+                0,
+                0
+            );
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    lines: [{ label: "January 2021 / W01 2021", value: "1" }],
+                },
+                0,
+                1
+            );
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    lines: [{ label: "February 2021 / W07 2021", value: "1" }],
+                },
+                1,
+                0
+            );
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    lines: [{ label: "January 2021 / W02 2021", value: "1" }],
+                },
+                1,
+                1
+            );
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    lines: [{ label: "January 2021 / W03 2021", value: "1" }],
+                },
+                2,
+                1
+            );
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    lines: [{ label: "January 2021 / W04 2021", value: "1" }],
+                },
+                3,
+                1
+            );
+        }
+    );
+
+    QUnit.test(
+        "pie chart rendering (two groupBy, several domains with no date identification)",
+        async function (assert) {
+            assert.expect(15);
+            serverData.models.foo.records = [
+                { date: "2021-01-04", bar: true, revenue: 12 },
+                { date: "2021-01-12", bar: false, revenue: 5 },
+                { date: "2021-02-04", bar: true, revenue: 14 },
+                { date: "2021-02-17", bar: false, revenue: false },
+                { date: false, bar: true, revenue: 0 },
+            ];
+            const domains = [
+                {
+                    arrayRepr: [
+                        ["date", ">=", "2021-02-01"],
+                        ["date", "<=", "2021-02-28"],
+                    ],
+                    description: "February 2021",
+                },
+                {
+                    arrayRepr: [
+                        ["date", ">=", "2021-01-01"],
+                        ["date", "<=", "2021-01-31"],
+                    ],
+                    description: "January 2021",
+                },
+            ];
+            domains.fieldName = "date";
+            const graph = await makeView({
+                serverData,
+                type: "graph",
+                resModel: "foo",
+                arch: `
+                    <graph type="pie">
+                        <field name="revenue" type="measure"/>
+                        <field name="bar"/>
+                        <field name="date" interval="week"/>
+                    </graph>
+                `,
+                domains,
+            });
+            checkLabels(assert, graph, ["true / W05 2021", "true / W01 2021", "false / W02 2021"]);
+            checkDatasets(
+                assert,
+                graph,
+                ["backgroundColor", "borderColor", "data", "label"],
+                [
+                    {
+                        backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8"],
+                        borderColor: BORDER_WHITE,
+                        data: [14, 0, 0],
+                        label: "February 2021",
+                    },
+                    {
+                        backgroundColor: ["#1f77b4", "#ff7f0e", "#aec7e8"],
+                        borderColor: BORDER_WHITE,
+                        data: [0, 12, 5],
+                        label: "January 2021",
+                    },
+                ]
+            );
+            checkLegend(assert, graph, ["true / W05 2021", "true / W01 2021", "false / W02 2021"]);
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    title: "Revenue",
+                    lines: [{ label: "February 2021 / true / W05 2021", value: "14" }],
+                },
+                0,
+                0
+            );
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    title: "Revenue",
+                    lines: [{ label: "January 2021 / true / W01 2021", value: "12" }],
+                },
+                1,
+                1
+            );
+            checkTooltip(
+                assert,
+                graph,
+                {
+                    title: "Revenue",
+                    lines: [{ label: "January 2021 / false / W02 2021", value: "5" }],
+                },
+                2,
+                1
+            );
+        }
+    );
+
+    QUnit.test("pie chart rendering (no data)", async function (assert) {
+        assert.expect(7);
+        serverData.models.foo.records = [];
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `<graph type="pie"/>`,
+        });
+        checkLabels(assert, graph, ["No data"]);
+        checkDatasets(
+            assert,
+            graph,
+            ["backgroundColor", "borderColor", "data", "label"],
+            [
+                {
+                    backgroundColor: [DEFAULT_BG],
+                    borderColor: BORDER_WHITE,
+                    data: [1],
+                    label: null,
+                },
+            ]
+        );
+        checkLegend(assert, graph, ["No data"]);
+        checkTooltip(assert, graph, { lines: [{ label: "No data", value: "0" }] }, 0);
+    });
+
+    QUnit.test("pie chart rendering (no data, several domains)", async function (assert) {
+        assert.expect(11);
+        serverData.models.foo.records = [{ product_id: 37, bar: true }];
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph type="pie">
+                    <field name="product_id"/>
+                <graph/>
+            `,
+            domains: [
+                { arrayRepr: [["bar", "=", true]], description: "True group" },
+                { arrayRepr: [["bar", "=", false]], description: "False group" },
+            ],
+        });
+        checkLabels(assert, graph, ["xphone", "No data"]);
+        checkDatasets(
+            assert,
+            graph,
+            ["backgroundColor", "borderColor", "data", "label"],
+            [
+                {
+                    backgroundColor: ["#1f77b4"],
+                    borderColor: BORDER_WHITE,
+                    data: [1],
+                    label: "True group",
+                },
+                {
+                    backgroundColor: ["#1f77b4", DEFAULT_BG],
+                    borderColor: BORDER_WHITE,
+                    data: [undefined, 1],
+                    label: "False group",
+                },
+            ]
+        );
+        checkLegend(assert, graph, ["xphone", "No data"]);
+        checkTooltip(
+            assert,
+            graph,
+            { lines: [{ label: "True group / xphone", value: "1" }] },
+            0,
+            0
+        );
+        checkTooltip(
+            assert,
+            graph,
+            { lines: [{ label: "False group / No data", value: "0" }] },
+            1,
+            1
+        );
+    });
+
+    QUnit.test(
+        "pie chart rendering (mix of positive and negative values)",
+        async function (assert) {
+            assert.expect(3);
+            serverData.models.foo.records = [
+                { bar: true, revenue: 2 },
+                { bar: false, revenue: -3 },
+            ];
+            const graph = await makeView({
+                serverData,
+                type: "graph",
+                resModel: "foo",
+                arch: `
+                    <graph type="pie">
+                        <field name="revenue" type="measure"/>
+                        <field name="bar"/>
+                    </graph>
+                `,
+            });
+            assert.containsOnce(graph, ".o_view_nocontent");
+            assert.strictEqual(
+                graph.el.querySelector(".o_view_nocontent").innerText.replace(/[\s\n]/g, " "),
+                `Invalid data  Pie chart cannot mix positive and negative numbers. Try to change your domain to only display positive results`
+            );
+            assert.containsNone(graph, ".o_graph_canvas_container");
+        }
+    );
+
+    QUnit.test("mode props", async function (assert) {
+        assert.expect(2);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `<graph type="pie"/>`,
+        });
+        assert.strictEqual(getGraphModelMetaData(graph).mode, "pie", "should be in pie chart mode");
+        assert.strictEqual(getChart(graph).config.type, "pie");
+    });
+
+    QUnit.test("field id not in groupBy", async function (assert) {
+        assert.expect(3);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph>
+                    <field name="id"/>
+                <graph/>
+            `,
+        });
+        checkLabels(assert, graph, ["Total"]);
+        checkDatasets(assert, graph, ["backgroundColor", "data", "label", "originIndex", "stack"], {
+            backgroundColor: "#1f77b4",
+            data: [8],
+            label: "Count",
+            originIndex: 0,
+            stack: "",
+        });
+        checkLegend(assert, graph, "Count");
+    });
+
+    QUnit.test("props modifications", async function (assert) {
+        assert.expect(16);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph>
+                    <field name="bar"/>
+                </graph>
+            `,
+            searchViewArch: `
+                <search>
+                    <filter name="group_by_color" string="Color" context="{ 'group_by': 'color_id' }"/>
+                </search>
+            `,
+        });
+        checkModeIs(assert, graph, "bar");
+        assert.strictEqual(getXAxeLabel(graph), "bar");
+        assert.strictEqual(getYAxeLabel(graph), "Count");
+        await selectMode(graph, "line");
+        checkModeIs(assert, graph, "line");
+        assert.strictEqual(getXAxeLabel(graph), "bar");
+        await toggleMenu(graph, "Measures");
+        await toggleMenuItem(graph, "Revenue");
+        assert.strictEqual(getYAxeLabel(graph), "Revenue");
+        assert.ok(true, "Message");
+        await toggleGroupByMenu(graph);
+        await toggleMenuItem(graph, "Color");
+        checkModeIs(assert, graph, "line");
+        assert.strictEqual(getXAxeLabel(graph), "Color");
+        assert.strictEqual(getYAxeLabel(graph), "Revenue");
+    });
+
+    QUnit.test("switching mode", async function (assert) {
+        assert.expect(12);
+        const graph = await makeView({ serverData, type: "graph", resModel: "foo" });
+        checkModeIs(assert, graph, "bar");
+        await selectMode(graph, "bar"); // click on the active mode does not change anything
+        checkModeIs(assert, graph, "bar");
+        await selectMode(graph, "line");
+        checkModeIs(assert, graph, "line");
+        await selectMode(graph, "pie");
+        checkModeIs(assert, graph, "pie");
+    });
+
+    QUnit.test("switching measure", async function (assert) {
+        assert.expect(6);
+        const graph = await makeView({ serverData, type: "graph", resModel: "foo" });
+        function checkMeasure(measure) {
+            const yAxe = getChart(graph).config.options.scales.yAxes[0];
+            assert.strictEqual(yAxe.scaleLabel.labelString, measure);
+            const item = [...graph.el.querySelectorAll(".o_menu_item")].find(
+                (el) => el.innerText === measure
+            );
+            assert.hasClass(item, "selected");
+        }
+        await toggleMenu(graph, "Measures");
+        checkMeasure("Count");
+        checkLegend(assert, graph, "Count");
+        await toggleMenuItem(graph, "Foo");
+        checkMeasure("Foo");
+        checkLegend(assert, graph, "Foo");
+    });
+
+    QUnit.test("process default view description", async function (assert) {
+        assert.expect(1);
+        const propsFromArch = new GraphArchParser().parse();
+        assert.deepEqual(propsFromArch, { fields: {}, fieldAttrs: {}, groupBy: [] });
+    });
+
+    QUnit.test("process simple arch (no field tag)", async function (assert) {
+        assert.expect(2);
+        const fields = serverData.models.foo.fields;
+        const arch1 = `<graph order="ASC" disable_linking="1" type="line"/>`;
+        let propsFromArch = new GraphArchParser().parse(arch1, fields);
+
+        assert.deepEqual(propsFromArch, {
+            disableLinking: true,
+            fields,
+            fieldAttrs: {},
+            groupBy: [],
+            mode: "line",
+            order: "ASC",
+        });
+        let arch2 = `<graph disable_linking="0" string="Title" stacked="False"/>`;
+        propsFromArch = new GraphArchParser().parse(arch2, fields);
+
+        assert.deepEqual(propsFromArch, {
+            disableLinking: false,
+            fields,
+            fieldAttrs: {},
+            groupBy: [],
+            stacked: false,
+            title: "Title",
+        });
+    });
+
+    QUnit.test("process arch with field tags", async function (assert) {
+        assert.expect(1);
+        const fields = serverData.models.foo.fields;
+        fields.fighters = { type: "text", string: "Fighters" };
+        let arch = `
+            <graph type="pie">
+                <field name="revenue" type="measure"/>
+                <field name="date" interval="day"/>
+                <field name="foo" invisible="0"/>
+                <field name="bar" invisible="1" string="My invisible field"/>
+                <field name="id"/>
+                <field name="fighters" string="FooFighters"/>
+            <graph/>
+        `;
+        let propsFromArch = new GraphArchParser().parse(arch, fields);
+        assert.deepEqual(propsFromArch, {
+            fields,
+            fieldAttrs: {
+                bar: { isInvisible: true, string: "My invisible field" },
+                fighters: { string: "FooFighters" },
+            },
+            measure: "revenue",
+            groupBy: ["date:day", "foo"],
+            mode: "pie",
+        });
+    });
+
+    QUnit.test("displaying chart data with three groupbys", async function (assert) {
+        // this test makes sure the line chart shows all data labels (X axis) when
+        // it is grouped by several fields
+        assert.expect(6);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph type="bar">
+                    <field name="product_id"/>
+                    <field name="bar"/>
+                    <field name="color_id"/>
+                </graph>
+            `,
+        });
+
+        checkLabels(assert, graph, ["xphone", "xpad"]);
+        checkLegend(assert, graph, ["true / Undefined", "true / red", "false / Undefined"]);
+
+        await selectMode(graph, "line");
+
+        checkLabels(assert, graph, ["xphone", "xpad"]);
+        checkLegend(assert, graph, ["true / Undefined", "true / red", "false / Undefined"]);
+
+        await selectMode(graph, "pie");
+
+        checkLabels(assert, graph, [
+            "xphone / true / Undefined",
+            "xphone / true / red",
+            "xphone / false / Undefined",
+            "xpad / false / Undefined",
+        ]);
+        checkLegend(assert, graph, [
+            "xphone / true / Undefined",
+            "xphone / true / red",
+            "xphone / false / Undefined",
+            "xpad / false / Undefined",
+        ]);
+    });
+
+    QUnit.test("no content helper", async function (assert) {
+        assert.expect(3);
+        serverData.models.foo.records = [];
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            noContentHelp: '<p class="abc">This helper should not be displayed in graph views</p>',
+        });
+        assert.containsOnce(graph, "div.o_graph_canvas_container canvas");
+        assert.containsNone(graph, "div.o_view_nocontent");
+        assert.containsNone(graph, ".abc");
+    });
+
+    QUnit.test("no content helper after update", async function (assert) {
+        assert.expect(6);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            noContentHelp: '<p class="abc">This helper should not be displayed in graph views</p>',
+            views: [[false, "search"]],
+        });
+        assert.containsOnce(graph, "div.o_graph_canvas_container canvas");
+        assert.containsNone(graph, "div.o_view_nocontent");
+        assert.containsNone(graph, ".abc");
+        await toggleFilterMenu(graph);
+        await toggleMenuItem(graph, "False Domain");
+        assert.containsOnce(graph, "div.o_graph_canvas_container canvas");
+        assert.containsNone(graph, "div.o_view_nocontent");
+        assert.containsNone(graph, ".abc");
+    });
+
+    QUnit.test("no content helper after update", async function (assert) {
+        assert.expect(6);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            noContentHelp: '<p class="abc">This helper should not be displayed in graph views</p>',
+            views: [[false, "search"]],
+        });
+        assert.containsOnce(graph, "div.o_graph_canvas_container canvas");
+        assert.containsNone(graph, "div.o_view_nocontent");
+        assert.containsNone(graph, ".abc");
+        await toggleFilterMenu(graph);
+        await toggleMenuItem(graph, "False Domain");
+        assert.containsOnce(graph, "div.o_graph_canvas_container canvas");
+        assert.containsNone(graph, "div.o_view_nocontent");
+        assert.containsNone(graph, ".abc");
+    });
+
+    QUnit.test("can reload with other group by", async function (assert) {
+        assert.expect(2);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph string="Gloups">
+                    <field name="product_id"/>
+                </graph>
+            `,
+            searchViewArch: `
+                <search>
+                    <filter name="group_by_color" string="Color" context="{ 'group_by': 'color_id' }"/>
+                </search>
+            `,
+        });
+        checkLabels(assert, graph, ["xphone", "xpad"]);
+        await toggleGroupByMenu(graph);
+        await toggleMenuItem(graph, "Color");
+        checkLabels(assert, graph, ["Undefined", "red"]);
+    });
+
+    QUnit.test("save params succeeds", async function (assert) {
+        assert.expect(4);
+        const expectedContexts = [
+            {
+                graph_mode: "bar",
+                graph_measure: "__count",
+                graph_groupbys: ["product_id"],
+                group_by: [],
+            },
+            {
+                graph_mode: "bar",
+                graph_measure: "foo",
+                graph_groupbys: ["product_id"],
+                group_by: [],
+            },
+            {
+                graph_mode: "line",
+                graph_measure: "foo",
+                graph_groupbys: ["product_id"],
+                group_by: [],
+            },
+            {
+                graph_mode: "line",
+                graph_measure: "foo",
+                graph_groupbys: ["product_id", "color_id"],
+                group_by: ["product_id", "color_id"],
+            },
+        ];
+
+        let serverId = 1;
+        const graph = await makeView({
+            mockRPC: function (_, args) {
+                if (args.method === "create_or_replace") {
+                    const favorite = args.args[0];
+                    assert.deepEqual(favorite.context, expectedContexts.shift());
+                    return serverId++;
+                }
+            },
+            serverData,
+            resModel: "foo",
+            type: "graph",
+            arch: `
+                    <graph>
+                        <field name="product_id"/>
+                    </graph>
+                `,
+            searchViewId: false,
+            searchViewArch: `
+                <search>
+                    <filter name="false_domain" string="False Domain" domain="[(0, '=', 1)]"/>
+                    <filter name="filter_with_context"
+                        string="Filter With Context"
+                        domain="[]"
+                        context="{ 'graph_measure': 'foo', 'graph_mode': 'line', 'graph_groupbys': ['color_id'] }"
+                        />
+                    <filter name="group_by_color" string="Color" context="{ 'group_by': 'color_id' }"/>
+                    <filter name="group_by_product" string="Product" context="{ 'group_by': 'product_id' }"/>
+                </search>
+            `,
+        });
+
+        await toggleFavoriteMenu(graph);
+        await toggleSaveFavorite(graph);
+        await editFavoriteName(graph, "First Favorite");
+        await saveFavorite(graph);
+
+        await toggleMenu(graph, "Measures");
+        await toggleMenuItem(graph, "Foo");
+
+        await toggleFavoriteMenu(graph);
+        await toggleSaveFavorite(graph);
+        await editFavoriteName(graph, "Second Favorite");
+        await saveFavorite(graph);
+
+        await selectMode(graph, "line");
+
+        await toggleFavoriteMenu(graph);
+        await toggleSaveFavorite(graph);
+        await editFavoriteName(graph, "Third Favorite");
+        await saveFavorite(graph);
+
+        await toggleGroupByMenu(graph);
+        await toggleMenuItem(graph, "Product");
+        await toggleMenuItem(graph, "Color");
+
+        await toggleFavoriteMenu(graph);
+        await toggleSaveFavorite(graph);
+        await editFavoriteName(graph, "Fourth Favorite");
+        await saveFavorite(graph);
+    });
+
+    QUnit.test("correctly uses graph_ keys from the context", async function (assert) {
+        assert.expect(8);
+        const recs = serverData.models.foo.records;
+        const lastOne = recs[recs.length - 1];
+        lastOne.color_id = 14;
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: '<graph><field name="product_id"/></graph>',
+            context: {
+                graph_measure: "foo",
+                graph_mode: "line",
+                graph_groupbys: ["color_id"],
+            },
+        });
+        checkLabels(assert, graph, ["red", "black"]);
+        checkLegend(assert, graph, "Foo");
+        checkModeIs(assert, graph, "line");
+        assert.strictEqual(getXAxeLabel(graph), "Color");
+        assert.strictEqual(getYAxeLabel(graph), "Foo");
+        const { mode } = getGraphModelMetaData(graph);
+        assert.strictEqual(mode, "line");
+    });
+
+    QUnit.test("correctly use group_by key from the context", async function (assert) {
+        assert.expect(8);
+        const recs = serverData.models.foo.records;
+        const lastOne = recs[recs.length - 1];
+        lastOne.color_id = 14;
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph>
+                    <field name="product_id"/>
+                </graph>
+            `,
+            searchViewArch: `
+                <search>
+                    <filter name="filter_with_context"
+                        string="Filter With Context"
+                        domain="[]"
+                        context="{ 'graph_measure': 'foo', 'graph_mode': 'line', 'graph_groupbys': ['color_id'] }"
+                        />
+                </search>
+            `,
+            context: {
+                search_default_filter_with_context: 1,
+            },
+        });
+        checkLabels(assert, graph, ["red", "black"]);
+        checkLegend(assert, graph, "Foo");
+        checkModeIs(assert, graph, "line");
+        assert.strictEqual(getXAxeLabel(graph), "Color");
+        assert.strictEqual(getYAxeLabel(graph), "Foo");
+        const mode = getGraphModelMetaData(graph).mode;
+        assert.strictEqual(mode, "line");
+    });
+
+    QUnit.test("an invisible field should not be used as groupBy", async function (assert) {
+        assert.expect(1);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph>
+                    <field name="foo" invisible="1"/>
+                </graph>
+            `,
+        });
+        checkLabels(assert, graph, ["Total"]);
+    });
+
+    QUnit.test(
+        "format values as float in case at least one value is not an integer",
+        async function (assert) {
+            assert.expect(10);
+            serverData.models.foo.records = [
+                { id: 1, bar: true, revenue: 1.5 },
+                { id: 2, bar: false, revenue: 2 },
+            ];
+            const graph = await makeView({
+                serverData,
+                type: "graph",
+                resModel: "foo",
+                arch: `
+                    <graph>
+                        <field name="revenue" type="measure"/>
+                        <field name="bar"/>
+                    </graph>
+                `,
+            });
+            checkDatasets(assert, graph, "data", { data: [1.5, 2] });
+            checkLabels(assert, graph, ["true", "false"]);
+            checkTooltip(
+                assert,
+                graph,
+                { title: "Revenue", lines: [{ label: "true", value: "1.50" }] },
+                0
+            );
+            checkTooltip(
+                assert,
+                graph,
+                { title: "Revenue", lines: [{ label: "false", value: "2.00" }] },
+                1
+            );
+        }
+    );
+
+    QUnit.test(
+        "the active measure description is the arch string attribute in priority",
+        async function (assert) {
+            assert.expect(8);
+            const graph = await makeView({
+                serverData,
+                type: "graph",
+                resModel: "foo",
+                arch: `
+                    <graph>
+                        <field name="revenue" type="measure" string="Nirvana"/>
+                        <field name="foo" type="measure" string="FooFighters"/>
+                    </graph>
+                `,
+            });
+            checkTooltip(
+                assert,
+                graph,
+                { title: "FooFighters", lines: [{ label: "Total", value: "239" }] },
+                0
+            );
+            await toggleMenu(graph, "Measures");
+            await toggleMenuItem(graph, "Nirvana");
+            checkTooltip(
+                assert,
+                graph,
+                { title: "Nirvana", lines: [{ label: "Total", value: "23" }] },
+                0
+            );
+        }
+    );
+
+    QUnit.test("correctly uses graph_ keys from the context (at reload)", async function (assert) {
+        assert.expect(10);
+
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: '<graph><field name="product_id"/></graph>',
+            searchViewArch: `
+                <search>
+                    <filter name="context" domain="[]" string="Context" context="{ 'graph_measure': 'foo', 'graph_mode': 'line' }"/>
+                </search>
+            `,
+        });
+        checkLegend(assert, graph, "Count");
+        assert.strictEqual(getYAxeLabel(graph), "Count");
+        checkModeIs(assert, graph, "bar");
+        await toggleFilterMenu(graph);
+        await toggleMenuItem(graph, "Context");
+        checkLegend(assert, graph, "Foo");
+        assert.strictEqual(getYAxeLabel(graph), "Foo");
+        checkModeIs(assert, graph, "line");
+    });
+
+    QUnit.test("reload graph with correct fields", async function (assert) {
+        assert.expect(2);
+        const graph = await makeView({
+            serverData,
+            mockRPC: function (_, args) {
+                if (args.method === "web_read_group") {
+                    assert.deepEqual(args.kwargs.fields, ["__count", "foo:sum"]);
+                }
+            },
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph>
+                    <field name="foo" type="measure"/>
+                </graph>
+            `,
+            searchViewArch: `
+                <search>
+                    <filter name="false_domain" string="False Domain" domain="[(0, '=', 1)]"/>
+                </search>
+            `,
+        });
+        await toggleFilterMenu(graph);
+        await toggleMenuItem(graph, "False Domain");
+    });
+
+    QUnit.test("initial groupby is kept when reloading", async function (assert) {
+        assert.expect(12);
+        const graph = await makeView({
+            serverData,
+            mockRPC: function (_, args) {
+                if (args.method === "web_read_group") {
+                    assert.deepEqual(args.kwargs.groupby, ["product_id"]);
+                }
+            },
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph>
+                    <field name="product_id"/>
+                    <field name="foo" type="measure"/>
+                </graph>
+            `,
+            searchViewArch: `
+                <search>
+                    <filter name="false_domain" string="False Domain" domain="[(0, '=', 1)]"/>
+                </search>
+            `,
+        });
+        checkLabels(assert, graph, ["xphone", "xpad"]);
+        checkLegend(assert, graph, "Foo");
+        checkDatasets(assert, graph, "data", { data: [82, 157] });
+        assert.strictEqual(getXAxeLabel(graph), "Product");
+        assert.strictEqual(getYAxeLabel(graph), "Foo");
+        await toggleFilterMenu(graph);
+        await toggleMenuItem(graph, "False Domain");
+        checkLabels(assert, graph, []);
+        checkLegend(assert, graph, []);
+        checkDatasets(assert, graph, "data", []);
+        assert.strictEqual(getXAxeLabel(graph), "Product");
+        assert.strictEqual(getYAxeLabel(graph), "Foo");
+    });
+
+    QUnit.test(
+        "use a many2one as a measure should work (without groupBy)",
+        async function (assert) {
+            assert.expect(5);
+            const graph = await makeView({
+                serverData,
+                type: "graph",
+                resModel: "foo",
+                arch: `
+                    <graph>
+                        <field name="product_id" type="measure"/>
+                    </graph>
+                `,
+            });
+            checkLabels(assert, graph, ["Total"]);
+            checkLegend(assert, graph, "Product");
+            checkDatasets(assert, graph, "data", { data: [2] });
+            assert.strictEqual(getXAxeLabel(graph), "");
+            assert.strictEqual(getYAxeLabel(graph), "Product");
+        }
+    );
+
+    QUnit.test("use a many2one as a measure should work (with groupBy)", async function (assert) {
+        assert.expect(3);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+              <graph>
+                  <field name="bar"/>
+                  <field name="product_id" type="measure"/>
+              </graph>
+            `,
+        });
+        checkLabels(assert, graph, ["true", "false"]);
+        checkLegend(assert, graph, "Product");
+        checkDatasets(assert, graph, "data", { data: [1, 2] });
+    });
+
+    QUnit.test("use a many2one as a measure and as a groupby should work", async function (assert) {
+        assert.expect(5);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph>
+                    <field name="product_id" type="measure"/>
+                    <field name="product_id"/>
+                </graph>
+            `,
+        });
+        checkLabels(assert, graph, ["xphone", "xpad"]);
+        checkLegend(assert, graph, "Product");
+        checkDatasets(assert, graph, "data", { data: [1, 1] });
+        assert.strictEqual(getXAxeLabel(graph), "Product");
+        assert.strictEqual(getYAxeLabel(graph), "Product");
+    });
+
+    QUnit.test("differentiate many2one values with same label", async function (assert) {
+        assert.expect(1);
+        serverData.models.product.records.push({ id: 39, display_name: "xphone" });
+        serverData.models.foo.records.push({ id: 18, product_id: 39 });
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph>
+                    <field name="product_id"/>
+                </graph>
+            `,
+        });
+        checkLabels(assert, graph, ["xphone", "xpad", "xphone (2)"]);
+    });
+
+    QUnit.test("not use a many2one as a measure by default", async function (assert) {
+        assert.expect(1);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: "<graph/>",
+        });
+        await toggleMenu(graph, "Measures");
+        assert.deepEqual(
+            [...graph.el.querySelectorAll(".o_cp_bottom_left li.o_menu_item")].map(
+                (el) => el.innerText
+            ),
+            ["Foo", "Revenue", "Count"]
+        );
+    });
+
+    QUnit.test(
+        "graph view crash when moving from search view using Down key",
+        async function (assert) {
+            assert.expect(1);
+            const graph = await makeView({
+                serverData,
+                type: "graph",
+                resModel: "foo",
+                arch: `<graph/>`,
+            });
+            await triggerEvent(graph.el, ".o_searchview input", "keydown", { key: "ArrowDown" });
+            assert.ok(true, "should not generate any error");
+        }
+    );
+
+    QUnit.test(
+        "graph measures should be alphabetically sorted (exception: 'Count' is last)",
+        async function (assert) {
+            assert.expect(1);
+            serverData.models.foo.fields.bouh = {
+                string: "Bouh",
+                type: "integer",
+                store: true,
+                group_operator: "sum",
+            };
+            const graph = await makeView({
+                serverData,
+                type: "graph",
+                resModel: "foo",
+                arch: `
+                    <graph>
+                        <field name="foo" type="measure"/>
+                        <field name="bouh" type="measure"/>
+                    </graph>
+                `,
+            });
+            await toggleMenu(graph, "Measures");
+            assert.deepEqual(
+                [...graph.el.querySelectorAll(".o_cp_bottom_left li.o_menu_item")].map(
+                    (el) => el.innerText
+                ),
+                ["Bouh", "Foo", "Revenue", "Count"]
+            );
+        }
+    );
+
+    QUnit.test("a many2one field can be added as measure in arch", async function (assert) {
+        assert.expect(2);
+
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph>
+                    <field name="product_id" type="measure"/>
+                </graph>
+            `,
+        });
+        checkLegend(assert, graph, "Product");
+        assert.strictEqual(getYAxeLabel(graph), "Product");
+    });
+
+    QUnit.test(
+        "a many2one field can be added as measure in additionalMeasures",
+        async function (assert) {
+            assert.expect(2);
+
+            const graph = await makeView({
+                serverData,
+                type: "graph",
+                resModel: "foo",
+                arch: `<graph/>`,
+                additionalMeasures: ["product_id"],
+            });
+            await toggleMenu(graph, "Measures");
+            await toggleMenuItem(graph, "Product");
+            checkLegend(assert, graph, "Product");
+            assert.strictEqual(getYAxeLabel(graph), "Product");
+        }
+    );
+
+    QUnit.test('graph view "graph_measure" field in context', async function (assert) {
+        assert.expect(6);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: "<graph/>",
+            context: {
+                graph_measure: "product_id",
+            },
+        });
+        checkLegend(assert, graph, "Product");
+        assert.strictEqual(getYAxeLabel(graph), "Product");
+        checkTooltip(
+            assert,
+            graph,
+            { title: "Product", lines: [{ label: "Total", value: "2" }] },
+            0
+        );
+    });
+
+    QUnit.test(
+        '"graph_measure" in context is prefered to measure in arch',
+        async function (assert) {
+            assert.expect(6);
+            const graph = await makeView({
+                serverData,
+                type: "graph",
+                resModel: "foo",
+                arch: '<graph><field name="revenue" type="measure"/></graph>',
+                context: {
+                    graph_measure: "product_id",
+                },
+            });
+            checkLegend(assert, graph, "Product");
+            assert.strictEqual(getYAxeLabel(graph), "Product");
+            checkTooltip(
+                assert,
+                graph,
+                { title: "Product", lines: [{ label: "Total", value: "2" }] },
+                0
+            );
+        }
+    );
+
+    QUnit.test(
+        "Undefined should appear in bar, pie graph but not in line graph with multiple groupbys",
+        async function (assert) {
+            assert.expect(4);
+            const graph = await makeView({
+                serverData,
+                type: "graph",
+                resModel: "foo",
+                arch: `
+                    <graph type="line">
+                        <field name="date"/>
+                        <field name="color_id"/>
+                    </graph>
+                `,
+            });
+            function someUndefined() {
+                return getChart(graph).data.labels.some((l) => /Undefined/.test(l));
+            }
+            assert.notOk(someUndefined());
+            await selectMode(graph, "bar");
+            assert.ok(someUndefined());
+            await selectMode(graph, "pie");
+            assert.ok(someUndefined());
+            // Undefined should not appear after switching back to line chart
+            await selectMode(graph, "line");
+            assert.notOk(someUndefined());
+        }
+    );
+
+    QUnit.test(
+        "an invisible field in additional measure can be found in the 'Measures' menu",
+        async function (assert) {
+            assert.expect(8);
+            const graph = await makeView({
+                serverData,
+                type: "graph",
+                resModel: "foo",
+                arch: `
+                    <graph>
+                        <field name="revenue" invisible="1"/>
+                    </graph>
+                `,
+                additionalMeasures: ["revenue"],
+            });
+            checkTooltip(assert, graph, { lines: [{ label: "Total", value: "8" }] }, 0);
+            await toggleMenu(graph, "Measures");
+            await toggleMenuItem(graph, "Revenue");
+            checkTooltip(
+                assert,
+                graph,
+                { title: "Revenue", lines: [{ label: "Total", value: "23" }] },
+                0
+            );
+        }
+    );
+
+    QUnit.test(
+        "an invisible field not in additional measure can not be found in the 'Measures' menu",
+        async function (assert) {
+            assert.expect(5);
+            const graph = await makeView({
+                serverData,
+                type: "graph",
+                resModel: "foo",
+                arch: `
+                    <graph>
+                        <field name="revenue" invisible="1"/>
+                    </graph>
+                `,
+            });
+            checkTooltip(assert, graph, { lines: [{ label: "Total", value: "8" }] }, 0);
+            await toggleMenu(graph, "Measures");
+            assert.notOk(
+                [...graph.el.querySelectorAll(".o_menu_item")].find(
+                    (el) => el.innerText.trim() === "Revenue"
+                ),
+                `"Revenue" can not be found in the "Measures" menu`
+            );
+        }
+    );
+
+    QUnit.test(
+        "graph view only keeps finer groupby filter option for a given groupby",
+        async function (assert) {
+            assert.expect(3);
+            const graph = await makeView({
+                serverData,
+                type: "graph",
+                resModel: "foo",
+                groupBy: ["date:year", "product_id", "date", "date:quarter"],
+                arch: `<graph type="line"/>`,
+                views: [[false, "search"]],
+            });
+            checkLabels(assert, graph, ["January 2016", "March 2016", "May 2016", "April 2016"]);
+            // mockReadGroup does not always sort groups -> May 2016 is before April 2016 for that reason.
+            checkLegend(assert, graph, ["xphone", "xpad"]);
+            checkDatasets(
+                assert,
+                graph,
+                ["label", "data"],
+                [
+                    {
+                        label: "xphone",
+                        data: [2, 2, 0, 0],
+                    },
+                    {
+                        label: "xpad",
+                        data: [0, 0, 1, 1],
+                    },
+                ]
+            );
+        }
+    );
+
+    QUnit.test("action name is displayed in breadcrumbs", async function (assert) {
+        assert.expect(1);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            displayName: "Glou glou",
+        });
+        assert.strictEqual(
+            graph.el.querySelector(".o_control_panel .breadcrumb-item.active").innerText,
+            "Glou glou"
+        );
+    });
+
+    QUnit.test("clicking on bar charts triggers a do_action", async function (assert) {
+        assert.expect(6);
+
+        serviceRegistry.add(
+            "action",
+            {
+                start() {
+                    return {
+                        doAction(actionRequest, options) {
+                            assert.deepEqual(actionRequest, {
+                                context: {
+                                    lang: "en",
+                                    tz: "taht",
+                                    uid: 7,
+                                },
+                                domain: [["bar", "=", true]],
+                                name: "Foo Analysis",
+                                res_model: "foo",
+                                target: "current",
+                                type: "ir.actions.act_window",
+                                views: [
+                                    [false, "list"],
+                                    [false, "form"],
+                                ],
+                            });
+                            assert.deepEqual(options, { viewType: "list" });
+                        },
+                    };
+                },
+            },
+            { force: true }
+        );
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph string="Foo Analysis">
+                    <field name="bar"/>
+                </graph>
+            `,
+        });
+        checkModeIs(assert, graph, "bar");
+        checkDatasets(assert, graph, ["domains"], {
+            domains: [[["bar", "=", true]], [["bar", "=", false]]],
+        });
+        await clickOnDataset(graph);
+    });
+
+    QUnit.test(
+        "clicking on a pie chart trigger a do_action with correct views",
+        async function (assert) {
+            assert.expect(6);
+            serverData.views["foo,364,list"] = `<list/>`;
+            serverData.views["foo,29,form"] = `<form/>`;
+
+            serviceRegistry.add(
+                "action",
+                {
+                    start() {
+                        return {
+                            doAction(actionRequest, options) {
+                                assert.deepEqual(actionRequest, {
+                                    context: {
+                                        lang: "en",
+                                        tz: "taht",
+                                        uid: 7,
+                                    },
+                                    domain: [["bar", "=", true]],
+                                    name: "Foo Analysis",
+                                    res_model: "foo",
+                                    target: "current",
+                                    type: "ir.actions.act_window",
+                                    views: [
+                                        [364, "list"],
+                                        [29, "form"],
+                                    ],
+                                });
+                                assert.deepEqual(options, { viewType: "list" });
+                            },
+                        };
+                    },
+                },
+                { force: true }
+            );
+
+            const graph = await makeView({
+                serverData,
+                type: "graph",
+                resModel: "foo",
+                arch: `
+                    <graph string="Foo Analysis" type="pie">
+                        <field name="bar"/>
+                    </graph>
+                `,
+                views: [
+                    [364, "list"],
+                    [29, "form"],
+                ],
+            });
+            checkModeIs(assert, graph, "pie");
+            checkDatasets(assert, graph, ["domains"], {
+                domains: [[["bar", "=", true]], [["bar", "=", false]]],
+            });
+            await clickOnDataset(graph);
+        }
+    );
+
+    QUnit.test('graph view with attribute disable_linking="1"', async function (assert) {
+        assert.expect(4);
+
+        serviceRegistry.add(
+            "action",
+            {
+                start() {
+                    return {
+                        doAction() {
+                            throw new Error("Should not perform a do_action");
+                        },
+                    };
+                },
+            },
+            { force: true }
+        );
+
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph disable_linking="1">
+                    <field name="bar"/>
+                </graph>
+            `,
+        });
+        checkModeIs(assert, graph, "bar");
+        checkDatasets(assert, graph, ["domains"], {
+            domains: [[["bar", "=", true]], [["bar", "=", false]]],
+        });
+        await clickOnDataset(graph);
+    });
+
+    QUnit.test("graph view without invisible attribute on field", async function (assert) {
+        assert.expect(4);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `<graph/>`,
+        });
+        await toggleMenu(graph, "Measures");
+        assert.containsN(
+            graph,
+            "li.o_menu_item",
+            3,
+            "there should be three menu item in the measures dropdown (count, revenue and foo)"
+        );
+        assert.containsOnce(graph, 'li.o_menu_item:contains("Revenue")');
+        assert.containsOnce(graph, 'li.o_menu_item:contains("Foo")');
+        assert.containsOnce(graph, 'li.o_menu_item:contains("Count")');
+    });
+
+    QUnit.test("graph view with invisible attribute on field", async function (assert) {
+        assert.expect(2);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph>
+                    <field name="revenue" invisible="1"/>
+                </graph>
+            `,
+        });
+        await toggleMenu(graph, "Measures");
+        assert.containsN(
+            graph,
+            "li.o_menu_item",
+            2,
+            "there should be only two menu item in the measures dropdown (count and foo)"
+        );
+        assert.containsNone(graph, 'li.o_menu_item:contains("Revenue")');
+    });
+
+    QUnit.test("graph view sort by measure", async function (assert) {
+        assert.expect(20);
+
+        // change first record from foo as there are 4 records count for each product
+        serverData.models.product.records.push({ id: 38, display_name: "zphone" });
+        serverData.models.foo.records[7].product_id = 38;
+
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph order="DESC">
+                    <field name="product_id"/>
+                </graph>
+            `,
+        });
+
+        assert.containsOnce(graph, "button.fa-sort-amount-asc");
+        assert.containsOnce(graph, "button.fa-sort-amount-desc");
+
+        checkLegend(assert, graph, "Count", "measure should be by count");
+        assert.hasClass(
+            graph.el.querySelector("button.fa-sort-amount-desc"),
+            "active",
+            'sorting should be applie on descending order by default when sorting="desc"'
+        );
+        checkDatasets(assert, graph, "data", { data: [4, 3, 1] });
+
+        await click(graph.el, "button.fa-sort-amount-asc");
+        assert.hasClass(
+            graph.el.querySelector("button.fa-sort-amount-asc"),
+            "active",
+            "ascending order should be applied"
+        );
+        checkDatasets(assert, graph, "data", { data: [1, 3, 4] });
+
+        await click(graph.el, "button.fa-sort-amount-desc");
+        assert.hasClass(
+            graph.el.querySelector("button.fa-sort-amount-desc"),
+            "active",
+            "descending order button should be active"
+        );
+        checkDatasets(assert, graph, "data", { data: [4, 3, 1] });
+
+        // again click on descending button to deactivate order button
+        await click(graph.el, "button.fa-sort-amount-desc");
+        assert.doesNotHaveClass(
+            graph.el.querySelector("button.fa-sort-amount-desc"),
+            "active",
+            "descending order button should not be active"
+        );
+        checkDatasets(assert, graph, "data", { data: [4, 3, 1] });
+
+        // set line mode
+        await selectMode(graph, "line");
+        assert.containsOnce(graph, "button.fa-sort-amount-asc");
+        assert.containsOnce(graph, "button.fa-sort-amount-desc");
+
+        checkLegend(assert, graph, "Count", "measure should be by count");
+        assert.doesNotHaveClass(
+            graph.el.querySelector("button.fa-sort-amount-desc"),
+            "active",
+            "descending order should be applied"
+        );
+        checkDatasets(assert, graph, "data", { data: [4, 3, 1] });
+
+        await click(graph.el, "button.fa-sort-amount-asc");
+        assert.hasClass(
+            graph.el.querySelector("button.fa-sort-amount-asc"),
+            "active",
+            "ascending order button should be active"
+        );
+        checkDatasets(assert, graph, "data", { data: [1, 3, 4] });
+
+        await click(graph.el, "button.fa-sort-amount-desc");
+        assert.hasClass(
+            graph.el.querySelector("button.fa-sort-amount-desc"),
+            "active",
+            "descending order button should be active"
+        );
+        checkDatasets(assert, graph, "data", { data: [4, 3, 1] });
+    });
+
+    QUnit.test("graph view sort by measure for grouped data", async function (assert) {
+        assert.expect(8);
+
+        // change first record from foo as there are 4 records count for each product
+        serverData.models.product.records.push({ id: 38, display_name: "zphone" });
+        serverData.models.foo.records[7].product_id = 38;
+
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph>
+                    <field name="product_id"/>
+                    <field name="bar"/>
+                </graph>
+            `,
+        });
+
+        checkLegend(assert, graph, ["true", "false"], "measure should be by count");
+        checkDatasets(assert, graph, "data", [{ data: [3, 0, 0] }, { data: [1, 3, 1] }]);
+
+        await click(graph.el, "button.fa-sort-amount-asc");
+        assert.hasClass(
+            graph.el.querySelector("button.fa-sort-amount-asc"),
+            "active",
+            "ascending order should be applied by default"
+        );
+        checkDatasets(assert, graph, "data", [{ data: [1, 3, 1] }, { data: [0, 0, 3] }]);
+
+        await click(graph.el, "button.fa-sort-amount-desc");
+        assert.hasClass(
+            graph.el.querySelector("button.fa-sort-amount-desc"),
+            "active",
+            "ascending order button should be active"
+        );
+        checkDatasets(assert, graph, "data", [{ data: [3, 0, 0] }, { data: [1, 3, 1] }]);
+
+        // again click on descending button to deactivate order button
+        await click(graph.el, "button.fa-sort-amount-desc");
+        assert.doesNotHaveClass(
+            graph.el.querySelector("button.fa-sort-amount-desc"),
+            "active",
+            "descending order button should not be active"
+        );
+        checkDatasets(assert, graph, "data", [{ data: [3, 0, 0] }, { data: [1, 3, 1] }]);
+    });
+
+    QUnit.test("graph view sort by measure for multiple grouped data", async function (assert) {
+        assert.expect(8);
+
+        // change first record from foo as there are 4 records count for each product
+        serverData.models.product.records.push({ id: 38, display_name: "zphone" });
+        serverData.models.foo.records[7].product_id = 38;
+        serverData.models.foo.records.splice(
+            0,
+            4,
+            { id: 9, foo: 48, bar: false, product_id: 41, date: "2016-04-01" },
+            { id: 10, foo: 49, bar: false, product_id: 41, date: "2016-04-01" },
+            { id: 11, foo: 50, bar: true, product_id: 37, date: "2016-01-03" },
+            { id: 12, foo: 50, bar: true, product_id: 41, date: "2016-01-03" }
+        );
+
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph> 
+                    <field name="date"/>
+                    <field name="product_id"/>
+                </graph>
+            `,
+        });
+
+        checkLegend(assert, graph, ["xpad", "xphone", "zphone"], "measure should be by count");
+        checkDatasets(assert, graph, "data", [
+            { data: [2, 1, 1, 2] },
+            { data: [0, 1, 0, 0] },
+            { data: [1, 0, 0, 0] },
+        ]);
+
+        await click(graph.el, "button.fa-sort-amount-asc");
+        assert.hasClass(
+            graph.el.querySelector("button.fa-sort-amount-asc"),
+            "active",
+            "ascending order should be applied by default"
+        );
+        checkDatasets(assert, graph, "data", [
+            { data: [1, 1, 2, 2] },
+            { data: [0, 1, 0, 0] },
+            { data: [0, 0, 0, 1] },
+        ]);
+
+        await click(graph.el, "button.fa-sort-amount-desc");
+        assert.hasClass(
+            graph.el.querySelector("button.fa-sort-amount-desc"),
+            "active",
+            "descending order button should be active"
+        );
+        checkDatasets(assert, graph, "data", [
+            { data: [2, 1, 2, 1] },
+            { data: [1, 0, 0, 0] },
+            { data: [0, 1, 0, 0] },
+        ]);
+
+        // again click on descending button to deactivate order button
+        await click(graph.el, "button.fa-sort-amount-desc");
+        assert.doesNotHaveClass(
+            graph.el.querySelector("button.fa-sort-amount-desc"),
+            "active",
+            "descending order button should not be active"
+        );
+        checkDatasets(assert, graph, "data", [
+            { data: [2, 1, 1, 2] },
+            { data: [0, 1, 0, 0] },
+            { data: [1, 0, 0, 0] },
+        ]);
+    });
+
+    QUnit.test("empty graph view with sample data", async function (assert) {
+        assert.expect(8);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph sample="1">
+                    <field name="product_id"/>
+                    <field name="date"/>
+                </graph>
+            `,
+            context: { search_default_false_domain: 1 },
+            searchViewArch: `
+                <search>
+                    <filter name="false_domain" string="False Domain" domain="[(0, '=', 1)]"/>
+                </search>
+            `,
+            noContentHelp: '<p class="abc">click to add a foo</p>',
+        });
+
+        assert.hasClass(graph.el, "o_view_sample_data");
+        assert.containsOnce(graph, ".o_view_nocontent");
+        assert.containsOnce(graph, ".o_graph_canvas_container canvas");
+        assert.hasClass(graph.el.querySelector(".o_graph_renderer"), "o_sample_data_disabled");
+
+        await toggleFilterMenu(graph);
+        await toggleMenuItem(graph, "False Domain");
+        assert.doesNotHaveClass(graph.el, "o_view_sample_data");
+        assert.containsNone(graph, ".o_view_nocontent");
+        assert.containsOnce(graph, ".o_graph_canvas_container canvas");
+        assert.doesNotHaveClass(
+            graph.el.querySelector(".o_graph_renderer"),
+            "o_sample_data_disabled"
+        );
+    });
+
+    QUnit.test("non empty graph view with sample data", async function (assert) {
+        assert.expect(8);
+        const graph = await makeView({
+            serverData,
+            type: "graph",
+            resModel: "foo",
+            arch: `
+                <graph sample="1">
+                    <field name="product_id"/>
+                    <field name="date"/>
+                </graph>
+            `,
+            searchViewArch: `
+                <search>
+                    <filter name="false_domain" string="False Domain" domain="[(0, '=', 1)]"/>
+                </search>
+            `,
+            noContentHelp: '<p class="abc">click to add a foo</p>',
+        });
+        assert.doesNotHaveClass(graph.el, "o_view_sample_data");
+        assert.containsNone(graph, ".o_view_nocontent");
+        assert.containsOnce(graph, ".o_graph_canvas_container canvas");
+        assert.doesNotHaveClass(
+            graph.el.querySelector(".o_graph_canvas_container"),
+            "o_sample_data_disabled"
+        );
+        await toggleFilterMenu(graph);
+        await toggleMenuItem(graph, "False Domain");
+        assert.doesNotHaveClass(graph.el, "o_view_sample_data");
+        assert.containsOnce(graph, ".o_graph_canvas_container canvas");
+        assert.doesNotHaveClass(
+            graph.el.querySelector(".o_graph_canvas_container"),
+            "o_sample_data_disabled"
+        );
+        assert.containsNone(graph, ".o_view_nocontent");
+    });
+
+    QUnit.test("reload chart with switchView button keep internal state", async function (assert) {
+        assert.expect(3);
+        serverData.views["foo,false,list"] = `<list/>`;
+        const webClient = await createWebClient({ serverData });
+        await doAction(webClient, {
+            name: "Foo Action 1",
+            res_model: "foo",
+            type: "ir.actions.act_window",
+            views: [
+                [false, "graph"],
+                [false, "list"],
+            ],
+        });
+        assert.hasClass(getModeButton(webClient, "bar"), "active");
+        await selectMode(webClient, "line");
+        assert.hasClass(getModeButton(webClient, "line"), "active");
+        await switchView(webClient, "graph");
+        assert.hasClass(getModeButton(webClient, "line"), "active");
+    });
+
+    QUnit.test(
+        "fallback on initial groupby when the groupby from control panel has 0 length",
+        async function (assert) {
+            assert.expect(2);
+            const graph = await makeView({
+                serverData,
+                type: "graph",
+                resModel: "foo",
+                arch: `
+                    <graph type="line">
+                        <field name="product_id"/>
+                    </graph>
+                `,
+                searchViewArch: `
+                    <search>
+                        <filter name="group_by_foo" string="Foo" domain="[]" context="{ 'group_by': 'foo'}"/>
+                    </search>
+                `,
+                context: {
+                    search_default_group_by_foo: 1,
+                },
+            });
+            checkLabels(assert, graph, ["3", "53", "2", "24", "4", "63", "42", "48"]);
+            await toggleGroupByMenu(graph);
+            await toggleMenuItem(graph, "Foo");
+            checkLabels(assert, graph, ["xphone", "xpad"]);
+        }
+    );
+
+    QUnit.test(
+        "change mode, stacked, or order via the graph buttons does not reload datapoints, change measure does",
+        async function (assert) {
+            assert.expect(13);
+            const graph = await makeView({
+                serverData,
+                type: "graph",
+                resModel: "foo",
+                arch: `
+                    <graph type="line">
+                        <field name="product_id"/>
+                    </graph>
+                `,
+                mockRPC: function (_, args) {
+                    if (args.method === "web_read_group") {
+                        assert.step(JSON.stringify(args.kwargs.fields));
+                    }
+                },
+            });
+
+            checkModeIs(assert, graph, "line");
+
+            await selectMode(graph, "bar");
+
+            checkModeIs(assert, graph, "bar");
+            assert.hasClass(graph.el.querySelector(`[data-tooltip="Stacked"]`), "active");
+
+            await click(graph.el.querySelector(`[data-tooltip="Stacked"]`));
+
+            assert.doesNotHaveClass(graph.el.querySelector(`[data-tooltip="Stacked"]`), "active");
+            assert.doesNotHaveClass(graph.el.querySelector(`[data-tooltip="Ascending"]`), "active");
+
+            await click(graph.el.querySelector(`[data-tooltip="Ascending"]`));
+
+            assert.hasClass(graph.el.querySelector(`[data-tooltip="Ascending"]`), "active");
+
+            await toggleMenu(graph, "Measures");
+            await toggleMenuItem(graph, "Foo");
+
+            assert.verifySteps([
+                `["__count"]`, // first load
+                `["__count","foo:sum"]`, // reload due to change in measure
+            ]);
+        }
+    );
+});

From d1e227b07b24b8e121fe9f56b10a6e6689d4294e Mon Sep 17 00:00:00 2001
From: Mathieu Duckerts-Antoine <dam@odoo.com>
Date: Tue, 7 Sep 2021 06:23:00 +0000
Subject: [PATCH 28/31] [IMP] web,*: new PivotView component

Part-of: odoo/odoo#73311
Co-authored-by: Aaron Bohy <aab@odoo.com>
Co-authored-by: Bruno Boi <boi@odoo.com>
Co-authored-by: Mathieu Duckerts-Antoine <dam@odoo.com>
Co-authored-by: Julien Mougenot <jum@odoo.com>
Co-authored-by: Lucas Perais <lpe@odoo.com>
Co-authored-by: Jorge Pinna Puissant <jpp@odoo.com>
---
 addons/board/static/tests/dashboard_tests.js  |   26 +-
 addons/event/views/event_views.xml            |    2 +-
 .../hr_expense/static/src/js/expense_views.js |    2 -
 .../report/hr_leave_employee_type_report.xml  |    2 +-
 .../im_livechat_report_channel_views.xml      |    2 +-
 .../im_livechat_report_operator_views.xml     |    2 +-
 .../views/mailing_contact_views.xml           |    2 +-
 addons/project/__manifest__.py                |    4 +-
 .../project/report/project_report_views.xml   |    2 +-
 addons/project/static/src/js/project_pivot.js |   13 -
 .../static/src/js/project_pivot_view.js       |   12 +
 .../src/js/project_rating_pivot_view.js       |   34 +
 .../static/src/js/project_rating_reporting.js |   34 -
 .../purchase/report/purchase_report_views.xml |    2 +-
 addons/purchase/views/purchase_views.xml      |    2 +-
 addons/rating/views/rating_rating_views.xml   |    2 +-
 ...ct_profitability_report_analysis_views.xml |    2 +-
 addons/web/__manifest__.py                    |    1 -
 addons/web/static/src/core/utils/numbers.js   |   22 +
 .../legacy/js/views/pivot/pivot_renderer.js   |    6 +-
 addons/web/static/src/legacy/xml/pivot.xml    |   20 +-
 .../src/views/pivot/pivot_arch_parser.js      |   76 +
 .../src/views/pivot/pivot_group_by_menu.js    |   59 +
 .../web/static/src/views/pivot/pivot_model.js | 1636 ++++++
 .../static/src/views/pivot/pivot_renderer.js  |  140 +
 .../static/src/views/pivot/pivot_renderer.xml |   81 +
 .../web/static/src/views/pivot/pivot_view.js  |  186 +
 .../scss => views/pivot}/pivot_view.scss      |   16 +-
 .../web/static/src/views/pivot/pivot_view.xml |   46 +
 .../tests/core/debug/debug_manager_tests.js   |    2 +
 .../web/static/tests/helpers/mock_server.js   |   11 +-
 .../web/static/tests/helpers/mock_services.js |   11 +
 .../legacy/control_panel/search_bar_tests.js  |    4 +
 .../static/tests/legacy/views/pivot_tests.js  |   68 +-
 .../tests/legacy/views/search_panel_tests.js  |   10 +-
 addons/web/static/tests/views/helpers.js      |    2 +-
 .../static/tests/views/pivot_view_tests.js    | 4931 +++++++++++++++++
 .../webclient/actions/window_action_tests.js  |    3 +
 38 files changed, 7322 insertions(+), 154 deletions(-)
 delete mode 100644 addons/project/static/src/js/project_pivot.js
 create mode 100644 addons/project/static/src/js/project_pivot_view.js
 create mode 100644 addons/project/static/src/js/project_rating_pivot_view.js
 delete mode 100644 addons/project/static/src/js/project_rating_reporting.js
 create mode 100644 addons/web/static/src/core/utils/numbers.js
 create mode 100644 addons/web/static/src/views/pivot/pivot_arch_parser.js
 create mode 100644 addons/web/static/src/views/pivot/pivot_group_by_menu.js
 create mode 100644 addons/web/static/src/views/pivot/pivot_model.js
 create mode 100644 addons/web/static/src/views/pivot/pivot_renderer.js
 create mode 100644 addons/web/static/src/views/pivot/pivot_renderer.xml
 create mode 100644 addons/web/static/src/views/pivot/pivot_view.js
 rename addons/web/static/src/{legacy/scss => views/pivot}/pivot_view.scss (88%)
 create mode 100644 addons/web/static/src/views/pivot/pivot_view.xml
 create mode 100644 addons/web/static/tests/views/pivot_view_tests.js

diff --git a/addons/board/static/tests/dashboard_tests.js b/addons/board/static/tests/dashboard_tests.js
index 1473823946d..6643f1accb6 100644
--- a/addons/board/static/tests/dashboard_tests.js
+++ b/addons/board/static/tests/dashboard_tests.js
@@ -7,6 +7,15 @@ var ListController = require('web.ListController');
 var testUtils = require('web.test_utils');
 var ListRenderer = require('web.ListRenderer');
 var pyUtils = require('web.py_utils');
+const registry = require("@web/core/registry");
+const { makeFakeUserService } = require("@web/../tests/helpers/mock_services");
+const {
+    toggleFilterMenu,
+    toggleMenuItem,
+    toggleMenuItemOption,
+    toggleComparisonMenu,
+    toggleFavoriteMenu,
+} = require("@web/../tests/search/helpers");
 
 const cpHelpers = testUtils.controlPanel;
 const { createWebClient, doAction } = require("@web/../tests/webclient/helpers");
@@ -1053,7 +1062,8 @@ QUnit.test('click on a cell of pivot view inside dashboard', async function (ass
     form.destroy();
 });
 
-QUnit.test(
+// TODO: The button "Add to my dashboard" is not yet developped on the new control panel search view
+QUnit.skip(
     "correctly save the time ranges of a reporting view in comparison mode",
     async function (assert) {
         assert.expect(1);
@@ -1090,6 +1100,8 @@ QUnit.test(
             }
         };
 
+        registry.category("services").add("user", makeFakeUserService());
+
         const webClient = await createWebClient({ serverData, mockRPC });
 
         await doAction(webClient, {
@@ -1100,16 +1112,16 @@ QUnit.test(
         });
 
         // filter on July 2020
-        await cpHelpers.toggleFilterMenu(webClient);
-        await cpHelpers.toggleMenuItem(webClient, "Date");
-        await cpHelpers.toggleMenuItemOption(webClient, "Date", "July");
+        await toggleFilterMenu(webClient);
+        await toggleMenuItem(webClient, "Date");
+        await toggleMenuItemOption(webClient, "Date", "July");
 
         // compare July 2020 to June 2020
-        await cpHelpers.toggleComparisonMenu(webClient);
-        await cpHelpers.toggleMenuItem(webClient, 0);
+        await toggleComparisonMenu(webClient);
+        await toggleMenuItem(webClient, 0);
 
         // add the view to the dashboard
-        await cpHelpers.toggleFavoriteMenu(webClient);
+        await toggleFavoriteMenu(webClient);
 
         await testUtils.dom.click($(".o_add_to_board > button"));
         await testUtils.fields.editInput($(".o_add_to_board input"), "a name");
diff --git a/addons/event/views/event_views.xml b/addons/event/views/event_views.xml
index cbdfad72cea..863f27e684f 100644
--- a/addons/event/views/event_views.xml
+++ b/addons/event/views/event_views.xml
@@ -648,7 +648,7 @@
             <field name="name">event.registration.pivot</field>
             <field name="model">event.registration</field>
             <field name="arch" type="xml">
-                <pivot string="Registration" display_quantity="True" sample="1">
+                <pivot string="Registration" display_quantity="1" sample="1">
                     <field name="event_id" type="row"/>
                 </pivot>
             </field>
diff --git a/addons/hr_expense/static/src/js/expense_views.js b/addons/hr_expense/static/src/js/expense_views.js
index a031f647de1..f192111dcc4 100644
--- a/addons/hr_expense/static/src/js/expense_views.js
+++ b/addons/hr_expense/static/src/js/expense_views.js
@@ -3,14 +3,12 @@ odoo.define('hr_expense.expenses.tree', function (require) {
     var DocumentUploadMixin = require('hr_expense.documents.upload.mixin');
     var KanbanController = require('web.KanbanController');
     var KanbanView = require('web.KanbanView');
-    var PivotView = require('web.PivotView');
     var ListController = require('web.ListController');
     var ListView = require('web.ListView');
     var viewRegistry = require('web.view_registry');
     var core = require('web.core');
     var ListRenderer = require('web.ListRenderer');
     var KanbanRenderer = require('web.KanbanRenderer');
-    var PivotRenderer = require('web.PivotRenderer');
     var session = require('web.session');
     const config = require('web.config');
 
diff --git a/addons/hr_holidays/report/hr_leave_employee_type_report.xml b/addons/hr_holidays/report/hr_leave_employee_type_report.xml
index 15ddf1b329e..5d4b07de1ca 100644
--- a/addons/hr_holidays/report/hr_leave_employee_type_report.xml
+++ b/addons/hr_holidays/report/hr_leave_employee_type_report.xml
@@ -19,7 +19,7 @@
         <field name="name">hr.leave.employee.type.report.view.pivot</field>
         <field name="model">hr.leave.employee.type.report</field>
         <field name="arch" type="xml">
-            <pivot sample="1" disable_linking="True">
+            <pivot sample="1" disable_linking="1">
                 <field name="employee_id" type="row"/>
                 <field name="number_of_days" type="measure"/>
                 <field name="leave_type" type="col"/>
diff --git a/addons/im_livechat/report/im_livechat_report_channel_views.xml b/addons/im_livechat/report/im_livechat_report_channel_views.xml
index 1de3ca5c327..6678bb3bcfd 100644
--- a/addons/im_livechat/report/im_livechat_report_channel_views.xml
+++ b/addons/im_livechat/report/im_livechat_report_channel_views.xml
@@ -6,7 +6,7 @@
             <field name="name">im_livechat.report.channel.pivot</field>
             <field name="model">im_livechat.report.channel</field>
             <field name="arch" type="xml">
-                <pivot string="Livechat Support Statistics" disable_linking="True" sample="1">
+                <pivot string="Livechat Support Statistics" disable_linking="1" sample="1">
                     <field name="technical_name" type="row"/>
                     <field name="duration" type="measure"/>
                     <field name="nbr_message" type="measure"/>
diff --git a/addons/im_livechat/report/im_livechat_report_operator_views.xml b/addons/im_livechat/report/im_livechat_report_operator_views.xml
index e2059fed6bc..9104952d152 100644
--- a/addons/im_livechat/report/im_livechat_report_operator_views.xml
+++ b/addons/im_livechat/report/im_livechat_report_operator_views.xml
@@ -6,7 +6,7 @@
             <field name="name">im_livechat.report.operator.pivot</field>
             <field name="model">im_livechat.report.operator</field>
             <field name="arch" type="xml">
-                <pivot string="Livechat Support Statistics" disable_linking="True" sample="1">
+                <pivot string="Livechat Support Statistics" disable_linking="1" sample="1">
                     <field name="partner_id" type="row"/>
                     <field name="duration" type="measure"/>
                     <field name="nbr_channel" type="measure"/>
diff --git a/addons/mass_mailing/views/mailing_contact_views.xml b/addons/mass_mailing/views/mailing_contact_views.xml
index 0de5fa81382..51574af0f0d 100644
--- a/addons/mass_mailing/views/mailing_contact_views.xml
+++ b/addons/mass_mailing/views/mailing_contact_views.xml
@@ -208,7 +208,7 @@
         <field name="model">mailing.contact</field>
         <field name="priority">10</field>
         <field name="arch" type="xml">
-            <pivot string="Mailing List Contacts" stacked="True" sample="1">
+            <pivot string="Mailing List Contacts" stacked="1" sample="1">
                 <field name="create_date" type="row"/>
             </pivot>
         </field>
diff --git a/addons/project/__manifest__.py b/addons/project/__manifest__.py
index 2b659091cee..b717a2fc762 100644
--- a/addons/project/__manifest__.py
+++ b/addons/project/__manifest__.py
@@ -68,9 +68,9 @@
             'project/static/src/js/project_graph_view.js',
             'project/static/src/js/project_kanban.js',
             'project/static/src/js/project_list.js',
-            'project/static/src/js/project_pivot.js',
+            'project/static/src/js/project_pivot_view.js',
             'project/static/src/js/project_rating_graph_view.js',
-            'project/static/src/js/project_rating_reporting.js',
+            'project/static/src/js/project_rating_pivot_view.js',
             'project/static/src/js/project_task_kanban_examples.js',
             'project/static/src/js/tours/project.js',
             'project/static/src/js/project_calendar.js',
diff --git a/addons/project/report/project_report_views.xml b/addons/project/report/project_report_views.xml
index 9c696950104..bb8808c6cf9 100644
--- a/addons/project/report/project_report_views.xml
+++ b/addons/project/report/project_report_views.xml
@@ -5,7 +5,7 @@
             <field name="name">report.project.task.user.pivot</field>
             <field name="model">report.project.task.user</field>
             <field name="arch" type="xml">
-                <pivot string="Tasks Analysis" display_quantity="true" sample="1">
+                <pivot string="Tasks Analysis" display_quantity="1" sample="1">
                     <field name="project_id" type="row"/>
                 </pivot>
             </field>
diff --git a/addons/project/static/src/js/project_pivot.js b/addons/project/static/src/js/project_pivot.js
deleted file mode 100644
index 355eae34c15..00000000000
--- a/addons/project/static/src/js/project_pivot.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/** @odoo-module **/
-
-import PivotView from 'web.PivotView';
-import { ProjectControlPanel } from '@project/js/project_control_panel';
-import viewRegistry from 'web.view_registry';
-
-export const ProjectPivotView = PivotView.extend({
-    config: Object.assign({}, PivotView.prototype.config, {
-        ControlPanel: ProjectControlPanel,
-    }),
-});
-
-viewRegistry.add('project_pivot', ProjectPivotView);
diff --git a/addons/project/static/src/js/project_pivot_view.js b/addons/project/static/src/js/project_pivot_view.js
new file mode 100644
index 00000000000..c5f71c95222
--- /dev/null
+++ b/addons/project/static/src/js/project_pivot_view.js
@@ -0,0 +1,12 @@
+/** @odoo-module **/
+
+import { PivotView } from "@web/views/pivot/pivot_view";
+import { ProjectControlPanel } from "@project/project_control_panel/project_control_panel";
+import { registry } from "@web/core/registry";
+
+const viewRegistry = registry.category("views");
+
+class ProjectPivotView extends PivotView {}
+ProjectPivotView.components = { ...PivotView, ControlPanel: ProjectControlPanel };
+
+viewRegistry.add("project_pivot", ProjectPivotView);
diff --git a/addons/project/static/src/js/project_rating_pivot_view.js b/addons/project/static/src/js/project_rating_pivot_view.js
new file mode 100644
index 00000000000..5d54afceb19
--- /dev/null
+++ b/addons/project/static/src/js/project_rating_pivot_view.js
@@ -0,0 +1,34 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+import { PivotView } from "@web/views/pivot/pivot_view";
+import { PivotArchParser } from "@web/views/pivot/pivot_arch_parser";
+import { registry } from "@web/core/registry";
+
+const viewRegistry = registry.category("views");
+
+const MEASURE_STRINGS = {
+    parent_res_id: _lt("Project"),
+    rating: _lt("Rating Value (/5)"),
+    res_id: _lt("Task"),
+};
+
+class ProjectRatingArchParser extends PivotArchParser {
+    parse() {
+        const archInfo = super.parse(...arguments);
+        for (const [key, val] of Object.entries(MEASURE_STRINGS)) {
+            archInfo.fieldAttrs[key] = {
+                ...archInfo.fieldAttrs[key],
+                string: val.toString(),
+            };
+        }
+        return archInfo;
+    }
+}
+
+// Would it be not better achiedved by using a proper arch directly?
+
+class ProjectRatingPivotView extends PivotView {}
+ProjectRatingPivotView.archParser = ProjectRatingArchParser;
+
+viewRegistry.add("project_rating_pivot", ProjectRatingPivotView);
diff --git a/addons/project/static/src/js/project_rating_reporting.js b/addons/project/static/src/js/project_rating_reporting.js
deleted file mode 100644
index 164e751b5ad..00000000000
--- a/addons/project/static/src/js/project_rating_reporting.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/** @odoo-module **/
-
-import { _t } from 'web.core';
-import PivotController from 'web.PivotController';
-import PivotView from 'web.PivotView';
-import viewRegistry from 'web.view_registry';
-
-const ProjectPivotController = PivotController.extend({
-    /**
-     * @override
-     */
-    init: function () {
-        this._super.apply(this, arguments);
-        const measures = JSON.parse(JSON.stringify(this.measures));
-        if ('res_id' in measures) {
-            measures.res_id.string = _t('Task');
-        }
-        if ('parent_res_id' in measures) {
-            measures.parent_res_id.string = _t('Project');
-        }
-        if ('rating' in measures) {
-            measures.rating.string = _t('Rating Value (/5)');
-        }
-        this.measures = measures;
-    },
-});
-
-const ProjectPivotView = PivotView.extend({
-    config: Object.assign({}, PivotView.prototype.config, {
-        Controller: ProjectPivotController,
-    }),
-});
-
-viewRegistry.add('project_rating_pivot', ProjectPivotView);
diff --git a/addons/purchase/report/purchase_report_views.xml b/addons/purchase/report/purchase_report_views.xml
index 3ab59218394..0b87d3a0801 100644
--- a/addons/purchase/report/purchase_report_views.xml
+++ b/addons/purchase/report/purchase_report_views.xml
@@ -4,7 +4,7 @@
             <field name="name">product.month.pivot</field>
             <field name="model">purchase.report</field>
             <field name="arch" type="xml">
-                <pivot string="Purchase Analysis" display_quantity="true" sample="1">
+                <pivot string="Purchase Analysis" display_quantity="1" sample="1">
                     <field name="category_id" type="row"/>
                     <field name="order_id" type="measure"/>
                     <field name="untaxed_total" type="measure"/>
diff --git a/addons/purchase/views/purchase_views.xml b/addons/purchase/views/purchase_views.xml
index 579271a88fe..9c643b28c82 100644
--- a/addons/purchase/views/purchase_views.xml
+++ b/addons/purchase/views/purchase_views.xml
@@ -111,7 +111,7 @@
             <field name="name">purchase.order.pivot</field>
             <field name="model">purchase.order</field>
             <field name="arch" type="xml">
-                <pivot string="Purchase Order" display_quantity="True" sample="1">
+                <pivot string="Purchase Order" display_quantity="1" sample="1">
                     <field name="partner_id" type="row"/>
                     <field name="amount_total" type="measure"/>
                 </pivot>
diff --git a/addons/rating/views/rating_rating_views.xml b/addons/rating/views/rating_rating_views.xml
index 4bc1f3065e0..1df89804d3b 100644
--- a/addons/rating/views/rating_rating_views.xml
+++ b/addons/rating/views/rating_rating_views.xml
@@ -107,7 +107,7 @@
             <field name="name">rating.rating.pivot</field>
             <field name="model">rating.rating</field>
             <field name="arch" type="xml">
-                <pivot string="Ratings" display_quantity="true" sample="1">
+                <pivot string="Ratings" display_quantity="1" sample="1">
                     <field name="rated_partner_id" type="row"/>
                     <field name="create_date" type="col"/>
                     <field name="rating" type="measure" string="Rating Value (/5)"/>
diff --git a/addons/sale_timesheet/report/project_profitability_report_analysis_views.xml b/addons/sale_timesheet/report/project_profitability_report_analysis_views.xml
index 660986b2ef9..8061f942299 100644
--- a/addons/sale_timesheet/report/project_profitability_report_analysis_views.xml
+++ b/addons/sale_timesheet/report/project_profitability_report_analysis_views.xml
@@ -5,7 +5,7 @@
         <field name="name">project.profitability.report.pivot</field>
         <field name="model">project.profitability.report</field>
         <field name="arch" type="xml">
-            <pivot string="Profitability Analysis" display_quantity="true" sample="1">
+            <pivot string="Profitability Analysis" display_quantity="1" sample="1">
                 <field name="project_id" type="row"/>
                 <field name="amount_untaxed_to_invoice" type="measure"/>
                 <field name="amount_untaxed_invoiced" type="measure"/>
diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py
index 29e0e0485bd..84add579bda 100644
--- a/addons/web/__manifest__.py
+++ b/addons/web/__manifest__.py
@@ -114,7 +114,6 @@ This module provides the core of the Odoo Web Client.
             'web/static/src/legacy/scss/fields.scss',
             'web/static/src/legacy/scss/file_upload.scss',
             'web/static/src/legacy/scss/views.scss',
-            'web/static/src/legacy/scss/pivot_view.scss',
             'web/static/src/legacy/scss/graph_view.scss',
             'web/static/src/legacy/scss/form_view.scss',
             'web/static/src/legacy/scss/list_view.scss',
diff --git a/addons/web/static/src/core/utils/numbers.js b/addons/web/static/src/core/utils/numbers.js
new file mode 100644
index 00000000000..01947258343
--- /dev/null
+++ b/addons/web/static/src/core/utils/numbers.js
@@ -0,0 +1,22 @@
+/** @odoo-module **/
+
+/**
+ * @param {Number} value
+ * @param {Number} comparisonValue
+ * @returns {Number}
+ */
+export function computeVariation(value, comparisonValue) {
+    if (isNaN(value) || isNaN(comparisonValue)) {
+        return NaN;
+    }
+    if (comparisonValue === 0) {
+        if (value === 0) {
+            return 0;
+        } else if (value > 0) {
+            return 1;
+        } else {
+            return -1;
+        }
+    }
+    return (value - comparisonValue) / Math.abs(comparisonValue);
+}
diff --git a/addons/web/static/src/legacy/js/views/pivot/pivot_renderer.js b/addons/web/static/src/legacy/js/views/pivot/pivot_renderer.js
index 09e2e44085c..d10a6b62350 100644
--- a/addons/web/static/src/legacy/js/views/pivot/pivot_renderer.js
+++ b/addons/web/static/src/legacy/js/views/pivot/pivot_renderer.js
@@ -49,7 +49,7 @@
         }
     }
 
-    PivotCustomGroupByItem.template = "web.PivotCustomGroupByItem";
+    PivotCustomGroupByItem.template = "web.legacy.PivotCustomGroupByItem";
     PivotCustomGroupByItem.props = { fields: Array };
 
     export class PivotGroupByMenu extends DropdownMenu {
@@ -98,7 +98,7 @@
         }
     }
 
-    PivotGroupByMenu.template = "web.PivotGroupByMenu";
+    PivotGroupByMenu.template = "web.legacy.PivotGroupByMenu";
     PivotGroupByMenu.components = { PivotCustomGroupByItem };
     PivotGroupByMenu.props = {
         ...DropdownMenu.props,
@@ -303,7 +303,7 @@
         }
     }
 
-    PivotRenderer.template = 'web.PivotRenderer';
+    PivotRenderer.template = 'web.legacy.PivotRenderer';
     PivotRenderer.components = { PivotGroupByMenu };
 
     export default PivotRenderer;
diff --git a/addons/web/static/src/legacy/xml/pivot.xml b/addons/web/static/src/legacy/xml/pivot.xml
index 650ebb3b587..7984c9f215c 100644
--- a/addons/web/static/src/legacy/xml/pivot.xml
+++ b/addons/web/static/src/legacy/xml/pivot.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates>
 
-    <div t-name="web.PivotRenderer" class="o_pivot" owl="1">
+    <div t-name="web.legacy.PivotRenderer" class="o_pivot" owl="1">
         <t t-if="!(props.hasData and props.measures.length) or (props.isSample and !props.isEmbedded)">
             <t t-if="props.noContentHelp" t-call="web.ActionHelper" >
                 <t t-set="noContentHelp" t-value="props.noContentHelp"/>
@@ -13,8 +13,8 @@
             <thead>
                 <tr t-foreach="props.table.headers" t-as="row" t-key="'header_' + row_index">
                     <t t-foreach="row" t-as="cell" t-key="'header_row_' + cell_index">
-                        <t t-if="cell.measure" t-call="web.PivotMeasure"/>
-                        <t t-elif="cell.isLeaf !== undefined" t-call="web.PivotHeader">
+                        <t t-if="cell.measure" t-call="web.legacy.PivotMeasure"/>
+                        <t t-elif="cell.isLeaf !== undefined" t-call="web.legacy.PivotHeader">
                             <t t-set="isXAxis" t-value="true"/>
                         </t>
                         <th t-else="1" t-att-colspan="cell.width" t-att-rowspan="cell.height"/>
@@ -23,7 +23,7 @@
             </thead>
             <tbody>
                 <tr t-foreach="props.table.rows" t-as="row" t-key="'row_' + row_index">
-                    <t t-call="web.PivotHeader">
+                    <t t-call="web.legacy.PivotHeader">
                         <t t-set="isXAxis" t-value="false"/>
                         <t t-set="cell" t-value="row"/>
                     </t>
@@ -54,17 +54,17 @@
         </table>
     </div>
 
-    <t t-name="web.PivotHeader" owl="1">
+    <t t-name="web.legacy.PivotHeader" owl="1">
         <th t-att-colspan="isXAxis ? cell.width : undefined" t-att-rowspan="isXAxis ? cell.height : undefined" t-att-class="{
                 o_pivot_header_cell_closed: cell.isLeaf,
                 o_pivot_header_cell_opened: !cell.isLeaf,
             }" t-attf-style="{{ isXAxis ? undefined : 'padding-left: ' + _getPadding(cell) + 'px;' }}" t-att-title="cell.label" t-on-click.self.prevent="_onHeaderClick(cell, isXAxis ? 'col' : 'row')">
             <span t-on-click.self.prevent="_onHeaderClick(cell, isXAxis ? 'col' : 'row')" t-esc="cell.title"/>
-            <t t-if="_isClicked(cell.groupId, isXAxis)" t-call="web.PivotGroupBySelection"/>
+            <t t-if="_isClicked(cell.groupId, isXAxis)" t-call="web.legacy.PivotGroupBySelection"/>
         </th>
     </t>
 
-    <t t-name="web.PivotMeasure" owl="1">
+    <t t-name="web.legacy.PivotMeasure" owl="1">
         <th class="text-muted" t-att-colspan="cell.width" t-att-rowspan="cell.height" t-att-class="{
                 o_pivot_origin_row: cell.originIndexes,
                 o_pivot_measure_row: !cell.originIndexes,
@@ -75,7 +75,7 @@
         </th>
     </t>
 
-    <div t-name="web.PivotGroupBySelection" class="dropdown" owl="1">
+    <div t-name="web.legacy.PivotGroupBySelection" class="dropdown" owl="1">
         <PivotGroupByMenu 
             customGroupBys="customGroupBys"
             fields="props.groupableFields"
@@ -85,7 +85,7 @@
             />
     </div>
 
-    <t t-name="web.PivotGroupByMenu" owl="1">
+    <t t-name="web.legacy.PivotGroupByMenu" owl="1">
         <div class="dropdown-menu o_pivot_field_menu show" data-display="static" role="menu">
             <t t-set="currentGroup" t-value="null"/>
             <t t-foreach="items" t-as="item" t-key="item.fieldName">
@@ -133,7 +133,7 @@
         </div>
     </t>
 
-    <t t-name="web.PivotCustomGroupByItem" t-inherit="web.Legacy.CustomGroupByItem" t-inherit-mode="primary" owl="1">
+    <t t-name="web.legacy.PivotCustomGroupByItem" t-inherit="web.Legacy.CustomGroupByItem" t-inherit-mode="primary" owl="1">
         <xpath expr="//div[hasclass('o_generator_menu')]" position="attributes">
             <attribute name="t-on-click">_onToggleCustomGroupbyItem</attribute>
         </xpath>
diff --git a/addons/web/static/src/views/pivot/pivot_arch_parser.js b/addons/web/static/src/views/pivot/pivot_arch_parser.js
new file mode 100644
index 00000000000..63ee6cdd292
--- /dev/null
+++ b/addons/web/static/src/views/pivot/pivot_arch_parser.js
@@ -0,0 +1,76 @@
+/** @odoo-module **/
+
+import { evaluateExpr } from "@web/core/py_js/py";
+import { XMLParser } from "@web/core/utils/xml";
+import { archParseBoolean } from "@web/views/helpers/utils";
+
+export class PivotArchParser extends XMLParser {
+    parse(arch) {
+        const archInfo = {
+            activeMeasures: [], // store the defined active measures
+            colGroupBys: [], // store the defined group_by used on cols
+            defaultOrder: null,
+            fieldAttrs: {},
+            rowGroupBys: [], // store the defined group_by used on rows
+            widgets: {}, // wigdets defined in the arch
+        };
+
+        this.visitXML(arch, (node) => {
+            switch (node.tagName) {
+                case "pivot": {
+                    if (node.hasAttribute("disable_linking")) {
+                        archInfo.disableLinking = archParseBoolean(
+                            node.getAttribute("disable_linking")
+                        );
+                    }
+                    if (node.hasAttribute("default_order")) {
+                        archInfo.defaultOrder = node.getAttribute("default_order");
+                    }
+                    if (node.hasAttribute("string")) {
+                        archInfo.title = node.getAttribute("string");
+                    }
+                    if (node.hasAttribute("display_quantity")) {
+                        archInfo.displayQuantity = archParseBoolean(
+                            node.getAttribute("display_quantity")
+                        );
+                    }
+                    break;
+                }
+                case "field": {
+                    let fieldName = node.getAttribute("name"); // exists (rng validation)
+
+                    archInfo.fieldAttrs[fieldName] = {};
+                    if (node.hasAttribute("string")) {
+                        archInfo.fieldAttrs[fieldName].string = node.getAttribute("string");
+                    }
+                    if (node.hasAttribute("invisible")) {
+                        const isInvisible = Boolean(evaluateExpr(node.getAttribute("invisible")));
+                        if (isInvisible) {
+                            archInfo.fieldAttrs[fieldName].isInvisible = true;
+                            break;
+                        }
+                    }
+
+                    if (node.hasAttribute("interval")) {
+                        fieldName += ":" + node.getAttribute("interval");
+                    }
+                    if (node.hasAttribute("widget")) {
+                        archInfo.widgets[fieldName] = node.getAttribute("widget");
+                    }
+                    if (node.getAttribute("type") === "measure" || node.hasAttribute("operator")) {
+                        archInfo.activeMeasures.push(fieldName);
+                    }
+                    if (node.getAttribute("type") === "col") {
+                        archInfo.colGroupBys.push(fieldName);
+                    }
+                    if (node.getAttribute("type") === "row") {
+                        archInfo.rowGroupBys.push(fieldName);
+                    }
+                    break;
+                }
+            }
+        });
+
+        return archInfo;
+    }
+}
diff --git a/addons/web/static/src/views/pivot/pivot_group_by_menu.js b/addons/web/static/src/views/pivot/pivot_group_by_menu.js
new file mode 100644
index 00000000000..f012225aecd
--- /dev/null
+++ b/addons/web/static/src/views/pivot/pivot_group_by_menu.js
@@ -0,0 +1,59 @@
+/** @odoo-module */
+
+import { GroupByMenu } from "@web/search/group_by_menu/group_by_menu";
+import { getIntervalOptions } from "@web/search/utils/dates";
+
+export class PivotGroupByMenu extends GroupByMenu {
+    /**
+     * @override
+     * @returns {Object[]}
+     */
+    get items() {
+        let items = super.items.filter((i) => !i.custom);
+        if (items.length === 0) {
+            items = this.fields;
+        }
+
+        // Add custom groupbys
+        let groupNumber = 1 + Math.max(0, ...items.map(({ groupNumber: n }) => n));
+        for (const [fieldName, customGroupBy] of this.props.customGroupBys.entries()) {
+            items.push({ ...customGroupBy, name: fieldName, groupNumber: groupNumber++ });
+        }
+
+        return items.map((item) => ({
+            ...item,
+            id: item.id || item.name,
+            fieldName: item.fieldName || item.name,
+            description: item.description || item.string,
+            isActive: false,
+            options:
+                item.options || ["date", "datetime"].includes(item.type)
+                    ? getIntervalOptions()
+                    : undefined,
+        }));
+    }
+    /**
+     * @override
+     * @param {CustomEvent} ev
+     */
+    onAddCustomGroup(ev) {
+        this.trigger("add-custom-group-by", {
+            fieldName: ev.detail.fieldName,
+            groupId: this.props.cell.groupId,
+        });
+    }
+    /**
+     * @override
+     * @param {CustomEvent} ev
+     */
+    onGroupBySelected(ev) {
+        const { itemId, optionId } = ev.detail.payload;
+        const item = this.items.find(({ id }) => id === itemId);
+        // Augment payload data
+        Object.assign(ev.detail.payload, {
+            fieldName: item.fieldName,
+            interval: optionId,
+            groupId: this.props.cell.groupId,
+        });
+    }
+}
diff --git a/addons/web/static/src/views/pivot/pivot_model.js b/addons/web/static/src/views/pivot/pivot_model.js
new file mode 100644
index 00000000000..3055dfffb60
--- /dev/null
+++ b/addons/web/static/src/views/pivot/pivot_model.js
@@ -0,0 +1,1636 @@
+/** @odoo-module **/
+
+import { Domain } from "@web/core/domain";
+import { cartesian, sections, sortBy, symmetricalDifference } from "@web/core/utils/arrays";
+import { KeepLast } from "@web/core/utils/concurrency";
+import { computeVariation } from "@web/core/utils/numbers";
+import { DEFAULT_INTERVAL } from "@web/search/utils/dates";
+import { Model } from "@web/views/helpers/model";
+import { buildSampleORM } from "@web/views/helpers/sample_server";
+import { computeReportMeasures, processMeasure } from "@web/views/helpers/utils";
+
+/**
+ * Pivot Model
+ *
+ * The pivot model keeps an in-memory representation of the pivot table that is
+ * displayed on the screen.  The exact layout of this representation is not so
+ * simple, because a pivot table is at its core a 2-dimensional object, but
+ * with a 'tree' component: some rows/cols can be expanded so we zoom into the
+ * structure.
+ *
+ * However, we need to be able to manipulate the data in a somewhat efficient
+ * way, and to transform it into a list of lines to be displayed by the renderer.
+ *
+ * Basicaly the pivot table presents aggregated values for various groups of records
+ * in one domain. If a comparison is asked for, two domains are considered.
+ *
+ * Let us consider a simple example and let us fix the vocabulary (let us suppose we are in June 2020):
+ * ___________________________________________________________________________________________________________________________________________
+ * |                    |   Total                                                                                                             |
+ * |                    |_____________________________________________________________________________________________________________________|
+ * |                    |   Sale Team 1                         |  Sale Team 2                         |                                      |
+ * |                    |_______________________________________|______________________________________|______________________________________|
+ * |                    |   Sales total                         |  Sales total                         |  Sales total                         |
+ * |                    |_______________________________________|______________________________________|______________________________________|
+ * |                    |   May 2020   | June 2020  | Variation |  May 2020   | June 2020  | Variation |  May 2020   | June 2020  | Variation |
+ * |____________________|______________|____________|___________|_____________|____________|___________|_____________|____________|___________|
+ * | Total              |     85       |     110    |  29.4%    |     40      |    30      |   -25%    |    125      |    140     |     12%   |
+ * |    Europe          |     25       |     35     |    40%    |     40      |    30      |   -25%    |     65      |     65     |      0%   |
+ * |        Brussels    |      0       |     15     |   100%    |     30      |    30      |     0%    |     30      |     45     |     50%   |
+ * |        Paris       |     25       |     20     |   -20%    |     10      |     0      |  -100%    |     35      |     20     |  -42.8%   |
+ * |    North America   |     60       |     75     |    25%    |             |            |           |     60      |     75     |     25%   |
+ * |        Washington  |     60       |     75     |    25%    |             |            |           |     60      |     75     |     25%   |
+ * |____________________|______________|____________|___________|_____________|____________|___________|_____________|____________|___________|
+ *
+ *
+ * META DATA:
+ *
+ * In the above pivot table, the records have been grouped using the fields
+ *
+ *      continent_id, city_id
+ *
+ * for rows and
+ *
+ *      sale_team_id
+ *
+ * for columns.
+ *
+ * The measure is the field 'sales_total'.
+ *
+ * Two domains are considered: 'May 2020' and 'June 2020'.
+ *
+ * In the model,
+ *
+ *      - rowGroupBys is the list [continent_id, city_id]
+ *      - colGroupBys is the list [sale_team_id]
+ *      - measures is the list [sales_total]
+ *      - domains is the list [d1, d2] with d1 and d2 domain expressions
+ *          for say sale_date in May 2020 and June 2020, for instance
+ *          d1 = [['sale_date', >=, 2020-05-01], ['sale_date', '<=', 2020-05-31]]
+ *      - origins is the list ['May 2020', 'June 2020']
+ *
+ * DATA:
+ *
+ * Recall that a group is constituted by records (in a given domain)
+ * that have the same (raw) values for a list of fields.
+ * Thus the group itself is identified by this list and the domain.
+ * In comparison mode, the same group (forgetting the domain part or 'originIndex')
+ * can be eventually found in the two domains.
+ * This defines the way in which the groups are identified or not.
+ *
+ * In the above table, (forgetting the domain) the following groups are found:
+ *
+ *      the 'row groups'
+ *      - Total
+ *      - Europe
+ *      - America
+ *      - Europe, Brussels
+ *      - Europe, Paris
+ *      - America, Washington
+ *
+ *      the 'col groups'
+ *
+ *      - Total
+ *      - Sale Team 1
+ *      - Sale Team 2
+ *
+ *      and all non trivial combinations of row groups and col groups
+ *
+ *      - Europe, Sale Team 1
+ *      - Europe, Brussels, Sale Team 2
+ *      - America, Washington, Sale Team 1
+ *      - ...
+ *
+ * The list of fields is created from the concatenation of two lists of fields, the first in
+ *
+ * [], [f1], [f1, f2], ... [f1, f2, ..., fn]  for [f1, f2, ..., fn] the full list of groupbys
+ * (called rowGroupBys) used to create row groups
+ *
+ * In the example: [], [continent_id], [continent_id, city_id].
+ *
+ * and the second in
+ * [], [g1], [g1, g2], ... [g1, g2, ..., gm]  for [g1, g2, ..., gm] the full list of groupbys
+ * (called colGroupBys) used to create col groups.
+ *
+ * In the example: [], [sale_team_id].
+ *
+ * Thus there are (n+1)*(m+1) lists of fields possible.
+ *
+ * In the example: 6 lists possible, namely [],
+ *                                          [continent_id], [sale_team_id],
+ *                                          [continent_id, sale_team_id], [continent_id, city_id],
+ *                                          [continent_id, city_id, sale_team_id]
+ *
+ * A given list is thus of the form [f1,..., fi, g1,..., gj] or better [[f1,...,fi], [g1,...,gj]]
+ *
+ * For each list of fields possible and each domain considered, one read_group is done
+ * and gives results of the form (an exception for list [])
+ *
+ * g = {
+ *  f1: v1, ..., fi: vi,
+ *  g1: w1, ..., gj: wj,
+ *  m1: x1, ..., mk: xk,
+ *  __count: c,
+ *  __domain: d
+ * }
+ *
+ * where v1,...,vi,w1,...,Wj are 'values' for the corresponding fields and
+ * m1,...,mk are the fields selected as measures.
+ *
+ * For example, g = {
+ *      continent_id: [1, 'Europe']
+ *      sale_team_id: [1, 'Sale Team 1']
+ *      sales_count: 25,
+ *      __count: 4
+ *      __domain: [
+ *                  ['sale_date', >=, 2020-05-01], ['sale_date', '<=', 2020-05-31],
+ *                  ['continent_id', '=', 1],
+ *                  ['sale_team_id', '=', 1]
+ *                ]
+ * }
+ *
+ * Thus the above group g is fully determined by [[v1,...,vi], [w1,...,wj]] and the base domain
+ * or the corresponding 'originIndex'.
+ *
+ * When j=0, g corresponds to a row group (or also row header) and is of the form [[v1,...,vi], []] or more simply [v1,...vi]
+ * (not forgetting the list [v1,...vi] comes from left).
+ * When i=0, g corresponds to a col group (or col header) and is of the form [[], [w1,...,wj]] or more simply [w1,...,wj].
+ *
+ * A generic group g as above [[v1,...,vi], [w1,...,wj]] corresponds to the two headers [[v1,...,vi], []]
+ * and [[], [w1,...,wj]].
+ *
+ * Here is a description of the data structure manipulated by the pivot model.
+ *
+ * Five objects contain all the data from the read_groups
+ *
+ *      - rowGroupTree: contains information on row headers
+ *             the nodes correspond to the groups of the form [[v1,...,vi], []]
+ *             The root is [[], []].
+ *             A node [[v1,...,vl], []] has as direct children the nodes of the form [[v1,...,vl,v], []],
+ *             this means that a direct child is obtained by grouping records using the single field fi+1
+ *
+ *             The structure at each level is of the form
+ *
+ *             {
+ *                  root: {
+ *                      values: [v1,...,vl],
+ *                      labels: [la1,...,lal]
+ *                  },
+ *                  directSubTrees: {
+ *                      v => {
+ *                              root: {
+ *                                  values: [v1,...,vl,v]
+ *                                  labels: [label1,...,labell,label]
+ *                              },
+ *                              directSubTrees: {...}
+ *                          },
+ *                      v' => {...},
+ *                      ...
+ *                  }
+ *             }
+ *
+ *             (directSubTrees is a Map instance)
+ *
+ *             In the example, the rowGroupTree is:
+ *
+ *             {
+ *                  root: {
+ *                      values: [],
+ *                      labels: []
+ *                  },
+ *                  directSubTrees: {
+ *                      1 => {
+ *                              root: {
+ *                                  values: [1],
+ *                                  labels: ['Europe'],
+ *                              },
+ *                              directSubTrees: {
+ *                                  1 => {
+ *                                          root: {
+ *                                              values: [1, 1],
+ *                                              labels: ['Europe', 'Brussels'],
+ *                                          },
+ *                                          directSubTrees: new Map(),
+ *                                  },
+ *                                  2 => {
+ *                                          root: {
+ *                                              values: [1, 2],
+ *                                              labels: ['Europe', 'Paris'],
+ *                                          },
+ *                                          directSubTrees: new Map(),
+ *                                  },
+ *                              },
+ *                          },
+ *                      2 => {
+ *                              root: {
+ *                                  values: [2],
+ *                                  labels: ['America'],
+ *                              },
+ *                              directSubTrees: {
+ *                                  3 => {
+ *                                          root: {
+ *                                              values: [2, 3],
+ *                                              labels: ['America', 'Washington'],
+ *                                          }
+ *                                          directSubTrees: new Map(),
+ *                                  },
+ *                              },
+ *                      },
+ *                  },
+ *             }
+ *
+ *      - colGroupTree: contains information on col headers
+ *              The same as above with right instead of left
+ *
+ *      - measurements: contains information on measure values for all the groups
+ *
+ *              the object keys are of the form JSON.stringify([[v1,...,vi], [w1,...,wj]])
+ *              and values are arrays of length equal to number of origins containing objects of the form
+ *                  {m1: x1,...,mk: xk}
+ *              The structure looks like
+ *
+ *              {
+ *                  JSON.stringify([[], []]): [{m1: x1,...,mk: xk}, {m1: x1',...,mk: xk'},...]
+ *                  ....
+ *                  JSON.stringify([[v1,...,vi], [w1,...,wj]]): [{m1: y1',...,mk: yk'}, {m1: y1',...,mk: yk'},...],
+ *                  ....
+ *                  JSON.stringify([[v1,...,vn], [w1,...,wm]]): [{m1: z1',...,mk: zk'}, {m1: z1',...,mk: zk'},...],
+ *              }
+ *              Thus the structure contains all information for all groups and all origins on measure values.
+ *
+ *
+ *              this.measurments["[[], []]"][0]['foo'] gives the value of the measure 'foo' for the group 'Total' and the
+ *              first domain (origin).
+ *
+ *              In the example:
+ *                  {
+ *                      "[[], []]": [{'sales_total': 125}, {'sales_total': 140}]                      (total/total)
+ *                      ...
+ *                      "[[1, 2], [2]]": [{'sales_total': 10}, {'sales_total': 0}]                   (Europe/Paris/Sale Team 2)
+ *                      ...
+ *                  }
+ *
+ *      - counts: contains information on the number of records in each groups
+ *              The structure is similar to the above but the arrays contains numbers (counts)
+ *      - groupDomains:
+ *              The structure is similar to the above but the arrays contains domains
+ *
+ *      With this light data structures, all manipulation done by the model are eased and redundancies are limited.
+ *      Each time a rendering or an export of the data has to be done, the pivot table is generated by the getTable function.
+ */
+
+/**
+ * @typedef Meta
+ * @property {Object} meta
+ * @property {string[]} activeMeasures
+ * @property {string[]} colGroupBys
+ * @property {boolean} disableLinking
+ * @property {Object} fields
+ * @property {Object} measures
+ * @property {string} resModel
+ * @property {string[]} rowGroupBys
+ * @property {string} title
+ * @property {boolean} useSampleModel
+ * @property {Object} widgets
+ * @property {Map} customGroupBys
+ * @property {string[]} expandedRowGroupBys
+ * @property {string[]} expandedColGroupBys
+ * @property {Object} sortedColumn
+ */
+
+/**
+ * @typedef Data
+ * @property {Object} colGroupTree
+ * @property {Object} rowGroupTree
+ * @property {Object} groupDomains
+ * @property {Object} measurements
+ * @property {Object} counts
+ * @property {Object} numbering
+ */
+
+/**
+ * @typedef SearchParams
+ * @property {Array[]} domain
+ * @property {Object} context
+ * @property {string[]} groupBy
+ * @property {Array[]} domains
+ * @property {string[]} origins
+ */
+
+/**
+ * @typedef Config
+ * @property {Meta} meta
+ * @property {Data} data
+ * @property {SearchParams} searchParams
+ */
+
+export class PivotModel extends Model {
+    /**
+     * @override
+     * @param {Object} params.meta
+     * @param {string[]} params.meta.activeMeasures
+     * @param {string[]} params.meta.colGroupBys
+     * @param {Object} params.meta.fields
+     * @param {Object[]} params.meta.measures
+     * @param {string} params.meta.resModel
+     * @param {string[]} params.meta.rowGroupBys
+     * @param {string|null} params.meta.defaultOrder
+     * @param {boolean} params.meta.disableLinking
+     * @param {boolean} params.meta.useSampleModel
+     * @param {Map} [params.meta.customGroupBys={}]
+     * @param {string[]} [params.meta.expandedColGroupBys=[]]
+     * @param {string[]} [params.meta.expandedRowGroupBys=[]]
+     * @param {Object|null} [params.meta.sortedColumn=null]
+     * @param {Object} [params.data] previously exported data
+     */
+    setup(params, { orm, user }) {
+        this.realORM = orm;
+        this.orm2Use = this.realORM;
+        this.user = user;
+        this.keepLast = new KeepLast();
+
+        let sortedColumn = params.meta.sortedColumn || null;
+        if (!sortedColumn && params.meta.defaultOrder) {
+            const defaultOrder = params.meta.defaultOrder.split(" ");
+            sortedColumn = {
+                groupId: [[], []],
+                measure: defaultOrder[0],
+                order: defaultOrder[1] ? defaultOrder[1] : "asc",
+            };
+        }
+
+        const meta = Object.assign({}, params.meta, {
+            customGroupBys: params.meta.customGroupBys || new Map(),
+            expandedRowGroupBys: params.meta.expandedRowGroupBys || [],
+            expandedColGroupBys: params.meta.expandedColGroupBys || [],
+            sortedColumn,
+        });
+        this.meta = this._buildMeta(meta);
+
+        this.data = params.data || {
+            colGroupTree: null,
+            rowGroupTree: null,
+            groupDomains: {},
+            measurements: {},
+            counts: {},
+            numbering: {},
+        };
+
+        this.searchParams = {
+            context: {},
+            domain: [],
+            groupBy: [],
+
+            domains: null, // not the same as searchParams.domains from cp
+            origins: null, // generated from searchParams.domains from cp
+        };
+    }
+
+    //--------------------------------------------------------------------------
+    // Public
+    //--------------------------------------------------------------------------
+
+    /**
+     * Add a groupBy to rowGroupBys or colGroupBys according to provided type.
+     *
+     * @param {Object} params
+     * @param {Array[]} params.groupId
+     * @param {string} params.fieldName
+     * @param {'row'|'col'} params.type
+     * @param {boolean} [params.custom=false]
+     * @param {string} [params.interval]
+     */
+    async addGroupBy(params) {
+        const { groupId, fieldName, type, custom } = params;
+        let { interval } = params;
+        const meta = this._buildMeta();
+        if (custom && !meta.customGroupBys.has(fieldName)) {
+            const field = meta.fields[fieldName];
+            if (!interval && ["date", "datetime"].includes(field.type)) {
+                interval = DEFAULT_INTERVAL;
+            }
+            meta.customGroupBys.set(fieldName, {
+                ...field,
+                id: fieldName,
+            });
+        }
+
+        let groupBy = fieldName;
+        if (interval) {
+            groupBy = `${groupBy}:${interval}`;
+        }
+        if (type === "row") {
+            meta.expandedRowGroupBys.push(groupBy);
+        } else {
+            meta.expandedColGroupBys.push(groupBy);
+        }
+        const config = { meta, data: this.data, searchParams: this.searchParams };
+        await this._expandGroup(groupId, type, config);
+        this.meta = meta;
+        this.notify();
+    }
+    /**
+     * Close the group with id given by groupId. A type must be specified
+     * in case groupId is [[], []] (the id of the group 'Total') because this
+     * group is present in both colGroupTree and rowGroupTree.
+     *
+     * @param {Array[]} groupId
+     * @param {'row'|'col'} type
+     */
+    closeGroup(groupId, type) {
+        this._cancelPreviousOperation();
+        let groupBys;
+        let expandedGroupBys;
+        let keyPart;
+        let group;
+        let tree;
+        if (type === "row") {
+            groupBys = this.meta.rowGroupBys;
+            expandedGroupBys = this.meta.expandedRowGroupBys;
+            tree = this.data.rowGroupTree;
+            group = this._findGroup(this.data.rowGroupTree, groupId[0]);
+            keyPart = 0;
+        } else {
+            groupBys = this.meta.colGroupBys;
+            expandedGroupBys = this.meta.expandedColGroupBys;
+            tree = this.data.colGroupTree;
+            group = this._findGroup(this.data.colGroupTree, groupId[1]);
+            keyPart = 1;
+        }
+
+        const groupIdPart = groupId[keyPart];
+        const range = groupIdPart.map((_, index) => index);
+        function keep(key) {
+            const idPart = JSON.parse(key)[keyPart];
+            return (
+                range.some((index) => groupIdPart[index] !== idPart[index]) ||
+                idPart.length === groupIdPart.length
+            );
+        }
+        function omitKeys(object) {
+            const newObject = {};
+            for (const key in object) {
+                if (keep(key)) {
+                    newObject[key] = object[key];
+                }
+            }
+            return newObject;
+        }
+        this.data.measurements = omitKeys(this.data.measurements);
+        this.data.counts = omitKeys(this.data.counts);
+        this.data.groupDomains = omitKeys(this.data.groupDomains);
+
+        group.directSubTrees.clear();
+        delete group.sortedKeys;
+        var newGroupBysLength = this._getTreeHeight(tree) - 1;
+        if (newGroupBysLength <= groupBys.length) {
+            expandedGroupBys.splice(0);
+            groupBys.splice(newGroupBysLength);
+        } else {
+            expandedGroupBys.splice(newGroupBysLength - groupBys.length);
+        }
+        this.notify();
+    }
+    /**
+     * Reload the view with the current rowGroupBys and colGroupBys
+     * This is the easiest way to expand all the groups that are not expanded
+     */
+    async expandAll() {
+        const config = { meta: this.meta, data: this.data, searchParams: this.searchParams };
+        this.data = await this._loadData(config);
+        this.notify();
+    }
+    /**
+     * Expand a group by using groupBy to split it and trigger a re-rendering.
+     *
+     * @param {Object} group
+     * @param {'row'|'col'} type
+     */
+    async expandGroup(groupId, type) {
+        const config = { meta: this.meta, data: this.data, searchParams: this.searchParams };
+        await this._expandGroup(groupId, type, config);
+        this.notify();
+    }
+    /**
+     * Export model data in a form suitable for an easy encoding of the pivot
+     * table in excell.
+     *
+     * @returns {Object}
+     */
+    exportData() {
+        const measureCount = this.meta.activeMeasures.length;
+        const originCount = this.searchParams.origins.length;
+
+        const table = this.getTable();
+
+        // process headers
+        const headers = table.headers;
+        let colGroupHeaderRows;
+        let measureRow = [];
+        let originRow = [];
+
+        function processHeader(header) {
+            const inTotalColumn = header.groupId[1].length === 0;
+            return {
+                title: header.title,
+                width: header.width,
+                height: header.height,
+                is_bold: !!header.measure && inTotalColumn,
+            };
+        }
+
+        if (originCount > 1) {
+            colGroupHeaderRows = headers.slice(0, headers.length - 2);
+            measureRow = headers[headers.length - 2].map(processHeader);
+            originRow = headers[headers.length - 1].map(processHeader);
+        } else {
+            colGroupHeaderRows = headers.slice(0, headers.length - 1);
+            measureRow = headers[headers.length - 1].map(processHeader);
+        }
+
+        // remove the empty headers on left side
+        colGroupHeaderRows[0].splice(0, 1);
+
+        colGroupHeaderRows = colGroupHeaderRows.map((headerRow) => {
+            return headerRow.map(processHeader);
+        });
+
+        // process rows
+        const tableRows = table.rows.map((row) => {
+            return {
+                title: row.title,
+                indent: row.indent,
+                values: row.subGroupMeasurements.map((measurement) => {
+                    let value = measurement.value;
+                    if (value === undefined) {
+                        value = "";
+                    } else if (measurement.originIndexes.length > 1) {
+                        // in that case the value is a variation and a
+                        // number between 0 and 1
+                        value = value * 100;
+                    }
+                    return {
+                        is_bold: measurement.isBold,
+                        value: value,
+                    };
+                }),
+            };
+        });
+
+        return {
+            model: this.meta.resModel,
+            title: this.meta.title,
+            col_group_headers: colGroupHeaderRows,
+            measure_headers: measureRow,
+            origin_headers: originRow,
+            rows: tableRows,
+            measure_count: measureCount,
+            origin_count: originCount,
+        };
+    }
+    /**
+     * Swap the pivot columns and the rows. It is a synchronous operation.
+     */
+    flip() {
+        this._cancelPreviousOperation();
+
+        // swap the data: the main column and the main row
+        let temp = this.data.rowGroupTree;
+        this.data.rowGroupTree = this.data.colGroupTree;
+        this.data.colGroupTree = temp;
+
+        // we need to update the record metadata: (expanded) row and col groupBys
+        temp = this.meta.rowGroupBys;
+        this.meta.rowGroupBys = this.meta.colGroupBys;
+        this.meta.colGroupBys = temp;
+        temp = this.meta.expandedColGroupBys;
+        this.meta.expandedColGroupBys = this.meta.expandedRowGroupBys;
+        this.meta.expandedRowGroupBys = temp;
+
+        function twistKey(key) {
+            return JSON.stringify(JSON.parse(key).reverse());
+        }
+
+        function twist(object) {
+            const newObject = {};
+            Object.keys(object).forEach((key) => {
+                const value = object[key];
+                newObject[twistKey(key)] = value;
+            });
+            return newObject;
+        }
+
+        this.data.measurements = twist(this.data.measurements);
+        this.data.counts = twist(this.data.counts);
+        this.data.groupDomains = twist(this.data.groupDomains);
+
+        this.notify();
+    }
+    /**
+     * Returns a domain representation of a group
+     *
+     * @param {Object} group
+     * @param {Array} group.colValues
+     * @param {Array} group.rowValues
+     * @param {number} group.originIndex
+     * @returns {Array[]}
+     */
+    getGroupDomain(group) {
+        const config = { meta: this.meta, data: this.data, searchParams: this.searchParams };
+        return this._getGroupDomain(group, config);
+    }
+    /**
+     * Returns a description of the pivot table.
+     *
+     * @returns {Object}
+     */
+    getTable() {
+        const headers = this._getTableHeaders();
+        return {
+            headers: headers,
+            rows: this._getTableRows(this.data.rowGroupTree, headers[headers.length - 1]),
+        };
+    }
+    /**
+     * Returns the total number of columns of the pivot table.
+     *
+     * @returns {integer}
+     */
+    getTableWidth() {
+        var leafCounts = this._getLeafCounts(this.data.colGroupTree);
+        return leafCounts[JSON.stringify(this.data.colGroupTree.root.values)] + 2;
+    }
+    /**
+     * @returns {boolean} true iff there's no data in the table
+     */
+    hasData() {
+        const config = { meta: this.meta, data: this.data, searchParams: this.searchParams };
+        return this._hasData(config);
+    }
+    /**
+     * @override
+     *
+     * @param {Object} searchParams
+     * @param {Object} params.context
+     * @param {Array[]} params.domain
+     * @param {string[]} params.groupBy
+     * @param {string[]} params.measures
+     * @param {Object} [params.domains]
+     */
+    async load(searchParams) {
+        this.orm2Use = this.realORM;
+        searchParams = JSON.parse(JSON.stringify(searchParams)); //This to prevent errors in the Dashboard
+
+        const activeMeasures =
+            processMeasure(searchParams.context.pivot_measures) || this.meta.activeMeasures;
+        const meta = this._buildMeta({ activeMeasures });
+        if (!this.reload) {
+            meta.rowGroupBys =
+                searchParams.context.pivot_row_groupby ||
+                (searchParams.groupBy.length ? searchParams.groupBy : meta.rowGroupBys);
+            this.reload = true;
+        } else {
+            meta.rowGroupBys = searchParams.groupBy.length
+                ? searchParams.groupBy
+                : searchParams.context.pivot_row_groupby || meta.rowGroupBys;
+        }
+        meta.colGroupBys = searchParams.context.pivot_column_groupby || this.meta.colGroupBys;
+
+        const { domains, origins } = this._computeDerivedParams(searchParams);
+        searchParams.domains = domains;
+        searchParams.origins = origins;
+
+        if (JSON.stringify(meta.rowGroupBys) !== JSON.stringify(this.meta.rowGroupBys)) {
+            meta.expandedRowGroupBys = [];
+        }
+        if (JSON.stringify(meta.colGroupBys) !== JSON.stringify(this.meta.colGroupBys)) {
+            meta.expandedColGroupBys = [];
+        }
+
+        meta.measures = computeReportMeasures(
+            meta.fields,
+            meta.fieldAttrs,
+            meta.activeMeasures,
+            meta.additionalMeasures
+        );
+        const config = { meta, data: this.data, searchParams };
+        const data = await this._loadData(config);
+        const oldConfig = { meta: this.meta, data: this.data, searchParams: this.searchParams };
+        if (this._hasData(oldConfig)) {
+            if (symmetricalDifference(meta.rowGroupBys, this.meta.rowGroupBys).length === 0) {
+                this._pruneTree(data.rowGroupTree, this.data.rowGroupTree);
+            }
+            if (symmetricalDifference(meta.colGroupBys, this.meta.colGroupBys).length === 0) {
+                this._pruneTree(data.colGroupTree, this.data.colGroupTree);
+            }
+        }
+        this.data = data;
+        this.meta = meta;
+        this.searchParams = searchParams;
+    }
+    /**
+     * Sort the rows, depending on the values of a given column.  This is an
+     * in-memory sort.
+     *
+     * @param {Object} sortedColumn
+     * @param {number[]} sortedColumn.groupId
+     */
+    sortRows(sortedColumn) {
+        this._cancelPreviousOperation();
+
+        const config = { meta: this.meta, data: this.data, searchParams: this.searchParams };
+        this._sortRows(sortedColumn, config);
+
+        this.notify();
+    }
+    /**
+     * Toggle the active state for a given measure, then reload the data
+     * if this turns out to be necessary.
+     *
+     * @param {string} fieldName
+     * @returns {Promise}
+     */
+    async toggleMeasure(fieldName) {
+        const meta = this._buildMeta();
+        const index = meta.activeMeasures.indexOf(fieldName);
+        if (index !== -1) {
+            this._cancelPreviousOperation();
+            // in this case, we already have all data in memory, no need to
+            // actually reload a lesser amount of information
+            meta.activeMeasures.splice(index, 1);
+        } else {
+            meta.activeMeasures.push(fieldName);
+            const config = { meta, data: this.data, searchParams: this.searchParams };
+            this.data = await this._loadData(config);
+        }
+        this.meta = meta;
+        this.notify();
+    }
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * Add labels/values in the provided groupTree. A new leaf is created in
+     * the groupTree with a root object corresponding to the group with given
+     * labels/values.
+     *
+     * @private
+     * @param {Object} groupTree, either this.data.rowGroupTree or this.data.colGroupTree
+     * @param {string[]} labels
+     * @param {Array} values
+     */
+    _addGroup(groupTree, labels, values) {
+        let tree = groupTree;
+        // we assume here that the group with value value.slice(value.length - 2) has already been added.
+        values.slice(0, values.length - 1).forEach(function (value) {
+            tree = tree.directSubTrees.get(value);
+        });
+        tree.directSubTrees.set(values[values.length - 1], {
+            root: {
+                labels: labels,
+                values: values,
+            },
+            directSubTrees: new Map(),
+        });
+    }
+    /**
+     * Return a copy of this.meta, extended with optional params. This is useful
+     * for async methods that need to modify this.meta, but it can't be done in
+     * place directly for the model to be concurrency proof (so they work on a
+     * copy and commit it at the end).
+     *
+     * @private
+     * @param {Object} params
+     * @returns {Object}
+     */
+    _buildMeta(params) {
+        const meta = Object.assign({}, this.meta, params);
+        meta.activeMeasures = [...meta.activeMeasures];
+        meta.colGroupBys = [...meta.colGroupBys];
+        meta.rowGroupBys = [...meta.rowGroupBys];
+        meta.expandedColGroupBys = [...meta.expandedColGroupBys];
+        meta.expandedRowGroupBys = [...meta.expandedRowGroupBys];
+        meta.customGroupBys = new Map([...meta.customGroupBys]);
+        // shallow copy sortedColumn because we never modify groupId in place
+        meta.sortedColumn = meta.sortedColumn ? { ...meta.sortedColumn } : null;
+        Object.defineProperty(meta, "fullColGroupBys", {
+            get() {
+                return meta.colGroupBys.concat(meta.expandedColGroupBys);
+            },
+        });
+        Object.defineProperty(meta, "fullRowGroupBys", {
+            get() {
+                return meta.rowGroupBys.concat(meta.expandedRowGroupBys);
+            },
+        });
+        return meta;
+    }
+    /**
+     * Used in synchronous operations that need to prevent a possible previous
+     * ongoing asynchronous operation that could commit new information leading
+     * to a non valid state model.
+     */
+    _cancelPreviousOperation() {
+        this.keepLast.add(Promise.resolve());
+    }
+    /**
+     * Expand a group by using groupBy to split it.
+     *
+     * @private
+     * @param {Object} group
+     * @param {'row'|'col'} type
+     * @param {Config} config
+     */
+    async _expandGroup(groupId, type, config) {
+        const { meta } = config;
+        const group = {
+            rowValues: groupId[0],
+            colValues: groupId[1],
+            type: type,
+        };
+        const groupValues = type === "row" ? groupId[0] : groupId[1];
+        const groupBys = type === "row" ? meta.fullRowGroupBys : meta.fullColGroupBys;
+        if (groupValues.length >= groupBys.length) {
+            throw new Error("Cannot expand group");
+        }
+        const groupBy = groupBys[groupValues.length];
+        let leftDivisors;
+        let rightDivisors;
+        if (group.type === "row") {
+            leftDivisors = [[groupBy]];
+            rightDivisors = sections(meta.fullColGroupBys);
+        } else {
+            leftDivisors = sections(meta.fullRowGroupBys);
+            rightDivisors = [[groupBy]];
+        }
+        const divisors = cartesian(leftDivisors, rightDivisors);
+        delete group.type;
+        await this._subdivideGroup(group, divisors, config);
+    }
+    /**
+     * Find a group with given values in the provided groupTree, either
+     * this.rowGrouptree or this.data.colGroupTree.
+     *
+     * @private
+     * @param {Object} groupTree
+     * @param {Array} values
+     * @returns {Object}
+     */
+    _findGroup(groupTree, values) {
+        let tree = groupTree;
+        values.slice(0, values.length).forEach((value) => {
+            tree = tree.directSubTrees.get(value);
+        });
+        return tree;
+    }
+    /**
+     * In case originIndex is an array of length 1, thus a single origin
+     * index, returns the given measure for a group determined by the id
+     * groupId and the origin index.
+     * If originIndexes is an array of length 2, we compute the variation
+     * ot the measure values for the groups determined by groupId and the
+     * different origin indexes.
+     *
+     * @private
+     * @param {Array[]} groupId
+     * @param {string} measure
+     * @param {number[]} originIndexes
+     * @param {Config} config
+     * @returns {number}
+     */
+    _getCellValue(groupId, measure, originIndexes, config) {
+        var key = JSON.stringify(groupId);
+        if (!config.data.measurements[key]) {
+            return;
+        }
+        var values = originIndexes.map((originIndex) => {
+            return config.data.measurements[key][originIndex][measure];
+        });
+        if (originIndexes.length > 1) {
+            return computeVariation(values[1], values[0]);
+        } else {
+            return values[0];
+        }
+    }
+    /**
+     * Returns a domain representation of a group
+     *
+     * @private
+     * @param {Object} group
+     * @param {Array} group.colValues
+     * @param {Array} group.rowValues
+     * @param {number} group.originIndex
+     * @param {Config} config
+     * @returns {Array[]}
+     */
+    _getGroupDomain(group, config) {
+        const { data } = config;
+        var key = JSON.stringify([group.rowValues, group.colValues]);
+        return data.groupDomains[key][group.originIndex];
+    }
+    /**
+     * Returns the group sanitized labels.
+     *
+     * @private
+     * @param {Object} group
+     * @param {string[]} groupBys
+     * @param {Config} config
+     * @returns {string[]}
+     */
+    _getGroupLabels(group, groupBys, config) {
+        return groupBys.map((groupBy) => {
+            return this._sanitizeLabel(group[groupBy], groupBy, config);
+        });
+    }
+    /**
+     * Returns a promise that returns the annotated read_group results
+     * corresponding to a partition of the given group obtained using the given
+     * rowGroupBy and colGroupBy.
+     *
+     * @private
+     * @param {Object} group
+     * @param {string[]} rowGroupBy
+     * @param {string[]} colGroupBy
+     * @param {Config} config
+     */
+    async _getGroupSubdivision(group, rowGroupBy, colGroupBy, config) {
+        const groupDomain = this._getGroupDomain(group, config);
+        const measureSpecs = this._getMeasureSpecs(config);
+        const groupBy = rowGroupBy.concat(colGroupBy);
+        const options = { lazy: false };
+        const subGroups = await this.orm2Use.readGroup(
+            config.meta.resModel,
+            groupDomain,
+            measureSpecs,
+            groupBy,
+            options,
+            config.searchParams.context
+        );
+        return {
+            group: group,
+            subGroups: subGroups,
+            rowGroupBy: rowGroupBy,
+            colGroupBy: colGroupBy,
+        };
+    }
+    /**
+     * Returns the group sanitized values.
+     *
+     * @private
+     * @param {Object} group
+     * @param {string[]} groupBys
+     * @returns {Array}
+     */
+    _getGroupValues(group, groupBys) {
+        return groupBys.map((groupBy) => {
+            return this._sanitizeValue(group[groupBy]);
+        });
+    }
+    /**
+     * Returns the leaf counts of each group inside the given tree.
+     *
+     * @private
+     * @param {Object} tree
+     * @returns {Object} keys are group ids
+     */
+    _getLeafCounts(tree) {
+        const leafCounts = {};
+        let leafCount;
+        if (!tree.directSubTrees.size) {
+            leafCount = 1;
+        } else {
+            leafCount = [...tree.directSubTrees.values()].reduce((acc, subTree) => {
+                const subLeafCounts = this._getLeafCounts(subTree);
+                Object.assign(leafCounts, subLeafCounts);
+                return acc + leafCounts[JSON.stringify(subTree.root.values)];
+            }, 0);
+        }
+
+        leafCounts[JSON.stringify(tree.root.values)] = leafCount;
+        return leafCounts;
+    }
+    /**
+     * Returns the group sanitized measure values for the measures in
+     * this.meta.activeMeasures (that migth contain '__count', not really a fieldName).
+     *
+     * @private
+     * @param {Object} group
+     * @param {Config} config
+     * @returns {Array}
+     */
+    _getMeasurements(group, config) {
+        const { meta, searchParams } = config;
+        return meta.activeMeasures.reduce((measurements, measureName) => {
+            var measurement = group[measureName];
+            if (measurement instanceof Array) {
+                // case field is many2one and used as measure and groupBy simultaneously
+                measurement = 1;
+            }
+            if (meta.measures[measureName].type === "boolean" && measurement instanceof Boolean) {
+                measurement = measurement ? 1 : 0;
+            }
+            if (searchParams.origins.length > 1 && !measurement) {
+                measurement = 0;
+            }
+            measurements[measureName] = measurement;
+            return measurements;
+        }, {});
+    }
+    /**
+     * Returns a description of the measures row of the pivot table
+     *
+     * @private
+     * @param {Object[]} columns for which measure cells must be generated
+     * @returns {Object[]}
+     */
+    _getMeasuresRow(columns) {
+        const sortedColumn = this.meta.sortedColumn || {};
+        const measureRow = [];
+
+        columns.forEach((column) => {
+            this.meta.activeMeasures.forEach((measureName) => {
+                const measureCell = {
+                    groupId: column.groupId,
+                    height: 1,
+                    measure: measureName,
+                    title: this.meta.measures[measureName].string,
+                    width: 2 * this.searchParams.origins.length - 1,
+                };
+                if (
+                    sortedColumn.measure === measureName &&
+                    JSON.stringify(sortedColumn.groupId) === JSON.stringify(column.groupId) // FIXME
+                ) {
+                    measureCell.order = sortedColumn.order;
+                }
+                measureRow.push(measureCell);
+            });
+        });
+
+        return measureRow;
+    }
+    /**
+     * Returns the list of measure specs associated with meta.activeMeasures, i.e.
+     * a measure 'fieldName' becomes 'fieldName:groupOperator' where
+     * groupOperator is the value specified on the field 'fieldName' for
+     * the key group_operator.
+     *
+     * @private
+     * @param {Config} config
+     * @return {string[]}
+     */
+    _getMeasureSpecs(config) {
+        const { meta } = config;
+        return meta.activeMeasures.reduce((acc, measure) => {
+            if (measure === "__count") {
+                acc.push(measure);
+                return acc;
+            }
+            const field = this.meta.fields[measure];
+            if (field.type === "many2one") {
+                field.group_operator = "count_distinct";
+            }
+            if (field.group_operator === undefined) {
+                throw new Error(
+                    "No aggregate function has been provided for the measure '" + measure + "'"
+                );
+            }
+            acc.push(measure + ":" + field.group_operator);
+            return acc;
+        }, []);
+    }
+    /**
+     * Make sure that the labels of different many2one values are distinguished
+     * by numbering them if necessary.
+     *
+     * @private
+     * @param {Array} label
+     * @param {string} fieldName
+     * @param {Config} config
+     * @returns {string}
+     */
+    _getNumberedLabel(label, fieldName, config) {
+        const { data } = config;
+        const id = label[0];
+        const name = label[1];
+        data.numbering[fieldName] = data.numbering[fieldName] || {};
+        data.numbering[fieldName][name] = data.numbering[fieldName][name] || {};
+        const numbers = data.numbering[fieldName][name];
+        numbers[id] = numbers[id] || Object.keys(numbers).length + 1;
+        return name + (numbers[id] > 1 ? "  (" + numbers[id] + ")" : "");
+    }
+    /**
+     * Returns a description of the origins row of the pivot table
+     *
+     * @private
+     * @param {Object[]} columns for which origin cells must be generated
+     * @returns {Object[]}
+     */
+    _getOriginsRow(columns) {
+        const sortedColumn = this.meta.sortedColumn || {};
+        const originRow = [];
+
+        columns.forEach((column) => {
+            const groupId = column.groupId;
+            const measure = column.measure;
+            const isSorted =
+                sortedColumn.measure === measure &&
+                JSON.stringify(sortedColumn.groupId) === JSON.stringify(groupId); // FIXME
+            const isSortedByOrigin = isSorted && !sortedColumn.originIndexes[1];
+            const isSortedByVariation = isSorted && sortedColumn.originIndexes[1];
+
+            this.searchParams.origins.forEach((origin, originIndex) => {
+                const originCell = {
+                    groupId: groupId,
+                    height: 1,
+                    measure: measure,
+                    originIndexes: [originIndex],
+                    title: origin,
+                    width: 1,
+                };
+                if (isSortedByOrigin && sortedColumn.originIndexes[0] === originIndex) {
+                    originCell.order = sortedColumn.order;
+                }
+                originRow.push(originCell);
+
+                if (originIndex > 0) {
+                    const variationCell = {
+                        groupId: groupId,
+                        height: 1,
+                        measure: measure,
+                        originIndexes: [originIndex - 1, originIndex],
+                        title: this.env._t("Variation"),
+                        width: 1,
+                    };
+                    if (isSortedByVariation && sortedColumn.originIndexes[1] === originIndex) {
+                        variationCell.order = sortedColumn.order;
+                    }
+                    originRow.push(variationCell);
+                }
+            });
+        });
+
+        return originRow;
+    }
+    /**
+     * Returns the list of header rows of the pivot table: the col group rows
+     * (depending on the col groupbys), the measures row and optionnaly the
+     * origins row (if there are more than one origins).
+     *
+     * @private
+     * @returns {Object[]}
+     */
+    _getTableHeaders() {
+        const _t = this.env._t;
+        const colGroupBys = this.meta.fullColGroupBys;
+        const height = colGroupBys.length + 1;
+        const measureCount = this.meta.activeMeasures.length;
+        const originCount = this.searchParams.origins.length;
+        const leafCounts = this._getLeafCounts(this.data.colGroupTree);
+        let headers = [];
+        const measureColumns = []; // used to generate the measure cells
+
+        // 1) generate col group rows (total row + one row for each col groupby)
+        const colGroupRows = new Array(height).fill(0).map(() => []);
+        // blank top left cell
+        colGroupRows[0].push({
+            height: height + 1 + (originCount > 1 ? 1 : 0), // + measures rows [+ origins row]
+            title: "",
+            width: 1,
+        });
+
+        // col groupby cells with group values
+        /**
+         * Recursive function that generates the header cells corresponding to
+         * the groups of a given tree.
+         *
+         * @param {Object} tree
+         */
+        function generateTreeHeaders(tree, fields) {
+            const group = tree.root;
+            const rowIndex = group.values.length;
+            const row = colGroupRows[rowIndex];
+            const groupId = [[], group.values];
+            const isLeaf = !tree.directSubTrees.size;
+            const leafCount = leafCounts[JSON.stringify(tree.root.values)];
+            const cell = {
+                groupId: groupId,
+                height: isLeaf ? colGroupBys.length + 1 - rowIndex : 1,
+                isLeaf: isLeaf,
+                isFolded: isLeaf && colGroupBys.length > group.values.length,
+                label:
+                    rowIndex === 0
+                        ? undefined
+                        : fields[colGroupBys[rowIndex - 1].split(":")[0]].string,
+                title: group.labels[group.labels.length - 1] || _t("Total"),
+                width: leafCount * measureCount * (2 * originCount - 1),
+            };
+            row.push(cell);
+            if (isLeaf) {
+                measureColumns.push(cell);
+            }
+
+            [...tree.directSubTrees.values()].forEach((subTree) => {
+                generateTreeHeaders(subTree, fields);
+            });
+        }
+
+        generateTreeHeaders(this.data.colGroupTree, this.meta.fields);
+        // blank top right cell for 'Total' group (if there is more that one leaf)
+        if (leafCounts[JSON.stringify(this.data.colGroupTree.root.values)] > 1) {
+            var groupId = [[], []];
+            var totalTopRightCell = {
+                groupId: groupId,
+                height: height,
+                title: "",
+                width: measureCount * (2 * originCount - 1),
+            };
+            colGroupRows[0].push(totalTopRightCell);
+            measureColumns.push(totalTopRightCell);
+        }
+        headers = headers.concat(colGroupRows);
+
+        // 2) generate measures row
+        var measuresRow = this._getMeasuresRow(measureColumns);
+        headers.push(measuresRow);
+
+        // 3) generate origins row if more than one origin
+        if (originCount > 1) {
+            headers.push(this._getOriginsRow(measuresRow));
+        }
+
+        return headers;
+    }
+    /**
+     * Returns the list of body rows of the pivot table for a given tree.
+     *
+     * @private
+     * @param {Object} tree
+     * @param {Object[]} columns
+     * @returns {Object[]}
+     */
+    _getTableRows(tree, columns) {
+        let rows = [];
+        const group = tree.root;
+        const rowGroupId = [group.values, []];
+        const title = group.labels[group.labels.length - 1] || this.env._t("Total");
+        const indent = group.labels.length;
+        const isLeaf = !tree.directSubTrees.size;
+        const rowGroupBys = this.meta.fullRowGroupBys;
+
+        const subGroupMeasurements = columns.map((column) => {
+            const colGroupId = column.groupId;
+            const groupIntersectionId = [rowGroupId[0], colGroupId[1]];
+            const measure = column.measure;
+            const originIndexes = column.originIndexes || [0];
+
+            const value = this._getCellValue(groupIntersectionId, measure, originIndexes, {
+                data: this.data,
+            });
+
+            const measurement = {
+                groupId: groupIntersectionId,
+                originIndexes: originIndexes,
+                measure: measure,
+                value: value,
+                isBold: !groupIntersectionId[0].length || !groupIntersectionId[1].length,
+            };
+            return measurement;
+        });
+
+        rows.push({
+            title: title,
+            label:
+                indent === 0
+                    ? undefined
+                    : this.meta.fields[rowGroupBys[indent - 1].split(":")[0]].string,
+            groupId: rowGroupId,
+            indent: indent,
+            isLeaf: isLeaf,
+            isFolded: isLeaf && rowGroupBys.length > group.values.length,
+            subGroupMeasurements: subGroupMeasurements,
+        });
+
+        const subTreeKeys = tree.sortedKeys || [...tree.directSubTrees.keys()];
+        subTreeKeys.forEach((subTreeKey) => {
+            const subTree = tree.directSubTrees.get(subTreeKey);
+            rows = rows.concat(this._getTableRows(subTree, columns));
+        });
+
+        return rows;
+    }
+    /**
+     * returns the height of a given groupTree
+     *
+     * @private
+     * @param {Object} tree, a groupTree
+     * @returns {number}
+     */
+    _getTreeHeight(tree) {
+        const subTreeHeights = [...tree.directSubTrees.values()].map(
+            this._getTreeHeight.bind(this)
+        );
+        return Math.max(0, Math.max.apply(null, subTreeHeights)) + 1;
+    }
+    /**
+     * @private
+     * @param {Config} config
+     * @returns {boolean} true iff there's no data in the table
+     */
+    _hasData(config) {
+        const { data } = config;
+        return (data.counts[JSON.stringify([[], []])] || []).some((count) => {
+            return count > 0;
+        });
+    }
+    /**
+     * Initialize/Reinitialize data.rowGroupTree, colGroupTree, measurements,
+     * counts and subdivide the group 'Total' as many times it is necessary.
+     * A first subdivision with no groupBy (divisors.slice(0, 1)) is made in
+     * order to see if there is data in the intersection of the group 'Total'
+     * and the various origins. In case there is none, non supplementary rpc
+     * will be done (see the code of subdivideGroup).
+     *
+     * @private
+     * @param {Config} config
+     */
+    async _loadData(config) {
+        config.data = {}; // data will be completely recomputed
+        const { data, meta, searchParams } = config;
+        data.rowGroupTree = { root: { labels: [], values: [] }, directSubTrees: new Map() };
+        data.colGroupTree = { root: { labels: [], values: [] }, directSubTrees: new Map() };
+        data.measurements = {};
+        data.counts = {};
+        data.groupDomains = {};
+        data.numbering = {};
+        const key = JSON.stringify([[], []]);
+        data.groupDomains[key] = searchParams.domains.slice(0);
+
+        const group = { rowValues: [], colValues: [] };
+        const leftDivisors = sections(meta.fullRowGroupBys);
+        const rightDivisors = sections(meta.fullColGroupBys);
+        const divisors = cartesian(leftDivisors, rightDivisors);
+
+        await this._subdivideGroup(group, divisors.slice(0, 1), config);
+        await this._subdivideGroup(group, divisors.slice(1), config);
+
+        if (meta.useSampleModel && !this._hasData(config)) {
+            const fakeORM = buildSampleORM(meta.resModel, meta.fields, this.user);
+            this.orm2Use = fakeORM;
+            return this._loadData(config);
+        } else if (this.orm2Use.rpc.name !== "fakeRPC") {
+            meta.useSampleModel = false;
+        }
+        return config.data;
+    }
+    /**
+     * Extract the information in the read_group results (groupSubdivisions)
+     * and develop this.data.rowGroupTree, colGroupTree, measurements, counts, and
+     * groupDomains.
+     * If a column needs to be sorted, the rowGroupTree corresponding to the
+     * group is sorted.
+     *
+     * @private
+     * @param {Object} group
+     * @param {Object[]} groupSubdivisions
+     * @param {Config} config
+     */
+    _prepareData(group, groupSubdivisions, config) {
+        const { data, meta, searchParams } = config;
+        const groupRowValues = group.rowValues;
+        let groupRowLabels = [];
+        let rowSubTree = data.rowGroupTree;
+        let root;
+        if (groupRowValues.length) {
+            // we should have labels information on hand! regretful!
+            rowSubTree = this._findGroup(data.rowGroupTree, groupRowValues);
+            root = rowSubTree.root;
+            groupRowLabels = root.labels;
+        }
+
+        const groupColValues = group.colValues;
+        let groupColLabels = [];
+        if (groupColValues.length) {
+            root = this._findGroup(data.colGroupTree, groupColValues).root;
+            groupColLabels = root.labels;
+        }
+
+        groupSubdivisions.forEach((groupSubdivision) => {
+            groupSubdivision.subGroups.forEach((subGroup) => {
+                const rowValues = groupRowValues.concat(
+                    this._getGroupValues(subGroup, groupSubdivision.rowGroupBy)
+                );
+                const rowLabels = groupRowLabels.concat(
+                    this._getGroupLabels(subGroup, groupSubdivision.rowGroupBy, config)
+                );
+
+                const colValues = groupColValues.concat(
+                    this._getGroupValues(subGroup, groupSubdivision.colGroupBy)
+                );
+                const colLabels = groupColLabels.concat(
+                    this._getGroupLabels(subGroup, groupSubdivision.colGroupBy, config)
+                );
+
+                if (!colValues.length && rowValues.length) {
+                    this._addGroup(data.rowGroupTree, rowLabels, rowValues);
+                }
+                if (colValues.length && !rowValues.length) {
+                    this._addGroup(data.colGroupTree, colLabels, colValues);
+                }
+
+                const key = JSON.stringify([rowValues, colValues]);
+                const originIndex = groupSubdivision.group.originIndex;
+
+                if (!(key in data.measurements)) {
+                    data.measurements[key] = searchParams.origins.map(() => {
+                        return this._getMeasurements({}, config);
+                    });
+                }
+                data.measurements[key][originIndex] = this._getMeasurements(subGroup, config);
+
+                if (!(key in data.counts)) {
+                    data.counts[key] = searchParams.origins.map(function () {
+                        return 0;
+                    });
+                }
+                data.counts[key][originIndex] = subGroup.__count;
+
+                if (!(key in data.groupDomains)) {
+                    data.groupDomains[key] = searchParams.origins.map(function () {
+                        return Domain.FALSE.toList();
+                    });
+                }
+                // if __domain is not defined this means that we are in the
+                // case where
+                // groupSubdivision.rowGroupBy = groupSubdivision.rowGroupBy = []
+                if (subGroup.__domain) {
+                    data.groupDomains[key][originIndex] = subGroup.__domain;
+                }
+            });
+        });
+
+        if (meta.sortedColumn) {
+            this._sortRows(meta.sortedColumn, config);
+        }
+    }
+    /**
+     * Determine this.searchParams.domains and this.searchParams.origins from
+     * this.searchParams.domains.
+     *
+     * @private
+     */
+    _computeDerivedParams(params) {
+        const domains = params.domains.reverse();
+        return {
+            domains: domains.map((d) => d.arrayRepr),
+            origins: domains.map((d) => d.description || ""),
+        };
+    }
+    /**
+     * Make any group in tree a leaf if it was a leaf in oldTree.
+     *
+     * @private
+     * @param {Object} tree
+     * @param {Object} oldTree
+     */
+    _pruneTree(tree, oldTree) {
+        if (!oldTree.directSubTrees.size) {
+            tree.directSubTrees.clear();
+            delete tree.sortedKeys;
+            return;
+        }
+        [...tree.directSubTrees.keys()].forEach((subTreeKey) => {
+            const subTree = tree.directSubTrees.get(subTreeKey);
+            if (!oldTree.directSubTrees.has(subTreeKey)) {
+                subTree.directSubTrees.clear();
+                delete subTreeKey.sortedKeys;
+            } else {
+                const oldSubTree = oldTree.directSubTrees.get(subTreeKey);
+                this._pruneTree(subTree, oldSubTree);
+            }
+        });
+    }
+    /**
+     * Extract from a groupBy value a label.
+     *
+     * @private
+     * @param {any} value
+     * @param {string} groupBy
+     * @param {Config} config
+     * @returns {string}
+     */
+    _sanitizeLabel(value, groupBy, config) {
+        const { meta } = config;
+        const fieldName = groupBy.split(":")[0];
+        if (value === false) {
+            return this.env._t("Undefined");
+        }
+        if (value instanceof Array) {
+            return this._getNumberedLabel(value, fieldName, config);
+        }
+        if (fieldName && meta.fields[fieldName] && meta.fields[fieldName].type === "selection") {
+            const selected = meta.fields[fieldName].selection.find((o) => o[0] === value);
+            return selected ? selected[1] : value; // selected should be truthy normally ?!
+        }
+        return value;
+    }
+    /**
+     * Extract from a groupBy value the raw value of that groupBy (discarding
+     * a label if any)
+     *
+     * @private
+     * @param {any} value
+     * @returns {any}
+     */
+    _sanitizeValue(value) {
+        if (value instanceof Array) {
+            return value[0];
+        }
+        return value;
+    }
+    /**
+     * Get all partitions of a given group using the provided list of divisors
+     * and enrich the objects of this.data.rowGroupTree, colGroupTree,
+     * measurements, counts.
+     *
+     * @private
+     * @param {Object} group
+     * @param {Array[]} divisors
+     * @param {Config} config
+     */
+    async _subdivideGroup(group, divisors, config) {
+        const { data, searchParams } = config;
+        const key = JSON.stringify([group.rowValues, group.colValues]);
+
+        const proms = searchParams.origins.reduce((acc, origin, originIndex) => {
+            // if no information on group content is available, we fetch data.
+            // if group is known to be empty for the given origin,
+            // we don't need to fetch data for that origin.
+            if (!data.counts[key] || data.counts[key][originIndex] > 0) {
+                const subGroup = {
+                    rowValues: group.rowValues,
+                    colValues: group.colValues,
+                    originIndex: originIndex,
+                };
+                divisors.forEach((divisor) => {
+                    acc.push(this._getGroupSubdivision(subGroup, divisor[0], divisor[1], config));
+                });
+            }
+            return acc;
+        }, []);
+        const groupSubdivisions = await this.keepLast.add(Promise.all(proms));
+        if (groupSubdivisions.length) {
+            this._prepareData(group, groupSubdivisions, config);
+        }
+    }
+    /**
+     * Sort the rows, depending on the values of a given column.  This is an
+     * in-memory sort.
+     *
+     * @private
+     * @param {Object} sortedColumn
+     * @param {number[]} sortedColumn.groupId
+     * @param {Config} config
+     */
+    _sortRows(sortedColumn, config) {
+        const meta = config.meta || this.meta;
+        const data = config.data || this.data;
+        const colGroupValues = sortedColumn.groupId[1];
+        sortedColumn.originIndexes = sortedColumn.originIndexes || [0];
+        meta.sortedColumn = sortedColumn;
+
+        const sortFunction = (tree) => {
+            return (subTreeKey) => {
+                const subTree = tree.directSubTrees.get(subTreeKey);
+                const groupIntersectionId = [subTree.root.values, colGroupValues];
+                const value =
+                    this._getCellValue(
+                        groupIntersectionId,
+                        sortedColumn.measure,
+                        sortedColumn.originIndexes,
+                        { data }
+                    ) || 0;
+                return sortedColumn.order === "asc" ? value : -value;
+            };
+        };
+
+        this._sortTree(sortFunction, data.rowGroupTree);
+    }
+    /**
+     * Sort recursively the subTrees of tree using sortFunction.
+     * In the end each node of the tree has its direct children sorted
+     * according to the criterion reprensented by sortFunction.
+     *
+     * @private
+     * @param {Function} sortFunction
+     * @param {Object} tree
+     */
+    _sortTree(sortFunction, tree) {
+        tree.sortedKeys = sortBy([...tree.directSubTrees.keys()], sortFunction(tree));
+        [...tree.directSubTrees.values()].forEach((subTree) => {
+            this._sortTree(sortFunction, subTree);
+        });
+    }
+}
+PivotModel.services = ["orm", "user"];
diff --git a/addons/web/static/src/views/pivot/pivot_renderer.js b/addons/web/static/src/views/pivot/pivot_renderer.js
new file mode 100644
index 00000000000..393026bf07e
--- /dev/null
+++ b/addons/web/static/src/views/pivot/pivot_renderer.js
@@ -0,0 +1,140 @@
+/** @odoo-module **/
+
+import { PivotGroupByMenu } from "@web/views/pivot/pivot_group_by_menu";
+import { registry } from "@web/core/registry";
+import fieldUtils from "web.field_utils";
+
+const { Component } = owl;
+const formatterRegistry = registry.category("formatters");
+
+export class PivotRenderer extends Component {
+    setup() {
+        this.model = this.props.model;
+        this.table = this.model.getTable();
+    }
+    willUpdateProps() {
+        this.table = this.model.getTable();
+    }
+    /**
+     * Get the formatted value of the cell.
+     *
+     * @private
+     * @param {Object} cell
+     * @returns {string} Formatted value
+     */
+    getFormattedValue(cell) {
+        const field = this.model.meta.measures[cell.measure];
+        let formatType = this.model.meta.widgets[cell.measure];
+        if (!formatType) {
+            const fieldType = field.type;
+            formatType = fieldType === "many2one" ? "integer" : fieldType;
+        }
+        //If the formatter is not found on the registry, search on the legacy fieldUtils.format.
+        //This must be removed when all the formatters will be on the registry
+        const formatter = formatterRegistry.get(formatType, null) || fieldUtils.format[formatType];
+        if (!formatter) {
+            throw new Error(`${formatType} is not a defined formatter!`);
+        }
+        return formatter(cell.value, field);
+    }
+    /**
+     * Get the formatted variation of a cell.
+     *
+     * @private
+     * @param {Object} cell
+     * @returns {string} Formatted variation
+     */
+    getFormattedVariation(cell) {
+        if (isNaN(cell.value)) {
+            return "-";
+        }
+        const formatPercentage = formatterRegistry.get("percentage");
+        return formatPercentage(cell.value, this.model.meta.fields[cell.measure]);
+    }
+    /**
+     * Retrieve the padding of a left header.
+     *
+     * @param {Object} cell
+     * @returns {Number} Padding
+     */
+    getPadding(cell) {
+        return 5 + cell.indent * 30;
+    }
+
+    //----------------------------------------------------------------------
+    // Handlers
+    //----------------------------------------------------------------------
+
+    onCellClicked(cell) {
+        this.props.onCellClicked(cell);
+    }
+    /**
+     * Handle the adding of a custom groupby (inside the view, not the searchview).
+     *
+     * @param {"col"|"row"} type
+     * @param {CustomEvent} ev
+     */
+    onAddCustomGroupBy(type, ev) {
+        this.model.addGroupBy({ ...ev.detail, custom: true, type });
+    }
+
+    /**
+     * Handle the selection of a groupby dropdown item.
+     *
+     * @param {"col"|"row"} type
+     * @param {CustomEvent} ev
+     */
+    onDropdownItemSelected(type, ev) {
+        this.model.addGroupBy({ ...ev.detail.payload, type });
+    }
+    /**
+     * Handle a click on a header cell.
+     *
+     * @param {Object} cell
+     * @param {string} type col or row
+     */
+    onHeaderClick(cell, type) {
+        if (cell.isLeaf && cell.isFolded) {
+            this.model.expandGroup(cell.groupId, type);
+        } else if (!cell.isLeaf) {
+            this.model.closeGroup(cell.groupId, type);
+        }
+    }
+    /**
+     * Handle a click on a measure cell.
+     *
+     * @param {Object} cell
+     */
+    onMeasureClick(cell) {
+        this.model.sortRows({
+            groupId: cell.groupId,
+            measure: cell.measure,
+            order: (cell.order || "desc") === "asc" ? "desc" : "asc",
+            originIndexes: cell.originIndexes,
+        });
+    }
+    /**
+     * Hover the column in which the mouse is.
+     *
+     * @param {MouseEvent} ev
+     */
+    onMouseEnter(ev) {
+        var index = [...ev.currentTarget.parentNode.children].indexOf(ev.currentTarget);
+        if (ev.currentTarget.tagName === "TH") {
+            index += 1;
+        }
+        this.el
+            .querySelectorAll("td:nth-child(" + (index + 1) + ")")
+            .forEach((elt) => elt.classList.add("o_cell_hover"));
+    }
+    /**
+     * Remove the hover on the columns.
+     */
+    onMouseLeave() {
+        this.el
+            .querySelectorAll(".o_cell_hover")
+            .forEach((elt) => elt.classList.remove("o_cell_hover"));
+    }
+}
+PivotRenderer.template = "web.PivotRenderer";
+PivotRenderer.components = { PivotGroupByMenu };
diff --git a/addons/web/static/src/views/pivot/pivot_renderer.xml b/addons/web/static/src/views/pivot/pivot_renderer.xml
new file mode 100644
index 00000000000..194803a59d7
--- /dev/null
+++ b/addons/web/static/src/views/pivot/pivot_renderer.xml
@@ -0,0 +1,81 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.PivotRenderer" owl="1">
+        <div class="o_pivot">
+            <table class="table-hover table-sm table-bordered" t-att-class="{ o_enable_linking: !model.meta.disableLinking, o_sample_data_disabled: model.meta.useSampleModel }">
+                <thead>
+                    <tr t-foreach="table.headers" t-as="row" t-key="'header_' + row_index">
+                        <t t-foreach="row" t-as="cell" t-key="'header_row_' + cell_index">
+                            <t t-if="cell.measure" t-call="web.PivotMeasure"/>
+                            <t t-elif="cell.isLeaf !== undefined" t-call="web.PivotHeader">
+                                <t t-set="isXAxis" t-value="true"/>
+                            </t>
+                            <th t-else="" t-att-colspan="cell.width" t-att-rowspan="cell.height"/>
+                        </t>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr t-foreach="table.rows" t-as="row" t-key="'row_' + row_index">
+                        <t t-call="web.PivotHeader">
+                            <t t-set="isXAxis" t-value="false"/>
+                            <t t-set="cell" t-value="row"/>
+                        </t>
+                        <t t-foreach="row.subGroupMeasurements" t-as="cell" t-key="'row_cell_' + cell_index">
+                            <td class="o_pivot_cell_value text-right" t-att-class="{
+                                    o_empty: cell.value === undefined,
+                                    'font-weight-bold': cell.isBold,
+                                }" t-on-click="onCellClicked(cell)"
+                                   t-on-mouseover="onMouseEnter" t-on-mouseout="onMouseLeave">
+                                <t t-if="cell.value !== undefined">
+                                    <div t-if="cell.originIndexes.length > 1" class="o_variation" t-att-class="{
+                                             o_positive: cell.value &gt; 0,
+                                             o_negative: cell.value &lt; 0,
+                                             o_null: cell.value === 0,
+                                        }" t-esc="getFormattedVariation(cell)"/>
+                                    <div t-elif="model.meta.measures[cell.measure].type === 'boolean'" class="o_value">
+                                        <CheckBox disabled="true" value="cell.value" />
+                                    </div>
+                                    <div t-else="1" class="o_value" t-esc="getFormattedValue(cell)"/>
+                                </t>
+                            </td>
+                        </t>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </t>
+
+    <t t-name="web.PivotHeader" owl="1">
+        <th t-att-colspan="isXAxis ? cell.width : undefined" t-att-rowspan="isXAxis ? cell.height : undefined" t-att-class="{
+                o_pivot_header_cell_closed: cell.isLeaf,
+                o_pivot_header_cell_opened: !cell.isLeaf,
+            }" t-attf-style="{{ isXAxis ? undefined : 'padding-left: ' + getPadding(cell) + 'px;' }}" t-att-data-tooltip="cell.label" data-tooltip-position="right" t-on-click.prevent="onHeaderClick(cell, isXAxis ? 'col' : 'row')">
+            <t t-if="cell.isLeaf and !cell.isFolded">
+                <PivotGroupByMenu
+                    tag="'span'"
+                    toggler="'parent'"
+                    cell="cell"
+                    customGroupBys="model.meta.customGroupBys"
+                    showActiveItems="false"
+                    t-on-click.stop=""
+                    t-on-dropdown-item-selected="onDropdownItemSelected(isXAxis ? 'col' : 'row')"
+                    t-on-add-custom-group-by="onAddCustomGroupBy(isXAxis ? 'col' : 'row')"
+                />
+            </t>
+            <span t-esc="cell.title"/>
+        </th>
+    </t>
+
+    <t t-name="web.PivotMeasure" owl="1">
+        <th class="text-muted" t-att-colspan="cell.width" t-att-rowspan="cell.height" t-att-class="{
+                o_pivot_origin_row: cell.originIndexes,
+                o_pivot_measure_row: !cell.originIndexes,
+                o_pivot_sort_order_asc: cell.order === 'asc',
+                o_pivot_sort_order_desc: cell.order === 'desc',
+            }" t-on-click.prevent="onMeasureClick(cell)" t-on-mouseover="onMouseEnter" t-on-mouseout="onMouseLeave">
+            <t t-esc="cell.title"/>
+        </th>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/pivot/pivot_view.js b/addons/web/static/src/views/pivot/pivot_view.js
new file mode 100644
index 00000000000..bfe1c912124
--- /dev/null
+++ b/addons/web/static/src/views/pivot/pivot_view.js
@@ -0,0 +1,186 @@
+/** @odoo-module **/
+
+import { _lt } from "@web/core/l10n/translation";
+import { download } from "@web/core/network/download";
+import { registry } from "@web/core/registry";
+import { useService } from "@web/core/utils/hooks";
+import { ControlPanel } from "@web/search/control_panel/control_panel";
+import { SearchPanel } from "@web/search/search_panel/search_panel";
+import { useModel } from "@web/views/helpers/model";
+import { standardViewProps } from "@web/views/helpers/standard_view_props";
+import { useSetupView } from "@web/views/helpers/view_hook";
+import { PivotArchParser } from "@web/views/pivot/pivot_arch_parser";
+import { PivotModel } from "@web/views/pivot/pivot_model";
+import { PivotRenderer } from "@web/views/pivot/pivot_renderer";
+
+const viewRegistry = registry.category("views");
+
+const { Component } = owl;
+
+export class PivotView extends Component {
+    setup() {
+        this.actionService = useService("action");
+
+        let modelParams = {};
+        if (this.props.state) {
+            modelParams.data = this.props.state.data;
+            modelParams.meta = this.props.state.meta;
+        } else {
+            const { arch } = this.props;
+
+            // parse arch
+            const archInfo = new this.constructor.archParser().parse(arch);
+
+            if (!archInfo.activeMeasures.length || archInfo.displayQuantity) {
+                archInfo.activeMeasures.unshift("__count");
+            }
+
+            modelParams.meta = {
+                activeMeasures: archInfo.activeMeasures,
+                additionalMeasures: this.props.additionalMeasures,
+                colGroupBys: archInfo.colGroupBys,
+                defaultOrder: archInfo.defaultOrder,
+                disableLinking: Boolean(archInfo.disableLinking),
+                fields: this.props.fields,
+                fieldAttrs: archInfo.fieldAttrs,
+                resModel: this.props.resModel,
+                rowGroupBys: archInfo.rowGroupBys,
+                title: this.props.title || archInfo.title || this.env._t("Untitled"),
+                useSampleModel: Boolean(this.props.useSampleModel),
+                widgets: archInfo.widgets,
+            };
+        }
+
+        this.model = useModel(this.constructor.Model, modelParams);
+
+        useSetupView({
+            exportLocalState: () => {
+                const { data, meta } = this.model;
+                return { data, meta };
+            },
+            saveParams: () => this.saveParams(), // FIXME: rename this
+        });
+    }
+    /**
+     * @returns {Object}
+     */
+    saveParams() {
+        return {
+            context: {
+                pivot_measures: this.model.meta.activeMeasures,
+                pivot_column_groupby: this.model.meta.fullColGroupBys,
+                pivot_row_groupby: this.model.meta.fullRowGroupBys,
+            },
+        };
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * Exports the current pivot table data in a xls file. For this, we have to
+     * serialize the current state, then call the server /web/pivot/export_xlsx.
+     * Force a reload before exporting to ensure to export up-to-date data.
+     */
+    onDownloadButtonClicked() {
+        if (this.model.getTableWidth() > 16384) {
+            throw new Error(
+                this.env._t(
+                    "For Excel compatibility, data cannot be exported if there are more than 16384 columns.\n\nTip: try to flip axis, filter further or reduce the number of measures."
+                )
+            );
+        }
+        const table = this.model.exportData();
+        download({
+            url: "/web/pivot/export_xlsx",
+            data: { data: JSON.stringify(table) },
+        });
+    }
+    /**
+     * Expands all groups
+     */
+    onExpandButtonClicked() {
+        this.model.expandAll();
+    }
+    /**
+     * Flips axis
+     */
+    onFlipButtonClicked() {
+        this.model.flip();
+    }
+    /**
+     * Toggles the given measure
+     *
+     * @param {CustomEvent} ev
+     */
+    onMeasureSelected(ev) {
+        this.model.toggleMeasure(ev.detail.payload.measure);
+    }
+    /**
+     * @param {CustomEvent} ev
+     */
+    onOpenView(cell) {
+        if (cell.value === undefined || this.model.meta.disableLinking) {
+            return;
+        }
+
+        const context = Object.assign({}, this.model.searchParams.context);
+        Object.keys(context).forEach((x) => {
+            if (x === "group_by" || x.startsWith("search_default_")) {
+                delete context[x];
+            }
+        });
+
+        // retrieve form and list view ids from the action
+        this.views = ["list", "form"].map((viewType) => {
+            const view = this.props.info.views.find((view) => view[1] === viewType);
+            return [view ? view[0] : false, viewType];
+        });
+
+        const group = {
+            rowValues: cell.groupId[0],
+            colValues: cell.groupId[1],
+            originIndex: cell.originIndexes[0],
+        };
+        const domain = this.model.getGroupDomain(group);
+
+        this.actionService.doAction({
+            type: "ir.actions.act_window",
+            name: this.model.meta.title,
+            res_model: this.props.resModel,
+            views: this.views,
+            view_mode: "list",
+            target: "current",
+            context,
+            domain,
+        });
+    }
+}
+
+PivotView.template = "web.PivotView";
+PivotView.buttonTemplate = "web.PivotView.Buttons";
+PivotView.components = { ControlPanel, SearchPanel, Renderer: PivotRenderer };
+
+PivotView.props = {
+    ...standardViewProps,
+    additionalMeasures: { type: Array, elements: String, optional: 1 },
+    display: { type: Object, optional: 1 },
+    title: { type: String, optional: 1 },
+};
+PivotView.defaultProps = {
+    additionalMeasures: [],
+    display: {},
+};
+
+PivotView.Model = PivotModel;
+
+PivotView.archParser = PivotArchParser;
+
+PivotView.type = "pivot";
+PivotView.display_name = _lt("Pivot");
+PivotView.icon = "fa-table";
+PivotView.multiRecord = true;
+PivotView.searchMenuTypes = ["filter", "groupBy", "comparison", "favorite"];
+
+viewRegistry.add("pivot", PivotView);
diff --git a/addons/web/static/src/legacy/scss/pivot_view.scss b/addons/web/static/src/views/pivot/pivot_view.scss
similarity index 88%
rename from addons/web/static/src/legacy/scss/pivot_view.scss
rename to addons/web/static/src/views/pivot/pivot_view.scss
index 060f5bf656a..0a37c1caff0 100644
--- a/addons/web/static/src/legacy/scss/pivot_view.scss
+++ b/addons/web/static/src/views/pivot/pivot_view.scss
@@ -1,5 +1,4 @@
 .o_pivot {
-
     .o_pivot_cell_value {
         font-size: 1em;
         .o_comparison {
@@ -16,6 +15,13 @@
     }
 
     table {
+        th > .o_dropdown > .o_dropdown_toggler {
+            background: none!important;
+            border: none!important;
+            padding: 0!important;
+            // width: 100%!important;
+            // text-align: left!important;
+        }
         background-color: $o-view-background-color;
         width: auto;  // bootstrap override
 
@@ -108,8 +114,8 @@
         top: 10px;
     }
 
-    .o_pivot_field_menu .dropdown-item.disabled {
-        color: $text-muted;
-        cursor: default;
-    }
+    // .o_pivot_field_menu .dropdown-item.disabled {
+    //     color: $text-muted;
+    //     cursor: default;
+    // }
 }
diff --git a/addons/web/static/src/views/pivot/pivot_view.xml b/addons/web/static/src/views/pivot/pivot_view.xml
new file mode 100644
index 00000000000..3545594ab80
--- /dev/null
+++ b/addons/web/static/src/views/pivot/pivot_view.xml
@@ -0,0 +1,46 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.PivotView.Buttons" owl="1">
+        <div class="btn-group" role="toolbar" aria-label="Main actions"  t-on-dropdown-item-selected="onMeasureSelected">
+            <t t-call="web.ReportViewMeasures">
+                <t t-set="measures" t-value="model.meta.measures"/>
+                <t t-set="activeMeasures" t-value="model.meta.activeMeasures"/>
+            </t>
+        </div>
+        <div class="btn-group" role="toolbar" aria-label="Pivot settings">
+            <t t-set="noDataDisplayed" t-value="!model.hasData() || !model.meta.activeMeasures.length"/>
+            <button class="btn btn-secondary fa fa-exchange o_pivot_flip_button" t-on-click="onFlipButtonClicked" data-tooltip="Flip axis" aria-label="Flip axis" t-attf-disabled="{{noDataDisplayed ? 'disabled' : false}}"/>
+            <button class="btn btn-secondary fa fa-arrows o_pivot_expand_button" t-on-click="onExpandButtonClicked" data-tooltip="Expand all" aria-label="Expand all" t-attf-disabled="{{noDataDisplayed ? 'disabled' : false}}"/>
+            <button class="btn btn-secondary fa fa-download o_pivot_download" t-on-click="onDownloadButtonClicked" data-tooltip="Download xlsx" aria-label="Download xlsx" t-attf-disabled="{{noDataDisplayed ? 'disabled' : false}}"/>
+        </div>
+    </t>
+
+    <t t-name="web.PivotView" owl="1">
+        <div class="o_pivot_view" t-att-class="{o_view_sample_data: model.meta.useSampleModel }">
+            <ControlPanel t-if="env.searchModel.display.controlPanel" t-props="props.info">
+                <t t-set-slot="control-panel-bottom-left">
+                    <t t-call="{{ constructor.buttonTemplate }}"/>
+                </t>
+            </ControlPanel>
+            <div class="o_content">
+                <SearchPanel t-if="env.searchModel.display.searchPanel" />
+                <t t-set="displayNoContent" t-value="
+                    props.info.noContentHelp !== false and (
+                        !(model.hasData() and model.meta.activeMeasures.length) or
+                        model.meta.useSampleModel
+                    )" />
+                <t t-if="displayNoContent">
+                    <t t-if="props.info.noContentHelp" t-call="web.ActionHelper">
+                        <t t-set="noContentHelp" t-value="props.info.noContentHelp"/>
+                    </t>
+                    <t t-else="" t-call="web.NoContentHelper"/>
+                </t>
+                <t t-if="model.hasData() and model.meta.activeMeasures.length">
+                    <Renderer model="model" onCellClicked="cell => onOpenView(cell)"/>
+                </t>
+            </div>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/tests/core/debug/debug_manager_tests.js b/addons/web/static/tests/core/debug/debug_manager_tests.js
index 3d725c4112e..70b7948f8d9 100644
--- a/addons/web/static/tests/core/debug/debug_manager_tests.js
+++ b/addons/web/static/tests/core/debug/debug_manager_tests.js
@@ -15,6 +15,7 @@ import {
     fakeCommandService,
     makeFakeDialogService,
     makeFakeLocalizationService,
+    makeFakeUserService,
 } from "../../helpers/mock_services";
 import { click, getFixture, legacyExtraNextTick, patchWithCleanup } from "../../helpers/utils";
 import { createWebClient, doAction, getActionManagerServerData } from "../../webclient/helpers";
@@ -357,6 +358,7 @@ QUnit.module("DebugMenu", (hooks) => {
             debug: true,
         });
 
+        registry.category("services").add("user", makeFakeUserService());
         registry.category("debug").category("view").add("editViewItem", editView);
 
         const serverData = getActionManagerServerData();
diff --git a/addons/web/static/tests/helpers/mock_server.js b/addons/web/static/tests/helpers/mock_server.js
index a90d6f047fb..b90a9b40b30 100644
--- a/addons/web/static/tests/helpers/mock_server.js
+++ b/addons/web/static/tests/helpers/mock_server.js
@@ -330,6 +330,9 @@ export class MockServer {
         }
         // generate a field_view_get result
         const fields = Object.assign({}, this.models[modelName].fields);
+        for (const fieldName in fields) {
+            fields[fieldName].name = fieldName;
+        }
         // var viewOptions = params.viewOptions || {};
         const fvg = _fieldsViewGet({
             arch,
@@ -726,7 +729,7 @@ export class MockServer {
         let aggregatedFields = [];
         // if no fields have been given, the server picks all stored fields
         if (kwargs.fields.length === 0) {
-            aggregatedFields = Object.keys(this.models[modelName].fields).filter(
+            aggregatedFields = Object.keys(fields).filter(
                 (fieldName) => !groupByFieldNames.includes(fieldName)
             );
         } else {
@@ -1499,7 +1502,11 @@ export class MockServer {
         fieldNames = [...new Set(fieldNames.concat(["id"]))];
         const { context } = params;
         const active_test = context && "active_test" in context ? context.active_test : true;
-        let records = this.getRecords(params.model, params.domain || [], { active_test });
+        let records = this.getRecords(
+            params.model,
+            params.domain || [],
+            Object.assign({}, params.context, { active_test })
+        );
         if (params.sort) {
             // warning: only consider first level of sort
             params.sort = params.sort.split(",")[0];
diff --git a/addons/web/static/tests/helpers/mock_services.js b/addons/web/static/tests/helpers/mock_services.js
index c48279f4f2e..ad0e5f4cc45 100644
--- a/addons/web/static/tests/helpers/mock_services.js
+++ b/addons/web/static/tests/helpers/mock_services.js
@@ -246,6 +246,17 @@ export function makeFakeDialogService(addDialog) {
     };
 }
 
+export function makeFakeUserService(hasGroup = () => false) {
+    return {
+        ...userService,
+        start() {
+            const fakeUserService = userService.start(...arguments);
+            fakeUserService.hasGroup = hasGroup;
+            return fakeUserService;
+        },
+    };
+}
+
 export const mocks = {
     company: () => companyService,
     command: () => fakeCommandService,
diff --git a/addons/web/static/tests/legacy/control_panel/search_bar_tests.js b/addons/web/static/tests/legacy/control_panel/search_bar_tests.js
index 79cebce327f..c3e44f624e4 100644
--- a/addons/web/static/tests/legacy/control_panel/search_bar_tests.js
+++ b/addons/web/static/tests/legacy/control_panel/search_bar_tests.js
@@ -2,9 +2,11 @@
 
 import testUtils from "web.test_utils";
 import { createWebClient, doAction } from "@web/../tests/webclient/helpers";
+import { makeFakeUserService } from "@web/../tests/helpers/mock_services";
 import { Model } from "web.Model";
 import Registry from "web.Registry";
 import SearchBar from "web.SearchBar";
+import { registry } from "@web/core/registry";
 
 let serverData;
 
@@ -321,6 +323,8 @@ QUnit.module("Search Bar (legacy)", (hooks) => {
                 </pivot>
             `;
 
+            registry.category("services").add("user", makeFakeUserService());
+
             let rpcs;
             const webClient = await createWebClient({
                 serverData,
diff --git a/addons/web/static/tests/legacy/views/pivot_tests.js b/addons/web/static/tests/legacy/views/pivot_tests.js
index f8bf7c0f735..ebd9d3784e3 100644
--- a/addons/web/static/tests/legacy/views/pivot_tests.js
+++ b/addons/web/static/tests/legacy/views/pivot_tests.js
@@ -6,6 +6,8 @@ var PivotView = require('web.PivotView');
 const PivotController = require("web.PivotController");
 var testUtils = require('web.test_utils');
 var testUtilsDom = require('web.test_utils_dom');
+const { registry } = require('@web/core/registry');
+const legacyViewRegistry = require('web.view_registry');
 
 const { createWebClient, doAction } = require('@web/../tests/webclient/helpers');
 
@@ -31,6 +33,9 @@ let serverData;
 
 QUnit.module('Views', {
     beforeEach: function () {
+        registry.category("views").remove("pivot"); // remove new pivot from registry
+        legacyViewRegistry.add("pivot", PivotView); // add legacy pivot -> will be wrapped and added to new registry
+
         this.data = {
             partner: {
                 fields: {
@@ -117,7 +122,7 @@ QUnit.module('Views', {
         serverData = { models: this.data };
     },
 }, function () {
-    QUnit.module('PivotView');
+    QUnit.module('Legacy PivotView');
 
     QUnit.test('simple pivot rendering', async function (assert) {
         assert.expect(3);
@@ -2986,67 +2991,6 @@ QUnit.module('Views', {
         pivot.destroy();
     });
 
-    QUnit.test('Navigation list view for a group and back with breadcrumbs', async function (assert) {
-        assert.expect(16);
-        // create a webClient to test the interactions with the search view
-
-        serverData.views = {
-            'partner,false,pivot': '<pivot>' +
-                    '<field name="customer" type="row"/>' +
-              '</pivot>',
-            'partner,false,search': '<search><filter name="bayou" string="Bayou" domain="[(\'foo\',\'=\', 12)]"/></search>',
-            'partner,false,list': '<tree><field name="foo"/></tree>',
-            'partner,false,form': '<form><field name="foo"/></form>',
-        };
-
-        let readGroupCount = 0;
-        const mockRPC = (route, args) => {
-            if (args.method === 'read_group') {
-                assert.step('read_group');
-                const domain = args.kwargs.domain;
-                if ([0,1].indexOf(readGroupCount) !== -1) {
-                    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');
-                }
-                readGroupCount++;
-            }
-            if (route === '/web/dataset/search_read') {
-                assert.step('search_read');
-                const domain = args.domain;
-                assert.deepEqual(domain, ['&', ['customer', '=', 1], ['foo', '=', 12]],
-                    'list domain is correct');
-            }
-        };
-
-        const webClient = await createWebClient({serverData, mockRPC});
-
-        await doAction(webClient, {
-            res_model: 'partner',
-            type: 'ir.actions.act_window',
-            views: [[false, 'pivot']],
-        });
-
-
-        await cpHelpers.toggleFilterMenu(webClient);
-        await cpHelpers.toggleMenuItem(webClient, 0);
-        await testUtils.nextTick();
-
-        await testUtilsDom.click($(webClient.el).find('.o_pivot_cell_value:nth(1)'));
-        await testUtils.nextTick();
-
-        assert.containsOnce(webClient, '.o_list_view');
-
-        await testUtilsDom.click($(webClient.el).find('.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']);
-    });
-
     QUnit.test('Cell values are kept when flippin a pivot view in comparison mode', async function (assert) {
         assert.expect(2);
 
diff --git a/addons/web/static/tests/legacy/views/search_panel_tests.js b/addons/web/static/tests/legacy/views/search_panel_tests.js
index bdde2878fcf..0a411e8cdc6 100644
--- a/addons/web/static/tests/legacy/views/search_panel_tests.js
+++ b/addons/web/static/tests/legacy/views/search_panel_tests.js
@@ -10,8 +10,11 @@ const SearchPanel = require("web.searchPanel");
 const cpHelpers = testUtils.controlPanel;
 const createView = testUtils.createView;
 
+const { makeFakeUserService } = require("@web/../tests/helpers/mock_services");
 const { createWebClient, doAction } = require('@web/../tests/webclient/helpers');
 const { legacyExtraNextTick } = require("@web/../tests/helpers/utils");
+const { registry } = require("@web/core/registry");
+const { PivotView } = require("@web/views/pivot/pivot_view");
 
 /**
  * Return the list of counters displayed in the search panel (if any).
@@ -2336,6 +2339,7 @@ QUnit.module('Views', {
     QUnit.test('search panel is available on list and kanban by default', async function (assert) {
         assert.expect(8);
 
+        registry.category("services").add("user", makeFakeUserService());
         const webClient = await createWebClient({ serverData });
 
         await doAction(webClient, 1);
@@ -2359,7 +2363,7 @@ QUnit.module('Views', {
         assert.containsNone(webClient, '.o_content .o_search_panel');
     });
 
-    QUnit.test('search panel with view_types attribute', async function (assert) {
+    QUnit.skip('search panel with view_types attribute', async function (assert) {
         assert.expect(6);
 
         serverData.views['partner,false,search'] =
@@ -2371,6 +2375,7 @@ QUnit.module('Views', {
             </search>`;
 
 
+        registry.category("views").add("pivot", PivotView, { force: true });
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 1);
 
@@ -2486,9 +2491,10 @@ QUnit.module('Views', {
         ]);
     });
 
-    QUnit.test('search panel filters are kept when switching to a view with no search panel', async function (assert) {
+    QUnit.skip('search panel filters are kept when switching to a view with no search panel', async function (assert) {
         assert.expect(13);
 
+        registry.category("views").add("pivot", PivotView, { force: true });
         const webClient = await createWebClient({ serverData });
         await doAction(webClient, 1);
 
diff --git a/addons/web/static/tests/views/helpers.js b/addons/web/static/tests/views/helpers.js
index e07cfb07a25..4f8cb1f69b7 100644
--- a/addons/web/static/tests/views/helpers.js
+++ b/addons/web/static/tests/views/helpers.js
@@ -1,9 +1,9 @@
 /** @odoo-module **/
 
+import { View } from "@web/views/view";
 import { getFixture } from "@web/../tests/helpers/utils";
 import { makeTestEnv } from "@web/../tests/helpers/mock_env";
 import { registerCleanup } from "@web/../tests/helpers/cleanup";
-import { View } from "@web/views/view";
 import { _fieldsViewGet } from "../helpers/mock_server";
 import { addLegacyMockEnvironment } from "../webclient/helpers";
 
diff --git a/addons/web/static/tests/views/pivot_view_tests.js b/addons/web/static/tests/views/pivot_view_tests.js
new file mode 100644
index 00000000000..3ddf7760f55
--- /dev/null
+++ b/addons/web/static/tests/views/pivot_view_tests.js
@@ -0,0 +1,4931 @@
+/** @odoo-module **/
+
+import { dialogService } from "@web/core/dialog/dialog_service";
+import { registry } from "@web/core/registry";
+import { session } from "@web/session";
+import { makeFakeLocalizationService, makeFakeUserService } from "../helpers/mock_services";
+import {
+    click,
+    nextTick,
+    legacyExtraNextTick,
+    makeDeferred,
+    mockDownload,
+    patchDate,
+    patchWithCleanup,
+    triggerEvent,
+    triggerEvents,
+} from "../helpers/utils";
+import { makeView } from "./helpers";
+import {
+    applyGroup,
+    editFavoriteName,
+    setupControlPanelServiceRegistry,
+    toggleAddCustomGroup,
+    toggleComparisonMenu,
+    toggleFavoriteMenu,
+    toggleFilterMenu,
+    toggleGroupByMenu,
+    toggleMenuItem,
+    toggleMenuItemOption,
+    toggleSaveFavorite,
+    saveFavorite,
+    selectGroup,
+    removeFacet,
+    toggleMenu,
+} from "../search/helpers";
+import { createWebClient, doAction } from "../webclient/helpers";
+
+const serviceRegistry = registry.category("services");
+
+/**
+ * Helper function that returns, given a pivot instance, the values of the
+ * table, separated by ','.
+ *
+ * @returns {string}
+ */
+function getCurrentValues(pivot) {
+    return [...pivot.el.querySelectorAll(".o_pivot_cell_value div")]
+        .map((el) => el.innerText)
+        .join();
+}
+
+let serverData;
+QUnit.module("Views", (hooks) => {
+    hooks.beforeEach(() => {
+        serverData = {
+            models: {
+                partner: {
+                    fields: {
+                        foo: {
+                            string: "Foo",
+                            type: "integer",
+                            searchable: true,
+                            group_operator: "sum",
+                        },
+                        bar: { string: "bar", type: "boolean", store: true, sortable: true },
+                        date: { string: "Date", type: "date", store: true, sortable: true },
+                        product_id: {
+                            string: "Product",
+                            type: "many2one",
+                            relation: "product",
+                            store: true,
+                            sortable: true,
+                        },
+                        other_product_id: {
+                            string: "Other Product",
+                            type: "many2one",
+                            relation: "product",
+                            store: true,
+                            sortable: true,
+                        },
+                        non_stored_m2o: {
+                            string: "Non Stored M2O",
+                            type: "many2one",
+                            relation: "product",
+                        },
+                        customer: {
+                            string: "Customer",
+                            type: "many2one",
+                            relation: "customer",
+                            store: true,
+                            sortable: true,
+                        },
+                        computed_field: {
+                            string: "Computed and not stored",
+                            type: "integer",
+                            compute: true,
+                            group_operator: "sum",
+                        },
+                        company_type: {
+                            string: "Company Type",
+                            type: "selection",
+                            selection: [
+                                ["company", "Company"],
+                                ["individual", "individual"],
+                            ],
+                            searchable: true,
+                            sortable: true,
+                            store: true,
+                        },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            foo: 12,
+                            bar: true,
+                            date: "2016-12-14",
+                            product_id: 37,
+                            customer: 1,
+                            computed_field: 19,
+                            company_type: "company",
+                        },
+                        {
+                            id: 2,
+                            foo: 1,
+                            bar: true,
+                            date: "2016-10-26",
+                            product_id: 41,
+                            customer: 2,
+                            computed_field: 23,
+                            company_type: "individual",
+                        },
+                        {
+                            id: 3,
+                            foo: 17,
+                            bar: true,
+                            date: "2016-12-15",
+                            product_id: 41,
+                            customer: 2,
+                            computed_field: 26,
+                            company_type: "company",
+                        },
+                        {
+                            id: 4,
+                            foo: 2,
+                            bar: false,
+                            date: "2016-04-11",
+                            product_id: 41,
+                            customer: 1,
+                            computed_field: 19,
+                            company_type: "individual",
+                        },
+                    ],
+                },
+                product: {
+                    fields: {
+                        name: { string: "Product Name", type: "char" },
+                    },
+                    records: [
+                        {
+                            id: 37,
+                            display_name: "xphone",
+                        },
+                        {
+                            id: 41,
+                            display_name: "xpad",
+                        },
+                    ],
+                },
+                customer: {
+                    fields: {
+                        name: { string: "Customer Name", type: "char" },
+                    },
+                    records: [
+                        {
+                            id: 1,
+                            display_name: "First",
+                        },
+                        {
+                            id: 2,
+                            display_name: "Second",
+                        },
+                    ],
+                },
+            },
+        };
+        setupControlPanelServiceRegistry();
+        serviceRegistry.add("dialog", dialogService);
+        serviceRegistry.add("localization", makeFakeLocalizationService());
+        serviceRegistry.add("user", makeFakeUserService());
+    });
+
+    QUnit.module("PivotView");
+
+    QUnit.test("simple pivot rendering", async function (assert) {
+        assert.expect(3);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot string="Partners">
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+            mockRPC(route, args) {
+                assert.strictEqual(
+                    args.kwargs.lazy,
+                    false,
+                    "the read_group should be done with the lazy=false option"
+                );
+            },
+        });
+
+        assert.hasClass(pivot.el.querySelector("table"), "o_enable_linking");
+        assert.containsOnce(
+            pivot,
+            "td.o_pivot_cell_value:contains(32)",
+            "should contain a pivot cell with the sum of all records"
+        );
+    });
+
+    QUnit.test("pivot rendering with widget", async function (assert) {
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot string="Partners">
+                    <field name="foo" type="measure" widget="float_time"/>
+                </pivot>`,
+        });
+
+        assert.containsOnce(
+            pivot,
+            "td.o_pivot_cell_value:contains(32:00)",
+            "should contain a pivot cell with the sum of all records"
+        );
+    });
+
+    QUnit.test("pivot rendering with string attribute on field", async function (assert) {
+        serverData.models.partner.fields.foo = {
+            string: "Foo",
+            type: "integer",
+            store: true,
+            group_operator: "sum",
+        };
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot string="Partners">
+                    <field name="foo" string="BAR" type="measure"/>
+                </pivot>`,
+        });
+
+        await click(pivot.el.querySelector(".o_cp_bottom_left button.o_dropdown_toggler"));
+        assert.strictEqual(
+            pivot.el.querySelector(".o_cp_bottom_left .o_dropdown_menu .o_dropdown_item").innerText,
+            "BAR"
+        );
+        assert.strictEqual(
+            pivot.el.querySelector(".o_pivot_measure_row").innerText,
+            "BAR",
+            "the displayed name should be the one set in the string attribute"
+        );
+    });
+
+    QUnit.test(
+        "pivot rendering with string attribute on non stored field",
+        async function (assert) {
+            serverData.models.partner.fields.fubar = {
+                string: "Fubar",
+                type: "integer",
+                store: false,
+                group_operator: "sum",
+            };
+
+            const pivot = await makeView({
+                type: "pivot",
+                resModel: "partner",
+                serverData,
+                arch: `
+                <pivot string="Partners">
+                    <field name="fubar" string="fubar" type="measure"/>
+                </pivot>`,
+            });
+            assert.strictEqual(
+                pivot.el.querySelector(".o_pivot_measure_row").innerText,
+                "fubar",
+                "the displayed name should be the one set in the string attribute"
+            );
+        }
+    );
+
+    QUnit.test("pivot rendering with invisible attribute on field", async function (assert) {
+        // when invisible, a field should neither be an active measure nor be a selectable measure
+        Object.assign(serverData.models.partner.fields, {
+            foo: { string: "Foo", type: "integer", store: true, group_operator: "sum" },
+            foo2: { string: "Foo2", type: "integer", store: true, group_operator: "sum" },
+        });
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot string="Partners">
+                    <field name="foo" type="measure"/>
+                    <field name="foo2" type="measure" invisible="1"/>
+                </pivot>`,
+        });
+
+        // there should be only one displayed measure as the other one is invisible
+        assert.containsOnce(pivot, ".o_pivot_measure_row");
+        await click(pivot.el.querySelector(".o_cp_bottom_left button.o_dropdown_toggler"));
+        // there should be only one measure besides count, as the other one is invisible
+        assert.containsN(pivot, ".o_cp_bottom_left .o_dropdown_menu .dropdown-item", 2);
+        // the invisible field souldn't be in the groupable fields neither
+        await click(pivot.el.querySelector(".o_pivot_header_cell_closed"));
+        assert.containsNone(pivot, '.o_dropdown_menu a[data-field="foo2"]');
+    });
+
+    QUnit.test('pivot view without "string" attribute', async function (assert) {
+        assert.expect(1);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+        });
+
+        // this is important for export functionality.
+        assert.strictEqual(
+            pivot.model.meta.title,
+            pivot.env._t("Untitled"),
+            "should have a valid title"
+        );
+    });
+
+    QUnit.test("group headers should have a tooltip", async function (assert) {
+        assert.expect(2);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="product_id" type="col"/>
+                    <field name="date" type="row"/>
+                </pivot>`,
+        });
+
+        assert.strictEqual(
+            pivot.el.querySelectorAll("tbody .o_pivot_header_cell_closed")[0].dataset.tooltip,
+            "Date"
+        );
+        assert.strictEqual(
+            pivot.el.querySelectorAll("thead .o_pivot_header_cell_closed")[1].dataset.tooltip,
+            "Product"
+        );
+    });
+
+    QUnit.test(
+        "pivot view add computed fields explicitly defined as measure",
+        async function (assert) {
+            const pivot = await makeView({
+                type: "pivot",
+                resModel: "partner",
+                serverData,
+                arch: `
+                <pivot>
+                    <field name="computed_field" type="measure"/>
+                </pivot>`,
+            });
+
+            await click(pivot.el.querySelector(".o_cp_bottom_left button.o_dropdown_toggler"));
+            assert.containsOnce(
+                pivot,
+                ".o_cp_bottom_left .o_dropdown_menu .dropdown-item:contains(Computed and not stored)"
+            );
+            assert.strictEqual(
+                pivot.el.querySelector(".o_pivot_measure_row").innerText,
+                "Computed and not stored"
+            );
+        }
+    );
+
+    QUnit.test("clicking on a cell triggers a doAction", async function (assert) {
+        assert.expect(2);
+
+        patchWithCleanup(session, {
+            user_context: { userContextKey: true },
+        });
+
+        const fakeActionService = {
+            start() {
+                return {
+                    doAction(action) {
+                        assert.deepEqual(
+                            action,
+                            {
+                                context: { someKey: true, uid: 7, userContextKey: true },
+                                domain: [["product_id", "=", 37]],
+                                name: "Partners",
+                                res_model: "partner",
+                                target: "current",
+                                type: "ir.actions.act_window",
+                                view_mode: "list",
+                                views: [
+                                    [false, "list"],
+                                    [2, "form"],
+                                ],
+                            },
+                            "should trigger do_action with the correct args"
+                        );
+                        return Promise.resolve(true);
+                    },
+                };
+            },
+        };
+        serviceRegistry.add("action", fakeActionService, { force: true });
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="product_id" type="row"/>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+            context: { someKey: true, search_default_test: 3 },
+            title: "Partners", // FIXME props ignored
+            views: [
+                [2, "form"],
+                [5, "kanban"],
+                [false, "list"],
+                [false, "pivot"],
+            ],
+        });
+
+        assert.hasClass(pivot.el.querySelector("table"), "o_enable_linking");
+        await click(pivot.el.querySelectorAll(".o_pivot_cell_value")[1]); // should trigger a do_action
+    });
+
+    QUnit.test("row and column are highlighted when hovering a cell", async function (assert) {
+        assert.expect(11);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot string="Partners">
+                    <field name="foo" type="col"/>
+                    <field name="product_id" type="row"/>
+                </pivot>`,
+        });
+
+        // check row highlighting
+        assert.hasClass(
+            pivot.el.querySelector("table"),
+            "table-hover",
+            "with className 'table-hover', rows are highlighted (bootstrap)"
+        );
+
+        // check column highlighting
+        // hover third measure
+        await triggerEvents(pivot.el, "th.o_pivot_measure_row:nth-of-type(3)", ["mouseover"]);
+        assert.containsN(pivot, ".o_cell_hover", 3);
+        for (var i = 1; i <= 3; i++) {
+            assert.hasClass(
+                pivot.el.querySelector(`tbody tr:nth-of-type(${i}) td:nth-of-type(3)`),
+                "o_cell_hover"
+            );
+        }
+        await triggerEvents(pivot.el, "th.o_pivot_measure_row:nth-of-type(3)", ["mouseout"]);
+        assert.containsNone(pivot, ".o_cell_hover");
+
+        // hover second cell, second row
+        await triggerEvents(pivot.el, "tbody tr:nth-of-type(1) td:nth-of-type(2)", ["mouseover"]);
+        assert.containsN(pivot, ".o_cell_hover", 3);
+        for (i = 1; i <= 3; i++) {
+            assert.hasClass(
+                pivot.el.querySelector(`tbody tr:nth-of-type(${i}) td:nth-of-type(2)`),
+                "o_cell_hover"
+            );
+        }
+        await triggerEvents(pivot.el, "tbody tr:nth-of-type(2) td:nth-of-type(2)", ["mouseout"]);
+        assert.containsNone(pivot, ".o_cell_hover");
+    });
+
+    QUnit.test('pivot view with disable_linking="True"', async function (assert) {
+        const fakeActionService = {
+            start() {
+                return {
+                    doAction() {
+                        throw new Error("should not execute an action");
+                    },
+                };
+            },
+        };
+        serviceRegistry.add("action", fakeActionService, { force: true });
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot disable_linking="True">
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+        });
+
+        assert.doesNotHaveClass(pivot.el.querySelector("table"), "o_enable_linking");
+        assert.containsOnce(pivot, ".o_pivot_cell_value");
+        await click(pivot.el.querySelector(".o_pivot_cell_value")); // should not trigger a do_action
+    });
+
+    QUnit.test('clicking on the "Total" cell with time range activated', async function (assert) {
+        assert.expect(2);
+
+        patchDate(2016, 11, 20, 1, 0, 0);
+
+        const fakeActionService = {
+            start() {
+                return {
+                    doAction(action) {
+                        assert.deepEqual(
+                            action.domain,
+                            ["&", ["date", ">=", "2016-12-01"], ["date", "<=", "2016-12-31"]],
+                            "should trigger do_action with the correct action domain"
+                        );
+                        return Promise.resolve(true);
+                    },
+                };
+            },
+        };
+        serviceRegistry.add("action", fakeActionService, { force: true });
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: "<pivot/>",
+            searchViewArch: `
+                <search>
+                    <filter name="date_filter" date="date" domain="[]" default_period='this_month'/>
+                </search>`,
+            context: { search_default_date_filter: true },
+            title: "Partners",
+        });
+
+        assert.hasClass(
+            pivot.el.querySelector("table"),
+            "o_enable_linking",
+            "root node should have classname 'o_enable_linking'"
+        );
+        await click(pivot.el.querySelector(".o_pivot_cell_value"));
+    });
+
+    QUnit.test(
+        'clicking on a fake cell value ("empty group") in comparison mode',
+        async function (assert) {
+            assert.expect(3);
+
+            patchDate(2016, 11, 20, 1, 0, 0);
+
+            serverData.models.partner.records[0].date = "2016-11-15";
+            serverData.models.partner.records[1].date = "2016-11-17";
+            serverData.models.partner.records[2].date = "2016-11-22";
+            serverData.models.partner.records[3].date = "2016-11-03";
+
+            const expectedDomains = [
+                ["&", ["date", ">=", "2016-12-01"], ["date", "<=", "2016-12-31"]],
+                [[0, "=", 1]],
+            ];
+            const fakeActionService = {
+                start() {
+                    return {
+                        doAction(action) {
+                            assert.deepEqual(action.domain, expectedDomains.shift());
+                            return Promise.resolve(true);
+                        },
+                    };
+                },
+            };
+            serviceRegistry.add("action", fakeActionService, { force: true });
+
+            const pivot = await makeView({
+                type: "pivot",
+                resModel: "partner",
+                serverData,
+                arch: `<pivot><field name="product_id" type="row"/></pivot>`,
+                searchViewArch: `
+                    <search>
+                        <filter name="date_filter" date="date" domain="[]" default_period='this_month'/>
+                    </search>`,
+                context: { search_default_date_filter: true },
+                title: "Partners",
+            });
+
+            await toggleComparisonMenu(pivot);
+            await toggleMenuItem(pivot, "Date: Previous period");
+
+            assert.hasClass(pivot.el.querySelector("table"), "o_enable_linking");
+            // here we click on the group corresponding to Total/Total/This Month
+            pivot.el.querySelectorAll(".o_pivot_cell_value")[1].click(); // should trigger a do_action with appropriate domain
+            // here we click on the group corresponding to xphone/Total/This Month
+            pivot.el.querySelectorAll(".o_pivot_cell_value")[4].click(); // should trigger a do_action with appropriate domain
+        }
+    );
+
+    QUnit.test("pivot view grouped by date field", async function (assert) {
+        assert.expect(2);
+
+        await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="date" interval="month" type="col"/>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+            mockRPC(route, params) {
+                const wrongFields = params.kwargs.fields.filter((field) => {
+                    return !(field.split(":")[0] in serverData.models.partner.fields);
+                });
+                assert.ok(
+                    !wrongFields.length,
+                    "fields given to read_group should exist on the model"
+                );
+            },
+        });
+    });
+
+    QUnit.test("without measures, pivot view uses __count by default", async function (assert) {
+        assert.expect(4);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: "<pivot></pivot>",
+            mockRPC(route, args) {
+                if (args.method === "read_group") {
+                    assert.deepEqual(
+                        args.kwargs.fields,
+                        ["__count"],
+                        "should make a read_group with no valid fields"
+                    );
+                }
+            },
+        });
+
+        await click(pivot.el.querySelector(".o_cp_bottom_left .o_dropdown_toggler"));
+        assert.containsOnce(pivot.el, ".o_cp_bottom_left .o_dropdown_menu .o_dropdown_item");
+        const measure = pivot.el.querySelector(
+            ".o_cp_bottom_left .o_dropdown_menu .o_dropdown_item"
+        );
+        assert.strictEqual(measure.innerText, "Count");
+        assert.hasClass(measure, "selected", "The count measure should be selected");
+    });
+
+    QUnit.test("pivot view can be reloaded", async function (assert) {
+        let readGroupCount = 0;
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: "<pivot></pivot>",
+            searchViewArch: `
+                <search>
+                    <filter name="some_filter" string="Some Filter" domain="[('foo', '>', 10)]"/>
+                </search>`,
+            mockRPC(route, args) {
+                if (args.method === "read_group") {
+                    readGroupCount++;
+                }
+            },
+        });
+
+        assert.containsOnce(
+            pivot,
+            "td.o_pivot_cell_value:contains(4)",
+            "should contain a pivot cell with the number of all records"
+        );
+        assert.strictEqual(readGroupCount, 1, "should have done 1 rpc");
+
+        await toggleFilterMenu(pivot);
+        await toggleMenuItem(pivot, "Some Filter");
+        assert.containsOnce(
+            pivot,
+            "td.o_pivot_cell_value:contains(2)",
+            "should contain a pivot cell with the number of remaining records"
+        );
+        assert.strictEqual(readGroupCount, 2, "should have done 2 rpcs");
+    });
+
+    QUnit.test("pivot view grouped by many2one field", async function (assert) {
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="product_id" type="row"/>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+        });
+
+        assert.containsOnce(pivot, ".o_pivot_header_cell_opened", "should have one opened header");
+        assert.containsOnce(
+            pivot,
+            ".o_pivot_header_cell_closed:contains(xphone)",
+            "should display one header with 'xphone'"
+        );
+        assert.containsOnce(
+            pivot,
+            ".o_pivot_header_cell_closed:contains(xpad)",
+            "should display one header with 'xpad'"
+        );
+    });
+
+    QUnit.test("basic folding/unfolding", async function (assert) {
+        assert.expect(7);
+
+        let rpcCount = 0;
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="product_id" type="row"/>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+            mockRPC() {
+                rpcCount++;
+            },
+        });
+        assert.containsN(
+            pivot,
+            "tbody tr",
+            3,
+            "should have 3 rows: 1 for the opened header, and 2 for data"
+        );
+
+        // click on the opened header to close it
+        await click(pivot.el, ".o_pivot_header_cell_opened");
+
+        assert.containsOnce(pivot, "tbody tr", "should have 1 row");
+
+        // click on closed header to open dropdown
+        await click(pivot.el, "tbody .o_pivot_header_cell_closed");
+        assert.containsOnce(pivot, ".o_pivot .o_dropdown_menu");
+        assert.strictEqual(
+            pivot.el.querySelector(".o_pivot .o_dropdown_menu").innerText.replace(/\s/g, ""),
+            "CompanyTypeCustomerDateOtherProductProductbarAddCustomGroup"
+        );
+
+        // open the Date sub dropdown
+        await click(pivot.el, ".o_pivot .o_dropdown_menu .o_dropdown_toggler.o_menu_item");
+        assert.strictEqual(
+            pivot.el
+                .querySelector(".o_pivot .o_dropdown_menu .o_dropdown_menu")
+                .innerText.replace(/\s/g, ""),
+            "YearQuarterMonthWeekDay"
+        );
+
+        await click(
+            pivot.el.querySelectorAll(
+                ".o_pivot .o_dropdown_menu .o_dropdown_menu .o_dropdown_item"
+            )[2]
+        );
+
+        assert.containsN(pivot, "tbody tr", 4, "should have 4 rows: one for header, 3 for data");
+        assert.strictEqual(
+            rpcCount,
+            3,
+            "should have done 3 rpcs (initial load) + open header with different groupbys"
+        );
+    });
+
+    QUnit.test("more folding/unfolding", async function (assert) {
+        assert.expect(1);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="product_id" type="row"/>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+        });
+
+        // open dropdown to zoom into first row
+        await click(pivot.el.querySelector("tbody .o_pivot_header_cell_closed"));
+        // click on date by day
+        await click(pivot.el.querySelector("tbody .o_dropdown_menu .o_dropdown_toggler"));
+        await click(
+            pivot.el.querySelector("tbody .o_dropdown_menu .o_dropdown_menu li:nth-child(5)")
+        );
+
+        // open dropdown to zoom into second row
+        await click(pivot.el.querySelectorAll("tbody th.o_pivot_header_cell_closed")[1]);
+
+        assert.containsN(
+            pivot,
+            "tbody tr",
+            7,
+            "should have 7 rows (1 for total, 1 for xphone, 1 for xpad, 4 for data)"
+        );
+    });
+
+    QUnit.test("fold and unfold header group", async function (assert) {
+        assert.expect(3);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="product_id" type="col"/>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+        });
+
+        assert.containsN(pivot, "thead tr", 3);
+
+        // fold opened col group
+        await click(pivot.el.querySelector("thead .o_pivot_header_cell_opened"));
+        assert.containsN(pivot, "thead tr", 2);
+
+        // unfold it
+        await click(pivot.el.querySelector("thead .o_pivot_header_cell_closed"));
+        await click(pivot.el.querySelector(".o_dropdown_menu li:nth-child(5)"));
+        assert.containsN(pivot, "thead tr", 3);
+    });
+
+    QUnit.test("unfold second header group", async function (assert) {
+        assert.expect(4);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="product_id" type="col"/>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+        });
+
+        assert.containsN(pivot, "thead tr", 3);
+        let values = ["12", "20", "32"];
+        assert.strictEqual(getCurrentValues(pivot), values.join(","));
+
+        // unfold it
+        await click(pivot.el.querySelector("thead .o_pivot_header_cell_closed:last-child"));
+        await click(pivot.el.querySelector(".o_dropdown_menu li:nth-child(1)"));
+        assert.containsN(pivot, "thead tr", 4);
+        values = ["12", "3", "17", "32"];
+        assert.strictEqual(getCurrentValues(pivot), values.join(","));
+    });
+
+    QUnit.test(
+        "pivot renders group dropdown same as search groupby dropdown if group bys are specified in search arch",
+        async function (assert) {
+            assert.expect(6);
+
+            const pivot = await makeView({
+                type: "pivot",
+                resModel: "partner",
+                serverData,
+                arch: `
+                <pivot>
+                    <field name="product_id" type="row"/>
+                    <field name="bar" type="col"/>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+                // TOASK DAM: <search><field/></search> won´t appear in groupbymenu ?
+                searchViewArch: `
+                <search>
+                    <filter name="bar" string="bar" context="{'group_by': 'bar'}"/>
+                    <filter name="foo" string="foo" context="{'group_by': 'foo'}"/>
+                    <filter name="product_id" string="product" context="{'group_by': 'product_id'}"/>
+                </search>`,
+            });
+
+            // open group by dropdown
+            await toggleGroupByMenu(pivot);
+            assert.containsN(
+                pivot,
+                ".o_control_panel .o_cp_bottom_right .o_dropdown_menu .o_menu_item",
+                3,
+                "should have 3 dropdown items in searchview groupby"
+            );
+            assert.containsOnce(
+                pivot,
+                ".o_control_panel .o_cp_bottom_right .o_dropdown_menu .o_add_custom_group_menu",
+                "should have custom group generator in searchview groupby"
+            );
+
+            // click on closed header to open dropdown
+            await click(pivot.el, "tbody tr:last-child .o_pivot_header_cell_closed");
+            assert.containsN(
+                pivot,
+                ".o_dropdown_menu > .dropdown-item",
+                3,
+                "should have 3 dropdown items same as searchview groupby"
+            );
+            assert.containsOnce(
+                pivot,
+                ".o_dropdown_menu .o_add_custom_group_menu",
+                "should have custom group generator same as searchview groupby"
+            );
+            // check custom groupby selection has groupable fields only
+            await click(pivot.el, ".o_dropdown_menu .o_add_custom_group_menu .o_dropdown_toggler");
+            assert.containsN(
+                pivot,
+                ".o_dropdown_menu .o_add_custom_group_menu .o_dropdown_menu option",
+                6,
+                "should have 6 fields in custom groupby"
+            );
+            const optionDescriptions = [
+                ...pivot.el.querySelectorAll(
+                    ".o_dropdown_menu .o_add_custom_group_menu .o_dropdown_menu option"
+                ),
+            ].map((option) => option.innerText.trim());
+            assert.deepEqual(
+                optionDescriptions,
+                ["Company Type", "Customer", "Date", "Other Product", "Product", "bar"],
+                "should only have groupable fields in custom groupby"
+            );
+        }
+    );
+
+    QUnit.test("pivot group dropdown sync with search groupby dropdown", async function (assert) {
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="product_id" type="row"/>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+            searchViewArch: `
+                <search>
+                    <filter name="bar" string="bar" context="{'group_by': 'bar'}"/>
+                    <filter name="product_id" string="product" context="{'group_by': 'product_id'}"/>
+                </search>`,
+        });
+
+        // open group by dropdown
+        await toggleGroupByMenu(pivot);
+        assert.containsN(
+            pivot,
+            ".o_control_panel .o_cp_bottom_right .o_dropdown_menu .o_menu_item",
+            2,
+            "should have 2 dropdown items in searchview groupby"
+        );
+
+        // click on closed header to open dropdown
+        await click(pivot.el, "tbody tr:last-child .o_pivot_header_cell_closed");
+        assert.containsN(
+            pivot,
+            ".o_dropdown_menu .o_menu_item",
+            2,
+            "should have 2 dropdown items in pivot groupby"
+        );
+
+        // add a custom group in searchview groupby
+        await toggleGroupByMenu(pivot);
+        await toggleAddCustomGroup(pivot);
+        await applyGroup(pivot);
+        assert.containsN(
+            pivot,
+            ".o_control_panel .o_cp_bottom_right .o_dropdown_menu .o_menu_item",
+            3,
+            "should have 3 dropdown items in searchview groupby now"
+        );
+        await click(pivot.el, "tbody tr:last-child .o_pivot_header_cell_closed");
+        assert.containsN(
+            pivot,
+            ".o_dropdown_menu .o_menu_item",
+            2,
+            "should still have 2 dropdown items in pivot groupby"
+        );
+
+        // add a custom group in pivot groupby
+        await click(pivot.el, ".o_dropdown_menu .o_add_custom_group_menu .o_dropdown_toggler");
+        pivot.el.querySelector(".o_dropdown_menu .o_add_custom_group_menu select").value = "date";
+        await triggerEvent(pivot.el, ".o_dropdown_menu .o_add_custom_group_menu select", "change");
+        await click(pivot.el, ".o_dropdown_menu .o_add_custom_group_menu .o_dropdown_menu .btn");
+        // click on closed header to open groupby selection dropdown
+        await click(pivot.el, "tbody tr:last-child .o_pivot_header_cell_closed");
+        assert.containsN(
+            pivot,
+            ".o_dropdown_menu .o_menu_item",
+            3,
+            "should have 3 dropdown items in pivot groupby dropdown"
+        );
+
+        // applying custom groupby in pivot groupby dropdown will not update search dropdown
+        await toggleGroupByMenu(pivot);
+        assert.containsN(
+            pivot,
+            ".o_control_panel .o_cp_bottom_right .o_dropdown_menu .o_menu_item",
+            3,
+            "should still have 3 dropdown items in searchview groupby dropdown"
+        );
+    });
+
+    QUnit.test(
+        "pivot groupby dropdown renders custom search at the end with separator",
+        async function (assert) {
+            const pivot = await makeView({
+                type: "pivot",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <pivot>
+                        <field name="product_id" type="row"/>
+                        <field name="foo" type="measure"/>
+                    </pivot>`,
+                searchViewArch: `
+                    <search>
+                        <filter name="bar" string="bar" context="{'group_by': 'bar'}"/>
+                        <filter name="product_id" string="product" context="{'group_by': 'product_id'}"/>
+                    </search>`,
+            });
+
+            // open group by dropdown
+            await toggleGroupByMenu(pivot);
+            assert.containsN(
+                pivot,
+                ".o_control_panel .o_cp_bottom_right .o_dropdown_menu .o_menu_item",
+                2,
+                "should have 2 dropdown items in searchview groupby"
+            );
+            await toggleAddCustomGroup(pivot);
+            await applyGroup(pivot);
+            assert.containsN(
+                pivot,
+                ".o_control_panel .o_cp_bottom_right .o_dropdown_menu .o_menu_item",
+                3,
+                "should have 3 dropdown items in searchview groupby now"
+            );
+
+            // click on closed header to open dropdown
+            await click(pivot.el.querySelectorAll("tbody .o_pivot_header_cell_closed")[1]);
+            let items = pivot.el.querySelectorAll(".o_menu_item");
+            assert.deepEqual(
+                [...items].map((it) => it.innerText),
+                ["bar", "product"]
+            );
+            assert.containsOnce(
+                pivot,
+                "tbody .o_dropdown_menu .dropdown-divider",
+                "pivot groupby menu should only have one separator"
+            );
+            assert.hasClass(
+                items[items.length - 1].nextSibling,
+                "dropdown-divider",
+                "pivot groupby menu separator is placed after all menu items"
+            );
+
+            // add a custom group in pivot groupby
+            await click(pivot.el, ".o_dropdown_menu .o_add_custom_group_menu .o_dropdown_toggler");
+            pivot.el.querySelector(".o_add_custom_group_menu select").value = "customer";
+            await triggerEvent(
+                pivot.el,
+                ".o_dropdown_menu .o_add_custom_group_menu select",
+                "change"
+            );
+            await click(
+                pivot.el,
+                ".o_dropdown_menu .o_add_custom_group_menu .o_dropdown_menu .btn"
+            );
+
+            await click(pivot.el.querySelectorAll("tbody .o_pivot_header_cell_closed")[1]);
+            items = pivot.el.querySelectorAll(".o_menu_item");
+            assert.deepEqual(
+                [...items].map((it) => it.innerText),
+                ["bar", "product", "Customer"]
+            );
+            assert.containsN(
+                pivot,
+                "tbody .o_dropdown_menu .dropdown-divider",
+                2,
+                "pivot groupby menu should now have two separators"
+            );
+            assert.hasClass(
+                items[items.length - 1].previousSibling,
+                "dropdown-divider",
+                "last pivot groupby menu item is placed after a separator"
+            );
+            assert.hasClass(
+                items[items.length - 1].nextSibling,
+                "dropdown-divider",
+                "a pivot groupby menu separator is placed after all menu items"
+            );
+        }
+    );
+
+    QUnit.test(
+        "pivot custom groupby: grouping on date field use default interval month",
+        async function (assert) {
+            assert.expect(1);
+
+            let checkReadGroup = false;
+            const pivot = await makeView({
+                type: "pivot",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <pivot>
+                        <field name="product_id" type="row"/>
+                        <field name="foo" type="measure"/>
+                    </pivot>`,
+                searchViewArch: `
+                    <search>
+                        <filter name="bar" string="bar" context="{'group_by': 'bar'}"/>
+                    </search>`,
+                mockRPC(route, args) {
+                    if (args.method === "read_group" && checkReadGroup) {
+                        assert.deepEqual(
+                            args.kwargs.groupby,
+                            ["date:month"],
+                            "should use default month as an interval in read_group"
+                        );
+                        checkReadGroup = false;
+                    }
+                },
+            });
+
+            // click on closed header to open dropdown and apply groupby on date field
+            await click(pivot.el.querySelector("thead .o_pivot_header_cell_closed"));
+            await click(
+                pivot.el.querySelector(
+                    "thead .o_dropdown_menu .o_add_custom_group_menu .o_dropdown_toggler "
+                )
+            );
+
+            checkReadGroup = true;
+            const select = pivot.el.querySelector(".o_add_custom_group_menu select");
+            select.value = "date";
+            select.dispatchEvent(new Event("change"));
+            await click(pivot.el.querySelector(".o_add_custom_group_menu .btn-primary"));
+        }
+    );
+
+    QUnit.test("pivot view without group by specified in search arch", async function (assert) {
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="product_id" type="row"/>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+        });
+
+        // open group by dropdown
+        await toggleGroupByMenu(pivot);
+        assert.containsNone(
+            pivot,
+            ".o_control_panel .o_cp_bottom_right .o_dropdown_menu .o_menu_item",
+            "should not have any dropdown item in searchview groupby"
+        );
+        assert.containsOnce(
+            pivot,
+            ".o_control_panel .o_cp_bottom_right .o_dropdown_menu .o_add_custom_group_menu",
+            "should have add custom group item in searchview groupby"
+        );
+        // click on closed header to open dropdown
+        await click(pivot.el.querySelectorAll("tbody .o_pivot_header_cell_closed")[1]);
+        assert.containsN(
+            pivot,
+            "tbody .o_dropdown_menu .o_menu_item",
+            6,
+            "should have 6 dropdown items i.e. all groupable fields available"
+        );
+        assert.containsOnce(
+            pivot,
+            ".o_dropdown_menu .o_add_custom_group_menu",
+            "should have custom group generator in groupby dropdown"
+        );
+    });
+
+    QUnit.test(
+        "pivot view do not show custom group selection if there are no groupable fields",
+        async function (assert) {
+            assert.expect(4);
+
+            for (const fieldName of [
+                "bar",
+                "company_type",
+                "customer",
+                "date",
+                "other_product_id",
+            ]) {
+                delete serverData.models.partner.fields[fieldName];
+            }
+
+            // Keep product_id but make it ungroupable
+            delete serverData.models.partner.fields.product_id.sortable;
+            delete serverData.models.partner.fields.product_id.store;
+
+            serverData.models.partner.records = [
+                {
+                    id: 1,
+                    foo: 12,
+                    product_id: 37,
+                    computed_field: 19,
+                },
+            ];
+
+            const pivot = await makeView({
+                type: "pivot",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <pivot>
+                        <field name="foo" type="measure"/>
+                        <field name="product_id" invisible="1"/>
+                    </pivot>`,
+                searchViewArch: `
+                    <search>
+                        <filter name="product_id" string="product" context="{'group_by': 'product_id'}"/>
+                    </search>`,
+            });
+
+            // open group by dropdown
+            await toggleGroupByMenu(pivot);
+            assert.containsOnce(
+                pivot,
+                ".o_control_panel .o_cp_bottom_right .o_dropdown_menu .o_menu_item",
+                "should have 1 dropdown item in searchview groupby"
+            );
+            assert.containsNone(
+                pivot,
+                ".o_control_panel .o_cp_bottom_right .o_dropdown_menu .o_add_custom_group_menu",
+                "should not have custom group generator in searchview groupby"
+            );
+
+            // click on closed header to open dropdown
+            await click(pivot.el.querySelector("tbody .o_pivot_header_cell_closed"));
+            assert.containsOnce(
+                pivot,
+                "tbody .o_dropdown_menu .o_dropdown_item",
+                "should have 1 dropdown items"
+            );
+            assert.containsNone(
+                pivot,
+                ".o_dropdown_menu .o_add_custom_group_menu",
+                "should not have custom group generator in groupby dropdown"
+            );
+        }
+    );
+
+    QUnit.test(
+        "pivot custom groupby: adding a custom group close the pivot groupby menu",
+        async function (assert) {
+            assert.expect(3);
+
+            const pivot = await makeView({
+                type: "pivot",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <pivot>
+                        <field name="product_id" type="row"/>
+                        <field name="foo" type="measure"/>
+                    </pivot>`,
+                searchViewArch: `
+                    <search>
+                        <filter name="bar" string="bar" context="{'group_by': 'bar'}"/>
+                    </search>`,
+            });
+
+            // click on closed header to open dropdown
+            await click(pivot.el.querySelector("thead .o_pivot_header_cell_closed"));
+            assert.containsOnce(pivot, "thead .o_dropdown_menu .o_add_custom_group_menu");
+            await click(
+                pivot.el.querySelector(
+                    "thead .o_dropdown_menu .o_add_custom_group_menu .o_dropdown_toggler"
+                )
+            );
+            assert.containsOnce(
+                pivot,
+                "thead .o_dropdown_menu .o_add_custom_group_menu .o_dropdown_menu"
+            );
+
+            // click on apply button should close dropdown
+            await click(
+                pivot.el.querySelector(
+                    "thead .o_dropdown_menu .o_add_custom_group_menu .o_dropdown_menu .btn-primary"
+                )
+            );
+            assert.containsNone(pivot, "thead .o_dropdown_menu");
+        }
+    );
+
+    QUnit.test("can toggle extra measure", async function (assert) {
+        let rpcCount = 0;
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="product_id" type="row"/>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+            mockRPC() {
+                rpcCount++;
+            },
+        });
+
+        rpcCount = 0;
+        assert.containsN(
+            pivot,
+            ".o_pivot_cell_value",
+            3,
+            "should have 3 cells: 1 for the open header, and 2 for data"
+        );
+
+        await click(pivot.el.querySelector(".o_cp_bottom_left button.o_dropdown_toggler"));
+        assert.doesNotHaveClass(
+            $(pivot.el).find(".o_dropdown_item:contains(Count)"),
+            "selected",
+            "the __count measure should not be selected"
+        );
+        await click($(pivot.el).find(".o_cp_bottom_left .o_dropdown_item:contains(Count)")[0]);
+
+        assert.hasClass(
+            $(pivot.el).find(".o_cp_bottom_left .o_dropdown_item:contains(Count)"),
+            "selected",
+            "the __count measure should be selected"
+        );
+        assert.containsN(
+            pivot,
+            ".o_pivot_cell_value",
+            6,
+            "should have 6 cells: 2 for the open header, and 4 for data"
+        );
+        assert.strictEqual(rpcCount, 2, "should have done 2 rpcs to reload data");
+
+        await click($(pivot.el).find(".o_cp_bottom_left .o_dropdown_item:contains(Count)")[0]);
+
+        assert.doesNotHaveClass(
+            $(pivot.el).find(".o_dropdown_item:contains(Count)")[0],
+            "selected",
+            "the __count measure should not be selected"
+        );
+        assert.containsN(
+            pivot,
+            ".o_pivot_cell_value",
+            3,
+            "should have 3 cells: 1 for the open header, and 2 for data"
+        );
+        assert.strictEqual(rpcCount, 2, "should not have done any extra rpcs");
+    });
+
+    QUnit.test("no content helper when no active measure", async function (assert) {
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `<pivot/>`,
+        });
+
+        assert.containsNone(pivot, ".o_view_nocontent");
+        assert.containsOnce(pivot, "table");
+
+        await click(pivot.el.querySelector(".o_cp_bottom_left button.o_dropdown_toggler"));
+        await click($(pivot.el).find(".o_cp_bottom_left .o_dropdown_item:contains(Count)")[0]);
+
+        assert.containsOnce(pivot, ".o_view_nocontent");
+        assert.containsNone(pivot, "table");
+    });
+
+    QUnit.test("no content helper when no data", async function (assert) {
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `<pivot/>`,
+            searchViewArch: `
+                <search>
+                    <filter name="some_filter" string="Some Filter" domain="[('foo', '=', 12345)]"/>
+                </search>`,
+        });
+
+        assert.containsNone(pivot, ".o_view_nocontent");
+        assert.containsOnce(pivot, "table");
+
+        await toggleFilterMenu(pivot);
+        await toggleMenuItem(pivot, "Some Filter");
+
+        assert.containsOnce(pivot, ".o_view_nocontent");
+        assert.containsNone(pivot, "table");
+    });
+
+    QUnit.test("no content helper when no data, part 2", async function (assert) {
+        serverData.models.partner.records = [];
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: "<pivot/>",
+        });
+
+        assert.containsOnce(pivot, ".o_view_nocontent");
+    });
+
+    QUnit.test("no content helper when no data, part 3", async function (assert) {
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: "<pivot/>",
+            searchViewArch: `
+                <search>
+                    <field name="foo"/>
+                    <filter name="some_filter" string="Some Filter" domain="[('foo', '>', 10)]"/>
+                </search>`,
+            context: {
+                search_default_foo: 12345,
+            },
+        });
+
+        assert.containsOnce(pivot, ".o_searchview .o_searchview_facet");
+        assert.containsOnce(pivot, ".o_view_nocontent");
+
+        await toggleFilterMenu(pivot);
+        await toggleMenuItem(pivot, "Some Filter");
+        assert.containsN(pivot, ".o_searchview .o_searchview_facet", 2);
+        assert.containsOnce(pivot, ".o_view_nocontent");
+
+        await toggleMenuItem(pivot, "Some Filter");
+        assert.containsOnce(pivot, ".o_searchview .o_searchview_facet");
+        assert.containsOnce(pivot, ".o_view_nocontent");
+
+        await click(pivot.el, ".o_facet_remove");
+        assert.containsNone(pivot, ".o_searchview .o_searchview_facet");
+        assert.containsNone(pivot, ".o_view_nocontent");
+
+        // tries to open a field selection menu, to make sure it was not
+        // removed from the dom.
+        await click(pivot.el.querySelector("tbody .o_pivot_header_cell_closed"));
+        assert.containsOnce(pivot, "tbody .o_dropdown_menu");
+    });
+
+    QUnit.test("tries to restore previous state after domain change", async function (assert) {
+        assert.expect(7);
+
+        let rpcCount = 0;
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="product_id" type="row"/>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+            searchViewArch: `
+                <search>
+                    <filter name="my_filter" string="My Filter" domain="[('foo', '=', 12345)]"/>
+                </search>`,
+            mockRPC() {
+                rpcCount++;
+            },
+        });
+
+        assert.containsN(
+            pivot,
+            ".o_pivot_cell_value",
+            3,
+            "should have 3 cells: 1 for the open header, and 2 for data"
+        );
+        assert.containsOnce(
+            pivot,
+            ".o_pivot_measure_row:contains(Foo)",
+            "should have 1 row for measure Foo"
+        );
+
+        await toggleFilterMenu(pivot);
+        await toggleMenuItem(pivot, "My Filter");
+        assert.containsNone(pivot, "table");
+
+        rpcCount = 0;
+        await removeFacet(pivot);
+
+        assert.containsOnce(pivot, "table");
+        assert.equal(rpcCount, 2, "should have reloaded data");
+        assert.containsN(
+            pivot,
+            ".o_pivot_cell_value",
+            3,
+            "should still have 3 cells: 1 for the open header, and 2 for data"
+        );
+        assert.containsOnce(
+            pivot,
+            ".o_pivot_measure_row:contains(Foo)",
+            "should still have 1 row for measure Foo"
+        );
+    });
+
+    QUnit.test("can be grouped with the search view", async function (assert) {
+        assert.expect(4);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+            searchViewArch: `
+                <search>
+                    <filter string="Product" name="product_id" context="{'group_by':'product_id'}"/>
+                </search>`,
+        });
+
+        assert.containsOnce(pivot, ".o_pivot_cell_value", "should have only 1 cell");
+        assert.containsOnce(pivot, "tbody tr", "should have 1 rows");
+
+        await toggleGroupByMenu(pivot);
+        await toggleMenuItem(pivot, "Product");
+
+        assert.containsN(pivot, ".o_pivot_cell_value", 3, "should have 3 cells");
+        assert.containsN(pivot, "tbody tr", 3, "should have 3 rows");
+    });
+
+    QUnit.test("can sort data in a column by clicking on header", async function (assert) {
+        assert.expect(3);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="foo" type="measure"/>
+                    <field name="product_id" type="row"/>
+                </pivot>`,
+        });
+
+        let values = ["32", "12", "20"];
+        assert.strictEqual(
+            getCurrentValues(pivot),
+            values.join(","),
+            "should have proper values in cells (total, result 1, result 2)"
+        );
+
+        await click(pivot.el.querySelector("th.o_pivot_measure_row"));
+
+        values = ["32", "12", "20"];
+        assert.strictEqual(
+            getCurrentValues(pivot),
+            values.join(","),
+            "should have proper values in cells (total, result 1, result 2)"
+        );
+
+        await click(pivot.el.querySelector("th.o_pivot_measure_row"));
+
+        values = ["32", "20", "12"];
+        assert.strictEqual(
+            getCurrentValues(pivot),
+            values.join(","),
+            "should have proper values in cells (total, result 1, result 2)"
+        );
+    });
+
+    QUnit.test("can expand all rows", async function (assert) {
+        assert.expect(7);
+
+        let nbReadGroups = 0;
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="foo" type="measure"/>
+                    <field name="product_id" type="row"/>
+                </pivot>`,
+            searchViewArch: `
+                <search>
+                    <filter string="Date" name="date" context="{'group_by':'date'}"/>
+                    <filter string="Product" name="product_id" context="{'group_by':'product_id'}"/>
+                </search>`,
+            mockRPC(route, args) {
+                if (args.method === "read_group") {
+                    nbReadGroups++;
+                }
+            },
+        });
+
+        assert.strictEqual(nbReadGroups, 2, "should have done 2 read_group RPCS");
+        assert.strictEqual(
+            getCurrentValues(pivot),
+            "32,12,20",
+            "should have proper values in cells (total, result 1, result 2)"
+        );
+
+        // expand on date:days, product
+        await toggleGroupByMenu(pivot);
+        await toggleMenuItem(pivot, "Date");
+        await toggleMenuItemOption(pivot, "Date", "Month");
+        nbReadGroups = 0;
+        await toggleMenuItem(pivot, "Product");
+
+        assert.strictEqual(nbReadGroups, 3, "should have done 3 read_group RPCS");
+        assert.containsN(
+            pivot,
+            "tbody tr",
+            8,
+            "should have 7 rows (total + 3 for December and 2 for October and April)"
+        );
+
+        // collapse the last two rows
+        await click(pivot.el.querySelectorAll("tbody .o_pivot_header_cell_opened")[3]);
+        await click(pivot.el.querySelectorAll("tbody .o_pivot_header_cell_opened")[2]);
+
+        assert.containsN(pivot, "tbody tr", 6, "should have 6 rows now");
+
+        // expand all
+        nbReadGroups = 0;
+        await click(pivot.el.querySelector(".o_pivot_expand_button"));
+
+        assert.strictEqual(nbReadGroups, 3, "should have done 3 read_group RPCS");
+        assert.containsN(pivot, "tbody tr", 8, "should have 8 rows again");
+    });
+
+    QUnit.test("expand all with a delay", async function (assert) {
+        assert.expect(4);
+
+        let def;
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="foo" type="measure"/>
+                    <field name="product_id" type="row"/>
+                </pivot>`,
+            searchViewArch: `
+                <search>
+                    <filter string="Date" name="date" context="{'group_by':'date'}"/>
+                    <filter string="Product" name="product_id" context="{'group_by':'product_id'}"/>
+                </search>`,
+            mockRPC(route, args) {
+                if (args.method === "read_group") {
+                    return Promise.resolve(def);
+                }
+            },
+        });
+
+        // expand on date:days, product
+        await toggleGroupByMenu(pivot);
+        await toggleMenuItem(pivot, "Date");
+        await toggleMenuItemOption(pivot, "Date", "Month");
+        await toggleMenuItem(pivot, "Product");
+        assert.containsN(
+            pivot,
+            "tbody tr",
+            8,
+            "should have 7 rows (total + 3 for December and 2 for October and April)"
+        );
+
+        // collapse the last two rows
+        await click(pivot.el.querySelectorAll("tbody .o_pivot_header_cell_opened")[3]);
+        await click(pivot.el.querySelectorAll("tbody .o_pivot_header_cell_opened")[2]);
+
+        assert.containsN(pivot, "tbody tr", 6, "should have 6 rows now");
+
+        // expand all
+        def = makeDeferred();
+        await click(pivot.el.querySelector(".o_pivot_expand_button"));
+        assert.containsN(pivot, "tbody tr", 6, "should have 6 rows now");
+        def.resolve();
+        await nextTick();
+        assert.containsN(pivot, "tbody tr", 8, "should have 8 rows again");
+    });
+
+    QUnit.test("can download a file", async function (assert) {
+        assert.expect(1);
+
+        mockDownload(({ url }) => {
+            assert.strictEqual(url, "/web/pivot/export_xlsx");
+            return Promise.resolve();
+        });
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="date" interval="month" type="col"/>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+        });
+
+        await click(pivot.el.querySelector(".o_pivot_download"));
+    });
+
+    QUnit.test(
+        "download a file with single measure, measure row displayed in table",
+        async function (assert) {
+            assert.expect(2);
+
+            mockDownload(({ url, data }) => {
+                data = JSON.parse(data.data);
+                assert.strictEqual(url, "/web/pivot/export_xlsx");
+                assert.strictEqual(
+                    data.measure_headers.length,
+                    4,
+                    "should have measure_headers in data"
+                );
+                return Promise.resolve();
+            });
+
+            const pivot = await makeView({
+                type: "pivot",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <pivot>
+                        <field name="date" interval="month" type="col"/>
+                        <field name="foo" type="measure"/>
+                    </pivot>`,
+            });
+
+            await click(pivot.el.querySelector(".o_pivot_download"));
+        }
+    );
+
+    QUnit.test("download button is disabled when there is no data", async function (assert) {
+        assert.expect(1);
+
+        serverData.models.partner.records = [];
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="date" interval="month" type="col"/>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+        });
+
+        assert.hasAttrValue(
+            pivot.el.querySelector(".o_pivot_download"),
+            "disabled",
+            "disabled",
+            "download button should be disabled"
+        );
+    });
+
+    QUnit.test("correctly save measures and groupbys to favorite", async function (assert) {
+        assert.expect(3);
+
+        let expectedContext;
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="date" interval="day" type="col"/>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+            mockRPC(route, args) {
+                if (args.method === "create_or_replace") {
+                    assert.deepEqual(args.args[0].context, expectedContext);
+                    return true;
+                }
+            },
+        });
+
+        expectedContext = {
+            group_by: [],
+            pivot_column_groupby: ["date:day"],
+            pivot_measures: ["foo"],
+            pivot_row_groupby: [],
+        };
+        await toggleFavoriteMenu(pivot);
+        await toggleSaveFavorite(pivot);
+        await editFavoriteName(pivot, "Fav1");
+        await saveFavorite(pivot);
+
+        // expand header on field customer
+        await click(pivot.el.querySelectorAll("thead .o_pivot_header_cell_closed")[1]);
+        await click(pivot.el.querySelectorAll("thead .o_dropdown_menu .o_dropdown_item")[1]);
+        expectedContext = {
+            group_by: [],
+            pivot_column_groupby: ["date:day", "customer"],
+            pivot_measures: ["foo"],
+            pivot_row_groupby: [],
+        };
+        await toggleFavoriteMenu(pivot);
+        await toggleSaveFavorite(pivot);
+        await editFavoriteName(pivot, "Fav2");
+        await saveFavorite(pivot);
+
+        // expand row on field product_id
+        await click(pivot.el.querySelector("tbody .o_pivot_header_cell_closed"));
+        await click(pivot.el.querySelectorAll("tbody .o_dropdown_menu .o_dropdown_item")[4]);
+        expectedContext = {
+            group_by: [],
+            pivot_column_groupby: ["date:day", "customer"],
+            pivot_measures: ["foo"],
+            pivot_row_groupby: ["product_id"],
+        };
+        await toggleFavoriteMenu(pivot);
+        await toggleSaveFavorite(pivot);
+        await editFavoriteName(pivot, "Fav3");
+        await saveFavorite(pivot);
+    });
+
+    QUnit.test("correctly remove pivot_ keys from the context", async function (assert) {
+        assert.expect(5);
+
+        // in this test, we use "foo" as a measure
+        serverData.models.partner.fields.foo.store = true;
+        serverData.models.partner.fields.amount = {
+            string: "Amount",
+            type: "float",
+            group_operator: "sum",
+        };
+
+        let expectedContext;
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="date" interval="day" type="col"/>
+                    <field name="amount" type="measure"/>
+                </pivot>`,
+            context: {
+                search_default_initial_context: 1,
+            },
+            searchViewArch: `
+                <search>
+                    <filter
+                        name="initial_context"
+                        string="Initial favorite"
+                        domain="[]"
+                        context="{
+                            'pivot_measures': ['foo'],
+                            'pivot_column_groupby': ['customer'],
+                            'pivot_row_groupby': ['product_id'],
+                        }"
+                    />
+                </search>`,
+            mockRPC(route, args) {
+                if (args.method === "create_or_replace") {
+                    assert.deepEqual(args.args[0].context, expectedContext);
+                    return true;
+                }
+            },
+        });
+
+        // Unload the filter
+        await removeFacet(pivot); // remove previous favorite
+        expectedContext = {
+            group_by: [],
+            pivot_column_groupby: ["customer"],
+            pivot_measures: ["foo"],
+            pivot_row_groupby: ["product_id"],
+        };
+        await toggleFavoriteMenu(pivot);
+        await toggleSaveFavorite(pivot);
+        await editFavoriteName(pivot, "1");
+        await saveFavorite(pivot);
+
+        // Let's get rid of the rows groupBy
+        await click(pivot.el, "tbody .o_pivot_header_cell_opened");
+        expectedContext = {
+            group_by: [],
+            pivot_column_groupby: ["customer"],
+            pivot_measures: ["foo"],
+            pivot_row_groupby: [],
+        };
+        await toggleFavoriteMenu(pivot);
+        await toggleSaveFavorite(pivot);
+        await editFavoriteName(pivot, "2");
+        await saveFavorite(pivot);
+
+        // And now, get rid of both col and row groupby
+        //await click(pivot.el, "tbody .o_pivot_header_cell_opened"); //It was already removed
+        await click(pivot.el, "thead .o_pivot_header_cell_opened");
+        expectedContext = {
+            group_by: [],
+            pivot_column_groupby: [],
+            pivot_measures: ["foo"],
+            pivot_row_groupby: [],
+        };
+        await toggleFavoriteMenu(pivot);
+        await toggleSaveFavorite(pivot);
+        await editFavoriteName(pivot, "3");
+        await saveFavorite(pivot);
+
+        // Group row by product_id
+        await click(pivot.el, "tbody .o_pivot_header_cell_closed");
+        await click(pivot.el, ".o_dropdown_menu li:nth-child(5)");
+        expectedContext = {
+            group_by: [],
+            pivot_column_groupby: [],
+            pivot_measures: ["foo"],
+            pivot_row_groupby: ["product_id"],
+        };
+        await toggleFavoriteMenu(pivot);
+        await toggleSaveFavorite(pivot);
+        await editFavoriteName(pivot, "4");
+        await saveFavorite(pivot);
+
+        // Group column by customer
+        await click(pivot.el, "thead .o_pivot_header_cell_closed");
+        await click(pivot.el, ".o_dropdown_menu li:nth-child(2)");
+        expectedContext = {
+            group_by: [],
+            pivot_column_groupby: ["customer"],
+            pivot_measures: ["foo"],
+            pivot_row_groupby: ["product_id"],
+        };
+        await toggleFavoriteMenu(pivot);
+        await toggleSaveFavorite(pivot);
+        await editFavoriteName(pivot, "5");
+        await saveFavorite(pivot);
+    });
+
+    QUnit.test("Apply two groupby, and remove facet", async function (assert) {
+        serverData.views = {
+            "partner,false,pivot": `
+                    <pivot>
+                        <field name="customer" type="row"/>
+                    </pivot>`,
+            "partner,false,search": `
+                    <search>
+                        <filter name="group_by_product" string="Product" domain="[]" context="{'group_by': 'product_id'}"/>
+                        <filter name="group_by_bar" string="Bar" domain="[]" context="{'group_by': 'bar'}"/>
+                    </search>`,
+        };
+
+        const webClient = await createWebClient({ serverData });
+
+        await doAction(webClient, {
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            views: [[false, "pivot"]],
+        });
+
+        assert.strictEqual(
+            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            "First"
+        );
+
+        // Apply both groupbys
+        await toggleGroupByMenu(webClient);
+        await toggleMenuItem(webClient, "Product");
+        assert.strictEqual(
+            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            "xphone"
+        );
+
+        await toggleMenuItem(webClient, "Bar");
+        assert.strictEqual(
+            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            "true"
+        );
+
+        // remove filter
+        await removeFacet(webClient);
+
+        assert.strictEqual(
+            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            "true"
+        );
+    });
+
+    QUnit.test("Add a group by on the CP when a favorite already exists", async function (assert) {
+        serverData.views = {
+            "partner,false,pivot": `
+                    <pivot>
+                    </pivot>`,
+            "partner,false,search": `
+                    <search>
+                        <filter name="groubybar" string="Bar" domain="[]" context="{'group_by': 'bar'}"/>
+                    </search>`,
+        };
+
+        serverData.models.partner.filters = [
+            {
+                context: "{'pivot_row_groupby': ['date']}",
+                domain: "[]",
+                id: 7,
+                is_default: true,
+                name: "My favorite",
+                sort: "[]",
+                user_id: [2, "Mitchell Admin"],
+            },
+        ];
+
+        const webClient = await createWebClient({ serverData });
+
+        await doAction(webClient, {
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            views: [[false, "pivot"]],
+        });
+
+        assert.strictEqual(
+            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            "December 2016"
+        );
+
+        // Apply BAR groupbys
+        await toggleGroupByMenu(webClient);
+        await toggleMenuItem(webClient, "Bar");
+        assert.strictEqual(
+            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            "true"
+        );
+
+        // remove groupBy
+        await toggleMenuItem(webClient, "Bar");
+        assert.strictEqual(
+            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            "December 2016"
+        );
+
+        // remove all facets
+        await removeFacet(webClient);
+
+        assert.strictEqual(
+            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            "December 2016"
+        );
+    });
+
+    QUnit.skip("Removing or adding filter shouldn't modify the row group", async function (assert) {
+        serverData.views = {
+            "partner,false,pivot": `
+                    <pivot>
+                        <field name="customer" type="row"/>
+                    </pivot>`,
+            "partner,false,search": `
+                    <search>
+                        <filter name="bayou" string="Bayou" domain="[('foo','=', 12)]"/>
+                    </search>`,
+        };
+
+        const webClient = await createWebClient({ serverData });
+
+        await doAction(webClient, {
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            views: [[false, "pivot"]],
+            context: { search_default_bayou: 1, group_by: ["company_type"] },
+        });
+
+        assert.strictEqual(
+            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            "Company"
+        );
+
+        // Let's get rid of the rows groupBy
+        await click(webClient.el, "tbody .o_pivot_header_cell_opened");
+
+        assert.strictEqual(
+            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            "Total"
+        );
+
+        // Group row by product_id
+        await click(webClient.el, "tbody .o_pivot_header_cell_closed");
+        await click(webClient.el, ".o_dropdown_menu li:nth-child(5)");
+
+        assert.strictEqual(
+            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            "xphone"
+        );
+
+        // remove filter
+        await removeFacet(webClient);
+
+        assert.strictEqual(
+            webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+            "xphone"
+        );
+    });
+
+    QUnit.test(
+        "Adding a Favorite at anytime should modify the row/column groupby",
+        async function (assert) {
+            serverData.views = {
+                "partner,false,pivot": `
+                    <pivot>
+                        <field name="customer" type="row"/>
+                        <field name="date" interval="month" type="col" />
+                    </pivot>`,
+                "partner,false,search": "<search/>",
+            };
+            serverData.models["partner"].filters = [
+                {
+                    user_id: [2, "Mitchell Admin"],
+                    name: "My favorite",
+                    id: 5,
+                    context: `{"pivot_row_groupby":["product_id"], "pivot_column_groupby": ["bar"]}`,
+                    sort: "[]",
+                    domain: "",
+                    is_default: false,
+                    model_id: "partner",
+                    action_id: false,
+                },
+            ];
+
+            const webClient = await createWebClient({ serverData });
+
+            await doAction(webClient, {
+                res_model: "partner",
+                type: "ir.actions.act_window",
+                views: [[false, "pivot"]],
+            });
+
+            assert.strictEqual(
+                webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+                "First"
+            );
+
+            assert.strictEqual(
+                webClient.el.querySelector("thead .o_pivot_header_cell_closed").textContent,
+                "December 2016"
+            );
+
+            // activate the unique existing favorite
+            await toggleFavoriteMenu(webClient);
+            await toggleMenuItem(webClient, 0);
+
+            assert.strictEqual(
+                webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+                "xphone"
+            );
+
+            assert.strictEqual(
+                webClient.el.querySelector("thead .o_pivot_header_cell_closed").textContent,
+                "true"
+            );
+
+            // desactivate the unique existing favorite
+            await toggleMenuItem(webClient, 0);
+
+            assert.strictEqual(
+                webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+                "xphone"
+            );
+
+            assert.strictEqual(
+                webClient.el.querySelector("thead .o_pivot_header_cell_closed").textContent,
+                "true"
+            );
+
+            // Let's get rid of the rows and columns groupBy
+            await click(webClient.el, "tbody .o_pivot_header_cell_opened");
+            await click(webClient.el, "thead .o_pivot_header_cell_opened");
+
+            assert.strictEqual(
+                webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+                "Total"
+            );
+
+            assert.strictEqual(
+                webClient.el.querySelector("thead .o_pivot_header_cell_closed").textContent,
+                "Total"
+            );
+
+            // activate AGAIN the unique existing favorite
+            await toggleFavoriteMenu(webClient);
+            await toggleMenuItem(webClient, 0);
+
+            assert.strictEqual(
+                webClient.el.querySelector("tbody .o_pivot_header_cell_closed").textContent,
+                "xphone"
+            );
+
+            assert.strictEqual(
+                webClient.el.querySelector("thead .o_pivot_header_cell_closed").textContent,
+                "true"
+            );
+        }
+    );
+
+    QUnit.test("Unload Filter, reset display, load another filter", async function (assert) {
+        assert.expect(18);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+            context: {
+                pivot_measures: ["foo"],
+                pivot_column_groupby: ["customer"],
+                pivot_row_groupby: ["product_id"],
+            },
+
+            searchViewArch: `
+                <search>
+                    <filter
+                        name="no_context_filter"
+                        string="My fake favorite"
+                        domain="[]"
+                        context="{}"
+                    />
+                    <filter
+                        name="reset_filter"
+                        string="My fake favorite 2"
+                        domain="[]"
+                        context="{
+                            'pivot_measures': ['foo'],
+                            'pivot_column_groupby': ['customer'],
+                            'pivot_row_groupby': ['product_id'],
+                        }"
+                    />
+                </search>`,
+        });
+
+        // Check Columns
+        assert.strictEqual(
+            $(pivot.el).find("thead .o_pivot_header_cell_opened").length,
+            1,
+            "The column should be grouped"
+        );
+        assert.strictEqual(
+            $(pivot.el).find('thead tr:contains("First")').length,
+            1,
+            'There should be a column "First"'
+        );
+        assert.strictEqual(
+            $(pivot.el).find('thead tr:contains("Second")').length,
+            1,
+            'There should be a column "Second"'
+        );
+
+        // Check Rows
+        assert.strictEqual(
+            $(pivot.el).find("tbody .o_pivot_header_cell_opened").length,
+            1,
+            "The row should be grouped"
+        );
+        assert.strictEqual(
+            $(pivot.el).find('tbody tr:contains("xphone")').length,
+            1,
+            'There should be a row "xphone"'
+        );
+        assert.strictEqual(
+            $(pivot.el).find('tbody tr:contains("xpad")').length,
+            1,
+            'There should be a row "xpad"'
+        );
+
+        // Equivalent to unload the filter
+        await toggleFilterMenu(pivot);
+        await toggleMenuItem(pivot, "My fake favorite");
+        // collapse all headers
+        await click(pivot.el, ".o_pivot_header_cell_opened:first-child");
+        await click(pivot.el, ".o_pivot_header_cell_opened");
+
+        // Check Columns
+        assert.strictEqual(
+            $(pivot.el).find("thead .o_pivot_header_cell_closed").length,
+            1,
+            "The column should not be grouped"
+        );
+        assert.strictEqual(
+            $(pivot.el).find('thead tr:contains("First")').length,
+            0,
+            'There should not be a column "First"'
+        );
+        assert.strictEqual(
+            $(pivot.el).find('thead tr:contains("Second")').length,
+            0,
+            'There should not be a column "Second"'
+        );
+
+        // Check Rows
+        assert.strictEqual(
+            $(pivot.el).find("tbody .o_pivot_header_cell_closed").length,
+            1,
+            "The row should not be grouped"
+        );
+        assert.strictEqual(
+            $(pivot.el).find('tbody tr:contains("xphone")').length,
+            0,
+            'There should not be a row "xphone"'
+        );
+        assert.strictEqual(
+            $(pivot.el).find('tbody tr:contains("xpad")').length,
+            0,
+            'There should not be a row "xpad"'
+        );
+
+        // Equivalent to load another filter
+        await removeFacet(pivot); // remove previously saved favorite
+        await toggleFilterMenu(pivot);
+        await toggleMenuItem(pivot, "My fake favorite 2");
+
+        // Check Columns
+        assert.strictEqual(
+            $(pivot.el).find("thead .o_pivot_header_cell_opened").length,
+            1,
+            "The column should be grouped"
+        );
+        assert.strictEqual(
+            $(pivot.el).find('thead tr:contains("First")').length,
+            1,
+            'There should be a column "First"'
+        );
+        assert.strictEqual(
+            $(pivot.el).find('thead tr:contains("Second")').length,
+            1,
+            'There should be a column "Second"'
+        );
+
+        // Check Rows
+        assert.strictEqual(
+            $(pivot.el).find("tbody .o_pivot_header_cell_opened").length,
+            1,
+            "The row should be grouped"
+        );
+        assert.strictEqual(
+            $(pivot.el).find('tbody tr:contains("xphone")').length,
+            1,
+            'There should be a row "xphone"'
+        );
+        assert.strictEqual(
+            $(pivot.el).find('tbody tr:contains("xpad")').length,
+            1,
+            'There should be a row "xpad"'
+        );
+    });
+
+    QUnit.test("Reload, group by columns, reload", async function (assert) {
+        assert.expect(2);
+
+        let expectedContext;
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: "<pivot/>",
+            searchViewArch: `
+                <search>
+                    <filter name="my_filter_1" string="My Filter 1" domain="[('product_id', '=', 37)]"/>
+                    <filter name="my_filter_2" string="My Filter 2" domain="[('product_id', '=', 41)]"/>
+                </search>`,
+            mockRPC(route, args) {
+                if (args.method === "create_or_replace") {
+                    assert.deepEqual(args.args[0].context, expectedContext);
+                    return true;
+                }
+            },
+        });
+
+        // Set a column groupby
+        await click(pivot.el.querySelector("thead .o_pivot_header_cell_closed"));
+        await click(pivot.el.querySelectorAll("thead .o_dropdown_item")[1]);
+
+        // Set a domain
+        await toggleFilterMenu(pivot);
+        await toggleMenuItem(pivot, "My Filter 1");
+
+        // Save to favorites and check that column groupbys were not lost
+        expectedContext = {
+            group_by: [],
+            pivot_column_groupby: ["customer"],
+            pivot_measures: ["__count"],
+            pivot_row_groupby: [],
+        };
+        await toggleFavoriteMenu(pivot);
+        await toggleSaveFavorite(pivot);
+        await editFavoriteName(pivot, "My favorite 1");
+        await saveFavorite(pivot);
+
+        // Set a column groupby
+        await removeFacet(pivot); // remove previously saved favorite
+        await click(pivot.el.querySelector("thead .o_pivot_header_cell_closed"));
+        await click(pivot.el.querySelectorAll("thead .o_dropdown_menu .o_dropdown_item")[4]);
+
+        // Set a domain
+        await toggleFilterMenu(pivot);
+        await toggleMenuItem(pivot, "My Filter 2");
+
+        expectedContext = {
+            group_by: [],
+            pivot_column_groupby: ["customer", "product_id"],
+            pivot_measures: ["__count"],
+            pivot_row_groupby: [],
+        };
+        await toggleFavoriteMenu(pivot);
+        await toggleSaveFavorite(pivot);
+        await editFavoriteName(pivot, "My favorite 2");
+        await saveFavorite(pivot);
+    });
+
+    QUnit.test("folded groups remain folded at reload", async function (assert) {
+        assert.expect(5);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="product_id" type="row"/>
+                    <field name="company_type" type="col"/>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+            searchViewArch: `
+                <search>
+                    <filter name="dummy_filter" string="Dummy Filter" domain="[('id', '>', 0)]"/>
+                </search>`,
+        });
+
+        let values = ["29", "3", "32", "12", "12", "17", "3", "20"];
+        assert.strictEqual(getCurrentValues(pivot), values.join(","));
+
+        // expand a col group
+        await click(pivot.el.querySelectorAll("thead .o_pivot_header_cell_closed")[1]);
+        await click(pivot.el.querySelectorAll("thead .o_dropdown_menu .o_dropdown_item")[1]);
+
+        values = ["29", "1", "2", "32", "12", "12", "17", "1", "2", "20"];
+        assert.strictEqual(getCurrentValues(pivot), values.join(","));
+
+        // expand a row group
+        await click(pivot.el.querySelectorAll("tbody .o_pivot_header_cell_closed")[1]);
+        await click(pivot.el.querySelectorAll("tbody .o_dropdown_menu .o_dropdown_item")[3]);
+
+        values = ["29", "1", "2", "32", "12", "12", "17", "1", "2", "20", "17", "1", "2", "20"];
+        assert.strictEqual(getCurrentValues(pivot), values.join(","));
+
+        // reload (should keep folded groups folded as col/row groupbys didn't change)
+        await toggleFilterMenu(pivot);
+        await toggleMenuItem(pivot, "Dummy Filter");
+
+        assert.strictEqual(getCurrentValues(pivot), values.join(","));
+
+        await click(pivot.el.querySelector(".o_pivot_expand_button"));
+
+        // sanity check of what the table should look like if all groups are
+        // expanded, to ensure that the former asserts are pertinent
+        values = [
+            "12",
+            "17",
+            "1",
+            "2",
+            "32",
+            "12",
+            "12",
+            "12",
+            "12",
+            "17",
+            "1",
+            "2",
+            "20",
+            "17",
+            "1",
+            "2",
+            "20",
+        ];
+        assert.strictEqual(getCurrentValues(pivot), values.join(","));
+    });
+
+    QUnit.test("Empty results keep groupbys", async function (assert) {
+        assert.expect(6);
+
+        const expectedContext = {
+            group_by: [],
+            pivot_column_groupby: ["customer"],
+            pivot_measures: ["__count"],
+            pivot_row_groupby: [],
+        };
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: "<pivot/>",
+            searchViewArch: `
+                <search>
+                    <filter name="my_filter_1" string="My Filter 1" domain="[('id', '=', 0)]"/>
+                    <filter name="my_filter_2" string="My Filter 2" domain="[('product_id', '=', 37)]"/>
+                </search>`,
+            mockRPC(route, args) {
+                if (args.method === "create_or_replace") {
+                    assert.deepEqual(args.args[0].context, expectedContext);
+                    return true;
+                }
+            },
+        });
+
+        // Set a column groupby
+        await click(pivot.el.querySelector("thead .o_pivot_header_cell_closed"));
+        await click(pivot.el.querySelectorAll("thead .o_dropdown_menu .o_dropdown_item")[1]);
+
+        assert.containsOnce(pivot, "table");
+
+        // Set a domain for empty results
+        await toggleFilterMenu(pivot);
+        await toggleMenuItem(pivot, "My Filter 1");
+        assert.containsNone(pivot, "table");
+
+        await toggleFavoriteMenu(pivot);
+        await toggleSaveFavorite(pivot);
+        await editFavoriteName(pivot, "My favorite 1");
+        await saveFavorite(pivot);
+
+        // Set a domain for not empty results
+        await removeFacet(pivot); // remove previously saved favorite
+        assert.containsOnce(pivot, "table");
+
+        await toggleFilterMenu(pivot);
+        await toggleMenuItem(pivot, "My Filter 2");
+        assert.containsOnce(pivot, "table");
+
+        await toggleFavoriteMenu(pivot);
+        await toggleSaveFavorite(pivot);
+        await editFavoriteName(pivot, "My favorite 2");
+        await saveFavorite(pivot);
+    });
+
+    QUnit.test("correctly uses pivot_ keys from the context", async function (assert) {
+        assert.expect(7);
+
+        // in this test, we use "foo" as a measure
+        serverData.models.partner.fields.foo.store = true;
+        serverData.models.partner.fields.amount = {
+            string: "Amount",
+            type: "float",
+            group_operator: "sum",
+        };
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="date" interval="day" type="col"/>
+                    <field name="amount" type="measure"/>
+                </pivot>`,
+            context: {
+                pivot_measures: ["foo"],
+                pivot_column_groupby: ["customer"],
+                pivot_row_groupby: ["product_id"],
+            },
+        });
+
+        assert.containsOnce(
+            pivot,
+            "thead .o_pivot_header_cell_opened",
+            "column: should have one opened header"
+        );
+        assert.containsOnce(
+            pivot,
+            "thead .o_pivot_header_cell_closed:contains(First)",
+            "column: should display one closed header with 'First'"
+        );
+        assert.containsOnce(
+            pivot,
+            "thead .o_pivot_header_cell_closed:contains(Second)",
+            "column: should display one closed header with 'Second'"
+        );
+
+        assert.containsOnce(
+            pivot,
+            "tbody .o_pivot_header_cell_opened",
+            "row: should have one opened header"
+        );
+        assert.containsOnce(
+            pivot,
+            "tbody .o_pivot_header_cell_closed:contains(xphone)",
+            "row: should display one closed header with 'xphone'"
+        );
+        assert.containsOnce(
+            pivot,
+            "tbody .o_pivot_header_cell_closed:contains(xpad)",
+            "row: should display one closed header with 'xpad'"
+        );
+
+        assert.strictEqual(
+            pivot.el.querySelector("tbody tr").querySelectorAll("td")[2].innerText,
+            "32",
+            "selected measure should be foo, with total 32"
+        );
+    });
+
+    QUnit.test("clear table cells data after closeGroup", async function (assert) {
+        assert.expect(2);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: "<pivot/>",
+            groupBy: ["product_id"],
+        });
+
+        await click(pivot.el.querySelector("thead .o_pivot_header_cell_closed"));
+        await click(pivot.el.querySelector("thead .o_dropdown_menu .o_dropdown_toggler"));
+        await click(
+            pivot.el.querySelectorAll("thead .o_dropdown_menu .o_dropdown_menu .o_dropdown_item")[3]
+        );
+
+        // close and reopen row groupings after changing value
+        serverData.models.partner.records.find((r) => r.product_id === 37).date = "2016-10-27";
+
+        await click(pivot.el.querySelector("tbody .o_pivot_header_cell_opened"));
+        await click(pivot.el.querySelector("tbody .o_pivot_header_cell_closed"));
+        await click(pivot.el.querySelectorAll("tbody .o_dropdown_menu .o_dropdown_item")[4]);
+        assert.strictEqual(pivot.el.querySelectorAll(".o_pivot_cell_value")[4].innerText, ""); // xphone December 2016
+
+        // invert axis, and reopen column groupings
+        await click(pivot.el.querySelector(".o_cp_bottom_left .o_pivot_flip_button"));
+        await click(pivot.el.querySelector("thead .o_pivot_header_cell_opened"));
+        await click(pivot.el.querySelector("thead .o_pivot_header_cell_closed"));
+        await click(pivot.el.querySelectorAll("thead .o_dropdown_menu .o_dropdown_item")[4]);
+        assert.strictEqual(pivot.el.querySelectorAll(".o_pivot_cell_value")[3].innerText, ""); // December 2016 xphone
+    });
+
+    QUnit.test("correctly group data after flip (1)", async function (assert) {
+        assert.expect(4);
+
+        serverData.views = {
+            "partner,false,pivot": "<pivot/>",
+            "partner,false,search": `<search><filter name="bayou" string="Bayou" domain="[(1,'=',1)]"/></search>`,
+            "partner,false,list": '<tree><field name="foo"/></tree>',
+            "partner,false,form": '<form><field name="foo"/></form>',
+        };
+
+        const webClient = await createWebClient({ serverData });
+
+        await doAction(webClient, {
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            views: [[false, "pivot"]],
+            context: { group_by: ["product_id"] },
+        });
+
+        assert.deepEqual(
+            [...webClient.el.querySelectorAll("tbody th")].map((e) => e.innerText),
+            ["Total", "xphone", "xpad"]
+        );
+
+        // flip axis
+        await click(webClient.el.querySelector(".o_pivot_flip_button"));
+
+        assert.deepEqual(
+            [...webClient.el.querySelectorAll("tbody th")].map((e) => e.innerText),
+            ["Total"]
+        );
+
+        // select filter "Bayou" in control panel
+        await toggleFilterMenu(webClient);
+        await toggleMenuItem(webClient, "Bayou");
+
+        assert.deepEqual(
+            [...webClient.el.querySelectorAll("tbody th")].map((e) => e.innerText),
+            ["Total", "xphone", "xpad"]
+        );
+
+        // close row header "Total"
+        await click(webClient.el.querySelector("tbody .o_pivot_header_cell_opened"));
+
+        assert.deepEqual(
+            [...webClient.el.querySelectorAll("tbody th")].map((e) => e.innerText),
+            ["Total"]
+        );
+    });
+
+    QUnit.test("correctly group data after flip (2)", async function (assert) {
+        assert.expect(5);
+
+        serverData.views = {
+            "partner,false,pivot": "<pivot/>",
+            "partner,false,search": `<search><filter name="bayou" string="Bayou" domain="[(1,'=',1)]"/></search>`,
+            "partner,false,list": '<tree><field name="foo"/></tree>',
+            "partner,false,form": '<form><field name="foo"/></form>',
+        };
+
+        const webClient = await createWebClient({ serverData });
+
+        await doAction(webClient, {
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            views: [[false, "pivot"]],
+            context: { group_by: ["product_id"] },
+        });
+
+        assert.deepEqual(
+            [...webClient.el.querySelectorAll("tbody th")].map((e) => e.innerText),
+            ["Total", "xphone", "xpad"]
+        );
+
+        // select filter "Bayou" in control panel
+        await toggleFilterMenu(webClient);
+        await toggleMenuItem(webClient, "Bayou");
+
+        assert.deepEqual(
+            [...webClient.el.querySelectorAll("tbody th")].map((e) => e.innerText),
+            ["Total", "xphone", "xpad"]
+        );
+
+        // flip axis
+        await click(webClient.el.querySelector(".o_pivot_flip_button"));
+
+        assert.deepEqual(
+            [...webClient.el.querySelectorAll("tbody th")].map((e) => e.innerText),
+            ["Total"]
+        );
+
+        // unselect filter "Bayou" in control panel
+        await toggleFilterMenu(webClient);
+        await toggleMenuItem(webClient, "Bayou");
+
+        assert.deepEqual(
+            [...webClient.el.querySelectorAll("tbody th")].map((e) => e.innerText),
+            ["Total", "xphone", "xpad"]
+        );
+
+        // close row header "Total"
+        await click(webClient.el.querySelector("tbody .o_pivot_header_cell_opened"));
+
+        assert.deepEqual(
+            [...webClient.el.querySelectorAll("tbody th")].map((e) => e.innerText),
+            ["Total"]
+        );
+    });
+
+    QUnit.test("correctly uses pivot_ keys from the context (at reload)", async function (assert) {
+        assert.expect(8);
+
+        // in this test, we use "foo" as a measure
+        serverData.models.partner.fields.foo.store = true;
+        serverData.models.partner.fields.amount = {
+            string: "Amount",
+            type: "float",
+            group_operator: "sum",
+        };
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="date" interval="day" type="col"/>
+                    <field name="amount" type="measure"/>
+                </pivot>`,
+            searchViewArch: `
+                <search>
+                    <filter
+                        name="filter_with_context"
+                        string="My fake favorite"
+                        domain="[]"
+                        context="{
+                            'pivot_measures': ['foo'],
+                            'pivot_column_groupby': ['customer'],
+                            'pivot_row_groupby': ['product_id']
+                        }"
+                    />
+                </search>`,
+        });
+
+        assert.strictEqual(
+            pivot.el.querySelector("tbody tr").querySelectorAll("td.o_pivot_cell_value")[4]
+                .innerText,
+            "0.00",
+            "the active measure should be amount"
+        );
+
+        await toggleFilterMenu(pivot);
+        await toggleMenuItem(pivot, "My fake favorite");
+
+        assert.containsOnce(
+            pivot,
+            "thead .o_pivot_header_cell_opened",
+            "column: should have one opened header"
+        );
+        assert.containsOnce(
+            pivot,
+            "thead .o_pivot_header_cell_closed:contains(First)",
+            "column: should display one closed header with 'First'"
+        );
+        assert.containsOnce(
+            pivot,
+            "thead .o_pivot_header_cell_closed:contains(Second)",
+            "column: should display one closed header with 'Second'"
+        );
+
+        assert.containsOnce(
+            pivot,
+            "tbody .o_pivot_header_cell_opened",
+            "row: should have one opened header"
+        );
+        assert.containsOnce(
+            pivot,
+            "tbody .o_pivot_header_cell_closed:contains(xphone)",
+            "row: should display one closed header with 'xphone'"
+        );
+        assert.containsOnce(
+            pivot,
+            "tbody .o_pivot_header_cell_closed:contains(xpad)",
+            "row: should display one closed header with 'xpad'"
+        );
+
+        assert.strictEqual(
+            pivot.el.querySelector("tbody tr").querySelectorAll("td")[2].innerText,
+            "32",
+            "selected measure should be foo, with total 32"
+        );
+    });
+
+    QUnit.test("correctly use group_by key from the context", async function (assert) {
+        assert.expect(7);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="customer" type="col" />
+                    <field name="foo" type="measure" />
+                </pivot>`,
+            groupBy: ["product_id"],
+        });
+
+        assert.containsOnce(
+            pivot,
+            "thead .o_pivot_header_cell_opened",
+            "column: should have one opened header"
+        );
+        assert.containsOnce(
+            pivot,
+            "thead .o_pivot_header_cell_closed:contains(First)",
+            'column: should display one closed header with "First"'
+        );
+        assert.containsOnce(
+            pivot,
+            "thead .o_pivot_header_cell_closed:contains(Second)",
+            'column: should display one closed header with "Second"'
+        );
+
+        assert.containsOnce(
+            pivot,
+            "tbody .o_pivot_header_cell_opened",
+            "row: should have one opened header"
+        );
+        assert.containsOnce(
+            pivot,
+            "tbody .o_pivot_header_cell_closed:contains(xphone)",
+            'row: should display one closed header with "xphone"'
+        );
+        assert.containsOnce(
+            pivot,
+            "tbody .o_pivot_header_cell_closed:contains(xpad)",
+            'row: should display one closed header with "xpad"'
+        );
+
+        assert.strictEqual(
+            pivot.el.querySelector("tbody tr").querySelectorAll("td")[2].innerText,
+            "32",
+            "selected measure should be foo, with total 32"
+        );
+    });
+
+    QUnit.test(
+        "correctly uses pivot_row_groupby key with default groupBy from the context",
+        async function (assert) {
+            assert.expect(6);
+
+            serverData.models.partner.fields.amount = {
+                string: "Amount",
+                type: "float",
+                group_operator: "sum",
+            };
+
+            const pivot = await makeView({
+                type: "pivot",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <pivot>
+                        <field name="customer" type="col"/>
+                        <field name="date" interval="day" type="row"/>
+                    </pivot>`,
+                groupBy: ["customer"],
+                context: {
+                    pivot_row_groupby: ["product_id"],
+                },
+            });
+
+            assert.containsOnce(
+                pivot,
+                "thead .o_pivot_header_cell_opened",
+                "column: should have one opened header"
+            );
+            assert.containsOnce(
+                pivot,
+                "thead .o_pivot_header_cell_closed:contains(First)",
+                "column: should display one closed header with 'First'"
+            );
+            assert.containsOnce(
+                pivot,
+                "thead .o_pivot_header_cell_closed:contains(Second)",
+                "column: should display one closed header with 'Second'"
+            );
+
+            // With pivot_row_groupby, groupBy customer should replace and eventually display product_id
+            assert.containsOnce(
+                pivot,
+                "tbody .o_pivot_header_cell_opened",
+                "row: should have one opened header"
+            );
+            assert.containsOnce(
+                pivot,
+                "tbody .o_pivot_header_cell_closed:contains(xphone)",
+                "row: should display one closed header with 'xphone'"
+            );
+            assert.containsOnce(
+                pivot,
+                "tbody .o_pivot_header_cell_closed:contains(xpad)",
+                "row: should display one closed header with 'xpad'"
+            );
+        }
+    );
+
+    QUnit.test("pivot still handles __count__ measure", async function (assert) {
+        // for retro-compatibility reasons, the pivot view still handles
+        // '__count__' measure.
+        assert.expect(4);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: "<pivot></pivot>",
+            mockRPC(route, args) {
+                if (args.method === "read_group") {
+                    assert.deepEqual(
+                        args.kwargs.fields,
+                        ["__count"],
+                        "should make a read_group with field __count"
+                    );
+                }
+            },
+            context: {
+                pivot_measures: ["__count__"],
+            },
+        });
+
+        await click(pivot.el.querySelector(".o_cp_bottom_left button.o_dropdown_toggler"));
+        assert.containsOnce(pivot, ".o_cp_bottom_left .o_dropdown_item");
+        assert.strictEqual(
+            pivot.el.querySelector(".o_cp_bottom_left .o_dropdown_item").innerText,
+            "Count"
+        );
+        assert.hasClass(pivot.el.querySelector(".o_cp_bottom_left .o_dropdown_item"), "selected");
+    });
+
+    QUnit.test("not use a many2one as a measure by default", async function (assert) {
+        assert.expect(3);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="product_id"/>
+                    <field name="date" interval="month" type="col"/>
+                </pivot>`,
+        });
+        await click(pivot.el.querySelector(".o_cp_bottom_left button.o_dropdown_toggler"));
+        assert.containsOnce(pivot, ".o_cp_bottom_left .o_dropdown_item");
+        assert.strictEqual(
+            pivot.el.querySelector(".o_cp_bottom_left .o_dropdown_item").innerText,
+            "Count"
+        );
+        assert.hasClass(pivot.el.querySelector(".o_cp_bottom_left .o_dropdown_item"), "selected");
+    });
+
+    QUnit.test(
+        "use a many2one as a measure with specified additional measure",
+        async function (assert) {
+            assert.expect(3);
+
+            const pivot = await makeView({
+                type: "pivot",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <pivot>
+                        <field name="product_id"/>
+                        <field name="date" interval="month" type="col"/>
+                    </pivot>`,
+                additionalMeasures: ["product_id"],
+            });
+            await click(pivot.el.querySelector(".o_cp_bottom_left button.o_dropdown_toggler"));
+            assert.containsN(pivot, ".o_cp_bottom_left .o_dropdown_item", 2);
+            assert.strictEqual(
+                pivot.el.querySelector(".o_cp_bottom_left .o_dropdown_item").innerText,
+                "Product"
+            );
+            assert.doesNotHaveClass(
+                pivot.el.querySelector(".o_cp_bottom_left .o_dropdown_item"),
+                "selected"
+            );
+        }
+    );
+
+    QUnit.test("pivot view with many2one field as a measure", async function (assert) {
+        assert.expect(1);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="product_id" type="measure"/>
+                    <field name="date" interval="month" type="col"/>
+                </pivot>`,
+        });
+
+        assert.strictEqual(
+            pivot.el.querySelector("table tbody tr").innerText.replace(/\s/g, ""),
+            "Total2112",
+            "should display product_id count as measure"
+        );
+    });
+
+    QUnit.test("m2o as measure, drilling down into data", async function (assert) {
+        assert.expect(1);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="product_id" type="measure"/>
+                </pivot>`,
+        });
+        await click(pivot.el.querySelector("tbody .o_pivot_header_cell_closed"));
+        // click on date by month
+        await click(pivot.el.querySelector("tbody .o_dropdown_menu .o_dropdown_toggler"));
+        await click(
+            pivot.el.querySelectorAll("tbody .o_dropdown_menu .o_dropdown_menu .o_dropdown_item")[3]
+        );
+
+        assert.strictEqual(
+            [...pivot.el.querySelectorAll(".o_pivot_cell_value")].map((c) => c.innerText).join(""),
+            "2211",
+            "should have loaded the proper data"
+        );
+    });
+
+    QUnit.test(
+        "pivot view with same many2one field as a measure and grouped by",
+        async function (assert) {
+            assert.expect(1);
+
+            const pivot = await makeView({
+                type: "pivot",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <pivot>
+                        <field name="product_id" type="row"/>
+                    </pivot>`,
+                additionalMeasures: ["product_id"],
+            });
+
+            await click(pivot.el.querySelector(".o_cp_bottom_left button.o_dropdown_toggler"));
+            await click(pivot.el.querySelector(".o_cp_bottom_left .o_dropdown_item"));
+            assert.strictEqual(
+                [...pivot.el.querySelectorAll(".o_pivot_cell_value")]
+                    .map((c) => c.innerText)
+                    .join(""),
+                "421131",
+                "should have loaded the proper data"
+            );
+        }
+    );
+
+    QUnit.test(
+        "pivot view with same many2one field as a measure and grouped by (and drill down)",
+        async function (assert) {
+            assert.expect(1);
+
+            const pivot = await makeView({
+                type: "pivot",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <pivot>
+                        <field name="product_id" type="measure"/>
+                    </pivot>`,
+            });
+
+            await click(pivot.el.querySelector("tbody .o_pivot_header_cell_closed"));
+            await click(pivot.el.querySelectorAll("tbody .o_dropdown_item")[4]);
+
+            assert.strictEqual(
+                [...pivot.el.querySelectorAll(".o_pivot_cell_value")]
+                    .map((c) => c.innerText)
+                    .join(""),
+                "211",
+                "should have loaded the proper data"
+            );
+        }
+    );
+
+    QUnit.test("Row and column groupbys plus a domain", async function (assert) {
+        assert.expect(3);
+
+        const expectedContext = {
+            group_by: [],
+            pivot_column_groupby: ["customer"],
+            pivot_measures: ["foo"],
+            pivot_row_groupby: ["product_id"],
+        };
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+            searchViewArch: `
+                <search>
+                    <filter name="some_filter" string="Some Filter" domain="[('product_id', '=', 41)]"/>
+                </search>`,
+            mockRPC(route, args) {
+                if (args.method === "create_or_replace") {
+                    assert.deepEqual(args.args[0].context, expectedContext);
+                    return true;
+                }
+            },
+        });
+
+        // Set a column groupby
+        await click(pivot.el.querySelector("thead .o_pivot_header_cell_closed"));
+        await click(pivot.el.querySelectorAll("thead .o_dropdown_item")[1]);
+
+        // Set a Row groupby
+        await click(pivot.el.querySelector("tbody .o_pivot_header_cell_closed"));
+        await click(pivot.el.querySelectorAll("tbody .o_dropdown_item")[4]);
+
+        // Add a filter
+        await toggleFilterMenu(pivot);
+        await toggleMenuItem(pivot, "Some Filter");
+
+        assert.containsOnce(
+            pivot,
+            "tbody .o_pivot_header_cell_closed",
+            "There should be only one product line because of the domain"
+        );
+        assert.strictEqual(
+            pivot.el.querySelector("tbody .o_pivot_header_cell_closed").innerText,
+            "xpad",
+            "The product should be the right one"
+        );
+
+        // Save current search to favorite
+        await toggleFavoriteMenu(pivot);
+        await toggleSaveFavorite(pivot);
+        await editFavoriteName(pivot, "My favorite");
+        await saveFavorite(pivot);
+    });
+
+    QUnit.test(
+        "parallel data loading should discard all but the last one",
+        async function (assert) {
+            assert.expect(6);
+
+            let def;
+            const pivot = await makeView({
+                type: "pivot",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <pivot>
+                        <field name="foo" type="measure"/>
+                    </pivot>`,
+                searchViewArch: `
+                    <search>
+                        <filter string="Product" name="product_id" context="{'group_by':'product_id'}"/>
+                        <filter string="Customer" name="customer" context="{'group_by':'customer'}"/>
+                    </search>`,
+                mockRPC(route, args) {
+                    if (args.method === "read_group") {
+                        return Promise.resolve(def);
+                    }
+                },
+            });
+
+            assert.containsOnce(pivot, ".o_pivot_cell_value", "should have 1 cell initially");
+            assert.containsOnce(pivot, "tbody tr", "should have 1 row initially");
+
+            def = makeDeferred();
+            await toggleGroupByMenu(pivot);
+            await toggleMenuItem(pivot, "Product");
+            await toggleMenuItem(pivot, "Customer");
+
+            assert.containsOnce(pivot, ".o_pivot_cell_value", "should still have 1 cell");
+            assert.containsOnce(pivot, "tbody tr", "should still have 1 row");
+
+            await def.resolve();
+            await nextTick();
+
+            assert.containsN(pivot, ".o_pivot_cell_value", 6, "should have 6 cells");
+            assert.containsN(pivot, "tbody tr", 6, "should have 6 rows");
+        }
+    );
+
+    QUnit.test("pivot measures should be alphabetically sorted", async function (assert) {
+        assert.expect(1);
+
+        // It's important to compare capitalized and lowercased words
+        // to be sure the sorting is effective with both of them
+        serverData.models.partner.fields.bouh = {
+            string: "bouh",
+            type: "integer",
+            group_operator: "sum",
+        };
+        serverData.models.partner.fields.modd = {
+            string: "modd",
+            type: "integer",
+            group_operator: "sum",
+        };
+        serverData.models.partner.fields.zip = {
+            string: "Zip",
+            type: "integer",
+            group_operator: "sum",
+        };
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="zip" type="measure"/>
+                    <field name="foo" type="measure"/>
+                    <field name="bouh" type="measure"/>
+                    <field name="modd" type="measure"/>
+                </pivot>`,
+        });
+
+        await click(pivot.el.querySelector(".o_cp_bottom_left button.o_dropdown_toggler"));
+        assert.strictEqual(
+            [...pivot.el.querySelectorAll(".o_cp_bottom_left .o_dropdown_item")]
+                .map((i) => i.innerText)
+                .join(""),
+            "bouhFoomoddZipCount"
+        );
+    });
+
+    QUnit.test("pivot view should use default order for auto sorting", async function (assert) {
+        assert.expect(1);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot default_order="foo asc">
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+        });
+
+        assert.hasClass(
+            pivot.el.querySelector("thead th.o_pivot_measure_row"),
+            "o_pivot_sort_order_asc"
+        );
+    });
+
+    QUnit.test("pivot view can be flipped", async function (assert) {
+        assert.expect(5);
+
+        var rpcCount = 0;
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="product_id" type="row"/>
+                </pivot>`,
+            mockRPC() {
+                rpcCount++;
+            },
+        });
+
+        assert.containsN(
+            pivot,
+            "tbody tr",
+            3,
+            "should have 3 rows: 1 for the open header, and 2 for data"
+        );
+        let values = ["4", "1", "3"];
+        assert.strictEqual(getCurrentValues(pivot), values.join());
+
+        rpcCount = 0;
+        await click(pivot.el.querySelector(".o_pivot_flip_button"));
+
+        assert.strictEqual(rpcCount, 0, "should not have done any rpc");
+        assert.containsOnce(pivot, "tbody tr", "should have 1 rows: 1 for the main header");
+
+        values = ["1", "3", "4"];
+        assert.strictEqual(getCurrentValues(pivot), values.join());
+    });
+
+    QUnit.test("rendering of pivot view with comparison", async function (assert) {
+        assert.expect(8);
+
+        serverData.models.partner.records[0].date = "2016-12-15";
+        serverData.models.partner.records[1].date = "2016-12-17";
+        serverData.models.partner.records[2].date = "2016-11-22";
+        serverData.models.partner.records[3].date = "2016-11-03";
+
+        patchDate(2016, 11, 20, 1, 0, 0);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="date" interval="month" type="col"/>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+            searchViewArch: `
+                <search>
+                    <filter name="date_filter" date="date" domain="[]" default_period='last_year'/>
+                </search>`,
+            additionalMeasures: ["product_id"],
+            context: { search_default_date_filter: 1 },
+            mockRPC(route, args) {
+                if (args.method === "create_or_replace") {
+                    assert.deepEqual(args.args[0].context, {
+                        pivot_measures: ["__count"],
+                        pivot_column_groupby: [],
+                        pivot_row_groupby: ["product_id"],
+                        group_by: [],
+                        comparison: {
+                            comparisonId: "previous_period",
+                            comparisonRange: [
+                                "&",
+                                ["date", ">=", "2016-11-01"],
+                                ["date", "<=", "2016-11-30"],
+                            ],
+                            comparisonRangeDescription: "November 2016",
+                            fieldDescription: "Date",
+                            fieldName: "date",
+                            range: [
+                                "&",
+                                ["date", ">=", "2016-12-01"],
+                                ["date", "<=", "2016-12-31"],
+                            ],
+                            rangeDescription: "December 2016",
+                        },
+                    });
+                    return true;
+                }
+            },
+        });
+
+        // with no data
+        await toggleComparisonMenu(pivot);
+        await toggleMenuItem(pivot, "Date: Previous period");
+
+        assert.containsOnce(pivot, "p.o_view_nocontent_empty_folder");
+
+        await toggleFilterMenu(pivot);
+        await toggleMenuItem(pivot, "Date");
+        await toggleMenuItemOption(pivot, "Date", "December");
+        await toggleMenuItemOption(pivot, "Date", "2016");
+        await toggleMenuItemOption(pivot, "Date", "2015");
+
+        assert.containsN(
+            pivot,
+            ".o_pivot thead tr:last th",
+            9,
+            "last header row should contains 9 cells (3*[December 2016, November 2016, Variation]"
+        );
+        let values = ["19", "0", "-100%", "0", "13", "100%", "19", "13", "-31.58%"];
+        assert.strictEqual(getCurrentValues(pivot), values.join());
+
+        // with data, with row groupby
+        await click(pivot.el.querySelector("tbody .o_pivot_header_cell_closed"));
+        await click(pivot.el.querySelectorAll("tbody .o_dropdown_menu .o_dropdown_item")[4]);
+        values = [
+            "19",
+            "0",
+            "-100%",
+            "0",
+            "13",
+            "100%",
+            "19",
+            "13",
+            "-31.58%",
+            "19",
+            "0",
+            "-100%",
+            "0",
+            "1",
+            "100%",
+            "19",
+            "1",
+            "-94.74%",
+            "0",
+            "12",
+            "100%",
+            "0",
+            "12",
+            "100%",
+        ];
+        assert.strictEqual(getCurrentValues(pivot), values.join());
+
+        await click(pivot.el.querySelector(".o_cp_bottom_left button.o_dropdown_toggler"));
+        await click(
+            pivot.el.querySelectorAll(".o_cp_bottom_left .o_dropdown_menu .o_dropdown_item")[0]
+        );
+        await click(
+            pivot.el.querySelectorAll(".o_cp_bottom_left .o_dropdown_menu .o_dropdown_item")[1]
+        );
+        values = [
+            "1",
+            "0",
+            "-100%",
+            "0",
+            "2",
+            "100%",
+            "1",
+            "2",
+            "100%",
+            "1",
+            "0",
+            "-100%",
+            "0",
+            "1",
+            "100%",
+            "1",
+            "1",
+            "0%",
+            "0",
+            "1",
+            "100%",
+            "0",
+            "1",
+            "100%",
+        ];
+        assert.strictEqual(getCurrentValues(pivot), values.join());
+
+        await click(
+            pivot.el.querySelectorAll(".o_cp_bottom_left .o_dropdown_menu .o_dropdown_item")[2]
+        );
+        await click(
+            pivot.el.querySelectorAll(".o_cp_bottom_left .o_dropdown_menu .o_dropdown_item")[1]
+        );
+        values = [
+            "2",
+            "0",
+            "-100%",
+            "0",
+            "2",
+            "100%",
+            "2",
+            "2",
+            "0%",
+            "2",
+            "0",
+            "-100%",
+            "0",
+            "1",
+            "100%",
+            "2",
+            "1",
+            "-50%",
+            "0",
+            "1",
+            "100%",
+            "0",
+            "1",
+            "100%",
+        ];
+        assert.strictEqual(getCurrentValues(pivot), values.join());
+
+        await click(pivot.el.querySelector("thead .o_pivot_header_cell_opened"));
+        values = ["2", "2", "0%", "2", "1", "-50%", "0", "1", "100%"];
+        assert.strictEqual(getCurrentValues(pivot), values.join());
+
+        await toggleFavoriteMenu(pivot);
+        await toggleSaveFavorite(pivot);
+        await editFavoriteName(pivot, "Fav");
+        await saveFavorite(pivot);
+    });
+
+    QUnit.test("export data in excel with comparison", async function (assert) {
+        assert.expect(12);
+
+        serverData.models.partner.records[0].date = "2016-12-15";
+        serverData.models.partner.records[1].date = "2016-12-17";
+        serverData.models.partner.records[2].date = "2016-11-22";
+        serverData.models.partner.records[3].date = "2016-11-03";
+
+        patchDate(2016, 11, 20, 1, 0, 0);
+
+        mockDownload(({ url, data }) => {
+            data = JSON.parse(data.data);
+            for (const l of data.col_group_headers) {
+                const titles = l.map((o) => o.title);
+                assert.step(JSON.stringify(titles));
+            }
+            const measures = data.measure_headers.map((o) => o.title);
+            assert.step(JSON.stringify(measures));
+            const origins = data.origin_headers.map((o) => o.title);
+            assert.step(JSON.stringify(origins));
+            assert.step(String(data.measure_count));
+            assert.step(String(data.origin_count));
+            const valuesLength = data.rows.map((o) => o.values.length);
+            assert.step(JSON.stringify(valuesLength));
+            assert.strictEqual(
+                url,
+                "/web/pivot/export_xlsx",
+                "should call get_file with correct parameters"
+            );
+            return Promise.resolve();
+        });
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="date" interval="month" type="col"/>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+            searchViewArch: `
+                <search>
+                    <filter name="date_filter" date="date" domain="[]" default_period='antepenultimate_month'/>
+                </search>`,
+            context: { search_default_date_filter: 1 },
+        });
+
+        // open comparison menu
+        await toggleComparisonMenu(pivot);
+        // compare October 2016 to September 2016
+        await toggleMenuItem(pivot, "Date: Previous period");
+
+        // With the data above, the time ranges contain no record.
+        assert.containsOnce(pivot, "p.o_view_nocontent_empty_folder", "there should be no data");
+        // export data should be impossible since the pivot buttons
+        // are deactivated (exception: the 'Measures' button).
+        assert.ok(
+            pivot.el
+                .querySelector(".o_control_panel button.o_pivot_download")
+                .getAttribute("disabled")
+        );
+
+        await toggleFilterMenu(pivot);
+        await toggleMenuItem(pivot, "Date");
+        await toggleMenuItemOption(pivot, "Date", "December");
+        await toggleMenuItemOption(pivot, "Date", "October");
+        assert.notOk(
+            pivot.el
+                .querySelector(".o_control_panel button.o_pivot_download")
+                .getAttribute("disabled")
+        );
+
+        // With the data above, the time ranges contain some records.
+        // export data. Should execute 'get_file'
+        await click(pivot.el.querySelector(".o_control_panel button.o_pivot_download"));
+
+        assert.verifySteps([
+            // col group headers
+            '["Total",""]',
+            '["November 2016","December 2016"]',
+            // measure headers
+            '["Foo","Foo","Foo"]',
+            // origin headers
+            '["November 2016","December 2016","Variation","November 2016","December 2016"' +
+                ',"Variation","November 2016","December 2016","Variation"]',
+            // number of 'measures'
+            "1",
+            // number of 'origins'
+            "2",
+            // rows values length
+            "[9]",
+        ]);
+    });
+
+    QUnit.test("rendering pivot view with comparison and count measure", async function (assert) {
+        assert.expect(2);
+
+        let mockMock = false;
+        let nbReadGroup = 0;
+
+        serverData.models.partner.records[0].date = "2016-12-15";
+        serverData.models.partner.records[1].date = "2016-12-17";
+        serverData.models.partner.records[2].date = "2016-12-22";
+        serverData.models.partner.records[3].date = "2016-12-03";
+
+        patchDate(2016, 11, 20, 1, 0, 0);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: '<pivot><field name="customer" type="row"/></pivot>',
+            searchViewArch: `
+                <search>
+                    <filter name="date_filter" date="date" domain="[]" default_period='this_month'/>
+                </search>`,
+            context: { search_default_date_filter: 1 },
+            mockRPC(route, args) {
+                if (args.method === "read_group" && mockMock) {
+                    nbReadGroup++;
+                    if (nbReadGroup === 4) {
+                        // this modification is necessary because mockReadGroup does not
+                        // properly reflect the server response when there is no record
+                        // and a groupby list of length at least one.
+                        return Promise.resolve([{}]);
+                    }
+                }
+            },
+        });
+
+        mockMock = true;
+
+        // compare December 2016 to November 2016
+        await toggleComparisonMenu(pivot);
+        await toggleMenuItem(pivot, "Date: Previous period");
+
+        const values = ["0", "4", "100%", "0", "2", "100%", "0", "2", "100%"];
+        assert.strictEqual(getCurrentValues(pivot), values.join(","));
+        assert.containsN(
+            pivot,
+            ".o_pivot_header_cell_closed",
+            3,
+            "there should be exactly three closed header ('Total','First', 'Second')"
+        );
+    });
+
+    QUnit.test(
+        "can sort a pivot view with comparison by clicking on header",
+        async function (assert) {
+            assert.expect(6);
+
+            serverData.models.partner.records[0].date = "2016-12-15";
+            serverData.models.partner.records[1].date = "2016-12-17";
+            serverData.models.partner.records[2].date = "2016-11-22";
+            serverData.models.partner.records[3].date = "2016-11-03";
+
+            patchDate(2016, 11, 20, 1, 0, 0);
+            const pivot = await makeView({
+                type: "pivot",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <pivot>
+                        <field name="date" interval="day" type="row"/>
+                        <field name="company_type" type="col"/>
+                        <field name="foo" type="measure"/>
+                    </pivot>`,
+                searchViewArch: `
+                    <search>
+                        <filter name="date_filter" date="date" domain="[]" default_period='this_month'/>
+                    </search>`,
+                additionalMeasures: ["product_id"],
+                context: { search_default_date_filter: 1 },
+            });
+
+            // compare December 2016 to November 2016
+            await toggleComparisonMenu(pivot);
+            await toggleMenuItem(pivot, "Date: Previous period");
+
+            // initial sanity check
+            let values = [
+                "17",
+                "12",
+                "-29.41%",
+                "2",
+                "1",
+                "-50%",
+                "19",
+                "13",
+                "-31.58%",
+                "17",
+                "0",
+                "-100%",
+                "17",
+                "0",
+                "-100%",
+                "2",
+                "0",
+                "-100%",
+                "2",
+                "0",
+                "-100%",
+                "0",
+                "12",
+                "100%",
+                "0",
+                "12",
+                "100%",
+                "0",
+                "1",
+                "100%",
+                "0",
+                "1",
+                "100%",
+            ];
+            assert.strictEqual(getCurrentValues(pivot), values.join());
+
+            // click on 'Foo' in column Total/Company (should sort by the period of interest, ASC)
+            await click(pivot.el.querySelector(".o_pivot_measure_row"));
+            values = [
+                "17",
+                "12",
+                "-29.41%",
+                "2",
+                "1",
+                "-50%",
+                "19",
+                "13",
+                "-31.58%",
+                "2",
+                "0",
+                "-100%",
+                "2",
+                "0",
+                "-100%",
+                "0",
+                "12",
+                "100%",
+                "0",
+                "12",
+                "100%",
+                "0",
+                "1",
+                "100%",
+                "0",
+                "1",
+                "100%",
+                "17",
+                "0",
+                "-100%",
+                "17",
+                "0",
+                "-100%",
+            ];
+            assert.strictEqual(getCurrentValues(pivot), values.join());
+
+            // click again on 'Foo' in column Total/Company (should sort by the period of interest, DESC)
+            await click(pivot.el.querySelector(".o_pivot_measure_row"));
+            values = [
+                "17",
+                "12",
+                "-29.41%",
+                "2",
+                "1",
+                "-50%",
+                "19",
+                "13",
+                "-31.58%",
+                "17",
+                "0",
+                "-100%",
+                "17",
+                "0",
+                "-100%",
+                "2",
+                "0",
+                "-100%",
+                "2",
+                "0",
+                "-100%",
+                "0",
+                "12",
+                "100%",
+                "0",
+                "12",
+                "100%",
+                "0",
+                "1",
+                "100%",
+                "0",
+                "1",
+                "100%",
+            ];
+            assert.strictEqual(getCurrentValues(pivot), values.join());
+
+            // click on 'This Month' in column Total/Individual/Foo
+            await click(pivot.el.querySelectorAll(".o_pivot_origin_row")[3]);
+            values = [
+                "17",
+                "12",
+                "-29.41%",
+                "2",
+                "1",
+                "-50%",
+                "19",
+                "13",
+                "-31.58%",
+                "17",
+                "0",
+                "-100%",
+                "17",
+                "0",
+                "-100%",
+                "0",
+                "12",
+                "100%",
+                "0",
+                "12",
+                "100%",
+                "0",
+                "1",
+                "100%",
+                "0",
+                "1",
+                "100%",
+                "2",
+                "0",
+                "-100%",
+                "2",
+                "0",
+                "-100%",
+            ];
+            assert.strictEqual(getCurrentValues(pivot), values.join());
+
+            // click on 'Previous Period' in column Total/Individual/Foo
+            await click(pivot.el.querySelectorAll(".o_pivot_origin_row")[4]);
+            values = [
+                "17",
+                "12",
+                "-29.41%",
+                "2",
+                "1",
+                "-50%",
+                "19",
+                "13",
+                "-31.58%",
+                "17",
+                "0",
+                "-100%",
+                "17",
+                "0",
+                "-100%",
+                "2",
+                "0",
+                "-100%",
+                "2",
+                "0",
+                "-100%",
+                "0",
+                "12",
+                "100%",
+                "0",
+                "12",
+                "100%",
+                "0",
+                "1",
+                "100%",
+                "0",
+                "1",
+                "100%",
+            ];
+            assert.strictEqual(getCurrentValues(pivot), values.join());
+
+            // click on 'Variation' in column Total/Foo
+            await click(pivot.el.querySelectorAll(".o_pivot_origin_row")[8]);
+            values = [
+                "17",
+                "12",
+                "-29.41%",
+                "2",
+                "1",
+                "-50%",
+                "19",
+                "13",
+                "-31.58%",
+                "17",
+                "0",
+                "-100%",
+                "17",
+                "0",
+                "-100%",
+                "2",
+                "0",
+                "-100%",
+                "2",
+                "0",
+                "-100%",
+                "0",
+                "12",
+                "100%",
+                "0",
+                "12",
+                "100%",
+                "0",
+                "1",
+                "100%",
+                "0",
+                "1",
+                "100%",
+            ];
+            assert.strictEqual(getCurrentValues(pivot), values.join());
+        }
+    );
+
+    QUnit.test("Click on the measure list but not on a menu item", async function (assert) {
+        assert.expect(4);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            // have at least a measure to have a separator in the Measures dropdown:
+            //
+            // Foo
+            // -----
+            // Count
+            arch: `<pivot><field name="foo" type="measure"/></pivot>`,
+        });
+
+        assert.containsNone(pivot, ".o_cp_bottom_left .o_dropdown_menu");
+
+        // open the "Measures" menu
+        await click(pivot.el.querySelector(".o_cp_bottom_left .o_dropdown_toggler"));
+        assert.containsOnce(pivot, ".o_cp_bottom_left .o_dropdown_menu");
+
+        // click on the divider in the "Measures" menu does not crash
+        await click(pivot.el.querySelector(".o_cp_bottom_left .o_dropdown_menu .dropdown-divider"));
+        // the menu should still be open
+        assert.containsOnce(pivot, ".o_cp_bottom_left .o_dropdown_menu");
+
+        // click on the measure list but not on a menu item or the separator
+        await click(pivot.el.querySelector(".o_cp_bottom_left .o_dropdown_menu"));
+        // the menu should still be open
+        assert.containsOnce(pivot, ".o_cp_bottom_left .o_dropdown_menu");
+    });
+
+    QUnit.test(
+        "Navigation list view for a group and back with breadcrumbs",
+        async function (assert) {
+            assert.expect(16);
+
+            serverData.views = {
+                "partner,false,pivot": `
+                    <pivot>
+                        <field name="customer" type="row"/>
+                    </pivot>`,
+                "partner,false,search": `
+                    <search>
+                        <filter name="bayou" string="Bayou" domain="[('foo','=', 12)]"/>
+                    </search>`,
+                "partner,false,list": '<tree><field name="foo"/></tree>',
+                "partner,false,form": '<form><field name="foo"/></form>',
+            };
+
+            let readGroupCount = 0;
+            const mockRPC = (route, args) => {
+                if (args.method === "read_group") {
+                    assert.step("read_group");
+                    const domain = args.kwargs.domain;
+                    if ([0, 1].indexOf(readGroupCount) !== -1) {
+                        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"
+                        );
+                    }
+                    readGroupCount++;
+                }
+                if (route === "/web/dataset/search_read") {
+                    assert.step("search_read");
+                    const domain = args.domain;
+                    assert.deepEqual(
+                        domain,
+                        ["&", ["customer", "=", 1], ["foo", "=", 12]],
+                        "list domain is correct"
+                    );
+                }
+            };
+
+            const webClient = await createWebClient({ serverData, mockRPC });
+
+            await doAction(webClient, {
+                res_model: "partner",
+                type: "ir.actions.act_window",
+                views: [[false, "pivot"]],
+            });
+
+            await toggleFilterMenu(webClient);
+            await toggleMenuItem(webClient, 0);
+            await nextTick();
+
+            await click(webClient.el.querySelectorAll(".o_pivot_cell_value")[1]);
+            await legacyExtraNextTick();
+
+            assert.containsOnce(webClient, ".o_list_view");
+
+            await click(
+                webClient.el.querySelector(".o_control_panel ol.breadcrumb li.breadcrumb-item")
+            );
+
+            assert.verifySteps([
+                "read_group",
+                "read_group",
+                "read_group",
+                "read_group",
+                "search_read",
+                "read_group",
+                "read_group",
+            ]);
+        }
+    );
+
+    QUnit.test(
+        "Cell values are kept when flippin a pivot view in comparison mode",
+        async function (assert) {
+            assert.expect(2);
+
+            serverData.models.partner.records[0].date = "2016-12-15";
+            serverData.models.partner.records[1].date = "2016-12-17";
+            serverData.models.partner.records[2].date = "2016-11-22";
+            serverData.models.partner.records[3].date = "2016-11-03";
+
+            patchDate(2016, 11, 20, 1, 0, 0);
+            const pivot = await makeView({
+                type: "pivot",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <pivot>
+                        <field name="date" interval="day" type="row"/>
+                        <field name="company_type" type="col"/>
+                        <field name="foo" type="measure"/>
+                    </pivot>`,
+                searchViewArch: `
+                    <search>
+                        <filter name="date_filter" date="date" domain="[]" default_period='this_month'/>
+                    </search>`,
+                additionalMeasures: ["product_id"],
+                context: { search_default_date_filter: 1 },
+            });
+
+            // compare December 2016 to November 2016
+            await toggleComparisonMenu(pivot);
+            await toggleMenuItem(pivot, "Date: Previous period");
+
+            // initial sanity check
+            let values = [
+                "17",
+                "12",
+                "-29.41%",
+                "2",
+                "1",
+                "-50%",
+                "19",
+                "13",
+                "-31.58%",
+                "17",
+                "0",
+                "-100%",
+                "17",
+                "0",
+                "-100%",
+                "2",
+                "0",
+                "-100%",
+                "2",
+                "0",
+                "-100%",
+                "0",
+                "12",
+                "100%",
+                "0",
+                "12",
+                "100%",
+                "0",
+                "1",
+                "100%",
+                "0",
+                "1",
+                "100%",
+            ];
+            assert.strictEqual(getCurrentValues(pivot), values.join());
+
+            // flip table
+            await click(pivot.el.querySelector(".o_pivot_flip_button"));
+
+            values = [
+                "17",
+                "0",
+                "-100%",
+                "2",
+                "0",
+                "-100%",
+                "0",
+                "12",
+                "100%",
+                "0",
+                "1",
+                "100%",
+                "19",
+                "13",
+                "-31.58%",
+                "17",
+                "0",
+                "-100%",
+                "0",
+                "12",
+                "100%",
+                "17",
+                "12",
+                "-29.41%",
+                "2",
+                "0",
+                "-100%",
+                "0",
+                "1",
+                "100%",
+                "2",
+                "1",
+                "-50%",
+            ];
+            assert.strictEqual(getCurrentValues(pivot), values.join());
+        }
+    );
+
+    QUnit.test("Flip then compare, table col groupbys are kept", async function (assert) {
+        assert.expect(6);
+
+        serverData.models.partner.records[0].date = "2016-12-15";
+        serverData.models.partner.records[1].date = "2016-12-17";
+        serverData.models.partner.records[2].date = "2016-11-22";
+        serverData.models.partner.records[3].date = "2016-11-03";
+
+        patchDate(2016, 11, 20, 1, 0, 0);
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="date" interval="day" type="row"/>
+                    <field name="company_type" type="col"/>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+            searchViewArch: `
+                <search>
+                    <filter name="date_filter" date="date" domain="[]" default_period='this_month'/>
+                </search>`,
+            additionalMeasures: ["product_id"],
+        });
+
+        assert.deepEqual(
+            [...pivot.el.querySelectorAll("thead th")].map((th) => th.innerText),
+            ["", "Total", "", "Company", "individual", "Foo", "Foo", "Foo"],
+            "The col headers should be as expected"
+        );
+        assert.deepEqual(
+            [...pivot.el.querySelectorAll("tbody th")].map((th) => th.innerText),
+            ["Total", "2016-12-15", "2016-12-17", "2016-11-22", "2016-11-03"],
+            "The row headers should be as expected"
+        );
+
+        // flip
+        await click(pivot.el.querySelector(".o_pivot_flip_button"));
+
+        assert.deepEqual(
+            [...pivot.el.querySelectorAll("thead th")].map((th) => th.innerText),
+            [
+                "",
+                "Total",
+                "",
+                "2016-12-15",
+                "2016-12-17",
+                "2016-11-22",
+                "2016-11-03",
+                "Foo",
+                "Foo",
+                "Foo",
+                "Foo",
+                "Foo",
+            ],
+            "The col headers should be as expected"
+        );
+        assert.deepEqual(
+            [...pivot.el.querySelectorAll("tbody th")].map((th) => th.innerText),
+            ["Total", "Company", "individual"],
+            "The row headers should be as expected"
+        );
+
+        // Filter on December 2016
+        await toggleFilterMenu(pivot);
+        await toggleMenuItem(pivot, "Date");
+        await toggleMenuItemOption(pivot, "Date", "December");
+
+        // compare December 2016 to November 2016
+        await toggleComparisonMenu(pivot);
+        await toggleMenuItem(pivot, "Date: Previous period");
+
+        assert.deepEqual(
+            [...pivot.el.querySelectorAll("thead th")].map((th) => th.innerText),
+            [
+                "",
+                "Total",
+                "",
+                "2016-11-22",
+                "2016-11-03",
+                "2016-12-15",
+                "2016-12-17",
+                "Foo",
+                "Foo",
+                "Foo",
+                "Foo",
+                "Foo",
+                "November 2016",
+                "December 2016",
+                "Variation",
+                "November 2016",
+                "December 2016",
+                "Variation",
+                "November 2016",
+                "December 2016",
+                "Variation",
+                "November 2016",
+                "December 2016",
+                "Variation",
+                "November 2016",
+                "December 2016",
+                "Variation",
+            ],
+            "The col headers should be as expected"
+        );
+        assert.deepEqual(
+            [...pivot.el.querySelectorAll("tbody th")].map((th) => th.innerText),
+            ["Total", "Company", "individual"],
+            "The row headers should be as expected"
+        );
+    });
+
+    QUnit.test(
+        "correctly compute group domain when a date field has false value",
+        async function (assert) {
+            assert.expect(1);
+
+            serverData.models.partner.records.forEach((r) => (r.date = false));
+
+            patchDate(2016, 11, 20, 1, 0, 0);
+
+            const fakeActionService = {
+                start() {
+                    return {
+                        doAction(action) {
+                            assert.deepEqual(action.domain, [["date", "=", false]]);
+                            return Promise.resolve(true);
+                        },
+                    };
+                },
+            };
+            serviceRegistry.add("action", fakeActionService, { force: true });
+
+            const pivot = await makeView({
+                type: "pivot",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <pivot o_enable_linking="1">
+                        <field name="date" interval="day" type="row"/>
+                    </pivot>`,
+            });
+
+            await click(pivot.el.querySelectorAll(".o_value")[1]);
+        }
+    );
+    QUnit.test(
+        "Does not identify 'false' with false as keys when creating group trees",
+        async function (assert) {
+            assert.expect(2);
+
+            serverData.models.partner.fields.favorite_animal = {
+                string: "Favorite animal",
+                type: "char",
+                store: true,
+            };
+            serverData.models.partner.records[0].favorite_animal = "Dog";
+            serverData.models.partner.records[1].favorite_animal = "false";
+            serverData.models.partner.records[2].favorite_animal = "Undefined";
+
+            patchDate(2016, 11, 20, 1, 0, 0);
+            const pivot = await makeView({
+                type: "pivot",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <pivot o_enable_linking="1">
+                        <field name="favorite_animal" type="row"/>
+                    </pivot>`,
+            });
+
+            assert.deepEqual(
+                [...pivot.el.querySelectorAll("thead th")].map((th) => th.innerText),
+                ["", "Total", "Count"],
+                "The col headers should be as expected"
+            );
+            assert.deepEqual(
+                [...pivot.el.querySelectorAll("tbody th")].map((th) => th.innerText),
+                ["Total", "Dog", "false", "Undefined", "Undefined"],
+                "The row headers should be as expected"
+            );
+        }
+    );
+
+    QUnit.test(
+        "group bys added via control panel and expand Header do not stack",
+        async function (assert) {
+            assert.expect(8);
+
+            const pivot = await makeView({
+                type: "pivot",
+                resModel: "partner",
+                serverData,
+                arch: `
+                    <pivot>
+                        <field name="foo" type="measure"/>
+                    </pivot>`,
+                additionalMeasures: ["product_id"],
+            });
+
+            assert.deepEqual(
+                [...pivot.el.querySelectorAll("thead th")].map((th) => th.innerText),
+                ["", "Total", "Foo"],
+                "The col headers should be as expected"
+            );
+            assert.deepEqual(
+                [...pivot.el.querySelectorAll("tbody th")].map((th) => th.innerText),
+                ["Total"],
+                "The row headers should be as expected"
+            );
+
+            // open group by menu and add new groupby
+            await toggleGroupByMenu(pivot);
+            await toggleAddCustomGroup(pivot);
+            await applyGroup(pivot);
+
+            assert.deepEqual(
+                [...pivot.el.querySelectorAll("thead th")].map((th) => th.innerText),
+                ["", "Total", "Foo"],
+                "The col headers should be as expected"
+            );
+            assert.deepEqual(
+                [...pivot.el.querySelectorAll("tbody th")].map((th) => th.innerText),
+                ["Total", "Company", "individual"],
+                "The row headers should be as expected"
+            );
+
+            // Set a Row groupby
+            await click(pivot.el, "tbody tr:nth-child(2) .o_pivot_header_cell_closed");
+            await click(pivot.el, "tbody .o_dropdown_menu .o_menu_item:nth-child(5)");
+
+            assert.deepEqual(
+                [...pivot.el.querySelectorAll("thead th")].map((th) => th.innerText),
+                ["", "Total", "Foo"],
+                "The col headers should be as expected"
+            );
+            assert.deepEqual(
+                [...pivot.el.querySelectorAll("tbody th")].map((th) => th.innerText),
+                ["Total", "Company", "xphone", "xpad", "individual"],
+                "The row headers should be as expected"
+            );
+
+            // open groupby menu generator and add a new groupby
+            await toggleGroupByMenu(pivot);
+            await toggleAddCustomGroup(pivot);
+            await selectGroup(pivot, "bar");
+            await applyGroup(pivot);
+
+            assert.deepEqual(
+                [...pivot.el.querySelectorAll("thead th")].map((th) => th.innerText),
+                ["", "Total", "Foo"],
+                "The col headers should be as expected"
+            );
+            assert.deepEqual(
+                [...pivot.el.querySelectorAll("tbody th")].map((th) => th.innerText),
+                ["Total", "Company", "true", "individual", "true", "Undefined"],
+                "The row headers should be as expected"
+            );
+        }
+    );
+
+    QUnit.test("display only one dropdown menu", async function (assert) {
+        assert.expect(1);
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+            additionalMeasures: ["product_id"],
+        });
+
+        // add a col groupby on Product
+        await click(pivot.el.querySelector("thead th.o_pivot_header_cell_closed"));
+        await click(pivot.el.querySelectorAll("thead .o_dropdown_menu .o_dropdown_item")[5]);
+
+        // Click on the two header dropdown togglers
+        await click(pivot.el.querySelectorAll("thead th.o_pivot_header_cell_closed")[0]);
+        await click(pivot.el.querySelectorAll("thead th.o_pivot_header_cell_closed")[1]);
+
+        assert.containsOnce(
+            pivot,
+            "thead .o_dropdown_menu",
+            "Only one dropdown should be displayed at a time"
+        );
+    });
+
+    QUnit.test("Server order is kept by default", async function (assert) {
+        assert.expect(1);
+
+        let isSecondReadGroup = false;
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="customer" type="row"/>
+                    <field name="foo" type="measure"/>
+                </pivot>`,
+            mockRPC(route, args) {
+                if (args.method === "read_group" && isSecondReadGroup) {
+                    return Promise.resolve([
+                        {
+                            customer: [2, "Second"],
+                            foo: 18,
+                            __count: 2,
+                            __domain: [["customer", "=", 2]],
+                        },
+                        {
+                            customer: [1, "First"],
+                            foo: 14,
+                            __count: 2,
+                            __domain: [["customer", "=", 1]],
+                        },
+                    ]);
+                }
+                isSecondReadGroup = true;
+            },
+        });
+
+        const values = [
+            "32", // Total Value
+            "18", // Second
+            "14", // First
+        ];
+        assert.strictEqual(getCurrentValues(pivot), values.join());
+    });
+
+    QUnit.test("pivot rendering with boolean field", async function (assert) {
+        assert.expect(4);
+
+        serverData.models.partner.fields.bar = {
+            string: "bar",
+            type: "boolean",
+            store: true,
+            searchable: true,
+            group_operator: "bool_or",
+        };
+        serverData.models.partner.records = [
+            { id: 1, bar: true, date: "2019-12-14" },
+            { id: 2, bar: false, date: "2019-05-14" },
+        ];
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `
+                <pivot>
+                    <field name="date" type="row" interval="day"/>
+                    <field name="bar" type="col"/>
+                    <field name="bar" string="SLA status Failed" type="measure"/>
+                </pivot>`,
+        });
+
+        assert.strictEqual(
+            $(pivot.el).find('tbody tr:contains("2019-12-14")').length,
+            1,
+            "There should be a first column"
+        );
+        assert.ok(
+            $(pivot.el).find('tbody tr:contains("2019-12-14") [type="checkbox"]').is(":checked"),
+            "first column contains checkbox and value should be ticked"
+        );
+        assert.strictEqual(
+            $(pivot.el).find('tbody tr:contains("2019-05-14")').length,
+            1,
+            "There should be a second column"
+        );
+        assert.notOk(
+            $(pivot.el).find('tbody tr:contains("2019-05-14") [type="checkbox"]').is(":checked"),
+            "second column should have checkbox that is not checked by default"
+        );
+    });
+
+    QUnit.test("empty pivot view with action helper", async function (assert) {
+        serverData.views = {
+            "partner,false,pivot": `
+                <pivot>
+                    <field name="product_id" type="measure"/>
+                    <field name="date" interval="month" type="col"/>
+                </pivot>`,
+            "partner,false,search": `
+                <search>
+                    <filter name="small_than_0" string="Small Than 0" domain="[('id', '&lt;', 0)]"/>
+                </search>`,
+        };
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            context: { search_default_small_than_0: true },
+            noContentHelp: '<p class="abc">click to add a foo</p>',
+            views: [[false, "search"]],
+        });
+
+        assert.containsOnce(pivot, ".o_view_nocontent .abc");
+        assert.containsNone(pivot, "table");
+
+        await removeFacet(pivot);
+
+        assert.containsNone(pivot, ".o_view_nocontent .abc");
+        assert.containsOnce(pivot, "table");
+    });
+
+    QUnit.test("empty pivot view with sample data", async function (assert) {
+        serverData.views = {
+            "partner,false,pivot": `
+                <pivot sample="1">
+                    <field name="product_id" type="measure"/>
+                    <field name="date" interval="month" type="col"/>
+                </pivot>`,
+            "partner,false,search": `
+                <search>
+                    <filter name="small_than_0" string="Small Than 0" domain="[('id', '&lt;', 0)]"/>
+                </search>`,
+        };
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            context: { search_default_small_than_0: true },
+            noContentHelp: '<p class="abc">click to add a foo</p>',
+            views: [[false, "search"]],
+        });
+
+        assert.hasClass(pivot.el, "o_view_sample_data");
+        assert.containsOnce(pivot, ".o_view_nocontent .abc");
+        assert.containsOnce(pivot, "table.o_sample_data_disabled");
+
+        await removeFacet(pivot);
+
+        assert.doesNotHaveClass(pivot.el, "o_view_sample_data");
+        assert.containsNone(pivot, ".o_view_nocontent .abc");
+        assert.containsOnce(pivot, "table");
+        assert.doesNotHaveClass(pivot.el.querySelector("table"), "o_sample_data_disabled");
+    });
+
+    QUnit.test("non empty pivot view with sample data", async function (assert) {
+        serverData.views = {
+            "partner,false,pivot": `
+                <pivot sample="1">
+                    <field name="product_id" type="measure"/>
+                    <field name="date" interval="month" type="col"/>
+                </pivot>`,
+            "partner,false,search": `
+                <search>
+                    <filter name="small_than_0" string="Small Than 0" domain="[('id', '&lt;', 0)]"/>
+                </search>`,
+        };
+
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            noContentHelp: '<p class="abc">click to add a foo</p>',
+            views: [[false, "search"]],
+        });
+
+        assert.doesNotHaveClass(pivot.el, "o_view_sample_data");
+        assert.containsNone(pivot, ".o_view_nocontent .abc");
+        assert.containsOnce(pivot, "table");
+        assert.doesNotHaveClass(pivot.el.querySelector("table"), "o_sample_data_disabled");
+
+        await toggleFilterMenu(pivot);
+        await toggleMenuItem(pivot, "Small Than 0");
+
+        assert.doesNotHaveClass(pivot.el, "o_view_sample_data");
+        assert.containsOnce(pivot, ".o_view_nocontent .abc");
+        assert.containsNone(pivot, "table");
+    });
+
+    QUnit.test("pivot is reloaded when leaving and coming back", async function (assert) {
+        serverData.views = {
+            "partner,false,pivot": `
+                <pivot>
+                    <field name="customer" type="row"/>
+                </pivot>`,
+            "partner,false,search": `<search/>`,
+            "partner,false,list": '<tree><field name="foo"/></tree>',
+        };
+
+        const mockRPC = (route, args) => {
+            assert.step(args.method || route);
+        };
+        const webClient = await createWebClient({ serverData, mockRPC });
+
+        await doAction(webClient, {
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            views: [
+                [false, "pivot"],
+                [false, "list"],
+            ],
+        });
+
+        assert.containsOnce(webClient, ".o_pivot_view");
+        assert.strictEqual(getCurrentValues(webClient), ["4", "2", "2"].join(","));
+
+        assert.verifySteps(["/web/webclient/load_menus", "load_views", "read_group", "read_group"]);
+
+        // switch to list view
+        await click(webClient.el.querySelector(".o_control_panel .o_switch_view.o_list"));
+        await legacyExtraNextTick();
+
+        assert.containsOnce(webClient, ".o_list_view");
+        assert.verifySteps(["/web/dataset/search_read"]);
+
+        // switch back to pivot
+        await click(webClient.el.querySelector(".o_control_panel .o_switch_view.o_pivot"));
+
+        assert.containsOnce(webClient, ".o_pivot_view");
+        assert.strictEqual(getCurrentValues(webClient), ["4", "2", "2"].join(","));
+
+        assert.verifySteps(["read_group", "read_group"]);
+    });
+
+    QUnit.test("expanded groups are kept when leaving and coming back", async function (assert) {
+        serverData.views = {
+            "partner,false,pivot": `
+                <pivot>
+                    <field name="customer" type="row"/>
+                </pivot>`,
+            "partner,false,search": `<search/>`,
+            "partner,false,list": '<tree><field name="foo"/></tree>',
+        };
+
+        const webClient = await createWebClient({ serverData });
+
+        await doAction(webClient, {
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            views: [
+                [false, "pivot"],
+                [false, "list"],
+            ],
+        });
+
+        assert.containsOnce(webClient, ".o_pivot_view");
+        assert.strictEqual(getCurrentValues(webClient), ["4", "2", "2"].join(","));
+
+        // drill down first row group (group by company_type)
+        await click(webClient.el.querySelector("tbody .o_pivot_header_cell_closed"));
+        await click(webClient.el.querySelector(".o_pivot .o_dropdown_menu .o_dropdown_item"));
+
+        assert.strictEqual(getCurrentValues(webClient), ["4", "2", "1", "1", "2"].join(","));
+
+        // switch to list view
+        await click(webClient.el.querySelector(".o_control_panel .o_switch_view.o_list"));
+        await legacyExtraNextTick();
+
+        assert.containsOnce(webClient, ".o_list_view");
+
+        // switch back to pivot
+        await click(webClient.el.querySelector(".o_control_panel .o_switch_view.o_pivot"));
+
+        assert.containsOnce(webClient, ".o_pivot_view");
+        assert.strictEqual(getCurrentValues(webClient), ["4", "2", "1", "1", "2"].join(","));
+    });
+
+    QUnit.test("sorted rows are kept when leaving and coming back", async function (assert) {
+        serverData.views = {
+            "partner,false,pivot": `
+                <pivot>
+                    <field name="foo" type="measure"/>
+                    <field name="product_id" type="row"/>
+                </pivot>`,
+            "partner,false,search": `<search/>`,
+            "partner,false,list": '<tree><field name="foo"/></tree>',
+        };
+
+        const webClient = await createWebClient({ serverData });
+
+        await doAction(webClient, {
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            views: [
+                [false, "pivot"],
+                [false, "list"],
+            ],
+        });
+
+        assert.containsOnce(webClient, ".o_pivot_view");
+        assert.strictEqual(getCurrentValues(webClient), ["32", "12", "20"].join(","));
+
+        // sort the first group
+        await click(webClient.el.querySelector("th.o_pivot_measure_row"));
+        await click(webClient.el.querySelector("th.o_pivot_measure_row"));
+
+        assert.strictEqual(getCurrentValues(webClient), ["32", "20", "12"].join(","));
+
+        // switch to list view
+        await click(webClient.el.querySelector(".o_control_panel .o_switch_view.o_list"));
+        await legacyExtraNextTick();
+
+        assert.containsOnce(webClient, ".o_list_view");
+
+        // switch back to pivot
+        await click(webClient.el.querySelector(".o_control_panel .o_switch_view.o_pivot"));
+
+        assert.containsOnce(webClient, ".o_pivot_view");
+        assert.strictEqual(getCurrentValues(webClient), ["32", "20", "12"].join(","));
+    });
+
+    QUnit.test("correctly handle concurrent reloads", async function (assert) {
+        serverData.views = {
+            "partner,false,pivot": `
+                <pivot>
+                    <field name="foo" type="measure"/>
+                    <field name="product_id" type="row"/>
+                </pivot>`,
+            "partner,false,search": `<search/>`,
+            "partner,false,list": '<tree><field name="foo"/></tree>',
+        };
+
+        let def;
+        let readGroupCount = 0;
+        const mockRPC = (route, args) => {
+            if (args.method === "read_group" && def) {
+                readGroupCount++;
+                if (readGroupCount === 2) {
+                    // slow down last read_group of first reload
+                    return Promise.resolve(def);
+                }
+            }
+        };
+        const webClient = await createWebClient({ serverData, mockRPC });
+
+        await doAction(webClient, {
+            res_model: "partner",
+            type: "ir.actions.act_window",
+            views: [
+                [false, "pivot"],
+                [false, "list"], // s.t. there is a pivot view switcher
+            ],
+        });
+
+        assert.containsOnce(webClient, ".o_pivot_view");
+        assert.strictEqual(getCurrentValues(webClient), ["32", "12", "20"].join(","));
+
+        // drill down first row group (group by company_type)
+        await click(webClient.el.querySelector("tbody .o_pivot_header_cell_closed"));
+        await click(webClient.el.querySelector(".o_pivot .o_dropdown_menu .o_dropdown_item"));
+
+        assert.strictEqual(getCurrentValues(webClient), ["32", "12", "12", "20"].join(","));
+
+        // reload twice by clicking on pivot view switcher
+        def = makeDeferred();
+        await click(webClient.el.querySelector(".o_control_panel .o_switch_view.o_pivot"));
+        await click(webClient.el.querySelector(".o_control_panel .o_switch_view.o_pivot"));
+
+        def.resolve();
+        await nextTick();
+
+        assert.strictEqual(getCurrentValues(webClient), ["32", "12", "12", "20"].join(","));
+    });
+
+    QUnit.test(
+        "if no measure is set in arch, 'Count' is used as measure initially",
+        async function (assert) {
+            const pivot = await makeView({
+                type: "pivot",
+                resModel: "partner",
+                serverData,
+                arch: `<pivot/>`,
+            });
+
+            assert.deepEqual(
+                [...pivot.el.querySelectorAll("thead th")].map((e) => e.innerText),
+                ["", "Total", "Count"]
+            );
+        }
+    );
+
+    QUnit.test(
+        "if (at least) one measure is set in arch and display_quantity is false or unset, 'Count' is not used as measure initially",
+        async function (assert) {
+            const pivot = await makeView({
+                type: "pivot",
+                resModel: "partner",
+                serverData,
+                arch: `
+                <pivot>
+                    <field name="foo" type="measure"/>
+                </pivot>
+            `,
+            });
+
+            assert.deepEqual(
+                [...pivot.el.querySelectorAll("thead th")].map((e) => e.innerText),
+                ["", "Total", "Foo"]
+            );
+        }
+    );
+
+    QUnit.test(
+        "if (at least) one measure is set in arch and display_quantity is true, 'Count' is used as measure initially",
+        async function (assert) {
+            const pivot = await makeView({
+                type: "pivot",
+                resModel: "partner",
+                serverData,
+                arch: `
+                <pivot display_quantity="1">
+                    <field name="foo" type="measure"/>
+                </pivot>
+            `,
+            });
+
+            assert.deepEqual(
+                [...pivot.el.querySelectorAll("thead th")].map((e) => e.innerText),
+                ["", "Total", "Count", "Foo"]
+            );
+        }
+    );
+
+    QUnit.test("'Measures' menu when there is no measurable fields", async function (assert) {
+        serverData.models.partner = {
+            fields: {},
+            records: [{ id: 1, display_name: "The one" }],
+        };
+        const pivot = await makeView({
+            type: "pivot",
+            resModel: "partner",
+            serverData,
+            arch: `<pivot/>`,
+        });
+
+        await toggleMenu(pivot, "Measures");
+
+        // "Count" is the only measure available
+        assert.deepEqual(
+            [...pivot.el.querySelectorAll(".o_cp_bottom_left .o_dropdown_menu li")].map(
+                (e) => e.innerText
+            ),
+            ["Count"]
+        );
+        // No separator should be displayed in the menu "Measures"
+        assert.containsNone(pivot, ".o_cp_bottom_left .o_dropdown_menu div.dropdown-divider");
+    });
+});
diff --git a/addons/web/static/tests/webclient/actions/window_action_tests.js b/addons/web/static/tests/webclient/actions/window_action_tests.js
index 87db617e07a..12b9f8fd4e8 100644
--- a/addons/web/static/tests/webclient/actions/window_action_tests.js
+++ b/addons/web/static/tests/webclient/actions/window_action_tests.js
@@ -22,6 +22,7 @@ import { errorService } from "../../../src/core/errors/error_service";
 import { RPCError } from "@web/core/network/rpc_service";
 import { registerCleanup } from "../../helpers/cleanup";
 import { WarningDialog } from "@web/core/errors/error_dialogs";
+import { makeFakeUserService } from "@web/../tests/helpers/mock_services";
 
 let serverData;
 const serviceRegistry = registry.category("services");
@@ -2304,6 +2305,8 @@ QUnit.module("ActionManager", (hooks) => {
                 assert.step(args.method);
             }
         };
+
+        registry.category("services").add("user", makeFakeUserService());
         const webClient = await createWebClient({ serverData, mockRPC });
         await doAction(webClient, 3);
         assert.doesNotHaveClass(

From 2a784b7c8848864dfa3a229f1aa63c6a78f2f6c4 Mon Sep 17 00:00:00 2001
From: "Lucas Perais (lpe)" <lpe@odoo.com>
Date: Tue, 7 Sep 2021 06:23:02 +0000
Subject: [PATCH 29/31] [IMP] web: tooling: whitelist web_dashboard and
 web_cohort

Enable tooling (eslint, prettier) for new converted modules
web_dashboard and web_cohort

Part-of: odoo/odoo#73311
---
 addons/web/tooling/_eslintignore   | 18 ++++++++++++++++++
 addons/web/tooling/_prettierignore | 18 ++++++++++++++++++
 2 files changed, 36 insertions(+)

diff --git a/addons/web/tooling/_eslintignore b/addons/web/tooling/_eslintignore
index 9b3e5f456a3..a147fb3ffe6 100644
--- a/addons/web/tooling/_eslintignore
+++ b/addons/web/tooling/_eslintignore
@@ -37,3 +37,21 @@ web_studio/static/src/legacy/**/*
 addons/web/static/tests/**/legacy/*
 web_enterprise/static/tests/**/legacy/*
 web_studio/static/tests/**/legacy/*
+
+# web_dashboard
+# whitelist new code
+!web_dashboard
+!web_dashboard/**/*
+
+# blacklist legacy
+web_dashboard/static/src/legacy/**/*
+web_dashboard/static/tests/legacy/**/*
+
+# web_cohort
+# whitelist new code
+!web_cohort
+!web_cohort/**/*
+
+# blacklist legacy
+web_cohort/static/src/legacy/**/*
+web_cohort/static/tests/legacy/**/*
diff --git a/addons/web/tooling/_prettierignore b/addons/web/tooling/_prettierignore
index 9b3e5f456a3..a147fb3ffe6 100644
--- a/addons/web/tooling/_prettierignore
+++ b/addons/web/tooling/_prettierignore
@@ -37,3 +37,21 @@ web_studio/static/src/legacy/**/*
 addons/web/static/tests/**/legacy/*
 web_enterprise/static/tests/**/legacy/*
 web_studio/static/tests/**/legacy/*
+
+# web_dashboard
+# whitelist new code
+!web_dashboard
+!web_dashboard/**/*
+
+# blacklist legacy
+web_dashboard/static/src/legacy/**/*
+web_dashboard/static/tests/legacy/**/*
+
+# web_cohort
+# whitelist new code
+!web_cohort
+!web_cohort/**/*
+
+# blacklist legacy
+web_cohort/static/src/legacy/**/*
+web_cohort/static/tests/legacy/**/*

From 164cb86d2d24b5eae147b456791b4dbad084bcf0 Mon Sep 17 00:00:00 2001
From: Bruno Boi <boi@odoo.com>
Date: Tue, 7 Sep 2021 06:23:04 +0000
Subject: [PATCH 30/31] [FIX] web,mail: various dropdown design fixes

apply new control panel styling from sri
remove o_dropdown_menu_right (looks unused)
remove o_dropdown_inline (this is a regression for small screens, apparently we would like to have this possibility on smaller screens. This does not break mobile usage but Mobile styling is still a bit weird though)
fix systray activitymenu in mobile (issue was introduced with 29731b40)
fix subdropdown flickering (before this commit, parent dropdown was in absolute positioning, making the position hook generate flicker, now it it fixed from the beginning)

Part-of: odoo/odoo#73311
---
 addons/mail/static/src/scss/systray.scss      | 11 ++-
 .../static/src/core/dropdown/dropdown.scss    | 94 +------------------
 .../web/static/src/core/dropdown/dropdown.xml |  2 +-
 .../comparison_menu/comparison_menu.xml       |  4 +-
 .../search/favorite_menu/favorite_menu.xml    |  4 +-
 .../src/search/filter_menu/filter_menu.xml    |  4 +-
 .../search/group_by_menu/group_by_menu.xml    |  4 +-
 .../static/src/webclient/navbar/navbar.xml    |  2 +-
 .../web/static/tests/core/dropdown_tests.js   |  4 +-
 .../static/tests/webclient/navbar_tests.js    |  4 +-
 10 files changed, 26 insertions(+), 107 deletions(-)

diff --git a/addons/mail/static/src/scss/systray.scss b/addons/mail/static/src/scss/systray.scss
index 66ef3d273aa..9a46d099928 100644
--- a/addons/mail/static/src/scss/systray.scss
+++ b/addons/mail/static/src/scss/systray.scss
@@ -111,7 +111,16 @@
             top: 10%;
         }
         .o_mail_systray_dropdown {
-            position: relative;
+
+            position: fixed;
+            top: $o-mail-chat-window-header-height-mobile;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            width: map-get($sizes, 100);
+            margin: 0;
+            max-height: none;
+
             .o_mail_systray_dropdown_top {
                 padding: 5px;
             }
diff --git a/addons/web/static/src/core/dropdown/dropdown.scss b/addons/web/static/src/core/dropdown/dropdown.scss
index ebd3bffa123..4093ec49ebd 100644
--- a/addons/web/static/src/core/dropdown/dropdown.scss
+++ b/addons/web/static/src/core/dropdown/dropdown.scss
@@ -68,21 +68,14 @@
   &_menu {
     @extend .dropdown-menu;
 
-    &.o_dropdown_menu_right {
-      // FIXME: does commenting this break anything?
-      // @extend .dropdown-menu-right;
-    }
-
     & > li.o_dropdown {
       &.focus > .o_dropdown_toggler {
         background-color: $dropdown-link-hover-bg;
       }
       & > .o_dropdown_toggler {
-        // FIXME: without this there is no selection feedback
-        // @extend .dropdown-item;
         &:after {
-          @include o-position-absolute($right: 0);
-          transform: translate(-.6em, .3em);
+          @include o-position-absolute($right: 0, $top: 0);
+          transform: translate(-.6em, .6em);
           font: .9em/1em FontAwesome;
           content: "\f0da";
         }
@@ -122,90 +115,11 @@
     }
   }
 
-  &_item > *:first-child:last-child {
-    @extend .dropdown-item;
-  }
-
-  &_item.o_dropdown_active > *:first-child:last-child {
-    @extend .dropdown-item:hover;
-  }
-
   &_menu_group {
     @extend .dropdown-header;
   }
 }
 
-// = Owl Nested Dropdowns
-// ----------------------------------------------------------------------------
-
-.o_dropdown .o_dropdown {
-
-  // Define submenus 'inline' design (nested into the parent menu)
-  @mixin -o-inline-dropdown-menu {
-    .o_dropdown_toggler.o_dropdown_active:after {
-      content: "\f0d7";
-    }
-
-    .o_dropdown_menu {
-      left: 0;
-      position: relative;
-      max-height: none;
-      box-shadow: none;
-      margin-top: 0;
-      margin-bottom: $dropdown-padding-y;
-      padding-top: 0;
-      background: rgba(#000, .01);
-      border-width: 0 0 1px 0;
-
-      &:last-child {
-        border-bottom-width: 0;
-        margin-bottom: 0;
-      }
-    }
-  }
-
-  // The toggler looks like a regular menu entry
-  .o_dropdown_toggler {
-    @extend .dropdown-item;
-
-    &:after {
-      @include o-position-absolute($right: 0);
-      transform: translate(-.6em, .3em);
-      font: .9em/1em FontAwesome;
-      content: "\f0da";
-    }
-  }
-
-  // Small screen: all submenus are inline
-  @include media-breakpoint-down('lg') {
-    @include -o-inline-dropdown-menu ;
-  }
-
-  // Large screen: submenus floats...
-  @include media-breakpoint-up('lg') {
-    .o_dropdown_menu {
-      top: 0;
-      left: 100%;
-    }
-
-    //... except when specified otherwise
-    &.o_dropdown_inline {
-      @include -o-inline-dropdown-menu ;
-    }
-  }
-}
-
-// Unfortunately is not possible to set the parent menu's overflow to be 'visible'
-// horizontally (to show floating submenus) and 'auto/scroll' vertically (to hide
-// menu entries when the menu is very long).
-// We will set it 'visible' letting 'o_view_controller' handling scrollbars.
-@include media-breakpoint-up('lg') {
-  .o_dropdown_menu {
-    overflow: visible;
-    max-height: none;
-  }
-}
-
 // = Owl components specific rules
 // -----------------------------------------------------------------------------
 .o_dropdown_item:not(.disabled):not(:disabled) {
@@ -224,10 +138,6 @@ button.o_dropdown_toggler {
     box-shadow: none !important;
   }
 
-  &.o_dropdown_active {
-    @extend %--state-active;
-  }
-
   @include hover-focus-active() {
     @extend %--state-active;
   }
diff --git a/addons/web/static/src/core/dropdown/dropdown.xml b/addons/web/static/src/core/dropdown/dropdown.xml
index 525c5b66317..48c33d17f38 100644
--- a/addons/web/static/src/core/dropdown/dropdown.xml
+++ b/addons/web/static/src/core/dropdown/dropdown.xml
@@ -17,7 +17,7 @@
         t-att-data-hotkey="props.hotkey"
         t-ref="togglerRef"
       >
-        <span>
+        <span class="d-flex align-items-center">
           <t t-slot="toggler" />
         </span>
       </button>
diff --git a/addons/web/static/src/search/comparison_menu/comparison_menu.xml b/addons/web/static/src/search/comparison_menu/comparison_menu.xml
index 0c676e49ee8..afe62a61554 100644
--- a/addons/web/static/src/search/comparison_menu/comparison_menu.xml
+++ b/addons/web/static/src/search/comparison_menu/comparison_menu.xml
@@ -2,12 +2,12 @@
 <templates xml:space="preserve">
 
     <t t-name="web.ComparisonMenu" owl="1">
-        <Dropdown class="o_comparison_menu"
+        <Dropdown class="o_comparison_menu btn-group"
             togglerClass="'btn btn-secondary'"
             t-on-dropdown-item-selected="onComparisonSelected"
             >
             <t t-set-slot="toggler">
-                <i class="mr-1" t-att-class="icon"/>
+                <i class="small mr-1" t-att-class="icon"/>
                 <span class="o_dropdown_title">Comparison</span>
             </t>
             <t t-foreach="items" t-as="item" t-key="item.id">
diff --git a/addons/web/static/src/search/favorite_menu/favorite_menu.xml b/addons/web/static/src/search/favorite_menu/favorite_menu.xml
index 690925e8cc4..4631765e594 100644
--- a/addons/web/static/src/search/favorite_menu/favorite_menu.xml
+++ b/addons/web/static/src/search/favorite_menu/favorite_menu.xml
@@ -2,12 +2,12 @@
 <templates xml:space="preserve">
 
     <t t-name="web.FavoriteMenu" owl="1">
-        <Dropdown class="o_favorite_menu"
+        <Dropdown class="o_favorite_menu btn-group"
             togglerClass="'btn btn-secondary'"
             t-on-dropdown-item-selected="onFavoriteSelected"
             >
             <t t-set-slot="toggler">
-                <i class="mr-1" t-att-class="icon"/>
+                <i class="small mr-1" t-att-class="icon"/>
                 <span class="o_dropdown_title">Favorites</span>
             </t>
             <t t-set="currentGroup" t-value="null"/>
diff --git a/addons/web/static/src/search/filter_menu/filter_menu.xml b/addons/web/static/src/search/filter_menu/filter_menu.xml
index f562887e5cf..a3fe871b295 100644
--- a/addons/web/static/src/search/filter_menu/filter_menu.xml
+++ b/addons/web/static/src/search/filter_menu/filter_menu.xml
@@ -2,12 +2,12 @@
 <templates xml:space="preserve">
 
     <t t-name="web.FilterMenu" owl="1">
-        <Dropdown class="o_filter_menu"
+        <Dropdown class="o_filter_menu btn-group"
             togglerClass="'btn btn-secondary'"
             t-on-dropdown-item-selected="onFilterSelected"
             >
             <t t-set-slot="toggler">
-                <i class="mr-1" t-att-class="icon"/>
+                <i class="small mr-1" t-att-class="icon"/>
                 <span class="o_dropdown_title">Filters</span>
             </t>
             <t t-set="currentGroup" t-value="null"/>
diff --git a/addons/web/static/src/search/group_by_menu/group_by_menu.xml b/addons/web/static/src/search/group_by_menu/group_by_menu.xml
index 384a15337a4..d990950a320 100644
--- a/addons/web/static/src/search/group_by_menu/group_by_menu.xml
+++ b/addons/web/static/src/search/group_by_menu/group_by_menu.xml
@@ -2,13 +2,13 @@
 <templates xml:space="preserve">
 
     <t t-name="web.GroupByMenu" owl="1">
-        <Dropdown class="o_group_by_menu"
+        <Dropdown class="o_group_by_menu btn-group"
             togglerClass="'btn btn-secondary'"
             t-props="dropdownProps"
             t-on-dropdown-item-selected="onGroupBySelected"
             >
             <t t-set-slot="toggler">
-                <i class="mr-1" t-att-class="icon"/>
+                <i class="small mr-1" t-att-class="icon"/>
                 <span class="o_dropdown_title">Group By</span>
             </t>
             <t t-set="currentGroup" t-value="null"/>
diff --git a/addons/web/static/src/webclient/navbar/navbar.xml b/addons/web/static/src/webclient/navbar/navbar.xml
index 11b3fe0d3f9..6f3bfa8d797 100644
--- a/addons/web/static/src/webclient/navbar/navbar.xml
+++ b/addons/web/static/src/webclient/navbar/navbar.xml
@@ -52,7 +52,7 @@
         t-as="app"
         t-key="app.id"
         class="o_app"
-        t-att-class="{ o_dropdown_active: menuService.getCurrentApp() === app }"
+        t-att-class="{ focus: menuService.getCurrentApp() === app }"
         payload="app"
       >
         <a t-att-href="getMenuItemHref(app)" t-esc="app.name" t-on-click.prevent="" />
diff --git a/addons/web/static/tests/core/dropdown_tests.js b/addons/web/static/tests/core/dropdown_tests.js
index c6d1f5b8a3d..8491e09c0ea 100644
--- a/addons/web/static/tests/core/dropdown_tests.js
+++ b/addons/web/static/tests/core/dropdown_tests.js
@@ -42,7 +42,7 @@ QUnit.module("Components", ({ beforeEach }) => {
         parent = await mount(Parent, { env, target });
         assert.strictEqual(
             parent.el.outerHTML,
-            '<div class="o_dropdown"><button class="o_dropdown_toggler "><span></span></button></div>'
+            '<div class="o_dropdown"><button class="o_dropdown_toggler "><span class="d-flex align-items-center"></span></button></div>'
         );
         assert.containsOnce(parent.el, "button.o_dropdown_toggler");
         assert.containsNone(parent.el, "ul.o_dropdown_menu");
@@ -55,7 +55,7 @@ QUnit.module("Components", ({ beforeEach }) => {
         parent = await mount(Parent, { env, target });
         assert.strictEqual(
             parent.el.outerHTML,
-            '<ged class="o_dropdown"><button class="o_dropdown_toggler "><span></span></button></ged>'
+            '<ged class="o_dropdown"><button class="o_dropdown_toggler "><span class="d-flex align-items-center"></span></button></ged>'
         );
         assert.containsOnce(parent.el, "button.o_dropdown_toggler");
         assert.containsNone(parent.el, "ul.o_dropdown_menu");
diff --git a/addons/web/static/tests/webclient/navbar_tests.js b/addons/web/static/tests/webclient/navbar_tests.js
index 911a3a459ff..07d39d6a452 100644
--- a/addons/web/static/tests/webclient/navbar_tests.js
+++ b/addons/web/static/tests/webclient/navbar_tests.js
@@ -120,7 +120,7 @@ QUnit.test("navbar can display current active app", async (assert) => {
     await click(dropdown, "button.o_dropdown_toggler");
     assert.containsOnce(
         dropdown,
-        "ul.o_dropdown_menu li.o_dropdown_item:not(.o_dropdown_active)",
+        "ul.o_dropdown_menu li.o_dropdown_item:not(.focus)",
         "should not show the current active app as the menus service has not loaded an app yet"
     );
 
@@ -129,7 +129,7 @@ QUnit.test("navbar can display current active app", async (assert) => {
     await nextTick();
     assert.containsOnce(
         dropdown,
-        "ul.o_dropdown_menu li.o_dropdown_item.o_dropdown_active",
+        "ul.o_dropdown_menu li.o_dropdown_item.focus",
         "should show the current active app"
     );
     navbar.destroy();

From 65d15b40f6d84a1a97ce2c856e9036e5b6aeb3e5 Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Tue, 7 Sep 2021 06:34:34 +0000
Subject: [PATCH 31/31] [FIX] test_main_flows: adapt tour to groupby menu
 changes

Part-of: odoo/odoo#73311
---
 odoo/addons/test_main_flows/static/tests/tours/main_flow.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/odoo/addons/test_main_flows/static/tests/tours/main_flow.js b/odoo/addons/test_main_flows/static/tests/tours/main_flow.js
index 5a9c31893af..5aba0cd66c5 100644
--- a/odoo/addons/test_main_flows/static/tests/tours/main_flow.js
+++ b/odoo/addons/test_main_flows/static/tests/tours/main_flow.js
@@ -911,12 +911,12 @@ tour.stepUtils.mobileModifier(tour.stepUtils.autoExpandMoreButtons('.o_control_p
     position: 'bottom',
 }, {
     trigger: '.dropdown-item.selected:contains(Employee)',
-    extra_trigger: '.dropdown-menu.show',
+    extra_trigger: '.o_dropdown.show',
     content: _t('Remove group by employee'),
     position: 'bottom',
 }, {
     trigger: '.dropdown-item.selected:contains(Billable Type)',
-    extra_trigger: '.dropdown-menu.show',
+    extra_trigger: '.o_dropdown.show',
     content: _t('Remove group by billable type'),
     position: 'bottom',
 }, {