[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.

4 files changed, 30 insertions, 16 deletions

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');
 
@@ -32,6 +33,13 @@ odoo.define('web.FavoriteMenu', function (require) {
         /**
          * @override
          */
+        get icon() {
+            return FACET_ICONS.favorite;
+        }
+
+        /**
+         * @override
+         */
         get items() {
             const favorites = this.model.getFiltersOfType('favorite');
             const registryMenus = this.constructor.registry.values().reduce(
@@ -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');
 
     /**
@@ -29,6 +30,13 @@ odoo.define('web.FilterMenu', function (require) {
         /**
          * @override
          */
+        get icon() {
+            return FACET_ICONS.filter;
+        }
+
+        /**
+         * @override
+         */
         get items() {
             return this.model.getFiltersOfType('filter');
         }
@@ -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');
 
     /**
@@ -34,6 +34,13 @@ odoo.define('web.GroupByMenu', function (require) {
         /**
          * @override
          */
+        get icon() {
+            return FACET_ICONS.groupBy;
+        }
+
+        /**
+         * @override
+         */
         get items() {
             return this.model.getFiltersOfType('groupBy');
         }
@@ -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 {