@firecms/collection_editor 3.0.0-canary.29 → 3.0.0-canary.290

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 
 import { Field, getIn, useFormex } from "@firecms/formex";
 import {
@@ -16,15 +16,14 @@ import {
 } from "@firecms/core";
 import {
     AddIcon,
-    AutoAwesomeIcon,
+    AutorenewIcon,
     Button,
     CircularProgress,
-    cn,
+    cls,
     CodeIcon,
     DebouncedTextField,
     defaultBorderMixin,
     IconButton,
-    Paper,
     Tooltip,
     Typography,
 } from "@firecms/ui";
@@ -43,9 +42,9 @@ type CollectionEditorFormProps = {
     setDirty?: (dirty: boolean) => void;
     reservedGroups?: string[];
     extraIcon: React.ReactNode;
-    getUser: (uid: string) => User | null;
+    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) => {
@@ -158,20 +159,20 @@ export function CollectionPropertiesEditorForm({
         }
         : undefined;
 
-    const getCurrentPropertiesOrder = useCallback((namespace?: string) => {
-        if (!namespace) return currentPropertiesOrderRef.current[""];
+    const getCurrentPropertiesOrder = (namespace?: string) => {
+        if (!namespace) return currentPropertiesOrderRef.current[""] ?? getIn(values, namespaceToPropertiesOrderPath());
         return currentPropertiesOrderRef.current[namespace] ?? getIn(values, namespaceToPropertiesOrderPath(namespace));
-    }, [values]);
+    };
 
-    const updatePropertiesOrder = useCallback((newPropertiesOrder: string[], namespace?: string) => {
+    const updatePropertiesOrder = (newPropertiesOrder: string[], namespace?: string) => {
         const propertiesOrderPath = namespaceToPropertiesOrderPath(namespace);
 
         setFieldValue(propertiesOrderPath, newPropertiesOrder, false);
         currentPropertiesOrderRef.current[namespace ?? ""] = newPropertiesOrder;
 
-    }, [setFieldValue]);
+    };
 
-    const deleteProperty = useCallback((propertyKey?: string, namespace?: string) => {
+    const deleteProperty = (propertyKey?: string, namespace?: string) => {
         const fullId = propertyKey ? getFullId(propertyKey, namespace) : undefined;
         if (!fullId)
             throw Error("collection editor miss config");
@@ -179,15 +180,17 @@ export function CollectionPropertiesEditorForm({
         setFieldValue(idToPropertiesPath(fullId), undefined, false);
 
         const currentPropertiesOrder = getCurrentPropertiesOrder(namespace);
-        const newPropertiesOrder = currentPropertiesOrder.filter((p) => p !== propertyKey);
-        updatePropertiesOrder(newPropertiesOrder, namespace);
+        if (currentPropertiesOrder) {
+            const newPropertiesOrder = currentPropertiesOrder.filter((p) => p !== propertyKey);
+            updatePropertiesOrder(newPropertiesOrder, namespace);
+        }
 
         setNewPropertyDialogOpen(false);
 
         setSelectedPropertyIndex(undefined);
         setSelectedPropertyKey(undefined);
         setSelectedPropertyNamespace(undefined);
-    }, [getCurrentPropertiesOrder, setFieldValue, updatePropertiesOrder]);
+    };
 
     const onPropertyMove = (propertiesOrder: string[], namespace?: string) => {
         setFieldValue(namespaceToPropertiesOrderPath(namespace), propertiesOrder, false);
@@ -207,8 +210,8 @@ export function CollectionPropertiesEditorForm({
             ...(values.properties ?? {}),
             [id]: property
         }, false);
-        const newPropertiesOrder = [...(values.propertiesOrder ?? Object.keys(values.properties)), id];
 
+        const newPropertiesOrder = [...(values.propertiesOrder ?? Object.keys(values.properties)), id];
         updatePropertiesOrder(newPropertiesOrder);
 
         setNewPropertyDialogOpen(false);
@@ -231,12 +234,6 @@ export function CollectionPropertiesEditorForm({
 
         // If the id has changed we need to a little cleanup
         if (previousId && previousId !== id) {
-            console.debug("onPropertyChanged, id change", {
-                id,
-                property,
-                previousId,
-                namespace
-            })
 
             const previousFullId = getFullId(previousId, namespace);
             const previousPropertyPath = idToPropertiesPath(previousFullId);
@@ -258,14 +255,6 @@ export function CollectionPropertiesEditorForm({
             setFieldTouched(previousPropertyPath, false, false);
         }
 
-        console.debug("onPropertyChanged", {
-            id,
-            property,
-            previousId,
-            namespace,
-            propertyPath
-        })
-
         if (propertyPath) {
             setFieldValue(propertyPath, property, false);
             setFieldTouched(propertyPath, true, false);
@@ -273,7 +262,7 @@ export function CollectionPropertiesEditorForm({
 
     };
 
-    const onPropertyErrorInternal = useCallback((id: string, namespace?: string, error?: Record<string, any>) => {
+    const onPropertyErrorInternal = (id: string, namespace?: string, error?: Record<string, any>) => {
         const propertyPath = id ? getFullId(id, namespace) : undefined;
         console.debug("onPropertyErrorInternal", {
             id,
@@ -286,7 +275,7 @@ export function CollectionPropertiesEditorForm({
             onPropertyError(id, namespace, hasError ? error : undefined);
             setFieldError(idToPropertiesPath(propertyPath), hasError ? "Property error" : undefined);
         }
-    }, [])
+    }
 
     const closePropertyDialog = () => {
         setSelectedPropertyIndex(undefined);
@@ -301,9 +290,9 @@ export function CollectionPropertiesEditorForm({
         ? values.propertiesOrder
         : Object.keys(values.properties)) as string[];
 
-    const owner = useMemo(() => values.ownerId ? getUser(values.ownerId) : null, [getUser, values.ownerId]);
+    const owner = useMemo(() => values.ownerId && getUser ? getUser(values.ownerId) : null, [getUser, values.ownerId]);
 
-    const onPropertyClick = useCallback((propertyKey: string, namespace?: string) => {
+    const onPropertyClick = (propertyKey: string, namespace?: string) => {
         console.debug("CollectionEditor: onPropertyClick", {
             propertyKey,
             namespace
@@ -311,11 +300,12 @@ export function CollectionPropertiesEditorForm({
         setSelectedPropertyIndex(usedPropertiesOrder.indexOf(propertyKey));
         setSelectedPropertyKey(propertyKey);
         setSelectedPropertyNamespace(namespace);
-    }, [usedPropertiesOrder]);
+    };
 
     const body = (
-        <div className={"grid grid-cols-12 gap-2 h-full bg-gray-50 dark:bg-gray-900"}>
-            <div className={cn(
+        <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
@@ -349,7 +339,8 @@ export function CollectionPropertiesEditorForm({
                     </div>}
 
                     <div className="ml-1 mt-2 flex flex-row gap-2">
-                        <Tooltip title={"Get the code for this collection"}>
+                        <Tooltip title={"Get the code for this collection"}
+                                 asChild={true}>
                             <IconButton
                                 variant={"filled"}
                                 disabled={inferringProperties}
@@ -357,17 +348,20 @@ export function CollectionPropertiesEditorForm({
                                 <CodeIcon/>
                             </IconButton>
                         </Tooltip>
-                        {inferPropertiesFromData && <Tooltip title={"Add new properties based on data"}>
+                        {inferPropertiesFromData && <Tooltip title={"Add new properties based on data"}
+                                                             asChild={true}>
                             <IconButton
                                 variant={"filled"}
                                 disabled={inferringProperties}
                                 onClick={inferPropertiesFromData}>
-                                {inferringProperties ? <CircularProgress size={"small"}/> : <AutoAwesomeIcon/>}
+                                {inferringProperties ? <CircularProgress size={"small"}/> : <AutorenewIcon/>}
                             </IconButton>
                         </Tooltip>}
-                        <Tooltip title={"Add new property"}>
+                        <Tooltip title={"Add new property"}
+                                 asChild={true}>
                             <Button
                                 variant={"outlined"}
+                                color={"primary"}
                                 onClick={() => setNewPropertyDialogOpen(true)}>
                                 <AddIcon/>
                             </Button>
@@ -402,8 +396,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 &&
@@ -436,6 +430,7 @@ export function CollectionPropertiesEditorForm({
                                         : "Select a property to edit it"}
                                 </Typography>
                                 <Button variant={"outlined"}
+                                        color={"primary"}
                                         onClick={() => setNewPropertyDialogOpen(true)}
                                 >
                                     <AddIcon/>
@@ -447,7 +442,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
@@ -469,6 +464,7 @@ export function CollectionPropertiesEditorForm({
                 getData={getData}
                 propertyConfigs={propertyConfigs}
                 collectionEditable={collectionEditable}
+                onCancel={closePropertyDialog}
                 onOkClicked={asDialog
                     ? closePropertyDialog
                     : undefined
@@ -496,11 +492,12 @@ export function CollectionPropertiesEditorForm({
                 collectionEditable={collectionEditable}
                 existingPropertyKeys={values.propertiesOrder as string[]}/>
 
-            <GetCodeDialog
-                collection={values}
-                open={codeDialogOpen}
-                onOpenChange={setCodeDialogOpen}/>
-
+            <ErrorBoundary>
+                <GetCodeDialog
+                    collection={values}
+                    open={codeDialogOpen}
+                    onOpenChange={setCodeDialogOpen}/>
+            </ErrorBoundary>
         </>
     );
 }

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

@@ -1,8 +1,11 @@
 import { useCustomizationController } from "@firecms/core";
-import { Button, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
 import React from "react";
 
-export function EntityCustomViewsSelectDialog({ open, onClose }: { open: boolean, onClose: (selectedViewKey?: string) => void }) {
+export function EntityCustomViewsSelectDialog({
+                                                  open,
+                                                  onClose
+                                              }: { open: boolean, onClose: (selectedViewKey?: string) => void }) {
     const {
         entityViews,
     } = useCustomizationController();
@@ -10,10 +13,8 @@ export function EntityCustomViewsSelectDialog({ open, onClose }: { open: boolean
     return <Dialog
         maxWidth={"md"}
         open={open}>
+        <DialogTitle>Select custom view</DialogTitle>
         <DialogContent className={"flex flex-col gap-4"}>
-            <Typography variant={"h6"}>
-                Select view
-            </Typography>
             {entityViews?.map((view) => {
                 return <Button
                     key={view.key}
@@ -26,12 +27,15 @@ export function EntityCustomViewsSelectDialog({ open, onClose }: { open: boolean
             })}
             {(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/EnumForm.tsx

@@ -1,9 +1,9 @@
 import React, { useEffect } from "react";
 import equal from "react-fast-compare"
 
-import { ArrayContainer, EnumValueConfig, EnumValues, FieldCaption, } from "@firecms/core";
+import { ArrayContainer, ArrayEntryParams, EnumValueConfig, EnumValues, FieldCaption, } from "@firecms/core";
 import {
-    AutoAwesomeIcon,
+    AutorenewIcon,
     Badge,
     Button,
     CircularProgress,
@@ -11,6 +11,7 @@ import {
     Dialog,
     DialogActions,
     DialogContent,
+    DialogTitle,
     IconButton,
     ListIcon,
     Paper,
@@ -121,7 +122,10 @@ function EnumFormFields({
     const inferredValuesRef = React.useRef(new Set());
     const inferredValues = inferredValuesRef.current;
 
-    const buildEntry = (index: number, internalId: number) => {
+    const buildEntry = ({
+                            index,
+                            internalId
+                        }:ArrayEntryParams) => {
         const justAdded = lastInternalIdAdded === internalId;
         const entryError = errors?.enumValues && errors?.enumValues[index];
         return <EnumEntry index={index}
@@ -179,7 +183,7 @@ function EnumFormFields({
                             variant={"text"}
                             size={"small"}
                             onClick={inferValues}>
-                        {inferring ? <CircularProgress size={"small"}/> : <AutoAwesomeIcon/>}
+                        {inferring ? <CircularProgress size={"smallest"}/> : <AutorenewIcon/>}
                         Infer values from data
                     </Button>}
             </div>
@@ -193,7 +197,7 @@ function EnumFormFields({
                                 size={"small"}
                                 buildEntry={buildEntry}
                                 onInternalIdAdded={setLastInternalIdAdded}
-                                includeAddButton={true}
+                                canAddElements={true}
                                 onValueChange={(value) => setFieldValue(enumValuesPath, value)}
                                 newDefaultEntry={{ id: "", label: "" }}/>
 
@@ -263,7 +267,7 @@ const EnumEntry = React.memo(
                            size="small"
                            autoFocus={autoFocus}
                            autoComplete="off"
-                           endAdornment={inferredEntry && <AutoAwesomeIcon size={"small"}/>}
+                           endAdornment={inferredEntry && <AutorenewIcon size={"small"}/>}
                            error={Boolean(entryError?.label)}/>
 
                     {!disabled &&
@@ -324,7 +328,7 @@ function EnumEntryDialog({
         open={open}
         onOpenChange={(open) => !open ? onClose() : undefined}
     >
-
+        <DialogTitle hidden>Enum form dialog</DialogTitle>
         <DialogContent>
             {index !== undefined &&
                 <div>