New Workflow Templates Modal #5142
Conversation
…e filtering options
…ering and search functionality
…ng options with use cases and licenses
… new category mappings
…ion and model size
🎭 Playwright Test Results❌ Some tests failed ⏰ Completed at: 09/26/2025, 05:58:52 PM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 08/21/2025, 01:43:04 AM UTC 📊 Build Summary
🔗 Links🎉 Your Storybook is ready for review! |
There was a problem hiding this comment.
The common components in the input folder shouldn’t be modified. They are presentation components, not container components, and are shared across different places. If options need to be filtered, that logic should be passed down from the place where MultiSelect is used.
…in TemplateWorkflowCard
…rolling experience
…areChip in TemplateWorkflowCard
Myestery
force-pushed
the
feat/new-workflow-templates
branch
from
af4859d to
1be55e7
Compare
Custom node's template tagThe custom node's template seems will always has a 
Tag's background colorCan you make the tag's background color slightly darker? When the cover is white, it will be hard to see the text. 
Getting started title needs loading from index.[locale].json as wellSo it can supports i18n as well I18n support is incomplete
|
We can make a tracking issue and try to solve this one in a future PR |
|
All alerts resolved. Learn more about Socket for GitHub. This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored. |
|
I was able to fix the Getting started submenu |
Myestery
removed
the
New Browser Test Expectations
| 'Image API', | ||
| 'Video API' | ||
| ]) | ||
| // Enhanced template interface for easier filtering |
There was a problem hiding this comment.
nit (non-blocking): this could be jsdoc comment so it's available in IDE.
| sourceModule: string | ||
| category?: string | ||
| categoryType?: string | ||
| categoryGroup?: string // 'GENERATION TYPE' or 'CLOSED SOURCE MODELS' |
There was a problem hiding this comment.
nit (non-blocking): same as above
There was a problem hiding this comment.
nit (non-blocking, noting): Generally I think the we should expose errors to the components instead of eating them at the store level. In this case, if an error occurs, we want to throw or expose some reactive error object, then the component is able to decide how to interpret and render that error state in the view layer (e.g., use NoResultsPlaceholder and display the error message set by the store).
There was a problem hiding this comment.
suggestion: this one should be in the templates folder as well, right?
|
Notes from testing:
|
|
Found this bug, not sure if it is from this PR or pre-existing:
|
|
Another bug related to the image caching:
Related: I also wonder if we should increase the intersection observer buffer a bit? |
For now I'm re-rendering the templates when the sort changes. we have the images force cached for now using the cache service so there's no mush risk of waiting |
|
Since layout and card style changes are difficult to review purely through code, I went ahead and applied the style adjustments directly in this PR. These changes are to align the UI with the design, so if everything looks good, please go ahead and merge. Before After |
┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5797-fix-workflow-template-style-review-27a6d73d36508167ac2cfd095a508766) by [Unito](https://www.unito.io)
|
@Myestery Could you post some updated screenshots of the latest version? |
## Summary - Regenerate 3 Playwright screenshot baselines to reflect UI changes from #5142 - Also fixed [this case](https://f01efc75.comfyui-playwright-chromium.pages.dev/#?testId=35f0453d615a452757ca-379124415c5b7e9060d2) (test case for responsive sizing) as it was using outdated logic. New logic: ensures that the nav is collapsed on mobile but visible on tablet and desktop screen sizes. It also ensures that, at all the main breakpoints, at least 1 card is visible (covers bug that the case was originally written for wherein the nav was fully covering the cards at narrow screen widths). ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5802-ci-Regenerate-Playwright-screenshot-baselines-27a6d73d365081768211da0d24bad2c3) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
This pull request refactors and simplifies the template workflow card components and related UI in the codebase. The main changes focus on removing unused or redundant components, improving visual and interaction consistency, and enhancing error handling for images. Below are the most important changes grouped by theme: **Template Workflow Card Refactor and Cleanup** * Removed the `TemplateWorkflowCard.vue` component and its associated test file `TemplateWorkflowCard.spec.ts`, as well as the `TemplateWorkflowCardSkeleton.vue` and `TemplateWorkflowList.vue` components, indicating a shift away from the previous card-based template workflow UI. [[1]](diffhunk://#diff-49569af0404058e8257f3cc0716b066517ce7397dd58744b02aa0d0c61f2a815L1-L139) [[2]](diffhunk://#diff-9fa6fc1470371f0b520d4deda4129fb313b1bea69888a376556f4bd824f9d751L1-L263) [[3]](diffhunk://#diff-bc35b6f77d1cee6e86b05d0da80b7bd40013c7a6a97a89706d3bc52573e1c574L1-L30) [[4]](diffhunk://#diff-48171f792b22022526fca411d3c3a366d48b675dab77943a20846ae079cbaf3bL1-L68) * Removed the `TemplateSearchBar.vue` component, suggesting a redesign or replacement of the search/filter UI for templates. **UI and Interaction Improvements** * Improved the `CardBottom.vue` component by making its height configurable via a `fullHeight` prop, enhancing layout flexibility. * Updated the `CardContainer.vue` component to add hover effects (background, border, shadow, and padding) and support a new `none` aspect ratio for more flexible card layouts. **Image and Input Enhancements** * Enhanced the `LazyImage.vue` component to display a default placeholder image when an image fails to load, improving error handling and user experience. * Improved the `SearchBox.vue` component by making the input focusable when clicking anywhere on the wrapper, and added a template ref for better accessibility and usability. [[1]](diffhunk://#diff-08f3b0c51fbfe63171509b9944bf7558228f6c2596a1ef5338e88ab64585791bL2-R5) [[2]](diffhunk://#diff-08f3b0c51fbfe63171509b9944bf7558228f6c2596a1ef5338e88ab64585791bL16-R17) [[3]](diffhunk://#diff-08f3b0c51fbfe63171509b9944bf7558228f6c2596a1ef5338e88ab64585791bR33-R39) **Minor UI Tweaks** * Adjusted label styling in `SingleSelect.vue` to remove unnecessary overflow handling, simplifying the visual layout. --------- Co-authored-by: Benjamin Lu <benceruleanlu@proton.me> Co-authored-by: Alexander Brown <drjkl@comfy.org> Co-authored-by: github-actions <github-actions@github.com> Co-authored-by: Christian Byrne <cbyrne@comfy.org> Co-authored-by: Claude <noreply@anthropic.com> Co-authored-by: snomiao <snomiao@gmail.com> Co-authored-by: GitHub Action <action@github.com> Co-authored-by: filtered <176114999+webfiltered@users.noreply.github.com> Co-authored-by: Comfy Org PR Bot <snomiao+comfy-pr@gmail.com> Co-authored-by: Jin Yi <jin12cc@gmail.com>
## Summary - Regenerate 3 Playwright screenshot baselines to reflect UI changes from #5142 - Also fixed [this case](https://f01efc75.comfyui-playwright-chromium.pages.dev/#?testId=35f0453d615a452757ca-379124415c5b7e9060d2) (test case for responsive sizing) as it was using outdated logic. New logic: ensures that the nav is collapsed on mobile but visible on tablet and desktop screen sizes. It also ensures that, at all the main breakpoints, at least 1 card is visible (covers bug that the case was originally written for wherein the nav was fully covering the cards at narrow screen widths). ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5802-ci-Regenerate-Playwright-screenshot-baselines-27a6d73d365081768211da0d24bad2c3) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <github-actions@github.com>
This pull request refactors and simplifies the template workflow card components and related UI in the codebase. The main changes focus on removing unused or redundant components, improving visual and interaction consistency, and enhancing error handling for images. Below are the most important changes grouped by theme:
Template Workflow Card Refactor and Cleanup
TemplateWorkflowCard.vuecomponent and its associated test fileTemplateWorkflowCard.spec.ts, as well as theTemplateWorkflowCardSkeleton.vueandTemplateWorkflowList.vuecomponents, indicating a shift away from the previous card-based template workflow UI. [1] [2] [3] [4]TemplateSearchBar.vuecomponent, suggesting a redesign or replacement of the search/filter UI for templates.UI and Interaction Improvements
CardBottom.vuecomponent by making its height configurable via afullHeightprop, enhancing layout flexibility.CardContainer.vuecomponent to add hover effects (background, border, shadow, and padding) and support a newnoneaspect ratio for more flexible card layouts.Image and Input Enhancements
LazyImage.vuecomponent to display a default placeholder image when an image fails to load, improving error handling and user experience.SearchBox.vuecomponent by making the input focusable when clicking anywhere on the wrapper, and added a template ref for better accessibility and usability. [1] [2] [3]Minor UI Tweaks
SingleSelect.vueto remove unnecessary overflow handling, simplifying the visual layout.