GitLab UI: Saved View Title Length Validation

Platform: GitLab · Type: Frontend maintenance / UX consistency · Status: Merge Request under review · Issue: 589113 · MR: !222561

Context

GitLab allows users to create and save custom views for filtered work item lists. These saved views are created through a shared frontend modal that collects a title, an optional description, and visibility settings.

The modal already enforced a character limit on the description field, but the title input had no visible or enforced length constraint.

Problem

Without frontend validation, users could enter overly long titles when creating a saved view. This resulted in backend validation failures that surfaced only after submission.

The resulting error was generic (for example, “Something went wrong while creating the view”), providing no clear feedback about the actual cause.

My Contribution

I updated the shared Vue component responsible for the “New view” modal to align the title field with existing validation patterns used elsewhere in the UI.

The change introduces a 40-character maximum length for the saved view title and adds a visible helper description so users are informed of the constraint before submission.

This prevents invalid input at the UI level and improves overall clarity and consistency.

Example Code Change

The fix was implemented directly in the shared Vue component used to create and edit saved views. The title input now mirrors the existing description field behavior.

<!-- Before -->
<gl-form-input
  id="saved-view-title"
  v-model="savedViewTitle"
  autocomplete="off"
  autofocus
  :state="isTitleValid"
/>

<!-- After -->
<gl-form-input
  id="saved-view-title"
  v-model="savedViewTitle"
  autocomplete="off"
  autofocus
  :state="isTitleValid"
  :maxlength="$options.MAX_TITLE_LENGTH"
/>

A new constant was introduced to keep validation rules explicit and centralised:

MAX_TITLE_LENGTH: 40,

In addition, the title form group now displays a helper message (“40 characters max”), ensuring users are informed of the limit before submitting the form.

Current Status

The fix has been pushed to the GitLab community fork and is currently under review as a merge request.

Automated pipelines are running, and the change requires a code owner approval before merge.

Reflection

This contribution demonstrates how small, well-scoped frontend changes can significantly improve usability while reducing backend error states.

It also reinforced the importance of UX consistency and of making validation rules visible to users at the point of input.