@firecms/core 3.0.0-beta.10 → 3.0.0-beta.12

package/src/components/DeleteEntityDialog.tsx

@@ -1,6 +1,6 @@
 import { Entity, EntityCallbacks, EntityCollection } from "../types";
 import React, { useCallback, useMemo, useState } from "react";
-import { Button, CircularProgress, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";
+import { Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle } from "@firecms/ui";
 import {
     deleteEntityWithCallbacks,
     useCustomizationController,
@@ -40,25 +40,17 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
     const snackbarController = useSnackbarController();
     const [loading, setLoading] = useState(false);
 
-    const [entityOrEntities, setUsedEntityOrEntities] = React.useState<Entity<M> | Entity<M>[]>();
-
-    const [multipleEntities, setMultipleEntities] = React.useState<boolean>();
     const context = useFireCMSContext();
+    const entityOrEntities = Array.isArray(entityOrEntitiesToDelete) && entityOrEntitiesToDelete.length === 1
+        ? entityOrEntitiesToDelete[0]
+        : entityOrEntitiesToDelete;
 
-    React.useEffect(() => {
-        if (entityOrEntitiesToDelete) {
-            const revisedEntityOrEntities = Array.isArray(entityOrEntitiesToDelete) && entityOrEntitiesToDelete.length === 1
-                ? entityOrEntitiesToDelete[0]
-                : entityOrEntitiesToDelete;
-            setUsedEntityOrEntities(revisedEntityOrEntities);
-            setMultipleEntities(Array.isArray(revisedEntityOrEntities));
-        }
-    }, [entityOrEntitiesToDelete]);
+    const multipleEntities = Array.isArray(entityOrEntities);
 
     const resolvedCollection = useMemo(() => resolveCollection<M>({
         collection,
         path,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     }), [collection, path]);
 
     const handleCancel = useCallback(() => {
@@ -181,16 +173,15 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
             open={open}
             onOpenChange={(open) => !open ? onClose() : undefined}
         >
+            <DialogTitle id="delete-dialog-title">
+                {dialogTitle}
+            </DialogTitle>
             <DialogContent fullHeight={true}>
-                <Typography variant={"subtitle2"} className={"p-4"}>
-                    {dialogTitle}
-                </Typography>
-
                 {!multipleEntities && <div className={"p-4"}>{content}</div>}
             </DialogContent>
             <DialogActions>
 
-                {loading && <CircularProgress size={"small"}/>}
+                {loading && <CircularProgress size={"smallest"}/>}
 
                 <Button onClick={handleCancel}
                         disabled={loading}

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -1,8 +1,20 @@
 import React, { MouseEvent, useCallback } from "react";
 
 import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../types";
-import { Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip } from "@firecms/ui";
+import {
+    Checkbox,
+    Chip,
+    cls,
+    EditIcon,
+    IconButton,
+    Menu,
+    MenuItem,
+    MoreVertIcon,
+    Skeleton,
+    Tooltip
+} from "@firecms/ui";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
+import { hasEntityInCache } from "../../util/entity_cache";
 
 /**
  *
@@ -32,23 +44,25 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                                                                   actions = [],
                                                                                   hideId,
                                                                                   selectionController,
+                                                                                  openEntityMode
                                                                               }:
-                                                                                  {
-                                                                                      entity: Entity<any>,
-                                                                                      collection?: EntityCollection<any>,
-                                                                                      fullPath?: string,
-                                                                                      width: number,
-                                                                                      frozen?: boolean,
-                                                                                      size: CollectionSize,
-                                                                                      isSelected?: boolean,
-                                                                                      selectionEnabled?: boolean,
-                                                                                      actions?: EntityAction[],
-                                                                                      hideId?: boolean,
-                                                                                      onCollectionChange?: () => void,
-                                                                                      selectionController?: SelectionController;
-                                                                                      highlightEntity?: (entity: Entity<any>) => void;
-                                                                                      unhighlightEntity?: (entity: Entity<any>) => void;
-                                                                                  }) {
+                                                                              {
+                                                                                  entity: Entity<any>,
+                                                                                  collection?: EntityCollection<any>,
+                                                                                  fullPath?: string,
+                                                                                  width: number,
+                                                                                  frozen?: boolean,
+                                                                                  size: CollectionSize,
+                                                                                  isSelected?: boolean,
+                                                                                  selectionEnabled?: boolean,
+                                                                                  actions?: EntityAction[],
+                                                                                  hideId?: boolean,
+                                                                                  onCollectionChange?: () => void,
+                                                                                  selectionController?: SelectionController;
+                                                                                  highlightEntity?: (entity: Entity<any>) => void;
+                                                                                  unhighlightEntity?: (entity: Entity<any>) => void;
+                                                                                  openEntityMode: "side_panel" | "full_screen";
+                                                                              }) {
 
     const largeLayout = useLargeLayout();
 
@@ -63,12 +77,16 @@ 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);
     return (
         <div
             className={cls(
-                "h-full flex items-center justify-center flex-col bg-gray-50 dark:bg-gray-900 bg-opacity-90 dark:bg-opacity-90 z-10",
+                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 dark:bg-opacity-90 z-10",
                 frozen ? "sticky left-0" : ""
             )}
+            onClick={useCallback((event: any) => {
+                event.stopPropagation();
+            }, [])}
             style={{
                 width,
                 position: frozen ? "sticky" : "initial",
@@ -95,6 +113,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                         highlightEntity,
                                         unhighlightEntity,
                                         onCollectionChange,
+                                        openEntityMode: openEntityMode ?? collection?.openEntityMode
                                     });
                                 }}
                                 size={largeLayout ? "medium" : "small"}>
@@ -123,6 +142,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                             highlightEntity,
                                             unhighlightEntity,
                                             onCollectionChange,
+                                            openEntityMode: openEntityMode ?? collection?.openEntityMode
                                         });
                                     }}>
                                     {action.icon}
@@ -145,11 +165,15 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
 
             {!hideId && size !== "xs" && (
                 <div
-                    className="w-[138px] text-center overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2"
+                    className="w-[138px] overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2 align-center flex items-center justify-center gap-1"
                     onClick={(event) => {
                         event.stopPropagation();
                     }}>
-
+                    {hasDraft && <Tooltip title={"Unsaved changes"} className={"inline"}>
+                        <Chip colorScheme={"orangeDarker"} className={"p-0.5"}>
+                            <EditIcon size={12}/>
+                        </Chip>
+                    </Tooltip>}
                     {entity
                         ? entity.id
                         : <Skeleton/>

package/src/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -34,14 +34,14 @@ import { getRowHeight } from "../common/table_height";
  *
  * The data displayed in the table is managed by a {@link EntityTableController}.
  * You can build the default, bound to a path in the datasource, by using the hook
- * {@link useDataSourceEntityCollectionTableController}
+ * {@link useDataSourceTableController}
  *
  * @see EntityCollectionTableProps
  * @see EntityCollectionView
  * @see VirtualTable
  * @group Components
  */
-export const EntityCollectionTable = function EntityCollectionTable<M extends Record<string, any>, UserType extends User>
+export const EntityCollectionTable = function EntityCollectionTable<M extends Record<string, any> = any, USER extends User = any>
 ({
      className,
      style,
@@ -57,6 +57,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
      highlightedEntities,
      onEntityClick,
      onColumnResize,
+     initialScroll,
+     onScroll,
      onSizeChanged,
      textSearchEnabled = false,
      hoverRow = true,
@@ -76,7 +78,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
      getIdColumnWidth,
      onTextSearchClick,
      textSearchLoading,
-     enablePopupIcon
+     enablePopupIcon,
+     openEntityMode = "side_panel"
  }: EntityCollectionTableProps<M>) {
 
     const ref = useRef<HTMLDivElement>(null);
@@ -84,12 +87,10 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
     const largeLayout = useLargeLayout();
     const selectedEntities = (selectionController?.selectedEntities?.length > 0 ? selectionController?.selectedEntities : highlightedEntities)?.filter(Boolean);
 
-    const context: FireCMSContext<UserType> = useFireCMSContext();
+    const context: FireCMSContext<USER> = useFireCMSContext();
 
     const [size, setSize] = React.useState<CollectionSize>(defaultSize ?? "m");
 
-    const selectedEntityIds = selectedEntities?.map(e => e.id);
-
     const updateSize = useCallback((size: CollectionSize) => {
         if (onSizeChanged)
             onSizeChanged(size);
@@ -98,12 +99,12 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
     const onTextSearch = useCallback((newSearchString?: string) => tableController.setSearchString?.(newSearchString), []);
 
-    const additionalFieldsMap: Record<string, AdditionalFieldDelegate<M, UserType>> = useMemo(() => {
+    const additionalFieldsMap: Record<string, AdditionalFieldDelegate<M, USER>> = useMemo(() => {
         return (additionalFields
             ? additionalFields
                 .map((aC) => ({ [aC.key]: aC as AdditionalFieldDelegate<M, any> }))
                 .reduce((a, b) => ({ ...a, ...b }), {})
-            : {}) as Record<string, AdditionalFieldDelegate<M, UserType>>;
+            : {}) as Record<string, AdditionalFieldDelegate<M, USER>>;
     }, [additionalFields]);
 
     const customFieldValidator: CustomFieldValidator | undefined = uniqueFieldValidator;
@@ -176,12 +177,14 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
             throw new Error("When using additional fields you need to provide a Builder or a value");
         }
 
-        const child = Builder
+        const child: React.ReactNode = Builder
             ? <Builder entity={entity} context={context}/>
-            : <>{additionalField.value?.({
-                entity,
-                context
-            })}</>;
+            : <>
+                {additionalField.value?.({
+                    entity,
+                    context
+                })?.toString()}
+            </>;
 
         return (
             <EntityTableCell
@@ -202,7 +205,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
             </EntityTableCell>
         );
 
-    }, [size, selectedEntityIds]);
+    }, [size]);
 
     const collectionColumns: VirtualTableColumn[] = (() => {
         const columnsResult: VirtualTableColumn[] = propertiesToColumns({
@@ -265,7 +268,8 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                                                        width={column.width}
                                                        frozen={column.frozen}
                                                        isSelected={false}
-                                                       size={size}/>;
+                                                       size={size}
+                                                       openEntityMode={openEntityMode}/>;
             } else if (additionalFieldsMap[columnKey]) {
                 return additionalCellRenderer(props);
             } else if (props.columnIndex < columns.length + 1) {
@@ -292,7 +296,7 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
 
         <div ref={ref}
              style={style}
-             className={cls("h-full w-full flex flex-col bg-white dark:bg-gray-950", className)}>
+             className={cls("h-full w-full flex flex-col bg-white dark:bg-surface-950", className)}>
 
             <CollectionTableToolbar
                 onTextSearch={textSearchEnabled ? onTextSearch : undefined}
@@ -310,9 +314,11 @@ export const EntityCollectionTable = function EntityCollectionTable<M extends Re
                              inlineEditing={inlineEditing}
                              cellRenderer={cellRenderer}
                              onEntityClick={onEntityClick}
-                             highlightedRow={useCallback((entity: Entity<M>) => selectedEntityIds?.includes(entity.id) ?? false, [selectedEntityIds])}
+                             highlightedRow={(entity: Entity<M>) => Boolean(selectedEntities?.find(e => e.id === entity.id && e.path === entity.path))}
                              tableController={tableController}
                              onValueChange={onValueChange}
+                             initialScroll={initialScroll}
+                             onScroll={onScroll}
                              onColumnResize={onColumnResize}
                              hoverRow={hoverRow}
                              filterable={filterable}

package/src/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -16,7 +16,7 @@ import { OnCellValueChange, OnColumnResizeParams, UniqueFieldValidator } from ".
  * @group Collection components
  */
 export type EntityCollectionTableProps<M extends Record<string, any>,
-    UserType extends User = User> = {
+    USER extends User = User> = {
 
     className?: string;
 
@@ -72,6 +72,21 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
      */
     onColumnResize?(params: OnColumnResizeParams): void;
 
+    /**
+     * Initial scroll position
+     */
+    initialScroll?: number;
+
+    /**
+     * Callback when the table is scrolled
+     * @param props
+     */
+    onScroll?: (props: {
+        scrollDirection: "forward" | "backward",
+        scrollOffset: number,
+        scrollUpdateWasRequested: boolean
+    }) => void;
+
     /**
      * Callback when the selected size of the table is changed
      */
@@ -90,7 +105,7 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
 
     /**
      * Controller holding the logic for the table
-     * {@link useDataSourceEntityCollectionTableController}
+     * {@link useDataSourceTableController}
      * {@link EntityTableController}
      */
     tableController: EntityTableController<M>;
@@ -103,7 +118,7 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
 
     inlineEditing?: boolean;
 
-    additionalFields?: AdditionalFieldDelegate<M, UserType>[];
+    additionalFields?: AdditionalFieldDelegate<M, USER>[];
 
     defaultSize?: CollectionSize;
 
@@ -136,6 +151,8 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
     textSearchLoading?: boolean;
 
     enablePopupIcon: boolean;
+
+    openEntityMode?: "side_panel" | "full_screen";
 };
 
 export type GetPropertyForProps<M extends Record<string, any>> = {

package/src/components/EntityCollectionTable/PropertyTableCell.tsx

@@ -89,8 +89,8 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
         } = useSelectableTableController();
 
         const selected = selectedCell?.propertyKey === propertyKey &&
-            selectedCell?.entity.path === entity.path &&
-            selectedCell?.entity.id === entity.id;
+            selectedCell?.entityPath === entity.path &&
+            selectedCell?.entityId === entity.id;
 
         const [internalValue, setInternalValue] = useState<any | null>(value);
         const internalValueRef = useRef(value);
@@ -193,7 +193,8 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 select({
                     width,
                     height,
-                    entity,
+                    entityPath: entity.path,
+                    entityId: entity.id,
                     cellRect,
                     propertyKey: propertyKey as Extract<keyof M, string>
                 });
@@ -209,7 +210,8 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                 setPopupCell({
                     width,
                     height,
-                    entity,
+                    entityPath: entity.path,
+                    entityId: entity.id,
                     cellRect,
                     propertyKey: propertyKey as Extract<keyof M, string>
                 });

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

@@ -8,7 +8,7 @@ import { getPreviewSizeFrom } from "../../../preview/util";
 import { getReferenceFrom, IconForView } from "../../../util";
 import { useCustomizationController, useNavigationController, useReferenceDialog } from "../../../hooks";
 import { ErrorView } from "../../ErrorView";
-import { cls } from "@firecms/ui";
+import { cls, EditIcon } from "@firecms/ui";
 import { EntityPreviewContainer } from "../../EntityPreview";
 
 type TableReferenceFieldProps = {
@@ -123,7 +123,7 @@ export const TableReferenceFieldInternal = React.memo(
                              key={`preview_array_ref_${name}_${index}`}>
                             <ReferencePreview
                                 onClick={disabled ? undefined : handleOpen}
-                                size={"smallest"}
+                                size={"small"}
                                 reference={reference}
                                 hover={!disabled}
                                 disabled={!path}
@@ -151,18 +151,17 @@ export const TableReferenceFieldInternal = React.memo(
 
                 {valueNotSet &&
                     <EntityPreviewContainer
-                        className={cls("px-4 py-2 text-sm font-medium flex items-center uppercase",
+                        className={cls("px-3 py-2 text-sm font-medium flex items-center",
                             multiselect ? "gap-4" : "gap-6",
                             disabled
-                                ? "text-slate-500"
-                                : "cursor-pointer text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800")}
+                                ? "text-surface-accent-500"
+                                : "cursor-pointer text-text-secondary dark:text-text-secondary-dark hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
                         onClick={handleOpen}
                         size={"medium"}>
-                        <IconForView
+                        <EditIcon
                             size={"small"}
-                            collectionOrView={collection}
-                            className={"text-gray-300 dark:text-gray-600"}/>
-                        Edit {title}
+                            className={"ml-2 mr-1 text-surface-300 dark:text-surface-600"}/>
+                        {title}
                     </EntityPreviewContainer>}
 
             </div>

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

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { useMemo, useState } from "react";
+import { useMemo } from "react";
 
 import { Entity, ResolvedArrayProperty, ResolvedStringProperty, StorageConfig } from "../../../types";
 import { useDropzone } from "react-dropzone";
@@ -140,9 +140,7 @@ function StorageUpload({
                            storagePathBuilder,
                        }: StorageUploadProps) {
 
-    const [onHover, setOnHover] = useState(false);
-
-    const previewSize = multipleFilesSupported && previewSizeInput === "medium" ? "small" : previewSizeInput;
+    const previewSize = previewSizeInput;
     if (multipleFilesSupported) {
         const arrayProperty = property as ResolvedArrayProperty<string[]>;
         if (Array.isArray(arrayProperty.of)) {
@@ -212,9 +210,6 @@ function StorageUpload({
 
     return (
         <div {...rootProps}
-             onMouseEnter={() => setOnHover(true)}
-             onMouseMove={() => setOnHover(true)}
-             onMouseLeave={() => setOnHover(false)}
              className={cls(dropZoneClasses,
                  "relative w-full h-full flex",
                  `justify-${hasValue ? "start" : "center"}`,
@@ -252,14 +247,13 @@ function StorageUpload({
                 }
 
                 return child;
-            })
-            }
+            })}
 
             {!internalValue && <div
                 className="flex-grow m-2 max-w-[200px]"
                 onClick={open}>
                 <Typography
-                    className="text-gray-400 dark:text-gray-600"
+                    className="text-surface-400 dark:text-surface-600"
                     variant={"body2"}
                     align={"center"}>
                     {helpText}
@@ -276,7 +270,7 @@ function StorageUpload({
                     color={"inherit"}
                     size={"small"}
                     onClick={open}>
-                    <EditIcon size={"small"} className={"text-gray-500"}/>
+                    <EditIcon size={"small"} className={"text-surface-500"}/>
                 </IconButton>
             </EntityTableCellActions>
 

package/src/components/EntityCollectionTable/index.tsx

@@ -8,5 +8,5 @@ export type {
 
 export * from "./PropertyTableCell";
 export * from "./EntityCollectionRowActions";
-export * from "../common/useDataSourceEntityCollectionTableController";
+export * from "../common/useDataSourceTableController";
 export * from "./column_utils";

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

@@ -71,7 +71,7 @@ export function CollectionTableToolbar({
 
     return (
         <div
-            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")}>
+            className={cls(defaultBorderMixin, "no-scrollbar min-h-[56px] overflow-x-auto px-2 md:px-4 bg-surface-50 dark:bg-surface-900 border-b flex flex-row justify-between items-center w-full")}>
 
             <div className="flex items-center gap-2 md:mr-4 mr-2">
 
@@ -87,9 +87,9 @@ export function CollectionTableToolbar({
 
             <div className="flex items-center gap-2">
 
-                {largeLayout && <div className="w-[22px]">
+                {largeLayout && <div className="w-[22px] mr-4">
                     {loading &&
-                        <CircularProgress size={"small"}/>}
+                        <CircularProgress size={"smallest"}/>}
                 </div>}
 
                 {(onTextSearch || onTextSearchClick) &&

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

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 
 import useMeasure from "react-use-measure";
 
-import { cls, RemoveCircleIcon, Tooltip } from "@firecms/ui";
+import { cls, DoNotDisturbOnIcon, Tooltip } from "@firecms/ui";
 import { ErrorBoundary } from "../../../components";
 import { getRowHeight, TableSize } from "../../common/table_height";
 
@@ -188,10 +188,10 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                 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" : "",
-                    saved ? "bg-gray-100 bg-opacity-75 dark:bg-gray-800 dark:bg-opacity-75" : "",
+                    onHover && !disabled ? "bg-surface-50 dark:bg-surface-900" : "",
+                    saved ? "bg-surface-100 bg-opacity-75 dark:bg-surface-800 dark:bg-opacity-75" : "",
                     hideOverflow ? "overflow-hidden" : "",
-                    isSelected ? "bg-gray-50 dark:bg-gray-900" : "",
+                    isSelected ? "bg-surface-50 dark:bg-surface-900" : "",
                     borderClass
                 )}
                 ref={ref}
@@ -236,7 +236,7 @@ export const EntityTableCell = React.memo<EntityTableCellProps>(
                 {disabled && onHover && disabledTooltip &&
                     <div className="absolute top-1 right-1 text-xs">
                         <Tooltip title={disabledTooltip}>
-                            <RemoveCircleIcon size={"smallest"} color={"disabled"} className={"text-gray-500"}/>
+                            <DoNotDisturbOnIcon size={"smallest"} color={"disabled"} className={"text-surface-500"}/>
                         </Tooltip>
                     </div>}
 

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

@@ -1,4 +1,4 @@
-import { ErrorOutlineIcon, IconButton } from "@firecms/ui";
+import { ErrorIcon, IconButton } from "@firecms/ui";
 import { ErrorTooltip } from "../../ErrorTooltip";
 import { useCallback, useEffect, useRef } from "react";
 
@@ -68,7 +68,7 @@ export function EntityTableCellActions({
                             width: 32,
                             height: 32
                         }}>
-                        <ErrorOutlineIcon
+                        <ErrorIcon
                             size={"small"}
                             color={"error"}
                         />