Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor: [M3-8814] - Clean up SubnetCreateDrawer and fix animation for VPC subnet drawers #11195

Merged
merged 10 commits into from
Nov 4, 2024
Merged

refactor: [M3-8814] - Clean up SubnetCreateDrawer and fix animation for VPC subnet drawers #11195

merged 10 commits into from
Nov 4, 2024

Conversation

coliu-akamai
Copy link
Contributor

@coliu-akamai coliu-akamai commented Oct 31, 2024 •
edited
Loading

Description 📝

Refactoring SubnetCreateDrawer to use react-hook-form. Doing this in advance of refactoring VPC Create (to also use react-hook-form), since SubnetNode is used by both SubnetCreateDrawer and VPC Create

This adds some dynamic validation to label/ipv4 as well!

(Trying to refactor / clean up VPC logic before VPC part 2)

Changes 🔄

  • make SubnetCreateDrawer use react-hook-form
  • make the form shape match CreateSubnetPayload instead of that extra type I created last year...
  • temporary NewSubnetNode component Removed usage of subnet node from this form

Target release date 🗓️

n/a

How to test 🧪

  • Confirm behavior of SubnetCreate drawer matches prod

Also fixed animation for subnet drawers:

  • confirm SubnetCreate, SubnetEdit, and Assign/Unassign Linode drawers have working animation

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

@coliu-akamai coliu-akamai added the VPC Relating to VPC project label Oct 31, 2024
@coliu-akamai coliu-akamai self-assigned this Oct 31, 2024
@coliu-akamai coliu-akamai marked this pull request as ready for review October 31, 2024 17:13
@coliu-akamai coliu-akamai requested a review from a team as a code owner October 31, 2024 17:13
@coliu-akamai coliu-akamai requested review from cpathipa, abailly-akamai and bnussman-akamai and removed request for a team October 31, 2024 17:13
@github-actions GitHub Actions
Copy link

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

Coverage Report: ✅
Base Coverage: 87.32%
Current Coverage: 87.32%

bnussman-akamai
bnussman-akamai approved these changes Nov 1, 2024
View reviewed changes
Copy link
Member

@bnussman-akamai bnussman-akamai left a comment

Choose a reason for hiding this comment

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

Awesome! Nice clean up and love to see react-hook-form working well for us!

packages/manager/src/features/VPCs/VPCDetail/SubnetCreateDrawer.tsx Outdated Show resolved Hide resolved
@coliu-akamai @bnussman-akamai
Update packages/manager/src/features/VPCs/VPCDetail/SubnetCreateDrawe…
fc8b2de 
…r.tsx

Co-authored-by: Banks Nussman <115251059+bnussman-akamai@users.noreply.github.com>
@coliu-akamai coliu-akamai added Add'tl Approval Needed Waiting on another approval! and removed Ready for Review labels Nov 1, 2024
abailly-akamai
abailly-akamai approved these changes Nov 4, 2024
View reviewed changes
Copy link
Contributor

@abailly-akamai abailly-akamai left a comment

Choose a reason for hiding this comment

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

Looks good! confirmed functionality and styles are at parity with production. ✅

@coliu-akamai Bonus 🌟 if you can fix the drawer animation on open/close. It's also broken in prod, but you know, while you are in there :D

Left a couple minor/non-blocking comments for consideration as well

packages/manager/src/features/VPCs/VPCDetail/SubnetCreateDrawer.tsx Outdated Show resolved Hide resolved
packages/manager/src/features/VPCs/VPCDetail/SubnetCreateDrawer.tsx Outdated
subnet={values}
/>
<form onSubmit={handleSubmit(onCreateSubnet)}>
<Grid sx={{ flexGrow: 1, maxWidth: 460 }}>
Copy link
Contributor

Choose a reason for hiding this comment

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

We gotta find a way to stop having to set a max width on drawer content. Using CSS, we can easily target all children of a drawer form. Outside of the scope of this PR, but we gotta tale a look at this at somepoint.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Removed the grid! Thanks for pointing out - this was a remnant from SubnetNode's (still existing, will cleanup when refactoring VPC Create) styling, but is unnecessary here 😄

I'm not sure where maxWidth is used in other drawers (potentially the VPCCreateDrawer since that uses SubnetNode?) but created a ticket to investigate/fix: M3-8826

@bnussman-akamai bnussman-akamai added Approved Multiple approvals and ready to merge! and removed Add'tl Approval Needed Waiting on another approval! labels Nov 4, 2024
@coliu-akamai
Copy link
Contributor Author

coliu-akamai commented Nov 4, 2024 •
edited
Loading

@abailly-akamai seems like this animation bug is affecting all the subnet VPC drawers... trying to investigate!

@coliu-akamai coliu-akamai changed the title refactor: [M3-8814] - Clean up SubnetCreateDrawer refactor: [M3-8814] - Clean up SubnetCreateDrawer and fix animation for VPC subnet drawers Nov 4, 2024
@coliu-akamai coliu-akamai requested a review from a team as a code owner November 4, 2024 19:58
@coliu-akamai coliu-akamai requested review from AzureLatte and removed request for a team November 4, 2024 19:58
@linode-gh-bot
Copy link
Collaborator

Passing test run #9 ↗︎

❌ 0 Failing | 💚 445 Passing | ↪️ 2 Skipped | 🕐 87m 34s

@coliu-akamai coliu-akamai merged commit 8c3c7fd into linode:develop Nov 4, 2024
23 checks passed
@cypress Cypress
Copy link

cypress bot commented Nov 4, 2024

Cloud Manager E2E    Run #6782

Run Properties:  status check passed Passed #6782  •  git commit 8c3c7fdd82: refactor: [M3-8814] - Clean up SubnetCreateDrawer and fix animation for VPC subn...
Project Cloud Manager E2E
Branch Review develop
Run status status check passed Passed #6782
Run duration 27m 29s
Commit git commit 8c3c7fdd82: refactor: [M3-8814] - Clean up SubnetCreateDrawer and fix animation for VPC subn...
Committer Connie Liu
View all properties for this run ↗︎
Test results
Tests that failed  Failures 0
Tests that were flaky  Flaky 2
Tests that did not run due to a developer annotating a test with .skip  Pending 2
Tests that did not run due to a failure in a mocha hook  Skipped 0
Tests that passed  Passing 445
View all changes introduced in this branch ↗︎

@jaalah-akamai jaalah-akamai mentioned this pull request Nov 7, 2024
Merged
@hana-akamai hana-akamai mentioned this pull request Nov 12, 2024
Merged
@coliu-akamai coliu-akamai deleted the refactor-subnet-create-subnet-node-version branch November 27, 2024 15:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@abailly-akamai abailly-akamai abailly-akamai approved these changes

@cpathipa cpathipa cpathipa approved these changes

@bnussman-akamai bnussman-akamai bnussman-akamai approved these changes

@AzureLatte AzureLatte Awaiting requested review from AzureLatte AzureLatte is a code owner automatically assigned from linode/frontend-sdet

Assignees

@coliu-akamai coliu-akamai

Labels
Approved Multiple approvals and ready to merge! VPC Relating to VPC project
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@coliu-akamai @linode-gh-bot @bnussman-akamai @cpathipa @abailly-akamai