From 884ef9f7ee345ab1e940dbf88f4432b7e10f36e3 Mon Sep 17 00:00:00 2001
From: Julien Mougenot <jum@odoo.com>
Date: Thu, 4 Jun 2020 08:06:08 +0000
Subject: [PATCH] [REF] web: force dropdown menu icon through getter

Before this ref, the dropdown menu got his icon directly from his props.
This means that any inheriting class had either to define its icon with
the 'default_props' key or to have its parent giving it in the props.

Now, the icon is retrieved from the props via a getter (same as title
and items) and can be overridden to force a fixed icon on the class.
---
 .../web/static/src/js/components/dropdown_menu.js  |  8 ++++++++
 .../static/src/js/control_panel/favorite_menu.js   | 11 ++++++++---
 .../web/static/src/js/control_panel/filter_menu.js | 13 +++++++++----
 .../static/src/js/control_panel/groupby_menu.js    | 14 +++++++++-----
 .../static/src/js/control_panel/search_utils.js    |  8 ++++----
 addons/web/static/src/xml/base.xml                 |  4 ++--
 6 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/addons/web/static/src/js/components/dropdown_menu.js b/addons/web/static/src/js/components/dropdown_menu.js
index be1f29629ed..0684a1fd69d 100644
--- a/addons/web/static/src/js/components/dropdown_menu.js
+++ b/addons/web/static/src/js/components/dropdown_menu.js
@@ -61,6 +61,14 @@ odoo.define('web.DropdownMenu', function (require) {
             return this.env.device.isMobile;
         }
 
+        /**
+         * Can be overriden to force an icon on an inheriting class.
+         * @returns {string} Font Awesome icon class
+         */
+        get icon() {
+            return this.props.icon;
+        }
+
         /**
          * Meant to be overriden to provide the list of items to display.
          * @returns {Object[]}
diff --git a/addons/web/static/src/js/control_panel/favorite_menu.js b/addons/web/static/src/js/control_panel/favorite_menu.js
index 73bedc4ffdb..066b30f30d5 100644
--- a/addons/web/static/src/js/control_panel/favorite_menu.js
+++ b/addons/web/static/src/js/control_panel/favorite_menu.js
@@ -3,6 +3,7 @@ odoo.define('web.FavoriteMenu', function (require) {
 
     const Dialog = require('web.OwlDialog');
     const DropdownMenu = require('web.DropdownMenu');
+    const { FACET_ICONS } = require("web.searchUtils");
     const Registry = require('web.Registry');
     const { useModel } = require('web.model');
 
@@ -29,6 +30,13 @@ odoo.define('web.FavoriteMenu', function (require) {
         // Getters
         //---------------------------------------------------------------------
 
+        /**
+         * @override
+         */
+        get icon() {
+            return FACET_ICONS.favorite;
+        }
+
         /**
          * @override
          */
@@ -93,9 +101,6 @@ odoo.define('web.FavoriteMenu', function (require) {
     FavoriteMenu.components = Object.assign({}, DropdownMenu.components, {
         Dialog,
     });
-    FavoriteMenu.defaultProps = Object.assign({}, DropdownMenu.defaultProps, {
-        icon: 'fa fa-star',
-    });
     FavoriteMenu.template = 'web.FavoriteMenu';
 
     return FavoriteMenu;
diff --git a/addons/web/static/src/js/control_panel/filter_menu.js b/addons/web/static/src/js/control_panel/filter_menu.js
index 47f01d22681..2341def75b0 100644
--- a/addons/web/static/src/js/control_panel/filter_menu.js
+++ b/addons/web/static/src/js/control_panel/filter_menu.js
@@ -1,8 +1,9 @@
 odoo.define('web.FilterMenu', function (require) {
     "use strict";
 
-    const DropdownMenu = require('web.DropdownMenu');
     const CustomFilterItem = require('web.CustomFilterItem');
+    const DropdownMenu = require('web.DropdownMenu');
+    const { FACET_ICONS } = require("web.searchUtils");
     const { useModel } = require('web.model');
 
     /**
@@ -26,6 +27,13 @@ odoo.define('web.FilterMenu', function (require) {
         // Getters
         //---------------------------------------------------------------------
 
+        /**
+         * @override
+         */
+        get icon() {
+            return FACET_ICONS.filter;
+        }
+
         /**
          * @override
          */
@@ -62,9 +70,6 @@ odoo.define('web.FilterMenu', function (require) {
     FilterMenu.components = Object.assign({}, DropdownMenu.components, {
         CustomFilterItem,
     });
-    FilterMenu.defaultProps = Object.assign({}, DropdownMenu.defaultProps, {
-        icon: 'fa fa-filter',
-    });
     FilterMenu.props = Object.assign({}, DropdownMenu.props, {
         fields: Object,
     });
diff --git a/addons/web/static/src/js/control_panel/groupby_menu.js b/addons/web/static/src/js/control_panel/groupby_menu.js
index 858f2a7953e..97bad1a2ce7 100644
--- a/addons/web/static/src/js/control_panel/groupby_menu.js
+++ b/addons/web/static/src/js/control_panel/groupby_menu.js
@@ -1,9 +1,9 @@
 odoo.define('web.GroupByMenu', function (require) {
     "use strict";
 
-    const { GROUPABLE_TYPES } = require('web.searchUtils');
-    const DropdownMenu = require('web.DropdownMenu');
     const CustomGroupByItem = require('web.CustomGroupByItem');
+    const DropdownMenu = require('web.DropdownMenu');
+    const { FACET_ICONS, GROUPABLE_TYPES } = require('web.searchUtils');
     const { useModel } = require('web.model');
 
     /**
@@ -31,6 +31,13 @@ odoo.define('web.GroupByMenu', function (require) {
         // Getters
         //---------------------------------------------------------------------
 
+        /**
+         * @override
+         */
+        get icon() {
+            return FACET_ICONS.groupBy;
+        }
+
         /**
          * @override
          */
@@ -82,9 +89,6 @@ odoo.define('web.GroupByMenu', function (require) {
     GroupByMenu.components = Object.assign({}, DropdownMenu.components, {
         CustomGroupByItem,
     });
-    GroupByMenu.defaultProps = Object.assign({}, DropdownMenu.defaultProps, {
-        icon: 'fa fa-bars',
-    });
     GroupByMenu.props = Object.assign({}, DropdownMenu.props, {
         fields: Object,
     });
diff --git a/addons/web/static/src/js/control_panel/search_utils.js b/addons/web/static/src/js/control_panel/search_utils.js
index da886004669..3a605faa2b8 100644
--- a/addons/web/static/src/js/control_panel/search_utils.js
+++ b/addons/web/static/src/js/control_panel/search_utils.js
@@ -136,10 +136,10 @@ odoo.define('web.searchUtils', function (require) {
 
     // Search bar
     const FACET_ICONS = {
-        filter: 'fa-filter',
-        groupBy: 'fa-bars',
-        favorite: 'fa-star',
-        timeRange: 'fa-calendar',
+        filter: 'fa fa-filter',
+        groupBy: 'fa fa-bars',
+        favorite: 'fa fa-star',
+        timeRange: 'fa fa-calendar',
     };
 
     return {
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 999e12ebccd..6d71234a6c1 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -160,7 +160,7 @@
             t-on-click="state.open = !state.open"
             t-on-keydown="_onButtonKeydown"
             >
-            <i t-if="props.icon" t-att-class="props.icon"/>
+            <i t-if="icon" t-att-class="icon"/>
             <span class="o_dropdown_title" t-esc="title"/>
             <i t-if="displayCaret" t-attf-class="o_dropdown_caret fa fa-caret-{{ state.open ? 'down' : 'right' }}"/>
             <i t-elif="displayChevron" t-attf-class="fa fa-chevron-{{ state.open ? 'down' : 'right' }} float-right mt4"/>
@@ -575,7 +575,7 @@
             t-on-keydown="_onFacetKeydown(facet, facet_index)"
             >
             <span t-if="facet.title" class="o_searchview_facet_label" t-esc="facet.title"/>
-            <span t-else="" t-attf-class="o_searchview_facet_label fa {{ facet.icon }}"/>
+            <span t-else="" t-attf-class="o_searchview_facet_label {{ facet.icon }}"/>
             <div class="o_facet_values">
                 <t t-foreach="facet.values" t-as="facetValue" t-key="facetValue_index">
                     <span t-if="!facetValue_first" class="o_facet_values_sep" t-esc="facet.separator"/>