@firecms/collection_editor 3.0.0-canary.28 → 3.0.0-canary.280

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -1,12 +1,15 @@
 import * as React from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
     CircularProgressCenter,
+    ConfirmationDialog,
+    Entity,
     EntityCollection,
     ErrorView,
     isPropertyBuilder,
     MapProperty,
     mergeDeep,
+    NavigationResult,
     Properties,
     PropertiesOrBuilders,
     Property,
@@ -15,7 +18,6 @@ import {
     randomString,
     removeInitialAndTrailingSlashes,
     removeUndefined,
-    TopNavigationResult,
     useAuthController,
     useCustomizationController,
     useNavigationController,
@@ -25,17 +27,19 @@ import {
 import {
     ArrowBackIcon,
     Button,
-    cn,
+    CheckIcon,
+    cls,
     coolIconKeys,
     defaultBorderMixin,
     Dialog,
     DialogActions,
     DialogContent,
-    DoneIcon,
+    DialogTitle,
     IconButton,
     LoadingButton,
     Tab,
-    Tabs
+    Tabs,
+    Typography
 } from "@firecms/ui";
 import { YupSchema } from "./CollectionYupValidation";
 import { CollectionDetailsForm } from "./CollectionDetailsForm";
@@ -45,7 +49,7 @@ import { SubcollectionsEditTab } from "./SubcollectionsEditTab";
 import { CollectionsConfigController } from "../../types/config_controller";
 import { CollectionEditorWelcomeView } from "./CollectionEditorWelcomeView";
 import { CollectionInference } from "../../types/collection_inference";
-import { getInferenceType, ImportSaveInProgress, useImportConfig } from "@firecms/data_import_export";
+import { getInferenceType, ImportSaveInProgress, useImportConfig } from "@firecms/data_import";
 import { buildEntityPropertiesFromData } from "@firecms/schema_inference";
 import { CollectionEditorImportMapping } from "./import/CollectionEditorImportMapping";
 import { CollectionEditorImportDataPreview } from "./import/CollectionEditorImportDataPreview";
@@ -53,6 +57,7 @@ import { cleanPropertiesFromImport } from "./import/clean_import_data";
 import { PersistedCollection } from "../../types/persisted_collection";
 import { Formex, FormexController, useCreateFormex } from "@firecms/formex";
 import { getFullIdPath } from "./util";
+import { EntityActionsEditTab } from "./EntityActionsEditTab";
 
 export interface CollectionEditorDialogProps {
     open: boolean;
@@ -76,9 +81,10 @@ export interface CollectionEditorDialogProps {
         icon: React.ReactNode
     };
     pathSuggestions?: (path?: string) => Promise<string[]>;
-    getUser: (uid: string) => User | null;
+    getUser?: (uid: string) => User | null;
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
     parentCollection?: PersistedCollection;
+    existingEntities?: Entity<any>[];
 }
 
 export function CollectionEditorDialog(props: CollectionEditorDialogProps) {
@@ -88,13 +94,13 @@ export function CollectionEditorDialog(props: CollectionEditorDialogProps) {
     const [formDirty, setFormDirty] = React.useState<boolean>(false);
     const [unsavedChangesDialogOpen, setUnsavedChangesDialogOpen] = React.useState<boolean>(false);
 
-    const handleCancel = useCallback(() => {
+    const handleCancel = () => {
         if (!formDirty) {
             props.handleClose(undefined);
         } else {
             setUnsavedChangesDialogOpen(true);
         }
-    }, [formDirty, props.handleClose]);
+    };
 
     useEffect(() => {
         if (!open) {
@@ -112,6 +118,7 @@ export function CollectionEditorDialog(props: CollectionEditorDialogProps) {
             maxWidth={"7xl"}
             onOpenChange={(open) => !open ? handleCancel() : undefined}
         >
+            <DialogTitle hidden>Collection editor</DialogTitle>
             {open && <CollectionEditor {...props}
                                        handleCancel={handleCancel}
                                        setFormDirty={setFormDirty}/>}
@@ -134,7 +141,8 @@ type EditorView = "welcome"
     | "properties"
     | "loading"
     | "extra_view"
-    | "subcollections";
+    | "subcollections"
+    | "custom_actions";
 
 export function CollectionEditor(props: CollectionEditorDialogProps & {
     handleCancel: () => void,
@@ -170,14 +178,15 @@ export function CollectionEditor(props: CollectionEditorDialogProps & {
         } catch (e) {
             console.error(e);
         }
-    }, [navigation.getCollectionFromPaths, props.editedCollectionId, props.parentCollectionIds, navigation.initialised]);
+    }, [props.editedCollectionId, props.parentCollectionIds, navigation.initialised, navigation.getCollectionFromPaths]);
+
     if (!topLevelNavigation) {
         throw Error("Internal: Navigation not ready in collection editor");
     }
 
     const {
         groups
-    }: TopNavigationResult = topLevelNavigation;
+    }: NavigationResult = topLevelNavigation;
 
     const initialCollection = collection
         ? {
@@ -243,7 +252,8 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                                                      setCollection,
                                                                      initialValues,
                                                                      propertyConfigs,
-                                                                     groups
+                                                                     groups,
+                                                                     existingEntities
                                                                  }: CollectionEditorDialogProps & {
                                                                      handleCancel: () => void,
                                                                      setFormDirty: (dirty: boolean) => void,
@@ -272,6 +282,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
     const saveCollection = (updatedCollection: PersistedCollection<M>): Promise<boolean> => {
         const id = updatedCollection.id || updatedCollection.path;
+
         return configController.saveCollection({
             id,
             collectionData: updatedCollection,
@@ -293,7 +304,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
             });
     };
 
-    const setNextMode = useCallback(() => {
+    const setNextMode = () => {
         if (currentView === "details") {
             if (importConfig.inUse) {
                 setCurrentView("import_data_saving");
@@ -314,14 +325,14 @@ function CollectionEditorInternal<M extends Record<string, any>>({
             setCurrentView("details");
         }
 
-    }, [currentView, importConfig.inUse, extraView]);
+    };
 
-    const doCollectionInference = useCallback((collection: PersistedCollection<any>) => {
+    const doCollectionInference = collectionInference ? (collection: PersistedCollection<any>) => {
         if (!collectionInference) return undefined;
-        return collectionInference?.(collection.path, collection.collectionGroup ?? false, parentCollectionIds ?? []);
-    }, [collectionInference, parentCollectionIds]);
+        return collectionInference?.(collection.path, collection.collectionGroup ?? false, parentPaths ?? [], collection.databaseId);
+    } : undefined;
 
-    const inferCollectionFromData = useCallback(async (newCollection: PersistedCollection<M>) => {
+    const inferCollectionFromData = async (newCollection: PersistedCollection<M>) => {
 
         try {
             if (!doCollectionInference) {
@@ -365,15 +376,15 @@ function CollectionEditorInternal<M extends Record<string, any>>({
             });
             return newCollection;
         }
-    }, [parentCollectionIds, doCollectionInference]);
+    };
 
     const onSubmit = (newCollectionState: PersistedCollection<M>, formexController: FormexController<PersistedCollection<M>>) => {
-        console.log("Submitting collection", newCollectionState);
+        console.debug("Submitting collection", newCollectionState);
         try {
 
             if (!isNewCollection) {
                 saveCollection(newCollectionState).then(() => {
-                    formexController.resetForm({ values: initialValues });
+                    formexController.resetForm();
                     handleClose(newCollectionState);
                 });
                 return;
@@ -462,7 +473,8 @@ function CollectionEditorInternal<M extends Record<string, any>>({
     const formController = useCreateFormex<PersistedCollection<M>>({
         initialValues,
         onSubmit,
-        validation
+        validation,
+        debugId: "COLLECTION_EDITOR"
     });
 
     const {
@@ -479,26 +491,37 @@ function CollectionEditorInternal<M extends Record<string, any>>({
     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;
+    const resolvedPath = !pathError ? navigation.resolveIdsFrom(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[]) {
+    function onImportDataSet(data: object[], propertiesOrder?: string[]) {
         importConfig.setInUse(true);
         buildEntityPropertiesFromData(data, getInferenceType)
-            .then((properties) => {
+            .then((properties: 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);
+                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);
             });
     }
 
@@ -514,14 +537,30 @@ function CollectionEditorInternal<M extends Record<string, any>>({
     };
 
     const editable = collection?.editable === undefined || collection?.editable === true;
+    // @ts-ignore
+    const isMergedCollection = collection?.merged ?? false;
     const collectionEditable = editable || isNewCollection;
 
+    const [deleteRequested, setDeleteRequested] = useState(false);
+
+    const deleteCollection = () => {
+        if (!collection) return;
+        configController?.deleteCollection({ id: collection.id }).then(() => {
+            setDeleteRequested(false);
+            handleCancel();
+            snackbarController.open({
+                message: "Collection deleted",
+                type: "success"
+            });
+        });
+    };
+
     return <DialogContent fullHeight={true}>
         <Formex value={formController}>
 
             <>
                 {!isNewCollection && <Tabs value={currentView}
-                                           className={cn(defaultBorderMixin, "justify-end bg-gray-50 dark:bg-gray-950 border-b")}
+                                           innerClassName={cls(defaultBorderMixin, "px-4 h-14 w-full justify-end bg-surface-50 dark:bg-surface-950 border-b")}
                                            onValueChange={(v) => setCurrentView(v as EditorView)}>
                     <Tab value={"details"}>
                         Details
@@ -532,11 +571,14 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                     <Tab value={"subcollections"}>
                         Additional views
                     </Tab>
+                    <Tab value={"custom_actions"}>
+                        Custom actions
+                    </Tab>
                 </Tabs>}
 
                 <form noValidate
                       onSubmit={formController.handleSubmit}
-                      className={cn(
+                      className={cls(
                           isNewCollection ? "h-full" : "h-[calc(100%-48px)]",
                           "flex-grow flex flex-col relative")}>
 
@@ -551,9 +593,10 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                     {currentView === "welcome" &&
                         <CollectionEditorWelcomeView
                             path={path}
-                            onContinue={(importData) => {
+                            onContinue={(importData, propertiesOrder) => {
+                                // console.log("Import data", importData, propertiesOrder)
                                 if (importData) {
-                                    onImportDataSet(importData);
+                                    onImportDataSet(importData, propertiesOrder);
                                     setCurrentView("import_data_mapping");
                                 } else {
                                     setCurrentView("details");
@@ -594,7 +637,21 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                             groups={groups}
                             parentCollectionIds={parentCollectionIds}
                             parentCollection={parentCollection}
-                            isNewCollection={isNewCollection}/>}
+                            isNewCollection={isNewCollection}>
+                            {!isNewCollection && isMergedCollection && <div className={"flex flex-col gap-4 mt-8"}>
+                                <Typography variant={"body2"} color={"secondary"}>This collection is defined in code.
+                                    The changes done in this editor will override the properties defined in code.
+                                    You can delete the overridden values to revert to the state defined in code.
+                                </Typography>
+                                <Button color={"neutral"}
+                                        onClick={() => {
+                                            setDeleteRequested(true);
+                                        }}>Reset to code</Button>
+                            </div>}
+                        </CollectionDetailsForm>}
+
+                    {currentView === "custom_actions" && collection &&
+                        <EntityActionsEditTab collection={collection}/>}
 
                     {currentView === "subcollections" && collection &&
                         <SubcollectionsEditTab
@@ -638,6 +695,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                         {isNewCollection && includeTemplates && currentView === "import_data_mapping" &&
                             <Button variant={"text"}
                                     type="button"
+                                    color={"primary"}
                                     onClick={() => {
                                         importConfig.setInUse(false);
                                         return setCurrentView("welcome");
@@ -649,6 +707,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                         {isNewCollection && includeTemplates && currentView === "import_data_preview" &&
                             <Button variant={"text"}
                                     type="button"
+                                    color={"primary"}
                                     onClick={() => {
                                         setCurrentView("import_data_mapping");
                                     }}>
@@ -658,6 +717,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
                         {isNewCollection && includeTemplates && currentView === "details" &&
                             <Button variant={"text"}
+                                    color={"primary"}
                                     type="button"
                                     onClick={() => setCurrentView("welcome")}>
                                 <ArrowBackIcon/>
@@ -666,12 +726,14 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
                         {isNewCollection && currentView === "properties" && <Button variant={"text"}
                                                                                     type="button"
+                                                                                    color={"primary"}
                                                                                     onClick={() => setCurrentView("details")}>
                             <ArrowBackIcon/>
                             Back
                         </Button>}
 
                         <Button variant={"text"}
+                                color={"primary"}
                                 onClick={() => {
                                     handleCancel();
                                 }}>
@@ -706,7 +768,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                 loading={isSubmitting}
                                 disabled={isSubmitting || (currentView === "details" && !validValues)}
                                 startIcon={currentView === "properties"
-                                    ? <DoneIcon/>
+                                    ? <CheckIcon/>
                                     : undefined}
                             >
                                 {currentView === "details" && "Next"}
@@ -728,12 +790,24 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
         </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.</>}/>
+
     </DialogContent>
 
 }
 
 function applyPropertyConfigs<M extends Record<string, any> = any>(collection: PersistedCollection<M>, propertyConfigs: Record<string, PropertyConfig<any>>): PersistedCollection<M> {
-    const { properties, ...rest } = collection;
+    const {
+        properties,
+        ...rest
+    } = collection;
     const propertiesResult: PropertiesOrBuilders<any> = {};
     if (properties) {
         Object.keys(properties).forEach((key) => {
@@ -741,7 +815,10 @@ function applyPropertyConfigs<M extends Record<string, any> = any>(collection: P
         });
     }
 
-    return { ...rest, properties: propertiesResult };
+    return {
+        ...rest,
+        properties: propertiesResult
+    };
 }
 
 function applyPropertiesConfig(property: PropertyOrBuilder, propertyConfigs: Record<string, PropertyConfig<any>>) {
@@ -761,7 +838,10 @@ function applyPropertiesConfig(property: PropertyOrBuilder, propertyConfigs: Rec
                 Object.keys(internalProperty.properties).forEach((key) => {
                     properties[key] = applyPropertiesConfig(((internalProperty as MapProperty).properties as Properties)[key] as Property, propertyConfigs);
                 });
-                internalProperty = { ...internalProperty, properties };
+                internalProperty = {
+                    ...internalProperty,
+                    properties
+                };
             }
 
         }

package/src/ui/collection_editor/CollectionEditorWelcomeView.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from "react";
 import { EntityCollection, unslugify, } from "@firecms/core";
-import { Button, Card, Chip, CircularProgress, cn, Container, Icon, Tooltip, Typography, } from "@firecms/ui";
+import { Button, Card, Chip, CircularProgress, cls, Container, Icon, Tooltip, Typography, } from "@firecms/ui";
 
 import { productsCollectionTemplate } from "./templates/products_template";
 import { blogCollectionTemplate } from "./templates/blog_template";
 import { usersCollectionTemplate } from "./templates/users_template";
-import { ImportFileUpload } from "@firecms/data_import_export";
+import { ImportFileUpload } from "@firecms/data_import";
 import { pagesCollectionTemplate } from "./templates/pages_template";
 import { useFormex } from "@firecms/formex";
 
@@ -19,7 +19,7 @@ export function CollectionEditorWelcomeView({
     path: string;
     pathSuggestions?: (path: string) => Promise<string[]>;
     parentCollection?: EntityCollection;
-    onContinue: (importData?: object[]) => void;
+    onContinue: (importData?: object[], propertiesOrder?: string[]) => void;
     existingCollectionPaths?: string[];
 }) {
 
@@ -37,18 +37,6 @@ export function CollectionEditorWelcomeView({
         }
     }, [existingCollectionPaths, path, pathSuggestions]);
 
-    // const {
-    //     values,
-    //     setFieldValue,
-    //     setValues,
-    //     handleChange,
-    //     touched,
-    //     errors,
-    //     setFieldTouched,
-    //     isSubmitting,
-    //     submitCount
-    // } = useFormex<EntityCollection>();
-
     const {
         values,
         setFieldValue,
@@ -56,6 +44,11 @@ export function CollectionEditorWelcomeView({
         submitCount
     } = useFormex<EntityCollection>();
 
+    const noSuggestions = !loadingPathSuggestions && (filteredPathSuggestions ?? [])?.length === 0;
+    if (!noSuggestions) {
+        return null;
+    }
+
     return (
         <div className={"overflow-auto my-auto"}>
             <Container maxWidth={"4xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
@@ -96,12 +89,11 @@ export function CollectionEditorWelcomeView({
                                 {suggestion}
                             </Chip>
                         ))}
-
-                        {!loadingPathSuggestions && (filteredPathSuggestions ?? [])?.length === 0 &&
-                            <Typography variant={"caption"}>
-                                No suggestions
-                            </Typography>
-                        }
+                        {(filteredPathSuggestions ?? []).length === 0 && !loadingPathSuggestions && <Typography
+                            variant={"caption"}
+                            color={"secondary"}>
+                            No existing paths found
+                        </Typography>}
 
                     </div>
 
@@ -116,28 +108,29 @@ export function CollectionEditorWelcomeView({
                     <div className={"flex gap-4"}>
                         <TemplateButton title={"Products"}
                                         subtitle={"A collection of products with images, prices and stock"}
-                                        icon={<Icon size={"small"} iconKey={productsCollectionTemplate.icon!}/>}
+                                        icon={<Icon size={"small"}
+                                                    iconKey={productsCollectionTemplate.icon! as string}/>}
                                         onClick={() => {
                                             setValues(productsCollectionTemplate);
                                             onContinue();
                                         }}/>
                         <TemplateButton title={"Users"}
                                         subtitle={"A collection of users with emails, names and roles"}
-                                        icon={<Icon size={"small"} iconKey={usersCollectionTemplate.icon!}/>}
+                                        icon={<Icon size={"small"} iconKey={usersCollectionTemplate.icon! as string}/>}
                                         onClick={() => {
                                             setValues(usersCollectionTemplate);
                                             onContinue();
                                         }}/>
                         <TemplateButton title={"Blog posts"}
                                         subtitle={"A collection of blog posts with images, authors and complex content"}
-                                        icon={<Icon size={"small"} iconKey={blogCollectionTemplate.icon!}/>}
+                                        icon={<Icon size={"small"} iconKey={blogCollectionTemplate.icon! as string}/>}
                                         onClick={() => {
                                             setValues(blogCollectionTemplate);
                                             onContinue();
                                         }}/>
                         <TemplateButton title={"Pages"}
                                         subtitle={"A collection of pages with images, authors and complex content"}
-                                        icon={<Icon size={"small"} iconKey={pagesCollectionTemplate.icon!}/>}
+                                        icon={<Icon size={"small"} iconKey={pagesCollectionTemplate.icon! as string}/>}
                                         onClick={() => {
                                             setValues(pagesCollectionTemplate);
                                             onContinue();
@@ -154,7 +147,7 @@ export function CollectionEditorWelcomeView({
                         ● Create a collection from a file (csv, json, xls, xslx...)
                     </Typography>
 
-                    <ImportFileUpload onDataAdded={(data) => onContinue(data)}/>
+                    <ImportFileUpload onDataAdded={(data, propertiesOrder) => onContinue(data, propertiesOrder)}/>
 
                 </div>}
 
@@ -185,14 +178,15 @@ export function TemplateButton({
 }) {
 
     return (
-        <Tooltip title={subtitle}>
+        <Tooltip title={subtitle}
+                 asChild={true}>
             <Card
                 onClick={onClick}
-                className={cn(
+                className={cls(
                     "my-2 rounded-md border mx-0 p-6 px-4 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center",
-                    "text-gray-700 dark:text-slate-300",
+                    "text-surface-700 dark:text-surface-accent-300",
                     "hover:border-primary-dark hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary",
-                    "border-gray-400 dark:border-gray-600 "
+                    "border-surface-400 dark:border-surface-600 "
                 )}
             >
                 {icon}
@@ -201,9 +195,6 @@ export function TemplateButton({
                     <Typography variant={"subtitle1"}>
                         {title}
                     </Typography>
-                    {/*<Typography>*/}
-                    {/*    {subtitle}*/}
-                    {/*</Typography>*/}
 
                 </div>
             </Card>