@firecms/collection_editor 3.0.0-beta.2 → 3.0.0-canary.0

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-canary.0",
   "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.2",
-    "@firecms/formex": "^3.0.0-beta.2",
-    "@firecms/schema_inference": "^3.0.0-beta.2",
-    "@firecms/ui": "^3.0.0-beta.2",
+    "@firecms/data_import_export": "^3.0.0-canary.0",
+    "@firecms/formex": "^3.0.0-canary.0",
+    "@firecms/schema_inference": "^3.0.0-canary.0",
+    "@firecms/ui": "^3.0.0-canary.0",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.3.1"
   },
@@ -73,5 +73,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "9c3561bc09311f2339bb6fa224c88a62d3b19617"
+  "gitHead": "165080f8a46d85fef75ce4e4cd3e7f38b80d59d5"
 }

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 
-import { Field, getIn } from "@firecms/formex";
+import { Field, getIn, useFormex } from "@firecms/formex";
 import {
     EntityCollection,
     ErrorBoundary,
@@ -34,7 +34,6 @@ import { OnPropertyChangedParams, PropertyForm, PropertyFormDialog } from "./Pro
 import { PropertyTree } from "./PropertyTree";
 import { PersistedCollection } from "../../types/persisted_collection";
 import { GetCodeDialog } from "./GetCodeDialog";
-import { useFormex } from "@firecms/formex";
 
 type CollectionEditorFormProps = {
     showErrors: boolean;
@@ -138,7 +137,9 @@ export function CollectionPropertiesEditorForm({
                         ...newPropertyKeys.reduce((acc, propertyKey) => {
                             acc[propertyKey] = (newCollection.properties ?? {})[propertyKey];
                             return acc;
-                        }, {} as { [key: string]: PropertyOrBuilder }),
+                        }, {} as {
+                            [key: string]: PropertyOrBuilder
+                        }),
                         ...values.properties
                     };
                     const updatedPropertiesOrder = [
@@ -224,11 +225,19 @@ export function CollectionPropertiesEditorForm({
                                    previousId,
                                    namespace
                                }: OnPropertyChangedParams) => {
+
         const fullId = id ? getFullId(id, namespace) : undefined;
         const propertyPath = fullId ? idToPropertiesPath(fullId) : undefined;
 
         // If the id has changed we need to a little cleanup
         if (previousId && previousId !== id) {
+            console.debug("onPropertyChanged, id change", {
+                id,
+                property,
+                previousId,
+                namespace
+            })
+
             const previousFullId = getFullId(previousId, namespace);
             const previousPropertyPath = idToPropertiesPath(previousFullId);
 
@@ -420,11 +429,19 @@ export function CollectionPropertiesEditorForm({
                             />}
 
                         {!selectedProperty &&
-                            <Typography variant={"label"} className="flex items-center justify-center h-full">
-                                {emptyCollection
-                                    ? "Now you can add your first property"
-                                    : "Select a property to edit it"}
-                            </Typography>}
+                            <div className={"w-full flex flex-col items-center justify-center h-full gap-4"}>
+                                <Typography variant={"label"} className="">
+                                    {emptyCollection
+                                        ? "Now you can add your first property"
+                                        : "Select a property to edit it"}
+                                </Typography>
+                                <Button variant={"outlined"}
+                                        onClick={() => setNewPropertyDialogOpen(true)}
+                                >
+                                    <AddIcon/>
+                                    Add new property
+                                </Button>
+                            </div>}
 
                         {selectedProperty && isPropertyBuilder(selectedProperty) &&
                             <Typography variant={"label"} className="flex items-center justify-center">

package/src/ui/collection_editor/SubcollectionsEditTab.tsx

@@ -132,7 +132,6 @@ export function SubcollectionsEditTab({
                             Custom views
                         </Typography>
 
-
                         {totalEntityViews === 0 &&
                             <Alert action={<Button variant="text"
                                                    size={"small"}
@@ -140,7 +139,7 @@ export function SubcollectionsEditTab({
                                                    component={"a"}
                                                    rel="noopener noreferrer"
                                                    target="_blank">More info</Button>}>
-                                Define your own custom views by uploading it with the CLI.
+                                Define your own custom views by uploading them with the CLI.
                             </Alert>
                         }
 

package/src/ui/collection_editor/properties/ReferencePropertyField.tsx

@@ -40,7 +40,7 @@ export function ReferencePropertyField({
                 <Field name={pathPath}
                        pathPath={pathPath}
                        type="select"
-                       disabled={existing || disabled}
+                       disabled={(existing && Boolean(pathValue)) || disabled}
                        value={pathValue}
                        error={pathError}
                        handleChange={handleChange}
@@ -52,7 +52,6 @@ export function ReferencePropertyField({
     );
 }
 
-
 export function CollectionsSelect({
                                       disabled,
                                       pathPath,