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

package/src/core/DrawerNavigationItem.tsx

@@ -7,6 +7,7 @@ export function DrawerNavigationItem({
                                          name,
                                          icon,
                                          drawerOpen,
+                                         adminMenuOpen,
                                          tooltipsOpen,
                                          url,
                                          onClick
@@ -15,6 +16,7 @@ export function DrawerNavigationItem({
     name: string,
     tooltipsOpen: boolean,
     drawerOpen: boolean,
+    adminMenuOpen?: boolean,
     url: string,
     onClick?: () => void,
 }) {
@@ -24,37 +26,39 @@ export function DrawerNavigationItem({
         {icon}
     </div>;
 
-    const listItem = <NavLink
-        onClick={onClick}
-        style={{
-            width: !drawerOpen ? "72px" : "280px",
-            transition: drawerOpen ? "width 150ms ease-in" : undefined
-        }}
-        className={({ isActive }: any) => cls("rounded-r-lg 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-white",
-            "flex flex-row items-center mr-8",
-            // "transition-all ease-in-out delay-100 duration-300",
-            // drawerOpen ? "w-full" : "w-18",
-            drawerOpen ? "pl-8 h-12" : "pl-6 h-11",
-            "font-medium text-sm",
-            isActive ? "bg-slate-200 bg-opacity-60 dark:bg-gray-800 dark:bg-opacity-30" : ""
-        )}
-        to={url}
-    >
+    const listItem = <div>
+        <NavLink
+            onClick={onClick}
+            style={{
+                width: "100%",
+                transition: drawerOpen ? "width 150ms ease-in" : undefined
+            }}
+            className={({ isActive }: any) => cls("rounded-lg truncate",
+                "hover:bg-slate-300 hover:bg-opacity-75 dark:hover:bg-slate-800 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",
+                drawerOpen ? "pl-4 h-12" : "pl-4 h-11",
+                "font-medium text-sm",
+                isActive ? "bg-slate-200 bg-opacity-60 dark:bg-gray-800 dark:bg-opacity-50" : ""
+            )}
+            to={url}
+        >
 
-        {iconWrap}
+            {iconWrap}
 
-        <div
-            className={cls(
-                drawerOpen ? "opacity-100" : "opacity-0 hidden",
-                "ml-4 font-inherit text-inherit"
-            )}>
-            {name.toUpperCase()}
-        </div>
-    </NavLink>;
+            <div
+                className={cls(
+                    drawerOpen ? "opacity-100" : "opacity-0 hidden",
+                    "ml-4 font-inherit text-inherit"
+                )}>
+                {name.toUpperCase()}
+            </div>
+        </NavLink>
+    </div>;
 
     return <Tooltip
-        open={drawerOpen ? false : tooltipsOpen}
+        open={drawerOpen || adminMenuOpen ? false : tooltipsOpen}
         side="right"
         title={name}>
         {listItem}

package/src/core/EntityEditView.tsx

@@ -23,6 +23,7 @@ import {
     EntityCollectionView,
     EntityView,
     ErrorBoundary,
+    getFormFieldKeys,
 } from "../components";
 import {
     canCreateEntity,
@@ -59,9 +60,10 @@ import {
     defaultBorderMixin,
     DialogActions,
     IconButton,
+    NotesIcon,
+    paperMixin,
     Tab,
     Tabs,
-    Tooltip,
     Typography
 } from "@firecms/ui";
 import { useSideDialogContext } from "./index";
@@ -70,8 +72,7 @@ import { useAnalyticsController } from "../hooks/useAnalyticsController";
 import { CustomIdField } from "../form/components/CustomIdField";
 import { CustomFieldValidator, getYupEntitySchema } from "../form/validation";
 import { ErrorFocus } from "../form/components/ErrorFocus";
-import { PropertyIdCopyTooltipContent } from "../components/PropertyIdCopyTooltipContent";
-import { PropertyFieldBinding } from "../form";
+import { LabelWithIconAndTooltip, PropertyFieldBinding } from "../form";
 import { ValidationError } from "yup";
 
 const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
@@ -92,10 +93,10 @@ export interface EntityEditViewProps<M extends Record<string, any>> {
  * This is the default view that is used as the content of a side panel when
  * an entity is opened.
  * 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}
+ * side panel.
  */
 export function EntityEditView<M extends Record<string, any>, UserType extends User>({
-                                                                                         entityId: entityIdProp,
+                                                                                         entityId,
                                                                                          ...props
                                                                                      }: EntityEditViewProps<M>) {
     const {
@@ -105,7 +106,7 @@ export function EntityEditView<M extends Record<string, any>, UserType extends U
         dataLoadingError
     } = useEntityFetch<M, UserType>({
         path: props.path,
-        entityId: entityIdProp,
+        entityId: entityId,
         collection: props.collection,
         useCache: false
     });
@@ -114,8 +115,12 @@ export function EntityEditView<M extends Record<string, any>, UserType extends U
         return <CircularProgressCenter/>
     }
 
+    if (entityId && !entity) {
+        console.error(`Entity with id ${entityId} not found in collection ${props.collection.path}`);
+    }
+
     return <EntityEditViewInner<M> {...props}
-                                   entityId={entityIdProp}
+                                   entityId={entityId}
                                    entity={entity}
                                    dataLoading={dataLoading}/>;
 }
@@ -131,7 +136,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                                                                        onUpdate,
                                                                        onClose,
                                                                        entity,
-                                                                       dataLoading,
+                                                                       dataLoading
                                                                    }: EntityEditViewProps<M> & {
     entity?: Entity<M>,
     dataLoading: boolean
@@ -185,14 +190,16 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     const initialStatus = copy ? "copy" : (entityIdProp ? "existing" : "new");
     const [status, setStatus] = useState<EntityStatus>(initialStatus);
+
     const mustSetCustomId: boolean = (status === "new" || status === "copy") &&
         (Boolean(initialResolvedCollection.customId) && initialResolvedCollection.customId !== "optional");
+
     const initialEntityId: string | undefined = useMemo((): string | undefined => {
         if (status === "new" || status === "copy") {
             if (mustSetCustomId) {
                 return undefined;
             } else {
-                return dataSource.generateEntityId(path);
+                return dataSource.generateEntityId(path, collection);
             }
         } else {
             return entityIdProp;
@@ -224,16 +231,9 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         }
     );
 
-    const selectedTabRef = useRef<string>(defaultSelectedView ?? MAIN_TAB_VALUE);
-    const baseDataSourceValuesRef = useRef<Partial<EntityValues<M>>>(getDataSourceEntityValues(initialResolvedCollection, status, entity));
-
-    const mainViewVisible = selectedTabRef.current === MAIN_TAB_VALUE;
+    const [selectedTab, setSelectedTab] = useState<string>(defaultSelectedView ?? MAIN_TAB_VALUE);
 
-    // const initialValuesRef = useRef<EntityValues<M>>(entity?.values ?? baseDataSourceValues as EntityValues<M>);
-    // const [internalValues, setInternalValues] = useState<EntityValues<M> | undefined>(entity?.values ?? baseDataSourceValuesRef.current as EntityValues<M>);
-
-    // const modifiedValuesRef = useRef<EntityValues<M> | undefined>(undefined);
-    // const modifiedValues = modifiedValuesRef.current;
+    const mainViewVisible = selectedTab === MAIN_TAB_VALUE;
 
     const subcollections = (collection.subcollections ?? []).filter(c => !c.hideFromNavigation);
     const subcollectionsCount = subcollections?.length ?? 0;
@@ -246,6 +246,8 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     const [usedEntity, setUsedEntity] = useState<Entity<M> | undefined>(entity);
     const [readOnly, setReadOnly] = useState<boolean | undefined>(undefined);
 
+    const baseDataSourceValuesRef = useRef<Partial<EntityValues<M>>>(getDataSourceEntityValues(initialResolvedCollection, status, usedEntity));
+
     useEffect(() => {
         if (entity)
             setUsedEntity(entity);
@@ -297,7 +299,6 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             onUpdate({ entity: updatedEntity });
 
         if (closeAfterSave) {
-            console.log("Closing side dialog")
             sideDialogContext.setBlocked(false);
             sideDialogContext.close(true);
             onClose?.();
@@ -305,7 +306,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             sideEntityController.replace({
                 path,
                 entityId: updatedEntity.id,
-                selectedSubPath: selectedTabRef.current,
+                selectedSubPath: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab,
                 updateUrl: true,
                 collection,
             });
@@ -478,7 +479,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         setFieldValue: useCallback(formex.setFieldValue, []),
         values: formex.values,
         collection: resolvedCollection,
-        entityId,
+        entityId: entityId as string,
         path,
         save,
         formex
@@ -489,15 +490,15 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             .filter(Boolean) as EntityCustomView[]
         : [];
 
-    const selectedEntityView = resolvedEntityViews.find(e => e.key === selectedTabRef.current);
-    const shouldShowEntityActions = !autoSave && (selectedTabRef.current === MAIN_TAB_VALUE || selectedEntityView?.includeActions);
+    const selectedEntityView = resolvedEntityViews.find(e => e.key === selectedTab);
+    const shouldShowEntityActions = !autoSave && (selectedTab === MAIN_TAB_VALUE || selectedEntityView?.includeActions);
 
     const customViewsView: React.ReactNode[] | undefined = customViews && resolvedEntityViews
         .map(
             (customView, colIndex) => {
                 if (!customView)
                     return null;
-                if (selectedTabRef.current !== customView.key)
+                if (selectedTab !== customView.key)
                     return null;
                 const Builder = customView.Builder;
                 if (!Builder) {
@@ -530,7 +531,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         (subcollection, colIndex) => {
             const subcollectionId = subcollection.id ?? subcollection.path;
             const fullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : undefined;
-            if (selectedTabRef.current !== subcollectionId)
+            if (selectedTab !== subcollectionId)
                 return null;
             return (
                 <div
@@ -566,21 +567,18 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     }, []);
 
     const onSideTabClick = (value: string) => {
-        selectedTabRef.current = value;
-        sideEntityController.replace({
-            path,
-            entityId,
-            selectedSubPath: value === MAIN_TAB_VALUE ? undefined : value,
-            updateUrl: true,
-            collection,
-        });
+        setSelectedTab(value);
+        if (status === "existing") {
+            sideEntityController.replace({
+                path,
+                entityId,
+                selectedSubPath: value === MAIN_TAB_VALUE ? undefined : value,
+                updateUrl: true,
+                collection,
+            });
+        }
     };
 
-    // const onValuesChanged = useCallback((values?: EntityValues<M>) => {
-    //     modifiedValuesRef.current = values;
-    // }, []);
-
-    // eslint-disable-next-line n/handle-callback-err
     const onIdUpdateError = useCallback((error: any) => {
         snackbarController.open({
             type: "error",
@@ -678,7 +676,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                                                                         name,
                                                                         value,
                                                                         property
-                                                                    }) => dataSource.checkUniqueField(path, name, value, entityId),
+                                                                    }) => dataSource.checkUniqueField(path, name, value, entityId, collection),
         [dataSource, path, entityId]);
 
     const validationSchema = useMemo(() => entityId
@@ -735,50 +733,76 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     const formFields = (
         <>
-            {(resolvedCollection.propertiesOrder ?? Object.keys(resolvedCollection.properties))
+            {(getFormFieldKeys(resolvedCollection))
                 .map((key) => {
 
                     const property = resolvedCollection.properties[key];
-                    if (!property) {
-                        console.warn(`Property ${key} not found in collection ${resolvedCollection.name}`);
-                        return null;
+                    if (property) {
+
+                        const underlyingValueHasChanged: boolean =
+                            !!underlyingChanges &&
+                            Object.keys(underlyingChanges).includes(key) &&
+                            formex.touched[key];
+
+                        const disabled = (!autoSave && formex.isSubmitting) || isReadOnly(property) || Boolean(property.disabled);
+                        const hidden = isHidden(property);
+                        if (hidden) return null;
+                        const cmsFormFieldProps: PropertyFieldBindingProps<any, M> = {
+                            propertyKey: key,
+                            disabled,
+                            property,
+                            includeDescription: property.description || property.longDescription,
+                            underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
+                            context: formContext,
+                            partOfArray: false,
+                            minimalistView: false,
+                            autoFocus: false
+                        };
+
+                        return (
+                            <div id={`form_field_${key}`}
+                                 key={`field_${resolvedCollection.name}_${key}`}>
+                                <ErrorBoundary>
+                                    <PropertyFieldBinding {...cmsFormFieldProps}/>
+                                </ErrorBoundary>
+                            </div>
+                        );
                     }
 
-                    const underlyingValueHasChanged: boolean =
-                        !!underlyingChanges &&
-                        Object.keys(underlyingChanges).includes(key) &&
-                        !!formex.touched[key];
-
-                    const disabled = (!autoSave && formex.isSubmitting) || isReadOnly(property) || Boolean(property.disabled);
-                    const hidden = isHidden(property);
-                    if (hidden) return null;
-                    const cmsFormFieldProps: PropertyFieldBindingProps<any, M> = {
-                        propertyKey: key,
-                        disabled,
-                        property,
-                        includeDescription: property.description || property.longDescription,
-                        underlyingValueHasChanged: underlyingValueHasChanged && !autoSave,
-                        context: formContext,
-                        tableMode: false,
-                        partOfArray: false,
-                        partOfBlock: false,
-                        autoFocus: false
-                    };
-
-                    return (
-                        <div id={`form_field_${key}`}
-                             key={`field_${resolvedCollection.name}_${key}`}>
-                            <ErrorBoundary>
-                                <Tooltip title={<PropertyIdCopyTooltipContent propertyId={key}/>}
-                                         delayDuration={800}
-                                         side={"left"}
-                                         align={"start"}
-                                         sideOffset={16}>
-                                    <PropertyFieldBinding {...cmsFormFieldProps}/>
-                                </Tooltip>
-                            </ErrorBoundary>
-                        </div>
-                    );
+                    const additionalField = resolvedCollection.additionalFields?.find(f => f.key === key);
+                    if (additionalField && entity) {
+                        const Builder = additionalField.Builder;
+                        if (!Builder && !additionalField.value) {
+                            throw new Error("When using additional fields you need to provide a Builder or a value");
+                        }
+
+                        const child = Builder
+                            ? <Builder entity={entity} context={context}/>
+                            : <>{additionalField.value?.({
+                                entity,
+                                context
+                            })}</>;
+                        return (
+                            <div>
+                                <LabelWithIconAndTooltip
+                                    propertyKey={key}
+                                    icon={<NotesIcon size={"small"}/>}
+                                    title={additionalField.name}
+                                    className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+                                <div
+                                    className={cls(paperMixin, "min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
+
+                                    <ErrorBoundary>
+                                        {child}
+                                    </ErrorBoundary>
+
+                                </div>
+                            </div>
+                        );
+                    }
+
+                    console.warn(`Property ${key} not found in collection ${resolvedCollection.name} in properties or additional fields. Skipping.`);
+                    return null;
                 })
                 .filter(Boolean)}
 
@@ -861,51 +885,54 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
     function buildForm() {
 
-        let form = <div className="h-full overflow-auto">
+        let form = <>
 
             {pluginActions.length > 0 && <div
                 className={cls("w-full flex justify-end items-center sticky top-0 right-0 left-0 z-10 bg-opacity-60 bg-slate-200 dark:bg-opacity-60 dark:bg-slate-800 backdrop-blur-md")}>
                 {pluginActions}
             </div>}
 
-            <div className="pt-12 pb-16 pl-8 pr-8 md:pl-10 md:pr-10">
-                <div
-                    className={`w-full py-2 flex flex-col items-start mt-${4 + (pluginActions ? 8 : 0)} lg:mt-${8 + (pluginActions ? 8 : 0)} mb-8`}>
+            <div className="h-full overflow-auto">
 
-                    <Typography
-                        className={"mt-4 flex-grow line-clamp-1 " + inputCollection.hideIdFromForm ? "mb-2" : "mb-0"}
-                        variant={"h4"}>{title ?? inputCollection.singularName ?? inputCollection.name}
-                    </Typography>
-                    <Alert color={"base"} className={"w-full"} size={"small"}>
-                        <code className={"text-xs select-all"}>{path}/{entityId}</code>
-                    </Alert>
-                </div>
+                <div className="pt-12 pb-16 pl-8 pr-8 md:pl-10 md:pr-10">
+                    <div
+                        className={`w-full py-2 flex flex-col items-start mt-${4 + (pluginActions ? 8 : 0)} lg:mt-${8 + (pluginActions ? 8 : 0)} mb-8`}>
+
+                        <Typography
+                            className={"mt-4 flex-grow line-clamp-1 " + inputCollection.hideIdFromForm ? "mb-2" : "mb-0"}
+                            variant={"h4"}>{title ?? inputCollection.singularName ?? inputCollection.name}
+                        </Typography>
+                        <Alert color={"base"} className={"w-full"} size={"small"}>
+                            <code className={"text-xs select-all"}>{path}/{entityId}</code>
+                        </Alert>
+                    </div>
 
-                {!collection.hideIdFromForm &&
-                    <CustomIdField customId={inputCollection.customId}
-                                   entityId={entityId}
-                                   status={status}
-                                   onChange={setEntityId}
-                                   error={entityIdError}
-                                   loading={customIdLoading}
-                                   entity={entity}/>}
+                    {!collection.hideIdFromForm &&
+                        <CustomIdField customId={inputCollection.customId}
+                                       entityId={entityId}
+                                       status={status}
+                                       onChange={setEntityId}
+                                       error={entityIdError}
+                                       loading={customIdLoading}
+                                       entity={entity}/>}
 
-                {entityId && formContext && <>
-                    <div className="mt-12 flex flex-col gap-8"
-                         ref={formRef}>
+                    {entityId && formContext && <>
+                        <div className="mt-12 flex flex-col gap-8"
+                             ref={formRef}>
 
-                        {formFields}
+                            {formFields}
 
-                        <ErrorFocus containerRef={formRef}/>
+                            <ErrorFocus containerRef={formRef}/>
 
-                    </div>
+                        </div>
 
-                    <div className="h-14"/>
+                        <div className="h-14"/>
 
-                </>}
+                    </>}
 
+                </div>
             </div>
-        </div>;
+        </>;
 
         if (plugins) {
             plugins.forEach((plugin: FireCMSPlugin) => {
@@ -1001,7 +1028,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                     </div>}
 
                     <Tabs
-                        value={selectedTabRef.current}
+                        value={selectedTab}
                         onValueChange={(value) => {
                             onSideTabClick(value);
                         }}
@@ -1035,7 +1062,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                         role="tabpanel"
                         hidden={!mainViewVisible}
                         id={`form_${path}`}
-                        className={" w-full"}>
+                        className={"relative w-full"}>
 
                         {globalLoading
                             ? <CircularProgressCenter/>

package/src/core/FireCMS.tsx

@@ -28,7 +28,7 @@ import { useProjectLog } from "../hooks/useProjectLog";
  *
  * You only need to use this component if you are building a custom app.
  *
- * @constructor
+
  * @group Core
  */
 export function FireCMS<UserType extends User, EC extends EntityCollection>(props: FireCMSProps<UserType, EC>) {
@@ -82,7 +82,7 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         onAnalyticsEvent
     }), []);
 
-    const accessResponse = useProjectLog(authController, plugins);
+    const accessResponse = useProjectLog(authController, dataSourceDelegate, plugins);
 
     if (navigationController.navigationLoadingError) {
         return (

package/src/core/NavigationRoutes.tsx

@@ -25,7 +25,7 @@ export type NavigationRoutesProps = {
  * or the home route) related to a {@link NavigationController}.
  * This component needs a parent {@link FireCMS}
  *
- * @constructor
+
  * @group Components
  */
 export const NavigationRoutes = React.memo<NavigationRoutesProps>(

package/src/core/SideDialogs.tsx

@@ -126,6 +126,7 @@ function SideDialogView({
             <Sheet
                 open={Boolean(panel)}
                 onOpenChange={(open) => !open && onCloseRequest()}
+                title={"Side dialog " + panel?.key}
             >
                 {panel &&
                     <div

package/src/core/field_configs.tsx

@@ -8,8 +8,8 @@ import {
     DateTimeFieldBinding,
     KeyValueFieldBinding,
     MapFieldBinding,
-    MarkdownFieldBinding,
-    MultiSelectBinding,
+    MarkdownEditorFieldBinding,
+    MultiSelectFieldBinding,
     ReferenceFieldBinding,
     RepeatFieldBinding,
     SelectFieldBinding,
@@ -77,7 +77,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
         property: {
             dataType: "string",
             markdown: true,
-            Field: MarkdownFieldBinding
+            Field: MarkdownEditorFieldBinding
         }
     },
     url: {
@@ -139,7 +139,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
                 dataType: "string",
                 enumValues: [],
             },
-            Field: MultiSelectBinding
+            Field: MultiSelectFieldBinding
         }
     },
     number_input: {
@@ -177,7 +177,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<string, PropertyConfig<any>> = {
                 dataType: "number",
                 enumValues: [],
             },
-            Field: MultiSelectBinding
+            Field: MultiSelectFieldBinding
         }
     },
     file_upload: {