@firecms/collection_editor 3.0.0-canary.4 → 3.0.0-canary.40

package/src/ui/collection_editor/PropertyEditView.tsx

@@ -5,7 +5,7 @@ import { Formex, FormexController, getIn, useCreateFormex } from "@firecms/forme
 import {
     DEFAULT_FIELD_CONFIGS,
     DeleteConfirmationDialog,
-    FieldConfigId,
+    PropertyConfigId,
     getFieldConfig,
     getFieldId,
     isPropertyBuilder,
@@ -375,7 +375,7 @@ function PropertyEditFormFields({
         }
     }, [errors, onError, propertyNamespace, values?.id]);
 
-    const onWidgetSelectChanged = (newSelectedWidgetId: FieldConfigId) => {
+    const onWidgetSelectChanged = (newSelectedWidgetId: PropertyConfigId) => {
         setSelectedFieldConfigId(newSelectedWidgetId);
         setValues(updatePropertyFromWidget(values, newSelectedWidgetId, propertyConfigs));
         // Ugly hack to autofocus the name field
@@ -495,7 +495,7 @@ function PropertyEditFormFields({
                                 return <em>Select a property
                                     widget</em>;
                             }
-                            const key = value as FieldConfigId;
+                            const key = value as PropertyConfigId;
                             const propertyConfig = DEFAULT_FIELD_CONFIGS[key] ?? propertyConfigs[key];
                             const baseProperty = propertyConfig.property;
                             const baseFieldConfig = baseProperty && !isPropertyBuilder(baseProperty) ? getFieldConfig(baseProperty, propertyConfigs) : undefined;
@@ -524,7 +524,7 @@ function PropertyEditFormFields({
                             </div>
                         }}
                         onValueChange={(value) => {
-                            onWidgetSelectChanged(value as FieldConfigId);
+                            onWidgetSelectChanged(value as PropertyConfigId);
                         }}>
                         {displayedWidgets.map(([key, propertyConfig]) => {
                             const baseProperty = propertyConfig.property;

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

@@ -149,7 +149,7 @@ export function CollectionEditorImportMapping({
                                           idColumn={importConfig.idColumn}
                                           originProperties={importConfig.originProperties}
                                           destinationProperties={values.properties as Properties}
-                                          onIdPropertyChanged={(value) => importConfig.setIdColumn(value)}
+                                          onIdPropertyChanged={(value) => importConfig.setIdColumn(value ?? undefined)}
                                           buildPropertyView={({
                                                                   property,
                                                                   propertyKey,

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

@@ -2,8 +2,7 @@ import { Field, getIn, useFormex } from "@firecms/formex";
 import { DebouncedTextField } from "@firecms/ui";
 import { PropertyWithId } from "../PropertyEditView";
 import React from "react";
-import { FieldHelperView } from "./FieldHelperView";
-import { toSnakeCase, unslugify } from "@firecms/core";
+import { FieldCaption, toSnakeCase, unslugify } from "@firecms/core";
 
 type CommonPropertyFieldsProps = {
     showErrors: boolean,
@@ -64,9 +63,9 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
                         disabled={disabled}
                         error={Boolean(nameError)}/>
 
-                    <FieldHelperView error={Boolean(nameError)}>
+                    <FieldCaption error={Boolean(nameError)}>
                         {nameError}
-                    </FieldHelperView>
+                    </FieldCaption>
                 </div>
 
                 <div>
@@ -88,9 +87,9 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
                         required
                         size="small"
                         error={Boolean(idError)}/>
-                    <FieldHelperView error={Boolean(idError)}>
+                    <FieldCaption error={Boolean(idError)}>
                         {idError}
-                    </FieldHelperView>
+                    </FieldCaption>
                 </div>
 
                 <div>
@@ -99,9 +98,9 @@ export const CommonPropertyFields = React.forwardRef<HTMLDivElement, CommonPrope
                            label={"Description"}
                            disabled={disabled}
                            error={Boolean(descriptionError)}/>
-                    <FieldHelperView error={Boolean(descriptionError)}>
+                    <FieldCaption error={Boolean(descriptionError)}>
                         {descriptionError}
-                    </FieldHelperView>
+                    </FieldCaption>
                 </div>
 
             </div>

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

@@ -1,10 +1,9 @@
 import React from "react";
 import { getIn, useFormex } from "@firecms/formex";
-import { NumberProperty, StringProperty } from "@firecms/core";
+import { FieldCaption, NumberProperty, StringProperty } from "@firecms/core";
 import { Select, SelectItem } from "@firecms/ui";
 import { GeneralPropertyValidation } from "./validation/GeneralPropertyValidation";
 import { ValidationPanel } from "./validation/ValidationPanel";
-import { FieldHelperView } from "./FieldHelperView";
 
 export function DateTimePropertyField({ disabled }: {
     disabled: boolean;
@@ -47,14 +46,14 @@ export function DateTimePropertyField({ disabled }: {
                     <SelectItem value={"date_time"}> Date/Time </SelectItem>
                     <SelectItem value={"date"}> Date </SelectItem>
                 </Select>
-                <FieldHelperView error={Boolean(modeError)}>
+                <FieldCaption error={Boolean(modeError)}>
                     {modeError}
-                </FieldHelperView>
+                </FieldCaption>
 
                 <Select name={autoValuePath}
                         disabled={disabled}
                         value={autoValueValue ?? ""}
-                        onValueChange={(v) => setFieldValue(autoValuePath, v)}
+                        onValueChange={(v) => setFieldValue(autoValuePath, v === "none" ? null : v)}
                         renderValue={(v) => {
                             switch (v) {
                                 case "on_create":
@@ -67,13 +66,13 @@ export function DateTimePropertyField({ disabled }: {
                         }}
                         error={Boolean(autoValueError)}
                         label={"Automatic value"}>
-                    <SelectItem value={""}> None </SelectItem>
+                    <SelectItem value={"none"}> None </SelectItem>
                     <SelectItem value={"on_create"}> On create </SelectItem>
                     <SelectItem value={"on_update"}> On any update </SelectItem>
                 </Select>
-                <FieldHelperView error={Boolean(autoValueError)}>
+                <FieldCaption error={Boolean(autoValueError)}>
                     {autoValueError ?? "Update this field automatically when creating or updating the entity"}
-                </FieldHelperView>
+                </FieldCaption>
 
             </div>
 

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

@@ -1,11 +1,10 @@
 import React, { useCallback, useState } from "react";
-import { MapProperty, Property, PropertyConfig, } from "@firecms/core";
+import { FieldCaption, MapProperty, Property, PropertyConfig, } from "@firecms/core";
 import { AddIcon, BooleanSwitchWithLabel, Button, Paper, Typography } from "@firecms/ui";
 import { PropertyFormDialog } from "../PropertyEditView";
 import { getIn, useFormex } from "@firecms/formex";
 import { PropertyTree } from "../PropertyTree";
 import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath, namespaceToPropertiesPath } from "../util";
-import { FieldHelperView } from "./FieldHelperView";
 
 export function MapPropertyField({ disabled, getData, allowDataInference, propertyConfigs, collectionEditable }: {
     disabled: boolean;
@@ -113,9 +112,9 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
                     onValueChange={(v) => setFieldValue("spreadChildren", v)}
                     value={values.spreadChildren ?? false}
                 />
-                <FieldHelperView>
+                <FieldCaption>
                     Set this flag to true if you want to display the children of this group as individual columns.
-                </FieldHelperView>
+                </FieldCaption>
             </div>
 
             <PropertyFormDialog

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

@@ -1,8 +1,7 @@
 import React from "react";
 import { Field, getIn, useFormex } from "@firecms/formex";
-import { IconForView, NumberProperty, StringProperty, useNavigationController } from "@firecms/core";
+import { FieldCaption, IconForView, NumberProperty, StringProperty, useNavigationController } from "@firecms/core";
 import { CircularProgress, Select, SelectGroup, SelectItem, Typography, } from "@firecms/ui";
-import { FieldHelperView } from "./FieldHelperView";
 
 export function ReferencePropertyField({
                                            existing,
@@ -152,10 +151,10 @@ export function CollectionsSelect({
 
             </Select>
 
-            <FieldHelperView>
+            <FieldCaption>
                 You can only edit the reference collection upon field
                 creation.
-            </FieldHelperView>
+            </FieldCaption>
         </>
     );
 }

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

@@ -1,10 +1,9 @@
 import React from "react";
 
 import { Field, FormexFieldProps, getIn, useFormex } from "@firecms/formex";
-import { serializeRegExp } from "@firecms/core";
+import { FieldCaption, serializeRegExp } from "@firecms/core";
 import { DebouncedTextField, } from "@firecms/ui";
 import { GeneralPropertyValidation } from "./GeneralPropertyValidation";
-import { FieldHelperView } from "../FieldHelperView";
 import { SwitchControl } from "../../SwitchControl";
 
 export function StringPropertyValidation({
@@ -140,9 +139,9 @@ export function StringPropertyValidation({
                        disabled={disabled}
                        value={matchesStringValue}
                        error={Boolean(matchesError)}/>
-                <FieldHelperView error={Boolean(matchesError)}>
+                <FieldCaption error={Boolean(matchesError)}>
                     {matchesError ? "Not a valid regexp" : "e.g. /^\\d+$/ for digits only"}
-                </FieldHelperView>
+                </FieldCaption>
             </div>}
 
         </div>

package/src/ui/collection_editor/utils/supported_fields.tsx

@@ -1,6 +1,6 @@
-import { DEFAULT_FIELD_CONFIGS, FieldConfigId, PropertyConfig } from "@firecms/core";
+import { DEFAULT_FIELD_CONFIGS, PropertyConfigId, PropertyConfig } from "@firecms/core";
 
-export const supportedFieldsIds: FieldConfigId[] = [
+export const supportedFieldsIds: PropertyConfigId[] = [
     "text_field",
     "multiline",
     "markdown",
@@ -24,6 +24,6 @@ export const supportedFieldsIds: FieldConfigId[] = [
 ];
 
 export const supportedFields: Record<string, PropertyConfig> = Object.entries(DEFAULT_FIELD_CONFIGS)
-    .filter(([id]) => supportedFieldsIds.includes(id as FieldConfigId))
+    .filter(([id]) => supportedFieldsIds.includes(id as PropertyConfigId))
     .map(([id, config]) => ({ [id]: config }))
     .reduce((a, b) => ({ ...a, ...b }), {});

package/src/useCollectionEditorPlugin.tsx

@@ -14,6 +14,7 @@ import { PropertyAddColumnComponent } from "./ui/PropertyAddColumnComponent";
 import { NewCollectionButton } from "./ui/NewCollectionButton";
 import { AddIcon, Button, Typography } from "@firecms/ui";
 import { useCollectionEditorController } from "./useCollectionEditorController";
+import { EditorCollectionActionStart } from "./ui/EditorCollectionActionStart";
 
 export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, UserType extends User = User> {
 
@@ -81,11 +82,8 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
  }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection> {
 
     return {
-        name: "Collection Editor",
+        key: "collection_editor",
         loading: collectionConfigController.loading,
-        collections: {
-            CollectionActions: EditorCollectionAction
-        },
         provider: {
             Component: ConfigControllerProvider,
             props: {
@@ -108,6 +106,8 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
             AdditionalCards: introMode ? undefined : NewCollectionCard,
         },
         collectionView: {
+            CollectionActionsStart: EditorCollectionActionStart,
+            CollectionActions: EditorCollectionAction,
             HeaderAction: CollectionViewHeaderAction,
             AddColumnComponent: PropertyAddColumnComponent
         }

package/dist/ui/collection_editor/properties/FieldHelperView.d.ts

@@ -1,4 +0,0 @@
-export declare function FieldHelperView({ error, children }: {
-    error?: boolean;
-    children?: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,13 +0,0 @@
-import { Typography } from "@firecms/ui";
-
-export function FieldHelperView({
-                                    error,
-                                    children
-                                }: { error?: boolean, children?: React.ReactNode }) {
-    if (!children) return null;
-    return (
-        <Typography variant={"caption"} color={error ? "error" : "secondary"} className={"ml-3.5 mt-0.5"}>
-            {children}
-        </Typography>
-    );
-}