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,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,
+    },
+  ];
+};