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

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>
@@ -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>

package/src/ui/collection_editor/GetCodeDialog.tsx

@@ -1,9 +1,10 @@
-import { EntityCollection, useSnackbarController } from "@firecms/core";
-import { Button, ContentCopyIcon, Dialog, DialogActions, DialogContent, Typography, } from "@firecms/ui";
+import { EntityCollection, isEmptyObject, useSnackbarController } from "@firecms/core";
+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"
 import { camelCase } from "./utils/strings";
+import { clone } from "@firecms/formex";
 
 export function GetCodeDialog({
                                   collection,
@@ -14,21 +15,20 @@ export function GetCodeDialog({
     const snackbarController = useSnackbarController();
 
     const code = collection
-        ? "import { EntityCollection } from \"@firecms/core\";\n\nconst " + (collection?.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode(collection), null, "\t")
+        ? "import { EntityCollection } from \"@firecms/core\";\n\nconst " + (collection?.name ? camelCase(collection.name) : "my") + "Collection:EntityCollection = " + JSON5.stringify(collectionToCode({ ...collection }), null, "\t")
         : "No collection selected";
     return <Dialog open={open}
                    onOpenChange={onOpenChange}
                    maxWidth={"4xl"}>
+        <DialogTitle variant={"h6"}>Code for {collection.name}</DialogTitle>
         <DialogContent>
-            <Typography variant={"h6"} className={"my-4"}>
-                Code for {collection.name}
-            </Typography>
+
             <Typography variant={"body2"} className={"my-4 mb-8"}>
                 If you want to customise the collection in code, you can add this collection code to your CMS
                 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}
@@ -78,24 +78,40 @@ export function GetCodeDialog({
 
 function collectionToCode(collection: EntityCollection): object {
 
-    const propertyCleanup = (property: any) => {
-
-        const updatedProperty = {
-            ...property
-        };
-
-        delete updatedProperty.fromBuilder;
-        delete updatedProperty.resolved;
-        delete updatedProperty.propertiesOrder;
-        delete updatedProperty.editable;
+    const propertyCleanup = (value: any): any => {
+        if (value === undefined || value === null) {
+            return value;
+        }
+        const valueCopy = clone(value);
+        if (typeof valueCopy === "function") {
+            return valueCopy;
+        }
+        if (Array.isArray(valueCopy)) {
+            return valueCopy.map((v: any) => propertyCleanup(v));
+        }
+        if (typeof valueCopy === "object") {
+            if (valueCopy === null)
+                return valueCopy;
+            Object.keys(valueCopy).forEach((key) => {
+                if (!isEmptyObject(valueCopy)) {
+                    const childRes = propertyCleanup(valueCopy[key]);
+                    if (childRes !== null && childRes !== undefined && childRes !== false && !isEmptyObject(childRes)) {
+                        valueCopy[key] = childRes;
+                    } else {
+                        delete valueCopy[key];
+                    }
+                }
+            });
+            delete valueCopy.fromBuilder;
+            delete valueCopy.resolved;
+            delete valueCopy.propertiesOrder;
+            delete valueCopy.propertyConfig;
+            delete valueCopy.resolvedProperties;
+            delete valueCopy.editable;
 
-        if (updatedProperty.type === "map") {
-            return {
-                ...updatedProperty,
-                properties: updatedProperty.properties.map(propertyCleanup)
-            }
         }
-        return updatedProperty;
+
+        return valueCopy;
     }
 
     return {
@@ -111,7 +127,9 @@ function collectionToCode(collection: EntityCollection): object {
         customId: collection.customId,
         initialFilter: collection.initialFilter,
         initialSort: collection.initialSort,
-        properties: Object.entries(collection.properties ?? {})
+        properties: Object.entries({
+            ...(collection.properties ?? {})
+        })
             .map(([key, value]) => ({
                 [key]: propertyCleanup(value)
             }))

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

@@ -7,6 +7,7 @@ import {
     DEFAULT_FIELD_CONFIGS,
     getFieldConfig,
     getFieldId,
+    isEmptyObject,
     isPropertyBuilder,
     isValidRegExp,
     mergeDeep,
@@ -31,7 +32,7 @@ import {
     InfoLabel,
     Tooltip,
     Typography,
-    WarningOffIcon
+    WarningIcon
 } from "@firecms/ui";
 import { EnumPropertyField } from "./properties/EnumPropertyField";
 import { StoragePropertyField } from "./properties/StoragePropertyField";
@@ -142,6 +143,7 @@ export const PropertyForm = React.memo(
         };
 
         const formexController = useCreateFormex<PropertyWithId>({
+            debugId: "PROPERTY_FORM",
             initialValues: property
                 ? { id: propertyKey, ...property } as PropertyWithId
                 : initialValue,
@@ -274,7 +276,9 @@ export function PropertyFormDialog({
                   e.stopPropagation();
                   formexRef.current?.handleSubmit(e)
               }}>
+            <DialogTitle hidden>Property edit view</DialogTitle>
             <DialogContent>
+
                 <PropertyForm {...formProps}
                               onDismiss={onCancel}
                               onPropertyChanged={(params) => {
@@ -380,7 +384,7 @@ function PropertyEditFormFields({
     }, [deferredValues, includeIdAndTitle, propertyNamespace]);
 
     useEffect(() => {
-        if (values?.id && onError) {
+        if (values?.id && onError && !isEmptyObject(errors)) {
             onError(values?.id, propertyNamespace, errors);
         }
     }, [errors, propertyNamespace, values?.id]);
@@ -771,7 +775,7 @@ export function WidgetSelectViewItem({
                 <div className={"flex flex-row gap-2 items-center"}>
                     {shouldWarnChangingDataType && <Tooltip
                         title={"This widget uses a different data type than the initially selected widget. This can cause errors with existing data."}>
-                        <WarningOffIcon size="smallest" className={"w-4"}/>
+                        <WarningIcon size="smallest" className={"w-4"}/>
                     </Tooltip>}
                     <Typography
                         color={shouldWarnChangingDataType ? "secondary" : undefined}>{propertyConfig.name}</Typography>

package/src/ui/collection_editor/PropertyFieldPreview.tsx

@@ -1,9 +1,9 @@
 import {
     ErrorBoundary,
-    PropertyConfigBadge,
     getFieldConfig,
     isPropertyBuilder,
     Property,
+    PropertyConfigBadge,
     PropertyOrBuilder,
     useCustomizationController,
 } from "@firecms/core";
@@ -12,9 +12,9 @@ import {
     cardMixin,
     cardSelectedMixin,
     cls,
+    DoNotDisturbOnIcon,
     FunctionsIcon,
     Paper,
-    RemoveCircleIcon,
     Typography,
 } from "@firecms/ui";
 
@@ -130,10 +130,10 @@ export function NonEditablePropertyPreview({
             <div className={"relative m-4"}>
                 {propertyConfig && <PropertyConfigBadge propertyConfig={propertyConfig}/>}
                 {!propertyConfig && <div
-                    className={"h-8 w-8 p-1 rounded-full shadow text-white bg-gray-500"}>
+                    className={"h-8 w-8 p-1 rounded-full shadow text-white bg-surface-500"}>
                     <FunctionsIcon color={"inherit"} size={"medium"}/>
                 </div>}
-                <RemoveCircleIcon color={"disabled"} size={"small"} className={"absolute -right-2 -top-2"}/>
+                <DoNotDisturbOnIcon color={"disabled"} size={"small"} className={"absolute -right-2 -top-2"}/>
             </div>
             <Paper
                 className={cls(

package/src/ui/collection_editor/PropertyTree.tsx

@@ -9,7 +9,7 @@ import {
     PropertiesOrBuilders,
     PropertyOrBuilder
 } from "@firecms/core";
-import { AutoAwesomeIcon, defaultBorderMixin, DragHandleIcon, IconButton, RemoveIcon, Tooltip } from "@firecms/ui";
+import { AutorenewIcon, defaultBorderMixin, DragHandleIcon, IconButton, RemoveIcon, Tooltip } from "@firecms/ui";
 import { NonEditablePropertyPreview, PropertyFieldPreview } from "./PropertyFieldPreview";
 import { DragDropContext, Draggable, DraggableProvided, Droppable } from "@hello-pangea/dnd";
 import { getFullId, getFullIdPath } from "./util";
@@ -224,7 +224,7 @@ export function PropertyTreeEntry({
             <div className="absolute top-2 right-2 flex flex-row ">
 
                 {isPropertyInferred && <Tooltip title={"Inferred property"}>
-                    <AutoAwesomeIcon size="small" className={"p-2"}/>
+                    <AutorenewIcon size="small" className={"p-2"}/>
                 </Tooltip>}
 
                 {onPropertyRemove && <Tooltip title={"Remove"}

package/src/ui/collection_editor/UnsavedChangesDialog.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Button, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
 
 export interface UnsavedChangesDialogProps {
     open: boolean;
@@ -24,11 +24,9 @@ export function UnsavedChangesDialog({
             aria-labelledby="alert-dialog-title"
             aria-describedby="alert-dialog-description"
         >
-            <DialogContent>
-                <Typography variant={"h6"}>
-                    {title ?? "Unsaved changes"}
-                </Typography>
 
+            <DialogTitle>{title ?? "Unsaved changes"}</DialogTitle>
+            <DialogContent>
                 {body && <Typography>
                     {body}
                 </Typography>}

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/ui/collection_editor/import/CollectionEditorImportMapping.tsx

@@ -235,9 +235,11 @@ function PropertySelect({
             open={selectOpen}
             onOpenChange={setSelectOpen}
             invisible={true}
+            size={"large"}
             className={"w-full"}
             disabled={disabled}
             error={!widget}
+            fullWidth={true}
             value={fieldId ?? ""}
             placeholder={"Select a property widget"}
             position={"item-aligned"}

package/src/ui/collection_editor/properties/BlockPropertyField.tsx

@@ -1,10 +1,16 @@
 import React, { useState } from "react";
 import { AddIcon, Button, Paper, Typography } from "@firecms/ui";
 import { getIn, useFormex } from "@firecms/formex";
-import { PropertyFormDialog } from "../PropertyEditView";
-import { getFullId, idToPropertiesPath, namespaceToPropertiesOrderPath, namespaceToPropertiesPath } from "../util";
+import { OnPropertyChangedParams, PropertyFormDialog } from "../PropertyEditView";
+import {
+    getFullId,
+    getFullIdPath,
+    idToPropertiesPath,
+    namespaceToPropertiesOrderPath,
+    namespaceToPropertiesPath
+} from "../util";
 import { PropertyTree } from "../PropertyTree";
-import { ArrayProperty, Property, PropertyConfig } from "@firecms/core";
+import { ArrayProperty, PropertyConfig } from "@firecms/core";
 
 export function BlockPropertyField({
                                        disabled,
@@ -31,18 +37,17 @@ export function BlockPropertyField({
 
     const onPropertyChanged = ({
                                    id,
+                                   namespace,
                                    property
-                               }: { id?: string, property: Property }) => {
+                               }: OnPropertyChangedParams) => {
         if (!id)
             throw Error();
 
-        setFieldValue("oneOf.properties", {
-            ...(values.oneOf?.properties ?? {}),
-            [id]: property
-        }, false);
+        setFieldValue("oneOf." + getFullIdPath(id, namespace), property, false);
+
         const currentPropertiesOrder = values.oneOf?.propertiesOrder ?? Object.keys(values.oneOf?.properties ?? {});
         const newPropertiesOrder = currentPropertiesOrder.includes(id) ? currentPropertiesOrder : [...currentPropertiesOrder, id];
-        setFieldValue("oneOf.propertiesOrder", newPropertiesOrder, false);
+        setFieldValue("oneOf." + namespaceToPropertiesOrderPath(namespace), newPropertiesOrder, false);
         setPropertyDialogOpen(false);
     };
 
@@ -82,8 +87,9 @@ export function BlockPropertyField({
         <>
             <div className={"col-span-12"}>
                 <div className={"flex justify-between items-end mt-8 mb-4"}>
-                    <Typography variant={"subtitle2"}>Properties in this
-                        block</Typography>
+                    <Typography variant={"subtitle2"}>
+                        Properties in this block
+                    </Typography>
                     {addChildButton}
                 </div>
                 <Paper className="p-2 pl-8">
@@ -104,7 +110,7 @@ export function BlockPropertyField({
                             ? undefined
                             : onPropertyMove}/>
 
-                    {!disabled && !values.oneOf?.propertiesOrder?.length &&
+                    {!disabled && (values.oneOf?.propertiesOrder?.length === 0)&&
                         <div className="h-full flex items-center justify-center p-4">
                             Add the first property to this block
                         </div>}

package/src/ui/collection_editor/properties/DateTimePropertyField.tsx

@@ -31,8 +31,10 @@ export function DateTimePropertyField({ disabled }: {
                     <Select name={modePath}
                             value={modeValue ?? "date"}
                             error={Boolean(modeError)}
+                            size={"large"}
                             onValueChange={(v) => setFieldValue(modePath, v)}
                             label={"Mode"}
+                            fullWidth={true}
                             renderValue={(v) => {
                                 switch (v) {
                                     case "date_time":
@@ -54,6 +56,8 @@ export function DateTimePropertyField({ disabled }: {
                 <div>
                     <Select name={autoValuePath}
                             disabled={disabled}
+                            size={"large"}
+                            fullWidth={true}
                             value={autoValueValue ?? ""}
                             onValueChange={(v) => setFieldValue(autoValuePath, v === "none" ? null : v)}
                             renderValue={(v) => {

package/src/ui/collection_editor/properties/EnumPropertyField.tsx

@@ -93,9 +93,11 @@ export function EnumPropertyField({
                 <Select
                     disabled={disabled}
                     position={"item-aligned"}
+                    fullWidth={true}
                     onValueChange={(value: string) => {
                         setFieldValue("defaultValue", value);
                     }}
+                    size={"large"}
                     label={"Default value"}
                     value={defaultValue ?? ""}>
                     {enumValues

package/src/ui/collection_editor/properties/MapPropertyField.tsx

@@ -113,7 +113,8 @@ export function MapPropertyField({ disabled, getData, allowDataInference, proper
                     value={values.spreadChildren ?? false}
                 />
                 <FieldCaption>
-                    Set this flag to true if you want to display the children of this group as individual columns.
+                    Set this flag to true if you want to display the children of this group as individual columns. This
+                    will only work for top level groups.
                 </FieldCaption>
             </div>
 

package/src/ui/collection_editor/properties/MarkdownPropertyField.tsx

@@ -3,7 +3,7 @@ import { StringPropertyValidation } from "./validation/StringPropertyValidation"
 import { ValidationPanel } from "./validation/ValidationPanel";
 import { Field, getIn, useFormex } from "@firecms/formex";
 
-import { DebouncedTextField, ExpandablePanel, FileUploadIcon, TextField, Typography } from "@firecms/ui";
+import { CloudUploadIcon, DebouncedTextField, ExpandablePanel, TextField, Typography } from "@firecms/ui";
 
 export function MarkdownPropertyField({
                                           disabled,
@@ -54,8 +54,8 @@ export function MarkdownPropertyField({
             <div className={"col-span-12"}>
                 <ExpandablePanel
                     title={
-                        <div className="flex flex-row text-gray-500">
-                            <FileUploadIcon/>
+                        <div className="flex flex-row text-surface-500">
+                            <CloudUploadIcon/>
                             <Typography variant={"subtitle2"}
                                         className="ml-2">
                                 File upload config

package/src/ui/collection_editor/properties/ReferencePropertyField.tsx

@@ -89,6 +89,8 @@ export function CollectionsSelect({
                 value={value ?? ""}
                 position={"item-aligned"}
                 name={pathPath}
+                size={"large"}
+                fullWidth={true}
                 onChange={handleChange}
                 label={"Target collection"}
                 renderValue={(selected) => {

package/src/ui/collection_editor/properties/StoragePropertyField.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 import {
     Button,
+    CloudUploadIcon,
     DebouncedTextField,
     ExpandablePanel,
-    FileUploadIcon,
     MultiSelect,
     MultiSelectItem,
     Typography
@@ -74,8 +74,8 @@ export function StoragePropertyField({
 
                 <ExpandablePanel
                     title={
-                        <div className="flex flex-row text-gray-500">
-                            <FileUploadIcon/>
+                        <div className="flex flex-row text-surface-500">
+                            <CloudUploadIcon/>
                             <Typography variant={"subtitle2"}
                                         className="ml-2">
                                 File upload config

package/src/ui/collection_editor/properties/UrlPropertyField.tsx

@@ -24,6 +24,7 @@ export function UrlPropertyField({
                 <Select
                     disabled={disabled}
                     position={"item-aligned"}
+                    fullWidth={true}
                     onValueChange={(value: string) => {
                         if (value === "[NONE]")
                             setFieldValue("url", true);

package/src/ui/collection_editor/properties/validation/ValidationPanel.tsx

@@ -12,7 +12,7 @@ export function ValidationPanel({
             asField={true}
             innerClassName="p-4"
             title={
-                <div className="flex flex-row text-gray-500">
+                <div className="flex flex-row text-surface-500">
                     <RuleIcon/>
                     <Typography variant={"subtitle2"}
                                 className="ml-2">

package/src/useCollectionEditorPlugin.tsx

@@ -15,7 +15,7 @@ import { useCollectionEditorController } from "./useCollectionEditorController";
 import { EditorCollectionActionStart } from "./ui/EditorCollectionActionStart";
 import { NewCollectionCard } from "./ui/NewCollectionCard";
 
-export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, UserType extends User = User> {
+export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, USER extends User = User> {
 
     /**
      * Firebase app where the configuration is saved.
@@ -25,7 +25,7 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
     /**
      * Define what actions can be performed on the configuration.
      */
-    configPermissions?: CollectionEditorPermissionsBuilder<UserType, EC>;
+    configPermissions?: CollectionEditorPermissionsBuilder<USER, EC>;
 
     /**
      * The words you define here will not be allowed to be used as group
@@ -47,17 +47,10 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
 
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
 
-    getUser?: (uid: string) => UserType | null;
+    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 }>;
-    };
-
 }
 
 /**
@@ -71,7 +64,7 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
  * @param getUser
  * @param collectionInference
  */
-export function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>
+export function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, USER extends User = User>
 ({
      collectionConfigController,
      configPermissions,
@@ -82,8 +75,7 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
      collectionInference,
      getData,
      onAnalyticsEvent,
-     components
- }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection> {
+ }: CollectionConfigControllerProps<EC, USER>): FireCMSPlugin<any, any, PersistedCollection> {
 
     return {
         key: "collection_editor",
@@ -100,7 +92,6 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
                 getUser,
                 getData,
                 onAnalyticsEvent,
-                components
             }
         },
         homePage: {
@@ -140,7 +131,7 @@ export function IntroWidget({}: {}) {
 
     return (
         <Paper
-            className={"my-4 px-4 py-6 flex flex-col  bg-white dark:bg-slate-800 gap-2"}>
+            className={"my-4 px-4 py-6 flex flex-col  bg-white dark:bg-surface-accent-800 gap-2"}>
             <Typography variant={"subtitle2"} className={"uppercase"}>No collections found</Typography>
             <Typography>
                 Start building collections in FireCMS easily. Map them to your existing