From c5fbdf38785ad7137cd8184498a5ed98ea736f42 Mon Sep 17 00:00:00 2001
From: martmull <martmull@hotmail.fr>
Date: Wed, 13 Nov 2024 15:41:21 +0100
Subject: [PATCH] Add search input in variables

---
 .../SearchVariablesDropdownStepSubItem.tsx     | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownStepSubItem.tsx b/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownStepSubItem.tsx
index 6c71aca80113..9367ded902c1 100644
--- a/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownStepSubItem.tsx
+++ b/packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownStepSubItem.tsx
@@ -3,6 +3,7 @@ import { StepOutputSchema } from '@/workflow/search-variables/types/StepOutputSc
 import { isObject } from '@sniptt/guards';
 import { useState } from 'react';
 import { IconChevronLeft, MenuItemSelect } from 'twenty-ui';
+import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 
 type SearchVariablesDropdownStepSubItemProps = {
   step: StepOutputSchema;
@@ -16,6 +17,7 @@ const SearchVariablesDropdownStepSubItem = ({
   onBack,
 }: SearchVariablesDropdownStepSubItemProps) => {
   const [currentPath, setCurrentPath] = useState<string[]>([]);
+  const [searchInputValue, setSearchInputValue] = useState('');
 
   const getSelectedObject = () => {
     let selected = step.outputSchema;
@@ -30,6 +32,7 @@ const SearchVariablesDropdownStepSubItem = ({
 
     if (isObject(selectedObject[key])) {
       setCurrentPath([...currentPath, key]);
+      setSearchInputValue('');
     } else {
       onSelect(`{{${step.id}.${[...currentPath, key].join('.')}}}`);
     }
@@ -45,12 +48,25 @@ const SearchVariablesDropdownStepSubItem = ({
 
   const headerLabel = currentPath.length === 0 ? step.name : currentPath.at(-1);
 
+  const options = Object.entries(getSelectedObject());
+
+  const filteredOptions = searchInputValue
+    ? options.filter(([key]) =>
+        key.toLowerCase().includes(searchInputValue.toLowerCase()),
+      )
+    : options;
+
   return (
     <>
       <DropdownMenuHeader StartIcon={IconChevronLeft} onClick={goBack}>
         {headerLabel}
       </DropdownMenuHeader>
-      {Object.entries(getSelectedObject()).map(([key, value]) => (
+      <DropdownMenuSearchInput
+        autoFocus
+        value={searchInputValue}
+        onChange={(event) => setSearchInputValue(event.target.value)}
+      />
+      {filteredOptions.map(([key, value]) => (
         <MenuItemSelect
           key={key}
           selected={false}