@rebasepro/studio 0.17.3 → 0.18.1

package/src/components/RLSEditor/index.ts

@@ -1 +0,0 @@
-export * from "./RLSEditor";

package/src/components/RLSEditor/policy-presets.ts

@@ -1,176 +0,0 @@
-/**
- * What the RLS editor offers before the user types anything: the roles a `TO`
- * list may name, and the ready-made policies.
- *
- * Separated from the component because these are the parts that have to agree
- * with the *server*, not with the UI — and the ways they can silently disagree
- * are the reason this file has tests.
- */
-import { policy as policyExpr } from "@rebasepro/types";
-import { policyToPostgres, REBASE_USER_ROLE } from "@rebasepro/common";
-
-export type PolicyCommand = "ALL" | "SELECT" | "INSERT" | "UPDATE" | "DELETE";
-
-export const COMMAND_OPTIONS: PolicyCommand[] = ["ALL", "SELECT", "INSERT", "UPDATE", "DELETE"];
-
-/**
- * The roles a policy's `TO` list can name when nothing better is known.
- *
- * Not `authenticated` / `anon` / `admin`, which is what this list used to be.
- * The first two are Supabase's role names and Rebase never creates them, so
- * `CREATE POLICY ... TO authenticated` — which is literally what the editor
- * builds and executes — fails with `role "authenticated" does not exist`. The
- * driver's `validatePolicyPgRoles` rejects the same three names in
- * `SecurityRule.pgRoles` and says why: they are another platform's convention,
- * and application roles belong in a condition, not in the `TO` list.
- *
- * `admin` was the more dangerous entry, because it is a plausible *application*
- * role. Had one existed as a database role too, the policy would have been
- * created successfully and then matched nothing at all: requests run as
- * {@link REBASE_USER_ROLE} after a `SET LOCAL ROLE`, and a `TO` list naming a
- * role the request never assumes filters every row without erroring.
- *
- * So: `public` (what the framework's own generator emits) and the role requests
- * actually arrive as. "Signed-in users" and "admins" are not roles here — they
- * are conditions over `rebase.uid()` and `rebase.roles()`, which is what the
- * presets below now compile to.
- */
-export const FALLBACK_ROLE_OPTIONS = ["public", REBASE_USER_ROLE];
-
-/**
- * The `TO` list the editor offers, given what the database reported and what
- * the policy being edited already targets.
- *
- * Three sources, and each is there for a reason the others do not cover:
- *
- *  - {@link FALLBACK_ROLE_OPTIONS} always, because `public` is a **keyword, not
- *    a row in `pg_roles`** — `fetchAvailableRoles` cannot return it, so seeding
- *    from the live fetch alone would drop the one role every generated policy
- *    targets.
- *  - the live roles, so an operator's own `app_read` is reachable without
- *    hand-editing SQL.
- *  - the edited policy's own roles, because a `MultiSelect` silently drops a
- *    value with no matching item. That value is the `TO` list of a policy
- *    already enforcing something, so opening an unrelated policy for a one-word
- *    rename would have quietly rewritten who it applies to.
- */
-export function roleOptionsFor(
-    fetched: readonly string[] | undefined,
-    policyRoles: readonly string[] | undefined
-): string[] {
-    return [...new Set([...FALLBACK_ROLE_OPTIONS, ...(fetched ?? []), ...(policyRoles ?? [])])];
-}
-
-/**
- * Preset conditions, compiled by the framework's own policy compiler rather
- * than written out here.
- *
- * `policyToPostgres` is the function `db push` generates policies with, so a
- * preset cannot drift from what the framework emits — and the one that matters
- * has drifted before: `authenticated()` used to compile to a bare
- * `IS NOT NULL`, which is true for anonymous visitors, and any copy of that
- * string sitting in a preset would still be handing out the old grant today.
- */
-export const SIGNED_IN_SQL = policyToPostgres(policyExpr.authenticated());
-export const IS_ADMIN_SQL = policyToPostgres(policyExpr.rolesOverlap(["admin"]));
-export const OWNS_ROW_SQL = policyToPostgres(
-    policyExpr.compare(policyExpr.authUid(), "eq", policyExpr.field("uid"))
-);
-
-export interface PolicyPreset {
-    id: string;
-    label: string;
-    description: string;
-    policyname: string;
-    cmd: PolicyCommand;
-    permissive: "PERMISSIVE" | "RESTRICTIVE";
-    roles: string[];
-    qual: string;
-    with_check: string;
-}
-
-/**
- * Every preset targets `TO public`, which is what the framework's generator
- * emits and what actually reaches a request running as `rebase_user`. The part
- * that used to be expressed as a role — "authenticated", "admin" — is a
- * condition now, so it is enforced where Postgres will actually evaluate it.
- */
-export const POLICY_PRESETS: PolicyPreset[] = [
-    {
-        id: "public_read",
-        label: "Enable read access to everyone",
-        description: "Anyone can read data, regardless of authentication status.",
-        policyname: "Enable read access for all users",
-        cmd: "SELECT",
-        permissive: "PERMISSIVE",
-        roles: ["public"],
-        qual: "true",
-        with_check: ""
-    },
-    {
-        id: "auth_read",
-        label: "Enable read access for signed-in users only",
-        description: "Only signed-in users are allowed to read data. Anonymous requests carry a sentinel uid, so the condition excludes them explicitly.",
-        policyname: "Enable read access for signed-in users",
-        cmd: "SELECT",
-        permissive: "PERMISSIVE",
-        roles: ["public"],
-        qual: SIGNED_IN_SQL,
-        with_check: ""
-    },
-    {
-        id: "auth_insert",
-        label: "Enable insert for signed-in users only",
-        description: "Only signed-in users are allowed to insert new data.",
-        policyname: "Enable insert for signed-in users only",
-        cmd: "INSERT",
-        permissive: "PERMISSIVE",
-        roles: ["public"],
-        qual: "",
-        with_check: SIGNED_IN_SQL
-    },
-    {
-        id: "admin_all",
-        label: "Admins can do anything",
-        description: "Restricted to users holding the `admin` application role, matched inside the policy via rebase.roles().",
-        policyname: "Admins have full access",
-        cmd: "ALL",
-        permissive: "PERMISSIVE",
-        roles: ["public"],
-        qual: IS_ADMIN_SQL,
-        with_check: IS_ADMIN_SQL
-    },
-    {
-        id: "user_select_own",
-        label: "Users can read their own rows",
-        description: "Users can only read rows whose uid column matches their rebase.uid()",
-        policyname: "Users can select their own data",
-        cmd: "SELECT",
-        permissive: "PERMISSIVE",
-        roles: ["public"],
-        qual: OWNS_ROW_SQL,
-        with_check: ""
-    },
-    {
-        id: "user_update_own",
-        label: "Users can update their own rows",
-        description: "Users can only update rows whose uid column matches their rebase.uid()",
-        policyname: "Users can update their own data",
-        cmd: "UPDATE",
-        permissive: "PERMISSIVE",
-        roles: ["public"],
-        qual: OWNS_ROW_SQL,
-        with_check: OWNS_ROW_SQL
-    },
-    {
-        id: "user_delete_own",
-        label: "Users can delete their own rows",
-        description: "Users can only delete rows whose uid column matches their rebase.uid()",
-        policyname: "Users can delete their own data",
-        cmd: "DELETE",
-        permissive: "PERMISSIVE",
-        roles: ["public"],
-        qual: OWNS_ROW_SQL,
-        with_check: ""
-    }
-];

package/src/components/RLSEditor/saveSecurityRules.ts

@@ -1,48 +0,0 @@
-/**
- * Write a collection's security rules to its source file.
- *
- * The schema-editor routes sit behind an admin gate that accepts a bearer token
- * and nothing else — there is no cookie fallback — so a request without an
- * `Authorization` header is a 401 every time. The RLS editor's two write paths
- * ("Create policy" on a mapped table, and "Import to codebase") both sent none,
- * and both reported the failure as a constant "Failed to save policy", which is
- * also what a 501 and a parse error looked like.
- *
- * It lives in its own module rather than inline in the component so that the
- * header can be asserted without rendering the whole RLS editor.
- */
-export async function saveSecurityRulesToCodebase(options: {
-    apiBase: string;
-    collectionId: string;
-    securityRules: unknown[];
-    getAuthToken?: () => Promise<string | null | undefined>;
-}): Promise<void> {
-    const { apiBase, collectionId, securityRules, getAuthToken } = options;
-
-    const headers: Record<string, string> = { "Content-Type": "application/json" };
-    const token = getAuthToken ? await getAuthToken() : null;
-    if (token) headers["Authorization"] = `Bearer ${token}`;
-
-    const response = await fetch(`${apiBase}/schema-editor/collection/save`, {
-        method: "POST",
-        headers,
-        // Only the rules change here. `partial` says so: read as a
-        // whole-collection save, a payload of one key deletes everything it does
-        // not mention.
-        body: JSON.stringify({ collectionId,
-collectionData: { securityRules },
-partial: true })
-    });
-
-    if (response.ok) return;
-
-    const body = await response.text().catch(() => "");
-    let message: string | undefined;
-    try {
-        const parsed = JSON.parse(body) as { error?: { message?: string }, message?: string };
-        message = parsed.error?.message ?? parsed.message;
-    } catch {
-        message = body.trim() || undefined;
-    }
-    throw new Error(message ?? `Failed to save policy (HTTP ${response.status}).`);
-}

package/src/components/RebaseStudio.tsx

@@ -1,174 +0,0 @@
-import React, { Suspense, useLayoutEffect, useMemo } from "react";
-import { useRebaseRegistryDispatch } from "@rebasepro/app";
-import type { RebaseStudioConfig, AppView } from "@rebasepro/cms-types";
-import { CircularProgressCenter, lazyChunk } from "@rebasepro/ui";
-
-// Lazy-loaded studio tools — each fetched only when its route is visited.
-// This keeps Monaco, @xyflow/react, dagre, pgsql-ast-parser etc. out of the initial bundle.
-const SQLEditor = lazyChunk(() => import("./SQLEditor/SQLEditor").then(m => ({ default: m.SQLEditor })));
-const JSEditor = lazyChunk(() => import("./JSEditor/JSEditor").then(m => ({ default: m.JSEditor })));
-const RLSEditor = lazyChunk(() => import("./RLSEditor/RLSEditor").then(m => ({ default: m.RLSEditor })));
-const StorageView = lazyChunk(() => import("./StorageView/StorageView").then(m => ({ default: m.StorageView })));
-const CronJobsView = lazyChunk(() => import("./CronJobs/CronJobsView").then(m => ({ default: m.CronJobsView })));
-const SchemaVisualizer = lazyChunk(() => import("./SchemaVisualizer/SchemaVisualizer").then(m => ({ default: m.SchemaVisualizer })));
-const BranchesView = lazyChunk(() => import("./Branches/BranchesView").then(m => ({ default: m.BranchesView })));
-const BackupsView = lazyChunk(() => import("./Backups/BackupsView").then(m => ({ default: m.BackupsView })));
-const ApiExplorer = lazyChunk(() => import("./ApiExplorer/ApiExplorer").then(m => ({ default: m.ApiExplorer })));
-const LogsExplorer = lazyChunk(() => import("./LogsExplorer/LogsExplorer").then(m => ({ default: m.LogsExplorer })));
-const ApiKeysView = lazyChunk(() => import("./ApiKeys/ApiKeysView").then(m => ({ default: m.ApiKeysView })));
-
-import { StudioHomePage } from "./StudioHomePage";
-
-/**
- * Declarative component to configure the Studio in Rebase.
- * Renders nothing — purely registers config into the RebaseRegistry.
- *
- * The "schema" tool (collection editor view) is a Studio tool, but it is not
- * registered here: it ships from the panel package because it needs the project's
- * collection source to write back to. When `<RebaseCMS collectionEditor={...}>`
- * is used, the schema view is automatically injected into Studio — no manual
- * wiring needed. Where it is mounted from is an implementation detail; it is a
- * schema-editing tool and belongs beside SQL and RLS.
- */
-const DEFAULT_HOME_PAGE = <StudioHomePage/>;
-
-export function RebaseStudio({ tools, homePage }: RebaseStudioConfig) {
-    const dispatch = useRebaseRegistryDispatch();
-
-    const resolvedHomePage = homePage ?? DEFAULT_HOME_PAGE;
-
-    /**
-     * The tool list reduced to a value, so that re-rendering the host does not
-     * republish the registry.
-     *
-     * `tools` is an array, and callers write it inline — `tools={[...TOOLS]}`
-     * in the hosted console. A fresh array every render meant a fresh
-     * `devViews` every render, which meant the effect below unregistered and
-     * re-registered on every render. Because each registration builds *new*
-     * `<Suspense><SQLEditor/></Suspense>` elements, whatever view was on screen
-     * was torn down and remounted each time: a half-typed SQL query, a storage
-     * folder you had navigated into, an open policy editor — all discarded, and
-     * every mount reissued the view's initial requests.
-     */
-    const toolsKey = tools ? tools.join(",") : "";
-
-    const devViews: AppView[] = useMemo(() => {
-        const views: AppView[] = [];
-        const activeTools = tools ?? ["sql", "js", "rls", "storage", "cron", "schema-visualizer", "branches", "backups", "api", "logs", "api-keys"];
-        const suspense = (el: React.ReactNode) => <Suspense fallback={<CircularProgressCenter/>}>{el}</Suspense>;
-
-        if (activeTools.includes("sql")) {
-            views.push({ slug: "sql",
-name: "SQL Console",
-group: "Database",
-icon: "terminal",
-description: "Execute SQL queries",
-view: suspense(<SQLEditor/>) });
-        }
-        if (activeTools.includes("js")) {
-            views.push({ slug: "js",
-name: "JS Console",
-group: "Compute",
-icon: "code",
-description: "Execute JavaScript",
-view: suspense(<JSEditor/>) });
-        }
-        if (activeTools.includes("rls")) {
-            views.push({ slug: "rls",
-name: "RLS Policies",
-group: "Database",
-icon: "ShieldCheck",
-description: "Row Level Security",
-view: suspense(<RLSEditor/>) });
-        }
-        if (activeTools.includes("storage")) {
-            views.push({ slug: "storage",
-name: "Storage",
-group: "Storage",
-icon: "HardDrive",
-description: "Manage storage files",
-view: suspense(<StorageView/>) });
-        }
-        if (activeTools.includes("cron")) {
-            views.push({ slug: "cron",
-name: "Cron Jobs",
-group: "Compute",
-icon: "Clock",
-description: "Manage scheduled tasks",
-view: suspense(<CronJobsView/>) });
-        }
-        if (activeTools.includes("schema-visualizer")) {
-            views.push({ slug: "schema-visualizer",
-name: "Schema Visualizer",
-group: "Database",
-icon: "Network",
-description: "Interactive database ERD",
-view: suspense(<SchemaVisualizer/>) });
-        }
-        if (activeTools.includes("branches")) {
-            views.push({ slug: "branches",
-name: "Branches",
-group: "Database",
-icon: "GitBranch",
-description: "Create and manage database branches",
-view: suspense(<BranchesView/>) });
-        }
-        if (activeTools.includes("backups")) {
-            views.push({ slug: "backups",
-name: "Backups",
-group: "Database",
-icon: "Database",
-description: "Download database backups",
-view: suspense(<BackupsView/>) });
-        }
-        if (activeTools.includes("api")) {
-            views.push({ slug: "api",
-name: "API Explorer",
-group: "API",
-icon: "BookOpen",
-description: "Interactive API documentation and testing",
-view: suspense(<ApiExplorer/>) });
-        }
-        if (activeTools.includes("logs")) {
-            views.push({ slug: "logs",
-name: "Logs Explorer",
-group: "Database",
-icon: "Activity",
-description: "Real-time system and query logs",
-view: suspense(<LogsExplorer/>) });
-        }
-        if (activeTools.includes("api-keys")) {
-            views.push({ slug: "api-keys",
-name: "API Keys",
-group: "Access Control",
-icon: "KeyRound",
-description: "Create and manage scoped API keys",
-view: suspense(<ApiKeysView/>) });
-        }
-        // Note: "schema" tool is auto-injected by RebaseShell when collectionEditor is enabled.
-        // It is NOT registered here anymore.
-        return views;
-        // Keyed by the tool list's *contents*; see `toolsKey`. `tools` itself is
-        // read inside, and is exactly determined by the key.
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [toolsKey]);
-
-    // Use a ref for homePage so it never destabilizes the effect.
-    // homePage is a React element — its identity doesn't matter for registration.
-    const homePageRef = React.useRef(resolvedHomePage);
-    homePageRef.current = resolvedHomePage;
-
-    // Same reasoning for `tools`: it is registered as config, but a new array
-    // with the same contents must not count as a change.
-    const toolsRef = React.useRef(tools);
-    toolsRef.current = tools;
-
-    useLayoutEffect(() => {
-        dispatch.registerStudio({ tools: toolsRef.current,
-homePage: homePageRef.current,
-devViews });
-        return () => dispatch.unregisterStudio();
-    }, [dispatch, devViews]);
-
-    return null;
-}

package/src/components/SQLEditor/ExplainVisualizer.tsx

@@ -1,128 +0,0 @@
-import React, { useState } from "react";
-import { Typography, cls, defaultBorderMixin, Collapse } from "@rebasepro/ui";
-
-export interface ExplainPlanNode {
-    "Node Type": string;
-    "Relation Name"?: string;
-    "Alias"?: string;
-    "Startup Cost": number;
-    "Total Cost": number;
-    "Plan Rows": number;
-    "Plan Width": number;
-    "Actual Startup Time"?: number;
-    "Actual Total Time"?: number;
-    "Actual Rows"?: number;
-    "Actual Loops"?: number;
-    "Filter"?: string;
-    "Index Cond"?: string;
-    "Hash Cond"?: string;
-    "Plans"?: ExplainPlanNode[];
-    [key: string]: unknown;
-}
-
-export interface ExplainVisualizerProps {
-    plan: ExplainPlanNode;
-    isRoot?: boolean;
-}
-
-export const ExplainVisualizer: React.FC<ExplainVisualizerProps> = ({ plan, isRoot = true }) => {
-    const [expanded, setExpanded] = useState(true);
-
-    const hasChildren = plan.Plans && plan.Plans.length > 0;
-
-    // Determine color based on cost
-    const cost = plan["Total Cost"];
-    let costColor = "text-green-500 dark:text-green-400";
-    if (cost > 1000) costColor = "text-red-500 dark:text-red-400";
-    else if (cost > 100) costColor = "text-orange-500 dark:text-orange-400";
-
-    return (
-        <div className={cls("flex flex-col", isRoot ? "p-4" : "pl-6 mt-2 relative")}>
-            {/* Tree branch line */}
-            {!isRoot && (
-                <div className="absolute left-2.5 top-0 bottom-0 w-px bg-surface-200 dark:bg-surface-950 -z-10"></div>
-            )}
-            {!isRoot && (
-                <div className="absolute left-2.5 top-5 w-3 h-px bg-surface-200 dark:bg-surface-950 -z-10"></div>
-            )}
-
-            <div className={cls("border rounded-md bg-white dark:bg-surface-900 text-text-primary dark:text-text-primary-dark shadow-xs relative z-10 w-[420px] max-w-full", defaultBorderMixin)}>
-                <div
-                    className={cls("px-4 py-3 flex justify-between items-center cursor-pointer select-none")}
-                    onClick={() => setExpanded(!expanded)}
-                >
-                    <div className="flex items-center space-x-2">
-                        {hasChildren ? (
-                            <svg className={cls("w-4 h-4 text-text-secondary transition-transform", !expanded ? "-rotate-90" : "")} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7"/></svg>
-                        ) : (
-                            <div className="w-4 h-4"></div>
-                        )}
-
-                        <Typography variant="body1" className="flex items-center">
-                            {plan["Node Type"]}
-                        </Typography>
-
-                        {plan["Relation Name"] && (
-                            <span className="font-mono text-[11px] text-text-secondary dark:text-text-secondary-dark px-2 py-0.5 rounded bg-surface-200 dark:bg-surface-950 ml-2">
-                                on {plan["Relation Name"]} {plan.Alias && plan.Alias !== plan["Relation Name"] ? `(${plan.Alias})` : ""}
-                            </span>
-                        )}
-                    </div>
-
-                    <div className="flex space-x-6 items-center">
-                        <div className="flex flex-col text-right">
-                            <span className="text-[10px] uppercase text-text-disabled dark:text-text-disabled-dark font-semibold tracking-wide leading-tight mb-0.5">Cost</span>
-                            <span className={cls("font-mono font-medium text-[13px] leading-none", costColor)}>{cost.toFixed(2)}</span>
-                        </div>
-                        <div className="flex flex-col text-right">
-                            <span className="text-[10px] uppercase text-text-disabled dark:text-text-disabled-dark font-semibold tracking-wide leading-tight mb-0.5">Rows</span>
-                            <span className="font-mono text-[13px] text-text-secondary dark:text-text-secondary-dark leading-none">{plan["Plan Rows"]}</span>
-                        </div>
-                    </div>
-                </div>
-
-                <Collapse in={expanded}>
-                    <div className="px-4 py-3 border-t border-surface-200 dark:border-surface-950 text-[13px] flex flex-col gap-2">
-                        <div className="flex items-center space-x-6">
-                            <div className="flex items-center space-x-2">
-                                <span className="text-text-disabled dark:text-text-disabled-dark">Startup Cost:</span>
-                                <span className="font-mono font-medium">{plan["Startup Cost"].toFixed(2)}</span>
-                            </div>
-                            <div className="flex items-center space-x-2">
-                                <span className="text-text-disabled dark:text-text-disabled-dark">Width:</span>
-                                <span className="font-mono font-medium">{plan["Plan Width"]} bytes</span>
-                            </div>
-                        </div>
-
-                        {plan.Filter && (
-                            <div className="mt-1">
-                                <span className="text-text-disabled dark:text-text-disabled-dark block mb-1">Filter:</span>
-                                <code className="block w-full p-2 bg-surface-50 dark:bg-surface-950 border dark:border-surface-950 rounded font-mono text-[12px] truncate">{plan.Filter}</code>
-                            </div>
-                        )}
-                        {plan["Index Cond"] && (
-                            <div className="mt-1">
-                                <span className="text-text-disabled dark:text-text-disabled-dark block mb-1">Index Cond:</span>
-                                <code className="block w-full p-2 bg-surface-50 dark:bg-surface-950 border dark:border-surface-950 rounded font-mono text-[12px] truncate">{plan["Index Cond"]}</code>
-                            </div>
-                        )}
-                        {plan["Hash Cond"] && (
-                            <div className="mt-1">
-                                <span className="text-text-disabled dark:text-text-disabled-dark block mb-1">Hash Cond:</span>
-                                <code className="block w-full p-2 bg-surface-50 dark:bg-surface-950 border dark:border-surface-950 rounded font-mono text-[12px] truncate">{plan["Hash Cond"]}</code>
-                            </div>
-                        )}
-                    </div>
-                </Collapse>
-            </div>
-
-            {expanded && hasChildren && (
-                <div className="flex flex-col space-y-2 mt-[-4px]">
-                    {plan.Plans!.map((childPlan, idx) => (
-                        <ExplainVisualizer key={idx} plan={childPlan} isRoot={false}/>
-                    ))}
-                </div>
-            )}
-        </div>
-    );
-};