feat(dashboard): Add relation field transformation (#3619)

packages/dashboard/src/lib/components/shared/custom-fields-form.tsx

@@ -40,10 +40,9 @@ export function CustomFieldsForm({ entityType, control, formPathPrefix }: Custom
 
     const customFields = useCustomFieldConfig(entityType);
 
-    const getFieldName = (fieldDefName: string) => {
-        return formPathPrefix
-            ? `${formPathPrefix}.customFields.${fieldDefName}`
-            : `customFields.${fieldDefName}`;
+    const getFieldName = (fieldDef: CustomFieldConfig) => {
+        const name = fieldDef.type === 'relation' ? fieldDef.name + 'Id' : fieldDef.name;
+        return formPathPrefix ? `${formPathPrefix}.customFields.${name}` : `customFields.${name}`;
     };
 
     // Group custom fields by tabs
@@ -86,7 +85,7 @@ export function CustomFieldsForm({ entityType, control, formPathPrefix }: Custom
                         key={fieldDef.name}
                         fieldDef={fieldDef}
                         control={control}
-                        fieldName={getFieldName(fieldDef.name)}
+                        fieldName={getFieldName(fieldDef)}
                         getTranslation={getTranslation}
                     />
                 ))}
@@ -112,7 +111,7 @@ export function CustomFieldsForm({ entityType, control, formPathPrefix }: Custom
                                 key={fieldDef.name}
                                 fieldDef={fieldDef}
                                 control={control}
-                                fieldName={getFieldName(fieldDef.name)}
+                                fieldName={getFieldName(fieldDef)}
                                 getTranslation={getTranslation}
                             />
                         ))}

packages/dashboard/src/lib/framework/form-engine/use-generated-form.tsx

@@ -1,5 +1,9 @@
 import { getOperationVariablesFields } from '@/framework/document-introspection/get-document-structure.js';
-import { createFormSchemaFromFields, getDefaultValuesFromFields } from '@/framework/form-engine/form-schema-tools.js';
+import {
+    createFormSchemaFromFields,
+    getDefaultValuesFromFields,
+} from '@/framework/form-engine/form-schema-tools.js';
+import { transformRelationFields } from '@/framework/form-engine/utils.js';
 import { useChannel } from '@/hooks/use-channel.js';
 import { useServerConfig } from '@/hooks/use-server-config.js';
 import type { TypedDocumentNode } from '@graphql-typed-document-node/core';
@@ -54,7 +58,9 @@ export function useGeneratedForm<
         },
         mode: 'onChange',
         defaultValues,
-        values: processedEntity ? setValues(processedEntity) : defaultValues,
+        values: processedEntity
+            ? transformRelationFields(updateFields, setValues(processedEntity))
+            : defaultValues,
     });
     let submitHandler = (event: FormEvent) => {
         event.preventDefault();

packages/dashboard/src/lib/framework/form-engine/utils.ts

@@ -0,0 +1,30 @@
+import { FieldInfo } from '../document-introspection/get-document-structure.js';
+
+export function transformRelationFields<E extends Record<string, any>>(fields: FieldInfo[], entity: E) {
+    const processedEntity = { ...entity } as any;
+
+    for (const field of fields) {
+        if (field.name !== 'customFields' || !field.typeInfo) {
+            continue;
+        }
+
+        if (!entity.customFields || !processedEntity.customFields) {
+            continue;
+        }
+
+        for (const customField of field.typeInfo) {
+            if (customField.type === 'ID') {
+                const relationField = customField.name;
+                const propertyAccessorKey = customField.name.replace(/Id$/, '');
+                const relationValue = entity.customFields[propertyAccessorKey];
+                const relationIdValue = relationValue?.id;
+
+                if (relationIdValue) {
+                    processedEntity.customFields[relationField] = relationIdValue;
+                }
+            }
+        }
+    }
+
+    return processedEntity;
+}

packages/dev-server/test-plugins/reviews/reviews-plugin.ts

@@ -54,7 +54,7 @@ import { ProductReview } from './entities/product-review.entity';
             public: true,
             type: 'relation',
             entity: ProductReview,
-            ui: { tab: 'Reviews', component: 'review-selector-form-input', fullWidth: true },
+            ui: { tab: 'Reviews', fullWidth: true },
             inverseSide: undefined,
         });
         config.customFields.Product.push({