Seed Front Components (#19220)

https://github.com/user-attachments/assets/6b0887e8-8ba4-49c9-9371-e3db3e9fdde8
2026-04-02 13:20:08 +02:00
parent 268543a08e
commit 885ab8b444
20 changed files with 1087 additions and 275 deletions
@@ -0,0 +1,129 @@
+import crypto from 'crypto';
+
+import { Injectable } from '@nestjs/common';
+
+import { FileFolder } from 'twenty-shared/types';
+import { isDefined } from 'twenty-shared/utils';
+
+import { ApplicationService } from 'src/engine/core-modules/application/application.service';
+import { FileStorageService } from 'src/engine/core-modules/file-storage/file-storage.service';
+import { WorkspaceManyOrAllFlatEntityMapsCacheService } from 'src/engine/metadata-modules/flat-entity/services/workspace-many-or-all-flat-entity-maps-cache.service';
+import { findFlatEntityByIdInFlatEntityMaps } from 'src/engine/metadata-modules/flat-entity/utils/find-flat-entity-by-id-in-flat-entity-maps.util';
+import { FrontComponentService } from 'src/engine/metadata-modules/front-component/front-component.service';
+import {
+  type FrontComponentSeedProjectFile,
+  getFrontComponentSeedProjectFiles,
+} from 'src/engine/metadata-modules/front-component/utils/get-front-component-seed-project-files.util';
+import { type SeedFrontComponentDefinition } from 'src/engine/workspace-manager/standard-objects-prefill-data/utils/prefill-front-component-definitions.util';
+
+@Injectable()
+export class PrefillFrontComponentService {
+  constructor(
+    private readonly frontComponentService: FrontComponentService,
+    private readonly flatEntityMapsCacheService: WorkspaceManyOrAllFlatEntityMapsCacheService,
+    private readonly fileStorageService: FileStorageService,
+    private readonly applicationService: ApplicationService,
+  ) {}
+
+  async ensureSeeded({
+    workspaceId,
+    definitions,
+  }: {
+    workspaceId: string;
+    definitions: SeedFrontComponentDefinition[];
+  }) {
+    const { flatFrontComponentMaps } =
+      await this.flatEntityMapsCacheService.getOrRecomputeManyOrAllFlatEntityMaps(
+        {
+          workspaceId,
+          flatMapsKeys: ['flatFrontComponentMaps'],
+        },
+      );
+
+    const { workspaceCustomFlatApplication: ownerFlatApplication } =
+      await this.applicationService.findWorkspaceTwentyStandardAndCustomApplicationOrThrow(
+        { workspaceId },
+      );
+
+    for (const definition of definitions) {
+      const existingFrontComponent = findFlatEntityByIdInFlatEntityMaps({
+        flatEntityId: definition.id,
+        flatEntityMaps: flatFrontComponentMaps,
+      });
+
+      if (isDefined(existingFrontComponent)) {
+        continue;
+      }
+
+      const seedFiles = await getFrontComponentSeedProjectFiles(
+        definition.seedProjectSubdir,
+      );
+
+      const sourceFile = seedFiles.find((file: FrontComponentSeedProjectFile) =>
+        file.name.endsWith('index.tsx'),
+      );
+
+      const builtFile = seedFiles.find((file: FrontComponentSeedProjectFile) =>
+        file.name.endsWith('index.mjs'),
+      );
+
+      if (!isDefined(sourceFile) || !isDefined(builtFile)) {
+        throw new Error(
+          `Seed project for front component "${definition.name}" must have an index.tsx and an index.mjs file`,
+        );
+      }
+
+      const sourceComponentPath = `${definition.id}/index.tsx`;
+      const builtComponentPath = `${definition.id}/index.mjs`;
+
+      await this.fileStorageService.writeFile({
+        workspaceId,
+        applicationUniversalIdentifier:
+          ownerFlatApplication.universalIdentifier,
+        fileFolder: FileFolder.Source,
+        resourcePath: sourceComponentPath,
+        sourceFile: sourceFile.content,
+        mimeType: 'application/typescript',
+        settings: {
+          isTemporaryFile: false,
+          toDelete: false,
+        },
+      });
+
+      await this.fileStorageService.writeFile({
+        workspaceId,
+        applicationUniversalIdentifier:
+          ownerFlatApplication.universalIdentifier,
+        fileFolder: FileFolder.BuiltFrontComponent,
+        resourcePath: builtComponentPath,
+        sourceFile: builtFile.content,
+        mimeType: 'application/javascript',
+        settings: {
+          isTemporaryFile: false,
+          toDelete: false,
+        },
+      });
+
+      const checksum = crypto
+        .createHash('md5')
+        .update(builtFile.content)
+        .digest('hex');
+
+      await this.frontComponentService.createOne({
+        workspaceId,
+        ownerFlatApplication,
+        input: {
+          id: definition.id,
+          universalIdentifier: definition.universalIdentifier,
+          name: definition.name,
+          description: definition.description,
+          componentName: definition.componentName,
+          sourceComponentPath,
+          builtComponentPath,
+          builtComponentChecksum: checksum,
+          isHeadless: definition.isHeadless,
+        },
+      });
+    }
+  }
+}
@@ -1,12 +1,22 @@
 import { Module } from '@nestjs/common';

+import { ApplicationModule } from 'src/engine/core-modules/application/application.module';
+import { FileStorageModule } from 'src/engine/core-modules/file-storage/file-storage.module';
 import { WorkspaceManyOrAllFlatEntityMapsCacheModule } from 'src/engine/metadata-modules/flat-entity/services/workspace-many-or-all-flat-entity-maps-cache.module';
+import { FrontComponentModule } from 'src/engine/metadata-modules/front-component/front-component.module';
 import { LogicFunctionModule } from 'src/engine/metadata-modules/logic-function/logic-function.module';
+import { PrefillFrontComponentService } from 'src/engine/workspace-manager/standard-objects-prefill-data/services/prefill-front-component.service';
 import { PrefillLogicFunctionService } from 'src/engine/workspace-manager/standard-objects-prefill-data/services/prefill-logic-function.service';

@Module({
-  imports: [LogicFunctionModule, WorkspaceManyOrAllFlatEntityMapsCacheModule],
-  providers: [PrefillLogicFunctionService],
-  exports: [PrefillLogicFunctionService],
+  imports: [
+    LogicFunctionModule,
+    FrontComponentModule,
+    FileStorageModule,
+    ApplicationModule,
+    WorkspaceManyOrAllFlatEntityMapsCacheModule,
+  ],
+  providers: [PrefillLogicFunctionService, PrefillFrontComponentService],
+  exports: [PrefillLogicFunctionService, PrefillFrontComponentService],
 })
 export class StandardObjectsPrefillModule {}
@@ -0,0 +1,72 @@
+import { type EntityManager } from 'typeorm';
+
+import { CommandMenuItemAvailabilityType } from 'src/engine/metadata-modules/command-menu-item/enums/command-menu-item-availability-type.enum';
+import { EngineComponentKey } from 'src/engine/metadata-modules/command-menu-item/enums/engine-component-key.enum';
+import {
+  getSeedFrontComponentCommandMenuItemDefinitions,
+  getSeedFrontComponentIds,
+} from 'src/engine/workspace-manager/standard-objects-prefill-data/utils/prefill-front-component-definitions.util';
+
+export const prefillFrontComponentCommandMenuItems = async (
+  entityManager: EntityManager,
+  workspaceId: string,
+) => {
+  const { helloWorldId } = getSeedFrontComponentIds(workspaceId);
+
+  const frontComponentRow = await entityManager
+    .createQueryBuilder()
+    .select('fc.applicationId', 'applicationId')
+    .from('core.frontComponent', 'fc')
+    .where('fc.id = :id', { id: helloWorldId })
+    .andWhere('fc.workspaceId = :workspaceId', { workspaceId })
+    .getRawOne();
+
+  if (!frontComponentRow) {
+    return;
+  }
+
+  const definitions =
+    getSeedFrontComponentCommandMenuItemDefinitions(workspaceId);
+
+  await entityManager
+    .createQueryBuilder()
+    .insert()
+    .into('core.commandMenuItem', [
+      'workspaceId',
+      'universalIdentifier',
+      'applicationId',
+      'workflowVersionId',
+      'frontComponentId',
+      'engineComponentKey',
+      'label',
+      'icon',
+      'shortLabel',
+      'position',
+      'isPinned',
+      'availabilityType',
+      'conditionalAvailabilityExpression',
+      'availabilityObjectMetadataId',
+      'hotKeys',
+    ])
+    .values(
+      definitions.map((definition) => ({
+        workspaceId,
+        universalIdentifier: definition.universalIdentifier,
+        applicationId: frontComponentRow.applicationId,
+        workflowVersionId: null,
+        frontComponentId: definition.frontComponentId,
+        engineComponentKey: EngineComponentKey.FRONT_COMPONENT_RENDERER,
+        label: definition.label,
+        icon: definition.icon,
+        shortLabel: definition.label,
+        position: definition.position,
+        isPinned: false,
+        availabilityType: CommandMenuItemAvailabilityType.GLOBAL,
+        conditionalAvailabilityExpression: null,
+        availabilityObjectMetadataId: null,
+        hotKeys: null,
+      })),
+    )
+    .orIgnore()
+    .execute();
+};
@@ -0,0 +1,102 @@
+import { v5 as uuidv5 } from 'uuid';
+
+const SEED_FRONT_COMPONENT_ID_NAMESPACE =
+  'e7a3b1c4-f5d6-4e8a-9b2c-3d4e5f6a7b8c';
+
+export type SeedFrontComponentDefinition = {
+  id: string;
+  universalIdentifier: string;
+  name: string;
+  description: string;
+  componentName: string;
+  isHeadless: boolean;
+  usesSdkClient: boolean;
+  seedProjectSubdir: string;
+};
+
+export type SeedFrontComponentCommandMenuItemDefinition = {
+  universalIdentifier: string;
+  frontComponentId: string;
+  label: string;
+  icon: string;
+  position: number;
+};
+
+export const getSeedFrontComponentIds = (workspaceId: string) => ({
+  helloWorldId: uuidv5(
+    `${workspaceId}:seed-front-component:hello-world`,
+    SEED_FRONT_COMPONENT_ID_NAMESPACE,
+  ),
+  showNotificationId: uuidv5(
+    `${workspaceId}:seed-front-component:show-notification`,
+    SEED_FRONT_COMPONENT_ID_NAMESPACE,
+  ),
+});
+
+export const getSeedFrontComponentDefinitions = (
+  workspaceId: string,
+): SeedFrontComponentDefinition[] => {
+  const { helloWorldId, showNotificationId } =
+    getSeedFrontComponentIds(workspaceId);
+
+  return [
+    {
+      id: helloWorldId,
+      universalIdentifier: uuidv5(
+        `${workspaceId}:seed-front-component-uid:hello-world`,
+        SEED_FRONT_COMPONENT_ID_NAMESPACE,
+      ),
+      name: 'Hello World',
+      description:
+        'A sample visual front component that displays execution context',
+      componentName: 'HelloWorld',
+      isHeadless: false,
+      usesSdkClient: false,
+      seedProjectSubdir: 'hello-world',
+    },
+    {
+      id: showNotificationId,
+      universalIdentifier: uuidv5(
+        `${workspaceId}:seed-front-component-uid:show-notification`,
+        SEED_FRONT_COMPONENT_ID_NAMESPACE,
+      ),
+      name: 'Show Notification',
+      description:
+        'A sample headless front component that displays a notification',
+      componentName: 'ShowNotification',
+      isHeadless: true,
+      usesSdkClient: false,
+      seedProjectSubdir: 'show-notification',
+    },
+  ];
+};
+
+export const getSeedFrontComponentCommandMenuItemDefinitions = (
+  workspaceId: string,
+): SeedFrontComponentCommandMenuItemDefinition[] => {
+  const { helloWorldId, showNotificationId } =
+    getSeedFrontComponentIds(workspaceId);
+
+  return [
+    {
+      universalIdentifier: uuidv5(
+        `${workspaceId}:seed-front-component-command:hello-world`,
+        SEED_FRONT_COMPONENT_ID_NAMESPACE,
+      ),
+      frontComponentId: helloWorldId,
+      label: 'Hello World',
+      icon: 'IconAppWindow',
+      position: 200,
+    },
+    {
+      universalIdentifier: uuidv5(
+        `${workspaceId}:seed-front-component-command:show-notification`,
+        SEED_FRONT_COMPONENT_ID_NAMESPACE,
+      ),
+      frontComponentId: showNotificationId,
+      label: 'Show Notification',
+      icon: 'IconBell',
+      position: 201,
+    },
+  ];
+};