refactor: apply relation optimistic effects on record update (#3556)

* refactor: apply relation optimistic effects on record update

Related to #3509

* refactor: remove need to pass relation id field to create and update mutations

* fix: fix tests

* fix: fix SingleEntitySelect glitch

* fix: fix usePersistField tests

* fix: fix wrong import after rebase

* fix: fix several tests

* fix: fix test types

packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsProvider.tsx

@@ -2,31 +2,22 @@ import { useRecoilValue } from 'recoil';
 
 import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
 import { ObjectMetadataItemsLoadEffect } from '@/object-metadata/components/ObjectMetadataItemsLoadEffect';
-import { ObjectMetadataItemsRelationPickerEffect } from '@/object-metadata/components/ObjectMetadataItemsRelationPickerEffect';
-import { useFindManyObjectMetadataItems } from '@/object-metadata/hooks/useFindManyObjectMetadataItems';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { RelationPickerScope } from '@/object-record/relation-picker/scopes/RelationPickerScope';
 
 export const ObjectMetadataItemsProvider = ({
   children,
 }: React.PropsWithChildren) => {
-  useFindManyObjectMetadataItems();
-
   const objectMetadataItems = useRecoilValue(objectMetadataItemsState);
   const currentWorkspace = useRecoilValue(currentWorkspaceState);
 
   return (
     <>
       <ObjectMetadataItemsLoadEffect />
-      {objectMetadataItems.length < 1 && currentWorkspace ? (
-        <></>
-      ) : (
-        <>
-          <ObjectMetadataItemsRelationPickerEffect />
-          <RelationPickerScope relationPickerScopeId="relation-picker">
-            {children}
-          </RelationPickerScope>
-        </>
+      {(!currentWorkspace || !!objectMetadataItems.length) && (
+        <RelationPickerScope relationPickerScopeId="relation-picker">
+          {children}
+        </RelationPickerScope>
       )}
     </>
   );

packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataItemsRelationPickerEffect.tsx

@@ -2,10 +2,12 @@ import { useEffect } from 'react';
 
 import { useRelationPicker } from '@/object-record/relation-picker/hooks/useRelationPicker';
 
-export const ObjectMetadataItemsRelationPickerEffect = () => {
-  const { setSearchQuery } = useRelationPicker({
-    relationPickerScopeId: 'relation-picker',
-  });
+export const ObjectMetadataItemsRelationPickerEffect = ({
+  relationPickerScopeId,
+}: {
+  relationPickerScopeId?: string;
+} = {}) => {
+  const { setSearchQuery } = useRelationPicker({ relationPickerScopeId });
 
   const computeFilterFields = (relationPickerType: string) => {
     if (relationPickerType === 'company') {

packages/twenty-front/src/modules/object-metadata/types/FieldMetadataItem.ts

@@ -3,8 +3,13 @@ import { Field, Relation } from '~/generated-metadata/graphql';
 
 export type FieldMetadataItem = Omit<
   Field,
-  'fromRelationMetadata' | 'toRelationMetadata' | 'defaultValue' | 'options'
+  | '__typename'
+  | 'fromRelationMetadata'
+  | 'toRelationMetadata'
+  | 'defaultValue'
+  | 'options'
 > & {
+  __typename?: string;
   fromRelationMetadata?:
     | (Pick<Relation, 'id' | 'toFieldMetadataId' | 'relationType'> & {
         toObjectMetadata: Pick<

packages/twenty-front/src/modules/object-metadata/types/ObjectMetadataItem.ts

@@ -4,7 +4,8 @@ import { FieldMetadataItem } from './FieldMetadataItem';
 
 export type ObjectMetadataItem = Omit<
   GeneratedObject,
-  'fields' | 'dataSourceId'
+  '__typename' | 'fields' | 'dataSourceId'
 > & {
+  __typename?: string;
   fields: FieldMetadataItem[];
 };

packages/twenty-front/src/modules/object-metadata/utils/formatFieldMetadataItemAsColumnDefinition.ts

@@ -1,19 +1,13 @@
-import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
-import { parseFieldRelationType } from '@/object-metadata/utils/parseFieldRelationType';
+import {
+  FieldMetadataItemAsFieldDefinitionProps,
+  formatFieldMetadataItemAsFieldDefinition,
+} from '@/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition';
 import { FieldMetadata } from '@/object-record/record-field/types/FieldMetadata';
 import { ColumnDefinition } from '@/object-record/record-table/types/ColumnDefinition';
 
-import { FieldMetadataItem } from '../types/FieldMetadataItem';
-
-import { parseFieldType } from './parseFieldType';
-
 type FieldMetadataItemAsColumnDefinitionProps = {
   position: number;
-  field: FieldMetadataItem;
-  objectMetadataItem: ObjectMetadataItem;
-  showLabel?: boolean;
-  labelWidth?: number;
-};
+} & FieldMetadataItemAsFieldDefinitionProps;
 
 export const formatFieldMetadataItemAsColumnDefinition = ({
   position,
@@ -21,36 +15,14 @@ export const formatFieldMetadataItemAsColumnDefinition = ({
   objectMetadataItem,
   showLabel,
   labelWidth,
-}: FieldMetadataItemAsColumnDefinitionProps): ColumnDefinition<FieldMetadata> => {
-  const relationObjectMetadataItem =
-    field.toRelationMetadata?.fromObjectMetadata ||
-    field.fromRelationMetadata?.toObjectMetadata;
-
-  const relationFieldMetadataId =
-    field.toRelationMetadata?.fromFieldMetadataId ||
-    field.fromRelationMetadata?.toFieldMetadataId;
-
-  return {
-    position,
-    fieldMetadataId: field.id,
-    label: field.label,
+}: FieldMetadataItemAsColumnDefinitionProps): ColumnDefinition<FieldMetadata> => ({
+  ...formatFieldMetadataItemAsFieldDefinition({
+    field,
+    objectMetadataItem,
     showLabel,
     labelWidth,
-    size: 100,
-    type: parseFieldType(field.type),
-    metadata: {
-      fieldName: field.name,
-      placeHolder: field.label,
-      relationType: parseFieldRelationType(field),
-      relationFieldMetadataId,
-      relationObjectMetadataNameSingular:
-        relationObjectMetadataItem?.nameSingular ?? '',
-      relationObjectMetadataNamePlural:
-        relationObjectMetadataItem?.namePlural ?? '',
-      objectMetadataNameSingular: objectMetadataItem.nameSingular ?? '',
-      options: field.options,
-    },
-    iconName: field.icon ?? 'Icon123',
-    isVisible: true,
-  };
-};
+  }),
+  position,
+  size: 100,
+  isVisible: true,
+});

packages/twenty-front/src/modules/object-metadata/utils/formatFieldMetadataItemAsFieldDefinition.ts

@@ -0,0 +1,49 @@
+import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
+import { parseFieldRelationType } from '@/object-metadata/utils/parseFieldRelationType';
+
+import { FieldMetadataItem } from '../types/FieldMetadataItem';
+
+import { parseFieldType } from './parseFieldType';
+
+export type FieldMetadataItemAsFieldDefinitionProps = {
+  field: FieldMetadataItem;
+  objectMetadataItem: ObjectMetadataItem;
+  showLabel?: boolean;
+  labelWidth?: number;
+};
+
+export const formatFieldMetadataItemAsFieldDefinition = ({
+  field,
+  objectMetadataItem,
+  showLabel,
+  labelWidth,
+}: FieldMetadataItemAsFieldDefinitionProps) => {
+  const relationObjectMetadataItem =
+    field.toRelationMetadata?.fromObjectMetadata ||
+    field.fromRelationMetadata?.toObjectMetadata;
+
+  const relationFieldMetadataId =
+    field.toRelationMetadata?.fromFieldMetadataId ||
+    field.fromRelationMetadata?.toFieldMetadataId;
+
+  return {
+    fieldMetadataId: field.id,
+    label: field.label,
+    showLabel,
+    labelWidth,
+    type: parseFieldType(field.type),
+    metadata: {
+      fieldName: field.name,
+      placeHolder: field.label,
+      relationType: parseFieldRelationType(field),
+      relationFieldMetadataId,
+      relationObjectMetadataNameSingular:
+        relationObjectMetadataItem?.nameSingular ?? '',
+      relationObjectMetadataNamePlural:
+        relationObjectMetadataItem?.namePlural ?? '',
+      objectMetadataNameSingular: objectMetadataItem.nameSingular ?? '',
+      options: field.options,
+    },
+    iconName: field.icon ?? 'Icon123',
+  };
+};