upcoming: [UIE-9818, UIE-9820, UIE-9821, UIE-9822] - Implement product details for Marketplace #13271

tvijay-akamai · 2026-01-12T18:33:26Z

Details page for partner referral product

Description 📝

Refactor Marketplace details and Add dynamic product content to each tab for Products details page.

Note

There have been some changes in the approach for Marketplace 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 products

Changes 🔄

List any change(s) relevant to the reviewer.

Refactor marketplace product details to not use any apis or unnecessary logic. Refactored to frontend static approach as advised by management.
Added product details
Added product tabs with relevant content received from Product managers.
Currently working with the mock data as we are yet to receive actual product content from product managers.

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 🗓️

27 Feb 2026

How to test 🧪

Prerequisites

Reproduction steps

Verification steps

(How to verify changes)

Directly visit the url http://localhost:3000/cloud-marketplace/catalog/1. One the details is linked to the product card on the landing page from there user will visit this page

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

… details page for partner referral product

tvijay-akamai · 2026-01-13T03:07:11Z

Ignore the styling for the content received from api in the tabs. Davyd will be providing the styling for different html elements and once we get I add it here accordingly. For now i have added sample styles to make the content look good.

…html received as per figma

pmakode-akamai

I've left some initial comments and will revisit the PR for a second look

packages/api-v4/src/marketplace/types.ts

packages/manager/src/features/Marketplace/ProductDetails/ProductDetails.tsx

packages/manager/src/features/Marketplace/ProductDetails/ProductDetailsTabs.tsx

packages/manager/src/mocks/serverHandlers.ts

packages/manager/src/features/Marketplace/ProductDetails/ProductDetailsTabs.tsx

…mments

harsh-akamai

The padding inside the details paper is more than what the figma mockup shows.

packages/manager/src/features/Marketplace/ProductDetails/sanitizeHtml.ts

packages/manager/src/features/Marketplace/ProductDetails/ProductDetails.tsx

harsh-akamai · 2026-01-15T07:48:12Z

packages/manager/src/features/Marketplace/ProductDetails/ProductDetails.tsx

+                    fontSize: theme.tokens.font.FontSize.Xs,
+                    lineHeight: theme.tokens.font.LineHeight.Xs,


fontSize and lineHeight is redundant. font covers both the properties

harsh-akamai · 2026-01-15T07:48:41Z

packages/manager/src/features/Marketplace/ProductDetails/ProductDetails.tsx

+                fontSize: theme.tokens.font.FontSize.Xs,
+                lineHeight: theme.tokens.font.LineHeight.Xs,


harsh-akamai · 2026-01-15T07:59:08Z

packages/manager/src/features/Marketplace/ProductDetails/ProductDetailsTabs.tsx

+              <HtmlContentRenderer content={details.overview.description} />
+            </ContentSection>
+            <VideoPlaceholder>
+              <PlayCircleIcon />


The icon gets hidden in dark mode

Video Icon dark mode

harsh-akamai · 2026-01-15T08:00:49Z

packages/manager/src/features/Marketplace/ProductDetails/ProductDetailsTabs.tsx

+    if (details.pricing?.description) {
+      availableTabs.push({
+        content: <HtmlContentRenderer content={details.pricing.description} />,
+        label: 'Pricing',
+        pendoId: 'Cloud Marketplace Details-Pricing',
+      });
+    }
+
+    if (details.documentation?.description) {
+      availableTabs.push({
+        content: (
+          <HtmlContentRenderer content={details.documentation.description} />
+        ),
+        label: 'Documentation',
+        pendoId: 'Cloud Marketplace Details-Documentation',
+      });
+    }
+
+    if (details.support?.description) {
+      availableTabs.push({
+        content: <HtmlContentRenderer content={details.support.description} />,
+        label: 'Support',
+        pendoId: 'Cloud Marketplace Details-Support',
+      });
+    }


nit: We could instead have a map containing the pendoId and label instead of defining separate if conditions for non-overview tabs

…mments

harsh-akamai · 2026-01-15T11:01:30Z

packages/manager/src/features/Marketplace/ProductDetails/ProductDetails.styles.ts

+  paddingLeft: '8px',
+  paddingRight: '8px',
+  paddingTop: '8px',


I believe we can remove this

@tvijay-akamai Any update on this if it's required or not? If required, then we should use spacingFunction here and for the gap

packages/manager/src/features/Marketplace/ProductDetails/ProductDetails.tsx

harsh-akamai · 2026-01-15T11:06:32Z

Can we add a changeset for this pr?

abailly-akamai · 2026-01-15T11:33:08Z

What is the reason for one PR covering 4 tickets and nearing 1000 lined addition to the codebase? From what I can see this is a sensitive feature rendering server side sent HTML? Apart from being quite a suspicious pattern, this kind of work warrants a more careful approach with small bits PRs.

I am already seeing far too many comments and I am concerned about the cleanliness of this feature as a whole, especially when I see the omission of sanitizing HTML that shouldn't be returned by an APIv4 endpoint.

I'd recommend taking a step back - preventing merging for the time being

abailly-akamai · 2026-01-15T11:32:01Z

packages/manager/src/mocks/serverHandlers.ts

+            </table>
+            <h3>Status Page</h3>
+            <p>Check the current status of Akamai services at <a href="https://status.akamai.com">status.akamai.com</a></p>
+          `,


We have a fundamental issue if your endpoint is returning this random HTML. Who allowed this design?

github-actions · 2026-01-31T00:39:21Z

This PR is stale because it has been open 15 days with no activity. Please attend to this PR or it will be closed in 5 days

…details with new static design with approach

pmakode-akamai · 2026-02-02T13:03:01Z

packages/manager/src/features/Marketplace/data/details/100001.ts

+
+import type { ProductTabDetails } from '.';
+
+const details: ProductTabDetails = {


This feels a bit hard to read as is. Since we're not planning to use separate .md files, maybe we could define overview, pricing, documentation, and support as separate markdown constants above and then reference them here. That would make the file easier to scan and maintain.

pmakode-akamai · 2026-02-02T13:10:59Z

packages/manager/src/features/Marketplace/ProductDetails/pages/index.ts

+export interface ProductTabDetails {
+  documentation?: {
+    description: string;
+  };
+  overview?: {
+    description: string;
+  };
+  pricing?: {
+    description: string;
+  };
+  support?: {
+    description: string;
+  };
+}


Suggested change

export interface ProductTabDetails {

documentation?: {

description: string;

};

overview?: {

description: string;

};

pricing?: {

description: string;

};

support?: {

description: string;

};

}

export interface ProductTabDetails {

documentation?: string;

overview?: string;

pricing?: string;

support?: string;

}

Since this is currently static content and not coming from an API, do we need the extra { description } nesting? Using documentation?: string (and similar for other tabs) will simplify the model.

pmakode-akamai · 2026-02-02T13:18:40Z

packages/manager/src/features/Marketplace/ProductDetails/pages/akamai-cloud-computing.ts

I think it might be better to move the data/details package under ProductDetails/ for better organization (and rename it to something like pages). Since these files represent product details page content, a structure like ProductDetails/pages/* would keep them closer to where they're used and make the intent clearer.

pmakode-akamai · 2026-02-02T13:26:18Z

packages/manager/src/features/Marketplace/ProductDetails/pages/index.ts

+ * Each product's details are imported statically and available synchronously.
+ */
+const detailsMap: Record<number, ProductTabDetails> = {
+  100001: product100001,


This isn't a blocker, but it might be worth checking with Product or UX whether we're okay with using sequential IDs like 100001, 100002, etc., OR if there's a recommended convention. For eg., OneClickApps uses larger non-sequential numeric IDs (e.g. 401697), so it might be worth aligning with that pattern if there's a reason behind it

As mentioned above, please use slugs

pmakode-akamai · 2026-02-02T13:30:24Z

packages/manager/src/features/Marketplace/ProductDetails/ProductDetails.styles.ts

+    fontSize: theme.tokens.font.FontSize.Xxxs,
+    fontFamily: theme.font.bold,


fontFamily doesn't seem to be working here. The text should be bold as per the Figma. I think we can achieve this by setting font and fontSize afterward

font: theme.font.bold, fontSize: theme.tokens.font.FontSize.Xxxs, // Must come after font

pmakode-akamai · 2026-02-02T13:53:12Z

packages/ui/src/assets/icons/play-circle.svg

Also, let's add a changeset for this new icon (PlayCircleIcon) in the ui package

packages/manager/src/features/Marketplace/ProductDetails/ProductDetailsTabs.tsx

harsh-akamai

Will the Overview Details tab include a video in the near future? Currently, the tab structure assumes only string-based content, and a video placeholder has been hard-coded. If a video is planned, we can add mock data to simulate how the video component would appear.

Overview Tab

harsh-akamai · 2026-02-03T06:58:18Z

packages/manager/src/features/Marketplace/ProductDetails/ProductDetails.tsx

+  );
+
+  // Tab content is optional. If not present for this product, we still show the page.
+  const details = getProductTabDetails(numericProductId);


Suggested change

const details = getProductTabDetails(numericProductId);

const details = React.useMemo( () => getProductTabDetails(numericProductId), [numericProductId]));

useMemo Not needed as we're already fetching from map.

Also no clarity on video yet, not important for now. we can leave it as is.

harsh-akamai · 2026-02-03T06:59:42Z

packages/manager/src/features/Marketplace/ProductDetails/ProductDetails.tsx

+  if (!product) {
+    return (
+      <ErrorState
+        errorText={'Unable to load product details. Please try again later.'}
+      />
+    );
+  }


I believe we can move this if-block before the productDetails are fetched?

packages/manager/src/features/Marketplace/ProductDetails/ProductDetails.tsx

packages/manager/src/features/Marketplace/ProductDetails/TabContent.styles.ts

harsh-akamai · 2026-02-03T07:09:20Z

packages/manager/src/features/Marketplace/ProductDetails/HtmlContent.styles.ts

+ * This provides consistent styling for all HTML elements across tabs
+ * Styles follow Figma design specifications
+ */
+export const StyledHtmlContent = styled('div')(({ theme }) => ({


Suggested change

export const StyledHtmlContent = styled('div')(({ theme }) => ({

export const StyledTabContent = styled('div')(({ theme }) => ({

pmakode-akamai

thanks @tvijay-akamai -- overall this looks good. I've left a few more comments and questions that need to be looked into.

pmakode-akamai · 2026-02-03T09:11:30Z

packages/manager/src/features/Marketplace/ProductDetails/ProductDetails.styles.ts

+  paddingLeft: '8px',
+  paddingRight: '8px',
+  paddingTop: '8px',


@tvijay-akamai Any update on this if it's required or not? If required, then we should use spacingFunction here and for the gap

pmakode-akamai · 2026-02-03T09:13:59Z

packages/manager/src/features/Marketplace/ProductDetails/ProductDetails.styles.ts

+  alignItems: 'flex-start',
+  alignSelf: 'stretch',
+  display: 'flex',
+  gap: '24px',


We should use spacingFunction for all gap values in this file

pmakode-akamai · 2026-02-03T09:20:00Z

packages/manager/src/features/Marketplace/ProductDetails/ProductDetailsTabs.styles.ts

+  alignItems: 'flex-start',
+  alignSelf: 'stretch',
+  display: 'flex',
+  gap: '24px',


Could we use spacingFunction here and below as well?

pmakode-akamai · 2026-02-03T09:26:16Z

packages/manager/src/features/Marketplace/ProductDetails/TabContent.styles.ts

+    fontStyle: 'normal',
+    lineHeight: theme.tokens.font.LineHeight.M,
+    margin: 0,
+    paddingBottom: theme.tokens.spacing.S16,


I see that we generally use spacingFunction, and we're already using it in the styles above. I don't think using theme.tokens.spacing.S16 is wrong either, but I'm not sure which way we should standardize on for consistency. @abailly-akamai thoughts?

This will indeed result in the same outcome, but for consistency spacingFunction is preferred.

abailly-akamai · 2026-02-03T09:29:40Z

packages/manager/src/features/Marketplace/ProductDetails/pages/100001.ts

+  support: supportMarkdown,
+};
+
+export default details;


let's use named exports

abailly-akamai · 2026-02-03T09:36:53Z

packages/manager/src/features/Marketplace/ProductDetails/pages/100001.ts

@@ -0,0 +1,55 @@
+/**
+ * Product tab details for id 100001.


can we please have IDs as product name slugs?? Static magic numbers are far more confusing and not appropriate for this, especially as your list will grow.

Poor URL readability: /catalog/spinkube is more intuitive than /catalog/100001

Not self-documenting: Looking at 100001.ts, you have no idea what product it represents without looking it up

Developer experience: When debugging or creating new products, you have to constantly look up which ID maps to which product

URL sharing: Users sharing links can't tell what product they're sharing

abailly-akamai · 2026-02-03T09:40:44Z

packages/manager/src/features/Marketplace/ProductDetails/pages/index.ts

+ * Each product's details are imported statically and available synchronously.
+ */
+const detailsMap: Record<number, ProductTabDetails> = {
+  100001: product100001,


As mentioned above, please use slugs

abailly-akamai · 2026-02-03T09:41:29Z

packages/manager/src/features/Marketplace/ProductDetails/ProductDetails.styles.ts

+  alignSelf: 'stretch',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '16px',


use spacingFunction for ALL your gaps

abailly-akamai · 2026-02-03T09:42:09Z

packages/manager/src/features/Marketplace/ProductDetails/ProductDetailsTabs.styles.ts

+  alignItems: 'flex-start',
+  alignSelf: 'stretch',
+  display: 'flex',
+  gap: '24px',


same with gaps

abailly-akamai · 2026-02-03T09:46:57Z

packages/manager/src/features/Marketplace/ProductDetails/TabContent.styles.ts

+    fontSize: theme.tokens.font.FontSize.Xs,
+    gap: '8px',
+    lineHeight: theme.tokens.font.LineHeight.Xs,
+    padding: '12px 16px 12px 12px',


same comment with paddings and gaps

abailly-akamai · 2026-02-03T09:47:08Z

packages/manager/src/features/Marketplace/ProductDetails/ProductDetailsTabs.styles.ts

+  display: 'flex',
+  flexDirection: 'column',
+  gap: theme.spacingFunction(8),
+  height: '202px',


Are we ok with a set height here rather than a responsive container?

Also, are we serving videos locally? Pictures is one thing but this is concerning

No videos will not be served locally. Currently there are no videos in beta.

linode-gh-bot · 2026-02-03T11:44:28Z

Cloud Manager UI test results

🎉 865 passing tests on test run #12 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`0 Failing`	`865 Passing`	`11 Skipped`	`38m 1s`

abailly-akamai

Thanks for your patience, finding a good MVP implementation and addressing a lot of feedback. While this will likely be revisited as the feature grows, this is a good start - to go on my end 👍

upcoming:[UIE-9818][UIE-9820][UIE-9821][UIE-9822] implemented product…

68565e3

… details page for partner referral product

tvijay-akamai requested a review from a team as a code owner January 12, 2026 18:33

github-project-automation bot added this to Cloud Manager Jan 12, 2026

github-project-automation bot moved this to Review in Cloud Manager Jan 12, 2026

pmakode-akamai assigned tvijay-akamai Jan 13, 2026

pmakode-akamai added Marketplace Ready for Review labels Jan 13, 2026

tvijay-akamai requested review from harsh-akamai and pmakode-akamai January 13, 2026 15:17

upcoming:[UIE-9818][UIE-9820][UIE-9821][UIE-9822] updated styles for …

cc3b981

…html received as per figma

pmakode-akamai changed the title ~~upcoming:[UIE-9818][UIE-9820][UIE-9821][UIE-9822] implemented product details~~ upcoming: [UIE-9818, UIE-9820, UIE-9821, UIE-9822] - Implement product details for Marketplace Jan 14, 2026

pmakode-akamai reviewed Jan 14, 2026

View reviewed changes

pmakode-akamai requested review from abailly-akamai, bnussman-akamai and dwiley-akamai January 14, 2026 13:43

dwiley-akamai reviewed Jan 14, 2026

View reviewed changes

packages/manager/src/features/Marketplace/ProductDetails/ProductDetailsTabs.tsx Outdated Show resolved Hide resolved

upcoming:[UIE-9818][UIE-9820][UIE-9821][UIE-9822] addressed review co…

9301f2f

…mments

tvijay-akamai requested a review from a team as a code owner January 15, 2026 05:20

tvijay-akamai requested review from fabrice-akamai and removed request for a team January 15, 2026 05:20

harsh-akamai reviewed Jan 15, 2026

View reviewed changes

upcoming:[UIE-9818][UIE-9820][UIE-9821][UIE-9822] addressed review co…

1460ada

…mments

harsh-akamai reviewed Jan 15, 2026

View reviewed changes

harsh-akamai added the Missing Changeset label Jan 15, 2026

abailly-akamai requested changes Jan 15, 2026

View reviewed changes

github-project-automation bot moved this from Review to Changes Requested in Cloud Manager Jan 15, 2026

resolved merge conflicts

eb78c8d

github-actions bot added the Stale label Jan 31, 2026

tvijay-akamai added 3 commits February 2, 2026 13:00

Merge branch 'develop' into feature/UIE-9818

105ec0a

upcoming:[UIE-9818][UIE-9820][UIE-9821][UIE-9822] Refactored product …

c1900c3

…details with new static design with approach

removed unused code

ccff7a0

tvijay-akamai removed Missing Changeset Stale labels Feb 2, 2026

pmakode-akamai reviewed Feb 2, 2026

View reviewed changes

Addressed review comments

107958c

harsh-akamai reviewed Feb 3, 2026

View reviewed changes

Addressed review comments

39bee9f

tvijay-akamai requested a review from abailly-akamai February 3, 2026 08:43

harsh-akamai approved these changes Feb 3, 2026

View reviewed changes

tvijay-akamai added Add'tl Approval Needed Waiting on another approval! and removed Ready for Review labels Feb 3, 2026

pmakode-akamai approved these changes Feb 3, 2026

View reviewed changes

abailly-akamai reviewed Feb 3, 2026

View reviewed changes

Addressed comments

6504111

tvijay-akamai requested a review from abailly-akamai February 3, 2026 11:01

abailly-akamai approved these changes Feb 3, 2026

View reviewed changes

github-project-automation bot moved this from Changes Requested to Approved in Cloud Manager Feb 3, 2026

tvijay-akamai merged commit 819fbef into linode:develop Feb 3, 2026
35 checks passed

github-project-automation bot moved this from Approved to Merged in Cloud Manager Feb 3, 2026

tvijay-akamai removed the Add'tl Approval Needed Waiting on another approval! label Feb 3, 2026

		fontSize: theme.tokens.font.FontSize.Xs,
		lineHeight: theme.tokens.font.LineHeight.Xs,


		import type { ProductTabDetails } from '.';

		const details: ProductTabDetails = {

		fontSize: theme.tokens.font.FontSize.Xxxs,
		fontFamily: theme.font.bold,

	const details = getProductTabDetails(numericProductId);
	const details = React.useMemo( () => getProductTabDetails(numericProductId), [numericProductId]));

	export const StyledHtmlContent = styled('div')(({ theme }) => ({
	export const StyledTabContent = styled('div')(({ theme }) => ({

upcoming: [UIE-9818, UIE-9820, UIE-9821, UIE-9822] - Implement product details for Marketplace #13271

upcoming: [UIE-9818, UIE-9820, UIE-9821, UIE-9822] - Implement product details for Marketplace #13271

Uh oh!

Conversation

tvijay-akamai commented Jan 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description 📝

Changes 🔄

Scope 🚢

Target release date 🗓️

How to test 🧪

Prerequisites

Reproduction steps

Verification steps

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

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

Uh oh!

tvijay-akamai commented Jan 13, 2026

Uh oh!

pmakode-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

harsh-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pmakode-akamai Feb 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

harsh-akamai commented Jan 15, 2026

Uh oh!

abailly-akamai commented Jan 15, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jan 31, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

harsh-akamai left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

tvijay-akamai commented Jan 12, 2026 •

edited

Loading

pmakode-akamai Feb 3, 2026 •

edited

Loading

pmakode-akamai Feb 3, 2026 •

edited

Loading

pmakode-akamai Feb 3, 2026 •

edited

Loading