@firecms/core 3.0.0-alpha.28 → 3.0.0-alpha.30

package/src/core/contexts/DialogsProvider.tsx

@@ -0,0 +1,50 @@
+import React, { PropsWithChildren, useCallback, useRef, useState } from "react";
+import { DialogControllerEntryProps, DialogsController } from "../../types/dialogs_controller";
+
+export const DialogsControllerContext = React.createContext<DialogsController>({} as DialogsController);
+
+export const DialogsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) => {
+
+    const [dialogEntries, setDialogEntries] = useState<DialogControllerEntryProps[]>([]);
+    const dialogEntriesRef = useRef<DialogControllerEntryProps[]>(dialogEntries);
+
+    const updateDialogEntries = (newPanels: DialogControllerEntryProps[]) => {
+        dialogEntriesRef.current = newPanels;
+        setDialogEntries(newPanels);
+    };
+
+    const close = useCallback(() => {
+
+        if (dialogEntries.length === 0)
+            return;
+
+        const updatedPanels = [...dialogEntries.slice(0, -1)];
+        updateDialogEntries(updatedPanels);
+
+    }, [dialogEntries]);
+
+    const open = useCallback((dialogEntry: DialogControllerEntryProps) => {
+
+        const updatedPanels = [...dialogEntries, dialogEntry];
+        updateDialogEntries(updatedPanels);
+
+        return {
+            closeDialog: () => {
+                const updatedPanels = dialogEntriesRef.current.filter(e => e.key !== dialogEntry.key);
+                updateDialogEntries(updatedPanels);
+            }
+        }
+    }, [dialogEntries]);
+
+    return (
+        <DialogsControllerContext.Provider value={{
+            open,
+            close
+        }}>
+            {children}
+            {dialogEntries.map((entry, i) => <entry.Component
+                key={`dialog_${i}`}
+                open={true}/>)}
+        </DialogsControllerContext.Provider>
+    );
+};

package/src/core/index.tsx

@@ -20,7 +20,7 @@ export * from "./useBuildModeController";
 export * from "../components/util/useOutsideAlerter";
 export * from "./useBuildLocalConfigurationPersistence";
 
-export { SnackbarProvider } from "./contexts/SnackbarContext";
+export { SnackbarProvider } from "./contexts/SnackbarProvider";
 export { ModeControllerProvider } from "./contexts/ModeController";
 
 export * from "./contexts/AuthControllerContext";

package/src/core/internal/useBuildNavigationContext.tsx

@@ -25,27 +25,27 @@ import {
 } from "../util";
 import { getParentReferencesFromPath } from "../util/parent_references_from_path";
 
-type BuildNavigationContextProps<UserType extends User> = {
+type BuildNavigationContextProps<EC extends EntityCollection, UserType extends User> = {
     basePath: string,
     baseCollectionPath: string,
     authController: AuthController<UserType>;
-    collections?: EntityCollection[] | EntityCollectionsBuilder;
+    collections?: EC[] | EntityCollectionsBuilder<EC>;
     views?: CMSView[] | CMSViewsBuilder;
     userConfigPersistence?: UserConfigurationPersistence;
     plugins?: FireCMSPlugin[];
     dataSource: DataSource;
 };
 
-export function useBuildNavigationContext<UserType extends User>({
-                                                                     basePath,
-                                                                     baseCollectionPath,
-                                                                     authController,
-                                                                     collections: baseCollections,
-                                                                     views: baseViews,
-                                                                     userConfigPersistence,
-                                                                     plugins,
-                                                                     dataSource
-                                                                 }: BuildNavigationContextProps<UserType>): NavigationContext {
+export function useBuildNavigationContext<EC extends EntityCollection, UserType extends User>({
+                                                                                                                 basePath,
+                                                                                                                 baseCollectionPath,
+                                                                                                                 authController,
+                                                                                                                 collections: baseCollections,
+                                                                                                                 views: baseViews,
+                                                                                                                 userConfigPersistence,
+                                                                                                                 plugins,
+                                                                                                                 dataSource
+                                                                                                             }: BuildNavigationContextProps<EC, UserType>): NavigationContext {
 
     const location = useLocation();
 
@@ -288,7 +288,7 @@ function filterOutNotAllowedCollections(resolvedCollections: EntityCollection[],
         });
 }
 
-async function resolveCollections(collections: undefined | EntityCollection[] | EntityCollectionsBuilder, authController: AuthController, dataSource: DataSource, plugins?: FireCMSPlugin[]) {
+async function resolveCollections(collections: undefined | EntityCollection[] | EntityCollectionsBuilder<any>, authController: AuthController, dataSource: DataSource, plugins?: FireCMSPlugin[]) {
     let resolvedCollections: EntityCollection[] = [];
     if (typeof collections === "function") {
         resolvedCollections = await collections({

package/src/core/internal/useBuildSideEntityController.tsx

@@ -38,7 +38,15 @@ export const useBuildSideEntityController = (navigation: NavigationContext,
                 const newFlag = location.hash === `#${NEW_URL_HASH}`;
                 const entityOrCollectionPath = navigation.urlPathToDataPath(location.pathname);
                 const panelsFromUrl = buildSidePanelsFromUrl(entityOrCollectionPath, navigation.collections, newFlag);
-                sideDialogsController.replace(panelsFromUrl.map((props) => propsToSidePanel(props, navigation, smallLayout)));
+                for (let i = 0; i < panelsFromUrl.length; i++) {
+                    const panel = panelsFromUrl[i];
+                    setTimeout(() => {
+                        if (i === 0)
+                            sideDialogsController.replace(propsToSidePanel(panel, navigation, smallLayout));
+                        else
+                            sideDialogsController.open(propsToSidePanel(panel, navigation, smallLayout))
+                    }, 1);
+                }
             }
             initialised.current = true;
         }

package/src/form/EntityForm.tsx

@@ -3,6 +3,7 @@ import React, { MutableRefObject, useCallback, useEffect, useMemo, useRef, useSt
 import {
     CMSAnalyticsEvent,
     Entity,
+    EntityAction,
     EntityCollection,
     EntityStatus,
     EntityValues,
@@ -15,13 +16,26 @@ import { Form, Formik, FormikHelpers, FormikProps } from "formik";
 import { PropertyFieldBinding } from "./PropertyFieldBinding";
 import { CustomFieldValidator, getYupEntitySchema } from "./validation";
 import equal from "react-fast-compare"
-import { ErrorBoundary, getDefaultValuesFor, isHidden, isReadOnly, resolveCollection } from "../core";
-import { useDataSource, useFireCMSContext } from "../hooks";
+import {
+    canCreateEntity,
+    canDeleteEntity,
+    ErrorBoundary,
+    fullPathToCollectionSegments,
+    getDefaultValuesFor,
+    isHidden,
+    isReadOnly,
+    resolveCollection
+} from "../core";
+import { useAuthController, useDataSource, useFireCMSContext, useSideEntityController } from "../hooks";
 import { ErrorFocus } from "./components/ErrorFocus";
 import { CustomIdField } from "./components/CustomIdField";
-import { DialogActions, Typography } from "../components";
+import { DialogActions, IconButton, Typography } from "../components";
 import { Button } from "../components/Button";
 import { cn } from "../components/util/cn";
+import {
+    copyEntityAction,
+    deleteEntityAction
+} from "../core/components/EntityCollectionTable/internal/default_entity_actions";
 
 /**
  * @category Components
@@ -326,6 +340,21 @@ function EntityFormInternal<M extends Record<string, any>>({
             : undefined,
         [entityId, collection.properties, uniqueFieldValidator]);
 
+    const authController = useAuthController();
+
+    const getActionsForEntity = useCallback(({ entity, customEntityActions }: { entity?: Entity<M>, customEntityActions?: EntityAction[] }): EntityAction[] => {
+        const createEnabled = canCreateEntity(collection, authController, fullPathToCollectionSegments(path), null);
+        const deleteEnabled = entity ? canDeleteEntity(collection, authController, fullPathToCollectionSegments(path), entity) : true;
+        const actions: EntityAction[] = [];
+        if (createEnabled)
+            actions.push(copyEntityAction);
+        if (deleteEnabled)
+            actions.push(deleteEntityAction);
+        if (customEntityActions)
+            actions.push(...customEntityActions);
+        return actions;
+    }, [authController, collection, path]);
+
     return (
         <Formik
             initialValues={baseDataSourceValues as M}
@@ -417,7 +446,8 @@ function EntityFormInternal<M extends Record<string, any>>({
                             status={status}
                             savingError={savingError}
                             closeAfterSaveRef={closeAfterSaveRef}
-                            autoSave={autoSave}/>}
+                            autoSave={autoSave}
+                            entityActions={getActionsForEntity({ entity, customEntityActions: collection.entityActions })}/>}
 
                     </div>
                 </div>
@@ -436,7 +466,8 @@ function InnerForm<M extends Record<string, any>>(props: FormikProps<M> & {
     status: "new" | "existing" | "copy",
     savingError?: Error,
     closeAfterSaveRef: MutableRefObject<boolean>,
-    autoSave?: boolean
+    autoSave?: boolean,
+    entityActions: EntityAction[]
 }) {
 
     const {
@@ -455,9 +486,14 @@ function InnerForm<M extends Record<string, any>>(props: FormikProps<M> & {
         savingError,
         dirty,
         closeAfterSaveRef,
-        autoSave
+        autoSave,
+        entityActions
     } = props;
 
+    const context = useFireCMSContext();
+    const formActions = entityActions.filter(a => a.includeInForm === undefined || a.includeInForm);
+    const sideEntityController = useSideEntityController();
+
     const modified = dirty;
     useEffect(() => {
         if (onModified)
@@ -553,6 +589,27 @@ function InnerForm<M extends Record<string, any>>(props: FormikProps<M> & {
                         </Typography>
                     </div>}
 
+                {entity && formActions.length > 0 && <div className="flex-grow flex overflow-auto no-scrollbar">
+                    {formActions.map(action => (
+                        <IconButton
+                            key={action.name}
+                            color="primary"
+                            onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+                                event.stopPropagation();
+                                if (entity)
+                                    action.onClick({
+                                        entity,
+                                        fullPath: resolvedCollection.path,
+                                        collection: resolvedCollection,
+                                        context,
+                                        sideEntityController
+                                    });
+                            }}>
+                            {action.icon}
+                        </IconButton>
+                    ))}
+                </div>}
+
                 <Button
                     variant="text"
                     disabled={disabled}

package/src/hooks/useDialogsController.tsx

@@ -0,0 +1,14 @@
+import { useContext } from "react";
+import { DialogsController } from "../types/dialogs_controller";
+import { DialogsControllerContext } from "../core/contexts/DialogsProvider";
+
+/**
+ * Use this hook to open a dialog imperatively.
+ * Alternatively, you can use dialogs declaratively using the `Dialog` component.
+ *
+ * Consider that in order to use this hook you need to have a parent
+ * `FireCMS`
+ *
+ * @category Hooks and utilities
+ */
+export const useDialogsController = (): DialogsController => useContext(DialogsControllerContext);

package/src/hooks/useFireCMSContext.tsx

@@ -8,17 +8,9 @@ import { useDataSource } from "./data/useDataSource";
 import { useStorageSource } from "./useStorageSource";
 import { useSnackbarController } from "./useSnackbarController";
 import { useUserConfigurationPersistence } from "./useUserConfigurationPersistence";
+import { useDialogsController } from "./useDialogsController";
 
-export const FireCMSContextInstance = createContext<Partial<FireCMSContext>>({
-    sideDialogsController: {} as any,
-    sideEntityController: {} as any,
-    navigation: {} as any,
-    dataSource: {} as any,
-    storageSource: {} as any,
-    authController: {} as any,
-    snackbarController: {} as any,
-    fields: {}
-});
+export const FireCMSContextInstance = createContext<Partial<FireCMSContext>>({});
 
 /**
  * Hook to retrieve the {@link FireCMSContext}.
@@ -40,6 +32,7 @@ export const useFireCMSContext = <UserType extends User = User, AuthControllerTy
     const storageSource = useStorageSource();
     const snackbarController = useSnackbarController();
     const userConfigPersistence = useUserConfigurationPersistence();
+    const dialogsController = useDialogsController();
 
     return {
         ...partialContext,
@@ -50,7 +43,8 @@ export const useFireCMSContext = <UserType extends User = User, AuthControllerTy
         dataSource,
         storageSource,
         snackbarController,
-        userConfigPersistence
+        userConfigPersistence,
+        dialogsController
     }
 
 };

package/src/styles.ts

@@ -1,4 +1,4 @@
-export const focusedMixin = "focus:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent";
+export const focusedMixin = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent";
 export const focusedInvisibleMixin = "focus:bg-opacity-70 focus:bg-gray-100 focus:dark:bg-gray-800 focus:dark:bg-opacity-60";
 export const focusedClasses = "z-30 outline-none ring-2 ring-primary ring-opacity-75 ring-offset-2 ring-offset-transparent ";
 export const fieldBackgroundMixin = "bg-opacity-70 bg-gray-100 dark:bg-gray-800 dark:bg-opacity-60 transition duration-150 ease-in-out";

package/src/types/collections.ts

@@ -6,6 +6,7 @@ import { EntityCallbacks } from "./entity_callbacks";
 import { Permissions, PermissionsBuilder } from "./permissions";
 import { EnumValues, PropertiesOrBuilders } from "./properties";
 import { FormContext } from "./fields";
+import { EntityAction } from "./entity_actions";
 
 /**
  * This interface represents a view that includes a collection of entities.
@@ -14,9 +15,7 @@ import { FormContext } from "./fields";
  *
  * @category Models
  */
-export interface EntityCollection<M extends Record<string, any> = any,
-    AdditionalKey extends string = string,
-    UserType extends User = User> {
+export interface EntityCollection<M extends Record<string, any> = any, UserType extends User = User> {
 
     /**
      * Name of the collection, typically plural.
@@ -58,9 +57,9 @@ export interface EntityCollection<M extends Record<string, any> = any,
 
     /**
      * Icon key to use in this collection.
-     * You can use any of the icons in the MUI specs:
-     * https://mui.com/material-ui/material-icons/
-     * e.g. 'AccountTree' or 'Person'
+     * You can use any of the icons in the Material specs:
+     * https://fonts.google.com/icons
+     * e.g. 'account_tree' or 'person'
      */
     icon?: string;
 
@@ -93,7 +92,7 @@ export interface EntityCollection<M extends Record<string, any> = any,
      *     - If you are using a collection group, you will also have an
      *       additional `collectionGroupParent` column.
      */
-    propertiesOrder?: Extract<keyof M | AdditionalKey, string>[];
+    propertiesOrder?: Extract<keyof M, string>[];
 
     /**
      * If enabled, content is loaded in batches. If `false` all entities in the
@@ -113,7 +112,7 @@ export interface EntityCollection<M extends Record<string, any> = any,
      * Permissions the logged-in user can perform on this collection.
      * If not specified everything defaults to `true`.
      */
-    permissions?: Permissions | PermissionsBuilder<EntityCollection<M>, UserType, M>;
+    permissions?: Permissions | PermissionsBuilder<any, UserType, M>;
 
     /**
      * Are the entities in this collection selectable. Defaults to `true`
@@ -140,6 +139,31 @@ export interface EntityCollection<M extends Record<string, any> = any,
      */
     Actions?: React.ComponentType<CollectionActionsProps> | React.ComponentType<CollectionActionsProps>[];
 
+    /**
+     * You can define additional actions that can be performed on the entities
+     * in this collection. These actions can be displayed in the collection
+     * view or in the entity view.
+     *
+     * You can use the `onClick` method to implement your own logic.
+     * In the `context` prop you can access all the controllers of FireCMS.
+     *
+     * ```
+     * const archiveEntityAction: EntityAction = {
+     *     icon: <ArchiveIcon/>,
+     *     name: "Archive",
+     *     onClick({
+     *                 entity,
+     *                 collection,
+     *                 context,
+     *             }): Promise<void> {
+     *         // Add your code here
+     *         return Promise.resolve(undefined);
+     *     }
+     * }
+     * ```
+     */
+    entityActions?: EntityAction<M, UserType>[];
+
     /**
      * Pass your own selection controller if you want to control selected
      * entities externally.
@@ -190,8 +214,7 @@ export interface EntityCollection<M extends Record<string, any> = any,
      * You can add additional fields to the collection view by implementing
      * an additional field delegate.
      */
-    additionalFields?: AdditionalFieldDelegate<M, AdditionalKey, UserType>[];
-
+    additionalFields?: AdditionalFieldDelegate<M, UserType>[];
 
     /**
      * Default size of the rendered collection
@@ -245,10 +268,8 @@ export interface EntityCollection<M extends Record<string, any> = any,
 
 /**
  * Parameter passed to the `Actions` prop in the collection configuration.
- * Note that actions are rendered in the collection toolbar, as well
- * as in the home page card.
- * If you don't want to render the actions in the home page card, you can
- * return `null` if mode is `home`.
+ * The component will receive this prop when it is rendered in the collection
+ * toolbar.
  *
  * @category Models
  */
@@ -349,7 +370,6 @@ export type FilterCombination<Key extends string> = Partial<Record<Key, "asc" |
  */
 export type CollectionSize = "xs" | "s" | "m" | "l" | "xl";
 
-
 export type AdditionalFieldDelegateProps<M extends Record<string, any> = any, UserType extends User = User> = {
     entity: Entity<M>,
     context: FireCMSContext<UserType>
@@ -361,14 +381,13 @@ export type AdditionalFieldDelegateProps<M extends Record<string, any> = any, Us
  * @category Models
  */
 export interface AdditionalFieldDelegate<M extends Record<string, any> = any,
-    AdditionalKey extends string = string,
     UserType extends User = User> {
 
     /**
      * ID of this column. You can use this id in the `properties` field of the
      * collection in any order you want
      */
-    id: AdditionalKey;
+    id: string;
 
     /**
      * Header of this column

package/src/types/dialogs_controller.tsx

@@ -0,0 +1,31 @@
+/**
+ * Controller to open the side dialog
+ * @category Hooks and utilities
+ */
+export interface DialogsController {
+
+    /**
+     * Close the last dialog
+     */
+    close: () => void;
+
+    /**
+     * Open a dialog
+     * @param props
+     */
+    open: (props: DialogControllerEntryProps) => { closeDialog: () => void };
+}
+
+/**
+ * Props used to open a side dialog
+ * @category Hooks and utilities
+ */
+export interface DialogControllerEntryProps {
+
+    key: string;
+    /**
+     * The component type that will be rendered
+     */
+    Component: React.ComponentType<{ open: boolean }>;
+
+}

package/src/types/entity_actions.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { FireCMSContext } from "./firecms_context";
+import { Entity } from "./entities";
+import { EntityCollection, SelectionController } from "./collections";
+import { User } from "./user";
+import { SideEntityController } from "./side_entity_controller";
+
+export type EntityAction<M extends object = any, UserType extends User = User> = {
+    name: string;
+    icon?: React.ReactElement;
+    onClick: (props: EntityActionClickProps<M, UserType>) => Promise<void>;
+    /**
+     * Show this action in the menu, defaults to true
+     */
+    collapsed?: boolean;
+
+    /**
+     * Show this action in the form, defaults to true
+     */
+    includeInForm?: boolean;
+}
+
+export type EntityActionClickProps<M extends object, UserType extends User = User> = {
+    entity: Entity<M>;
+    context: FireCMSContext<UserType>;
+    fullPath?: string;
+    collection?: EntityCollection<M>;
+    selectionController?: SelectionController;
+    highlightEntity?: (entity: Entity<any>) => void;
+    unhighlightEntity?: (entity: Entity<any>) => void;
+    onCollectionChange?: () => void;
+    /**
+     * If this actions is being called from a side dialog
+     */
+    sideEntityController?: SideEntityController;
+};

package/src/types/firecms.tsx

@@ -23,11 +23,11 @@ import { CMSAnalyticsEvent } from "./analytics";
  * APIs directly, or a REST API.
  * @category Models
  */
-export type EntityCollectionsBuilder = (params: {
+export type EntityCollectionsBuilder<EC extends EntityCollection> = (params: {
     user: User | null,
     authController: AuthController,
     dataSource: DataSource
-}) => EntityCollection[] | Promise<EntityCollection[]>;
+}) => EC[] | Promise<EC[]>;
 
 /**
  * Use this callback to build custom views dynamically.
@@ -47,7 +47,7 @@ export type CMSViewsBuilder = (params: {
 /**
  * @category Models
  */
-export type FireCMSProps<UserType extends User> = {
+export type FireCMSProps<UserType extends User, EC extends EntityCollection> = {
 
     /**
      * Use this function to return the components you want to render under
@@ -73,7 +73,7 @@ export type FireCMSProps<UserType extends User> = {
      * Each of the navigation entries in this field
      * generates an entry in the main menu.
      */
-    collections?: EntityCollection[] | EntityCollectionsBuilder;
+    collections?: EC[] | EntityCollectionsBuilder<EC>;
 
     /**
      * Custom additional views created by the developer, added to the main
@@ -148,7 +148,7 @@ export type FireCMSProps<UserType extends User> = {
      * Use plugins to modify the behaviour of the CMS.
      * Currently, in ALPHA, and likely subject to change.
      */
-    plugins?: FireCMSPlugin[];
+    plugins?: FireCMSPlugin<any, any, any>[];
 
     /**
      * Callback used to get analytics events from the CMS

package/src/types/firecms_context.tsx

@@ -13,6 +13,7 @@ import { FireCMSPlugin } from "./plugins";
 import { CMSAnalyticsEvent } from "./analytics";
 import { PropertyConfig } from "./property_config";
 import { EntityCustomView } from "./collections";
+import { DialogsController } from "./dialogs_controller";
 
 /**
  * Context that includes the internal controllers and contexts used by the app.
@@ -59,9 +60,16 @@ export type FireCMSContext<UserType extends User = User, AuthControllerType exte
 
     /**
      * Controller used to open side dialogs
+     * This is the controller used internally by side entity dialogs
+     * or reference dialogs.
      */
     sideDialogsController: SideDialogsController;
 
+    /**
+     * Controller used to open regular dialogs
+     */
+    dialogsController: DialogsController;
+
     /**
      * Used auth controller
      */

package/src/types/index.ts

@@ -1,5 +1,6 @@
 export * from "./auth";
 export * from "./entities";
+export * from "./entity_actions";
 export * from "./resolved_entities";
 export * from "./properties";
 export * from "./collections";

package/src/types/navigation.ts

@@ -154,9 +154,9 @@ export interface CMSView {
 
     /**
      * Icon key to use in this view.
-     * You can use any of the icons in the MUI specs:
-     * https://mui.com/material-ui/material-icons/
-     * e.g. 'AccountTree' or 'Person'
+     * You can use any of the icons in the Material specs:
+     * https://fonts.google.com/icons
+     * e.g. 'account_tree' or 'person'
      */
     icon?: string;