Skip to content

Conversation

msilva-broad
Copy link
Contributor

@msilva-broad msilva-broad commented Jun 3, 2025

  • initial introduction of zod schema validation library.
  • created zod-validators util module which a handful of components have been converted to make use of.
  • converted components now have a componentx-valdation sister file which has the valdation logic moved into it.
  • zod is a very nice library with excellent Typescript type safety and flow. But it requires a passthru pattern for safer usage in form validation scenarious. See refineObject helper in zod-valdators.ts.
  • zod 3.x also lacks "pretty" field name functionality which we made use of in validate.js. So these are replaced with more explicit error message mechanics.
  • also did some unit test cleanup, mainly adding mocks for dependencies that were adding warning noise to test output.

PR checklist

  • I have included an issue ID or "no ticket" in the PR title as outlined in CONTRIBUTING.md.
  • I have included a risk tag of the form [risk=no|low|moderate|severe] in the PR title as outlined in CONTRIBUTING.md.
  • I have manually tested this change and my testing process is described above.
  • This change includes appropriate automated tests, and I have documented any behavior that cannot be tested with code.
  • I have added explanatory comments where the logic is not obvious.
  • One or more of the following is true:
    • This change is intended to complete a JIRA story, so I have checked that all AC are met for that story.
    • This change fixes a bug, so I have ensured the steps to reproduce are in the Jira ticket or provided above.
    • This change impacts deployment safety (e.g. removing/altering APIs which are in use), so I have documented the impacts in the description.
    • This change includes a new feature flag, so I have created and linked new JIRA tickets to (a) turn on the feature flag and (b) remove it later.
    • This change modifies the UI, so I have taken screenshots or recordings of the new behavior and notified the PO and UX designer in Slack.
    • This change modifies API behavior, so I have run the relevant E2E tests locally because API changes are not covered by our PR checks.
    • None of the above apply to this change.

- initial introduction of zod schema validation library.
- created zod-validators util module which a handful of components have been converted to make use of.
- converted components now have a componentx-valdation sister file which has the valdation logic moved into it.
- zod is a very nice library with excellent Typescript type safety and flow.  But it requires a passthru pattern for safer usage in form validation scenarious.  See refineObject helper in zod-valdators.ts.
- zod 3.x also lacks "pretty" field name functionality which we made use of in validate.js.  So these are replaced with more explicit error message mechanics.
- also did some unit test cleanup, mainly adding mocks for dependencies that were adding warning noise to test output.
- first wave of components swapped to use zod validation in place of validate.js.
- zod validators are using refinedObject and refineFields helpers to avoid early-abort validation scenarios with the normal zod usage patterns.  See zod-validators.ts
- also fixed act() related warnings and masked async race conditions causing unit test flakiness in data-page.spec, data-access-requirements.spec, and egress-events-table.spec
@msilva-broad msilva-broad changed the title Msilva/rw 15004 validate js repacement Msilva/RW-15004 [risk=low] validate js repacement Jun 23, 2025
@msilva-broad msilva-broad changed the title Msilva/RW-15004 [risk=low] validate js repacement RW-15004 [risk=low] validate js repacement Jun 23, 2025
@msilva-broad msilva-broad marked this pull request as ready for review June 24, 2025 21:14
Copy link
Collaborator

@evrii evrii left a comment

Choose a reason for hiding this comment

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

Looks good overall. I ran into a few unexpected results. Maybe we can jump on a call to talk them through.

newName: z
.string()
.trim()
.min(1, "New name can't be blank")
Copy link
Collaborator

Choose a reason for hiding this comment

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

image

{Object.keys(errors).map((key) => (
<li key={errors[key][0]}>
{errors[key]} (Question {questionsIndex[key]})
{key}: {errors[key]} (Question {questionsIndex[key]})
Copy link
Collaborator

Choose a reason for hiding this comment

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

It seems like this might have been added for debugging. Is it ok to remove this?
Screenshot 2025-07-02 at 10 52 27 AM

Copy link
Contributor Author

Choose a reason for hiding this comment

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

removed

(fields, ctx) => {
const noop = undefined;
const needYearOfBirthMsg =
'You must either fill in your year of birth or check the corresponding "Prefer not to answer" checkbox ';
Copy link
Collaborator

Choose a reason for hiding this comment

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

I don't see this message:
image

Copy link
Contributor Author

Choose a reason for hiding this comment

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

fixed with requiredNumber zod helper

refineFields(fields, ctx, {
ethnicCategories: nonEmptyArray(
z.string(),
"Ethnic categories can't be blank"
Copy link
Collaborator

Choose a reason for hiding this comment

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

image

),
genderIdentities: nonEmptyArray(
z.string(),
"Gender identities can't be blank"
Copy link
Collaborator

Choose a reason for hiding this comment

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

image

? requiredStringWithMaxLength(100, 'Other Specific Population')
: noop,
diseaseOfFocus: data.diseaseFocusedResearch
? requiredStringWithMaxLength(80, 'Disease of Focus')
Copy link
Collaborator

Choose a reason for hiding this comment

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

image

Copy link
Collaborator

Choose a reason for hiding this comment

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

image

data.disseminateResearchFindingList?.includes(
DisseminateResearchEnum.OTHER
)
? requiredStringWithMaxLength(
Copy link
Collaborator

Choose a reason for hiding this comment

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

image

Copy link
Collaborator

Choose a reason for hiding this comment

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

image

Copy link
Collaborator

Choose a reason for hiding this comment

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

When I have a large value in this field and it is checked, I get the error. If I uncheck the other dissemination box, the contents stay the same, I don't get the error, and I can submit.

I am in the process of seeing if submitting a workspace in this situation will break anything.

Copy link
Collaborator

Choose a reason for hiding this comment

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

The workspace creation errored out.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

defering this issue for now since it's existing logic outside of validation logic

'Other methods of disseminating research findings'
)
: noop,
aianResearchType: askAboutAIAN
Copy link
Collaborator

Choose a reason for hiding this comment

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

image

? z.nativeEnum(AIANResearchType, { required_error: "can't be blank" })
: noop,
aianResearchDetails: askAboutAIAN
? requiredStringWithMaxLength(1000)
Copy link
Collaborator

Choose a reason for hiding this comment

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

image

const isHttp = url.protocol === 'http:' || url.protocol === 'https:';
const isLocalHost =
url.hostname === 'localhost' || url.hostname === '127.0.0.1';
console.log(
Copy link
Collaborator

Choose a reason for hiding this comment

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

I think that this might have been left from debugging.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

fixed

- fixed null issue with requiredNumber validator, minor cleanup.
@msilva-broad msilva-broad merged commit 9403c4d into main Jul 17, 2025
7 checks passed
@msilva-broad msilva-broad deleted the msilva/RW-15004_validate-js-repacement branch July 17, 2025 13:52
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.

2 participants