@firecms/core 3.0.0-canary.248 → 3.0.0-canary.249

package/src/components/HomePage/NavigationCard.tsx

@@ -1,4 +1,5 @@
 import { ArrowForwardIcon, Card, cls, Markdown, Typography, } from "@firecms/ui";
+import React from "react"; // Import React
 
 export type NavigationCardProps = {
     name: string,
@@ -6,64 +7,72 @@ export type NavigationCardProps = {
     actions: React.ReactNode;
     icon: React.ReactNode;
     onClick?: () => void,
+    shrink?: boolean
 };
 
-export function NavigationCard({
+// Wrap the component with React.memo
+export const NavigationCard = React.memo(function NavigationCard({
                                    name,
                                    description,
                                    icon,
                                    actions,
                                    onClick,
+                                   shrink
                                }: NavigationCardProps) {
 
-    return (<Card
-        className={cls("h-full p-4 cursor-pointer min-h-[230px]")}
-        onClick={() => {
-            onClick?.();
-        }}>
+    return (
+        <Card
+            className={cls(
+                "h-full p-4 cursor-pointer min-h-[230px] transition-all duration-200 ease-in-out",
+                shrink && "w-full max-w-full min-h-0 scale-75"
+            )}
+            onClick={() => {
+                onClick?.();
+            }}
+        >
+
+            <div className="flex flex-col items-start h-full">
+                <div
+                    className="flex-grow w-full">
 
-        <div className="flex flex-col items-start h-full">
-            <div
-                className="flex-grow w-full">
+                    <div
+                        className="h-10 flex items-center w-full justify-between text-surface-300 dark:text-surface-600">
 
-                <div
-                    className="h-10 flex items-center w-full justify-between text-surface-300 dark:text-surface-600">
+                        {icon}
 
-                    {icon}
+                        <div
+                            className="flex items-center gap-1"
+                            onClick={(event: React.MouseEvent) => {
+                                event.preventDefault();
+                                event.stopPropagation();
+                            }}>
 
-                    <div
-                        className="flex items-center gap-1"
-                        onClick={(event: React.MouseEvent) => {
-                            event.preventDefault();
-                            event.stopPropagation();
-                        }}>
+                            {actions}
 
-                        {actions}
+                        </div>
 
                     </div>
 
-                </div>
-
-                <Typography gutterBottom variant="h5"
-                            component="h2">
-                    {name}
-                </Typography>
+                    <Typography gutterBottom variant="h5"
+                                component="h2">
+                        {name}
+                    </Typography>
 
-                {description && <Typography variant="body2"
-                                            color="secondary"
-                                            component="div">
-                    <Markdown source={description} size={"small"}/>
-                </Typography>}
-            </div>
+                    {description && <Typography variant="body2"
+                                                color="secondary"
+                                                component="div">
+                        <Markdown source={description} size={"small"}/>
+                    </Typography>}
+                </div>
 
-            <div style={{ alignSelf: "flex-end" }}>
+                <div style={{ alignSelf: "flex-end" }}>
 
-                <div className={"p-4"}>
-                    <ArrowForwardIcon className="text-primary"/>
+                    <div className={"p-4"}>
+                        <ArrowForwardIcon className="text-primary"/>
+                    </div>
                 </div>
-            </div>
 
-        </div>
+            </div>
 
-    </Card>)
-}
+        </Card>)
+});

package/src/components/HomePage/NavigationCardBinding.tsx

@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router-dom";
 
 import { useCustomizationController, useFireCMSContext } from "../../hooks";
-import { PluginHomePageActionsProps, TopNavigationEntry } from "../../types";
+import { PluginHomePageActionsProps, NavigationEntry } from "../../types";
 import { IconForView } from "../../util";
 import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
 import { IconButton, StarIcon } from "@firecms/ui";
@@ -30,9 +30,11 @@ export function NavigationCardBinding({
                                           name,
                                           description,
                                           onClick,
-                                          type
-                                      }: TopNavigationEntry & {
-    onClick?: () => void
+                                          type,
+                                          shrink // <-- add shrink prop
+                                      }: NavigationEntry & {
+    onClick?: () => void,
+    shrink?: boolean // <-- add shrink prop type
 }) {
 
     const userConfigurationPersistence = useUserConfigurationPersistence();
@@ -93,7 +95,7 @@ export function NavigationCardBinding({
     if (type === "admin") {
         return <SmallNavigationCard icon={collectionIcon}
                                     name={name}
-                                    url={url}/>
+                                    url={url}/>;
     }
 
     return <NavigationCard
@@ -109,5 +111,7 @@ export function NavigationCardBinding({
                     [path, ...(userConfigurationPersistence.recentlyVisitedPaths ?? []).filter(p => p !== path)]
                 );
             }
-        }}/>;
+        }}
+        shrink={shrink}
+    />;
 }

package/src/components/HomePage/NavigationGroup.tsx

@@ -1,39 +1,73 @@
-import { PropsWithChildren } from "react";
-import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
-import { ExpandablePanel, Typography } from "@firecms/ui";
+import React, { PropsWithChildren, useState } from "react";
+import { cls, EditIcon, IconButton, Typography } from "@firecms/ui";
 
 export function NavigationGroup({
                                     children,
-                                    group
+                                    group,
+                                    minimised,
+                                    isPreview,
+                                    isPotentialCardDropTarget,
+                                    onEditGroup, // New prop to handle editing
+                                    dndDisabled // New prop to disable editing when D&D is off
                                 }: PropsWithChildren<{
-    group: string | undefined
+    group: string | undefined,
+    minimised?: boolean,
+    isPreview?: boolean,
+    isPotentialCardDropTarget?: boolean,
+    onEditGroup?: (groupName: string) => void; // Callback to open dialog
+    dndDisabled?: boolean; // Added dndDisabled prop
 }>) {
-    const userConfigurationPersistence = useUserConfigurationPersistence();
-    return (
-        <ExpandablePanel
-            invisible={true}
-            titleClassName={"font-medium text-sm text-surface-600 dark:text-surface-400"}
-            innerClassName={"py-4"}
-            initiallyExpanded={!(userConfigurationPersistence?.collapsedGroups ?? []).includes(group ?? "ungrouped")}
-            onExpandedChange={expanded => {
-                if (userConfigurationPersistence) {
 
-                    if (!expanded) {
-                        const paths = (userConfigurationPersistence.collapsedGroups ?? []).concat(group ?? "ungrouped");
-                        userConfigurationPersistence.setCollapsedGroups(paths);
-                    } else {
-                        userConfigurationPersistence.setCollapsedGroups((userConfigurationPersistence.collapsedGroups ?? []).filter(g => g !== (group ?? "ungrouped")));
-                    }
-                }
-            }}
-            title={<Typography color={"secondary"}
-                               className="font-medium ml-1">
-                {group?.toUpperCase() ?? "Views".toUpperCase()}
-            </Typography>}>
+    const [isHovered, setIsHovered] = useState(false);
+    const currentGroupName = group ?? "Views";
+
+    return (
+        <div className={cls(
+            !isPotentialCardDropTarget ? "my-10" : "my-6",
+            "transition-all duration-200 ease-in-out"
+        )}
+        >
+            <div className={`flex items-center ${isPreview ? "px-1 py-0.5 m-0" : "ml-3.5 mt-6"} `}
 
-            <div className="mb-8">
-                {children}
+                 onMouseEnter={() => setIsHovered(true)}
+                 onMouseLeave={() => setIsHovered(false)}>
+                <Typography
+                    variant={isPreview ? "body2" : "caption"}
+                    component={"h2"}
+                    color="secondary"
+                    // Minimal padding and no margin for preview title
+                    className={`${isPreview ? "px-1 py-0.5" : "ml-3.5"} font-medium uppercase text-sm text-surface-600 dark:text-surface-400`}
+                >
+                    {currentGroupName}
+                </Typography>
+                {!isPreview && onEditGroup && !dndDisabled && (
+                    <IconButton
+                        size="smallest"
+                        onClick={(e) => {
+                            e.stopPropagation(); // Prevent other click events
+                            onEditGroup(currentGroupName);
+                        }}
+                        className={cls("ml-2 ", isHovered ? "opacity-100" : "opacity-0", "transition-opacity duration-100")}
+                    >
+                        <EditIcon size="smallest"/>
+                    </IconButton>
+                )}
             </div>
-        </ExpandablePanel>
+
+            {isPreview ? (
+                children
+            ) : minimised ? (
+                // For minimised view in the main list
+                <div className={cls("mt-4 p-8 bg-surface-accent-200 dark:bg-surface-accent-800 rounded-lg")}
+                     style={{ minHeight: "50px" }}>
+                </div>
+            ) : (
+                // If highlighted, the parent div already has padding, so children (NavigationGroupDroppable) don't need extra margin top as much.
+                // The inner content of NavigationGroupDroppable will define its own padding if needed when active.
+                <div className={cls("mt-4", !minimised ? "pt-0" : "")}>
+                    {children}
+                </div>
+            )}
+        </div>
     );
 }

package/src/components/HomePage/RenameGroupDialog.tsx

@@ -0,0 +1,113 @@
+import React, { useState, useEffect, useRef } from "react";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField } from "@firecms/ui";
+
+interface RenameGroupDialogProps {
+    open: boolean;
+    initialName: string;
+    existingGroupNames: string[]; // Names of other existing groups to check for duplicates
+    onClose: () => void;
+    onRename: (newName: string) => void;
+}
+
+export function RenameGroupDialog({ open, initialName, existingGroupNames, onClose, onRename }: RenameGroupDialogProps) {
+    const [name, setName] = useState(initialName);
+    const [error, setError] = useState<string | null>(null);
+    const inputRef = useRef<HTMLInputElement | HTMLTextAreaElement | null>(null); // Create a ref for the input
+
+    useEffect(() => {
+        if (open) {
+            setName(initialName);
+            setError(null);
+            // Focus and select text when dialog opens
+            setTimeout(() => { // setTimeout to ensure the input is rendered and focusable
+                if (inputRef.current) {
+                    inputRef.current.focus();
+                    inputRef.current.select();
+                }
+            }, 100);
+        }
+    }, [initialName, open]);
+
+    const handleNameChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const newName = event.target.value;
+        setName(newName);
+        if (!newName.trim()) {
+            setError("Group name cannot be empty.");
+        } else if (existingGroupNames.includes(newName.trim())) {
+            setError("This group name already exists.");
+        } else {
+            setError(null);
+        }
+    };
+
+    const handleSave = () => {
+        const trimmedName = name.trim();
+        if (!trimmedName) {
+            setError("Group name cannot be empty.");
+            return;
+        }
+        if (existingGroupNames.includes(trimmedName)) {
+            setError("This group name already exists.");
+            return;
+        }
+        if (!error) {
+            onRename(trimmedName);
+            onClose();
+        }
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        if (event.key === "Enter") {
+            event.preventDefault(); // Prevent default form submission behavior
+            const trimmedName = name.trim();
+            // We need to check the error state directly as well,
+            // because the error state might not have updated if the user types and immediately hits enter.
+            let currentError = null;
+            if (!trimmedName) {
+                currentError = "Group name cannot be empty.";
+            } else if (existingGroupNames.includes(trimmedName)) {
+                currentError = "This group name already exists.";
+            }
+
+            if (!currentError && trimmedName) {
+                handleSave();
+            } else if (currentError) {
+                setError(currentError); // Ensure error is displayed if trying to submit with Enter
+            }
+        }
+    };
+
+    const handleClose = () => {
+        setName(initialName);
+        setError(null);
+        onClose();
+    };
+
+    if (!open) return null;
+
+    return (
+        <Dialog open={open} onOpenChange={onClose}>
+            <DialogTitle>Rename Group</DialogTitle>
+            <DialogContent>
+                <TextField
+                    inputRef={inputRef} // Pass the ref to the TextField
+                    label="Group Name"
+                    value={name}
+                    onChange={handleNameChange}
+                    onKeyDown={handleKeyDown} // Added onKeyDown handler
+                    error={!!error}
+                    aria-describedby={error ? "group-name-error" : undefined}
+                />
+                {error && <p id="group-name-error" style={{ display: "none" }}>{error}</p>}
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose} variant="text">
+                    Cancel
+                </Button>
+                <Button onClick={handleSave} disabled={!!error || !name.trim()}>
+                    Save
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}

package/src/core/DefaultDrawer.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from "react";
 import { useLargeLayout, useNavigationController } from "../hooks";
 
 import { Link, useNavigate } from "react-router-dom";
-import { CMSAnalyticsEvent, TopNavigationEntry, TopNavigationResult } from "../types";
+import { CMSAnalyticsEvent, NavigationEntry, NavigationResult } from "../types";
 import { IconForView } from "../util";
 import { cls, IconButton, Menu, MenuItem, MoreVertIcon, Tooltip, Typography } from "@firecms/ui";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
@@ -45,7 +45,7 @@ export function DefaultDrawer({
     const {
         navigationEntries,
         groups
-    }: TopNavigationResult = navigation.topLevelNavigation;
+    }: NavigationResult = navigation.topLevelNavigation;
 
     const adminViews = navigationEntries.filter(e => e.type === "admin") ?? [];
     const groupsWithoutAdmin = groups.filter(g => g !== "Admin");
@@ -63,7 +63,7 @@ export function DefaultDrawer({
         </div>;
     }, [drawerOpen]);
 
-    const onClick = (view: TopNavigationEntry) => {
+    const onClick = (view: NavigationEntry) => {
         const eventName: CMSAnalyticsEvent = view.type === "collection"
             ? "drawer_navigate_to_collection"
             : (view.type === "view" ? "drawer_navigate_to_view" : "unmapped_event");
@@ -90,9 +90,9 @@ export function DefaultDrawer({
                             {buildGroupHeader(group)}
                             {Object.values(navigationEntries)
                                 .filter(e => e.group === group)
-                                .map((view, index) =>
+                                .map((view) =>
                                     <DrawerNavigationItem
-                                        key={`navigation_${index}`}
+                                        key={view.id}
                                         icon={<IconForView collectionOrView={view.collection ?? view.view}
                                                            size={"small"}/>}
                                         tooltipsOpen={tooltipsOpen}
@@ -128,13 +128,13 @@ export function DefaultDrawer({
                             </div>}
                         </IconButton>}
                 >
-                    {adminViews.map((entry, index) =>
+                    {adminViews.map((entry) =>
                         <MenuItem
                             onClick={(event) => {
                                 event.preventDefault();
-                                navigate(entry.path);
+                                navigate(entry.url); // Consistent use of entry.url for navigation
                             }}
-                            key={`navigation_${index}`}>
+                            key={entry.id}>
                             {<IconForView collectionOrView={entry.view}/>}
                             {entry.name}
                         </MenuItem>)}

package/src/core/DrawerNavigationItem.tsx

@@ -38,7 +38,7 @@ export function DrawerNavigationItem({
                 "flex flex-row items-center mr-8",
                 // "transition-all ease-in-out delay-100 duration-300",
                 // drawerOpen ? "w-full" : "w-18",
-                drawerOpen ? "pl-4 h-12" : "pl-4 h-11",
+                drawerOpen ? "pl-4 h-10" : "pl-4 h-9",
                 "font-semibold text-xs",
                 isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50" : ""
             )}

package/src/core/field_configs.tsx

@@ -10,6 +10,7 @@ import {
     MapFieldBinding,
     MarkdownEditorFieldBinding,
     MultiSelectFieldBinding,
+    ReferenceAsStringFieldBinding,
     ReferenceFieldBinding,
     RepeatFieldBinding,
     SelectFieldBinding,
@@ -211,10 +212,21 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
             Field: StorageUploadFieldBinding
         }
     },
+    reference_as_string: {
+        key: "reference_as_string",
+        name: "Reference (as string)",
+        description: "The value refers to a different collection (it is saved as a string)",
+        Icon: LinkIcon,
+        color: "#154fb3",
+        property: {
+            dataType: "string",
+            Field: ReferenceAsStringFieldBinding
+        }
+    },
     reference: {
         key: "reference",
         name: "Reference",
-        description: "The value refers to a different collection",
+        description: "The value refers to a different collection (it is saved as a reference)",
         Icon: LinkIcon,
         color: "#ff0042",
         property: {
@@ -348,6 +360,8 @@ export function getDefaultFieldId(property: Property | ResolvedProperty) {
             return "email";
         } else if (property.enumValues) {
             return "select";
+        } else if (property.reference) {
+            return "reference_as_string";
         } else {
             return "text_field";
         }

package/src/form/field_bindings/ReferenceAsStringFieldBinding.tsx

@@ -0,0 +1,135 @@
+import React, { useCallback, useMemo } from "react";
+import { Entity, EntityCollection, EntityReference, FieldProps } from "../../types";
+import { useNavigationController, useReferenceDialog } from "../../hooks";
+import { ReadOnlyFieldBinding } from "./ReadOnlyFieldBinding";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { ErrorView } from "../../components";
+import { ReferencePreview } from "../../preview";
+import { getIconForProperty, IconForView } from "../../util";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+import { EntityPreviewContainer } from "../../components/EntityPreview";
+import { cls } from "@firecms/ui";
+
+/**
+ * Field that opens a reference selection dialog and stores the entity ID as a string.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function ReferenceAsStringFieldBinding(props: FieldProps<string>) {
+    if (typeof props.property.reference?.path !== "string") {
+        return <ReadOnlyFieldBinding {...props}/>;
+    }
+
+    return <ReferenceAsStringFieldBindingInternal {...props}/>;
+}
+
+function ReferenceAsStringFieldBindingInternal({
+                                                   propertyKey,
+                                                   value,
+                                                   setValue,
+                                                   error,
+                                                   showError,
+                                                   isSubmitting,
+                                                   disabled,
+                                                   minimalistView,
+                                                   property,
+                                                   includeDescription,
+                                                   size = "medium"
+                                               }: FieldProps<string>) {
+    if (!property.reference?.path) {
+        throw new Error("Property path is required for ReferenceAsStringFieldBinding");
+    }
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const navigationController = useNavigationController();
+    const path = property.reference.path;
+    const collection: EntityCollection | undefined = useMemo(() => {
+        return path ? navigationController.getCollection(path) : undefined;
+    }, [path]);
+
+    const referenceValue: EntityReference | undefined = useMemo(() => {
+        if (value && path) {
+            return new EntityReference(value, path);
+        }
+        return undefined;
+    }, [value, path]);
+
+    if (!collection) {
+        throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
+    }
+
+    const onSingleEntitySelected = useCallback((e: Entity<any> | null) => {
+        setValue(e ? e.id : null);
+    }, [setValue]);
+
+    const referenceDialogController = useReferenceDialog({
+            multiselect: false,
+            path: path,
+            collection,
+            onSingleEntitySelected,
+            selectedEntityIds: value ? [value] : undefined,
+            forceFilter: property.reference.forceFilter
+        }
+    );
+
+    const onEntryClick = (e: React.SyntheticEvent) => {
+        e.preventDefault();
+        referenceDialogController.open();
+    };
+
+    return (
+        <>
+            {!minimalistView && <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name}
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+
+            {!collection && <ErrorView
+                error={"The specified collection does not exist. Check console"}/>}
+
+            {collection && <>
+
+                {referenceValue && <ReferencePreview
+                    disabled={!path}
+                    previewProperties={property.reference?.previewProperties}
+                    hover={!disabled}
+                    size={size}
+                    onClick={disabled || isSubmitting ? undefined : onEntryClick}
+                    reference={referenceValue}
+                    includeEntityLink={property.reference?.includeEntityLink}
+                    includeId={property.reference?.includeId}
+                />}
+
+                {!value && <div className="justify-center text-left">
+                    <EntityPreviewContainer
+                        className={cls("px-6 h-16 text-sm font-medium flex items-center gap-6",
+                            disabled || isSubmitting
+                                ? "text-surface-accent-500"
+                                : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
+                        onClick={onEntryClick}
+                        size={"medium"}>
+                        <IconForView collectionOrView={collection}
+                                     className={"text-surface-300 dark:text-surface-600"}/>
+                        {`Edit ${property.name}`.toUpperCase()}
+                    </EntityPreviewContainer>
+                </div>}
+            </>}
+
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
+
+        </>
+    );
+}

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -79,7 +79,6 @@ export function RepeatFieldBinding<T extends Array<any>>({
             minimalistView: false,
             autoFocus: internalId === lastAddedId,
         };
-        console.debug("Building entry for", index, fieldProps);
         return <ErrorBoundary>
             <PropertyFieldBinding {...fieldProps} index={index}/>
         </ErrorBoundary>;

package/src/form/index.tsx

@@ -8,6 +8,7 @@ export { TextFieldBinding } from "./field_bindings/TextFieldBinding";
 export { SwitchFieldBinding } from "./field_bindings/SwitchFieldBinding";
 export { DateTimeFieldBinding } from "./field_bindings/DateTimeFieldBinding";
 export { ReferenceFieldBinding } from "./field_bindings/ReferenceFieldBinding";
+export { ReferenceAsStringFieldBinding } from "./field_bindings/ReferenceAsStringFieldBinding";
 export { MapFieldBinding } from "./field_bindings/MapFieldBinding";
 export { KeyValueFieldBinding } from "./field_bindings/KeyValueFieldBinding";
 export { RepeatFieldBinding } from "./field_bindings/RepeatFieldBinding";