@firecms/collection_editor 3.0.0-canary.258 → 3.0.0-canary.259

package/dist/types/collection_inference.d.ts

@@ -1,2 +1,5 @@
 import { EntityCollection } from "@firecms/core";
+/**
+ * This function is used to infer the configuration of a collection given its path.
+ */
 export type CollectionInference = (path: string, collectionGroup: boolean, parentCollectionPaths: string[]) => Promise<Partial<EntityCollection> | null>;

package/dist/ui/EditorEntityAction.d.ts

@@ -0,0 +1,2 @@
+import { PluginFormActionProps } from "@firecms/core";
+export declare function EditorEntityAction({ path: fullPath, parentCollectionIds, collection, formContext }: PluginFormActionProps): import("react/jsx-runtime").JSX.Element;

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

@@ -11,7 +11,7 @@ type CollectionEditorFormProps = {
     extraIcon: React.ReactNode;
     getUser?: (uid: string) => User | null;
     getData?: () => Promise<object[]>;
-    doCollectionInference: (collection: PersistedCollection) => Promise<Partial<EntityCollection> | null> | undefined;
+    doCollectionInference?: (collection: PersistedCollection) => Promise<Partial<EntityCollection> | null> | undefined;
     propertyConfigs: Record<string, PropertyConfig>;
     collectionEditable: boolean;
 };

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

@@ -0,0 +1,4 @@
+import { PersistedCollection } from "../../types/persisted_collection";
+export declare function EntityActionsEditTab({ collection, }: {
+    collection: PersistedCollection;
+}): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,4 @@
+export declare function EntityActionsSelectDialog({ open, onClose }: {
+    open: boolean;
+    onClose: (selectedActionKey?: string) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-canary.258",
+  "version": "3.0.0-canary.259",
   "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-canary.258",
-    "@firecms/data_import": "^3.0.0-canary.258",
-    "@firecms/data_import_export": "^3.0.0-canary.258",
-    "@firecms/formex": "^3.0.0-canary.258",
-    "@firecms/schema_inference": "^3.0.0-canary.258",
-    "@firecms/ui": "^3.0.0-canary.258",
+    "@firecms/data_export": "^3.0.0-canary.259",
+    "@firecms/data_import": "^3.0.0-canary.259",
+    "@firecms/data_import_export": "^3.0.0-canary.259",
+    "@firecms/formex": "^3.0.0-canary.259",
+    "@firecms/schema_inference": "^3.0.0-canary.259",
+    "@firecms/ui": "^3.0.0-canary.259",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.4.1"
   },
@@ -69,5 +69,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2d408ab25c6f29305fa6052d2aff07a5ab3daa14"
+  "gitHead": "a4ab5e6aacfb9e10ee8c1c72354c939fb2275ab0"
 }

package/src/types/collection_inference.ts

@@ -1,3 +1,6 @@
 import { EntityCollection } from "@firecms/core";
 
+/**
+ * This function is used to infer the configuration of a collection given its path.
+ */
 export type CollectionInference = (path: string, collectionGroup: boolean, parentCollectionPaths: string[]) => Promise<Partial<EntityCollection> | null>;

package/src/ui/EditorCollectionAction.tsx

@@ -28,6 +28,7 @@ export function EditorCollectionAction({
         asChild={true}
         title={canEditCollection ? "Edit collection" : "You don't have permissions to edit this collection"}>
         <IconButton
+            size={"small"}
             color={"primary"}
             disabled={!canEditCollection}
             onClick={canEditCollection
@@ -39,7 +40,7 @@ export function EditorCollectionAction({
                     existingEntities: tableController?.data ?? []
                 })
                 : undefined}>
-            <SettingsIcon/>
+            <SettingsIcon size={"small"}/>
         </IconButton>
     </Tooltip>;
 
@@ -48,9 +49,3 @@ export function EditorCollectionAction({
     </>
 
 }
-
-function getObjectOrNull(o?: object): object | null {
-    if (o && Object.keys(o).length === 0)
-        return o
-    return o ?? null;
-}

package/src/ui/EditorEntityAction.tsx

@@ -0,0 +1,51 @@
+import { PluginFormActionProps, useAuthController, useNavigationController } from "@firecms/core";
+import { IconButton, SettingsIcon, Tooltip, } from "@firecms/ui";
+
+import { useCollectionEditorController } from "../useCollectionEditorController";
+import { PersistedCollection } from "../types/persisted_collection";
+
+export function EditorEntityAction({
+                                       path: fullPath,
+                                       parentCollectionIds,
+                                       collection,
+                                       formContext
+                                   }: PluginFormActionProps) {
+
+    const authController = useAuthController();
+    const navigationController = useNavigationController();
+    const collectionEditorController = useCollectionEditorController();
+
+    const parentCollection = navigationController.getCollectionFromIds(parentCollectionIds);
+
+    const canEditCollection = collectionEditorController.configPermissions
+        ? collectionEditorController.configPermissions({
+            user: authController.user,
+            collection
+        }).editCollections
+        : true;
+
+    const isDirty = formContext?.formex.dirty ?? false;
+
+    const editorButton = <Tooltip
+        asChild={true}
+        title={canEditCollection ? (isDirty ? "You need to save the document before changing the schema" : "Edit schema for this form") : "You don't have permissions to edit this collection"}>
+        <IconButton
+            color={"primary"}
+            disabled={!canEditCollection || isDirty}
+            onClick={canEditCollection
+                ? () => collectionEditorController?.editCollection({
+                    id: collection.id,
+                    fullPath,
+                    parentCollectionIds,
+                    parentCollection: parentCollection as PersistedCollection,
+                })
+                : undefined}>
+            <SettingsIcon size={"small"}/>
+        </IconButton>
+    </Tooltip>;
+
+    return <>
+        {editorButton}
+    </>
+
+}

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -9,6 +9,7 @@ import {
     isPropertyBuilder,
     MapProperty,
     mergeDeep,
+    NavigationResult,
     Properties,
     PropertiesOrBuilders,
     Property,
@@ -17,7 +18,6 @@ import {
     randomString,
     removeInitialAndTrailingSlashes,
     removeUndefined,
-    NavigationResult,
     useAuthController,
     useCustomizationController,
     useNavigationController,
@@ -57,6 +57,7 @@ import { cleanPropertiesFromImport } from "./import/clean_import_data";
 import { PersistedCollection } from "../../types/persisted_collection";
 import { Formex, FormexController, useCreateFormex } from "@firecms/formex";
 import { getFullIdPath } from "./util";
+import { EntityActionsEditTab } from "./EntityActionsEditTab";
 
 export interface CollectionEditorDialogProps {
     open: boolean;
@@ -140,7 +141,8 @@ type EditorView = "welcome"
     | "properties"
     | "loading"
     | "extra_view"
-    | "subcollections";
+    | "subcollections"
+    | "custom_actions";
 
 export function CollectionEditor(props: CollectionEditorDialogProps & {
     handleCancel: () => void,
@@ -325,10 +327,10 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
     };
 
-    const doCollectionInference = (collection: PersistedCollection<any>) => {
+    const doCollectionInference = collectionInference ? (collection: PersistedCollection<any>) => {
         if (!collectionInference) return undefined;
         return collectionInference?.(collection.path, collection.collectionGroup ?? false, parentPaths ?? []);
-    };
+    } : undefined;
 
     const inferCollectionFromData = async (newCollection: PersistedCollection<M>) => {
 
@@ -569,6 +571,9 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                     <Tab value={"subcollections"}>
                         Additional views
                     </Tab>
+                    <Tab value={"custom_actions"}>
+                        Custom actions
+                    </Tab>
                 </Tabs>}
 
                 <form noValidate
@@ -645,6 +650,9 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                             </div>}
                         </CollectionDetailsForm>}
 
+                    {currentView === "custom_actions" && collection &&
+                        <EntityActionsEditTab collection={collection}/>}
+
                     {currentView === "subcollections" && collection &&
                         <SubcollectionsEditTab
                             parentCollection={parentCollection}
@@ -687,6 +695,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                         {isNewCollection && includeTemplates && currentView === "import_data_mapping" &&
                             <Button variant={"text"}
                                     type="button"
+                                    color={"primary"}
                                     onClick={() => {
                                         importConfig.setInUse(false);
                                         return setCurrentView("welcome");
@@ -698,6 +707,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                         {isNewCollection && includeTemplates && currentView === "import_data_preview" &&
                             <Button variant={"text"}
                                     type="button"
+                                    color={"primary"}
                                     onClick={() => {
                                         setCurrentView("import_data_mapping");
                                     }}>
@@ -707,6 +717,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
                         {isNewCollection && includeTemplates && currentView === "details" &&
                             <Button variant={"text"}
+                                    color={"primary"}
                                     type="button"
                                     onClick={() => setCurrentView("welcome")}>
                                 <ArrowBackIcon/>
@@ -715,12 +726,14 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
                         {isNewCollection && currentView === "properties" && <Button variant={"text"}
                                                                                     type="button"
+                                                                                    color={"primary"}
                                                                                     onClick={() => setCurrentView("details")}>
                             <ArrowBackIcon/>
                             Back
                         </Button>}
 
                         <Button variant={"text"}
+                                color={"primary"}
                                 onClick={() => {
                                     handleCancel();
                                 }}>

package/src/ui/collection_editor/CollectionEditorWelcomeView.tsx

@@ -89,6 +89,11 @@ export function CollectionEditorWelcomeView({
                                 {suggestion}
                             </Chip>
                         ))}
+                        {(filteredPathSuggestions ?? []).length === 0 && !loadingPathSuggestions && <Typography
+                            variant={"caption"}
+                            color={"secondary"}>
+                            No existing paths found
+                        </Typography>}
 
                     </div>
 

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -24,7 +24,6 @@ import {
     DebouncedTextField,
     defaultBorderMixin,
     IconButton,
-    Paper,
     Tooltip,
     Typography,
 } from "@firecms/ui";
@@ -45,7 +44,7 @@ type CollectionEditorFormProps = {
     extraIcon: React.ReactNode;
     getUser?: (uid: string) => User | null;
     getData?: () => Promise<object[]>;
-    doCollectionInference: (collection: PersistedCollection) => Promise<Partial<EntityCollection> | null> | undefined;
+    doCollectionInference?: (collection: PersistedCollection) => Promise<Partial<EntityCollection> | null> | undefined;
     propertyConfigs: Record<string, PropertyConfig>;
     collectionEditable: boolean;
 };
@@ -108,6 +107,8 @@ export function CollectionPropertiesEditorForm({
                 return;
 
             setInferringProperties(true);
+
+            console.debug("CollectionEditor: inferring properties from data", doCollectionInference, values);
             // @ts-ignore
             doCollectionInference(values)
                 .then((newCollection) => {
@@ -368,6 +369,7 @@ export function CollectionPropertiesEditorForm({
                                  asChild={true}>
                             <Button
                                 variant={"outlined"}
+                                color={"primary"}
                                 onClick={() => setNewPropertyDialogOpen(true)}>
                                 <AddIcon/>
                             </Button>
@@ -436,6 +438,7 @@ export function CollectionPropertiesEditorForm({
                                         : "Select a property to edit it"}
                                 </Typography>
                                 <Button variant={"outlined"}
+                                        color={"primary"}
                                         onClick={() => setNewPropertyDialogOpen(true)}
                                 >
                                     <AddIcon/>

package/src/ui/collection_editor/EntityActionsEditTab.tsx

@@ -0,0 +1,163 @@
+import React from "react";
+import {
+    ConfirmationDialog,
+    EntityAction,
+    EntityCollection,
+    resolveEntityAction,
+    useCustomizationController
+} from "@firecms/core";
+import {
+    AddIcon,
+    Alert,
+    Button,
+    Container,
+    DeleteIcon,
+    IconButton,
+    Paper,
+    Table,
+    TableBody,
+    TableCell,
+    TableRow,
+    Tooltip,
+    Typography,
+} from "@firecms/ui";
+import { PersistedCollection } from "../../types/persisted_collection";
+import { useFormex } from "@firecms/formex";
+import { EntityActionsSelectDialog } from "./EntityActionsSelectDialog";
+
+export function EntityActionsEditTab({
+                                         collection,
+                                     }: {
+    collection: PersistedCollection,
+}) {
+
+    const { entityActions: contextEntityActions } = useCustomizationController();
+
+    const [addEntityActionDialogOpen, setAddEntityActionDialogOpen] = React.useState<boolean>(false);
+    const [actionToDelete, setActionToDelete] = React.useState<string | undefined>();
+
+    const {
+        values,
+        setFieldValue
+    } = useFormex<EntityCollection>();
+
+    const resolvedEntityActions = values.entityActions?.filter((e): e is string => typeof e === "string")
+        .map(e => resolveEntityAction(e, contextEntityActions))
+        .filter(Boolean) as EntityAction<any>[] ?? [];
+    const hardCodedEntityActions = collection.entityActions?.filter((e): e is EntityAction<any> => typeof e !== "string") ?? [];
+    const totalEntityActions = resolvedEntityActions.length + hardCodedEntityActions.length;
+
+    return (
+        <div className={"overflow-auto my-auto"}>
+            <Container maxWidth={"2xl"} className={"flex flex-col gap-4 p-8 m-auto"}>
+                <div className={"flex  flex-col gap-16"}>
+                    <div className={"flex-grow  flex flex-col gap-4 items-start"}>
+                        <Typography variant={"h5"}>
+                            Custom actions
+                        </Typography>
+
+                        {totalEntityActions === 0 &&
+                            <Alert action={<Button variant="text"
+                                                   size={"small"}
+                                                   href={"https://firecms.co/docs/custom_actions"}
+                                                   component={"a"}
+                                                   rel="noopener noreferrer"
+                                                   target="_blank">More info</Button>}>
+                                Define your own custom actions by uploading them with the CLI.
+                            </Alert>
+                        }
+
+                        {<>
+                            <Paper className={"flex flex-col gap-4 p-2 w-full"}>
+                                <Table>
+                                    <TableBody>
+                                        {resolvedEntityActions.map((action) => (
+                                            <TableRow key={action.key}>
+                                                <TableCell
+                                                    align="left">
+                                                    <Typography variant={"subtitle2"} className={"flex-grow"}>
+                                                        {action.name}
+                                                    </Typography>
+                                                </TableCell>
+                                                <TableCell
+                                                    align="right">
+                                                    <Tooltip title={"Remove"}
+                                                             asChild={true}>
+                                                        <IconButton size="small"
+                                                                    onClick={(e) => {
+                                                                        e.preventDefault();
+                                                                        e.stopPropagation();
+                                                                        setActionToDelete(action.key);
+                                                                    }}
+                                                                    color="inherit">
+                                                            <DeleteIcon size={"small"}/>
+                                                        </IconButton>
+                                                    </Tooltip>
+                                                </TableCell>
+                                            </TableRow>
+                                        ))}
+                                        {hardCodedEntityActions.map((action) => (
+                                            <TableRow key={action.key}>
+                                                <TableCell
+                                                    align="left">
+                                                    <Typography variant={"subtitle2"} className={"flex-grow"}>
+                                                        {action.name}
+                                                    </Typography>
+                                                    <Typography variant={"caption"} className={"flex-grow"}>
+                                                        This action is defined in code with
+                                                        key <code>{action.key}</code>
+                                                    </Typography>
+                                                </TableCell>
+                                            </TableRow>
+                                        ))}
+                                    </TableBody>
+                                </Table>
+
+                                <Button
+                                    onClick={() => {
+                                        setAddEntityActionDialogOpen(true);
+                                    }}
+                                    variant={"text"}
+                                    startIcon={<AddIcon/>}>
+                                    Add custom entity action
+                                </Button>
+                            </Paper>
+
+                        </>}
+
+
+                    </div>
+
+                </div>
+            </Container>
+
+            <div style={{ height: "52px" }}/>
+
+            {actionToDelete &&
+                <ConfirmationDialog open={Boolean(actionToDelete)}
+                                    onAccept={() => {
+                                        setFieldValue("entityActions", values.entityActions?.filter(e => e !== actionToDelete));
+                                        setActionToDelete(undefined);
+                                    }}
+                                    onCancel={() => setActionToDelete(undefined)}
+                                    title={<>Remove this action?</>}
+                                    body={<>This will <b>not
+                                        delete any data</b>, only
+                                        the action in the CMS</>}/>}
+
+            <EntityActionsSelectDialog
+                open={addEntityActionDialogOpen}
+                onClose={(selectedActionKey) => {
+                    if (selectedActionKey) {
+                        console.log("Selected action key:", selectedActionKey);
+                        const value = [...(values.entityActions ?? []), selectedActionKey]
+                            // only actions that are defined in the registry
+                            .filter((e): e is string => typeof e === "string" && (contextEntityActions ?? []).some(action => action.key === e));
+                        ;
+                        setFieldValue("entityActions", value);
+                    }
+                    setAddEntityActionDialogOpen(false);
+                }}/>
+        </div>
+    );
+}

package/src/ui/collection_editor/EntityActionsSelectDialog.tsx

@@ -0,0 +1,41 @@
+import { useCustomizationController } from "@firecms/core";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
+import React from "react";
+
+export function EntityActionsSelectDialog({
+                                                  open,
+                                                  onClose
+                                              }: { open: boolean, onClose: (selectedActionKey?: string) => void }) {
+    const {
+        entityActions
+    } = useCustomizationController();
+
+    return <Dialog
+        maxWidth={"md"}
+        open={open}>
+        <DialogTitle>Select custom action</DialogTitle>
+        <DialogContent className={"flex flex-col gap-4"}>
+            {entityActions?.map((action) => {
+                return <Button
+                    key={action.key}
+                    onClick={() => onClose(action.key)}
+                    fullWidth
+                    variant={"text"}
+                >
+                    {action.name} ({action.key})
+                </Button>;
+            })}
+            {(entityActions ?? []).length === 0 &&
+                <Typography variant={"body2"}>
+                    No custom actions defined. Define your custom actions in the customization settings, before using this
+                    dialog.
+                </Typography>
+            }
+        </DialogContent>
+        <DialogActions>
+            <Button variant={"outlined"}
+                    color={"primary"}
+                    onClick={() => onClose()}>Cancel</Button>
+        </DialogActions>
+    </Dialog>
+}

package/src/ui/collection_editor/EntityCustomViewsSelectDialog.tsx

@@ -27,12 +27,15 @@ export function EntityCustomViewsSelectDialog({
             })}
             {(entityViews ?? []).length === 0 &&
                 <Typography variant={"body2"}>
-                    No custom views defined
+                    No custom views defined. Define your custom views in the customization settings, before using this
+                    dialog.
                 </Typography>
             }
         </DialogContent>
         <DialogActions>
-            <Button variant={"outlined"} onClick={() => onClose()}>Cancel</Button>
+            <Button variant={"outlined"}
+                    color={"primary"}
+                    onClick={() => onClose()}>Cancel</Button>
         </DialogActions>
     </Dialog>
 }

package/src/ui/collection_editor/GetCodeDialog.tsx

@@ -1,5 +1,5 @@
 import { EntityCollection, isEmptyObject, useSnackbarController } from "@firecms/core";
-import { Button, ContentCopyIcon, Dialog, DialogActions, DialogContent, DialogTitle, Typography, } from "@firecms/ui";
+import { Button, ContentCopyIcon, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
 import React from "react";
 import JSON5 from "json5";
 import { Highlight, themes } from "prism-react-renderer"
@@ -59,12 +59,13 @@ export function GetCodeDialog({
             <Button
                 variant={"text"}
                 size={"small"}
+                color={"primary"}
                 onClick={(e) => {
                     e.stopPropagation();
                     e.preventDefault();
                     snackbarController.open({
                         type: "success",
-                        message: `Copied`
+                        message: "Copied"
                     })
                     return navigator.clipboard.writeText(code);
                 }}>
@@ -133,7 +134,8 @@ function collectionToCode(collection: EntityCollection): object {
             .map(([key, value]) => ({
                 [key]: propertyCleanup(value)
             }))
-            .reduce((a, b) => ({ ...a, ...b }), {}),
+            .reduce((a, b) => ({ ...a,
+...b }), {}),
         subcollections: (collection.subcollections ?? []).map(collectionToCode)
     }
 

package/src/ui/collection_editor/PropertyEditView.tsx

@@ -295,6 +295,7 @@ export function PropertyFormDialog({
 
                 {onCancel && <Button
                     variant={"text"}
+                    color={"primary"}
                     onClick={() => {
                         onCancel();
                         formexRef.current?.resetForm();

package/src/ui/collection_editor/UnsavedChangesDialog.tsx

@@ -37,8 +37,12 @@ export function UnsavedChangesDialog({
             </DialogContent>
 
             <DialogActions>
-                <Button variant="text" onClick={handleCancel} autoFocus> Cancel </Button>
-                <Button onClick={handleOk}> Ok </Button>
+                <Button variant="text"
+                        color={"primary"}
+                        onClick={handleCancel} autoFocus> Cancel </Button>
+                <Button
+                    color={"primary"}
+                    onClick={handleOk}> Ok </Button>
             </DialogActions>
         </Dialog>
     );

package/src/useCollectionEditorPlugin.tsx

@@ -14,6 +14,7 @@ import { AddIcon, Button, Paper, Typography } from "@firecms/ui";
 import { useCollectionEditorController } from "./useCollectionEditorController";
 import { EditorCollectionActionStart } from "./ui/EditorCollectionActionStart";
 import { NewCollectionCard } from "./ui/NewCollectionCard";
+import { EditorEntityAction } from "./ui/EditorEntityAction";
 
 export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, USER extends User = User> {
 
@@ -107,6 +108,9 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
             CollectionActions: EditorCollectionAction,
             HeaderAction: CollectionViewHeaderAction,
             AddColumnComponent: PropertyAddColumnComponent
+        },
+        form: {
+            ActionsTop: EditorEntityAction,
         }
     };
 }