@firecms/core 3.0.0-canary.126 → 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.126",
+    "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.126",
-        "@firecms/formex": "^3.0.0-canary.126",
-        "@firecms/ui": "^3.0.0-canary.126",
+        "@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": "122cb2b218a404444b4580e8f561f671c8b785a9",
+    "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/EntityCollectionView/EntityCollectionView.tsx

@@ -7,7 +7,9 @@ import {
     CollectionSize,
     Entity,
     EntityAction,
-    EntityCollection, EntityTableController,
+    EntityCollection,
+    EntityReference,
+    EntityTableController,
     FilterValues,
     PartialEntityCollection,
     PropertyOrBuilder,
@@ -45,7 +47,8 @@ import { EntityCollectionViewActions } from "./EntityCollectionViewActions";
 import {
     AddIcon,
     Button,
-    cls, focusedDisabled,
+    cls,
+    focusedDisabled,
     IconButton,
     KeyboardTabIcon,
     Markdown,
@@ -71,6 +74,7 @@ import { DeleteEntityDialog } from "../DeleteEntityDialog";
 import { useAnalyticsController } from "../../hooks/useAnalyticsController";
 import { useSelectionController } from "./useSelectionController";
 import { EntityCollectionViewStartActions } from "./EntityCollectionViewStartActions";
+import { addRecentId, getRecentIds } from "./utils";
 
 const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
 
@@ -467,11 +471,11 @@ export const EntityCollectionView = React.memo(
         };
 
         const tableRowActionsBuilder = useCallback(({
-                                            entity,
-                                            size,
-                                            width,
-                                            frozen
-                                        }: {
+                                                        entity,
+                                                        size,
+                                                        width,
+                                                        frozen
+                                                    }: {
             entity: Entity<any>,
             size: CollectionSize,
             width: number,
@@ -778,7 +782,10 @@ function EntityIdHeaderWidget({
 }) {
     const [openPopup, setOpenPopup] = React.useState(false);
     const [searchString, setSearchString] = React.useState("");
+    const [recentIds, setRecentIds] = React.useState<string[]>(getRecentIds(collection.id));
     const sideEntityController = useSideEntityController();
+
+
     return (
         <Tooltip title={!openPopup ? "Find by ID" : undefined} asChild={false}>
             <Popover
@@ -791,38 +798,58 @@ function EntityIdHeaderWidget({
                     <IconButton size={"small"}>
                         <SearchIcon size={"small"}/>
                     </IconButton>
-                }
-            >
-                <form noValidate={true}
-                      onSubmit={(e) => {
-                          e.preventDefault();
-                          if (!searchString) return;
-                          setOpenPopup(false);
-                          return sideEntityController.open({
-                              entityId: searchString.trim(),
-                              path,
-                              collection,
-                              updateUrl: true,
-                          });
-                      }}
-                      className={"text-gray-900 dark:text-white w-96 max-w-full"}>
-
-                    <div className="flex p-2 w-full gap-4">
-                        <input
-                            autoFocus={openPopup}
-                            placeholder={"Find entity by ID"}
-                            // size={"small"}
-                            onChange={(e) => {
-                                setSearchString(e.target.value);
-                            }}
-                            value={searchString}
-                            className={"flex-grow bg-transparent outline-none p-1 " + focusedDisabled}/>
-                        <Button variant={"outlined"}
-                                disabled={!(searchString.trim())}
-                                type={"submit"}
-                        >Go</Button>
-                    </div>
-                </form>
+                }>
+                <div className={cls("my-2 rounded-lg bg-gray-50 dark:bg-gray-950 text-gray-900 dark:text-white")}>
+                    <form noValidate={true}
+                          onSubmit={(e) => {
+                              e.preventDefault();
+                              if (!searchString) return;
+                              setOpenPopup(false);
+                              setRecentIds(addRecentId(collection.id, searchString.trim()));
+                              return sideEntityController.open({
+                                  entityId: searchString.trim(),
+                                  path,
+                                  collection,
+                                  updateUrl: true
+                              });
+                          }}
+                          className={"w-96 max-w-full"}>
+
+                        <div className="flex p-2 w-full gap-2">
+                            <input
+                                autoFocus={openPopup}
+                                placeholder={"Find entity by ID"}
+                                // size={"small"}
+                                onChange={(e) => {
+                                    setSearchString(e.target.value);
+                                }}
+                                value={searchString}
+                                className={"rounded-lg bg-white dark:bg-gray-800 flex-grow bg-transparent outline-none p-2 " + focusedDisabled}/>
+                            <Button variant={"text"}
+                                    disabled={!(searchString.trim())}
+                                    type={"submit"}
+                            ><KeyboardTabIcon/></Button>
+                        </div>
+                    </form>
+                    {recentIds && recentIds.length > 0 && <div className="flex flex-col gap-2 p-2">
+                        {recentIds.map(id => (
+                            <ReferencePreview reference={new EntityReference(id, path)}
+                                              key={id}
+                                              hover={true}
+                                              onClick={() => {
+                                                  setOpenPopup(false);
+                                                  sideEntityController.open({
+                                                      entityId: id,
+                                                      path,
+                                                      collection,
+                                                      updateUrl: true
+                                                  });
+                                              }}
+                                              includeEntityLink={false}
+                                              size={"small"}/>
+                        ))}
+                    </div>}
+                </div>
             </Popover>
 
         </Tooltip>

package/src/components/EntityCollectionView/utils.ts

@@ -0,0 +1,19 @@
+export function addRecentId(collectionId: string, id: string) {
+    const recentIds = getRecentIds(collectionId);
+    const newRecentIds = [id, ...recentIds.filter(i => i !== id)];
+    if (newRecentIds.length > 5) {
+        newRecentIds.pop();
+    }
+    saveSearchedIdsLocally(collectionId, newRecentIds);
+    return newRecentIds;
+}
+
+export function saveSearchedIdsLocally(collectionId: string, ids: string[]) {
+    localStorage.setItem("recent_id_searches::" + collectionId, JSON.stringify(ids));
+}
+
+export function getRecentIds(collectionId: string): string[] {
+    const stored = localStorage.getItem("recent_id_searches::" + collectionId);
+    if (!stored) return [];
+    return JSON.parse(stored);
+}

package/src/components/EntityPreview.tsx

@@ -22,7 +22,7 @@ export type EntityPreviewProps = {
     collection?: EntityCollection,
     hover?: boolean;
     previewProperties?: string[],
-    disabled: undefined | boolean,
+    disabled?: boolean,
     entity: Entity<any>,
     includeId?: boolean,
     includeEntityLink?: boolean,

package/src/components/common/default_entity_actions.tsx

@@ -1,6 +1,7 @@
 import { ArchiveIcon, DeleteIcon, FileCopyIcon, KeyboardTabIcon, OpenInNewIcon } from "@firecms/ui";
 import { EntityAction } from "../../types";
 import { DeleteEntityDialog } from "../DeleteEntityDialog";
+import { addRecentId } from "../EntityCollectionView/utils";
 
 export const editEntityAction: EntityAction = {
     icon: <KeyboardTabIcon/>,
@@ -19,6 +20,9 @@ export const editEntityAction: EntityAction = {
             path: entity.path,
             entityId: entity.id
         });
+        if (collection) {
+            addRecentId(collection.id, entity.id);
+        }
         const path = collection?.collectionGroup ? entity.path : (fullPath ?? entity.path);
         context.sideEntityController.open({
             entityId: entity.id,

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

package/src/util/make_properties_editable.ts

@@ -4,9 +4,11 @@ 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);
+        if (property) {
+            property.editable = true;
+            if (property.dataType === "map" && property.properties) {
+                makePropertiesEditable(property.properties as Properties);
+            }
         }
     });
     return properties;
@@ -15,13 +17,19 @@ export function makePropertiesEditable(properties: 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) };
+            const updated = {
+                ...property,
+                properties: makePropertiesNonEditable(property.properties as PropertiesOrBuilders)
+            };
             acc[key] = updated;
         }
         if (isPropertyBuilder(property)) {
             acc[key] = property;
         } else {
-            acc[key] = { ...property, editable: false };
+            acc[key] = {
+                ...property,
+                editable: false
+            };
         }
         return acc;
     }, {} as PropertiesOrBuilders);