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

* feat(marketplace): integrate search query with filter dropdown counts

* Updated changeset patch version

Co-authored-by: Karthik Jeeyar <karthik@redhat.com>

---------

Co-authored-by: Karthik Jeeyar <karthik@redhat.com>

Author: lokanandaprabhu

workspaces/marketplace/.changeset/integrate-search-with-filters.md

@@ -0,0 +1,8 @@
+---
+'@red-hat-developer-hub/backstage-plugin-marketplace': patch
+---
+
+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

workspaces/marketplace/plugins/marketplace/src/hooks/useFilteredPluginFacet.ts

@@ -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({
@@ -50,6 +51,7 @@ export const useFilteredPluginFacet = (
       'getFilteredPluginFacet',
       facet,
       filters,
+      fullTextSearch,
       excludeFilterType,
     ],
     queryFn: async () => {
@@ -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='))

workspaces/marketplace/plugins/marketplace/src/hooks/useFilteredSupportTypes.ts

@@ -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({
@@ -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='))
@@ -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,