upcoming: [UIE-9816] - Add Marketplace filters to the Products landing page (linode#13292)

* Add filters & waypoint lazyloading

* Added changeset: Add Marketplace filters to the Products landing page

* Minor clean up

* searchDerivedTypeIds only populated if no type is selected

* Update margin bottom

* Minor change

* Use URL search params for marketplace filters

* Center empty state vertically

* Auto-fetch next batch if current batch has no results when filters are applied

* Add pendo ids

* Ensure onLoaded once per filter change

* Revamp - save progress

* Update tests

* Add few changes

* Doc props

* Update changeset

* Input slot props fix

* Order category sections by product count

* Reorganizing utils, types and add test cases

* Keep logos for both theme modes under same dir

* Minor fix

* Separate type imports

Author: pmakode-akamai

packages/manager/.changeset/pr-13292-upcoming-features-1768827347014.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Upcoming Features
+---
+
+Refactor Marketplace V2 and add filters to the Products landing page ([#13292](https://github.com/linode/manager/pull/13292))

packages/manager/public/assets/marketplace/akamai-logo-color.svg

@@ -4,7 +4,7 @@ import { useNavigate } from '@tanstack/react-router';
 import * as React from 'react';
 
 import { useIsDatabasesEnabled } from './features/Databases/utilities';
-import { useIsMarketplaceV2Enabled } from './features/Marketplace/utils';
+import { useIsMarketplaceV2Enabled } from './features/Marketplace/shared';
 import { useIsNetworkLoadBalancerEnabled } from './features/NetworkLoadBalancers/utils';
 import { useIsPlacementGroupsEnabled } from './features/PlacementGroups/utils';
 import { useGlobalKeyboardListener } from './hooks/useGlobalKeyboardListener';

packages/manager/public/assets/marketplace/akamai-logo.svg

@@ -103,7 +103,7 @@ export const DebouncedSearchTextField = React.memo(
 
     // Synchronize the internal state with the prop value when the value prop changes.
     React.useEffect(() => {
-      if (value && value !== textFieldValue) {
+      if (value !== textFieldValue) {
         setTextFieldValue(value);
       }
     }, [value]);

packages/manager/src/GoTo.tsx

@@ -22,7 +22,7 @@ import { useIsACLPEnabled } from 'src/features/CloudPulse/Utils/utils';
 import { useIsDatabasesEnabled } from 'src/features/Databases/utilities';
 import { useIsACLPLogsEnabled } from 'src/features/Delivery/deliveryUtils';
 import { useIsIAMEnabled } from 'src/features/IAM/hooks/useIsIAMEnabled';
-import { useIsMarketplaceV2Enabled } from 'src/features/Marketplace/utils';
+import { useIsMarketplaceV2Enabled } from 'src/features/Marketplace/shared';
 import { useIsNetworkLoadBalancerEnabled } from 'src/features/NetworkLoadBalancers/utils';
 import { useIsPlacementGroupsEnabled } from 'src/features/PlacementGroups/utils';
 import { useFlags } from 'src/hooks/useFlags';

packages/manager/src/components/DebouncedSearchTextField/DebouncedSearchTextField.tsx

@@ -1,194 +1,62 @@
-import {
-  useAllMarketplacePartnersMapQuery,
-  useAllMarketplaceTypesMapQuery,
-  useInfiniteMarketplaceProductsQuery,
-} from '@linode/queries';
 import { useTheme } from '@linode/ui';
 import { useNavigate } from '@tanstack/react-router';
 import * as React from 'react';
 
-import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
-
-import { useIsMarketplaceV2Enabled } from '../utils';
+import { getLogoUrl } from '../shared';
 import { CategorySectionView } from './CategorySectionView';
 
+import type { Category, Product } from '../shared';
 import type { ProductCardData } from './ProductSelectionCard';
-import type { Filter, MarketplaceCategory } from '@linode/api-v4';
-
-const INITIAL_DISPLAY_COUNT = 6;
-const LOAD_MORE_INCREMENT = 6;
-
-export interface GlobalFilters {
-  categoryId?: number;
-  // IDs derived from search query matching category/type/partner names
-  searchDerivedPartnerIds?: number[];
-  searchDerivedTypeIds?: number[];
-  searchQuery?: string;
-  typeId?: number;
-}
 
 export interface CategorySectionProps {
-  category: MarketplaceCategory;
-  filters: GlobalFilters;
+  /**
+   * The unique name of the category this section represents.
+   */
+  categoryName: Category;
+  /**
+   * The list of products belonging to this category.
+   */
+  products: Product[];
 }
 
 export interface ProductCardItem extends ProductCardData {
   id: number;
 }
 
-const useProductsDisplay = (
-  categoryId: number,
-  productsCount: number,
-  filters: GlobalFilters
-) => {
-  const [displayCount, setDisplayCount] = React.useState(
-    Math.min(productsCount, INITIAL_DISPLAY_COUNT)
-  );
-
-  const { isMarketplaceV2FeatureEnabled } = useIsMarketplaceV2Enabled();
-
-  const apiFilter: Filter = {
-    category_id: categoryId,
-    ...(filters.searchQuery
-      ? {
-          '+or': [
-            { name: { '+contains': filters.searchQuery } },
-            { short_description: { '+contains': filters.searchQuery } },
-            // Include search-derived IDs in the OR condition (excluding duplicates)
-            ...(filters.searchDerivedTypeIds?.map((id) => ({ type_id: id })) ??
-              []),
-            ...(filters.searchDerivedPartnerIds?.map((id) => ({
-              partner_id: id,
-            })) ?? []),
-          ],
-        }
-      : {}),
-    ...(filters.typeId ? { type_id: filters.typeId } : {}),
-  };
-
-  const {
-    data: productsData,
-    error,
-    fetchNextPage,
-    isFetchingNextPage,
-    isLoading,
-  } = useInfiniteMarketplaceProductsQuery(
-    apiFilter,
-    isMarketplaceV2FeatureEnabled ?? false
-  );
-
-  const products = React.useMemo(
-    () => productsData?.pages.flatMap((page) => page.data) ?? [],
-    [productsData]
-  );
-
-  return {
-    products,
-    displayCount,
-    setDisplayCount,
-    error,
-    fetchNextPage,
-    isFetchingNextPage,
-    isLoading,
-  };
-};
+const PRODUCTS_PER_BATCH = 6;
 
 export const CategorySection = (props: CategorySectionProps) => {
-  const { category, filters } = props;
+  const { categoryName, products } = props;
   const theme = useTheme();
   const navigate = useNavigate();
 
-  const {
-    products,
-    displayCount,
-    setDisplayCount,
-    error: productsError,
-    fetchNextPage,
-    isFetchingNextPage,
-    isLoading: isProductsLoading,
-  } = useProductsDisplay(category.id, category.products_count, filters);
-
-  const { data: partnersMap, isLoading: isPartnerLoading } =
-    useAllMarketplacePartnersMapQuery();
-
-  const { data: typesMap, isLoading: isTypesLoading } =
-    useAllMarketplaceTypesMapQuery();
-
-  React.useEffect(() => {
-    const shouldFetchMore =
-      !isFetchingNextPage &&
-      products.length > 0 &&
-      displayCount >= products.length &&
-      products.length < category.products_count;
-
-    if (shouldFetchMore) {
-      fetchNextPage();
-    }
-  }, [
-    isFetchingNextPage,
-    products.length,
-    displayCount,
-    category.products_count,
-    fetchNextPage,
-  ]);
-
-  const isLoading = isProductsLoading || isPartnerLoading || isTypesLoading;
+  const [displayCount, setDisplayCount] = React.useState(PRODUCTS_PER_BATCH);
   const productsToDisplay = products.slice(0, displayCount);
-  const hasMoreProducts = category.products_count > displayCount;
-
-  const getLogoUrl = (partnerId: number) => {
-    const partner = partnersMap?.[partnerId];
-    if (!partner) return '';
-
-    return theme.name === 'light'
-      ? partner.logo_url_light_mode
-      : partner.logo_url_dark_mode;
-  };
-
-  const getSkeletonCount = () => {
-    const remaining = category.products_count - displayCount;
-    return Math.min(remaining, LOAD_MORE_INCREMENT);
-  };
-
-  const handleLoadMore = () => {
-    const remaining = category.products_count - displayCount;
-    const increment = Math.min(remaining, LOAD_MORE_INCREMENT);
-    setDisplayCount(displayCount + increment);
-  };
+  const hasMoreProducts = products.length > displayCount;
 
   const handleProductClick = (productId: number) => {
     navigate({ to: `/cloud-marketplace/catalog/${productId}` });
   };
 
   const cardData: ProductCardItem[] = productsToDisplay.map((product) => ({
-    companyName: partnersMap?.[product.partner_id]?.name ?? '',
-    description: product.short_description,
+    companyName: product.partner.name,
+    description: product.shortDescription,
     id: product.id,
-    logoUrl: getLogoUrl(product.partner_id),
+    logoUrl: getLogoUrl(product, theme),
     productName: product.name,
-    productTag: product.tile_tag,
-    type: typesMap?.[product.type_id]?.name ?? '',
+    productTag: product.tileTag,
+    type: product.type.name,
   }));
 
-  const errorMessage = productsError
-    ? getAPIErrorOrDefault(
-        productsError,
-        `Error loading products for category ${category.name}`
-      )[0].reason
-    : '';
-
   return (
     <CategorySectionView
       cardData={cardData}
-      categoryName={category.name}
-      displayCount={displayCount}
-      errorMessage={errorMessage}
+      categoryName={categoryName}
+      displayCount={productsToDisplay.length}
+      errorMessage={''}
       hasMoreProducts={hasMoreProducts}
-      isFetchingNextPage={isFetchingNextPage}
-      isLoading={isLoading}
-      onLoadMore={handleLoadMore}
+      onLoadMore={() => setDisplayCount((prev) => prev + PRODUCTS_PER_BATCH)}
       onProductClick={handleProductClick}
-      skeletonCount={getSkeletonCount()}
     />
   );
 };

packages/manager/src/components/PrimaryNav/PrimaryNav.tsx

@@ -23,11 +23,9 @@ describe('CategorySectionView', () => {
     displayCount: 1,
     errorMessage: '',
     hasMoreProducts: false,
-    isFetchingNextPage: false,
     isLoading: false,
     onLoadMore: vi.fn(),
     onProductClick: vi.fn(),
-    skeletonCount: 1,
   };
 
   it('renders Category name', () => {
@@ -49,6 +47,7 @@ describe('CategorySectionView', () => {
     const propsWithMoreProducts = {
       ...mockProps,
       hasMoreProducts: true,
+      isLoading: false,
     };
 
     const { getByRole } = renderWithTheme(
@@ -60,35 +59,27 @@ describe('CategorySectionView', () => {
     expect(loadMoreButton).toBeVisible();
   });
 
-  it('does not render the load more button if `hasMoreProducts` is false ', () => {
+  it('does not render the load more button if `hasMoreProducts` is false or loading', () => {
     const propsWithoutMoreProducts = {
       ...mockProps,
       hasMoreProducts: false,
+      isLoading: false,
     };
-
-    const { queryByRole } = renderWithTheme(
-      <CategorySectionView {...propsWithoutMoreProducts} />
-    );
-    const loadMoreButton = queryByRole('button', {
-      name: /Load More.../i,
-    });
-    expect(loadMoreButton).toBeNull();
-  });
-
-  it('does not render the load more button while fetching next page', () => {
-    const propsFetchingNextPage = {
+    const propsLoading = {
       ...mockProps,
       hasMoreProducts: true,
-      isFetchingNextPage: true,
+      isLoading: true,
     };
 
-    const { queryByRole } = renderWithTheme(
-      <CategorySectionView {...propsFetchingNextPage} />
+    const { queryByRole: queryByRoleNoMore } = renderWithTheme(
+      <CategorySectionView {...propsWithoutMoreProducts} />
     );
-    const loadMoreButtonWhileFetching = queryByRole('button', {
-      name: /Load More.../i,
-    });
-    expect(loadMoreButtonWhileFetching).toBeNull();
+    expect(queryByRoleNoMore('button', { name: /Load More.../i })).toBeNull();
+
+    const { queryByRole: queryByRoleLoading } = renderWithTheme(
+      <CategorySectionView {...propsLoading} />
+    );
+    expect(queryByRoleLoading('button', { name: /Load More.../i })).toBeNull();
   });
 
   it('renders the correct product details', () => {
@@ -108,14 +99,13 @@ describe('CategorySectionView', () => {
       ...mockProps,
       cardData: [],
       isLoading: true,
-      skeletonCount: 6,
     };
 
     const { getAllByTestId } = renderWithTheme(
       <CategorySectionView {...loadingProps} />
     );
     const items = getAllByTestId('marketplace-skeleton-card');
-    expect(items).toHaveLength(mockProps.skeletonCount);
+    expect(items.length).toBeGreaterThan(0);
   });
 
   it('renders the error message when there is an error', () => {