@firecms/collection_editor 3.0.0-canary.28 → 3.0.0-canary.280

package/src/ui/collection_editor/PropertyTree.tsx

@@ -1,17 +1,33 @@
-import React, { useCallback } from "react";
+import React from "react";
 import equal from "react-fast-compare"
 
 import {
     AdditionalFieldDelegate,
     CMSType,
-    ErrorBoundary,
     isPropertyBuilder,
     PropertiesOrBuilders,
     PropertyOrBuilder
 } from "@firecms/core";
-import { AutoAwesomeIcon, defaultBorderMixin, DragHandleIcon, IconButton, RemoveIcon, Tooltip } from "@firecms/ui";
+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 = useCallback((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);
-        }, [namespace, onPropertyMove, propertiesOrder])
+            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,63 +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"}>
-                    <AutoAwesomeIcon size="small" className={"p-2"}/>
-                </Tooltip>}
-
-                {onPropertyRemove && <Tooltip title={"Remove"}>
-                    <IconButton size="small"
-                                color="inherit"
-                                onClick={() => onPropertyRemove(propertyKey, namespace)}>
-                        <RemoveIcon size={"small"}/>
-                    </IconButton>
-                </Tooltip>}
-
-                {onPropertyMove && <Tooltip title={"Move"}>
-                    <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/SubcollectionsEditTab.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import {
-    DeleteConfirmationDialog,
+    ConfirmationDialog,
     EntityCollection,
     EntityCustomView,
     resolveEntityView,
@@ -41,7 +41,7 @@ export function SubcollectionsEditTab({
     parentCollection?: EntityCollection,
     configController: CollectionsConfigController;
     collectionInference?: CollectionInference;
-    getUser: (uid: string) => User | null;
+    getUser?: (uid: string) => User | null;
     parentCollectionIds?: string[];
 }) {
 
@@ -61,7 +61,7 @@ export function SubcollectionsEditTab({
         setFieldValue,
     } = useFormex<EntityCollection>();
 
-    const subcollections = collection.subcollections ?? [];
+    const [subcollections, setSubcollections] = React.useState<EntityCollection[]>(collection.subcollections ?? []);
     const resolvedEntityViews = values.entityViews?.filter(e => typeof e === "string")
         .map(e => resolveEntityView(e, contextEntityViews))
         .filter(Boolean) as EntityCustomView[] ?? [];
@@ -95,7 +95,8 @@ export function SubcollectionsEditTab({
                                             </TableCell>
                                             <TableCell
                                                 align="right">
-                                                <Tooltip title={"Remove"}>
+                                                <Tooltip title={"Remove"}
+                                                         asChild={true}>
                                                     <IconButton size="small"
                                                                 onClick={(e) => {
                                                                     e.preventDefault();
@@ -135,7 +136,7 @@ export function SubcollectionsEditTab({
                         {totalEntityViews === 0 &&
                             <Alert action={<Button variant="text"
                                                    size={"small"}
-                                                   href={"https://firecms.co/docs/customization_quickstart"}
+                                                   href={"https://firecms.co/docs/cloud/quickstart"}
                                                    component={"a"}
                                                    rel="noopener noreferrer"
                                                    target="_blank">More info</Button>}>
@@ -157,7 +158,8 @@ export function SubcollectionsEditTab({
                                                 </TableCell>
                                                 <TableCell
                                                     align="right">
-                                                    <Tooltip title={"Remove"}>
+                                                    <Tooltip title={"Remove"}
+                                                             asChild={true}>
                                                         <IconButton size="small"
                                                                     onClick={(e) => {
                                                                         e.preventDefault();
@@ -209,30 +211,32 @@ export function SubcollectionsEditTab({
             <div style={{ height: "52px" }}/>
 
             {subcollectionToDelete &&
-                <DeleteConfirmationDialog open={Boolean(subcollectionToDelete)}
-                                          onAccept={() => {
+                <ConfirmationDialog open={Boolean(subcollectionToDelete)}
+                                    onAccept={() => {
                                               const props = {
                                                   id: subcollectionToDelete,
                                                   parentCollectionIds: [...(parentCollectionIds ?? []), collection.id]
                                               };
                                               console.debug("Deleting subcollection", props)
-                                              configController.deleteCollection(props);
-                                              setSubcollectionToDelete(undefined);
+                                              configController.deleteCollection(props).then(() => {
+                                                  setSubcollectionToDelete(undefined);
+                                                  setSubcollections(subcollections?.filter(e => e.id !== subcollectionToDelete))
+                                              });
                                           }}
-                                          onCancel={() => setSubcollectionToDelete(undefined)}
-                                          title={<>Delete this subcollection?</>}
-                                          body={<> This will <b>not
+                                    onCancel={() => setSubcollectionToDelete(undefined)}
+                                    title={<>Delete this subcollection?</>}
+                                    body={<> This will <b>not
                                               delete any data</b>, only
                                               the collection in the CMS</>}/>}
             {viewToDelete &&
-                <DeleteConfirmationDialog open={Boolean(viewToDelete)}
-                                          onAccept={() => {
+                <ConfirmationDialog open={Boolean(viewToDelete)}
+                                    onAccept={() => {
                                               setFieldValue("entityViews", values.entityViews?.filter(e => e !== viewToDelete));
                                               setViewToDelete(undefined);
                                           }}
-                                          onCancel={() => setViewToDelete(undefined)}
-                                          title={<>Remove this view?</>}
-                                          body={<>This will <b>not
+                                    onCancel={() => setViewToDelete(undefined)}
+                                    title={<>Remove this view?</>}
+                                    body={<>This will <b>not
                                               delete any data</b>, only
                                               the view in the CMS</>}/>}
 
@@ -245,7 +249,10 @@ export function SubcollectionsEditTab({
                 isNewCollection={false}
                 {...currentDialog}
                 getUser={getUser}
-                handleClose={() => {
+                handleClose={(updatedCollection) => {
+                    if (updatedCollection && !subcollections.map(e => e.id).includes(updatedCollection.id)) {
+                        setSubcollections([...subcollections, updatedCollection]);
+                    }
                     setCurrentDialog(undefined);
                 }}/>
 

package/src/ui/collection_editor/UnsavedChangesDialog.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
 
 export interface UnsavedChangesDialogProps {
     open: boolean;
@@ -24,11 +24,9 @@ export function UnsavedChangesDialog({
             aria-labelledby="alert-dialog-title"
             aria-describedby="alert-dialog-description"
         >
-            <DialogContent>
-                <Typography variant={"h6"}>
-                    {title ?? "Unsaved changes"}
-                </Typography>
 
+            <DialogTitle>{title ?? "Unsaved changes"}</DialogTitle>
+            <DialogContent>
                 {body && <Typography>
                     {body}
                 </Typography>}
@@ -39,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/import/CollectionEditorImportDataPreview.tsx

@@ -1,21 +1,48 @@
-import { convertDataToEntity, getPropertiesMapping, ImportConfig } from "@firecms/data_import_export";
-import { EntityCollectionTable, Properties, useSelectionController } from "@firecms/core";
-import { useEffect } from "react";
+import { convertDataToEntity, ImportConfig } from "@firecms/data_import";
+import {
+    CircularProgressCenter,
+    EntityCollectionTable,
+    Properties,
+    useAuthController,
+    useNavigationController,
+    useSelectionController
+} from "@firecms/core";
+import { useEffect, useState } from "react";
 import { Typography } from "@firecms/ui";
 
-export function CollectionEditorImportDataPreview({ importConfig, properties, propertiesOrder }: {
+export function CollectionEditorImportDataPreview({
+                                                      importConfig,
+                                                      properties,
+                                                      propertiesOrder
+                                                  }: {
     importConfig: ImportConfig,
     properties: Properties,
     propertiesOrder: string[]
 }) {
 
-    useEffect(() => {
-        const propertiesMapping = getPropertiesMapping(importConfig.originProperties, properties);
-        const mappedData = importConfig.importData.map(d => convertDataToEntity(d, importConfig.idColumn, importConfig.headersMapping, properties, propertiesMapping, "TEMP_PATH"));
+    const authController = useAuthController();
+    const navigation = useNavigationController();
+    const [loading, setLoading] = useState<boolean>(false);
+
+    async function loadEntities() {
+        const mappedData = importConfig.importData.map(d => convertDataToEntity(authController,
+            navigation,
+            d,
+            importConfig.idColumn,
+            importConfig.headersMapping,
+            properties,
+            "TEMP_PATH",
+            importConfig.defaultValues));
         importConfig.setEntities(mappedData);
+    }
+
+    useEffect(() => {
+        loadEntities().finally(() => setLoading(false));
     }, []);
 
     const selectionController = useSelectionController();
+    if (loading)
+        return <CircularProgressCenter/>
 
     return <EntityCollectionTable
         title={<div>
@@ -31,7 +58,12 @@ export function CollectionEditorImportDataPreview({ importConfig, properties, pr
         filterable={false}
         sortable={false}
         selectionController={selectionController}
-        displayedColumnIds={propertiesOrder.map(p => ({ key: p, disabled: false }))}
-        properties={properties}/>
+        displayedColumnIds={propertiesOrder.map(p => ({
+            key: p,
+            disabled: false
+        }))}
+        openEntityMode={"side_panel"}
+        properties={properties}
+        enablePopupIcon={false}/>
 
 }