Skip to content

refactor: [M3-6672] - Refactor <AddNewMenu /> to use MUI rather than Reach UI#9224

Merged
bnussman-akamai merged 10 commits intolinode:developfrom
bnussman-akamai:M3-6672-refactor-add-new-menu-and-only-use-mui
Jun 8, 2023
Merged

refactor: [M3-6672] - Refactor <AddNewMenu /> to use MUI rather than Reach UI#9224
bnussman-akamai merged 10 commits intolinode:developfrom
bnussman-akamai:M3-6672-refactor-add-new-menu-and-only-use-mui

Conversation

@bnussman-akamai
Copy link
Copy Markdown
Member

@bnussman-akamai bnussman-akamai commented Jun 7, 2023

Description 📝

Refactors <AddNewMenu /> to use Material UI and simplifies styles and code in general

Major Changes 🔄

  • Makes this Menu match the style and behavior of our other MUI menus
  • Takes steps to get @reach/* out of the repo 🎉🗑️
    • This allows us to better rely on our theme instead of having to one-off style all of the Reach UI components
    • As we get rid of packages like react-select and @reach/*, our components will naturally become more consistant because they will pull from our MUI theme

Preview 📷

Before After
Screenshot 2023-06-07 at 1 38 53 PM Screenshot 2023-06-07 at 1 38 48 PM

How to test 🧪

  • Test the UI and the functionality of the <AddNewMenu />

@bnussman-akamai bnussman-akamai added the UX/UI Changes for UI/UX to review label Jun 7, 2023
@bnussman-akamai bnussman-akamai self-assigned this Jun 7, 2023
@cypress
Copy link
Copy Markdown

cypress Bot commented Jun 7, 2023

1 failed and 2 flaky tests on run #4137 ↗︎

1 166 3 0 Flakiness 2

Details:

ux feedback
Project: Cloud Manager E2E Commit: 6e7d95bd13
Status: Failed Duration: 13:19 💡
Started: Jun 8, 2023 8:04 PM Ended: Jun 8, 2023 8:18 PM
Failed  cypress/e2e/volumes/resize-volume.spec.ts • 1 failed test

View Output Video

Test Artifacts
volume resize flow > resizes a volume Output Screenshots Video
Flakiness  clone-volume.spec.ts • 1 flaky test

View Output Video

Test Artifacts
volume clone flow > clones a volume Output Screenshots Video
Flakiness  update-volume.spec.ts • 1 flaky test

View Output Video

Test Artifacts
volume update flow > updates a volume's label and tags Output Screenshots Video

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.

@bnussman
Copy link
Copy Markdown
Contributor

bnussman commented Jun 7, 2023

Your PR has a changeset ✅

@bnussman-akamai bnussman-akamai marked this pull request as ready for review June 7, 2023 20:26
Copy link
Copy Markdown
Contributor

@jaalah-akamai jaalah-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested, the new menu looks good

Copy link
Copy Markdown
Contributor

@hkhalil-akamai hkhalil-akamai left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Tested, looks great and the animation is slick! Code cleanup is a plus. Might want a final approval from UX since there are some minor changes to the appearance of the menu.

marginRight: theme.spacing(1),
[theme.breakpoints.down('md')]: {
flex: 1,
const links = [
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love this, super DRY

@bnussman-akamai
Copy link
Copy Markdown
Member Author

I'll double check with UX, thanks @hkhalil-akamai!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Ready for Review UX/UI Changes for UI/UX to review

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants