@firecms/core 3.0.0-rc.1 → 3.0.0-rc.3

package/src/form/components/LocalChangesMenu.tsx

@@ -0,0 +1,144 @@
+import React, { useState } from "react";
+import {
+    Button,
+    CancelIcon,
+    CheckIcon,
+    defaultBorderMixin,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    KeyboardArrowDownIcon,
+    Menu,
+    MenuItem,
+    Typography,
+    VisibilityIcon,
+    WarningIcon
+} from "@firecms/ui";
+import { FormexController } from "@firecms/formex";
+import { useSnackbarController } from "../../hooks";
+import { mergeDeep } from "../../util";
+import { flattenKeys, removeEntityFromCache } from "../../util/entity_cache";
+import { ResolvedProperties } from "../../types";
+import { PropertyCollectionView } from "../../components/PropertyCollectionView";
+
+interface LocalChangesMenuProps<M extends object> {
+    cacheKey: string;
+    localChangesData: Partial<M>;
+    formex: FormexController<M>;
+    onClearLocalChanges?: () => void;
+    properties: ResolvedProperties<M>;
+}
+
+export function LocalChangesMenu<M extends object>({
+                                                       localChangesData,
+                                                       formex,
+                                                       onClearLocalChanges,
+                                                       cacheKey,
+                                                       properties
+                                                   }: LocalChangesMenuProps<M>) {
+
+    const snackbarController = useSnackbarController();
+    const [previewDialogOpen, setPreviewDialogOpen] = useState(false);
+    const [open, setOpen] = useState(false);
+
+    const handleOpenMenu = () => setOpen(true);
+    const handleCloseMenu = () => setOpen(false);
+
+    const handlePreview = () => {
+        setPreviewDialogOpen(true);
+        handleCloseMenu();
+    };
+
+    const handleApply = () => {
+        const mergedValues = mergeDeep(formex.values, localChangesData);
+        const touched = { ...formex.touched };
+        const previewKeys = flattenKeys(localChangesData);
+        previewKeys.forEach((key) => {
+            touched[key] = true;
+        });
+
+        formex.setTouched(touched);
+        formex.setValues(mergedValues);
+        snackbarController.open({
+            type: "info",
+            message: "Local changes applied to the form"
+        });
+        handleCloseMenu();
+        onClearLocalChanges?.();
+    };
+
+    const handleDiscard = () => {
+        removeEntityFromCache(cacheKey);
+        snackbarController.open({
+            type: "info",
+            message: "Local changes discarded"
+        });
+        handleCloseMenu();
+        onClearLocalChanges?.();
+    };
+
+    return (
+        <>
+            <Menu
+                trigger={
+                    <Button
+                        size={"small"}
+                        className={
+                            "font-semibold text-xs rounded-full px-4 py-1 bg-yellow-200 dark:bg-yellow-900 hover:bg-yellow-300 dark:hover:bg-yellow-800 text-yellow-800 dark:text-yellow-200"
+                        }
+                        onClick={handleOpenMenu}
+                    >
+                        <WarningIcon size={"smallest"} className={"mr-1 text-yellow-600 dark:text-yellow-400"}/>
+                        Unsaved Local changes
+                        <KeyboardArrowDownIcon size={"smallest"}/>
+                    </Button>
+                }
+                open={open}
+                onOpenChange={setOpen}
+            >
+                <div className={"max-w-xs px-4 py-4 text-sm text-gray-700 dark:text-gray-300"}>
+                    This document was edited locally and has unsaved changes. These local changes will be lost if you
+                    don't apply them.
+                </div>
+                <MenuItem dense onClick={handlePreview}><VisibilityIcon size={"small"}/>Preview Changes</MenuItem>
+                <MenuItem dense onClick={handleApply}><CheckIcon size={"small"}/>Apply Changes</MenuItem>
+                <MenuItem dense onClick={handleDiscard}><CancelIcon size={"small"}/>Discard Local Changes</MenuItem>
+            </Menu>
+
+            <Dialog
+                open={previewDialogOpen}
+                onOpenChange={setPreviewDialogOpen}
+                maxWidth={"4xl"}
+            >
+                <DialogTitle variant={"h6"}>Preview Local Changes</DialogTitle>
+                <DialogContent className={"my-4"}>
+                    <Typography variant={"body2"} className={"mb-4"}>
+                        These are the local changes that will be applied to the form.
+                    </Typography>
+                    <div className={`border rounded-lg ${defaultBorderMixin}`} style={{
+                        maxHeight: 520,
+                        overflow: "auto"
+                    }}>
+                        <div className="p-4">
+                            <PropertyCollectionView data={localChangesData}
+                                                    properties={properties as ResolvedProperties}/>
+                        </div>
+                    </div>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setPreviewDialogOpen(false)}>Close</Button>
+                    <Button
+                        variant={"filled"}
+                        onClick={() => {
+                            handleApply();
+                            setPreviewDialogOpen(false);
+                        }}
+                    >
+                        Apply changes
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        </>
+    );
+}

package/src/form/field_bindings/UserSelectFieldBinding.tsx

@@ -0,0 +1,94 @@
+import React, { useCallback } from "react";
+
+import { FieldProps, User } from "../../types";
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { getIconForProperty } from "../../util";
+import { CloseIcon, cls, IconButton, Select, SelectItem } from "@firecms/ui";
+import { PropertyIdCopyTooltip } from "../../components";
+import { useInternalUserManagementController } from "../../hooks";
+import { UserDisplay } from "../../components/UserDisplay";
+
+type UserSelectProps = FieldProps<string>;
+
+/**
+ * Field binding for selecting a user from the internal user management system.
+ * Renders a select dropdown with user information including name and email.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function UserSelectFieldBinding({
+                                           propertyKey,
+                                           value,
+                                           setValue,
+                                           error,
+                                           showError,
+                                           disabled,
+                                           autoFocus,
+                                           touched,
+                                           property,
+                                           includeDescription,
+                                           size = "large"
+                                       }: UserSelectProps) {
+
+    const { users, getUser } = useInternalUserManagementController();
+
+    const handleClearClick = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setValue(null);
+    }, [setValue]);
+
+    return (
+        <>
+            <Select
+                value={value !== undefined && value != null ? value.toString() : ""}
+                disabled={disabled}
+                size={size}
+                fullWidth={true}
+                position="item-aligned"
+                inputClassName={cls("w-full")}
+                label={
+                    <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                        <LabelWithIcon
+                            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 my-0"}
+                        />
+                    </PropertyIdCopyTooltip>}
+                endAdornment={
+                    property.clearable && !disabled && value && <IconButton
+                        size="small"
+                        onClick={handleClearClick}>
+                        <CloseIcon size={"small"}/>
+                    </IconButton>
+                }
+                onValueChange={(updatedValue: string) => {
+                    const newValue = updatedValue || null;
+                    return setValue(newValue);
+                }}
+                renderValue={(userId: string) => {
+                    const user = getUser(userId);
+                    return <UserDisplay user={user} />;
+                }}
+            >
+                {users && users.map((user) => {
+                    return <SelectItem
+                        key={user.uid}
+                        value={user.uid}>
+                        <UserDisplay user={user}  />
+                    </SelectItem>
+                })}
+            </Select>
+
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
+
+        </>
+    );
+}

package/src/form/index.tsx

@@ -1,4 +1,8 @@
-export * from "./EntityForm";
+export {
+    EntityForm,
+    yupToFormErrors,
+} from "./EntityForm";
+export type { EntityFormProps } from "./EntityForm";
 
 export { SelectFieldBinding } from "./field_bindings/SelectFieldBinding";
 export { MultiSelectFieldBinding } from "./field_bindings/MultiSelectFieldBinding";

package/src/hooks/index.tsx

@@ -18,6 +18,9 @@ export * from "./useSnackbarController";
 export * from "./useModeController";
 export * from "./useClipboard";
 export * from "./useLargeLayout";
+export * from "./useCollapsedGroups";
+
+export * from "./useInternalUserManagementController";
 
 export * from "./useReferenceDialog";
 export * from "./useBrowserTitleAndIcon";

package/src/hooks/useBrowserTitleAndIcon.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 
-const fireCMSLogo = "data:image/png;base64,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";
+const fireCMSLogo = "data:image/png;base64,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";
 
 /**
  * Internal hook to handle the browser title and icon

package/src/hooks/useBuildNavigationController.tsx

@@ -149,26 +149,10 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
     const allPluginGroups = plugins?.flatMap(plugin => plugin.homePage?.navigationEntries ? plugin.homePage.navigationEntries.map(e => e.name) : []) ?? [];
     const pluginGroups = [...new Set(allPluginGroups)];
 
-    const onNavigationEntriesOrderUpdate = useCallback((entries: NavigationGroupMapping[]) => {
-        if (!plugins) {
-            return;
-        }
-        // remove all groups that have no entries
-        const filteredEntries = entries.filter(entry => entry.entries.length > 0);
-        if (plugins.some(plugin => plugin.homePage?.onNavigationEntriesUpdate)) {
-            plugins.forEach(plugin => {
-                if (plugin.homePage?.onNavigationEntriesUpdate) {
-                    plugin.homePage.onNavigationEntriesUpdate(filteredEntries);
-                }
-            });
-        }
-
-    }, [plugins]);
-
-    const computeTopNavigation = useCallback((collections: EntityCollection[], views: CMSView[], adminViews: CMSView[], viewsOrder?: string[]): NavigationResult => {
+    const computeTopNavigation = useCallback((collections: EntityCollection[], views: CMSView[], adminViews: CMSView[], viewsOrder?: string[], navigationGroupMappingsOverride?: NavigationGroupMapping[], onNavigationEntriesUpdateCallback?: (entries: NavigationGroupMapping[]) => void): NavigationResult => {
 
         const finalNavigationGroupMappings: NavigationGroupMapping[] = computeNavigationGroups({
-            navigationGroupMappings: navigationGroupMappings,
+            navigationGroupMappings: navigationGroupMappingsOverride ?? navigationGroupMappings,
             collections,
             views,
             plugins: plugins
@@ -209,7 +193,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
             ...(views ?? []).reduce((acc, view) => {
                 if (view.hideFromNavigation) return acc;
 
-                const pathKey = Array.isArray(view.path) ? view.path[0] : view.path;
+                const pathKey = view.path;
                 let groupName = getGroup(view); // Initial group
 
                 if (finalNavigationGroupMappings) {
@@ -237,7 +221,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
             ...(adminViews ?? []).reduce((acc, view) => {
                 if (view.hideFromNavigation) return acc;
 
-                const pathKey = Array.isArray(view.path) ? view.path[0] : view.path;
+                const pathKey = view.path;
                 const groupName = NAVIGATION_ADMIN_GROUP_NAME;
 
                 acc.push({
@@ -280,21 +264,62 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
             .map(e => e.group)
             .filter(Boolean) as string[];
 
+        // Preserve order from finalNavigationGroupMappings (persisted order)
+        const groupsFromMappings = finalNavigationGroupMappings.map(g => g.name);
+
+        // Add any additional groups not in mappings
+        const additionalGroups = collectedGroupsFromEntries.filter(g => !groupsFromMappings.includes(g));
+
         const allDefinedGroups = [
             ...(pluginGroups ?? []),
-            ...collectedGroupsFromEntries
+            ...groupsFromMappings,
+            ...additionalGroups
         ];
 
-        const uniqueGroups = [...new Set(allDefinedGroups)]
-            .sort((a, b) => groupOrderValue(a) - groupOrderValue(b));
+        // Remove duplicates while preserving order, then separate admin to the end
+        const uniqueGroupsArray = [...new Set(allDefinedGroups)];
+        const adminGroups = uniqueGroupsArray.filter(g => g === NAVIGATION_ADMIN_GROUP_NAME);
+        const nonAdminGroups = uniqueGroupsArray.filter(g => g !== NAVIGATION_ADMIN_GROUP_NAME);
+        const uniqueGroups = [...nonAdminGroups, ...adminGroups];
 
         return {
             allowDragAndDrop: plugins?.some(plugin => plugin.homePage?.allowDragAndDrop) ?? false,
             navigationEntries,
             groups: uniqueGroups,
-            onNavigationEntriesUpdate: onNavigationEntriesOrderUpdate,
+            onNavigationEntriesUpdate: onNavigationEntriesUpdateCallback!,
         };
-    }, [navigationGroupMappings, buildCMSUrlPath, buildUrlCollectionPath, pluginGroups, onNavigationEntriesOrderUpdate]);
+    }, [navigationGroupMappings, buildCMSUrlPath, buildUrlCollectionPath, pluginGroups]);
+
+    const onNavigationEntriesOrderUpdate = useCallback((entries: NavigationGroupMapping[]) => {
+        if (!plugins) {
+            return;
+        }
+        // remove all groups that have no entries
+        const filteredEntries = entries.filter(entry => entry.entries.length > 0);
+
+        // Immediately update the local topLevelNavigation with new mappings
+        if (collectionsRef.current && viewsRef.current) {
+            const updatedNav = computeTopNavigation(
+                collectionsRef.current,
+                viewsRef.current,
+                adminViewsRef.current ?? [],
+                viewsOrder,
+                filteredEntries,
+                onNavigationEntriesOrderUpdate
+            );
+            setTopLevelNavigation(updatedNav);
+        }
+
+        // Then persist to backend
+        if (plugins.some(plugin => plugin.homePage?.onNavigationEntriesUpdate)) {
+            plugins.forEach(plugin => {
+                if (plugin.homePage?.onNavigationEntriesUpdate) {
+                    plugin.homePage.onNavigationEntriesUpdate(filteredEntries);
+                }
+            });
+        }
+
+    }, [plugins, computeTopNavigation, viewsOrder]);
 
     const refreshNavigation = useCallback(async () => {
 
@@ -312,7 +337,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
                 ]
             );
 
-            const computedTopLevelNav = computeTopNavigation(resolvedCollections, resolvedViews, resolvedAdminViews, viewsOrder);
+            const computedTopLevelNav = computeTopNavigation(resolvedCollections, resolvedViews, resolvedAdminViews, viewsOrder, undefined, onNavigationEntriesOrderUpdate);
 
             let shouldUpdateTopLevelNav = false;
             if (!areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
@@ -457,8 +482,9 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         [fullCollectionPath]);
 
     const urlPathToDataPath = useCallback((path: string): string => {
-        if (path.startsWith(fullCollectionPath))
-            return path.replace(fullCollectionPath, "");
+        const decodedPath = decodeURIComponent(path);
+        if (decodedPath.startsWith(fullCollectionPath))
+            return decodedPath.replace(fullCollectionPath, "");
         throw Error("Expected path starting with " + fullCollectionPath);
     }, [fullCollectionPath]);
 
@@ -716,6 +742,7 @@ function computeNavigationGroups({
 
     let result = navigationGroupMappings;
 
+    // Merge plugin navigation entries
     result = plugins ? plugins?.reduce((acc, plugin) => {
         if (plugin.homePage?.navigationEntries) {
             plugin.homePage.navigationEntries.forEach((entry) => {
@@ -738,8 +765,54 @@ function computeNavigationGroups({
         return acc;
     }, [...(result ?? [])] as NavigationGroupMapping[]) : result;
 
+    // Track all entries that are already assigned to groups
+    const assignedEntries = new Set<string>();
+    if (result) {
+        result.forEach(group => {
+            group.entries.forEach(entry => assignedEntries.add(entry));
+        });
+    }
+
+    // Find collections and views that are NOT in any persisted group
+    const unassignedGroupMap: Record<string, string[]> = {};
+
+    // Check collections
+    (collections ?? []).forEach(collection => {
+        const entry = collection.id ?? collection.path;
+        if (!assignedEntries.has(entry)) {
+            const groupName = getGroup(collection);
+            if (!unassignedGroupMap[groupName]) unassignedGroupMap[groupName] = [];
+            unassignedGroupMap[groupName].push(entry);
+        }
+    });
+
+    // Check views
+    (views ?? []).forEach(view => {
+        const entry = view.path;
+        if (!assignedEntries.has(entry)) {
+            const groupName = getGroup(view);
+            if (!unassignedGroupMap[groupName]) unassignedGroupMap[groupName] = [];
+            unassignedGroupMap[groupName].push(entry);
+        }
+    });
+
+    // Merge unassigned entries into existing groups or create new groups
+    Object.entries(unassignedGroupMap).forEach(([groupName, entries]) => {
+        if (result) {
+            const existingGroup = result.find(g => g.name === groupName);
+            if (existingGroup) {
+                existingGroup.entries.push(...entries);
+            } else {
+                result.push({
+                    name: groupName,
+                    entries
+                });
+            }
+        }
+    });
+
     if (!result) {
-        // Convert views and collections to navigation group mappings, grouped by their group name
+        // No persisted data at all - create from scratch
         result = [];
         const groupMap: Record<string, string[]> = {};
 
@@ -754,12 +827,12 @@ function computeNavigationGroups({
         // Add views
         (views ?? []).forEach(view => {
             const name = getGroup(view);
-            const entry = Array.isArray(view.path) ? view.path[0] : view.path;
+            const entry = view.path;
             if (!groupMap[name]) groupMap[name] = [];
             groupMap[name].push(entry);
         });
 
-        // Convert groupMap to initialGroupMappings array
+        // Convert groupMap to result array
         result = Object.entries(groupMap).map(([name, entries]) => ({
             name,
             entries

package/src/hooks/useCollapsedGroups.ts

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useState } from "react";
+
+/**
+ * Custom hook for managing collapsed/expanded state of navigation groups
+ * with localStorage persistence. Automatically cleans up stale group entries
+ * when groups are removed from the navigation.
+ */
+export function useCollapsedGroups(groupNames: string[]) {
+    // Load collapsed groups from localStorage on mount
+    const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>(() => {
+        try {
+            const stored = localStorage.getItem('firecms-collapsed-groups');
+            return stored ? JSON.parse(stored) : {};
+        } catch {
+            return {};
+        }
+    });
+
+    // Save to localStorage whenever collapsedGroups changes
+    useEffect(() => {
+        try {
+            localStorage.setItem('firecms-collapsed-groups', JSON.stringify(collapsedGroups));
+        } catch {
+            // Silently fail if localStorage is not available
+        }
+    }, [collapsedGroups]);
+
+    // Clean up collapsed groups state when groups change - remove entries for groups that no longer exist
+    useEffect(() => {
+        // Only clean up if we have actual groups loaded (avoid cleaning up during initial load)
+        if (groupNames.length === 0) return;
+
+        const currentGroupNames = new Set(groupNames);
+
+        setCollapsedGroups(prev => {
+            const cleaned = Object.fromEntries(
+                Object.entries(prev).filter(([groupName]) => currentGroupNames.has(groupName))
+            );
+
+            // Only update if something actually changed
+            const prevKeys = Object.keys(prev);
+            const cleanedKeys = Object.keys(cleaned);
+
+            if (prevKeys.length === cleanedKeys.length && prevKeys.every(key => cleanedKeys.includes(key))) {
+                return prev;
+            }
+
+            return cleaned;
+        });
+    }, [groupNames]);
+
+    const isGroupCollapsed = useCallback((name: string) => {
+        return !!collapsedGroups[name];
+    }, [collapsedGroups]);
+
+    const toggleGroupCollapsed = useCallback((name: string) => {
+        setCollapsedGroups(prev => ({ ...prev, [name]: !prev[name] }));
+    }, []);
+
+    return {
+        isGroupCollapsed,
+        toggleGroupCollapsed
+    };
+}

package/src/hooks/useFireCMSContext.tsx

@@ -11,6 +11,7 @@ import { useDialogsController } from "./useDialogsController";
 import { useCustomizationController } from "./useCustomizationController";
 import { useAnalyticsController } from "./useAnalyticsController";
 import React, { useEffect } from "react";
+import { useInternalUserManagementController } from "./useInternalUserManagementController";
 
 /**
  * Hook to retrieve the {@link FireCMSContext}.
@@ -34,6 +35,7 @@ export const useFireCMSContext = <USER extends User = User, AuthControllerType e
     const dialogsController = useDialogsController();
     const customizationController = useCustomizationController();
     const analyticsController = useAnalyticsController();
+    const userManagement = useInternalUserManagementController<USER>();
 
     const fireCMSContextRef = React.useRef<FireCMSContext<USER, AuthControllerType>>({
         authController,
@@ -46,7 +48,8 @@ export const useFireCMSContext = <USER extends User = User, AuthControllerType e
         userConfigPersistence,
         dialogsController,
         customizationController,
-        analyticsController
+        analyticsController,
+        userManagement
     });
 
     useEffect(() => {
@@ -61,7 +64,8 @@ export const useFireCMSContext = <USER extends User = User, AuthControllerType e
             userConfigPersistence,
             dialogsController,
             customizationController,
-            analyticsController
+            analyticsController,
+            userManagement
         };
     }, [authController, dialogsController, navigation, sideDialogsController]);
 

package/src/hooks/useInternalUserManagementController.tsx

@@ -0,0 +1,16 @@
+import { useContext } from "react";
+import { InternalUserManagement, NavigationController, User } from "../types";
+import { NavigationContext } from "../contexts/NavigationContext";
+import { InternalUserManagementContext } from "../contexts/InternalUserManagementContext";
+
+/**
+ * Use this hook to get the internal user management of the app.
+ * Note that this is different from the user management plugin controller.
+ * This controller will be eventually replaced by the one provided
+ * by the user management plugin.
+ *
+ * Use at your own risk!
+ *
+ * @group Hooks and utilities
+ */
+export const useInternalUserManagementController = <USER extends User = User>(): InternalUserManagement<USER> => useContext(InternalUserManagementContext);

package/src/preview/PropertyPreview.tsx

@@ -31,6 +31,7 @@ import { DatePreview } from "./components/DatePreview";
 import { BooleanPreview } from "./components/BooleanPreview";
 import { NumberPropertyPreview } from "./property_previews/NumberPropertyPreview";
 import { ErrorView } from "../components";
+import { UserPreview } from "./components/UserPreview";
 
 /**
  * @group Preview components
@@ -97,6 +98,13 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                                              previewType={stringProperty.url}/>;
             } else if (stringProperty.markdown) {
                 content = <Markdown source={value} size={"small"}/>;
+            } else if (stringProperty.userSelect) {
+                content = <UserPreview
+                    value={value}
+                    property={stringProperty}
+                    propertyKey={propertyKey}
+                    size={props.size}
+                />;
             } else if (stringProperty.reference) {
                 if (typeof stringProperty.reference.path === "string") {
                     content = <ReferencePreview

package/src/preview/components/ReferencePreview.tsx

@@ -4,7 +4,7 @@ import { Entity, EntityCollection, EntityReference } from "../../types";
 import { useCustomizationController, useEntityFetch, useNavigationController } from "../../hooks";
 import { PreviewSize } from "../PropertyPreviewProps";
 import { Skeleton } from "@firecms/ui";
-import { ErrorView } from "../../components";
+import { ErrorBoundary, ErrorView } from "../../components";
 import { EntityPreview, EntityPreviewContainer } from "../../components/EntityPreview";
 
 export type ReferencePreviewProps = {
@@ -32,7 +32,9 @@ export const ReferencePreview = function ReferencePreview(props: ReferencePrevie
                        tooltip={JSON.stringify(reference)}/>
         </EntityPreviewContainer>;
     }
-    return <ReferencePreviewInternal {...props} />;
+    return <ErrorBoundary>
+        <ReferencePreviewInternal {...props} />
+    </ErrorBoundary>;
 };
 
 function ReferencePreviewInternal({