Merge pull request #7 from brianwcook/fix/node18-compatibility

🔧 Fix Node.js 18 compatibility in CI workflow.
fixed all githubs actions tests

Author: brianwcook

.eslintrc.js

@@ -24,10 +24,22 @@ jobs:
           node-version: ${{ matrix.node-version }}
           cache: 'yarn'
 
-      - name: Install dependencies
+      - name: Install dependencies (Node.js 18.x - ignore engines)
+        if: matrix.node-version == '18.x'
+        run: yarn install --frozen-lockfile --ignore-engines
+      
+      - name: Install dependencies (Node.js 20.x - strict engines)
+        if: matrix.node-version == '20.x'
         run: yarn install --frozen-lockfile
 
-      - name: Lint code
+      - name: Lint renderer package only (Node.js 18.x)
+        if: matrix.node-version == '18.x'
+        run: |
+          cd tekton-pipeline-renderer
+          npm run lint
+      
+      - name: Lint all packages (Node.js 20.x)
+        if: matrix.node-version == '20.x'
         run: npm run lint
 
       - name: Run renderer tests
@@ -36,12 +48,13 @@ jobs:
       - name: Build renderer package
         run: npm run build:renderer
 
-      - name: Propagate changes to VSCode extension
+      - name: Propagate changes to VSCode extension (Node.js 20+ only)
+        if: matrix.node-version == '20.x'
         run: npm run propagate
 
       - name: Run VSCode extension tests (Node.js 20+ only)
         if: matrix.node-version == '20.x'
-        run: npm run test:vscode
+        run: xvfb-run -a npm run test:vscode
 
       - name: Build VSCode extension (Node.js 20+ only)
         if: matrix.node-version == '20.x'
@@ -57,23 +70,23 @@ jobs:
     if: github.ref == 'refs/heads/main'
 
     steps:
-    - name: Checkout repository
-      uses: actions/checkout@v4
-    
-    - name: Use Node.js 18.x
-      uses: actions/setup-node@v4
-      with:
-        node-version: 18.x
-        cache: 'yarn'
-    
-    - name: Install dependencies
-      run: yarn install --frozen-lockfile
-    
-    - name: Run complete release check
-      run: npm run release:check
-    
-    - name: Check if ready for release
-      run: |
-        echo "✅ All checks passed - packages are ready for release"
-        echo "📦 NPM Package: Run 'npm run npm:publish' to publish"
-        echo "🔌 VSCode Extension: Run 'npm run vscode:package' to create .vsix file" 
+      - name: Checkout code
+        uses: actions/checkout@v4
+      
+      - name: Setup Node.js 20.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.x'
+          cache: 'yarn'
+      
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+      
+      - name: Run comprehensive tests
+        run: xvfb-run -a npm run ci
+        
+      - name: Validate packages are ready for release
+        run: |
+          echo "✅ All tests passed - packages are ready for release"
+          echo "🚀 Renderer package: Ready for npm publish"
+          echo "📦 VSCode extension: Ready for marketplace publish" 

.github/workflows/ci.yml

@@ -0,0 +1,105 @@
+# 🤖 AI Assistant Workflow Guide
+
+**Quick reference for AI assistants working on this codebase**
+
+## 🎯 Architecture Summary
+
+**Single Source of Truth**: All pipeline rendering logic lives in `tekton-pipeline-renderer/`
+
+**Propagation**: Changes copy from `tekton-pipeline-renderer/src/` → `tekton-vscode/src/lib/tekton-renderer/`
+
+**Testing**: Both packages have independent test suites + integration tests
+
+## 🚨 Critical Rules
+
+1. **NEVER** add rendering logic to `tekton-vscode/src/` (except extension-specific code)
+2. **NEVER** edit `tekton-vscode/src/lib/` (auto-generated by propagation)
+3. **ALWAYS** implement features in `tekton-pipeline-renderer/` first
+4. **ALWAYS** run `npm run propagate` after renderer changes
+
+## 🔄 Standard Workflow
+
+### Making Changes to Pipeline Rendering:
+```bash
+# 1. Edit files in tekton-pipeline-renderer/src/
+# 2. Test the renderer
+npm run test:renderer
+
+# 3. Propagate to VSCode extension
+npm run propagate
+
+# 4. Test the extension
+npm run test:vscode
+
+# 5. Verify complete pipeline
+npm run pre-push
+```
+
+### Before Pushing to GitHub:
+```bash
+npm run pre-push
+# This runs: lint + build:renderer + build:extension + vscode:package
+```
+
+## 📁 Where to Edit What
+
+### ✅ Edit in `tekton-pipeline-renderer/src/`:
+- React components (`components/`)
+- Custom hooks (`hooks/`)
+- Utilities and parsers (`utils/`)
+- Type definitions (`types/`)
+- Tests (`__tests__/`)
+
+### ✅ Edit in `tekton-vscode/src/`:
+- Extension entry point (`extension.ts`)
+- VSCode webview integration (`webview/`)
+- Extension tests (`test/`)
+- Extension configuration (`package.json`, etc.)
+
+### ❌ NEVER Edit:
+- `tekton-vscode/src/lib/` (auto-generated)
+
+## 🧪 Testing Commands
+
+```bash
+npm run test              # All tests
+npm run test:renderer     # Renderer package only
+npm run test:vscode       # VSCode extension only
+npm run sample           # Interactive React demo
+```
+
+## 🔧 Key Commands
+
+```bash
+npm run propagate        # Copy renderer changes to VSCode
+npm run pre-push         # Complete GitHub Actions equivalent
+npm run build           # Build both packages
+npm run vscode:package  # Create .vsix file
+npm run clean           # Clean all artifacts
+```
+
+## 🐛 Common Issues
+
+**"TypeScript build errors after propagation"**
+→ Check for conflicting type definitions, run `npm run propagate` again
+
+**"Tests pass locally but GitHub Actions fails"**
+→ Run `npm run pre-push` to match GitHub Actions exactly
+
+**"VSCode extension not updating"**
+→ Run `npm run propagate` then rebuild extension
+
+## 📋 Commit Checklist
+
+- [ ] Changes implemented in `tekton-pipeline-renderer/`
+- [ ] Tests added/updated for new functionality
+- [ ] `npm run propagate` executed
+- [ ] `npm run pre-push` passes (lint, build, package)
+- [ ] Manual testing with sample pipelines
+
+## 🎯 Architecture Goals
+
+- **No Drift**: Single source prevents package divergence
+- **Reusability**: Renderer can be used in other contexts
+- **Testing**: Comprehensive coverage at all levels
+- **Distribution**: Both npm package and VSCode extension from same source 

AI_WORKFLOW_GUIDE.md

@@ -29,6 +29,8 @@
     "lint:fix": "yarn workspace tekton-pipeline-renderer run lint:fix && yarn workspace tekton-vscode run lint:fix",
     "propagate": "node scripts/propagate-changes.js",
     "ci": "npm run clean && npm run install:all && npm run lint && npm run test && npm run build",
+    "ci:github": "npm run lint && npm run build:renderer && npm run build:extension && npm run vscode:package",
+    "pre-push": "npm run ci:github",
     "release:check": "npm run ci && npm run propagate && npm run test",
     "release:prepare": "npm run release:check && npm run build:extension",
     "vscode:package": "yarn workspace tekton-vscode run vscode:package",

package.json

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Konflux Team
+Copyright (c) 2025 Brian Cook
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

tekton-pipeline-renderer/LICENSE

@@ -21,9 +21,9 @@
     "LICENSE"
   ],
   "scripts": {
-    "build": "rollup -c rollup.config.js",
+    "build": "rollup -c rollup.config.mjs",
     "build:extension": "webpack --mode production",
-    "build:watch": "rollup -c rollup.config.js --watch",
+    "build:watch": "rollup -c rollup.config.mjs --watch",
     "dev": "webpack-dev-server --config webpack.config.js --mode development",
     "dev:extension": "webpack --mode development --watch",
     "sample": "webpack serve --config example/webpack.config.js --mode development",
@@ -93,7 +93,7 @@
     "url": "https://github.com/your-org/tekton-pipeline-combo/issues"
   },
   "author": "Your Name",
-  "license": "Apache-2.0",
+  "license": "MIT",
   "engines": {
     "node": ">=18.0.0"
   }

tekton-pipeline-renderer/package.json

@@ -3,7 +3,7 @@ import commonjs from 'rollup-plugin-commonjs';
 import typescript from 'rollup-plugin-typescript2';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import postcss from 'rollup-plugin-postcss';
-import pkg from './package.json' assert { type: 'json' };
+import pkg from './package.json' with { type: 'json' };
 
 export default {
   input: 'src/index.ts',

tekton-pipeline-renderer/rollup.config.js renamed to tekton-pipeline-renderer/rollup.config.mjs

@@ -165,7 +165,7 @@ export const TopologyVisualization: React.FC<TopologyVisualizationProps> = ({
   width = '100%',
   height = '600px',
   className,
-  onError,
+  onError: _onError,
 }) => {
   const model = React.useMemo(() => {
     if (!pipelineRun) return null;

tekton-pipeline-renderer/src/components/TopologyVisualization.tsx

@@ -203,7 +203,7 @@ describe('VisualizationFactory', () => {
 
   describe('Control Bar Integration', () => {
     it('should render control bar when provided', () => {
-      const mockControlBar = (controller: Controller) => (
+      const mockControlBar = (_controller: Controller) => (
         <div data-testid="custom-control-bar">Control Bar</div>
       );
 
@@ -367,8 +367,9 @@ describe('VisualizationFactory', () => {
         })
       };
 
-      jest.mocked(require('@patternfly/react-topology').Visualization)
-        .mockImplementationOnce(() => errorVisualization);
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      const { Visualization } = require('@patternfly/react-topology');
+      jest.mocked(Visualization).mockImplementationOnce(() => errorVisualization);
 
       // Capture console.error calls during this test
       const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});

tekton-pipeline-renderer/src/components/__tests__/VisualizationFactory.spec.tsx

@@ -101,7 +101,6 @@ export class TektonTreeProvider implements vscode.TreeDataProvider<TektonItem> {
     }
 
     private async findYamlFiles(uri: vscode.Uri): Promise<vscode.Uri[]> {
-        const files: vscode.Uri[] = [];
         const yamlPattern = new vscode.RelativePattern(uri, '**/*.{yaml,yml}');
         const yamlFiles = await vscode.workspace.findFiles(yamlPattern, '**/node_modules/**');