Prefill Relation Fields with Initiating Object Icon and Name

Author: sid0-0

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

@@ -10,11 +10,13 @@ import { fieldMetadataItemSchema } from '@/object-metadata/validation-schemas/fi
 import { FIELD_NAME_MAXIMUM_LENGTH } from '@/settings/data-model/constants/FieldNameMaximumLength';
 import { RELATION_TYPES } from '@/settings/data-model/constants/RelationTypes';
 import { useRelationSettingsFormInitialValues } from '@/settings/data-model/fields/forms/relation/hooks/useRelationSettingsFormInitialValues';
+import { SettingsDataModelFieldPreviewCardProps } from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard';
 import { RelationType } from '@/settings/data-model/types/RelationType';
 import { IconPicker } from '@/ui/input/components/IconPicker';
 import { Select } from '@/ui/input/components/Select';
 import { TextInput } from '@/ui/input/components/TextInput';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
+import { useEffect, useState } from 'react';
 import { RelationDefinitionType } from '~/generated-metadata/graphql';
 
 export const settingsDataModelFieldRelationFormSchema = z.object({
@@ -39,6 +41,7 @@ export type SettingsDataModelFieldRelationFormValues = z.infer<
 
 type SettingsDataModelFieldRelationFormProps = {
   fieldMetadataItem: Pick<FieldMetadataItem, 'type'>;
+  objectMetadataItem: SettingsDataModelFieldPreviewCardProps['objectMetadataItem'];
 };
 
 const StyledContainer = styled.div`
@@ -79,26 +82,49 @@ const RELATION_TYPE_OPTIONS = Object.entries(RELATION_TYPES)
 
 export const SettingsDataModelFieldRelationForm = ({
   fieldMetadataItem,
+  objectMetadataItem,
 }: SettingsDataModelFieldRelationFormProps) => {
-  const { control, watch: watchFormValue } =
-    useFormContext<SettingsDataModelFieldRelationFormValues>();
+  const {
+    control,
+    watch: watchFormValue,
+    setValue,
+  } = useFormContext<SettingsDataModelFieldRelationFormValues>();
   const { getIcon } = useIcons();
   const { objectMetadataItems, findObjectMetadataItemById } =
     useFilteredObjectMetadataItems();
 
+  const [labelEditedManually, setLabelEditedManually] = useState(false);
+
   const {
     disableFieldEdition,
     disableRelationEdition,
     initialRelationFieldMetadataItem,
     initialRelationObjectMetadataItem,
     initialRelationType,
-  } = useRelationSettingsFormInitialValues({ fieldMetadataItem });
+  } = useRelationSettingsFormInitialValues({
+    fieldMetadataItem,
+    objectMetadataItem,
+  });
 
   const selectedObjectMetadataItem = findObjectMetadataItemById(
     watchFormValue('relation.objectMetadataId'),
   );
 
   const isMobile = useIsMobile();
+  const relationType = watchFormValue('relation.type');
+
+  useEffect(() => {
+    if (labelEditedManually) return;
+    setValue(
+      'relation.field.label',
+      [
+        RelationDefinitionType.ManyToMany,
+        RelationDefinitionType.ManyToOne,
+      ].includes(relationType)
+        ? objectMetadataItem.labelPlural
+        : objectMetadataItem.labelSingular,
+    );
+  }, [labelEditedManually, objectMetadataItem, relationType, setValue]);
 
   return (
     <StyledContainer>
@@ -169,7 +195,10 @@ export const SettingsDataModelFieldRelationForm = ({
               disabled={disableFieldEdition}
               placeholder="Field name"
               value={value}
-              onChange={onChange}
+              onChange={(newValue) => {
+                setLabelEditedManually(true);
+                onChange(newValue);
+              }}
               fullWidth
               maxLength={FIELD_NAME_MAXIMUM_LENGTH}
             />

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

@@ -114,6 +114,7 @@ export const SettingsDataModelFieldRelationSettingsFormCard = ({
       form={
         <SettingsDataModelFieldRelationForm
           fieldMetadataItem={fieldMetadataItem}
+          objectMetadataItem={objectMetadataItem}
         />
       }
     />

packages/twenty-front/src/modules/settings/data-model/fields/forms/relation/hooks/useRelationSettingsFormInitialValues.ts

@@ -2,15 +2,17 @@ import { useMemo } from 'react';
 
 import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
 import { useGetRelationMetadata } from '@/object-metadata/hooks/useGetRelationMetadata';
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { isObjectMetadataAvailableForRelation } from '@/object-metadata/utils/isObjectMetadataAvailableForRelation';
+import { SettingsDataModelFieldPreviewCardProps } from '@/settings/data-model/fields/preview/components/SettingsDataModelFieldPreviewCard';
 import { RelationDefinitionType } from '~/generated-metadata/graphql';
 
 export const useRelationSettingsFormInitialValues = ({
   fieldMetadataItem,
+  objectMetadataItem,
 }: {
   fieldMetadataItem?: Pick<FieldMetadataItem, 'type' | 'relationDefinition'>;
+  objectMetadataItem?: SettingsDataModelFieldPreviewCardProps['objectMetadataItem'];
 }) => {
   const { objectMetadataItems } = useFilteredObjectMetadataItems();
 
@@ -28,11 +30,13 @@ export const useRelationSettingsFormInitialValues = ({
   const initialRelationObjectMetadataItem = useMemo(
     () =>
       relationObjectMetadataItemFromFieldMetadata ??
-      objectMetadataItems.find(
-        ({ nameSingular }) => nameSingular === CoreObjectNameSingular.Person,
-      ) ??
+      objectMetadataItem ??
       objectMetadataItems.filter(isObjectMetadataAvailableForRelation)[0],
-    [objectMetadataItems, relationObjectMetadataItemFromFieldMetadata],
+    [
+      objectMetadataItem,
+      objectMetadataItems,
+      relationObjectMetadataItemFromFieldMetadata,
+    ],
   );
 
   const initialRelationType =
@@ -44,7 +48,12 @@ export const useRelationSettingsFormInitialValues = ({
     disableRelationEdition: !!relationFieldMetadataItem,
     initialRelationFieldMetadataItem: relationFieldMetadataItem ?? {
       icon: initialRelationObjectMetadataItem.icon ?? 'IconUsers',
-      label: '',
+      label: [
+        RelationDefinitionType.ManyToMany,
+        RelationDefinitionType.ManyToOne,
+      ].includes(initialRelationType)
+        ? initialRelationObjectMetadataItem.labelPlural
+        : initialRelationObjectMetadataItem.labelSingular,
     },
     initialRelationObjectMetadataItem,
     initialRelationType,