@firecms/data_import_export 3.0.0-canary.8 → 3.0.0-canary.80

package/src/export_import/ExportCollectionAction.tsx

@@ -5,6 +5,7 @@ import {
     Entity,
     EntityCollection,
     ExportConfig,
+    getDefaultValuesFor,
     resolveCollection,
     ResolvedEntityCollection,
     useCustomizationController,
@@ -18,7 +19,7 @@ import {
     BooleanSwitchWithLabel,
     Button,
     CircularProgress,
-    cn,
+    cls,
     Dialog,
     DialogActions,
     DialogContent,
@@ -26,9 +27,9 @@ import {
     GetAppIcon,
     IconButton,
     Tooltip,
-    Typography,
+    Typography
 } from "@firecms/ui";
-import { downloadExport } from "./export";
+import { downloadEntitiesExport } from "./export";
 
 const DOCS_LIMIT = 500;
 
@@ -36,6 +37,7 @@ export function ExportCollectionAction<M extends Record<string, any>, UserType e
                                                                                                  collection: inputCollection,
                                                                                                  path: inputPath,
                                                                                                  collectionEntitiesCount,
+                                                                                                 onAnalyticsEvent,
                                                                                                  exportAllowed,
                                                                                                  notAllowedView
                                                                                              }: CollectionActionsProps<M, UserType, EntityCollection<M, any>> & {
@@ -49,6 +51,8 @@ export function ExportCollectionAction<M extends Record<string, any>, UserType e
     const exportConfig = typeof inputCollection.exportable === "object" ? inputCollection.exportable : undefined;
 
     const dateRef = React.useRef<Date>(new Date());
+
+    const [includeUndefinedValues, setIncludeUndefinedValues] = React.useState<boolean>(false);
     const [flattenArrays, setFlattenArrays] = React.useState<boolean>(true);
     const [exportType, setExportType] = React.useState<"csv" | "json">("csv");
     const [dateExportType, setDateExportType] = React.useState<"timestamp" | "string">("string");
@@ -123,6 +127,9 @@ export function ExportCollectionAction<M extends Record<string, any>, UserType e
     const doDownload = useCallback(async (collection: ResolvedEntityCollection<M>,
                                           exportConfig: ExportConfig<any> | undefined) => {
 
+        onAnalyticsEvent?.("export_collection", {
+            collection: collection.path
+        });
         setDataLoading(true);
         dataSource.fetchCollection<M>({
             path,
@@ -135,7 +142,30 @@ export function ExportCollectionAction<M extends Record<string, any>, UserType e
                     ...exportConfig?.additionalFields?.map(column => column.key) ?? [],
                     ...collection.additionalFields?.map(field => field.key) ?? []
                 ];
-                downloadExport(data, additionalData, collection, flattenArrays, additionalHeaders, exportType, dateExportType);
+
+                const dataWithDefaults = includeUndefinedValues
+                    ? data.map(entity => {
+                        const defaultValues = getDefaultValuesFor(collection.properties);
+                        return {
+                            ...entity,
+                            values: { ...defaultValues, ...entity.values }
+                        };
+                    })
+                    : data;
+                downloadEntitiesExport({
+                    data: dataWithDefaults,
+                    additionalData,
+                    properties: collection.properties,
+                    propertiesOrder: collection.propertiesOrder,
+                    name: collection.name,
+                    flattenArrays,
+                    additionalHeaders,
+                    exportType,
+                    dateExportType
+                });
+                onAnalyticsEvent?.("export_collection_success", {
+                    collection: collection.path
+                });
             })
             .catch((e) => {
                 console.error("Error loading export data", e);
@@ -143,7 +173,7 @@ export function ExportCollectionAction<M extends Record<string, any>, UserType e
             })
             .finally(() => setDataLoading(false));
 
-    }, [dataSource, path, fetchAdditionalFields, flattenArrays, exportType, dateExportType]);
+    }, [onAnalyticsEvent, dataSource, path, fetchAdditionalFields, includeUndefinedValues, flattenArrays, exportType, dateExportType]);
 
     const onOkClicked = useCallback(() => {
         doDownload(collection, exportConfig);
@@ -182,7 +212,7 @@ export function ExportCollectionAction<M extends Record<string, any>, UserType e
                             <input id="radio-csv" type="radio" value="csv" name="exportType"
                                    checked={exportType === "csv"}
                                    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")}/>
+                                   className={cls(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-slate-300">CSV</label>
                         </div>
@@ -190,7 +220,7 @@ export function ExportCollectionAction<M extends Record<string, any>, UserType e
                             <input id="radio-json" type="radio" value="json" name="exportType"
                                    checked={exportType === "json"}
                                    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")}/>
+                                   className={cls(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-slate-300">JSON</label>
                         </div>
@@ -201,7 +231,7 @@ export function ExportCollectionAction<M extends Record<string, any>, UserType e
                             <input id="radio-timestamp" type="radio" value="timestamp" name="dateExportType"
                                    checked={dateExportType === "timestamp"}
                                    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")}/>
+                                   className={cls(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-slate-300">Dates as
                                 timestamps ({dateRef.current.getTime()})</label>
@@ -210,7 +240,7 @@ export function ExportCollectionAction<M extends Record<string, any>, UserType e
                             <input id="radio-string" type="radio" value="string" name="dateExportType"
                                    checked={dateExportType === "string"}
                                    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")}/>
+                                   className={cls(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-slate-300">Dates as
                                 strings ({dateRef.current.toISOString()})</label>
@@ -225,6 +255,12 @@ export function ExportCollectionAction<M extends Record<string, any>, UserType e
                     onValueChange={setFlattenArrays}
                     label={"Flatten arrays"}/>
 
+                <BooleanSwitchWithLabel
+                    size={"small"}
+                    value={includeUndefinedValues}
+                    onValueChange={setIncludeUndefinedValues}
+                    label={"Include undefined values"}/>
+
                 {!canExport && notAllowedView}
 
             </DialogContent>

package/src/export_import/ImportCollectionAction.tsx

@@ -18,7 +18,7 @@ import {
 } from "@firecms/core";
 import {
     Button,
-    cn,
+    cls,
     defaultBorderMixin,
     Dialog,
     DialogActions,
@@ -32,7 +32,7 @@ import {
 } from "@firecms/ui";
 import { buildEntityPropertiesFromData } from "@firecms/schema_inference";
 import { useImportConfig } from "../hooks";
-import { convertDataToEntity, getInferenceType, getPropertiesMapping } from "../utils";
+import { convertDataToEntity, getInferenceType } from "../utils";
 import { DataNewPropertiesMapping, ImportFileUpload, ImportSaveInProgress } from "../components";
 import { ImportConfig } from "../types";
 
@@ -60,20 +60,23 @@ export function ImportCollectionAction<M extends Record<string, any>, UserType e
 
     const handleClickOpen = useCallback(() => {
         setOpen(true);
+        onAnalyticsEvent?.("import_open");
         setStep("initial");
-    }, [setOpen]);
+    }, [onAnalyticsEvent]);
 
     const handleClose = useCallback(() => {
         setOpen(false);
     }, [setOpen]);
 
     const onMappingComplete = useCallback(() => {
+        onAnalyticsEvent?.("import_mapping_complete");
         setStep("preview");
-    }, []);
+    }, [onAnalyticsEvent]);
 
     const onPreviewComplete = useCallback(() => {
+        onAnalyticsEvent?.("import_data_save");
         setStep("import_data_saving");
-    }, []);
+    }, [onAnalyticsEvent]);
 
     const onDataAdded = async (data: object[]) => {
         importConfig.setImportData(data);
@@ -90,6 +93,7 @@ export function ImportCollectionAction<M extends Record<string, any>, UserType e
             }
         }
         setTimeout(() => {
+            onAnalyticsEvent?.("import_data_added");
             setStep("mapping");
         }, 100);
         // setStep("mapping");
@@ -109,6 +113,7 @@ export function ImportCollectionAction<M extends Record<string, any>, UserType e
     if (collection.collectionGroup) {
         return null;
     }
+
     return <>
 
         <Tooltip title={"Import"}>
@@ -131,17 +136,14 @@ export function ImportCollectionAction<M extends Record<string, any>, UserType e
                 </>}
 
                 {step === "mapping" && <>
-                    <Typography variant={"h6"}>Map fields</Typography>
-                    <DataNewPropertiesMapping headersMapping={importConfig.headersMapping}
-                                              idColumn={importConfig.idColumn}
-                                              originProperties={importConfig.originProperties}
+                    <Typography variant={"h6"} className={"ml-3.5"}>Map fields</Typography>
+                    <DataNewPropertiesMapping importConfig={importConfig}
                                               destinationProperties={properties}
-                                              onIdPropertyChanged={(value) => importConfig.setIdColumn(value ?? undefined)}
                                               buildPropertyView={({
                                                                       isIdColumn,
                                                                       property,
                                                                       propertyKey,
-                                                                      importKey
+                                                                      importKey,
                                                                   }) => {
                                                   return <PropertyTreeSelect
                                                       selectedPropertyKey={propertyKey ?? ""}
@@ -153,6 +155,7 @@ export function ImportCollectionAction<M extends Record<string, any>, UserType e
                                                       }}
                                                       onPropertySelected={(newPropertyKey) => {
 
+                                                          onAnalyticsEvent?.("import_mapping_field_updated");
                                                           const newHeadersMapping: Record<string, string | null> = Object.entries(importConfig.headersMapping)
                                                               .map(([currentImportKey, currentPropertyKey]) => {
                                                                   if (currentPropertyKey === newPropertyKey) {
@@ -253,14 +256,15 @@ function PropertyTreeSelect({
         }
 
         if (!selectedPropertyKey || !selectedProperty) {
-            return <Typography variant={"body2"} className={"p-4"}>Do not import this property</Typography>;
+            return <Typography variant={"body2"} color="disabled" className={"p-4"}>Do not import this
+                property</Typography>;
         }
 
         return <PropertySelectEntry propertyKey={selectedPropertyKey}
                                     property={selectedProperty as Property}/>;
     }, [selectedProperty]);
 
-    const onSelectValueChange = useCallback((value: string) => {
+    const onSelectValueChange = (value: string) => {
         if (value === internalIDValue) {
             onIdSelected();
             onPropertySelected(null);
@@ -269,14 +273,14 @@ function PropertyTreeSelect({
         } else {
             onPropertySelected(value);
         }
-    }, []);
+    };
 
     return <Select value={isIdColumn ? internalIDValue : (selectedPropertyKey ?? undefined)}
                    onValueChange={onSelectValueChange}
                    renderValue={renderValue}>
 
         <SelectItem value={"__do_not_import"}>
-            <Typography variant={"body2"} className={"p-4"}>Do not import this property</Typography>
+            <Typography variant={"body2"} color={"disabled"} className={"p-4"}>Do not import this property</Typography>
         </SelectItem>
 
         <SelectItem value={internalIDValue}>
@@ -338,7 +342,7 @@ export function PropertySelectEntry({
         className="flex flex-row w-full text-start items-center h-full">
 
         {new Array(level).fill(0).map((_, index) =>
-            <div className={cn(defaultBorderMixin, "ml-8 border-l h-12")} key={index}/>)}
+            <div className={cls(defaultBorderMixin, "ml-8 border-l h-12")} key={index}/>)}
 
         <div className={"m-4"}>
             <Tooltip title={widget?.name}>
@@ -379,8 +383,7 @@ export function ImportDataPreview<M extends Record<string, any>>({
 }) {
 
     useEffect(() => {
-        const propertiesMapping = getPropertiesMapping(importConfig.originProperties, properties);
-        const mappedData = importConfig.importData.map(d => convertDataToEntity(d, importConfig.idColumn, importConfig.headersMapping, properties, propertiesMapping, "TEMP_PATH"));
+        const mappedData = importConfig.importData.map(d => convertDataToEntity(d, importConfig.idColumn, importConfig.headersMapping, properties, "TEMP_PATH", importConfig.defaultValues));
         importConfig.setEntities(mappedData);
     }, []);
 
@@ -396,14 +399,11 @@ export function ImportDataPreview<M extends Record<string, any>>({
             dataLoading: false,
             noMoreToLoad: false
         }}
+        enablePopupIcon={false}
         endAdornment={<div className={"h-12"}/>}
         filterable={false}
         sortable={false}
         selectionController={selectionController}
-        displayedColumnIds={propertiesOrder.map(p => ({
-            key: p,
-            disabled: false
-        }))}
         properties={properties}/>
 
 }

package/src/export_import/export.ts

@@ -4,7 +4,6 @@ import {
     EntityReference,
     getArrayValuesCount,
     getValueInPath,
-    ResolvedEntityCollection,
     ResolvedProperties,
     ResolvedProperty
 } from "@firecms/core";
@@ -14,37 +13,57 @@ interface Header {
     label: string;
 }
 
-export function downloadExport<M extends Record<string, any>>(data: Entity<M>[],
-                                                              additionalData: Record<string, any>[] | undefined,
-                                                              collection: ResolvedEntityCollection<M>,
-                                                              flattenArrays: boolean,
-                                                              additionalHeaders: string[] | undefined,
-                                                              exportType: "csv" | "json",
-                                                              dateExportType: "timestamp" | "string"
+export interface DownloadEntitiesExportParams<M extends Record<string, any>> {
+    data: Entity<M>[];
+    additionalData: Record<string, any>[] | undefined;
+    properties: ResolvedProperties<M>;
+    propertiesOrder: string[] | undefined;
+    name: string;
+    flattenArrays: boolean;
+    additionalHeaders: string[] | undefined;
+    exportType: "csv" | "json";
+    dateExportType: "timestamp" | "string";
+}
+
+export function downloadEntitiesExport<M extends Record<string, any>>({
+                                                                          data,
+                                                                          additionalData,
+                                                                          properties,
+                                                                          propertiesOrder,
+                                                                          name,
+                                                                          flattenArrays,
+                                                                          additionalHeaders,
+                                                                          exportType,
+                                                                          dateExportType
+                                                                      }: DownloadEntitiesExportParams<M>
 ) {
 
-    console.debug("Downloading export", { dataLength: data.length, collection, exportType, dateExportType });
-    const properties = collection.properties;
+    console.debug("Downloading export", {
+        dataLength: data.length,
+        properties,
+        exportType,
+        dateExportType
+    });
 
     if (exportType === "csv") {
         const arrayValuesCount = flattenArrays ? getArrayValuesCount(data.map(d => d.values)) : {};
-        const headers = getExportHeaders(properties, additionalHeaders, arrayValuesCount);
-        const exportableData = getCSVExportableData(data, additionalData, properties, headers, dateExportType);
+        const headers = getExportHeaders(properties, propertiesOrder, additionalHeaders, arrayValuesCount);
+        const exportableData = getEntityCSVExportableData(data, additionalData, properties, headers, dateExportType);
         const headersData = entryToCSVRow(headers.map(h => h.label));
         const csvData = exportableData.map(entry => entryToCSVRow(entry));
-        downloadBlob([headersData, ...csvData], `${collection.name}.csv`, "text/csv");
+        downloadBlob([headersData, ...csvData], `${name}.csv`, "text/csv");
     } else {
-        const exportableData = getJsonExportableData(data, additionalData, properties, dateExportType);
+        const exportableData = getEntityJsonExportableData(data, additionalData, properties, dateExportType);
         const json = JSON.stringify(exportableData, null, 2);
-        downloadBlob([json], `${collection.name}.json`, "application/json");
+        downloadBlob([json], `${name}.json`, "application/json");
     }
 }
 
-export function getCSVExportableData(data: Entity<any>[],
-                                     additionalData: Record<string, any>[] | undefined,
-                                     properties: ResolvedProperties,
-                                     headers: Header[],
-                                     dateExportType: "timestamp" | "string"
+export function getEntityCSVExportableData(data: Entity<any>[],
+                                           additionalData: Record<string, any>[] | undefined,
+                                           properties: ResolvedProperties,
+                                           headers: Header[],
+                                           dateExportType: "timestamp" | "string"
 ) {
 
     const mergedData: any[] = data.map(e => ({
@@ -63,10 +82,10 @@ export function getCSVExportableData(data: Entity<any>[],
     });
 }
 
-export function getJsonExportableData(data: Entity<any>[],
-                                      additionalData: Record<string, any>[] | undefined,
-                                      properties: ResolvedProperties,
-                                      dateExportType: "timestamp" | "string"
+export function getEntityJsonExportableData(data: Entity<any>[],
+                                            additionalData: Record<string, any>[] | undefined,
+                                            properties: ResolvedProperties,
+                                            dateExportType: "timestamp" | "string"
 ) {
 
     const mergedData: any[] = data.map(e => ({
@@ -84,13 +103,22 @@ export function getJsonExportableData(data: Entity<any>[],
 }
 
 function getExportHeaders<M extends Record<string, any>>(properties: ResolvedProperties<M>,
+                                                         propertiesOrder: string[] | undefined,
                                                          additionalHeaders: string[] | undefined,
                                                          arrayValuesCount?: ArrayValuesCount): Header[] {
 
     const headers: Header[] = [
-        { label: "id", key: "id" },
-        ...Object.entries(properties)
-            .flatMap(([childKey, property]) => {
+        {
+            label: "id",
+            key: "id"
+        },
+        ...(propertiesOrder ?? Object.keys(properties))
+            .flatMap((childKey) => {
+                const property = properties[childKey];
+                if (!property) {
+                    console.warn("Property not found", childKey, properties);
+                    return [];
+                }
                 if (arrayValuesCount && arrayValuesCount[childKey] > 1) {
                     return Array.from({ length: arrayValuesCount[childKey] },
                         (_, i) => getHeaders(property as ResolvedProperty, `${childKey}[${i}]`, ""))
@@ -102,7 +130,10 @@ function getExportHeaders<M extends Record<string, any>>(properties: ResolvedPro
     ];
 
     if (additionalHeaders) {
-        headers.push(...additionalHeaders.map(h => ({ label: h, key: h })));
+        headers.push(...additionalHeaders.map(h => ({
+            label: h,
+            key: h
+        })));
     }
 
     return headers;
@@ -121,7 +152,10 @@ function getHeaders(property: ResolvedProperty, propertyKey: string, prefix = ""
             .map(([childKey, p]) => getHeaders(p, childKey, currentKey))
             .flat();
     } else {
-        return [{ label: currentKey, key: currentKey }];
+        return [{
+            label: currentKey,
+            key: currentKey
+        }];
     }
 }
 

package/src/export_import/index.ts

@@ -0,0 +1,4 @@
+export * from "./export";
+export * from "./BasicExportAction";
+export * from "./ExportCollectionAction";
+export * from "./ImportCollectionAction";

package/src/hooks/useImportConfig.tsx

@@ -5,10 +5,12 @@ import { ImportConfig } from "../types";
 export const useImportConfig = (): ImportConfig => {
 
     const [inUse, setInUse] = useState<boolean>(false);
+    const [defaultValues, setDefaultValues] = useState<Record<string, any>>({});
     const [idColumn, setIdColumn] = useState<string | undefined>();
     const [importData, setImportData] = useState<object[]>([]);
     const [entities, setEntities] = useState<Entity<any>[]>([]);
     const [headersMapping, setHeadersMapping] = useState<Record<string, string | null>>({});
+    const [headingsOrder, setHeadingsOrder] = useState<string[]>([]);
     const [originProperties, setOriginProperties] = useState<Record<string, Property>>({});
 
     return {
@@ -20,9 +22,13 @@ export const useImportConfig = (): ImportConfig => {
         setEntities,
         importData,
         setImportData,
+        headingsOrder: (headingsOrder ?? []).length > 0 ? headingsOrder : Object.keys(headersMapping),
+        setHeadingsOrder,
         headersMapping,
         setHeadersMapping,
         originProperties,
         setOriginProperties,
+        defaultValues,
+        setDefaultValues
     };
 };

package/src/index.ts

@@ -3,3 +3,4 @@ export * from "./components";
 export * from "./types";
 export * from "./utils";
 export * from "./hooks";
+export * from "./export_import";

package/src/types/column_mapping.ts

@@ -22,11 +22,11 @@ export type ImportConfig = {
     originProperties: Record<string, Property>;
     setOriginProperties: React.Dispatch<React.SetStateAction<Record<string, Property>>>;
 
-}
+    // unmapped headings order
+    headingsOrder: string[];
+    setHeadingsOrder: React.Dispatch<React.SetStateAction<string[]>>;
+
+    defaultValues: Record<string, any>;
+    setDefaultValues: React.Dispatch<React.SetStateAction<Record<string, any>>>;
 
-export type DataTypeMapping = {
-    from: DataType;
-    fromSubtype?: DataType;
-    to: DataType;
-    toSubtype?: DataType;
 }

package/src/useImportExportPlugin.tsx

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