Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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 ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
presleyp merged 9 commits intomainfrom451/presleyp/forms
Mar 30, 2022

Conversation

presleyp
Copy link
Contributor

@presleyppresleyp commentedMar 24, 2022
edited
Loading

Here's a proof of concept of using Formik without the wrapper.

  • used the hook because it's the most explicit
  • wrote helper functions to cut down on boilerplate in, IMO, a more understandable way
  • usedLANGUAGE in component and tests
  • used easier to read testing code

Edit: added unit tests

@presleyppresleyp requested a review froma team as acode ownerMarch 24, 2022 19:47
@codecov
Copy link

codecovbot commentedMar 24, 2022
edited
Loading

Codecov Report

Merging#558 (c5619f8) intomain (d665263) willincrease coverage by3.87%.
The diff coverage is100.00%.

@@            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
FlagCoverage Δ
unittest-go-64.66% <ø> (+2.88%)⬆️
unittest-go-macos-latest53.78% <ø> (-3.62%)⬇️
unittest-go-ubuntu-latest56.10% <ø> (-4.81%)⬇️
unittest-go-windows-202253.03% <ø> (-3.83%)⬇️
unittest-js62.63% <100.00%> (-0.70%)⬇️
Impacted FilesCoverage Δ
site/src/components/Form/index.ts100.00% <100.00%> (ø)
site/src/components/SignIn/SignInForm.tsx100.00% <100.00%> (ø)
site/src/components/Form/FormTextField.tsx59.37% <0.00%> (-31.25%)⬇️
codersdk/workspaceresourceauth.go47.50% <0.00%> (-15.00%)⬇️
site/src/components/Form/PasswordField.tsx80.00% <0.00%> (-6.67%)⬇️
provisioner/terraform/provision.go68.82% <0.00%> (-5.99%)⬇️
pty/ptytest/ptytest.go94.82% <0.00%> (-5.18%)⬇️
provisioner/echo/serve.go54.40% <0.00%> (-4.81%)⬇️
cli/start.go66.15% <0.00%> (-3.57%)⬇️
peer/conn.go77.91% <0.00%> (-2.04%)⬇️
... and74 more

Continue to review full report at Codecov.

Legend -Click here to learn more
Δ = absolute <relative> (impact),ø = not affected,? = missing data
Powered byCodecov. Last updated665263...c5619f8. Read thecomment docs.

Copy link
Contributor

@greyscaledgreyscaled left a 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 theForm/index.test.ts tests to develop. Happy with undoing the abstraction between Formik and MUI, favoringgetFormHelpers<T>!

const email = screen.getByLabelText(LANGUAGE.emailLabel)
const password = screen.getByLabelText(LANGUAGE.passwordLabel)
userEvent.type(email, "test@coder.com")
userEvent.type(password, "password")
Copy link
Contributor

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!

event.target.value = event?.target?.value?.trim()
form.handleChange(event)
}
}
Copy link
Contributor

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 usingfunction instead ofconst arrow fns for pure functions in v2? Stylistically, it's my preference too. WDYT?

Copy link
ContributorAuthor

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 usefunction for generics. What do you prefer about them?

Copy link
Contributor

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:

constgenericFn=<T,>()=>{// impl}

Copy link
Contributor

@greyscaledgreyscaledMar 24, 2022
edited
Loading

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-fnconst and a fnconst.

Visualized, I mean:

// my brain is happy with thisconstmyVar="myVar"functionthing(){return"thing"}[1,2,3].map((num)=>{returnnum+1})if(myVar){thing()}
// my brain is not happy with thisconstmyVar="myVar"constthing=()=>"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 forfunction is for special cases around scopingthis inside thefunction

Copy link
ContributorAuthor

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 tofunction.

Copy link
ContributorAuthor

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.

Copy link
Member

@kylecarbskylecarbs left a 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 isrequired."),
email: Yup.string().trim().email(LANGUAGE.emailInvalid).required(LANGUAGE.emailRequired),
password: Yup.string(),
Copy link
ContributorAuthor

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?

Copy link
Contributor

@greyscaledgreyscaledMar 24, 2022
edited
Loading

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.

presleyp and kylecarbs reacted with thumbs up emoji
Copy link
Member

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

johnstcn and greyscaled reacted with thumbs up emoji
Copy link
ContributorAuthor

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.

greyscaled reacted with thumbs up emoji
Copy link
Member

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 OpenAPIpattern 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 likeinterdependent fields though.
  • Idea 2: We could ensure that the backend accepts a parametervalidate (or whatever you want to name it) that will signal the backend toonly perform field validations and no other action.
    • Note: we won't be able to validateeverything, 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.

greyscaled reacted with thumbs up emoji
@greyscaledgreyscaled changed the titlechore(site): SignInForm without wrapper componentrefactor(site): SignInForm without wrapper componentMar 28, 2022
@presleyp
Copy link
ContributorAuthor

@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 importLanguage here like in the integration tests, but I think you were planning to move e2e out of src to make sure we didn't import anything into e2e. What do you think is ideal here?

@greyscaled
Copy link
Contributor

greyscaled commentedMar 30, 2022
edited
Loading

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).

This is great, absolutely aligned - thanks for that 🎉 !

But, if the labels change it'll fail and be a little bit of a pain to figure out why. We could importLanguage here like in the integration tests, but I think you were planning to move e2e out of src to make sure we didn't import anything into e2e. What do you think is ideal here?

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?

presleyp reacted with thumbs up emoji

@presleyppresleyp merged commit7e48df8 intomainMar 30, 2022
@presleyppresleyp deleted the 451/presleyp/forms branchMarch 30, 2022 17:08
@missknissmisskniss added this to theV2 Beta milestoneMay 15, 2022
Sign up for freeto join this conversation on GitHub. Already have an account?Sign in to comment
Reviewers

@johnstcnjohnstcnjohnstcn left review comments

@kylecarbskylecarbskylecarbs left review comments

@deansheatherdeansheatherdeansheather left review comments

@greyscaledgreyscaledgreyscaled approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
V2 Beta
Development

Successfully merging this pull request may close these issues.

6 participants
@presleyp@greyscaled@johnstcn@kylecarbs@deansheather@misskniss

[8]ページ先頭

©2009-2025 Movatter.jp