@firecms/core 3.0.0-beta.6 → 3.0.0-beta.8

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -5,7 +5,6 @@ import { ErrorBoundary } from "../ErrorBoundary";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
 import { CellRendererParams, VirtualTableColumn } from "../VirtualTable";
 import { getValueInPath } from "../../util";
-import { getRowHeight } from "../VirtualTable/common";
 import { EntityCollectionRowActions } from "./EntityCollectionRowActions";
 import { CollectionTableToolbar } from "./internal/CollectionTableToolbar";
 import { EntityCollectionTableProps } from "./EntityCollectionTableProps";
@@ -15,6 +14,8 @@ import { renderSkeletonText } from "../../preview";
 import { propertiesToColumns } from "./column_utils";
 import { ErrorView } from "../ErrorView";
 import { SelectableTable } from "../SelectableTable/SelectableTable";
+import { cls } from "@firecms/ui";
+import { getRowHeight } from "../common/table_height";
 
 /**
  * This component is in charge of rendering a collection table with a high
@@ -42,6 +43,8 @@ import { SelectableTable } from "../SelectableTable/SelectableTable";
  */
 export const EntityCollectionTable = function EntityCollectionTable<M extends Record<string, any>, UserType extends User>
 ({
+     className,
+     style,
      forceFilter,
      actionsStart,
      actions,
@@ -72,13 +75,13 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
      emptyComponent,
      getIdColumnWidth,
      onTextSearchClick,
-     textSearchLoading
+     textSearchLoading,
+     enablePopupIcon
  }: EntityCollectionTableProps<M>) {
 
     const ref = useRef<HTMLDivElement>(null);
 
     const largeLayout = useLargeLayout();
-    const disabledFilterChange = Boolean(forceFilter);
     const selectedEntities = (selectionController?.selectedEntities?.length > 0 ? selectionController?.selectedEntities : highlightedEntities)?.filter(Boolean);
 
     const context: FireCMSContext<UserType> = useFireCMSContext();
@@ -117,10 +120,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
         const propertyKey = column.key;
 
         let disabled = column.custom?.disabled;
-        const propertyValue = entity.values ? getValueInPath(entity.values, propertyKey) : undefined;
         const property = getPropertyFor?.({
             propertyKey,
-            propertyValue,
             entity
         }) ?? column.custom.resolvedProperty;
         if (!property?.disabled) {
@@ -147,6 +148,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                         height={getRowHeight(size)}
                         entity={entity}
                         disabled={disabled}
+                        enablePopupIcon={enablePopupIcon}
                         path={entity.path}/>
                     : renderSkeletonText()
                 }
@@ -207,7 +209,6 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
             properties,
             sortable,
             forceFilter,
-            disabledFilter: disabledFilterChange,
             AdditionalHeaderWidget
         });
 
@@ -290,7 +291,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
     return (
 
         <div ref={ref}
-             className="h-full w-full flex flex-col bg-white dark:bg-gray-950">
+             style={style}
+             className={cls("h-full w-full flex flex-col bg-white dark:bg-gray-950", className)}>
 
             <CollectionTableToolbar
                 onTextSearch={textSearchEnabled ? onTextSearch : undefined}

package/src/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import {
     AdditionalFieldDelegate,
     CollectionSize,
-    Entity, EntityCollection,
+    Entity,
     EntityTableController,
     FilterValues,
     ResolvedProperties,
@@ -12,13 +12,16 @@ import {
 } from "../../types";
 import { OnCellValueChange, OnColumnResizeParams, UniqueFieldValidator } from "../common/types";
 
-
 /**
  * @group Collection components
  */
 export type EntityCollectionTableProps<M extends Record<string, any>,
     UserType extends User = User> = {
 
+    className?: string;
+
+    style?: React.CSSProperties;
+
     /**
      * Display these entities as selected
      */
@@ -131,15 +134,16 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
     onTextSearchClick?: () => void;
 
     textSearchLoading?: boolean;
-}
+
+    enablePopupIcon: boolean;
+};
 
 export type GetPropertyForProps<M extends Record<string, any>> = {
     propertyKey: string,
-    propertyValue: any,
     entity: Entity<M>
 };
 
 export type PropertyColumnConfig = {
     key: string,
-    disabled: boolean,
+    disabled?: boolean,
 };

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -24,14 +24,13 @@ import { getPreviewSizeFrom } from "../../preview/util";
 import { isReadOnly } from "../../util";
 
 import { CustomFieldValidator, mapPropertyToYup } from "../../form/validation";
-import { useFireCMSContext } from "../../hooks";
 
 import { EntityTableCell } from "./internal/EntityTableCell";
 import { EntityTableCellActions } from "./internal/EntityTableCellActions";
 
-import { getRowHeight } from "../VirtualTable/common";
 import { useSelectableTableController } from "../SelectableTable/SelectableTableContext";
 import { useClearRestoreValue } from "../../form/useClearRestoreValue";
+import { getRowHeight } from "../common/table_height";
 
 export interface PropertyTableCellProps<T extends CMSType> {
     propertyKey: string;
@@ -46,6 +45,7 @@ export interface PropertyTableCellProps<T extends CMSType> {
     entity: Entity<any>;
     path: string;
     disabled: boolean;
+    enablePopupIcon?: boolean;
 }
 
 function isStorageProperty(property: ResolvedProperty) {
@@ -74,11 +74,10 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                                                                      path,
                                                                                      entity,
                                                                                      readonly,
-                                                                                     disabled: disabledProp
+                                                                                     disabled: disabledProp,
+                                                                                     enablePopupIcon = true
                                                                                  }: PropertyTableCellProps<T>) {
 
-        const context = useFireCMSContext();
-
         const {
             onValueChange,
             size,
@@ -140,15 +139,19 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                     setValidationError(undefined);
                     internalValueRef.current = value;
                     if (onValueChange) {
-                        onValueChange({
-                            value,
-                            propertyKey,
-                            setError,
-                            onValueUpdated,
-                            entity,
-                            fullPath: path,
-                            context
-                        });
+                        try {
+                            onValueChange({
+                                value,
+                                propertyKey,
+                                setError,
+                                onValueUpdated,
+                                data: entity,
+                            });
+                        } catch (e:any) {
+                            console.error("onValueChange error", e);
+                            setError(e);
+                        }
+
                     }
                 })
                 .catch((e) => {
@@ -344,6 +347,8 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                              path={property.path}
                                              multiselect={false}
                                              previewProperties={property.previewProperties}
+                                             includeId={property.includeId}
+                                             includeEntityLink={property.includeEntityLink}
                                              title={property.name}
                                              forceFilter={property.forceFilter}
                         />;
@@ -388,6 +393,8 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                     previewProperties={arrayProperty.of.previewProperties}
                                     title={arrayProperty.name}
                                     forceFilter={arrayProperty.of.forceFilter}
+                                    includeId={arrayProperty.of.includeId}
+                                    includeEntityLink={arrayProperty.of.includeEntityLink}
                                 />;
                         }
                         allowScroll = false;
@@ -399,7 +406,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
 
         if (!innerComponent) {
             allowScroll = false;
-            showExpandIcon = selected && !innerComponent && !disabled && !readOnlyProperty;
+            showExpandIcon = enablePopupIcon && selected && !innerComponent && !disabled && !readOnlyProperty;
             innerComponent = (
                 <PropertyPreview width={width}
                                  height={height}

package/src/components/EntityCollectionTable/column_utils.tsx

@@ -21,7 +21,6 @@ export interface PropertiesToColumnsParams<M extends Record<string, any>> {
     properties: ResolvedProperties<M>;
     sortable?: boolean;
     forceFilter?: FilterValues<keyof M extends string ? keyof M : never>;
-    disabledFilter?: boolean;
     AdditionalHeaderWidget?: React.ComponentType<{
         property: ResolvedProperty,
         propertyKey: string,
@@ -29,7 +28,8 @@ export interface PropertiesToColumnsParams<M extends Record<string, any>> {
     }>;
 }
 
-export function propertiesToColumns<M extends Record<string, any>>({ properties, sortable, forceFilter, disabledFilter, AdditionalHeaderWidget }: PropertiesToColumnsParams<M>): VirtualTableColumn[] {
+export function propertiesToColumns<M extends Record<string, any>>({ properties, sortable, forceFilter, AdditionalHeaderWidget }: PropertiesToColumnsParams<M>): VirtualTableColumn[] {
+    const disabledFilter = Boolean(forceFilter);
     return Object.entries<ResolvedProperty>(properties)
         .flatMap(([key, property]) => getColumnKeysForProperty(property, key))
         .map(({
@@ -45,7 +45,7 @@ export function propertiesToColumns<M extends Record<string, any>>({ properties,
                 align: getTableCellAlignment(property),
                 icon: getIconForProperty(property, "small"),
                 title: property.name ?? key as string,
-                sortable: sortable && (forceFilter ? Object.keys(forceFilter).includes(key) : true),
+                sortable: sortable,
                 filter: !disabledFilter && filterable,
                 width: getTablePropertyColumnWidth(property),
                 resizable: true,

package/src/components/EntityCollectionTable/fields/TableReferenceField.tsx

@@ -22,6 +22,8 @@ type TableReferenceFieldProps = {
     title?: string;
     path: string;
     forceFilter?: FilterValues<string>;
+    includeId?: boolean;
+    includeEntityLink?: boolean;
 };
 
 export function TableReferenceField(props: TableReferenceFieldProps) {
@@ -55,7 +57,9 @@ export const TableReferenceFieldSuccess = React.memo(
             title,
             disabled,
             forceFilter,
-            collection
+            collection,
+            includeId,
+            includeEntityLink
         } = props;
 
         const onSingleEntitySelected = useCallback((entity: Entity<any>) => {
@@ -100,6 +104,8 @@ export const TableReferenceFieldSuccess = React.memo(
                     hover={!disabled}
                     disabled={!path}
                     previewProperties={previewProperties}
+                    includeId={includeId}
+                    includeEntityLink={includeEntityLink}
                 />;
             else
                 return <EntityPreviewContainer
@@ -122,6 +128,8 @@ export const TableReferenceFieldSuccess = React.memo(
                                 hover={!disabled}
                                 disabled={!path}
                                 previewProperties={previewProperties}
+                                includeId={includeId}
+                                includeEntityLink={includeEntityLink}
                             />
                         </div>
                     )

package/src/components/EntityCollectionTable/fields/TableStorageUpload.tsx

@@ -9,7 +9,7 @@ import { useSnackbarController, useStorageSource } from "../../../hooks";
 import { getThumbnailMeasure } from "../../../preview/util";
 import { StorageFieldItem, useStorageUploadController } from "../../../util/useStorageUploadController";
 import { StorageUploadProgress } from "../../../form/components/StorageUploadProgress";
-import { cn, EditIcon, IconButton, Typography } from "@firecms/ui";
+import { cls, EditIcon, IconButton, Typography } from "@firecms/ui";
 import { EntityTableCellActions } from "../internal/EntityTableCellActions";
 
 const dropZoneClasses = "max-w-full box-border relative pt-[2px] items-center border border-transparent outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
@@ -207,7 +207,7 @@ function StorageUpload({
              onMouseEnter={() => setOnHover(true)}
              onMouseMove={() => setOnHover(true)}
              onMouseLeave={() => setOnHover(false)}
-             className={cn(dropZoneClasses,
+             className={cls(dropZoneClasses,
                  "relative w-full h-full flex",
                  `justify-${hasValue ? "start" : "center"}`,
                  isDragActive ? activeDropClasses : "",

package/src/components/EntityCollectionTable/internal/CollectionTableToolbar.tsx

@@ -3,7 +3,7 @@ import React, { useEffect } from "react";
 import {
     Button,
     CircularProgress,
-    cn,
+    cls,
     defaultBorderMixin,
     FilterListOffIcon,
     SearchBar,
@@ -71,7 +71,7 @@ export function CollectionTableToolbar({
 
     return (
         <div
-            className={cn(defaultBorderMixin, "no-scrollbar min-h-[56px] overflow-x-auto px-2 md:px-4 bg-gray-50 dark:bg-gray-900 border-b flex flex-row justify-between items-center w-full")}>
+            className={cls(defaultBorderMixin, "no-scrollbar min-h-[56px] overflow-x-auto px-2 md:px-4 bg-gray-50 dark:bg-gray-900 border-b flex flex-row justify-between items-center w-full")}>
 
             <div className="flex items-center gap-2 md:mr-4 mr-2">
 

package/src/components/EntityCollectionTable/internal/EntityTableCell.tsx

@@ -2,10 +2,9 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 
 import useMeasure from "react-use-measure";
 
-import { VirtualTableSize } from "../../VirtualTable";
-import { getRowHeight } from "../../VirtualTable/common";
-import { cn, RemoveCircleIcon, Tooltip } from "@firecms/ui";
+import { cls, RemoveCircleIcon, Tooltip } from "@firecms/ui";
 import { ErrorBoundary } from "../../../components";
+import { getRowHeight, TableSize } from "../../common/table_height";
 
 interface EntityTableCellProps {
     children: React.ReactNode;
@@ -19,7 +18,7 @@ interface EntityTableCellProps {
     error?: Error;
     allowScroll?: boolean;
     align: "right" | "left" | "center";
-    size: VirtualTableSize;
+    size: TableSize;
     disabledTooltip?: string;
     width: number;
     showExpandIcon?: boolean;
@@ -47,7 +46,7 @@ const TableCellInner = ({
                         }: TableCellInnerProps) => {
     return (
         <div
-            className={cn("flex flex-col max-h-full w-full",
+            className={cls("flex flex-col max-h-full w-full",
                 {
                     "items-start": faded || scrollable
                 })}
@@ -186,7 +185,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
 
         return (
             <div
-                className={cn(
+                className={cls(
                     "transition-colors duration-100 ease-in-out",
                     `flex relative h-full rounded-md p-${p} border border-4  border-opacity-75`,
                     onHover && !disabled ? "bg-gray-50 dark:bg-gray-900" : "",

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -41,7 +41,7 @@ interface PopupFormFieldProps<M extends Record<string, any>> {
      * Callback when the value of a cell has been edited
      * @param params
      */
-    onCellValueChange?: (params: OnCellValueChangeParams<any, M>) => Promise<void> | void;
+    onCellValueChange?: (params: OnCellValueChangeParams<any, any>) => Promise<void> | void;
 }
 
 export function PopupFormField<M extends Record<string, any>>(props: PopupFormFieldProps<M>) {
@@ -205,12 +205,10 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             return onCellValueChange({
                 value: values[propertyKey as string],
                 propertyKey: propertyKey as string,
-                entity,
+                data: entity,
                 setError: setSavingError,
                 onValueUpdated: () => {
                 },
-                fullPath: path,
-                context: fireCMSContext
             });
         }
         return Promise.resolve();
@@ -266,7 +264,8 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         values,
         path,
         setFieldValue,
-        save: saveValue
+        save: saveValue,
+        formex
     };
 
     const property: ResolvedProperty<any> | undefined = propertyKey && getPropertyInPath(collection.properties, propertyKey as string);

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -7,7 +7,7 @@ import {
     CollectionSize,
     Entity,
     EntityAction,
-    EntityCollection,
+    EntityCollection, EntityTableController,
     FilterValues,
     PartialEntityCollection,
     PropertyOrBuilder,
@@ -35,6 +35,7 @@ import {
     useAuthController,
     useCustomizationController,
     useDataSource,
+    useFireCMSContext,
     useLargeLayout,
     useNavigationController,
     useSideEntityController
@@ -44,7 +45,7 @@ import { EntityCollectionViewActions } from "./EntityCollectionViewActions";
 import {
     AddIcon,
     Button,
-    cn,
+    cls,
     IconButton,
     KeyboardTabIcon,
     Markdown,
@@ -65,11 +66,7 @@ import {
 } from "../common";
 import { PopupFormField } from "../EntityCollectionTable/internal/popup_field/PopupFormField";
 import { GetPropertyForProps } from "../EntityCollectionTable/EntityCollectionTableProps";
-import {
-    copyEntityAction,
-    deleteEntityAction,
-    editEntityAction
-} from "../EntityCollectionTable/internal/default_entity_actions";
+import { copyEntityAction, deleteEntityAction, editEntityAction } from "../common/default_entity_actions";
 import { DeleteEntityDialog } from "../DeleteEntityDialog";
 import { useAnalyticsController } from "../../hooks/useAnalyticsController";
 import { useSelectionController } from "./useSelectionController";
@@ -94,7 +91,9 @@ export type EntityCollectionViewProps<M extends Record<string, any>> = {
      * Whether this is a subcollection or not.
      */
     isSubCollection?: boolean;
+
     className?: string;
+
 } & EntityCollection<M>;
 
 /**
@@ -131,6 +130,7 @@ export const EntityCollectionView = React.memo(
                                                                  }: EntityCollectionViewProps<M>
     ) {
 
+        const context = useFireCMSContext();
         const fullPath = fullPathProp ?? collectionProp.path;
         const dataSource = useDataSource(collectionProp);
         const navigation = useNavigationController();
@@ -196,8 +196,7 @@ export const EntityCollectionView = React.memo(
 
         const tableController = useDataSourceEntityCollectionTableController<M>({
             fullPath,
-            collection: collectionRef.current,
-            entitiesDisplayedFirst: [],
+            collection,
             lastDeleteTimestamp
         });
 
@@ -267,6 +266,7 @@ export const EntityCollectionView = React.memo(
             fullPath: string,
             parentCollectionIds: string[],
             collection: EntityCollection;
+            tableController: EntityTableController;
         }> | undefined
 
         // we are only using the first plugin that implements this
@@ -311,13 +311,11 @@ export const EntityCollectionView = React.memo(
             [fullPath]);
 
         const onValueChange: OnCellValueChange<any, any> = ({
-                                                                fullPath,
-                                                                context,
                                                                 value,
                                                                 propertyKey,
                                                                 onValueUpdated,
                                                                 setError,
-                                                                entity,
+                                                                data: entity,
                                                             }) => {
 
             const updatedValues = setIn({ ...entity.values }, propertyKey, value);
@@ -334,7 +332,6 @@ export const EntityCollectionView = React.memo(
             return saveEntityWithCallbacks({
                 ...saveProps,
                 collection,
-                callbacks: collection.callbacks,
                 dataSource,
                 context,
                 onSaveSuccess: () => {
@@ -359,7 +356,6 @@ export const EntityCollectionView = React.memo(
 
         const getPropertyFor = useCallback(({
                                                 propertyKey,
-                                                propertyValue,
                                                 entity
                                             }: GetPropertyForProps<M>) => {
             let propertyOrBuilder: PropertyOrBuilder<any, M> | undefined = getPropertyInPath<M>(collection.properties, propertyKey);
@@ -373,13 +369,12 @@ export const EntityCollectionView = React.memo(
             return resolveProperty({
                 propertyKey,
                 propertyOrBuilder,
-                path: fullPath,
-                propertyValue,
+                path: entity.path,
                 values: entity.values,
                 entityId: entity.id,
                 fields: customizationController.propertyConfigs
             });
-        }, [collection.properties, customizationController.propertyConfigs, fullPath, resolvedCollection.properties]);
+        }, [collection.properties, customizationController.propertyConfigs, resolvedCollection.properties]);
 
         const displayedColumnIds = useColumnIds(resolvedCollection, true);
 
@@ -419,7 +414,7 @@ export const EntityCollectionView = React.memo(
                     Builder: ({ entity }) => {
                         const collectionsWithPath = navigation.getParentReferencesFromPath(entity.path);
                         return (
-                            <>
+                            <div className={"flex flex-col gap-2 w-full"}>
                                 {collectionsWithPath.map((reference) => {
                                     return (
                                         <ReferencePreview
@@ -428,7 +423,7 @@ export const EntityCollectionView = React.memo(
                                             size={"tiny"}/>
                                     );
                                 })}
-                            </>
+                            </div>
                         );
                     }
                 }]
@@ -570,6 +565,7 @@ export const EntityCollectionView = React.memo(
                             property={property}
                             fullPath={fullPath}
                             collection={collection}
+                            tableController={tableController}
                             parentCollectionIds={parentCollectionIds ?? []}/>;
                     })}
             </>;
@@ -580,7 +576,8 @@ export const EntityCollectionView = React.memo(
                 if (typeof AddColumnComponent === "function")
                     return <AddColumnComponent fullPath={fullPath}
                                                parentCollectionIds={parentCollectionIds ?? []}
-                                               collection={collection}/>;
+                                               collection={collection}
+                                               tableController={tableController}/>;
                 return null;
             }
             : undefined;
@@ -597,12 +594,13 @@ export const EntityCollectionView = React.memo(
         });
 
         return (
-            <div className={cn("overflow-hidden h-full w-full rounded-md", className)}
+            <div className={cls("overflow-hidden h-full w-full rounded-md", className)}
                  ref={containerRef}>
                 <EntityCollectionTable
                     key={`collection_table_${fullPath}`}
                     additionalFields={additionalFields}
                     tableController={tableController}
+                    enablePopupIcon={true}
                     displayedColumnIds={displayedColumnIds}
                     onSizeChanged={onSizeChanged}
                     onEntityClick={onEntityClick}
@@ -708,6 +706,7 @@ export const EntityCollectionView = React.memo(
             equal(a.initialSort, b.initialSort) &&
             equal(a.textSearchEnabled, b.textSearchEnabled) &&
             equal(a.additionalFields, b.additionalFields) &&
+            equal(a.sideDialogWidth, b.sideDialogWidth) &&
             equal(a.forceFilter, b.forceFilter);
     }) as React.FunctionComponent<EntityCollectionViewProps<any>>
 
@@ -747,6 +746,7 @@ function EntitiesCount({
 
     useEffect(() => {
         if (onCountChange) {
+            setError(undefined);
             onCountChange(count ?? 0);
         }
     }, [onCountChange, count]);
@@ -798,7 +798,7 @@ function EntityIdHeaderWidget({
                           if (!searchString) return;
                           setOpenPopup(false);
                           return sideEntityController.open({
-                              entityId: searchString,
+                              entityId: searchString.trim(),
                               path,
                               collection,
                               updateUrl: true,
@@ -811,11 +811,13 @@ function EntityIdHeaderWidget({
                             autoFocus={openPopup}
                             placeholder={"Find entity by ID"}
                             // size={"small"}
-                            onChange={(e) => setSearchString(e.target.value)}
+                            onChange={(e) => {
+                                setSearchString(e.target.value);
+                            }}
                             value={searchString}
                             className={"flex-grow bg-transparent outline-none p-1"}/>
                         <Button variant={"outlined"}
-                                disabled={!searchString}
+                                disabled={!(searchString.trim())}
                                 type={"submit"}
                         >Go</Button>
                     </div>

package/src/components/EntityPreview.tsx

@@ -10,7 +10,7 @@ import {
     getValueInPath,
     resolveCollection
 } from "../util";
-import { cn, defaultBorderMixin, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import { cls, defaultBorderMixin, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
 import { PreviewSize, PropertyPreview, SkeletonPropertyComponent } from "../preview";
 import { useCustomizationController, useNavigationController, useSideEntityController } from "../hooks";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
@@ -23,7 +23,8 @@ export type EntityPreviewProps = {
     previewProperties?: string[],
     disabled: undefined | boolean,
     entity: Entity<any>,
-    includeEntityNavigation?: boolean,
+    includeId?: boolean,
+    includeEntityLink?: boolean,
     onClick?: (e: React.SyntheticEvent) => void;
 };
 
@@ -39,7 +40,8 @@ export function EntityPreview({
                                   previewProperties,
                                   onClick,
                                   size,
-                                  includeEntityNavigation,
+                                  includeId = true,
+                                  includeEntityLink = true,
                                   entity
                               }: EntityPreviewProps) {
 
@@ -75,7 +77,7 @@ export function EntityPreview({
                                    hover={disabled ? undefined : hover}
                                    size={size}>
         {imageProperty && (
-            <div className={cn("w-10 h-10 mr-2 shrink-0 grow-0", size === "tiny" ? "my-0.5" : "m-2 self-start")}>
+            <div className={cls("w-10 h-10 mr-2 shrink-0 grow-0", size === "tiny" ? "my-0.5" : "m-2 self-start")}>
                 <PropertyPreview property={imageProperty}
                                  propertyKey={imagePropertyKey as string}
                                  size={"tiny"}
@@ -85,7 +87,7 @@ export function EntityPreview({
 
         <div className={"flex flex-col flex-grow w-full m-1"}>
 
-            {size !== "tiny" && (
+            {size !== "tiny" && includeId && (
                 entity
                     ? <div className={`${
                         size !== "medium"
@@ -140,7 +142,7 @@ export function EntityPreview({
 
         </div>
 
-        {entity && includeEntityNavigation &&
+        {entity && includeEntityLink &&
             <Tooltip title={`See details for ${entity.id}`}
                      className={size !== "tiny" ? "self-start" : ""}>
                 <IconButton
@@ -195,7 +197,7 @@ const EntityPreviewContainerInner = React.forwardRef<HTMLDivElement, EntityPrevi
             // @ts-ignore
             tabindex: 0
         }}
-        className={cn(
+        className={cls(
             "bg-white dark:bg-gray-900",
             fullwidth ? "w-full" : "",
             "items-center",