Fix variable dropdown (#8521)

- fixed dropdown width
- add icons
- handle composite fields
## After

![image](https://github.com/user-attachments/assets/b9ac585e-2a39-4ab2-8620-739f83272b9b)

![image](https://github.com/user-attachments/assets/d9f7eabb-5693-4c1c-b81c-45a901479042)

![image](https://github.com/user-attachments/assets/9edced28-8a04-4951-913d-3e5561d4fcbe)

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader.tsx

@@ -40,6 +40,7 @@ const StyledEndIcon = styled.div`
 `;
 
 const StyledChildrenWrapper = styled.span`
+  overflow: hidden;
   padding: 0 ${({ theme }) => theme.spacing(1)};
 `;
 

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSearchInput.tsx

@@ -4,9 +4,8 @@ import { forwardRef, InputHTMLAttributes } from 'react';
 import { TEXT_INPUT_STYLE } from 'twenty-ui';
 
 const StyledDropdownMenuSearchInputContainer = styled.div`
-  --vertical-padding: ${({ theme }) => theme.spacing(1)};
-
   align-items: center;
+  --vertical-padding: ${({ theme }) => theme.spacing(2)};
 
   display: flex;
   flex-direction: row;

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

@@ -62,6 +62,7 @@ const SearchVariablesDropdown = ({
 
   return (
     <Dropdown
+      dropdownMenuWidth={320}
       dropdownId={dropdownId}
       dropdownHotkeyScope={{
         scope: dropdownId,

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

@@ -1,8 +1,15 @@
+import {
+  OverflowingTextWithTooltip,
+  IconChevronLeft,
+  MenuItemSelect,
+  useIcons,
+} from 'twenty-ui';
 import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
-import { StepOutputSchema } from '@/workflow/search-variables/types/StepOutputSchema';
-import { isObject } from '@sniptt/guards';
+import {
+  OutputSchema,
+  StepOutputSchema,
+} from '@/workflow/search-variables/types/StepOutputSchema';
 import { useState } from 'react';
-import { IconChevronLeft, MenuItemSelect } from 'twenty-ui';
 import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
 
 type SearchVariablesDropdownStepSubItemProps = {
@@ -18,11 +25,12 @@ const SearchVariablesDropdownStepSubItem = ({
 }: SearchVariablesDropdownStepSubItemProps) => {
   const [currentPath, setCurrentPath] = useState<string[]>([]);
   const [searchInputValue, setSearchInputValue] = useState('');
+  const { getIcon } = useIcons();
 
-  const getSelectedObject = () => {
+  const getSelectedObject = (): OutputSchema => {
     let selected = step.outputSchema;
     for (const key of currentPath) {
-      selected = selected[key];
+      selected = selected[key]?.value;
     }
     return selected;
   };
@@ -30,7 +38,7 @@ const SearchVariablesDropdownStepSubItem = ({
   const handleSelect = (key: string) => {
     const selectedObject = getSelectedObject();
 
-    if (isObject(selectedObject[key])) {
+    if (!selectedObject[key]?.isLeaf) {
       setCurrentPath([...currentPath, key]);
       setSearchInputValue('');
     } else {
@@ -59,7 +67,7 @@ const SearchVariablesDropdownStepSubItem = ({
   return (
     <>
       <DropdownMenuHeader StartIcon={IconChevronLeft} onClick={goBack}>
-        {headerLabel}
+        <OverflowingTextWithTooltip text={headerLabel} />
       </DropdownMenuHeader>
       <DropdownMenuSearchInput
         autoFocus
@@ -73,8 +81,8 @@ const SearchVariablesDropdownStepSubItem = ({
           hovered={false}
           onClick={() => handleSelect(key)}
           text={key}
-          hasSubMenu={isObject(value)}
-          LeftIcon={undefined}
+          hasSubMenu={!value.isLeaf}
+          LeftIcon={value.icon ? getIcon(value.icon) : undefined}
         />
       ))}
     </>

packages/twenty-front/src/modules/workflow/search-variables/types/StepOutputSchema.ts

@@ -1,5 +1,22 @@
+import { InputSchemaPropertyType } from '@/workflow/types/InputSchema';
+
+type Leaf = {
+  isLeaf: true;
+  type?: InputSchemaPropertyType;
+  icon?: string;
+  value: any;
+};
+
+type Node = {
+  isLeaf: false;
+  icon?: string;
+  value: OutputSchema;
+};
+
+export type OutputSchema = Record<string, Leaf | Node>;
+
 export type StepOutputSchema = {
   id: string;
   name: string;
-  outputSchema: Record<string, any>;
+  outputSchema: OutputSchema;
 };

packages/twenty-front/src/modules/workflow/types/InputSchema.ts

@@ -1,10 +1,13 @@
-type InputSchemaPropertyType =
+import { FieldMetadataType } from '~/generated/graphql';
+
+export type InputSchemaPropertyType =
   | 'string'
   | 'number'
   | 'boolean'
   | 'object'
   | 'array'
-  | 'unknown';
+  | 'unknown'
+  | FieldMetadataType;
 
 type InputSchemaProperty = {
   type: InputSchemaPropertyType;