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: change dirty strategy in check form #1037

Merged
merged 2 commits into from
Jan 8, 2025

Conversation

ckbedwell
Copy link
Contributor

Closes: #1026 (comment)

Problem

When introducing the notify unsaved changes feature, an accidental bug was introduced where after using the test button the form was considered submitted and could no longer be saved.

Solution

The solution is to change the strategy in assessing whether the form is 'dirty' or not. Instead of utilizing React hook form's isDirty value in provided by the formState, we are manually checking if the initial values match the current values. It is not the most optimal solution but it does work adequately.

The desired solution proposed in the issue of not considering the test button a submit button has its own tradeoffs with the way react-hook-form works and the current set-up of the Synthetic Monitoring application. Because the FormLayout component doesn't expose any of its inner workings (such as moving between steps and the validation invalid / valid triggers provided by react-hook-form's handleSubmit) it would require a larger re-work of these components and have the same UX.

The test button is likely to evolve when we tackle phase 2 of the check creation flow so this solution is most appropriate right now.

Last note, it is difficult to write tests for the 'test' button because JSDom doesn't expose the submitter element, which we rely upon to know if it is an ad-hoc test or saving the check.

@ckbedwell ckbedwell requested a review from VikaCep January 6, 2025 16:03
@ckbedwell ckbedwell requested a review from a team as a code owner January 6, 2025 16:03
@VikaCep
Copy link
Contributor

VikaCep commented Jan 6, 2025

There is still a strange behavior going on. When there are changes, the form correctly enables the Save button. But when clicking save, the message indicating there are unsaved changes is prompted asking to stay/leave the page. It still saves but it's confusing as there's no clear indication if the save is successful.

Screen.Recording.2025-01-06.at.13.51.33.mov

Copy link
Contributor

@VikaCep VikaCep left a comment

Choose a reason for hiding this comment

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

@ckbedwell
Copy link
Contributor Author

ckbedwell commented Jan 7, 2025

There is still a strange behavior going on. When there are changes, the form correctly enables the Save button. But when clicking save, the message indicating there are unsaved changes is prompted asking to stay/leave the page. It still saves but it's confusing as there's no clear indication if the save is successful.

Screen.Recording.2025-01-06.at.13.51.33.mov

I'm glad you had the common sense to check submitting it (because I didn't) 😅

I've made the changes and added a few tests as appropriate. I found a few test files I found redundant (the submit ones for the 2 api types as they test the same thing and aren't specific to those check types) so I've removed them and put what they are testing in a more appropriate place.

@ckbedwell ckbedwell requested a review from VikaCep January 7, 2025 10:25
Copy link
Contributor

@VikaCep VikaCep left a comment

Choose a reason for hiding this comment

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

LGTM! 🚀

@ckbedwell ckbedwell merged commit 25ee12f into main Jan 8, 2025
5 checks passed
@ckbedwell ckbedwell deleted the fix/check-form-unsaved-changes branch January 8, 2025 09:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Do not submit Check form when starting adhoc test of check
2 participants