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

package/dist/preview/components/UserPreview.d.ts

@@ -0,0 +1,8 @@
+import { PropertyPreviewProps } from "../PropertyPreviewProps";
+/**
+ * Preview component for displaying user information.
+ * This is a simple wrapper around UserDisplay.
+ *
+ * @group Preview components
+ */
+export declare function UserPreview({ value }: PropertyPreviewProps<string>): import("react/jsx-runtime").JSX.Element;

package/dist/preview/index.d.ts

@@ -21,3 +21,4 @@ export * from "./components/EnumValuesChip";
 export * from "./components/EmptyValue";
 export * from "./components/ImagePreview";
 export * from "./components/ReferencePreview";
+export * from "./components/UserPreview";

package/dist/types/collections.d.ts

@@ -60,6 +60,8 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * https://fonts.google.com/icons
      * e.g. 'account_tree' or 'person'.
      * Find all the icons in https://firecms.co/docs/icons
+     * You can also pass a React node if you want to render a custom icon.
+     * If not specified, a default icon will be used.
      */
     icon?: string | React.ReactNode;
     /**
@@ -305,6 +307,17 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * This prop has no effect if the history plugin is not enabled
      */
     history?: boolean;
+    /**
+     * Should local changes be backed up in local storage, to prevent data loss on
+     * accidental navigations.
+     * - `manual_apply`: When the user navigates back to an entity with local changes,
+     *   they will be prompted to restore the changes.
+     * - `auto_apply`: When the user navigates back to an entity with local changes,
+     *   the changes will be automatically applied.
+     * - `false`: Local changes will not be backed up.
+     * Defaults to `manual_apply`.
+     */
+    localChangesBackup?: "manual_apply" | "auto_apply" | false;
 }
 /**
  * Parameter passed to the `Actions` prop in the collection configuration.

package/dist/types/entities.d.ts

@@ -42,7 +42,11 @@ export declare class EntityReference {
      * to the root of the database).
      */
     readonly path: string;
-    constructor(id: string, path: string);
+    /**
+     * Optional database ID where the entity is stored (if multiple databases are used)
+     */
+    readonly databaseId?: string;
+    constructor(id: string, path: string, databaseId?: string);
     get pathWithId(): string;
     isEntityReference(): boolean;
 }

package/dist/types/firecms.d.ts

@@ -13,6 +13,7 @@ import { UserConfigurationPersistence } from "./local_config_persistence";
 import { FireCMSPlugin } from "./plugins";
 import { CMSAnalyticsEvent } from "./analytics";
 import { EntityAction } from "./entity_actions";
+import { InternalUserManagement } from "./internal_user_management";
 /**
  * Use this callback to build entity collections dynamically.
  * You can use the user to decide which collections to show.
@@ -123,6 +124,7 @@ export type FireCMSProps<USER extends User> = {
      * Use plugins to modify the behaviour of the CMS.
      * DEPRECATED: use the `plugins` prop in the `useBuildNavigationController` instead.
      * This prop will work as a fallback for the `plugins` prop in the `useBuildNavigationController`.
+     * @deprecated
      */
     plugins?: FireCMSPlugin<any, any, any>[];
     /**
@@ -134,6 +136,19 @@ export type FireCMSProps<USER extends User> = {
      * The function must return a URL that gets opened when the button is clicked
      */
     entityLinkBuilder?: EntityLinkBuilder;
+    /**
+     * You can use this props to provide your own user management implementation.
+     * Note that this will not affect the UI, but it will be used to show user information
+     * in various places of the CMS, for example, to show who created or modified an entity,
+     * or to assign ownership of an entity.
+     *
+     * You can also use this data to be retrieved in your custom properties,
+     * for example, to show a list of users in a dropdown.
+     *
+     * If you are using the FireCMS user management plugin, this
+     * prop will be implemented automatically.
+     */
+    userManagement?: InternalUserManagement;
     components?: {
         /**
          * Component to render when a reference is missing

package/dist/types/firecms_context.d.ts

@@ -10,6 +10,7 @@ import { SideDialogsController } from "./side_dialogs_controller";
 import { DialogsController } from "./dialogs_controller";
 import { CustomizationController } from "./customization_controller";
 import { AnalyticsController } from "./analytics_controller";
+import { InternalUserManagement } from "./internal_user_management";
 /**
  * Context that includes the internal controllers and contexts used by the app.
  * Some controllers and context included in this context can be accessed
@@ -67,4 +68,19 @@ export type FireCMSContext<USER extends User = User, AuthControllerType extends
      * Callback to send analytics events
      */
     analyticsController?: AnalyticsController;
+    /**
+     * This section is used to manage users in the CMS.
+     * It is used to show user information in various places of the CMS,
+     * for example, to show who created or modified an entity,
+     * or to assign ownership of an entity.
+     *
+     * In the base CMS, this information is not used for access control.
+     * You can pass your own implementation of this section, to populate
+     * the dropdown of users when assigning ownership of an entity,
+     * or to show more information about the user.
+     *
+     * If you are using the FireCMS user management plugin, this
+     * section will be implemented automatically.
+     */
+    userManagement: InternalUserManagement<USER>;
 };

package/dist/types/index.d.ts

@@ -13,6 +13,7 @@ export * from "./fields";
 export * from "./property_config";
 export * from "./datasource";
 export * from "./entity_link_builder";
+export * from "./internal_user_management";
 export * from "./side_entity_controller";
 export * from "./side_dialogs_controller";
 export * from "./firecms_context";

package/dist/types/internal_user_management.d.ts

@@ -0,0 +1,20 @@
+import { User } from "./user";
+export type InternalUserManagement<USER extends User = User> = {
+    /**
+     * List of users to be managed by the CMS.
+     */
+    users: USER[];
+    /**
+     * Function to get a user by its uid. This is used to show
+     * user information when assigning ownership of an entity.
+     *
+     * You can pass your own implementation if you want to show
+     * more information about the user.
+     *
+     * If you are using the FireCMS user management plugin, this
+     * function will be implemented automatically.
+     *
+     * @param uid
+     */
+    getUser: (uid: string) => USER | null;
+};

package/dist/types/plugins.d.ts

@@ -7,6 +7,7 @@ import { CMSType, Property } from "./properties";
 import { EntityStatus } from "./entities";
 import { ResolvedProperty } from "./resolved_entities";
 import { NavigationGroupMapping } from "./navigation";
+import { InternalUserManagement } from "./internal_user_management";
 /**
  * Interface used to define plugins for FireCMS.
  * NOTE: This is a work in progress and the API is not stable yet.
@@ -37,6 +38,7 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollec
         }>>;
         props?: PROPS;
     };
+    userManagement?: InternalUserManagement;
     homePage?: {
         /**
          * Additional actions to be rendered in the home page, close to the search bar.

package/dist/types/properties.d.ts

@@ -102,6 +102,10 @@ export interface BaseProperty<T extends CMSType, CustomProps = any> {
     /**
      * Should this property be editable. If set to true, the user will be able to modify the property and
      * save the new config. The saved config will then become the source of truth.
+     * Defaults to `true.
+     * This props is only useful when you are using the collection editor to modify collection
+     * configurations from the CMS itself. You can also use the `editable` prop in the
+     * `EntityCollection` interface to disable the edition of all properties in a collection.
      */
     editable?: boolean;
     /**
@@ -291,6 +295,15 @@ export interface StringProperty extends BaseProperty<string> {
      * indicate that this string refers to a path in your storage provider.
      */
     storage?: StorageConfig;
+    /**
+     * This property is used to indicate that the string is a user ID, and
+     * it will be rendered as a user picker.
+     * Note that the user ID needs to be the one used in your authentication
+     * provider, e.g. Firebase Auth.
+     * You can also use a property builder to specify the user path dynamically
+     * based on other values of the entity.
+     */
+    userSelect?: boolean;
     /**
      * If the value of this property is a URL, you can set this flag to true
      * to add a link, or one of the supported media types to render a preview
@@ -608,8 +621,15 @@ export type StorageConfig = {
     /**
      * Use client side image compression and resizing
      * Will only be applied to these MIME types: image/jpeg, image/png and image/webp
+     * @deprecated Use `imageResize` instead
      */
-    imageCompression?: ImageCompression;
+    imageCompression?: ImageResize;
+    /**
+     * Advanced image resizing and cropping configuration.
+     * Applied before upload to optimize storage and bandwidth.
+     * Only applies to image MIME types: image/jpeg, image/png, image/webp
+     */
+    imageResize?: ImageResize;
     /**
      * Specific metadata set in your uploaded file.
      * For the default Firebase implementation, the values passed here are of type
@@ -721,17 +741,32 @@ export type PreviewType = "image" | "video" | "audio" | "file";
  * @group Entity properties
  */
 export type FileType = "image/*" | "video/*" | "audio/*" | "application/*" | "text/*" | "font/*" | string;
-export interface ImageCompression {
+export interface ImageResize {
+    /**
+     * Maximum width in pixels. Image will be scaled down proportionally if wider.
+     */
+    maxWidth?: number;
     /**
-     * New image max height (ratio is preserved)
+     * Maximum height in pixels. Image will be scaled down proportionally if taller.
      */
     maxHeight?: number;
     /**
-     * New image max width (ratio is preserved)
+     * Resize mode determines how the image fits within maxWidth/maxHeight bounds.
+     * - `contain`: Scale down to fit within bounds, preserving aspect ratio (default)
+     * - `cover`: Scale to fill bounds, preserving aspect ratio (may crop)
      */
-    maxWidth?: number;
+    mode?: 'contain' | 'cover';
+    /**
+     * Output format for the resized image.
+     * - `original`: Keep the original format (default)
+     * - `jpeg`: Convert to JPEG
+     * - `png`: Convert to PNG
+     * - `webp`: Convert to WebP
+     */
+    format?: 'original' | 'jpeg' | 'png' | 'webp';
     /**
-     * A number between 0 and 100. Used for the JPEG compression.(if no compress is needed, just set it to 100)
+     * Quality for lossy formats (JPEG, WebP). Number between 0 and 100.
+     * Higher is better quality but larger file size. Defaults to 80.
      */
     quality?: number;
 }

package/dist/types/property_config.d.ts

@@ -37,4 +37,4 @@ export type PropertyConfig<T extends CMSType = any> = {
      */
     description?: string;
 };
-export type PropertyConfigId = "text_field" | "multiline" | "markdown" | "url" | "email" | "select" | "multi_select" | "number_input" | "number_select" | "multi_number_select" | "file_upload" | "multi_file_upload" | "group" | "key_value" | "reference" | "reference_as_string" | "multi_references" | "switch" | "date_time" | "repeat" | "custom_array" | "block";
+export type PropertyConfigId = "text_field" | "multiline" | "markdown" | "url" | "email" | "user_select" | "select" | "multi_select" | "number_input" | "number_select" | "multi_number_select" | "file_upload" | "multi_file_upload" | "group" | "key_value" | "reference" | "reference_as_string" | "multi_references" | "switch" | "date_time" | "repeat" | "custom_array" | "block";

package/dist/types/user.d.ts

@@ -35,7 +35,7 @@ export type User = {
      */
     readonly isAnonymous: boolean;
     /**
-     *
+     * Custom roles assigned to the user.
      */
     roles?: Role[];
     getIdToken?: (forceRefresh?: boolean) => Promise<string>;

package/dist/util/collections.d.ts

@@ -9,3 +9,4 @@ export declare function resolveDefaultSelectedView(defaultSelectedView: string |
  * @param permissionsBuilder
  */
 export declare const applyPermissionsFunctionIfEmpty: (collections: EntityCollection[], permissionsBuilder?: PermissionsBuilder<any, any>) => EntityCollection[];
+export declare function getLocalChangesBackup(collection: EntityCollection): "manual_apply" | "auto_apply";

package/dist/util/entity_cache.d.ts

@@ -4,14 +4,18 @@
  * @param data - The data to cache and persist.
  */
 export declare function saveEntityToCache(path: string, data: object): void;
+export declare function removeEntityFromMemoryCache(path: string): void;
+export declare function saveEntityToMemoryCache(path: string, data: object): void;
+export declare function getEntityFromMemoryCache(path: string): object | undefined;
+export declare function hasEntityInCache(path: string): boolean;
 /**
  * Retrieves an entity from the in-memory cache or `localStorage`.
  * If the entity is not in the cache but exists in `localStorage`, it loads it into the cache.
  * @param path - The unique path/key for the entity.
+ * @param useLocalStorage
  * @returns The cached entity or `undefined` if not found.
  */
 export declare function getEntityFromCache(path: string): object | undefined;
-export declare function hasEntityInCache(path: string): boolean;
 /**
  * Removes an entity from both the in-memory cache and `localStorage`.
  * @param path - The unique path/key for the entity to remove.
@@ -21,3 +25,4 @@ export declare function removeEntityFromCache(path: string): void;
  * Clears the entire in-memory cache and removes all related entities from `localStorage`.
  */
 export declare function clearEntityCache(): void;
+export declare function flattenKeys(obj: any, prefix?: string, result?: string[]): string[];

package/dist/util/make_properties_editable.d.ts

@@ -1,3 +1,2 @@
-import { Properties, PropertiesOrBuilders } from "../types";
+import { Properties } from "../types";
 export declare function makePropertiesEditable(properties: Properties): Properties<any>;
-export declare function makePropertiesNonEditable(properties: PropertiesOrBuilders): PropertiesOrBuilders;

package/dist/util/objects.d.ts

@@ -1,5 +1,6 @@
 export declare const pick: <T>(obj: T, ...args: any[]) => T;
 export declare function isObject(item: any): any;
+export declare function isPlainObject(obj: any): boolean;
 export declare function mergeDeep<T extends Record<any, any>, U extends Record<any, any>>(target: T, source: U, ignoreUndefined?: boolean): T & U;
 export declare function getValueInPath(o: object | undefined, path: string): any;
 export declare function removeInPath(o: object, path: string): object | undefined;

package/dist/util/useStorageUploadController.d.ts

@@ -31,6 +31,7 @@ export declare function useStorageUploadController<M extends object>({ entityId,
     fileNameBuilder: (file: File) => Promise<string>;
     storagePathBuilder: (file: File) => string;
     onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, metadata?: any) => Promise<void>;
+    onFileUploadError: (entry: StorageFieldItem) => void;
     onFilesAdded: (acceptedFiles: File[]) => Promise<void>;
     multipleFilesSupported: boolean;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-rc.1",
+  "version": "3.0.0-rc.3",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -53,11 +53,12 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
-    "@firecms/editor": "^3.0.0-rc.1",
-    "@firecms/formex": "^3.0.0-rc.1",
-    "@firecms/ui": "^3.0.0-rc.1",
+    "@firecms/editor": "^3.0.0-rc.3",
+    "@firecms/formex": "^3.0.0-rc.3",
+    "@firecms/ui": "^3.0.0-rc.3",
     "@radix-ui/react-portal": "^1.1.9",
     "clsx": "^2.1.1",
+    "compressorjs": "^1.2.1",
     "date-fns": "^3.6.0",
     "fuse.js": "^7.1.0",
     "history": "^5.3.0",
@@ -67,7 +68,6 @@
     "prism-react-renderer": "^2.4.1",
     "react-dropzone": "^14.3.8",
     "react-fast-compare": "^3.2.2",
-    "react-image-file-resizer": "^0.4.8",
     "react-transition-group": "^4.4.5",
     "react-use-measure": "^2.1.7",
     "react-window": "^1.8.11",
@@ -108,7 +108,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "e91ae67d24262a9b944550abaae626f182688aa1",
+  "gitHead": "213f4c106eb3e6639eb1ad23c7d94282ef54d444",
   "publishConfig": {
     "access": "public"
   },

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -1,20 +1,10 @@
 import React, { MouseEvent, useCallback } from "react";
 
 import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../types";
-import {
-    Checkbox,
-    Chip,
-    cls,
-    EditIcon,
-    IconButton,
-    Menu,
-    MenuItem,
-    MoreVertIcon,
-    Skeleton,
-    Tooltip
-} from "@firecms/ui";
+import { Badge, Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip } from "@firecms/ui";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
-import { hasEntityInCache } from "../../util/entity_cache";
+import { getEntityFromCache } from "../../util/entity_cache";
+import { getLocalChangesBackup } from "../../util";
 
 /**
  *
@@ -79,7 +69,9 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
 
     const collapsedActions = actions.filter(a => a.collapsed || a.collapsed === undefined);
     const uncollapsedActions = actions.filter(a => a.collapsed === false);
-    const hasDraft = hasEntityInCache(fullPath + "/" + entity.id);
+    const enableLocalChangesBackup = collection ? getLocalChangesBackup(collection) : false;
+    const hasDraft = enableLocalChangesBackup ? getEntityFromCache(fullPath + "/" + entity.id) : false;
+    const iconSize = largeLayout && (size === "m" || size === "l" || size == "xl") ? "medium" : "small";
     return (
         <div
             className={cls(
@@ -99,37 +91,50 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
             {(hasActions || selectionEnabled) &&
                 <div className="w-34 flex justify-center">
 
-                    {uncollapsedActions.map((action, index) => (
-                        <Tooltip key={index}
-                                 title={action.name}
-                                 asChild={true}>
-                            <IconButton
-                                onClick={(event: MouseEvent) => {
-                                    event.stopPropagation();
-                                    action.onClick({
-                                        view: "collection",
-                                        entity,
-                                        fullPath,
-                                        fullIdPath,
-                                        collection,
-                                        context,
-                                        selectionController,
-                                        highlightEntity,
-                                        unhighlightEntity,
-                                        onCollectionChange,
-                                        openEntityMode: openEntityMode ?? collection?.openEntityMode
-                                    });
-                                }}
-                                size={largeLayout ? "medium" : "small"}>
-                                {action.icon}
-                            </IconButton>
-                        </Tooltip>
-                    ))}
+                    {uncollapsedActions.map((action, index) => {
+                        const isEditAction = action.key === "edit";
+                        const tooltip = isEditAction && hasDraft ? "Local unsaved changes" : action.name;
+
+                        let iconButton = <IconButton
+                            onClick={(event: MouseEvent) => {
+                                event.stopPropagation();
+                                action.onClick({
+                                    view: "collection",
+                                    entity,
+                                    fullPath,
+                                    fullIdPath,
+                                    collection,
+                                    context,
+                                    selectionController,
+                                    highlightEntity,
+                                    unhighlightEntity,
+                                    onCollectionChange,
+                                    openEntityMode: openEntityMode ?? collection?.openEntityMode
+                                });
+                            }}
+                            size={iconSize}>
+                            {action.icon}
+                        </IconButton>;
+                        if (isEditAction && hasDraft) {
+                            iconButton = (
+                                <Badge color={"warning"}>
+                                    {iconButton}
+                                </Badge>
+                            );
+                        }
+                        return (
+                            <Tooltip key={index}
+                                     title={tooltip}
+                                     asChild={true}>
+                                {iconButton}
+                            </Tooltip>
+                        );
+                    })}
 
                     {hasCollapsedActions &&
                         <Menu
                             trigger={<IconButton
-                                size={largeLayout ? "medium" : "small"}>
+                                size={iconSize}>
                                 <MoreVertIcon/>
                             </IconButton>}>
                             {collapsedActions.map((action, index) => (
@@ -161,7 +166,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                     {selectionEnabled &&
                         <Tooltip title={`Select ${entity.id}`}>
                             <Checkbox
-                                size={largeLayout ? "medium" : "small"}
+                                size={iconSize}
                                 checked={Boolean(isSelected)}
                                 onCheckedChange={onCheckedChange}
                             />
@@ -175,11 +180,6 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                     onClick={(event) => {
                         event.stopPropagation();
                     }}>
-                    {hasDraft && <Tooltip title={"Local unsaved changes"} className={"inline"}>
-                        <Chip colorScheme={"orangeDarker"} className={"p-0.5"}>
-                            <EditIcon size={12}/>
-                        </Chip>
-                    </Tooltip>}
                     <span className="min-w-0 truncate text-center">
                         {entity
                             ? entity.id

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -17,6 +17,7 @@ import { VirtualTableSelect } from "../VirtualTable/fields/VirtualTableSelect";
 import { VirtualTableNumberInput } from "../VirtualTable/fields/VirtualTableNumberInput";
 import { VirtualTableSwitch } from "../VirtualTable/fields/VirtualTableSwitch";
 import { VirtualTableDateField } from "../VirtualTable/fields/VirtualTableDateField";
+import { VirtualTableUserSelect } from "../VirtualTable/fields/VirtualTableUserSelect";
 
 import { TableStorageUpload } from "./fields/TableStorageUpload";
 import { TableReferenceField } from "./fields/TableReferenceField";
@@ -332,6 +333,17 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                                          updateValue={updateValue}
                     />;
                     fullHeight = true;
+                } else if (stringProperty.userSelect) {
+                    innerComponent = <VirtualTableUserSelect name={propertyKey as string}
+                                                             multiple={false}
+                                                             focused={selected}
+                                                             disabled={disabled}
+                                                             small={getPreviewSizeFrom(size) !== "medium"}
+                                                             error={validationError ?? error}
+                                                             internalValue={internalValue as string}
+                                                             updateValue={updateValue}
+                    />;
+                    fullHeight = true;
                 } else if (stringProperty.markdown || !stringProperty.storage || !stringProperty.reference) {
                     const multiline = Boolean(stringProperty.multiline) || Boolean(stringProperty.markdown);
                     innerComponent = <VirtualTableInput error={validationError ?? error}

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -376,6 +376,11 @@ export const EntityCollectionView = React.memo(
                     console.error("Save failure");
                     console.error(e);
                     setError(e);
+                },
+                onPreSaveHookError: (e: Error) => {
+                    console.error("Pre-save hook error");
+                    console.error(e);
+                    setError(e);
                 }
             });
 
@@ -694,7 +699,7 @@ export const EntityCollectionView = React.memo(
                                 className="mt-4"
                             >
                                 <AddIcon/>
-                                Create your first entity
+                                Create your first entry
                             </Button>
                         </div>
                         : <Typography variant={"label"}>No results with the applied filter/sort</Typography>

package/src/components/EntityView.tsx

@@ -1,11 +1,11 @@
 import React, { useMemo } from "react";
-import { PropertyPreview } from "../preview";
 import { Entity, EntityCollection, ResolvedEntityCollection, ResolvedProperties } from "../types";
 import { resolveCollection } from "../util";
-import { cls, defaultBorderMixin, IconButton, OpenInNewIcon } from "@firecms/ui";
+import { cls, defaultBorderMixin, IconButton, OpenInNewIcon, Typography } from "@firecms/ui";
 import { CustomizationController } from "../types/customization_controller";
 import { useCustomizationController } from "../hooks/useCustomizationController";
 import { useAuthController } from "../hooks";
+import { PropertyCollectionView } from "./PropertyCollectionView";
 
 /**
  * @group Components
@@ -40,47 +40,36 @@ export function EntityView<M extends Record<string, any>>(
 
     return (
         <div className={"w-full " + className}>
-            <div className={"w-full mb-4"}>
-                <div className={cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
-                    <div className="flex items-center w-1/4">
-                        <span className="pl-2 text-sm text-surface-600">Id</span>
+            <div className={"w-full mb-4 p-4"}>
+
+                <div className={`grid grid-cols-12 gap-x-4 py-4 items-start border-b ${defaultBorderMixin}`}>
+                    <div className="col-span-4 pr-2">
+                        <Typography variant="caption"
+                                    color={"secondary"}
+                                    component={"span"}
+                                    className="break-words">
+                            Id
+                        </Typography>
                     </div>
-                    <div
-                        className="flex-grow p-2 ml-2 w-3/4 text-surface-900 dark:text-white min-h-[56px] flex items-center">
-                        <span className="flex-grow mr-2">{entity.id}</span>
-                        {customizationController?.entityLinkBuilder &&
-                            <a href={customizationController.entityLinkBuilder({ entity })}
-                               rel="noopener noreferrer"
-                               target="_blank">
-                                <IconButton>
-                                    <OpenInNewIcon
-                                        size={"small"}/>
-                                </IconButton>
-                            </a>}
+                    <div className="col-span-8">
+                        <div
+                            className="flex-grow text-surface-900 dark:text-white flex items-center">
+                            <span className="flex-grow mr-2">{entity.id}</span>
+                            {customizationController?.entityLinkBuilder &&
+                                <a href={customizationController.entityLinkBuilder({ entity })}
+                                   rel="noopener noreferrer"
+                                   target="_blank">
+                                    <IconButton>
+                                        <OpenInNewIcon
+                                            size={"small"}/>
+                                    </IconButton>
+                                </a>}
+                        </div>
                     </div>
                 </div>
-                {Object.entries(properties)
-                    .map(([key, property]) => {
-                        const value = entity.values?.[key];
-                        return (
-                            <div
-                                key={`reference_previews_${key}`}
-                                className={cls(defaultBorderMixin, "flex justify-between py-2 border-b last:border-b-0")}>
-                                <div className="flex items-center w-1/4">
-                                    <span className="pl-2 text-sm text-surface-600">{property.name}</span>
-                                </div>
-                                <div
-                                    className="flex-grow p-2 ml-2 w-3/4 text-surface-900 dark:text-white min-h-[56px] flex items-center">
-                                    <PropertyPreview
-                                        propertyKey={key}
-                                        value={value}
-                                        // entity={entity}
-                                        property={property}
-                                        size={"medium"}/>
-                                </div>
-                            </div>
-                        )
-                    })}
+
+                <PropertyCollectionView data={entity.values} properties={properties} size={"medium"}/>
+
             </div>
         </div>
     );