feat: [M3-8728] - Add Product Families to Create Menu dropdown #11260
Conversation
|
|
||
| import { CreateMenu } from './CreateMenu'; | ||
|
|
||
| describe('CreateMenu', () => { |
There was a problem hiding this comment.
This file was renamed from AddNewMenu and replaced fireEvent with userEvent
| 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]); | ||
| }); | ||
| }); |
| 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 } }, | ||
| }); |
There was a problem hiding this comment.
This test was failing so I added capabilities and flags to ensure isDatabasesEnabled is false in CreateMenu
| description?: string; | ||
| } | ||
|
|
||
| export const CreateMenu = () => { |
There was a problem hiding this comment.
This component was renamed from AddNewMenu
| <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 }} | ||
| /> |
There was a problem hiding this comment.
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
hana-akamai
requested review from
dwiley-akamai and
harsh-akamai
and removed request for
a team
There was a problem hiding this comment.
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
hana-akamai
requested review from
cliu-akamai
and removed request for
a team
|
Coverage Report: ✅ |
|
@dwiley-akamai Good catch, addressed! |
Cloud Manager UI test results🔺 6 failing tests on test run #9 ↗︎
Details
TroubleshootingUse 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" |
||||||||||||||||||||||||||||||||
harsh-akamai
added
Approved
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 🔄
Clean up 🧹 :
userEventoverfireEventPreview 📷
Screen.Recording.2024-11-15.at.2.57.41.PM.mov
How to test 🧪
Verification steps
As an Author, I have considered 🤔
As an Author, before moving this PR from Draft to Open, I confirmed ✅