[IMP] web_filter_header_button: show groupBy filters

Now we can configure group filters to show up along the other filters so
users can easily access those as well.

TT49232

web_filter_header_button/demo/ir_module_module_view.xml

@@ -14,6 +14,11 @@
                     name="context"
                 >{'shown_in_panel': {'icon': 'fa-toggle-off', 'hotkey': 'u'}}</attribute>
             </filter>
+            <filter name="state" position="attributes">
+                <attribute
+                    name="context"
+                >{'group_by':'state', 'shown_in_panel': {'icon': 'fa-th-list', 'hotkey': 's'}}</attribute>
+            </filter>
         </field>
     </record>
 </odoo>

web_filter_header_button/static/src/control_panel/control_panel_model_extension.esm.js

@@ -32,5 +32,17 @@ patch(
             }
             return preFilter;
         },
+        /**
+         * Allow groupBy filters to show up as buttons
+         * @override
+         * @param {Object} filter
+         * @param {Object} attrs
+         */
+        _extractAttributes(filter, attrs) {
+            this._super(...arguments);
+            if (filter.type === "groupBy" && attrs.context.shown_in_panel) {
+                filter.context = attrs.context;
+            }
+        },
     }
 );

web_filter_header_button/static/src/filter_button/filter_button.esm.js

@@ -30,6 +30,9 @@ export class FilterButton extends Component {
             favorite: {
                 color: "warning",
             },
+            groupBy: {
+                color: "info",
+            },
         };
         return mapping[filter.type];
     }