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

package/dist/types/collection_editor_controller.d.ts

@@ -34,5 +34,4 @@ export interface CollectionEditorController {
         existingEntities: Entity<any>[];
     }) => void;
     configPermissions: CollectionEditorPermissionsBuilder;
-    getPathSuggestions?: (path: string) => Promise<string[]>;
 }

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/types/config_controller.d.ts

@@ -1,4 +1,4 @@
-import { CMSType, Property } from "@firecms/core";
+import { CMSType, NavigationGroupMapping, Property } from "@firecms/core";
 import { PersistedCollection } from "./persisted_collection";
 /**
  * Use this controller to access the configuration that is stored externally,
@@ -17,6 +17,8 @@ export interface CollectionsConfigController {
     saveProperty: (params: SavePropertyParams) => Promise<void>;
     deleteProperty: (params: DeletePropertyParams) => Promise<void>;
     deleteCollection: (props: DeleteCollectionParams) => Promise<void>;
+    navigationEntries: NavigationGroupMapping[];
+    saveNavigationEntries: (entries: NavigationGroupMapping[]) => Promise<void>;
 }
 export type UpdateCollectionParams<M extends Record<string, any>> = {
     id: string;

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/CollectionEditorWelcomeView.d.ts

@@ -6,7 +6,7 @@ export declare function CollectionEditorWelcomeView({ path, pathSuggestions, par
     parentCollection?: EntityCollection;
     onContinue: (importData?: object[], propertiesOrder?: string[]) => void;
     existingCollectionPaths?: string[];
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react/jsx-runtime").JSX.Element | null;
 export declare function TemplateButton({ title, subtitle, icon, onClick }: {
     title: string;
     icon: React.ReactNode;

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/dist/ui/collection_editor/PropertyTree.d.ts

@@ -1,6 +1,5 @@
 import React from "react";
 import { AdditionalFieldDelegate, CMSType, PropertiesOrBuilders, PropertyOrBuilder } from "@firecms/core";
-import { DraggableProvided } from "@hello-pangea/dnd";
 export declare const PropertyTree: React.MemoExoticComponent<(<M extends {
     [Key: string]: CMSType;
 }>({ namespace, selectedPropertyKey, onPropertyClick, properties, propertiesOrder: propertiesOrderProp, additionalFields, errors, onPropertyMove, onPropertyRemove, className, inferredPropertyKeys, collectionEditable }: {
@@ -17,13 +16,13 @@ export declare const PropertyTree: React.MemoExoticComponent<(<M extends {
     inferredPropertyKeys?: string[];
     collectionEditable: boolean;
 }) => import("react/jsx-runtime").JSX.Element)>;
-export declare function PropertyTreeEntry({ propertyKey, namespace, propertyOrBuilder, additionalField, provided, selectedPropertyKey, errors, onPropertyClick, onPropertyMove, onPropertyRemove, inferredPropertyKeys, collectionEditable }: {
+export declare function PropertyTreeEntry({ id, propertyKey, namespace, propertyOrBuilder, additionalField, selectedPropertyKey, errors, onPropertyClick, onPropertyMove, onPropertyRemove, inferredPropertyKeys, collectionEditable }: {
+    id: string;
     propertyKey: string;
     namespace?: string;
     propertyOrBuilder: PropertyOrBuilder;
     additionalField?: AdditionalFieldDelegate<any>;
     selectedPropertyKey?: string;
-    provided: DraggableProvided;
     errors: Record<string, any>;
     onPropertyClick?: (propertyKey: string, namespace?: string) => void;
     onPropertyMove?: (propertiesOrder: string[], namespace?: string) => void;

package/dist/ui/collection_editor/properties/ReferencePropertyField.d.ts

@@ -1,8 +1,9 @@
-export declare function ReferencePropertyField({ existing, multiple, disabled, showErrors }: {
+export declare function ReferencePropertyField({ existing, multiple, disabled, showErrors, asString }: {
     existing: boolean;
     multiple: boolean;
     disabled: boolean;
     showErrors: boolean;
+    asString?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 export declare function CollectionsSelect({ disabled, pathPath, value, handleChange, error, ...props }: {
     disabled: boolean;

package/dist/useCollectionEditorPlugin.d.ts

@@ -25,11 +25,11 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
         }>;
         icon: React.ReactNode;
     };
-    getPathSuggestions?: (path?: string) => Promise<string[]>;
     collectionInference?: CollectionInference;
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
     getUser?: (uid: string) => USER | null;
     onAnalyticsEvent?: (event: string, params?: object) => void;
+    includeIntroView?: boolean;
 }
 /**
  * Use this hook to initialise the Collection Editor plugin.
@@ -42,5 +42,5 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
  * @param getUser
  * @param collectionInference
  */
-export declare function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, USER extends User = User>({ collectionConfigController, configPermissions, reservedGroups, extraView, getPathSuggestions, getUser, collectionInference, getData, onAnalyticsEvent, }: CollectionConfigControllerProps<EC, USER>): FireCMSPlugin<any, any, PersistedCollection>;
-export declare function IntroWidget({}: {}): import("react/jsx-runtime").JSX.Element | null;
+export declare function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, USER extends User = User>({ collectionConfigController, configPermissions, reservedGroups, extraView, getUser, collectionInference, getData, onAnalyticsEvent, includeIntroView }: CollectionConfigControllerProps<EC, USER>): FireCMSPlugin<any, any, PersistedCollection>;
+export declare function IntroWidget(): import("react/jsx-runtime").JSX.Element | null;

package/package.json

@@ -1,19 +1,18 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-beta.13",
+  "version": "3.0.0-beta.15",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/data_export": "^3.0.0-beta.13",
-    "@firecms/data_import": "^3.0.0-beta.13",
-    "@firecms/data_import_export": "^3.0.0-beta.13",
-    "@firecms/formex": "^3.0.0-beta.13",
-    "@firecms/schema_inference": "^3.0.0-beta.13",
-    "@firecms/ui": "^3.0.0-beta.13",
-    "@hello-pangea/dnd": "^17.0.0",
+    "@firecms/data_export": "^3.0.0-beta.15",
+    "@firecms/data_import": "^3.0.0-beta.15",
+    "@firecms/data_import_export": "^3.0.0-beta.15",
+    "@firecms/formex": "^3.0.0-beta.15",
+    "@firecms/schema_inference": "^3.0.0-beta.15",
+    "@firecms/ui": "^3.0.0-beta.15",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.4.1"
   },
@@ -70,5 +69,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "26d5e1f33a7ac00c78e45cd3cb3c397f4ba00821"
+  "gitHead": "0abe2ca034f396e389db595f07ef4b24b439c648"
 }

package/src/ConfigControllerProvider.tsx

@@ -49,8 +49,6 @@ export interface ConfigControllerProviderProps {
         icon: React.ReactNode
     };
 
-    getPathSuggestions?: (path?: string) => Promise<string[]>;
-
     getUser?: (uid: string) => User | null
 
     getData?: (path: string, parentPaths: string[]) => Promise<object[]>;
@@ -67,7 +65,6 @@ export const ConfigControllerProvider = React.memo(
                                           reservedGroups,
                                           collectionInference,
                                           extraView,
-                                          getPathSuggestions,
                                           getUser,
                                           getData,
                                           onAnalyticsEvent,
@@ -230,7 +227,6 @@ export const ConfigControllerProvider = React.memo(
                         createCollection,
                         editProperty,
                         configPermissions: configPermissions ?? defaultConfigPermissions,
-                        getPathSuggestions,
                     }}>
 
                     {children}
@@ -244,7 +240,6 @@ export const ConfigControllerProvider = React.memo(
                         getData={getData}
                         reservedGroups={reservedGroups}
                         extraView={extraView}
-                        pathSuggestions={getPathSuggestions}
                         getUser={getUser}
                         handleClose={(collection) => {
                             if (currentDialog?.redirect) {

package/src/types/collection_editor_controller.tsx

@@ -41,6 +41,4 @@ export interface CollectionEditorController {
 
     configPermissions: CollectionEditorPermissionsBuilder;
 
-    getPathSuggestions?: (path: string) => Promise<string[]>;
-
 }

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/types/config_controller.tsx

@@ -1,4 +1,4 @@
-import { CMSType, Property } from "@firecms/core";
+import { CMSType, NavigationGroupMapping, Property } from "@firecms/core";
 import { PersistedCollection } from "./persisted_collection";
 
 /**
@@ -21,6 +21,9 @@ export interface CollectionsConfigController {
 
     deleteCollection: (props: DeleteCollectionParams) => Promise<void>;
 
+    navigationEntries: NavigationGroupMapping[];
+    saveNavigationEntries: (entries: NavigationGroupMapping[]) => Promise<void>;
+
 }
 
 export type UpdateCollectionParams<M extends Record<string, any>> = {

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/HomePageEditorCollectionAction.tsx

@@ -49,7 +49,7 @@ export function HomePageEditorCollectionAction({
         <div>
             {permissions.deleteCollections &&
                 <Menu
-                    trigger={<IconButton>
+                    trigger={<IconButton size={"small"}>
                         <MoreVertIcon size={"small"}/>
                     </IconButton>}
                 >
@@ -70,6 +70,7 @@ export function HomePageEditorCollectionAction({
 
             {permissions.editCollections &&
                 <IconButton
+                    size={"small"}
                     onClick={(event) => {
                         onEditCollectionClicked();
                     }}>

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -1,8 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { EntityCollection, FieldCaption, IconForView, SearchIconsView, singular, toSnakeCase, } from "@firecms/core";
 import {
-    Autocomplete,
-    AutocompleteItem,
     BooleanSwitchWithLabel,
     Chip,
     CloseIcon,
@@ -163,7 +161,7 @@ export function CollectionDetailsForm({
                         </FieldCaption>
                     </div>
 
-                    <div className={cls("col-span-12 ", isSubcollection ? "" : "sm:col-span-8")}>
+                    <div className={cls("col-span-12 ")}>
                         <Field name={"path"}
                                as={DebouncedTextField}
                                label={"Path"}
@@ -179,45 +177,65 @@ export function CollectionDetailsForm({
 
                     </div>
 
-                    {!isSubcollection && <div className={"col-span-12 sm:col-span-4 relative"}>
-
-                        <TextField error={showErrors && Boolean(errors.group)}
-                                   disabled={isSubmitting}
-                                   value={values.group ?? ""}
-                                   autoComplete="off"
-                                   onChange={(event) => setFieldValue("group", event.target.value)}
-                                   name={"group"}
-                                   inputRef={groupRef}
-                                   label="Group"/>
-                        <Autocomplete
-                            open={autoCompleteOpen && (groupOptions ?? []).length > 0}
-                            setOpen={setAutoCompleteOpen}>
-                            {groupOptions?.map((group, index) => {
-                                return <AutocompleteItem
-                                    key={index + "_" + group}
-                                    onClick={() => {
-                                        setAutoCompleteOpen(false);
-                                        setFieldValue("group", group ?? null);
-                                    }}
-                                >
-                                    <div className={"flex-grow"}>
-                                        {group}
-                                    </div>
-                                </AutocompleteItem>;
-                            })}
-                        </Autocomplete>
-                        <FieldCaption>
-                            {showErrors && Boolean(errors.group) ? errors.group : "Group in the home page"}
-                        </FieldCaption>
-
-
-                    </div>}
+                    {/*{!isSubcollection && <div className={"col-span-12 sm:col-span-4 relative"}>*/}
+
+                    {/*    <TextField error={showErrors && Boolean(errors.group)}*/}
+                    {/*               disabled={isSubmitting}*/}
+                    {/*               value={values.group ?? ""}*/}
+                    {/*               autoComplete="off"*/}
+                    {/*               onChange={(event) => setFieldValue("group", event.target.value)}*/}
+                    {/*               name={"group"}*/}
+                    {/*               inputRef={groupRef}*/}
+                    {/*               label="Group"/>*/}
+                    {/*    <Autocomplete*/}
+                    {/*        open={autoCompleteOpen && (groupOptions ?? []).length > 0}*/}
+                    {/*        setOpen={setAutoCompleteOpen}>*/}
+                    {/*        {groupOptions?.map((group, index) => {*/}
+                    {/*            return <AutocompleteItem*/}
+                    {/*                key={index + "_" + group}*/}
+                    {/*                className={"pr-6 pl-14"}*/}
+                    {/*                onClick={() => {*/}
+                    {/*                    setAutoCompleteOpen(false);*/}
+                    {/*                    setFieldValue("group", group ?? null);*/}
+                    {/*                }}*/}
+                    {/*            >*/}
+                    {/*                <div className={"flex-grow"}>*/}
+                    {/*                    {group}*/}
+                    {/*                </div>*/}
+                    {/*            </AutocompleteItem>;*/}
+                    {/*        })}*/}
+                    {/*    </Autocomplete>*/}
+                    {/*    <FieldCaption>*/}
+                    {/*        {showErrors && Boolean(errors.group) ? errors.group : "Group in the home page"}*/}
+                    {/*    </FieldCaption>*/}
+
+
+                    {/*</div>}*/}
 
                     <LayoutModeSwitch
                         className={"col-span-12"}
                         value={values.openEntityMode ?? "side_panel"}
                         onChange={(value) => setFieldValue("openEntityMode", value)}/>
 
+                    <div className={"col-span-12"}>
+                        <BooleanSwitchWithLabel
+                            position={"start"}
+                            size={"large"}
+                            allowIndeterminate={true}
+                            label={values.history === null || values.history === undefined ? "Document history revisions enabled if enabled globally" : (
+                                values.history ? "Document history revisions ENABLED" : "Document history revisions NOT enabled"
+                            )}
+                            onValueChange={(v) => setFieldValue("history", v)}
+                            value={values.history === undefined ? null : values.history}
+                        />
+                        <FieldCaption>
+                            When enabled, each document in this collection will have a history of changes.
+                            This is useful for auditing purposes. The data is stored in a subcollection of the document
+                            in your database, called <b>__history</b>.
+                        </FieldCaption>
+                    </div>
+
+
                     <div className={"col-span-12 mt-8"}>
                         <ExpandablePanel
                             expanded={advancedPanelExpanded}
@@ -324,6 +342,20 @@ export function CollectionDetailsForm({
                                         ))}
                                     </Select>
                                 </div>
+
+                                <div className={"col-span-12"}>
+                                    <BooleanSwitchWithLabel
+                                        position={"start"}
+                                        size={"large"}
+                                        label={values.includeJsonView === undefined || values.includeJsonView ? "Include JSON view" : "Do not include JSON view"}
+                                        onValueChange={(v) => setFieldValue("includeJsonView", v)}
+                                        value={values.includeJsonView === undefined ? true : values.includeJsonView}
+                                    />
+                                    <FieldCaption>
+                                        Include the JSON representation of the document.
+                                    </FieldCaption>
+                                </div>
+
                                 <div className={"col-span-12"}>
                                     <Select
                                         name="customId"
@@ -408,7 +440,7 @@ export function CollectionDetailsForm({
                     fullWidth
                 >
                     <div className={"p-4 overflow-auto min-h-[200px]"}>
-                        <SearchIconsView selectedIcon={values.icon}
+                        <SearchIconsView selectedIcon={typeof values.icon === "string" ? values.icon : undefined}
                                          onIconSelected={(icon: string) => {
                                              setIconDialogOpen(false);
                                              setFieldValue("icon", icon);

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,
-    TopNavigationResult,
     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,
@@ -184,7 +186,7 @@ export function CollectionEditor(props: CollectionEditorDialogProps & {
 
     const {
         groups
-    }: TopNavigationResult = topLevelNavigation;
+    }: NavigationResult = topLevelNavigation;
 
     const initialCollection = collection
         ? {
@@ -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();
                                 }}>