@firecms/data_import_export 3.0.0-canary.4 → 3.0.0-canary.41

package/src/components/DataNewPropertiesMapping.tsx

@@ -16,7 +16,7 @@ export interface DataPropertyMappingProps {
     headersMapping: Record<string, string | null>;
     originProperties: Record<string, Property>;
     destinationProperties: Record<string, Property>;
-    onIdPropertyChanged: (value: string) => void;
+    onIdPropertyChanged: (value: string | null) => void;
     buildPropertyView?: (props: {
         isIdColumn: boolean,
         property: Property | null,
@@ -103,14 +103,15 @@ function IdSelectField({
                        }: {
     idColumn?: string,
     headersMapping: Record<string, string | null>;
-    onChange: (value: string) => void
+    onChange: (value: string | null) => void
 }) {
     return <div>
         <Select
             size={"small"}
             value={idColumn ?? ""}
             onChange={(event) => {
-                onChange(event.target.value as string);
+                const value = event.target.value;
+                onChange(value === "none" ? null : value);
             }}
             renderValue={(value) => {
                 return <Typography variant={"body2"}>
@@ -118,7 +119,7 @@ function IdSelectField({
                 </Typography>;
             }}
             label={"Column that will be used as ID for each document"}>
-            <SelectItem value={""}>Autogenerate ID</SelectItem>
+            <SelectItem value={"none"}>Autogenerate ID</SelectItem>
             {Object.entries(headersMapping).map(([key, value]) => {
                 return <SelectItem key={key} value={key}>{key}</SelectItem>;
             })}

package/src/components/ImportSaveInProgress.tsx

@@ -1,20 +1,23 @@
-import { CMSType, DataSource, Entity, EntityCollection, useDataSource } from "@firecms/core";
-import { CenteredView, CircularProgress, Typography, } from "@firecms/ui";
+import { DataSource, Entity, EntityCollection, useDataSource } from "@firecms/core";
+import { Button, CenteredView, CircularProgress, Typography, } from "@firecms/ui";
 import { useEffect, useRef, useState } from "react";
 import { ImportConfig } from "../types";
 
 export function ImportSaveInProgress<C extends EntityCollection>
 ({
+     path,
      importConfig,
      collection,
      onImportSuccess
  }:
      {
+         path: string,
          importConfig: ImportConfig,
          collection: C,
          onImportSuccess: (collection: C) => void
      }) {
 
+    const [errorSaving, setErrorSaving] = useState<Error | undefined>(undefined);
     const dataSource = useDataSource();
 
     const savingRef = useRef<boolean>(false);
@@ -31,6 +34,7 @@ export function ImportSaveInProgress<C extends EntityCollection>
         saveDataBatch(
             dataSource,
             collection,
+            path,
             importConfig.entities,
             0,
             25,
@@ -38,6 +42,9 @@ export function ImportSaveInProgress<C extends EntityCollection>
         ).then(() => {
             onImportSuccess(collection);
             savingRef.current = false;
+        }).catch((e) => {
+            setErrorSaving(e);
+            savingRef.current = false;
         });
     }
 
@@ -45,6 +52,25 @@ export function ImportSaveInProgress<C extends EntityCollection>
         save();
     }, []);
 
+    if (errorSaving) {
+        return (
+            <CenteredView className={"flex flex-col gap-4 items-center"}>
+                <Typography variant={"h6"}>
+                    Error saving data
+                </Typography>
+
+                <Typography variant={"body2"} color={"error"}>
+                    {errorSaving.message}
+                </Typography>
+                <Button
+                    onClick={save}
+                    variant={"outlined"}>
+                    Retry
+                </Button>
+            </CenteredView>
+        );
+    }
+
     return (
         <CenteredView className={"flex flex-col gap-4 items-center"}>
             <CircularProgress/>
@@ -68,6 +94,7 @@ export function ImportSaveInProgress<C extends EntityCollection>
 
 function saveDataBatch(dataSource: DataSource,
                        collection: EntityCollection,
+                       path: string,
                        data: Partial<Entity<any>>[],
                        offset = 0,
                        batchSize = 25,
@@ -78,7 +105,7 @@ function saveDataBatch(dataSource: DataSource,
     const batch = data.slice(offset, offset + batchSize);
     return Promise.all(batch.map(d =>
         dataSource.saveEntity({
-            path: collection.path, // TODO: should check if this is correct, specially for subcollections
+            path,
             values: d.values,
             entityId: d.id,
             collection,
@@ -87,7 +114,7 @@ function saveDataBatch(dataSource: DataSource,
         .then(() => {
             if (offset + batchSize < data.length) {
                 onProgressUpdate(offset + batchSize);
-                return saveDataBatch(dataSource, collection, data, offset + batchSize, batchSize, onProgressUpdate);
+                return saveDataBatch(dataSource, collection, path, data, offset + batchSize, batchSize, onProgressUpdate);
             }
             onProgressUpdate(data.length);
             return Promise.resolve();

package/src/export_import/ExportCollectionAction.tsx

@@ -41,6 +41,7 @@ export function ExportCollectionAction<M extends Record<string, any>, UserType e
                                                                                              }: CollectionActionsProps<M, UserType, EntityCollection<M, any>> & {
     exportAllowed?: (props: { collectionEntitiesCount: number, path: string, collection: EntityCollection }) => boolean;
     notAllowedView?: React.ReactNode;
+    onAnalyticsEvent?: (event: string, params?: any) => void;
 }) {
 
     const customizationController = useCustomizationController();
@@ -183,7 +184,7 @@ export function ExportCollectionAction<M extends Record<string, any>, UserType e
                                    onChange={() => setExportType("csv")}
                                    className={cn(focusedMixin, "w-4 text-primary-dark bg-gray-100 border-gray-300 dark:bg-gray-700 dark:border-gray-600")}/>
                             <label htmlFor="radio-csv"
-                                   className="p-2 text-sm font-medium text-gray-900 dark:text-gray-300">CSV</label>
+                                   className="p-2 text-sm font-medium text-gray-900 dark:text-slate-300">CSV</label>
                         </div>
                         <div className="flex items-center">
                             <input id="radio-json" type="radio" value="json" name="exportType"
@@ -191,7 +192,7 @@ export function ExportCollectionAction<M extends Record<string, any>, UserType e
                                    onChange={() => setExportType("json")}
                                    className={cn(focusedMixin, "w-4 text-primary-dark bg-gray-100 border-gray-300 dark:bg-gray-700 dark:border-gray-600")}/>
                             <label htmlFor="radio-json"
-                                   className="p-2 text-sm font-medium text-gray-900 dark:text-gray-300">JSON</label>
+                                   className="p-2 text-sm font-medium text-gray-900 dark:text-slate-300">JSON</label>
                         </div>
                     </div>
 
@@ -202,7 +203,7 @@ export function ExportCollectionAction<M extends Record<string, any>, UserType e
                                    onChange={() => setDateExportType("timestamp")}
                                    className={cn(focusedMixin, "w-4 text-primary-dark bg-gray-100 border-gray-300 dark:bg-gray-700 dark:border-gray-600")}/>
                             <label htmlFor="radio-timestamp"
-                                   className="p-2 text-sm font-medium text-gray-900 dark:text-gray-300">Dates as
+                                   className="p-2 text-sm font-medium text-gray-900 dark:text-slate-300">Dates as
                                 timestamps ({dateRef.current.getTime()})</label>
                         </div>
                         <div className="flex items-center">
@@ -211,7 +212,7 @@ export function ExportCollectionAction<M extends Record<string, any>, UserType e
                                    onChange={() => setDateExportType("string")}
                                    className={cn(focusedMixin, "w-4 text-primary-dark bg-gray-100 border-gray-300 dark:bg-gray-700 dark:border-gray-600")}/>
                             <label htmlFor="radio-string"
-                                   className="p-2 text-sm font-medium text-gray-900 dark:text-gray-300">Dates as
+                                   className="p-2 text-sm font-medium text-gray-900 dark:text-slate-300">Dates as
                                 strings ({dateRef.current.toISOString()})</label>
                         </div>
                     </div>

package/src/export_import/ImportCollectionAction.tsx

@@ -2,13 +2,15 @@ import React, { useCallback, useEffect } from "react";
 import {
     CollectionActionsProps,
     EntityCollectionTable,
-    PropertyConfigBadge,
     getFieldConfig,
     getPropertiesWithPropertiesOrder,
     getPropertyInPath,
+    PropertiesOrBuilders,
     Property,
+    PropertyConfigBadge,
     resolveCollection,
     ResolvedProperties,
+    slugify,
     useCustomizationController,
     User,
     useSelectionController,
@@ -40,8 +42,12 @@ export function ImportCollectionAction<M extends Record<string, any>, UserType e
                                                                                                  collection,
                                                                                                  path,
                                                                                                  collectionEntitiesCount,
-                                                                                             }: CollectionActionsProps<M, UserType>
+                                                                                                 onAnalyticsEvent
+                                                                                             }: CollectionActionsProps<M, UserType> & {
+                                                                                                 onAnalyticsEvent?: (event: string, params?: any) => void;
+                                                                                             }
 ) {
+
     const customizationController = useCustomizationController();
 
     const snackbarController = useSnackbarController();
@@ -76,12 +82,11 @@ export function ImportCollectionAction<M extends Record<string, any>, UserType e
             const originProperties = await buildEntityPropertiesFromData(data, getInferenceType);
             importConfig.setOriginProperties(originProperties);
 
-            const headersMapping = buildHeadersMappingFromData(data);
+            const headersMapping = buildHeadersMappingFromData(data, collection?.properties);
             importConfig.setHeadersMapping(headersMapping);
             const firstKey = Object.keys(headersMapping)?.[0];
             if (firstKey?.includes("id") || firstKey?.includes("key")) {
-                const idColumn = firstKey;
-                importConfig.setIdColumn(idColumn);
+                importConfig.setIdColumn(firstKey);
             }
         }
         setTimeout(() => {
@@ -131,7 +136,7 @@ export function ImportCollectionAction<M extends Record<string, any>, UserType e
                                               idColumn={importConfig.idColumn}
                                               originProperties={importConfig.originProperties}
                                               destinationProperties={properties}
-                                              onIdPropertyChanged={(value) => importConfig.setIdColumn(value)}
+                                              onIdPropertyChanged={(value) => importConfig.setIdColumn(value ?? undefined)}
                                               buildPropertyView={({
                                                                       isIdColumn,
                                                                       property,
@@ -177,6 +182,7 @@ export function ImportCollectionAction<M extends Record<string, any>, UserType e
                 {step === "import_data_saving" && importConfig &&
                     <ImportSaveInProgress importConfig={importConfig}
                                           collection={collection}
+                                          path={path}
                                           onImportSuccess={(importedCollection) => {
                                               handleClose();
                                               snackbarController.open({
@@ -258,7 +264,7 @@ function PropertyTreeSelect({
         if (value === internalIDValue) {
             onIdSelected();
             onPropertySelected(null);
-        } else if (value === "") {
+        } else if (value === "__do_not_import") {
             onPropertySelected(null);
         } else {
             onPropertySelected(value);
@@ -269,7 +275,7 @@ function PropertyTreeSelect({
                    onValueChange={onSelectValueChange}
                    renderValue={renderValue}>
 
-        <SelectItem value={""}>
+        <SelectItem value={"__do_not_import"}>
             <Typography variant={"body2"} className={"p-4"}>Do not import this property</Typography>
         </SelectItem>
 
@@ -369,7 +375,7 @@ export function ImportDataPreview<M extends Record<string, any>>({
                                                                  }: {
     importConfig: ImportConfig,
     properties: ResolvedProperties<M>,
-    propertiesOrder: Extract<keyof M, string>[]
+    propertiesOrder: Extract<keyof M, string>[],
 }) {
 
     useEffect(() => {
@@ -402,18 +408,34 @@ export function ImportDataPreview<M extends Record<string, any>>({
 
 }
 
-function buildHeadersMappingFromData(objArr: object[]) {
+function buildHeadersMappingFromData(objArr: object[], properties?: PropertiesOrBuilders<any>) {
     const headersMapping: Record<string, string> = {};
     objArr.filter(Boolean).forEach((obj) => {
         Object.keys(obj).forEach((key) => {
             // @ts-ignore
             const child = obj[key];
             if (typeof child === "object" && !Array.isArray(child)) {
-                Object.entries(buildHeadersMappingFromData([child])).forEach(([subKey, mapping]) => {
+                const childProperty = properties?.[key];
+                const childProperties = childProperty && "properties" in childProperty ? childProperty.properties : undefined;
+                const childHeadersMapping = buildHeadersMappingFromData([child], childProperties);
+                Object.entries(childHeadersMapping).forEach(([subKey, mapping]) => {
                     headersMapping[`${key}.${subKey}`] = `${key}.${mapping}`;
                 });
             }
-            headersMapping[key] = key;
+
+            if (!properties) {
+                headersMapping[key] = key;
+            } else if (key in properties) {
+                headersMapping[key] = key;
+            } else {
+                const slug = slugify(key);
+                if (slug in properties) {
+                    headersMapping[key] = slug;
+                } else {
+                    headersMapping[key] = key;
+                }
+            }
+
         });
     });
     return headersMapping;

package/src/export_import/export.ts

@@ -149,7 +149,7 @@ function processValueForExport(inputValue: any,
         } else {
             value = inputValue;
         }
-    } else if (property.dataType === "reference" && inputValue.isEntityReference && inputValue.isEntityReference()) {
+    } else if (property.dataType === "reference" && inputValue && inputValue.isEntityReference && inputValue.isEntityReference()) {
         const ref = inputValue ? inputValue as EntityReference : undefined;
         value = ref ? ref.pathWithId : null;
     } else if (property.dataType === "date" && inputValue instanceof Date) {

package/src/useImportExportPlugin.tsx

@@ -9,8 +9,8 @@ import { ExportCollectionAction } from "./export_import/ExportCollectionAction";
 export function useImportExportPlugin(props?: ImportExportPluginProps): FireCMSPlugin<any, any, any, ImportExportPluginProps> {
 
     return useMemo(() => ({
-        name: "Import/Export",
-        collections: {
+        key: "import_export",
+        collectionView: {
             CollectionActions: [ImportCollectionAction, ExportCollectionAction],
             collectionActionsProps: props
         }
@@ -20,5 +20,6 @@ export function useImportExportPlugin(props?: ImportExportPluginProps): FireCMSP
 export type ImportExportPluginProps = {
     exportAllowed?: (props: ExportAllowedParams) => boolean;
     notAllowedView: React.ReactNode;
+    onAnalyticsEvent?: (event: string, params?: any) => void;
 }
 export type ExportAllowedParams = { collectionEntitiesCount: number, path: string, collection: EntityCollection };

package/src/utils/data.ts

@@ -36,8 +36,21 @@ export function convertDataToEntity(data: Record<any, any>,
         })
         .reduce((acc, curr) => ({ ...acc, ...curr }), {});
     const values = unflattenObject(mappedKeysObject);
+    let id = idColumn ? data[idColumn] : undefined;
+    if (typeof id === "string") {
+        id = id.trim();
+    } else if (typeof id === "number") {
+        id = id.toString();
+    } else if (typeof id === "boolean") {
+        id = id.toString();
+    } else if (id instanceof Date) {
+        id = id.toISOString();
+    } else if (id && "toString" in id) {
+        id = id.toString();
+    }
+
     return {
-        id: idColumn ? data[idColumn] : undefined,
+        id,
         values,
         path
     };

package/src/utils/file_to_json.ts

@@ -7,12 +7,17 @@ export function convertFileToJson(file: File): Promise<object[]> {
             console.debug("Converting JSON file to JSON", file.name);
             const reader = new FileReader();
             reader.onload = function (e) {
-                const data = e.target?.result as string;
-                const jsonData = JSON.parse(data);
-                if (!Array.isArray(jsonData)) {
-                    reject(new Error("JSON file should contain an array of objects"));
+                try {
+                    const data = e.target?.result as string;
+                    const jsonData = JSON.parse(data);
+                    if (!Array.isArray(jsonData)) {
+                        reject(new Error("JSON file should contain an array of objects"));
+                    }
+                    resolve(jsonData);
+                } catch (e) {
+                    console.error("Error parsing JSON file", e);
+                    reject(e);
                 }
-                resolve(jsonData);
             };
             reader.readAsText(file);
         } else {