From 6065201acd7eddbb9b3758b1eb27c9f998b02385 Mon Sep 17 00:00:00 2001
From: Vinod Rathod <112850789+rathodvinod5@users.noreply.github.com>
Date: Mon, 29 Apr 2024 21:29:26 +0530
Subject: [PATCH] Implemented Search Feature in Filter Menu (#5068)

Closes #4367
---
 .../ObjectFilterDropdownFilterSelect.tsx      | 93 ++++++++++++++-----
 1 file changed, 71 insertions(+), 22 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
index bd8c69977..e052004b3 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
@@ -1,5 +1,8 @@
+import { useState } from 'react';
+import styled from '@emotion/styled';
 import { useRecoilValue } from 'recoil';
 import { useIcons } from 'twenty-ui';
+import { useDebouncedCallback } from 'use-debounce';
 
 import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
 import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
@@ -9,7 +12,34 @@ import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope
 
 import { getOperandsForFilterType } from '../utils/getOperandsForFilterType';
 
+export const StyledInput = styled.input`
+  background: ${({ theme }) => theme.background.secondary};
+  border: none;
+  border-top: 1px solid ${({ theme }) => theme.border.color.light};
+  border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
+  border-radius: 0;
+  border-top-left-radius: ${({ theme }) => theme.border.radius.md};
+  border-top-right-radius: ${({ theme }) => theme.border.radius.md};
+  color: ${({ theme }) => theme.font.color.primary};
+  margin: 0;
+  outline: none;
+  padding: ${({ theme }) => theme.spacing(2)};
+  height: 20px;
+  font-family: inherit;
+  font-size: ${({ theme }) => theme.font.size.sm};
+
+  font-weight: inherit;
+  max-width: 100%;
+  overflow: hidden;
+  text-decoration: none;
+
+  &::placeholder {
+    color: ${({ theme }) => theme.font.color.light};
+  }
+`;
+
 export const ObjectFilterDropdownFilterSelect = () => {
+  const [searchText, setSearchText] = useState('');
   const {
     setFilterDefinitionUsedInDropdown,
     setSelectedOperandInDropdown,
@@ -25,31 +55,50 @@ export const ObjectFilterDropdownFilterSelect = () => {
 
   const setHotkeyScope = useSetHotkeyScope();
 
+  const debouncedSetSearchFilter = useDebouncedCallback(setSearchText, 100, {
+    leading: true,
+  });
+  const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    debouncedSetSearchFilter(event.target.value);
+  };
+
   return (
-    <DropdownMenuItemsContainer>
-      {[...availableFilterDefinitions]
-        .sort((a, b) => a.label.localeCompare(b.label))
-        .map((availableFilterDefinition, index) => (
-          <MenuItem
-            key={`select-filter-${index}`}
-            testId={`select-filter-${index}`}
-            onClick={() => {
-              setFilterDefinitionUsedInDropdown(availableFilterDefinition);
+    <>
+      <StyledInput
+        value={searchText}
+        placeholder="Search fields"
+        onChange={handleSearchChange}
+      />
+      <DropdownMenuItemsContainer>
+        {[...availableFilterDefinitions]
+          .sort((a, b) => a.label.localeCompare(b.label))
+          .filter((item) =>
+            item.label
+              .toLocaleLowerCase()
+              .includes(searchText.toLocaleLowerCase()),
+          )
+          .map((availableFilterDefinition, index) => (
+            <MenuItem
+              key={`select-filter-${index}`}
+              testId={`select-filter-${index}`}
+              onClick={() => {
+                setFilterDefinitionUsedInDropdown(availableFilterDefinition);
 
-              if (availableFilterDefinition.type === 'RELATION') {
-                setHotkeyScope(RelationPickerHotkeyScope.RelationPicker);
-              }
+                if (availableFilterDefinition.type === 'RELATION') {
+                  setHotkeyScope(RelationPickerHotkeyScope.RelationPicker);
+                }
 
-              setSelectedOperandInDropdown(
-                getOperandsForFilterType(availableFilterDefinition.type)?.[0],
-              );
+                setSelectedOperandInDropdown(
+                  getOperandsForFilterType(availableFilterDefinition.type)?.[0],
+                );
 
-              setObjectFilterDropdownSearchInput('');
-            }}
-            LeftIcon={getIcon(availableFilterDefinition.iconName)}
-            text={availableFilterDefinition.label}
-          />
-        ))}
-    </DropdownMenuItemsContainer>
+                setObjectFilterDropdownSearchInput('');
+              }}
+              LeftIcon={getIcon(availableFilterDefinition.iconName)}
+              text={availableFilterDefinition.label}
+            />
+          ))}
+      </DropdownMenuItemsContainer>
+    </>
   );
 };