@rebasepro/admin 0.1.2 → 0.2.3

package/src/hooks/navigation/useResolvedViews.tsx

@@ -36,6 +36,7 @@ export type UseResolvedViewsProps<USER extends User> = {
     adminMode?: "content" | "studio" | "settings";
     effectiveRoleController?: EffectiveRoleController;
     userManagement?: UserManagementDelegate<USER>;
+    collections?: EntityCollection[];
 };
 
 export type UseResolvedViewsResult = {
@@ -66,7 +67,8 @@ export function useResolvedViews<USER extends User>(
         plugins,
         adminMode = "content",
         effectiveRoleController,
-        userManagement
+        userManagement,
+        collections
     } = props;
 
     const [loading, setLoading] = useState(true);
@@ -124,24 +126,31 @@ export function useResolvedViews<USER extends User>(
 
     const injectedAdminViews: AppView[] = useMemo(() => {
         const views: AppView[] = [];
-        if (userManagement && usersViewElement) {
-            views.push({
-                slug: "users",
-                name: "Users",
-                icon: "Headset",
-                view: usersViewElement
-            });
-            if (userManagement.roles && rolesViewElement) {
+        const isUserAdmin = userManagement?.isAdmin !== false;
+        if (userManagement && isUserAdmin && usersViewElement) {
+            const hasUsersCollection = collections?.some(c => c.slug === "users");
+            if (!hasUsersCollection) {
+                views.push({
+                    slug: "users",
+                    name: "Users",
+                    icon: "Headset",
+                    view: usersViewElement,
+                    group: "Settings"
+                });
+            }
+            const hasRolesCollection = collections?.some(c => c.slug === "roles");
+            if (userManagement.roles && rolesViewElement && !hasRolesCollection) {
                 views.push({
                     slug: "roles",
                     name: "Roles",
                     icon: "Shield",
-                    view: rolesViewElement
+                    view: rolesViewElement,
+                    group: "Settings"
                 });
             }
         }
         return views;
-    }, [userManagement, usersViewElement, rolesViewElement]);
+    }, [userManagement, usersViewElement, rolesViewElement, collections]);
 
     // Store injectedAdminViews in a ref for effect access
     const injectedAdminViewsRef = useRef(injectedAdminViews);
@@ -162,9 +171,14 @@ export function useResolvedViews<USER extends User>(
                     resolveAppViews(adminViewsProp, resolvedAuthControllerRef.current, dataRef.current)
                 ]);
 
-                if (cancelled) return;
-
-                const newAdminViews = [...newAdminViewsProp, ...injectedAdminViewsRef.current];
+                const hasCustomUsers = newAdminViewsProp.some(v => v.slug === "users");
+                const hasCustomRoles = newAdminViewsProp.some(v => v.slug === "roles");
+                const finalInjected = injectedAdminViewsRef.current.filter(v => {
+                    if (v.slug === "users" && hasCustomUsers) return false;
+                    if (v.slug === "roles" && hasCustomRoles) return false;
+                    return true;
+                });
+                const newAdminViews = [...newAdminViewsProp, ...finalInjected];
 
                 // Compare views by slug identity rather than deepEqual.
                 // Views contain React elements (JSX) whose internal properties
@@ -201,7 +215,8 @@ export function useResolvedViews<USER extends User>(
         refreshTrigger,
         adminMode,
         initialLoading,
-        user
+        user,
+        collections
     ]);
 
     return useMemo(() => ({

package/src/hooks/navigation/useTopLevelNavigation.ts

@@ -152,7 +152,7 @@ export function useTopLevelNavigation(
                 if (adminView.hideFromNavigation) return acc;
 
                 const pathKey = adminView.slug;
-                let groupName = NAVIGATION_ADMIN_GROUP_NAME;
+                let groupName = adminView.group?.trim() || NAVIGATION_ADMIN_GROUP_NAME;
 
                 if (finalNavigationGroupMappings) {
                     for (const pluginGroupDef of finalNavigationGroupMappings) {

package/src/index.ts

@@ -37,6 +37,7 @@ export {
     editEntityAction,
     copyEntityAction,
     deleteEntityAction,
+    resetPasswordAction,
     SideEntityProvider,
     Scaffold,
     AppBar,
@@ -93,3 +94,8 @@ export * from "./data_export";
 
 // Collection editor — moved from @rebasepro/studio (CMS-dependent visual schema editor)
 export * from "./collection_editor";
+
+export { RolesFilterSelect } from "./components/admin/RolesFilterSelect";
+export { UserRolesSelectField } from "./components/admin/UserRolesSelectField";
+export { CreationResultDialog } from "./components/admin/CreationResultDialog";
+

package/src/preview/PropertyPreview.tsx

@@ -111,7 +111,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<P extends Pro
                 if (typeof stringProperty.reference.path === "string") {
                     content = <ReferencePreview
                         disabled={!stringProperty.reference.path}
-                        previewProperties={(stringProperty as any).reference?.previewProperties}
+                        previewProperties={stringProperty.reference?.ui?.previewProperties}
                         includeId={stringProperty.reference.includeId}
                         includeEntityLink={stringProperty.reference.includeEntityLink}
                         size={props.size}

package/src/preview/components/ImagePreview.tsx

@@ -1,4 +1,4 @@
-import { CopyIcon, ExternalLinkIcon, ImageOffIcon } from "lucide-react";
+import { CopyIcon, ExternalLinkIcon, ImageOffIcon } from "@rebasepro/ui";
 import React, { CSSProperties, useMemo, useState, useEffect } from "react";import { IconButton, Tooltip } from "@rebasepro/ui";
 import { PreviewSize } from "../../types/components/PropertyPreviewProps";
 import { getThumbnailMeasure } from "../util";

package/src/preview/components/UrlComponentPreview.tsx

@@ -3,8 +3,7 @@ import React, { useMemo } from "react";
 import { ImagePreview } from "./ImagePreview";
 import { PreviewType } from "@rebasepro/types";
 import type { PreviewSize } from "../../types/components/PropertyPreviewProps";
-import { cls, Tooltip, Typography } from "@rebasepro/ui";
-import { ExternalLinkIcon, FileTextIcon } from "lucide-react";
+import { cls, ExternalLinkIcon, FileTextIcon, Tooltip, Typography } from "@rebasepro/ui";
 import { EmptyValue } from "./EmptyValue";
 import { getThumbnailMeasure } from "../util";
 

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -1,4 +1,4 @@
-import type { ArrayProperty, Property } from "@rebasepro/types";
+import type { ArrayProperty, MapProperty, Property } from "@rebasepro/types";
 import React from "react";
 import { ErrorBoundary } from "@rebasepro/ui";
 import type { PropertyPreviewProps } from "../../types/components/PropertyPreviewProps";
@@ -28,7 +28,7 @@ export function ArrayOfMapsPreview({
         throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property ${propertyKey}`);
     }
     const values = value;
-    const previewProperties: string[] | undefined = (mapProperty.ui as any)?.previewProperties;
+    const previewProperties: string[] | undefined = (mapProperty as MapProperty).previewProperties;
 
     if (!values) return null;
 

package/src/preview/property_previews/SkeletonPropertyComponent.tsx

@@ -2,7 +2,7 @@ import type { Properties } from "@rebasepro/types";
 import type { ArrayProperty, MapProperty, Property, StringProperty } from "@rebasepro/types";
 import { PreviewSize } from "../../types/components/PropertyPreviewProps";
 import React from "react";
-import { Skeleton } from "@rebasepro/ui";
+import { Skeleton, Table, TableBody, TableRow, TableCell, Typography } from "@rebasepro/ui";
 import { getThumbnailMeasure } from "../util";
 
 export interface SkeletonPropertyComponentProps {
@@ -79,7 +79,7 @@ function renderMap<T extends Record<string, any>>(property: MapProperty, size: P
     if (size === "large") {
         mapPropertyKeys = Object.keys(property.properties);
     } else {
-        mapPropertyKeys = ((property.ui as any)?.previewProperties || Object.keys(property.properties)) as string[];
+        mapPropertyKeys = (property.previewProperties || Object.keys(property.properties)) as string[];
         if (size === "medium")
             mapPropertyKeys = mapPropertyKeys.slice(0, 3);
         else if (size === "small")
@@ -103,33 +103,32 @@ function renderMap<T extends Record<string, any>>(property: MapProperty, size: P
         );
 
     return (
-        <table className="table-auto">
-            <tbody>
+        <Table className="table-auto">
+            <TableBody>
                 {mapPropertyKeys &&
                     mapPropertyKeys.map((key, index) => {
                         return (
-                            <tr
-                                key={`map_preview_table__${index}`}
-                                className="border-b last:border-b-0">
-                                <th key={`table-cell-title--${key}`}
+                            <TableRow
+                                key={`map_preview_table__${index}`}>
+                                <TableCell key={`table-cell-title--${key}`}
                                     className="align-top"
                                     style={{ width: "30%" }}>
-                                    <p className="text-xs text-secondary">
+                                    <Typography variant="caption" color="secondary">
                                         {property.properties![key].name}
-                                    </p>
-                                </th>
-                                <th key={`table-cell-${key}`}
+                                    </Typography>
+                                </TableCell>
+                                <TableCell key={`table-cell-${key}`}
                                     style={{ width: "70%" }}>
                                     {property.properties && property.properties[key] &&
                                         <SkeletonPropertyComponent
                                             property={property.properties[key]}
                                             size={"medium"}/>}
-                                </th>
-                            </tr>
+                                </TableCell>
+                            </TableRow>
                         );
                     })}
-            </tbody>
-        </table>
+            </TableBody>
+        </Table>
     );
 }
 
@@ -142,28 +141,28 @@ function renderArrayOfMaps(properties: Properties, size: PreviewSize, previewPro
     }
 
     return (
-        <table className="table-auto">
-            <tbody>
+        <Table className="table-auto">
+            <TableBody>
                 {
                     [0, 1, 2].map((value, index) => {
                         return (
-                            <tr key={`table_${value}_${index}`}>
+                            <TableRow key={`table_${value}_${index}`}>
                                 {tableProperties && tableProperties.map(
                                     (key) => (
-                                        <th
+                                        <TableCell
                                             key={`table-cell-${key}`}
                                         >
                                             <SkeletonPropertyComponent
                                                 property={(properties)[key]}
                                                 size={"medium"}/>
-                                        </th>
+                                        </TableCell>
                                     )
                                 )}
-                            </tr>
+                            </TableRow>
                         );
                     })}
-            </tbody>
-        </table>
+            </TableBody>
+        </Table>
     );
 }
 

package/src/routes/RebaseRoute.tsx

@@ -1,6 +1,7 @@
 import type { EntityCollection, ViewMode } from "@rebasepro/types";
-import { Blocker, useBlocker, useLocation } from "react-router";
+import { Blocker, useBlocker, useLocation } from "react-router-dom";
 import { EntityEditView } from "../components/EntityEditView";
+import { EntityDetailView } from "../components/EntityDetailView";
 import { useEffect, useRef, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { EntityCollectionView } from "../components";
@@ -146,7 +147,7 @@ export function RebaseRoute() {
         // Resolve the effective openEntityMode based on the current view mode.
         // Priority: collection.openEntityMode (explicit) > view-mode-based default.
         // View mode priority: URL __view param > saved user config > collection default.
-        let effectiveOpenMode: "side_panel" | "full_screen" | "split" | undefined = collection?.openEntityMode;
+        let effectiveOpenMode: "side_panel" | "full_screen" | "split" | "dialog" | undefined = collection?.openEntityMode;
         if (!effectiveOpenMode && collection) {
             const urlViewParam = new URLSearchParams(location.search).get("__view");
             let currentViewMode: ViewMode = collection.defaultViewMode ?? "list";
@@ -268,7 +269,7 @@ function EntityFullScreenRoute({
         if (entityIdIdx >= 0) {
             const afterEntity = pathname.substring(entityIdIdx + 1 + entityIdStr.length);
             const trailingSegment = afterEntity.startsWith("/") ? afterEntity.substring(1) : afterEntity;
-            if (trailingSegment.length > 0) {
+            if (trailingSegment.length > 0 && trailingSegment !== "edit") {
                 urlTab = trailingSegment;
             }
         }
@@ -290,35 +291,30 @@ function EntityFullScreenRoute({
 
     const entityPath = basePath + `/${entityId}`;
 
-    let blocker: Blocker | undefined = undefined;
-    try {
-        blocker = useBlocker(({
-            currentLocation,
-            nextLocation
-        }) => {
-            if (nextLocation.pathname.startsWith(entityPath))
-                return false;
-
-            // Side panel overlay navigations preserve the underlying form via
-            // base_location in router state — no data is lost in either direction.
-
-            // Opening a side panel (e.g. clicking a relation arrow)
-            const nextHash = nextLocation.hash;
-            if (nextHash === "#side" || nextHash === "#new_side")
-                return false;
-
-            // Closing a side panel (navigate(-1) back to the form's own path)
-            const currentHash = currentLocation.hash;
-            if ((currentHash === "#side" || currentHash === "#new_side") &&
-                (nextLocation.pathname === basePath ||
-                 nextLocation.pathname.startsWith(entityPath)))
-                return false;
-
-            return blocked.current;
-        });
-    } catch (e) {
-        // console.warn("Blocker not available, navigation will not be blocked");
-    }
+    const blocker = useBlocker(({
+        currentLocation,
+        nextLocation
+    }) => {
+        if (nextLocation.pathname.startsWith(entityPath))
+            return false;
+
+        // Side panel overlay navigations preserve the underlying form via
+        // base_location in router state — no data is lost in either direction.
+
+        // Opening a side panel (e.g. clicking a relation arrow)
+        const nextHash = nextLocation.hash;
+        if (nextHash === "#side" || nextHash === "#new_side")
+            return false;
+
+        // Closing a side panel (navigate(-1) back to the form's own path)
+        const currentHash = currentLocation.hash;
+        if ((currentHash === "#side" || currentHash === "#new_side") &&
+            (nextLocation.pathname === basePath ||
+             nextLocation.pathname.startsWith(entityPath)))
+            return false;
+
+        return blocked.current;
+    });
 
     const lastCollectionEntry = [...navigationEntries].reverse().find((entry) => entry.type === "collection");
 
@@ -342,6 +338,38 @@ function EntityFullScreenRoute({
     const collection = collectionRegistry.getCollection(rawCollection.slug) || rawCollection;
     const fullIdPath = isNew ? lastCollectionEntry!.slug : lastEntityEntry!.slug;
     const collectionPath = urlController.resolveDatabasePathsFrom(fullIdPath);
+    const isEditRoute = pathname.endsWith("/edit") || pathname.split("/").pop() === "edit";
+    // Determine if this is a detail-view-first collection showing the view page
+    const isDetailMode = collection.defaultEntityAction === "view" && !isNew && !isCopy && entityId && !isEditRoute;
+
+    if (isDetailMode) {
+        return <>
+            <EntityDetailView
+                key={collection.slug + "_view_" + entityId}
+                entityId={entityId}
+                collection={collection}
+                layout={"full_screen"}
+                path={collectionPath}
+                selectedTab={selectedTab ?? undefined}
+                onEditClick={() => {
+                    const editUrl = urlController.buildUrlCollectionPath(`${collectionPath}/${entityId}`) + "/edit";
+                    navigate(editUrl + hash);
+                }}
+                onTabChange={(params) => {
+                    setSelectedTab(params.selectedTab);
+                    const newSelectedTab = params.selectedTab;
+                    if (newSelectedTab) {
+                        navigate(`${basePath}/${entityId}/${newSelectedTab}${hash}`, { replace: true });
+                    } else {
+                        navigate(`${basePath}/${entityId}${hash}`, { replace: true });
+                    }
+                }}
+                parentCollectionSlugs={parentCollectionSlugs}
+                parentEntityIds={parentEntityIds}
+            />
+        </>;
+    }
+
     return <>
         <EntityEditView
             key={collection.slug + "_" + (isNew ? "new" : (isCopy ? entityId + "_copy" : entityId))}
@@ -353,11 +381,13 @@ function EntityFullScreenRoute({
             selectedTab={selectedTab ?? undefined}
             defaultValues={isNew ? defaultValues : undefined}
             onValuesModified={(modified) => blocked.current = modified}
+            navigateBack={() => {
+                const detailUrl = urlController.buildUrlCollectionPath(`${collectionPath}/${entityId}`);
+                navigate(detailUrl + hash);
+            }}
             onSaved={(params) => {
                 const newSelectedTab = params.selectedTab;
                 const newEntityId = params.entityId;
-                // Clear the hash after saving a new entity — preserving #new
-                // would cause the route to re-parse as "new" and show "not found".
                 const savedHash = isNew ? "" : hash;
                 if (newSelectedTab) {
                     navigate(`${basePath}/${newEntityId}/${newSelectedTab}${savedHash}`, { replace: true });
@@ -385,6 +415,5 @@ function EntityFullScreenRoute({
             handleOk={() => blocker?.proceed?.()}
             handleCancel={() => blocker?.reset?.()}
             body={"You have unsaved changes in this entity."}/>
-
     </>;
 }

package/src/types/components/EntityFormActionsProps.tsx

@@ -13,7 +13,7 @@ export interface EntityFormActionsProps {
     disabled: boolean;
     status: "new" | "existing" | "copy";
     pluginActions: React.ReactNode[];
-    openEntityMode: "side_panel" | "full_screen" | "split";
+    openEntityMode: "side_panel" | "full_screen" | "split" | "dialog";
     showDefaultActions?: boolean;
     navigateBack: () => void;
     formContext: FormContext

package/src/types/components/EntityFormProps.tsx

@@ -22,7 +22,7 @@ export type EntityFormProps<M extends Record<string, unknown>> = {
     onStatusChange?: (status: EntityStatus) => void;
     onEntityChange?: (entity: Entity<M>) => void;
     formex?: FormexController<M>;
-    openEntityMode?: "side_panel" | "full_screen" | "split";
+    openEntityMode?: "side_panel" | "full_screen" | "split" | "dialog";
     /**
      * If true, the form will be disabled and no actions will be available
      */
@@ -39,6 +39,8 @@ export type EntityFormProps<M extends Record<string, unknown>> = {
 
     EntityFormActionsComponent?: React.FC<EntityFormActionsProps>;
 
+    navigateBack?: () => void;
+
     Builder?: React.ComponentType<EntityCustomViewParams<M>>;
 
     children?: React.ReactNode;

package/src/types/fields.tsx

@@ -28,7 +28,8 @@ export type DefaultFieldConfig =
     | "key_value"
     | "repeat"
     | "custom_array"
-    | "block";
+    | "block"
+    | "vector_input";
 
 /**
  * When building a custom field you need to create a React component that takes
@@ -130,7 +131,7 @@ export interface FieldProps<
     /**
      * Additional properties set by the developer
      */
-    customProps: CustomProps
+    customProps?: CustomProps;
 
     /**
      * Additional values related to the state of the form or the entity
@@ -203,7 +204,7 @@ export interface FormContext<M extends Record<string, unknown> = Record<string,
 
     savingError?: Error;
 
-    openEntityMode: "side_panel" | "full_screen" | "split";
+    openEntityMode: "side_panel" | "full_screen" | "split" | "dialog";
 
     /**
      * This is the underlying formex controller that powers the form.

package/src/util/navigation_utils.ts

@@ -30,7 +30,7 @@ export function navigateToEntity({
 }:
 
     {
-        openEntityMode: "side_panel" | "full_screen" | "split";
+        openEntityMode: "side_panel" | "full_screen" | "split" | "dialog";
         collection?: EntityCollection;
         entityId?: string | number;
         selectedTab?: string;
@@ -50,7 +50,8 @@ export function navigateToEntity({
         navigation: UrlController
     }) {
 
-    if (openEntityMode === "side_panel") {
+    if (openEntityMode === "side_panel" || openEntityMode === "dialog") {
+
 
         sideEntityController.open({
             entityId,
@@ -58,7 +59,7 @@ export function navigateToEntity({
             copy,
             selectedTab,
             collection,
-            updateUrl: true,
+            updateUrl: openEntityMode !== "dialog",
             onClose,
             defaultValues
         });

package/src/util/previews.ts

@@ -21,7 +21,7 @@ export function getEntityPreviewKeys(
         return listProperties
             .filter(key => {
                 const prop = targetCollection.properties[key];
-                const isIdProp = prop && typeof prop === "object" && "isId" in prop && Boolean((prop as unknown as { isId?: boolean }).isId);
+                const isIdProp = prop && typeof prop === "object" && "isId" in prop && Boolean((prop as { isId?: boolean }).isId);
                 return !isIdProp;
             })
             .filter(key => {

package/src/util/property_utils.tsx

@@ -1,13 +1,27 @@
 
 import type { Properties } from "@rebasepro/types";
-import type { EntityCollection, MapProperty, Property, PropertyConfig } from "@rebasepro/types";
+import type { EntityCollection, MapProperty, Property, PropertyConfig, StringProperty } from "@rebasepro/types";
 import React from "react";
 
 import { isPropertyBuilder } from "@rebasepro/common";
-import { iconSize } from "@rebasepro/ui";
-import type { IconSize } from "@rebasepro/ui";
-import { CircleIcon, FlagIcon, FunctionSquareIcon, GlobeIcon, TextIcon, Rows3Icon, LinkIcon, VoteIcon, MailIcon, HashIcon, RepeatIcon, CalendarIcon, AlignLeftIcon, UploadIcon } from "lucide-react";
-import type { LucideIcon } from "lucide-react";
+import {
+    AlignLeftIcon,
+    CalendarIcon,
+    CircleIcon,
+    FlagIcon,
+    FunctionSquareIcon,
+    GlobeIcon,
+    HashIcon,
+    iconSize,
+    LinkIcon,
+    MailIcon,
+    RepeatIcon,
+    Rows3Icon,
+    TextIcon,
+    UploadIcon,
+    VoteIcon
+} from "@rebasepro/ui";
+import type { IconSize, LucideIcon } from "@rebasepro/ui";
 
 /**
  * Resolve a size value (string token or number) to a numeric pixel value
@@ -61,7 +75,7 @@ function getDefaultIconForProperty(property: Property): LucideIcon {
             if (property.ui?.url) return GlobeIcon;
             if (property.email) return MailIcon;
             if (property.ui?.multiline || property.ui?.markdown) return AlignLeftIcon;
-            if ((property as any).reference) return LinkIcon;
+            if ((property as StringProperty).reference) return LinkIcon;
             return TextIcon;
         }
         case "number":
@@ -86,6 +100,8 @@ function getDefaultIconForProperty(property: Property): LucideIcon {
             return LinkIcon;
         case "relation":
             return LinkIcon;
+        case "vector":
+            return HashIcon;
         default:
             return CircleIcon;
     }

package/src/util/resolutions.ts

@@ -1,4 +1,4 @@
-import { HistoryIcon } from "lucide-react";
+import { HistoryIcon } from "@rebasepro/ui";
 import React, { lazy } from "react";
 import type { EntityCustomView, EntityCollection } from "@rebasepro/types";
 import type { CustomizationController, EntityAction } from "@rebasepro/types";
@@ -52,7 +52,7 @@ export function resolvedSelectedEntityView<M extends Record<string, unknown>>(
 ) {
     const resolvedEntityViews = customViews
         ? customViews
-              .map((e) => resolveEntityView(e, (customizationController as unknown as { entityViews?: EntityCustomView[] }).entityViews))
+              .map((e) => resolveEntityView(e, (customizationController as { entityViews?: EntityCustomView[] }).entityViews))
               .filter(Boolean)
               .filter((e) => (e as EntityCustomView).key !== "__rebase_history") as EntityCustomView[]
         : [];