[FRONT COMPONENTS] Serialize relation between widget and front component (#18228)

This allows us to define page layout widgets of type front component in
an app with the front component universal identifier.

packages/twenty-server/src/engine/metadata-modules/flat-entity/services/workspace-many-or-all-flat-entity-maps-cache.module.ts

@@ -3,6 +3,7 @@ import { TypeOrmModule } from '@nestjs/typeorm';
 
 import { ApplicationEntity } from 'src/engine/core-modules/application/application.entity';
 import { FieldMetadataEntity } from 'src/engine/metadata-modules/field-metadata/field-metadata.entity';
+import { FrontComponentEntity } from 'src/engine/metadata-modules/front-component/entities/front-component.entity';
 import { WorkspaceManyOrAllFlatEntityMapsCacheService } from 'src/engine/metadata-modules/flat-entity/services/workspace-many-or-all-flat-entity-maps-cache.service';
 import { WorkspaceFlatFieldMetadataMapCacheService } from 'src/engine/metadata-modules/flat-field-metadata/services/workspace-flat-field-metadata-map-cache.service';
 import { WorkspaceFlatIndexMapCacheService } from 'src/engine/metadata-modules/flat-index-metadata/services/workspace-flat-index-map-cache.service';
@@ -56,6 +57,7 @@ import { WorkspaceCacheModule } from 'src/engine/workspace-cache/workspace-cache
       RowLevelPermissionPredicateGroupEntity,
       ApplicationEntity,
       RoleEntity,
+      FrontComponentEntity,
     ]),
   ],
   providers: [

packages/twenty-server/src/engine/metadata-modules/flat-page-layout-widget/flat-page-layout-widget.module.ts

@@ -5,6 +5,7 @@ import { ApplicationEntity } from 'src/engine/core-modules/application/applicati
 import { FieldMetadataEntity } from 'src/engine/metadata-modules/field-metadata/field-metadata.entity';
 import { FlatPageLayoutWidgetTypeValidatorService } from 'src/engine/metadata-modules/flat-page-layout-widget/services/flat-page-layout-widget-type-validator.service';
 import { WorkspaceFlatPageLayoutWidgetMapCacheService } from 'src/engine/metadata-modules/flat-page-layout-widget/services/workspace-flat-page-layout-widget-map-cache.service';
+import { FrontComponentEntity } from 'src/engine/metadata-modules/front-component/entities/front-component.entity';
 import { ObjectMetadataEntity } from 'src/engine/metadata-modules/object-metadata/object-metadata.entity';
 import { PageLayoutTabEntity } from 'src/engine/metadata-modules/page-layout-tab/entities/page-layout-tab.entity';
 import { PageLayoutWidgetEntity } from 'src/engine/metadata-modules/page-layout-widget/entities/page-layout-widget.entity';
@@ -18,6 +19,7 @@ import { ViewEntity } from 'src/engine/metadata-modules/view/entities/view.entit
       PageLayoutTabEntity,
       ObjectMetadataEntity,
       FieldMetadataEntity,
+      FrontComponentEntity,
       ViewEntity,
     ]),
   ],

packages/twenty-server/src/engine/metadata-modules/flat-page-layout-widget/services/workspace-flat-page-layout-widget-map-cache.service.ts

@@ -10,6 +10,7 @@ import { FieldMetadataEntity } from 'src/engine/metadata-modules/field-metadata/
 import { createEmptyFlatEntityMaps } from 'src/engine/metadata-modules/flat-entity/constant/create-empty-flat-entity-maps.constant';
 import { FlatPageLayoutWidgetMaps } from 'src/engine/metadata-modules/flat-page-layout-widget/types/flat-page-layout-widget-maps.type';
 import { fromPageLayoutWidgetEntityToFlatPageLayoutWidget } from 'src/engine/metadata-modules/flat-page-layout-widget/utils/from-page-layout-widget-entity-to-flat-page-layout-widget.util';
+import { FrontComponentEntity } from 'src/engine/metadata-modules/front-component/entities/front-component.entity';
 import { ObjectMetadataEntity } from 'src/engine/metadata-modules/object-metadata/object-metadata.entity';
 import { PageLayoutTabEntity } from 'src/engine/metadata-modules/page-layout-tab/entities/page-layout-tab.entity';
 import { PageLayoutWidgetEntity } from 'src/engine/metadata-modules/page-layout-widget/entities/page-layout-widget.entity';
@@ -32,6 +33,8 @@ export class WorkspaceFlatPageLayoutWidgetMapCacheService extends WorkspaceCache
     private readonly objectMetadataRepository: Repository<ObjectMetadataEntity>,
     @InjectRepository(FieldMetadataEntity)
     private readonly fieldMetadataRepository: Repository<FieldMetadataEntity>,
+    @InjectRepository(FrontComponentEntity)
+    private readonly frontComponentRepository: Repository<FrontComponentEntity>,
     @InjectRepository(ViewEntity)
     private readonly viewRepository: Repository<ViewEntity>,
   ) {
@@ -47,6 +50,7 @@ export class WorkspaceFlatPageLayoutWidgetMapCacheService extends WorkspaceCache
       pageLayoutTabs,
       objectMetadatas,
       fieldMetadatas,
+      frontComponents,
       views,
     ] = await Promise.all([
       this.pageLayoutWidgetRepository.find({
@@ -73,6 +77,11 @@ export class WorkspaceFlatPageLayoutWidgetMapCacheService extends WorkspaceCache
         select: ['id', 'universalIdentifier'],
         withDeleted: true,
       }),
+      this.frontComponentRepository.find({
+        where: { workspaceId },
+        select: ['id', 'universalIdentifier'],
+        withDeleted: true,
+      }),
       this.viewRepository.find({
         where: { workspaceId },
         select: ['id', 'universalIdentifier'],
@@ -89,6 +98,9 @@ export class WorkspaceFlatPageLayoutWidgetMapCacheService extends WorkspaceCache
     const fieldMetadataUniversalIdentifierById = Object.fromEntries(
       createIdToUniversalIdentifierMap(fieldMetadatas),
     );
+    const frontComponentUniversalIdentifierById = Object.fromEntries(
+      createIdToUniversalIdentifierMap(frontComponents),
+    );
     const viewUniversalIdentifierById = Object.fromEntries(
       createIdToUniversalIdentifierMap(views),
     );
@@ -103,6 +115,7 @@ export class WorkspaceFlatPageLayoutWidgetMapCacheService extends WorkspaceCache
           pageLayoutTabIdToUniversalIdentifierMap,
           objectMetadataIdToUniversalIdentifierMap,
           fieldMetadataUniversalIdentifierById,
+          frontComponentUniversalIdentifierById,
           viewUniversalIdentifierById,
         });
 

packages/twenty-server/src/engine/metadata-modules/flat-page-layout-widget/utils/from-create-page-layout-widget-input-to-flat-page-layout-widget-to-create.util.ts

@@ -19,6 +19,7 @@ export type FromCreatePageLayoutWidgetInputToFlatPageLayoutWidgetToCreateArgs =
     | 'flatPageLayoutTabMaps'
     | 'flatObjectMetadataMaps'
     | 'flatFieldMetadataMaps'
+    | 'flatFrontComponentMaps'
     | 'flatViewFieldGroupMaps'
     | 'flatViewMaps'
   >;
@@ -30,6 +31,7 @@ export const fromCreatePageLayoutWidgetInputToFlatPageLayoutWidgetToCreate = ({
   flatPageLayoutTabMaps,
   flatObjectMetadataMaps,
   flatFieldMetadataMaps,
+  flatFrontComponentMaps,
   flatViewFieldGroupMaps,
   flatViewMaps,
 }: FromCreatePageLayoutWidgetInputToFlatPageLayoutWidgetToCreateArgs): FlatPageLayoutWidget => {
@@ -82,6 +84,8 @@ export const fromCreatePageLayoutWidgetInputToFlatPageLayoutWidgetToCreate = ({
         configuration: createPageLayoutWidgetInput.configuration,
         fieldMetadataUniversalIdentifierById:
           flatFieldMetadataMaps.universalIdentifierById,
+        frontComponentUniversalIdentifierById:
+          flatFrontComponentMaps.universalIdentifierById,
         viewFieldGroupUniversalIdentifierById:
           flatViewFieldGroupMaps.universalIdentifierById,
         viewUniversalIdentifierById: flatViewMaps.universalIdentifierById,

packages/twenty-server/src/engine/metadata-modules/flat-page-layout-widget/utils/from-page-layout-widget-configuration-to-universal-configuration.util.ts

@@ -73,12 +73,14 @@ const convertChartFilterToUniversalFilter = ({
 export const fromPageLayoutWidgetConfigurationToUniversalConfiguration = ({
   configuration,
   fieldMetadataUniversalIdentifierById,
+  frontComponentUniversalIdentifierById = {},
   viewFieldGroupUniversalIdentifierById = {},
   viewUniversalIdentifierById = {},
   shouldThrowOnMissingIdentifier = false,
 }: {
   configuration: PageLayoutWidgetConfiguration;
   fieldMetadataUniversalIdentifierById: Partial<Record<string, string>>;
+  frontComponentUniversalIdentifierById?: Partial<Record<string, string>>;
   viewFieldGroupUniversalIdentifierById?: Partial<Record<string, string>>;
   viewUniversalIdentifierById?: Partial<Record<string, string>>;
   shouldThrowOnMissingIdentifier?: boolean;
@@ -326,6 +328,28 @@ export const fromPageLayoutWidgetConfigurationToUniversalConfiguration = ({
       };
     }
 
+    case WidgetConfigurationType.FRONT_COMPONENT: {
+      const { frontComponentId, ...rest } = configuration;
+
+      const frontComponentUniversalIdentifier: string | null =
+        frontComponentUniversalIdentifierById[frontComponentId] ?? null;
+
+      if (
+        !isDefined(frontComponentUniversalIdentifier) &&
+        shouldThrowOnMissingIdentifier
+      ) {
+        throw new FlatEntityMapsException(
+          `Front component universal identifier not found for id: ${frontComponentId}`,
+          FlatEntityMapsExceptionCode.RELATION_UNIVERSAL_IDENTIFIER_NOT_FOUND,
+        );
+      }
+
+      return {
+        ...rest,
+        frontComponentUniversalIdentifier,
+      };
+    }
+
     case WidgetConfigurationType.VIEW:
     case WidgetConfigurationType.FIELD:
     case WidgetConfigurationType.TIMELINE:
@@ -338,7 +362,6 @@ export const fromPageLayoutWidgetConfigurationToUniversalConfiguration = ({
     case WidgetConfigurationType.WORKFLOW:
     case WidgetConfigurationType.WORKFLOW_VERSION:
     case WidgetConfigurationType.WORKFLOW_RUN:
-    case WidgetConfigurationType.FRONT_COMPONENT:
     case WidgetConfigurationType.IFRAME:
     case WidgetConfigurationType.STANDALONE_RICH_TEXT:
       return configuration;

packages/twenty-server/src/engine/metadata-modules/flat-page-layout-widget/utils/from-page-layout-widget-entity-to-flat-page-layout-widget.util.ts

@@ -12,6 +12,7 @@ import { type FromEntityToFlatEntityArgs } from 'src/engine/workspace-cache/type
 type FromPageLayoutWidgetEntityToFlatPageLayoutWidgetArgs =
   FromEntityToFlatEntityArgs<'pageLayoutWidget'> & {
     fieldMetadataUniversalIdentifierById: Partial<Record<string, string>>;
+    frontComponentUniversalIdentifierById?: Partial<Record<string, string>>;
     viewFieldGroupUniversalIdentifierById?: Partial<Record<string, string>>;
     viewUniversalIdentifierById?: Partial<Record<string, string>>;
   };
@@ -22,6 +23,7 @@ export const fromPageLayoutWidgetEntityToFlatPageLayoutWidget = ({
   pageLayoutTabIdToUniversalIdentifierMap,
   objectMetadataIdToUniversalIdentifierMap,
   fieldMetadataUniversalIdentifierById,
+  frontComponentUniversalIdentifierById,
   viewFieldGroupUniversalIdentifierById,
   viewUniversalIdentifierById,
 }: FromPageLayoutWidgetEntityToFlatPageLayoutWidgetArgs): FlatPageLayoutWidget => {
@@ -74,6 +76,7 @@ export const fromPageLayoutWidgetEntityToFlatPageLayoutWidget = ({
     fromPageLayoutWidgetConfigurationToUniversalConfiguration({
       configuration: pageLayoutWidgetEntityWithoutRelations.configuration,
       fieldMetadataUniversalIdentifierById,
+      frontComponentUniversalIdentifierById,
       viewFieldGroupUniversalIdentifierById,
       viewUniversalIdentifierById,
     });

packages/twenty-server/src/engine/metadata-modules/flat-page-layout-widget/utils/from-update-page-layout-widget-input-to-flat-page-layout-widget-to-update-or-throw.util.ts

@@ -30,6 +30,7 @@ export const fromUpdatePageLayoutWidgetInputToFlatPageLayoutWidgetToUpdateOrThro
     flatPageLayoutWidgetMaps,
     flatObjectMetadataMaps,
     flatFieldMetadataMaps,
+    flatFrontComponentMaps,
     flatViewFieldGroupMaps,
     flatViewMaps,
   }: {
@@ -39,6 +40,7 @@ export const fromUpdatePageLayoutWidgetInputToFlatPageLayoutWidgetToUpdateOrThro
     AllFlatEntityMaps,
     | 'flatObjectMetadataMaps'
     | 'flatFieldMetadataMaps'
+    | 'flatFrontComponentMaps'
     | 'flatViewFieldGroupMaps'
     | 'flatViewMaps'
   >): FlatPageLayoutWidget => {
@@ -102,6 +104,8 @@ export const fromUpdatePageLayoutWidgetInputToFlatPageLayoutWidgetToUpdateOrThro
           configuration: flatPageLayoutWidgetToUpdate.configuration,
           fieldMetadataUniversalIdentifierById:
             flatFieldMetadataMaps.universalIdentifierById,
+          frontComponentUniversalIdentifierById:
+            flatFrontComponentMaps.universalIdentifierById,
           viewFieldGroupUniversalIdentifierById:
             flatViewFieldGroupMaps.universalIdentifierById,
           viewUniversalIdentifierById: flatViewMaps.universalIdentifierById,

packages/twenty-server/src/engine/metadata-modules/page-layout-widget/dtos/front-component-configuration.dto.ts

@@ -1,7 +1,10 @@
 import { Field, ObjectType } from '@nestjs/graphql';
 
 import { IsIn, IsNotEmpty, IsUUID } from 'class-validator';
-import { type FrontComponentConfiguration } from 'twenty-shared/types';
+import {
+  type FrontComponentConfiguration,
+  type SerializedRelation,
+} from 'twenty-shared/types';
 
 import { UUIDScalarType } from 'src/engine/api/graphql/workspace-schema-builder/graphql-types/scalars';
 import { WidgetConfigurationType } from 'src/engine/metadata-modules/page-layout-widget/enums/widget-configuration-type.type';
@@ -18,5 +21,5 @@ export class FrontComponentConfigurationDTO
   @Field(() => UUIDScalarType)
   @IsNotEmpty()
   @IsUUID()
-  frontComponentId: string;
+  frontComponentId: SerializedRelation;
 }

packages/twenty-server/src/engine/metadata-modules/page-layout-widget/services/page-layout-widget.service.ts

@@ -243,6 +243,7 @@ export class PageLayoutWidgetService {
       flatPageLayoutTabMaps,
       flatObjectMetadataMaps,
       flatFieldMetadataMaps,
+      flatFrontComponentMaps,
       flatViewFieldGroupMaps,
       flatViewMaps,
     } =
@@ -253,6 +254,7 @@ export class PageLayoutWidgetService {
             'flatPageLayoutTabMaps',
             'flatObjectMetadataMaps',
             'flatFieldMetadataMaps',
+            'flatFrontComponentMaps',
             'flatViewFieldGroupMaps',
             'flatViewMaps',
           ],
@@ -267,6 +269,7 @@ export class PageLayoutWidgetService {
         flatPageLayoutTabMaps,
         flatObjectMetadataMaps,
         flatFieldMetadataMaps,
+        flatFrontComponentMaps,
         flatViewFieldGroupMaps,
         flatViewMaps,
       });
@@ -327,6 +330,7 @@ export class PageLayoutWidgetService {
     const {
       flatObjectMetadataMaps: existingFlatObjectMetadataMaps,
       flatFieldMetadataMaps: existingFlatFieldMetadataMaps,
+      flatFrontComponentMaps: existingFlatFrontComponentMaps,
       flatViewFieldGroupMaps: existingFlatViewFieldGroupMaps,
       flatViewMaps: existingFlatViewMaps,
     } = await this.workspaceManyOrAllFlatEntityMapsCacheService.getOrRecomputeManyOrAllFlatEntityMaps(
@@ -335,6 +339,7 @@ export class PageLayoutWidgetService {
         flatMapsKeys: [
           'flatObjectMetadataMaps',
           'flatFieldMetadataMaps',
+          'flatFrontComponentMaps',
           'flatViewFieldGroupMaps',
           'flatViewMaps',
         ],
@@ -369,6 +374,7 @@ export class PageLayoutWidgetService {
         flatPageLayoutWidgetMaps: existingFlatPageLayoutWidgetMaps,
         flatObjectMetadataMaps: existingFlatObjectMetadataMaps,
         flatFieldMetadataMaps: existingFlatFieldMetadataMaps,
+        flatFrontComponentMaps: existingFlatFrontComponentMaps,
         flatViewFieldGroupMaps: existingFlatViewFieldGroupMaps,
         flatViewMaps: existingFlatViewMaps,
       });

packages/twenty-server/src/engine/metadata-modules/page-layout/services/page-layout-duplication.service.ts

@@ -52,6 +52,7 @@ export class PageLayoutDuplicationService {
       flatPageLayoutWidgetMaps,
       flatObjectMetadataMaps,
       flatFieldMetadataMaps,
+      flatFrontComponentMaps,
       flatViewFieldGroupMaps,
       flatViewMaps,
     } = await this.getPageLayoutFlatEntityMaps(workspaceId);
@@ -116,6 +117,7 @@ export class PageLayoutDuplicationService {
       flatPageLayoutTabMaps: optimisticFlatPageLayoutTabMaps,
       flatObjectMetadataMaps,
       flatFieldMetadataMaps,
+      flatFrontComponentMaps,
       flatViewFieldGroupMaps,
       flatViewMaps,
     });
@@ -185,6 +187,7 @@ export class PageLayoutDuplicationService {
           'flatPageLayoutWidgetMaps',
           'flatObjectMetadataMaps',
           'flatFieldMetadataMaps',
+          'flatFrontComponentMaps',
           'flatViewFieldGroupMaps',
           'flatViewMaps',
         ],
@@ -296,6 +299,7 @@ export class PageLayoutDuplicationService {
     flatPageLayoutTabMaps,
     flatObjectMetadataMaps,
     flatFieldMetadataMaps,
+    flatFrontComponentMaps,
     flatViewFieldGroupMaps,
     flatViewMaps,
   }: {
@@ -309,6 +313,7 @@ export class PageLayoutDuplicationService {
     flatPageLayoutTabMaps: AllFlatEntityMaps['flatPageLayoutTabMaps'];
     flatObjectMetadataMaps: AllFlatEntityMaps['flatObjectMetadataMaps'];
     flatFieldMetadataMaps: AllFlatEntityMaps['flatFieldMetadataMaps'];
+    flatFrontComponentMaps: AllFlatEntityMaps['flatFrontComponentMaps'];
     flatViewFieldGroupMaps: AllFlatEntityMaps['flatViewFieldGroupMaps'];
     flatViewMaps: AllFlatEntityMaps['flatViewMaps'];
   }): FlatPageLayoutWidget[] {
@@ -330,6 +335,7 @@ export class PageLayoutDuplicationService {
           flatPageLayoutTabMaps,
           flatObjectMetadataMaps,
           flatFieldMetadataMaps,
+          flatFrontComponentMaps,
           flatViewFieldGroupMaps,
           flatViewMaps,
         }),

packages/twenty-server/src/engine/metadata-modules/page-layout/services/page-layout-update.service.ts

@@ -119,6 +119,7 @@ export class PageLayoutUpdateService {
     const {
       flatObjectMetadataMaps,
       flatFieldMetadataMaps,
+      flatFrontComponentMaps,
       flatViewFieldGroupMaps,
       flatViewMaps,
     } =
@@ -128,6 +129,7 @@ export class PageLayoutUpdateService {
           flatMapsKeys: [
             'flatObjectMetadataMaps',
             'flatFieldMetadataMaps',
+            'flatFrontComponentMaps',
             'flatViewFieldGroupMaps',
             'flatViewMaps',
           ],
@@ -154,6 +156,7 @@ export class PageLayoutUpdateService {
         workspaceCustomApplicationUniversalIdentifier:
           workspaceCustomFlatApplication.universalIdentifier,
         flatFieldMetadataMaps,
+        flatFrontComponentMaps,
         flatViewFieldGroupMaps,
         flatViewMaps,
       });
@@ -367,6 +370,7 @@ export class PageLayoutUpdateService {
     workspaceCustomApplicationId,
     workspaceCustomApplicationUniversalIdentifier,
     flatFieldMetadataMaps,
+    flatFrontComponentMaps,
     flatViewFieldGroupMaps,
     flatViewMaps,
   }: {
@@ -378,6 +382,7 @@ export class PageLayoutUpdateService {
     AllFlatEntityMaps,
     | 'flatObjectMetadataMaps'
     | 'flatFieldMetadataMaps'
+    | 'flatFrontComponentMaps'
     | 'flatViewFieldGroupMaps'
     | 'flatViewMaps'
     | 'flatPageLayoutTabMaps'
@@ -402,6 +407,7 @@ export class PageLayoutUpdateService {
           workspaceCustomApplicationId,
           workspaceCustomApplicationUniversalIdentifier,
           flatFieldMetadataMaps,
+          flatFrontComponentMaps,
           flatViewFieldGroupMaps,
           flatViewMaps,
         });
@@ -427,6 +433,7 @@ export class PageLayoutUpdateService {
     workspaceCustomApplicationId,
     workspaceCustomApplicationUniversalIdentifier,
     flatFieldMetadataMaps,
+    flatFrontComponentMaps,
     flatViewFieldGroupMaps,
     flatViewMaps,
   }: {
@@ -439,6 +446,7 @@ export class PageLayoutUpdateService {
     AllFlatEntityMaps,
     | 'flatObjectMetadataMaps'
     | 'flatFieldMetadataMaps'
+    | 'flatFrontComponentMaps'
     | 'flatViewFieldGroupMaps'
     | 'flatViewMaps'
     | 'flatPageLayoutTabMaps'
@@ -509,6 +517,8 @@ export class PageLayoutUpdateService {
               configuration: widgetInput.configuration,
               fieldMetadataUniversalIdentifierById:
                 flatFieldMetadataMaps.universalIdentifierById,
+              frontComponentUniversalIdentifierById:
+                flatFrontComponentMaps.universalIdentifierById,
               viewFieldGroupUniversalIdentifierById:
                 flatViewFieldGroupMaps.universalIdentifierById,
               viewUniversalIdentifierById: flatViewMaps.universalIdentifierById,
@@ -556,6 +566,8 @@ export class PageLayoutUpdateService {
                 configuration: updatedConfiguration,
                 fieldMetadataUniversalIdentifierById:
                   flatFieldMetadataMaps.universalIdentifierById,
+                frontComponentUniversalIdentifierById:
+                  flatFrontComponentMaps.universalIdentifierById,
                 viewFieldGroupUniversalIdentifierById:
                   flatViewFieldGroupMaps.universalIdentifierById,
                 viewUniversalIdentifierById:
@@ -606,6 +618,8 @@ export class PageLayoutUpdateService {
                 configuration: restoredConfiguration,
                 fieldMetadataUniversalIdentifierById:
                   flatFieldMetadataMaps.universalIdentifierById,
+                frontComponentUniversalIdentifierById:
+                  flatFrontComponentMaps.universalIdentifierById,
                 viewFieldGroupUniversalIdentifierById:
                   flatViewFieldGroupMaps.universalIdentifierById,
                 viewUniversalIdentifierById:

packages/twenty-server/src/engine/workspace-manager/workspace-migration/workspace-migration-runner/action-handlers/page-layout-widget/services/create-page-layout-widget-action-handler.service.ts

@@ -42,6 +42,7 @@ export class CreatePageLayoutWidgetActionHandlerService extends WorkspaceMigrati
       fromUniversalConfigurationToFlatPageLayoutWidgetConfiguration({
         universalConfiguration: action.flatEntity.universalConfiguration,
         flatFieldMetadataMaps: allFlatEntityMaps.flatFieldMetadataMaps,
+        flatFrontComponentMaps: allFlatEntityMaps.flatFrontComponentMaps,
         flatViewMaps: allFlatEntityMaps.flatViewMaps,
         flatViewFieldGroupMaps: allFlatEntityMaps.flatViewFieldGroupMaps,
       });

packages/twenty-server/src/engine/workspace-manager/workspace-migration/workspace-migration-runner/action-handlers/page-layout-widget/services/update-page-layout-widget-action-handler.service.ts

@@ -50,6 +50,8 @@ export class UpdatePageLayoutWidgetActionHandlerService extends WorkspaceMigrati
               fromUniversalConfigurationToFlatPageLayoutWidgetConfiguration({
                 universalConfiguration,
                 flatFieldMetadataMaps: allFlatEntityMaps.flatFieldMetadataMaps,
+                flatFrontComponentMaps:
+                  allFlatEntityMaps.flatFrontComponentMaps,
                 flatViewMaps: allFlatEntityMaps.flatViewMaps,
                 flatViewFieldGroupMaps:
                   allFlatEntityMaps.flatViewFieldGroupMaps,

packages/twenty-server/src/engine/workspace-manager/workspace-migration/workspace-migration-runner/action-handlers/page-layout-widget/services/utils/from-universal-configuration-to-flat-page-layout-widget-configuration.util.ts

@@ -70,11 +70,13 @@ const convertUniversalFilterToChartFilter = ({
 export const fromUniversalConfigurationToFlatPageLayoutWidgetConfiguration = ({
   universalConfiguration,
   flatFieldMetadataMaps,
+  flatFrontComponentMaps,
   flatViewMaps,
   flatViewFieldGroupMaps,
 }: {
   universalConfiguration: FlatPageLayoutWidget['universalConfiguration'];
   flatFieldMetadataMaps: MetadataFlatEntityMaps<'fieldMetadata'>;
+  flatFrontComponentMaps: MetadataFlatEntityMaps<'frontComponent'>;
   flatViewMaps: MetadataFlatEntityMaps<'view'>;
   flatViewFieldGroupMaps: MetadataFlatEntityMaps<'viewFieldGroup'>;
 }): FlatPageLayoutWidget['configuration'] => {
@@ -310,6 +312,35 @@ export const fromUniversalConfigurationToFlatPageLayoutWidgetConfiguration = ({
       return { ...rest, viewId, newFieldDefaultConfiguration };
     }
 
+    case WidgetConfigurationType.FRONT_COMPONENT: {
+      const { frontComponentUniversalIdentifier, ...rest } =
+        universalConfiguration;
+
+      if (!isDefined(frontComponentUniversalIdentifier)) {
+        throw new FlatEntityMapsException(
+          `Front component universal identifier is required for FRONT_COMPONENT configuration`,
+          FlatEntityMapsExceptionCode.ENTITY_NOT_FOUND,
+        );
+      }
+
+      const flatFrontComponent = findFlatEntityByUniversalIdentifier({
+        flatEntityMaps: flatFrontComponentMaps,
+        universalIdentifier: frontComponentUniversalIdentifier,
+      });
+
+      if (!isDefined(flatFrontComponent)) {
+        throw new FlatEntityMapsException(
+          `Front component not found for universal identifier: ${frontComponentUniversalIdentifier}`,
+          FlatEntityMapsExceptionCode.ENTITY_NOT_FOUND,
+        );
+      }
+
+      return {
+        ...rest,
+        frontComponentId: flatFrontComponent.id,
+      };
+    }
+
     case WidgetConfigurationType.VIEW:
     case WidgetConfigurationType.FIELD:
     case WidgetConfigurationType.TIMELINE:
@@ -322,7 +353,6 @@ export const fromUniversalConfigurationToFlatPageLayoutWidgetConfiguration = ({
     case WidgetConfigurationType.WORKFLOW:
     case WidgetConfigurationType.WORKFLOW_VERSION:
     case WidgetConfigurationType.WORKFLOW_RUN:
-    case WidgetConfigurationType.FRONT_COMPONENT:
     case WidgetConfigurationType.IFRAME:
     case WidgetConfigurationType.STANDALONE_RICH_TEXT:
       return universalConfiguration;

packages/twenty-shared/src/types/page-layout/page-layout-widget-configuration.type.ts

@@ -125,7 +125,7 @@ export type IframeConfiguration = {
 
 export type FrontComponentConfiguration = {
   configurationType: 'FRONT_COMPONENT';
-  frontComponentId: string;
+  frontComponentId: SerializedRelation;
 };
 
 export type TimelineConfiguration = {