@firecms/collection_editor 3.0.0-beta.13 → 3.0.0-beta.15

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"}>
@@ -96,12 +89,11 @@ export function CollectionEditorWelcomeView({
                                 {suggestion}
                             </Chip>
                         ))}
-
-                        {!loadingPathSuggestions && (filteredPathSuggestions ?? [])?.length === 0 &&
-                            <Typography variant={"caption"}>
-                                No suggestions
-                            </Typography>
-                        }
+                        {(filteredPathSuggestions ?? []).length === 0 && !loadingPathSuggestions && <Typography
+                            variant={"caption"}
+                            color={"secondary"}>
+                            No existing paths found
+                        </Typography>}
 
                     </div>
 
@@ -116,28 +108,29 @@ export function CollectionEditorWelcomeView({
                     <div className={"flex gap-4"}>
                         <TemplateButton title={"Products"}
                                         subtitle={"A collection of products with images, prices and stock"}
-                                        icon={<Icon size={"small"} iconKey={productsCollectionTemplate.icon!}/>}
+                                        icon={<Icon size={"small"}
+                                                    iconKey={productsCollectionTemplate.icon! as string}/>}
                                         onClick={() => {
                                             setValues(productsCollectionTemplate);
                                             onContinue();
                                         }}/>
                         <TemplateButton title={"Users"}
                                         subtitle={"A collection of users with emails, names and roles"}
-                                        icon={<Icon size={"small"} iconKey={usersCollectionTemplate.icon!}/>}
+                                        icon={<Icon size={"small"} iconKey={usersCollectionTemplate.icon! as string}/>}
                                         onClick={() => {
                                             setValues(usersCollectionTemplate);
                                             onContinue();
                                         }}/>
                         <TemplateButton title={"Blog posts"}
                                         subtitle={"A collection of blog posts with images, authors and complex content"}
-                                        icon={<Icon size={"small"} iconKey={blogCollectionTemplate.icon!}/>}
+                                        icon={<Icon size={"small"} iconKey={blogCollectionTemplate.icon! as string}/>}
                                         onClick={() => {
                                             setValues(blogCollectionTemplate);
                                             onContinue();
                                         }}/>
                         <TemplateButton title={"Pages"}
                                         subtitle={"A collection of pages with images, authors and complex content"}
-                                        icon={<Icon size={"small"} iconKey={pagesCollectionTemplate.icon!}/>}
+                                        icon={<Icon size={"small"} iconKey={pagesCollectionTemplate.icon! as string}/>}
                                         onClick={() => {
                                             setValues(pagesCollectionTemplate);
                                             onContinue();
@@ -202,9 +195,6 @@ export function TemplateButton({
                     <Typography variant={"subtitle1"}>
                         {title}
                     </Typography>
-                    {/*<Typography>*/}
-                    {/*    {subtitle}*/}
-                    {/*</Typography>*/}
 
                 </div>
             </Card>

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) => {
@@ -310,8 +311,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 +403,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 +448,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/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

@@ -7,7 +7,6 @@ import {
     DEFAULT_FIELD_CONFIGS,
     getFieldConfig,
     getFieldId,
-    isEmptyObject,
     isPropertyBuilder,
     isValidRegExp,
     mergeDeep,
@@ -296,6 +295,7 @@ export function PropertyFormDialog({
 
                 {onCancel && <Button
                     variant={"text"}
+                    color={"primary"}
                     onClick={() => {
                         onCancel();
                         formexRef.current?.resetForm();
@@ -384,7 +384,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]);
@@ -462,6 +462,13 @@ function PropertyEditFormFields({
                                     existing={existing}
                                     multiple={false}
                                     disabled={disabled}/>;
+    } else if (selectedFieldConfigId === "reference_as_string") {
+        childComponent =
+            <ReferencePropertyField showErrors={showErrors}
+                                    existing={existing}
+                                    asString={true}
+                                    multiple={false}
+                                    disabled={disabled}/>;
     } else if (selectedFieldConfigId === "date_time") {
         childComponent = <DateTimePropertyField disabled={disabled}/>;
     } else if (selectedFieldConfigId === "multi_references") {
@@ -606,6 +613,7 @@ const WIDGET_TYPE_MAP: Record<PropertyConfigId, string> = {
     file_upload: "File",
     multi_file_upload: "File",
     reference: "Reference",
+    reference_as_string: "Text",
     multi_references: "Reference",
     date_time: "Date",
     group: "Group",
@@ -763,7 +771,7 @@ export function WidgetSelectViewItem({
 
     return <Card
         onClick={onClick}
-        className={"flex flex-row items-center px-4 py-2"}>
+        className={"flex flex-row items-center px-4 py-2 m-1"}>
         <div
             className={cls(
                 "flex flex-row items-center text-base min-h-[48px]",

package/src/ui/collection_editor/PropertyFieldPreview.tsx

@@ -54,6 +54,7 @@ export function PropertyFieldPreview({
             </div>
             <Paper
                 className={cls(
+                    "m-1",
                     "border",
                     "pl-2 w-full flex flex-row gap-4 items-center",
                     cardMixin,