Extension: Fix Support Type filter count inconsistency when other filters are applied.

Author: lokanandaprabhu

workspaces/marketplace/.changeset/fix-support-type-filter-count.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-marketplace': patch
+---
+
+Fix Support Type filter count inconsistency when other filters are applied.

workspaces/marketplace/plugins/marketplace/src/components/MarketplacePluginFilter.tsx

@@ -22,20 +22,23 @@ import { useSearchParams } from 'react-router-dom';
 import Box from '@mui/material/Box';
 import { MarketplaceAnnotation } from '@red-hat-developer-hub/backstage-plugin-marketplace-common';
 
-import { usePluginFacet } from '../hooks/usePluginFacet';
-import { usePluginFacets } from '../hooks/usePluginFacets';
+import { usePluginFacetsWithFilters } from '../hooks/usePluginFacetsWithFilters';
 import { CustomSelectFilter } from '../shared-components/CustomSelectFilter';
 import { useQueryArrayFilter } from '../hooks/useQueryArrayFilter';
 
 const CategoryFilter = () => {
-  const categoriesFacet = usePluginFacet('spec.categories');
+  // Exclude category filters from facets calculation to get accurate counts
+  const categoriesFacet = usePluginFacetsWithFilters(
+    { facets: ['spec.categories'] },
+    ['spec.categories'],
+  );
   const filter = useQueryArrayFilter('spec.categories');
-  const categories = categoriesFacet.data;
+  const categories = categoriesFacet.data?.['spec.categories'];
 
   const items = useMemo(() => {
     if (!categories) return [];
     return categories.map(category => ({
-      label: category.value,
+      label: `${category.value} (${category.count})`,
       value: category.value,
     }));
   }, [categories]);
@@ -59,21 +62,25 @@ const CategoryFilter = () => {
 };
 
 const AuthorFilter = () => {
-  const authorsFacet = usePluginFacet('spec.authors.name');
-  const authors = authorsFacet.data;
+  // Exclude author filters from facets calculation to get accurate counts
+  const authorsFacet = usePluginFacetsWithFilters(
+    { facets: ['spec.authors.name'] },
+    ['spec.authors.name'],
+  );
+  const authors = authorsFacet.data?.['spec.authors.name'];
   const filter = useQueryArrayFilter('spec.authors.name');
 
   const items = useMemo(() => {
     if (!authors) return [];
     return authors.map(author => ({
-      label: author.value,
+      label: `${author.value} (${author.count})`,
       value: author.value,
     }));
   }, [authors]);
 
   const handleChange = useCallback(
     (_e: any, value: SelectItem[]) => {
-      const newSelection = value.map(v => v.label);
+      const newSelection = value.map(v => v.value);
       filter.set(newSelection);
     },
     [filter],
@@ -109,7 +116,10 @@ const evaluateParams = (
 
 const SupportTypeFilter = () => {
   const [searchParams, setSearchParams] = useSearchParams();
-  const pluginFacets = usePluginFacets({ facets: facetsKeys });
+  // Exclude support type filters from facets calculation to get accurate counts
+  const pluginFacets = usePluginFacetsWithFilters({ facets: facetsKeys }, [
+    'metadata.annotations.extensions.backstage.io/',
+  ]);
 
   const facets = pluginFacets.data;
 

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

@@ -14,17 +14,12 @@
  * limitations under the License.
  */
 
-import { useQuery } from '@tanstack/react-query';
-
-import { useMarketplaceApi } from './useMarketplaceApi';
+import { usePluginFacets } from './usePluginFacets';
 
 export const usePluginFacet = (facet: string) => {
-  const marketplaceApi = useMarketplaceApi();
-  return useQuery({
-    queryKey: ['marketplaceApi', 'getPluginFacet', facet],
-    queryFn: () =>
-      marketplaceApi
-        .getPluginFacets({ facets: [facet] })
-        .then(data => data.facets[facet]),
-  });
+  const facetsQuery = usePluginFacets({ facets: [facet] });
+  return {
+    ...facetsQuery,
+    data: facetsQuery.data?.[facet],
+  };
 };

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

@@ -15,16 +15,63 @@
  */
 
 import { useQuery } from '@tanstack/react-query';
+import { useSearchParams } from 'react-router-dom';
 
-import { GetEntityFacetsRequest } from '@backstage/catalog-client';
+import {
+  GetEntityFacetsRequest,
+  EntityFilterQuery,
+} from '@backstage/catalog-client';
 
 import { useMarketplaceApi } from './useMarketplaceApi';
 
+/**
+ * Converts search param filters to catalog filter format
+ */
+const parseFiltersFromSearchParams = (
+  searchParams: URLSearchParams,
+): EntityFilterQuery => {
+  const filters = searchParams.getAll('filter');
+  const filterObj: EntityFilterQuery = {};
+
+  filters.forEach(filter => {
+    const firstEqualIndex = filter.indexOf('=');
+    if (firstEqualIndex === -1) return;
+
+    const key = filter.substring(0, firstEqualIndex);
+    const value = filter.substring(firstEqualIndex + 1);
+
+    if (filterObj[key]) {
+      // If the key already exists, convert to array or append to existing array
+      if (Array.isArray(filterObj[key])) {
+        (filterObj[key] as string[]).push(value);
+      } else {
+        filterObj[key] = [filterObj[key] as string, value];
+      }
+    } else {
+      filterObj[key] = value;
+    }
+  });
+  return filterObj;
+};
+
 export const usePluginFacets = (request: GetEntityFacetsRequest) => {
+  const [searchParams] = useSearchParams();
   const marketplaceApi = useMarketplaceApi();
+
+  // Build the request with current filters for accurate facet counts
+  const requestWithFilters = {
+    ...request,
+    filter: {
+      ...request.filter,
+      ...parseFiltersFromSearchParams(searchParams),
+    },
+  };
+
   return useQuery({
-    queryKey: ['marketplaceApi', 'getPluginFacets', request],
+    queryKey: ['marketplaceApi', 'getPluginFacets', requestWithFilters],
     queryFn: () =>
-      marketplaceApi.getPluginFacets(request).then(response => response.facets),
+      marketplaceApi
+        .getPluginFacets(requestWithFilters)
+        .then(response => response.facets),
   });
 };

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

@@ -0,0 +1,95 @@
+/*
+ * Copyright The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { useSearchParams } from 'react-router-dom';
+
+import {
+  GetEntityFacetsRequest,
+  EntityFilterQuery,
+} from '@backstage/catalog-client';
+
+import { useMarketplaceApi } from './useMarketplaceApi';
+
+/**
+ * Converts search param filters to catalog filter format, optionally excluding certain filter prefixes
+ */
+const parseFiltersFromSearchParams = (
+  searchParams: URLSearchParams,
+  excludeFilterPrefixes: string[] = [],
+): EntityFilterQuery => {
+  const filters = searchParams.getAll('filter');
+  const filterObj: EntityFilterQuery = {};
+
+  filters.forEach(filter => {
+    const firstEqualIndex = filter.indexOf('=');
+    if (firstEqualIndex === -1) return;
+
+    const key = filter.substring(0, firstEqualIndex);
+    const value = filter.substring(firstEqualIndex + 1);
+
+    // Skip filters that match any of the excluded prefixes
+    if (excludeFilterPrefixes.some(prefix => key.startsWith(prefix))) {
+      return;
+    }
+
+    if (filterObj[key]) {
+      // If the key already exists, convert to array or append to existing array
+      if (Array.isArray(filterObj[key])) {
+        (filterObj[key] as string[]).push(value);
+      } else {
+        filterObj[key] = [filterObj[key] as string, value];
+      }
+    } else {
+      filterObj[key] = value;
+    }
+  });
+
+  return filterObj;
+};
+
+/**
+ * Hook for getting plugin facets with current filters applied,
+ * but excluding specific filter types to get accurate counts for those facet types
+ */
+export const usePluginFacetsWithFilters = (
+  request: GetEntityFacetsRequest,
+  excludeFilterPrefixes: string[] = [],
+) => {
+  const [searchParams] = useSearchParams();
+  const marketplaceApi = useMarketplaceApi();
+
+  // Build the request with current filters (excluding specified prefixes) for accurate facet counts
+  const requestWithFilters = {
+    ...request,
+    filter: {
+      ...request.filter,
+      ...parseFiltersFromSearchParams(searchParams, excludeFilterPrefixes),
+    },
+  };
+  return useQuery({
+    queryKey: [
+      'marketplaceApi',
+      'getPluginFacetsWithFilters',
+      requestWithFilters,
+      excludeFilterPrefixes,
+    ],
+    queryFn: () =>
+      marketplaceApi
+        .getPluginFacets(requestWithFilters)
+        .then(response => response.facets),
+  });
+};