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

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -93,6 +93,10 @@ export type EntityCollectionViewProps<M extends Record<string, any>> = {
      * It defaults to the collection path if not provided.
      */
     fullPath?: string;
+    /**
+     * Full path using navigation ids.
+     */
+    fullIdPath?: string;
     /**
      * If this is a subcollection, specify the parent collection ids.
      */
@@ -138,6 +142,7 @@ export type EntityCollectionViewProps<M extends Record<string, any>> = {
 export const EntityCollectionView = React.memo(
     function EntityCollectionView<M extends Record<string, any>>({
                                                                      fullPath: fullPathProp,
+                                                                     fullIdPath,
                                                                      parentCollectionIds,
                                                                      isSubCollection,
                                                                      className,
@@ -146,10 +151,11 @@ export const EntityCollectionView = React.memo(
                                                                  }: EntityCollectionViewProps<M>
     ) {
 
+
         const context = useFireCMSContext();
+        const navigation = useNavigationController();
         const fullPath = fullPathProp ?? collectionProp.path;
         const dataSource = useDataSource(collectionProp);
-        const navigation = useNavigationController();
         const sideEntityController = useSideEntityController();
         const authController = useAuthController();
         const userConfigPersistence = useUserConfigurationPersistence();
@@ -240,6 +246,7 @@ export const EntityCollectionView = React.memo(
             navigateToEntity({
                 navigation,
                 path,
+                fullIdPath,
                 sideEntityController,
                 openEntityMode,
                 collection,
@@ -259,6 +266,7 @@ export const EntityCollectionView = React.memo(
                 collection,
                 entityId: undefined,
                 path: fullPath,
+                fullIdPath,
                 sideEntityController,
                 navigation,
                 onClose: unselectNavigatedEntity
@@ -378,7 +386,8 @@ export const EntityCollectionView = React.memo(
         const resolvedCollection = useMemo(() => resolveCollection<M>({
             collection,
             path: fullPath,
-            propertyConfigs: customizationController.propertyConfigs
+            propertyConfigs: customizationController.propertyConfigs,
+            authController,
         }), [collection, fullPath]);
 
         const getPropertyFor = useCallback(({
@@ -399,7 +408,8 @@ export const EntityCollectionView = React.memo(
                 path: entity.path,
                 values: entity.values,
                 entityId: entity.id,
-                propertyConfigs: customizationController.propertyConfigs
+                propertyConfigs: customizationController.propertyConfigs,
+                authController
             });
         }, [collection.properties, customizationController.propertyConfigs, resolvedCollection.properties]);
 
@@ -424,6 +434,7 @@ export const EntityCollectionView = React.memo(
                                         entityId: entity.id,
                                         selectedTab: subcollection.id ?? subcollection.path,
                                         path: fullPath,
+                                        fullIdPath,
                                         navigation,
                                         sideEntityController
                                     })
@@ -527,7 +538,7 @@ export const EntityCollectionView = React.memo(
                     highlightEntity={setHighlightedEntity}
                     unhighlightEntity={unselectNavigatedEntity}
                     collection={collection}
-                    fullPath={fullPath}
+                    fullPath={fullIdPath ?? fullPath}
                     actions={actions}
                     hideId={collection?.hideIdFromCollection}
                     onCollectionChange={updateLastDeleteTimestamp}
@@ -691,6 +702,7 @@ export const EntityCollectionView = React.memo(
                     getIdColumnWidth={getIdColumnWidth}
                     additionalIDHeaderWidget={<EntityIdHeaderWidget
                         path={fullPath}
+                        fullIdPath={fullIdPath ?? fullPath}
                         collection={collection}/>}
                     openEntityMode={openEntityMode}
                 />
@@ -807,10 +819,12 @@ function buildPropertyWidthOverwrite(key: string, width: number): PartialEntityC
 
 function EntityIdHeaderWidget({
                                   collection,
-                                  path
+                                  path,
+                                  fullIdPath
                               }: {
     collection: EntityCollection,
-    path: string
+    path: string,
+    fullIdPath: string
 }) {
 
     const navigation = useNavigationController();
@@ -848,6 +862,7 @@ function EntityIdHeaderWidget({
                                   collection,
                                   entityId,
                                   path,
+                                  fullIdPath,
                                   sideEntityController,
                                   navigation
                               })
@@ -882,6 +897,7 @@ function EntityIdHeaderWidget({
                                                       collection,
                                                       entityId: id,
                                                       path,
+                                                      fullIdPath,
                                                       sideEntityController,
                                                       navigation
                                                   })

package/src/components/EntityJsonPreview.tsx

@@ -0,0 +1,66 @@
+import React, { useRef } from "react";
+import { Highlight, themes } from "prism-react-renderer";
+import { useModeController } from "../hooks";
+
+export function EntityJsonPreview({ values }: { values: object }) {
+    const code = JSON.stringify(values, null, "\t");
+    const { mode } = useModeController();
+    const preRef = useRef<HTMLPreElement>(null);
+
+    // Global keydown handler
+    // const handleGlobalKeyDown = useCallback((e: KeyboardEvent) => {
+    //     // Check for Control (Windows/Linux) or Command (macOS) + "a":
+    //     if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a") {
+    //         // If our code view is mounted, perform selection
+    //         if (preRef.current) {
+    //             e.preventDefault();
+    //             e.stopPropagation();
+    //
+    //             const selection = window.getSelection();
+    //             const range = document.createRange();
+    //             range.selectNodeContents(preRef.current);
+    //             if (selection) {
+    //                 selection.removeAllRanges();
+    //                 selection.addRange(range);
+    //             }
+    //         }
+    //     }
+    // }, []);
+
+    // // Attach the global keydown listener when component mounts,
+    // // and remove it when it unmounts.
+    // useEffect(() => {
+    //     document.addEventListener("keydown", handleGlobalKeyDown);
+    //     return () => {
+    //         document.removeEventListener("keydown", handleGlobalKeyDown);
+    //     };
+    // }, [handleGlobalKeyDown]);
+
+    return (
+        <Highlight
+            theme={mode === "dark" ? themes.vsDark : themes.github}
+            code={code}
+            language="json"
+        >
+            {({ style, tokens, getLineProps, getTokenProps }) => (
+                <pre
+                    // Bind the ref to our pre element so we can select its contents.
+                    ref={preRef}
+                    style={{
+                        ...style,
+                        backgroundColor: "inherit"
+                    }}
+                    className="max-w-6xl mx-auto p-8 rounded text-sm"
+                >
+          {tokens.map((line, i) => (
+              <div key={i} {...getLineProps({ line })} className="text-wrap">
+                  {line.map((token, key) => (
+                      <span key={key} {...getTokenProps({ token })} className="word-break" />
+                  ))}
+              </div>
+          ))}
+        </pre>
+            )}
+        </Highlight>
+    );
+}

package/src/components/EntityPreview.tsx

@@ -13,7 +13,12 @@ import {
 } from "../util";
 import { cls, defaultBorderMixin, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
 import { PreviewSize, PropertyPreview, SkeletonPropertyComponent } from "../preview";
-import { useCustomizationController, useNavigationController, useSideEntityController } from "../hooks";
+import {
+    useAuthController,
+    useCustomizationController,
+    useNavigationController,
+    useSideEntityController
+} from "../hooks";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 
 export type EntityPreviewProps = {
@@ -46,6 +51,7 @@ export function EntityPreview({
                                   entity
                               }: EntityPreviewProps) {
 
+    const authController = useAuthController();
     const analyticsController = useAnalyticsController();
     const sideEntityController = useSideEntityController();
     const customizationController = useCustomizationController();
@@ -62,10 +68,11 @@ export function EntityPreview({
         collection,
         path: entity.path,
         values: entity.values,
-        propertyConfigs: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     }), [collection]);
 
-    const listProperties = useMemo(() => getEntityPreviewKeys(resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "medium" || size === "large" ? 3 : 1),
+    const listProperties = useMemo(() => getEntityPreviewKeys(authController, resolvedCollection, customizationController.propertyConfigs, previewProperties, size === "medium" || size === "large" ? 3 : 1),
         [previewProperties, resolvedCollection, size]);
 
     const titleProperty = getEntityTitlePropertyKey(resolvedCollection, customizationController.propertyConfigs);

package/src/components/EntityView.tsx

@@ -5,6 +5,7 @@ import { resolveCollection } from "../util";
 import { cls, defaultBorderMixin, IconButton, OpenInNewIcon } from "@firecms/ui";
 import { CustomizationController } from "../types/customization_controller";
 import { useCustomizationController } from "../hooks/useCustomizationController";
+import { useAuthController } from "../hooks";
 
 /**
  * @group Components
@@ -24,13 +25,15 @@ export function EntityView<M extends Record<string, any>>(
         className
     }: EntityViewProps<M>) {
 
+    const authController = useAuthController();
     const customizationController: CustomizationController = useCustomizationController();
     const resolvedCollection: ResolvedEntityCollection<M> = useMemo(() => resolveCollection<M>({
         collection,
         path,
         entityId: entity.id,
         values: entity.values,
-        propertyConfigs: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     }), [collection, path, entity, customizationController.propertyConfigs]);
 
     const properties: ResolvedProperties = resolvedCollection.properties;

package/src/components/ReferenceTable/ReferenceSelectionTable.tsx

@@ -101,6 +101,7 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         maxSelection,
     }: ReferenceSelectionInnerProps<M>) {
 
+    const authController = useAuthController();
     const sideDialogContext = useSideDialogContext();
     const sideEntityController = useSideEntityController();
     const navigation = useNavigationController();
@@ -253,7 +254,8 @@ export function ReferenceSelectionTable<M extends Record<string, any>>(
         collection: collection,
         path: fullPath,
         values: {},
-        propertyConfigs: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs,
+        authController
     }), [collection, customizationController.propertyConfigs, fullPath]);
 
     const displayedColumnIds = useColumnIds(resolvedCollection, false);

package/src/components/VirtualTable/VirtualTable.tsx

@@ -139,7 +139,35 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             setColumns(columnsProp);
         }, [columnsProp]);
 
-        const [measureRef, bounds] = useMeasure();
+        const [_, setForceUpdate] = useState(false);
+        useEffect(() => {
+            // Create a ResizeObserver to detect size changes more aggressively
+            if (tableRef.current) {
+                const resizeObserver = new ResizeObserver(() => {
+                    // Force a re-render when size changes
+                    setForceUpdate(prev => !prev);
+                });
+
+                resizeObserver.observe(tableRef.current);
+
+                return () => {
+                    if (tableRef.current) {
+                        resizeObserver.unobserve(tableRef.current);
+                    }
+                    resizeObserver.disconnect();
+                };
+            }
+            return () => {
+            }
+        }, [tableRef]);
+
+        const [measureRef, bounds] = useMeasure({
+            debounce: 50,
+            polyfill: ResizeObserver,
+            scroll: true,
+            // This is important for handling zooming in react-flow
+            offsetSize: true
+        });
 
         const onColumnResizeInternal = useCallback((params: OnVirtualTableColumnResizeParams) => {
             if (debug)

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/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}>