upcoming: [UIE-9816] - Add Marketplace filters to the Products landing page

[pmakode-akamai]

Description 📝

Add Marketplace filters to the Products landing page.

Below is the X-Filter header structure that will be sent to the API based on the filters selected by the user in the UI:

Details

1. Search by product name / description only When the user enters text in the search input without selecting category or type:

X-Filter
{
  "category_id": 1,
  "+or": [
    {
      "name": {
        "+contains": "Product ABC"
      }
    },
    {
      "short_description": {
        "+contains": "Product ABC"
      }
    }
  ]
}   

2. Category and Type selected (no search input)
   When only category and type are selected from the dropdowns:

X-Filter
{
  "category_id": 3,
  "type_id": 4
}   

3. Search by product name / description + Category + Type
   When the user enters search text and also selects category and type:

X-Filter
{
  "category_id": 3,
  "+or": [
    {
      "name": {
        "+contains": "Product ABC"
      }
    },
    {
      "short_description": {
        "+contains": "Product ABC"
      }
    }
  ],
  "type_id": 6
}   

4. Search by Partner name + Category + Type
   When the search input matches partner names, matching partner IDs are resolved and included in the +or condition along with product name/description:

X-Filter
{
  "category_id": 3,
  "+or": [
    {
      "name": {
        "+contains": "partner"
      }
    },
    {
      "short_description": {
        "+contains": "partner"
      }
    },
    {
      "partner_id": 1
    },
    {
      "partner_id": 2
    },
    {
      "partner_id": 3
    }
  ],
  "type_id": 6
}   

5. Search by Type name + Category
   When the search input matches type names and only category is selected, matching type IDs are included in the +or condition:

X-Filter
{
  "category_id": 3,
  "+or": [
    {
      "name": {
        "+contains": "type"
      }
    },
    {
      "short_description": {
        "+contains": "type"
      }
    },
    {
      "type_id": 1
    },
    {
      "type_id": 2
    }
  ]
}   

Note

The APIs are not available yet.

Changes 🔄

• Add Marketplace filters to the Products landing page
• Load 5 categories (with products) on initial load and load 5 more on scroll (and so on...)
• Auto-fetch next batch of 5 if current batch has no results when filters are applied
• Display an empty state when no categories with products are available
• Add support for searching partners or types by text, with logic to find the corresponding searchDerivedTypeIds or searchDerivedPartnerIds to use in the X filter

Scope 🚢

Upon production release, changes in this PR will be visible to:

• All customers
• Some customers (e.g. in Beta or Limited Availability)
• No customers / Not applicable

Target release date 🗓️

N/A

Preview 📷

Filters:

Empty States:

• When filters are applied:
  

• When no categories with products are available:
  

How to test 🧪

Prerequisites

• Enable MSW and MarketplaceV2 feature flag

Verification steps

• Verify Filtering:
  • Ensure the correct X filters are passed (check that the format is correct) when using search input only, dropdown values only, or both
  • Verify searching partners by name or types by name, and ensure the corresponding searchDerivedPartnerIds or searchDerivedTypeIds are passed in the X filter in the correct format
  • Select a type from the dropdown, then try searching for a type name in the input. Verify that searchDerivedTypeIds are not passed when the type is already selected from the dropdown
• When no filters are applied
  • Verify that the next batch of 5 items is fetched only on scroll (and so on...), and no auto-fetch happens
• When filters are applied
  • Verify that the next batch is only auto-fetched if the current batch API calls has no results
    • If all batches are auto-fetched and no results are found, verify that the empty state is displayed
  • Once results appear in any batch, verify that subsequent next batches are fetched via normal waypoint (scroll-based) lazy loading behavior
• Verify empty states:
  • When no categories with products are available
  • When no results appear after applying filters
  • Ensure the Reset Filters link button works as expected from the empty state
• Ensure there are no regressions
• Ensure all checks pass

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

• I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

• All tests and CI checks are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[pmakode-akamai]

This change ensures that the internal state correctly synchronizes with the value prop even when it is an empty string. Previously, the condition value && value !== textFieldValue prevented updates when value was "", so clearing the search field would not update the internal state or reflect in the UI. By changing the condition to value !== textFieldValue, the field now correctly resets, and the UI and internal state stay in sync when the search field is cleared.

We can test this by resetting the filters from the Filters empty state to ensure the field clears/resets correctly in the UI.

[dwiley-akamai]

This component is used throughout the app, have you tested other areas to confirm there have been no regressions/behavior changes? I spot checked a few places and didn't notice any.

[pmakode-akamai]

I did check and didn't notice any issues either

[dwiley-akamai]

Verification steps ✅
Code review ✅

[dwiley-akamai]

This component is used throughout the app, have you tested other areas to confirm there have been no regressions/behavior changes? I spot checked a few places and didn't notice any.

[tvijay-akamai]

As discussed, When filtering also let's make use of waypoint and handle empty state by making api call in batches if no products are found.

[tvijay-akamai]

Thanks for making this change to use allCategoriesLoaded here.

[pmakode-akamai]

As discussed, When filtering also let's make use of waypoint and handle empty state by making api call in batches if no products are found.

This logic is already handled in the current implementation of MarketplaceLanding.tsx‎ at L199-L222

[linode-gh-bot]

Cloud Manager UI test results

🔺 1 failing test on test run #12 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
1 Failing	864 Passing	11 Skipped	42m 7s

Details

Failing Tests
	Spec	Test
❌	clone-linode.spec.ts	Cloud Manager Cypress Tests→clone linode » can clone a Linode from Linode details page

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/linodes/clone-linode.spec.ts"