Organizations - Form Validation UX Tweaks
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 | ||
Edit Form Layout | ||
New Form - Server Error | ||
Edit Form - Server Error | ||
New Form - Client Error | ||
Edit Form - Client Error |
Video Demo
How to set up and validate locally
Setup Organizations
- Access
rails c
- Enable Feature Flag
Feature.enable(:ui_for_organizations)
- 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
- Navigate to the GDK home page
ex: 127.0.0.1:3000/
- Click Organizations in the sidebar
- Click New organization in the top right
- Immediately try to submit the form
- Ensure client side validation stops you with the Name and URL being required
- Fill out those fields
- Make note of URL you will use it in a later step
- Provide a description
- Ensure counter moves with your input
- Go over 1024 character limit and ensure the character count reflects that
- Click submit
- Ensure description field highlights red and additionally error text appears
- Fix all errors and submit
- Ensure saves properly
Testing Existing Organization
- Click Organizations in the sidebar
- Navigate to Organization you created in steps above
- Click the Settings > General in the sidebar
- Remove Organization Name
- Ensure client side validation stops you with the Name being required
- Refill out Name
- Provide a description
- Ensure counter moves with your input
- Go over 1024 character limit and ensure the character count reflects that
- Click submit
- Ensure description field highlights red and additionally error text appears
- Fix all errors and submit
- Ensure saves properly
Testing scroll to error
- Navigate to the GDK home page
ex: 127.0.0.1:3000/
- Click Organizations in the sidebar
- Click New organization in the top right
- Fill out form validly
- Edit URL and make it the same URL you made note of above when creating the Organization
- Make description long enough or window small enough that you can't see the title of the page
- Click submit
- Ensure window is scrolled to the error at the top of the page (Server side error of path already existing)
Related to #437150 (closed)