From 9253c54cf9dcb1cd38e39a868d299be4b96276e1 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Mon, 16 Jun 2025 20:47:28 +0000
Subject: [PATCH] [TOOL-4821] Improve Team members search (#7346)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## 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 -->
---
 .../settings/members/ManageMembersSection.tsx | 24 +++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx
index 3d14e12180f..340c5da340a 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx
@@ -19,6 +19,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { useMutation } from "@tanstack/react-query";
+import Fuse from "fuse.js";
 import { EllipsisIcon } from "lucide-react";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
@@ -41,13 +42,21 @@ export function ManageMembersSection(props: {
   const [role, setRole] = useState<RoleFilterValue>("ALL ROLES");
   const [sortBy, setSortBy] = useState<MemberSortId>("date");
 
+  const membersIndex = useMemo(() => {
+    return new Fuse(props.members, {
+      keys: [
+        { name: "account.name", weight: 2 },
+        { name: "account.email", weight: 1 },
+      ],
+      threshold: 0.3,
+    });
+  }, [props.members]);
+
   const membersToShow = useMemo(() => {
     let value = props.members;
 
     if (searchTerm) {
-      value = value.filter((m) =>
-        m.account.name.toLowerCase().includes(searchTerm.toLowerCase()),
-      );
+      value = membersIndex.search(searchTerm).map((result) => result.item);
     }
 
     value = value.filter((m) => !deletedMembersIds.includes(m.accountId));
@@ -76,7 +85,14 @@ export function ManageMembersSection(props: {
     }
 
     return value;
-  }, [role, props.members, sortBy, deletedMembersIds, searchTerm]);
+  }, [
+    role,
+    props.members,
+    sortBy,
+    deletedMembersIds,
+    searchTerm,
+    membersIndex,
+  ]);
 
   if (!props.userHasEditPermission) {
     topSection = (