@firecms/core 3.0.0-beta.12 → 3.0.0-beta.14

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

@@ -66,7 +66,6 @@ export function VirtualTableInput(props: {
                 width: "100%",
                 color: "unset",
                 fontWeight: "unset",
-                lineHeight: 1.7142857,
                 fontSize: "unset",
                 fontFamily: "unset",
                 background: "unset",

package/src/components/common/default_entity_actions.tsx

@@ -2,7 +2,7 @@ import { DeleteIcon, EditIcon, FileCopyIcon } from "@firecms/ui";
 import { EntityAction } from "../../types";
 import { DeleteEntityDialog } from "../DeleteEntityDialog";
 import { addRecentId } from "../EntityCollectionView/utils";
-import { navigateToEntity } from "../../util";
+import { navigateToEntity, resolveDefaultSelectedView } from "../../util";
 
 export const editEntityAction: EntityAction = {
     icon: <EditIcon/>,
@@ -30,15 +30,24 @@ export const editEntityAction: EntityAction = {
             addRecentId(collection.id, entity.id);
         }
 
-        const path = collection?.collectionGroup ? entity.path : (fullPath ?? entity.path)
+        const path = collection?.collectionGroup ? collection.id : (fullPath ?? collection?.id ?? entity.path);
+        const defaultSelectedView = resolveDefaultSelectedView(
+            collection ? collection.defaultSelectedView : undefined,
+            {
+                status: "existing",
+                entityId: entity.id,
+            }
+        );
         navigateToEntity({
             openEntityMode,
             collection,
             entityId: entity.id,
             path,
+            fullIdPath: path,
             sideEntityController: context.sideEntityController,
             onClose: () => unhighlightEntity?.(entity),
-            navigation: context.navigation
+            navigation: context.navigation,
+            selectedTab: defaultSelectedView
         });
 
         return Promise.resolve(undefined);
@@ -63,12 +72,14 @@ export const copyEntityAction: EntityAction = {
             path: entity.path,
             entityId: entity.id
         });
-        const path = collection?.collectionGroup ? entity.path : (fullPath ?? entity.path)
+
+        const path = collection?.collectionGroup ? collection.id : (fullPath ?? collection?.id ?? entity.path);
         navigateToEntity({
             openEntityMode,
             collection,
             entityId: entity.id,
             path,
+            fullIdPath: path,
             copy: true,
             sideEntityController: context.sideEntityController,
             onClose: () => unhighlightEntity?.(entity),

package/src/components/index.tsx

@@ -36,3 +36,5 @@ export * from "./ArrayContainer";
 export * from "./ReferenceWidget";
 export * from "./SearchIconsView";
 export * from "./FieldCaption";
+
+export * from "./EntityPreview";

package/src/core/DefaultAppBar.tsx

@@ -22,12 +22,19 @@ 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;
@@ -57,14 +64,18 @@ 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();
@@ -134,7 +145,7 @@ export const DefaultAppBar = function DefaultAppBar({
                 </Link>
             </div>}
 
-            {breadcrumbs.breadcrumbs && <div className="mr-8 hidden lg:block">
+            {(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}>
@@ -176,7 +187,8 @@ export const DefaultAppBar = function DefaultAppBar({
                     </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>
+                    <MenuItem onClick={() => setMode("system")}> <BrightnessMediumIcon
+                        size={"smallest"}/>System</MenuItem>
                 </Menu>}
 
             <Menu trigger={avatarComponent}>

package/src/core/EntityEditView.tsx

@@ -5,6 +5,7 @@ import { CircularProgressCenter, EntityCollectionView, EntityView, ErrorBoundary
 import {
     canEditEntity,
     removeInitialAndTrailingSlashes,
+    resolveCollection,
     resolveDefaultSelectedView,
     resolvedSelectedEntityView
 } from "../util";
@@ -16,12 +17,15 @@ import {
     useFireCMSContext,
     useLargeLayout
 } from "../hooks";
-import { CircularProgress, cls, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
+import { CircularProgress, cls, CodeIcon, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
 import { getEntityFromCache } from "../util/entity_cache";
 import { EntityForm, EntityFormProps } from "../form";
 import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
+import { EntityJsonPreview } from "../components/EntityJsonPreview";
+import { createFormexStub } from "../util/createFormexStub";
 
-const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
+export const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
+export const JSON_TAB_VALUE = "__json";
 
 export type OnUpdateParams = {
     entity: Entity<any>,
@@ -41,6 +45,10 @@ export type OnTabChangeParams<M extends Record<string, any>> = {
 
 export interface EntityEditViewProps<M extends Record<string, any>> {
     path: string;
+    /**
+     * The navigation path to the entity.
+     */
+    fullIdPath?: string;
     collection: EntityCollection<M>;
     entityId?: string;
     databaseId?: string;
@@ -52,7 +60,7 @@ export interface EntityEditViewProps<M extends Record<string, any>> {
     onTabChange?: (props: OnTabChangeParams<M>) => void;
     layout?: "side_panel" | "full_screen";
     barActions?: React.ReactNode;
-    formProps?: Partial<EntityFormProps<M>>
+    formProps?: Partial<EntityFormProps<M>>,
 }
 
 /**
@@ -102,19 +110,6 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
         console.error(`Entity with id ${entityId} not found in collection ${props.path}`);
     }
 
-    if (!canEdit) {
-        return <div className={"flex flex-col"}>
-            <Typography className={"mt-16 mb-8 mx-8"} variant={"h4"}>
-                {props.collection.singularName ?? props.collection.name}
-            </Typography>
-            <EntityView
-                className={"px-8"}
-                entity={entity as Entity<M>}
-                path={props.path}
-                collection={props.collection}/>
-        </div>
-    }
-
     return <EntityEditViewInner<M> {...props}
                                    entityId={entityId}
                                    entity={entity}
@@ -122,11 +117,13 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
                                    dataLoading={dataLoading}
                                    status={status}
                                    setStatus={setStatus}
+                                   canEdit={canEdit}
     />;
 }
 
 export function EntityEditViewInner<M extends Record<string, any>>({
                                                                        path,
+                                                                       fullIdPath,
                                                                        entityId,
                                                                        selectedTab: selectedTabProp,
                                                                        collection,
@@ -142,12 +139,14 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                                                                        status,
                                                                        setStatus,
                                                                        formProps,
+                                                                       canEdit
                                                                    }: EntityEditViewProps<M> & {
     entity?: Entity<M>,
     cachedDirtyValues?: Partial<M>, // dirty cached entity in memory
     dataLoading: boolean,
     status: EntityStatus,
     setStatus: (status: EntityStatus) => void,
+    canEdit?: boolean,
 }) {
 
     const context = useFireCMSContext();
@@ -175,40 +174,77 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     ), []);
 
     const [selectedTab, setSelectedTab] = useState<string>(selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
-
     useEffect(() => {
-        if ((selectedTabProp ?? MAIN_TAB_VALUE) !== selectedTab) {
-            setSelectedTab(selectedTabProp ?? MAIN_TAB_VALUE);
+        if ((selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE) !== selectedTab) {
+            setSelectedTab(selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
         }
     }, [selectedTabProp]);
 
     const subcollections = (collection.subcollections ?? []).filter(c => !c.hideFromNavigation);
     const subcollectionsCount = subcollections?.length ?? 0;
-    const customViews = collection.entityViews;
+    const customViews = collection.entityViews ?? [];
     const customViewsCount = customViews?.length ?? 0;
-    const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0;
+    const includeJsonView = collection.includeJsonView === undefined ? true : collection.includeJsonView;
+    const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView;
+
+    const plugins = customizationController.plugins;
 
     const {
         resolvedEntityViews,
         selectedEntityView,
         selectedSecondaryForm
-    } = resolvedSelectedEntityView(customViews, customizationController, selectedTab);
+    } = resolvedSelectedEntityView(customViews, customizationController, selectedTab, canEdit);
 
     const actionsAtTheBottom = !largeLayout || layout === "side_panel" || selectedEntityView?.includeActions === "bottom";
 
     const mainViewVisible = selectedTab === MAIN_TAB_VALUE || Boolean(selectedSecondaryForm);
 
+    const authController = useAuthController();
+
     const customViewsView: React.ReactNode[] | undefined = customViews && resolvedEntityViews
         .filter(e => !e.includeActions)
         .map((customView) => {
+
             if (!customView)
                 return null;
             const Builder = customView.Builder;
             if (!Builder) {
-                console.error("customView.Builder is not defined");
+                console.error("INTERNAL: customView.Builder is not defined");
                 return null;
             }
 
+            if (!entityId) {
+                return null;
+            }
+
+            const formexStub = createFormexStub<M>(usedEntity?.values ?? {} as M);
+            const usedFormContext: FormContext = formContext ?? {
+                entityId,
+                disabled: false,
+                openEntityMode: layout,
+                status: status,
+                values: usedEntity?.values ?? {},
+                setFieldValue: (key: string, value: any) => {
+                    throw new Error("You can't update values in read only mode");
+                },
+                save: () => {
+                    throw new Error("You can't save in read only mode");
+                },
+                collection: resolveCollection<M>({
+                    collection,
+                    path,
+                    entityId,
+                    values: usedEntity?.values ?? {},
+                    previousValues: usedEntity?.values ?? {},
+                    propertyConfigs: customizationController.propertyConfigs,
+                    authController
+                }),
+                path,
+                entity: usedEntity,
+                savingError: undefined,
+                formex: formexStub
+            };
+
             return <div
                 className={cls(defaultBorderMixin,
                     "relative flex-1 w-full h-full overflow-auto",
@@ -217,11 +253,12 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 key={`custom_view_${customView.key}`}
                 role="tabpanel">
                 <ErrorBoundary>
-                    {formContext && <Builder
+                    {usedFormContext && <Builder
                         collection={collection}
+                        parentCollectionIds={parentCollectionIds}
                         entity={usedEntity}
-                        modifiedValues={formContext.formex.values ?? usedEntity?.values}
-                        formContext={formContext}
+                        modifiedValues={usedFormContext?.formex?.values ?? usedEntity?.values}
+                        formContext={usedFormContext}
                     />}
                 </ErrorBoundary>
             </div>;
@@ -229,9 +266,22 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     const globalLoading = dataLoading && !usedEntity;
 
+    const jsonView = <div
+        className={cls("relative flex-1 h-full overflow-auto w-full",
+            { "hidden": selectedTab !== JSON_TAB_VALUE })}
+        key={"json_view"}
+        role="tabpanel">
+        <ErrorBoundary>
+            <EntityJsonPreview
+                values={formContext?.values ?? entity?.values ?? {}}/>
+        </ErrorBoundary>
+    </div>;
+
     const subCollectionsViews = subcollections && subcollections.map((subcollection) => {
         const subcollectionId = subcollection.id ?? subcollection.path;
-        const fullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
+        const newFullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
+        const newFullIdPath = fullIdPath ? `${fullIdPath}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
+
         if (selectedTab !== subcollectionId) return null;
         return (
             <div
@@ -242,9 +292,10 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 {globalLoading && <CircularProgressCenter/>}
 
                 {!globalLoading &&
-                    (usedEntity && fullPath
+                    (usedEntity && newFullPath
                         ? <EntityCollectionView
-                            fullPath={fullPath}
+                            fullPath={newFullPath}
+                            fullIdPath={newFullIdPath}
                             parentCollectionIds={[...parentCollectionIds, collection.id]}
                             isSubCollection={true}
                             updateUrl={false}
@@ -266,15 +317,30 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         setSelectedTab(value);
         if (status === "existing") {
             onTabChange?.({
-                path,
+                path: fullIdPath ?? path,
                 entityId,
                 selectedTab: value === MAIN_TAB_VALUE ? undefined : value,
-                collection,
+                collection
             });
         }
     };
 
-    // Render the main entity form view (or a read-only view if the user cannot edit)
+    const entityReadOnlyView = !canEdit && entity ? <div
+        className={cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", (canEdit || !mainViewVisible || selectedSecondaryForm) ? "hidden" : "")}>
+        <div
+            className={cls("relative flex flex-col max-w-4xl lg:max-w-3xl xl:max-w-4xl 2xl:max-w-6xl w-full h-fit")}>
+            <Typography className={"mt-16 mb-8 mx-8"} variant={"h4"}>
+                {collection.singularName ?? collection.name}
+            </Typography>
+            <EntityView
+                className={"px-8 h-full overflow-auto"}
+                entity={entity}
+                path={path}
+                collection={collection}/>
+            <div className="h-16"/>
+        </div>
+    </div> : null;
+
     const entityView = <EntityForm<M>
         collection={collection}
         path={path}
@@ -285,8 +351,9 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         openEntityMode={layout}
         forceActionsAtTheBottom={actionsAtTheBottom}
         initialStatus={status}
-        className={cls(!mainViewVisible ? "hidden" : "", formProps?.className)}
+        className={cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className)}
         EntityFormActionsComponent={EntityEditViewFormActions}
+        disabled={!canEdit}
         {...formProps}
         onEntityChange={(entity) => {
             setUsedEntity(entity);
@@ -303,7 +370,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         onSaved={(params) => {
             const res = {
                 ...params,
-                selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab,
+                selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab
             };
             onSaved?.(res);
             formProps?.onSaved?.(res);
@@ -320,14 +387,24 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         </Tab>
     );
 
-    const customViewTabs = resolvedEntityViews.map((view) =>
-        <Tab
-            className="text-sm min-w-[120px]"
-            value={view.key}
-            key={`entity_detail_collection_tab_${view.name}`}>
-            {view.name}
-        </Tab>
-    );
+    const customViewTabsStart = resolvedEntityViews.filter(view => view.position === "start")
+        .map((view) =>
+            <Tab
+                className={!view.tabComponent ? "text-sm min-w-[120px]" : undefined}
+                value={view.key}
+                key={`entity_detail_collection_tab_${view.name}`}>
+                {view.tabComponent ?? view.name}
+            </Tab>
+        );
+    const customViewTabsEnd = resolvedEntityViews.filter(view => !view.position || view.position === "end")
+        .map((view) =>
+            <Tab
+                className={!view.tabComponent ? "text-sm min-w-[120px]" : undefined}
+                value={view.key}
+                key={`entity_detail_collection_tab_${view.name}`}>
+                {view.tabComponent ?? view.name}
+            </Tab>
+        );
 
     const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
 
@@ -350,6 +427,15 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                     onSideTabClick(value);
                 }}>
 
+                {includeJsonView && <Tab
+                    disabled={!hasAdditionalViews}
+                    value={JSON_TAB_VALUE}
+                    className={"text-sm"}>
+                    <CodeIcon size={"small"}/>
+                </Tab>}
+
+                {customViewTabsStart}
+
                 <Tab
                     disabled={!hasAdditionalViews}
                     value={MAIN_TAB_VALUE}
@@ -357,7 +443,8 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                     {collection.singularName ?? collection.name}
                 </Tab>
 
-                {customViewTabs}
+
+                {customViewTabsEnd}
 
                 {subcollectionTabs}
             </Tabs>}
@@ -367,9 +454,12 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             ? <div className="w-full pt-12 pb-16 px-4 sm:px-8 md:px-10">
                 <CircularProgressCenter/>
             </div>
-            : entityView}
+            : <>
+                {entityReadOnlyView}
+                {entityView}
+            </>}
 
-        {/*{secondaryForms}*/}
+        {jsonView}
 
         {customViewsView}
 
@@ -377,8 +467,6 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     </div>;
 
-    const plugins = customizationController.plugins;
-
     if (plugins) {
         plugins.forEach((plugin: FireCMSPlugin) => {
             if (plugin.form?.provider) {

package/src/core/EntitySidePanel.tsx

@@ -19,11 +19,18 @@ import { useLocation, useNavigate } from "react-router-dom";
  */
 export function EntitySidePanel(props: EntitySidePanelProps) {
 
+    const {
+        allowFullScreen = true,
+        path,
+        entityId,
+        formProps,
+    } = props;
+
     const {
         blocked,
         setBlocked,
         setBlockedNavigationMessage,
-        close
+        close,
     } = useSideDialogContext();
 
     const navigate = useNavigate();
@@ -64,22 +71,10 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     }
 
     const parentCollectionIds = useMemo(() => {
-        return navigationController.getParentCollectionIds(props.path);
-    }, [navigationController, props.path]);
-
-    const collection = useMemo(() => {
-        if (props.collection) {
-            return props.collection;
-        }
+        return navigationController.getParentCollectionIds(path);
+    }, [navigationController, path]);
 
-        const registryCollection = navigationController.getCollection(props.path);
-        if (registryCollection) {
-            return registryCollection;
-        }
-
-        console.error("ERROR: No collection found in path `", props.path, "`. Entity id: ", props.entityId);
-        throw Error("ERROR: No collection found in path `" + props.path + "`. Make sure you have defined a collection for this path in the root navigation.");
-    }, [navigationController, props.collection]);
+    const collection = props.collection ?? navigationController.getCollection(path);
 
     useEffect(() => {
         function beforeunload(e: any) {
@@ -126,16 +121,16 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                             onClick={onClose}>
                             <CloseIcon size={"small"}/>
                         </IconButton>
-                        <IconButton
+                        {allowFullScreen && <IconButton
                             className="self-center"
                             onClick={() => {
-                                if (props.entityId)
+                                if (entityId)
                                     navigate(location.pathname);
                                 else
                                     navigate(location.pathname + "#new");
                             }}>
                             <OpenInFullIcon size={"small"}/>
-                        </IconButton>
+                        </IconButton>}
                     </>}
                     onTabChange={({
                                       path,
@@ -151,7 +146,7 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                             collection,
                         });
                     }}
-                    formProps={props.formProps}
+                    formProps={formProps}
                 />
             </ErrorBoundary>
 

package/src/core/FireCMS.tsx

@@ -2,7 +2,7 @@
 
 import React, { useMemo } from "react";
 import { CenteredView, Typography } from "@firecms/ui";
-import { CustomizationController, EntityCollection, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
+import { CustomizationController, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
 import { AuthControllerContext } from "../contexts";
 import { useBuildSideEntityController } from "../internal/useBuildSideEntityController";
 import { useCustomizationController, useFireCMSContext } from "../hooks";
@@ -33,7 +33,7 @@ import { BreadcrumbsProvider } from "../contexts/BreacrumbsContext";
 
  * @group Core
  */
-export function FireCMS<USER extends User, EC extends EntityCollection>(props: FireCMSProps<USER, EC>) {
+export function FireCMS<USER extends User>(props: FireCMSProps<USER>) {
 
     const {
         children,
@@ -44,7 +44,7 @@ export function FireCMS<USER extends User, EC extends EntityCollection>(props: F
         authController,
         storageSource,
         dataSourceDelegate,
-        plugins,
+        plugins: pluginsProp,
         onAnalyticsEvent,
         propertyConfigs,
         entityViews,
@@ -53,17 +53,14 @@ export function FireCMS<USER extends User, EC extends EntityCollection>(props: F
         apiKey
     } = props;
 
-    /**
-     * Controller in charge of fetching and persisting data
-     */
-    const dataSource = useBuildDataSource({
-        delegate: dataSourceDelegate,
-        propertyConfigs,
-        navigationController
-    });
+    if (pluginsProp) {
+        console.warn("The `plugins` prop is deprecated in the FireCMS component. You should pass your plugins to `useBuildNavigationController` instead.");
+    }
+
+    const plugins = navigationController.plugins ?? pluginsProp;
 
     const sideDialogsController = useBuildSideDialogsController();
-    const sideEntityController = useBuildSideEntityController(navigationController, sideDialogsController);
+    const sideEntityController = useBuildSideEntityController(navigationController, sideDialogsController, authController);
 
     const pluginsLoading = plugins?.some(p => p.loading) ?? false;
 
@@ -90,6 +87,16 @@ export function FireCMS<USER extends User, EC extends EntityCollection>(props: F
         plugins
     });
 
+    /**
+     * Controller in charge of fetching and persisting data
+     */
+    const dataSource = useBuildDataSource({
+        delegate: dataSourceDelegate,
+        propertyConfigs,
+        navigationController,
+        authController
+    });
+
     if (accessResponse?.message) {
         console.warn(accessResponse.message);
     }