Organization group/project search UX improvements
Follow-up from !146539 (comment 1804200073)
Proposal
- Don't search until a user has typed a minimum of 3 characters. Indicate this in the search field by adapting the text to
T= Search for this text (3 character minimum)
- When search results are empty, show this empty state based on guidelines in https://design.gitlab.com/patterns/empty-states#empty-search-results
- Update docs to clarify search guidelines:
-
Manage groups and projects (in Organizations), in the first point of step 3:
... in the search box enter your search term (minimum three characters).
-
Manage groups and projects (in Organizations), in the first point of step 3:
Implementation plan
- Only call
pushQuery
in app/assets/javascripts/organizations/groups_and_projects/components/app.vue#L146 if search term is 3 or more characters - In
organizations/shared/components/groups_view.vue
andorganizations/shared/components/projects_view.vue
add a newGlEmptyState
that is shown when results are empty andsearch
prop is not an empty string. Consider making that new empty state a shared component.
Edited by Peter Hegman