@firecms/core 3.0.0-beta.6 → 3.0.0-beta.8

package/src/hooks/data/save.ts

@@ -17,7 +17,6 @@ import { resolveCollection } from "../../util";
 export type SaveEntityWithCallbacksProps<M extends Record<string, any>> =
     SaveEntityProps<M> &
     {
-        callbacks?: EntityCallbacks<M>;
         onSaveSuccess?: (updatedEntity: Entity<M>) => void,
         onSaveFailure?: (e: Error) => void,
         onPreSaveHookError?: (e: Error) => void,
@@ -109,6 +108,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
         updatedValues = values;
     }
 
+    console.log("Saving entity", entityId, updatedValues);
     return dataSource.saveEntity({
         collection,
         path: resolvedPath,
@@ -117,6 +117,7 @@ export async function saveEntityWithCallbacks<M extends Record<string, any>, Use
         previousValues,
         status
     }).then((entity) => {
+        console.log("Entity saved");
         try {
             if (callbacks?.onSaveSuccess) {
                 const resolvedCollection = resolveCollection<M>({

package/src/hooks/index.tsx

@@ -10,6 +10,7 @@ export * from "./useResolvedNavigationFrom";
 
 export * from "./useStorageSource";
 export * from "./useAuthController";
+export * from "./useDialogsController";
 export * from "./useSideDialogsController";
 export * from "./useSideEntityController";
 export * from "./useFireCMSContext";

package/src/hooks/useBuildLocalConfigurationPersistence.tsx

@@ -22,10 +22,9 @@ export function useBuildLocalConfigurationPersistence(): UserConfigurationPersis
     const onCollectionModified = useCallback(<M extends Record<string, any>>(path: string, data: PartialEntityCollection<M>) => {
         const storageKey = `collection_config::${stripCollectionPath(path)}`;
         localStorage.setItem(storageKey, JSON.stringify(data));
-        const currentCache = configCache.current;
-        const cachedConfig = currentCache[storageKey];
+        const cachedConfig = configCache.current[storageKey];
         const newConfig = mergeDeep(cachedConfig ?? getCollectionFromStorage(path), data);
-        configCache.current = mergeDeep(currentCache, newConfig);
+        configCache.current[storageKey] = mergeDeep(configCache.current[storageKey], newConfig);
     }, [getCollectionFromStorage]);
 
     const [recentlyVisitedPaths, _setRecentlyVisitedPaths] = useState<string[]>([]);

package/src/hooks/useBuildNavigationController.tsx

@@ -241,7 +241,6 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
 
     const getCollection = useCallback((
         idOrPath: string,
-        entityId?: string,
         includeUserOverride = false
     ): EC | undefined => {
         const collections = collectionsRef.current;
@@ -251,7 +250,7 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         const baseCollection = getCollectionByPathOrId(removeInitialAndTrailingSlashes(idOrPath), collections);
 
         const userOverride = includeUserOverride ? userConfigPersistence?.getCollectionConfig(idOrPath) : undefined;
-        const overriddenCollection = baseCollection ? mergeDeep(baseCollection, userOverride) : undefined;
+        const overriddenCollection = baseCollection ? mergeDeep(baseCollection, userOverride ?? {}) : undefined;
 
         let result: Partial<EntityCollection> | undefined = overriddenCollection;
 

package/src/hooks/useResolvedNavigationFrom.tsx

@@ -80,7 +80,7 @@ export function resolveNavigationFrom<M extends Record<string, any>, UserType ex
             if (entry.type === "collection") {
                 return Promise.resolve(entry);
             } else if (entry.type === "entity") {
-                const collection = navigation.getCollection(entry.path, entry.entityId);
+                const collection = navigation.getCollection(entry.path);
                 if (!collection) {
                     throw Error(`No collection defined in the navigation for the entity with path ${entry.path}`);
                 }

package/src/hooks/useValidateAuthenticator.tsx

@@ -11,20 +11,21 @@ import { AuthController, Authenticator, DataSourceDelegate, StorageSource, User
  * @param storageSource
  * @param dataSourceDelegate
  */
-export function useValidateAuthenticator<UserType extends User = User, Controller extends AuthController<UserType> = AuthController<UserType>>({
-                                                                                                                                                   disabled,
-                                                                                                                                                   authController,
-                                                                                                                                                   authenticator,
-                                                                                                                                                   storageSource,
-                                                                                                                                                   dataSourceDelegate
-                                                                                                                                               }:
-                                                                                                                                                   {
-                                                                                                                                                       disabled?: boolean,
-                                                                                                                                                       authController: Controller,
-                                                                                                                                                       authenticator?: boolean | Authenticator<UserType, Controller>,
-                                                                                                                                                       dataSourceDelegate: DataSourceDelegate;
-                                                                                                                                                       storageSource: StorageSource;
-                                                                                                                                                   }): {
+export function useValidateAuthenticator<UserType extends User = User, Controller extends AuthController<UserType> = AuthController<UserType>>
+({
+     disabled,
+     authController,
+     authenticator,
+     storageSource,
+     dataSourceDelegate
+ }:
+     {
+         disabled?: boolean,
+         authController: Controller,
+         authenticator?: boolean | Authenticator<UserType, Controller>,
+         dataSourceDelegate: DataSourceDelegate;
+         storageSource: StorageSource;
+     }): {
     canAccessMainView: boolean,
     authLoading: boolean,
     notAllowedError: any,
@@ -70,7 +71,6 @@ export function useValidateAuthenticator<UserType extends User = User, Controlle
         }
 
         const delegateUser = authController.user;
-        console.debug("Checking authentication for user", delegateUser);
 
         if (authenticator instanceof Function && delegateUser && !equal(checkedUserRef.current?.uid, delegateUser.uid)) {
             setAuthLoading(true);

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./core";
+export * from "./app";
 export * from "./types";
 export * from "./form";
 export * from "./preview";

package/src/internal/useBuildDataSource.ts

@@ -9,6 +9,7 @@ import {
     FetchCollectionProps,
     FetchEntityProps,
     FilterValues,
+    FireCMSContext,
     ListenCollectionProps,
     ListenEntityProps,
     NavigationController,
@@ -313,6 +314,17 @@ export function useBuildDataSource({
             )
         }, [delegate.isFilterCombinationValid]),
 
+        initTextSearch: useCallback(async (props: {
+            context: FireCMSContext,
+            path: string,
+            collection: EntityCollection,
+            parentCollectionIds?: string[]
+        }): Promise<boolean> => {
+            if (!delegate.initTextSearch)
+                return false;
+            return delegate.initTextSearch(props)
+        }, [delegate.initTextSearch]),
+
     };
 
 }

package/src/internal/useBuildSideEntityController.tsx

@@ -2,14 +2,15 @@ import { useCallback, useEffect, useRef } from "react";
 import {
     EntityCollection,
     EntitySidePanelProps,
-    NavigationController,
+    NavigationController, PropertyConfig,
+    ResolvedProperty,
     SideDialogPanelProps,
     SideDialogsController,
     SideEntityController
 } from "../types";
 import { getNavigationEntriesFromPathInternal, NavigationViewInternal } from "../util/navigation_from_path";
 import { useLocation } from "react-router-dom";
-import { removeInitialAndTrailingSlashes, resolveDefaultSelectedView } from "../util";
+import { removeInitialAndTrailingSlashes, resolveCollection, resolveDefaultSelectedView } from "../util";
 import { ADDITIONAL_TAB_WIDTH, CONTAINER_FULL_WIDTH, FORM_CONTAINER_WIDTH } from "./common";
 import { useLargeLayout } from "../hooks";
 import { EntitySidePanel } from "../core/EntitySidePanel";
@@ -19,8 +20,67 @@ const NEW_URL_HASH = "new";
 export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: boolean): string {
     if (small) return CONTAINER_FULL_WIDTH;
     const mainViewSelected = !props.selectedSubPath;
-    const resolvedWidth: string | undefined = typeof props.width === "number" ? `${props.width}px` : props.width;
-    return !mainViewSelected ? `calc(${ADDITIONAL_TAB_WIDTH} + ${resolvedWidth ?? FORM_CONTAINER_WIDTH})` : resolvedWidth ?? FORM_CONTAINER_WIDTH
+    let resolvedWidth: string | undefined;
+    if (props.width) {
+        resolvedWidth = typeof props.width === "number" ? `${props.width}px` : props.width;
+    } else if (props.collection?.sideDialogWidth) {
+        resolvedWidth = typeof props.collection.sideDialogWidth === "number" ? `${props.collection.sideDialogWidth}px` : props.collection.sideDialogWidth;
+    }
+
+    if (!mainViewSelected) {
+        return `calc(${ADDITIONAL_TAB_WIDTH} + ${resolvedWidth ?? FORM_CONTAINER_WIDTH})`
+    } else {
+        if (resolvedWidth) {
+            return resolvedWidth
+        } else if (!props.collection) {
+            return FORM_CONTAINER_WIDTH;
+        } else {
+            return calculateCollectionDesiredWidth(props.collection);
+        }
+    }
+}
+
+const collectionViewWidthCache: { [key: string]: string } = {};
+
+function calculateCollectionDesiredWidth(collection: EntityCollection<any>): string {
+    if (collectionViewWidthCache[collection.id]) {
+        return collectionViewWidthCache[collection.id];
+    }
+    const resolvedCollection = resolveCollection({
+        collection,
+        path: "__ignored",
+        ignoreMissingFields: true
+    });
+
+    let result = FORM_CONTAINER_WIDTH
+    if (resolvedCollection?.properties) {
+        const values = Object.values(resolvedCollection.properties).map((p: ResolvedProperty) => getNestedPropertiesDepth(p));
+        const maxDepth = Math.max(...values);
+        if (maxDepth < 3) {
+            result = FORM_CONTAINER_WIDTH;
+        } else {
+            result = 768 + 32 * (maxDepth - 2) + "px";
+        }
+    }
+    collectionViewWidthCache[collection.id] = result;
+    return result;
+}
+
+function getNestedPropertiesDepth(property: ResolvedProperty, accumulator: number = 0): number {
+    if (property.dataType === "map" && property.properties) {
+        const values = Object.values(property.properties).flatMap((property) => getNestedPropertiesDepth(property, accumulator + 1));
+        return Math.max(...values);
+    } else if (property.dataType === "array" && property.oneOf) {
+        return accumulator + 3;
+    } else if (property.dataType === "array" && property.of) {
+        if (Array.isArray(property.of)) {
+            return Math.max(...property.of.map((p) => getNestedPropertiesDepth(p, accumulator + 1)));
+        } else {
+            return getNestedPropertiesDepth(property.of, accumulator + 1);
+        }
+    } else {
+        return accumulator + 1;
+    }
 }
 
 export const useBuildSideEntityController = (navigation: NavigationController,
@@ -40,12 +100,12 @@ export const useBuildSideEntityController = (navigation: NavigationController,
                 const entityOrCollectionPath = navigation.urlPathToDataPath(location.pathname);
                 const panelsFromUrl = buildSidePanelsFromUrl(entityOrCollectionPath, navigation.collections ?? [], newFlag);
                 for (let i = 0; i < panelsFromUrl.length; i++) {
-                    const panel = panelsFromUrl[i];
+                    const props = panelsFromUrl[i];
                     setTimeout(() => {
                         if (i === 0)
-                            sideDialogsController.replace(propsToSidePanel(panel, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout));
+                            sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout));
                         else
-                            sideDialogsController.open(propsToSidePanel(panel, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout))
+                            sideDialogsController.open(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout))
                     }, 1);
                 }
             } else {
@@ -119,7 +179,8 @@ export function buildSidePanelsFromUrl(path: string, collections: EntityCollecti
                 sidePanels.push({
                         path: navigationEntry.path,
                         entityId: navigationEntry.entityId,
-                        copy: false
+                        copy: false,
+                        width: navigationEntry.parentCollection?.sideDialogWidth
                     }
                 );
             } else if (navigationEntry.type === "custom_view") {
@@ -163,16 +224,16 @@ const propsToSidePanel = (props: EntitySidePanelProps<any>,
 
         const resolvedPanelProps: EntitySidePanelProps<any> = {
             ...props,
-            path: resolvedPath
+            path: resolvedPath,
         };
 
-        return ({
+        return {
             key: `${props.path}/${props.entityId}`,
             component: <EntitySidePanel {...resolvedPanelProps}/>,
             urlPath: newPath,
             parentUrlPath: buildUrlCollectionPath(collectionPath),
             width: getEntityViewWidth(props, smallLayout),
             onClose: props.onClose
-        });
+        };
     }
 ;

package/src/preview/PropertyPreview.tsx

@@ -47,13 +47,12 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
         size,
         height,
         width,
-        // entity
+        interactive
     } = props;
 
     const property = resolveProperty({
         propertyKey,
         propertyOrBuilder: inputProperty,
-        propertyValue: value,
         fields: customizationController.propertyConfigs
     });
 
@@ -85,12 +84,15 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                     content =
                         <UrlComponentPreview size={props.size}
                                              url={value}
+                                             interactive={interactive}
                                              previewType={stringProperty.url}/>;
             } else if (stringProperty.storage) {
+                const filePath = stringProperty.storage.previewUrl ? stringProperty.storage.previewUrl(value) : value;
                 content = <StorageThumbnail
+                    interactive={interactive}
                     storeUrl={property.storage?.storeUrl ?? false}
                     size={props.size}
-                    storagePathOrDownloadUrl={value}/>;
+                    storagePathOrDownloadUrl={filePath}/>;
             } else if (stringProperty.markdown) {
                 content = <Markdown source={value} size={"small"}/>;
             } else {
@@ -172,8 +174,9 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                 content = <ReferencePreview
                     disabled={!property.path}
                     previewProperties={property.previewProperties}
+                    includeId={property.includeId}
+                    includeEntityLink={property.includeEntityLink}
                     size={props.size}
-                    // onClick={props.onClick}
                     reference={value as EntityReference}
                 />;
             } else {

package/src/preview/PropertyPreviewProps.tsx

@@ -46,4 +46,10 @@ export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any
      */
     customProps?: CustomProps;
 
+    /**
+     * If the preview should be interactive or not.
+     * This applies only to videos.
+     */
+    interactive?: boolean;
+
 }

package/src/preview/components/BooleanPreview.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Checkbox, cn } from "@firecms/ui";
+import { Checkbox, cls } from "@firecms/ui";
 import { PreviewSize } from "../PropertyPreviewProps";
 import { Property } from "../../types";
 
@@ -21,6 +21,6 @@ export function BooleanPreview({
                   size={size}
                   color={"secondary"}/>
         {property.name && <span
-            className={cn("text-text-secondary dark:text-text-secondary-dark", size === "tiny" ? "text-sm" : "")}>{property.name}</span>}
+            className={cls("text-text-secondary dark:text-text-secondary-dark", size === "tiny" ? "text-sm" : "")}>{property.name}</span>}
     </div>;
 }

package/src/preview/components/EnumValuesChip.tsx

@@ -1,7 +1,7 @@
 import React from "react";
+import { Chip } from "@firecms/ui";
 import { EnumValues } from "../../types";
 import { buildEnumLabel, enumToObjectEntries, getColorScheme, getLabelOrConfigFrom } from "../../util/enums";
-import { Chip } from "@firecms/ui";
 
 export interface EnumValuesChipProps {
     enumValues?: EnumValues;

package/src/preview/components/ImagePreview.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useMemo, useState } from "react";
+import React, { CSSProperties, useMemo } from "react";
 
 import { getThumbnailMeasure } from "../util";
 import { PreviewSize } from "../PropertyPreviewProps";
@@ -20,8 +20,6 @@ export function ImagePreview({
                                  url
                              }: ImagePreviewProps) {
 
-    const [onHover, setOnHover] = useState(false);
-
     const imageSize = useMemo(() => getThumbnailMeasure(size), [size]);
 
     if (size === "tiny") {
@@ -47,60 +45,50 @@ export function ImagePreview({
 
     return (
         <div
-            className="relative flex items-center justify-center max-w-full max-h-full"
+            className="relative flex items-center justify-center max-w-full max-h-full group"
             style={{
                 width: imageSize,
                 height: imageSize
             }}
-            key={"image_preview_" + url}
-            onMouseEnter={() => setOnHover(true)}
-            onMouseMove={() => setOnHover(true)}
-            onMouseLeave={() => setOnHover(false)}>
+            key={"image_preview_" + url}>
 
             <img src={url}
                  className={"rounded-md"}
                  style={imageStyle}/>
 
-            {onHover && <>
 
-                {navigator && <Tooltip title="Copy url to clipboard">
-                    <div
-                        className="rounded-full absolute bottom-[-4px] right-8">
-                        <IconButton
-                            variant={"filled"}
-                            size={"small"}
-                            onClick={(e) => {
-                                e.stopPropagation();
-                                e.preventDefault();
-                                return navigator.clipboard.writeText(url);
-                            }}>
-                            <ContentCopyIcon className={"text-gray-500"}
-                                             size={"small"}/>
-                        </IconButton>
-                    </div>
+            <div className={"flex flex-row gap-2 absolute bottom-[-4px] right-[-4px] invisible group-hover:visible"}>
+                {navigator && <Tooltip title="Copy url to clipboard" side={"bottom"}>
+                    <IconButton
+                        variant={"filled"}
+                        size={"small"}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            return navigator.clipboard.writeText(url);
+                        }}>
+                        <ContentCopyIcon className={"text-gray-700 dark:text-gray-300"}
+                                         size={"small"}/>
+                    </IconButton>
                 </Tooltip>}
 
-                <Tooltip title="Open image in new tab">
+                <Tooltip title="Open image in new tab" side={"bottom"}>
                     <IconButton
+                        className="invisible group-hover:visible"
                         variant={"filled"}
                         component={"a" as React.ElementType}
-                        style={{
-                            position: "absolute",
-                            bottom: -4,
-                            right: -4
-                        }}
                         href={url}
                         rel="noopener noreferrer"
                         target="_blank"
                         size={"small"}
                         onClick={(e: any) => e.stopPropagation()}
                     >
-                        <OpenInNewIcon className={"text-gray-500"}
+                        <OpenInNewIcon className={"text-gray-700 dark:text-gray-300"}
                                        size={"small"}/>
                     </IconButton>
                 </Tooltip>
-            </>
-            }
+            </div>
+
         </div>
     );
 }

package/src/preview/components/ReferencePreview.tsx

@@ -1,16 +1,10 @@
 import * as React from "react";
 
 import { Entity, EntityCollection, EntityReference } from "../../types";
-import {
-    useCustomizationController,
-    useEntityFetch,
-    useNavigationController,
-    useSideEntityController
-} from "../../hooks";
+import { useCustomizationController, useEntityFetch, useNavigationController } from "../../hooks";
 import { PreviewSize } from "../PropertyPreviewProps";
-import { IconButton, KeyboardTabIcon, Skeleton, Tooltip } from "@firecms/ui";
+import { Skeleton } from "@firecms/ui";
 import { ErrorView } from "../../components";
-import { useAnalyticsController } from "../../hooks/useAnalyticsController";
 import { EntityPreview, EntityPreviewContainer } from "../../components/EntityPreview";
 
 export type ReferencePreviewProps = {
@@ -20,7 +14,8 @@ export type ReferencePreviewProps = {
     previewProperties?: string[];
     onClick?: (e: React.SyntheticEvent) => void;
     hover?: boolean;
-    allowEntityNavigation?: boolean;
+    includeEntityLink?: boolean;
+    includeId?: boolean;
 };
 
 /**
@@ -46,19 +41,21 @@ function areEqual(prevProps: ReferencePreviewProps, nextProps: ReferencePreviewP
         prevProps.hover === nextProps.hover &&
         prevProps.reference?.id === nextProps.reference?.id &&
         prevProps.reference?.path === nextProps.reference?.path &&
-        prevProps.allowEntityNavigation === nextProps.allowEntityNavigation
+        prevProps.includeEntityLink === nextProps.includeEntityLink &&
+        prevProps.onClick === nextProps.onClick
         ;
 }
 
-function ReferencePreviewInternal<M extends Record<string, any>>({
-                                                                     disabled,
-                                                                     reference,
-                                                                     previewProperties,
-                                                                     size,
-                                                                     hover,
-                                                                     onClick,
-                                                                     allowEntityNavigation = true
-                                                                 }: ReferencePreviewProps) {
+function ReferencePreviewInternal({
+                                      disabled,
+                                      reference,
+                                      previewProperties,
+                                      size,
+                                      hover,
+                                      onClick,
+                                      includeEntityLink = true,
+                                      includeId = true
+                                  }: ReferencePreviewProps) {
 
     const customizationController = useCustomizationController();
 
@@ -79,7 +76,8 @@ function ReferencePreviewInternal<M extends Record<string, any>>({
         previewProperties={previewProperties}
         size={size}
         disabled={disabled}
-        allowEntityNavigation={allowEntityNavigation}
+        includeEntityLink={includeEntityLink}
+        includeId={includeId}
         onClick={onClick}
         hover={hover}/>
 }
@@ -90,7 +88,8 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({
                                                                            previewProperties,
                                                                            size,
                                                                            disabled,
-                                                                           allowEntityNavigation,
+                                                                           includeEntityLink,
+                                                                           includeId,
                                                                            onClick,
                                                                            hover
                                                                        }: ReferencePreviewProps & {
@@ -158,7 +157,8 @@ function ReferencePreviewExisting<M extends Record<string, any> = any>({
                           entity={usedEntity}
                           collection={collection}
                           onClick={onClick}
-                          includeEntityNavigation={allowEntityNavigation}
+                          includeEntityLink={includeEntityLink}
+                          includeId={includeId}
                           hover={hover}/>;
 
 }

package/src/preview/components/StorageThumbnail.tsx

@@ -11,6 +11,7 @@ type StorageThumbnailProps = {
     storagePathOrDownloadUrl: string;
     storeUrl: boolean;
     size: PreviewSize;
+    interactive?: boolean;
 };
 
 /**
@@ -21,13 +22,15 @@ export const StorageThumbnail = React.memo<StorageThumbnailProps>(StorageThumbna
 function areEqual(prevProps: StorageThumbnailProps, nextProps: StorageThumbnailProps) {
     return prevProps.size === nextProps.size &&
         prevProps.storagePathOrDownloadUrl === nextProps.storagePathOrDownloadUrl &&
-        prevProps.storeUrl === nextProps.storeUrl;
+        prevProps.storeUrl === nextProps.storeUrl&&
+        prevProps.interactive === nextProps.interactive;
 }
 
 const URL_CACHE: Record<string, DownloadConfig> = {};
 
 export function StorageThumbnailInternal({
                                              storeUrl,
+                                             interactive,
                                              storagePathOrDownloadUrl,
                                              size
                                          }: StorageThumbnailProps) {
@@ -68,6 +71,7 @@ export function StorageThumbnailInternal({
     return downloadConfig?.url
         ? <UrlComponentPreview previewType={previewType}
                                url={downloadConfig.url}
+                               interactive={interactive}
                                size={size}
                                hint={storagePathOrDownloadUrl}/>
         : renderSkeletonImageThumbnail(size);