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/search-variables/components/SearchVariablesDropdown.tsx

@@ -1,16 +1,16 @@
 import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
-import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
 import { StyledDropdownButtonContainer } from '@/ui/layout/dropdown/components/StyledDropdownButtonContainer';
 import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
-import { SearchVariablesDropdownStepItem } from '@/workflow/search-variables/components/SearchVariablesDropdownStepItem';
-import SearchVariablesDropdownStepSubItem from '@/workflow/search-variables/components/SearchVariablesDropdownStepSubItem';
+import { SearchVariablesDropdownFieldItems } from '@/workflow/search-variables/components/SearchVariablesDropdownFieldItems';
+import { SearchVariablesDropdownObjectItems } from '@/workflow/search-variables/components/SearchVariablesDropdownObjectItems';
+import { SearchVariablesDropdownWorkflowStepItems } from '@/workflow/search-variables/components/SearchVariablesDropdownWorkflowStepItems';
 import { SEARCH_VARIABLES_DROPDOWN_ID } from '@/workflow/search-variables/constants/SearchVariablesDropdownId';
 import { useAvailableVariablesInWorkflowStep } from '@/workflow/search-variables/hooks/useAvailableVariablesInWorkflowStep';
 import { StepOutputSchema } from '@/workflow/search-variables/types/StepOutputSchema';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { useState } from 'react';
-import { IconVariablePlus } from 'twenty-ui';
+import { IconVariablePlus, isDefined } from 'twenty-ui';
 
 const StyledDropdownVariableButtonContainer = styled(
   StyledDropdownButtonContainer,
@@ -26,21 +26,28 @@ const StyledDropdownVariableButtonContainer = styled(
   }
 `;
 
+const StyledDropdownComponetsContainer = styled.div`
+  background-color: ${({ theme }) => theme.background.transparent.light};
+`;
+
 const SearchVariablesDropdown = ({
   inputId,
   onVariableSelect,
   disabled,
+  objectNameSingularToSelect,
 }: {
   inputId: string;
   onVariableSelect: (variableName: string) => void;
   disabled?: boolean;
+  objectNameSingularToSelect?: string;
 }) => {
   const theme = useTheme();
 
   const dropdownId = `${SEARCH_VARIABLES_DROPDOWN_ID}-${inputId}`;
-  const { isDropdownOpen } = useDropdown(dropdownId);
-  const availableVariablesInWorkflowStep =
-    useAvailableVariablesInWorkflowStep();
+  const { isDropdownOpen, closeDropdown } = useDropdown(dropdownId);
+  const availableVariablesInWorkflowStep = useAvailableVariablesInWorkflowStep({
+    objectNameSingularToSelect,
+  });
 
   const initialStep =
     availableVariablesInWorkflowStep.length === 1
@@ -59,12 +66,44 @@ const SearchVariablesDropdown = ({
 
   const handleSubItemSelect = (subItem: string) => {
     onVariableSelect(subItem);
+    setSelectedStep(undefined);
+    closeDropdown();
   };
 
   const handleBack = () => {
     setSelectedStep(undefined);
   };
 
+  const renderSearchVariablesDropdownComponents = () => {
+    if (!isDefined(selectedStep)) {
+      return (
+        <SearchVariablesDropdownWorkflowStepItems
+          dropdownId={dropdownId}
+          steps={availableVariablesInWorkflowStep}
+          onSelect={handleStepSelect}
+        />
+      );
+    }
+
+    if (isDefined(objectNameSingularToSelect)) {
+      return (
+        <SearchVariablesDropdownObjectItems
+          step={selectedStep}
+          onSelect={handleSubItemSelect}
+          onBack={handleBack}
+        />
+      );
+    }
+
+    return (
+      <SearchVariablesDropdownFieldItems
+        step={selectedStep}
+        onSelect={handleSubItemSelect}
+        onBack={handleBack}
+      />
+    );
+  };
+
   if (disabled === true) {
     return (
       <StyledDropdownVariableButtonContainer
@@ -97,20 +136,9 @@ const SearchVariablesDropdown = ({
         </StyledDropdownVariableButtonContainer>
       }
       dropdownComponents={
-        <DropdownMenuItemsContainer hasMaxHeight>
-          {selectedStep ? (
-            <SearchVariablesDropdownStepSubItem
-              step={selectedStep}
-              onSelect={handleSubItemSelect}
-              onBack={handleBack}
-            />
-          ) : (
-            <SearchVariablesDropdownStepItem
-              steps={availableVariablesInWorkflowStep}
-              onSelect={handleStepSelect}
-            />
-          )}
-        </DropdownMenuItemsContainer>
+        <StyledDropdownComponetsContainer>
+          {renderSearchVariablesDropdownComponents()}
+        </StyledDropdownComponetsContainer>
       }
       dropdownPlacement="bottom-end"
       dropdownOffset={{ x: 0, y: 4 }}