feat: add Teams Explorer visual mapping and membership editor - #158
feat: add Teams Explorer visual mapping and membership editor#158AbiramiR-27 wants to merge 7 commits into
Conversation
github-actions
Bot
added
enhancement
|
Warning Review limit reached
Next review available in: 30 minutes You've used all free OSS reviews for now. Wait for the free limit to reset to keep reviewing this public repository. 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: Path: .coderabbit.yaml Review profile: ASSERTIVE Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
WalkthroughThe PR adds a ChangesTeams Explorer
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
actor User
participant TeamsPage
participant github.js
participant GitHubAPI
participant D3Graph
User->>TeamsPage: Open /teams
TeamsPage->>github.js: Fetch organization teams
github.js->>GitHubAPI: Fetch teams, members, and repositories
GitHubAPI-->>github.js: Return team data
github.js-->>TeamsPage: Return enriched teams
TeamsPage->>D3Graph: Build and render relationship graph
User->>D3Graph: Select or drag contributor to team
D3Graph->>TeamsPage: Request membership confirmation
TeamsPage->>github.js: Update team membership
github.js->>GitHubAPI: PUT team membership
GitHubAPI-->>github.js: Return update result
github.js-->>TeamsPage: Return success or error
TeamsPage->>D3Graph: Update graph state
Possibly related PRs
Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 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 |
github-actions
Bot
added
size/XL
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🤖 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 `@src/pages/TeamsPage.jsx`:
- Around line 41-83: Update the useEffect around fetchOrgTeams to prevent stale
requests from updating state after orgName or pat changes. Add an ignore flag or
AbortController with cleanup, and guard every setTeams, setLoading, and setError
call in the fetch, enrichment, empty-result, and error paths so only the active
request updates the view.
- Around line 55-67: Update the enrichment flow around the fetchedTeams
Promise.all so fetchTeamMembers and fetchTeamRepos errors are preserved instead
of converted to empty arrays, and expose an incomplete-data state for affected
teams, including permission, rate-limit, and network failures. Replace the
unbounded per-team parallel loading with a bounded queue/concurrency limit while
retaining successful member and repository results.
- Around line 176-230: Add a keyboard-accessible membership assignment flow
alongside the d3.drag logic in TeamsPage: make contributor/team nodes or an
equivalent native control focusable, allow selecting a contributor and target
team via keyboard, and invoke setAssignModal with the same username, teamName,
teamSlug, and avatar values used by the drag path. Preserve the existing
duplicate-membership check and setAssignError behavior.
In `@src/services/github.js`:
- Around line 162-177: Update updateTeamMembership to invalidate the cached
membership entry after the PUT succeeds, before returning true. Reuse the same
members URL/cache key used by fetchTeamMembers for the specified org and
teamSlug, and leave failed requests uncached.
- Around line 153-160: Update fetchTeamMembers and fetchTeamRepos so
authenticated team resources are not stored or retrieved through the URL-only
fetchWithCache cache; bypass caching for these endpoints or use a cache key
namespaced by a non-secret PAT identity, ensuring entries cannot be shared
across users or with unauthenticated requests.
- Around line 159-160: Update src/services/github.js:159-160 in fetchTeamRepos
to enrich each fetched repository with the analytics model’s repository-data
contract, including a computed healthScore, before returning the records. Update
src/pages/TeamsPage.jsx:145-147 to derive the node’s health rendering only from
the selected repository-data contract fields, removing fallback use of unrelated
fields while preserving the normalized healthScore and color behavior.
- Around line 76-82: Update the 403 handling in the GitHub response
classification flow to detect secondary rate-limit indicators in the response
headers or body even when x-ratelimit-remaining is greater than zero, and
classify those responses as RATE_LIMIT (or the established wait/error result).
Preserve FORBIDDEN only for genuine permission failures.
🪄 Autofix
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: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 5bb49382-6bfe-45bc-8b1e-a85c13fd22ab
📒 Files selected for processing (4)
src/App.jsxsrc/components/Navbar.jsxsrc/pages/TeamsPage.jsxsrc/services/github.js
|
Please follow the template of the PR and issue properly!! |
…agement and keyboard accessibility
github-actions
Bot
added
size/XL
|
@Ri1tik I thought I followed the standard template format, but could you please point out which specific part is missing or needs adjustment? I'll be happy to fix it right away ! |
…priority rendering in TeamsPage
github-actions
Bot
added
size/XL
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/pages/TeamsPage.jsx (2)
638-693: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winImplement focus control for the assignment modal.
This overlay does not create a modal dialog. Focus remains on the previous control, and keyboard users can leave the modal and control background content. Use an accessible dialog with an accessible name, initial/contained focus, focus restoration, and Escape handling.
🤖 Prompt for 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. In `@src/pages/TeamsPage.jsx` around lines 638 - 693, Update the assignModal overlay around the assignment modal to use an accessible dialog with an accessible name, trap keyboard focus within it, and move focus to the dialog or its first actionable control when opened. Restore focus to the triggering control when the modal closes, handle Escape to close it, and prevent background content from receiving focus while open.Source: Path instructions
117-190: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winRebuild the D3 graph when the SVG becomes available.
This effect exits without setting up
svgRef.currentwhileappLoadingis true ormodelis missing. That is valid; the effect does not rerun when the page later renders the SVG because onlyteamsandsearchQueryare dependencies.Add
modelandappLoadingto this effect's dependency array, and update the cleanup dependency forsimRef.current.🤖 Prompt for 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. In `@src/pages/TeamsPage.jsx` around lines 117 - 190, Update the D3 graph useEffect in TeamsPage to include model and appLoading in its dependency array so it reruns when the SVG becomes available or loading completes. Also update the cleanup dependency handling for simRef.current, preserving the existing graph setup and teardown behavior.
🤖 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 `@src/pages/TeamsPage.jsx`:
- Around line 41-48: Update the useEffect that calls fetchOrgTeams to require
both orgName and pat before loading. When pat is absent, clear the team state
and return before setLoading or starting the request, while preserving the
existing behavior when authenticated.
In `@src/services/github.js`:
- Around line 215-230: Add a shared paginated GitHub list-fetch helper that
requests each page with per_page=100, follows subsequent pages, and aggregates
the cached responses before returning. Update fetchOrgTeams, fetchTeamMembers,
and fetchTeamRepos to use this helper while preserving fetchTeamRepos’s
healthScore mapping on the complete repository collection.
---
Outside diff comments:
In `@src/pages/TeamsPage.jsx`:
- Around line 638-693: Update the assignModal overlay around the assignment
modal to use an accessible dialog with an accessible name, trap keyboard focus
within it, and move focus to the dialog or its first actionable control when
opened. Restore focus to the triggering control when the modal closes, handle
Escape to close it, and prevent background content from receiving focus while
open.
- Around line 117-190: Update the D3 graph useEffect in TeamsPage to include
model and appLoading in its dependency array so it reruns when the SVG becomes
available or loading completes. Also update the cleanup dependency handling for
simRef.current, preserving the existing graph setup and teardown behavior.
🪄 Autofix
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: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 6bebf751-ade2-4bae-ad43-b2f964157bd8
📒 Files selected for processing (2)
src/pages/TeamsPage.jsxsrc/services/github.js
… aggregation, and require pat hook loading
github-actions
Bot
added
size/XL
Thanks for checking, But I wanted to highlight one important part: template specifically asks for a screen recording/demo when changes affect the UI or user experience. Visual context is extremely important for UI-related changes. No matter how detailed the written description is, a short recording helps reviewers quickly understand the actual behavior, flow, and final appearance without needing to pull the branch, set up the environment, and manually test every change. Please make sure to attach a screen recording for future UI changes. It will help validate the implementation faster and give better feedback. |
|
Thanks for the clarification, @Ri1tik . I'll include the screen recording / screenshots. |
…ion and screenshots
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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 `@src/pages/TeamsPage.jsx`:
- Around line 124-159: Add a valid GitHub profile URL for every demo member in
the teams data used by TeamsPage, including the members in the visible team
fixtures, using each member’s login to populate html_url. Ensure the tooltip’s
existing profile-link rendering receives a destination in sandbox mode without
changing its behavior.
- Around line 169-218: Update the modal focus-management effect around
handleKeyDown so Escape is ignored while assigning is true, and add assigning to
the effect dependencies. Filter the queried focusable controls to enabled
elements, and when none remain, prevent Tab from leaving the modal and focus
dialogRef.current instead of returning.
🪄 Autofix
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: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: a098d277-eda6-418b-971e-bdaa98ce42fb
📒 Files selected for processing (2)
src/pages/TeamsPage.jsxsrc/services/github.js
… dialog keyboard trap during API flight
github-actions
Bot
added
size/XL
|
@Ri1tik , Because organization team details are private and restricted by GitHub, external contributors who are not members of the organization cannot fetch this data (which results in a To ensure anyone can test and verify this feature:
If you are a member of the organization and configure a valid Personal Access Token (PAT) with Here is a screenshot demonstrating the interactive graph page with demo data loaded: |
|
I do not think this feature is going with our intention of building this application much. So I need to review more in-order to take any further steps into this feature. And now are you get why i asked to follow the attach the recording!!! |
|
Yes I understand that... I have explained the core vision and intention behind this feature below to help clarify how it fits into OrgExplorer: Mapping Internal Structure: While OrgExplorer provides high-level insights into overall contributors and repositories, it currently lacks visibility into internal organization hierarchy (e.g., sub-teams, working groups, or specialized teams). Visual Team & Permission Auditing: For larger open-source organizations, this provides maintainers and mentors with a single-page visual map to audit team memberships, check cross-team overlaps, and monitor repository access scopes at a glance. Streamlined Membership Management: The drag-and-drop and keyboard-accessible interface offers an intuitive way to manage team rosters without navigating through multiple deep GitHub settings menus. Testing with Sandbox Demo Data: |
2 participants
Addressed Issues:
Fixes #150
Description of Changes:
Adds a new Teams Explorer dashboard inside OrgExplorer that fetches team data from the GitHub API and renders an interactive relationship graph.
Screenshots/Recordings:
N/A
Additional Notes:
403 Forbiddenresponses when a user's PAT lacks theread:orgscope, displaying helpful guidance instead of standard rate-limit notices.Checklist
Summary by CodeRabbit
New Features
Bug Fixes