@firecms/collection_editor 3.0.0-alpha.27 → 3.0.0-alpha.29

package/dist/types/collection_editor_controller.d.ts

@@ -1,5 +1,6 @@
 import { CollectionEditorPermissionsBuilder } from "./config_permissions";
 import { EntityCollection, Property } from "@firecms/core";
+import { PersistedCollection } from "./persisted_collection";
 /**
  * Controller to open the collection editor dialog.
  * @category Hooks and utilities
@@ -9,7 +10,7 @@ export interface CollectionEditorController {
         path?: string;
         fullPath?: string;
         parentPathSegments: string[];
-        parentCollection?: EntityCollection<any, any, any>;
+        parentCollection?: EntityCollection;
     }) => void;
     createCollection: (props: {
         initialValues?: {
@@ -18,7 +19,7 @@ export interface CollectionEditorController {
             name?: string;
         };
         parentPathSegments: string[];
-        parentCollection?: EntityCollection<any, any, any>;
+        parentCollection?: PersistedCollection;
         redirect: boolean;
     }) => void;
     editProperty: (props: {
@@ -27,6 +28,7 @@ export interface CollectionEditorController {
         currentPropertiesOrder?: string[];
         editedCollectionPath: string;
         parentPathSegments: string[];
+        collection: PersistedCollection;
     }) => void;
     configPermissions: CollectionEditorPermissionsBuilder;
     rootPathSuggestions?: string[];

package/dist/types/config_controller.d.ts

@@ -11,6 +11,7 @@ export interface CollectionsConfigController {
         [Key: string]: CMSType;
     }>(params: SaveCollectionParams<M>) => Promise<void>;
     saveProperty: (params: SavePropertyParams) => Promise<void>;
+    deleteProperty: (params: DeletePropertyParams) => Promise<void>;
     deleteCollection: (props: DeleteCollectionParams) => Promise<void>;
 }
 export type SaveCollectionParams<M extends Record<string, any>> = {
@@ -27,6 +28,13 @@ export type SavePropertyParams = {
     property: Property;
     parentPathSegments?: string[];
 };
+export type DeletePropertyParams = {
+    path: string;
+    propertyKey: string;
+    namespace?: string;
+    newPropertiesOrder?: string[];
+    parentPathSegments?: string[];
+};
 export type DeleteCollectionParams = {
     path: string;
     parentPathSegments?: string[];

package/dist/types/persisted_collection.d.ts

@@ -1,6 +1,7 @@
 import { EntityCollection, Properties, User } from "@firecms/core";
-export type PersistedCollection<M extends Record<string, any> = any, AdditionalKey extends string = string, UserType extends User = User> = Omit<EntityCollection<M, AdditionalKey, UserType>, "properties" | "subcollections"> & {
+export type PersistedCollection<M extends Record<string, any> = any, UserType extends User = User> = Omit<EntityCollection<M, UserType>, "properties" | "subcollections"> & {
     properties: Properties<M>;
     ownerId: string;
     subcollections?: PersistedCollection<any, any>[];
+    editable?: boolean;
 };

package/dist/useCollectionEditorPlugin.d.ts

@@ -41,4 +41,4 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
  * @param getUser
  * @param collectionInference
  */
-export declare function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>({ collectionConfigController, configPermissions, reservedGroups, extraView, pathSuggestions, getUser, collectionInference, getData }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin;
+export declare function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>({ collectionConfigController, configPermissions, reservedGroups, extraView, pathSuggestions, getUser, collectionInference, getData }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firecms/collection_editor",
-  "version": "3.0.0-alpha.27",
+  "version": "3.0.0-alpha.29",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
@@ -14,8 +14,8 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/data_import": "^3.0.0-alpha.27",
-    "@firecms/schema_inference": "^3.0.0-alpha.27"
+    "@firecms/data_import": "^3.0.0-alpha.29",
+    "@firecms/schema_inference": "^3.0.0-alpha.29"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -76,5 +76,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "deb0ef4491986b9a599919a2cd581f40ac6920c1"
+  "gitHead": "65c1ea189696ea89b29b2416680a1dc541da0b36"
 }

package/src/ConfigControllerProvider.tsx

@@ -16,6 +16,7 @@ import { CollectionEditorController } from "./types/collection_editor_controller
 import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
 import { CollectionInference } from "./types/collection_inference";
 import { PropertyFormDialog } from "./components/collection_editor/PropertyEditView";
+import { PersistedCollection } from "./types/persisted_collection";
 
 export const ConfigControllerContext = React.createContext<CollectionsConfigController>({} as any);
 export const CollectionEditorContext = React.createContext<CollectionEditorController>({} as any);
@@ -111,8 +112,11 @@ export const ConfigControllerProvider = React.memo(
             editedCollectionPath: string,
             fullPath?: string,
             parentPathSegments: string[],
+            collectionEditable: boolean;
         }>();
 
+        console.log("currentPropertyDialog", currentPropertyDialog);
+
         const defaultConfigPermissions: CollectionEditorPermissionsBuilder = useCallback(() => ({
             createCollections: true,
             editCollections: true,
@@ -146,14 +150,14 @@ export const ConfigControllerProvider = React.memo(
                                               editedCollectionPath,
                                               currentPropertiesOrder,
                                               parentPathSegments,
-                                              parentCollection
+                                              collection
                                           }: {
             propertyKey?: string,
             property?: Property,
             currentPropertiesOrder?: string[],
             editedCollectionPath: string,
             parentPathSegments: string[],
-            parentCollection?: EntityCollection
+            collection: PersistedCollection,
         }) => {
             // namespace is all the path until the last dot
             const namespace = propertyKey && propertyKey.includes(".")
@@ -162,6 +166,7 @@ export const ConfigControllerProvider = React.memo(
             const propertyKeyWithoutNamespace = propertyKey && propertyKey.includes(".")
                 ? propertyKey.substring(propertyKey.lastIndexOf(".") + 1)
                 : propertyKey;
+            console.log("edit property", propertyKeyWithoutNamespace, collection)
             setCurrentPropertyDialog({
                 propertyKey: propertyKeyWithoutNamespace,
                 property,
@@ -169,7 +174,7 @@ export const ConfigControllerProvider = React.memo(
                 currentPropertiesOrder,
                 editedCollectionPath,
                 parentPathSegments,
-                parentCollection
+                collectionEditable: collection?.editable ?? false
             });
         }, []);
 
@@ -180,7 +185,7 @@ export const ConfigControllerProvider = React.memo(
                                                         redirect
                                                     }: {
             parentPathSegments: string[],
-            parentCollection?: EntityCollection<any, any, any>
+            parentCollection?: EntityCollection
             initialValues?: {
                 group?: string,
                 path?: string,
@@ -207,6 +212,9 @@ export const ConfigControllerProvider = React.memo(
                 }
             }
 
+        console.log("aaa", getData, currentPropertyDialog?.editedCollectionPath);
+        console.log(currentPropertyDialog)
+
         return (
             <ConfigControllerContext.Provider value={collectionConfigController}>
                 <CollectionEditorContext.Provider
@@ -249,7 +257,13 @@ export const ConfigControllerProvider = React.memo(
                         autoUpdateId={!currentPropertyDialog ? false : !currentPropertyDialog?.propertyKey}
                         autoOpenTypeSelect={!currentPropertyDialog ? false : !currentPropertyDialog?.propertyKey}
                         inArray={false}
-                        getData={getData && currentDialog?.fullPath ? () => getData(currentDialog.fullPath!) : undefined}
+                        collectionEditable={currentPropertyDialog?.collectionEditable ?? false}
+                        getData={getData && currentPropertyDialog?.editedCollectionPath
+                            ? () => {
+                                const resolvedPath = navigation.resolveAliasesFrom(currentPropertyDialog.editedCollectionPath!)
+                                return getData(resolvedPath);
+                            }
+                            : undefined}
                         onPropertyChanged={({
                                                 id,
                                                 property
@@ -276,6 +290,25 @@ export const ConfigControllerProvider = React.memo(
                         }}
                         onPropertyChangedImmediate={false}
                         onDelete={() => {
+                            if (!currentPropertyDialog?.propertyKey) return;
+                            const newPropertiesOrder = currentPropertyDialog?.currentPropertiesOrder?.filter(p => p !== currentPropertyDialog?.propertyKey);
+                            return collectionConfigController.deleteProperty({
+                                path: currentPropertyDialog?.editedCollectionPath,
+                                propertyKey: currentPropertyDialog?.propertyKey,
+                                namespace: currentPropertyDialog?.namespace,
+                                newPropertiesOrder,
+                                parentPathSegments: currentPropertyDialog?.parentPathSegments
+                            })
+                                .then(() => {
+                                    setCurrentPropertyDialog(undefined);
+                                }).catch((e) => {
+                                    console.error(e);
+                                    snackbarController.open({
+                                        type: "error",
+                                        message: "Error deleting property: " + (e.message ?? "Details in the console")
+                                    });
+                                    return false;
+                                });
                         }}
                         onError={() => {
                         }}

package/src/components/CollectionViewHeaderAction.tsx

@@ -1,19 +1,22 @@
-import { IconButton, ResolvedProperty, SettingsIcon, Tooltip } from "@firecms/core";
+import { EntityCollection, IconButton, ResolvedProperty, SettingsIcon, Tooltip } from "@firecms/core";
 import React from "react";
 import { useCollectionEditorController } from "../useCollectionEditorController";
+import { PersistedCollection } from "../types/persisted_collection";
 
 export function CollectionViewHeaderAction({
                                                propertyKey,
                                                onHover,
                                                property,
                                                fullPath,
-                                               parentPathSegments
+                                               parentPathSegments,
+                                               collection
                                            }: {
     property: ResolvedProperty,
     propertyKey: string,
     onHover: boolean,
     fullPath: string,
     parentPathSegments: string[],
+    collection: PersistedCollection;
 }) {
 
     const collectionEditorController = useCollectionEditorController();
@@ -27,7 +30,8 @@ export function CollectionViewHeaderAction({
                         propertyKey,
                         property,
                         editedCollectionPath: fullPath,
-                        parentPathSegments
+                        parentPathSegments,
+                        collection
                     });
                 }}
                 size={"small"}>

package/src/components/PropertyAddColumnComponent.tsx

@@ -1,5 +1,6 @@
 import { AddIcon, EntityCollection, getDefaultPropertiesOrder, Tooltip, useAuthController } from "@firecms/core";
 import { useCollectionEditorController } from "../useCollectionEditorController";
+import { PersistedCollection } from "../types/persisted_collection";
 
 export function PropertyAddColumnComponent({
                                                fullPath,
@@ -8,7 +9,7 @@ export function PropertyAddColumnComponent({
                                            }: {
     fullPath: string,
     parentPathSegments: string[],
-    collection: EntityCollection;
+    collection: PersistedCollection;
 }) {
 
     const authController = useAuthController();
@@ -29,7 +30,8 @@ export function PropertyAddColumnComponent({
                     collectionEditorController.editProperty({
                         editedCollectionPath: fullPath,
                         parentPathSegments,
-                        currentPropertiesOrder: getDefaultPropertiesOrder(collection)
+                        currentPropertiesOrder: getDefaultPropertiesOrder(collection),
+                        collection
                     });
                 }}>
                 <AddIcon color={"inherit"}/>

package/src/components/collection_editor/CollectionEditorDialog.tsx

@@ -285,11 +285,11 @@ export function CollectionEditorDialogInternal<M extends {
 
         if (Object.keys(inferredCollection.properties ?? {}).length > 0) {
             values.properties = inferredCollection.properties as Properties<M>;
-            values.propertiesOrder = inferredCollection.propertiesOrder
+            values.propertiesOrder = inferredCollection.propertiesOrder as Extract<keyof M, string>[];
         }
 
         if (!values.propertiesOrder) {
-            values.propertiesOrder = Object.keys(values.properties);
+            values.propertiesOrder = Object.keys(values.properties) as Extract<keyof M, string>[];
             return values;
         }
 
@@ -392,7 +392,8 @@ export function CollectionEditorDialogInternal<M extends {
 
                 const path = values.path ?? editedCollectionPath;
                 const updatedFullPath = fullPath?.includes("/") ? fullPath?.split("/").slice(0, -1).join("/") + "/" + path : path;
-                const getDataWithPath = updatedFullPath && getData ? () => getData(updatedFullPath) : undefined;
+                const resolvedPath = navigation.resolveAliasesFrom(updatedFullPath);
+                const getDataWithPath = resolvedPath && getData ? () => getData(resolvedPath) : undefined;
 
                 // eslint-disable-next-line react-hooks/rules-of-hooks
                 useEffect(() => {
@@ -430,6 +431,7 @@ export function CollectionEditorDialogInternal<M extends {
                     })
                 };
 
+                const collectionEditable = collection?.editable || isNewCollection;
                 return (
                     <>
                         {!isNewCollection && <Tabs value={currentView}
@@ -476,6 +478,7 @@ export function CollectionEditorDialogInternal<M extends {
 
                             {currentView === "import_data_mapping" && importConfig &&
                                 <CollectionEditorImportMapping importConfig={importConfig}
+                                                               collectionEditable={collectionEditable}
                                                                customFields={customFields}/>}
 
                             {currentView === "import_data_preview" && importConfig &&
@@ -527,6 +530,7 @@ export function CollectionEditorDialogInternal<M extends {
                                     getData={getDataWithPath}
                                     doCollectionInference={doCollectionInference}
                                     customFields={customFields}
+                                    collectionEditable={collectionEditable}
                                     extraIcon={extraView?.icon &&
                                         <IconButton
                                             color={"primary"}

package/src/components/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -11,7 +11,7 @@ import {
     defaultBorderMixin,
     EntityCollection,
     ErrorBoundary,
-    FieldConfig,
+    PropertyConfig,
     isPropertyBuilder,
     makePropertiesEditable,
     Paper,
@@ -40,8 +40,9 @@ type CollectionEditorFormProps = {
     extraIcon: React.ReactNode;
     getUser: (uid: string) => User | null;
     getData?: () => Promise<object[]>;
-    doCollectionInference: (collection: PersistedCollection<any, string>) => Promise<EntityCollection | null> | undefined;
-    customFields: Record<string, FieldConfig>;
+    doCollectionInference: (collection: PersistedCollection) => Promise<EntityCollection | null> | undefined;
+    customFields: Record<string, PropertyConfig>;
+    collectionEditable: boolean;
 };
 
 export function CollectionPropertiesEditorForm({
@@ -55,7 +56,8 @@ export function CollectionPropertiesEditorForm({
                                                    getUser,
                                                    getData,
                                                    doCollectionInference,
-                                                   customFields
+                                                   customFields,
+                                                   collectionEditable
                                                }: CollectionEditorFormProps) {
 
     const {
@@ -354,6 +356,7 @@ export function CollectionPropertiesEditorForm({
                         propertiesOrder={usedPropertiesOrder}
                         onPropertyMove={onPropertyMove}
                         onPropertyRemove={isNewCollection ? deleteProperty : undefined}
+                        collectionEditable={collectionEditable}
                         errors={showErrors ? errors : {}}/>
                 </ErrorBoundary>
 
@@ -392,6 +395,7 @@ export function CollectionPropertiesEditorForm({
                                 initialErrors={initialErrors}
                                 getData={getData}
                                 customFields={customFields}
+                                collectionEditable={collectionEditable}
                             />}
 
                         {!selectedProperty &&
@@ -426,6 +430,7 @@ export function CollectionPropertiesEditorForm({
                 initialErrors={initialErrors}
                 getData={getData}
                 customFields={customFields}
+                collectionEditable={collectionEditable}
                 onOkClicked={asDialog
                     ? closePropertyDialog
                     : undefined
@@ -450,6 +455,7 @@ export function CollectionPropertiesEditorForm({
                 getData={getData}
                 allowDataInference={!isNewCollection}
                 customFields={customFields}
+                collectionEditable={collectionEditable}
                 existingPropertyKeys={values.propertiesOrder as string[]}/>
 
         </>

package/src/components/collection_editor/EnumForm.tsx

@@ -14,7 +14,6 @@ import {
     FormikArrayContainer,
     IconButton,
     ListIcon,
-    LoadingButton,
     Paper,
     SettingsIcon,
     Typography
@@ -132,7 +131,8 @@ function EnumFormFields({
     };
 
     const inferValues = async () => {
-
+        if (!getData)
+            return;
         setInferring(true);
         getData?.().then((data) => {
             if (!data)
@@ -169,12 +169,14 @@ function EnumFormFields({
                     Values
                 </Typography>
                 {allowDataInference &&
-                    <LoadingButton loading={inferring}
-                                   disabled={disabled || inferring}
-                                   variant={"text"} size={"small"} onClick={inferValues}>
+                    <Button loading={inferring}
+                            disabled={disabled || inferring}
+                            variant={"text"}
+                            size={"small"}
+                            onClick={inferValues}>
                         {inferring ? <CircularProgress size={"small"}/> : <AutoAwesomeIcon/>}
                         Infer values from data
-                    </LoadingButton>}
+                    </Button>}
             </div>
 
             <Paper className="p-4 m-1">

package/src/components/collection_editor/PropertyEditView.tsx

@@ -11,7 +11,6 @@ import {
     Dialog,
     DialogActions,
     DialogContent,
-    FieldConfig,
     FieldConfigBadge,
     FieldConfigId,
     getFieldConfig,
@@ -21,6 +20,7 @@ import {
     isPropertyBuilder,
     mergeDeep,
     Property,
+    PropertyConfig, PropertyOrBuilder,
     Select,
     toSnakeCase,
     Typography
@@ -72,7 +72,8 @@ export type PropertyFormProps = {
     allowDataInference: boolean;
     getData?: () => Promise<object[]>;
     getHelpers?: (formikProps: FormikProps<PropertyWithId>) => void;
-    customFields: Record<string, FieldConfig>;
+    customFields: Record<string, PropertyConfig>;
+    collectionEditable: boolean;
 };
 
 export const PropertyForm = React.memo(
@@ -95,7 +96,8 @@ export const PropertyForm = React.memo(
                               allowDataInference,
                               getHelpers,
                               getData,
-                              customFields
+                              customFields,
+                              collectionEditable
                           }: PropertyFormProps) {
 
         const initialValue: PropertyWithId = {
@@ -103,7 +105,8 @@ export const PropertyForm = React.memo(
             name: ""
         } as PropertyWithId;
 
-        const disabled = (property && !editableProperty(property)) ?? false;
+        const disabled = (Boolean(property && !editableProperty(property)) && !collectionEditable);
+        console.log("PropertyForm disabled", disabled)
 
         const lastSubmittedProperty = useRef<OnPropertyChangedParams | undefined>(property ? {
             id: propertyKey,
@@ -139,7 +142,7 @@ export const PropertyForm = React.memo(
                 } = newPropertyWithId;
                 doOnPropertyChanged({
                     id,
-                    property
+                    property: { ...property, editable: property.editable ?? true }
                 });
                 if (!existingProperty)
                     helpers.resetForm({ values: initialValue });
@@ -182,6 +185,7 @@ export const PropertyForm = React.memo(
                     getData={getData}
                     allowDataInference={allowDataInference}
                     customFields={customFields}
+                    collectionEditable={collectionEditable}
                     {...props}/>;
 
             }}
@@ -201,6 +205,7 @@ export function PropertyFormDialog({
                                        onOkClicked,
                                        onPropertyChanged,
                                        getData,
+                                       collectionEditable,
                                        ...formProps
                                    }: PropertyFormProps & {
     open?: boolean;
@@ -224,6 +229,7 @@ export function PropertyFormDialog({
                               onPropertyChanged?.(params);
                               onOkClicked?.();
                           }}
+                          collectionEditable={collectionEditable}
                           onPropertyChangedImmediate={false}
                           getHelpers={getHelpers}
                           getData={getData}
@@ -271,7 +277,8 @@ function PropertyEditView({
                               existingPropertyKeys,
                               getData,
                               allowDataInference,
-                              customFields
+                              customFields,
+                              collectionEditable
                           }: {
     includeIdAndTitle?: boolean;
     existing: boolean;
@@ -287,7 +294,8 @@ function PropertyEditView({
     existingPropertyKeys?: string[];
     getData?: () => Promise<object[]>;
     allowDataInference: boolean;
-    customFields: Record<string, FieldConfig>;
+    customFields: Record<string, PropertyConfig>;
+    collectionEditable: boolean;
 } & FormikProps<PropertyWithId>) {
 
     const [selectOpen, setSelectOpen] = useState(autoOpenTypeSelect);
@@ -297,7 +305,7 @@ function PropertyEditView({
     const allSupportedFields = Object.entries(DEFAULT_FIELD_CONFIGS).concat(Object.entries(customFields));
 
     const displayedWidgets = inArray
-        ? allSupportedFields.filter(([_, fieldConfig]) => !isPropertyBuilder(fieldConfig.property) && fieldConfig.property?.dataType !== "array")
+        ? allSupportedFields.filter(([_, propertyConfig]) => !isPropertyBuilder(propertyConfig.property) && propertyConfig.property?.dataType !== "array")
         : allSupportedFields;
 
     const deferredValues = useDeferredValue(values);
@@ -395,10 +403,12 @@ function PropertyEditView({
     } else if (selectedFieldConfigId === "group") {
         childComponent =
             <MapPropertyField disabled={disabled} getData={getData} allowDataInference={allowDataInference}
+                              collectionEditable={collectionEditable}
                               customFields={customFields}/>;
     } else if (selectedFieldConfigId === "block") {
         childComponent =
             <BlockPropertyField disabled={disabled} getData={getData} allowDataInference={allowDataInference}
+                                collectionEditable={collectionEditable}
                                 customFields={customFields}/>;
     } else if (selectedFieldConfigId === "reference") {
         childComponent =
@@ -421,6 +431,7 @@ function PropertyEditView({
                                  getData={getData}
                                  allowDataInference={allowDataInference}
                                  disabled={disabled}
+                                 collectionEditable={collectionEditable}
                                  customFields={customFields}/>;
     } else if (selectedFieldConfigId === "key_value") {
         childComponent =
@@ -456,11 +467,11 @@ function PropertyEditView({
                                     widget</em>;
                             }
                             const key = value as FieldConfigId;
-                            const fieldConfig = DEFAULT_FIELD_CONFIGS[key] ?? customFields[key];
-                            const baseProperty = fieldConfig.property;
+                            const propertyConfig = DEFAULT_FIELD_CONFIGS[key] ?? customFields[key];
+                            const baseProperty = propertyConfig.property;
                             const baseFieldConfig = baseProperty && !isPropertyBuilder(baseProperty) ? getFieldConfig(baseProperty, customFields) : undefined;
                             const optionDisabled = isPropertyBuilder(baseProperty) || (existing && baseProperty.dataType !== values?.dataType);
-                            const computedFieldConfig = baseFieldConfig ? mergeDeep(baseFieldConfig, fieldConfig) : fieldConfig;
+                            const computedFieldConfig = baseFieldConfig ? mergeDeep(baseFieldConfig, propertyConfig) : propertyConfig;
                             return <div
                                 onClick={(e) => {
                                     if (optionDisabled) {
@@ -472,7 +483,7 @@ function PropertyEditView({
                                     "flex items-center",
                                     optionDisabled ? "w-full pointer-events-none opacity-50" : "")}>
                                 <div className={"mr-8"}>
-                                    <FieldConfigBadge fieldConfig={computedFieldConfig}/>
+                                    <FieldConfigBadge propertyConfig={computedFieldConfig}/>
                                 </div>
                                 <div className={"flex flex-col items-start text-base text-left"}>
                                     <div>{computedFieldConfig.name}</div>
@@ -486,14 +497,14 @@ function PropertyEditView({
                         onValueChange={(value) => {
                             onWidgetSelectChanged(value as FieldConfigId);
                         }}>
-                        {displayedWidgets.map(([key, fieldConfig]) => {
-                            const baseProperty = fieldConfig.property;
+                        {displayedWidgets.map(([key, propertyConfig]) => {
+                            const baseProperty = propertyConfig.property;
                             const optionDisabled = existing && !isPropertyBuilder(baseProperty) && baseProperty.dataType !== values?.dataType;
                             return <PropertySelectItem
                                 key={key}
                                 value={key}
                                 optionDisabled={optionDisabled}
-                                fieldConfig={fieldConfig}
+                                propertyConfig={propertyConfig}
                                 existing={existing}/>;
                         })}
                     </Select>

package/src/components/collection_editor/PropertyFieldPreview.tsx

@@ -36,7 +36,7 @@ export function PropertyFieldPreview({
 
     const { fields } = useFireCMSContext();
 
-    const fieldConfig = getFieldConfig(property, fields);
+    const propertyConfig = getFieldConfig(property, fields);
     const disabled = !editableProperty(property);
 
     const borderColorClass = hasError
@@ -48,7 +48,7 @@ export function PropertyFieldPreview({
             onClick={onClick}
             className="flex flex-row w-full cursor-pointer">
             <div className={"m-4"}>
-                <FieldConfigBadge fieldConfig={fieldConfig}/>
+                <FieldConfigBadge propertyConfig={propertyConfig}/>
             </div>
             <Paper
                 className={cn(
@@ -81,7 +81,7 @@ export function PropertyFieldPreview({
                                         variant={includeName ? "body2" : "subtitle1"}
                                         component="span"
                                         color="secondary">
-                                {fieldConfig?.name}
+                                {propertyConfig?.name}
                             </Typography>
                         </ErrorBoundary>
                         <ErrorBoundary>
@@ -122,15 +122,15 @@ export function NonEditablePropertyPreview({
 
     const { fields } = useFireCMSContext();
 
-    const fieldConfig = !isPropertyBuilder(property) && property ? getFieldConfig(property, fields) : undefined;
+    const propertyConfig = !isPropertyBuilder(property) && property ? getFieldConfig(property, fields) : undefined;
 
     return (
         <div
             onClick={onClick}
             className="flex flex-row w-full cursor-pointer">
             <div className={"relative m-4"}>
-                {fieldConfig && <FieldConfigBadge fieldConfig={fieldConfig}/>}
-                {!fieldConfig && <div
+                {propertyConfig && <FieldConfigBadge propertyConfig={propertyConfig}/>}
+                {!propertyConfig && <div
                     className={"h-8 w-8 p-1 rounded-full shadow text-white bg-gray-500"}>
                     <FunctionsIcon color={"inherit"} size={"medium"}/>
                 </div>}
@@ -157,11 +157,11 @@ export function NonEditablePropertyPreview({
                     </Typography>
 
                     <div className="flex flex-row items-center">
-                        {fieldConfig && <Typography className="flex-grow pr-2"
+                        {propertyConfig && <Typography className="flex-grow pr-2"
                                                     variant={"body2"}
                                                     component="span"
                                                     color="secondary">
-                            {fieldConfig?.name}
+                            {propertyConfig?.name}
                         </Typography>}
 
                         {property && !isPropertyBuilder(property) && <ErrorBoundary>