From 02d11b8926494b16f897e49f97076af8461c1278 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Tue, 25 May 2021 13:53:46 +0100
Subject: [PATCH] Extend HeaderButton and HeaderButtons to be more generic

---
 .../views/right_panel/HeaderButton.tsx        | 26 ++++++++-----------
 .../views/right_panel/HeaderButtons.tsx       |  4 +--
 2 files changed, 13 insertions(+), 17 deletions(-)

diff --git a/src/components/views/right_panel/HeaderButton.tsx b/src/components/views/right_panel/HeaderButton.tsx
index 2bc360e380..8451f69fd3 100644
--- a/src/components/views/right_panel/HeaderButton.tsx
+++ b/src/components/views/right_panel/HeaderButton.tsx
@@ -29,8 +29,6 @@ interface IProps {
     isHighlighted: boolean;
     // click handler
     onClick: () => void;
-    // The badge to display above the icon
-    badge?: React.ReactNode;
     // The parameters to track the click event
     analytics: Parameters<typeof Analytics.trackEvent>;
 
@@ -40,31 +38,29 @@ interface IProps {
     title: string;
 }
 
-// TODO: replace this, the composer buttons and the right panel buttons with a unified
-// representation
+// TODO: replace this, the composer buttons and the right panel buttons with a unified representation
 @replaceableComponent("views.right_panel.HeaderButton")
 export default class HeaderButton extends React.Component<IProps> {
-    constructor(props: IProps) {
-        super(props);
-        this.onClick = this.onClick.bind(this);
-    }
-
-    private onClick() {
+    private onClick = () => {
         Analytics.trackEvent(...this.props.analytics);
         this.props.onClick();
-    }
+    };
 
     public render() {
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const {isHighlighted, onClick, analytics, name, title, ...props} = this.props;
+
         const classes = classNames({
             mx_RightPanel_headerButton: true,
-            mx_RightPanel_headerButton_highlight: this.props.isHighlighted,
-            [`mx_RightPanel_${this.props.name}`]: true,
+            mx_RightPanel_headerButton_highlight: isHighlighted,
+            [`mx_RightPanel_${name}`]: true,
         });
 
         return <AccessibleTooltipButton
-            aria-selected={this.props.isHighlighted}
+            {...props}
+            aria-selected={isHighlighted}
             role="tab"
-            title={this.props.title}
+            title={title}
             className={classes}
             onClick={this.onClick}
         />;
diff --git a/src/components/views/right_panel/HeaderButtons.tsx b/src/components/views/right_panel/HeaderButtons.tsx
index 6b8445e9b9..281d7edd8b 100644
--- a/src/components/views/right_panel/HeaderButtons.tsx
+++ b/src/components/views/right_panel/HeaderButtons.tsx
@@ -43,11 +43,11 @@ interface IState {
 interface IProps {}
 
 @replaceableComponent("views.right_panel.HeaderButtons")
-export default abstract class HeaderButtons extends React.Component<IProps, IState> {
+export default abstract class HeaderButtons<P> extends React.Component<IProps & P, IState> {
     private storeToken: EventSubscription;
     private dispatcherRef: string;
 
-    constructor(props: IProps, kind: HeaderKind) {
+    constructor(props: IProps & P, kind: HeaderKind) {
         super(props);
 
         const rps = RightPanelStore.getSharedInstance();