Fix breadcrumbs to display friendly object names instead of API names… (#13573)

Fixes #13250

This PR fixes the breadcrumb display issue where API names were shown
instead of friendly object names when navigating to related objects in
the detail view.

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/command-menu/hooks/useCommandMenuSearchRecords.tsx

@@ -5,15 +5,14 @@ import { ActionType } from '@/action-menu/actions/types/ActionType';
 import { MAX_SEARCH_RESULTS } from '@/command-menu/constants/MaxSearchResults';
 import { useOpenRecordInCommandMenu } from '@/command-menu/hooks/useOpenRecordInCommandMenu';
 import { commandMenuSearchState } from '@/command-menu/states/commandMenuSearchState';
+import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
 import { useObjectMetadataItems } from '@/object-metadata/hooks/useObjectMetadataItems';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { useApolloCoreClient } from '@/object-metadata/hooks/useApolloCoreClient';
 import { useObjectPermissions } from '@/object-record/hooks/useObjectPermissions';
 import { AppPath } from '@/types/AppPath';
 import { t } from '@lingui/core/macro';
 import { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
-import { capitalize } from 'twenty-shared/utils';
 import { Avatar } from 'twenty-ui/display';
 import { useDebounce } from 'use-debounce';
 import { useSearchQuery } from '~/generated/graphql';
@@ -73,7 +72,10 @@ export const useCommandMenuSearchRecords = () => {
             />
           ),
           shouldBeRegistered: () => true,
-          description: capitalize(searchRecord.objectNameSingular),
+          description:
+            objectMetadataItems.find(
+              (item) => item.nameSingular === searchRecord.objectNameSingular,
+            )?.labelSingular ?? searchRecord.objectNameSingular,
         };
 
         if (
@@ -116,7 +118,7 @@ export const useCommandMenuSearchRecords = () => {
         };
       },
     );
-  }, [searchData, openRecordInCommandMenu]);
+  }, [searchData, openRecordInCommandMenu, objectMetadataItems]);
 
   return {
     loading,

packages/twenty-front/src/modules/command-menu/hooks/useOpenRecordInCommandMenu.ts

@@ -21,7 +21,7 @@ import { useRunWorkflowRunOpeningInCommandMenuSideEffects } from '@/workflow/hoo
 import { useTheme } from '@emotion/react';
 import { t } from '@lingui/core/macro';
 import { useRecoilCallback } from 'recoil';
-import { capitalize, isDefined } from 'twenty-shared/utils';
+import { isDefined } from 'twenty-shared/utils';
 import { useIcons } from 'twenty-ui/display';
 import { v4 } from 'uuid';
 
@@ -164,13 +164,13 @@ export const useOpenRecordInCommandMenu = () => {
           theme,
         });
 
-        const capitalizedObjectNameSingular = capitalize(objectNameSingular);
+        const objectLabelSingular = objectMetadataItem.labelSingular;
 
         navigateCommandMenu({
           page: CommandMenuPages.ViewRecord,
           pageTitle: isNewRecord
-            ? t`New ${capitalizedObjectNameSingular}`
-            : capitalizedObjectNameSingular,
+            ? t`New ${objectLabelSingular}`
+            : objectLabelSingular,
           pageIcon: Icon,
           pageIconColor: IconColor,
           pageId: pageComponentInstanceId,

packages/twenty-front/src/modules/command-menu/utils/getRecordContextText.ts

@@ -1,7 +1,6 @@
 import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
 import { getObjectRecordIdentifier } from '@/object-metadata/utils/getObjectRecordIdentifier';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { capitalize } from 'twenty-shared/utils';
 
 export const getSelectedRecordsContextText = (
   objectMetadataItem: ObjectMetadataItem,
@@ -10,5 +9,5 @@ export const getSelectedRecordsContextText = (
 ) => {
   return totalCount === 1
     ? getObjectRecordIdentifier({ objectMetadataItem, record: records[0] }).name
-    : `${totalCount} ${capitalize(objectMetadataItem.namePlural)}`;
+    : `${totalCount} ${objectMetadataItem.labelPlural}`;
 };