@rebasepro/cms 0.0.1-canary.4d4fb3e

package/src/collection_editor/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -0,0 +1,600 @@
+import React, { useEffect, useMemo, useState } from "react";
+
+import { Field, getIn, useFormex } from "@rebasepro/formex";
+import {
+    useLargeLayout,
+    useSnackbarController
+} from "@rebasepro/core";
+import { ErrorBoundary } from "@rebasepro/ui";
+import { EntityCollection, MapProperty, Properties, Property, PropertyConfig, User } from "@rebasepro/types";
+import { isPropertyBuilder } from "@rebasepro/common";
+import {
+    AddIcon,
+    Button,
+    CircularProgress,
+    cls,
+    CodeIcon,
+    DebouncedTextField,
+    defaultBorderMixin,
+    FindInPageIcon,
+    IconButton,
+    Tooltip,
+    Typography,
+} from "@rebasepro/ui";
+
+import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath } from "./util";
+import { OnPropertyChangedParams, PropertyForm, PropertyFormDialog } from "./PropertyEditView";
+import { PropertyTree } from "./PropertyTree";
+import { GetCodeDialog } from "./GetCodeDialog";
+import { useAIModifiedPaths } from "./AIModifiedPathsContext";
+import { useCollectionsConfigController } from "../../useCollectionsConfigController";
+
+type PropertyOrBuilder = Property | any;
+
+type CollectionEditorFormProps = {
+    showErrors: boolean;
+    isNewCollection: boolean;
+    propertyErrorsRef?: React.MutableRefObject<any>;
+    onPropertyError: (propertyKey: string, namespace: string | undefined, error?: Record<string, any>) => void;
+    setDirty?: (dirty: boolean) => void;
+    reservedGroups?: string[];
+    extraIcon: React.ReactNode | any;
+    getUser?: (uid: string) => User | null;
+    getData?: () => Promise<object[]>;
+    doCollectionInference?: (collection: EntityCollection) => Promise<Partial<EntityCollection> | null> | undefined;
+    propertyConfigs: Record<string, PropertyConfig>;
+
+};
+
+export function CollectionPropertiesEditorForm({
+    showErrors,
+    isNewCollection,
+    propertyErrorsRef,
+    onPropertyError,
+    setDirty,
+    reservedGroups,
+    extraIcon,
+    getUser,
+    getData,
+    doCollectionInference,
+    propertyConfigs,
+
+}: CollectionEditorFormProps) {
+
+    const {
+        values,
+        setFieldValue,
+        setFieldError,
+        setFieldTouched,
+        errors,
+        dirty
+    } = useFormex<EntityCollection>();
+
+    const snackbarController = useSnackbarController();
+    const configController = useCollectionsConfigController();
+
+    const largeLayout = useLargeLayout();
+    const asDialog = !largeLayout
+
+    // index of the selected property within the namespace
+    const [selectedPropertyIndex, setSelectedPropertyIndex] = useState<number | undefined>();
+    const [selectedPropertyKey, setSelectedPropertyKey] = useState<string | undefined>();
+    const [selectedPropertyNamespace, setSelectedPropertyNamespace] = useState<string | undefined>();
+
+    const selectedPropertyFullId = selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined;
+    const selectedProperty = selectedPropertyFullId ? getIn(values.properties, selectedPropertyFullId.replaceAll(".", ".properties.")) : undefined;
+    const [codeDialogOpen, setCodeDialogOpen] = useState<boolean>(false);
+
+    const [inferringProperties, setInferringProperties] = useState<boolean>(false);
+
+    const [newPropertyDialogOpen, setNewPropertyDialogOpen] = useState<boolean>(false);
+    const [inferredPropertyKeys, setInferredPropertyKeys] = useState<string[]>([]);
+
+    const currentPropertiesOrderRef = React.useRef<{
+        [key: string]: string[]
+    }>(values.propertiesOrder ? { "": values.propertiesOrder } : {});
+
+    useEffect(() => {
+        if (setDirty)
+            setDirty(dirty);
+    }, [dirty]);
+
+    const inferPropertiesFromData = doCollectionInference
+        ? (): void => {
+            if (!doCollectionInference || configController?.readOnly)
+                return;
+
+            setInferringProperties(true);
+
+            console.debug("CollectionEditor: inferring properties from data", values);
+            // @ts-ignore
+            doCollectionInference(values)
+                .then((newCollection) => {
+
+                    if (!newCollection) {
+                        snackbarController.open({
+                            type: "error",
+                            message: "Could not infer properties from data"
+                        });
+                        return;
+                    }
+
+                    // Helper function to find all new property keys including nested ones
+                    const findNewPropertyKeys = (
+                        existingProps: Record<string, PropertyOrBuilder> | undefined,
+                        newProps: Record<string, PropertyOrBuilder> | undefined,
+                        namespace?: string
+                    ): string[] => {
+                        if (!newProps) return [];
+                        const keys: string[] = [];
+
+                        for (const key of Object.keys(newProps)) {
+                            const fullKey = namespace ? `${namespace}.${key}` : key;
+                            const existingProp = existingProps?.[key];
+                            const newProp = newProps[key];
+
+                            if (!existingProp) {
+                                // This is a completely new property
+                                keys.push(fullKey);
+                            } else if (
+                                typeof newProp === "object" &&
+                                "type" in newProp &&
+                                newProp.dataType === "map" &&
+                                newProp.properties
+                            ) {
+                                // This is a map property, check for new nested properties
+                                const existingMapProps = typeof existingProp === "object" &&
+                                    "type" in existingProp &&
+                                    existingProp.dataType === "map"
+                                    ? (existingProp as MapProperty).properties
+                                    : undefined;
+                                keys.push(...findNewPropertyKeys(existingMapProps, newProp.properties as Record<string, PropertyOrBuilder>, fullKey));
+                            }
+                        }
+                        return keys;
+                    };
+
+                    // Helper function to add only new properties without overwriting existing ones
+                    // This preserves existing property configurations while adding missing nested properties
+                    const addNewPropertiesOnly = (
+                        existingProps: Record<string, PropertyOrBuilder> | undefined,
+                        newProps: Record<string, PropertyOrBuilder> | undefined
+                    ): Record<string, PropertyOrBuilder> => {
+                        if (!newProps) return existingProps ?? {};
+                        if (!existingProps) return newProps;
+
+                        const result = { ...existingProps };
+
+                        for (const key of Object.keys(newProps)) {
+                            const existingProp = existingProps[key];
+                            const newProp = newProps[key];
+
+                            if (!existingProp) {
+                                // This property doesn't exist, add it
+                                result[key] = newProp;
+                            } else if (
+                                typeof existingProp === "object" &&
+                                "type" in existingProp &&
+                                existingProp.dataType === "map" &&
+                                typeof newProp === "object" &&
+                                "type" in newProp &&
+                                newProp.dataType === "map" &&
+                                newProp.properties
+                            ) {
+                                // Both are map properties, recursively add new nested properties
+                                // Only if the existing map has properties, merge them; otherwise keep existing as-is
+                                const existingMapProps = (existingProp as MapProperty).properties as Record<string, PropertyOrBuilder> | undefined;
+                                if (existingMapProps) {
+                                    result[key] = {
+                                        ...existingProp,
+                                        properties: addNewPropertiesOnly(
+                                            existingMapProps,
+                                            newProp.properties as Record<string, PropertyOrBuilder>
+                                        )
+                                    };
+                                }
+                                // If existingProp doesn't have properties, keep it as-is (don't overwrite with inferred)
+                            }
+                            // Otherwise, keep the existing property as-is (don't overwrite)
+                        }
+
+                        return result;
+                    };
+
+                    // Add only new properties from inferred collection without replacing existing ones
+                    const updatedProperties = addNewPropertiesOnly(
+                        values.properties ?? {},
+                        newCollection.properties as Record<string, PropertyOrBuilder>
+                    ) as { [key: string]: PropertyOrBuilder };
+
+                    // Find all new property keys including nested ones
+                    const allNewPropertyKeys = findNewPropertyKeys(
+                        values.properties,
+                        newCollection.properties as Record<string, PropertyOrBuilder>
+                    );
+
+                    // Find new top-level property keys for the properties order
+                    const newTopLevelPropertyKeys = (newCollection.properties ? Object.keys(newCollection.properties) : [])
+                        .filter((propertyKey) => !values.properties[propertyKey]);
+
+                    // Check if there are any changes (new properties or modified nested properties)
+                    if (allNewPropertyKeys.length === 0) {
+                        snackbarController.open({
+                            type: "info",
+                            message: "No new properties found in existing data"
+                        });
+                        return;
+                    }
+
+                    // Update properties order: keep existing order and append new keys at the beginning
+                    // Use Object.keys from updatedProperties to ensure all properties are included
+                    const allExistingKeys = values.propertiesOrder ?? Object.keys(values.properties ?? {});
+                    const updatedPropertiesOrder = [
+                        ...newTopLevelPropertyKeys,
+                        ...allExistingKeys.filter(key => !newTopLevelPropertyKeys.includes(key))
+                    ];
+
+                    setFieldValue("properties", updatedProperties, false);
+                    updatePropertiesOrder(updatedPropertiesOrder);
+                    setInferredPropertyKeys(allNewPropertyKeys);
+
+                    snackbarController.open({
+                        type: "success",
+                        message: `Added ${allNewPropertyKeys.length} new ${allNewPropertyKeys.length === 1 ? "property" : "properties"}`
+                    });
+                })
+                .finally(() => {
+                    setInferringProperties(false);
+                })
+        }
+        : undefined;
+
+    const getCurrentPropertiesOrder = (namespace?: string) => {
+        if (!namespace) return currentPropertiesOrderRef.current[""] ?? getIn(values, namespaceToPropertiesOrderPath());
+        return currentPropertiesOrderRef.current[namespace] ?? getIn(values, namespaceToPropertiesOrderPath(namespace));
+    };
+
+    const updatePropertiesOrder = (newPropertiesOrder: string[], namespace?: string) => {
+        const propertiesOrderPath = namespaceToPropertiesOrderPath(namespace);
+
+        setFieldValue(propertiesOrderPath, newPropertiesOrder, false);
+        currentPropertiesOrderRef.current[namespace ?? ""] = newPropertiesOrder;
+
+    };
+
+    const deleteProperty = (propertyKey?: string, namespace?: string) => {
+        if (configController?.readOnly) return;
+        const fullId = propertyKey ? getFullId(propertyKey, namespace) : undefined;
+        if (!fullId)
+            throw Error("collection editor miss config");
+
+        setFieldValue(idToPropertiesPath(fullId), undefined, false);
+
+        const currentPropertiesOrder = getCurrentPropertiesOrder(namespace);
+        if (currentPropertiesOrder) {
+            const newPropertiesOrder = currentPropertiesOrder.filter((p) => p !== propertyKey);
+            updatePropertiesOrder(newPropertiesOrder, namespace);
+        }
+
+        setNewPropertyDialogOpen(false);
+
+        setSelectedPropertyIndex(undefined);
+        setSelectedPropertyKey(undefined);
+        setSelectedPropertyNamespace(undefined);
+    };
+
+    const onPropertyMove = (propertiesOrder: string[], namespace?: string) => {
+        if (configController?.readOnly) return;
+        setFieldValue(namespaceToPropertiesOrderPath(namespace), propertiesOrder, false);
+    };
+
+    const onPropertyCreated = ({
+        id,
+        property
+    }: {
+        id?: string,
+        property: Property
+    }) => {
+        if (configController?.readOnly) return;
+        if (!id) {
+            throw Error("Need to include an ID when creating a new property")
+        }
+        setFieldValue("properties", {
+            ...(values.properties ?? {}),
+            [id]: property
+        }, false);
+
+        const newPropertiesOrder = [...(values.propertiesOrder ?? Object.keys(values.properties)), id];
+        updatePropertiesOrder(newPropertiesOrder);
+
+        setNewPropertyDialogOpen(false);
+        if (largeLayout) {
+            setSelectedPropertyIndex(newPropertiesOrder.indexOf(id));
+            setSelectedPropertyKey(id);
+        }
+        setSelectedPropertyNamespace(undefined);
+    };
+
+    const onPropertyChanged = ({
+        id,
+        property,
+        previousId,
+        namespace
+    }: OnPropertyChangedParams) => {
+
+        const fullId = id ? getFullId(id, namespace) : undefined;
+        const propertyPath = fullId ? idToPropertiesPath(fullId) : undefined;
+
+        // If the id has changed we need to a little cleanup
+        if (previousId && previousId !== id) {
+
+            const previousFullId = getFullId(previousId, namespace);
+            const previousPropertyPath = idToPropertiesPath(previousFullId);
+
+            const currentPropertiesOrder = getCurrentPropertiesOrder(namespace);
+
+            // replace previousId with id in propertiesOrder
+            const newPropertiesOrder = currentPropertiesOrder
+                .map((p) => p === previousId ? id : p)
+                .filter((p) => p !== undefined) as string[];
+
+            updatePropertiesOrder(newPropertiesOrder, namespace);
+
+            if (id) {
+                setSelectedPropertyIndex(newPropertiesOrder.indexOf(id));
+                setSelectedPropertyKey(id);
+            }
+            setFieldValue(previousPropertyPath, undefined, false);
+            setFieldTouched(previousPropertyPath, false, false);
+        }
+
+        if (propertyPath) {
+            setFieldValue(propertyPath, property, false);
+            setFieldTouched(propertyPath, true, false);
+        }
+
+    };
+
+    const onPropertyErrorInternal = (id: string, namespace?: string, error?: Record<string, any>) => {
+        const propertyPath = id ? getFullId(id, namespace) : undefined;
+        console.debug("onPropertyErrorInternal", {
+            id,
+            namespace,
+            error,
+            propertyPath
+        });
+        if (propertyPath) {
+            const hasError = error && Object.keys(error).length > 0;
+            onPropertyError(id, namespace, hasError ? error : undefined);
+            setFieldError(idToPropertiesPath(propertyPath), hasError ? "Property error" : undefined);
+        }
+    }
+
+    const closePropertyDialog = () => {
+        setSelectedPropertyIndex(undefined);
+        setSelectedPropertyKey(undefined);
+    };
+
+    const initialErrors = selectedPropertyKey && propertyErrorsRef?.current?.properties ? propertyErrorsRef.current.properties[selectedPropertyKey] : undefined;
+
+    const emptyCollection = (values?.propertiesOrder === undefined || values.propertiesOrder.length === 0)
+        && (!values?.properties || Object.keys(values.properties).length === 0);
+
+    const usedPropertiesOrder = (values.propertiesOrder
+        ? values.propertiesOrder
+        : Object.keys(values.properties)) as string[];
+
+    const owner = useMemo(() => values.ownerId && getUser ? getUser(values.ownerId) : null, [getUser, values.ownerId]);
+
+    // Get AI generation counter for key to force remount on AI changes
+    const aiModifiedPaths = useAIModifiedPaths();
+    const generationCounter = aiModifiedPaths?.generationCounter ?? 0;
+
+    const onPropertyClick = (propertyKey: string, namespace?: string) => {
+        console.debug("CollectionEditor: onPropertyClick", {
+            propertyKey,
+            namespace
+        });
+        setSelectedPropertyIndex(usedPropertiesOrder.indexOf(propertyKey));
+        setSelectedPropertyKey(propertyKey);
+        setSelectedPropertyNamespace(namespace);
+    };
+
+    const body = (
+        <div className={"grid grid-cols-12 gap-2 h-full bg-surface dark:bg-surface-dark"}>
+            <div className={cls(
+                "bg-surface-50 dark:bg-surface-900",
+                "p-4 md:p-8",
+                "col-span-12 lg:col-span-5 h-full overflow-auto",
+                !asDialog && "border-r " + defaultBorderMixin
+            )}>
+
+                <div className="flex my-2">
+
+                    <div className="grow mb-4">
+
+                        <Field
+                            name={"name"}
+                            as={DebouncedTextField}
+                            invisible={true}
+                            className="-ml-1"
+                            inputClassName="text-2xl font-headers"
+                            placeholder={"Collection name"}
+                            size={"small"}
+                            required
+                            error={Boolean(errors?.name)} />
+
+                        {owner &&
+                            <Typography variant={"body2"}
+                                className={"ml-2"}
+                                color={"secondary"}>
+                                Created by {owner.displayName}
+                            </Typography>}
+                    </div>
+
+                    {extraIcon && <div className="ml-4">
+                        {extraIcon}
+                    </div>}
+
+                    <div className="ml-4 flex flex-row gap-2 items-center flex-shrink-0">
+                        {/* <Tooltip title={"Get the code for this collection"}
+                            asChild={true}>
+                            <IconButton
+                                variant={"filled"}
+                                disabled={inferringProperties}
+                                onClick={() => setCodeDialogOpen(true)}>
+                                <CodeIcon />
+                            </IconButton>
+                        </Tooltip> */}
+                        {inferPropertiesFromData && <Tooltip title={"Add new properties based on data"}
+                            asChild={true}>
+                            <IconButton
+                                variant={"filled"}
+                                disabled={inferringProperties}
+                                onClick={inferPropertiesFromData}>
+                                {inferringProperties ? <CircularProgress size={"small"} /> : <FindInPageIcon />}
+                            </IconButton>
+                        </Tooltip>}
+                        <Tooltip title={"Add new property"}
+                            asChild={true}>
+                            <Button
+                                disabled={configController?.readOnly}
+                                onClick={() => setNewPropertyDialogOpen(true)}>
+                                <AddIcon />
+                            </Button>
+                        </Tooltip>
+                    </div>
+                </div>
+
+                <ErrorBoundary>
+                    <PropertyTree
+                        className={"mt-2"}
+                        inferredPropertyKeys={inferredPropertyKeys}
+                        selectedPropertyKey={selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined}
+                        properties={values.properties}
+                        additionalFields={values.additionalFields}
+                        propertiesOrder={usedPropertiesOrder}
+                        onPropertyClick={onPropertyClick}
+                        onPropertyMove={onPropertyMove}
+                        onPropertyRemove={(isNewCollection || (inferredPropertyKeys && inferredPropertyKeys.length > 0)) && !configController?.readOnly ? deleteProperty : undefined}
+
+                        errors={errors} />
+                </ErrorBoundary>
+
+                <Button className={"mt-4 xl:mt-8 w-full"}
+                    variant="filled"
+                    color="neutral"
+                    disabled={configController?.readOnly}
+                    onClick={() => setNewPropertyDialogOpen(true)}
+                    startIcon={<AddIcon />}>
+                    Add new property
+                </Button>
+            </div>
+
+            {!asDialog &&
+                <div className={"col-span-12 lg:col-span-7 p-4 md:py-8 md:px-4 h-full overflow-auto"}>
+                    <div
+                        className="sticky top-8 min-h-full w-full flex flex-col justify-center">
+
+                        {selectedPropertyFullId &&
+                            selectedProperty &&
+                            !isPropertyBuilder(selectedProperty) &&
+                            <PropertyForm
+                                inArray={false}
+                                key={`edit_view_${selectedPropertyIndex}_${generationCounter}`}
+                                existingProperty={!isNewCollection}
+                                autoUpdateId={false}
+                                allowDataInference={!isNewCollection}
+                                autoOpenTypeSelect={false}
+                                propertyKey={selectedPropertyKey}
+                                propertyNamespace={selectedPropertyNamespace}
+                                property={selectedProperty}
+                                onPropertyChanged={onPropertyChanged}
+                                onDelete={deleteProperty}
+                                onError={onPropertyErrorInternal}
+                                forceShowErrors={showErrors}
+                                initialErrors={initialErrors}
+                                getData={getData}
+                                propertyConfigs={propertyConfigs}
+        
+                            />}
+
+                        {!selectedProperty &&
+                            <div className={"w-full flex flex-col items-center justify-center h-full gap-4"}>
+                                <Typography variant={"label"} className="">
+                                    {emptyCollection
+                                        ? "Now you can add your first property"
+                                        : "Select a property to edit it"}
+                                </Typography>
+                                <Button
+                                    disabled={configController?.readOnly}
+                                    onClick={() => setNewPropertyDialogOpen(true)}
+                                >
+                                    <AddIcon />
+                                    Add new property
+                                </Button>
+                            </div>}
+
+                        {selectedProperty && isPropertyBuilder(selectedProperty) &&
+                            <Typography variant={"label"} className="flex items-center justify-center">
+                                {"This property is defined as a property builder in code"}
+                            </Typography>}
+                    </div>
+                </div>}
+
+            {asDialog && <PropertyFormDialog
+                inArray={false}
+                open={selectedPropertyIndex !== undefined}
+                key={`edit_view_${selectedPropertyIndex}_${generationCounter}`}
+                autoUpdateId={!selectedProperty}
+                allowDataInference={!isNewCollection}
+                existingProperty={true}
+                autoOpenTypeSelect={false}
+                propertyKey={selectedPropertyKey}
+                propertyNamespace={selectedPropertyNamespace}
+                property={selectedProperty}
+                onPropertyChanged={onPropertyChanged}
+                onDelete={deleteProperty}
+                onError={onPropertyErrorInternal}
+                forceShowErrors={showErrors}
+                initialErrors={initialErrors}
+                getData={getData}
+                propertyConfigs={propertyConfigs}
+
+
+                onCancel={closePropertyDialog}
+                onOkClicked={asDialog
+                    ? closePropertyDialog
+                    : undefined
+                } />}
+
+        </div>);
+
+    return (<>
+
+        {body}
+
+        {/* This is the dialog used for new properties*/}
+        <PropertyFormDialog
+            inArray={false}
+            existingProperty={false}
+            autoOpenTypeSelect={true}
+            autoUpdateId={true}
+            forceShowErrors={showErrors}
+            open={newPropertyDialogOpen}
+            onCancel={() => setNewPropertyDialogOpen(false)}
+            onPropertyChanged={onPropertyCreated}
+            getData={getData}
+            allowDataInference={!isNewCollection}
+            propertyConfigs={propertyConfigs}
+            existingPropertyKeys={values.propertiesOrder as string[]} />
+
+        <ErrorBoundary>
+            <GetCodeDialog
+                collection={values}
+                open={codeDialogOpen}
+                onOpenChange={setCodeDialogOpen} />
+        </ErrorBoundary>
+    </>
+    );
+}