@firecms/core 3.0.1 → 3.1.0-canary.02232f4

package/src/core/DrawerNavigationGroup.tsx

@@ -0,0 +1,120 @@
+import React from "react";
+import { cls, ExpandMoreIcon, Typography } from "@firecms/ui";
+import { NavigationEntry } from "../types";
+import { IconForView } from "../util";
+import { DrawerNavigationItem } from "./DrawerNavigationItem";
+import { useTranslation } from "../hooks/useTranslation";
+
+export interface DrawerNavigationGroupProps {
+    /**
+     * Group name to display in header. When null, uses the translated default group name.
+     */
+    group: string | null;
+    /**
+     * Navigation entries in this group
+     */
+    entries: NavigationEntry[];
+    /**
+     * Whether the group is collapsed
+     */
+    collapsed: boolean;
+    /**
+     * Callback when collapse state should toggle
+     */
+    onToggleCollapsed: () => void;
+    /**
+     * Whether the drawer is in open (expanded) state
+     */
+    drawerOpen: boolean;
+    /**
+     * Whether tooltips should be shown (drawer closed + hovered)
+     */
+    tooltipsOpen: boolean;
+    /**
+     * Whether admin menu is open (used to control tooltip visibility)
+     */
+    adminMenuOpen?: boolean;
+    /**
+     * Optional actions to render in the group header (e.g., "Add collection" button)
+     */
+    headerActions?: React.ReactNode;
+    /**
+     * Optional callback when a navigation item is clicked
+     */
+    onItemClick?: (entry: NavigationEntry) => void;
+}
+
+/**
+ * Shared drawer navigation group component used by both DefaultDrawer and FireCMSCloudDrawer.
+ * Renders a collapsible group with header and navigation items.
+ */
+export function DrawerNavigationGroup({
+    group,
+    entries,
+    collapsed,
+    onToggleCollapsed,
+    drawerOpen,
+    tooltipsOpen,
+    adminMenuOpen,
+    headerActions,
+    onItemClick
+}: DrawerNavigationGroupProps) {
+    const { t } = useTranslation();
+    return (
+        <div
+            className={"bg-surface-50 dark:bg-surface-800/30 my-4 rounded-lg ml-3 mr-1"}
+            key={`drawer_group_${group}`}
+        >
+            {/* Group Header */}
+            {drawerOpen ? (
+                <div
+                    className="pl-4 pr-2 py-2 flex flex-row items-center cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-700/50 rounded-t-lg transition-colors"
+                    onClick={onToggleCollapsed}
+                >
+                    <ExpandMoreIcon
+                        size={"smallest"}
+                        className={cls(
+                            "text-surface-500 dark:text-surface-400 transition-transform duration-200 mr-1",
+                            collapsed ? "-rotate-90" : "rotate-0"
+                        )}
+                    />
+                    <Typography
+                        variant={"caption"}
+                        color={"secondary"}
+                        className="font-medium flex-grow line-clamp-1"
+                    >
+                        {(group && group !== "__default__" ? group : t("views_group")).toUpperCase()}
+                    </Typography>
+                    {headerActions && (
+                        <div onClick={(e) => e.stopPropagation()}>
+                            {headerActions}
+                        </div>
+                    )}
+                </div>
+            ) : (
+                <div className="w-full" />
+            )}
+
+            {/* Collapsible Content */}
+            <div
+                className={cls(
+                    "overflow-hidden transition-all duration-200 ease-in-out",
+                    collapsed ? "max-h-0 opacity-0" : "max-h-[2000px] opacity-100"
+                )}
+            >
+                {entries.map((entry) => (
+                    <DrawerNavigationItem
+                        key={entry.id}
+                        icon={<IconForView collectionOrView={entry.collection ?? entry.view} size={18} />}
+                        tooltipsOpen={!collapsed && tooltipsOpen}
+                        adminMenuOpen={adminMenuOpen}
+                        drawerOpen={drawerOpen}
+                        onClick={() => onItemClick?.(entry)}
+                        url={entry.url}
+                        name={entry.name}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+}

package/src/core/DrawerNavigationItem.tsx

@@ -34,13 +34,13 @@ export function DrawerNavigationItem({
                 transition: drawerOpen ? "width 150ms ease-in" : undefined
             }}
             className={({ isActive }: any) => cls("rounded-lg truncate",
-                "hover:bg-surface-accent-300 hover:bg-opacity-75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white",
+                "hover:bg-surface-accent-300 hover:bg-opacity-75 hover:bg-surface-accent-300/75 dark:hover:bg-surface-accent-800 dark:hover:bg-opacity-75 dark:hover:bg-surface-accent-800/75 text-text-primary dark:text-surface-200 hover:text-surface-900 hover:dark:text-white hover:bg-surface-accent-300/75 dark:hover:bg-surface-accent-800/75",
                 "flex flex-row items-center mr-8",
                 // "transition-all ease-in-out delay-100 duration-300",
                 // drawerOpen ? "w-full" : "w-18",
                 drawerOpen ? "pl-4 h-10" : "pl-4 h-9",
                 "font-semibold text-xs",
-                isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50" : ""
+                isActive ? "bg-surface-accent-200 bg-opacity-60 dark:bg-surface-800 dark:bg-opacity-50 bg-surface-accent-200/60 dark:bg-surface-800/50" : ""
             )}
             to={url}
         >
@@ -49,8 +49,9 @@ export function DrawerNavigationItem({
 
             <div
                 className={cls(
+                    "text-text-primary dark:text-surface-200",
                     drawerOpen ? "opacity-100" : "opacity-0 hidden",
-                    "ml-4 font-inherit text-inherit"
+                    "ml-4 font-inherit"
                 )}>
                 {name.toUpperCase()}
             </div>

package/src/core/EntityEditView.tsx

@@ -26,12 +26,13 @@ import {
     useFireCMSContext,
     useLargeLayout
 } from "../hooks";
-import { CircularProgress, cls, CodeIcon, defaultBorderMixin, Tab, Tabs, Typography } from "@firecms/ui";
+import { CircularProgress, cls, CodeIcon, defaultBorderMixin, Tab, Tabs, Typography, Menu, MenuItem, ExpandMoreIcon } from "@firecms/ui";
 import { getEntityFromMemoryCache } from "../util/entity_cache";
 import { EntityForm, EntityFormProps } from "../form";
 import { EntityEditViewFormActions } from "./EntityEditViewFormActions";
 import { EntityJsonPreview } from "../components/EntityJsonPreview";
 import { createFormexStub } from "../util/createFormexStub";
+import { useTranslation } from "../hooks/useTranslation";
 
 export const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
 export const JSON_TAB_VALUE = "__json";
@@ -75,7 +76,7 @@ export interface EntityEditViewProps<M extends Record<string, any>> {
     copy?: boolean;
     selectedTab?: string;
     parentCollectionIds: string[];
-    onValuesModified?: (modified: boolean, values:M) => void;
+    onValuesModified?: (modified: boolean, values: M) => void;
     onSaved?: (params: OnUpdateParams) => void;
     onTabChange?: (props: OnTabChangeParams<M>) => void;
     layout?: "side_panel" | "full_screen";
@@ -88,9 +89,9 @@ export interface EntityEditViewProps<M extends Record<string, any>> {
  * an entity is opened.
  */
 export function EntityEditView<M extends Record<string, any>, USER extends User>({
-                                                                                     entityId,
-                                                                                     ...props
-                                                                                 }: EntityEditViewProps<M>) {
+    entityId,
+    ...props
+}: EntityEditViewProps<M>) {
 
     const {
         entity,
@@ -123,7 +124,7 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
     }, [authController, entity, status]);
 
     if ((dataLoading && !initialDirtyValues) || (!entity || canEdit === undefined) && (status === "existing" || status === "copy")) {
-        return <CircularProgressCenter/>;
+        return <CircularProgressCenter />;
     }
 
     if (entityId && !entity && !initialDirtyValues) {
@@ -131,36 +132,36 @@ export function EntityEditView<M extends Record<string, any>, USER extends User>
     }
 
     return <EntityEditViewInner<M> {...props}
-                                   entityId={entityId}
-                                   entity={entity}
-                                   initialDirtyValues={initialDirtyValues as Partial<M>}
-                                   dataLoading={dataLoading}
-                                   status={status}
-                                   setStatus={setStatus}
-                                   canEdit={canEdit}
+        entityId={entityId}
+        entity={entity}
+        initialDirtyValues={initialDirtyValues as Partial<M>}
+        dataLoading={dataLoading}
+        status={status}
+        setStatus={setStatus}
+        canEdit={canEdit}
     />;
 }
 
 export function EntityEditViewInner<M extends Record<string, any>>({
-                                                                       path,
-                                                                       fullIdPath,
-                                                                       entityId,
-                                                                       selectedTab: selectedTabProp,
-                                                                       collection,
-                                                                       parentCollectionIds,
-                                                                       onValuesModified,
-                                                                       onSaved,
-                                                                       onTabChange,
-                                                                       entity,
-                                                                       initialDirtyValues,
-                                                                       dataLoading,
-                                                                       layout = "side_panel",
-                                                                       barActions,
-                                                                       status,
-                                                                       setStatus,
-                                                                       formProps,
-                                                                       canEdit
-                                                                   }: EntityEditViewProps<M> & {
+    path,
+    fullIdPath,
+    entityId,
+    selectedTab: selectedTabProp,
+    collection,
+    parentCollectionIds,
+    onValuesModified,
+    onSaved,
+    onTabChange,
+    entity,
+    initialDirtyValues,
+    dataLoading,
+    layout = "side_panel",
+    barActions,
+    status,
+    setStatus,
+    formProps,
+    canEdit
+}: EntityEditViewProps<M> & {
     entity?: Entity<M>,
     initialDirtyValues?: Partial<M>, // dirty cached entity in memory
     dataLoading: boolean,
@@ -170,6 +171,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 }) {
 
     const context = useFireCMSContext();
+    const { t } = useTranslation();
 
     const [usedEntity, setUsedEntity] = useState<Entity<M> | undefined>(entity);
 
@@ -228,6 +230,10 @@ export function EntityEditViewInner<M extends Record<string, any>>({
     const includeJsonView = collection.includeJsonView === undefined ? true : collection.includeJsonView;
     const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView;
 
+    const groupedViews = useMemo(() => {
+        return (collection.viewGroups ?? []).flatMap(g => g.views);
+    }, [collection.viewGroups]);
+
     const {
         resolvedEntityViews,
         selectedEntityView,
@@ -312,7 +318,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         role="tabpanel">
         <ErrorBoundary>
             <EntityJsonPreview
-                values={formContext?.values ?? entity?.values ?? {}}/>
+                values={formContext?.values ?? entity?.values ?? {}} />
         </ErrorBoundary>
     </div>;
 
@@ -328,7 +334,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 key={`subcol_${subcollectionId}`}
                 role="tabpanel">
 
-                {globalLoading && <CircularProgressCenter/>}
+                {globalLoading && <CircularProgressCenter />}
 
                 {!globalLoading &&
                     (usedEntity && newFullPath
@@ -339,11 +345,10 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                             isSubCollection={true}
                             updateUrl={false}
                             {...subcollection}
-                            openEntityMode={layout}/>
+                            openEntityMode={layout} />
                         : <div className="flex items-center justify-center w-full h-full p-3">
                             <Typography variant={"label"}>
-                                You need to save your entity before
-                                adding additional collections
+                                {t("youd_need_to_save_before_additional_collections")}
                             </Typography>
                         </div>)
                 }
@@ -375,8 +380,8 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 className={"px-8 h-full overflow-auto"}
                 entity={entity}
                 path={path}
-                collection={collection}/>
-            <div className="h-16"/>
+                collection={collection} />
+            <div className="h-16" />
         </div>
     </div> : null;
 
@@ -396,7 +401,6 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         disabled={!canEdit}
         {...formProps}
         onEntityChange={(entity) => {
-            console.log("333 EntityEditView onEntityChange:", entity);
             setUsedEntity(entity);
             formProps?.onEntityChange?.(entity);
         }}
@@ -419,16 +423,18 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         Builder={selectedSecondaryForm?.Builder}
     />;
 
-    const subcollectionTabs = subcollections && subcollections.map((subcollection) =>
+    const subcollectionTabs = subcollections && subcollections
+        .filter(sub => !groupedViews.includes(sub.id ?? sub.path))
+        .map((subcollection) =>
         <Tab
             className="text-sm min-w-[120px]"
-            value={subcollection.id}
+            value={subcollection.id ?? subcollection.path}
             key={`entity_detail_collection_tab_${subcollection.name}`}>
             {subcollection.name}
         </Tab>
     );
 
-    const customViewTabsStart = resolvedEntityViews.filter(view => view.position === "start")
+    const customViewTabsStart = resolvedEntityViews.filter(view => view.position === "start" && !groupedViews.includes(view.key))
         .map((view) =>
             <Tab
                 className={!view.tabComponent ? "text-sm min-w-[120px]" : undefined}
@@ -437,7 +443,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 {view.tabComponent ?? view.name}
             </Tab>
         );
-    const customViewTabsEnd = resolvedEntityViews.filter(view => !view.position || view.position === "end")
+    const customViewTabsEnd = resolvedEntityViews.filter(view => (!view.position || view.position === "end") && !groupedViews.includes(view.key))
         .map((view) =>
             <Tab
                 className={!view.tabComponent ? "text-sm min-w-[120px]" : undefined}
@@ -447,12 +453,49 @@ export function EntityEditViewInner<M extends Record<string, any>>({
             </Tab>
         );
 
+    const viewGroupMenus = collection.viewGroups?.map(group => {
+        const isActive = group.views.includes(selectedTab);
+        return (
+            <Menu
+                key={`view_group_${group.name}`}
+                trigger={
+                    <button
+                        type="button"
+                        className={cls(
+                            "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-white transition-all",
+                            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400 focus-visible:ring-offset-2",
+                            "disabled:pointer-events-none disabled:opacity-50",
+                            isActive ? "bg-white text-surface-900 dark:bg-surface-950 dark:text-surface-50" : "text-surface-600 dark:text-surface-400 hover:bg-surface-200 dark:hover:bg-surface-800"
+                        )}
+                    >
+                        {group.name}
+                        <ExpandMoreIcon className="ml-1 -mr-1" size="small" />
+                    </button>
+                }>
+                {group.views.map(viewId => {
+                    const subcollection = subcollections.find(s => (s.id ?? s.path) === viewId);
+                    const customView = resolvedEntityViews.find(v => v.key === viewId);
+                    const name = subcollection?.name ?? customView?.name ?? viewId;
+                    return (
+                        <MenuItem 
+                            key={`view_group_${group.name}_${viewId}`} 
+                            onClick={() => onSideTabClick(viewId)}
+                            className={selectedTab === viewId ? "bg-surface-accent-100 dark:bg-surface-accent-900" : ""}
+                        >
+                            {name}
+                        </MenuItem>
+                    );
+                })}
+            </Menu>
+        );
+    });
+
     const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
 
     let result = <div className="relative flex flex-col h-full w-full bg-white dark:bg-surface-900">
 
         {shouldShowTopBar && <div
-            className={cls("h-14 items-center flex overflow-visible overflow-x-scroll w-full no-scrollbar h-14 border-b pl-2 pr-2 pt-1 flex bg-surface-50 dark:bg-surface-900", defaultBorderMixin)}>
+            className={cls("h-14 items-center overflow-hidden w-full border-b pl-2 pr-2 flex gap-2 bg-surface-50 dark:bg-surface-900", defaultBorderMixin)}>
 
             {barActions?.({
                 path: fullIdPath ?? path,
@@ -461,16 +504,15 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                 status
             })}
 
-            <div className={"flex-grow"}/>
+            <div className={"flex-grow"} />
 
             {pluginActionsTop}
 
             {globalLoading && <div className="self-center">
-                <CircularProgress size={"small"}/>
+                <CircularProgress size={"small"} />
             </div>}
 
             {hasAdditionalViews && <Tabs
-                className={"self-end"}
                 value={selectedTab}
                 onValueChange={(value) => {
                     onSideTabClick(value);
@@ -480,7 +522,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                     disabled={!hasAdditionalViews}
                     value={JSON_TAB_VALUE}
                     className={"text-sm"}>
-                    <CodeIcon size={"small"}/>
+                    <CodeIcon size={"small"} />
                 </Tab>}
 
                 {customViewTabsStart}
@@ -495,13 +537,15 @@ export function EntityEditViewInner<M extends Record<string, any>>({
 
                 {customViewTabsEnd}
 
+                {viewGroupMenus}
+
                 {subcollectionTabs}
             </Tabs>}
         </div>}
 
         {globalLoading
             ? <div className="w-full pt-12 pb-16 px-4 sm:px-8 md:px-10">
-                <CircularProgressCenter/>
+                <CircularProgressCenter />
             </div>
             : <>
                 {entityReadOnlyView}

package/src/core/EntityEditViewFormActions.tsx

@@ -28,7 +28,8 @@ import {
     useCustomizationController,
     useFireCMSContext,
     useSideEntityController,
-    useSnackbarController
+    useSnackbarController,
+    useTranslation
 } from "../hooks";
 import { EntityFormActionsProps } from "../form/EntityFormActions";
 import { SideDialogController, useSideDialogContext } from "./SideDialogs";
@@ -56,6 +57,7 @@ export function EntityEditViewFormActions({
     const sideEntityController = useSideEntityController();
     const sideDialogContext = useSideDialogContext();
     const customizationController = useCustomizationController();
+    const { t } = useTranslation();
 
     const entityActions = useMemo((): EntityAction[] => {
         const customEntityActions = (collection.entityActions ?? [])
@@ -90,7 +92,8 @@ export function EntityEditViewFormActions({
             openEntityMode,
             navigateBack,
             formContext,
-            formex
+            formex,
+            t
         })
         : buildSideActions({
             savingError,
@@ -106,7 +109,8 @@ export function EntityEditViewFormActions({
             openEntityMode,
             navigateBack,
             formContext,
-            formex
+            formex,
+            t
         });
 }
 
@@ -123,8 +127,9 @@ type ActionsViewProps<M extends object> = {
     pluginActions?: React.ReactNode[],
     openEntityMode: "side_panel" | "full_screen";
     navigateBack: () => void;
-    formContext: FormContext,
+    formContext: FormContext;
     formex: FormexController<any>;
+    t: any;
 };
 
 function buildBottomActions<M extends object>({
@@ -141,7 +146,8 @@ function buildBottomActions<M extends object>({
                                                   openEntityMode,
                                                   navigateBack,
                                                   formContext,
-                                                  formex
+                                                  formex,
+                                                  t
                                               }: ActionsViewProps<M>) {
 
     const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
@@ -191,7 +197,7 @@ function buildBottomActions<M extends object>({
                 color="primary"
                 disabled={disabled || formex.isSubmitting}
                 type="reset">
-            {status === "existing" ? "Discard" : "Clear"}
+            {status === "existing" ? t("discard") : t("clear")}
         </Button>
         <Button variant={canClose ? "text" : "filled"}
                 color="primary"
@@ -200,9 +206,9 @@ function buildBottomActions<M extends object>({
                 onClick={() => {
                     sideDialogContext.setPendingClose(false);
                 }}>
-            {status === "existing" && "Save"}
-            {status === "copy" && "Create copy"}
-            {status === "new" && "Create"}
+            {status === "existing" && t("save")}
+            {status === "copy" && t("create_copy")}
+            {status === "new" && t("create")}
         </Button>
         {canClose && <LoadingButton variant="filled"
                                     color="primary"
@@ -212,9 +218,9 @@ function buildBottomActions<M extends object>({
                                     onClick={() => {
                                         sideDialogContext.setPendingClose?.(true);
                                     }}>
-            {status === "existing" && "Save and close"}
-            {status === "copy" && "Create copy and close"}
-            {status === "new" && "Create and close"}
+            {status === "existing" && t("save_and_close")}
+            {status === "copy" && t("create_copy_and_close")}
+            {status === "new" && t("create_and_close")}
         </LoadingButton>}
     </DialogActions>;
 }
@@ -233,7 +239,8 @@ function buildSideActions<M extends object>({
                                                 openEntityMode,
                                                 navigateBack,
                                                 formContext,
-                                                formex
+                                                formex,
+                                                t
                                             }: ActionsViewProps<M>) {
 
     const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
@@ -249,13 +256,13 @@ function buildSideActions<M extends object>({
                        onClick={() => {
                            sideDialogContext.setPendingClose?.(false);
                        }}>
-            {status === "existing" && "Save"}
-            {status === "copy" && "Create copy"}
-            {status === "new" && "Create"}
+            {status === "existing" && t("save")}
+            {status === "copy" && t("create_copy")}
+            {status === "new" && t("create")}
         </LoadingButton>
 
         <Button fullWidth={true} variant="text" disabled={disabled || formex.isSubmitting} type="reset">
-            {status === "existing" ? "Discard" : "Clear"}
+            {status === "existing" ? t("discard") : t("clear")}
         </Button>
 
         {pluginActions}