Skip to content

New staging deployment pipeline#6748

Merged
PavelVanecek merged 6 commits into
mainfrom
www-preview
Dec 7, 2025
Merged

New staging deployment pipeline#6748
PavelVanecek merged 6 commits into
mainfrom
www-preview

Conversation

@PavelVanecek

@PavelVanecek PavelVanecek commented Dec 7, 2025

Copy link
Copy Markdown
Collaborator

Motivation and Context

This way we get VR test results, and the website deployed on every PR.

Summary by CodeRabbit

  • Chores
    • CI now computes and injects a BASE_URL into website builds; the site respects this base for routing.
    • Website build and visual-regression reports are uploaded as artifacts; VR failures are handled by an explicit gating step.
    • New consolidated staging deploy publishes PR-specific or canary previews, cleans old preview deployments, and posts staging URLs; the older manual staging workflow was removed.

✏️ Tip: You can customize this high-level summary in your review settings.

@coderabbitai

coderabbitai Bot commented Dec 7, 2025

Copy link
Copy Markdown
Contributor

Walkthrough

CI workflow .github/workflows/ci.yml now computes and exports BASE_URL, uploads website and VR artifacts, and adds a deploy_staging job that deploys artifacts to gh-pages under PR-specific or canary paths and posts PR staging comments. The older deploy-staging.yml workflow was removed.

Changes

Cohort / File(s) Summary
Primary CI workflow
​.github/workflows/ci.yml
Adds BASE_URL calculation (PR vs canary), passes it into the website build, uploads website-build artifact, always uploads VR report artifact, removes multiple PR-specific VR publish steps, and adds a new deploy_staging job that downloads artifacts, cleans old PR deployments, writes artifacts to pr-<number> or canary on gh-pages, commits/pushes, and comments on the PR with staging URLs.
Removed workflow
​.github/workflows/deploy-staging.yml
Deleted the manual workflow_dispatch workflow that built and deployed a hardcoded /recharts/ site using Node 24.x and upload-pages-artifact / deploy-pages steps.
App routing change
www/src/containers/Root.tsx
Switched BrowserRouter to use a basename from import.meta.env.BASE_URL for route base path resolution.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  participant GH as GitHub Actions
  participant Build as build_test_pack
  participant VR as vr_tests
  participant Art as Artifact Storage
  participant Pages as gh-pages branch
  participant PR as Pull Request (comments)

  GH->>Build: start build_test_pack (calc BASE_URL)
  Build->>Build: build website with BASE_URL
  Build->>Art: upload website-build artifact
  GH->>VR: run vr_tests
  VR->>Art: upload VR report artifact
  GH->>Pages: start deploy_staging (checkout gh-pages)
  Pages->>Art: download website-build + VR artifacts
  Pages->>Pages: cleanup old PR deployments
  Pages->>Pages: create/overwrite pr-<n> or canary directories with artifacts
  Pages->>Pages: commit & push changes to gh-pages
  Pages->>PR: post comment with staging URLs
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45–60 minutes

  • Verify BASE_URL calculation and how it's injected into the build environment.
  • Validate artifact names, contents, and download/upload steps.
  • Inspect deploy_staging gh-pages checkout, cleanup logic, directory layout (pr-<number> vs canary), commit/push strategy, and concurrency/race conditions.
  • Check PR comment formatting and required permissions (pages/contents) for pushing and commenting.

Possibly related PRs

Suggested reviewers

  • ckifer

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)
Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. You can run @coderabbitai generate docstrings to improve docstring coverage.
Description check ❓ Inconclusive The description is incomplete, containing only one section with a brief motivation statement while missing required sections like Related Issue, Testing approach, and change type classification. Complete the PR description by adding Related Issue, How Has This Been Tested, Types of changes, and Checklist sections from the template.
✅ Passed checks (1 passed)
Check name Status Explanation
Title check ✅ Passed The title 'New staging deployment pipeline' accurately summarizes the main change: introducing a new CI/CD pipeline for staging deployments.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch www-preview

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ece7d6f and 83fe572.

📒 Files selected for processing (1)
  • www/src/containers/Root.tsx (1 hunks)
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}

📄 CodeRabbit inference engine (CONTRIBUTING.md)

**/*.{ts,tsx}: Never use any type (implicit or explicit) in TypeScript code
Prefer unknown over any and refine the type in TypeScript
Type function parameters and return values explicitly in TypeScript, do not rely on implicit any or inference; exceptions are React components and trivial functions
Do not use as type assertions in TypeScript; the only exception is as const

Files:

  • www/src/containers/Root.tsx
**/*.{js,ts,tsx}

📄 CodeRabbit inference engine (CONTRIBUTING.md)

Ensure code lints by running npm run lint and follows Airbnb's Style Guide

Files:

  • www/src/containers/Root.tsx
**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (DEVELOPING.md)

All imports from recharts must use the public API entry point; imports from internal paths like recharts/types/* or recharts/src/* are not allowed

Files:

  • www/src/containers/Root.tsx
🧠 Learnings (1)
📓 Common learnings
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6748
File: .github/workflows/ci.yml:268-276
Timestamp: 2025-12-07T01:38:46.677Z
Learning: In the recharts/recharts repository, the staging deployment pipeline should deploy the website and VR test report even when VR tests fail, so that the HTML report can be reviewed. This requires using `if: always() && needs.build_test_pack.result == 'success' && (needs.vr_tests.result == 'success' || needs.vr_tests.result == 'failure')` in the deploy_staging job condition.
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: Analyze (javascript-typescript)
  • GitHub Check: Build, Test, Pack
🔇 Additional comments (1)
www/src/containers/Root.tsx (1)

7-7: The basename prop correctly enables subdirectory deployment.

The change aligns with Vite's base configuration (set via process.env.BASE_URL) and works with the app's routing architecture, which already uses relative paths throughout (e.g., /${locale}/api/...). No action needed.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0c77f1c and 137a8bc.

📒 Files selected for processing (2)
  • .github/workflows/ci.yml (2 hunks)
  • .github/workflows/deploy-staging.yml (0 hunks)
💤 Files with no reviewable changes (1)
  • .github/workflows/deploy-staging.yml
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: Build, Test, Pack
  • GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (3)
.github/workflows/ci.yml (3)

89-102: BASE_URL calculation and propagation looks good.

The conditional logic correctly differentiates PR and canary deployments, and the environment variable is properly scoped to the website build. This will align with the deploy_staging step's directory structure.


253-266: VR test artifact and failure handling is well-structured.

The continue-on-error pattern combined with unconditional artifact upload and explicit job failure ensures reports are captured while preventing failed VR tests from proceeding. The workflow correctly gates on test failures.


104-109: Remove this concern—artifact retention and deployment cleanup operate independently.

The website artifact is downloaded and deployed to the gh-pages branch during the same workflow run (the deploy_staging job runs immediately after build_test_pack completes). The cleanup script at line 298-299 removes old directories from the gh-pages repository using filesystem operations (find . -mtime +30), not GitHub artifacts. Since deployment occurs within the artifact's 14-day window, and the files persist in the git repository after deployment, there is no risk of missing artifacts when the 30-day cleanup runs.

Comment thread .github/workflows/ci.yml
Comment on lines +268 to +276
deploy_staging:
name: Deploy to Staging
needs: [build_test_pack, vr_tests]
if: needs.build_test_pack.result == 'success'
runs-on: ubuntu-latest
permissions:
contents: write
pull-requests: write
steps:

@coderabbitai coderabbitai Bot Dec 7, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Critical: deploy_staging condition doesn't gate on VR test failures.

The job depends on vr_tests (line 270) but the condition (line 271) only checks needs.build_test_pack.result == 'success'. When VR tests fail, the vr_tests job outcome is 'failure', but this is not checked in the condition, so deploy_staging will still run and deploy sites with failed tests.

Update the condition to explicitly check both jobs:

-    if: needs.build_test_pack.result == 'success'
+    if: needs.build_test_pack.result == 'success' && needs.vr_tests.result == 'success'

Alternatively, if deployments should proceed regardless of VR test status, remove the vr_tests dependency and clarify the intent in a comment.

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
deploy_staging:
name: Deploy to Staging
needs: [build_test_pack, vr_tests]
if: needs.build_test_pack.result == 'success'
runs-on: ubuntu-latest
permissions:
contents: write
pull-requests: write
steps:
deploy_staging:
name: Deploy to Staging
needs: [build_test_pack, vr_tests]
if: needs.build_test_pack.result == 'success' && needs.vr_tests.result == 'success'
runs-on: ubuntu-latest
permissions:
contents: write
pull-requests: write
steps:
🤖 Prompt for AI Agents
.github/workflows/ci.yml around lines 268 to 276: the deploy_staging job
currently only gates on needs.build_test_pack.result == 'success' while still
declaring a dependency on vr_tests, so deployments can proceed even if VR tests
failed; update the if condition to explicitly require both successes (e.g.,
needs.build_test_pack.result == 'success' && needs.vr_tests.result == 'success')
so deploy_staging only runs when both jobs pass, or if the intent is to deploy
regardless, remove vr_tests from the needs array and add a comment clarifying
that VR failures should not block deployment.

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is intentional. Failed VR tests will still produce the HTML report that we want to upload.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@PavelVanecek, thank you for clarifying the intention! I understand you want to deploy the staging site with the VR report even when tests fail, so the report can be reviewed.

However, there's a subtle issue with the current implementation. In GitHub Actions, when a job in the needs array fails, dependent jobs are skipped by default, even if the if condition doesn't explicitly check that job's result. Since the vr_tests job will fail when tests fail (due to the "Fail workflow if tests failed" step on line 263), the deploy_staging job will be skipped.

To achieve your intended behavior, you need to explicitly allow deploy_staging to run when vr_tests fails:

if: always() && needs.build_test_pack.result == 'success' && (needs.vr_tests.result == 'success' || needs.vr_tests.result == 'failure')

This ensures:

  • The job always evaluates the condition (via always())
  • It only runs if the build succeeds
  • It runs regardless of whether VR tests pass or fail
  • It still skips if vr_tests is cancelled or skipped

Would you like me to create an issue to track this fix?


✏️ Learnings added
Learnt from: PavelVanecek
Repo: recharts/recharts PR: 6748
File: .github/workflows/ci.yml:268-276
Timestamp: 2025-12-07T01:38:46.677Z
Learning: In the recharts/recharts repository, the staging deployment pipeline should deploy the website and VR test report even when VR tests fail, so that the HTML report can be reviewed. This requires using `if: always() && needs.build_test_pack.result == 'success' && (needs.vr_tests.result == 'success' || needs.vr_tests.result == 'failure')` in the deploy_staging job condition.

Note: Learnings are effective only in the context of similar code segments. To apply general coding guidelines, please configure review instructions. You can manage existing learnings in the app.


🧠 Learnings used
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-12-06T03:36:59.377Z
Learning: Applies to test-vr/__snapshots__/** : Visual regression test snapshots should be committed to the repository

Comment thread .github/workflows/ci.yml Outdated
Comment thread .github/workflows/ci.yml Outdated
Comment on lines +327 to +345
- name: Comment on PR
if: github.event_name == 'pull_request'
env:
GH_TOKEN: ${{ github.token }}
run: |
PR_NUMBER=${{ github.event.pull_request.number }}
WEBSITE_URL="https://recharts.github.io/recharts/pr-$PR_NUMBER/www/"
REPORT_URL="https://recharts.github.io/recharts/pr-$PR_NUMBER/vr-tests/"

COMMENT_BODY=$(cat <<EOF
**Staging Deployment Details**

- **Website:** $WEBSITE_URL
- **Test Report:** $REPORT_URL

*These deployments will remain available for 30 days.*
EOF
)
gh pr comment ${{ github.event.pull_request.number }} --body "$COMMENT_BODY"

- name: Fail workflow if tests failed
# This step ensures that the entire job fails if the VR tests have failed.
# This is necessary because of `continue-on-error: true` in the test step.
# A failing job will block the PR from being merged.
if: steps.vr_test_step.outcome == 'failure'
run: exit 1

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

PR comment assumes successful deployment.

The "Comment on PR" step posts staging URLs unconditionally, but it runs after the deploy step. If the deploy step fails (git push, etc.), the comment will still post URLs pointing to non-existent or stale deployments, creating a poor user experience.

Add a condition to only comment if the deploy step succeeded, or add a check within the script:

      - name: Comment on PR
        if: github.event_name == 'pull_request'
+       # Add a condition to ensure deploy succeeded before commenting

Alternatively, validate that the deployment completed before posting the URLs.

Committable suggestion skipped: line range outside the PR's diff.

🤖 Prompt for AI Agents
.github/workflows/ci.yml around lines 327 to 345: the "Comment on PR" step posts
staging URLs unconditionally even when the deploy may have failed; modify the
job so the comment runs only on successful deploy (e.g., add an if: ${{
success() }} or if: ${{ needs.deploy_job.result == 'success' }} conditioned on
the deploy job name), or add a lightweight runtime check before posting (curl
the WEBSITE_URL/REPORT_URL or verify the deploy job outputs a success
flag/artifact and only proceed if the check passes); update the step to bail out
(or post a failure note) when the deployment verification fails.

@codecov

codecov Bot commented Dec 7, 2025

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 0% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 93.90%. Comparing base (0c77f1c) to head (83fe572).
⚠️ Report is 6 commits behind head on main.

Files with missing lines Patch % Lines
www/src/containers/Root.tsx 0.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #6748      +/-   ##
==========================================
- Coverage   93.96%   93.90%   -0.06%     
==========================================
  Files         504      512       +8     
  Lines       42177    42462     +285     
  Branches     4925     4974      +49     
==========================================
+ Hits        39633    39876     +243     
- Misses       2539     2581      +42     
  Partials        5        5              

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@codecov

codecov Bot commented Dec 7, 2025

Copy link
Copy Markdown

Bundle Report

Changes will increase total bundle size by 24.11kB (0.91%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
recharts/bundle-cjs 1.16MB 11.4kB (0.99%) ⬆️
recharts/bundle-es6 1.0MB 9.45kB (0.95%) ⬆️
recharts/bundle-umd 519.33kB 3.26kB (0.63%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: recharts/bundle-es6

Assets Changed:

Asset Name Size Change Total Size Change (%)
cartesian/Area.js 477 bytes 26.52kB 1.83%
cartesian/Bar.js 259 bytes 25.62kB 1.02%
state/selectors/radialBarSelectors.js 118 bytes 11.37kB 1.05%
shape/Rectangle.js 21 bytes 10.68kB 0.2%
cartesian/ErrorBar.js 110 bytes 9.24kB 1.21%
state/selectors/barSelectors.js -6.01kB 8.17kB -42.39%
util/isDomainSpecifiedByUser.js 41 bytes 7.12kB 0.58%
animation/configUpdate.js 193 bytes 5.65kB 3.53%
util/ReduceCSSCalc.js 863 bytes 5.55kB 18.42% ⚠️
util/DataUtils.js 158 bytes 5.13kB 3.18%
cartesian/BarStack.js (New) 4.52kB 4.52kB 100.0% 🚀
cartesian/getEquidistantTicks.js -39 bytes 4.34kB -0.89%
state/selectors/combiners/combineAllBarPositions.js (New) 4.33kB 4.33kB 100.0% 🚀
animation/easing.js 292 bytes 4.06kB 7.74% ⚠️
index.js 49 bytes 3.33kB 1.49%
util/propsAreEqual.js 76 bytes 2.76kB 2.83%
state/selectors/barStackSelectors.js (New) 1.97kB 1.97kB 100.0% 🚀
state/selectors/combiners/combineBarSizeList.js (New) 1.36kB 1.36kB 100.0% 🚀
util/TickUtils.js -39 bytes 1.26kB -3.0%
util/getEveryNth.js (New) 802 bytes 802 bytes 100.0% 🚀
state/selectors/combiners/combineStackedData.js (New) 664 bytes 664 bytes 100.0% 🚀
util/Global.js -1 bytes 228 bytes -0.44%
util/getEveryNthWithCondition.js (Deleted) -756 bytes 0 bytes -100.0% 🗑️
view changes for bundle: recharts/bundle-cjs

Assets Changed:

Asset Name Size Change Total Size Change (%)
cartesian/Area.js 477 bytes 28.39kB 1.71%
cartesian/Bar.js 261 bytes 27.33kB 0.96%
state/selectors/radialBarSelectors.js 190 bytes 12.89kB 1.5%
shape/Rectangle.js 20 bytes 11.96kB 0.17%
index.js 177 bytes 11.87kB 1.51%
cartesian/ErrorBar.js 110 bytes 10.25kB 1.08%
state/selectors/barSelectors.js -6.36kB 9.5kB -40.08%
util/isDomainSpecifiedByUser.js 41 bytes 7.6kB 0.54%
util/DataUtils.js 158 bytes 5.99kB 2.71%
animation/configUpdate.js 193 bytes 5.86kB 3.41%
util/ReduceCSSCalc.js 863 bytes 5.75kB 17.68% ⚠️
cartesian/BarStack.js (New) 5.71kB 5.71kB 100.0% 🚀
state/selectors/combiners/combineAllBarPositions.js (New) 4.58kB 4.58kB 100.0% 🚀
cartesian/getEquidistantTicks.js -52 bytes 4.58kB -1.12%
animation/easing.js 292 bytes 4.31kB 7.26% ⚠️
util/propsAreEqual.js 76 bytes 2.89kB 2.7%
state/selectors/barStackSelectors.js (New) 2.27kB 2.27kB 100.0% 🚀
state/selectors/combiners/combineBarSizeList.js (New) 1.57kB 1.57kB 100.0% 🚀
util/TickUtils.js -52 bytes 1.52kB -3.3%
util/getEveryNth.js (New) 910 bytes 910 bytes 100.0% 🚀
state/selectors/combiners/combineStackedData.js (New) 854 bytes 854 bytes 100.0% 🚀
util/Global.js -1 bytes 343 bytes -0.29%
util/getEveryNthWithCondition.js (Deleted) -890 bytes 0 bytes -100.0% 🗑️
view changes for bundle: recharts/bundle-umd

Assets Changed:

Asset Name Size Change Total Size Change (%)
Recharts.js 3.26kB 519.33kB 0.63%

@github-actions

github-actions Bot commented Dec 7, 2025

Copy link
Copy Markdown
Contributor

Staging Deployment Details

These deployments will remain available for 30 days.

To update snapshots: Comment /update-snapshots on this PR to automatically update the baseline screenshots.

@PavelVanecek

Copy link
Copy Markdown
Collaborator Author

Almost there

@github-actions

github-actions Bot commented Dec 7, 2025

Copy link
Copy Markdown
Contributor

Staging Deployment Details

These deployments will remain available for 30 days.

To update snapshots: Comment /update-snapshots on this PR to automatically update the baseline screenshots.

@PavelVanecek
PavelVanecek merged commit 2792e96 into main Dec 7, 2025
37 of 40 checks passed
@PavelVanecek
PavelVanecek deleted the www-preview branch December 7, 2025 12:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants