@firecms/core 3.0.0-beta.4.pre.1 → 3.0.0-beta.5

package/src/hooks/useBuildNavigationController.tsx

@@ -29,7 +29,7 @@ import { getParentReferencesFromPath } from "../util/parent_references_from_path
 const DEFAULT_BASE_PATH = "/";
 const DEFAULT_COLLECTION_PATH = "/c";
 
-type BuildNavigationContextProps<EC extends EntityCollection, UserType extends User> = {
+export type BuildNavigationContextProps<EC extends EntityCollection, UserType extends User> = {
     basePath?: string,
     baseCollectionPath?: string,
     authController: AuthController<UserType>;
@@ -65,10 +65,10 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         injectCollections
     } = props;
 
-    const collectionsRef = useRef<EntityCollection[] | null>();
-    const [collections, setCollections] = useState<EntityCollection[] | undefined>();
-    const [views, setViews] = useState<CMSView[] | undefined>();
-    const [adminViews, setAdminViews] = useState<CMSView[] | undefined>();
+    const collectionsRef = useRef<EntityCollection[] | undefined>();
+    const viewsRef = useRef<CMSView[] | undefined>();
+    const adminViewsRef = useRef<CMSView[] | undefined>();
+
     const [initialised, setInitialised] = useState<boolean>(false);
 
     const [topLevelNavigation, setTopLevelNavigation] = useState<TopNavigationResult | undefined>(undefined);
@@ -98,7 +98,7 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
                     path: collection.id ?? collection.path,
                     collection,
                     description: collection.description?.trim(),
-                    group: collection.group?.trim() ?? "Views"
+                    group: getGroup(collection)
                 } satisfies TopNavigationEntry)
                 : undefined))
                 .filter(Boolean) as TopNavigationEntry[],
@@ -111,8 +111,8 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
                         path: view.path,
                         view,
                         description: view.description?.trim(),
-                        group: view.group?.trim() ?? "Views"
-                    }satisfies TopNavigationEntry)
+                        group: getGroup(view)
+                    } satisfies TopNavigationEntry)
                     : undefined)
                 .filter(Boolean) as TopNavigationEntry[],
             ...(adminViews ?? []).map(view =>
@@ -164,22 +164,23 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
             return;
 
         try {
+
             const [resolvedCollections = [], resolvedViews, resolvedAdminViews = []] = await Promise.all([
                     resolveCollections(collectionsProp, collectionPermissions, authController, dataSourceDelegate, injectCollections),
                     resolveCMSViews(viewsProp, authController, dataSourceDelegate),
                     resolveCMSViews(adminViewsProp, authController, dataSourceDelegate)
                 ]
             );
+
             if (
                 !equal(collectionsRef.current, resolvedCollections) ||
-                !equal(views, resolvedViews) ||
-                !equal(adminViews, resolvedAdminViews) ||
+                !equal(viewsRef.current, resolvedViews) ||
+                !equal(adminViewsRef.current, resolvedAdminViews) ||
                 !equal(topLevelNavigation, computeTopNavigation(resolvedCollections, resolvedViews, resolvedAdminViews, viewsOrder))
             ) {
                 collectionsRef.current = resolvedCollections;
-                setCollections(resolvedCollections);
-                setViews(resolvedViews);
-                setAdminViews(resolvedAdminViews);
+                viewsRef.current = resolvedViews;
+                adminViewsRef.current = resolvedAdminViews;
                 setTopLevelNavigation(computeTopNavigation(resolvedCollections ?? [], resolvedViews, resolvedAdminViews, viewsOrder));
             }
         } catch (e) {
@@ -189,25 +190,34 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
 
         setNavigationLoading(false);
         setInitialised(true);
-    }, [collectionsProp, collectionPermissions, authController.user, authController.initialLoading, viewsProp, adminViewsProp, computeTopNavigation, injectCollections]);
+
+    }, [
+        collectionsProp,
+        collectionPermissions,
+        authController.user,
+        authController.initialLoading,
+        viewsProp,
+        adminViewsProp,
+        computeTopNavigation,
+        injectCollections
+    ]);
 
     useEffect(() => {
         refreshNavigation();
     }, [refreshNavigation]);
 
-    const getCollection = useCallback(<EC extends EntityCollection>(
+    const getCollection = useCallback((
         idOrPath: string,
         entityId?: string,
         includeUserOverride = false
     ): EC | undefined => {
-
+        const collections = collectionsRef.current;
         if (!collections)
             return undefined;
 
         const baseCollection = getCollectionByPathOrId(removeInitialAndTrailingSlashes(idOrPath), collections);
 
         const userOverride = includeUserOverride ? userConfigPersistence?.getCollectionConfig(idOrPath) : undefined;
-
         const overriddenCollection = baseCollection ? mergeDeep(baseCollection, userOverride) : undefined;
 
         let result: Partial<EntityCollection> | undefined = overriddenCollection;
@@ -228,14 +238,12 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
 
         return { ...overriddenCollection, ...result } as EC;
 
-    }, [
-        basePath,
-        baseCollectionPath,
-        collections
-    ]);
+    }, [userConfigPersistence]);
 
     const getCollectionFromPaths = useCallback(<EC extends EntityCollection>(pathSegments: string[]): EC | undefined => {
-        let currentCollections = collections;
+
+        const collections = collectionsRef.current;
+        let currentCollections: EntityCollection[] | undefined = [...(collections ?? [])];
         if (!currentCollections)
             throw Error("Collections have not been initialised yet");
 
@@ -251,10 +259,12 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
 
         return undefined;
 
-    }, [collections]);
+    }, []);
 
     const getCollectionFromIds = useCallback(<EC extends EntityCollection>(ids: string[]): EC | undefined => {
-        let currentCollections = collections;
+
+        const collections = collectionsRef.current;
+        let currentCollections: EntityCollection[] | undefined = [...(collections ?? [])];
         if (!currentCollections)
             throw Error("Collections have not been initialised yet");
 
@@ -270,7 +280,7 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
 
         return undefined;
 
-    }, [collections]);
+    }, []);
 
     const isUrlCollectionPath = useCallback(
         (path: string): boolean => removeInitialAndTrailingSlashes(path + "/").startsWith(removeInitialAndTrailingSlashes(fullCollectionPath) + "/"),
@@ -292,17 +302,19 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
         []);
 
     const resolveAliasesFrom = useCallback((path: string): string => {
+        const collections = collectionsRef.current;
         if (!collections)
             throw Error("Collections have not been initialised yet");
         return resolveCollectionPathIds(path, collections);
-    }, [collections]);
+    }, []);
 
     const getAllParentReferencesForPath = useCallback((path: string): EntityReference[] => {
+        const collections = collectionsRef.current ?? [];
         return getParentReferencesFromPath({
             path,
             collections
         });
-    }, [collections]);
+    }, []);
 
     const getParentCollectionIds = useCallback((path: string): string[] => {
 
@@ -321,24 +333,24 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
     }, [getAllParentReferencesForPath])
 
     const convertIdsToPaths = useCallback((ids: string[]): string[] => {
-            let currentCollections = collections;
-            const paths: string[] = [];
-            for (let i = 0; i < ids.length; i++) {
-                const id = ids[i];
-                const collection: EntityCollection | undefined = currentCollections!.find(c => c.id === id);
-                if (!collection)
-                    throw Error(`Collection with id ${id} not found`);
-                paths.push(collection.path);
-                currentCollections = collection.subcollections;
-            }
-            return paths;
+        const collections = collectionsRef.current;
+        let currentCollections = collections;
+        const paths: string[] = [];
+        for (let i = 0; i < ids.length; i++) {
+            const id = ids[i];
+            const collection: EntityCollection | undefined = currentCollections!.find(c => c.id === id);
+            if (!collection)
+                throw Error(`Collection with id ${id} not found`);
+            paths.push(collection.path);
+            currentCollections = collection.subcollections;
         }
-        , [getCollectionFromIds]);
+        return paths;
+    }, [getCollectionFromIds]);
 
     return {
-        collections,
-        views,
-        adminViews,
+        collections: collectionsRef.current,
+        views: viewsRef.current,
+        adminViews: adminViewsRef.current,
         loading: !initialised || navigationLoading,
         navigationLoadingError,
         homeUrl,
@@ -431,3 +443,11 @@ async function resolveCMSViews(baseViews: CMSView[] | CMSViewsBuilder | undefine
     }
     return resolvedViews;
 }
+
+function getGroup(collectionOrView: EntityCollection<any, any> | CMSView) {
+    const trimmed = collectionOrView.group?.trim();
+    if (!trimmed || trimmed === "") {
+        return "Views";
+    }
+    return trimmed ?? "Views";
+}

package/src/hooks/useProjectLog.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import { AuthController } from "../types";
+import { AuthController, FireCMSPlugin } 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";
@@ -9,7 +9,7 @@ export type AccessResponse = {
     message?: string;
 }
 
-async function makeRequest(authController: AuthController) {
+async function makeRequest(authController: AuthController, pluginKeys: string | undefined) {
     const firebaseToken = await authController.getAuthToken();
     return fetch(DEFAULT_SERVER + "/access_log",
         {
@@ -19,19 +19,21 @@ async function makeRequest(authController: AuthController) {
                 "Content-Type": "application/json",
                 Authorization: `Basic ${firebaseToken}`,
             },
-            body: JSON.stringify({})
+            body: JSON.stringify({ plugins: pluginKeys })
         })
         .then(async (res) => {
             return res.json();
         });
 }
 
-export function useProjectLog(authController: AuthController): AccessResponse | null {
+export function useProjectLog(authController: AuthController,
+                              plugins?: FireCMSPlugin<any, any, any>[]): AccessResponse | null {
     const [accessResponse, setAccessResponse] = useState<AccessResponse | null>(null);
     const accessedUserRef = useRef<string | null>(null);
+    const pluginKeys = plugins?.map(plugin => plugin.key).join(",");
     useEffect(() => {
         if (authController.user && authController.user.uid !== accessedUserRef.current && !authController.initialLoading) {
-            makeRequest(authController).then(setAccessResponse);
+            makeRequest(authController, pluginKeys).then(setAccessResponse);
             accessedUserRef.current = authController.user.uid;
         }
     }, [authController]);

package/src/hooks/useValidateAuthenticator.tsx

@@ -0,0 +1,135 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import equal from "react-fast-compare";
+
+import { AppCheckTokenResult, AuthController, Authenticator, DataSourceDelegate, StorageSource, User } from "../index";
+
+/**
+ * This hook is used internally for validating an authenticator.
+ *
+ * @param authController
+ * @param authentication
+ * @param getAppCheckToken
+ * @param appCheckForceRefresh
+ * @param storageSource
+ * @param dataSourceDelegate
+ */
+export function useValidateAuthenticator<UserType extends User = User, Controller extends AuthController<UserType> = AuthController<UserType>>({
+                                                                                                                                                   disabled,
+                                                                                                                                                   authController,
+                                                                                                                                                   authenticator,
+                                                                                                                                                   getAppCheckToken,
+                                                                                                                                                   appCheckForceRefresh = false,
+                                                                                                                                                   storageSource,
+                                                                                                                                                   dataSourceDelegate
+                                                                                                                                               }:
+                                                                                                                                                   {
+                                                                                                                                                       disabled?: boolean,
+                                                                                                                                                       authController: Controller,
+                                                                                                                                                       authenticator?: boolean | Authenticator<UserType, Controller>,
+                                                                                                                                                       getAppCheckToken?: (forceRefresh: boolean) => Promise<AppCheckTokenResult> | undefined,
+                                                                                                                                                       appCheckForceRefresh?: boolean,
+                                                                                                                                                       dataSourceDelegate: DataSourceDelegate;
+                                                                                                                                                       storageSource: StorageSource;
+                                                                                                                                                   }): {
+    canAccessMainView: boolean,
+    authLoading: boolean,
+    notAllowedError: any,
+    authVerified: boolean,
+} {
+
+    const authenticationEnabled = Boolean(authenticator);
+
+    const [authLoading, setAuthLoading] = useState<boolean>(authenticationEnabled);
+    const [notAllowedError, setNotAllowedError] = useState<any>(false);
+    const [authVerified, setAuthVerified] = useState<boolean>(!authenticationEnabled || Boolean(authController.loginSkipped));
+
+    const canAccessMainView = (authVerified) &&
+        (!authenticationEnabled || Boolean(authController.user) || Boolean(authController.loginSkipped)) &&
+        !notAllowedError;
+
+    useEffect(() => {
+        if (authController.loginSkipped)
+            setAuthVerified(true);
+    }, [authController.loginSkipped]);
+
+    /**
+     * We use this ref to check the authentication only if the user has
+     * changed.
+     */
+    const checkedUserRef = useRef<User | undefined>();
+
+    const checkAuthentication = useCallback(async () => {
+
+        if (disabled) {
+            return;
+        }
+
+        if (authController.initialLoading) {
+            return;
+        }
+
+        if (!authController.user && !authController.loginSkipped) {
+            checkedUserRef.current = undefined;
+            setAuthLoading(false);
+            setAuthVerified(false);
+            return;
+        }
+
+        const delegateUser = authController.user;
+        console.debug("Checking authentication for user", delegateUser);
+
+        if (getAppCheckToken) {
+            try {
+                if (!await getAppCheckToken(appCheckForceRefresh)) {
+                    setNotAllowedError("App Check failed.");
+                    authController.signOut();
+                } else {
+                    console.debug("App Check success.");
+                }
+            } catch (e: any) {
+                setNotAllowedError(e.message);
+                authController.signOut();
+            }
+        }
+
+        if (authenticator instanceof Function && delegateUser && !equal(checkedUserRef.current?.uid, delegateUser.uid)) {
+            setAuthLoading(true);
+            try {
+                const allowed = await authenticator({
+                    user: delegateUser,
+                    authController,
+                    dataSourceDelegate,
+                    storageSource
+                });
+                if (!allowed) {
+                    authController.signOut();
+                    setNotAllowedError(true);
+                }
+            } catch (e) {
+                setNotAllowedError(e);
+                authController.signOut();
+            }
+            setAuthLoading(false);
+            setAuthVerified(true);
+            checkedUserRef.current = delegateUser;
+        } else {
+            setAuthLoading(false);
+        }
+
+        if (!authController.initialLoading && !delegateUser) {
+            setAuthVerified(true);
+        }
+
+    }, [disabled, authController, authenticator, getAppCheckToken, appCheckForceRefresh, dataSourceDelegate, storageSource]);
+
+    useEffect(() => {
+        checkAuthentication();
+    }, [checkAuthentication]);
+
+    return {
+        canAccessMainView,
+        authLoading: authenticationEnabled && authLoading,
+        notAllowedError,
+        authVerified
+    }
+}

package/src/internal/useBuildSideEntityController.tsx

@@ -34,6 +34,7 @@ export const useBuildSideEntityController = (navigation: NavigationController,
     // only on initialisation, create panels from URL
     useEffect(() => {
         if (!navigation.loading && !initialised.current) {
+            console.debug("Initialising side entity controller");
             if (navigation.isUrlCollectionPath(location.pathname)) {
                 const newFlag = location.hash === `#${NEW_URL_HASH}`;
                 const entityOrCollectionPath = navigation.urlPathToDataPath(location.pathname);
@@ -47,6 +48,8 @@ export const useBuildSideEntityController = (navigation: NavigationController,
                             sideDialogsController.open(propsToSidePanel(panel, navigation, smallLayout))
                     }, 1);
                 }
+            } else {
+                console.warn("Location path is not a collection path");
             }
             initialised.current = true;
         }

package/src/preview/PropertyPreviewProps.tsx

@@ -8,7 +8,7 @@ export type PreviewSize = "medium" | "small" | "tiny";
 /**
  * @group Preview components
  */
-export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any, M extends Record<string, any> = Record<string, any>> {
+export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any> {
     /**
      * Name of the property
      */
@@ -24,11 +24,6 @@ export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any
      */
     property: Property<T> | ResolvedProperty<T>;
 
-    /**
-     * Click handler
-     */
-    // onClick?: () => void;
-
     /**
      * Desired size of the preview, depending on the context.
      */
@@ -51,9 +46,4 @@ export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any
      */
     customProps?: CustomProps;
 
-    /**
-     * Entity this property refers to
-     */
-    // entity?: Entity<M>;
-
 }

package/src/preview/components/BooleanPreview.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Checkbox } from "@firecms/ui";
+import { Checkbox, cn } from "@firecms/ui";
 import { PreviewSize } from "../PropertyPreviewProps";
 import { Property } from "../../types";
 
@@ -17,8 +17,10 @@ export function BooleanPreview({
 }): React.ReactElement {
     return <div className={"flex flex-row gap-2 items-center"}>
         <Checkbox checked={value}
+                  padding={false}
                   size={size}
                   color={"secondary"}/>
-        {property.name && <span className={size === "tiny" ? "text-sm" : ""}>{property.name}</span>}
+        {property.name && <span
+            className={cn("text-text-secondary dark:text-text-secondary-dark", size === "tiny" ? "text-sm" : "")}>{property.name}</span>}
     </div>;
 }

package/src/preview/components/ReferencePreview.tsx

@@ -64,7 +64,7 @@ function ReferencePreviewInternal<M extends Record<string, any>>({
 
     const navigationController = useNavigationController();
 
-    const collection = navigationController.getCollection<EntityCollection<M>>(reference.path);
+    const collection = navigationController.getCollection(reference.path);
     if (!collection) {
         if (customizationController.components?.missingReference) {
             return <customizationController.components.missingReference path={reference.path}/>;

package/src/types/auth.tsx

@@ -1,4 +1,7 @@
 import { User } from "./user";
+import { Role } from "./roles";
+import { DataSourceDelegate } from "./datasource";
+import { StorageSource } from "./storage";
 
 /**
  * Controller for retrieving the logged user or performing auth related operations.
@@ -6,7 +9,7 @@ import { User } from "./user";
  * to do it as the result of a hook.
  * @group Hooks and utilities
  */
-export type AuthController<UserType extends User = User, ExtraData extends any = any> = {
+export type AuthController<UserType extends User = any, ExtraData extends any = any> = {
 
     /**
      * The user currently logged in
@@ -14,6 +17,11 @@ export type AuthController<UserType extends User = User, ExtraData extends any =
      */
     user: UserType | null;
 
+    /**
+     * Roles related to the logged user
+     */
+    roles?: Role[];
+
     /**
      * Initial loading flag. It is used not to display the login screen
      * when the app first loads, and it has not been checked whether the user
@@ -56,4 +64,35 @@ export type AuthController<UserType extends User = User, ExtraData extends any =
 
     setExtra: (extra: ExtraData) => void;
 
+    // setUser?: (user: UserType | null) => void;
+
+    // setRoles?: (roles: Role[]) => void;
 };
+
+/**
+ * Implement this function to allow access to specific users.
+ * @group Hooks and utilities
+ */
+export type Authenticator<UserType extends User = User, Controller extends AuthController<UserType> = AuthController<UserType>> = (props: {
+
+    /**
+     * Logged-in user or null
+     */
+    user: UserType | null;
+
+    /**
+     * AuthController
+     */
+    authController: Controller;
+
+    /**
+     * Connector to your database, e.g. your Firestore database
+     */
+    dataSourceDelegate: DataSourceDelegate;
+
+    /**
+     * Used storage implementation
+     */
+    storageSource: StorageSource;
+
+}) => boolean | Promise<boolean>;

package/src/types/collections.ts

@@ -17,7 +17,7 @@ import { EntityOverrides } from "./entity_overrides";
  *
  * @group Models
  */
-export interface EntityCollection<M extends Record<string, any> = any, UserType extends User = User> {
+export interface EntityCollection<M extends Record<string, any> = any, UserType extends User = any> {
 
     /**
      * You can set an alias that will be used internally instead of the `path`.
@@ -147,7 +147,7 @@ export interface EntityCollection<M extends Record<string, any> = any, UserType
      * is being created, updated or deleted.
      * Useful for adding your own logic or blocking the execution of the operation.
      */
-    callbacks?: EntityCallbacks<M>;
+    callbacks?: EntityCallbacks<M, UserType>;
 
     /**
      * Builder for rendering additional components such as buttons in the
@@ -451,7 +451,7 @@ export interface AdditionalFieldDelegate<M extends Record<string, any> = any,
      * view.
      * @param entity
      */
-    value?: (props: { entity: Entity<M>, context: FireCMSContext }) => string | number | Promise<string | number> | undefined;
+    value?: (props: { entity: Entity<M>, context: FireCMSContext<any> }) => string | number | Promise<string | number> | undefined;
 }
 
 /**

package/src/types/datasource.ts

@@ -8,7 +8,7 @@ import { ResolvedEntityCollection } from "./resolved_entities";
 export interface FetchEntityProps<M extends Record<string, any> = any> {
     path: string;
     entityId: string;
-    collection?: EntityCollection<M>
+    collection?: EntityCollection<M, any>
 }
 
 /**

package/src/types/entity_callbacks.ts

@@ -78,7 +78,7 @@ export interface EntityOnFetchProps<M extends Record<string, any> = any, UserTyp
     /**
      * Collection of the entity
      */
-    collection: EntityCollection<M>;
+    collection: EntityCollection<M, UserType>;
 
     /**
      * Full path of the CMS where this collection is being fetched.
@@ -193,7 +193,7 @@ export interface EntityOnDeleteProps<M extends Record<string, any> = any, UserTy
     /**
      * Context of the app status
      */
-    context: FireCMSContext;
+    context: FireCMSContext<UserType>;
 }
 
 /**

package/src/types/index.ts

@@ -22,6 +22,7 @@ export * from "./local_config_persistence";
 export * from "./plugins";
 export * from "./analytics";
 export * from "./firecms";
+export * from "./roles";
 export * from "./appcheck";
 export * from "./export_import";
 export * from "./modify_collections";

package/src/types/navigation.ts

@@ -7,7 +7,7 @@ import { EntityReference } from "./entities";
  * attributes.
  * @group Models
  */
-export type NavigationController = {
+export type NavigationController<EC extends EntityCollection = EntityCollection<any>> = {
 
     /**
      * List of the mapped collections in the CMS.
@@ -56,18 +56,18 @@ export type NavigationController = {
      * Get the collection configuration for a given path.
      * The collection is resolved from the given path or alias.
      */
-    getCollection: <EC extends EntityCollection = EntityCollection<any>>(pathOrAlias: string,
-                                                                         entityId?: string,
-                                                                         includeUserOverride?: boolean) => EC | undefined;
+    getCollection: (pathOrAlias: string,
+                    entityId?: string,
+                    includeUserOverride?: boolean) => EC | undefined;
     /**
      * Get the collection configuration from its parent path segments.
      */
-    getCollectionFromIds: <EC extends EntityCollection = EntityCollection<any>>(ids: string[]) => EC | undefined;
+    getCollectionFromIds: (ids: string[]) => EC | undefined;
 
     /**
      * Get the collection configuration from its parent path segments.
      */
-    getCollectionFromPaths: <EC extends EntityCollection = EntityCollection<any>>(pathSegments: string[]) => EC | undefined;
+    getCollectionFromPaths: (pathSegments: string[]) => EC | undefined;
 
     /**
      * Default path under the navigation routes of the CMS will be created

package/src/types/plugins.tsx

@@ -17,9 +17,9 @@ import { CMSView } from "./navigation";
 export type FireCMSPlugin<PROPS = any, FORM_PROPS = any, EC extends EntityCollection = EntityCollection, COL_ACTIONS_PROPS = any> = {
 
     /**
-     * Name of the plugin
+     * Key of the plugin. This is used to identify the plugin in the CMS.
      */
-    name: string;
+    key: string;
 
     /**
      * If this flag is set to true, no content will be shown in the CMS

package/src/types/properties.ts

@@ -770,7 +770,8 @@ export type StorageConfig = {
      * Postprocess the saved value (storage path or URL)
      * after it has been resolved.
      */
-    postProcess?: (pathOrUrl: string) => Promise<string>
+    postProcess?: (pathOrUrl: string) => Promise<string>;
+
 }
 
 /**