Merge pull request #752 from bruin-data/improve/render-vars-in-ingestr

Improve/render vars in ingestr

Author: DjamilaBaroudi

CHANGELOG.md

@@ -1,4 +1,7 @@
 # Changelog
+## [0.79.9] - [2026-04-29]
+- Improved Ingestr asset display with edit/view mode toggle using "Edit"/"Done" text link for cleaner UI.
+
 ## [0.79.8] - [2026-04-23]
 - Fixed Bruin panel not updating on file save in latest VS Code versions on Windows due to path comparison issues.
 

README.md

@@ -70,11 +70,11 @@ Bruin is a unified analytics platform that enables data professionals to work en
 ## Release Notes
 
 ### Recent Update
+- **0.79.9**: Improved Ingestr asset display with edit/view mode toggle.
 - **0.79.8**: Fixed Bruin panel not updating on file save in latest VS Code versions on Windows due to path comparison issues.
 - **0.79.7**: Fixed reset date button for continuous pipelines; improved tooltip to clarify behavior.
 - **0.79.6**: Fixed "Fill from Query" command failing due to unsupported `--environment` flag.
 - **0.79.5**: Added interval modifiers preview tooltip on the checkbox.
 - **0.79.4**: Fixed "Fill from DB" to use selected environment; fixed start date input on full refresh.
-- **0.79.3**: Added ability to select and run SQL text directly in Query Preview.
 
 For a full changelog, see Bruin Extension [Changelog](https://github.com/bruin-data/bruin-vscode/blob/main/CHANGELOG.md).

package.json

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

src/bruin/bruinRender.ts

@@ -64,13 +64,12 @@ export class BruinRender extends BruinCommand {
     }
 
     const isTaskYml = filePath.endsWith('.task.yml') || filePath.endsWith('.task.yaml');
-    
+
     if ((isBruinAsset || isBruinPipeline || (isBruinYaml && !isTaskYml))) {
       BruinPanel?.postMessage("render-message", {
         status: "bruin-asset-alert",
         message: "-- Python, Yaml, or Pipeline BRUIN asset detected --",
       });
-      console.log("Python, Yaml, or Pipeline BRUIN asset detected");
       return;
     }
 
@@ -124,7 +123,7 @@ export class BruinRender extends BruinCommand {
     }
     return JSON.stringify({ error: String(error) });
   }
-  
+
   private async isBruinPipeline(filePath: string): Promise<boolean> {
     return await isBruinPipeline(filePath);
   }

src/extension/commands/parseAssetCommand.ts

@@ -6,6 +6,8 @@ import { BruinLineageInternalParse } from "../../bruin/bruinFlowLineage";
 import { BruinPanel } from "../../panels/BruinPanel";
 import { EnhancedPipelineData, PipelineColumnInfo } from "../../types";
 import { getCurrentPipelinePath } from "../../bruin/bruinUtils";
+import { BruinRender } from "../../bruin/bruinRender";
+import * as vscode from "vscode";
 import * as path from "path";
 import * as fs from "fs";
 
@@ -74,10 +76,20 @@ export const patchAssetCommand = async (body: object, lastRenderedDocumentUri: U
      ""
   );
   const success = await patched.patchAsset(body, lastRenderedDocumentUri.fsPath);
-  
+
   // After successful patch, re-parse the asset to update the webview
   if (success) {
     await parseAssetCommand(lastRenderedDocumentUri);
+
+    // For ingestr assets, also re-render to get updated rendered parameters
+    const filePath = lastRenderedDocumentUri.fsPath;
+    if (filePath.endsWith('.asset.yml') || filePath.endsWith('.asset.yaml')) {
+      const renderer = new BruinRender(
+        getBruinExecutablePath(),
+        vscode.workspace.workspaceFolders?.[0]?.uri.fsPath || ""
+      );
+      renderer.render(filePath);
+    }
   }
 };
 

src/ui-test/ingestr-asset-ui-integration.test.ts

@@ -73,21 +73,24 @@ const ensureSectionExpanded = async (driver: WebDriver): Promise<void> => {
 const startEditingField = async (driver: WebDriver, fieldId: string): Promise<void> => {
   // Ensure section is expanded first
   await ensureSectionExpanded(driver);
-  
+
+  // Enter edit mode first (new UI flow)
+  await enterEditMode(driver);
+
   const field = await findElementWithRetry(driver, By.id(fieldId), 10000);
-  
+
   // Ensure field is visible and clickable
   assert(await field.isDisplayed(), `Field ${fieldId} should be visible`);
   assert(await field.isEnabled(), `Field ${fieldId} should be enabled`);
-  
+
   // Scroll into view if needed (Windows compatibility)
   await driver.executeScript("arguments[0].scrollIntoView(true);", field);
   await sleep(500);
-  
+
   // Click the field
   await field.click();
-  console.log(`Clicked ${fieldId}, waiting for edit mode...`);
-  
+  console.log(`Clicked ${fieldId}, waiting for input...`);
+
   // Increased wait time for Windows compatibility - Vue reactivity needs time
   await sleep(2000);
 };
@@ -146,28 +149,81 @@ const testDropdownEditing = async (driver: WebDriver, fieldId: string, selectId:
   await exitEditMode(driver);
 };
 
+// Helper function to enter edit mode by clicking the Edit button
+const enterEditMode = async (driver: WebDriver): Promise<void> => {
+  console.log("Entering edit mode...");
+
+  // Find and click the Edit button in the header
+  const editButtons = await driver.findElements(By.css('#ingestr-header button'));
+  for (const button of editButtons) {
+    const text = await button.getText();
+    if (text === 'Edit') {
+      await button.click();
+      await sleep(1000);
+      console.log("✓ Clicked Edit button");
+      return;
+    }
+  }
+
+  // Fallback: try finding button by text content
+  const allButtons = await driver.findElements(By.tagName('button'));
+  for (const button of allButtons) {
+    try {
+      const text = await button.getText();
+      if (text === 'Edit') {
+        await button.click();
+        await sleep(1000);
+        console.log("✓ Clicked Edit button (fallback)");
+        return;
+      }
+    } catch (e) {
+      // Button might not be visible
+    }
+  }
+
+  console.log("⚠️ Edit button not found - might already be in edit mode");
+};
+
+// Helper function to exit edit mode by clicking the Done button
+const exitEditModeWithButton = async (driver: WebDriver): Promise<void> => {
+  console.log("Exiting edit mode...");
+
+  const buttons = await driver.findElements(By.css('#ingestr-header button'));
+  for (const button of buttons) {
+    const text = await button.getText();
+    if (text === 'Done') {
+      await button.click();
+      await sleep(1000);
+      console.log("✓ Clicked Done button");
+      return;
+    }
+  }
+
+  console.log("⚠️ Done button not found");
+};
+
 // Helper function to wait for the Ingestr component to be fully loaded
 const waitForIngestrComponent = async (driver: WebDriver): Promise<void> => {
   console.log("Waiting for Ingestr component to load...");
-  
+
   // Wait for the main container
   await driver.wait(until.elementLocated(By.id("ingestr-asset-display")), 15000);
   console.log("✓ Ingestr asset display container found");
-  
+
   // Wait for the section
   await driver.wait(until.elementLocated(By.id("ingestr-section")), 10000);
   console.log("✓ Ingestr section found");
-  
+
   // Wait for the header
   await driver.wait(until.elementLocated(By.id("ingestr-header")), 10000);
   console.log("✓ Ingestr header found");
-  
+
   // Ensure section is expanded
   await ensureSectionExpanded(driver);
-  
-  // Wait for at least one field to be present
-  await driver.wait(until.elementLocated(By.id("source-connection-field")), 10000);
-  console.log("✓ Ingestr fields are loaded");
+
+  // Wait for ingestr content to be present (rendered view)
+  await driver.wait(until.elementLocated(By.id("ingestr-content")), 10000);
+  console.log("✓ Ingestr content is loaded");
 };
 
 describe("Ingestr Asset Display Integration Tests", function () {
@@ -657,8 +713,14 @@ describe("Ingestr Asset Display Integration Tests", function () {
 
   describe("Required Fields Display", function () {
     before(async function () {
-      // Ensure section is expanded once for all tests in this group
+      // Ensure section is expanded and enter edit mode for field tests
       await ensureSectionExpanded(driver);
+      await enterEditMode(driver);
+    });
+
+    after(async function () {
+      // Exit edit mode after tests
+      await exitEditModeWithButton(driver);
     });
 
     it("should display source connection field with required indicator", async function () {
@@ -715,8 +777,14 @@ describe("Ingestr Asset Display Integration Tests", function () {
 
   describe("Optional Fields Display", function () {
     before(async function () {
-      // Ensure section is expanded once for all tests in this group
+      // Ensure section is expanded and enter edit mode for field tests
       await ensureSectionExpanded(driver);
+      await enterEditMode(driver);
+    });
+
+    after(async function () {
+      // Exit edit mode after tests
+      await exitEditModeWithButton(driver);
     });
 
     it("should display incremental strategy field without required indicator", async function () {
@@ -756,8 +824,14 @@ describe("Ingestr Asset Display Integration Tests", function () {
 
   describe("Interactive Functionality", function () {
     before(async function () {
-      // Ensure section is expanded once for all tests in this group
+      // Ensure section is expanded and enter edit mode for field tests
       await ensureSectionExpanded(driver);
+      await enterEditMode(driver);
+    });
+
+    after(async function () {
+      // Exit edit mode after tests
+      await exitEditModeWithButton(driver);
     });
 
     it("should be able to toggle section visibility", async function () {
@@ -817,8 +891,14 @@ describe("Ingestr Asset Display Integration Tests", function () {
 
   describe("Field Editing Functionality", function () {
     before(async function () {
-      // Ensure section is expanded once for all tests in this group
+      // Ensure section is expanded and enter edit mode for field tests
       await ensureSectionExpanded(driver);
+      await enterEditMode(driver);
+    });
+
+    after(async function () {
+      // Exit edit mode after tests
+      await exitEditModeWithButton(driver);
     });
 
     it("should allow editing source connection field", async function () {
@@ -998,16 +1078,27 @@ describe("Ingestr Asset Display Integration Tests", function () {
 
   describe("Dropdown Functionality", function () {
     before(async function () {
-      // Ensure section is expanded once for all tests in this group
+      // Ensure section is expanded and enter edit mode for field tests
       await ensureSectionExpanded(driver);
+      await enterEditMode(driver);
     });
 
+    after(async function () {
+      // Exit edit mode after tests
+      await exitEditModeWithButton(driver);
+    });
   });
 
   describe("Field Validation States", function () {
     before(async function () {
-      // Ensure section is expanded once for all tests in this group
+      // Ensure section is expanded and enter edit mode for field tests
       await ensureSectionExpanded(driver);
+      await enterEditMode(driver);
+    });
+
+    after(async function () {
+      // Exit edit mode after tests
+      await exitEditModeWithButton(driver);
     });
 
     it("should show error styling for empty required fields", async function () {
@@ -1053,8 +1144,14 @@ describe("Ingestr Asset Display Integration Tests", function () {
 
   describe("Keyboard Interaction", function () {
     before(async function () {
-      // Ensure section is expanded once for all tests in this group
+      // Ensure section is expanded and enter edit mode for field tests
       await ensureSectionExpanded(driver);
+      await enterEditMode(driver);
+    });
+
+    after(async function () {
+      // Exit edit mode after tests
+      await exitEditModeWithButton(driver);
     });
 
     it("should handle ESC key to cancel editing", async function () {
@@ -1103,8 +1200,14 @@ describe("Ingestr Asset Display Integration Tests", function () {
 
   describe("Field Value Display", function () {
     before(async function () {
-      // Ensure section is expanded once for all tests in this group
+      // Ensure section is expanded and enter edit mode for field tests
       await ensureSectionExpanded(driver);
+      await enterEditMode(driver);
+    });
+
+    after(async function () {
+      // Exit edit mode after tests
+      await exitEditModeWithButton(driver);
     });
 
     it("should handle empty optional fields gracefully", async function () {

webview-ui/src/App.vue

@@ -379,7 +379,7 @@ const handleMessage = (event: MessageEvent) => {
       case "asset-metadata-message":
         const metadataResult = updateValue(message, "success");
         const metadataError = updateValue(message, "error");
-        
+
         if (metadataError) {
           assetMetadataError.value = typeof metadataError === 'string' ? metadataError : String(metadataError);
           assetMetadata.value = null;
@@ -411,11 +411,21 @@ const handleMessage = (event: MessageEvent) => {
         versionStatus.value = message.versionStatus;
         break;
       case "file-changed":
-        lastRenderedDocument.value = message.filePath;
-        // Clear any existing metadata when file changes to prevent stale data
-        assetMetadata.value = null;
-        assetMetadataError.value = null;
-        console.log("🔍 [App.vue] File changed - cleared existing metadata");
+        // Only clear metadata when file path actually changes (not just editor refocus)
+        const previousFilePath = lastRenderedDocument.value;
+        const newFilePath = message.filePath;
+        const fileActuallyChanged = normalizePath(previousFilePath) !== normalizePath(newFilePath);
+
+        lastRenderedDocument.value = newFilePath;
+
+        if (fileActuallyChanged) {
+          // Clear metadata only when switching to a different file
+          assetMetadata.value = null;
+          assetMetadataError.value = null;
+          console.log("🔍 [App.vue] File changed to different file - cleared existing metadata");
+        } else {
+          console.log("🔍 [App.vue] Same file refocused - keeping existing metadata");
+        }
         // Leave current content/tabs as-is for non-relevant files; simply exit settings-only
         settingsOnlyMode.value = false;
         // If current file is a .bruin.yml config, force Settings-only view (with Connections)