@firecms/core 3.0.0-canary.127 → 3.0.0-canary.128

package/dist/types/firecms.d.ts

@@ -62,6 +62,10 @@ export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
          */
         loading: boolean;
     }) => React.ReactNode;
+    /**
+     * If you have a custom API key, you can use it here.
+     */
+    apiKey?: string;
     /**
      * Record of custom form fields to be used in the CMS.
      * You can use the key to reference the custom field in

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/core",
     "type": "module",
-    "version": "3.0.0-canary.127",
+    "version": "3.0.0-canary.128",
     "description": "Awesome Firebase/Firestore-based headless open-source CMS",
     "funding": {
         "url": "https://github.com/sponsors/firecmsco"
@@ -46,9 +46,9 @@
         "./package.json": "./package.json"
     },
     "dependencies": {
-        "@firecms/editor": "^3.0.0-canary.127",
-        "@firecms/formex": "^3.0.0-canary.127",
-        "@firecms/ui": "^3.0.0-canary.127",
+        "@firecms/editor": "^3.0.0-canary.128",
+        "@firecms/formex": "^3.0.0-canary.128",
+        "@firecms/ui": "^3.0.0-canary.128",
         "@hello-pangea/dnd": "^16.6.0",
         "@radix-ui/react-portal": "^1.1.1",
         "clsx": "^2.1.1",
@@ -100,7 +100,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "0c46cee41d666c60817c9f4f0447f78fcfa07ddf",
+    "gitHead": "bc89d0f2a854db605146acc129aeee89d8e0d0a3",
     "publishConfig": {
         "access": "public"
     },

package/src/components/ArrayContainer.tsx

@@ -279,7 +279,7 @@ export function ArrayItemOptions({
     const iconRef = React.useRef<HTMLDivElement>(null);
     useOutsideAlerter(iconRef, () => setMenuOpen(false));
 
-    return <div className={`pl-2 pt-1 pb-4 flex ${direction === "row" ? "flex-row-reverse" : "flex-col"} items-center`}
+    return <div className={`pl-2 pt-1 pb-1 flex ${direction === "row" ? "flex-row-reverse" : "flex-col"} items-center`}
                 ref={iconRef}
                 {...provided.dragHandleProps}>
         <Tooltip

package/src/components/{DeleteConfirmationDialog.tsx → ConfirmationDialog.tsx}

@@ -2,7 +2,7 @@ import React from "react";
 
 import { Button, Dialog, DialogActions, DialogContent, LoadingButton, Typography } from "@firecms/ui";
 
-export function DeleteConfirmationDialog({
+export function ConfirmationDialog({
                                              open,
                                              onAccept,
                                              onCancel,

package/src/components/index.tsx

@@ -26,7 +26,7 @@ export * from "./NotFoundPage";
 
 export * from "./VirtualTable";
 export * from "./ErrorBoundary";
-export * from "./DeleteConfirmationDialog";
+export * from "./ConfirmationDialog";
 
 export * from "./FireCMSLogo";
 

package/src/core/FireCMS.tsx

@@ -48,6 +48,7 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         entityViews,
         components,
         navigationController,
+        apiKey
     } = props;
 
     useLocaleConfig(locale);
@@ -82,7 +83,15 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
         onAnalyticsEvent
     }), []);
 
-    const accessResponse = useProjectLog(authController, dataSourceDelegate, plugins);
+    const accessResponse = useProjectLog({
+        apiKey,
+        authController,
+        dataSourceDelegate,
+        plugins
+    });
+    if (accessResponse?.message) {
+        console.warn(accessResponse.message);
+    }
 
     if (navigationController.navigationLoadingError) {
         return (
@@ -106,16 +115,16 @@ export function FireCMS<UserType extends User, EC extends EntityCollection>(prop
 
     if (accessResponse?.blocked) {
         return (
-            <CenteredView maxWidth={"md"} fullScreen={true}>
-                <Typography variant={"h4"}>
-                    Access blocked
+            <CenteredView maxWidth={"md"} fullScreen={true} className={"flex flex-col gap-2"}>
+                <Typography variant={"h4"} gutterBottom>
+                    License needed
                 </Typography>
                 <Typography>
-                    This app has been blocked. Please reach out at <a
+                    You need a valid license to use FireCMS PRO. Please reach out at <a
                     href={"mailto:hello@firecms.co"}>hello@firecms.co</a> for more information.
                 </Typography>
                 {accessResponse?.message &&
-                    <Typography>Response from the server: {accessResponse?.message}</Typography>}
+                    <Typography>{accessResponse?.message}</Typography>}
             </CenteredView>
         );
     }

package/src/hooks/useProjectLog.tsx

@@ -9,7 +9,7 @@ export type AccessResponse = {
     message?: string;
 }
 
-async function makeRequest(authController: AuthController, dataSourceKey: string, pluginKeys: string[] | undefined) {
+async function makeRequest(authController: AuthController, dataSourceKey: string, pluginKeys: string[] | undefined, apiKey?: string): Promise<AccessResponse> {
     let idToken: string | null;
     try {
         idToken = await authController.getAuthToken();
@@ -25,6 +25,7 @@ async function makeRequest(authController: AuthController, dataSourceKey: string
                 Authorization: `Basic ${idToken}`
             },
             body: JSON.stringify({
+                apiKey,
                 email: authController.user?.email ?? null,
                 datasource: dataSourceKey,
                 plugins: pluginKeys
@@ -35,16 +36,26 @@ async function makeRequest(authController: AuthController, dataSourceKey: string
         });
 }
 
-export function useProjectLog(authController: AuthController,
-                              dataSourceDelegate: DataSourceDelegate,
-                              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 dataSourceKey = dataSourceDelegate.key;
     const pluginKeys = plugins?.map(plugin => plugin.key);
     useEffect(() => {
         if (authController.user && authController.user.uid !== accessedUserRef.current && !authController.initialLoading) {
-            makeRequest(authController, dataSourceKey, pluginKeys).then(setAccessResponse);
+            makeRequest(authController, dataSourceKey, pluginKeys, apiKey).then(setAccessResponse);
             accessedUserRef.current = authController.user.uid;
         }
     }, [authController, dataSourceKey, pluginKeys]);

package/src/types/firecms.tsx

@@ -67,6 +67,11 @@ export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
         loading: boolean;
     }) => React.ReactNode;
 
+    /**
+     * If you have a custom API key, you can use it here.
+     */
+    apiKey?: string;
+
     /**
      * Record of custom form fields to be used in the CMS.
      * You can use the key to reference the custom field in