@firecms/core 3.0.0-canary.7 → 3.0.0-canary.9

package/src/components/HomePage/SmallNavigationCard.tsx

@@ -0,0 +1,45 @@
+import { ArrowForwardIcon, cardClickableMixin, cardMixin, cn, focusedMixin, Typography, } from "@firecms/ui";
+
+import { Link as ReactLink } from "react-router-dom";
+
+export type SmallNavigationCardProps = {
+    name: string,
+    url: string;
+    icon: React.ReactElement;
+};
+
+export function SmallNavigationCard({
+                                 name,
+                                 url,
+                                 icon,
+                             }: SmallNavigationCardProps) {
+
+    return (
+        <>
+
+            <ReactLink
+                tabIndex={0}
+                className={cn(cardMixin,
+                    cardClickableMixin,
+                    focusedMixin,
+                    "cursor-pointer flex flex-row items-center px-4 py-2 text-inherit dark:text-inherit visited:text-inherit visited:dark:text-inherit hover:text-inherit hover:dark:text-inherit ")}
+                to={url}
+            >
+
+                <div className="flex flex-row items-center flex-grow gap-2 ">
+                    {icon}
+
+                    <Typography gutterBottom variant="h5"
+                                component="h2"
+                                className="mb-0 ml-4">
+                        {name}
+                    </Typography>
+                </div>
+
+                <div className={"p-4"}>
+                    <ArrowForwardIcon color="primary"/>
+                </div>
+            </ReactLink>
+
+        </>);
+}

package/src/components/HomePage/index.tsx

@@ -1,3 +1,5 @@
 export * from "./DefaultHomePage";
-export * from "./NavigationCollectionCard";
+export * from "./NavigationCardBinding";
 export * from "./NavigationGroup";
+export * from "./NavigationCard";
+export * from "./SmallNavigationCard";

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -17,7 +17,7 @@ import {
 import { ErrorView } from "../ErrorView";
 import { AddIcon, Button, DialogActions, Typography } from "@firecms/ui";
 import { canCreateEntity, fullPathToCollectionSegments, resolveCollection } from "../../util";
-import { useSelectionController } from "../EntityCollectionView/EntityCollectionView";
+import { useSelectionController } from "../EntityCollectionView/useSelectionController";
 import { useColumnIds, useTableSearchHelper } from "../common";
 import { useSideDialogContext } from "../../core";
 import { useAnalyticsController } from "../../hooks/useAnalyticsController";
@@ -109,7 +109,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
 
     const fullPath = navigation.resolveAliasesFrom(pathInput);
 
-    const dataSource = useDataSource();
+    const dataSource = useDataSource(collection);
 
     const [entitiesDisplayedFirst, setEntitiesDisplayedFirst] = useState<Entity<any>[]>([]);
 
@@ -349,7 +349,7 @@ function ReferenceDialogActions({
             onNewClick();
         }
         : undefined;
-    const addButton = canCreateEntity(collection, authController, fullPathToCollectionSegments(path), null) &&
+    const addButton = canCreateEntity(collection, authController, path, null) &&
         onClick && (largeLayout
             ? <Button
                 onClick={onClick}
@@ -360,7 +360,6 @@ function ReferenceDialogActions({
             </Button>
             : <Button
                 onClick={onClick}
-                size="medium"
                 variant="outlined"
                 color="primary"
             >

package/src/components/ReferenceWidget.tsx

@@ -52,9 +52,9 @@ export function ReferenceWidget<M extends Record<string, any>>({
         return navigationController.getCollection(path);
     }, [path, navigationController]);
 
-    if (!collection) {
-        throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
-    }
+    // if (!collection) {
+    //     throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
+    // }
 
     const onSingleEntitySelected = useCallback((entity: Entity<M> | null) => {
         if (disabled)

package/src/components/SelectableTable/filters/ReferenceFilterField.tsx

@@ -48,8 +48,6 @@ export function ReferenceFilterField({
         ? ["array-contains"]
         : ["==", "!=", ">", "<", ">=", "<="];
 
-    const [onHover, setOnHover] = React.useState(false);
-
     isArray
         ? possibleOperations.push("array-contains-any")
         : possibleOperations.push("in", "not-in");
@@ -60,7 +58,7 @@ export function ReferenceFilterField({
 
     const selectedEntityIds = internalValue
         ? (Array.isArray(internalValue) ? internalValue.map((ref) => {
-            if (!(ref.isEntityReference && ref.isEntityReference())) {
+            if (!(ref?.isEntityReference && ref?.isEntityReference())) {
                 return null;
             }
             return ref.id;
@@ -74,7 +72,7 @@ export function ReferenceFilterField({
         let newValue = val;
         if (prevOpIsArray !== newOpIsArray) {
             // @ts-ignore
-            newValue = newOpIsArray ? (newValue.isEntityReference && newValue.isEntityReference() ? [newValue] : []) : undefined
+            newValue = newOpIsArray ? (newValue?.isEntityReference && newValue?.isEntityReference() ? [newValue] : []) : undefined
         }
 
         setOperation(op);
@@ -129,21 +127,15 @@ export function ReferenceFilterField({
 
     const buildEntry = (reference: EntityReference) => {
         return (
-            <div
-                className="mb-0.5"
-                onMouseEnter={() => setOnHover(true)}
-                onMouseMove={() => setOnHover(true)}
-                onMouseLeave={() => setOnHover(false)}>
-                <ReferencePreview
-                    disabled={!path}
-                    previewProperties={previewProperties}
-                    size={"medium"}
-                    onClick={doOpenDialog}
-                    reference={reference}
-                    onHover={onHover}
-                    allowEntityNavigation={false}
-                />
-            </div>
+            <ReferencePreview
+                disabled={!path}
+                previewProperties={previewProperties}
+                size={"medium"}
+                onClick={doOpenDialog}
+                reference={reference}
+                hover={true}
+                allowEntityNavigation={false}
+            />
         );
     };
 

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/common/useDataSourceEntityCollectionTableController.tsx

@@ -65,7 +65,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;

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/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,
@@ -37,7 +36,7 @@ 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 +55,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`);
@@ -95,7 +94,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
 
     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 +153,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 +204,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
                 entityId: updatedEntity.id,
                 selectedSubPath: selectedTabRef.current,
                 updateUrl: true,
-                collection
+                collection,
             });
         }
 
@@ -302,6 +284,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 +365,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 +446,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

@@ -13,7 +13,7 @@ import { SideEntityControllerContext } from "../contexts/SideEntityControllerCon
 import { NavigationContext } from "../contexts/NavigationContext";
 import { SideDialogsControllerContext } from "../contexts/SideDialogsControllerContext";
 import { useLocaleConfig } from "../internal/useLocaleConfig";
-import { CenteredView } from "@firecms/ui";
+import { CenteredView, Typography } from "@firecms/ui";
 import { DialogsProvider } from "../contexts/DialogsProvider";
 import { useBuildDataSource } from "../internal/useBuildDataSource";
 import { useBuildCustomizationController } from "../internal/useBuildCustomizationController";
@@ -85,7 +85,7 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         onAnalyticsEvent
     }), []);
 
-    useProjectLog(authController);
+    const accessResponse = useProjectLog(authController);
 
     if (navigationController.navigationLoadingError) {
         return (
@@ -107,6 +107,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

@@ -59,6 +59,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 ?? [])]

package/src/core/SideEntityView.tsx

@@ -1,10 +1,10 @@
-import { EntityViewProps } from "./EntityView";
 import { User } from "../types";
 import { useSideDialogContext } from "./SideDialogs";
 import { useSideEntityController } from "../hooks";
 import { FORM_CONTAINER_WIDTH } from "../internal/common";
+import { EntityEditViewProps } from "./EntityEditView";
 
-export type SideEntityViewProps<M extends Record<string, any>> = EntityViewProps<M> & {
+export type SideEntityViewProps<M extends Record<string, any>> = EntityEditViewProps<M> & {
     formWidth?: number | string;
     onClose?: () => void;
 }