diff --git a/addons/web/static/src/legacy/legacy_views.js b/addons/web/static/src/legacy/legacy_views.js
index f0c02eafaf4..48876eed3e2 100644
--- a/addons/web/static/src/legacy/legacy_views.js
+++ b/addons/web/static/src/legacy/legacy_views.js
@@ -51,10 +51,11 @@ function registerView(name, LegacyView) {
                 searchPanel = globalState.searchPanel;
             }
 
-            this.viewParams = Object.assign({}, this.props.actionFlags, {
+            const { actionFlags, breadcrumbs = [] } = this.env.config;
+            this.viewParams = Object.assign({}, actionFlags, {
                 action: this.props.action,
                 // legacy views automatically add the last part of the breadcrumbs
-                breadcrumbs: breadcrumbsToLegacy(this.props.breadcrumbs),
+                breadcrumbs: breadcrumbsToLegacy(breadcrumbs),
                 modelName: this.props.resModel,
                 currentId: this.props.resId,
                 controllerState: {
@@ -99,7 +100,7 @@ function registerView(name, LegacyView) {
                 context: this.props.context,
             };
             const options = {
-                actionId: this.props.action.id,
+                actionId: this.env.config.actionId,
                 loadActionMenus: this.props.loadActionMenus,
                 loadIrFilters: this.props.loadIrFilters,
             };
@@ -120,10 +121,11 @@ function registerView(name, LegacyView) {
                     viewFields: result.fields_views.search.fields,
                 });
             }
+            const { viewSwitcherEntries = [] } = this.env.config;
             const views = this.viewParams.action.views
-                .filter(([vid, vtype]) => vtype !== "search")
+                .filter(([, vtype]) => vtype !== "search")
                 .map(([vid, vtype]) => {
-                    const view = this.props.viewSwitcherEntries.find((v) => v.type === vtype);
+                    const view = viewSwitcherEntries.find((v) => v.type === vtype);
                     if (view) {
                         return Object.assign({}, view, { viewID: vid });
                     } else {
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 dac80643c39..28603350257 100644
--- a/addons/web/static/src/search/control_panel/control_panel.js
+++ b/addons/web/static/src/search/control_panel/control_panel.js
@@ -1,11 +1,11 @@
 /** @odoo-module **/
 
+import { useService } from "@web/core/utils/hooks";
 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;
 
@@ -21,6 +21,44 @@ export class ControlPanel extends Component {
         this.actionService = useService("action");
     }
 
+    /**
+     * !!! What follows is a hack, do not copy it !!!
+     *
+     * Duplicates the slots defined for the parent s.t. they are also available
+     * for the current control panel.
+     *
+     * This hack is necessary since Owl does not support manual slots
+     * assignment/transfer yet. This must be removed as soon as Owl implements
+     * such a system.
+     *
+     * @strongly_discouraged_override
+     */
+    __render() {
+        const { slots } = this.env.qweb.constructor;
+        const { __owl__ } = this;
+        const originalSlots = {};
+        const transferredSlotNames = [
+            "control-panel-top-left",
+            "control-panel-top-right",
+            "control-panel-bottom-left",
+            "control-panel-bottom-right",
+        ];
+        for (const slotName of transferredSlotNames) {
+            const parentSlotkey = `${__owl__.parent.__owl__.slotId}_${slotName}`;
+            if (parentSlotkey in slots) {
+                const cpSlotKey = `${__owl__.slotId}_${slotName}`;
+                originalSlots[cpSlotKey] = slots[cpSlotKey];
+                slots[cpSlotKey] = function (scope, extra) {
+                    slots[parentSlotkey].call(this, __owl__.parent.__owl__.scope, extra);
+                };
+            }
+        }
+        const res = super.__render(...arguments);
+        // Clean up
+        Object.assign(slots, originalSlots);
+        return res;
+    }
+
     /**
      * @returns {Object}
      */
@@ -78,25 +116,3 @@ 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: [],
-};
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..a374b9f0a19 100644
--- a/addons/web/static/src/search/control_panel/control_panel.xml
+++ b/addons/web/static/src/search/control_panel/control_panel.xml
@@ -30,9 +30,9 @@
 
                     <div class="o_cp_pager"/>
 
-                    <t t-if="props.viewSwitcherEntries and props.viewSwitcherEntries.length > 1">
+                    <t t-if="(env.config.viewSwitcherEntries or []).length">
                         <nav class="btn-group o_cp_switch_buttons">
-                            <t t-foreach="props.viewSwitcherEntries" t-as="view" t-key="view.type">
+                            <t t-foreach="env.config.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"
@@ -48,7 +48,7 @@
 
     <t t-name="web.Breadcrumbs" owl="1">
         <ol class="breadcrumb">
-            <t t-foreach="props.breadcrumbs or []" t-as="breadcrumb" t-key="breadcrumb.jsId">
+            <t t-foreach="env.config.breadcrumbs or []" t-as="breadcrumb" t-key="breadcrumb.jsId">
                 <li class="breadcrumb-item"
                     t-att-class="{ o_back_button: breadcrumb_last}"
                     t-on-click.prevent="onBreadcrumbClicked(breadcrumb.jsId)"
@@ -59,7 +59,7 @@
                 </li>
             </t>
             <li class="breadcrumb-item active">
-                <t t-if="props.displayName" t-esc="props.displayName"/>
+                <t t-if="env.config.displayName" t-esc="env.config.displayName" />
                 <em t-else="" class="text-warning">Unnamed</em>
             </li>
         </ol>
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
index f66b017f422..0e6a4fe1939 100644
--- a/addons/web/static/src/search/favorite_menu/custom_favorite_item.js
+++ b/addons/web/static/src/search/favorite_menu/custom_favorite_item.js
@@ -14,7 +14,7 @@ export class CustomFavoriteItem extends Component {
         this.descriptionRef = useRef("description");
         useAutofocus();
         this.state = useState({
-            description: this.env.searchModel.displayName,
+            description: this.env.config.displayName,
             isDefault: false,
             isShared: false,
         });
@@ -46,7 +46,7 @@ export class CustomFavoriteItem extends Component {
         this.env.searchModel.createNewFavorite({ description, isDefault, isShared });
 
         Object.assign(this.state, {
-            description: this.env.searchModel.displayName,
+            description: this.env.config.displayName,
             isDefault: false,
             isShared: false,
         });
diff --git a/addons/web/static/src/search/search_model.js b/addons/web/static/src/search/search_model.js
index d367210c042..241fef2f779 100644
--- a/addons/web/static/src/search/search_model.js
+++ b/addons/web/static/src/search/search_model.js
@@ -4,6 +4,7 @@ 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 { deepCopy } from "@web/core/utils/objects";
 import { SearchArchParser } from "./search_arch_parser";
 import {
     constructDateDomain,
@@ -15,7 +16,6 @@ import {
     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;
@@ -190,11 +190,9 @@ export class SearchModel extends EventBus {
      * @param {number|false} [config.searchViewId=false]
      * @param {Object[]} [config.irFilters=[]]
      *
-     * @param {Object} [config.action={id:false,views:[]}]
      * @param {boolean} [config.activateFavorite=true]
      * @param {Object | null} [config.comparison]
      * @param {Object} [config.context={}]
-     * @param {String} [config.displayName=""]
      * @param {Array} [config.domain=[]]
      * @param {Array} [config.dynamicFilters=[]]
      * @param {string[]} [config.groupBy=[]]
@@ -203,7 +201,6 @@ export class SearchModel extends EventBus {
      * @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;
@@ -212,12 +209,6 @@ export class SearchModel extends EventBus {
         }
         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._reset();
 
@@ -245,7 +236,7 @@ export class SearchModel extends EventBus {
                     views: [[searchViewId, "search"]],
                 },
                 {
-                    actionId: this.action.id,
+                    actionId: this.env.config.actionId,
                     loadIrFilters: loadIrFilters || false,
                 }
             );
@@ -322,7 +313,6 @@ export class SearchModel extends EventBus {
         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)));
 
@@ -355,6 +345,7 @@ export class SearchModel extends EventBus {
 
         /** @type Map<number,Section> */
         this.sections = new Map(sections || []);
+        this.display = this._getDisplay(config.display);
 
         if (this.display.searchPanel) {
             /** @type DomainListRepr */
@@ -1381,12 +1372,14 @@ export class SearchModel extends EventBus {
      */
     _getDisplay(display = {}) {
         const { viewTypes } = this.searchPanelInfo;
+        const { bannerRoute, viewType } = this.env.config;
         return {
             controlPanel: "controlPanel" in display ? display.controlPanel : {},
             searchPanel:
                 this.sections.size &&
-                (!this.view.type || viewTypes.includes(this.view.type)) &&
+                (!viewType || viewTypes.includes(viewType)) &&
                 ("searchPanel" in display ? display.searchPanel : true),
+            banner: Boolean(bannerRoute),
         };
     }
 
@@ -1764,7 +1757,7 @@ export class SearchModel extends EventBus {
         };
         const irFilter = {
             name: description,
-            action_id: this.action.id,
+            action_id: this.env.config.actionId,
             model_id: this.resModel,
             domain,
             is_default: isDefault,
diff --git a/addons/web/static/src/search/with_search/with_search.js b/addons/web/static/src/search/with_search/with_search.js
index 8af1dcbcf9e..8d6b56893ea 100644
--- a/addons/web/static/src/search/with_search/with_search.js
+++ b/addons/web/static/src/search/with_search/with_search.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-import { useBus, useEffect, useService } from "@web/core/utils/hooks";
+import { useBus, useService } from "@web/core/utils/hooks";
 import { SearchModel } from "@web/search/search_model";
 import { CallbackRecorder, useSetupAction } from "@web/webclient/actions/action_hook";
 
@@ -15,40 +15,24 @@ export class WithSearch extends Component {
         this.Component = this.props.Component;
 
         if (!this.env.__getContext__) {
-            useSubEnv({
-                __getContext__: new CallbackRecorder(),
-            });
+            useSubEnv({ __getContext__: new CallbackRecorder() });
         }
 
         const SearchModelClass = this.Component.SearchModel || SearchModel;
-        this.searchModel = new SearchModelClass(this.env, {
+        this.env.searchModel = new SearchModelClass(this.env, {
             user: useService("user"),
             orm: useService("orm"),
             view: useService("view"),
         });
-        useBus(this.searchModel, "update", () => this.render());
-        useSubEnv({
-            searchModel: this.searchModel,
-        });
 
+        useBus(this.env.searchModel, "update", this.render);
         useSetupAction({
             getGlobalState: () => {
                 return {
-                    searchModel: JSON.stringify(this.searchModel.exportState()),
+                    searchModel: JSON.stringify(this.env.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() {
@@ -57,7 +41,7 @@ export class WithSearch extends Component {
             config.state = JSON.parse(config.globalState.searchModel);
             delete config.globalState;
         }
-        await this.searchModel.load(config);
+        await this.env.searchModel.load(config);
     }
 
     async willUpdateProps(nextProps) {
@@ -67,7 +51,7 @@ export class WithSearch extends Component {
                 config[key] = nextProps[key];
             }
         }
-        await this.searchModel.reload(config);
+        await this.env.searchModel.reload(config);
     }
 
     //-------------------------------------------------------------------------
@@ -77,20 +61,18 @@ export class WithSearch extends Component {
     get componentProps() {
         const componentProps = { ...this.props.componentProps };
         for (const key of SEARCH_KEYS) {
-            componentProps[key] = this.searchModel[key];
+            componentProps[key] = this.env.searchModel[key];
         }
         componentProps.info = componentProps.info || {};
         for (const key of OTHER_SEARCH_KEYS) {
-            componentProps.info[key] = this.searchModel[key];
+            componentProps.info[key] = this.env.searchModel[key];
         }
         return componentProps;
     }
 }
 
 WithSearch.defaultProps = {
-    action: { id: false, views: [] },
     componentProps: {},
-    view: { id: false },
 };
 WithSearch.props = {
     Component: Function,
@@ -98,25 +80,6 @@ WithSearch.props = {
 
     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 },
diff --git a/addons/web/static/src/views/debug_items.js b/addons/web/static/src/views/debug_items.js
index d0455ac19d3..682c3beebe4 100644
--- a/addons/web/static/src/views/debug_items.js
+++ b/addons/web/static/src/views/debug_items.js
@@ -44,15 +44,12 @@ export function editView({ accessRights, component, env }) {
     if (!accessRights.canEditView) {
         return null;
     }
-    let type;
-    let { viewId } = component.props.info || {}; // fallback is there for legacy
+    let { viewId, viewType: type } = component.env.config || {}; // 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;
diff --git a/addons/web/static/src/views/layout.js b/addons/web/static/src/views/layout.js
new file mode 100644
index 00000000000..664ded5da2f
--- /dev/null
+++ b/addons/web/static/src/views/layout.js
@@ -0,0 +1,32 @@
+/** @odoo-module **/
+
+import { ControlPanel } from "@web/search/control_panel/control_panel";
+import { SearchPanel } from "@web/search/search_panel/search_panel";
+
+const { Component } = owl;
+
+/**
+ * @param {Object} params
+ * @returns {Object}
+ */
+export const extractLayoutComponents = (params) => {
+    return {
+        ControlPanel: params.ControlPanel || ControlPanel,
+        SearchPanel: params.SearchPanel || SearchPanel,
+        Banner: params.Banner || false,
+    };
+};
+
+export class Layout extends Component {
+    setup() {
+        const { display = {} } = this.env.searchModel || {};
+        this.components = extractLayoutComponents(this.env.config);
+        this.display = display;
+    }
+}
+
+Layout.template = "web.Layout";
+Layout.props = {
+    viewType: { type: String, optional: true },
+    useSampleModel: { type: Boolean, optional: true },
+};
diff --git a/addons/web/static/src/views/layout.xml b/addons/web/static/src/views/layout.xml
new file mode 100644
index 00000000000..c71cec37f5e
--- /dev/null
+++ b/addons/web/static/src/views/layout.xml
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.Layout" owl="1">
+        <div t-att-class="{ o_view_sample_data: props.useSampleModel }" t-attf-class="{{ props.viewType ? `o_${props.viewType}_view` : '' }}">
+            <t t-component="components.ControlPanel" t-if="display.controlPanel">
+                <!-- Empty body to assign slot id to control panel -->
+            </t>
+            <div class="o_content" t-att-class="{ o_component_with_search_panel: display.searchPanel }">
+                <t t-component="components.Banner" t-if="components.Banner and display.banner" />
+                <t t-component="components.SearchPanel" t-if="display.searchPanel" />
+                <t t-slot="default" />
+            </div>
+        </div>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/onboarding_banner.js b/addons/web/static/src/views/onboarding_banner.js
index 301a94b6b38..1fabfd39de3 100644
--- a/addons/web/static/src/views/onboarding_banner.js
+++ b/addons/web/static/src/views/onboarding_banner.js
@@ -12,14 +12,14 @@ export class OnboardingBanner extends owl.Component {
         useActionLinks({
             resModel,
             reload: async () => {
-                this.bannerHTML = await this.loadBanner(this.props.bannerRoute);
+                this.bannerHTML = await this.loadBanner(this.env.config.bannerRoute);
                 this.render();
             },
         });
     }
 
     async willStart() {
-        this.bannerHTML = await this.loadBanner(this.props.bannerRoute);
+        this.bannerHTML = await this.loadBanner(this.env.config.bannerRoute);
     }
 
     async loadBanner(bannerRoute) {
@@ -47,4 +47,6 @@ export class OnboardingBanner extends owl.Component {
         return new XMLSerializer().serializeToString(banner);
     }
 }
+
 OnboardingBanner.template = owl.tags.xml`<div t-raw="bannerHTML" />`;
+OnboardingBanner.props = {};
diff --git a/addons/web/static/src/views/view.js b/addons/web/static/src/views/view.js
index 2a7bb73c24f..3af0cbfb574 100644
--- a/addons/web/static/src/views/view.js
+++ b/addons/web/static/src/views/view.js
@@ -2,21 +2,22 @@
 
 import { evaluateExpr } from "@web/core/py_js/py";
 import { registry } from "@web/core/registry";
-import { useService } from "@web/core/utils/hooks";
 import { KeepLast } from "@web/core/utils/concurrency";
+import { useService } from "@web/core/utils/hooks";
+import { deepCopy } from "@web/core/utils/objects";
 import { WithSearch } from "@web/search/with_search/with_search";
 import { useActionLinks } from "@web/views/helpers/view_hook";
+import { extractLayoutComponents } from "@web/views/layout";
 
 const viewRegistry = registry.category("views");
 
-const { Component } = owl;
+const { Component, hooks } = owl;
+const { useSubEnv } = hooks;
 
 /** @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]
@@ -35,18 +36,11 @@ const { Component } = owl;
  *  @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]
@@ -55,12 +49,10 @@ const { Component } = owl;
  *  @property {Object} [globalState]
  */
 
-const STANDARD_PROPS = new Set([
+const STANDARD_PROPS = [
     "resModel",
     "type",
 
-    "views",
-
     "arch",
     "fields",
     "viewId",
@@ -79,17 +71,10 @@ const STANDARD_PROPS = new Set([
     "groupBy",
     "orderBy",
 
-    "action",
-    "actionFlags",
-    "displayName",
-
     "useSampleModel",
     "noContentHelp",
 
-    "breadcrumbs",
     "display",
-    "viewSwitcherEntries",
-
     "globalState",
 
     "activateFavorite",
@@ -97,7 +82,7 @@ const STANDARD_PROPS = new Set([
     // LEGACY: remove this later (clean when mappings old state <-> new state are established)
     "searchPanel",
     "searchModel",
-]);
+];
 
 export class View extends Component {
     setup() {
@@ -117,11 +102,11 @@ export class View extends Component {
         }
 
         this.viewService = useService("view");
-
         this.withSearchProps = null;
 
-        owl.hooks.useSubEnv({
+        useSubEnv({
             keepLast: new KeepLast(),
+            config: { ...(this.env.config || {}) },
         });
         useActionLinks({ resModel });
     }
@@ -132,16 +117,16 @@ export class View extends Component {
         const type = ViewClass.type;
 
         // determine views for which descriptions should be obtained
-        let { views, viewId, searchViewId } = this.props;
+        let { viewId, searchViewId } = this.props;
 
-        views = JSON.parse(JSON.stringify(views));
-
-        const view = views.find((v) => v[1] === type);
-        if (view) {
+        const views = deepCopy(this.env.config.views || []);
+        const view = views.find((v) => v[1] === type) || [];
+        if (view.length) {
             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
+            view.push(viewId || false, type);
+            views.push(view); // viewId will remain undefined if not specified and loadView=false
         }
 
         const searchView = views.find((v) => v[1] === "search");
@@ -154,26 +139,27 @@ export class View extends Component {
         // searchViewId will remains undefined if loadSearchView=false
 
         // prepare view description
-        const { action, context, resModel, loadActionMenus, loadIrFilters } = this.props;
+        const { 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 viewDescription = { viewId, 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 }
+                { actionId: this.env.config.actionId, 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];
+            view[0] = viewDescription.viewId;
             searchViewDescription = viewDescriptions.search;
             if (loadSearchView) {
                 if (!searchViewArch) {
@@ -184,6 +170,7 @@ export class View extends Component {
                     irFilters = searchViewDescription.irFilters;
                 }
             }
+            this.env.config.views = views;
         }
 
         if (!arch) {
@@ -197,33 +184,28 @@ export class View extends Component {
         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);
-        }
+
+        const subType = rootNode.getAttribute("js_class");
+        const bannerRoute = rootNode.getAttribute("banner_route");
+        const sample = rootNode.getAttribute("sample");
 
         // determine ViewClass to instantiate (if not already done)
-        if (rootAttrs.js_class) {
-            ViewClass = viewRegistry.get(rootAttrs.js_class);
+        if (subType) {
+            ViewClass = viewRegistry.get(subType);
         }
 
-        const bannerRoute = rootAttrs.banner_route;
+        Object.assign(this.env.config, {
+            viewId: viewDescription.viewId,
+            viewType: type,
+            viewSubType: subType,
+            bannerRoute,
+            ...extractLayoutComponents(ViewClass),
+        });
 
         // 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,
-            },
+        const viewProps = {
+            info: { actionMenus, mode: this.props.display.mode },
             arch,
-            bannerRoute,
             fields,
             resModel,
             useSampleModel: false,
@@ -234,12 +216,12 @@ export class View extends Component {
 
         if ("useSampleModel" in this.props) {
             viewProps.useSampleModel = this.props.useSampleModel;
-        } else if (rootAttrs.sample) {
-            viewProps.useSampleModel = Boolean(evaluateExpr(rootAttrs.sample));
+        } else if (sample) {
+            viewProps.useSampleModel = Boolean(evaluateExpr(sample));
         }
 
         for (const key in this.props) {
-            if (!STANDARD_PROPS.has(key)) {
+            if (!STANDARD_PROPS.includes(key)) {
                 viewProps[key] = this.props[key];
             }
         }
@@ -254,13 +236,11 @@ export class View extends Component {
         }
 
         // prepare the WithSearh component props
-        this.withSearchProps = { ...this.props };
-
-        Object.assign(this.withSearchProps, {
+        this.withSearchProps = {
+            ...this.props,
             Component: ViewClass,
             componentProps: viewProps,
-            view: { id: viewId, type },
-        });
+        };
 
         if (searchViewId !== undefined) {
             this.withSearchProps.searchViewId = searchViewId;
@@ -298,13 +278,10 @@ export class View extends Component {
 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"];
diff --git a/addons/web/static/src/webclient/actions/action_service.js b/addons/web/static/src/webclient/actions/action_service.js
index a6bf736bfbe..2b53fca6f62 100644
--- a/addons/web/static/src/webclient/actions/action_service.js
+++ b/addons/web/static/src/webclient/actions/action_service.js
@@ -1,18 +1,18 @@
 /** @odoo-module **/
 
-import { cleanDomFromBootstrap } from "@web/legacy/utils";
 import { browser } from "@web/core/browser/browser";
-import { useBus } from "@web/core/utils/hooks";
 import { makeContext } from "@web/core/context";
+import { useDebugCategory } from "@web/core/debug/debug_context";
 import { download } from "@web/core/network/download";
 import { evaluateExpr } from "@web/core/py_js/py";
 import { registry } from "@web/core/registry";
 import { KeepLast } from "@web/core/utils/concurrency";
+import { useBus } from "@web/core/utils/hooks";
 import { sprintf } from "@web/core/utils/strings";
-import { useDebugCategory } from "@web/core/debug/debug_context";
+import { cleanDomFromBootstrap } from "@web/legacy/utils";
+import { View } from "@web/views/view";
 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;
@@ -307,10 +307,19 @@ function makeActionManager(env) {
     /**
      * @param {ClientAction | ActWindowAction} action
      * @param {Object} props
-     * @returns {ActionProps}
+     * @returns {{ props: ActionProps, config: Config }}
      */
-    function _getActionProps(action, props) {
-        return Object.assign({}, props, { action, actionId: action.id });
+    function _getActionInfo(action, props) {
+        return {
+            props: Object.assign({}, props, { action, actionId: action.id }),
+            config: {
+                actionId: action.id,
+                actionType: action.type,
+                actionFlags: action.flags,
+                displayName: action.display_name || action.name || "",
+                views: action.views,
+            },
+        };
     }
 
     /**
@@ -366,9 +375,9 @@ function makeActionManager(env) {
      * @param {ActWindowAction} action
      * @param {BaseView[]} views
      * @param {Object} props
-     * @returns {ViewProps}
+     * @returns {{ props: ViewProps, config: Config }}
      */
-    function _getViewProps(view, action, views, props = {}) {
+    function _getViewInfo(view, action, views, props = {}) {
         const target = action.target;
         const viewSwitcherEntries = views
             .filter((v) => v.multiRecord === view.multiRecord)
@@ -385,25 +394,15 @@ function makeActionManager(env) {
                 return viewSwitcherEntry;
             });
         const context = action.context || {};
-        const flags = action.flags || {};
         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,
         });
 
         if (target === "inline") {
@@ -433,11 +432,25 @@ function makeActionManager(env) {
         // 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 });
+            Object.assign(viewProps, {
+                action: legacyActionInfo,
+                View: view,
+                views: action.views,
+            });
         }
         // END LEGACY CODE COMPATIBILITY
 
-        return viewProps;
+        return {
+            props: viewProps,
+            config: {
+                actionId: action.id,
+                actionType: action.type,
+                actionFlags: action.flags,
+                displayName: action.display_name || action.name || "",
+                views: action.views,
+                viewSwitcherEntries,
+            },
+        };
     }
 
     /**
@@ -502,11 +515,24 @@ function makeActionManager(env) {
         });
         const action = controller.action;
 
+        // Compute breadcrumbs
+        const index = _computeStackIndex(options);
+        const controllerArray = [controller];
+        if (options.lazyController) {
+            controllerArray.unshift(options.lazyController);
+        }
+        const nextStack = controllerStack.slice(0, index).concat(controllerArray);
+        controller.config.breadcrumbs = _getBreadcrumbs(nextStack.slice(0, -1));
+        if (controller.Component.isLegacy) {
+            controller.props.breadcrumbs = controller.config.breadcrumbs;
+        }
+
         class ControllerComponent extends Component {
             setup() {
                 this.Component = controller.Component;
                 this.componentRef = useRef("component");
                 useDebugCategory("action", { action });
+                useSubEnv({ config: controller.config });
                 if (action.target !== "new") {
                     this.__beforeLeave__ = new CallbackRecorder();
                     this.__getGlobalState__ = new CallbackRecorder();
@@ -679,13 +705,6 @@ function makeActionManager(env) {
             controller.props.globalState = controller.action.globalState;
         }
 
-        const index = _computeStackIndex(options);
-        const controllerArray = [controller];
-        if (options.lazyController) {
-            controllerArray.unshift(options.lazyController);
-        }
-        const nextStack = controllerStack.slice(0, index).concat(controllerArray);
-        controller.props.breadcrumbs = _getBreadcrumbs(nextStack.slice(0, nextStack.length - 1));
         const closingProm = _executeCloseAction();
 
         controller.__info__ = {
@@ -772,7 +791,7 @@ function makeActionManager(env) {
             action,
             view,
             views,
-            props: _getViewProps(view, action, views, options.props),
+            ..._getViewInfo(view, action, views, options.props),
         };
         action.controllers[view.type] = controller;
 
@@ -789,7 +808,7 @@ function makeActionManager(env) {
                 action,
                 view: lazyView,
                 views,
-                props: _getViewProps(lazyView, action, views),
+                ..._getViewInfo(lazyView, action, views),
             };
         }
 
@@ -829,7 +848,7 @@ function makeActionManager(env) {
                 jsId: `controller_${++id}`,
                 Component: clientAction,
                 action,
-                props: _getActionProps(action, options.props),
+                ..._getActionInfo(action, options.props),
             };
             return _updateUI(controller, {
                 clearBreadcrumbs: options.clearBreadcrumbs,
@@ -1197,7 +1216,10 @@ function makeActionManager(env) {
         }
         // END LEGACY CODE COMPATIBILITY
 
-        newController.props = _getViewProps(view, controller.action, controller.views, props);
+        Object.assign(
+            newController,
+            _getViewInfo(view, controller.action, controller.views, props)
+        );
         controller.action.controllers[viewType] = newController;
         let index;
         if (view.multiRecord) {
@@ -1235,7 +1257,10 @@ function makeActionManager(env) {
         }
         const controller = controllerStack[index];
         if (controller.action.type === "ir.actions.act_window") {
-            controller.props = _getViewProps(controller.view, controller.action, controller.views);
+            Object.assign(
+                controller,
+                _getViewInfo(controller.view, controller.action, controller.views)
+            );
         }
         await clearUncommittedChanges(env);
         return _updateUI(controller, { index });
diff --git a/addons/web/static/tests/helpers/mock_env.js b/addons/web/static/tests/helpers/mock_env.js
index 1d01c82ee7d..867646a2b27 100644
--- a/addons/web/static/tests/helpers/mock_env.js
+++ b/addons/web/static/tests/helpers/mock_env.js
@@ -110,6 +110,7 @@ export async function makeTestEnv(config = {}) {
     });
 
     const env = makeEnv();
+    env.config = config.config || {};
     await startServices(env);
     env.qweb.addTemplates(window.__ODOO_TEMPLATES__);
     return env;
diff --git a/addons/web/static/tests/legacy/views/state_mapping_tests.js b/addons/web/static/tests/legacy/views/state_mapping_tests.js
index 571688ec0de..04189dd873d 100644
--- a/addons/web/static/tests/legacy/views/state_mapping_tests.js
+++ b/addons/web/static/tests/legacy/views/state_mapping_tests.js
@@ -26,6 +26,7 @@ import legacyViewRegistry from "web.view_registry";
 
 const serviceRegistry = registry.category("services");
 const viewRegistry = registry.category("views");
+const searchModelRegistry = registry.category("search_models");
 
 let serverData;
 QUnit.module("Views", (hooks) => {
@@ -81,7 +82,7 @@ QUnit.module("Views", (hooks) => {
         ToyView.searchMenuTypes = ["filter", "groupBy", "comparison", "favorite"];
         ToyView.template = owl.tags.xml`
             <div class="o_toy_view">
-                <ControlPanel t-props="props.info"/>
+                <ControlPanel />
             </div>
         `;
         ToyView.type = "toy";
diff --git a/addons/web/static/tests/search/control_panel.js b/addons/web/static/tests/search/control_panel.js
index 589ccd875cf..12c71cab63f 100644
--- a/addons/web/static/tests/search/control_panel.js
+++ b/addons/web/static/tests/search/control_panel.js
@@ -57,7 +57,7 @@ QUnit.module("Search", (hooks) => {
             serverData,
             resModel: "foo",
             Component: ControlPanel,
-            componentProps: {
+            config: {
                 breadcrumbs: [{ jsId: "controller_7", name: "Previous" }],
                 displayName: "Current",
             },
@@ -83,7 +83,7 @@ QUnit.module("Search", (hooks) => {
             serverData,
             resModel: "foo",
             Component: ControlPanel,
-            componentProps: {
+            config: {
                 viewSwitcherEntries: [
                     { type: "list", active: true, icon: "fa-list-ul", name: "List" },
                     { type: "kanban", icon: "fa-th-large", name: "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
index 67de6d3eeef..a63dc326a2b 100644
--- a/addons/web/static/tests/search/custom_favorite_item_tests.js
+++ b/addons/web/static/tests/search/custom_favorite_item_tests.js
@@ -75,7 +75,9 @@ QUnit.module("Search", (hooks) => {
             Component: ControlPanel,
             searchMenuTypes: ["favorite"],
             searchViewId: false,
-            displayName: "Action Name",
+            config: {
+                displayName: "Action Name",
+            },
         });
 
         await toggleFavoriteMenu(controlPanel);
@@ -288,7 +290,7 @@ QUnit.module("Search", (hooks) => {
                     if (args.model === "ir.filters" && args.method === "create_or_replace") {
                         const irFilter = args.args[0];
                         assert.deepEqual(irFilter, {
-                            action_id: false,
+                            action_id: undefined,
                             context: { group_by: [] },
                             domain: "[]",
                             is_default: false,
diff --git a/addons/web/static/tests/search/favorite_menu_tests.js b/addons/web/static/tests/search/favorite_menu_tests.js
index 7708736cc9d..0851aded1f7 100644
--- a/addons/web/static/tests/search/favorite_menu_tests.js
+++ b/addons/web/static/tests/search/favorite_menu_tests.js
@@ -67,7 +67,9 @@ QUnit.module("Search", (hooks) => {
                 Component: ControlPanel,
                 searchMenuTypes: ["favorite"],
                 searchViewId: false,
-                displayName: "Action Name",
+                config: {
+                    displayName: "Action Name",
+                },
             });
 
             assert.containsOnce(controlPanel, "div.o_favorite_menu > button i.fa.fa-star");
@@ -98,7 +100,9 @@ QUnit.module("Search", (hooks) => {
             Component: ControlPanel,
             searchMenuTypes: ["favorite"],
             searchViewId: false,
-            displayName: "Action Name",
+            config: {
+                displayName: "Action Name",
+            },
         });
 
         assert.containsOnce(controlPanel, "div.o_favorite_menu > button i.fa.fa-star");
diff --git a/addons/web/static/tests/search/helpers.js b/addons/web/static/tests/search/helpers.js
index b36a557deeb..6d9ba334435 100644
--- a/addons/web/static/tests/search/helpers.js
+++ b/addons/web/static/tests/search/helpers.js
@@ -4,10 +4,10 @@ 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 { CustomFavoriteItem } from "@web/search/favorite_menu/custom_favorite_item";
 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 { CustomFavoriteItem } from "@web/search/favorite_menu/custom_favorite_item";
 import { registerCleanup } from "../helpers/cleanup";
 import { makeTestEnv } from "../helpers/mock_env";
 import { click, getFixture, triggerEvent } from "../helpers/utils";
@@ -34,16 +34,25 @@ export const setupControlPanelFavoriteMenuRegistry = () => {
 };
 
 export const makeWithSearch = async (params) => {
-    const serverData = params.serverData || undefined;
-    const mockRPC = params.mockRPC || undefined;
     const props = { ...params };
+
+    const serverData = props.serverData || undefined;
+    const mockRPC = props.mockRPC || undefined;
+    const config = props.config || {};
+
     delete props.serverData;
     delete props.mockRPC;
-    const env = await makeTestEnv({ serverData, mockRPC });
+    delete props.config;
+
+    const env = await makeTestEnv({ serverData, mockRPC, config });
+
     const target = getFixture();
     const withSearch = await mount(WithSearch, { env, props, target });
+
     registerCleanup(() => withSearch.destroy());
+
     const component = Object.values(withSearch.__owl__.children)[0];
+
     return component;
 };
 
diff --git a/addons/web/static/tests/search/search_model_tests.js b/addons/web/static/tests/search/search_model_tests.js
index cbc6ff6f3e7..986677d4fa3 100644
--- a/addons/web/static/tests/search/search_model_tests.js
+++ b/addons/web/static/tests/search/search_model_tests.js
@@ -401,7 +401,7 @@ QUnit.module("Search", (hooks) => {
                         <searchpanel/>
                     </search>
                 `,
-            view: { type: "kanban" },
+            config: { viewType: "kanban" },
         });
         assert.deepEqual(model.getSections(), []);
     });
@@ -418,7 +418,7 @@ QUnit.module("Search", (hooks) => {
                     </search>
                 `,
             resModel: "partner",
-            view: { type: "kanban" },
+            config: { viewType: "kanban" },
         });
         const sections = model.getSections();
         for (const section of sections) {
@@ -488,7 +488,7 @@ QUnit.module("Search", (hooks) => {
                     </search>
                 `,
             resModel: "partner",
-            view: { type: "kanban" },
+            config: { viewType: "kanban" },
         });
         const sections = model.getSections();
         for (const section of sections) {
diff --git a/addons/web/static/tests/search/search_panel_tests.js b/addons/web/static/tests/search/search_panel_tests.js
index 8f4b42a25c7..67aa1f8bbc5 100644
--- a/addons/web/static/tests/search/search_panel_tests.js
+++ b/addons/web/static/tests/search/search_panel_tests.js
@@ -382,7 +382,7 @@ QUnit.module("Search", (hooks) => {
             Component: TestComponent,
             resModel: "partner",
             searchViewId: false,
-            view: { type: "toy" },
+            config: { viewType: "toy" },
         });
 
         const sectionHeaderIcons = comp.el.querySelectorAll(".o_search_panel_section_header i");
@@ -418,7 +418,7 @@ QUnit.module("Search", (hooks) => {
             Component: TestComponent,
             resModel: "partner",
             searchViewId: false,
-            view: { type: "kanban" },
+            config: { viewType: "kanban" },
         });
 
         assert.containsOnce(comp, ".o_search_panel_section");
@@ -443,7 +443,7 @@ QUnit.module("Search", (hooks) => {
             Component: TestComponent,
             resModel: "partner",
             searchViewId: false,
-            view: { type: "kanban" },
+            config: { viewType: "kanban" },
         });
 
         const headers = comp.el.getElementsByClassName("o_search_panel_section_header");
diff --git a/addons/web/static/tests/views/helpers.js b/addons/web/static/tests/views/helpers.js
index 4f8cb1f69b7..f961f479bb8 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 { makeTestEnv } from "@web/../tests/helpers/mock_env";
+import { getFixture } from "@web/../tests/helpers/utils";
+import { View } from "@web/views/view";
 import { _fieldsViewGet } from "../helpers/mock_server";
 import { addLegacyMockEnvironment } from "../webclient/helpers";
 
@@ -21,20 +21,26 @@ const { mount } = owl;
 
 /**
  * @param {MakeViewParams} params
+ * @param {Object} [options={}]
+ * @param {boolean} [options.noFields] Do not add default fields
  * @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);
+export const makeView = async (params, options = {}) => {
+    const props = { ...params };
+    const serverData = props.serverData;
+    const mockRPC = props.mockRPC;
+    const config = props.config || {};
+    const legacyParams = props.legacyParams || {};
+
     delete props.serverData;
     delete props.mockRPC;
     delete props.legacyParams;
+    delete props.config;
 
-    const env = await makeTestEnv({ serverData, mockRPC });
-    const defaultFields = serverData.models[props.resModel].fields;
-    if (props.arch) {
+    const env = await makeTestEnv({ serverData, mockRPC, config });
+
+    if (!options.noFields && props.arch) {
+        const defaultFields = serverData.models[props.resModel].fields;
         if (!props.fields) {
             props.fields = Object.assign({}, defaultFields);
             // write the field name inside the field description (as done by fields_get)
@@ -81,4 +87,4 @@ export async function makeView(params) {
     const concreteView = Object.values(withSearch.__owl__.children)[0];
 
     return concreteView;
-}
+};
diff --git a/addons/web/static/tests/views/layout_tests.js b/addons/web/static/tests/views/layout_tests.js
new file mode 100644
index 00000000000..8be75bc2c4b
--- /dev/null
+++ b/addons/web/static/tests/views/layout_tests.js
@@ -0,0 +1,273 @@
+/** @odoo-module **/
+
+import { getFixture } from "@web/../tests/helpers/utils";
+import { makeWithSearch, setupControlPanelServiceRegistry } from "@web/../tests/search/helpers";
+import { dialogService } from "@web/core/dialog/dialog_service";
+import { registry } from "@web/core/registry";
+import { Layout } from "@web/views/layout";
+import { makeTestEnv } from "@web/../tests/helpers/mock_env";
+
+const { Component, hooks, mount, tags } = owl;
+const { xml } = tags;
+const { useSubEnv } = hooks;
+
+const serviceRegistry = registry.category("services");
+
+let serverData;
+
+QUnit.module("Views", (hooks) => {
+    hooks.beforeEach(() => {
+        serverData = {
+            models: {
+                foo: {
+                    fields: {
+                        aaa: {
+                            type: "selection",
+                            selection: [
+                                ["a", "A"],
+                                ["b", "B"],
+                            ],
+                        },
+                    },
+                    records: [],
+                },
+            },
+            views: {
+                "foo,false,search": /* xml */ `
+                    <search>
+                        <searchpanel>
+                            <field name="aaa" />
+                        </searchpanel>
+                    </search>`,
+            },
+        };
+
+        setupControlPanelServiceRegistry();
+        serviceRegistry.add("dialog", dialogService);
+    });
+
+    QUnit.module("Layout");
+
+    QUnit.test("Simple rendering", async (assert) => {
+        assert.expect(5);
+
+        class ToyComponent extends Component {}
+        ToyComponent.template = xml`
+            <Layout viewType="'toy'" useSampleModel="true">
+                <div class="toy_content" />
+            </Layout>`;
+        ToyComponent.components = { Layout };
+
+        const env = await makeTestEnv({ config: {} });
+        const comp = await mount(ToyComponent, { target: getFixture(), env });
+
+        assert.hasClass(comp.el, "o_toy_view o_view_sample_data");
+        assert.containsNone(comp, ".o_control_panel");
+        assert.containsNone(comp, ".o_component_with_search_panel");
+        assert.containsNone(comp, ".o_search_panel");
+        assert.containsOnce(comp, ".o_content > .toy_content");
+    });
+
+    QUnit.test("Simple rendering: with search", async (assert) => {
+        assert.expect(6);
+
+        class ToyComponent extends Component {}
+        ToyComponent.template = xml`
+            <Layout viewType="'toy'">
+                <t t-set-slot="control-panel-top-right">
+                    <div class="toy_search_bar" />
+                </t>
+                <div class="toy_content" />
+            </Layout>`;
+        ToyComponent.components = { Layout };
+
+        const root = await makeWithSearch({
+            serverData,
+            Component: ToyComponent,
+            resModel: "foo",
+            searchViewId: false,
+        });
+
+        assert.hasClass(root.el, "o_toy_view");
+        assert.doesNotHaveClass(root.el, "o_view_sample_data");
+        assert.containsOnce(root, ".o_control_panel .o_cp_top_right .toy_search_bar");
+        assert.containsOnce(root, ".o_component_with_search_panel .o_search_panel");
+        assert.containsNone(root, ".o_cp_searchview");
+        assert.containsOnce(root, ".o_content > .toy_content");
+    });
+
+    QUnit.test("Nested layouts", async (assert) => {
+        assert.expect(10);
+
+        // Component C: bottom (no control panel)
+
+        class ToyC extends Component {
+            setup() {
+                useSubEnv({
+                    searchModel: {
+                        display: {
+                            controlPanel: false,
+                            searchPanel: true,
+                        },
+                    },
+                });
+            }
+        }
+        ToyC.template = xml`
+            <Layout viewType="'toy_c'">
+                <div class="toy_c_content" />
+            </Layout>`;
+        ToyC.components = { Layout };
+
+        // Component B: center (with custom search panel)
+
+        class SearchPanel extends Component {}
+        SearchPanel.template = xml`<div class="o_toy_search_panel" />`;
+
+        class ToyB extends Component {
+            setup() {
+                useSubEnv({ config: { SearchPanel } });
+            }
+        }
+        ToyB.template = xml`
+            <Layout viewType="'toy_b'">
+                <t t-set-slot="control-panel-top-right">
+                    <div class="toy_b_breadcrumbs" />
+                </t>
+                <ToyC />
+            </Layout>`;
+        ToyB.components = { Layout, ToyC };
+
+        // Component A: top
+
+        class ToyA extends Component {}
+        ToyA.template = xml`
+            <Layout viewType="'toy_a'">
+                <t t-set-slot="control-panel-top-right">
+                    <div class="toy_a_search" />
+                </t>
+                <ToyB />
+            </Layout>`;
+        ToyA.components = { Layout, ToyB };
+
+        const root = await makeWithSearch({
+            serverData,
+            Component: ToyA,
+            resModel: "foo",
+            searchViewId: false,
+        });
+
+        assert.hasClass(root.el, "o_toy_a_view");
+        assert.doesNotHaveClass(root.el, "o_view_sample_data");
+        assert.containsOnce(root, ".o_content .o_toy_b_view .o_content .o_toy_c_view .o_content"); // Full chain of contents
+        assert.containsN(root, ".o_control_panel", 2); // Component C has hidden its control panel
+        assert.containsN(root, ".o_content.o_component_with_search_panel", 3);
+        assert.containsOnce(root, ".o_search_panel"); // Standard search panel
+        assert.containsN(root, ".o_toy_search_panel", 2); // Custom search panels
+        assert.containsOnce(root, ".toy_a_search");
+        assert.containsOnce(root, ".toy_b_breadcrumbs");
+        assert.containsOnce(root, ".toy_c_content");
+    });
+
+    QUnit.test("Custom control panel", async (assert) => {
+        assert.expect(3);
+
+        class ToyComponent extends Component {}
+        ToyComponent.template = xml`
+            <Layout>
+                <div class="o_toy_content" />
+            </Layout>`;
+        ToyComponent.components = { Layout };
+
+        class ControlPanel extends Component {}
+        ControlPanel.template = xml`<div class="o_toy_search_panel" />`;
+
+        const root = await makeWithSearch({
+            serverData,
+            Component: ToyComponent,
+            resModel: "foo",
+            searchViewId: false,
+            config: { ControlPanel },
+        });
+
+        assert.containsOnce(root, ".o_toy_content");
+        assert.containsOnce(root, ".o_toy_search_panel");
+        assert.containsNone(root, ".o_control_panel");
+    });
+
+    QUnit.test("Custom search panel", async (assert) => {
+        assert.expect(3);
+
+        class ToyComponent extends Component {}
+        ToyComponent.template = xml`
+            <Layout>
+                <div class="o_toy_content" />
+            </Layout>`;
+        ToyComponent.components = { Layout };
+
+        class SearchPanel extends Component {}
+        SearchPanel.template = xml`<div class="o_toy_search_panel" />`;
+
+        const root = await makeWithSearch({
+            serverData,
+            Component: ToyComponent,
+            resModel: "foo",
+            searchViewId: false,
+            config: { SearchPanel },
+        });
+
+        assert.containsOnce(root, ".o_toy_content");
+        assert.containsOnce(root, ".o_toy_search_panel");
+        assert.containsNone(root, ".o_search_panel");
+    });
+
+    QUnit.test("Custom banner: no bannerRoute in env", async (assert) => {
+        assert.expect(2);
+
+        class ToyComponent extends Component {}
+        ToyComponent.template = xml`
+            <Layout>
+                <div class="o_toy_content" />
+            </Layout>`;
+        ToyComponent.components = { Layout };
+
+        class Banner extends Component {}
+        Banner.template = xml`<div class="o_toy_banner" />`;
+
+        const root = await makeWithSearch({
+            serverData,
+            Component: ToyComponent,
+            resModel: "foo",
+            searchViewId: false,
+            config: { Banner },
+        });
+
+        assert.containsOnce(root, ".o_toy_content");
+        assert.containsNone(root, ".o_toy_banner");
+    });
+
+    QUnit.test("Custom banner: with bannerRoute in env", async (assert) => {
+        assert.expect(2);
+
+        class ToyComponent extends Component {}
+        ToyComponent.template = xml`
+            <Layout>
+                <div class="o_toy_content" />
+            </Layout>`;
+        ToyComponent.components = { Layout };
+
+        class Banner extends Component {}
+        Banner.template = xml`<div class="o_toy_banner" />`;
+
+        const root = await makeWithSearch({
+            serverData,
+            Component: ToyComponent,
+            resModel: "foo",
+            searchViewId: false,
+            config: { Banner, bannerRoute: "toy/banner/route" },
+        });
+
+        assert.containsOnce(root, ".o_toy_content");
+        assert.containsOnce(root, ".o_toy_banner");
+    });
+});
diff --git a/addons/web/static/tests/views/view_tests.js b/addons/web/static/tests/views/view_tests.js
index 911f7845625..9501d281e51 100644
--- a/addons/web/static/tests/views/view_tests.js
+++ b/addons/web/static/tests/views/view_tests.js
@@ -1,14 +1,18 @@
 /** @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 {
+    click,
+    getFixture,
+    makeDeferred,
+    nextTick,
+    patchWithCleanup,
+} from "@web/../tests/helpers/utils";
+import { setupControlPanelServiceRegistry } from "@web/../tests/search/helpers";
+import { makeView } from "@web/../tests/views/helpers";
 import { registry } from "@web/core/registry";
-import { View } from "@web/views/view";
 import { OnboardingBanner } from "@web/views/onboarding_banner";
-import { viewService } from "@web/views/view_service";
-import { click, makeDeferred } from "../helpers/utils";
+import { View } from "@web/views/view";
 import { actionService } from "@web/webclient/actions/action_service";
 
 const { Component, mount, hooks, tags } = owl;
@@ -18,28 +22,6 @@ 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) => {
@@ -55,6 +37,7 @@ QUnit.module("Views", (hooks) => {
                             selection: [
                                 ["omnivorous", "Omnivorous"],
                                 ["herbivorous", "Herbivorous"],
+
                                 ["carnivorous", "Carnivorous"],
                             ],
                             store: true,
@@ -109,8 +92,7 @@ QUnit.module("Views", (hooks) => {
         viewRegistry.add("toy", ToyView);
         viewRegistry.add("toy_imp", ToyViewImp);
 
-        serviceRegistry.add("orm", ormService);
-        serviceRegistry.add("view", viewService);
+        setupControlPanelServiceRegistry();
 
         const fakeActionService = {
             name: "action",
@@ -140,7 +122,7 @@ QUnit.module("Views", (hooks) => {
                 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);
+                assert.strictEqual(this.env.config.viewId, false);
             },
         });
 
@@ -174,7 +156,7 @@ QUnit.module("Views", (hooks) => {
                 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);
+                assert.strictEqual(this.env.config.viewId, 1);
             },
         });
 
@@ -207,13 +189,14 @@ QUnit.module("Views", (hooks) => {
                 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);
+                assert.strictEqual(this.env.config.viewId, 1);
             },
         });
 
         const view = await makeView({
             serverData,
             mockRPC: (_, args) => {
+                console.log(_);
                 assert.deepEqual(args.kwargs.views, [[1, "toy"]]);
                 assert.deepEqual(args.kwargs.options, {
                     action_id: false,
@@ -223,7 +206,9 @@ QUnit.module("Views", (hooks) => {
             },
             resModel: "animal",
             type: "toy",
-            views: [[1, "toy"]],
+            config: {
+                views: [[1, "toy"]],
+            },
         });
         assert.hasClass(view.el, "o_toy_view");
         assert.strictEqual(view.el.innerHTML, serverData.views["animal,1,toy"]);
@@ -242,7 +227,7 @@ QUnit.module("Views", (hooks) => {
                     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);
+                    assert.strictEqual(this.env.config.viewId, false);
                 },
             });
 
@@ -261,7 +246,9 @@ QUnit.module("Views", (hooks) => {
                 },
                 resModel: "animal",
                 type: "toy",
-                views: [[false, "other"]],
+                config: {
+                    views: [[false, "other"]],
+                },
             });
             assert.hasClass(view.el, "o_toy_view");
             assert.strictEqual(view.el.innerHTML, serverData.views["animal,false,toy"]);
@@ -279,7 +266,7 @@ QUnit.module("Views", (hooks) => {
                 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);
+                assert.strictEqual(this.env.config.viewId, 1);
             },
         });
 
@@ -299,10 +286,12 @@ QUnit.module("Views", (hooks) => {
             resModel: "animal",
             type: "toy",
             viewId: 1,
-            views: [
-                [3, "toy"],
-                [false, "other"],
-            ],
+            config: {
+                views: [
+                    [3, "toy"],
+                    [false, "other"],
+                ],
+            },
         });
         assert.hasClass(view.el, "o_toy_view");
         assert.strictEqual(view.el.innerHTML, serverData.views["animal,1,toy"]);
@@ -319,7 +308,7 @@ QUnit.module("Views", (hooks) => {
                 assert.strictEqual(arch, `<toy>Specific arch content</toy>`);
                 assert.deepEqual(fields, {});
                 assert.strictEqual(info.actionMenus, undefined);
-                assert.strictEqual(info.viewId, undefined);
+                assert.strictEqual(this.env.config.viewId, undefined);
             },
         });
 
@@ -348,7 +337,7 @@ QUnit.module("Views", (hooks) => {
                 assert.strictEqual(arch, serverData.views["animal,false,toy"]);
                 assert.deepEqual(fields, serverData.models.animal.fields);
                 assert.deepEqual(info.actionMenus, {});
-                assert.strictEqual(info.viewId, false);
+                assert.strictEqual(this.env.config.viewId, false);
             },
         });
 
@@ -384,7 +373,7 @@ QUnit.module("Views", (hooks) => {
                     assert.strictEqual(arch, `<toy>Specific arch content</toy>`);
                     assert.deepEqual(fields, {});
                     assert.deepEqual(info.actionMenus, {});
-                    assert.strictEqual(info.viewId, false);
+                    assert.strictEqual(this.env.config.viewId, false);
                 },
             });
 
@@ -423,7 +412,7 @@ QUnit.module("Views", (hooks) => {
                     assert.strictEqual(arch, `<toy>Specific arch content</toy>`);
                     assert.deepEqual(fields, {});
                     assert.deepEqual(info.actionMenus, {});
-                    assert.strictEqual(info.viewId, undefined);
+                    assert.strictEqual(this.env.config.viewId, undefined);
                 },
             });
 
@@ -714,7 +703,9 @@ QUnit.module("Views", (hooks) => {
             mockRPC,
             resModel: "animal",
             type: "toy",
-            views: [[1, "toy"]],
+            config: {
+                views: [[1, "toy"]],
+            },
         });
 
         assert.containsOnce(toy, "a");
@@ -757,7 +748,9 @@ QUnit.module("Views", (hooks) => {
             serverData,
             resModel: "animal",
             type: "toy",
-            views: [[1, "toy"]],
+            config: {
+                views: [[1, "toy"]],
+            },
         });
 
         assert.containsOnce(toy, "a");
@@ -807,7 +800,9 @@ QUnit.module("Views", (hooks) => {
             serverData,
             resModel: "animal",
             type: "toy",
-            views: [[1, "toy"]],
+            config: {
+                views: [[1, "toy"]],
+            },
         });
 
         assert.containsOnce(toy, "a");
@@ -818,7 +813,7 @@ QUnit.module("Views", (hooks) => {
         assert.expect(3);
         serverData.views["animal,1,toy"] = `
             <toy banner_route="/mybody/isacage">
-                <Banner t-if="props.bannerRoute" bannerRoute="props.bannerRoute"/>
+                <Banner t-if="env.config.bannerRoute" />
             </toy>`;
 
         const mockRPC = (route) => {
@@ -833,7 +828,9 @@ QUnit.module("Views", (hooks) => {
             mockRPC,
             resModel: "animal",
             type: "toy",
-            views: [[1, "toy"]],
+            config: {
+                views: [[1, "toy"]],
+            },
         });
 
         assert.verifySteps(["/mybody/isacage"]);
@@ -844,7 +841,7 @@ QUnit.module("Views", (hooks) => {
         assert.expect(7);
         serverData.views["animal,1,toy"] = `
             <toy banner_route="/mybody/isacage">
-                <Banner t-if="props.bannerRoute" bannerRoute="props.bannerRoute"/>
+                <Banner t-if="env.config.bannerRoute" />
             </toy>`;
 
         const bannerArch = `
@@ -893,7 +890,9 @@ QUnit.module("Views", (hooks) => {
             mockRPC,
             resModel: "animal",
             type: "toy",
-            views: [[1, "toy"]],
+            config: {
+                views: [[1, "toy"]],
+            },
         });
 
         assert.verifySteps(["/mybody/isacage", "js loaded", "css loaded"]);
@@ -910,7 +909,7 @@ QUnit.module("Views", (hooks) => {
 
         serverData.views["animal,1,toy"] = `
             <toy banner_route="/mybody/isacage">
-                <Banner t-if="props.bannerRoute" bannerRoute="props.bannerRoute"/>
+                <Banner t-if="env.config.bannerRoute" />
             </toy>`;
 
         const banners = [
@@ -938,7 +937,9 @@ QUnit.module("Views", (hooks) => {
             mockRPC,
             resModel: "animal",
             type: "toy",
-            views: [[1, "toy"]],
+            config: {
+                views: [[1, "toy"]],
+            },
         });
 
         assert.verifySteps(["/mybody/isacage"]);
@@ -954,7 +955,7 @@ QUnit.module("Views", (hooks) => {
         assert.expect(5);
         serverData.views["animal,1,toy"] = `
             <toy banner_route="/mybody/isacage">
-                <Banner t-if="props.bannerRoute" bannerRoute="props.bannerRoute"/>
+                <Banner t-if="env.config.bannerRoute" />
             </toy>`;
 
         const bannerArch = `
@@ -974,7 +975,9 @@ QUnit.module("Views", (hooks) => {
             mockRPC,
             resModel: "animal",
             type: "toy",
-            views: [[1, "toy"]],
+            config: {
+                views: [[1, "toy"]],
+            },
         });
 
         assert.verifySteps(["/mybody/isacage"]);
@@ -1010,7 +1013,7 @@ QUnit.module("Views", (hooks) => {
 
         serverData.views["animal,1,toy"] = `
             <toy banner_route="/banner_route">
-                <Banner t-if="props.bannerRoute" bannerRoute="props.bannerRoute"/>
+                <Banner t-if="env.config.bannerRoute" />
                 <a type="action" data-method="setTheControl" data-model="animal" />
             </toy>`;
 
@@ -1040,7 +1043,9 @@ QUnit.module("Views", (hooks) => {
             serverData,
             resModel: "animal",
             type: "toy",
-            views: [[1, "toy"]],
+            config: {
+                views: [[1, "toy"]],
+            },
         });
 
         await click(toy.el.querySelector("a[data-method='setTheControl']"));
@@ -1054,7 +1059,7 @@ QUnit.module("Views", (hooks) => {
 
         serverData.views["animal,1,toy"] = `
             <toy banner_route="/mybody/isacage">
-                <Banner t-if="props.bannerRoute" bannerRoute="props.bannerRoute"/>
+                <Banner t-if="env.config.bannerRoute" />
             </toy>`;
 
         const bannerArch = `
@@ -1104,7 +1109,9 @@ QUnit.module("Views", (hooks) => {
             mockRPC,
             resModel: "animal",
             type: "toy",
-            views: [[1, "toy"]],
+            config: {
+                views: [[1, "toy"]],
+            },
         });
 
         const prom = new Promise((resolve) => {
@@ -1252,7 +1259,7 @@ QUnit.module("Views", (hooks) => {
     QUnit.test("'resModel' must be passed as prop", async function (assert) {
         assert.expect(2);
         try {
-            await makeView({ serverData });
+            await makeView({ serverData }, { noFields: true });
         } catch (error) {
             assert.step(error.message);
         }
@@ -1272,7 +1279,10 @@ QUnit.module("Views", (hooks) => {
     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/>" });
+            await makeView(
+                { serverData, resModel: "animal", type: "toy", arch: "<toy/>" },
+                { noFields: true }
+            );
         } catch (error) {
             assert.step(error.message);
         }
diff --git a/addons/web/static/tests/webclient/actions/client_action_tests.js b/addons/web/static/tests/webclient/actions/client_action_tests.js
index b6c74bf4b11..9dd9f8349a2 100644
--- a/addons/web/static/tests/webclient/actions/client_action_tests.js
+++ b/addons/web/static/tests/webclient/actions/client_action_tests.js
@@ -313,9 +313,9 @@ QUnit.module("ActionManager", (hooks) => {
         class ClientAction extends Component {
             setup() {
                 this.breadcrumbTitle = "myOwlAction";
-                const breadCrumbs = this.props.breadcrumbs;
-                assert.strictEqual(breadCrumbs.length, 1);
-                assert.strictEqual(breadCrumbs[0].name, "Favorite Ponies");
+                const { breadcrumbs } = this.env.config;
+                assert.strictEqual(breadcrumbs.length, 1);
+                assert.strictEqual(breadcrumbs[0].name, "Favorite Ponies");
             }
             mounted() {
                 this.trigger("controller-title-updated", this.breadcrumbTitle);
@@ -422,10 +422,12 @@ QUnit.module("ActionManager", (hooks) => {
                 title: "title",
                 message: "message %s <R&D>",
                 sticky: true,
-                links: [{
-                    label: "test <R&D>",
-                    url: '#action={action.id}&id={order.id}&model=purchase.order',
-                }],
+                links: [
+                    {
+                        label: "test <R&D>",
+                        url: "#action={action.id}&id={order.id}&model=purchase.order",
+                    },
+                ],
             },
         });
         const notificationSelector = ".o_notification_manager .o_notification";
@@ -460,10 +462,12 @@ QUnit.module("ActionManager", (hooks) => {
             params: {
                 message: "message %s <R&D>",
                 sticky: true,
-                links: [{
-                    label: "test <R&D>",
-                    url: '#action={action.id}&id={order.id}&model=purchase.order',
-                }],
+                links: [
+                    {
+                        label: "test <R&D>",
+                        url: "#action={action.id}&id={order.id}&model=purchase.order",
+                    },
+                ],
             },
         });
         assert.containsOnce(
@@ -473,7 +477,8 @@ QUnit.module("ActionManager", (hooks) => {
         );
         notificationElement = document.body.querySelector(notificationSelector);
         assert.containsNone(
-            notificationElement, ".o_notification_title",
+            notificationElement,
+            ".o_notification_title",
             "the notification should not have title"
         );
     });
diff --git a/addons/web/static/tests/webclient/actions/concurrency_tests.js b/addons/web/static/tests/webclient/actions/concurrency_tests.js
index 3303f41fbb0..9dcb108e520 100644
--- a/addons/web/static/tests/webclient/actions/concurrency_tests.js
+++ b/addons/web/static/tests/webclient/actions/concurrency_tests.js
@@ -652,7 +652,7 @@ QUnit.module("ActionManager", (hooks) => {
         ToyView.searchMenuTypes = ["filter"];
         ToyView.template = owl.tags.xml`
             <div class="o_toy_view">
-                <ControlPanel t-props="props.info"/>
+                <ControlPanel />
             </div>
         `;
         ToyView.type = "toy";