fix: display current object name in morph relation picker after rename (#17209)

**Summary**

Issue #16963: When an object is renamed, the morph relation picker still
shows the old name.

**Root cause**

The picker used searchRecord.objectNameSingular from the GraphQL search
response, which can be stale after a rename.
The search record stores the object name at query time, not the current
metadata.

**Solution**

- Updated SingleRecordPickerMenuItem:
- Added useObjectMetadataItems to access current object metadata.
- Look up the current object metadata by morphItem.objectMetadataId.
- Use labelSingular (or nameSingular as fallback) instead of
searchRecord.objectNameSingular for display.
- Updated MultipleRecordPickerMenuItemContent:
- Use objectMetadataItem.labelSingular (already available as a prop)
instead of searchRecord.objectNameSingular.

---------

Co-authored-by: Marie Stoppa <marie.stoppa@essec.edu>

packages/twenty-front/src/modules/settings/components/SettingsMorphRelationMultiSelect.tsx

@@ -19,6 +19,7 @@ import { SelectableListItem } from '@/ui/layout/selectable-list/components/Selec
 import { useSelectableList } from '@/ui/layout/selectable-list/hooks/useSelectableList';
 import { selectedItemIdComponentState } from '@/ui/layout/selectable-list/states/selectedItemIdComponentState';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { isNonEmptyString } from '@sniptt/guards';
 import { isDefined } from 'twenty-shared/utils';
 import { IconBox, useIcons, type IconComponent } from 'twenty-ui/display';
 import { MenuItem, MenuItemMultiSelect } from 'twenty-ui/navigation';
@@ -49,6 +50,7 @@ export type SettingsMorphRelationMultiSelectProps = {
   callToActionButton?: CallToActionButton;
   dropdownOffset?: DropdownOffset;
   hasRightElement?: boolean;
+  error?: string;
 };
 
 const StyledContainer = styled.div<{ fullWidth?: boolean }>`
@@ -68,6 +70,13 @@ const StyledDescription = styled.span`
   font-size: ${({ theme }) => theme.font.size.sm};
 `;
 
+const StyledError = styled.span`
+  color: ${({ theme }) => theme.color.red};
+  display: block;
+  font-size: ${({ theme }) => theme.font.size.xs};
+  margin-top: ${({ theme }) => theme.spacing(1)};
+`;
+
 export const SettingsMorphRelationMultiSelect = ({
   className,
   disabled: disabledFromProps,
@@ -85,6 +94,7 @@ export const SettingsMorphRelationMultiSelect = ({
   callToActionButton,
   dropdownOffset,
   hasRightElement,
+  error,
 }: SettingsMorphRelationMultiSelectProps) => {
   const selectContainerRef = useRef<HTMLDivElement>(null);
 
@@ -92,6 +102,9 @@ export const SettingsMorphRelationMultiSelect = ({
 
   const { activeObjectMetadataItems } = useFilteredObjectMetadataItems();
 
+  const [localSelectedObjectMetadataIds, setLocalSelectedObjectMetadataIds] =
+    useState<string[]>(selectedObjectMetadataIds);
+
   const { getIcon } = useIcons();
   const options = activeObjectMetadataItems
     .filter(isObjectMetadataAvailableForRelation)
@@ -105,7 +118,7 @@ export const SettingsMorphRelationMultiSelect = ({
     }));
 
   const selectedOptions = options.filter((option) =>
-    selectedObjectMetadataIds.includes(option.objectMetadataId),
+    localSelectedObjectMetadataIds.includes(option.objectMetadataId),
   );
 
   const filteredOptions = useMemo(
@@ -147,9 +160,6 @@ export const SettingsMorphRelationMultiSelect = ({
   const addOrRemoveFromArray = (array: string[], item: string) => {
     let newArray = new Set(array);
     if (newArray.has(item)) {
-      if (newArray.size <= 1) {
-        return array;
-      }
       newArray.delete(item);
     } else {
       newArray.add(item);
@@ -231,9 +241,12 @@ export const SettingsMorphRelationMultiSelect = ({
                         onEnter={() => {
                           const newSelectedObjectMetadataIds =
                             addOrRemoveFromArray(
-                              selectedObjectMetadataIds,
+                              localSelectedObjectMetadataIds,
                               option.objectMetadataId,
                             );
+                          setLocalSelectedObjectMetadataIds(
+                            newSelectedObjectMetadataIds,
+                          );
                           onChange?.(newSelectedObjectMetadataIds);
                           onBlur?.();
                           closeDropdown(dropdownId);
@@ -252,10 +265,12 @@ export const SettingsMorphRelationMultiSelect = ({
                           onSelectChange={() => {
                             let newSelectedObjectMetadataIds =
                               addOrRemoveFromArray(
-                                selectedObjectMetadataIds,
+                                localSelectedObjectMetadataIds,
                                 option.objectMetadataId,
                               );
-
+                            setLocalSelectedObjectMetadataIds(
+                              newSelectedObjectMetadataIds,
+                            );
                             onChange?.(newSelectedObjectMetadataIds);
                             onBlur?.();
                           }}
@@ -281,7 +296,10 @@ export const SettingsMorphRelationMultiSelect = ({
           }
         />
       )}
-      {!!description && <StyledDescription>{description}</StyledDescription>}
+      {isNonEmptyString(description) && (
+        <StyledDescription>{description}</StyledDescription>
+      )}
+      {isNonEmptyString(error) && <StyledError>{error}</StyledError>}
     </StyledContainer>
   );
 };