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

package/dist/types/collection_editor_controller.d.ts

@@ -1,4 +1,3 @@
-import React from "react";
 import { CollectionEditorPermissionsBuilder } from "./config_permissions";
 import { Entity, Property } from "@firecms/core";
 import { PersistedCollection } from "./persisted_collection";
@@ -36,13 +35,4 @@ export interface CollectionEditorController {
     }) => void;
     configPermissions: CollectionEditorPermissionsBuilder;
     getPathSuggestions?: (path: string) => Promise<string[]>;
-    components?: {
-        /**
-         * Custom component to render the database field
-         */
-        DatabaseField?: React.ComponentType<{
-            databaseId?: string;
-            onDatabaseIdUpdate: (databaseId: string) => void;
-        }>;
-    };
 }

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

@@ -1,5 +1,6 @@
+import React from "react";
 import { EntityCollection } from "@firecms/core";
-export declare function CollectionDetailsForm({ isNewCollection, reservedGroups, existingPaths, existingIds, groups, parentCollection }: {
+export declare function CollectionDetailsForm({ isNewCollection, reservedGroups, existingPaths, existingIds, groups, parentCollection, children }: {
     isNewCollection: boolean;
     reservedGroups?: string[];
     existingPaths?: string[];
@@ -7,4 +8,5 @@ export declare function CollectionDetailsForm({ isNewCollection, reservedGroups,
     groups: string[] | null;
     parentCollection?: EntityCollection;
     parentCollectionIds?: string[];
+    children?: React.ReactNode;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,5 @@
+export declare function LayoutModeSwitch({ value, onChange, className }: {
+    value: "side_panel" | "full_screen";
+    onChange: (value: "side_panel" | "full_screen") => void;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/useCollectionEditorPlugin.d.ts

@@ -30,15 +30,6 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
     getUser?: (uid: string) => USER | null;
     onAnalyticsEvent?: (event: string, params?: object) => void;
-    components?: {
-        /**
-         * Custom component to render the database field
-         */
-        DatabaseField?: React.ComponentType<{
-            databaseId?: string;
-            onDatabaseIdUpdate: (databaseId: string) => void;
-        }>;
-    };
 }
 /**
  * Use this hook to initialise the Collection Editor plugin.
@@ -51,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, components }: CollectionConfigControllerProps<EC, USER>): FireCMSPlugin<any, any, PersistedCollection>;
+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;

package/dist/utils/collections.d.ts

@@ -3,4 +3,4 @@ import { PersistedCollection } from "../types/persisted_collection";
 /**
  * Function in charge of merging collections defined in code with those stored in the backend.
  */
-export declare const mergeCollections: (baseCollections: EntityCollection[], backendCollections: PersistedCollection[], modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | void) => EntityCollection<any, any>[];
+export declare const mergeCollections: (baseCollections: EntityCollection[], backendCollections?: PersistedCollection[], modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | void) => EntityCollection<any, any>[];

package/package.json

@@ -1,24 +1,25 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-beta.11",
+  "version": "3.0.0-beta.12",
   "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.11",
-    "@firecms/data_import": "^3.0.0-beta.11",
-    "@firecms/data_import_export": "^3.0.0-beta.11",
-    "@firecms/formex": "^3.0.0-beta.11",
-    "@firecms/schema_inference": "^3.0.0-beta.11",
-    "@firecms/ui": "^3.0.0-beta.11",
+    "@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",
     "json5": "^2.2.3",
-    "prism-react-renderer": "^2.4.0"
+    "prism-react-renderer": "^2.4.1"
   },
   "peerDependencies": {
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
     "react-router": "^6.28.0",
     "react-router-dom": "^6.28.0"
   },
@@ -50,17 +51,17 @@
   },
   "devDependencies": {
     "@jest/globals": "^29.7.0",
-    "@types/react": "^18.3.11",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.4",
     "babel-plugin-react-compiler": "beta",
     "eslint-plugin-react-compiler": "beta",
     "jest": "^29.7.0",
-    "react-router": "^6.28.0",
-    "react-router-dom": "^6.28.0",
+    "react-router": "^6.28.2",
+    "react-router-dom": "^6.28.2",
     "ts-jest": "^29.2.5",
-    "typescript": "^5.7.2",
-    "vite": "^5.4.11"
+    "typescript": "^5.7.3",
+    "vite": "^5.4.14"
   },
   "files": [
     "dist",
@@ -69,5 +70,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cb6d419faf2664cfd6cb2603a834e4bf499a92bb"
+  "gitHead": "8de3edb4560643922fe44e9c357985f64c3951c1"
 }

package/src/ConfigControllerProvider.tsx

@@ -57,13 +57,6 @@ export interface ConfigControllerProviderProps {
 
     onAnalyticsEvent?: (event: string, params?: object) => void;
 
-    components?: {
-        /**
-         * Custom component to render the database field
-         */
-        DatabaseField?: React.ComponentType<{ databaseId?: string, onDatabaseIdUpdate: (databaseId:string) => void }>;
-    };
-
 }
 
 export const ConfigControllerProvider = React.memo(
@@ -78,7 +71,6 @@ export const ConfigControllerProvider = React.memo(
                                           getUser,
                                           getData,
                                           onAnalyticsEvent,
-                                          components
                                       }: PropsWithChildren<ConfigControllerProviderProps>) {
 
         const navigation = useNavigationController();
@@ -239,7 +231,6 @@ export const ConfigControllerProvider = React.memo(
                         editProperty,
                         configPermissions: configPermissions ?? defaultConfigPermissions,
                         getPathSuggestions,
-                        components
                     }}>
 
                     {children}
@@ -277,7 +268,7 @@ export const ConfigControllerProvider = React.memo(
                         getData={getData && currentPropertyDialog?.editedCollectionId
                             ? () => {
                                 console.debug("get data for property", currentPropertyDialog?.editedCollectionId);
-                                const resolvedPath = navigation.resolveAliasesFrom(currentPropertyDialog.editedCollectionId!)
+                                const resolvedPath = navigation.resolveIdsFrom(currentPropertyDialog.editedCollectionId!)
                                 return getData(resolvedPath, []);
                             }
                             : undefined}

package/src/types/collection_editor_controller.tsx

@@ -43,11 +43,4 @@ export interface CollectionEditorController {
 
     getPathSuggestions?: (path: string) => Promise<string[]>;
 
-    components?: {
-        /**
-         * Custom component to render the database field
-         */
-        DatabaseField?: React.ComponentType<{ databaseId?: string, onDatabaseIdUpdate: (databaseId: string) => void }>;
-    };
-
 }

package/src/ui/HomePageEditorCollectionAction.tsx

@@ -14,6 +14,7 @@ export function HomePageEditorCollectionAction({
                                                    collection
                                                }: PluginHomePageActionsProps) {
 
+
     const snackbarController = useSnackbarController();
     const authController = useAuthController();
     const configController = useCollectionsConfigController();

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -23,6 +23,7 @@ import {
 
 import { Field, getIn, useFormex } from "@firecms/formex";
 import { useCollectionEditorController } from "../../useCollectionEditorController";
+import { LayoutModeSwitch } from "./LayoutModeSwitch";
 
 export function CollectionDetailsForm({
                                           isNewCollection,
@@ -30,7 +31,8 @@ export function CollectionDetailsForm({
                                           existingPaths,
                                           existingIds,
                                           groups,
-                                          parentCollection
+                                          parentCollection,
+                                          children
                                       }: {
     isNewCollection: boolean,
     reservedGroups?: string[];
@@ -39,6 +41,7 @@ export function CollectionDetailsForm({
     groups: string[] | null;
     parentCollection?: EntityCollection;
     parentCollectionIds?: string[];
+    children?: React.ReactNode;
 }) {
 
     const groupRef = React.useRef<HTMLInputElement>(null);
@@ -88,8 +91,6 @@ export function CollectionDetailsForm({
         }
     }, [errors.id]);
 
-    const DatabaseField = collectionEditor.components?.DatabaseField ?? DefaultDatabaseField;
-
     const collectionIcon = <IconForView collectionOrView={values}/>;
 
     const groupOptions = groups?.filter((group) => !reservedGroups?.includes(group));
@@ -126,8 +127,8 @@ export function CollectionDetailsForm({
                         <Typography variant={!isNewCollection ? "h5" : "h4"} className={"flex-grow"}>
                             {isNewCollection ? "New collection" : `${values?.name} collection`}
                         </Typography>
-                        <DatabaseField databaseId={values.databaseId}
-                                       onDatabaseIdUpdate={updateDatabaseId}/>
+                        <DefaultDatabaseField databaseId={values.databaseId}
+                                              onDatabaseIdUpdate={updateDatabaseId}/>
 
                         <Tooltip title={"Change icon"}
                                  asChild={true}>
@@ -207,9 +208,16 @@ export function CollectionDetailsForm({
                         <FieldCaption>
                             {showErrors && Boolean(errors.group) ? errors.group : "Group in the home page"}
                         </FieldCaption>
+
+
                     </div>}
 
-                    <div className={"col-span-12"}>
+                    <LayoutModeSwitch
+                        className={"col-span-12"}
+                        value={values.openEntityMode ?? "side_panel"}
+                        onChange={(value) => setFieldValue("openEntityMode", value)}/>
+
+                    <div className={"col-span-12 mt-8"}>
                         <ExpandablePanel
                             expanded={advancedPanelExpanded}
                             onExpandedChange={setAdvancedPanelExpanded}
@@ -382,9 +390,13 @@ export function CollectionDetailsForm({
                                         for large collections, as it may incur in performance and cost issues.
                                     </FieldCaption>
                                 </div>
+
+
                             </div>
                         </ExpandablePanel>
 
+                        {children}
+
                     </div>
 
                 </div>

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { useEffect, useRef, useState } from "react";
 import {
     CircularProgressCenter,
+    ConfirmationDialog,
     Entity,
     EntityCollection,
     ErrorView,
@@ -37,7 +38,8 @@ import {
     IconButton,
     LoadingButton,
     Tab,
-    Tabs
+    Tabs,
+    Typography
 } from "@firecms/ui";
 import { YupSchema } from "./CollectionYupValidation";
 import { CollectionDetailsForm } from "./CollectionDetailsForm";
@@ -487,7 +489,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
     const pathError = validatePath(path, isNewCollection, existingPaths, values.id);
 
     const parentPaths = !pathError && parentCollectionIds ? navigation.convertIdsToPaths(parentCollectionIds) : undefined;
-    const resolvedPath = !pathError ? navigation.resolveAliasesFrom(updatedFullPath) : undefined;
+    const resolvedPath = !pathError ? navigation.resolveIdsFrom(updatedFullPath) : undefined;
     const getDataWithPath = resolvedPath && getData ? async () => {
         const data = await getData(resolvedPath, parentPaths ?? []);
         if (existingEntities) {
@@ -533,14 +535,30 @@ function CollectionEditorInternal<M extends Record<string, any>>({
     };
 
     const editable = collection?.editable === undefined || collection?.editable === true;
+    // @ts-ignore
+    const isMergedCollection = collection?.merged ?? false;
     const collectionEditable = editable || isNewCollection;
 
+    const [deleteRequested, setDeleteRequested] = useState(false);
+
+    const deleteCollection = () => {
+        if (!collection) return;
+        configController?.deleteCollection({ id: collection.id }).then(() => {
+            setDeleteRequested(false);
+            handleCancel();
+            snackbarController.open({
+                message: "Collection deleted",
+                type: "success"
+            });
+        });
+    };
+
     return <DialogContent fullHeight={true}>
         <Formex value={formController}>
 
             <>
                 {!isNewCollection && <Tabs value={currentView}
-                                           innerClassName={cls(defaultBorderMixin, "justify-end bg-surface-50 dark:bg-surface-950 border-b")}
+                                           innerClassName={cls(defaultBorderMixin, "px-4 h-14 w-full justify-end bg-surface-50 dark:bg-surface-950 border-b")}
                                            onValueChange={(v) => setCurrentView(v as EditorView)}>
                     <Tab value={"details"}>
                         Details
@@ -614,7 +632,18 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                             groups={groups}
                             parentCollectionIds={parentCollectionIds}
                             parentCollection={parentCollection}
-                            isNewCollection={isNewCollection}/>}
+                            isNewCollection={isNewCollection}>
+                            {!isNewCollection && isMergedCollection && <div className={"flex flex-col gap-4 mt-8"}>
+                                <Typography variant={"body2"} color={"secondary"}>This collection is defined in code.
+                                    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"}
+                                        onClick={() => {
+                                            setDeleteRequested(true);
+                                        }}>Reset to code</Button>
+                            </div>}
+                        </CollectionDetailsForm>}
 
                     {currentView === "subcollections" && collection &&
                         <SubcollectionsEditTab
@@ -748,6 +777,15 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
         </Formex>
 
+        <ConfirmationDialog
+            open={deleteRequested}
+            onAccept={deleteCollection}
+            onCancel={() => setDeleteRequested(false)}
+            title={<>Delete the stored config?</>}
+            body={<> This will <b>not
+                delete any data</b>, only
+                the stored config, and reset to the code state.</>}/>
+
     </DialogContent>
 
 }

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -228,8 +228,6 @@ export function CollectionPropertiesEditorForm({
                                    namespace
                                }: OnPropertyChangedParams) => {
 
-        console.log("!!!!!! onPropertyChanged", property)
-
         const fullId = id ? getFullId(id, namespace) : undefined;
         const propertyPath = fullId ? idToPropertiesPath(fullId) : undefined;
 

package/src/ui/collection_editor/EnumForm.tsx

@@ -183,7 +183,7 @@ function EnumFormFields({
                             variant={"text"}
                             size={"small"}
                             onClick={inferValues}>
-                        {inferring ? <CircularProgress size={"small"}/> : <AutorenewIcon/>}
+                        {inferring ? <CircularProgress size={"smallest"}/> : <AutorenewIcon/>}
                         Infer values from data
                     </Button>}
             </div>

package/src/ui/collection_editor/GetCodeDialog.tsx

@@ -28,7 +28,7 @@ export function GetCodeDialog({
                 app configuration.
                 More info in the <a
                 rel="noopener noreferrer"
-                href={"https://firecms.co/docs/customization_quickstart"}>docs</a>.
+                href={"https://firecms.co/docs/cloud/quickstart"}>docs</a>.
             </Typography>
             <Highlight
                 theme={themes.vsDark}

package/src/ui/collection_editor/LayoutModeSwitch.tsx

@@ -0,0 +1,54 @@
+import { Card, cls, SquareIcon, Tooltip, Typography, VerticalSplitIcon } from "@firecms/ui";
+
+export function LayoutModeSwitch({
+                                     value,
+                                     onChange,
+                                     className
+                                 }: {
+    value: "side_panel" | "full_screen";
+    onChange: (value: "side_panel" | "full_screen") => void;
+    className?: string;
+}) {
+
+    return <div className={cls(className)}>
+        <Typography variant={"label"} color={"secondary"} className={"ml-3.5"}>Document view</Typography>
+        <div className={cls("flex flex-row gap-4")}>
+
+            <Tooltip title={"Documents are open in a side panel"}>
+                <Card
+                    onClick={() => onChange("side_panel")}
+                    className={cls(
+                        "my-2 rounded-md mx-0 p-4 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center",
+                        "text-surface-700 dark:text-surface-accent-300",
+                        "hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary",
+                        value === "side_panel" ? "border-primary dark:border-primary" : "border-surface-400 dark:border-surface-600",
+                    )}
+                >
+                    <VerticalSplitIcon/>
+                    <Typography variant={"label"}>
+                        Side panel
+                    </Typography>
+                </Card>
+            </Tooltip>
+
+            <Tooltip title={"Documents are open full-screen"}>
+                <Card
+                    onClick={() => onChange("full_screen")}
+                    className={cls(
+                        "my-2 rounded-md mx-0 p-4 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center",
+                        "text-surface-700 dark:text-surface-accent-300",
+                        "hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary",
+                        value === "full_screen" ? "border-primary dark:border-primary" : "border-surface-400 dark:border-surface-600",
+                    )}
+                >
+                    <SquareIcon/>
+                    <Typography variant={"label"}>
+                        Full screen
+                    </Typography>
+                </Card>
+            </Tooltip>
+
+        </div>
+        <Typography variant={"caption"} color={"secondary"} className={"ml-3.5"}>Should documents be opened full screen or in an inline side dialog</Typography>
+    </div>
+}

package/src/ui/collection_editor/PropertyEditView.tsx

@@ -6,7 +6,8 @@ import {
     ConfirmationDialog,
     DEFAULT_FIELD_CONFIGS,
     getFieldConfig,
-    getFieldId, isEmptyObject,
+    getFieldId,
+    isEmptyObject,
     isPropertyBuilder,
     isValidRegExp,
     mergeDeep,

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

@@ -47,6 +47,7 @@ export function CollectionEditorImportDataPreview({
             key: p,
             disabled: false
         }))}
+        openEntityMode={"side_panel"}
         properties={properties}
         enablePopupIcon={false}/>
 

package/src/useCollectionEditorPlugin.tsx

@@ -51,13 +51,6 @@ 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 }>;
-    };
-
 }
 
 /**
@@ -82,7 +75,6 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
      collectionInference,
      getData,
      onAnalyticsEvent,
-     components
  }: CollectionConfigControllerProps<EC, USER>): FireCMSPlugin<any, any, PersistedCollection> {
 
     return {
@@ -100,7 +92,6 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
                 getUser,
                 getData,
                 onAnalyticsEvent,
-                components
             }
         },
         homePage: {

package/src/utils/collections.ts

@@ -11,7 +11,7 @@ import { PersistedCollection } from "../types/persisted_collection";
  * Function in charge of merging collections defined in code with those stored in the backend.
  */
 export const mergeCollections = (baseCollections: EntityCollection[],
-                                 backendCollections: PersistedCollection[],
+                                 backendCollections: PersistedCollection[] = [],
                                  modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | void
 ) => {
 
@@ -19,12 +19,18 @@ export const mergeCollections = (baseCollections: EntityCollection[],
         makePropertiesEditable(c.properties as Properties);
         c.subcollections?.forEach(markAsEditable);
     };
-    const storedCollections = backendCollections ?? [];
-    storedCollections.forEach(markAsEditable);
 
-    console.debug("Collections specified in code:", baseCollections);
-    console.debug("Collections stored in the backend", storedCollections);
-    const result = joinCollectionLists(baseCollections, storedCollections, [], modifyCollection);
-    console.debug("Collections after joining:", result);
+    backendCollections.forEach(markAsEditable);
+
+    const result = joinCollectionLists(baseCollections, backendCollections, [], modifyCollection);
+
+    // sort the collections so they are in the same order as the base collections
+    result.sort((a, b) => baseCollections.findIndex(c => c.id === a.id) - baseCollections.findIndex(c => c.id === b.id));
+    console.debug("Collections result", {
+        baseCollections,
+        backendCollections,
+        result
+    });
+
     return result;
 }