From e638a9aa78e4262670ea9ce4450a09221a9d1ec8 Mon Sep 17 00:00:00 2001
From: Nicolas Rouanne <nico.rouanne@gmail.com>
Date: Wed, 13 Nov 2024 15:07:15 +0100
Subject: [PATCH] fix(SingleEntitySelectMenuItems): correctly position "Add
 New" in case of an "*end" positioned `dropdownPlacement`

- display is inverted when the `Placement` is at the `end`, following the `MultiRecordSelect` component design
- add a story to display the `end` placement
- pass down the `dropdownPlacement` prop in `SingleEntitySelect`
---
 .../components/SingleEntitySelect.tsx         |  2 ++
 .../SingleEntitySelectMenuItemsWithSearch.tsx | 22 +++++++++++--------
 .../SingleEntitySelect.stories.tsx            |  4 ++++
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelect.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelect.tsx
index b98c3f36b0f1..19142e4bbf01 100644
--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelect.tsx
@@ -15,6 +15,7 @@ export type SingleEntitySelectProps = {
 
 export const SingleEntitySelect = ({
   disableBackgroundBlur = false,
+  dropdownPlacement,
   EmptyIcon,
   emptyLabel,
   excludedRelationRecordIds,
@@ -52,6 +53,7 @@ export const SingleEntitySelect = ({
     >
       <SingleEntitySelectMenuItemsWithSearch
         {...{
+          dropdownPlacement,
           EmptyIcon,
           emptyLabel,
           excludedRelationRecordIds,
diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch.tsx
index f221a6e187b0..6515de4ea2b3 100644
--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch.tsx
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/SingleEntitySelectMenuItemsWithSearch.tsx
@@ -53,13 +53,11 @@ export const SingleEntitySelectMenuItemsWithSearch = ({
     });
 
   const createNewButton = isDefined(onCreate) && (
-    <DropdownMenuItemsContainer>
-      <CreateNewButton
-        onClick={() => onCreate?.(relationPickerSearchFilter)}
-        LeftIcon={IconPlus}
-        text="Add New"
-      />
-    </DropdownMenuItemsContainer>
+    <CreateNewButton
+      onClick={() => onCreate?.(relationPickerSearchFilter)}
+      LeftIcon={IconPlus}
+      text="Add New"
+    />
   );
 
   const results = (
@@ -87,6 +85,10 @@ export const SingleEntitySelectMenuItemsWithSearch = ({
     <>
       {dropdownPlacement?.includes('end') && (
         <>
+          <DropdownMenuItemsContainer>
+            {createNewButton}
+          </DropdownMenuItemsContainer>
+          {entities.entitiesToSelect.length > 0 && <DropdownMenuSeparator />}
           {results}
           <DropdownMenuSeparator />
         </>
@@ -97,10 +99,12 @@ export const SingleEntitySelectMenuItemsWithSearch = ({
         <>
           <DropdownMenuSeparator />
           {results}
+          {entities.entitiesToSelect.length > 0 && <DropdownMenuSeparator />}
+          <DropdownMenuItemsContainer>
+            {createNewButton}
+          </DropdownMenuItemsContainer>
         </>
       )}
-      {entities.entitiesToSelect.length > 0 && <DropdownMenuSeparator />}
-      {createNewButton}
     </>
   );
 };
diff --git a/packages/twenty-front/src/modules/object-record/relation-picker/components/__stories__/SingleEntitySelect.stories.tsx b/packages/twenty-front/src/modules/object-record/relation-picker/components/__stories__/SingleEntitySelect.stories.tsx
index 683c83459720..ddba928b6ac7 100644
--- a/packages/twenty-front/src/modules/object-record/relation-picker/components/__stories__/SingleEntitySelect.stories.tsx
+++ b/packages/twenty-front/src/modules/object-record/relation-picker/components/__stories__/SingleEntitySelect.stories.tsx
@@ -80,3 +80,7 @@ export const WithSearchFilter: Story = {
     });
   },
 };
+
+export const WithEndPlacement: Story = {
+  args: { dropdownPlacement: 'bottom-end' },
+};