@firecms/core 3.0.0-canary.167 → 3.0.0-canary.169

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -19,7 +19,7 @@ import {
 import {
     EntityCollectionRowActions,
     EntityCollectionTable,
-    useDataSourceEntityCollectionTableController
+    useDataSourceTableController
 } from "../EntityCollectionTable";
 
 import {
@@ -28,6 +28,8 @@ import {
     canEditEntity,
     getPropertyInPath,
     mergeDeep,
+    mergeEntityActions,
+    navigateToEntity,
     resolveCollection,
     resolveProperty
 } from "../../util";
@@ -62,6 +64,9 @@ import { setIn } from "@firecms/formex";
 import { getSubcollectionColumnId } from "../EntityCollectionTable/internal/common";
 import {
     COLLECTION_GROUP_PARENT_ID,
+    copyEntityAction,
+    deleteEntityAction,
+    editEntityAction,
     OnCellValueChange,
     OnColumnResizeParams,
     UniqueFieldValidator,
@@ -70,13 +75,14 @@ import {
 } from "../common";
 import { PopupFormField } from "../EntityCollectionTable/internal/popup_field/PopupFormField";
 import { GetPropertyForProps } from "../EntityCollectionTable/EntityCollectionTableProps";
-import { copyEntityAction, deleteEntityAction, editEntityAction } from "../common/default_entity_actions";
 import { DeleteEntityDialog } from "../DeleteEntityDialog";
 import { useAnalyticsController } from "../../hooks/useAnalyticsController";
 import { useSelectionController } from "./useSelectionController";
 import { EntityCollectionViewStartActions } from "./EntityCollectionViewStartActions";
 import { addRecentId, getRecentIds } from "./utils";
-import { mergeEntityActions } from "../../util/entity_actions";
+import { useScrollRestoration } from "../common/useScrollRestoration";
+
+const DEFAULT_ENTITY_OPEN_MODE: "side_panel" | "full_screen" = "side_panel";
 
 /**
  * @group Components
@@ -98,6 +104,11 @@ export type EntityCollectionViewProps<M extends Record<string, any>> = {
 
     className?: string;
 
+    /**
+     * If true, this view will store its filter and sorting status in the url params
+     */
+    updateUrl?: boolean;
+
 } & EntityCollection<M>;
 
 /**
@@ -130,6 +141,7 @@ export const EntityCollectionView = React.memo(
                                                                      parentCollectionIds,
                                                                      isSubCollection,
                                                                      className,
+                                                                     updateUrl,
                                                                      ...collectionProp
                                                                  }: EntityCollectionViewProps<M>
     ) {
@@ -146,11 +158,15 @@ export const EntityCollectionView = React.memo(
 
         const containerRef = React.useRef<HTMLDivElement>(null);
 
+        const scrollRestoration = useScrollRestoration();
+
         const collection = useMemo(() => {
             const userOverride = userConfigPersistence?.getCollectionConfig<M>(fullPath);
             return (userOverride ? mergeDeep(collectionProp, userOverride) : collectionProp) as EntityCollection<M>;
         }, [collectionProp, fullPath, userConfigPersistence?.getCollectionConfig]);
 
+        const openEntityMode = collection?.openEntityMode ?? DEFAULT_ENTITY_OPEN_MODE;
+
         const collectionRef = React.useRef(collection);
         useEffect(() => {
             collectionRef.current = collection;
@@ -193,14 +209,12 @@ export const EntityCollectionView = React.memo(
             setSelectedEntities
         } = usedSelectionController;
 
-        // useEffect(() => {
-        //     setDeleteEntityClicked(undefined);
-        // }, [selectedEntities]);
-
-        const tableController = useDataSourceEntityCollectionTableController<M>({
+        const tableController = useDataSourceTableController<M>({
             fullPath,
             collection,
-            lastDeleteTimestamp
+            lastDeleteTimestamp,
+            scrollRestoration,
+            updateUrl
         });
 
         const tableKey = React.useRef<string>(Math.random().toString(36));
@@ -217,13 +231,21 @@ export const EntityCollectionView = React.memo(
                 path: clickedEntity.path,
                 entityId: clickedEntity.id
             });
-            return sideEntityController.open({
-                entityId: clickedEntity.id,
-                path: clickedEntity.path,
+
+            if (collection) {
+                addRecentId(collection.id, clickedEntity.id);
+            }
+
+            const path = collection?.collectionGroup ? clickedEntity.path : (fullPath ?? clickedEntity.path);
+            navigateToEntity({
+                navigation,
+                path,
+                sideEntityController,
+                openEntityMode,
                 collection,
-                updateUrl: true,
-                onClose: unselectNavigatedEntity,
+                entityId: clickedEntity.id
             });
+
         }, [unselectNavigatedEntity, sideEntityController]);
 
         const onNewClick = useCallback(() => {
@@ -232,12 +254,15 @@ export const EntityCollectionView = React.memo(
             analyticsController.onAnalyticsEvent?.("new_entity_click", {
                 path: fullPath
             });
-            sideEntityController.open({
-                path: fullPath,
+            navigateToEntity({
+                openEntityMode,
                 collection,
-                updateUrl: true,
-                onClose: unselectNavigatedEntity,
-            });
+                entityId: undefined,
+                path: fullPath,
+                sideEntityController,
+                navigation,
+                onClose: unselectNavigatedEntity
+            })
         }, [fullPath, sideEntityController]);
 
         const onMultipleDeleteClick = () => {
@@ -349,7 +374,7 @@ export const EntityCollectionView = React.memo(
 
         };
 
-        const resolvedFullPath = navigation.resolveAliasesFrom(fullPath);
+        const resolvedFullPath = navigation.resolveIdsFrom(fullPath);
         const resolvedCollection = useMemo(() => resolveCollection<M>({
             collection,
             path: fullPath,
@@ -393,13 +418,15 @@ export const EntityCollectionView = React.memo(
                                 startIcon={<KeyboardTabIcon size={"small"}/>}
                                 onClick={(event: any) => {
                                     event.stopPropagation();
-                                    sideEntityController.open({
-                                        path: fullPath,
-                                        entityId: entity.id,
-                                        selectedSubPath: subcollection.id ?? subcollection.path,
+                                    navigateToEntity({
+                                        openEntityMode,
                                         collection,
-                                        updateUrl: true,
-                                    });
+                                        entityId: entity.id,
+                                        selectedTab: subcollection.id ?? subcollection.path,
+                                        path: fullPath,
+                                        navigation,
+                                        sideEntityController
+                                    })
                                 }}>
                             {subcollection.name}
                         </Button>
@@ -505,6 +532,7 @@ export const EntityCollectionView = React.memo(
                     hideId={collection?.hideIdFromCollection}
                     onCollectionChange={updateLastDeleteTimestamp}
                     selectionController={usedSelectionController}
+                    openEntityMode={openEntityMode}
                 />
             );
 
@@ -617,6 +645,8 @@ export const EntityCollectionView = React.memo(
                     properties={resolvedCollection.properties}
                     getPropertyFor={getPropertyFor}
                     onTextSearchClick={textSearchInitialised ? undefined : onTextSearchClick}
+                    onScroll={tableController.onScroll}
+                    initialScroll={tableController.initialScroll}
                     textSearchLoading={textSearchLoading}
                     textSearchEnabled={textSearchEnabled}
                     actionsStart={<EntityCollectionViewStartActions
@@ -662,6 +692,7 @@ export const EntityCollectionView = React.memo(
                     additionalIDHeaderWidget={<EntityIdHeaderWidget
                         path={fullPath}
                         collection={collection}/>}
+                    openEntityMode={openEntityMode}
                 />
 
                 {popupCell && <PopupFormField
@@ -692,7 +723,7 @@ export const EntityCollectionView = React.memo(
             </div>
         );
     }, (a, b) => {
-        return equal(a.fullPath, b.fullPath) &&
+        return equal(a.path, b.path) &&
             equal(a.parentCollectionIds, b.parentCollectionIds) &&
             equal(a.isSubCollection, b.isSubCollection) &&
             equal(a.className, b.className) &&
@@ -709,6 +740,7 @@ export const EntityCollectionView = React.memo(
             equal(a.textSearchEnabled, b.textSearchEnabled) &&
             equal(a.additionalFields, b.additionalFields) &&
             equal(a.sideDialogWidth, b.sideDialogWidth) &&
+            equal(a.openEntityMode, b.openEntityMode) &&
             equal(a.forceFilter, b.forceFilter);
     }) as React.FunctionComponent<EntityCollectionViewProps<any>>
 
@@ -733,7 +765,7 @@ function EntitiesCount({
 
     const sortByProperty = sortBy ? sortBy[0] : undefined;
     const currentSort = sortBy ? sortBy[1] : undefined;
-    const resolvedPath = useMemo(() => navigation.resolveAliasesFrom(fullPath), [fullPath, navigation.resolveAliasesFrom]);
+    const resolvedPath = useMemo(() => navigation.resolveIdsFrom(fullPath), [fullPath, navigation.resolveIdsFrom]);
 
     useEffect(() => {
         if (dataSource.countEntities)
@@ -780,11 +812,15 @@ function EntityIdHeaderWidget({
     collection: EntityCollection,
     path: string
 }) {
+
+    const navigation = useNavigationController();
     const [openPopup, setOpenPopup] = React.useState(false);
     const [searchString, setSearchString] = React.useState("");
     const [recentIds, setRecentIds] = React.useState<string[]>(getRecentIds(collection.id));
     const sideEntityController = useSideEntityController();
 
+    const openEntityMode = collection?.openEntityMode ?? DEFAULT_ENTITY_OPEN_MODE;
+
     return (
         <Tooltip title={!openPopup ? "Find by ID" : undefined} asChild={false}>
             <Popover
@@ -805,13 +841,16 @@ function EntityIdHeaderWidget({
                               e.preventDefault();
                               if (!searchString) return;
                               setOpenPopup(false);
-                              setRecentIds(addRecentId(collection.id, searchString.trim()));
-                              return sideEntityController.open({
-                                  entityId: searchString.trim(),
-                                  path,
+                              const entityId = searchString.trim();
+                              setRecentIds(addRecentId(collection.id, entityId));
+                              navigateToEntity({
+                                  openEntityMode,
                                   collection,
-                                  updateUrl: true
-                              });
+                                  entityId,
+                                  path,
+                                  sideEntityController,
+                                  navigation
+                              })
                           }}
                           className={"w-96 max-w-full"}>
 
@@ -838,12 +877,14 @@ function EntityIdHeaderWidget({
                                               hover={true}
                                               onClick={() => {
                                                   setOpenPopup(false);
-                                                  sideEntityController.open({
+                                                  navigateToEntity({
+                                                      openEntityMode,
+                                                      collection,
                                                       entityId: id,
                                                       path,
-                                                      collection,
-                                                      updateUrl: true
-                                                  });
+                                                      sideEntityController,
+                                                      navigation
+                                                  })
                                               }}
                                               includeEntityLink={false}
                                               size={"small"}/>

package/src/components/NotFoundPage.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Link as ReactLink } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { Button, Typography } from "@firecms/ui";
 
 export function NotFoundPage() {
@@ -17,7 +17,7 @@ export function NotFoundPage() {
                 </Typography>
                 <Button
                     variant={"text"}
-                    component={ReactLink}
+                    component={Link}
                     to={"/"}>Back to home</Button>
             </div>
         </div>

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -4,7 +4,7 @@ import { CollectionSize, Entity, EntityCollection, FilterValues } from "../../ty
 import {
     EntityCollectionRowActions,
     EntityCollectionTable,
-    useDataSourceEntityCollectionTableController
+    useDataSourceTableController
 } from "../EntityCollectionTable";
 import {
     useAuthController,
@@ -107,7 +107,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
     const analyticsController = useAnalyticsController();
     const customizationController = useCustomizationController();
 
-    const fullPath = navigation.resolveAliasesFrom(pathInput);
+    const fullPath = navigation.resolveIdsFrom(pathInput);
 
     const dataSource = useDataSource(collection);
 
@@ -233,7 +233,9 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
             selectionEnabled={multiselect}
             hideId={collection?.hideIdFromCollection}
             fullPath={fullPath}
-            selectionController={selectionController}/>;
+            selectionController={selectionController}
+            openEntityMode={"side_panel"}
+        />;
 
     };
 
@@ -256,7 +258,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
 
     const displayedColumnIds = useColumnIds(resolvedCollection, false);
 
-    const tableController = useDataSourceEntityCollectionTableController<M>({
+    const tableController = useDataSourceTableController<M>({
         fullPath,
         collection,
         entitiesDisplayedFirst,
@@ -289,12 +291,14 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
                         tableController={tableController}
                         enablePopupIcon={false}
                         tableRowActionsBuilder={tableRowActionsBuilder}
+                        openEntityMode={"side_panel"}
                         title={<Typography variant={"subtitle2"} className={"flex flex-row gap-2"}>
                             <IconForView
                                 size={"small"}
                                 collectionOrView={collection}
                                 className={"text-surface-300 dark:text-surface-600"}/>
-                            {collection.singularName ? `Select ${collection.singularName}` : `Select from ${collection.name}`}
+                            {collection.singularName ? `Select ${collection.singularName}` : `Select
+                                                                                              from ${collection.name}`}
                         </Typography>}
                         defaultSize={collection.defaultSize}
                         properties={resolvedCollection.properties}

package/src/components/SelectableTable/SelectableTable.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useRef } from "react";
-import equal from "react-fast-compare";
 import {
     CollectionSize,
     Entity,
@@ -60,7 +59,7 @@ export type SelectableTableProps<M extends Record<string, any>> = {
 
     /**
      * Controller holding the logic for the table
-     * {@link useDataSourceEntityCollectionTableController}
+     * {@link useDataSourceTableController}
      * {@link EntityTableController}
      */
     tableController: EntityTableController<M>;
@@ -77,6 +76,18 @@ export type SelectableTableProps<M extends Record<string, any>> = {
 
     size?: CollectionSize;
 
+    initialScroll?: number;
+
+    /**
+     * Callback when the table is scrolled
+     * @param props
+     */
+    onScroll?: (props: {
+        scrollDirection: "forward" | "backward",
+        scrollOffset: number,
+        scrollUpdateWasRequested: boolean
+    }) => void;
+
     emptyComponent?: React.ReactNode;
 
     endAdornment?: React.ReactNode;
@@ -101,7 +112,7 @@ export type SelectableTableProps<M extends Record<string, any>> = {
  *
  * 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
@@ -136,6 +147,8 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
                  setPopupCell
              },
          filterable = true,
+         onScroll,
+         initialScroll,
          emptyComponent,
          columns,
          forceFilter,
@@ -229,6 +242,8 @@ export const SelectableTable = React.memo<SelectableTableProps<any>>(
                         sortBy={sortBy}
                         onSortByUpdate={setSortBy as ((sortBy?: [string, "asc" | "desc"]) => void)}
                         hoverRow={hoverRow}
+                        initialScroll={initialScroll}
+                        onScroll={onScroll}
                         checkFilterCombination={checkFilterCombination}
                         createFilterField={filterable ? createFilterField : undefined}
                         rowClassName={useCallback((entity: Entity<M>) => {

package/src/components/UnsavedChangesDialog.tsx

@@ -0,0 +1,42 @@
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
+
+export interface UnsavedChangesDialogProps {
+    open: boolean;
+    body?: React.ReactNode;
+    title?: string;
+    handleOk: () => void;
+    handleCancel: () => void;
+}
+
+export function UnsavedChangesDialog({
+                                         open,
+                                         handleOk,
+                                         handleCancel,
+                                         body,
+                                         title
+                                     }: UnsavedChangesDialogProps) {
+
+    return (
+        <Dialog
+            onEscapeKeyDown={() => {
+                handleCancel();
+            }}
+            open={open}
+        >
+            <DialogTitle variant={"h6"}>{title}</DialogTitle>
+            <DialogContent>
+
+                {body}
+
+                <Typography>
+                    Are you sure you want to leave this page?
+                </Typography>
+
+            </DialogContent>
+            <DialogActions>
+                <Button variant="text" onClick={handleCancel} autoFocus> Cancel </Button>
+                <Button onClick={handleOk}> Ok </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}

package/src/components/VirtualTable/VirtualTable.tsx

@@ -20,6 +20,7 @@ import { VirtualTableHeaderRow } from "./VirtualTableHeaderRow";
 import { VirtualTableRow } from "./VirtualTableRow";
 import { VirtualTableCell } from "./VirtualTableCell";
 import { AssignmentIcon, CenteredView, cls, Typography } from "@firecms/ui";
+import { useDebounceCallback } from "../common/useDebouncedCallback";
 
 const VirtualListContext = createContext<VirtualTableContextProps<any>>({} as any);
 VirtualListContext.displayName = "VirtualListContext";
@@ -103,6 +104,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              error,
                                                              emptyComponent,
                                                              onSortByUpdate,
+                                                             onScroll: onScrollProp,
                                                              loading,
                                                              cellRenderer,
                                                              hoverRow,
@@ -112,6 +114,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              className,
                                                              endAdornment,
                                                              AddColumnComponent,
+                                                             initialScroll = 0,
                                                              debug
                                                          }: VirtualTableProps<T>) {
 
@@ -123,6 +126,15 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         const tableRef = useRef<HTMLDivElement>(null);
         const endReachCallbackThreshold = useRef<number>(0);
 
+        const debouncedScroll = useDebounceCallback(onScrollProp, 200);
+
+        // Set initial scroll position
+        useEffect(() => {
+            if (tableRef.current && initialScroll) {
+                tableRef.current.scrollTo(0, initialScroll);
+            }
+        }, [tableRef, initialScroll]);
+
         useEffect(() => {
             setColumns(columnsProp);
         }, [columnsProp]);
@@ -158,7 +170,6 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                 console.log("scrollToTop");
             endReachCallbackThreshold.current = 0;
             if (tableRef.current) {
-                // scrollRef.current = [scrollRef.current[0], 0];
                 tableRef.current.scrollTo(tableRef.current?.scrollLeft, 0);
             }
         }, []);
@@ -222,6 +233,13 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                     scrollOffset,
                     scrollUpdateWasRequested
                 });
+            if (onScrollProp) {
+                debouncedScroll({
+                    scrollDirection,
+                    scrollOffset,
+                    scrollUpdateWasRequested
+                })
+            }
             if (!scrollUpdateWasRequested && (scrollOffset >= maxScroll - endOffset))
                 onEndReachedInternal(scrollOffset);
         }, [maxScroll, onEndReachedInternal]);
@@ -294,7 +312,6 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
         if (debug)
             console.log("VirtualTable render", virtualListController);
 
-        // useTraceUpdate(virtualListController);
         return (
             <div
                 ref={measureRef}

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -82,6 +82,16 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     onFilterUpdate?: (filter?: VirtualTableFilterValues<any> | undefined) => void;
 
+    /**
+     * Callback when the table is scrolled
+     * @param props
+     */
+    onScroll?: (props: {
+        scrollDirection: "forward" | "backward",
+        scrollOffset: number,
+        scrollUpdateWasRequested: boolean
+    }) => void;
+
     /**
      * Default sort applied to this collection
      */
@@ -147,6 +157,11 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     AddColumnComponent?: React.ComponentType;
 
+    /**
+     * Initial scroll position
+     */
+    initialScroll?: number;
+
     /**
      * Debug mode
      */

package/src/components/VirtualTable/fields/VirtualTableInput.tsx

@@ -66,7 +66,7 @@ export function VirtualTableInput(props: {
                 width: "100%",
                 color: "unset",
                 fontWeight: "unset",
-                lineHeight: "unset",
+                lineHeight: 1.7142857,
                 fontSize: "unset",
                 fontFamily: "unset",
                 background: "unset",

package/src/components/common/default_entity_actions.tsx

@@ -1,7 +1,8 @@
-import { ArchiveIcon, DeleteIcon, EditIcon, FileCopyIcon, OpenInNewIcon } from "@firecms/ui";
+import { DeleteIcon, EditIcon, FileCopyIcon } from "@firecms/ui";
 import { EntityAction } from "../../types";
 import { DeleteEntityDialog } from "../DeleteEntityDialog";
 import { addRecentId } from "../EntityCollectionView/utils";
+import { navigateToEntity } from "../../util";
 
 export const editEntityAction: EntityAction = {
     icon: <EditIcon/>,
@@ -15,23 +16,31 @@ export const editEntityAction: EntityAction = {
                 context,
                 highlightEntity,
                 unhighlightEntity,
+                openEntityMode
             }): Promise<void> {
+
         highlightEntity?.(entity);
+
         context.analyticsController?.onAnalyticsEvent?.("entity_click", {
             path: entity.path,
             entityId: entity.id
         });
+
         if (collection) {
             addRecentId(collection.id, entity.id);
         }
-        const path = collection?.collectionGroup ? entity.path : (fullPath ?? entity.path);
-        context.sideEntityController.open({
+
+        const path = collection?.collectionGroup ? entity.path : (fullPath ?? entity.path)
+        navigateToEntity({
+            openEntityMode,
+            collection,
             entityId: entity.id,
             path,
-            collection,
-            updateUrl: true,
+            sideEntityController: context.sideEntityController,
             onClose: () => unhighlightEntity?.(entity),
+            navigation: context.navigation
         });
+
         return Promise.resolve(undefined);
     }
 }
@@ -44,27 +53,32 @@ export const copyEntityAction: EntityAction = {
                 entity,
                 collection,
                 context,
+                fullPath,
                 highlightEntity,
                 unhighlightEntity,
+                openEntityMode
             }): Promise<void> {
         highlightEntity?.(entity);
         context.analyticsController?.onAnalyticsEvent?.("copy_entity_click", {
             path: entity.path,
             entityId: entity.id
         });
-        context.sideEntityController.open({
+        const path = collection?.collectionGroup ? entity.path : (fullPath ?? entity.path)
+        navigateToEntity({
+            openEntityMode,
+            collection,
             entityId: entity.id,
-            path: entity.path,
+            path,
             copy: true,
-            collection,
-            updateUrl: true,
+            sideEntityController: context.sideEntityController,
             onClose: () => unhighlightEntity?.(entity),
+            navigation: context.navigation
         });
+
         return Promise.resolve(undefined);
     }
 }
 
-
 export const deleteEntityAction: EntityAction = {
     icon: <DeleteIcon/>,
     name: "Delete",

package/src/components/common/index.ts

@@ -1,6 +1,6 @@
 export * from "./types";
 export * from "./useDebouncedData";
 export * from "./useColumnsIds";
-export * from "./useDataSourceEntityCollectionTableController";
+export * from "./useDataSourceTableController";
 export * from "./useTableSearchHelper";
 export * from "./default_entity_actions";