fix relation fields preview in settings (#11745)

Fixes :
- display relation fields in preview settings
- display note and task relation field in preview settings - 
- fix design (align and background color)

closes https://github.com/twentyhq/twenty/issues/7084

---------

Co-authored-by: guillim <guigloo@msn.com>

packages/twenty-front/src/modules/object-record/components/RecordChip.tsx

@@ -9,6 +9,7 @@ import {
   AvatarChip,
   AvatarChipVariant,
   ChipSize,
+  ChipVariant,
   LinkAvatarChip,
 } from 'twenty-ui/components';
 import { isModifiedEvent } from 'twenty-ui/utilities';
@@ -56,6 +57,7 @@ export const RecordChip = ({
         avatarType={recordChipData.avatarType}
         avatarUrl={recordChipData.avatarUrl ?? ''}
         className={className}
+        variant={ChipVariant.Static}
       />
     );
   }

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/ChipFieldDisplay.tsx

@@ -9,6 +9,7 @@ export const ChipFieldDisplay = () => {
     objectNameSingular,
     labelIdentifierLink,
     isLabelIdentifierCompact,
+    isReadOnly,
   } = useChipFieldDisplay();
 
   if (!isDefined(recordValue)) {
@@ -22,6 +23,7 @@ export const ChipFieldDisplay = () => {
       size={ChipSize.Small}
       to={labelIdentifierLink}
       isLabelHidden={isLabelIdentifierCompact}
+      forceDisableClick={isReadOnly}
     />
   );
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/RelationFromManyFieldDisplay.tsx

@@ -3,14 +3,19 @@ import { NoteTarget } from '@/activities/types/NoteTarget';
 import { TaskTarget } from '@/activities/types/TaskTarget';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { RecordChip } from '@/object-record/components/RecordChip';
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { useFieldFocus } from '@/object-record/record-field/hooks/useFieldFocus';
 import { useRelationFromManyFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useRelationFromManyFieldDisplay';
+
 import { ExpandableList } from '@/ui/layout/expandable-list/components/ExpandableList';
+import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
+import { pascalCase } from '~/utils/string/pascalCase';
 
 export const RelationFromManyFieldDisplay = () => {
   const { fieldValue, fieldDefinition } = useRelationFromManyFieldDisplay();
   const { isFocused } = useFieldFocus();
+  const { isReadOnly } = useContext(FieldContext);
 
   const { fieldName, objectMetadataNameSingular } = fieldDefinition.metadata;
 
@@ -45,19 +50,36 @@ export const RelationFromManyFieldDisplay = () => {
         : CoreObjectNameSingular.Task;
 
     const relationFieldName = fieldName === 'noteTargets' ? 'note' : 'task';
+    const formattedRecords = fieldValue.map((record) => {
+      if (!isDefined(record[relationFieldName])) {
+        return {
+          ...record,
+          [relationFieldName]: {
+            id: 'fallback-id',
+            title: pascalCase(relationFieldName),
+          },
+        };
+      }
 
+      return record;
+    });
     return (
       <ExpandableList isChipCountDisplayed={isFocused}>
-        {fieldValue
-          .map((record) =>
-            isDefined(record) && isDefined(record[relationFieldName]) ? (
+        {formattedRecords
+          .map((record) => {
+            if (!isDefined(record)) {
+              return undefined;
+            }
+
+            return (
               <RecordChip
                 key={record.id}
                 objectNameSingular={objectNameSingular}
                 record={record[relationFieldName]}
+                forceDisableClick={isReadOnly}
               />
-            ) : undefined,
-          )
+            );
+          })
           .filter(isDefined)}
       </ExpandableList>
     );
@@ -69,6 +91,7 @@ export const RelationFromManyFieldDisplay = () => {
             key={record.targetObject.id}
             objectNameSingular={record.targetObjectMetadataItem.nameSingular}
             record={record.targetObject}
+            forceDisableClick={isReadOnly}
           />
         ))}
       </ExpandableList>
@@ -81,6 +104,7 @@ export const RelationFromManyFieldDisplay = () => {
             key={record.id}
             objectNameSingular={objectNameSingular}
             record={record}
+            forceDisableClick={isReadOnly}
           />
         ))}
       </ExpandableList>

packages/twenty-front/src/modules/object-record/record-field/meta-types/display/components/RelationToOneFieldDisplay.tsx

@@ -1,12 +1,16 @@
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
 import { RecordChip } from '@/object-record/components/RecordChip';
+import { FieldContext } from '@/object-record/record-field/contexts/FieldContext';
 import { useRelationToOneFieldDisplay } from '@/object-record/record-field/meta-types/hooks/useRelationToOneFieldDisplay';
+import { useContext } from 'react';
 import { isDefined } from 'twenty-shared/utils';
 
 export const RelationToOneFieldDisplay = () => {
   const { fieldValue, fieldDefinition, generateRecordChipData } =
     useRelationToOneFieldDisplay();
 
+  const { isReadOnly } = useContext(FieldContext);
+
   if (
     !isDefined(fieldValue) ||
     !isDefined(fieldDefinition?.metadata.relationObjectMetadataNameSingular)
@@ -24,7 +28,7 @@ export const RelationToOneFieldDisplay = () => {
       key={recordChipData.recordId}
       objectNameSingular={recordChipData.objectNameSingular}
       record={fieldValue}
-      forceDisableClick={isWorkspaceMemberFieldMetadataRelation}
+      forceDisableClick={isWorkspaceMemberFieldMetadataRelation || isReadOnly}
     />
   );
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useChipFieldDisplay.ts

@@ -18,6 +18,7 @@ export const useChipFieldDisplay = () => {
     isLabelIdentifier,
     labelIdentifierLink,
     isLabelIdentifierCompact,
+    isReadOnly,
   } = useContext(FieldContext);
 
   const { chipGeneratorPerObjectPerField } = useContext(
@@ -48,5 +49,6 @@ export const useChipFieldDisplay = () => {
     isLabelIdentifier,
     labelIdentifierLink,
     isLabelIdentifierCompact,
+    isReadOnly,
   };
 };

packages/twenty-front/src/modules/object-record/record-field/meta-types/hooks/useRelationFromManyFieldDisplay.ts

@@ -8,10 +8,10 @@ import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { FIELD_EDIT_BUTTON_WIDTH } from '@/ui/field/display/constants/FieldEditButtonWidth';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 
+import { isDefined } from 'twenty-shared/utils';
 import { FieldContext } from '../../contexts/FieldContext';
 import { assertFieldMetadata } from '../../types/guards/assertFieldMetadata';
 import { isFieldRelation } from '../../types/guards/isFieldRelation';
-import { isDefined } from 'twenty-shared/utils';
 
 export const useRelationFromManyFieldDisplay = () => {
   const { recordId, fieldDefinition, maxWidth } = useContext(FieldContext);