-
Notifications
You must be signed in to change notification settings - Fork 392
upcoming: [UIE-9816] - Add Marketplace filters to the Products landing page #13292
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.
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
base: develop
Are you sure you want to change the base?
Conversation
| if (value && value !== textFieldValue) { | ||
| if (value !== textFieldValue) { | ||
| setTextFieldValue(value); | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I did check and didn't notice any issues either
dwiley-akamai
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Verification steps ✅
Code review ✅
| if (value && value !== textFieldValue) { | ||
| if (value !== textFieldValue) { | ||
| setTextFieldValue(value); | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
|
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. |
packages/manager/src/features/Marketplace/MarketplaceLanding/MarketplaceLanding.tsx
Outdated
Show resolved
Hide resolved
packages/manager/src/features/Marketplace/MarketplaceLanding/CategorySection.tsx
Outdated
Show resolved
Hide resolved
This logic is already handled in the current implementation of MarketplaceLanding.tsx at L199-L222 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Temporarily added these logos from src/assets. These duplicate logos here need to be replaced with the actual product logos (for both light and dark modes) and placed in the appropriate directory
| name: 'Data Service', | ||
| }, | ||
| categories: ['CDN Affiliated'], | ||
| }, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These are dummy product examples. The products added here (in the list) need to be replaced with the actual products.
| data: categories, | ||
| error, | ||
| isLoading, | ||
| } = useAllMarketplaceCategoriesQuery({}, {}, isMarketplaceV2FeatureEnabled); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No need for this query and the related ones (for more context, see the PR description note). We'll create a separate ticket to clean up all the queries and mocks added in queries and other packages cc @harsh-akamai
Cloud Manager UI test results🔺 1 failing test on test run #15 ↗︎
Details
TroubleshootingUse this command to re-run the failing tests: pnpm cy:run -s "cypress/e2e/core/linodes/clone-linode.spec.ts" |
|||||||||||||||||
Description 📝
Refactor Marketplace v2 and Add Marketplace filters to the Products landing page.
Note
There have been some changes in the approach for Marketplace V2 from the Product. The APIs will no longer be available, and we will fully rely on client-side filtering and client-side management of Marketplace V2 products
Changes 🔄
Scope 🚢
Upon production release, changes in this PR will be visible to:
Target release date 🗓️
N/A
Preview 📷
Filters:

Empty States:
When filters are applied:

When no categories with products are available:

How to test 🧪
Prerequisites
Verification steps
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
As an Author, before moving this PR from Draft to Open, I confirmed ✅