feat: Initial Project Create Form ('/projects/create') #60
Conversation
Codecov Report
@@ Coverage Diff @@
## main #60 +/- ##
==========================================
- Coverage 71.14% 70.82% -0.32%
==========================================
Files 82 87 +5
Lines 3372 3455 +83
Branches 49 56 +7
==========================================
+ Hits 2399 2447 +48
- Misses 767 799 +32
- Partials 206 209 +3
Continue to review full report at Codecov.
|
site/forms/CreateProjectForm.tsx
Outdated
| }) | ||
|
|
||
| const FormTextField = formTextFieldFactory<CreateProjectRequest>() | ||
| const FormDropdownField = formDropdownFieldFactory<CreateProjectRequest>() |
There was a problem hiding this comment.
Why do this factory pattern instead of using the component directly? I assume it's for the types?
There was a problem hiding this comment.
Yep, exactly - sets things up so the compiler knows the formFieldName can only be a few possibilities:
And if I introduce a typo - or the schema of the types changes - VSCode lets me know:
There was a problem hiding this comment.
There's also some more backstory here: https://github.com/coder/m/pull/7766 - it's a pattern @vapurrmaid introduced there that we've been leveraging for all our forms.
There was a problem hiding this comment.
formik out of the box is very loose with type safety - there's a lot of any's in their type definitions: https://github.com/jaredpalmer/formik/blob/e677bea8181f40e6762fc7e7fb009122384500c6/packages/formik/src/types.tsx#L6
There was a problem hiding this comment.
I regressed some code early on (one of my first PRs): https://github.com/coder/m/pull/9609- if that component had used this, it would've been caught at compile time
There was a problem hiding this comment.
Also, one thing on our mind is how to accomplish this type-safety w/o a higher-order component - there may be a way to simplify this, esp with newer typescript versions
There was a problem hiding this comment.
Actually... sorry for this rambling thread... I experimented and it seems we may be able to move away from the higher-order component today w/ our current TS version: #70 🤔
This is a super simple form for creating projects:
TODO:
/projects/{organization}route/projectsroutesCreateProjectForm