feat(vcluster): automate kubernetes compatibility matrix

[Piotr1215]

Content Description

Replace manually-maintained HTML compatibility matrix with a data-driven React component backed by JSON. Adds a generation script (--add/--prune) and CI workflow for validation.

Preview Link

• https://deploy-preview-PENDING--vcluster-docs-site.netlify.app/docs/vcluster/next/deploy/upgrade/supported_versions

Internal Reference

Closes DEVOPS-478

AI review: mention @claude in a comment to request a review or changes. See CONTRIBUTING.md for available commands.

@netlify /docs

[netlify]

✅ Deploy Preview for vcluster-docs-site ready!

Name	Link
🔨 Latest commit	550e111
🔍 Latest deploy log	https://app.netlify.com/projects/vcluster-docs-site/deploys/699829a577da0d0008468485
😎 Deploy Preview	https://deploy-preview-1706--vcluster-docs-site.netlify.app/docs
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[github-actions]

DEVOPS-478: automate kubernetes compatibility matrix updates in docs

[cbron]

Only skimmed most of it, but will be happy its autoamted.

[Piotr1215]

@claude review

[claude]

Claude finished @Piotr1215's task in 2m 50s —— View job

---

PR Review: feat(vcluster): automate kubernetes compatibility matrix

Tasks:

• Gather context
• Read changed files
• Review generation script
• Review React component
• Review CI workflow
• Review tests
• Review MDX changes
• Post findings

---

Overall this is a solid improvement — replacing 82 lines of static HTML with a data-driven component is the right move. The architecture is clean and the SKILL.md is excellent. A few things worth addressing before merging.

Security: pull_request_target + untrusted checkout

.github/workflows/update-compatibility-matrix.yml — Critical

The workflow uses pull_request_target (runs with write access to the base repo and has access to secrets) but then checks out and runs code from the PR's head branch:

- uses: actions/checkout@v4
  with:
    ref: ${{ github.event.pull_request.head.ref }}
    repository: ${{ github.event.pull_request.head.repo.full_name }}
- run: npm install
- run: npm run generate-compatibility-matrix

This is a known supply chain attack vector. A fork contributor could modify package.json preinstall scripts or the generate script to exfiltrate secrets or write to the repo.

Since this workflow only validates (no secrets, no repo write needed), the fix is to change pull_request_target to pull_request. I cannot modify workflow files directly (GitHub App permissions), so this needs to be fixed manually.

---

Data: Incorrect "tested" markers in JSON

static/api/k8s-compatibility.json — Bug

The diagonal should be tested per the script's behavior and the pattern in rows 1.35/1.34/1.33. But rows 1.32, 1.31, and 1.30 have the marker shifted off-diagonal:

Host	Marked as tested	Should be tested
1.32	vcluster 1.33	vcluster 1.32
1.31	vcluster 1.32	vcluster 1.31
1.30	vcluster 1.31	vcluster 1.30

If intentional (actual test results differ from diagonal), the data is correct but worth documenting. If unintentional, these three rows need updating.

---

Script: No version format validation

scripts/generate-compatibility-matrix.js:155-160

--add and --prune accept any string. --add foo or --add 1.35-alpha pass through silently. A simple guard would prevent corrupted data:

const VERSION_RE = /^\d+\.\d+$/;
if (!VERSION_RE.test(args[i + 1])) {
  console.error(`Invalid version "${args[i + 1]}". Expected MAJOR.MINOR (e.g. 1.35)`);
  process.exit(1);
}

---

Tests: Anti-patterns and brittleness

tests/specs/k8s-compatibility-matrix.spec.js

1. waitForTimeout anti-pattern (lines 25, 43, 53, 76): Fixed sleeps make tests slower and less reliable. Wait for specific element states instead.

2. Hardcoded footnote text (line 61): filter({ hasText: 'EndpointSlice' }) breaks when note text changes. Prefer a structural locator.

3. Screenshots directory (lines 64, 86): Will fail if tests/screenshots/ doesn't exist. Either add it to the repo or use fs.mkdirSync(..., { recursive: true }).

4. Hardcoded /next/ path (line 12): SKILL.md notes this needs manual update after a version cut — add a code comment so it's harder to forget.

---

Component: Silent fallback for unknown status

src/components/KubernetesCompatibilityMatrix/index.jsx:34

const config = statuses[status] || statuses.compatible;

An unrecognized status silently renders as "compatible". CI validation catches this, but a console.warn would help catch issues during local development.

---

Component: Accessibility

Status cells render raw emoji without accessible alternatives:

<td>{config.emoji}</td>

title on a <td> is not reliably announced by screen readers. Consider <span role="img">{config.emoji}</span> inside the cell.

---

Things done well

• compareVersions correctly handles 1.9 < 1.10 with numeric comparison.
• validate() checks row count, all cells present, valid statuses, and note references — comprehensive.
• SKILL.md is well-written for AI-assisted future maintenance.
• MDX cleanup (82 lines → 1 import) is clean.
• CSS uses Docusaurus variables throughout, so dark mode works automatically.