@firecms/core 3.0.0-canary.99 → 3.0.0-rc.2

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -7,7 +7,9 @@ import {
     CollectionSize,
     Entity,
     EntityAction,
-    EntityCollection, EntityTableController,
+    EntityCollection,
+    EntityReference,
+    EntityTableController,
     FilterValues,
     PartialEntityCollection,
     PropertyOrBuilder,
@@ -17,7 +19,7 @@ import {
 import {
     EntityCollectionRowActions,
     EntityCollectionTable,
-    useDataSourceEntityCollectionTableController
+    useDataSourceTableController
 } from "../EntityCollectionTable";
 
 import {
@@ -26,7 +28,10 @@ import {
     canEditEntity,
     getPropertyInPath,
     mergeDeep,
+    mergeEntityActions,
+    navigateToEntity,
     resolveCollection,
+    resolveEntityAction,
     resolveProperty
 } from "../../util";
 import { ReferencePreview } from "../../preview";
@@ -46,6 +51,7 @@ import {
     AddIcon,
     Button,
     cls,
+    focusedDisabled,
     IconButton,
     KeyboardTabIcon,
     Markdown,
@@ -58,6 +64,10 @@ import {
 import { setIn } from "@firecms/formex";
 import { getSubcollectionColumnId } from "../EntityCollectionTable/internal/common";
 import {
+    COLLECTION_GROUP_PARENT_ID,
+    copyEntityAction,
+    deleteEntityAction,
+    editEntityAction,
     OnCellValueChange,
     OnColumnResizeParams,
     UniqueFieldValidator,
@@ -66,13 +76,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 { useScrollRestoration } from "../common/useScrollRestoration";
 
-const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
+const DEFAULT_ENTITY_OPEN_MODE: "side_panel" | "full_screen" = "side_panel";
 
 /**
  * @group Components
@@ -83,6 +94,10 @@ export type EntityCollectionViewProps<M extends Record<string, any>> = {
      * It defaults to the collection path if not provided.
      */
     fullPath?: string;
+    /**
+     * Full path using navigation ids.
+     */
+    fullIdPath?: string;
     /**
      * If this is a subcollection, specify the parent collection ids.
      */
@@ -94,6 +109,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>;
 
 /**
@@ -123,17 +143,19 @@ export type EntityCollectionViewProps<M extends Record<string, any>> = {
 export const EntityCollectionView = React.memo(
     function EntityCollectionView<M extends Record<string, any>>({
                                                                      fullPath: fullPathProp,
+                                                                     fullIdPath,
                                                                      parentCollectionIds,
                                                                      isSubCollection,
                                                                      className,
+                                                                     updateUrl,
                                                                      ...collectionProp
                                                                  }: EntityCollectionViewProps<M>
     ) {
 
         const context = useFireCMSContext();
+        const navigation = useNavigationController();
         const fullPath = fullPathProp ?? collectionProp.path;
         const dataSource = useDataSource(collectionProp);
-        const navigation = useNavigationController();
         const sideEntityController = useSideEntityController();
         const authController = useAuthController();
         const userConfigPersistence = useUserConfigurationPersistence();
@@ -142,11 +164,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;
@@ -189,14 +215,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));
@@ -207,34 +231,45 @@ export const EntityCollectionView = React.memo(
         }, [tableController.setPopupCell]);
 
         const onEntityClick = useCallback((clickedEntity: Entity<M>) => {
-            console.log("Entity clicked", clickedEntity)
             const collection = collectionRef.current;
             setHighlightedEntity(clickedEntity);
             analyticsController.onAnalyticsEvent?.("edit_entity_clicked", {
                 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,
+                fullIdPath,
+                sideEntityController,
+                openEntityMode,
                 collection,
-                updateUrl: true,
-                onClose: unselectNavigatedEntity,
+                entityId: clickedEntity.id
             });
+
         }, [unselectNavigatedEntity, sideEntityController]);
 
         const onNewClick = useCallback(() => {
-
             const collection = collectionRef.current;
             analyticsController.onAnalyticsEvent?.("new_entity_click", {
                 path: fullPath
             });
-            sideEntityController.open({
-                path: fullPath,
+            navigateToEntity({
+                openEntityMode,
                 collection,
-                updateUrl: true,
-                onClose: unselectNavigatedEntity,
-            });
+                entityId: undefined,
+                path: fullPath,
+                fullIdPath,
+                sideEntityController,
+                navigation,
+                onClose: unselectNavigatedEntity
+            })
         }, [fullPath, sideEntityController]);
 
         const onMultipleDeleteClick = () => {
@@ -306,7 +341,7 @@ export const EntityCollectionView = React.memo(
                  value,
                  property,
                  entityId
-             }) => dataSource.checkUniqueField(fullPath, name, value, entityId),
+             }) => dataSource.checkUniqueField(fullPath, name, value, entityId, collection),
             [fullPath]);
 
         const onValueChange: OnCellValueChange<any, any> = ({
@@ -320,7 +355,7 @@ export const EntityCollectionView = React.memo(
             const updatedValues = setIn({ ...entity.values }, propertyKey, value);
 
             const saveProps: SaveEntityProps = {
-                path: fullPath,
+                path: entity.path ?? fullPath,
                 entityId: entity.id,
                 values: updatedValues,
                 previousValues: entity.values,
@@ -346,11 +381,12 @@ export const EntityCollectionView = React.memo(
 
         };
 
-        const resolvedFullPath = navigation.resolveAliasesFrom(fullPath);
+        const resolvedFullPath = navigation.resolveIdsFrom(fullPath);
         const resolvedCollection = useMemo(() => resolveCollection<M>({
             collection,
             path: fullPath,
-            fields: customizationController.propertyConfigs
+            propertyConfigs: customizationController.propertyConfigs,
+            authController,
         }), [collection, fullPath]);
 
         const getPropertyFor = useCallback(({
@@ -371,7 +407,8 @@ export const EntityCollectionView = React.memo(
                 path: entity.path,
                 values: entity.values,
                 entityId: entity.id,
-                fields: customizationController.propertyConfigs
+                propertyConfigs: customizationController.propertyConfigs,
+                authController
             });
         }, [collection.properties, customizationController.propertyConfigs, resolvedCollection.properties]);
 
@@ -387,16 +424,20 @@ export const EntityCollectionView = React.memo(
                     Builder: ({ entity }) => (
                         <Button color={"primary"}
                                 variant={"outlined"}
+                                className={"max-w-full truncate justify-start"}
                                 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,
+                                        fullIdPath,
+                                        navigation,
+                                        sideEntityController
+                                    })
                                 }}>
                             {subcollection.name}
                         </Button>
@@ -419,7 +460,7 @@ export const EntityCollectionView = React.memo(
                                         <ReferencePreview
                                             key={reference.path + "/" + reference.id}
                                             reference={reference}
-                                            size={"tiny"}/>
+                                            size={"small"}/>
                                     );
                                 })}
                             </div>
@@ -455,7 +496,7 @@ export const EntityCollectionView = React.memo(
             if (deleteEnabled)
                 actions.push(deleteEntityAction);
             if (customEntityActions)
-                actions.push(...customEntityActions);
+                return mergeEntityActions(actions, customEntityActions);
             return actions;
         };
 
@@ -468,22 +509,25 @@ export const EntityCollectionView = React.memo(
         };
 
         const tableRowActionsBuilder = useCallback(({
-                                            entity,
-                                            size,
-                                            width,
-                                            frozen
-                                        }: {
+                                                        entity,
+                                                        size,
+                                                        width,
+                                                        frozen
+                                                    }: {
             entity: Entity<any>,
             size: CollectionSize,
             width: number,
             frozen?: boolean
         }) => {
 
-            const isSelected = usedSelectionController.selectedEntities.map(e => e.id).includes(entity.id);
+            const isSelected = Boolean(usedSelectionController.selectedEntities.find(e => e.id == entity.id && e.path == entity.path));
+            const customEntityActions = (collection.entityActions ?? [])
+                .map(action => resolveEntityAction(action, customizationController.entityActions))
+                .filter(Boolean) as EntityAction[];
 
             const actions = getActionsForEntity({
                 entity,
-                customEntityActions: collection.entityActions
+                customEntityActions
             });
 
             return (
@@ -498,10 +542,12 @@ export const EntityCollectionView = React.memo(
                     unhighlightEntity={unselectNavigatedEntity}
                     collection={collection}
                     fullPath={fullPath}
+                    fullIdPath={fullIdPath}
                     actions={actions}
                     hideId={collection?.hideIdFromCollection}
                     onCollectionChange={updateLastDeleteTimestamp}
                     selectionController={usedSelectionController}
+                    openEntityMode={openEntityMode}
                 />
             );
 
@@ -535,7 +581,7 @@ export const EntityCollectionView = React.memo(
             </div>}
         >
 
-            {collection.description && <div className="m-4 text-gray-900 dark:text-white">
+            {collection.description && <div className="m-4 text-surface-900 dark:text-white">
                 <Markdown source={collection.description}/>
             </div>}
 
@@ -614,6 +660,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
@@ -658,22 +706,24 @@ export const EntityCollectionView = React.memo(
                     getIdColumnWidth={getIdColumnWidth}
                     additionalIDHeaderWidget={<EntityIdHeaderWidget
                         path={fullPath}
+                        fullIdPath={fullIdPath ?? fullPath}
                         collection={collection}/>}
+                    openEntityMode={openEntityMode}
                 />
 
-                <PopupFormField
-                    key={`popup_form_${popupCell?.propertyKey}_${popupCell?.entity?.id}`}
+                {popupCell && <PopupFormField
+                    key={`popup_form_${popupCell?.propertyKey}_${popupCell?.entityId}`}
                     open={Boolean(popupCell)}
                     onClose={onPopupClose}
                     cellRect={popupCell?.cellRect}
                     propertyKey={popupCell?.propertyKey}
                     collection={collection}
-                    entity={popupCell?.entity}
+                    entityId={popupCell.entityId}
                     tableKey={tableKey.current}
                     customFieldValidator={uniqueFieldValidator}
                     path={resolvedFullPath}
                     onCellValueChange={onValueChange}
-                    container={containerRef.current}/>
+                    container={containerRef.current}/>}
 
                 {deleteEntityClicked &&
                     <DeleteEntityDialog
@@ -689,7 +739,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) &&
@@ -703,9 +753,13 @@ export const EntityCollectionView = React.memo(
             equal(a.defaultSize, b.defaultSize) &&
             equal(a.initialFilter, b.initialFilter) &&
             equal(a.initialSort, b.initialSort) &&
+            equal(a.includeJsonView, b.includeJsonView) &&
             equal(a.textSearchEnabled, b.textSearchEnabled) &&
             equal(a.additionalFields, b.additionalFields) &&
             equal(a.sideDialogWidth, b.sideDialogWidth) &&
+            equal(a.openEntityMode, b.openEntityMode) &&
+            equal(a.exportable, b.exportable) &&
+            equal(a.history, b.history) &&
             equal(a.forceFilter, b.forceFilter);
     }) as React.FunctionComponent<EntityCollectionViewProps<any>>
 
@@ -730,7 +784,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)
@@ -772,55 +826,94 @@ function buildPropertyWidthOverwrite(key: string, width: number): PartialEntityC
 
 function EntityIdHeaderWidget({
                                   collection,
-                                  path
+                                  path,
+                                  fullIdPath
                               }: {
     collection: EntityCollection,
-    path: string
+    path: string,
+    fullIdPath: 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}>
+        <Tooltip title={!openPopup ? "Find by ID" : undefined} asChild={false}>
             <Popover
                 open={openPopup}
                 onOpenChange={setOpenPopup}
+                sideOffset={0}
+                align={"start"}
+                alignOffset={-117}
                 trigger={
                     <IconButton size={"small"}>
                         <SearchIcon size={"small"}/>
                     </IconButton>
-                }
-            >
-                <form noValidate={true}
-                      onSubmit={(e) => {
-                          e.preventDefault();
-                          if (!searchString) return;
-                          setOpenPopup(false);
-                          return sideEntityController.open({
-                              entityId: searchString.trim(),
-                              path,
-                              collection,
-                              updateUrl: true,
-                          });
-                      }}
-                      className={"text-gray-900 dark:text-white w-96 max-w-full"}>
-
-                    <div className="flex p-2 w-full gap-4">
-                        <input
-                            autoFocus={openPopup}
-                            placeholder={"Find entity by ID"}
-                            // size={"small"}
-                            onChange={(e) => {
-                                setSearchString(e.target.value);
-                            }}
-                            value={searchString}
-                            className={"flex-grow bg-transparent outline-none p-1"}/>
-                        <Button variant={"outlined"}
-                                disabled={!(searchString.trim())}
-                                type={"submit"}
-                        >Go</Button>
-                    </div>
-                </form>
+                }>
+                <div
+                    className={cls("my-2 rounded-lg bg-surface-50 dark:bg-surface-950 text-surface-900 dark:text-white")}>
+                    <form noValidate={true}
+                          onSubmit={(e) => {
+                              e.preventDefault();
+                              if (!searchString) return;
+                              setOpenPopup(false);
+                              const entityId = searchString.trim();
+                              setRecentIds(addRecentId(collection.id, entityId));
+                              navigateToEntity({
+                                  openEntityMode,
+                                  collection,
+                                  entityId,
+                                  path,
+                                  fullIdPath,
+                                  sideEntityController,
+                                  navigation
+                              })
+                          }}
+                          className={"w-96 max-w-full"}>
+
+                        <div className="flex p-2 w-full gap-2">
+                            <input
+                                autoFocus={openPopup}
+                                placeholder={"Find entity by ID"}
+                                // size={"small"}
+                                onChange={(e) => {
+                                    setSearchString(e.target.value);
+                                }}
+                                value={searchString}
+                                className={"rounded-lg bg-white dark:bg-surface-800 flex-grow bg-transparent outline-none p-2 " + focusedDisabled}/>
+                            <Button variant={"text"}
+                                    disabled={!(searchString.trim())}
+                                    type={"submit"}
+                            ><KeyboardTabIcon/></Button>
+                        </div>
+                    </form>
+                    {recentIds && recentIds.length > 0 && <div className="flex flex-col gap-2 p-2">
+                        {recentIds.map(id => (
+                            <ReferencePreview reference={new EntityReference(id, path)}
+                                              key={id}
+                                              hover={true}
+                                              onClick={() => {
+                                                  setOpenPopup(false);
+                                                  navigateToEntity({
+                                                      openEntityMode,
+                                                      collection,
+                                                      entityId: id,
+                                                      path,
+                                                      fullIdPath,
+                                                      sideEntityController,
+                                                      navigation
+                                                  })
+                                              }}
+                                              includeEntityLink={false}
+                                              size={"small"}/>
+                        ))}
+                    </div>}
+                </div>
             </Popover>
 
         </Tooltip>

package/src/components/EntityCollectionView/EntityCollectionViewActions.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { canCreateEntity, canDeleteEntity, fullPathToCollectionSegments } from "../../util";
+import { canCreateEntity, canDeleteEntity } from "../../util";
 import { useAuthController, useCustomizationController, useFireCMSContext, useLargeLayout } from "../../hooks";
 import { CollectionActionsProps, EntityCollection, EntityTableController, SelectionController } from "../../types";
 import { AddIcon, Button, DeleteIcon, IconButton, Tooltip } from "@firecms/ui";
@@ -71,7 +71,7 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
             ? <Button
                 variant={"text"}
                 disabled={!(selectedEntities?.length) || !multipleDeleteEnabled}
-                startIcon={<DeleteIcon/>}
+                startIcon={<DeleteIcon size={"small"}/>}
                 onClick={onMultipleDeleteClick}
                 color={"primary"}
                 className="lg:w-20"
@@ -79,10 +79,11 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
                 ({selectedEntities?.length})
             </Button>
             : <IconButton
+                size={"small"}
                 color={"primary"}
                 disabled={!(selectedEntities?.length) || !multipleDeleteEnabled}
                 onClick={onMultipleDeleteClick}>
-                <DeleteIcon/>
+                <DeleteIcon size={"small"}/>
             </IconButton>;
         multipleDeleteButton =
             <Tooltip
@@ -124,7 +125,9 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
 
     return (
         <>
-            {actions}
+            <ErrorBoundary>
+                {actions}
+            </ErrorBoundary>
             {multipleDeleteButton}
             {addButton}
         </>

package/src/components/EntityCollectionView/useSelectionController.tsx

@@ -10,9 +10,10 @@ export function useSelectionController<M extends Record<string, any> = any>(
     const toggleEntitySelection = useCallback((entity: Entity<M>, newSelectedState?: boolean) => {
         let newValue;
         if (newSelectedState === undefined) {
-            if (selectedEntities.map(e => e.id).includes(entity.id)) {
+            const isSelected = Boolean(selectedEntities.find(e => e.id === entity.id && e.path === entity.path));
+            if (isSelected) {
                 onSelectionChange?.(entity, false);
-                newValue = selectedEntities.filter((item: Entity<M>) => item.id !== entity.id);
+                newValue = selectedEntities.filter((item: Entity<M>) => !(item.id === entity.id && item.path === entity.path));
             } else {
                 onSelectionChange?.(entity, true);
                 newValue = [...selectedEntities, entity];
@@ -23,14 +24,14 @@ export function useSelectionController<M extends Record<string, any> = any>(
                 newValue = [...selectedEntities, entity];
             } else {
                 onSelectionChange?.(entity, false);
-                newValue = selectedEntities.filter((item: Entity<M>) => item.id !== entity.id);
+                newValue = selectedEntities.filter((item: Entity<M>) => !(item.id === entity.id && item.path === entity.path));
             }
         }
         setSelectedEntities(newValue);
     }, [selectedEntities]);
 
     const isEntitySelected = useCallback((entity: Entity<M>) => {
-        return selectedEntities.map(e => e.id).includes(entity.id);
+        return Boolean(selectedEntities.find(e => e.id === entity.id && e.path === entity.path));
     }, [selectedEntities]);
 
     return {

package/src/components/EntityCollectionView/utils.ts

@@ -0,0 +1,19 @@
+export function addRecentId(collectionId: string, id: string) {
+    const recentIds = getRecentIds(collectionId);
+    const newRecentIds = [id, ...recentIds.filter(i => i !== id)];
+    if (newRecentIds.length > 5) {
+        newRecentIds.pop();
+    }
+    saveSearchedIdsLocally(collectionId, newRecentIds);
+    return newRecentIds;
+}
+
+export function saveSearchedIdsLocally(collectionId: string, ids: string[]) {
+    localStorage.setItem("recent_id_searches::" + collectionId, JSON.stringify(ids));
+}
+
+export function getRecentIds(collectionId: string): string[] {
+    const stored = localStorage.getItem("recent_id_searches::" + collectionId);
+    if (!stored) return [];
+    return JSON.parse(stored);
+}