feat: [M3-7158] - Update NodeJS naming to Node.js for Marketplace

packages/manager/.changeset/pr-11086-tech-stories-1729012343535.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Update NodeJS naming to Node.js for Marketplace ([#11086](https://github.com/linode/manager/pull/11086))

packages/manager/cypress/e2e/core/oneClickApps/one-click-apps.spec.ts

@@ -34,17 +34,20 @@ describe('OneClick Apps (OCA)', () => {
         // For every Marketplace app defined in Cloud Manager, make sure the API returns
         // the nessesary StackScript and that the app renders on the page.
         for (const stackscriptId in oneClickApps) {
-          const stackscript = stackScripts.find((s) => s.id === +stackscriptId);
-          const app = oneClickApps[stackscriptId];
+          const stackscript = stackScripts.find(
+            (stackScript) => stackScript.id === +stackscriptId
+          );
 
           if (!stackscript) {
             throw new Error(
-              `Cloud Manager's fetch to GET /v4/linode/stackscripts did not recieve a StackScript with ID ${stackscriptId}. We expected that StackScript to be in the response for the Marketplace app named "${app.name}".`
+              `Cloud Manager's fetch to GET /v4/linode/stackscripts did not receive a StackScript with ID ${stackscriptId}. We expected a StackScript to be in the response.`
             );
           }
 
+          const displayLabel = getMarketplaceAppLabel(stackscript.label);
+
           // Using `findAllByText` because some apps may be duplicatd under different sections
-          cy.findAllByText(getMarketplaceAppLabel(app.name)).should('exist');
+          cy.findAllByText(displayLabel).should('exist');
         }
       });
     });
@@ -81,7 +84,9 @@ describe('OneClick Apps (OCA)', () => {
       }
 
       cy.findByTestId('one-click-apps-container').within(() => {
-        cy.findAllByLabelText(`Info for "${candidateApp.name}"`)
+        cy.findAllByLabelText(
+          `Info for "${getMarketplaceAppLabel(candidateStackScript.label)}"`
+        )
           .first()
           .scrollIntoView()
           .should('be.visible')
@@ -90,7 +95,7 @@ describe('OneClick Apps (OCA)', () => {
       });
 
       ui.drawer
-        .findByTitle(candidateApp.name)
+        .findByTitle(getMarketplaceAppLabel(candidateStackScript.label))
         .should('be.visible')
         .within(() => {
           cy.findByText(candidateApp.description).should('be.visible');

packages/manager/src/factories/stackscripts.ts

@@ -36,7 +36,6 @@ export const oneClickAppFactory = Factory.Sync.makeFactory<OCA>({
   },
   description: 'A test app',
   logo_url: 'nodejs.svg',
-  name: 'Test App',
   summary: 'A test app',
   website: 'https://www.linode.com',
 });

packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppDetailDrawer.test.tsx

@@ -23,7 +23,7 @@ describe('AppDetailDrawer', () => {
     );
 
     // Verify title renders
-    expect(await findByText('WordPress')).toBeVisible();
+    expect(await findByText(stackscript.label)).toBeVisible();
 
     // Verify description renders
     expect(

packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppDetailDrawer.tsx

@@ -10,7 +10,7 @@ import { Link } from 'src/components/Link';
 import { Typography } from 'src/components/Typography';
 import { sanitizeHTML } from 'src/utilities/sanitizeHTML';
 
-import { useMarketplaceApps } from './utilities';
+import { getMarketplaceAppLabel, useMarketplaceApps } from './utilities';
 
 import type { Theme } from '@mui/material/styles';
 
@@ -69,11 +69,13 @@ export const AppDetailDrawer = (props: Props) => {
   const { classes } = useStyles();
   const { apps } = useMarketplaceApps();
 
-  const selectedApp = apps.find((app) => app.stackscript.id === stackScriptId)
-    ?.details;
+  const selectedApp = apps.find((app) => app.stackscript.id === stackScriptId);
+  const displayLabel = selectedApp
+    ? getMarketplaceAppLabel(selectedApp?.stackscript.label)
+    : '';
 
   const gradient = {
-    backgroundImage: `url(/assets/marketplace-background.png),linear-gradient(to right, #${selectedApp?.colors.start}, #${selectedApp?.colors.end})`,
+    backgroundImage: `url(/assets/marketplace-background.png),linear-gradient(to right, #${selectedApp?.details?.colors.start}, #${selectedApp?.details?.colors.end})`,
   };
 
   return (
@@ -109,59 +111,62 @@ export const AppDetailDrawer = (props: Props) => {
             <img
               src={`/assets/white/${
                 REUSE_WHITE_ICONS[
-                  selectedApp?.logo_url as keyof typeof REUSE_WHITE_ICONS
-                ] || selectedApp?.logo_url
+                  selectedApp?.details
+                    ?.logo_url as keyof typeof REUSE_WHITE_ICONS
+                ] || selectedApp?.details?.logo_url
               }`}
-              alt={`${selectedApp.name} logo`}
+              alt={`${displayLabel} logo`}
               className={classes.image}
             />
             <Typography
               dangerouslySetInnerHTML={{
                 __html: sanitizeHTML({
                   sanitizingTier: 'flexible',
-                  text: selectedApp.name,
+                  text: displayLabel,
                 }),
               }}
-              data-qa-drawer-title={selectedApp.name}
               className={classes.appName}
+              data-qa-drawer-title={displayLabel}
               data-testid="app-name"
               variant="h2"
             />
           </Box>
           <Box className={classes.container}>
             <Box>
-              <Typography variant="h3">{selectedApp.summary}</Typography>
+              <Typography variant="h3">
+                {selectedApp?.details.summary}
+              </Typography>
               <Typography
                 dangerouslySetInnerHTML={{
                   __html: sanitizeHTML({
                     sanitizingTier: 'flexible',
-                    text: selectedApp.description,
+                    text: selectedApp?.details?.description,
                   }),
                 }}
                 className={classes.description}
                 variant="body1"
               />
             </Box>
-            {selectedApp.website && (
+            {selectedApp?.details.website && (
               <Box>
                 <Typography variant="h3">Website</Typography>
                 <Link
                   className={classes.link}
                   external
-                  to={selectedApp.website}
+                  to={selectedApp?.details.website}
                 >
-                  {selectedApp.website}
+                  {selectedApp?.details.website}
                 </Link>
               </Box>
             )}
-            {selectedApp.related_guides && (
+            {selectedApp?.details.related_guides && (
               <Box>
                 <Typography variant="h3">Guides</Typography>
                 <Box display="flex" flexDirection="column" style={{ gap: 6 }}>
-                  {selectedApp.related_guides.map((link, idx) => (
+                  {selectedApp?.details.related_guides.map((link, idx) => (
                     <Link
                       className={classes.link}
-                      key={`${selectedApp.name}-guide-${idx}`}
+                      key={`${displayLabel}-guide-${idx}`}
                       to={link.href}
                     >
                       {sanitizeHTML({
@@ -173,13 +178,13 @@ export const AppDetailDrawer = (props: Props) => {
                 </Box>
               </Box>
             )}
-            {selectedApp.tips && (
+            {selectedApp?.details.tips && (
               <Box>
                 <Typography variant="h3">Tips</Typography>
                 <Box display="flex" flexDirection="column" style={{ gap: 6 }}>
-                  {selectedApp.tips.map((tip, idx) => (
+                  {selectedApp?.details.tips.map((tip, idx) => (
                     <Typography
-                      key={`${selectedApp.name}-tip-${idx}`}
+                      key={`${displayLabel}-tip-${idx}`}
                       variant="body1"
                     >
                       {tip}

packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/AppSection.tsx

@@ -20,10 +20,10 @@ interface Props {
 
 export const AppSection = (props: Props) => {
   const {
+    apps,
     onOpenDetailsDrawer,
     onSelect,
     selectedStackscriptId,
-    apps,
     title,
   } = props;
 

packages/manager/src/features/Linodes/LinodeCreate/Tabs/Marketplace/utilities.ts

@@ -116,7 +116,6 @@ const getDoesMarketplaceAppMatchQuery = (
   const searchableAppFields = [
     String(app.stackscript.id),
     app.stackscript.label,
-    app.details.name,
     app.details.alt_name,
     app.details.alt_description,
     ...app.details.categories,