upcoming: CDS Redesign 2025

packages/manager/.changeset/pr-11537-tech-stories-1737536240938.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Remove Individual Product Entity Icons and Update Story Accordingly ([#11537](https://github.com/linode/manager/pull/11537))

packages/manager/.eslintrc.cjs

@@ -249,6 +249,12 @@ module.exports = {
       '@mui/core',
       '@mui/system',
       '@mui/icons-material',
+      {
+        importNames: ['Typography'],
+        message:
+          'Please use Typography component from @linode/ui instead of @mui/material',
+        name: '@mui/material',
+      },
     ],
     'no-throw-literal': 'warn',
     'no-trailing-spaces': 'warn',

packages/manager/.storybook/preview-head.html

@@ -1,5 +1,3 @@
 <script>
   window.global = window;
-</script>
-
-<link rel="stylesheet" href="/fonts/fonts.css" />
+</script>

packages/manager/cypress/e2e/core/account/betas.spec.ts

@@ -29,7 +29,11 @@ describe('Betas landing page', () => {
     cy.visitWithLogin('/linodes');
     cy.wait('@getFeatureFlags');
 
-    ui.nav.findItemByTitle('Betas').should('be.visible').click();
+    ui.nav
+      .findItemByTitle('Betas')
+      .scrollIntoView()
+      .should('be.visible')
+      .click();
 
     cy.url().should('endWith', '/betas');
 

packages/manager/cypress/e2e/core/account/service-transfer.spec.ts

@@ -166,7 +166,7 @@ describe('Account service transfers', () => {
     cy.get('[data-qa-panel="Received Service Transfers"]')
       .should('be.visible')
       .within(() => {
-        cy.get('[data-testid="KeyboardArrowDownIcon"]').click();
+        cy.get('[role="button"]').click();
         cy.findByText(serviceTransferEmptyState, { exact: false }).should(
           'be.visible'
         );
@@ -176,7 +176,7 @@ describe('Account service transfers', () => {
     cy.get('[data-qa-panel="Sent Service Transfers"]')
       .should('be.visible')
       .within(() => {
-        cy.get('[data-testid="KeyboardArrowDownIcon"]').click();
+        cy.get('[role="button"]').click();
         cy.findByText(serviceTransferEmptyState, { exact: false }).should(
           'be.visible'
         );

packages/manager/cypress/e2e/core/kubernetes/lke-update.spec.ts

@@ -2370,6 +2370,7 @@ describe('LKE ACL updates', () => {
           // Confirm submit button is disabled if form has not been changed
           ui.button
             .findByTitle('Update')
+            .scrollIntoView()
             .should('be.visible')
             .should('not.be.enabled');
 
@@ -2384,6 +2385,7 @@ describe('LKE ACL updates', () => {
           // confirm submit button is now enabled
           ui.button
             .findByTitle('Update')
+            .scrollIntoView()
             .should('be.visible')
             .should('be.enabled');
 
@@ -2404,6 +2406,7 @@ describe('LKE ACL updates', () => {
           // submit
           ui.button
             .findByTitle('Update')
+            .scrollIntoView()
             .should('be.visible')
             .should('be.enabled')
             .click();
@@ -2451,6 +2454,7 @@ describe('LKE ACL updates', () => {
           // Confirm submit button is disabled if form has not been changed
           ui.button
             .findByTitle('Update')
+            .scrollIntoView()
             .should('be.visible')
             .should('not.be.enabled');
 
@@ -2484,6 +2488,7 @@ describe('LKE ACL updates', () => {
           // submit
           ui.button
             .findByTitle('Update')
+            .scrollIntoView()
             .should('be.visible')
             .should('be.enabled')
             .click();
@@ -2568,6 +2573,7 @@ describe('LKE ACL updates', () => {
           // Confirm submit button is disabled if form has not been changed
           ui.button
             .findByTitle('Update')
+            .scrollIntoView()
             .should('be.visible')
             .should('not.be.enabled');
 
@@ -2582,6 +2588,7 @@ describe('LKE ACL updates', () => {
           // confirm submit button is now enabled
           ui.button
             .findByTitle('Update')
+            .scrollIntoView()
             .should('be.visible')
             .should('be.enabled');
 
@@ -2613,6 +2620,7 @@ describe('LKE ACL updates', () => {
           // submit
           ui.button
             .findByTitle('Update')
+            .scrollIntoView()
             .should('be.visible')
             .should('be.enabled')
             .click();
@@ -2729,6 +2737,7 @@ describe('LKE ACL updates', () => {
           // submit
           ui.button
             .findByTitle('Update')
+            .scrollIntoView()
             .should('be.visible')
             .should('be.enabled')
             .click();
@@ -2819,6 +2828,7 @@ describe('LKE ACL updates', () => {
           // submit
           ui.button
             .findByTitle('Update')
+            .scrollIntoView()
             .should('be.visible')
             .should('be.enabled')
             .click();

packages/manager/cypress/e2e/core/linodes/smoke-linode-landing-table.spec.ts

@@ -91,7 +91,7 @@ describe('linode landing checks', () => {
     cy.findByTestId('menu-item-Object Storage').should('be.visible');
     cy.findByTestId('menu-item-Longview').should('be.visible');
     cy.findByTestId('menu-item-Marketplace').should('be.visible');
-    cy.findByTestId('menu-item-Account').should('be.visible');
+    cy.findByTestId('menu-item-Account').scrollIntoView().should('be.visible');
     cy.findByTestId('menu-item-Help & Support').should('be.visible');
   });
 

packages/manager/cypress/e2e/core/stackscripts/smoke-community-stackscripts.spec.ts

@@ -221,10 +221,12 @@ describe('Community Stackscripts integration tests', () => {
                 'Unexpected response received when fetching StackScripts'
               );
             }
-
-            cy.contains(`${stackScripts[0].username} / ${stackScripts[0].label}`).should('be.visible');
+
+            cy.contains(
+              `${stackScripts[0].username} / ${stackScripts[0].label}`
+            ).should('be.visible');
+          });
         });
-      });
     }
   });
 

packages/manager/cypress/e2e/core/stackscripts/update-stackscripts.spec.ts

@@ -265,10 +265,7 @@ describe('Update stackscripts', () => {
       .findByTitle(`Make StackScript ${stackScripts[0].label} Public?`)
       .should('be.visible')
       .within(() => {
-        ui.button
-          .findByTitle('Confirm')
-          .should('be.visible')
-          .click();
+        ui.button.findByTitle('Confirm').should('be.visible').click();
       });
     cy.wait('@mockUpdateStackScript');
     cy.wait('@mockGetStackScripts');

packages/manager/cypress/support/component/index.html

@@ -4,7 +4,6 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="stylesheet" type="text/css" href="fonts/fonts.css">
     <title>Cloud Manager Components</title>
   </head>
   <body>

packages/manager/cypress/support/intercepts/profile.ts

@@ -78,7 +78,27 @@ export const mockGetProfileGrants = (
 export const mockGetUserPreferences = (
   preferences: UserPreferences
 ): Cypress.Chainable<null> => {
-  return cy.intercept('GET', apiMatcher('profile/preferences'), preferences);
+  const defaultPreferences = {
+    // All sidebar categories are expanded.
+    collapsedSideNavProductFamilies: [],
+
+    // Sidebar is not pinned.
+    desktop_sidebar_open: false,
+
+    // Type-to-confirm is enabled.
+    type_to_confirm: true,
+  };
+
+  const resolvedPreferences = {
+    ...defaultPreferences,
+    ...preferences,
+  };
+
+  return cy.intercept(
+    'GET',
+    apiMatcher('profile/preferences'),
+    resolvedPreferences
+  );
 };
 
 /**

packages/manager/cypress/support/ui/locators/common-locators.ts

@@ -11,7 +11,7 @@ export const topMenuItemsLocator = {
   /** Top menu search field. */
   searchInput: '[data-qa-main-search]',
   /** Top menu navigation toggle. */
-  toggleSideMenuButton: '[aria-label="open menu"]',
+  toggleSideMenuButton: '[aria-label="unpin menu"]',
 };
 
 /** Top menu create dropdown items. */

packages/manager/index.html

@@ -4,7 +4,6 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="/fonts/fonts.css" />
     <title>Akamai Cloud Manager</title>
   </head>
   <body>

packages/manager/package.json

@@ -19,9 +19,11 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@fontsource/fira-code": "^5.1.1",
+    "@fontsource/nunito-sans": "^5.1.1",
     "@hookform/resolvers": "3.9.1",
     "@linode/api-v4": "*",
-    "@linode/design-language-system": "^2.6.1",
+    "@linode/design-language-system": "^3.0.0",
     "@linode/search": "*",
     "@linode/ui": "*",
     "@linode/validation": "*",