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.

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

fix: [M3-7804] - Volume Create Drawer Crash (Linode detail) #10225

Merged
merged 5 commits into from
Feb 28, 2024

Conversation

abailly-akamai
Copy link
Contributor

@abailly-akamai abailly-akamai commented Feb 23, 2024

Description 📝

This PR fixes a bad bug crashing the application when attempting to create a volume from the linode detail (storage tab).

The useEffect in question was attempting to select a default value for the config select component and set the value for the field, creating an infinite loop with the label validation of the formik form (expecting a non-falsy value).

It is a bit a of weird bug, which did not surface before the react 18 update and the way useEffect was optimized. I can't say I fully understand the clash between our formik initial values, setFieldValue and our validation patterns but the fix here is to validateOnChange only when the form has been submitted, not when setFieldValue is being called, since the useEffect is actually doing the right thing (esp for the VolumeCreate).

Due to another interesting fact, the e2e test was not breaking as a result, perhaps due to the click methods timing differences between a user click and a CY.click().

Changes 🔄

  • Remove useEffect and implement default selection with defaultValue

Preview 📷

cloud linode com_linodes_50934298_storage

How to test 🧪

Reproduction steps

Verification steps

  • Navigate to http://localhost:3000/linodes/{linode id}/storage
  • Ensure only one config is present on the instance
  • Click on "Create Volume"
  • Notice the config selected in the config select
  • Create the volume, confirm payload and succession
  • Add a new config to the linode instance
  • Click on "Create Volume"
  • Notice the config select does not have a default value
  • Select a config
  • Create the volume, confirm payload and succession

Also

  • Verify that the volume create form is working properly with this update

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

@cpathipa cpathipa added the Bug Fixes for regressions or bugs label Feb 23, 2024
@abailly-akamai abailly-akamai marked this pull request as ready for review February 23, 2024 20:41
@abailly-akamai abailly-akamai requested a review from a team as a code owner February 23, 2024 20:41
@abailly-akamai abailly-akamai requested review from cpathipa, hkhalil-akamai and jdamore-linode and removed request for a team February 23, 2024 20:41
Copy link

github-actions bot commented Feb 23, 2024

Coverage Report:
Base Coverage: 81.33%
Current Coverage: 81.33%

@abailly-akamai abailly-akamai marked this pull request as draft February 23, 2024 21:34
@abailly-akamai abailly-akamai marked this pull request as ready for review February 27, 2024 19:05
Copy link
Contributor

@cpathipa cpathipa left a comment

Choose a reason for hiding this comment

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

Thank you @abailly-akamai for fixing this issue. Confirming that "Create Volume" (Linode detail) is working as expected.

Copy link
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.

Nice find & fix. Verified the testing steps.

@@ -10,6 +10,7 @@ import { TagsInput } from 'src/components/TagsInput/TagsInput';
import { TextField } from 'src/components/TextField';
import { Typography } from 'src/components/Typography';
import { MAX_VOLUME_SIZE } from 'src/constants';
import { useFormValidateOnChange } from 'src/hooks/useFormValidateOnChange';
Copy link
Contributor

@hkhalil-akamai hkhalil-akamai Feb 27, 2024

Choose a reason for hiding this comment

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

Out of scope of this PR, but this hook seems unnecessary as opposed to useState

Copy link
Contributor Author

Choose a reason for hiding this comment

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

That's true. I've thought about this hook, maybe not worth the abstraction, but also thought about how it kindly improves form nomenclature consistency across formik forms as opposed to declaring a randomly named piece of state each time.

@abailly-akamai abailly-akamai merged commit 632b454 into linode:develop Feb 28, 2024
17 checks passed
abailly-akamai added a commit to abailly-akamai/manager that referenced this pull request Feb 28, 2024
abailly-akamai added a commit that referenced this pull request Feb 28, 2024
…10235)

* Revert "fix: [M3-7804] - Volume Create Drawer Crash (Linode detail) (#10225)"

This reverts commit 632b454.

* remove the damn useEffect

* Added changeset: LinodeVolumeCreateForm crash
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Fixes for regressions or bugs
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants