@firecms/collection_editor 3.0.0-canary.14 → 3.0.0-canary.140

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

@@ -1,21 +1,33 @@
-import { convertDataToEntity, getPropertiesMapping, ImportConfig } from "@firecms/data_import_export";
-import { EntityCollectionTable, Properties, useSelectionController } from "@firecms/core";
-import { useEffect } from "react";
+import { convertDataToEntity, ImportConfig } from "@firecms/data_import_export";
+import { CircularProgressCenter, EntityCollectionTable, Properties, useSelectionController } from "@firecms/core";
+import { useEffect, useState } from "react";
 import { Typography } from "@firecms/ui";
 
-export function CollectionEditorImportDataPreview({ importConfig, properties, propertiesOrder }: {
+export function CollectionEditorImportDataPreview({
+                                                      importConfig,
+                                                      properties,
+                                                      propertiesOrder
+                                                  }: {
     importConfig: ImportConfig,
     properties: Properties,
     propertiesOrder: string[]
 }) {
 
-    useEffect(() => {
-        const propertiesMapping = getPropertiesMapping(importConfig.originProperties, properties);
-        const mappedData = importConfig.importData.map(d => convertDataToEntity(d, importConfig.idColumn, importConfig.headersMapping, properties, propertiesMapping, "TEMP_PATH"));
+    const [loading, setLoading] = useState<boolean>(false);
+
+    async function loadEntities() {
+        // const propertiesMapping = getPropertiesMapping(importConfig.originProperties, properties, importConfig.headersMapping);
+        const mappedData = importConfig.importData.map(d => convertDataToEntity(d, importConfig.idColumn, importConfig.headersMapping, properties, "TEMP_PATH", importConfig.defaultValues));
         importConfig.setEntities(mappedData);
+    }
+
+    useEffect(() => {
+        loadEntities().finally(() => setLoading(false));
     }, []);
 
     const selectionController = useSelectionController();
+    if (loading)
+        return <CircularProgressCenter/>
 
     return <EntityCollectionTable
         title={<div>
@@ -31,7 +43,11 @@ export function CollectionEditorImportDataPreview({ importConfig, properties, pr
         filterable={false}
         sortable={false}
         selectionController={selectionController}
-        displayedColumnIds={propertiesOrder.map(p => ({ key: p, disabled: false }))}
-        properties={properties}/>
+        displayedColumnIds={propertiesOrder.map(p => ({
+            key: p,
+            disabled: false
+        }))}
+        properties={properties}
+        enablePopupIcon={false}/>
 
 }

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

@@ -6,14 +6,13 @@ import {
 } from "@firecms/data_import_export";
 import { getIn, useFormex } from "@firecms/formex";
 
-import { PropertyConfigBadge, getFieldConfig, getFieldId, Properties, Property, PropertyConfig, } from "@firecms/core";
-import { Container, Select, Tooltip, Typography } from "@firecms/ui";
+import { getFieldConfig, getFieldId, Properties, Property, PropertyConfig, PropertyConfigBadge, } from "@firecms/core";
+import { cls, Container, Select, SelectItem, Tooltip, Typography } from "@firecms/ui";
 import React, { useState } from "react";
 import { OnPropertyChangedParams, PropertyFormDialog, PropertyWithId } from "../PropertyEditView";
 import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath } from "../util";
 import { PersistedCollection } from "../../../types/persisted_collection";
 import { updatePropertyFromWidget } from "../utils/update_property_for_widget";
-import { PropertySelectItem } from "../PropertySelectItem";
 import { supportedFields } from "../utils/supported_fields";
 import { buildPropertyFromData } from "@firecms/schema_inference";
 
@@ -143,18 +142,20 @@ export function CollectionEditorImportMapping({
         <div className={"overflow-auto my-auto"}>
             <Container maxWidth={"6xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
 
-                <Typography variant="h6" className={"mt-4"}>Data property mapping</Typography>
+                <Typography variant="h6" className={"my-4 ml-3.5"}>Data property mapping</Typography>
 
-                <DataNewPropertiesMapping headersMapping={importConfig.headersMapping}
-                                          idColumn={importConfig.idColumn}
-                                          originProperties={importConfig.originProperties}
+                <DataNewPropertiesMapping importConfig={importConfig}
                                           destinationProperties={values.properties as Properties}
-                                          onIdPropertyChanged={(value) => importConfig.setIdColumn(value ?? undefined)}
                                           buildPropertyView={({
                                                                   property,
                                                                   propertyKey,
-                                                                  importKey
+                                                                  importKey,
+                                                                  isIdColumn
                                                               }) => {
+                                              if (isIdColumn) {
+                                                  return <Typography> This column will be used as ID</Typography>
+                                              }
+
                                               return <ImportNewPropertyFieldPreview
                                                   property={property}
                                                   propertyKey={propertyKey}
@@ -266,3 +267,33 @@ function PropertySelect({
         </Select>
     </Tooltip>;
 }
+
+export interface PropertySelectItemProps {
+    value: string;
+    optionDisabled: boolean;
+    propertyConfig: PropertyConfig;
+    existing: boolean;
+}
+
+export function PropertySelectItem({ value, optionDisabled, propertyConfig, existing }: PropertySelectItemProps) {
+    return <SelectItem value={value}
+                       disabled={optionDisabled}
+                       className={"flex flex-row items-center"}>
+        <div
+            className={cls(
+                "flex flex-row items-center text-base min-h-[48px]",
+                optionDisabled ? "w-full" : "")}>
+            <div className={"mr-8"}>
+                <PropertyConfigBadge propertyConfig={propertyConfig}/>
+            </div>
+            <div>
+                <div>{propertyConfig.name}</div>
+                <Typography variant={"caption"}
+                            color={"disabled"}
+                            className={"max-w-sm"}>
+                    {existing && optionDisabled ? "You can only switch to widgets that use the same data type" : propertyConfig.description}
+                </Typography>
+            </div>
+        </div>
+    </SelectItem>
+}

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

@@ -1,12 +1,24 @@
-import React, { useCallback, useState } from "react";
+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 } 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";
-
-export function BlockPropertyField({ disabled, getData, allowDataInference, propertyConfigs, collectionEditable }: {
+import { ArrayProperty, PropertyConfig } from "@firecms/core";
+
+export function BlockPropertyField({
+                                       disabled,
+                                       getData,
+                                       allowDataInference,
+                                       propertyConfigs,
+                                       collectionEditable
+                                   }: {
     disabled: boolean;
     getData?: () => Promise<object[]>;
     allowDataInference: boolean;
@@ -25,38 +37,37 @@ export function BlockPropertyField({ disabled, getData, allowDataInference, prop
 
     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);
     };
 
     const selectedPropertyFullId = selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined;
     const selectedProperty = selectedPropertyFullId ? getIn(values.oneOf?.properties, selectedPropertyFullId.replaceAll(".", ".properties.")) : undefined;
 
-    const deleteProperty = useCallback((propertyKey?: string, namespace?: string) => {
+    const deleteProperty = (propertyKey?: string, namespace?: string) => {
         const fullId = propertyKey ? getFullId(propertyKey, namespace) : undefined;
         if (!fullId)
             throw Error("collection editor miss config");
 
         setFieldValue(`oneOf.${idToPropertiesPath(fullId)}`, undefined, false);
         const propertiesOrderPath = `oneOf.${namespaceToPropertiesOrderPath(namespace)}`;
-        const currentPropertiesOrder: string[] = getIn(values, propertiesOrderPath);
+        const currentPropertiesOrder: string[] = getIn(values, propertiesOrderPath) ?? Object.keys(getIn(values, namespaceToPropertiesPath(namespace)));
         setFieldValue(propertiesOrderPath, currentPropertiesOrder.filter((p) => p !== propertyKey), false);
 
         setPropertyDialogOpen(false);
         setSelectedPropertyKey(undefined);
         setSelectedPropertyNamespace(undefined);
-    }, [setFieldValue, values]);
+    };
 
     const addChildButton = <Button
         autoFocus
@@ -68,16 +79,17 @@ export function BlockPropertyField({ disabled, getData, allowDataInference, prop
         Add property to {values.name ?? "this block"}
     </Button>;
 
-    const onPropertyMove = useCallback((propertiesOrder: string[], namespace?: string) => {
+    const onPropertyMove = (propertiesOrder: string[], namespace?: string) => {
         setFieldValue(`oneOf.${namespaceToPropertiesOrderPath(namespace)}`, propertiesOrder, false);
-    }, []);
+    };
 
     return (
         <>
             <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">

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/MapPropertyField.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react";
+import React, { useState } from "react";
 import { FieldCaption, MapProperty, Property, PropertyConfig, } from "@firecms/core";
 import { AddIcon, BooleanSwitchWithLabel, Button, Paper, Typography } from "@firecms/ui";
 import { PropertyFormDialog } from "../PropertyEditView";
@@ -42,7 +42,7 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
         setPropertyDialogOpen(false);
     };
 
-    const deleteProperty = useCallback((propertyKey?: string, namespace?: string) => {
+    const deleteProperty = (propertyKey?: string, namespace?: string) => {
         const fullId = propertyKey ? getFullId(propertyKey, namespace) : undefined;
         if (!fullId)
             throw Error("collection editor miss config");
@@ -58,16 +58,16 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
         setPropertyDialogOpen(false);
         setSelectedPropertyKey(undefined);
         setSelectedPropertyNamespace(undefined);
-    }, [setFieldValue, values]);
+    };
 
     const selectedPropertyFullId = selectedPropertyKey ? getFullId(selectedPropertyKey, selectedPropertyNamespace) : undefined;
     const selectedProperty = selectedPropertyFullId ? getIn(values.properties, selectedPropertyFullId.replaceAll(".", ".properties.")) : undefined;
 
     const empty = !propertiesOrder || propertiesOrder.length < 1;
 
-    const onPropertyMove = useCallback((propertiesOrder: string[], namespace?: string) => {
+    const onPropertyMove = (propertiesOrder: string[], namespace?: string) => {
         setFieldValue(namespaceToPropertiesOrderPath(namespace), propertiesOrder, false);
-    }, []);
+    };
 
     return (
         <>

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/RepeatPropertyField.tsx

@@ -39,7 +39,6 @@ export function RepeatPropertyField({
 
     const onPropertyChanged = ({ id, property, namespace }:
                                    { id?: string, property: Property, namespace?: string }) => {
-        console.log("onPropertyChanged", id, property, namespace);
         setFieldValue("of", property);
     };
 

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>