-
Notifications
You must be signed in to change notification settings - Fork 896
refactor(site): SignInForm without wrapper component #558
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
Conversation
Codecov Report
@@ Coverage Diff @@
## main #558 +/- ##
==========================================
+ Coverage 62.93% 66.80% +3.87%
==========================================
Files 194 203 +9
Lines 10827 14227 +3400
Branches 85 87 +2
==========================================
+ Hits 6814 9505 +2691
- Misses 3281 3814 +533
- Partials 732 908 +176
Continue to review full report at Codecov.
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is looking great, excited for the Form/index.test.ts
tests to develop. Happy with undoing the abstraction between Formik and MUI, favoring getFormHelpers<T>
!
const email = screen.getByLabelText(LANGUAGE.emailLabel) | ||
const password = screen.getByLabelText(LANGUAGE.passwordLabel) | ||
userEvent.type(email, "test@coder.com") | ||
userEvent.type(password, "password") |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
praise: This is looking really nice!
site/src/components/Form/index.ts
Outdated
event.target.value = event?.target?.value?.trim() | ||
form.handleChange(event) | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
praise: nice, this approach seems great to me.
Question on code conventions --> are we going to adopt using function
instead of const
arrow fns for pure functions in v2? Stylistically, it's my preference too. WDYT?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I've always preferred arrow functions but I don't know if there's a good reason to anymore. I think you just have to use function
for generics. What do you prefer about them?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These can be safely ported over to arrow fns:
const genericFn = <T,>() => {
// impl
}
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What do you prefer about them?
Simply the style: when all fns look the same, my brain is happy. I dislike missing braces/early returns and having to scan the difference between a non-fn const
and a fn const
.
Visualized, I mean:
// my brain is happy with this
const myVar = "myVar"
function thing() {
return "thing"
}
[1, 2, 3].map((num) => {
return num + 1
})
if (myVar) {
thing()
}
// my brain is not happy with this
const myVar = "myVar"
const thing = () => "thing"
[1, 2, 3].map(num => num++)
if (myVar) thing()
My brain has to do extra processing to understand version 2, even though it's shorter in length. I think this is due to how much I can "read between the lines". In version one, things are blocked in a way that's easy for me to interpret in the background; ultimately I think I "absorb more information per eye scan" or something like that. In the second version, I often find myself double-passing/re-reading some blocks to understand the big picture.
I won't die on any of these hills, because my brain and its preferences don't get to dictate these things; we make those decisions together as a team. At the end of the day, consistency is best to shoot for, and we already use the arrow fns, so I think we should convert these over to be arrow fns.
The only time we should reach for function
is for special cases around scoping this
inside the function
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh thanks, didn't know the trick for making the generic work with an arrow function. But yeah I see your point! I'm down to switch to function
.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm going to put this issue on the list of things to discuss at a future FE V and stick to arrows for now.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm a massive fan of reducing abstraction here!
const validationSchema = Yup.object({ | ||
email: Yup.string().required("Email is required."), | ||
email: Yup.string().trim().email(LANGUAGE.emailInvalid).required(LANGUAGE.emailRequired), | ||
password: Yup.string(), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@vapurrmaid @kylecarbs do we want validation on the password?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is the same as it is in V1, I'm inclined to circle back to it later since it's separate from this change and would need some tests. I think that overhead warrants it as a separate concern.
There's also potentially the desire to have the validation regex come from the backend so that it's centralized. We can brainstorm more on that over gap week next week.
cc @f0ssel @deansheather @johnstcn @coadler --> we've all spoken about centralizing things in the backend at some point in a recent breakout session, would love to noodle on moving validation/regexes into the BE as well, to see if it's a worthwhile idea to explore.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think in this case if we just make it so the backend does the validation and then returns a per-field error that the frontend can parse then it's the same effect without having to do weird stuff like returning regexes from the backend
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Worth considering, but we should also think about the user experience of having to submit your form before you find out that it's invalid.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Worth considering, but we should also think about the user experience of having to submit your form before you find out that it's invalid.
- Idea 1: We could just leverage the OpenAPI
pattern
field for stuff like regexes and use auto-generation magic to keep validations in sync across FE and BE. This wouldn't let us do fancy stuff like interdependent fields though. - Idea 2: We could ensure that the backend accepts a parameter
validate
(or whatever you want to name it) that will signal the backend to only perform field validations and no other action.- Note: we won't be able to validate everything, and this also incurs additional request overhead as I'd imagine we'd want to trigger a fresh validation request on every change in the form.
@vapurrmaid one more thing - e2e was failing because I changed the ids. I thought it would be good to make it look for the labels instead of ids anyway (https://playwright.dev/docs/selectors#best-practices). But, if the labels change it'll fail and be a little bit of a pain to figure out why. We could import |
This is great, absolutely aligned - thanks for that 🎉 !
At this point in time, I think it's OK for e2e to break when updating text. The resolution here is making e2e failures easier to read from CI/in PRs, and keeping the e2e package design easy to modify (example, via POMs especially for getters/setters). I understand the desire for a shared contract between the two, but our Language objects are currently early in their adoption, and we know they're temporary until we move everything into a more robust framework for i18n and L10n. I think the benefit of keeping e2e free from any imports into the product outweighs this concern atm, as these strings don't end up changing so frequently that there's constant friction. I'd like for e2e to be completely separate, especially if we're building out a QA team to own it etc. However, making that change requires setting up a new project and linting etc, which is not a high priority atm. As a last point, it's beneficial to treat e2e and high-level integration tests in a "black box" style: https://en.wikipedia.org/wiki/Black-box_testing particularly so that we don't write smart or aware tests, rather only testing against specifications and AC. How does this sound to you? Does any of this leave lingering concerns? |
Here's a proof of concept of using Formik without the wrapper.
LANGUAGE
in component and testsEdit: added unit tests