Show projects of sub groups on parent group page

Resources

FE @kushalpandya | UX @hazelyang

One request was to show projects of sub groups on the parent group page.

• Currently, subgroups are difficult to discover as you need to click on the Subgroups tab on the group
• Additionally, navigating multi levels of subgroups is cumbersome, it takes 3 clicks to navigate to a list of projects in two level of subgroups, each time having to click on the Subgroups tab, wait for page load, etc...

Description

Show tree-based navigation of projects and subgroups on the Group page.

Reuse design from https://gitlab.com/gitlab-org/gitlab-ce/issues/25426

Design

• Default status of lists --> Collapsed
• Removed Projects and Subgroups tabs.
• 'New project' and 'New subgroup' buttons are merged to be a single button.
• Add "fa-folder + counter" in the list.
• Mouse over:
  • fa-bookmark, "Project" in a tooltip appears.
  • fa-folder, "Subgroup" in a tooltip appears.
  • fa-users, "Member" in a tooltip appears.

Collapsed	Expanded	Button

How the lists align

If the lists are in the same level, the folder icons will align like the image below. The folder icons won't align with the arrow-right icon.