@firecms/core 3.0.0-canary.2 → 3.0.0-canary.200

package/src/hooks/useModeController.tsx

@@ -7,8 +7,7 @@ import { useContext } from "react";
  */
 export interface ModeController {
     mode: "light" | "dark";
-    setMode: (mode: "light" | "dark") => void;
-    toggleMode: () => void;
+    setMode: (mode: "light" | "dark" | "system") => void;
 }
 
 /**

package/src/hooks/useProjectLog.tsx

@@ -1,31 +1,63 @@
-import { useEffect, useRef } from "react";
-import { AuthController } from "../types";
+import { useEffect, useRef, useState } from "react";
+import { AuthController, DataSourceDelegate, 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";
 
-async function makeRequest(authController: AuthController) {
-    const firebaseToken = await authController.getAuthToken();
+export type AccessResponse = {
+    blocked?: boolean;
+    message?: string;
+}
+
+async function makeRequest(authController: AuthController, dataSourceKey: string, pluginKeys: string[] | undefined, apiKey?: string): Promise<AccessResponse> {
+    let idToken: string | null;
+    try {
+        idToken = await authController.getAuthToken();
+    } catch (e) {
+        idToken = null;
+    }
     return fetch(DEFAULT_SERVER + "/access_log",
         {
             // mode: "no-cors",
             method: "POST",
             headers: {
                 "Content-Type": "application/json",
-                Authorization: `Basic ${firebaseToken}`,
+                Authorization: `Basic ${idToken}`
             },
-            body: JSON.stringify({})
+            body: JSON.stringify({
+                apiKey,
+                email: authController.user?.email ?? null,
+                datasource: dataSourceKey,
+                plugins: pluginKeys
+            })
         })
         .then(async (res) => {
+            return res.json();
         });
 }
 
-export function useProjectLog(authController: AuthController) {
+export interface UseProjectLogParams {
+    apiKey?: string;
+    authController: AuthController;
+    dataSourceDelegate: DataSourceDelegate;
+    plugins?: FireCMSPlugin<any, any, any>[];
+}
+
+export function useProjectLog({
+                                  authController,
+                                  dataSourceDelegate,
+                                  plugins,
+                                  apiKey
+                              }: UseProjectLogParams): AccessResponse | null {
+    const [accessResponse, setAccessResponse] = useState<AccessResponse | null>(null);
     const accessedUserRef = useRef<string | null>(null);
+    const dataSourceKey = dataSourceDelegate.key;
+    const pluginKeys = plugins?.map(plugin => plugin.key);
     useEffect(() => {
         if (authController.user && authController.user.uid !== accessedUserRef.current && !authController.initialLoading) {
-            makeRequest(authController);
+            makeRequest(authController, dataSourceKey, pluginKeys, apiKey).then(setAccessResponse);
             accessedUserRef.current = authController.user.uid;
         }
-    }, [authController]);
+    }, [authController, dataSourceKey, pluginKeys]);
+    return accessResponse;
 }

package/src/hooks/useReferenceDialog.tsx

@@ -1,5 +1,5 @@
 import { useSideDialogsController } from "./useSideDialogsController";
-import { ReferenceSelectionTable, ReferenceSelectionInnerProps } from "../components";
+import { ReferenceSelectionInnerProps, ReferenceSelectionTable } from "../components";
 import { useCallback } from "react";
 import { useNavigationController } from "./useNavigationController";
 
@@ -27,7 +27,7 @@ export function useReferenceDialog<M extends Record<string, any>>(referenceDialo
             if (!usedCollection)
                 usedCollection = navigation.getCollection(referenceDialogProps.path);
             if (!usedCollection)
-                throw Error("Not able to resolve the collection in useReferenceDialog");
+                throw Error("Not able to resolve the collection in useReferenceDialog. Make sure a collection is registered in path " + referenceDialogProps.path);
             sideDialogsController.open({
                 key: `reference_${referenceDialogProps.path}`,
                 component:

package/src/hooks/useResolvedNavigationFrom.tsx

@@ -1,6 +1,6 @@
 import { Entity, EntityCollection, EntityCustomView, FireCMSContext, User } from "../types";
 import { useEffect, useState } from "react";
-import { getNavigationEntriesFromPathInternal } from "../util/navigation_from_path";
+import { getNavigationEntriesFromPath } from "../util/navigation_from_path";
 import { useFireCMSContext } from "./useFireCMSContext";
 
 /**
@@ -55,22 +55,22 @@ interface ResolvedNavigationEntityCustom<M extends Record<string, any>> {
  * @param context
  * @group Hooks and utilities
  */
-export function resolveNavigationFrom<M extends Record<string, any>, UserType extends User>({
+export function resolveNavigationFrom<M extends Record<string, any>, USER extends User>({
                                                                                                 path,
                                                                                                 context
                                                                                             }: {
     path: string,
-    context: FireCMSContext<UserType>
+    context: FireCMSContext<USER>
 }): Promise<ResolvedNavigationEntry<M>[]> {
 
     const dataSource = context.dataSource;
     const navigation = context.navigation;
 
     if (!navigation) {
-        throw Error("Calling getNavigationFrom, but main navigation has not yet been initialised");
+        throw Error("Calling resolveNavigationFrom, but main navigation has not yet been initialised");
     }
 
-    const navigationEntries = getNavigationEntriesFromPathInternal({
+    const navigationEntries = getNavigationEntriesFromPath({
         path,
         collections: navigation.collections ?? []
     });
@@ -80,7 +80,7 @@ export function resolveNavigationFrom<M extends Record<string, any>, UserType ex
             if (entry.type === "collection") {
                 return Promise.resolve(entry);
             } else if (entry.type === "entity") {
-                const collection = navigation.getCollection(entry.path, entry.entityId);
+                const collection = navigation.getCollection(entry.path);
                 if (!collection) {
                     throw Error(`No collection defined in the navigation for the entity with path ${entry.path}`);
                 }
@@ -126,12 +126,12 @@ export interface NavigationFrom<M extends Record<string, any>> {
  * in any React component that lives under `FireCMS`
  * @group Hooks and utilities
  */
-export function useResolvedNavigationFrom<M extends Record<string, any>, UserType extends User>(
+export function useResolvedNavigationFrom<M extends Record<string, any>, USER extends User>(
     {
         path
     }: NavigationFromProps): NavigationFrom<M> {
 
-    const context: FireCMSContext<UserType> = useFireCMSContext();
+    const context: FireCMSContext<USER> = useFireCMSContext();
 
     const [data, setData] = useState<ResolvedNavigationEntry<M>[] | undefined>();
     const [dataLoading, setDataLoading] = useState<boolean>(false);
@@ -142,10 +142,8 @@ export function useResolvedNavigationFrom<M extends Record<string, any>, UserTyp
         if (navigation) {
             setDataLoading(true);
             setDataLoadingError(undefined);
-            resolveNavigationFrom<M, UserType>({ path, context })
-                .then((res) => {
-                    setData(res);
-                })
+            resolveNavigationFrom<M, USER>({ path, context })
+                .then(setData)
                 .catch((e) => setDataLoadingError(e))
                 .finally(() => setDataLoading(false));
         }

package/src/hooks/useStorageSource.tsx

@@ -1,4 +1,4 @@
-import { StorageSource } from "../types";
+import { EntityCollection, StorageSource } from "../types";
 import { StorageSourceContext } from "../contexts/StorageSourceContext";
 import { useContext } from "react";
 
@@ -6,4 +6,9 @@ import { useContext } from "react";
  * Use this hook to get the storage source being used
  * @group Hooks and utilities
  */
-export const useStorageSource = (): StorageSource => useContext(StorageSourceContext);
+export const useStorageSource = (collection?: EntityCollection): StorageSource => {
+    const defaultStorageSource = useContext(StorageSourceContext);
+    if (collection?.overrides?.storageSource)
+        return collection.overrides.storageSource;
+    return defaultStorageSource;
+};

package/src/hooks/useValidateAuthenticator.tsx

@@ -0,0 +1,115 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import equal from "react-fast-compare";
+
+import { AuthController, Authenticator, DataSourceDelegate, StorageSource, User } from "../index";
+
+/**
+ * This hook is used internally for validating an authenticator.
+ *
+ * @param authController
+ * @param authentication
+ * @param storageSource
+ * @param dataSourceDelegate
+ */
+export function useValidateAuthenticator<USER extends User = any>
+({
+     disabled,
+     authController,
+     authenticator,
+     storageSource,
+     dataSourceDelegate
+ }:
+     {
+         disabled?: boolean,
+         authController: AuthController<USER>,
+         authenticator?: boolean | Authenticator<USER>,
+         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;
+
+        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, dataSourceDelegate, storageSource]);
+
+    useEffect(() => {
+        checkAuthentication();
+    }, [checkAuthentication]);
+
+    return {
+        canAccessMainView,
+        authLoading: authenticationEnabled && authLoading,
+        notAllowedError,
+        authVerified
+    }
+}

package/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./core";
+export * from "./app";
 export * from "./types";
 export * from "./form";
 export * from "./preview";

package/src/internal/useBuildDataSource.ts

@@ -5,12 +5,11 @@ import {
     DeleteEntityProps,
     Entity,
     EntityCollection,
-    EntityReference,
     EntityValues,
     FetchCollectionProps,
     FetchEntityProps,
     FilterValues,
-    GeoPoint,
+    FireCMSContext,
     ListenCollectionProps,
     ListenEntityProps,
     NavigationController,
@@ -53,23 +52,25 @@ export function useBuildDataSource({
          */
         fetchCollection: useCallback(<M extends Record<string, any>>({
                                                                          path,
-                                                                         collection: collectionProp,
+                                                                         collection,
                                                                          filter,
                                                                          limit,
                                                                          startAfter,
                                                                          searchString,
                                                                          orderBy,
-                                                                         order
+                                                                         order,
                                                                      }: FetchCollectionProps<M>
         ): Promise<Entity<M>[]> => {
-            return delegate.fetchCollection<M>({
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.fetchCollection<M>({
                 path,
                 filter,
                 limit,
                 startAfter,
                 searchString,
                 orderBy,
-                order
+                order,
+                collection
             });
         }, [delegate]),
 
@@ -90,7 +91,6 @@ export function useBuildDataSource({
          * @group Firestore
          */
         listenCollection: delegate.listenCollection
-            // eslint-disable-next-line react-hooks/rules-of-hooks
             ? useCallback(<M extends Record<string, any>>(
                 {
                     path,
@@ -107,11 +107,12 @@ export function useBuildDataSource({
             ): () => void => {
 
                 const collection = collectionProp ?? navigationController.getCollection(path);
-                const isCollectionGroup = Boolean(collection?.collectionGroup) ?? false;
-                if (!delegate.listenCollection)
+                const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+
+                if (!usedDelegate.listenCollection)
                     throw Error("useBuildDataSource delegate not initialised");
 
-                return delegate.listenCollection<M>({
+                return usedDelegate.listenCollection<M>({
                     path,
                     filter,
                     limit,
@@ -121,8 +122,7 @@ export function useBuildDataSource({
                     order,
                     onUpdate,
                     onError,
-                    isCollectionGroup,
-                    collection
+                    collection,
                 });
             }, [delegate, navigationController.getCollection])
             : undefined,
@@ -136,12 +136,17 @@ export function useBuildDataSource({
          */
         fetchEntity: useCallback(<M extends Record<string, any>>({
                                                                      path,
-                                                                     entityId
+                                                                     entityId,
+                                                                     collection
                                                                  }: FetchEntityProps<M>
-        ): Promise<Entity<M> | undefined> => delegate.fetchEntity({
-            path,
-            entityId
-        }), [delegate]),
+        ): Promise<Entity<M> | undefined> => {
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.fetchEntity({
+                path,
+                entityId,
+                collection
+            });
+        }, [delegate.fetchEntity]),
 
         /**
          *
@@ -154,7 +159,6 @@ export function useBuildDataSource({
          * @group Firestore
          */
         listenEntity: delegate.listenEntity
-            // eslint-disable-next-line react-hooks/rules-of-hooks
             ? useCallback(<M extends Record<string, any>>(
                 {
                     path,
@@ -163,14 +167,17 @@ export function useBuildDataSource({
                     onUpdate,
                     onError
                 }: ListenEntityProps<M>): () => void => {
-                if (!delegate.listenEntity)
+                const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+
+                if (!usedDelegate.listenEntity)
                     throw Error("useBuildDataSource delegate not initialised");
 
-                return delegate.listenEntity<M>({
+                return usedDelegate.listenEntity<M>({
                     path,
                     entityId,
                     onUpdate,
-                    onError
+                    onError,
+                    collection
                 })
             }, [delegate.listenEntity]) : undefined,
 
@@ -195,46 +202,45 @@ export function useBuildDataSource({
             }: SaveEntityProps<M>): Promise<Entity<M>> => {
 
             const collection = collectionProp ?? navigationController.getCollection(path);
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
 
             const resolvedCollection = collection
                 ? resolveCollection<M>({
                     collection,
                     path,
                     entityId,
-                    fields: propertyConfigs
+                    propertyConfigs: propertyConfigs
                 })
                 : undefined;
 
             const properties: ResolvedProperties<M> | undefined = resolvedCollection?.properties;
 
-            const firestoreValues = cmsToDelegateModel(
+            const firestoreValues = usedDelegate.cmsToDelegateModel(
                 values,
-                delegate.buildReference,
-                delegate.buildGeoPoint,
-                delegate.buildDate,
-                delegate.buildDeleteFieldValue
             );
-            const updatedFirestoreValues: EntityValues<M> = properties
+
+            const updatedValues: EntityValues<M> = properties
                 ? updateDateAutoValues(
                     {
                         inputValues: firestoreValues,
                         properties,
                         status,
-                        timestampNowValue: delegate.currentTime(),
-                        setDateToMidnight: delegate.setDateToMidnight
+                        timestampNowValue: usedDelegate.currentTime?.() ?? new Date(),
+                        setDateToMidnight: usedDelegate.setDateToMidnight
                     })
                 : firestoreValues;
 
-            return delegate.saveEntity({
+            return usedDelegate.saveEntity({
                 path,
+                collection,
                 entityId,
-                values: updatedFirestoreValues,
+                values: updatedValues,
                 status
             }).then((res) => {
                 return {
                     id: res.id,
                     path: res.path,
-                    values: delegate.delegateToCMSModel(updatedFirestoreValues)
+                    values: usedDelegate.delegateToCMSModel(updatedValues)
                 } as Entity<M>;
             });
         }, [delegate.saveEntity, navigationController.getCollection]),
@@ -247,10 +253,15 @@ export function useBuildDataSource({
          */
         deleteEntity: useCallback(<M extends Record<string, any>>(
             {
-                entity
+                entity,
+                collection
             }: DeleteEntityProps<M>
         ): Promise<void> => {
-            return delegate.deleteEntity({ entity });
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.deleteEntity({
+                entity,
+                collection
+            });
         }, [delegate.deleteEntity]),
 
         /**
@@ -267,13 +278,16 @@ export function useBuildDataSource({
             path: string,
             name: string,
             value: any,
-            entityId?: string
+            entityId?: string,
+            collection?: EntityCollection
         ): Promise<boolean> => {
-            return delegate.checkUniqueField(path, name, value, entityId);
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.checkUniqueField(path, name, value, entityId, collection);
         }, [delegate.checkUniqueField]),
 
-        generateEntityId: useCallback((path: string): string => {
-            return delegate.generateEntityId(path,);
+        generateEntityId: useCallback((path: string, collection: EntityCollection): string => {
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.generateEntityId(path, collection);
         }, [delegate.generateEntityId]),
 
         countEntities: delegate.countEntities ? async ({
@@ -289,21 +303,24 @@ export function useBuildDataSource({
             orderBy?: string,
             order?: "desc" | "asc",
         }): Promise<number> => {
-            return delegate.countEntities!({
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.countEntities!({
                 path,
                 filter,
                 orderBy,
                 order,
-                isCollectionGroup: Boolean(collection.collectionGroup) ?? false
+                collection
             });
         } : undefined,
 
         isFilterCombinationValid: useCallback(({
                                                    path,
+                                                   databaseId,
                                                    filterValues,
                                                    sortBy
                                                }: {
             path: string,
+            databaseId?: string,
             filterValues: FilterValues<any>,
             sortBy?: [string, "asc" | "desc"]
         }): boolean => {
@@ -312,47 +329,25 @@ export function useBuildDataSource({
             return delegate.isFilterCombinationValid(
                 {
                     path,
+                    databaseId,
                     filterValues,
                     sortBy
                 }
             )
-        }, [delegate.isFilterCombinationValid])
+        }, [delegate.isFilterCombinationValid]),
 
-    };
+        initTextSearch: useCallback(async (props: {
+            context: FireCMSContext,
+            path: string,
+            collection: EntityCollection,
+            parentCollectionIds?: string[]
+        }): Promise<boolean> => {
+            const usedDelegate = props.collection?.overrides?.dataSourceDelegate ?? delegate;
+            if (!usedDelegate.initTextSearch)
+                return false;
+            return usedDelegate.initTextSearch(props)
+        }, [delegate.initTextSearch]),
 
-}
+    };
 
-/**
- * Recursive function that converts Firestore data types into CMS or plain
- * JS types.
- * FireCMS uses Javascript dates internally instead of Firestore timestamps.
- * This makes it easier to interact with the rest of the libraries and
- * bindings.
- * Also, Firestore references are replaced with {@link EntityReference}
- * @param data
- * @group Firestore
- */
-export function cmsToDelegateModel(data: any,
-                                   buildReference: (reference: EntityReference) => any,
-                                   buildGeoPoint: (geoPoint: GeoPoint) => any,
-                                   buildDate: (date: Date) => any,
-                                   buildDelete: () => any
-): any {
-    if (data === undefined) {
-        return buildDelete();
-    } else if (Array.isArray(data)) {
-        return data.map(v => cmsToDelegateModel(v, buildReference, buildGeoPoint, buildDate, buildDelete));
-    } else if (data instanceof EntityReference) {
-        return buildReference(data);
-    } else if (data instanceof GeoPoint) {
-        return buildGeoPoint(data);
-    } else if (data instanceof Date) {
-        return buildDate(data);
-    } else if (data && typeof data === "object") {
-        return Object.entries(data)
-            .map(([key, v]) => ({ [key]: cmsToDelegateModel(v, buildReference, buildGeoPoint, buildDate, buildDelete) }))
-            .reduce((a, b) => ({ ...a, ...b }), {});
-    }
-    return data;
 }
-

package/src/internal/useBuildSideDialogsController.tsx

@@ -25,8 +25,9 @@ export function useBuildSideDialogsController(): SideDialogsController {
         const newPanels = panelKeys
             .map(key => routesStore.current[key])
             .filter(p => Boolean(p)) as SideDialogPanelProps[];
-        if (!equal(sidePanelsRef.current.map(p => p.key), newPanels.map(p => p.key)))
+        if (!equal(sidePanelsRef.current.map(p => p.key), newPanels.map(p => p.key))) {
             updateSidePanels(newPanels);
+        }
     }, [location]);
 
     const close = useCallback(() => {
@@ -39,7 +40,7 @@ export function useBuildSideDialogsController(): SideDialogsController {
         updateSidePanels(updatedPanels);
 
         if (routesCount.current > 0) {
-            if (lastSidePanel.urlPath)
+            if (lastSidePanel.urlPath) // if it has a url path, we need to navigate back, don't remove this code
                 navigate(-1);
             routesCount.current--;
         } else if (lastSidePanel.parentUrlPath) {
@@ -118,6 +119,7 @@ export function useBuildSideDialogsController(): SideDialogsController {
 
     return {
         sidePanels,
+        setSidePanels: updateSidePanels,
         close,
         open,
         replace