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 {
-import { isObject } from '@sniptt/guards';
+  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)}
+          hasSubMenu={!value.isLeaf}
-          LeftIcon={undefined}
+          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;

packages/twenty-server/src/engine/core-modules/workflow/resolvers/workflow-builder.resolver.ts

@@ -10,7 +10,7 @@ import { AuthWorkspace } from 'src/engine/decorators/auth/auth-workspace.decorat
 import { UserAuthGuard } from 'src/engine/guards/user-auth.guard';
 import { WorkspaceAuthGuard } from 'src/engine/guards/workspace-auth.guard';
 import { WorkflowBuilderWorkspaceService } from 'src/modules/workflow/workflow-builder/workflow-builder.workspace-service';
-import { OutputSchema } from 'src/modules/workflow/workflow-executor/workflow-actions/types/workflow-action-settings.type';
+import { OutputSchema } from 'src/modules/workflow/workflow-builder/types/output-schema.type';
 
 @Resolver()
 @UseGuards(WorkspaceAuthGuard, UserAuthGuard)

packages/twenty-server/src/engine/utils/generate-fake-value.ts

@@ -1,4 +1,12 @@
-export const generateFakeValue = (valueType: string): any => {
+type FakeValueTypes =
+  | string
+  | number
+  | boolean
+  | Date
+  | FakeValueTypes[]
+  | { [key: string]: FakeValueTypes };
+
+export const generateFakeValue = (valueType: string): FakeValueTypes => {
   if (valueType === 'string') {
     return 'generated-string-value';
   } else if (valueType === 'number') {

packages/twenty-server/src/modules/code-introspection/types/input-schema.type.ts

@@ -1,10 +1,13 @@
-type InputSchemaPropertyType =
+import { FieldMetadataType } from 'src/engine/metadata-modules/field-metadata/field-metadata.entity';
+
+export type InputSchemaPropertyType =
   | 'string'
   | 'number'
   | 'boolean'
   | 'object'
   | 'array'
-  | 'unknown';
+  | 'unknown'
+  | FieldMetadataType;
 
 export type InputSchemaProperty = {
   type: InputSchemaPropertyType;

packages/twenty-server/src/modules/workflow/workflow-builder/types/output-schema.type.ts

@@ -0,0 +1,16 @@
+import { InputSchemaPropertyType } from 'src/modules/code-introspection/types/input-schema.type';
+
+type Leaf = {
+  isLeaf: true;
+  icon?: string;
+  type?: InputSchemaPropertyType;
+  value: any;
+};
+
+type Node = {
+  isLeaf: false;
+  icon?: string;
+  value: OutputSchema;
+};
+
+export type OutputSchema = Record<string, Leaf | Node>;

packages/twenty-server/src/modules/workflow/workflow-builder/utils/generate-fake-object-record-event.ts

@@ -1,76 +1,88 @@
 import { v4 } from 'uuid';
 
 import { DatabaseEventAction } from 'src/engine/api/graphql/graphql-query-runner/enums/database-event-action';
-import { ObjectRecordCreateEvent } from 'src/engine/core-modules/event-emitter/types/object-record-create.event';
-import { ObjectRecordDeleteEvent } from 'src/engine/core-modules/event-emitter/types/object-record-delete.event';
-import { ObjectRecordDestroyEvent } from 'src/engine/core-modules/event-emitter/types/object-record-destroy.event';
-import { ObjectRecordUpdateEvent } from 'src/engine/core-modules/event-emitter/types/object-record-update.event';
 import { ObjectMetadataEntity } from 'src/engine/metadata-modules/object-metadata/object-metadata.entity';
 import { generateFakeObjectRecord } from 'src/modules/workflow/workflow-builder/utils/generate-fake-object-record';
+import { OutputSchema } from 'src/modules/workflow/workflow-builder/types/output-schema.type';
 
-export const generateFakeObjectRecordEvent = <Entity>(
+export const generateFakeObjectRecordEvent = (
   objectMetadataEntity: ObjectMetadataEntity,
   action: DatabaseEventAction,
-):
+): OutputSchema => {
-  | ObjectRecordCreateEvent<Entity>
-  | ObjectRecordUpdateEvent<Entity>
-  | ObjectRecordDeleteEvent<Entity>
-  | ObjectRecordDestroyEvent<Entity> => {
   const recordId = v4();
   const userId = v4();
   const workspaceMemberId = v4();
 
-  const after = generateFakeObjectRecord<Entity>(objectMetadataEntity);
+  const after = generateFakeObjectRecord(objectMetadataEntity);
+  const formattedObjectMetadataEntity = Object.entries(
+    objectMetadataEntity,
+  ).reduce((acc: OutputSchema, [key, value]) => {
+    acc[key] = { isLeaf: true, value };
+
+    return acc;
+  }, {});
+
+  const baseResult: OutputSchema = {
+    recordId: { isLeaf: true, type: 'string', value: recordId },
+    userId: { isLeaf: true, type: 'string', value: userId },
+    workspaceMemberId: {
+      isLeaf: true,
+      type: 'string',
+      value: workspaceMemberId,
+    },
+    objectMetadata: {
+      isLeaf: false,
+      value: formattedObjectMetadataEntity,
+    },
+  };
 
   if (action === DatabaseEventAction.CREATED) {
     return {
-      recordId,
+      ...baseResult,
-      userId,
-      workspaceMemberId,
-      objectMetadata: objectMetadataEntity,
       properties: {
-        after,
+        isLeaf: false,
+        value: { after: { isLeaf: false, value: after } },
       },
-    } satisfies ObjectRecordCreateEvent<Entity>;
+    };
   }
 
-  const before = generateFakeObjectRecord<Entity>(objectMetadataEntity);
+  const before = generateFakeObjectRecord(objectMetadataEntity);
 
   if (action === DatabaseEventAction.UPDATED) {
     return {
-      recordId,
+      ...baseResult,
-      userId,
-      workspaceMemberId,
-      objectMetadata: objectMetadataEntity,
       properties: {
-        before,
+        isLeaf: false,
-        after,
+        value: {
+          before: { isLeaf: false, value: before },
+          after: { isLeaf: false, value: after },
+        },
       },
-    } satisfies ObjectRecordUpdateEvent<Entity>;
+    };
   }
 
   if (action === DatabaseEventAction.DELETED) {
     return {
-      recordId,
+      ...baseResult,
-      userId,
-      workspaceMemberId,
-      objectMetadata: objectMetadataEntity,
       properties: {
-        before,
+        isLeaf: false,
+        value: {
+          before: { isLeaf: false, value: before },
+        },
       },
-    } satisfies ObjectRecordDeleteEvent<Entity>;
+    };
   }
 
   if (action === DatabaseEventAction.DESTROYED) {
     return {
-      recordId,
+      ...baseResult,
-      userId,
-      workspaceMemberId,
-      objectMetadata: objectMetadataEntity,
       properties: {
-        before,
+        isLeaf: false,
+        value: {
+          before: { isLeaf: false, value: before },
+        },
       },
-    } satisfies ObjectRecordDestroyEvent<Entity>;
+    };
   }
 
   throw new Error(`Unknown action '${action}'`);

packages/twenty-server/src/modules/workflow/workflow-builder/utils/generate-fake-object-record.ts

@@ -1,16 +1,40 @@
 import { ObjectMetadataEntity } from 'src/engine/metadata-modules/object-metadata/object-metadata.entity';
 import { generateFakeValue } from 'src/engine/utils/generate-fake-value';
 import { shouldGenerateFieldFakeValue } from 'src/modules/workflow/workflow-builder/utils/should-generate-field-fake-value';
+import { OutputSchema } from 'src/modules/workflow/workflow-builder/types/output-schema.type';
+import { compositeTypeDefinitions } from 'src/engine/metadata-modules/field-metadata/composite-types';
 
-export const generateFakeObjectRecord = <Entity>(
+export const generateFakeObjectRecord = (
   objectMetadataEntity: ObjectMetadataEntity,
-): Entity =>
+): OutputSchema =>
-  objectMetadataEntity.fields.reduce((acc, field) => {
+  objectMetadataEntity.fields.reduce((acc: OutputSchema, field) => {
     if (!shouldGenerateFieldFakeValue(field)) {
       return acc;
     }
+    const compositeType = compositeTypeDefinitions.get(field.type);
 
-    acc[field.name] = generateFakeValue(field.type);
+    if (!compositeType) {
+      acc[field.name] = {
+        isLeaf: true,
+        type: field.type,
+        icon: field.icon,
+        value: generateFakeValue(field.type),
+      };
+    } else {
+      acc[field.name] = {
+        isLeaf: false,
+        icon: field.icon,
+        value: compositeType.properties.reduce((acc, property) => {
+          acc[property.name] = {
+            isLeaf: true,
+            type: property.type,
+            value: generateFakeValue(property.type),
+          };
+
+          return acc;
+        }, {}),
+      };
+    }
 
     return acc;
-  }, {} as Entity);
+  }, {});

packages/twenty-server/src/modules/workflow/workflow-builder/workflow-builder.workspace-service.ts

@@ -14,7 +14,6 @@ import { generateFakeValue } from 'src/engine/utils/generate-fake-value';
 import { CodeIntrospectionService } from 'src/modules/code-introspection/code-introspection.service';
 import { generateFakeObjectRecord } from 'src/modules/workflow/workflow-builder/utils/generate-fake-object-record';
 import { generateFakeObjectRecordEvent } from 'src/modules/workflow/workflow-builder/utils/generate-fake-object-record-event';
-import { WorkflowSendEmailStepOutputSchema } from 'src/modules/workflow/workflow-executor/workflow-actions/mail-sender/send-email.workflow-action';
 import { WorkflowRecordCRUDType } from 'src/modules/workflow/workflow-executor/workflow-actions/record-crud/types/workflow-record-crud-action-input.type';
 import {
   WorkflowAction,
@@ -25,6 +24,8 @@ import {
   WorkflowTriggerType,
 } from 'src/modules/workflow/workflow-trigger/types/workflow-trigger.type';
 import { isDefined } from 'src/utils/is-defined';
+import { OutputSchema } from 'src/modules/workflow/workflow-builder/types/output-schema.type';
+import { InputSchemaPropertyType } from 'src/modules/code-introspection/types/input-schema.type';
 
 @Injectable()
 export class WorkflowBuilderWorkspaceService {
@@ -41,7 +42,7 @@ export class WorkflowBuilderWorkspaceService {
   }: {
     step: WorkflowTrigger | WorkflowAction;
     workspaceId: string;
-  }): Promise<object> {
+  }): Promise<OutputSchema> {
     const stepType = step.type;
 
     switch (stepType) {
@@ -100,7 +101,7 @@ export class WorkflowBuilderWorkspaceService {
     eventName: string;
     workspaceId: string;
     objectMetadataRepository: Repository<ObjectMetadataEntity>;
-  }) {
+  }): Promise<OutputSchema> {
     const [nameSingular, action] = eventName.split('.');
 
     if (!checkStringIsDatabaseEventAction(action)) {
@@ -125,7 +126,7 @@ export class WorkflowBuilderWorkspaceService {
     );
   }
 
-  private async computeRecordCrudOutputSchema<Entity>({
+  private async computeRecordCrudOutputSchema({
     objectType,
     operationType,
     workspaceId,
@@ -135,8 +136,8 @@ export class WorkflowBuilderWorkspaceService {
     operationType: string;
     workspaceId: string;
     objectMetadataRepository: Repository<ObjectMetadataEntity>;
-  }) {
+  }): Promise<OutputSchema> {
-    const recordOutputSchema = await this.computeRecordOutputSchema<Entity>({
+    const recordOutputSchema = await this.computeRecordOutputSchema({
       objectType,
       workspaceId,
       objectMetadataRepository,
@@ -144,16 +145,21 @@ export class WorkflowBuilderWorkspaceService {
 
     if (operationType === WorkflowRecordCRUDType.READ) {
       return {
-        first: recordOutputSchema,
+        first: { isLeaf: false, icon: 'IconAlpha', value: recordOutputSchema },
-        last: recordOutputSchema,
+        last: { isLeaf: false, icon: 'IconOmega', value: recordOutputSchema },
-        totalCount: generateFakeValue('number'),
+        totalCount: {
+          isLeaf: true,
+          icon: 'IconSum',
+          type: 'number',
+          value: generateFakeValue('number'),
+        },
       };
     }
 
     return recordOutputSchema;
   }
 
-  private async computeRecordOutputSchema<Entity>({
+  private async computeRecordOutputSchema({
     objectType,
     workspaceId,
     objectMetadataRepository,
@@ -161,7 +167,7 @@ export class WorkflowBuilderWorkspaceService {
     objectType: string;
     workspaceId: string;
     objectMetadataRepository: Repository<ObjectMetadataEntity>;
-  }) {
+  }): Promise<OutputSchema> {
     const objectMetadata = await objectMetadataRepository.findOneOrFail({
       where: {
         nameSingular: objectType,
@@ -174,11 +180,11 @@ export class WorkflowBuilderWorkspaceService {
       return {};
     }
 
-    return generateFakeObjectRecord<Entity>(objectMetadata);
+    return generateFakeObjectRecord(objectMetadata);
   }
 
-  private computeSendEmailActionOutputSchema(): WorkflowSendEmailStepOutputSchema {
+  private computeSendEmailActionOutputSchema(): OutputSchema {
-    return { success: true };
+    return { success: { isLeaf: true, type: 'boolean', value: true } };
   }
 
   private async computeCodeActionOutputSchema({
@@ -193,7 +199,7 @@ export class WorkflowBuilderWorkspaceService {
     workspaceId: string;
     serverlessFunctionService: ServerlessFunctionService;
     codeIntrospectionService: CodeIntrospectionService;
-  }) {
+  }): Promise<OutputSchema> {
     if (serverlessFunctionId === '') {
       return {};
     }
@@ -223,6 +229,19 @@ export class WorkflowBuilderWorkspaceService {
         serverlessFunctionVersion,
       );
 
-    return resultFromFakeInput.data ?? {};
+    return resultFromFakeInput.data
+      ? Object.entries(resultFromFakeInput.data).reduce(
+          (acc: OutputSchema, [key, value]) => {
+            acc[key] = {
+              isLeaf: true,
+              value,
+              type: typeof value as InputSchemaPropertyType,
+            };
+
+            return acc;
+          },
+          {},
+        )
+      : {};
   }
 }

packages/twenty-server/src/modules/workflow/workflow-executor/workflow-actions/types/workflow-action-settings.type.ts

@@ -1,8 +1,7 @@
 import { WorkflowCodeActionSettings } from 'src/modules/workflow/workflow-executor/workflow-actions/code/types/workflow-code-action-settings.type';
 import { WorkflowSendEmailActionSettings } from 'src/modules/workflow/workflow-executor/workflow-actions/mail-sender/types/workflow-send-email-action-settings.type';
 import { WorkflowRecordCRUDActionSettings } from 'src/modules/workflow/workflow-executor/workflow-actions/record-crud/types/workflow-record-crud-action-settings.type';
-
+import { OutputSchema } from 'src/modules/workflow/workflow-builder/types/output-schema.type';
-export type OutputSchema = object;
 
 export type BaseWorkflowActionSettings = {
   input: object;

packages/twenty-server/src/modules/workflow/workflow-trigger/types/workflow-trigger.type.ts

@@ -1,4 +1,4 @@
-import { OutputSchema } from 'src/modules/workflow/workflow-executor/workflow-actions/types/workflow-action-settings.type';
+import { OutputSchema } from 'src/modules/workflow/workflow-builder/types/output-schema.type';
 
 export enum WorkflowTriggerType {
   DATABASE_EVENT = 'DATABASE_EVENT',