From 7c4f200b8edf0bc695c623c7afc62288f838db36 Mon Sep 17 00:00:00 2001
From: Samuel Degueldre <sad@odoo.com>
Date: Wed, 20 Apr 2022 09:36:09 +0000
Subject: [PATCH] [IMP] web: improve core Dialog API
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

*: base_automation, iap, web_tour

Previously, when trying to create a custom dialog, one would need to
extend the base Dialog class and configure it directly on the class,
using separate templates for the body and footer as necessary. This is
very unidiomatic owl code, and it is much more natural to simply extend
Component, and use Dialog at the root of the template, giving it slots
and props to configure its properties and contents.

This commit changes the dialog API to work as described and adapts code
that uses it.

closes odoo/odoo#89113

Enterprise: https://github.com/odoo/enterprise/pull/26462
Related: odoo/enterprise#26462
Signed-off-by: Géry Debongnie <ged@odoo.com>
---
 .../src/js/base_automation_error_dialog.js    |   6 +-
 .../src/xml/base_automation_error_dialog.xml  |   2 +-
 .../js/insufficient_credit_error_handler.js   |  13 +-
 addons/iap/static/src/xml/iap_templates.xml   |  39 ++--
 .../src/core/commands/command_palette.js      |  17 +-
 .../src/core/commands/command_palette.xml     |  75 +++----
 .../core/commands/command_palette_dialog.js   |  34 ---
 .../core/commands/command_palette_dialog.xml  |   8 -
 .../src/core/commands/command_service.js      |   4 +-
 .../confirmation_dialog.js                    |  37 ++--
 .../confirmation_dialog.xml                   |  33 ++-
 .../src/core/debug/debug_menu_items.xml       | 193 +++++++++---------
 addons/web/static/src/core/dialog/dialog.js   |  63 +++---
 addons/web/static/src/core/dialog/dialog.xml  |  30 ++-
 .../src/core/dialog/dialog_container.js       |  24 +--
 .../static/src/core/dialog/dialog_service.js  |  19 +-
 .../static/src/core/errors/error_dialogs.js   |  48 ++---
 .../static/src/core/errors/error_dialogs.xml  |  92 +++++----
 .../web/static/src/core/utils/components.js   |   9 +-
 .../web/static/src/legacy/action_adapters.js  |  13 +-
 addons/web/static/src/legacy/debug_manager.js |  15 +-
 addons/web/static/src/views/debug_items.js    |  10 +-
 .../src/webclient/actions/action_dialog.js    |  18 +-
 .../src/webclient/actions/action_dialog.xml   |  21 +-
 .../webclient/user_menu/user_menu_items.js    |  11 +-
 .../webclient/user_menu/user_menu_items.xml   |   6 +-
 .../core/commands/command_palette_tests.js    |  66 +++---
 .../tests/core/debug/debug_manager_tests.js   |   8 +
 .../static/tests/core/dialog_service_tests.js |  44 ++--
 addons/web/static/tests/core/dialog_tests.js  | 167 ++++++---------
 .../tests/core/errors/error_dialogs_tests.js  |  25 ++-
 .../tests/legacy/core/owl_dialog_tests.js     |  29 +--
 .../static/src/debug/tour_dialog_component.js |  12 +-
 .../src/debug/tour_dialog_component.xml       |   4 +-
 34 files changed, 578 insertions(+), 617 deletions(-)
 delete mode 100644 addons/web/static/src/core/commands/command_palette_dialog.js
 delete mode 100644 addons/web/static/src/core/commands/command_palette_dialog.xml

diff --git a/addons/base_automation/static/src/js/base_automation_error_dialog.js b/addons/base_automation/static/src/js/base_automation_error_dialog.js
index a0cc2c3b106..b3f19dd2528 100644
--- a/addons/base_automation/static/src/js/base_automation_error_dialog.js
+++ b/addons/base_automation/static/src/js/base_automation_error_dialog.js
@@ -31,7 +31,7 @@ export class BaseAutomationErrorDialog extends ErrorDialog {
         await this.orm.write("base.automation", [this.actionId], {
             active: false,
         });
-        this.close();
+        this.props.close();
     }
     /**
      * This method is called when the user clicks on the 'Edit action' button
@@ -50,10 +50,10 @@ export class BaseAutomationErrorDialog extends ErrorDialog {
             type: "ir.actions.act_window",
             view_mode: "form",
         });
-        this.close();
+        this.props.close();
     }
 }
 
-BaseAutomationErrorDialog.bodyTemplate = "base_automation.ErrorDialogBody";
+BaseAutomationErrorDialog.template = "base_automation.ErrorDialog";
 
 registry.category("error_dialogs").add("base_automation", BaseAutomationErrorDialog);
diff --git a/addons/base_automation/static/src/xml/base_automation_error_dialog.xml b/addons/base_automation/static/src/xml/base_automation_error_dialog.xml
index e694dd3311c..5cb78ef1424 100644
--- a/addons/base_automation/static/src/xml/base_automation_error_dialog.xml
+++ b/addons/base_automation/static/src/xml/base_automation_error_dialog.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
 <templates>
-    <t t-name="base_automation.ErrorDialogBody" t-inherit="web.ErrorDialogBody" t-inherit-mode="primary" owl="1">
+    <t t-name="base_automation.ErrorDialog" t-inherit="web.ErrorDialog" t-inherit-mode="primary" owl="1">
         <xpath expr="//div[@role='alert']" position="inside">
             <p>
                 The error occurred during the execution of the automated action
diff --git a/addons/iap/static/src/js/insufficient_credit_error_handler.js b/addons/iap/static/src/js/insufficient_credit_error_handler.js
index 3271daa7b54..eb3d0e41b71 100644
--- a/addons/iap/static/src/js/insufficient_credit_error_handler.js
+++ b/addons/iap/static/src/js/insufficient_credit_error_handler.js
@@ -3,11 +3,12 @@ import { Dialog } from "@web/core/dialog/dialog";
 import { registry } from "@web/core/registry";
 import { useService } from "@web/core/utils/hooks";
 
-class InsufficientCreditDialog extends Dialog {
+const { Component, onWillStart } = owl;
+
+class InsufficientCreditDialog extends Component {
     setup() {
-        super.setup(...arguments);
         this.orm = useService("orm");
-        owl.onWillStart(this.onWillStart);
+        onWillStart(this.onWillStart);
     }
 
     async onWillStart() {
@@ -30,11 +31,11 @@ class InsufficientCreditDialog extends Dialog {
 
     buyCredits() {
         window.open(this.url, "_blank");
-        this.close();
+        this.props.close();
     }
 }
-InsufficientCreditDialog.bodyTemplate = "iap.redirect_to_odoo_credit";
-InsufficientCreditDialog.footerTemplate = "iap.InsufficientCreditFooter";
+InsufficientCreditDialog.components = { Dialog };
+InsufficientCreditDialog.template = "iap.InsufficientCreditDialog";
 
 function insufficientCreditHandler(env, error, originalError) {
     if (!originalError) {
diff --git a/addons/iap/static/src/xml/iap_templates.xml b/addons/iap/static/src/xml/iap_templates.xml
index 6f9b6b1995f..2dbb2876cbd 100644
--- a/addons/iap/static/src/xml/iap_templates.xml
+++ b/addons/iap/static/src/xml/iap_templates.xml
@@ -2,24 +2,27 @@
 <template id="template" xml:space="preserve">
 
     <!-- LAYOUT TEMPLATES -->
-    <div t-name="iap.redirect_to_odoo_credit" t-att-style="style" owl="1">
-        <t t-if="props.errorData.body">
-            <div t-raw="props.errorData.body"/>
-        </t>
-        <t t-if="!props.errorData.body">
-            <t t-if="props.errorData.message">
-                <span t-esc="props.errorData.message"/>
-            </t>
-            <t t-if="!props.errorData.message">
-                <span>Insufficient credit to perform this service.</span>
-            </t>
-        </t>
-    </div>
-
-    <div t-name="iap.InsufficientCreditFooter" owl="1">
-        <button class="btn btn-primary" t-on-click="buyCredits" t-esc="buttonMessage"/>
-        <button class="btn" t-on-click="close">Cancel</button>
-    </div>
+    <t t-name="iap.InsufficientCreditDialog" owl="1">
+        <Dialog>
+            <div t-att-style="style">
+                <t t-if="props.errorData.body">
+                    <div t-raw="props.errorData.body"/>
+                </t>
+                <t t-if="!props.errorData.body">
+                    <t t-if="props.errorData.message">
+                        <span t-esc="props.errorData.message"/>
+                    </t>
+                    <t t-if="!props.errorData.message">
+                        <span>Insufficient credit to perform this service.</span>
+                    </t>
+                </t>
+                <t t-set-slot="footer">
+                    <button class="btn btn-primary" t-on-click="buyCredits" t-esc="buttonMessage"/>
+                    <button class="btn" t-on-click="close">Cancel</button>
+                </t>
+            </div>
+        </Dialog>
+    </t>
 
     <t t-extend="DashboardMain">
         <t t-jquery=".o_web_settings_apps" t-operation="after">
diff --git a/addons/web/static/src/core/commands/command_palette.js b/addons/web/static/src/core/commands/command_palette.js
index 55d5ef7f0a8..82905d691da 100644
--- a/addons/web/static/src/core/commands/command_palette.js
+++ b/addons/web/static/src/core/commands/command_palette.js
@@ -1,5 +1,6 @@
 /** @odoo-module **/
 
+import { Dialog } from "@web/core/dialog/dialog";
 import { useHotkey } from "@web/core/hotkeys/hotkey_hook";
 import { _lt } from "@web/core/l10n/translation";
 import { KeepLast } from "@web/core/utils/concurrency";
@@ -9,7 +10,7 @@ import { fuzzyLookup } from "@web/core/utils/search";
 import { debounce } from "@web/core/utils/timing";
 import { escapeRegExp } from "../utils/strings";
 
-const { Component, onWillStart, useRef, useState, markRaw } = owl;
+const { Component, onWillStart, useRef, useState, markRaw, useExternalListener } = owl;
 
 const DEFAULT_PLACEHOLDER = _lt("Search...");
 const DEFAULT_EMPTY_MESSAGE = _lt("No result found");
@@ -92,6 +93,7 @@ export class CommandPalette extends Component {
             bypassEditableProtection: true,
             allowRepeat: true,
         });
+        useExternalListener(window, "mousedown", this.onWindowMouseDown);
 
         /**
          * @type {{ commands: CommandItem[],
@@ -104,6 +106,7 @@ export class CommandPalette extends Component {
          */
         this.state = useState({});
 
+        this.root = useRef("root");
         this.listboxRef = useRef("listbox");
 
         onWillStart(() => this.setCommandPaletteConfig(this.props.config));
@@ -241,7 +244,7 @@ export class CommandPalette extends Component {
         if (config) {
             this.setCommandPaletteConfig(config);
         } else {
-            this.props.closeMe();
+            this.props.close();
         }
     }
 
@@ -295,6 +298,15 @@ export class CommandPalette extends Component {
         }
     }
 
+    /**
+     * Close the palette on outside click.
+     */
+    onWindowMouseDown(ev) {
+        if (!this.root.el.contains(ev.target)) {
+            this.props.close();
+        }
+    }
+
     switchNamespace(namespace) {
         if (this.lastDebounceSearch) {
             this.lastDebounceSearch.cancel();
@@ -317,3 +329,4 @@ export class CommandPalette extends Component {
     }
 }
 CommandPalette.template = "web.CommandPalette";
+CommandPalette.components = { Dialog };
diff --git a/addons/web/static/src/core/commands/command_palette.xml b/addons/web/static/src/core/commands/command_palette.xml
index 18c503b678d..3b979eb8e69 100644
--- a/addons/web/static/src/core/commands/command_palette.xml
+++ b/addons/web/static/src/core/commands/command_palette.xml
@@ -2,47 +2,48 @@
 <templates xml:space="preserve">
 
   <t t-name="web.CommandPalette" owl="1">
-    <div>
-      <div class="o_command_palette_search input-group mb-2 px-4 py-3 border-bottom">
-        <span t-if="state.namespace !== 'default'" class="o_namespace d-flex align-items-center mr-1" t-out="state.namespace"/>
-        <input class="form-control border-0 p-0" type="text" t-att-value="state.searchValue" t-ref="autofocus" t-att-placeholder="state.placeholder" t-on-input="onSearchInput" t-on-keydown="onKeyDown"/>
-        <span class="input-group-append">
-          <div class="input-group-text border-0 bg-transparent">
-              <i t-att-title="state.placeholder" role="img"  t-att-aria-label="state.placeholder" class="oi oi-search"/>
-          </div>
-        </span>
-      </div>
+    <Dialog header="false" footer="false" size="'md'" contentClass="'o_command_palette mt-5'">
+      <div t-ref="root">
+        <div class="o_command_palette_search input-group mb-2 px-4 py-3 border-bottom">
+          <span t-if="state.namespace !== 'default'" class="o_namespace d-flex align-items-center mr-1" t-out="state.namespace"/>
+          <input class="form-control border-0 p-0" type="text" t-att-value="state.searchValue" t-ref="autofocus" t-att-placeholder="state.placeholder" t-on-input="onSearchInput" t-on-keydown="onKeyDown"/>
+          <span class="input-group-append">
+            <div class="input-group-text border-0 bg-transparent">
+                <i t-att-title="state.placeholder" role="img"  t-att-aria-label="state.placeholder" class="oi oi-search"/>
+            </div>
+          </span>
+        </div>
 
-      <div t-ref="listbox" class="o_command_palette_listbox position-relative overflow-auto">
-        <div t-if="!state.commands.length" class="o_command_palette_listbox_empty px-4 py-3 font-italic" t-out="state.emptyMessage"/>
-        <t t-if="!isFuzzySearch" t-foreach="commandsByCategory" t-as="category" t-key="category.keyId">
-          <div class="o_command_category px-0">
-            <t t-foreach="category.commands" t-as="command" t-key="command.keyId">
-              <t t-set="commandIndex" t-value="state.commands.indexOf(command)"/>
-              <div t-attf-id="o_command_{{commandIndex}}" class="o_command" t-att-class="{ focused: state.selectedCommand === command }" t-on-click="() => this.onCommandClicked(commandIndex)" t-on-mouseenter="() => this.onCommandMouseEnter(commandIndex)" t-on-close="() => this.props.closeMe()">
-                <t t-component="command.Component || DefaultCommandItem" name="command.name" searchValue="state.searchValue" t-props="command.props" executeCommand="() => this.executeCommand(command)">
-                  <t t-set-slot="name">
-                    <span class="o_command_name">
-                      <t t-foreach="command.splitName" t-as="name" t-key="name_index">
-                        <b t-if="name_index % 2" t-out="name" class="text-primary"/>
-                        <t t-else="" t-out="name"/>
-                      </t>
-                    </span>
+        <div t-ref="listbox" class="o_command_palette_listbox position-relative overflow-auto">
+          <div t-if="!state.commands.length" class="o_command_palette_listbox_empty px-4 py-3 font-italic" t-out="state.emptyMessage"/>
+          <t t-if="!isFuzzySearch" t-foreach="commandsByCategory" t-as="category" t-key="category.keyId">
+            <div class="o_command_category px-0">
+              <t t-foreach="category.commands" t-as="command" t-key="command.keyId">
+                <t t-set="commandIndex" t-value="state.commands.indexOf(command)"/>
+                <div t-attf-id="o_command_{{commandIndex}}" class="o_command" t-att-class="{ focused: state.selectedCommand === command }" t-on-click="() => this.onCommandClicked(commandIndex)" t-on-mouseenter="() => this.onCommandMouseEnter(commandIndex)" t-on-close="() => this.props.closeMe()">
+                  <t t-component="command.Component || DefaultCommandItem" name="command.name" searchValue="state.searchValue" t-props="command.props" executeCommand="() => this.executeCommand(command)">
+                    <t t-set-slot="name">
+                      <span class="o_command_name">
+                        <t t-foreach="command.splitName" t-as="name" t-key="name_index">
+                          <b t-if="name_index % 2" t-out="name" class="text-primary"/>
+                          <t t-else="" t-out="name"/>
+                        </t>
+                      </span>
+                    </t>
                   </t>
-                </t>
-              </div>
-            </t>
-          </div>
+                </div>
+              </t>
+            </div>
 
-          <hr class="my-2 mx-0" t-if="!category_last" />
-        </t>
+            <hr class="my-2 mx-0" t-if="!category_last" />
+          </t>
+        </div>
+
+        <div t-if="state.FooterComponent" class="o_command_palette_footer mt-2 px-4 py-2 border-top bg-100 text-muted">
+          <t t-component="state.FooterComponent" switchNamespace="(namespace) => this.debounceSearch(namespace.concat(this.state.searchValue))"/>
+        </div>
       </div>
-
-      <div t-if="state.FooterComponent" class="o_command_palette_footer mt-2 px-4 py-2 border-top bg-100 text-muted">
-        <t t-component="state.FooterComponent" switchNamespace="(namespace) => this.debounceSearch(namespace.concat(this.state.searchValue))"/>
-      </div>
-
-    </div>
+    </Dialog>
   </t>
 
 </templates>
diff --git a/addons/web/static/src/core/commands/command_palette_dialog.js b/addons/web/static/src/core/commands/command_palette_dialog.js
deleted file mode 100644
index b99f07a6ee8..00000000000
--- a/addons/web/static/src/core/commands/command_palette_dialog.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/** @odoo-module **/
-
-import { Dialog } from "@web/core/dialog/dialog";
-import { CommandPalette } from "./command_palette";
-
-const { useExternalListener } = owl;
-
-/**
- * @typedef {import("./command_service").Command} Command
- */
-
-export class CommandPaletteDialog extends Dialog {
-    setup() {
-        super.setup();
-        useExternalListener(window, "mousedown", this.onWindowMouseDown);
-    }
-
-    /**
-     * Used to close ourself on outside click.
-     */
-    onWindowMouseDown(ev) {
-        const element = ev.target.parentElement;
-        const gotClickedInside = this.modalRef.el.contains(element);
-        if (!gotClickedInside) {
-            this.close();
-        }
-    }
-}
-CommandPaletteDialog.renderHeader = false;
-CommandPaletteDialog.renderFooter = false;
-CommandPaletteDialog.size = "modal-md";
-CommandPaletteDialog.contentClass = "o_command_palette mt-5";
-CommandPaletteDialog.bodyTemplate = "web.CommandPaletteDialogBody";
-CommandPaletteDialog.components = Object.assign({}, Dialog.components, { CommandPalette });
diff --git a/addons/web/static/src/core/commands/command_palette_dialog.xml b/addons/web/static/src/core/commands/command_palette_dialog.xml
deleted file mode 100644
index 5f1711a3375..00000000000
--- a/addons/web/static/src/core/commands/command_palette_dialog.xml
+++ /dev/null
@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates xml:space="preserve">
-
-  <t t-name="web.CommandPaletteDialogBody" owl="1">
-    <CommandPalette t-props="props" closeMe="close"/>
-  </t>
-
-</templates>
diff --git a/addons/web/static/src/core/commands/command_service.js b/addons/web/static/src/core/commands/command_service.js
index 28d98279793..2b4912a3e7d 100644
--- a/addons/web/static/src/core/commands/command_service.js
+++ b/addons/web/static/src/core/commands/command_service.js
@@ -1,7 +1,7 @@
 /** @odoo-module **/
 
 import { registry } from "@web/core/registry";
-import { CommandPaletteDialog } from "./command_palette_dialog";
+import { CommandPalette } from "./command_palette";
 
 const { Component, xml } = owl;
 
@@ -136,7 +136,7 @@ export const commandService = {
             // Open Command Palette dialog
             isPaletteOpened = true;
             dialog.add(
-                CommandPaletteDialog,
+                CommandPalette,
                 {
                     config,
                 },
diff --git a/addons/web/static/src/core/confirmation_dialog/confirmation_dialog.js b/addons/web/static/src/core/confirmation_dialog/confirmation_dialog.js
index ebfabe424fb..d6c52b58259 100644
--- a/addons/web/static/src/core/confirmation_dialog/confirmation_dialog.js
+++ b/addons/web/static/src/core/confirmation_dialog/confirmation_dialog.js
@@ -3,27 +3,27 @@
 import { Dialog } from "../dialog/dialog";
 import { _lt } from "../l10n/translation";
 
-export class ConfirmationDialog extends Dialog {
-    setup() {
-        super.setup();
-        this.title = this.props.title;
-    }
+const { Component } = owl;
+
+export class ConfirmationDialog extends Component {
     _cancel() {
         if (this.props.cancel) {
             this.props.cancel();
         }
-        this.close();
+        this.props.close();
     }
 
     _confirm() {
         if (this.props.confirm) {
             this.props.confirm();
         }
-        this.close();
+        this.props.close();
     }
 }
+ConfirmationDialog.template = "web.ConfirmationDialog";
+ConfirmationDialog.components = { Dialog };
 ConfirmationDialog.props = {
-    ...Dialog.props,
+    close: Function,
     title: {
         validate: (m) => {
             return (
@@ -40,23 +40,12 @@ ConfirmationDialog.defaultProps = {
     title: _lt("Confirmation"),
 };
 
-ConfirmationDialog.bodyTemplate = "web.ConfirmationDialogBody";
-ConfirmationDialog.footerTemplate = "web.ConfirmationDialogFooter";
-ConfirmationDialog.size = "modal-md";
-
-export class AlertDialog extends ConfirmationDialog {
-    setup() {
-        super.setup();
-        if ("contentClass" in this.props) {
-            this.contentClass = this.props.contentClass;
-        }
-    }
-}
-AlertDialog.size = "modal-sm";
-AlertDialog.props = Object.assign(Object.create(ConfirmationDialog.props), {
+export class AlertDialog extends ConfirmationDialog {}
+AlertDialog.template = "web.AlertDialog";
+AlertDialog.props = {
+    ...ConfirmationDialog.props,
     contentClass: { type: String, optional: true },
-});
-
+};
 AlertDialog.defaultProps = {
     title: _lt("Alert"),
 };
diff --git a/addons/web/static/src/core/confirmation_dialog/confirmation_dialog.xml b/addons/web/static/src/core/confirmation_dialog/confirmation_dialog.xml
index 45606c1c04a..e1b6de8ea0a 100644
--- a/addons/web/static/src/core/confirmation_dialog/confirmation_dialog.xml
+++ b/addons/web/static/src/core/confirmation_dialog/confirmation_dialog.xml
@@ -1,17 +1,32 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <templates xml:space="preserve">
 
-  <t t-name="web.ConfirmationDialogBody" owl="1">
-    <t t-esc="props.body" />
+  <t t-name="web.ConfirmationDialog" owl="1">
+    <Dialog size="'md'" title="props.title">
+      <t t-esc="props.body" />
+      <t t-set-slot="footer" owl="1">
+        <button class="btn btn-primary" t-on-click="_confirm">
+          Ok
+        </button>
+        <button t-if="props.cancel" class="btn btn-secondary" t-on-click="_cancel">
+          Cancel
+        </button>
+      </t>
+    </Dialog>
   </t>
 
-  <t t-name="web.ConfirmationDialogFooter" owl="1">
-    <button class="btn btn-primary" t-on-click="_confirm">
-      Ok
-    </button>
-    <button t-if="props.cancel" class="btn btn-secondary" t-on-click="_cancel">
-      Cancel
-    </button>
+  <t t-name="web.AlertDialog" owl="1">
+    <Dialog size="'sm'" title="props.title" contentClass="props.contentClass">
+      <t t-esc="props.body" />
+      <t t-set-slot="footer" owl="1">
+        <button class="btn btn-primary" t-on-click="_confirm">
+          Ok
+        </button>
+        <button t-if="props.cancel" class="btn btn-secondary" t-on-click="_cancel">
+          Cancel
+        </button>
+      </t>
+    </Dialog>
   </t>
 
 </templates>
\ No newline at end of file
diff --git a/addons/web/static/src/core/debug/debug_menu_items.xml b/addons/web/static/src/core/debug/debug_menu_items.xml
index 29f5294cb82..662de7d126e 100644
--- a/addons/web/static/src/core/debug/debug_menu_items.xml
+++ b/addons/web/static/src/core/debug/debug_menu_items.xml
@@ -1,102 +1,105 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 
-    <t t-name="web.DebugMenu.SetDefaultFooter" owl="1">
-        <button class="btn btn-secondary" t-on-click="() => this.trigger('dialog-closed')">Close</button>
-        <button class="btn btn-secondary" t-on-click="saveDefault">Save default</button>
+    <t t-name="web.DebugMenu.SetDefaultDialog" owl="1">
+        <Dialog title="this.constructor.title">
+            <table style="width: 100%">
+                <tr>
+                    <td>
+                        <label for="formview_default_fields"
+                            class="oe_label oe_align_right">
+                            Default:
+                        </label>
+                    </td>
+                    <td class="oe_form_required">
+                        <select id="formview_default_fields" class="o_input" t-model="state.fieldToSet">
+                            <option value=""/>
+                            <option t-foreach="defaultFields" t-as="field"
+                                    t-att-value="field.name">
+                                <t t-esc="field.string"/> = <t t-esc="field.displayed"/>
+                            </option>
+                        </select>
+                    </td>
+                </tr>
+                <tr t-if="conditions.length">
+                    <td>
+                        <label for="formview_default_conditions"
+                            class="oe_label oe_align_right">
+                            Condition:
+                        </label>
+                    </td>
+                    <td>
+                        <select id="formview_default_conditions" class="o_input" t-model="state.condition">
+                            <option value=""/>
+                            <option t-foreach="conditions" t-as="cond"
+                                    t-att-value="cond.name + '=' + cond.value">
+                                <t t-esc="cond.string"/>=<t t-esc="cond.displayed"/>
+                            </option>
+                        </select>
+                    </td>
+                </tr>
+                <tr>
+                    <td colspan="2">
+                        <input type="radio" id="formview_default_self"
+                            value="self" name="scope" t-model="state.scope"/>
+                        <label for="formview_default_self" class="oe_label"
+                            style="display: inline;">
+                            Only you
+                        </label>
+                        <br/>
+                        <input type="radio" id="formview_default_all"
+                            value="all" name="scope" t-model="state.scope"/>
+                        <label for="formview_default_all" class="oe_label"
+                            style="display: inline;">
+                            All users
+                        </label>
+                    </td>
+                </tr>
+            </table>
+            <t t-set-slot="footer">
+                <button class="btn btn-secondary" t-on-click="props.close">Close</button>
+                <button class="btn btn-secondary" t-on-click="saveDefault">Save default</button>
+            </t>
+        </Dialog>
     </t>
 
-    <t t-name="web.DebugMenu.setDefaultBody" owl="1">
-        <table style="width: 100%">
-            <tr>
-                <td>
-                    <label for="formview_default_fields"
-                           class="oe_label oe_align_right">
-                        Default:
-                    </label>
-                </td>
-                <td class="oe_form_required">
-                    <select id="formview_default_fields" class="o_input" t-model="state.fieldToSet">
-                        <option value=""/>
-                        <option t-foreach="defaultFields" t-as="field"
-                                t-att-value="field.name">
-                            <t t-esc="field.string"/> = <t t-esc="field.displayed"/>
-                        </option>
-                    </select>
-                </td>
-            </tr>
-            <tr t-if="conditions.length">
-                <td>
-                    <label for="formview_default_conditions"
-                        class="oe_label oe_align_right">
-                        Condition:
-                    </label>
-                </td>
-                <td>
-                    <select id="formview_default_conditions" class="o_input" t-model="state.condition">
-                        <option value=""/>
-                        <option t-foreach="conditions" t-as="cond"
-                                t-att-value="cond.name + '=' + cond.value">
-                            <t t-esc="cond.string"/>=<t t-esc="cond.displayed"/>
-                        </option>
-                    </select>
-                </td>
-            </tr>
-            <tr>
-                <td colspan="2">
-                    <input type="radio" id="formview_default_self"
-                        value="self" name="scope" t-model="state.scope"/>
-                    <label for="formview_default_self" class="oe_label"
-                        style="display: inline;">
-                        Only you
-                    </label>
-                    <br/>
-                    <input type="radio" id="formview_default_all"
-                        value="all" name="scope" t-model="state.scope"/>
-                    <label for="formview_default_all" class="oe_label"
-                        style="display: inline;">
-                        All users
-                    </label>
-                </td>
-            </tr>
-        </table>
-    </t>
-
-    <t t-name="web.DebugMenu.getMetadataBody" owl="1">
-        <table class="table table-sm table-striped">
-            <tr>
-                <th>ID:</th>
-                <td><t t-esc="state.id"/></td>
-            </tr>
-            <tr>
-                <th>XML ID:</th>
-                <td><t t-esc="state.xmlid or '/'"/></td>
-            </tr>
-            <tr>
-                <th>No Update:</th>
-                <td>
-                    <t t-esc="state.noupdate"/>
-                    <t t-if="state.xmlid">
-                        <a t-on-click="toggleNoupdate"> (change)</a>
-                    </t>
-                </td>
-            </tr>
-            <tr>
-                <th>Creation User:</th>
-                <td><t t-esc="state.creator"/></td>
-            </tr>
-            <tr>
-                <th>Creation Date:</th>
-                <td><t t-esc="state.create_date"/></td>
-            </tr>
-            <tr>
-                <th>Latest Modification by:</th>
-                <td><t t-esc="state.lastModifiedBy"/></td>
-            </tr>
-            <tr>
-                <th>Latest Modification Date:</th>
-                <td><t t-esc="state.write_date"/></td>
-            </tr>
-        </table>
+    <t t-name="web.DebugMenu.GetMetadataDialog" owl="1">
+        <Dialog title="this.constructor.title">
+            <table class="table table-sm table-striped">
+                <tr>
+                    <th>ID:</th>
+                    <td><t t-esc="state.id"/></td>
+                </tr>
+                <tr>
+                    <th>XML ID:</th>
+                    <td><t t-esc="state.xmlid or '/'"/></td>
+                </tr>
+                <tr>
+                    <th>No Update:</th>
+                    <td>
+                        <t t-esc="state.noupdate"/>
+                        <t t-if="state.xmlid">
+                            <a t-on-click="toggleNoupdate"> (change)</a>
+                        </t>
+                    </td>
+                </tr>
+                <tr>
+                    <th>Creation User:</th>
+                    <td><t t-esc="state.creator"/></td>
+                </tr>
+                <tr>
+                    <th>Creation Date:</th>
+                    <td><t t-esc="state.create_date"/></td>
+                </tr>
+                <tr>
+                    <th>Latest Modification by:</th>
+                    <td><t t-esc="state.lastModifiedBy"/></td>
+                </tr>
+                <tr>
+                    <th>Latest Modification Date:</th>
+                    <td><t t-esc="state.write_date"/></td>
+                </tr>
+            </table>
+        </Dialog>
     </t>
 </templates>
diff --git a/addons/web/static/src/core/dialog/dialog.js b/addons/web/static/src/core/dialog/dialog.js
index 0b595e8660d..2e4a5a3d34c 100644
--- a/addons/web/static/src/core/dialog/dialog.js
+++ b/addons/web/static/src/core/dialog/dialog.js
@@ -3,52 +3,41 @@
 import { useHotkey } from "@web/core/hotkeys/hotkey_hook";
 import { useActiveElement } from "../ui/ui_service";
 
-const { Component, useRef, useChildSubEnv, xml } = owl;
-
+const { Component, useRef, useChildSubEnv, useState } = owl;
 export class Dialog extends Component {
     setup() {
-        if (this.constructor === Dialog) {
-            throw new Error(
-                "Dialog should not be used by itself. Please use the dialog service with a Dialog subclass."
-            );
-        }
         this.modalRef = useRef("modal");
         useActiveElement("modal");
+        this.data = useState(this.env.dialogData);
         useHotkey("escape", () => {
-            this.close();
+            this.data.close();
         });
         useChildSubEnv({ inDialog: true });
-        this.close = this.close.bind(this);
-        this.contentClass = this.constructor.contentClass;
-        this.fullscreen = this.constructor.fullscreen;
-        this.renderFooter = this.constructor.renderFooter;
-        this.renderHeader = this.constructor.renderHeader;
-        this.size = this.constructor.size;
-        this.technical = this.constructor.technical;
-        this.title = this.constructor.title;
-    }
-
-    /**
-     * Send an event signaling that the dialog should be closed.
-     * @private
-     */
-    close() {
-        this.props.close();
     }
 }
-
 Dialog.template = "web.Dialog";
-Dialog.contentClass = null;
-Dialog.fullscreen = false;
-Dialog.renderFooter = true;
-Dialog.renderHeader = true;
-Dialog.size = "modal-lg";
-Dialog.technical = true;
-Dialog.title = "Odoo";
-Dialog.bodyTemplate = xml`<div/>`;
-Dialog.footerTemplate = "web.DialogFooterDefault";
 Dialog.props = {
-    close: Function,
-    isActive: { optional: true },
-    "*": true,
+    contentClass: { type: String, optional: true },
+    fullscreen: { type: Boolean, optional: true },
+    footer: { type: Boolean, optional: true },
+    header: { type: Boolean, optional: true },
+    size: { type: String, optional: true, validate: (s) => ["sm", "md", "lg", "xl"].includes(s) },
+    technical: { type: Boolean, optional: true },
+    title: { type: String, optional: true },
+    slots: {
+        type: Object,
+        shape: {
+            default: Object, // Content is not optional
+            footer: { type: Object, optional: true },
+        },
+    },
+};
+Dialog.defaultProps = {
+    contentClass: "",
+    fullscreen: false,
+    footer: true,
+    header: true,
+    size: "lg",
+    technical: true,
+    title: "Odoo",
 };
diff --git a/addons/web/static/src/core/dialog/dialog.xml b/addons/web/static/src/core/dialog/dialog.xml
index 8d38e572e64..b3d0c797e38 100644
--- a/addons/web/static/src/core/dialog/dialog.xml
+++ b/addons/web/static/src/core/dialog/dialog.xml
@@ -2,35 +2,33 @@
 <templates xml:space="preserve">
 
     <t t-name="web.Dialog" owl="1">
-        <div class="o_dialog" t-att-class="{ o_inactive_modal: !props.isActive }" t-on-dialog-closed="close">
+        <div class="o_dialog" t-att-class="{ o_inactive_modal: !data.isActive }">
             <div role="dialog" class="modal d-block"
                 tabindex="-1"
-                t-att-class="{ o_technical_modal: technical, o_modal_full: fullscreen }"
+                t-att-class="{ o_technical_modal: props.technical, o_modal_full: props.fullscreen }"
                 t-ref="modal"
                 >
-                <div class="modal-dialog" t-att-class="size">
-                    <div class="modal-content" t-att-class="contentClass">
-                        <header t-if="renderHeader" class="modal-header">
+                <div class="modal-dialog" t-attf-class="modal-{{props.size}}">
+                    <div class="modal-content" t-att-class="props.contentClass">
+                        <header t-if="props.header" class="modal-header">
                             <h4 class="modal-title text-break">
-                                <t t-esc="title"/>
+                                <t t-esc="props.title"/>
                             </h4>
-                            <button type="button" class="close" aria-label="Close" tabindex="-1" t-on-click="close">×</button>
+                            <button type="button" class="close" aria-label="Close" tabindex="-1" t-on-click="data.close">×</button>
                         </header>
                         <main class="modal-body">
-                            <t t-call="{{ constructor.bodyTemplate }}"/>
+                            <t t-slot="default"/>
                         </main>
-                        <footer t-if="renderFooter" class="modal-footer justify-content-start">
-                            <t t-call="{{ constructor.footerTemplate }}" />
+                        <footer t-if="props.footer" class="modal-footer justify-content-start">
+                            <t t-slot="footer">
+                                <button class="btn btn-primary" t-on-click="data.close">
+                                    <t>Ok</t>
+                                </button>
+                            </t>
                         </footer>
                     </div>
                 </div>
             </div>
         </div>
     </t>
-
-    <t t-name="web.DialogFooterDefault" owl="1">
-        <button class="btn btn-primary" t-on-click="close">
-            <t>Ok</t>
-        </button>
-    </t>
 </templates>
diff --git a/addons/web/static/src/core/dialog/dialog_container.js b/addons/web/static/src/core/dialog/dialog_container.js
index cad66a043cc..51c53b44e9a 100644
--- a/addons/web/static/src/core/dialog/dialog_container.js
+++ b/addons/web/static/src/core/dialog/dialog_container.js
@@ -1,36 +1,28 @@
 /** @odoo-module **/
 
-import { ErrorHandler } from "../utils/components";
+import { ErrorHandler, WithEnv } from "../utils/components";
 
 const { Component, xml } = owl;
 
 export class DialogContainer extends Component {
-    setup() {
-        this.props.bus.addEventListener("UPDATE", this.render.bind(this));
-    }
-
-    close(id) {
-        if (this.props.dialogs[id]) {
-            this.props.dialogs[id].props.close();
-        }
-    }
-
-    handleError(error, dialogId) {
-        this.close(dialogId);
+    handleError(error, dialog) {
+        dialog.props.close();
         Promise.resolve().then(() => {
             throw error;
         });
     }
 }
-DialogContainer.components = { ErrorHandler };
+DialogContainer.components = { ErrorHandler, WithEnv };
 //Legacy : The div wrapping the t-foreach, is placed to avoid owl to delete non-owl dialogs.
 //This div can be removed after removing all legacy dialogs.
 DialogContainer.template = xml`
     <div class="o_dialog_container" t-att-class="{'modal-open': Object.keys(props.dialogs).length > 0}">
         <div>
             <t t-foreach="Object.values(props.dialogs)" t-as="dialog" t-key="dialog.id">
-                <ErrorHandler onError="(error) => this.handleError(error, dialog.id)">
-                    <t t-component="dialog.class" t-props="dialog.props" isActive="dialog_last"/>
+                <ErrorHandler onError="(error) => this.handleError(error, dialog)">
+                    <WithEnv env="{ dialogData: dialog.dialogData }">
+                        <t t-component="dialog.class" t-props="dialog.props"/>
+                    </WithEnv>
                 </ErrorHandler>
             </t>
         </div>
diff --git a/addons/web/static/src/core/dialog/dialog_service.js b/addons/web/static/src/core/dialog/dialog_service.js
index b55faa0ef4d..18be68c8aba 100644
--- a/addons/web/static/src/core/dialog/dialog_service.js
+++ b/addons/web/static/src/core/dialog/dialog_service.js
@@ -1,10 +1,9 @@
 /** @odoo-module **/
 
 import { registry } from "../registry";
-import { Dialog } from "./dialog";
 import { DialogContainer } from "./dialog_container";
 
-const { EventBus } = owl;
+const { reactive } = owl;
 
 /**
  *  @typedef {{
@@ -24,28 +23,28 @@ const { EventBus } = owl;
 export const dialogService = {
     /** @returns {DialogServiceInterface} */
     start() {
-        const dialogs = {};
-        const bus = new EventBus();
+        const dialogs = reactive({});
         let dialogId = 0;
 
         registry.category("main_components").add("DialogContainer", {
             Component: DialogContainer,
-            props: { bus, dialogs },
+            props: { dialogs },
         });
 
         function add(dialogClass, props, options = {}) {
-            if (!(dialogClass.prototype instanceof Dialog)) {
-                throw new Error(`${dialogClass.name} must be a subclass of Dialog`);
+            for (const dialog of Object.values(dialogs)) {
+                dialog.dialogData.isActive = false;
             }
-
             const id = ++dialogId;
             function close() {
                 if (dialogs[id]) {
                     delete dialogs[id];
+                    Object.values(dialogs).forEach((dialog, i, dialogArr) => {
+                        dialog.dialogData.isActive = i === dialogArr.length - 1;
+                    });
                     if (options.onClose) {
                         options.onClose();
                     }
-                    bus.trigger("UPDATE");
                 }
             }
 
@@ -53,9 +52,9 @@ export const dialogService = {
                 id,
                 class: dialogClass,
                 props: { ...props, close },
+                dialogData: { isActive: true, close },
             };
             dialogs[id] = dialog;
-            bus.trigger("UPDATE");
 
             return close;
         }
diff --git a/addons/web/static/src/core/errors/error_dialogs.js b/addons/web/static/src/core/errors/error_dialogs.js
index 83309362c4e..c8a3f1d569f 100644
--- a/addons/web/static/src/core/errors/error_dialogs.js
+++ b/addons/web/static/src/core/errors/error_dialogs.js
@@ -7,7 +7,7 @@ import { registry } from "../registry";
 import { useService } from "@web/core/utils/hooks";
 import { capitalize } from "../utils/strings";
 
-const { useState } = owl;
+const { Component, useState } = owl;
 
 export const odooExceptionTitleMap = new Map(
     Object.entries({
@@ -26,9 +26,8 @@ export const odooExceptionTitleMap = new Map(
 // -----------------------------------------------------------------------------
 // Generic Error Dialog
 // -----------------------------------------------------------------------------
-export class ErrorDialog extends Dialog {
+export class ErrorDialog extends Component {
     setup() {
-        super.setup();
         this.state = useState({
             showTraceback: false,
         });
@@ -39,8 +38,8 @@ export class ErrorDialog extends Dialog {
         );
     }
 }
-ErrorDialog.contentClass = "o_dialog_error";
-ErrorDialog.bodyTemplate = "web.ErrorDialogBody";
+ErrorDialog.template = "web.ErrorDialog";
+ErrorDialog.components = { Dialog };
 ErrorDialog.title = _lt("Odoo Error");
 
 // -----------------------------------------------------------------------------
@@ -98,11 +97,9 @@ export class RPCErrorDialog extends ErrorDialog {
 // -----------------------------------------------------------------------------
 // Warning Dialog
 // -----------------------------------------------------------------------------
-export class WarningDialog extends Dialog {
+export class WarningDialog extends Component {
     setup() {
-        super.setup();
-        this.title = this.env._t("Odoo Warning");
-        this.inferTitle();
+        this.title = this.inferTitle();
         const { data, message } = this.props;
         if (data && data.arguments && data.arguments.length > 0) {
             this.message = data.arguments[0];
@@ -112,26 +109,27 @@ export class WarningDialog extends Dialog {
     }
     inferTitle() {
         if (this.props.exceptionName && odooExceptionTitleMap.has(this.props.exceptionName)) {
-            this.title = odooExceptionTitleMap.get(this.props.exceptionName).toString();
+            return odooExceptionTitleMap.get(this.props.exceptionName).toString();
         }
+        return this.env._t("Odoo Warning");
     }
 }
-WarningDialog.bodyTemplate = "web.WarningDialogBody";
+WarningDialog.template = "web.WarningDialog";
+WarningDialog.components = { Dialog };
 
 // -----------------------------------------------------------------------------
 // Redirect Warning Dialog
 // -----------------------------------------------------------------------------
-export class RedirectWarningDialog extends Dialog {
+export class RedirectWarningDialog extends Component {
     setup() {
-        super.setup();
         this.actionService = useService("action");
         const { data, subType } = this.props;
-        const [message, actionId, buttonText, additional_context] = data.arguments;
+        const [message, actionId, buttonText, additionalContext] = data.arguments;
         this.title = capitalize(subType) || this.env._t("Odoo Warning");
         this.message = message;
         this.actionId = actionId;
         this.buttonText = buttonText;
-        this.additionalContext = additional_context;
+        this.additionalContext = additionalContext;
     }
     async onClick() {
         const options = {};
@@ -139,32 +137,30 @@ export class RedirectWarningDialog extends Dialog {
             options.additionalContext = this.additionalContext;
         }
         await this.actionService.doAction(this.actionId, options);
-        this.close();
-    }
-    onCancel() {
-        this.close();
+        this.props.close();
     }
 }
-RedirectWarningDialog.bodyTemplate = "web.RedirectWarningDialogBody";
-RedirectWarningDialog.footerTemplate = "web.RedirectWarningDialogFooter";
+RedirectWarningDialog.template = "web.RedirectWarningDialog";
+RedirectWarningDialog.components = { Dialog };
 
 // -----------------------------------------------------------------------------
 // Error 504 Dialog
 // -----------------------------------------------------------------------------
-export class Error504Dialog extends Dialog {}
-Error504Dialog.bodyTemplate = "web.Error504DialogBody";
+export class Error504Dialog extends Component {}
+Error504Dialog.template = "web.Error504Dialog";
+Error504Dialog.components = { Dialog };
 Error504Dialog.title = _lt("Request timeout");
 
 // -----------------------------------------------------------------------------
 // Expired Session Error Dialog
 // -----------------------------------------------------------------------------
-export class SessionExpiredDialog extends Dialog {
+export class SessionExpiredDialog extends Component {
     onClick() {
         browser.location.reload();
     }
 }
-SessionExpiredDialog.bodyTemplate = "web.SessionExpiredDialogBody";
-SessionExpiredDialog.footerTemplate = "web.SessionExpiredDialogFooter";
+SessionExpiredDialog.template = "web.SessionExpiredDialog";
+SessionExpiredDialog.components = { Dialog };
 SessionExpiredDialog.title = _lt("Odoo Session Expired");
 
 registry
diff --git a/addons/web/static/src/core/errors/error_dialogs.xml b/addons/web/static/src/core/errors/error_dialogs.xml
index fdef9962057..10f56e06a84 100644
--- a/addons/web/static/src/core/errors/error_dialogs.xml
+++ b/addons/web/static/src/core/errors/error_dialogs.xml
@@ -1,63 +1,71 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 
-    <t t-name="web.WarningDialogBody" owl="1">
-      <div role="alert" class="o_dialog_warning">
-        <p t-esc="message" style="white-space: pre-wrap;"/>
-      </div>
+    <t t-name="web.WarningDialog" owl="1">
+      <Dialog title="title">
+        <div role="alert" class="o_dialog_warning">
+          <p t-esc="message" style="white-space: pre-wrap;"/>
+        </div>
+      </Dialog>
     </t>
 
-    <t t-name="web.RedirectWarningDialogBody" owl="1">
-      <div role="alert">
-        <p t-esc="message" style="white-space: pre-wrap;"/>
-      </div>
+    <t t-name="web.RedirectWarningDialog" owl="1">
+      <Dialog title="title">
+        <div role="alert">
+          <p t-esc="message" style="white-space: pre-wrap;"/>
+        </div>
+        <t t-set-slot="footer">
+          <button class="btn btn-primary" t-on-click="onClick" t-esc="buttonText"/>
+          <button class="btn btn-secondary" t-on-click="props.close">Cancel</button>
+        </t>
+      </Dialog>
     </t>
 
-    <t t-name="web.RedirectWarningDialogFooter" owl="1">
-      <button  class="btn btn-primary" t-on-click="onClick"><t t-esc="env._t(buttonText)"/></button>
-      <button  class="btn btn-secondary" t-on-click="onCancel">Cancel</button>
-    </t>
-
-    <t t-name="web.Error504DialogBody" owl="1">
+    <t t-name="web.Error504Dialog" owl="1">
+      <Dialog title="this.constructor.title">
         <div role="alert">
             <p style="white-space: pre-wrap;">
             The operation was interrupted. This usually means that the current operation is taking too much time.
             </p>
         </div>
+      </Dialog>
     </t>
 
-    <t t-name="web.SessionExpiredDialogBody" owl="1">
-      <div role="alert">
-        <p style="white-space: pre-wrap;">
-          Your Odoo session expired. The current page is about to be refreshed.
-        </p>
-      </div>
+    <t t-name="web.SessionExpiredDialog" owl="1">
+      <Dialog title="this.constructor.title">
+        <div role="alert">
+          <p style="white-space: pre-wrap;">
+            Your Odoo session expired. The current page is about to be refreshed.
+          </p>
+        </div>
+        <t t-set-slot="footer">
+          <button class="btn btn-primary" t-on-click="onClick">Ok</button>
+        </t>
+      </Dialog>
     </t>
 
-    <t t-name="web.SessionExpiredDialogFooter" owl="1">
-        <button class="btn btn-primary" t-on-click="onClick">Ok</button>
-    </t>
-
-     <t t-name="web.ErrorDialogBody" owl="1">
-      <div class="alert alert-warning clearfix" role="alert">
-          <div class="float-right ml8 btn-group-vertical">
-              <button class="btn btn-primary" t-on-click="onClickClipboard">
-                  <i class="fa fa-clipboard mr8"/><t>Copy the full error to clipboard</t>
-              </button>
-          </div>
-          <p><b>An error occurred</b></p>
-          <p>Please use the copy button to report the error to your support service.</p>
-      </div>
+    <t t-name="web.ErrorDialog" owl="1">
+      <Dialog contentClass="'o_dialog_error'" title="this.constructor.title">
+        <div class="alert alert-warning clearfix" role="alert">
+            <div class="float-right ml8 btn-group-vertical">
+                <button class="btn btn-primary" t-on-click="onClickClipboard">
+                    <i class="fa fa-clipboard mr8"/><t>Copy the full error to clipboard</t>
+                </button>
+            </div>
+            <p><b>An error occurred</b></p>
+            <p>Please use the copy button to report the error to your support service.</p>
+        </div>
 
 
-      <button class="btn btn-link" t-on-click="() => { state.showTraceback = !state.showTraceback }">See details</button>
-      <div t-if="state.showTraceback and (props.name or props.message)" class="alert clearfix" style="background-color:#ececec;" role="alert">
-        <code t-if="props.name" t-esc="props.name"></code>
-        <p t-if="props.message" t-esc="props.message"></p>
-      </div>
-      <div t-if="state.showTraceback" class="alert alert-danger o_error_detail" role="alert">
-          <pre t-esc="traceback or props.traceback"/>
-      </div>
+        <button class="btn btn-link" t-on-click="() => { state.showTraceback = !state.showTraceback }">See details</button>
+        <div t-if="state.showTraceback and (props.name or props.message)" class="alert clearfix" style="background-color:#ececec;" role="alert">
+          <code t-if="props.name" t-esc="props.name"></code>
+          <p t-if="props.message" t-esc="props.message"></p>
+        </div>
+        <div t-if="state.showTraceback" class="alert alert-danger o_error_detail" role="alert">
+            <pre t-esc="traceback or props.traceback"/>
+        </div>
+      </Dialog>
     </t>
 
 </templates>
diff --git a/addons/web/static/src/core/utils/components.js b/addons/web/static/src/core/utils/components.js
index 254d2fd79c2..e0dcd5e19e5 100644
--- a/addons/web/static/src/core/utils/components.js
+++ b/addons/web/static/src/core/utils/components.js
@@ -1,6 +1,6 @@
 /** @odoo-module **/
 
-const { Component, onError, xml } = owl;
+const { Component, onError, xml, useSubEnv } = owl;
 
 export class ErrorHandler extends Component {
     setup() {
@@ -11,3 +11,10 @@ export class ErrorHandler extends Component {
 }
 ErrorHandler.template = xml`<t t-slot="default" />`;
 ErrorEvent.props = ["onError"];
+
+export class WithEnv extends Component {
+    setup() {
+        useSubEnv(this.props.env);
+    }
+}
+WithEnv.template = xml`<t t-slot="default"/>`;
diff --git a/addons/web/static/src/legacy/action_adapters.js b/addons/web/static/src/legacy/action_adapters.js
index 0adfc09c1dd..6dafd45e0c0 100644
--- a/addons/web/static/src/legacy/action_adapters.js
+++ b/addons/web/static/src/legacy/action_adapters.js
@@ -24,7 +24,11 @@ const {
     xml,
 } = owl;
 
-const warningDialogBodyTemplate = xml`<t t-esc="props.message"/>`;
+class WarningDialog extends Component {}
+WarningDialog.template = xml`<Dialog title="props.title">
+    <t t-esc="props.message"/>
+</Dialog>`;
+WarningDialog.components = { Dialog };
 
 class ActionAdapter extends ComponentAdapter {
     setup() {
@@ -134,13 +138,6 @@ class ActionAdapter extends ComponentAdapter {
             this.title.setParts({ [part]: title || null });
         } else if (ev.name === "warning") {
             if (payload.type === "dialog") {
-                class WarningDialog extends Dialog {
-                    setup() {
-                        super.setup();
-                        this.title = this.props.title;
-                    }
-                }
-                WarningDialog.bodyTemplate = warningDialogBodyTemplate;
                 this.dialogs.add(WarningDialog, {
                     title: payload.title,
                     message: payload.message,
diff --git a/addons/web/static/src/legacy/debug_manager.js b/addons/web/static/src/legacy/debug_manager.js
index 4112f06730c..93d305459f6 100644
--- a/addons/web/static/src/legacy/debug_manager.js
+++ b/addons/web/static/src/legacy/debug_manager.js
@@ -6,11 +6,11 @@ import { formatDateTime, parseDateTime } from "@web/core/l10n/dates";
 import { formatMany2one } from "@web/fields/formatters";
 import { registry } from "@web/core/registry";
 
-const { onWillStart, useState } = owl;
+const { Component, onWillStart, useState } = owl;
 
 const debugRegistry = registry.category("debug");
 
-class GetMetadataDialog extends Dialog {
+class GetMetadataDialog extends Component {
     setup() {
         super.setup();
         this.state = useState({});
@@ -44,9 +44,10 @@ class GetMetadataDialog extends Dialog {
         this.state.write_date = formatDateTime(parseDateTime(metadata.write_date));
     }
 }
-GetMetadataDialog.bodyTemplate = "web.DebugMenu.getMetadataBody";
+GetMetadataDialog.template = "web.DebugMenu.GetMetadataDialog";
+GetMetadataDialog.components = { Dialog };
 GetMetadataDialog.title = _lt("View Metadata");
-class SetDefaultDialog extends Dialog {
+class SetDefaultDialog extends Component {
     setup() {
         super.setup();
         this.state = {
@@ -184,11 +185,11 @@ class SetDefaultDialog extends Dialog {
             true,
             this.state.condition || false,
         ]);
-        this.trigger("dialog-closed");
+        this.props.close();
     }
 }
-SetDefaultDialog.bodyTemplate = "web.DebugMenu.setDefaultBody";
-SetDefaultDialog.footerTemplate = "web.DebugMenu.SetDefaultFooter";
+SetDefaultDialog.template = "web.DebugMenu.SetDefaultDialog";
+SetDefaultDialog.components = { Dialog };
 SetDefaultDialog.title = _lt("Set Default");
 
 // Form view items
diff --git a/addons/web/static/src/views/debug_items.js b/addons/web/static/src/views/debug_items.js
index 79d55573011..90d7e86b892 100644
--- a/addons/web/static/src/views/debug_items.js
+++ b/addons/web/static/src/views/debug_items.js
@@ -5,16 +5,18 @@ import { Dialog } from "@web/core/dialog/dialog";
 import { editModelDebug } from "@web/core/debug/debug_utils";
 import { registry } from "@web/core/registry";
 
-const { xml } = owl;
+const { Component, xml } = owl;
 
 const debugRegistry = registry.category("debug");
 
-class FieldViewGetDialog extends Dialog {}
+class FieldViewGetDialog extends Component {}
+FieldViewGetDialog.template = xml`<Dialog title="this.constructor.title">
+    <pre t-esc="props.arch"/>
+</Dialog>`;
+FieldViewGetDialog.components = { Dialog };
 FieldViewGetDialog.props = {
-    ...Dialog.props,
     arch: { type: String },
 };
-FieldViewGetDialog.bodyTemplate = xml`<pre t-esc="props.arch"/>`;
 FieldViewGetDialog.title = _lt("Fields View Get");
 
 function viewSeparator() {
diff --git a/addons/web/static/src/webclient/actions/action_dialog.js b/addons/web/static/src/webclient/actions/action_dialog.js
index 7e5578876bd..3a4970cd78d 100644
--- a/addons/web/static/src/webclient/actions/action_dialog.js
+++ b/addons/web/static/src/webclient/actions/action_dialog.js
@@ -8,9 +8,10 @@ import { useLegacyRefs } from "@web/legacy/utils";
 const { useEffect } = owl;
 
 const LEGACY_SIZE_CLASSES = {
-    "extra-large": "modal-xl",
-    large: "modal-lg",
-    small: "modal-sm",
+    "extra-large": "xl",
+    large: "lg",
+    medium: "md",
+    small: "sm",
 };
 
 // -----------------------------------------------------------------------------
@@ -23,14 +24,14 @@ class ActionDialog extends Dialog {
         const actionProps = this.props && this.props.actionProps;
         const action = actionProps && actionProps.action;
         this.actionType = action && action.type;
-        this.title = "title" in this.props ? this.props.title : this.constructor.title;
     }
 }
 ActionDialog.components = { ...Dialog.components, DebugMenu };
 ActionDialog.template = "web.ActionDialog";
-ActionDialog.bodyTemplate = "web.ActionDialogBody";
 ActionDialog.props = {
     ...Dialog.props,
+    close: Function,
+    slots: { optional: true },
     ActionComponent: { optional: true },
     actionProps: { optional: true },
     title: { optional: true },
@@ -38,7 +39,8 @@ ActionDialog.props = {
 
 /**
  * This LegacyAdaptedActionDialog class will disappear when legacy code will be entirely rewritten.
- * The "ActionDialog" class should get exported from this file when the cleaning will occur.
+ * The "ActionDialog" class should get exported from this file when the cleaning will occur, and it
+ * should stop extending Dialog and use it normally instead at that point.
  */
 class LegacyAdaptedActionDialog extends ActionDialog {
     setup() {
@@ -47,7 +49,7 @@ class LegacyAdaptedActionDialog extends ActionDialog {
         const action = actionProps && actionProps.action;
         const actionContext = action && action.context;
         const actionDialogSize = actionContext && actionContext.dialog_size;
-        this.size = LEGACY_SIZE_CLASSES[actionDialogSize] || this.constructor.size;
+        this.props.size = LEGACY_SIZE_CLASSES[actionDialogSize] || Dialog.defaultProps.size;
         const ControllerComponent = this.props && this.props.ActionComponent;
         const Controller = ControllerComponent && ControllerComponent.Component;
         this.isLegacy = Controller && Controller.isLegacy;
@@ -64,6 +66,6 @@ class LegacyAdaptedActionDialog extends ActionDialog {
         );
     }
 }
-LegacyAdaptedActionDialog.footerTemplate = "web.LegacyAdaptedActionDialogFooter";
+LegacyAdaptedActionDialog.template = "web.LegacyAdaptedActionDialog";
 
 export { LegacyAdaptedActionDialog as ActionDialog };
diff --git a/addons/web/static/src/webclient/actions/action_dialog.xml b/addons/web/static/src/webclient/actions/action_dialog.xml
index 360017a2ecf..a3f70df271d 100644
--- a/addons/web/static/src/webclient/actions/action_dialog.xml
+++ b/addons/web/static/src/webclient/actions/action_dialog.xml
@@ -10,20 +10,19 @@
         {"o_act_window": actionType === "ir.actions.act_window"}
       </attribute>
     </xpath>
+    <xpath expr="//t[@t-slot='default']" position="replace">
+      <t t-if="props.ActionComponent" t-component="props.ActionComponent" t-props="props.actionProps"/>
+    </xpath>
   </t>
 
-  <t t-name="web.ActionDialogBody" owl="1">
-    <t t-if="props.ActionComponent" t-component="props.ActionComponent" t-props="props.actionProps"/>
-  </t>
-
-  <t t-name="web.LegacyAdaptedActionDialogFooter" owl="1">
-    <t t-if="!isLegacy">
-      <t t-slot="buttons">
-        <button class="btn btn-primary" t-on-click="close">
-          <t>Ok</t>
-        </button>
+  <t t-name="web.LegacyAdaptedActionDialog" t-inherit="web.ActionDialog" t-inherit-mode="primary" owl="1">
+    <xpath expr="//t[@t-slot='footer']" position="replace">
+      <t t-if="!isLegacy">
+        <t t-slot="buttons">
+          <button class="btn btn-primary" t-on-click="data.close">Ok</button>
+        </t>
       </t>
-    </t>
+    </xpath>
   </t>
 
 </templates>
diff --git a/addons/web/static/src/webclient/user_menu/user_menu_items.js b/addons/web/static/src/webclient/user_menu/user_menu_items.js
index 7526595e63c..ffc003ab76c 100644
--- a/addons/web/static/src/webclient/user_menu/user_menu_items.js
+++ b/addons/web/static/src/webclient/user_menu/user_menu_items.js
@@ -6,6 +6,8 @@ import { registry } from "../../core/registry";
 import { _lt } from "../../core/l10n/translation";
 import { session } from "@web/session";
 
+const { Component } = owl;
+
 function documentationItem(env) {
     const documentationURL = "https://www.odoo.com/documentation/master";
     return {
@@ -34,9 +36,10 @@ function supportItem(env) {
     };
 }
 
-class ShortCutsDialog extends Dialog {}
-ShortCutsDialog.bodyTemplate = "web.UserMenu.shortcutsTable";
-ShortCutsDialog.title = _lt("Shortcuts");
+class ShortcutsDialog extends Component {}
+ShortcutsDialog.template = "web.UserMenu.ShortcutsDialog";
+ShortcutsDialog.components = { Dialog };
+ShortcutsDialog.title = _lt("Shortcuts");
 
 function shortCutsItem(env) {
     return {
@@ -45,7 +48,7 @@ function shortCutsItem(env) {
         hide: env.isSmall,
         description: env._t("Shortcuts"),
         callback: () => {
-            env.services.dialog.add(ShortCutsDialog);
+            env.services.dialog.add(ShortcutsDialog);
         },
         sequence: 30,
     };
diff --git a/addons/web/static/src/webclient/user_menu/user_menu_items.xml b/addons/web/static/src/webclient/user_menu/user_menu_items.xml
index 0df281dec43..5fee3d89d55 100644
--- a/addons/web/static/src/webclient/user_menu/user_menu_items.xml
+++ b/addons/web/static/src/webclient/user_menu/user_menu_items.xml
@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates xml:space="preserve">
 
-    <t t-name="web.UserMenu.shortcutsTable" owl="1">
-        <div>
+    <t t-name="web.UserMenu.ShortcutsDialog" owl="1">
+        <Dialog title="this.constructor.title">
             <div class="container-fluid">
                 <div class="row">
                     <div class="offset-md-2 col-md-8">
@@ -102,7 +102,7 @@
                     </div>
                 </div>
             </div>
-        </div>
+        </Dialog>
     </t>
 
 </templates>
diff --git a/addons/web/static/tests/core/commands/command_palette_tests.js b/addons/web/static/tests/core/commands/command_palette_tests.js
index c1cc76b596c..b59dc314bdc 100644
--- a/addons/web/static/tests/core/commands/command_palette_tests.js
+++ b/addons/web/static/tests/core/commands/command_palette_tests.js
@@ -1,7 +1,7 @@
 /** @odoo-module **/
 
 import { browser } from "@web/core/browser/browser";
-import { CommandPaletteDialog } from "@web/core/commands/command_palette_dialog";
+import { CommandPalette } from "@web/core/commands/command_palette";
 import { commandService } from "@web/core/commands/command_service";
 import { dialogService } from "@web/core/dialog/dialog_service";
 import { hotkeyService } from "@web/core/hotkeys/hotkey_service";
@@ -40,7 +40,7 @@ TestComponent.template = xml`
   </div>
 `;
 
-QUnit.module("Command Palette Dialog", {
+QUnit.module("Command Palette", {
     async beforeEach() {
         serviceRegistry.add("ui", uiService);
         serviceRegistry.add("dialog", dialogService);
@@ -64,7 +64,7 @@ QUnit.test("empty providers", async (assert) => {
     const config = {
         providers: [],
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -104,7 +104,7 @@ QUnit.test("custom empty message", async (assert) => {
         configByNamespace,
         providers,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -168,7 +168,7 @@ QUnit.test("custom debounce delay", async (assert) => {
         configByNamespace,
         providers,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -227,7 +227,7 @@ QUnit.test("concurrency with custom debounce delay", async (assert) => {
         configByNamespace,
         providers,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -266,7 +266,7 @@ QUnit.test("custom placeholder", async (assert) => {
         placeholder: "placeholder test",
         providers: [],
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -285,7 +285,7 @@ QUnit.test("add a footer", async (assert) => {
         providers: [],
         FooterComponent,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -323,7 +323,7 @@ QUnit.test("command with a Custom Component", async (assert) => {
     const config = {
         providers,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -376,7 +376,7 @@ QUnit.test("multi namespace with provider", async (assert) => {
     const config = {
         providers,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -430,7 +430,7 @@ QUnit.test("apply a fuzzysearch on the namespace default not on the others", asy
     const config = {
         providers,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -493,7 +493,7 @@ QUnit.test("multi provider with the same namespace", async (assert) => {
     const config = {
         providers,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -531,7 +531,7 @@ QUnit.test("check the concurrency during a research", async (assert) => {
     const config = {
         providers,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -584,7 +584,7 @@ QUnit.test(
             searchValue: "C1",
             providers,
         };
-        env.services.dialog.add(CommandPaletteDialog, {
+        env.services.dialog.add(CommandPalette, {
             config,
         });
         await nextTick();
@@ -632,7 +632,7 @@ QUnit.test("open the command palette with a namespace already in the searchbar",
         searchValue: "@",
         providers,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -679,7 +679,7 @@ QUnit.test("open the command palette with a searchValue with a namespace", async
         searchValue: "@Test",
         providers,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -726,7 +726,7 @@ QUnit.test("open the command palette with a searchValue without namespace", asyn
         searchValue: "Command1",
         providers,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -799,7 +799,7 @@ QUnit.test("multi provider with categories", async (assert) => {
         configByNamespace,
         providers,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -901,7 +901,7 @@ QUnit.test("don't display by categories if there is a search value", async (asse
         configByNamespace,
         providers,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -956,7 +956,7 @@ QUnit.test("click on command", async (assert) => {
     const config = {
         providers,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -966,7 +966,7 @@ QUnit.test("click on command", async (assert) => {
         [...target.querySelectorAll(".o_command")].map((el) => el.textContent),
         ["Command1", "Command2"]
     );
-    let focusedCommand = target.querySelector(".o_command.focused");
+    const focusedCommand = target.querySelector(".o_command.focused");
     assert.strictEqual(focusedCommand.textContent, commands[0].name);
     await click(target, ".o_command.focused");
     assert.verifySteps(["C1"]);
@@ -996,7 +996,7 @@ QUnit.test("press enter on command", async (assert) => {
     const config = {
         providers,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -1006,7 +1006,7 @@ QUnit.test("press enter on command", async (assert) => {
         [...target.querySelectorAll(".o_command")].map((el) => el.textContent),
         ["Command1", "Command2"]
     );
-    let focusedCommand = target.querySelector(".o_command.focused");
+    const focusedCommand = target.querySelector(".o_command.focused");
     assert.strictEqual(focusedCommand.textContent, commands[0].name);
     triggerHotkey("arrowdown");
     await nextTick();
@@ -1032,7 +1032,7 @@ QUnit.test("keyboard navigation scroll", async (assert) => {
     const config = {
         providers,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
 
@@ -1202,7 +1202,7 @@ QUnit.test("multi level command", async (assert) => {
         placeholder: "placeholder test",
         providers,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -1225,7 +1225,7 @@ QUnit.test("multi level command", async (assert) => {
         [...target.querySelectorAll(".o_command")].map((el) => el.textContent),
         ["Command1"]
     );
-    let focusedCommand = target.querySelector(".o_command.focused");
+    const focusedCommand = target.querySelector(".o_command.focused");
     assert.strictEqual(focusedCommand.textContent, commands[0].name);
     triggerHotkey("enter");
     await nextTick();
@@ -1254,14 +1254,14 @@ QUnit.test("command palette dialog can be rendered and closed on outside click",
     const config = {
         providers: [],
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
     assert.containsOnce(target, ".o_command_palette");
 
     // Close on outside click
-    window.dispatchEvent(new MouseEvent("mousedown"));
+    document.body.dispatchEvent(new MouseEvent("mousedown", { bubbles: true }));
     await nextTick();
     assert.containsNone(target, ".o_command_palette");
 });
@@ -1293,7 +1293,7 @@ QUnit.test("navigate in the command palette with the arrows", async (assert) =>
     const config = {
         providers,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -1339,7 +1339,7 @@ QUnit.test("navigate in the command palette with an empty list", async (assert)
     const config = {
         providers,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -1391,7 +1391,7 @@ QUnit.test("bold the searchValue on the commands", async (assert) => {
         searchValue: "@",
         providers,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -1429,7 +1429,7 @@ QUnit.test("bold the searchValue on the commands with special char", async (asse
         searchValue: "&",
         providers,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
@@ -1460,7 +1460,7 @@ QUnit.test("remove namespace with backspace", async (assert) => {
     const config = {
         providers,
     };
-    env.services.dialog.add(CommandPaletteDialog, {
+    env.services.dialog.add(CommandPalette, {
         config,
     });
     await nextTick();
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 d495bb3fbcf..6a04a5fd2cc 100644
--- a/addons/web/static/tests/core/debug/debug_manager_tests.js
+++ b/addons/web/static/tests/core/debug/debug_manager_tests.js
@@ -170,6 +170,10 @@ QUnit.module("DebugMenu", (hooks) => {
 
     QUnit.test("Don't display the DebugMenu if debug mode is disabled", async (assert) => {
         const env = await makeTestEnv(testConfig);
+        env.dialogData = {
+            isActive: true,
+            close() {},
+        };
         await mount(ActionDialog, target, {
             env,
             props: { close: () => {} },
@@ -223,6 +227,10 @@ QUnit.module("DebugMenu", (hooks) => {
             }
             patchWithCleanup(odoo, { debug: "1" });
             const env = await makeTestEnv(testConfig);
+            env.dialogData = {
+                isActive: true,
+                close() {},
+            };
             await mount(WithCustom, target, {
                 env,
                 props: { close: () => {} },
diff --git a/addons/web/static/tests/core/dialog_service_tests.js b/addons/web/static/tests/core/dialog_service_tests.js
index fb308ceccd6..332ab848a44 100644
--- a/addons/web/static/tests/core/dialog_service_tests.js
+++ b/addons/web/static/tests/core/dialog_service_tests.js
@@ -56,8 +56,9 @@ QUnit.module("DialogManager", {
 });
 QUnit.test("Simple rendering with a single dialog", async (assert) => {
     assert.expect(4);
-    class CustomDialog extends Dialog {}
-    CustomDialog.title = "Welcome";
+    class CustomDialog extends Component {}
+    CustomDialog.components = { Dialog };
+    CustomDialog.template = xml`<Dialog title="'Welcome'">content</Dialog>`;
     await mount(PseudoWebClient, target, { env });
     assert.containsNone(target, ".o_dialog_container .o_dialog");
     env.services.dialog.add(CustomDialog);
@@ -71,8 +72,9 @@ QUnit.test("Simple rendering with a single dialog", async (assert) => {
 QUnit.test("Simple rendering and close a single dialog", async (assert) => {
     assert.expect(4);
 
-    class CustomDialog extends Dialog {}
-    CustomDialog.title = "Welcome";
+    class CustomDialog extends Component {}
+    CustomDialog.components = { Dialog };
+    CustomDialog.template = xml`<Dialog title="'Welcome'">content</Dialog>`;
 
     await mount(PseudoWebClient, target, { env });
     assert.containsNone(target, ".o_dialog_container .o_dialog");
@@ -94,12 +96,10 @@ QUnit.test("Simple rendering and close a single dialog", async (assert) => {
 
 QUnit.test("rendering with two dialogs", async (assert) => {
     assert.expect(7);
-    class CustomDialog extends Dialog {
-        setup() {
-            super.setup();
-            this.title = this.props.title;
-        }
-    }
+    class CustomDialog extends Component {}
+    CustomDialog.components = { Dialog };
+    CustomDialog.template = xml`<Dialog title="props.title">content</Dialog>`;
+
     await mount(PseudoWebClient, target, { env });
     assert.containsNone(target, ".o_dialog_container .o_dialog");
     env.services.dialog.add(CustomDialog, { title: "Hello" });
@@ -120,12 +120,9 @@ QUnit.test("rendering with two dialogs", async (assert) => {
 
 QUnit.test("multiple dialogs can become the UI active element", async (assert) => {
     assert.expect(3);
-    class CustomDialog extends Dialog {
-        setup() {
-            super.setup();
-            this.title = this.props.title;
-        }
-    }
+    class CustomDialog extends Component {}
+    CustomDialog.components = { Dialog };
+    CustomDialog.template = xml`<Dialog title="props.title">content</Dialog>`;
     await mount(PseudoWebClient, target, { env });
 
     env.services.dialog.add(CustomDialog, { title: "Hello" });
@@ -165,12 +162,9 @@ QUnit.test("Interactions between multiple dialogs", async (assert) => {
         return { active, names };
     }
 
-    class CustomDialog extends Dialog {
-        setup() {
-            super.setup();
-            this.title = this.props.title;
-        }
-    }
+    class CustomDialog extends Component {}
+    CustomDialog.components = { Dialog };
+    CustomDialog.template = xml`<Dialog title="props.title">content</Dialog>`;
     await mount(PseudoWebClient, target, { env });
 
     env.services.dialog.add(CustomDialog, { title: "Hello" });
@@ -215,13 +209,13 @@ QUnit.test("Interactions between multiple dialogs", async (assert) => {
 QUnit.test("dialog component crashes", async (assert) => {
     assert.expect(4);
 
-    class FailingDialog extends Dialog {
+    class FailingDialog extends Component {
         setup() {
-            super.setup();
             throw new Error("Some Error");
         }
     }
-    FailingDialog.title = "Error";
+    FailingDialog.components = { Dialog };
+    FailingDialog.template = xml`<Dialog title="'Error'">content</Dialog>`;
 
     const prom = makeDeferred();
     patchWithCleanup(ErrorDialog.prototype, {
diff --git a/addons/web/static/tests/core/dialog_tests.js b/addons/web/static/tests/core/dialog_tests.js
index 668f9a67eec..c5910f202ba 100644
--- a/addons/web/static/tests/core/dialog_tests.js
+++ b/addons/web/static/tests/core/dialog_tests.js
@@ -9,40 +9,19 @@ import { makeTestEnv } from "../helpers/mock_env";
 import { click, destroy, getFixture, mount } from "../helpers/utils";
 import { makeFakeDialogService } from "../helpers/mock_services";
 
-const { Component, useEffect, useState, xml } = owl;
+const { Component, useState, onMounted, xml } = owl;
 const serviceRegistry = registry.category("services");
 let parent;
 let target;
 
-class SimpleDialog extends Dialog {
-    setup() {
-        super.setup();
-        this.title = "title" in this.props ? this.props.title : this.constructor.title;
-        this.renderHeader =
-            "renderHeader" in this.props ? this.props.renderHeader : this.constructor.renderHeader;
-        this.renderFooter =
-            "renderFooter" in this.props ? this.props.renderFooter : this.constructor.renderFooter;
-        this.contentClass =
-            "contentClass" in this.props ? this.props.contentClass : this.constructor.contentClass;
-        this.size = "size" in this.props ? this.props.size : this.constructor.size;
-        this.fullscreen =
-            "fullscreen" in this.props ? this.props.fullscreen : this.constructor.fullscreen;
-
-        const setRef = () => {
-            if (this.props.setModalRef) {
-                this.props.setModalRef(this.modalRef.el);
-            }
-        };
-
-        useEffect(setRef);
-    }
+async function makeDialogTestEnv() {
+    const env = await makeTestEnv();
+    env.dialogData = {
+        isActive: true,
+        close: () => {},
+    };
+    return env;
 }
-SimpleDialog.bodyTemplate = xml`<t t-slot="default"/>`;
-SimpleDialog.props = {
-    ...Dialog.props,
-    close: { type: Function, optional: true },
-};
-SimpleDialog.defaultProps = { close: () => {} };
 
 QUnit.module("Components", (hooks) => {
     hooks.beforeEach(async () => {
@@ -61,15 +40,15 @@ QUnit.module("Components", (hooks) => {
 
     QUnit.test("simple rendering", async function (assert) {
         assert.expect(8);
-        class Parent extends Dialog {}
-        Parent.title = "Wow(l) Effect";
-        Parent.bodyTemplate = xml`
-            <t>
+        class Parent extends Component {}
+        Parent.components = { Dialog };
+        Parent.template = xml`
+            <Dialog title="'Wow(l) Effect'">
                 Hello!
-            </t>
+            </Dialog>
             `;
 
-        const env = await makeTestEnv();
+        const env = await makeDialogTestEnv();
         parent = await mount(Parent, target, { env, props: {} });
         assert.containsOnce(target, ".o_dialog");
         assert.containsOnce(
@@ -97,16 +76,16 @@ QUnit.module("Components", (hooks) => {
         class Parent extends Component {}
         Parent.template = xml`
               <div>
-                  <SimpleDialog title="'First Title'">
+                  <Dialog title="'First Title'">
                       Hello!
-                  </SimpleDialog>
-                  <SimpleDialog title="'Second Title'">
+                  </Dialog>
+                  <Dialog title="'Second Title'">
                       Hello again!
-                  </SimpleDialog>
+                  </Dialog>
               </div>
           `;
-        Parent.components = { SimpleDialog };
-        const env = await makeTestEnv();
+        Parent.components = { Dialog };
+        const env = await makeDialogTestEnv();
         parent = await mount(Parent, target, { env });
         assert.containsN(target, ".o_dialog", 2);
         assert.deepEqual(
@@ -121,20 +100,16 @@ QUnit.module("Components", (hooks) => {
 
     QUnit.test("click on the button x triggers the service close", async function (assert) {
         assert.expect(3);
-        const env = await makeTestEnv();
-        class MyDialog extends SimpleDialog {}
-        class Parent extends Component {
-            close() {
-                assert.step("close");
-            }
-        }
+        const env = await makeDialogTestEnv();
+        env.dialogData.close = () => assert.step("close");
 
+        class Parent extends Component {}
         Parent.template = xml`
-            <MyDialog close="close">
+            <Dialog>
                 Hello!
-            </MyDialog>
+            </Dialog>
         `;
-        Parent.components = { MyDialog };
+        Parent.components = { Dialog };
         parent = await mount(Parent, target, { env });
         assert.containsOnce(target, ".o_dialog");
         await click(target, ".o_dialog header button.close");
@@ -144,21 +119,17 @@ QUnit.module("Components", (hooks) => {
     QUnit.test(
         "click on the default footer button triggers the service close",
         async function (assert) {
-            const env = await makeTestEnv();
+            const env = await makeDialogTestEnv();
+            env.dialogData.close = () => assert.step("close");
             assert.expect(3);
-            class MyDialog extends SimpleDialog {}
-            class Parent extends Component {
-                close() {
-                    assert.step("close");
-                }
-            }
+            class Parent extends Component {}
 
             Parent.template = xml`
-                <MyDialog close="close">
+                <Dialog>
                     Hello!
-                </MyDialog>
+                </Dialog>
             `;
-            Parent.components = { MyDialog };
+            Parent.components = { Dialog };
             parent = await mount(Parent, target, { env });
             assert.containsOnce(target, ".o_dialog");
             await click(target, ".o_dialog footer button");
@@ -168,17 +139,18 @@ QUnit.module("Components", (hooks) => {
 
     QUnit.test("render custom footer buttons is possible", async function (assert) {
         assert.expect(2);
-        class SimpleButtonsDialog extends Dialog {}
-        SimpleButtonsDialog.props = {
-            ...Dialog.props,
-            close: { type: Function, optional: true },
-        };
-        SimpleButtonsDialog.defaultProps = { close: () => {} };
-        SimpleButtonsDialog.footerTemplate = xml`
-            <div>
-                <button class="btn btn-primary">The First Button</button>
-                <button class="btn btn-primary">The Second Button</button>
-            </div>
+        class SimpleButtonsDialog extends Component {}
+        SimpleButtonsDialog.components = { Dialog };
+        SimpleButtonsDialog.template = xml`
+            <Dialog>
+                content
+                <t t-set-slot="footer">
+                    <div>
+                        <button class="btn btn-primary">The First Button</button>
+                        <button class="btn btn-primary">The Second Button</button>
+                    </div>
+                </t>
+            </Dialog>
           `;
         class Parent extends Component {
             setup() {
@@ -194,7 +166,7 @@ QUnit.module("Components", (hooks) => {
               </div>
           `;
         Parent.components = { SimpleButtonsDialog };
-        const env = await makeTestEnv();
+        const env = await makeDialogTestEnv();
         parent = await mount(Parent, target, { env });
         assert.containsOnce(target, ".o_dialog");
         assert.containsN(target, ".o_dialog footer button", 2);
@@ -216,13 +188,13 @@ QUnit.module("Components", (hooks) => {
                 assert.step("message received by parent");
             }
         }
-        Parent.components = { SimpleDialog, SubComponent };
+        Parent.components = { Dialog, SubComponent };
         Parent.template = xml`
-              <SimpleDialog>
+              <Dialog>
                   <SubComponent text="'Wow(l) Effect'" onClicked="_onSubcomponentClicked"/>
-              </SimpleDialog>
+              </Dialog>
           `;
-        const env = await makeTestEnv();
+        const env = await makeDialogTestEnv();
         parent = await mount(Parent, target, { env });
         assert.containsOnce(target, ".o_dialog");
         assert.containsOnce(target, ".o_dialog main .o_subcomponent");
@@ -235,10 +207,10 @@ QUnit.module("Components", (hooks) => {
         assert.expect(4);
         class Parent extends Component {}
         Parent.template = xml`
-              <SimpleDialog renderHeader="false" renderFooter="false"/>
+              <Dialog header="false" footer="false">content</Dialog>
           `;
-        const env = await makeTestEnv();
-        Parent.components = { SimpleDialog };
+        const env = await makeDialogTestEnv();
+        Parent.components = { Dialog };
         parent = await mount(Parent, target, { env });
         assert.containsOnce(target, ".o_dialog");
         assert.containsNone(target, ".o_dialog header");
@@ -251,13 +223,13 @@ QUnit.module("Components", (hooks) => {
         class Parent extends Component {}
         Parent.template = xml`
       <div>
-        <SimpleDialog contentClass="'xl'" size="'modal-xl'"/>
-        <SimpleDialog contentClass="'lg'"/>
-        <SimpleDialog contentClass="'md'" size="'modal-md'"/>
-        <SimpleDialog contentClass="'sm'" size="'modal-sm'"/>
+        <Dialog contentClass="'xl'" size="'xl'">content</Dialog>
+        <Dialog contentClass="'lg'">content</Dialog>
+        <Dialog contentClass="'md'" size="'md'">content</Dialog>
+        <Dialog contentClass="'sm'" size="'sm'">content</Dialog>
       </div>`;
-        Parent.components = { SimpleDialog };
-        const env = await makeTestEnv();
+        Parent.components = { Dialog };
+        const env = await makeDialogTestEnv();
         parent = await mount(Parent, target, { env });
         assert.containsN(target, ".o_dialog", 4);
         assert.containsOnce(
@@ -282,41 +254,38 @@ QUnit.module("Components", (hooks) => {
         assert.expect(2);
         class Parent extends Component {}
         Parent.template = xml`
-              <div><SimpleDialog fullscreen="true"/></div>
+            <Dialog fullscreen="true">content</Dialog>
           `;
-        Parent.components = { SimpleDialog };
-        const env = await makeTestEnv();
+        Parent.components = { Dialog };
+        const env = await makeDialogTestEnv();
         parent = await mount(Parent, target, { env });
         assert.containsOnce(target, ".o_dialog");
         assert.hasClass(target.querySelector(".o_dialog .modal"), "o_modal_full");
     });
 
     QUnit.test("can be the UI active element", async function (assert) {
-        assert.expect(3);
+        assert.expect(4);
         class Parent extends Component {
             setup() {
                 this.ui = useService("ui");
-                this.modal = null;
                 assert.strictEqual(
                     this.ui.activeElement,
                     document,
                     "UI active element should be the default (document) as Parent is not mounted yet"
                 );
-                owl.onMounted(() => {
+                onMounted(() => {
+                    assert.containsOnce(target, ".modal");
                     assert.strictEqual(
                         this.ui.activeElement,
-                        this.modal,
+                        target.querySelector(".modal"),
                         "UI active element should be the dialog modal"
                     );
                 });
             }
-            setModalRef(modalEl) {
-                this.modal = modalEl;
-            }
         }
-        const env = await makeTestEnv();
-        Parent.template = xml`<div><SimpleDialog setModalRef="el => this.setModalRef(el)"/></div>`;
-        Parent.components = { SimpleDialog };
+        const env = await makeDialogTestEnv();
+        Parent.template = xml`<Dialog>content</Dialog>`;
+        Parent.components = { Dialog };
 
         const parent = await mount(Parent, target, { env });
         destroy(parent);
diff --git a/addons/web/static/tests/core/errors/error_dialogs_tests.js b/addons/web/static/tests/core/errors/error_dialogs_tests.js
index 64b1bb02420..8e0e5d8f4ed 100644
--- a/addons/web/static/tests/core/errors/error_dialogs_tests.js
+++ b/addons/web/static/tests/core/errors/error_dialogs_tests.js
@@ -20,6 +20,15 @@ let target;
 let env;
 const serviceRegistry = registry.category("services");
 
+async function makeDialogTestEnv() {
+    const env = await makeTestEnv();
+    env.dialogData = {
+        isActive: true,
+        close() {},
+    };
+    return env;
+}
+
 QUnit.module("Error dialogs", {
     async beforeEach() {
         target = getFixture();
@@ -33,7 +42,7 @@ QUnit.module("Error dialogs", {
 QUnit.test("ErrorDialog with traceback", async (assert) => {
     assert.expect(11);
     assert.containsNone(target, ".o_dialog");
-    env = await makeTestEnv();
+    env = await makeDialogTestEnv();
     await mount(ErrorDialog, target, {
         env,
         props: {
@@ -84,7 +93,7 @@ QUnit.test("ErrorDialog with traceback", async (assert) => {
 QUnit.test("Client ErrorDialog with traceback", async (assert) => {
     assert.expect(11);
     assert.containsNone(target, ".o_dialog");
-    env = await makeTestEnv();
+    env = await makeDialogTestEnv();
     await mount(ClientErrorDialog, target, {
         env,
         props: {
@@ -153,7 +162,7 @@ QUnit.test("button clipboard copy error traceback", async (assert) => {
             },
         },
     });
-    env = await makeTestEnv();
+    env = await makeDialogTestEnv();
     await mount(ErrorDialog, target, {
         env,
         props: {
@@ -171,7 +180,7 @@ QUnit.test("button clipboard copy error traceback", async (assert) => {
 QUnit.test("WarningDialog", async (assert) => {
     assert.expect(6);
     assert.containsNone(target, ".o_dialog");
-    env = await makeTestEnv();
+    env = await makeDialogTestEnv();
     await mount(WarningDialog, target, {
         env,
         props: {
@@ -201,7 +210,7 @@ QUnit.test("RedirectWarningDialog", async (assert) => {
         },
     };
     serviceRegistry.add("action", faceActionService);
-    env = await makeTestEnv();
+    env = await makeDialogTestEnv();
     assert.containsNone(target, ".o_dialog");
     await mount(RedirectWarningDialog, target, {
         env,
@@ -221,7 +230,7 @@ QUnit.test("RedirectWarningDialog", async (assert) => {
     assert.containsOnce(target, ".o_dialog");
     assert.strictEqual(target.querySelector("header .modal-title").textContent, "Odoo Warning");
     assert.strictEqual(target.querySelector("main").textContent, "Some strange unreadable message");
-    let footerButtons = target.querySelectorAll("footer button");
+    const footerButtons = target.querySelectorAll("footer button");
     assert.deepEqual(
         [...footerButtons].map((el) => el.textContent),
         ["Buy book on cryptography", "Cancel"]
@@ -236,7 +245,7 @@ QUnit.test("RedirectWarningDialog", async (assert) => {
 QUnit.test("Error504Dialog", async (assert) => {
     assert.expect(5);
     assert.containsNone(target, ".o_dialog");
-    env = await makeTestEnv();
+    env = await makeDialogTestEnv();
     await mount(Error504Dialog, target, { env, props: { close() {} } });
     assert.containsOnce(target, ".o_dialog");
     assert.strictEqual(target.querySelector("header .modal-title").textContent, "Request timeout");
@@ -256,7 +265,7 @@ QUnit.test("SessionExpiredDialog", async (assert) => {
             },
         },
     });
-    env = await makeTestEnv();
+    env = await makeDialogTestEnv();
     assert.containsNone(target, ".o_dialog");
     await mount(SessionExpiredDialog, target, { env, props: { close() {} } });
     assert.containsOnce(target, ".o_dialog");
diff --git a/addons/web/static/tests/legacy/core/owl_dialog_tests.js b/addons/web/static/tests/legacy/core/owl_dialog_tests.js
index 22bf8197d62..052fc338ad0 100644
--- a/addons/web/static/tests/legacy/core/owl_dialog_tests.js
+++ b/addons/web/static/tests/legacy/core/owl_dialog_tests.js
@@ -8,6 +8,7 @@ odoo.define('web.owl_dialog_tests', function (require) {
 
     const { makeLegacyDialogMappingTestEnv } = require('@web/../tests/helpers/legacy_env_utils');
     const { Dialog: WowlDialog } = require("@web/core/dialog/dialog");
+    const { WithEnv } = require("@web/core/utils/components");
     const {
         getFixture,
         nextTick,
@@ -17,7 +18,7 @@ odoo.define('web.owl_dialog_tests', function (require) {
     const { createWebClient, doAction } = require("@web/../tests/webclient/helpers");
     const { LegacyComponent } = require("@web/legacy/legacy_component");
 
-    const { useState, xml } = owl;
+    const { Component, useState, xml } = owl;
     const EscapeKey = { key: 'Escape', keyCode: 27, which: 27 };
 
     QUnit.module('core', {}, function () {
@@ -290,12 +291,9 @@ odoo.define('web.owl_dialog_tests', function (require) {
                 />
             `;
             OwlDialogWrapper.components = { Dialog };
-            class WowlDialogSubClass extends WowlDialog{
-                setup() {
-                    super.setup();
-                    this.contentClass = this.props.contentClass;
-                }
-            }
+            class WowlDialogWrapper extends Component {}
+            WowlDialogWrapper.components = { WowlDialog };
+            WowlDialogWrapper.template = xml`<WowlDialog contentClass="props.contentClass">content</WowlDialog>`;
             class Parent extends LegacyComponent {
                 setup() {
                     this.dialogs = useState([]);
@@ -309,20 +307,25 @@ odoo.define('web.owl_dialog_tests', function (require) {
             Parent.template = xml`
                 <div>
                     <div class="o_dialog_container"/>
-                    <t t-foreach="dialogs" t-as="dialog" t-key="dialog.id" t-component="dialog.class"
-                        contentClass="'dialog_' + dialog.id"
-                        close="() => this._onDialogClosed(dialog.id)"
-                    />
+                    <t t-foreach="dialogs" t-as="dialog" t-key="dialog.id">
+                        <WithEnv env="{ dialogData: { isActive: true, close: () => this._onDialogClosed(dialog.id) } }">
+                            <t t-component="dialog.class"
+                                contentClass="'dialog_' + dialog.id"
+                                close="() => this._onDialogClosed(dialog.id)"
+                            />
+                        </WithEnv>
+                    </t>
                 </div>`;
+            Parent.components = { WithEnv };
 
             const target = getFixture();
             const parent = await mount(Parent, target, { env });
 
-            parent.dialogs.push({ id: 1, class: WowlDialogSubClass });
+            parent.dialogs.push({ id: 1, class: WowlDialogWrapper });
             await nextTick();
             parent.dialogs.push({ id: 2, class: OwlDialogWrapper });
             await nextTick();
-            parent.dialogs.push({ id: 3, class: WowlDialogSubClass });
+            parent.dialogs.push({ id: 3, class: WowlDialogWrapper });
             await nextTick();
 
             assert.verifySteps([]);
diff --git a/addons/web_tour/static/src/debug/tour_dialog_component.js b/addons/web_tour/static/src/debug/tour_dialog_component.js
index ca7c7d68161..f7c5500ee87 100644
--- a/addons/web_tour/static/src/debug/tour_dialog_component.js
+++ b/addons/web_tour/static/src/debug/tour_dialog_component.js
@@ -4,9 +4,10 @@ import { useService } from "@web/core/utils/hooks";
 import { Dialog } from "@web/core/dialog/dialog";
 import { _lt } from "@web/core/l10n/translation";
 
-export default class ToursDialog extends Dialog {
+const { Component } = owl;
+
+export default class ToursDialog extends Component {
     setup() {
-        super.setup();
         this.tourService = useService("tour");
         this.onboardingTours = this.tourService.getOnboardingTours();
         this.testingTours = this.tourService.getTestingTours();
@@ -24,7 +25,7 @@ export default class ToursDialog extends Dialog {
      */
     _onStartTour(ev) {
         this.tourService.reset(ev.target.dataset.name);
-        this.close();
+        this.props.close();
     }
     /**
      * Starts the given tour in test mode.
@@ -34,8 +35,9 @@ export default class ToursDialog extends Dialog {
      */
     _onTestTour(ev) {
         this.tourService.run(ev.target.dataset.name);
-        this.close();
+        this.props.close();
     }
 }
-ToursDialog.bodyTemplate = "web_tour.ToursDialog";
+ToursDialog.template = "web_tour.ToursDialog";
+ToursDialog.components = { Dialog };
 ToursDialog.title = _lt("Tours");
diff --git a/addons/web_tour/static/src/debug/tour_dialog_component.xml b/addons/web_tour/static/src/debug/tour_dialog_component.xml
index d299e315633..26eca88d0a3 100644
--- a/addons/web_tour/static/src/debug/tour_dialog_component.xml
+++ b/addons/web_tour/static/src/debug/tour_dialog_component.xml
@@ -2,7 +2,7 @@
 <templates id="template" xml:space="preserve">
 
 <t t-name="web_tour.ToursDialog" owl="1">
-    <div>
+    <Dialog title="this.constructor.title">
         <t t-call="web_tour.ToursDialog.Table">
             <t t-set="caption">Onboarding tours</t>
             <t t-set="tours" t-value="onboardingTours"/>
@@ -11,7 +11,7 @@
             <t t-set="caption">Testing tours</t>
             <t t-set="tours" t-value="testingTours"/>
         </t>
-    </div>
+    </Dialog>
 </t>
 
 <t t-name="web_tour.ToursDialog.Table" owl="1">