ci: turn on and fix ui-style and test-vscode stages (#6054)

Signed-off-by: Adegbite Ayoade <tripleaceme@gmail.com>

Author: tripleaceme

.devcontainer/devcontainer.json

@@ -11,10 +11,7 @@
   "postCreateCommand": "bash .devcontainer/post-create-command.sh",
   "customizations": {
     "vscode": {
-      "extensions": [
-        "ms-python.python",
-        "ms-python.vscode-pylance"
-      ]
+      "extensions": ["ms-python.python", "ms-python.vscode-pylance"]
     }
   },
   "remoteUser": "vscode"

.github/workflows/pr.yaml

@@ -16,6 +16,7 @@ jobs:
     outputs:
       python: ${{ steps.filter.outputs.python }}
       client: ${{ steps.filter.outputs.client }}
+      vscode: ${{ steps.filter.outputs.vscode }}
       ci: ${{ steps.filter.outputs.ci }}
     steps:
       - uses: actions/checkout@v7
@@ -34,6 +35,8 @@ jobs:
               - 'pyproject.toml'
             client:
               - 'web/client/**'
+            vscode:
+              - 'vscode/**'
             ci:
               - '.github/**'
               - 'Makefile'
@@ -188,9 +191,10 @@ jobs:
 
   ui-style:
     needs: [changes]
-    if: false
-      # needs.changes.outputs.client == 'true' || needs.changes.outputs.ci ==
-      # 'true' || github.ref == 'refs/heads/main'
+    if:
+      needs.changes.outputs.client == 'true' || needs.changes.outputs.vscode ==
+      'true' || needs.changes.outputs.ci == 'true' || github.ref ==
+      'refs/heads/main'
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v7
@@ -252,7 +256,17 @@ jobs:
       fail-fast: false
       matrix:
         engine:
-          [duckdb, postgres, mysql, mssql, trino, spark, clickhouse, risingwave, starrocks]
+          [
+            duckdb,
+            postgres,
+            mysql,
+            mssql,
+            trino,
+            spark,
+            clickhouse,
+            risingwave,
+            starrocks,
+          ]
     env:
       PYTEST_XDIST_AUTO_NUM_WORKERS: 2
       SQLMESH__DISABLE_ANONYMIZED_ANALYTICS: '1'
@@ -393,10 +407,13 @@ jobs:
           retention-days: 7
 
   test-vscode:
+    needs: changes
+    if:
+      needs.changes.outputs.vscode == 'true' || needs.changes.outputs.ci ==
+      'true' || github.ref == 'refs/heads/main'
     env:
       PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: 1
     runs-on: ubuntu-latest
-    if: false
     steps:
       - uses: actions/checkout@v7
       - uses: actions/setup-node@v7
@@ -457,7 +474,19 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        dbt-version: ['1.3', '1.4', '1.5', '1.6', '1.7', '1.8', '1.9', '1.10', '1.11', '1.12']
+        dbt-version:
+          [
+            '1.3',
+            '1.4',
+            '1.5',
+            '1.6',
+            '1.7',
+            '1.8',
+            '1.9',
+            '1.10',
+            '1.11',
+            '1.12',
+          ]
     steps:
       - uses: actions/checkout@v7
       - name: Set up Python

vscode/extension/tests/fixtures.ts

@@ -60,5 +60,5 @@ export const test = base.extend<
   ],
 })
 
-// Export expect and Page from Playwright for convenience
-export { expect, Page } from '@playwright/test'
+// Export expect and commonly used Playwright types for convenience
+export { expect, FrameLocator, Page } from '@playwright/test'

vscode/extension/tests/lineage_settings.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect } from './fixtures'
-import type { FrameLocator, Page } from '@playwright/test'
+import type { FrameLocator, Page } from './fixtures'
 import fs from 'fs-extra'
 import {
   openLineageView,

web/client/src/library/components/graph/ModelNode.tsx

@@ -198,7 +198,11 @@ export default function ModelNode({
       style={{
         width: '100%',
         ...(tagColor != null
-          ? { borderColor: tagColor, backgroundColor: tagColor, color: tagColor }
+          ? {
+              borderColor: tagColor,
+              backgroundColor: tagColor,
+              color: tagColor,
+            }
           : {}),
       }}
     >
@@ -246,7 +250,10 @@ export default function ModelNode({
         />
       </div>
       {showColumns && (
-        <div ref={columnsWrapperRef} style={{ height: '10rem', overflow: 'hidden' }}>
+        <div
+          ref={columnsWrapperRef}
+          style={{ height: '10rem', overflow: 'hidden' }}
+        >
           <ModelColumns
             className="nowheel rounded-b-lg bg-theme-lighter text-xs h-full"
             nodeId={id}

web/client/src/library/components/graph/help.ts

@@ -175,7 +175,10 @@ function getNodeMap({
     const model = models.get(modelName)
     const tagsStr = model?.details?.tags
     const tags = tagsStr
-      ? tagsStr.split(',').map(t => t.trim()).filter(Boolean)
+      ? tagsStr
+          .split(',')
+          .map(t => t.trim())
+          .filter(Boolean)
       : undefined
     const node = createGraphNode(modelName, {
       label: model?.displayName ?? modelName,