Add composites subfield selection in the graph editor (#14931)

Closes https://github.com/twentyhq/core-team-issues/issues/1638
Closes https://github.com/twentyhq/core-team-issues/issues/1623



https://github.com/user-attachments/assets/2dddadaa-781b-497d-b454-0066d599bda3

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-front/src/modules/command-menu/components/CommandMenuDefaultSelectionEffect.tsx

@@ -1,3 +1,4 @@
+import { COMMAND_MENU_LIST_SELECTABLE_LIST_ID } from '@/command-menu/constants/CommandMenuListSelectableListId';
 import { hasUserSelectedCommandState } from '@/command-menu/states/hasUserSelectedCommandState';
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
@@ -11,11 +12,13 @@ export const CommandMenuDefaultSelectionEffect = ({
 }: {
   selectableItemIds: string[];
 }) => {
-  const { setSelectedItemId } = useSelectableList('command-menu-list');
+  const { setSelectedItemId } = useSelectableList(
+    COMMAND_MENU_LIST_SELECTABLE_LIST_ID,
+  );
 
   const selectedItemId = useRecoilComponentValue(
     selectedItemIdComponentState,
-    'command-menu-list',
+    COMMAND_MENU_LIST_SELECTABLE_LIST_ID,
   );
 
   const hasUserSelectedCommand = useRecoilValue(hasUserSelectedCommandState);

packages/twenty-front/src/modules/command-menu/components/CommandMenuItemDropdown.tsx

@@ -2,11 +2,13 @@ import {
   CommandMenuItem,
   type CommandMenuItemProps,
 } from '@/command-menu/components/CommandMenuItem';
+import { COMMAND_MENU_LIST_SELECTABLE_LIST_ID } from '@/command-menu/constants/CommandMenuListSelectableListId';
 import {
   Dropdown,
   type DropdownProps,
 } from '@/ui/layout/dropdown/components/Dropdown';
 import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
+import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
 
 export type CommandMenuItemDropdownProps = CommandMenuItemProps &
@@ -34,6 +36,10 @@ export const CommandMenuItemDropdown = ({
     dropdownId,
   );
 
+  const { setSelectedItemId } = useSelectableList(
+    COMMAND_MENU_LIST_SELECTABLE_LIST_ID,
+  );
+
   return (
     <Dropdown
       clickableComponent={
@@ -55,6 +61,9 @@ export const CommandMenuItemDropdown = ({
       dropdownPlacement={dropdownPlacement}
       dropdownOffset={dropdownOffset}
       disableClickForClickableComponent={disabled}
+      onOpen={() => {
+        setSelectedItemId(id);
+      }}
     />
   );
 };

packages/twenty-front/src/modules/command-menu/components/CommandMenuList.tsx

@@ -2,6 +2,7 @@ import { ActionComponent } from '@/action-menu/actions/display/components/Action
 import { CommandGroup } from '@/command-menu/components/CommandGroup';
 import { type ActionGroupConfig } from '@/command-menu/components/CommandMenu';
 import { CommandMenuDefaultSelectionEffect } from '@/command-menu/components/CommandMenuDefaultSelectionEffect';
+import { COMMAND_MENU_LIST_SELECTABLE_LIST_ID } from '@/command-menu/constants/CommandMenuListSelectableListId';
 import { COMMAND_MENU_SEARCH_BAR_HEIGHT } from '@/command-menu/constants/CommandMenuSearchBarHeight';
 import { COMMAND_MENU_SEARCH_BAR_PADDING } from '@/command-menu/constants/CommandMenuSearchBarPadding';
 import { SIDE_PANEL_FOCUS_ID } from '@/command-menu/constants/SidePanelFocusId';
@@ -74,7 +75,7 @@ export const CommandMenuList = ({
       <ScrollWrapper componentInstanceId={`scroll-wrapper-command-menu`}>
         <StyledInnerList>
           <SelectableList
-            selectableListInstanceId="command-menu-list"
+            selectableListInstanceId={COMMAND_MENU_LIST_SELECTABLE_LIST_ID}
             focusId={SIDE_PANEL_FOCUS_ID}
             selectableItemIdArray={selectableItemIds}
             onSelect={() => {