@firecms/core 3.0.0-canary.98 → 3.0.0-rc.1

package/src/components/CircularProgressCenter.tsx

@@ -13,7 +13,7 @@ export function CircularProgressCenter({ text, ...props }: CircularProgressProps
 }) {
     return (
         <div
-            className="flex w-full h-screen max-h-full max-w-full bg-gray-50 dark:bg-gray-900 gap-4">
+            className="flex w-full h-screen max-h-full max-w-full gap-4">
             <div className="m-auto flex flex-col gap-2 items-center">
                 <CircularProgress {...props}/>
                 {text && <Typography

package/src/components/ClearFilterSortButton.tsx

@@ -18,7 +18,7 @@ export function ClearFilterSortButton({
     if ((filterIsSet || sortIsSet) && (tableController.clearFilter || tableController.setSortBy)) {
         let label;
         if (filterIsSet && sortIsSet) {
-            label = "Clear filter and sort";
+            label = "Clear filter/sort";
         } else if (filterIsSet) {
             label = "Clear filter";
         } else {

package/src/components/{DeleteConfirmationDialog.tsx → ConfirmationDialog.tsx}

@@ -1,15 +1,15 @@
 import React from "react";
 
-import { Button, Dialog, DialogActions, DialogContent, LoadingButton, Typography } from "@firecms/ui";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, LoadingButton } from "@firecms/ui";
 
-export function DeleteConfirmationDialog({
-                                             open,
-                                             onAccept,
-                                             onCancel,
-                                             title,
-                                             loading,
-                                             body
-                                         }: {
+export function ConfirmationDialog({
+                                       open,
+                                       onAccept,
+                                       onCancel,
+                                       title,
+                                       loading,
+                                       body
+                                   }: {
     open: boolean,
     onAccept: () => void,
     onCancel: () => void,
@@ -22,13 +22,14 @@ export function DeleteConfirmationDialog({
             open={open}
             onOpenChange={(open) => !open ? onCancel() : undefined}
         >
+            <DialogTitle variant={"h6"} className={"mb-2"}>{title}</DialogTitle>
             <DialogContent>
-                <Typography variant={"h6"} className={"mb-2"}>{title}</Typography>
                 {body}
             </DialogContent>
 
             <DialogActions>
                 <Button
+                    color={"primary"}
                     variant={"text"}
                     onClick={onCancel}
                     autoFocus>Cancel</Button>
@@ -38,7 +39,7 @@ export function DeleteConfirmationDialog({
                     type="submit"
                     loading={loading}
                     onClick={onAccept}
-                >
+                    autoFocus>
                     Ok
                 </LoadingButton>
             </DialogActions>

package/src/components/DeleteEntityDialog.tsx

@@ -1,8 +1,9 @@
 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,
+    useAuthController,
     useCustomizationController,
     useDataSource,
     useFireCMSContext,
@@ -34,31 +35,24 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
                                                                       onMultipleEntitiesDelete,
                                                                       path
                                                                   }: DeleteEntityDialogProps<M>) {
-
+    const authController = useAuthController();
     const dataSource = useDataSource(collection);
     const customizationController = useCustomizationController();
     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,
+        authController
     }), [collection, path]);
 
     const handleCancel = useCallback(() => {
@@ -181,16 +175,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";
 
 /**
  *
@@ -21,6 +33,7 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                                                                   entity,
                                                                                   collection,
                                                                                   fullPath,
+                                                                                  fullIdPath,
                                                                                   width,
                                                                                   frozen,
                                                                                   isSelected,
@@ -32,23 +45,26 @@ 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,
+                                                                                  fullIdPath?: 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 +79,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",
@@ -80,19 +100,24 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                 <div className="w-34 flex justify-center">
 
                     {uncollapsedActions.map((action, index) => (
-                        <Tooltip key={index} title={action.name}>
+                        <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"}>
@@ -113,14 +138,17 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                     onClick={(e) => {
                                         e.stopPropagation();
                                         action.onClick({
+                                            view: "collection",
                                             entity,
                                             fullPath,
+                                            fullIdPath,
                                             collection,
                                             context,
                                             selectionController,
                                             highlightEntity,
                                             unhighlightEntity,
                                             onCollectionChange,
+                                            openEntityMode: openEntityMode ?? collection?.openEntityMode
                                         });
                                     }}>
                                     {action.icon}
@@ -143,15 +171,21 @@ 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 justify-center flex items-center gap-1"
                     onClick={(event) => {
                         event.stopPropagation();
                     }}>
-
-                    {entity
-                        ? entity.id
-                        : <Skeleton/>
-                    }
+                    {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
+                            : <Skeleton/>
+                        }
+                    </span>
                 </div>
             )}
 

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

@@ -4,10 +4,12 @@ import {
     CMSType,
     Entity,
     EntityReference,
+    ReferenceProperty,
     ResolvedArrayProperty,
     ResolvedNumberProperty,
     ResolvedProperty,
-    ResolvedStringProperty
+    ResolvedStringProperty,
+    StringProperty
 } from "../../types";
 
 import { VirtualTableInput } from "../VirtualTable/fields/VirtualTableInput";
@@ -49,6 +51,8 @@ export interface PropertyTableCellProps<T extends CMSType> {
 }
 
 function isStorageProperty(property: ResolvedProperty) {
+    if (property.dataType === "string" && property.markdown)
+        return false;
     if (property.dataType === "string" && (property as ResolvedStringProperty).storage)
         return true;
     if (property.dataType === "array") {
@@ -87,8 +91,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);
@@ -147,7 +151,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                 onValueUpdated,
                                 data: entity,
                             });
-                        } catch (e:any) {
+                        } catch (e: any) {
                             console.error("onValueChange error", e);
                             setError(e);
                         }
@@ -191,7 +195,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>
                 });
@@ -207,7 +212,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>
                 });
@@ -247,7 +253,27 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
 
         if (!customField && (!customPreview || selected)) {
             const isAStorageProperty = isStorageProperty(property);
-            if (isAStorageProperty) {
+            if (property.dataType === "string" && (property as StringProperty).reference?.path) {
+                const stringProperty = property as StringProperty;
+                const path = stringProperty.reference?.path as string;
+                const referenceProperty = stringProperty.reference as ReferenceProperty;
+                const referenceValue = internalValue ? new EntityReference(internalValue, path) : undefined;
+                innerComponent =
+                    <TableReferenceField name={propertyKey as string}
+                                         internalValue={referenceValue}
+                                         updateValue={(v) => updateValue(v ? (v as EntityReference).id : null)}
+                                         disabled={disabled}
+                                         size={size}
+                                         path={path}
+                                         multiselect={false}
+                                         previewProperties={referenceProperty.previewProperties}
+                                         includeId={referenceProperty.includeId}
+                                         includeEntityLink={referenceProperty.includeEntityLink}
+                                         title={stringProperty.name}
+                                         forceFilter={referenceProperty.forceFilter}
+                    />;
+                allowScroll = false;
+            } else if (isAStorageProperty) {
                 innerComponent = <TableStorageUpload error={validationError ?? error}
                                                      disabled={disabled}
                                                      focused={selected}
@@ -306,7 +332,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                                          updateValue={updateValue}
                     />;
                     fullHeight = true;
-                } else if (!stringProperty.storage) {
+                } else if (stringProperty.markdown || !stringProperty.storage || !stringProperty.reference) {
                     const multiline = Boolean(stringProperty.multiline) || Boolean(stringProperty.markdown);
                     innerComponent = <VirtualTableInput error={validationError ?? error}
                                                         disabled={disabled}
@@ -390,7 +416,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any>>(
                                     size={size}
                                     multiselect={true}
                                     path={arrayProperty.of.path}
-                                    previewProperties={arrayProperty.of.previewProperties}
+                                    previewProperties={arrayProperty.of.previewKeys}
                                     title={arrayProperty.name}
                                     forceFilter={arrayProperty.of.forceFilter}
                                     includeId={arrayProperty.of.includeId}