@rebasepro/cms 0.17.3 → 0.18.0

package/src/data_import/import/ImportCollectionAction.tsx

@@ -1,461 +0,0 @@
-import React, { useCallback, useEffect } from "react";
-import {
-    useAuthController,
-    useCustomizationController,
-    useSnackbarController
-} from "@rebasepro/app";
-import { getPropertiesWithPropertiesOrder, getPropertyInPath } from "../../util";
-import { Properties, Property, User } from "@rebasepro/types";
-import { CollectionActionsProps, AdminCollection } from "@rebasepro/cms-types";
-import { getFieldConfig } from "../../components/field_configs";
-import { PropertyConfigBadge } from "../../components/PropertyConfigBadge";
-import { useSelectionController } from "../../components/CollectionViewBinding/useSelectionController";
-import { CollectionTableBinding } from "../../components/CollectionTableBinding/CollectionTableBinding";
-import { useCollectionRegistryController } from "../../hooks";
-import {
-    Button,
-    cls,
-    defaultBorderMixin,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogTitle,
-    IconButton,
-    iconSize,
-    Select,
-    SelectItem,
-    Tooltip,
-    Typography,
-    UploadIcon
-} from "@rebasepro/ui";
-import { buildEntityPropertiesFromData } from "@rebasepro/inference";
-import { useImportConfig } from "../hooks";
-import { convertDataToEntity, getInferenceType } from "../utils";
-import { DataNewPropertiesMapping } from "../components/DataNewPropertiesMapping";
-import { ImportFileUpload } from "../components/ImportFileUpload";
-import { ImportSaveInProgress } from "../components/ImportSaveInProgress";
-import { ImportConfig } from "../types";
-import { isPrototypePollutingKey, slugify } from "@rebasepro/utils";
-
-type ImportState = "initial" | "mapping" | "preview" | "import_data_saving";
-
-export function ImportCollectionAction<M extends Record<string, unknown>, USER extends User>({
-    collection,
-    path,
-    onAnalyticsEvent
-}: CollectionActionsProps<M, USER> & {
-    onAnalyticsEvent?: (event: string, params?: any) => void;
-}
-) {
-
-    const snackbarController = useSnackbarController();
-
-    const [open, setOpen] = React.useState(false);
-
-    const [step, setStep] = React.useState<ImportState>("initial");
-
-    const importConfig = useImportConfig();
-
-    const handleClickOpen = useCallback(() => {
-        setOpen(true);
-        onAnalyticsEvent?.("import_open");
-        setStep("initial");
-    }, [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);
-
-        if (data.length > 0) {
-            const originProperties = await buildEntityPropertiesFromData(data, getInferenceType);
-            importConfig.setOriginProperties(originProperties as Properties);
-
-            const headersMapping = buildHeadersMappingFromData(data, collection?.properties);
-            importConfig.setHeadersMapping(headersMapping);
-            const firstKey = Object.keys(headersMapping)?.[0];
-            if (firstKey?.includes("id") || firstKey?.includes("key")) {
-                importConfig.setIdColumn(firstKey);
-            }
-        }
-        setTimeout(() => {
-            onAnalyticsEvent?.("import_data_added");
-            setStep("mapping");
-        }, 100);
-    };
-
-    const properties = getPropertiesWithPropertiesOrder(collection.properties, collection.propertiesOrder as Extract<keyof M, string>[]);
-
-    const propertiesAndLevel = Object.entries(properties)
-        .flatMap(([key, property]) => getPropertiesAndLevel(key, property, 0));
-    const propertiesOrder = (collection.propertiesOrder ?? Object.keys(collection.properties)) as Extract<keyof M, string>[];
-
-    return <>
-
-        <Tooltip title={"Import"}
-            asChild={true}>
-            <IconButton
-                size={"small"}
-                color={"primary"} onClick={handleClickOpen}>
-                <UploadIcon size={iconSize.small}/>
-            </IconButton>
-        </Tooltip>
-
-        <Dialog open={open}
-            fullWidth={step !== "initial"}
-            fullHeight={step !== "initial"}
-            maxWidth={step === "initial" ? "lg" : "7xl"}>
-
-            <DialogTitle variant={"h6"} hidden={step === "preview"}>Import data</DialogTitle>
-
-            <DialogContent className={"h-full flex flex-col gap-4 my-4"} fullHeight={step === "preview"}>
-
-                {step === "initial" && <>
-                    <Typography variant={"body2"}>Upload a CSV, Excel or JSON file and map it to your existing
-                        schema</Typography>
-                    <ImportFileUpload onDataAdded={onDataAdded}/>
-                </>}
-
-                {step === "mapping" && <>
-                    <DataNewPropertiesMapping importConfig={importConfig}
-                        destinationProperties={properties}
-                        buildPropertyView={({
-                            isIdColumn,
-                            property,
-                            propertyKey,
-                            importKey
-                        }) => {
-                            return <PropertyTreeSelect
-                                selectedPropertyKey={propertyKey ?? ""}
-                                properties={properties}
-                                propertiesAndLevel={propertiesAndLevel}
-                                isIdColumn={isIdColumn}
-                                onIdSelected={() => {
-                                    importConfig.setIdColumn(importKey);
-                                }}
-                                onPropertySelected={(newPropertyKey) => {
-
-                                    onAnalyticsEvent?.("import_mapping_field_updated");
-                                    const newHeadersMapping: Record<string, string | null> = Object.entries(importConfig.headersMapping)
-                                        .map(([currentImportKey, currentPropertyKey]) => {
-                                            if (currentPropertyKey === newPropertyKey) {
-                                                return { [currentImportKey]: null };
-                                            }
-                                            if (currentImportKey === importKey) {
-                                                return { [currentImportKey]: newPropertyKey };
-                                            }
-                                            return { [currentImportKey]: currentPropertyKey };
-                                        })
-                                        .reduce((acc, curr) => ({ ...acc,
-...curr }), {});
-                                    importConfig.setHeadersMapping(newHeadersMapping as Record<string, string>);
-
-                                    if (newPropertyKey === importConfig.idColumn) {
-                                        importConfig.setIdColumn(undefined);
-                                    }
-
-                                }}
-                            />;
-                        }}/>
-                </>}
-
-                {step === "preview" && <ImportDataPreview importConfig={importConfig}
-                    properties={properties}
-                    propertiesOrder={propertiesOrder}/>}
-
-                {step === "import_data_saving" && importConfig &&
-                    <ImportSaveInProgress importConfig={importConfig}
-                        collection={collection as AdminCollection}
-                        path={path}
-                        onImportSuccess={(importedCollection) => {
-                            handleClose();
-                            snackbarController.open({
-                                type: "info",
-                                message: "Data imported successfully"
-                            });
-                        }}
-                    />}
-
-            </DialogContent>
-            <DialogActions>
-
-                {step === "mapping" && <Button
-                    onClick={() => setStep("initial")}
-                    variant={"text"}>
-                    Back
-                </Button>}
-
-                {step === "preview" && <Button
-                    onClick={() => setStep("mapping")}
-                    variant={"text"}>
-                    Back
-                </Button>}
-
-                <Button onClick={handleClose}
-                    variant={"text"}>
-                    Cancel
-                </Button>
-
-                {step === "mapping" && <Button variant="filled"
-                    color={"primary"}
-                    onClick={onMappingComplete}>
-                    Next
-                </Button>}
-
-                {step === "preview" && <Button variant="filled"
-                    color={"primary"}
-                    onClick={onPreviewComplete}>
-                    Save data
-                </Button>}
-
-            </DialogActions>
-        </Dialog>
-
-    </>;
-}
-
-const internalIDValue = "__internal_id__";
-
-function PropertyTreeSelect({
-    selectedPropertyKey,
-    properties,
-    onPropertySelected,
-    onIdSelected,
-    propertiesAndLevel,
-    isIdColumn
-}: {
-    selectedPropertyKey: string | null;
-    properties: Record<string, Property>;
-    onPropertySelected: (propertyKey: string | null) => void;
-    onIdSelected: () => void;
-    propertiesAndLevel: PropertyAndLevel[];
-    isIdColumn?: boolean;
-}) {
-
-    const selectedProperty = selectedPropertyKey ? getPropertyInPath(properties, selectedPropertyKey) : null;
-
-    const renderValue = useCallback((selectedPropertyKey: string) => {
-
-        if (selectedPropertyKey === internalIDValue) {
-            return <Typography variant={"body2"} className={"p-4"}>Use this column as ID</Typography>;
-        }
-
-        if (!selectedPropertyKey || !selectedProperty) {
-            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 = (value: string) => {
-        if (value === internalIDValue) {
-            onIdSelected();
-            onPropertySelected(null);
-        } else if (value === "__do_not_import") {
-            onPropertySelected(null);
-        } else {
-            onPropertySelected(value);
-        }
-    };
-
-    return <Select value={isIdColumn ? internalIDValue : (selectedPropertyKey ?? undefined)}
-        fullWidth={true}
-        onValueChange={onSelectValueChange}
-        renderValue={renderValue}>
-
-        <SelectItem value={"__do_not_import"}>
-            <Typography variant={"body2"} color={"disabled"} className={"p-4"}>Do not import this property</Typography>
-        </SelectItem>
-
-        <SelectItem value={internalIDValue}>
-            <Typography variant={"body2"} className={"p-4"}>Use this column as ID</Typography>
-        </SelectItem>
-
-        {propertiesAndLevel.map(({
-            property,
-            level,
-            propertyKey
-        }) => {
-            return <SelectItem value={propertyKey}
-                key={propertyKey}
-                disabled={property.type === "map"}>
-                <PropertySelectEntry propertyKey={propertyKey}
-                    property={property}
-                    level={level}/>
-            </SelectItem>;
-        })}
-
-    </Select>;
-}
-
-type PropertyAndLevel = {
-    property: Property,
-    level: number,
-    propertyKey: string
-};
-
-function getPropertiesAndLevel(key: string, property: Property, level: number): PropertyAndLevel[] {
-    const properties: PropertyAndLevel[] = [];
-    properties.push({
-        property,
-        level,
-        propertyKey: key
-    });
-    if (property.type === "map" && property.properties) {
-        Object.entries(property.properties).forEach(([childKey, value]) => {
-            properties.push(...getPropertiesAndLevel(`${key}.${childKey}`, value as Property, level + 1));
-        });
-    }
-    return properties;
-}
-
-export function PropertySelectEntry({
-    propertyKey,
-    property,
-    level = 0
-}: {
-    propertyKey: string;
-    property: Property;
-    level?: number;
-}) {
-
-    const { propertyConfigs } = useCustomizationController();
-    const widget = getFieldConfig(property, propertyConfigs);
-
-    return <div
-        className="flex flex-row w-full text-start items-center h-full">
-
-        {new Array(level).fill(0).map((_, index) =>
-            <div className={cls(defaultBorderMixin, "ml-8 border-l h-12")} key={index}/>)}
-
-        <div className={"m-4"}>
-            <Tooltip title={widget?.name}>
-                <PropertyConfigBadge propertyConfig={widget}/>
-            </Tooltip>
-        </div>
-
-        <div className={"flex flex-col grow p-2 pl-2"}>
-            <Typography variant="body1"
-                component="span"
-                className="grow pr-2">
-                {property.name
-                    ? property.name
-                    : "\u00a0"
-                }
-            </Typography>
-
-            <Typography className=" pr-2"
-                variant={"body2"}
-                component="span"
-                color="secondary">
-                {propertyKey}
-            </Typography>
-        </div>
-
-    </div>;
-
-}
-
-export function ImportDataPreview<M extends Record<string, unknown>>({
-    importConfig,
-    properties,
-    propertiesOrder
-}: {
-    importConfig: ImportConfig,
-    properties: Properties,
-    propertiesOrder: Extract<keyof M, string>[],
-}) {
-    const authController = useAuthController();
-    const collectionRegistry = useCollectionRegistryController();
-    useEffect(() => {
-        const mappedData = importConfig.importData.map(d => convertDataToEntity(
-            authController,
-            collectionRegistry,
-            d,
-            importConfig.idColumn,
-            importConfig.headersMapping,
-            properties,
-            "TEMP_PATH",
-            importConfig.defaultValues
-        ));
-        importConfig.setEntities(mappedData);
-    }, []);
-
-    const selectionController = useSelectionController();
-
-    return <CollectionTableBinding
-        title={<div>
-            <Typography variant={"subtitle2"}>Imported data preview</Typography>
-            {/* Conditional because it is only true when a column was chosen as
-                the id: without one, every row is created and nothing can be
-                overwritten. With one, the import asks for an upsert — which it
-                did not, back when this sentence was unconditional and false. */}
-            <Typography variant={"caption"}>
-                {importConfig.idColumn
-                    ? "Entities with the same id will be overwritten"
-                    : "All rows will be imported as new entities"}
-            </Typography>
-        </div>}
-        tableController={{
-            data: importConfig.entities,
-            dataLoading: false,
-            noMoreToLoad: false
-        }}
-        enablePopupIcon={false}
-        endAdornment={<div className={"h-12"}/>}
-        filterable={false}
-        sortable={false}
-        openEntityMode={"full_screen"}
-        selectionController={selectionController}
-        properties={properties}/>
-
-}
-
-function buildHeadersMappingFromData(objArr: object[], properties?: Properties) {
-    const headersMapping: Record<string, string> = {};
-    objArr.filter(Boolean).forEach((obj) => {
-        Object.keys(obj).forEach((key) => {
-            // The keys are the uploaded file's header row; `headersMapping[key] = …`
-            // is the same setter the import pipeline refuses elsewhere.
-            if (isPrototypePollutingKey(key)) return;
-            const child = (obj as Record<string, unknown>)[key];
-            if (child != null && typeof child === "object" && !Array.isArray(child)) {
-                const childProperty = properties?.[key];
-                const childProperties = childProperty && "properties" in childProperty ? childProperty.properties : undefined;
-                const childHeadersMapping = buildHeadersMappingFromData([child as object], childProperties);
-                Object.entries(childHeadersMapping).forEach(([subKey, mapping]) => {
-                    headersMapping[`${key}.${subKey}`] = `${key}.${mapping}`;
-                });
-            }
-
-            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/data_import/import/index.ts

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

package/src/data_import/index.ts

@@ -1,5 +0,0 @@
-export * from "./components";
-export * from "./types";
-export * from "./utils";
-export * from "./hooks";
-export * from "./import";

package/src/data_import/types/column_mapping.ts

@@ -1,32 +0,0 @@
-import React from "react";
-import { DataType, Entity, Property } from "@rebasepro/types";
-
-export type ImportConfig = {
-
-    inUse: boolean;
-    setInUse: React.Dispatch<React.SetStateAction<boolean>>;
-
-    idColumn: string | undefined;
-    setIdColumn: React.Dispatch<React.SetStateAction<string | undefined>>;
-
-    importData: object[];
-    setImportData: React.Dispatch<React.SetStateAction<object[]>>;
-
-    entities: Entity<any>[];
-    setEntities: React.Dispatch<React.SetStateAction<Entity<any>[]>>;
-
-    // mapping of the column name in the import file to the property key in the data model
-    headersMapping: Record<string, string | null>;
-    setHeadersMapping: React.Dispatch<React.SetStateAction<Record<string, string | null>>>;
-
-    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>>>;
-
-}

package/src/data_import/types/index.ts

@@ -1 +0,0 @@
-export * from "./column_mapping";

package/src/data_import/utils/csv.ts

@@ -1,153 +0,0 @@
-import { isPrototypePollutingKey } from "@rebasepro/utils";
-
-/**
- * Delimiters sniffed from the header row, most common first.
- *
- * A spreadsheet saved as "CSV" in a locale that uses the comma as a decimal
- * separator is semicolon-delimited, and a tab-separated file saved as `.csv`
- * happens often enough to be worth reading.
- */
-const CANDIDATE_DELIMITERS = [",", ";", "\t"];
-
-/**
- * Split CSV text into rows of raw cells, RFC 4180 style.
- *
- * Quoted fields may contain the delimiter, newlines and doubled quotes; this is
- * the exact inverse of what the export's `entryToCSVRow` writes, so a file this
- * admin produced reads back into the cells it was built from.
- */
-export function parseCsvRows(text: string, delimiter = ","): string[][] {
-    const rows: string[][] = [];
-    let row: string[] = [];
-    let field = "";
-    let quoted = false;
-    let inQuotes = false;
-    let i = 0;
-
-    const endField = () => {
-        row.push(field);
-        field = "";
-        quoted = false;
-    };
-
-    while (i < text.length) {
-        const char = text[i];
-
-        if (inQuotes) {
-            if (char === "\"") {
-                // A doubled quote is a literal one; a single quote closes the field.
-                if (text[i + 1] === "\"") {
-                    field += "\"";
-                    i += 2;
-                    continue;
-                }
-                inQuotes = false;
-                i++;
-                continue;
-            }
-            field += char;
-            i++;
-            continue;
-        }
-
-        if (char === "\"" && field === "") {
-            inQuotes = true;
-            quoted = true;
-            i++;
-            continue;
-        }
-        if (char === delimiter) {
-            endField();
-            i++;
-            continue;
-        }
-        if (char === "\r") {
-            // CRLF: the line ends on the \n. A lone CR outside quotes is dropped.
-            i++;
-            continue;
-        }
-        if (char === "\n") {
-            endField();
-            rows.push(row);
-            row = [];
-            i++;
-            continue;
-        }
-        field += char;
-        i++;
-    }
-
-    // A file that does not end in a newline still has a last row.
-    if (field !== "" || quoted || row.length > 0) {
-        endField();
-        rows.push(row);
-    }
-
-    return rows;
-}
-
-/**
- * Pick the delimiter that splits the header row into the most cells. A
- * single-column file matches nothing and stays on the comma.
- */
-export function detectCsvDelimiter(text: string): string {
-    const sample = text.slice(0, 64 * 1024);
-    let best = CANDIDATE_DELIMITERS[0];
-    let bestCount = 1;
-    for (const candidate of CANDIDATE_DELIMITERS) {
-        const count = parseCsvRows(sample, candidate)[0]?.length ?? 0;
-        if (count > bestCount) {
-            best = candidate;
-            bestCount = count;
-        }
-    }
-    return best;
-}
-
-export interface ParsedCsv {
-    headers: string[];
-    data: Record<string, string>[];
-}
-
-/**
- * Parse CSV text into one object per row, keyed by the header row.
- *
- * The picker accepts `.csv` and the dialog promises "Upload a CSV, Excel or JSON
- * file", but every non-JSON file used to be handed to ExcelJS'
- * `workbook.xlsx.load`, which is a zip reader — so every CSV failed with
- * "Can't find end of central directory : is this a zip file ?". The export
- * writes CSV by default, so the round trip could not close.
- *
- * A blank header keeps its column rather than collapsing it, so the cells to its
- * right stay under their own names.
- */
-export function parseCsvToObjects(text: string): ParsedCsv {
-    // A BOM is one character of the first header, and Excel writes one.
-    const cleaned = text.charCodeAt(0) === 0xFEFF ? text.slice(1) : text;
-    const delimiter = detectCsvDelimiter(cleaned);
-    const rows = parseCsvRows(cleaned, delimiter)
-        .filter(row => row.some(cell => cell.trim() !== ""));
-
-    if (rows.length === 0) {
-        return { headers: [],
-            data: [] };
-    }
-
-    const headers = rows[0].map((header, index) => header.trim() || `Column${index + 1}`);
-
-    const data = rows.slice(1).map((cells) => {
-        const obj: Record<string, string> = {};
-        headers.forEach((header, index) => {
-            // The header row is uploaded data: `obj["__proto__"] = …` is the
-            // prototype setter, not a column. Refused, as elsewhere in import.
-            if (isPrototypePollutingKey(header)) return;
-            const cell = cells[index];
-            if (cell === undefined) return;
-            obj[header] = cell;
-        });
-        return obj;
-    });
-
-    return { headers,
-        data };
-}