@rebasepro/studio 0.17.3 → 0.18.0

package/src/components/SQLEditor/SQLEditorSidebar.tsx

@@ -1,173 +0,0 @@
-
-import React, { useState } from "react";
-import { cls, defaultBorderMixin, IconButton, iconSize, Tab, Tabs, Trash2Icon, Typography } from "@rebasepro/ui";
-import { useTranslation } from "@rebasepro/app";
-import { SchemaBrowser } from "./SchemaBrowser";
-import type { TableInfo } from "./sql_editor_types";
-
-export interface Snippet {
-    id: string;
-    name: string;
-    sql: string;
-    createdAt: number;
-    isFavorite?: boolean;
-}
-
-interface SQLEditorSidebarProps {
-    onSelectSnippet: (sql: string) => void;
-    onTableClick: (tableName: string) => void;
-    snippets: Snippet[];
-    history: string[];
-    onDeleteSnippet: (id: string) => void;
-    schemas: Record<string, TableInfo[]>;
-    isSchemaLoading: boolean;
-    schemaError: string | null;
-    onRetrySchema: () => void;
-}
-
-export const SQLEditorSidebar = ({
-    onSelectSnippet,
-    onTableClick,
-    snippets,
-    history,
-    onDeleteSnippet,
-    schemas,
-    isSchemaLoading,
-    schemaError,
-    onRetrySchema
-}: SQLEditorSidebarProps) => {
-    const [activeTab, setActiveTab] = useState<"schema" | "snippets" | "history">("schema");
-    const { t } = useTranslation();
-
-    return (
-        <div className={cls("flex flex-col h-full w-full bg-white dark:bg-surface-950 border-r", defaultBorderMixin)}>
-            <Tabs value={activeTab} onValueChange={(v) => setActiveTab(v as "schema" | "snippets" | "history")} variant="boxy" className="border-b border-surface-200 dark:border-surface-950">
-                <Tab value="schema">{t("studio_sql_sidebar_schema")}</Tab>
-                <Tab value="snippets">{t("studio_sql_sidebar_snippets")}</Tab>
-                <Tab value="history">{t("studio_sql_sidebar_history")}</Tab>
-            </Tabs>
-
-            <div className="flex-grow overflow-hidden relative">
-                {activeTab === "schema" && (
-                    <SchemaBrowser
-                        onTableClick={onTableClick}
-                        schemas={schemas}
-                        isSchemaLoading={isSchemaLoading}
-                        schemaError={schemaError}
-                        onRetrySchema={onRetrySchema}
-                    />
-                )}
-
-                {activeTab === "snippets" && (() => {
-                    const favorites = snippets.filter(s => s.isFavorite);
-                    const others = snippets.filter(s => !s.isFavorite);
-
-                    return (
-                        <div className="flex flex-col h-full">
-                            <div className={cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin)}>
-                                <Typography variant="caption" className="font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">{t("studio_sql_sidebar_snippets")}</Typography>
-                            </div>
-                            <div className="flex-grow overflow-y-auto p-2 space-y-2 no-scrollbar">
-                                {snippets.length === 0 ? (
-                                    <div className="p-4 text-center">
-                                        <Typography variant="caption" className="text-text-disabled dark:text-text-disabled-dark">{t("studio_sql_sidebar_no_snippets")}</Typography>
-                                    </div>
-                                ) : (
-                                    <>
-                                        {favorites.length > 0 && (
-                                            <div className="mb-4">
-                                                <Typography variant="caption" className="text-[10px] font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark mb-2 px-1 flex items-center">
-                                                    <svg className="w-3 h-3 mr-1 text-red-500" fill="currentColor" viewBox="0 0 20 20"><path fillRule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clipRule="evenodd"/></svg>
-                                                    Favorites
-                                                </Typography>
-                                                <div className="space-y-2">
-                                                    {favorites.map(snippet => (
-                                                        <div
-                                                            key={snippet.id}
-                                                            className={cls("group p-2 rounded border hover:border-surface-400 dark:hover:border-surface-600 bg-white dark:bg-surface-900 transition-all cursor-pointer relative", defaultBorderMixin)}
-                                                            onClick={() => onSelectSnippet(snippet.sql)}
-                                                        >
-                                                            <Typography variant="body2" className="text-text-primary dark:text-text-primary-dark font-medium text-[13px] truncate pr-6">{snippet.name}</Typography>
-                                                            <Typography variant="caption" className="text-text-secondary dark:text-text-secondary-dark text-[10px] block mt-1 truncate">{snippet.sql}</Typography>
-                                                            <IconButton
-                                                                size="smallest"
-                                                                className="absolute right-1 top-1 opacity-0 group-hover:opacity-100 text-text-disabled hover:text-red-500 transition-opacity"
-                                                                onClick={(e) => {
-                                                                    e.stopPropagation();
-                                                                    onDeleteSnippet(snippet.id);
-                                                                }}
-                                                            >
-                                                                <Trash2Icon size={iconSize.smallest}/>
-                                                            </IconButton>
-                                                        </div>
-                                                    ))}
-                                                </div>
-                                            </div>
-                                        )}
-                                        {others.length > 0 && (
-                                            <div>
-                                                {favorites.length > 0 && (
-                                                    <Typography variant="caption" className="text-[10px] font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark mb-2 px-1 mt-4">
-                                                        Others
-                                                    </Typography>
-                                                )}
-                                                <div className="space-y-2">
-                                                    {others.map(snippet => (
-                                                        <div
-                                                            key={snippet.id}
-                                                            className={cls("group p-2 rounded border hover:border-surface-400 dark:hover:border-surface-600 bg-white dark:bg-surface-900 transition-all cursor-pointer relative", defaultBorderMixin)}
-                                                            onClick={() => onSelectSnippet(snippet.sql)}
-                                                        >
-                                                            <Typography variant="body2" className="text-text-primary dark:text-text-primary-dark font-medium text-[13px] truncate pr-6">{snippet.name}</Typography>
-                                                            <Typography variant="caption" className="text-text-secondary dark:text-text-secondary-dark text-[10px] block mt-1 truncate">{snippet.sql}</Typography>
-                                                            <IconButton
-                                                                size="smallest"
-                                                                className="absolute right-1 top-1 opacity-0 group-hover:opacity-100 text-text-disabled hover:text-red-500 transition-opacity"
-                                                                onClick={(e) => {
-                                                                    e.stopPropagation();
-                                                                    onDeleteSnippet(snippet.id);
-                                                                }}
-                                                            >
-                                                                <Trash2Icon size={iconSize.smallest}/>
-                                                            </IconButton>
-                                                        </div>
-                                                    ))}
-                                                </div>
-                                            </div>
-                                        )}
-                                    </>
-                                )}
-                            </div>
-                        </div>
-                    );
-                })()}
-
-                {activeTab === "history" && (
-                    <div className="flex flex-col h-full">
-                        <div className={cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin)}>
-                            <Typography variant="caption" className="font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">{t("studio_sql_sidebar_history")}</Typography>
-                        </div>
-                        <div className="flex-grow overflow-y-auto p-1 space-y-1 no-scrollbar">
-                            {history.length === 0 ? (
-                                <div className="p-4 text-center">
-                                    <Typography variant="caption" className="text-text-disabled dark:text-text-disabled-dark">{t("studio_sql_sidebar_no_history")}</Typography>
-                                </div>
-                            ) : (
-                                [...history].reverse().map((sql, i) => (
-                                    <div
-                                        key={i}
-                                        className="p-2 py-1.5 rounded hover:bg-surface-100 dark:hover:bg-surface-950 cursor-pointer group transition-colors flex items-start"
-                                        onClick={() => onSelectSnippet(sql)}
-                                    >
-                                        <svg className="w-3 h-3 mt-1 mr-2 text-text-disabled dark:text-text-disabled-dark group-hover:text-primary transition-colors flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
-                                        <Typography variant="caption" className="text-text-secondary dark:text-text-secondary-dark group-hover:text-text-primary dark:group-hover:text-text-primary-dark text-[11px] line-clamp-2 leading-tight flex-grow">{sql}</Typography>
-                                    </div>
-                                ))
-                            )}
-                        </div>
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-};

package/src/components/SQLEditor/SchemaBrowser.tsx

@@ -1,168 +0,0 @@
-
-import React, { useState } from "react";
-import {
-    Button,
-    CircularProgress,
-    cls,
-    CopyIcon,
-    defaultBorderMixin,
-    IconButton,
-    iconSize,
-    Menu,
-    MenuItem,
-    MoreVerticalIcon,
-    RefreshCwIcon,
-    Typography
-} from "@rebasepro/ui";
-import type { TableInfo } from "./sql_editor_types";
-import { ErrorView, useTranslation } from "@rebasepro/app";
-
-export const SchemaBrowser = ({
-    onTableClick,
-    schemas,
-    isSchemaLoading,
-    schemaError,
-    onRetrySchema
-}: {
-    onTableClick?: (tableName: string) => void,
-    schemas: Record<string, TableInfo[]>,
-    isSchemaLoading: boolean,
-    schemaError: string | null,
-    onRetrySchema: () => void
-}) => {
-    const [expandedSchemas, setExpandedSchemas] = useState<Record<string, boolean>>({ public: true });
-    const [expandedTables, setExpandedTables] = useState<Record<string, boolean>>({});
-    const { t } = useTranslation();
-
-    if (isSchemaLoading) return <div className="p-4 flex justify-center"><CircularProgress size="small"/></div>;
-    if (schemaError) return (
-        <div className="p-2">
-            <ErrorView error={schemaError} onRetry={onRetrySchema}/>
-        </div>
-    );
-
-    return (
-        <div className="flex flex-col h-full overflow-hidden">
-            <div className={cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin)}>
-                <Typography variant="caption" className="font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">{t("studio_schema_tables")}</Typography>
-                <IconButton size="small" onClick={onRetrySchema} title="Refresh schema">
-                    <RefreshCwIcon size={iconSize.smallest}/>
-                </IconButton>
-            </div>
-
-            <div className="flex-grow overflow-y-auto no-scrollbar p-1">
-                {Object.keys(schemas).length === 0 ? (
-                    <div className="p-4 text-center">
-                        <Typography variant="caption" className="text-text-disabled dark:text-text-disabled-dark italic">{t("studio_schema_no_tables")}</Typography>
-                    </div>
-                ) : Object.entries(schemas).map(([schemaName, tables]) => (
-                    <div key={schemaName} className="mb-2">
-                        <div
-                            className="flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-900 rounded transition-colors"
-                            onClick={() => setExpandedSchemas(prev => ({ ...prev,
-[schemaName]: !prev[schemaName] }))}
-                        >
-                            <svg className={cls("w-3 h-3 mr-1 transition-transform", expandedSchemas[schemaName] ? "rotate-90" : "")} fill="currentColor" viewBox="0 0 20 20"><path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/></svg>
-                            <Typography variant="body2" className="text-text-primary dark:text-text-primary-dark font-medium text-xs truncate flex-grow">{schemaName}</Typography>
-                        </div>
-
-                        {expandedSchemas[schemaName] && (
-                            <div className="ml-3 mt-1 space-y-1">
-                                {tables.map(table => (
-                                    <div key={table.tableName}>
-                                        <div
-                                            className="flex items-center p-1 cursor-pointer hover:bg-surface-100 dark:hover:bg-surface-900 rounded transition-colors group relative"
-                                            onClick={() => setExpandedTables(prev => ({ ...prev,
-[`${schemaName}.${table.tableName}`]: !prev[`${schemaName}.${table.tableName}`] }))}
-                                        >
-                                            <svg className={cls("w-3 h-3 mr-1 transition-transform shrink-0", expandedTables[`${schemaName}.${table.tableName}`] ? "rotate-90" : "")} fill="currentColor" viewBox="0 0 20 20"><path d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"/></svg>
-                                            <svg className="w-3.5 h-3.5 mr-1 shrink-0 text-text-disabled dark:text-text-disabled-dark" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
-                                            <Typography variant="body2" className="text-text-secondary dark:text-text-secondary-dark text-xs truncate flex-1 min-w-0">{table.tableName}</Typography>
-
-                                            <div className="flex opacity-0 group-hover:opacity-100 focus-within:opacity-100 absolute right-1 items-center bg-surface-100 dark:bg-surface-800 px-1 gap-1 rounded transition-opacity">
-                                                <IconButton
-                                                    size="small"
-                                                    onClick={(e) => {
-                                                        e.stopPropagation();
-                                                        navigator.clipboard.writeText(table.tableName);
-                                                    }}
-                                                    title="Copy table name"
-                                                >
-                                                    <CopyIcon size={iconSize.small}/>
-                                                </IconButton>
-
-                                                <Menu
-                                                    trigger={
-                                                        <IconButton
-                                                            size={"small"}
-                                                            onClick={(e) => e.stopPropagation()}
-                                                            title="Generate SQL templates"
-                                                        >
-                                                            <MoreVerticalIcon size={iconSize.small}/>
-                                                        </IconButton>
-                                                    }
-                                                >
-                                                    <MenuItem dense className="text-xs" onClick={(e: React.MouseEvent) => {
-                                                        e.stopPropagation();
-                                                        onTableClick?.(`SELECT * FROM ${schemaName !== "public" ? `${schemaName}.` : ""}${table.tableName} LIMIT 100;`);
-                                                    }}>SELECT (Top 100)</MenuItem>
-                                                    <MenuItem dense className="text-xs" onClick={(e: React.MouseEvent) => {
-                                                        e.stopPropagation();
-                                                        onTableClick?.(`SELECT \n  ${table.columns.map(c => c.name).join(",\n  ")}\nFROM ${schemaName !== "public" ? `${schemaName}.` : ""}${table.tableName};`);
-                                                    }}>SELECT (All columns)</MenuItem>
-                                                    <MenuItem dense className="text-xs" onClick={(e: React.MouseEvent) => {
-                                                        e.stopPropagation();
-                                                        onTableClick?.(`INSERT INTO ${schemaName !== "public" ? `${schemaName}.` : ""}${table.tableName} (\n  ${table.columns.map(c => c.name).join(",\n  ")}\n) VALUES (\n  ${table.columns.map(() => "?").join(",\n  ")}\n);`);
-                                                    }}>INSERT statement</MenuItem>
-                                                    <MenuItem dense className="text-xs" onClick={(e: React.MouseEvent) => {
-                                                        e.stopPropagation();
-                                                        onTableClick?.(`UPDATE ${schemaName !== "public" ? `${schemaName}.` : ""}${table.tableName} \nSET \n  ${table.columns.map(c => `${c.name} = ?`).join(",\n  ")}\nWHERE id = ?;`);
-                                                    }}>UPDATE statement</MenuItem>
-                                                </Menu>
-
-                                                <Button
-                                                    variant="text"
-                                                    size="small"
-                                                    className="text-[10px] text-primary uppercase min-h-0 py-0.5 px-1 font-medium ml-1 flex-shrink-0 leading-none h-[22px]"
-                                                    onClick={(e) => {
-                                                        e.stopPropagation();
-                                                        onTableClick?.(`SELECT * FROM ${schemaName !== "public" ? `${schemaName}.` : ""}${table.tableName} LIMIT 100;`);
-                                                    }}
-                                                >
-                                                    SELECT
-                                                </Button>
-                                            </div>
-                                        </div>
-
-                                        {expandedTables[`${schemaName}.${table.tableName}`] && (
-                                            <div className={cls("ml-5 mt-1 space-y-0.5 border-l", defaultBorderMixin)}>
-                                                {table.columns.map(col => (
-                                                    <div key={col.name} className="flex items-center p-1 group pl-2 hover:bg-surface-50 dark:hover:bg-surface-900 rounded-r relative min-h-[28px]">
-                                                        <svg className="w-3 h-3 mr-1.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={1.5} d="M9 4.5v15m6-15v15m-10.5-1.5h15c.621 0 1.125-.504 1.125-1.125V5.625c0-.621-.504-1.125-1.125-1.125h-15c-.621 0-1.125.504-1.125 1.125v12.75c0 .621.504 1.125 1.125 1.125Z"/></svg>
-                                                        <Typography variant="caption" className="text-text-primary dark:text-text-primary-dark text-[11px] truncate flex-grow mr-2">{col.name}</Typography>
-                                                        <Typography variant="caption" className="text-text-disabled dark:text-text-disabled-dark text-[9px] truncate mr-1 uppercase shrink-0" title={col.dataType}>{col.dataType}</Typography>
-                                                        <IconButton
-                                                            size="smallest"
-                                                            className="opacity-0 group-hover:opacity-100 absolute right-1 bg-surface-50 dark:bg-surface-800 transition-colors pointer-events-auto"
-                                                            onClick={(e) => {
-                                                                e.stopPropagation();
-                                                                navigator.clipboard.writeText(col.name);
-                                                            }}
-                                                            title="Copy column name"
-                                                        >
-                                                            <CopyIcon size={iconSize.smallest}/>
-                                                        </IconButton>
-                                                    </div>
-                                                ))}
-                                            </div>
-                                        )}
-                                    </div>
-                                ))}
-                            </div>
-                        )}
-                    </div>
-                ))}
-            </div>
-        </div>
-    );
-};

package/src/components/SQLEditor/sql_editor_types.ts

@@ -1,18 +0,0 @@
-/**
- * Shapes describing the introspected schema the SQL editor works against.
- * They live here rather than in SQLEditor.tsx because the sidebar, the schema
- * browser and utils/sql_utils all need them, and importing them from the
- * component would close a cycle back through it.
- */
-
-export interface SQLEditorColumnInfo {
-    name: string;
-    dataType: string;
-    isPrimaryKey: boolean;
-}
-
-export interface TableInfo {
-    schemaName: string;
-    tableName: string;
-    columns: SQLEditorColumnInfo[];
-}

package/src/components/SchemaVisualizer/RelationEdge.tsx

@@ -1,102 +0,0 @@
-import React, { memo } from "react";
-import { BaseEdge, getSmoothStepPath, EdgeLabelRenderer } from "@xyflow/react";
-import type { EdgeProps } from "@xyflow/react";
-import { cls } from "@rebasepro/ui";
-import type { RelationEdgeData } from "./schema-visualizer.utils";
-
-/**
- * Custom React Flow edge that renders relations with style variations
- * based on cardinality and direction.
- *
- * - Owning one-to-one: solid, primary color
- * - Many-to-many (junction): solid, violet
- * - Inverse: dashed, muted
- * - Join path: dotted, muted
- */
-const RelationEdgeInner = ({
-    id,
-    sourceX,
-    sourceY,
-    targetX,
-    targetY,
-    sourcePosition,
-    targetPosition,
-    data,
-    selected
-}: EdgeProps) => {
-    const edgeData = data as RelationEdgeData | undefined;
-
-    const [edgePath, labelX, labelY] = getSmoothStepPath({
-        sourceX,
-        sourceY,
-        sourcePosition,
-        targetX,
-        targetY,
-        targetPosition,
-        borderRadius: 8
-    });
-
-    const isInverse = edgeData?.direction === "inverse";
-    const isJoinPath = edgeData?.hasJoinPath;
-    const isJunction = edgeData?.hasJunction;
-
-    // Determine stroke style
-    let strokeColor = "var(--rf-edge-stroke, #94a3b8)";
-    let strokeDasharray: string | undefined;
-    let strokeWidth = 1.5;
-
-    if (selected) {
-        strokeColor = "var(--rf-edge-stroke-selected, #6366f1)";
-        strokeWidth = 2.5;
-    } else if (isJunction) {
-        strokeColor = "#8b5cf6"; // violet
-    } else if (isInverse) {
-        strokeDasharray = "6 3";
-        strokeColor = "#94a3b8";
-    } else if (isJoinPath) {
-        strokeDasharray = "3 3";
-        strokeColor = "#94a3b8";
-    } else {
-        strokeColor = "#6366f1"; // primary/indigo
-    }
-
-    return (
-        <>
-            <BaseEdge
-                id={id}
-                path={edgePath}
-                style={{
-                    stroke: strokeColor,
-                    strokeWidth,
-                    strokeDasharray
-                }}
-            />
-            {edgeData?.label && (
-                <EdgeLabelRenderer>
-                    <div
-                        style={{
-                            position: "absolute",
-                            transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
-                            pointerEvents: "all"
-                        }}
-                        className={cls(
-                            "px-1.5 py-0.5 rounded text-[9px] font-mono font-semibold leading-none",
-                            "bg-white dark:bg-surface-900 border",
-                            selected
-                                ? "border-primary text-primary"
-                                : isJunction
-                                  ? "border-violet-200 dark:border-violet-800 text-violet-600 dark:text-violet-400"
-                                  : isInverse || isJoinPath
-                                    ? "border-surface-200 dark:border-surface-700 text-text-disabled dark:text-text-disabled-dark"
-                                    : "border-primary/30 dark:border-primary/30 text-primary"
-                        )}
-                    >
-                        {edgeData.label}
-                    </div>
-                </EdgeLabelRenderer>
-            )}
-        </>
-    );
-};
-
-export const RelationEdge = memo(RelationEdgeInner);