@rebasepro/admin 0.12.0 → 0.12.1-canary.g06f263c

package/src/components/DefaultAppBar.tsx

@@ -1,7 +1,7 @@
 
 import React from "react";
 
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router";
 import { RebaseLogo, LanguageToggle } from "@rebasepro/app";
 import { ErrorBoundary, iconSize } from "@rebasepro/ui";
 import {

package/src/components/DefaultDrawer.tsx

@@ -6,7 +6,7 @@ import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
 import { useNavigationStateController } from "../hooks/navigation/contexts/NavigationStateContext";
 
 
-import { Link, useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router";
 import { AnalyticsEvent } from "@rebasepro/admin-types";
 import {
     Avatar,

package/src/components/DetailViewBinding.tsx

@@ -41,7 +41,7 @@ import {
 } from "@rebasepro/app";
 import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
 import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { getValueInPath } from "@rebasepro/utils";
 import { getEntityTitlePropertyKeyForEntity, isUserSelectProperty, resolveTitleToString } from "../util/previews";
 import { getUserLabel, useResolvedUser } from "../hooks/useResolvedUsers";

package/src/components/DrawerNavigationItem.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { NavLink } from "react-router-dom";
+import { NavLink } from "react-router";
 import { cls, Tooltip } from "@rebasepro/ui";
 
 export function DrawerNavigationItem({

package/src/components/EditViewBinding.tsx

@@ -48,7 +48,7 @@ const EntityHistoryView = lazy(() => import("../components/history").then(m => (
 import { createFormexStub, getEntityFromCache } from "@rebasepro/app";
 import { usePermissions } from "@rebasepro/app";
 import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 import { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE } from "../util/view_constants";
 export { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE };

package/src/components/HomePage/FavouritesView.tsx

@@ -1,5 +1,5 @@
 import type { NavigationEntry } from "@rebasepro/admin-types";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 ;
 import { Chip, Collapse, StarIcon } from "@rebasepro/ui";
 import { useUserConfigurationPersistence } from "@rebasepro/app";

package/src/components/HomePage/NavigationCardBinding.tsx

@@ -1,6 +1,6 @@
 
 import type { NavigationEntry, AdminCollection } from "@rebasepro/admin-types";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 ;
 import { IconButton, StarIcon, Tooltip } from "@rebasepro/ui";
 import { NavigationCard } from "./NavigationCard";

package/src/components/HomePage/SmallNavigationCard.tsx

@@ -1,6 +1,6 @@
 import { cardClickableMixin, cardMixin, cls, Typography } from "@rebasepro/ui";
 
-import { Link } from "react-router-dom";
+import { Link } from "react-router";
 
 export type SmallNavigationCardProps = {
     name: string,

package/src/components/RebaseLayout.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Outlet } from "react-router-dom";
+import { Outlet } from "react-router";
 import {
     useAdminModeController,
     useComponentOverride,

package/src/components/RebaseNavigation.tsx

@@ -38,6 +38,7 @@ import { SidePanelProvider } from "./SidePanelProvider";
 // Collection editor internals — used when collectionEditor is enabled
 import { useLocalCollectionsConfigController } from "../collection_editor/useLocalCollectionsConfigController";
 import { ConfigControllerProvider } from "../collection_editor/ConfigControllerProvider";
+import { useCollectionsConfigController } from "../collection_editor/useCollectionsConfigController";
 
 // Lazy-load the schema view — only fetched when studio schema tool is active
 const CollectionsStudioView = lazy(() =>
@@ -168,12 +169,19 @@ export function RebaseNavigation({ children }: RebaseNavigationProps) {
         }
     }, [dataSources]);
 
+    // `readOnly` is left undefined unless the developer set it: the controller
+    // asks the backend whether its schema editor will accept a write, which is
+    // the only process that knows. Deciding it here from `process.env.NODE_ENV`
+    // — the *frontend bundle's* build mode — is what made the editor offer
+    // itself against production backends, `baas` projects and servers without
+    // `ts-morph`, and turned every save into a bare 404.
     const internalConfigController = useLocalCollectionsConfigController(
         rebaseClient,
         resolvedCollections,
         collectionEditorEnabled ? {
-            readOnly: collectionEditorOptions?.readOnly ?? process.env.NODE_ENV === "production",
-            getAuthToken: collectionEditorOptions?.getAuthToken ?? authController?.getAuthToken
+            readOnly: collectionEditorOptions?.readOnly,
+            getAuthToken: collectionEditorOptions?.getAuthToken ?? authController?.getAuthToken,
+            authKey: authController?.user?.uid ?? null
         } : { readOnly: true }
     );
 
@@ -189,13 +197,22 @@ export function RebaseNavigation({ children }: RebaseNavigationProps) {
             group: "Database",
             icon: "LayoutList",
             nestedRoutes: true,
+            // Reads the controller from context at render time rather than
+            // capturing it here. A view is a React *element*, and the
+            // navigation state controller resolves the view list once and holds
+            // on to the elements it resolved — so a controller passed as a prop
+            // is frozen at whatever it was on the first render, forever. That
+            // hid every later change: the editor stayed writable after the
+            // backend said it was read-only, and the collection list never
+            // refreshed. Everything else in the editor already reads this from
+            // `ConfigControllerProvider`, which wraps this subtree.
             view: (
                 <Suspense fallback={<CircularProgressCenter/>}>
-                    <CollectionsStudioView configController={internalConfigController}/>
+                    <CollectionsStudioViewFromContext/>
                 </Suspense>
             )
         };
-    }, [collectionEditorEnabled, registry.studioConfig, internalConfigController]);
+    }, [collectionEditorEnabled, registry.studioConfig]);
 
     const devViews = useMemo(() => {
         const base = registry.studioConfig?.devViews ?? [];
@@ -275,6 +292,7 @@ export function RebaseNavigation({ children }: RebaseNavigationProps) {
                                 collectionRegistryController={collectionRegistryController}
                                 urlController={urlController}
                                 navigationStateController={navigationStateController}
+                                canWriteToCodebase={!internalConfigController.readOnly}
                             />
                             {children}
                         </SidePanelProvider>
@@ -301,6 +319,17 @@ export function RebaseNavigation({ children }: RebaseNavigationProps) {
     return navigationContent;
 }
 
+/**
+ * The injected "Edit collections" view, bound to the live config controller.
+ *
+ * Exists so the element stored in the navigation state does not close over a
+ * controller instance — see the comment at its construction site.
+ */
+function CollectionsStudioViewFromContext() {
+    const configController = useCollectionsConfigController();
+    return <CollectionsStudioView configController={configController}/>;
+}
+
 /**
  * Internal component that auto-registers admin controllers into the
  * self-assembling Studio bridge. Must be rendered inside both the
@@ -309,14 +338,25 @@ export function RebaseNavigation({ children }: RebaseNavigationProps) {
 function BridgeAutoRegistrar({
     collectionRegistryController,
     urlController,
-    navigationStateController
+    navigationStateController,
+    canWriteToCodebase
 }: {
     collectionRegistryController: CollectionRegistryController;
     urlController: UrlController;
     navigationStateController: NavigationStateController;
+    canWriteToCodebase: boolean;
 }) {
     useBridgeRegistration("collectionRegistry", collectionRegistryController);
     useBridgeRegistration("urlController", urlController);
     useBridgeRegistration("navigationState", navigationStateController);
+
+    // Studio tools that would write into the project's collection source — the
+    // RLS editor's policy save for a mapped table, its "Import to codebase" —
+    // ask the bridge whether that write can land. The default is `true`, which
+    // is what an admin panel sitting next to its own `collectionsDir` assumes;
+    // it is wrong for exactly the same backends that make the collection editor
+    // read-only, so the two now answer from one source.
+    const capabilities = useMemo(() => ({ codebase: canWriteToCodebase }), [canWriteToCodebase]);
+    useBridgeRegistration("capabilities", capabilities);
     return null;
 }

package/src/components/RebaseRouteDefs.tsx

@@ -1,5 +1,5 @@
 import React, { lazy, Suspense, useMemo } from "react";
-import { Route } from "react-router-dom";
+import { Route } from "react-router";
 import {
     useRebaseRegistry,
     RebaseRoutes,

package/src/components/SidePanelBinding.tsx

@@ -8,7 +8,7 @@ import { IconButton, Maximize2Icon, XIcon } from "@rebasepro/ui";
 import { EditViewBinding } from "./EditViewBinding";
 import { DetailViewBinding } from "./DetailViewBinding";
 import { useSideDialogContext } from "./SideDialogs";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { saveEntityToMemoryCache, useComponentOverride } from "@rebasepro/app";
 import { useCollectionRegistryController } from "../hooks/navigation/contexts/CollectionRegistryContext";
 import { useSidePanel } from "../hooks/useSidePanel";

package/src/components/UserSelector.tsx

@@ -21,7 +21,7 @@ import * as React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { User } from "@rebasepro/types";
-import { useRebaseClient, useAuthController, UserDisplay } from "@rebasepro/app";
+import { apiBaseOf, useRebaseClient, useAuthController, UserDisplay } from "@rebasepro/app";
 import { EmptyValue } from "../preview";
 
 interface UserSelectorItem {
@@ -37,7 +37,7 @@ const DEFAULT_PAGE_SIZE = 10;
  * Local hook to fetch users from the collection REST API with search and pagination.
  */
 function useUserSelector({ pageSize = DEFAULT_PAGE_SIZE }: { pageSize?: number } = {}) {
-    const client = useRebaseClient<{ baseUrl?: string }>();
+    const client = useRebaseClient<{ baseUrl?: string, apiPath?: string }>();
     const { getAuthToken } = useAuthController();
 
     const [items, setItems] = useState<UserSelectorItem[]>([]);
@@ -48,7 +48,8 @@ function useUserSelector({ pageSize = DEFAULT_PAGE_SIZE }: { pageSize?: number }
     const userCacheRef = useRef<Map<string, User>>(new Map());
 
     const fetchUsers = useCallback(async (searchStr: string, offset: number, append: boolean) => {
-        if (!client?.baseUrl) return;
+        const apiBase = apiBaseOf(client);
+        if (!apiBase) return;
         setIsLoading(true);
         try {
             const token = await getAuthToken?.();
@@ -57,7 +58,7 @@ function useUserSelector({ pageSize = DEFAULT_PAGE_SIZE }: { pageSize?: number }
                 offset: String(offset)
             });
             if (searchStr) params.set("search", searchStr);
-            const response = await fetch(`${client.baseUrl}/api/users?${params}`, {
+            const response = await fetch(`${apiBase}/users?${params}`, {
                 headers: token ? { Authorization: `Bearer ${token}` } : {}
             });
             if (!response.ok) throw new Error("Failed to fetch users");
@@ -86,7 +87,7 @@ user };
         } finally {
             setIsLoading(false);
         }
-    }, [client?.baseUrl, getAuthToken, pageSize]);
+    }, [client?.baseUrl, client?.apiPath, getAuthToken, pageSize]);
 
     useEffect(() => {
         offsetRef.current = 0;

package/src/components/common/default_entity_actions.tsx

@@ -21,6 +21,7 @@ import {
 import type { User } from "@rebasepro/types";
 import type { EntityAction, UserCreationResult } from "@rebasepro/admin-types";
 import {
+    apiBaseOf,
     useAuthController,
     useRebaseClient,
     useSnackbarController,
@@ -246,7 +247,7 @@ export function ResetPasswordActionDialog({
     open: boolean;
     onClose: () => void;
 }) {
-    const client = useRebaseClient<{ baseUrl?: string }>();
+    const client = useRebaseClient<{ baseUrl?: string, apiPath?: string }>();
     const { getAuthToken } = useAuthController();
     const snackbarController = useSnackbarController();
     const { t } = useTranslation();
@@ -270,9 +271,9 @@ export function ResetPasswordActionDialog({
         setLoading(true);
         setError(null);
         try {
-            const baseUrl = client?.baseUrl || "";
+            const apiBase = apiBaseOf(client) ?? "";
             const token = await getAuthToken?.();
-            const response = await fetch(`${baseUrl}/api/admin/users/${user.uid}/reset-password`, {
+            const response = await fetch(`${apiBase}/admin/users/${user.uid}/reset-password`, {
                 method: "POST",
                 headers: {
                     "Content-Type": "application/json",

package/src/components/history/LastEditedByIndicator.tsx

@@ -1,7 +1,7 @@
 
 import React, { useEffect, useState, useCallback } from "react";
 ;
-import { useApiConfig } from "@rebasepro/app";
+import { useApiBase, useApiConfig } from "@rebasepro/app";
 import { useAuthController } from "@rebasepro/app";
 import { HistoryEntryData } from "../../hooks";
 import type { AdminCollection } from "@rebasepro/admin-types";
@@ -35,6 +35,7 @@ export function LastEditedByIndicator({
     collection: AdminCollection;
 }) {
     const apiConfig = useApiConfig();
+    const apiBase = useApiBase();
     const authController = useAuthController();
     const [latestEntry, setLatestEntry] = useState<HistoryEntryData | undefined>();
 
@@ -46,7 +47,7 @@ export function LastEditedByIndicator({
             const headers: Record<string, string> = {};
             if (token) headers["Authorization"] = `Bearer ${token}`;
 
-            const url = `${apiConfig.apiUrl}/api/data/${collection.slug}/${entityId}/history?limit=1&offset=0`;
+            const url = `${apiBase}/data/${collection.slug}/${entityId}/history?limit=1&offset=0`;
             const response = await fetch(url, { headers });
 
             if (response.ok) {
@@ -59,7 +60,7 @@ export function LastEditedByIndicator({
             // Silently fail — this is a non-critical UI indicator
             console.debug("Failed to fetch latest history entry:", error);
         }
-    }, [apiConfig, entityId, collection.slug]);
+    }, [apiConfig, apiBase, entityId, collection.slug]);
 
     useEffect(() => {
         fetchLatest();

package/src/hooks/navigation/useBuildUrlController.tsx

@@ -2,7 +2,7 @@ import type { UrlController, NavigateOptions } from "@rebasepro/admin-types";
 import { useCallback, useMemo } from "react";
 import { removeInitialAndTrailingSlashes, resolveCollectionPathIds } from "@rebasepro/app";
 import { CollectionRegistryController } from "@rebasepro/types";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 
 export function useBuildUrlController(props: {
     basePath: string,

package/src/hooks/useBuildSideDialogsController.tsx

@@ -1,9 +1,9 @@
 import type { SideDialogPanelProps, SideDialogsController } from "../hooks/useSideDialogsController";
 import { useCallback, useEffect, useRef, useState, useMemo } from "react";
-import { useLocation, useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router";
 ;
 import { deepEqual as equal } from "fast-equals"
-import { Location } from "react-router-dom";
+import { Location } from "react-router";
 
 interface SideDialogLocationState {
     base_location?: Location;

package/src/hooks/useBuildSidePanel.tsx

@@ -4,7 +4,7 @@ import type { CustomizationController, SidePanelBindingProps, SideDialogPanelPro
 import { useCallback, useEffect, useRef, useMemo } from "react";
 import { CollectionRegistryController } from "@rebasepro/types";
 import { AuthController } from "@rebasepro/admin-types";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import { NavigationViewInternal } from "@rebasepro/app";
 import { getNavigationEntriesFromPath, removeInitialAndTrailingSlashes, removeTrailingSlash, resolveDefaultSelectedView } from "@rebasepro/app";
 import { resolvedSelectedEntityView } from "../util/resolutions";

package/src/hooks/useHistory.ts

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState, useMemo } from "react";
-import { useApiConfig } from "@rebasepro/app";
+import { useApiBase, useApiConfig } from "@rebasepro/app";
 import type { EntityHistoryEntry } from "@rebasepro/types";
 
 /**
@@ -31,6 +31,7 @@ export function useHistory(params: {
 }): UseEntityHistoryResult {
     const { slug, entityId, enabled = true, pageSize = 10 } = params;
     const apiConfig = useApiConfig();
+    const apiBase = useApiBase();
 
     const [entries, setEntries] = useState<HistoryEntryData[]>([]);
     const [total, setTotal] = useState(0);
@@ -59,7 +60,7 @@ export function useHistory(params: {
             };
             if (token) headers["Authorization"] = `Bearer ${token}`;
 
-            const url = `${apiConfig.apiUrl}/api/data/${slug}/${entityId}/history?limit=${pageSize}&offset=${currentOffset}`;
+            const url = `${apiBase}/data/${slug}/${entityId}/history?limit=${pageSize}&offset=${currentOffset}`;
             const response = await fetch(url, { headers,
 signal });
 
@@ -90,7 +91,7 @@ signal });
         } finally {
             setIsLoading(false);
         }
-    }, [apiConfig, slug, entityId, enabled, pageSize]);
+    }, [apiConfig, apiBase, slug, entityId, enabled, pageSize]);
 
     // Single unified effect: reset state when entity changes, fetch when offset changes.
     // Uses AbortController to cancel stale requests on entity change or unmount.
@@ -136,7 +137,7 @@ signal });
         };
         if (token) headers["Authorization"] = `Bearer ${token}`;
 
-        const url = `${apiConfig.apiUrl}/api/data/${slug}/${entityId}/history/${historyId}/revert`;
+        const url = `${apiBase}/data/${slug}/${entityId}/history/${historyId}/revert`;
         const response = await fetch(url, { method: "POST",
 headers });
 
@@ -154,7 +155,7 @@ headers });
 
         // Return the reverted entity data so callers can update the form
         return result.data as Record<string, unknown>;
-    }, [apiConfig, slug, entityId]);
+    }, [apiConfig, apiBase, slug, entityId]);
 
     return useMemo(() => ({
         entries,

package/src/hooks/useResolvedUsers.ts

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import type { User } from "@rebasepro/types";
-import { useAuthController, useRebaseClient } from "@rebasepro/app";
+import { apiBaseOf, useAuthController, useRebaseClient } from "@rebasepro/app";
 
 /**
  * Resolves the auth users behind `userSelect` values.
@@ -31,12 +31,12 @@ queue: new Set() };
     return cache;
 }
 
-async function fetchUsers(baseUrl: string, ids: string[], token: string | undefined): Promise<Map<string, User | null>> {
+async function fetchUsers(apiBase: string, ids: string[], token: string | undefined): Promise<Map<string, User | null>> {
     const resolved = new Map<string, User | null>();
     for (const id of ids) resolved.set(id, null);
 
     const params = new URLSearchParams({ ids: ids.join(",") });
-    const response = await fetch(`${baseUrl}/api/users?${params}`, {
+    const response = await fetch(`${apiBase}/users?${params}`, {
         headers: token ? { Authorization: `Bearer ${token}` } : {}
     });
     if (!response.ok) {
@@ -103,9 +103,12 @@ function requestUser(
  * when it cannot be resolved.
  */
 export function useResolvedUser(uid: string | undefined): User | null {
-    const client = useRebaseClient<{ baseUrl?: string }>();
+    const client = useRebaseClient<{ baseUrl?: string, apiPath?: string }>();
     const { getAuthToken } = useAuthController();
-    const baseUrl = client?.baseUrl;
+    /* The API prefix, not the bare origin: it keys the cache and is what a
+       request is built from, and a backend with a non-default `basePath`
+       serves neither at `/api`. */
+    const baseUrl = apiBaseOf(client);
 
     const [user, setUser] = useState<User | null>(() =>
         (baseUrl && uid) ? getCache(baseUrl).users.get(uid) ?? null : null);

package/src/routes/RebaseRoute.tsx

@@ -1,10 +1,10 @@
 
 import type { ViewMode, AdminCollection } from "@rebasepro/admin-types";
-import { useLocation } from "react-router-dom";
+import { useLocation } from "react-router";
 import { EditViewBinding } from "../components/EditViewBinding";
 import { DetailViewBinding } from "../components/DetailViewBinding";
 import { useCallback, useEffect, useRef, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate } from "react-router";
 import { CollectionViewBinding } from "../components/CollectionViewBinding/CollectionViewBinding";
 import { NotFoundPage, useUserConfigurationPersistence, useComponentOverride, useNavigationBlocker } from "@rebasepro/app";
 import { resolveOpenEntityMode, resolveViewMode } from "../util/view_mode";