@rebasepro/cms 0.17.3 → 0.18.0

package/src/collection_editor/ui/collection_editor/CollectionEditorDialog.tsx

@@ -1,1098 +0,0 @@
-import * as React from "react";
-import { useEffect, useRef, useState } from "react";
-import {
-    ConfirmationDialog,
-    ErrorView,
-    UnsavedChangesDialog,
-    useAuthController,
-    useCustomizationController,
-    useUnsavedChangesDialog
-} from "@rebasepro/app";
-import {
-    getInferenceType,
-    ImportSaveInProgress,
-    useCollectionRegistryController,
-    useImportConfig,
-    useNavigationStateController,
-    useUrlController
-} from "../../_cms_internals";
-import { useSafeSnackbarController } from "../../useSafeSnackbarController";
-import {
-    ArrowLeftIcon,
-    Button,
-    CheckIcon,
-    CircularProgressCenter,
-    cls,
-    coolIconKeys,
-    defaultBorderMixin,
-    Dialog,
-    DialogTitle,
-    IconButton,
-    LoadingButton,
-    Tab,
-    Tabs,
-    Tooltip
-} from "@rebasepro/ui";
-import { EngineProperties, Entity, getDataSourceCapabilities, MapProperty, Properties, Property, TableMetadata, User } from "@rebasepro/types";
-import { PropertyConfig, AdminCollection } from "@rebasepro/cms-types";
-import { getSubcollections, getTableName, isPropertyBuilder } from "@rebasepro/common";
-import { removeInitialAndTrailingSlashes } from "@rebasepro/app";
-import { isSchemaChangeCancelled } from "../../liveSchemaClient";
-import { CollectionEditorSchema } from "./CollectionYupValidation";
-import { GeneralSettingsForm } from "./GeneralSettingsForm";
-import { DisplaySettingsForm } from "./DisplaySettingsForm";
-import { CollectionPropertiesEditorForm } from "./CollectionPropertiesEditorForm";
-import { CollectionsConfigController } from "../../types/config_controller";
-import { CollectionEditorWelcomeView } from "./CollectionEditorWelcomeView";
-import { CollectionInference } from "../../types/collection_inference";
-import { buildEntityPropertiesFromData } from "@rebasepro/inference";
-import { CollectionEditorImportMapping } from "./import/CollectionEditorImportMapping";
-import { CollectionEditorImportDataPreview } from "./import/CollectionEditorImportDataPreview";
-import { cleanPropertiesFromImport } from "./import/clean_import_data";
-import { Formex, FormexController, useCreateFormex } from "@rebasepro/forms";
-import { getFullIdPath } from "./util";
-import { AICollectionGeneratorPopover } from "./AICollectionGeneratorPopover";
-import { AIModifiedPathsProvider, useAIModifiedPaths } from "./AIModifiedPathsContext";
-import { CollectionGenerationCallback, CollectionOperation } from "../../api/generateCollectionApi";
-import { CollectionRLSTab } from "./CollectionRLSTab";
-import { buildCollectionFromTableMetadata } from "@rebasepro/common";
-import { mergeDeep, randomString, removeUndefined } from "@rebasepro/utils";
-import type { CollectionEditorExtensionProps, CollectionEditorTab } from "../../extensibility_types";
-
-export interface CollectionEditorDialogProps extends CollectionEditorExtensionProps {
-    open: boolean;
-    isNewCollection: boolean;
-    initialValues?: {
-        slug?: string,
-        name?: string,
-    }
-    /**
-     * A collection to duplicate from. If provided, the new collection will be
-     * pre-populated with the same properties (but with empty name, path, and id).
-     */
-    copyFrom?: AdminCollection;
-    editedCollectionId?: string;
-    path?: string; // full path of this particular collection, like `products/123/locales`
-    parentCollectionSlugs?: string[], parentEntityIds?: string[]; // path ids of the parent collection, like [`products`]
-    handleClose: (collection?: AdminCollection) => void;
-    configController: CollectionsConfigController;
-    collectionInference?: CollectionInference;
-    extraView?: {
-        View: React.ComponentType<{
-            path: string
-        }>,
-        icon: React.ReactNode | any
-    };
-    getUser?: (uid: string) => User | null;
-    getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
-    parentCollection?: AdminCollection;
-    existingEntities?: Entity<any>[];
-    /**
-     * Initial view to open when editing: "general", "display", or "properties".
-     * For new collections, this is ignored.
-     */
-    initialView?: "general" | "display" | "properties";
-    /**
-     * If true, auto-expand the Kanban configuration section.
-     */
-    expandKanban?: boolean;
-    /**
-     * Callback function for generating/modifying collections.
-     * The plugin is API-agnostic - the consumer provides the implementation.
-     */
-    generateCollection?: CollectionGenerationCallback;
-    /**
-     * Optional analytics callback
-     */
-    onAnalyticsEvent?: (event: string, params?: object) => void;
-    /**
-     * If true, it indicates that the editor is rendered inline (not in a dialog) and therefore updates headers and footers to adapt to the layout.
-     */
-    fullScreen?: boolean;
-    /**
-     * List of unmapped database tables available for import.
-     */
-    unmappedTables?: string[];
-    /**
-     * Callback to fetch column metadata for a table.
-     */
-    onFetchTableMetadata?: (tableName: string) => Promise<TableMetadata | undefined>;
-}
-
-export function CollectionEditorDialog(props: CollectionEditorDialogProps) {
-
-    const open = props.open;
-
-    const [formDirty, setFormDirty] = React.useState<boolean>(false);
-
-    const { dialogProps, triggerDialog } = useUnsavedChangesDialog(
-        open && formDirty,
-        () => props.handleClose(undefined)
-    );
-
-    const handleCancel = () => {
-        if (!formDirty) {
-            props.handleClose(undefined);
-        } else {
-            triggerDialog();
-        }
-    };
-
-    useEffect(() => {
-        if (!open) {
-            setFormDirty(false);
-        }
-    }, [open]);
-
-    return (
-        <Dialog
-            open={open}
-            fullWidth={true}
-            fullHeight={true}
-            scrollable={false}
-            maxWidth={"7xl"}
-            className="bg-surface-50 dark:bg-surface-800"
-            onOpenChange={(open) => !open ? handleCancel() : undefined}
-        >
-            <DialogTitle hidden>Collection editor</DialogTitle>
-            <AIModifiedPathsProvider>
-                {open && <CollectionEditor {...props}
-                    handleCancel={handleCancel}
-                    setFormDirty={setFormDirty}/>}
-
-                <UnsavedChangesDialog {...dialogProps}/>
-            </AIModifiedPathsProvider>
-        </Dialog>
-    );
-}
-
-type EditorView = "welcome"
-    | "general"
-    | "display"
-    | "import_data_mapping"
-    | "import_data_preview"
-    | "import_data_saving"
-    | "properties"
-    | "loading"
-    | "extra_view"
-    | "rls";
-
-export function CollectionEditor(props: CollectionEditorDialogProps & {
-    handleCancel: () => void,
-    setFormDirty: (dirty: boolean) => void
-}) {
-    const { standalone } = props;
-
-    const customizationController = useCustomizationController();
-    const navigationState = useNavigationStateController();
-    const collectionRegistry = useCollectionRegistryController();
-    const authController = useAuthController();
-
-    // In standalone mode, use safe defaults instead of context values
-    const propertyConfigs = standalone
-        ? (customizationController?.propertyConfigs ?? {})
-        : customizationController.propertyConfigs;
-    const topLevelNavigation = standalone
-        ? (navigationState?.topLevelNavigation ?? [])
-        : navigationState.topLevelNavigation;
-    const collections = standalone
-        ? (collectionRegistry?.collections ?? [])
-        : collectionRegistry.collections;
-
-    const initialValuesProp = props.initialValues;
-    const copyFromProp = props.copyFrom;
-    // Skip templates when duplicating (copyFrom is provided)
-    const includeTemplates = !copyFromProp && !initialValuesProp?.slug && (props.parentCollectionSlugs ?? []).length === 0;
-    const collectionsInThisLevel = (props.parentCollection ? getSubcollections(props.parentCollection) : collections) ?? [];
-    const existingPaths = collectionsInThisLevel.map(col => getTableName(col)?.trim().toLowerCase()).filter(Boolean);
-    const existingIds = collectionsInThisLevel.map(col => col.slug?.trim().toLowerCase()).filter(Boolean) as string[];
-    const [collection, setCollection] = React.useState<AdminCollection<any> | undefined>();
-    const [initialLoadingCompleted, setInitialLoadingCompleted] = React.useState(false);
-
-    useEffect(() => {
-        try {
-            const initialised = (standalone
-                ? true
-                : (collectionRegistry?.initialised ?? true)) && !props.configController?.loading;
-            const getRawCollection = standalone
-                ? (() => undefined)
-                : collectionRegistry.getRawCollection;
-            if (initialised) {
-                if (props.editedCollectionId) {
-                    // We must use getRawCollection so the editor schema fields
-                    // aren't polluted with dynamically injected runtime `relations`.
-                    // The path lookup relies on generating a fake child path to resolve through the registry
-                    const collectionPath = [...(props.parentCollectionSlugs ?? []), props.editedCollectionId]
-                        .reduce((acc, segment, i) => i === 0 ? segment : `${acc}/fake_id/${segment}`, "");
-
-                    const registryCol = getRawCollection ? getRawCollection(collectionPath) : undefined;
-                    const configCol = props.configController?.collections?.find(c => c.slug === props.editedCollectionId);
-                    setCollection((registryCol ?? configCol) as AdminCollection<any>);
-                } else {
-                    setCollection(undefined);
-                }
-                setInitialLoadingCompleted(true);
-            }
-        } catch (e) {
-            console.error(e);
-        }
-    }, [props.editedCollectionId, props.parentCollectionSlugs, props.parentEntityIds, standalone, collectionRegistry.initialised, collectionRegistry.getRawCollection, props.configController.collections, props.configController.loading, collections]);
-
-    const initialIcon = React.useMemo(() => coolIconKeys[Math.floor(Math.random() * coolIconKeys.length)], []);
-    const fallbackSlug = React.useMemo(() => randomString(16), []);
-
-    const initialCollection = React.useMemo(() => {
-        return collection
-            ? {
-                ...collection,
-                slug: collection.slug ?? fallbackSlug
-            }
-            : undefined;
-    }, [collection, fallbackSlug]);
-
-    // Build initial values - handle copyFrom for duplication
-    const initialValues = React.useMemo((): AdminCollection<any> => {
-        return (initialCollection
-            ? applyPropertyConfigs(initialCollection, propertyConfigs)
-            : copyFromProp
-                ? (() => {
-                    // When duplicating, copy all properties but clear identifiers.
-                    //
-                    // "Identifiers" has to include the ones this dialog cannot
-                    // show. `schema` has no field anywhere in the editor, so a
-                    // duplicate of the Users collection — the one collection
-                    // scaffolded with `schema: "rebase"` — silently produced a
-                    // new collection whose table is created in `rebase` rather
-                    // than `public`, with nothing on screen to explain why.
-                    // Panel-authored collections are `public` collections.
-                    //
-                    // `slug`/`table` are cleared rather than carried: both are
-                    // re-derived from the name the user types (see
-                    // `updateName` in GeneralSettingsForm, which fills untouched
-                    // fields while `isNewCollection`), and carrying them meant a
-                    // duplicate pointed at the source's table until then.
-                    //
-                    // `auth` goes too — a duplicate must not become a second
-                    // auth collection wired to the same user store.
-                    const {
-                        subcollections: _sub,
-                        schema: _schema,
-                        auth: _auth,
-                        ...rest
-                    } = copyFromProp as unknown as Record<string, unknown>;
-                    return {
-                        ...rest,
-                        name: "",
-                        // Same shape the "new collection" branch below starts
-                        // from, so validation and the registry lookups never see
-                        // an undefined slug mid-edit.
-                        slug: fallbackSlug,
-                        table: "",
-                        ownerId: authController.user?.uid ?? ""
-                    } as AdminCollection<any>;
-                })()
-                : {
-                    slug: initialValuesProp?.slug ?? fallbackSlug,
-                    table: initialValuesProp?.slug ?? "",
-                    name: initialValuesProp?.name ?? "",
-                    properties: {} as EngineProperties,
-                    propertiesOrder: [],
-                    icon: initialIcon,
-                    ownerId: authController.user?.uid ?? ""
-                }) as AdminCollection<any>;
-    }, [initialCollection, propertyConfigs, copyFromProp, initialValuesProp, fallbackSlug, initialIcon, authController.user?.uid]);
-
-    if (!initialLoadingCompleted) {
-        return <CircularProgressCenter/>;
-    }
-
-    if (!props.isNewCollection && (!(standalone ? true : (collectionRegistry?.initialised ?? true)) || !initialLoadingCompleted)) {
-        return <CircularProgressCenter/>;
-    }
-
-    return <CollectionEditorInternal
-        {...props}
-        initialValues={initialValues}
-        existingPaths={existingPaths}
-        existingIds={existingIds}
-        includeTemplates={includeTemplates}
-        collection={collection}
-        setCollection={setCollection}
-        propertyConfigs={propertyConfigs}/>
-
-}
-
-function CollectionEditorInternal<M extends Record<string, unknown>>({
-    isNewCollection,
-    configController,
-    editedCollectionId,
-    parentCollectionSlugs, parentEntityIds,
-    path,
-    collectionInference,
-    handleClose,
-    extraView,
-    handleCancel,
-    setFormDirty,
-    getUser,
-    parentCollection,
-    getData,
-    existingPaths,
-    existingIds,
-    includeTemplates,
-    collection,
-    setCollection,
-    initialValues,
-    propertyConfigs,
-    existingEntities,
-    initialView: initialViewProp,
-    expandKanban,
-    generateCollection,
-    onAnalyticsEvent,
-    fullScreen,
-    unmappedTables,
-    onFetchTableMetadata,
-    propertyTypePresets,
-    hiddenPropertyTypes,
-    renderExtraPropertyFields,
-    renderExtraCollectionFields,
-    visibleTabs,
-    standalone
-}: CollectionEditorDialogProps & {
-    handleCancel: () => void,
-    setFormDirty: (dirty: boolean) => void,
-    initialValues: AdminCollection<M>,
-    existingPaths: string[],
-    existingIds: string[],
-    includeTemplates: boolean,
-    collection: AdminCollection<M> | undefined,
-    setCollection: (collection: AdminCollection<M>) => void,
-    propertyConfigs: Record<string, PropertyConfig>,
-}
-) {
-
-    /** Why the submit buttons below are dead, straight from the backend. */
-    const readOnlyTitle = configController?.readOnlyReason
-        || "This backend does not accept collection edits.";
-
-    const importConfigRaw = useImportConfig();
-    const urlControllerRaw = useUrlController();
-    const collectionRegistryRaw = useCollectionRegistryController();
-    const snackbarControllerRaw = useSafeSnackbarController();
-
-    // In standalone mode, use safe defaults
-    const importConfig = standalone ? undefined : importConfigRaw;
-    const urlController = standalone
-        ? {
-            basePath: "/",
-            baseCollectionPath: "/c",
-            urlPathToDataPath: () => "",
-            homeUrl: "/",
-            isUrlCollectionPath: () => false,
-            buildUrlCollectionPath: () => "",
-            buildAppUrlPath: () => "",
-            resolveDatabasePathsFrom: (p: string) => p,
-            navigate: () => { }
-        }
-        : urlControllerRaw;
-    const collectionRegistryInternal = standalone
-        ? { convertIdsToPaths: (ids: string[]) => ids }
-        : collectionRegistryRaw;
-    const snackbarController = snackbarControllerRaw ?? {
-        open: () => { },
-        close: () => { }
-    };
-
-    // Use this ref to store which properties have errors
-    const propertyErrorsRef = useRef<Record<string, any>>({});
-
-    const initialView = isNewCollection
-        ? (includeTemplates ? "welcome" : "general")
-        : (initialViewProp ?? "properties");
-    const [currentView, setCurrentView] = useState<EditorView>(initialView); // this view can edit either the details view or the properties one
-
-    useEffect(() => {
-        if (visibleTabs && !visibleTabs.includes(currentView as CollectionEditorTab)) {
-            setCurrentView(visibleTabs[0] || "general");
-        }
-    }, [visibleTabs, currentView]);
-
-    const [error, setError] = React.useState<Error | undefined>();
-
-    const saveCollection = (updatedCollection: AdminCollection<M>): Promise<boolean> => {
-        const id = updatedCollection.slug;
-
-        return configController.saveCollection({
-            id,
-            collectionData: updatedCollection,
-            previousId: editedCollectionId,
-            parentCollectionSlugs
-        })
-            .then(() => {
-                setError(undefined);
-                return true;
-            })
-            .catch((e) => {
-                // Cancelling the schema-change review rejects, so that the form
-                // does not go on believing it saved. It is still the person's
-                // own choice, and reporting it back to them as "Error
-                // persisting collection" — in the console and in a red
-                // snackbar — describes their decision as a fault.
-                if (isSchemaChangeCancelled(e)) {
-                    setError(undefined);
-                    return false;
-                }
-                setError(e);
-                console.error(e);
-                snackbarController.open({
-                    type: "error",
-                    message: "Error persisting collection: " + (e.message ?? "Details in the console")
-                });
-                return false;
-            });
-    };
-
-    const setNextMode = () => {
-        if (currentView === "general") {
-            if (importConfig?.inUse) {
-                setCurrentView("import_data_saving");
-            } else if (extraView) {
-                setCurrentView("extra_view");
-            } else {
-                setCurrentView("properties");
-            }
-        } else if (currentView === "welcome") {
-            setCurrentView("general");
-        } else if (currentView === "import_data_mapping") {
-            setCurrentView("import_data_preview");
-        } else if (currentView === "import_data_preview") {
-            setCurrentView("general");
-        } else if (currentView === "extra_view") {
-            setCurrentView("properties");
-        } else {
-            setCurrentView("general");
-        }
-
-    };
-
-    const doCollectionInference = collectionInference ? (collection: AdminCollection<any>) => {
-        if (!collectionInference) return undefined;
-        return collectionInference?.(
-            collection.slug,
-            parentPaths ?? [],
-            collection.databaseId
-        );
-    } : undefined;
-
-    const inferCollectionFromData = async (newCollection: AdminCollection<M>) => {
-
-        try {
-            if (!doCollectionInference) {
-                setCollection(newCollection);
-                return Promise.resolve(newCollection);
-            }
-
-            setCurrentView("loading");
-
-            const inferredCollection = await doCollectionInference?.(newCollection);
-
-            if (!inferredCollection) {
-                setCollection(newCollection);
-                return Promise.resolve(newCollection);
-            }
-            const values = {
-                ...(newCollection ?? {})
-            };
-
-            if (Object.keys(inferredCollection.properties ?? {}).length > 0) {
-                values.properties = inferredCollection.properties as EngineProperties;
-                values.propertiesOrder = inferredCollection.propertiesOrder as Extract<keyof M, string>[];
-            }
-
-            if (!values.propertiesOrder) {
-                values.propertiesOrder = Object.keys(values.properties) as Extract<keyof M, string>[];
-                return values;
-            }
-
-            setCollection(values);
-            console.debug("Inferred collection", {
-                newCollection: newCollection ?? {},
-                values
-            });
-            return values;
-        } catch (e: unknown) {
-            console.error(e);
-            snackbarController.open({
-                type: "error",
-                message: "Error inferring collection: " + (e instanceof Error ? e.message : "Details in the console")
-            });
-            return newCollection;
-        }
-    };
-
-    const onSubmit = async (newCollectionState: AdminCollection<M>, formexController: FormexController<AdminCollection<M>>) => {
-        console.debug("Submitting collection", newCollectionState);
-        try {
-
-            if (!isNewCollection) {
-                const success = await saveCollection(newCollectionState);
-                if (success) {
-                    aiModifiedPaths?.clearAllPaths();
-                    formexController.resetForm({ values: newCollectionState });
-                    handleClose(newCollectionState as AdminCollection);
-                }
-                return;
-            }
-
-            if (currentView === "welcome") {
-                setNextMode();
-                formexController.resetForm({ values: newCollectionState });
-            } else if (currentView === "general") {
-                if (extraView || importConfig?.inUse) {
-                    formexController.resetForm({ values: newCollectionState });
-                    setNextMode();
-                } else if (isNewCollection) {
-                    const values = await inferCollectionFromData(newCollectionState);
-                    formexController.resetForm({
-                        values: values ?? newCollectionState,
-                        touched: {
-                            path: true,
-                            name: true
-                        }
-                    });
-                    setNextMode();
-                } else {
-                    formexController.resetForm({ values: newCollectionState });
-                    setNextMode();
-                }
-            } else if (currentView === "extra_view") {
-                setNextMode();
-                formexController.resetForm({ values: newCollectionState });
-            } else if (currentView === "import_data_mapping") {
-                setNextMode();
-            } else if (currentView === "import_data_preview") {
-                setNextMode();
-            } else if (currentView === "properties") {
-                const success = await saveCollection(newCollectionState);
-                if (success) {
-                    formexController.resetForm({ values: initialValues });
-                    setNextMode();
-                    handleClose(newCollectionState as AdminCollection);
-                }
-            } else {
-                setNextMode();
-                formexController.resetForm({ values: newCollectionState });
-            }
-        } catch (e: unknown) {
-            snackbarController.open({
-                type: "error",
-                message: "Error persisting collection: " + (e instanceof Error ? e.message : "Details in the console")
-            });
-            console.error(e);
-            formexController.resetForm({ values: newCollectionState });
-        }
-    };
-
-    const validation = (col: AdminCollection<M>) => {
-
-        let errors: Record<string, string> = {};
-        const schema = (currentView === "properties" || currentView === "general") && CollectionEditorSchema;
-        if (schema) {
-            const result = schema.safeParse(col);
-            if (!result.success) {
-                result.error.issues.forEach((issue) => {
-                    const path = issue.path.join(".");
-                    if (path) {
-                        errors[path] = issue.message;
-                    }
-                });
-            }
-        }
-        if (currentView === "properties") {
-            errors = { ...errors,
-...propertyErrorsRef.current };
-        }
-        if (currentView === "general") {
-            const pathError = validatePath(getTableName(col), isNewCollection, existingPaths, col.slug);
-            if (pathError) {
-                errors.slug = pathError;
-            }
-            const idError = validateId(col.slug, isNewCollection, existingPaths, existingIds);
-            if (idError) {
-                errors.id = idError;
-            }
-        }
-        if (Object.keys(errors).length > 0) {
-            console.error("Formex validation blocked save:", errors, "Current view:", currentView);
-        }
-        return errors;
-    };
-
-    const formController = useCreateFormex<AdminCollection<M>>({
-        initialValues,
-        onSubmit,
-        validation,
-        debugId: "COLLECTION_EDITOR"
-    });
-
-    const {
-        values,
-        setFieldValue,
-        isSubmitting,
-        dirty,
-        submitCount
-    } = formController;
-
-    const usedPath = getTableName(values);
-    const pathError = validatePath(usedPath, isNewCollection, existingPaths, values.slug);
-
-    const parentPaths = !pathError && parentCollectionSlugs ? collectionRegistryInternal.convertIdsToPaths(parentCollectionSlugs) : undefined;
-
-    const updatedFullPath = parentPaths && parentPaths.length > 0
-        ? [...parentPaths, usedPath].join("/fake_id/")
-        : (path?.includes("/") ? path.split("/").slice(0, -1).join("/") + "/" + usedPath : usedPath);
-
-    const resolvedPath = !pathError ? urlController.resolveDatabasePathsFrom(updatedFullPath) : undefined;
-    const getDataWithPath = resolvedPath && getData ? async () => {
-        const data = await getData!(resolvedPath, parentPaths ?? []);
-        if (existingEntities) {
-            const existingData = existingEntities.map(e => e.values);
-            data.push(...existingData);
-        }
-        return data;
-    } : undefined;
-
-    useEffect(() => {
-        setFormDirty(dirty);
-    }, [dirty]);
-
-    function onImportDataSet(data: object[], propertiesOrder?: string[]) {
-        importConfig?.setInUse(true);
-        buildEntityPropertiesFromData(data, getInferenceType)
-            .then((properties: unknown) => {
-                const res = cleanPropertiesFromImport(properties as Properties);
-
-                importConfig?.setIdColumn(res.idColumn);
-                importConfig?.setImportData(data);
-                importConfig?.setHeadersMapping(res.headersMapping);
-                const filteredHeadingsOrder = ((propertiesOrder ?? [])
-                    .filter((key) => res.headersMapping[key]) as string[]) ?? Object.keys(res.properties);
-                importConfig?.setHeadingsOrder(filteredHeadingsOrder);
-                importConfig?.setOriginProperties(res.properties);
-
-                const mappedHeadings = (propertiesOrder ?? []).map((key) => res.headersMapping[key]).filter(Boolean) as string[] ?? Object.keys(res.properties);
-                setFieldValue("properties", res.properties);
-                setFieldValue("propertiesOrder", mappedHeadings);
-            });
-    }
-
-    const validValues = Boolean(values.name) && Boolean(values.slug);
-
-    const onImportMappingComplete = () => {
-        const updatedProperties = { ...values.properties };
-        if (importConfig?.idColumn)
-            delete updatedProperties[importConfig.idColumn];
-        setFieldValue("properties", updatedProperties);
-        // setFieldValue("propertiesOrder", Object.values(importConfig.headersMapping));
-        setNextMode();
-    };
-
-    const [deleteRequested, setDeleteRequested] = useState(false);
-
-    const deleteCollection = () => {
-        if (!collection) return;
-        configController?.deleteCollection({ id: collection.slug }).then(() => {
-            setDeleteRequested(false);
-            handleCancel();
-            snackbarController.open({
-                message: "Collection deleted",
-                type: "success"
-            });
-        });
-    };
-
-    const onWelcomeScreenContinue = (importData?: object[], propertiesOrder?: string[]) => {
-        if (importData) {
-            onImportDataSet(importData, propertiesOrder);
-            setCurrentView("import_data_mapping");
-        } else {
-            setCurrentView("general");
-        }
-    };
-
-    const aiModifiedPaths = useAIModifiedPaths();
-
-    const handleAIGenerated = (generatedCollection: AdminCollection, operations?: CollectionOperation[]) => {
-        formController.setValues(generatedCollection as AdminCollection<M>);
-        if (operations && aiModifiedPaths) {
-            aiModifiedPaths.addModifiedPaths(operations);
-        }
-    };
-
-    return <div className="h-full w-full flex flex-col bg-surface-50 dark:bg-surface-800">
-        <Formex value={formController}>
-
-            <>
-                {!isNewCollection && <div className={cls("px-4 py-2 w-full flex shrink-0 items-center justify-between gap-4 bg-surface-50 dark:bg-surface-900 border-b", defaultBorderMixin)}>
-                    <div className="flex flex-1 items-center justify-end gap-4 min-w-0">
-                        <Tabs value={currentView}
-                            className="bg-transparent !w-fit max-w-full"
-                            onValueChange={(v) => setCurrentView(v as EditorView)}>
-                            {(!visibleTabs || visibleTabs.includes("general")) && <Tab value={"general"}>
-                                General
-                            </Tab>}
-                            {(!visibleTabs || visibleTabs.includes("display")) && <Tab value={"display"}>
-                                Display
-                            </Tab>}
-                            {(!visibleTabs || visibleTabs.includes("properties")) && <Tab value={"properties"}>
-                                Properties
-                            </Tab>}
-                            {(!visibleTabs || visibleTabs.includes("rls")) && getDataSourceCapabilities(values.engine).supportsRLS && <Tab value={"rls"}>
-                                RLS
-                            </Tab>}
-                        </Tabs>
-                    </div>
-                    <div className="flex items-center gap-4">
-                        {generateCollection && (
-                            <AICollectionGeneratorPopover
-                                existingCollection={values}
-                                onGenerated={handleAIGenerated}
-                                generateCollection={generateCollection}
-                                onAnalyticsEvent={onAnalyticsEvent}
-                            />
-                        )}
-                        {fullScreen && !isNewCollection && (
-                            <div className="flex items-center gap-2">
-                                {/* "(Read-only)" says the button will not work but not why.
-                                    The controller now carries the backend's own reason —
-                                    production, `baas` mode, no `collectionsDir` — so show it. */}
-                                <Tooltip title={configController?.readOnly ? readOnlyTitle : undefined}>
-                                    <div>
-                                        <LoadingButton
-                                            variant="filled"
-                                            color="primary"
-                                            type="submit"
-                                            onClick={() => formController.handleSubmit()}
-                                            disabled={!dirty || isSubmitting || configController?.readOnly}
-                                            loading={isSubmitting}
-                                        >
-                                            {configController?.readOnly ? "Update (Read-only)" : "Update"}
-                                        </LoadingButton>
-                                    </div>
-                                </Tooltip>
-                            </div>
-                        )}
-                    </div>
-                </div>}
-
-                <form noValidate
-                    onSubmit={formController.handleSubmit}
-                    className="flex-grow flex flex-col min-h-0 relative">
-
-                    <div className="flex-grow flex flex-col min-h-0 relative w-full h-full bg-surface-50 dark:bg-surface-800">
-
-                        {currentView === "loading" &&
-                            <CircularProgressCenter/>}
-
-                        {currentView === "extra_view" &&
-                            usedPath &&
-                            extraView?.View &&
-                            <extraView.View path={usedPath}/>}
-
-                        {currentView === "welcome" &&
-                            <CollectionEditorWelcomeView
-                                path={usedPath}
-                                onContinue={onWelcomeScreenContinue}
-                                existingCollectionPaths={existingPaths}
-                                parentCollection={parentCollection}
-                                generateCollection={generateCollection}
-                                onAnalyticsEvent={onAnalyticsEvent}
-                                unmappedTables={unmappedTables}
-                                onImportFromTable={onFetchTableMetadata ? async (tableName: string) => {
-                                    try {
-                                        const columns = await onFetchTableMetadata!(tableName);
-                                        if (!columns) return;
-                                        const collectionData = buildCollectionFromTableMetadata(tableName, columns);
-                                        formController.setValues({
-                                            ...formController.values,
-                                            ...collectionData
-                                        } as AdminCollection<M>);
-                                        onWelcomeScreenContinue();
-                                    } catch (e: unknown) {
-                                        console.error("Error importing table:", e);
-                                        snackbarController.open({
-                                            type: "error",
-                                            message: "Error importing table: " + (e instanceof Error ? e.message : "Unknown error")
-                                        });
-                                    }
-                                } : undefined}/>}
-
-                        {currentView === "import_data_mapping" && importConfig &&
-                            <CollectionEditorImportMapping importConfig={importConfig}
-                                propertyConfigs={propertyConfigs}/>}
-
-                        {currentView === "import_data_preview" && importConfig &&
-                            <CollectionEditorImportDataPreview importConfig={importConfig}
-                                properties={values.properties as Properties}
-                                propertiesOrder={values.propertiesOrder as string[]}/>}
-
-                        {currentView === "import_data_saving" && importConfig &&
-                            <ImportSaveInProgress importConfig={importConfig}
-                                collection={values}
-                                path={usedPath}
-                                onImportSuccess={async (importedCollection) => {
-                                    snackbarController.open({
-                                        type: "info",
-                                        message: "Data imported successfully"
-                                    });
-                                    await saveCollection(values);
-                                    handleClose(importedCollection);
-                                }}
-                            />}
-
-                        {currentView === "general" &&
-                            <GeneralSettingsForm
-                                isNewCollection={isNewCollection}
-                                existingPaths={existingPaths}
-                                existingIds={existingIds}
-                                parentCollection={parentCollection}
-                                renderExtraCollectionFields={renderExtraCollectionFields}
-                                standalone={standalone}/>
-                        }
-
-                        {currentView === "display" &&
-                            <DisplaySettingsForm expandKanban={expandKanban} standalone={standalone}/>
-                        }
-
-                        {currentView === "rls" && getDataSourceCapabilities(values.engine).supportsRLS &&
-                            <CollectionRLSTab/>
-                        }
-
-                        {currentView === "properties" &&
-                            <CollectionPropertiesEditorForm
-                                showErrors={submitCount > 0}
-                                isNewCollection={isNewCollection}
-                                onPropertyError={(propertyKey, namespace, error) => {
-                                    const current = removeUndefined({
-                                        ...propertyErrorsRef.current,
-                                        [getFullIdPath(propertyKey, namespace)]: removeUndefined(error, true)
-                                    }, true) as Record<string, any>;
-                                    propertyErrorsRef.current = current;
-                                    formController.validate();
-                                }}
-                                getUser={getUser}
-                                getData={getDataWithPath}
-                                doCollectionInference={doCollectionInference}
-                                propertyConfigs={propertyConfigs}
-                                propertyTypePresets={propertyTypePresets}
-                                hiddenPropertyTypes={hiddenPropertyTypes}
-                                renderExtraPropertyFields={renderExtraPropertyFields}
-                                extraIcon={extraView?.icon &&
-                                    <IconButton
-                                        color={"primary"}
-                                        onClick={() => setCurrentView("extra_view")}>
-                                        {extraView.icon}
-                                    </IconButton>}
-                                standalone={standalone}/>
-                        }
-
-                    </div>
-                    {(!fullScreen || isNewCollection || !!error) && (
-                        <div className="shrink-0 w-full p-4 sm:px-6 sm:py-4 border-t border-surface-200 dark:border-surface-900 flex items-center justify-between gap-4 bg-surface-50 dark:bg-surface-900">
-                            {error && <ErrorView error={error}/>}
-
-                            {isNewCollection && includeTemplates && currentView === "import_data_mapping" &&
-                                <Button variant={"text"}
-                                    type="button"
-                                    onClick={() => {
-                                        importConfig?.setInUse(false);
-                                        return setCurrentView("welcome");
-                                    }}>
-                                    Back
-                                </Button>}
-
-                            {isNewCollection && includeTemplates && currentView === "import_data_preview" &&
-                                <Button variant={"text"}
-                                    type="button"
-                                    onClick={() => {
-                                        setCurrentView("import_data_mapping");
-                                    }}>
-                                    Back
-                                </Button>}
-
-                            {isNewCollection && includeTemplates && currentView === "general" &&
-                                <Button variant={"text"}
-                                    type="button"
-                                    onClick={() => setCurrentView("welcome")}>
-                                    Back
-                                </Button>}
-
-                            {isNewCollection && currentView === "properties" && <Button variant={"text"}
-                                type="button"
-                                color={"neutral"}
-                                onClick={() => setCurrentView("general")}>
-                                <ArrowLeftIcon/>
-                                Back
-                            </Button>}
-
-                            {(!fullScreen || isNewCollection) && (
-                                <Button variant={"text"}
-                                    color={"neutral"}
-                                    onClick={() => {
-                                        handleCancel();
-                                    }}>
-                                    Cancel
-                                </Button>
-                            )}
-
-                            {currentView === "welcome" &&
-                                <Button variant={"text"} onClick={() => onWelcomeScreenContinue()}>
-                                    Continue from scratch
-                                </Button>}
-
-                            {isNewCollection && currentView === "import_data_mapping" &&
-                                <Button
-                                    variant={"filled"}
-                                    color="primary"
-                                    onClick={onImportMappingComplete}
-                                >
-                                    Next
-                                </Button>}
-
-                            {isNewCollection && currentView === "import_data_preview" &&
-                                <Button
-                                    variant={"filled"}
-                                    color="primary"
-                                    onClick={() => {
-                                        setNextMode();
-                                    }}
-                                >
-                                    Next
-                                </Button>}
-
-                            {isNewCollection && (currentView === "general" || currentView === "properties") &&
-                                <LoadingButton
-                                    variant={"filled"}
-                                    color="primary"
-                                    type="submit"
-                                    loading={isSubmitting}
-                                    disabled={isSubmitting || (currentView === "general" && !validValues) || configController?.readOnly}
-                                    startIcon={currentView === "properties"
-                                        ? <CheckIcon/>
-                                        : undefined}
-                                >
-                                    {currentView === "general" && "Next"}
-                                    {currentView === "properties" && "Create collection"}
-                                </LoadingButton>}
-
-                            {!isNewCollection && !fullScreen && <Tooltip title={configController?.readOnly ? readOnlyTitle : undefined}>
-                                <div>
-                                    <LoadingButton
-                                        variant="filled"
-                                        color="primary"
-                                        type="submit"
-                                        disabled={isSubmitting || configController?.readOnly}
-                                        loading={isSubmitting}
-                                    >
-                                        {configController?.readOnly ? "Update collection (Read-only)" : "Update collection"}
-                                    </LoadingButton>
-                                </div>
-                            </Tooltip>}
-
-                        </div>
-                    )}
-                </form>
-            </>
-
-        </Formex>
-
-        <ConfirmationDialog
-            open={deleteRequested}
-            onAccept={deleteCollection}
-            onCancel={() => setDeleteRequested(false)}
-            title={<>Delete the stored config?</>}
-            body={<> This will <b>not
-                delete any data</b>, only
-                the stored config, and reset to the code state.</>}/>
-
-    </div>
-
-}
-
-function applyPropertyConfigs<M extends Record<string, unknown> = Record<string, unknown>>(collection: AdminCollection<M>, propertyConfigs: Record<string, PropertyConfig>): AdminCollection<M> {
-    const {
-        properties,
-        ...rest
-    } = collection;
-    const propertiesResult: Properties = {};
-    if (properties) {
-        Object.keys(properties).forEach((key) => {
-            const prop = properties[key];
-            if (prop == null) return;
-            propertiesResult[key] = applyPropertiesConfig(prop, propertyConfigs);
-        });
-    }
-
-    return {
-        ...rest,
-        properties: propertiesResult as EngineProperties
-    } as AdminCollection<M>;
-}
-
-function applyPropertiesConfig(property: Property, propertyConfigs: Record<string, PropertyConfig>) {
-    let internalProperty = property;
-    if (propertyConfigs && internalProperty && typeof internalProperty === "object" && internalProperty.propertyConfig) {
-        const propertyConfig = propertyConfigs[internalProperty.propertyConfig];
-        if (propertyConfig && isPropertyBuilder(propertyConfig.property as Property)) {
-            internalProperty = propertyConfig.property as Property;
-        } else {
-
-            if (propertyConfig) {
-                internalProperty = mergeDeep(propertyConfig.property as Property, internalProperty);
-            }
-
-            if (!isPropertyBuilder(internalProperty) && internalProperty.type === "map" && internalProperty.properties) {
-                const properties: Record<string, Property> = {};
-                Object.keys(internalProperty.properties).forEach((key) => {
-                    properties[key] = applyPropertiesConfig(((internalProperty as MapProperty).properties as Properties)[key] as Property, propertyConfigs);
-                });
-                internalProperty = {
-                    ...internalProperty,
-                    properties
-                };
-            }
-
-        }
-    }
-    return internalProperty;
-
-}
-
-const validatePath = (value: string, isNewCollection: boolean, existingPaths: string[], idValue?: string) => {
-    let error;
-    if (!value) {
-        error = "You must specify a path in the database for this collection";
-    }
-    // if (isNewCollection && existingIds?.includes(value.trim().toLowerCase()))
-    //     error = "There is already a collection which uses this path as an id";
-    if (isNewCollection && existingPaths?.includes(value.trim().toLowerCase()) && !idValue)
-        error = "There is already a collection with the specified path. If you want to have multiple collections referring to the same database path, make sure the have different ids";
-
-    const subpaths = removeInitialAndTrailingSlashes(value).split("/");
-    if (subpaths.length % 2 === 0) {
-        error = `Collection paths must have an odd number of segments: ${value}`;
-    }
-    return error;
-};
-
-const validateId = (value: string, isNewCollection: boolean, existingPaths: string[], existingIds: string[]) => {
-    if (!value) return undefined;
-    let error;
-    if (isNewCollection && existingPaths?.includes(value.trim().toLowerCase()))
-        error = "There is already a collection that uses this value as a path";
-    if (isNewCollection && existingIds?.includes(value.trim().toLowerCase()))
-        error = "There is already a collection which uses this id";
-    // if (error) {
-    //     setAdvancedPanelExpanded(true);
-    // }
-    return error;
-};