Our filtering options are misaligned across the product. In Groups, the sorting and filtering already follows a more modern pattern. However, the search bar is very small and the whole search and filter element could be extended to follow the page spanning design used on other pages. This will help with the visual alignment across the product.
Update the wording of the sort options to align with how we present them on other pages (see mockup)
Change Created to Created date
Change Updated to Updated date
Move search element underneath tabs and span the same width of the page as used for the group list (see mockup)
Have the timestamps match the sorting, so that the last updated date is shown when sorting by updated_at and the created date is shown when sorting by created_at.
This page may contain information related to upcoming products, features and functionality.
It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes.
Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.
If you are unsure about the correct group, please do not leave the issue without a group label, and refer to
GitLab's shared responsibility functionality guidelines
for more information on how to triage this kind of issue.
Adding the current figma design to continue discussion here:
Notes:
In addition to updating the search and sort, consider updating the tab name from "Archived projects" to "Inactive", similar to what we're proposing for the project list page.
We can start with search only for a first iteration.
If we do have filters, which filters should we have? Owner/role? Anything else?
@ameliabauerly A role filter sounds interesting and would cover more use cases other than "I want to find the groups that I own". A visibility filter might also make sense here.
Gotcha, thanks, @lohrc! Have updated the design above to include role and visibility filters.
A couple follow-up questions:
I assume we'll end up with search only for the first iteration, and add filters later?
With visibility, I'm guessing the options we'd want to include are: Private, Internal and Public. I think that's it, and I'm not missing anything but, just wanted to double check.
I assume we'll end up with search only for the first iteration, and add filters later?
Yes, correct. I would merely focus on the design change in the first iteration. The other options are feature additions, so we can add them separately. Perhaps there is the nuance then that we should only call the prompt Search in the search bar at first (like we do now), and later adjust the copy to Search or filter list when filters become available.
With visibility, I'm guessing the options we'd want to include are: Private, Internal and Public. I think that's it, and I'm not missing anything but, just wanted to double check.
That is correct, though on SaaS we'd need to limit this to Private and Public. There are a few Internal legacy groups on SaaS, but I would expect allowing users to filter by Internal on SaaS would give the impression the option is available. Or we could wait with introducing this filter until we make Internal visibility available on SaaS post Organization rollout.
Sounds good. To avoid confusion, I created two separate mock-ups, one for a first iteration here, and one for a future iteration, where we introduce filters:
@ameliabauerly I have created #437552 and #437551 to add the filters, and think we can move this issue to workflowrefinement. I have adjusted the issue description with some details of what we expect in the first iteration.
@peterhegman Could you take a look at whether this is clear to you and help with refinement? This is related to the discussion we recently had about refactoring the project list. I'm not sure whether we could just approach the search and sort section here, or whether there is a dependency on some component updates before we can get to this.
@lohrc this is clear! I have added an implementation guide and will weight it a 3 since there may be some refactoring required to make the filter bar reusable across multiple views.
I'm not sure whether we could just approach the search and sort section here
I think we should just approach search and sort in this issue. The list will be a bit more complicated so should be addressed in a separate issue. I'll create one in the &12282 Epic
@ameliabauerly Loving your work on all these sorts/filters.
Once we start considering filters for groups, we need to define what it would mean when applied. Taking visibility as an example, would selecting Private for example show results that are:
Top-level (one level below the page you are looking at) groups only that are private
Any group below that is private
Any group containing a project that is private
Both any group below that is private and any group with a project that is private
My thought would be the last one with both. Not an impossible problem to solve, I just think we just need to define this and be consistent in how they are applied and visualized. Following the search functionality, I think it does both and I think this is how we would want to present it. An example.
Both any group below that is private and any group with a project that is private
This seems reasonable to me, especially if it's how search is currently functioning. I'm guessing we'll need to have more conversations with engineering, though, in terms of how these filters will work, in practice. Peter suggested coming up with our initial designs, and then looping in engineering to see what is possible/and how to implement the filter options. I'll plan on continuing the conversation with them as soon as we've aligned around an initial proposal, and definitely keep you in the loop, too, in case you have any additional suggestions/recommendations!
marked the checklist item Change Archived projects tab to Inactive: #436392 (closed) as completed
Christina Lohrmarked the checklist item Update the wording of the sort options to align with how we present them on other pages (see mockup) as completed
marked the checklist item Update the wording of the sort options to align with how we present them on other pages (see mockup) as completed
Christina Lohrmarked the checklist item Move search element underneath tabs and span the same width of the page as used for the group list (see mockup) as completed
marked the checklist item Move search element underneath tabs and span the same width of the page as used for the group list (see mockup) as completed