feat(vscode): rendered window is non-editable (#4591)

Author: benfdking

vscode/extension/src/commands/renderModel.ts

@@ -2,8 +2,12 @@ import * as vscode from 'vscode'
 import { LSPClient } from '../lsp/lsp'
 import { isErr } from '@bus/result'
 import { RenderModelEntry } from '../lsp/custom'
+import { RenderedModelProvider } from '../providers/renderedModelProvider'
 
-export function renderModel(lspClient?: LSPClient) {
+export function renderModel(
+  lspClient?: LSPClient,
+  renderedModelProvider?: RenderedModelProvider,
+) {
   return async () => {
     // Get the current active editor
     const activeEditor = vscode.window.activeTextEditor
@@ -62,29 +66,43 @@ export function renderModel(lspClient?: LSPClient) {
       selectedModel = result.value.models[0]
     }
 
-    // Create a new untitled document with the rendered SQL
-    const document = await vscode.workspace.openTextDocument({
-      language: 'sql',
-      content: selectedModel.rendered_query,
-    })
+    if (!renderedModelProvider) {
+      vscode.window.showErrorMessage('Rendered model provider not available')
+      return
+    }
+
+    // Store the rendered content and get a virtual URI
+    const uri = renderedModelProvider.storeRenderedModel(
+      selectedModel.name,
+      selectedModel.rendered_query,
+    )
+
+    // Open the virtual document
+    const document = await vscode.workspace.openTextDocument(uri)
 
     // Determine the view column for side-by-side display
-    let viewColumn: vscode.ViewColumn
-    if (activeEditor) {
-      // Open beside the current editor
-      viewColumn = activeEditor.viewColumn
-        ? activeEditor.viewColumn + 1
-        : vscode.ViewColumn.Two
-    } else {
-      // If no active editor, open in column two
-      viewColumn = vscode.ViewColumn.Two
+    // Find the rightmost column with an editor
+    let maxColumn = vscode.ViewColumn.One
+    for (const editor of vscode.window.visibleTextEditors) {
+      if (editor.viewColumn && editor.viewColumn > maxColumn) {
+        maxColumn = editor.viewColumn
+      }
     }
 
+    // Open in the next column after the rightmost editor
+    const viewColumn = maxColumn + 1
+
     // Open the document in the editor as a preview (preview: true is default)
     await vscode.window.showTextDocument(document, {
       viewColumn: viewColumn,
       preview: true,
       preserveFocus: false,
     })
+
+    // Execute "Keep Open" command to convert preview tab to permanent tab
+    await vscode.commands.executeCommand('workbench.action.keepEditor')
+
+    // Explicitly set the language mode to SQL for syntax highlighting
+    await vscode.languages.setTextDocumentLanguage(document, 'sql')
   }
 }

vscode/extension/src/extension.ts

@@ -22,6 +22,7 @@ import {
 } from './utilities/errors'
 import { selector, completionProvider } from './completion/completion'
 import { LineagePanel } from './webviews/lineagePanel'
+import { RenderedModelProvider } from './providers/renderedModelProvider'
 
 let lspClient: LSPClient | undefined
 
@@ -65,10 +66,20 @@ export async function activate(context: vscode.ExtensionContext) {
 
   lspClient = new LSPClient()
 
+  // Create and register the rendered model provider
+  const renderedModelProvider = new RenderedModelProvider()
+  context.subscriptions.push(
+    vscode.workspace.registerTextDocumentContentProvider(
+      RenderedModelProvider.getScheme(),
+      renderedModelProvider,
+    ),
+    renderedModelProvider,
+  )
+
   context.subscriptions.push(
     vscode.commands.registerCommand(
       'sqlmesh.renderModel',
-      renderModel(lspClient),
+      renderModel(lspClient, renderedModelProvider),
     ),
   )
 

vscode/extension/src/providers/renderedModelProvider.ts

@@ -0,0 +1,57 @@
+import * as vscode from 'vscode'
+
+/**
+ * Content provider for read-only rendered SQL models
+ */
+export class RenderedModelProvider
+  implements vscode.TextDocumentContentProvider
+{
+  private static readonly scheme = 'sqlmesh-rendered'
+
+  private renderedModels = new Map<string, string>()
+
+  // Event emitter for content changes
+  private _onDidChange = new vscode.EventEmitter<vscode.Uri>()
+  readonly onDidChange = this._onDidChange.event
+
+  /**
+   * Provide text content for a given URI
+   */
+  provideTextDocumentContent(uri: vscode.Uri): string {
+    const key = uri.toString()
+    return this.renderedModels.get(key) || ''
+  }
+
+  /**
+   * Store rendered model content and create a URI for it
+   */
+  storeRenderedModel(modelName: string, content: string): vscode.Uri {
+    const fileName = `${modelName} (rendered)`
+    // Add a timestamp to make the URI unique for each render
+    const timestamp = Date.now()
+    // Use vscode.Uri.from for proper URI construction
+    const uri = vscode.Uri.from({
+      scheme: RenderedModelProvider.scheme,
+      path: fileName,
+      fragment: timestamp.toString(),
+    })
+    this.renderedModels.set(uri.toString(), content)
+    this._onDidChange.fire(uri)
+    return uri
+  }
+
+  /**
+   * Get the URI scheme for rendered models
+   */
+  static getScheme(): string {
+    return this.scheme
+  }
+
+  /**
+   * Clean up old rendered models to prevent memory leaks
+   */
+  dispose() {
+    this.renderedModels.clear()
+    this._onDidChange.dispose()
+  }
+}

vscode/extension/tests/render.spec.ts

@@ -30,6 +30,7 @@ test('Render works correctly', async () => {
 
       // Check if the model is rendered by check if "`oi`.`order_id` AS `order_id`," is in the window
       await expect(window.locator('text="marketing"."customer_id" AS')).toBeVisible();
+      await expect(window.locator('text=sushi.customers (rendered)')).toBeVisible();
 
       await close();
     } finally {
@@ -63,9 +64,51 @@ test('Render works correctly with model without a description', async () => {
 
     // Check if the model is rendered correctly
     await expect(window.locator('text="orders"."id" AS "id",')).toBeVisible();
+    await expect(window.locator('text=sushi.latest_order (rendered)')).toBeVisible();
 
     await close();
   } finally {
     await fs.remove(tempDir);
   }
-});
+});
+
+test('Render works correctly with every rendered model opening a new tab', async () => {
+  const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), 'vscode-test-sushi-'));
+  await fs.copy(SUSHI_SOURCE_PATH, tempDir);
+
+  try {
+    const { window, close } = await startVSCode(tempDir);
+
+    // Wait for the models folder to be visible
+    await window.waitForSelector('text=models');
+    await window.getByRole('treeitem', { name: 'models', exact: true }).locator('a').click();
+    await window.getByRole('treeitem', { name: 'latest_order.sql', exact: true }).locator('a').click();
+    await window.waitForSelector('text=custom_full_with_custom_kind');
+    await window.waitForSelector('text=Loaded SQLMesh Context')
+
+    // Render the model
+    await window.keyboard.press(process.platform === 'darwin' ? 'Meta+Shift+P' : 'Control+Shift+P');
+    await window.keyboard.type('Render Model');
+    await window.keyboard.press('Enter');
+
+    // Check if the model is rendered correctly
+    await expect(window.locator('text=sushi.latest_order (rendered)')).toBeVisible();
+
+    // Open the customers model
+    await window.getByRole('treeitem', { name: 'customers.sql', exact: true }).locator('a').click();
+    await window.waitForSelector('text=grain');
+
+    // Render the customers model
+    await window.keyboard.press(process.platform === 'darwin' ? 'Meta+Shift+P' : 'Control+Shift+P');
+    await window.keyboard.type('Render Model');
+    await window.keyboard.press('Enter');
+
+    // Assert both tabs exist
+    await expect(window.locator('text=sushi.latest_order (rendered)')).toBeVisible();
+    await expect(window.locator('text=sushi.customers (rendered)')).toBeVisible();
+
+    await close();
+  } finally {
+    await fs.remove(tempDir);
+  }
+})