feat: add optional id in action form fields

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

@@ -88,6 +88,11 @@ export default (collection: CardCustomizer) =>
           defaultValue: 80,
           if: ctx => ['Gold'].includes(ctx.formValues.Plan),
         },
+        {
+          type: 'Number',
+          id: 'test-price',
+          label: 'price',
+        },
         { type: 'Layout', component: 'Separator' },
         { type: 'Layout', component: 'HtmlBlock', content: '<h3>constraints:</h3>' },
         {

packages/agent/src/utils/forest-schema/action-values.ts

@@ -19,7 +19,7 @@ export default class ForestValueConverter {
     const data = {};
 
     for (const [key, value] of Object.entries(rawData)) {
-      const field = fields.find(f => f.label === key);
+      const field = fields.find(f => f.id === key);
 
       // Skip fields from the default form
       if (!SchemaGeneratorActions.defaultFields.map(f => f.field).includes(key)) {

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

@@ -29,6 +29,7 @@ export default class SchemaGeneratorActions {
   static defaultFields: ForestServerActionField[] = [
     {
       field: 'Loading...',
+      label: 'Loading...',
       type: 'String',
       isReadOnly: true,
       defaultValue: 'Form is loading',
@@ -98,10 +99,9 @@ export default class SchemaGeneratorActions {
 
   /** Build schema for given field */
   static buildFieldSchema(dataSource: DataSource, field: ActionField): ForestServerActionField {
-    const { label, description, isRequired, isReadOnly, watchChanges, type } = field;
-    const output = { description, isRequired, isReadOnly } as Record<string, unknown>;
+    const { id, label, description, isRequired, isReadOnly, watchChanges, type } = field;
+    const output = { id, label, description, isRequired, isReadOnly } as Record<string, unknown>;
 
-    output.field = label;
     output.value = ForestValueConverter.valueToForest(field, field.value);
 
     if (watchChanges) output.hook = 'changeHook';
@@ -215,7 +215,7 @@ export default class SchemaGeneratorActions {
     return {
       type: 'Layout',
       component: 'Input',
-      fieldId: element.label,
+      fieldId: element.id,
     };
   }
 }

packages/datasource-customizer/src/decorators/actions/collection.ts

@@ -16,8 +16,9 @@ import ActionContextSingle from './context/single';
 import ResultBuilder from './result-builder';
 import { ActionBulk, ActionDefinition, ActionGlobal, ActionSingle } from './types/actions';
 import {
-  DynamicField,
+  DynamicFieldWithId,
   DynamicFormElement,
+  DynamicFormElementWithId,
   Handler,
   SearchOptionsHandler,
   ValueOrHandler,
@@ -88,10 +89,13 @@ export default class ActionCollectionDecorator extends CollectionDecorator {
       ];
     }
 
-    dynamicFields = await this.dropDefaults(context, dynamicFields, formValues);
-    if (!metas?.includeHiddenFields) dynamicFields = await this.dropIfs(context, dynamicFields);
+    let dynamicFieldsWithId = await this.dropDefaultsAndSetId(context, dynamicFields, formValues);
 
-    const fields = await this.dropDeferred(context, metas?.searchValues, dynamicFields);
+    if (!metas?.includeHiddenFields) {
+      dynamicFieldsWithId = await this.dropIfs(context, dynamicFieldsWithId);
+    }
+
+    const fields = await this.dropDeferred(context, metas?.searchValues, dynamicFieldsWithId);
 
     this.setWatchChangesOnFields(formValues, used, fields);
 
@@ -164,18 +168,20 @@ export default class ActionCollectionDecorator extends CollectionDecorator {
     );
   }
 
-  private async dropDefaults(
+  private async dropDefaultsAndSetId(
     context: ActionContext,
     fields: DynamicFormElement[],
     data: Record<string, unknown>,
-  ): Promise<DynamicFormElement[]> {
+  ): Promise<DynamicFormElementWithId[]> {
     const promises = fields.map(async field => {
       if (field.type !== 'Layout') {
-        return this.dropDefault(context, field, data);
+        field.id = field.id || field.label;
+
+        return this.dropDefault(context, field as DynamicFieldWithId, data);
       }
 
       await this.executeOnSubFields(field, subfields =>
-        this.dropDefaults(context, subfields, data),
+        this.dropDefaultsAndSetId(context, subfields, data),
       );
 
       return field;
@@ -186,12 +192,12 @@ export default class ActionCollectionDecorator extends CollectionDecorator {
 
   private async dropDefault(
     context: ActionContext,
-    field: DynamicField,
+    field: DynamicFieldWithId,
     data: Record<string, unknown>,
-  ): Promise<DynamicField> {
-    if (data[field.label] === undefined) {
+  ): Promise<DynamicFieldWithId> {
+    if (data[field.id] === undefined) {
       const defaultValue = await this.evaluate(context, null, field.defaultValue);
-      data[field.label] = defaultValue;
+      data[field.id] = defaultValue;
     }
 
     delete field.defaultValue;
@@ -201,8 +207,8 @@ export default class ActionCollectionDecorator extends CollectionDecorator {
 
   private async dropIfs(
     context: ActionContext,
-    fields: DynamicFormElement[],
-  ): Promise<DynamicFormElement[]> {
+    fields: DynamicFormElementWithId[],
+  ): Promise<DynamicFormElementWithId[]> {
     // Remove fields which have falsy if
     const ifValues = await Promise.all(
       fields.map(async field => {
@@ -235,7 +241,7 @@ export default class ActionCollectionDecorator extends CollectionDecorator {
   private async dropDeferred(
     context: ActionContext,
     searchValues: Record<string, string | null> | null,
-    fields: DynamicFormElement[],
+    fields: DynamicFormElementWithId[],
   ): Promise<ActionFormElement[]> {
     const newFields = fields.map(async (field): Promise<ActionFormElement> => {
       await this.executeOnSubFields(field, subfields =>
@@ -245,7 +251,7 @@ export default class ActionCollectionDecorator extends CollectionDecorator {
       const keys = Object.keys(field);
       const values = await Promise.all(
         Object.values(field).map(value => {
-          const searchValue = field.type === 'Layout' ? null : searchValues?.[field.label];
+          const searchValue = field.type === 'Layout' ? null : searchValues?.[field.id];
 
           return this.evaluate(context, searchValue, value);
         }),
@@ -291,10 +297,10 @@ export default class ActionCollectionDecorator extends CollectionDecorator {
   ) {
     if (field.type !== 'Layout') {
       // customer did not define a handler to rewrite the previous value => reuse current one.
-      if (field.value === undefined) field.value = formValues[field.label];
+      if (field.value === undefined) field.value = formValues[field.id];
 
       // fields that were accessed through the context.formValues.X getter should be watched.
-      field.watchChanges = used.has(field.label);
+      field.watchChanges = used.has(field.id);
     }
 
     return field;

packages/datasource-customizer/src/decorators/actions/types/fields.ts

@@ -22,6 +22,7 @@ export type ValueOrHandler<Context = unknown, Result = unknown> =
 
 type BaseDynamicField<Type, Context, Result> = {
   type: Type;
+  id?: string;
   label: string;
   description?: ValueOrHandler<Context, string>;
   isRequired?: ValueOrHandler<Context, boolean>;
@@ -268,3 +269,9 @@ export type DynamicLayoutElement<Context = unknown> =
 export type DynamicFormElement<Context = unknown> =
   | DynamicField<Context>
   | DynamicLayoutElement<Context>;
+
+export type DynamicFieldWithId<Context = unknown> = DynamicField<Context> & { id: string };
+
+export type DynamicFormElementWithId<Context = unknown> =
+  | DynamicFieldWithId<Context>
+  | DynamicLayoutElement<Context>;

packages/datasource-toolkit/src/interfaces/action.ts

@@ -26,6 +26,7 @@ export type ActionFormElementBase = {
 export interface ActionFieldBase extends ActionFormElementBase {
   type: ActionFieldType;
   widget?: ActionFieldWidget;
+  id: string;
   label: string;
   description?: string;
   isRequired?: boolean;

packages/forestadmin-client/src/schema/types.ts

@@ -69,6 +69,7 @@ export type ForestServerActionFieldCommon<
   defaultValue: unknown;
   description: string | null;
   field: string;
+  label: string;
   hook: string;
   isReadOnly: boolean;
   isRequired: boolean;

packages/plugin-export-advanced/test/index.test.ts

@@ -77,20 +77,23 @@ describe('plugin-export-advanced', () => {
 
       expect(form).toEqual([
         {
+          id: 'Filename',
           label: 'Filename',
           type: 'String',
           value: `books - ${new Date().toISOString().substring(0, 10)}`,
           watchChanges: false,
         },
         {
           enumValues: ['.csv', '.xlsx', '.json'],
+          id: 'Format',
           label: 'Format',
           type: 'Enum',
           value: '.csv',
           watchChanges: false,
         },
         {
           enumValues: ['id', 'title', 'author:id', 'author:fullname'],
+          id: 'Fields',
           label: 'Fields',
           type: 'EnumList',
           value: ['id', 'title', 'author:id', 'author:fullname'],