@firecms/collection_editor 3.0.0-beta.10 → 3.0.0-beta.11

package/src/ui/collection_editor/UnsavedChangesDialog.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
 
 export interface UnsavedChangesDialogProps {
     open: boolean;
@@ -24,11 +24,9 @@ export function UnsavedChangesDialog({
             aria-labelledby="alert-dialog-title"
             aria-describedby="alert-dialog-description"
         >
-            <DialogContent>
-                <Typography variant={"h6"}>
-                    {title ?? "Unsaved changes"}
-                </Typography>
 
+            <DialogTitle>{title ?? "Unsaved changes"}</DialogTitle>
+            <DialogContent>
                 {body && <Typography>
                     {body}
                 </Typography>}

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

@@ -235,9 +235,11 @@ function PropertySelect({
             open={selectOpen}
             onOpenChange={setSelectOpen}
             invisible={true}
+            size={"large"}
             className={"w-full"}
             disabled={disabled}
             error={!widget}
+            fullWidth={true}
             value={fieldId ?? ""}
             placeholder={"Select a property widget"}
             position={"item-aligned"}

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

@@ -1,10 +1,16 @@
 import React, { useState } from "react";
 import { AddIcon, Button, Paper, Typography } from "@firecms/ui";
 import { getIn, useFormex } from "@firecms/formex";
-import { PropertyFormDialog } from "../PropertyEditView";
-import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath, namespaceToPropertiesPath } from "../util";
+import { OnPropertyChangedParams, PropertyFormDialog } from "../PropertyEditView";
+import {
+    getFullId,
+    getFullIdPath,
+    idToPropertiesPath,
+    namespaceToPropertiesOrderPath,
+    namespaceToPropertiesPath
+} from "../util";
 import { PropertyTree } from "../PropertyTree";
-import { ArrayProperty, Property, PropertyConfig } from "@firecms/core";
+import { ArrayProperty, PropertyConfig } from "@firecms/core";
 
 export function BlockPropertyField({
                                        disabled,
@@ -31,18 +37,17 @@ export function BlockPropertyField({
 
     const onPropertyChanged = ({
                                    id,
+                                   namespace,
                                    property
-                               }: { id?: string, property: Property }) => {
+                               }: OnPropertyChangedParams) => {
         if (!id)
             throw Error();
 
-        setFieldValue("oneOf.properties", {
-            ...(values.oneOf?.properties ?? {}),
-            [id]: property
-        }, false);
+        setFieldValue("oneOf." + getFullIdPath(id, namespace), property, false);
+
         const currentPropertiesOrder = values.oneOf?.propertiesOrder ?? Object.keys(values.oneOf?.properties ?? {});
         const newPropertiesOrder = currentPropertiesOrder.includes(id) ? currentPropertiesOrder : [...currentPropertiesOrder, id];
-        setFieldValue("oneOf.propertiesOrder", newPropertiesOrder, false);
+        setFieldValue("oneOf." + namespaceToPropertiesOrderPath(namespace), newPropertiesOrder, false);
         setPropertyDialogOpen(false);
     };
 
@@ -82,8 +87,9 @@ export function BlockPropertyField({
         <>
             <div className={"col-span-12"}>
                 <div className={"flex justify-between items-end mt-8 mb-4"}>
-                    <Typography variant={"subtitle2"}>Properties in this
-                        block</Typography>
+                    <Typography variant={"subtitle2"}>
+                        Properties in this block
+                    </Typography>
                     {addChildButton}
                 </div>
                 <Paper className="p-2 pl-8">
@@ -104,7 +110,7 @@ export function BlockPropertyField({
                             ? undefined
                             : onPropertyMove}/>
 
-                    {!disabled && !values.oneOf?.propertiesOrder?.length &&
+                    {!disabled && (values.oneOf?.propertiesOrder?.length === 0)&&
                         <div className="h-full flex items-center justify-center p-4">
                             Add the first property to this block
                         </div>}

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

@@ -31,8 +31,10 @@ export function DateTimePropertyField({ disabled }: {
                     <Select name={modePath}
                             value={modeValue ?? "date"}
                             error={Boolean(modeError)}
+                            size={"large"}
                             onValueChange={(v) => setFieldValue(modePath, v)}
                             label={"Mode"}
+                            fullWidth={true}
                             renderValue={(v) => {
                                 switch (v) {
                                     case "date_time":
@@ -54,6 +56,8 @@ export function DateTimePropertyField({ disabled }: {
                 <div>
                     <Select name={autoValuePath}
                             disabled={disabled}
+                            size={"large"}
+                            fullWidth={true}
                             value={autoValueValue ?? ""}
                             onValueChange={(v) => setFieldValue(autoValuePath, v === "none" ? null : v)}
                             renderValue={(v) => {

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

@@ -93,9 +93,11 @@ export function EnumPropertyField({
                 <Select
                     disabled={disabled}
                     position={"item-aligned"}
+                    fullWidth={true}
                     onValueChange={(value: string) => {
                         setFieldValue("defaultValue", value);
                     }}
+                    size={"large"}
                     label={"Default value"}
                     value={defaultValue ?? ""}>
                     {enumValues

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

@@ -113,7 +113,8 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
                     value={values.spreadChildren ?? false}
                 />
                 <FieldCaption>
-                    Set this flag to true if you want to display the children of this group as individual columns.
+                    Set this flag to true if you want to display the children of this group as individual columns. This
+                    will only work for top level groups.
                 </FieldCaption>
             </div>
 

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

@@ -3,7 +3,7 @@ import { StringPropertyValidation } from "./validation/StringPropertyValidation"
 import { ValidationPanel } from "./validation/ValidationPanel";
 import { Field, getIn, useFormex } from "@firecms/formex";
 
-import { DebouncedTextField, ExpandablePanel, FileUploadIcon, TextField, Typography } from "@firecms/ui";
+import { CloudUploadIcon, DebouncedTextField, ExpandablePanel, TextField, Typography } from "@firecms/ui";
 
 export function MarkdownPropertyField({
                                           disabled,
@@ -54,8 +54,8 @@ export function MarkdownPropertyField({
             <div className={"col-span-12"}>
                 <ExpandablePanel
                     title={
-                        <div className="flex flex-row text-gray-500">
-                            <FileUploadIcon/>
+                        <div className="flex flex-row text-surface-500">
+                            <CloudUploadIcon/>
                             <Typography variant={"subtitle2"}
                                         className="ml-2">
                                 File upload config

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

@@ -89,6 +89,8 @@ export function CollectionsSelect({
                 value={value ?? ""}
                 position={"item-aligned"}
                 name={pathPath}
+                size={"large"}
+                fullWidth={true}
                 onChange={handleChange}
                 label={"Target collection"}
                 renderValue={(selected) => {

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

@@ -1,9 +1,9 @@
 import React from "react";
 import {
     Button,
+    CloudUploadIcon,
     DebouncedTextField,
     ExpandablePanel,
-    FileUploadIcon,
     MultiSelect,
     MultiSelectItem,
     Typography
@@ -74,8 +74,8 @@ export function StoragePropertyField({
 
                 <ExpandablePanel
                     title={
-                        <div className="flex flex-row text-gray-500">
-                            <FileUploadIcon/>
+                        <div className="flex flex-row text-surface-500">
+                            <CloudUploadIcon/>
                             <Typography variant={"subtitle2"}
                                         className="ml-2">
                                 File upload config

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

@@ -24,6 +24,7 @@ export function UrlPropertyField({
                 <Select
                     disabled={disabled}
                     position={"item-aligned"}
+                    fullWidth={true}
                     onValueChange={(value: string) => {
                         if (value === "[NONE]")
                             setFieldValue("url", true);

package/src/ui/collection_editor/properties/validation/ValidationPanel.tsx

@@ -12,7 +12,7 @@ export function ValidationPanel({
             asField={true}
             innerClassName="p-4"
             title={
-                <div className="flex flex-row text-gray-500">
+                <div className="flex flex-row text-surface-500">
                     <RuleIcon/>
                     <Typography variant={"subtitle2"}
                                 className="ml-2">

package/src/useCollectionEditorPlugin.tsx

@@ -15,7 +15,7 @@ import { useCollectionEditorController } from "./useCollectionEditorController";
 import { EditorCollectionActionStart } from "./ui/EditorCollectionActionStart";
 import { NewCollectionCard } from "./ui/NewCollectionCard";
 
-export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, UserType extends User = User> {
+export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, USER extends User = User> {
 
     /**
      * Firebase app where the configuration is saved.
@@ -25,7 +25,7 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
     /**
      * Define what actions can be performed on the configuration.
      */
-    configPermissions?: CollectionEditorPermissionsBuilder<UserType, EC>;
+    configPermissions?: CollectionEditorPermissionsBuilder<USER, EC>;
 
     /**
      * The words you define here will not be allowed to be used as group
@@ -47,7 +47,7 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
 
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
 
-    getUser?: (uid: string) => UserType | null;
+    getUser?: (uid: string) => USER | null;
 
     onAnalyticsEvent?: (event: string, params?: object) => void;
 
@@ -71,7 +71,7 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
  * @param getUser
  * @param collectionInference
  */
-export function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>
+export function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, USER extends User = User>
 ({
      collectionConfigController,
      configPermissions,
@@ -83,7 +83,7 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
      getData,
      onAnalyticsEvent,
      components
- }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection> {
+ }: CollectionConfigControllerProps<EC, USER>): FireCMSPlugin<any, any, PersistedCollection> {
 
     return {
         key: "collection_editor",
@@ -140,7 +140,7 @@ export function IntroWidget({}: {}) {
 
     return (
         <Paper
-            className={"my-4 px-4 py-6 flex flex-col  bg-white dark:bg-slate-800 gap-2"}>
+            className={"my-4 px-4 py-6 flex flex-col  bg-white dark:bg-surface-accent-800 gap-2"}>
             <Typography variant={"subtitle2"} className={"uppercase"}>No collections found</Typography>
             <Typography>
                 Start building collections in FireCMS easily. Map them to your existing