feat: add row in action forms

packages/_example/src/forest/customizations/card.ts

@@ -1,4 +1,133 @@
 import { CardCustomizer } from '../typings';
 
 export default (collection: CardCustomizer) =>
-  collection.addManyToOneRelation('customer', 'customer', { foreignKey: 'customer_id' });
+  collection
+    .addManyToOneRelation('customer', 'customer', { foreignKey: 'customer_id' })
+    .addAction('create new card', {
+      scope: 'Global',
+      execute: (context, resultBuilder) => {
+        return resultBuilder.success('ok', {
+          html: `test<script type="text/javascript">alert("test")</script>`,
+        });
+      },
+      form: [
+        {
+          type: 'Number',
+          label: 'Customer',
+          widget: 'Dropdown',
+          search: 'dynamic',
+          options: async (ctx, searchValue) => {
+            const results = await ctx.dataSource.getCollection('customer').list(
+              {
+                ...(searchValue
+                  ? {
+                      conditionTree: {
+                        aggregator: 'Or',
+                        conditions: [
+                          { field: 'name', operator: 'Contains', value: searchValue },
+                          { field: 'firstName', operator: 'Contains', value: searchValue },
+                        ],
+                      },
+                    }
+                  : {}),
+              },
+              ['id'],
+            );
+
+            return results.map(({ id }) => id);
+          },
+        },
+        {
+          type: 'String',
+          label: 'Plan',
+          widget: 'Dropdown',
+          options: ['Base', 'Gold', 'Black'],
+        },
+        {
+          type: 'Layout',
+          component: 'HtmlBlock',
+          content: ctx => {
+            switch (ctx.formValues.Plan) {
+              case 'Base':
+                return `<h1>Should setup:</h1>
+                <ul>
+                  <li>separator</li>
+                  <li>price</li>
+                  <li>max withdraw / max payment</li>
+                </ul>`;
+              case 'Gold':
+                return `<h1>Should setup:</h1>
+                <ul>
+                  <li>max payment / Systematic check (if max payment > 1000)</li>
+                  <li>discount / discount months</li>
+                </ul>`;
+              case 'Back':
+                return `<h1>Should setup:</h1>
+                <ul>
+                  <li>max withdraw</li>
+                </ul>`;
+              default:
+                return `Select a card plan`;
+            }
+          },
+        },
+        {
+          type: 'Layout',
+          component: 'Separator',
+          if: ctx => ['Base'].includes(ctx.formValues.Plan),
+        },
+        {
+          type: 'Number',
+          label: 'price',
+          defaultValue: 40,
+          if: ctx => ['Base'].includes(ctx.formValues.Plan),
+        },
+        {
+          type: 'Number',
+          label: 'price',
+          defaultValue: 80,
+          if: ctx => ['Gold'].includes(ctx.formValues.Plan),
+        },
+        { type: 'Layout', component: 'Separator' },
+        { type: 'Layout', component: 'HtmlBlock', content: '<h3>constraints:</h3>' },
+        {
+          type: 'Layout',
+          component: 'Row',
+          fields: [
+            {
+              type: 'Number',
+              label: 'Max withdraw',
+              if: ctx => ['Base', 'Black'].includes(ctx.formValues.Plan),
+            },
+            {
+              type: 'Number',
+              label: 'Max payment',
+              if: ctx => ['Base', 'Gold'].includes(ctx.formValues.Plan),
+            },
+            {
+              type: 'Boolean',
+              label: 'Systematic check',
+              if: ctx =>
+                ['Base', 'Gold'].includes(ctx.formValues.Plan) &&
+                ctx.formValues['Max payment'] > 1000,
+            },
+          ],
+        },
+        {
+          type: 'Layout',
+          component: 'Row',
+          fields: [
+            {
+              type: 'Number',
+              label: 'Discount',
+              if: ctx => ['Gold'].includes(ctx.formValues['display fields']),
+            },
+            {
+              type: 'Number',
+              label: 'Discount months',
+              if: ctx => ['Gold'].includes(ctx.formValues['display fields']),
+            },
+          ],
+        },
+      ],
+    });

packages/agent/src/utils/forest-schema/generator-actions.ts

@@ -5,12 +5,14 @@ import {
   Collection,
   ColumnSchema,
   DataSource,
+  LayoutElementInput,
   PrimitiveTypes,
   SchemaUtils,
 } from '@forestadmin/datasource-toolkit';
 import {
   ForestServerAction,
   ForestServerActionField,
+  ForestServerActionFormElementFieldReference,
   ForestServerActionFormLayoutElement,
 } from '@forestadmin/forestadmin-client';
 import path from 'path';
@@ -126,7 +128,14 @@ export default class SchemaGeneratorActions {
     return output as ForestServerActionField;
   }
 
-  static buildLayoutSchema(element: ActionLayoutElement): ForestServerActionFormLayoutElement {
+  static buildLayoutSchema(
+    element: ActionLayoutElement,
+    options?: { forceInput?: boolean },
+  ): ForestServerActionFormLayoutElement {
+    if (options?.forceInput) {
+      element.component = 'Input';
+    }
+
     switch (element.component) {
       case 'Input':
         return {
@@ -138,6 +147,16 @@ export default class SchemaGeneratorActions {
           component: 'htmlBlock',
           content: element.content,
         };
+      case 'Row':
+        return {
+          component: 'row',
+          fields: element.fields.map(
+            field =>
+              SchemaGeneratorActions.buildLayoutSchema(field, {
+                forceInput: true,
+              }) as ForestServerActionFormElementFieldReference,
+          ),
+        };
       case 'Separator':
       default:
         return {
@@ -159,16 +178,9 @@ export default class SchemaGeneratorActions {
     formElements.forEach(element => {
       if (element.type === 'Layout') {
         hasLayout = true;
-
-        layout.push(element);
-      } else {
-        fields.push(element);
-        layout.push({
-          type: 'Layout',
-          component: 'Input',
-          fieldId: element.label,
-        });
       }
+
+      layout.push(SchemaGeneratorActions.parseLayout(element, fields));
     });
 
     if (!hasLayout) {
@@ -177,4 +189,33 @@ export default class SchemaGeneratorActions {
 
     return { fields, layout };
   }
+
+  private static parseLayout(
+    element: ActionFormElement,
+    allFields: ActionField[],
+  ): ActionLayoutElement {
+    if (element.type === 'Layout') {
+      if (element.component === 'Row') {
+        const fields = element.fields.map(
+          field => SchemaGeneratorActions.parseLayout(field, allFields) as LayoutElementInput,
+        );
+
+        return {
+          type: 'Layout',
+          component: 'Row',
+          fields,
+        };
+      }
+
+      return element;
+    }
+
+    allFields.push(element);
+
+    return {
+      type: 'Layout',
+      component: 'Input',
+      fieldId: element.label,
+    };
+  }
 }

packages/agent/test/utils/forest-schema/generator-actions.test.ts

@@ -133,15 +133,6 @@ describe('SchemaGeneratorActions', () => {
             value: null,
             watchChanges: false,
           },
-          {
-            type: 'Layout',
-            component: 'Separator',
-          },
-          {
-            type: 'Layout',
-            component: 'HtmlBlock',
-            content: 'some text content',
-          },
           {
             label: 'inclusive gender',
             description: 'Choose None, Male, Female or Both',
@@ -313,9 +304,20 @@ describe('SchemaGeneratorActions', () => {
               content: 'some text content',
             },
             {
-              label: 'description',
-              type: 'String',
-              watchChanges: false,
+              type: 'Layout',
+              component: 'Row',
+              fields: [
+                {
+                  label: 'description',
+                  type: 'String',
+                  watchChanges: false,
+                },
+                {
+                  label: 'address',
+                  type: 'String',
+                  watchChanges: false,
+                },
+              ],
             },
           ],
         ),
@@ -327,7 +329,7 @@ describe('SchemaGeneratorActions', () => {
 
       const schema = SchemaGeneratorActions.buildFieldsAndLayout(collection.dataSource, form);
 
-      expect(schema.fields.length).toEqual(2);
+      expect(schema.fields.length).toEqual(3);
       expect(schema.layout).toEqual([
         {
           component: 'input',
@@ -336,8 +338,17 @@ describe('SchemaGeneratorActions', () => {
         { component: 'separator' },
         { component: 'htmlBlock', content: 'some text content' },
         {
-          component: 'input',
-          fieldId: 'description',
+          component: 'row',
+          fields: [
+            {
+              component: 'input',
+              fieldId: 'description',
+            },
+            {
+              component: 'input',
+              fieldId: 'address',
+            },
+          ],
         },
       ]);
     });