Page MenuHomePhabricator

(stretch) xLab: Add better validation to forms
Closed, ResolvedPublic13 Estimated Story Points

Description

Description

Pending discussion with @Sarai-WMF, we should probably have better inline validation for all the forms. This task is also about applying specific validation rules (see ACs below). There is no way for now to automatically disable an experiment and we are considering a way to remove non-active ones (based on status + dates) from the xLab API responses (we also could do that in the Experiment Manager though). That could be enough for now.

Acceptance Criteria

  • (Partially done, see details below) Some inline validation errors are triggered on the client side to support users' input (Find validation specifications per field on this spreadsheet)
  • (Partially done, see details below) On form submit, inline validation errors are triggered (See spreadsheet for more details)
  • Slug validation: Slug is unique and matches Varnish name validation (^[A-Za-z0-9][-_.A-Za-z0-9]{7,62}$). We could even not consider hyphens and dots as valid characters to simplify the way we generate the machine-readable name (slug) and the final value would still match Varnish validation. To do that we could transform spaces into underscores and do nothing with the rest of the special characters. In principle the same rule validation would apply for instruments (both instruments and experiments share this part of the form).
  • Group name validation: in the case of the machine readable name, we will need to apply the same rule we are applying for machine-readable names for experiments. Varnish uses same validation for both fields: experiment and groups names (^[A-Za-z0-9][-_.A-Za-z0-9]{0,62}$)
  • Unique and valid experiment names and some others validation rules to be aligned with enrollment authorities (Varnish + MW) (See spreadsheet for more details)
  • (nice to have): have a way to trigger all validation to easily test validation and message copy

Required

  • Unit/Integration tests (unit and integrations tests have been update accordingly)
  • Passed QA

Details

Related Changes in Gerrit:
Related Changes in GitLab:
TitleReferenceAuthorSource BranchDest Branch
A couple of fixes related to validationrepos/data-engineering/mpic!205sfaciquick-fix-validationmain
Pending validation issuesrepos/data-engineering/mpic!203sfacifix-blur-validationmain
Fixed additional padding for iconsrepos/data-engineering/mpic!199sfaciquick-fix-icons-paddingmain
Form validation fixesrepos/data-engineering/mpic!195sfacivalidation-follow-upmain
Replaced skipWhen with omitWhen to omit validation rulesrepos/data-engineering/mpic!192sfacifix-skipped-validation-rulesmain
Backend refactored to ES modulesrepos/data-engineering/mpic!178sfacibackend-as-es-modulemain
Added better validation to formsrepos/data-engineering/mpic!175sfaciinline-validationmain
Draft: Better validation to formsrepos/data-engineering/mpic!169sfaciadd-better-validationmain
Customize query in GitLab

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

The MR above is the one that refactors the backend to ES modules (it's ready for review): https://gitlab.wikimedia.org/repos/data-engineering/mpic/-/merge_requests/178

The MR about the validation itself is almost ready and waiting for the other. I have already tested the approach we planned and it's working as expected with the refactored backend + vest + codex. We will be able to share backend and frontend validation rules and run inline frontend + backend validation.

Change #1151263 had a related patch set uploaded (by Santiago Faci; author: Santiago Faci):

[operations/deployment-charts@master] xLab: Deploying v0.6.1 to staging

https://gerrit.wikimedia.org/r/1151263

Change #1151263 merged by jenkins-bot:

[operations/deployment-charts@master] xLab: Deploying v0.6.1 to staging

https://gerrit.wikimedia.org/r/1151263

This task is ready for review: https://gitlab.wikimedia.org/repos/data-engineering/mpic/-/merge_requests/175

There are more details in the MR description but, as I mentioned there, a couple of things about complex validation rules will be included as a follow up task.

repos/data-engineering/mpic!175 Added better validation to forms has been merged. I've been bold and moved this (and the associated tasks in Needs Review) to Sign-Off.

Who should sign this off? @EChukwukere-WMF?

I should definitely perform design review of this task. @EChukwukere-WMF mentioned in a couple of instances that he'll review in depth too. Is it ok that we're both involved in signing this off?

I should definitely perform design review of this task. @EChukwukere-WMF mentioned in a couple of instances that he'll review in depth too. Is it ok that we're both involved in signing this off?

Absolutely.

I've just confirmed that the latest tag to be deployed to production (v0.6.7) includes @Sfaci's MR.

Note well that the changes for T396045: xLab: follow up tasks for traffic and variations section, T392898: xLab: Add validation to the Duration field, and T396151: xLab: Add a validation rule to check whether a name/slug is already used by an existing instrument/experiment have not yet been deployed.

Sfaci updated the task description. (Show Details)

Note well that the changes for T396045: xLab: follow up tasks for traffic and variations section, T392898: xLab: Add validation to the Duration field, and T396151: xLab: Add a validation rule to check whether a name/slug is already used by an existing instrument/experiment have not yet been deployed.

In addition to that, so far, we have found a few of missed changes that have been fixed in T396457: xLab: Improvements for the Name form component:

  • We forgot to update the copy for the Name form component (now the machine-readable name is not automatically generated and its label had to be updated accordingly)
  • For an unknown reason, the machine-readable name remained editable once the artifact had been activated
  • The top and bottom margins for the validation error message (the main one we show at the bottom of the form). Right values were 16px
  • The error messages were not properly wrapped for the name when it's longer than its container

Change #1155328 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[operations/deployment-charts@master] xLab: Deploy v0.6.8 release to staging

https://gerrit.wikimedia.org/r/1155328

Change #1155328 merged by jenkins-bot:

[operations/deployment-charts@master] xLab: Deploy v0.6.8 release to staging

https://gerrit.wikimedia.org/r/1155328

test status: QA PASS

From a QA stand point this meets the requirements

Screenshot 2025-06-12 at 12.06.23 PM.png (1×2 px, 306 KB)

@Sarai-WMF passing this over to you for any design review needed

Thanks @EChukwukere-WMF!
And thanks for all the effort put on this complex task, @Sfaci. Looks great and we're almost there! Findings from design verification are listed below. Please note that the fields 'User traffic per wiki' and 'Duration' were excluded from this review because their validation behavior will be implemented in separate tasks. Issues are ordered following a severity assessment:

#Field(s)Issue descriptionSeverity
1Variation Machine-readable nameValue length is not validated. The message "Machine-readable name cannot be longer than 63 characters" should be displayed on update when the max length is exceededHigh
2[Instrument form] Schema type, Stream name, Sample unit – [A/B test form] User identifier type – [Both] Compliance requirementsThe required errors displayed on submit by these fields persists after a value is selected or inputted in them
Screenshot 2025-06-13 at 13.00.35.png (117×665 px, 14 KB)
High
3Variation Machine-readableThe error “Only letters, numbers, hyphens (-), underscores (_), and dots (.) are allowed." is displayed on submit, but not on update when invalid characters are inputted.
Screenshot 2025-06-13 at 13.53.01.png (292×1 px, 39 KB)
Medium
4AllAll error messages appear indented, instead of being vertically aligned left with the inputs they accompany. Looks like the 8px left-margin applied to .cdx-message__content adds unwanted spacing to the left of the message icons too.
Screenshot 2025-06-13 at 12.46.05.png (241×1 px, 66 KB)
Low
5Schema type, User identifier typeIn order to align the error state appearance with Codex, the radio labels should also display a red color (color-error) when the required options are left unchecked on submit.
Screenshot 2025-06-13 at 12.55.47.png (172×443 px, 18 KB)
® Identifier type is required.png (196×656 px, 34 KB)
Low
6Machine-readable nameIn all error messages that include the name of this field, a dash is missing and should be included for consistency with the label's syntax.Minimal
7Name, Machine-readable nameTo simplify the copy of error messages, we could remove the reference to the artifact type (e.g. say ‘Name must be at least 8 characters long’ instead of ‘Experiment name must be..’)Minimal
8Risk acknowledgement checkboxFollowing Codex guidelines, the single acknowledgement checkbox wasn’t supposed to display an error message, just an error state.
I confirm that I've followed the data collection guidelines and determined that this experiment.png (100×666 px, 24 KB)
Screenshot 2025-06-13 at 12.33.10.png (152×696 px, 27 KB)
Minimal

Change #1159526 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[operations/deployment-charts@master] xLab: Deploy v0.7.0 release to staging

https://gerrit.wikimedia.org/r/1159526

Change #1159526 merged by jenkins-bot:

[operations/deployment-charts@master] xLab: Deploy v0.7.0 release to staging

https://gerrit.wikimedia.org/r/1159526

Thank you for the fixes, @Sfaci! We're almost there. Things are working really smooth and there are just a couple of pending issues:

#Field(s)Issue descriptionSeverity
1✅ Fixed
2(2.1) Compliance requirements [A/B test and experiment forms]; (2.2) Schema type, (2.3) Stream name [Instrument form]The required errors displayed on submit by these fields persists after a value is selected or inputted in them.
Screenshot 2025-06-16 at 19.57.23.png (132×822 px, 20 KB)
Screenshot 2025-06-16 at 19.59.46.png (208×560 px, 25 KB)
Screenshot 2025-06-16 at 20.00.15.png (141×848 px, 22 KB)
High
3✅ Fixed
4IconsError messages are not indented anymore 💯 But the fix seems to have removed the start padding from other icons, like the ones included in the Alpha chip or the CAS log in button. It would be great if we could find a solution that doesn't have side effects in existing or future components.
Screenshot 2025-06-16 at 20.08.13.png (31×81 px, 2 KB)
Low
5✅ Fixed
6✅ Fixed
7✅ Fixed
8✅ Fixed

Change #1161050 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[operations/deployment-charts@master] xLab: Deploy v0.7.1 release to staging

https://gerrit.wikimedia.org/r/1161050

Change #1161052 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[operations/deployment-charts@master] xLab: Deploy v0.7.1 release to production

https://gerrit.wikimedia.org/r/1161052

Change #1161050 merged by jenkins-bot:

[operations/deployment-charts@master] xLab: Deploy v0.7.1 release to staging

https://gerrit.wikimedia.org/r/1161050

Change #1161052 merged by jenkins-bot:

[operations/deployment-charts@master] xLab: Deploy v0.7.1 release to production

https://gerrit.wikimedia.org/r/1161052

Error messages are not indented anymore 💯 But the fix seems to have removed the start padding from other icons, like the ones included in the Alpha chip or the CAS log in button. It would be great if we could find a solution that doesn't have side effects in existing or future components.

Hi @Sarai-WMF! A new release with the that last issue fixed is already available on staging for you to test. It's precisely the thing you helped me to fix about adjusting properly the padding for some icons

Hi @Sarai-WMF! A new release with the that last issue fixed is already available on staging for you to test. It's precisely the thing you helped me to fix about adjusting properly the padding for some icons

Icons and message align are looking great, @Sfaci ! That's fixed ✅

What's pending:

  • Making sure that required errors are dismissed on the client side when fields without client side validation are filled in. (Issue #2 above). As discussed, this can be covered in a separate task that better describes the issue and the solution approach: T397510: xLab: Remove persistent required errors
  • Unfortunately, I found an extremely specific issue that seems to have been introduced in the latest MR: The errors "Machine-readable name must be at least 8 characters long" and "Only letters, numbers, hyphens (-), underscores (_) and dots (.) are allowed" aren't listed together under the Machine-readable name field anymore in case they are concurrent. That is, in case the user inputs something like "A/Btest".

Previous version (MPIC prod):

Screenshot 2025-06-19 at 18.38.21.png (606×864 px, 94 KB)

Current version (MPIC next):
Screenshot 2025-06-19 at 18.38.54.png (422×802 px, 52 KB)

Unfortunately, I found an extremely specific issue that seems to have been introduced in the latest MR: The errors "Machine-readable name must be at least 8 characters long" and "Only letters, numbers, hyphens (-), underscores (_) and dots (.) are allowed" aren't listed together under the Machine-readable name field anymore in case they are concurrent. That is, in case the user inputs something like "A/Btest".

This MR that aims to fix that pending issue is ready for review

Making sure that required errors are dismissed on the client side when fields without client side validation are filled in. (Issue #2 above). As discussed, this can be covered in a separate task that better describes the issue and the solution approach: T397510: xLab: Remove persistent required errors on update

These others issues are already included in the MR mentioned above (I'll add also a comment in the corresponding ticket).

Also the pending issue for T392898: xLab: Add validation to the Duration field is included in that MR

Change #1162089 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[operations/deployment-charts@master] xLab: Deploy v0.7.2 release to staging

https://gerrit.wikimedia.org/r/1162089

Change #1162089 merged by jenkins-bot:

[operations/deployment-charts@master] xLab: Deploy v0.7.2 release to staging

https://gerrit.wikimedia.org/r/1162089

@Sarai-WMF T @EChukwukere-WMF The pending issues that Sarai found are already fixed and deployed on staging for you to review:

The required errors displayed on submit by these fields persists after a value is selected or inputted in them.

Details here

Unfortunately, I found an extremely specific issue that seems to have been introduced in the latest MR: The errors "Machine-readable name must be at least 8 characters long" and "Only letters, numbers, hyphens (-), underscores (_) and dots (.) are allowed" aren't listed together under the Machine-readable name field anymore in case they are concurrent. That is, in case the user inputs something like "A/Btest".

Details here

Change #1163439 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[operations/deployment-charts@master] xLab: Deploy v0.7.3 release to staging

https://gerrit.wikimedia.org/r/1163439

Change #1163439 merged by jenkins-bot:

[operations/deployment-charts@master] xLab: Deploy v0.7.3 release to staging

https://gerrit.wikimedia.org/r/1163439

Thanks once again for the excellent work on this task, @Sfaci! I think we're good to go with this version of the validation implementation. There are a couple of outstanding issues (I documented them in the following task: T397824: xLab: Improve form validation), but their criticality isn't high. I'd say it's fine to go ahead and consider this task done 🤝

Sfaci updated Other Assignee, removed: EChukwukere-WMF.

Change #1165182 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[operations/deployment-charts@master] xLab: Deploy v0.7.5 release to production

https://gerrit.wikimedia.org/r/1165182

Change #1165182 merged by jenkins-bot:

[operations/deployment-charts@master] xLab: Deploy v0.7.5 release to production

https://gerrit.wikimedia.org/r/1165182

Milimetric changed the point value for this task from 8 to 13.Jul 2 2025, 3:10 PM