From eb4ed08907c29d26fbe0b55e70de93be7523a27f Mon Sep 17 00:00:00 2001 From: Rafael Zendron Date: Tue, 16 Jun 2026 19:12:17 -0300 Subject: [PATCH 1/3] feat: add repository filter dropdown in RHS sidebar (#265) - Add dropdown to filter PRs/reviews/assignments/unreads by repository - Extract unique repo names from displayed items - Reset filter when switching RHS tabs - Only show dropdown when multiple repos are present --- .../sidebar_right/sidebar_right.jsx | 61 ++++++++++++++++++- 1 file changed, 60 insertions(+), 1 deletion(-) diff --git a/webapp/src/components/sidebar_right/sidebar_right.jsx b/webapp/src/components/sidebar_right/sidebar_right.jsx index 567527929..7578db894 100644 --- a/webapp/src/components/sidebar_right/sidebar_right.jsx +++ b/webapp/src/components/sidebar_right/sidebar_right.jsx @@ -81,6 +81,15 @@ export default class SidebarRight extends React.PureComponent { }).isRequired, }; + constructor(props) { + super(props); + this.state = {selectedRepo: ''}; + } + + handleRepoFilterChange = (e) => { + this.setState({selectedRepo: e.target.value}); + } + componentDidMount() { if (this.props.yourPrs && this.props.rhsState === RHSStates.PRS) { this.props.actions.getYourPrsDetails(mapGithubItemListToPrList(this.props.yourPrs)); @@ -92,6 +101,11 @@ export default class SidebarRight extends React.PureComponent { } componentDidUpdate(prevProps) { + // Reset repo filter when switching RHS tabs + if (prevProps.rhsState !== this.props.rhsState) { + this.setState({selectedRepo: ''}); + } + if (shouldUpdateDetails(this.props.yourPrs, prevProps.yourPrs, RHSStates.PRS, this.props.rhsState, prevProps.rhsState)) { this.props.actions.getYourPrsDetails(mapGithubItemListToPrList(this.props.yourPrs)); } @@ -134,17 +148,42 @@ export default class SidebarRight extends React.PureComponent { githubItems = unreads; title = 'Unread Messages'; listUrl = baseURL + '/notifications'; + break; case RHSStates.ASSIGNMENTS: githubItems = yourAssignments; title = 'Your Assignments'; listUrl = baseURL + '/pulls?q=is%3Aopen+archived%3Afalse+assignee%3A' + username + orgQuery; + break; default: break; } + // Extract unique repo names for filter dropdown + const repoNames = [...new Set( + githubItems.map((item) => { + if (item.repository_url) { + return item.repository_url.replace(/.+\/repos\//, ''); + } else if (item.repository?.full_name) { + return item.repository.full_name; + } + return null; + }).filter(Boolean), + )].sort(); + + // Filter items by selected repo + const {selectedRepo} = this.state; + const filteredItems = selectedRepo ? + githubItems.filter((item) => { + const repoName = item.repository_url ? + item.repository_url.replace(/.+\/repos\//, '') : + item.repository?.full_name; + return repoName === selectedRepo; + }) : + githubItems; + return ( {title} + {repoNames.length > 1 && ( + + )}
Date: Sat, 4 Jul 2026 23:21:29 -0300 Subject: [PATCH 2/3] fix: address PR review feedback - theme-aware styles, helper extraction, a11y - Extract getRepoName() helper to module scope (removes duplicated logic) - Add aria-label='Filter by repository' to the select element - Replace hardcoded styles with makeStyleFromTheme/changeOpacity for proper dark/light theme support (follows sidebar_buttons.jsx convention) Addresses review feedback on #1024 --- .../sidebar_right/sidebar_right.jsx | 57 ++++++++++--------- 1 file changed, 30 insertions(+), 27 deletions(-) diff --git a/webapp/src/components/sidebar_right/sidebar_right.jsx b/webapp/src/components/sidebar_right/sidebar_right.jsx index 7578db894..1fd1875f1 100644 --- a/webapp/src/components/sidebar_right/sidebar_right.jsx +++ b/webapp/src/components/sidebar_right/sidebar_right.jsx @@ -5,6 +5,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import Scrollbars from 'react-custom-scrollbars-2'; +import {makeStyleFromTheme, changeOpacity} from 'mattermost-redux/utils/theme_utils'; + import {RHSStates} from '../../constants'; import GithubItems from './github_items'; @@ -43,6 +45,13 @@ function mapGithubItemListToPrList(gilist) { }); } +function getRepoName(item) { + if (item.repository_url) { + return item.repository_url.replace(/.+\/repos\//, ''); + } + return item.repository?.full_name ?? null; +} + function shouldUpdateDetails(prs, prevPrs, targetState, currentState, prevState) { if (currentState === targetState) { if (currentState !== prevState) { @@ -163,27 +172,17 @@ export default class SidebarRight extends React.PureComponent { // Extract unique repo names for filter dropdown const repoNames = [...new Set( - githubItems.map((item) => { - if (item.repository_url) { - return item.repository_url.replace(/.+\/repos\//, ''); - } else if (item.repository?.full_name) { - return item.repository.full_name; - } - return null; - }).filter(Boolean), + githubItems.map(getRepoName).filter(Boolean), )].sort(); // Filter items by selected repo const {selectedRepo} = this.state; const filteredItems = selectedRepo ? - githubItems.filter((item) => { - const repoName = item.repository_url ? - item.repository_url.replace(/.+\/repos\//, '') : - item.repository?.full_name; - return repoName === selectedRepo; - }) : + githubItems.filter((item) => getRepoName(item) === selectedRepo) : githubItems; + const style = getStyle(this.props.theme); + return ( {repoNames.map((repo) => ( @@ -229,16 +229,19 @@ export default class SidebarRight extends React.PureComponent { } } -const style = { - sectionHeader: { - padding: '15px', - }, - repoFilter: { - marginLeft: '8px', - padding: '2px 4px', - fontSize: '12px', - borderRadius: '4px', - border: '1px solid rgba(0, 0, 0, 0.2)', - background: 'transparent', - }, -}; +const getStyle = makeStyleFromTheme((theme) => { + return { + sectionHeader: { + padding: '15px', + }, + repoFilter: { + marginLeft: '8px', + padding: '2px 4px', + fontSize: '12px', + borderRadius: '4px', + border: `1px solid ${changeOpacity(theme.centerChannelColor, 0.2)}`, + background: 'transparent', + color: theme.centerChannelColor, + }, + }; +}); From 83c6200b80e02bf071486509d02e2c45adfc4dc7 Mon Sep 17 00:00:00 2001 From: rafaumeu Date: Sun, 5 Jul 2026 01:28:45 -0300 Subject: [PATCH 3/3] fix: address PR review feedback - react-select dropdown, stale state validation - Replace native - - {repoNames.map((repo) => ( - - ))} - +
+ +
)}
@@ -234,14 +271,11 @@ const getStyle = makeStyleFromTheme((theme) => { sectionHeader: { padding: '15px', }, - repoFilter: { + repoFilterContainer: { marginLeft: '8px', - padding: '2px 4px', + minWidth: '160px', + maxWidth: '220px', fontSize: '12px', - borderRadius: '4px', - border: `1px solid ${changeOpacity(theme.centerChannelColor, 0.2)}`, - background: 'transparent', - color: theme.centerChannelColor, }, }; });