@rebasepro/studio 0.4.0 → 0.6.0

package/src/components/StudioHomePage.tsx

@@ -4,7 +4,7 @@ import { Card, cls, Container, Typography } from "@rebasepro/ui";
 import { ArrowRightIcon, iconSize } from "@rebasepro/ui";
 import { IconForView, useRebaseContext, useRestoreScroll, useSlot } from "@rebasepro/core";
 import { useNavigate } from "react-router-dom";
-import { useStudioBreadcrumbs, BootstrapAdminBanner } from "@rebasepro/core";
+import { useStudioBreadcrumbs, SchemaDriftBanner } from "@rebasepro/core";
 
 /* ═══════════════════════════════════════════════════════════════
    Static studio tool definitions
@@ -30,12 +30,30 @@ const SECTIONS: StudioSection[] = [
         dotColor: "bg-emerald-400",
         iconColor: "text-emerald-400",
         tools: [
-            { path: "/schema", name: "Collections", description: "Define and manage your data model and collection schemas", icon: "LayoutList" },
-            { path: "/schema-visualizer", name: "Schema Visualizer", description: "Interactive ERD showing tables, columns, and relationships", icon: "Network" },
-            { path: "/sql", name: "SQL Console", description: "Execute raw SQL queries directly against your database", icon: "terminal" },
-            { path: "/branches", name: "Branches", description: "Create and manage isolated database copies for development", icon: "GitBranch" },
-            { path: "/rls", name: "RLS Policies", description: "Configure Row Level Security for fine-grained data access", icon: "ShieldCheck" },
-            { path: "/logs", name: "Logs Explorer", description: "Real-time system, query, and authentication logs", icon: "Activity" }
+            { path: "/schema",
+name: "Collections",
+description: "Define and manage your data model and collection schemas",
+icon: "LayoutList" },
+            { path: "/schema-visualizer",
+name: "Schema Visualizer",
+description: "Interactive ERD showing tables, columns, and relationships",
+icon: "Network" },
+            { path: "/sql",
+name: "SQL Console",
+description: "Execute raw SQL queries directly against your database",
+icon: "terminal" },
+            { path: "/branches",
+name: "Branches",
+description: "Create and manage isolated database copies for development",
+icon: "GitBranch" },
+            { path: "/rls",
+name: "RLS Policies",
+description: "Configure Row Level Security for fine-grained data access",
+icon: "ShieldCheck" },
+            { path: "/logs",
+name: "Logs Explorer",
+description: "Real-time system, query, and authentication logs",
+icon: "Activity" }
         ]
     },
     {
@@ -43,8 +61,14 @@ const SECTIONS: StudioSection[] = [
         dotColor: "bg-blue-400",
         iconColor: "text-blue-400",
         tools: [
-            { path: "/js", name: "JS Console", description: "Run JavaScript with the Rebase SDK in a live sandbox", icon: "code" },
-            { path: "/cron", name: "Cron Jobs", description: "Monitor and manage scheduled background tasks", icon: "Clock" }
+            { path: "/js",
+name: "JS Console",
+description: "Run JavaScript with the Rebase SDK in a live sandbox",
+icon: "code" },
+            { path: "/cron",
+name: "Cron Jobs",
+description: "Monitor and manage scheduled background tasks",
+icon: "Clock" }
         ]
     },
     {
@@ -52,7 +76,10 @@ const SECTIONS: StudioSection[] = [
         dotColor: "bg-violet-400",
         iconColor: "text-violet-400",
         tools: [
-            { path: "/api", name: "API Explorer", description: "Interactive API documentation with live request testing", icon: "BookOpen" }
+            { path: "/api",
+name: "API Explorer",
+description: "Interactive API documentation with live request testing",
+icon: "BookOpen" }
         ]
     },
     {
@@ -60,7 +87,10 @@ const SECTIONS: StudioSection[] = [
         dotColor: "bg-amber-400",
         iconColor: "text-amber-400",
         tools: [
-            { path: "/storage", name: "Storage", description: "Browse, upload, and manage files in your storage bucket", icon: "HardDrive" }
+            { path: "/storage",
+name: "Storage",
+description: "Browse, upload, and manage files in your storage bucket",
+icon: "HardDrive" }
         ]
     },
     {
@@ -68,8 +98,14 @@ const SECTIONS: StudioSection[] = [
         dotColor: "bg-rose-400",
         iconColor: "text-rose-400",
         tools: [
-            { path: "/users", name: "Users", description: "Manage developers and assign roles in your workspace", icon: "group" },
-            { path: "/roles", name: "Roles", description: "Create and configure fine-grained access permissions", icon: "ShieldEllipsis" }
+            { path: "/users",
+name: "Users",
+description: "Manage developers and assign roles in your workspace",
+icon: "group" },
+            { path: "/roles",
+name: "Roles",
+description: "Create and configure fine-grained access permissions",
+icon: "ShieldEllipsis" }
         ]
     }
 ];
@@ -106,8 +142,8 @@ export function StudioHomePage({
     return (
         <div ref={containerRef} className="py-2 overflow-auto h-full w-full">
             <Container maxWidth="6xl">
-                <div className="mb-4">
-                    <BootstrapAdminBanner />
+                <div className="mb-4 flex flex-col gap-2">
+                    <SchemaDriftBanner />
                 </div>
 
                 {(additionalActions || pluginActions) && (

package/src/utils/parseSpec.test.ts

@@ -38,10 +38,12 @@ describe("parseOpenApiSpec", () => {
         const spec = makeSpec({
             paths: {
                 "/api/data/users": {
-                    get: { tags: ["Users"], summary: "List users" }
+                    get: { tags: ["Users"],
+summary: "List users" }
                 },
                 "/api/data/posts": {
-                    get: { tags: ["Posts"], summary: "List posts" }
+                    get: { tags: ["Posts"],
+summary: "List posts" }
                 }
             }
         });
@@ -67,7 +69,8 @@ describe("parseOpenApiSpec", () => {
         const spec = makeSpec({
             paths: {
                 "/api/data/users": {
-                    get: { tags: ["Users"], summary: "List" }
+                    get: { tags: ["Users"],
+summary: "List" }
                 }
             }
         });
@@ -79,7 +82,8 @@ describe("parseOpenApiSpec", () => {
         const spec = makeSpec({
             paths: {
                 "/api/data": {
-                    get: { tags: ["Root"], summary: "Root" }
+                    get: { tags: ["Root"],
+summary: "Root" }
                 }
             }
         });
@@ -91,12 +95,16 @@ describe("parseOpenApiSpec", () => {
         const spec = makeSpec({
             paths: {
                 "/api/data/users": {
-                    delete: { tags: ["Users"], summary: "Delete" },
-                    get: { tags: ["Users"], summary: "List" },
-                    post: { tags: ["Users"], summary: "Create" }
+                    delete: { tags: ["Users"],
+summary: "Delete" },
+                    get: { tags: ["Users"],
+summary: "List" },
+                    post: { tags: ["Users"],
+summary: "Create" }
                 },
                 "/api/data/users/{id}": {
-                    get: { tags: ["Users"], summary: "Get one" }
+                    get: { tags: ["Users"],
+summary: "Get one" }
                 }
             }
         });
@@ -111,15 +119,19 @@ describe("parseOpenApiSpec", () => {
     it("respects tag order from spec.tags", () => {
         const spec = makeSpec({
             tags: [
-                { name: "Posts", description: "Blog posts" },
-                { name: "Users", description: "User management" }
+                { name: "Posts",
+description: "Blog posts" },
+                { name: "Users",
+description: "User management" }
             ],
             paths: {
                 "/api/data/users": {
-                    get: { tags: ["Users"], summary: "List users" }
+                    get: { tags: ["Users"],
+summary: "List users" }
                 },
                 "/api/data/posts": {
-                    get: { tags: ["Posts"], summary: "List posts" }
+                    get: { tags: ["Posts"],
+summary: "List posts" }
                 }
             }
         });
@@ -131,11 +143,13 @@ describe("parseOpenApiSpec", () => {
     it("includes tag descriptions from spec.tags", () => {
         const spec = makeSpec({
             tags: [
-                { name: "Users", description: "User management endpoints" }
+                { name: "Users",
+description: "User management endpoints" }
             ],
             paths: {
                 "/api/data/users": {
-                    get: { tags: ["Users"], summary: "List" }
+                    get: { tags: ["Users"],
+summary: "List" }
                 }
             }
         });
@@ -144,7 +158,9 @@ describe("parseOpenApiSpec", () => {
     });
 
     it("extracts parameters and requestBody", () => {
-        const params = [{ name: "id", in: "path", required: true }];
+        const params = [{ name: "id",
+in: "path",
+required: true }];
         const requestBody = { content: { "application/json": { schema: {} } } };
         const spec = makeSpec({
             paths: {
@@ -166,8 +182,10 @@ describe("parseOpenApiSpec", () => {
         const spec = makeSpec({
             paths: {
                 "/api/data/users": {
-                    get: { tags: ["Users"], summary: "List" },
-                    post: { tags: ["Users"], summary: "Create" }
+                    get: { tags: ["Users"],
+summary: "List" },
+                    post: { tags: ["Users"],
+summary: "Create" }
                 }
             }
         });
@@ -181,8 +199,10 @@ describe("parseOpenApiSpec", () => {
         const spec = makeSpec({
             paths: {
                 "/api/data/users": {
-                    get: { tags: ["Users"], summary: "List" },
-                    options: { tags: ["Users"], summary: "Options" },
+                    get: { tags: ["Users"],
+summary: "List" },
+                    options: { tags: ["Users"],
+summary: "Options" },
                     parameters: [{ name: "test" }] as unknown as Record<string, unknown>
                 } as unknown as Record<string, never>
             }
@@ -245,7 +265,8 @@ describe("resolveRef", () => {
         const spec = makeSpec({
             components: {
                 schemas: {
-                    Author: { type: "object", properties: { name: { type: "string" } } }
+                    Author: { type: "object",
+properties: { name: { type: "string" } } }
                 }
             }
         });

package/src/utils/pgColumnToProperty.ts

@@ -1,4 +1,4 @@
-import { EntityCollection, Property, StringProperty, NumberProperty, ArrayProperty, TableColumnInfo, TableMetadata } from "@rebasepro/types";
+import type { EntityCollection, Property, StringProperty, NumberProperty, ArrayProperty, TableColumnInfo, TableMetadata, SecurityOperation, SecurityRule } from "@rebasepro/types";
 
 /**
  * Maps a PostgreSQL column data type to a Rebase property type.
@@ -212,13 +212,7 @@ export function buildCollectionFromTableMetadata(
         localKey?: string;
         through?: { table: string; sourceColumn: string; targetColumn: string };
     }> = [];
-    const securityRules: Array<{
-        name: string;
-        operations: string[];
-        roles: string[];
-        qual: string | null | undefined;
-        with_check: string | null | undefined;
-    }> = [];
+    const securityRules: SecurityRule[] = [];
 
     // Parse columns
     for (const column of metadata.columns) {
@@ -271,22 +265,31 @@ export function buildCollectionFromTableMetadata(
         for (const policy of metadata.policies) {
             // Attempt to map typical cmds to operations.
             // Postgres cmd: SELECT, INSERT, UPDATE, DELETE, ALL
-            let operations: string[] = [];
+            let operations: SecurityOperation[] = [];
             switch (policy.cmd) {
-                case "ALL": operations = ["read", "create", "update", "delete"]; break;
-                case "SELECT": operations = ["read"]; break;
-                case "INSERT": operations = ["create"]; break;
+                case "ALL": operations = ["all"]; break;
+                case "SELECT": operations = ["select"]; break;
+                case "INSERT": operations = ["insert"]; break;
                 case "UPDATE": operations = ["update"]; break;
                 case "DELETE": operations = ["delete"]; break;
             }
-            securityRules.push({
-                name: policy.policy_name,
-                operations,
-                // roles is string[] e.g., ["public", "authenticated"]
-                roles: policy.roles ?? [],
-                qual: policy.qual,
-                with_check: policy.with_check
-            });
+            const qual = policy.qual ?? undefined;
+            const withCheck = policy.with_check ?? undefined;
+            if (qual) {
+                securityRules.push({
+                    name: policy.policy_name,
+                    operations,
+                    roles: policy.roles ?? [],
+                    using: qual,
+                    ...(withCheck ? { withCheck } : {})
+                });
+            } else {
+                securityRules.push({
+                    name: policy.policy_name,
+                    operations,
+                    roles: policy.roles ?? []
+                });
+            }
         }
     }
 

package/src/utils/sql_utils.ts

@@ -105,7 +105,7 @@ export function resolveQueryCollections(
     for (const table of tables) {
         // Match table name against collection table or slug->snake_case
         const matched = collections.find(c => {
-            const tableName = (c as EntityCollection & { table?: string }).table || toSnakeCase(c.slug);
+            const tableName = ("table" in c ? c.table : undefined) || toSnakeCase(c.slug);
             return tableName === table.name;
         });