@firecms/core 3.0.0-alpha.20 → 3.0.0-alpha.24

package/src/core/components/EntityCollectionTable/fields/TableReferenceField.tsx

@@ -1,14 +1,14 @@
 import React, { useCallback, useState } from "react";
 import { ReferencePreview, ReferencePreviewContainer } from "../../../../preview";
-import { CollectionSize, Entity, EntityReference, FilterValues } from "../../../../types";
+import { CollectionSize, Entity, EntityCollection, EntityReference, FilterValues } from "../../../../types";
 
 import { getPreviewSizeFrom } from "../../../../preview/util";
 import { getReferenceFrom } from "../../../util";
-import { useNavigationContext, useReferenceDialog } from "../../../../hooks";
+import { useFireCMSContext, useNavigationContext, useReferenceDialog } from "../../../../hooks";
 import { ErrorView } from "../../ErrorView";
 import { Button } from "../../../../components/Button";
 
-export function TableReferenceField(props: {
+type TableReferenceFieldProps = {
     name: string;
     disabled: boolean;
     internalValue: EntityReference | EntityReference[] | undefined | null;
@@ -19,8 +19,27 @@ export function TableReferenceField(props: {
     title?: string;
     path: string;
     forceFilter?: FilterValues<string>;
-}) {
+};
+
+export function TableReferenceField(props: TableReferenceFieldProps) {
+
+    const context = useFireCMSContext();
+    const navigationContext = useNavigationContext();
+    const { path } = props;
+    const collection = navigationContext.getCollection<EntityCollection>(path);
+    if (!collection) {
+        if (context.components?.missingReference) {
+            return <context.components.missingReference path={path}/>;
+        } else {
+            throw Error(`Couldn't find the corresponding collection view for the path: ${path}`);
+        }
+    }
+    return <TableReferenceFieldSuccess {...props} collection={collection}/>;
+}
 
+function TableReferenceFieldSuccess(props: TableReferenceFieldProps & {
+    collection: EntityCollection;
+}) {
     const {
         name,
         internalValue,
@@ -31,7 +50,8 @@ export function TableReferenceField(props: {
         previewProperties,
         title,
         disabled,
-        forceFilter
+        forceFilter,
+        collection
     } = props;
 
     const [onHover, setOnHover] = useState(false);
@@ -39,13 +59,6 @@ export function TableReferenceField(props: {
     const hoverTrue = useCallback(() => setOnHover(true), []);
     const hoverFalse = useCallback(() => setOnHover(false), []);
 
-    const navigationContext = useNavigationContext();
-
-    const collection = navigationContext.getCollection(path);
-    if (!collection) {
-        throw Error(`Couldn't find the corresponding collection view for the path: ${path}`);
-    }
-
     const onSingleEntitySelected = useCallback((entity: Entity<any>) => {
         updateValue(entity ? getReferenceFrom(entity) : null);
     }, [updateValue]);

package/src/core/components/EntityCollectionTable/internal/PropertyTableCell.tsx

@@ -128,11 +128,14 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any, any>>(
         );
 
         const saveValues = (value: any) => {
+            if (equal(value, internalValueRef.current))
+                return;
             setSaved(false);
             validation
                 .validate(value)
                 .then(() => {
                     setError(undefined);
+                    internalValueRef.current = value;
                     if (onValueChange) {
                         onValueChange({
                             value,
@@ -167,7 +170,6 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any, any>>(
             } else {
                 updatedValue = newValue;
             }
-            internalValueRef.current = updatedValue;
             setInternalValue(updatedValue);
             saveValues(updatedValue);
         };
@@ -234,7 +236,7 @@ export const PropertyTableCell = React.memo<PropertyTableCellProps<any, any>>(
                     propertyKey={propertyKey}
                     property={property}
                     entity={entity}
-                    value={value}
+                    value={internalValue}
                     size={getPreviewSizeFrom(size)}
                 />
             </EntityTableCell>;

package/src/core/components/EntityCollectionTable/useEntityCollectionTableController.tsx

@@ -33,7 +33,7 @@ export function useEntityCollectionTableController<M extends Record<string, any>
         collection,
         entitiesDisplayedFirst,
         lastDeleteTimestamp,
-        forceFilter: forceFilterFromProps
+        forceFilter: forceFilterFromProps,
     }: EntityCollectionTableControllerProps<M>)
     : TableController<M> {
 

package/src/core/components/EntityCollectionView/EntityCollectionView.tsx

@@ -10,6 +10,7 @@ import {
     FilterValues,
     PartialEntityCollection,
     PropertyOrBuilder,
+    ResolvedProperty,
     SaveEntityProps,
     SelectionController
 } from "../../../types";
@@ -228,6 +229,17 @@ export const EntityCollectionView = React.memo(
             setLastDeleteTimestamp(Date.now());
         }, [setSelectedEntities]);
 
+        let AddColumnComponent: React.ComponentType<{
+            fullPath: string,
+            parentPathSegments: string[],
+            collection: EntityCollection;
+        }> | undefined
+
+        // we are only using the first plugin that implements this
+        if (context?.plugins) {
+            AddColumnComponent = context.plugins.find(plugin => plugin.collectionView?.AddColumnComponent)?.collectionView?.AddColumnComponent;
+        }
+
         const onCollectionModifiedForUser = useCallback((path: string, partialCollection: PartialEntityCollection<M>) => {
             if (userConfigPersistence) {
                 const currentStoredConfig = userConfigPersistence.getCollectionConfig(path);
@@ -305,7 +317,11 @@ export const EntityCollectionView = React.memo(
             fields: context.fields
         }), [collection, fullPath]);
 
-        const getPropertyFor = useCallback(({ propertyKey, propertyValue, entity }: GetPropertyForProps<M>) => {
+        const getPropertyFor = useCallback(({
+                                                propertyKey,
+                                                propertyValue,
+                                                entity
+                                            }: GetPropertyForProps<M>) => {
             let propertyOrBuilder: PropertyOrBuilder<any, M> | undefined = getPropertyInPath<M>(collection.properties, propertyKey);
 
             // we might not find the property in the collection if combining property builders and map spread
@@ -485,6 +501,42 @@ export const EntityCollectionView = React.memo(
 
         </Popover>;
 
+        function buildAdditionalHeaderWidget({
+                                                 property,
+                                                 propertyKey,
+                                                 onHover
+                                             }: {
+            property: ResolvedProperty,
+            propertyKey: string,
+            onHover: boolean
+        }) {
+            if (!context.plugins)
+                return null;
+            return <>
+                {context.plugins.filter(plugin => plugin.collectionView?.HeaderAction)
+                    .map((plugin, i) => {
+                        const HeaderAction = plugin.collectionView!.HeaderAction!;
+                        return <HeaderAction
+                            key={`plugin_header_action_${i}`}
+                            propertyKey={propertyKey}
+                            property={property}
+                            onHover={onHover}
+                            fullPath={fullPath}
+                            parentPathSegments={parentPathSegments ?? []}/>;
+                    })}
+            </>;
+        }
+
+        const addColumnComponentInternal = AddColumnComponent
+            ? function () {
+                if (typeof AddColumnComponent === "function")
+                    return <AddColumnComponent fullPath={fullPath}
+                                               parentPathSegments={parentPathSegments ?? []}
+                                               collection={collection}/>;
+                return null;
+            }
+            : undefined;
+
         return (
             <div className={cn("overflow-hidden h-full w-full", className)}
                  ref={containerRef}>
@@ -519,6 +571,8 @@ export const EntityCollectionView = React.memo(
                     />}
                     hoverRow={hoverRow}
                     inlineEditing={checkInlineEditing()}
+                    additionalHeaderWidget={buildAdditionalHeaderWidget}
+                    AddColumnComponent={addColumnComponentInternal}
                 />
 
                 <PopupFormField
@@ -632,5 +686,3 @@ function buildPropertyWidthOverwrite(key: string, width: number): PartialEntityC
     }
     return { properties: { [key]: { columnWidth: width } } } as PartialEntityCollection;
 }
-
-

package/src/core/components/VirtualTable/VirtualTable.tsx

@@ -26,7 +26,10 @@ import { AssignmentIcon } from "../../../icons";
 const VirtualListContext = createContext<VirtualTableContextProps<any>>({} as any);
 VirtualListContext.displayName = "VirtualListContext";
 
-type InnerElementProps = { children: React.ReactNode, style: any };
+type InnerElementProps = {
+    children: React.ReactNode,
+    style: any
+};
 
 // eslint-disable-next-line react/display-name
 const innerElementType = forwardRef<HTMLDivElement, InnerElementProps>(({
@@ -107,7 +110,8 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                                                              createFilterField,
                                                              rowClassName,
                                                              className,
-                                                             endAdornment
+                                                             endAdornment,
+                                                             AddColumnComponent
                                                          }: VirtualTableProps<T>) {
 
         const sortByProperty: string | undefined = sortBy ? sortBy[0] : undefined;
@@ -186,11 +190,11 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
 
         const maxScroll = Math.max((data?.length ?? 0) * getRowHeight(size) - bounds.height, 0);
         const onEndReachedInternal = useCallback((scrollOffset: number) => {
-            if (onEndReached && (data?.length ?? 0) > 0 && scrollOffset > endReachCallbackThreshold.current + 500) {
+            if (onEndReached && (data?.length ?? 0) > 0 && scrollOffset > endReachCallbackThreshold.current + 600) {
                 endReachCallbackThreshold.current = scrollOffset;
                 onEndReached();
             }
-        }, [data, onEndReached]);
+        }, [data?.length, onEndReached]);
 
         const onScroll = useCallback(({
                                           scrollOffset,
@@ -200,7 +204,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
             scrollOffset: number,
             scrollUpdateWasRequested: boolean;
         }) => {
-            if (!scrollUpdateWasRequested && (scrollOffset >= maxScroll - 500))
+            if (!scrollUpdateWasRequested && (scrollOffset >= maxScroll - 600))
                 onEndReachedInternal(scrollOffset);
         }, [maxScroll, onEndReachedInternal]);
 
@@ -278,7 +282,8 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                         hoverRow: hoverRow ?? false,
                         createFilterField,
                         rowClassName,
-                        endAdornment
+                        endAdornment,
+                        AddColumnComponent
                     }}>
 
                     <MemoizedList
@@ -288,6 +293,7 @@ export const VirtualTable = React.memo<VirtualTableProps<any>>(
                         height={bounds.height}
                         itemCount={(data?.length ?? 0) + (endAdornment ? 1 : 0)}
                         onScroll={onScroll}
+                        includeAddColumn={Boolean(AddColumnComponent)}
                         itemSize={getRowHeight(size)}/>
 
                 </VirtualListContext.Provider>
@@ -303,7 +309,8 @@ function MemoizedList({
                           height,
                           itemCount,
                           onScroll,
-                          itemSize
+                          itemSize,
+                          includeAddColumn
                       }: {
     outerRef: RefObject<HTMLDivElement>;
     width: number;
@@ -315,6 +322,7 @@ function MemoizedList({
         scrollUpdateWasRequested: boolean;
     }) => void;
     itemSize: number;
+    includeAddColumn?: boolean;
 }) {
 
     const Row = useCallback(({
@@ -360,6 +368,7 @@ function MemoizedList({
                             top: `calc(${style.top}px + 48px)`
                         }}
                         size={size}>
+
                         {columns.map((column: VirtualTableColumn, columnIndex: number) => {
                             const cellData = rowData && rowData[column.key];
                             return <VirtualTableCell
@@ -373,6 +382,9 @@ function MemoizedList({
                                 rowIndex={index}
                                 columnIndex={columnIndex}/>;
                         })}
+
+                        {includeAddColumn && <div className={"w-20"}/>}
+
                     </VirtualTableRow>
                 );
             }}

package/src/core/components/VirtualTable/VirtualTableHeader.tsx

@@ -3,12 +3,9 @@ import equal from "react-fast-compare";
 
 import { VirtualTableColumn, VirtualTableSort, VirtualTableWhereFilterOp } from "./VirtualTableProps";
 import { ErrorBoundary } from "../ErrorBoundary";
-import { Button, IconButton } from "../../../components";
+import { Badge, Button, cn, IconButton, Popover } from "../../../components";
 import { defaultBorderMixin } from "../../../styles";
-import { ArrowUpwardIcon, ExpandMoreIcon } from "../../../icons";
-import { Popover } from "../../../components/Popover";
-import { Badge } from "../../../components/Badge";
-import { cn } from "../../../components/util/cn";
+import { ArrowUpwardIcon, ExpandMoreIcon, FilterIcon, FilterListIcon } from "../../../icons";
 
 interface FilterFormProps<T> {
     column: VirtualTableColumn<T>;
@@ -40,6 +37,7 @@ type VirtualTableHeaderProps<M extends Record<string, any>> = {
     onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, any]) => void;
     onClickResizeColumn?: (columnIndex: number, column: VirtualTableColumn) => void;
     createFilterField?: (props: FilterFormFieldProps<any>) => React.ReactNode;
+    additionalHeaderWidget?: (onHover: boolean) => React.ReactNode;
 };
 
 export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
@@ -53,7 +51,8 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                                                    filter,
                                                                    column,
                                                                    onClickResizeColumn,
-                                                                   createFilterField
+                                                                   createFilterField,
+                                                                   additionalHeaderWidget
                                                                }: VirtualTableHeaderProps<M>) {
 
         const [onHover, setOnHover] = useState(false);
@@ -115,23 +114,26 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                     </div>
 
                     {column.sortable && (sort || hovered || openFilter) &&
-                        <Badge color="secondary"
-                               invisible={!sort}>
-                            <IconButton
-                                size={"small"}
-                                className={onHover || openFilter ? "bg-white dark:bg-gray-950" : undefined}
-                                onClick={() => {
-                                    onColumnSort(column.key as Extract<keyof M, string>);
-                                }}
-                            >
-                                {!sort &&
-                                    <ArrowUpwardIcon/>}
-                                {sort === "asc" &&
-                                    <ArrowUpwardIcon/>}
-                                {sort === "desc" &&
-                                    <ArrowUpwardIcon className={"rotate-180"}/>}
-                            </IconButton>
-                        </Badge>
+                        <>
+                            {additionalHeaderWidget && additionalHeaderWidget(hovered || openFilter)}
+                            <Badge color="secondary"
+                                   invisible={!sort}>
+                                <IconButton
+                                    size={"small"}
+                                    className={onHover || openFilter ? "bg-white dark:bg-gray-950" : undefined}
+                                    onClick={() => {
+                                        onColumnSort(column.key as Extract<keyof M, string>);
+                                    }}
+                                >
+                                    {!sort &&
+                                        <ArrowUpwardIcon/>}
+                                    {sort === "asc" &&
+                                        <ArrowUpwardIcon/>}
+                                    {sort === "desc" &&
+                                        <ArrowUpwardIcon className={"rotate-180"}/>}
+                                </IconButton>
+                            </Badge>
+                        </>
                     }
 
                     {column.filter && createFilterField && <div>
@@ -146,7 +148,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                         className={onHover || openFilter ? "bg-white dark:bg-gray-950" : undefined}
                                         size={"small"}
                                         onClick={handleSettingsClick}>
-                                        <ExpandMoreIcon/>
+                                        <FilterListIcon size={"small"}/>
                                     </IconButton>}
                             >
                                 {column.filter &&

package/src/core/components/VirtualTable/VirtualTableHeaderRow.tsx

@@ -16,7 +16,8 @@ export const VirtualTableHeaderRow = ({
                                           filter,
                                           onColumnResize,
                                           onColumnResizeEnd,
-                                          createFilterField
+                                          createFilterField,
+                                          AddColumnComponent
                                       }: VirtualTableContextProps<any>) => {
 
     const columnRefs = columns.map(() => createRef<HTMLDivElement>());
@@ -119,9 +120,13 @@ export const VirtualTableHeaderRow = ({
                         onColumnSort={onColumnSort}
                         onClickResizeColumn={onClickResizeColumn}
                         column={column}
-                        createFilterField={createFilterField}/>
+                        createFilterField={createFilterField}
+                        additionalHeaderWidget={column.additionalHeaderWidget}/>
                 </ErrorBoundary>;
             })}
+
+            {AddColumnComponent && <AddColumnComponent/>}
+
         </div>
     );
 };

package/src/core/components/VirtualTable/VirtualTableProps.tsx

@@ -136,6 +136,12 @@ export interface VirtualTableProps<T extends Record<string, any>> {
      */
     endAdornment?: React.ReactNode;
 
+    /**
+     * If adding this callback, a button to add a new column is displayed.
+     * @param column
+     */
+    AddColumnComponent?: React.ComponentType;
+
 }
 
 export type CellRendererParams<T extends any> = {
@@ -206,7 +212,15 @@ export interface VirtualTableColumn<CustomProps extends any = any> {
      */
     resizable?: boolean;
 
+    /**
+     * Custom props passed to the cell renderer
+     */
     custom?: CustomProps;
+
+    /**
+     * Additional children to be rendered in the header when hovering
+     */
+    additionalHeaderWidget?: (onHover:boolean) => React.ReactNode;
 }
 
 /**

package/src/core/components/VirtualTable/VirtualTableRow.tsx

@@ -15,7 +15,7 @@ export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
                                     size,
                                     style,
                                     hoverRow,
-                                    rowClassName
+                                    rowClassName,
                                 }: VirtualTableRowProps<T>) {
 
         const onClick = useCallback((event: React.SyntheticEvent) => onRowClick

package/src/core/components/VirtualTable/types.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import {
     CellRendererParams,
     OnRowClickParams,
@@ -39,4 +40,5 @@ export type VirtualTableContextProps<T extends any> = {
     createFilterField?: (props: FilterFormFieldProps<any>) => React.ReactNode;
     rowClassName?: (rowData: T) => string | undefined;
     endAdornment?: React.ReactNode;
+    AddColumnComponent?: React.ComponentType;
 };

package/src/core/util/index.ts

@@ -17,3 +17,4 @@ export * from "./plurals";
 export * from "./references";
 export * from "./debounce";
 export * from "./flatten_object";
+export * from "./make_properties_editable";

package/src/core/util/make_properties_editable.ts

@@ -0,0 +1,28 @@
+import { Properties, PropertiesOrBuilders } from "../../types";
+import { isPropertyBuilder } from "./entities";
+
+export function makePropertiesEditable(properties: Properties) {
+    Object.keys(properties).forEach((key) => {
+        const property = properties[key];
+        property.editable = true;
+        if (property.dataType === "map" && property.properties) {
+            makePropertiesEditable(property.properties as Properties);
+        }
+    });
+}
+
+export function makePropertiesNonEditable(properties: PropertiesOrBuilders): PropertiesOrBuilders {
+    return Object.entries(properties).reduce((acc, [key, property]) => {
+        if (!isPropertyBuilder(property) && property.dataType === "map" && property.properties) {
+            const updated = { ...property, properties: makePropertiesNonEditable(property.properties as PropertiesOrBuilders) };
+            acc[key] = updated;
+        }
+        if (isPropertyBuilder(property)) {
+            acc[key] = property;
+        } else {
+            acc[key] = { ...property, editable: false };
+        }
+        return acc;
+    }, {} as PropertiesOrBuilders);
+
+}

package/src/core/util/property_utils.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { FieldConfig, PropertiesOrBuilders, PropertyOrBuilder, ResolvedProperty } from "../../types";
+import { EntityCollection, FieldConfig, PropertiesOrBuilders, PropertyOrBuilder, ResolvedProperty } from "../../types";
 import { getFieldConfig } from "../form_field_configs";
 import { isPropertyBuilder } from "./entities";
 import { resolveProperty } from "./resolutions";
@@ -123,3 +123,8 @@ export function getPropertiesWithPropertiesOrder<M extends Record<string, any>>(
     });
     return result;
 }
+
+export function getDefaultPropertiesOrder(collection: EntityCollection<any>): string[] {
+    if (collection.propertiesOrder) return collection.propertiesOrder;
+    return [...Object.keys(collection.properties), ...(collection.additionalFields ?? []).map(field => field.id)];
+}

package/src/form/components/LabelWithIcon.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { Typography } from "../../components/Typography";
 
 interface LabelWithIconProps {
     icon: React.ReactNode;
@@ -27,8 +26,8 @@ export function LabelWithIcon({
 
             {icon}
 
-            <Typography component={"span"}
-                        className={`font-medium text-${small ? "base" : "sm"} origin-top-left transform ${small ? "translate-x-2 scale-75" : ""}`}>{(title ?? "") + (required ? " *" : "")}</Typography>
+            <span
+                className={`font-medium text-${small ? "base" : "sm"} origin-top-left transform ${small ? "translate-x-2 scale-75" : ""}`}>{(title ?? "") + (required ? " *" : "")}</span>
 
         </span>
     );

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -4,9 +4,8 @@ import { FieldProps, PreviewType } from "../../types";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { useClearRestoreValue } from "../../hooks";
 import { getIconForProperty } from "../../core";
-import { IconButton, TextField } from "../../components";
+import { Collapse, IconButton, TextField } from "../../components";
 import { PropertyPreview } from "../../preview";
-import { Collapse } from "../../components/Collapse";
 import { ClearIcon } from "../../icons";
 
 interface TextFieldProps<T extends string | number> extends FieldProps<T> {

package/src/preview/components/ReferencePreview.tsx

@@ -61,15 +61,35 @@ function ReferencePreviewInternal<M extends Record<string, any>>({
                                                                  }: ReferencePreviewProps) {
 
     const context = useFireCMSContext();
-
     const navigationContext = useNavigationContext();
-    const sideEntityController = useSideEntityController();
 
     const collection = navigationContext.getCollection<EntityCollection<M>>(reference.path);
     if (!collection) {
-        throw Error(`Couldn't find the corresponding collection view for the path: ${reference.path}`);
+        if (context.components?.missingReference) {
+            return <context.components.missingReference path={reference.path}/>;
+        } else {
+            throw Error(`Couldn't find the corresponding collection view for the path: ${reference.path}`);
+        }
     }
 
+    return <ReferencePreviewExisting
+        reference={reference}
+        collection={collection}
+        previewProperties={previewProperties}
+        size={size}
+        disabled={disabled}
+        allowEntityNavigation={allowEntityNavigation}
+        onClick={onClick}
+        onHover={onHover}/>
+}
+
+function ReferencePreviewExisting<M extends Record<string, any> = any>({ reference, collection, previewProperties, size, disabled, allowEntityNavigation, onClick, onHover }: ReferencePreviewProps & {
+    collection: EntityCollection<M>
+}) {
+
+    const context = useFireCMSContext();
+    const sideEntityController = useSideEntityController();
+
     const {
         entity,
         dataLoading,

package/src/types/collections.ts

@@ -477,6 +477,8 @@ export type TableController<M extends Record<string, any> = any> = {
                               sortBy?: [string, "asc" | "desc"]) => boolean;
     popupCell?: SelectedCellProps<M>;
     setPopupCell?: (popupCell?: SelectedCellProps<M>) => void;
+
+    onAddColumn?: (column: string) => void;
 }
 
 export type SelectedCellProps<M extends Record<string, any>> = {

package/src/types/firecms.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { User } from "./user";
 import { AuthController } from "./auth";
 import { DataSource } from "./datasource";
@@ -123,12 +124,6 @@ export type FireCMSProps<UserType extends User> = {
      */
     authController: AuthController<UserType>;
 
-    /**
-     * Optional link builder you can add to generate a button in your entity forms.
-     * The function must return a URL that gets opened when the button is clicked
-     */
-    entityLinkBuilder?: EntityLinkBuilder;
-
     /**
      * Path under the navigation routes of the CMS will be created. Defaults to `/`.
      * Internally FireCMS uses `react-router` to create the routes, the base path is attached to the
@@ -160,4 +155,21 @@ export type FireCMSProps<UserType extends User> = {
      */
     onAnalyticsEvent?: (event: CMSAnalyticsEvent, data?: object) => void;
 
+    /**
+     * Optional link builder you can add to generate a button in your entity forms.
+     * The function must return a URL that gets opened when the button is clicked
+     */
+    entityLinkBuilder?: EntityLinkBuilder;
+
+    components?: {
+
+        /**
+         * Component to render when a reference is missing
+         */
+        missingReference?: React.ComponentType<{
+            path: string,
+        }>;
+
+    }
+
 };

package/src/types/firecms_context.tsx

@@ -108,4 +108,13 @@ export type FireCMSContext<UserType extends User = User, AuthControllerType exte
      * You can also define an entity view from the UI.
      */
     entityViews?: EntityCustomView[];
+
+    components?: {
+
+        /**
+         * Component to render when a reference is missing
+         */
+        missingReference?: React.ComponentType<{ path: string }>;
+
+    }
 };