mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-19 03:49:33 +00:00
*PR Created by the Glary-Bot Agent* --- ## Summary - Moves distribution-based template filtering from a CSS-level `v-show` gate into the `useTemplateFiltering` composable's data pipeline, guaranteeing that templates not meant for the current distribution never reach the view layer - Fixes "Showing 19 of 419" count mismatch when only 2 templates are visible on Cloud with "Wan 2.2" filter active - Derives `availableModels` and `availableUseCases` from distribution-visible templates so filter dropdowns don't show options that only exist on other distributions - Always prunes `activeModels`/`activeUseCases` against available options to prevent stale persisted selections from causing zero-result filtering ## Root Cause The template selector dialog used `v-show="isTemplateVisibleOnDistribution(template)"` to hide templates that don't match the current distribution (cloud/desktop/local). But `filteredCount` and `totalCount` were computed upstream in the pipeline before this visual filter, so the count text showed all matching templates regardless of distribution visibility. ## Changes - **`useTemplateFiltering.ts`**: Added `visibleTemplates` computed that applies distribution filter at the top of the pipeline. All downstream computeds (`fuse`, `availableModels`, `availableUseCases`, `filteredBySearch`, counts) now operate on this distribution-filtered set. `activeModels`/`activeUseCases` always prune against available options. - **`WorkflowTemplateSelectorDialog.vue`**: Passes `distributions` ref to composable, removes `v-show` gate and `isTemplateVisibleOnDistribution` function. - **`useTemplateFiltering.test.ts`**: 10 new unit tests covering distribution filtering, filter composition (search + model + use case + runsOn), stale persisted selections, multi-distribution templates, and Mac distribution. - **`templateFilteringCount.spec.ts`**: 5 new `@cloud` e2e tests verifying count/card consistency, DOM leak prevention, and filter reset behavior with mocked template data. ## Verification - 22 unit tests passing (12 existing + 10 new) - `pnpm typecheck` clean - `pnpm typecheck:browser` clean - `oxlint` + `eslint` clean on all changed files - E2E tests tagged `@cloud` — designed for CI cloud build execution ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-11418-fix-move-template-distribution-filter-from-v-show-to-data-pipeline-3476d73d365081c3ba09fc8a42eb4c9b) by [Unito](https://www.unito.io) --------- Co-authored-by: Glary-Bot <glary-bot@users.noreply.github.com> Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
30 lines
895 B
TypeScript
30 lines
895 B
TypeScript
import type { Locator, Page } from '@playwright/test'
|
|
|
|
export class TemplatesDialog {
|
|
public readonly root: Locator
|
|
public readonly modelFilter: Locator
|
|
public readonly resultsCount: Locator
|
|
|
|
constructor(public readonly page: Page) {
|
|
this.root = page.getByRole('dialog')
|
|
this.modelFilter = this.root.getByRole('button', { name: /Model Filter/ })
|
|
this.resultsCount = this.root.getByText(/Showing.*of.*templates/i)
|
|
}
|
|
|
|
filterByHeading(name: string): Locator {
|
|
return this.root.filter({
|
|
has: this.page.getByRole('heading', { name, exact: true })
|
|
})
|
|
}
|
|
|
|
getCombobox(name: RegExp | string): Locator {
|
|
return this.root.getByRole('combobox', { name })
|
|
}
|
|
|
|
async selectModelOption(name: string): Promise<void> {
|
|
await this.modelFilter.click()
|
|
await this.page.getByRole('option', { name }).click()
|
|
await this.page.keyboard.press('Escape')
|
|
}
|
|
}
|