@firecms/core 3.0.0-beta.2-pre.5 → 3.0.0-canary.0

package/src/core/Scaffold.tsx

@@ -176,7 +176,7 @@ function StyledDrawer(props: {
         className={"relative h-full no-scrollbar overflow-y-auto overflow-x-hidden"}
         style={{
             width,
-            transition: "left 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
+            transition: "left 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
         }}
     >
 
@@ -201,8 +201,8 @@ function StyledDrawer(props: {
         <div className={"flex flex-col h-full"}>
             <div
                 style={{
-                    transition: "padding 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
-                    padding: props.open ? "32px 96px 0px 24px" : "72px 16px 0px"
+                    transition: "padding 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
+                    padding: props.open ? "32px 144px 0px 24px" : "72px 16px 0px"
                 }}
                 className={cn("cursor-pointer")}>
 
@@ -215,7 +215,7 @@ function StyledDrawer(props: {
                             ? <img src={props.logo}
                                    alt="Logo"
                                    className={cn("max-w-full max-h-full",
-                                       props.open ?? "w-[160px] h-[160px]")}/>
+                                       props.open ?? "w-[112px] h-[112px]")}/>
                             : <FireCMSLogo/>}
 
                     </Link>
@@ -259,7 +259,7 @@ function StyledDrawer(props: {
             onMouseLeave={props.onMouseLeave}
             style={{
                 width,
-                transition: "left 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 150ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
+                transition: "left 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, opacity 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms, width 100ms cubic-bezier(0.4, 0, 0.6, 1) 0ms"
             }}>
 
             {innerDrawer}

package/src/core/field_configs.tsx

@@ -104,6 +104,17 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
             Field: TextFieldBinding
         }
     },
+    switch: {
+        key: "switch",
+        name: "Switch",
+        description: "Boolean true or false field (or yes or no, 0 or 1...)",
+        Icon: FlagIcon,
+        color: "#20d9d2",
+        property: {
+            dataType: "boolean",
+            Field: SwitchFieldBinding
+        }
+    },
     select: {
         key: "select",
         name: "Select/enum",
@@ -225,17 +236,6 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
             Field: ArrayOfReferencesFieldBinding
         }
     },
-    switch: {
-        key: "switch",
-        name: "Switch",
-        description: "Boolean true or false field (or yes or no, 0 or 1...)",
-        Icon: FlagIcon,
-        color: "#20d9d2",
-        property: {
-            dataType: "boolean",
-            Field: SwitchFieldBinding
-        }
-    },
     date_time: {
         key: "date_time",
         name: "Date/time",

package/src/form/EntityForm.tsx

@@ -34,7 +34,7 @@ import {
 } from "../hooks";
 import { ErrorFocus } from "./components/ErrorFocus";
 import { CustomIdField } from "./components/CustomIdField";
-import { Alert, Button, cn, DialogActions, IconButton, Typography } from "@firecms/ui";
+import { Alert, Button, cn, DialogActions, IconButton, Tooltip, Typography } from "@firecms/ui";
 import { ErrorBoundary } from "../components";
 import {
     copyEntityAction,
@@ -42,6 +42,7 @@ import {
 } from "../components/EntityCollectionTable/internal/default_entity_actions";
 import { useAnalyticsController } from "../hooks/useAnalyticsController";
 import { ValidationError } from "yup";
+import { PropertyIdCopyTooltipContent } from "../components/PropertyIdCopyTooltipContent";
 
 /**
  * @group Components
@@ -388,7 +389,10 @@ function EntityFormInternal<M extends Record<string, any>>({
 
     const authController = useAuthController();
 
-    const getActionsForEntity = useCallback(({ entity, customEntityActions }: { entity?: Entity<M>, customEntityActions?: EntityAction[] }): EntityAction[] => {
+    const getActionsForEntity = useCallback(({ entity, customEntityActions }: {
+        entity?: Entity<M>,
+        customEntityActions?: EntityAction[]
+    }): EntityAction[] => {
         const createEnabled = canCreateEntity(inputCollection, authController, fullPathToCollectionSegments(path), null);
         const deleteEnabled = entity ? canDeleteEntity(inputCollection, authController, fullPathToCollectionSegments(path), entity) : true;
         const actions: EntityAction[] = [];
@@ -481,7 +485,10 @@ function EntityFormInternal<M extends Record<string, any>>({
                     savingError={savingError}
                     closeAfterSaveRef={closeAfterSaveRef}
                     autoSave={autoSave}
-                    entityActions={getActionsForEntity({ entity, customEntityActions: inputCollection.entityActions })}/>}
+                    entityActions={getActionsForEntity({
+                        entity,
+                        customEntityActions: inputCollection.entityActions
+                    })}/>}
 
             </div>
         </div>
@@ -588,7 +595,12 @@ function InnerForm<M extends Record<string, any>>(props: FormexController<M> & {
                         <div id={`form_field_${key}`}
                              key={`field_${resolvedCollection.name}_${key}`}>
                             <ErrorBoundary>
-                                <PropertyFieldBinding {...cmsFormFieldProps}/>
+                                <Tooltip title={<PropertyIdCopyTooltipContent propertyId={key}/>}
+                                         delayDuration={800}
+                                         side={"left"}
+                                         sideOffset={16}>
+                                    <PropertyFieldBinding {...cmsFormFieldProps}/>
+                                </Tooltip>
                             </ErrorBoundary>
                         </div>
                     );

package/src/form/PropertyFieldBinding.tsx

@@ -67,7 +67,7 @@ export const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a:
     return false;
 }) as typeof PropertyFieldBindingInternal;
 
-function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps = any, M extends Record<string, any> = Record<string, any>>
+function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Record<string, any> = Record<string, any>>
 ({
      propertyKey,
      property,
@@ -83,13 +83,8 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps =
 
     const customizationController = useCustomizationController();
 
-    const shouldAlwaysRerender = shouldPropertyReRender(property, customizationController.plugins);
-    // we use the standard Field for user defined fields, since it rebuilds
-    // when there are changes in other values, in contrast to Field
-    const FieldComponent = Field;
-
     return (
-        <FieldComponent
+        <Field
             name={propertyKey}
         >
             {(fieldProps) => {
@@ -155,7 +150,7 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps =
                     componentProps={componentProps}
                     fieldProps={fieldProps}/>;
             }}
-        </FieldComponent>
+        </Field>
     );
 
 }

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { FieldProps, Properties, ResolvedProperties } from "../../types";
 
-import { LabelWithIcon } from "../../components";
+import { ErrorBoundary, LabelWithIcon } from "../../components";
 import { getIconForProperty, isHidden, pick } from "../../util";
 import { FieldHelperText } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
@@ -70,8 +70,10 @@ export function MapFieldBinding<T extends Record<string, any>>({
                         };
                         return (
                             <div key={`map-${propertyKey}-${index}`}>
-                                <PropertyFieldBinding
-                                    {...fieldProps}/>
+                                <ErrorBoundary>
+                                    <PropertyFieldBinding
+                                        {...fieldProps}/>
+                                </ErrorBoundary>
                             </div>
                         );
                     }
@@ -90,10 +92,10 @@ export function MapFieldBinding<T extends Record<string, any>>({
     );
 
     return (
-        <>
+        <ErrorBoundary>
 
             {!tableMode && !partOfBlock && <ExpandablePanel initiallyExpanded={expanded}
-                                                            className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
+                                                            className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-slate-50 bg-opacity-50 dark:bg-gray-900"}
                                                             title={title}>{mapFormView}</ExpandablePanel>}
 
             {(tableMode || partOfBlock) && mapFormView}
@@ -104,7 +106,7 @@ export function MapFieldBinding<T extends Record<string, any>>({
                              disabled={disabled}
                              property={property}/>
 
-        </>
+        </ErrorBoundary>
     );
 }
 

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { CMSType, FieldProps, ResolvedProperty } from "../../types";
 import { FieldHelperText, FormikArrayContainer } from "../components";
-import { LabelWithIcon } from "../../components";
+import { ErrorBoundary, LabelWithIcon } from "../../components";
 import { useClearRestoreValue } from "../../hooks";
 import { getIconForProperty } from "../../util";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
@@ -62,7 +62,9 @@ export function RepeatFieldBinding<T extends Array<any>>({
             partOfBlock: false,
             autoFocus: internalId === lastAddedId
         };
-        return <PropertyFieldBinding {...fieldProps}/>;
+        return <ErrorBoundary>
+            <PropertyFieldBinding {...fieldProps}/>
+        </ErrorBoundary>;
     };
 
     const arrayContainer = <FormikArrayContainer value={value}

package/src/hooks/useBuildNavigationController.tsx

@@ -256,7 +256,7 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
      */
     const baseLocation = state && state.base_location ? state.base_location : location;
 
-    const getAllParentCollectionsForPath = useCallback((path: string): EntityReference[] => {
+    const getAllParentReferencesForPath = useCallback((path: string): EntityReference[] => {
         return getParentReferencesFromPath({
             path,
             collections
@@ -264,8 +264,28 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
     }, [collections]);
 
     const getParentCollectionIds = useCallback((path: string): string[] => {
-        return getAllParentCollectionsForPath(path).map(r => r.id);
-    }, [getAllParentCollectionsForPath])
+
+        const strings = path.split("/");
+        const oddPathSegments = strings.filter((_, i) => i % 2 === 0);
+        oddPathSegments.pop();
+
+        const result: string[][] = [];
+
+        for (let i = 1; i <= oddPathSegments.length; i++) {
+            result.push(oddPathSegments.slice(0, i));
+        }
+
+        // for each odd path segment, get the collection
+        const parentCollectionIds = result.map(r => getCollectionFromPaths(r)?.id).filter(Boolean) as string[];
+
+        getCollectionFromPaths(oddPathSegments);
+
+        // const allParentCollectionsForPath = getAllParentReferencesForPath(path);
+        // console.log("allParentCollectionsForPath", allParentCollectionsForPath);
+        // const parentCollectionIds = allParentCollectionsForPath.map(r => r.id);
+        console.log("getParentCollectionIds", path, parentCollectionIds);
+        return parentCollectionIds;
+    }, [getAllParentReferencesForPath])
 
     const convertIdsToPaths = useCallback((ids: string[]): string[] => {
             let currentCollections = collections;
@@ -282,7 +302,7 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         }
         , [getCollectionFromIds]);
 
-    return useMemo(() => ({
+    return {
         collections,
         views,
         loading: !initialised || navigationLoading,
@@ -303,10 +323,10 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         topLevelNavigation,
         baseLocation,
         refreshNavigation,
-        getParentReferencesFromPath: getAllParentCollectionsForPath,
+        getParentReferencesFromPath: getAllParentReferencesForPath,
         getParentCollectionIds,
         convertIdsToPaths
-    }), [baseCollectionPath, baseLocation, basePath, buildCMSUrlPath, buildUrlCollectionPath, buildUrlEditCollectionPath, collections, getAllParentCollectionsForPath, getCollection, getCollectionFromPaths, homeUrl, initialised, isUrlCollectionPath, navigationLoading, navigationLoadingError, refreshNavigation, resolveAliasesFrom, topLevelNavigation, urlPathToDataPath, views]);
+    };
 }
 
 export function getSidePanelKey(path: string, entityId?: string) {

package/src/hooks/useProjectLog.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef } from "react";
+import { AuthController } from "../types";
+
+export const DEFAULT_SERVER_DEV = "https://api-kdoe6pj3qq-ey.a.run.app";
+export const DEFAULT_SERVER = "https://api-drplyi3b6q-ey.a.run.app";
+
+async function makeRequest(authController: AuthController) {
+    const firebaseToken = await authController.getAuthToken();
+    return fetch(DEFAULT_SERVER + "/access_log",
+        {
+            // mode: "no-cors",
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+                Authorization: `Basic ${firebaseToken}`,
+            },
+            body: JSON.stringify({})
+        })
+        .then(async (res) => {
+        });
+}
+
+export function useProjectLog(authController: AuthController) {
+    const accessedUserRef = useRef<string | null>(null);
+    useEffect(() => {
+        if (authController.user && authController.user.uid !== accessedUserRef.current && !authController.initialLoading) {
+            makeRequest(authController);
+            accessedUserRef.current = authController.user.uid;
+        }
+    }, [authController]);
+}

package/src/internal/EntityView.tsx

@@ -16,7 +16,7 @@ import {
     removeInitialAndTrailingSlashes,
     resolveDefaultSelectedView,
     resolveEntityView,
-    useDebounce
+    useDebouncedCallback
 } from "../util";
 
 import {
@@ -79,7 +79,7 @@ export function EntityView<M extends Record<string, any>, UserType extends User>
      * We use this only when autoSave is enabled.
      */
     const [valuesToBeSaved, setValuesToBeSaved] = useState<EntityValues<M> | undefined>(undefined);
-    useDebounce(valuesToBeSaved, () => {
+    useDebouncedCallback(valuesToBeSaved, () => {
         if (valuesToBeSaved)
             saveEntity({
                 entityId: usedEntity?.id,

package/src/util/index.ts

@@ -7,7 +7,7 @@ export * from "./objects";
 export * from "./paths";
 export * from "./regexp";
 export * from "./navigation_utils";
-export * from "./useDebounce";
+export * from "./useDebouncedCallback";
 export * from "./property_utils";
 export * from "./resolutions";
 export * from "./permissions";

package/src/util/{useDebounce.ts → useDebouncedCallback.ts}

@@ -1,6 +1,6 @@
 import React from "react";
 
-export function useDebounce<T>(value: T, callback: () => void, immediate: boolean, timeoutMs = 300) {
+export function useDebouncedCallback<T>(value: T, callback: () => void, immediate: boolean, timeoutMs = 300) {
 
     const pendingUpdate = React.useRef(false);
     const performUpdate = () => {

package/dist/util/useDebounce.d.ts

@@ -1 +0,0 @@
-export declare function useDebounce<T>(value: T, callback: () => void, immediate: boolean, timeoutMs?: number): void;

package/src/hooks/useVerifyLicense.tsx

@@ -1 +0,0 @@
-// export