Skip to content

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

Merged
merged 9 commits into from
Mar 30, 2022

Conversation

presleyp
Copy link
Contributor

@presleyp presleyp commented Mar 24, 2022

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
  • used LANGUAGE in component and tests
  • used easier to read testing code

Edit: added unit tests

@presleyp presleyp requested a review from a team as a code owner March 24, 2022 19:47
@codecov
Copy link

codecov bot commented Mar 24, 2022

Codecov Report

Merging #558 (c5619f8) into main (d665263) will increase coverage by 3.87%.
The diff coverage is 100.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     
Flag Coverage Δ
unittest-go- 64.66% <ø> (+2.88%) ⬆️
unittest-go-macos-latest 53.78% <ø> (-3.62%) ⬇️
unittest-go-ubuntu-latest 56.10% <ø> (-4.81%) ⬇️
unittest-go-windows-2022 53.03% <ø> (-3.83%) ⬇️
unittest-js 62.63% <100.00%> (-0.70%) ⬇️
Impacted Files Coverage Δ
site/src/components/Form/index.ts 100.00% <100.00%> (ø)
site/src/components/SignIn/SignInForm.tsx 100.00% <100.00%> (ø)
site/src/components/Form/FormTextField.tsx 59.37% <0.00%> (-31.25%) ⬇️
codersdk/workspaceresourceauth.go 47.50% <0.00%> (-15.00%) ⬇️
site/src/components/Form/PasswordField.tsx 80.00% <0.00%> (-6.67%) ⬇️
provisioner/terraform/provision.go 68.82% <0.00%> (-5.99%) ⬇️
pty/ptytest/ptytest.go 94.82% <0.00%> (-5.18%) ⬇️
provisioner/echo/serve.go 54.40% <0.00%> (-4.81%) ⬇️
cli/start.go 66.15% <0.00%> (-3.57%) ⬇️
peer/conn.go 77.91% <0.00%> (-2.04%) ⬇️
... and 74 more

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d665263...c5619f8. Read the comment docs.

Copy link
Contributor

@greyscaled greyscaled 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 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")
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 using function instead of const arrow fns for pure functions in v2? Stylistically, it's my preference too. WDYT?

Copy link
Contributor Author

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?

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:

const genericFn = <T,>() => {
  // impl
}

Copy link
Contributor

@greyscaled greyscaled Mar 24, 2022

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

Copy link
Contributor Author

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.

Copy link
Contributor Author

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

@kylecarbs kylecarbs 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 is required."),
email: Yup.string().trim().email(LANGUAGE.emailInvalid).required(LANGUAGE.emailRequired),
password: Yup.string(),
Copy link
Contributor Author

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

@greyscaled greyscaled Mar 24, 2022

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.

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

Copy link
Contributor Author

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.

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

@presleyp presleyp requested a review from greyscaled March 28, 2022 18:56
@greyscaled greyscaled changed the title chore(site): SignInForm without wrapper component refactor(site): SignInForm without wrapper component Mar 28, 2022
@presleyp
Copy link
Contributor Author

@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 Language 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 commented Mar 30, 2022

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 import Language 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 presleyp merged commit 7e48df8 into main Mar 30, 2022
@presleyp presleyp deleted the 451/presleyp/forms branch March 30, 2022 17:08
@misskniss misskniss added this to the V2 Beta milestone May 15, 2022
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.

6 participants