Skip to content

feat(Extensions): integrate search query with filter dropdown counts for dynamic filtering #1717

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 10, 2025
Merged

feat(Extensions): integrate search query with filter dropdown counts for dynamic filtering #1717

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9d6596d
feat(marketplace): integrate search query with filter dropdown counts
lokanandaprabhu Nov 3, 2025
065911c
Updated changeset patch version
lokanandaprabhu Nov 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions workspaces/marketplace/.changeset/integrate-search-with-filters.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
'@red-hat-developer-hub/backstage-plugin-marketplace': minor
---

Integrate search query with filter dropdown counts for dynamic filtering

- Ensure filter dropdowns show only relevant options after search is applied
- Maintain AND logic across search + category + author + support filters
12 changes: 12 additions & 0 deletions workspaces/marketplace/plugins/marketplace/src/hooks/useFilteredPluginFacet.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ export const useFilteredPluginFacet = (
const marketplaceApi = useMarketplaceApi();

const filters = searchParams.getAll('filter');
const fullTextSearch = searchParams.get('q');

// Get all plugins and apply client-side filtering for accurate facet calculation
const pluginsQuery = useQuery({
Expand All @@ -50,6 +51,7 @@ export const useFilteredPluginFacet = (
'getFilteredPluginFacet',
facet,
filters,
fullTextSearch,
excludeFilterType,
],
queryFn: async () => {
Expand Down Expand Up @@ -82,6 +84,16 @@ export const useFilteredPluginFacet = (

let filteredPlugins = pluginsQuery.data.items;

// Apply search filter first (always applied, not excluded)
if (fullTextSearch) {
const lowerCaseSearch = fullTextSearch.toLocaleLowerCase('en-US');
filteredPlugins = filteredPlugins.filter(plugin => {
const lowerCaseValue =
plugin.metadata?.title?.toLocaleLowerCase('en-US');
return lowerCaseValue?.includes(lowerCaseSearch);
});
}

// Apply category filters
const categories = activeFilters
.filter(filter => filter.startsWith('category='))
Expand Down
13 changes: 12 additions & 1 deletion workspaces/marketplace/plugins/marketplace/src/hooks/useFilteredSupportTypes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ export const useFilteredSupportTypes = () => {
const marketplaceApi = useMarketplaceApi();

const filters = searchParams.getAll('filter');
const fullTextSearch = searchParams.get('q');

// Get all plugins (not pre-filtered)
const allPluginsQuery = useQuery({
Expand Down Expand Up @@ -67,6 +68,16 @@ export const useFilteredSupportTypes = () => {

let availablePlugins = allPluginsQuery.data.items;

// Apply search filter first (always applied)
if (fullTextSearch) {
const lowerCaseSearch = fullTextSearch.toLocaleLowerCase('en-US');
availablePlugins = availablePlugins.filter(plugin => {
const lowerCaseValue =
plugin.metadata?.title?.toLocaleLowerCase('en-US');
return lowerCaseValue?.includes(lowerCaseSearch);
});
}

// Apply category filter if present
const categories = nonSupportFilters
.filter(filter => filter.startsWith('category='))
Expand Down Expand Up @@ -204,7 +215,7 @@ export const useFilteredSupportTypes = () => {
(a, b) => (a.displayOrder || 0) - (b.displayOrder || 0),
);
return result;
}, [allPluginsQuery.data?.items, nonSupportFilters, t]);
}, [allPluginsQuery.data?.items, nonSupportFilters, fullTextSearch, t]);

return {
data: items,
Expand Down