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

[hana-akamai]

Description 📝

Highlight the Pull Request's context and intentions.

Changes 🔄

List any change relevant to the reviewer.

• ...
• ...

Preview 📷

Include a screenshot or screen recording of the change

:bulb: Use <video src="" /> tag when including recordings in table.

Before	After
📷	📷

How to test 🧪

Verification steps

(How to verify changes)

• ...
• ...

As an Author I have considered 🤔

Check all that apply

• [ ] 👀 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

[jdamore-linode]

@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]

@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[bot]]

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

[jdamore-linode]

| 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]

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

[jdamore-linode]

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[bot]]

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