Project dashboard: Improve information architecture
This is the implementation issue of related https://gitlab.com/gitlab-org/gitlab-ce/issues/47407 discovery.
Description
As @matejlatin describes in https://gitlab.com/gitlab-org/gitlab-ce/issues/47203#note_78826761, the structure on our project dashboard pages, e. g. https://gitlab.com/explore, is not very intuitive.
The filter search box and sort by dropdown are outside of the are that they have an effect on when used.
- "Filter by name" and "Last updated" (Filter dropdown) affect the currently shown tab which is "Trending", but are displayed on the top-level tab bar
- "Visibility" acts just as another filter on the same level, and is shown in the right hierarchy.
For groups, e. g. https://gitlab.com/dashboard/groups this behavior is the same but correct because there is only one tab bar. Same for "Starred projects".
Solution
MVC
What we should do right now.
| Your projects | Starred projects | Explore projects |
|---|---|---|
 |
 |
 |
Changes required
- Changing breadcrump to page title is covered via https://gitlab.com/gitlab-org/gitlab-ce/issues/51190 in the same milestone
- remove breadcrumbs
- move the 'New project' button to the far right, aligned with the title
'Your projects' page
- update the search box according to the updated pattern and guidelines
- add a 'Sort by' label for the sorting dropdown
- move the searchbox and sort dropdown to the second level of tabs
'Starred projects' page
- update the search box according to the updated pattern and guidelines
- add a 'Sort by' label for the sorting dropdown
- the search box and sort by dropdown remain in the first level of tabs
'Explore projects' page
- update the search box according to the updated pattern and guidelines
- add a 'Sort by' label for the sorting dropdown
- move the searchbox and sort dropdown to the second level of tabs
Goal
This is what we want this page to be like in the near future.
- Remove the second level of tabs in the 'Your projects' page
- Add a 'Your personal projects' tab in the main tab bar
- Remove the second level of tabs in the 'Explore projects' page
- Add a filtering search bar in the 'Explore projects' page.
This way, we completely remove the second-level tab bars and the UI becomes more consistent and easier to use.