From 1dee6ca450d0e808f13985c47e3c02f78b224316 Mon Sep 17 00:00:00 2001
From: Rafael Zendron <rafael.zendron22@gmail.com>
Date: Tue, 16 Jun 2026 19:16:24 -0300
Subject: [PATCH] feat: add refresh ability to GitHub RHS sidebar (#131)

- Add refresh button in RHS header with spinner animation
- Auto-refresh data when RHS is opened
- Wire getSidebarContent action to SidebarRight component

Resolves #131
---
 webapp/src/components/sidebar_right/index.jsx |  3 +-
 .../sidebar_right/sidebar_right.jsx           | 42 +++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)

diff --git a/webapp/src/components/sidebar_right/index.jsx b/webapp/src/components/sidebar_right/index.jsx
index 3e62e1c69..7653aa5a7 100644
--- a/webapp/src/components/sidebar_right/index.jsx
+++ b/webapp/src/components/sidebar_right/index.jsx
@@ -4,7 +4,7 @@
 import {connect} from 'react-redux';
 import {bindActionCreators} from 'redux';
 
-import {getReviewsDetails, getYourPrsDetails} from '../../actions';
+import {getReviewsDetails, getYourPrsDetails, getSidebarContent} from '../../actions';
 
 import {getSidebarData} from 'src/selectors';
 
@@ -30,6 +30,7 @@ function mapDispatchToProps(dispatch) {
         actions: bindActionCreators({
             getYourPrsDetails,
             getReviewsDetails,
+            getSidebarContent,
         }, dispatch),
     };
 }
diff --git a/webapp/src/components/sidebar_right/sidebar_right.jsx b/webapp/src/components/sidebar_right/sidebar_right.jsx
index 567527929..7b3e25147 100644
--- a/webapp/src/components/sidebar_right/sidebar_right.jsx
+++ b/webapp/src/components/sidebar_right/sidebar_right.jsx
@@ -4,6 +4,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Scrollbars from 'react-custom-scrollbars-2';
+import {OverlayTrigger, Tooltip} from 'react-bootstrap';
 
 import {RHSStates} from '../../constants';
 
@@ -78,10 +79,31 @@ export default class SidebarRight extends React.PureComponent {
         actions: PropTypes.shape({
             getYourPrsDetails: PropTypes.func.isRequired,
             getReviewsDetails: PropTypes.func.isRequired,
+            getSidebarContent: PropTypes.func.isRequired,
         }).isRequired,
     };
 
+    constructor(props) {
+        super(props);
+        this.state = {refreshing: false};
+    }
+
+    handleRefresh = async (e) => {
+        if (e) {
+            e.preventDefault();
+        }
+        if (this.state.refreshing) {
+            return;
+        }
+        this.setState({refreshing: true});
+        await this.props.actions.getSidebarContent();
+        this.setState({refreshing: false});
+    };
+
     componentDidMount() {
+        // Auto-refresh on open to guarantee latest data (issue #131)
+        this.handleRefresh();
+
         if (this.props.yourPrs && this.props.rhsState === RHSStates.PRS) {
             this.props.actions.getYourPrsDetails(mapGithubItemListToPrList(this.props.yourPrs));
         }
@@ -163,6 +185,19 @@ export default class SidebarRight extends React.PureComponent {
                                 rel='noopener noreferrer'
                             >{title}</a>
                         </strong>
+                        <OverlayTrigger
+                            key='rhsRefreshButton'
+                            placement='left'
+                            overlay={<Tooltip id='rhsRefreshTooltip'>{'Refresh'}</Tooltip>}
+                        >
+                            <a
+                                href='#'
+                                style={style.refreshButton}
+                                onClick={this.handleRefresh}
+                            >
+                                <i className={'fa fa-refresh' + (this.state.refreshing ? ' fa-spin' : '')}/>
+                            </a>
+                        </OverlayTrigger>
                     </div>
                     <div>
                         <GithubItems
@@ -181,5 +216,12 @@ export default class SidebarRight extends React.PureComponent {
 const style = {
     sectionHeader: {
         padding: '15px',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    refreshButton: {
+        color: 'rgba(0, 0, 0, 0.4)',
+        cursor: 'pointer',
     },
 };