@firecms/collection_editor 3.0.0-beta.7 → 3.0.0-beta.9

package/dist/types/collection_editor_controller.d.ts

@@ -1,5 +1,6 @@
+import React from "react";
 import { CollectionEditorPermissionsBuilder } from "./config_permissions";
-import { Property } from "@firecms/core";
+import { Entity, Property } from "@firecms/core";
 import { PersistedCollection } from "./persisted_collection";
 /**
  * Controller to open the collection editor dialog.
@@ -11,6 +12,7 @@ export interface CollectionEditorController {
         fullPath?: string;
         parentCollectionIds: string[];
         parentCollection?: PersistedCollection;
+        existingEntities?: Entity<any>[];
     }) => void;
     createCollection: (props: {
         initialValues?: {
@@ -30,7 +32,17 @@ export interface CollectionEditorController {
         editedCollectionId: string;
         parentCollectionIds: string[];
         collection: PersistedCollection;
+        existingEntities: Entity<any>[];
     }) => void;
     configPermissions: CollectionEditorPermissionsBuilder;
     getPathSuggestions?: (path: string) => Promise<string[]>;
+    components?: {
+        /**
+         * Custom component to render the database field
+         */
+        DatabaseField?: React.ComponentType<{
+            databaseId?: string;
+            onDatabaseIdUpdate: (databaseId: string) => void;
+        }>;
+    };
 }

package/dist/ui/CollectionViewHeaderAction.d.ts

@@ -1,10 +1,11 @@
-import { ResolvedProperty } from "@firecms/core";
+import { EntityTableController, ResolvedProperty } from "@firecms/core";
 import { PersistedCollection } from "../types/persisted_collection";
-export declare function CollectionViewHeaderAction({ propertyKey, onHover, property, fullPath, parentCollectionIds, collection }: {
+export declare function CollectionViewHeaderAction({ propertyKey, onHover, property, fullPath, parentCollectionIds, collection, tableController }: {
     property: ResolvedProperty;
     propertyKey: string;
     onHover: boolean;
     fullPath: string;
     parentCollectionIds: string[];
     collection: PersistedCollection;
+    tableController: EntityTableController;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui/PropertyAddColumnComponent.d.ts

@@ -1,6 +1,8 @@
+import { EntityTableController } from "@firecms/core";
 import { PersistedCollection } from "../types/persisted_collection";
-export declare function PropertyAddColumnComponent({ fullPath, parentCollectionIds, collection }: {
+export declare function PropertyAddColumnComponent({ fullPath, parentCollectionIds, collection, tableController }: {
     fullPath: string;
     parentCollectionIds: string[];
     collection: PersistedCollection;
+    tableController: EntityTableController;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/ui/collection_editor/CollectionEditorDialog.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { EntityCollection, User } from "@firecms/core";
+import { Entity, EntityCollection, User } from "@firecms/core";
 import { CollectionsConfigController } from "../../types/config_controller";
 import { CollectionInference } from "../../types/collection_inference";
 import { PersistedCollection } from "../../types/persisted_collection";
@@ -28,6 +28,7 @@ export interface CollectionEditorDialogProps {
     getUser?: (uid: string) => User | null;
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
     parentCollection?: PersistedCollection;
+    existingEntities?: Entity<any>[];
 }
 export declare function CollectionEditorDialog(props: CollectionEditorDialogProps): import("react/jsx-runtime").JSX.Element;
 export declare function CollectionEditor(props: CollectionEditorDialogProps & {

package/dist/ui/collection_editor/properties/MarkdownPropertyField.d.ts

@@ -0,0 +1,4 @@
+export declare function MarkdownPropertyField({ disabled, showErrors }: {
+    disabled: boolean;
+    showErrors: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/collection_editor/properties/StringPropertyField.d.ts

@@ -1,5 +1,5 @@
 export declare function StringPropertyField({ widgetId, disabled, showErrors }: {
-    widgetId: "text_field" | "multiline" | "markdown" | "email";
+    widgetId: "text_field" | "multiline" | "email";
     disabled: boolean;
     showErrors: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/useCollectionEditorPlugin.d.ts

@@ -30,6 +30,15 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
     getUser?: (uid: string) => UserType | null;
     onAnalyticsEvent?: (event: string, params?: object) => void;
+    components?: {
+        /**
+         * Custom component to render the database field
+         */
+        DatabaseField?: React.ComponentType<{
+            databaseId?: string;
+            onDatabaseIdUpdate: (databaseId: string) => void;
+        }>;
+    };
 }
 /**
  * Use this hook to initialise the Collection Editor plugin.
@@ -38,9 +47,9 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
  * @param configPermissions
  * @param reservedGroups
  * @param extraView
- * @param getPathsSuggestions
+ * @param getData
  * @param getUser
  * @param collectionInference
  */
-export declare function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>({ collectionConfigController, configPermissions, reservedGroups, extraView, getPathSuggestions, getUser, collectionInference, getData, onAnalyticsEvent }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection>;
+export declare function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>({ collectionConfigController, configPermissions, reservedGroups, extraView, getPathSuggestions, getUser, collectionInference, getData, onAnalyticsEvent, components }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection>;
 export declare function IntroWidget({}: {}): import("react/jsx-runtime").JSX.Element | null;

package/package.json

@@ -1,24 +1,26 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-beta.7",
+  "version": "3.0.0-beta.9",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/data_import_export": "^3.0.0-beta.7",
-    "@firecms/formex": "^3.0.0-beta.7",
-    "@firecms/schema_inference": "^3.0.0-beta.7",
-    "@firecms/ui": "^3.0.0-beta.7",
+    "@firecms/data_export": "^3.0.0-beta.9",
+    "@firecms/data_import": "^3.0.0-beta.9",
+    "@firecms/data_import_export": "^3.0.0-beta.9",
+    "@firecms/formex": "^3.0.0-beta.9",
+    "@firecms/schema_inference": "^3.0.0-beta.9",
+    "@firecms/ui": "^3.0.0-beta.9",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.3.1"
   },
   "peerDependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router": "^6.22.0",
-    "react-router-dom": "^6.22.0"
+    "react-router": "^6.25.1",
+    "react-router-dom": "^6.25.1"
   },
   "exports": {
     ".": {
@@ -34,12 +36,6 @@
     "build": "vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json",
     "clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -56,23 +52,13 @@
     "@jest/globals": "^29.7.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.11.0",
-    "@typescript-eslint/parser": "^7.11.0",
-    "@vitejs/plugin-react": "^4.3.0",
-    "eslint": "^8.57.0",
-    "eslint-config-standard": "^17.1.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-n": "^16.6.2",
-    "eslint-plugin-promise": "^6.2.0",
-    "eslint-plugin-react": "^7.34.2",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "@vitejs/plugin-react": "^4.3.1",
     "jest": "^29.7.0",
-    "react-router": "^6.23.1",
-    "react-router-dom": "^6.23.1",
-    "ts-jest": "^29.1.4",
-    "typescript": "^5.4.5",
-    "vite": "^5.2.12",
-    "vite-plugin-fonts": "^0.7.0"
+    "react-router": "^6.25.1",
+    "react-router-dom": "^6.25.1",
+    "ts-jest": "^29.2.3",
+    "typescript": "^5.5.4",
+    "vite": "^5.3.4"
   },
   "files": [
     "dist",
@@ -81,5 +67,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b1f5dbd89d66bd75e8d214a4a6c40e07e371a1d1"
+  "gitHead": "a2fffa74049d185e674aae9f70b462f011edd1c2"
 }

package/src/ConfigControllerProvider.tsx

@@ -3,6 +3,7 @@ import equal from "react-fast-compare"
 
 import { CollectionsConfigController } from "./types/config_controller";
 import {
+    Entity,
     Property,
     useCustomizationController,
     useNavigationController,
@@ -56,6 +57,13 @@ export interface ConfigControllerProviderProps {
 
     onAnalyticsEvent?: (event: string, params?: object) => void;
 
+    components?: {
+        /**
+         * Custom component to render the database field
+         */
+        DatabaseField?: React.ComponentType<{ databaseId?: string, onDatabaseIdUpdate: (databaseId:string) => void }>;
+    };
+
 }
 
 export const ConfigControllerProvider = React.memo(
@@ -69,7 +77,8 @@ export const ConfigControllerProvider = React.memo(
                                           getPathSuggestions,
                                           getUser,
                                           getData,
-                                          onAnalyticsEvent
+                                          onAnalyticsEvent,
+                                          components
                                       }: PropsWithChildren<ConfigControllerProviderProps>) {
 
         const navigation = useNavigationController();
@@ -88,7 +97,8 @@ export const ConfigControllerProvider = React.memo(
                 group?: string,
                 name?: string
             },
-            redirect: boolean
+            redirect: boolean,
+            existingEntities?: Entity<any>[]
         }>();
 
         const [currentPropertyDialog, setCurrentPropertyDialog] = React.useState<{
@@ -101,6 +111,7 @@ export const ConfigControllerProvider = React.memo(
             fullPath?: string,
             parentCollectionIds: string[],
             collectionEditable: boolean;
+            existingEntities?: Entity<any>[]
         }>();
 
         const defaultConfigPermissions: CollectionEditorPermissionsBuilder = useCallback(() => ({
@@ -113,12 +124,14 @@ export const ConfigControllerProvider = React.memo(
                                     id,
                                     fullPath,
                                     parentCollectionIds,
-                                    parentCollection
+                                    parentCollection,
+                                    existingEntities
                                 }: {
             id?: string,
             fullPath?: string,
             parentCollectionIds: string[],
-            parentCollection?: PersistedCollection
+            parentCollection?: PersistedCollection,
+            existingEntities?: Entity<any>[]
         }) => {
             console.debug("Edit collection", id, fullPath, parentCollectionIds, parentCollection);
             onAnalyticsEvent?.("edit_collection", {
@@ -131,7 +144,8 @@ export const ConfigControllerProvider = React.memo(
                 parentCollectionIds,
                 isNewCollection: false,
                 parentCollection,
-                redirect: false
+                redirect: false,
+                existingEntities
             });
         };
 
@@ -141,7 +155,8 @@ export const ConfigControllerProvider = React.memo(
                                   editedCollectionId,
                                   currentPropertiesOrder,
                                   parentCollectionIds,
-                                  collection
+                                  collection,
+                                  existingEntities
                               }: {
             propertyKey?: string,
             property?: Property,
@@ -149,6 +164,7 @@ export const ConfigControllerProvider = React.memo(
             editedCollectionId: string,
             parentCollectionIds: string[],
             collection: PersistedCollection,
+            existingEntities?: Entity<any>[]
         }) => {
             console.debug("Edit property", propertyKey, property, editedCollectionId, currentPropertiesOrder, parentCollectionIds, collection);
             onAnalyticsEvent?.("edit_property", {
@@ -169,7 +185,8 @@ export const ConfigControllerProvider = React.memo(
                 currentPropertiesOrder,
                 editedCollectionId,
                 parentCollectionIds,
-                collectionEditable: collection?.editable ?? false
+                collectionEditable: collection?.editable ?? false,
+                existingEntities
             });
         };
 
@@ -221,7 +238,8 @@ export const ConfigControllerProvider = React.memo(
                         createCollection,
                         editProperty,
                         configPermissions: configPermissions ?? defaultConfigPermissions,
-                        getPathSuggestions
+                        getPathSuggestions,
+                        components
                     }}>
 
                     {children}

package/src/types/collection_editor_controller.tsx

@@ -1,5 +1,6 @@
+import React from "react";
 import { CollectionEditorPermissionsBuilder } from "./config_permissions";
-import { Property } from "@firecms/core";
+import { Entity, Property } from "@firecms/core";
 import { PersistedCollection } from "./persisted_collection";
 
 /**
@@ -12,7 +13,8 @@ export interface CollectionEditorController {
         id?: string,
         fullPath?: string,
         parentCollectionIds: string[],
-        parentCollection?: PersistedCollection
+        parentCollection?: PersistedCollection,
+        existingEntities?: Entity<any>[]
     }) => void;
 
     createCollection: (props: {
@@ -33,11 +35,19 @@ export interface CollectionEditorController {
         currentPropertiesOrder?: string[],
         editedCollectionId: string,
         parentCollectionIds: string[],
-        collection: PersistedCollection
+        collection: PersistedCollection,
+        existingEntities: Entity<any>[]
     }) => void;
 
     configPermissions: CollectionEditorPermissionsBuilder;
 
     getPathSuggestions?: (path: string) => Promise<string[]>;
 
+    components?: {
+        /**
+         * Custom component to render the database field
+         */
+        DatabaseField?: React.ComponentType<{ databaseId?: string, onDatabaseIdUpdate: (databaseId: string) => void }>;
+    };
+
 }

package/src/ui/CollectionViewHeaderAction.tsx

@@ -1,4 +1,4 @@
-import { ResolvedProperty } from "@firecms/core";
+import { EntityTableController, ResolvedProperty } from "@firecms/core";
 import { IconButton, SettingsIcon, Tooltip } from "@firecms/ui";
 import React from "react";
 import { useCollectionEditorController } from "../useCollectionEditorController";
@@ -10,7 +10,8 @@ export function CollectionViewHeaderAction({
                                                property,
                                                fullPath,
                                                parentCollectionIds,
-                                               collection
+                                               collection,
+                                               tableController
                                            }: {
     property: ResolvedProperty,
     propertyKey: string,
@@ -18,12 +19,15 @@ export function CollectionViewHeaderAction({
     fullPath: string,
     parentCollectionIds: string[],
     collection: PersistedCollection;
+    tableController: EntityTableController;
 }) {
 
     const collectionEditorController = useCollectionEditorController();
 
     return (
-        <Tooltip title={"Edit"}>
+        <Tooltip
+            asChild={true}
+            title={"Edit"}>
             <IconButton
                 className={onHover ? "bg-white dark:bg-gray-950" : "hidden"}
                 onClick={() => {
@@ -32,7 +36,8 @@ export function CollectionViewHeaderAction({
                         property,
                         editedCollectionId: collection.id,
                         parentCollectionIds,
-                        collection
+                        collection,
+                        existingEntities: tableController.data ?? []
                     });
                 }}
                 size={"small"}>

package/src/ui/EditorCollectionAction.tsx

@@ -1,16 +1,7 @@
-import equal from "react-fast-compare"
-
-import {
-    CollectionActionsProps,
-    mergeDeep,
-    useAuthController,
-    useNavigationController,
-    useSnackbarController
-} from "@firecms/core";
-import { Button, IconButton, SaveIcon, SettingsIcon, Tooltip, UndoIcon, } from "@firecms/ui";
+import { CollectionActionsProps, useAuthController, useNavigationController } from "@firecms/core";
+import { IconButton, SettingsIcon, Tooltip, } from "@firecms/ui";
 
 import { useCollectionEditorController } from "../useCollectionEditorController";
-import { useCollectionsConfigController } from "../useCollectionsConfigController";
 import { PersistedCollection } from "../types/persisted_collection";
 
 export function EditorCollectionAction({
@@ -34,12 +25,19 @@ export function EditorCollectionAction({
         : true;
 
     const editorButton = <Tooltip
+        asChild={true}
         title={canEditCollection ? "Edit collection" : "You don't have permissions to edit this collection"}>
         <IconButton
             color={"primary"}
             disabled={!canEditCollection}
             onClick={canEditCollection
-                ? () => collectionEditorController?.editCollection({ id: collection.id, fullPath, parentCollectionIds, parentCollection: parentCollection as PersistedCollection })
+                ? () => collectionEditorController?.editCollection({
+                    id: collection.id,
+                    fullPath,
+                    parentCollectionIds,
+                    parentCollection: parentCollection as PersistedCollection,
+                    existingEntities: tableController?.data ?? []
+                })
                 : undefined}>
             <SettingsIcon/>
         </IconButton>

package/src/ui/EditorCollectionActionStart.tsx

@@ -31,6 +31,7 @@ export function EditorCollectionActionStart({
         !equal(getObjectOrNull(tableController.sortBy), getObjectOrNull(collection.initialSort))) {
         saveDefaultFilterButton = <>
             <Tooltip
+                asChild={true}
                 title={tableController.sortBy || tableController.filterValues ? "Save default filter and sort" : "Clear default filter and sort"}>
                 <Button
                     color={"primary"}

package/src/ui/HomePageEditorCollectionAction.tsx

@@ -25,7 +25,10 @@ export function HomePageEditorCollectionAction({
     });
 
     const onEditCollectionClicked = () => {
-        collectionEditorController?.editCollection({ id: collection.id, parentCollectionIds: [] });
+        collectionEditorController?.editCollection({
+            id: collection.id,
+            parentCollectionIds: []
+        });
     };
 
     const [deleteRequested, setDeleteRequested] = useState(false);
@@ -49,11 +52,13 @@ export function HomePageEditorCollectionAction({
                         <MoreVertIcon size={"small"}/>
                     </IconButton>}
                 >
-                    <MenuItem onClick={(event) => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        setDeleteRequested(true);
-                    }}>
+                    <MenuItem
+                        dense={true}
+                        onClick={(event) => {
+                            event.preventDefault();
+                            event.stopPropagation();
+                            setDeleteRequested(true);
+                        }}>
                         <DeleteIcon/>
                         Delete
                     </MenuItem>

package/src/ui/PropertyAddColumnComponent.tsx

@@ -1,4 +1,4 @@
-import { getDefaultPropertiesOrder, useAuthController } from "@firecms/core";
+import { EntityTableController, getDefaultPropertiesOrder, useAuthController } from "@firecms/core";
 import { AddIcon, Tooltip } from "@firecms/ui";
 import { useCollectionEditorController } from "../useCollectionEditorController";
 import { PersistedCollection } from "../types/persisted_collection";
@@ -6,11 +6,13 @@ import { PersistedCollection } from "../types/persisted_collection";
 export function PropertyAddColumnComponent({
                                                fullPath,
                                                parentCollectionIds,
-                                               collection
+                                               collection,
+                                               tableController
                                            }: {
     fullPath: string,
     parentCollectionIds: string[],
     collection: PersistedCollection;
+    tableController: EntityTableController;
 }) {
 
     const authController = useAuthController();
@@ -23,7 +25,9 @@ export function PropertyAddColumnComponent({
         : true;
 
     return (
-        <Tooltip title={canEditCollection ? "Add new property" : "You don't have permission to add new properties"}>
+        <Tooltip
+            asChild={true}
+            title={canEditCollection ? "Add new property" : "You don't have permission to add new properties"}>
             <div
                 className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-gray-100 bg-opacity-40 hover:bg-gray-100 dark:bg-gray-950 dark:bg-opacity-40 dark:hover:bg-gray-950"}
                 // className={onHover ? "bg-white dark:bg-gray-950" : undefined}
@@ -32,7 +36,8 @@ export function PropertyAddColumnComponent({
                         editedCollectionId: collection.id,
                         parentCollectionIds,
                         currentPropertiesOrder: getDefaultPropertiesOrder(collection),
-                        collection
+                        collection,
+                        existingEntities: tableController.data
                     });
                 }}>
                 <AddIcon color={"inherit"}/>

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -22,6 +22,7 @@ import {
 } from "@firecms/ui";
 
 import { Field, getIn, useFormex } from "@firecms/formex";
+import { useCollectionEditorController } from "../../useCollectionEditorController";
 
 export function CollectionDetailsForm({
                                           isNewCollection,
@@ -52,9 +53,15 @@ export function CollectionDetailsForm({
         submitCount
     } = useFormex<EntityCollection>();
 
+    const collectionEditor = useCollectionEditorController();
+
     const [iconDialogOpen, setIconDialogOpen] = useState(false);
     const [advancedPanelExpanded, setAdvancedPanelExpanded] = useState(false);
 
+    const updateDatabaseId = (databaseId: string) => {
+        setFieldValue("databaseId", databaseId ?? undefined);
+    }
+
     const updateName = (name: string) => {
         setFieldValue("name", name);
 
@@ -81,6 +88,8 @@ export function CollectionDetailsForm({
         }
     }, [errors.id]);
 
+    const DatabaseField = collectionEditor.components?.DatabaseField ?? DefaultDatabaseField;
+
     const collectionIcon = <IconForView collectionOrView={values}/>;
 
     const groupOptions = groups?.filter((group) => !reservedGroups?.includes(group));
@@ -113,11 +122,15 @@ export function CollectionDetailsForm({
 
                 <div>
                     <div
-                        className="flex flex-row py-2 pt-3 items-center">
+                        className="flex flex-row gap-2 py-2 pt-3 items-center">
                         <Typography variant={!isNewCollection ? "h5" : "h4"} className={"flex-grow"}>
                             {isNewCollection ? "New collection" : `${values?.name} collection`}
                         </Typography>
-                        <Tooltip title={"Change icon"}>
+                        <DatabaseField databaseId={values.databaseId}
+                                       onDatabaseIdUpdate={updateDatabaseId}/>
+
+                        <Tooltip title={"Change icon"}
+                                 asChild={true}>
                             <IconButton
                                 shape={"square"}
                                 onClick={() => setIconDialogOpen(true)}>
@@ -143,7 +156,7 @@ export function CollectionDetailsForm({
                             required
                             error={showErrors && Boolean(errors.name)}/>
                         <FieldCaption error={touched.name && Boolean(errors.name)}>
-                            {touched.name && Boolean(errors.name) ? errors.name : "Name of in this collection, usually a plural name (e.g. Products)"}
+                            {touched.name && Boolean(errors.name) ? errors.name : "Name of this collection, usually a plural name (e.g. Products)"}
                         </FieldCaption>
                     </div>
 
@@ -191,7 +204,7 @@ export function CollectionDetailsForm({
                             })}
                         </Autocomplete>
                         <FieldCaption>
-                            {showErrors && Boolean(errors.group) ? errors.group : "Group of the collection"}
+                            {showErrors && Boolean(errors.group) ? errors.group : "Group in the home page"}
                         </FieldCaption>
                     </div>}
 
@@ -393,3 +406,20 @@ export function CollectionDetailsForm({
         </div>
     );
 }
+
+function DefaultDatabaseField({
+                                  databaseId,
+                                  onDatabaseIdUpdate
+                              }: { databaseId?: string, onDatabaseIdUpdate: (databaseId: string) => void }) {
+
+    return <Tooltip title={"Database ID"}
+                    side={"top"}
+                    align={"start"}>
+        <TextField size={"smallest"}
+                   invisible={true}
+                   inputClassName={"text-end"}
+                   value={databaseId ?? ""}
+                   onChange={(e: any) => onDatabaseIdUpdate(e.target.value)}
+                   placeholder={"(default)"}></TextField>
+    </Tooltip>
+}

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { useEffect, useRef, useState } from "react";
 import {
     CircularProgressCenter,
+    Entity,
     EntityCollection,
     ErrorView,
     isPropertyBuilder,
@@ -79,6 +80,7 @@ export interface CollectionEditorDialogProps {
     getUser?: (uid: string) => User | null;
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
     parentCollection?: PersistedCollection;
+    existingEntities?: Entity<any>[];
 }
 
 export function CollectionEditorDialog(props: CollectionEditorDialogProps) {
@@ -244,7 +246,8 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                                                      setCollection,
                                                                      initialValues,
                                                                      propertyConfigs,
-                                                                     groups
+                                                                     groups,
+                                                                     existingEntities
                                                                  }: CollectionEditorDialogProps & {
                                                                      handleCancel: () => void,
                                                                      setFormDirty: (dirty: boolean) => void,
@@ -481,7 +484,14 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
     const parentPaths = !pathError && parentCollectionIds ? navigation.convertIdsToPaths(parentCollectionIds) : undefined;
     const resolvedPath = !pathError ? navigation.resolveAliasesFrom(updatedFullPath) : undefined;
-    const getDataWithPath = resolvedPath && getData ? () => getData(resolvedPath, parentPaths ?? []) : undefined;
+    const getDataWithPath = resolvedPath && getData ? async () => {
+        const data = await getData(resolvedPath, parentPaths ?? []);
+        if (existingEntities) {
+            const existingData = existingEntities.map(e => e.values);
+            data.push(...existingData);
+        }
+        return data;
+    } : undefined;
 
     useEffect(() => {
         setFormDirty(dirty);

package/src/ui/collection_editor/CollectionEditorWelcomeView.tsx

@@ -185,7 +185,8 @@ export function TemplateButton({
 }) {
 
     return (
-        <Tooltip title={subtitle}>
+        <Tooltip title={subtitle}
+                 asChild={true}>
             <Card
                 onClick={onClick}
                 className={cls(