@firecms/collection_editor 3.0.0-beta.13 → 3.0.0-beta.15

package/src/ui/collection_editor/PropertyTree.tsx

@@ -4,14 +4,30 @@ import equal from "react-fast-compare"
 import {
     AdditionalFieldDelegate,
     CMSType,
-    ErrorBoundary,
     isPropertyBuilder,
     PropertiesOrBuilders,
     PropertyOrBuilder
 } from "@firecms/core";
 import { AutorenewIcon, defaultBorderMixin, DragHandleIcon, IconButton, RemoveIcon, Tooltip } from "@firecms/ui";
 import { NonEditablePropertyPreview, PropertyFieldPreview } from "./PropertyFieldPreview";
-import { DragDropContext, Draggable, DraggableProvided, Droppable } from "@hello-pangea/dnd";
+import {
+    closestCenter,
+    DndContext,
+    DragEndEvent,
+    KeyboardSensor,
+    PointerSensor,
+    useSensor,
+    useSensors
+} from "@dnd-kit/core";
+import {
+    SortableContext,
+    sortableKeyboardCoordinates,
+    useSortable,
+    verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+
+import { CSS } from "@dnd-kit/utilities";
 import { getFullId, getFullIdPath } from "./util";
 import { editableProperty } from "../../utils/entities";
 
@@ -48,103 +64,109 @@ export const PropertyTree = React.memo(
 
         const propertiesOrder = propertiesOrderProp ?? Object.keys(properties);
 
-        const onDragEnd = (result: any) => {
-            // dropped outside the list
-            if (!result.destination) {
+        const sensors = useSensors(
+            useSensor(PointerSensor, {
+                activationConstraint: {
+                    distance: 5,
+                }
+            }),
+            useSensor(KeyboardSensor, {
+                coordinateGetter: sortableKeyboardCoordinates,
+            })
+        );
+
+        const handleDragEnd = (event: DragEndEvent) => {
+            const {
+                active,
+                over
+            } = event;
+
+            if (!over || active.id === over.id) {
                 return;
             }
-            const startIndex = result.source.index;
-            const endIndex = result.destination.index;
-
-            const newPropertiesOrder = Array.from(propertiesOrder);
-            const [removed] = newPropertiesOrder.splice(startIndex, 1);
-            newPropertiesOrder.splice(endIndex, 0, removed);
-            if (onPropertyMove)
-                onPropertyMove(newPropertiesOrder, namespace);
-        }
+
+            const activeId = String(active.id);
+            const overId = String(over.id);
+
+            // Extract property keys from the full IDs
+            const activeKey = activeId.includes(".") ? activeId.split(".").pop() : activeId;
+            const overKey = overId.includes(".") ? overId.split(".").pop() : overId;
+
+            if (!activeKey || !overKey) return;
+
+            const oldIndex = propertiesOrder.indexOf(activeKey);
+            const newIndex = propertiesOrder.indexOf(overKey);
+
+            if (oldIndex !== -1 && newIndex !== -1) {
+                const newPropertiesOrder = [...propertiesOrder];
+                const [removed] = newPropertiesOrder.splice(oldIndex, 1);
+                newPropertiesOrder.splice(newIndex, 0, removed);
+
+                if (onPropertyMove) {
+                    onPropertyMove(newPropertiesOrder, namespace);
+                }
+            }
+        };
+
+        const items = propertiesOrder.map(key => getFullId(key, namespace));
 
         return (
-            <>
-
-                <DragDropContext onDragEnd={onDragEnd}>
-                    <Droppable droppableId={`droppable_${namespace}`}>
-                        {(droppableProvided, droppableSnapshot) => (
-                            <div
-                                {...droppableProvided.droppableProps}
-                                ref={droppableProvided.innerRef}
-                                className={className}>
-                                {propertiesOrder && propertiesOrder
-                                    .map((propertyKey: string, index: number) => {
-                                        const property = properties[propertyKey] as PropertyOrBuilder;
-                                        const additionalField = additionalFields?.find(field => field.key === propertyKey);
-
-                                        if (!property && !additionalField) {
-                                            console.warn(`Property ${propertyKey} not found in properties or additionalFields`);
-                                            return null;
-                                        }
-                                        return (
-                                            <Draggable
-                                                key={`array_field_${namespace}_${propertyKey}}`}
-                                                draggableId={`array_field_${namespace}_${propertyKey}}`}
-                                                index={index}>
-                                                {(provided, snapshot) => {
-                                                    return (
-                                                        <ErrorBoundary>
-                                                            <PropertyTreeEntry
-                                                                propertyKey={propertyKey as string}
-                                                                propertyOrBuilder={property}
-                                                                additionalField={additionalField}
-                                                                provided={provided}
-                                                                errors={errors}
-                                                                namespace={namespace}
-                                                                inferredPropertyKeys={inferredPropertyKeys}
-                                                                onPropertyMove={onPropertyMove}
-                                                                onPropertyRemove={onPropertyRemove}
-                                                                onPropertyClick={snapshot.isDragging ? undefined : onPropertyClick}
-                                                                selectedPropertyKey={selectedPropertyKey}
-                                                                collectionEditable={collectionEditable}
-                                                            />
-                                                        </ErrorBoundary>
-                                                    );
-                                                }}
-                                            </Draggable>);
-                                    }).filter(Boolean)}
-
-                                {droppableProvided.placeholder}
-
-                            </div>
-                        )}
-                    </Droppable>
-                </DragDropContext>
-
-            </>
+            <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragEnd={handleDragEnd}
+                modifiers={[restrictToVerticalAxis]}
+            >
+                <SortableContext
+                    items={items}
+                    strategy={verticalListSortingStrategy}
+                >
+                    <div className={className}>
+
+                        {propertiesOrder && propertiesOrder
+                            .map((propertyKey: string, index: number) => {
+                                const property = properties[propertyKey] as PropertyOrBuilder;
+                                const additionalField = additionalFields?.find(field => field.key === propertyKey);
+
+                                if (!property && !additionalField) {
+                                    console.warn(`Property ${propertyKey} not found in properties or additionalFields`);
+                                    return null;
+                                }
+
+                                const id = getFullId(propertyKey, namespace);
+
+                                return (
+                                    <PropertyTreeEntry
+                                        key={id}
+                                        id={id}
+                                        propertyKey={propertyKey}
+                                        propertyOrBuilder={property}
+                                        additionalField={additionalField}
+                                        errors={errors}
+                                        namespace={namespace}
+                                        inferredPropertyKeys={inferredPropertyKeys}
+                                        onPropertyMove={onPropertyMove}
+                                        onPropertyRemove={onPropertyRemove}
+                                        onPropertyClick={onPropertyClick}
+                                        selectedPropertyKey={selectedPropertyKey}
+                                        collectionEditable={collectionEditable}
+                                    />
+                                );
+                            }).filter(Boolean)}
+                    </div>
+                </SortableContext>
+            </DndContext>
         );
     },
-    (prevProps, nextProps) => {
-
-        const isSelected = nextProps.selectedPropertyKey?.startsWith(nextProps.namespace ?? "");
-        const wasSelected = prevProps.selectedPropertyKey?.startsWith(prevProps.namespace ?? "");
-        if (isSelected || wasSelected)
-            return false;
-
-        return equal(prevProps.properties, nextProps.properties) &&
-            prevProps.propertiesOrder === nextProps.propertiesOrder &&
-            equal(prevProps.additionalFields, nextProps.additionalFields) &&
-            equal(prevProps.errors, nextProps.errors) &&
-            equal(prevProps.onPropertyClick, nextProps.onPropertyClick) &&
-            // equal(prevProps.onPropertyMove, nextProps.onPropertyMove) &&
-            // equal(prevProps.onPropertyRemove, nextProps.onPropertyRemove) &&
-            prevProps.namespace === nextProps.namespace &&
-            prevProps.collectionEditable === nextProps.collectionEditable;
-    }
+    equal
 );
 
 export function PropertyTreeEntry({
+                                      id,
                                       propertyKey,
                                       namespace,
                                       propertyOrBuilder,
                                       additionalField,
-                                      provided,
                                       selectedPropertyKey,
                                       errors,
                                       onPropertyClick,
@@ -153,12 +175,12 @@ export function PropertyTreeEntry({
                                       inferredPropertyKeys,
                                       collectionEditable
                                   }: {
+    id: string;
     propertyKey: string;
     namespace?: string;
     propertyOrBuilder: PropertyOrBuilder;
     additionalField?: AdditionalFieldDelegate<any>;
     selectedPropertyKey?: string;
-    provided: DraggableProvided;
     errors: Record<string, any>;
     onPropertyClick?: (propertyKey: string, namespace?: string) => void;
     onPropertyMove?: (propertiesOrder: string[], namespace?: string) => void;
@@ -167,8 +189,27 @@ export function PropertyTreeEntry({
     collectionEditable: boolean;
 }) {
 
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+        isDragging
+    } = useSortable({
+        id
+    });
+
+    const style = {
+        // Key change: use Translate instead of Transform to prevent stretching
+        transform: CSS.Translate.toString(transform),
+        transition,
+        zIndex: isDragging ? 10 : undefined,
+        position: "relative" as const,
+    };
+
     const isPropertyInferred = inferredPropertyKeys?.includes(namespace ? `${namespace}.${propertyKey}` : propertyKey);
-    const fullId = getFullId(propertyKey, namespace);
+    const fullId = id;
     const fullIdPath = getFullIdPath(propertyKey, namespace);
     const hasError = fullIdPath in errors;
 
@@ -190,65 +231,68 @@ export function PropertyTreeEntry({
         }
     }
 
-    // const hasError = fullId ? getIn(errors, idToPropertiesPath(fullId)) : false;
     const selected = selectedPropertyKey === fullId;
     const editable = propertyOrBuilder && ((collectionEditable && !isPropertyBuilder(propertyOrBuilder)) || editableProperty(propertyOrBuilder));
 
     return (
         <div
-            ref={provided.innerRef}
-            {...provided.draggableProps}
-            {...provided.dragHandleProps}
+            ref={setNodeRef}
+            style={style}
             className="relative -ml-8"
         >
-            {subtree && <div
-                className={"absolute border-l " + defaultBorderMixin}
-                style={{
-                    left: "32px",
-                    top: "64px",
-                    bottom: "16px"
-                }}/>}
-
-            {!isPropertyBuilder(propertyOrBuilder) && !additionalField && editable
-                ? <PropertyFieldPreview
-                    property={propertyOrBuilder}
-                    onClick={onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : undefined}
-                    includeName={true}
-                    selected={selected}
-                    hasError={hasError}/>
-                : <NonEditablePropertyPreview name={propertyKey}
-                                              property={propertyOrBuilder}
-                                              onClick={onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : undefined}
-                                              selected={selected}/>}
-
-            <div className="absolute top-2 right-2 flex flex-row ">
-
-                {isPropertyInferred && <Tooltip title={"Inferred property"}>
-                    <AutorenewIcon size="small" className={"p-2"}/>
-                </Tooltip>}
-
-                {onPropertyRemove && <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"
-                    >
-                        <DragHandleIcon size={"small"}/>
-                    </IconButton>
-                </Tooltip>}
-            </div>
+            <div className="relative">
+                {subtree && <div
+                    className={"absolute border-l " + defaultBorderMixin}
+                    style={{
+                        left: "32px",
+                        top: "64px",
+                        bottom: "16px"
+                    }}/>}
 
-            {subtree && <div className={"ml-16"}>{subtree}</div>}
+                <div>
+                    {!isPropertyBuilder(propertyOrBuilder) && !additionalField && editable
+                        ? <PropertyFieldPreview
+                            property={propertyOrBuilder}
+                            onClick={onPropertyClick ? () => onPropertyClick(propertyKey, namespace) : undefined}
+                            includeName={true}
+                            selected={selected}
+                            hasError={hasError}/>
+                        : <NonEditablePropertyPreview name={propertyKey}
+                                                      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}
+                        >
+                            <DragHandleIcon size={"small"}/>
+                        </IconButton>
+                    </Tooltip>}
+
+                </div>
+
+                {subtree && <div className={"ml-16"}>{subtree}</div>}
+            </div>
         </div>
     );
-
 }

package/src/ui/collection_editor/UnsavedChangesDialog.tsx

@@ -37,8 +37,12 @@ export function UnsavedChangesDialog({
             </DialogContent>
 
             <DialogActions>
-                <Button variant="text" onClick={handleCancel} autoFocus> Cancel </Button>
-                <Button onClick={handleOk}> Ok </Button>
+                <Button variant="text"
+                        color={"primary"}
+                        onClick={handleCancel} autoFocus> Cancel </Button>
+                <Button
+                    color={"primary"}
+                    onClick={handleOk}> Ok </Button>
             </DialogActions>
         </Dialog>
     );

package/src/ui/collection_editor/properties/MapPropertyField.tsx

@@ -107,7 +107,7 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
             <div className={"col-span-12"}>
                 <BooleanSwitchWithLabel
                     position={"start"}
-                    size={"small"}
+                    size={"medium"}
                     label="Spread children as columns"
                     onValueChange={(v) => setFieldValue("spreadChildren", v)}
                     value={values.spreadChildren ?? false}

package/src/ui/collection_editor/properties/ReferencePropertyField.tsx

@@ -7,12 +7,14 @@ export function ReferencePropertyField({
                                            existing,
                                            multiple,
                                            disabled,
-                                           showErrors
+                                           showErrors,
+                                           asString
                                        }: {
     existing: boolean,
     multiple: boolean,
     disabled: boolean,
-    showErrors: boolean
+    showErrors: boolean,
+    asString?: boolean
 }) {
 
     const {
@@ -28,7 +30,7 @@ export function ReferencePropertyField({
             <CircularProgress/>
         </div>;
 
-    const pathPath = multiple ? "of.path" : "path";
+    const pathPath = asString ? "reference.path" : (multiple ? "of.path" : "path") ;
     const pathValue: string | undefined = getIn(values, pathPath);
     const pathError: string | undefined = showErrors && getIn(errors, pathPath);
 

package/src/ui/collection_editor/properties/advanced/AdvancedPropertyValidation.tsx

@@ -19,6 +19,7 @@ export function AdvancedPropertyValidation({ disabled }: {
                     {({ field, form }: FormexFieldProps) => {
                         return <SwitchControl
                             label={"Hide from collection"}
+                            size={"medium"}
                             disabled={disabled}
                             form={form}
                             tooltip={"Hide this field from the collection view. It will still be visible in the form view"}
@@ -33,6 +34,7 @@ export function AdvancedPropertyValidation({ disabled }: {
                     {({ field, form }: FormexFieldProps) => {
                         return <SwitchControl
                             label={"Read only"}
+                            size={"medium"}
                             disabled={disabled}
                             tooltip={"Is this a read only field. Display only as a preview"}
                             form={form}

package/src/ui/collection_editor/utils/supported_fields.tsx

@@ -14,6 +14,7 @@ export const supportedFieldsIds: PropertyConfigId[] = [
     "file_upload",
     "multi_file_upload",
     "reference",
+    "reference_as_string",
     "multi_references",
     "switch",
     "date_time",

package/src/ui/collection_editor/utils/update_property_for_widget.ts

@@ -208,6 +208,15 @@ export function updatePropertyFromWidget(propertyData: any,
                 editable: propertyData.editable !== undefined ? propertyData.editable : true
             } satisfies Property
         );
+    } else if (selectedWidgetId === "reference_as_string") {
+        updatedProperty = mergeDeep(
+            propertyData,
+            {
+                dataType: "string",
+                propertyConfig: "reference_as_string",
+                editable: propertyData.editable !== undefined ? propertyData.editable : true
+            } satisfies Property
+        );
     } else if (selectedWidgetId === "multi_references") {
         updatedProperty = mergeDeep(
             propertyData,

package/src/useCollectionEditorPlugin.tsx

@@ -14,6 +14,7 @@ import { AddIcon, Button, Paper, Typography } from "@firecms/ui";
 import { useCollectionEditorController } from "./useCollectionEditorController";
 import { EditorCollectionActionStart } from "./ui/EditorCollectionActionStart";
 import { NewCollectionCard } from "./ui/NewCollectionCard";
+import { EditorEntityAction } from "./ui/EditorEntityAction";
 
 export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, USER extends User = User> {
 
@@ -41,8 +42,6 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
         icon: React.ReactNode
     };
 
-    getPathSuggestions?: (path?: string) => Promise<string[]>;
-
     collectionInference?: CollectionInference;
 
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
@@ -51,6 +50,8 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
 
     onAnalyticsEvent?: (event: string, params?: object) => void;
 
+    includeIntroView?: boolean;
+
 }
 
 /**
@@ -70,11 +71,11 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
      configPermissions,
      reservedGroups,
      extraView,
-     getPathSuggestions,
      getUser,
      collectionInference,
      getData,
      onAnalyticsEvent,
+     includeIntroView = true
  }: CollectionConfigControllerProps<EC, USER>): FireCMSPlugin<any, any, PersistedCollection> {
 
     return {
@@ -88,7 +89,6 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
                 collectionInference,
                 reservedGroups,
                 extraView,
-                getPathSuggestions,
                 getUser,
                 getData,
                 onAnalyticsEvent,
@@ -96,21 +96,26 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
         },
         homePage: {
             additionalActions: <NewCollectionButton/>,
-            additionalChildrenStart: <IntroWidget/>,
-            // additionalChildrenEnd: <RootCollectionSuggestions introMode={introMode}/>,
+            additionalChildrenStart: includeIntroView ? <IntroWidget/> : undefined,
             CollectionActions: HomePageEditorCollectionAction,
             AdditionalCards: NewCollectionCard,
+            allowDragAndDrop: true,
+            navigationEntries: collectionConfigController.navigationEntries,
+            onNavigationEntriesUpdate: collectionConfigController.saveNavigationEntries,
         },
         collectionView: {
             CollectionActionsStart: EditorCollectionActionStart,
             CollectionActions: EditorCollectionAction,
             HeaderAction: CollectionViewHeaderAction,
             AddColumnComponent: PropertyAddColumnComponent
+        },
+        form: {
+            ActionsTop: EditorEntityAction,
         }
     };
 }
 
-export function IntroWidget({}: {}) {
+export function IntroWidget() {
 
     const navigation = useNavigationController();
     if (!navigation.topLevelNavigation)

package/src/utils/collections.ts

@@ -1,4 +1,5 @@
 import {
+    EntityCallbacks,
     EntityCollection,
     joinCollectionLists,
     makePropertiesEditable,
@@ -25,11 +26,20 @@ export const mergeCollections = (baseCollections: EntityCollection[],
     const result = joinCollectionLists(baseCollections, backendCollections, [], modifyCollection);
 
     // sort the collections so they are in the same order as the base collections
-    result.sort((a, b) => baseCollections.findIndex(c => c.id === a.id) - baseCollections.findIndex(c => c.id === b.id));
-    console.debug("Collections result", {
-        baseCollections,
-        backendCollections,
-        result
+    result.sort((a, b) => {
+        const indexA = baseCollections.findIndex(c => c.id === a.id);
+        const indexB = baseCollections.findIndex(c => c.id === b.id);
+
+        if (indexA === -1 && indexB === -1) {
+            return 0; // Keep original order for items not in baseCollections
+        }
+        if (indexA === -1) {
+            return 1; // a is not in base, so it goes to the end
+        }
+        if (indexB === -1) {
+            return -1; // b is not in base, so it goes to the end
+        }
+        return indexA - indexB;
     });
 
     return result;