Front Extensibility: Introduce Front Component Entity (#17175)

As part of the extensibility effort, we are introducing a new engine entity called "Front Component". This represents a dynamic react component that will be rendered in CommandMenu actions or in PageLayout widgets This PR introduce the entity and all the necessary boilerplate to make it syncable and cachable in the engine
2026-01-16 17:23:46 +01:00
parent fe0d84c97e
commit 5fc4e810f7
68 changed files with 2042 additions and 5 deletions
@@ -18,6 +18,7 @@ import { WorkspaceMigrationAgentActionsBuilderService } from 'src/engine/workspa
 import { WorkspaceMigrationCronTriggerActionsBuilderService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/builders/cron-trigger/workspace-migration-cron-trigger-action-builder.service';
 import { WorkspaceMigrationDatabaseEventTriggerActionsBuilderService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/builders/database-event-trigger/workspace-migration-database-event-trigger-actions-builder.service';
 import { WorkspaceMigrationFieldActionsBuilderService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/builders/field/workspace-migration-field-actions-builder.service';
+import { WorkspaceMigrationFrontComponentActionsBuilderService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/builders/front-component/workspace-migration-front-component-actions-builder.service';
 import { WorkspaceMigrationIndexActionsBuilderService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/builders/index/workspace-migration-index-actions-builder.service';
 import { WorkspaceMigrationObjectActionsBuilderService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/builders/object/workspace-migration-object-actions-builder.service';
 import { WorkspaceMigrationPageLayoutTabActionsBuilderService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/builders/page-layout-tab/workspace-migration-page-layout-tab-actions-builder.service';
@@ -60,6 +61,7 @@ export class WorkspaceMigrationBuildOrchestratorService {
    private readonly workspaceMigrationPageLayoutTabActionsBuilderService: WorkspaceMigrationPageLayoutTabActionsBuilderService,
    private readonly workspaceMigrationRowLevelPermissionPredicateActionsBuilderService: WorkspaceMigrationRowLevelPermissionPredicateActionsBuilderService,
    private readonly workspaceMigrationRowLevelPermissionPredicateGroupActionsBuilderService: WorkspaceMigrationRowLevelPermissionPredicateGroupActionsBuilderService,
+    private readonly workspaceMigrationFrontComponentActionsBuilderService: WorkspaceMigrationFrontComponentActionsBuilderService,
  ) {}

  private setupOptimisticCache({
@@ -159,6 +161,7 @@ export class WorkspaceMigrationBuildOrchestratorService {
      flatPageLayoutMaps,
      flatPageLayoutWidgetMaps,
      flatPageLayoutTabMaps,
+      flatFrontComponentMaps,
    } = fromToAllFlatEntityMaps;

    if (isDefined(flatObjectMetadataMaps)) {
@@ -928,6 +931,39 @@ export class WorkspaceMigrationBuildOrchestratorService {
      }
    }

+    if (isDefined(flatFrontComponentMaps)) {
+      const { from: fromFlatFrontComponentMaps, to: toFlatFrontComponentMaps } =
+        flatFrontComponentMaps;
+
+      const frontComponentResult =
+        await this.workspaceMigrationFrontComponentActionsBuilderService.validateAndBuild(
+          {
+            additionalCacheDataMaps,
+            from: fromFlatFrontComponentMaps,
+            to: toFlatFrontComponentMaps,
+            buildOptions,
+            dependencyOptimisticFlatEntityMaps: undefined,
+            workspaceId,
+          },
+        );
+
+      this.mergeFlatEntityMapsAndRelatedFlatEntityMapsInAllFlatEntityMapsThroughMutation(
+        {
+          allFlatEntityMaps: optimisticAllFlatEntityMaps,
+          flatEntityMapsAndRelatedFlatEntityMaps:
+            frontComponentResult.optimisticFlatEntityMapsAndRelatedFlatEntityMaps,
+        },
+      );
+
+      if (frontComponentResult.status === 'fail') {
+        orchestratorFailureReport.frontComponent.push(
+          ...frontComponentResult.errors,
+        );
+      } else {
+        orchestratorActionsReport.frontComponent = frontComponentResult.actions;
+      }
+    }
+
    const allErrors = Object.values(orchestratorFailureReport);

    if (allErrors.some((report) => report.length > 0)) {
@@ -1069,6 +1105,12 @@ export class WorkspaceMigrationBuildOrchestratorService {
          ...aggregatedOrchestratorActionsReport.rowLevelPermissionPredicate
            .update,
          ///
+
+          // Front components
+          ...aggregatedOrchestratorActionsReport.frontComponent.delete,
+          ...aggregatedOrchestratorActionsReport.frontComponent.create,
+          ...aggregatedOrchestratorActionsReport.frontComponent.update,
+          ///
        ],
        workspaceId,
      },
@@ -0,0 +1,12 @@
+import { type BaseCreateWorkspaceMigrationAction } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/types/base-create-workspace-migration-action.type';
+import { type BaseDeleteWorkspaceMigrationAction } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/types/base-delete-workspace-migration-action.type';
+import { type BaseUpdateWorkspaceMigrationAction } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/types/base-update-workspace-migration-action.type';
+
+export type CreateFrontComponentAction =
+  BaseCreateWorkspaceMigrationAction<'frontComponent'>;
+
+export type UpdateFrontComponentAction =
+  BaseUpdateWorkspaceMigrationAction<'frontComponent'>;
+
+export type DeleteFrontComponentAction =
+  BaseDeleteWorkspaceMigrationAction<'frontComponent'>;
@@ -0,0 +1,116 @@
+import { Injectable } from '@nestjs/common';
+
+import { ALL_METADATA_NAME } from 'twenty-shared/metadata';
+
+import { UpdateFrontComponentAction } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/builders/front-component/types/workspace-migration-front-component-action.type';
+import { WorkspaceEntityMigrationBuilderService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/services/workspace-entity-migration-builder.service';
+import { FlatEntityUpdateValidationArgs } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/types/flat-entity-update-validation-args.type';
+import { FlatEntityValidationArgs } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/types/flat-entity-validation-args.type';
+import { FlatEntityValidationReturnType } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/types/flat-entity-validation-result.type';
+import { FlatFrontComponentValidatorService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/validators/services/flat-front-component-validator.service';
+
+@Injectable()
+export class WorkspaceMigrationFrontComponentActionsBuilderService extends WorkspaceEntityMigrationBuilderService<
+  typeof ALL_METADATA_NAME.frontComponent
+> {
+  constructor(
+    private readonly flatFrontComponentValidatorService: FlatFrontComponentValidatorService,
+  ) {
+    super(ALL_METADATA_NAME.frontComponent);
+  }
+
+  protected validateFlatEntityCreation(
+    args: FlatEntityValidationArgs<typeof ALL_METADATA_NAME.frontComponent>,
+  ): FlatEntityValidationReturnType<
+    typeof ALL_METADATA_NAME.frontComponent,
+    'create'
+  > {
+    const validationResult =
+      this.flatFrontComponentValidatorService.validateFlatFrontComponentCreation(
+        args,
+      );
+
+    if (validationResult.errors.length > 0) {
+      return {
+        status: 'fail',
+        ...validationResult,
+      };
+    }
+
+    const { flatEntityToValidate: flatFrontComponentToValidate } = args;
+
+    return {
+      status: 'success',
+      action: {
+        type: 'create',
+        metadataName: 'frontComponent',
+        flatEntity: flatFrontComponentToValidate,
+      },
+    };
+  }
+
+  protected validateFlatEntityDeletion(
+    args: FlatEntityValidationArgs<typeof ALL_METADATA_NAME.frontComponent>,
+  ): FlatEntityValidationReturnType<
+    typeof ALL_METADATA_NAME.frontComponent,
+    'delete'
+  > {
+    const validationResult =
+      this.flatFrontComponentValidatorService.validateFlatFrontComponentDeletion(
+        args,
+      );
+
+    if (validationResult.errors.length > 0) {
+      return {
+        status: 'fail',
+        ...validationResult,
+      };
+    }
+
+    const { flatEntityToValidate: flatFrontComponentToValidate } = args;
+
+    return {
+      status: 'success',
+      action: {
+        type: 'delete',
+        metadataName: 'frontComponent',
+        entityId: flatFrontComponentToValidate.id,
+      },
+    };
+  }
+
+  protected validateFlatEntityUpdate(
+    args: FlatEntityUpdateValidationArgs<
+      typeof ALL_METADATA_NAME.frontComponent
+    >,
+  ): FlatEntityValidationReturnType<
+    typeof ALL_METADATA_NAME.frontComponent,
+    'update'
+  > {
+    const validationResult =
+      this.flatFrontComponentValidatorService.validateFlatFrontComponentUpdate(
+        args,
+      );
+
+    if (validationResult.errors.length > 0) {
+      return {
+        status: 'fail',
+        ...validationResult,
+      };
+    }
+
+    const { flatEntityId, flatEntityUpdates } = args;
+
+    const updateFrontComponentAction: UpdateFrontComponentAction = {
+      type: 'update',
+      metadataName: 'frontComponent',
+      entityId: flatEntityId,
+      updates: flatEntityUpdates,
+    };
+
+    return {
+      status: 'success',
+      action: updateFrontComponentAction,
+    };
+  }
+}
@@ -0,0 +1,113 @@
+import { Injectable } from '@nestjs/common';
+
+import { msg, t } from '@lingui/core/macro';
+import { isNonEmptyString } from '@sniptt/guards';
+import { ALL_METADATA_NAME } from 'twenty-shared/metadata';
+import { isDefined } from 'twenty-shared/utils';
+
+import { findFlatEntityByIdInFlatEntityMaps } from 'src/engine/metadata-modules/flat-entity/utils/find-flat-entity-by-id-in-flat-entity-maps.util';
+import { FrontComponentExceptionCode } from 'src/engine/metadata-modules/front-component/front-component.exception';
+import { type FailedFlatEntityValidation } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/builders/types/failed-flat-entity-validation.type';
+import { getEmptyFlatEntityValidationError } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/builders/utils/get-flat-entity-validation-error.util';
+import { type FlatEntityUpdateValidationArgs } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/types/flat-entity-update-validation-args.type';
+import { type FlatEntityValidationArgs } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/types/flat-entity-validation-args.type';
+
+@Injectable()
+export class FlatFrontComponentValidatorService {
+  public validateFlatFrontComponentCreation({
+    flatEntityToValidate: flatFrontComponent,
+  }: FlatEntityValidationArgs<
+    typeof ALL_METADATA_NAME.frontComponent
+  >): FailedFlatEntityValidation<'frontComponent', 'create'> {
+    const validationResult = getEmptyFlatEntityValidationError({
+      flatEntityMinimalInformation: {
+        id: flatFrontComponent.id,
+        universalIdentifier: flatFrontComponent.universalIdentifier,
+        name: flatFrontComponent.name,
+      },
+      metadataName: 'frontComponent',
+      type: 'create',
+    });
+
+    if (!isNonEmptyString(flatFrontComponent.name)) {
+      validationResult.errors.push({
+        code: FrontComponentExceptionCode.INVALID_FRONT_COMPONENT_INPUT,
+        message: t`Front component name is required`,
+        userFriendlyMessage: msg`Front component name is required`,
+      });
+    }
+
+    return validationResult;
+  }
+
+  public validateFlatFrontComponentDeletion({
+    flatEntityToValidate,
+    optimisticFlatEntityMapsAndRelatedFlatEntityMaps: {
+      flatFrontComponentMaps: optimisticFlatFrontComponentMaps,
+    },
+  }: FlatEntityValidationArgs<
+    typeof ALL_METADATA_NAME.frontComponent
+  >): FailedFlatEntityValidation<'frontComponent', 'delete'> {
+    const validationResult = getEmptyFlatEntityValidationError({
+      flatEntityMinimalInformation: {
+        id: flatEntityToValidate.id,
+        universalIdentifier: flatEntityToValidate.universalIdentifier,
+        name: flatEntityToValidate.name,
+      },
+      metadataName: 'frontComponent',
+      type: 'delete',
+    });
+
+    const existingFrontComponent = findFlatEntityByIdInFlatEntityMaps({
+      flatEntityId: flatEntityToValidate.id,
+      flatEntityMaps: optimisticFlatFrontComponentMaps,
+    });
+
+    if (!isDefined(existingFrontComponent)) {
+      validationResult.errors.push({
+        code: FrontComponentExceptionCode.FRONT_COMPONENT_NOT_FOUND,
+        message: t`Front component not found`,
+        userFriendlyMessage: msg`Front component not found`,
+      });
+
+      return validationResult;
+    }
+
+    return validationResult;
+  }
+
+  public validateFlatFrontComponentUpdate({
+    flatEntityId,
+    optimisticFlatEntityMapsAndRelatedFlatEntityMaps: {
+      flatFrontComponentMaps: optimisticFlatFrontComponentMaps,
+    },
+  }: FlatEntityUpdateValidationArgs<
+    typeof ALL_METADATA_NAME.frontComponent
+  >): FailedFlatEntityValidation<'frontComponent', 'update'> {
+    const fromFlatFrontComponent = findFlatEntityByIdInFlatEntityMaps({
+      flatEntityId,
+      flatEntityMaps: optimisticFlatFrontComponentMaps,
+    });
+
+    const validationResult = getEmptyFlatEntityValidationError({
+      flatEntityMinimalInformation: {
+        id: flatEntityId,
+        universalIdentifier: fromFlatFrontComponent?.universalIdentifier,
+      },
+      metadataName: 'frontComponent',
+      type: 'update',
+    });
+
+    if (!isDefined(fromFlatFrontComponent)) {
+      validationResult.errors.push({
+        code: FrontComponentExceptionCode.FRONT_COMPONENT_NOT_FOUND,
+        message: t`Front component not found`,
+        userFriendlyMessage: msg`Front component not found`,
+      });
+
+      return validationResult;
+    }
+
+    return validationResult;
+  }
+}
@@ -19,6 +19,7 @@ import { FlatRowLevelPermissionPredicateGroupValidatorService } from 'src/engine
 import { FlatRowLevelPermissionPredicateValidatorService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/validators/services/flat-row-level-permission-predicate-validator.service';
 import { FlatServerlessFunctionValidatorService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/validators/services/flat-serverless-function-validator.service';
 import { FlatSkillValidatorService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/validators/services/flat-skill-validator.service';
+import { FlatFrontComponentValidatorService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/validators/services/flat-front-component-validator.service';
 import { FlatViewFieldValidatorService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/validators/services/flat-view-field-validator.service';
 import { FlatViewFilterGroupValidatorService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/validators/services/flat-view-filter-group-validator.service';
 import { FlatViewFilterValidatorService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/validators/services/flat-view-filter-validator.service';
@@ -51,6 +52,7 @@ import { FlatViewValidatorService } from 'src/engine/workspace-manager/workspace
    FlatPageLayoutTabValidatorService,
    FlatRowLevelPermissionPredicateValidatorService,
    FlatRowLevelPermissionPredicateGroupValidatorService,
+    FlatFrontComponentValidatorService,
  ],
  exports: [
    FlatViewValidatorService,
@@ -75,6 +77,7 @@ import { FlatViewValidatorService } from 'src/engine/workspace-manager/workspace
    FlatPageLayoutTabValidatorService,
    FlatRowLevelPermissionPredicateValidatorService,
    FlatRowLevelPermissionPredicateGroupValidatorService,
+    FlatFrontComponentValidatorService,
  ],
 })
 export class WorkspaceMigrationBuilderValidatorsModule {}
@@ -18,6 +18,7 @@ import { WorkspaceMigrationRowLevelPermissionPredicateGroupActionsBuilderService
 import { WorkspaceMigrationRowLevelPermissionPredicateActionsBuilderService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/builders/row-level-permission-predicate/workspace-migration-row-level-permission-predicate-actions-builder.service';
 import { WorkspaceMigrationServerlessFunctionActionsBuilderService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/builders/serverless-function/workspace-migration-serverless-function-actions-builder.service';
 import { WorkspaceMigrationSkillActionsBuilderService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/builders/skill/workspace-migration-skill-actions-builder.service';
+import { WorkspaceMigrationFrontComponentActionsBuilderService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/builders/front-component/workspace-migration-front-component-actions-builder.service';
 import { WorkspaceMigrationViewFieldActionsBuilderService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/builders/view-field/workspace-migration-view-field-actions-builder.service';
 import { WorkspaceMigrationViewFilterGroupActionsBuilderService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/builders/view-filter-group/workspace-migration-view-filter-group-actions-builder.service';
 import { WorkspaceMigrationViewFilterActionsBuilderService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/builders/view-filter/workspace-migration-view-filter-actions-builder.service';
@@ -50,6 +51,7 @@ import { WorkspaceMigrationBuilderValidatorsModule } from 'src/engine/workspace-
    WorkspaceMigrationPageLayoutTabActionsBuilderService,
    WorkspaceMigrationRowLevelPermissionPredicateActionsBuilderService,
    WorkspaceMigrationRowLevelPermissionPredicateGroupActionsBuilderService,
+    WorkspaceMigrationFrontComponentActionsBuilderService,
  ],
  exports: [
    WorkspaceMigrationViewActionsBuilderService,
@@ -74,6 +76,7 @@ import { WorkspaceMigrationBuilderValidatorsModule } from 'src/engine/workspace-
    WorkspaceMigrationRowLevelPermissionPredicateActionsBuilderService,
    WorkspaceMigrationRowLevelPermissionPredicateGroupActionsBuilderService,
    FlatFieldMetadataTypeValidatorService,
+    WorkspaceMigrationFrontComponentActionsBuilderService,
  ],
 })
 export class WorkspaceMigrationBuilderModule {}
@@ -0,0 +1,40 @@
+import { Injectable } from '@nestjs/common';
+
+import { WorkspaceMigrationRunnerActionHandler } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-runner/interfaces/workspace-migration-runner-action-handler-service.interface';
+
+import { FrontComponentEntity } from 'src/engine/metadata-modules/front-component/entities/front-component.entity';
+import { CreateFrontComponentAction } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/builders/front-component/types/workspace-migration-front-component-action.type';
+import { WorkspaceMigrationActionRunnerArgs } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-runner/types/workspace-migration-action-runner-args.type';
+
+@Injectable()
+export class CreateFrontComponentActionHandlerService extends WorkspaceMigrationRunnerActionHandler(
+  'create',
+  'frontComponent',
+) {
+  constructor() {
+    super();
+  }
+
+  async executeForMetadata(
+    context: WorkspaceMigrationActionRunnerArgs<CreateFrontComponentAction>,
+  ): Promise<void> {
+    const { action, queryRunner, workspaceId } = context;
+    const { flatEntity } = action;
+
+    const frontComponentRepository =
+      queryRunner.manager.getRepository<FrontComponentEntity>(
+        FrontComponentEntity,
+      );
+
+    await frontComponentRepository.insert({
+      ...flatEntity,
+      workspaceId,
+    });
+  }
+
+  async executeForWorkspaceSchema(
+    _context: WorkspaceMigrationActionRunnerArgs<CreateFrontComponentAction>,
+  ): Promise<void> {
+    return;
+  }
+}
@@ -0,0 +1,37 @@
+import { Injectable } from '@nestjs/common';
+
+import { WorkspaceMigrationRunnerActionHandler } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-runner/interfaces/workspace-migration-runner-action-handler-service.interface';
+
+import { FrontComponentEntity } from 'src/engine/metadata-modules/front-component/entities/front-component.entity';
+import { DeleteFrontComponentAction } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/builders/front-component/types/workspace-migration-front-component-action.type';
+import { WorkspaceMigrationActionRunnerArgs } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-runner/types/workspace-migration-action-runner-args.type';
+
+@Injectable()
+export class DeleteFrontComponentActionHandlerService extends WorkspaceMigrationRunnerActionHandler(
+  'delete',
+  'frontComponent',
+) {
+  constructor() {
+    super();
+  }
+
+  async executeForMetadata(
+    context: WorkspaceMigrationActionRunnerArgs<DeleteFrontComponentAction>,
+  ): Promise<void> {
+    const { action, queryRunner, workspaceId } = context;
+    const { entityId } = action;
+
+    const frontComponentRepository =
+      queryRunner.manager.getRepository<FrontComponentEntity>(
+        FrontComponentEntity,
+      );
+
+    await frontComponentRepository.delete({ id: entityId, workspaceId });
+  }
+
+  async executeForWorkspaceSchema(
+    _context: WorkspaceMigrationActionRunnerArgs<DeleteFrontComponentAction>,
+  ): Promise<void> {
+    return;
+  }
+}
@@ -0,0 +1,39 @@
+import { Injectable } from '@nestjs/common';
+
+import { WorkspaceMigrationRunnerActionHandler } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-runner/interfaces/workspace-migration-runner-action-handler-service.interface';
+
+import { FrontComponentEntity } from 'src/engine/metadata-modules/front-component/entities/front-component.entity';
+import { UpdateFrontComponentAction } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-builder/builders/front-component/types/workspace-migration-front-component-action.type';
+import { WorkspaceMigrationActionRunnerArgs } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-runner/types/workspace-migration-action-runner-args.type';
+import { fromFlatEntityPropertiesUpdatesToPartialFlatEntity } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-runner/utils/from-flat-entity-properties-updates-to-partial-flat-entity';
+
+@Injectable()
+export class UpdateFrontComponentActionHandlerService extends WorkspaceMigrationRunnerActionHandler(
+  'update',
+  'frontComponent',
+) {
+  async executeForMetadata(
+    context: WorkspaceMigrationActionRunnerArgs<UpdateFrontComponentAction>,
+  ): Promise<void> {
+    const { action, queryRunner, workspaceId } = context;
+    const { entityId, updates } = action;
+
+    const frontComponentRepository =
+      queryRunner.manager.getRepository<FrontComponentEntity>(
+        FrontComponentEntity,
+      );
+
+    await frontComponentRepository.update(
+      { id: entityId, workspaceId },
+      fromFlatEntityPropertiesUpdatesToPartialFlatEntity({
+        updates,
+      }),
+    );
+  }
+
+  async executeForWorkspaceSchema(
+    _context: WorkspaceMigrationActionRunnerArgs<UpdateFrontComponentAction>,
+  ): Promise<void> {
+    return;
+  }
+}
@@ -48,6 +48,9 @@ import { DeleteServerlessFunctionActionHandlerService } from 'src/engine/workspa
 import { UpdateServerlessFunctionActionHandlerService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-runner/action-handlers/serverless-function/services/update-serverless-function-action-handler.service';
 import { CreateSkillActionHandlerService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-runner/action-handlers/skill/services/create-skill-action-handler.service';
 import { DeleteSkillActionHandlerService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-runner/action-handlers/skill/services/delete-skill-action-handler.service';
+import { CreateFrontComponentActionHandlerService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-runner/action-handlers/front-component/services/create-front-component-action-handler.service';
+import { UpdateFrontComponentActionHandlerService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-runner/action-handlers/front-component/services/update-front-component-action-handler.service';
+import { DeleteFrontComponentActionHandlerService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-runner/action-handlers/front-component/services/delete-front-component-action-handler.service';
 import { UpdateSkillActionHandlerService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-runner/action-handlers/skill/services/update-skill-action-handler.service';
 import { CreateViewFieldActionHandlerService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-runner/action-handlers/view-field/services/create-view-field-action-handler.service';
 import { DeleteViewFieldActionHandlerService } from 'src/engine/workspace-manager/workspace-migration/workspace-migration-runner/action-handlers/view-field/services/delete-view-field-action-handler.service';
@@ -151,6 +154,10 @@ import { UpdateViewActionHandlerService } from 'src/engine/workspace-manager/wor
    CreateRowLevelPermissionPredicateGroupActionHandlerService,
    UpdateRowLevelPermissionPredicateGroupActionHandlerService,
    DeleteRowLevelPermissionPredicateGroupActionHandlerService,
+
+    CreateFrontComponentActionHandlerService,
+    UpdateFrontComponentActionHandlerService,
+    DeleteFrontComponentActionHandlerService,
  ],
 })
 export class WorkspaceSchemaMigrationRunnerActionHandlersModule {}
@@ -68,6 +68,7 @@ export const optimisticallyApplyCreateActionOnAllFlatEntityMaps = <
    case 'skill':
    case 'pageLayout':
    case 'pageLayoutWidget':
+    case 'frontComponent':
    case 'pageLayoutTab': {
      addFlatEntityToFlatEntityAndRelatedEntityMapsThroughMutationOrThrow({
        flatEntity: action.flatEntity,
@@ -45,6 +45,7 @@ export const optimisticallyApplyDeleteActionOnAllFlatEntityMaps = <
    case 'skill':
    case 'pageLayout':
    case 'pageLayoutWidget':
+    case 'frontComponent':
    case 'pageLayoutTab': {
      const flatEntityToDelete = findFlatEntityByIdInFlatEntityMapsOrThrow<
        MetadataFlatEntity<typeof action.metadataName>
@@ -67,7 +67,8 @@ export const optimisticallyApplyUpdateActionOnAllFlatEntityMaps = <
    case 'skill':
    case 'pageLayout':
    case 'pageLayoutWidget':
-    case 'pageLayoutTab': {
+    case 'pageLayoutTab':
+    case 'frontComponent': {
      const flatEntityMapsKey = getMetadataFlatEntityMapsKey(
        action.metadataName,
      );