toggle Field on label between singular and plural based on relation type (#8817)

#7683 

![labelPlural](https://github.com/user-attachments/assets/3e620d7e-dd51-4e4e-a9ba-289f2685ddf3)

![labelSingular](https://github.com/user-attachments/assets/84739ac5-29b4-48c8-8a71-3f8f2816641b)
Hello,
I’ve implemented the logic for dynamically toggling the Field on label
between singular and plural based on the relation type selected by the
user. Here's an overview of the changes:

Added a variable selectedRelationType to store the user’s selected
relation type.
Based on this variable, I determine whether to use labelPlural or
labelSingular from the selectedObjectMetadataItem.
Please review my changes and let me know if there's anything that needs
improvement .

---------

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

packages/twenty-front/src/generated/graphql.tsx

@@ -1,5 +1,5 @@
-import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
+import { gql } from '@apollo/client';
 export type Maybe<T> = T | null;
 export type InputMaybe<T> = Maybe<T>;
 export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };

packages/twenty-front/src/modules/settings/data-model/constants/SettingsCompositeFieldTypeConfigs.ts

@@ -110,7 +110,7 @@ export const SETTINGS_COMPOSITE_FIELD_TYPE_CONFIGS = {
     label: 'Full Name',
     Icon: IllustrationIconUser,
     exampleValue: { firstName: 'John', lastName: 'Doe' },
-    category: 'Advanced',
+    category: 'Basic',
     subFields: ['firstName', 'lastName'],
     filterableSubFields: ['firstName', 'lastName'],
     labelBySubField: {

packages/twenty-front/src/modules/settings/data-model/constants/SettingsFieldTypeConfigs.ts

@@ -2,6 +2,6 @@ import { SETTINGS_COMPOSITE_FIELD_TYPE_CONFIGS } from '@/settings/data-model/con
 import { SETTINGS_NON_COMPOSITE_FIELD_TYPE_CONFIGS } from '@/settings/data-model/constants/SettingsNonCompositeFieldTypeConfigs';
 
 export const SETTINGS_FIELD_TYPE_CONFIGS = {
-  ...SETTINGS_COMPOSITE_FIELD_TYPE_CONFIGS,
   ...SETTINGS_NON_COMPOSITE_FIELD_TYPE_CONFIGS,
+  ...SETTINGS_COMPOSITE_FIELD_TYPE_CONFIGS,
 };

packages/twenty-front/src/modules/settings/data-model/constants/SettingsNonCompositeFieldTypeConfigs.ts

@@ -120,7 +120,7 @@ export const SETTINGS_NON_COMPOSITE_FIELD_TYPE_CONFIGS: SettingsNonCompositeFiel
       label: 'JSON',
       Icon: IllustrationIconJson,
       exampleValue: { key: 'value' },
-      category: 'Basic',
+      category: 'Advanced',
     } as const satisfies SettingsFieldTypeConfig<FieldJsonValue>,
     [FieldMetadataType.RichText]: {
       label: 'Rich Text',
@@ -131,7 +131,7 @@ export const SETTINGS_NON_COMPOSITE_FIELD_TYPE_CONFIGS: SettingsNonCompositeFiel
     [FieldMetadataType.Array]: {
       label: 'Array',
       Icon: IllustrationIconArray,
-      category: 'Basic',
+      category: 'Advanced',
       exampleValue: ['value1', 'value2'],
     } as const satisfies SettingsFieldTypeConfig<FieldArrayValue>,
   };

packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationForm.tsx

@@ -107,6 +107,11 @@ export const SettingsDataModelFieldRelationForm = ({
     ),
   );
 
+  const selectedRelationType = watchFormValue(
+    'relation.type',
+    initialRelationType,
+  );
+
   const isMobile = useIsMobile();
 
   return (
@@ -152,7 +157,10 @@ export const SettingsDataModelFieldRelationForm = ({
         />
       </StyledSelectsContainer>
       <StyledInputsLabel>
-        Field on {selectedObjectMetadataItem?.labelPlural}
+        Field on{' '}
+        {selectedRelationType === RelationDefinitionType.ManyToOne
+          ? selectedObjectMetadataItem?.labelSingular
+          : selectedObjectMetadataItem?.labelPlural}
       </StyledInputsLabel>
       <StyledInputsContainer>
         <Controller

packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/components/SettingsDataModelFieldRelationSettingsFormCard.tsx

@@ -15,7 +15,10 @@ import {
   SettingsDataModelFieldPreviewCardProps,
 } from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
-import { FieldMetadataType } from '~/generated-metadata/graphql';
+import {
+  FieldMetadataType,
+  RelationDefinitionType,
+} from '~/generated-metadata/graphql';
 type SettingsDataModelFieldRelationSettingsFormCardProps = {
   fieldMetadataItem: Pick<FieldMetadataItem, 'icon' | 'label' | 'type'> &
     Partial<Omit<FieldMetadataItem, 'icon' | 'label' | 'type'>>;
@@ -86,6 +89,10 @@ export const SettingsDataModelFieldRelationSettingsFormCard = ({
             shrink
             objectMetadataItem={objectMetadataItem}
             relationObjectMetadataItem={relationObjectMetadataItem}
+            pluralizeLabel={
+              watchFormValue('relation.type') ===
+              RelationDefinitionType.ManyToOne
+            }
           />
           <StyledRelationImage
             src={relationTypeConfig.imageSrc}
@@ -110,6 +117,10 @@ export const SettingsDataModelFieldRelationSettingsFormCard = ({
             shrink
             objectMetadataItem={relationObjectMetadataItem}
             relationObjectMetadataItem={objectMetadataItem}
+            pluralizeLabel={
+              watchFormValue('relation.type') !==
+              RelationDefinitionType.ManyToOne
+            }
           />
         </StyledPreviewContent>
       }

packages/twenty-front/src/modules/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard.tsx

@@ -10,6 +10,7 @@ import { Card, CardContent } from 'twenty-ui';
 export type SettingsDataModelFieldPreviewCardProps =
   SettingsDataModelFieldPreviewProps & {
     className?: string;
+    pluralizeLabel?: boolean;
   };
 
 const StyledCard = styled(Card)`
@@ -28,17 +29,23 @@ export const SettingsDataModelFieldPreviewCard = ({
   relationObjectMetadataItem,
   shrink,
   withFieldLabel = true,
-}: SettingsDataModelFieldPreviewCardProps) => (
+  pluralizeLabel = false,
-  <StyledCard className={className} fullWidth>
+}: SettingsDataModelFieldPreviewCardProps) => {
-    <StyledCardContent>
+  return (
-      <SettingsDataModelObjectSummary objectMetadataItem={objectMetadataItem} />
+    <StyledCard className={className} fullWidth>
-      <SettingsDataModelFieldPreview
+      <StyledCardContent>
-        objectMetadataItem={objectMetadataItem}
+        <SettingsDataModelObjectSummary
-        fieldMetadataItem={fieldMetadataItem}
+          objectMetadataItem={objectMetadataItem}
-        relationObjectMetadataItem={relationObjectMetadataItem}
+          pluralizeLabel={pluralizeLabel}
-        shrink={shrink}
+        />
-        withFieldLabel={withFieldLabel}
+        <SettingsDataModelFieldPreview
-      />
+          objectMetadataItem={objectMetadataItem}
-    </StyledCardContent>
+          fieldMetadataItem={fieldMetadataItem}
-  </StyledCard>
+          relationObjectMetadataItem={relationObjectMetadataItem}
-);
+          shrink={shrink}
+          withFieldLabel={withFieldLabel}
+        />
+      </StyledCardContent>
+    </StyledCard>
+  );
+};

packages/twenty-front/src/modules/settings/data-model/objects/components/SettingsDataModelObjectSummary.tsx

@@ -9,6 +9,7 @@ import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLab
 export type SettingsDataModelObjectSummaryProps = {
   className?: string;
   objectMetadataItem: ObjectMetadataItem;
+  pluralizeLabel?: boolean;
 };
 
 const StyledObjectSummary = styled.div`
@@ -30,6 +31,7 @@ const StyledIconContainer = styled.div`
 export const SettingsDataModelObjectSummary = ({
   className,
   objectMetadataItem,
+  pluralizeLabel = true,
 }: SettingsDataModelObjectSummaryProps) => {
   const theme = useTheme();
 
@@ -43,7 +45,13 @@ export const SettingsDataModelObjectSummary = ({
         <StyledIconContainer>
           <ObjectIcon size={theme.icon.size.sm} stroke={theme.icon.stroke.md} />
         </StyledIconContainer>
-        <OverflowingTextWithTooltip text={objectMetadataItem.labelPlural} />
+        <OverflowingTextWithTooltip
+          text={
+            pluralizeLabel
+              ? objectMetadataItem.labelPlural
+              : objectMetadataItem.labelSingular
+          }
+        />
       </StyledObjectName>
       <SettingsDataModelObjectTypeTag objectTypeLabel={objectTypeLabel} />
     </StyledObjectSummary>