From 475aa6ca4965f117c709cdcfc2458a07aeb7ff6e Mon Sep 17 00:00:00 2001
From: Romeo Fragomeli <rfr@odoo.com>
Date: Wed, 10 May 2023 14:54:42 +0000
Subject: [PATCH] [REF] web: introduces search bar toggler component

Part-of: odoo/odoo#116641
---
 .../search/control_panel/control_panel.xml    |  1 +
 .../src/search/search_bar/search_bar.js       | 21 +------
 .../src/search/search_bar/search_bar.xml      |  7 +--
 .../search/search_bar/search_bar_toggler.js   | 55 +++++++++++++++++++
 .../search/search_bar/search_bar_toggler.xml  | 10 ++++
 .../src/views/calendar/calendar_controller.js |  3 +
 .../views/calendar/calendar_controller.xml    |  5 +-
 .../src/views/graph/graph_controller.js       |  2 +
 .../src/views/graph/graph_controller.xml      |  5 +-
 .../src/views/kanban/kanban_controller.js     |  2 +
 .../src/views/kanban/kanban_controller.xml    |  5 +-
 .../static/src/views/list/list_controller.js  | 14 ++++-
 .../static/src/views/list/list_controller.xml |  5 +-
 .../src/views/pivot/pivot_controller.js       |  2 +
 .../src/views/pivot/pivot_controller.xml      |  5 +-
 .../tests/mobile/views/list_view_tests.js     |  2 +-
 .../view_dialogs/export_data_dialog_tests.js  |  1 +
 .../static/tests/tours/main_flow.js           |  2 +-
 .../addons/test_main_flows/tests/test_flow.py |  5 +-
 19 files changed, 114 insertions(+), 38 deletions(-)
 create mode 100644 addons/web/static/src/search/search_bar/search_bar_toggler.js
 create mode 100644 addons/web/static/src/search/search_bar/search_bar_toggler.xml

diff --git a/addons/web/static/src/search/control_panel/control_panel.xml b/addons/web/static/src/search/control_panel/control_panel.xml
index f383d631496..4ba3c7fcd9f 100644
--- a/addons/web/static/src/search/control_panel/control_panel.xml
+++ b/addons/web/static/src/search/control_panel/control_panel.xml
@@ -68,6 +68,7 @@
                             </t>
                         </nav>
                     </t>
+                    <t t-slot="control-panel-navigation-additional"/>
                 </div>
             </div>
         </div>
diff --git a/addons/web/static/src/search/search_bar/search_bar.js b/addons/web/static/src/search/search_bar/search_bar.js
index 3e61f330912..a2ed1ec39bf 100644
--- a/addons/web/static/src/search/search_bar/search_bar.js
+++ b/addons/web/static/src/search/search_bar/search_bar.js
@@ -9,18 +9,8 @@ import { DomainSelectorDialog } from "@web/core/domain_selector_dialog/domain_se
 import { fuzzyTest } from "@web/core/utils/search";
 import { _t } from "@web/core/l10n/translation";
 import { SearchBarMenu } from "../search_bar_menu/search_bar_menu";
-import { useDebounced } from "@web/core/utils/timing";
-import { browser } from "@web/core/browser/browser";
-import { SIZES } from "@web/core/ui/ui_service";
 
-import {
-    Component,
-    onMounted,
-    onWillUnmount,
-    useExternalListener,
-    useRef,
-    useState,
-} from "@odoo/owl";
+import { Component, useExternalListener, useRef, useState } from "@odoo/owl";
 const parsers = registry.category("parsers");
 
 const CHAR_FIELDS = ["char", "html", "many2many", "many2one", "one2many", "text", "properties"];
@@ -41,7 +31,6 @@ export class SearchBar extends Component {
             expanded: [],
             focusedIndex: 0,
             query: "",
-            showSearchBar: this.ui.size > SIZES.SM,
         });
 
         // derived state
@@ -64,10 +53,6 @@ export class SearchBar extends Component {
 
         useExternalListener(window, "click", this.onWindowClick);
         useExternalListener(window, "keydown", this.onWindowKeydown);
-
-        this.onResize = useDebounced(this.onResize, 200);
-        onMounted(() => browser.addEventListener("resize", this.onResize));
-        onWillUnmount(() => browser.removeEventListener("resize", this.onResize));
     }
 
     /**
@@ -443,10 +428,6 @@ export class SearchBar extends Component {
         this.inputRef.el.focus();
     }
 
-    onResize() {
-        this.state.showSearchBar = this.ui.size > SIZES.SM;
-    }
-
     /**
      * @param {KeyboardEvent} ev
      */
diff --git a/addons/web/static/src/search/search_bar/search_bar.xml b/addons/web/static/src/search/search_bar/search_bar.xml
index b8096ba525b..5b271093783 100644
--- a/addons/web/static/src/search/search_bar/search_bar.xml
+++ b/addons/web/static/src/search/search_bar/search_bar.xml
@@ -80,7 +80,7 @@
     </t>
 
     <t t-name="web.SearchBar" owl="1">
-        <div t-if="state.showSearchBar" class="o_cp_searchview d-flex input-group" role="search" t-ref="root">
+        <div class="o_cp_searchview d-flex input-group" role="search" t-ref="root">
             <div class="o_searchview form-control d-print-contents d-flex align-items-center py-1 border-end-0" role="search" aria-autocomplete="list">
                 <i class="o_searchview_icon d-print-none oi oi-search me-2"
                     role="img"
@@ -97,11 +97,6 @@
             </div>
             <SearchBarMenu/>
         </div>
-        <t t-portal="'.o_control_panel_navigation,.o_searchview'">
-            <button t-attf-class="btn btn-secondary {{state.showSearchBar?'d-md-none active':''}}" t-on-click="onToggleSearchBar">
-                <i class="fa fa-fw fa-search"/>
-            </button>
-        </t>
     </t>
 
 </templates>
diff --git a/addons/web/static/src/search/search_bar/search_bar_toggler.js b/addons/web/static/src/search/search_bar/search_bar_toggler.js
new file mode 100644
index 00000000000..92629f8a34c
--- /dev/null
+++ b/addons/web/static/src/search/search_bar/search_bar_toggler.js
@@ -0,0 +1,55 @@
+/** @odoo-module **/
+
+import { Component, useEffect, useState } from "@odoo/owl";
+import { browser } from "@web/core/browser/browser";
+import { useService } from "@web/core/utils/hooks";
+import { useDebounced } from "@web/core/utils/timing";
+
+export class SearchBarToggler extends Component {}
+SearchBarToggler.template = "web.SearchBar.Toggler";
+SearchBarToggler.props = {
+    isSmall: Boolean,
+    showSearchBar: Boolean,
+    toggleSearchBar: Function,
+};
+
+export function useSearchBarToggler() {
+    const ui = useService("ui");
+
+    let isToggled = false;
+    const state = useState({
+        isSmall: ui.isSmall,
+        showSearchBar: false,
+    });
+    const updateState = () => {
+        state.isSmall = ui.isSmall;
+        state.showSearchBar = !ui.isSmall || isToggled;
+    };
+    updateState();
+
+    function toggleSearchBar() {
+        isToggled = !isToggled;
+        updateState();
+    }
+
+    const onResize = useDebounced(updateState, 200);
+    useEffect(
+        () => {
+            browser.addEventListener("resize", onResize);
+            return () => browser.removeEventListener("resize", onResize);
+        },
+        () => []
+    );
+
+    return {
+        state,
+        component: SearchBarToggler,
+        get props() {
+            return {
+                isSmall: state.isSmall,
+                showSearchBar: state.showSearchBar,
+                toggleSearchBar,
+            };
+        },
+    };
+}
diff --git a/addons/web/static/src/search/search_bar/search_bar_toggler.xml b/addons/web/static/src/search/search_bar/search_bar_toggler.xml
new file mode 100644
index 00000000000..4c43f9884e9
--- /dev/null
+++ b/addons/web/static/src/search/search_bar/search_bar_toggler.xml
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="web.SearchBar.Toggler" owl="1">
+        <button t-if="props.isSmall" t-attf-class="btn btn-secondary {{ props.showSearchBar ? 'active' : '' }}" t-on-click="props.toggleSearchBar">
+            <i class="fa fa-fw fa-search"/>
+        </button>
+    </t>
+
+</templates>
diff --git a/addons/web/static/src/views/calendar/calendar_controller.js b/addons/web/static/src/views/calendar/calendar_controller.js
index 36898b30934..dd7aa9f322f 100644
--- a/addons/web/static/src/views/calendar/calendar_controller.js
+++ b/addons/web/static/src/views/calendar/calendar_controller.js
@@ -13,6 +13,7 @@ import { CalendarFilterPanel } from "./filter_panel/calendar_filter_panel";
 import { CalendarMobileFilterPanel } from "./mobile_filter_panel/calendar_mobile_filter_panel";
 import { CalendarQuickCreate } from "./quick_create/calendar_quick_create";
 import { SearchBar } from "@web/search/search_bar/search_bar";
+import { useSearchBarToggler } from "@web/search/search_bar/search_bar_toggler";
 import { ViewScaleSelector } from "@web/views/view_components/view_scale_selector";
 import { CogMenu } from "@web/search/cog_menu/cog_menu";
 
@@ -57,6 +58,8 @@ export class CalendarController extends Component {
         this.state = useState({
             showSideBar: !this.env.isSmall,
         });
+
+        this.searchBarToggler = useSearchBarToggler();
     }
 
     get rendererProps() {
diff --git a/addons/web/static/src/views/calendar/calendar_controller.xml b/addons/web/static/src/views/calendar/calendar_controller.xml
index 5d329324cfc..371743a0df7 100644
--- a/addons/web/static/src/views/calendar/calendar_controller.xml
+++ b/addons/web/static/src/views/calendar/calendar_controller.xml
@@ -11,7 +11,10 @@
                     <t t-call="{{ props.buttonTemplate }}"/>
                 </t>
                 <t t-set-slot="layout-actions">
-                    <SearchBar/>
+                    <SearchBar t-if="searchBarToggler.state.showSearchBar"/>
+                </t>
+                <t t-set-slot="control-panel-navigation-additional">
+                    <t t-component="searchBarToggler.component" t-props="searchBarToggler.props"/>
                 </t>
                 <div class="o_calendar_container">
                     <MobileFilterPanel t-if="env.isSmall" t-props="mobileFilterPanelProps" />
diff --git a/addons/web/static/src/views/graph/graph_controller.js b/addons/web/static/src/views/graph/graph_controller.js
index edc9ad35251..4e0702fc239 100644
--- a/addons/web/static/src/views/graph/graph_controller.js
+++ b/addons/web/static/src/views/graph/graph_controller.js
@@ -6,6 +6,7 @@ import { useModel } from "@web/views/model";
 import { standardViewProps } from "@web/views/standard_view_props";
 import { useSetupView } from "@web/views/view_hook";
 import { SearchBar } from "@web/search/search_bar/search_bar";
+import { useSearchBarToggler } from "@web/search/search_bar/search_bar_toggler";
 import { CogMenu } from "@web/search/cog_menu/cog_menu";
 
 import { Component, useRef } from "@odoo/owl";
@@ -21,6 +22,7 @@ export class GraphController extends Component {
             },
             getContext: () => this.getContext(),
         });
+        this.searchBarToggler = useSearchBarToggler();
     }
 
     /**
diff --git a/addons/web/static/src/views/graph/graph_controller.xml b/addons/web/static/src/views/graph/graph_controller.xml
index 41f415f131c..91c11812b52 100644
--- a/addons/web/static/src/views/graph/graph_controller.xml
+++ b/addons/web/static/src/views/graph/graph_controller.xml
@@ -57,7 +57,10 @@
                     <CogMenu/>
                 </t>
                 <t t-set-slot="layout-actions">
-                    <SearchBar/>
+                    <SearchBar t-if="searchBarToggler.state.showSearchBar"/>
+                </t>
+                <t t-set-slot="control-panel-navigation-additional">
+                    <t t-component="searchBarToggler.component" t-props="searchBarToggler.props"/>
                 </t>
                 <t t-if="model.data">
                     <t t-if="model.useSampleModel and props.info.noContentHelp" t-call="web.ActionHelper">
diff --git a/addons/web/static/src/views/kanban/kanban_controller.js b/addons/web/static/src/views/kanban/kanban_controller.js
index 5debaf631b1..37926cf9ce3 100644
--- a/addons/web/static/src/views/kanban/kanban_controller.js
+++ b/addons/web/static/src/views/kanban/kanban_controller.js
@@ -10,6 +10,7 @@ import { useViewButtons } from "@web/views/view_button/view_button_hook";
 import { useSetupView } from "@web/views/view_hook";
 import { KanbanRenderer } from "./kanban_renderer";
 import { SearchBar } from "@web/search/search_bar/search_bar";
+import { useSearchBarToggler } from "@web/search/search_bar/search_bar_toggler";
 import { CogMenu } from "@web/search/cog_menu/cog_menu";
 
 import { Component, reactive, useRef } from "@odoo/owl";
@@ -78,6 +79,7 @@ export class KanbanController extends Component {
                 };
             }
         });
+        this.searchBarToggler = useSearchBarToggler();
     }
 
     get modelParams() {
diff --git a/addons/web/static/src/views/kanban/kanban_controller.xml b/addons/web/static/src/views/kanban/kanban_controller.xml
index d420483751a..d948992be94 100644
--- a/addons/web/static/src/views/kanban/kanban_controller.xml
+++ b/addons/web/static/src/views/kanban/kanban_controller.xml
@@ -33,7 +33,10 @@
                     <CogMenu/>
                 </t>
                 <t t-set-slot="layout-actions">
-                    <SearchBar/>
+                    <SearchBar t-if="searchBarToggler.state.showSearchBar"/>
+                </t>
+                <t t-set-slot="control-panel-navigation-additional">
+                    <t t-component="searchBarToggler.component" t-props="searchBarToggler.props"/>
                 </t>
                 <t t-component="props.Renderer"
                     list="model.root"
diff --git a/addons/web/static/src/views/list/list_controller.js b/addons/web/static/src/views/list/list_controller.js
index d3196af03ec..9929ee7d01c 100644
--- a/addons/web/static/src/views/list/list_controller.js
+++ b/addons/web/static/src/views/list/list_controller.js
@@ -21,6 +21,7 @@ import { ExportDataDialog } from "@web/views/view_dialogs/export_data_dialog";
 import { useSetupView } from "@web/views/view_hook";
 import { ListConfirmationDialog } from "./list_confirmation_dialog";
 import { SearchBar } from "@web/search/search_bar/search_bar";
+import { useSearchBarToggler } from "@web/search/search_bar/search_bar_toggler";
 import { Dropdown } from "@web/core/dropdown/dropdown";
 import { DropdownItem } from "@web/core/dropdown/dropdown_item";
 import { CogMenu } from "@web/search/cog_menu/cog_menu";
@@ -144,6 +145,7 @@ export class ListController extends Component {
             },
             () => [this.model.root.selection.length]
         );
+        this.searchBarToggler = useSearchBarToggler();
     }
 
     get modelParams() {
@@ -594,7 +596,17 @@ export class ListController extends Component {
 }
 
 ListController.template = `web.ListView`;
-ListController.components = { ActionMenus, Layout, ViewButton, MultiRecordViewButton, SearchBar, Dropdown, DropdownItem, CogMenu, ActionMenusItems };
+ListController.components = {
+    ActionMenus,
+    Layout,
+    ViewButton,
+    MultiRecordViewButton,
+    SearchBar,
+    Dropdown,
+    DropdownItem,
+    CogMenu,
+    ActionMenusItems,
+};
 ListController.props = {
     ...standardViewProps,
     allowSelectors: { type: Boolean, optional: true },
diff --git a/addons/web/static/src/views/list/list_controller.xml b/addons/web/static/src/views/list/list_controller.xml
index 48fdcec0177..8c0a00f8558 100644
--- a/addons/web/static/src/views/list/list_controller.xml
+++ b/addons/web/static/src/views/list/list_controller.xml
@@ -32,7 +32,10 @@
                 </t>
 
                 <t t-set-slot="layout-actions">
-                    <SearchBar/>
+                    <SearchBar t-if="searchBarToggler.state.showSearchBar"/>
+                </t>
+                <t t-set-slot="control-panel-navigation-additional">
+                    <t t-component="searchBarToggler.component" t-props="searchBarToggler.props"/>
                 </t>
 
                 <t t-set-slot="control-panel-additional-actions">
diff --git a/addons/web/static/src/views/pivot/pivot_controller.js b/addons/web/static/src/views/pivot/pivot_controller.js
index 2c545268eed..3086bbe3b00 100644
--- a/addons/web/static/src/views/pivot/pivot_controller.js
+++ b/addons/web/static/src/views/pivot/pivot_controller.js
@@ -5,6 +5,7 @@ import { useModel } from "@web/views/model";
 import { standardViewProps } from "@web/views/standard_view_props";
 import { useSetupView } from "@web/views/view_hook";
 import { SearchBar } from "@web/search/search_bar/search_bar";
+import { useSearchBarToggler } from "@web/search/search_bar/search_bar_toggler";
 import { CogMenu } from "@web/search/cog_menu/cog_menu";
 
 import { Component, useRef } from "@odoo/owl";
@@ -21,6 +22,7 @@ export class PivotController extends Component {
             },
             getContext: () => this.getContext(),
         });
+        this.searchBarToggler = useSearchBarToggler();
     }
     /**
      * @returns {Object}
diff --git a/addons/web/static/src/views/pivot/pivot_controller.xml b/addons/web/static/src/views/pivot/pivot_controller.xml
index 3299a084cca..9fa0c95bfe0 100644
--- a/addons/web/static/src/views/pivot/pivot_controller.xml
+++ b/addons/web/static/src/views/pivot/pivot_controller.xml
@@ -25,7 +25,10 @@
                     <CogMenu/>
                 </t>
                 <t t-set-slot="layout-actions">
-                    <SearchBar/>
+                    <SearchBar t-if="searchBarToggler.state.showSearchBar"/>
+                </t>
+                <t t-set-slot="control-panel-navigation-additional">
+                    <t t-component="searchBarToggler.component" t-props="searchBarToggler.props"/>
                 </t>
                 <t t-set="displayNoContent" t-value="
                     props.info.noContentHelp !== false and (
diff --git a/addons/web/static/tests/mobile/views/list_view_tests.js b/addons/web/static/tests/mobile/views/list_view_tests.js
index 97ce90f9788..b14b9af1f68 100644
--- a/addons/web/static/tests/mobile/views/list_view_tests.js
+++ b/addons/web/static/tests/mobile/views/list_view_tests.js
@@ -67,7 +67,7 @@ QUnit.module("Mobile Views", ({ beforeEach }) => {
         await triggerEvents(fixture, ".o_data_row:nth-child(1)", ["touchstart", "touchend"]);
         assert.containsOnce(fixture, ".o_list_selection_box");
         assert.containsNone(fixture, ".o_list_selection_box .o_list_select_domain");
-        assert.containsNone(fixture, ".o_control_panel .fa-search");
+        assert.containsNone(fixture, ".o_control_panel .o_cp_searchview");
         assert.ok(
             fixture.querySelector(".o_list_selection_box").textContent.includes("1 selected")
         );
diff --git a/addons/web/static/tests/views/view_dialogs/export_data_dialog_tests.js b/addons/web/static/tests/views/view_dialogs/export_data_dialog_tests.js
index ce6aff0912b..cd142117611 100644
--- a/addons/web/static/tests/views/view_dialogs/export_data_dialog_tests.js
+++ b/addons/web/static/tests/views/view_dialogs/export_data_dialog_tests.js
@@ -739,6 +739,7 @@ QUnit.module("ViewDialogs", (hooks) => {
             activateElement: () => {},
             deactivateElement: () => {},
             size: 4,
+            isSmall: true,
         };
         const fakeUIService = {
             start(env) {
diff --git a/odoo/addons/test_main_flows/static/tests/tours/main_flow.js b/odoo/addons/test_main_flows/static/tests/tours/main_flow.js
index 07306ec6dbc..e9fd650e50c 100644
--- a/odoo/addons/test_main_flows/static/tests/tours/main_flow.js
+++ b/odoo/addons/test_main_flows/static/tests/tours/main_flow.js
@@ -419,7 +419,7 @@ stepUtils.autoExpandMoreButtons('.o_form_saved'),
     content: _t('Save'),
     position: 'right',
 }, {
-    trigger: '.o_form_button_save',
+    trigger: '.o_form_status_indicator .o_form_button_save',
     content: _t("Save this product and the modifications you've made to it."),
     position: 'bottom',
 }, {
diff --git a/odoo/addons/test_main_flows/tests/test_flow.py b/odoo/addons/test_main_flows/tests/test_flow.py
index c08e3084738..51fbb7b6e46 100644
--- a/odoo/addons/test_main_flows/tests/test_flow.py
+++ b/odoo/addons/test_main_flows/tests/test_flow.py
@@ -1,8 +1,6 @@
 # Part of Odoo. See LICENSE file for full copyright and licensing details.
 
-import odoo
 import odoo.tests
-import unittest
 
 class BaseTestUi(odoo.tests.HttpCase):
 
@@ -81,5 +79,4 @@ class TestUiMobile(BaseTestUi):
     touch_enabled = True
 
     def test_01_main_flow_tour_mobile(self):
-        raise unittest.SkipTest("Skip Milk")
-        # self.main_flow_tour()
+        self.main_flow_tour()