@rebasepro/admin 0.0.1-canary.4f204c2

package/src/components/DeleteEntityDialog.tsx

@@ -0,0 +1,182 @@
+import type { EntityCollection } from "@rebasepro/types";
+import { Entity, EntityCallbacks } from "@rebasepro/types";
+import React, { useCallback, useMemo, useState } from "react";
+import { Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle } from "@rebasepro/ui";
+import {
+    deleteEntityWithCallbacks,
+    useAuthController,
+    useCustomizationController,
+    useData,
+    useSnackbarController,
+    useTranslation
+} from "@rebasepro/core";
+import { useCMSContext } from "../hooks";
+import { EntityView } from "./EntityView";
+
+export interface DeleteEntityDialogProps<M extends Record<string, unknown>> {
+    entityOrEntitiesToDelete?: Entity<M> | Entity<M>[],
+    path: string,
+    collection: EntityCollection<M>
+    open: boolean;
+    onClose: () => void;
+    callbacks?: EntityCallbacks<M>,
+
+    onEntityDelete?(path: string, entity: Entity<M>): void;
+
+    onMultipleEntitiesDelete?(path: string, entities: Entity<M>[]): void;
+}
+
+export function DeleteEntityDialog<M extends Record<string, unknown>>({
+    entityOrEntitiesToDelete,
+    collection,
+    onClose,
+    open,
+    callbacks,
+    onEntityDelete,
+    onMultipleEntitiesDelete,
+    path
+}: DeleteEntityDialogProps<M>) {
+    const authController = useAuthController();
+    const dataClient = useData();
+    const customizationController = useCustomizationController();
+    const snackbarController = useSnackbarController();
+    const { t } = useTranslation();
+    const [loading, setLoading] = useState(false);
+
+    const context = useCMSContext();
+    const entityOrEntities = Array.isArray(entityOrEntitiesToDelete) && entityOrEntitiesToDelete.length === 1
+        ? entityOrEntitiesToDelete[0]
+        : entityOrEntitiesToDelete;
+
+    const multipleEntities = Array.isArray(entityOrEntities);
+
+    const handleCancel = useCallback(() => {
+        onClose();
+    }, [onClose]);
+
+    const onDeleteSuccess = useCallback((entity: Entity<any>) => {
+        console.debug("Deleted", entity);
+    }, []);
+
+    const onDeleteFailure = useCallback((entity: Entity<any>, e: Error) => {
+        snackbarController.open({
+            type: "error",
+            title: t("error_deleting"),
+            message: e?.message
+        });
+
+        console.error("Error deleting entity");
+        console.error(e);
+    }, [collection.name]);
+
+    const performDelete = useCallback((entity: Entity<M>): Promise<boolean> =>
+        deleteEntityWithCallbacks({
+            data: dataClient,
+            entity,
+            collection: collection,
+            callbacks,
+            onDeleteSuccess,
+            onDeleteFailure,
+            context
+        }), [dataClient, collection, callbacks, onDeleteSuccess, onDeleteFailure, context]);
+
+    const handleOk = useCallback(async () => {
+        if (entityOrEntities) {
+
+            setLoading(true);
+
+            if (multipleEntities) {
+                Promise.all((entityOrEntities as Entity<M>[]).map(performDelete)).then((results) => {
+
+                    setLoading(false);
+
+                    if (onMultipleEntitiesDelete && entityOrEntities)
+                        onMultipleEntitiesDelete(path, entityOrEntities as Entity<M>[]);
+
+                    if (results.every(Boolean)) {
+                        snackbarController.open({
+                            type: "success",
+                            message: t("multiple_deleted", { collection: collection.name })
+                        });
+                    } else if (results.some(Boolean)) {
+                        snackbarController.open({
+                            type: "warning",
+                            message: t("some_entities_deleted", { collection: collection.name })
+                        });
+                    } else {
+                        snackbarController.open({
+                            type: "error",
+                            message: t("error_deleting_entities", { collection: collection.name })
+                        });
+                    }
+                    onClose();
+                });
+
+            } else {
+                performDelete(entityOrEntities as Entity<M>).then((success) => {
+                    setLoading(false);
+                    if (success) {
+                        if (onEntityDelete && entityOrEntities)
+                            onEntityDelete(path, entityOrEntities as Entity<M>);
+                        snackbarController.open({
+                            type: "success",
+                            message: t("deleted", { name: collection.singularName ?? collection.name })
+                        });
+                        onClose();
+                    }
+                });
+            }
+        }
+    }, [entityOrEntities, multipleEntities, performDelete, onMultipleEntitiesDelete, path, onClose, snackbarController, collection.name, onEntityDelete]);
+
+    let content: React.ReactNode;
+    if (entityOrEntities && multipleEntities) {
+        content = <>{t("multiple_entities")}</>;
+    } else {
+        const entity = entityOrEntities as Entity<M> | undefined;
+        content = entity
+            ? <EntityView
+                entity={entity}
+                collection={collection}
+                path={path}/>
+            : <></>;
+    }
+
+    const dialogTitle = multipleEntities
+        ? <><b>{collection.name}</b>: {t("confirm_multiple_delete")}</>
+        : t("delete_entity_confirm_title", { entityName: collection.singularName ?? collection.name });
+
+    return (
+        <Dialog
+            maxWidth={multipleEntities ? "lg" : "2xl"}
+            aria-labelledby="delete-dialog"
+            open={open}
+            onOpenChange={(open) => !open ? onClose() : undefined}
+        >
+            <DialogTitle id="delete-dialog-title">
+                {dialogTitle}
+            </DialogTitle>
+            <DialogContent fullHeight={true}>
+                {!multipleEntities && <div className={"p-4"}>{content}</div>}
+            </DialogContent>
+            <DialogActions>
+
+                {loading && <CircularProgress size={"smallest"}/>}
+
+                <Button onClick={handleCancel}
+                    disabled={loading}
+                    variant="text">
+                    {t("cancel")}
+                </Button>
+                <Button
+                    autoFocus
+                    disabled={loading}
+                    onClick={handleOk}
+                    variant="filled">
+                    {t("ok")}
+                </Button>
+            </DialogActions>
+
+        </Dialog>
+    );
+}

package/src/components/DrawerNavigationGroup.tsx

@@ -0,0 +1,130 @@
+import type { NavigationEntry } from "@rebasepro/types";
+import React from "react";
+import { cls, iconSize, Typography } from "@rebasepro/ui";
+import { ChevronDownIcon } from "lucide-react";
+;
+import { IconForView } from "@rebasepro/core";
+import { DrawerNavigationItem } from "./DrawerNavigationItem";
+import { useTranslation } from "@rebasepro/core";
+
+export interface DrawerNavigationGroupProps {
+    /**
+     * Group name to display in header
+     */
+    group: string;
+    /**
+     * 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;
+    /**
+     * Hide the group header (title and expandable panel)
+     */
+    hideHeader?: boolean;
+}
+
+/**
+ * Shared drawer navigation group component used by both DefaultDrawer and RebaseCloudDrawer.
+ * Renders a collapsible group with header and navigation items.
+ */
+export function DrawerNavigationGroup({
+    group,
+    entries,
+    collapsed,
+    onToggleCollapsed,
+    drawerOpen,
+    tooltipsOpen,
+    adminMenuOpen,
+    headerActions,
+    onItemClick,
+    hideHeader
+}: DrawerNavigationGroupProps) {
+    const { t } = useTranslation();
+    return (
+        <div
+            className={"my-2 mx-2 flex flex-col"}
+            key={`drawer_group_${group}`}
+        >
+            {/* Group Header */}
+            {!hideHeader && (
+                <div
+                    className={cls("pl-4 pr-2 py-0.5 flex flex-row items-center transition-colors",
+                        drawerOpen ? "cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-800/40 rounded-lg" : "opacity-0 invisible pointer-events-none"
+                    )}
+                    onClick={drawerOpen ? onToggleCollapsed : undefined}
+                >
+                    <ChevronDownIcon
+                        size={iconSize.small}
+                        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 || t("views_group"))}
+                    </Typography>
+                    {headerActions && (
+                        <div onClick={(e) => e.stopPropagation()}>
+                            {headerActions}
+                        </div>
+                    )}
+                </div>
+            )}
+
+            {/* Collapsible Content */}
+            <div
+                className={cls(
+                    "transition-all duration-200 ease-in-out",
+                    (!hideHeader && collapsed) ? "overflow-hidden" : "overflow-visible",
+                    !hideHeader && "dark:bg-transparent",
+                    !hideHeader ? (drawerOpen ? "rounded-lg" : "rounded-lg") : "rounded-lg",
+                    (!hideHeader && 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={"small"}/>}
+                        tooltipsOpen={!collapsed && tooltipsOpen}
+                        adminMenuOpen={adminMenuOpen}
+                        drawerOpen={drawerOpen}
+                        onClick={() => onItemClick?.(entry)}
+                        url={entry.url}
+                        name={entry.name}
+                    />
+                ))}
+            </div>
+        </div>
+    );
+}

package/src/components/DrawerNavigationItem.tsx

@@ -0,0 +1,65 @@
+import React from "react";
+
+import { NavLink } from "react-router-dom";
+import { cls, Tooltip } from "@rebasepro/ui";
+
+export function DrawerNavigationItem({
+    name,
+    icon,
+    drawerOpen,
+    adminMenuOpen,
+    tooltipsOpen,
+    url,
+    onClick
+}: {
+    icon: React.ReactElement,
+    name: string,
+    tooltipsOpen: boolean,
+    drawerOpen: boolean,
+    adminMenuOpen?: boolean,
+    url: string,
+    onClick?: () => void,
+}) {
+
+    const iconWrap = <div
+        className={"shrink-0 flex items-center justify-center w-[56px] h-[40px] text-text-secondary dark:text-text-secondary-dark"}>
+        {icon}
+    </div>;
+
+    const listItem = <div>
+        <NavLink
+            onClick={onClick}
+            style={{
+                width: "100%",
+                transition: drawerOpen ? "width 150ms ease-in" : undefined
+            }}
+            className={({ isActive }: any) => cls("rounded-lg truncate",
+                "hover:bg-surface-100 dark:hover:bg-surface-800/60 text-text-primary dark:text-surface-300 hover:text-surface-900 dark:hover:text-white",
+                "flex flex-row items-center",
+                drawerOpen ? "pr-4 h-10" : "h-10",
+                "font-semibold text-xs",
+                isActive ? "bg-surface-100 dark:bg-surface-800/50 text-surface-900 dark:text-white" : ""
+            )}
+            to={url}
+        >
+
+            {iconWrap}
+
+            <div
+                className={cls(
+                    "text-text-primary dark:text-surface-200",
+                    drawerOpen ? "opacity-100" : "opacity-0 hidden",
+                    "font-inherit truncate space-x-2"
+                )}>
+                {name}
+            </div>
+        </NavLink>
+    </div>;
+
+    return <Tooltip
+        open={drawerOpen || adminMenuOpen ? false : tooltipsOpen}
+        side="right"
+        title={name}>
+        {listItem}
+    </Tooltip>;
+}

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -0,0 +1,233 @@
+import type { EntityCollection } from "@rebasepro/types";
+import type { EntityAction } from "@rebasepro/types";
+import React, { MouseEvent, useCallback } from "react";
+
+import { CollectionSize, Entity, SelectionController } from "@rebasepro/types";
+import { Badge, Checkbox, cls, IconButton, Menu, MenuItem, Skeleton, Tooltip } from "@rebasepro/ui";
+import { MoreVerticalIcon } from "lucide-react";
+import { useRebaseContext, useLargeLayout, useTranslation } from "@rebasepro/core";
+import { getEntityFromCache } from "@rebasepro/core";
+import { getLocalChangesBackup } from "@rebasepro/common";
+import { useSideEntityController, useCMSContext } from "../../index";
+
+/**
+ *
+ * @param entity
+ * @param width
+ * @param frozen
+ * @param isSelected
+ * @param selectionEnabled
+ * @param size
+ * @param toggleEntitySelection
+ * @param hideId
+ *
+ * @group Collection components
+ */
+export const EntityCollectionRowActions = function EntityCollectionRowActions({
+    entity,
+    collection,
+    path,
+    width,
+    frozen,
+    isSelected,
+    selectionEnabled,
+    size,
+    highlightEntity,
+    onCollectionChange,
+    unhighlightEntity,
+    actions = [],
+    hideId,
+    selectionController,
+    openEntityMode,
+    sortableNodeRef,
+    sortableStyle,
+    sortableAttributes,
+    isDragging,
+    isDraggable
+}:
+    {
+        entity: Entity<any>,
+        collection?: EntityCollection<any>,
+        path?: string,
+        width: number,
+        frozen?: boolean,
+        size: CollectionSize,
+        isSelected?: boolean,
+        selectionEnabled?: boolean,
+        actions?: EntityAction[],
+        hideId?: boolean,
+        onCollectionChange?: () => void,
+        selectionController?: SelectionController;
+        highlightEntity?: (entity: Entity<any>) => void;
+        unhighlightEntity?: (entity: Entity<any>) => void;
+        openEntityMode: "side_panel" | "full_screen" | "split";
+        // Sortable props for dnd-kit integration
+        sortableNodeRef?: (node: HTMLElement | null) => void;
+        sortableStyle?: React.CSSProperties;
+        sortableAttributes?: Record<string, any>;
+        isDragging?: boolean;
+        isDraggable?: boolean;
+    }) {
+
+    const largeLayout = useLargeLayout();
+
+    const context = useCMSContext();
+    const sideEntityCtrl = context.sideEntityController;
+    const { t } = useTranslation();
+
+    const onCheckedChange = useCallback((checked: boolean) => {
+        selectionController?.toggleEntitySelection(entity, checked);
+    }, [entity, selectionController?.toggleEntitySelection]);
+
+    const hasActions = actions.length > 0;
+    const hasCollapsedActions = actions.some(a => a.collapsed || a.collapsed === undefined);
+
+    const collapsedActions = actions.filter(a => a.collapsed || a.collapsed === undefined);
+    const uncollapsedActions = actions.filter(a => a.collapsed === false);
+    const enableLocalChangesBackup = collection ? getLocalChangesBackup(collection) : false;
+    const hasDraft = enableLocalChangesBackup ? getEntityFromCache(path + "/" + entity.id) : false;
+    const iconSize = "small" as const;
+
+    const content = (
+        <div
+            className={cls(
+                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-800 bg-opacity-90 bg-surface-50/90 dark:bg-opacity-90 dark:bg-surface-800/90 z-10",
+                "h-full flex items-center justify-center flex-col bg-surface-50/90 dark:bg-surface-800/90 z-10",
+                frozen ? "sticky left-0" : ""
+            )}
+            onClick={useCallback((event: React.MouseEvent) => {
+                event.stopPropagation();
+            }, [])}
+            style={{
+                width,
+                position: frozen ? "sticky" : "initial",
+                left: frozen ? 0 : "initial",
+                contain: "strict"
+            }}>
+
+            {(hasActions || selectionEnabled) &&
+                <div className="flex items-center justify-center gap-0.5">
+
+                    {uncollapsedActions.map((action, index) => {
+                        const isEditAction = action.key === "edit";
+                        const tooltip = isEditAction && hasDraft ? t("unsaved_local_changes") : action.name;
+
+                        let iconButton = <IconButton
+                            onClick={(event: MouseEvent) => {
+                                event.stopPropagation();
+                                action.onClick({
+                                    view: "collection",
+                                    entity,
+                                    path,
+                                    collection,
+                                    context,
+                                    sideEntityController: sideEntityCtrl,
+                                    selectionController,
+                                    highlightEntity,
+                                    unhighlightEntity,
+                                    onCollectionChange,
+                                    openEntityMode: openEntityMode ?? collection?.openEntityMode
+                                });
+                            }}
+                            size={iconSize}>
+                            {action.icon}
+                        </IconButton>;
+                        if (isEditAction && hasDraft) {
+                            iconButton = (
+                                <Badge color={"warning"}>
+                                    {iconButton}
+                                </Badge>
+                            );
+                        }
+                        return (
+                            <Tooltip key={index}
+                                title={tooltip}
+                                asChild={true}>
+                                {iconButton}
+                            </Tooltip>
+                        );
+                    })}
+
+                    {hasCollapsedActions &&
+                        <Menu
+                            trigger={<IconButton
+                                size={iconSize}>
+                                <MoreVerticalIcon/>
+                            </IconButton>}>
+                            {collapsedActions.map((action, index) => (
+                                <MenuItem
+                                    key={index}
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                        action.onClick({
+                                            view: "collection",
+                                            entity,
+                                            path,
+                                            collection,
+                                            context,
+                                            sideEntityController: sideEntityCtrl,
+                                            selectionController,
+                                            highlightEntity,
+                                            unhighlightEntity,
+                                            onCollectionChange,
+                                            openEntityMode: openEntityMode ?? collection?.openEntityMode
+                                        });
+                                    }}>
+                                    {action.icon}
+                                    {action.name}
+                                </MenuItem>
+                            ))}
+                        </Menu>
+                    }
+
+                    {selectionEnabled &&
+                        <Tooltip title={`Select ${entity.id}`}>
+                            <Checkbox
+                                size={"smallest"}
+                                checked={Boolean(isSelected)}
+                                onCheckedChange={onCheckedChange}
+                            />
+                        </Tooltip>}
+
+                </div>}
+
+            {!hideId && size !== "xs" && (
+                <div
+                    className="w-[138px] overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2 align-center justify-center flex items-center gap-1"
+                    onClick={(event) => {
+                        event.stopPropagation();
+                    }}>
+                    <span className="min-w-0 truncate text-center">
+                        {entity
+                            ? entity.id
+                            : <Skeleton/>
+                        }
+                    </span>
+                </div>
+            )}
+
+        </div>
+    );
+
+    // Wrap with sortable outer div when sortable props are provided
+    // Remove tabIndex from attributes to avoid capturing focus before cell content
+    if (sortableNodeRef) {
+        const { tabIndex: _tabIndex, ...sortableAttrsWithoutTabIndex } = sortableAttributes ?? {};
+        return (
+            <div
+                ref={sortableNodeRef}
+                style={sortableStyle}
+                className={cls(
+                    "flex-shrink-0",
+                    frozen && "sticky left-0 z-10 bg-white dark:bg-surface-800"
+                )}
+                {...sortableAttrsWithoutTabIndex}
+            >
+                {content}
+            </div>
+        );
+    }
+
+    return content;
+
+};