[TOOL-4821] Improve Team members search #7346
Conversation
|
|
""" WalkthroughThe member search functionality in the team settings section has been updated to use Fuse.js for fuzzy searching. The search now matches both member names and emails, with configurable weights and a threshold, replacing the previous substring-based filtering that only matched names. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant ManageMembersSection
participant FuseJS
User->>ManageMembersSection: Enter search term
ManageMembersSection->>FuseJS: Perform fuzzy search on members (name, email)
FuseJS-->>ManageMembersSection: Return matched members
ManageMembersSection-->>User: Display filtered member list
Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes found. Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms (6)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7346 +/- ##
=======================================
Coverage 55.58% 55.58%
=======================================
Files 909 909
Lines 58683 58683
Branches 4163 4163
=======================================
Hits 32617 32617
Misses 25959 25959
Partials 107 107
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx (3)
22-22: Add explicit type parameter to Fuse import for stronger type-safety
Fuse’s generic parameter is currently inferred asany, soresult.itemis typed asunknown. Supplying the entity type (TeamMember) will retain compile-time safety across the search result pipeline.-import Fuse from "fuse.js"; +import Fuse from "fuse.js";(See follow-up diff below for a concrete fix.)
48-61: Move Fuse instance construction out of the search-term branch
new Fuse(...)runs every timesearchTerm,role,sortBy, ordeletedMembersIdschange because it lives inside the sameuseMemo.
For large member lists this is unnecessary work—building the index only needs to happen whenprops.memberschanges.In addition, supplying the generic parameter tightens types.
- const fuse = new Fuse(value, { + // Build once whenever the members array changes + const fuse = useMemo( + () => + new Fuse<TeamMember>(props.members, { + keys: [ + { name: "account.name", weight: 2 }, + { name: "account.email", weight: 1 }, + ], + threshold: 0.3, + }), + [props.members], + );(You can then drop
valuefrom the constructor, and delete the local declaration.)This reduces unnecessary allocations and keeps the memoized function focused solely on filtering/sorting concerns.
63-63: Guard against empty or whitespace-only search terms
fuse.search("")is avoided by the truthy check, but" "will still create needless work while returning zero matches.
Consider trimming first:- if (searchTerm) { - value = fuse.search(searchTerm).map((result) => result.item); + const term = searchTerm.trim(); + if (term) { + value = fuse.search(term).map((r) => r.item); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
MananTank
force-pushed
the
06-17-_tool-4821_improve_team_members_search
branch
from
8c37fd5 to
2da355f
Compare
MananTank
force-pushed
the
06-17-_tool-4821_improve_team_members_search
branch
from
2da355f to
21802d6
Compare
size-limit report 📦
|
Merge activity
|
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR introduces a search feature for members in the `ManageMembersSection` component by integrating the `Fuse.js` library for fuzzy searching. This enhancement allows users to filter members based on their names and emails more effectively.
### Detailed summary
- Added `Fuse` from `fuse.js` to enable fuzzy searching.
- Created a `membersIndex` using `useMemo` to index `props.members`.
- Updated the filtering logic to use `membersIndex.search(searchTerm)` for searching members.
- Included `membersIndex` in the dependency array of the `membersToShow` memoization.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
- **New Features**
- Improved member search functionality with fuzzy matching, allowing for more flexible and accurate search results based on names and emails.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
06-17-_tool-4821_improve_team_members_search
branch
from
21802d6 to
9253c54
Compare
graphite-app
bot
deleted the
06-17-_tool-4821_improve_team_members_search
branch
PR-Codex overview
This PR introduces a search functionality for members in the
ManageMembersSectioncomponent using theFuse.jslibrary, allowing for more efficient filtering based on member account names and emails.Detailed summary
Fuse.jsfor advanced search capabilities.membersIndexusinguseMemoto indexprops.members.membersIndex.search(searchTerm)for improved search functionality.membersToShowmemoization to includemembersIndex.Summary by CodeRabbit