From 923ba830db13e4868a5f7351d67b5b3bfa248791 Mon Sep 17 00:00:00 2001
From: Aaron Bohy <aab@odoo.com>
Date: Mon, 19 Jul 2021 08:54:01 +0000
Subject: [PATCH] [REF] web: dropdown: make "menu" the default slot

The dropdown Component takes 2 slots: one for the toggler, and one
for the actual dropdown content. Before this commit, the default
slot was the toggler, and the other one was named "menu".

However, as the toggler is actually optional, and the "menu" slot
contains the central information about the dropdown, we decided to
swap them. The content of the dropdown is now the default slot and
the toggler can be specified with the "toggler" slot.
---
 .../web/static/src/core/debug/debug_menu.xml  | 24 +++----
 .../web/static/src/core/dropdown/dropdown.xml |  4 +-
 .../static/src/webclient/navbar/navbar.xml    | 66 +++++++++----------
 .../switch_company_menu.xml                   | 16 ++---
 .../src/webclient/user_menu/user_menu.xml     | 22 +++----
 .../web/static/tests/core/dropdown_tests.js   | 48 ++------------
 6 files changed, 72 insertions(+), 108 deletions(-)

diff --git a/addons/web/static/src/core/debug/debug_menu.xml b/addons/web/static/src/core/debug/debug_menu.xml
index 948caad0e78..309e61f5910 100644
--- a/addons/web/static/src/core/debug/debug_menu.xml
+++ b/addons/web/static/src/core/debug/debug_menu.xml
@@ -6,19 +6,19 @@
           beforeOpen="beforeOpenDropdown"
           t-on-dropdown-item-selected.stop="onDropdownItemSelected"
           togglerClass="'btn btn-link'">
-            <span class="fa fa-bug"/>
-            <t t-set-slot="menu">
-                <t t-foreach="getElements()" t-as="element" t-key="element_index">
-                    <t t-if="!element.hide">
-                        <t t-if="element.type == 'item'">
-                            <DropdownItem payload="{ callback: element.callback }">
-                                <a t-if="element.href" t-att-href="element.href" t-esc="element.description" t-on-click.prevent=""/>
-                                <span t-else="" t-esc="element.description"/>
-                            </DropdownItem>
-                        </t>
-                        <div t-if="element.type == 'separator'" role="separator" class="dropdown-divider"/>
-                        <t t-if="element.type == 'component'" t-component="element.Component" t-props="element.props"/>
+            <t t-set-slot="toggler">
+                <span class="fa fa-bug"/>
+            </t>
+            <t t-foreach="getElements()" t-as="element" t-key="element_index">
+                <t t-if="!element.hide">
+                    <t t-if="element.type == 'item'">
+                        <DropdownItem payload="{ callback: element.callback }">
+                            <a t-if="element.href" t-att-href="element.href" t-esc="element.description" t-on-click.prevent=""/>
+                            <span t-else="" t-esc="element.description"/>
+                        </DropdownItem>
                     </t>
+                    <div t-if="element.type == 'separator'" role="separator" class="dropdown-divider"/>
+                    <t t-if="element.type == 'component'" t-component="element.Component" t-props="element.props"/>
                 </t>
             </t>
         </Dropdown>
diff --git a/addons/web/static/src/core/dropdown/dropdown.xml b/addons/web/static/src/core/dropdown/dropdown.xml
index f2b8d4d4fdf..7767123f0f0 100644
--- a/addons/web/static/src/core/dropdown/dropdown.xml
+++ b/addons/web/static/src/core/dropdown/dropdown.xml
@@ -15,11 +15,11 @@
         t-att-title="props.title"
         t-att-data-hotkey="props.hotkey">
         <span>
-          <t t-slot="default" />
+          <t t-slot="toggler" />
         </span>
       </button>
       <ul t-if="state.open" class="o_dropdown_menu d-block overflow-auto" t-att-class="props.menuClass">
-        <t t-slot="menu" />
+        <t t-slot="default" />
       </ul>
     </t>
   </t>
diff --git a/addons/web/static/src/webclient/navbar/navbar.xml b/addons/web/static/src/webclient/navbar/navbar.xml
index 4061c8512cb..11b3fe0d3f9 100644
--- a/addons/web/static/src/webclient/navbar/navbar.xml
+++ b/addons/web/static/src/webclient/navbar/navbar.xml
@@ -44,19 +44,19 @@
 
   <t t-name="web.NavBar.AppsMenu" owl="1">
     <Dropdown hotkey="'h'" title="'Home Menu'" class="o_navbar_apps_menu">
-      <i class="fa fa-th-large" />
-      <t t-set-slot="menu">
-        <MenuItem
-          t-foreach="apps"
-          t-as="app"
-          t-key="app.id"
-          class="o_app"
-          t-att-class="{ o_dropdown_active: menuService.getCurrentApp() === app }"
-          payload="app"
-        >
-          <a t-att-href="getMenuItemHref(app)" t-esc="app.name" t-on-click.prevent="" />
-        </MenuItem>
+      <t t-set-slot="toggler">
+        <i class="fa fa-th-large" />
       </t>
+      <MenuItem
+        t-foreach="apps"
+        t-as="app"
+        t-key="app.id"
+        class="o_app"
+        t-att-class="{ o_dropdown_active: menuService.getCurrentApp() === app }"
+        payload="app"
+      >
+        <a t-att-href="getMenuItemHref(app)" t-esc="app.name" t-on-click.prevent="" />
+      </MenuItem>
     </Dropdown>
   </t>
 
@@ -93,11 +93,11 @@
             title="section.name"
             xmlid="section.xmlid"
           >
-            <span t-esc="section.name" t-att-data-section="section.id" />
-            <t t-set-slot="menu">
-              <t t-call="web.NavBar.SectionsMenu.Dropdown.MenuSlot">
-                <t t-set="items" t-value="section.childrenTree" />
-              </t>
+            <t t-set-slot="toggler">
+              <span t-esc="section.name" t-att-data-section="section.id" />
+            </t>
+            <t t-call="web.NavBar.SectionsMenu.Dropdown.MenuSlot">
+              <t t-set="items" t-value="section.childrenTree" />
             </t>
           </MenuDropdown>
         </t>
@@ -135,23 +135,23 @@
 
   <t t-name="web.NavBar.SectionsMenu.MoreDropdown" owl="1">
     <Dropdown tag="'li'" class="o_menu_sections_more" title="'More Menu'" hotkey="hotkey">
-      <i class="fa fa-plus" />
-      <t t-set-slot="menu">
-        <t t-foreach="sections" t-as="section" t-key="section.id">
+      <t t-set-slot="toggler">
+        <i class="fa fa-plus" />
+      </t>
+      <t t-foreach="sections" t-as="section" t-key="section.id">
 
-          <t t-if="!section.childrenTree.length">
-            <MenuItem class="o_more_dropdown_section" payload="section">
-              <a t-att-href="getMenuItemHref(section)" t-esc="section.name" t-on-click.prevent="" />
-            </MenuItem>
-          </t>
-          <t t-else="">
-            <div
-              class="o_more_dropdown_section o_more_dropdown_section_group bg-200 font-weight-bold"
-              t-esc="section.name"
-            />
-            <t t-call="web.NavBar.SectionsMenu.Dropdown.MenuSlot">
-              <t t-set="items" t-value="section.childrenTree" />
-            </t>
+        <t t-if="!section.childrenTree.length">
+          <MenuItem class="o_more_dropdown_section" payload="section">
+            <a t-att-href="getMenuItemHref(section)" t-esc="section.name" t-on-click.prevent="" />
+          </MenuItem>
+        </t>
+        <t t-else="">
+          <div
+            class="o_more_dropdown_section o_more_dropdown_section_group bg-200 font-weight-bold"
+            t-esc="section.name"
+          />
+          <t t-call="web.NavBar.SectionsMenu.Dropdown.MenuSlot">
+            <t t-set="items" t-value="section.childrenTree" />
           </t>
         </t>
       </t>
diff --git a/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml b/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml
index 1572b9c3ffc..a7d94739e3a 100644
--- a/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml
+++ b/addons/web/static/src/webclient/switch_company_menu/switch_company_menu.xml
@@ -3,14 +3,14 @@
 
 <t t-name="web.SwitchCompanyMenu" owl="1">
     <Dropdown class="o_switch_company_menu" menuClass="'o_dropdown_menu_right'">
-        <span t-attf-class="{{env.isSmall ? 'fa fa-building-o' : 'oe_topbar_name'}}">
-            <t t-if="!env.isSmall"><t t-esc="currentCompany.name"/></t>
-        </span>
-        <t t-set-slot="menu">
-            <t t-foreach="Object.values(companyService.availableCompanies)" t-as="company">
-                <t t-call="web.SwitchCompanyItem">
-                    <t t-set="company" t-value="company" />
-                </t>
+        <t t-set-slot="toggler">
+            <span t-attf-class="{{env.isSmall ? 'fa fa-building-o' : 'oe_topbar_name'}}">
+                <t t-if="!env.isSmall"><t t-esc="currentCompany.name"/></t>
+            </span>
+        </t>
+        <t t-foreach="Object.values(companyService.availableCompanies)" t-as="company">
+            <t t-call="web.SwitchCompanyItem">
+                <t t-set="company" t-value="company" />
             </t>
         </t>
     </Dropdown>
diff --git a/addons/web/static/src/webclient/user_menu/user_menu.xml b/addons/web/static/src/webclient/user_menu/user_menu.xml
index 076f5298245..5a6d259a0a6 100644
--- a/addons/web/static/src/webclient/user_menu/user_menu.xml
+++ b/addons/web/static/src/webclient/user_menu/user_menu.xml
@@ -3,18 +3,18 @@
 
     <t t-name="web.UserMenu" owl="1">
         <Dropdown class="o_user_menu" menuClass="'o_dropdown_menu_right'" t-on-dropdown-item-selected.stop="onDropdownItemSelected">
-            <img class="rounded-circle o_user_avatar" t-att-src="source" alt="User"/> <span class="oe_topbar_name"><t t-esc="user.name"/><t t-if="env.debug" t-esc="' (' + user.db.name + ')'"/></span>
-            <t t-set-slot="menu">
-                <t t-foreach="getElements()" t-as="element" t-key="element_index">
-                    <t t-if="!element.hide">
-                        <t t-if="element.type == 'item'">
-                            <UserMenuItem payload="{ callback: element.callback, id: element.id }">
-                                <a t-if="element.href" t-att-href="element.href" t-esc="element.description" t-on-click.prevent="" />
-                                <span t-else="" t-esc="element.description"/>
-                            </UserMenuItem>
-                        </t>
-                        <div t-if="element.type == 'separator'" role="separator" class="dropdown-divider"/>
+            <t t-set-slot="toggler">
+                <img class="rounded-circle o_user_avatar" t-att-src="source" alt="User"/> <span class="oe_topbar_name"><t t-esc="user.name"/><t t-if="env.debug" t-esc="' (' + user.db.name + ')'"/></span>
+            </t>
+            <t t-foreach="getElements()" t-as="element" t-key="element_index">
+                <t t-if="!element.hide">
+                    <t t-if="element.type == 'item'">
+                        <UserMenuItem payload="{ callback: element.callback, id: element.id }">
+                            <a t-if="element.href" t-att-href="element.href" t-esc="element.description" t-on-click.prevent="" />
+                            <span t-else="" t-esc="element.description"/>
+                        </UserMenuItem>
                     </t>
+                    <div t-if="element.type == 'separator'" role="separator" class="dropdown-divider"/>
                 </t>
             </t>
         </Dropdown>
diff --git a/addons/web/static/tests/core/dropdown_tests.js b/addons/web/static/tests/core/dropdown_tests.js
index 2c197f565fe..ed25159c83c 100644
--- a/addons/web/static/tests/core/dropdown_tests.js
+++ b/addons/web/static/tests/core/dropdown_tests.js
@@ -74,9 +74,7 @@ QUnit.module("Components", (hooks) => {
         class Parent extends owl.Component {}
         Parent.template = owl.tags.xml`
         <Dropdown class="one" togglerClass="'two'" menuClass="'three'">
-          <t t-set-slot="menu">
             <DropdownItem class="four" />
-          </t>
         </Dropdown>
       `;
         env = await makeTestEnv();
@@ -179,9 +177,7 @@ QUnit.module("Components", (hooks) => {
         class Parent extends owl.Component {}
         Parent.template = owl.tags.xml`
         <Dropdown>
-          <t t-set-slot="menu">
             <DropdownItem/>
-          </t>
         </Dropdown>
       `;
         env = await makeTestEnv();
@@ -199,9 +195,7 @@ QUnit.module("Components", (hooks) => {
         }
         Parent.template = owl.tags.xml`
         <Dropdown t-on-dropdown-item-selected="onItemSelected">
-          <t t-set-slot="menu">
             <DropdownItem payload="{ answer: 42 }"/>
-          </t>
         </Dropdown>
       `;
         env = await makeTestEnv();
@@ -214,13 +208,9 @@ QUnit.module("Components", (hooks) => {
         class Parent extends owl.Component {}
         Parent.template = owl.tags.xml`
         <Dropdown>
-          <t t-set-slot="menu">
             <Dropdown>
-              <t t-set-slot="menu">
                 <Dropdown/>
-              </t>
             </Dropdown>
-          </t>
         </Dropdown>
       `;
         env = await makeTestEnv();
@@ -235,13 +225,9 @@ QUnit.module("Components", (hooks) => {
         class Parent extends owl.Component {}
         Parent.template = owl.tags.xml`
         <Dropdown startOpen="true">
-          <t t-set-slot="menu">
             <Dropdown startOpen="true">
-              <t t-set-slot="menu">
                 <Dropdown startOpen="true"/>
-              </t>
             </Dropdown>
-          </t>
         </Dropdown>
       `;
         env = await makeTestEnv();
@@ -255,13 +241,9 @@ QUnit.module("Components", (hooks) => {
         <div>
           <div class="outside">outside</div>
           <Dropdown>
-            <t t-set-slot="menu">
               <Dropdown>
-                <t t-set-slot="menu">
                   <Dropdown/>
-                </t>
               </Dropdown>
-            </t>
           </Dropdown>
         </div>
       `;
@@ -290,13 +272,9 @@ QUnit.module("Components", (hooks) => {
         Parent.template = owl.tags.xml`
             <div>
                 <Dropdown>
-                    <t t-set-slot="menu">
-                        <Dropdown>
-                            <t t-set-slot="menu">
-                                <Dropdown/>
-                            </t>
-                        </Dropdown>
-                    </t>
+                    <Dropdown>
+                        <Dropdown/>
+                    </Dropdown>
                 </Dropdown>
                 <t t-component="dc.Component" t-props="dc.props" />
             </div>
@@ -323,13 +301,9 @@ QUnit.module("Components", (hooks) => {
         class Parent extends owl.Component {}
         Parent.template = owl.tags.xml`
         <Dropdown>
-          <t t-set-slot="menu">
             <Dropdown>
-              <t t-set-slot="menu">
                 <DropdownItem/>
-              </t>
             </Dropdown>
-          </t>
         </Dropdown>
       `;
         env = await makeTestEnv();
@@ -345,16 +319,12 @@ QUnit.module("Components", (hooks) => {
         class Parent extends owl.Component {}
         Parent.template = owl.tags.xml`
         <Dropdown>
-          <t t-set-slot="menu">
             <Dropdown>
-              <t t-set-slot="menu">
                 <DropdownItem class="item1" parentClosingMode="'none'" />
                 <DropdownItem class="item2" parentClosingMode="'closest'" />
                 <DropdownItem class="item3" parentClosingMode="'all'" />
                 <DropdownItem class="item4" />
-              </t>
             </Dropdown>
-          </t>
         </Dropdown>
       `;
         env = await makeTestEnv();
@@ -393,13 +363,9 @@ QUnit.module("Components", (hooks) => {
         }
         Parent.template = owl.tags.xml`
         <Dropdown t-on-dropdown-item-selected="onItemSelected">
-          <t t-set-slot="menu">
             <Dropdown t-on-dropdown-item-selected="onItemSelected">
-              <t t-set-slot="menu">
                 <DropdownItem payload="{ answer: 42 }" />
-              </t>
             </Dropdown>
-          </t>
         </Dropdown>
       `;
         env = await makeTestEnv();
@@ -414,8 +380,9 @@ QUnit.module("Components", (hooks) => {
     QUnit.test("multi-level dropdown: recursive template can be rendered", async (assert) => {
         const recursiveTemplate = `
         <Dropdown startOpen="true">
-          <t t-esc="name" />
-          <t t-set-slot="menu">
+            <t t-set-slot="toggler">
+                <t t-esc="name" />
+            </t>
             <t t-foreach="items" t-as="item">
 
               <t t-if="!item.children.length">
@@ -428,7 +395,6 @@ QUnit.module("Components", (hooks) => {
               </t>
 
             </t>
-          </t>
         </Dropdown>
     `;
         class Parent extends owl.Component {
@@ -642,11 +608,9 @@ QUnit.module("Components", (hooks) => {
         }
         Parent.template = owl.tags.xml`
         <Dropdown hotkey="'m'" t-on-dropdown-item-selected="onItemSelected">
-          <t t-set-slot="menu">
             <DropdownItem class="item1" payload="{val:1}">item1</DropdownItem>
             <DropdownItem class="item2" hotkey="'2'" payload="{val:2}">item2</DropdownItem>
             <DropdownItem class="item3" payload="{val:3}">item3</DropdownItem>
-          </t>
         </Dropdown>
       `;
         env = await makeTestEnv();