feat: add repository filter dropdown in RHS sidebar#1024
Conversation
- 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
|
Warning Review limit reached
Next review available in: 2 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe right sidebar component now supports filtering items by repository via a dropdown. A helper extracts repository names from items, component state tracks the selected repository with reset on state change, render computes filtered items, and styling switches to a theme-aware function. ChangesRepository Filter Feature
Estimated code review effort: 2 (Simple) | ~15 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant SidebarRight
participant GithubItems
User->>SidebarRight: select repository from dropdown
SidebarRight->>SidebarRight: handleRepoFilterChange updates selectedRepo
SidebarRight->>SidebarRight: compute filteredItems from githubItems
SidebarRight->>GithubItems: render with items=filteredItems
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
This PR has been automatically labelled "stale" because it hasn't had recent activity. |
| } | ||
|
|
||
| // Extract unique repo names for filter dropdown | ||
| const repoNames = [...new Set( |
There was a problem hiding this comment.
The repo-name extraction logic is duplicated. Please factor it into a small helper at module scope so both call sites stay in sync if the GitHub response shape ever changes.
function getRepoName(item) {
if (item.repository_url) {
return item.repository_url.replace(/.+\/repos\//, '');
}
return item.repository?.full_name ?? null;
}
| >{title}</a> | ||
| </strong> | ||
| {repoNames.length > 1 && ( | ||
| <select |
There was a problem hiding this comment.
This needs an aria-label='Filter by repository'. Also I worry that a native will look out of place next to Mattermost's styled UI. Other plugin dropdowns use react-select. Perhaps switch to that one ? Also since sectionHeader uses default inline layout, adding the next to a long title may wrap awkwardly on narrow RHS widths.
| sectionHeader: { | ||
| padding: '15px', | ||
| }, | ||
| repoFilter: { |
There was a problem hiding this comment.
Hard-coded border will be invisible on dark themes and the transparent background will inherit the dark RHS color leaving the option text unreadable. This plugin already has a convention for theme-aware styles via makeStyleFromTheme, see sidebar_buttons.jsx:
import {makeStyleFromTheme, changeOpacity} from 'mattermost-redux/utils/theme_utils';
// ... bottom of file, replacing the plain `style` object:
const getStyle = makeStyleFromTheme((theme) => ({
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,
},
}));
…on, 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 mattermost#1024
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@webapp/src/components/sidebar_right/sidebar_right.jsx`:
- Around line 173-182: The sidebar filter is using a stale selectedRepo value
even when it no longer exists in the current repoNames list. In
sidebar_right.jsx, revalidate this.state.selectedRepo against the freshly
computed repoNames before applying the filter, and fall back to an empty
selection when it’s missing so filteredItems and the <select> stay in sync.
Update the logic around getRepoName, repoNames, and filteredItems to use the
validated repo selection.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository UI
Review profile: CHILL
Plan: Pro
Run ID: 6ac8b7ca-2647-4b45-80fa-d2690bd635c2
📒 Files selected for processing (1)
webapp/src/components/sidebar_right/sidebar_right.jsx
…validation - Replace native <select> with ReactSelect for consistent theme-aware styling - Add stale state validation: reset selectedRepo when the repo is no longer present - Use getStyleForReactSelect(theme) for proper dark/light theme support - Extract getCurrentItems() helper method for reuse in componentDidUpdate - Add eslint-disable comments for setState in componentDidUpdate (required pattern) - Update container styles (repoFilterContainer replaces repoFilter)
|
Hi @nang2049, I've addressed all review feedback in commit 83c6200:
The dropdown is now searchable=false (since it's a simple filter), with |
3 participants
Summary
Adds a repository filter dropdown to the GitHub plugin RHS sidebar, allowing users to filter PRs, reviews, assignments, and unread notifications by specific repository.
Resolves #265
Changes
<select>dropdown in the RHS header that lists all unique repositories from the current itemsRelease Notes
Screenshots
The dropdown appears next to the title in the RHS header, styled minimally to match the existing UI.
Change Impact: 🟡 Medium
Reasoning: The change is isolated to a single sidebar component, but it alters user-facing filtering behavior and introduces new state-driven rendering paths that need validation across the four RHS views. It doesn’t touch shared infrastructure or critical backend flows, but it does affect an important interaction in a widely used UI surface.
Regression Risk: Moderate. The main risk is incorrect filtering or reset behavior when switching tabs, especially for edge cases with empty lists, duplicate repo names, or theme-dependent styling.
QA Recommendation: Perform targeted manual QA on each RHS tab to verify repository dropdown visibility, option population, filtering, and reset behavior when changing tabs. Low risk to skip broad regression testing, but this specific sidebar flow should be checked before release.