@firecms/collection_editor 3.0.1 → 3.1.0-canary.24c8270

package/src/ui/collection_editor/PropertyTree.tsx

@@ -3,12 +3,24 @@ import equal from "react-fast-compare"
 
 import {
     AdditionalFieldDelegate,
+    AIModifiedIndicator,
     CMSType,
     isPropertyBuilder,
     PropertiesOrBuilders,
     PropertyOrBuilder
 } from "@firecms/core";
-import { AutorenewIcon, defaultBorderMixin, DragHandleIcon, IconButton, RemoveIcon, Tooltip } from "@firecms/ui";
+import {
+    FindInPageIcon,
+    defaultBorderMixin,
+    DeleteIcon,
+    IconButton,
+    Menu,
+    MenuItem,
+    MoreVertIcon,
+    Tooltip,
+    VerticalAlignBottomIcon,
+    VerticalAlignTopIcon
+} from "@firecms/ui";
 import { NonEditablePropertyPreview, PropertyFieldPreview } from "./PropertyFieldPreview";
 import {
     closestCenter,
@@ -30,24 +42,25 @@ import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
 import { CSS } from "@dnd-kit/utilities";
 import { getFullId, getFullIdPath } from "./util";
 import { editableProperty } from "../../utils/entities";
+import { useAIModifiedPaths } from "./AIModifiedPathsContext";
 
 export const PropertyTree = React.memo(
     function PropertyTree<M extends {
         [Key: string]: CMSType
     }>({
-           namespace,
-           selectedPropertyKey,
-           onPropertyClick,
-           properties,
-           propertiesOrder: propertiesOrderProp,
-           additionalFields,
-           errors,
-           onPropertyMove,
-           onPropertyRemove,
-           className,
-           inferredPropertyKeys,
-           collectionEditable
-       }: {
+        namespace,
+        selectedPropertyKey,
+        onPropertyClick,
+        properties,
+        propertiesOrder: propertiesOrderProp,
+        additionalFields,
+        errors,
+        onPropertyMove,
+        onPropertyRemove,
+        className,
+        inferredPropertyKeys,
+        collectionEditable
+    }: {
         namespace?: string;
         selectedPropertyKey?: string;
         onPropertyClick?: (propertyKey: string, namespace?: string) => void;
@@ -62,7 +75,15 @@ export const PropertyTree = React.memo(
         collectionEditable: boolean;
     }) {
 
-        const propertiesOrder = propertiesOrderProp ?? Object.keys(properties);
+        // Filter propertiesOrder to only include top-level keys (no dots) that exist in properties
+        // Nested keys like "data.mode" are for column ordering in the table, not for the property editor
+        const propertyKeys = Object.keys(properties);
+        const filteredOrder = (propertiesOrderProp ?? propertyKeys)
+            .filter(key => !key.includes(".") && properties[key as keyof typeof properties]);
+
+        // Ensure all properties are included (append any missing ones)
+        const missingKeys = propertyKeys.filter(key => !filteredOrder.includes(key));
+        const propertiesOrder = [...filteredOrder, ...missingKeys];
 
         const sensors = useSensors(
             useSensor(PointerSensor, {
@@ -144,6 +165,7 @@ export const PropertyTree = React.memo(
                                         additionalField={additionalField}
                                         errors={errors}
                                         namespace={namespace}
+                                        propertiesOrder={propertiesOrder}
                                         inferredPropertyKeys={inferredPropertyKeys}
                                         onPropertyMove={onPropertyMove}
                                         onPropertyRemove={onPropertyRemove}
@@ -162,19 +184,20 @@ export const PropertyTree = React.memo(
 );
 
 export function PropertyTreeEntry({
-                                      id,
-                                      propertyKey,
-                                      namespace,
-                                      propertyOrBuilder,
-                                      additionalField,
-                                      selectedPropertyKey,
-                                      errors,
-                                      onPropertyClick,
-                                      onPropertyMove,
-                                      onPropertyRemove,
-                                      inferredPropertyKeys,
-                                      collectionEditable
-                                  }: {
+    id,
+    propertyKey,
+    namespace,
+    propertyOrBuilder,
+    additionalField,
+    selectedPropertyKey,
+    errors,
+    propertiesOrder,
+    onPropertyClick,
+    onPropertyMove,
+    onPropertyRemove,
+    inferredPropertyKeys,
+    collectionEditable
+}: {
     id: string;
     propertyKey: string;
     namespace?: string;
@@ -182,6 +205,7 @@ export function PropertyTreeEntry({
     additionalField?: AdditionalFieldDelegate<any>;
     selectedPropertyKey?: string;
     errors: Record<string, any>;
+    propertiesOrder: string[];
     onPropertyClick?: (propertyKey: string, namespace?: string) => void;
     onPropertyMove?: (propertiesOrder: string[], namespace?: string) => void;
     onPropertyRemove?: (propertyKey: string, namespace?: string) => void;
@@ -226,6 +250,7 @@ export function PropertyTreeEntry({
                 onPropertyClick={onPropertyClick}
                 onPropertyMove={onPropertyMove}
                 onPropertyRemove={onPropertyRemove}
+                inferredPropertyKeys={inferredPropertyKeys}
                 collectionEditable={collectionEditable}
             />
         }
@@ -234,11 +259,17 @@ export function PropertyTreeEntry({
     const selected = selectedPropertyKey === fullId;
     const editable = propertyOrBuilder && ((collectionEditable && !isPropertyBuilder(propertyOrBuilder)) || editableProperty(propertyOrBuilder));
 
+    // Check if this property was AI-modified
+    const aiModifiedPaths = useAIModifiedPaths();
+    const isAIModified = aiModifiedPaths?.isPathModified(`properties.${propertyKey}`) ?? false;
+
     return (
         <div
             ref={setNodeRef}
             style={style}
-            className="relative -ml-8"
+            className="relative -ml-8 cursor-grab"
+            {...attributes}
+            {...listeners}
         >
             <div className="relative">
                 {subtree && <div
@@ -247,7 +278,7 @@ export function PropertyTreeEntry({
                         left: "32px",
                         top: "64px",
                         bottom: "16px"
-                    }}/>}
+                    }} />}
 
                 <div>
                     {!isPropertyBuilder(propertyOrBuilder) && !additionalField && editable
@@ -256,38 +287,79 @@ export function PropertyTreeEntry({
                             onClick={onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : undefined}
                             includeName={true}
                             selected={selected}
-                            hasError={hasError}/>
+                            hasError={hasError} />
                         : <NonEditablePropertyPreview name={propertyKey}
-                                                      property={propertyOrBuilder}
-                                                      onClick={onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : undefined}
-                                                      selected={selected}/>}
+                            property={propertyOrBuilder}
+                            onClick={onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : undefined}
+                            selected={selected} />}
                 </div>
 
-                <div className="absolute top-2 right-2 flex flex-row">
-                    {isPropertyInferred && <Tooltip title={"Inferred property"}>
-                        <AutorenewIcon size="small" className={"p-2"}/>
-                    </Tooltip>}
-
-                    {onPropertyRemove && !isPropertyInferred && <Tooltip title={"Remove"}
-                                                                         asChild={true}>
-                        <IconButton size="small"
-                                    color="inherit"
-                                    onClick={() => onPropertyRemove(propertyKey, namespace)}>
-                            <RemoveIcon size={"small"}/>
-                        </IconButton>
-                    </Tooltip>}
-
-                    {onPropertyMove && <Tooltip title={"Move"}
-                                                asChild={true}>
-                        <IconButton
-                            component={"span"}
-                            size="small"
-                            {...attributes}
-                            {...listeners}
+                <div className="absolute top-3 right-3 flex flex-row items-center gap-1">
+                    {isAIModified && <AIModifiedIndicator />}
+                    {isPropertyInferred && <>
+                        <Tooltip title={"Inferred property"} asChild={true}>
+                            <IconButton size="smallest" disabled>
+                                <FindInPageIcon size="smallest" />
+                            </IconButton>
+                        </Tooltip>
+                        {onPropertyRemove && <Tooltip title={"Remove inferred property"}
+                            asChild={true}>
+                            <IconButton size="smallest"
+                                color="inherit"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    onPropertyRemove(propertyKey, namespace);
+                                }}>
+                                <DeleteIcon size={"smallest"} />
+                            </IconButton>
+                        </Tooltip>}
+                    </>}
+
+                    <Menu
+                        trigger={
+                            <IconButton
+                                size="smallest"
+                            >
+                                <MoreVertIcon size={"smallest"} />
+                            </IconButton>
+                        }
+                    >
+                        <MenuItem
+                            dense
+                            onClick={() => {
+                                const currentIndex = propertiesOrder.indexOf(propertyKey);
+                                if (currentIndex > 0) {
+                                    const newOrder = propertiesOrder.filter(k => k !== propertyKey);
+                                    newOrder.unshift(propertyKey);
+                                    onPropertyMove?.(newOrder, namespace);
+                                }
+                            }}
+                        >
+                            <VerticalAlignTopIcon size="smallest" />
+                            Move to top
+                        </MenuItem>
+                        <MenuItem
+                            dense
+                            onClick={() => {
+                                const currentIndex = propertiesOrder.indexOf(propertyKey);
+                                if (currentIndex < propertiesOrder.length - 1) {
+                                    const newOrder = propertiesOrder.filter(k => k !== propertyKey);
+                                    newOrder.push(propertyKey);
+                                    onPropertyMove?.(newOrder, namespace);
+                                }
+                            }}
+                        >
+                            <VerticalAlignBottomIcon size="smallest" />
+                            Move to bottom
+                        </MenuItem>
+                        <MenuItem
+                            dense
+                            onClick={() => onPropertyRemove?.(propertyKey, namespace)}
                         >
-                            <DragHandleIcon size={"small"}/>
-                        </IconButton>
-                    </Tooltip>}
+                            <DeleteIcon size="smallest" />
+                            Delete
+                        </MenuItem>
+                    </Menu>
 
                 </div>