upcoming: [UIE-9814] - Implement the main product grid with category grouping and load more functionality

[harsh-akamai]

Description 📝

Implement the main product grid with category grouping and load more functionality

Changes 🔄

• Added a CategorySection for each Marketplace Category
• Added a ProductCard Skeleton loading state

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

Preview 📷

Default State	Loading State

How to test 🧪

Prerequisites

• Enable MarketplaceV2 feature flag
• Enable Legacy Server Handlers in MSW

Verification steps

(How to verify changes)

• Verify the Category Section match the figma mockups
• Verify that the UI gracefully handles API failures
• Verify that the Loading state works as expected

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

[tvijay-akamai]

Logo img in the card is having css styles of max-height: 32px; max-width: 32px; causing image to look smaller. Size should be as per figma. Not related to this PR scope but something that need to be addressed.

[davyd-akamai]

Hi guys @harsh-akamai @tvijay-akamai A few comments from my side:

1. Now the card background is the same as the page background, or it’s transparent. It should be white and use the alias.background.normal token.

2. On large screen resolutions, four cards appear in a row. Keeping in mind that we use the same grid layout, we should always have three cards in the desktop grid.

3. Check a typography for a product card type tag. It seems it's too small

4. On hover, we should add a shadow token shadow.S to a card and keep the same border color alias.border.normal. It's visible here: https://www.figma.com/design/OBi1a7v7id5FgprLnzSnny/Cloud-Marketplace?node-id=75-372&t=LhzqKaWX2itYRL8f-1

5. Margin between cards inside a category should be 24px. Margin between categories - 32px.

6. The position of a product tile tag is wrong, it should be placed on the right side (but I see a screenshot above that it positioned correctly, so maybe I don't see the last changes on my preview link. Same for a logo, it doesn't appear on my link)

7. Not sure if you’ve already worked on responsiveness, but if so, please double-check how the cards look on mobile and tablet. They have different dimensions compared to the desktop view.

8. I also see that you’ve used hex values instead of tokens. Will they be implemented later?

[dwiley-akamai]

I think we'll want some padding so the content isn't flush with the left edge:

Is there a plan for unit tests for any of these new components?

[dwiley-akamai]

Suggested change

	categortId?: number;
	categoryId?: number;

[harsh-akamai]

Nice catch! Addressed this. I've also added the unit tests 🚀

[davyd-akamai]

Hey @harsh-akamai, @tvijay-akamai Looks much, much better - thank you!

I think from my comments above, only points 3 (type tag typography) and 4 (hover shadow) are left.

I’m really glad to see margins on tablet and mobile! Please just check the card height on tablet and mobile. In Figma, we have 320px height on tablet and 300px on mobile.

[harsh-akamai]

Addressed the remanining points in 9e5c270
cc: @davyd-akamai @pmakode-akamai

[pmakode-akamai]

Overall, looks good to me. thank you!

[pmakode-akamai]

I was wondering if we should also add a hasNextPage check from useInfiniteMarketplaceProductsQuery

[linode-gh-bot]

Cloud Manager UI test results

🔺 1 failing test on test run #16 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
1 Failing	854 Passing	11 Skipped	38m 50s

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"

[pmakode-akamai]

Suggested change

	} = useAllMarketplaceCategoriesQuery({}, {}, true);
	} = useAllMarketplaceCategoriesQuery({}, {}, isMarketplaceV2FeatureEnabled);

Let's pass a flag instead of a hardcoded value here before merging this PR