@firecms/collection_editor 3.0.0-beta.12 → 3.0.0-beta.14

package/dist/types/collection_editor_controller.d.ts

@@ -34,5 +34,4 @@ export interface CollectionEditorController {
         existingEntities: Entity<any>[];
     }) => void;
     configPermissions: CollectionEditorPermissionsBuilder;
-    getPathSuggestions?: (path: string) => Promise<string[]>;
 }

package/dist/ui/collection_editor/CollectionEditorWelcomeView.d.ts

@@ -6,7 +6,7 @@ export declare function CollectionEditorWelcomeView({ path, pathSuggestions, par
     parentCollection?: EntityCollection;
     onContinue: (importData?: object[], propertiesOrder?: string[]) => void;
     existingCollectionPaths?: string[];
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element | null;
 export declare function TemplateButton({ title, subtitle, icon, onClick }: {
     title: string;
     icon: React.ReactNode;

package/dist/ui/collection_editor/PropertyTree.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { AdditionalFieldDelegate, CMSType, PropertiesOrBuilders, PropertyOrBuilder } from "@firecms/core";
-import { DraggableProvided } from "@hello-pangea/dnd";
 export declare const PropertyTree: React.MemoExoticComponent<(<M extends {
     [Key: string]: CMSType;
 }>({ namespace, selectedPropertyKey, onPropertyClick, properties, propertiesOrder: propertiesOrderProp, additionalFields, errors, onPropertyMove, onPropertyRemove, className, inferredPropertyKeys, collectionEditable }: {
@@ -17,13 +16,13 @@ export declare const PropertyTree: React.MemoExoticComponent<(<M extends {
     inferredPropertyKeys?: string[];
     collectionEditable: boolean;
 }) => import("react/jsx-runtime").JSX.Element)>;
-export declare function PropertyTreeEntry({ propertyKey, namespace, propertyOrBuilder, additionalField, provided, selectedPropertyKey, errors, onPropertyClick, onPropertyMove, onPropertyRemove, inferredPropertyKeys, collectionEditable }: {
+export declare function PropertyTreeEntry({ id, propertyKey, namespace, propertyOrBuilder, additionalField, selectedPropertyKey, errors, onPropertyClick, onPropertyMove, onPropertyRemove, inferredPropertyKeys, collectionEditable }: {
+    id: string;
     propertyKey: string;
     namespace?: string;
     propertyOrBuilder: PropertyOrBuilder;
     additionalField?: AdditionalFieldDelegate<any>;
     selectedPropertyKey?: string;
-    provided: DraggableProvided;
     errors: Record<string, any>;
     onPropertyClick?: (propertyKey: string, namespace?: string) => void;
     onPropertyMove?: (propertiesOrder: string[], namespace?: string) => void;

package/dist/useCollectionEditorPlugin.d.ts

@@ -25,11 +25,11 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
         }>;
         icon: React.ReactNode;
     };
-    getPathSuggestions?: (path?: string) => Promise<string[]>;
     collectionInference?: CollectionInference;
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
     getUser?: (uid: string) => USER | null;
     onAnalyticsEvent?: (event: string, params?: object) => void;
+    includeIntroView?: boolean;
 }
 /**
  * Use this hook to initialise the Collection Editor plugin.
@@ -42,5 +42,5 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
  * @param getUser
  * @param collectionInference
  */
-export declare function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, USER extends User = User>({ collectionConfigController, configPermissions, reservedGroups, extraView, getPathSuggestions, getUser, collectionInference, getData, onAnalyticsEvent, }: CollectionConfigControllerProps<EC, USER>): FireCMSPlugin<any, any, PersistedCollection>;
-export declare function IntroWidget({}: {}): import("react/jsx-runtime").JSX.Element | null;
+export declare function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, USER extends User = User>({ collectionConfigController, configPermissions, reservedGroups, extraView, getUser, collectionInference, getData, onAnalyticsEvent, includeIntroView }: CollectionConfigControllerProps<EC, USER>): FireCMSPlugin<any, any, PersistedCollection>;
+export declare function IntroWidget(): import("react/jsx-runtime").JSX.Element | null;

package/package.json

@@ -1,19 +1,18 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-beta.12",
+  "version": "3.0.0-beta.14",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/data_export": "^3.0.0-beta.12",
-    "@firecms/data_import": "^3.0.0-beta.12",
-    "@firecms/data_import_export": "^3.0.0-beta.12",
-    "@firecms/formex": "^3.0.0-beta.12",
-    "@firecms/schema_inference": "^3.0.0-beta.12",
-    "@firecms/ui": "^3.0.0-beta.12",
-    "@hello-pangea/dnd": "^17.0.0",
+    "@firecms/data_export": "^3.0.0-beta.14",
+    "@firecms/data_import": "^3.0.0-beta.14",
+    "@firecms/data_import_export": "^3.0.0-beta.14",
+    "@firecms/formex": "^3.0.0-beta.14",
+    "@firecms/schema_inference": "^3.0.0-beta.14",
+    "@firecms/ui": "^3.0.0-beta.14",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.4.1"
   },
@@ -70,5 +69,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8de3edb4560643922fe44e9c357985f64c3951c1"
+  "gitHead": "22973ce94cd4ee8ccb4d586ba7f15383dc2cf30b"
 }

package/src/ConfigControllerProvider.tsx

@@ -49,8 +49,6 @@ export interface ConfigControllerProviderProps {
         icon: React.ReactNode
     };
 
-    getPathSuggestions?: (path?: string) => Promise<string[]>;
-
     getUser?: (uid: string) => User | null
 
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
@@ -67,7 +65,6 @@ export const ConfigControllerProvider = React.memo(
                                           reservedGroups,
                                           collectionInference,
                                           extraView,
-                                          getPathSuggestions,
                                           getUser,
                                           getData,
                                           onAnalyticsEvent,
@@ -230,7 +227,6 @@ export const ConfigControllerProvider = React.memo(
                         createCollection,
                         editProperty,
                         configPermissions: configPermissions ?? defaultConfigPermissions,
-                        getPathSuggestions,
                     }}>
 
                     {children}
@@ -244,7 +240,6 @@ export const ConfigControllerProvider = React.memo(
                         getData={getData}
                         reservedGroups={reservedGroups}
                         extraView={extraView}
-                        pathSuggestions={getPathSuggestions}
                         getUser={getUser}
                         handleClose={(collection) => {
                             if (currentDialog?.redirect) {

package/src/types/collection_editor_controller.tsx

@@ -41,6 +41,4 @@ export interface CollectionEditorController {
 
     configPermissions: CollectionEditorPermissionsBuilder;
 
-    getPathSuggestions?: (path: string) => Promise<string[]>;
-
 }

package/src/ui/HomePageEditorCollectionAction.tsx

@@ -49,7 +49,7 @@ export function HomePageEditorCollectionAction({
         <div>
             {permissions.deleteCollections &&
                 <Menu
-                    trigger={<IconButton>
+                    trigger={<IconButton size={"small"}>
                         <MoreVertIcon size={"small"}/>
                     </IconButton>}
                 >
@@ -70,6 +70,7 @@ export function HomePageEditorCollectionAction({
 
             {permissions.editCollections &&
                 <IconButton
+                    size={"small"}
                     onClick={(event) => {
                         onEditCollectionClicked();
                     }}>

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -117,6 +117,7 @@ export function CollectionDetailsForm({
     }
 
     const showErrors = submitCount > 0;
+
     return (
         <div className={"overflow-auto my-auto"}>
             <Container maxWidth={"4xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
@@ -194,6 +195,7 @@ export function CollectionDetailsForm({
                             {groupOptions?.map((group, index) => {
                                 return <AutocompleteItem
                                     key={index + "_" + group}
+                                    className={"pr-6 pl-14"}
                                     onClick={() => {
                                         setAutoCompleteOpen(false);
                                         setFieldValue("group", group ?? null);
@@ -217,6 +219,25 @@ export function CollectionDetailsForm({
                         value={values.openEntityMode ?? "side_panel"}
                         onChange={(value) => setFieldValue("openEntityMode", value)}/>
 
+                    <div className={"col-span-12"}>
+                        <BooleanSwitchWithLabel
+                            position={"start"}
+                            size={"large"}
+                            allowIndeterminate={true}
+                            label={values.history === null || values.history === undefined ? "Document history revisions enabled if enabled globally" : (
+                                values.history ? "Document history revisions ENABLED" : "Document history revisions NOT enabled"
+                            )}
+                            onValueChange={(v) => setFieldValue("history", v)}
+                            value={values.history === undefined ? null : values.history}
+                        />
+                        <FieldCaption>
+                            When enabled, each document in this collection will have a history of changes.
+                            This is useful for auditing purposes. The data is stored in a subcollection of the document
+                            in your database, called <b>__history</b>.
+                        </FieldCaption>
+                    </div>
+
+
                     <div className={"col-span-12 mt-8"}>
                         <ExpandablePanel
                             expanded={advancedPanelExpanded}
@@ -294,7 +315,7 @@ export function CollectionDetailsForm({
                                         value={values.description ?? ""}
                                         onChange={handleChange}
                                         multiline
-                                        rows={2}
+                                        minRows={2}
                                         aria-describedby="description-helper-text"
                                         label="Description"
                                     />
@@ -323,6 +344,20 @@ export function CollectionDetailsForm({
                                         ))}
                                     </Select>
                                 </div>
+
+                                <div className={"col-span-12"}>
+                                    <BooleanSwitchWithLabel
+                                        position={"start"}
+                                        size={"large"}
+                                        label={values.includeJsonView === undefined || values.includeJsonView ? "Include JSON view" : "Do not include JSON view"}
+                                        onValueChange={(v) => setFieldValue("includeJsonView", v)}
+                                        value={values.includeJsonView === undefined ? true : values.includeJsonView}
+                                    />
+                                    <FieldCaption>
+                                        Include the JSON representation of the document.
+                                    </FieldCaption>
+                                </div>
+
                                 <div className={"col-span-12"}>
                                     <Select
                                         name="customId"
@@ -334,12 +369,7 @@ export function CollectionDetailsForm({
                                         onValueChange={(v) => {
                                             if (v === "code_defined")
                                                 throw new Error("This should not happen");
-                                            else if (v === "true")
-                                                setFieldValue("customId", true);
-                                            else if (v === "false")
-                                                setFieldValue("customId", false);
-                                            else if (v === "optional")
-                                                setFieldValue("customId", "optional");
+                                            setFieldValue("customId", v);
                                         }}
                                         value={customIdValue ?? ""}
                                         renderValue={(value: any) => {
@@ -364,9 +394,10 @@ export function CollectionDetailsForm({
                                         </SelectItem>
                                     </Select>
                                 </div>
-                                <div className={"col-span-12"}>
+                                <div className={"col-span-12 mt-4"}>
                                     <BooleanSwitchWithLabel
                                         position={"start"}
+                                        size={"large"}
                                         label="Collection group"
                                         onValueChange={(v) => setFieldValue("collectionGroup", v)}
                                         value={values.collectionGroup ?? false}
@@ -380,6 +411,7 @@ export function CollectionDetailsForm({
                                 <div className={"col-span-12"}>
                                     <BooleanSwitchWithLabel
                                         position={"start"}
+                                        size={"large"}
                                         label="Enable text search for this collection"
                                         onValueChange={(v) => setFieldValue("textSearchEnabled", v)}
                                         value={values.textSearchEnabled ?? false}

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -638,7 +638,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                                     The changes done in this editor will override the properties defined in code.
                                     You can delete the overridden values to revert to the state defined in code.
                                 </Typography>
-                                <Button variant={"neutral"}
+                                <Button color={"neutral"}
                                         onClick={() => {
                                             setDeleteRequested(true);
                                         }}>Reset to code</Button>

package/src/ui/collection_editor/CollectionEditorWelcomeView.tsx

@@ -37,18 +37,6 @@ export function CollectionEditorWelcomeView({
         }
     }, [existingCollectionPaths, path, pathSuggestions]);
 
-    // const {
-    //     values,
-    //     setFieldValue,
-    //     setValues,
-    //     handleChange,
-    //     touched,
-    //     errors,
-    //     setFieldTouched,
-    //     isSubmitting,
-    //     submitCount
-    // } = useFormex<EntityCollection>();
-
     const {
         values,
         setFieldValue,
@@ -56,6 +44,11 @@ export function CollectionEditorWelcomeView({
         submitCount
     } = useFormex<EntityCollection>();
 
+    const noSuggestions = !loadingPathSuggestions && (filteredPathSuggestions ?? [])?.length === 0;
+    if (!noSuggestions) {
+        return null;
+    }
+
     return (
         <div className={"overflow-auto my-auto"}>
             <Container maxWidth={"4xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
@@ -97,12 +90,6 @@ export function CollectionEditorWelcomeView({
                             </Chip>
                         ))}
 
-                        {!loadingPathSuggestions && (filteredPathSuggestions ?? [])?.length === 0 &&
-                            <Typography variant={"caption"}>
-                                No suggestions
-                            </Typography>
-                        }
-
                     </div>
 
                 </div>
@@ -202,9 +189,6 @@ export function TemplateButton({
                     <Typography variant={"subtitle1"}>
                         {title}
                     </Typography>
-                    {/*<Typography>*/}
-                    {/*    {subtitle}*/}
-                    {/*</Typography>*/}
 
                 </div>
             </Card>

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -310,8 +310,9 @@ export function CollectionPropertiesEditorForm({
     };
 
     const body = (
-        <div className={"grid grid-cols-12 gap-2 h-full bg-surface-50 dark:bg-surface-900"}>
+        <div className={"grid grid-cols-12 gap-2 h-full bg-white dark:bg-surface-950"}>
             <div className={cls(
+                "bg-surface-50 dark:bg-surface-900",
                 "p-4 md:p-8 pb-20 md:pb-20",
                 "col-span-12 lg:col-span-5 h-full overflow-auto",
                 !asDialog && "border-r " + defaultBorderMixin
@@ -401,8 +402,8 @@ export function CollectionPropertiesEditorForm({
 
             {!asDialog &&
                 <div className={"col-span-12 lg:col-span-7 p-4 md:py-8 md:px-4 h-full overflow-auto pb-20 md:pb-20"}>
-                    <Paper
-                        className="sticky top-8 p-4 min-h-full border border-transparent w-full flex flex-col justify-center ">
+                    <div
+                        className="sticky top-8 min-h-full w-full flex flex-col justify-center">
 
                         {selectedPropertyFullId &&
                             selectedProperty &&
@@ -446,7 +447,7 @@ export function CollectionPropertiesEditorForm({
                             <Typography variant={"label"} className="flex items-center justify-center">
                                 {"This property is defined as a property builder in code"}
                             </Typography>}
-                    </Paper>
+                    </div>
                 </div>}
 
             {asDialog && <PropertyFormDialog

package/src/ui/collection_editor/EnumForm.tsx

@@ -197,7 +197,7 @@ function EnumFormFields({
                                 size={"small"}
                                 buildEntry={buildEntry}
                                 onInternalIdAdded={setLastInternalIdAdded}
-                                includeAddButton={true}
+                                canAddElements={true}
                                 onValueChange={(value) => setFieldValue(enumValuesPath, value)}
                                 newDefaultEntry={{ id: "", label: "" }}/>
 

package/src/ui/collection_editor/PropertyEditView.tsx

@@ -7,7 +7,6 @@ import {
     DEFAULT_FIELD_CONFIGS,
     getFieldConfig,
     getFieldId,
-    isEmptyObject,
     isPropertyBuilder,
     isValidRegExp,
     mergeDeep,
@@ -384,7 +383,7 @@ function PropertyEditFormFields({
     }, [deferredValues, includeIdAndTitle, propertyNamespace]);
 
     useEffect(() => {
-        if (values?.id && onError && !isEmptyObject(errors)) {
+        if (values?.id && onError) {
             onError(values?.id, propertyNamespace, errors);
         }
     }, [errors, propertyNamespace, values?.id]);