[ci] Improve Storybook deployment and comment workflow #5426

snomiao · 2025-09-08T04:14:56Z

Summary

Improves Storybook deployment and PR comment workflow similar to the Playwright improvements in fix: Split PR deployment workflow for forked vs non-forked repos #5425
Creates unified deployment and commenting system for better maintainability
Adds Cloudflare Pages deployment for Storybook previews

Deployment Cases Matrix

Case	PR Type	Branch	Deployment	Features
1	Non-forked PR	`version-bump-*`	✅ Chromatic	• Visual diff testing • Chromatic build URL • Chromatic Storybook URL • Shows visual changes
2	Non-forked PR	All branches	✅ Cloudflare Pages	• Live Storybook preview • pages.dev URL • No visual diff
3	Forked PR	Any branch	✅ Cloudflare Pages	• Live Storybook preview • pages.dev URL • No visual diff • Runs via separate workflow to avoid permission problems

Key Points:

Chromatic (paid service): Only for version-bump-* branches to track visual changes between releases
Cloudflare Pages (free): For all other PRs to provide Storybook preview without visual diff
Security: Forked PRs use a separate workflow with limited permissions

Changes

New Features

🚀 Cloudflare Pages Deployment: Storybook builds are now deployed to Cloudflare Pages for easy preview
🔄 Unified Script: Single reusable shell script handles both deployment and PR comments
🔒 Better Security: Separate workflows for fork vs non-fork PRs

Improvements

♻️ Retry Logic: Automatic retry (3 attempts) for failed deployments
📝 Better Comments: Clearer PR comments with deployment links and status
🎯 Simplified Logic: Workflow logic moved to reusable script for easier maintenance
⚡ Better Error Handling: Proper handling of different workflow conclusions
🐛 Fixed Comment Output: Deployment logs now properly redirected to stderr

Files Changed

scripts/cicd/pr-storybook-deploy-and-comment.sh - New unified deployment script
.github/workflows/chromatic.yaml - Updated to use new script and add deployment
.github/workflows/pr-storybook-deploy.yaml - New workflow for forked PRs
.github/workflows/pr-storybook-comment.yaml - Removed (replaced by new system)

⚠️ Required Setup

The Cloudflare Pages project comfyui-storybook needs to be created under the organization's Cloudflare account:

# Using the account ID from GitHub secrets
export CLOUDFLARE_ACCOUNT_ID=5ae914d9b87bcf6bbe1ada5798f92a5f
export CLOUDFLARE_API_TOKEN=<org-token>
wrangler pages project create comfyui-storybook --production-branch main

Note: The project must be created under the same Cloudflare account that's configured in the GitHub secrets.

Test Plan

Create Cloudflare Pages project comfyui-storybook
Workflow runs successfully on all PRs
PR comments are posted correctly at start and completion
Storybook deploys to Cloudflare Pages with correct URL
Fork PRs are handled by separate workflow
Non-fork PRs get inline deployment
version-bump-* branches show Chromatic info

References

Similar improvements for Playwright: Drag Multiple Vue Nodes #5459
Based on pattern from sno-fix-playwright-comment-2 branch

🤖 Generated with Claude Code

github-actions · 2025-09-08T04:44:29Z

🎭 Playwright Test Results

⚠️ Tests passed with flaky tests

⏰ Completed at: 09/30/2025, 01:26:34 AM UTC

📈 Summary

Total Tests: 479
Passed: 448 ✅
Failed: 0
Flaky: 2 ⚠️
Skipped: 29 ⏭️

📊 Test Reports by Browser

✅ chromium: View Report • ✅ 440 / ❌ 0 / ⚠️ 2 / ⏭️ 29
✅ chromium-2x: View Report • ✅ 2 / ❌ 0 / ⚠️ 0 / ⏭️ 0
✅ chromium-0.5x: View Report • ✅ 1 / ❌ 0 / ⚠️ 0 / ⏭️ 0
✅ mobile-chrome: View Report • ✅ 5 / ❌ 0 / ⚠️ 0 / ⏭️ 0

🎉 Click on the links above to view detailed test results for each browser configuration.

github-actions · 2025-09-08T09:47:06Z

🎨 Storybook Build Status

✅ Build completed successfully!

⏰ Completed at: 09/30/2025, 01:16:41 AM UTC

🔗 Links

📊 View Workflow Run
🎨 View Storybook

🎉 Your Storybook is ready for review!

- Create unified shell script for Storybook deployment and PR comments - Separate workflows for fork and non-fork PRs for better security - Add deployment to Cloudflare Pages for Storybook previews - Improve error handling with retry logic for deployments - Simplify workflow logic using reusable script - Better handling of different workflow conclusions (success/failure/cancelled/skipped) Similar improvements as applied to Playwright workflow in sno-fix-playwright-comment-2 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

- Display deployment status even when build fails - Show specific messages for different failure scenarios - Better visibility into what happened with the deployment

- Separate storybook-build job that runs for all PRs - Deploy Storybook to Cloudflare Pages for free PR previews - Keep Chromatic deployment only for version-bump branches - Add separate deployment for Chromatic builds when applicable

- Chromatic already provides hosted builds with URLs - Add Chromatic URLs (build and storybook) to PR comments for version-bump branches - Remove redundant deploy-chromatic-build job - Add onlyChanged option to Chromatic to reduce costs

…ultiple - Fix comment update logic to properly find and update existing comments by ID - Update Chromatic URLs within the same comment instead of creating new ones - Properly filter comments by github-actions[bot] author

- Only mention Chromatic visual tests for version-bump branches - Show Cloudflare deployment message for regular PRs - Dynamically adjust starting comment based on branch name

…ng by using gh pr comment for editing existing comments chore(pr-storybook-deploy-and-comment.sh): remove unnecessary variable and streamline existing comment check logic

…n CI configuration

- Redirect all logging output to stderr in deploy_storybook function - Only return clean URL or 'failed' to stdout for proper capture - Add --commit-dirty=true flag to suppress git warnings - Fix issue where entire deployment output was shown in comment link

- Create unified shell script for Storybook deployment and PR comments - Separate workflows for fork and non-fork PRs for better security - Add deployment to Cloudflare Pages for Storybook previews - Improve error handling with retry logic for deployments - Simplify workflow logic using reusable script - Better handling of different workflow conclusions (success/failure/cancelled/skipped) Similar improvements as applied to Playwright workflow in sno-fix-playwright-comment-2 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

- Display deployment status even when build fails - Show specific messages for different failure scenarios - Better visibility into what happened with the deployment

- Separate storybook-build job that runs for all PRs - Deploy Storybook to Cloudflare Pages for free PR previews - Keep Chromatic deployment only for version-bump branches - Add separate deployment for Chromatic builds when applicable

- Chromatic already provides hosted builds with URLs - Add Chromatic URLs (build and storybook) to PR comments for version-bump branches - Remove redundant deploy-chromatic-build job - Add onlyChanged option to Chromatic to reduce costs

…ultiple - Fix comment update logic to properly find and update existing comments by ID - Update Chromatic URLs within the same comment instead of creating new ones - Properly filter comments by github-actions[bot] author

- Only mention Chromatic visual tests for version-bump branches - Show Cloudflare deployment message for regular PRs - Dynamically adjust starting comment based on branch name

…ng by using gh pr comment for editing existing comments chore(pr-storybook-deploy-and-comment.sh): remove unnecessary variable and streamline existing comment check logic

…n CI configuration

- Display deployment status even when build fails - Show specific messages for different failure scenarios - Better visibility into what happened with the deployment

- Separate storybook-build job that runs for all PRs - Deploy Storybook to Cloudflare Pages for free PR previews - Keep Chromatic deployment only for version-bump branches - Add separate deployment for Chromatic builds when applicable

- Chromatic already provides hosted builds with URLs - Add Chromatic URLs (build and storybook) to PR comments for version-bump branches - Remove redundant deploy-chromatic-build job - Add onlyChanged option to Chromatic to reduce costs

…ultiple - Fix comment update logic to properly find and update existing comments by ID - Update Chromatic URLs within the same comment instead of creating new ones - Properly filter comments by github-actions[bot] author

- Only mention Chromatic visual tests for version-bump branches - Show Cloudflare deployment message for regular PRs - Dynamically adjust starting comment based on branch name

…ng by using gh pr comment for editing existing comments chore(pr-storybook-deploy-and-comment.sh): remove unnecessary variable and streamline existing comment check logic

…n CI configuration

- Redirect all logging output to stderr in deploy_storybook function - Only return clean URL or 'failed' to stdout for proper capture - Add --commit-dirty=true flag to suppress git warnings - Fix issue where entire deployment output was shown in comment link

snomiao · 2025-09-11T02:49:21Z

let sno update this branch and steal the improvements from pr-playwright-*.yaml workflows

snomiao · 2025-09-11T02:52:36Z

📋 Task List: Update Storybook Workflows

✅ All tasks completed! The branch has been updated with improvements from the Playwright workflows.

🔍 Analysis & Research

Key improvements identified from pr-playwright-*.yaml:

✅ Proper fork detection using null checks for head_repository
✅ Parallel deployment support for multiple browser configurations
✅ Better error handling with retry logic (3 attempts)
✅ Improved URL extraction from wrangler output
✅ Cleaner separation of concerns between starting/completed states
✅ Proper sanitization of branch names for Cloudflare
✅ Use of workflow_run events for fork security

🚀 Implementation Tasks:

Fix fork detection logic - Add null checks for head_repository to prevent errors
Update deployment script - Align pr-storybook-deploy-and-comment.sh with playwright version
Improve workflow conditions - Fix the fork PR workflow to properly detect forked repositories
Add better error handling - Ensure proper error messages and fallback behaviors
Test the updated workflows - Verify changes work for both forked and non-forked PRs
Commit and push changes - Push updates to the branch

📝 Summary of Changes

Files Modified:

.github/workflows/pr-storybook-deploy.yaml
- Added null checks for head_repository and repository to prevent errors
- Added workflow trigger debugging logs
- Only download artifacts when workflow succeeded
- Use workflow_run event data directly instead of fetching it again
.github/workflows/chromatic.yaml
- Simplified job status output using direct variable assignment
- Removed duplicate start time calculation
- Streamlined the workflow steps

Commit:

443acd3f9 - [ci] Align Storybook workflows with Playwright improvements

✨ Status: Complete! The Storybook workflows now have the same improvements as the Playwright workflows.

- Changed project name from comfyui-storybook to comfy-storybook in deployment script - This aligns with the new Cloudflare Pages project naming convention 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

- Add null checks for head_repository to prevent errors with forked PRs - Simplify job status output using direct variable assignment - Remove unnecessary workflow conclusion fetching (use event data directly) - Improve logging for workflow trigger debugging - Only download artifacts when workflow succeeded - Remove duplicate start time calculation - Align error handling with playwright workflows These changes bring the Storybook deployment workflows in line with the improvements made to the Playwright workflows, providing better stability and consistency across CI/CD processes. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

snomiao · 2025-09-22T21:56:30Z

We can have storybook-preview for every PRs again!

Powered by cloudflare and its free :D

@christian-byrne @DrJKL @viva-jinyi

## Summary - Improves Storybook deployment and PR comment workflow similar to the Playwright improvements in #5425 - Creates unified deployment and commenting system for better maintainability - Adds Cloudflare Pages deployment for Storybook previews ## Deployment Cases Matrix | Case | PR Type | Branch | Deployment | Features | |------|---------|--------|------------|----------| | **1** | Non-forked PR | `version-bump-*` | ✅ Chromatic | • Visual diff testing • Chromatic build URL • Chromatic Storybook URL • Shows visual changes | | **2** | Non-forked PR | All branches | ✅ Cloudflare Pages | • Live Storybook preview • pages.dev URL • No visual diff | | **3** | Forked PR | Any branch | ✅ Cloudflare Pages | • Live Storybook preview • pages.dev URL • No visual diff • Runs via separate workflow to avoid permission problems | ### Key Points: - **Chromatic** (paid service): Only for `version-bump-*` branches to track visual changes between releases - **Cloudflare Pages** (free): For all other PRs to provide Storybook preview without visual diff - **Security**: Forked PRs use a separate workflow with limited permissions ## Changes ### New Features - 🚀 **Cloudflare Pages Deployment**: Storybook builds are now deployed to Cloudflare Pages for easy preview - 🔄 **Unified Script**: Single reusable shell script handles both deployment and PR comments - 🔒 **Better Security**: Separate workflows for fork vs non-fork PRs ### Improvements - ♻️ **Retry Logic**: Automatic retry (3 attempts) for failed deployments - 📝 **Better Comments**: Clearer PR comments with deployment links and status - 🎯 **Simplified Logic**: Workflow logic moved to reusable script for easier maintenance - ⚡ **Better Error Handling**: Proper handling of different workflow conclusions - 🐛 **Fixed Comment Output**: Deployment logs now properly redirected to stderr ### Files Changed - `scripts/cicd/pr-storybook-deploy-and-comment.sh` - New unified deployment script - `.github/workflows/chromatic.yaml` - Updated to use new script and add deployment - `.github/workflows/pr-storybook-deploy.yaml` - New workflow for forked PRs - `.github/workflows/pr-storybook-comment.yaml` - Removed (replaced by new system) ## ⚠️ Required Setup The Cloudflare Pages project `comfyui-storybook` needs to be created under the organization's Cloudflare account: ```bash # Using the account ID from GitHub secrets export CLOUDFLARE_ACCOUNT_ID=5ae914d9b87bcf6bbe1ada5798f92a5f export CLOUDFLARE_API_TOKEN=<org-token> wrangler pages project create comfyui-storybook --production-branch main ``` **Note**: The project must be created under the same Cloudflare account that's configured in the GitHub secrets. ## Test Plan - [x] Create Cloudflare Pages project `comfyui-storybook` - [x] Workflow runs successfully on all PRs - [x] PR comments are posted correctly at start and completion - [x] Storybook deploys to Cloudflare Pages with correct URL - [ ] Fork PRs are handled by separate workflow - [ ] Non-fork PRs get inline deployment - [ ] version-bump-* branches show Chromatic info ## References - Similar improvements for Playwright: #5459 - Based on pattern from sno-fix-playwright-comment-2 branch 🤖 Generated with [Claude Code](https://claude.ai/code) --------- Co-authored-by: Claude <noreply@anthropic.com>

- Improves Storybook deployment and PR comment workflow similar to the Playwright improvements in #5425 - Creates unified deployment and commenting system for better maintainability - Adds Cloudflare Pages deployment for Storybook previews | Case | PR Type | Branch | Deployment | Features | |------|---------|--------|------------|----------| | **1** | Non-forked PR | `version-bump-*` | ✅ Chromatic | • Visual diff testing • Chromatic build URL • Chromatic Storybook URL • Shows visual changes | | **2** | Non-forked PR | All branches | ✅ Cloudflare Pages | • Live Storybook preview • pages.dev URL • No visual diff | | **3** | Forked PR | Any branch | ✅ Cloudflare Pages | • Live Storybook preview • pages.dev URL • No visual diff • Runs via separate workflow to avoid permission problems | - **Chromatic** (paid service): Only for `version-bump-*` branches to track visual changes between releases - **Cloudflare Pages** (free): For all other PRs to provide Storybook preview without visual diff - **Security**: Forked PRs use a separate workflow with limited permissions - 🚀 **Cloudflare Pages Deployment**: Storybook builds are now deployed to Cloudflare Pages for easy preview - 🔄 **Unified Script**: Single reusable shell script handles both deployment and PR comments - 🔒 **Better Security**: Separate workflows for fork vs non-fork PRs - ♻️ **Retry Logic**: Automatic retry (3 attempts) for failed deployments - 📝 **Better Comments**: Clearer PR comments with deployment links and status - 🎯 **Simplified Logic**: Workflow logic moved to reusable script for easier maintenance - ⚡ **Better Error Handling**: Proper handling of different workflow conclusions - 🐛 **Fixed Comment Output**: Deployment logs now properly redirected to stderr - `scripts/cicd/pr-storybook-deploy-and-comment.sh` - New unified deployment script - `.github/workflows/chromatic.yaml` - Updated to use new script and add deployment - `.github/workflows/pr-storybook-deploy.yaml` - New workflow for forked PRs - `.github/workflows/pr-storybook-comment.yaml` - Removed (replaced by new system) The Cloudflare Pages project `comfyui-storybook` needs to be created under the organization's Cloudflare account: ```bash export CLOUDFLARE_ACCOUNT_ID=5ae914d9b87bcf6bbe1ada5798f92a5f export CLOUDFLARE_API_TOKEN=<org-token> wrangler pages project create comfyui-storybook --production-branch main ``` **Note**: The project must be created under the same Cloudflare account that's configured in the GitHub secrets. - [x] Create Cloudflare Pages project `comfyui-storybook` - [x] Workflow runs successfully on all PRs - [x] PR comments are posted correctly at start and completion - [x] Storybook deploys to Cloudflare Pages with correct URL - [ ] Fork PRs are handled by separate workflow - [ ] Non-fork PRs get inline deployment - [ ] version-bump-* branches show Chromatic info - Similar improvements for Playwright: #5459 - Based on pattern from sno-fix-playwright-comment-2 branch 🤖 Generated with [Claude Code](https://claude.ai/code) --------- Co-authored-by: Claude <noreply@anthropic.com>

Comfy-Org deleted a comment from github-actions bot Sep 8, 2025

snomiao and others added 9 commits September 8, 2025 09:51

fix: Show deployment status for all workflow conclusions

f1cd35d

- Display deployment status even when build fails - Show specific messages for different failure scenarios - Better visibility into what happened with the deployment

fix: Show correct build steps based on branch type

4b71587

- Only mention Chromatic visual tests for version-bump branches - Show Cloudflare deployment message for regular PRs - Dynamically adjust starting comment based on branch name

refactor(pr-storybook-deploy-and-comment.sh): simplify comment handli…

aa5cbbe

…ng by using gh pr comment for editing existing comments chore(pr-storybook-deploy-and-comment.sh): remove unnecessary variable and streamline existing comment check logic

chore(workflows): update workflow names for clarity and consistency i…

7c84722

…n CI configuration

snomiao force-pushed the sno-fix-storybook-deploy branch from d17c831 to 4e06b2b Compare September 8, 2025 09:51

snomiao and others added 8 commits September 10, 2025 09:28

fix: Show deployment status for all workflow conclusions

b6ff745

- Display deployment status even when build fails - Show specific messages for different failure scenarios - Better visibility into what happened with the deployment

fix: Show correct build steps based on branch type

45b0b54

- Only mention Chromatic visual tests for version-bump branches - Show Cloudflare deployment message for regular PRs - Dynamically adjust starting comment based on branch name

refactor(pr-storybook-deploy-and-comment.sh): simplify comment handli…

157e4b4

…ng by using gh pr comment for editing existing comments chore(pr-storybook-deploy-and-comment.sh): remove unnecessary variable and streamline existing comment check logic

chore(workflows): update workflow names for clarity and consistency i…

93bfbbf

…n CI configuration

snomiao added 8 commits September 11, 2025 10:26

fix: Show deployment status for all workflow conclusions

6ac4354

- Display deployment status even when build fails - Show specific messages for different failure scenarios - Better visibility into what happened with the deployment

fix: Show correct build steps based on branch type

58248f3

- Only mention Chromatic visual tests for version-bump branches - Show Cloudflare deployment message for regular PRs - Dynamically adjust starting comment based on branch name

refactor(pr-storybook-deploy-and-comment.sh): simplify comment handli…

4f71b87

…ng by using gh pr comment for editing existing comments chore(pr-storybook-deploy-and-comment.sh): remove unnecessary variable and streamline existing comment check logic

chore(workflows): update workflow names for clarity and consistency i…

07fccbe

…n CI configuration

snomiao force-pushed the sno-fix-storybook-deploy branch from 4e06b2b to 909eebb Compare September 11, 2025 01:26

snomiao added 3 commits September 11, 2025 01:51

resolve merge conflicts in storybook deployment workflow

83c7392

resolve merge conflicts from remote branch

9f25464

chore: trigger CI/CD for storybook deployment

7c40c64

snomiao and others added 5 commits September 11, 2025 02:58

Merge branch 'main' into sno-fix-storybook-deploy

41988f5

Merge branch 'main' into sno-fix-storybook-deploy

652ff70

Merge branch 'main' into sno-fix-storybook-deploy

a9c2236

snomiao marked this pull request as ready for review September 22, 2025 21:59

dosubot bot added the size:XL This PR changes 500-999 lines, ignoring generated files. label Sep 22, 2025

snomiao added 2 commits September 24, 2025 13:37

Merge branch 'main' into sno-fix-storybook-deploy

5caabf6

Merge branch 'main' into sno-fix-storybook-deploy

9e2edb7

christian-byrne approved these changes Sep 30, 2025

View reviewed changes

christian-byrne merged commit af10082 into main Sep 30, 2025
26 checks passed

christian-byrne deleted the sno-fix-storybook-deploy branch September 30, 2025 04:42

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[ci] Improve Storybook deployment and comment workflow #5426

[ci] Improve Storybook deployment and comment workflow #5426

Uh oh!

snomiao commented Sep 8, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 8, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 8, 2025 •

edited

Loading

Uh oh!

snomiao commented Sep 11, 2025

Uh oh!

snomiao commented Sep 11, 2025 •

edited

Loading

Key improvements identified from pr-playwright-*.yaml:

Files Modified:

Commit:

Uh oh!

snomiao commented Sep 22, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[ci] Improve Storybook deployment and comment workflow #5426

[ci] Improve Storybook deployment and comment workflow #5426

Uh oh!

Conversation

snomiao commented Sep 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Deployment Cases Matrix

Key Points:

Changes

New Features

Improvements

Files Changed

⚠️ Required Setup

Test Plan

References

Uh oh!

github-actions bot commented Sep 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎭 Playwright Test Results

📈 Summary

📊 Test Reports by Browser

Uh oh!

github-actions bot commented Sep 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🎨 Storybook Build Status

🔗 Links

Uh oh!

snomiao commented Sep 11, 2025

Uh oh!

snomiao commented Sep 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📋 Task List: Update Storybook Workflows

Key improvements identified from pr-playwright-*.yaml:

🚀 Implementation Tasks:

Files Modified:

Commit:

Uh oh!

snomiao commented Sep 22, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

snomiao commented Sep 8, 2025 •

edited

Loading

github-actions bot commented Sep 8, 2025 •

edited

Loading

github-actions bot commented Sep 8, 2025 •

edited

Loading

snomiao commented Sep 11, 2025 •

edited

Loading