Skip to content

Organizations - Form Validation UX Tweaks

Zack Cuddy requested to merge 437150-organization-form-errors into master

What does this MR do and why?

Closes #437150 (closed) as well as various UX improvements/alignments

The following changes are included in this MR:

1. Align item location between forms

Initially the server side errors were appearing in different locations depending on if you were creating or updating. This is now aligned.

Additionally, the Organization name field now takes its own line on both forms, initially this was only on the new form.

2. Add client-side validation for description

Initially we were relying on the server to tell us the description was too long. However, we know the max length on the client, to save server resources we now use the formValidators to validate the length before it reaches the server. This provides a more consistent user experience and lightens server load overall.

3. Add character counter for description

Per our Design Docs on Text Limits when a field characters are limited we should:

  • A user may keep typing when the limit is reached
  • Indicates the total number of characters allowed. When a limit is in place, the counter should be visible by default.

We have a designs provided for this interaction via Figma

Currently this functionality does not exist in GitLab UI and more can be read why here (1) and here (2).

For the short term I implemented the counter to match the design docs locally in our scope. We could look into creating a shared component in GitLab or work the GitLab UI issues to further this effort.

4. Add scrollTo for non-navigation page level alert

Initially opened as part of #437150 (closed). The shared error component has been updated with a optional Boolean prop to scroll to the alert when it first appears.

Screenshots or screen recordings

Before After
New Form Layout Screenshot_2024-01-24_at_9.39.16_AM New_Form_-_After
Edit Form Layout Screenshot_2024-01-24_at_9.40.01_AM Edit_Form_-_After
New Form - Server Error New_Form_Server_Error_-_Before New_Form_Server_Error_-_After
Edit Form - Server Error Edit_Form_Server_Error_-_Before Edit_Form_Server_Error_-_After
New Form - Client Error New_Form_Client_Error_-_Before New_Form_Client_Error_-_After
Edit Form - Client Error Edit_Form_Client_Error_-_Before Edit_Form_Client_Error_-_After

Video Demo

Validation_Demo

How to set up and validate locally

Setup Organizations

  1. Access rails c
  2. Enable Feature Flag Feature.enable(:ui_for_organizations)
  3. Create the default organization and add root to it
you = User.find_by_username('root')
default_organization = Organizations::Organization.default_organization
Organizations::OrganizationUser.create!(organization_id: default_organization.id, user_id: you.id)

Testing New Organizations

  1. Navigate to the GDK home page ex: 127.0.0.1:3000/
  2. Click Organizations in the sidebar
  3. Click New organization in the top right
  4. Immediately try to submit the form
  5. Ensure client side validation stops you with the Name and URL being required
  6. Fill out those fields
    • Make note of URL you will use it in a later step
  7. Provide a description
  8. Ensure counter moves with your input
  9. Go over 1024 character limit and ensure the character count reflects that
  10. Click submit
  11. Ensure description field highlights red and additionally error text appears
  12. Fix all errors and submit
  13. Ensure saves properly

Testing Existing Organization

  1. Click Organizations in the sidebar
  2. Navigate to Organization you created in steps above
  3. Click the Settings > General in the sidebar
  4. Remove Organization Name
  5. Ensure client side validation stops you with the Name being required
  6. Refill out Name
  7. Provide a description
  8. Ensure counter moves with your input
  9. Go over 1024 character limit and ensure the character count reflects that
  10. Click submit
  11. Ensure description field highlights red and additionally error text appears
  12. Fix all errors and submit
  13. Ensure saves properly

Testing scroll to error

  1. Navigate to the GDK home page ex: 127.0.0.1:3000/
  2. Click Organizations in the sidebar
  3. Click New organization in the top right
  4. Fill out form validly
  5. Edit URL and make it the same URL you made note of above when creating the Organization
  6. Make description long enough or window small enough that you can't see the title of the page
  7. Click submit
  8. Ensure window is scrolled to the error at the top of the page (Server side error of path already existing)

Related to #437150 (closed)

Edited by Zack Cuddy

Merge request reports