Implemented Search Feature in Filter Menu (#5068)

Closes #4367

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]
+      <StyledInput
-        .sort((a, b) => a.label.localeCompare(b.label))
+        value={searchText}
-        .map((availableFilterDefinition, index) => (
+        placeholder="Search fields"
-          <MenuItem
+        onChange={handleSearchChange}
-            key={`select-filter-${index}`}
+      />
-            testId={`select-filter-${index}`}
+      <DropdownMenuItemsContainer>
-            onClick={() => {
+        {[...availableFilterDefinitions]
-              setFilterDefinitionUsedInDropdown(availableFilterDefinition);
+          .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') {
+                if (availableFilterDefinition.type === 'RELATION') {
-                setHotkeyScope(RelationPickerHotkeyScope.RelationPicker);
+                  setHotkeyScope(RelationPickerHotkeyScope.RelationPicker);
-              }
+                }
 
-              setSelectedOperandInDropdown(
+                setSelectedOperandInDropdown(
-                getOperandsForFilterType(availableFilterDefinition.type)?.[0],
+                  getOperandsForFilterType(availableFilterDefinition.type)?.[0],
-              );
+                );
 
-              setObjectFilterDropdownSearchInput('');
+                setObjectFilterDropdownSearchInput('');
-            }}
+              }}
-            LeftIcon={getIcon(availableFilterDefinition.iconName)}
+              LeftIcon={getIcon(availableFilterDefinition.iconName)}
-            text={availableFilterDefinition.label}
+              text={availableFilterDefinition.label}
-          />
+            />
-        ))}
+          ))}
-    </DropdownMenuItemsContainer>
+      </DropdownMenuItemsContainer>
+    </>
   );
 };