@firecms/core 3.0.0-canary.29 → 3.0.0-canary.290

package/src/hooks/useCollapsedGroups.ts

@@ -0,0 +1,64 @@
+import { useCallback, useEffect, useState } from "react";
+
+/**
+ * Custom hook for managing collapsed/expanded state of navigation groups
+ * with localStorage persistence. Automatically cleans up stale group entries
+ * when groups are removed from the navigation.
+ */
+export function useCollapsedGroups(groupNames: string[]) {
+    // Load collapsed groups from localStorage on mount
+    const [collapsedGroups, setCollapsedGroups] = useState<Record<string, boolean>>(() => {
+        try {
+            const stored = localStorage.getItem('firecms-collapsed-groups');
+            return stored ? JSON.parse(stored) : {};
+        } catch {
+            return {};
+        }
+    });
+
+    // Save to localStorage whenever collapsedGroups changes
+    useEffect(() => {
+        try {
+            localStorage.setItem('firecms-collapsed-groups', JSON.stringify(collapsedGroups));
+        } catch {
+            // Silently fail if localStorage is not available
+        }
+    }, [collapsedGroups]);
+
+    // Clean up collapsed groups state when groups change - remove entries for groups that no longer exist
+    useEffect(() => {
+        // Only clean up if we have actual groups loaded (avoid cleaning up during initial load)
+        if (groupNames.length === 0) return;
+
+        const currentGroupNames = new Set(groupNames);
+
+        setCollapsedGroups(prev => {
+            const cleaned = Object.fromEntries(
+                Object.entries(prev).filter(([groupName]) => currentGroupNames.has(groupName))
+            );
+
+            // Only update if something actually changed
+            const prevKeys = Object.keys(prev);
+            const cleanedKeys = Object.keys(cleaned);
+
+            if (prevKeys.length === cleanedKeys.length && prevKeys.every(key => cleanedKeys.includes(key))) {
+                return prev;
+            }
+
+            return cleaned;
+        });
+    }, [groupNames]);
+
+    const isGroupCollapsed = useCallback((name: string) => {
+        return !!collapsedGroups[name];
+    }, [collapsedGroups]);
+
+    const toggleGroupCollapsed = useCallback((name: string) => {
+        setCollapsedGroups(prev => ({ ...prev, [name]: !prev[name] }));
+    }, []);
+
+    return {
+        isGroupCollapsed,
+        toggleGroupCollapsed
+    };
+}

package/src/hooks/useFireCMSContext.tsx

@@ -11,6 +11,7 @@ import { useDialogsController } from "./useDialogsController";
 import { useCustomizationController } from "./useCustomizationController";
 import { useAnalyticsController } from "./useAnalyticsController";
 import React, { useEffect } from "react";
+import { useInternalUserManagementController } from "./useInternalUserManagementController";
 
 /**
  * Hook to retrieve the {@link FireCMSContext}.
@@ -21,9 +22,9 @@ import React, { useEffect } from "react";
  * @see FireCMSContext
  * @group Hooks and utilities
  */
-export const useFireCMSContext = <UserType extends User = User, AuthControllerType extends AuthController<UserType> = AuthController<UserType>>(): FireCMSContext<UserType, AuthControllerType> => {
+export const useFireCMSContext = <USER extends User = User, AuthControllerType extends AuthController<USER> = AuthController<USER>>(): FireCMSContext<USER, AuthControllerType> => {
 
-    const authController = useAuthController<UserType, AuthControllerType>();
+    const authController = useAuthController<USER, AuthControllerType>();
     const sideDialogsController = useSideDialogsController();
     const sideEntityController = useSideEntityController();
     const navigation = useNavigationController();
@@ -34,8 +35,9 @@ export const useFireCMSContext = <UserType extends User = User, AuthControllerTy
     const dialogsController = useDialogsController();
     const customizationController = useCustomizationController();
     const analyticsController = useAnalyticsController();
+    const userManagement = useInternalUserManagementController<USER>();
 
-    const fireCMSContextRef = React.useRef<FireCMSContext<UserType, AuthControllerType>>({
+    const fireCMSContextRef = React.useRef<FireCMSContext<USER, AuthControllerType>>({
         authController,
         sideDialogsController,
         sideEntityController,
@@ -46,7 +48,8 @@ export const useFireCMSContext = <UserType extends User = User, AuthControllerTy
         userConfigPersistence,
         dialogsController,
         customizationController,
-        analyticsController
+        analyticsController,
+        userManagement
     });
 
     useEffect(() => {
@@ -61,39 +64,10 @@ export const useFireCMSContext = <UserType extends User = User, AuthControllerTy
             userConfigPersistence,
             dialogsController,
             customizationController,
-            analyticsController
+            analyticsController,
+            userManagement
         };
     }, [authController, dialogsController, navigation, sideDialogsController]);
 
     return fireCMSContextRef.current;
 }
-
-// export const useFireCMSContext = <UserType extends User = User, AuthControllerType extends AuthController<UserType> = AuthController<UserType>>(): FireCMSContext<UserType, AuthControllerType> => {
-//
-//     const authController = useAuthController<UserType, AuthControllerType>();
-//     const sideDialogsController = useSideDialogsController();
-//     const sideEntityController = useSideEntityController();
-//     const navigation = useNavigationController();
-//     const dataSource = useDataSource();
-//     const storageSource = useStorageSource();
-//     const snackbarController = useSnackbarController();
-//     const userConfigPersistence = useUserConfigurationPersistence();
-//     const dialogsController = useDialogsController();
-//     const customizationController = useCustomizationController();
-//     const analyticsController = useAnalyticsController();
-//
-//     return {
-//         authController,
-//         sideDialogsController,
-//         sideEntityController,
-//         navigation,
-//         dataSource,
-//         storageSource,
-//         snackbarController,
-//         userConfigPersistence,
-//         dialogsController,
-//         customizationController,
-//         analyticsController
-//     };
-//
-// };

package/src/hooks/useInternalUserManagementController.tsx

@@ -0,0 +1,16 @@
+import { useContext } from "react";
+import { InternalUserManagement, NavigationController, User } from "../types";
+import { NavigationContext } from "../contexts/NavigationContext";
+import { InternalUserManagementContext } from "../contexts/InternalUserManagementContext";
+
+/**
+ * Use this hook to get the internal user management of the app.
+ * Note that this is different from the user management plugin controller.
+ * This controller will be eventually replaced by the one provided
+ * by the user management plugin.
+ *
+ * Use at your own risk!
+ *
+ * @group Hooks and utilities
+ */
+export const useInternalUserManagementController = <USER extends User = User>(): InternalUserManagement<USER> => useContext(InternalUserManagementContext);

package/src/hooks/useLargeLayout.tsx

@@ -63,38 +63,3 @@ function checkLargeLayout(breakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" |
         return false;
     return window.matchMedia(`(min-width: ${breakpoints[breakpoint] + 1}px)`).matches;
 }
-
-// import { useEffect, useState } from "react";
-//
-// const breakpoints = {
-//     xs: 0,
-//     sm: 640,
-//     md: 768,
-//     lg: 1024,
-//     xl: 1280,
-//     "2xl": 1536,
-//     "3xl": 1920
-// }
-// export const useLargeLayout = (breakpoint: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" = "lg"): boolean => {
-//     const [isLargeLayout, setIsLargeLayout] = useState<boolean>(false);
-//
-//     useEffect(() => {
-//         const handleResize = () => {
-//             const matched = window.matchMedia(`(min-width: ${breakpoints[breakpoint] + 1}px)`).matches;
-//             setIsLargeLayout(matched);
-//         };
-//
-//         // Set initial state
-//         handleResize();
-//
-//         // Set up event listener for resize events
-//         window.addEventListener("resize", handleResize);
-//
-//         // Clean up event listener when component unmounts
-//         return () => {
-//             window.removeEventListener("resize", handleResize);
-//         };
-//     }, []);
-//
-//     return isLargeLayout;
-// };

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

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/useValidateAuthenticator.tsx

@@ -1,36 +1,31 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import equal from "react-fast-compare";
 
-import { AppCheckTokenResult, AuthController, Authenticator, DataSourceDelegate, StorageSource, User } from "../index";
+import { 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;
-                                                                                                                                                   }): {
+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,
@@ -76,21 +71,6 @@ export function useValidateAuthenticator<UserType extends User = User, Controlle
         }
 
         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);
@@ -120,7 +100,7 @@ export function useValidateAuthenticator<UserType extends User = User, Controlle
             setAuthVerified(true);
         }
 
-    }, [disabled, authController, authenticator, getAppCheckToken, appCheckForceRefresh, dataSourceDelegate, storageSource]);
+    }, [disabled, authController, authenticator, dataSourceDelegate, storageSource]);
 
     useEffect(() => {
         checkAuthentication();

package/src/index.ts

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