change: [M3-8659] - Incorporate Product Family Groups in Side Nav #11080

hana-akamai · 2024-10-09T20:47:11Z

Description 📝

More products are getting added to Cloud Manager, so we need to make sure our side navigation menu can accommodate them.

This PR introduces collapsible Product families into the side nav to allow more products to be shown while also giving users the ability to hide/show relevant families. Additionally, individual product icons have been removed in favor of Product family icons

Note: The Monitor product family icon is still in discussion. Create menu dropdown will be updated in M3-8728.

Changes 🔄

Product nav links have been moved inside an accordion except for Managed
- The default state for the accordions is expanded
- Collapsed accordions are saved to preferences so state is maintained
Individual product icons have been removed, only product families will have icons
- Empty state landing pages have been updated accordingly
When the side menu is collapsed, only product family icons are displayed
- Hovering over the side menu while it is in the collapsed state will expand the menu with all the items
The active product family icon will be green

Code clean up:

Removed old unused prefetch code 🧹
Migrated styles to Styled components
Moved PrimaryLink to its own component

Preview 📷

Before	After
	Screen.Recording.2024-10-28.at.1.38.17.PM.mov

How to test 🧪

Verification steps

(How to verify changes)

Pull this PR locally and check different states of the side nav menu
To test Managed, you can use the MSW to set Managed to enabled

As an Author I have considered 🤔

Check all that apply

jdamore-linode · 2024-10-17T17:29:38Z

@hana-akamai Happy to address the test failures! I'm guessing we'll need to make changes to some of our utils and a bunch of the tests, so I'll try to take a closer look soon!

hana-akamai · 2024-10-17T19:25:49Z

@jdamore-linode this is still a WIP so things are probably going to change, I'll let you know when this is ready for review!

github-actions · 2024-10-24T18:29:14Z

Coverage Report: ✅
Base Coverage: 87.15%
Current Coverage: 87.23%

hana-akamai · 2024-10-28T18:14:21Z

packages/manager/src/components/PrimaryNav/PrimaryLink.tsx

@@ -0,0 +1,71 @@
+import { BetaChip } from '@linode/ui';


This file was more or less moved from PrimaryNav

hana-akamai · 2024-10-28T18:15:30Z

packages/manager/src/components/PrimaryNav/PrimaryNav.tsx

+    let updatedCollapsedAccordions;
+    if (collapsedAccordions.includes(index)) {
+      updatedCollapsedAccordions = collapsedAccordions.filter(
+        (accIndex) => accIndex !== index
+      );
+      updatePreferences({
+        collapsedSideNavProductFamilies: updatedCollapsedAccordions,
+      });
+      setCollapsedAccordions(updatedCollapsedAccordions);
+    } else {
+      updatedCollapsedAccordions = [...collapsedAccordions, index];
+      updatePreferences({
+        collapsedSideNavProductFamilies: updatedCollapsedAccordions,
+      });
+      setCollapsedAccordions(updatedCollapsedAccordions);
+    }


This is ugly, but I figured it was better than using a useEffect to update preferences

hana-akamai · 2024-10-28T18:16:13Z

packages/manager/src/components/PrimaryNav/PrimaryNav.tsx

-}
-
-// Wrapper around PrimaryLink that includes the usePrefetchHook.
-export const PrefetchPrimaryLink = React.memo(


I removed the prefetching code since it's no longer being used

jdamore-linode · 2024-10-28T20:52:51Z

packages/manager/cypress/e2e/core/cloudpulse/cloudpulse-navigation.spec.ts

Thanks for the workarounds here! Going forward I think we'll eventually have to refactor or extend ui.nav's helpers to account for product families in the nav bar:

Situations where a nav item has the same title as a product family (like in this case with "Monitor")

Resilience against cases where a nav item can't be found because its product family is collapsed

Happy to have these tests passing with cy.get in the meantime, thanks again! I'll take a closer look at this and open a ticket for a long term solution soon!

mjac0bs

This was looking really good!

create-volume.smoke.spec.ts does seem to be failing consistently (CI and locally for me) - might be something going on there, unless this test started being recently flaky outside of this PR - I just hadn't noticed much of that.

packages/manager/src/components/PrimaryNav/PrimaryNav.tsx

packages/manager/src/features/Domains/DomainsEmptyLandingPage.tsx

packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts

packages/manager/src/components/PrimaryNav/PrimaryNav.tsx

jdamore-linode · 2024-10-29T19:55:59Z

| create-volume.smoke.spec.ts does seem to be failing consistently

Ah, good catch @mjac0bs!

@hana-akamai this is just because the test is trying to click the "Storage" tab on the Linode details page, but the new "Storage" nav heading is tripping up the test. Super easy fix to replace the cy.findByText('Storage') calls in create-volume.spec.ts on lines 155 and 288 with:

cy.get('main').within(() => {
    cy.findByText('Storage').should('be.visible').click();
});

Edit: and confirmed that the other 2 CI failures can be disregarded 👍

hana-akamai · 2024-10-29T21:03:18Z

Thanks @jdamore-linode! Is the cy.get('main').within(() => {... syntax preferred over using data-testid?

mjac0bs

Overall functionality looks good - product family icons are highlighted when on that page, expanded and collapsed state works as expected, transitions look good (one note about the Akamai logo), and the empty state page icons all match up.

Approving pending that one test Joe noted and ideally an adjustment to the logo transition. Thanks for the changes and the follow up ticket for the icons.

packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts

dwiley-akamai

This looks great!

Collapsed/expanded sections + collapsed/expanded menu persist across refreshes ✅
Highlighted product family icon based on page you are currently on in Cloud ✅
Code review ✅

packages/manager/src/features/VPCs/VPCLanding/VPCEmptyState.tsx

packages/manager/src/components/PrimaryNav/PrimaryLink.tsx

jdamore-linode · 2024-10-30T15:41:59Z

Thanks @jdamore-linode! Is the cy.get('main').within(() => {... syntax preferred over using data-testid?

@hana-akamai For that test, Cypress is trying to click the "Storage" tab on the Linode details page instead of a nav item, but the new Storage product family heading is causing the test to trip up since it only expects to find one instance of the text "Storage". I used cy.get('main').within(() => {...}) there just because it was a quick and easy way to limit Cypress's selection to the main part of the app (i.e. excluding the nav sidebar altogether) which sidesteps the issue, but if that "Storage" tab does have a test ID, selecting it that way would be totally valid too 👍

cypress · 2024-10-30T19:35:03Z

Cloud Manager E2E Run #6759

Run Properties: Failed #6759 • 6c80781ec8: change: [M3-8659] - Incorporate Product Family Groups in Side Nav (#11080)

Project	`Cloud Manager E2E`
Branch Review	`develop`
Run status	`Failed #6759`
Run duration	`28m 56s`
Commit	`6c80781ec8: change: [M3-8659] - Incorporate Product Family Groups in Side Nav (#11080)`
Committer	`Hana Xu`
View all properties for this run ↗︎

Test results
Failures	`2`
Flaky	`4`
Pending	`2`
Skipped	`0`
Passing	`443`
View all changes introduced in this branch ↗︎

Tests for review

cypress/e2e/core/databases/resize-database.spec.ts • 2 failed tests

View Output Video

Test		Artifacts
Resizing existing clusters > Resizes a g6-standard-6 MySQL v8.x 3-node cluster > Can resize active database clusters		`Screenshots` `Video`
Resizing existing clusters > Resizes a g6-dedicated-16 MySQL v5.x 3-node cluster > Can resize active database clusters		`Screenshots` `Video`

linodes/resize-linode.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
resize linode > resizes a linode by increasing size: warm migration		`Screenshots` `Video`

linodes/linode-config.spec.ts • 2 flaky tests

View Output Video

Test		Artifacts
Linode Config management > End-to-End > Boots a config		`Screenshots` `Video`
Linode Config management > End-to-End > Clones a config		`Screenshots` `Video`

objectStorage/object-storage.e2e.spec.ts • 1 flaky test

View Output Video

Test		Artifacts
object storage end-to-end tests > can upload, access, and delete objects		`Screenshots` `Video`

hana-akamai added 3 commits October 8, 2024 11:56

migrate primaryNav styles to styled components

7041aa0

wip nav styling

a6a7487

update nav styling

bfb17b2

hana-akamai added the UX/UI Changes for UI/UX to review label Oct 9, 2024

hana-akamai self-assigned this Oct 9, 2024

hana-akamai added the Work in Progress label Oct 9, 2024

hana-akamai marked this pull request as ready for review October 9, 2024 21:07

hana-akamai requested a review from a team as a code owner October 9, 2024 21:07

hana-akamai requested review from dwiley-akamai and coliu-akamai and removed request for a team October 9, 2024 21:07

hana-akamai added 2 commits October 15, 2024 11:19

remove old prefetch code

4e5d6c1

Merge branch 'develop' into M3-8659-update-side-nav

e4a7f8a

hana-akamai requested a review from a team as a code owner October 16, 2024 16:13

hana-akamai requested review from cliu-akamai and removed request for a team October 16, 2024 16:13

Merge branch 'develop' into M3-8659-update-side-nav

7e94445

jdamore-linode self-requested a review October 17, 2024 17:27

hana-akamai added 9 commits October 17, 2024 17:18

clean up code

4256898

move PrimaryLink to own component file

fcb1c11

save collapsed state to preferences

463783b

styling

e2c9c83

styling and move active link check to PrimaryNav

7deceae

Merge branch 'develop' into M3-8659-update-side-nav

d3db3b2

clean up

c4a2596

fix active icon height

41c2078

fix unit tests

1de8ca7

hana-akamai added 7 commits October 24, 2024 15:27

fix active accordion height

a495454

fix failing e2e test

618030b

update nav link padding

3b4f157

update empty state landing page icons to match product family icon

3db04f6

fix managed styling

2d0c40d

Added changeset: Incorporate Product Family Groups in Side Nav

4c0903f

fix storybook burger menu position

81f2e7a

hana-akamai commented Oct 28, 2024

View reviewed changes

hana-akamai removed the Work in Progress label Oct 28, 2024

hana-akamai requested a review from mjac0bs October 28, 2024 18:23

add icon color transition

90c177a

jdamore-linode reviewed Oct 28, 2024

View reviewed changes

mjac0bs reviewed Oct 28, 2024

View reviewed changes

hana-akamai added 4 commits October 29, 2024 12:33

styling fixes and clean up

ef5275b

Merge branch 'develop' into M3-8659-update-side-nav

cbaf49e

use theme colors where possible

0572f8d

oops add back beta chip positioning

245259c

mjac0bs approved these changes Oct 29, 2024

View reviewed changes

packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts Show resolved Hide resolved

packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts Outdated Show resolved Hide resolved

packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts Outdated Show resolved Hide resolved

dwiley-akamai approved these changes Oct 29, 2024

View reviewed changes

packages/manager/src/features/VPCs/VPCLanding/VPCEmptyState.tsx Show resolved Hide resolved

packages/manager/src/components/PrimaryNav/PrimaryLink.tsx Outdated Show resolved Hide resolved

hana-akamai added 2 commits October 30, 2024 12:13

styling and feedback

f74bad9

Merge branch 'develop' into M3-8659-update-side-nav

de73435

hana-akamai merged commit 6c80781 into linode:develop Oct 30, 2024
22 of 23 checks passed

jaalah-akamai mentioned this pull request Nov 7, 2024

Release v1.132.0 - release → staging #11220

Merged

hana-akamai mentioned this pull request Nov 12, 2024

Release v1.132.0 - staging → master #11249

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

change: [M3-8659] - Incorporate Product Family Groups in Side Nav #11080

change: [M3-8659] - Incorporate Product Family Groups in Side Nav #11080

hana-akamai commented Oct 9, 2024 •

edited

Loading

jdamore-linode commented Oct 17, 2024

hana-akamai commented Oct 17, 2024

github-actions bot commented Oct 24, 2024 •

edited

Loading

hana-akamai Oct 28, 2024 •

edited

Loading

hana-akamai Oct 28, 2024

hana-akamai Oct 28, 2024

jdamore-linode Oct 28, 2024

mjac0bs left a comment

jdamore-linode commented Oct 29, 2024 •

edited

Loading

hana-akamai commented Oct 29, 2024

mjac0bs left a comment

dwiley-akamai left a comment

jdamore-linode commented Oct 30, 2024

cypress bot commented Oct 30, 2024

change: [M3-8659] - Incorporate Product Family Groups in Side Nav #11080

change: [M3-8659] - Incorporate Product Family Groups in Side Nav #11080

Conversation

hana-akamai commented Oct 9, 2024 • edited Loading

Description 📝

Changes 🔄

Preview 📷

How to test 🧪

Verification steps

As an Author I have considered 🤔

jdamore-linode commented Oct 17, 2024

hana-akamai commented Oct 17, 2024

github-actions bot commented Oct 24, 2024 • edited Loading

hana-akamai Oct 28, 2024 • edited Loading

Choose a reason for hiding this comment

hana-akamai Oct 28, 2024

Choose a reason for hiding this comment

hana-akamai Oct 28, 2024

Choose a reason for hiding this comment

jdamore-linode Oct 28, 2024

Choose a reason for hiding this comment

mjac0bs left a comment

Choose a reason for hiding this comment

jdamore-linode commented Oct 29, 2024 • edited Loading

hana-akamai commented Oct 29, 2024

mjac0bs left a comment

Choose a reason for hiding this comment

dwiley-akamai left a comment

Choose a reason for hiding this comment

jdamore-linode commented Oct 30, 2024

cypress bot commented Oct 30, 2024

Cloud Manager E2E Run #6759

Tests for review

hana-akamai commented Oct 9, 2024 •

edited

Loading

github-actions bot commented Oct 24, 2024 •

edited

Loading

hana-akamai Oct 28, 2024 •

edited

Loading

jdamore-linode commented Oct 29, 2024 •

edited

Loading