@firecms/core 3.0.0-canary.5 → 3.0.0-canary.50

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -252,7 +252,7 @@ export type VirtualTableFilterValues<Key extends string> = Partial<Record<Key, [
 
 /**
  * Filter conditions in a `Query.where()` clause are specified using the
- * strings '<', '<=', '==', '>=', '>', 'array-contains', 'in', 'not-in', and 'array-contains-any'.
+ * strings `<`, `<=`, `==`, `>=`, `>`, `array-contains`, `in`, and `array-contains-any`.
  * @see Table
  * @group Models
  */

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

@@ -25,7 +25,7 @@ export function VirtualTableDateField(props: {
     return (
         <DateTimeField
             value={internalValue ?? undefined}
-            onChange={(dateValue) => updateValue(dateValue)}
+            onChange={(dateValue) => updateValue(dateValue ?? null)}
             size={"medium"}
             invisible={true}
             className={"w-full h-full"}

package/src/components/common/types.tsx

@@ -1,4 +1,4 @@
-import { CollectionSize, Entity, FireCMSContext, ResolvedProperty, SelectedCellProps } from "../../types";
+import { CollectionSize, FireCMSContext, ResolvedProperty, SelectedCellProps } from "../../types";
 
 export type EntityCollectionTableController<M extends Record<string, any>> = {
 
@@ -31,14 +31,12 @@ export type EntityCollectionTableController<M extends Record<string, any>> = {
  * Props passed in a callback when the content of a cell in a table has been edited
  * @group Collection components
  */
-export interface OnCellValueChangeParams<T = any, M extends Record<string, any> = any> {
+export interface OnCellValueChangeParams<T = any, D = any> {
     value: T,
     propertyKey: string,
-    entity: Entity<M>,
+    data?: D,
     onValueUpdated: () => void
-    setError: (e: Error) => void
-    fullPath: string
-    context: FireCMSContext
+    setError: (e: Error | undefined) => void
 }
 
 /**

package/src/components/common/useDataSourceEntityCollectionTableController.tsx

@@ -12,6 +12,7 @@ import {
     User
 } from "../../types";
 import { useDebouncedData } from "./useDebouncedData";
+import equal from "react-fast-compare"
 
 const DEFAULT_PAGE_SIZE = 50;
 
@@ -31,6 +32,10 @@ export type DataSourceEntityCollectionTableControllerProps<M extends Record<stri
     entitiesDisplayedFirst?: Entity<M>[];
 
     lastDeleteTimestamp?: number;
+
+    /**
+     * Force filter to be applied to the table.
+     */
     forceFilter?: FilterValues<string>;
 }
 
@@ -65,7 +70,7 @@ export function useDataSourceEntityCollectionTableController<M extends Record<st
 
     const [popupCell, setPopupCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
     const navigation = useNavigationController();
-    const dataSource = useDataSource();
+    const dataSource = useDataSource(collection);
     const resolvedPath = useMemo(() => navigation.resolveAliasesFrom(fullPath), [fullPath, navigation.resolveAliasesFrom]);
 
     const forceFilter = forceFilterFromProps ?? forceFilterFromCollection;
@@ -83,6 +88,12 @@ export function useDataSourceEntityCollectionTableController<M extends Record<st
         return initialSort;
     }, [initialSort, forceFilter]);
 
+    useEffect(() => {
+        if (!equal(forceFilter, filterValues)) {
+            setFilterValues(forceFilter)
+        }
+    }, [forceFilter]);
+
     const [filterValues, setFilterValues] = React.useState<FilterValues<Extract<keyof M, string>> | undefined>(forceFilter ?? initialFilter ?? undefined);
     const [sortBy, setSortBy] = React.useState<[Extract<keyof M, string>, "asc" | "desc"] | undefined>(initialSortInternal);
 

package/src/components/index.tsx

@@ -1,8 +1,8 @@
 export type { ErrorViewProps } from "./ErrorView";
 export { ErrorView } from "./ErrorView";
 
-export type { EntityPreviewProps } from "./EntityPreview";
-export { EntityPreview } from "./EntityPreview";
+export type { EntityViewProps } from "./EntityView";
+export { EntityView } from "./EntityView";
 
 export type { ReferenceSelectionInnerProps } from "./ReferenceTable/ReferenceSelectionTable";
 export { ReferenceSelectionTable } from "./ReferenceTable/ReferenceSelectionTable";
@@ -15,6 +15,7 @@ export * from "./HomePage";
 export * from "./SelectableTable/SelectableTable";
 export * from "./EntityCollectionView/EntityCollectionView";
 export * from "./EntityCollectionView/EntityCollectionViewActions";
+export * from "./EntityCollectionView/useSelectionController";
 
 export * from "./PropertyConfigBadge";
 
@@ -32,3 +33,4 @@ export * from "./FireCMSAppBar";
 export * from "./ArrayContainer";
 export * from "./ReferenceWidget";
 export * from "./SearchIconsView";
+export * from "./FieldCaption";

package/src/contexts/AuthControllerContext.tsx

@@ -1,4 +1,4 @@
 import React from "react";
 import { AuthController } from "../types";
 
-export const AuthControllerContext = React.createContext<AuthController>({} as AuthController);
+export const AuthControllerContext = React.createContext<AuthController<any, any>>({} as AuthController<any, any>);

package/src/core/Drawer.tsx

@@ -2,10 +2,10 @@ import React, { useCallback } from "react";
 
 import { useLargeLayout, useNavigationController } from "../hooks";
 
-import { NavLink } from "react-router-dom";
+import { NavLink, useNavigate } from "react-router-dom";
 import { CMSAnalyticsEvent, TopNavigationEntry, TopNavigationResult } from "../types";
 import { IconForView } from "../util";
-import { cn, Tooltip, Typography } from "@firecms/ui";
+import { cn, IconButton, Menu, MenuItem, MoreVertIcon, Tooltip, Typography } from "@firecms/ui";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 
 /**
@@ -33,6 +33,9 @@ export function Drawer({
 
     const tooltipsOpen = hovered && !drawerOpen;
     const largeLayout = useLargeLayout();
+    const navigate = useNavigate();
+
+    const [adminMenuOpen, setAdminMenuOpen] = React.useState(false);
 
     if (!navigation.topLevelNavigation)
         throw Error("Navigation not ready in Drawer");
@@ -42,7 +45,8 @@ export function Drawer({
         groups
     }: TopNavigationResult = navigation.topLevelNavigation;
 
-    const ungroupedNavigationViews = Object.values(navigationEntries).filter(e => !e.group);
+    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"/>;
@@ -67,41 +71,64 @@ export function Drawer({
     };
 
     return (
-        <div className={"flex-grow overflow-scroll no-scrollbar"}>
-
-            {groups.map((group) => (
-                <React.Fragment
-                    key={`drawer_group_${group}`}>
-                    {buildGroupHeader(group)}
-                    {Object.values(navigationEntries)
-                        .filter(e => e.group === group)
-                        .map((view, index) =>
-                            <DrawerNavigationItem
-                                key={`navigation_${index}`}
-                                icon={<IconForView collectionOrView={view.collection ?? view.view}/>}
-                                tooltipsOpen={tooltipsOpen}
-                                drawerOpen={drawerOpen}
-                                onClick={() => onClick(view)}
-                                url={view.url}
-                                name={view.name}/>)}
-                </React.Fragment>
-            ))}
-
-            {ungroupedNavigationViews.length > 0 && buildGroupHeader()}
-
-            {ungroupedNavigationViews.map((view, index) => {
-
-                return <DrawerNavigationItem
-                    key={`navigation_${index}`}
-                    icon={<IconForView collectionOrView={view.collection ?? view.view}/>}
-                    tooltipsOpen={tooltipsOpen}
-                    onClick={() => onClick(view)}
-                    drawerOpen={drawerOpen}
-                    url={view.url}
-                    name={view.name}/>;
-            })}
-
-        </div>
+        <>
+
+            <div className={"flex-grow overflow-scroll no-scrollbar"}>
+
+                {groupsWithoutAdmin.map((group) => (
+                    <React.Fragment
+                        key={`drawer_group_${group}`}>
+                        {buildGroupHeader(group)}
+                        {Object.values(navigationEntries)
+                            .filter(e => e.group === group)
+                            .map((view, index) =>
+                                <DrawerNavigationItem
+                                    key={`navigation_${index}`}
+                                    icon={<IconForView collectionOrView={view.collection ?? view.view}/>}
+                                    tooltipsOpen={tooltipsOpen}
+                                    drawerOpen={drawerOpen}
+                                    onClick={() => onClick(view)}
+                                    url={view.url}
+                                    name={view.name}/>)}
+                    </React.Fragment>
+                ))}
+
+            </div>
+
+            {adminViews.length > 0 && <Menu
+                open={adminMenuOpen}
+                onOpenChange={setAdminMenuOpen}
+                trigger={
+                    <IconButton
+                        shape={"square"}
+                        className={"m-4 text-gray-900 dark:text-white w-fit"}>
+                        <Tooltip title={"Admin"}
+                                 open={tooltipsOpen}
+                                 side={"right"} sideOffset={28}>
+                            <MoreVertIcon/>
+                        </Tooltip>
+                        {drawerOpen && <div
+                            className={cn(
+                                drawerOpen ? "opacity-100" : "opacity-0 hidden",
+                                "mx-4 font-inherit text-inherit"
+                            )}>
+                            ADMIN
+                        </div>}
+                    </IconButton>}
+            >
+                {adminViews.map((entry, index) =>
+                    <MenuItem
+                        onClick={(event) => {
+                            event.preventDefault();
+                            navigate(entry.path);
+                        }}
+                        key={`navigation_${index}`}>
+                        {<IconForView collectionOrView={entry.view}/>}
+                        {entry.name}
+                    </MenuItem>)}
+
+            </Menu>}
+        </>
     );
 }
 
@@ -133,7 +160,7 @@ export function DrawerNavigationItem({
             transition: drawerOpen ? "width 150ms ease-in" : undefined
         }}
         className={({ isActive }: any) => cn("rounded-r-xl 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-gray-100",
+            "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",

package/src/core/{EntityView.tsx → EntityEditView.tsx}

@@ -9,10 +9,9 @@ import {
     FormContext,
     User
 } from "../types";
-import { CircularProgressCenter, EntityCollectionView, EntityPreview, ErrorBoundary, } from "../components";
+import { CircularProgressCenter, EntityCollectionView, EntityView, ErrorBoundary, } from "../components";
 import {
     canEditEntity,
-    fullPathToCollectionSegments,
     removeInitialAndTrailingSlashes,
     resolveDefaultSelectedView,
     resolveEntityView,
@@ -32,12 +31,11 @@ import {
 import { EntityForm } from "../form";
 import { CircularProgress, CloseIcon, cn, defaultBorderMixin, IconButton, Tab, Tabs, Typography } from "@firecms/ui";
 import { EntityFormSaveParams } from "../form/EntityForm";
-import { FORM_CONTAINER_WIDTH } from "../internal/common";
 import { useSideDialogContext } from "./index";
 
 const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
 
-export interface EntityViewProps<M extends Record<string, any>> {
+export interface EntityEditViewProps<M extends Record<string, any>> {
     path: string;
     collection: EntityCollection<M>;
     entityId?: string;
@@ -56,18 +54,18 @@ export interface EntityViewProps<M extends Record<string, any>> {
  * You probably don't want to use this view directly since it is bound to the
  * side panel. Instead, you might want to use {@link EntityForm} or {@link EntityCollectionView}
  */
-export function EntityView<M extends Record<string, any>, UserType extends User>({
-                                                                                     path,
-                                                                                     entityId,
-                                                                                     selectedSubPath,
-                                                                                     copy,
-                                                                                     collection,
-                                                                                     parentCollectionIds,
-                                                                                     onValuesAreModified,
-                                                                                     formWidth,
-                                                                                     onUpdate,
-                                                                                     onClose
-                                                                                 }: EntityViewProps<M>) {
+export function EntityEditView<M extends Record<string, any>, UserType extends User>({
+                                                                                         path,
+                                                                                         entityId,
+                                                                                         selectedSubPath,
+                                                                                         copy,
+                                                                                         collection,
+                                                                                         parentCollectionIds,
+                                                                                         onValuesAreModified,
+                                                                                         formWidth,
+                                                                                         onUpdate,
+                                                                                         onClose,
+                                                                                     }: EntityEditViewProps<M>) {
 
     if (collection.customId && collection.formAutoSave) {
         console.warn(`The collection ${collection.path} has customId and formAutoSave enabled. This is not supported and formAutoSave will be ignored`);
@@ -92,10 +90,9 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
 
     // const largeLayout = useLargeLayout();
     // const largeLayoutTabSelected = useRef(!largeLayout);
+    // const resolvedFormWidth: string = typeof formWidth === "number" ? `${formWidth}px` : formWidth ?? FORM_CONTAINER_WIDTH;
 
-    const resolvedFormWidth: string = typeof formWidth === "number" ? `${formWidth}px` : formWidth ?? FORM_CONTAINER_WIDTH;
-
-    const dataSource = useDataSource();
+    const dataSource = useDataSource(collection);
     const sideDialogContext = useSideDialogContext();
     const sideEntityController = useSideEntityController();
     const snackbarController = useSnackbarController();
@@ -154,29 +151,12 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
         if (status === "new") {
             setReadOnly(false);
         } else {
-            const editEnabled = usedEntity ? canEditEntity(collection, authController, fullPathToCollectionSegments(path), usedEntity ?? null) : false;
+            const editEnabled = usedEntity ? canEditEntity(collection, authController, path, usedEntity ?? null) : false;
             if (usedEntity)
                 setReadOnly(!editEnabled);
         }
     }, [authController, usedEntity, status]);
 
-    // useEffect(() => {
-    //     if (largeLayoutTabSelected.current === largeLayout)
-    //         return;
-    //     // open first tab by default in large layouts
-    //     if (selectedSubPath !== defaultSelectedView) {
-    //         console.log("Replacing url 1", defaultSelectedView);
-    //         sideEntityController.replace({
-    //             path,
-    //             entityId,
-    //             selectedSubPath: defaultSelectedView,
-    //             updateUrl: true,
-    //             collection
-    //         });
-    //     }
-    //     largeLayoutTabSelected.current = largeLayout;
-    // }, [defaultSelectedView, largeLayout, selectedSubPath]);
-
     const onPreSaveHookError = useCallback((e: Error) => {
         setSaving(false);
         snackbarController.open({
@@ -222,7 +202,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
                 entityId: updatedEntity.id,
                 selectedSubPath: selectedTabRef.current,
                 updateUrl: true,
-                collection
+                collection,
             });
         }
 
@@ -302,6 +282,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
             .map(e => resolveEntityView(e, customizationController.entityViews))
             .filter(Boolean) as EntityCustomView[]
         : [];
+
     const customViewsView: React.ReactNode[] | undefined = customViews && resolvedEntityViews
         .map(
             (customView, colIndex) => {
@@ -382,7 +363,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
             entityId,
             selectedSubPath: value === MAIN_TAB_VALUE ? undefined : value,
             updateUrl: true,
-            collection
+            collection,
         });
     };
 
@@ -463,7 +444,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
                         className={"mt-16 mb-8 mx-8"}
                         variant={"h4"}>{collection.singularName ?? collection.name}
                     </Typography>
-                    <EntityPreview
+                    <EntityView
                         className={"px-12"}
                         entity={usedEntity as Entity<M>}
                         path={path}

package/src/core/EntitySidePanel.tsx

@@ -4,7 +4,7 @@ import { EntitySidePanelProps } from "../types";
 import { useNavigationController } from "../hooks";
 
 import { ErrorBoundary } from "../components";
-import { EntityView } from "./EntityView";
+import { EntityEditView } from "./EntityEditView";
 import { useSideDialogContext } from "./SideDialogs";
 
 /**
@@ -77,7 +77,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     return (
         <>
             <ErrorBoundary>
-                <EntityView
+                <EntityEditView
                     {...props}
                     formWidth={props.width}
                     collection={collection}

package/src/core/FireCMS.tsx

@@ -12,8 +12,7 @@ import { DataSourceContext } from "../contexts/DataSourceContext";
 import { SideEntityControllerContext } from "../contexts/SideEntityControllerContext";
 import { NavigationContext } from "../contexts/NavigationContext";
 import { SideDialogsControllerContext } from "../contexts/SideDialogsControllerContext";
-import { useLocaleConfig } from "../internal/useLocaleConfig";
-import { CenteredView } from "@firecms/ui";
+import { CenteredView, Typography, useLocaleConfig } from "@firecms/ui";
 import { DialogsProvider } from "../contexts/DialogsProvider";
 import { useBuildDataSource } from "../internal/useBuildDataSource";
 import { useBuildCustomizationController } from "../internal/useBuildCustomizationController";
@@ -85,7 +84,7 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         onAnalyticsEvent
     }), []);
 
-    useProjectLog(authController);
+    const accessResponse = useProjectLog(authController, plugins);
 
     if (navigationController.navigationLoadingError) {
         return (
@@ -107,6 +106,22 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         );
     }
 
+    if (accessResponse?.blocked) {
+        return (
+            <CenteredView maxWidth={"md"} fullScreen={true}>
+                <Typography variant={"h4"}>
+                    Access blocked
+                </Typography>
+                <Typography>
+                    This app has been blocked. Please reach out at <a
+                    href={"mailto:hello@firecms.co"}>hello@firecms.co</a> for more information.
+                </Typography>
+                {accessResponse?.message &&
+                    <Typography>Response from the server: {accessResponse?.message}</Typography>}
+            </CenteredView>
+        );
+    }
+
     return (
         <ModeControllerContext.Provider value={modeController}>
             <AnalyticsContext.Provider value={analyticsController}>

package/src/core/NavigationRoutes.tsx

@@ -13,7 +13,7 @@ export type NavigationRoutesProps = {
     /**
      * In case you need to override the home page
      */
-    HomePage?: React.ComponentType;
+    homePage?: React.ReactNode;
 
     customRoutes?: React.ReactNode[]
 
@@ -28,10 +28,9 @@ export type NavigationRoutesProps = {
  * @constructor
  * @group Components
  */
-
 export const NavigationRoutes = React.memo<NavigationRoutesProps>(
     function NavigationRoutes({
-                                  HomePage = DefaultHomePage,
+                                  homePage = <DefaultHomePage/>,
                                   customRoutes
                               }: NavigationRoutesProps) {
 
@@ -59,6 +58,14 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
                     cmsViews.push(buildCMSViewRoute(cmsView.path, cmsView));
             });
         }
+        if (navigation.adminViews) {
+            navigation.adminViews.forEach((cmsView) => {
+                if (Array.isArray(cmsView.path))
+                    cmsViews.push(...cmsView.path.map(path => buildCMSViewRoute(path, cmsView)));
+                else
+                    cmsViews.push(buildCMSViewRoute(cmsView.path, cmsView));
+            });
+        }
 
         // we reorder collections so that nested paths are included first
         const sortedCollections = [...(navigation.collections ?? [])]
@@ -85,7 +92,7 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
 
         const homeRoute = (
             <Route path={"/"}
-                   element={<HomePage/>}/>
+                   element={homePage}/>
         );
 
         const notFoundRoute = <Route path={"*"}

package/src/core/Scaffold.tsx

@@ -17,7 +17,7 @@ export interface ScaffoldProps<ExtraDrawerProps = object, ExtraAppbarProps = obj
     /**
      * Name of the app, displayed as the main title and in the tab title
      */
-    name: string;
+    name: React.ReactNode;
 
     /**
      * Logo to be displayed in the drawer of the CMS
@@ -112,9 +112,10 @@ export const Scaffold = React.memo<PropsWithChildren<ScaffoldProps>>(
                 }}>
 
                 <FireCMSAppBar title={name}
-                                        includeDrawer={includeDrawer}
-                                        drawerOpen={computedDrawerOpen}
-                                        {...fireCMSAppBarProps}/>
+                               includeDrawer={includeDrawer}
+                               logo={logo}
+                               drawerOpen={computedDrawerOpen}
+                               {...fireCMSAppBarProps}/>
 
                 <StyledDrawer
                     displayed={includeDrawer}

package/src/core/field_configs.tsx

@@ -359,8 +359,7 @@ export function getDefaultFieldId(property: Property | ResolvedProperty) {
     } else if (property.dataType === "map") {
         if (property.keyValue)
             return "key_value";
-        if (property.properties)
-            return "group";
+        return "group";
     } else if (property.dataType === "array") {
         const of = (property as ArrayProperty).of;
         const oneOf = (property as ArrayProperty).oneOf;