Skip to content

Add client-side validation to Release asset edit form

What does this MR do?

Adds client-side validation to the Release assets edit form added in !26821 (merged).

This work was originally included in !26821 (merged), but I removed it to make !26821 (merged) more manageable to review.

Validations

This MR adds four client-side validations:

  1. No duplicate URLs
    • Validation ignores case and leading/trailing whitespace
  2. No invalid URLs
    • URL must begin with http://, https://, or ftp://
  3. No missing title (if URL is populated)
  4. No missing URL (if title is populated)

These validations mirror the validations performed by the backend when the form is submitted.

These validations are performed on @change, so they will only take effect when leaving the input box (not while the user is typing). This is done for performance reasons since computing the validation state is a bit much to run on each keystroke.

When at least one field is invalid, the Save changes button is disabled.

Also...

In addition, this MR adds some tests for asset_links_form.vue that I probably should have included in !26821 (merged) 😅

Also also...

This MR slightly modifies the behavior of the form's "empty state". Instead of blindly adding an empty row every time the component is loaded, the form now just ensures that there's always at least one row in the form.

I originally made this change in a separate MR (!29092 (closed)), but it made more sense to include this small change here since this MR added the test file (asset_links_form.spec.js - see the section above 🙂).

Feature flag

Similar to !26821 (merged), these changes are hidden behind a release_asset_link_editing feature flag which is currently disabled by default.

This MR is the final piece of this feature, so the flag can be enabled by default once this is merged. Here is an MR to enable this feature: !28816 (merged).

Screenshots

image

Small screens

image

GIF

2020-04-03_10.31.09

Related to #9427 (closed)

Edited by Nathan Friend

Merge request reports