@comet/admin-generator 8.0.0-beta.0

package/lib/commands/generate/generateForm/generateForm.js

@@ -0,0 +1,468 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateForm = void 0;
+const generate_command_1 = require("../generate-command");
+const findMutationType_1 = require("../utils/findMutationType");
+const generateImportsCode_1 = require("../utils/generateImportsCode");
+const generateFields_1 = require("./generateFields");
+const getForwardedGqlArgs_1 = require("./getForwardedGqlArgs");
+function generateFormPropsCode(props) {
+    if (!props.length)
+        return { formPropsTypeCode: "", formPropsParamsCode: "" };
+    const uniqueProps = props.reduce((acc, item) => {
+        const propWithSameName = acc.find((prop) => prop.name == item.name);
+        if (!propWithSameName)
+            return [item, ...acc];
+        if (propWithSameName.type != item.type || propWithSameName.optional != item.optional) {
+            // this is currently not supported
+            return [item, ...acc];
+        }
+        return acc;
+    }, []);
+    return {
+        formPropsTypeCode: `interface FormProps {
+            ${uniqueProps.map((prop) => `${prop.name}${prop.optional ? `?` : ``}: ${prop.type};`).join("\n")}
+        }`,
+        formPropsParamsCode: `{${uniqueProps.map((prop) => prop.name).join(", ")}}: FormProps`,
+    };
+}
+function generateForm({ exportName, baseOutputFilename, targetDirectory, gqlIntrospection, }, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+config) {
+    var _a, _b, _c, _d, _e, _f, _g;
+    assertValidConfig(config);
+    const gqlType = config.gqlType;
+    const instanceGqlType = gqlType[0].toLowerCase() + gqlType.substring(1);
+    const formFragmentName = (_a = config.fragmentName) !== null && _a !== void 0 ? _a : `${gqlType}Form`;
+    const gqlDocuments = {};
+    const imports = [];
+    const props = [];
+    const mode = (_b = config.mode) !== null && _b !== void 0 ? _b : "all";
+    const editMode = mode === "edit" || mode == "all";
+    const addMode = mode === "add" || mode == "all";
+    const createMutationType = addMode && (0, findMutationType_1.findMutationTypeOrThrow)((_c = config.createMutation) !== null && _c !== void 0 ? _c : `create${gqlType}`, gqlIntrospection);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const formFields = config.fields.reduce((acc, field) => {
+        if ((0, generate_command_1.isFormLayoutConfig)(field)) {
+            // using forEach instead of acc.push(...field.fields.filter(isFormFieldConfig)) because typescript can't handle mixed typing
+            field.fields.forEach((nestedFieldConfig) => {
+                if ((0, generate_command_1.isFormFieldConfig)(nestedFieldConfig)) {
+                    acc.push(nestedFieldConfig);
+                }
+            });
+        }
+        else if ((0, generate_command_1.isFormFieldConfig)(field)) {
+            acc.push(field);
+        }
+        return acc;
+    }, []);
+    const gqlArgs = [];
+    if (createMutationType) {
+        const { imports: forwardedGqlArgsImports, props: forwardedGqlArgsProps, gqlArgs: forwardedGqlArgs, } = (0, getForwardedGqlArgs_1.getForwardedGqlArgs)({
+            fields: formFields,
+            gqlOperation: createMutationType,
+            gqlIntrospection,
+        });
+        imports.push(...forwardedGqlArgsImports);
+        props.push(...forwardedGqlArgsProps);
+        gqlArgs.push(...forwardedGqlArgs);
+    }
+    if (editMode) {
+        if (mode === "all") {
+            props.push({ name: "id", optional: true, type: "string" });
+        }
+        else if (mode === "edit") {
+            props.push({ name: "id", optional: false, type: "string" });
+        }
+    }
+    const { formPropsTypeCode, formPropsParamsCode } = generateFormPropsCode(props);
+    const rootBlockFields = formFields
+        .filter((field) => field.type == "block")
+        .map((field) => {
+        // map is for ts to infer block type correctly
+        if (field.type !== "block")
+            throw new Error("Field is not a block field");
+        return field;
+    });
+    rootBlockFields.forEach((field) => {
+        imports.push({
+            name: field.block.name,
+            importPath: field.block.import,
+        });
+    });
+    const readOnlyFields = formFields.filter((field) => field.readOnly);
+    const fileFields = formFields.filter((field) => field.type == "fileUpload");
+    if (fileFields.length > 0) {
+        imports.push({ name: "GQLFinalFormFileUploadFragment", importPath: "@comet/cms-admin" });
+    }
+    // Unnecessary field.type == "fileUpload" check to make TypeScript happy
+    const downloadableFileFields = fileFields.filter((field) => field.type == "fileUpload" && field.download);
+    if (fileFields.length > 0) {
+        imports.push({ name: "GQLFinalFormFileUploadDownloadableFragment", importPath: "@comet/cms-admin" });
+    }
+    let hooksCode = "";
+    let formValueToGqlInputCode = "";
+    const formFragmentFields = [];
+    const formValuesConfig = [];
+    const _h = (0, generateFields_1.generateFields)({
+        gqlIntrospection,
+        baseOutputFilename,
+        fields: config.fields,
+        formFragmentName,
+        formConfig: config,
+        gqlType: config.gqlType,
+    }), { code: fieldsCode } = _h, generatedFields = __rest(_h, ["code"]);
+    for (const name in generatedFields.gqlDocuments) {
+        gqlDocuments[name] = {
+            document: generatedFields.gqlDocuments[name].document,
+            export: true,
+        };
+    }
+    imports.push(...generatedFields.imports);
+    hooksCode += generatedFields.hooksCode;
+    formValueToGqlInputCode += generatedFields.formValueToGqlInputCode;
+    formFragmentFields.push(...generatedFields.formFragmentFields);
+    formValuesConfig.push(...generatedFields.formValuesConfig);
+    gqlDocuments[`${instanceGqlType}FormFragment`] = {
+        document: `
+        fragment ${formFragmentName} on ${gqlType} {
+            ${formFragmentFields.join("\n")}
+        }
+        ${fileFields.length > 0 && fileFields.length !== downloadableFileFields.length ? "${finalFormFileUploadFragment}" : ""}
+        ${downloadableFileFields.length > 0 ? "${finalFormFileUploadDownloadableFragment}" : ""}
+    `,
+        export: editMode,
+    };
+    if (editMode) {
+        gqlDocuments[`${instanceGqlType}Query`] = {
+            document: `
+            query ${gqlType}($id: ID!) {
+                ${instanceGqlType}(id: $id) {
+                    id
+                    updatedAt
+                    ...${formFragmentName}
+                }
+            }
+            \${${`${instanceGqlType}FormFragment`}}
+        `,
+            export: true,
+        };
+    }
+    if (addMode && createMutationType) {
+        gqlDocuments[`create${gqlType}Mutation`] = {
+            document: `
+            mutation Create${gqlType}(${gqlArgs.filter((gqlArg) => !gqlArg.isInputArgSubfield).length
+                ? `${gqlArgs
+                    .filter((gqlArg) => !gqlArg.isInputArgSubfield)
+                    .map((gqlArg) => {
+                    return `$${gqlArg.name}: ${gqlArg.type}!`;
+                })
+                    .join(", ")}, `
+                : ``}$input: ${gqlType}Input!) {
+                ${createMutationType.name}(${gqlArgs.filter((gqlArg) => !gqlArg.isInputArgSubfield).length
+                ? `${gqlArgs
+                    .filter((gqlArg) => !gqlArg.isInputArgSubfield)
+                    .map((gqlArg) => {
+                    return `${gqlArg.name}: $${gqlArg.name}`;
+                })
+                    .join(", ")}, `
+                : ``}input: $input) {
+                    id
+                    updatedAt
+                    ...${formFragmentName}
+                }
+            }
+            \${${`${instanceGqlType}FormFragment`}}
+        `,
+            export: true,
+        };
+    }
+    if (editMode) {
+        gqlDocuments[`update${gqlType}Mutation`] = {
+            document: `
+            mutation Update${gqlType}($id: ID!, $input: ${gqlType}UpdateInput!) {
+                update${gqlType}(id: $id, input: $input) {
+                    id
+                    updatedAt
+                    ...${formFragmentName}
+                }
+            }
+            \${${`${instanceGqlType}FormFragment`}}
+        `,
+            export: true,
+        };
+    }
+    for (const name in gqlDocuments) {
+        const gqlDocument = gqlDocuments[name];
+        imports.push({
+            name: name,
+            importPath: `./${baseOutputFilename}.gql`,
+        });
+        const match = gqlDocument.document.match(/^\s*(query|mutation|fragment)\s+(\w+)/);
+        if (!match)
+            throw new Error(`Could not find query or mutation name in ${gqlDocument}`);
+        const type = match[1];
+        const documentName = match[2];
+        imports.push({
+            name: `GQL${documentName}${type[0].toUpperCase() + type.substring(1)}`,
+            importPath: `./${baseOutputFilename}.gql.generated`,
+        });
+        imports.push({
+            name: `GQL${documentName}${type[0].toUpperCase() + type.substring(1)}Variables`,
+            importPath: `./${baseOutputFilename}.gql.generated`,
+        });
+    }
+    const finalFormSubscription = Object.keys((_e = (_d = generatedFields.finalFormConfig) === null || _d === void 0 ? void 0 : _d.subscription) !== null && _e !== void 0 ? _e : {});
+    const finalFormRenderProps = Object.keys((_g = (_f = generatedFields.finalFormConfig) === null || _f === void 0 ? void 0 : _f.renderProps) !== null && _g !== void 0 ? _g : {});
+    let filterByFragmentType = `GQL${formFragmentName}Fragment`;
+    let customFilterByFragment = "";
+    if (fileFields.length > 0) {
+        const keysToOverride = fileFields.map((field) => field.name);
+        customFilterByFragment = `type ${formFragmentName}Fragment = Omit<${filterByFragmentType}, ${keysToOverride
+            .map((key) => `"${String(key)}"`)
+            .join(" | ")}> & {
+            ${fileFields
+            .map((field) => {
+            if (field.type !== "fileUpload") {
+                throw new Error("Field is not a file upload field");
+            }
+            if (("multiple" in field && field.multiple) ||
+                ("maxFiles" in field && typeof field.maxFiles === "number" && field.maxFiles > 1)) {
+                return `${String(field.name)}: ${field.download ? "GQLFinalFormFileUploadDownloadableFragment" : "GQLFinalFormFileUploadFragment"}[];`;
+            }
+            return `${String(field.name)}: ${field.download ? "GQLFinalFormFileUploadDownloadableFragment" : "GQLFinalFormFileUploadFragment"} | null;`;
+        })
+            .join("\n")}
+        }`;
+        filterByFragmentType = `${formFragmentName}Fragment`;
+    }
+    const code = `import { useApolloClient, useQuery, gql } from "@apollo/client";
+    import {
+        AsyncSelectField,
+        CheckboxField,
+        Field,
+        filterByFragment,
+        FinalForm,
+        FinalFormInput,
+        FinalFormRangeInput,
+        FinalFormSelect,
+        FinalFormSubmitEvent,
+        Loading,
+        RadioGroupField,
+        TextAreaField,
+        TextField,
+        useFormApiRef,
+        useStackSwitchApi,
+    } from "@comet/admin";
+    import { ArrowLeft, Lock } from "@comet/admin-icons";
+    import { DateTimeField, FinalFormDatePicker } from "@comet/admin-date-time";
+    import { BlockState, createFinalFormBlock, queryUpdatedAt, resolveHasSaveConflict, useFormSaveConflict, FileUploadField } from "@comet/cms-admin";
+    import { FormControlLabel, IconButton, MenuItem, InputAdornment } from "@mui/material";
+    import { FormApi } from "final-form";
+    import isEqual from "lodash.isequal";
+    import { useMemo } from "react";
+    import { FormattedMessage } from "react-intl";
+    ${(0, generateImportsCode_1.generateImportsCode)(imports)}
+    ${rootBlockFields.length > 0
+        ? `const rootBlocks = {
+                ${rootBlockFields.map((field) => `${String(field.name)}: ${field.block.name}`)}
+                };`
+        : ""}
+
+    ${customFilterByFragment}
+
+    type FormValues = ${formValuesConfig.filter((config) => !!config.omitFromFragmentType).length > 0
+        ? `Omit<${filterByFragmentType}, ${formValuesConfig
+            .filter((config) => !!config.omitFromFragmentType)
+            .map((config) => `"${config.omitFromFragmentType}"`)
+            .join(" | ")}>`
+        : `${filterByFragmentType}`} ${formValuesConfig.filter((config) => !!config.typeCode).length > 0
+        ? `& {
+                ${formValuesConfig
+            .filter((config) => !!config.typeCode)
+            .map((config) => config.typeCode)
+            .join("\n")}
+            }`
+        : ""};
+
+    ${formPropsTypeCode}
+
+    export function ${exportName}(${formPropsParamsCode}) {
+        const client = useApolloClient();
+        ${mode == "all" ? `const mode = id ? "edit" : "add";` : ""}
+        const formApiRef = useFormApiRef<FormValues>();
+        ${addMode ? `const stackSwitchApi = useStackSwitchApi();` : ""}
+
+        ${editMode
+        ? `
+        const { data, error, loading, refetch } = useQuery<GQL${gqlType}Query, GQL${gqlType}QueryVariables>(
+            ${instanceGqlType}Query,
+            ${mode == "edit" ? `{ variables: { id } }` : `id ? { variables: { id } } : { skip: true }`},
+        );
+        `
+        : ""}
+
+        ${editMode
+        ? `const initialValues = useMemo<Partial<FormValues>>(() => data?.${instanceGqlType}
+        ? {
+            ...filterByFragment<${filterByFragmentType}>(${instanceGqlType}FormFragment, data.${instanceGqlType}),
+            ${formValuesConfig
+            .filter((config) => !!config.initializationCode)
+            .map((config) => config.initializationCode)
+            .join(",\n")}
+        }
+        : {
+            ${formValuesConfig
+            .filter((config) => !!config.defaultInitializationCode)
+            .map((config) => config.defaultInitializationCode)
+            .join(",\n")}
+        }
+    , [data]);`
+        : `const initialValues = {
+                ${formValuesConfig
+            .filter((config) => !!config.defaultInitializationCode)
+            .map((config) => config.defaultInitializationCode)
+            .join(",\n")}
+            };`}
+
+        ${editMode
+        ? `
+        const saveConflict = useFormSaveConflict({
+            checkConflict: async () => {
+                const updatedAt = await queryUpdatedAt(client, "${instanceGqlType}", id);
+                return resolveHasSaveConflict(data?.${instanceGqlType}.updatedAt, updatedAt);
+            },
+            formApiRef,
+            loadLatestVersion: async () => {
+                await refetch();
+            },
+        });
+        `
+        : ""}
+
+        const handleSubmit = async (${formValuesConfig.filter((config) => !!config.destructFromFormValues).length
+        ? `{ ${formValuesConfig
+            .filter((config) => !!config.destructFromFormValues)
+            .map((config) => config.destructFromFormValues)
+            .join(", ")}, ...formValues }`
+        : `formValues`}: FormValues, form: FormApi<FormValues>${addMode ? `, event: FinalFormSubmitEvent` : ""}) => {
+            ${editMode ? `if (await saveConflict.checkForConflicts()) throw new Error("Conflicts detected");` : ""}
+            const output = {
+                ...formValues,
+                ${formValueToGqlInputCode}
+            };
+            ${mode == "all" ? `if (mode === "edit") {` : ""}
+                ${editMode
+        ? `
+                ${readOnlyFields.some((field) => field.name === "id") ? "" : "if (!id) throw new Error();"}
+                const { ${readOnlyFields.map((field) => `${String(field.name)},`).join("")} ...updateInput } = output;
+                await client.mutate<GQLUpdate${gqlType}Mutation, GQLUpdate${gqlType}MutationVariables>({
+                    mutation: update${gqlType}Mutation,
+                    variables: { id, input: updateInput },
+                });
+                `
+        : ""}
+            ${mode == "all" ? `} else {` : ""}
+                ${addMode && createMutationType
+        ? `
+                const { data: mutationResponse } = await client.mutate<GQLCreate${gqlType}Mutation, GQLCreate${gqlType}MutationVariables>({
+                    mutation: create${gqlType}Mutation,
+                    variables: { input: ${gqlArgs.filter((prop) => prop.isInputArgSubfield).length
+            ? `{ ...output, ${gqlArgs
+                .filter((prop) => prop.isInputArgSubfield)
+                .map((prop) => prop.name)
+                .join(",")} }`
+            : "output"}${gqlArgs.filter((prop) => !prop.isInputArgSubfield).length
+            ? `, ${gqlArgs
+                .filter((prop) => !prop.isInputArgSubfield)
+                .map((arg) => arg.name)
+                .join(",")}`
+            : ""} },
+                });
+                if (!event.navigatingBack) {
+                    const id = mutationResponse?.${createMutationType.name}.id;
+                    if (id) {
+                        setTimeout(() => {
+                            stackSwitchApi.activatePage(\`edit\`, id);
+                        });
+                    }
+                }
+                `
+        : ""}
+            ${mode == "all" ? `}` : ""}
+        };
+
+        ${hooksCode}
+
+        ${editMode
+        ? ` if (error) throw error;
+
+                    if (loading) {
+                        return <Loading behavior="fillPageHeight" />;
+                    }`
+        : ``}
+
+        return (
+            <FinalForm<FormValues>
+                apiRef={formApiRef}
+                onSubmit={handleSubmit}
+                mode=${mode == "all" ? `{mode}` : editMode ? `"edit"` : `"add"`}
+                initialValues={initialValues}
+                initialValuesEqual={isEqual} //required to compare block data correctly
+                subscription={{ ${finalFormSubscription.length ? finalFormSubscription.map((field) => `${field}: true`).join(", ") : ``} }}
+            >
+                {(${finalFormRenderProps.length ? `{${finalFormRenderProps.join(", ")}}` : ``}) => (
+                    ${editMode ? `<>` : ``}
+                        ${editMode ? `{saveConflict.dialogs}` : ``}
+                        <>
+                            ${fieldsCode}
+                        </>
+                    ${editMode ? `</>` : ``}
+                )}
+            </FinalForm>
+        );
+    }
+
+    `;
+    return {
+        code,
+        gqlDocuments,
+    };
+}
+exports.generateForm = generateForm;
+/**
+ * Checks if the provided form config is valid.
+ *
+ * Examples of invalid configs:
+ * - The "id" field is not read-only
+ *
+ * @param config The form config to check.
+ * @throws Will throw an error if the provided config is invalid.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function assertValidConfig(config) {
+    function validateFields(fields) {
+        for (const field of fields) {
+            if ((0, generate_command_1.isFormFieldConfig)(field)) {
+                if (field.name === "id" && !field.readOnly) {
+                    throw new Error(`Invalid form config: the "id" field must be read-only`);
+                }
+            }
+            else if ((0, generate_command_1.isFormLayoutConfig)(field)) {
+                validateFields(field.fields);
+            }
+        }
+    }
+    validateFields(config.fields);
+}

package/lib/commands/generate/generateForm/generateFormField.d.ts

@@ -0,0 +1,12 @@
+import { type IntrospectionQuery } from "graphql";
+import { type FormConfig, type FormFieldConfig } from "../generate-command";
+import { type GenerateFieldsReturn } from "./generateFields";
+export declare function generateFormField({ gqlIntrospection, baseOutputFilename, config, formConfig, gqlType, namePrefix, }: {
+    gqlIntrospection: IntrospectionQuery;
+    baseOutputFilename: string;
+    config: FormFieldConfig<any>;
+    formFragmentName: string;
+    formConfig: FormConfig<any>;
+    gqlType: string;
+    namePrefix?: string;
+}): GenerateFieldsReturn;