@firecms/collection_editor 3.0.0-alpha.34 → 3.0.0-alpha.36

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -44,7 +44,7 @@ type CollectionEditorFormProps = {
     getUser: (uid: string) => User | null;
     getData?: () => Promise<object[]>;
     doCollectionInference: (collection: PersistedCollection) => Promise<EntityCollection | null> | undefined;
-    customFields: Record<string, PropertyConfig>;
+    propertyConfigs: Record<string, PropertyConfig>;
     collectionEditable: boolean;
 };
 
@@ -59,7 +59,7 @@ export function CollectionPropertiesEditorForm({
                                                    getUser,
                                                    getData,
                                                    doCollectionInference,
-                                                   customFields,
+                                                   propertyConfigs,
                                                    collectionEditable
                                                }: CollectionEditorFormProps) {
 
@@ -126,7 +126,7 @@ export function CollectionPropertiesEditorForm({
                     if (newPropertyKeys.length === 0) {
                         snackbarController.open({
                             type: "info",
-                            message: "No new properties found"
+                            message: "No new properties found in existing data"
                         });
                         return;
                     }
@@ -312,7 +312,7 @@ export function CollectionPropertiesEditorForm({
                             placeholder={"Collection name"}
                             size={"small"}
                             required
-                            error={Boolean(errors.name)}/>
+                            error={Boolean(errors?.name)}/>
 
                         {owner &&
                             <Typography variant={"body2"}
@@ -327,14 +327,14 @@ export function CollectionPropertiesEditorForm({
                     </div>}
 
                     <div className="ml-1 mt-2 flex flex-row gap-2">
-                        <Tooltip title={"Get the code for this collection"}>
-                            <IconButton
-                                variant={"filled"}
-                                disabled={inferringProperties}
-                                onClick={() => setCodeDialogOpen(true)}>
-                                <CodeIcon/>
-                            </IconButton>
-                        </Tooltip>
+                        {/*<Tooltip title={"Get the code for this collection"}>*/}
+                        {/*    <IconButton*/}
+                        {/*        variant={"filled"}*/}
+                        {/*        disabled={inferringProperties}*/}
+                        {/*        onClick={() => setCodeDialogOpen(true)}>*/}
+                        {/*        <CodeIcon/>*/}
+                        {/*    </IconButton>*/}
+                        {/*</Tooltip>*/}
                         {inferPropertiesFromData && <Tooltip title={"Add new properties based on data"}>
                             <IconButton
                                 variant={"filled"}
@@ -406,7 +406,7 @@ export function CollectionPropertiesEditorForm({
                                 forceShowErrors={showErrors}
                                 initialErrors={initialErrors}
                                 getData={getData}
-                                customFields={customFields}
+                                propertyConfigs={propertyConfigs}
                                 collectionEditable={collectionEditable}
                             />}
 
@@ -441,7 +441,7 @@ export function CollectionPropertiesEditorForm({
                 forceShowErrors={showErrors}
                 initialErrors={initialErrors}
                 getData={getData}
-                customFields={customFields}
+                propertyConfigs={propertyConfigs}
                 collectionEditable={collectionEditable}
                 onOkClicked={asDialog
                     ? closePropertyDialog
@@ -466,7 +466,7 @@ export function CollectionPropertiesEditorForm({
                 onPropertyChanged={onPropertyCreated}
                 getData={getData}
                 allowDataInference={!isNewCollection}
-                customFields={customFields}
+                propertyConfigs={propertyConfigs}
                 collectionEditable={collectionEditable}
                 existingPropertyKeys={values.propertiesOrder as string[]}/>
 

package/src/ui/collection_editor/EntityCustomViewsSelectDialog.tsx

@@ -2,7 +2,9 @@ import { Button, Dialog, DialogActions, DialogContent, Typography, useFireCMSCon
 import React from "react";
 
 export function EntityCustomViewsSelectDialog({ open, onClose }: { open: boolean, onClose: (selectedViewKey?: string) => void }) {
-    const { entityViews } = useFireCMSContext();
+    const {
+        entityViews,
+    } = useFireCMSContext();
 
     return <Dialog
         maxWidth={"md"}

package/src/ui/collection_editor/PropertyEditView.tsx

@@ -20,7 +20,7 @@ import {
     isPropertyBuilder,
     mergeDeep,
     Property,
-    PropertyConfig, PropertyOrBuilder,
+    PropertyConfig,
     Select,
     toSnakeCase,
     Typography
@@ -41,6 +41,7 @@ import { editableProperty } from "../../utils/entities";
 import { KeyValuePropertyField } from "./properties/KeyValuePropertyField";
 import { updatePropertyFromWidget } from "./utils/update_property_for_widget";
 import { PropertySelectItem } from "./PropertySelectItem";
+import { UrlPropertyField } from "./properties/UrlPropertyField";
 
 export type PropertyWithId = Property & {
     id?: string
@@ -72,7 +73,7 @@ export type PropertyFormProps = {
     allowDataInference: boolean;
     getData?: () => Promise<object[]>;
     getHelpers?: (formikProps: FormikProps<PropertyWithId>) => void;
-    customFields: Record<string, PropertyConfig>;
+    propertyConfigs: Record<string, PropertyConfig>;
     collectionEditable: boolean;
 };
 
@@ -96,7 +97,7 @@ export const PropertyForm = React.memo(
                               allowDataInference,
                               getHelpers,
                               getData,
-                              customFields,
+                              propertyConfigs,
                               collectionEditable
                           }: PropertyFormProps) {
 
@@ -106,7 +107,6 @@ export const PropertyForm = React.memo(
         } as PropertyWithId;
 
         const disabled = (Boolean(property && !editableProperty(property)) && !collectionEditable);
-        console.log("PropertyForm disabled", disabled)
 
         const lastSubmittedProperty = useRef<OnPropertyChangedParams | undefined>(property ? {
             id: propertyKey,
@@ -184,7 +184,7 @@ export const PropertyForm = React.memo(
                     disabled={disabled}
                     getData={getData}
                     allowDataInference={allowDataInference}
-                    customFields={customFields}
+                    propertyConfigs={propertyConfigs}
                     collectionEditable={collectionEditable}
                     {...props}/>;
 
@@ -277,7 +277,7 @@ function PropertyEditView({
                               existingPropertyKeys,
                               getData,
                               allowDataInference,
-                              customFields,
+                              propertyConfigs,
                               collectionEditable
                           }: {
     includeIdAndTitle?: boolean;
@@ -294,7 +294,7 @@ function PropertyEditView({
     existingPropertyKeys?: string[];
     getData?: () => Promise<object[]>;
     allowDataInference: boolean;
-    customFields: Record<string, PropertyConfig>;
+    propertyConfigs: Record<string, PropertyConfig>;
     collectionEditable: boolean;
 } & FormikProps<PropertyWithId>) {
 
@@ -302,7 +302,7 @@ function PropertyEditView({
     const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
     const [selectedFieldConfigId, setSelectedFieldConfigId] = useState<string | undefined>(values?.dataType ? getFieldId(values) : undefined);
 
-    const allSupportedFields = Object.entries(DEFAULT_FIELD_CONFIGS).concat(Object.entries(customFields));
+    const allSupportedFields = Object.entries(DEFAULT_FIELD_CONFIGS).concat(Object.entries(propertyConfigs));
 
     const displayedWidgets = inArray
         ? allSupportedFields.filter(([_, propertyConfig]) => !isPropertyBuilder(propertyConfig.property) && propertyConfig.property?.dataType !== "array")
@@ -351,7 +351,7 @@ function PropertyEditView({
 
     const onWidgetSelectChanged = (newSelectedWidgetId: FieldConfigId) => {
         setSelectedFieldConfigId(newSelectedWidgetId);
-        setValues(updatePropertyFromWidget(values, newSelectedWidgetId, customFields));
+        setValues(updatePropertyFromWidget(values, newSelectedWidgetId, propertyConfigs));
         // Ugly hack to autofocus the name field
         setTimeout(() => {
             nameFieldRef.current?.focus();
@@ -362,12 +362,15 @@ function PropertyEditView({
     if (selectedFieldConfigId === "text_field" ||
         selectedFieldConfigId === "multiline" ||
         selectedFieldConfigId === "markdown" ||
-        selectedFieldConfigId === "url" ||
         selectedFieldConfigId === "email") {
         childComponent =
             <StringPropertyField widgetId={selectedFieldConfigId}
                                  disabled={disabled}
                                  showErrors={showErrors}/>;
+    } else if (selectedFieldConfigId === "url") {
+        childComponent =
+            <UrlPropertyField disabled={disabled}
+                              showErrors={showErrors}/>;
     } else if (selectedFieldConfigId === "select" ||
         selectedFieldConfigId === "number_select") {
         childComponent = <EnumPropertyField
@@ -404,12 +407,12 @@ function PropertyEditView({
         childComponent =
             <MapPropertyField disabled={disabled} getData={getData} allowDataInference={allowDataInference}
                               collectionEditable={collectionEditable}
-                              customFields={customFields}/>;
+                              propertyConfigs={propertyConfigs}/>;
     } else if (selectedFieldConfigId === "block") {
         childComponent =
             <BlockPropertyField disabled={disabled} getData={getData} allowDataInference={allowDataInference}
                                 collectionEditable={collectionEditable}
-                                customFields={customFields}/>;
+                                propertyConfigs={propertyConfigs}/>;
     } else if (selectedFieldConfigId === "reference") {
         childComponent =
             <ReferencePropertyField showErrors={showErrors}
@@ -432,7 +435,7 @@ function PropertyEditView({
                                  allowDataInference={allowDataInference}
                                  disabled={disabled}
                                  collectionEditable={collectionEditable}
-                                 customFields={customFields}/>;
+                                 propertyConfigs={propertyConfigs}/>;
     } else if (selectedFieldConfigId === "key_value") {
         childComponent =
             <KeyValuePropertyField disabled={disabled}/>;
@@ -467,9 +470,9 @@ function PropertyEditView({
                                     widget</em>;
                             }
                             const key = value as FieldConfigId;
-                            const propertyConfig = DEFAULT_FIELD_CONFIGS[key] ?? customFields[key];
+                            const propertyConfig = DEFAULT_FIELD_CONFIGS[key] ?? propertyConfigs[key];
                             const baseProperty = propertyConfig.property;
-                            const baseFieldConfig = baseProperty && !isPropertyBuilder(baseProperty) ? getFieldConfig(baseProperty, customFields) : undefined;
+                            const baseFieldConfig = baseProperty && !isPropertyBuilder(baseProperty) ? getFieldConfig(baseProperty, propertyConfigs) : undefined;
                             const optionDisabled = isPropertyBuilder(baseProperty) || (existing && baseProperty.dataType !== values?.dataType);
                             const computedFieldConfig = baseFieldConfig ? mergeDeep(baseFieldConfig, propertyConfig) : propertyConfig;
                             return <div

package/src/ui/collection_editor/PropertyFieldPreview.tsx

@@ -34,9 +34,9 @@ export function PropertyFieldPreview({
     onClick?: () => void
 }) {
 
-    const { fields } = useFireCMSContext();
+    const { propertyConfigs } = useFireCMSContext();
 
-    const propertyConfig = getFieldConfig(property, fields);
+    const propertyConfig = getFieldConfig(property, propertyConfigs);
     const disabled = !editableProperty(property);
 
     const borderColorClass = hasError
@@ -116,9 +116,9 @@ export function NonEditablePropertyPreview({
     property?: PropertyOrBuilder
 }) {
 
-    const { fields } = useFireCMSContext();
+    const { propertyConfigs } = useFireCMSContext();
 
-    const propertyConfig = !isPropertyBuilder(property) && property ? getFieldConfig(property, fields) : undefined;
+    const propertyConfig = !isPropertyBuilder(property) && property ? getFieldConfig(property, propertyConfigs) : undefined;
 
     return (
         <div

package/src/ui/collection_editor/PropertyTree.tsx

@@ -33,7 +33,7 @@ export function PropertyTree<M extends {
        onPropertyRemove,
        className,
        inferredPropertyKeys,
-       collectionEditable
+       collectionEditable,
    }: {
     namespace?: string;
     selectedPropertyKey?: string;
@@ -137,7 +137,7 @@ export function PropertyTreeEntry({
                                       onPropertyMove,
                                       onPropertyRemove,
                                       inferredPropertyKeys,
-                                      collectionEditable
+                                      collectionEditable,
                                   }: {
     propertyKey: string;
     namespace?: string;
@@ -156,6 +156,7 @@ export function PropertyTreeEntry({
     const isPropertyInferred = inferredPropertyKeys?.includes(namespace ? `${namespace}.${propertyKey}` : propertyKey);
 
     const fullId = getFullId(propertyKey, namespace);
+
     let subtree;
     if (typeof propertyOrBuilder === "object") {
         const property = propertyOrBuilder;

package/src/ui/collection_editor/SubcollectionsEditTab.tsx

@@ -179,7 +179,7 @@ export function SubcollectionsEditTab({
 
                         {totalEntityViews === 0 &&
                             <InfoLabel>
-                                COMING SOON: You can define your own custom views by uploading it with the CLI
+                                <b>COMING SOON</b> Define your own custom views by uploading it with the CLI
                             </InfoLabel>
                         }
 

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

@@ -16,8 +16,7 @@ import {
     PropertyConfig,
     Select,
     Tooltip,
-    Typography,
-    useFireCMSContext
+    Typography
 } from "@firecms/core";
 import React, { useState } from "react";
 import { OnPropertyChangedParams, PropertyFormDialog, PropertyWithId } from "../PropertyEditView";
@@ -30,12 +29,12 @@ import { buildPropertyFromData } from "@firecms/schema_inference";
 
 export function CollectionEditorImportMapping({
                                                   importConfig,
-                                                  customFields,
+                                                  propertyConfigs,
                                                   collectionEditable
                                               }:
                                                   {
                                                       importConfig: ImportConfig,
-                                                      customFields: Record<string, PropertyConfig>,
+                                                      propertyConfigs: Record<string, PropertyConfig>,
                                                       collectionEditable: boolean
                                                   }) {
 
@@ -181,7 +180,7 @@ export function CollectionEditorImportMapping({
                                                                                         importKey
                                                                                     })}
                                                                                     propertyKey={propertyKey}
-                                                                                    customFields={customFields}/>}
+                                                                                    propertyConfigs={propertyConfigs}/>}
                                               />;
                                           }}/>
             </Container>
@@ -203,7 +202,7 @@ export function CollectionEditorImportMapping({
                 }}
                 autoOpenTypeSelect={false}
                 existingProperty={false}
-                customFields={customFields}/>
+                propertyConfigs={propertyConfigs}/>
 
             <div style={{ height: "52px" }}/>
         </div>
@@ -215,7 +214,7 @@ function PropertySelect({
                             property,
                             onPropertyChanged,
                             propertyKey,
-                            customFields,
+                            propertyConfigs,
                             disabled
                         }: {
     property: Property | null,
@@ -226,13 +225,12 @@ function PropertySelect({
                             previousId,
                             namespace
                         }: OnPropertyChangedParams) => void,
-    customFields: Record<string, PropertyConfig>,
+    propertyConfigs: Record<string, PropertyConfig>,
     disabled?: boolean
 }) {
 
-    const { fields } = useFireCMSContext();
     const fieldId = property ? getFieldId(property) : null;
-    const widget = property ? getFieldConfig(property, fields) : null;
+    const widget = property ? getFieldConfig(property, propertyConfigs) : null;
 
     const [selectOpen, setSelectOpen] = useState(false);
 
@@ -253,7 +251,7 @@ function PropertySelect({
                 return <FieldConfigBadge propertyConfig={widget}/>
             }}
             onValueChange={(newSelectedWidgetId) => {
-                const newProperty = updatePropertyFromWidget(property, newSelectedWidgetId, customFields)
+                const newProperty = updatePropertyFromWidget(property, newSelectedWidgetId, propertyConfigs)
                 if (!propertyKey) return;
                 onPropertyChanged({
                     id: propertyKey,

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

@@ -5,11 +5,11 @@ import { PropertyFormDialog } from "../PropertyEditView";
 import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath } from "../util";
 import { PropertyTree } from "../PropertyTree";
 
-export function BlockPropertyField({ disabled, getData, allowDataInference, customFields, collectionEditable }: {
+export function BlockPropertyField({ disabled, getData, allowDataInference, propertyConfigs, collectionEditable }: {
     disabled: boolean;
     getData?: () => Promise<object[]>;
     allowDataInference: boolean;
-    customFields: Record<string, PropertyConfig>,
+    propertyConfigs: Record<string, PropertyConfig>,
     collectionEditable: boolean;
 }) {
 
@@ -128,7 +128,7 @@ export function BlockPropertyField({ disabled, getData, allowDataInference, cust
                 autoOpenTypeSelect={!selectedPropertyKey}
                 onPropertyChanged={onPropertyCreated}
                 existingPropertyKeys={selectedPropertyKey ? undefined : values.oneOf?.propertiesOrder}
-                customFields={customFields}/>}
+                propertyConfigs={propertyConfigs}/>}
 
         </>);
 }

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

@@ -15,11 +15,11 @@ import { PropertyTree } from "../PropertyTree";
 import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath, namespaceToPropertiesPath } from "../util";
 import { FieldHelperView } from "./FieldHelperView";
 
-export function MapPropertyField({ disabled, getData, allowDataInference, customFields, collectionEditable }: {
+export function MapPropertyField({ disabled, getData, allowDataInference, propertyConfigs, collectionEditable }: {
     disabled: boolean;
     getData?: () => Promise<object[]>;
     allowDataInference: boolean;
-    customFields: Record<string, PropertyConfig>,
+    propertyConfigs: Record<string, PropertyConfig>,
     collectionEditable: boolean;
 }) {
 
@@ -105,7 +105,7 @@ export function MapPropertyField({ disabled, getData, allowDataInference, custom
 
                     {empty &&
                         <Typography variant={"label"}
-                                    className="h-full flex items-center justify-center p-2">
+                                    className="h-full flex items-center justify-center p-4">
                             Add the first property to this group
                         </Typography>}
                 </Paper>
@@ -150,7 +150,7 @@ export function MapPropertyField({ disabled, getData, allowDataInference, custom
                 autoOpenTypeSelect={!selectedPropertyKey}
                 onPropertyChanged={onPropertyCreated}
                 existingPropertyKeys={selectedPropertyKey ? undefined : propertiesOrder}
-                customFields={customFields}
+                propertyConfigs={propertyConfigs}
             />
 
         </>);

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

@@ -2,6 +2,7 @@ import React from "react";
 import { Field, getIn, useFormikContext } from "formik";
 import {
     CircularProgress,
+    EntityCollection,
     getIconForView,
     NumberProperty,
     Select,

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

@@ -21,7 +21,7 @@ export function RepeatPropertyField({
                                         disabled,
                                         getData,
                                         allowDataInference,
-                                        customFields,
+                                        propertyConfigs,
                                         collectionEditable
                                     }: {
     showErrors: boolean,
@@ -29,12 +29,10 @@ export function RepeatPropertyField({
     disabled: boolean,
     getData?: () => Promise<object[]>;
     allowDataInference: boolean;
-    customFields: Record<string, PropertyConfig>,
+    propertyConfigs: Record<string, PropertyConfig>,
     collectionEditable: boolean;
 }) {
 
-    const { fields } = useFireCMSContext();
-
     const {
         values,
         handleChange,
@@ -52,7 +50,7 @@ export function RepeatPropertyField({
         setFieldValue("of", property);
     }, []);
 
-    const widget = ofProperty && getFieldConfig(ofProperty, fields);
+    const widget = ofProperty && getFieldConfig(ofProperty, propertyConfigs);
     return (
         <>
             <div className={"col-span-12"}>
@@ -97,7 +95,7 @@ export function RepeatPropertyField({
                                 includeIdAndName={false}
                                 onPropertyChanged={onPropertyChanged}
                                 forceShowErrors={showErrors}
-                                customFields={customFields}
+                                propertyConfigs={propertyConfigs}
                                 collectionEditable={collectionEditable}
                             />
                         </Paper>

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

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

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

@@ -0,0 +1,89 @@
+import React from "react";
+import { StringPropertyValidation } from "./validation/StringPropertyValidation";
+import { ValidationPanel } from "./validation/ValidationPanel";
+import { getIn, useFormikContext } from "formik";
+
+import { Select, SelectItem, TextField } from "@firecms/core";
+
+export function UrlPropertyField({
+                                     disabled,
+                                     showErrors
+                                 }: {
+    disabled: boolean;
+    showErrors: boolean;
+}) {
+
+    const { values, setFieldValue } = useFormikContext();
+
+    const urlValue = getIn(values, "url");
+
+    return (
+        <>
+            <div className={"col-span-12"}>
+
+                <Select
+                    disabled={disabled}
+                    position={"item-aligned"}
+                    onValueChange={(value: string) => {
+                        if (value === "[NONE]")
+                            setFieldValue("url", true);
+                        else
+                            setFieldValue("url", value);
+                    }}
+                    label={"Preview type"}
+                    renderValue={(value: string) => {
+                        switch (value) {
+                            case "image":
+                                return "Image";
+                            case "video":
+                                return "Video";
+                            case "audio":
+                                return "Audio";
+                            default:
+                                return "Display URL";
+                        }
+                    }}
+                    value={urlValue ?? "[NONE]"}>
+                    <SelectItem value={"[NONE]"}>
+                        Display URL
+                    </SelectItem>
+                    <SelectItem value={"image"}>
+                        Image
+                    </SelectItem>
+                    <SelectItem value={"video"}>
+                        Video
+                    </SelectItem>
+                    <SelectItem value={"audio"}>
+                        Audio
+                    </SelectItem>
+                </Select>
+            </div>
+
+            <div className={"col-span-12"}>
+
+                <ValidationPanel>
+
+                    <StringPropertyValidation disabled={disabled}
+                                              max={true}
+                                              min={true}
+                                              trim={true}
+                                              showErrors={showErrors}/>
+
+                </ValidationPanel>
+
+            </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/templates/blog_template.ts

@@ -1,14 +1,13 @@
-import { EntityCollection } from "@firecms/firebase";
+import { EntityCollection, makePropertiesEditable } from "@firecms/core";
 
 export const blogCollectionTemplate:EntityCollection = {
     path: "blog",
     name: "Blog",
     singularName: "Blog entry",
-    group: "Content",
     icon: "article",
     description: "A collection of blog entries",
     defaultSize: "l",
-    properties: {
+    properties: makePropertiesEditable({
         name: {
             name: "Name",
             validation: { required: true },
@@ -108,7 +107,7 @@ export const blogCollectionTemplate:EntityCollection = {
                 previewAsTag: true
             }
         }
-    },
+    }),
     initialFilter: {
         status: ["==", "published"]
     }

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

@@ -1,13 +1,12 @@
-import { EntityCollection } from "@firecms/core";
+import { EntityCollection, makePropertiesEditable } from "@firecms/core";
 
 export const productsCollectionTemplate: EntityCollection = {
     path: "products",
     name: "Products",
     singularName: "Product",
-    group: "Main",
     icon: "shopping_cart",
     description: "List of the products currently sold in your shop",
-    properties: {
+    properties: makePropertiesEditable({
         name: {
             dataType: "string",
             name: "Name",
@@ -84,6 +83,5 @@ export const productsCollectionTemplate: EntityCollection = {
             name: "Added on",
             autoValue: "on_create"
         }
-    }
-
+    })
 };