@firecms/core 3.0.0-alpha.27 → 3.0.0-alpha.29

package/src/core/index.tsx

@@ -20,7 +20,7 @@ export * from "./useBuildModeController";
 export * from "../components/util/useOutsideAlerter";
 export * from "./useBuildLocalConfigurationPersistence";
 
-export { SnackbarProvider } from "./contexts/SnackbarContext";
+export { SnackbarProvider } from "./contexts/SnackbarProvider";
 export { ModeControllerProvider } from "./contexts/ModeController";
 
 export * from "./contexts/AuthControllerContext";

package/src/core/internal/useBuildNavigationContext.tsx

@@ -25,27 +25,27 @@ import {
 } from "../util";
 import { getParentReferencesFromPath } from "../util/parent_references_from_path";
 
-type BuildNavigationContextProps<UserType extends User> = {
+type BuildNavigationContextProps<EC extends EntityCollection, UserType extends User> = {
     basePath: string,
     baseCollectionPath: string,
     authController: AuthController<UserType>;
-    collections?: EntityCollection[] | EntityCollectionsBuilder;
+    collections?: EC[] | EntityCollectionsBuilder<EC>;
     views?: CMSView[] | CMSViewsBuilder;
     userConfigPersistence?: UserConfigurationPersistence;
     plugins?: FireCMSPlugin[];
     dataSource: DataSource;
 };
 
-export function useBuildNavigationContext<UserType extends User>({
-                                                                     basePath,
-                                                                     baseCollectionPath,
-                                                                     authController,
-                                                                     collections: baseCollections,
-                                                                     views: baseViews,
-                                                                     userConfigPersistence,
-                                                                     plugins,
-                                                                     dataSource
-                                                                 }: BuildNavigationContextProps<UserType>): NavigationContext {
+export function useBuildNavigationContext<EC extends EntityCollection, UserType extends User>({
+                                                                                                                 basePath,
+                                                                                                                 baseCollectionPath,
+                                                                                                                 authController,
+                                                                                                                 collections: baseCollections,
+                                                                                                                 views: baseViews,
+                                                                                                                 userConfigPersistence,
+                                                                                                                 plugins,
+                                                                                                                 dataSource
+                                                                                                             }: BuildNavigationContextProps<EC, UserType>): NavigationContext {
 
     const location = useLocation();
 
@@ -288,7 +288,7 @@ function filterOutNotAllowedCollections(resolvedCollections: EntityCollection[],
         });
 }
 
-async function resolveCollections(collections: undefined | EntityCollection[] | EntityCollectionsBuilder, authController: AuthController, dataSource: DataSource, plugins?: FireCMSPlugin[]) {
+async function resolveCollections(collections: undefined | EntityCollection[] | EntityCollectionsBuilder<any>, authController: AuthController, dataSource: DataSource, plugins?: FireCMSPlugin[]) {
     let resolvedCollections: EntityCollection[] = [];
     if (typeof collections === "function") {
         resolvedCollections = await collections({

package/src/core/internal/useBuildSideEntityController.tsx

@@ -38,7 +38,15 @@ export const useBuildSideEntityController = (navigation: NavigationContext,
                 const newFlag = location.hash === `#${NEW_URL_HASH}`;
                 const entityOrCollectionPath = navigation.urlPathToDataPath(location.pathname);
                 const panelsFromUrl = buildSidePanelsFromUrl(entityOrCollectionPath, navigation.collections, newFlag);
-                sideDialogsController.replace(panelsFromUrl.map((props) => propsToSidePanel(props, navigation, smallLayout)));
+                for (let i = 0; i < panelsFromUrl.length; i++) {
+                    const panel = panelsFromUrl[i];
+                    setTimeout(() => {
+                        if (i === 0)
+                            sideDialogsController.replace(propsToSidePanel(panel, navigation, smallLayout));
+                        else
+                            sideDialogsController.open(propsToSidePanel(panel, navigation, smallLayout))
+                    }, 1);
+                }
             }
             initialised.current = true;
         }

package/src/core/util/property_utils.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 
-import { EntityCollection, FieldConfig, PropertiesOrBuilders, PropertyOrBuilder, ResolvedProperty } from "../../types";
+import { EntityCollection, PropertyConfig, PropertiesOrBuilders, PropertyOrBuilder, ResolvedProperty } from "../../types";
 import { getFieldConfig } from "../form_field_configs";
 import { isPropertyBuilder } from "./entities";
 import { resolveProperty } from "./resolutions";
 import { CircleIcon, FunctionsIcon } from "../../icons";
 
 export function isReferenceProperty(propertyOrBuilder: PropertyOrBuilder,
-                                    fields: Record<string, FieldConfig>) {
+                                    fields: Record<string, PropertyConfig>) {
     const resolvedProperty = resolveProperty({
         propertyKey: "ignore", // TODO
         propertyOrBuilder,
@@ -28,7 +28,7 @@ export function getIdIcon(size: "small" | "medium" | "large"): React.ReactNode {
     return <CircleIcon size={size}/>;
 }
 
-export function getIconForWidget(widget: FieldConfig | undefined,
+export function getIconForWidget(widget: PropertyConfig | undefined,
                                  size: "small" | "medium" | "large") {
     const Icon = widget?.Icon ?? CircleIcon;
     return <Icon size={size}/>;
@@ -37,7 +37,7 @@ export function getIconForWidget(widget: FieldConfig | undefined,
 export function getIconForProperty(
     property: PropertyOrBuilder | ResolvedProperty,
     size: "small" | "medium" | "large" = "small",
-    fields: Record<string, FieldConfig> = {}
+    fields: Record<string, PropertyConfig> = {}
 ): React.ReactNode {
 
     if (isPropertyBuilder(property)) {
@@ -48,7 +48,7 @@ export function getIconForProperty(
     }
 }
 
-export function getColorForProperty(property: PropertyOrBuilder, fields: Record<string, FieldConfig>): string {
+export function getColorForProperty(property: PropertyOrBuilder, fields: Record<string, PropertyConfig>): string {
     if (isPropertyBuilder(property)) {
         return "#888";
     } else {

package/src/core/util/references.ts

@@ -1,9 +1,9 @@
-import { EntityCollection, FieldConfig } from "../../types";
+import { EntityCollection, PropertyConfig } from "../../types";
 import { isReferenceProperty } from "./property_utils";
 import { isPropertyBuilder } from "./entities";
 
 export function getReferencePreviewKeys(targetCollection: EntityCollection<any>,
-                                        fields: Record<string, FieldConfig>,
+                                        fields: Record<string, PropertyConfig>,
                                         previewProperties?: string[],
                                         limit = 3) {
     const allProperties = Object.keys(targetCollection.properties);

package/src/core/util/resolutions.ts

@@ -1,11 +1,12 @@
 import {
     ArrayProperty,
     CMSType,
-    EntityCollection, EntityCustomView,
+    EntityCollection,
+    EntityCustomView,
     EntityValues,
     EnumValueConfig,
     EnumValues,
-    FieldConfig,
+    PropertyConfig,
     NumberProperty,
     Properties,
     PropertiesOrBuilders,
@@ -43,7 +44,7 @@ export const resolveCollection = <M extends Record<string, any>, >
     values?: Partial<EntityValues<M>>,
     previousValues?: Partial<EntityValues<M>>,
     userConfigPersistence?: UserConfigurationPersistence;
-    fields?: Record<string, FieldConfig>;
+    fields?: Record<string, PropertyConfig>;
 }): ResolvedEntityCollection<M> => {
 
     const collectionOverride = userConfigPersistence?.getCollectionConfig<M>(path);
@@ -107,7 +108,7 @@ export function resolveProperty<T extends CMSType = CMSType, M extends Record<st
     entityId?: string,
     index?: number,
     fromBuilder?: boolean;
-    fields?: Record<string, FieldConfig<any>>;
+    fields?: Record<string, PropertyConfig<any>>;
 }): ResolvedProperty<T> | null {
 
     if (typeof propertyOrBuilder === "object" && "resolved" in propertyOrBuilder) {
@@ -176,17 +177,21 @@ export function resolveProperty<T extends CMSType = CMSType, M extends Record<st
         } as ResolvedProperty<T>;
     }
 
-    if (resolvedProperty.fieldConfig && !isDefaultFieldConfigId(resolvedProperty.fieldConfig)) {
+    if (resolvedProperty.propertyConfig && !isDefaultFieldConfigId(resolvedProperty.propertyConfig)) {
         const cmsFields = props.fields;
         if (!cmsFields) {
-            throw Error(`Trying to resolve a property with key ${resolvedProperty.fieldConfig} that inherits from a custom field but no custom fields were provided. Use the property 'fields' in your top level component to provide them`);
+            throw Error(`Trying to resolve a property with key ${resolvedProperty.propertyConfig} that inherits from a custom field but no custom fields were provided. Use the property 'fields' in your top level component to provide them`);
         }
-        const customField: FieldConfig<any> = cmsFields[resolvedProperty.fieldConfig];
+        const customField: PropertyConfig<any> = cmsFields[resolvedProperty.propertyConfig];
         if (!customField)
-            throw Error(`Trying to resolve a property that inherits from a custom field but no custom field with id ${resolvedProperty.fieldConfig} was found. Check the \`fields\` in your top level component`);
+            throw Error(`Trying to resolve a property that inherits from a custom field but no custom field with id ${resolvedProperty.propertyConfig} was found. Check the \`fields\` in your top level component`);
         if (customField.property) {
+            const configPropertyOrBuilder = customField.property;
+            if ("propertyConfig" in configPropertyOrBuilder) {
+                delete configPropertyOrBuilder.propertyConfig;
+            }
             const customFieldProperty = resolveProperty<any>({
-                propertyOrBuilder: customField.property,
+                propertyOrBuilder: configPropertyOrBuilder,
                 propertyValue,
                 ...props
             });
@@ -220,7 +225,7 @@ export function resolveArrayProperty<T extends any[], M>({
     entityId?: string,
     index?: number,
     fromBuilder?: boolean;
-    fields?: Record<string, FieldConfig>;
+    fields?: Record<string, PropertyConfig>;
 }): ResolvedArrayProperty {
 
     if (property.of) {
@@ -326,7 +331,7 @@ export function resolveProperties<M extends Record<string, any>>({
     entityId?: string,
     index?: number,
     fromBuilder?: boolean;
-    fields?: Record<string, FieldConfig>;
+    fields?: Record<string, PropertyConfig>;
 }): ResolvedProperties<M> {
     return Object.entries<PropertyOrBuilder>(properties as Record<string, PropertyOrBuilder>)
         .map(([key, property]) => {

package/src/form/EntityForm.tsx

@@ -3,6 +3,7 @@ import React, { MutableRefObject, useCallback, useEffect, useMemo, useRef, useSt
 import {
     CMSAnalyticsEvent,
     Entity,
+    EntityAction,
     EntityCollection,
     EntityStatus,
     EntityValues,
@@ -15,13 +16,26 @@ import { Form, Formik, FormikHelpers, FormikProps } from "formik";
 import { PropertyFieldBinding } from "./PropertyFieldBinding";
 import { CustomFieldValidator, getYupEntitySchema } from "./validation";
 import equal from "react-fast-compare"
-import { ErrorBoundary, getDefaultValuesFor, isHidden, isReadOnly, resolveCollection } from "../core";
-import { useDataSource, useFireCMSContext } from "../hooks";
+import {
+    canCreateEntity,
+    canDeleteEntity,
+    ErrorBoundary,
+    fullPathToCollectionSegments,
+    getDefaultValuesFor,
+    isHidden,
+    isReadOnly,
+    resolveCollection
+} from "../core";
+import { useAuthController, useDataSource, useFireCMSContext, useSideEntityController } from "../hooks";
 import { ErrorFocus } from "./components/ErrorFocus";
 import { CustomIdField } from "./components/CustomIdField";
-import { DialogActions, Typography } from "../components";
+import { DialogActions, IconButton, Typography } from "../components";
 import { Button } from "../components/Button";
 import { cn } from "../components/util/cn";
+import {
+    copyEntityAction,
+    deleteEntityAction
+} from "../core/components/EntityCollectionTable/internal/default_entity_actions";
 
 /**
  * @category Components
@@ -315,7 +329,7 @@ function EntityFormInternal<M extends Record<string, any>>({
                                                                         name,
                                                                         value,
                                                                         property
-                                                                    }) => dataSource.checkUniqueField(path, name, value, property, entityId),
+                                                                    }) => dataSource.checkUniqueField(path, name, value, entityId),
         [dataSource, path, entityId]);
 
     const validationSchema = useMemo(() => entityId
@@ -326,6 +340,21 @@ function EntityFormInternal<M extends Record<string, any>>({
             : undefined,
         [entityId, collection.properties, uniqueFieldValidator]);
 
+    const authController = useAuthController();
+
+    const getActionsForEntity = useCallback(({ entity, customEntityActions }: { entity?: Entity<M>, customEntityActions?: EntityAction[] }): EntityAction[] => {
+        const createEnabled = canCreateEntity(collection, authController, fullPathToCollectionSegments(path), null);
+        const deleteEnabled = entity ? canDeleteEntity(collection, authController, fullPathToCollectionSegments(path), entity) : true;
+        const actions: EntityAction[] = [];
+        if (createEnabled)
+            actions.push(copyEntityAction);
+        if (deleteEnabled)
+            actions.push(deleteEntityAction);
+        if (customEntityActions)
+            actions.push(...customEntityActions);
+        return actions;
+    }, [authController, collection, path]);
+
     return (
         <Formik
             initialValues={baseDataSourceValues as M}
@@ -417,7 +446,8 @@ function EntityFormInternal<M extends Record<string, any>>({
                             status={status}
                             savingError={savingError}
                             closeAfterSaveRef={closeAfterSaveRef}
-                            autoSave={autoSave}/>}
+                            autoSave={autoSave}
+                            entityActions={getActionsForEntity({ entity, customEntityActions: collection.entityActions })}/>}
 
                     </div>
                 </div>
@@ -436,7 +466,8 @@ function InnerForm<M extends Record<string, any>>(props: FormikProps<M> & {
     status: "new" | "existing" | "copy",
     savingError?: Error,
     closeAfterSaveRef: MutableRefObject<boolean>,
-    autoSave?: boolean
+    autoSave?: boolean,
+    entityActions: EntityAction[]
 }) {
 
     const {
@@ -455,9 +486,14 @@ function InnerForm<M extends Record<string, any>>(props: FormikProps<M> & {
         savingError,
         dirty,
         closeAfterSaveRef,
-        autoSave
+        autoSave,
+        entityActions
     } = props;
 
+    const context = useFireCMSContext();
+    const formActions = entityActions.filter(a => a.includeInForm === undefined || a.includeInForm);
+    const sideEntityController = useSideEntityController();
+
     const modified = dirty;
     useEffect(() => {
         if (onModified)
@@ -553,6 +589,27 @@ function InnerForm<M extends Record<string, any>>(props: FormikProps<M> & {
                         </Typography>
                     </div>}
 
+                {entity && formActions.length > 0 && <div className="flex-grow flex overflow-auto no-scrollbar">
+                    {formActions.map(action => (
+                        <IconButton
+                            key={action.name}
+                            color="primary"
+                            onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+                                event.stopPropagation();
+                                if (entity)
+                                    action.onClick({
+                                        entity,
+                                        fullPath: resolvedCollection.path,
+                                        collection: resolvedCollection,
+                                        context,
+                                        sideEntityController
+                                    });
+                            }}>
+                            {action.icon}
+                        </IconButton>
+                    ))}
+                </div>}
+
                 <Button
                     variant="text"
                     disabled={disabled}

package/src/form/PropertyFieldBinding.tsx

@@ -121,13 +121,13 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, CustomProps =
                         Component = resolvedProperty.Field as ComponentType<FieldProps<any>>;
                     }
                 } else {
-                    const fieldConfig = getFieldConfig(resolvedProperty, fireCMSContext.fields);
-                    if (!fieldConfig) {
-                        console.log("INTERNAL: Could not find field config for property", { propertyKey, resolvedProperty, fields: fireCMSContext.fields, fieldConfig });
+                    const propertyConfig = getFieldConfig(resolvedProperty, fireCMSContext.fields);
+                    if (!propertyConfig) {
+                        console.log("INTERNAL: Could not find field config for property", { propertyKey, resolvedProperty, fields: fireCMSContext.fields, propertyConfig });
                         throw new Error(`INTERNAL: Could not find field config for property ${propertyKey}`);
                     }
                     const configProperty = resolveProperty({
-                        propertyOrBuilder: fieldConfig.property,
+                        propertyOrBuilder: propertyConfig.property,
                         propertyValue: fieldProps.field.value,
                         values: fieldProps.form.values,
                         path: context.path,

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -164,7 +164,7 @@ function MapEditView<T extends Record<string, any>>({
                         }
 
                         const newValue = { ...(value ?? {}) } as T;
-                        if (originalValue.current && fieldKey in originalValue.current) {
+                        if (typeof originalValue.current === "object" && fieldKey in originalValue.current) {
                             // @ts-ignore
                             newValue[fieldKey] = undefined; // set to undefined to remove from the object, the datasource will remove it from the backend
                         } else {

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -3,12 +3,10 @@ import React from "react";
 import { Entity, FieldProps } from "../../types";
 
 import { PropertyPreview } from "../../preview";
-import { LabelWithIcon } from "../components";
-import { ErrorBoundary } from "../../core/components/ErrorBoundary";
-import { getIconForProperty } from "../../core";
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { ErrorBoundary, getIconForProperty } from "../../core";
 import { paperMixin } from "../../styles";
-import { FieldHelperText } from "../components/FieldHelperText";
-import { cn } from "../../components/util/cn";
+import { cn } from "../../components";
 
 /**
  *
@@ -49,7 +47,7 @@ export function ReadOnlyFieldBinding({
             }
 
             <div
-                className={cn(paperMixin, "min-h-14 p-4 md:p-6")}>
+                className={cn(paperMixin, "min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
 
                 <ErrorBoundary>
                     <PropertyPreview propertyKey={propertyKey}

package/src/hooks/index.tsx

@@ -22,3 +22,4 @@ export * from "./useLargeLayout";
 
 export * from "./useReferenceDialog";
 export * from "./useBrowserTitleAndIcon";
+export * from "./useBuildDataSource";