@firecms/collection_editor 3.0.0-beta.7 → 3.0.0-beta.9

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -351,7 +351,8 @@ export function CollectionPropertiesEditorForm({
                     </div>}
 
                     <div className="ml-1 mt-2 flex flex-row gap-2">
-                        <Tooltip title={"Get the code for this collection"}>
+                        <Tooltip title={"Get the code for this collection"}
+                                 asChild={true}>
                             <IconButton
                                 variant={"filled"}
                                 disabled={inferringProperties}
@@ -359,7 +360,8 @@ export function CollectionPropertiesEditorForm({
                                 <CodeIcon/>
                             </IconButton>
                         </Tooltip>
-                        {inferPropertiesFromData && <Tooltip title={"Add new properties based on data"}>
+                        {inferPropertiesFromData && <Tooltip title={"Add new properties based on data"}
+                                                             asChild={true}>
                             <IconButton
                                 variant={"filled"}
                                 disabled={inferringProperties}
@@ -367,7 +369,8 @@ export function CollectionPropertiesEditorForm({
                                 {inferringProperties ? <CircularProgress size={"small"}/> : <AutoAwesomeIcon/>}
                             </IconButton>
                         </Tooltip>}
-                        <Tooltip title={"Add new property"}>
+                        <Tooltip title={"Add new property"}
+                                 asChild={true}>
                             <Button
                                 variant={"outlined"}
                                 onClick={() => setNewPropertyDialogOpen(true)}>

package/src/ui/collection_editor/GetCodeDialog.tsx

@@ -14,7 +14,7 @@ export function GetCodeDialog({
     const snackbarController = useSnackbarController();
 
     const code = collection
-        ? "import { EntityCollection } from \"firecms\";\n\nconst " + (collection?.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode(collection), null, "\t")
+        ? "import { EntityCollection } from \"@firecms/core\";\n\nconst " + (collection?.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode(collection), null, "\t")
         : "No collection selected";
     return <Dialog open={open}
                    onOpenChange={onOpenChange}

package/src/ui/collection_editor/PropertyEditView.tsx

@@ -5,7 +5,6 @@ import { Formex, FormexController, getIn, useCreateFormex } from "@firecms/forme
 import {
     DEFAULT_FIELD_CONFIGS,
     DeleteConfirmationDialog,
-    PropertyConfigId,
     getFieldConfig,
     getFieldId,
     isPropertyBuilder,
@@ -14,6 +13,7 @@ import {
     Property,
     PropertyConfig,
     PropertyConfigBadge,
+    PropertyConfigId,
 } from "@firecms/core";
 import {
     Button,
@@ -45,6 +45,7 @@ import { updatePropertyFromWidget } from "./utils/update_property_for_widget";
 import { PropertySelectItem } from "./PropertySelectItem";
 import { UrlPropertyField } from "./properties/UrlPropertyField";
 import { supportedFields } from "./utils/supported_fields";
+import { MarkdownPropertyField } from "./properties/MarkdownPropertyField";
 
 export type PropertyWithId = Property & {
     id?: string
@@ -148,7 +149,10 @@ export const PropertyForm = React.memo(
                 } = newPropertyWithId;
                 doOnPropertyChanged({
                     id,
-                    property: { ...property, editable: property.editable ?? true }
+                    property: {
+                        ...property,
+                        editable: property.editable ?? true
+                    }
                 });
                 if (!existingProperty)
                     controller.resetForm({ values: initialValue });
@@ -388,7 +392,6 @@ function PropertyEditFormFields({
     let childComponent;
     if (selectedFieldConfigId === "text_field" ||
         selectedFieldConfigId === "multiline" ||
-        selectedFieldConfigId === "markdown" ||
         selectedFieldConfigId === "email") {
         childComponent =
             <StringPropertyField widgetId={selectedFieldConfigId}
@@ -398,6 +401,10 @@ function PropertyEditFormFields({
         childComponent =
             <UrlPropertyField disabled={disabled}
                               showErrors={showErrors}/>;
+    } else if (selectedFieldConfigId === "markdown") {
+        childComponent =
+            <MarkdownPropertyField disabled={disabled}
+                                   showErrors={showErrors}/>;
     } else if (selectedFieldConfigId === "select" ||
         selectedFieldConfigId === "number_select") {
         childComponent = <EnumPropertyField

package/src/ui/collection_editor/PropertySelectItem.tsx

@@ -14,7 +14,7 @@ export function PropertySelectItem({ value, optionDisabled, propertyConfig, exis
                        className={"flex flex-row items-center"}>
         <div
             className={cls(
-                "flex flex-row items-center text-base min-h-[52px]",
+                "flex flex-row items-center text-base min-h-[48px]",
                 optionDisabled ? "w-full" : "")}>
             <div className={"mr-8"}>
                 <PropertyConfigBadge propertyConfig={propertyConfig}/>

package/src/ui/collection_editor/PropertyTree.tsx

@@ -227,7 +227,8 @@ export function PropertyTreeEntry({
                     <AutoAwesomeIcon size="small" className={"p-2"}/>
                 </Tooltip>}
 
-                {onPropertyRemove && <Tooltip title={"Remove"}>
+                {onPropertyRemove && <Tooltip title={"Remove"}
+                                              asChild={true}>
                     <IconButton size="small"
                                 color="inherit"
                                 onClick={() => onPropertyRemove(propertyKey, namespace)}>
@@ -235,7 +236,8 @@ export function PropertyTreeEntry({
                     </IconButton>
                 </Tooltip>}
 
-                {onPropertyMove && <Tooltip title={"Move"}>
+                {onPropertyMove && <Tooltip title={"Move"}
+                                            asChild={true}>
                     <IconButton
                         component={"span"}
                         size="small"

package/src/ui/collection_editor/SubcollectionsEditTab.tsx

@@ -95,7 +95,8 @@ export function SubcollectionsEditTab({
                                             </TableCell>
                                             <TableCell
                                                 align="right">
-                                                <Tooltip title={"Remove"}>
+                                                <Tooltip title={"Remove"}
+                                                         asChild={true}>
                                                     <IconButton size="small"
                                                                 onClick={(e) => {
                                                                     e.preventDefault();
@@ -135,7 +136,7 @@ export function SubcollectionsEditTab({
                         {totalEntityViews === 0 &&
                             <Alert action={<Button variant="text"
                                                    size={"small"}
-                                                   href={"https://firecms.co/docs/customization_quickstart"}
+                                                   href={"https://firecms.co/docs/cloud/quickstart"}
                                                    component={"a"}
                                                    rel="noopener noreferrer"
                                                    target="_blank">More info</Button>}>
@@ -157,7 +158,8 @@ export function SubcollectionsEditTab({
                                                 </TableCell>
                                                 <TableCell
                                                     align="right">
-                                                    <Tooltip title={"Remove"}>
+                                                    <Tooltip title={"Remove"}
+                                                             asChild={true}>
                                                         <IconButton size="small"
                                                                     onClick={(e) => {
                                                                         e.preventDefault();

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

@@ -26,53 +26,56 @@ export function DateTimePropertyField({ disabled }: {
 
     return (
         <>
-            <div className={"flex flex-col col-span-12"}>
-                <Select name={modePath}
-                        value={modeValue ?? "date"}
-                        error={Boolean(modeError)}
-                        onValueChange={(v) => setFieldValue(modePath, v)}
-                        label={"Mode"}
-                        renderValue={(v) => {
-                            switch (v) {
-                                case "date_time":
-                                    return "Date/Time";
-                                case "date":
-                                    return "Date";
-                                default:
-                                    return "";
-                            }
-                        }}
-                        disabled={disabled}>
-                    <SelectItem value={"date_time"}> Date/Time </SelectItem>
-                    <SelectItem value={"date"}> Date </SelectItem>
-                </Select>
-                <FieldCaption error={Boolean(modeError)}>
-                    {modeError}
-                </FieldCaption>
-
-                <Select name={autoValuePath}
-                        disabled={disabled}
-                        value={autoValueValue ?? ""}
-                        onValueChange={(v) => setFieldValue(autoValuePath, v === "none" ? null : v)}
-                        renderValue={(v) => {
-                            switch (v) {
-                                case "on_create":
-                                    return "On create";
-                                case "on_update":
-                                    return "On any update";
-                                default:
-                                    return "None";
-                            }
-                        }}
-                        error={Boolean(autoValueError)}
-                        label={"Automatic value"}>
-                    <SelectItem value={"none"}> None </SelectItem>
-                    <SelectItem value={"on_create"}> On create </SelectItem>
-                    <SelectItem value={"on_update"}> On any update </SelectItem>
-                </Select>
-                <FieldCaption error={Boolean(autoValueError)}>
-                    {autoValueError ?? "Update this field automatically when creating or updating the entity"}
-                </FieldCaption>
+            <div className={"flex flex-col col-span-12 gap-2"}>
+                <div>
+                    <Select name={modePath}
+                            value={modeValue ?? "date"}
+                            error={Boolean(modeError)}
+                            onValueChange={(v) => setFieldValue(modePath, v)}
+                            label={"Mode"}
+                            renderValue={(v) => {
+                                switch (v) {
+                                    case "date_time":
+                                        return "Date/Time";
+                                    case "date":
+                                        return "Date";
+                                    default:
+                                        return "";
+                                }
+                            }}
+                            disabled={disabled}>
+                        <SelectItem value={"date_time"}> Date/Time </SelectItem>
+                        <SelectItem value={"date"}> Date </SelectItem>
+                    </Select>
+                    <FieldCaption error={Boolean(modeError)}>
+                        {modeError}
+                    </FieldCaption>
+                </div>
+                <div>
+                    <Select name={autoValuePath}
+                            disabled={disabled}
+                            value={autoValueValue ?? ""}
+                            onValueChange={(v) => setFieldValue(autoValuePath, v === "none" ? null : v)}
+                            renderValue={(v) => {
+                                switch (v) {
+                                    case "on_create":
+                                        return "On create";
+                                    case "on_update":
+                                        return "On any update";
+                                    default:
+                                        return "None";
+                                }
+                            }}
+                            error={Boolean(autoValueError)}
+                            label={"Automatic value"}>
+                        <SelectItem value={"none"}> None </SelectItem>
+                        <SelectItem value={"on_create"}> On create </SelectItem>
+                        <SelectItem value={"on_update"}> On any update </SelectItem>
+                    </Select>
+                    <FieldCaption error={Boolean(autoValueError)}>
+                        {autoValueError ?? "Update this field automatically when creating or updating the entity"}
+                    </FieldCaption>
+                </div>
 
             </div>
 

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

@@ -71,7 +71,7 @@ export function EnumPropertyField({
                           }}
                           getData={getData
                               ? () => getData()
-                                  .then(res => res.map(d => values.id && getIn(d, values.id)).filter(Boolean))
+                                  .then(res => res.map(entry => values.id && getIn(entry, values.id)).filter(Boolean))
                               : undefined}
                           onValuesChanged={onValuesChanged}/>
             </div>

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

@@ -0,0 +1,139 @@
+import React from "react";
+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";
+
+export function MarkdownPropertyField({
+                                          disabled,
+                                          showErrors
+                                      }: {
+    disabled: boolean;
+    showErrors: boolean;
+}) {
+
+    const {
+        values,
+        setFieldValue
+    } = useFormex();
+
+    const baseStoragePath = "storage";
+
+    const metadata = `${baseStoragePath}.metadata`;
+    const fileName = `${baseStoragePath}.fileName`;
+    const maxSize = `${baseStoragePath}.maxSize`;
+    const storagePath = `${baseStoragePath}.storagePath`;
+
+    const fileNameValue = getIn(values, fileName) ?? "{rand}_{file}";
+    const storagePathValue = getIn(values, storagePath) ?? "/";
+    const maxSizeValue = getIn(values, maxSize);
+
+    const hasFilenameCallback = typeof fileNameValue === "function";
+    const hasStoragePathCallback = typeof storagePathValue === "function";
+
+    return (
+        <>
+            <div className={"col-span-12"}>
+
+                <ValidationPanel>
+
+                    <StringPropertyValidation disabled={disabled}
+                                              length={true}
+                                              lowercase={true}
+                                              max={true}
+                                              min={true}
+                                              trim={true}
+                                              uppercase={true}
+                                              showErrors={showErrors}/>
+
+                </ValidationPanel>
+
+            </div>
+
+            <div className={"col-span-12"}>
+                <ExpandablePanel
+                    title={
+                        <div className="flex flex-row text-gray-500">
+                            <FileUploadIcon/>
+                            <Typography variant={"subtitle2"}
+                                        className="ml-2">
+                                File upload config
+                            </Typography>
+                        </div>
+                    }>
+
+                    <div className={"grid grid-cols-12 gap-2 p-4"}>
+
+
+                        <div className={"col-span-12"}>
+                            <Field name={fileName}
+                                   as={DebouncedTextField}
+                                   label={"File name"}
+                                   size={"small"}
+                                   disabled={hasFilenameCallback || disabled}
+                                   value={hasFilenameCallback ? "-" : fileNameValue}
+                            />
+                        </div>
+                        <div className={"col-span-12"}>
+                            <Field name={storagePath}
+                                   as={DebouncedTextField}
+                                   label={"Storage path"}
+                                   disabled={hasStoragePathCallback || disabled}
+                                   size={"small"}
+                                   value={hasStoragePathCallback ? "-" : storagePathValue}
+                            />
+                            <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
+                                <p>You can use the following placeholders in
+                                    the file name
+                                    and storage path values:</p>
+                                <ul>
+                                    <li>{"{file} - Full name of the uploaded file"}</li>
+                                    <li>{"{file.name} - Name of the uploaded file without extension"}</li>
+                                    <li>{"{file.ext} - Extension of the uploaded file"}</li>
+                                    <li>{"{entityId} - ID of the entity"}</li>
+                                    <li>{"{propertyKey} - ID of this field"}</li>
+                                    <li>{"{path} - Path of this entity"}</li>
+                                    <li>{"{rand} - Random value used to avoid name collisions"}</li>
+                                </ul>
+                            </Typography>
+
+                            <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
+                                When using Markdown, the URL of the uploaded files are always saved in the text value
+                                (not
+                                the path).
+                            </Typography>
+                        </div>
+
+                        <div className={"col-span-12"}>
+                            <DebouncedTextField name={maxSize}
+                                                type={"number"}
+                                                label={"Max size (in bytes)"}
+                                                size={"small"}
+                                                value={maxSizeValue !== undefined && maxSizeValue !== null ? maxSizeValue.toString() : ""}
+                                                onChange={(e) => {
+                                                    const value = e.target.value;
+                                                    if (value === "") setFieldValue(maxSize, undefined);
+                                                    else setFieldValue(maxSize, parseInt(value));
+                                                }}
+                            />
+                        </div>
+
+                    </div>
+                </ExpandablePanel>
+            </div>
+
+            <div className={"col-span-12"}>
+
+                <TextField name={"defaultValue"}
+                           disabled={disabled}
+                           onChange={(e: any) => {
+                               setFieldValue("defaultValue", e.target.value === "" ? undefined : e.target.value);
+                           }}
+                           label={"Default value"}
+                           value={getIn(values, "defaultValue") ?? ""}/>
+
+            </div>
+        </>
+    );
+}

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

@@ -1,7 +1,6 @@
 import React from "react";
 import {
     Button,
-    Checkbox,
     DebouncedTextField,
     ExpandablePanel,
     FileUploadIcon,
@@ -44,11 +43,13 @@ export function StoragePropertyField({
 
     const metadata = `${baseStoragePath}.metadata`;
     const fileName = `${baseStoragePath}.fileName`;
+    const maxSize = `${baseStoragePath}.maxSize`;
     const storagePath = `${baseStoragePath}.storagePath`;
     const storeUrl = `${baseStoragePath}.storeUrl`;
 
     const fileNameValue = getIn(values, fileName) ?? "{rand}_{file}";
     const storagePathValue = getIn(values, storagePath) ?? "/";
+    const maxSizeValue = getIn(values, maxSize);
 
     const storedValue = getIn(values, acceptedFiles);
     const fileTypesValue: string[] | undefined = Array.isArray(storedValue) ? storedValue : undefined;
@@ -56,10 +57,10 @@ export function StoragePropertyField({
 
     const handleTypesChange = (value: string[]) => {
         if (!value) setFieldValue(acceptedFiles, undefined);
-        else if (value.includes("all")) setFieldValue(acceptedFiles, undefined);
-        else if (value.length >= Object.keys(fileTypes).length) setFieldValue(acceptedFiles, undefined);
-        else if (allFileTypesSelected)
-            setFieldValue(acceptedFiles, Object.keys(fileTypes).filter((v) => !value.includes(v)));
+        // else if (value.includes("all")) setFieldValue(acceptedFiles, undefined);
+        // else if (value.length >= Object.keys(fileTypes).length) setFieldValue(acceptedFiles, undefined);
+        // else if (allFileTypesSelected)
+        //     setFieldValue(acceptedFiles, Object.keys(fileTypes).filter((v) => !value.includes(v)));
         else setFieldValue(acceptedFiles, value);
     };
 
@@ -87,10 +88,12 @@ export function StoragePropertyField({
                         <div className={"col-span-12"}>
 
                             <MultiSelect
+                                className={"w-full"}
+                                placeholder={"All file types allowed"}
                                 disabled={disabled}
                                 name={acceptedFiles}
                                 value={fileTypesValue ?? []}
-                                onMultiValueChange={handleTypesChange}
+                                onValueChange={handleTypesChange}
                                 label={allFileTypesSelected ? undefined : "Allowed file types"}
                                 renderValues={(selected) => {
                                     if (!selected || selected.length === 0) return "All file types allowed";
@@ -99,21 +102,15 @@ export function StoragePropertyField({
                                         .join(", ");
                                 }}>
 
-                                <MultiSelectItem key={"all"} value={"all"} className={"flex items-center gap-2"}>
-                                    <Checkbox
-                                        checked={!fileTypesValue}/>
-                                    All
-                                </MultiSelectItem>
-
                                 {Object.entries(fileTypes).map(([value, label]) => (
                                     <MultiSelectItem key={value} value={value} className={"flex items-center gap-2"}>
-                                        <Checkbox
-                                            checked={allFileTypesSelected || fileTypesValue.indexOf(value) > -1}/>
+                                        {/*<Checkbox*/}
+                                        {/*    checked={allFileTypesSelected || fileTypesValue.indexOf(value) > -1}/>*/}
                                         <div className={"flex-grow"}>
                                             {label}
                                         </div>
                                         <Button size={"small"}
-                                                variant={"outlined"}
+                                                variant={"text"}
                                                 onClick={(e) => {
                                                     e.preventDefault();
                                                     e.stopPropagation();
@@ -161,7 +158,10 @@ export function StoragePropertyField({
 
                             <Field name={storeUrl}
                                    type="checkbox">
-                                {({ field, form }: FormexFieldProps) => {
+                                {({
+                                      field,
+                                      form
+                                  }: FormexFieldProps) => {
                                     return <SwitchControl
                                         label={"Save URL instead of storage path"}
                                         disabled={existing || disabled}
@@ -178,6 +178,21 @@ export function StoragePropertyField({
                                 You can only change this prop upon creation.
                             </Typography>
                         </div>
+
+                        <div className={"col-span-12"}>
+                            <DebouncedTextField name={maxSize}
+                                                type={"number"}
+                                                label={"Max size (in bytes)"}
+                                                size={"small"}
+                                                value={maxSizeValue !== undefined && maxSizeValue !== null ? maxSizeValue.toString() : ""}
+                                                onChange={(e) => {
+                                                    const value = e.target.value;
+                                                    if (value === "") setFieldValue(maxSize, undefined);
+                                                    else setFieldValue(maxSize, parseInt(value));
+                                                }}
+                            />
+                        </div>
+
                     </div>
                 </ExpandablePanel>
 

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

@@ -10,7 +10,7 @@ export function StringPropertyField({
                                         disabled,
                                         showErrors
                                     }: {
-    widgetId: "text_field" | "multiline" | "markdown" | "email";
+    widgetId: "text_field" | "multiline" | "email";
     disabled: boolean;
     showErrors: boolean;
 }) {
@@ -42,15 +42,6 @@ export function StringPropertyField({
                                                   trim={true}
                                                   uppercase={true}
                                                   showErrors={showErrors}/>}
-                    {widgetId === "markdown" &&
-                        <StringPropertyValidation disabled={disabled}
-                                                  length={true}
-                                                  lowercase={true}
-                                                  max={true}
-                                                  min={true}
-                                                  trim={true}
-                                                  uppercase={true}
-                                                  showErrors={showErrors}/>}
 
                     {widgetId === "email" &&
                         <StringPropertyValidation disabled={disabled}

package/src/ui/collection_editor/templates/pages_template.ts

@@ -178,11 +178,6 @@ export const pagesCollectionTemplate: EntityCollection = {
             name: "Is Published",
             columnWidth: 100,
             description: "Should this page be live on the site?"
-        },
-        author_uid: {
-            dataType: "reference",
-            name: "Author",
-            path: "users"
         }
     }
 };

package/src/useCollectionEditorPlugin.tsx

@@ -51,6 +51,13 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
 
     onAnalyticsEvent?: (event: string, params?: object) => void;
 
+    components?: {
+        /**
+         * Custom component to render the database field
+         */
+        DatabaseField?: React.ComponentType<{ databaseId?: string, onDatabaseIdUpdate: (databaseId:string) => void }>;
+    };
+
 }
 
 /**
@@ -60,7 +67,7 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
  * @param configPermissions
  * @param reservedGroups
  * @param extraView
- * @param getPathsSuggestions
+ * @param getData
  * @param getUser
  * @param collectionInference
  */
@@ -74,7 +81,8 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
      getUser,
      collectionInference,
      getData,
-     onAnalyticsEvent
+     onAnalyticsEvent,
+     components
  }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection> {
 
     return {
@@ -91,7 +99,8 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
                 getPathSuggestions,
                 getUser,
                 getData,
-                onAnalyticsEvent
+                onAnalyticsEvent,
+                components
             }
         },
         homePage: {
@@ -147,7 +156,7 @@ export function IntroWidget({}: {}) {
                     : undefined}>
                 <AddIcon/>Create your first collection
             </Button>}
-            <Typography variant={"caption"} color={"secondary"}>
+            <Typography color={"secondary"}>
                 You can also define collections programmatically.
             </Typography>
         </Paper>