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

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[]}

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;

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,
     });

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,
     });

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 {

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"/>