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

package/src/components/common/useTableSearchHelper.ts

@@ -28,6 +28,7 @@ export function useTableSearchHelper<M extends Record<string, any>>({
     const props = {
         context,
         path: fullPath,
+        databaseId: collection.databaseId,
         collection,
         parentCollectionIds
     };

package/src/components/index.tsx

@@ -19,13 +19,14 @@ export * from "./EntityCollectionView/EntityCollectionViewActions";
 export * from "./EntityCollectionView/useSelectionController";
 
 export * from "./PropertyConfigBadge";
+export * from "./PropertyIdCopyTooltip";
 
 export * from "./EntityCollectionTable";
 export * from "./NotFoundPage";
 
 export * from "./VirtualTable";
 export * from "./ErrorBoundary";
-export * from "./DeleteConfirmationDialog";
+export * from "./ConfirmationDialog";
 
 export * from "./FireCMSLogo";
 
@@ -35,3 +36,5 @@ export * from "./ArrayContainer";
 export * from "./ReferenceWidget";
 export * from "./SearchIconsView";
 export * from "./FieldCaption";
+
+export * from "./EntityPreview";

package/src/contexts/BreacrumbsContext.tsx

@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import { BreadcrumbEntry, BreadcrumbsController } from "../hooks/useBreadcrumbsController";
+
+const DEFAULT_BREADCRUMBS_CONTROLLER = {
+    breadcrumbs: [],
+    set: (props: {
+        breadcrumbs: BreadcrumbEntry[];
+    }) => {
+    }
+};
+
+export const BreadcrumbContext = React.createContext<BreadcrumbsController>(DEFAULT_BREADCRUMBS_CONTROLLER);
+
+interface BreadcrumbsProviderProps {
+    children: React.ReactNode;
+}
+
+export const BreadcrumbsProvider: React.FC<BreadcrumbsProviderProps> = ({ children }) => {
+
+    const [breadcrumbs, setBreadcrumbs] = useState<BreadcrumbEntry[]>([]);
+
+    const set = (props: {
+        breadcrumbs: BreadcrumbEntry[];
+    }) => {
+        setBreadcrumbs(props.breadcrumbs);
+    };
+
+    return (
+        <BreadcrumbContext.Provider
+            value={{
+                breadcrumbs,
+                set
+            }}
+        >
+            {children}
+        </BreadcrumbContext.Provider>
+    );
+};

package/src/contexts/DialogsProvider.tsx

@@ -8,7 +8,7 @@ export const DialogsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) =
     const [dialogEntries, setDialogEntries] = useState<DialogControllerEntryProps[]>([]);
     const dialogEntriesRef = useRef<DialogControllerEntryProps[]>(dialogEntries);
 
-    const updateDialogEntries = (newPanels: DialogControllerEntryProps[]) => {
+    const updateDialogEntries = (newPanels: DialogControllerEntryProps<any>[]) => {
         dialogEntriesRef.current = newPanels;
         setDialogEntries(newPanels);
     };
@@ -23,7 +23,7 @@ export const DialogsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) =
 
     }, [dialogEntries]);
 
-    const open = useCallback((dialogEntry: DialogControllerEntryProps) => {
+    const open = useCallback(<T extends object = object>(dialogEntry: DialogControllerEntryProps<T>) => {
 
         const updatedPanels = [...dialogEntriesRef.current, dialogEntry];
         updateDialogEntries(updatedPanels);
@@ -46,6 +46,7 @@ export const DialogsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) =
                 key={`dialog_${i}`}
                 open={true}
                 closeDialog={close}
+                {...entry.props}
             />)}
         </DialogsControllerContext.Provider>
     );

package/src/contexts/ModeController.tsx

@@ -3,10 +3,8 @@ import { ModeController } from "../hooks";
 
 const DEFAULT_MODE_STATE: ModeController = {
     mode: "light",
-    setMode: (mode: "light" | "dark") => {
+    setMode: (mode: "light" | "dark" | "system") => {
     },
-    toggleMode: () => {
-    }
 };
 export const ModeControllerContext = React.createContext<ModeController>(DEFAULT_MODE_STATE);
 

package/src/contexts/SnackbarProvider.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { PropsWithChildren } from "react";
 import { SnackbarProvider as NotistackSnackbarProvider } from "notistack";
 

package/src/core/DefaultAppBar.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 
-import { Link as ReactLink, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { ErrorBoundary, FireCMSLogo } from "../components";
 import {
     Avatar,
+    BrightnessMediumIcon,
     cls,
     DarkModeIcon,
     IconButton,
@@ -17,15 +18,23 @@ import {
 import { useAuthController, useLargeLayout, useModeController, useNavigationController } from "../hooks";
 import { User } from "../types";
 import { useApp } from "../app/useApp";
+import { useBreadcrumbsController } from "../hooks/useBreadcrumbsController";
 
 export type DefaultAppBarProps<ADDITIONAL_PROPS = object> = {
 
+    /**
+     * The content of the app bar, usually a title or logo. This includes a link to the home page.
+     */
     title?: React.ReactNode;
+
     /**
-     * A component that gets rendered on the upper side of the main toolbar
+     * A component that gets rendered on the upper side to the end of the main toolbar
      */
     endAdornment?: React.ReactNode;
 
+    /**
+     * A component that gets rendered on the upper side to the start of the main toolbar
+     */
     startAdornment?: React.ReactNode;
 
     dropDownActions?: React.ReactNode;
@@ -55,20 +64,26 @@ export const DefaultAppBar = function DefaultAppBar({
                                                         includeModeToggle = true,
                                                         className,
                                                         style,
-                                                        user: userProp
+                                                        user: userProp,
+                                                        logo: logoProp,
                                                     }: DefaultAppBarProps) {
 
     const {
         hasDrawer,
         drawerOpen,
-        logo
+        logo: appLogo
     } = useApp();
+
+    const logo = logoProp ?? appLogo;
+
     const navigation = useNavigationController();
 
+    const breadcrumbs = useBreadcrumbsController();
+
     const authController = useAuthController();
     const {
         mode,
-        toggleMode
+        setMode
     } = useModeController();
 
     const navigate = useNavigate();
@@ -77,104 +92,128 @@ export const DefaultAppBar = function DefaultAppBar({
 
     const user = userProp ?? authController.user;
 
-    let avatarComponent: JSX.Element;
-    if (user && user.photoURL) {
-        avatarComponent = <Avatar
-            src={user.photoURL}/>;
+    let avatarComponent: JSX.Element | null;
+
+    if (user) {
+        const initial = user?.displayName
+            ? user.displayName[0].toUpperCase()
+            : (user?.email ? user.email[0].toUpperCase() : "A");
+        avatarComponent = <Avatar src={user.photoURL ?? undefined}>
+            {initial}
+        </Avatar>;
     } else if (user === undefined || authController.initialLoading) {
         avatarComponent = <div className={"p-1 flex justify-center"}>
             <Skeleton className={"w-10 h-10 rounded-full"}/>
         </div>;
     } else {
-        const initial = user?.displayName
-            ? user.displayName[0].toUpperCase()
-            : (user?.email ? user.email[0].toUpperCase() : "A");
-        avatarComponent = <Avatar>{initial}</Avatar>;
+        avatarComponent = null;
     }
 
     return (
         <div
             style={style}
-            className={cls("w-full h-16 transition-all ease-in duration-75 fixed",
+            className={cls("w-full h-16 transition-all ease-in duration-75 absolute top-0 max-w-full overflow-x-auto no-scrollbar",
+                "flex flex-row gap-2 px-4 items-center",
                 {
-                    "pl-[17rem]": drawerOpen && largeLayout,
-                    "pl-20": hasDrawer && !(drawerOpen && largeLayout),
+                    "pl-[19rem]": drawerOpen && largeLayout,
+                    "pl-24": hasDrawer && !(drawerOpen && largeLayout),
                     "z-10": largeLayout,
-                    // "w-full": !hasDrawer,
-                    // "w-[calc(100%-64px)]": hasDrawer && !(drawerOpen && largeLayout),
-                    // "w-[calc(100%-17rem)]": hasDrawer && (drawerOpen && largeLayout),
-                    "duration-150": drawerOpen && largeLayout,
+                    "duration-100": drawerOpen && largeLayout,
                 },
                 className)}>
 
-            <div className="flex flex-row gap-2 px-4 h-full items-center">
-
-                {navigation && <div className="mr-8 hidden lg:block">
-                    <ReactLink
-                        className="visited:text-inherit visited:dark:text-inherit"
-                        to={navigation?.basePath ?? "/"}
-                    >
-                        <div className={"flex flex-row gap-4"}>
-                            {!hasDrawer && (logo
-                                ? <img src={logo}
-                                       alt="Logo"
-                                       className={cls("w-[32px] h-[32px] object-contain")}/>
-                                : <FireCMSLogo width={"32px"} height={"32px"}/>)}
-
-                            {typeof title === "string"
-                                ? <Typography variant="subtitle1"
-                                              noWrap
-                                              className={"ml-2 !font-medium"}>
-                                    {title}
+
+            {navigation && <div className="mr-2 hidden lg:block">
+                <Link
+                    className="visited:text-inherit visited:dark:text-inherit block"
+                    to={navigation?.basePath ?? "/"}
+                >
+                    <div className={"flex flex-row gap-4"}>
+                        {!hasDrawer && (logo
+                            ? <img src={logo}
+                                   alt="Logo"
+                                   className={cls("w-[32px] h-[32px] object-contain")}/>
+                            : <FireCMSLogo width={"32px"} height={"32px"}/>)}
+
+                        {typeof title === "string"
+                            ? <Typography variant="subtitle1"
+                                          noWrap>
+                                {title}
+                            </Typography>
+                            : title}
+                    </div>
+                </Link>
+            </div>}
+
+            {(breadcrumbs.breadcrumbs ?? []).length > 0 && <div className="mr-8 hidden lg:block">
+                <div className={"flex flex-row gap-2"}>
+                    {breadcrumbs.breadcrumbs.map((breadcrumb, index) => {
+                        return <React.Fragment key={breadcrumb.url + "_" + index}>
+                            <Typography variant={"caption"} color={"secondary"}>
+                                /
+                            </Typography>
+                            <Link
+                                key={index}
+                                className="visited:text-inherit visited:dark:text-inherit block"
+                                to={breadcrumb.url}
+                            >
+                                <Typography variant={"caption"} color={"secondary"}>
+                                    {breadcrumb.title}
                                 </Typography>
-                                : title}
-                        </div>
-                    </ReactLink>
+                            </Link>
+                        </React.Fragment>;
+                    })}
+                </div>
+            </div>}
+
+            {startAdornment}
+
+            <div className={"flex-grow"}/>
+
+            {endAdornment &&
+                <ErrorBoundary>
+                    {endAdornment}
+                </ErrorBoundary>}
+
+            {includeModeToggle &&
+                <Menu
+                    trigger={<IconButton
+                        color="inherit"
+                        aria-label="Open drawer"
+                        size="large">
+                        {mode === "dark"
+                            ? <DarkModeIcon/>
+                            : <LightModeIcon/>}
+                    </IconButton>}>
+                    <MenuItem onClick={() => setMode("dark")}><DarkModeIcon size={"smallest"}/> Dark</MenuItem>
+                    <MenuItem onClick={() => setMode("light")}><LightModeIcon size={"smallest"}/> Light </MenuItem>
+                    <MenuItem onClick={() => setMode("system")}> <BrightnessMediumIcon
+                        size={"smallest"}/>System</MenuItem>
+                </Menu>}
+
+            <Menu trigger={avatarComponent}>
+                {user && <div className={"px-4 py-2 mb-2"}>
+                    {user.displayName && <Typography variant={"body1"} color={"secondary"}>
+                        {user.displayName}
+                    </Typography>}
+                    {user.email && <Typography variant={"body2"} color={"secondary"}>
+                        {user.email}
+                    </Typography>}
                 </div>}
 
-                {startAdornment}
-
-                <div className={"flex-grow"}/>
-
-                {endAdornment &&
-                    <ErrorBoundary>
-                        {endAdornment}
-                    </ErrorBoundary>}
-
-                {includeModeToggle && <IconButton
-                    color="inherit"
-                    aria-label="Open drawer"
-                    onClick={toggleMode}
-                    size="large">
-                    {mode === "dark"
-                        ? <DarkModeIcon/>
-                        : <LightModeIcon/>}
-                </IconButton>}
-
-                <Menu trigger={avatarComponent}>
-                    {user && <div className={"px-4 py-2 mb-2"}>
-                        {user.displayName && <Typography variant={"body1"} color={"secondary"}>
-                            {user.displayName}
-                        </Typography>}
-                        {user.email && <Typography variant={"body2"} color={"secondary"}>
-                            {user.email}
-                        </Typography>}
-                    </div>}
-
-                    {dropDownActions}
-
-                    {!dropDownActions && <MenuItem onClick={async () => {
-                        await authController.signOut();
-                        // replace current route with home
-                        navigate("/");
-                    }}>
-                        <LogoutIcon/>
-                        Log Out
-                    </MenuItem>}
-
-                </Menu>
-
-            </div>
+                {dropDownActions}
+
+                {!dropDownActions && <MenuItem onClick={async () => {
+                    await authController.signOut();
+                    // replace current route with home
+                    navigate("/");
+                }}>
+                    <LogoutIcon/>
+                    Log Out
+                </MenuItem>}
+
+            </Menu>
+
         </div>
     );
 }

package/src/core/DefaultDrawer.tsx

@@ -3,7 +3,7 @@ import React, { useCallback } from "react";
 import { useLargeLayout, useNavigationController } from "../hooks";
 
 import { Link, useNavigate } from "react-router-dom";
-import { CMSAnalyticsEvent, TopNavigationEntry, TopNavigationResult } from "../types";
+import { CMSAnalyticsEvent, NavigationEntry, NavigationResult } from "../types";
 import { IconForView } from "../util";
 import { cls, IconButton, Menu, MenuItem, MoreVertIcon, Tooltip, Typography } from "@firecms/ui";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
@@ -30,30 +30,30 @@ export function DefaultDrawer({
         logo
     } = useApp();
 
+    const [adminMenuOpen, setAdminMenuOpen] = React.useState(false);
+
     const analyticsController = useAnalyticsController();
     const navigation = useNavigationController();
 
-    const tooltipsOpen = drawerHovered && !drawerOpen;
+    const tooltipsOpen = drawerHovered && !drawerOpen && !adminMenuOpen;
     const largeLayout = useLargeLayout();
     const navigate = useNavigate();
 
-    const [adminMenuOpen, setAdminMenuOpen] = React.useState(false);
-
     if (!navigation.topLevelNavigation)
         throw Error("Navigation not ready in Drawer");
 
     const {
         navigationEntries,
         groups
-    }: TopNavigationResult = navigation.topLevelNavigation;
+    }: NavigationResult = navigation.topLevelNavigation;
 
     const adminViews = navigationEntries.filter(e => e.type === "admin") ?? [];
     const groupsWithoutAdmin = groups.filter(g => g !== "Admin");
 
     const buildGroupHeader = useCallback((group?: string) => {
-        if (!drawerOpen) return <div className="h-12 w-full"/>;
+        if (!drawerOpen) return <div className="w-full"/>;
         return <div
-            className="pt-8 pl-6 pr-8 pb-2 flex flex-row items-center">
+            className="pl-6 pr-8 py-4 flex flex-row items-center">
             <Typography variant={"caption"}
                         color={"secondary"}
                         className="font-medium flex-grow line-clamp-1">
@@ -63,7 +63,7 @@ export function DefaultDrawer({
         </div>;
     }, [drawerOpen]);
 
-    const onClick = (view: TopNavigationEntry) => {
+    const onClick = (view: NavigationEntry) => {
         const eventName: CMSAnalyticsEvent = view.type === "collection"
             ? "drawer_navigate_to_collection"
             : (view.type === "view" ? "drawer_navigate_to_view" : "unmapped_event");
@@ -78,35 +78,42 @@ export function DefaultDrawer({
 
                 <DrawerLogo logo={logo}/>
 
-                <div className={"overflow-scroll no-scrollbar"}>
+                <div className={"mt-4 flex-grow overflow-scroll no-scrollbar"}
+                     style={{
+                         maskImage: "linear-gradient(to bottom, transparent 0, black 20px, black calc(100% - 20px), transparent 100%)",
+                     }}>
 
                     {groupsWithoutAdmin.map((group) => (
-                        <React.Fragment
+                        <div
+                            className={"bg-surface-50 dark:bg-surface-800 dark:bg-opacity-30 my-4 rounded-lg ml-3 mr-1"}
                             key={`drawer_group_${group}`}>
                             {buildGroupHeader(group)}
                             {Object.values(navigationEntries)
                                 .filter(e => e.group === group)
-                                .map((view, index) =>
+                                .map((view) =>
                                     <DrawerNavigationItem
-                                        key={`navigation_${index}`}
-                                        icon={<IconForView collectionOrView={view.collection ?? view.view}/>}
+                                        key={view.id}
+                                        icon={<IconForView collectionOrView={view.collection ?? view.view}
+                                                           size={"small"}/>}
                                         tooltipsOpen={tooltipsOpen}
+                                        adminMenuOpen={adminMenuOpen}
                                         drawerOpen={drawerOpen}
                                         onClick={() => onClick(view)}
                                         url={view.url}
                                         name={view.name}/>)}
-                        </React.Fragment>
+                        </div>
                     ))}
 
                 </div>
 
                 {adminViews.length > 0 && <Menu
+                    side={"right"}
                     open={adminMenuOpen}
                     onOpenChange={setAdminMenuOpen}
                     trigger={
                         <IconButton
                             shape={"square"}
-                            className={"m-4 text-gray-900 dark:text-white w-fit"}>
+                            className={"m-4 text-surface-900 dark:text-white w-fit"}>
                             <Tooltip title={"Admin"}
                                      open={tooltipsOpen}
                                      side={"right"} sideOffset={28}>
@@ -121,13 +128,13 @@ export function DefaultDrawer({
                             </div>}
                         </IconButton>}
                 >
-                    {adminViews.map((entry, index) =>
+                    {adminViews.map((entry) =>
                         <MenuItem
                             onClick={(event) => {
                                 event.preventDefault();
-                                navigate(entry.path);
+                                navigate(entry.url); // Consistent use of entry.url for navigation
                             }}
-                            key={`navigation_${index}`}>
+                            key={entry.id}>
                             {<IconForView collectionOrView={entry.view}/>}
                             {entry.name}
                         </MenuItem>)}
@@ -155,20 +162,21 @@ export function DrawerLogo({ logo }: {
     return <div
         style={{
             transition: "padding 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
-            padding: drawerOpen ? "32px 144px 0px 24px" : "72px 16px 0px"
+            padding: drawerOpen ? "32px 144px 0px 24px" : "72px 12px 0px 12px"
         }}
-        className={cls("cursor-pointer")}>
+        className={cls("cursor-pointer rounded ml-3 mr-1")}>
 
         <Tooltip title={"Home"}
                  sideOffset={20}
                  side="right">
             <Link
+                className={"block"}
                 to={navigation.basePath}>
                 {logo
                     ? <img src={logo}
                            alt="Logo"
-                           className={cls("max-w-full max-h-full",
-                               drawerOpen ?? "w-[112px] h-[112px]")}/>
+                           className={cls("max-w-full max-h-full transition-all object-contain",
+                               drawerOpen ? "w-[96px] h-[96px]" : "w-[32px] h-[32px]")}/>
                     : <FireCMSLogo/>}
 
             </Link>

package/src/core/DrawerNavigationItem.tsx

@@ -7,6 +7,7 @@ export function DrawerNavigationItem({
                                          name,
                                          icon,
                                          drawerOpen,
+                                         adminMenuOpen,
                                          tooltipsOpen,
                                          url,
                                          onClick
@@ -15,46 +16,49 @@ export function DrawerNavigationItem({
     name: string,
     tooltipsOpen: boolean,
     drawerOpen: boolean,
+    adminMenuOpen?: boolean,
     url: string,
     onClick?: () => void,
 }) {
 
     const iconWrap = <div
-        className={"text-gray-600 dark:text-gray-500"}>
+        className={"text-text-secondary dark:text-text-secondary-dark"}>
         {icon}
     </div>;
 
-    const listItem = <NavLink
-        onClick={onClick}
-        style={{
-            width: !drawerOpen ? "72px" : "280px",
-            transition: drawerOpen ? "width 150ms ease-in" : undefined
-        }}
-        className={({ isActive }: any) => cls("rounded-r-lg truncate",
-            "hover:bg-slate-300 hover:bg-opacity-75 dark:hover:bg-gray-700 dark:hover:bg-opacity-75 text-gray-800 dark:text-gray-200 hover:text-gray-900 hover:dark:text-white",
-            "flex flex-row items-center mr-8",
-            // "transition-all ease-in-out delay-100 duration-300",
-            // drawerOpen ? "w-full" : "w-18",
-            drawerOpen ? "pl-8 h-12" : "pl-6 h-11",
-            "font-medium text-sm",
-            isActive ? "bg-slate-200 bg-opacity-60 dark:bg-gray-800 dark:bg-opacity-30" : ""
-        )}
-        to={url}
-    >
+    const listItem = <div>
+        <NavLink
+            onClick={onClick}
+            style={{
+                width: "100%",
+                transition: drawerOpen ? "width 150ms ease-in" : undefined
+            }}
+            className={({ isActive }: any) => cls("rounded-lg truncate",
+                "hover:bg-surface-accent-300 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white",
+                "flex flex-row items-center mr-8",
+                // "transition-all ease-in-out delay-100 duration-300",
+                // drawerOpen ? "w-full" : "w-18",
+                drawerOpen ? "pl-4 h-10" : "pl-4 h-9",
+                "font-semibold text-xs",
+                isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50" : ""
+            )}
+            to={url}
+        >
 
-        {iconWrap}
+            {iconWrap}
 
-        <div
-            className={cls(
-                drawerOpen ? "opacity-100" : "opacity-0 hidden",
-                "ml-4 font-inherit text-inherit"
-            )}>
-            {name.toUpperCase()}
-        </div>
-    </NavLink>;
+            <div
+                className={cls(
+                    drawerOpen ? "opacity-100" : "opacity-0 hidden",
+                    "ml-4 font-inherit text-inherit"
+                )}>
+                {name.toUpperCase()}
+            </div>
+        </NavLink>
+    </div>;
 
     return <Tooltip
-        open={drawerOpen ? false : tooltipsOpen}
+        open={drawerOpen || adminMenuOpen ? false : tooltipsOpen}
         side="right"
         title={name}>
         {listItem}