Merge pull request #741 from bruin-data/feature/add-preview-query-in-side-panel

  Add Preview selection for SQL editor

Author: DjamilaBaroudi

CHANGELOG.md

@@ -1,4 +1,7 @@
 # Changelog
+## [0.79.3] - [2026-03-18]
+- Added ability to select text in the SQL editor and run the selection directly in Query Preview for debugging.
+
 ## [0.79.2] - [2026-03-18]
 - Added cancel button for export query operations, allowing users to stop long-running exports.
 

package-lock.json

@@ -2,7 +2,7 @@
   "name": "bruin",
   "displayName": "Bruin",
   "description": "Manage your Bruin data assets from within VS Code.",
-  "version": "0.79.2",
+  "version": "0.79.3",
   "engines": {
     "vscode": "^1.87.0"
   },

package.json

@@ -628,6 +628,47 @@ export class BruinPanel {
             }
             break;
 
+          case "bruin.runSelectedInPreview":
+            trackEvent("Command Executed", { command: "runSelectedInPreview", source: "extension" });
+            try {
+              const selectedQuery = message.payload?.query;
+              if (!selectedQuery) {
+                vscode.window.showWarningMessage("No text selected to run");
+                break;
+              }
+
+              const activeTabId = QueryPreviewPanel.getActiveTabId();
+
+              // Clear previous state for this tab
+              QueryPreviewPanel.clearTabState(activeTabId);
+
+              // Set the query for this tab
+              QueryPreviewPanel.setLastExecutedQuery(selectedQuery);
+              QueryPreviewPanel.setTabQuery(activeTabId, selectedQuery);
+
+              // Show loading state
+              QueryPreviewPanel.postMessage("query-output-message", {
+                status: "loading",
+                message: true,
+                tabId: activeTabId,
+              });
+
+              // Focus the Query Preview panel
+              await QueryPreviewPanel.focusSafely();
+
+              // Execute the query
+              QueryPreviewPanel.postMessage("bruin.executePreviewQuery", {
+                status: "success",
+                message: "",
+                tabId: activeTabId,
+                extractedQuery: selectedQuery
+              });
+            } catch (error) {
+              const errorMessage = error instanceof Error ? error.message : String(error);
+              vscode.window.showErrorMessage(`Error running selection in preview: ${errorMessage}`);
+            }
+            break;
+
           case "bruin.validate":
             trackEvent("Command Executed", { command: "validate", source: "extension" });
             if (!this._lastRenderedDocumentUri) {

src/panels/BruinPanel.ts

@@ -17,6 +17,14 @@
         >
           DDL
         </button>
+        <span v-if="selectedText" class="separator">|</span>
+        <button
+          v-if="selectedText"
+          @click="runSelectedText"
+          class="preview-selection-btn"
+        >
+          Preview selection
+        </button>
       </div>
       <div class="flex items-center">
         <!-- BigQuery Cost Estimate (success and error) -->
@@ -100,7 +108,7 @@
       </div>
     </div>
     <!-- Code Editor -->
-    <div id="sql-editor" class="code-container pb-0">
+    <div id="sql-editor" class="code-container pb-0" @mouseup="handleTextSelection">
       <div class="copy-button-wrapper">
         <vscode-button
           @click="copyToClipboard"
@@ -176,6 +184,7 @@ const clickOpened = ref(false);
 const showCostError = ref(false);
 const isErrorSticky = ref(false);
 const errorIcon = ref(null);
+const selectedText = ref('');
 
 const vClickOutside = {
   mounted(el, binding) {
@@ -199,6 +208,36 @@ function copyToClipboard() {
   }, 2000);
 }
 
+// Handle text selection in the code editor
+function handleTextSelection() {
+  const selection = window.getSelection();
+  let text = selection?.toString().trim() || '';
+
+  // Remove line numbers that get included in selection
+  // Line numbers appear as standalone numbers on their own line when selected
+  if (text) {
+    text = text
+      .split('\n')
+      .filter(line => !/^\d+$/.test(line.trim())) // Remove lines that are just numbers (line numbers)
+      .join('\n')
+      .trim();
+  }
+
+  selectedText.value = text;
+}
+
+// Run selected text in Query Preview panel
+function runSelectedText() {
+  if (!selectedText.value) return;
+
+  vscode.postMessage({
+    command: 'bruin.runSelectedInPreview',
+    payload: {
+      query: selectedText.value
+    }
+  });
+}
+
 const lineHeight = 18;
 const editorPadding = 12;
 const minEditorHeight = `${lineHeight * 2}px`;
@@ -402,14 +441,25 @@ const handleMessage = (event) => {
   }
 };
 
+// Handle selection change to clear when deselected
+function handleSelectionChange() {
+  const selection = window.getSelection();
+  const text = selection?.toString().trim() || '';
+  if (!text) {
+    selectedText.value = '';
+  }
+}
+
 // Setup message listeners
 onMounted(() => {
   window.addEventListener('message', handleMessage);
+  document.addEventListener('selectionchange', handleSelectionChange);
   console.log('SqlEditor: Message listener added');
 });
 
 onBeforeUnmount(() => {
   window.removeEventListener('message', handleMessage);
+  document.removeEventListener('selectionchange', handleSelectionChange);
   console.log('SqlEditor: Message listener removed');
 });
 
@@ -459,6 +509,26 @@ watch(
   background-color: var(--vscode-list-hoverBackground);
 }
 
+.separator {
+  color: var(--vscode-disabledForeground);
+  font-size: 12px;
+  margin: 0 4px;
+}
+
+.preview-selection-btn {
+  background: transparent;
+  border: none;
+  color: var(--vscode-textLink-foreground);
+  font-size: 12px;
+  font-family: var(--vscode-font-family);
+  cursor: pointer;
+  padding: 4px 0;
+}
+
+.preview-selection-btn:hover {
+  color: var(--vscode-textLink-activeForeground);
+}
+
 #sql-editor,
 .python-content {
   background-color: var(--vscode-sideBar-background);