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">