Add search input in variables

packages/twenty-front/src/modules/workflow/search-variables/components/SearchVariablesDropdownStepSubItem.tsx

@@ -1,8 +1,9 @@
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
 import { StepOutputSchema } from '@/workflow/search-variables/types/StepOutputSchema';
 import { isObject } from '@sniptt/guards';
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { IconChevronLeft, MenuItemSelect } from 'twenty-ui';
+import { DropdownMenuSearchInput } from 'packages/twenty-front/src/modules/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;
@@ -45,12 +47,29 @@ const SearchVariablesDropdownStepSubItem = ({
 
   const headerLabel = currentPath.length === 0 ? step.name : currentPath.at(-1);
 
+  const options = Object.entries(getSelectedObject());
+
+  const filteredOptions = useMemo(
+    () =>
+      searchInputValue
+        ? options.filter(([key]) =>
+            key.toLowerCase().includes(searchInputValue.toLowerCase()),
+          )
+        : options,
+    [options, searchInputValue],
+  );
+
   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}