[FIX] web: properly define control panel layout

Before this commit, some elements in the control panel were not properly encapsulated
in layout-related parent elements and this caused some inconsistencies if some of
the control panel components were not displayed. For example: if the breadrumbs
were missing, the search bar went to the left side instead of the right.

Now, all components are in a grid-like structure (in desktop mode) and should not
overstep their given boundaries. The layout in mobile remains unchanged since the
top part behaves quite differently.

closes odoo/odoo#50057

X-original-commit: 533db5991a5bb871198485cd71a63f75a8c6becf
Related: odoo/enterprise#10148
Signed-off-by: Aaron Bohy (aab) <aab@odoo.com>
Signed-off-by: Julien Mougenot (jum) <jum@odoo.com>

4 files changed, 41 insertions, 36 deletions

diff --git a/addons/web/static/src/scss/control_panel.scss b/addons/web/static/src/scss/control_panel.scss
index 6963a51716b..0bacb3345c3 100644
--- a/addons/web/static/src/scss/control_panel.scss
+++ b/addons/web/static/src/scss/control_panel.scss
@@ -11,7 +11,8 @@
     }
 
     @include media-breakpoint-up(md) {
-        .breadcrumb, .o_cp_left, .o_cp_searchview, .o_cp_right {
+        .o_cp_top_left, .o_cp_top_right,
+        .o_cp_bottom_left, .o_cp_bottom_right {
             width: 50%;
         }
     }
@@ -24,11 +25,11 @@
         }
     }
 
-    .o_cp_searchview {
+    .o_cp_top_right {
         min-height: $o-cp-breadcrumb-height;
     }
 
-    .o_cp_left {
+    .o_cp_bottom_left {
         display: flex;
         justify-content: space-between;
 
@@ -61,7 +62,7 @@
         }
     }
 
-    .o_cp_right {
+    .o_cp_bottom_right {
         display: flex;
 
         > .o_cp_pager {
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 99b4588c450..0199aeb8136 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -6,39 +6,43 @@
 <t t-name="web.ControlPanel" owl="1">
     <div class="o_control_panel">
         <div class="o_cp_top">
-            <ol t-if="props.withBreadcrumbs" class="breadcrumb" role="navigation">
-                <li t-foreach="props.breadcrumbs" t-as="bc" t-key="bc.controllerID"
-                    class="breadcrumb-item"
-                    t-att-class="{ o_back_button: bc_index === props.breadcrumbs.length - 1 }"
-                    t-att-accesskey="bc_last and 'b'"
-                    t-on-click.prevent="trigger('breadcrumb-clicked', { controllerID: bc.controllerID })"
+            <div class="o_cp_top_left">
+                <ol t-if="props.withBreadcrumbs" class="breadcrumb" role="navigation">
+                    <li t-foreach="props.breadcrumbs" t-as="bc" t-key="bc.controllerID"
+                        class="breadcrumb-item"
+                        t-att-class="{ o_back_button: bc_index === props.breadcrumbs.length - 1 }"
+                        t-att-accesskey="bc_last and 'b'"
+                        t-on-click.prevent="trigger('breadcrumb-clicked', { controllerID: bc.controllerID })"
+                        >
+                        <a t-if="bc.title" href="#" t-esc="bc.title"/>
+                        <em t-else="" class="text-warning">Unnamed</em>
+                    </li>
+                    <li class="breadcrumb-item active">
+                        <t t-if="props.title" t-esc="props.title"/>
+                        <em t-else="" class="text-warning">Unnamed</em>
+                    </li>
+                </ol>
+            </div>
+            <div class="o_cp_top_right">
+                <div class="o_cp_searchview"
+                    role="search"
+                    t-ref="searchView"
                     >
-                    <a t-if="bc.title" href="#" t-esc="bc.title"/>
-                    <em t-else="" class="text-warning">Unnamed</em>
-                </li>
-                <li class="breadcrumb-item active">
-                    <t t-if="props.title" t-esc="props.title"/>
-                    <em t-else="" class="text-warning">Unnamed</em>
-                </li>
-            </ol>
-            <div class="o_cp_searchview"
-                role="search"
-                t-ref="searchView"
-                >
-                <div t-if="props.withSearchBar" class="o_searchview" role="search" aria-autocomplete="list" >
-                    <i t-if="props.searchMenuTypes.length"
-                        t-attf-class="o_searchview_more fa fa-search-{{ state.displayDropdowns ? 'minus' : 'plus' }}"
-                        title="Advanced Search..."
-                        role="img"
-                        aria-label="Advanced Search..."
-                        t-on-click.prevent="state.displayDropdowns = !state.displayDropdowns"
-                    />
-                    <SearchBar t-if="props.withSearchBar" fields="fields"/>
+                    <div t-if="props.withSearchBar" class="o_searchview" role="search" aria-autocomplete="list" >
+                        <i t-if="props.searchMenuTypes.length"
+                            t-attf-class="o_searchview_more fa fa-search-{{ state.displayDropdowns ? 'minus' : 'plus' }}"
+                            title="Advanced Search..."
+                            role="img"
+                            aria-label="Advanced Search..."
+                            t-on-click.prevent="state.displayDropdowns = !state.displayDropdowns"
+                        />
+                        <SearchBar t-if="props.withSearchBar" fields="fields"/>
+                    </div>
                 </div>
             </div>
         </div>
         <div class="o_cp_bottom">
-            <div class="o_cp_left">
+            <div class="o_cp_bottom_left">
                 <div class="o_cp_buttons" role="toolbar" aria-label="Control panel buttons" t-ref="buttons">
                     <t t-slot="buttons"/>
                 </div>
@@ -46,7 +50,7 @@
                     t-props="props.actionMenus"
                 />
             </div>
-            <div class="o_cp_right">
+            <div class="o_cp_bottom_right">
                 <div class="btn-group o_search_options position-static"
                     role="search"
                     t-ref="searchViewButtons"
diff --git a/addons/web/static/tests/chrome/action_manager_tests.js b/addons/web/static/tests/chrome/action_manager_tests.js
index 96835f8eab5..3a452b20d52 100644
--- a/addons/web/static/tests/chrome/action_manager_tests.js
+++ b/addons/web/static/tests/chrome/action_manager_tests.js
@@ -3106,7 +3106,7 @@ QUnit.module('ActionManager', {
             "list view is not grouped");
 
         // open group by dropdown
-        await testUtils.dom.click($('.o_control_panel .o_cp_right button:contains(Group By)'));
+        await testUtils.dom.click($('.o_control_panel .o_cp_bottom_right button:contains(Group By)'));
 
         // click on first link
         await testUtils.dom.click($('.o_control_panel .o_group_by_menu a:first'));
@@ -3329,7 +3329,7 @@ QUnit.module('ActionManager', {
             "should be grouped by 'bar' (two groups) at first load");
 
         // groupby 'bar' using the searchview
-        await testUtils.dom.click($('.o_control_panel .o_cp_right button:contains(Group By)'));
+        await testUtils.dom.click($('.o_control_panel .o_cp_bottom_right button:contains(Group By)'));
         await testUtils.dom.click($('.o_control_panel .o_group_by_menu a:first'));
 
         assert.containsN(actionManager, '.o_group_header', 5,
diff --git a/addons/web/static/tests/views/pivot_tests.js b/addons/web/static/tests/views/pivot_tests.js
index 0d17797ad74..49fa70449b8 100644
--- a/addons/web/static/tests/views/pivot_tests.js
+++ b/addons/web/static/tests/views/pivot_tests.js
@@ -212,7 +212,7 @@ QUnit.module('Views', {
         // there should be only one displayed measure as the other one is invisible
         assert.containsOnce(pivot, '.o_pivot_measure_row');
         // there should be only one measure besides count, as the other one is invisible
-        assert.containsN(pivot, '.o_cp_left .dropdown-item', 2);
+        assert.containsN(pivot, '.o_cp_bottom_left .dropdown-item', 2);
 
         pivot.destroy();
     });