feat: [M3-8728] - Add Product Families to Create Menu dropdown #11260

hana-akamai · 2024-11-14T17:13:23Z

Description 📝

Add Product Families to the Create Menu Dropdown and display the desktop dropdown as 3 columns in a row; mobile will remain as a single column dropdown

Note: The Storage section was intentionally moved after Networking (different from the Side Nav Menu) since it has less items and can be in the same column as Databases. UX would prefer not to change the Side Nav order as it "reflects the info hierarchy from Ryan McEntee, that is also being used by TechDocs."

Changes 🔄

Add Product Families to Create Menu dropdown

Clean up 🧹 :

Deleted unused nav components
Renamed AddNewMenu to CreateMenu
Variable renaming in PrimaryNav
Updated unit test to use userEvent over fireEvent

Preview 📷

Before	After
	Screen.Recording.2024-11-15.at.2.57.41.PM.mov

How to test 🧪

Verification steps

Open the create menu and ensure you can tab through the items. Clicking links still work as expected, etc
Check mobile view

yarn test CreateMenu

As an Author, I have 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 unit tests are passing
TypeScript compilation succeeded without errors
Code passes all linting rules

hana-akamai · 2024-11-15T21:17:16Z

packages/manager/src/features/TopMenu/CreateMenu/CreateMenu.test.tsx

+
+import { CreateMenu } from './CreateMenu';
+
+describe('CreateMenu', () => {


This file was renamed from AddNewMenu and replaced fireEvent with userEvent

hana-akamai · 2024-11-15T21:17:33Z

packages/manager/src/features/TopMenu/CreateMenu/CreateMenu.test.tsx

+  it('renders product family headings', async () => {
+    const { getAllByRole, getByText } = renderWithTheme(<CreateMenu />);
+    const createButton = getByText('Create');
+    await userEvent.click(createButton);
+    const headings = getAllByRole('heading', { level: 3 });
+    const expectedHeadings = ['Compute', 'Networking', 'Storage', 'Databases'];
+    headings.forEach((heading, i) => {
+      expect(heading).toHaveTextContent(expectedHeadings[i]);
+    });
+  });


New addition

hana-akamai · 2024-11-15T21:18:52Z

packages/manager/src/features/TopMenu/CreateMenu/CreateMenu.test.tsx

+    const account = accountFactory.build({
+      capabilities: [],
+    });
+
+    server.use(
+      http.get('*/account', () => {
+        return HttpResponse.json(account);
+      })
+    );
+
+    const { getByText, queryByText } = renderWithTheme(<CreateMenu />, {
+      flags: { databases: false, dbaasV2: { beta: false, enabled: false } },
+    });


This test was failing so I added capabilities and flags to ensure isDatabasesEnabled is false in CreateMenu

hana-akamai · 2024-11-15T21:19:14Z

packages/manager/src/features/TopMenu/CreateMenu/CreateMenu.tsx

+  description?: string;
+}
+
+export const CreateMenu = () => {


This component was renamed from AddNewMenu

hana-akamai · 2024-11-15T21:20:49Z

packages/manager/src/features/TopMenu/CreateMenu/CreateMenu.tsx

+            <Stack direction="column" tabIndex={-1}>
+              <ProductFamilyGroup
+                handleClose={handleClose}
+                productFamily={productFamilyLinkGroup[0]}
+              />
+            </Stack>
+            <Divider
+              orientation="vertical"
+              sx={{ height: 'auto', margin: 0, marginTop: 1 }}
+            />
+            <Stack direction="column" tabIndex={-1}>
+              <ProductFamilyGroup
+                handleClose={handleClose}
+                productFamily={productFamilyLinkGroup[1]}
+              />
+            </Stack>
+            <Divider
+              orientation="vertical"
+              sx={{ height: 'auto', margin: 0, marginTop: 1 }}
+            />


I avoided mapping here since the MUI Menu components don't like empty fragments and adding a Box to contain things messed up the keyboard tabbing/focus

dwiley-akamai

Unit tests pass locally & in CI ✅
Tabbing and clicking through "Create Menu" dropdown items works ✅
Code review ✅

As the viewport exceeds or falls below 1280px, the section headers lose/gain a background:

Video

Screen.Recording.2024-11-18.at.12.21.18.PM.mov

It happens in dark mode too, where it's more problematic.

The background color for the individual items being so starkly different makes this look visually imbalanced IMO:

Screenshot

github-actions · 2024-11-21T18:29:13Z

Coverage Report: ✅
Base Coverage: 86.82%
Current Coverage: 87.06%

hana-akamai · 2024-11-21T19:25:45Z

@dwiley-akamai Good catch, addressed!

harsh-akamai

Code review ✅
Unitt tests on Local ✅

The menu overlaps the button area when width is less than 1280px

linode-gh-bot · 2024-11-22T22:04:05Z

Cloud Manager UI test results

🔺 6 failing tests on test run #9 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
`6 Failing`	`448 Passing`	`2 Skipped`	`130m 56s`

Details

Failing Tests
	Spec	Test
❌	`linode-storage.spec.ts`	linode storage tab » delete disk
❌	`linode-storage.spec.ts`	linode storage tab » add a disk
❌	`machine-image-upload.spec.ts`	machine image » uploads machine image, mock finish event
❌	`machine-image-upload.spec.ts`	machine image » uploads machine image, mock upload canceled failed event
❌	`machine-image-upload.spec.ts`	machine image » uploads machine image, mock failed to decompress failed event
❌	`machine-image-upload.spec.ts`	machine image » uploads machine image, mock expired upload event

Troubleshooting

Use this command to re-run the failing tests:

yarn cy:run -s "cypress/e2e/core/linodes/linode-storage.spec.ts,cypress/e2e/core/linodes/linode-storage.spec.ts,cypress/e2e/core/images/machine-image-upload.spec.ts,cypress/e2e/core/images/machine-image-upload.spec.ts,cypress/e2e/core/images/machine-image-upload.spec.ts,cypress/e2e/core/images/machine-image-upload.spec.ts"

hana-akamai added 4 commits November 14, 2024 12:10

add product family to create dropdown menu

cab15fc

delete unused nav components

ec2b4b6

fix tab index

f049759

desktop styling

8290c82

hana-akamai added the UX/UI Changes for UI/UX to review label Nov 14, 2024

hana-akamai self-assigned this Nov 14, 2024

hana-akamai added 9 commits November 15, 2024 11:31

fix tabbing

223c401

clean up

5adae13

rename component to CreateMenu

360361f

fix filtering

f17e2f2

fix console menu fragment error

a6c394f

update unit tests

73d2ac8

clean up

4cd1663

Added changeset: Product Families to Create Menu dropdown

1059b00

fix e2e test

d81e693

hana-akamai commented Nov 15, 2024

View reviewed changes

hana-akamai marked this pull request as ready for review November 15, 2024 22:03

hana-akamai requested a review from a team as a code owner November 15, 2024 22:03

hana-akamai requested review from dwiley-akamai and harsh-akamai and removed request for a team November 15, 2024 22:03

dwiley-akamai reviewed Nov 18, 2024

View reviewed changes

hana-akamai added 2 commits November 21, 2024 12:36

Merge branch 'develop' into M3-8728-update-create-menu-family-groups

c730c86

address some feedback

287a712

hana-akamai requested a review from a team as a code owner November 21, 2024 17:54

hana-akamai requested review from cliu-akamai and removed request for a team November 21, 2024 17:54

dark mode styling

43daa46

hana-akamai requested a review from dwiley-akamai November 21, 2024 19:25

harsh-akamai reviewed Nov 22, 2024

View reviewed changes

dwiley-akamai approved these changes Nov 22, 2024

View reviewed changes

styling refinements

f66e1eb

hana-akamai requested a review from harsh-akamai November 22, 2024 21:10

hana-akamai added the Add'tl Approval Needed Waiting on another approval! label Nov 22, 2024

harsh-akamai approved these changes Nov 25, 2024

View reviewed changes

harsh-akamai added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Nov 25, 2024

hana-akamai merged commit f3439da into linode:develop Nov 25, 2024
22 of 23 checks passed

This was referenced Dec 5, 2024

Release v1.133.0 - release → staging #11377

Merged

Release v1.133.0 - staging → master #11378

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: [M3-8728] - Add Product Families to Create Menu dropdown #11260

feat: [M3-8728] - Add Product Families to Create Menu dropdown #11260

hana-akamai commented Nov 14, 2024 •

edited

Loading

hana-akamai Nov 15, 2024

hana-akamai Nov 15, 2024

hana-akamai Nov 15, 2024

hana-akamai Nov 15, 2024

hana-akamai Nov 15, 2024

dwiley-akamai left a comment

github-actions bot commented Nov 21, 2024 •

edited

Loading

hana-akamai commented Nov 21, 2024

harsh-akamai left a comment

linode-gh-bot commented Nov 22, 2024


		import { CreateMenu } from './CreateMenu';

		describe('CreateMenu', () => {

feat: [M3-8728] - Add Product Families to Create Menu dropdown #11260

feat: [M3-8728] - Add Product Families to Create Menu dropdown #11260

Conversation

hana-akamai commented Nov 14, 2024 • edited Loading

Description 📝

Changes 🔄

Preview 📷

How to test 🧪

Verification steps

As an Author, I have considered 🤔

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

hana-akamai Nov 15, 2024

Choose a reason for hiding this comment

hana-akamai Nov 15, 2024

Choose a reason for hiding this comment

hana-akamai Nov 15, 2024

Choose a reason for hiding this comment

hana-akamai Nov 15, 2024

Choose a reason for hiding this comment

hana-akamai Nov 15, 2024

Choose a reason for hiding this comment

dwiley-akamai left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 21, 2024 • edited Loading

hana-akamai commented Nov 21, 2024

harsh-akamai left a comment

Choose a reason for hiding this comment

linode-gh-bot commented Nov 22, 2024

Cloud Manager UI test results

🔺 6 failing tests on test run #9 ↗︎

Details

Troubleshooting

hana-akamai commented Nov 14, 2024 •

edited

Loading

github-actions bot commented Nov 21, 2024 •

edited

Loading