Select full record in variable dropdown (#8851)

Output schema is now separated in two sections:
- object, that gather all informations on the selectable object
- fields, that display object fields in a record context, or simply the
available fields from the previous steps

The dropdown variable has now a new mode:
- if objectNameSingularToSelect is defined, it goes into an object mode.
Only objects of the right type will be shown
- if not set, it will use the already existing mode, to select a field

When an object is selected, it actually set the id of the object



https://github.com/user-attachments/assets/1c95f8fd-10f0-4c1c-aeb7-c7d847e89536

packages/twenty-front/src/modules/workflow/components/WorkflowSingleRecordFieldChip.tsx

@@ -1,3 +1,4 @@
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { RecordChip } from '@/object-record/components/RecordChip';
 import { VariableChip } from '@/object-record/record-field/form-types/components/VariableChip';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
@@ -39,13 +40,18 @@ export const WorkflowSingleRecordFieldChip = ({
   objectNameSingular,
   onRemove,
 }: WorkflowSingleRecordFieldChipProps) => {
+  const { objectMetadataItem } = useObjectMetadataItem({ objectNameSingular });
+
   if (
     !!draftValue &&
     draftValue.type === 'variable' &&
     isStandaloneVariableString(draftValue.value)
   ) {
     return (
-      <VariableChip rawVariableName={draftValue.value} onRemove={onRemove} />
+      <VariableChip
+        rawVariableName={objectMetadataItem.labelSingular}
+        onRemove={onRemove}
+      />
     );
   }
 

packages/twenty-front/src/modules/workflow/components/WorkflowSingleRecordPicker.tsx

@@ -12,7 +12,6 @@ import { SingleRecordSelect } from '@/object-record/relation-picker/components/S
 import { useRecordPicker } from '@/object-record/relation-picker/hooks/useRecordPicker';
 import { RecordPickerComponentInstanceContext } from '@/object-record/relation-picker/states/contexts/RecordPickerComponentInstanceContext';
 import { RecordForSelect } from '@/object-record/relation-picker/types/RecordForSelect';
-import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { InputLabel } from '@/ui/input/components/InputLabel';
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
@@ -22,7 +21,7 @@ import SearchVariablesDropdown from '@/workflow/search-variables/components/Sear
 import { isStandaloneVariableString } from '@/workflow/utils/isStandaloneVariableString';
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
-import { useCallback, useState } from 'react';
+import { useCallback } from 'react';
 import { isValidUuid } from '~/utils/isValidUuid';
 
 const StyledFormSelectContainer = styled.div`
@@ -62,6 +61,16 @@ const StyledSearchVariablesDropdownContainer = styled.div`
 export type RecordId = string;
 export type Variable = string;
 
+type WorkflowSingleRecordPickerValue =
+  | {
+      type: 'static';
+      value: RecordId;
+    }
+  | {
+      type: 'variable';
+      value: Variable;
+    };
+
 export type WorkflowSingleRecordPickerProps = {
   label?: string;
   defaultValue: RecordId | Variable;
@@ -75,16 +84,7 @@ export const WorkflowSingleRecordPicker = ({
   objectNameSingular,
   onChange,
 }: WorkflowSingleRecordPickerProps) => {
-  const [draftValue, setDraftValue] = useState<
-    | {
-        type: 'static';
-        value: RecordId;
-      }
-    | {
-        type: 'variable';
-        value: Variable;
-      }
-  >(
+  const draftValue: WorkflowSingleRecordPickerValue =
     isStandaloneVariableString(defaultValue)
       ? {
           type: 'variable',
@@ -93,10 +93,9 @@ export const WorkflowSingleRecordPicker = ({
       : {
           type: 'static',
           value: defaultValue || '',
-        },
-  );
+        };
 
-  const { record } = useFindOneRecord({
+  const { record: selectedRecord } = useFindOneRecord({
     objectRecordId:
       isDefined(defaultValue) && !isStandaloneVariableString(defaultValue)
         ? defaultValue
@@ -106,10 +105,6 @@ export const WorkflowSingleRecordPicker = ({
     skip: !isValidUuid(defaultValue),
   });
 
-  const [selectedRecord, setSelectedRecord] = useState<
-    ObjectRecord | undefined
-  >(record);
-
   const dropdownId = `workflow-record-picker-${objectNameSingular}`;
   const variablesDropdownId = `workflow-record-picker-${objectNameSingular}-variables`;
 
@@ -126,32 +121,16 @@ export const WorkflowSingleRecordPicker = ({
   const handleRecordSelected = (
     selectedEntity: RecordForSelect | null | undefined,
   ) => {
-    setDraftValue({
-      type: 'static',
-      value: selectedEntity?.record?.id ?? '',
-    });
-    setSelectedRecord(selectedEntity?.record);
-    closeDropdown();
-
     onChange?.(selectedEntity?.record?.id ?? '');
+    closeDropdown();
   };
 
   const handleVariableTagInsert = (variable: string) => {
-    setDraftValue({
-      type: 'variable',
-      value: variable,
-    });
-    setSelectedRecord(undefined);
-    closeDropdown();
-
     onChange?.(variable);
+    closeDropdown();
   };
 
   const handleUnlinkVariable = () => {
-    setDraftValue({
-      type: 'static',
-      value: '',
-    });
     closeDropdown();
 
     onChange('');
@@ -211,6 +190,7 @@ export const WorkflowSingleRecordPicker = ({
             inputId={variablesDropdownId}
             onVariableSelect={handleVariableTagInsert}
             disabled={false}
+            objectNameSingularToSelect={objectNameSingular}
           />
         </StyledSearchVariablesDropdownContainer>
       </StyledFormFieldInputRowContainer>