From b6ce06b515ffd413f5b4c02c430c8ccb016839e2 Mon Sep 17 00:00:00 2001
From: Anik Dhabal Babu <81948346+anikdhabal@users.noreply.github.com>
Date: Sat, 26 Oct 2024 01:16:48 +0530
Subject: [PATCH] chore: Add search ability to the people filter within
 insights (#17320)

* chore: Add search ability to the people filter within insights

* update
---
 .../insights/filters/UsersListInTeam.tsx      | 19 ++++++++++++++++---
 .../ui/components/popover/AnimatedPopover.tsx |  2 +-
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/packages/features/insights/filters/UsersListInTeam.tsx b/packages/features/insights/filters/UsersListInTeam.tsx
index 36a7cd1825..e1be54f80a 100644
--- a/packages/features/insights/filters/UsersListInTeam.tsx
+++ b/packages/features/insights/filters/UsersListInTeam.tsx
@@ -1,3 +1,5 @@
+import { useState } from "react";
+
 import {
   FilterCheckboxField,
   FilterCheckboxFieldsContainer,
@@ -5,7 +7,7 @@ import {
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import type { RouterOutputs } from "@calcom/trpc";
 import { trpc } from "@calcom/trpc";
-import { AnimatedPopover, Avatar } from "@calcom/ui";
+import { AnimatedPopover, Avatar, FilterSearchField } from "@calcom/ui";
 
 import { useFilterContext } from "../context/provider";
 
@@ -23,6 +25,7 @@ export const UserListInTeam = () => {
   const { t } = useLocale();
   const { filter, setConfigFilters } = useFilterContext();
   const { selectedFilter, selectedTeamId, selectedMemberUserId, isAll } = filter;
+  const [searchText, setSearchText] = useState("");
   const { data, isSuccess } = trpc.viewer.insights.userList.useQuery({
     teamId: selectedTeamId ?? -1,
     isAll: !!isAll,
@@ -34,6 +37,15 @@ export const UserListInTeam = () => {
   const userListOptions = data?.map(mapUserToOption);
   const selectedTeamUser = data?.find((item) => item.id === selectedMemberUserId);
   const userValue = selectedTeamUser ? mapUserToOption(selectedTeamUser) : null;
+  const filteredUserListOptions = userListOptions?.filter((member) => {
+    if (searchText.trim() === "") return true;
+
+    const searchLower = searchText.toLowerCase();
+    const labelMatch = member.label.toLowerCase().includes(searchLower);
+    const usernameMatch = member.username?.toLowerCase().includes(searchLower);
+
+    return labelMatch || usernameMatch;
+  });
 
   if (!isSuccess || data?.length === 0) return null;
 
@@ -47,7 +59,8 @@ export const UserListInTeam = () => {
   return (
     <AnimatedPopover text={getTextForPopover()}>
       <FilterCheckboxFieldsContainer>
-        {userListOptions?.map((member) => (
+        <FilterSearchField onChange={(e) => setSearchText(e.target.value)} placeholder={t("search")} />
+        {filteredUserListOptions?.map((member) => (
           <FilterCheckboxField
             key={member.value}
             id={member?.value?.toString()}
@@ -67,7 +80,7 @@ export const UserListInTeam = () => {
             icon={<Avatar alt={`${member?.value} avatar`} imageSrc={member.avatarUrl} size="xs" />}
           />
         ))}
-        {userListOptions?.length === 0 && (
+        {filteredUserListOptions?.length === 0 && (
           <h2 className="text-default px-4 py-2 text-sm font-medium">{t("no_options_available")}</h2>
         )}
       </FilterCheckboxFieldsContainer>
diff --git a/packages/ui/components/popover/AnimatedPopover.tsx b/packages/ui/components/popover/AnimatedPopover.tsx
index 82d122f050..7a025df6ba 100644
--- a/packages/ui/components/popover/AnimatedPopover.tsx
+++ b/packages/ui/components/popover/AnimatedPopover.tsx
@@ -60,7 +60,7 @@ export const AnimatedPopover = ({
             Trigger
           ) : (
             <div className="max-w-36 flex items-center">
-              <Tooltip content={`${prefix}${text}`}>
+              <Tooltip content={prefix ? `${prefix}${text}` : text}>
                 <div className="flex select-none truncate font-medium">
                   {prefix && <span className="text-subtle">{prefix}&nbsp;</span>}
                   {text}