feat(vscode): add ability to turn on/off columns

Author: benfdking

vscode/extension/tests/lineage_settings.spec.ts

@@ -1,11 +1,11 @@
-import { test } from '@playwright/test'
+import { test, expect } from '@playwright/test'
 import path from 'path'
 import fs from 'fs-extra'
 import os from 'os'
 import { openLineageView, SUSHI_SOURCE_PATH } from './utils'
 import { startCodeServer, stopCodeServer } from './utils_code_server'
 
-test('Turn on and off show columns', async ({ page }) => {
+test('Settings button is visible in the lineage view', async ({ page }) => {
   const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), 'vscode-test-sushi-'))
   await fs.copy(SUSHI_SOURCE_PATH, tempDir)
 
@@ -34,7 +34,32 @@ test('Turn on and off show columns', async ({ page }) => {
     // Open lineage
     await openLineageView(page)
 
-    await page.locator('iframe >> nth=1 >> button').click()
+    const iframes = page.locator('iframe')
+    const iframeCount = await iframes.count()
+    let settingsCount = 0
+
+    for (let i = 0; i < iframeCount; i++) {
+      const iframe = iframes.nth(i)
+      const contentFrame = iframe.contentFrame()
+      if (contentFrame) {
+        const activeFrame = contentFrame.locator('#active-frame').contentFrame()
+        if (activeFrame) {
+          try {
+            await activeFrame
+              .getByRole('button', {
+                name: 'Settings',
+              })
+              .waitFor({ timeout: 1000 })
+            settingsCount++
+          } catch {
+            // Continue to next iframe if this one doesn't have the error
+            continue
+          }
+        }
+      }
+    }
+
+    expect(settingsCount).toBeGreaterThan(0)
   } finally {
     await stopCodeServer(context)
   }

vscode/react/src/components/graph/ModelNode.tsx

@@ -141,7 +141,10 @@ export default function ModelNode({
   const isModelExternal = nodeType === EnumLineageNodeModelType.external
   const isModelSeed = nodeType === EnumLineageNodeModelType.seed
   const isModelUnknown = nodeType === EnumLineageNodeModelType.unknown
-  const showColumns = nodeData.withColumns && isArrayNotEmpty(columns) && isFalse(hasHighlightedNodes)
+  const showColumns =
+    nodeData.withColumns &&
+    isArrayNotEmpty(columns) &&
+    isFalse(hasHighlightedNodes)
   const isActiveNode =
     selectedNodes.size > 0 || activeNodes.size > 0 || withConnected
       ? isSelected ||

vscode/react/src/components/graph/SettingsControl.tsx

@@ -1,6 +1,4 @@
-import {
-  Menu,
-} from '@headlessui/react'
+import { Menu } from '@headlessui/react'
 import { CheckIcon } from '@heroicons/react/24/outline'
 import { CogIcon } from '@/components/graph/CogIcon'
 import clsx from 'clsx'