feat: add native NGINX Ingress migration tool by electricjesus · Pull Request #2623 · tigera/docs

electricjesus · 2026-04-01T14:00:23Z

Summary

Replaces the iframe embed on the "Migrating from NGINX" page with a native React component from @tigera/ingress-to-gateway-web@0.7.0
The converter runs entirely in-browser — paste NGINX Ingress YAML, get a personalised migration playbook for Envoy Gateway
Supports both NGINX Ingress (community) and NGINX Inc (F5) annotations, 47 handlers, 142+ annotations
Dark mode works via Docusaurus's data-theme attribute
CLI tool section removed (internal only for now)

Changes

New: src/___new___/components/IngressConverter/ — wrapper component importing bare components from @tigera/ingress-to-gateway-web
New: calico/networking/ingress-gateway/migrate-from-nginx.mdx (current + v3.31) — uses native <IngressConverter /> instead of iframe
New: .yarnrc.yml — configures @tigera npm scope to pull from GitHub Packages
Modified: CI workflows — adds NODE_AUTH_TOKEN for GitHub Packages auth
Modified: Sidebar configs — adds "Migrating from NGINX" entry under Ingress gateway

Dependencies

@tigera/ingress-to-gateway-web@0.7.0 — from tigera/ing2gw via GitHub Packages
marked — for rendering the migration playbook markdown

Test plan

CI passes (package installs from GitHub Packages)
Page renders at /calico/latest/networking/ingress-gateway/migrate-from-nginx
Converter: paste YAML → generates playbook + Gateway YAML
Dark mode toggle switches component theme
No CLI tool section visible on the page

Preview

Standalone preview: https://ing2gw.seth.ie

🤖 Generated with Claude Code

netlify · 2026-04-01T14:00:30Z

✅ Deploy Preview for calico-docs-preview-next ready!

Name	Link
🔨 Latest commit	`02d7b30`
🔍 Latest deploy log	https://app.netlify.com/projects/calico-docs-preview-next/deploys/69ce697dbe41630008808511
😎 Deploy Preview	https://deploy-preview-2623--calico-docs-preview-next.netlify.app
📱 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.

netlify · 2026-04-01T14:00:31Z

✅ Deploy Preview succeeded!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`02d7b30`
🔍 Latest deploy log	https://app.netlify.com/projects/tigera/deploys/69ce697d4db62900084e3e26
😎 Deploy Preview	https://deploy-preview-2623--tigera.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 67 (🔴 down 29 from production) Accessibility: 98 (no change from production) Best Practices: 83 (no change from production) SEO: 100 (no change from production) PWA: - View the detailed breakdown and full score reports

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

Copilot

Pull request overview

Adds a native, in-browser NGINX Ingress → Gateway API migration experience to the Calico docs site by embedding a React-based converter (via @tigera/ingress-to-gateway-web) and wiring up the required docs, dependencies, and CI auth for GitHub Packages.

Changes:

Introduces a new IngressConverter wrapper component that renders the converter UI and outputs (playbook + YAML) on the docs page.
Adds new “Migrating from NGINX” docs pages (current + Calico v3.31) and links them in the Calico sidebars.
Configures Yarn + GitHub Actions to authenticate to GitHub Packages for @tigera/* dependency installation.

Reviewed changes

Copilot reviewed 10 out of 11 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
`src/___new___/components/IngressConverter/index.tsx`	New wrapper component integrating `@tigera/ingress-to-gateway-web` and rendering playbook markdown + YAML output.
`src/___new___/components/index.ts`	Exposes `IngressConverter` via the shared components barrel export for MDX imports.
`calico/networking/ingress-gateway/migrate-from-nginx.mdx`	New “Migrating from NGINX” doc page that embeds `<IngressConverter />`.
`calico_versioned_docs/version-3.31/networking/ingress-gateway/migrate-from-nginx.mdx`	Versioned v3.31 equivalent of the new migration page.
`sidebars-calico.js`	Adds the new migration page to the Calico sidebar navigation.
`calico_versioned_sidebars/version-3.31-sidebars.json`	Adds the new migration page to the Calico v3.31 sidebar navigation.
`package.json`	Adds `@tigera/ingress-to-gateway-web` and `marked` dependencies.
`yarn.lock`	Locks new dependencies (`@tigera/ingress-to-gateway-*`, `marked`, and `yaml` range change).
`.yarnrc.yml`	Configures `@tigera` scope to use GitHub Packages with `NODE_AUTH_TOKEN`.
`.github/workflows/validate.yml`	Sets `NODE_AUTH_TOKEN` during installs to allow fetching from GitHub Packages.
`.github/workflows/vale.yml`	Sets `NODE_AUTH_TOKEN` during installs to allow fetching from GitHub Packages.

Copilot · 2026-04-01T14:06:04Z

src/___new___/components/IngressConverter/index.tsx

+
+function MarkdownRenderer({ children }: { children: string }) {
+  const html = marked.parse(children, { async: false }) as string;
+  // biome-ignore lint/security/noDangerouslySetInnerHtml: markdown is generated by our own report engine, not user input


marked will render raw HTML by default, and conversion.output.report is derived (directly/indirectly) from user-pasted YAML. Rendering it via dangerouslySetInnerHTML without sanitization creates an XSS risk. Consider sanitizing the generated HTML (e.g., reuse the repo’s existing sanitize-html dependency) or configure the markdown pipeline to disallow embedded HTML before injecting it.

Suggested change

function MarkdownRenderer({ children }: { children: string }) {

const html = marked.parse(children, { async: false }) as string;

// biome-ignore lint/security/noDangerouslySetInnerHtml: markdown is generated by our own report engine, not user input

import sanitizeHtml from 'sanitize-html';

function MarkdownRenderer({ children }: { children: string }) {

const rawHtml = marked.parse(children, { async: false }) as string;

const html = sanitizeHtml(rawHtml, {

allowedTags: sanitizeHtml.defaults.allowedTags,

allowedAttributes: sanitizeHtml.defaults.allowedAttributes,

});

Copilot · 2026-04-01T14:06:04Z

src/___new___/components/IngressConverter/index.tsx

+export default function IngressConverter() {
+  const conversion = useConversion();
+  const [step, setStep] = useState<Step>('input');
+
+  const handleConvert = useCallback(() => {
+    const result = conversion.handleConvert();


This new React component doesn’t appear to have a Jest test alongside it, while other components under src/___new___/components/* commonly have snapshot tests in __test__/ (e.g., src/___new___/components/Explore/__test__/index.test.tsx). Adding at least a basic render/snapshot test would help prevent regressions when updating @tigera/ingress-to-gateway-web or the wrapper logic.

Copilot · 2026-04-01T14:06:05Z

.github/workflows/validate.yml

          cache: yarn
+      - name: Authenticate GitHub Packages
+        run: yarn config set --home npmScopes.tigera.npmAuthToken "${{ secrets.GITHUB_TOKEN }}"
      - name: Install dependencies
        run: yarn install --immutable


Using NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }} for GitHub Packages typically requires explicit workflow/job permissions (at least packages: read). Without setting permissions: packages: read, installs from npm.pkg.github.com can fail depending on repo/org default token permissions. Consider adding an explicit permissions block to ensure deterministic installs.

Copilot · 2026-04-01T14:06:05Z

.github/workflows/vale.yml

+      - name: Authenticate GitHub Packages
+        if: steps.changed.outputs.skip == 'false'
+        run: yarn config set --home npmScopes.tigera.npmAuthToken "${{ secrets.GITHUB_TOKEN }}"
      - name: Install dependencies
        if: steps.changed.outputs.skip == 'false'


This workflow now authenticates to GitHub Packages during yarn install, but it doesn’t declare permissions: packages: read. If the repository’s default GITHUB_TOKEN permissions don’t include packages access, dependency installation from npm.pkg.github.com will fail. Consider adding explicit packages: read permissions (workflow- or job-level).

Replace the iframe embed with a native React component from @tigera/ingress-to-gateway-web. The converter runs entirely in-browser — paste NGINX Ingress YAML and get a personalised migration playbook for Envoy Gateway. - Add IngressConverter wrapper component - Configure @tigera npm scope for GitHub Packages - Add NODE_AUTH_TOKEN to CI workflows for package auth - Remove CLI tool section (internal only for now)

Copilot AI review requested due to automatic review settings April 1, 2026 14:00

electricjesus requested a review from a team as a code owner April 1, 2026 14:00

Copilot started reviewing on behalf of electricjesus April 1, 2026 14:01 View session

electricjesus force-pushed the feat/ing2gw-native-component branch from 9a03ad3 to 2336d43 Compare April 1, 2026 14:02

Copilot AI reviewed Apr 1, 2026

View reviewed changes

electricjesus force-pushed the feat/ing2gw-native-component branch 6 times, most recently from 342990a to 268266a Compare April 2, 2026 11:28

electricjesus force-pushed the feat/ing2gw-native-component branch from 268266a to 02d7b30 Compare April 2, 2026 13:04

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add native NGINX Ingress migration tool#2623

feat: add native NGINX Ingress migration tool#2623
electricjesus wants to merge 1 commit intotigera:mainfrom
electricjesus:feat/ing2gw-native-component

electricjesus commented Apr 1, 2026

Uh oh!

netlify bot commented Apr 1, 2026 •

edited

Loading

Uh oh!

netlify bot commented Apr 1, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

-function MarkdownRenderer({ children }: { children: string }) {
-  const html = marked.parse(children, { async: false }) as string;
-  // biome-ignore lint/security/noDangerouslySetInnerHtml: markdown is generated by our own report engine, not user input
+import sanitizeHtml from 'sanitize-html';
+function MarkdownRenderer({ children }: { children: string }) {
+  const rawHtml = marked.parse(children, { async: false }) as string;
+  const html = sanitizeHtml(rawHtml, {
+    allowedTags: sanitizeHtml.defaults.allowedTags,
+    allowedAttributes: sanitizeHtml.defaults.allowedAttributes,
+  });

Conversation

electricjesus commented Apr 1, 2026

Summary

Changes

Dependencies

Test plan

Preview

Uh oh!

netlify bot commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for calico-docs-preview-next ready!

Uh oh!

netlify bot commented Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview succeeded!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

netlify bot commented Apr 1, 2026 •

edited

Loading

netlify bot commented Apr 1, 2026 •

edited

Loading