Fix: Implement scope-aware filtering for template modal (#8335)

## Summary
- Fixes template filtering to be scope-aware, preventing empty results
when switching categories
- Filters now only show as selected when they exist in the current
category scope
- User selections are still persisted in localStorage for convenience

## Problem
When users selected filters (e.g., Image-specific filters) and switched
to a different category (e.g., Video), the persisted filters would cause
empty results because those filter values didn't exist in the new scope.

## Solution
- Modified `useTemplateFiltering` composable to track which filters are
"active" (applicable to current scope)
- Only active filters are shown as selected in the UI
- Only active filters are applied to the filtering logic
- All user selections are still persisted in localStorage
- When returning to a category, previously selected filters
automatically reactivate if applicable

## Test Plan
Tested manually in browser:
1. Navigate to Image category
2. Select filters like "Image" and "Image Edit" from Tasks dropdown
3. Switch to Video category - filters show as "0 selected" (Image/Image
Edit don't exist in Video)
4. Return to Image category - filters are automatically reselected (2
selected)
5. No empty results when switching between categories

## Changes
- `useTemplateFiltering.ts`: Added scope-aware filtering logic with
active/inactive filter distinction
- `WorkflowTemplateSelectorDialog.vue`: Pass navigation context and use
active filters for UI
- `useTemplateFiltering.test.ts`: Added comprehensive tests for
scope-aware behavior



https://github.com/user-attachments/assets/706ddabf-abad-4ff9-a378-6603d275d15a
This commit is contained in:
Johnpaul Chiwetelu
2026-01-28 03:03:30 +01:00
committed by GitHub
parent aa5125cef6
commit 3b5d285fe2
3 changed files with 147 additions and 14 deletions

View File

@@ -547,13 +547,15 @@ const navigationFilteredTemplates = computed(() => {
return workflowTemplatesStore.filterTemplatesByCategory(selectedNavItem.value)
})
// Template filtering
// Template filtering with scope awareness
const {
searchQuery,
selectedModels,
selectedUseCases,
selectedRunsOn,
sortBy,
activeModels,
activeUseCases,
filteredTemplates,
availableModels,
availableUseCases,
@@ -562,7 +564,7 @@ const {
totalCount,
resetFilters,
loadFuseOptions
} = useTemplateFiltering(navigationFilteredTemplates)
} = useTemplateFiltering(navigationFilteredTemplates, selectedNavItem)
/**
* Coordinates state between the selected navigation item and the sort order to
@@ -595,9 +597,11 @@ watch(selectedNavItem, () => coordinateNavAndSort('nav'))
watch(sortBy, () => coordinateNavAndSort('sort'))
// Convert between string array and object array for MultiSelect component
// Only show selected items that exist in the current scope
const selectedModelObjects = computed({
get() {
return selectedModels.value.map((model) => ({ name: model, value: model }))
// Only include selected models that exist in availableModels
return activeModels.value.map((model) => ({ name: model, value: model }))
},
set(value: { name: string; value: string }[]) {
selectedModels.value = value.map((item) => item.value)
@@ -606,7 +610,7 @@ const selectedModelObjects = computed({
const selectedUseCaseObjects = computed({
get() {
return selectedUseCases.value.map((useCase) => ({
return activeUseCases.value.map((useCase) => ({
name: useCase,
value: useCase
}))