@rebasepro/studio 0.17.3 → 0.18.1

package/src/components/SchemaVisualizer/TableNode.tsx

@@ -1,257 +0,0 @@
-import React, { memo, useMemo } from "react";
-import { Handle, Position } from "@xyflow/react";
-import type { NodeProps } from "@xyflow/react";
-import { Typography, Chip, Tooltip, cls } from "@rebasepro/ui";
-import { IconForView } from "@rebasepro/app";
-import type { TableNodeData, ColumnInfo } from "./useSchemaGraph";
-import { getColumnRowY, getHeaderHeight } from "./schema-visualizer.utils";
-
-/**
- * Custom React Flow node that renders a database table as a card.
- *
- * Every PK and FK column renders handles on BOTH Left and Right sides.
- * The edge builder picks which side to use based on relative node position.
- */
-const TableNodeInner = ({ data, selected }: NodeProps) => {
-    const {
-        tableName,
-        collectionName,
-        columns,
-        isJunction,
-        rlsEnabled,
-        historyEnabled,
-        icon
-    } = data as TableNodeData;
-
-    // Build handles: every PK/FK column gets Left + Right handles
-    const handles = useMemo(() => {
-        const result: { id: string; type: "source" | "target"; position: Position; top: number }[] = [];
-        const cols = columns as ColumnInfo[];
-        const headerH = getHeaderHeight({
-            isJunction: Boolean(isJunction),
-            collectionName: collectionName as string,
-            tableName: tableName as string
-        });
-        const midY = cols.length > 0 ? getColumnRowY(Math.floor(cols.length / 2), headerH) : 30;
-
-        cols.forEach((col, idx) => {
-            const y = getColumnRowY(idx, headerH);
-
-            if (col.isForeignKey && !col.isPrimaryKey) {
-                // FK: source handles on both sides
-                result.push({ id: `source-${col.name}-right`,
-type: "source",
-position: Position.Right,
-top: y });
-                result.push({ id: `source-${col.name}-left`,
-type: "source",
-position: Position.Left,
-top: y });
-            }
-            if (col.isPrimaryKey) {
-                // PK: target + source handles on both sides
-                result.push({ id: `target-${col.name}-right`,
-type: "target",
-position: Position.Right,
-top: y });
-                result.push({ id: `target-${col.name}-left`,
-type: "target",
-position: Position.Left,
-top: y });
-                result.push({ id: `source-${col.name}-right`,
-type: "source",
-position: Position.Right,
-top: y });
-                result.push({ id: `source-${col.name}-left`,
-type: "source",
-position: Position.Left,
-top: y });
-            }
-        });
-
-        // Default handles on both sides
-        result.push({ id: "target-default-right",
-type: "target",
-position: Position.Right,
-top: midY });
-        result.push({ id: "target-default-left",
-type: "target",
-position: Position.Left,
-top: midY });
-        result.push({ id: "source-default-right",
-type: "source",
-position: Position.Right,
-top: midY });
-        result.push({ id: "source-default-left",
-type: "source",
-position: Position.Left,
-top: midY });
-
-        return result;
-    }, [columns, isJunction, collectionName, tableName]);
-
-    return (
-        <div
-            className={cls(
-                "relative rounded-lg border bg-white dark:bg-surface-900 shadow-sm transition-all duration-200 min-w-[240px] max-w-[320px]",
-                selected
-                    ? "border-primary ring-2 ring-primary/20 shadow-md"
-                    : "border-surface-200/40 dark:border-surface-700/40 hover:shadow-md hover:border-surface-300 dark:hover:border-surface-600",
-                isJunction && "border-dashed"
-            )}
-        >
-            {/* ── Header ── */}
-            <div
-                className={cls(
-                    "flex items-center gap-2 px-3 py-2 border-b rounded-t-lg",
-                    isJunction
-                        ? "bg-surface-50 dark:bg-surface-950/50 border-surface-200/30 dark:border-surface-700/30"
-                        : "bg-surface-50 dark:bg-surface-950 border-surface-200/40 dark:border-surface-700/40"
-                )}
-            >
-                {icon && !isJunction && (
-                    <div className="text-primary shrink-0">
-                        <IconForView
-                            collectionOrView={{ slug: tableName,
-name: collectionName,
-icon }}
-                            size="smallest"
-                        />
-                    </div>
-                )}
-                {isJunction && (
-                    <svg
-                        className="w-3.5 h-3.5 text-text-disabled dark:text-text-disabled-dark shrink-0"
-                        fill="none"
-                        stroke="currentColor"
-                        viewBox="0 0 24 24"
-                    >
-                        <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"
-                        />
-                    </svg>
-                )}
-                <div className="flex flex-col min-w-0">
-                    <Typography
-                        variant="caption"
-                        className={cls(
-                            "font-semibold truncate text-[12px]",
-                            isJunction
-                                ? "text-text-secondary dark:text-text-secondary-dark"
-                                : "text-text-primary dark:text-text-primary-dark"
-                        )}
-                    >
-                        {tableName}
-                    </Typography>
-                    {collectionName !== tableName && !isJunction && (
-                        <Typography
-                            variant="caption"
-                            className="text-[10px] text-text-disabled dark:text-text-disabled-dark truncate"
-                        >
-                            {collectionName}
-                        </Typography>
-                    )}
-                </div>
-
-                {/* Badges */}
-                <div className="ml-auto flex items-center gap-1 shrink-0">
-                    {rlsEnabled && (
-                        <Tooltip title="RLS enabled">
-                            <div className="w-1.5 h-1.5 rounded-full bg-green-500"/>
-                        </Tooltip>
-                    )}
-                    {historyEnabled && (
-                        <Tooltip title="History enabled">
-                            <div className="w-1.5 h-1.5 rounded-full bg-blue-400"/>
-                        </Tooltip>
-                    )}
-                </div>
-            </div>
-
-            {/* ── Columns ── */}
-            <div className="divide-y divide-surface-100 dark:divide-surface-950/60">
-                {(columns as ColumnInfo[]).map((col: ColumnInfo) => (
-                    <div
-                        key={col.name}
-                        className={cls(
-                            "flex items-center gap-2 px-3 py-1.5 text-xs transition-colors",
-                            col.isPrimaryKey && "bg-amber-50/50 dark:bg-amber-950/10",
-                            col.isForeignKey &&
-                                !col.isPrimaryKey &&
-                                "bg-blue-50/40 dark:bg-blue-950/10"
-                        )}
-                    >
-                        <span className="w-3 shrink-0 text-center">
-                            {col.isPrimaryKey && (
-                                <Tooltip title="Primary Key">
-                                    <span className="text-amber-500 text-[10px] font-semibold">🔑</span>
-                                </Tooltip>
-                            )}
-                            {col.isForeignKey && !col.isPrimaryKey && (
-                                <Tooltip title={`FK → ${col.relationName ?? "?"}`}>
-                                    <span className="text-blue-400 text-[10px] font-semibold">🔗</span>
-                                </Tooltip>
-                            )}
-                        </span>
-
-                        <Typography
-                            variant="caption"
-                            className={cls(
-                                "font-mono text-[11px] truncate flex-1 min-w-0",
-                                col.isPrimaryKey
-                                    ? "font-semibold text-amber-700 dark:text-amber-400"
-                                    : col.isForeignKey
-                                      ? "text-blue-600 dark:text-blue-400"
-                                      : "text-text-primary dark:text-text-primary-dark"
-                            )}
-                        >
-                            {col.name}
-                        </Typography>
-
-                        {col.isEnum ? (
-                            <Chip
-                                size="smallest"
-                                className="bg-violet-100 text-violet-700 dark:bg-violet-900/30 dark:text-violet-400 border-violet-200 dark:border-violet-800 text-[9px] py-0"
-                            >
-                                enum
-                            </Chip>
-                        ) : (
-                            <Typography
-                                variant="caption"
-                                className="text-[10px] text-text-disabled dark:text-text-disabled-dark font-mono shrink-0"
-                            >
-                                {col.typeLabel}
-                            </Typography>
-                        )}
-
-                        {col.isRequired && !col.isPrimaryKey && (
-                            <Tooltip title="Required">
-                                <span className="text-red-400 text-[9px]">•</span>
-                            </Tooltip>
-                        )}
-                    </div>
-                ))}
-            </div>
-
-            {/* ── Handles at node root ── */}
-            {handles.map((h) => (
-                <Handle
-                    key={h.id}
-                    id={h.id}
-                    type={h.type}
-                    position={h.position}
-                    style={{ top: h.top }}
-                    className={cls(
-                        "!w-2 !h-2 !border-2 !border-white dark:!border-surface-900",
-                        h.type === "source" ? "!bg-blue-400" : "!bg-amber-400"
-                    )}
-                />
-            ))}
-        </div>
-    );
-};
-
-export const TableNode = memo(TableNodeInner);

package/src/components/SchemaVisualizer/schema-visualizer.utils.ts

@@ -1,140 +0,0 @@
-import dagre from "dagre";
-import type { Node, Edge } from "@xyflow/react";
-
-// ─── Layout Constants ─────────────────────────────────────────────────
-export const NODE_WIDTH = 280;
-/** Header with a single line of text (junction tables or tableName === collectionName). */
-const HEADER_HEIGHT_SINGLE = 33;
-/** Header with two lines (name + subtitle when collectionName !== tableName). */
-const HEADER_HEIGHT_DOUBLE = 47;
-const ROW_HEIGHT = 28; // height per column row
-
-/**
- * Compute the correct header height for a table node.
- */
-export const getHeaderHeight = (opts: {
-    isJunction: boolean;
-    collectionName: string;
-    tableName: string;
-}): number => {
-    if (opts.isJunction) return HEADER_HEIGHT_SINGLE;
-    return opts.collectionName !== opts.tableName
-        ? HEADER_HEIGHT_DOUBLE
-        : HEADER_HEIGHT_SINGLE;
-};
-
-/**
- * Estimate the pixel height of a table node based on column count.
- */
-const estimateNodeHeight = (columnCount: number, headerHeight: number = HEADER_HEIGHT_DOUBLE): number =>
-    headerHeight + Math.max(columnCount, 1) * ROW_HEIGHT + 4; // +4 for bottom padding
-
-/**
- * Get the vertical center Y of a specific column row (0-indexed)
- * relative to the top of the node.
- */
-export const getColumnRowY = (rowIndex: number, headerHeight: number = HEADER_HEIGHT_DOUBLE): number =>
-    headerHeight + rowIndex * ROW_HEIGHT + ROW_HEIGHT / 2;
-
-// ─── Auto-Layout via Dagre ────────────────────────────────────────────
-
-export type LayoutDirection = "TB" | "LR";
-
-/**
- * Compute node positions using the dagre graph layout engine.
- * Returns a new array of nodes with updated `position`.
- */
-export const getLayoutedElements = (
-    nodes: Node[],
-    edges: Edge[],
-    direction: LayoutDirection = "LR"
-): { nodes: Node[]; edges: Edge[] } => {
-    const g = new dagre.graphlib.Graph();
-    g.setGraph({
-        rankdir: direction,
-        nodesep: 100,
-        ranksep: 180,
-        edgesep: 60,
-        marginx: 60,
-        marginy: 60
-    });
-    g.setDefaultEdgeLabel(() => ({}));
-
-    const nodeHeights = new Map<string, number>();
-
-    nodes.forEach((node) => {
-        const data = node.data as { columns?: unknown[]; isJunction?: boolean; collectionName?: string; tableName?: string };
-        const columnCount = data.columns?.length ?? 3;
-        const headerH = getHeaderHeight({
-            isJunction: Boolean(data.isJunction),
-            collectionName: data.collectionName ?? "",
-            tableName: data.tableName ?? ""
-        });
-        const h = estimateNodeHeight(columnCount, headerH);
-        nodeHeights.set(node.id, h);
-        g.setNode(node.id, {
-            width: NODE_WIDTH,
-            height: h
-        });
-    });
-
-    edges.forEach((edge) => {
-        g.setEdge(edge.source, edge.target);
-    });
-
-    dagre.layout(g);
-
-    const layoutedNodes = nodes.map((node) => {
-        const nodeWithPosition = g.node(node.id);
-        const h = nodeHeights.get(node.id) ?? estimateNodeHeight(3);
-        return {
-            ...node,
-            data: {
-                ...node.data,
-                layoutDirection: direction
-            },
-            position: {
-                x: nodeWithPosition.x - NODE_WIDTH / 2,
-                y: nodeWithPosition.y - h / 2
-            }
-        };
-    });
-
-    return { nodes: layoutedNodes,
-edges };
-};
-
-// ─── Column type → display label ──────────────────────────────────────
-
-const TYPE_LABELS: Record<string, string> = {
-    string: "varchar",
-    number: "integer",
-    boolean: "boolean",
-    date: "timestamp",
-    map: "jsonb",
-    array: "jsonb",
-    relation: "FK"
-};
-
-export const getTypeLabel = (type: string): string =>
-    TYPE_LABELS[type] ?? type;
-
-// ─── Edge styling by relation type ────────────────────────────────────
-
-export interface RelationEdgeData {
-    cardinality: "one" | "many";
-    direction: "owning" | "inverse";
-    relationName: string;
-    hasJunction: boolean;
-    hasJoinPath: boolean;
-    label: string;
-}
-
-export const getCardinalityLabel = (
-    cardinality: "one" | "many",
-    direction: "owning" | "inverse"
-): string => {
-    if (cardinality === "many") return "M:N";
-    if (direction === "inverse") return "1:1 ←";
-    return "N:1";
-};

package/src/components/SchemaVisualizer/useLiveRls.ts

@@ -1,86 +0,0 @@
-/**
- * Which tables actually have row-level security switched on, according to the
- * database.
- *
- * ## Why this is not read from the collection config
- *
- * The graph used to derive "RLS protected" from `collection.securityRules` —
- * i.e. from what the *codebase* declares. Two problems with that:
- *
- *  - **It is not the truth.** Rules in code are only live once a migration has
- *    applied them, and `ALTER TABLE … DISABLE ROW LEVEL SECURITY` in a psql
- *    session is invisible to it. A security indicator that reports intent
- *    rather than state is worse than none: it is green precisely when you most
- *    need it to be red.
- *  - **The hosted console has no codebase.** There, collections arrive from the
- *    tenant's `/api/meta/contract`, which deliberately strips `securityRules`
- *    (they carry the raw SQL of every policy guarding the project). So the
- *    console showed "RLS protected: 0" and no badge on any table, for every
- *    project, however well secured.
- *
- * `pg_tables.rowsecurity` answers the question directly and is available
- * wherever `databaseAdmin` is — which is both hosts.
- *
- * When there is no SQL capability at all the hook reports `null`, and callers
- * fall back to the config-derived flag rather than claiming everything is
- * unprotected.
- */
-import { useEffect, useState } from "react";
-import { useRebaseContext } from "@rebasepro/app";
-
-/** `schema.table` for every table with RLS enabled, or `null` if unknown. */
-export type LiveRlsTables = Set<string> | null;
-
-const RLS_TABLES_SQL = `
-    SELECT schemaname, tablename, rowsecurity
-    FROM pg_tables
-    WHERE schemaname NOT IN ('information_schema', 'pg_catalog');
-`;
-
-/** Postgres column names arrive lower-cased over the wire, but not on every driver. */
-function pick<T>(row: Record<string, unknown>, name: string): T | undefined {
-    return (row[name] ?? row[name.toUpperCase()]) as T | undefined;
-}
-
-function extractRows(result: unknown): Record<string, unknown>[] {
-    if (result && typeof result === "object" && "rows" in result) {
-        const rows = (result as { rows: unknown }).rows;
-        if (Array.isArray(rows)) return rows as Record<string, unknown>[];
-    }
-    if (Array.isArray(result)) return result as Record<string, unknown>[];
-    return [];
-}
-
-export function useLiveRlsTables(): LiveRlsTables {
-    const { databaseAdmin } = useRebaseContext();
-    const executeSql = databaseAdmin?.executeSql;
-    const [tables, setTables] = useState<LiveRlsTables>(null);
-
-    useEffect(() => {
-        if (!executeSql) {
-            setTables(null);
-            return;
-        }
-        let cancelled = false;
-        executeSql(RLS_TABLES_SQL)
-            .then((result: unknown) => {
-                if (cancelled) return;
-                const enabled = new Set<string>();
-                for (const row of extractRows(result)) {
-                    if (!pick<boolean>(row, "rowsecurity")) continue;
-                    const schema = pick<string>(row, "schemaname") ?? "public";
-                    const table = pick<string>(row, "tablename");
-                    if (table) enabled.add(`${schema}.${table}`);
-                }
-                setTables(enabled);
-            })
-            .catch(() => {
-                // No answer is not the same as "nothing is protected" — leave it
-                // unknown so the caller keeps its config-derived fallback.
-                if (!cancelled) setTables(null);
-            });
-        return () => { cancelled = true; };
-    }, [executeSql]);
-
-    return tables;
-}