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

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@firecms/core",
     "type": "module",
-    "version": "3.0.0-canary.126",
+    "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.126",
-        "@firecms/formex": "^3.0.0-canary.126",
-        "@firecms/ui": "^3.0.0-canary.126",
+        "@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": "122cb2b218a404444b4580e8f561f671c8b785a9",
+    "gitHead": "0c46cee41d666c60817c9f4f0447f78fcfa07ddf",
     "publishConfig": {
         "access": "public"
     },

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