From 035fcf666a9a8baf564f39a0d768c41125e2e5d4 Mon Sep 17 00:00:00 2001 From: MananTank Date: Fri, 21 Feb 2025 16:17:03 +0000 Subject: [PATCH] [TOOL-3493] Dashboard: Fix search in team members page, minor ui tweaks (#6309) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## PR-Codex overview This PR focuses on enhancing the member management functionality by adding search capabilities to filter team members and invites based on a search term. It introduces new state variables and updates components to utilize these features. ### Detailed summary - Added `searchTerm`, `setSearchTerm`, and `searchPlaceholder` to relevant components. - Updated the `Input` component to use `searchTerm` and `setSearchTerm`. - Implemented filtering logic for invites and members based on `searchTerm`. - Replaced `GradientAvatar` with `Badge` in `TeamSettingsSidebar`. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` --- .../_components/sidebar/TeamSettingsSidebar.tsx | 17 ++++++++--------- .../~/settings/members/ManageInvitesSection.tsx | 12 +++++++++++- .../~/settings/members/ManageMembersSection.tsx | 14 ++++++++++++-- .../(team)/~/settings/members/_common.tsx | 9 +++++++-- 4 files changed, 38 insertions(+), 14 deletions(-) diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/_components/sidebar/TeamSettingsSidebar.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/_components/sidebar/TeamSettingsSidebar.tsx index e435c2da92b..21c2a1ddfaa 100644 --- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/_components/sidebar/TeamSettingsSidebar.tsx +++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/_components/sidebar/TeamSettingsSidebar.tsx @@ -1,5 +1,5 @@ import type { Team } from "@/api/team"; -import { GradientAvatar } from "@/components/blocks/Avatars/GradientAvatar"; +import { Badge } from "@/components/ui/badge"; import type { Account } from "@3rdweb-sdk/react/hooks/useApi"; import type { ThirdwebClient } from "thirdweb"; import { SidebarLink } from "./SidebarLink"; @@ -57,14 +57,13 @@ function RenderLinkGroup(props: { }) { return ( <> -
- -

{props.title}

+
+ + {props.title} +
    diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageInvitesSection.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageInvitesSection.tsx index 1235109d4a7..4b200dc8de4 100644 --- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageInvitesSection.tsx +++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageInvitesSection.tsx @@ -39,6 +39,7 @@ export function ManageInvitesSection(props: { }) { let topSection: React.ReactNode = null; + const [searchTerm, setSearchTerm] = useState(""); const [deletedInviteIds, setDeletedInviteIds] = useState([]); const [role, setRole] = useState("ALL ROLES"); const [sortBy, setSortBy] = useState("date"); @@ -46,6 +47,12 @@ export function ManageInvitesSection(props: { const invitesToShow = useMemo(() => { let value = props.teamInvites; + if (searchTerm) { + value = value.filter((inv) => + inv.email.toLowerCase().includes(searchTerm.toLowerCase()), + ); + } + value = value.filter((inv) => !deletedInviteIds.includes(inv.id)); if (role !== "ALL ROLES") { @@ -68,7 +75,7 @@ export function ManageInvitesSection(props: { } return value; - }, [role, props.teamInvites, sortBy, deletedInviteIds]); + }, [role, props.teamInvites, sortBy, deletedInviteIds, searchTerm]); if (!props.userHasEditPermission) { topSection = ( @@ -89,6 +96,9 @@ export function ManageInvitesSection(props: { setRole={setRole} setSortBy={setSortBy} sortBy={sortBy} + searchTerm={searchTerm} + setSearchTerm={setSearchTerm} + searchPlaceholder="Search Email" />
    diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx index 30c0d4dd3fe..3d14e12180f 100644 --- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx +++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/members/ManageMembersSection.tsx @@ -36,6 +36,7 @@ export function ManageMembersSection(props: { }) { let topSection: React.ReactNode = null; + const [searchTerm, setSearchTerm] = useState(""); const [deletedMembersIds, setDeletedMembersIds] = useState([]); const [role, setRole] = useState("ALL ROLES"); const [sortBy, setSortBy] = useState("date"); @@ -43,6 +44,12 @@ export function ManageMembersSection(props: { const membersToShow = useMemo(() => { let value = props.members; + if (searchTerm) { + value = value.filter((m) => + m.account.name.toLowerCase().includes(searchTerm.toLowerCase()), + ); + } + value = value.filter((m) => !deletedMembersIds.includes(m.accountId)); if (role !== "ALL ROLES") { @@ -69,7 +76,7 @@ export function ManageMembersSection(props: { } return value; - }, [role, props.members, sortBy, deletedMembersIds]); + }, [role, props.members, sortBy, deletedMembersIds, searchTerm]); if (!props.userHasEditPermission) { topSection = ( @@ -90,6 +97,9 @@ export function ManageMembersSection(props: { setRole={setRole} setSortBy={setSortBy} sortBy={sortBy} + searchTerm={searchTerm} + setSearchTerm={setSearchTerm} + searchPlaceholder="Search Team Members" />
    @@ -147,7 +157,7 @@ function MemberRow(props: {
    void; setSortBy: (sortBy: MemberSortId) => void; sortBy: MemberSortId; + searchTerm: string; + setSearchTerm: (searchTerm: string) => void; + searchPlaceholder: string; }) { - const { role, setRole, setSortBy, sortBy } = props; + const { role, setRole, setSortBy, sortBy, searchTerm, setSearchTerm } = props; return (
    {/* Search */}
    setSearchTerm(e.target.value)} />