File - Migrate avatarUrl > avatarFile on person (data migration + logic) + Attachment data migration

packages/twenty-front/src/modules/command-menu/components/CommandMenuRecordInfo.tsx

@@ -1,3 +1,4 @@
+import { allowRequestsToTwentyIconsState } from '@/client-config/states/allowRequestsToTwentyIcons';
 import { viewableRecordIdComponentState } from '@/command-menu/pages/record-page/states/viewableRecordIdComponentState';
 import { viewableRecordNameSingularComponentState } from '@/command-menu/pages/record-page/states/viewableRecordNameSingularComponentState';
 import { useLabelIdentifierFieldMetadataItem } from '@/object-metadata/hooks/useLabelIdentifierFieldMetadataItem';
@@ -11,15 +12,18 @@ import { recordStoreIdentifierFamilySelector } from '@/object-record/record-stor
 import { RecordTitleCell } from '@/object-record/record-title-cell/components/RecordTitleCell';
 import { RecordTitleCellContainerType } from '@/object-record/record-title-cell/types/RecordTitleCellContainerType';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { Trans } from '@lingui/react/macro';
 import { isNonEmptyString } from '@sniptt/guards';
 import { useRecoilValue } from 'recoil';
 import { Avatar } from 'twenty-ui/display';
-import { FieldMetadataType } from '~/generated-metadata/graphql';
+import {
+  FeatureFlagKey,
+  FieldMetadataType,
+} from '~/generated-metadata/graphql';
 import { dateLocaleState } from '~/localization/states/dateLocaleState';
 import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
 import { CommandMenuPageInfoLayout } from './CommandMenuPageInfoLayout';
-import { allowRequestsToTwentyIconsState } from '@/client-config/states/allowRequestsToTwentyIcons';
 
 export const CommandMenuRecordInfo = ({
   commandMenuPageInstanceId,
@@ -51,10 +55,15 @@ export const CommandMenuRecordInfo = ({
     }),
   );
 
+  const isFilesFieldMigrated = useIsFeatureEnabled(
+    FeatureFlagKey.IS_FILES_FIELD_MIGRATED,
+  );
+
   const recordIdentifier = useRecoilValue(
     recordStoreIdentifierFamilySelector({
       recordId: objectRecordId,
       allowRequestsToTwentyIcons,
+      isFilesFieldMigrated,
     }),
   );
 
@@ -80,7 +89,6 @@ export const CommandMenuRecordInfo = ({
 
   const { useUpdateOneObjectRecordMutation } = useRecordShowContainerActions({
     objectNameSingular,
-    objectRecordId,
   });
 
   const fieldDefinition = {

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

@@ -1,10 +1,12 @@
 import React, { useMemo } from 'react';
 import { useRecoilValue } from 'recoil';
 
+import { allowRequestsToTwentyIconsState } from '@/client-config/states/allowRequestsToTwentyIcons';
 import { PreComputedChipGeneratorsContext } from '@/object-metadata/contexts/PreComputedChipGeneratorsContext';
 import { objectMetadataItemsState } from '@/object-metadata/states/objectMetadataItemsState';
 import { getRecordChipGenerators } from '@/object-record/utils/getRecordChipGenerators';
-import { allowRequestsToTwentyIconsState } from '@/client-config/states/allowRequestsToTwentyIcons';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
+import { FeatureFlagKey } from '~/generated/graphql';
 
 export const PreComputedChipGeneratorsProvider = ({
   children,
@@ -13,13 +15,17 @@ export const PreComputedChipGeneratorsProvider = ({
   const allowRequestsToTwentyIcons = useRecoilValue(
     allowRequestsToTwentyIconsState,
   );
+  const isFilesFieldMigrated = useIsFeatureEnabled(
+    FeatureFlagKey.IS_FILES_FIELD_MIGRATED,
+  );
   const { chipGeneratorPerObjectPerField, identifierChipGeneratorPerObject } =
     useMemo(() => {
       return getRecordChipGenerators(
         objectMetadataItems,
         allowRequestsToTwentyIcons,
+        isFilesFieldMigrated,
       );
-    }, [allowRequestsToTwentyIcons, objectMetadataItems]);
+    }, [allowRequestsToTwentyIcons, isFilesFieldMigrated, objectMetadataItems]);
 
   return (
     <>

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

@@ -3,19 +3,21 @@ import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSi
 import { type FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
 import { getCompanyDomainName } from '@/object-metadata/utils/getCompanyDomainName';
 import { type ObjectRecord } from '@/object-record/types/ObjectRecord';
-import { REACT_APP_SERVER_BASE_URL } from '~/config';
-import { getImageIdentifierFieldValue } from './getImageIdentifierFieldValue';
+import { isNonEmptyString } from '@sniptt/guards';
 import {
   getImageAbsoluteURI,
   getLogoUrlFromDomainName,
   isDefined,
 } from 'twenty-shared/utils';
+import { REACT_APP_SERVER_BASE_URL } from '~/config';
+import { getImageIdentifierFieldValue } from './getImageIdentifierFieldValue';
 
 export const getAvatarUrl = (
   objectNameSingular: string,
   record: ObjectRecord,
   imageIdentifierFieldMetadataItem: FieldMetadataItem | undefined,
   allowRequestsToTwentyIcons?: boolean | undefined,
+  isFilesFieldMigrated?: boolean | undefined,
 ) => {
   if (objectNameSingular === CoreObjectNameSingular.WorkspaceMember) {
     return record.avatarUrl ?? undefined;
@@ -31,7 +33,11 @@ export const getAvatarUrl = (
   }
 
   if (objectNameSingular === CoreObjectNameSingular.Person) {
-    return isDefined(record.avatarUrl)
+    if (isFilesFieldMigrated === true) {
+      return record.avatarFile?.[0]?.url ?? '';
+    }
+
+    return isNonEmptyString(record.avatarUrl)
       ? getImageAbsoluteURI({
           imageUrl: record.avatarUrl,
           baseUrl: REACT_APP_SERVER_BASE_URL,

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

@@ -7,10 +7,12 @@ export const getImageIdentifierFieldMetadataItem = (
     ObjectMetadataItem,
     'fields' | 'imageIdentifierFieldMetadataId' | 'nameSingular'
   >,
+  isFilesFieldMigrated?: boolean,
 ): FieldMetadataItem | undefined =>
   objectMetadataItem.fields.find((fieldMetadataItem) =>
     isImageIdentifierField({
       fieldMetadataItem,
       objectMetadataItem,
+      isFilesFieldMigrated,
     }),
   );

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

@@ -12,6 +12,7 @@ export const getObjectRecordIdentifier = ({
   objectMetadataItem,
   record,
   allowRequestsToTwentyIcons,
+  isFilesFieldMigrated,
 }: {
   objectMetadataItem: Pick<
     ObjectMetadataItem,
@@ -22,6 +23,7 @@ export const getObjectRecordIdentifier = ({
   >;
   record: ObjectRecord;
   allowRequestsToTwentyIcons: boolean;
+  isFilesFieldMigrated?: boolean;
 }): ObjectRecordIdentifier => {
   const labelIdentifierFieldMetadataItem =
     getLabelIdentifierFieldMetadataItem(objectMetadataItem);
@@ -43,6 +45,7 @@ export const getObjectRecordIdentifier = ({
     record,
     imageIdentifierFieldMetadata,
     allowRequestsToTwentyIcons,
+    isFilesFieldMigrated,
   );
 
   const linkToShowPage = getLinkToShowPage(

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

@@ -5,12 +5,14 @@ import { type ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataI
 export const isImageIdentifierField = ({
   fieldMetadataItem,
   objectMetadataItem,
+  isFilesFieldMigrated,
 }: {
   fieldMetadataItem: Pick<FieldMetadataItem, 'id' | 'name'>;
   objectMetadataItem: Pick<
     ObjectMetadataItem,
     'imageIdentifierFieldMetadataId' | 'nameSingular'
   >;
+  isFilesFieldMigrated?: boolean;
 }) => {
   if (
     objectMetadataItem.nameSingular === CoreObjectNameSingular.Company &&
@@ -19,6 +21,13 @@ export const isImageIdentifierField = ({
     return true;
   }
 
+  if (objectMetadataItem.nameSingular === CoreObjectNameSingular.Person) {
+    if (isFilesFieldMigrated === true) {
+      return fieldMetadataItem.name === 'avatarFile';
+    }
+    return fieldMetadataItem.name === 'avatarUrl';
+  }
+
   return (
     fieldMetadataItem.id === objectMetadataItem.imageIdentifierFieldMetadataId
   );

packages/twenty-front/src/modules/object-record/graphql/record-gql-fields/utils/buildIdentifierGqlFields.ts

@@ -12,11 +12,14 @@ export const buildIdentifierGqlFields = (
     | 'imageIdentifierFieldMetadataId'
     | 'nameSingular'
   >,
+  isFilesFieldMigrated?: boolean,
 ): RecordGqlFields => {
   const labelIdentifierField =
     getLabelIdentifierFieldMetadataItem(objectMetadata);
-  const imageIdentifierField =
-    getImageIdentifierFieldMetadataItem(objectMetadata);
+  const imageIdentifierField = getImageIdentifierFieldMetadataItem(
+    objectMetadata,
+    isFilesFieldMigrated,
+  );
 
   return {
     id: true,

packages/twenty-front/src/modules/object-record/graphql/record-gql-fields/utils/generateDepthRecordGqlFieldsFromFields.ts

@@ -27,13 +27,15 @@ export type GenerateDepthRecordGqlFieldsFromFields = {
   >[];
   depth: 0 | 1;
   shouldOnlyLoadRelationIdentifiers?: boolean;
+  isFilesFieldMigrated?: boolean;
 };
 
 export const generateDepthRecordGqlFieldsFromFields = ({
   objectMetadataItems,
   fields,
   depth,
   shouldOnlyLoadRelationIdentifiers = true,
+  isFilesFieldMigrated,
 }: GenerateDepthRecordGqlFieldsFromFields) => {
   const generatedRecordGqlFields: RecordGqlFields = fields.reduce(
     (recordGqlFields, fieldMetadata) => {
@@ -83,6 +85,7 @@ export const generateDepthRecordGqlFieldsFromFields = ({
           const junctionGqlFields = generateJunctionRelationGqlFields({
             fieldMetadataItem: fieldMetadata,
             objectMetadataItems,
+            isFilesFieldMigrated,
           });
 
           if (isDefined(junctionGqlFields) && depth === 1) {
@@ -97,7 +100,10 @@ export const generateDepthRecordGqlFieldsFromFields = ({
           getLabelIdentifierFieldMetadataItem(targetObjectMetadataItem);
 
         const imageIdentifierFieldMetadataItem =
-          getImageIdentifierFieldMetadataItem(targetObjectMetadataItem);
+          getImageIdentifierFieldMetadataItem(
+            targetObjectMetadataItem,
+            isFilesFieldMigrated,
+          );
 
         const relationIdentifierSubGqlFields = {
           id: true,

packages/twenty-front/src/modules/object-record/graphql/record-gql-fields/utils/generateJunctionRelationGqlFields.ts

@@ -16,11 +16,13 @@ type JunctionFieldMetadataItem = Pick<
 type GenerateJunctionRelationGqlFieldsArgs = {
   fieldMetadataItem: JunctionFieldMetadataItem;
   objectMetadataItems: JunctionObjectMetadataItem[];
+  isFilesFieldMigrated?: boolean;
 };
 
 const buildRegularTargetFieldGqlFields = (
   targetField: JunctionFieldMetadataItem,
   objectMetadataItems: JunctionObjectMetadataItem[],
+  isFilesFieldMigrated?: boolean,
 ): RecordGqlFields => {
   const targetObjectMetadata = objectMetadataItems.find(
     (item) => item.id === targetField.relation?.targetObjectMetadata.id,
@@ -31,13 +33,17 @@ const buildRegularTargetFieldGqlFields = (
   }
 
   return {
-    [targetField.name]: buildIdentifierGqlFields(targetObjectMetadata),
+    [targetField.name]: buildIdentifierGqlFields(
+      targetObjectMetadata,
+      isFilesFieldMigrated,
+    ),
   };
 };
 
 const buildMorphTargetFieldGqlFields = (
   targetField: JunctionFieldMetadataItem,
   objectMetadataItems: JunctionObjectMetadataItem[],
+  isFilesFieldMigrated?: boolean,
 ): RecordGqlFields => {
   const morphRelations = targetField.morphRelations;
 
@@ -63,7 +69,10 @@ const buildMorphTargetFieldGqlFields = (
       targetObjectMetadataNamePlural: targetObjectMetadata.namePlural,
     });
 
-    result[computedFieldName] = buildIdentifierGqlFields(targetObjectMetadata);
+    result[computedFieldName] = buildIdentifierGqlFields(
+      targetObjectMetadata,
+      isFilesFieldMigrated,
+    );
   }
 
   return result;
@@ -72,17 +81,27 @@ const buildMorphTargetFieldGqlFields = (
 const buildTargetFieldGqlFields = (
   targetField: JunctionFieldMetadataItem,
   objectMetadataItems: JunctionObjectMetadataItem[],
+  isFilesFieldMigrated?: boolean,
 ): RecordGqlFields => {
   if (targetField.type === FieldMetadataType.MORPH_RELATION) {
-    return buildMorphTargetFieldGqlFields(targetField, objectMetadataItems);
+    return buildMorphTargetFieldGqlFields(
+      targetField,
+      objectMetadataItems,
+      isFilesFieldMigrated,
+    );
   }
-  return buildRegularTargetFieldGqlFields(targetField, objectMetadataItems);
+  return buildRegularTargetFieldGqlFields(
+    targetField,
+    objectMetadataItems,
+    isFilesFieldMigrated,
+  );
 };
 
 // Generates GraphQL fields for a junction relation, including the nested target objects
 export const generateJunctionRelationGqlFields = ({
   fieldMetadataItem,
   objectMetadataItems,
+  isFilesFieldMigrated,
 }: GenerateJunctionRelationGqlFieldsArgs): RecordGqlFields | null => {
   const junctionConfig = getJunctionConfig({
     settings: fieldMetadataItem.settings,
@@ -100,13 +119,17 @@ export const generateJunctionRelationGqlFields = ({
   const junctionTargetFields = targetFields.reduce<RecordGqlFields>(
     (acc, targetField) => ({
       ...acc,
-      ...buildTargetFieldGqlFields(targetField, objectMetadataItems),
+      ...buildTargetFieldGqlFields(
+        targetField,
+        objectMetadataItems,
+        isFilesFieldMigrated,
+      ),
     }),
     {},
   );
 
   return {
-    ...buildIdentifierGqlFields(junctionObjectMetadata),
+    ...buildIdentifierGqlFields(junctionObjectMetadata, isFilesFieldMigrated),
     ...junctionTargetFields,
   };
 };

packages/twenty-front/src/modules/object-record/record-field-list/components/RecordFieldList.tsx

@@ -56,7 +56,6 @@ export const RecordFieldList = ({
 
   const { useUpdateOneObjectRecordMutation } = useRecordShowContainerActions({
     objectNameSingular,
-    objectRecordId,
   });
 
   const isRecordReadOnly = useIsRecordReadOnly({

packages/twenty-front/src/modules/object-record/record-field/hooks/useRecordsFieldVisibleGqlFields.ts

@@ -9,7 +9,9 @@ import { generateDepthRecordGqlFieldsFromFields } from '@/object-record/graphql/
 import { visibleRecordFieldsComponentSelector } from '@/object-record/record-field/states/visibleRecordFieldsComponentSelector';
 import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
 import { useRecoilComponentValue } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValue';
+import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled';
 import { isDefined } from 'twenty-shared/utils';
+import { FeatureFlagKey } from '~/generated/graphql';
 
 type UseRecordsFieldVisibleGqlFields = {
   objectMetadataItem: ObjectMetadataItem;
@@ -29,19 +31,26 @@ export const useRecordsFieldVisibleGqlFields = ({
 
   const { objectMetadataItems } = useObjectMetadataItems();
 
+  const isFilesFieldMigrated = useIsFeatureEnabled(
+    FeatureFlagKey.IS_FILES_FIELD_MIGRATED,
+  );
+
   const allDepthOneGqlFields = generateDepthRecordGqlFieldsFromFields({
     objectMetadataItems,
     fields: visibleRecordFields.map(
       (field) =>
         fieldMetadataItemByFieldMetadataItemId[field.fieldMetadataItemId],
     ),
     depth: 1,
+    isFilesFieldMigrated,
   });
 
   const labelIdentifierFieldMetadataItem =
     getLabelIdentifierFieldMetadataItem(objectMetadataItem);
-  const imageIdentifierFieldMetadataItem =
-    getImageIdentifierFieldMetadataItem(objectMetadataItem);
+  const imageIdentifierFieldMetadataItem = getImageIdentifierFieldMetadataItem(
+    objectMetadataItem,
+    isFilesFieldMigrated,
+  );
 
   const hasPosition = hasObjectMetadataItemPositionField(objectMetadataItem);
 

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

@@ -64,7 +64,6 @@ export const ObjectRecordShowPageBreadcrumb = ({
 
   const { useUpdateOneObjectRecordMutation } = useRecordShowContainerActions({
     objectNameSingular,
-    objectRecordId,
   });
 
   const isLabelIdentifierReadOnly = useIsRecordFieldReadOnly({