@firecms/collection_editor 3.0.1 → 3.1.0-canary.02232f4

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -6,23 +6,25 @@ import {
     ErrorBoundary,
     isPropertyBuilder,
     makePropertiesEditable,
+    MapProperty,
     Properties,
     Property,
     PropertyConfig,
     PropertyOrBuilder,
     useLargeLayout,
     User,
-    useSnackbarController
+    useSnackbarController,
+    useTranslation
 } from "@firecms/core";
 import {
     AddIcon,
-    AutorenewIcon,
     Button,
     CircularProgress,
     cls,
     CodeIcon,
     DebouncedTextField,
     defaultBorderMixin,
+    FindInPageIcon,
     IconButton,
     Tooltip,
     Typography,
@@ -33,6 +35,7 @@ import { OnPropertyChangedParams, PropertyForm, PropertyFormDialog } from "./Pro
 import { PropertyTree } from "./PropertyTree";
 import { PersistedCollection } from "../../types/persisted_collection";
 import { GetCodeDialog } from "./GetCodeDialog";
+import { useAIModifiedPaths } from "./AIModifiedPathsContext";
 
 type CollectionEditorFormProps = {
     showErrors: boolean;
@@ -50,19 +53,19 @@ type CollectionEditorFormProps = {
 };
 
 export function CollectionPropertiesEditorForm({
-                                                   showErrors,
-                                                   isNewCollection,
-                                                   propertyErrorsRef,
-                                                   onPropertyError,
-                                                   setDirty,
-                                                   reservedGroups,
-                                                   extraIcon,
-                                                   getUser,
-                                                   getData,
-                                                   doCollectionInference,
-                                                   propertyConfigs,
-                                                   collectionEditable
-                                               }: CollectionEditorFormProps) {
+    showErrors,
+    isNewCollection,
+    propertyErrorsRef,
+    onPropertyError,
+    setDirty,
+    reservedGroups,
+    extraIcon,
+    getUser,
+    getData,
+    doCollectionInference,
+    propertyConfigs,
+    collectionEditable
+}: CollectionEditorFormProps) {
 
     const {
         values,
@@ -77,6 +80,7 @@ export function CollectionPropertiesEditorForm({
 
     const largeLayout = useLargeLayout();
     const asDialog = !largeLayout
+    const { t } = useTranslation();
 
     // index of the selected property within the namespace
     const [selectedPropertyIndex, setSelectedPropertyIndex] = useState<number | undefined>();
@@ -108,7 +112,7 @@ export function CollectionPropertiesEditorForm({
 
             setInferringProperties(true);
 
-            console.debug("CollectionEditor: inferring properties from data", doCollectionInference, values);
+            console.debug("CollectionEditor: inferring properties from data", values);
             // @ts-ignore
             doCollectionInference(values)
                 .then((newCollection) => {
@@ -123,35 +127,130 @@ export function CollectionPropertiesEditorForm({
                         });
                         return;
                     }
-                    // find properties in the new collection, not present in the current one
-                    const newPropertyKeys = (newCollection.properties ? Object.keys(newCollection.properties) : [])
+
+                    // 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" &&
+                                "dataType" in newProp &&
+                                newProp.dataType === "map" &&
+                                newProp.properties
+                            ) {
+                                // This is a map property, check for new nested properties
+                                const existingMapProps = typeof existingProp === "object" &&
+                                    "dataType" in existingProp &&
+                                    existingProp.dataType === "map"
+                                    ? (existingProp as any).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" &&
+                                "dataType" in existingProp &&
+                                existingProp.dataType === "map" &&
+                                typeof newProp === "object" &&
+                                "dataType" 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]);
-                    if (newPropertyKeys.length === 0) {
+
+                    // 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;
                     }
-                    // add them to the current collection
-                    const updatedProperties = {
-                        ...newPropertyKeys.reduce((acc, propertyKey) => {
-                            acc[propertyKey] = (newCollection.properties ?? {})[propertyKey];
-                            return acc;
-                        }, {} as {
-                            [key: string]: PropertyOrBuilder
-                        }),
-                        ...values.properties
-                    };
+
+                    // 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 = [
-                        ...newPropertyKeys,
-                        ...(values.propertiesOrder ?? [])
+                        ...newTopLevelPropertyKeys,
+                        ...allExistingKeys.filter(key => !newTopLevelPropertyKeys.includes(key))
                     ];
-                    setFieldValue("properties", updatedProperties, false);
 
+                    setFieldValue("properties", updatedProperties, false);
                     updatePropertiesOrder(updatedPropertiesOrder);
+                    setInferredPropertyKeys(allNewPropertyKeys);
 
-                    setInferredPropertyKeys(newPropertyKeys);
+                    snackbarController.open({
+                        type: "success",
+                        message: `Added ${allNewPropertyKeys.length} new ${allNewPropertyKeys.length === 1 ? "property" : "properties"}`
+                    });
                 })
                 .finally(() => {
                     setInferringProperties(false);
@@ -197,9 +296,9 @@ export function CollectionPropertiesEditorForm({
     };
 
     const onPropertyCreated = ({
-                                   id,
-                                   property
-                               }: {
+        id,
+        property
+    }: {
         id?: string,
         property: Property
     }) => {
@@ -223,11 +322,11 @@ export function CollectionPropertiesEditorForm({
     };
 
     const onPropertyChanged = ({
-                                   id,
-                                   property,
-                                   previousId,
-                                   namespace
-                               }: OnPropertyChangedParams) => {
+        id,
+        property,
+        previousId,
+        namespace
+    }: OnPropertyChangedParams) => {
 
         const fullId = id ? getFullId(id, namespace) : undefined;
         const propertyPath = fullId ? idToPropertiesPath(fullId) : undefined;
@@ -292,6 +391,10 @@ export function CollectionPropertiesEditorForm({
 
     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,
@@ -303,7 +406,7 @@ export function CollectionPropertiesEditorForm({
     };
 
     const body = (
-        <div className={"grid grid-cols-12 gap-2 h-full bg-white dark:bg-surface-950"}>
+        <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 pb-20 md:pb-20",
@@ -324,13 +427,13 @@ export function CollectionPropertiesEditorForm({
                             placeholder={"Collection name"}
                             size={"small"}
                             required
-                            error={Boolean(errors?.name)}/>
+                            error={Boolean(errors?.name)} />
 
                         {owner &&
                             <Typography variant={"body2"}
-                                        className={"ml-2"}
-                                        color={"secondary"}>
-                                Created by {owner.displayName}
+                                className={"ml-2"}
+                                color={"secondary"}>
+                                {t("created_by", { name: owner.displayName ?? "" })}
                             </Typography>}
                     </div>
 
@@ -339,31 +442,29 @@ export function CollectionPropertiesEditorForm({
                     </div>}
 
                     <div className="ml-1 mt-2 flex flex-row gap-2">
-                        <Tooltip title={"Get the code for this collection"}
-                                 asChild={true}>
+                        <Tooltip title={t("get_code_for_collection")}
+                            asChild={true}>
                             <IconButton
                                 variant={"filled"}
                                 disabled={inferringProperties}
                                 onClick={() => setCodeDialogOpen(true)}>
-                                <CodeIcon/>
+                                <CodeIcon />
                             </IconButton>
                         </Tooltip>
-                        {inferPropertiesFromData && <Tooltip title={"Add new properties based on data"}
-                                                             asChild={true}>
+                        {inferPropertiesFromData && <Tooltip title={t("add_properties_from_data")}
+                            asChild={true}>
                             <IconButton
                                 variant={"filled"}
                                 disabled={inferringProperties}
                                 onClick={inferPropertiesFromData}>
-                                {inferringProperties ? <CircularProgress size={"small"}/> : <AutorenewIcon/>}
+                                {inferringProperties ? <CircularProgress size={"small"} /> : <FindInPageIcon />}
                             </IconButton>
                         </Tooltip>}
-                        <Tooltip title={"Add new property"}
-                                 asChild={true}>
+                        <Tooltip title={t("add_new_property")}
+                            asChild={true}>
                             <Button
-                                variant={"outlined"}
-                                color={"primary"}
                                 onClick={() => setNewPropertyDialogOpen(true)}>
-                                <AddIcon/>
+                                <AddIcon />
                             </Button>
                         </Tooltip>
                     </div>
@@ -379,18 +480,16 @@ export function CollectionPropertiesEditorForm({
                         propertiesOrder={usedPropertiesOrder}
                         onPropertyClick={onPropertyClick}
                         onPropertyMove={onPropertyMove}
-                        onPropertyRemove={isNewCollection ? deleteProperty : undefined}
+                        onPropertyRemove={(isNewCollection || (inferredPropertyKeys && inferredPropertyKeys.length > 0)) ? deleteProperty : undefined}
                         collectionEditable={collectionEditable}
-                        errors={errors}/>
+                        errors={errors} />
                 </ErrorBoundary>
 
                 <Button className={"mt-8 w-full"}
-                        color="primary"
-                        variant={"outlined"}
-                        size={"large"}
-                        onClick={() => setNewPropertyDialogOpen(true)}
-                        startIcon={<AddIcon/>}>
-                    Add new property
+                    size={"large"}
+                    onClick={() => setNewPropertyDialogOpen(true)}
+                    startIcon={<AddIcon />}>
+                    {t("add_new_property")}
                 </Button>
             </div>
 
@@ -404,7 +503,7 @@ export function CollectionPropertiesEditorForm({
                             !isPropertyBuilder(selectedProperty) &&
                             <PropertyForm
                                 inArray={false}
-                                key={`edit_view_${selectedPropertyIndex}`}
+                                key={`edit_view_${selectedPropertyIndex}_${generationCounter}`}
                                 existingProperty={!isNewCollection}
                                 autoUpdateId={false}
                                 allowDataInference={!isNewCollection}
@@ -420,27 +519,27 @@ export function CollectionPropertiesEditorForm({
                                 getData={getData}
                                 propertyConfigs={propertyConfigs}
                                 collectionEditable={collectionEditable}
+                                collectionProperties={values.properties as Properties}
                             />}
 
                         {!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"}
+                                        ? t("add_first_property")
+                                        : t("select_property_to_edit")}
                                 </Typography>
-                                <Button variant={"outlined"}
-                                        color={"primary"}
-                                        onClick={() => setNewPropertyDialogOpen(true)}
+                                <Button
+                                    onClick={() => setNewPropertyDialogOpen(true)}
                                 >
-                                    <AddIcon/>
-                                    Add new property
+                                    <AddIcon />
+                                    {t("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"}
+                                {t("property_defined_as_builder")}
                             </Typography>}
                     </div>
                 </div>}
@@ -448,7 +547,7 @@ export function CollectionPropertiesEditorForm({
             {asDialog && <PropertyFormDialog
                 inArray={false}
                 open={selectedPropertyIndex !== undefined}
-                key={`edit_view_${selectedPropertyIndex}`}
+                key={`edit_view_${selectedPropertyIndex}_${generationCounter}`}
                 autoUpdateId={!selectedProperty}
                 allowDataInference={!isNewCollection}
                 existingProperty={true}
@@ -464,40 +563,42 @@ export function CollectionPropertiesEditorForm({
                 getData={getData}
                 propertyConfigs={propertyConfigs}
                 collectionEditable={collectionEditable}
+                collectionProperties={values.properties as Properties}
                 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}
-                collectionEditable={collectionEditable}
-                existingPropertyKeys={values.propertiesOrder as string[]}/>
-
-            <ErrorBoundary>
-                <GetCodeDialog
-                    collection={values}
-                    open={codeDialogOpen}
-                    onOpenChange={setCodeDialogOpen}/>
-            </ErrorBoundary>
-        </>
+        {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}
+            collectionEditable={collectionEditable}
+            collectionProperties={values.properties as Properties}
+            existingPropertyKeys={values.propertiesOrder as string[]} />
+
+        <ErrorBoundary>
+            <GetCodeDialog
+                collection={values}
+                open={codeDialogOpen}
+                onOpenChange={setCodeDialogOpen} />
+        </ErrorBoundary>
+    </>
     );
 }