Remove support for explicit {name, import} config, support new import…

…s correctly everywhere using convertConfigImport helper

demo/admin/src/news/NewsForm.cometGen.ts

@@ -1,6 +1,8 @@
-import { type future_FormConfig as FormConfig } from "@comet/cms-admin";
+import { type DamImageBlock, type future_FormConfig as FormConfig } from "@comet/cms-admin";
 import { type GQLNews } from "@src/graphql.generated";
 
+import { NewsContentBlock } from "./blocks/NewsContentBlock";
+
 export const NewsForm: FormConfig<GQLNews> = {
     type: "form",
     gqlType: "News",
@@ -36,13 +38,13 @@ export const NewsForm: FormConfig<GQLNews> = {
             type: "block",
             name: "image",
             label: "Image",
-            block: { name: "DamImageBlock", import: "@comet/cms-admin" },
+            block: DamImageBlock,
         },
         {
             type: "block",
             name: "content",
             label: "Content",
-            block: { name: "NewsContentBlock", import: "../blocks/NewsContentBlock" },
+            block: NewsContentBlock,
         },
     ],
 };

demo/admin/src/news/NewsGrid.cometGen.ts

@@ -1,6 +1,8 @@
-import { type future_GridConfig as GridConfig } from "@comet/cms-admin";
+import { type DamImageBlock, type future_GridConfig as GridConfig } from "@comet/cms-admin";
 import { type GQLNews } from "@src/graphql.generated";
 
+import { NewsContentBlock } from "./blocks/NewsContentBlock";
+
 export const NewsGrid: GridConfig<GQLNews> = {
     type: "grid",
     gqlType: "News",
@@ -26,13 +28,13 @@ export const NewsGrid: GridConfig<GQLNews> = {
             type: "block",
             name: "image",
             headerName: "Image",
-            block: { name: "DamImageBlock", import: "@comet/cms-admin" },
+            block: DamImageBlock,
         },
         {
             type: "block",
             name: "content",
             headerName: "Content",
-            block: { name: "NewsContentBlock", import: "../blocks/NewsContentBlock" },
+            block: NewsContentBlock,
         },
     ],
 };

demo/admin/src/products/ProductsGridPreviewAction.tsx

@@ -9,12 +9,17 @@ import {
     Typography,
 } from "@mui/material";
 import { type GridCellParams, type GridValidRowModel } from "@mui/x-data-grid-pro";
-import { type GQLProductsGridFutureFragment } from "@src/products/future/generated/ProductsGrid.generated";
-import { type GQLProductsListManualFragment } from "@src/products/ProductsGrid.generated";
+import { FormattedMessage } from "react-intl";
+
+import { Dialog, DialogContent, DialogTitle, IconButton, Typography } from "@mui/material";
+import { GridCellParams } from "@mui/x-data-grid-pro";
 import { useState } from "react";
 import { FormattedMessage } from "react-intl";
 
-type Props = GridCellParams<GridValidRowModel, GQLProductsListManualFragment | GQLProductsGridFutureFragment>;
+import { GQLProductsGridFutureFragment } from "./future/generated/ProductsGrid.generated";
+import { GQLProductsListManualFragment } from "./ProductsGrid.generated";
+
+type Props = GridCellParams<unknown, GQLProductsListManualFragment | GQLProductsGridFutureFragment>;
 
 export const ProductsGridPreviewAction = ({ row }: Props) => {
     const [showDetails, setShowDetails] = useState(false);

demo/admin/src/products/future/CreateCapProductForm.cometGen.ts

@@ -1,6 +1,8 @@
-import { type future_FormConfig as FormConfig } from "@comet/cms-admin";
+import { type DamImageBlock, type future_FormConfig as FormConfig } from "@comet/cms-admin";
 import { type GQLProduct } from "@src/graphql.generated";
 
+import { validateTitle } from "./validateTitle";
+
 export const CreateCapProductForm: FormConfig<GQLProduct> = {
     type: "form",
     gqlType: "Product",
@@ -12,13 +14,13 @@ export const CreateCapProductForm: FormConfig<GQLProduct> = {
             name: "title",
             label: "Titel", // default is generated from name (camelCaseToHumanReadable)
             required: true, // default is inferred from gql schema
-            validate: { name: "validateTitle", import: "./validateTitle" },
+            validate: validateTitle,
         },
         { type: "text", name: "slug" },
         { type: "text", name: "description", label: "Description", multiline: true },
         { type: "asyncSelect", name: "category", rootQuery: "productCategories" },
         { type: "boolean", name: "inStock" },
         { type: "date", name: "availableSince", startAdornment: { icon: "CalendarToday" } },
-        { type: "block", name: "image", label: "Image", block: { name: "DamImageBlock", import: "@comet/cms-admin" } },
+        { type: "block", name: "image", label: "Image", block: DamImageBlock },
     ],
 };

demo/admin/src/products/future/ProductForm.cometGen.ts → demo/admin/src/products/future/ProductForm.cometGen.tsx

@@ -1,5 +1,8 @@
 import { DamImageBlock, type future_FormConfig as FormConfig } from "@comet/cms-admin";
 import { type GQLProduct } from "@src/graphql.generated";
+import { FormattedMessage } from "react-intl";
+
+import { FutureProductNotice } from "../helpers/FutureProductNotice";
 
 export const ProductForm: FormConfig<GQLProduct> = {
     type: "form",
@@ -18,8 +21,10 @@ export const ProductForm: FormConfig<GQLProduct> = {
                     name: "title",
                     label: "Titel", // default is generated from name (camelCaseToHumanReadable)
                     required: true, // default is inferred from gql schema
-                    //validate: { name: "validateTitle", import: "./validateTitle" },
-                    validate: (value: string) => (value.length < 3 ? "Title must be at least 3 characters long" : undefined),
+                    validate: (value: string) =>
+                        value.length < 3 ? (
+                            <FormattedMessage id="product.validate.titleMustBe3CharsLog" defaultMessage="Title must be at least 3 characters long" />
+                        ) : undefined,
                 },
                 { type: "text", name: "slug" },
                 { type: "date", name: "createdAt", label: "Created", readOnly: true },
@@ -69,7 +74,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: "component", component: FutureProductNotice },
                 { type: "block", name: "image", label: "Image", block: DamImageBlock },
                 { 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 },

demo/admin/src/products/future/ProductsGrid.cometGen.tsx

@@ -1,6 +1,8 @@
 import { type future_GridConfig as GridConfig } from "@comet/cms-admin";
 import { type GQLProduct } from "@src/graphql.generated";
 
+import { ProductsGridPreviewAction } from "../ProductsGridPreviewAction";
+import { ManufacturerFilterOperators } from "./ManufacturerFilter";
 import { ProductTitle } from "./ProductTitle";
 
 const typeValues = [{ value: "Cap", label: "great Cap" }, "Shirt", "Tie"];
@@ -112,11 +114,11 @@ export const ProductsGrid: GridConfig<GQLProduct> = {
             name: "manufacturer.name",
             headerName: "Manufacturer",
             fieldName: "manufacturer",
-            filterOperators: { name: "ManufacturerFilterOperators", import: "./ManufacturerFilter" },
+            filterOperators: ManufacturerFilterOperators,
         },
         {
             type: "actions",
-            component: { name: "ProductsGridPreviewAction", import: "../../ProductsGridPreviewAction" },
+            component: ProductsGridPreviewAction,
         },
     ],
 };

demo/admin/src/products/future/generated/ProductForm.tsx

@@ -212,7 +212,14 @@ export function ProductForm({ id }: FormProps) {
                                 fullWidth
                                 name="title"
                                 label={<FormattedMessage id="product.title" defaultMessage="Titel" />}
-                                validate={(value: string) => (value.length < 3 ? "Title must be at least 3 characters long" : undefined)}
+                                validate={(value: string) =>
+                                    value.length < 3 ? (
+                                        <FormattedMessage
+                                            id="product.validate.titleMustBe3CharsLog"
+                                            defaultMessage="Title must be at least 3 characters long"
+                                        />
+                                    ) : undefined
+                                }
                             />
 
                             <TextField

packages/admin/cms-admin/src/generator/future/generateForm.ts

@@ -10,6 +10,7 @@ import {
     isFormFieldConfig,
     isFormLayoutConfig,
 } from "./generator";
+import { convertConfigImport } from "./utils/convertConfigImport";
 import { findMutationTypeOrThrow } from "./utils/findMutationType";
 import { generateImportsCode, type Imports } from "./utils/generateImportsCode";
 
@@ -109,10 +110,8 @@ export function generateForm(
         });
     rootBlockFields.forEach((field) => {
         if ("import" in field.block) {
-            imports.push({
-                name: field.block.name,
-                importPath: field.block.import,
-            });
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            imports.push(convertConfigImport(field.block as any)); // TODO: improve typing, generator runtime vs. config mismatch
         }
     });
 

packages/admin/cms-admin/src/generator/future/generateForm/generateComponentFormField.ts

@@ -1,9 +1,10 @@
 import { type ComponentFormFieldConfig } from "../generator";
-import { type Imports } from "../utils/generateImportsCode";
+import { convertConfigImport } from "../utils/convertConfigImport";
 import { type GenerateFieldsReturn } from "./generateFields";
 
 export function generateComponentFormField({ config }: { config: ComponentFormFieldConfig }): GenerateFieldsReturn {
-    const imports: Imports = [{ name: config.component.name, importPath: config.component.import }];
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const imports = [convertConfigImport(config.component as any)]; // TODO: improve typing, generator runtime vs. config mismatch
     const code = `<${config.component.name} />`;
 
     return {

packages/admin/cms-admin/src/generator/future/generateForm/generateFormField.ts

@@ -8,6 +8,7 @@ import {
 
 import { type Adornment, type FormConfig, type FormFieldConfig, type GQLDocumentConfigMap, isFormFieldConfig } from "../generator";
 import { camelCaseToHumanReadable } from "../utils/camelCaseToHumanReadable";
+import { convertConfigImport } from "../utils/convertConfigImport";
 import { findQueryTypeOrThrow } from "../utils/findQueryType";
 import { type Imports } from "../utils/generateImportsCode";
 import { isFieldOptional } from "../utils/isFieldOptional";
@@ -35,10 +36,8 @@ const getAdornmentData = ({ adornmentData }: { adornmentData: Adornment }): Ador
     } else if (typeof adornmentData.icon === "object") {
         if ("import" in adornmentData.icon) {
             adornmentString = `<${adornmentData.icon.name} />`;
-            adornmentImport = {
-                name: `${adornmentData.icon.name}`,
-                importPath: `${adornmentData.icon.import}`,
-            };
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            adornmentImport = convertConfigImport(adornmentData.icon as any); // TODO: improve typing, generator runtime vs. config mismatch
         } else {
             const { name, ...iconProps } = adornmentData.icon;
             adornmentString = `<${name}Icon
@@ -138,15 +137,8 @@ export function generateFormField({
     let validateCode = "";
     if (config.validate) {
         if ("import" in config.validate) {
-            let importPath = config.validate.import;
-            if (importPath.startsWith("./")) {
-                //go one level up as generated files are in generated subfolder
-                importPath = `.${importPath}`;
-            }
-            imports.push({
-                name: config.validate.name,
-                importPath,
-            });
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            imports.push(convertConfigImport(config.validate as any)); // TODO: improve typing, generator runtime vs. config mismatch
             validateCode = `validate={${config.validate.name}}`;
         } else if ("code" in config.validate) {
             validateCode = `validate={${config.validate.code}}`;

packages/admin/cms-admin/src/generator/future/generateGrid.ts

@@ -26,6 +26,7 @@ import {
     type StaticSelectLabelCellContent,
 } from "./generator";
 import { camelCaseToHumanReadable } from "./utils/camelCaseToHumanReadable";
+import { convertConfigImport } from "./utils/convertConfigImport";
 import { findMutationType } from "./utils/findMutationType";
 import { findQueryTypeOrThrow } from "./utils/findQueryType";
 import { findRootBlocks } from "./utils/findRootBlocks";
@@ -191,15 +192,13 @@ export function generateGrid(
     rootBlockColumns.forEach((field) => {
         if (rootBlocks[String(field.name)]) {
             // update rootBlocks if they are also used in columns
-            rootBlocks[String(field.name)].import = field.block.import;
-            rootBlocks[String(field.name)].name = field.block.name;
+            const block = field.block as any; // TODO: improve typing, generator runtime vs. config mismatch
+            rootBlocks[String(field.name)].import = block.import;
+            rootBlocks[String(field.name)].name = block.name;
         }
     });
     Object.values(rootBlocks).forEach((block) => {
-        imports.push({
-            name: block.name,
-            importPath: block.import,
-        });
+        imports.push(convertConfigImport(block as any)); // TODO: improve typing, generator runtime vs. config mismatch
     });
 
     const gridQueryType = findQueryTypeOrThrow(gridQuery, gqlIntrospection);
@@ -318,6 +317,9 @@ export function generateGrid(
         visible: actionsColumnVisible = undefined,
         ...restActionsColumnConfig
     } = actionsColumnConfig ?? {};
+    if (actionsColumnComponent) {
+        imports.push(convertConfigImport(actionsColumnComponent as any)); // TODO: improve typing, generator runtime vs. config mismatch
+    }
 
     const gridNeedsTheme = config.columns.some((column) => typeof column.visible === "string");
 
@@ -334,18 +336,14 @@ export function generateGrid(
         let gridType: "number" | "boolean" | "dateTime" | "date" | undefined;
 
         let filterOperators: string | undefined;
-        if (column.filterOperators) {
-            let importPath = column.filterOperators.import;
-            if (importPath.startsWith("./")) {
-                //go one level up as generated files are in generated subfolder
-                importPath = `.${importPath}`;
+        if (column.type != "combination" && column.filterOperators) {
+            const configFilterOperators = column.filterOperators as any; // TODO: improve typing, generator runtime vs. config mismatch
+            if (configFilterOperators.import) {
+                imports.push(convertConfigImport(configFilterOperators));
+            } else {
+                throw new Error("Unsupported filterOperators, only imports are supported for now");
             }
-            imports.push({
-                name: column.filterOperators.name,
-                importPath,
-            });
-
-            filterOperators = column.filterOperators.name;
+            filterOperators = configFilterOperators.name;
         }
 
         if (type == "dateTime") {
@@ -377,10 +375,7 @@ export function generateGrid(
                         iconsToImport.push(value.label.icon);
                     } else if (typeof value.label.icon?.name === "string") {
                         if ("import" in value.label.icon) {
-                            imports.push({
-                                name: value.label.icon.name,
-                                importPath: value.label.icon.import,
-                            });
+                            imports.push(convertConfigImport(value.label.icon as any)); // TODO: improve typing, generator runtime vs. config mismatch
                         } else {
                             iconsToImport.push(value.label.icon.name);
                         }
@@ -451,13 +446,9 @@ export function generateGrid(
             if ("code" in column.renderCell) {
                 renderCell = column.renderCell.code as string;
                 if ("imports" in column.renderCell) {
-                    //TODO improve typing
-                    imports.push(
-                        ...(column.renderCell.imports as Imports).map((imprt) => ({
-                            name: imprt.name,
-                            importPath: imprt.importPath.startsWith("./") ? `.${imprt.importPath}` : imprt.importPath,
-                        })),
-                    );
+                    // TODO: improve typing, generator runtime vs. config mismatch
+                    const renderCellImports = (column.renderCell as any).imports;
+                    imports.push(...renderCellImports.map((imprt: any) => convertConfigImport(imprt)));
                 }
             } else {
                 throw new Error(`Unsupported renderCell for column '${name}', only arrow functions are supported`);
@@ -600,11 +591,6 @@ export function generateGrid(
     import { FormattedMessage, FormattedNumber, useIntl } from "react-intl";
     ${generateImportsCode(imports)}
 
-    ${Object.entries(rootBlocks)
-        .map(([rootBlockKey, rootBlock]) => `import { ${rootBlock.name} } from "${rootBlock.import}";`)
-        .join("\n")}
-    ${actionsColumnComponent ? `import { ${actionsColumnComponent.name} } from "${actionsColumnComponent.import}";` : ""}
-
     const ${instanceGqlTypePlural}Fragment = gql\`
         fragment ${fragmentName} on ${gqlType} {
             id

packages/admin/cms-admin/src/generator/future/generateGrid/combinationColumn.ts

@@ -1,7 +1,7 @@
 import { type GridColDef } from "@comet/admin";
 import { type FormattedNumber } from "react-intl";
 
-import { type BaseColumnConfig, type ImportReference } from "../generator";
+import { type BaseColumnConfig } from "../generator";
 import { getFormattedMessageNode } from "../utils/intl";
 
 type AbstractField<FieldName extends string> = {
@@ -56,7 +56,6 @@ export type GridCombinationColumnConfig<FieldName extends string> = {
     name: string;
     primaryText?: Field<FieldName>;
     secondaryText?: Field<FieldName>;
-    filterOperators?: ImportReference;
 } & BaseColumnConfig &
     Pick<GridColDef, "sortBy">;