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

package/src/components/collection_editor/PropertySelectItem.tsx

@@ -1,13 +1,13 @@
-import { cn, FieldConfig, FieldConfigBadge, SelectItem, Typography } from "@firecms/core";
+import { cn, PropertyConfig, FieldConfigBadge, SelectItem, Typography } from "@firecms/core";
 
 export interface PropertySelectItemProps {
     value: string;
     optionDisabled: boolean;
-    fieldConfig: FieldConfig;
+    propertyConfig: PropertyConfig;
     existing: boolean;
 }
 
-export function PropertySelectItem({ value, optionDisabled, fieldConfig, existing }: PropertySelectItemProps) {
+export function PropertySelectItem({ value, optionDisabled, propertyConfig, existing }: PropertySelectItemProps) {
     return <SelectItem value={value}
                        disabled={optionDisabled}
                        className={"flex flex-row items-center"}>
@@ -16,14 +16,14 @@ export function PropertySelectItem({ value, optionDisabled, fieldConfig, existin
                 "flex flex-row items-center text-base min-h-[52px]",
                 optionDisabled ? "w-full" : "")}>
             <div className={"mr-8"}>
-                <FieldConfigBadge fieldConfig={fieldConfig}/>
+                <FieldConfigBadge propertyConfig={propertyConfig}/>
             </div>
             <div>
-                <div>{fieldConfig.name}</div>
+                <div>{propertyConfig.name}</div>
                 <Typography variant={"caption"}
                             color={"disabled"}
                             className={"max-w-sm"}>
-                    {existing && optionDisabled ? "You can only switch to widgets that use the same data type" : fieldConfig.description}
+                    {existing && optionDisabled ? "You can only switch to widgets that use the same data type" : propertyConfig.description}
                 </Typography>
             </div>
         </div>

package/src/components/collection_editor/PropertyTree.tsx

@@ -5,8 +5,10 @@ import {
     defaultBorderMixin,
     DragHandleIcon,
     ErrorBoundary,
-    IconButton, isPropertyBuilder,
-    PropertiesOrBuilders, PropertyOrBuilder,
+    IconButton,
+    isPropertyBuilder,
+    PropertiesOrBuilders,
+    PropertyOrBuilder,
     RemoveIcon,
     Tooltip
 } from "@firecms/core";
@@ -30,7 +32,8 @@ export function PropertyTree<M extends {
        onPropertyMove,
        onPropertyRemove,
        className,
-       inferredPropertyKeys
+       inferredPropertyKeys,
+       collectionEditable
    }: {
     namespace?: string;
     selectedPropertyKey?: string;
@@ -43,6 +46,7 @@ export function PropertyTree<M extends {
     onPropertyRemove?: (propertyKey: string, namespace?: string) => void;
     className?: string;
     inferredPropertyKeys?: string[];
+    collectionEditable: boolean;
 }) {
 
     const propertiesOrder = propertiesOrderProp ?? Object.keys(properties);
@@ -102,6 +106,7 @@ export function PropertyTree<M extends {
                                                             onPropertyRemove={onPropertyRemove}
                                                             onPropertyClick={snapshot.isDragging ? undefined : onPropertyClick}
                                                             selectedPropertyKey={selectedPropertyKey}
+                                                            collectionEditable={collectionEditable}
                                                         />
                                                     </ErrorBoundary>
                                                 );
@@ -131,7 +136,8 @@ export function PropertyTreeEntry({
                                       onPropertyClick,
                                       onPropertyMove,
                                       onPropertyRemove,
-                                      inferredPropertyKeys
+                                      inferredPropertyKeys,
+                                      collectionEditable
                                   }: {
     propertyKey: string;
     namespace?: string;
@@ -144,6 +150,7 @@ export function PropertyTreeEntry({
     onPropertyMove?: (propertiesOrder: string[], namespace?: string) => void;
     onPropertyRemove?: (propertyKey: string, namespace?: string) => void;
     inferredPropertyKeys?: string[];
+    collectionEditable: boolean;
 }) {
 
     const isPropertyInferred = inferredPropertyKeys?.includes(namespace ? `${namespace}.${propertyKey}` : propertyKey);
@@ -161,13 +168,15 @@ export function PropertyTreeEntry({
                 errors={errors}
                 onPropertyClick={onPropertyClick}
                 onPropertyMove={onPropertyMove}
-                onPropertyRemove={onPropertyRemove}/>
+                onPropertyRemove={onPropertyRemove}
+                collectionEditable={collectionEditable}
+            />
         }
     }
 
     const hasError = fullId ? getIn(errors, idToPropertiesPath(fullId)) : false;
     const selected = selectedPropertyKey === fullId;
-    const editable = propertyOrBuilder && editableProperty(propertyOrBuilder);
+    const editable = propertyOrBuilder && ((collectionEditable && !isPropertyBuilder(propertyOrBuilder)) || editableProperty(propertyOrBuilder));
 
     return (
         <div

package/src/components/collection_editor/import/CollectionEditorImportMapping.tsx

@@ -8,12 +8,12 @@ import { getIn, useFormikContext } from "formik";
 
 import {
     Container,
-    FieldConfig,
     FieldConfigBadge,
     getFieldConfig,
     getFieldId,
     Properties,
     Property,
+    PropertyConfig,
     Select,
     Tooltip,
     Typography,
@@ -30,11 +30,13 @@ import { buildPropertyFromData } from "@firecms/schema_inference";
 
 export function CollectionEditorImportMapping({
                                                   importConfig,
-                                                  customFields
+                                                  customFields,
+                                                  collectionEditable
                                               }:
                                                   {
                                                       importConfig: ImportConfig,
-                                                      customFields: Record<string, FieldConfig>
+                                                      customFields: Record<string, PropertyConfig>,
+                                                      collectionEditable: boolean
                                                   }) {
 
     const {
@@ -192,6 +194,7 @@ export function CollectionEditorImportMapping({
                 autoUpdateId={false}
                 onPropertyChanged={onPropertyChanged}
                 allowDataInference={false}
+                collectionEditable={collectionEditable}
                 onOkClicked={() => {
                     setSelectedProperty(undefined);
                 }}
@@ -223,7 +226,7 @@ function PropertySelect({
                             previousId,
                             namespace
                         }: OnPropertyChangedParams) => void,
-    customFields: Record<string, FieldConfig>,
+    customFields: Record<string, PropertyConfig>,
     disabled?: boolean
 }) {
 
@@ -247,7 +250,7 @@ function PropertySelect({
             position={"item-aligned"}
             renderValue={(value) => {
                 if (!widget) return null;
-                return <FieldConfigBadge fieldConfig={widget}/>
+                return <FieldConfigBadge propertyConfig={widget}/>
             }}
             onValueChange={(newSelectedWidgetId) => {
                 const newProperty = updatePropertyFromWidget(property, newSelectedWidgetId, customFields)
@@ -265,7 +268,7 @@ function PropertySelect({
                     key={key}
                     value={key}
                     optionDisabled={false}
-                    fieldConfig={widget}
+                    propertyConfig={widget}
                     existing={false}/>;
             })
             }

package/src/components/collection_editor/properties/BlockPropertyField.tsx

@@ -1,15 +1,16 @@
 import React, { useCallback, useState } from "react";
-import { AddIcon, ArrayProperty, Button, FieldConfig, Paper, Property, Typography } from "@firecms/core";
+import { AddIcon, ArrayProperty, Button, PropertyConfig, Paper, Property, Typography } from "@firecms/core";
 import { getIn, useFormikContext } from "formik";
 import { PropertyFormDialog } from "../PropertyEditView";
 import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath } from "../util";
 import { PropertyTree } from "../PropertyTree";
 
-export function BlockPropertyField({ disabled, getData, allowDataInference, customFields }: {
+export function BlockPropertyField({ disabled, getData, allowDataInference, customFields, collectionEditable }: {
     disabled: boolean;
     getData?: () => Promise<object[]>;
     allowDataInference: boolean;
-    customFields: Record<string, FieldConfig>
+    customFields: Record<string, PropertyConfig>,
+    collectionEditable: boolean;
 }) {
 
     const {
@@ -81,6 +82,7 @@ export function BlockPropertyField({ disabled, getData, allowDataInference, cust
                         properties={values.oneOf?.properties ?? {}}
                         propertiesOrder={values.oneOf?.propertiesOrder}
                         errors={{}}
+                        collectionEditable={collectionEditable}
                         onPropertyClick={disabled
                             ? undefined
                             : (propertyKey, namespace) => {
@@ -116,6 +118,7 @@ export function BlockPropertyField({ disabled, getData, allowDataInference, cust
                     setSelectedPropertyKey(undefined);
                     setSelectedPropertyNamespace(undefined);
                 }}
+                collectionEditable={collectionEditable}
                 onDelete={deleteProperty}
                 propertyKey={selectedPropertyKey}
                 propertyNamespace={selectedPropertyNamespace}

package/src/components/collection_editor/properties/MapPropertyField.tsx

@@ -3,7 +3,7 @@ import {
     AddIcon,
     BooleanSwitchWithLabel,
     Button,
-    FieldConfig,
+    PropertyConfig,
     MapProperty,
     Paper,
     Property,
@@ -15,11 +15,12 @@ import { PropertyTree } from "../PropertyTree";
 import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath, namespaceToPropertiesPath } from "../util";
 import { FieldHelperView } from "./FieldHelperView";
 
-export function MapPropertyField({ disabled, getData, allowDataInference, customFields }: {
+export function MapPropertyField({ disabled, getData, allowDataInference, customFields, collectionEditable }: {
     disabled: boolean;
     getData?: () => Promise<object[]>;
     allowDataInference: boolean;
-    customFields: Record<string, FieldConfig>
+    customFields: Record<string, PropertyConfig>,
+    collectionEditable: boolean;
 }) {
 
     const {
@@ -94,6 +95,7 @@ export function MapPropertyField({ disabled, getData, allowDataInference, custom
                         properties={values.properties ?? {}}
                         propertiesOrder={propertiesOrder}
                         errors={{}}
+                        collectionEditable={collectionEditable}
                         onPropertyClick={(propertyKey, namespace) => {
                             setSelectedPropertyKey(propertyKey);
                             setSelectedPropertyNamespace(namespace);
@@ -127,6 +129,7 @@ export function MapPropertyField({ disabled, getData, allowDataInference, custom
                 forceShowErrors={false}
                 open={propertyDialogOpen}
                 allowDataInference={allowDataInference}
+                collectionEditable={collectionEditable}
                 onCancel={() => {
                     setPropertyDialogOpen(false);
                     setSelectedPropertyKey(undefined);

package/src/components/collection_editor/properties/RepeatPropertyField.tsx

@@ -2,10 +2,10 @@ import React, { useCallback, useState } from "react";
 import {
     ArrayProperty,
     Button,
-    FieldConfig,
     getFieldConfig,
     Paper,
     Property,
+    PropertyConfig,
     Typography,
     useFireCMSContext
 } from "@firecms/core";
@@ -21,14 +21,16 @@ export function RepeatPropertyField({
                                         disabled,
                                         getData,
                                         allowDataInference,
-                                        customFields
+                                        customFields,
+                                        collectionEditable
                                     }: {
     showErrors: boolean,
     existing: boolean,
     disabled: boolean,
     getData?: () => Promise<object[]>;
     allowDataInference: boolean;
-    customFields: Record<string, FieldConfig>
+    customFields: Record<string, PropertyConfig>,
+    collectionEditable: boolean;
 }) {
 
     const { fields } = useFireCMSContext();
@@ -96,6 +98,7 @@ export function RepeatPropertyField({
                                 onPropertyChanged={onPropertyChanged}
                                 forceShowErrors={showErrors}
                                 customFields={customFields}
+                                collectionEditable={collectionEditable}
                             />
                         </Paper>
                     )}

package/src/components/collection_editor/utils/update_property_for_widget.ts

@@ -1,8 +1,8 @@
-import { buildProperty, FieldConfig, mergeDeep, Property } from "@firecms/core";
+import { buildProperty, PropertyConfig, mergeDeep, Property } from "@firecms/core";
 
 export function updatePropertyFromWidget(propertyData: any,
                                          selectedWidgetId: string | undefined,
-                                         customFields: Record<string, FieldConfig>): Property {
+                                         customFields: Record<string, PropertyConfig>): Property {
 
     let updatedProperty;
     if (selectedWidgetId === "text_field") {
@@ -10,7 +10,7 @@ export function updatePropertyFromWidget(propertyData: any,
             propertyData,
             buildProperty({
                 dataType: "string",
-                fieldConfig: "text_field",
+                propertyConfig: "text_field",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
                 storage: undefined,
                 multiline: undefined,
@@ -25,7 +25,7 @@ export function updatePropertyFromWidget(propertyData: any,
             propertyData,
             buildProperty({
                 dataType: "string",
-                fieldConfig: "multiline",
+                propertyConfig: "multiline",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
                 multiline: true,
                 storage: undefined,
@@ -40,7 +40,7 @@ export function updatePropertyFromWidget(propertyData: any,
             propertyData,
             buildProperty({
                 dataType: "string",
-                fieldConfig: "markdown",
+                propertyConfig: "markdown",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
                 storage: undefined,
                 multiline: undefined,
@@ -54,7 +54,7 @@ export function updatePropertyFromWidget(propertyData: any,
             propertyData,
             buildProperty({
                 dataType: "string",
-                fieldConfig: "url",
+                propertyConfig: "url",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
                 storage: undefined,
                 multiline: undefined,
@@ -69,7 +69,7 @@ export function updatePropertyFromWidget(propertyData: any,
             propertyData,
             buildProperty({
                 dataType: "string",
-                fieldConfig: "email",
+                propertyConfig: "email",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
                 storage: undefined,
                 multiline: undefined,
@@ -84,7 +84,7 @@ export function updatePropertyFromWidget(propertyData: any,
             propertyData,
             buildProperty({
                 dataType: "string",
-                fieldConfig: "select",
+                propertyConfig: "select",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
                 storage: undefined,
                 multiline: undefined,
@@ -99,7 +99,7 @@ export function updatePropertyFromWidget(propertyData: any,
             propertyData,
             buildProperty({
                 dataType: "array",
-                fieldConfig: "multi_select",
+                propertyConfig: "multi_select",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
                 of: {
                     dataType: "string",
@@ -112,7 +112,7 @@ export function updatePropertyFromWidget(propertyData: any,
             propertyData,
             buildProperty({
                 dataType: "number",
-                fieldConfig: "number_input",
+                propertyConfig: "number_input",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
                 enumValues: undefined
             })
@@ -122,7 +122,7 @@ export function updatePropertyFromWidget(propertyData: any,
             propertyData,
             buildProperty({
                 dataType: "number",
-                fieldConfig: "number_select",
+                propertyConfig: "number_select",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
                 enumValues: propertyData.enumValues ?? []
             })
@@ -132,7 +132,7 @@ export function updatePropertyFromWidget(propertyData: any,
             propertyData,
             buildProperty({
                 dataType: "array",
-                fieldConfig: "multi_number_select",
+                propertyConfig: "multi_number_select",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
                 of: {
                     dataType: "number",
@@ -145,7 +145,7 @@ export function updatePropertyFromWidget(propertyData: any,
             propertyData,
             buildProperty({
                 dataType: "string",
-                fieldConfig: "file_upload",
+                propertyConfig: "file_upload",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
                 storage: {
                     storagePath: "/"
@@ -157,7 +157,7 @@ export function updatePropertyFromWidget(propertyData: any,
             propertyData,
             buildProperty({
                 dataType: "array",
-                fieldConfig: "multi_file_upload",
+                propertyConfig: "multi_file_upload",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
                 of: {
                     dataType: "string",
@@ -172,7 +172,7 @@ export function updatePropertyFromWidget(propertyData: any,
             propertyData,
             buildProperty({
                 dataType: "map",
-                fieldConfig: "group",
+                propertyConfig: "group",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
                 keyValue: false,
                 properties: propertyData.properties ?? {}
@@ -183,7 +183,7 @@ export function updatePropertyFromWidget(propertyData: any,
             propertyData,
             buildProperty({
                 dataType: "map",
-                fieldConfig: "key_value",
+                propertyConfig: "key_value",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
                 keyValue: true,
                 properties: undefined
@@ -194,7 +194,7 @@ export function updatePropertyFromWidget(propertyData: any,
             propertyData,
             buildProperty({
                 dataType: "reference",
-                fieldConfig: "reference",
+                propertyConfig: "reference",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true
             })
         );
@@ -203,7 +203,7 @@ export function updatePropertyFromWidget(propertyData: any,
             propertyData,
             buildProperty({
                 dataType: "array",
-                fieldConfig: "multi_references",
+                propertyConfig: "multi_references",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
                 of: {
                     dataType: "reference"
@@ -215,7 +215,7 @@ export function updatePropertyFromWidget(propertyData: any,
             propertyData,
             buildProperty({
                 dataType: "boolean",
-                fieldConfig: "switch",
+                propertyConfig: "switch",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true
             })
         );
@@ -224,7 +224,7 @@ export function updatePropertyFromWidget(propertyData: any,
             propertyData,
             buildProperty({
                 dataType: "date",
-                fieldConfig: "date_time",
+                propertyConfig: "date_time",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
                 mode: "date_time"
             })
@@ -234,7 +234,7 @@ export function updatePropertyFromWidget(propertyData: any,
             propertyData,
             buildProperty({
                 dataType: "array",
-                fieldConfig: "repeat",
+                propertyConfig: "repeat",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true
             })
         );
@@ -243,7 +243,7 @@ export function updatePropertyFromWidget(propertyData: any,
             propertyData,
             buildProperty({
                 dataType: "array",
-                fieldConfig: "block",
+                propertyConfig: "block",
                 editable: propertyData.editable !== undefined ? propertyData.editable : true,
                 oneOf: {
                     properties: {}
@@ -251,7 +251,7 @@ export function updatePropertyFromWidget(propertyData: any,
             })
         );
     } else if (selectedWidgetId && customFields[selectedWidgetId]) {
-        updatedProperty = { ...customFields[selectedWidgetId].property, fieldConfig: selectedWidgetId };
+        updatedProperty = { ...customFields[selectedWidgetId].property, propertyConfig: selectedWidgetId };
     }
 
     return updatedProperty;

package/src/types/collection_editor_controller.tsx

@@ -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.
@@ -11,7 +12,7 @@ export interface CollectionEditorController {
         path?: string,
         fullPath?: string,
         parentPathSegments: string[],
-        parentCollection?: EntityCollection<any, any, any>
+        parentCollection?: EntityCollection
     }) => void;
 
     createCollection: (props: {
@@ -21,7 +22,7 @@ export interface CollectionEditorController {
             name?: string
         },
         parentPathSegments: string[],
-        parentCollection?: EntityCollection<any, any, any>,
+        parentCollection?: PersistedCollection,
         redirect: boolean
     }) => void;
 
@@ -31,6 +32,7 @@ export interface CollectionEditorController {
         currentPropertiesOrder?: string[],
         editedCollectionPath: string,
         parentPathSegments: string[],
+        collection: PersistedCollection
     }) => void;
 
     configPermissions: CollectionEditorPermissionsBuilder;

package/src/types/config_controller.tsx

@@ -14,6 +14,7 @@ export interface CollectionsConfigController {
     saveCollection: <M extends { [Key: string]: CMSType }>(params: SaveCollectionParams<M>) => Promise<void>;
 
     saveProperty: (params: SavePropertyParams) => Promise<void>;
+    deleteProperty: (params: DeletePropertyParams) => Promise<void>;
 
     deleteCollection: (props: DeleteCollectionParams) => Promise<void>;
 
@@ -35,6 +36,14 @@ export type SavePropertyParams = {
     parentPathSegments?: string[]
 }
 
+export type DeletePropertyParams = {
+    path: string,
+    propertyKey: string,
+    namespace?: string,
+    newPropertiesOrder?: string[],
+    parentPathSegments?: string[]
+}
+
 export type DeleteCollectionParams = {
     path: string,
     parentPathSegments?: string[]

package/src/types/persisted_collection.ts

@@ -1,8 +1,9 @@
 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/src/useCollectionEditorPlugin.tsx

@@ -1,11 +1,5 @@
 import React, { useCallback } from "react";
-import {
-    EntityCollection,
-    FireCMSPlugin,
-    makePropertiesEditable,
-    makePropertiesNonEditable,
-    User
-} from "@firecms/core";
+import { EntityCollection, FireCMSPlugin, makePropertiesEditable, User } from "@firecms/core";
 import { ConfigControllerProvider } from "./ConfigControllerProvider";
 import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
 import { EditorCollectionAction } from "./components/EditorCollectionAction";
@@ -76,7 +70,7 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
      getUser,
      collectionInference,
      getData
- }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin {
+ }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection> {
 
     const injectCollections = useCallback(
         (collections: EntityCollection[]) => {
@@ -86,6 +80,7 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
             };
             const editableCollections = collectionConfigController.collections ?? [];
             editableCollections.forEach(markAsEditable);
+            console.debug("Injecting collections", { editableCollections, collections });
             return joinCollectionLists(editableCollections, collections);
         },
         [collectionConfigController.collections]);