@rebasepro/admin 0.9.0 → 0.9.1-canary.0de22e0

package/README.md

@@ -12,7 +12,7 @@ pnpm add @rebasepro/admin
 
 ## What This Package Does
 
-`@rebasepro/admin` is the complete CMS layer of Rebase. It provides the admin panel UI — collection table/card views, snapshot editing forms, side-panel navigation, the visual collection (schema) editor, data import/export (CSV, JSON, Excel), and the app shell with auth gating, routing, and drawer layout. It sits on top of `@rebasepro/core` (runtime hooks/providers) and `@rebasepro/ui` (design system components).
+`@rebasepro/admin` is the complete CMS layer of Rebase. It provides the admin panel UI — collection table/card views, snapshot editing forms, side-panel navigation, the visual collection (schema) editor, data import/export (CSV, JSON, Excel), and the app shell with auth gating, routing, and drawer layout. It sits on top of `@rebasepro/app` (runtime hooks/providers) and `@rebasepro/ui` (design system components).
 
 ## Key Exports
 
@@ -20,7 +20,7 @@ pnpm add @rebasepro/admin
 
 | Export | Description |
 |---|---|
-| `RebaseCMS` | Top-level CMS component — wires routing, auth, and layout together |
+| `RebaseAdmin` | Top-level CMS component — wires routing, auth, and layout together |
 | `RebaseShell` | Outer shell (providers + chrome) without opinionated routing |
 | `RebaseAuthGate` | Auth-gated wrapper — shows login or the CMS based on session state |
 | `RebaseNavigation` | Renders the sidebar navigation from resolved collections/views |
@@ -116,11 +116,11 @@ import { RichTextEditor } from "@rebasepro/admin/editor";
 ## Quick Start
 
 ```tsx
-import { RebaseCMS } from "@rebasepro/admin";
+import { RebaseAdmin } from "@rebasepro/admin";
 
 function App() {
     return (
-        <RebaseCMS
+        <RebaseAdmin
             collections={[/* your collection configs */]}
             authController={authController}
             dataSource={dataSource}
@@ -131,9 +131,9 @@ function App() {
 
 ## Related Packages
 
-- [`@rebasepro/core`](../core) — Runtime hooks, providers, auth components, and context
+- [`@rebasepro/app`](../app) — Runtime hooks, providers, auth components, and context
 - [`@rebasepro/ui`](../ui) — Design system components (buttons, dialogs, inputs, etc.)
 - [`@rebasepro/common`](../common) — Shared utilities, collection registry, query builder
 - [`@rebasepro/types`](../types) — TypeScript type definitions
-- [`@rebasepro/formex`](../formex) — Form state management
-- [`@rebasepro/schema-inference`](../schema-inference) — Schema introspection from databases
+- [`@rebasepro/forms`](../forms) — Form state management
+- [`@rebasepro/inference`](../inference) — Schema introspection from databases

package/dist/{CollectionEditorDialog-B-7uW3iJ.js → CollectionEditorDialog-D7odTn0N.js}

@@ -1,18 +1,18 @@
 import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
-import { At as useImportConfig, Bn as useUrlController, Bt as getFieldId, Ct as useCollectionEditorController, Et as convertDataToEntity, Ft as PropertyConfigBadge, Hn as useNavigationStateController, Mt as ImportFileUpload, Qn as CollectionTableBinding, Tt as DataNewPropertiesMapping, Wn as useCollectionRegistryController, Xn as useSelectionController, dn as SearchIconsView, fn as FieldCaption, h as toSerializableCollectionConfig, i as namespaceToPropertiesOrderPath, jt as ImportSaveInProgress, kt as getInferenceType, n as getFullIdPath, r as idToPropertiesPath, s as CollectionGenerationApiError, t as getFullId, u as validateCollectionJson, v as useCollectionsConfigController, wt as ImportNewPropertyFieldPreview, zt as getFieldConfig } from "./src-sUZfe29F.js";
-import { a as updatePropertyFromWidget, c as useAIModifiedPaths, i as supportedFields, l as useSafeSnackbarController, n as PropertyForm, o as PropertyTree, r as PropertyFormDialog, s as AIModifiedPathsProvider } from "./PropertyEditView-7KMTcrqi.js";
+import { Dt as ImportSaveInProgress, Et as useImportConfig, Mt as PropertyConfigBadge, Nn as useCollectionRegistryController, Nt as SearchIconsView, O as getFieldConfig, Ot as ImportFileUpload, Pt as FieldCaption, Qt as CollectionTableBinding, St as convertDataToEntity, Tt as getInferenceType, Xt as useSelectionController, _t as useCollectionEditorController, an as useNavigationStateController, bt as ImportNewPropertyFieldPreview, g as useCollectionsConfigController, i as namespaceToPropertiesOrderPath, k as getFieldId, l as validateCollectionJson, n as getFullIdPath, o as CollectionGenerationApiError, p as toSerializableCollectionConfig, r as idToPropertiesPath, rn as useUrlController, t as getFullId, xt as DataNewPropertiesMapping } from "./util-XFwQ9FEc.js";
+import { a as updatePropertyFromWidget, c as useAIModifiedPaths, i as supportedFields, l as useSafeSnackbarController, n as PropertyForm, o as PropertyTree, r as PropertyFormDialog, s as AIModifiedPathsProvider } from "./PropertyEditView-i51tFOfM.js";
 import * as React$1 from "react";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Alert, AppWindow, ArrowLeftIcon, BooleanSwitchWithLabel, Button, Card, CheckIcon, Chip, CircularProgress, CircularProgressCenter, CodeIcon, ColumnsIcon, Container, CopyIcon, DebouncedTextField, Dialog, DialogActions, DialogContent, DialogTitle, ErrorBoundary, FileIcon, FileSearchIcon, FileTextIcon, IconButton, KanbanIcon, KeyIcon, LayoutGridIcon, ListIcon, LoadingButton, Menu, MultiSelect, MultiSelectItem, PanelLeftIcon, Paper, PlusIcon, Select, SelectItem, ShoppingCartIcon, SquareIcon, Tab, TableIcon, Tabs, TextField, ToggleButtonGroup, Tooltip, Trash2Icon, Typography, UserIcon, XIcon, cls, coolIconKeys, defaultBorderMixin, iconSize } from "@rebasepro/ui";
-import { getSubcollections, getTableName, isPropertyBuilder, removeInitialAndTrailingSlashes } from "@rebasepro/common";
-import { AIIcon, ConfirmationDialog, ErrorView, IconForView, UnsavedChangesDialog, useAuthController, useCustomizationController, useLargeLayout, useRebaseContext, useUnsavedChangesDialog } from "@rebasepro/core";
-import { Field, Formex, clone, getIn, useCreateFormex, useFormex } from "@rebasepro/formex";
-import { z } from "zod";
-import { camelCase, isEmptyObject, mergeDeep, prettifyIdentifier, randomString, removeUndefined, singular, slugify, toSnakeCase, unslugify } from "@rebasepro/utils";
-import { getDataSourceCapabilities } from "@rebasepro/types";
+import { getEffectiveSecurityRules, getSubcollections, getTableName, isPropertyBuilder, removeInitialAndTrailingSlashes } from "@rebasepro/common";
+import { AIIcon, ConfirmationDialog, ErrorView, IconForView, UnsavedChangesDialog, useAuthController, useCustomizationController, useLargeLayout, useRebaseContext, useUnsavedChangesDialog } from "@rebasepro/app";
+import { Field, Formex, clone, getIn, useCreateFormex, useFormex } from "@rebasepro/forms";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { camelCase, getPolicyNamesForRule, getPolicyNamesForRules, isEmptyObject, mergeDeep, prettifyIdentifier, randomString, removeUndefined, singular, slugify, toSnakeCase, unslugify } from "@rebasepro/utils";
+import { getDataSourceCapabilities } from "@rebasepro/types";
+import { z } from "zod";
+import { buildEntityPropertiesFromData, buildPropertyFromData } from "@rebasepro/inference";
 import { Highlight, themes } from "prism-react-renderer";
-import { buildEntityPropertiesFromData, buildPropertyFromData } from "@rebasepro/schema-inference";
 import JSON5 from "json5";
 //#region src/collection_editor/ui/collection_editor/CollectionYupValidation.tsx
 var CollectionEditorSchema = z.object({
@@ -682,7 +682,7 @@ function DisplaySettingsForm({ expandKanban, standalone }) {
 //#region src/collection_editor/ui/collection_editor/GetCodeDialog.tsx
 function GetCodeDialog({ collection, onOpenChange, open }) {
 	const snackbarController = useSafeSnackbarController();
-	const code = collection ? "import { CollectionConfig } from \"@rebasepro/core\";\n\nconst " + (collection?.name ? camelCase(collection.name) : "my") + "Collection:CollectionConfig = " + JSON5.stringify(collectionToCode({ ...collection }), null, "	") : "No collection selected";
+	const code = collection ? "import { CollectionConfig } from \"@rebasepro/app\";\n\nconst " + (collection?.name ? camelCase(collection.name) : "my") + "Collection:CollectionConfig = " + JSON5.stringify(collectionToCode({ ...collection }), null, "	") : "No collection selected";
 	return /* @__PURE__ */ jsxs(Dialog, {
 		open,
 		onOpenChange,
@@ -2381,7 +2381,61 @@ function CollectionRLSTab() {
 		values.table,
 		values.alias
 	]);
-	const unmappedPolicies = dbPolicies.filter((dp) => !rules.some((r) => r.name === dp.policyname));
+	/**
+	* Application roles available to `SecurityRule.roles`.
+	*
+	* Deliberately NOT `fetchAvailableRoles` — that returns native pg_roles
+	* (postgres, rebase_user, …), which can never satisfy an application-role
+	* condition.
+	*/
+	const [availableRoles, setAvailableRoles] = useState([]);
+	const [rolesUnavailable, setRolesUnavailable] = useState(false);
+	useEffect(() => {
+		let mounted = true;
+		const fetchRoles = async () => {
+			if (!databaseAdmin?.fetchApplicationRoles) {
+				if (mounted) setRolesUnavailable(true);
+				return;
+			}
+			try {
+				const fetched = await databaseAdmin.fetchApplicationRoles();
+				if (mounted) {
+					setAvailableRoles(fetched);
+					setRolesUnavailable(false);
+				}
+			} catch (e) {
+				console.error("Failed to fetch application roles", e);
+				if (mounted) setRolesUnavailable(true);
+			}
+		};
+		fetchRoles();
+		return () => {
+			mounted = false;
+		};
+	}, [databaseAdmin]);
+	const tableName = values.id || values.table || values.alias;
+	/**
+	* Every policy name `rebase db push` would write for this collection.
+	*
+	* Two things make this more than `rules.map(r => r.name)`:
+	*  - a rule without an explicit `name` becomes `<table>_<op>_<hash>`, so
+	*    comparing `rule.name` to `policyname` never matches for it;
+	*  - the generator also injects the safe-by-default baseline
+	*    (`<table>_default_admin_*`), which is in no collection's `securityRules`.
+	*
+	* Missing either made Rebase's own policies look hand-written, and offered to
+	* import them back into the codebase that produced them.
+	*/
+	const generatedPolicyNames = useMemo(() => {
+		if (!tableName) return /* @__PURE__ */ new Set();
+		const effectiveRules = getEffectiveSecurityRules(values);
+		return getPolicyNamesForRules([...rules, ...effectiveRules], tableName);
+	}, [
+		rules,
+		tableName,
+		values
+	]);
+	const unmappedPolicies = dbPolicies.filter((dp) => !generatedPolicyNames.has(dp.policyname));
 	const handleSave = async (newPolicy) => {
 		const rule = {
 			name: newPolicy.policyname ?? "",
@@ -2437,7 +2491,7 @@ function CollectionRLSTab() {
 									}), /* @__PURE__ */ jsx(Typography, {
 										variant: "subtitle2",
 										className: "truncate",
-										children: rule.name
+										children: rule.name || (tableName ? getPolicyNamesForRule(rule, tableName).join(", ") : "Unnamed policy")
 									})]
 								}), /* @__PURE__ */ jsxs("div", {
 									className: "flex gap-2 text-xs pl-6 overflow-x-auto hide-scrollbar",
@@ -2461,7 +2515,7 @@ function CollectionRLSTab() {
 										tablename: values.id || values.table || values.alias || "your_table",
 										permissive: (rule.mode || "permissive").toUpperCase(),
 										cmd: (rule.operation || "ALL").toUpperCase(),
-										roles: rule.roles || ["public"],
+										roles: rule.roles || [],
 										qual: rule.using || null,
 										with_check: rule.withCheck || null
 									}),
@@ -2566,6 +2620,8 @@ function CollectionRLSTab() {
 				children: editingPolicy && /* @__PURE__ */ jsx(InlinePolicyEditor, {
 					policy: editingPolicy === "new" ? void 0 : editingPolicy,
 					table: values.id || values.table || values.alias || "your_table",
+					availableRoles,
+					rolesUnavailable,
 					onSave: handleSave,
 					onCancel: () => setEditingPolicy(null)
 				})
@@ -2580,20 +2636,31 @@ var COMMAND_OPTIONS = [
 	"UPDATE",
 	"DELETE"
 ];
-var ROLE_OPTIONS = [
-	"public",
-	"authenticated",
-	"anon",
-	"admin"
-];
-function InlinePolicyEditor({ policy, table, onSave, onCancel }) {
+function InlinePolicyEditor({ policy, table, availableRoles, rolesUnavailable, onSave, onCancel }) {
 	const [name, setName] = useState(policy?.policyname || "");
 	const [behavior, setBehavior] = useState(policy?.permissive || "PERMISSIVE");
 	const [command, setCommand] = useState(policy?.cmd || "ALL");
-	const [roles, setRoles] = useState(policy?.roles ? Array.isArray(policy.roles) ? policy.roles : [policy.roles] : ["public"]);
+	const [roles, setRoles] = useState(policy?.roles ? Array.isArray(policy.roles) ? policy.roles : [policy.roles] : []);
+	const [customRole, setCustomRole] = useState("");
 	const [usingExpr, setUsingExpr] = useState(policy?.qual || "");
 	const [checkExpr, setCheckExpr] = useState(policy?.with_check || "");
 	const showCheck = command === "ALL" || command === "INSERT" || command === "UPDATE";
+	/**
+	* Roles offered in the dropdown: those in use in the project, plus any the
+	* rule already carries. The union matters — application roles are derived
+	* from what users hold, so a role that is referenced here but assigned to
+	* nobody would otherwise vanish from its own policy on the next save.
+	*/
+	const roleOptions = useMemo(() => Array.from(new Set([...availableRoles, ...roles])).sort(), [availableRoles, roles]);
+	const addCustomRole = () => {
+		const trimmed = customRole.trim();
+		if (!trimmed || roles.includes(trimmed)) {
+			setCustomRole("");
+			return;
+		}
+		setRoles([...roles, trimmed]);
+		setCustomRole("");
+	};
 	return /* @__PURE__ */ jsxs(Fragment, { children: [
 		/* @__PURE__ */ jsxs(DialogTitle, {
 			variant: "h6",
@@ -2663,20 +2730,67 @@ function InlinePolicyEditor({ policy, table, onSave, onCancel }) {
 					}),
 					/* @__PURE__ */ jsxs("div", {
 						className: "flex flex-col gap-1.5",
-						children: [/* @__PURE__ */ jsx(Typography, {
-							variant: "caption",
-							className: "uppercase tracking-wider text-text-secondary",
-							children: "Target Roles"
-						}), /* @__PURE__ */ jsx(MultiSelect, {
-							size: "small",
-							value: roles,
-							onValueChange: setRoles,
-							placeholder: "Select roles",
-							children: ROLE_OPTIONS.map((r) => /* @__PURE__ */ jsx(MultiSelectItem, {
-								value: r,
-								children: r
-							}, r))
-						})]
+						children: [
+							/* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "uppercase tracking-wider text-text-secondary",
+								children: "Application Roles"
+							}),
+							/* @__PURE__ */ jsxs(Typography, {
+								variant: "caption",
+								className: "text-text-secondary opacity-80 -mt-1",
+								children: [
+									"Roles held by users of this project, matched via ",
+									/* @__PURE__ */ jsx("span", {
+										className: "font-mono",
+										children: "auth.roles()"
+									}),
+									". These are not PostgreSQL roles — leave empty to apply the policy to everyone."
+								]
+							}),
+							roleOptions.length > 0 && /* @__PURE__ */ jsx(MultiSelect, {
+								size: "small",
+								value: roles,
+								onValueChange: setRoles,
+								placeholder: "Select roles",
+								children: roleOptions.map((r) => /* @__PURE__ */ jsx(MultiSelectItem, {
+									value: r,
+									children: r
+								}, r))
+							}),
+							rolesUnavailable && roleOptions.length === 0 && /* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "text-text-secondary opacity-80",
+								children: "Could not load the project's roles — enter them manually below."
+							}),
+							!rolesUnavailable && roleOptions.length === 0 && /* @__PURE__ */ jsx(Typography, {
+								variant: "caption",
+								className: "text-text-secondary opacity-80",
+								children: "No roles are assigned to any user yet — enter one manually below."
+							}),
+							/* @__PURE__ */ jsxs("div", {
+								className: "flex gap-2 items-center",
+								children: [/* @__PURE__ */ jsx(TextField, {
+									size: "small",
+									value: customRole,
+									onChange: (e) => setCustomRole(e.target.value),
+									onKeyDown: (e) => {
+										if (e.key === "Enter") {
+											e.preventDefault();
+											addCustomRole();
+										}
+									},
+									placeholder: "Add a role not listed, e.g. editor"
+								}), /* @__PURE__ */ jsx(Button, {
+									size: "small",
+									variant: "outlined",
+									color: "neutral",
+									disabled: !customRole.trim(),
+									onClick: addCustomRole,
+									children: "Add"
+								})]
+							})
+						]
 					}),
 					command !== "INSERT" && /* @__PURE__ */ jsxs("div", {
 						className: "flex flex-col gap-1.5",
@@ -3627,4 +3741,4 @@ var validateId = (value, isNewCollection, existingPaths, existingIds) => {
 //#endregion
 export { CollectionEditorDialog as n, CollectionEditorDialog_exports as r, CollectionEditor as t };
 
-//# sourceMappingURL=CollectionEditorDialog-B-7uW3iJ.js.map
+//# sourceMappingURL=CollectionEditorDialog-D7odTn0N.js.map