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

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/core",
     "type": "module",
-    "version": "3.0.0-canary.125",
+    "version": "3.0.0-canary.127",
     "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.125",
-        "@firecms/formex": "^3.0.0-canary.125",
-        "@firecms/ui": "^3.0.0-canary.125",
+        "@firecms/editor": "^3.0.0-canary.127",
+        "@firecms/formex": "^3.0.0-canary.127",
+        "@firecms/ui": "^3.0.0-canary.127",
         "@hello-pangea/dnd": "^16.6.0",
         "@radix-ui/react-portal": "^1.1.1",
         "clsx": "^2.1.1",
@@ -100,7 +100,7 @@
         "dist",
         "src"
     ],
-    "gitHead": "501db4cb508b17b75c72c1244cdf88e25f8c1e47",
+    "gitHead": "0c46cee41d666c60817c9f4f0447f78fcfa07ddf",
     "publishConfig": {
         "access": "public"
     },

package/src/components/EntityCollectionTable/fields/TableReferenceField.tsx

@@ -67,7 +67,6 @@ export const TableReferenceFieldInternal = React.memo(
         }, [updateValue]);
 
         const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
-            console.log("onMultipleEntitiesSelected", entities);
             updateValue(entities.map((e) => getReferenceFrom(e)));
         }, [updateValue]);
 

package/src/components/EntityCollectionTable/fields/TableStorageUpload.tsx

@@ -179,7 +179,7 @@ function StorageUpload({
             onDropRejected: (fileRejections, event) => {
                 for (const fileRejection of fileRejections) {
                     for (const error of fileRejection.errors) {
-                        console.log("Error uploading file: ", error);
+                        console.error("Error uploading file: ", error);
                         if (error.code === "file-too-large") {
                             snackbarContext.open({
                                 type: "error",

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";
 
@@ -207,7 +211,6 @@ export const EntityCollectionView = React.memo(
         }, [tableController.setPopupCell]);
 
         const onEntityClick = useCallback((clickedEntity: Entity<M>) => {
-            console.log("Entity clicked", clickedEntity)
             const collection = collectionRef.current;
             setHighlightedEntity(clickedEntity);
             analyticsController.onAnalyticsEvent?.("edit_entity_clicked", {
@@ -468,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,
@@ -779,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
@@ -792,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/HomePage/DefaultHomePage.tsx

@@ -82,7 +82,6 @@ export function DefaultHomePage({
                 setFilteredUrls(null);
             } else {
                 const searchResult = fuse.current?.search(value);
-                console.log("Search result", searchResult);
                 if (searchResult) {
                     setFilteredUrls(searchResult.map((e) => e.item.url));
                 }

package/src/components/SearchIconsView.tsx

@@ -46,7 +46,6 @@ export function SearchIconsView({
     }, [query, updateSearchResults]);
 
     const icons = keys === null ? coolIconKeys : keys;
-    console.log("Icons", icons);
 
     return (
         <>

package/src/components/SelectableTable/filters/StringNumberFilterField.tsx

@@ -93,7 +93,6 @@ export function StringNumberFilterField({
 
     const multiple = multipleSelectOperations.includes(operation);
 
-    console.log("internalValue", { internalValue });
     return (
 
         <div className="flex w-[440px]">

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/core/DefaultDrawer.tsx

@@ -93,7 +93,7 @@ export function DefaultDrawer({
                                 .map((view, index) =>
                                     <DrawerNavigationItem
                                         key={`navigation_${index}`}
-                                        icon={<IconForView collectionOrView={view.collection ?? view.view}/>}
+                                        icon={<IconForView collectionOrView={view.collection ?? view.view} size={"small"}/>}
                                         tooltipsOpen={tooltipsOpen}
                                         adminMenuOpen={adminMenuOpen}
                                         drawerOpen={drawerOpen}

package/src/core/EntityEditView.tsx

@@ -299,7 +299,6 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             onUpdate({ entity: updatedEntity });
 
         if (closeAfterSave) {
-            console.log("Closing side dialog")
             sideDialogContext.setBlocked(false);
             sideDialogContext.close(true);
             onClose?.();

package/src/core/SideDialogs.tsx

@@ -94,7 +94,6 @@ function SideDialogView({
     const handleDrawerCloseOk = () => {
         setBlocked(false);
         setDrawerCloseRequested(false);
-        console.log("handleDrawerCloseOk");
         sideDialogsController.close();
         panel?.onClose?.();
     };

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -182,7 +182,7 @@ function FileDropComponent({
             onDropRejected: (fileRejections, event) => {
                 for (const fileRejection of fileRejections) {
                     for (const error of fileRejection.errors) {
-                        console.log("Error uploading file: ", error);
+                        console.error("Error uploading file: ", error);
                         if (error.code === "file-too-large") {
                             snackbarContext.open({
                                 type: "error",

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);