fix: component instance children rendering

apps/web-e2e/src/modules/builder/builder.fixture.ts

@@ -150,7 +150,7 @@ export class BuilderPage extends BasePage {
       await this.page.getByText(`Delete \`${element.name}\``).click()
       await this.clickModalConfirmButton()
 
-      await expect(this.getGlobalProgressBar()).toBeHidden()
+      await this.waitForProgressBar()
       await this.expectNotificationSuccess('Element deleted')
       await this.waitForPage(new RegExp(/^((?!delete\/element).)*$/gm))
 
@@ -168,8 +168,7 @@ export class BuilderPage extends BasePage {
       await expect(deleteElementButton).toBeVisible()
       await deleteElementButton.click()
       await this.clickPopconfirmButton(UiKey.ElementPopconfirmOverlayDelete)
-
-      await expect(this.getGlobalProgressBar()).toBeHidden()
+      await this.waitForProgressBar()
     })
   }
 

apps/web-e2e/src/modules/component/component.data.ts

@@ -26,6 +26,19 @@ export const componentTextElement: ICreateElementSeedData = {
   },
 }
 
+export const componentChildrenContainer: ICreateElementSeedData = {
+  atom: IAtomType.ReactFragment,
+  name: 'Component Children Container',
+  parentElement: 'New Component Root',
+  propsData: {
+    children: typedProp({
+      kind: ITypeKind.CodeMirrorType,
+      type: '010c4f5a-434b-4c3e-a0ed-01eb1f78172a',
+      value: '{{ componentProps.children || "" }}',
+    }),
+  },
+}
+
 export const componentInstanceChild = {
   atom: IAtomType.AntDesignTypographyText,
   name: 'Component Instance Child',

apps/web-e2e/src/modules/component/components.e2e.spec.ts

@@ -6,7 +6,9 @@ import { globalBeforeAll } from '../../setup/before-all'
 import { seedAppData } from '../app/app.data'
 import { elementColA, elementColB, elementColC } from '../builder/builder.data'
 import {
+  COMPONENT_INSTANCE_TEXT,
   COMPONENT_PROP_VALUE,
+  componentChildrenContainer,
   componentInstance,
   componentInstanceChild,
   componentTextElement,
@@ -51,7 +53,10 @@ test('should be able to define api and elements on component', async ({
   await page.openComponentBuilder()
   await page.openComponentPropsTab()
   await page.addComponentProps()
-  await page.createElementTree([componentTextElement])
+  await page.createElementTree([
+    componentTextElement,
+    componentChildrenContainer,
+  ])
 
   await expect(page.getBuilderRenderContainer()).toContainText('text undefined')
 
@@ -77,13 +82,16 @@ test('should be able to create an instance of the component', async ({
   await expect(page.getBuilderRenderContainer()).toContainText(
     `text ${COMPONENT_PROP_VALUE}`,
   )
+  await expect(page.getBuilderRenderContainer()).toContainText(
+    COMPONENT_INSTANCE_TEXT,
+  )
 })
 
 test('should be able to delete component elements', async ({
   componentListPage: page,
 }) => {
   await page.openComponentBuilder()
-  await page.openPropsTab()
+  await page.openNodeTab()
   await page.checkRootElementExists()
   await page.createElementTree([
     { ...elementColA, parentElement: 'New Component Root' },

apps/web-e2e/src/modules/google-fonts/google-fonts.fixture.ts

@@ -20,6 +20,7 @@ export class GoogleFontsPage extends CssBuilderPage {
       await this.page.locator('.ant-select-item-option-active').hover()
       await this.scrollUntilElementIsVisible(fontLazyOption)
       await this.page.locator(`.ant-select-item[title="${FONT_NAME}"]`).click()
+      await this.waitForProgressBar()
       await this.page.locator('div[id="fonts.0.value.weight"]').click()
       await this.page.locator(`.ant-select-item[title="${FONT_SIZE}"]`).click()
       await this.waitForProgressBar()

libs/frontend/domain/type/src/store/code-mirror-type.model.ts

@@ -53,7 +53,18 @@ export class CodeMirrorType
   }
 
   toJsonSchema(context: ITypeTransformContext): JsonSchema {
-    return typedPropSchema(this, { component: CodeMirrorField }, context)
+    return typedPropSchema(
+      this,
+      { component: CodeMirrorField },
+      {
+        ...context,
+        // pass empty valueSchema to override the default "string" filed type.
+        // code-mirror type field supports expressions, and those can evauluate to any type.
+        // for example, most of the atoms have "children" propery of code-mirror type,
+        // and by using expressions users can specify whatever they want there
+        valueSchema: {} as unknown as JsonSchema,
+      },
+    )
   }
 
   @modelAction

libs/frontend/presentation/components/interface-form/src/interface-form/tests/schema.data.ts

@@ -133,11 +133,32 @@ export const richTextTypeExpectedSchema = {
 }
 
 export const codeMirrorTypeExpectedSchema = {
-  ...createTypedPropTypeExpectedSchema(
-    codeMirrorType.kind,
-    { component: CodeMirrorField },
-    codeMirrorType.id,
-  ),
+  label: '',
+  properties: {
+    __isTypedProp: {
+      default: true,
+      type: 'boolean',
+      uniforms: { component: HiddenField },
+    },
+    kind: {
+      default: codeMirrorType.kind,
+      enum: [codeMirrorType.kind],
+      type: 'string',
+      uniforms: { component: HiddenField },
+    },
+    type: {
+      default: codeMirrorType.id,
+      enum: [codeMirrorType.id],
+      type: 'string',
+      uniforms: { component: HiddenField },
+    },
+    value: {
+      label: '',
+      uniforms: { component: CodeMirrorField },
+    },
+  },
+  required: ['type', 'kind'],
+  type: 'object',
 }
 
 export const elementTypeExpectedSchema = {