Admin Generator (Future): Render custom content within forms (#3235)

vivid-planet · Jan 21, 2025 · eb09bd3 · eb09bd3
1 parent a35375d
commit eb09bd3
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 4 deletions.
diff --git a/demo/admin/src/products/future/ProductForm.cometGen.ts b/demo/admin/src/products/future/ProductForm.cometGen.ts
@@ -68,6 +68,7 @@ export const ProductForm: FormConfig<GQLProduct> = {
                 },
                 { type: "boolean", name: "inStock" },
                 { type: "date", name: "availableSince", startAdornment: { icon: "CalendarToday" } },
+                { type: "component", component: { name: "FutureProductNotice", import: "../../helpers/FutureProductNotice" } },
                 { type: "block", name: "image", label: "Image", block: { name: "DamImageBlock", import: "@comet/cms-admin" } },
                 { type: "fileUpload", name: "priceList", label: "Price List", maxFileSize: 1024 * 1024 * 4, download: true },
                 { type: "fileUpload", name: "datasheets", label: "Datasheets", multiple: true, maxFileSize: 1024 * 1024 * 4, download: false },

diff --git a/demo/admin/src/products/future/generated/ProductForm.tsx b/demo/admin/src/products/future/generated/ProductForm.tsx
@@ -40,6 +40,7 @@ import React from "react";
 import { FormSpy } from "react-final-form";
 import { FormattedMessage } from "react-intl";
 
+import { FutureProductNotice } from "../../helpers/FutureProductNotice";
 import { validateTitle } from "../validateTitle";
 import {
     GQLManufacturersSelectQuery,
@@ -407,6 +408,7 @@ export function ProductForm({ id }: FormProps): React.ReactElement {
                                     </InputAdornment>
                                 }
                             />
+                            <FutureProductNotice />
                             <Field
                                 name="image"
                                 isEqual={isEqual}

diff --git a/packages/admin/cms-admin/src/generator/future/generateForm/generateComponentFormField.ts b/packages/admin/cms-admin/src/generator/future/generateForm/generateComponentFormField.ts
@@ -0,0 +1,19 @@
+import { ComponentFormFieldConfig } from "../generator";
+import { Imports } from "../utils/generateImportsCode";
+import { GenerateFieldsReturn } from "./generateFields";
+
+export function generateComponentFormField({ config }: { config: ComponentFormFieldConfig }): GenerateFieldsReturn {
+    const imports: Imports = [{ name: config.component.name, importPath: config.component.import }];
+    const code = `<${config.component.name} />`;
+
+    return {
+        imports,
+        hooksCode: "",
+        formFragmentFields: [],
+        formValueToGqlInputCode: "",
+        formValuesConfig: [],
+        finalFormConfig: undefined,
+        code,
+        gqlDocuments: {},
+    };
+}
diff --git a/packages/admin/cms-admin/src/generator/future/generateForm/generateFields.ts b/packages/admin/cms-admin/src/generator/future/generateForm/generateFields.ts
@@ -2,6 +2,7 @@ import { IntrospectionQuery } from "graphql";
 
 import { FormConfig, GeneratorReturn, isFormFieldConfig, isFormLayoutConfig } from "../generator";
 import { Imports } from "../utils/generateImportsCode";
+import { generateComponentFormField } from "./generateComponentFormField";
 import { generateFormField } from "./generateFormField";
 import { generateFormLayout } from "./generateFormLayout";
 
@@ -27,7 +28,13 @@ export type GenerateFieldsReturn = GeneratorReturn & {
 export function findFieldByName(name: string, fields: FormConfig<any>["fields"]): FormConfig<any>["fields"][0] | undefined {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return fields.reduce<FormConfig<any>["fields"][0] | undefined>((acc, field) => {
-        return acc ? acc : field.name === name ? field : isFormLayoutConfig(field) ? findFieldByName(name, field.fields) : undefined;
+        return acc
+            ? acc
+            : "name" in field && field.name === name
+            ? field
+            : isFormLayoutConfig(field)
+            ? findFieldByName(name, field.fields)
+            : undefined;
     }, undefined);
 }
 
@@ -61,7 +68,12 @@ export function generateFields({
     const code = fields
         .map((field) => {
             let generated: GenerateFieldsReturn;
-            if (isFormFieldConfig(field)) {
+
+            if (field.type === "component") {
+                generated = generateComponentFormField({
+                    config: field,
+                });
+            } else if (isFormFieldConfig(field)) {
                 generated = generateFormField({
                     gqlIntrospection,
                     baseOutputFilename,

diff --git a/packages/admin/cms-admin/src/generator/future/generator.ts b/packages/admin/cms-admin/src/generator/future/generator.ts
@@ -44,6 +44,8 @@ type InputBaseFieldConfig = {
     endAdornment?: Adornment;
 };
 
+export type ComponentFormFieldConfig = { type: "component"; component: ImportReference };
+
 export type FormFieldConfig<T> = (
     | ({ type: "text"; multiline?: boolean } & InputBaseFieldConfig)
     | ({ type: "number" } & InputBaseFieldConfig)
@@ -99,7 +101,7 @@ export type FormLayoutConfig<T> =
           supportText?: string; // can contain field-placeholder
           collapsible?: boolean; // default true
           initiallyExpanded?: boolean; // default false
-          fields: (FormFieldConfig<T> | OptionalNestedFieldsConfig<T>)[];
+          fields: (FormFieldConfig<T> | OptionalNestedFieldsConfig<T> | ComponentFormFieldConfig)[];
       }
     | OptionalNestedFieldsConfig<T>;
 // eslint-disable-next-line  @typescript-eslint/no-explicit-any
@@ -113,7 +115,7 @@ export type FormConfig<T extends { __typename?: string }> = {
     mode?: "edit" | "add" | "all";
     fragmentName?: string;
     createMutation?: string;
-    fields: (FormFieldConfig<T> | FormLayoutConfig<T>)[];
+    fields: (FormFieldConfig<T> | FormLayoutConfig<T> | ComponentFormFieldConfig)[];
 };
 
 export type TabsConfig = { type: "tabs"; tabs: { name: string; content: GeneratorConfig }[] };