@firecms/collection_editor 3.0.0-alpha.21 → 3.0.0-alpha.25

package/src/components/collection_editor/PropertyEditView.tsx

@@ -1,7 +1,7 @@
 import React, { useDeferredValue, useEffect, useRef, useState } from "react";
 import equal from "react-fast-compare"
 
-import { Form, Formik, FormikErrors, FormikProps, getIn } from "formik";
+import { Formik, FormikErrors, FormikProps, getIn } from "formik";
 import {
     Button,
     cn,
@@ -14,10 +14,13 @@ import {
     FieldConfig,
     FieldConfigBadge,
     FieldConfigId,
+    getFieldConfig,
     getFieldId,
     IconButton,
     InfoLabel,
-    isPropertyBuilder, Property,
+    isPropertyBuilder,
+    mergeDeep,
+    Property,
     Select,
     toSnakeCase,
     Typography
@@ -52,7 +55,7 @@ export type OnPropertyChangedParams = {
 
 export type PropertyFormProps = {
     includeIdAndName?: boolean;
-    existing: boolean;
+    existingProperty: boolean;
     autoUpdateId?: boolean;
     autoOpenTypeSelect: boolean;
     inArray: boolean;
@@ -76,7 +79,7 @@ export const PropertyForm = React.memo(
     function PropertyForm({
                               includeIdAndName = true,
                               autoOpenTypeSelect,
-                              existing,
+                              existingProperty,
                               autoUpdateId,
                               inArray,
                               propertyKey,
@@ -138,7 +141,7 @@ export const PropertyForm = React.memo(
                     id,
                     property
                 });
-                if (!existing)
+                if (!existingProperty)
                     helpers.resetForm({ values: initialValue });
             }}
             // validate={(values) => {
@@ -170,7 +173,7 @@ export const PropertyForm = React.memo(
                     propertyNamespace={propertyNamespace}
                     onError={onError}
                     showErrors={forceShowErrors || props.submitCount > 0}
-                    existing={existing}
+                    existing={existingProperty}
                     autoUpdateId={autoUpdateId}
                     inArray={inArray}
                     autoOpenTypeSelect={autoOpenTypeSelect}
@@ -189,7 +192,7 @@ export const PropertyForm = React.memo(
         a.includeIdAndName === b.includeIdAndName &&
         a.autoOpenTypeSelect === b.autoOpenTypeSelect &&
         a.autoUpdateId === b.autoUpdateId &&
-        a.existing === b.existing
+        a.existingProperty === b.existingProperty
 );
 
 export function PropertyFormDialog({
@@ -214,38 +217,36 @@ export function PropertyFormDialog({
         maxWidth={"xl"}
         fullWidth={true}
     >
-        <Form noValidate style={{ height: "100%" }}>
-
-            <DialogContent>
-                <PropertyForm {...formProps}
-                              onPropertyChanged={(params) => {
-                                  onPropertyChanged?.(params);
-                                  onOkClicked?.();
-                              }}
-                              onPropertyChangedImmediate={false}
-                              getHelpers={getHelpers}
-                              getData={getData}
-                />
-            </DialogContent>
-
-            <DialogActions>
-
-                {onCancel && <Button
-                    variant={"text"}
-                    onClick={() => {
-                        onCancel();
-                        helpersRef.current?.resetForm();
-                    }}>
-                    Cancel
-                </Button>}
-
-                <Button variant="outlined"
-                        color="primary"
-                        onClick={() => helpersRef.current?.submitForm()}>
-                    Ok
-                </Button>
-            </DialogActions>
-        </Form>
+
+        <DialogContent>
+            <PropertyForm {...formProps}
+                          onPropertyChanged={(params) => {
+                              onPropertyChanged?.(params);
+                              onOkClicked?.();
+                          }}
+                          onPropertyChangedImmediate={false}
+                          getHelpers={getHelpers}
+                          getData={getData}
+            />
+        </DialogContent>
+
+        <DialogActions>
+
+            {onCancel && <Button
+                variant={"text"}
+                onClick={() => {
+                    onCancel();
+                    helpersRef.current?.resetForm();
+                }}>
+                Cancel
+            </Button>}
+
+            <Button variant="outlined"
+                    color="primary"
+                    onClick={() => helpersRef.current?.submitForm()}>
+                Ok
+            </Button>
+        </DialogActions>
     </Dialog>;
 
 }
@@ -289,10 +290,11 @@ function PropertyEditView({
     customFields: Record<string, FieldConfig>;
 } & FormikProps<PropertyWithId>) {
 
+    const [selectOpen, setSelectOpen] = useState(autoOpenTypeSelect);
     const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
     const [selectedFieldConfigId, setSelectedFieldConfigId] = useState<string | undefined>(values?.dataType ? getFieldId(values) : undefined);
 
-    const allSupportedFields = Object.entries(customFields).concat(Object.entries(DEFAULT_FIELD_CONFIGS));
+    const allSupportedFields = Object.entries(DEFAULT_FIELD_CONFIGS).concat(Object.entries(customFields));
 
     const displayedWidgets = inArray
         ? allSupportedFields.filter(([_, fieldConfig]) => !isPropertyBuilder(fieldConfig.property) && fieldConfig.property?.dataType !== "array")
@@ -392,10 +394,12 @@ function PropertyEditView({
         childComponent = <NumberPropertyField disabled={disabled}/>;
     } else if (selectedFieldConfigId === "group") {
         childComponent =
-            <MapPropertyField disabled={disabled} getData={getData} allowDataInference={allowDataInference} customFields={customFields}/>;
+            <MapPropertyField disabled={disabled} getData={getData} allowDataInference={allowDataInference}
+                              customFields={customFields}/>;
     } else if (selectedFieldConfigId === "block") {
         childComponent =
-            <BlockPropertyField disabled={disabled} getData={getData} allowDataInference={allowDataInference} customFields={customFields}/>;
+            <BlockPropertyField disabled={disabled} getData={getData} allowDataInference={allowDataInference}
+                                customFields={customFields}/>;
     } else if (selectedFieldConfigId === "reference") {
         childComponent =
             <ReferencePropertyField showErrors={showErrors}
@@ -436,62 +440,73 @@ function PropertyEditView({
             </InfoLabel>}
 
             <div className="flex mt-2 justify-between">
-                <Select
-                    className={"w-full"}
-                    error={Boolean(selectedWidgetError)}
-                    value={selectedFieldConfigId ?? ""}
-                    placeholder={"Select a property widget"}
-                    open={autoOpenTypeSelect}
-                    position={"item-aligned"}
-                    disabled={disabled}
-                    renderValue={(value) => {
-                        if (!value) {
-                            return <em>Select a property
-                                widget</em>;
-                        }
-                        const key = value as FieldConfigId;
-                        const fieldConfig = DEFAULT_FIELD_CONFIGS[key] ?? customFields[key];
-                        const baseProperty = fieldConfig.property;
-                        const optionDisabled = isPropertyBuilder(baseProperty) || (existing && baseProperty.dataType !== values?.dataType);
-                        return <div
-                            onClick={(e) => {
-                                if (optionDisabled) {
-                                    e.stopPropagation();
-                                    e.preventDefault();
-                                }
-                            }}
-                            className={cn(
-                                "flex items-center",
-                                optionDisabled ? "w-full pointer-events-none opacity-50" : "")}>
-                            <div className={"mr-8"}>
-                                <FieldConfigBadge fieldConfig={fieldConfig}/>
-                            </div>
-                            <div className={"flex flex-col items-start text-base text-left"}>
-                                <div>{fieldConfig.name}</div>
-                                <Typography variant={"caption"}
-                                            color={"disabled"}>
-                                    {optionDisabled ? "You can only switch to widgets that use the same data type" : fieldConfig.description}
-                                </Typography>
+                <div className={"w-full flex flex-col gap-2"}>
+                    <Select
+                        className={"w-full"}
+                        error={Boolean(selectedWidgetError)}
+                        value={selectedFieldConfigId ?? ""}
+                        placeholder={"Select a property widget"}
+                        open={selectOpen}
+                        onOpenChange={setSelectOpen}
+                        position={"item-aligned"}
+                        disabled={disabled}
+                        renderValue={(value) => {
+                            if (!value) {
+                                return <em>Select a property
+                                    widget</em>;
+                            }
+                            const key = value as FieldConfigId;
+                            const fieldConfig = DEFAULT_FIELD_CONFIGS[key] ?? customFields[key];
+                            const baseProperty = fieldConfig.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;
+                            return <div
+                                onClick={(e) => {
+                                    if (optionDisabled) {
+                                        e.stopPropagation();
+                                        e.preventDefault();
+                                    }
+                                }}
+                                className={cn(
+                                    "flex items-center",
+                                    optionDisabled ? "w-full pointer-events-none opacity-50" : "")}>
+                                <div className={"mr-8"}>
+                                    <FieldConfigBadge fieldConfig={computedFieldConfig}/>
+                                </div>
+                                <div className={"flex flex-col items-start text-base text-left"}>
+                                    <div>{computedFieldConfig.name}</div>
+                                    <Typography variant={"caption"}
+                                                color={"disabled"}>
+                                        {optionDisabled ? "You can only switch to widgets that use the same data type" : computedFieldConfig.description}
+                                    </Typography>
+                                </div>
                             </div>
-                        </div>
-                    }}
-                    onValueChange={(value) => {
-                        onWidgetSelectChanged(value as FieldConfigId);
-                    }}>
-                    {displayedWidgets.map(([key, fieldConfig]) => {
-                        const baseProperty = fieldConfig.property;
-                        const optionDisabled = existing && !isPropertyBuilder(baseProperty) && baseProperty.dataType !== values?.dataType;
-                        return <PropertySelectItem
-                            key={key}
-                            value={key}
-                            optionDisabled={optionDisabled}
-                            fieldConfig={fieldConfig}
-                            existing={existing}/>;
-                    })}
-                </Select>
-
-                {selectedWidgetError &&
-                    <Typography variant="caption" color={"error"}>Required</Typography>}
+                        }}
+                        onValueChange={(value) => {
+                            onWidgetSelectChanged(value as FieldConfigId);
+                        }}>
+                        {displayedWidgets.map(([key, fieldConfig]) => {
+                            const baseProperty = fieldConfig.property;
+                            const optionDisabled = existing && !isPropertyBuilder(baseProperty) && baseProperty.dataType !== values?.dataType;
+                            return <PropertySelectItem
+                                key={key}
+                                value={key}
+                                optionDisabled={optionDisabled}
+                                fieldConfig={fieldConfig}
+                                existing={existing}/>;
+                        })}
+                    </Select>
+
+                    {selectedWidgetError &&
+                        <Typography variant="caption"
+                                    className={"ml-3.5"}
+                                    color={"error"}>Required</Typography>}
+
+                    {/*<Typography variant="caption" className={"ml-3.5"}>Define your own custom properties and*/}
+                    {/*    components</Typography>*/}
+
+                </div>
 
                 {onDelete && values?.id &&
                     <IconButton

package/src/components/collection_editor/SubcollectionsEditTab.tsx

@@ -8,6 +8,7 @@ import {
     EntityCollection,
     EntityCustomView,
     IconButton,
+    InfoLabel,
     Paper,
     resolveEntityView,
     Table,
@@ -128,7 +129,7 @@ export function SubcollectionsEditTab({
                             Custom views
                         </Typography>
 
-                        {totalEntityViews > 0 &&
+                        {totalEntityViews > 0 && <>
                             <Paper className={"flex flex-col gap-4 p-2 w-full"}>
                                 <Table>
                                     <TableBody>
@@ -164,14 +165,23 @@ export function SubcollectionsEditTab({
                                                         {view.name}
                                                     </Typography>
                                                     <Typography variant={"caption"} className={"flex-grow"}>
-                                                        This view is defined in code with key <code>{view.key}</code>
+                                                        This view is defined in code with
+                                                        key <code>{view.key}</code>
                                                     </Typography>
                                                 </TableCell>
                                             </TableRow>
                                         ))}
                                     </TableBody>
                                 </Table>
-                            </Paper>}
+                            </Paper>
+
+                        </>}
+
+                        {totalEntityViews === 0 &&
+                            <InfoLabel>
+                                COMING SOON: You can define your own custom views by uploading it with the CLI
+                            </InfoLabel>
+                        }
 
                         <Button
                             onClick={() => {
@@ -181,6 +191,7 @@ export function SubcollectionsEditTab({
                             startIcon={<AddIcon/>}>
                             Add custom entity view
                         </Button>
+
                     </div>
 
                 </div>

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

@@ -199,7 +199,7 @@ export function CollectionEditorImportMapping({
                     setSelectedProperty(undefined);
                 }}
                 autoOpenTypeSelect={false}
-                existing={false}
+                existingProperty={false}
                 customFields={customFields}/>
 
             <div style={{ height: "52px" }}/>

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

@@ -120,7 +120,7 @@ export function BlockPropertyField({ disabled, getData, allowDataInference, cust
                 propertyKey={selectedPropertyKey}
                 propertyNamespace={selectedPropertyNamespace}
                 property={selectedProperty}
-                existing={Boolean(selectedPropertyKey)}
+                existingProperty={Boolean(selectedPropertyKey)}
                 autoUpdateId={!selectedPropertyKey}
                 autoOpenTypeSelect={!selectedPropertyKey}
                 onPropertyChanged={onPropertyCreated}

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

@@ -42,7 +42,6 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
                         inputRef={ref}
                         name={name}
                         as={DebouncedTextField}
-                        invisible={!isNewProperty}
                         style={{ fontSize: 20 }}
                         validate={validateName}
                         placeholder={"Field name"}

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

@@ -142,7 +142,7 @@ export function MapPropertyField({ disabled, getData, allowDataInference, custom
                 propertyKey={selectedPropertyKey}
                 propertyNamespace={selectedPropertyNamespace}
                 property={selectedProperty}
-                existing={Boolean(selectedPropertyKey)}
+                existingProperty={Boolean(selectedPropertyKey)}
                 autoUpdateId={!selectedPropertyKey}
                 autoOpenTypeSelect={!selectedPropertyKey}
                 onPropertyChanged={onPropertyCreated}

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

@@ -85,7 +85,7 @@ export function RepeatPropertyField({
                             <PropertyFormDialog
                                 inArray={true}
                                 open={propertyDialogOpen}
-                                existing={existing}
+                                existingProperty={existing}
                                 getData={getData}
                                 autoUpdateId={!existing}
                                 autoOpenTypeSelect={!existing}

package/src/index.ts

@@ -31,3 +31,4 @@ export type {
 } from "./types/collection_inference";
 
 export { MissingReferenceWidget } from "./components/MissingReferenceWidget";
+export * from "./components/collection_editor/util";

package/src/types/collection_editor_controller.tsx

@@ -1,5 +1,5 @@
 import { CollectionEditorPermissionsBuilder } from "./config_permissions";
-import { EntityCollection } from "@firecms/core";
+import { EntityCollection, Property } from "@firecms/core";
 
 /**
  * Controller to open the collection editor dialog.
@@ -21,7 +21,16 @@ export interface CollectionEditorController {
             name?: string
         },
         parentPathSegments: string[],
-        parentCollection?: EntityCollection<any, any, any>
+        parentCollection?: EntityCollection<any, any, any>,
+        redirect: boolean
+    }) => void;
+
+    editProperty: (props: {
+        propertyKey?: string,
+        property?: Property,
+        currentPropertiesOrder?: string[],
+        editedCollectionPath: string,
+        parentPathSegments: string[],
     }) => void;
 
     configPermissions: CollectionEditorPermissionsBuilder;

package/src/types/config_controller.tsx

@@ -1,4 +1,4 @@
-import { CMSType, EntityCollection } from "@firecms/core";
+import { CMSType, Property } from "@firecms/core";
 import { PersistedCollection } from "./persisted_collection";
 
 /**
@@ -11,7 +11,9 @@ export interface CollectionsConfigController {
 
     collections?: PersistedCollection[];
 
-    saveCollection: <M extends { [Key: string]: CMSType }>(params:SaveCollectionParams<M>) => Promise<void>;
+    saveCollection: <M extends { [Key: string]: CMSType }>(params: SaveCollectionParams<M>) => Promise<void>;
+
+    saveProperty: (params: SavePropertyParams) => Promise<void>;
 
     deleteCollection: (props: DeleteCollectionParams) => Promise<void>;
 
@@ -24,6 +26,15 @@ export type SaveCollectionParams<M extends Record<string, any>> = {
     parentPathSegments?: string[]
 }
 
+export type SavePropertyParams = {
+    path: string,
+    propertyKey: string,
+    namespace?: string,
+    newPropertiesOrder?: string[],
+    property: Property,
+    parentPathSegments?: string[]
+}
+
 export type DeleteCollectionParams = {
     path: string,
     parentPathSegments?: string[]

package/src/types/persisted_collection.ts

@@ -1,7 +1,8 @@
 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"> & {
+    = Omit<EntityCollection<M, AdditionalKey, UserType>, "properties" | "subcollections"> & {
     properties: Properties<M>;
     ownerId: string;
+    subcollections?: PersistedCollection<any, any>[];
 }

package/src/useCollectionEditorPlugin.tsx

@@ -1,5 +1,11 @@
 import React, { useCallback } from "react";
-import { EntityCollection, FireCMSPlugin, User } from "@firecms/core";
+import {
+    EntityCollection,
+    FireCMSPlugin,
+    makePropertiesEditable,
+    makePropertiesNonEditable,
+    User
+} from "@firecms/core";
 import { ConfigControllerProvider } from "./ConfigControllerProvider";
 import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
 import { EditorCollectionAction } from "./components/EditorCollectionAction";
@@ -10,6 +16,8 @@ import { CollectionInference } from "./types/collection_inference";
 import { CollectionsConfigController } from "./types/config_controller";
 import { RootCollectionSuggestions } from "./components/RootCollectionSuggestions";
 import { joinCollectionLists } from "./utils/join_collections";
+import { CollectionViewHeaderAction } from "./components/CollectionViewHeaderAction";
+import { PropertyAddColumnComponent } from "./components/PropertyAddColumnComponent";
 
 export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, UserType extends User = User> {
 
@@ -71,7 +79,15 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
  }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin {
 
     const injectCollections = useCallback(
-        (collections: EntityCollection[]) => joinCollectionLists(collectionConfigController.collections ?? [], collections),
+        (collections: EntityCollection[]) => {
+            const markAsEditable = (c: PersistedCollection) => {
+                makePropertiesEditable(c.properties);
+                c.subcollections?.forEach(markAsEditable);
+            };
+            const editableCollections = collectionConfigController.collections ?? [];
+            editableCollections.forEach(markAsEditable);
+            return joinCollectionLists(editableCollections, collections);
+        },
         [collectionConfigController.collections]);
 
     return {
@@ -98,6 +114,10 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
             additionalChildrenStart: <RootCollectionSuggestions/>,
             CollectionActions: HomePageEditorCollectionAction,
             AdditionalCards: NewCollectionCard,
+        },
+        collectionView: {
+            HeaderAction: CollectionViewHeaderAction,
+            AddColumnComponent: PropertyAddColumnComponent
         }
     };
 }

package/src/utils/join_collections.ts

@@ -1,86 +1,49 @@
 import {
     EntityCollection,
-    isPropertyBuilder, MapProperty,
+    isPropertyBuilder,
+    MapProperty,
     mergeDeep,
     PropertiesOrBuilders,
-    Property, PropertyOrBuilder,
+    Property,
+    PropertyOrBuilder,
     sortProperties
 } from "@firecms/core";
-import { PersistedCollection } from "../types/persisted_collection";
 
 /**
  *
  * @param storedCollections
  * @param codedCollections
  */
-export function joinCollectionLists(storedCollections: PersistedCollection[], codedCollections: EntityCollection[] | undefined): EntityCollection[] {
-    const resolvedFetchedCollections: PersistedCollection[] = storedCollections.map(c => ({
-        ...c,
-        editable: true,
-        deletable: true
-    }));
+export function joinCollectionLists(storedCollections: EntityCollection[], codedCollections: EntityCollection[] | undefined): EntityCollection[] {
 
     // merge collections that are in both lists
     const updatedCollections = (codedCollections ?? [])
         .map((codedCollection) => {
-            const storedCollection = resolvedFetchedCollections?.find((collection) => {
+            const storedCollection = storedCollections?.find((collection) => {
                 return collection.path === codedCollection.path || (collection.alias && codedCollection.alias && collection.alias === codedCollection.alias);
             });
             if (!storedCollection) {
-                return {
-                    ...codedCollection,
-                    properties: markPropertiesAsNonEditable(codedCollection.properties as PropertiesOrBuilders),
-                    deletable: false
-                };
+                return codedCollection;
             } else {
-                Object.values(storedCollection.properties).forEach((property) => {
-                    property.editable = true
-                });
-                const mergedCollection = mergeCollections(storedCollection, codedCollection);
-                return { ...mergedCollection, deletable: false };
+                return mergeCollection(storedCollection, codedCollection);
             }
         });
 
     // fetched collections that are not in the base collections
-    const resultStoredCollections = resolvedFetchedCollections
+    const resultStoredCollections = storedCollections
         .filter((col) => !updatedCollections.map(c => c.path).includes(col.path) || !updatedCollections.map(c => c.alias).includes(col.alias));
 
     return [...updatedCollections, ...resultStoredCollections];
 }
 
-function markPropertiesAsNonEditable(properties: PropertiesOrBuilders): PropertiesOrBuilders {
-    return Object.entries(properties).reduce((acc, [key, property]) => {
-        if (!isPropertyBuilder(property) && property.dataType === "map" && property.properties) {
-            const updated = { ...property, properties: markPropertiesAsNonEditable(property.properties as PropertiesOrBuilders) };
-            acc[key] = updated;
-        }
-        if (isPropertyBuilder(property)) {
-            acc[key] = property;
-        } else {
-            acc[key] = { ...property, editable: false };
-        }
-        return acc;
-    }, {} as PropertiesOrBuilders);
-
-}
-
 /**
  *
  * @param target
  * @param source
  */
-export function mergeCollections(target: EntityCollection, source: EntityCollection): EntityCollection {
-    const subcollectionsMerged = target.subcollections?.map((targetSubcollection) => {
-        const modifiedCollection =
-            source.subcollections?.find((sourceSubcollection) => sourceSubcollection.path === targetSubcollection.path) ??
-            source.subcollections?.find((sourceSubcollection) => sourceSubcollection.alias === targetSubcollection.alias);
+export function mergeCollection(target: EntityCollection, source: EntityCollection): EntityCollection {
 
-        if (!modifiedCollection) {
-            return targetSubcollection;
-        } else {
-            return mergeCollections(targetSubcollection, modifiedCollection);
-        }
-    });
+    const subcollectionsMerged = joinCollectionLists(target?.subcollections ?? [], source?.subcollections ?? []);
 
     const propertiesMerged: PropertiesOrBuilders = { ...target.properties } as PropertiesOrBuilders;
     Object.keys(source.properties).forEach((key) => {