@firecms/collection_editor 3.0.0-beta.2-pre.2 → 3.0.0-beta.2-pre.4

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -2,7 +2,6 @@ import * as React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import {
     CircularProgressCenter,
-    CMSType,
     EntityCollection,
     ErrorView,
     isPropertyBuilder,
@@ -36,9 +35,8 @@ import {
     IconButton,
     LoadingButton,
     Tab,
-    Tabs,
+    Tabs
 } from "@firecms/ui";
-import { Form, Formik, FormikHelpers } from "formik";
 import { YupSchema } from "./CollectionYupValidation";
 import { CollectionDetailsForm } from "./CollectionDetailsForm";
 import { CollectionPropertiesEditorForm } from "./CollectionPropertiesEditorForm";
@@ -53,6 +51,8 @@ import { CollectionEditorImportMapping } from "./import/CollectionEditorImportMa
 import { CollectionEditorImportDataPreview } from "./import/CollectionEditorImportDataPreview";
 import { cleanPropertiesFromImport } from "./import/clean_import_data";
 import { PersistedCollection } from "../../types/persisted_collection";
+import { Formex, FormexController, useCreateFormex } from "@firecms/formex";
+import { getFullIdPath } from "./util";
 
 export interface CollectionEditorDialogProps {
     open: boolean;
@@ -62,7 +62,7 @@ export interface CollectionEditorDialogProps {
         path?: string,
         name?: string,
     }
-    editedCollectionPath?: string; // last segment of the path, like `locales`
+    editedCollectionId?: string;
     fullPath?: string; // full path of this particular collection, like `products/123/locales`
     parentCollectionIds?: string[]; // path ids of the parent collection, like [`products`]
     handleClose: (collection?: EntityCollection) => void;
@@ -112,9 +112,9 @@ export function CollectionEditorDialog(props: CollectionEditorDialogProps) {
             maxWidth={"7xl"}
             onOpenChange={(open) => !open ? handleCancel() : undefined}
         >
-            {open && <CollectionEditorDialogInternal {...props}
-                                                     handleCancel={handleCancel}
-                                                     setFormDirty={setFormDirty}/>}
+            {open && <CollectionEditor {...props}
+                                       handleCancel={handleCancel}
+                                       setFormDirty={setFormDirty}/>}
 
             <UnsavedChangesDialog
                 open={unsavedChangesDialogOpen}
@@ -136,45 +136,41 @@ type EditorView = "welcome"
     | "extra_view"
     | "subcollections";
 
-export function CollectionEditorDialogInternal<M extends {
-    [Key: string]: CMSType
-}>({
-       isNewCollection,
-       initialValues: initialValuesProp,
-       configController,
-       editedCollectionPath,
-       parentCollectionIds,
-       fullPath,
-       collectionInference,
-       handleClose,
-       reservedGroups,
-       extraView,
-       handleCancel,
-       setFormDirty,
-       pathSuggestions,
-       getUser,
-       parentCollection,
-       getData
-   }: CollectionEditorDialogProps & {
-       handleCancel: () => void,
-       setFormDirty: (dirty: boolean) => void
-   }
-) {
-
+export function CollectionEditor<M extends Record<string, any>>(props: CollectionEditorDialogProps & {
+    handleCancel: () => void,
+    setFormDirty: (dirty: boolean) => void
+}) {
     const { propertyConfigs } = useCustomizationController();
     const navigation = useNavigationController();
+    const authController = useAuthController();
+
     const {
         topLevelNavigation,
         collections
     } = navigation;
 
-    const includeTemplates = !initialValuesProp?.path && (parentCollectionIds ?? []).length === 0;
-    const collectionsInThisLevel = (parentCollection ? parentCollection.subcollections : collections) ?? [];
+    const initialValuesProp = props.initialValues;
+    const includeTemplates = !initialValuesProp?.path && (props.parentCollectionIds ?? []).length === 0;
+    const collectionsInThisLevel = (props.parentCollection ? props.parentCollection.subcollections : collections) ?? [];
     const existingPaths = collectionsInThisLevel.map(col => col.path.trim().toLowerCase());
     const existingIds = collectionsInThisLevel.map(col => col.id?.trim().toLowerCase()).filter(Boolean) as string[];
+    const [collection, setCollection] = React.useState<PersistedCollection<M> | undefined>();
+    const [initialLoadingCompleted, setInitialLoadingCompleted] = React.useState(false);
 
-    const importConfig = useImportConfig();
-
+    useEffect(() => {
+        try {
+            if (navigation.initialised) {
+                if (props.editedCollectionId) {
+                    setCollection(navigation.getCollectionFromPaths<PersistedCollection<M>>([...(props.parentCollectionIds ?? []), props.editedCollectionId]));
+                } else {
+                    setCollection(undefined);
+                }
+                setInitialLoadingCompleted(true);
+            }
+        } catch (e) {
+            console.error(e);
+        }
+    }, [navigation.getCollectionFromPaths, props.editedCollectionId, props.parentCollectionIds, navigation.initialised]);
     if (!topLevelNavigation) {
         throw Error("Internal: Navigation not ready in collection editor");
     }
@@ -183,8 +179,88 @@ export function CollectionEditorDialogInternal<M extends {
         groups
     }: TopNavigationResult = topLevelNavigation;
 
+    const initialCollection = collection
+        ? {
+            ...collection,
+            id: collection.id ?? collection.path ?? randomString(16)
+        }
+        : undefined;
+
+    const initialValues: PersistedCollection<M> = initialCollection
+        ? applyPropertyConfigs(initialCollection, propertyConfigs)
+        : {
+            id: initialValuesProp?.path ?? randomString(16),
+            path: initialValuesProp?.path ?? "",
+            name: initialValuesProp?.name ?? "",
+            group: initialValuesProp?.group ?? "",
+            properties: {} as PropertiesOrBuilders<M>,
+            propertiesOrder: [],
+            icon: coolIconKeys[Math.floor(Math.random() * coolIconKeys.length)],
+            ownerId: authController.user?.uid ?? ""
+        };
+
+    if (!initialLoadingCompleted) {
+        return <CircularProgressCenter/>;
+    }
+
+    if (!props.isNewCollection && (!navigation.initialised || !initialLoadingCompleted)) {
+        return <CircularProgressCenter/>;
+    }
+
+    return <CollectionEditorInternal
+        {...props}
+        initialValues={initialValues}
+        existingPaths={existingPaths}
+        existingIds={existingIds}
+        includeTemplates={includeTemplates}
+        collection={collection}
+        setCollection={setCollection}
+        groups={groups}
+        propertyConfigs={propertyConfigs}/>
+
+}
+
+function CollectionEditorInternal<M extends Record<string, any>>({
+                                                                     isNewCollection,
+                                                                     configController,
+                                                                     editedCollectionId,
+                                                                     parentCollectionIds,
+                                                                     fullPath,
+                                                                     collectionInference,
+                                                                     handleClose,
+                                                                     reservedGroups,
+                                                                     extraView,
+                                                                     handleCancel,
+                                                                     setFormDirty,
+                                                                     pathSuggestions,
+                                                                     getUser,
+                                                                     parentCollection,
+                                                                     getData,
+                                                                     existingPaths,
+                                                                     existingIds,
+                                                                     includeTemplates,
+                                                                     collection,
+                                                                     setCollection,
+                                                                     initialValues,
+                                                                     propertyConfigs,
+                                                                     groups
+                                                                 }: CollectionEditorDialogProps & {
+                                                                     handleCancel: () => void,
+                                                                     setFormDirty: (dirty: boolean) => void,
+                                                                     initialValues: PersistedCollection<M>,
+                                                                     existingPaths: string[],
+                                                                     existingIds: string[],
+                                                                     includeTemplates: boolean,
+                                                                     collection: PersistedCollection<M> | undefined,
+                                                                     setCollection: (collection: PersistedCollection<M>) => void,
+                                                                     propertyConfigs: Record<string, PropertyConfig<any>>,
+                                                                     groups: string[],
+                                                                 }
+) {
+
+    const importConfig = useImportConfig();
+    const navigation = useNavigationController();
     const snackbarController = useSnackbarController();
-    const authController = useAuthController();
 
     // Use this ref to store which properties have errors
     const propertyErrorsRef = useRef({});
@@ -194,32 +270,12 @@ export function CollectionEditorDialogInternal<M extends {
 
     const [error, setError] = React.useState<Error | undefined>();
 
-    const [collection, setCollection] = React.useState<PersistedCollection<M> | undefined>();
-    const [initialLoadingCompleted, setInitialLoadingCompleted] = React.useState(false);
-    const [initialError, setInitialError] = React.useState<Error | undefined>();
-
-    useEffect(() => {
-        try {
-            if (navigation.initialised) {
-                if (editedCollectionPath) {
-                    setCollection(navigation.getCollectionFromPaths<PersistedCollection<M>>([...(parentCollectionIds ?? []), editedCollectionPath]));
-                } else {
-                    setCollection(undefined);
-                }
-                setInitialLoadingCompleted(true);
-            }
-        } catch (e) {
-            console.error(e);
-            setInitialError(initialError);
-        }
-    }, [navigation.getCollectionFromPaths, editedCollectionPath, initialError, navigation.initialised]);
-
     const saveCollection = (updatedCollection: PersistedCollection<M>): Promise<boolean> => {
-        const fullPath = updatedCollection.id || updatedCollection.path;
+        const id = updatedCollection.id || updatedCollection.path;
         return configController.saveCollection({
-            id: fullPath,
+            id,
             collectionData: updatedCollection,
-            previousPath: editedCollectionPath,
+            previousId: editedCollectionId,
             parentCollectionIds
         })
             .then(() => {
@@ -237,26 +293,6 @@ export function CollectionEditorDialogInternal<M extends {
             });
     };
 
-    const initialCollection = collection
-        ? {
-            ...collection,
-            id: collection.id ?? collection.path ?? randomString(16)
-        }
-        : undefined;
-
-    const initialValues: PersistedCollection<M> = initialCollection
-        ? applyPropertyConfigs(initialCollection, propertyConfigs)
-        : {
-            id: initialValuesProp?.path ?? randomString(16),
-            path: initialValuesProp?.path ?? "",
-            name: initialValuesProp?.name ?? "",
-            group: initialValuesProp?.group ?? "",
-            properties: {} as PropertiesOrBuilders<M>,
-            propertiesOrder: [],
-            icon: coolIconKeys[Math.floor(Math.random() * coolIconKeys.length)],
-            ownerId: authController.user?.uid ?? ""
-        };
-
     const setNextMode = useCallback(() => {
         if (currentView === "details") {
             if (importConfig.inUse) {
@@ -316,7 +352,7 @@ export function CollectionEditorDialogInternal<M extends {
             }
 
             setCollection(values);
-            console.log("Inferred collection", {
+            console.debug("Inferred collection", {
                 newCollection: newCollection ?? {},
                 values
             });
@@ -331,13 +367,13 @@ export function CollectionEditorDialogInternal<M extends {
         }
     }, [parentCollectionIds, doCollectionInference]);
 
-    const onSubmit = (newCollectionState: PersistedCollection<M>, formikHelpers: FormikHelpers<PersistedCollection<M>>) => {
+    const onSubmit = (newCollectionState: PersistedCollection<M>, formexController: FormexController<PersistedCollection<M>>) => {
+        console.log("Submitting collection", newCollectionState);
         try {
 
-            console.log("Submitting collection", newCollectionState)
             if (!isNewCollection) {
                 saveCollection(newCollectionState).then(() => {
-                    formikHelpers.resetForm({ values: initialValues });
+                    formexController.resetForm({ values: initialValues });
                     // setNextMode();
                     handleClose(newCollectionState);
                 });
@@ -346,15 +382,15 @@ export function CollectionEditorDialogInternal<M extends {
 
             if (currentView === "welcome") {
                 setNextMode();
-                formikHelpers.resetForm({ values: newCollectionState });
+                formexController.resetForm({ values: newCollectionState });
             } else if (currentView === "details") {
                 if (extraView || importConfig.inUse) {
-                    formikHelpers.resetForm({ values: newCollectionState });
+                    formexController.resetForm({ values: newCollectionState });
                     setNextMode();
                 } else if (isNewCollection) {
                     inferCollectionFromData(newCollectionState)
                         .then((values) => {
-                            formikHelpers.resetForm({
+                            formexController.resetForm({
                                 values: values ?? newCollectionState,
                                 touched: {
                                     path: true,
@@ -365,25 +401,25 @@ export function CollectionEditorDialogInternal<M extends {
                         setNextMode();
                     });
                 } else {
-                    formikHelpers.resetForm({ values: newCollectionState });
+                    formexController.resetForm({ values: newCollectionState });
                     setNextMode();
                 }
             } else if (currentView === "extra_view") {
                 setNextMode();
-                formikHelpers.resetForm({ values: newCollectionState });
+                formexController.resetForm({ values: newCollectionState });
             } else if (currentView === "import_data_mapping") {
                 setNextMode();
             } else if (currentView === "import_data_preview") {
                 setNextMode();
             } else if (currentView === "properties") {
                 saveCollection(newCollectionState).then(() => {
-                    formikHelpers.resetForm({ values: initialValues });
+                    formexController.resetForm({ values: initialValues });
                     setNextMode();
                     handleClose(newCollectionState);
                 });
             } else {
                 setNextMode();
-                formikHelpers.resetForm({ values: newCollectionState });
+                formexController.resetForm({ values: newCollectionState });
             }
         } catch (e: any) {
             snackbarController.open({
@@ -391,298 +427,308 @@ export function CollectionEditorDialogInternal<M extends {
                 message: "Error persisting collection: " + (e.message ?? "Details in the console")
             });
             console.error(e);
-            formikHelpers.resetForm({ values: newCollectionState });
+            formexController.resetForm({ values: newCollectionState });
         }
     };
 
-    if (!isNewCollection && (!navigation.initialised || !initialLoadingCompleted)) {
-        return <CircularProgressCenter/>;
+    const validation = (col: PersistedCollection) => {
+
+        let errors: Record<string, any> = {};
+        const schema = (currentView === "properties" || currentView === "subcollections" || currentView === "details") && YupSchema;
+        if (schema) {
+            try {
+                schema.validateSync(col, { abortEarly: false });
+            } catch (e: any) {
+                e.inner.forEach((err: any) => {
+                    errors[err.path] = err.message;
+                });
+            }
+        }
+        if (currentView === "properties") {
+            errors = { ...errors, ...propertyErrorsRef.current };
+        }
+        if (currentView === "details") {
+            const pathError = validatePath(col.path, isNewCollection, existingPaths, col.id);
+            if (pathError) {
+                errors.path = pathError;
+            }
+            const idError = validateId(col.id, isNewCollection, existingPaths, existingIds);
+            if (idError) {
+                errors.id = idError;
+            }
+        }
+        return errors;
+    };
+
+    const formController = useCreateFormex<PersistedCollection<M>>({
+        initialValues,
+        onSubmit,
+        validation
+    });
+
+    const {
+        values,
+        setFieldValue,
+        isSubmitting,
+        dirty,
+        submitCount
+    } = formController;
+
+    const path = values.path ?? editedCollectionId;
+    const updatedFullPath = fullPath?.includes("/") ? fullPath?.split("/").slice(0, -1).join("/") + "/" + path : path; // TODO: this path is wrong
+    const pathError = validatePath(path, isNewCollection, existingPaths, values.id);
+
+    const parentPaths = !pathError && parentCollectionIds ? navigation.convertIdsToPaths(parentCollectionIds) : undefined;
+    const resolvedPath = !pathError ? navigation.resolveAliasesFrom(updatedFullPath) : undefined;
+    const getDataWithPath = resolvedPath && getData ? () => getData(resolvedPath, parentPaths ?? []) : undefined;
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useEffect(() => {
+        setFormDirty(dirty);
+    }, [dirty]);
+
+    function onImportDataSet(data: object[]) {
+        importConfig.setInUse(true);
+        buildEntityPropertiesFromData(data, getInferenceType)
+            .then((properties) => {
+                const res = cleanPropertiesFromImport(properties);
+
+                setFieldValue("properties", res.properties);
+                setFieldValue("propertiesOrder", Object.keys(res.properties));
+
+                importConfig.setIdColumn(res.idColumn);
+                importConfig.setImportData(data);
+                importConfig.setHeadersMapping(res.headersMapping);
+                importConfig.setOriginProperties(res.properties);
+            });
     }
 
+    const validValues = Boolean(values.name) && Boolean(values.id);
+
+    const onImportMappingComplete = () => {
+        const updatedProperties = { ...values.properties };
+        if (importConfig.idColumn)
+            delete updatedProperties[importConfig.idColumn];
+        setFieldValue("properties", updatedProperties);
+        // setFieldValue("propertiesOrder", Object.values(importConfig.headersMapping));
+        setNextMode();
+    };
+
+    const editable = collection?.editable === undefined || collection?.editable === true;
+    const collectionEditable = editable || isNewCollection;
+
     return <DialogContent fullHeight={true}>
-        <Formik
-            initialValues={initialValues}
-            validationSchema={(currentView === "properties" || currentView === "subcollections" || currentView === "details") && YupSchema}
-            validate={(v) => {
-                if (currentView === "properties") {
-                    // return the errors for the properties form
-                    return propertyErrorsRef.current;
-                }
-                const errors: Record<string, any> = {};
-                if (currentView === "details") {
-                    const pathError = validatePath(v.path, isNewCollection, existingPaths, v.id);
-                    if (pathError) {
-                        errors.path = pathError;
-                    }
-                    const idError = validateId(v.id, isNewCollection, existingPaths, existingIds);
-                    if (idError) {
-                        errors.id = idError;
+        <Formex value={formController}>
+
+            <>
+                {!isNewCollection && <Tabs value={currentView}
+                                           className={cn(defaultBorderMixin, "justify-end bg-gray-50 dark:bg-gray-950 border-b")}
+                                           onValueChange={(v) => setCurrentView(v as EditorView)}>
+                    <Tab value={"details"}>
+                        Details
+                    </Tab>
+                    <Tab value={"properties"}>
+                        Properties
+                    </Tab>
+                    <Tab value={"subcollections"}>
+                        Additional views
+                    </Tab>
+                </Tabs>}
+
+                <form noValidate
+                      onSubmit={formController.handleSubmit}
+                      className={cn(
+                          isNewCollection ? "h-full" : "h-[calc(100%-48px)]",
+                          "flex-grow flex flex-col relative")}>
+
+                    {currentView === "loading" &&
+                        <CircularProgressCenter/>}
+
+                    {currentView === "extra_view" &&
+                        path &&
+                        extraView?.View &&
+                        <extraView.View path={path}/>}
+
+                    {currentView === "welcome" &&
+                        <CollectionEditorWelcomeView
+                            path={path}
+                            onContinue={(data) => {
+                                if (data) {
+                                    onImportDataSet(data);
+                                    setCurrentView("import_data_mapping");
+                                } else {
+                                    setCurrentView("details");
+                                }
+                            }}
+                            existingCollectionPaths={existingPaths}
+                            parentCollection={parentCollection}
+                            pathSuggestions={pathSuggestions}/>}
+
+                    {currentView === "import_data_mapping" && importConfig &&
+                        <CollectionEditorImportMapping importConfig={importConfig}
+                                                       collectionEditable={collectionEditable}
+                                                       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}
+                                              onImportSuccess={(importedCollection) => {
+                                                  handleClose(importedCollection);
+                                                  snackbarController.open({
+                                                      type: "info",
+                                                      message: "Data imported successfully"
+                                                  });
+                                              }}
+                        />}
+
+                    {currentView === "details" &&
+                        <CollectionDetailsForm
+                            existingPaths={existingPaths}
+                            existingIds={existingIds}
+                            groups={groups}
+                            parentCollectionIds={parentCollectionIds}
+                            parentCollection={parentCollection}
+                            isNewCollection={isNewCollection}/>}
+
+                    {currentView === "subcollections" && collection &&
+                        <SubcollectionsEditTab
+                            parentCollection={parentCollection}
+                            configController={configController}
+                            getUser={getUser}
+                            collectionInference={collectionInference}
+                            parentCollectionIds={parentCollectionIds}
+                            collection={collection}/>}
+
+                    {currentView === "properties" &&
+                        <CollectionPropertiesEditorForm
+                            showErrors={submitCount > 0}
+                            isNewCollection={isNewCollection}
+                            reservedGroups={reservedGroups}
+                            onPropertyError={(propertyKey, namespace, error) => {
+                                const current = removeUndefined({
+                                    ...propertyErrorsRef.current,
+                                    [getFullIdPath(propertyKey, namespace)]: removeUndefined(error, true)
+                                }, true);
+                                propertyErrorsRef.current = current;
+                                formController.validate();
+                            }}
+                            getUser={getUser}
+                            getData={getDataWithPath}
+                            doCollectionInference={doCollectionInference}
+                            propertyConfigs={propertyConfigs}
+                            collectionEditable={collectionEditable}
+                            extraIcon={extraView?.icon &&
+                                <IconButton
+                                    color={"primary"}
+                                    onClick={() => setCurrentView("extra_view")}>
+                                    {extraView.icon}
+                                </IconButton>}/>
                     }
-                }
-                return errors;
-            }}
-            onSubmit={onSubmit}
-        >
-            {(formikHelpers) => {
-                const {
-                    values,
-                    errors,
-                    setFieldValue,
-                    isSubmitting,
-                    dirty,
-                    submitCount
-                } = formikHelpers;
-
-                const path = values.path ?? editedCollectionPath;
-                const updatedFullPath = fullPath?.includes("/") ? fullPath?.split("/").slice(0, -1).join("/") + "/" + path : path; // TODO: this path is wrong
-                const pathError = validatePath(path, isNewCollection, existingPaths, values.id);
-
-                const parentPaths = !pathError && parentCollectionIds ? navigation.convertIdsToPaths(parentCollectionIds) : undefined;
-                const resolvedPath = !pathError ? navigation.resolveAliasesFrom(updatedFullPath) : undefined;
-                const getDataWithPath = resolvedPath && getData ? () => getData(resolvedPath, parentPaths ?? []) : undefined;
-
-                // eslint-disable-next-line react-hooks/rules-of-hooks
-                useEffect(() => {
-                    setFormDirty(dirty);
-                }, [dirty]);
-
-                function onImportDataSet(data: object[]) {
-                    importConfig.setInUse(true);
-                    buildEntityPropertiesFromData(data, getInferenceType)
-                        .then((properties) => {
-                            const res = cleanPropertiesFromImport(properties);
-
-                            setFieldValue("properties", res.properties);
-                            setFieldValue("propertiesOrder", Object.keys(res.properties));
-
-                            importConfig.setIdColumn(res.idColumn);
-                            importConfig.setImportData(data);
-                            importConfig.setHeadersMapping(res.headersMapping);
-                            importConfig.setOriginProperties(res.properties);
-                        });
-                }
 
-                const validValues = Boolean(values.name) && Boolean(values.id);
+                    {currentView !== "welcome" && <DialogActions
+                        position={"absolute"}>
+                        {error && <ErrorView error={error}/>}
+
+                        {isNewCollection && includeTemplates && currentView === "import_data_mapping" &&
+                            <Button variant={"text"}
+                                    type="button"
+                                    onClick={() => {
+                                        importConfig.setInUse(false);
+                                        return setCurrentView("welcome");
+                                    }}>
+                                <ArrowBackIcon/>
+                                Back
+                            </Button>}
+
+                        {isNewCollection && includeTemplates && currentView === "import_data_preview" &&
+                            <Button variant={"text"}
+                                    type="button"
+                                    onClick={() => {
+                                        saveCollection(values);
+                                        setCurrentView("import_data_mapping");
+                                    }}>
+                                <ArrowBackIcon/>
+                                Back
+                            </Button>}
+
+                        {isNewCollection && includeTemplates && currentView === "details" &&
+                            <Button variant={"text"}
+                                    type="button"
+                                    onClick={() => setCurrentView("welcome")}>
+                                <ArrowBackIcon/>
+                                Back
+                            </Button>}
+
+                        {isNewCollection && currentView === "properties" && <Button variant={"text"}
+                                                                                    type="button"
+                                                                                    onClick={() => setCurrentView("details")}>
+                            <ArrowBackIcon/>
+                            Back
+                        </Button>}
+
+                        <Button variant={"text"}
+                                onClick={() => {
+                                    handleCancel();
+                                }}>
+                            Cancel
+                        </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 === "details" || currentView === "properties") &&
+                            <LoadingButton
+                                variant={"filled"}
+                                color="primary"
+                                type="submit"
+                                loading={isSubmitting}
+                                disabled={isSubmitting || (currentView === "details" && !validValues)}
+                                startIcon={currentView === "properties"
+                                    ? <DoneIcon/>
+                                    : undefined}
+                            >
+                                {currentView === "details" && "Next"}
+                                {currentView === "properties" && "Create collection"}
+                            </LoadingButton>}
+
+                        {!isNewCollection && <LoadingButton
+                            variant="filled"
+                            color="primary"
+                            type="submit"
+                            loading={isSubmitting}
+                            // disabled={isSubmitting || !dirty}
+                        >
+                            Update collection
+                        </LoadingButton>}
+
+                    </DialogActions>}
+                </form>
+            </>
+
+        </Formex>
 
-                const onImportMappingComplete = () => {
-                    const updatedProperties = { ...values.properties };
-                    if (importConfig.idColumn)
-                        delete updatedProperties[importConfig.idColumn];
-                    setFieldValue("properties", updatedProperties);
-                    // setFieldValue("propertiesOrder", Object.values(importConfig.headersMapping));
-                    setNextMode();
-                };
-
-                const editable = collection?.editable === undefined || collection?.editable === true;
-                const collectionEditable = editable || isNewCollection;
-                return (
-                    <>
-                        {!isNewCollection && <Tabs value={currentView}
-                                                   className={cn(defaultBorderMixin, "justify-end bg-gray-50 dark:bg-gray-950 border-b")}
-                                                   onValueChange={(v) => setCurrentView(v as EditorView)}>
-                            <Tab value={"details"}>
-                                Details
-                            </Tab>
-                            <Tab value={"properties"}>
-                                Properties
-                            </Tab>
-                            <Tab value={"subcollections"}>
-                                Additional views
-                            </Tab>
-                        </Tabs>}
-
-                        <Form noValidate
-                              className={cn(
-                                  isNewCollection ? "h-full" : "h-[calc(100%-48px)]",
-                                  "flex-grow flex flex-col relative")}>
-
-                            {currentView === "loading" &&
-                                <CircularProgressCenter/>}
-
-                            {currentView === "extra_view" &&
-                                path &&
-                                extraView?.View &&
-                                <extraView.View path={path}/>}
-
-                            {currentView === "welcome" &&
-                                <CollectionEditorWelcomeView
-                                    path={path}
-                                    onContinue={(data) => {
-                                        if (data) {
-                                            onImportDataSet(data);
-                                            setCurrentView("import_data_mapping");
-                                        } else {
-                                            setCurrentView("details");
-                                        }
-                                    }}
-                                    collections={collections}
-                                    parentCollection={parentCollection}
-                                    pathSuggestions={pathSuggestions}/>}
-
-                            {currentView === "import_data_mapping" && importConfig &&
-                                <CollectionEditorImportMapping importConfig={importConfig}
-                                                               collectionEditable={collectionEditable}
-                                                               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}
-                                                      onImportSuccess={(importedCollection) => {
-                                                          handleClose(importedCollection);
-                                                          snackbarController.open({
-                                                              type: "info",
-                                                              message: "Data imported successfully"
-                                                          });
-                                                      }}
-                                />}
-
-                            {currentView === "details" &&
-                                <CollectionDetailsForm
-                                    existingPaths={existingPaths}
-                                    existingIds={existingIds}
-                                    groups={groups}
-                                    parentCollectionIds={parentCollectionIds}
-                                    parentCollection={parentCollection}
-                                    isNewCollection={isNewCollection}/>}
-
-                            {currentView === "subcollections" && collection &&
-                                <SubcollectionsEditTab
-                                    parentCollection={parentCollection}
-                                    configController={configController}
-                                    getUser={getUser}
-                                    collectionInference={collectionInference}
-                                    parentCollectionIds={parentCollectionIds}
-                                    collection={collection}/>}
-
-                            {currentView === "properties" &&
-                                <CollectionPropertiesEditorForm
-                                    showErrors={submitCount > 0}
-                                    isNewCollection={isNewCollection}
-                                    reservedGroups={reservedGroups}
-                                    onPropertyError={(propertyKey, namespace, error) => {
-                                        propertyErrorsRef.current = removeUndefined({
-                                            ...propertyErrorsRef.current,
-                                            [propertyKey]: error
-                                        }, true);
-                                    }}
-                                    getUser={getUser}
-                                    getData={getDataWithPath}
-                                    doCollectionInference={doCollectionInference}
-                                    propertyConfigs={propertyConfigs}
-                                    collectionEditable={collectionEditable}
-                                    extraIcon={extraView?.icon &&
-                                        <IconButton
-                                            color={"primary"}
-                                            onClick={() => setCurrentView("extra_view")}>
-                                            {extraView.icon}
-                                        </IconButton>}/>
-                            }
-
-                            {currentView !== "welcome" && <DialogActions
-                                position={"absolute"}>
-                                {error && <ErrorView error={error}/>}
-
-                                {isNewCollection && includeTemplates && currentView === "import_data_mapping" &&
-                                    <Button variant={"text"}
-                                            type="button"
-                                            onClick={() => {
-                                                importConfig.setInUse(false);
-                                                return setCurrentView("welcome");
-                                            }}>
-                                        <ArrowBackIcon/>
-                                        Back
-                                    </Button>}
-
-                                {isNewCollection && includeTemplates && currentView === "import_data_preview" &&
-                                    <Button variant={"text"}
-                                            type="button"
-                                            onClick={() => {
-                                                saveCollection(values);
-                                                setCurrentView("import_data_mapping");
-                                            }}>
-                                        <ArrowBackIcon/>
-                                        Back
-                                    </Button>}
-
-                                {isNewCollection && includeTemplates && currentView === "details" &&
-                                    <Button variant={"text"}
-                                            type="button"
-                                            onClick={() => setCurrentView("welcome")}>
-                                        <ArrowBackIcon/>
-                                        Back
-                                    </Button>}
-
-                                {isNewCollection && currentView === "properties" && <Button variant={"text"}
-                                                                                            type="button"
-                                                                                            onClick={() => setCurrentView("details")}>
-                                    <ArrowBackIcon/>
-                                    Back
-                                </Button>}
-
-                                <Button variant={"text"}
-                                        onClick={() => {
-                                            handleCancel();
-                                        }}>
-                                    Cancel
-                                </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 === "details" || currentView === "properties") &&
-                                    <LoadingButton
-                                        variant={"filled"}
-                                        color="primary"
-                                        type="submit"
-                                        loading={isSubmitting}
-                                        disabled={isSubmitting || (currentView === "details" && !validValues)}
-                                        startIcon={currentView === "properties"
-                                            ? <DoneIcon/>
-                                            : undefined}
-                                    >
-                                        {currentView === "details" && "Next"}
-                                        {currentView === "properties" && "Create collection"}
-                                    </LoadingButton>}
-
-                                {!isNewCollection && <LoadingButton
-                                    variant="filled"
-                                    color="primary"
-                                    type="submit"
-                                    loading={isSubmitting}
-                                    // disabled={isSubmitting || !dirty}
-                                >
-                                    Update collection
-                                </LoadingButton>}
-
-                            </DialogActions>}
-                        </Form>
-                    </>
-                );
-            }}
-
-        </Formik>
     </DialogContent>
 
 }