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

package/src/core/EntitySidePanel.tsx

@@ -1,11 +1,13 @@
 import React, { useCallback, useEffect, useMemo } from "react";
 
 import { EntitySidePanelProps } from "../types";
-import { useNavigationController } from "../hooks";
+import { useNavigationController, useSideEntityController } from "../hooks";
 
 import { ErrorBoundary } from "../components";
-import { EntityEditView } from "./EntityEditView";
+import { EntityEditView, OnUpdateParams } from "./EntityEditView";
 import { useSideDialogContext } from "./SideDialogs";
+import { CloseIcon, IconButton, OpenInFullIcon } from "@firecms/ui";
+import { useLocation, useNavigate } from "react-router-dom";
 
 /**
  * This is the component in charge of rendering the side dialog used
@@ -20,11 +22,41 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     const {
         blocked,
         setBlocked,
-        setBlockedNavigationMessage
+        setBlockedNavigationMessage,
+        close
     } = useSideDialogContext();
 
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    const sideEntityController = useSideEntityController();
     const navigationController = useNavigationController();
 
+    const onClose = () => {
+        if (props.onClose) {
+            props.onClose();
+        }
+
+        setBlocked(false);
+        close(true);
+    }
+
+    const onUpdate = (params: OnUpdateParams) => {
+        if (props.onUpdate) {
+            props.onUpdate(params);
+        }
+        if (params.status !== "existing") {
+            sideEntityController.replace({
+                path: params.path,
+                entityId: params.entityId,
+                selectedTab: params.selectedTab,
+                updateUrl: true,
+                collection: params.collection,
+            });
+        }
+
+    }
+
     const parentCollectionIds = useMemo(() => {
         return navigationController.getParentCollectionIds(props.path);
     }, [navigationController, props.path]);
@@ -63,11 +95,11 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
 
     }, [blocked, collection]);
 
-    const onValuesAreModified = useCallback((modified: boolean) => {
-        setBlocked(modified);
+    const onValuesModified = useCallback((modified: boolean) => {
         setBlockedNavigationMessage(modified
             ? <> You have unsaved changes in this <b>{collection?.singularName ?? collection?.name}</b>.</>
             : undefined)
+        setBlocked(modified);
     }, [collection?.name, setBlocked, setBlockedNavigationMessage]);
 
     if (!props || !collection) {
@@ -79,9 +111,43 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
             <ErrorBoundary>
                 <EntityEditView
                     {...props}
+                    layout={"side_panel"}
                     collection={collection}
                     parentCollectionIds={parentCollectionIds}
-                    onValuesAreModified={onValuesAreModified}
+                    onValuesModified={onValuesModified}
+                    onClose={onClose}
+                    onSaved={onUpdate}
+                    barActions={<>
+                        <IconButton
+                            className="self-center"
+                            onClick={onClose}>
+                            <CloseIcon size={"small"}/>
+                        </IconButton>
+                        <IconButton
+                            className="self-center"
+                            onClick={() => {
+                                if (props.entityId)
+                                    navigate(location.pathname);
+                                else
+                                    navigate(location.pathname + "#new");
+                            }}>
+                            <OpenInFullIcon size={"small"}/>
+                        </IconButton>
+                    </>}
+                    onTabChange={({
+                                      path,
+                                      entityId,
+                                      selectedTab,
+                                      collection
+                                  }) => {
+                        sideEntityController.replace({
+                            path,
+                            entityId,
+                            selectedTab,
+                            updateUrl: true,
+                            collection
+                        });
+                    }}
                 />
             </ErrorBoundary>
 

package/src/core/FireCMS.tsx

@@ -19,6 +19,7 @@ import { useBuildDataSource } from "../internal/useBuildDataSource";
 import { CustomizationControllerContext } from "../contexts/CustomizationControllerContext";
 import { AnalyticsContext } from "../contexts/AnalyticsContext";
 import { useProjectLog } from "../hooks/useProjectLog";
+import { BreadcrumbsProvider } from "../contexts/BreacrumbsContext";
 
 /**
  * If you are using independent components of the CMS
@@ -147,10 +148,12 @@ export function FireCMS<USER extends User, EC extends EntityCollection>(props: F
                                         <NavigationContext.Provider
                                             value={navigationController}>
                                             <DialogsProvider>
-                                                <FireCMSInternal
-                                                    loading={loading}>
-                                                    {children}
-                                                </FireCMSInternal>
+                                                <BreadcrumbsProvider>
+                                                    <FireCMSInternal
+                                                        loading={loading}>
+                                                        {children}
+                                                    </FireCMSInternal>
+                                                </BreadcrumbsProvider>
                                             </DialogsProvider>
                                         </NavigationContext.Provider>
                                     </SideEntityControllerContext.Provider>

package/src/core/FireCMSRouter.tsx

@@ -0,0 +1,17 @@
+import { createBrowserRouter, RouterProvider } from "react-router-dom"
+import { removeInitialAndTrailingSlashes } from "../util";
+
+export function FireCMSRouter({
+                           children,
+                           basePath
+                       }: {
+    children: React.ReactNode,
+    basePath?: string;
+}) {
+    return <RouterProvider router={createBrowserRouter([
+        {
+            path: basePath ? `${removeInitialAndTrailingSlashes(basePath)}/*` : "/*",
+            element: children
+        }
+    ])}/>;
+}

package/src/core/NavigationRoutes.tsx

@@ -2,9 +2,11 @@ import React from "react";
 
 import { Route, Routes, useLocation } from "react-router-dom";
 import { CMSView } from "../types";
-import { DefaultHomePage, EntityCollectionView, ErrorBoundary, NotFoundPage } from "../components";
+import { DefaultHomePage, ErrorBoundary, NotFoundPage } from "../components";
 import { useNavigationController } from "../hooks";
-import { toArray } from "../util/arrays";
+import { FireCMSRoute } from "../routes/FireCMSRoute";
+import { CustomCMSRoute } from "../routes/CustomCMSRoute";
+import { HomePageRoute } from "../routes/HomePageRoute";
 
 /**
  * @group Components
@@ -25,7 +27,6 @@ export type NavigationRoutesProps = {
  * or the home route) related to a {@link NavigationController}.
  * This component needs a parent {@link FireCMS}
  *
-
  * @group Components
  */
 export const NavigationRoutes = React.memo<NavigationRoutesProps>(
@@ -67,32 +68,18 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
             });
         }
 
-        // we reorder collections so that nested paths are included first
-        const sortedCollections = [...(navigation.collections ?? [])]
-            .sort((a, b) => b.path.length - a.path.length);
-
-        const collectionRoutes = sortedCollections
-            .map((collection) => {
-                    const urlPath = navigation.buildUrlCollectionPath(collection.id ?? collection.path);
-                    return <Route path={urlPath + "/*"}
-                                  key={`navigation_${collection.id ?? collection.path}`}
-                                  element={
-                                      <ErrorBoundary>
-                                          <EntityCollectionView
-                                              key={`collection_view_${collection.id ?? collection.path}`}
-                                              isSubCollection={false}
-                                              parentCollectionIds={[]}
-                                              fullPath={collection.id ?? collection.path}
-                                              {...collection}
-                                              Actions={toArray(collection.Actions)}/>
-                                      </ErrorBoundary>
-                                  }/>;
-                }
-            );
+        const urlPath = navigation.buildUrlCollectionPath("");
+        const collectionRoute = <Route path={urlPath + "/*"}
+                                       key={`navigation_entity`}
+                                       element={
+                                           <ErrorBoundary>
+                                               <FireCMSRoute/>
+                                           </ErrorBoundary>
+                                       }/>
 
         const homeRoute = (
             <Route path={"/"}
-                   element={homePage}/>
+                   element={<HomePageRoute>{homePage}</HomePageRoute>}/>
         );
 
         const notFoundRoute = <Route path={"*"}
@@ -103,7 +90,7 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
         return (
             <Routes location={baseLocation}>
 
-                {collectionRoutes}
+                {collectionRoute}
 
                 {cmsViews}
 
@@ -121,6 +108,6 @@ const buildCMSViewRoute = (path: string, cmsView: CMSView) => {
     return <Route
         key={"navigation_view_" + path}
         path={path}
-        element={cmsView.view}
+        element={<CustomCMSRoute cmsView={cmsView}/>}
     />;
 };

package/src/core/SideDialogs.tsx

@@ -2,8 +2,9 @@ import React, { useContext, useEffect, useState } from "react";
 import { useSideDialogsController } from "../hooks";
 import { SideDialogPanelProps } from "../types";
 import { Sheet } from "@firecms/ui";
-import { UnsavedChangesDialog, useNavigationUnsavedChangesDialog } from "../internal/useUnsavedChangesDialog";
+import { useNavigationUnsavedChangesDialog } from "../internal/useUnsavedChangesDialog";
 import { ErrorBoundary } from "../components";
+import { UnsavedChangesDialog } from "../components/UnsavedChangesDialog";
 
 export type SideDialogContextProps = {
     blocked: boolean,
@@ -111,8 +112,6 @@ function SideDialogView({
         }
     };
 
-    // const offsetClass = offsetPosition > 0 ? `transform translate-x-${offsetPosition}` : "";
-
     return (
         <SideDialogContext.Provider
             value={{
@@ -127,13 +126,19 @@ function SideDialogView({
                 open={Boolean(panel)}
                 onOpenChange={(open) => !open && onCloseRequest()}
                 title={"Side dialog " + panel?.key}
+                // style={{
+                //     zIndex: offsetPosition * 20 + 20,
+                // }}
+                // overlayStyle={{
+                //     zIndex: offsetPosition * 20 + 10,
+                // }}
             >
                 {panel &&
                     <div
                         className={"transform max-w-[100vw] lg:max-w-[95vw] flex flex-col h-full transition-all duration-250 ease-in-out bg-white dark:bg-surface-900 "}
                         style={{
                             width: panel.width,
-                            transform: `translateX(-${offsetPosition * 200}px)`
+                            transform: `translateX(-${offsetPosition * 200}px)`,
                         }}
                     >
                         <ErrorBoundary>
@@ -146,7 +151,7 @@ function SideDialogView({
             </Sheet>
 
             <UnsavedChangesDialog
-                open={navigationWasBlocked || drawerCloseRequested}
+                open={drawerCloseRequested}
                 handleOk={drawerCloseRequested ? handleDrawerCloseOk : handleNavigationOk}
                 handleCancel={drawerCloseRequested ? handleDrawerCloseCancel : handleNavigationCancel}
                 body={blockedNavigationMessage}/>

package/src/core/index.tsx

@@ -1,7 +1,5 @@
 export * from "./FireCMS";
 
-export * from "../app/Scaffold";
-
 export * from "./DefaultDrawer";
 export * from "./DrawerNavigationItem";
 
@@ -9,3 +7,7 @@ export * from "./field_configs";
 
 export * from "./SideDialogs";
 export * from "./NavigationRoutes";
+
+export * from "./FireCMSRouter";
+
+export * from "../app";

package/src/hooks/data/save.ts

@@ -75,7 +75,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, USE
 
     const customizationController = context.customizationController;
 
-    const resolvedPath = context.navigation.resolveAliasesFrom(path);
+    const resolvedPath = context.navigation.resolveIdsFrom(path);
 
     const callbacks = collection.callbacks;
     if (callbacks?.onPreSave) {

package/src/hooks/data/useCollectionFetch.tsx

@@ -73,7 +73,7 @@ export function useCollectionFetch<M extends Record<string, any>, USER extends U
     const dataSource = useDataSource(collection);
     const navigationController = useNavigationController();
 
-    const path = navigationController.resolveAliasesFrom(inputPath);
+    const path = navigationController.resolveIdsFrom(inputPath);
 
     const sortByProperty = sortBy ? sortBy[0] : undefined;
     const currentSort = sortBy ? sortBy[1] : undefined;

package/src/hooks/data/useEntityFetch.tsx

@@ -10,6 +10,7 @@ import { useFireCMSContext } from "../useFireCMSContext";
 export interface EntityFetchProps<M extends Record<string, any>, USER extends User = User> {
     path: string;
     entityId?: string;
+    databaseId?: string;
     collection: EntityCollection<M, USER>;
     useCache?: boolean;
 }
@@ -40,13 +41,14 @@ export function useEntityFetch<M extends Record<string, any>, USER extends User>
         path: inputPath,
         entityId,
         collection,
+        databaseId,
         useCache = false
     }: EntityFetchProps<M, USER>): EntityFetchResult<M> {
 
     const dataSource = useDataSource(collection);
     const navigationController = useNavigationController();
 
-    const path = navigationController.resolveAliasesFrom(inputPath);
+    const path = navigationController.resolveIdsFrom(inputPath);
 
     const context: FireCMSContext<USER> = useFireCMSContext();
 
@@ -96,6 +98,7 @@ export function useEntityFetch<M extends Record<string, any>, USER extends User>
                 return dataSource.listenEntity<M>({
                     path,
                     entityId,
+                    databaseId,
                     collection,
                     onUpdate: onEntityUpdate,
                     onError
@@ -104,6 +107,7 @@ export function useEntityFetch<M extends Record<string, any>, USER extends User>
                 dataSource.fetchEntity<M>({
                     path,
                     entityId,
+                    databaseId,
                     collection
                 })
                     .then(onEntityUpdate)

package/src/hooks/useBreadcrumbsController.tsx

@@ -0,0 +1,31 @@
+import { useContext } from "react";
+import { BreadcrumbContext } from "../contexts/BreacrumbsContext";
+
+/**
+ * @group Hooks and utilities
+ */
+export interface BreadcrumbsController {
+    breadcrumbs: BreadcrumbEntry[];
+    set: (props: {
+        breadcrumbs: BreadcrumbEntry[];
+    }) => void;
+}
+
+/**
+ * @group Hooks and utilities
+ */
+export interface BreadcrumbEntry {
+    title: string;
+    url: string;
+}
+
+/**
+ * Hook to retrieve the BreadcrumbsController.
+ *
+ * Consider that in order to use this hook you need to have a parent
+ * `FireCMS`
+ *
+ * @see BreadcrumbsController
+ * @group Hooks and utilities
+ */
+export const useBreadcrumbsController = (): BreadcrumbsController => useContext(BreadcrumbContext);

package/src/hooks/useBuildNavigationController.tsx

@@ -9,6 +9,7 @@ import {
     EntityCollection,
     EntityCollectionsBuilder,
     EntityReference,
+    NavigationBlocker,
     NavigationController,
     PermissionsBuilder,
     TopNavigationEntry,
@@ -26,6 +27,7 @@ import {
     resolvePermissions
 } from "../util";
 import { getParentReferencesFromPath } from "../util/parent_references_from_path";
+import { useBlocker, useNavigate } from "react-router-dom";
 
 const DEFAULT_BASE_PATH = "/";
 const DEFAULT_COLLECTION_PATH = "/c";
@@ -66,6 +68,8 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         injectCollections
     } = props;
 
+    const navigate = useNavigate();
+
     const collectionsRef = useRef<EntityCollection[] | undefined>();
     const viewsRef = useRef<CMSView[] | undefined>();
     const adminViewsRef = useRef<CMSView[] | undefined>();
@@ -332,16 +336,7 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         throw Error("Expected path starting with " + fullCollectionPath);
     }, [fullCollectionPath]);
 
-    const buildUrlEditCollectionPath = useCallback(({
-                                                        path
-                                                    }: {
-            path: string
-        }): string => {
-            return `s/edit/${encodePath(path)}`;
-        },
-        []);
-
-    const resolveAliasesFrom = useCallback((path: string): string => {
+    const resolveIdsFrom = useCallback((path: string): string => {
         const collections = collectionsRef.current ?? [];
         return resolveCollectionPathIds(path, collections);
     }, []);
@@ -401,24 +396,16 @@ export function useBuildNavigationController<EC extends EntityCollection, USER e
         isUrlCollectionPath,
         urlPathToDataPath,
         buildUrlCollectionPath,
-        buildUrlEditCollectionPath,
-        buildCMSUrlPath,
-        resolveAliasesFrom,
+        resolveIdsFrom,
         topLevelNavigation,
         refreshNavigation,
         getParentReferencesFromPath: getAllParentReferencesForPath,
         getParentCollectionIds,
-        convertIdsToPaths
+        convertIdsToPaths,
+        navigate,
     };
 }
 
-export function getSidePanelKey(path: string, entityId?: string) {
-    if (entityId)
-        return `${removeInitialAndTrailingSlashes(path)}/${removeInitialAndTrailingSlashes(entityId)}`;
-    else
-        return removeInitialAndTrailingSlashes(path);
-}
-
 function encodePath(input: string) {
     return encodeURIComponent(removeInitialAndTrailingSlashes(input))
         .replaceAll("%2F", "/")
@@ -513,3 +500,54 @@ function areCollectionsEqual(a: EntityCollection, b: EntityCollection) {
     }
     return equal(removeFunctions(restA), removeFunctions(restB));
 }
+
+function useCustomBlocker(): NavigationBlocker {
+    const [blockListeners, setBlockListeners] = useState<Record<string, {
+        block: boolean,
+        basePath?: string
+    }>>({});
+
+    const shouldBlock = Object.values(blockListeners).some(b => b.block);
+
+    let blocker: any;
+    try {
+        blocker = useBlocker(({
+                                  nextLocation
+                              }) => {
+            const allBasePaths = Object.values(blockListeners).map(b => b.basePath).filter(Boolean) as string[];
+            if (allBasePaths && allBasePaths.some(path => nextLocation.pathname.startsWith(path)))
+                return false;
+            return shouldBlock;
+        });
+    } catch (e) {
+        console.warn("Blocker not available, navigation will not be blocked");
+    }
+
+    const updateBlockListener = (path: string, block: boolean, basePath?: string) => {
+        setBlockListeners(prev => ({
+            ...prev,
+            [path]: {
+                block,
+                basePath
+            }
+        }));
+        return () => setBlockListeners(prev => {
+            const {
+                [path]: removed,
+                ...rest
+            } = prev;
+            return rest;
+        })
+    };
+
+    const isBlocked = (path: string) => {
+        return (blockListeners[path]?.block ?? false) && blocker?.state === "blocked";
+    }
+
+    return {
+        updateBlockListener,
+        isBlocked,
+        proceed: blocker?.proceed,
+        reset: blocker?.reset
+    }
+}

package/src/hooks/useLargeLayout.tsx

@@ -63,38 +63,3 @@ function checkLargeLayout(breakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" |
         return false;
     return window.matchMedia(`(min-width: ${breakpoints[breakpoint] + 1}px)`).matches;
 }
-
-// import { useEffect, useState } from "react";
-//
-// const breakpoints = {
-//     xs: 0,
-//     sm: 640,
-//     md: 768,
-//     lg: 1024,
-//     xl: 1280,
-//     "2xl": 1536,
-//     "3xl": 1920
-// }
-// export const useLargeLayout = (breakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" = "lg"): boolean => {
-//     const [isLargeLayout, setIsLargeLayout] = useState<boolean>(false);
-//
-//     useEffect(() => {
-//         const handleResize = () => {
-//             const matched = window.matchMedia(`(min-width: ${breakpoints[breakpoint] + 1}px)`).matches;
-//             setIsLargeLayout(matched);
-//         };
-//
-//         // Set initial state
-//         handleResize();
-//
-//         // Set up event listener for resize events
-//         window.addEventListener("resize", handleResize);
-//
-//         // Clean up event listener when component unmounts
-//         return () => {
-//             window.removeEventListener("resize", handleResize);
-//         };
-//     }, []);
-//
-//     return isLargeLayout;
-// };

package/src/hooks/useResolvedNavigationFrom.tsx

@@ -1,6 +1,6 @@
 import { Entity, EntityCollection, EntityCustomView, FireCMSContext, User } from "../types";
 import { useEffect, useState } from "react";
-import { getNavigationEntriesFromPathInternal } from "../util/navigation_from_path";
+import { getNavigationEntriesFromPath } from "../util/navigation_from_path";
 import { useFireCMSContext } from "./useFireCMSContext";
 
 /**
@@ -67,10 +67,10 @@ export function resolveNavigationFrom<M extends Record<string, any>, USER extend
     const navigation = context.navigation;
 
     if (!navigation) {
-        throw Error("Calling getNavigationFrom, but main navigation has not yet been initialised");
+        throw Error("Calling resolveNavigationFrom, but main navigation has not yet been initialised");
     }
 
-    const navigationEntries = getNavigationEntriesFromPathInternal({
+    const navigationEntries = getNavigationEntriesFromPath({
         path,
         collections: navigation.collections ?? []
     });
@@ -143,9 +143,7 @@ export function useResolvedNavigationFrom<M extends Record<string, any>, USER ex
             setDataLoading(true);
             setDataLoadingError(undefined);
             resolveNavigationFrom<M, USER>({ path, context })
-                .then((res) => {
-                    setData(res);
-                })
+                .then(setData)
                 .catch((e) => setDataLoadingError(e))
                 .finally(() => setDataLoading(false));
         }

package/src/internal/useBuildSideDialogsController.tsx

@@ -25,8 +25,9 @@ export function useBuildSideDialogsController(): SideDialogsController {
         const newPanels = panelKeys
             .map(key => routesStore.current[key])
             .filter(p => Boolean(p)) as SideDialogPanelProps[];
-        if (!equal(sidePanelsRef.current.map(p => p.key), newPanels.map(p => p.key)))
+        if (!equal(sidePanelsRef.current.map(p => p.key), newPanels.map(p => p.key))) {
             updateSidePanels(newPanels);
+        }
     }, [location]);
 
     const close = useCallback(() => {
@@ -39,7 +40,7 @@ export function useBuildSideDialogsController(): SideDialogsController {
         updateSidePanels(updatedPanels);
 
         if (routesCount.current > 0) {
-            if (lastSidePanel.urlPath)
+            if (lastSidePanel.urlPath) // if it has a url path, we need to navigate back, don't remove this code
                 navigate(-1);
             routesCount.current--;
         } else if (lastSidePanel.parentUrlPath) {
@@ -89,6 +90,7 @@ export function useBuildSideDialogsController(): SideDialogsController {
 
     const replace = useCallback((panelProps: SideDialogPanelProps | SideDialogPanelProps[]) => {
 
+        console.log("replace", panelProps);
         const newPanels: SideDialogPanelProps[] = Array.isArray(panelProps) ? panelProps : [panelProps];
         newPanels.forEach((panel) => {
             routesStore.current[panel.key] = panel;